/* ==========================================================================
   FÖRDERBUCH – DIE ÖFFENTLICHEN SEITEN
   --------------------------------------------------------------------------
   WOFÜR: Startseite, Funktionen, Für wen, Sicherheit, Fragen. Alles, was
   jemand OHNE Konto sieht.

   WARUM EINE EIGENE DATEI UND NICHT cockpit.css: Das sind zwei verschiedene
   Aufgaben. Die Anwendung ist ein Werkzeug für Menschen, die täglich damit
   arbeiten – dort trägt Ruhe. Die öffentliche Seite hat zwanzig Sekunden,
   um eine Entscheidung auszulösen; sie darf Bewegung, Fläche und Farbe
   einsetzen. Beide benutzen aber DIESELBEN Werte (index.css §1–§3) und
   DIESELBEN Grundbauteile (`.knopf`, `.sym`, `.wortmarke`) – sonst entstehen
   zwei Produkte, die zufällig denselben Namen tragen.

   DIE DREI REGELN AUS docs/DESIGN_SYSTEM.md GELTEN HIER GENAUSO:
     1. Kein Farbwert in dieser Datei. Nur var(--…). Der Wächter prüft es.
     2. Keine Gestaltung in der Vorlage – auch kein style="".
        (Die Content-Security-Policy verbietet Inline-Stile ohnehin.)
     3. Flächen tragen 1px-Linien. Ein Schatten steht nur dort, wo wirklich
        etwas ÜBER der Seite liegt: das Klappmenü und das Demo-Fenster.

   WAS HIER BEWUSST FEHLT: Verläufe, Glas-Effekte, ausgefahrene Ecken.
   Förderbuch verwaltet fremdes Geld. Eine Seite, die aussieht wie eine
   Krypto-Börse, verkauft das nicht besser – sie verkauft es schlechter.

   VERBUNDEN MIT: static/css/index.css (die Werte), static/js/start.js (die
   Bewegung), templates/index.html, templates/oeffentlich/*,
   templates/teile/kopf-oeffentlich.html, templates/teile/fuss-oeffentlich.html,
   qa/unit/test_startseite.py
   ========================================================================== */

/* ===== §1 GERÜST ========================================================= */
/* Die öffentliche Seite scrollt als GANZES – anders als die Anwendung, in
   der nur der Arbeitsbereich scrollt. Deshalb hebt `.oeffentlich` die
   Sperren wieder auf, die für die Anwendungshülle richtig sind. */
.oeffentlich {
  overflow-x: hidden;
  scroll-behavior: smooth;
}

/* EINE Breite für alle öffentlichen Seiten. 1200px statt der 46rem der
   Anwendung: Hier stehen vier Karten nebeneinander, dort eine Spalte. */
.obreite {
  max-width: 75rem;
  margin: 0 auto;
  padding: 0 var(--a5);
}

.streifen { padding: 5.5rem 0; }
.streifen--leise { background: var(--grund); border-block: 1px solid var(--linie); }
.streifen--schluss { text-align: center; padding-bottom: 6.5rem; }

/* Der Abschnittskopf: Kapitelwort, Überschrift, ein Satz. Immer in dieser
   Reihenfolge, damit ein Besucher beim Scrollen an derselben Stelle dasselbe
   findet. */
.kapitel { max-width: 42rem; margin: 0 auto 3rem; text-align: center; }

/* DAS KAPITELWORT ist die einzige Stelle, an der das Kupfer als Schrift
   auftritt (index.css §1: sparsam). Es ersetzt die Nummerierung, die eine
   Verkaufsseite nicht haben darf. */
.kapitel__wort {
  display: inline-block;
  margin-bottom: var(--a3);
  color: var(--kupfer);
  font-size: var(--s-klein);
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.kapitel__wort--hell { color: var(--dunkel-akzent); }

.streifen h2, .dunkelblock h2 {
  margin: 0;
  font-size: clamp(1.75rem, 3.4vw, 2.6rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  font-weight: 700;
}

.kapitel__sub {
  margin: var(--a4) 0 0;
  color: var(--leise);
  font-size: 1.05rem;
}

/* Was beim Hereinscrollen erscheint. NUR DECKKRAFT, kein Verschieben: Ein
   Element, das von unten hereinfährt, verschiebt beim Erscheinen den Rest –
   auf einem langsamen Gerät sieht das aus wie ein Ladefehler.

   UNSICHTBAR WIRD ES ERST, WENN DAS SKRIPT LÄUFT (`.oeffentlich--js` setzt
   start.js selbst). Stünde `opacity: 0` fest im Stil, wäre die halbe Seite
   ohne JavaScript leer – und zwar dauerhaft, weil dann niemand sie wieder
   einschaltet. Eine Verkaufsseite, die bei abgeschaltetem JavaScript leer
   ist, ist bei abgeschaltetem JavaScript kaputt, nicht schlicht. */
.zeigen { transition: opacity .5s ease; }
.oeffentlich--js .zeigen { opacity: 0; }
.oeffentlich--js .zeigen--da { opacity: 1; }

/* Die grosse Fassung des Knopfes aus cockpit.css. Nur Grösse, keine neue
   Sorte – der Knopf der Startseite IST der Knopf der Anwendung. */
.knopf--gross {
  min-height: 3rem;
  padding: var(--a3) var(--a5);
  font-size: var(--s-text);
}

/* Der Knopf auf dunklem Grund: Linie und Schrift wechseln, die Form bleibt. */
.knopf--hell {
  background: transparent;
  border-color: var(--dunkel-linie);
  color: var(--dunkel-text);
}

.knopf--hell:hover { border-color: var(--dunkel-akzent); color: var(--dunkel-akzent); }

.tatenreihe {
  display: flex;
  gap: var(--a3);
  justify-content: center;
  flex-wrap: wrap;
  margin-top: var(--a6);
}

.tatenreihe--links { justify-content: flex-start; }

/* DIE ZUSAGENLISTE. Sie kommt auf jeder öffentlichen Seite vor und ist
   deshalb hier definiert und nicht dreimal.

   SIE HEISST NICHT `.haken`: Diesen Namen trägt in cockpit.css schon eine
   Gruppe von Auswahlkästchen im Formular. Zwei Bauteile mit demselben Namen
   in zwei Dateien, die auf DERSELBEN Seite geladen werden, ist genau der
   Fehler, den `test_jedes_bauteil_wird_genau_einmal_definiert` je Datei
   verhindert – über zwei Dateien hinweg kann er es nicht, also muss der
   Name selbst eindeutig sein. Dasselbe gilt für `.stufe` (statt `.karte`),
   `.paar` (statt `.block`), `.streifen` (statt `.abschnitt`) und
   `.szenenknopf` (statt `.schritt`). */
.zusagen { list-style: none; margin: var(--a5) 0 0; padding: 0; }

.zusagen li {
  display: flex;
  align-items: flex-start;
  gap: var(--a3);
  padding: var(--a2) 0;
  color: var(--text);
}

.zusagen li .sym { color: var(--akzent); margin-top: .2em; }
.zusagen--offen li .sym { color: var(--leise); }

/* Die Kopfzeile der Unterseiten. KEIN zweiter Hero: Ein Bild-Aufbau, der
   sich auf jeder Seite wiederholt, macht aus fünf Seiten fünfmal dieselbe
   Seite. Hier steht nur, worum es geht – der Inhalt beginnt sofort darunter. */
.seitenkopf {
  padding: 4rem 0 3rem;
  border-bottom: 1px solid var(--linie);
  text-align: center;
}

.seitenkopf h1 {
  max-width: 20ch;
  margin: 0 auto;
  font-size: clamp(1.9rem, 3.8vw, 3rem);
  font-weight: 750;
  line-height: 1.12;
  letter-spacing: -.03em;
}

.seitenkopf__lead {
  max-width: 44rem;
  margin: var(--a5) auto 0;
  color: var(--leise);
  font-size: 1.05rem;
}

/* Die schmale Fassung der Breite – für Fliesstext und Fragen. Über 70
   Zeichen je Zeile verliert man beim Zurückspringen die Zeile (Typografie,
   nicht Geschmack). */
.obreite--eng { max-width: 48rem; }

/* --- Die Fragenliste ---------------------------------------------------
   <details> statt JavaScript: Das Aufklappen kann der Browser selbst, und
   zwar auch dann, wenn das Skript nicht lädt. Der Pfeil dreht sich mit. */
.fragen { display: flex; flex-direction: column; }

.frage { border-bottom: 1px solid var(--linie); }

.frage > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a4);
  padding: var(--a5) 0;
  font-size: var(--s-h3);
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}

