/* ============================================================
   Startseite: Hero-Ring, Diagramme, Zeitleiste, Sparklines.
   Ergaenzt haus.css, gilt nur fuer neu/index.html.
   ============================================================ */

/* ---------- Hero ---------- */
.hero {
  display: grid;
  gap: 40px;
  align-items: center;
  padding-top: 24px;
}
@media (min-width: 900px) {
  .hero { grid-template-columns: 1.1fr 1fr; gap: 44px; padding-top: 48px; min-height: 520px; }
}
@media (min-width: 1200px) {
  /* Die Grafik hat mehr Gewicht bekommen: sie ist der Einstieg, und in der
     schmalen Spalte war sie kaum zu erkennen. */
  .hero { grid-template-columns: 1fr 1.02fr; gap: 56px; min-height: 560px; }
}
/* Ohne den Eyebrow darueber traegt die Ueberschrift den Einstieg allein -
   deshalb eine Stufe groesser. Nur im Hero, die globale h1-Regel in
   haus.css gilt fuer alle Unterseiten. */
.hero-text h1 { font-size: clamp(2.1rem, 5.8vw, 3.9rem); max-width: 19ch; margin-bottom: 22px; }

.hero-knoepfe { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ---------- Kopfleiste blendet beim Runterscrollen aus ---------- */
.kopf { transition: transform 360ms var(--weich), opacity 360ms var(--weich); }
/* Auf dem Handy brach der Knopf auf zwei Zeilen und wurde zum Klotz. */
.kopf .knopf { white-space: nowrap; }
@media (max-width: 639px) {
  .kopf .knopf { padding: 11px 16px; font-size: 13px; border-radius: 10px; }
}
.kopf.weg { transform: translateY(-110%); opacity: 0; }

/* ---------- Leuchten folgt der Maus, nur mit echtem Zeiger ---------- */
.maus {
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 720px; height: 720px;
  margin: -360px 0 0 -360px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(closest-side, rgba(179, 197, 255, 0.07), transparent 70%);
  will-change: transform;
}
@media (pointer: fine) { .maus { display: block; } }

/* ---------- Ring ---------- */
.ring {
  width: min(100%, 440px);
  margin: 0 auto;
  aspect-ratio: 1;
  position: relative;
}
@media (min-width: 1200px) { .ring { width: min(100%, 520px); } }
.ring svg { width: 100%; height: 100%; display: block; overflow: visible; }
.ring .kreis { fill: none; stroke: var(--linie); stroke-width: 1; }
.ring .tick { stroke: var(--linie); stroke-width: 1; opacity: 0; }
.ring .tick.gross { stroke: var(--muted); }
.ring .phase { fill: none; stroke: var(--leise); stroke-width: 1; stroke-linecap: round; opacity: 0.55; }
.ring .phase.aktiv { stroke: var(--akzent); opacity: 1; }
.ring .phasen-label {
  font-family: Inter, system-ui, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  fill: var(--leise);
  transition: fill 400ms var(--weich);
}
.ring .phasen-label.aktiv { fill: var(--text); }
.ring .speiche { stroke: var(--linie-fein); stroke-width: 1; }
.ring .knoten { fill: #000; stroke: var(--leise); stroke-width: 1; }
.ring .knoten.an { stroke: var(--akzent); }
.ring .knoten-puls { fill: none; stroke: var(--akzent); stroke-width: 1; opacity: 0; }
.ring .knoten-label {
  font-family: Inter, system-ui, sans-serif;
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--muted);
}
.ring .mitte-eyebrow {
  font-family: Inter, system-ui, sans-serif;
  font-size: 8.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  fill: var(--leise);
}
.ring .mitte-wert {
  font-family: Inter, system-ui, sans-serif;
  font-size: 22px;
  font-weight: 200;
  letter-spacing: -0.03em;
  fill: var(--text);
}
.ring .marker { fill: var(--akzent); }
.ring .marker-hof { fill: var(--akzent); opacity: 0.18; }
.ring .spur { fill: none; stroke: var(--akzent); stroke-width: 1.5; stroke-linecap: round; opacity: 0.7; }

/* ---------- Sparkline hinter der Kennzahl ---------- */
.kennzahl { position: relative; }
/* Vorher: absolut oben rechts in der Zelle. Dadurch schwebte die Linie
   weit weg von ihrer Zahl, jede auf anderer Hoehe, und die letzte wurde
   am Containerrand abgeschnitten. Jetzt steht sie im Fluss unter der
   Kennzahl, linksbuendig zu ihr - eine ruhige Fusszeile statt Deko. */

/* ---------- Diagramme ---------- */
.diagramm {
  margin: 36px 0 0;
  padding-top: 24px;
  border-top: 1px solid var(--linie);
  position: relative;
}
.diagramm svg { width: 100%; height: auto; display: block; overflow: visible; cursor: crosshair; }
.diagramm .achse { stroke: var(--linie-fein); stroke-width: 1; }
.diagramm .achse-null { stroke: var(--linie); }
.diagramm text {
  font-family: Inter, system-ui, sans-serif;
  font-size: 9.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  fill: var(--leise);
  font-variant-numeric: tabular-nums;
}
.diagramm .kurve { fill: none; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.diagramm .kurve.haupt { stroke: var(--akzent); stroke-width: 2; }
.diagramm .kurve.neben { stroke: var(--muted); opacity: 0.8; }
.diagramm .kurve.schwach { stroke: var(--leise); opacity: 0.6; }
.diagramm .kurve.aus, .diagramm .flaeche.aus, .diagramm .endwert.aus { opacity: 0 !important; }
.diagramm .flaeche { fill: url(#flaeche-verlauf); opacity: 0.9; }
.diagramm .endwert {
  font-size: 12px;
  letter-spacing: -0.01em;
  text-transform: none;
  fill: var(--text);
}
.diagramm .endwert.haupt { fill: var(--akzent); font-weight: 400; }
.diagramm .fadenkreuz { stroke: var(--text); stroke-width: 1; opacity: 0; stroke-dasharray: 2 4; }
.diagramm .fadenpunkt { fill: #000; stroke-width: 1.5; opacity: 0; }
/* Vorher: 1px Kontur plus Fuellung bei 25 % Deckkraft. Der Koerper war zu
   drei Vierteln durchsichtig, sichtbar blieb vor allem die Kontur - daher
   die Outline-Optik. Jetzt voller Koerper ohne Kontur, der Docht etwas
   zurueckgenommen, damit die Koerper den Verlauf tragen. */
.diagramm .kerze-docht { stroke-width: 1.25; stroke-linecap: round; }
.diagramm .kerze-koerper { stroke: none; fill-opacity: 0.88; }
.diagramm .kerze.auf .kerze-docht { stroke: rgba(127, 209, 168, 0.75); }
.diagramm .kerze.auf .kerze-koerper { fill: var(--gut); }
.diagramm .kerze.ab .kerze-docht { stroke: rgba(240, 130, 121, 0.75); }
.diagramm .kerze.ab .kerze-koerper { fill: var(--bad); }
.diagramm .kerze { opacity: 0; transition: opacity 260ms var(--weich); }
.diagramm .kerze.da { opacity: 1; }
.diagramm .kerze.aktiv .kerze-koerper { fill-opacity: 1; }
.diagramm .marke-linie { stroke: var(--text); stroke-width: 1; opacity: 0.45; }
.diagramm .marke-punkt { fill: #000; stroke: var(--akzent); stroke-width: 1.5; cursor: pointer; transition: r 200ms var(--weich); }
.diagramm .marke-punkt.aktiv { fill: var(--akzent); }
.diagramm .marke-text {
  font-size: 11.5px;
  letter-spacing: 0;
  text-transform: none;
  fill: var(--text);
  pointer-events: none;
}
.diagramm .marke-hof { fill: none; stroke: var(--akzent); stroke-width: 1; opacity: 0; }
.diagramm .tooltip {
  position: absolute;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -100%) translateY(-14px);
  background: rgba(0, 0, 0, 0.92);
  border: 1px solid var(--linie);
  border-radius: 8px;
  padding: 10px 12px;
  min-width: 150px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--muted);
  transition: opacity 160ms var(--weich);
  z-index: 5;
  font-variant-numeric: tabular-nums;
}
.diagramm .tooltip.an { opacity: 1; }
.diagramm .tooltip .t-kopf {
  font-size: 9.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--leise);
  margin-bottom: 6px;
}
.diagramm .tooltip .t-zeile { display: flex; justify-content: space-between; gap: 16px; }
.diagramm .tooltip .t-zeile b { font-weight: 400; color: var(--text); }
.diagramm .tooltip .t-zeile.haupt b { color: var(--akzent); }
.diagramm .tooltip .t-satz { margin-top: 8px; max-width: 26ch; color: var(--text); font-size: 12.5px; }

.legende {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-bottom: 14px;
  font-size: 11.5px;
  color: var(--muted);
}
.legende button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 4px 0;
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: opacity 200ms var(--weich);
}
.legende button.aus { opacity: 0.35; text-decoration: line-through; }
.legende i { width: 14px; height: 2px; display: inline-block; background: currentColor; }
.legende .haupt { color: var(--akzent); }
.legende .neben { color: var(--muted); }
.legende .schwach { color: var(--leise); }

.hinweis { margin-top: 14px; font-size: 11.5px; color: var(--leise); }

/* Entscheidungs-Liste reagiert auf die Marker im Chart und umgekehrt */
ol.nummern li.aktiv { color: var(--text); }
ol.nummern li.aktiv .n { letter-spacing: 0.3em; }

/* ---------- Bild mit Rahmen ---------- */
.bild-rahmen img {
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: top;
  border-radius: 14px;
  border: 1px solid var(--linie);
}

/* ---------- Zeitleiste ---------- */
.zeitleiste {
  list-style: none;
  margin: 40px 0 0;
  padding: 0 0 0 36px;
  position: relative;
}
.zeitleiste .strich {
  position: absolute;
  left: 8px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--linie-fein);
}
.zeitleiste .strich::after {
  content: "";
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: calc(var(--fortschritt, 0) * 100%);
  background: var(--akzent);
  transition: height 120ms linear;
}
.zeitleiste li { position: relative; padding: 0 0 40px; }
.zeitleiste li:last-child { padding-bottom: 0; }
.zeitleiste .punkt {
  position: absolute;
  left: -32px; top: 6px;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: #000;
  border: 1px solid var(--leise);
  transition: border-color 300ms var(--weich), background 300ms var(--weich), box-shadow 300ms var(--weich);
}
.zeitleiste li.an .punkt {
  border-color: var(--akzent);
  background: var(--akzent);
  box-shadow: 0 0 0 5px rgba(179, 197, 255, 0.14);
}
.zeitleiste .takt {
  display: block;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: 8px;
}
.zeitleiste h3 { margin: 0 0 6px; }
.zeitleiste p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
  .kopf { transition: none; }
  .maus { display: none; }
  .ring .tick { opacity: 1; }
  .diagramm .kerze { opacity: 1; transition: none; }
}


