/* Kopf- und Fußzeile wie auf raketenschule.com (Sarah 18.10.2026). Eigene
   Datei, damit app.css (Codex) unberührt bleibt; die Regeln überschreiben
   dort nur über die Klasse .wie-seite bzw. .nav-ind.

   Menüpunkt „Individuelles Lernen": auf der Website steht er in
   website/assets/site-nav.js. Schmal nur das Zeichen, der Name steht in
   aria-label und title. */
.sh-nav>a.nav-ind{gap:0}
@media(max-width:820px){.sh-nav>a.nav-ind .nav-lang{display:none}}

/* Gemeinsamer ruhiger Seitenabschluss mit gut erreichbaren Links. */
.foot.wie-seite{display:block;text-align:center;color:var(--gedaempft);font-size:13px;font-weight:600;
  padding:9px 16px;line-height:1.35;background:var(--karte);border-top:1px solid var(--linie);box-shadow:none}
.foot.wie-seite nav{display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:0 20px;max-width:1040px;margin:0 auto}
.foot.wie-seite a{display:inline;color:var(--gedaempft);font-weight:700;text-decoration:none}
.foot.wie-seite a:hover{color:var(--tinte);text-decoration:underline}
@media(max-width:520px){.foot.wie-seite{padding:9px 16px}.foot.wie-seite nav{gap:0 16px}}

/* Aufklappmenüs unter Lesen und Rechnen (menue.js, Daten public/menue.json).
   Werte aus website/assets/style.css (.dd). Der Link sitzt danach in einem
   .dd-Rahmen, darum die .sh-nav>a-Regeln aus app.css hier für .dd>a wiederholt. */
.sh-nav>.dd>a{display:inline-flex;align-items:center;justify-content:center;gap:5px;text-decoration:none;font:800 .95rem/normal var(--schrift);color:var(--tinte);border-radius:999px;padding:8px 15px;white-space:nowrap;transition:transform .08s,background .15s}
@media(hover:hover){.sh-nav>.dd>a:hover{background:var(--lesekasten);transform:translateY(-1px)}}
@media(max-width:520px){.sh-nav>.dd>a{padding:7px 12px;font-size:.88rem}}
@media(max-width:420px){.sh-nav>.dd>a{padding-inline:9px}}
@media(max-width:380px){.sh-nav>.dd>a{padding-inline:6px}}
.dd{position:relative;display:inline-flex}
.dd-panel{position:absolute;top:calc(100% + 8px);right:0;min-width:244px;background:var(--karte);
  border:1px solid var(--linie);border-radius:14px;box-shadow:0 3px 0 var(--linie),0 18px 40px #17394c1f;
  padding:8px;opacity:0;visibility:hidden;transform:translateY(-6px);
  transition:opacity .14s,transform .14s,visibility .14s;z-index:80}
.dd:hover .dd-panel,.dd:focus-within .dd-panel{opacity:1;visibility:visible;transform:translateY(0)}
.dd-group+.dd-group{margin-top:6px;border-top:1px solid var(--linie);padding-top:8px}
.dd-head{font-size:.72rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--gedaempft);padding:4px 12px 6px}
.dd-kl{font-size:.66rem;font-weight:700;color:var(--gedaempft);margin-left:4px}
.dd-item{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:10px;text-decoration:none;
  font-weight:800;color:var(--tinte);font-size:.96rem}
.dd-item:hover{background:var(--lesekasten)}
.dd-em{width:30px;height:30px;flex:0 0 auto;border-radius:9px;display:inline-flex;align-items:center;justify-content:center;
  font-size:1.05rem;background:var(--lesekasten)}
/* Schmal: Lesen sitzt hier weiter links als auf der Website (Mein Konto
   steht daneben), ein rechtsbündiges Panel liefe links aus dem Bild.
   Darum unter die Kopfzeile, volle Breite mit Rand. */
@media(max-width:520px){.dd-panel{position:fixed;top:62px;left:14px;right:14px;min-width:0;width:auto;max-height:calc(100dvh - 82px);overflow-y:auto;overscroll-behavior:contain}}