/* =============================================================
   Seitenrahmen und Kopf — EINE Quelle für jede Seite
   =============================================================
   Geladen von allen Seiten mit Kopf, auch von der Startseite, die app.css
   nicht lädt — deshalb stehen die Kopf-Regeln hier und nicht dort. Ziel: der
   farbige Balken steht auf jeder Seite an derselben Stelle, in derselben
   Breite und Höhe; nur sein Inhalt wechselt.

   Gemessen vorher (10.10.2026, echte Seiten):
     Desktop 1280 px   Rechner 968 × 112 px, 24 px von oben, klebend
                       Startseite 860 × 98 px, 16 px von oben, nicht klebend
     Handy 375 px      Rechner 164 px (Unterzeile 2 Zeilen), Lager 184 px
                       (3 Zeilen), Startseite 85 px ohne Balken
   Ursachen: umbrechende Unterzeilen, ein eigener Rahmen der Startseite
   (schmaler, senkrecht zentriert), andere Zeilenhöhe dort.

   Deshalb: fester Rahmen, Titel und Unterzeile je genau EINE Zeile (zu
   Langes endet auf …) — damit ist die Kopfhöhe eine Konstante:
     Desktop   1,5 + 2,4 + 0,25 + 1,35 + 1,5 rem = 112 px
     ≤ 640 px  3,75 + 2,025 + 0,25 + 1,35 + 1,5 rem = 142 px
   jeweils plus 2 px Glaskante (Rahmen oben und unten, .kopf-farbe).

   Farbe: die Töne des Kopfes (--kopf-a…d) und die Akzentfarbe der
   Bedienelemente (--blue … --fill-blue-deep) setzt aquarium.js je Aquarium;
   kopf-start.js setzt sie schon vor dem ersten Bild.
   ============================================================= */

/* Platz für die Bildlaufleiste immer freihalten: sonst ist eine kurze Seite
   (ohne Leiste) breiter als eine lange, und alles rückt beim Wechsel um die
   Breite der Leiste zur Seite. Bei Leisten, die nur beim Scrollen
   eingeblendet werden (macOS-Standard), ändert das nichts. */
html { scrollbar-gutter: stable; }

/* Rahmen: wie main in app.css — 1000 px, 1 rem Rand, 1,5 rem nach oben */
body > main, body > .container { max-width: 1000px; width: auto; margin: 0 auto; padding: 1.5rem 1rem 3rem; }

/* ---------- Kopf ----------
   Klebt oben, auf jeder Breite — die Tab-Leiste darunter ebenso (unten).
   Beim Scrollen schwebt er mit einem halben rem Abstand unter dem Rand, damit
   man den Inhalt rundherum durchziehen sieht (Glas, unten). */
header {
  position: sticky; top: 0.5rem; z-index: 30;
  background: linear-gradient(135deg, var(--fill-blue), var(--fill-blue-deep));
  color: #fff; text-align: center; border-radius: 12px;
  padding: 1.5rem 2rem; margin-bottom: 1.5rem; line-height: 1.5;
}
header h1, header p { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #fff; }
/* Der Titel teilt sich die Höhe mit ☰ und dem Konto-Knopf — seitlich so viel
   Platz, dass ein langer Titel nicht darunter läuft */
header h1 { font-size: 1.6rem; font-weight: 700; margin: 0; padding: 0 9.5rem; }
header p  { font-size: 0.9rem; font-weight: 400; opacity: 0.85; margin: 0.25rem 0 0; }

/* ☰ und Konto-Knopf: gleiche Lage auf jeder Seite */
.back-btn { position: absolute; top: 1rem; left: 1rem; width: 36px; height: 36px; display: flex; flex-direction: column;
  justify-content: center; align-items: center; gap: 5px; background: rgba(255,255,255,0.15); border: none; border-radius: 8px;
  cursor: pointer; padding: 0; text-decoration: none; transition: background 0.15s; z-index: 2; }
.back-btn:hover { background: rgba(255,255,255,0.28); }
.back-btn span { display: block; width: 18px; height: 2px; background: #fff; border-radius: 2px; }
header .as-btn { position: absolute; top: 1rem; right: 1rem; }

/* ---------- ☰-Menü ----------
   Inhalt und Verhalten aus /assets/nav-menu.js. Die Startseite hat die
   Farbrollen aus app.css nicht, daher Ersatzwerte. */
.nav-dropdown { position: absolute; top: 1rem; left: 1rem; z-index: 20; }
.nav-dropdown .back-btn { position: static; }   /* Position übernimmt der Wrapper */
.nav-dropdown::after {                           /* unsichtbare Brücke über den Spalt zum Menü */
  content: ""; position: absolute; top: 100%; left: 0; width: 220px; max-width: 70vw; height: 10px; }
.nav-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; background: var(--card); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.18); padding: 0.35rem; opacity: 0; visibility: hidden;
  transform: translateY(-6px); pointer-events: none; transition: opacity 0.15s, transform 0.15s, visibility 0.15s;
  text-align: left; }
