/* =========================================================================
   nav.css — Kopfzeile.
   -------------------------------------------------------------------------
   Links die Wortmarke ohne Flaeche, rechts eine laengliche Glasscheibe mit
   den drei Wegen. Dieselbe Bildsprache wie die Schaltflaechen, aber ohne
   Abstandshalter — eine Kopfzeile ist kein Schild an der Wand, sie liegt
   auf der Seite.

   Hover und aktiver Weg bekommen eine dezente Toenung ueber ihren
   Abschnitt — kein farbiger Block. Zur Grenze dieser Loesung siehe den
   Kommentar weiter unten und Uebergabe.md.

   Beim Scrollen verwandelt sich die Kopfzeile in eine Topbar. Das laeuft
   ueber scroll-driven CSS animations, NICHT ueber einen JS-scroll-Listener.
   js/main.js liefert nur den Fallback fuer Browser ohne Unterstuetzung.
   ========================================================================= */

/* Die Kopfzeile kommt ZUERST — sie ist der Rahmen, nicht der Inhalt.
   Erst steht der Raum, dann fuellt er sich. Die Animation sitzt auf
   .kopf selbst, weil Wortmarke und Scheibe beide schon eine Animation
   auf der Scroll-Zeitachse tragen; zwei Animationen mit verschiedenen
   Zeitachsen auf einem Element waeren unnoetig verwickelt. */
.kopf {
  animation: von-oben var(--dauer-auftritt) var(--kurve-weich) both;
  animation-delay: var(--versatz-kopf);
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: var(--ebene-kopf);
}

/* Der Schleier liegt als eigene Ebene darunter — so laesst sich allein
   seine Deckkraft animieren (laeuft auf dem Compositor). */
.kopf::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--schleier);
  -webkit-backdrop-filter: var(--schleier-blick);
  backdrop-filter: var(--schleier-blick);
  border-block-end: var(--rand-fein);
  opacity: 0;
  transition: opacity var(--dauer-mittel) var(--kurve-weich);
}

.kopf__innen {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--raum-5);
  height: var(--kopf-hoehe-frei);
  transition: height var(--dauer-mittel) var(--kurve-weich);
}

/* --- Wortmarke ----------------------------------------------------------
   Ohne Flaeche. Sie steht direkt auf dem Medium — dort, wo das Motiv
   ohnehin hell und ruhig ist. Petrol kommt auf 11,9:1.

   Das Minus traegt das Gruen-Tuerkis, nicht das reine Cyan: das kaeme
   auf dem hellen Grund auf 1,2:1 und waere schlicht weg. Derselbe Ton
   wie die drei Punkte der Headline — die beiden gehoeren zusammen. */
.kopf__marke {
  display: inline-flex;
  align-items: baseline;
  gap: 0.05em;
  color: var(--marke-schrift);
  font-size: var(--schrift-l);   /* eine Stufe groesser, Reys Mass */
  font-weight: var(--gewicht-schwer);
  letter-spacing: var(--sperrung-eng);
  text-decoration: none;
  transition:
    font-size var(--dauer-mittel) var(--kurve-weich),
    letter-spacing var(--dauer-mittel) var(--kurve-weich);
}
.kopf__marke-strich { color: var(--marke-strich); }

/* DER SCHLUSSPUNKT AN DER WORTMARKE — Reys Ansage vom 25.08.
   Damit tragen jetzt alle drei Ueberschriften-Ebenen dieselbe Klammer: die
   drei Zeilen der Headline, der Titel der Portfolio-Seite und der Name
   selbst. Ein Stilmittel, das an genau einer Stelle definiert ist
   (--hero-punkt) und ueberall dasselbe sagt.

   Der negative Aussenabstand hebt die Luecke der Marke wieder auf. Sie ist
   fuer den Geviertstrich da, der Luft braucht; "art" und sein Punkt gehoeren
   dagegen zusammen und duerfen nicht auseinanderfallen. */
.kopf__marke-punkt {
  margin-inline-start: -0.05em;
  color: var(--hero-punkt);
}