/* ---------- Grosse Schirme ----------
   Auf einem breiten Fenster wirkte die Seite wie eine Handyspalte in der
   Mitte. Die Ueberschrift und die Abstaende wachsen deshalb mit. */
@media (min-width: 1200px) {
  .hero-text h1 { font-size: clamp(2.7rem, 3.3vw, 3.9rem); max-width: 19ch; }
  /* Das Etikett ueber der Ueberschrift ist entfallen - es sagte dasselbe
     wie der Absatz darunter und kostete eine Zeile vor der Ueberschrift.
     Deshalb hier kein :not(.eyebrow) mehr noetig. */
  .hero-text > p { font-size: 16.5px; max-width: 44ch; }
  .diagramm { margin-top: 44px; padding-top: 30px; }
}


/* ---------- Spline-Szene im Hero ----------
   Der Container haelt die Groesse, damit beim Nachladen der Szene
   nichts springt. Der gezeichnete Ring liegt darunter und wird erst
   ausgeblendet, wenn die Szene wirklich sichtbar ist. */
.hero-grafik { position: relative; width: 100%; aspect-ratio: 1; }
.hero-grafik #hero-chart {
  position: absolute; inset: 0; width: 100%; height: 100%;
  /* Das ferne Ende laeuft links aus dem Bild, statt abrupt abzubrechen. */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 18%);
  mask-image: linear-gradient(to right, transparent, #000 18%);
}
/* Die Rueckfallebene ist seit dem Umbau das Canvas, nicht mehr der Ring.
   Ohne diesen Selektor laegen Spline-Szene und Chart uebereinander. */
