/* ═══════════════════════════════════════════════════════════════════════
   Rivermatic — gemeinsames Stylesheet für alle Seiten
   ═══════════════════════════════════════════════════════════════════════
   Aufbau:
     01 Schriften        05 Kopf & Navigation   09 Rechner
     02 Farben (Tokens)  06 Bausteine der Seite 10 Kontakt & Formular
     03 Grundlagen       07 Preis               11 Fußzeile
     04 Bausteine allg.  08 FAQ                 12 Assistent
     13 Hero-Fluss (Animation im Kopfbereich, js/hero-fluss.js)

   FARBREGELN, die nicht gebrochen werden dürfen (Lesbarkeit):
     - --akzent-dunkel (#7d6349) ist NIE Textfarbe, nur Rand oder Fläche.
     - Auf der hellen Sektion (--hell-bg) ist Kupfer kein Fließtext;
       dort steht --hell-akzent (#8f5a28) für kurze Auszeichnungen.
     - --text-5 nur für nebensächliche Zeilen ab 14 px aufwärts.
   ═══════════════════════════════════════════════════════════════════════ */


/* ── 01 Schriften ─────────────────────────────────────────────────────
   Selbst gehostet, kein Google-Fonts-Aufruf. Archivo und IBM Plex stehen
   unter der SIL Open Font License. Beide Familien sind variabel — ein
   Gewichtsbereich statt mehrerer Dateien.                              */

@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/archivo-500-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 500 700;
  font-display: swap;
  src: url('fonts/archivo-500-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/ibmplexsans-400-600-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url('fonts/ibmplexsans-400-600-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibmplexmono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/ibmplexmono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibmplexmono-500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'IBM Plex Mono';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('fonts/ibmplexmono-500-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}


/* ── 02 Farben und Maße ──────────────────────────────────────────────── */

:root {
  /* Grundflächen */
  --bg:            #15181a;
  --bg-tief:       #101315;
  --flaeche:       #1e2426;
  --flaeche-2:     #1a1f21;
  --flaeche-3:     #171b1d;

  /* Kupfer — die Signaturfarbe */
  --akzent:        #e6a06b;
  --akzent-hell:   #f2b98f;
  --akzent-dunkel: #7d6349;   /* nur Rand/Fläche, nie Text */
  --akzent-schein: rgba(230, 160, 107, .5);
  --akzent-hauch:  rgba(230, 160, 107, .08);

  /* Kaltgrau — der zweite Ton */
  --kalt:          #7f8f90;
  --kalt-hell:     #9fb0b2;

  /* Text auf dunklem Grund */
  --text:          #eceff0;
  --text-2:        #c7cecf;
  --text-3:        #b8c0c1;
  --text-4:        #939c9d;
  --text-5:        #7d878a;

  /* Linien */
  --linie:         #272d2f;
  --linie-2:       #2e3436;
  --linie-3:       #333a3c;
  --linie-4:       #3d4548;

  /* Glas — die gemeinsame Oberfläche aller Kästen.
     Absichtlich KEIN backdrop-filter: der würde auf älteren Handys beim
     Scrollen ruckeln und brächte auf einem fast undurchsichtigen Grund
     ohnehin fast nichts. Der Glaseindruck entsteht aus drei Zutaten:
     einem sehr feinen hellen Verlauf, einer 1px-Lichtkante an der Oberkante
     und einem tiefen weichen Schatten darunter.
     Weil die Fläche durchscheinend ist (rgba, kein Vollton), nimmt jeder
     Kasten die Farbverläufe des Seitenhintergrunds mit auf — deshalb wirkt
     er wie eine Scheibe darüber und nicht wie ein aufgeklebtes Rechteck.
     "--stark" ist dieselbe Rezeptur, nur kräftiger: für den einen Kasten
     pro Abschnitt, der herausstechen soll. */
  --glas:            linear-gradient(160deg, rgba(244,241,235,.07), rgba(244,241,235,.02));
  --glas-stark:      linear-gradient(152deg, rgba(244,241,235,.13), rgba(244,241,235,.04) 52%, rgba(244,241,235,.016));
  --glas-rand:       rgba(244,241,235,.09);
  --glas-licht:      inset 0 1px 0 rgba(244,241,235,.11);
  --glas-licht-hell: inset 0 1px 0 rgba(244,241,235,.2);
  --glas-tiefe:      0 26px 60px -34px rgba(0,0,0,.9);
  --glas-tiefe-hoch: 0 46px 90px -34px rgba(0,0,0,.95);

  /* Ecken. Bis zum 12.08.2026 waren alle Kanten scharf (3–4px). Die weiche
     Ecke gehört zum Glaseindruck dazu — mit 3px wirkt der Verlauf eher wie
     ein Farbfehler als wie eine Scheibe. An EINER Stelle geändert, damit die
     ganze Seite dieselbe Rundung behält. */
  --ecke:          14px;
  --ecke-klein:    10px;
  --ecke-winzig:   6px;

  /* Helle Sektion */
  --hell-bg:       #f1efe8;
  --hell-text:     #161c18;
  --hell-text-2:   #3c443d;
  --hell-text-3:   #4e564d;
  --hell-akzent:   #8f5a28;
  --hell-linie:    #d6d0c2;

  /* Rückmeldungen */
  --gut:           #86efac;
  --schlecht:      #f0a3a3;

  /* Schriften */
  --f-kopf:  'Archivo', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-text:  'IBM Plex Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  /* ACHTUNG bei deutschen Texten in dieser Schrift: Das "ß" von IBM Plex Mono
     sieht aus wie ein griechisches Beta und wird als Fremdzeichen gelesen —
     am 12.08.2026 genau deshalb gemeldet ("Fließtext", "Teamgröße" auf zwei
     Baustein-Seiten). In Mono-Texten das ß umgehen: "mitten im Text" statt
     "Fließtext", "mit dem Team" statt "Teamgröße". Betrifft nur die
     Kundenseiten — in den internen Harness-Unterlagen ist "Fließtext" der
     richtige Fachbegriff und wird nicht in Mono gesetzt. */
  --f-mono:  'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;

  /* Maße */
  --breite:  1180px;
  --rand:    clamp(20px, 4vw, 32px);
  --luft:    clamp(58px, 7vw, 96px);
}


/* ── 03 Grundlagen ───────────────────────────────────────────────────── */

* { box-sizing: border-box; }

/* `hidden` muss immer gewinnen — auch gegen Klassen mit eigener display-Regel
   (z. B. .zusage im versteckten Abschnitt "Einblicke"). */
[hidden] { display: none !important; }

/* Erklaerung: README.md im Repo, Abschnitt "Website pflegen". */
.feld--zusatz { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  font-family: var(--f-text);
  font-size: 19px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
  background-image:
    repeating-linear-gradient(45deg, rgba(255,255,255,.028) 0px, rgba(255,255,255,.028) 1px, transparent 1px, transparent 9px),
    linear-gradient(118deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,0) 38%),
    radial-gradient(1200px 680px at 10% -8%, rgba(150,172,178,.16), transparent 62%),
    radial-gradient(900px 520px at 90% 6%, rgba(230,160,107,.09), transparent 60%),
    linear-gradient(180deg, #1a1e20 0%, var(--bg) 45%, var(--bg-tief) 100%);
  background-attachment: fixed;
}

a { color: var(--akzent); text-decoration: none; }
a:hover { color: var(--akzent-hell); }

img { max-width: 100%; height: auto; display: block; }

h1, h2, h3 {
  font-family: var(--f-kopf);
  letter-spacing: -.025em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-weight: 700; font-size: clamp(42px, 6.4vw, 88px); line-height: .98; }
h2 { font-weight: 700; font-size: clamp(30px, 4.4vw, 58px); line-height: 1.04; }
h3 { font-weight: 600; font-size: 22px;                     line-height: 1.25; letter-spacing: -.01em; }

p { margin: 0; }

:where(a, button, input, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--akzent);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--akzent); color: #14181a; }

summary { list-style: none; cursor: pointer; }
summary::-webkit-details-marker { display: none; }

/* Nur für Screenreader */
.nur-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Sprunglink */
.sprung {
  position: absolute; left: -9999px; top: 0; z-index: 70;
  background: var(--akzent); color: #14181a;
  font-weight: 600; padding: 12px 20px;
}
.sprung:focus { left: 12px; top: 12px; color: #14181a; }

/* Lesefortschritt oben */
.fortschritt {
  position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 60;
  background: linear-gradient(90deg, var(--akzent-dunkel), var(--akzent));
  transform: scaleX(0); transform-origin: 0 50%;
  box-shadow: 0 0 12px var(--akzent-schein);
}
@supports (animation-timeline: scroll()) {
  .fortschritt { animation: fortschrittWachsen linear both; animation-timeline: scroll(root); }
}
@keyframes fortschrittWachsen { from { transform: scaleX(0) } to { transform: scaleX(1) } }

/* Bewegungen */
@keyframes fliessen  { 0% { left: 0%; opacity: 0 } 12%, 88% { opacity: 1 } 100% { left: 100%; opacity: 0 } }
@keyframes atmen     { 0%, 100% { opacity: .35 } 50% { opacity: 1 } }
@keyframes welle     { from { transform: translateX(0) } to { transform: translateX(-24px) } }
@keyframes heben     { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-7px) } }
@keyframes tippen    { 0%, 60%, 100% { opacity: .25 } 30% { opacity: 1 } }

/* Sichtbarwerden beim Scrollen. Das Verstecken setzt erst das Skript —
   ohne JavaScript bleibt die Seite vollständig lesbar. */
.rv { opacity: 0; transform: translateY(18px); }
.rv.ist-da { opacity: 1; transform: none; transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.3,1); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .rv { opacity: 1; transform: none; }
}


/* ── 04 Allgemeine Bausteine ─────────────────────────────────────────── */

.wrap { max-width: var(--breite); margin: 0 auto; padding-inline: var(--rand); }

.sec { padding-block: var(--luft); }

/* Abgesetztes Band mit eigenem Verlauf */
.band {
  border-top: 1px solid var(--linie);
  border-bottom: 1px solid var(--linie);
  background: linear-gradient(180deg, var(--flaeche) 0%, var(--flaeche-2) 55%, var(--flaeche-3) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.055);
}
.band--oben { border-bottom: none; }

.eyebrow {
  display: block;
  font-family: var(--f-mono);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--akzent);
  margin-bottom: 20px;
}
.eyebrow--still { color: var(--text-4); }

.fuehrung {
  font-size: 19px;
  color: var(--text-3);
  max-width: 58ch;
  margin-top: 24px;
}

.klein {
  font-family: var(--f-mono);
  font-size: 14px;
  color: var(--text-4);
  line-height: 1.5;
}

/* Kopfzeile einer Sektion: Überschrift links, Zusatz rechts.
   Bewusst ein Raster und kein Flex: Als Flex-Zeile richtet sich die Breite
   der Spalten nach der ungebrochenen Textlänge der Überschrift — die ist
   immer breiter als der Platz, also rutscht der Zusatz auf eine eigene
   Zeile, obwohl beides nebeneinander passt. */
.sec__kopf {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: end;
  gap: 32px;
}
.sec__kopf > * { min-width: 0; }
.sec__kopf > a { justify-self: start; }
.sec__kopf p { max-width: 44ch; margin: 0; color: var(--text-3); font-size: 18px; }
@media (max-width: 900px) {
  .sec__kopf { grid-template-columns: 1fr; align-items: start; gap: 20px; }
}

/* Knöpfe */
/* `background: transparent` und `appearance: none` sind Pflicht, sobald die
   Klasse auf einem <button> sitzt und nicht nur auf einem <a>:
   Ein <button> bringt vom Browser einen hellgrauen Hintergrund mit (in
   Chromium rgb(240,240,240)). Ohne eigene Angabe blieb der stehen — mit
   der hellen Schrift von .btn--rand ergab das am 28.08.2026 einen
   unlesbaren, praktisch weissen Knopf ("Hinzufügen" im Selbsttest).
   Bei einem <a> faellt das nie auf, weil dessen Standard durchsichtig ist.
   `appearance: none` nimmt zusaetzlich die eigene Knopf-Optik von Safari
   und iOS weg, die sonst Rundungen und Verlaeufe darueberlegt. */
.btn {
  display: inline-block;
  font-family: var(--f-text);
  font-size: 17px; font-weight: 600;
  padding: 16px 26px;
  border-radius: 4px;
  border: 1px solid transparent;
  background: transparent;
  -webkit-appearance: none;
          appearance: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
.btn--kupfer {
  background: var(--akzent); color: #14181a;
  box-shadow: 0 10px 34px -10px rgba(230,160,107,.7);
}
.btn--kupfer:hover { background: var(--akzent-hell); color: #14181a; }
.btn--rand { border-color: var(--linie-4); color: var(--text); }
.btn--rand:hover { border-color: var(--kalt); color: var(--text); }
.btn--klein { font-size: 16px; padding: 13px 22px; }

/* Kupferner Textlink mit Unterstrich */
.link-u { border-bottom: 1px solid var(--akzent-dunkel); padding-bottom: 2px; }

.btn { border-radius: var(--ecke-winzig); }


/* ── 04b Glas ─────────────────────────────────────────────────────────
   EINE Regel für alle Kästen der Seite. Wer hier drinsteht, bekommt die
   Glasoberfläche; die eigenen Regeln weiter unten setzen dann nur noch,
   was sich unterscheidet (Innenabstand, Kupferrand, Raster).

   Bewusst als Sammelliste und nicht als Klasse `.glas` im HTML: so muss
   keine der elf HTML-Dateien angefasst werden, und ein Rückbau ist ein
   Löschen an einer einzigen Stelle.

   NICHT enthalten sind Elemente, die gar keinen Kasten bilden, sondern nur
   eine Linie und Text tragen (.zusage, .schritt, .beispiel, .uebergabe,
   .kennzahl, .zeitstrahl__text). Die bleiben offen — sonst wird die Seite
   eine Wand aus Kästen und die Gliederung verschwindet.               */

.preis,
.aufklapp,
.karte,
.kachel,
.hinweiskasten,
.banner,
.formular,
.gesendet,
.formfehler,
.ergebnis,
.betrieb,
.ehrlich > div,
.bot {
  background: var(--glas);
  border: 1px solid var(--glas-rand);
  border-radius: var(--ecke);
  box-shadow: var(--glas-licht), var(--glas-tiefe);
}

/* Kupfergetönte Kästen behalten ihren Ton — das Glas legt sich darüber,
   statt ihn zu ersetzen. Zwei Verläufe übereinander: erst das Glas, dann
   der Kupferhauch. */
.hinweiskasten,
.banner,
.ergebnis {
  background: var(--glas), linear-gradient(160deg, rgba(230,160,107,.11), rgba(230,160,107,.035));
  border-color: var(--akzent-dunkel);
}


/* ── 05 Kopf und Navigation ──────────────────────────────────────────── */

.kopf {
  position: sticky; top: 0; z-index: 50;
  background: rgba(18, 23, 20, .88);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--linie);
}
.kopf__innen {
  max-width: var(--breite); margin: 0 auto;
  padding: 14px var(--rand); min-height: 76px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px 28px;
}

.marke { display: flex; align-items: center; gap: 12px; color: var(--text); }
.marke:hover { color: var(--text); }
.marke__zeichen {
  width: 30px; height: 22px; overflow: hidden; display: block; flex: 0 0 auto;
  filter: drop-shadow(0 0 7px var(--akzent-schein));
}
.marke__zeichen svg { display: block; animation: welle 2.6s linear infinite; }
.marke__wort { font-family: var(--f-kopf); font-weight: 700; font-size: 21px; letter-spacing: -.02em; }

.nav { display: flex; align-items: center; gap: clamp(14px, 2.2vw, 30px); }
.nav__link {
  color: var(--text-2); font-size: 16px; font-weight: 500; white-space: nowrap;
}
.nav__link:hover { color: var(--text); }
.nav__link[aria-current] { color: var(--akzent); }
.nav__cta {
  background: var(--akzent); color: #14181a;
  box-shadow: 0 10px 34px -10px rgba(230,160,107,.75);
  font-size: 16px; font-weight: 600; padding: 11px 20px; border-radius: 4px;
  white-space: nowrap;
}
.nav__cta:hover { background: var(--akzent-hell); color: #14181a; }

.burger {
  display: none;
  background: none; border: 1px solid var(--linie-4); border-radius: var(--ecke-winzig);
  width: 44px; height: 42px; cursor: pointer; padding: 0;
  color: var(--text);
}
.burger span {
  display: block; width: 20px; height: 1.5px; margin: 4px auto;
  background: currentColor; transition: transform .2s ease, opacity .2s ease;
}
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }

/* Der Umbruchpunkt liegt bei 1000 px, weil die sieben Navigationspunkte
   darunter in eine zweite Zeile rutschen. Wird die Nav geändert, hier
   nachmessen statt raten. */
@media (max-width: 1000px) {
  .burger { display: block; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--flaeche); border-bottom: 1px solid var(--linie);
    padding: 8px var(--rand) 20px;
    visibility: hidden; opacity: 0; transform: translateY(-8px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
  }
  .nav.ist-offen { visibility: visible; opacity: 1; transform: none; }
  .nav__link { padding: 14px 0; border-bottom: 1px solid var(--linie); font-size: 18px; }
  .nav__cta { margin-top: 16px; text-align: center; }
  .kopf__innen { position: relative; }
}


/* ── 06 Bausteine der Startseite ─────────────────────────────────────── */

/* Hero */
.hero { position: relative; overflow: hidden; padding-block: clamp(56px, 7vw, 104px) clamp(48px, 7vw, 88px); }
.hero__wellen {
  position: absolute; inset: -10% -20% auto -20%; height: 150%;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 25%, #000 60%, transparent);
          mask-image: linear-gradient(180deg, transparent, #000 25%, #000 60%, transparent);
  pointer-events: none;
}
.hero__wellen svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__innen { position: relative; }
.hero h1 { max-width: 15ch; }
/* nowrap haelt das Farbwort zusammen — sonst steht es auf schmalen Schirmen
   zerrissen da. `.satz` setzt es weiter unten zurueck. */
.hero h1 span { color: var(--akzent); text-shadow: 0 0 42px rgba(230,160,107,.45); white-space: nowrap; }

/* NUR die Startseite: Ihre Ueberschrift besteht aus zwei Saetzen und ist
   deutlich laenger als die der Bausteinseiten — die behalten oben 15ch/88px.
   `:not(.bs-hero)` trifft genau das, weil beide Klassen am selben Element
   haengen. Ohne die Eingrenzung schrumpfen sechs Bausteinseiten mit.
   `.satz` setzt den ersten Satz auf eine eigene Zeile, sonst landet der
   Punkt mitten in einer Zeile und der Zwei-Takt der Aussage geht verloren;
   die Klasse schlaegt dabei die Akzentfarbe von `.hero h1 span`. */
.hero:not(.bs-hero) h1 { max-width: 32ch; font-size: clamp(30px, 4.4vw, 60px); line-height: 1.06; text-wrap: pretty; }
.hero:not(.bs-hero) h1 .satz { display: block; color: var(--text-1); text-shadow: none; white-space: normal; }
.hero__text { font-size: 21px; line-height: 1.55; color: var(--text-3); max-width: 56ch; margin-top: 32px; }
.hero__knoepfe { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 40px; }
.hero__fuss { margin-top: 22px; max-width: 62ch; }

/* Beweis: große Zahlen + Tabelle */
.beweis { padding-block: clamp(40px, 7vw, 64px) clamp(40px, 7vw, 56px); }
.beweis__zahlen { display: flex; flex-wrap: wrap; align-items: flex-end; gap: clamp(28px, 6vw, 88px); }
.beweis__wert { font-family: var(--f-kopf); font-weight: 700; font-size: clamp(58px, 9vw, 124px); line-height: .86; letter-spacing: -.04em; }
.beweis__wert--alt { color: var(--kalt); }
.beweis__wert--neu { color: var(--text); text-shadow: 0 0 60px rgba(230,160,107,.3); }
.beweis__pfeil { font-family: var(--f-kopf); font-size: clamp(30px, 4vw, 56px); color: var(--akzent); line-height: 1; padding-bottom: clamp(16px, 3vw, 34px); }
.beweis__label { font-family: var(--f-mono); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; margin-bottom: 10px; }
.beweis__unter { font-size: 17px; margin-top: 14px; color: var(--text-4); }
.beweis__unter--neu { color: var(--text-3); }

.tabelle { margin-top: 52px; border-top: 1px solid var(--linie); }
.tabelle__zeile {
  display: grid; grid-template-columns: 1fr 110px 110px; gap: 24px;
  padding: 20px 0; border-bottom: 1px solid var(--linie); align-items: baseline;
}
.tabelle__kopf {
  padding: 18px 0;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-4);
}
.tabelle__zahl { text-align: right; font-family: var(--f-mono); color: var(--text-4); }
.tabelle__zahl--neu { color: var(--akzent); }
.tabelle__was { font-size: 18px; }
/* Auf schmalen Geräten sonst dreispaltig gequetscht */
@media (max-width: 560px) {
  .tabelle__zeile { grid-template-columns: 1fr auto auto; gap: 12px; }
  .tabelle__was { grid-column: 1 / -1; }
  .tabelle__kopf .tabelle__was { grid-column: auto; }
  .tabelle__zahl { min-width: 62px; }
}

/* Helle Sektion: wer dahintersteckt */
.hell { background: var(--hell-bg); color: var(--hell-text); }
.hell h2, .hell h3 { color: var(--hell-text); }
.hell .eyebrow { color: var(--hell-akzent); }
.hell a { color: var(--hell-akzent); }
.hell a:hover { color: #6f4419; }
/* Seit 24.09.2026 laeuft auch der Abschnitt "Region" hell mit (Kapitel
   "Wer seid ihr?" zusammen mit "Wer dahintersteckt"). Diese Elemente hatten
   auf hellem Grund bis dahin keine eigene Farbe und waren kaum lesbar. */
.hell .fuehrung { color: var(--hell-text-2); }
.hell .fluss__hinweis { color: var(--hell-text-3); }
.hell .chip--kupfer { border-color: var(--hell-linie); background: rgba(143,90,40,.08); color: var(--hell-akzent); }
.hell .chip--kupfer:hover { border-color: var(--hell-akzent); color: #6f4419; }
/* Region folgt direkt auf "Wer dahintersteckt" im selben hellen Kapitel -
   ohne eigenen grossen Oberabstand, sonst klafft zwischen beiden eine Luecke. */
#region.hell { padding-top: clamp(8px, 2vw, 24px); }
.ueber__raster {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(36px, 6vw, 80px); align-items: start;
  padding-block: clamp(56px, 7vw, 104px);
}
.ueber__bild { max-width: 420px; }
.ueber__bild img { width: 100%; border: 1px solid #cdc7b8; border-radius: var(--ecke); }
.ueber__ort { font-family: var(--f-mono); font-size: 13px; color: var(--hell-text-3); margin-top: 14px; }
.ueber__text { font-size: 21px; line-height: 1.55; color: var(--hell-text-2); margin-top: 32px; max-width: 52ch; }
.ueber__text + .ueber__text { font-size: 19px; color: var(--hell-text-3); margin-top: 22px; }
.ueber__zahlen {
  margin-top: 40px; border-top: 1px solid var(--hell-linie); padding-top: 26px;
  display: flex; flex-wrap: wrap; gap: 32px 48px;
}
.ueber__zahl { font-family: var(--f-kopf); font-weight: 700; font-size: 38px; letter-spacing: -.03em; line-height: 1; }
.ueber__zahl + div { font-size: 16px; color: var(--hell-text-3); margin-top: 6px; max-width: 22ch; }

/* Ablaufdiagramm — eine einzige SVG-Zeichnung.
   Sie skaliert mit der Breite mit, statt seitlich zu scrollen. Weil dabei auch
   die Schrift im Bild mitschrumpft, wird unter 1000 px auf die gestapelte
   Fassung umgeschaltet — bei 800 px Fensterbreite wäre die kleinste Zeile im
   Bild nur noch rund 8 px hoch. 1000 px ist derselbe Punkt, an dem auch die
   Navigation ins Menü klappt. */
.fluss { padding: clamp(40px, 7vw, 72px) var(--rand); }
.fluss__buehne { max-width: 1180px; margin: 0 auto; }
.fluss__bild { display: block; width: 100%; height: auto; }
.fluss__balken rect { animation: atmen 2.2s ease-in-out infinite; }
.fluss__balken rect:nth-child(2) { animation-delay: .4s; }
.fluss__balken rect:nth-child(3) { animation-delay: .8s; }

/* Die wandernden Punkte sind SVG-Eigenbewegung (animateMotion), keine
   CSS-Animation. Die allgemeine Regel für "Bewegung reduzieren" weiter oben
   greift bei ihnen deshalb NICHT — sie müssen hier gesondert verschwinden.
   Ohne sie bleibt die Zeichnung vollständig lesbar. */
@media (prefers-reduced-motion: reduce) {
  .fluss__punkte { display: none; }
}

/* Gestapelte Fassung für schmale Schirme.
   Sie bekommt dieselbe Bewegung wie die Zeichnung am Rechner: eine Spur, auf
   der ein Punkt von oben nach unten läuft. Ohne die wirkt die Seite auf dem
   Handy tot — und das Handy ist das Gerät, auf dem die meisten sie sehen. */
.fluss__stapel { display: none; position: relative; }
.fluss__stapel > i {
  position: absolute; left: -3.5px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--akzent); box-shadow: 0 0 12px 3px rgba(230,160,107,.75);
  animation: fliessenRunter 4.2s linear infinite;
}
.fluss__schritt {
  display: flex; gap: 16px; align-items: flex-start;
  border-left: 1px solid var(--linie-3); padding: 0 0 26px 20px; position: relative;
}
.fluss__schritt:last-child { border-left-color: transparent; padding-bottom: 0; }
.fluss__schritt::before {
  content: ""; position: absolute; left: -4.5px; top: 5px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--akzent);
  box-shadow: 0 0 10px 2px rgba(230,160,107,.6);
}
.fluss__schritt--nein::before { background: var(--kalt-hell); box-shadow: none; }
.fluss__schritt b { display: block; font-size: 16px; font-weight: 600; }
.fluss__schritt span { display: block; font-family: var(--f-mono); font-size: 12px; color: var(--text-4); margin-top: 4px; }
.fluss__marke { font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--akzent); }

@media (max-width: 1000px) {
  .fluss__buehne { display: none; }
  .fluss__stapel { display: block; margin: 0; padding: 0; list-style: none; max-width: 560px; }
}

.fluss__fuss {
  max-width: 1420px; margin: 56px auto 0; padding-top: 32px;
  border-top: 1px dashed var(--linie-2);
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
}
.chip { border: 1px solid var(--linie-4); border-radius: 99px; padding: 8px 16px; font-size: 15px; color: var(--text-2); }
.chip--kupfer { border-color: var(--akzent-dunkel); background: rgba(230,160,107,.1); color: var(--akzent); }
.fluss__hinweis { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-4); margin-right: 8px; }