/* --- Die Wege, als Text ---------------------------------------------------
   Reys Vorschlag vom 25.08.: "Was waere, wenn wir das Glas aus der
   Navigation ganz entfernen. Sie etwas groesser machen und rein Text. Mit
   gruenem Punkt getrennte Items."

   Das ist dieselbe Linie wie beim Rest der Seite: Glas heisst nur etwas,
   solange es selten ist. Die Kopfzeile war die auffaelligste der letzten
   Stellen — eine Scheibe mit Rahmen, Flaeche, Innenglanz, Schlagschatten
   und diagonalem Lichtstreifen, fuer vier Woerter.

   WAS DIE SCHEIBE GETRAGEN HAT, TRAEGT JETZT ETWAS ANDERES:
   - Sie hat die vier Wege als EINE Gruppe zusammengefasst. Das macht jetzt
     der Trennpunkt — dasselbe Zeichen wie hinter der Wortmarke.
   - Sie hat die Wege vom Seitengrund abgehoben. Das macht jetzt der
     Schleier beim Scrollen, den es ohnehin gab und der ohne Scheibe
     wichtiger wird, nicht unwichtiger.
   - Ihr overflow hat den Fokusring beschnitten, weshalb der nach INNEN
     gelegt werden musste. Das faellt weg.
   -------------------------------------------------------------------------- */
.kopf__liste {
  display: flex;
  align-items: center;
  gap: var(--raum-4);

  /* Eine Stufe groesser als vorher: ohne Flaeche darunter braucht die
     Schrift selbst etwas mehr Gewicht im Bild. */
  font-size: var(--schrift-m);
  transition: font-size var(--dauer-mittel) var(--kurve-weich);
}

.kopf__liste li {
  display: flex;
  align-items: center;
  gap: var(--raum-4);
}

/* DER TRENNPUNKT. content: "" und nicht "·" — ein Satzzeichen als Inhalt
   liest manches Vorleseprogramm mit ("Punkt"), eine gezeichnete Form nicht.
   Er haengt am li, nicht am Verweis: So gehoert er zu keinem der beiden
   Nachbarn und faengt keinen Klick ab. */
.kopf__liste li + li::before {
  content: "";
  flex: none;
  inline-size: 5px;
  block-size: 5px;
  border-radius: var(--radius-voll);
  background-color: var(--nav-trenner);
}

/* --- Die Wege ----------------------------------------------------------- */
.kopf__link {
  display: flex;
  align-items: center;

  /* Nur noch senkrechtes Polster, und das ist kein Rest: Es haelt die
     Klickflaeche auf brauchbarer Hoehe und gibt dem Balken des aktiven
     Wegs seinen Abstand zur Schrift. Seitlich braucht es nichts mehr —
     den Abstand zwischen den Wegen macht der Trennpunkt. */
  padding-block: 0.45em;
  color: var(--knopf-text);
  font-weight: var(--gewicht-mittel);
  text-decoration: none;

  /* KLEIN GESCHRIEBEN wie die Wortmarke — Reys Frage vom 25.08., und die
     Antwort ist ja: "byte—art." steht klein da, und eine Navigation in
     Grossbuchstaben daneben behauptet eine Foermlichkeit, die die Marke
     gerade nicht hat. Ueber text-transform und nicht im Markup: Im Quelltext
     bleiben die Wege richtig geschrieben, und ein Vorleseprogramm liest
     "Portfolio", nicht "portfolio". */
  text-transform: lowercase;
  transition:
    color var(--dauer-mittel) var(--kurve-weich),
    font-weight var(--dauer-mittel) var(--kurve-weich);
}