.hero-grafik.spline-da #hero-chart { opacity: 0; pointer-events: none; }
.hero-grafik spline-viewer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 900ms var(--weich);
}
.hero-grafik.spline-da spline-viewer { opacity: 1; }
/* Das Spline-Wasserzeichen unten rechts gehoert nicht auf eine
   Firmenseite; im bezahlten Tarif laesst es sich in Spline selbst
   abschalten, hier wird es zusaetzlich verdeckt. */
.hero-grafik spline-viewer::part(logo) { display: none; }


/* ============================================================
   Wort-Einlauf der Hero-Ueberschrift
   Jedes Wort steckt in einem Kaestchen mit overflow:hidden und faehrt
   von unten herein. Das Kaestchen bekommt unten etwas Luft, sonst
   schneidet es Unterlaengen wie beim "p" ab.
   ============================================================ */
.hero-text h1.wort-bereit .wort {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  padding-bottom: 0.09em;
  margin-bottom: -0.09em;
}
.hero-text h1.wort-bereit .wort-i {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  /* Die Unschaerfe loest sich beim Landen auf. Drei getrennte Dauern statt
     einer: dadurch kommt das Wort scharf an, bevor es ganz steht. */
  filter: blur(7px);
  transition: transform 860ms var(--weich), opacity 680ms var(--weich),
              filter 660ms var(--weich);
}
.hero-text h1.wort-ein .wort-i { transform: none; opacity: 1; filter: none; }

/* Das Akzentwort faerbt sich erst ein, nachdem es gelandet ist. Die
   Verzoegerung setzt bewegung.js aus dem Takt des Wortes. */
.hero-text h1 em.akzent-spaet { color: var(--text); transition: color 900ms var(--weich); }
.hero-text h1 em.akzent-spaet.ein { color: var(--akzent); }

.hero-text .nach-h1 {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 640ms var(--weich), transform 640ms var(--weich);
}
.hero-text .nach-h1.da { opacity: 1; transform: none; }


@media (prefers-reduced-motion: reduce) {
  .hero-text h1 .wort-i { transform: none !important; opacity: 1 !important; }
  .hero-text .nach-h1 { opacity: 1 !important; transform: none !important; }
}