/* Für wen */
.fuerwen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(28px, 5vw, 72px); align-items: start; }
.fuerwen__liste { display: flex; flex-direction: column; gap: 16px; }
.fuerwen__zeile { display: flex; gap: 16px; align-items: baseline; }
/* Bewusst größer als die übrigen Mono-Marker: Handwerk, Logistik und
   Dienstleister sind hier die Einstiegspunkte — wer sich wiedererkennt, liest
   weiter. Bei 16px bleiben sie trotzdem Beschriftung und werden nicht zur
   zweiten Überschrift. */
.fuerwen__wer {
  font-family: var(--f-mono); font-size: 16px; font-weight: 500;
  color: var(--akzent); min-width: 132px;
}
.fuerwen__was { font-size: 17px; color: var(--text-3); }
/* Auf dem Handy frisst die 112-px-Spalte ein Drittel der Zeile */
@media (max-width: 560px) {
  .fuerwen__zeile { flex-direction: column; gap: 4px; }
  .fuerwen__wer { min-width: 0; }
}

/* Leistungen — Karten mit Aufklappteil */
/* Bis zum 12.08.2026 war das ein zusammenhängender Block: 1px Abstand plus
   eine Hintergrundfarbe im Raster ergaben die Haarlinien zwischen den Karten.
   Mit runden Ecken geht das nicht mehr — an jeder Ecke bliebe ein grauer
   Zipfel stehen. Jetzt sind es einzelne Karten mit echtem Abstand. */
.karten {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
  gap: 20px; margin-top: 56px;
}
/* overflow, damit die Hover-Fläche des Kartenlinks nicht über die runde
   Ecke hinausläuft */
.karte { display: flex; flex-direction: column; overflow: hidden; }
/* Die Karte ist ein Link auf die Detailseite des Bausteins, kein Aufklapper.
   all:unset nimmt einem <a> auch die Farbe — deshalb hier wieder setzen. */
.karte__knopf {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; flex-direction: column; height: 100%;
  padding: clamp(24px, 7vw, 34px) var(--rand) clamp(21px, 7vw, 30px);
  color: var(--text); transition: background .18s ease;
}
.karte__knopf:hover { background: rgba(255,255,255,.03); color: var(--text); }
.karte__knopf:hover .karte__mehr { background: var(--akzent); color: #14181a; border-color: var(--akzent); }
.karte__mehr { transition: background .18s ease, color .18s ease, border-color .18s ease; }
.karte__nr { font-family: var(--f-mono); font-size: 12px; color: var(--text-4); }
.karte__knopf h3 { margin-top: 18px; font-size: 24px; }
.karte__text { font-size: 17px; color: var(--text-3); margin: 12px 0 24px; line-height: 1.5; }
.karte__fuss { display: flex; align-items: center; gap: 18px; margin-top: auto; padding-top: 10px; }
.karte__strecke { position: relative; flex: 1; height: 1px; background: var(--linie-3); }
.karte__strecke i {
  position: absolute; top: -2.5px; width: 6px; height: 6px; border-radius: 50%;
  background: #414a4c;
}
.karte__strecke i:nth-child(1) { left: 0; }
.karte__strecke i:nth-child(2) { left: calc(50% - 3px); }
.karte__strecke i:nth-child(3) { right: 0; }
.karte__strecke i:nth-child(4) {
  background: var(--akzent); box-shadow: 0 0 10px 2px rgba(230,160,107,.7);
  animation: fliessen 3.4s linear infinite;
}
.karte__mehr {
  font-size: 15px; font-weight: 600; color: var(--akzent); white-space: nowrap;
  border: 1px solid var(--akzent-dunkel); border-radius: 99px;
  padding: 9px 18px; background: var(--akzent-hauch);
}
.karte__auf {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.karte.ist-offen .karte__auf { grid-template-rows: 1fr; }
.karte__auf > div { overflow: hidden; }
.karte__inhalt {
  padding: 0 var(--rand) clamp(24px, 7vw, 32px);
  border-top: 1px solid var(--linie);
  margin-top: 4px; padding-top: 22px;
}
.karte__lohnt {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--akzent); margin-bottom: 10px;
}
.karte__inhalt p { font-size: 16px; color: var(--text-3); line-height: 1.55; }
.karte__kette {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px;
  font-family: var(--f-mono); font-size: 12px; color: var(--text-4);
}
.karte__kette span { border: 1px solid var(--linie-3); border-radius: var(--ecke-winzig); padding: 4px 9px; }

/* ── Wischbahn für Kartenreihen (nur schmale Schirme) ──────────────────
   Untereinander sind die sechs Bausteine über 2500 px hoch — kaum jemand
   scrollt bis zum sechsten. Als Bahn sieht man einen, wischt zum nächsten
   und weiß über die Punkte, wie viele noch kommen. Dasselbe gilt für die
   Kachelreihen auf der Startseite und der Betreuungsseite.

   Das Wischen macht der Browser selbst (scroll-snap), nicht das Skript.
   Die Klasse `ist-bahn` setzt das Skript — damit Bahn und Steuerung immer
   zusammen auftauchen. Läuft das Skript nicht, bleibt alles ein schlichtes
   Raster untereinander: vollständig lesbar, nur ohne die Abkürzung. Ein
   Pfeil, der nichts tut, wäre schlimmer als gar keiner.

   700 px ist der Punkt, ab dem im Raster ohnehin nur noch eine Spalte
   passt (zwei Spalten brauchen 2×320 px + Abstand).                     */
.bahn__steuer { display: none; }

@media (max-width: 700px) {
  /* Klassenname doppelt geschrieben — Absicht, kein Tippfehler.
     `.kacheln { display: grid }` steht weiter unten im Stylesheet. Bei
     gleicher Stärke gewinnt die spätere Regel, und die Bahn wäre bei den
     Kacheln wirkungslos geblieben (bei `.karten` fiel es nicht auf, weil
     die Regel dort zufällig vorher steht). Doppelt genannt zählt die
     Klasse zweimal und sticht jede einfache Klassenregel — egal, an
     welcher Stelle der Datei sie steht oder wann jemand eine neue
     Kartenreihe ergänzt. */
  .ist-bahn.ist-bahn {
    display: flex; grid-template-columns: none;
    overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    gap: 14px;
    /* Innenabstand unten, weil overflow-x sonst den Schatten unter den
       Kästen abschneidet. */
    padding: 10px 0 24px;
    scrollbar-width: none; -ms-overflow-style: none;
  }
  .ist-bahn::-webkit-scrollbar { display: none; }
  /* Genau ein Kasten im Bild — das war die Vorgabe. */
  .ist-bahn.ist-bahn > * { flex: 0 0 100%; scroll-snap-align: start; }

  .bahn__steuer {
    display: flex; align-items: center; justify-content: center; gap: 16px;
  }
  .bahn__pfeil {
    all: unset; box-sizing: border-box; cursor: pointer;
    width: 44px; height: 44px; flex: 0 0 auto;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--linie-4); border-radius: 50%;
    color: var(--akzent); font-family: var(--f-mono); font-size: 18px;
    transition: border-color .18s ease, color .18s ease, opacity .18s ease;
  }
  .bahn__pfeil:hover { border-color: var(--akzent); }
  /* Nicht ausblenden, nur abdunkeln: verschwindende Knöpfe lassen die
     Zeile springen, und man verliert die Orientierung. */
  .bahn__pfeil[disabled] { opacity: .3; cursor: default; color: var(--text-4); }

  .bahn__punkte { display: flex; align-items: center; gap: 7px; }
  .bahn__punkt {
    width: 7px; height: 7px; border-radius: 99px;
    background: var(--linie-4);
    transition: width .22s ease, background .22s ease;
  }
  .bahn__punkt.ist-da { width: 22px; background: var(--akzent); }
}

/* Anheben beim Drüberfahren.
   Die Regel, wer das bekommt: der Kasten muss als GANZES ein Link sein.
   Ein Kasten, der sich hebt, verspricht "hier kann man klicken" — bei den
   Kacheln, Preiskarten oder Hinweiskästen wäre das eine Lüge. Auf der
   ganzen Seite trifft das auf genau zwei zu:
     .karte   — Link auf die Baustein-Seite
     .banner  — Link auf den Rechner
   Die FAQ-Frage ist zwar ein Knopf, aber kein Kasten: eine Zeile mit
   Trennlinie darunter, die beim Anheben von ihrer Linie abreißen würde.

   (hover: hover) schließt Touchgeräte aus. Ohne die Abfrage bleibt auf dem
   Handy nach einem Fingertipp der Hover-Zustand kleben, bis man woanders
   hintippt. */
@media (hover: hover) and (pointer: fine) {
  .karte, .banner {
    transition: transform .2s cubic-bezier(.2,.7,.3,1),
                box-shadow .2s ease, border-color .2s ease;
  }
  /* focus-within, damit der Kasten beim Durchtabben genauso reagiert wie
     unter der Maus — sonst sieht man mit der Tastatur nicht, wo man ist. */
  .karte:hover, .karte:focus-within {
    transform: translateY(-5px);
    border-color: rgba(244,241,235,.18);
    box-shadow: var(--glas-licht-hell), var(--glas-tiefe-hoch);
  }
  /* Das Banner ist über die volle Breite gebaut. Große Flächen dürfen sich
     weniger weit bewegen als kleine, sonst wirkt es hüpfend statt ruhig —
     deshalb 3 px statt 5. Der kupferne Schein zieht dafür an. */
  .banner:hover, .banner:focus-within {
    transform: translateY(-3px);
    box-shadow: var(--glas-licht-hell), var(--glas-tiefe-hoch),
                0 0 80px -34px rgba(230,160,107,.95);
  }
}

.hinweiskasten {
  margin-top: 32px;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  padding: clamp(20px, 7vw, 28px) var(--rand);
}
.hinweiskasten h3 { font-size: 22px; }
.hinweiskasten p { font-size: 17px; color: var(--text-3); margin-top: 8px; max-width: 62ch; }
.btn--umriss { border-color: var(--akzent); color: var(--akzent); }
.btn--umriss:hover { background: var(--akzent); color: #14181a; }

/* Betreuung — vier Kacheln. Wie bei .karten: der alte 1px-Rastertrick ist
   dem echten Abstand gewichen, damit die runden Ecken sauber stehen. */
.kacheln {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
  gap: 16px; margin-top: 44px;
}
.kachel { padding: 26px 24px; }
.kachel__label { font-family: var(--f-mono); font-size: 12px; color: var(--text-4); letter-spacing: .14em; }
.kachel h3 { font-size: 20px; margin-top: 12px; }
.kachel p { font-size: 16px; color: var(--text-3); margin-top: 10px; line-height: 1.5; }

.datenzeile {
  margin-top: 28px; display: flex; flex-wrap: wrap; gap: 12px 20px;
  align-items: center; font-size: 17px; color: var(--text-3);
}

/* Ablauf — vier Schritte */
.schritte { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); gap: 32px; margin-top: 48px; }
.schritt { border-top: 2px solid var(--linie-4); padding-top: 20px; }
.schritt--dauer { border-top-color: var(--akzent); }
.schritt__zeile { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.schritt__nr { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; color: var(--text-4); }
.schritt--dauer .schritt__nr { color: var(--akzent); }
.schritt__preis { font-family: var(--f-mono); font-size: 12px; color: var(--akzent); }
.schritt h3 { margin-top: 12px; }
.schritt p { font-size: 17px; color: var(--text-3); margin-top: 8px; line-height: 1.5; }

/* Rechner-Banner */
.banner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 28px;
  /* zusätzlich zum Glasschatten der kupferne Schein — der macht das Banner
     zum einzigen leuchtenden Element im Abschnitt */
  box-shadow: var(--glas-licht), var(--glas-tiefe), 0 0 70px -40px rgba(230,160,107,.8);
  padding: 36px 34px; color: var(--text);
}
.banner:hover { border-color: var(--akzent); color: var(--text); }
.banner__titel { font-family: var(--f-kopf); font-weight: 600; font-size: clamp(24px, 2.8vw, 32px); margin-top: 12px; letter-spacing: -.02em; }
.banner p { font-size: 17px; color: var(--text-3); margin-top: 10px; max-width: 60ch; }
.banner__pfeil { font-family: var(--f-mono); font-size: 14px; color: var(--akzent); white-space: nowrap; }

/* Zusagen */
.zusagen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 32px; margin-top: 52px; }
.zusage { border-top: 1px solid var(--linie-4); padding-top: 22px; }
.zusage__nr { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; color: var(--akzent); }
.zusage h3 { font-size: 21px; margin-top: 12px; }
.zusage p { font-size: 17px; color: var(--text-3); margin-top: 10px; line-height: 1.5; }


/* ── 07 Preis ────────────────────────────────────────────────────────── */

/* Drei ungleich breite Spalten statt drei gleicher.
   Bis zum 12.08.2026 waren alle drei gleich breit UND per align-items:stretch
   auf dieselbe Höhe gezogen. Weil "Bei Bedarf" nur drei Listenpunkte hat und
   "Der Kern" sechs, war die dritte Karte zu 59 % leer (gemessen: 578 von
   976 px). Jetzt bekommt der Kern die Breite, die er braucht, die Ränder
   werden schmaler, und keine Karte wird mehr über ihren Inhalt hinaus
   gestreckt — align-items:start statt stretch.
   Die Aufteilung ist absichtlich nicht drastisch: alle drei Preise müssen
   nebeneinander lesbar bleiben, sonst kann man sie nicht mehr vergleichen —
   und genau das ist der Zweck dieses Abschnitts. */
/* minmax(0, …) statt bloßem fr: sonst kann ein Element im Inneren, das nicht
   umbrechen darf (die Preiszeile mit white-space:nowrap), seine Spalte
   breiter drücken als das Raster — und aus der Mindestbreite wird ein
   waagerechter Scrollbalken. */
.preise {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, .95fr);
  gap: 24px; margin-top: 56px; align-items: start;
}
.preis {
  padding: clamp(25px, 7vw, 36px) var(--rand);
  display: flex; flex-direction: column;
}
/* Der Kern bekommt dieselbe Glasrezeptur, nur kräftiger — plus den
   Kupferrand, der ihn schon vorher ausgezeichnet hat. */
.preis--kern {
  position: relative;
  background: var(--glas-stark), linear-gradient(160deg, rgba(230,160,107,.05), transparent 62%);
  border-color: var(--akzent);
  box-shadow: var(--glas-licht-hell), var(--glas-tiefe-hoch);
}
/* Sitzt jetzt als Plakette auf der Oberkante statt bündig darin: an einer
   runden Ecke sähe ein eckig aufliegendes Fähnchen wie ein Fehler aus. */
.preis__fahne {
  position: absolute; top: -12px; left: 26px;
  background: var(--akzent); color: #14181a;
  box-shadow: 0 10px 34px -10px rgba(230,160,107,.7);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .14em;
  padding: 5px 12px; border-radius: 99px;
}
.preis__art { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--text-4); }
.preis--kern .preis__art { color: var(--akzent); margin-top: 12px; }
/* nowrap, weil sonst das €-Zeichen der Spanne allein auf eine zweite Zeile
   rutscht. Die Größe ist so gewählt, dass der längste Wert in die SCHMALSTE
   Spalte passt — seit die Spalten unterschiedlich breit sind, ist das die
   dritte ("Auf Anfrage"), nicht mehr die mittlere. Wird ein Wert länger:
   hier nachmessen, nicht schätzen. Der Kern darf größer sein, er hat die
   breiteste Spalte. */
.preis__wert {
  font-family: var(--f-kopf); font-weight: 700;
  font-size: clamp(32px, 3.2vw, 40px); letter-spacing: -.03em;
  margin: 16px 0 4px; white-space: nowrap;
}
.preis--kern .preis__wert { font-size: clamp(34px, 4vw, 47px); }
.preis__einheit { font-size: 16px; color: var(--text-4); }
.preis__text { font-size: 17px; color: var(--text-3); margin-top: 24px; line-height: 1.5; }
.preis__liste { display: flex; flex-direction: column; gap: 10px; margin-top: 24px; font-size: 16px; color: var(--text-2); }
.preis__liste div { display: flex; gap: 10px; }
.preis__liste div::before { content: "—"; color: var(--akzent); }
.preis__fuss {
  font-family: var(--f-mono); font-size: 13px; color: var(--akzent);
  margin-top: 24px; line-height: 1.5;
  border-top: 1px solid var(--linie-2); padding-top: 18px;
}
.preis__rand { font-family: var(--f-mono); font-size: 13px; color: var(--text-4); margin-top: 12px; line-height: 1.5; }

/* Hier stand kurzzeitig eine zweispaltige Liste für den Kern, um ihn kürzer
   zu machen. Wieder entfernt: bei 427 px Kartenbreite bleiben je Spalte rund
   167 px, und Punkte wie "Betrieb und Überwachung aller Systeme" brachen
   dreizeilig um. Die Liste wurde dadurch nicht kürzer, sondern unruhiger.
   Gemessen, nicht geschätzt — wer es erneut versuchen will, braucht dafür
   erst eine deutlich breitere Mittelspalte. */

/* Unter 1040 px passen drei Spalten nicht mehr nebeneinander. Ab hier
   stapeln die Karten — und das Skript macht daraus den Aufklapper
   (siehe basis.js, Abschnitt "Preis-Aufklapper").

   Warum überhaupt ein Aufklapper: gestapelt sind die drei Karten zusammen
   über 2000 px hoch. Wer auf dem Handy die Preise vergleichen will, muss
   dreimal scrollen und hat den ersten längst vergessen. Zusammengeklappt
   steht in jeder Zeile der Preis — alle drei Zahlen auf einen Blick.

   Ohne JavaScript wird kein Kopf gebaut. Dann bleibt es exakt wie vorher:
   drei offene Karten untereinander. Der Abschnitt funktioniert also auch
   dann vollständig, nur ohne die Abkürzung.                             */
/* Baut das Skript den Kopf und wird das Fenster danach wieder breit, darf
   kein Knopf zurückbleiben. Diese Regel steht bewusst VOR der Medienabfrage:
   beide haben dieselbe Stärke, also gewinnt die spätere, sobald sie greift. */
.preis__kopf { display: none; }

