/*
Theme Name: Zumsande Buchhaltung
Theme URI: https://luarmedia.de/
Description: Zumsande Buchhaltung — die zweite Marke von Sabine zum Sande. Eigenstaendiges Custom-Theme, kein Ableger des Expertin-Themes: geteilt wird Engineering, nicht Gestaltung. Betreut von LuarMedia.
Author: LuarMedia
Author URI: https://luarmedia.de/
Version: 5.5.9
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 8.0
License: GPLv2 or later
Text Domain: zumsande-buchhaltung
*/

/* =====================================================================
   SCHRIFT

   Selbst gehostet statt ueber Google Fonts. Drei Gruende, alle drei echt:
   ein render-blockierender Fremd-Stylesheet und ein zweiter Roundtrip zu
   fonts.gstatic.com entfallen (das war nach dem Creative Pass die einzige
   messbare Verschlechterung: LCP mobil 2,8 s, Lighthouse-Performance 95
   statt 100); es verlaesst kein Besucher-IP mehr die Seite, wodurch der
   entsprechende Abschnitt der Datenschutzerklaerung ersatzlos entfaellt;
   und eine Abhaengigkeit von einem Dritten weniger.

   Variabler Schnitt 400-700, Latin-Subset. Das Subset deckt den deutschen
   Zeichensatz vollstaendig ab: Umlaute und ss liegen in U+00xx, die
   typografischen Anfuehrungszeichen und der Geviertstrich in U+2000-206F,
   das Paragrafenzeichen in U+00A7.

   Lizenz: SIL Open Font License 1.1, siehe assets/fonts/OFL.txt.
   ================================================================== */
@font-face{
  font-family: "Familjen Grotesk";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/familjen-grotesk-latin.woff2") format("woff2");
}
@font-face{
  font-family: "Familjen Grotesk";
  font-style: italic;
  font-weight: 400 700;
  font-display: swap;
  src: url("assets/fonts/familjen-grotesk-latin-italic.woff2") format("woff2");
}

/* =====================================================================
   TOKENS

   Creative Pass 2. Die erste Fassung hatte eine durchgehende Designidee
   ("die Zeile, die einrastet") und hat sie in jedem Abschnitt vorgefuehrt:
   nummerierte Sektionskoepfe, Serif-Display, Kontozeile im Hero,
   Ergebnislinien-Grafik, dunkles Kontrastband. Sauber gebaut, aber zu
   sichtbar konstruiert.

   Diese Fassung nimmt die Metapher raus und laesst Inhalt, Rhythmus und
   Farbflaeche die Arbeit machen. Was vom Linienmotiv bleibt, steckt nur
   noch im Markenzeichen.
   ================================================================== */
:root{
  /* Flaechen */
  --paper:      #FBFAF7;
  --paper-2:    #F2EFE7;
  /* Echtes Weiss fuer aufliegende Flaechen. Bis V3.1 gab es das nicht - die
     Seite kannte nur Papiertoene, und dadurch lag nichts auf irgendetwas.
     Genau das machte sie flach. */
  --white:      #FFFFFF;
  /* Sehr helles Gruenfeld fuer die Metapher-Buehne. */
  --green-mist: #EAF4EE;
  /* V3: Die drei Flaechen lagen vorher alle innerhalb von 7 % Helligkeit
     (#FBFAF7 / #F4F2EC / #EAF0E9). Auf dem Schirm war das keine Gliederung,
     sondern ein Hauch. Ein Band, das man nicht sieht, gliedert nicht - es
     kostet nur Code. Jetzt liegen die Stufen weit genug auseinander, um als
     Abschnittsgrenze zu wirken, und bleiben trotzdem hell.
     Kontrast --ink auf --green-pale: 12.3:1. */
  --green-pale: #E0EADF;

  /* Text. Werte gegen --paper geprueft (Kontrast im Kommentar) */
  --ink:        #171B15;                 /* 14.9:1 */
  --ink-2:      rgba(23,27,21,0.80);     /*  8.9:1 */
  --ink-3:      rgba(23,27,21,0.68);     /*  5.9:1 */

  /* Identisch mit --accent von Seite A (dort Zeile 90). Das ist der eine
     Wert, der beide Marken verbindet, und er wird auf keiner der beiden
     Seiten variiert. Die gelieferte Logodatei liegt mit #0F915E minimal
     daneben; sie wird nicht angefasst, alle CSS-Flaechen nutzen #0C8F5C. */
  --green:      #0C8F5C;                 /*  3.9:1 — Flaechen und Linien, keine kleine Schrift */
  --green-deep: #0B4F38;                 /*  9.2:1 — Links, Buttons, Textakzente */
  --green-ink:  #F4FAF6;

  --rule:       rgba(23,27,21,0.13);
  --rule-strong:rgba(23,27,21,0.24);
  --warn:       #A33418;                 /*  6.4:1 */

  /* Mass. Container schmaler als vorher (1180 -> 1080) und Textspalte
     breiter (660 -> 700): auf 1440px soll die Seite nicht zu einem
     schmalen Band mit riesigen Leerflaechen daneben werden. */
  --maxw:       1080px;
  --maxw-text:  700px;
  --gutter:     20px;
  --radius:     4px;
  --radius-sm:  3px;

  /* Abstaende bewusst kleiner als in Fassung 1 (dort bis 152px). Grosse
     Weissraeume sind das schnellste Signal fuer "Praesentationsseite". */
  /* V4: von 96 auf 116 px angehoben. Die frueheren Durchgaenge hatten die
     Abstaende bewusst klein gehalten, damit die Seite nicht nach
     Praesentation aussieht. Mit einer Leitform, die Flaeche braucht, kippt
     diese Rechnung: zu enge Abstaende lassen die Seite schwer wirken, nicht
     sachlich. */
  --space:      clamp(64px, 8vw, 116px);
  --space-tight:clamp(44px, 5.5vw, 72px);

  --ease:   cubic-bezier(0.22, 1, 0.36, 1);
  --t-fast: 150ms;
  --t-mid:  300ms;

  --font: "Familjen Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* =====================================================================
   GRUNDLAGEN
   ================================================================== */
*, *::before, *::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body{
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
  /* Deutsche Komposita und lange URLs sind der haeufigste Grund fuer
     horizontalen Ueberlauf auf 320px. Umbruch erlauben statt hinterher
     mit overflow:hidden zu kaschieren. */
  overflow-wrap: break-word;
}

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

h1, h2, h3, h4{
  margin: 0;
  font-weight: 600;
  line-height: 1.18;
  letter-spacing: -0.014em;
  text-wrap: balance;
}
/* V3 - Spannweite. Vorher lag H2 bei 30 px gegen 17 px Fliesstext, ein
   Verhaeltnis von 1,76:1. Auf Seite A sind es 2,9:1. Ohne Spannweite kann
   nichts betont werden, weil alles gleich laut ist. Die Werte bleiben
   trotzdem deutlich unter Seite A (dort H1 68 px): Groesse ist hier kein
   Argument, Unterscheidbarkeit schon. */
h1{ font-size: clamp(32px, 6.4vw, 52px); line-height: 1.08; }
h2{ font-size: clamp(25px, 4.2vw, 36px); }
h3{ font-size: clamp(19px, 2.4vw, 21px); }

p{ margin: 0 0 1.05em; }
p:last-child{ margin-bottom: 0; }

a{ color: var(--green-deep); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover{ color: var(--ink); }

:focus-visible{ outline: 2px solid var(--green-deep); outline-offset: 3px; border-radius: var(--radius-sm); }
::selection{ background: var(--green-pale); color: var(--ink); }

/* Auf Geraeten mit Aussparung im Querformat wuerde der Text sonst unter die
   Kante laufen. */
.wrap{
  width: 100%; max-width: var(--maxw); margin: 0 auto;
  padding-left: max(var(--gutter), env(safe-area-inset-left));
  padding-right: max(var(--gutter), env(safe-area-inset-right));
}

.skip-link{
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--green-deep); color: var(--green-ink);
  padding: 12px 18px; font-weight: 600;
}
.skip-link:focus{ left: 0; color: var(--green-ink); }

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

/* =====================================================================
   BEWEGUNG

   Creative Pass 2: Von der frueheren Bewegungssprache ("Ausrichtung":
   gestaffelte Reveals, Linien, die sich von links zeichnen, Ergebnislinien,
   die auseinanderfahren, ein Betrag, der nach 1,1 Sekunden erscheint) ist
   ein einziges, kaum wahrnehmbares Einblenden uebrig. Nichts sortiert sich
   mehr vor den Augen des Besuchers - das war Vorfuehrung, keine Hilfe.
   ================================================================== */
.js-reveal .reveal{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}
.js-reveal .reveal.in{ opacity: 1; transform: none; }

/* =====================================================================
   BUTTONS
   ================================================================== */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 14px 22px; min-height: 48px;
  border: 1px solid transparent; border-radius: var(--radius);
  font: inherit; font-weight: 600; font-size: 16px; line-height: 1.2;
  text-decoration: none; cursor: pointer;
  transition: background var(--t-fast) linear, color var(--t-fast) linear, border-color var(--t-fast) linear;
}
.btn-primary{ background: var(--green-deep); color: var(--green-ink); }
.btn-primary:hover{ background: var(--ink); color: var(--paper); }
.btn-ghost{ background: transparent; color: var(--ink); border-color: var(--rule-strong); }
.btn-ghost:hover{ border-color: var(--ink); background: var(--paper-2); }
.btn-sm{ padding: 10px 15px; min-height: 44px; font-size: 15px; }

.link-more{ color: var(--green-deep); font-weight: 600; }

/* =====================================================================
   KOPFBEREICH
   ================================================================== */
.site-head{
  position: sticky; top: 0; z-index: 60;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.head-inner{ display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; }

/* TEMPORARY BRAND LOCKUP — siehe BOOKKEEPING_BRAND_LOCKUP.md.
   Ein Wortbild, kein Zeichen: Unterscheidung nur ueber Schriftstaerke,
   damit die Marke nichts behauptet, was noch nicht entschieden ist. Der
   Trenner ist ein 3 px breiter Abstandshalter, kein Zeichen - so bleibt der
   Abstand zwischen den Woertern unabhaengig vom Wortabstand der Schrift
   kontrollierbar und der Screenreader liest "Zumsande Buchhaltung". */
/* inline-block, nicht flex: in einem Flex-Container faellt der Leerraum
   zwischen den beiden Woertern weg, und Screenreader lesen dann
   "ZumsandeBuchhaltung". Als Textzeile stimmt Abstand und Vorlesen. */
/* WORTMARKE (Brand-Integration 30.08.2026).
   Der frueher hier stehende typografische Uebergangs-Lockup ist abgeloest:
   die Markenentscheidung ist getroffen, das Logo liegt als Originaldatei vor
   (571x145 px). Es wird ausschliesslich skaliert, nie veraendert - keine
   eigene Unterzeile, kein Symbol daneben, kein zweiter Schriftzug.

   34 px Hoehe entspricht 134 px Breite. Die Datei liefert bei doppelter
   Pixeldichte 268 statt 571 verfuegbarer Pixel, ist also auch auf Retina
   scharf; erst oberhalb von 285 px Darstellungsbreite waere sie zu klein. */
.brand{
  display: block; min-width: 0; line-height: 0;
  padding: 12px 0;
}
.brand-logo{
  height: 34px; width: auto; max-width: 100%;
  transition: opacity var(--t-fast) linear;
}
.brand:hover .brand-logo{ opacity: 0.78; }

.primary-nav{ display: none; }
.nav-list{ list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; }
.nav-list a{ color: var(--ink-2); text-decoration: none; font-size: 15.5px; }
.nav-list a:hover{ color: var(--ink); text-decoration: underline; }

.head-right{ display: flex; align-items: center; gap: 14px; }
.head-phone{ display: none; font-weight: 600; font-size: 15.5px; text-decoration: none; white-space: nowrap; }
.head-phone:hover{ text-decoration: underline; }
.head-right .btn{ display: none; }

.nav-toggle{
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 1px solid var(--rule-strong); border-radius: var(--radius);
  padding: 10px 13px; min-height: 44px; cursor: pointer; color: var(--ink);
  font: inherit; font-size: 15px; font-weight: 600;
}
.nav-toggle-bars{ position: relative; width: 16px; height: 12px; flex: 0 0 auto; }
.nav-toggle .bar{
  position: absolute; left: 0; height: 1.5px; background: currentColor;
  transition: transform var(--t-mid) var(--ease), width var(--t-mid) var(--ease);
}
.nav-toggle .bar:nth-child(1){ top: 3px; width: 16px; }
.nav-toggle .bar:nth-child(2){ top: 8px; width: 11px; }
body.nav-open .nav-toggle .bar:nth-child(1){ transform: translateY(2.5px) rotate(45deg); }
body.nav-open .nav-toggle .bar:nth-child(2){ width: 16px; transform: translateY(-2.5px) rotate(-45deg); }

.mobile-nav{ display: none; padding: 4px var(--gutter) 22px; border-top: 1px solid var(--rule); background: var(--paper); }
body.nav-open .mobile-nav{ display: block; }
.mobile-nav .nav-list{ flex-direction: column; gap: 0; }
.mobile-nav .nav-list li + li{ border-top: 1px solid var(--rule); }
.mobile-nav .nav-list a{ display: block; padding: 14px 0; font-size: 17px; color: var(--ink); }
.mobile-nav .btn{ width: 100%; margin-top: 16px; }

/* =====================================================================
   ABSCHNITTE

   Kein Sektionsraster mehr. Abstaende werden pro Abschnitt gesetzt, damit
   Laenge und Dichte tatsaechlich variieren duerfen.
   ================================================================== */
section{ padding: var(--space) 0; }
section.tight{ padding: var(--space-tight) 0; }
section[id], article[id], main[id]{ scroll-margin-top: 84px; }

.band{ background: var(--paper-2); }
.band-soft{ background: var(--green-pale); }

.sec-title{ max-width: 20ch; }
.sec-lead{ margin-top: 14px; max-width: var(--maxw-text); color: var(--ink-2); font-size: 18px; }

.kicker{
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 12px;
}

/* Ruhiger Textblock. Der Normalfall auf dieser Seite - nicht die Ausnahme. */
.passage{ max-width: var(--maxw-text); }
.passage > h2{ margin-bottom: 18px; }
.passage p{ color: var(--ink-2); }
.passage p.first{ color: var(--ink); font-size: 19px; }
.passage + .passage{ margin-top: var(--space-tight); }
/* Allein stehender Textblock in einem Band: mittig, etwas breitere Zeile.
   Sonst klebt auf 1280px eine Spalte links und die rechte Haelfte bleibt
   leer - genau die dekorative Leerflaeche, die vermieden werden soll. */
.passage-solo{ max-width: 740px; margin-inline: auto; }

/* Wortwoertliche Saetze von Sabine. Kursiv, gleiche Schrift, kein
   ausgestelltes Grosszitat - sie sollen wie gesprochene Sprache im Text
   stehen, nicht wie ein gestaltetes Element. */
.said{
  margin: 22px 0; padding-left: 16px; border-left: 2px solid var(--green);
  font-style: italic; color: var(--ink); font-size: 18px;
}
.said span, .said cite{
  display: block; margin-top: 6px;
  font-style: normal; font-size: 13.5px; color: var(--ink-3);
}
blockquote.said{ margin-inline: 0; }

/* =====================================================================
   V3 — DIE VIER NEUEN BAUFORMEN

   Der Creative Reset (Pass 2) hat die Designmetapher entfernt und dabei
   auch jede visuelle Differenzierung mitgenommen. Uebrig blieben neun
   Abschnitte in genau einer Form: kleine Ueberschrift, Absaetze. Das liest
   sich als gut gesetztes Dokument, nicht als Website.

   Diese vier Bauformen fuegen keine Dekoration hinzu. Jede zeigt Material,
   das bereits belegt und freigegeben ist und bisher nur nicht sichtbar war:
   ein Satz von Sabine, eine Zahl aus einem Mandat, vier
   Organisationsbeziehungen, zwei Wissensseiten.
   ================================================================== */

/* --- 1. STATEMENT ------------------------------------------------------
   Ein woertlicher Satz von Sabine in der groessten Schrift der Seite. Kein
   ausgestelltes Grosszitat mit Versal-Signatur (das war Pass 1 und wurde
   aus gutem Grund gestrichen), sondern eine Aussage, die als Aussage
   dasteht. Genau zweimal auf der ganzen Seite - im Beweisabschnitt und im
   Abschnitt ueber die Person. Ein drittes Mal waere wieder ein Raster. */
.statement{
  max-width: 20ch;
  font-size: clamp(26px, 5vw, 40px);
  font-weight: 600; line-height: 1.14; letter-spacing: -0.02em;
  font-style: italic; color: var(--ink);
  text-wrap: balance;
  /* Ohne das steht zwischen dem Satz und der Zuschreibung der normale
     Absatzabstand plus deren eigener - die beiden gehoeren aber zusammen. */
  margin-bottom: 0;
}
.statement + .statement-by{
  margin-top: 14px; font-size: 14px; font-weight: 600;
  letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3);
}

/* --- 2. EXCHANGE ------------------------------------------------------
   Der Erfahrungsmoment: ein woertlich belegter Gespraechsverlauf.

   V3.1 ersetzt damit den frueheren .proof-Block, in dem "1,2 Mio. EUR" bis
   76 px gross stand. Das war das lauteste Element der Website, gestuetzt auf
   eine einzige Podcast-Erzaehlung ohne ueberliefertes Ergebnis - die
   Beweishierarchie stimmte nicht. Jetzt traegt der Verlauf, und die Zahl ist
   ein Schritt darin.

   Bewusst KEINE weitere Haarlinien-Liste: .service, .step, .org und .know
   nutzen diese Form schon: eine fuenfte waere wieder ein Raster. Ein
   Gespraech sieht aus wie ein Gespraech - Sprecherzeile, Rede, bei ihren
   Zuegen eine gruene Marginallinie.
   ================================================================== */
.exchange{
  margin: var(--space-tight) auto 0;
  max-width: 740px;
  /* V4: der Verlauf liegt jetzt auf einer weissen Flaeche statt direkt auf
     dem Band. Er ist der Beweismoment der Seite - vorher unterschied ihn
     nichts ausser der Marginallinie von normalem Fliesstext. Dieselbe
     Bauform wie der Ausschnitt im Kopfbereich: weisse Karte, weicher
     Schatten, 10 px Radius. Damit gibt es genau zwei aufliegende Flaechen
     auf der Seite, und beide zeigen dasselbe - worauf jemand schaut. */
  background: var(--white);
  border: 1px solid rgba(23,27,21,0.09);
  border-radius: 14px;
  padding: clamp(22px, 4vw, 34px);
  /* Dieselbe dreischichtige Mechanik wie beim Ausschnitt, eine Spur
     zurueckhaltender - die Flaeche ist deutlich groesser. */
  box-shadow:
    0 1px 1px rgba(23,27,21,0.03),
    0 6px 16px rgba(23,27,21,0.04),
    0 26px 54px rgba(23,27,21,0.06);
  position: relative;
}
.exchange::before{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.9);
  pointer-events: none;
}
.exchange-label{
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 18px;
}
.exchange-turn{ margin-bottom: 22px; min-width: 0; }
.exchange-turn:last-child{ margin-bottom: 0; }
.exchange-turn--her{ padding-left: 16px; border-left: 2px solid var(--green); }
.exchange-who{
  font-size: 13px; font-weight: 600; letter-spacing: 0.05em;
  color: var(--ink-3); margin-bottom: 5px;
}
.exchange-line{
  font-size: clamp(18px, 2.6vw, 21px); line-height: 1.35;
  font-style: italic; color: var(--ink); margin-bottom: 0;
}
.exchange-note{
  margin-top: 9px; font-size: 15.5px; color: var(--ink-2); margin-bottom: 0;
}

/* --- 3. ORGS -----------------------------------------------------------
   Die vier Organisationsbeziehungen. Alle vier sind direkt vom Kunden
   bestaetigt (30.08.2026, inklusive Logo-Freigabe, Fakt F13) und kamen auf
   Seite B bisher nirgends vor - die Seite hatte damit keine einzige
   Fremdbestaetigung.

   Bewusst NICHT die Bauform von Seite A (Logoleiste aus Chips unter dem
   Label "Mitgliedschaften & Werkzeuge"). Hier traegt die
   Beziehungsbezeichnung, das Logo steht daneben - in derselben
   Haarlinien-Liste, die auf dieser Seite ohnehin die Form fuer Aufzaehlungen
   ist (.service, .step, .deadline). Auflage: nie als "Partner"
   zusammenfassen, DATEV ist Softwarenutzung ohne Partnerstatus. */
.orgs{ margin-top: var(--space-tight); max-width: 760px; }
.orgs-label{
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px;
}
/* Logo unter der Bezeichnung, nicht daneben. Nebeneinander blieb bei 320 px
   fuer den laengsten Namen ("Bund der Steuerzahler Deutschland e.V.") gegen
   das breiteste Logo nur eine sehr schmale Textspalte uebrig. Gestapelt ist
   dieselbe Regel auf allen Breiten gueltig - und die Beziehungsbezeichnung
   steht zuerst, was der Auflage entspricht: sie traegt, nicht das Logo.
   grid-template-rows mit 1fr in der Mitte legt alle vier Logos auf dieselbe
   Grundlinie, auch wenn die Namen unterschiedlich lang umbrechen. */
.org{
  display: grid; grid-template-rows: auto 1fr; gap: 2px;
  padding: 16px 0 18px; border-top: 1px solid var(--rule);
  min-width: 0;
}
.org > *{ min-width: 0; }
.org:last-child{ border-bottom: 1px solid var(--rule); }
.org-rel{ font-weight: 600; font-size: 16px; color: var(--ink); }
.org-name{ display: block; font-weight: 400; font-size: 14.5px; color: var(--ink-3); margin-top: 2px; }
/* grid-row 2 plus align-self:end - sonst sitzt das Logo oben in seiner
   Zeile und die vier Logos stehen auf dem Desktop auf vier verschiedenen
   Hoehen, je nachdem wie oft der Verbandsname umbricht. */
.org img{
  grid-row: 2; align-self: end;
  height: 34px; width: auto; max-width: 100%;
  object-fit: contain; object-position: left; margin-top: 16px;
  /* Die vier Logodateien haben einen weissen Hintergrund, keinen
     transparenten. Auf der warmen Tonflaeche standen sie dadurch als vier
     weisse Rechtecke - das sah nach eingefuegten Fremdkoerpern aus.
     multiply laesst Weiss auf einem hellen Grund verschwinden und laesst
     die dunklen Bildteile unveraendert. Faellt eine Umgebung darauf zurueck,
     sieht es aus wie vorher: sichtbar, nur mit Kasten. */
  mix-blend-mode: multiply;
}

/* --- 4. KNOW -----------------------------------------------------------
   Die zwei Wissensseiten als Leiste statt als vereinzelte Textlinks. Die
   Seiten existieren, sind redaktionell die staerksten der Website und waren
   bisher nur ueber je einen Satz im Fliesstext erreichbar. */