/* Die Hero-Grafik kommt parallel zur Ueberschrift, nicht danach. Leichtes
   Heranfahren statt reinem Aufblenden - sonst wirkt sie aufgeklebt. */
.hero-grafik #hero-chart.grafik-auftritt {
  opacity: 0;
  transform: scale(1.05);
  transition: opacity 1300ms var(--weich), transform 1600ms var(--weich);
}
.hero-grafik #hero-chart.grafik-auftritt.da { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .flug { height: 100vh; }
  .flug-text { opacity: 1; }
  .hero-grafik #hero-chart.grafik-auftritt { opacity: 1 !important; transform: none !important; }
  .hero-text h1 em.akzent-spaet { color: var(--akzent) !important; }
}

/* ============================================================
   Ringflug
   Der Abschnitt ist hoeher als das Fenster; die Leinwand klebt darin
   fest. Dadurch wird die Scrollstrecke zur Zeitachse des Durchflugs.
   ============================================================ */
.flug { position: relative; height: 220vh; }
.flug-klebe {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.flug-klebe canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.flug-text {
  position: relative;
  margin: 0;
  text-align: center;
  font-size: clamp(1.3rem, 2.4vw, 2.1rem);
  font-weight: 200;
  letter-spacing: -0.025em;
  line-height: 1.35;
  color: var(--text);
  opacity: 0;
  pointer-events: none;
}
@media (max-width: 719px) { .flug { height: 180vh; } }

/* ============================================================
   Coin-Szene
   Wie der Ringflug: der Abschnitt ist hoeher als das Fenster, die
   Leinwand klebt darin, die Scrollstrecke wird zur Drehachse.
   ============================================================ */
.coin-szene { position: relative; height: 170vh; }
.coin-klebe {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.coin-klebe canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
@media (max-width: 719px) { .coin-szene { height: 140vh; } }
@media (prefers-reduced-motion: reduce) { .coin-szene { height: 100vh; } }

/* ============================================================
   Sieb
   Wie Ringflug und Coin: der Abschnitt ist hoeher als das Fenster,
   die Leinwand klebt darin. Die beiden Texte werden von stationen.js
   ueberblendet, deshalb steht hier nur der Ruhezustand.
   ============================================================ */
/* Der negative Rand zieht die klebende Leinwand in den Abschnitt davor
   hinein: das Sternenfeld ist schon sichtbar, bevor der Abschnitt oben
   anliegt. Ohne das wirkt die Seite beim Runterscrollen kurz zu Ende.
   Die Hoehe waechst um denselben Betrag, damit die Scrollstrecke der
   Animation gleich lang bleibt. */
.sieb { position: relative; height: 235vh; margin-top: -35vh; }
.sieb-klebe {
  position: sticky; top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.sieb-klebe canvas { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.sieb-text {
  /* Mittig im Bild, nicht am unteren Rand: der Satz gehoert in das Feld
     hinein, nicht darunter. Die Reihe der sechs Punkte sitzt darueber. */
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 0;
  text-align: center;
  opacity: 0;
  pointer-events: none;
}
.sieb-text p { max-width: none; margin: 0; }
.sieb-gross {
  font-size: clamp(1.15rem, 2.1vw, 1.8rem);
  font-weight: 200;
  letter-spacing: -0.025em;
  color: var(--text);
}
.sieb-gross em { font-style: normal; color: var(--akzent); }
.sieb-klein {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  color: var(--leise);
}
.sieb-klein .stichtag {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  opacity: 0.6;
}
@media (max-width: 719px) { .sieb { height: 205vh; } }

/* ============================================================
   Satz
   Kein Canvas - nur Schrift, die sich Wort fuer Wort mit der
   Scrollstrecke aufbaut. Ohne Skript stehen alle Woerter da.
   ============================================================ */
.satz { position: relative; height: 150vh; }
.satz-klebe {
  position: sticky; top: 0;
  height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 0 24px;
}
.satz-zeile {
  margin: 0;
  max-width: 20ch;
  text-align: center;
  font-size: clamp(1.7rem, 4.4vw, 3.2rem);
  font-weight: 200;
  letter-spacing: -0.03em;
  line-height: 1.28;
  color: var(--text);
}
.satz-zeile em { font-style: normal; color: var(--akzent); }
.satz-wort { display: inline-block; will-change: opacity, transform; }
@media (max-width: 719px) { .satz { height: 130vh; } }

@media (prefers-reduced-motion: reduce) {
  .sieb { height: 100vh; }
  .satz { height: auto; }
  .satz-klebe { position: static; height: auto; padding: 80px 24px; }
  .sieb-vorher { opacity: 0 !important; }
  .sieb-nachher { opacity: 1 !important; }
}

/* ---------- Kennzahlen neben dem Coin ----------
   Die Leinwand liegt ueber der ganzen Flaeche, der Coin wird darin nach
   links gezeichnet (siehe coin.js). Der Text sitzt in der rechten Haelfte;
   die Zeilen blendet coin.js gestaffelt ein. */
.coin-text {
  position: relative;
  margin-left: auto;
  width: min(420px, 46%);
  padding-right: 6vw;
}
.coin-hut {
  margin: 0 0 26px;
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--akzent);
  opacity: 0;
}
.coin-zahl { margin-bottom: 26px; opacity: 0; }
.coin-zahl:last-child { margin-bottom: 0; }
.coin-zahl .wert {
  margin: 0 0 4px;
  font-size: clamp(1.9rem, 3.1vw, 2.7rem);
  font-weight: 200;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
}
.coin-zahl .label { display: block; font-size: 13px; color: var(--leise); line-height: 1.45; }
.coin-zahl .stichtag { display: block; font-size: 11px; color: var(--leise); opacity: 0.65; margin-top: 3px; }
@media (max-width: 899px) {
  .coin-klebe { align-items: flex-end; }
  .coin-text { width: 100%; margin: 0; padding: 0 24px 9vh; text-align: center; }
  .coin-zahl { margin-bottom: 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .coin-hut, .coin-zahl { opacity: 1 !important; }
}

/* ============================================================
   Listen als Karten
   Vier untereinander gesetzte Zeilen mit Haarlinie dazwischen lesen sich
   wie ein Inhaltsverzeichnis. Als Raster aus Karten bekommt jeder Punkt
   ein eigenes Gewicht - und die Nummer wird zum stillen Wasserzeichen
   statt zu einem Etikett am Rand.
   Gilt nur auf der Startseite; haus.css bleibt fuer alle anderen Seiten
   unveraendert.
   ============================================================ */
.auftritt ul.punkte,
.auftritt ol.nummern {
  display: grid;
  gap: 14px;
  margin-top: 34px;
}
@media (min-width: 820px) {
  .auftritt ul.punkte { grid-template-columns: 1fr 1fr; }
  .auftritt ol.nummern { grid-template-columns: repeat(3, 1fr); }
}
/* Die Kacheln standen bis 30.8.2026 als kaum sichtbare Kaesten da: 7-%-Rand,
   4,5-%-Fuellung, Titel in derselben Farbe wie der Text. Manuel: "sowas
   schaut halt noch sehr fad aus".

   Statt den Kasten lauter zu machen bekommt jede Kachel eine helle Kante
   oben, die nach rechts auslaeuft - dieselbe Idee wie die auslaufenden
   Trennlinien aus licht-auf-dunklem-grund.md. Die Kachel sieht damit aus,
   als finge sie Licht, statt einen Rahmen zu tragen. Der Titel traegt die
   Hierarchie ueber Groesse und Helligkeit, nicht ueber Fettung. */
.auftritt ul.punkte li,
.auftritt ol.nummern li,
.auftritt .feld {
  position: relative;
  display: block;
  padding: 26px 26px 30px;
  border: 1px solid var(--linie-fein);
  border-top: none;
  border-radius: 16px;
  background:
    linear-gradient(158deg, rgba(255, 255, 255, 0.055), rgba(255, 255, 255, 0.012) 58%);
  color: var(--muted);
  overflow: hidden;
  transition: border-color 320ms var(--weich), background 320ms var(--weich),
    transform 620ms var(--weich), opacity 620ms var(--weich);
}

/* Die Lichtkante. Als eigenes Element, weil ein border-image nicht mit
   border-radius zusammengeht. */
.auftritt ul.punkte li::before,
.auftritt ol.nummern li::before,
.auftritt .feld::before {
  content: "";
  position: absolute;
  top: 0; left: 12px; right: 12px;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(90deg,
    rgba(179, 197, 255, 0.8) 0%,
    rgba(179, 197, 255, 0.42) 38%,
    rgba(240, 242, 246, 0.16) 72%,
    rgba(240, 242, 246, 0) 100%);
  transition: background 320ms var(--weich);
}
.auftritt ul.punkte li:hover::before,
.auftritt ol.nummern li:hover::before,
.auftritt .feld:hover::before {
  background: linear-gradient(90deg,
    rgba(179, 197, 255, 0.85) 0%,
    rgba(240, 242, 246, 0.3) 46%,
    rgba(240, 242, 246, 0) 100%);
}

/* Der Titel steht eine Stufe groesser und in voller Texthelligkeit -
   vorher lief er in derselben Farbe wie der Fliesstext mit. */
.auftritt ul.punkte li h3,
.auftritt ol.nummern li h3,
.auftritt .feld h3 {
  color: var(--text);
  font-size: 1.08rem;
  font-weight: 300;
  letter-spacing: -0.012em;
  margin-bottom: 9px;
}
.auftritt .feld { border-top: 1px solid var(--linie-fein); padding-top: 28px; }

/* Die drei Punkte im Vision-Abschnitt stehen gestapelt in der rechten
   Spalte, nicht mehr als eigene Reihe darunter. Sie fuellen den Raum, den
   das hohe Bild links neben dem Text offen laesst.

   Etwas enger gesetzt als die freistehende Reihe (22 px statt 28): in
   halber Breite untereinander wirken drei Kaesten mit vollem Innenabstand
   schnell wie ein Formular. */
.stapel {
  display: grid;
  gap: 14px;
  margin-top: 30px;
}
.auftritt .stapel .feld {
  padding: 22px 22px 24px;
}
.auftritt .stapel .feld h3 {
  margin-bottom: 6px;
}

/* Der Schein wandert beim Hover mit - dieselbe Idee wie bei den
   Kartenraendern auf der Referenzseite, nur leiser. */
.auftritt ul.punkte li::after,
.auftritt ol.nummern li::after,
.auftritt .feld::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 16px;
  pointer-events: none;
  opacity: 0.45;
  transition: opacity 320ms var(--weich);
  background:
    radial-gradient(420px 220px at 18% 0%, rgba(179, 197, 255, 0.16), transparent 70%);
}
.auftritt ul.punkte li:hover,
.auftritt ol.nummern li:hover,
.auftritt .feld:hover { border-color: rgba(179, 197, 255, 0.32); color: var(--text); }
.auftritt ul.punkte li:hover::after,
.auftritt ol.nummern li:hover::after,
.auftritt .feld:hover::after { opacity: 1; }

/* Nummer als Wasserzeichen oben rechts statt als Spalte links. */
.auftritt ul.punkte .n,
.auftritt ol.nummern .n {
  position: absolute;
  top: 14px; right: 20px;
  font-size: 2.6rem;
  font-weight: 200;
  letter-spacing: -0.04em;
  line-height: 1;
  color: rgba(240, 242, 246, 0.09);
  padding: 0;
  transition: color 320ms var(--weich);
}
.auftritt ul.punkte li:hover .n,
.auftritt ol.nummern li:hover .n { color: rgba(179, 197, 255, 0.26); letter-spacing: -0.04em; }
.auftritt ul.punkte li h3,
.auftritt ol.nummern li h3 { margin: 0 3.2rem 8px 0; }
.auftritt ul.punkte li p,
.auftritt ol.nummern li p { margin: 0; }

/* Gestaffelter Auftritt beim Scrollen (Klasse kommt aus stationen.js). */
.auftritt ul.punkte li,
.auftritt ol.nummern li,
.auftritt .feld { opacity: 0; transform: translateY(22px); }
.auftritt ul.punkte li.da,
.auftritt ol.nummern li.da,
.auftritt .feld.da { opacity: 1; transform: none; }

/* ---------- Zeitleiste quer ----------
   Ein Ablauf ueber drei Takte ist eine Strecke, keine Aufzaehlung.
   Auf dem Handy bleibt sie senkrecht, dort gibt es die Breite nicht. */
@media (min-width: 820px) {
  .zeitleiste {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    padding: 44px 0 0;
    margin-top: 44px;
  }
  .zeitleiste .strich {
    left: 0; right: 0; top: 4px;
    bottom: auto;
    width: auto; height: 1px;
  }
  .zeitleiste .strich::after {
    width: calc(var(--fortschritt, 0) * 100%);
    height: 100%;
    transition: width 140ms linear;
  }
  .zeitleiste li { padding: 0 22px 0 0; }
  .zeitleiste .punkt { left: 0; top: -25px; }
  .zeitleiste li.an .takt { color: var(--akzent); }
}

@media (prefers-reduced-motion: reduce) {
  .auftritt ul.punkte li,
  .auftritt ol.nummern li,
  .auftritt .feld { opacity: 1; transform: none; }
}

/* ---------- Ringflug: Beschriftung ----------
   Der Ring hat drei leuchtende Punkte und war bis hierher unbeschriftet -
   niemand konnte wissen, wofuer sie stehen. Es sind die drei Quellen, die
   schon im Hero genannt werden. Die Zeilen erscheinen nacheinander,
   waehrend die Kamera durch den Ring faehrt (bewegung.js). */
.flug-text {
  position: relative;
  text-align: center;
  pointer-events: none;
  /* Frueher wurde der ganze Block ein- und ausgeblendet. Jetzt steuert
     bewegung.js die einzelnen Zeilen, der Block selbst bleibt sichtbar. */
  opacity: 1;
}
.flug-text p { max-width: none; margin: 0; }
.flug-hut {
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--leise);
  margin-bottom: 22px !important;
  opacity: 0;
}
.flug-quelle {
  font-size: clamp(1.25rem, 2.3vw, 2rem);
  font-weight: 200;
  letter-spacing: -0.025em;
  line-height: 1.5;
  color: var(--text);
  opacity: 0;
}
.flug-schluss {
  margin-top: 22px !important;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--akzent);
  opacity: 0;
}

/* ---------- Saetze: Geruest statt nacktem Schwarz ----------
   Vorher scrollte man in eine leere Flaeche, in der Woerter aufpoppten.
   Jetzt tragen eine Kapitelmarke oben und eine Linie unten den Satz -
   beide wachsen mit der Scrollstrecke (--auf, gesetzt in stationen.js). */
.satz-block { position: relative; text-align: center; }
.satz-marke {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 34px;
  font-size: 9.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--leise);
  opacity: calc(var(--auf, 0) * 1);
  transition: opacity 240ms linear;
}
.satz-marke i {
  display: block;
  width: 26px; height: 1px;
  background: var(--akzent);
  transform: scaleX(var(--auf, 0));
  transform-origin: right center;
  transition: transform 240ms linear;
}
.satz-strich {
  display: block;
  width: min(320px, 60%);
  height: 1px;
  margin: 40px auto 0;
  background: linear-gradient(90deg, transparent, var(--linie-fein) 18%, var(--linie-fein) 82%, transparent);
  position: relative;
}
.satz-strich::after {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  height: 100%;
  width: calc(var(--auf, 0) * 100%);
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, var(--akzent), transparent);
  opacity: 0.5;
}
@media (prefers-reduced-motion: reduce) {
  .flug-hut, .flug-quelle, .flug-schluss { opacity: 1; }
  .satz-block { --auf: 1; }
}