.frage > summary::-webkit-details-marker { display: none; }

/* Das Pluszeichen wird beim Öffnen zum Minus – gezeichnet aus zwei Linien
   in einem Pseudoelement, damit dafür kein Bild geladen werden muss. */
.frage > summary::after {
  content: "+";
  flex: none;
  width: 1.6rem;
  color: var(--akzent);
  font-size: var(--s-h2);
  text-align: center;
}

.frage[open] > summary::after { content: "–"; }
.frage[open] > summary { color: var(--akzent); }
.frage p { margin: 0 0 var(--a4); color: var(--leise); max-width: 42rem; }
.frage p:last-child { padding-bottom: var(--a4); }
.frage a { color: var(--akzent); }

/* Eine Zusage mit Erklärung darunter: <li> trägt Symbol und einen <span>,
   in dem fett die Aussage und normal die Begründung steht. */
.zusagen li span b { display: block; }

/* ===== §2 DER KOPF ======================================================= */
/* Er klebt oben. Auf einer Seite, die dreimal so lang ist wie ein Bildschirm,
   ist der Weg zurück sonst „ganz nach oben scrollen". */
.okopf {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--papier);
  border-bottom: 1px solid var(--linie);
}

/* ÜBER DIE GANZE BREITE, nicht auf 1200px eingeschnürt (Vorgabe Murat,
   22.08.2026: „üst menü sayfaya yayilmamis … yayilmaliydi ama").

   WARUM DAS RICHTIG IST UND NICHT NUR GEWÜNSCHT: Der Kopf ist kein Inhalt,
   sondern der Rahmen um den Inhalt. Ein Rahmen, der in der Mitte schwebt,
   sieht auf einem breiten Schirm aus wie eine Karte, die man vergessen hat
   zu dehnen. Die Marke gehört an die linke Kante, der Zugang an die rechte –
   dort sucht sie jeder. Das Menü bleibt trotzdem mittig, weil `.okopf__mitte`
   den freien Platz nimmt. */
.okopf__innen {
  display: flex;
  align-items: center;
  gap: var(--a4);
  padding: var(--a3) var(--a6);
}

.okopf__marke { display: flex; align-items: center; }

/* HIER STEHT KEIN `display` – und das ist eine Falle, in die dieses Projekt
   schon zweimal getappt ist (index.css, Kommentar bei `.wortmarke-hell`):
   Die helle und die dunkle Fassung der Wortmarke schalten über `display`
   um. Wer hier `display: block` schreibt, gewinnt mit der höheren
   Spezifität gegen beide Schalter – und dann stehen im dunklen Design
   ZWEI Logos nebeneinander. Genau so gesehen am 22.08.2026. */
.okopf__marke .wortmarke { height: 26px; width: auto; }

/* Die Mitte trägt das Menü und WÄCHST – so bleibt die Marke links und der
   Zugang rechts, egal wie viele Einträge dazwischen stehen. */
.okopf__mitte {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--a2);
  flex: 1;
}

/* DER GRIFF IST EIN <button> UND SAH BIS v0.99.1 AUCH SO AUS (Befund Murat:
   „90 lardaki web sitelerini andiriyor"). Genau das war es auch: Ein
   <button> ohne Zurücksetzen bringt vom Browser Rahmen, Grundfläche,
   eigene Schrift und eine eigene Ecke mit – neben drei glatten Textlinks
   stand damit ein grauer Kasten von 1998. Die vier Zeilen `border`,
   `background`, `font`, `cursor` sind deshalb kein Feinschliff, sondern
   die halbe Miete. */
.okopf__mitte > a, .omenue__griff {
  display: inline-flex;
  align-items: center;
  gap: var(--a1);
  padding: var(--a2) var(--a3);
  border: 0;
  border-radius: var(--ecke-rund);
  background: none;
  color: var(--text);
  font: inherit;
  font-weight: 600;
  font-size: var(--s-hinweis);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .16s ease, color .16s ease;
}

.okopf__mitte > a:hover, .omenue__griff:hover { background: var(--akzent-hell); color: var(--akzent); }
.okopf__mitte > a[aria-current] { color: var(--akzent); }

.okopf__zugang { display: flex; align-items: center; gap: var(--a2); margin-left: auto; }

/* Der Menüknopf für schmale Schirme. Am Rechner gibt es ihn nicht – dort
   steht das Menü ohnehin in der Zeile. */
.okopf__klapp { display: none; }

/* --- Das aufklappende Untermenü ---------------------------------------
   Es öffnet bei :hover UND bei :focus-within. Ohne den zweiten Teil ist das
   Menü mit der Tastatur nicht erreichbar – und eine Verkaufsseite, die man
   nur mit der Maus bedienen kann, schliesst genau die Besucher aus, die
   Barrierefreiheit prüfen (BITV). */
.omenue { position: relative; }

.omenue__pfeil { transform: rotate(90deg); transition: transform .18s ease; }

.omenue__blatt {
  position: absolute;
  top: calc(100% + var(--a2));
  left: 50%;
  translate: -50% 0;
  width: 26rem;
  padding: var(--a3);
  border: 1px solid var(--linie);
  border-radius: var(--ecke);
  background: var(--grund);
  box-shadow: var(--schatten-schwebend);
  opacity: 0;
  visibility: hidden;
  transition: opacity .16s ease, visibility .16s;
}

.omenue:hover .omenue__blatt,
.omenue:focus-within .omenue__blatt { opacity: 1; visibility: visible; }
.omenue:hover .omenue__pfeil,
.omenue:focus-within .omenue__pfeil { transform: rotate(-90deg); }

.omenue__blatt a {
  display: flex;
  gap: var(--a3);
  padding: var(--a3);
  border-radius: var(--ecke-klein);
  color: var(--text);
  text-decoration: none;
}

.omenue__blatt a:hover { background: var(--papier); }
.omenue__blatt b { display: block; font-size: var(--s-hinweis); }
.omenue__blatt small { display: block; color: var(--leise); font-size: var(--s-klein); line-height: 1.4; }

.omenue__zeichen {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.1rem;
  height: 2.1rem;
  border-radius: var(--ecke-klein);
  background: var(--akzent-hell);
  color: var(--akzent);
}

/* ===== §3 HERO =========================================================== */
.hero { position: relative; padding: 4rem 0 0; text-align: center; }
.hero__innen { position: relative; z-index: 1; }

.hero__satz {
  max-width: 22ch;
  margin: 0 auto;
  font-size: clamp(2rem, 4.4vw, 3.4rem);
  font-weight: 750;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.hero__zeile { display: block; margin-top: .12em; white-space: nowrap; }

/* DIE MARKIERUNG. Sie trägt das Kupfer – und sie ist der Grund, warum es
   diese dritte Farbe gibt: Das eine Wort, auf das es ankommt, kann nicht
   grün sein, weil grün hier alles ist. */
.hervor {
  display: inline-block;
  padding: .04em .3em;
  border-radius: .28em;
  background: var(--kupfer-hell);
  color: var(--kupfer);
}

/* Das Wort wechselt. Die BREITE läuft weich mit, sonst springt die ganze
   Zeile bei jedem Wechsel – genau daran ist der erste Versuch im
   Schwesterprojekt gescheitert. Die Breite setzt start.js. */
.hervor__wort {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  text-align: left;
  transition: opacity .24s ease, width .36s cubic-bezier(.22, 1, .36, 1);
}

.hervor__wort--weg { opacity: 0; }

.hero__lead {
  max-width: 44rem;
  margin: var(--a5) auto 0;
  color: var(--leise);
  font-size: 1.1rem;
}

/* --- Die Gesichter -------------------------------------------------------
   Sie lösen sich beim Laden nacheinander aus der Unschärfe und schweben
   danach leise weiter. VERSCHIEDENE Rundungen und verschiedene Dauern:
   sieben gleiche Kreise im Gleichschritt sind eine Perlenkette. */
/* MEHR LUFT ZWISCHEN DEN MENSCHEN (Vorgabe Murat: „aralikli yap birazda").
   Eng nebeneinander sind sieben Köpfe eine Perlenkette; mit Abstand sind es
   sieben Personen. `position: relative` ist die Bühne für die fliegenden
   Karten – sie werden darin absolut gesetzt. */
.gesichter {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--a5);
  height: 5.6rem;
  margin-bottom: var(--a6);
}