@media (max-width: 1040px) {
  .preise { grid-template-columns: minmax(0, 1fr); }

  .preis__kopf {
    all: unset; box-sizing: border-box; cursor: pointer;
    display: flex; align-items: center; gap: 10px;
    width: 100%; padding: 16px var(--rand);
    color: var(--text);
  }
  .preis__kopf:hover .preis__kopf-wert { color: var(--akzent); }
  /* nowrap, weil die Zeile umgebrochen 38 statt 19 px hoch wurde. Damit aus
     dieser Mindestbreite auf sehr schmalen Geräten (320 px) kein
     Scrollbalken wird, darf die Beschriftung als EINZIGE schrumpfen und
     notfalls mit Auslassungspunkten enden — der Preis rechts bleibt immer
     vollständig, der ist der Grund für die Zeile. */
  .preis__kopf .preis__art {
    margin-top: 0; white-space: nowrap; line-height: 1.4;
    min-width: 0; overflow: hidden; text-overflow: ellipsis;
  }
  .preis__kopf-wert {
    margin-left: auto; font-family: var(--f-kopf); font-weight: 700;
    font-size: clamp(17px, 4.4vw, 21px); letter-spacing: -.02em; white-space: nowrap;
    line-height: 1.3; transition: color .18s ease;
  }
  /* Bei offener Karte steht der Preis groß im Inhalt — zweimal wäre doppelt */
  .preis.ist-offen .preis__kopf-wert { display: none; }
  .preis__kopf-zeichen {
    font-family: var(--f-mono); font-size: 20px; color: var(--akzent);
    flex: 0 0 auto; line-height: 1; transition: transform .2s ease;
  }
  .preis.ist-offen .preis__kopf-zeichen { transform: rotate(45deg); }

  .preis__auf { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
  .preis.ist-offen .preis__auf { grid-template-rows: 1fr; }
  /* Der Schnitt trägt bewusst KEINEN eigenen Innenabstand — siehe basis.js */
  .preis__schnitt { overflow: hidden; min-height: 0; }

  /* Sobald es einen Kopf gibt, sitzt der Innenabstand an Kopf und Inhalt —
     sonst klafft bei zugeklappter Karte oben und unten eine leere Zone. */
  .preis.hat-kopf { padding: 0; }
  .preis.hat-kopf .preis__inhalt { padding: 0 var(--rand) clamp(24px, 6vw, 32px); }
  .preis.hat-kopf .preis__wert { margin-top: 0; }
  /* Die Kopfzeile trägt die Bezeichnung schon. Stünde sie im Inhalt ein
     zweites Mal, läse man bei offener Karte "01 · DER AUFBAU" und direkt
     darunter "DER AUFBAU, EINMALIG". */
  .preis.hat-kopf .preis__inhalt > .preis__art { display: none; }
}

.aufklapp {
  margin-top: 24px;
  padding: 28px clamp(22px, 4vw, 32px);
}
.aufklapp summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; font-size: 18px; font-weight: 600; color: var(--akzent); }
.aufklapp summary span:last-child { font-family: var(--f-mono); font-size: 13px; color: var(--text-4); white-space: nowrap; }
.aufklapp > p { font-size: 16px; color: var(--text-4); margin-top: 16px; line-height: 1.5; }
.beispiele { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 28px 40px; margin-top: 24px; }
.beispiel { border-left: 1px solid var(--akzent-dunkel); padding-left: 18px; }
.beispiel__nr { font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; color: var(--text-4); }
.beispiel__titel { font-family: var(--f-kopf); font-weight: 600; font-size: 18px; margin-top: 8px; }
.beispiel__paar { display: grid; grid-template-columns: minmax(64px, 80px) 1fr; gap: 6px 14px; margin-top: 12px; font-size: 16px; line-height: 1.5; }
.beispiel__paar dt { font-family: var(--f-mono); font-size: 12px; letter-spacing: .1em; color: var(--akzent); padding-top: 3px; }
.beispiel__paar dd { color: var(--text-3); margin: 0; }

.uebergabe {
  margin-top: 40px; display: flex; flex-wrap: wrap; gap: 24px;
  align-items: center; justify-content: space-between;
  border-top: 1px solid var(--linie); padding-top: 32px;
}
.uebergabe p { font-size: 17px; color: var(--text-3); max-width: 60ch; }


/* ── 08 FAQ ──────────────────────────────────────────────────────────── */

.faq { border-top: 1px solid var(--linie); margin-top: 48px; }
.faq__i { border-bottom: 1px solid var(--linie); }
/* Die Frage ist eine echte Überschrift, damit Vorleseprogramme und
   Suchmaschinen die Seite gegliedert sehen — der Knopf steckt darin. */
.faq__h { margin: 0; font: inherit; letter-spacing: normal; }
.faq__b {
  all: unset; box-sizing: border-box; cursor: pointer;
  display: flex; align-items: baseline; justify-content: space-between; gap: 24px;
  width: 100%; padding: 24px 0;
  font-family: var(--f-kopf); font-weight: 600; font-size: clamp(18px, 2vw, 21px);
  color: var(--text); line-height: 1.35;
}
.faq__b:hover { color: var(--akzent); }
.faq__z { font-family: var(--f-mono); font-size: 20px; color: var(--akzent); flex: 0 0 auto; transition: transform .2s ease; }
.faq__i.ist-offen .faq__z { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s ease; }
.faq__i.ist-offen .faq__a { grid-template-rows: 1fr; }
.faq__a > div { overflow: hidden; }
.faq__a p { font-size: 17px; color: var(--text-3); line-height: 1.6; max-width: 76ch; padding-bottom: 26px; }
.faq__a p + p { padding-top: 14px; }


/* ── 09 Rechner ──────────────────────────────────────────────────────── */

.rechner { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: clamp(32px, 5vw, 64px); margin-top: 48px; align-items: start; }
.regler { display: flex; flex-direction: column; gap: 4px; }

/* Eine Zeile je Baustein. Die drei voreingestellten stehen oben — die
   Reihenfolge muss mit der Liste BAUSTEINE in js/rechner.js und mit den
   Punkten im Aufklapper übereinstimmen. */
.regler__zeile { border-bottom: 1px solid var(--linie); padding: 16px 0; }
.regler__zeile:first-child { padding-top: 0; }
.regler__zeile:last-child  { border-bottom: none; padding-bottom: 0; }
.regler__kopf { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

/* Der Schalter ist eine echte Checkbox im Label: anklickbar, tastaturbedienbar,
   von Vorleseprogrammen als Schalter erkannt. Sichtbar ist die Spur daneben. */
.schalter { display: flex; align-items: center; gap: 13px; cursor: pointer; min-width: 0; }
.schalter input { position: absolute; opacity: 0; width: 0; height: 0; }
.schalter__spur {
  flex: 0 0 auto; position: relative;
  width: 42px; height: 24px; border-radius: 999px;
  background: var(--flaeche-3); border: 1px solid var(--linie-4);
  transition: background .18s ease, border-color .18s ease;
}
.schalter__spur::after {
  content: ''; position: absolute; left: 3px; top: 50%;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-5); transform: translateY(-50%);
  transition: left .18s ease, background .18s ease;
}
.schalter input:checked + .schalter__spur { background: var(--akzent-hauch); border-color: var(--akzent-dunkel); }
.schalter input:checked + .schalter__spur::after { left: 21px; background: var(--akzent); }
.schalter input:focus-visible + .schalter__spur { outline: 2px solid var(--akzent); outline-offset: 3px; }
.schalter__wort { font-size: 17px; color: var(--text-4); transition: color .18s ease; }
.schalter input:checked ~ .schalter__wort { color: var(--text-2); }

.regler__wert { font-family: var(--f-mono); font-size: 19px; color: var(--akzent); font-weight: 500; white-space: nowrap; }
.regler__wert small { font-size: 13px; color: var(--text-4); font-weight: 400; }

.regler__koerper { margin-top: 12px; }
.regler__zeile input[type=range] {
  width: 100%; accent-color: var(--akzent);
  background: transparent; cursor: pointer;
}
.regler__hilfe { font-family: var(--f-mono); font-size: 13px; color: var(--text-4); margin-top: 6px; }

/* Zusammengeklappt: nur die Kopfzeile bleibt stehen. Das macht erst das
   Skript (Klasse js-an) — ohne Skript stehen alle sieben Regler offen,
   damit hier kein toter Schalter entsteht. */
.js-an .regler__zeile.ist-aus .regler__koerper { display: none; }
.js-an .regler__zeile.ist-aus { padding: 11px 0; }
.js-an .regler__zeile.ist-aus .regler__wert { display: none; }

.regler__fuss { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 22px; }
.regler__zurueck {
  all: unset; cursor: pointer;
  font-family: var(--f-mono); font-size: 13px; color: var(--text-4);
  border-bottom: 1px solid var(--linie-4);
}
.regler__zurueck:hover { color: var(--akzent); border-bottom-color: var(--akzent-dunkel); }
.regler__zurueck:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }

/* Kein mitlaufender (sticky) Ergebniskasten: Er ist schon mit drei
   eingeschalteten Bausteinen höher als der sichtbare Bildbereich (905 px
   gegenüber 817 px bei einem 1000-px-Fenster). Ein mitlaufender Kasten
   würde dann oben kleben und seinen unteren Teil — mitsamt dem Knopf
   "ins Kontaktformular übernehmen" — aus dem Bild schieben. Gemessen am
   26.08.2026, deshalb bewusst weggelassen. */

.ergebnis {
  padding: clamp(24px, 4vw, 34px) clamp(22px, 4vw, 32px);
}
.ergebnis__zahl { font-family: var(--f-kopf); font-weight: 700; font-size: clamp(52px, 8vw, 82px); line-height: .9; letter-spacing: -.035em; color: var(--akzent); }
.ergebnis__einheit { font-size: 17px; color: var(--text-3); margin-top: 12px; }
.ergebnis__urteil { font-size: 18px; color: var(--text); margin-top: 22px; line-height: 1.5; }
.ergebnis__teile { margin-top: 22px; border-top: 1px solid var(--linie-2); padding-top: 18px; display: flex; flex-direction: column; gap: 8px; }
.ergebnis__teil { display: flex; justify-content: space-between; gap: 16px; font-size: 16px; color: var(--text-3); }
.ergebnis__teil span:last-child { font-family: var(--f-mono); color: var(--text-2); white-space: nowrap; }
.ergebnis__geld { margin-top: 22px; border-top: 1px solid var(--linie-2); padding-top: 18px; display: flex; flex-direction: column; gap: 10px; }
.ergebnis__geld .zeile { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; font-size: 16px; color: var(--text-3); }
/* Nur das direkte Kind ist der Betrag. Das b im Beschriftungstext (der Name
   des Bereichs) darf nicht mit ausgezeichnet werden. */
.ergebnis__geld .zeile > b { font-family: var(--f-mono); font-size: 19px; color: var(--akzent); font-weight: 500; white-space: nowrap; }
.ergebnis__geld .zeile span b { font-weight: 600; color: var(--text-2); }
.ergebnis__geld .zeile + .zeile { color: var(--text-4); font-size: 15px; }
.ergebnis__geld .zeile + .zeile > b { font-size: 17px; color: var(--text-2); }

/* Erscheint ab 38 Std/Woche — jenseits davon wären die Mengen unglaubwürdig. */
.ergebnis__bremse {
  margin-top: 20px; padding: 14px 16px;
  border: 1px solid var(--akzent-dunkel); border-radius: var(--ecke-klein);
  background: rgba(230,160,107,.07);
  font-size: 15px; color: var(--text-3); line-height: 1.5;
}


/* ── 10 Kontakt und Formular ─────────────────────────────────────────── */

.kontakt { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: clamp(36px, 6vw, 80px); }
.kontakt__schritte { display: flex; flex-direction: column; gap: 18px; margin-top: 40px; }
.kontakt__schritt { display: flex; gap: 16px; }
.kontakt__nr { font-family: var(--f-mono); color: var(--akzent); font-size: 14px; padding-top: 4px; }
.kontakt__schritt span:last-child { font-size: 17px; color: var(--text-2); }

.formular { padding: clamp(25px, 7vw, 36px) var(--rand); }
.feld { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.feld > label, .feld__label {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-4);
}
/* Eingabefelder bekommen das Glas UMGEKEHRT: nicht als erhobene Scheibe,
   sondern als vertiefte. Eine helle Fläche wie bei den Kästen würde hier
   den Kontrast des eingetippten Textes senken — ein Feld, in das man
   schreibt, muss dunkler sein als seine Umgebung, nicht heller. Der
   Glaseindruck kommt hier über die Durchsicht (halbdurchlässiges Dunkel,
   das den Seitenverlauf mitnimmt) und die Schattenkante innen oben. */
.feld input, .feld textarea {
  background: rgba(9,11,12,.45); border: 1px solid var(--glas-rand); color: var(--text);
  box-shadow: inset 0 1px 3px rgba(0,0,0,.5);
  font-family: var(--f-text); font-size: 17px; padding: 13px 14px;
  border-radius: var(--ecke-klein); width: 100%;
}
.feld input:focus, .feld textarea:focus { border-color: var(--akzent); }
.feld textarea { resize: vertical; min-height: 116px; }
.feld input:hover, .feld textarea:hover { border-color: var(--kalt); }
.feld input[aria-invalid="true"], .feld textarea[aria-invalid="true"] { border-color: var(--schlecht); }
.fehler { color: var(--schlecht); font-size: 15px; }

.zustimmung { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 18px; }
.zustimmung input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--akzent); flex: 0 0 auto; }
.zustimmung label { font-size: 15px; color: var(--text-3); line-height: 1.5; }

.formular button[type=submit] { width: 100%; border: none; }
.formular__fein { font-family: var(--f-mono); font-size: 13px; color: var(--text-4); margin-top: 14px; }
/* Rückmeldungen behalten ihre Signalfarbe — Glas legt sich darüber, ersetzt
   sie aber nicht. Rot und Grün müssen erkennbar bleiben. */
.formfehler {
  margin-top: 16px;
  background: var(--glas), linear-gradient(160deg, rgba(240,163,163,.13), rgba(240,163,163,.05));
  border-color: var(--schlecht); border-radius: var(--ecke-klein);
  padding: 14px 16px; font-size: 16px; color: var(--text-2); line-height: 1.5;
}
.gesendet {
  background: var(--glas), linear-gradient(160deg, rgba(134,239,172,.11), rgba(134,239,172,.04));
  border-color: var(--gut);
  padding: clamp(25px, 7vw, 36px) var(--rand);
}
.gesendet h3 { color: var(--gut); font-size: 24px; }
.gesendet p { font-size: 17px; color: var(--text-3); margin-top: 12px; line-height: 1.5; }


/* ── 11 Fußzeile ─────────────────────────────────────────────────────── */

/* Vier Spalten (Marke+Kontakt, Automatisierungen, Entscheiden, Region) und
   darunter EINE schmale Schlusszeile. Bis 24.09.2026 standen zehn Links
   gleichrangig in einer Reihe, darunter drei Zeilen in zwei Schriften. */
.fuss { border-top: 1px solid var(--linie); }
.fuss__innen {
  max-width: var(--breite); margin: 0 auto;
  /* unten mehr Luft: dort schwebt rechts der Knopf "Assistent fragen" */
  padding: clamp(44px, 7vw, 64px) var(--rand) clamp(96px, 10vw, 110px);
}
.fuss__spalten {
  display: grid; gap: 36px 40px;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
}
.fuss__spalte { display: flex; flex-direction: column; gap: 10px; font-size: 15.5px; }
.fuss__spalte a { color: var(--text-4); width: fit-content; }
.fuss__spalte a:hover { color: var(--text); }
.fuss__titel {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-5); margin-bottom: 4px;
}
.fuss__marke { display: inline-flex; align-items: center; gap: 12px; width: fit-content;
               font-family: var(--f-kopf); font-weight: 700; font-size: 20px; letter-spacing: -.02em; color: var(--text) !important; }
