/* ===========================================================================
   DER OEFFENTLICHE KOPF - EINMAL GEBAUT, UEBERALL DERSELBE
   ===========================================================================
   Schritt 2 der Migrationsreihenfolge (docs/DESIGN_SYSTEM.md §10). Bis hierher
   hatte JEDE oeffentliche Seite ihren eigenen Kopf: landing_neu.html das echte
   Logo als Schriftzug mit 30px und ein Menue, funktionen.html ein 46px grosses
   Symbol, KEIN Menue, andere Knopfform und einen blauen Schein unter dem
   Hauptknopf. Das ist der "sichtbarste Bruch" aus §10 Zeile 2 - und er entstand
   nicht aus Absicht, sondern daraus, dass es den Kopf zweimal gab.

   WARUM EINE EIGENE DATEI UND KEINE ZWEITE KOPIE: §7.3 sagt es direkt - "ein
   Baustein, der zweimal vorkommt, bekommt eine Klasse, keine zweite Kopie mit
   leicht anderen Werten". Zwei Kopien laufen immer auseinander; die Frage ist
   nur, nach wie vielen Monaten.

   ZWEI REGELN, DIE DIESE DATEI TRAGFAEHIG MACHEN
   ----------------------------------------------
   1. ALLES HAENGT UNTER `nav.kopf`. Die oeffentlichen Seiten bringen eigene
      Stilbloecke mit, in denen `.logo` (Fussleiste!) und `.btn` schon belegt
      sind. Ohne diese Verankerung wuerde je nach Seite mal diese, mal jene
      Regel gewinnen - genau der Zustand, den diese Datei beendet.

      SEIT v2.275.0 MIT DER KLASSE, VORHER NUR `nav`. Das war zu gierig, und
      es ist beim Bau der ersten Themenseite aufgefallen: sie bekam einen
      Brotkrumen-Pfad als `<nav>`, und der wurde damit prompt zu einer
      klebenden Milchglas-Leiste mit eigener z-Ebene - mitten im Text. Ein
      Stylesheet, das ein GATTUNGS-Element beansprucht, verbietet dem Rest
      des Projekts stillschweigend, dieses Element zu benutzen. `<nav>` ist
      aber genau das Element, das eine Seite fuer Brotkrumen und
      Themenlisten braucht, und die Auszeichnung ist nichts Kosmetisches:
      Screenreader springen danach.
      Merksatz: was einem bestimmten Baustein gehoert, wird auch nach ihm
      benannt - nicht nach dem HTML-Element, in dem er zufaellig steckt.
   2. DIE KNOEPFE HEISSEN `.kopf-btn`, NICHT `.btn`. `.btn` ist auf jeder Seite
      anders definiert (landing_neu: 11px/20px, funktionen: 8px/16px mit
      blauem Schein). Ein Kopf, der sich `.btn` ausleiht, sieht deshalb auf
      jeder Seite anders aus. Eigene Namen sind hier keine Erbsenzaehlerei,
      sondern der ganze Punkt.

   DIE BREITE bringt der Kopf selbst mit (1280px, Begruendung an der Regel).
   Von der Seite kommt nur `--gap`, der seitliche Rand, damit Kopfrand und
   Inhaltsrand buendig stehen; fehlt er, greift `var(--s-5)`.

   VERBUNDEN MIT
   -------------
   * templates/teile/kopf-oeffentlich.html - das zugehoerige Markup
   * static/css/design-tokens.css           - alle Werte kommen von dort
   * templates/landing_neu.html, funktionen.html, mitgliedschaft.html
     - binden beides ein
   * qa/unit/test_kopf_oeffentlich.py       - haelt fest, dass es EIN Kopf bleibt
   =========================================================================== */

/* DREI FELDER, NICHT ZWEI: Logo links, Menue MITTIG, Knoepfe rechts. Das Menue
   sitzt in einem eigenen, absolut zentrierten Block - haengte es im Fluss,
   wanderte seine Mitte mit der Breite des Logos und der Knoepfe und waere nie
   wirklich mittig. */
nav.kopf{position:sticky;top:0;z-index:120;
  /* Milchglas: die Leiste liegt ueber dem Inhalt und muss ihn durchscheinen
     lassen, deshalb ein Ton MIT Deckkraft. Erste Zeile ist der Rueckfall fuer
     aeltere WebViews (Android/iOS-Huelle), die color-mix noch nicht koennen -
     sie ueberlesen die zweite Zeile einfach. Die zweite nimmt die Flaeche aus
     dem Woerterbuch und traegt damit spaeter den Dunkelmodus mit. */
  background:rgba(255,255,255,.9);
  background:color-mix(in srgb, var(--card) 90%, transparent);
  backdrop-filter:saturate(180%) blur(14px);border-bottom:1px solid var(--hair);
  padding-top:env(safe-area-inset-top,0px);}