.gesicht {
  width: 4.6rem;
  height: 4.6rem;
  flex: none;
  overflow: hidden;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  opacity: 0;
  filter: blur(6px);
  animation: gesichtAuf .9s cubic-bezier(.22, .8, .3, 1) forwards;
}

/* Das Bild sitzt OBEN und wird unten von der Form beschnitten – der Kopf ist
   ganz zu sehen, die Schultern laufen sauber in die Kante. */
.gesicht img { width: 100%; height: auto; display: block; margin-top: 9%; }

/* NACH DEM AUFTAUCHEN SCHWEBEN SIE. Verschiedene Dauern und Verzögerungen –
   gleiche Dauer heisst Gleichschritt, und Gleichschritt sieht mechanisch
   aus. Die zweite Animation läuft NEBEN der ersten (`gesichtAuf` fasst nur
   Deckkraft und Unschärfe an, `gesichtSchweben` nur die Verschiebung), sie
   kommen sich also nicht in die Quere. */
@keyframes gesichtSchweben {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}

/* DIE ÜBERGABE: Wer etwas bekommt, leuchtet kurz in seiner eigenen Farbe
   auf. Ohne dieses Aufleuchten sieht man, dass sich etwas BEWEGT – aber
   nicht, dass es ANKOMMT, und genau darum geht es. */
.gesicht--empfangen { animation: gesichtEmpfang 1s cubic-bezier(.2, .8, .3, 1); }

@keyframes gesichtEmpfang {
  0%   { transform: scale(1); }
  30%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* Die fliegende Karte. Sie liegt ÜBER den Gesichtern, fängt keine Klicks ab
   und wird nach der Landung wieder entfernt (start.js). */
.flugvorrat { display: none; }

.flug {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: var(--a1);
  padding: 3px var(--a2);
  border: 1px solid var(--linie);
  border-radius: var(--ecke-rund);
  background: var(--grund);
  color: var(--akzent);
  font-size: var(--s-klein);
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
}

.flug .sym { width: 1em; height: 1em; }
.flug--frist { color: var(--warnung); }
.flug--bescheid { color: var(--text); }
.flug--abruf { color: var(--kupfer); }

.gesicht--1 { background: var(--weich-blau);    border-radius: 50%; animation-delay: 0s; }
.gesicht--2 { background: var(--akzent-hell);   border-radius: 34%; animation-delay: .09s; }
.gesicht--3 { background: var(--kupfer-hell);   border-radius: 44%; animation-delay: .18s; }
.gesicht--4 { background: var(--weich-flieder); border-radius: 50%; animation-delay: .27s; }
.gesicht--5 { background: var(--weich-salbei);  border-radius: 30%; animation-delay: .36s; }
.gesicht--6 { background: var(--weich-rose);    border-radius: 46%; animation-delay: .45s; }
.gesicht--7 { background: var(--weich-sand);    border-radius: 38%; animation-delay: .54s; }

/* Das Schweben beginnt, wenn das Auftauchen vorbei ist – die Klasse setzt
   start.js. Sieben verschiedene Dauern, sonst atmen alle im Takt. */
.gesicht--da { opacity: 1; filter: none; animation: gesichtSchweben 5s ease-in-out infinite; }
.gesicht--da.gesicht--1 { animation-duration: 4.6s; }
.gesicht--da.gesicht--2 { animation-duration: 5.4s; animation-delay: .3s; }
.gesicht--da.gesicht--3 { animation-duration: 4.9s; animation-delay: .8s; }
.gesicht--da.gesicht--4 { animation-duration: 5.8s; animation-delay: .2s; }
.gesicht--da.gesicht--5 { animation-duration: 5.1s; animation-delay: .6s; }
.gesicht--da.gesicht--6 { animation-duration: 4.7s; animation-delay: 1s; }
.gesicht--da.gesicht--7 { animation-duration: 5.5s; animation-delay: .4s; }

@keyframes gesichtAuf { to { opacity: 1; filter: blur(0); } }

/* --- Die verstreuten Kacheln --------------------------------------------
   Vier Regeln, damit daraus keine Unruhe wird:
     1. NIE über Text – sie sitzen ausserhalb der Textspalte.
     2. Keine Klicks (`pointer-events`), kein Vorlesen (`aria-hidden`).
     3. Sehr langsam (15–20 s) und sehr wenig Weg (12px).
     4. Unter 1180px verschwinden sie ganz. */
.streu { position: absolute; inset: 0; pointer-events: none; z-index: 0; }

.streu__k {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--a2);
  color: var(--leise);
  font-size: var(--s-klein);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  animation: streuAuf .9s ease forwards, streuSchweb 17s ease-in-out infinite;
}

.streu__i {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--ecke);
  background: var(--grund);
  border: 1px solid var(--linie);
}

.streu__k--1 { left: 4%;  top: 3.5rem;  animation-delay: .5s, 0s;    color: var(--akzent); }
.streu__k--2 { left: 8%;  top: 15rem;   animation-delay: .9s, 1.1s; }
.streu__k--3 { left: 3%;  top: 26.5rem; animation-delay: 1.3s, 2.2s; }
.streu__k--4 { right: 5%; top: 5rem;    animation-delay: .7s, .6s; }
.streu__k--5 { right: 3%; top: 16.5rem; animation-delay: 1.1s, 1.7s; }
.streu__k--6 { right: 7%; top: 27.5rem; animation-delay: 1.5s, 2.6s; color: var(--kupfer); }

.streu__k--1 .streu__i { color: var(--akzent); }
.streu__k--6 .streu__i { color: var(--kupfer); }