.know{ margin-top: var(--space-tight); }
.know-label{
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--ink-3); margin-bottom: 4px;
}
.know-item{
  display: block; padding: 17px 0; border-top: 1px solid var(--rule);
  text-decoration: none; color: var(--ink); min-width: 0;
}
.know-item:last-child{ border-bottom: 1px solid var(--rule); }
.know-item strong{ display: block; font-size: 17.5px; font-weight: 600; }
.know-item span{ display: block; margin-top: 4px; font-size: 15px; color: var(--ink-2); }
.know-item:hover strong{ color: var(--green-deep); text-decoration: underline; }

/* --- 5. CONTRAST ------------------------------------------------------
   Zwei Begriffe fuer die Sektion, die den Einwand "warum dann nicht einfach
   Software?" beantwortet. Bewusst keine Vergleichstabelle mit Haekchen und
   Kreuzen: beide Spalten beschreiben Arbeit, die getan werden muss. Nur die
   rechte ist die, ueber die diese Website redet - markiert ueber Farbe und
   eine staerkere Linie, nicht ueber ein Wertungssymbol. */
.contrast{
  margin-top: var(--space-tight);
  display: grid; gap: 0; max-width: 740px; margin-inline: auto;
}
.contrast > *{ min-width: 0; }
.contrast-part{ padding: 20px 0; border-top: 1px solid var(--rule); }
.contrast-part:last-child{ border-bottom: 1px solid var(--rule); }
.contrast-part--own{ border-top-color: var(--green); border-top-width: 2px; }
.contrast-word{
  font-size: 20px; font-weight: 600; letter-spacing: -0.014em;
  margin-bottom: 4px; color: var(--ink);
}
.contrast-part--own .contrast-word{ color: var(--green-deep); }
.contrast-part p:last-child{ color: var(--ink-2); margin-bottom: 0; }

/* Absenderzeile im Hero. Vorher eine 15-px-Graufzeile, die aussah wie eine
   Fussnote; die Seite spricht aber durchgehend in der ersten Person, und
   wer "ich" ist, stand erst weit unten. */
.hero-ident{
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--rule);
  font-size: 16.5px; color: var(--ink-2); max-width: 52ch;
}
.hero-ident strong{ color: var(--ink); font-weight: 600; }

/* =====================================================================
   V5.4 — BEWEGUNGSSYSTEM

   Vier Prinzipien, sonst keine. Jede Bewegung auf dieser Seite laesst sich
   einem davon zuordnen; was sich keinem zuordnen laesst, wurde nicht
   gebaut.

     FLOAT     schweben, Tiefe, Material            -> Kopfbereich, Buehne
     ALIGN     aus Unordnung wird Ordnung           -> Zettelwirtschaft, Weg
     REVEAL    Inhalt kommt ruhig herein            -> gesamte Seite
     FLOW      etwas geht von hier nach dort        -> Uebergabe, Software

   Getragen wird alles vom vorhandenen Beobachter in main.js: derselbe
   .reveal-Mechanismus, dieselbe Staffelung, dasselbe Sicherheitsnetz,
   dieselbe Behandlung von prefers-reduced-motion. Es gibt bewusst KEINE
   zweite Animations-Engine und keine Bibliothek.

   Animiert werden ausschliesslich transform, opacity und clip-path - alles
   drei kann der Compositor. Kein Layout, kein box-shadow im Dauerlauf,
   keine Endlosschleife ausser einem sehr langsamen Schweben.
   ================================================================== */
:root{
  --m-fast: 240ms;
  --m-mid:  520ms;
  --m-slow: 1100ms;
}

/* --- FLOAT ------------------------------------------------------------ */
/* Sehr langsam, sehr klein. Es soll nicht auffallen, sondern dafuer
   sorgen, dass das Objekt nicht tot wirkt. */
@keyframes zb-float{
  0%, 100%{ transform: translate3d(0,0,0); }
  50%     { transform: translate3d(0,-9px,0); }
}
@media (prefers-reduced-motion: no-preference){
  /* Das Schweben laeuft auf dem aeusseren Element, die Neigung vom Zeiger
     auf dem Bild darin - so ueberschreibt keines das andere. */
  .hero-stage .visual{ animation: zb-float 7s ease-in-out 1.6s infinite; will-change: transform; }
  .hero-stage .visual img{ transform: var(--tilt, none); transition: transform 260ms var(--ease); will-change: transform; }
  /* Materialantwort: ein weicher Lichtfleck ueber dem Objekt, dessen
     Position dem Zeiger folgt. Sehr niedrige Deckkraft - es soll aussehen,
     als faenge Glas Licht, nicht als leuchte etwas. Nur ein Verlauf, kein
     Filter, kein Blend-Modus: das ist billig zu zeichnen. */
  .hero-stage .visual{ position: relative; }
  .hero-stage .visual::after{
    content: ""; position: absolute; inset: 0; border-radius: var(--radius-lg);
    pointer-events: none;
    background: radial-gradient(38% 38% at var(--mx, 50%) var(--my, 34%),
                rgba(255,255,255,0.55), rgba(255,255,255,0) 70%);
    opacity: 0; transition: opacity 420ms var(--ease);
  }
  .hero:hover .visual::after{ opacity: 1; }
  /* Auf Geraeten ohne Zeiger wandert der Lichtfleck genau einmal langsam
     durch - danach ist Ruhe. Keine Dauerschleife. */
  @media (hover: none){
    .hero-stage .visual::after{ opacity: 0.9; animation: zb-sheen 3600ms var(--ease) 900ms 1 both; }
  }
  @keyframes zb-sheen{
    from{ --mx: 12%; opacity: 0; }
    30% { opacity: 0.9; }
    to  { --mx: 88%; opacity: 0; }
  }
  .flow-scene .visual{ animation: zb-float 9s ease-in-out 2s infinite; }
}

/* --- ALIGN: aus Unordnung wird Ordnung -------------------------------- */
/* Die Fragmentebene liegt ueber dem Motiv. Ruhelage ist eine Spalte rechts
   im Bild - genau dort, wo im Motiv die geordneten Zeilen stehen. Der
   Startzustand wird ueber --x/--y/--r/--s je Fragment gesetzt, das Ziel ist
   schlicht transform: none. */
.flow-scene{ position: relative; }
/* Die Ruhelage liegt in der Mitte des Bildes, im Zwischenraum zwischen dem
   ungeordneten und dem geordneten Teil - nicht auf den fertigen Karten.
   Dort gelandet, waeren die Fragmente eine Ueberlagerung; hier sind sie der
   Weg dorthin. */
.align-layer{
  position: absolute; inset: 0;
  display: grid; align-content: center; justify-items: center;
  gap: 1.6%;
  padding: 14% 46% 14% 14%;
  pointer-events: none; z-index: 2;
}
.frag{
  width: 26%; height: 3.4%;
  min-height: 7px;
  border-radius: 3px;
  background: rgba(12,143,92,0.42);
  box-shadow: 0 1px 4px rgba(23,27,21,0.08);
}
/* Unter 700 px reichen acht - zwoelf waeren auf 390 px Rauschen. */
@media (max-width: 700px){
  .frag:nth-child(n+9){ display: none; }
  .frag{ height: 4.4%; width: 32%; }
}

@media (prefers-reduced-motion: no-preference){
  /* Startzustand: verstreut, gedreht, unterschiedlich gross. */
  .js-reveal .flow-scene .frag{
    transform: translate(var(--x,0), var(--y,0)) rotate(var(--r,0)) scale(var(--s,1));
    opacity: 0.85;
    /* Ausklang ohne Ueberschwingen: stark verzoegertes Auslaufen, kein
       Federn, kein Nachwippen. */
    /* Sie blenden aus, waehrend sie noch unterwegs sind - das liest sich
       als Aufloesen in die Ordnung, nicht als Ankleben darauf. */
    transition:
      transform 1450ms cubic-bezier(0.16, 1, 0.3, 1) var(--d, 0ms),
      opacity   520ms var(--ease) calc(var(--d, 0ms) + 820ms);
  }
  /* Ruhelage: ausgerichtet, gleich gross, gleicher Abstand - und dann weg,
     weil das Motiv darunter dieselbe Ordnung schon zeigt. */
  .js-reveal .flow-scene.in .frag{ transform: none; opacity: 0; }

  /* Das Motiv kommt waehrend des Sortierens auf volle Deckkraft. */
  .js-reveal .flow-scene .visual img{
    opacity: 0.35;
    transition: opacity 900ms var(--ease) 300ms;
  }
  .js-reveal .flow-scene.in .visual img{ opacity: 1; }
}
@media (prefers-reduced-motion: reduce){
  /* Endzustand sofort: Motiv voll da, Fragmente weg. Nichts Verstecktes. */
  .align-layer{ display: none; }
}

/* --- ALIGN: Zettelwirtschaft ------------------------------------------ */
/* Das Motiv laeuft von links nach rechts auf: erst die losen Einzelteile,
   dann die geordneten Zeilen. Die Bildkomposition traegt die Aussage schon,
   die Bewegung gibt ihr nur eine Richtung und eine Reihenfolge.
   clip-path statt einer zweiten Grafik - es gibt weiterhin genau eine
   Darstellung dieses Gedankens. */


/* --- ALIGN: der Weg --------------------------------------------------- */
/* Die Linie zeichnet sich von oben nach unten, die Wegpunkte erscheinen
   nacheinander darauf. */
@media (prefers-reduced-motion: no-preference){
  .js-reveal .stop:not(:last-child) .stop-node::after{
    transform: translateX(-50%) scaleY(0); transform-origin: top;
    transition: transform var(--m-slow) var(--ease);
  }
  .js-reveal .stop.in:not(:last-child) .stop-node::after{ transform: translateX(-50%) scaleY(1); }
  .js-reveal .stop .stop-node{
    transform: scale(0.2); opacity: 0;
    transition: transform var(--m-mid) var(--ease), opacity var(--m-mid) var(--ease);
  }
  .js-reveal .stop.in .stop-node{ transform: none; opacity: 1; }
}

/* --- FLOW: die Uebergabe ---------------------------------------------- */
/* Die beiden Rollen kommen von aussen zusammen, die Marke dazwischen
   erscheint zuletzt - die Reihenfolge erzaehlt die Zusammenarbeit. */
@media (prefers-reduced-motion: no-preference){
  .js-reveal .handover.in .handover-side:first-child{ animation: zb-in-left var(--m-slow) var(--ease) both; }
  .js-reveal .handover.in .handover-side:last-child { animation: zb-in-right var(--m-slow) var(--ease) both; }
  .js-reveal .handover.in .handover-badge{ animation: zb-pop var(--m-mid) var(--ease) 700ms both; }
  .js-reveal .handover.in .handover-line{ animation: zb-line var(--m-mid) var(--ease) 560ms both; }
}
@keyframes zb-in-left { from{ opacity:0; transform: translate3d(-18px,0,0);} to{ opacity:1; transform:none; } }
@keyframes zb-in-right{ from{ opacity:0; transform: translate3d( 18px,0,0);} to{ opacity:1; transform:none; } }
@keyframes zb-pop    { from{ opacity:0; transform: scale(0.86);} to{ opacity:1; transform:none; } }
@keyframes zb-line   { from{ opacity:0; transform: scaleX(0);} to{ opacity:1; transform:none; } }

/* --- FLOW: Software, Verarbeiten gegen Einordnen ---------------------- */
/* Links laufen die Zeilen der Reihe nach durch. Rechts bleibt eine stehen
   und wird einmal hervorgehoben - genau der Unterschied, um den es in dem
   Abschnitt geht. */
@media (prefers-reduced-motion: no-preference){
  .js-reveal .split .split-rows li{
    opacity: 0; transform: translate3d(-10px,0,0);
    transition: opacity var(--m-mid) var(--ease), transform var(--m-mid) var(--ease);
  }
  .js-reveal .split.in .split-rows li{ opacity: 1; transform: none; }
  .js-reveal .split.in .split-part:first-child li:nth-child(1){ transition-delay: 120ms; }
  .js-reveal .split.in .split-part:first-child li:nth-child(2){ transition-delay: 240ms; }
  .js-reveal .split.in .split-part:first-child li:nth-child(3){ transition-delay: 360ms; }
  .js-reveal .split.in .split-part--own li:nth-child(1){ transition-delay: 520ms; }
  .js-reveal .split.in .split-part--own li:nth-child(2){ transition-delay: 640ms; }
  .js-reveal .split.in .split-part--own li:nth-child(3){ transition-delay: 760ms; }
  .js-reveal .split.in .split-part--own .is-flagged .srow-dot{ animation: zb-pop 420ms var(--ease) 900ms both; }
  .js-reveal .split.in .split-ask{ animation: zb-rise var(--m-mid) var(--ease) 1050ms both; }
}
@keyframes zb-rise{ from{ opacity:0; transform: translate3d(0,8px,0);} to{ opacity:1; transform:none; } }

/* --- REVEAL: Standortbestimmung --------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  .js-reveal .check-panel .check-item{
    opacity: 0; transform: translate3d(0,10px,0);
    transition: opacity var(--m-mid) var(--ease), transform var(--m-mid) var(--ease), background var(--t-fast) linear;
  }
  .js-reveal .check-panel.in .check-item{ opacity: 1; transform: none; }
  .js-reveal .check-panel.in .check-item:nth-of-type(1){ transition-delay: 140ms; }
  .js-reveal .check-panel.in .check-item:nth-of-type(2){ transition-delay: 230ms; }
  .js-reveal .check-panel.in .check-item:nth-of-type(3){ transition-delay: 320ms; }
  .js-reveal .check-panel.in .check-item:nth-of-type(4){ transition-delay: 410ms; }
  .js-reveal .check-panel.in .check-item:nth-of-type(5){ transition-delay: 500ms; }
  /* Der Haken kommt beim Antippen kurz herein, statt einfach da zu sein. */
  .check-mark svg{ transform: scale(0.5); opacity: 0; transition: transform 260ms var(--ease), opacity 200ms linear; }
  .check-item input:checked ~ .check-mark svg{ transform: none; opacity: 1; }
}

/* --- ZEIGER: eine Sprache fuer alle anfassbaren Flaechen -------------- */
/* Bewusst nur dort, wo etwas anzufassen ist: Buehnenobjekte und die Zeilen
   der Standortbestimmung. Nicht auf jeder Flaeche der Seite. */
@media (hover: hover) and (prefers-reduced-motion: no-preference){
  .journey-object .visual img{ transition: transform 420ms var(--ease), box-shadow 300ms var(--ease); }
  .journey-object:hover .visual img{ transform: translate3d(0,-5px,0); box-shadow: var(--lift-2); }
}

/* Bei Bewegungsvorbehalt bleibt nichts uebrig, was sich bewegt - und
   nichts, was unsichtbar haengt. */
@media (prefers-reduced-motion: reduce){
  .hero-stage .visual, .flow-scene .visual{ animation: none; }
  .stop-node, .split-rows li, .check-item, .handover-side, .handover-badge, .handover-line{
    opacity: 1 !important; transform: none !important; animation: none !important;
  }
  .check-mark svg{ transform: none; }
  .check-item input:not(:checked) ~ .check-mark svg{ opacity: 0; }
}

/* =====================================================================
   V5 — OBERFLAECHENSYSTEM

   Bis V4.1 kannte die Seite genau zwei aufliegende Flaechen und sonst nur
   Haarlinien auf Papier. Gemessen: 1259 Woerter, ein einziges SVG, zwei
   Karten - der Rest war Text auf Flaeche. Das ist der Grund, warum sie
   redaktionell wirkte, obwohl die Inhalte stimmen.

   Ab hier gibt es ein durchgaengiges Bausteinsystem: eine Flaeche
   (.panel), ein Symbolplaettchen (.chip), eine Zeile (.srow). Alles auf
   der Seite wird daraus gebaut. Ein System statt Einzelstuecke - deshalb
   wirkt es ruhig und nicht wie eine Sammlung von Effekten.
   ================================================================== */
:root{
  --radius-lg: 20px;
  --radius-md: 14px;
  --radius-sm2: 10px;
  /* Dreischichtige Tiefe: aufsetzen, loesen, tragen. Ein Schatten allein
     sieht aus wie ein Stempel, drei wie ein Gegenstand. */
  --lift-1: 0 1px 1px rgba(23,27,21,0.04), 0 4px 10px rgba(23,27,21,0.04), 0 14px 30px rgba(23,27,21,0.05);
  --lift-2: 0 1px 1px rgba(23,27,21,0.04), 0 6px 16px rgba(23,27,21,0.05), 0 24px 50px rgba(23,27,21,0.07);
  --lift-3: 0 2px 2px rgba(23,27,21,0.05), 0 10px 24px rgba(23,27,21,0.06), 0 36px 72px rgba(23,27,21,0.09);
  --edge:   inset 0 1px 0 rgba(255,255,255,0.9);
}

/* --- Die Flaeche ------------------------------------------------------ */
.panel{
  position: relative;
  background: var(--white);
  border: 1px solid rgba(23,27,21,0.08);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-2);
}
.panel::before{
  content: ""; position: absolute; inset: 0; border-radius: inherit;
  box-shadow: var(--edge); pointer-events: none;
}
.panel-soft{ box-shadow: var(--lift-1); }
.panel-pad{ padding: clamp(20px, 4vw, 30px); }

/* --- Das Symbolplaettchen --------------------------------------------- */
/* Kreis, blassgruen, dueenne Linienzeichnung. Der Kreis ist dieselbe Form
   wie die Leitmetapher - das Symbolsystem ist damit kein Fremdkoerper. */
.chip{
  flex: 0 0 auto;
  width: 40px; height: 40px; border-radius: 50%;
  background: var(--green-mist);
  display: grid; place-items: center;
  color: var(--green);
}
.chip svg{ width: 19px; height: 19px; display: block; }
.chip-sm{ width: 32px; height: 32px; }
.chip-sm svg{ width: 16px; height: 16px; }
.chip-lg{ width: 52px; height: 52px; }
.chip-lg svg{ width: 24px; height: 24px; }

/* --- Die Zeile -------------------------------------------------------- */
.srow{
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 14px;
  padding: 14px 0;
}
.srow + .srow{ border-top: 1px solid rgba(23,27,21,0.07); }
.srow-title{ font-size: 16px; font-weight: 600; color: var(--ink); margin: 0; }
.srow-sub{ font-size: 14px; color: var(--ink-3); margin: 2px 0 0; }
/* Fortschrittsbalken ohne Zahl. Er zeigt Verhaeltnis, nicht Betrag -
   deshalb steht nirgends eine Einheit daneben. */
.srow-bar{
  width: clamp(56px, 18vw, 96px); height: 6px; border-radius: 3px;
  background: rgba(23,27,21,0.09); position: relative; flex: 0 0 auto;
}
.srow-bar::before{
  content: ""; position: absolute; inset: 0 auto 0 0;
  width: var(--w, 50%); border-radius: 3px; background: var(--green);
}
.srow-dot{
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--green-mist); color: var(--green);
  display: grid; place-items: center; flex: 0 0 auto;
}
.srow-dot svg{ width: 12px; height: 12px; }

/* =====================================================================
   V4 — DIE METAPHER: VOM DETAIL ZUM UEBERBLICK

   Der Befund vor diesem Durchgang, gemessen gegen die Schwesterseite:
   1427 Woerter gegen 958 bei fast gleicher Seitenhoehe, acht Absaetze ab
   35 Woertern gegen zwei, 74 Woerter auf dem ersten Bildschirm gegen 54 -
   und null grafische Elemente gegen sieben. Die Seite las sich als Essay,
   weil sie eines war.

   Die Antwort ist keine Dekoration, sondern eine Leitform, die aus der
   Wortmarke kommt: "zumsande." endet auf einen Punkt. Kreis, Bogen,
   Ausschnitt und Mittelpunkt sind ab hier die einzige Formensprache der
   Seite. Keine zweite Metapher daneben.
   ================================================================== */

/* --- Die Buehne ------------------------------------------------------- */
.hero-stage{
  position: relative;
  margin-top: var(--space-tight);
  display: grid; place-items: center;
  min-width: 0;
}
/* --- Das Bildmotiv ---------------------------------------------------- */
/* Seitenverhaeltnis kommt aus --vr, gesetzt von zb_visual(), damit vor dem
   Laden kein Sprung entsteht. */
.visual{ display: block; }
.visual img{
  display: block; width: 100%; height: auto;
  aspect-ratio: var(--vr, 16/10);
  object-fit: cover;
}
/* Das Motiv uebernimmt Radius und Tiefe des Flaechensystems - sonst sieht
   es aus, als waere es von einer anderen Website eingesetzt. */
.hero-stage .visual{ width: min(100%, 380px); margin-inline: auto; }
.hero-stage .visual img{
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-1);
}
/* Die Karte legt sich vor das Objekt, statt es zu beschneiden. */
.hero-stage .stage-cards{ margin-top: -44px; }
/* Mobil bewusst enger geschnitten statt einfach kleiner: das Objekt soll
   auch auf 390 px ein Objekt bleiben und keine Dekoration werden. */
@media (max-width: 700px){
  .hero-stage .visual img{ aspect-ratio: 1/0.82; object-position: 50% 46%; }
}
/* Der Bogen zeichnet sich einmal, langsam, und bleibt dann stehen. Er ist
   das einzige bewegte Element der Seite - "der Blick, der einmal
   herumgeht". Kein Dauerloop: eine Schleife waere Vorfuehrung. */
@media (prefers-reduced-motion: no-preference){
  .orbit-arc{
    stroke-dasharray: 140;
    stroke-dashoffset: 140;
    animation: orbit-draw 1500ms var(--ease) 350ms forwards;
  }
  .orbit-core{ transform-origin: 110px 110px; animation: orbit-core-in 700ms var(--ease) 1500ms both; }
}
@keyframes orbit-draw{ to{ stroke-dashoffset: 0; } }
@keyframes orbit-core-in{ from{ transform: scale(0.4); opacity: 0; } to{ transform: none; opacity: 1; } }

/* Nur fuer Screenreader. Wird fuer die Legende der Standortbestimmung
   gebraucht: sichtbar steht die Ueberschrift darueber, die Fieldset-Legende
   soll den Zusammenhang trotzdem ansagen. */
.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* --- Signature Moment 3: die Standortbestimmung ------------------------ */
.check-panel{ max-width: 720px; margin-inline: auto; }
/* min-width:0 auf dem Textteil: er ist ein Flex-Kind und steht sonst auf
   dem Standardwert auto - bei 195 px (200 % Zoom) schob die Ueberschrift
   den Block 25 px ueber den Rand. Unter 380 px wandert das Symbol ueber
   die Ueberschrift, sonst bleibt fuer beides zu wenig Platz. */
.check-head{ display: flex; align-items: flex-start; gap: 16px; margin-bottom: 6px; min-width: 0; }
.check-head > *{ min-width: 0; }
@media (max-width: 380px){
  .check-head{ display: block; }
  .check-head .chip{ margin-bottom: 14px; }
}
.check-title{ font-size: clamp(21px, 3.4vw, 27px); margin: 2px 0 0; }
.check-sub{ font-size: 15px; color: var(--ink-3); margin: 8px 0 0; max-width: 44ch; }

.check-list{ border: 0; margin: 22px 0 0; padding: 0; min-width: 0; }

