/* ===========================================================================
   VIER FASSUNGEN FUER DEN HINTERGRUND DER KOPFZEILE, ALLE VIER AUS

   **Diese Datei ist ein Entwurf und soll wieder verschwinden.** Sie steht als
   achte `<link>`-Zeile in landing.html, ganz am Ende der Kaskade, und lebt nur
   so lange, bis Adrian eine Fassung gewaehlt hat. Danach wandern die vier
   Regeln der gewaehlten in startseite-grund.css zu `#kopf`, und Datei wie
   Zeile werden geloescht.

   **Sie liegt deshalb nicht in startseite-grund.css.** Jene Datei stand mit
   diesem Block bei 414 Zeilen und damit ueber der Grenze von 400. Sie waere
   dafuer zerteilt worden, obwohl der Grund dafuer in ein paar Tagen von
   selbst wieder weg ist.

   ── Warum es sie gibt ────────────────────────────────────────────────────

   **Keine der vier ist an.** Die Kopfzeile traegt heute den Verlauf darueber
   und sonst nichts, und das ist eine Entscheidung. Adrian am 2026-09-03:
   *"Der header auf der startseite hat kein hintergrund, gewollt. Ich wuerde
   gerne sehen wie es aussieht wenn er trotzdem ein bisschen einen hintergrund
   hat."* Sehen, nicht ersetzt bekommen.

   **Was jede Fassung gewinnt und was sie kostet, steht mit Bildern und
   gemessenen Zahlen in `04-berichte/startseitenkopf.md`.** Die eine Zahl, die
   hierher gehoert: im lesbaren Teil der Seite faellt der Text der Kopfzeile
   heute auf **1,14:1**, weil die Ueberschriften der Karten ungedaempft
   darunter durchlaufen. Gefordert sind 4,5. Mit A sind es 5,18, mit B 7,10,
   mit C und D 7,34.

   **Angeschaltet wird eine mit einem Wort in landing.html:**

       {% block html_attr %} data-modus="fest-dunkel" data-kopfgrund="c"{% endblock %}

   ── Die drei Mechaniken, die man nicht sieht ─────────────────────────────

   **1. Die Flaeche liegt auf `::before`.** `#kopf` ist 98 Pixel hoch, weil er
   unten 34 Polster fuer den auslaufenden Verlauf braucht; eine Glasleiste bis
   dorthin waere kopflastig. Die `::before` endet 14 frueher, ist 84 hoch, und
   der 44er Knopf steht mittig darin. Vor allem aber duerfen C und D die Hoehe
   nicht anfassen: kommt der Grund beim Scrollen, ruckt die Seite bei jeder
   Aenderung am Kastenmodell. Eine `opacity` kann das nicht. Gemessen: 98
   Pixel in allen vier Fassungen.

   **2. `z-index: -1` ist Pflicht.** Eine absolut gesetzte `::before` malt
   sonst ueber `.kopf-innen`, weil die statisch steht. Aus dem Stapel faellt
   sie dadurch nicht, `#kopf` ist mit `position: fixed` und `z-index: 40` sein
   eigener Kontext.

   **3. Der Ausgangswert ist `opacity: 1`, nicht `0`.** Wo
   `animation-timeline` fehlt, bleibt der Grund stehen und C faellt auf B
   zurueck. Andersherum bekaeme derselbe Browser genau den Mangel, den dieser
   Block behebt. Bei weniger Bewegung dasselbe: stehen statt einblenden. */
html[data-kopfgrund] #kopf::before {
  content: '';
  position: absolute;
  inset: 0 0 14px;
  z-index: -1;
  pointer-events: none;
}

/* A, tiefer Verlauf. Kein Glas, keine Kante, laeuft nach unten ins Nichts,
   braucht kein `backdrop-filter` und laeuft ueberall. */
html[data-kopfgrund="a"] #kopf { background: none; }
html[data-kopfgrund="a"] #kopf::before {
  inset: 0;
  background: linear-gradient(180deg,
    rgba(5,5,6,0.95) 0%, rgba(5,5,6,0.90) 34%,
    rgba(5,5,6,0.62) 62%, rgba(5,5,6,0) 100%);
}

/* B, Glas. `--panel`, `--linie-kalt` und `blur(14px)` sind dieselben drei
   Werte, aus denen `.karte` gebaut ist (startseite-doku.css). Die Kopfzeile
   sieht damit aus wie der Rest der Seite. Zugleich das, was C ohne
   `animation-timeline` wird. */
html[data-kopfgrund="b"] #kopf { background: none; }
html[data-kopfgrund="b"] #kopf::before {
  background: var(--panel);
  border-bottom: 1px solid var(--linie-kalt);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* C, dasselbe Glas ab 40 Pixeln Scrollweg. Oben bleibt die Seite, wie sie
   heute ist; den Grund gibt es erst, wo Text darunter durchlaeuft. Keine
   Zeile JavaScript: die scroll-gebundene Animation unten laeuft nicht auf dem
   Hauptstrang und kann nicht ruckeln. Ein Zuhoerer am Rad-Ereignis koennte. */
html[data-kopfgrund="c"] #kopf::before {
  background: var(--panel);
  border-bottom: 1px solid var(--linie-kalt);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  opacity: 1;
}

/* D, dasselbe Glas ohne Kante: die `mask` blendet Fuellung UND Unschaerfe
   zusammen aus, statt sie abzuschneiden. Sie haelt bis 72 Prozent, also rund
   70 der 98 Pixel; der Ton-Knopf endet bei 64 und steht damit ganz im
   deckenden Teil. Der Grundton ist 0,80 statt der 0,74 von `--panel`, weil
   oben mehr tragen muss, was unten weich ausgeht. */
html[data-kopfgrund="d"] #kopf { background: none; }
html[data-kopfgrund="d"] #kopf::before {
  inset: 0;
  background: rgba(8, 10, 12, 0.80);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 72%, rgba(0,0,0,0) 100%);
  opacity: 1;
}

@supports (animation-timeline: scroll()) {
  @media not (prefers-reduced-motion: reduce) {
    html[data-kopfgrund="c"] #kopf::before,
    html[data-kopfgrund="d"] #kopf::before {
      animation: kopfgrund-ein linear both;
      animation-timeline: scroll(root block);
      animation-range: 40px 120px;
    }
  }
}
@keyframes kopfgrund-ein { from { opacity: 0; } to { opacity: 1; } }