@keyframes streuAuf { to { opacity: 1; } }
@keyframes streuSchweb {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

/* ===== §4 DIE LEBENDE DEMO =============================================== */
.buehne { padding: 4.5rem 0 5.5rem; }

/* Das Fenster ist das EINZIGE Bauteil der Seite mit Schatten – es liegt
   sichtbar über der Fläche, und genau dafür ist der Wert gedacht. */
.fenster {
  border: 1px solid var(--linie);
  border-radius: var(--ecke);
  background: var(--grund);
  overflow: hidden;
  box-shadow: var(--schatten-schwebend);
}

.fenster__balken {
  display: flex;
  align-items: center;
  gap: var(--a4);
  padding: var(--a3) var(--a4);
  border-bottom: 1px solid var(--linie);
  background: var(--papier);
}

.fenster__punkte { display: flex; gap: 6px; }
.fenster__punkte i {
  width: 10px; height: 10px; border-radius: var(--ecke-rund);
  background: var(--linie); display: block;
}

.fenster__adresse {
  flex: 1;
  padding: 3px var(--a3);
  border: 1px solid var(--linie);
  border-radius: var(--ecke-rund);
  background: var(--grund);
  color: var(--leise);
  font-size: var(--s-klein);
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* DIE HÖHE IST GEMESSEN, NICHT GERATEN (22.08.2026): Die höchste Szene ist
   die Übersicht mit 446px Inhalt. Eine Bühne, die sich je Szene anpasst,
   liesse die halbe Seite bei jedem Wechsel springen – deshalb steht hier
   die grösste Höhe fest, und die kürzeren Szenen haben unten Luft. */
.fenster__app { display: grid; grid-template-columns: 13rem 1fr; min-height: 31rem; }

/* Die Mini-Seitenleiste trägt dasselbe Markengrün wie die echte. Sie ist
   der Grund, warum das Fenster nach DIESEM Produkt aussieht und nicht nach
   irgendeiner Software. */
.mleiste {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--a4) var(--a3);
  background: var(--leiste);
  color: var(--leiste-text);
  font-size: var(--s-klein);
}

.mleiste__marke {
  padding: var(--a2) var(--a3) var(--a4);
  color: var(--leiste-aktiv);
  font-weight: 700;
  text-align: center;
}

.mleiste__eintrag {
  display: flex;
  align-items: center;
  gap: var(--a2);
  padding: var(--a2) var(--a3);
  border-radius: var(--ecke-klein);
  transition: background .25s ease, color .25s ease;
}

.mleiste__eintrag--hier { background: var(--leiste-flaeche); color: var(--leiste-aktiv); }

/* DIE ZÄHLER IN DER LEISTE. Sie sind der billigste Weg, aus einer Attrappe
   eine benutzte Anwendung zu machen: Eine Navigation ohne Zahlen sieht neu
   aus, eine mit Zahlen sieht nach Arbeit aus. */
.mleiste__zahl {
  margin-left: auto;
  padding: 0 var(--a2);
  border-radius: var(--ecke-rund);
  background: var(--leiste-linie);
  color: var(--leiste-text);
  font-size: var(--s-klein);
  font-weight: 700;
}

.mleiste__zahl--neu { background: var(--leiste-aktiv); color: var(--leiste); }

.mleiste__fuss {
  display: flex;
  align-items: center;
  gap: var(--a2);
  margin-top: auto;
  padding: var(--a3);
  border-top: 1px solid var(--leiste-linie);
  color: var(--leiste-leise);
  font-size: var(--s-klein);
}

.marbeit { position: relative; padding: var(--a5); background: var(--grund); }

/* Alle Szenen liegen übereinander; sichtbar ist die aktive. `position:
   absolute` für die inaktiven, damit sie keine Höhe beitragen – sonst wäre
   das Fenster so hoch wie alle sechs Szenen zusammen. */
.szene {
  position: absolute;
  inset: var(--a5);
  opacity: 0;
  visibility: hidden;
  transition: opacity .4s ease, visibility .4s;
}

.szene--hier { opacity: 1; visibility: visible; }

.szene__kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a3);
  padding-bottom: var(--a3);
  margin-bottom: var(--a4);
  border-bottom: 1px solid var(--linie);
  font-size: var(--s-h3);
}

.szene__fuss {
  display: flex;
  align-items: center;
  gap: var(--a2);
  margin: var(--a4) 0 0;
  color: var(--leise);
  font-size: var(--s-klein);
}

.szene__fuss .sym { color: var(--akzent); }

.szene__rechts { display: flex; align-items: center; gap: var(--a2); }

/* Zwei Spalten im Arbeitsbereich: links das Bild, rechts die Zahlen – oder
   umgekehrt. Ein Bildschirm mit nur einer Spalte sieht aus wie ein Formular;
   erst das Nebeneinander macht daraus eine Übersicht. */
.mraster { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a4); margin-bottom: var(--a4); }
.mraster--schmal { grid-template-columns: .9fr 1.1fr; }
.mspalte { display: flex; flex-direction: column; gap: var(--a3); }

.mkachel {
  padding: var(--a4);
  border: 1px solid var(--linie);
  border-radius: var(--ecke-klein);
  background: var(--papier);
}

.mkachel__kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--a3);
  margin-bottom: var(--a3);
  color: var(--leise);
  font-size: var(--s-klein);
}

.mkachel__kopf b { color: var(--text); }

/* --- Der Ring: was von der Bewilligung schon gebunden ist --------------
   ZWEI KREISE ÜBEREINANDER, nicht drei Segmente nebeneinander: „abgerufen"
   und „verbraucht" sind keine getrennten Töpfe, sondern zwei Stände
   DERSELBEN Summe – verbraucht liegt immer innerhalb von abgerufen. Genau
   das zeigt die Überlagerung, und eine Tortengrafik zeigt es falsch.

   `pathLength="100"` (im Markup) macht aus jedem Prozentwert unmittelbar
   eine Strichlänge – ohne diese Angabe müsste hier der Umfang 2·π·r
   ausgerechnet und bei jeder Grössenänderung neu gerechnet werden. */
.mkachel--ring {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-areas: "ring legende";
  align-items: center;
  gap: var(--a5);
}

/* WARUM ZWEI EIGENE EIGENSCHAFTEN UND NICHT EIN <svg>: Ein Kegelverlauf
   (`conic-gradient`) zeichnet den Ring ohne eine einzige Zeile Markup. Die
   beiden Winkel stehen als eigene Eigenschaften da, damit sie sich
   ANIMIEREN lassen – dafür müssen sie über `@property` einen Typ bekommen,
   sonst tauscht der Browser sie hart aus statt weich zu laufen.

   DER RÜCKFALL IST DER WICHTIGERE TEIL: Die Endwerte stehen an `.ring`
   selbst, die Animation läuft von 0 dorthin. Ein Browser ohne `@property`
   (Firefox vor 128) überspringt die Animation und zeigt den fertigen Ring –
   und nicht, wie beim umgekehrten Aufbau, einen leeren. */
@property --anteil  { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@property --anteil2 { syntax: "<percentage>"; inherits: false; initial-value: 0%; }

.ring {
  position: relative;
  grid-area: ring;
  width: 7rem;
  height: 7rem;
  flex: none;
  border-radius: var(--ecke-rund);
  --anteil: 39%;
  --anteil2: 44%;
  background: conic-gradient(var(--akzent) 0 var(--anteil),
                             var(--akzent-hell) var(--anteil) var(--anteil2),
                             var(--linie) var(--anteil2) 100%);
}

/* Das Loch in der Mitte. Ein `mask` wäre kürzer und bräuchte eine feste
   Farbe – die ist ausserhalb von index.css nicht erlaubt (§1). */
.ring::after {
  content: "";
  position: absolute;
  inset: 17%;
  border-radius: var(--ecke-rund);
  background: var(--papier);
}

.ring--voll { --anteil: 100%; --anteil2: 100%; background: conic-gradient(var(--gut) 0 100%); }
.ring--klein { width: 4.6rem; height: 4.6rem; }
.szene--hier .ring { animation: ringFuellen 1.3s cubic-bezier(.22, 1, .36, 1) .15s backwards; }
@keyframes ringFuellen { from { --anteil: 0%; --anteil2: 0%; } }

.ring__mitte {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 1;
  text-align: center;
  line-height: 1.2;
}
.ring__mitte b { display: block; font-size: var(--s-h3); font-variant-numeric: tabular-nums; }
.ring__mitte small { color: var(--leise); font-size: var(--s-klein); }

.ringlegende { grid-area: legende; list-style: none; margin: 0; padding: 0; }

.ringlegende li {
  display: flex;
  align-items: center;
  gap: var(--a2);
  padding: 3px 0;
  color: var(--leise);
  font-size: var(--s-klein);
}

.ringlegende b { margin-left: auto; color: var(--text); font-variant-numeric: tabular-nums; }

.punkt { width: 9px; height: 9px; border-radius: var(--ecke-rund); flex: none; }
.punkt--verbraucht { background: var(--akzent); }
.punkt--abgerufen { background: var(--akzent-hell); border: 1px solid var(--akzent); }
.punkt--offen { background: var(--linie); }

/* --- Die Säulen: acht Monate, der letzte hervorgehoben ---------------- */
.msaeulen { display: flex; align-items: flex-end; gap: 5px; height: 3.6rem; }

.msaeule {
  flex: 1;
  border-radius: 3px 3px 0 0;
  background: var(--akzent-hell);
  height: var(--hoehe, 50%);
  transform-origin: bottom;
}

.szene--hier .msaeule { animation: saeuleWachsen .7s cubic-bezier(.22,1,.36,1) backwards; }
.szene--hier .msaeule:nth-child(1) { animation-delay: .05s; }
.szene--hier .msaeule:nth-child(2) { animation-delay: .11s; }
.szene--hier .msaeule:nth-child(3) { animation-delay: .17s; }
.szene--hier .msaeule:nth-child(4) { animation-delay: .23s; }
.szene--hier .msaeule:nth-child(5) { animation-delay: .29s; }
.szene--hier .msaeule:nth-child(6) { animation-delay: .35s; }
.szene--hier .msaeule:nth-child(7) { animation-delay: .41s; }
.szene--hier .msaeule:nth-child(8) { animation-delay: .47s; background: var(--akzent); }

@keyframes saeuleWachsen { from { transform: scaleY(0); } to { transform: scaleY(1); } }

.msaeule--35 { --hoehe: 35%; }
.msaeule--40 { --hoehe: 40%; }
.msaeule--55 { --hoehe: 55%; }
.msaeule--62 { --hoehe: 62%; }
.msaeule--70 { --hoehe: 70%; }
.msaeule--78 { --hoehe: 78%; }
.msaeule--88 { --hoehe: 88%; }
.msaeule--95 { --hoehe: 95%; }

.mtrend {
  display: inline-flex;
  white-space: nowrap;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
  color: var(--leise);
  font-size: var(--s-klein);
}

.mtrend--gut { color: var(--gut); }
.mtrend .sym { width: .9em; height: .9em; }

.mmarke {
  padding: 2px var(--a3);
  border-radius: var(--ecke-rund);
  border: 1px solid var(--linie);
  background: var(--papier);
  color: var(--leise);
  font-size: var(--s-klein);
  font-weight: 600;
  white-space: nowrap;
}

.mmarke--gut { border-color: var(--gut); background: var(--gut-hell); color: var(--gut); }
.mmarke--warnung { border-color: var(--warnung); background: var(--warnung-hell); color: var(--warnung); }

/* --- Szene 1: die Zahlen --- */
.mzahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--a3); margin-bottom: var(--a4); }