/* Die Zeile ist das Label. Die Checkbox liegt darin und bleibt bedienbar -
   Klick, Tippen und Leertaste funktionieren dadurch ohne eine Zeile
   JavaScript. */
.check-item{
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: 14px;
  padding: 15px 14px; margin: 0 -14px;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--t-fast) linear;
}
.check-item + .check-item{ box-shadow: 0 -1px 0 rgba(23,27,21,0.07); }
.check-item input{
  position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0;
}
.check-text{ min-width: 0; }
.check-label{ display: block; font-size: 16.5px; font-weight: 600; color: var(--ink); }
.check-desc{ display: block; font-size: 14.5px; color: var(--ink-3); margin-top: 2px; }

/* Der Zustandsknopf. Leer ein Ring, angehakt eine gefuellte Flaeche - der
   Unterschied liegt nicht nur in der Farbe, sondern auch in der Form. */
.check-mark{
  width: 28px; height: 28px; border-radius: 50%;
  border: 1.5px solid rgba(23,27,21,0.20);
  display: grid; place-items: center;
  color: transparent; flex: 0 0 auto;
  transition: background var(--t-fast) linear, border-color var(--t-fast) linear, color var(--t-fast) linear;
}
.check-mark svg{ width: 15px; height: 15px; }
.check-item input:checked ~ .check-mark{
  background: var(--green); border-color: var(--green); color: #fff;
}
.check-item input:checked ~ .check-text .check-label{ color: var(--green-deep); }
/* Tastatur: der Fokus liegt auf der unsichtbaren Checkbox, sichtbar wird
   die ganze Zeile markiert. */
.check-item input:focus-visible ~ .check-mark{ outline: 2px solid var(--green-deep); outline-offset: 3px; }
@media (hover: hover){
  .check-item:hover{ background: var(--green-mist); }
}

.check-foot{
  margin-top: 24px; padding-top: 20px;
  border-top: 1px solid rgba(23,27,21,0.08);
  display: grid; gap: 16px; justify-items: start;
}
.check-foot p{ margin: 0; color: var(--ink-2); max-width: 48ch; }
/* Der zweite Satz erscheint, wenn alle fuenf Zeilen angehakt sind.
   Bewusst "alle fuenf" und nicht "mindestens drei": CSS kann angehakte
   Geschwister nicht zaehlen, wohl aber jede einzelne Zeile pruefen. Eine
   Kette aus fuenf :has() ist eindeutig und braucht kein JavaScript.
   Kennt ein Browser :has() nicht, bleibt der erste Satz stehen - beide
   sind inhaltlich richtig, keiner ist ein Notzustand. */
.check-out-b{ display: none; }
/* Die :has()-Kette muss auf EINER Zeile stehen. Ueber mehrere Zeilen
   verteilt wird der Zeilenumbruch als Nachfahren-Kombinator gelesen, und
   der Selektor trifft dann nichts - genau das ist beim ersten Versuch
   passiert. */
.check-panel.check-panel:has(.check-item:nth-of-type(1) input:checked):has(.check-item:nth-of-type(2) input:checked):has(.check-item:nth-of-type(3) input:checked):has(.check-item:nth-of-type(4) input:checked):has(.check-item:nth-of-type(5) input:checked) .check-out-a{ display: none; }
.check-panel.check-panel:has(.check-item:nth-of-type(1) input:checked):has(.check-item:nth-of-type(2) input:checked):has(.check-item:nth-of-type(3) input:checked):has(.check-item:nth-of-type(4) input:checked):has(.check-item:nth-of-type(5) input:checked) .check-out-b{ display: block; }

@media (min-width: 640px){
  .check-foot{ grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 24px; }
}

/* Objekt neben dem Weg. Mobil darueber, ab 880 px daneben - die Linie
   bleibt in beiden Faellen das strukturierende Element. */
/* min-width:0 auf beiden Kindern: als Grid-Kinder stehen sie sonst auf
   auto und koennen nicht unter ihre Inhaltsbreite - das Objekt sprengte
   dadurch seine 300-px-Spalte auf 1008 px. */
.journey-wrap{ display: grid; gap: 30px; }
.journey-wrap > *{ min-width: 0; }
.journey-object{ margin: 0; max-width: 300px; }
.journey-object .visual img{ border-radius: var(--radius-lg); box-shadow: var(--lift-1); }
.journey-object figcaption{ margin-top: 12px; font-size: 14.5px; color: var(--ink-3); max-width: 30ch; }
@media (min-width: 880px){
  .journey-wrap.has-object{ grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 56px; align-items: center; }
}
/* Die Flaechen im Konditionen-Abschnitt bekommen etwas Luft ueber der
   Ueberschrift, weil dort jetzt ein Symbolplaettchen sitzt. */
.panel.passage .chip{ margin-bottom: 16px; }
.panel.passage > h2{ margin-bottom: 14px; }

/* --- Der Weg: vier Wegpunkte auf einer durchgehenden Linie ------------- */
/* Vorher vier gleich gebaute Zeilen mit Nummern. Jetzt ein Weg: eine Linie
   laeuft durch, die Wegpunkte sitzen darauf. Die Nummern bleiben - sie
   kommen aus dem CSS-Zaehler, nicht aus dem Markup - aber sie sind nicht
   mehr das, was die Reihenfolge traegt. Das macht die Linie. */
.journey{ counter-reset: s; max-width: 760px; position: relative; }
.stop{
  position: relative;
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px;
  padding-bottom: 30px;
}
.stop:last-child{ padding-bottom: 0; }
.stop-node{
  position: relative; z-index: 1;
  width: 16px; height: 16px; border-radius: 50%; margin-top: 5px;
  background: var(--white);
  border: 2px solid var(--green);
  flex: 0 0 auto;
}
/* Die Linie zwischen zwei Wegpunkten. Nicht am letzten. */
.stop:not(:last-child) .stop-node::after{
  content: ""; position: absolute; left: 50%; top: 100%;
  width: 1.5px; height: calc(100% + 30px);
  transform: translateX(-50%);
  background: linear-gradient(to bottom, var(--green), rgba(12,143,92,0.22));
}
.stop-body{ min-width: 0; padding-top: 0; }
.stop-body h3{ font-size: 18px; margin-bottom: 6px; }
.stop-body h3::before{
  counter-increment: s; content: counter(s) ". ";
  color: var(--green-deep); font-variant-numeric: tabular-nums;
}
.stop-body p{ color: var(--ink-2); max-width: 58ch; margin-bottom: 0; }

/* --- Zettelwirtschaft: Kopf der Sektion ------------------------------- */
.ordnung-head{ max-width: 640px; }
.ordnung-head h2{ margin-bottom: 14px; }
.ordnung-head p{ color: var(--ink-2); font-size: 18px; max-width: 44ch; }

/* --- Die Buehne: was ich im Blick behalte ----------------------------- */
/* V5.3.1: Objektstreifen und Text sind getrennt. Seitlich wandern nur die
   Objekte; ein angeschnittenes Objekt erzeugt Erwartung, ein
   angeschnittener Satz sieht kaputt aus. Der Text steht darunter an einer
   festen Stelle. */
.stage{ margin-top: 34px; }


@media (prefers-reduced-motion: no-preference){
}

@media (prefers-reduced-motion: reduce){
}


@media (min-width: 880px){
}

/* --- Software: Verarbeiten gegen Einordnen ---------------------------- */
.split{ display: grid; gap: 18px; margin-top: var(--space-tight); }
.split-part{ min-width: 0; }
.split-word{ font-size: 19px; font-weight: 600; color: var(--ink); margin: 0 0 6px; }
.split-part--own .split-word{ color: var(--green-deep); }
.split-desc{ font-size: 15px; color: var(--ink-2); margin: 0 0 18px; max-width: 34ch; }
.split-rows{ list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.split-rows li{ display: flex; align-items: center; gap: 14px; }
/* Die Zeilen sind leer. Sie stehen fuer Vorgaenge, nicht fuer Daten - mit
   Inhalt waeren es erfundene Buchungen. */
.split-line{ flex: 1; height: 7px; border-radius: 4px; background: rgba(23,27,21,0.08); }
.split-rows .is-flagged .split-line{ background: var(--green-mist); }
.split-rows .is-flagged .srow-dot{ background: var(--green); color: #fff; }
.split-ask{
  display: flex; align-items: center; gap: 11px;
  margin: 18px 0 0; padding-top: 16px;
  border-top: 1px solid rgba(23,27,21,0.07);
  font-style: italic; color: var(--ink); font-size: 16px;
}

/* --- Steuerberater: zwei Rollen, eine Uebergabe ----------------------- */
.handover{ display: grid; gap: 0; margin-top: var(--space-tight); align-items: stretch; }
.handover-side{ min-width: 0; display: grid; align-content: start; gap: 10px; }
.handover-role{ font-size: 17px; font-weight: 600; color: var(--ink); margin: 4px 0 0; }
.handover-what{ font-size: 15px; color: var(--ink-2); margin: 0; }
/* Die Uebergabe. Auf 390 senkrecht, ab 760 waagerecht - dieselbe Aussage,
   nur in der Richtung, die zum Layout passt. */
.handover-mid{
  display: grid; justify-items: center; align-content: center; gap: 10px;
  padding: 16px 0;
}
.handover-line{ width: 1.5px; height: 22px; background: var(--rule-strong); border-radius: 1px; }
.handover-badge{
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--green-deep); background: var(--green-mist);
  padding: 7px 13px; border-radius: 999px; white-space: nowrap;
}

/* --- Signature Moment 2: aus Einzelteilen wird eine Reihenfolge -------- */
.flow-scene{
  margin: var(--space-tight) 0 0;
  max-width: 900px; margin-inline: auto;
}
.flow-scene .visual img{
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-1);
}
.flow-scene figcaption{
  margin-top: 16px; text-align: center;
  font-size: 15px; color: var(--ink-3);
}
/* Die Verbindungslinien zeichnen sich einmal von links nach rechts, wenn
   der Abschnitt in den Blick kommt - dieselbe Bewegungssprache wie der
   Bogen im Kopfbereich. Danach stehen sie. Keine Schleife. */


/* --- Signature Moment 1: die geschichtete Pruefflaeche ----------------- */
/* Zwei Flaechen statt einer, leicht versetzt. Die kleinere liegt vor der
   groesseren und ragt seitlich heraus - genau so weit, dass Tiefe entsteht
   und nichts abgeschnitten wirkt. */
.stage-cards{
  position: relative;
  width: min(100%, 320px);
  margin-top: -30px;
}
.review-card{ position: relative; z-index: 2; }
.review-head{ display: flex; align-items: center; gap: 13px; margin-bottom: 6px; }
.review-title{ font-size: 15.5px; font-weight: 600; color: var(--ink); margin: 0; }
.review-sub{ font-size: 13.5px; color: var(--ink-3); margin: 2px 0 0; }
.review-rows{ margin-top: 8px; }
.review-rows .srow{ grid-template-columns: auto minmax(0, 1fr) auto; padding: 12px 0; }
.review-rows .srow-title{ font-size: 15px; font-weight: 400; color: var(--ink-2); }
/* Die hervorgehobene Zeile ist die, mit der sie anfaengt zu suchen. */
.review-rows .is-flagged .srow-title{ color: var(--ink); font-weight: 600; }

/* Die vorgelagerte Notizflaeche. Traegt Sabines Rolle in einem Satz - der
   Grund, warum diese Flaeche ueberhaupt gezeigt wird. */
.note-card{
  position: relative; z-index: 3;
  margin: -14px 0 0 auto;
  width: min(100%, 268px);
  padding: 13px 16px;
  display: flex; align-items: center; gap: 11px;
  border-radius: var(--radius-md);
}
.note-card p{ margin: 0; font-size: 14.5px; line-height: 1.4; color: var(--ink-2); }

/* =====================================================================
   HERO
   ================================================================== */
.hero{ padding-top: clamp(36px, 6vw, 60px); padding-bottom: var(--space); }
/* Mass in ch, nicht in px: die Zeilenlaenge soll bei jeder Schriftgroesse
   lesbar bleiben. Bei 52 px Maximum sind 17ch rund drei Zeilen. */
.hero h1{ max-width: 17ch; margin-bottom: 20px; }
.hero-lead{ font-size: 19px; color: var(--ink-2); max-width: 52ch; margin-bottom: 26px; }
.hero-actions{ display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.hero-note{ margin-top: 18px; font-size: 15px; color: var(--ink-3); max-width: 46ch; }
/* Stuetzzeile statt Lead: ein Satz, der die Rollenteilung benennt, statt
   dreier Textbloecke unter der Ueberschrift. */
.hero-support{ font-size: 19px; color: var(--ink-2); max-width: 40ch; margin-bottom: 26px; }
.hero-figure{ margin-top: var(--space-tight); max-width: 280px; }

/* =====================================================================
   LEISTUNGEN UND RECHTLICHER RAHMEN

   Der Hinweis auf § 6 Nr. 4 StBerG bleibt sichtbar im Leistungsabschnitt.
   Das ist keine Gestaltungsfrage: berufsrechtlich muss der
   Taetigkeitsbereich gut ersichtlich sein, und § 8 Abs. 4 StBerG erlaubt
   ausdruecklich, auf die Befugnis hinzuweisen. Er darf nicht in den
   Fussbereich wandern.
   ================================================================== */
.service-list{ display: grid; gap: 0; }
.service{ padding: 26px 0; border-top: 1px solid var(--rule); min-width: 0; }
.service > *{ min-width: 0; }
.service:last-child{ border-bottom: 1px solid var(--rule); }
.service h3{ margin-bottom: 4px; }
.service-legal{ font-size: 13.5px; color: var(--green-deep); font-weight: 600; margin-bottom: 10px; }
.service p{ color: var(--ink-2); max-width: 62ch; margin-bottom: 0; }

.scope{ margin-top: 30px; max-width: var(--maxw-text); }
.scope h3{ font-size: 18px; margin-bottom: 10px; }
.scope p{ color: var(--ink-2); }
.scope .law{
  margin: 14px 0; padding-left: 16px; border-left: 2px solid var(--rule-strong);
  font-size: 16px; color: var(--ink-2);
}

/* =====================================================================
   ABLAUF
   Kompakte Liste, keine grossen nummerierten Karten.
   ================================================================== */
.steps{ counter-reset: s; max-width: 760px; margin-inline: auto; }
.step{ padding: 20px 0; border-top: 1px solid var(--rule); min-width: 0; }
.step > *{ min-width: 0; }
/* Auf einer aufliegenden Flaeche braucht die erste Zeile keine Linie nach
   oben und die letzte keine nach unten - der Rand der Flaeche macht das. */
.step h3{ font-size: 18px; margin-bottom: 6px; }
.step h3::before{
  counter-increment: s; content: counter(s) ". ";
  color: var(--green-deep); font-variant-numeric: tabular-nums;
}
.step p{ color: var(--ink-2); max-width: 60ch; margin-bottom: 0; }

/* Abschluss der Schrittfolge mit der einzigen Handlungsmoeglichkeit in der
   Seitenmitte. Ruhig gesetzt: eine Zeile, ein Knopf, kein Kasten, keine
   Flaeche, kein Rahmen - sonst waere es ein Aktionsbanner. */
.step-close{ margin-top: 30px; max-width: 760px; display: grid; gap: 16px; justify-items: start; }
.step-close p{ color: var(--ink); font-size: 18px; margin: 0; max-width: 40ch; }

/* =====================================================================
   BILDER

   Die Komponente rendert nur, wenn eine Datei vorliegt (siehe
   functions.php). Der Slot-Zustand ist ausschliesslich fuer die
   Bildbesprechung gedacht und im Auslieferungszustand aus.
   ================================================================== */
.photo{ margin: 0; }
.photo img{ width: 100%; aspect-ratio: var(--ph-ratio, 4/5); object-fit: cover; background: var(--paper-2); }
.photo figcaption{ margin-top: 10px; font-size: 14px; color: var(--ink-3); line-height: 1.45; }

.photo-slot{ }
.photo-slot-inner{
  aspect-ratio: var(--ph-ratio, 4/5);
  background: var(--paper-2); border: 1px dashed var(--rule-strong);
  display: flex; align-items: center; justify-content: center;
}
.photo-slot-inner span{ font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); }

/* =====================================================================
   KONTAKT UND FORMULAR
   ================================================================== */
.contact-grid{ display: grid; gap: 32px; }
.contact-grid > *{ min-width: 0; }
.contact-side p{ color: var(--ink-2); max-width: 46ch; }
.contact-badge{
  display: inline-block; margin-bottom: 14px;
  font-size: 14.5px; font-weight: 600; color: var(--green-deep);
}
.contact-direct{ display: grid; gap: 8px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--rule); }
.contact-direct a{ font-weight: 600; text-decoration: none; }
.contact-direct a:hover{ text-decoration: underline; }
.contact-hours{ font-size: 14.5px; color: var(--ink-3); margin: 4px 0 0; }

.form-shell{ background: var(--paper); border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 22px; }
.contact-form{ display: grid; gap: 16px; }
.field{ display: grid; gap: 5px; min-width: 0; }
.field label{ font-size: 14.5px; font-weight: 600; }
.field .hint{ font-size: 13px; color: var(--ink-3); }
.field input, .field select, .field textarea{
  font: inherit; font-size: 16px;   /* verhindert den iOS-Zoom beim Fokus */
  width: 100%; max-width: 100%;
  padding: 11px 12px;
  color: var(--ink); background: var(--paper);
  border: 1px solid var(--rule-strong); border-radius: var(--radius-sm);
  transition: border-color var(--t-fast) linear;
}
.field textarea{ min-height: 126px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color: var(--green-deep); }
.field .error{ display: none; font-size: 13.5px; color: var(--warn); font-weight: 600; }
.field.invalid input, .field.invalid textarea{ border-color: var(--warn); }
.field.invalid .error{ display: block; }
.field-row{ display: grid; gap: 16px; align-items: end; }

/* Honeypot: fuer Menschen unsichtbar, fuer Bots ein normales Feld.
   Kein display:none - manche Bots ueberspringen versteckte Felder. */
.hp{ position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-note{ font-size: 13.5px; color: var(--ink-3); }
.form-success{ background: var(--green-pale); padding: 20px; border-radius: var(--radius); }

/* =====================================================================
   FUSSBEREICH
   ================================================================== */
/* Fussbereich als Markenflaeche. Ein Footer in der Hausfarbe ist eine
   voellig gewoehnliche Entscheidung - anders als ein dunkles Kontrastband
   mitten auf der Seite, das nur "Premium" signalisiert. Hier bekommt Gruen
   endlich eine Flaeche statt nur Dekoration zu sein.
   Kontrast gegen #0B4F38: Text 9.0:1, zweite Ordnung 6.0:1, Meta 5.2:1. */
.site-foot{
  --ink:         #F4FAF6;
  --ink-2:       rgba(244,250,246,0.78);
  --ink-3:       rgba(244,250,246,0.70);
  --rule:        rgba(244,250,246,0.20);
  --rule-strong: rgba(244,250,246,0.34);
  --green:       #6FE0AE;
  --green-deep:  #F4FAF6;
  background: #0B4F38;
  color: #F4FAF6;
  padding: var(--space) 0 36px;
  margin-top: var(--space);
}
.site-foot{ padding-bottom: max(36px, calc(36px + env(safe-area-inset-bottom))); }
.site-foot a{ color: #F4FAF6; }
.site-foot a:hover{ color: #F4FAF6; text-decoration: underline; }
.foot-cross{ max-width: var(--maxw-text); }
.foot-cross-line{ font-size: clamp(21px, 3vw, 26px); font-weight: 600; line-height: 1.2; letter-spacing: -0.014em; margin-bottom: 12px; max-width: 28ch; }
.foot-cross p{ color: var(--ink-2); }
.foot-cross-pending{ font-size: 14.5px; color: var(--ink-3); }

.foot-nav > *{ min-width: 0; }
.foot-nav{ display: grid; gap: 26px; margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--rule); }
.foot-nav-group{ display: grid; gap: 9px; align-content: start; }
.foot-nav-label{ font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); margin: 0 0 3px; }
.foot-nav-group a{ color: var(--ink-2); text-decoration: none; font-size: 15.5px; }
.foot-nav-group a:hover{ color: var(--ink); text-decoration: underline; }

/* =====================================================================
   DACHMARKE IM FUSSBEREICH

   Der Kopf dieser Website fuehrt "zumsande. buchhaltung" - dort zaehlt,
   dass man in einer Sekunde weiss, in welchem Bereich man ist. Der
   Fussbereich hat die umgekehrte Aufgabe: Er ordnet die Seite in das
   groessere System ein. Deshalb steht hier die DACHMARKE gross, der
   Dachclaim ruhig darunter, und erst danach die beiden Leistungswelten.

   Die Hierarchie ist bewusst ungleich. Drei gleich grosse Marken
   nebeneinander waeren eine Logowand und wuerden genau das verschleiern,
   was der Abschnitt zeigen soll: eine Marke, zwei Bereiche.

   Zuerst fuer 390 px gebaut - untereinander, grosse Flaechen, nichts
   gequetscht. Ab 880 px stehen Marke und Bereiche nebeneinander.

   Der Claim behaelt Kleinschreibung und Schlusspunkt: beides gehoert zur
   Wortmarke und wird nicht "korrigiert".
   ================================================================== */
.foot-dach{
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid var(--rule-strong);
}
.foot-dach-marke{
  display: block;
  width: 178px; height: auto;
  margin-bottom: 15px;
}
.foot-dach-link{ display: inline-block; }

.foot-claim{
  margin: 0;
  font-size: clamp(19px, 2.6vw, 23px);
  font-weight: 500; letter-spacing: -0.014em; line-height: 1.3;
  color: var(--ink);
  max-width: 22ch;
}

.foot-welten{ margin-top: 32px; }
.foot-welten-label{
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ink-3); margin: 0 0 2px;
}
.foot-welten-liste{ list-style: none; margin: 0; padding: 0; }
.foot-welt{ border-top: 1px solid var(--rule); }
.foot-welt:last-child{ border-bottom: 1px solid var(--rule); }

/* Eine Flaeche pro Bereich, nicht ein Wort. Auf dem Telefon wird der
   ganze Block angetippt, nicht eine Textzeile von 19 px. */
.foot-welt-flaeche{
  display: block;
  padding: 15px 0 16px;
  min-height: 56px;
  text-decoration: none;
  color: inherit;
}
a.foot-welt-flaeche:hover .foot-welt-name{ text-decoration: underline; }
a.foot-welt-flaeche:focus-visible{
  outline: 2px solid var(--ink);
  outline-offset: 3px;
  border-radius: 3px;
}
.foot-welt-name{
  display: block;
  font-size: 19px; font-weight: 600; letter-spacing: -0.012em;
  line-height: 1.24; color: var(--ink);
}
.foot-welt-rolle{
  display: block; margin-top: 3px;
  font-size: 13.5px; line-height: 1.35; color: var(--ink-3);
}

/* Der aktuelle Bereich wird typografisch gekennzeichnet, nicht als
   Reiter oder Pille: eine gruene Kante am Namen, sonst nichts. */