/* ZUWENDUNG UND AKTIVER WEG: Farbe, und beim aktiven zusaetzlich Fettung.
   Reys Befund vom 25.08. zum Balken: "Der ist super weit weg vom Text."
   Stimmt — ohne Scheibe hat der Verweis nur noch senkrechtes Polster, und
   der Balken sass an dessen Unterkante statt an der Schrift. Er ist raus.

   WARUM HOVER NUR FARBE BEKOMMT UND NICHT AUCH FETTUNG: Fette Schrift ist
   breiter. Beim Ueberfahren wuerde das Wort wachsen und seine Nachbarn zur
   Seite schieben — ein Zappeln, das genau dort entsteht, wo man mit der
   Maus ist. Beim aktiven Weg faellt das nicht auf, weil er sich nur beim
   Seitenwechsel aendert. Wenn du Fettung auch beim Hover willst, geht das
   sauber, kostet aber eine versteckte Zwillingsbeschriftung, die die Breite
   der fetten Fassung schon im Ruhezustand reserviert. */
.kopf__link:hover,
.kopf__link:focus-visible {
  color: var(--vorlage-bindung);
}

.kopf__link[aria-current="page"] {
  color: var(--vorlage-bindung);
  font-weight: var(--gewicht-schwer);
}

/* Der Ring darf wieder nach AUSSEN: Ohne Scheibe gibt es kein overflow
   mehr, das ihn beschneiden wuerde. */
.kopf__link:focus-visible {
  outline-color: var(--vorlage-bindung);
  outline-offset: 3px;
}

.kopf__link { position: relative; }

.kopf__marke:focus-visible { outline-color: var(--marke-schrift); }

/* =========================================================================
   Verwandlung — Weg 1: scroll-driven, ohne JS
   ========================================================================= */
/* NUR DER SCHLEIER LAEUFT AUF DER SCROLL-ZEITACHSE. Das Schrumpfen nicht —
   und das ist eine Fehlerbehebung vom 25.08., kein Geschmack.

   Reys Befund: "Unregelmaessig friert das Bild beim Scrollen ein. Braucht
   dann 2-3 Sekunden und dann passiert das Scrollen." Sein Verdacht lag auf
   der Nav und war richtig.

   Die Ursache: Bis hierher haben vier Animationen auf der Scroll-Zeitachse
   gelegen, und drei davon animierten LAYOUT-Eigenschaften — height auf
   .kopf__innen, font-size und letter-spacing auf Wortmarke und Wegeliste.
   Eine scroll-getriebene Animation wird bei JEDEM Scroll-Frame neu
   ausgewertet. Bei font-size heisst das pro Frame: neue, krumme
   Schriftgroesse, Textlayout neu rechnen, Glyphen neu rastern (der
   Glyphen-Cache trifft nie, weil die Groesse nie zweimal gleich ist). Das
   laeuft auf dem Main-Thread, und der Compositor darf erst scrollen, wenn
   der fertig ist. Ergebnis: das Bild steht, die Eingaben stauen sich, dann
   holt es auf.

   Gemessen mit echten Mausrad-Ereignissen bei 1920x1080, 95. Perzentil der
   Frame-Dauer: mit Scrub 33,3 ms (jeder zweite Frame verpasst), ohne Scrub
   16,8 ms. Der Schleier darf bleiben — opacity laeuft auf dem Compositor
   und kostet nichts.

   Das Schrumpfen uebernimmt jetzt Weg 2 weiter unten: eine Klasse, ein
   Uebergang, EIN Layout-Durchgang an der Schwelle statt einem pro Frame.
   Was sich dabei aendert: die Kopfzeile schrumpft nicht mehr stufenlos mit
   dem Rad, sondern einmal, weich ueber --dauer-mittel. */