.nav-dropdown:hover .nav-menu, .nav-dropdown:focus-within .nav-menu { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; }
/* Beim Scrollen zugeklappt. Auf dem Handy bleibt nach einem Tipp sowohl der
   :hover- als auch der :focus-within-Zustand hängen — das Menü scrollte
   einfach mit. Gesetzt und wieder entfernt wird die Klasse in nav-menu.js.
   Gleiche Spezifität wie die Regel darüber (0,3,0), steht aber später und
   gewinnt deshalb. */
.nav-dropdown.zugeklappt .nav-menu { opacity: 0; visibility: hidden; transform: translateY(-6px); pointer-events: none; }
.nav-menu-item { display: block; padding: 0.55rem 0.8rem; border-radius: 7px; text-decoration: none; color: var(--text);
  font-size: 0.9rem; font-weight: 600; white-space: nowrap; text-shadow: none; line-height: 1.5; }
.nav-menu-item:hover { background: var(--blue-light, rgba(52,152,219,0.12)); color: var(--blue-dark, var(--accent-dark)); }
.nav-menu-item.current { background: var(--fill-blue); color: #fff; }
.nav-menu-item.overview { color: var(--text-light); border-bottom: 1px solid var(--border); border-radius: 0; margin-bottom: 0.25rem; padding-bottom: 0.6rem; }
.nav-menu-item.overview:hover { color: var(--blue-dark, var(--accent-dark)); background: var(--blue-light, rgba(52,152,219,0.12)); }
/* Name des Aquariums über seinen Rechnern */
.nav-menu-kopf { padding: 0.5rem 0.8rem 0.25rem; font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--text-light); white-space: nowrap; text-shadow: none; line-height: 1.5; }

/* Schmal: ☰ und Konto-Knopf in eigener Zeile über dem Titel. Sie liegen
   absolut und reservieren keinen Platz; gemessen kollidierte der Chip bis
   520 px mit dem Titel. Statt an Breiten zu feilen (Titellänge und
   Anmeldename sind beide variabel) bekommen sie ihre eigene Zeile: bei
   top:1rem und 36 px hoch, der Titel beginnt darunter. */
@media (max-width: 640px) {
  header { padding-top: 3.75rem; }
  header h1 { font-size: 1.35rem; padding: 0; }
}

/* ---------- Tab-Leiste klebt unter dem Kopf ----------
   sticky-kopf.js misst die Kopfhöhe und schreibt sie als --kopfhoehe an
   :root. Nur die Zahl kommt von dort — die Regel, was damit passiert, steht
   hier. Das halbe rem ist der Abstand des schwebenden Kopfes zum Rand. */
.tabs { position: sticky; top: calc(var(--kopfhoehe, 0px) + 0.5rem); z-index: 25;
  box-shadow: var(--shadow), 0 6px 12px -8px rgba(0,0,0,0.35); }

/* ---------- Zusammengeschrumpfter Kopf, nur auf schmalen Schirmen ----------
   Beim Scrollen schrumpft er auf eine Zeile, weil dort jeder Pixel zählt:

       ☰    Überschrift    (M)

   Am Desktop bleibt er in voller Größe; ein wechselndes Aussehen wäre dort
   nur unruhig. WANN es gilt, entscheidet sticky-kopf.js (.kopf-kompakt). */