.mzahl {
  padding: var(--a2) var(--a3);
  border: 1px solid var(--linie);
  border-radius: var(--ecke-klein);
  background: var(--papier);
}

.mzahl small { display: block; color: var(--leise); font-size: var(--s-klein); }
.mzahl b { font-size: var(--s-h2); font-variant-numeric: tabular-nums; }

.mliste { display: flex; flex-direction: column; }

.mzeile {
  display: flex;
  align-items: center;
  gap: var(--a3);
  padding: var(--a3) 0;
  border-bottom: 1px solid var(--linie);
  font-size: var(--s-hinweis);
}

.mzeile span:nth-child(2) { flex: 1; }

/* WER ZUSTÄNDIG IST, steht an der Frist. Eine Frist ohne Namen daneben ist
   eine Frist, die niemand hat. */
.mzeile__wer {
  flex: none;
  padding: 1px var(--a2);
  border-radius: var(--ecke-rund);
  background: var(--akzent-hell);
  color: var(--akzent);
  font-size: var(--s-klein);
  font-weight: 600;
}

/* DIE STAFFELUNG: Zeilen und Positionen treten nacheinander auf, nicht alle
   auf einmal. Der Unterschied ist der zwischen „ein Bild erscheint" und
   „hier arbeitet gerade jemand" – und er kostet acht Zeilen. */
.szene--hier .mzeile--folge, .szene--hier .mposten--folge { animation: aufsteigen .5s ease backwards; }
.szene--hier .mzeile--folge:nth-child(1), .szene--hier .mposten--folge:nth-child(1) { animation-delay: .1s; }
.szene--hier .mzeile--folge:nth-child(2), .szene--hier .mposten--folge:nth-child(2) { animation-delay: .2s; }
.szene--hier .mzeile--folge:nth-child(3), .szene--hier .mposten--folge:nth-child(3) { animation-delay: .3s; }
.szene--hier .mzeile--folge:nth-child(4), .szene--hier .mposten--folge:nth-child(4) { animation-delay: .4s; }
.szene--hier .mposten--folge:nth-child(5) { animation-delay: .5s; }
.szene--hier .mposten--folge:nth-child(6) { animation-delay: .6s; }

@keyframes aufsteigen { from { opacity: 0; transform: translateY(8px); } }
.mzeile b { color: var(--leise); font-weight: 600; white-space: nowrap; }
.mliste--gross .mzeile { padding: var(--a4) 0; }

/* Die Ampel trägt hier keine Schrift – sie steht neben dem Wort, nie
   allein. Farbe ist nie das einzige Merkmal (DESIGN_SYSTEM §3.2): die
   Frist daneben sagt dasselbe noch einmal. */
.mampel { width: 10px; height: 10px; border-radius: var(--ecke-rund); flex: none; background: var(--linie); }
.mampel--gut { background: var(--gut); }
.mampel--warnung { background: var(--warnung); }
.mampel--schlecht { background: var(--schlecht); }

/* --- Szene 2: Bescheid-Positionen --- */
.mbalken { display: flex; flex-direction: column; gap: var(--a3); }

.mposten {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--a3);
  font-size: var(--s-hinweis);
}

.mposten b { font-variant-numeric: tabular-nums; }

.mspur {
  /* `display: block` IST HIER PFLICHT und keine Kosmetik: Die Spur ist ein
     <span>, und ein <span> ist von Haus aus `inline` – dort greift keine
     Höhe. Im Bescheid fiel das nicht auf, weil sie dort ein Rasterfeld ist
     und dadurch ohnehin blockt; im Beleg-Bild war sie unsichtbar (gemessen
     am 22.08.2026: Höhe 0px). */
  display: block;
  grid-column: 1 / -1;
  height: 8px;
  border-radius: var(--ecke-rund);
  background: var(--akzent-hell);
  overflow: hidden;
}

.mspur__ist {
  display: block;
  height: 100%;
  width: var(--anteil, 50%);
  border-radius: var(--ecke-rund);
  background: var(--akzent);
}

/* IN DER DEMO WÄCHST DER BALKEN, ÜBERALL SONST STEHT ER DA. Die Animation
   hängt an `.szene--hier` – auf den Unterseiten gibt es keine Szene, und
   dort war der Balken deshalb dauerhaft null Pixel breit (gemessen am
   22.08.2026 auf /funktionen). Der Ausgangswert gehört also an die Regel
   oben, nicht in die Animation. */
.szene .mspur__ist { width: 0; }

/* Die Balken wachsen, wenn ihre Szene erscheint – nicht beim Laden der
   Seite, wo sie niemand sieht. */
.szene--hier .mspur__ist { animation: spurWachsen 1.1s cubic-bezier(.22, 1, .36, 1) forwards; }

.mspur__ist--18 { --anteil: 18%; }
.mspur__ist--33 { --anteil: 33%; }
.mspur__ist--45 { --anteil: 45%; }
.mspur__ist--50 { --anteil: 50%; }
.mspur__ist--62 { --anteil: 62%; }
.mspur__ist--80 { --anteil: 80%; }
.mspur__ist--100 { --anteil: 100%; }

@keyframes spurWachsen { to { width: var(--anteil, 50%); } }

/* --- Szene 2: das Blatt, aus dem die Positionen kommen --- */
.mdatei { display: flex; align-items: center; }

.mdatei__blatt {
  width: 100%;
  padding: var(--a4);
  border: 1px solid var(--linie);
  border-radius: var(--ecke-klein);
  background: var(--grund);
  text-align: center;
  font-size: var(--s-hinweis);
}

.mdatei__blatt .sym { width: 2rem; height: 2rem; color: var(--text); }
.mdatei__blatt b { display: block; margin-top: var(--a2); overflow-wrap: anywhere; }
.mdatei__blatt small { display: block; color: var(--leise); font-size: var(--s-klein); }
.mdatei__blatt .mspur { margin: var(--a3) 0 var(--a2); }

.mdatei__stand {
  display: inline-flex;
  padding: 1px var(--a2);
  border-radius: var(--ecke-rund);
  background: var(--gut-hell);
  color: var(--gut);
  font-size: var(--s-klein);
  font-weight: 600;
  opacity: 0;
}

.szene--hier .mdatei__stand { animation: einblenden .4s ease .9s forwards; }
.mspur--duenn { height: 5px; }

/* --- Szene 3: der Beleg wandert an seine Position --- */
.mbeleg {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--a3);
  margin-bottom: var(--a4);
}

.mbeleg__karte, .mbeleg__ziel {
  display: flex;
  align-items: center;
  gap: var(--a3);
  padding: var(--a3);
  border: 1px solid var(--linie);
  border-radius: var(--ecke-klein);
  background: var(--papier);
  font-size: var(--s-hinweis);
}