@supports (animation-timeline: scroll()) {
  .kopf::before {
    animation-timeline: scroll(root block);
    animation-fill-mode: both;
    animation-timing-function: linear;
    transition: none; /* der Fallback-Uebergang wuerde hier nur stoeren */
  }

  .kopf::before  { animation-name: kopf-schleier; }

  /* DER SCHLEIER IST FRUEHER FERTIG ALS DIE VERDICHTUNG — 12vh statt 45vh.

     Das war Reys eigentlicher Befund vom 25.08.: "Beim Scrollen zeigt die
     Navbar nicht genug Blur und zu viel Transparenz, da ueberlappt dann Logo
     und Titel unschoen."

     Die Ursache lag nicht an der Deckkraft allein, sondern am Weg dorthin.
     Ueber 45vh gerechnet steht der Schleier nach 100 px Scrollen erst bei
     rund einem Fuenftel — und genau in diesen ersten 100 px schiebt sich die
     Ueberschrift unter die Kopfzeile. Der Schleier kam also immer zu spaet,
     unabhaengig davon, wie dicht er am Ende ist.

     Die Verdichtung darf sich weiter Zeit lassen: Dass die Kopfzeile
     schrumpft, ist eine Geste. Dass sie deckt, ist eine Notwendigkeit. */
  .kopf::before  { animation-range: 0 12vh; }
}