.foot-welt--hier .foot-welt-name{
  padding-left: 11px;
  box-shadow: inset 2px 0 0 var(--green);
}

.foot-bottom{ margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--rule); display: grid; gap: 8px; }
.foot-meta, .foot-scope, .foot-credit{ font-size: 14px; color: var(--ink-3); margin: 0; }
.foot-scope{ max-width: 62ch; }

/* =====================================================================
   CONSENT
   ================================================================== */
.consent{
  position: fixed; z-index: 80;
  left: max(var(--gutter), env(safe-area-inset-left));
  right: max(var(--gutter), env(safe-area-inset-right));
  bottom: max(var(--gutter), env(safe-area-inset-bottom));
  background: var(--paper); border: 1px solid var(--ink); border-radius: var(--radius);
  padding: 18px; display: grid; gap: 12px;
}
/* Diese Regel ist nicht optional. Das [hidden]-Attribut wirkt nur ueber
   "display: none" im Browser-Stylesheet - jede eigene display-Angabe schlaegt
   es. Ohne sie bleibt der Hinweis nach der Entscheidung sichtbar stehen,
   obwohl hidden gesetzt ist (gemessen: 283 px hoch, display grid). */
.consent[hidden]{ display: none; }
.consent:focus{ outline: 2px solid var(--ink); outline-offset: 3px; }
.consent-titel{
  font-size: 16px; font-weight: 600; line-height: 1.3;
  letter-spacing: -0.01em; color: var(--ink); margin: 0;
}
.consent p{ font-size: 14.5px; color: var(--ink-2); }

/* Beide Schaltflaechen gleich breit und gleich gewichtet. Auf schmalen
   Geraeten stehen sie nebeneinander statt untereinander - eine gestapelte
   Anordnung macht die obere automatisch zur naheliegenden Wahl. */
.consent-actions{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.consent-actions .btn{ width: 100%; }

/* Widerruf im Fussbereich: sieht aus wie die uebrigen Fusszeilen-Verweise,
   ist aber ein echter Knopf - er navigiert nicht, er oeffnet den Banner. */
.foot-consent{ margin: 0; }
.foot-consent-knopf{
  padding: 0; border: 0; background: none;
  font: inherit; font-size: 14px; color: var(--ink-3);
  text-decoration: underline; text-underline-offset: 3px;
  cursor: pointer;
}
.foot-consent-knopf:hover{ color: var(--ink); }
.foot-consent-knopf:focus-visible{ outline: 2px solid var(--ink); outline-offset: 3px; border-radius: 3px; }

/* =====================================================================
   UNTERSEITEN
   ================================================================== */
.page-narrow{ max-width: 880px; padding-top: clamp(24px, 4vw, 40px); padding-bottom: var(--space); }
.breadcrumb{ font-size: 13.5px; color: var(--ink-3); margin-bottom: 22px; }
.breadcrumb a{ color: var(--ink-3); }
.breadcrumb a:hover{ color: var(--ink); }
.breadcrumb span{ margin: 0 7px; }

.page-kicker{ font-size: 12.5px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 12px; }
.page-title{ max-width: 22ch; margin-bottom: 18px; }
.page-lead{ font-size: 19px; color: var(--ink-2); max-width: var(--maxw-text); margin-bottom: 10px; }
.page-stand{ font-size: 13.5px; color: var(--ink-3); margin-bottom: 36px; }

.prose{ max-width: var(--maxw-text); hyphens: auto; }
.prose h2{ font-size: clamp(21px, 3vw, 25px); margin: 40px 0 14px; }
.prose h3{ margin: 28px 0 10px; }
.prose p, .prose li{ color: var(--ink-2); }
.prose strong{ color: var(--ink); font-weight: 600; }
.prose ul, .prose ol{ margin: 0 0 1.05em; padding-left: 1.1em; }
.prose li + li{ margin-top: 9px; }
.prose > *:first-child{ margin-top: 0; }
.prose .said{ margin: 24px 0; }
/* Notausgang fuer einzelne ueberlange Tokens (Dateinamen, Nummern). */
.prose a, .source-note{ overflow-wrap: anywhere; }

.plain-list{ list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.source-note{ margin-top: 32px; padding: 16px 18px; background: var(--paper-2); border-radius: var(--radius); font-size: 14px; color: var(--ink-3); }
.source-note strong{ color: var(--ink-2); }

/* Fristenleiter: mobil gestapelte Bloecke statt einer scrollenden Tabelle. */
.deadline-list{ margin: 24px 0; }
.deadline{ padding: 18px 0; border-top: 1px solid var(--rule); display: grid; gap: 5px; min-width: 0; }
.deadline > *{ min-width: 0; }
.deadline:last-child{ border-bottom: 1px solid var(--rule); }
.deadline-when{ font-weight: 600; color: var(--green-deep); font-variant-numeric: tabular-nums; }
.deadline-who{ font-size: 13px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-3); }
.deadline-what{ color: var(--ink-2); }


.legal-back{ display: inline-block; margin-bottom: 20px; font-size: 14.5px; }
.error-page{ padding-top: clamp(40px, 8vw, 80px); }

/* =====================================================================
   GROESSERE VIEWPORTS

   Mobile first. Auf dem Desktop wird die Seite nicht groesser, sondern
   nur zweispaltig, wo zwei Spalten etwas nuetzen. Keine XXL-Headlines,
   keine dekorativen Leerflaechen.
   ================================================================== */
@media (min-width: 600px){
  :root{ --gutter: 28px; }
  .field-row{ grid-template-columns: 1fr 1fr; }
  .form-shell{ padding: 26px; }
  .foot-nav{ grid-template-columns: repeat(3, 1fr); }
  .foot-welten-liste{ display: grid; grid-template-columns: 1fr 1fr; gap: 0 40px; }
  .foot-welt:nth-child(2){ border-bottom: 1px solid var(--rule); }
  .foot-bottom{ grid-template-columns: 1fr auto; align-items: baseline; }
  .foot-scope{ grid-column: 1 / -1; }
  .consent{ left: auto; right: 24px; max-width: 440px; }
  .consent-actions{ grid-template-columns: auto auto; justify-content: start; }
  .hero-figure{ max-width: 320px; }
}

@media (min-width: 880px){
  :root{ --gutter: 36px; }
  body{ font-size: 17.5px; }

  /* Marke links, Bereiche rechts. Die Marke bleibt die groessere Spalte -
     das Groessenverhaeltnis traegt die Aussage, nicht eine Beschriftung. */
  .foot-dach{ display: grid; grid-template-columns: 1.06fr 0.94fr; gap: 56px; align-items: start; }
  .foot-dach-marke{ width: 236px; margin-bottom: 18px; }
  .foot-welten{ margin-top: 5px; }
  .foot-welten-liste{ display: block; }
  .foot-welt:nth-child(2){ border-bottom: 1px solid var(--rule); }

  .primary-nav{ display: block; }
  .head-right .btn{ display: inline-flex; }
  .head-phone{ display: inline; }
  /* Telefonnummer steht auf dem Desktop schon im Kopfbereich. */
  .hero-actions .btn-ghost{ display: none; }
  .nav-toggle{ display: none; }
  .mobile-nav{ display: none !important; }

  /* Hero: Text und Bild nebeneinander, aber das Bild bleibt die kleinere
     Spalte. Es ist ein Portrait, kein Buehnenbild. */
  .hero-grid{ display: grid; grid-template-columns: 1.35fr 0.65fr; gap: 48px; align-items: start; }
  /* Ohne Portrait keine leere zweite Spalte: der Hero laeuft einspaltig
     und begrenzt sein Mass selbst, statt eine Luecke zu reservieren. */
  /* V4: Text links, Metapher rechts. Die rechte Bildschirmhaelfte war
     vorher entweder leer oder mit weiteren Textbloecken gefuellt - jetzt
     traegt sie die Leitform. Bewusst nicht 50/50: die Aussage bleibt die
     Hauptsache, die Grafik gibt ihr Luft. */
  .hero-grid--textonly{
    display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 56px; align-items: center; max-width: none;
  }
  .hero-grid--textonly .hero-support{ max-width: 32ch; }
  .hero-grid--textonly .hero-ident{ margin-top: 30px; padding-top: 22px; font-size: 16.5px; max-width: 40ch; }
  .hero-stage{ margin-top: 0; }
  .orbit-art{ width: min(100%, 380px); }
  .stage-cards{ width: min(100%, 360px); margin-top: -40px; }
  /* Schmalere Kolumne als vorher, weil rechts jetzt etwas steht. */
  .hero h1{ max-width: 15ch; }

  /* Vier Beziehungen nebeneinander, sobald Platz ist. Die Bezeichnung
     bleibt das lesbare Element, das Logo darunter - umgekehrt waere es eine
     Logoleiste, und die gehoert Seite A. */
  .orgs-row{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 0 32px; }
  .orgs-row .org{ border-bottom: 0; padding-bottom: 0; }
  /* Drei Spalten, weil es drei Wissensseiten sind. Bei zwei Spalten fiel die
     dritte in eine eigene Zeile und stand dort allein. */
  .know-row{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 36px; }
  .split{ grid-template-columns: 1fr 1fr; gap: 22px; }
  .handover{ grid-template-columns: 1fr auto 1fr; gap: 0; align-items: center; }
  .handover-mid{ grid-auto-flow: column; padding: 0 18px; gap: 12px; }
  .handover-line{ width: 26px; height: 1.5px; }
  .contrast{ grid-template-columns: 1fr 1fr; column-gap: 40px; }
  .contrast-part:last-child{ border-bottom: 0; }
  .know-row .know-item{ border-bottom: 0; }
  .hero{ padding-bottom: var(--space-tight); }
  .hero-figure{ margin-top: 4px; max-width: none; }

  /* Zwei Spalten nur, wo die rechte Spalte wirklich etwas beitraegt. */
  .cols{ display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: start; }
  .cols > *{ min-width: 0; }
  .cols-lead{ display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 48px; align-items: start; }

  /* Zwei Spalten: links Bezeichnung und rechtlicher Rahmen, rechts die
     Beschreibung. Zellen explizit zuweisen - eine Regel auf ".service p"
     erfasst auch die Rahmen-Zeile und legt beide Absaetze in dieselbe
     Zelle (genau das ist beim ersten Desktop-Durchgang passiert). */
  .service{ display: grid; grid-template-columns: 300px 1fr; column-gap: 40px; align-items: start; }
  .service h3{ grid-column: 1; grid-row: 1; margin-bottom: 4px; }
  .service .service-legal{ grid-column: 1; grid-row: 2; margin-bottom: 0; }
  .service > p:not(.service-legal){ grid-column: 2; grid-row: 1 / span 2; }

  .step{ display: grid; grid-template-columns: 260px 1fr; column-gap: 40px; align-items: start; }
  .step h3{ grid-column: 1; grid-row: 1; }
  .step p{ grid-column: 2; grid-row: 1; }

  .contact-grid{ grid-template-columns: 0.8fr 1.2fr; gap: 48px; }

  .deadline{ grid-template-columns: 210px 1fr; column-gap: 32px; }
  .deadline-who{ grid-column: 1; grid-row: 2; }
  .deadline-what{ grid-column: 2; grid-row: 1 / span 2; }
}

/* Sehr schmale Geraete. */
@media (max-width: 360px){
  :root{ --gutter: 16px; }
  .btn{ padding: 13px 17px; font-size: 15px; }
}

/* Unterhalb von 340 px - in der Praxis vor allem starker Browserzoom -
   wird der Menue-Schalter zum reinen Symbol. Die Beschriftung bleibt im
   Barrierefreiheits-Baum, sie verschwindet nur optisch, damit der Schalter
   weiterhin einen Namen hat. */
@media (max-width: 340px){
  /* 200 %-Zoom auf einem 390-px-Geraet entspricht 195 px. Bei 34 px
     Logohoehe (134 px breit) plus Menueschalter passt die Kopfzeile dort
     nicht mehr. Verkleinert wird ausschliesslich die Darstellung, nie die
     Datei. 26 px Hoehe = 102 px Breite. */
  .brand-logo{ height: 26px; }
  .nav-toggle{ padding: 10px 12px; }
  .nav-toggle-label{
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
}

@media print{
  .site-head, .consent, .nav-toggle{ display: none !important; }
  body{ background: #fff; font-size: 11pt; }
  .reveal{ opacity: 1 !important; transform: none !important; }
}

/* ==========================================================================
   CREATIVE REBUILD — SIGNATURE MOMENT I: DER HERO-LOOP
   --------------------------------------------------------------------------
   Die Marke in acht Sekunden, ohne ein Wort: lose Teile kommen an, richten
   sich aus, genau eines wird wichtig und bleibt es.
   ALIGN -> FOCUS -> SETTLE.

   Erster Versuch verworfen: gleich dicke, gleichmaessig gestapelte graue
   Balken in einer weissen Karte sind ein Skeleton-Loader - genau das
   Muster, das jeder Website-Generator ausspuckt. Jetzt sind es Teile mit
   unterschiedlicher Breite und leichter Drehung: das liest sich als
   Aufzeichnungen, nicht als Diagramm.

   HARTE REGEL AUS V4.1.1, unveraendert gueltig: Die Breiten sind statisch
   und animieren NIE. Eine wechselnde Laenge im Finanzkontext wird als
   wechselnder Wert gelesen. Animiert werden nur Position, Drehung,
   Deckkraft, Schaerfe und die Farbe des einen Teils.
   ========================================================================== */

.hero-loop{ --hl-cycle: 9s; }

.hl-stack{ display: grid; gap: 11px; padding: 2px 0; justify-items: start; }

.hl-piece{
  display: block;
  height: 9px;
  width: var(--w);               /* statisch, animiert nie - siehe oben */
  min-width: 40px;
  border-radius: 4px;
  background: rgba(23, 27, 21, 0.12);
  transform-origin: left center;
}

/* Ohne Bewegung: der Endzustand. Ausgerichtet, eines hervorgehoben. */
.hl-piece--focus{
  background: var(--green);
  box-shadow: 0 1px 6px rgba(12, 143, 92, 0.26);
}

@media (prefers-reduced-motion: no-preference){
  .hl-piece{
    animation: zb-hl-align var(--hl-cycle) var(--ease) infinite both;
    animation-delay: calc(var(--i) * 130ms);
  }
  .hl-piece--focus{
    animation-name: zb-hl-align, zb-hl-focus;
    animation-duration: var(--hl-cycle), var(--hl-cycle);
    animation-delay: calc(var(--i) * 130ms), calc(var(--i) * 130ms);
  }
}

@keyframes zb-hl-align{
  0%   { opacity: 0; filter: blur(5px);
         transform: translate3d(calc(-34px - var(--i) * 5px), calc(var(--i) * 1.5px - 4px), 0) rotate(calc(var(--r) * 7)); }
  18%  { opacity: 0.9; filter: blur(1.6px); }
  32%  { opacity: 1; filter: blur(0); transform: rotate(var(--r)); }
  82%  { opacity: 1; filter: blur(0); transform: rotate(var(--r)); }
  100% { opacity: 0; filter: blur(3px); transform: translate3d(12px, 0, 0) rotate(var(--r)); }
}

@keyframes zb-hl-focus{
  0%, 44%  { background: rgba(23, 27, 21, 0.12); box-shadow: none; }
  58%      { background: var(--green); box-shadow: 0 2px 10px rgba(12, 143, 92, 0.30); }
  82%      { background: var(--green); box-shadow: 0 1px 6px rgba(12, 143, 92, 0.24); }
  100%     { background: var(--green); box-shadow: none; }
}

@media (max-width: 700px){
  .hl-stack{ gap: 9px; }
  .hl-piece{ height: 8px; }
}

/* ==========================================================================
   CREATIVE REBUILD — SZENE 2: DIE ZWEITE ZAHL
   --------------------------------------------------------------------------
   Zwei Groessen nebeneinander. Die eine kennt man, die andere nicht.
   Der Unterschied ist ausschliesslich Schaerfe - die visuelle Grammatik der
   ganzen Seite (siehe ZUMSANDE_CREATIVE_DIRECTION.md, Abschnitt 2).

   Die Unschaerfe liegt NIE auf Text. Sie liegt auf den abstrakten Zeilen,
   die aria-hidden sind. Beschriftung und Erlaeuterung bleiben in beiden
   Feldern voll lesbar und voll kontrastiert - Premium heisst auch, dass die
   Idee die Zugaenglichkeit nicht kostet.
   ========================================================================== */

.ask{ max-width: 24ch; }
.ask-q{
  font-size: clamp(24px, 3.6vw, 34px);
  line-height: 1.22;
  letter-spacing: -0.015em;
  font-weight: 620;
  max-width: 17ch;
  margin: 0;
}
.ask-a{
  margin: 18px 0 0;
  color: var(--ink-2);
  max-width: 30ch;
}

.twofold{
  display: grid;
  gap: 18px;
  margin-top: 44px;
}

.fold{
  min-width: 0;
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 22px 22px 20px;
  box-shadow: var(--lift-1);
}

.fold-label{
  margin: 0;
  font-weight: 620;
  font-size: 17px;
  letter-spacing: -0.01em;
}

.fold-lines{
  display: grid;
  gap: 9px;
  margin: 18px 0 18px;
}
.fold-lines span{
  display: block;
  height: 8px;
  width: var(--w);
  border-radius: 4px;
  background: rgba(23, 27, 21, 0.14);
}

.fold-note{
  margin: 0;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.5;
}

/* Das Feld, auf das noch niemand geschaut hat. Loest sich absichtlich
   NICHT auf - die Aufloesung gehoert dem Dialog weiter unten. */
.fold--soft .fold-lines span{
  filter: blur(3.5px);
  opacity: 0.5;
}
.fold--soft{ background: var(--paper-2); box-shadow: none; }

@media (prefers-reduced-motion: reduce){
  .fold--soft .fold-lines span{ filter: blur(2px); }
}

/* Der Absatz unter den Feldern gehoert in dieselbe Flucht wie sie. Die
   Standardregel .passage-solo zentriert ihn im Container - das brach hier
   die linke Kante der ganzen Szene. */
#alltag .passage-solo{ margin-inline: 0; max-width: 62ch; margin-top: 44px; }

@media (min-width: 760px){
  .twofold{ grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 52px; }
  .fold{ padding: 26px 26px 24px; }
  .ask{ max-width: none; }
  .ask-q{ max-width: 26ch; font-size: clamp(28px, 3.2vw, 40px); }
  .ask-a{ max-width: 36ch; }
  #alltag .passage-solo{ margin-top: 56px; }
}

/* ==========================================================================
   CREATIVE REBUILD — SIGNATURE MOMENT II: AUS UNORDNUNG WIRD ORDNUNG
   --------------------------------------------------------------------------
   DREI ZUSTAENDE, die einzeln lesbar sein muessen:

     START       echte Unordnung - Belege liegen uebereinander, gedreht,
                 zur Mitte geballt. Bleibt fast eine Sekunde STEHEN.
     TRANSITION  sie wandern gestaffelt in Spalten und verlieren die Drehung
     ENDE        gleiche Abstaende, gemeinsame Oberkante, ein Beleg wichtig

   DER FEHLER DER ERSTEN FASSUNG: Die Teile starteten mit opacity 0 und
   liefen sofort los. Den Startzustand hat man dadurch NIE gesehen - die
   Szene begann mitten in der Sortierung. Ohne sichtbares Chaos gibt es
   keine Verwandlung, nur eine Ankunft.

   Deshalb jetzt ZWEI getrennte Animationen pro Beleg:
     zb-appear  nur Deckkraft und Schaerfe, OHNE Versatz - alle zugleich,
                damit das Chaos als Bild steht
     zb-sort    nur transform, mit Verzoegerung und Staffelung
   Sie kollidieren nicht, weil sie verschiedene Eigenschaften anfassen.

   VIER BELEGFORMEN statt fuenfzehn gleicher Kacheln: Kassenbon (schmal,
   hoch, gerissene Unterkante), Rechnung (breit), Quittung (klein), Karte
   (flach). Gleich grosse Kacheln in gleichmaessigem Raster waren ein
   Skeleton-Loader - derselbe Fehler wie im ersten Hero-Loop.

   V4.1.1 gilt weiter: keine Breite und keine Hoehe animiert je. Bewegt
   werden ausschliesslich Position, Drehung, Deckkraft und Schaerfe.
   ========================================================================== */

.flow-stage{
  --sp: 1;                        /* Streufaktor, mobil kleiner */
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px 24px;
  align-items: start;
  justify-items: start;
  padding: 46px 6%;
  background: var(--paper-2);
  border-radius: var(--radius-lg);
  box-shadow: var(--lift-1), inset 0 1px 0 rgba(255,255,255,.7);
  overflow: hidden;
}

.slip{
  position: relative;
  display: block;
  width: var(--w);
  padding: 9px 10px;
  border-radius: 2px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(23,27,21,.15), 0 8px 18px rgba(23,27,21,.07);
  --fr: calc(var(--sr) * 0.035);  /* Restdrehung: Papier liegt nie gerade */
  transform: rotate(var(--fr));
}

/* Die angedeuteten Zeilen. Kein lesbarer Text, keine Ziffern. */
.slip i{
  display: block;
  height: 3px;
  border-radius: 2px;
  background: rgba(23,27,21,.14);
  margin-bottom: 6px;
}
.slip i:last-child{ margin-bottom: 0; width: 62%; }
.slip i:nth-child(2){ width: 88%; }
.slip i:nth-child(3){ width: 74%; }

/* --- Die vier Belegformen --- */
.slip--bon{ padding: 11px 10px 16px; }
.slip--bon i{ height: 2.5px; margin-bottom: 7px; }
/* gerissene Unterkante */
.slip--bon{
  -webkit-mask:
    linear-gradient(#000 0 0) top/100% calc(100% - 5px) no-repeat,
    repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 10px) bottom/100% 5px repeat-x;
          mask:
    linear-gradient(#000 0 0) top/100% calc(100% - 5px) no-repeat,
    repeating-linear-gradient(90deg, #000 0 5px, transparent 5px 10px) bottom/100% 5px repeat-x;
}
.slip--rech{ padding: 12px 12px; }
.slip--quitt{ padding: 9px 9px; background: #FDFCF9; }
.slip--karte{ padding: 11px 10px; border-radius: 4px; }
.slip--karte i{ height: 4px; width: 54%; }

/* Ein Beleg wird am Ende wichtig - FOCUS, wie im Hero. */
.slip:nth-child(8){ background: var(--green-mist); box-shadow: 0 1px 2px rgba(12,143,92,.26), 0 10px 22px rgba(12,143,92,.14); }
.slip:nth-child(8) i{ background: rgba(11,79,56,.26); }

@media (prefers-reduced-motion: no-preference){
  .js-reveal .flow-scene .slip{
    opacity: 0;
    transform: translate3d(calc(var(--sx) * var(--sp)), calc(var(--sy) * var(--sp)), 0) rotate(var(--sr));
  }
  .js-reveal .flow-scene.in .slip{
    animation:
      zb-appear 620ms var(--ease) both,
      zb-sort 1500ms cubic-bezier(0.16, 1, 0.3, 1) calc(1250ms + var(--i) * 55ms) both;
  }
}

/* START sichtbar machen: nur Deckkraft und Schaerfe, kein Versatz. */
@keyframes zb-appear{
  0%   { opacity: 0; filter: blur(5px); }
  100% { opacity: 1; filter: blur(0); }
}

/* TRANSITION: aus dem Haufen in die Spalte. */
@keyframes zb-sort{
  0%   { transform: translate3d(calc(var(--sx) * var(--sp)), calc(var(--sy) * var(--sp)), 0) rotate(var(--sr)); }
  55%  { transform: translate3d(calc(var(--sx) * var(--sp) * 0.28), calc(var(--sy) * var(--sp) * 0.28), 0) rotate(calc(var(--sr) * 0.3)); }
  100% { transform: rotate(var(--fr)); }
}

@media (max-width: 700px){
  .flow-stage{ --sp: 0.42; grid-template-columns: repeat(2, 1fr); gap: 16px 16px; padding: 34px 8%; }
  .slip:nth-child(n+9){ display: none; }   /* acht statt fuenfzehn */
}

/* ==========================================================================
   CREATIVE REBUILD — SIGNATURE MOMENT III: DER DIALOG ALS SZENE
   --------------------------------------------------------------------------
   Der Wortlaut bleibt unveraendert - er ist die staerkste belegte Stelle
   der ganzen Marke (Donwalzo 12:13-13:52). Geaendert wird nur, wie er
   auftritt: vorher eine weisse Karte mit kleiner Schrift, jetzt ein
   typografischer Raum mit zwei Stimmen.

   Die Grammatik der Seite gilt auch hier: Was jemand GLAUBT, steht weich
   und zurueckgenommen. Was jemand ANGESEHEN hat, steht scharf.
   Der Unternehmer spricht deshalb in gedaempftem Ton und leicht
   eingerueckt, Sabine steht klar und dunkel.

   FAKTENGEWICHT, unveraendert streng: Die Zeile mit den 1,2 Millionen wird
   NICHT groesser gesetzt als die Erklaerung darunter. Was die Zahl ist -
   saldierte Bewegungen, Einnahmen wie Ausgaben - muss zusammen mit ihr
   gelesen werden, sonst liest sie sich als Schaden oder als geretteter
   Betrag. Beides ist nirgends belegt. Der Schlusssatz bleibt konditional.
   ========================================================================== */

#mitdenken .exchange{
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding: 0;
  margin-top: 56px;
  max-width: 62ch;
}
#mitdenken .exchange::before{ display: none; }

#mitdenken .exchange-label{
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 30px;
}

#mitdenken .exchange-turn{
  margin-bottom: 34px;
  padding-left: 0;
  border-left: 0;
}

#mitdenken .exchange-who{
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin: 0 0 10px;
}

#mitdenken .exchange-line{
  font-size: clamp(19px, 2.2vw, 25px);
  line-height: 1.38;
  letter-spacing: -0.012em;
  margin: 0;
}

/* Der Glaubende: gedaempft, eingerueckt. Nicht laecherlich gemacht -
   nur noch nicht scharfgestellt. */
#mitdenken .exchange-turn:not(.exchange-turn--her) .exchange-line{
  color: var(--ink-2);
}