.fuss__zeichen { display: inline-flex; }
.fuss__zeichen svg { display: block; width: 44px; height: auto; }
.fuss__satz { margin: 0; max-width: 34ch; color: var(--text-4); line-height: 1.55; }
.fuss__adresse { font-style: normal; color: var(--text-4); line-height: 1.7; margin-top: 6px; }
.fuss__adresse a { text-decoration: underline; text-underline-offset: 3px; }
.fuss__adresse a:hover { color: var(--akzent); }
.fuss__schluss {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px;
  margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--linie);
  font-family: var(--f-mono); font-size: 12.5px; color: var(--text-5);
}
.fuss__schluss a { color: var(--text-4); }
.fuss__schluss a:hover { color: var(--text); }
@media (max-width: 900px) {
  .fuss__spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fuss__spalte--marke { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .fuss__spalten { grid-template-columns: minmax(0, 1fr); }
}


/* ── 12 Assistent ────────────────────────────────────────────────────── */

.bot-auf {
  position: fixed; right: 20px; bottom: 20px; z-index: 55;
  display: flex; align-items: center; gap: 10px;
  background: var(--akzent); color: #14181a; border: none;
  box-shadow: 0 14px 40px -12px rgba(230,160,107,.9);
  font-family: var(--f-text); font-size: 16px; font-weight: 600;
  padding: 13px 20px; border-radius: 99px; cursor: pointer;
  transition: background .18s ease, transform .18s ease, opacity .18s ease;
}
.bot-auf:hover { background: var(--akzent-hell); transform: translateY(-2px); }
.bot-auf svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bot-auf.ist-weg { opacity: 0; pointer-events: none; transform: translateY(8px); }

.bot {
  position: fixed; right: 20px; bottom: 20px; z-index: 56;
  width: min(400px, calc(100vw - 40px)); max-height: min(600px, calc(100vh - 40px));
  display: flex; flex-direction: column;
  /* Als einziger Kasten der Seite MUSS der Assistent undurchsichtig bleiben:
     er schwebt über dem Text, und durchscheinender Text unter dem Gespräch
     wäre unlesbar. Das Glas liegt deshalb auf einer vollen Fläche statt
     direkt auf dem Seitenhintergrund — gleiche Optik, keine Durchsicht. */
  background: var(--glas), var(--flaeche);
  border: 1px solid var(--glas-rand); border-radius: var(--ecke);
  box-shadow: var(--glas-licht), 0 30px 80px -20px rgba(0,0,0,.75);
  opacity: 0; visibility: hidden; transform: translateY(12px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
}
.bot.ist-offen { opacity: 1; visibility: visible; transform: none; }

.bot__kopf {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px 16px 14px; border-bottom: 1px solid var(--linie);
}
.bot__zeichen { width: 22px; height: 16px; overflow: hidden; flex: 0 0 auto; margin-top: 3px; }
.bot__zeichen svg { display: block; }
.bot__titel { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.bot__titel b { font-family: var(--f-kopf); font-size: 16px; font-weight: 600; }
.bot__titel span { font-size: 13px; color: var(--text-4); line-height: 1.4; }
.bot__zu {
  all: unset; cursor: pointer; color: var(--text-4); font-size: 18px;
  padding: 2px 6px; border-radius: var(--ecke-winzig); line-height: 1;
}
.bot__zu:hover { color: var(--text); }

.bot__lauf { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.bot__m { font-size: 15px; line-height: 1.55; padding: 12px 14px; border-radius: var(--ecke-klein); max-width: 92%; }
.bot__m--bot { background: var(--flaeche-3); border: 1px solid var(--linie); color: var(--text-2); align-self: flex-start; }
.bot__m--ich { background: var(--akzent-hauch); border: 1px solid var(--akzent-dunkel); color: var(--text); align-self: flex-end; }
.bot__m--fehler { background: rgba(240,163,163,.08); border: 1px solid var(--schlecht); color: var(--text-2); align-self: flex-start; }
.bot__m b { color: var(--akzent); }
.bot__m a { text-decoration: underline; }
.bot__quelle { display: inline-block; margin-top: 8px; font-family: var(--f-mono); font-size: 12px; color: var(--text-4); }
.bot__weiter { display: block; margin-top: 10px; font-size: 14px; color: var(--akzent); text-decoration: underline; }
.bot__tippt { display: flex; gap: 5px; padding: 14px; align-self: flex-start; }
.bot__tippt span { width: 6px; height: 6px; border-radius: 50%; background: var(--akzent); animation: tippen 1.3s ease-in-out infinite; }
.bot__tippt span:nth-child(2) { animation-delay: .2s; }
.bot__tippt span:nth-child(3) { animation-delay: .4s; }

.bot__vorschlaege { display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px; }
.bot__vorschlaege button {
  all: unset; cursor: pointer;
  font-family: var(--f-mono); font-size: 12px; color: var(--text-2);
  border: 1px solid var(--linie-3); border-radius: 99px; padding: 7px 13px;
}
.bot__vorschlaege button:hover { border-color: var(--akzent); color: var(--akzent); }

.bot__fuss { border-top: 1px solid var(--linie); padding: 12px 16px 14px; background: var(--flaeche-3); border-radius: 0 0 13px 13px; }
.bot__zeile { display: flex; gap: 8px; align-items: flex-end; }
.bot__zeile textarea {
  flex: 1; resize: none; overflow-y: auto; max-height: 110px;
  background: var(--bg); border: 1px solid var(--linie-4); color: var(--text);
  font-family: var(--f-text); font-size: 15px; padding: 10px 12px; border-radius: var(--ecke-winzig);
}
.bot__senden {
  all: unset; cursor: pointer; flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: var(--ecke-winzig);
  background: var(--akzent); color: #14181a;
  display: flex; align-items: center; justify-content: center;
}
.bot__senden svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.bot__senden:disabled { background: var(--linie-4); color: var(--text-4); cursor: not-allowed; }
.bot__hinweis { display: block; font-family: var(--f-mono); font-size: 11.5px; color: var(--text-4); margin-top: 9px; line-height: 1.4; }

@media (max-width: 560px) {
  .bot { right: 0; bottom: 0; width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; border: none; }
  .bot__fuss { border-radius: 0; padding-bottom: max(14px, env(safe-area-inset-bottom)); }
  .bot-auf { right: 14px; bottom: 14px; }
}


/* ── 13 Fließtextseiten (Impressum, Datenschutz) ─────────────────────── */

.text-seite { max-width: 760px; margin: 0 auto; padding: clamp(48px, 7vw, 88px) var(--rand); }
.text-seite h1 { font-size: clamp(32px, 5vw, 48px); margin-bottom: 32px; }
.text-seite h2 { font-size: clamp(21px, 2.6vw, 26px); margin-top: 44px; margin-bottom: 12px; }
.text-seite h3 { font-size: 19px; margin-top: 28px; margin-bottom: 8px; }
.text-seite p, .text-seite li { font-size: 17px; color: var(--text-3); line-height: 1.65; }
.text-seite p + p { margin-top: 14px; }
.text-seite ul { margin: 12px 0; padding-left: 22px; }
.text-seite li + li { margin-top: 8px; }
.text-seite a { text-decoration: underline; }
.text-seite__stand { font-family: var(--f-mono); font-size: 14px; color: var(--text-4); margin-top: 48px; border-top: 1px solid var(--linie); padding-top: 20px; }


/* ── 14 Baustein-Detailseiten ────────────────────────────────────────── */

.brotkrumen {
  max-width: var(--breite); margin: 0 auto;
  padding: 40px var(--rand) 0;
  font-family: var(--f-mono); font-size: 13px; color: var(--text-4); letter-spacing: .06em;
}
.brotkrumen a { color: var(--text-4); }
.brotkrumen a:hover { color: var(--text-2); }
.brotkrumen b { color: var(--akzent); font-weight: 400; }

.bs-hero { padding-block: clamp(32px, 5vw, 48px) clamp(48px, 7vw, 88px); }
.bs-hero h1 { font-size: clamp(38px, 6vw, 80px); max-width: 15ch; }
.bs-hero__text { font-size: 21px; line-height: 1.55; color: var(--text-3); max-width: 58ch; margin-top: 32px; }

/* Der "Im laufenden Betrieb"-Kasten.
   Bewusst ein Raster mit drei Zeilen und nicht zwei nebeneinander gestellte
   Spalten: Nur so endet jede Spur genau an ihrer eigenen Beschriftung. Vorher
   liefen die Linien ins Leere und die Beschriftungen standen daneben, ohne
   dass klar war, welche zu welcher gehoert. */
.betrieb {
  margin-top: 64px;
  padding: 30px clamp(22px, 3vw, 34px);
}
.betrieb__kopf {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-bottom: 28px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-4);
}
.betrieb__live { display: flex; align-items: center; gap: 8px; color: var(--akzent); letter-spacing: .1em; }
.betrieb__live i { width: 7px; height: 7px; border-radius: 50%; background: var(--akzent); animation: pulsieren 2.2s ease-out infinite; }
@keyframes pulsieren { 0% { box-shadow: 0 0 0 0 rgba(230,160,107,.55) } 70%, 100% { box-shadow: 0 0 0 9px rgba(230,160,107,0) } }

.betrieb__spur {
  display: grid;
  grid-template-columns: auto minmax(min(50px, 100%), 1fr) auto minmax(min(50px, 100%), 1fr) auto;
  grid-template-rows: repeat(3, auto);
  align-items: center;
  column-gap: clamp(12px, 2vw, 22px); row-gap: 16px;
}
.betrieb__quelle, .betrieb__stufe { grid-row: 1 / 4; align-self: center; white-space: nowrap; }
.betrieb__quelle { font-family: var(--f-mono); font-size: 13px; color: var(--text-2); }
.betrieb__stufe {
  border: 1px solid var(--akzent-dunkel); background: var(--akzent-hauch); border-radius: var(--ecke-winzig);
  padding: 11px 18px; font-family: var(--f-mono); font-size: 13px; color: var(--akzent);
}
.betrieb__linie { position: relative; height: 1px; background: var(--linie-3); }
.betrieb__linie i {
  position: absolute; top: -2.5px; width: 6px; height: 6px; border-radius: 50%;
  background: var(--akzent); box-shadow: 0 0 12px 2px rgba(230,160,107,.7);
  animation: fliessen 2.4s linear infinite;
}
.betrieb__linie--still i { background: var(--kalt); box-shadow: none; }
/* Endpunkt: die Spur laeuft sichtbar in ihr Ergebnis hinein */
.betrieb__linie::after {
  content: ""; position: absolute; right: -3px; top: -2.5px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--linie-4);
}
.betrieb__ende {
  display: flex; align-items: center; gap: 9px; white-space: nowrap;
  border: 1px solid var(--linie-3); border-radius: var(--ecke-winzig); padding: 8px 14px;
  font-family: var(--f-mono); font-size: 13px; color: var(--text-2);
}
.betrieb__ende b { font-weight: 400; color: var(--text); }
.betrieb__ende--wichtig { border-color: var(--akzent-dunkel); background: var(--akzent-hauch); color: var(--akzent); }
.betrieb__ende--wichtig b { color: var(--akzent); }
.betrieb__ende--mensch { border-style: dashed; color: var(--text-4); }
.betrieb__ende--mensch b { color: var(--text-3); }

/* Auf schmalen Schirmen wird aus der Spur eine Liste — Linien in 60 px Breite
   sagen nichts mehr aus. */
@media (max-width: 780px) {
  /* Die ausdrueckliche Rasterposition aus dem HTML muss hier ueberschrieben
     werden, sonst stapeln sich alle Zellen in Spalte 1 uebereinander.

     Die waagerechten Spuren fallen weg — auf 60 px Breite sagen sie nichts
     mehr. An ihre Stelle tritt eine senkrechte Spur mit einem laufenden Punkt:
     Die Bewegung bleibt, nur die Richtung dreht sich. Sie einfach wegzulassen
     hiesse, dem Handy die halbe Seite zu nehmen. */
  .betrieb__spur {
    display: flex; flex-direction: column; align-items: stretch; gap: 14px;
    position: relative; padding-left: 22px;
  }
  .betrieb__spur::before {
    content: ""; position: absolute; left: 3px; top: 10px; bottom: 10px;
    width: 1px; background: var(--linie-3);
  }
  .betrieb__spur::after {
    content: ""; position: absolute; left: 0.5px; width: 6px; height: 6px; border-radius: 50%;
    background: var(--akzent); box-shadow: 0 0 12px 3px rgba(230,160,107,.75);
    animation: fliessenRunter 3.4s linear infinite;
  }
  .betrieb__quelle, .betrieb__stufe, .betrieb__ende { grid-column: auto !important; grid-row: auto !important; }
  .betrieb__quelle, .betrieb__stufe { align-self: start; }
  .betrieb__linie { display: none; }
  /* nowrap wuerde die laengeren Ergebniszeilen aus dem Bild schieben */
  .betrieb__ende, .betrieb__stufe, .betrieb__quelle { white-space: normal; }
  .betrieb__ende { align-items: baseline; }
}

/* Drei Kennzahlen */
.kennzahlen {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: 40px;
  padding-block: clamp(40px, 7vw, 56px);
}
.kennzahl__was {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--text-4); margin-bottom: 14px;
}
.kennzahl__wert { font-family: var(--f-kopf); font-weight: 700; font-size: clamp(34px, 4vw, 44px); letter-spacing: -.03em; line-height: 1; }
.kennzahl__dazu { font-size: 17px; color: var(--text-3); margin-top: 8px; }

/* Zeitstrahl */
.zeitstrahl { display: grid; grid-template-columns: 56px 1fr; gap: 0 clamp(16px, 3vw, 28px); margin-top: 56px; }
.zeitstrahl__spur { position: relative; display: flex; justify-content: center; }
.zeitstrahl__spur > span { width: 1px; background: var(--linie-3); height: 100%; }
.zeitstrahl__spur i {
  position: absolute; left: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%;
  background: var(--akzent); box-shadow: 0 0 12px 2px rgba(230,160,107,.7);
  animation: fliessenRunter 3.2s linear infinite;
}
.zeitstrahl__spur b {
  position: absolute; top: 0; width: 14px; height: 14px; border-radius: 50%;
  background: var(--akzent); box-shadow: 0 0 14px 2px rgba(230,160,107,.6);
}
.zeitstrahl__spur--ende > span { background: transparent; }
.zeitstrahl__spur--ende b { background: var(--bg); border: 2px solid var(--akzent); box-shadow: none; animation: pulsieren 2.6s ease-out infinite; }
@keyframes fliessenRunter { 0% { top: 0%; opacity: 0 } 12%, 88% { opacity: 1 } 100% { top: 100%; opacity: 0 } }
.zeitstrahl__text { padding-bottom: 44px; }
.zeitstrahl__text:last-child { padding-bottom: 0; }
.zeitstrahl__nr { font-family: var(--f-mono); font-size: 12px; color: var(--text-4); letter-spacing: .14em; }
.zeitstrahl__nr--wichtig { color: var(--akzent); }
.zeitstrahl__text h3 { font-size: clamp(20px, 2.4vw, 24px); margin-top: 8px; }
.zeitstrahl__text p { font-size: 18px; color: var(--text-3); margin-top: 8px; max-width: 62ch; }

/* Was sich ändert — Heute/Danach je Zeile.
   Gegengewicht zum Abschnitt „wann es sich nicht lohnt": Der stand vorher
   allein da, der Nutzen nur als Kennzahl. Inhalte stammen aus
   harness/<baustein>/kundennutzen.md, Abschnitt „Was sich ändert". */
.wandel { border-top: 1px solid var(--linie); margin-top: 44px; }
.wandel__zeile {
  display: grid; grid-template-columns: 1fr auto 1fr;
  gap: clamp(14px, 3vw, 40px); align-items: center;
  padding: 22px 0; border-bottom: 1px solid var(--linie);
}
.wandel__heute { font-size: 17px; line-height: 1.5; color: var(--text-4); }
.wandel__pfeil { font-family: var(--f-mono); font-size: 15px; color: var(--akzent); line-height: 1; }
.wandel__danach { font-size: 18px; line-height: 1.5; color: var(--text-2); }
.wandel__danach b { color: var(--text-1); font-weight: 600; }
.wandel__marke {
  display: none; font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--text-4); margin-bottom: 6px;
}
/* Schmale Schirme: nebeneinander wird unlesbar, also untereinander mit
   Beschriftung — sonst weiß man nicht mehr, welche Hälfte das Heute ist. */
@media (max-width: 720px) {
  .wandel__zeile { grid-template-columns: 1fr; gap: 10px; padding: 20px 0; }
  .wandel__pfeil { display: none; }
  .wandel__marke { display: block; }
  .wandel__danach { padding-left: 14px; border-left: 2px solid var(--akzent); }
}

/* Ehrlich gesagt: wann es sich nicht lohnt */
.ehrlich { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.ehrlich > div { padding: 30px 28px; }
.ehrlich h3 { font-size: 21px; }
.ehrlich p { font-size: 17px; color: var(--text-3); margin-top: 10px; line-height: 1.5; }

/* Abschluss-Aufruf */
.abschluss {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 40px;
  padding-block: clamp(56px, 7vw, 96px);
}
.abschluss h2 { max-width: 18ch; }
.abschluss p { font-size: 19px; color: var(--text-3); max-width: 52ch; margin-top: 20px; }


/* ══════════════════════════════════════════════════════════════════════
   Bewegung — 13 · Sichtbarwerden, Staffelung, hochzählende Zahlen
   ══════════════════════════════════════════════════════════════════════
   Ergänzt den Reveal-Block aus Abschnitt 03. Drei Stücke:

     Staffelung   Kinder einer Gruppe laufen um je ~85 ms versetzt herein
     Zahlen       nur die Vorbereitung (tabular-nums); das Zählen macht
                  `js/basis.js`
     Diagramm     die Linien im Ablaufdiagramm zeichnen sich

   Ausgelöst wird NICHT an der Sektion, sondern an der Inhaltsgruppe
   (`.bw-gruppe`, gesetzt von basis.js). Am 25.08.2026 gemessen: an der
   Sektion feuerte es 620–890 px zu früh — die Bewegung war da, nur hat
   sie niemand gesehen.

   Grundsatz wie im Rest der Datei: Versteckt wird ausschließlich unter
   `.bw-gruppe`, und die Klasse setzt nur das Skript. Ohne JavaScript ist
   nichts versteckt. */

:root {
  /* Bleibt als Stellschraube: 1 = wie gebaut, größer = langsamer.
     Über diese eine Zahl lässt sich das Tempo aller Einblendungen
     nachjustieren, ohne jede Regel einzeln anzufassen. */
  --v-tempo: 1;

  /* Hauskurve der Seite, identisch mit stil.css:269. */
  --v-kurve: cubic-bezier(.2, .7, .3, 1);
}


/* ── 1 · Gestaffeltes Einblenden ──────────────────────────────────────
   Heute blendet eine Sektion als ein Block ein. Jetzt laufen ihre Kinder
   um je ~70 ms versetzt nach. Die Klasse `bw-kind` und der Zähler
   `--v-i` kommen aus dem Skript — steht dort nichts, greift hier nichts. */

.bw-gruppe .bw-kind {
  opacity: 0;
  transform: translateY(22px);
}

.bw-gruppe.ist-sicht .bw-kind {
  opacity: 1;
  transform: none;
  transition: opacity   calc(.7s * var(--v-tempo)) ease,
              transform calc(.7s * var(--v-tempo)) var(--v-kurve);
  transition-delay: calc(var(--v-i, 0) * 85ms * var(--v-tempo));
}


/* ── 2 · Zahlen ───────────────────────────────────────────────────────
   Das Hochzählen macht das Skript. Hier steht nur, was verhindert, dass
   die Zeile beim Zählen zappelt: Archivo hat proportionale Ziffern, eine
   1 ist schmaler als eine 8. Ohne `tabular-nums` wandert der Text
   während des Zählens hin und her. */

.beweis__wert,
.ueber__zahl,
.preis__wert,
.preis__kopf-wert {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}


/* ── 3 · Das Ablaufdiagramm zeichnet sich ─────────────────────────────
   Die vier Wege im SVG sind <use>-Verweise auf Pfade in <defs>.
   `stroke-dasharray` vererbt sich vom <use> auf den Pfad dahinter, wir
   brauchen die Grafik selbst also nicht anzufassen. Die Länge jedes
   Weges misst das Skript (getTotalLength) und legt sie in `--bw-len` ab.
   Fehlt `--bw-len`, ist die Regel ungültig und die Linien stehen
   einfach fertig da — genau das soll ohne JavaScript passieren. */

.fluss__bild.bw-gruppe use {
  stroke-dasharray:  var(--bw-len);
  stroke-dashoffset: var(--bw-len);
}

.fluss__bild.bw-gruppe.ist-sicht use {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset calc(1.1s * var(--v-tempo)) var(--v-kurve);
  transition-delay: calc(var(--v-i, 0) * 170ms * var(--v-tempo));
}

/* Die wandernden Punkte erst zeigen, wenn die Linien liegen — sonst
   läuft ein Punkt durch eine Strecke, die es noch nicht gibt. */
.fluss__bild.bw-gruppe .fluss__punkte { opacity: 0; }
.fluss__bild.bw-gruppe.ist-sicht .fluss__punkte {
  opacity: 1;
  transition: opacity calc(.6s * var(--v-tempo)) ease;
  transition-delay: calc(1.1s * var(--v-tempo));
}


/* ── 4 · Hero-Einstieg beim Laden ─────────────────────────────────────
   Einmalig, ohne Beobachter — der Hero steht über der Falz.

   Die H1 ist bewusst NICHT dabei: sie ist mit hoher Wahrscheinlichkeit
   das größte Element beim ersten Aufbau (LCP). Sie einzublenden
   verschiebt den gemessenen Seitenaufbau nach hinten und schadet der
   Auffindbarkeit, für die die Seite sonst einiges tut. */

@keyframes bwHeroRein {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

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

.hero__innen > .eyebrow,
.hero__innen > .hero__text,
.hero__innen > .hero__knoepfe,
.hero__innen > .hero__fuss {
  animation: bwHeroRein calc(.7s * var(--v-tempo)) var(--v-kurve) both;
}

.hero__innen > .eyebrow       { animation-delay: calc(.05s * var(--v-tempo)); }
.hero__innen > .hero__text    { animation-delay: calc(.20s * var(--v-tempo)); }
.hero__innen > .hero__knoepfe { animation-delay: calc(.31s * var(--v-tempo)); }
.hero__innen > .hero__fuss    { animation-delay: calc(.42s * var(--v-tempo)); }

.hero__wellen {
  animation: bwHeroWellen calc(1.6s * var(--v-tempo)) ease both;
}


/* ── 5 · Bewegungsreduktion ───────────────────────────────────────────
   PFLICHT, und der gefährlichste Punkt des ganzen Umbaus: `stil.css`
   setzt im Reduced-Motion-Block nur `.rv` zurück, nicht die Kinder.
   Ohne die Zeilen hier blieben Karten bei eingeschalteter
   Bewegungsreduktion dauerhaft unsichtbar.
 */

@media (prefers-reduced-motion: reduce) {
  .bw-gruppe .bw-kind   { opacity: 1; transform: none; transition: none; }
  .fluss__bild.bw-gruppe use { stroke-dasharray: none; stroke-dashoffset: 0; }
  .fluss__bild.bw-gruppe .fluss__punkte { opacity: 1; }
  .hero__innen > *,
  .hero__wellen        { animation: none; opacity: 1; transform: none; }
}



/* ══════════════════════════════════════════════════════════════════════
   Klick-Demo — 14 · Der Kasten, in dem ein Ablauf vorgeführt wird
   ══════════════════════════════════════════════════════════════════════
   Vier Fragen muss der Kasten ohne Nachdenken beantworten:
     1. Was ist das?          → Kopfzeile + Einleitungssatz
     2. Wie funktioniert das? → nummerierte Spaltenköpfe, Pfeil dazwischen
     3. Was muss ich tun?     → zwei Knöpfe, immer dieselben zwei
     4. Warum ist da nichts?  → NIE Leere. Wo etwas fehlt, steht ein
                                Platzhalter, der sagt, was dort hinkommt.

   Punkt 4 ist der wichtigste: eine frühere Fassung zeigte rechts eine
   leere Fläche, und das las sich wie ein Fehler, nicht wie „wartet noch".

   Am Handy wird immer nur EINE Bühne gezeigt (siehe unten) — gestapelt
   war die Karte dort rund 2.170 px hoch, und die Vorführung lief ab,
   während man noch beim Scrollen war.

   Diese Datei liefert das Gehäuse. Was auf der Bühne steht, kommt je
   Baustein aus einem eigenen Abschnitt (z. B. Abschnitt 15). */

.demo {
  background: var(--glas-stark), var(--flaeche-3);
  border: 1px solid var(--glas-rand);
  border-radius: var(--ecke);
  box-shadow: var(--glas-tiefe);
  overflow: hidden;
}

/* ── Kopfzeile und Einleitung ──────────────────────────────────────── */

.demo__kopf {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 13px 18px;
  border-bottom: 1px solid var(--linie-2);
  background: rgba(230,160,107,.05);
  font-family: var(--f-mono); font-size: 11px;
}
.demo__marke   { color: var(--akzent); letter-spacing: .14em; }
.demo__hinweis { margin-left: auto; color: var(--text-5); }

/* „läuft gerade" — nur sichtbar, solange die Demo von allein weiterläuft.
   Ohne diesen Hinweis wirkt das Weiterspringen wie ein Eigenleben. */
.demo__lauf {
  display: none; align-items: center; gap: 6px;
  padding: 2px 9px 2px 7px; border-radius: 999px;
  background: rgba(230,160,107,.13); color: var(--akzent);
  font-size: 10.5px;
}
.demo__lauf::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--akzent); animation: demoAtmen 1.4s ease-in-out infinite;
}
.demo.laeuft .demo__lauf { display: inline-flex; }
@keyframes demoAtmen { 0%, 100% { opacity: .3 } 50% { opacity: 1 } }

.demo__lead {
  margin: 0; padding: 14px 18px;
  border-bottom: 1px solid var(--linie);
  font-family: var(--f-text); font-size: 15px; line-height: 1.5;
  color: var(--text-3); max-width: 78ch;
}
.demo__lead b { color: var(--text); font-weight: 600; }

/* ── Bühne ─────────────────────────────────────────────────────────── */

/* Zwei Zeilen, nicht eine: oben die beiden Spalten, unten links der
   Unterbau (Bilanz, Ring, Beispielwechsler). Die rechte Spalte greift
   über beide Zeilen, und die zweite Zeile ist `1fr` — sie nimmt also
   auf, was die rechte Spalte mehr braucht als die linke.

   Vorher stand der Unterbau als eigener Streifen unter der ganzen Karte
   und war dabei auf die linke Spalte zusammengedrückt: daneben blieb die
   halbe Breite leer, und über ihm klaffte das Loch, das die kürzere
   linke Spalte hinterließ. Gemessen am 25.08.2026 waren das 37 bis
   420 px je Seite; auf der Startseite ist die Karte durch den Umbau rund
   320 px kürzer geworden. */
.demo__buehne {
  display: grid;
  grid-template-columns: 1.05fr 48px 1fr;
  grid-template-rows: auto 1fr;
  gap: 14px;
  padding: 18px;
  align-items: start;
}

.demo__links,
.demo__rechts { display: grid; gap: 12px; align-content: start; }

.demo__links { grid-column: 1; grid-row: 1; }
.demo__rechts { grid-column: 3; grid-row: 1 / -1; }

/* Nummerierte Spaltenköpfe — sie tragen die halbe Erklärung. */
.demo__spaltenkopf {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-4);
}
.demo__spaltenkopf b {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(230,160,107,.14); color: var(--akzent);
  font-family: var(--f-kopf); font-size: 11px; font-weight: 700;
}

/* Der Pfeil sagt in einem Zeichen, wohin die Sache läuft. Er steht in
   der oberen Zeile und zeigt damit von dem weg, was links hereinkommt —
   nicht mehr auf halber Höhe der ganzen Karte. */
.demo__pfeil {
  grid-column: 2; grid-row: 1;
  align-self: center; justify-self: center;
  padding-top: 38px;
  font-size: 30px; line-height: 1; color: var(--text-5);
  transition: color .4s ease, transform .4s var(--v-kurve, cubic-bezier(.2,.7,.3,1));
}
.demo.fliesst .demo__pfeil { color: var(--akzent); transform: translateX(4px); }

.demo__post,
.demo__seite {
  background: var(--flaeche-2);
  border: 1px solid var(--linie-2);
  border-radius: var(--ecke-klein);
  overflow: hidden;
  transition: border-color .4s ease, box-shadow .4s ease;
}

/* Der Bereich, in dem gerade etwas passiert, bekommt einen Rand —
   damit das Auge weiß, wo es hinschauen soll. */
.demo.zeigt-links  .demo__post,
.demo.zeigt-rechts .demo__seite {
  border-color: var(--akzent-dunkel);
  box-shadow: 0 0 0 3px rgba(230,160,107,.08);
}

/* Postfachzeile */
.demo__postkopf {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linie-2);
  font-family: var(--f-mono); font-size: 11.5px; color: var(--text-4);
}
.demo__punkt { width: 7px; height: 7px; border-radius: 50%; background: var(--kalt); flex: none; }
.demo__neu {
  margin-left: auto;
  padding: 2px 8px; border-radius: 999px;
  background: rgba(230,160,107,.14); color: var(--akzent);
  font-size: 10.5px;
}

.demo__mail { padding: 14px 16px 16px; }

/* ── Das Postfach vor und beim Ankommen ────────────────────────────────
   Leerzustand und Mail liegen übereinander im selben Kasten. Deshalb
   springt beim Ankommen keine Höhe, und die Mail kann sich in Ruhe
   aufbauen, statt einfach dazuliegen — zweimal war genau das die
   Rückmeldung: „die Mail ist immer noch direkt da". */

.demo__postkoerper { position: relative; }