@keyframes kopf-schleier {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* =========================================================================
   Verwandlung — Weg 2: die Klasse (IntersectionObserver, kein scroll-
   Listener). Seit dem 25.08. ist das NICHT MEHR NUR DER FALLBACK, sondern
   der regulaere Weg fuer alles, was Layout kostet — Begruendung oben bei
   Weg 1. js/main.js setzt die Klasse in jedem Browser.

   Die Polsterung der Wege ist in em angegeben, sie schrumpft mit der
   Schriftgroesse automatisch mit.
   ========================================================================= */
.kopf--kompakt::before      { opacity: 1; }
.kopf--kompakt .kopf__innen { height: var(--kopf-hoehe-kompakt); }
.kopf--kompakt .kopf__marke { font-size: var(--schrift-m);
                              letter-spacing: var(--sperrung-null); }
.kopf--kompakt .kopf__liste { font-size: var(--schrift-s); }

/* --- Schmale Viewports --------------------------------------------------
   Die alte Enge kam von der Scheibe: Mit vier Wegen wurde sie bei 375 px
   290 px breit und reichte 6 px ueber den Viewport hinaus — "Kontakt" war
   abgeschnitten, ohne als Querlauf aufzufallen (overflow-x: hidden in
   base.css schneidet es still weg).

   Ohne Scheibe und ohne seitliches Polster ist der Platzbedarf kleiner
   geworden; gespart wird jetzt am Abstand zwischen den Wegen, nicht an
   der Schrift. */
@media (max-width: 40rem) {
  .kopf__innen { gap: var(--raum-2); }
  .kopf__marke { font-size: var(--schrift-s); }
  .kopf__liste { font-size: var(--schrift-s); gap: var(--raum-2); }
  .kopf__liste li { gap: var(--raum-2); }
}

/* =========================================================================
   DAS KLAPPMENUE — Reys Entscheidung vom 26.08.
   -------------------------------------------------------------------------
   HIER STAND SEIT DEM 25.08. EINE OFFENE FRAGE, und sie ist jetzt
   beantwortet. Der alte Vermerk lautete: Bei 375 px endete die Leiste 7 px
   hinter dem rechten Rand, "Kontakt" war angeschnitten; zwei Stellschrauben
   (engerer Seitenrand, engere Polsterung) haben rund 30 px herausgeholt.
   Und dann: "Die eigentliche Frage, ob vier Wege auf einem Telefon
   ueberhaupt nebeneinander gehoeren oder unter ein Klappmenue, ist damit
   NICHT beantwortet. Sie gehoert Rey."

   Reys Antwort am 26.08.: "Navigation kannst du vergessen. Hier vielleicht
   auf Burger zurueck greifen." Nachgemessen war es auf ALLEN VIER Seiten
   abgeschnitten — bei 390 px ragte der letzte Weg 16 bis 21 px hinaus. Die
   Notloesung von gestern hat den Befund verschoben, nicht behoben.

   DIE SCHWELLE LIEGT BEI 48rem. Bei 768 px passen die vier Wege mit 27 px
   Luft — das ist zu knapp, um es von der Schriftgroesze abhaengen zu
   lassen. Darueber bleibt alles, wie es ist.
   ========================================================================= */

.kopf__burger {
  /* Ueber 48rem gibt es ihn nicht. display: none und nicht nur
     versteckt: Ein Knopf, den man nicht sieht, aber antabben kann, ist eine
     Falle fuer die Tastatur. */
  display: none;

  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: none;
  padding: var(--raum-2);
  margin-inline-end: calc(var(--raum-2) * -1);
  cursor: pointer;
  /* PETROL WIE DIE WEGE, nicht --nav-aktiv-text. Das ist der Ton fuer den
     aktiven Punkt auf DUNKLEM Grund; hier steht der Knopf auf dem hellen
     Seitenkopf und war dadurch weisz auf Weisz — gemessen rgb(255,255,255)
     gegen rgb(40,58,59) bei den Wegen daneben. */
  color: var(--knopf-text);

  flex-direction: column;
  justify-content: center;
  gap: 5px;
}

.kopf__burger-strich {
  display: block;
  inline-size: 22px;
  block-size: 2px;
  border-radius: var(--radius-voll);
  background-color: currentColor;
  transition:
    transform var(--dauer-mittel) var(--kurve-weich),
    opacity var(--dauer-flink) var(--kurve-weich);
}

/* DAS KREUZ ENTSTEHT AUS DEN DREI STRICHEN, es wird keins eingeblendet.
   Der mittlere verschwindet, die beiden aeuszeren drehen sich aufeinander
   zu — die Bewegung zeigt, dass derselbe Knopf jetzt schlieszt. */
.kopf--offen .kopf__burger-strich:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kopf--offen .kopf__burger-strich:nth-child(2) { opacity: 0; }
.kopf--offen .kopf__burger-strich:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 48rem) {
  .kopf__burger { display: inline-flex; }

  /* Die Wege liegen unter der Kopfzeile, nicht in ihr. Absolut, damit sie
     den Inhalt darunter nicht wegschieben, wenn sie aufgehen. */
  .kopf__liste {
    display: none;
    position: absolute;
    inset-inline: 0;
    inset-block-start: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--raum-2) var(--raum-4) var(--raum-4);
    border-end-start-radius: var(--radius-l);
    border-end-end-radius: var(--radius-l);
    font-size: var(--schrift-m);

    /* DER SCHLEIER DER KOPFZEILE, KEIN NEUES MATERIAL. Erster Anlauf war
       Glas mit 19 % Toenung — im Browser stand die Reiterleiste dahinter
       glasklar durch die Klappe, und beides war zusammen unlesbar.

       Die richtige Antwort steckte schon in .kopf::before: Das offene Menue
       ist die VERLAENGERTE Kopfzeile, also traegt es deren Schleier. Eine
       Klappe, die man nicht lesen kann, ist keine Navigation — und ein
       drittes Material auf einer Seite mit drei Glasflaechen waere ohnehin
       eins zu viel. */
    background: var(--schleier);
    -webkit-backdrop-filter: var(--schleier-blick);
    backdrop-filter: var(--schleier-blick);
    border-block-end: var(--rand-fein);
    box-shadow: var(--vorlage-wurf-nav) 0 12px 24px -8px;
  }

  .kopf--offen .kopf__liste { display: flex; }

  /* Und der Schleier der Kopfzeile geht mit an, damit Leiste und Klappe
     EINE Flaeche sind statt zweier uebereinander. Sonst steht die Wortmarke
     auf dem Foto und die Wege darunter auf Weisz. */
  .kopf--offen::before { opacity: 1; }

  /* Kein Trennpunkt in der Spalte: Er trennt zwei Wege NEBENEINANDER.
     Untereinander tut das die Zeile selbst. */
  .kopf__liste li + li::before { display: none; }
  .kopf__liste li { display: block; }

  .kopf__link {
    display: block;
    padding-block: 0.85em;
    /* Fingergerecht: 44 px sind die uebliche Mindestflaeche, und mit
       0.85em Polsterung auf 19 px Schrift kommt eine Zeile auf 51 px. */
  }

  .kopf__liste li + li .kopf__link { border-block-start: var(--rand-fein); }
}