/* Zahlen im Sieb gross setzen. Als Fliesstext in 12,5 px waren sie zwar
   da, aber nicht lesbar - und es sind die Zahlen, um die es geht. */
.sieb-zahlen {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(28px, 5vw, 64px);
  margin-top: 10px;
}
.sieb-zahlen .wert {
  margin: 0 0 4px;
  font-size: clamp(1.7rem, 3vw, 2.6rem);
  font-weight: 200;
  letter-spacing: -0.03em;
  line-height: 1;
  color: var(--text);
}
.sieb-zahlen .label {
  display: block;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--leise);
}
.sieb-stichtag { font-size: 11px; color: var(--leise); opacity: 0.55; margin-top: 4px; }
.sieb-vorher .sieb-klein { font-size: 13.5px; letter-spacing: 0.08em; }

/* ---------- Wochenablauf neben den Bildern ----------
   Der Ablauf war ein eigener Abschnitt unter der Zielgruppe. Rechts neben
   den Fotos blieb dadurch unter dem Absatz eine leere Flaeche, waehrend
   darunter ein fast leerer Abschnitt folgte. Jetzt fuellt der Ablauf diese
   Spalte. In der schmalen Spalte laeuft die Zeitleiste wieder senkrecht -
   die Querlage gilt nur, wo sie die Breite hat. */