/* Sabine: klar, dunkel, mit Kante. */
#mitdenken .exchange-turn--her{
  border-left: 2px solid var(--green);
  padding-left: 22px;
}
#mitdenken .exchange-turn--her .exchange-line{
  color: var(--ink);
  font-weight: 560;
}

/* Die Erklaerung der Zahl steht direkt an ihr und wird nicht kleiner
   gemacht, als sie sein darf. */
#mitdenken .exchange-note{
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 46ch;
}

@media (min-width: 860px){
  #mitdenken .exchange{ margin-left: 6%; }
  #mitdenken .exchange-turn--her{ margin-left: 8%; }
}

/* REVEAL: Zeile fuer Zeile, nicht als Block. Kein Autoplay - es laeuft
   nur, wenn jemand scrollt. */
@media (prefers-reduced-motion: no-preference){
  .js-reveal #mitdenken .exchange-turn{
    opacity: 0;
    transform: translate3d(0, 14px, 0);
    transition: opacity 620ms var(--ease), transform 620ms var(--ease);
  }
  .js-reveal #mitdenken .exchange.in .exchange-turn{ opacity: 1; transform: none; }
  .js-reveal #mitdenken .exchange.in .exchange-turn:nth-of-type(2){ transition-delay: 260ms; }
  .js-reveal #mitdenken .exchange.in .exchange-turn:nth-of-type(3){ transition-delay: 520ms; }
  .js-reveal #mitdenken .exchange.in .exchange-turn:nth-of-type(4){ transition-delay: 780ms; }
  .js-reveal #mitdenken .exchange.in .exchange-turn:nth-of-type(5){ transition-delay: 1040ms; }
}

/* ==========================================================================
   CREATIVE REBUILD — SZENE 6: VERARBEITEN GEGEN EINORDNEN
   --------------------------------------------------------------------------
   Das Kernargument der Marke war bisher beschrieben, nicht gezeigt: zwei
   Karten mit Text und Haekchen. Jetzt wird der Unterschied sichtbar.

   Oben laeuft alles glatt durch. Unten laeuft es auch - bis EINES
   stehenbleibt. Dort bleibt das Licht liegen, und daneben entsteht die
   Rueckfrage. FLOW, unterbrochen von FOCUS.

   Wer die Ueberschrift abdeckt, versteht die Szene trotzdem. Das war das
   Pruefkriterium.

   WICHTIG - V4.1.1 gilt weiter: Die Zeilen aendern NIE ihre Laenge. Eine
   wachsende Linie im Finanzkontext liest sich als wachsender Wert. Animiert
   wird ausschliesslich ein Lichtpunkt, der ueber die unveraenderte Zeile
   wandert. Bei der markierten Zeile bleibt er auf halbem Weg stehen - das
   ist die ganze Aussage.
   ========================================================================== */

#software .split-line{ position: relative; overflow: hidden; }

#software .split-line::after{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(90deg,
    rgba(12,143,92,0) 0%, rgba(12,143,92,.55) 45%, rgba(12,143,92,0) 100%);
  transform: translateX(-100%);
  opacity: 0;
}

#software .srow-dot{ opacity: 0.28; transition: opacity 420ms var(--ease); }

@media (prefers-reduced-motion: no-preference){
  .js-reveal #software .split.in .split-line::after{
    animation: zb-pass 1500ms var(--ease) both;
  }
  .js-reveal #software .split.in .split-rows li:nth-child(2) .split-line::after{ animation-delay: 220ms; }
  .js-reveal #software .split.in .split-rows li:nth-child(3) .split-line::after{ animation-delay: 440ms; }

  /* Das eine, das nicht durchlaeuft. Das Licht bleibt liegen. */
  .js-reveal #software .split.in .is-flagged .split-line::after{
    animation: zb-stop 1500ms var(--ease) 220ms both;
  }

  .js-reveal #software .split.in .srow-dot{ opacity: 1; transition-delay: 1500ms; }
  .js-reveal #software .split.in .is-flagged .srow-dot{ transition-delay: 900ms; }

  .js-reveal #software .split-ask{
    opacity: 0; transform: translate3d(0, 8px, 0);
    transition: opacity 560ms var(--ease) 1700ms, transform 560ms var(--ease) 1700ms;
  }
  .js-reveal #software .split.in .split-ask{ opacity: 1; transform: none; }
}

@keyframes zb-pass{
  0%   { transform: translateX(-100%); opacity: 0; }
  12%  { opacity: 1; }
  88%  { opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

/* Haelt auf halbem Weg an und bleibt. */
@keyframes zb-stop{
  0%   { transform: translateX(-100%); opacity: 0; }
  14%  { opacity: 1; }
  55%  { transform: translateX(-18%); opacity: 1; }
  100% { transform: translateX(-18%); opacity: 1; }
}

/* Die markierte Zeile bekommt Kontur - sie bleibt liegen, also sieht man sie. */
#software .is-flagged .split-line{
  background: var(--green-mist);
  box-shadow: inset 0 0 0 1px rgba(12,143,92,.28);
}

/* ==========================================================================
   CREATIVE REBUILD — SZENE 10: AUS VIER PUNKTEN WIRD EIN WEG
   --------------------------------------------------------------------------
   Vorher: vier Textpunkte mit einer fertig gezeichneten Linie daneben.
   Jetzt zeichnet sich die Linie beim Scrollen von Station zu Station, und
   der Wegpunkt fuellt sich, wenn er erreicht ist. FLOW.

   WARUM NICHT HORIZONTAL AM DESKTOP: Neben der Schrittfolge steht das
   Objekt "Hier kommen deine Unterlagen rein" in einer zweiten Spalte. Ein
   quer laufender Weg wuerde diese Spalte verdraengen und das Objekt
   verlieren. Vertikal mit gezeichneter Linie erzaehlt dieselbe Bewegung,
   ohne etwas dafuer aufzugeben - auf beiden Breiten dieselbe Szene.
   ========================================================================== */

.stop-node{ transition: background-color 420ms var(--ease), box-shadow 420ms var(--ease); }

/* Die alte Linie hing am 16-px-Knoten und war deshalb nur ein Stummel -
   sie erreichte die naechste Station nie. Jetzt haengt sie an der Station
   selbst und laeuft durch. */
.stop:not(:last-child) .stop-node::after{ display: none; }
.stop:not(:last-child)::before{
  content: "";
  position: absolute;
  left: 8px;
  top: 25px;
  bottom: 4px;
  width: 1.5px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom, var(--green), rgba(12,143,92,0.28));
}

@media (prefers-reduced-motion: no-preference){
  .js-reveal .stop:not(:last-child)::before{
    transform: translateX(-50%) scaleY(0);
    transform-origin: top center;
    transition: transform 900ms cubic-bezier(0.33, 1, 0.68, 1) 120ms;
  }
  .js-reveal .stop.in:not(:last-child)::before{
    transform: translateX(-50%) scaleY(1);
  }

  .js-reveal .stop .stop-node{ background: var(--white); }
  .js-reveal .stop.in .stop-node{
    background: var(--green);
    box-shadow: 0 0 0 4px rgba(12,143,92,.12);
  }
}

/* ==========================================================================
   CREATIVE REBUILD — SZENE 7: WO STEHST DU GERADE?
   --------------------------------------------------------------------------
   Kein Formular. Ein Gespraech mit einer Komposition daneben.

   DAS MEISTE LAEUFT OHNE JAVASCRIPT. Ueber :has() reagiert die Szene auf
   echte Radiofelder:
     - die beantwortete Frage tritt zurueck und behaelt nur noch die
       gewaehlte Antwort - sie "setzt sich"
     - der zugehoerige Punkt in der Komposition springt auf den Ring und
       wird scharf
     - sind alle fuenf beantwortet, schliesst sich der Ring
   JavaScript ergaenzt nur zweierlei: welche Frage gerade vorn steht, und
   den Schlusssatz nach Antwortmuster. Ohne JS steht der neutrale Satz.

   KEIN SCORE: keine Zahl, kein Prozent, keine Ampel, keine Diagnose. Die
   Mitte traegt Worte, nie einen Wert.
   ========================================================================== */

.ort{ --ring: 132px; }

.ort-title{ margin: 0 0 10px; }
.ort-sub{ color: var(--ink-2); margin: 0; max-width: 46ch; }

.ort-body{ display: grid; gap: 40px; margin-top: 40px; align-items: start; }
.ort-body > *{ min-width: 0; }

/* --- Die Fragen --- */
.ort-fragen{ display: grid; gap: 14px; }
/* Der Aendern-Knopf gehoert allein zum Schrittmodus auf schmalen Geraeten.
   Ohne diese Regel stuende er ab 860 px sichtbar in der Komposition. */
.frage-aendern{ display: none; }

.frage{
  border: 0;
  margin: 0;
  padding: 22px 0 24px;
  /* Hier stand eine Trennlinie ueber dem Token --line. Zwei Gruende,
     warum die Zeile ersatzlos entfaellt: --line existiert nicht, und .frage ist
     ein <fieldset>, dessen <legend class="frage-text"> die volle Breite
     einnimmt (gemessen 547 von 547 px, Versatz 0). Der Browser schneidet
     die obere Rahmenlinie hinter der Legende heraus - die Trennlinie
     konnte hier also nie erscheinen, auch mit korrektem Token nicht. */
  transition: opacity 520ms var(--ease);
}
.frage:first-child{ border-top: 0; padding-top: 4px; }

.frage-text{
  display: flex;
  gap: 14px;
  padding: 0;
  font-size: clamp(18px, 2.1vw, 23px);
  line-height: 1.34;
  letter-spacing: -0.012em;
  font-weight: 560;
  margin-bottom: 18px;
  transition: font-size 420ms var(--ease), color 420ms var(--ease);
}
.frage-nr{
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 620;
  color: var(--green);
  padding-top: 0.45em;
  font-variant-numeric: tabular-nums;
}

.antworten{ display: grid; gap: 9px; }

/* KEINE Antwortkaesten. Drei gleiche weisse Boxen untereinander sind ein
   Formular - und zwar genau das Formular, das jeder Wettbewerber hat.
   Hier waehlt man den Satz, den man selbst sagen wuerde. Deshalb stehen
   die Antworten als Saetze da, nicht als Bedienelemente. */
.antwort{
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-height: 48px;
  padding: 10px 0 10px 2px;
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: border-color 240ms var(--ease), padding-left 240ms var(--ease), color 240ms var(--ease);
}
.antwort:hover{ border-left-color: rgba(12,143,92,.4); padding-left: 14px; }

/* Echtes Radiofeld, sichtbar fuer die Tastatur, gestaltet als Punkt. */
.antwort input{
  appearance: none;
  flex: 0 0 auto;
  width: 9px; height: 9px;
  margin: 0;
  align-self: center;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(23,27,21,.26);
  background: transparent;
  transition: box-shadow 220ms var(--ease), background-color 220ms var(--ease);
}
.antwort input:checked{
  background: var(--green);
  box-shadow: inset 0 0 0 1.5px var(--green), 0 0 0 3px rgba(12,143,92,.14);
}
.antwort input:focus-visible{ outline: 2px solid var(--green-deep); outline-offset: 3px; }
.antwort-text{ font-size: clamp(16.5px, 1.8vw, 19px); line-height: 1.4; }

/* Die Antwort setzt sich: die uebrigen Moeglichkeiten treten ab, die
   gewaehlte bleibt stehen. Reines CSS, kein Skript. */
.frage:has(input:checked) .antwort:not(:has(input:checked)){ display: none; }
/* Die gewaehlte Antwort bleibt als gesagter Satz stehen - dieselbe
   Behandlung, die Sabines woertliche Saetze auf der Seite bekommen. */
.frage:has(input:checked) .antwort{
  border-left-color: var(--green);
  padding-left: 16px;
  font-style: italic;
}
.frage:has(input:checked) .frage-text{ font-size: clamp(15.5px, 1.6vw, 17px); color: var(--ink-2); font-weight: 500; }

/* --- Die Komposition --- */
.ort-bild{
  position: relative;
  margin: 0;
  aspect-ratio: 1;
  max-width: 340px;
  justify-self: center;
}

.ort-ring{
  position: absolute; inset: 50% auto auto 50%;
  width: calc(var(--ring) * 2); height: calc(var(--ring) * 2);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(12,143,92,.16);
  opacity: 0.5;
  transition: opacity 700ms var(--ease), box-shadow 700ms var(--ease);
}

.ort-mitte{
  position: absolute; inset: 50% auto auto 50%;
  transform: translate(-50%, -50%);
  width: 118px; height: 118px;
  border-radius: 50%;
  display: grid; place-items: center;
  text-align: center;
  background: var(--white);
  box-shadow: var(--lift-1);
  font-size: 14.5px; line-height: 1.3; font-weight: 560;
  color: var(--ink-3);
  transition: color 620ms var(--ease), box-shadow 620ms var(--ease);
}

.ort-punkt{
  position: absolute; left: 50%; top: 50%;
  width: 0; height: 0;
  --o: 1.3;                      /* je Punkt anders, siehe unten */
  transform: rotate(calc(var(--a) + var(--dev, 0deg))) translateY(calc(-1 * var(--ring) * var(--o))) rotate(calc(-1 * var(--a) - var(--dev, 0deg)));
  transition: transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
}
/* Weichzeichnung und Deckkraft liegen auf dem PUNKT, nicht auf der
   Beschriftung: gedaempfter Text hat den Kontrast unter die Schwelle
   gedrueckt (axe, 5 Elemente). Der Zustand wird ueber den Punkt erzaehlt,
   die Bezeichnung bleibt jederzeit voll lesbar. */
.ort-punkt b{ filter: blur(2.5px); opacity: 0.42; transition: filter 620ms var(--ease), opacity 620ms var(--ease); }
.ort-punkt:nth-of-type(1){ --o: 1.44; --dev: -13deg; }
.ort-punkt:nth-of-type(2){ --o: 1.18; --dev:  9deg; }
.ort-punkt:nth-of-type(3){ --o: 1.52; --dev:  16deg; }
.ort-punkt:nth-of-type(4){ --o: 1.26; --dev: -18deg; }
.ort-punkt:nth-of-type(5){ --o: 1.38; --dev:  6deg; }

.ort-punkt b{
  position: absolute; left: -5px; top: -5px;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--green);
}
.ort-punkt i{
  position: absolute; left: 50%; top: 14px;
  transform: translateX(-50%);
  font-style: normal; font-size: 13px; white-space: nowrap;
  color: var(--ink-2);
}

/* Beantwortet: der Punkt findet seinen Platz auf dem Ring und wird scharf. */
.ort-body:has(input[name="ort1"]:checked) .ort-punkt[data-d="1"],
.ort-body:has(input[name="ort2"]:checked) .ort-punkt[data-d="2"],
.ort-body:has(input[name="ort3"]:checked) .ort-punkt[data-d="3"],
.ort-body:has(input[name="ort4"]:checked) .ort-punkt[data-d="4"],
.ort-body:has(input[name="ort5"]:checked) .ort-punkt[data-d="5"]{
  transform: rotate(var(--a)) translateY(calc(-1 * var(--ring))) rotate(calc(-1 * var(--a)));
  --dev: 0deg;
}
.ort-body:has(input[name="ort1"]:checked) .ort-punkt[data-d="1"] b,
.ort-body:has(input[name="ort2"]:checked) .ort-punkt[data-d="2"] b,
.ort-body:has(input[name="ort3"]:checked) .ort-punkt[data-d="3"] b,
.ort-body:has(input[name="ort4"]:checked) .ort-punkt[data-d="4"] b,
.ort-body:has(input[name="ort5"]:checked) .ort-punkt[data-d="5"] b{ filter: none; opacity: 1; }

/* Sobald ueberhaupt etwas beantwortet ist, gewinnt die Mitte Kontur. */
.ort-body:has(input:checked) .ort-mitte{ color: var(--ink); box-shadow: var(--lift-2); }

/* Alle fuenf: der Ring schliesst sich. Kette auf EINER Zeile - Umbrueche
   wuerden daraus Nachfahren-Selektoren machen. */
.ort-body:has(input[name="ort1"]:checked):has(input[name="ort2"]:checked):has(input[name="ort3"]:checked):has(input[name="ort4"]:checked):has(input[name="ort5"]:checked) .ort-ring{ opacity: 1; box-shadow: inset 0 0 0 1.5px rgba(12,143,92,.42); }

/* --- Schluss --- */
.ort-schluss{ margin-top: 40px; display: grid; gap: 20px; justify-items: start; }
.ort-satz{
  margin: 0;
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.4;
  max-width: 34ch;
  font-weight: 560;
}

@media (min-width: 860px){
  .ort{ --ring: 132px; }
  .ort-body{ grid-template-columns: 1.15fr 0.85fr; gap: 56px; }
  .ort-bild{ position: sticky; top: 96px; }
}

@media (max-width: 859px){
  /* Ring und Mitte muessen mitschrumpfen. Mit festen 104 px war der Ring
     208 px breit und lief bei 200 %-Zoom (rund 195 px) aus dem Dokument -
     er liegt in keinem beschnittenen Container. */
  .ort{ --ring: min(104px, 27vw); }
  .ort-bild{ max-width: min(280px, 100%); order: -1; }
  .ort-mitte{ width: min(98px, 44vw); height: min(98px, 44vw); font-size: clamp(11px, 3.4vw, 13.5px); }
  .ort-punkt i{ display: none; }   /* die Frage traegt die Bezeichnung */
}

@media (prefers-reduced-motion: reduce){
  .ort-punkt, .ort-mitte, .ort-ring, .frage, .frage-text, .antwort{ transition: none; }
}

/* Die Frage, die gerade dran ist. Nur mit JavaScript gesetzt - ohne
   Skript sind alle Fragen gleichrangig und vollstaendig bedienbar. */
.frage[data-aktiv] .frage-text{ color: var(--ink); }
.frage:not([data-aktiv]):not(:has(input:checked)) .frage-text{ color: var(--ink-2); }
.frage:not([data-aktiv]):not(:has(input:checked)) .antworten{ opacity: .72; transition: opacity 420ms var(--ease); }
.frage[data-aktiv] .antworten{ opacity: 1; }

/* ==========================================================================
   CREATIVE REBUILD — SZENE 8: DER HUMAN TURN
   --------------------------------------------------------------------------
   Hier hoert die Maschine auf und ein Mensch spricht.

   TEMPERATURWECHSEL: der einzige Abschnitt der Startseite auf tiefem Gruen.
   Nach neun hellen Abschnitten aendert sich das Licht. Derselbe Ton wie im
   Fussbereich - gesetzte Markenfarbe, keine neue Erfindung.

   KARTENSYSTEM GEBROCHEN: kein Panel, kein Rahmen, kein Schatten. Grosse
   Typografie, viel Luft, Asymmetrie. Sabines Satz ist der GROESSTE Text der
   Seite - groesser als die H1. Das ist Absicht: man hoert sie, bevor man
   ihren Werdegang liest.

   BEWEGUNG WIRD RUHIGER, nicht mehr. Die drei Zeilen kommen nacheinander,
   die letzte setzt sich zuletzt und wird als einzige voll weiss. Kein Glas,
   kein Loop, kein Karussell. Das Portrait kommt langsam und bleibt.
   ========================================================================== */

.mensch{
  background: var(--green-deep);
  color: #FFFFFF;
  padding-block: clamp(72px, 11vw, 132px);
}