.mbeleg__ziel { display: block; position: relative; }
.mbeleg__ziel .mspur { margin-top: var(--a2); }
.mbeleg__karte small, .mbeleg__ziel small { display: block; color: var(--leise); font-size: var(--s-klein); }
.mbeleg__karte .sym { color: var(--kupfer); }

.szene--hier .mbeleg__karte { animation: belegRueber 1.4s ease .2s both; }

.mbeleg__pfeil { color: var(--akzent); display: flex; }

/* DER MAUSZEIGER. Er ist der Unterschied zwischen „etwas verschiebt sich"
   und „hier arbeitet jemand". Gezeichnet mit `clip-path` statt als Bild:
   ein Symbol dafür gibt es im Satz nicht, und ein handgemaltes SVG in der
   Vorlage ist verboten (DESIGN_SYSTEM §5.2). Das Symbol im Markup bleibt
   deshalb verborgen – es hält nur die Stelle. */
.mzeiger {
  position: absolute;
  left: 22%;
  top: 62%;
  width: 15px;
  height: 21px;
  background: var(--text);
  clip-path: polygon(0 0, 0 76%, 26% 60%, 44% 100%, 62% 90%, 44% 52%, 78% 46%);
  opacity: 0;
  pointer-events: none;
}

.mzeiger .sym { display: none; }
.szene--hier .mzeiger { animation: zeigerZieht 2.6s cubic-bezier(.5, 0, .3, 1) .2s; }

@keyframes zeigerZieht {
  0%   { opacity: 0; transform: translate(-30px, 20px); }
  12%  { opacity: 1; transform: translate(0, 0); }
  55%  { opacity: 1; transform: translate(230px, -6px); }
  70%  { opacity: 1; transform: translate(230px, -6px); }
  100% { opacity: 0; transform: translate(250px, 10px); }
}

/* Das Etikett, das beim Ankommen aufsteigt: „+ 412,90 €". Es sagt in einer
   Bewegung, was die Zuordnung bewirkt. */
.mbeleg__plus {
  position: absolute;
  right: var(--a4);
  top: var(--a2);
  color: var(--gut);
  font-size: var(--s-klein);
  font-weight: 700;
  opacity: 0;
}

.szene--hier .mbeleg__plus { animation: plusAuf 1.4s ease 1.5s; }

@keyframes plusAuf {
  0%   { opacity: 0; transform: translateY(6px); }
  25%  { opacity: 1; transform: translateY(0); }
  75%  { opacity: 1; transform: translateY(-4px); }
  100% { opacity: 0; transform: translateY(-10px); }
}
.szene--hier .mbeleg__pfeil { animation: pfeilTupfen 1.4s ease infinite; }

@keyframes belegRueber {
  0%   { transform: translateX(-8px); opacity: 0; }
  60%  { transform: translateX(0); opacity: 1; }
  100% { transform: translateX(0); opacity: 1; }
}

@keyframes pfeilTupfen {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

/* --- Szene 4: Mittelabruf --- */
.mabruf { display: flex; flex-direction: column; }

.mabruf__zeile, .mabruf__summe {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--a3);
  padding: var(--a3) 0;
  border-bottom: 1px solid var(--linie);
  font-size: var(--s-hinweis);
}

.mabruf__zeile span { color: var(--leise); }
.mabruf__zeile b, .mabruf__summe b { font-variant-numeric: tabular-nums; }

.mabruf__summe {
  border-bottom: 0;
  margin-top: var(--a2);
  padding-top: var(--a4);
  border-top: 2px solid var(--linie);
  font-size: var(--s-h2);
  color: var(--akzent);
}

/* --- Szene 4: der Stempel --- */
.mstempel { display: flex; flex-direction: column; justify-content: center; gap: var(--a3); }

.mstempel__bild {
  align-self: center;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: var(--a3) var(--a5);
  border: 2px solid var(--gut);
  border-radius: var(--ecke-klein);
  color: var(--gut);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: var(--s-klein);
  transform: rotate(-7deg);
}

.mstempel__bild small { letter-spacing: 0; text-transform: none; font-weight: 600; }
.mstempel p { margin: 0; color: var(--leise); font-size: var(--s-klein); text-align: center; }

/* Der Stempel kommt aufgesetzt, nicht eingeblendet: gross und schief
   heran, dann fest. Ein Stempel, der sanft erscheint, ist kein Stempel. */
.szene--hier .mstempel__bild { animation: stempeln .5s cubic-bezier(.2, 1.4, .4, 1) 1.1s backwards; }

@keyframes stempeln {
  from { opacity: 0; transform: rotate(-16deg) scale(1.9); }
  to   { opacity: 1; transform: rotate(-7deg) scale(1); }
}

/* --- Szene 5: der Nachweis --- */
.mhaken { display: flex; flex-direction: column; gap: var(--a2); margin-bottom: var(--a4); }

.mhaken__zeile {
  display: flex;
  align-items: center;
  gap: var(--a3);
  padding: var(--a2) var(--a3);
  border-radius: var(--ecke-klein);
  background: var(--papier);
  font-size: var(--s-hinweis);
  opacity: 0;
}

.mhaken__zeile .sym { color: var(--gut); }

/* Sie haken NACHEINANDER ab. Genau das ist die Aussage des Abschnitts: Der
   Nachweis entsteht Stück für Stück aus dem, was schon dasteht. */
.szene--hier .mhaken__zeile { animation: einblenden .45s ease forwards; }
.szene--hier .mhaken__zeile:nth-child(1) { animation-delay: .15s; }
.szene--hier .mhaken__zeile:nth-child(2) { animation-delay: .45s; }
.szene--hier .mhaken__zeile:nth-child(3) { animation-delay: .75s; }
.szene--hier .mhaken__zeile:nth-child(4) { animation-delay: 1.05s; }
.szene--hier .mhaken__zeile:nth-child(5) { animation-delay: 1.35s; }

@keyframes einblenden { from { opacity: 0; } to { opacity: 1; } }

.mpaket {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--a4);
  padding: var(--a5);
  border: 1px solid var(--akzent);
  border-radius: var(--ecke-klein);
  background: var(--akzent-hell);
  color: var(--akzent);
  font-size: var(--s-hinweis);
  text-align: center;
  opacity: 0;
}

.mpaket .ring::after { background: var(--akzent-hell); }
.mpaket__text .sym { width: 1.6rem; height: 1.6rem; }
.mpaket__text b { display: block; overflow-wrap: anywhere; }
.mpaket small { display: block; color: var(--leise); font-weight: 400; }
.szene--hier .mpaket { animation: einblenden .5s ease 1.7s forwards; }

/* --- Szene 6: Förderradar --- */
.mfund { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a3); }
.mmarke b { font-weight: 700; }

.mfund__karte {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--a2);
  padding: var(--a4);
  border: 1px solid var(--linie);
  border-radius: var(--ecke-klein);
  background: var(--papier);
}

.mfund__karte b { font-size: var(--s-hinweis); line-height: 1.35; }
.mfund__karte small { color: var(--leise); font-size: var(--s-klein); }
.mfund__zeile { color: var(--akzent); font-size: var(--s-klein); font-weight: 600; }
.mfund--gross .mfund__karte { background: var(--grund); }

/* --- Die Schrittleiste unter dem Fenster --- */
.szenenleiste {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--a2);
  margin-top: var(--a5);
}

.szenenknopf {
  padding: var(--a2) var(--a4);
  border: 1px solid var(--linie);
  border-radius: var(--ecke-rund);
  background: var(--grund);
  color: var(--leise);
  font: inherit;
  font-size: var(--s-klein);
  font-weight: 600;
  cursor: pointer;
}

.szenenknopf--hier { border-color: var(--akzent); background: var(--akzent-hell); color: var(--akzent); }

.buehne__hinweis { margin: var(--a4) 0 0; text-align: center; color: var(--leise); font-size: var(--s-klein); }

/* ===== §5 DAS VERTRAUENSBAND ============================================= */
.band {
  padding: var(--a4) 0;
  border-block: 1px solid var(--linie);
  background: var(--grund);
  overflow: hidden;
}