/* DER KOPF BRINGT SEINE EIGENE BREITE MIT - und nimmt NICHT die der Seite.
   Das ist beim Bauen schiefgegangen und deshalb hier ausgeschrieben: erst
   stand hier `var(--wrap)`, also die Inhaltsbreite der jeweiligen Seite. Auf
   der Startseite (1280px) passte alles, auf funktionen.html (1120px) lief das
   Menue sofort wieder unter die Knoepfe. Der Grund: das Menue ist am
   BILDSCHIRM zentriert, die Knoepfe sitzen am Rand des Inhalts. Wird der
   Inhalt schmaler, ruecken die Knoepfe nach innen - das Menue aber nicht.
   Jede Seite haette also ihre eigene Schwelle gebraucht, und die naechste
   Seite mit einer dritten Breite waere still wieder kaputt gewesen.
   Mit einer festen Kopfbreite gilt die gemessene Schwelle (unten, 1090px)
   auf JEDER Seite. Der Preis ist sichtbar und bewusst: auf Seiten mit
   schmalerem Inhalt steht das Logo etwas weiter aussen als der Text darunter.
   Ein gleicher Kopf auf allen Seiten ist das laut §2 wert. */
nav.kopf .nav-in{max-width:1280px;margin:0 auto;padding:var(--s-3) var(--gap, var(--s-5));
  display:flex;align-items:center;position:relative;}

/* WIE HOCH DER KOPF IST - als Wert, damit niemand mehr nachmessen muss.
   Anlass: funktionen.html haengt seine Gruppenleiste mit `position:sticky`
   direkt unter den Kopf und hatte dafuer `top:59px` einprogrammiert. Solche
   abgeschriebenen Zahlen sind stumme Fallen - aendert sich hier ein Abstand,
   klafft dort eine Luecke oder die Leiste rutscht unter den Kopf, und beim
   Lesen der einen Datei sieht man den Zusammenhang nicht.
   Gerechnet, nicht geschaetzt: zweimal Innenabstand + die Hoehe der Zeile +
   die 1px-Linie unten, dazu der Bereich hinter der Statusleiste (iOS-Huelle).

   DIE HOEHE DER ZEILE MACHEN DIE KNOEPFE, NICHT DAS LOGO (30px) - genau das
   war beim ersten Anlauf falsch gerechnet, und die Gruppenleiste auf
   funktionen.html rutschte 8px unter den Kopf. Damit die Zahl ueberhaupt
   stimmen KANN, bekommt der Knopf unten eine feste Zeilenhoehe: sonst haengt
   seine Hoehe an der line-height der jeweiligen Seite (Startseite 1.6,
   funktionen 1.55) und der Kopf waere auf jeder Seite anders hoch.
   WARUM AUSGERECHNET 21px und keine rundere Zahl: das ist die Hoehe, die der
   Knopf auf der Startseite HEUTE schon hat (13px * 1.6). Ein runderer Wert
   haette den Kopf dort um einen Pixel verschoben - eine Aenderung ohne
   Gegenwert an einer Seite, die live ist.
     16px Innenabstand + 21px Zeile + 2px Rand = 39px                       */
:root{ --kopf-zeile: 39px;
       --kopf-hoehe: calc(env(safe-area-inset-top,0px) + var(--s-3)*2 + var(--kopf-zeile) + 1px); }

/* Das ECHTE Logo (static/images/logo2.png), nicht ein nachgebautes blaues
   Quadrat mit Schriftzug daneben. Eine Marke, die auf ihrer eigenen Seite
   nachgezeichnet wird, ist keine Marke. Und ueberall DIESELBE Groesse (§2):
   funktionen.html zeigte es mit 46px, die Startseite mit 30px - beim Wechsel
   sprang das Logo. */
nav.kopf .logo{display:flex;align-items:center;}
nav.kopf .logo img{height:30px;width:auto;display:block;}
nav.kopf .logo .logo-eng{display:none;}