.ablauf-neben { margin-top: 42px; padding-top: 34px; border-top: 1px solid var(--linie-fein); }
.ablauf-neben h3 { margin: 0 0 10px; font-size: 1.15rem; font-weight: 300; }
.ablauf-neben > p { margin-bottom: 4px; }

.ablauf-neben .zeitleiste {
  display: block;
  padding: 0 0 0 36px;
  margin-top: 30px;
}
.ablauf-neben .zeitleiste .strich {
  left: 8px; right: auto; top: 8px; bottom: 8px;
  width: 1px; height: auto;
}
.ablauf-neben .zeitleiste .strich::after {
  width: 100%;
  height: calc(var(--fortschritt, 0) * 100%);
  transition: height 140ms linear;
}
.ablauf-neben .zeitleiste li { padding: 0 0 30px; }
.ablauf-neben .zeitleiste li:last-child { padding-bottom: 0; }
.ablauf-neben .zeitleiste .punkt { left: -32px; top: 6px; }
.ablauf-neben .zeitleiste li.an .takt { color: var(--akzent); }


/* ---------- Zeichen in der Wortmarke ----------
   Das Buch-Zeichen aus logo/buch/ - dieselbe Geometrie wie im Cockpit.
   Inline im Quelltext statt als <img>, damit die beiden Farbtoene stehen
   bleiben; ueber <img src> gaebe es keine geerbte Textfarbe. */