/* Am Rechner stehen die fünf Zusagen nebeneinander und teilen sich die
   Breite. GEMESSEN am 22.08.2026: Mit den langen Fassungen („DSGVO-konform,
   AVV liegt bereit") lief die fünfte auf 1440px rechts aus dem Bild – ein
   abgeschnittenes Wort auf der Startseite liest sich wie ein Fehler, und
   zwar ausgerechnet in der Zeile, in der es um Verlässlichkeit geht. */
.band__lauf { display: flex; gap: var(--a5); justify-content: space-between; }

.band__halb {
  display: flex;
  gap: var(--a5);
  justify-content: space-between;
  flex: 1;
  color: var(--leise);
  font-size: var(--s-klein);
  font-weight: 600;
}

.band__halb > span { display: inline-flex; align-items: center; gap: var(--a2); white-space: nowrap; }
.band__halb .sym { color: var(--akzent); }

/* Die Kopie steht nur auf schmalen Schirmen, wo das Band läuft (§11). Am
   Rechner passt alles nebeneinander, und ein Vorleseprogramm soll die
   fünf Zusagen nicht doppelt vorlesen. */
.band__halb--kopie { display: none; }

/* ===== §6 DIE VIER SCHRITTE ============================================== */
.stufen { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--a4); }

.stufe {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--linie);
  border-radius: var(--ecke);
  background: var(--grund);
  overflow: hidden;
}

/* Die Bühne oben in der Karte zeigt, was der Schritt HERVORBRINGT. Ein
   Symbol allein sagt „Ordner"; drei kleine Zeilen sagen, was drinsteht. */
.stufe__buehne {
  display: flex;
  flex-direction: column;
  /* Die Kacheln sind so breit wie ihr Text und nicht so breit wie die Karte:
     In einer Spalte streckt Flexbox seine Kinder sonst auf volle Breite, und
     aus einer Marke wird ein Balken. */
  align-items: flex-start;
  gap: var(--a2);
  padding: var(--a5);
  border-bottom: 1px solid var(--linie);
  background: var(--papier);
  min-height: 9.5rem;
}

.mini {
  display: inline-flex;
  /* Oben ausgerichtet, weil eine zweizeilige Kachel sonst ihr Häkchen in
     die Mitte setzt – neben der zweiten Zeile, wo es nichts bedeutet. */
  align-items: flex-start;
  gap: var(--a2);
  padding: var(--a2) var(--a3);
  border: 1px solid var(--linie);
  border-radius: var(--ecke-klein);
  background: var(--grund);
  font-size: var(--s-klein);
  font-weight: 600;
}

.mini--folge { margin-left: var(--a4); color: var(--leise); font-weight: 400; }
.mini .sym { margin-top: .12em; }
.mini--folge .sym { color: var(--gut); }

.stufe__text { padding: var(--a5); }
.stufe__text h3 { margin: var(--a2) 0; font-size: var(--s-h2); }
.stufe__text p { margin: 0; color: var(--leise); font-size: var(--s-hinweis); }

.stufe__phase {
  display: inline-flex;
  align-items: center;
  gap: var(--a2);
  color: var(--leise);
  font-size: var(--s-klein);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.stufe__phase i { width: 8px; height: 8px; border-radius: var(--ecke-rund); background: var(--akzent); }
.stufe--blau .stufe__phase i { background: var(--text); }
.stufe--kupfer .stufe__phase i { background: var(--kupfer); }
.stufe--gruen .mini .sym { color: var(--akzent); }
.stufe--blau .mini .sym { color: var(--text); }
.stufe--kupfer .mini .sym { color: var(--kupfer); }

/* ===== §7 DIE ZWEI BLÖCKE =============================================== */
.paar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: var(--a7);
  padding: var(--a7) 0;
}

.paar + .paar { border-top: 1px solid var(--linie); }
.paar__text h2 { margin-bottom: var(--a4); }
.paar__text p { margin: 0; color: var(--leise); font-size: 1.05rem; }

.paar__bild {
  padding: var(--a5);
  border: 1px solid var(--linie);
  border-radius: var(--ecke);
  background: var(--papier);
}

/* Das Bild steht auf schmalen Schirmen UNTER dem Text – auch im gedrehten
   Block. Sonst stünde dort einmal Bild-Text und einmal Text-Bild, und die
   Seite läse sich wie zwei verschiedene Seiten. */
.paar--gedreht .paar__text { order: 2; }

/* ===== §8 DAS DUNKLE BAND =============================================== */
.streifen--dunkel { background: var(--dunkel); color: var(--dunkel-text); }
.streifen--dunkel p { color: var(--dunkel-leise); }

.dunkelblock { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a7); align-items: center; }
.dunkelblock h2 { margin-bottom: var(--a4); }

.dunkelliste { display: flex; flex-direction: column; gap: var(--a2); }

.dunkelliste > div {
  display: flex;
  gap: var(--a3);
  padding: var(--a4);
  border: 1px solid var(--dunkel-linie);
  border-radius: var(--ecke-klein);
}

.dunkelliste .sym { color: var(--dunkel-akzent); flex: none; margin-top: .2em; }
.dunkelliste b { display: block; font-size: var(--s-hinweis); }
.dunkelliste small { display: block; color: var(--dunkel-leise); font-size: var(--s-klein); }

/* ===== §9 EHRLICH GESAGT ================================================ */
.ehrlich { display: grid; grid-template-columns: 1fr 1fr; gap: var(--a5); }

.ehrlich__spalte {
  padding: var(--a6);
  border: 1px solid var(--linie);
  border-radius: var(--ecke);
  background: var(--grund);
}

.ehrlich__spalte > b { display: flex; align-items: center; gap: var(--a2); font-size: var(--s-h3); }
.ehrlich__spalte > b .sym { color: var(--akzent); }
.ehrlich__spalte .zusagen { margin-top: var(--a4); }
.ehrlich__satz { margin: var(--a5) 0 0; color: var(--leise); font-size: var(--s-klein); }

/* ===== §10 DIE FUSSLEISTE =============================================== */
.ofuss { background: var(--dunkel); color: var(--dunkel-text); padding: 4rem 0 var(--a6); }

.ofuss__raster {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: var(--a6);
  padding-bottom: var(--a6);
  border-bottom: 1px solid var(--dunkel-linie);
}

.ofuss__marke .wortmarke { height: 26px; width: auto; display: block; margin-bottom: var(--a4); }
.ofuss__marke p { margin: 0; color: var(--dunkel-leise); font-size: var(--s-hinweis); max-width: 32rem; }

.ofuss__zusagen { list-style: none; margin: var(--a5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--a2); }
.ofuss__zusagen li { display: flex; align-items: center; gap: var(--a2); font-size: var(--s-klein); }
.ofuss__zusagen .sym { color: var(--dunkel-akzent); }

.ofuss__spalte { display: flex; flex-direction: column; gap: var(--a3); }
.ofuss__spalte b { font-size: var(--s-hinweis); }
.ofuss__spalte a { color: var(--dunkel-leise); text-decoration: none; font-size: var(--s-hinweis); }
.ofuss__spalte a:hover { color: var(--dunkel-text); text-decoration: underline; }

.ofuss__abgrenzung {
  margin: var(--a5) 0 0;
  color: var(--dunkel-leise);
  font-size: var(--s-klein);
  max-width: 60rem;
}

.ofuss__zeile {
  display: flex;
  flex-wrap: wrap;
  gap: var(--a4);
  justify-content: space-between;
  margin-top: var(--a5);
  padding-top: var(--a4);
  border-top: 1px solid var(--dunkel-linie);
  color: var(--dunkel-leise);
  font-size: var(--s-klein);
}

.ofuss__rechts { display: flex; gap: var(--a4); }
.ofuss__rechts a { color: var(--dunkel-leise); }
.ofuss__rechts a:hover { color: var(--dunkel-text); }

/* ===== §11 SCHMALE SCHIRME ==============================================
   EINE Stelle für alle schmalen Regeln. Verteilt über die Datei wäre
   dieselbe Frage („was passiert auf dem Telefon?") an dreissig Orten
   beantwortet – und an einem davon falsch. */
@media (max-width: 1180px) {
  .streu { display: none; }
}