nav.kopf .nav-mitte{position:absolute;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:var(--s-1);}
nav.kopf .nav-mitte > a,nav.kopf .nav-dd > button{display:inline-flex;align-items:center;gap:var(--s-1);
  padding:var(--s-2) var(--s-3);border-radius:var(--r-control);font-size:var(--fs-md);font-weight:500;color:var(--sub);
  /* Zeilenhoehe fest, aus demselben Grund wie beim Knopf: sonst bestimmt die
     line-height der jeweiligen Seite, wie hoch die Hover-Flaeche wird (40px
     auf der Startseite, 39.3px auf funktionen). 24px ist zugleich ein Wert
     aus der Abstandsreihe (§4.2) und genau die Hoehe von heute. */
  line-height:24px;
  white-space:nowrap;transition:background .13s,color .13s;
  /* font:inherit, weil <button> sonst die Schrift des Systems nimmt und die
     zwei Klapp-Punkte anders aussaehen als die drei Links daneben. Auf der
     Startseite erledigte das eine seitenweite button{}-Regel - die gibt es
     hier nicht, und darauf darf sich der Kopf auch nicht verlassen. */
  font-family:inherit;background:none;border:none;cursor:pointer;}
nav.kopf .nav-mitte > a:hover,nav.kopf .nav-dd > button:hover,nav.kopf .nav-dd:hover > button{background:var(--surface-subtle);color:var(--ink);}
nav.kopf .nav-dd{position:relative;}
nav.kopf .nav-dd > button svg{width:13px;height:13px;stroke-width:2.2;transition:transform .15s;}
nav.kopf .nav-dd:hover > button svg{transform:rotate(180deg);}

/* --e-2 ist KEIN neuer Schatten: das Woerterbuch hat diese Stufe aus genau
   dieser Regel uebernommen (docs/DESIGN_SYSTEM.md §5). Hier steht jetzt nur
   der Name statt der Zahlen. */
nav.kopf .nav-pop{position:absolute;top:calc(100% + var(--s-2));left:50%;transform:translateX(-50%) translateY(-4px);
  min-width:290px;background:var(--card);border:1px solid var(--line);border-radius:var(--r-card);padding:var(--s-2);
  box-shadow:var(--e-2);opacity:0;visibility:hidden;
  transition:opacity .14s,transform .14s,visibility .14s;}
nav.kopf .nav-dd:hover .nav-pop,nav.kopf .nav-dd:focus-within .nav-pop{opacity:1;visibility:visible;transform:translateX(-50%);}
nav.kopf .nav-pop a{display:flex;gap:var(--s-3);align-items:flex-start;padding:var(--s-2);border-radius:var(--r-control);transition:background .12s;}
nav.kopf .nav-pop a:hover{background:var(--surface-subtle);}
nav.kopf .nav-pop .np-ic{width:var(--s-6);height:var(--s-6);border-radius:var(--r-control);background:var(--brand-soft);color:var(--brand);
  display:flex;align-items:center;justify-content:center;flex:none;}
nav.kopf .nav-pop .np-ic .ic{width:16px;height:16px;}
/* Titel und Beiwerk stehen auf zwei Stufen der Skala statt auf 14px und
   12.5px. Der halbe Pixel war Altlast (§4.3), und der Abstand zwischen den
   beiden Stufen macht sichtbar, was Ueberschrift ist und was Erlaeuterung. */
nav.kopf .nav-pop b{display:block;font-size:var(--fs-md);font-weight:600;line-height:1.35;}
nav.kopf .nav-pop small{display:block;font-size:var(--fs-xs);color:var(--muted);line-height:1.4;}

/* Die Symbole im Klapp-Menue. Auf den oeffentlichen Seiten wird der
   Lucide-Runtime NICHT geladen (er zeichnet erst nach dem JavaScript - auf
   einer Verkaufsseite waere das ein sichtbares Nachspringen, und ohne
   JavaScript fehlten die Symbole ganz, §6.3). Deshalb steht der Pfad im
   Markup, aber Groesse und Strichstaerke kommen AUSSCHLIESSLICH von hier -
   nie einzeln am <svg>. Genau daran lagen die Unterschiede zwischen den
   Seiten: mal stroke-width 1.8, mal 2. */
nav.kopf .ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none;}

nav.kopf .nav-rechts{margin-left:auto;display:flex;align-items:center;gap:var(--s-2);}

/* ===== Die Knoepfe des Kopfes =========================================
   EIGENE NAMEN, siehe Kopfkommentar: .btn ist auf jeder Seite anders belegt.
   funktionen.html gab dem Hauptknopf zusaetzlich einen blauen Schein
   (box-shadow mit rgba(46,91,255,.28)) - das ist Effekt ohne Bedeutung und
   widerspricht dem Grundsatz "Ruhe traegt die Seite" (§1). Er ist weg. */