.demo__leer {
  display: none;
  align-items: center; gap: 9px;
  padding: 14px 16px;
  font-family: var(--f-mono); font-size: 12px; color: var(--text-5);
}
.demo__leerpunkt {
  width: 7px; height: 7px; border-radius: 50%; flex: none;
  background: var(--linie-4); animation: demoAtmen 2s ease-in-out infinite;
}

/* Mit Skript: der Leerzustand liegt ÜBER der Mail und blendet sich aus,
   während die Mail hereinkommt. Kein `display`, sondern Deckkraft —
   sonst würde der Kasten in der Höhe springen. */
.demo.ist-bereit .demo__leer {
  display: flex;
  position: absolute; inset: 0;
  opacity: 1; transition: opacity .3s ease;
}
.demo.ist-bereit.mail-da .demo__leer { opacity: 0; pointer-events: none; }
.demo.ist-bereit:not(.mail-da) .demo__neu { display: none; }

/* Die Mail baut sich Zeile für Zeile auf: erst der Absender, dann der
   Betreff, dann der Text. Zusammen knapp eine Sekunde — lang genug, um
   als „kommt gerade an" gelesen zu werden. */
.demo.ist-bereit .demo__mail > * { opacity: 0; transform: translateY(-12px); }
.demo.ist-bereit.mail-da .demo__mail > * {
  opacity: 1; transform: none;
  transition: opacity .45s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.demo.ist-bereit.mail-da .demo__mail > *:nth-child(1) { transition-delay: .10s; }
.demo.ist-bereit.mail-da .demo__mail > *:nth-child(2) { transition-delay: .30s; }
.demo.ist-bereit.mail-da .demo__mail > *:nth-child(3) { transition-delay: .52s; }

/* Der Kasten selbst blitzt beim Eintreffen kurz auf. */
.demo.ist-bereit.mail-da .demo__post { animation: demoEintreffen .9s ease-out both; }
@keyframes demoEintreffen {
  0%   { box-shadow: 0 0 0 0 rgba(230,160,107,0); }
  25%  { box-shadow: 0 0 26px -4px rgba(230,160,107,.5); }
  100% { box-shadow: 0 0 0 0 rgba(230,160,107,0); }
}

.demo.ist-bereit.mail-da .demo__neu { animation: demoPuls 1.6s ease-out 2; }

.demo__zeile {
  display: flex; gap: 10px; padding: 4px 0;
  font-family: var(--f-mono); font-size: 12px;
}
.demo__zeile > span { flex: 0 0 58px; color: var(--text-5); }
.demo__zeile > b    { color: var(--text-2); font-weight: 500; }

.demo__text {
  margin-top: 13px; padding-top: 13px;
  border-top: 1px solid var(--linie);
  font-family: var(--f-text); font-size: 15.5px; line-height: 1.65;
  color: var(--text-2);
}
.demo__text mark {
  background: rgba(230,160,107,.16);
  color: var(--akzent-hell);
  border-radius: 3px; padding: 1px 3px;
}

/* ── Rechte Spalte ─────────────────────────────────────────────────── */

.demo__seitenkopf {
  padding: 10px 14px;
  border-bottom: 1px solid var(--linie-2);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
  color: var(--text-4);
}

.demo__felder { padding: 6px 14px 14px; }

.demo__feld {
  display: flex; align-items: baseline; gap: 12px;
  padding: 7px 0;
  border-bottom: 1px solid var(--linie);
  font-size: 14px;
}
.demo__feld:last-child { border-bottom: 0; }
.demo__feld > span:first-child {
  flex: 0 0 92px; font-family: var(--f-mono); font-size: 11.5px; color: var(--text-5);
}
.demo__wert { position: relative; flex: 1 1 auto; min-height: 19px; }
.demo__wert b { display: block; color: var(--text); font-weight: 600; font-family: var(--f-text); }
.demo__feld--hoch .demo__wert b { color: var(--akzent); }

/* Der Platzhalterbalken. Ohne Skript unsichtbar — dann steht der echte
   Wert ja da und es gibt nichts zu warten. */
.demo__skelett {
  display: none;
  position: absolute; left: 0; top: 4px; height: 10px;
  border-radius: 3px; background: var(--linie-4);
}

/* Zuordnung */
.demo__ziel {
  padding: 11px 13px;
  border-left: 2px solid var(--akzent);
  background: rgba(230,160,107,.08);
  font-family: var(--f-text); font-size: 14px; color: var(--text-2);
}
.demo__ziel b { color: var(--text); }

/* Antwortentwurf */
.demo__antwort {
  border: 1px solid var(--linie-3);
  border-radius: var(--ecke-klein);
  background: var(--flaeche-3);
  overflow: hidden;
}
.demo__antwortkopf {
  padding: 8px 13px;
  border-bottom: 1px solid var(--linie-2);
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em;
  color: var(--text-4);
}
.demo__entwurf {
  margin: 0; padding: 13px;
  font-family: var(--f-text); font-size: 14px; line-height: 1.6;
  color: var(--text-2);
  min-height: 4.9em;                     /* damit die Kiste beim Tippen nicht wächst */
  white-space: pre-line;
}
.demo__entwurfhinweis {
  padding: 9px 13px;
  border-top: 1px solid var(--linie);
  font-family: var(--f-mono); font-size: 11px; color: var(--akzent);
  background: rgba(230,160,107,.06);
}

/* Die beiden späten Blöcke sitzen in einer Hülle, damit an ihrer Stelle
   ein Platzhalter stehen kann, statt dass dort ein Loch klafft. */
.demo__stufe { margin: 12px 14px 0; }
.demo__stufe:last-child { margin-bottom: 14px; }

/* Bilanz — bewusst dieselben Zahlen wie die Kennzahlen der Baustein-Seite
   und dieselben Annahmen wie der Rechner (4 Min, 60 % fallen weg). Wird
   eine davon geändert, muss sie hier mitgeändert werden. */
.demo__bilanz { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; }
.demo__bilanz > div {
  flex: 1 1 120px;
  padding: 11px 13px;
  border: 1px solid var(--linie-2);
  border-radius: var(--ecke-klein);
  background: var(--flaeche);
}
/* Vier Kacheln nebeneinander werden schmal und die Zahlen brechen um.
   Zwei mal zwei — dafür muss die Grundbreite über die halbe Spalte
   hinausgehen, sonst passen doch wieder alle vier in eine Zeile.
   Steht bewusst NACH der Regel oben: die `flex`-Kurzschreibweise dort
   setzt die Grundbreite zurück, und bei gleicher Stärke gewinnt die
   spätere Regel. */
.demo__bilanz--vier > div { flex-basis: 46%; }
.demo__bilanz span { display: block; font-family: var(--f-mono); font-size: 10.5px; color: var(--text-5); }
.demo__bilanz b    { display: block; margin-top: 5px; font-family: var(--f-kopf); font-size: 21px;
                     letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); }
.demo__bilanz > div:last-child b { color: var(--akzent); }

/* ── Anteil-Ring ───────────────────────────────────────────────────────
   Bewusst KEIN Fortschrittsring: die fünf Abschnitte über der Bühne
   zeigen schon, wo man steht. Dieser Ring zeigt etwas anderes — wie sich
   die Arbeit einer Anfrage aufteilt. Das ist ein echtes Ganzes mit zwei
   Anteilen und damit die richtige Form für einen Kreis.

   Die 60/40-Teilung steht als Annahme im Rechner (`anfrageAnteil: 0.6`)
   und ist dort offengelegt. Keine erfundene Zahl, und bewusst keine
   Zwischenwerte während des Laufs. */

.demo__anteil {
  display: flex; align-items: center; gap: 20px;
  padding: 18px 20px;
  border: 1px solid var(--glas-rand);
  border-radius: var(--ecke);
  background:
    radial-gradient(120% 150% at 14% 26%, rgba(230,160,107,.15), transparent 60%),
    var(--glas-stark),
    var(--flaeche-2);
  box-shadow: var(--glas-licht), 0 20px 44px -30px rgba(0,0,0,.95);
}

/* Der Ring trägt die Zahl in der Mitte, deshalb ein eigenes Feld. */
.demo__ringfeld { position: relative; width: 116px; height: 116px; flex: none; }
.demo__ring { width: 100%; height: 100%; display: block; overflow: visible; }

.demo__ringkern { fill: url(#demoRingKern); stroke: none; }

/* Feine Skala außen — sie gibt dem Ring Tiefe und ein technisches Gesicht.
   Sie dreht sich NUR, solange die Demo läuft; ein dauernd kreisendes Rad
   wäre genau die Art Zappeln, die auf der Seite sonst vermieden wird. */
.demo__ringteilung {
  fill: none; stroke: var(--linie-4); stroke-width: 1.4;
  stroke-dasharray: 1.6 7.2; stroke-linecap: round;
  opacity: .75;
  transform-box: fill-box; transform-origin: center;
}
.demo.laeuft .demo__ringteilung { animation: demoSkala 26s linear infinite; }
@keyframes demoSkala { to { transform: rotate(360deg); } }

.demo__ringspur,
.demo__ringwert { fill: none; stroke-width: 11; }
.demo__ringspur { stroke: rgba(244,241,235,.07); }

.demo__ringwert {
  stroke: url(#demoRingVerlauf); stroke-linecap: round;
  /* Umfang bei r=46: 2·π·46 = 289,03 */
  stroke-dasharray: 289.03;
  /* Ohne Skript steht der Endstand da: 60 % gefüllt. */
  stroke-dashoffset: 115.61;
  transform: rotate(-90deg); transform-box: fill-box; transform-origin: center;
  filter: drop-shadow(0 0 9px rgba(230,160,107,.55));
  transition: stroke-dashoffset .6s cubic-bezier(.2, .7, .3, 1);
}

/* `align-items: baseline` setzte den Block an den oberen Rand des
   Feldes statt in die Mitte des Rings — deshalb mittig ausrichten und
   das Prozentzeichen einzeln anheben. */
.demo__ringzahl {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: 2px;
  pointer-events: none;
}
.demo__ringzahl span { position: relative; top: -7px; }
.demo__ringzahl b {
  font-family: var(--f-kopf); font-weight: 700; font-size: 34px;
  letter-spacing: -.03em; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-shadow: 0 0 22px rgba(230,160,107,.45);
}
.demo__ringzahl span {
  font-family: var(--f-kopf); font-weight: 600; font-size: 16px;
  color: var(--akzent);
}

.demo__anteiltext { display: grid; gap: 7px; }
.demo__anteiltitel {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--text-5);
  margin-bottom: 1px;
}
.demo__anteilzeile {
  position: relative; padding-left: 17px;
  font-family: var(--f-text); font-size: 14px; line-height: 1.45;
  color: var(--text-4);
}
.demo__anteilzeile::before {
  content: ''; position: absolute; left: 0; top: .42em;
  width: 9px; height: 9px; border-radius: 3px; background: var(--linie-4);
}
.demo__anteilzeile--weg::before {
  background: var(--akzent);
  box-shadow: 0 0 9px rgba(230,160,107,.7);
}
.demo__anteilzeile b { color: var(--text); font-weight: 700; font-size: 15px; }
.demo__anteilzeile--weg b { color: var(--akzent-hell); }


/* ── Beispielwechsler ──────────────────────────────────────────────────
   Ohne Skript gibt es nichts zu wechseln — dann steht das erste Beispiel
   im HTML und der Wechsler fällt ersatzlos weg. */

.demo__faelle { display: none; align-items: center; gap: 8px; flex-wrap: wrap; }
.demo.ist-bereit .demo__faelle { display: flex; }

.demo__faelletitel {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-5);
  margin-right: 2px;
}
.demo__faelle button {
  appearance: none; cursor: pointer;
  padding: 6px 13px; border-radius: 999px;
  border: 1px solid var(--linie-3);
  background: var(--flaeche-2); color: var(--text-3);
  font-family: var(--f-text); font-size: 13.5px;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.demo__faelle button:hover { border-color: var(--akzent-dunkel); color: var(--text); }
.demo__faelle button.ist-aktiv {
  border-color: var(--akzent-dunkel);
  background: rgba(230,160,107,.12);
  color: var(--akzent);
}


/* ── Steuerleiste ──────────────────────────────────────────────────── */

/* Festes Raster statt Umbruch nach Gutdünken: oben Stand und die zwei
   Knöpfe, darunter die Sprungkette. So sieht die Leiste bei jeder Breite
   gewollt aus und nicht, als sei ihr der Platz ausgegangen. */
.demo__leiste {
  display: grid; grid-template-columns: 1fr auto;
  gap: 11px 18px; align-items: center;
  padding: 13px 18px;
  border-bottom: 1px solid var(--linie-2);
  background: rgba(0,0,0,.16);
}

/* Die Standzeile beantwortet jederzeit „wo bin ich gerade". */
.demo__stand { grid-column: 1; grid-row: 1; }
.demo__standnr {
  display: block;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--akzent);
}
.demo__standname {
  display: block; margin-top: 3px;
  font-family: var(--f-text); font-size: 15px; font-weight: 600; color: var(--text);
}

/* Die Schrittkette. Sie war vorher eine reine Anzeige und sah auch so
   aus — dass man sie anklicken kann, hat niemand gesehen. Deshalb jetzt
   echte Knöpfe, mit Beschriftung darüber, die sagt was sie tun. */
.demo__sprung {
  grid-column: 1 / -1; grid-row: 2;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding-top: 3px; border-top: 1px solid var(--linie);
}
.demo__sprungtitel {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-5);
}

.demo__punkte {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  list-style: none; margin: 0; padding: 0;
}
.demo__punkte li { display: flex; }
.demo__punkte button {
  appearance: none; cursor: pointer;
  display: flex; align-items: center; gap: 7px;
  padding: 5px 11px 5px 8px;
  border: 1px solid var(--linie-3);
  border-radius: 999px;
  background: var(--flaeche-2);
  color: var(--text-4);
  font-family: var(--f-mono); font-size: 11px;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.demo__punkte button::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%;
  background: var(--linie-4); flex: none;
  transition: background .3s ease, box-shadow .3s ease;
}
.demo__punkte button:hover {
  border-color: var(--akzent-dunkel); color: var(--akzent); background: var(--flaeche);
}

/* ── Die zwei Bedienknöpfe ──────────────────────────────────────────
   Immer beide, immer an derselben Stelle, immer dieselbe Bedeutung:
   links einen Schritt weiter, rechts von vorn abspielen lassen. */
/* Fünf Abschnitte statt eines durchgehenden Balkens — so ist zu sehen,
   BEI WELCHEM Schritt er gerade steht, nicht nur wie weit er ist.

   Bewusst nicht in Kupfer: die Signaturfarbe trägt auf dieser Seite
   schon alles Wichtige. Der zweite Hausdton (Kaltgrau) zeigt „erledigt",
   Kupfer bleibt allein dem laufenden Abschnitt vorbehalten. Damit haben
   die beiden Farben eine klare Aufgabe statt nur eine Optik. */
.demo__balken {
  grid-column: 1 / -1; grid-row: 3;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px;
}
.demo__balken i {
  height: 4px; border-radius: 2px; overflow: hidden;
  background: var(--linie-2);
}
.demo__balken i b {
  display: block; height: 100%; width: 0;
  background: var(--kalt-hell);
}
.demo.ist-bereit .demo__balken i.fertig b { width: 100%; }

/* Der laufende Abschnitt füllt sich über die Verweildauer seines
   Schrittes — dadurch bewegt sich auch zwischen zwei Schritten etwas. */
.demo.ist-bereit .demo__balken i.jetzt b {
  width: 100%;
  background: var(--akzent);
  transition: width var(--dauer, .5s) linear;
}
.demo.ist-bereit .demo__balken i.jetzt {
  box-shadow: 0 0 10px -2px rgba(230,160,107,.55);
}

.demo:not(.ist-bereit) .demo__balken { display: none; }

.demo__knoepfe {
  grid-column: 2; grid-row: 1; justify-self: end;
  display: flex; align-items: center; gap: 10px;
}

.demo__schritt,
.demo__spielen {
  appearance: none; cursor: pointer; white-space: nowrap;
  padding: 11px 18px; border-radius: var(--ecke-winzig);
  font-family: var(--f-text); font-weight: 600; font-size: 14.5px;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}

.demo__schritt {
  border: 1px solid var(--linie-4);
  background: transparent; color: var(--text-2);
}
.demo__schritt:hover { border-color: var(--akzent-dunkel); color: var(--text); }

.demo__spielen {
  border: 0;
  background: var(--akzent); color: #14181a;
}
.demo__spielen:hover { background: var(--akzent-hell); }

/* Ohne Skript gibt es nichts zu klicken — dann steht ohnehin alles da.
   Die ganze Leiste fällt weg, nicht nur ihr Inhalt: ein leerer Balken
   mit Rand sähe aus wie ein Rest, der nicht geladen hat. */
.demo:not(.ist-bereit) .demo__leiste { display: none; }


/* ══════════════════════════════════════════════════════════════════════
   Der Skript-Zustand — gilt NUR mit `.ist-bereit`, also nur, wenn
   wirklich jemand durchklicken kann.
   ══════════════════════════════════════════════════════════════════════ */

/* Solange die Demo nicht gestartet ist, macht der Knopf auf sich
   aufmerksam. Genau hier ist der erste Blick zuerst hängengeblieben. */
.demo.ist-bereit:not(.gestartet) .demo__spielen {
  animation: demoWink 2.2s ease-out infinite;
}
@keyframes demoWink {
  0%       { box-shadow: 0 0 0 0 rgba(230,160,107,.5); }
  55%, 100%{ box-shadow: 0 0 0 12px rgba(230,160,107,0); }
}

/* Gelesene Stellen im Mailtext */
.demo.ist-bereit .demo__text mark {
  background: transparent; color: inherit;
  transition: background .35s ease, color .35s ease;
}
/* Deutlich kräftiger als zuerst gebaut: mit rgba(…,.2) waren drei kurze
   Wörter in einem Absatz kaum zu bemerken — „da passiert nichts". */
.demo.ist-bereit .demo__text mark.an {
  background: rgba(230,160,107,.42);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(230,160,107,.5);
  animation: demoMarkePop .4s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes demoMarkePop {
  0%   { background: rgba(230,160,107,.85); }
  100% { background: rgba(230,160,107,.42); }
}

/* Felder: der Wert wartet, der Balken steht solange an seiner Stelle */
.demo.ist-bereit .demo__feld .demo__wert b {
  opacity: 0; transform: translateY(6px);
}
.demo.ist-bereit .demo__feld.an .demo__wert b {
  opacity: 1; transform: none;
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.3,1);
  animation: demoWertPop .55s ease-out both;
}
/* Kurzes Aufleuchten beim Landen — sonst tauschen sich fünf kleine
   Textwerte so unauffällig aus, dass man es nicht bemerkt. */
@keyframes demoWertPop {
  0%   { text-shadow: 0 0 14px rgba(230,160,107,.9); }
  100% { text-shadow: none; }
}
.demo.ist-bereit .demo__feld .demo__skelett { display: block; }
.demo.ist-bereit .demo__feld.an .demo__skelett { display: none; }