@media (max-width: 1000px) {
  /* Das Menü wandert in eine Schublade unter dem Kopf. DASSELBE Markup,
     andere Form – kein zweites Menü (DESIGN_SYSTEM §7.3). */
  .okopf__mitte {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: var(--a3);
    border-bottom: 1px solid var(--linie);
    background: var(--papier);
  }

  .okopf--offen .okopf__mitte { display: flex; }
  .okopf__klapp { display: inline-flex; }
  .okopf__mitte > a, .omenue__griff { width: 100%; justify-content: flex-start; padding: var(--a3); }

  .omenue__blatt {
    position: static;
    width: auto;
    translate: none;
    opacity: 1;
    visibility: visible;
    border: 0;
    box-shadow: none;
    padding: 0 0 var(--a3) var(--a4);
    background: transparent;
  }

  .omenue__pfeil { display: none; }

  .stufen { grid-template-columns: 1fr 1fr; }
  .paar, .dunkelblock { grid-template-columns: 1fr; gap: var(--a5); }
  .paar--gedreht .paar__text { order: 0; }
  .ofuss__raster { grid-template-columns: 1fr 1fr; }
}

/* GEMESSEN AM 22.08.2026 bei 420px: Marke (180px) und die beiden Knöpfe
   plus Menüzeichen (253px) brauchen zusammen rund 470px – die Kopfzeile lief
   also auf jedem Telefon rechts aus dem Bild, und „Zugang anfragen" war
   halb abgeschnitten. Ausgerechnet der Knopf, um den es auf dieser Seite
   geht.

   ZWEI ZEILEN STATT KLEINERER SCHRIFT: Der andere Weg wäre, Logo und Knöpfe
   so weit zu schrumpfen, bis es passt – bei 375px sind das Knöpfe, die man
   mit dem Daumen nicht mehr trifft (mindestens 44px Höhe, WCAG 2.5.5).
   Also bekommt die Zeile eine zweite Zeile: Marke oben, die beiden Knöpfe
   und das Menüzeichen darunter, gleichmässig verteilt.

   UND ES BLEIBT DASSELBE MARKUP. Der bequeme Weg wäre, die Knöpfe für das
   Telefon ein zweites Mal in die Schublade zu schreiben – dann gibt es sie
   zweimal, und beim nächsten Umbau ändert jemand nur eine Fassung
   (DESIGN_SYSTEM §7.3). */
@media (max-width: 620px) {
  .okopf__innen { flex-wrap: wrap; row-gap: var(--a2); padding: var(--a3) var(--a4); }
  .okopf__marke { flex: 1; }
  .okopf__zugang { width: 100%; margin-left: 0; }
  .okopf__zugang .knopf { flex: 1; padding: var(--a2) var(--a3); white-space: nowrap; }
  .okopf__klapp { flex: none; }

  /* DIE ÜBERSCHRIFT WIRD KLEINER, BEVOR DAS LÄNGSTE WORT ANSTÖSST.
     Gerechnet am längsten Wechselwort („Verwendungsnachweisen."): Bei 375px
     stehen 343px zur Verfügung, das Wort braucht bei 2rem rund 360px – es
     wäre also genau an der Stelle abgeschnitten, an der die Seite ihr
     Versprechen ausspricht. Mit 7vw sind es rund 296px. */
  .hero__satz { font-size: clamp(1.5rem, 7vw, 2.2rem); }
  /* Falls doch einmal ein längeres Wort dazukommt: lieber schmaler als über
     den Rand. Die Breite setzt start.js in Pixeln, deshalb braucht es hier
     eine ausdrückliche Obergrenze. */
  .hervor__wort { max-width: 100%; }
}

@media (max-width: 760px) {
  .streifen { padding: 3.5rem 0; }
  .obreite { padding: 0 var(--a4); }
  .hero { padding-top: 2.5rem; }
  .gesichter { height: 3.6rem; gap: var(--a1); margin-bottom: var(--a5); }
  .gesicht { width: 3.2rem; height: 3.2rem; }
  .hero__zeile { white-space: normal; }
  .stufen, .ehrlich, .mfund { grid-template-columns: 1fr; }
  .mraster, .mraster--schmal { grid-template-columns: 1fr; }
  .mkachel--ring { gap: var(--a4); }
  .ring { width: 5.5rem; height: 5.5rem; }
  .mzahlen { grid-template-columns: 1fr 1fr; }
  .ofuss__raster { grid-template-columns: 1fr; gap: var(--a5); }

  /* ===== DIE DEMO AUF DEM TELEFON =====================================
     Die Bühne wird nicht kleiner, sondern KÜRZER: Auf 420px stünden Ring,
     Kennzahlen, Säulen und Fristen untereinander und wären zusammen doppelt
     so hoch wie das Fenster – der Rest wurde schlicht abgeschnitten
     (gemessen am 22.08.2026).

     WAS WEGFÄLLT, IST DAS ZWEITE ARGUMENT, nie das erste: Die Säulen sind
     eine Zugabe zum Ring, die zweite Marke im Kopf eine Zugabe zum Zustand,
     die Fundstellen drei und vier eine Zugabe zu eins und zwei. Was
     verschwindet, verschwindet ganz – halbe Kacheln sehen aus wie ein
     Ladefehler. */
  .fenster__app { grid-template-columns: 1fr; min-height: 33rem; }
  .szene__rechts .mmarke + .mmarke { display: none; }
  .mspalte .mkachel { display: none; }
  .mkachel--ring { gap: var(--a3); }
  /* Der Ring bleibt gross genug, dass „48.500 €" INNEN steht. Kleiner
     wäre er schöner und der Betrag stünde über dem Rand – dann lieber der
     grössere Ring und die kleinere Zahl. */
  .ring { width: 5.6rem; height: 5.6rem; }
  .ring__mitte b { font-size: var(--s-klein); }
  .ring__mitte small { font-size: .75rem; }
  .mzeile__wer { display: none; }
  .mfund__karte:nth-child(n+3) { display: none; }
  .mposten:nth-child(n+5) { display: none; }
  .mhaken__zeile:nth-child(n+5) { display: none; }
  .mstempel p { display: none; }
  .mdatei__blatt .sym { width: 1.4rem; height: 1.4rem; }
  .mleiste { display: none; }
  .marbeit { padding: var(--a4); }
  .szene { inset: var(--a4); }

  /* Das Band LÄUFT, weil fünf Zusagen nebeneinander nicht passen. Die
     zweite Hälfte steht deshalb hier – nach genau einer halben Breite
     beginnt sie dort, wo die erste begann, und der Sprung ist unsichtbar. */
  .band__halb--kopie { display: flex; }
  .band__halb { flex: none; justify-content: flex-start; }
  .band__lauf { animation: bandLauf 26s linear infinite; width: max-content; justify-content: flex-start; }
}

@keyframes bandLauf {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ===== §12 WER KEINE BEWEGUNG WILL ======================================
   Nicht Geschmack, sondern Zugänglichkeit: Bewegung kann Übelkeit und
   Migräne auslösen (WCAG 2.3.3). Wer sie im Betriebssystem abstellt,
   bekommt hier eine Seite, auf der ALLES sofort da ist – nicht eine, auf
   der die Hälfte unsichtbar bleibt. */
@media (prefers-reduced-motion: reduce) {
  .oeffentlich { scroll-behavior: auto; }
  .zeigen, .oeffentlich--js .zeigen { opacity: 1; transition: none; }
  .gesicht, .gesicht--da, .streu__k, .band__lauf { animation: none; opacity: 1; filter: none; }
  .flug { display: none; }
  .szene--hier .mspur__ist { animation: none; width: var(--anteil, 50%); }
  .szene--hier .mhaken__zeile, .szene--hier .mpaket { animation: none; opacity: 1; }
  .szene--hier .mbeleg__karte, .szene--hier .mbeleg__pfeil { animation: none; }
  .szene--hier .ring, .szene--hier .msaeule, .szene--hier .mzeile--folge,
  .szene--hier .mposten--folge, .szene--hier .mstempel__bild { animation: none; }
  .szene--hier .mdatei__stand { animation: none; opacity: 1; }
  .mzeiger, .mbeleg__plus { display: none; }
  .szene { transition: none; }
}