nav.kopf .kopf-btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--s-2);
  padding:var(--s-2) var(--s-4);font-weight:600;font-size:var(--fs-sm);line-height:21px;
  border-radius:var(--r-control);border:1px solid transparent;white-space:nowrap;
  transition:background .14s,border-color .14s,color .14s;}
nav.kopf .kopf-btn-p{background:var(--brand);color:var(--card);}
nav.kopf .kopf-btn-p:hover{background:var(--brand-dk);}
nav.kopf .kopf-btn-g{background:var(--card);border-color:var(--line);color:var(--ink);}
nav.kopf .kopf-btn-g:hover{background:var(--surface-subtle);}

/* DIE SCHWELLE IST GEMESSEN, NICHT GERATEN (Befund 11.08.2026).
   Sie stand auf 1060px - und zwischen 1061px und 1138px lief das mittlere
   Menue UNTER die Knoepfe rechts: "Fragen" verschwand hinter "Anmelden",
   unlesbar und nicht anklickbar. Der Grund steckt im Aufbau: das Menue ist
   ABSOLUT zentriert (siehe oben). Ein absolut gesetzter Block schiebt nichts
   zur Seite - er legt sich darueber. Deshalb kann kein flex-Umbruch das
   auffangen, es geht nur ueber die Schwelle.
   NEU GEMESSEN am 11.08.2026, nachdem das Menue "Klasse" entfallen ist: das
   Menue wurde dadurch 94px schmaler, und die alte Schwelle haette es auf
   Bildschirmen versteckt, auf denen es laengst passt. Mit ruhiger Luft
   (>= 21px zwischen Menue und Knopf) sitzt es ab 1091px.
   WER HIER EINEN MENUEPUNKT ERGAENZT ODER ENTFERNT, MISST NEU. Die Zahl ist
   kein runder Wert, den man schaetzen kann - sie haengt an der Textbreite der
   Punkte.
   DER KNOPF DES KLAPP-MENUES steht VOR der Media-Regel, nicht dahinter.
   Beim Bauen war es andersherum, und der Knopf blieb auf jeder Breite
   unsichtbar: bei gleicher Spezifitaet gewinnt die SPAETERE Regel, also
   schlug das `display:none` der Grundregel das `display:inline-flex` aus der
   Media-Regel. Eine Media-Regel ist kein staerkerer Selektor - sie ist nur
   eine Bedingung.
   QUADRATISCH IN DER HOEHE DER ZEILE, und zwar als var(--kopf-zeile) statt
   als abgeschriebene 39px: waere der Knopf HOEHER als die Zeile, wuerde er
   die Kopfhoehe bestimmen und --kopf-hoehe waere still falsch - genau die
   Falle, die die Gruppenleiste auf funktionen.html schon einmal unter den
   Kopf rutschen liess. */
nav.kopf .kopf-burger{display:none;align-items:center;justify-content:center;
  width:var(--kopf-zeile);height:var(--kopf-zeile);padding:0;flex:none;cursor:pointer;
  background:var(--card);border:1px solid var(--line);border-radius:var(--r-control);
  color:var(--ink);transition:background .14s;}
nav.kopf .kopf-burger:hover{background:var(--surface-subtle);}
nav.kopf.offen .kopf-burger{background:var(--surface-subtle);}

/* SEIT v2.273.0 IST DAS KEINE SACKGASSE MEHR: unterhalb der Schwelle
   verschwindet das Menue nicht, es WECHSELT DIE FORM - aus der zentrierten
   Zeile wird eine Liste unter dem Kopf, geoeffnet ueber den Knopf rechts.
   Das Markup ist dasselbe (§7.3); ein zweites Menue fuer schmale Schirme
   waere eine Kopie, und Kopien laufen auseinander. */