.mensch-kicker{
  margin: 0 0 clamp(28px, 4vw, 48px);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

.mensch-satz{
  margin: 0;
  padding: 0;
  border: 0;
  display: grid;
  gap: 0.08em;
  /* Die Zeilen sind gesetzt, nicht dem Umbruch ueberlassen: bei 74 px
     zerfielen die drei gemeinten Zeilen in fuenf. Groesse so weit
     zurueckgenommen, dass die laengste Zeile (35 Zeichen) steht. */
  max-width: 30ch;
  font-size: clamp(27px, 4.4vw, 52px);
  line-height: 1.12;
  letter-spacing: -0.028em;
  font-weight: 620;
  font-style: normal;
}
.msatz-zeile{ display: block; color: rgba(255,255,255,.66); text-wrap: balance; }
.msatz-zeile--letzt{ color: #FFFFFF; }
.mensch-satz em{
  font-style: normal;
  box-shadow: inset 0 -0.09em 0 rgba(255,255,255,.34);
}

.mensch-von{
  margin: clamp(24px, 3.4vw, 38px) 0 0;
  font-size: 13px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(255,255,255,.62);
}

.mensch-unten{
  display: grid;
  gap: 34px;
  margin-top: clamp(52px, 7vw, 88px);
  align-items: start;
}
.mensch-unten > *{ min-width: 0; }

.mensch-bild .photo{ margin: 0; }
.mensch-bild img{
  border-radius: var(--radius-md);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}

.mensch-text p{ color: rgba(255,255,255,.82); max-width: 54ch; }
.mensch-text .first{ color: #FFFFFF; font-size: clamp(18px, 2.1vw, 21px); }
.link-more--hell{ color: #FFFFFF; }
.link-more--hell:hover{ color: var(--green-mist); }

/* --- Vertrauen: danach, auf hellem Grund, in eigener Ruhe --- */
.mensch-trust{ background: var(--paper); padding-block: clamp(48px, 6vw, 76px); }

@media (min-width: 880px){
  .mensch-unten{ grid-template-columns: 340px minmax(0, 1fr); gap: 64px; align-items: end; }
  .mensch-satz{ max-width: 26ch; }
}

/* Bewegung: Zeile fuer Zeile, dann das Bild. Ruhiger als alles davor. */
@media (prefers-reduced-motion: no-preference){
  .js-reveal .mensch-satz .msatz-zeile{
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 760ms var(--ease), transform 760ms var(--ease);
  }
  .js-reveal .mensch-satz.in .msatz-zeile{ opacity: 1; transform: none; }
  .js-reveal .mensch-satz.in .msatz-zeile:nth-child(2){ transition-delay: 300ms; }
  .js-reveal .mensch-satz.in .msatz-zeile:nth-child(3){ transition-delay: 620ms; }

  .js-reveal .mensch-satz .msatz-zeile--letzt{ color: rgba(255,255,255,.66); }
  .js-reveal .mensch-satz.in .msatz-zeile--letzt{ color: #FFFFFF; transition: opacity 760ms var(--ease) 620ms, transform 760ms var(--ease) 620ms, color 900ms var(--ease) 1180ms; }

  .js-reveal .mensch-bild{ opacity: 0; transform: translate3d(0, 22px, 0) scale(.985); transition: opacity 1100ms var(--ease) 300ms, transform 1100ms var(--ease) 300ms; }
  .js-reveal .mensch-bild.in{ opacity: 1; transform: none; }
}

/* ==========================================================================
   CREATIVE REBUILD — DER SCHLUSS
   --------------------------------------------------------------------------
   Die Seite hoerte vorher auf: Ueberschrift, Formular, fertig. Jetzt steht
   davor ein Akt mit einer echten Pause.

   Die Frage ist der Rueckruf auf den Anfang der Seite. Beantwortet wird sie
   nicht hier, sondern im Fussbereich durch den Claim - deshalb steht der
   Claim hier NICHT. Zweimal derselbe Satz waere Wiederholung.

   Der Punkt vor der Aufstellzeile ist die Mitte aus Szene 7. Wiedererkennung,
   nicht Wiederholung: kein Ring, keine fuenf Punkte, nur der eine.
   ========================================================================== */

.schluss{ padding-top: clamp(84px, 12vw, 150px); }

.schluss-akt{ margin-bottom: clamp(64px, 9vw, 118px); }

.schluss-setup{
  display: flex; align-items: center; gap: 12px;
  margin: 0 0 clamp(18px, 2.6vw, 28px);
  font-size: 14.5px;
  color: var(--ink-3);
}
.schluss-punkt{
  flex: 0 0 auto;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--green);
}

.schluss-frage{
  margin: 0;
  max-width: 16ch;
  font-size: clamp(34px, 7.4vw, 82px);
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-weight: 640;
}

@media (prefers-reduced-motion: no-preference){
  .js-reveal .schluss-akt .schluss-frage{
    opacity: 0; transform: translate3d(0, 20px, 0);
    transition: opacity 820ms var(--ease) 220ms, transform 820ms var(--ease) 220ms;
  }
  .js-reveal .schluss-akt.in .schluss-frage{ opacity: 1; transform: none; }
}

/* ==========================================================================
   CREATIVE REBUILD — BEVOR DU FRAGST (Preis und Passung)
   --------------------------------------------------------------------------
   Vorher zwei Panels nebeneinander. Zwei Karten am Seitenende sind genau
   das Muster, das jede Wettbewerberseite dort hat, meist als Preistabelle.
   Jetzt eine redaktionelle Doppelbewegung ohne Rahmen und ohne Schatten.

   Die Preishaltung steht als Aussage, nicht als Rechtfertigung: gross,
   allein, mit Luft. Die Erklaerung folgt kleiner daneben.
   ========================================================================== */

.bevor{ padding-block: clamp(72px, 10vw, 128px); }

.bevor-preis{ display: grid; gap: 26px; }

.bevor-satz{
  margin: 0;
  max-width: 18ch;
  font-size: clamp(26px, 4.2vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.026em;
  font-weight: 620;
}
.bevor-erklaerung p{ color: var(--ink-2); max-width: 52ch; }
.bevor-erklaerung p:last-child{ margin-bottom: 0; }

.bevor-passt{ margin-top: clamp(56px, 7vw, 92px); }

.bevor-label{
  margin: 0 0 22px;
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.passt-liste{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
  max-width: 46ch;
}
.passt-liste li{
  position: relative;
  padding: 18px 0 18px 28px;
  border-top: 1px solid var(--rule);
  font-size: clamp(17px, 1.9vw, 20px);
  line-height: 1.42;
}
.passt-liste li:last-child{ border-bottom: 1px solid var(--rule); }
/* Der Punkt aus der Mitte von Szene 7, klein wiederverwendet. */
.passt-liste li::before{
  content: "";
  position: absolute; left: 2px; top: 1.55em;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--green);
}

.bevor-fuss{
  margin: 30px 0 0;
  max-width: 56ch;
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-3);
}

@media (min-width: 900px){
  .bevor-preis{ grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
  .bevor-satz{ max-width: none; }
  .bevor-passt{ display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
  .bevor-label{ grid-column: 1 / -1; }
  .bevor-fuss{ margin-top: 0; }
}

@media (prefers-reduced-motion: no-preference){
  .js-reveal .passt-liste li{ opacity: 0; transform: translate3d(0, 10px, 0); transition: opacity 560ms var(--ease), transform 560ms var(--ease); }
  .js-reveal .bevor-passt.in .passt-liste li{ opacity: 1; transform: none; }
  .js-reveal .bevor-passt.in .passt-liste li:nth-child(2){ transition-delay: 140ms; }
  .js-reveal .bevor-passt.in .passt-liste li:nth-child(3){ transition-delay: 280ms; }
  .js-reveal .bevor-passt.in .passt-liste li:nth-child(4){ transition-delay: 420ms; }
}

/* ==========================================================================
   CREATIVE REBUILD — DER WEG REIST
   --------------------------------------------------------------------------
   Die Linie zeichnete sich bereits. Jetzt laeuft zusaetzlich ein Licht
   durch jedes Teilstueck, sobald die Station erreicht ist - dieselbe
   Bewegungsvokabel wie in der Software-Szene, wo ein Licht ueber die Zeile
   wandert. FLOW, nicht Dekoration.

   Die Ziffern treten zurueck: vier nummerierte Kaesten waeren ein Rueckschritt,
   die Nummer soll nur noch die Reihenfolge halten, nicht die Aufmerksamkeit.
   ========================================================================== */

.stop-body h3::before{ color: var(--ink-3); font-weight: 500; }

.stop:not(:last-child)::after{
  content: "";
  position: absolute;
  left: 8px; top: 25px; bottom: 4px;
  width: 1.5px;
  transform: translateX(-50%);
  background-image: linear-gradient(to bottom, rgba(12,143,92,0) 0%, var(--green) 50%, rgba(12,143,92,0) 100%);
  background-size: 100% 38%;
  background-repeat: no-repeat;
  background-position: 0 -38%;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference){
  .js-reveal .stop.in:not(:last-child)::after{
    animation: zb-weg 1250ms cubic-bezier(0.4, 0, 0.2, 1) 260ms forwards;
  }
}

@keyframes zb-weg{
  0%   { background-position: 0 -38%; opacity: 0; }
  14%  { opacity: 1; }
  86%  { opacity: 1; }
  100% { background-position: 0 138%; opacity: 0; }
}

/* ==========================================================================
   CREATIVE REBUILD — ROLLEN (Zusammenlegung)
   --------------------------------------------------------------------------
   Aus "Was ich mache" und "Ich habe doch einen Steuerberater" wird eine
   Szene. Beide hatten denselben Job; ein Satz stand woertlich zweimal.

   KEINE VERGLEICHSTABELLE. Das Bild zeigt eine REIHENFOLGE: ein langer
   Lauf ueber das Jahr, ein Uebergabepunkt, eine empfangende Flaeche. Die
   beiden Textbloecke darunter sind absichtlich UNGLEICH breit - zwei
   gleich grosse Spalten waeren eine Gegenueberstellung.

   Bewegung: SEPARATE -> CONNECT -> HANDOVER -> SETTLE. Die Marken des
   Jahres erscheinen nacheinander, dann der Uebergabepunkt, dann die
   empfangende Flaeche. Kein Dauerloop, keine Pfeile, kein Flussdiagramm.
   ========================================================================== */

.rollen{ padding-block: clamp(64px, 9vw, 112px); }

.rollen-frage{
  margin: 0 0 10px;
  max-width: 20ch;
}
.rollen-antwort{
  margin: 0 0 22px;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 600;
  color: var(--green-deep);
}
.rollen-lead{ margin: 0; color: var(--ink-2); max-width: 50ch; }

/* --- Die Uebergabe als lebendes System (IDLE LOOP, 11 s) --- */
/*  1  Belege fallen nacheinander auf die linke Flaeche
    2  einer bekommt Aufmerksamkeit
    3  alles wird zu einem geordneten Paket
    4  das Paket wandert hinueber
    5  die rechte Flaeche nimmt es an
    6  Ruhe, dann von vorn
    Kein Gegeneinander: links wird gearbeitet, rechts angenommen. */

.uebergabe{
  --ug: 11s;
  position: relative;
  display: grid;
  gap: 12px;
  align-items: center;
  margin: clamp(36px, 5vw, 56px) 0 clamp(30px, 4vw, 44px);
}

.ug-marke-bsp{
  position: absolute; right: 2px; top: -22px;
  margin: 0;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}

.ug-feld{
  position: relative;
  height: 196px;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: inset 0 0 0 1px rgba(23,27,21,.10), var(--lift-1);
  overflow: hidden;
}
.ug-feld--er{ background: var(--paper-2); box-shadow: inset 0 0 0 1px rgba(23,27,21,.10); }

/* Zeilen, wie sie in einer Buchhaltung stehen. */
.ug-blatt{
  position: absolute;
  left: 7%; right: 7%;
  top: calc(20px + var(--n) * 40px);
  padding: 8px 12px;
  border-radius: 3px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(23,27,21,.14), 0 5px 12px rgba(23,27,21,.05);
}
.ug-blatt b, .ug-paket b{
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  font-weight: 500; font-size: 11.5px; color: var(--ink-3); white-space: nowrap;
}
.ug-blatt em, .ug-paket em{
  font-style: normal; font-size: 12.5px; font-weight: 600;
  color: var(--ink); font-variant-numeric: tabular-nums;
}
.ug-blatt i{
  display: block; margin-top: 4px;
  font-style: normal; font-size: 10.5px; color: var(--green-deep);
}

/* Die offene Zeile. Kein Rot, kein Warnzeichen - sie ist die Stelle,
   an der nachgefragt wird. */
.ug-blatt--auf{
  background: var(--green-mist);
  box-shadow: 0 1px 2px rgba(12,143,92,.24), 0 6px 14px rgba(12,143,92,.12);
}
.ug-blatt--auf b{ color: var(--green-deep); }
.ug-blatt--auf em{ color: var(--green-deep); }

/* Das Paket: was aus den Zeilen wird. */
.ug-paket{
  position: absolute;
  left: 7%; right: 7%; top: 22px;
  padding: 12px 14px 11px;
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: 0 2px 4px rgba(23,27,21,.16), 0 12px 26px rgba(23,27,21,.10), inset 0 0 0 1px rgba(12,143,92,.30);
  opacity: 0;
}
.ug-paket strong, .ug-ankunft strong{
  display: block; margin-bottom: 9px;
  font-size: 10.5px; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--green-deep); font-weight: 600;
}
.ug-paket b{ margin-bottom: 5px; }
.ug-paket i{
  display: block; margin-top: 9px; padding-top: 8px;
  border-top: 1px solid rgba(12,143,92,.20);
  font-style: normal; font-size: 10.5px; color: var(--green-deep);
}

.ug-weg{ display: flex; align-items: center; justify-content: center; }
.ug-marke{
  display: inline-block; padding: 7px 13px; border-radius: 999px;
  background: var(--green-deep); color: #FFFFFF; font-size: 12.5px; white-space: nowrap;
}

/* Die Ankunft: die rechte Flaeche nimmt an. */
.ug-ankunft{
  position: absolute;
  left: 9%; right: 9%; top: 34%;
  padding: 12px 14px;
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: 0 2px 4px rgba(23,27,21,.14), 0 10px 22px rgba(23,27,21,.08);
  opacity: 0;
}
.ug-ankunft i{ font-style: normal; font-size: 11px; color: var(--ink-3); }

@media (prefers-reduced-motion: no-preference){
  .js-reveal .uebergabe.in .ug-blatt{ animation: zb-ug-blatt var(--ug) var(--ease) infinite both; animation-delay: calc(var(--n) * 420ms); }
  .js-reveal .uebergabe.in .ug-paket{ animation: zb-ug-paket var(--ug) var(--ease) infinite both; }
  .js-reveal .uebergabe.in .ug-ankunft{ animation: zb-ug-ankunft var(--ug) var(--ease) infinite both; }
  .js-reveal .uebergabe.in .ug-marke{ animation: zb-ug-marke var(--ug) var(--ease) infinite both; }
}

/* Blaetter fallen ein, eines faellt auf, dann verdichten sie sich. */
@keyframes zb-ug-blatt{
  0%       { opacity: 0; transform: translate3d(-14px, -10px, 0); }
  10%, 40% { opacity: 1; transform: none; }
  50%      { opacity: 0; transform: translate3d(0, 6px, 0) scaleY(.5); }
  100%     { opacity: 0; transform: translate3d(-14px, -10px, 0); }
}

/* Das Paket entsteht, wandert hinueber, wird angenommen. */
@keyframes zb-ug-paket{
  0%, 46%   { opacity: 0; transform: scale(.92); }
  54%       { opacity: 1; transform: none; }
  62%       { opacity: 1; transform: none; }
  80%       { opacity: 1; transform: translate3d(calc(100% + 34px), 0, 0); }
  86%, 100% { opacity: 0; transform: translate3d(calc(100% + 34px), 0, 0); }
}

@keyframes zb-ug-ankunft{
  0%, 80%   { opacity: 0; }
  86%       { opacity: 1; }
  94%       { opacity: 1; }
  100%      { opacity: 0; }
}

@keyframes zb-ug-marke{
  0%, 58%   { transform: none; box-shadow: none; }
  68%       { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(12,143,92,.12); }
  78%, 100% { transform: none; box-shadow: none; }
}

/* --- Die Beschriftung, absichtlich ungleich --- */
.rollen-legende{ display: grid; gap: 30px; }
.rolle-wer{
  margin: 0 0 12px;
  font-size: 13px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.rolle-was{ margin: 0 0 12px; color: var(--ink-2); }
.rolle-was:last-child{ margin-bottom: 0; }
.rolle-was strong{ color: var(--ink); font-weight: 600; }
.rolle-legal{
  display: inline-block;
  font-size: 12.5px;
  color: var(--green-deep);
  white-space: nowrap;
}

.rollen-schluss{ margin-top: clamp(32px, 4.4vw, 48px); max-width: 62ch; }
.rollen-schluss p{ color: var(--ink-2); }
.rollen-frage2{ color: var(--ink) !important; }
.rollen-frage2 strong{ font-weight: 620; }
.rollen-schluss .law{
  margin: 22px 0 0;
  padding-top: 16px;
  border-top: 1px solid var(--rule);
  font-size: 14px;
  color: var(--ink-3);
}

@media (min-width: 860px){
  /* Ungleiche Spuren: der Lauf ist lang, das Ziel kurz. Genau darum geht es. */
  .uebergabe{ grid-template-columns: 1fr auto 0.62fr; gap: 22px; }
  .rollen-legende{ grid-template-columns: 1.55fr 0.95fr; gap: 48px; }
  .rollen-frage{ max-width: none; }
}

@media (max-width: 859px){
  /* Mobil senkrecht: oben gearbeitet, unten angenommen. */
  .ug-feld{ height: 186px; }
  .ug-feld--er{ height: 128px; }
  .uebergabe{ gap: 10px; }
}

@media (prefers-reduced-motion: no-preference){


}

/* ==========================================================================
   ESKALATION — SZENE 4: SCROLLEN ERZEUGT ORDNUNG
   --------------------------------------------------------------------------
   Vorher lief die Verwandlung nach dem Einblenden zeitgesteuert ab. Jetzt
   treibt der Besucher sie selbst: die Szene klebt in einer Scrollbahn, und
   der Fortschritt der Bahn durch das Sichtfeld ist die Zeitachse.

   TECHNIKENTSCHEIDUNG — gemessen, nicht geraten:
   CSS.supports('animation-timeline: view()') ist true (Chrome 152, und die
   Eigenschaft ist seit Jahren in Chromium und Safari). Damit laeuft die
   Animation im Compositor, ausserhalb des Hauptthreads - kein Scroll-Listener,
   kein Layout-Thrashing, kein Ruckeln. Eine Bibliothek wie GSAP ScrollTrigger
   waere rund 50 KB fuer etwas, das nativ besser laeuft. Nicht eingebaut.

   RUECKFALL: Ohne Unterstuetzung greift @supports nicht, die Bahn hat keine
   Hoehe, die Szene klebt nicht, und die bisherige zeitbasierte Fassung
   laeuft unveraendert weiter. Nichts geht verloren.

   ARBEITSTEILUNG DER BEWEGUNG:
     zb-appear     STORY, zeitgesteuert - das Chaos wird sichtbar, alle
                   Teile zugleich, damit der Haufen als Bild steht
     zb-sortieren  scrollgesteuert - der Besucher raeumt auf
   ========================================================================== */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    /* NUR mit aktivem Reveal-System. Ohne JavaScript wird nichts sortiert -
       eine 185vh hohe Bahn mit klebender Szene waere dann reine tote
       Strecke (gemessen: 1.665 px Scrollen ohne jede Veraenderung). */
    .js-reveal .flow-track{
      height: 185vh;
      view-timeline-name: --chaos;
      view-timeline-axis: block;
    }
    .js-reveal .flow-scene{ position: sticky; top: 11vh; }

    /* Die zeitbasierte Sortierung wird durch die scrollgesteuerte ersetzt.
       Das Erscheinen bleibt zeitbasiert - es gehoert zum Eintritt, nicht
       zum Aufraeumen. */
    .js-reveal .flow-scene.in .slip{
      animation:
        zb-appear 620ms var(--ease) both,
        zb-sortieren linear both;
      animation-timeline: auto, --chaos;
      /* Versatz ueber die SCROLLSTRECKE, nicht ueber die Zeit: jedes Teil
         findet seinen Platz an einer eigenen Stelle der Bewegung. */
      animation-range:
        normal,
        contain calc(3% + var(--i) * 0.9%) contain calc(68% + var(--i) * 1.9%);
    }
  }
}

@keyframes zb-sortieren{
  0%   { transform: translate3d(calc(var(--sx) * var(--sp)), calc(var(--sy) * var(--sp)), 0) rotate(var(--sr)) scale(0.94); }
  55%  { transform: translate3d(calc(var(--sx) * var(--sp) * 0.34), calc(var(--sy) * var(--sp) * 0.34), 0) rotate(calc(var(--sr) * 0.34)) scale(0.98); }
  100% { transform: rotate(var(--fr)); }
}

@media (max-width: 859px){
  @supports (animation-timeline: view()){
    @media (prefers-reduced-motion: no-preference){
      /* Mobil kuerzere Strecke: 210vh waeren dort ueber 1.700 px Scrollen
         fuer eine Szene. */
      .js-reveal .flow-track{ height: 165vh; }
      .js-reveal .flow-scene{ top: 8vh; }
    }
  }
}

/* ==========================================================================
   ESKALATION — SZENE 3: DER STROM (IDLE LOOP)
   --------------------------------------------------------------------------
   ROUTINE -> UNTERBRECHUNG -> FOKUS -> FRAGE -> KONTEXT, als Dauerloop.

   Belege ziehen ruhig durch. Einer ist anders. Der Strom haelt an, das
   Stueck bekommt Kontur, Sabines Satz erscheint, dann laeuft es weiter.

   Das Band traegt die Reihe DOPPELT und wandert genau eine halbe Bandbreite.
   Beim Neustart springt es auf eine Stelle, die identisch aussieht - der
   Loop ist nahtlos, ohne Sprung.

   Der Halt liegt IN den Keyframes, nicht in einem Skript: zwischen 42 % und
   62 % steht der Wert still. Genau dort erscheint die Frage.

   FAKTENLAGE: leere Stuecke. Keine Ziffer, kein Betrag, keine Kontonummer.
   Alle gleich hoch - eine wechselnde Hoehe waere ein wechselnder Wert.
   ========================================================================== */

.mit-lead{
  margin: 14px 0 0;
  font-size: clamp(19px, 2.4vw, 26px);
  font-weight: 560;
  letter-spacing: -0.015em;
  color: var(--ink);
}

.strom{
  position: relative;
  margin: clamp(40px, 5.5vw, 64px) 0 0;
  padding: 30px 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  background: var(--white);
  box-shadow: var(--lift-1);
  /* Die Raender laufen weich aus - der Strom kommt von irgendwoher und
     geht irgendwohin, er beginnt nicht an der Kante. */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 9%, #000 91%, transparent 100%);
}

.strom-band{
  display: flex;
  gap: 18px;
  width: max-content;
  will-change: transform;
}

.strom-marke{
  position: absolute; right: 14px; top: 8px; z-index: 2;
  margin: 0;
  font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink-3);
}

.stueck{
  flex: 0 0 auto;
  /* 132 px reichten fuer Bezeichnung UND Betrag in einer Zeile nicht -
     gemessen liefen zwoelf von vierundzwanzig Kacheln ueber. */
  width: 190px;
  padding: 11px 13px;
  border-radius: 3px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(23,27,21,.14), 0 6px 14px rgba(23,27,21,.06);
}
.stueck b{
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  font-weight: 500;
  font-size: 11.5px;
  color: var(--ink-3);
  white-space: nowrap;
}
.stueck b + b{ margin-top: 7px; }
.stueck em{
  font-style: normal;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

/* Der eine, an dem eine Frage entsteht. Er zeigt die BEZIEHUNG zwischen
   zwei Groessen - und ausdruecklich KEINE Betraege.

   Vorher standen hier erfundene Werte direkt ueber Sabines belegtem Satz
   "dein Wareneinsatz stimmt hier nicht". Daraus liess sich lesen, genau
   dieses Verhaeltnis sei objektiv falsch. Das behauptet keine Quelle, und
   einen Branchenwert nennt die Seite nirgends. Ohne Zahlen laesst sich
   kein Urteil ableiten - die Stelle bleibt, das Urteil entfaellt. */
.stueck--auf{
  width: 190px;
  background: var(--green-mist);
  box-shadow: 0 1px 2px rgba(12,143,92,.22), 0 8px 18px rgba(12,143,92,.12);
}
.stueck--auf b{ color: var(--green-deep); font-weight: 600; font-size: 12.5px; }

/* Das Zeichen zwischen den beiden Groessen: eine Klammer, kein Operator,
   kein Pfeil, kein Vergleichszeichen. Sie sagt "diese beiden gehoeren
   zueinander", nicht "die eine ist zu gross". */
.stueck-bez{
  display: block;
  height: 12px;
  margin: 3px 0 3px 2px;
  width: 22px;
  border-left: 2px solid rgba(12,143,92,.55);
  border-top: 2px solid rgba(12,143,92,.55);
  border-bottom: 2px solid rgba(12,143,92,.55);
  border-radius: 2px 0 0 2px;
}

/* Die Einleitung ordnet den Satz ein: er ist ein Beispiel fuer die Art
   Frage, nicht der Schluss aus den Werten daneben. */
.strom-vor{
  display: block;
  margin-bottom: 12px;
  font-style: normal;
  font-size: 13px;
  letter-spacing: 0.01em;
  color: var(--ink-3);
}

.strom-frage{
  margin: 26px 0 0;
  font-size: clamp(18px, 2.2vw, 24px);
  line-height: 1.4;
  font-style: italic;
  max-width: 34ch;
  padding-left: 18px;
  border-left: 2px solid var(--green);
}
.strom-frage span{
  display: block;
  margin-top: 10px;
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.mit-kontext{ margin-top: clamp(34px, 4.4vw, 52px); max-width: 60ch; }
.mit-kontext p{ color: var(--ink-2); }

@media (prefers-reduced-motion: no-preference){
  .js-reveal .strom.in .strom-band{
    animation: zb-strom 13s linear infinite;
  }
  /* Die Frage gehoert zum Halt, nicht zum Scrollen: sie kommt und geht mit
     dem Loop, nicht einmalig beim Eintritt. */
  .js-reveal .strom-frage{ opacity: 0; }
  .js-reveal .strom.in ~ .strom-frage{ animation: zb-strom-frage 13s var(--ease) infinite; }
}

/* Die Halteposition haengt an der Kachelbreite. Nach der Korrektur der
   Breiten (190 px statt 132/168, mobil 124 px) stimmte die alte Marke von
   31,5 % nicht mehr - das markierte Stueck stand 312 px zu weit rechts.
   Neu gerechnet und nachgemessen, je Breite eigener Wert. */
.strom{ --halt: 37.8%; }
@media (max-width: 700px){ .strom{ --halt: 42.6%; } }

@keyframes zb-strom{
  0%   { transform: translate3d(0, 0, 0); }
  42%  { transform: translate3d(calc(-1 * var(--halt)), 0, 0); }   /* mittig */
  62%  { transform: translate3d(calc(-1 * var(--halt)), 0, 0); }   /* HALT */
  100% { transform: translate3d(-50%, 0, 0); }   /* nahtlos, Reihe liegt doppelt */
}

@keyframes zb-strom-frage{
  0%, 40%   { opacity: 0; transform: translate3d(0, 8px, 0); }
  47%       { opacity: 1; transform: none; }
  62%       { opacity: 1; transform: none; }
  70%, 100% { opacity: 0; transform: translate3d(0, 8px, 0); }
}

@media (max-width: 700px){
  /* MOBILE FIRST: nicht schrumpfen, sondern umbauen. Bezeichnung ueber
     Betrag statt daneben - in einer Zeile lief bei 390 jede Kachel ueber
     (24 von 24, Breite auf 62 px kollabiert). */
  .stueck{ width: 124px; padding: 10px 11px; }
  .stueck b{ flex-direction: column; align-items: flex-start; gap: 2px; }
  .stueck b + b{ margin-top: 8px; }
  .stueck em{ font-size: 13.5px; }
  .stueck--auf{ width: 124px; }
  .strom-band{ gap: 14px; }
  .strom{ padding: 22px 0; }
}

/* ==========================================================================
   ESKALATION — SZENE 2: DIE BUEHNE ATMET (IDLE LOOP)
   --------------------------------------------------------------------------
   EHRLICHE GRENZE ZUERST: Die fuenf Objekte sind Rasterbilder (WebP/AVIF).
   Ihre Innenteile - Schichten, Blaetter, Bloecke - lassen sich nicht
   einzeln bewegen. Ein "Klaerungskonto, dessen dritte Schicht ausschert"
   oder "Blaetter, die zwischen zwei Flaechen wandern" braeuchte SVG-
   Fassungen derselben fuenf Objekte. Das ist eine Asset-Abhaengigkeit,
   keine CSS-Frage, und steht so im Bericht.

   WAS OHNE NEUE ASSETS GEHT und trotzdem etwas bedeutet:
   Das AKTIVE Objekt atmet - eine sehr langsame Hebung und ein wandernder
   Lichtstreifen ueber dem Glas. Das ist Materialantwort, keine Datenshow:
   es behauptet nichts ueber Zahlen, es zeigt, dass etwas betrachtet wird.
   Nachbarn bleiben ruhig, sonst konkurrieren drei Bewegungen.

   Sehr geringe Amplitude: 5 px Hub ueber 9 Sekunden. Kein Wippen.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) and (min-width: 880px){
}


/* ==========================================================================
   FINAL — DIE SZENE (inszenierte Erkenntnis)
   --------------------------------------------------------------------------
   Vorher vier gleich gebaute Bloecke: ein Protokoll. Jetzt vier Zuege mit
   unterschiedlichem Gewicht und wachsender Einrueckung - die Aufmerksamkeit
   wandert von der Behauptung zum Fund.

   Die Behauptung wird NICHT ausgeblendet. Sie bleibt voll lesbar und voll
   kontrastiert; sie hoert nur auf, das Groesste zu sein. Text auf halbe
   Deckkraft zu setzen waere ein Kontrastverstoss und ausserdem die falsche
   Aussage: der Satz war nicht falsch, er war ungeprueft.

   FAKTENGEWICHT: Der Fund ist NICHT groesser gesetzt als die uebrigen
   Saetze. Betont wird ueber die Flaeche, nicht ueber die Schriftgroesse -
   eine groessere Zahl waere eine groessere Behauptung.
   ========================================================================== */

.szene{ margin-top: clamp(52px, 7vw, 84px); }

.szene-label{
  margin: 0 0 clamp(26px, 3.4vw, 40px);
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.szene-behauptung{
  margin: 0;
  padding: 0;
  border: 0;
  max-width: 21ch;
  font-size: clamp(25px, 3.9vw, 46px);
  line-height: 1.14;
  letter-spacing: -0.026em;
  font-weight: 620;
  font-style: normal;
  color: var(--ink);
}
.szene-behauptung cite{
  display: block;
  margin-top: 18px;
  font-style: normal;
  font-size: 12.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}

.szene-zug{ margin-top: clamp(34px, 4.4vw, 52px); max-width: 50ch; }

.szene-wer{
  margin: 0 0 10px;
  font-size: 12.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.szene-satz{
  margin: 0;
  font-size: clamp(18px, 2.1vw, 23px);
  line-height: 1.38;
  font-weight: 560;
  color: var(--ink);
}
.szene-note{
  margin: 14px 0 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 44ch;
}

/* Der Fund: betont ueber die Flaeche, nicht ueber die Groesse. */
.szene-zug--fund{
  background: var(--white);
  border-radius: var(--radius-md);
  padding: 26px 26px 24px;
  box-shadow: var(--lift-2);
  border-left: 3px solid var(--green);
}

/* Wachsende Einrueckung: die Aufmerksamkeit wandert nach innen. */
@media (min-width: 860px){
  .szene-behauptung{ max-width: 18ch; }
  .szene-zug--pruefung{ margin-left: 7%; }
  .szene-zug--fund{ margin-left: 13%; }
  .szene-zug--erkenntnis{ margin-left: 20%; }
}

/* BEWEGUNG: Behauptung -> Pruefung -> Fund -> Erkenntnis, nacheinander.
   Kein Autoplay, nur beim Scrollen. */
@media (prefers-reduced-motion: no-preference){
  .js-reveal .szene .szene-behauptung,
  .js-reveal .szene .szene-zug{
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 700ms var(--ease), transform 700ms var(--ease);
  }
  .js-reveal .szene.in .szene-behauptung{ opacity: 1; transform: none; }
  .js-reveal .szene.in .szene-zug{ opacity: 1; transform: none; }
  .js-reveal .szene.in .szene-zug--pruefung{ transition-delay: 420ms; }
  .js-reveal .szene.in .szene-zug--fund{ transition-delay: 900ms; }
  .js-reveal .szene.in .szene-zug--erkenntnis{ transition-delay: 1400ms; }
}


@media (prefers-reduced-motion: reduce){
}


.ov{ position: absolute; inset: 0; pointer-events: none; display: block; }
.ov i{ position: absolute; display: none; }

/* --- 01 KLAERUNGSKONTO: eine Marke faehrt herunter und bleibt stehen --- */
.ov--1 i:nth-child(1){
  display: block;
  left: 8%; top: 30%;
  width: 4px; height: 34px;
  border-radius: 2px;
  background: var(--green);
  box-shadow: 0 1px 6px rgba(12,143,92,.45);
}
.ov--1 i:nth-child(2){
  display: block;
  left: 8%; top: 30%;
  width: 22px; height: 4px; margin-top: 15px;
  border-radius: 2px;
  background: var(--green);
  opacity: 0;
}

/* --- 02 WARENEINSATZ: zwei Marken, dann ein Mass dazwischen --- */
.ov--2 i:nth-child(1){ display: block; right: 9%; top: 32%; width: 20px; height: 3px; border-radius: 2px; background: var(--green-deep); }
.ov--2 i:nth-child(2){ display: block; right: 9%; top: 62%; width: 20px; height: 3px; border-radius: 2px; background: var(--green-deep); }
.ov--2 i:nth-child(3){
  display: block; right: 17%; top: 33.5%;
  width: 3px; height: 29%;
  border-radius: 2px;
  background: var(--green);
  transform-origin: top center; transform: scaleY(0);
}

/* --- 03 AUSWERTUNG: ein Fokusring wandert quer und haelt --- */
.ov--3 i:nth-child(1){
  display: block;
  left: 50%; top: 48%;
  width: 92px; height: 92px; margin: -46px 0 0 -46px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(12,143,92,.55), 0 0 0 600px rgba(251,250,247,.34);
}

/* --- 04 LAUFENDE BUCHUNGEN: es kommt immer wieder eins dazu --- */
.ov--4 i:nth-child(1){
  display: block;
  left: 30%; top: 16%;
  width: 40%; height: 11px;
  border-radius: 3px;
  background: #FFFFFF;
  box-shadow: 0 2px 7px rgba(23,27,21,.24), inset 0 0 0 1px rgba(12,143,92,.24);
}

/* --- 05 UEBERGABE: ein Paket verlaesst das Bild --- */
.ov--5 i:nth-child(1){
  display: block;
  left: 22%; top: 44%;
  width: 26%; height: 30px;
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: 0 2px 8px rgba(23,27,21,.22), inset 0 0 0 1px rgba(12,143,92,.36);
}

/* ==========================================================================
   Die Bewegungen. Jede gehoert genau einem Gedanken, keine gleicht der anderen.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference){
}

/* 01 — sie faehrt herunter, haelt an, bleibt. */
@keyframes zb-ov1{
  0%       { transform: translate3d(0, -70%, 0); opacity: 0; }
  14%      { opacity: 1; }
  40%      { transform: translate3d(0, 76%, 0); opacity: 1; }
  78%      { transform: translate3d(0, 76%, 0); opacity: 1; }
  92%,100% { transform: translate3d(0, 76%, 0); opacity: 0; }
}
@keyframes zb-ov1-halt{
  0%, 42%  { opacity: 0; transform: translate3d(0, 76%, 0) scaleX(.2); }
  54%      { opacity: 1; transform: translate3d(0, 76%, 0) scaleX(1); }
  78%      { opacity: 1; transform: translate3d(0, 76%, 0) scaleX(1); }
  90%,100% { opacity: 0; transform: translate3d(0, 76%, 0) scaleX(1); }
}
/* 02 — das Mass entsteht zwischen den beiden Marken. */
@keyframes zb-ov2{
  0%, 18%  { transform: scaleY(0); opacity: 0; }
  24%      { opacity: 1; }
  44%      { transform: scaleY(1); opacity: 1; }
  80%      { transform: scaleY(1); opacity: 1; }
  92%,100% { transform: scaleY(1); opacity: 0; }
}
/* 03 — der Blick wandert quer und bleibt kurz. */
@keyframes zb-ov3{
  0%       { opacity: 0; transform: translate3d(-30%, 8%, 0) scale(.84); }
  16%      { opacity: 1; }
  40%      { transform: translate3d(0, 0, 0) scale(1); }
  64%      { transform: translate3d(0, 0, 0) scale(1); opacity: 1; }
  86%,100% { transform: translate3d(28%, -6%, 0) scale(.84); opacity: 0; }
}
/* 04 — es faellt ein, legt sich ab, und wieder. */
@keyframes zb-ov4{
  0%       { opacity: 0; transform: translate3d(0, -140%, 0); }
  14%      { opacity: 1; }
  36%      { transform: translate3d(0, 210%, 0); }
  44%      { transform: translate3d(0, 196%, 0); }
  78%      { transform: translate3d(0, 196%, 0); opacity: 1; }
  90%,100% { transform: translate3d(0, 196%, 0); opacity: 0; }
}
/* 05 — es wird kompakt und geht hinaus. */
@keyframes zb-ov5{
  0%, 14%  { opacity: 1; transform: none; }
  32%      { transform: scaleY(.62); }
  50%      { transform: scaleY(.62) translate3d(0, 0, 0); }
  80%      { transform: scaleY(.62) translate3d(230%, 0, 0); opacity: 1; }
  90%,100% { transform: scaleY(.62) translate3d(230%, 0, 0); opacity: 0; }
}

/* Die Buehne antwortet je Eintrag: das Licht wandert mit. Reines CSS. */
.stage{ --stage-licht: 50%; }

/* Kein gemeinsames Schweben mehr: der Atem hat alle fuenf gleich bewegt und
   war damit genau die generische Bewegung, die hier nicht hingehoert. */
@media (prefers-reduced-motion: no-preference) and (min-width: 880px){
}

/* ==========================================================================
   WO ICH GENAUER HINSEHE — EINE REISE DER AUFMERKSAMKEIT
   --------------------------------------------------------------------------
   Ersetzt das Karussell. Keine Pfeile, kein "01 von 5", kein Objektstreifen,
   keine angeschnittenen Nachbarn, kein Controller in main.js.

   Stattdessen EINE abstrakte Buchhaltungswelt in fuenf Zustaenden. Der
   Besucher scrollt, der Fokus wandert an die Stellen, die zaehlen, und die
   Welt veraendert sich dort, wo er ankommt.

   AUFBAU DER WELT (Koordinaten in Prozent der Buehne):
     A links oben     Klaerungskonto      eine Zeile faellt aus der Reihe
     C Mitte          Wareneinsatz        zwei Groessen, ein Mass dazwischen
     D rechts oben    Auswertung          eine Ebene loest sich ab
     B links unten    laufende Buchungen  es kommt immer wieder eins dazu
     E rechts unten   Uebergabe           es wird ein Paket und geht

   Der Fokus laeuft A -> C -> D -> B -> E. Der Weg zickzackt absichtlich:
   Aufmerksamkeit springt, sie laeuft keine Liste ab.

   GRUNDZUSTAND ohne scrollgesteuerte Animationen und ohne JavaScript:
   alle fuenf Gedanken stehen untereinander, die Welt zeigt ihren
   Endzustand. Kein Inhalt haengt an der Bewegung.
   ========================================================================== */

.reise{ margin-top: clamp(30px, 4vw, 46px); }

.reise-innen{ display: grid; gap: 30px; }

/* --- Die Texte: im Grundzustand alle sichtbar, untereinander --- */
.rt{ margin: 0 0 26px; max-width: 34ch; }
.rt:last-child{ margin-bottom: 0; }
.rt-satz{
  display: block;
  font-size: clamp(19px, 2.4vw, 27px);
  line-height: 1.24;
  letter-spacing: -0.018em;
  font-weight: 620;
  color: var(--ink);
}
.rt-thema{
  display: block;
  margin-top: 14px;
  font-size: 12.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green-deep);
}
.rt-hinweis{
  display: block;
  margin-top: 8px;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-2);
}

/* --- Die Welt --- */
.welt{
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg, var(--paper) 0%, var(--paper-2) 100%);
  box-shadow: var(--lift-1), inset 0 1px 0 rgba(255,255,255,.8);
}
.w-flaeche{ position: absolute; inset: 0; }

.welt i{ position: absolute; display: block; border-radius: 3px; }

/* A — Klaerungskonto: gestapelte Zeilen, eine faellt heraus */
.w-konto{ position: absolute; left: 8%; top: 15%; width: 34%; height: 29%; }
.w-konto i{
  left: 0; width: 100%; height: 11px;
  background: #FFFFFF; box-shadow: 0 1px 2px rgba(23,27,21,.20), 0 6px 14px rgba(23,27,21,.07);
}
.w-konto i:nth-child(1){ top: 0; }
.w-konto i:nth-child(2){ top: 24%; }
.w-konto i:nth-child(3){ top: 48%; background: var(--green-mist); box-shadow: 0 1px 2px rgba(12,143,92,.22), 0 6px 14px rgba(12,143,92,.12); transform: translateX(16%); }
.w-konto i:nth-child(4){ top: 72%; }
.w-konto i:nth-child(5){ top: 96%; }

/* C — Wareneinsatz: zwei Groessen, ein Mass dazwischen */
.w-verh{ position: absolute; left: 46%; top: 34%; width: 18%; height: 34%; }
.w-verh i{ bottom: 0; width: 22%; border-radius: 3px; background: #FFFFFF; box-shadow: 0 1px 2px rgba(23,27,21,.22), 0 6px 14px rgba(23,27,21,.08); }
.w-verh i:nth-child(1){ left: 6%; height: 54%; }
.w-verh i:nth-child(2){ left: 52%; height: 92%; background: var(--green); box-shadow: 0 1px 6px rgba(12,143,92,.3); }
.w-mass{
  position: absolute; left: 12%; top: 8%; width: 52%; height: 2px;
  background: rgba(12,143,92,.62);
  transform-origin: left center;
}

/* D — Auswertung: eine Ebene loest sich ab */
.w-ausw{
  position: absolute; right: 7%; top: 14%; width: 26%; height: 26%;
  border-radius: 6px;
  background: #FFFFFF;
  box-shadow: 0 2px 5px rgba(23,27,21,.16), 0 14px 30px rgba(23,27,21,.10);
}
.w-ausw i{ left: 12%; width: 62%; height: 5px; background: rgba(23,27,21,.18); }
.w-ausw i:nth-child(1){ top: 22%; }
.w-ausw i:nth-child(2){ top: 46%; width: 48%; }
.w-ausw i:nth-child(3){ top: 70%; width: 70%; }

/* B — laufende Buchungen: es kommt immer wieder eins dazu */
.w-ein{ position: absolute; left: 8%; top: 60%; width: 30%; height: 24%; }
.w-ein i{
  left: 0; width: 100%; height: 10px;
  background: #FFFFFF; box-shadow: 0 1px 2px rgba(23,27,21,.20), 0 6px 14px rgba(23,27,21,.07);
}
.w-ein i:nth-child(1){ top: 100%; }
.w-ein i:nth-child(2){ top: 50%; }
.w-ein i:nth-child(3){ top: 0; }

/* E — Uebergabe: es wird ein Paket und geht */
.w-ueb{ position: absolute; right: 6%; top: 58%; width: 30%; height: 24%; }
.w-paket{
  position: absolute; left: 0; top: 24%;
  width: 56%; height: 40%;
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: 0 2px 6px rgba(23,27,21,.18), inset 0 0 0 1px rgba(12,143,92,.32);
}
.w-ziel{
  position: absolute; right: 0; top: 18%;
  width: 32%; height: 54%;
  border-radius: 4px;
  background: var(--paper-2);
  box-shadow: inset 0 0 0 1px rgba(23,27,21,.14);
}

/* Der Fokus. Im Grundzustand steht er bei der letzten Station. */
.w-fokus{
  position: absolute;
  left: 85%; top: 70%;
  width: 96px; height: 96px; margin: -48px 0 0 -48px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(12,143,92,.55), 0 0 0 999px rgba(251,250,247,.26);
}

@media (min-width: 900px){
  .reise-innen{ grid-template-columns: 0.34fr 0.66fr; gap: 48px; align-items: center; }
}
@media (max-width: 899px){
  .welt{ aspect-ratio: 1 / 1; }
  .w-fokus{ width: 74px; height: 74px; margin: -37px 0 0 -37px; }
}

/* ==========================================================================
   DIE REISE — scrollgesteuert
   --------------------------------------------------------------------------
   Der Fortschritt der Bahn durch das Sichtfeld ist die Erzaehlzeit. Kein
   Skript, kein Scroll-Listener: die Animation laeuft im Compositor.

   Der Fokus wird ueber transform bewegt, nicht ueber left/top - Container-
   Einheiten (cqw/cqh) machen das ohne Layoutarbeit moeglich. Die Welt ist
   dafuer ein Groessencontainer.

   Fuenf Abschnitte zu je rund 20 % der Strecke, mit Halt an jeder Station.
   Der Weg zickzackt: A links oben -> C Mitte -> D rechts oben ->
   B links unten -> E rechts unten. Aufmerksamkeit springt, sie laeuft
   keine Liste ab.
   ========================================================================== */

@supports (animation-timeline: view()) and (width: 1cqw) {
  @media (prefers-reduced-motion: no-preference) {

    /* 420vh waren 84vh je Zustand - grosszuegig, aber die Seite wuchs
       dadurch um 5.100 px. 330vh sind 66vh je Zustand: genug Zeit zum
       Lesen, ohne dass die Strecke sich zieht. */
    .reise{
      height: 330vh;
      view-timeline-name: --reise;
      view-timeline-axis: block;
    }
    .reise-buehne{ position: sticky; top: 9vh; }
    .welt{ container-type: size; }

    /* Texte liegen jetzt uebereinander statt untereinander. */
    .reise-text{ display: grid; }
    .rt{ grid-area: 1 / 1; margin: 0; opacity: 0; }
    .rt{
      animation: zb-rt linear both;
      animation-timeline: --reise;
    }
    .rt[data-s="1"]{ animation-range: contain 0%   contain 21%; }
    .rt[data-s="2"]{ animation-range: contain 19%  contain 41%; }
    .rt[data-s="3"]{ animation-range: contain 39%  contain 61%; }
    .rt[data-s="4"]{ animation-range: contain 59%  contain 81%; }
    .rt[data-s="5"]{ animation-range: contain 79%  contain 100%; }

    /* Der Fokus wandert durch die Welt. */
    .w-fokus{
      left: 0; top: 0;
      animation: zb-fokus linear both;
      animation-timeline: --reise;
      animation-range: contain 0% contain 100%;
    }

    /* Die Welt reagiert dort, wo der Fokus ankommt. */
    .w-konto i:nth-child(3){ animation: zb-w-konto linear both; animation-timeline: --reise; animation-range: contain 0% contain 20%; }
    .w-mass                { animation: zb-w-mass  linear both; animation-timeline: --reise; animation-range: contain 20% contain 40%; }
    .w-ausw                { animation: zb-w-ausw  linear both; animation-timeline: --reise; animation-range: contain 40% contain 60%; }
    .w-ein i:nth-child(1)  { animation: zb-w-ein   linear both; animation-timeline: --reise; animation-range: contain 60% contain 80%; }
    .w-paket               { animation: zb-w-paket linear both; animation-timeline: --reise; animation-range: contain 80% contain 100%; }
    .w-ziel                { animation: zb-w-ziel  linear both; animation-timeline: --reise; animation-range: contain 84% contain 100%; }
  }
}

@keyframes zb-rt{
  0%      { opacity: 0; transform: translate3d(0, 16px, 0); }
  9%, 89% { opacity: 1; transform: none; }
  100%    { opacity: 0; transform: translate3d(0, -12px, 0); }
}

/* A 25/29 -> C 56/50 -> D 81/30 -> B 23/72 -> E 85/72 */
@keyframes zb-fokus{
  0%,  14% { transform: translate(25cqw, 29cqh); }
  22%, 36% { transform: translate(56cqw, 50cqh); }
  44%, 58% { transform: translate(81cqw, 30cqh); }
  66%, 78% { transform: translate(23cqw, 72cqh); }
  86%,100% { transform: translate(85cqw, 72cqh); }
}

/* A — eine Zeile faellt aus der Reihe und bleibt draussen. */
@keyframes zb-w-konto{
  0%,  30% { transform: none; background: #FFFFFF; }
  62%,100% { transform: translateX(16%); background: var(--green-mist); }
}
/* C — das Mass entsteht zwischen den beiden Groessen. */
@keyframes zb-w-mass{
  0%,  22% { transform: scaleX(0); opacity: 0; }
  40%      { opacity: 1; }
  70%,100% { transform: scaleX(1); opacity: 1; }
}
/* D — die Auswertungsebene loest sich ab. */
@keyframes zb-w-ausw{
  0%,  20% { transform: none; box-shadow: 0 2px 5px rgba(23,27,21,.16), 0 14px 30px rgba(23,27,21,.10); }
  70%,100% { transform: translate3d(-4%, -7%, 0) scale(1.06); box-shadow: 0 6px 14px rgba(23,27,21,.14), 0 30px 60px rgba(23,27,21,.14); }
}
/* B — es kommt immer wieder eins dazu. */
@keyframes zb-w-ein{
  0%,  18% { opacity: 0; transform: translate3d(0, 70%, 0); }
  46%      { opacity: 1; }
  70%,100% { opacity: 1; transform: none; }
}
/* E — es wird kompakt und geht hinueber. */
@keyframes zb-w-paket{
  0%,  22% { transform: none; }
  56%      { transform: scaleY(.66); }
  88%,100% { transform: scaleY(.66) translateX(78%); }
}
@keyframes zb-w-ziel{
  0%,  40% { box-shadow: inset 0 0 0 1px rgba(23,27,21,.14); }
  80%,100% { box-shadow: inset 0 0 0 2px rgba(12,143,92,.5); }
}

@media (max-width: 899px){
  @supports (animation-timeline: view()) and (width: 1cqw){
    @media (prefers-reduced-motion: no-preference){
      .reise{ height: 285vh; }
      .reise-buehne{ top: 6vh; }
      .reise-innen{ gap: 22px; }
    }
  }
}

/* --- Zustand 04 lebt: es kommt waehrend dieses Zustands immer wieder
       einer herein. Deckkraft am Scroll, Bewegung in der Zeit. --- */
.w-neu{
  position: absolute;
  left: 0; top: 50%;
  width: 100%; height: 10px;
  border-radius: 3px;
  background: #FFFFFF;
  box-shadow: 0 1px 2px rgba(23,27,21,.22), 0 7px 16px rgba(23,27,21,.09), inset 0 0 0 1px rgba(12,143,92,.26);
  opacity: 0;
}

@supports (animation-timeline: view()) and (width: 1cqw) {
  @media (prefers-reduced-motion: no-preference) {
    .w-neu{
      animation: zb-w-neu-sicht linear both, zb-w-neu 4.2s var(--ease) infinite;
      animation-timeline: --reise, auto;
      animation-range: contain 60% contain 82%, normal;
    }
  }
}

@keyframes zb-w-neu-sicht{
  0%, 8%    { visibility: hidden; }
  9%, 88%   { visibility: visible; }
  92%, 100% { visibility: hidden; }
}

/* HALT AUSSERHALB DES SICHTFELDS.
   Gemessen: ein Element mit visibility:hidden wird nicht gemalt, seine
   Zeitanimation laeuft aber weiter - am Seitenanfang, 8.190 px entfernt,
   stieg currentTime in zwei Sekunden von 1300 auf 3316 ms. Mit display:none
   ebenfalls (1283 -> 3300). Rein in CSS laesst sich das nicht anhalten:
   animation-play-state ist nicht animierbar.

   Deshalb genau eine Regel und ein kleiner Beobachter in main.js. Timing,
   Aussehen und Erzaehlung bleiben unveraendert - der Loop steht nur still,
   solange ihn niemand sehen kann.
   Angehalten wird nur die ZWEITE Animation - der Zeit-Loop. Die erste ist
   scrollgesteuert und leitet ihre Zeit ohnehin aus der Scrollposition ab;
   sie anzuhalten waere unnoetig und koennte einen veralteten Zustand
   festhalten. */
.reise:not(.im-bild) .w-neu{ animation-play-state: running, paused; }
@keyframes zb-w-neu{
  0%       { opacity: 0; transform: translate3d(0, -180%, 0); }
  18%      { opacity: 1; }
  44%      { transform: translate3d(0, 0, 0); }
  76%      { transform: translate3d(0, 0, 0); opacity: 1; }
  90%,100% { transform: translate3d(0, 0, 0); opacity: 0; }
}

/* --- Halteregel, gleich wie bei der Reise: der Zeit-Loop steht still,
       solange die Szene nicht im Bild ist. Gemessen, dass er sonst
       durchlaeuft (Strom 4116 -> 6116 ms, Uebergabe 2333 -> 4333 ms).
       Reines Anhalten, kein Zuruecksetzen: beim Wiedereintritt laeuft
       die Bewegung an der Stelle weiter, an der sie stand. --- */
/* Spezifitaet muss die Animationsregel schlagen: dort steht das
   animation-Kurzformat, und das setzt play-state auf running zurueck.
   .js-reveal .strom.in .strom-band ist 0-4-0 - die Halteregel braucht
   mindestens dasselbe Gewicht. */
.js-reveal .strom.in:not(.im-bild) .strom-band{ animation-play-state: paused; }
.js-reveal .strom.in:not(.im-bild) ~ .strom-frage{ animation-play-state: paused; }
.js-reveal .uebergabe.in:not(.im-bild) .ug-blatt,
.js-reveal .uebergabe.in:not(.im-bild) .ug-paket,
.js-reveal .uebergabe.in:not(.im-bild) .ug-ankunft,
.js-reveal .uebergabe.in:not(.im-bild) .ug-marke{ animation-play-state: paused; }

/* ==========================================================================
   BUGFIX 3C — "Deine Buchhaltung ist aktuell?" war bewegungslos
   --------------------------------------------------------------------------
   BEFUND, gemessen: in diesem Abschnitt hatte KEIN Element eine Animation
   (elementeMitAnimation: 0 bei 390 und 1440). Nur drei Reveal-Uebergaenge.
   Der Unterschied zwischen dem scharfen und dem weichen Feld war rein
   statisch - er BESTAND, aber er PASSIERTE nicht. Deshalb hat ihn niemand
   bemerkt.

   Zweiter geprueffter Verdacht, WIDERLEGT: bei 390 stand ein Reveal-Element
   auf false. Es lag nur unter der Falz (oben 849 bei 844 px Hoehe); nach
   dem Scrollen ist es sichtbar. Kein Bug, keine Aenderung.

   KLEINSTE BEHEBUNG, kein Redesign: der Unterschied kommt jetzt AN.
   Beide Felder bauen sich auf; die linken Zeilen stellen scharf, die
   rechten versuchen es und BLEIBEN WEICH. Genau das ist die Aussage -
   das weiche Feld loest sich weiterhin nicht auf.

   FOCUS aus der Bewegungssprache. Einmalig beim Eintritt, kein Loop.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference){
  .js-reveal .twofold .fold-lines span{
    opacity: 0;
    transform: translate3d(0, 6px, 0);
    transition: opacity 620ms var(--ease), transform 620ms var(--ease), filter 900ms var(--ease);
  }
  /* Die bekannte Seite: kommt an und stellt scharf. */
  .js-reveal .twofold .fold:not(.fold--soft) .fold-lines span{ filter: blur(4px); }
  .js-reveal .twofold.in .fold:not(.fold--soft) .fold-lines span{ opacity: 1; transform: none; filter: blur(0); }

  /* Die andere: kommt genauso an - und bleibt weich. Das ist der Punkt. */
  .js-reveal .twofold .fold--soft .fold-lines span{ filter: blur(9px); opacity: 0; }
  .js-reveal .twofold.in .fold--soft .fold-lines span{ opacity: .5; transform: none; filter: blur(3.5px); }

  .js-reveal .twofold.in .fold-lines span:nth-child(2){ transition-delay: 130ms; }
  .js-reveal .twofold.in .fold-lines span:nth-child(3){ transition-delay: 260ms; }
  /* Die weiche Seite kommt spuerbar spaeter - man sieht erst, was man kennt. */
  .js-reveal .twofold.in .fold--soft .fold-lines span{ transition-delay: 420ms; }
  .js-reveal .twofold.in .fold--soft .fold-lines span:nth-child(2){ transition-delay: 550ms; }
  .js-reveal .twofold.in .fold--soft .fold-lines span:nth-child(3){ transition-delay: 680ms; }
}

/* ==========================================================================
   3D — ZETTELWIRTSCHAFT: PAPIERIDENTITAET UND TIEFE
   --------------------------------------------------------------------------
   Das Konzept bleibt. Verbessert wird, dass die Teile nach PAPIER aussehen
   und nicht nach weissen Rechtecken.

   Die vier Formen bekommen eine innere Ordnung:
     Rechnung  Kopfzeile oben, Summenzeile unten rechts mit Trennlinie
     Bon       enge Zeilen, gerissene Unterkante (bereits vorhanden)
     Quittung  zwei kurze Zeilen, kleineres Papier
     Karte     eine Zeile und ein Feld

   Kein lesbarer Text, keine Betraege, keine Namen - nur Proportionen und
   Zeilengruppen, die als Beleg lesbar sind.

   Tiefe im Haufen: die Schatten werden nach hinten weicher und flacher.
   ========================================================================== */

/* Rechnung: Kopf oben, Summe unten rechts. */
.slip--rech i:first-child{
  height: 4px;
  width: 46%;
  background: rgba(23,27,21,.26);
  margin-bottom: 9px;
}
.slip--rech i:last-child{
  width: 38%;
  margin-left: auto;
  margin-top: 7px;
  padding-top: 6px;
  height: 3px;
  background: rgba(23,27,21,.22);
  box-shadow: 0 -5px 0 -4px rgba(23,27,21,.14);
}

/* Bon: enge Zeilen, schmales Papier. */
.slip--bon i{ width: 78%; }
.slip--bon i:first-child{ width: 54%; background: rgba(23,27,21,.22); }

/* Quittung: kleines Papier, zwei kurze Zeilen. */
.slip--quitt i:first-child{ width: 62%; }
.slip--quitt i:last-child{ width: 44%; }

/* Karte: eine Zeile und ein Feld. */
.slip--karte i{ height: 4px; width: 48%; }
.slip--karte::after{
  content: "";
  position: absolute; right: 10px; top: 50%;
  width: 18px; height: 12px; margin-top: -6px;
  border-radius: 2px;
  background: rgba(23,27,21,.10);
}

/* Tiefe: was weiter hinten liegt, wirft einen flacheren Schatten. */
.slip:nth-child(3n+1){ box-shadow: 0 1px 2px rgba(23,27,21,.11), 0 4px 10px rgba(23,27,21,.05); }
.slip:nth-child(3n+2){ box-shadow: 0 1px 2px rgba(23,27,21,.15), 0 8px 18px rgba(23,27,21,.07); }
.slip:nth-child(3n+3){ box-shadow: 0 2px 3px rgba(23,27,21,.19), 0 12px 26px rgba(23,27,21,.09); }
.slip:nth-child(8){ box-shadow: 0 1px 2px rgba(12,143,92,.26), 0 12px 26px rgba(12,143,92,.14); }

/* ==========================================================================
   3B — DIE AUSWERTUNGSFLAECHE BEKOMMT SUBSTANZ
   --------------------------------------------------------------------------
   Uebersicht -> jemand sieht hinein -> Einzelnes wird sichtbar.

   Sechs Zeilen statt drei, eine davon ausgewaehlt, und waehrend der Fokus
   hier steht, loest sich ein Detail aus der Flaeche.

   KEINE ZAHLEN. Abschnitt 3B erlaubt sie ("may"), Abschnitt 4 verbietet
   sie fuer diese Szene ausdruecklich. Erlaubnis ist kein Auftrag - die
   Substanz kommt aus Zeilen, Auswahl und Detail, nicht aus Ziffern.
   ========================================================================== */

.w-ausw{ padding: 0; }
.w-ausw i{ left: 10%; width: 66%; height: 4px; background: rgba(23,27,21,.16); }
.w-ausw i:nth-child(1){ top: 13%; width: 44%; background: rgba(23,27,21,.24); }
.w-ausw i:nth-child(2){ top: 30%; }
.w-ausw i:nth-child(3){ top: 44%; }
.w-ausw i:nth-child(4){ top: 58%; width: 54%; }
.w-ausw i:nth-child(5){ top: 72%; width: 72%; }
.w-ausw i:nth-child(6){ top: 86%; width: 40%; margin-left: 36%; background: rgba(23,27,21,.22); }

/* Die ausgewaehlte Position. */
.w-gewaehlt{ background: var(--green) !important; box-shadow: 0 1px 5px rgba(12,143,92,.34); }

/* Das Detail, das sich herausloest. */
.w-detail{
  position: absolute;
  right: -14%; top: 34%;
  width: 46%; height: 30%;
  border-radius: 4px;
  background: #FFFFFF;
  box-shadow: 0 3px 8px rgba(23,27,21,.16), 0 16px 34px rgba(23,27,21,.12), inset 0 0 0 1px rgba(12,143,92,.26);
  opacity: 0;
}
.w-detail::before, .w-detail::after{
  content: ""; position: absolute; left: 12%; height: 3px; border-radius: 2px;
  background: rgba(23,27,21,.18);
}
.w-detail::before{ top: 30%; width: 62%; }
.w-detail::after{ top: 58%; width: 44%; background: rgba(12,143,92,.45); }

@supports (animation-timeline: view()) and (width: 1cqw) {
  @media (prefers-reduced-motion: no-preference) {
    .w-detail{ animation: zb-w-detail linear both; animation-timeline: --reise; animation-range: contain 42% contain 62%; }
    .w-gewaehlt{ animation: zb-w-gewaehlt linear both; animation-timeline: --reise; animation-range: contain 40% contain 58%; }
  }
}

@keyframes zb-w-detail{
  0%,  22% { opacity: 0; transform: translate3d(-16%, 6%, 0) scale(.9); }
  62%      { opacity: 1; transform: none; }
  100%     { opacity: 1; transform: none; }
}
@keyframes zb-w-gewaehlt{
  0%,  26% { background: rgba(23,27,21,.16); box-shadow: none; }
  70%,100% { background: var(--green); box-shadow: 0 1px 5px rgba(12,143,92,.34); }
}

/* ==========================================================================
   MOBILE-FIRST — "WO STEHST DU GERADE?" BEI 390
   --------------------------------------------------------------------------
   BEFUND: Der Abschnitt war ein zusammengeschobener Desktop. Gemessen bei
   390 px: 1.875 px hoch (2,2 Bildschirme), alle FUENF Fragen und ALLE
   FUENFZEHN Antworten gleichzeitig sichtbar, und die Ringkomposition lag
   ueber der ersten Frage.

   Mobil bekommt deshalb eine EIGENE Komposition, keine Verkleinerung:

     1  Titel und Einstieg
     2  eine zurueckhaltende Fortschrittslinie statt des Rings
     3  GENAU EINE aktive Frage mit drei grossen Antworten
     4  beantwortete Fragen bleiben als gesagter Satz stehen
     5  die naechste Frage wird aktiv
     6  am Ende der Schlusssatz

   OHNE JAVASCRIPT aendert sich nichts am Zugang: die Klasse .js-schritte
   setzt das Skript. Fehlt sie, stehen alle fuenf Fragen im normalen Fluss.
   ========================================================================== */

@media (max-width: 859px){

  /* --- Aus dem Ring wird eine Linie mit fuenf Punkten --- */
  .ort-bild{
    position: static;
    aspect-ratio: auto;
    max-width: none;
    height: auto;
    order: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    /* Der Fortschritt ist der leise Fuss des Blocks, nicht ein eigener
       Abschnitt: 92 px Abstand haben ihn abgehaengt, gemessen. */
    margin: 4px 0 0;
    padding: 0 2px;
  }
  .ort-body{ row-gap: 24px; }
  .ort-ring{
    /* Die Linie liegt unter den fuenf Punkten, nicht ueber der Breite. */
    position: absolute;
    left: 6px; right: auto; top: 50%;
    width: 84px; height: 1px;
    transform: none;
    border-radius: 0;
    box-shadow: none;
    background: var(--rule);
    opacity: 1;
  }
  .ort-bild{ position: relative; }
  .ort-mitte{
    position: static;
    order: 2;
    width: auto; height: auto;
    transform: none;
    background: none;
    box-shadow: none;
    border-radius: 0;
    display: block;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ink-3);
    white-space: nowrap;
    padding-left: 12px;
  }
  .ort-mitte br{ display: none; }
  .ort-punkt{
    position: relative;
    left: auto; top: auto;
    width: 10px; height: 10px;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
    margin-right: 9px;
  }
  .ort-punkt b{
    /* display: block ist noetig. Ohne position:absolute faellt <b> auf
       inline zurueck, und dann greifen Breite und Hoehe nicht - gemessen
       0x0 und transparent. */
    display: block;
    position: static;
    width: 10px; height: 10px;
    background: var(--rule);
    box-shadow: inset 0 0 0 1px rgba(23,27,21,.22);
    filter: none !important;
    opacity: 1 !important;
    transition: background-color 320ms var(--ease);
  }
  .ort-body:has(input[name="ort1"]:checked) .ort-punkt[data-d="1"] b,
  .ort-body:has(input[name="ort2"]:checked) .ort-punkt[data-d="2"] b,
  .ort-body:has(input[name="ort3"]:checked) .ort-punkt[data-d="3"] b,
  .ort-body:has(input[name="ort4"]:checked) .ort-punkt[data-d="4"] b,
  .ort-body:has(input[name="ort5"]:checked) .ort-punkt[data-d="5"] b{
    background: var(--green); box-shadow: none;
  }

  /* --- Eine Entscheidung nach der anderen --- */
  .js-schritte .frage:not([data-aktiv]):not(:has(input:checked)){ display: none; }

  /* Beantwortet und zugeklappt: die Frage wird zur Notiz, die eigene
     Antwort bleibt stehen, die beiden anderen treten ab. */
  .frage.ist-zu .frage-text{ font-size: 15px; line-height: 1.35; color: var(--ink-3); font-weight: 500; margin-bottom: 4px; }
  .frage.ist-zu .antwort:not(:has(input:checked)){ display: none; }
  /* Wieder geoeffnet. Diese Regel ist noetig, weil die seitenweite Zeile
     ".frage:has(input:checked) .antwort:not(:has(input:checked))" die
     uebrigen Antworten sonst dauerhaft ausblendet - der Aendern-Knopf
     waere ohne sie ein Versprechen ohne Wirkung. Der .js-schritte-Praefix
     hebt die Spezifitaet ueber jene Zeile und haelt die Regel zugleich
     auf den Schrittmodus begrenzt. */
  .js-schritte .frage[data-offen] .antwort:not(:has(input:checked)){ display: flex; }
  /* Die gewaehlte Antwort bleibt als gesagter Satz stehen. Die Regel
     haengt am Zuklapp-Zustand, nicht an :has(input:checked): sonst
     verliert auch die WIEDER GEOEFFNETE Frage ihre 62-px-Trefferflaechen
     und steht mit drei 32-px-Zeilen da. */
  .frage.ist-zu .antwort{
    border-top: 0; border-bottom: 0;
    border-left: 2px solid var(--green);
    padding: 4px 0 4px 15px;
    min-height: 0;
  }
  .frage.ist-zu .antwort input{ display: none; }
  .frage.ist-zu .frage-aendern{ display: inline-flex; }
  .frage.ist-zu{ padding-bottom: 16px; }

  .frage-aendern{
    /* 44 px Trefferflaeche, ohne optisch schwerer zu werden: die
       Polsterung wird durch negative Aussenabstaende wieder aufgehoben. */
    display: none;
    align-items: center;
    min-height: 44px;
    margin: -8px 0 -12px; padding: 0 16px 0 0;
    border: 0; background: none;
    font: inherit; font-size: 14px;
    color: var(--green-deep);
    text-decoration: underline; text-underline-offset: 3px;
    cursor: pointer;
  }

  .frage{ border-top: 0; padding: 0 0 26px; }
  .frage:first-child{ padding-top: 0; }
  .frage-text{ font-size: 20px; line-height: 1.3; margin-bottom: 20px; }

  /* --- Antworten: gross, ruhig, ganze Breite --- */
  .antworten{ gap: 0; }
  .antwort{
    min-height: 62px;
    padding: 17px 4px 17px 2px;
    border-left: 0;
    border-top: 1px solid var(--rule);
    gap: 15px;
  }
  .antwort:last-child{ border-bottom: 1px solid var(--rule); }
  .antwort:hover{ border-left: 0; padding-left: 2px; }
  .antwort input{ width: 11px; height: 11px; }
  .antwort-text{ font-size: 17.5px; line-height: 1.35; }

  .ort-schluss{ margin-top: 34px; }
}