@media (max-width: 760px) {
  header { transition: padding 0.18s ease, margin-bottom 0.18s ease; }
  header h1 { transition: font-size 0.18s ease; }
  header p { max-height: 4rem; transition: max-height 0.18s ease, opacity 0.14s ease, margin-top 0.18s ease; }
  .as-btn-label { display: inline-block; overflow: hidden; max-width: 120px;
                  transition: max-width 0.18s ease, opacity 0.14s ease; }
  .back-btn, .nav-dropdown, header .as-btn { transition: top 0.18s ease; }

  header.kopf-kompakt { padding-top: 1rem; padding-bottom: 1rem; margin-bottom: 0.75rem; }
  header.kopf-kompakt h1 { font-size: 1.05rem; padding: 0 3.25rem; }
  header.kopf-kompakt p { max-height: 0; opacity: 0; margin-top: 0; }
  header.kopf-kompakt .as-btn-label { max-width: 0; opacity: 0; }

  /* Alle drei auf eine Linie — auf die Mitte des Kopfes bezogen, unabhängig
     von Schriftgröße und Zeilenhöhe */
  header.kopf-kompakt .nav-dropdown,
  header.kopf-kompakt .back-btn:not(.nav-dropdown .back-btn),
  header.kopf-kompakt .as-btn { top: 50%; transform: translateY(-50%); }

  /* Ohne den Namen ist der Chip ein Quadrat um den Kreis */
  header.kopf-kompakt .as-btn { width: 36px; padding: 0; gap: 0; justify-content: center; }
}

/* ---------- Farbe und Lavalampe ----------
   Die Töne rechnet akzent.js (kopfToene) je Modus; aquarium.js (kopfFarbe)
   setzt sie als Variablen am Kopf. Als @property registriert, damit sie sich
   überblenden lassen — wechselt man das Aquarium, blendet der Kopf von der
   alten Farbe in die neue. Darin wabern drei weichgezeichnete Farbwolken
   sehr langsam (17–25 s je Zyklus): Bewegung, die man bemerkt, aber nicht
   ansieht. */