@media(max-width:1090px){
  /* DER KNOPF SITZT ZWISCHEN LOGO UND KNOEPFEN, nicht am Ende der Zeile
     (Murat 22.08.2026). Er ist seit v2.356.0 ein eigenes Kind von .nav-in
     und teilt sich den freien Platz mit `margin:auto` nach BEIDEN Seiten -
     damit steht er mittig zwischen Marke und Angebot, waehrend "Anmelden"
     und "Kostenlos starten" geschlossen rechts bleiben.
     Dass .nav-rechts hier sein `margin-left:auto` zurueckgibt, gehoert
     dazu und ist kein Versehen: bliebe es stehen, gaebe es DREI
     auto-Raender in derselben Zeile, der Platz wuerde im Verhaeltnis 1:2
     verteilt und der Knopf saesse sichtbar zu weit links. Die Knoepfe
     stehen trotzdem aussen, weil der Knopf sie mit seinem rechten
     auto-Rand dorthin schiebt.
     Geaendert wird AUSSCHLIESSLICH in diesem Block - oberhalb von 1091px
     ist der Knopf gar nicht sichtbar, dort aendert sich nichts. */
  nav.kopf .kopf-burger{display:inline-flex;margin-left:auto;margin-right:auto;}
  nav.kopf .nav-rechts{margin-left:0;}

  /* AUS DER ZEILE WIRD EINE LISTE. Drei Dinge muessen dafuer zurueckgenommen
     werden, die den Kopf am Rechner tragen: die absolute Zentrierung, die
     waagerechte Richtung und die Nicht-Sichtbarkeit.
     `top:100%` haengt sie unter .nav-in - und weil DAS der Block mit
     `position:relative` ist, sitzt sie damit unter dem Kopf und nicht unter
     dem Fenster. */
  nav.kopf .nav-mitte{position:absolute;top:100%;left:0;right:0;transform:none;
    display:none;flex-direction:column;align-items:stretch;gap:var(--s-1);
    background:var(--card);border-bottom:1px solid var(--hair);
    box-shadow:var(--e-2);padding:var(--s-3);
    /* 100dvh statt 100vh: auf dem Telefon zaehlt vh die Adresszeile mit, die
       beim Scrollen verschwindet - die Liste waere dort hoeher als der
       sichtbare Bereich und ihr letzter Punkt unerreichbar. */
    max-height:calc(100dvh - var(--kopf-hoehe));overflow-y:auto;}
  nav.kopf.offen .nav-mitte{display:flex;}

  /* "Unterricht" klappt hier NICHT auf, es steht offen. Ein zweiter
     Klapp-Schritt waere ein Klick zu viel auf einem Geraet, auf dem der
     erste schon eine Entscheidung war. Der Knopf bleibt als UEBERSCHRIFT
     stehen: ohne ihn stuenden fuenf Punkte ohne Zusammenhang da. */
  nav.kopf .nav-dd > button{width:100%;justify-content:flex-start;pointer-events:none;
    color:var(--muted);font-size:var(--fs-xs);font-weight:600;
    text-transform:uppercase;letter-spacing:.06em;padding:var(--s-1) var(--s-2);}
  nav.kopf .nav-dd > button svg{display:none;}
  nav.kopf .nav-pop{position:static;transform:none;opacity:1;visibility:visible;
    min-width:0;background:none;border:none;box-shadow:none;padding:0;}
  nav.kopf .nav-mitte > a{padding:var(--s-3) var(--s-2);font-size:var(--fs-base);
    font-weight:600;color:var(--ink);}
  /* Trennlinie zwischen dem Block "Unterricht" und den drei Einzelpunkten -
     sonst liest sich die Liste als ein einziger Stapel. */
  nav.kopf .nav-dd{border-bottom:1px solid var(--hair);padding-bottom:var(--s-2);
    margin-bottom:var(--s-1);}
}


/* AUF DEM TELEFON BLEIBT "ANMELDEN" STEHEN (Befund 10.08.2026).
   Es war ausgeblendet, weil der Schriftzug daneben die halbe Zeile nahm -
   aber eine Seite ohne Anmelde-Weg ist fuer jede Lehrkraft, die schon ein
   Konto hat, eine Sackgasse. Das Platzproblem wird am LOGO geloest
   (quadratisches Zeichen statt Schriftzug) und an der Knopfgroesse, nicht
   dadurch, dass der Weg verschwindet.
   Geaendert wird AUSSCHLIESSLICH in diesem schmalen Block - die Grundregeln
   oben bleiben unangetastet (CLAUDE.md, "schmal aendern heisst SCHMAL
   aendern"). */
@media(max-width:620px){
  /* Schmaler Kopf: anderer Innenabstand, anderes Logo - also auch eine
     andere Hoehe. Wer --kopf-hoehe benutzt, bekommt sie automatisch. */
  :root{ --kopf-hoehe: calc(env(safe-area-inset-top,0px) + var(--s-2)*2 + var(--kopf-zeile) + 1px); }
  nav.kopf .logo .logo-breit{display:none;}
  nav.kopf .logo .logo-eng{display:block;height:32px;}
  nav.kopf .nav-in{padding:var(--s-2) var(--s-4);gap:var(--s-2);}
  nav.kopf .nav-rechts{gap:var(--s-1);}
  nav.kopf .kopf-btn{padding:var(--s-2) var(--s-3);}
}