/* Späte Blöcke: statt Loch ein Platzhalter, der sagt, was kommt */
.demo.ist-bereit .demo__stufe:not(.an) > * { display: none; }
.demo.ist-bereit .demo__stufe:not(.an)::before {
  content: attr(data-warte);
  display: block;
  padding: 15px 13px;
  border: 1px dashed var(--linie-4);
  border-radius: var(--ecke-klein);
  font-family: var(--f-mono); font-size: 11px; line-height: 1.5;
  color: var(--text-5);
}
.demo.ist-bereit .demo__stufe.an > * {
  animation: demoRein .45s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes demoRein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/* Die neue Mail meldet sich einmal, statt still dazuliegen. */
.demo.ist-bereit.gestartet .demo__neu { animation: demoPuls 1.9s ease-out 3; }
@keyframes demoPuls {
  0%        { box-shadow: 0 0 0 0 rgba(230,160,107,.5); }
  60%, 100% { box-shadow: 0 0 0 8px rgba(230,160,107,0); }
}

/* Erledigte und laufender Schritt */
.demo.ist-bereit .demo__punkte li.fertig button::before { background: var(--akzent-dunkel); }
.demo.ist-bereit .demo__punkte li.jetzt button {
  border-color: var(--akzent-dunkel); color: var(--akzent); background: var(--flaeche);
}
.demo.ist-bereit .demo__punkte li.jetzt button::before {
  background: var(--akzent); box-shadow: 0 0 0 4px rgba(230,160,107,.18);
}


/* Für den einen Moment, in dem die Demo zum Abspielen zurückgesetzt
   wird: alles ohne Übergang, damit das Zurücksetzen unsichtbar bleibt
   und nur die Ankunft danach zu sehen ist. */
.demo.ohne-uebergang,
.demo.ohne-uebergang *,
.demo.ohne-uebergang *::before,
.demo.ohne-uebergang *::after {
  transition: none !important;
  animation: none !important;
}


/* ── Unterbau: Bilanz, Ring, Beispielwechsler ──────────────────────────
   Inhaltlich kein Teil der Bühne, im Markup seit dem 25.08.2026 aber ihr
   letztes Kind. Am großen Schirm steht er dadurch in der linken Spalte,
   direkt unter dem, was dort ohnehin endet.

   Am Handy ändert das nichts: dort ist die Bühne einspaltig, und als
   letztes Kind kommt der Unterbau weiterhin HINTER der Bühne. Genau das
   ist die Bedingung — zwischen Mail und Formular darf er nie stehen,
   weil am Handy immer nur eine der beiden gezeigt wird. */
.demo__unten {
  grid-column: 1; grid-row: 2;
  align-self: start;
  display: grid; gap: 12px;
}


/* ── Kurzfassung der Mail ──────────────────────────────────────────────
   Nur am Handy, und nur wenn das Formular dran ist: die Mail ist dann
   ausgeblendet, der Bezug muss trotzdem stehen. */
.demo__mailkurz {
  display: none;
  align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 9px 12px;
  border-left: 2px solid var(--linie-4);
  background: var(--flaeche-3);
  border-radius: var(--ecke-winzig);
  font-family: var(--f-mono); font-size: 11.5px; color: var(--text-4);
}
.demo__mailkurzmarke { color: var(--text-5); }
.demo__mailkurz b { color: var(--text-2); font-weight: 500; }
.demo__mailkurzbetreff { color: var(--text-4); }


/* ══════════════════════════════════════════════════════════════════════
   Am Handy nur EINE Bühne
   ══════════════════════════════════════════════════════════════════════
   Gemessen am 25.08.2026: gestapelt ist die Karte am Handy rund 2.170 px
   hoch, also etwa drei Bildschirme. Die Demo läuft aber auf einer Uhr —
   man sieht oben die Mail ankommen, scrollt, und unten ist alles vorbei.
   Ein Handy hat einen Bildschirm, also darf auch nur eine Bühne
   gleichzeitig da sein: Schritt 1–2 die Mail, ab Schritt 3 das Formular.

   Gilt NUR mit Skript. Ohne Skript steht weiter alles untereinander —
   dann läuft ja auch nichts, was man verpassen könnte. */

@media (max-width: 900px) {
  /* Der Unterbau liegt jetzt IN der Bühne, die hier einspaltig ist. Er
     bekommt deshalb keine eigene Innenkante mehr — die der Bühne reicht. */
  .demo__unten { padding: 0; }

  /* 1 · Die Einleitung hat ihren Dienst getan, sobald es läuft. */
  .demo.ist-bereit.gestartet .demo__lead { display: none; }

  /* 2 · Die Sprungkette schrumpft auf fünf Punkte. Wie der Schritt heißt,
         steht ohnehin fett in der Standzeile daneben. */
  .demo__sprungtitel { display: none; }
  /* `font-size: 0` statt `color: transparent`: die Aktiv-Regel setzt die
     Farbe zurueck und liess den Text sonst durchblitzen. */
  .demo__punkte button {
    width: 26px; height: 26px; padding: 0; gap: 0;
    justify-content: center; overflow: hidden;
    font-size: 0;
  }
  .demo__punkte button::before { margin: 0; width: 7px; height: 7px; }

  /* 3 · Die Leiste läuft mit. Ohne sie war unten angekommen weder zu
         sehen, wo man ist, noch etwas neu zu starten. Die feste
         Kopfzeile der Seite ist hier 77 px hoch. */
  /* `overflow: hidden` am Kasten macht `sticky` wirkungslos — es erzeugt
     einen eigenen Scroll-Rahmen, an dem die Leiste dann klebt statt am
     Fenster. `clip` schneidet genauso ab, ohne diesen Rahmen. */
  .demo { overflow: clip; }

  .demo__leiste {
    position: sticky; top: 77px; z-index: 6;
    background: #12181a;
    box-shadow: 0 10px 22px -14px rgba(0,0,0,.95);
  }

  /* Die Bühne beginnt damit direkt unter der Leiste. */
  .demo__buehne { padding-top: 14px; }

  /* Der Antwortkasten braucht am Handy nicht so viel Vorrat. */
  .demo__entwurf { min-height: 3.6em; font-size: 13.5px; }
  .demo__feld { padding: 6px 0; }

  .demo.ist-bereit .demo__rechts { display: none; }
  .demo.ist-bereit.zeigt-form .demo__rechts { display: grid; }
  .demo.ist-bereit.zeigt-form .demo__links { display: none; }
  .demo.ist-bereit.zeigt-form .demo__pfeil { display: none; }
  .demo.ist-bereit.zeigt-form .demo__mailkurz { display: flex; }

  /* Der Wechsel der Bühne ist selbst ein Ereignis — ohne ihn wirkt es,
     als sei die Seite gesprungen. */
  .demo.ist-bereit.zeigt-form .demo__rechts,
  .demo.ist-bereit:not(.zeigt-form) .demo__links {
    animation: demoBuehneRein .4s cubic-bezier(.2,.7,.3,1) both;
  }
}
@keyframes demoBuehneRein {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}


/* ── Schmale Schirme ───────────────────────────────────────────────── */

@media (max-width: 900px) {
  .demo__buehne { grid-template-columns: 1fr; gap: 14px; padding: 16px; }

  /* Alles untereinander, in Markup-Reihenfolge: Mail, Pfeil, Formular,
     Unterbau. Die Zeilen- und Spaltenzuweisungen von oben müssen dafür
     ausdrücklich zurück — sonst legt der Pfeil mit `grid-column: 2`
     eine zweite Spalte an, die es hier gar nicht geben soll. */
  .demo__buehne { grid-template-rows: none; }
  .demo__links,
  .demo__pfeil,
  .demo__rechts,
  .demo__unten { grid-column: auto; grid-row: auto; }

  /* Untereinander zeigt der Pfeil nach unten, nicht zur Seite. */
  .demo__pfeil { padding: 0; transform: rotate(90deg); }
  .demo.fliesst .demo__pfeil { transform: rotate(90deg) translateX(4px); }
}

@media (max-width: 560px) {
  .demo__kopf   { padding: 11px 14px; font-size: 10px; }
  .demo__hinweis { margin-left: 0; flex-basis: 100%; }
  .demo__lead   { padding: 14px; font-size: 15px; }
  .demo__leiste { padding: 12px 14px; gap: 12px; }
  .demo__leiste  { grid-template-columns: 1fr; }
  .demo__stand,
  .demo__sprung,
  .demo__knoepfe { grid-column: 1; grid-row: auto; }
  .demo__knoepfe { justify-self: stretch; }
  .demo__schritt, .demo__spielen { flex: 1 1 0; padding: 11px 12px; font-size: 14px; }
  .demo__punkte { font-size: 10px; gap: 6px; }
  .demo__punkte li { padding: 3px 8px 3px 6px; }
  .demo__feld > span:first-child { flex-basis: 80px; }
  .demo__anteil { gap: 14px; padding: 15px; }
  .demo__ringfeld { width: 92px; height: 92px; }
  .demo__ringzahl b { font-size: 27px; }
  .demo__anteilzeile { font-size: 13px; }
}


/* ── Bewegungsreduktion ────────────────────────────────────────────────
   Kein Winken, kein Puls, kein Atmen. Das Skript übernimmt in diesem
   Fall ohnehin gar nicht (siehe `start()` in js/demo-kern.js) — diese
   Regeln sind die zweite Sicherung, falls das je geändert wird. */

@media (prefers-reduced-motion: reduce) {
  .demo .demo__spielen,
  .demo .demo__neu,
  .demo .demo__lauf::before { animation: none; }
}


/* ══════════════════════════════════════════════════════════════════════
   Bühne „Auftragserfassung" — 15 · Prüfformular mit Zitaten
   ══════════════════════════════════════════════════════════════════════
   Bewusst ein ANDERES Bild als die Triage-Demo: dort ein Postfach, das
   sortiert und antwortet — hier ein Prüfformular, das sich ausfüllt und
   bei dem jedes Feld sein wörtliches Zitat aus der Mail mitbringt.

   Der Kern des Bausteins ist nicht „es füllt aus", sondern „es rät
   nichts". Deshalb ist das auffälligste Element dieser Bühne das ROTE
   Feld: der Preis steht als „wie üblich" in der Mail, ein Betrag aber
   nicht — also bleibt er leer und verlangt einen Menschen.

   Das Gehäuse (Kopf, Standzeile, zwei Knöpfe, Schrittkette, Fortschritt)
   kommt aus Abschnitt 14 und sieht überall gleich aus. */

/* ── Die Auftragsmail (links) ──────────────────────────────────────── */

.dz__mailtext {
  margin-top: 13px; padding-top: 13px;
  border-top: 1px solid var(--linie);
  font-family: var(--f-text); font-size: 15px; line-height: 1.7;
  color: var(--text-2);
  white-space: pre-line;
}
.dz__mailtext mark {
  background: rgba(230,160,107,.16);
  color: var(--akzent-hell);
  border-radius: 3px; padding: 1px 3px;
}
.demo.ist-bereit .dz__mailtext mark {
  background: transparent; color: inherit;
  transition: background .35s ease, color .35s ease;
}
.demo.ist-bereit .dz__mailtext mark.an {
  background: rgba(230,160,107,.42);
  color: var(--text);
  box-shadow: 0 0 0 1px rgba(230,160,107,.5);
}

/* Die Korrektur im Fließtext ist der Fall, an dem Menschen scheitern —
   deshalb bekommt sie eine eigene, kältere Farbe. */
.demo.ist-bereit .dz__mailtext mark.dz__korrektur.an {
  background: rgba(240,163,163,.3);
  color: #f6c9c9;
  box-shadow: 0 0 0 1px rgba(240,163,163,.45);
}


/* ── Das Prüfformular (rechts) ─────────────────────────────────────── */

.dz__formkopf {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--linie-2);
  background: rgba(230,160,107,.06);
  font-family: var(--f-mono); font-size: 11px; line-height: 1.45;
  color: var(--akzent);
}

.dz__felder { padding: 4px 14px 10px; }

.dz__feld {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--linie);
}
.dz__feld:last-child { border-bottom: 0; }

.dz__marke {
  grid-column: 1; grid-row: 1;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--text-5);
}
.dz__wert {
  grid-column: 1; grid-row: 2;
  position: relative; min-height: 21px;
  font-family: var(--f-text); font-size: 15px; font-weight: 600; color: var(--text);
}
.dz__zitat {
  grid-column: 1; grid-row: 3;
  margin-top: 3px;
  font-family: var(--f-mono); font-size: 11px; line-height: 1.5;
  color: var(--text-5);
}
.dz__zitat b { color: var(--kalt-hell); font-weight: 400; }

/* Der Prüfhaken sitzt rechts und kommt erst im Prüfschritt. */
.dz__pruef {
  grid-column: 2; grid-row: 1 / span 3;
  align-self: center;
  display: flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 11px;
  color: var(--kalt-hell);
  white-space: nowrap;
}
.dz__haken {
  display: grid; place-items: center;
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  background: rgba(134,239,172,.14); color: var(--gut);
  font-size: 12px; line-height: 1;
}

/* Platzhalterbalken, solange ein Wert noch nicht gelesen ist */
.dz__skelett {
  display: none;
  position: absolute; left: 0; top: 4px; height: 11px;
  border-radius: 3px; background: var(--linie-4);
}
.demo.ist-bereit .dz__feld .dz__wert b,
.demo.ist-bereit .dz__feld .dz__zitat { opacity: 0; transform: translateY(6px); }
.demo.ist-bereit .dz__feld.an .dz__wert b,
.demo.ist-bereit .dz__feld.an .dz__zitat {
  opacity: 1; transform: none;
  transition: opacity .4s ease, transform .4s cubic-bezier(.2,.7,.3,1);
}
.demo.ist-bereit .dz__feld .dz__skelett { display: block; }
.demo.ist-bereit .dz__feld.an .dz__skelett { display: none; }

.demo.ist-bereit .dz__pruef { opacity: 0; transform: scale(.85); }
.demo.ist-bereit .dz__pruef.an {
  opacity: 1; transform: none;
  transition: opacity .35s ease, transform .35s cubic-bezier(.2,.7,.3,1);
}

/* ── Die zwei Felder, um die es eigentlich geht ────────────────────── */

/* Gelb: gelesen, aber es steckt eine Korrektur im Text. */
.dz__feld--hinweis .dz__haken { background: rgba(230,160,107,.16); color: var(--akzent); }
.dz__feld--hinweis .dz__pruef { color: var(--akzent); }

/* Rot: der Wert steht nicht in der Mail. Das ist der Kern des Bausteins
   und deshalb das auffälligste Element der ganzen Demo. */
.dz__feld--fehlt {
  margin: 4px -10px; padding: 12px 10px;
  border: 1px solid rgba(240,163,163,.4);
  border-radius: var(--ecke-klein);
  background: rgba(240,163,163,.07);
}
.dz__feld--fehlt .dz__marke { color: var(--schlecht); }
.dz__feld--fehlt .dz__wert  { font-family: var(--f-mono); font-size: 13px; color: var(--schlecht); font-weight: 400; }
.dz__feld--fehlt .dz__pruef { color: var(--schlecht); }
.dz__feld--fehlt .dz__haken { background: rgba(240,163,163,.16); color: var(--schlecht); }
.demo.ist-bereit .dz__feld--fehlt.an { animation: dzRot .8s ease-out both; }
@keyframes dzRot {
  0%   { box-shadow: 0 0 0 0 rgba(240,163,163,.45); }
  55%, 100% { box-shadow: 0 0 0 10px rgba(240,163,163,0); }
}

/* ── Fuß des Formulars: der Stand und die Freigabe ─────────────────── */

.dz__fuss {
  margin: 0 14px 14px;
  border: 1px solid var(--linie-3);
  border-radius: var(--ecke-klein);
  overflow: hidden;
}
.dz__stand {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 13px;
  border-bottom: 1px solid var(--linie);
  font-family: var(--f-mono); font-size: 11.5px; color: var(--text-4);
}
.dz__stand b { color: var(--text); font-weight: 500; }
.dz__stand em { font-style: normal; color: var(--schlecht); }

.dz__freigabe {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 13px;
  background: rgba(0,0,0,.16);
}
/* Attrappe, kein echter Knopf: hier wird nichts freigegeben. Deshalb ein
   <span> im Markup und hier bewusst kein Zeigefinger beim Überfahren. */
.dz__knopf {
  padding: 8px 16px; border-radius: var(--ecke-winzig);
  background: rgba(134,239,172,.14); color: var(--gut);
  border: 1px solid rgba(134,239,172,.3);
  font-family: var(--f-text); font-size: 13.5px; font-weight: 600;
  opacity: .55;
}
.dz__freigabetext {
  flex: 1 1 190px;
  font-family: var(--f-mono); font-size: 11px; line-height: 1.5; color: var(--text-5);
}

.demo.ist-bereit .dz__fuss { opacity: 0; transform: translateY(10px); }
.demo.ist-bereit .dz__fuss.an {
  opacity: 1; transform: none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1);
}


/* ── Schmale Schirme ───────────────────────────────────────────────── */

@media (max-width: 560px) {
  .dz__mailtext { font-size: 14.5px; }
  .dz__feld { grid-template-columns: 1fr; }
  .dz__pruef { grid-column: 1; grid-row: 4; align-self: start; margin-top: 6px; }
}

/* ══════════════════════════════════════════════════════════════════════
   Bühnen der übrigen fünf Bausteine — 16
   ══════════════════════════════════════════════════════════════════════
   Fünf Bilder, bewusst fünf verschiedene. Das Gehäuse (Kopf, Standzeile,
   zwei Knöpfe, Schrittkette, Fortschritt) kommt aus `stil.css` und ist
   überall gleich — wer eine Demo bedienen kann, kann alle bedienen.
   Was auf der Bühne steht, ist je Baustein etwas völlig anderes:

     Terminbuchung        ein Wochenkalender, in dem Zeiten frei werden
     Status-Updates       eine Statusleiste, die weiterrückt
     Angebote & Dokumente ein Angebot, das sich Position für Position baut
     Wissens-Assistent    Quellenkarten, die aufleuchten
     Belegverarbeitung    ein Beleg, auf dem Rahmen gezogen werden

   Alle Elemente werden vom gemeinsamen Kern über `.an` geschaltet
   (`data-ab` im Markup). Ohne JavaScript steht alles sichtbar da.
   ══════════════════════════════════════════════════════════════════════ */

/* Gemeinsames Erscheinen: alles, was der Kern einblendet, kommt gleich
   herein — die Bilder unterscheiden sich, die Bewegung nicht.

   Ausgenommen sind Demos mit `data-eigene-blende`. Das sind die beiden
   ältesten (Startseite und Auftragserfassung): dort ist das Erscheinen
   selbst die Aussage — ein Skelettbalken, der zum Wert wird, eine
   Textstelle, die aufleuchtet, ein Platzhalterkasten, der sagt, was
   gleich dort steht. Legte man dieses gemeinsame Einblenden darüber,
   wäre die Zeile vorher unsichtbar statt platzhaltend, und genau das
   war zweimal die Rückmeldung: Leere liest sich wie ein Fehler.
   Der KERN ist derselbe; nur das Aussehen bleibt bei der Seite. */
.demo.ist-bereit:not([data-eigene-blende]) [data-ab] {
  opacity: 0; transform: translateY(10px);
}
.demo.ist-bereit:not([data-eigene-blende]) [data-ab].an {
  opacity: 1; transform: none;
  transition: opacity .45s ease, transform .45s cubic-bezier(.2,.7,.3,1);
}
.demo.ist-bereit:not([data-eigene-blende]) [data-bis] { display: none; }
.demo.ist-bereit:not([data-eigene-blende]) [data-bis].an { display: block; }


/* ══ 1 · Terminbuchung — der Wochenkalender ═════════════════════════ */

.bk__frage {
  padding: 13px 15px;
  border-left: 2px solid var(--linie-4);
  background: var(--flaeche-3);
  border-radius: var(--ecke-winzig);
  font-family: var(--f-text); font-size: 15px; line-height: 1.6; color: var(--text-2);
}
.bk__frage b { color: var(--text); }

.bk__woche {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px;
  padding: 14px;
}
.bk__tag { display: grid; gap: 6px; align-content: start; }
.bk__tagname {
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-5); text-align: center;
  padding-bottom: 4px; border-bottom: 1px solid var(--linie);
}
.bk__zeit {
  padding: 7px 4px; border-radius: var(--ecke-winzig);
  border: 1px solid var(--linie-2);
  background: var(--flaeche-3);
  font-family: var(--f-mono); font-size: 11.5px; text-align: center;
  color: var(--text-5);
}
/* Belegt: durchgestrichen und ruhig. Frei: kupfern und ansprechbar. */
.bk__zeit--belegt { color: var(--text-5); text-decoration: line-through; opacity: .5; }
.bk__zeit--frei {
  border-color: var(--akzent-dunkel);
  background: rgba(230,160,107,.1);
  color: var(--akzent);
}
.bk__zeit--gebucht {
  border-color: var(--gut);
  background: rgba(134,239,172,.14);
  color: var(--gut);
  box-shadow: 0 0 14px -3px rgba(134,239,172,.5);
}
.bk__bestaetigung {
  margin: 0 14px 14px;
  padding: 12px 14px;
  border: 1px solid var(--linie-3); border-radius: var(--ecke-klein);
  background: var(--flaeche-3);
  font-family: var(--f-text); font-size: 14px; line-height: 1.6; color: var(--text-2);
}
.bk__bestaetigung b { color: var(--text); }


/* ══ 2 · Status-Updates — die Leiste, die weiterrückt ═══════════════ */

.su__auftrag {
  padding: 14px 16px;
  font-family: var(--f-mono); font-size: 12px; color: var(--text-4);
}
.su__auftrag b { color: var(--text-2); font-weight: 500; }

.su__spur {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px;
  padding: 4px 16px 18px;
}
.su__halt { display: grid; gap: 7px; justify-items: center; text-align: center; }
.su__punkt {
  width: 13px; height: 13px; border-radius: 50%;
  background: var(--linie-3);
  box-shadow: 0 0 0 0 rgba(230,160,107,0);
  transition: background .4s ease, box-shadow .4s ease;
}
.su__halt.an .su__punkt {
  background: var(--akzent);
  box-shadow: 0 0 0 5px rgba(230,160,107,.16);
}
.su__wort {
  font-family: var(--f-mono); font-size: 10.5px; line-height: 1.35;
  color: var(--text-5);
}
.su__halt.an .su__wort { color: var(--akzent); }

/* Die Nachricht, die beim Statuswechsel hinausgeht */
.su__nachricht {
  margin: 0 14px 12px;
  border: 1px solid var(--linie-3); border-radius: var(--ecke-klein);
  background: var(--flaeche-3); overflow: hidden;
}
.su__kopf {
  padding: 8px 13px; border-bottom: 1px solid var(--linie-2);
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--text-4);
}
.su__text {
  margin: 0; padding: 13px;
  font-family: var(--f-text); font-size: 14px; line-height: 1.6; color: var(--text-2);
  white-space: pre-line; min-height: 3.4em;
}
.su__sprache {
  display: inline-block; margin-left: 8px;
  padding: 1px 7px; border-radius: 999px;
  background: rgba(230,160,107,.14); color: var(--akzent);
  font-size: 10px;
}


/* ══ 3 · Angebote & Dokumente — das Angebot baut sich ═══════════════ */

.ad__stichworte { display: grid; gap: 8px; padding: 14px 16px; }
.ad__stichwort {
  display: flex; align-items: baseline; gap: 9px;
  font-family: var(--f-text); font-size: 15px; color: var(--text-2);
}
.ad__stichwort::before {
  content: '–'; color: var(--text-5); font-family: var(--f-mono);
}

.ad__blatt { padding: 4px 14px 0; }
.ad__blattkopf {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 10px 0 12px; border-bottom: 1px solid var(--linie-2);
  font-family: var(--f-mono); font-size: 11px; color: var(--text-5);
}
.ad__blattkopf b { font-family: var(--f-kopf); font-size: 15px; color: var(--text); letter-spacing: -.01em; }

.ad__posten {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 0; border-bottom: 1px solid var(--linie);
  font-family: var(--f-text); font-size: 14px; color: var(--text-2);
}
.ad__posten b {
  font-family: var(--f-kopf); font-weight: 600; color: var(--text);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ad__summe {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  margin-top: 4px; padding: 13px 0 4px;
  border-top: 1px solid var(--linie-3);
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-4);
}
.ad__summe b {
  font-family: var(--f-kopf); font-weight: 700; font-size: 26px;
  letter-spacing: -.03em; color: var(--akzent);
  font-variant-numeric: tabular-nums; text-transform: none;
}
.ad__datei {
  display: flex; align-items: center; gap: 10px;
  margin: 14px; padding: 11px 13px;
  border: 1px solid var(--linie-3); border-radius: var(--ecke-klein);
  background: var(--flaeche-3);
  font-family: var(--f-mono); font-size: 12px; color: var(--text-3);
}
.ad__dateisymbol {
  display: grid; place-items: center; flex: none;
  width: 26px; height: 26px; border-radius: var(--ecke-winzig);
  background: rgba(230,160,107,.14); color: var(--akzent);
  font-size: 11px; font-weight: 600;
}


/* ══ 4 · Wissens-Assistent — Quellen leuchten auf ═══════════════════ */

.wa__frage {
  padding: 14px 16px;
  font-family: var(--f-text); font-size: 15.5px; line-height: 1.6; color: var(--text-2);
}
.wa__frage b { color: var(--text); }

.wa__quellen { display: grid; gap: 8px; padding: 12px 14px; }
.wa__quelle {
  display: flex; align-items: baseline; gap: 10px;
  padding: 10px 12px; border-radius: var(--ecke-klein);
  border: 1px solid var(--linie-2); background: var(--flaeche-3);
  font-family: var(--f-mono); font-size: 11.5px; color: var(--text-4);
  transition: border-color .35s ease, background .35s ease;
}
.wa__quelle.an {
  border-color: var(--akzent-dunkel);
  background: rgba(230,160,107,.08);
}
.wa__marke {
  flex: none; padding: 1px 7px; border-radius: 999px;
  background: rgba(230,160,107,.16); color: var(--akzent); font-size: 10px;
}
.wa__quelle b { color: var(--text-2); font-weight: 500; }

/* Eine durchsuchte Unterlage, in der NICHTS stand. Sie bleibt sichtbar
   und wird nicht weggelassen: dass gesucht und nichts gefunden wurde,
   ist bei diesem Baustein die Aussage — nicht der Makel. Deshalb kein
   Rot, sondern nur zurückgenommen, auch wenn sie an der Reihe ist. */