.marke { display: inline-flex; align-items: center; gap: 10px; }
.marke .zeichen { width: 22px; height: 22px; display: block; flex: none; }
.fuss .marke .zeichen { width: 20px; height: 20px; }
@media (max-width: 639px) { .marke .zeichen { width: 19px; height: 19px; } }

/* ============================================================
   Kacheln auf hellem Grund, 3.9.2026.

   Die Kacheln fangen Licht: ein weisser Verlauf von oben links, eine
   weisse Lichtkante, ein blauer Schein beim Hover. Auf Papier ist
   weiss auf weiss nichts — die Kachel verschwindet. Dieselbe Idee
   gespiegelt: die Flaeche wird nicht heller als der Grund, sondern
   dunkler, und die Kante traegt den Akzent statt des Weiss.
   ============================================================ */
html.hell .auftritt ul.punkte li,
html.hell .auftritt ol.nummern li,
html.hell .auftritt .feld {
  background:
    linear-gradient(158deg, rgba(20, 22, 28, 0.05), rgba(20, 22, 28, 0.015) 58%);
}
html.hell .auftritt ul.punkte li::before,
html.hell .auftritt ol.nummern li::before,
html.hell .auftritt .feld::before {
  background: linear-gradient(90deg,
    rgba(44, 71, 166, 0.55) 0%,
    rgba(44, 71, 166, 0.28) 38%,
    rgba(20, 22, 28, 0.12) 72%,
    rgba(20, 22, 28, 0) 100%);
}
html.hell .auftritt ul.punkte li:hover::before,
html.hell .auftritt ol.nummern li:hover::before,
html.hell .auftritt .feld:hover::before {
  background: linear-gradient(90deg,
    rgba(44, 71, 166, 0.7) 0%,
    rgba(20, 22, 28, 0.22) 46%,
    rgba(20, 22, 28, 0) 100%);
}
html.hell .auftritt ul.punkte li::after,
html.hell .auftritt ol.nummern li::after,
html.hell .auftritt .feld::after {
  background:
    radial-gradient(420px 220px at 18% 0%, rgba(44, 71, 166, 0.1), transparent 70%);
}
html.hell .auftritt ul.punkte li:hover,
html.hell .auftritt ol.nummern li:hover,
html.hell .auftritt .feld:hover { border-color: rgba(44, 71, 166, 0.3); }

