/* Seiten-Teile, die es im uebernommenen Funnel-CSS nicht gibt: der schwebende Kopf und
   das dunkle Band mit Franks eigener Anlage. Alles Uebrige kommt aus css/tokens.css und
   css/quiz.css — hier stehen keine neuen Farben und keine neuen Schriften. */

/* ------------------------------------------------------------------ Kopfzeile

   Der Kopf schwebt ueber dem Inhalt statt einen festen Streifen wegzunehmen: halb-
   durchlaessige Flaeche plus Unschaerfe, der Inhalt zieht darunter durch. Auf einer
   Seite, deren wichtigster Bereich (die erste Frage) ueber der Falz liegen soll, sind
   64 px undurchsichtiger Balken echtes Geld.

   Drei Rueckfallebenen, weil "schwebend" nicht ueberall richtig ist:
   · prefers-reduced-transparency  → deckende Flaeche, keine Unschaerfe
   · prefers-contrast: more        → deckend plus deutliche Kante
   · kein backdrop-filter im Browser → @supports faellt auf deckend zurueck        */

.kopf {
  position: sticky;
  top: 0;
  z-index: 30;
  /* Vorgabe ist DECKEND. Die Glasfassung kommt erst im @supports-Block dazu —
     so ist der lesbare Zustand der Ausgangszustand, nicht der Sonderfall. */
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
}

@supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)) {
  @media (prefers-reduced-transparency: no-preference) and (prefers-contrast: no-preference) {
    .kopf {
      background: color-mix(in srgb, var(--papier) 72%, transparent);
      -webkit-backdrop-filter: blur(18px) saturate(180%);
      backdrop-filter: blur(18px) saturate(180%);
      /* Statt einer harten Trennlinie eine weiche Kante: sichtbar nur dort, wo
         tatsaechlich Inhalt darunterlaeuft. */
      border-bottom-color: color-mix(in srgb, var(--linie) 70%, transparent);
    }
  }
}

/* Das Signet ist Inline-SVG (tools/signet.mjs) — nur so erbt die Sonne --akzent
   und leuchtet auf dem dunklen Band auf. Als <img> koennte sie das nicht. */
.signet { display: block; flex: 0 0 auto; color: var(--tinte); }
.band-dunkel .signet,
.band-dunkel-tief .signet { color: var(--auf-tinte); }

/* ------------------------------------------------------------------ Das Band

   EIN Hoehepunkt neben dem Quiz, nicht fuenf. Hier steht Franks eigene Anlage —
   der einzige Beleg, den diese Seite hat, und der einzige, der ihr gehoert. */

.bahn {
  max-width: var(--spalte);
  margin: 0 auto;
  padding: 0 var(--rand);
}

.abschnitt {
  padding: 76px 0;
}

.gesch {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  align-items: start;
}
@media (min-width: 900px) {
  .gesch { grid-template-columns: 1.35fr 1fr; gap: 56px; }
}

.gesch h2 { margin-top: 10px; max-width: 18ch; }

/* Leons Mass fuer Fliesstext: lang und flach auslaufend, unscheinbar durch Groesse
   und Hoehe — nicht durch Blaesse. Deshalb breite Bahn statt schmaler Spalte. */
.gesch-text {
  margin-top: 22px;
  display: grid;
  gap: 16px;
  max-width: 62ch;
}
.gesch-text .satz { color: var(--auf-tinte-leise); }
.gesch-text .satz:first-child { color: var(--auf-tinte); font-size: var(--t-lead); line-height: 1.5; }

/* Die Zahlen seiner Anlage. Tabellarische Ziffern, damit die Spalte steht. */
.anlage-liste {
  list-style: none;
  margin: 30px 0 0;
  padding: 0;
  display: grid;
  gap: 1px;
  background: color-mix(in srgb, var(--auf-tinte-leise) 30%, transparent);
  border-radius: var(--radius);
  overflow: hidden;
}
.anlage-liste li {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px 20px;
  padding: 14px 18px;
  background: var(--tinte);
}
.band-dunkel-tief .anlage-liste li { background: var(--tinte-tief); }
.anlage-liste dt, .anlage-liste .was {
  color: var(--auf-tinte-leise);
  font-size: var(--t-klein);
}
.anlage-liste .wert {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700;
  font-size: 21px;
  letter-spacing: -0.01em;
  color: var(--auf-tinte);
  font-variant-numeric: tabular-nums;
}

/* Der Hinweis, der die Zahlen ehrlich haelt. Er steht bewusst direkt darunter und
   nicht im Fussbereich: Eine Erfahrungszahl ohne diesen Satz liest sich als Zusage. */
.anlage-hinweis {
  margin-top: 14px;
  color: var(--auf-tinte-leise);
}

/* Das Portraet ist Beiwerk, nicht Hoehepunkt. In der ersten Fassung stand es mobil
   mit 240 px Breite und damit rund 600 px Hoehe unter den Zahlen — ein ganzer
   Bildschirm fuer ein Bild, das nichts belegt, was der Text nicht schon sagt.
   Es steht jetzt neben der Zeile mit dem Namen, in Portraet-Groesse. */
.gesch-bild {
  margin-top: 26px;
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 100%;
}
.gesch-bild picture { flex: 0 0 auto; width: 92px; }
.gesch-bild-name {
  font-family: "Archivo", system-ui, sans-serif;
  font-weight: 700;
  color: var(--auf-tinte);
  line-height: 1.25;
}
.gesch-bild-rolle { display: block; font-family: "Source Sans 3", sans-serif; font-weight: 400; font-size: var(--t-klein); color: var(--auf-tinte-leise); }
.gesch-bild img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: var(--radius);
}

/* Auf dem dunklen Band ist die Hairline der Sektion falsch — dort trennt der
   Farbwechsel. Der Akzentbalken bleibt, er ist hier das Aufleuchten. */
.band-dunkel.abschnitt::before { content: none; }

@media (max-width: 780px) {
  .abschnitt { padding: 52px 0; }
  .gesch h2 { max-width: none; }
}