.wa__quelle--leer,
.wa__quelle--leer.an {
  border-style: dashed; border-color: var(--linie-3);
  background: transparent; color: var(--text-5);
}
.wa__quelle--leer b { color: var(--text-4); }
.wa__quelle--leer .wa__marke { background: var(--flaeche-4); color: var(--text-5); }

.wa__antwort {
  margin: 12px 14px 14px;
  border: 1px solid var(--linie-3); border-radius: var(--ecke-klein);
  background: var(--flaeche-3); overflow: hidden;
}
.wa__antwortkopf {
  padding: 8px 13px; border-bottom: 1px solid var(--linie-2);
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--text-4);
}
.wa__text {
  margin: 0; padding: 13px;
  font-family: var(--f-text); font-size: 14.5px; line-height: 1.6; color: var(--text-2);
  white-space: pre-line; min-height: 4.2em;
}
/* Die Fundstelle ist der Kern dieses Bausteins: keine Antwort ohne Beleg. */
.wa__fund {
  padding: 9px 13px; border-top: 1px solid var(--linie);
  background: rgba(230,160,107,.06);
  font-family: var(--f-mono); font-size: 11px; color: var(--akzent);
}


/* ══ 5 · Belegverarbeitung — Rahmen auf dem Beleg ═══════════════════ */

.bv__beleg {
  position: relative;
  margin: 14px; padding: 16px 18px 20px;
  border: 1px solid var(--linie-3); border-radius: var(--ecke-winzig);
  /* Sieht aus wie ein abfotografierter Kassenbon, ohne einer zu sein. */
  background: linear-gradient(174deg, #23282a, #1b1f21);
  box-shadow: 0 14px 30px -22px rgba(0,0,0,.95);
  font-family: var(--f-mono); font-size: 12px; line-height: 1.9; color: var(--text-3);
}
.bv__firma {
  font-family: var(--f-kopf); font-size: 15px; font-weight: 700;
  color: var(--text); letter-spacing: -.01em; margin-bottom: 6px;
}
.bv__zeile { display: flex; justify-content: space-between; gap: 14px; }
.bv__trenner { border-top: 1px dashed var(--linie-4); margin: 8px 0; }

/* Der Rahmen, den das System um einen erkannten Wert zieht. */
.bv__rahmen {
  position: absolute;
  border: 1.5px solid var(--akzent);
  border-radius: 4px;
  background: rgba(230,160,107,.1);
  box-shadow: 0 0 12px -2px rgba(230,160,107,.55);
  pointer-events: none;
}
.bv__rahmen span {
  position: absolute; top: -9px; right: -4px;
  padding: 1px 6px; border-radius: 999px;
  background: var(--akzent); color: #14181a;
  font-family: var(--f-mono); font-size: 9px; font-weight: 600;
  white-space: nowrap;
}

.bv__buchung { padding: 6px 14px 14px; }
.bv__feld {
  display: flex; align-items: baseline; gap: 12px;
  padding: 8px 0; border-bottom: 1px solid var(--linie);
  font-size: 14px;
}
.bv__feld:last-child { border-bottom: 0; }
.bv__feld > span {
  flex: 0 0 96px; font-family: var(--f-mono); font-size: 11px; color: var(--text-5);
}
.bv__feld > b { font-family: var(--f-text); font-weight: 600; color: var(--text); }
.bv__pruefung {
  margin: 4px 14px 14px; padding: 11px 13px;
  border-left: 2px solid var(--gut);
  background: rgba(134,239,172,.07);
  border-radius: var(--ecke-winzig);
  font-family: var(--f-mono); font-size: 11.5px; line-height: 1.6; color: var(--text-3);
}
.bv__pruefung b { color: var(--gut); font-weight: 500; }

/* Wenn die Prüfung etwas ANHÄLT — die Dublette. Bewusst Kupfer und nicht
   Rot: es ist kein Fehler, sondern die Prüfung, die ihre Arbeit tut.
   Der Kasten färbt sich mit: ein grüner Rahmen um „wird nicht gebucht"
   sagt das Gegenteil dessen, was darin steht. Kann ein Browser `:has()`
   nicht, bleibt der Kasten grün — die Aussage steht trotzdem im Text. */
.bv__pruefung b.bv__stopp { color: var(--akzent); }
.bv__pruefung:has(.bv__stopp) {
  border-left-color: var(--akzent);
  background: rgba(230,160,107,.07);
}


/* ── Schmale Schirme ───────────────────────────────────────────────── */

@media (max-width: 560px) {
  .bk__woche { grid-template-columns: repeat(5, 1fr); gap: 4px; padding: 10px; }
  .bk__zeit  { font-size: 10px; padding: 6px 2px; }
  .bk__tagname { font-size: 9px; }
  .su__spur  { grid-template-columns: repeat(2, 1fr); row-gap: 14px; }
  .ad__posten { font-size: 13.5px; }
  .bv__beleg { font-size: 11px; }
  .bv__feld > span { flex-basis: 84px; }
}

/* Quellenhinweis unter den Zahlen: sie stammen von der Seite des
   jeweiligen Bausteins. Wer das nachlesen will, soll sehen, woher. */
.demo__quelle {
  margin: 0;
  font-family: var(--f-mono); font-size: 10.5px; line-height: 1.5;
  color: var(--text-5);
}

/* ══ 6 · Anfragen-Triage — drei Anfragen, drei Wege ═════════════════ */

/* Bewusst NICHT dasselbe Bild wie die Demo auf der Startseite: dort läuft
   eine Mail durch vier Stufen, hier werden drei Anfragen nebeneinander
   sortiert. Die Aussage des Bausteins ist die Verzweigung, nicht der Weg. */

.at__mail {
  padding: 11px 13px;
  border: 1px solid var(--linie-2);
  border-radius: var(--ecke-winzig);
  background: var(--flaeche-3);
}
.at__mail + .at__mail { margin-top: 8px; }

.at__mailkopf {
  display: flex; align-items: baseline; gap: 8px;
  font-family: var(--f-mono); font-size: 11px; color: var(--text-5);
}
.at__von { color: var(--text-3); }
.at__zeit { margin-left: auto; }

.at__betreff {
  margin-top: 5px;
  font-family: var(--f-text); font-size: 14px; line-height: 1.5; color: var(--text-2);
}

/* Die Einordnung erscheint erst, wenn das System gelesen hat. */
.at__marke {
  display: inline-block; margin-top: 8px;
  padding: 3px 8px; border-radius: 999px;
  border: 1px solid var(--linie-2);
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .04em;
  color: var(--text-4);
}
.at__marke--dringend {
  border-color: var(--akzent-dunkel);
  background: rgba(230,160,107,.1); color: var(--akzent);
}
.at__marke--standard {
  border-color: rgba(134,239,172,.4);
  background: rgba(134,239,172,.1); color: var(--gut);
}
.at__marke--mensch {
  border-color: rgba(240,163,163,.4);
  background: rgba(240,163,163,.08); color: var(--schlecht);
}

/* Die drei Wege. Untereinander, nicht nebeneinander — nebeneinander
   wären es bei drei Körben auf dem Handy drei Spalten à 90 px. */
.at__koerbe { display: grid; gap: 10px; padding: 14px; }

.at__korb {
  padding: 11px 13px;
  border: 1px solid var(--linie-2);
  border-radius: var(--ecke-winzig);
  background: var(--flaeche-3);
}
.at__korbkopf {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--text-5);
}
.at__korbkopf i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--linie-4); flex: none;
}
.at__korb--dringend .at__korbkopf { color: var(--akzent); }
.at__korb--dringend .at__korbkopf i { background: var(--akzent); }
.at__korb--standard .at__korbkopf { color: var(--gut); }
.at__korb--standard .at__korbkopf i { background: var(--gut); }

/* Der dritte Korb ist gestrichelt: hier endet die Automatik. */
.at__korb--mensch { border-style: dashed; border-color: var(--linie-4); }
.at__korb--mensch .at__korbkopf { color: var(--text-3); }
.at__korb--mensch .at__korbkopf i { background: transparent; border: 1px solid var(--text-4); }

.at__leer {
  margin-top: 7px;
  font-family: var(--f-mono); font-size: 11.5px; color: var(--text-5); opacity: .6;
}
.at__eintrag {
  margin-top: 7px;
  font-family: var(--f-text); font-size: 14px; line-height: 1.5; color: var(--text);
}
.at__notiz {
  margin-top: 5px;
  font-family: var(--f-mono); font-size: 11.5px; line-height: 1.6; color: var(--text-4);
}
.at__notiz b { color: var(--text-2); font-weight: 500; }

/* Der Schlusssatz gehört zur wichtigsten Regel des Bausteins und steht
   deshalb hervorgehoben, nicht als weitere Zeile im Korb. */
.at__regel {
  margin: 0 14px 14px;
  padding: 11px 13px;
  border-left: 2px solid var(--schlecht);
  border-radius: var(--ecke-winzig);
  background: rgba(240,163,163,.06);
  font-family: var(--f-mono); font-size: 12px; line-height: 1.65; color: var(--text-3);
}
.at__regel b { color: var(--schlecht); font-weight: 500; }

/* Auf dem Handy stehen drei Körbe untereinander statt zwei Spalten
   nebeneinander — ohne engere Kästen wird die Bühne dort anderthalb
   Bildschirme länger als bei den übrigen sechs Bausteinen. */
@media (max-width: 700px) {
  .at__koerbe { gap: 8px; padding: 10px; }
  .at__korb { padding: 9px 11px; }
  .at__eintrag { font-size: 13.5px; }
  .at__notiz { font-size: 11px; line-height: 1.55; }
  .at__regel { margin: 0 10px 10px; padding: 9px 11px; font-size: 11.5px; }
  .at__mail { padding: 9px 11px; }
  .at__betreff { font-size: 13.5px; }
}


/* ── 21 Selbsttest ───────────────────────────────────────────────────
   Die Seite teilt sich das Zwei-Spalten-Gerüst (.rechner) und den
   Ergebniskasten (.ergebnis) mit dem Rechner. Hier steht nur, was dort
   nicht vorkommt: ein ganzer Satz neben dem Schalter statt eines
   Stichworts, die Programm-Eingabe und die Druckfassung.

   OHNE JAVASCRIPT ist der Schalter ausgeblendet und stattdessen steht
   hinter jedem Satz der Link zur Baustein-Seite — kein Schalter, der
   nichts tut. `js-an` setzt selbsttest.js; damit kehrt sich das um.   */

.test { display: flex; flex-direction: column; gap: 2px; }

.test__zeile {
  border-bottom: 1px solid var(--linie);
  padding: 15px 0;
  display: flex; align-items: flex-start; gap: 14px; flex-wrap: wrap;
}

/* Der Satz ist die eigentliche Zeile — er darf umbrechen, der Schalter
   bleibt oben bündig daneben stehen. */
.test__satz {
  flex: 1 1 min(260px, 100%);
  font-size: 17px; line-height: 1.5; color: var(--text-2);
  cursor: pointer;
}
.test__zeile:has(input:checked) .test__satz { color: var(--text); }

.test__schalter { display: none; align-items: flex-start; padding-top: 2px; }
.js-an .test__schalter { display: flex; }

/* Ohne JavaScript bleibt die Seite lesbar, aber ohne Bedienelemente:
   Ergebniskasten, Programm-Eingabe und Einordnung hängen alle am Skript.
   Sichtbar stehen lassen hieße, Knöpfe zu zeigen, die nichts tun. */
body[data-seite="selbsttest"] .ergebnis,
body[data-seite="selbsttest"] .test__software,
body[data-seite="selbsttest"] .test__kopfzahl { display: none; }
.js-an body[data-seite="selbsttest"] .ergebnis,
.js-an body[data-seite="selbsttest"] .test__software,
.js-an body[data-seite="selbsttest"] .test__kopfzahl { display: block; }
.js-an body[data-seite="selbsttest"] .test__ohnejs { display: none; }

.test__ohnejs {
  margin-top: 26px; padding: 18px 20px;
  border: 1px solid var(--linie-3); border-radius: var(--ecke-winzig);
  font-size: 16px; color: var(--text-3); line-height: 1.55;
}

/* ── Fußzeile: Cookie-Hinweis ──
   Steht dort, wo Besucher die Einwilligungsabfrage erwarten. Bewusst als
   positiver Satz mit Begründung statt als bloßes "keine Cookies": Eine
   Verneinung allein weckt die Frage, die sie beantworten soll.
   Eigene Zeile unter Copyright und Rechtlichem, linksbündig. */
.fuss__hinweis {
  flex-basis: 100%;
  line-height: 1.6;
  color: var(--text-5);
}
.fuss__hinweis a { color: var(--text-4); text-decoration: underline; text-underline-offset: 3px; }
.fuss__hinweis a:hover { color: var(--akzent); }

.test__mehr {
  flex-basis: 100%;
  font-family: var(--f-mono); font-size: 13px; color: var(--akzent);
  text-decoration: none;
}
.test__mehr:hover { text-decoration: underline; }
.js-an .test__mehr { display: none; }

/* ── Einordnung und Programme ── */
.test__kopfzahl, .test__software { margin-top: 26px; }
.test__kopfzahl label, .test__software label {
  display: block; margin-bottom: 10px;
  font-size: 16px; color: var(--text-3);
}
.test__fein { font-family: var(--f-mono); font-size: 12px; color: var(--text-5); }

.test__kopfzahl select, .test__software input[type="text"] {
  width: 100%; padding: 12px 14px;
  background: var(--flaeche-2); color: var(--text);
  border: 1px solid var(--linie-3); border-radius: var(--ecke-winzig);
  font-family: inherit; font-size: 16px;
}
.test__kopfzahl select:focus-visible, .test__software input:focus-visible {
  outline: 2px solid var(--akzent); outline-offset: 2px;
}

/* Eingabefeld und Knopf nebeneinander, auf schmalen Schirmen untereinander.
   `min(200px, 100%)` statt fester Mindestbreite — eine harte Mindestbreite
   erzeugt auf kleinen Handys einen waagerechten Scrollbalken. */
.test__eingabezeile { display: flex; gap: 10px; flex-wrap: wrap; }
.test__eingabezeile input[type="text"] { flex: 1 1 min(200px, 100%); }
.test__eingabezeile .btn { flex: 0 0 auto; }

.test__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.test__chip { display: inline-flex; align-items: center; gap: 9px; }
.test__chip--offen { border-style: dashed; color: var(--text-4); }
.test__chipweg {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--text-5); font-size: 14px; line-height: 1;
}
.test__chipweg:hover { color: var(--akzent); }

/* ── Ergebnisblöcke ──
   Mehrere Absätze unter einer Fettzeile; im Rechner gibt es nur Zeilen. */
.ergebnis__block { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--linie-2); }
.ergebnis__block > b { display: block; margin-bottom: 10px; font-size: 17px; color: var(--text); }
.ergebnis__block p { margin-top: 8px; font-size: 16px; color: var(--text-3); line-height: 1.55; }
.ergebnis__block p.klein { color: var(--text-5); }
.ergebnis__block .link-u { display: inline-block; margin-top: 12px; }
.ergebnis__block .ergebnis__teil { margin-top: 10px; }

/* Programmname und Einstufung: nebeneinander, solange beides passt —
   sonst untereinander. Ohne `flex-wrap` schiebt der längere der beiden
   Sätze ("Lässt sich in der Regel direkt anbinden") die ganze Seite über
   den rechten Rand, weil Flex-Kinder von sich aus nicht umbrechen. */
.test__stufezeile { flex-wrap: wrap; gap: 2px 14px; }
.test__programm { font-weight: 600; color: var(--text-2); }
/* `white-space: normal` ist hier Pflicht, nicht Geschmack: Für die Zeile im
   Rechner gilt `.ergebnis__teil span:last-child { white-space: nowrap }`, weil
   dort rechts ein kurzer Wert steht ("2,4 Std"). Hier steht ein halber Satz —
   ohne Gegenregel schiebt "Lässt sich in der Regel direkt anbinden" (374 px)
   die Seite auf dem Handy über den rechten Rand.

   Der lange Selektor ist Absicht: Die Regel dort hat durch `:last-child` die
   höhere Spezifität und gewinnt sonst, egal an welcher Stelle der Datei diese
   hier steht. Sich auf die Reihenfolge zu verlassen wäre genau die Falle. */
.test__stufe { color: var(--akzent); flex: 0 1 auto; min-width: 0; }
.ergebnis__teil.test__stufezeile span.test__stufe { white-space: normal; }

@media (max-width: 700px) {
  .test__satz { font-size: 16px; }
  .test__zeile { gap: 11px; padding: 13px 0; }
}


/* ── 22 Druckfassung ─────────────────────────────────────────────────
   Gedacht für den Selbsttest als Einseiter zum Mitgeben (WFG-Termin,
   Kundenbesuch). Aus der dunklen Bildschirmseite wird schwarz auf weiß;
   alles Bedienbare fällt weg und die Sätze bekommen ein Kästchen zum
   Ankreuzen. Bewusst dieselbe Seite statt eines zweiten Dokuments —
   ein zweites Dokument läuft irgendwann auseinander.                  */