/* Das Wasserzeichen stand als helles Grau im Dunkeln. */
html.hell .auftritt ul.punkte .n,
html.hell .auftritt ol.nummern .n { color: rgba(20, 22, 28, 0.1); }
html.hell .auftritt ul.punkte li:hover .n,
html.hell .auftritt ol.nummern li:hover .n { color: rgba(44, 71, 166, 0.28); }

/* ============================================================
   Stimmen — Reiter statt Galerie, 3.9.2026.

   Bauform von mercury.com: eine Reihe Reiter, darunter genau ein
   Inhalt. Der Reiter traegt den Kern der Nachricht in zwei Woertern,
   der Nutzer waehlt, was er lesen will, statt an acht Bildern
   vorbeizuscrollen.

   Die Bilder sind Hochformat-Screenshots. Die Buehne bekommt deshalb
   eine feste Hoehe: ohne sie springt die Seite bei jedem Reiterwechsel,
   weil das naechste Bild anders hoch ist.
   ============================================================ */
.stimmen-block {
  margin-top: 34px;
}

.stimmen-reiter {
  display: flex;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
  border-bottom: 1px solid var(--linie-fein);
}
.stimmen-reiter::-webkit-scrollbar { display: none; }

.stimmen-reiter button {
  flex: 0 0 auto;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 11px 16px 13px;
  margin-bottom: -1px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 300;
  letter-spacing: -0.005em;
  color: var(--leise);
  white-space: nowrap;
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: color 220ms var(--weich), border-color 220ms var(--weich);
}
.stimmen-reiter button:hover { color: var(--muted); }
.stimmen-reiter button[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: var(--akzent);
}
.stimmen-reiter button:focus-visible {
  outline: 1px solid var(--akzent);
  outline-offset: -3px;
  border-radius: 6px;
}

/* Die Buehne. Hoehe fest, Bild passt sich ein - nicht umgekehrt. */
.stimmen-buehne {
  position: relative;
  margin-top: 30px;
  height: 520px;
}
@media (max-width: 639px) { .stimmen-buehne { height: 430px; } }

.stimmen-buehne .stimme {
  position: absolute;
  inset: 0;
  margin: 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.stimmen-buehne .stimme[hidden] { display: none; }

.stimmen-buehne img {
  max-height: 100%;
  width: auto;
  border-radius: 14px;
  border: 1px solid var(--linie-fein);
  /* Der Screenshot ist selbst dunkel. Auf hellem Grund braucht er einen
     Schatten, sonst klebt er wie ein Aufkleber; auf dunklem Grund faellt
     der Schatten nicht auf und stoert nicht. */
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.28);
}
html.hell .stimmen-buehne img {
  border-color: rgba(20, 22, 28, 0.14);
  box-shadow: 0 18px 44px rgba(20, 22, 28, 0.16);
}

/* Sanftes Einblenden beim Wechsel. Die Klasse setzt das Skript, und zwar
   nur beim Wechsel - nicht beim Laden. Mit `both` auf allen Feldern haengt
   das erste Bild auf Deckkraft 0, solange die Seite in einem Hintergrund-
   Tab liegt: Animationen laufen dort nicht, und ohne Start gilt der
   from-Zustand. Wer die Seite im Hintergrund oeffnet, saehe eine leere
   Buehne. Wer Bewegung abbestellt hat, bekommt den harten Schnitt - die
   Information ist dieselbe. */
.stimmen-buehne .stimme.wechsel {
  animation: stimme-auf 320ms var(--weich);
}
@keyframes stimme-auf {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .stimmen-buehne .stimme.wechsel { animation: none; }
}