@property --kopf-a { syntax: "<color>"; inherits: true; initial-value: #3498db; }
@property --kopf-b { syntax: "<color>"; inherits: true; initial-value: #2980b9; }
@property --kopf-c { syntax: "<color>"; inherits: true; initial-value: #7fd0ff; }
@property --kopf-d { syntax: "<color>"; inherits: true; initial-value: #8e7cf0; }
header.kopf-farbe { background: var(--kopf-b); isolation: isolate;
  transition: --kopf-a 1.6s ease, --kopf-b 1.6s ease, --kopf-c 1.6s ease, --kopf-d 1.6s ease; }
@media (max-width: 760px) {
  header.kopf-farbe { transition: --kopf-a 1.6s ease, --kopf-b 1.6s ease, --kopf-c 1.6s ease, --kopf-d 1.6s ease,
    padding 0.18s ease, margin-bottom 0.18s ease; }
}
/* Eigene Ebene statt overflow:hidden am Kopf — sonst schnitte er die Menüs
   von ☰ und Konto-Knopf ab, die über ihn hinausragen */
header.kopf-farbe > .lava { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; z-index: 0;
  pointer-events: none;
  background: linear-gradient(135deg, color-mix(in oklab, var(--kopf-a) 76%, transparent), color-mix(in oklab, var(--kopf-b) 84%, transparent)); }
header.kopf-farbe > h1, header.kopf-farbe > p { position: relative; z-index: 1; text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
header.kopf-farbe > p { opacity: 0.95; }
/* Leiser Schleier hinter der Schrift: zieht eine helle Wolke durch die Mitte,
   bleibt der Titel trotzdem gut lesbar */
header.kopf-farbe > .lava::after { content: ""; position: absolute; inset: 0;
  background: radial-gradient(ellipse 55% 75% at 50% 55%, rgba(0,0,0,0.16), transparent 72%); }
.lava i { position: absolute; display: block; border-radius: 50%; filter: blur(24px); will-change: transform; }
/* Leuchten — hell, wandert quer */
.lava i:nth-child(1) { width: 50%; height: 260%; left: -12%; top: -85%; opacity: 0.55;
  background: radial-gradient(closest-side, var(--kopf-c), transparent); animation: lava-1 17s ease-in-out infinite alternate; }
/* Nachbarton — gegenläufig */
.lava i:nth-child(2) { width: 48%; height: 240%; right: -10%; top: -70%; opacity: 0.8;
  background: radial-gradient(closest-side, var(--kopf-d), transparent); animation: lava-2 21s ease-in-out infinite alternate; }
/* Tiefe — hält die Mitte dunkel genug für die Schrift */
.lava i:nth-child(3) { width: 40%; height: 200%; left: 30%; top: -30%; opacity: 0.7;
  background: radial-gradient(closest-side, var(--kopf-b), transparent); animation: lava-3 25s ease-in-out infinite alternate; }
@keyframes lava-1 { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(60%,14%) scale(1.2); } 100% { transform: translate(130%,-8%) scale(0.95); } }
@keyframes lava-2 { 0% { transform: translate(0,0) scale(1.05); } 50% { transform: translate(-65%,16%) scale(0.9); } 100% { transform: translate(-130%,-10%) scale(1.15); } }
@keyframes lava-3 { 0% { transform: translate(0,0) scale(1); } 50% { transform: translate(-50%,-14%) scale(1.25); } 100% { transform: translate(45%,12%) scale(0.9); } }

/* Farbpunkte (Kachel, Farbwahl): Töne des gerade gültigen Modus, siehe farbStil in akzent.js */
[style*="--farbe-hell"] { background: var(--farbe-hell); }
:root[data-theme="dark"] [style*="--farbe-hell"] { background: var(--farbe-dunkel); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) [style*="--farbe-hell"] { background: var(--farbe-dunkel); } }

/* ---------- Akzentfarbe der Bedienelemente ----------
   Dieselben fünf Variablen wie in app.css (auf der Startseite --accent/
   --accent-dark), je Aquarium neu gesetzt (aquarium.js). Als Farben
   registriert, damit ein Aquarium-Wechsel auch Knöpfe und Reiter überblendet.
   Beim Laden setzt kopf-start.js sie schon vor dem ersten Bild — da blendet
   nichts, außer die Farbe ändert sich wirklich. Die Startwerte sind die des
   Hellmodus; app.css setzt die echten Werte je Modus. */
@property --blue           { syntax: "<color>"; inherits: true; initial-value: #3498db; }
@property --blue-dark      { syntax: "<color>"; inherits: true; initial-value: #2574a7; }
@property --blue-light     { syntax: "<color>"; inherits: true; initial-value: #e8f4fb; }
@property --fill-blue      { syntax: "<color>"; inherits: true; initial-value: #3498db; }
@property --fill-blue-deep { syntax: "<color>"; inherits: true; initial-value: #2980b9; }
@property --accent         { syntax: "<color>"; inherits: true; initial-value: #3498db; }
@property --accent-dark    { syntax: "<color>"; inherits: true; initial-value: #2980b9; }
:root { transition: --blue 1.6s ease, --blue-dark 1.6s ease, --blue-light 1.6s ease, --fill-blue 1.6s ease,
                    --fill-blue-deep 1.6s ease, --accent 1.6s ease, --accent-dark 1.6s ease; }

/* ---------- Liquid Glass ----------
   Der Balken ist leicht durchscheinend: was unter ihm durchscrollt, wird
   weichgezeichnet, kräftiger gefärbt und ABGEDUNKELT (brightness). Das
   Abdunkeln hält die weiße Schrift lesbar, auch wenn eine helle Karte darunter
   liegt — ohne es würde der Balken über hellem Inhalt verblassen. Dazu eine
   helle Kante oben, ein Lichtschimmer von links oben und ein schwacher
   Innenschein — wie gewölbtes Glas. */
header.kopf-farbe {
  background: transparent;
  -webkit-backdrop-filter: blur(18px) saturate(1.6) brightness(0.78);
  backdrop-filter: blur(18px) saturate(1.6) brightness(0.78);
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 12px 32px -14px rgba(0, 0, 0, 0.45),
              inset 0 1px 0 rgba(255, 255, 255, 0.55),
              inset 0 -1px 1px rgba(255, 255, 255, 0.12),
              inset 0 0 24px rgba(255, 255, 255, 0.07);
}
/* ::after, damit der Schimmer nach den Farbwolken (.lava) gemalt wird, aber unter Schrift (z 1) und Knöpfen (z 2) */
header.kopf-farbe::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0;
  background: linear-gradient(165deg, rgba(255, 255, 255, 0.30) 0%, rgba(255, 255, 255, 0.07) 26%, transparent 46%,
                                       transparent 78%, rgba(255, 255, 255, 0.06) 100%); }
:root[data-theme="dark"] header.kopf-farbe { border-color: rgba(255, 255, 255, 0.16); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) header.kopf-farbe { border-color: rgba(255, 255, 255, 0.16); } }
/* „Transparenz reduzieren" in den Systemeinstellungen: undurchsichtig wie bisher */
@media (prefers-reduced-transparency: reduce) {
  header.kopf-farbe { -webkit-backdrop-filter: none; backdrop-filter: none; background: var(--kopf-b); }
  header.kopf-farbe > .lava { background: linear-gradient(135deg, var(--kopf-a), var(--kopf-b)); }
}

@media (prefers-reduced-motion: reduce) {
  :root { transition: none; }
  .lava i { animation: none; }
  header, header.kopf-farbe, header h1, header p, .as-btn-label, .back-btn, .nav-dropdown, header .as-btn { transition: none; }
}