@media print {
  :root { --text: #000; --text-2: #000; --text-3: #222; --text-4: #444; --text-5: #555; }

  body { background: #fff !important; color: #000 !important; }

  .kopf, .fuss, .bot, .bot-auf, .fortschritt, .sprung,
  .test__schalter, .test__mehr, .ergebnis, .uebergabe .btn,
  .test__eingabezeile .btn, .aufklapp { display: none !important; }

  main, .sec, .wrap { padding: 0 !important; margin: 0 !important; max-width: 100% !important; }
  .rechner { display: block !important; }

  /* Schriftgrößen sind hier auf "passt auf ein Blatt" gerechnet, nicht auf
     Bildschirmoptik: Bei A4-Breite (182 mm ≈ 688 px) brechen die Sätze anders
     um als am Monitor, der Inhalt war damit 1106 px hoch bei 1017 px Platz. */
  h1 { font-size: 21pt !important; color: #000 !important; }
  .fuehrung { font-size: 10pt !important; color: #222 !important; }
  .eyebrow { color: #666 !important; }

  /* Kästchen zum Ankreuzen — auf Papier ersetzt es den Schalter.
     Der Abstand ist knapp gewählt: Mit 9pt ergab der Ausdruck 1019 px bei
     1010 px nutzbarer A4-Höhe — neun Pixel, die eine zweite Seite erzwangen. */
  .test__zeile { border-bottom: 1px solid #ccc; padding: 7pt 0; page-break-inside: avoid; }
  .fuehrung { margin-top: 6pt !important; }
  .test__satz { font-size: 10pt !important; line-height: 1.4 !important; color: #000 !important; }
  .test__satz::before {
    content: ""; display: inline-block; vertical-align: -1pt;
    width: 11pt; height: 11pt; margin-right: 9pt;
    border: 1.2pt solid #000;
  }

  /* Aus dem Eingabefeld werden Schreiblinien. */
  .test__software input[type="text"], .test__kopfzahl select {
    border: 0 !important; border-bottom: 1pt solid #000 !important;
    border-radius: 0 !important; background: none !important;
    color: #000 !important; padding-left: 0 !important;
  }
  .test__software::after {
    content: ""; display: block;
    border-bottom: 1pt solid #000; margin-top: 14pt;
  }
  .test__kopfzahl, .test__software { margin-top: 14pt !important; }
  .test__kopfzahl label, .test__software label { margin-bottom: 4pt !important; font-size: 9.5pt !important; }
  .test__chips, .test__fein { display: none !important; }

  .uebergabe { border: 0 !important; padding: 10pt 0 0 !important; page-break-inside: avoid; }
  .uebergabe p { font-size: 9pt !important; line-height: 1.4 !important; color: #000 !important; }
  .uebergabe::after {
    content: "rivermatic.be/selbsttest · Rivermatic · Walhorn, Ostbelgien";
    display: block; margin-top: 8pt;
    font-size: 9pt; color: #444;
  }

  @page { margin: 14mm; }
}


/* ── 13 Hero-Fluss ────────────────────────────────────────────────────
   Die Animation im Kopfbereich: links kommt eine Anfrage herein, in der
   Mitte wird sie verstanden, rechts kommt ein fertiger Vorgang heraus.
   Gehoert zu js/hero-fluss.js; eingebunden wird sie als
   <rm-fluss art="triage"> bzw. <rm-fluss art="termin">.

   Zwei Fassungen, beide hier:
     - Querformat (ab 700px): Anfrage links, Kern in der Mitte, Ergebnis
       rechts. Eine feste Buehne von 760x600, die sich per `zoom` auf
       ihren Platz rechnet.
     - Hochformat (bis 700px): dieselben Karten im Zickzack untereinander,
       Kern dazwischen, Buehne 340x640. Bewusst KEIN blosses Stapeln auf
       volle Breite — dann waeren es nur noch drei grosse Kaesten und der
       Weg, um den es geht, waere nicht mehr zu sehen.               */

/* Kopfbereich mit Buehne */
.nhero { position: relative; overflow: hidden; border-bottom: 1px solid var(--linie); }

/* Punktraster statt Wellenlinien: die Wellen bleiben das Markenzeichen,
   hier tragen sie nur nicht, weil die Buehne selbst schon Bewegung hat. */
.nhero__raster {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(236,239,240,.14) 1px, transparent 1.5px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(ellipse 70% 80% at 70% 45%, #000 10%, transparent 70%);
          mask-image: radial-gradient(ellipse 70% 80% at 70% 45%, #000 10%, transparent 70%);
}
.nhero__schein {
  position: absolute; right: -10%; bottom: -40%; width: 62%; aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle, rgba(230,160,107,.20), transparent 65%);
  filter: blur(50px); pointer-events: none;
}
.nhero__innen {
  position: relative; width: 100%; max-width: 1420px; margin: 0 auto;
  padding: clamp(28px,3.4vw,48px) var(--rand) clamp(32px,4vw,52px);
  display: grid; grid-template-columns: 1fr; gap: clamp(20px,3vw,40px); align-items: center;
}
/* Zwei Spalten erst ab 980px, und die Buehne bekommt etwas mehr Platz als
   der Text: sie skaliert sich auf den kleineren der beiden Werte
   (Breite/780, Hoehe/620) herunter — unter etwa 700px Breite wird die
   Schrift in den Karten zu klein. */
@media (min-width: 980px) {
  .nhero__innen { grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); }
}
.nhero__text { display: flex; flex-direction: column; gap: clamp(14px,1.8vw,22px); max-width: 640px; }
.nhero__marke {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-4);
}
.nhero__lebt { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--akzent); animation: nhero-puls 2.4s infinite; }
@keyframes nhero-puls { 0%,100% { box-shadow: 0 0 0 0 rgba(230,160,107,.5); } 70% { box-shadow: 0 0 0 14px rgba(230,160,107,0); } }
/* Deutlich kleiner als bei einer einspaltigen Ueberschrift (dort bis
   88px): neben der Buehne teilt sich die Zeile den Platz, und der ganze
   Kopfbereich soll auf einem 900px hohen Bildschirm stehen. */
.nhero h1 { font-size: clamp(34px,3.5vw,52px); line-height: 1.06; }
.nhero h1 span { color: var(--akzent); }
.nhero__lead { font-size: clamp(16px,1.2vw,18px); line-height: 1.55; color: var(--text-3); max-width: 52ch; }
.nhero__knoepfe { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.nhero__fuss { font-size: 14px; color: var(--text-4); margin: 0; }
.nhero__buehne {
  position: relative; min-width: 0;
  height: min(620px, calc(100vh - 250px)); min-height: 460px;
  pointer-events: none;
}
.nhero__marker {
  position: absolute; right: var(--rand); bottom: 16px;
  display: flex; align-items: center; gap: 9px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--text-5);
}
.nhero__marker i { width: 6px; height: 6px; border-radius: 50%; background: var(--akzent); font-style: normal; }

/* ── Die Buehne ──────────────────────────────────────────────────────── */
rm-fluss { display: block; position: absolute; inset: 0; }

/* container-type MUSS `size` sein, nicht `inline-size`: bei inline-size
   kennt der Container nur seine Breite, und `100cqh` unten faellt still
   auf die Fensterhoehe zurueck. Die Buehne rechnete sich dann auf den
   Hoechstwert hoch und ragte unten aus ihrem Rahmen heraus. */
.rmf { position: absolute; inset: 0; container-type: size; display: grid; place-items: center;
       font-family: var(--f-text); color: var(--text); }
/* Das `px` in den Nennern ist kein Schreibfehler: Laenge geteilt durch
   Laenge ergibt eine Zahl — genau das braucht `zoom`. */
.rmf-stage { position: relative; width: 760px; height: 600px; zoom: min(1.2, 100cqw/780px, 100cqh/620px); }

.rmf-bgc  { position: absolute; left: 50%; top: 276px; width: 520px; height: 520px; transform: translate(-50%,-50%);
            border-radius: 50%; border: 1px dashed rgba(236,239,240,.09); }
.rmf-bgc2 { position: absolute; left: 50%; top: 276px; width: 340px; height: 340px; transform: translate(-50%,-50%);
            border-radius: 50%; border: 1px solid rgba(236,239,240,.06); }

.rmf-card {
  position: absolute; border-radius: var(--ecke);
  background-image: var(--glas), linear-gradient(160deg,#1e2426,#171b1d);
  border: 1px solid var(--glas-rand);
  box-shadow: var(--glas-licht), 0 24px 48px -20px rgba(0,0,0,.75), 0 60px 90px -50px rgba(230,160,107,.22);
  padding: 17px; display: flex; flex-direction: column; gap: 10px; opacity: 0; will-change: transform, opacity;
}
.rmf-k { font-family: var(--f-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-5); }

/* Die Anfrage */
.rmf-a { left: 0; top: 132px; width: 282px; }
.rmf-hd { display: flex; gap: 10px; align-items: center; }
.rmf-av { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center;
          font-size: 11px; font-weight: 600; color: var(--text-2);
          background: linear-gradient(135deg, rgba(236,239,240,.22), rgba(236,239,240,.07)); }
.rmf-von { font-size: 13px; font-weight: 600; line-height: 1.2; }
.rmf-weg { font-size: 11px; color: var(--text-5); }
.rmf-betreff { font-family: var(--f-kopf); font-weight: 700; font-size: 17px; letter-spacing: -.02em; line-height: 1.15; }
.rmf-body { font-size: 13px; line-height: 1.55; color: var(--text-3); position: relative; }
/* Die Markierung waechst von links nach rechts auf — das ist der Moment,
   in dem sichtbar wird, WAS gelesen wurde. */
.rmf-mark {
  position: relative; color: var(--text); border-radius: 4px; padding: 0 3px; margin: 0 -3px;
  background: linear-gradient(rgba(230,160,107,.30), rgba(230,160,107,.30)) no-repeat;
  background-size: 0% 100%; transition: background-size .35s cubic-bezier(.16,1,.3,1);
}
.rmf-mark.on { background-size: 100% 100%; }
.rmf-scan {
  position: absolute; left: -17px; right: -17px; height: 2px; top: 0; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--akzent), transparent);
  filter: drop-shadow(0 0 8px var(--akzent-schein));
}

/* Der Kern */
.rmf-core { position: absolute; left: 320px; top: 216px; width: 120px; height: 120px; display: grid; place-items: center; }
.rmf-ring {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--akzent) 0 22%, transparent 30% 48%, var(--akzent) 55% 72%, transparent 80%);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 3px), #000 calc(100% - 2px));
  filter: drop-shadow(0 0 10px rgba(230,160,107,.55));
}
.rmf-ring2 { position: absolute; inset: 14px; border-radius: 50%; border: 1px solid rgba(236,239,240,.12); }
.rmf-glow {
  position: absolute; inset: -70px; border-radius: 50%; opacity: .65; filter: blur(6px);
  background: radial-gradient(circle, rgba(230,160,107,.34), rgba(230,160,107,.09) 40%, transparent 68%);
}
.rmf-ripple { position: absolute; inset: 0; border-radius: 50%; border: 2px solid var(--akzent); opacity: 0; }
.rmf-logo {
  position: relative; width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(160deg, var(--akzent-hell), var(--akzent));
  box-shadow: inset 0 0 0 1px rgba(20,24,26,.12), 0 6px 18px -6px var(--akzent);
}
.rmf-status {
  position: absolute; top: 100%; margin-top: 9px; white-space: nowrap;
  font-family: var(--f-mono); font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--akzent);
}
/* Stationsanzeige — nur in der Filmfassung sichtbar, wo immer nur eine
   Station im Bild steht. Im Nebeneinander sieht man ohnehin alle drei. */
.rmf-punkte { display: none; position: absolute; top: 100%; margin-top: 26px; gap: 6px; }
.rmf-punkte i { width: 5px; height: 5px; border-radius: 50%; background: var(--linie-4); transition: background .3s, transform .3s; }
.rmf-punkte i.on { background: var(--akzent); transform: scale(1.5); }

/* Gemeinsame Zeilen (Vorgang, Bestaetigung) */
.rmf-row {
  display: flex; justify-content: space-between; gap: 10px; font-size: 11.5px; padding: 6px 0;
  border-bottom: 1px solid rgba(236,239,240,.07); opacity: 0; transform: translateY(6px);
}
.rmf-row:last-child { border-bottom: 0; }
.rmf-row b { font-weight: 600; text-align: right; }
.rmf-row span { color: var(--text-5); }
.rmf-dot {
  width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: rgba(230,160,107,.16); border: 1px solid rgba(230,160,107,.38); color: var(--akzent); font-size: 15px;
}

/* Der fliegende Schnipsel */
.rmf-chip {
  position: absolute; padding: 4px 10px; border-radius: 999px; z-index: 5; white-space: nowrap;
  background: var(--akzent); color: #14181a;
  font-family: var(--f-mono); font-size: 10px; letter-spacing: .06em;
  box-shadow: 0 0 22px rgba(230,160,107,.7), 0 0 0 3px rgba(230,160,107,.22);
}

/* Die Wege. Sie werden im Skript aus den echten Kartenkanten gerechnet,
   nicht fest eingetragen — nur so treffen sie ihre Ziele auch im
   Hochformat, wo die Karten ganz anders stehen. */
.rmf-svg { position: absolute; inset: 0; overflow: visible; }
.rmf-path { fill: none; stroke: rgba(236,239,240,.13); stroke-width: 1.5; stroke-dasharray: 3 5; }
.rmf-pulse {
  fill: none; stroke: var(--akzent); stroke-width: 2.5; stroke-linecap: round;
  stroke-dasharray: 70 900; stroke-dashoffset: 970; opacity: 0;
  filter: drop-shadow(0 0 6px var(--akzent-schein));
}

/* Die Bilanz unten links — nicht ueber die ganze Breite: rechts stehen
   die Ergebniskarten, dort lief die Zeile in die Karte hinein. */
.rmf-foot {
  position: absolute; left: 0; bottom: 16px; width: 270px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-5);
}
.rmf-bilanz { display: flex; align-items: baseline; gap: 8px; }
.rmf-foot b { font-family: var(--f-kopf); font-weight: 700; font-size: 26px; letter-spacing: -.03em;
              color: var(--text); text-transform: none; }
.rmf-foot s { font-size: 14px; color: var(--text-5); text-decoration-color: var(--akzent); }

/* Anhalten/Weiter (WCAG 2.2.2) - oben rechts, dort liegt in keiner der
   drei Fassungen (quer, hoch, Film) eine Karte. */
.rmf-halt {
  position: absolute; top: 8px; right: 8px; z-index: 6;
  /* Die Buehne ist klick-durchlaessig (pointer-events: none) - der Knopf
     muss das ausdruecklich aufheben, sonst ist er sichtbar, aber tot. */
  pointer-events: auto;
  font-family: var(--f-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--text-4); background: rgba(21,24,26,.72);
  border: 1px solid var(--linie-4); border-radius: 999px; padding: 6px 12px; cursor: pointer;
}
.rmf-halt:hover { color: var(--text); border-color: var(--akzent); }
.rmf-halt:focus-visible { outline: 2px solid var(--akzent); outline-offset: 2px; }

/* ── Anfragen-Triage: Vorgang, Antwort, Weiterleitung ────────────────── */
rm-fluss[art="triage"] .rmf-b { left: 292px; top: 380px; width: 188px; padding: 14px; gap: 0; }
rm-fluss[art="triage"] .rmf-c { left: 494px; top: 108px; width: 266px; }
rm-fluss[art="triage"] .rmf-d { left: 494px; top: 384px; width: 266px; flex-direction: row; align-items: center; gap: 12px; padding: 14px 16px; }
.rmf-txt { font-size: 13px; line-height: 1.55; min-height: 84px; color: var(--text-2); }
.rmf-cur { display: inline-block; width: 2px; height: 13px; background: var(--akzent); vertical-align: -2px; margin-left: 1px;
           animation: rmf-blink 1s steps(2) infinite; }
@keyframes rmf-blink { to { opacity: 0; } }
.rmf-btn {
  align-self: flex-start; height: 30px; padding: 0 13px; border-radius: 999px;
  background: var(--akzent); color: #14181a; font-size: 12px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 6px; opacity: 0; transform: translateY(6px);
}
.rmf-hint { font-size: 11px; color: var(--text-5); }
.rmf-tk { display: flex; flex-direction: column; gap: 2px; font-size: 12px; }
.rmf-tk b { font-size: 13px; }
.rmf-tk .rmf-r1 { color: var(--text-5); }
.rmf-r2 { margin-left: auto; font-family: var(--f-mono); font-size: 11px; color: var(--akzent); }
/* Im Querformat traegt die eigene Karte rechts unten die Weiterleitung;
   im Hochformat gibt es die nicht, dort erscheint diese Zeile. */
.rmf-weiter { display: none; font-size: 11.5px; color: var(--text-4); border-top: 1px solid rgba(236,239,240,.07); padding-top: 9px; }
.rmf-weiter b { color: var(--text-2); }

/* ── Terminbuchung: Kalender und Buchung ─────────────────────────────── */
/* Alle Bausteine ausser der Triage nutzen dasselbe Grundbild: Ergebnis
   rechts oben, Abschluss rechts unten. Die Triage hat drei Ergebnisse
   (Vorgang, Antwort, Weiterleitung) und deshalb ein eigenes Layout. */
rm-fluss:not([art="triage"]) .rmf-b { left: 458px; top: 92px; width: 302px; }
rm-fluss:not([art="triage"]) .rmf-c { left: 458px; top: 388px; width: 302px; gap: 10px; }
.rmf-woche { display: grid; grid-template-columns: repeat(5,1fr); gap: 6px; }
.rmf-tag { display: flex; flex-direction: column; gap: 5px; }
.rmf-tagname { font-family: var(--f-mono); font-size: 11px; letter-spacing: .1em; color: var(--text-5); text-align: center; }
.rmf-zeit {
  font-family: var(--f-mono); font-size: 11.5px; text-align: center; padding: 6px 0; border-radius: var(--ecke-winzig);
  border: 1px solid var(--linie-3); color: var(--text-4); opacity: 0; transform: translateY(4px);
}
/* Belegt ist NICHT rot, sondern nur zurueckgenommen: es ist kein Fehler,
   sondern der Normalfall. Frei traegt die Kupferkante, gewaehlt die
   volle Flaeche — drei klar unterscheidbare Stufen. */
.rmf-zeit--belegt { background: rgba(236,239,240,.03); color: var(--text-5); text-decoration: line-through; border-color: var(--linie-2); }
.rmf-zeit--frei   { border-color: rgba(230,160,107,.45); color: var(--akzent-hell); }
.rmf-zeit--wahl   { background: var(--akzent); border-color: var(--akzent); color: #14181a; font-weight: 500; }
.rmf-geprueft {
  display: flex; flex-wrap: wrap; gap: 4px 10px; font-family: var(--f-mono); font-size: 9.5px;
  letter-spacing: .06em; color: var(--text-5); border-top: 1px solid rgba(236,239,240,.07); padding-top: 9px;
}
.rmf-geprueft b { color: var(--akzent); font-weight: 400; }
.rmf-bkopf { display: flex; align-items: center; gap: 12px; }

/* Summenzeile (Angebote): das, worauf beim Angebot alle zuerst schauen. */
.rmf-summe {
  display: flex; justify-content: space-between; align-items: baseline; gap: 10px;
  margin-top: 8px; padding-top: 9px; border-top: 1px solid rgba(236,239,240,.12);
  font-size: 11.5px; color: var(--text-5); opacity: 0;
}
.rmf-summe b { font-family: var(--f-kopf); font-weight: 700; font-size: 17px; letter-spacing: -.02em; color: var(--text); }

/* Zitatzeile (Auftragserfassung): jedes Feld zeigt, woher es stammt. */
.rmf-row--zitat b { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.rmf-zitat { font-style: normal; font-size: 9.5px; color: var(--text-5); font-weight: 400; }

/* Quellzeile (Wissens-Assistent): keine Antwort ohne Herkunft. */
.rmf-quellzeile { font-size: 10.5px; color: var(--text-5); border-top: 1px solid rgba(236,239,240,.07); padding-top: 9px; }
.rmf-quellzeile b { color: var(--text-3); font-weight: 400; }

/* Stufen (Status-Updates): erledigt, jetzt, kommt noch. */
.rmf-stufen { display: flex; flex-direction: column; }
.rmf-stufe {
  display: flex; align-items: center; gap: 10px; font-size: 11.5px; color: var(--text-5);
  padding: 6px 0; opacity: 0; transform: translateY(6px);
}
.rmf-stufe i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--linie-4); flex: none; }
.rmf-stufe.fertig i { background: var(--akzent-dunkel); border-color: var(--akzent-dunkel); }
.rmf-stufe.jetzt { color: var(--text); font-weight: 600; }
.rmf-stufe.jetzt i { background: var(--akzent); border-color: var(--akzent); }
.rmf-btermin { font-family: var(--f-kopf); font-weight: 700; font-size: 19px; letter-spacing: -.02em; }
.rmf-bwas { font-size: 12px; color: var(--text-4); }

/* ── Hochformat: dieselbe Buehne im Zickzack ─────────────────────────── */
@media (max-width: 700px) {
  .nhero__buehne { height: auto; min-height: 0; }
  .nhero__marker { position: static; margin-top: 22px; }
  rm-fluss { position: static; inset: auto; }
  .rmf { position: relative; display: block; container-type: inline-size; }
  /* Feste Buehne im Hochformat; sie rechnet sich nur noch ueber die
     Breite herunter, die Hoehe steht fest. Die 810px sind gemessen und
     nicht geschaetzt: die hoechste Karte ist der Antwortentwurf mit
     rund 240px, und darunter braucht die Bilanz noch ihren Platz —
     mit 646px lag sie am 02.09.2026 quer ueber der Antwortkarte.
     Gemessen: die Antwortkarte endet bei 739, die Bilanz braucht 74 —
     850 laesst dazwischen noch Luft fuer einen laengeren Entwurf. */
  .rmf-stage { width: 340px; height: 850px; zoom: min(1, 100cqw/344px); margin: 0 auto; }

  .rmf-a { left: 0;  top: 0;    width: 252px; }
  .rmf-core { left: 128px; top: 200px; width: 84px; height: 84px; }
  .rmf-ring2 { inset: 10px; }
  .rmf-logo { width: 30px; height: 30px; border-radius: 9px; }
  /* Zickzack: links, rechts, links. Der Versatz ist der ganze Punkt —
     nur so bleibt sichtbar, dass etwas einen Weg nimmt, statt dass drei
     Kaesten untereinander stehen.
     Bewusst OHNE art-Angabe: mit `[art="triage"], [art="termin"]` galten
     die Regeln nur fuer die ersten beiden Bausteine, und die spaeter
     dazugekommenen behielten am Handy ihre Position aus dem Querformat
     (gemessen 03.09.2026: fuenf Seiten mit Karten ausserhalb der Buehne).
     Das `rm-fluss[art]` davor ist noetig, nicht schmueckend: die
     Querformat-Regel heisst `rm-fluss:not([art="triage"]) .rmf-b` und ist
     damit staerker als ein blosses `.rmf-b`. Ohne gleiche Staerke behielt
     die Karte hier ihr `top` von oben und wurde zwischen zwei
     widersprechenden Angaben zerquetscht (27px statt 141px). */
  rm-fluss[art] .rmf-b { left: 88px; top: 320px; width: 252px; padding: 14px; }
  rm-fluss[art] .rmf-c { left: 0;  top: 520px; width: 252px; }
  /* Die eigene Weiterleitungskarte hat hier keinen Platz — ihre Aussage
     steht als Zeile in der Antwortkarte. */
  rm-fluss[art="triage"] .rmf-d { display: none; }
  .rmf-weiter { display: block; }

  .rmf-card { padding: 13px; gap: 8px; border-radius: var(--ecke-klein); }
  .rmf-betreff { font-size: 15px; }
  .rmf-body, .rmf-txt { font-size: 12px; }
  .rmf-txt { min-height: 62px; }
  .rmf-row { font-size: 11px; padding: 5px 0; }
  /* Vier Zeilen sind hier die Grenze — die fuenfte wuerde die naechste
     Karte anschieben. */
  .rmf-b .rmf-row:nth-child(n+5) { display: none; }
  /* Felder mit Zitat brauchen doppelt so viel Platz. Lieber ein Feld
     weniger als die Zitate weglassen: dass jedes Feld seine Herkunft
     nennt, ist bei diesem Baustein der Punkt. */
  .rmf-b .rmf-row--zitat:nth-child(n+4) { display: none; }
  .rmf-zeit { font-size: 10px; padding: 5px 0; }
  .rmf-tagname { font-size: 10px; }
  .rmf-woche { gap: 4px; }
  .rmf-geprueft { font-size: 9px; gap: 3px 8px; }
  .rmf-hint { display: none; }
  .rmf-foot { width: 100%; bottom: 0; }
  .rmf-foot b { font-size: 22px; }

  /* ── Filmfassung: eine Station zur Zeit ────────────────────────────
     Alle Karten stehen am selben Platz und loesen einander ab; der Kern
     sitzt darunter als Taktgeber mit drei Punkten. Das ist die
     kuerzeste der drei Fassungen, kostet aber den Ueberblick: man sieht
     den Weg nur noch nacheinander, nicht mehr als Ganzes.
     Die Standzeit je Station steht im Skript (TAKT.stand).           */
  /* Zugeschnitten auf die hoechste Karte (220) plus Kern darunter.
     Die Karten haengen unten buendig ueber dem Kern (bottom statt top):
     sie sind zwischen 150 und 220 hoch, und bei fester Oberkante klaffte
     je nach Station ein Loch von bis zu 70px zwischen Karte und Kern. */
  [data-fluss="film"] .rmf-stage { height: 386px; }
  [data-fluss="film"] .rmf-punkte { display: flex; }
  /* Im Film ist die Karte breiter und hat mehr Platz nach oben — hier
     passt die fuenfte Zeile wieder hinein. Bei der Belegverarbeitung
     ist das die Doppelt-Pruefung, also gerade das Verkaufsargument. */
  [data-fluss="film"] rm-fluss[art] .rmf-b .rmf-row:nth-child(n+5) { display: flex; }
  [data-fluss="film"] rm-fluss[art] .rmf-svg { display: none; }
  [data-fluss="film"] .rmf-bgc, [data-fluss="film"] .rmf-bgc2 { display: none; }
  /* Der Abstand nach unten muss den Kern freihalten: der sitzt bei 236
     und bringt einen weichen Schein mit. Mit 116 endete die Karte genau
     auf seiner Oberkante und lag optisch im Ring drin. */
  [data-fluss="film"] rm-fluss[art] .rmf-card,
  [data-fluss="film"] rm-fluss[art] .rmf-b,
  [data-fluss="film"] rm-fluss[art] .rmf-c {
    left: 0; top: auto; bottom: 150px; width: 340px;
  }
  /* 270, nicht 236: die Karte endet bei 236 (Buehne 386 minus Abstand
     150). Buehne und Abstand gemeinsam zu erhoehen half nichts — die
     Unterkante blieb genau auf dem Ring. Jetzt liegen 34px dazwischen,
     in denen der weiche Schein des Kerns sichtbar wird. */
  [data-fluss="film"] rm-fluss[art] .rmf-core { left: 50%; top: 270px; margin-left: -28px; width: 56px; height: 56px; }
  [data-fluss="film"] .rmf-ring2 { inset: 7px; }
  [data-fluss="film"] .rmf-logo { width: 22px; height: 22px; border-radius: 6px; }
  [data-fluss="film"] rm-fluss[art] .rmf-foot { display: none; }
  /* Die Weiterleitung braucht hier keine eigene Karte — sie steht als
     Zeile in der Antwort, wie in der Kurzfassung auch. */
  [data-fluss="film"] rm-fluss[art="triage"] .rmf-d { display: none; }
  [data-fluss="film"] .rmf-weiter { display: block; }
}

/* Die Ergebniszeile der Kalenderkarte: normal unsichtbar, nur in der
   Kurzfassung im Hochformat sichtbar (Regel oben). */
.rmf-ergebnis { display: none; font-size: 11.5px; color: var(--text-4);
                border-top: 1px solid rgba(236,239,240,.07); padding-top: 9px; }
.rmf-ergebnis b { color: var(--text-2); font-family: var(--f-kopf); font-size: 14px; letter-spacing: -.02em; }