/* ═══════════════════════════════════════════════════════════
   SASCHA LAUDENKLOS — Personal Brand
   1. Tokens  2. Base  3. Typo  4. Buttons  5. Nav  6. Hero
   7. Sections  8. Media  9. Footer  10. Motion  11. Responsive
   ═══════════════════════════════════════════════════════════ */

/* ─────────── 1. TOKENS ─────────── */
:root {
  /* Markenpaket: Primär #2E4730, Kontrast #E6CEAD, Sekundär #262524 */
  --gruen:        #2E4730;
  --sand:         #E6CEAD;
  --sand-dunkel:  #91662C;   /* traegt als Text auf Off-White, 4.6:1 */
  --anthrazit:    #262524;
  --offwhite:     #FFFFFF;

  --ff-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --ff-serif: "Instrument Serif", "Times New Roman", Georgia, serif;

  --maxw: 1320px;
  --gutter: clamp(1.25rem, 5vw, 5rem);

  /* Radienskala. Vorher gab es vier zufaellige Werte ohne Bezug
     zueinander. Verschachtelte Flaechen werden konzentrisch gesetzt:
     aeusserer Radius = innerer Radius + Innenabstand. */
  /* Frueher war die Skala auf ein Minimum zurueckgenommen, weil das
     Markenpaket rechtwinklig ist. Die Seite ist aber eine Landingpage,
     kein Geschaeftsbericht: sie lebt von Flaechen, nicht von Kanten.
     Die fuenf Werte sind deshalb angehoben — konzentrisch gestaffelt,
     aeusserer Radius = innerer Radius + Innenabstand. */
  /* Ueberschriften-Skala. Vorher hatte jeder Abschnitt seinen eigenen
     Wert (47/44/39/35/58 px) — die groesste Ueberschrift stand im
     Abschluss statt im Kopf. Vier Stufen, absteigend nach Gewicht
     der Aussage. */
  --h-display: clamp(2.4rem, 1rem + 4.6vw, 4.6rem);
  --h-gross:   clamp(2.1rem, 1rem + 3.6vw, 3.8rem);
  --h-mittel:  clamp(1.9rem, 1rem + 3.0vw, 3.2rem);
  --h-klein:   clamp(1.7rem, 1rem + 2.4vw, 2.6rem);

  /* Stapelordnung. Vorher standen hier 999, 1000, 9998, 9999 und
     10000 nebeneinander, ohne Bezug zueinander. */
  --z-grund:    1;
  --z-leiste:  40;
  --z-vorhang: 60;
  --z-nav:     70;
  --z-rausch:  80;
  --z-skip:    90;

  --r-xs:    8px;
  --r-s:    14px;   /* Buttons und Eingaben */
  --r-m:    18px;   /* Bilder, kleinere Flaechen */
  --r-l:    28px;   /* grosse Flaechen, Videokacheln */
  --r-pill: 999px;  /* nur was wirklich eine Kapsel ist: Schalter, Schilder */

  /* Easing nach Zweck:
     ease-out  → etwas tritt ein oder verlässt den Bildschirm
     ease-in-out → etwas Sichtbares bewegt sich von A nach B
     ease      → Hover- und Farbwechsel
     linear    → nur konstante Bewegung (Laufband, Fortschritt) */
  --ease-out:     cubic-bezier(.23, 1, .32, 1);         /* kraeftiger als die CSS-Standards */
  --ease-out-weit: cubic-bezier(.19, 1, .22, 1);        /* expo, fuer weite Wege */
  --ease-inout:   cubic-bezier(.77, 0, .175, 1);        /* quart */
  --ease-schub:   cubic-bezier(.32, .72, 0, 1);         /* iOS-Schubladenkurve */
  --ease-hover:   ease;

  /* Dauern. Bedienelemente bleiben unter 300 ms, damit sie sich
     unmittelbar anfuehlen. Nur die Auftritte beim Scrollen duerfen
     laenger sein — das ist Marketing, kein Werkzeug. */
  --t-mikro:  120ms;
  --t-hover:  180ms;
  --t-ui:     240ms;
  --t-gross:  300ms;

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-soft: cubic-bezier(.25, .1, .25, 1);
  --t-theme: 520ms cubic-bezier(.77, 0, .175, 1);
}

/* Dark ist der Hauptmodus und damit die Standardpalette auf :root.
   So sitzen die Farben auch dann, wenn das JS noch nicht gelaufen ist. */
/* Ein einziger Satz Farben. Die Seite ist hell, und zwar immer:
   Der frühere Dunkelmodus wirkte auf vier von fünf Seiten ohnehin nicht,
   weil .seite-hell am body alles überschrieb, was [data-theme] am html
   gesetzt hatte. Statt den Fehler zu reparieren, ist der Modus
   entfallen — eine gepflegte Fassung schlägt zwei halbe. */
/* Zeilenumbruch: Ueberschriften werden ausgeglichen, Fliesstext
   vermeidet einzelne Woerter in der letzten Zeile. */
h1, h2, h3, .start__titel, .h2, .h1-alt,
.stimmen__titel, .funnelteaser__titel, .videoseite__titel { text-wrap: balance; }
p, li { text-wrap: pretty; }

:root {
  --bg:         #FFFFFF;
  --bg-alt:     #F6F6F5;
  --band:       #2E4730;
  --band-soft:  #F2F2F1;
  --fg:         #262524;
  --fg-soft:    rgba(46, 71, 48, .82);
  /* .64 ergab auf den hellen Gruenden 3,6:1 und lag damit unter den
     4,5:1, die Fliesstext braucht. Betraf Hinweise, Blocklegenden und
     die Einheitszeichen im Rechner. .76 bringt 4,7:1.
     Die dunklen Paletten sind davon nicht betroffen, die liegen
     ohnehin zwischen 4,8 und 6,8:1. */
  --fg-mute:    rgba(46, 71, 48, .76);
  --rule:       rgba(46, 71, 48, .18);
  --rule-soft:  rgba(46, 71, 48, .10);
  --accent:     #91662C;
  --btn-fg:     #FFFFFF;
  --auswahl:    #F0E4D2;   /* helle Sandtoenung */
  --auswahl-fg: #262524;
  --shade:      rgba(255, 255, 255, .7);
  --nav-bg:     rgba(255, 255, 255, .62);
  --ph-a:       #EDEDEC;
  --ph-b:       #F6F6F5;
  --fehler:     #AD5537;
  color-scheme: light;
}

/* Dunkelgrüne Bänder tragen immer die dunkle Palette */
.band, .contact {
  --fg:        #FFFFFF;
  --fg-soft:   rgba(255, 255, 255, .76);
  --fg-mute:   rgba(255, 255, 255, .60);
  --rule:      rgba(255, 255, 255, .16);
  --rule-soft: rgba(255, 255, 255, .09);
  --accent:    #E6CEAD;
  --btn-fg:    #2E4730;
  --auswahl:    #E6CEAD;   /* auf dunklem Grund traegt Sand */
  --auswahl-fg: #2E4730;
  --ph-a:      #355137;
  --ph-b:      #2A412C;
  --fehler:    #E08A66;
}

/* ─────────── 2. BASE ─────────── */
*, *::before, *::after { box-sizing: border-box; }

/* Ohne das hier gewinnt jedes display:flex/grid gegen das hidden-Attribut —
   ausgeblendete Zeilen waeren dann trotzdem sichtbar. */
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--ff-sans);
  font-size: clamp(1rem, .95rem + .2vw, 1.0625rem);
  font-weight: 300;
  line-height: 1.72;
  letter-spacing: .002em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  transition: background-color var(--t-theme), color var(--t-theme);
}
body.is-locked { overflow: hidden; }

/* feines Filmkorn für cineastische Tiefe */
body::after {
  content: "";
  position: fixed; inset: -50%;
  pointer-events: none; z-index: var(--z-rausch);
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* Markierter Text.
   Vorher stand hier die Akzentfarbe als Flaeche mit Anthrazit darauf:
   auf der Startseite also #262524 auf #91662C, rund 2:1 — man konnte
   nicht mehr lesen, was man gerade markiert hatte. Die Auswahl ist
   jetzt eine helle Tonung mit dunklem Text und wird je Palette
   gesetzt, wie die uebrigen Token auch. */
::selection {
  background: var(--auswahl, #F0E4D2);
  color: var(--auswahl-fg, #262524);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.btn:focus-visible { border-radius: var(--r-s); }
/* Auf Fotos braucht der Ring einen dunklen Sockel, sonst verschwindet er */
.start a:focus-visible, .video__deckel:focus-visible {
  outline-offset: 4px;
  box-shadow: 0 0 0 6px rgba(38, 37, 36, .6);
}

.skip-link {
  position: fixed; top: -100px; left: 1rem; z-index: var(--z-skip);
  padding: .75rem 1.25rem; background: var(--accent); color: var(--anthrazit);
  font-size: .8rem; letter-spacing: .08em; text-transform: uppercase;
}
.skip-link:focus { top: 1rem; }
/* Das Sprungziel nimmt den Fokus auf, soll ihn aber nicht als Rahmen
   um die halbe Seite zeigen. Der Sprung selbst ist die Rueckmeldung. */
main[tabindex="-1"]:focus { outline: none; }

.container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: var(--gutter); }
.container-wide { width: 100%; max-width: 1680px; margin-inline: auto; padding-inline: var(--gutter); }
.center { text-align: center; }

/* ─────────── 3. TYPOGRAFIE ─────────── */
h1, h2, h3 {
  margin: 0; font-weight: 400; line-height: 1.06;
  letter-spacing: -.03em;
  /* „Finanzdienstleistung" ist laenger als jede Spalte — ohne das
     hier laeuft die Headline in den Nachbartext. */
  overflow-wrap: break-word;
  hyphens: auto;
  text-wrap: balance;
}
/* Rasterkinder duerfen nicht ueber ihre Spalte hinauswachsen */
.editorial > *, .split > *, .calc__grid > * { min-width: 0; }

em, .serif {
  font-family: var(--ff-serif);
  font-style: italic;
  font-weight: 400;
  letter-spacing: -.005em;
}
/* Die Serife laeuft optisch kleiner als die Sans — ausgleichen */
.h2 em, .h1-alt em, .hero__title em { font-size: 1.06em; }

.h2 {
  font-size: var(--h-mittel);
  letter-spacing: -.035em;
  line-height: 1.02;
  max-width: 18ch;
}
.h2--center { max-width: 24ch; margin-inline: auto; text-align: center; }

.h1-alt {
  font-size: var(--h-gross);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.eyebrow {
  /* Kein Strich, keine Nummer. Der Text selbst sagt, worum es geht. */
  display: block;
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
  color: var(--accent);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .26em;
  text-transform: uppercase;
}


.lead {
  font-size: clamp(1.15rem, 1rem + .55vw, 1.5rem);
  line-height: 1.6;
  font-weight: 300;
  color: var(--fg);
  letter-spacing: -.008em;
}
.lead--center { max-width: 62ch; margin-inline: auto; text-align: center; color: var(--fg-soft); }

p { color: var(--fg-soft); margin: 0 0 1.6em; }
.lead { margin-bottom: 1.4em; }

.note {
  font-size: .92rem;
  color: var(--fg-mute);
  border-left: 1px solid var(--accent);
  padding-left: 1.25rem;
  line-height: 1.7;
}

.pullquote {
  margin: clamp(3rem, 7vw, 6rem) 0 0;
  padding: 0;
  font-family: var(--ff-serif);
  font-style: italic;
  font-size: clamp(1.5rem, 1rem + 2vw, 2.6rem);
  line-height: 1.32;
  color: var(--fg);
  letter-spacing: -.015em;
}

.list { list-style: none; margin: 2.25rem 0 2.5rem; padding: 0; }
.list li {
  position: relative;
  padding: .85rem 0 .85rem 1.9rem;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--fg-soft);
  font-size: .98rem;
}
.list li::before {
  content: ""; position: absolute; left: 0; top: 1.55em;
  width: 12px; height: 1px; background: var(--accent);
}

/* ─────────── 4. BUTTONS ─────────── */
.btn {
  position: relative;
  display: inline-flex; align-items: center; gap: .6em;
  padding: 1.05em 1.9em;
  font-size: .82rem; font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
  border: 1px solid var(--rule);
  border-radius: var(--r-s);
  transition: color var(--t-hover) var(--ease-hover),
              border-color var(--t-hover) var(--ease-hover),
              background-color var(--t-hover) var(--ease-hover),
              transform var(--t-mikro) var(--ease-out);
  overflow: hidden;
  isolation: isolate;
}
.btn .arr { transition: transform var(--t-hover) var(--ease-out); }
.btn:hover .arr { transform: translateX(5px); }

/* goldene Fläche fährt von unten ein */
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: var(--accent);
  transform: scaleY(0); transform-origin: bottom;
  transition: transform var(--t-ui) var(--ease-out);
}
.btn:hover::before { transform: scaleY(1); }
.btn:hover { color: var(--btn-fg); border-color: var(--accent); }

.btn--solid { background: var(--accent); color: var(--btn-fg); border-color: var(--accent); }
.btn--solid::before { background: transparent; }
.btn--solid:hover { background: transparent; color: var(--accent); }

.btn--line { border-color: var(--rule); color: var(--fg); }
.btn--ghost { border-color: transparent; padding: .8em 1.1em; }
.btn--ghost:hover { border-color: var(--accent); }
.btn--lg { padding: 1.3em 2.6em; font-size: .86rem; }
/* Der Pfeil zeigt nach unten, also faehrt er beim Ueberfahren auch
   nach unten und nicht nach rechts wie bei den uebrigen Knoepfen. */
.btn--runter:hover .arr { transform: translate(0, 4px); }

/* Rueckmeldung beim Druecken — 0.97, nicht kleiner, sonst wirkt es billig */
.btn:active { transform: scale(.97); }
.switch__btn:active .switch__track,
.burger:active, .fb-knopf:active { transform: scale(.94); }

/* ─────────── 5. NAVIGATION ─────────── */
/* ─── Glas ────────────────────────────────────────────────────
   Naeherung an Apples Liquid Glass. Wichtig zur Einordnung: Apple
   dokumentiert das Material fuer die eigenen Plattformen, ein
   offizielles Paket fuers Web gibt es nicht. Was hier steht, ist
   backdrop-filter plus geschichtete Raender, kein Apple-Material.

   Der HIG ist deutlich, wofuer es gedacht ist: fuer die Bedienebene,
   die ueber dem Inhalt schwebt (Leisten, Fenster), nicht fuer Karten
   im Inhalt selbst. Deshalb traegt hier die Statusleiste Glas, aber
   nicht das Eingabeformular.

   Die Rezeptur an einer Stelle, damit die Flaechen nicht auseinander
   laufen: Unschaerfe, angehobene Farbe, heller Innenrand als
   Lichtkante, getoenter Schatten. */
.glas {
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, .34);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .5),
    0 10px 34px -12px rgba(46, 71, 48, .3);
}
/* Auf dunklem Grund traegt die Lichtkante weniger und der Schatten mehr. */
.glas--dunkel {
  border-color: rgba(255, 255, 255, .16);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .2),
    0 12px 36px -10px rgba(38, 37, 36, .5);
}

/* Wer Transparenz abgeschaltet hat, bekommt volle Flaechen. Ohne das
   ist Glas fuer genau die Leute unlesbar, die es abgeschaltet haben,
   weil ihnen Durchsichtigkeit Schwierigkeiten macht. */
@media (prefers-reduced-transparency: reduce) {
  .glas, .glas--dunkel, .nav.is-stuck, .statusleiste, .stimme__start {
    backdrop-filter: none; -webkit-backdrop-filter: none;
  }
  .nav.is-stuck { background: var(--bg); }
  .statusleiste { background: var(--gruen); }
  .stimme__start { background: rgba(255, 255, 255, .5); }
}

.nav {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-nav);
  transition: background-color var(--t-gross) var(--ease-hover),
              backdrop-filter var(--t-gross) var(--ease-hover),
              border-color var(--t-gross) var(--ease-hover);
  border-bottom: 1px solid transparent;
}
.nav.is-stuck {
  background: var(--nav-bg);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--rule-soft);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .4);
}
.nav.is-hidden { transform: translateY(-100%); transition: transform var(--t-gross) var(--ease-inout); }

.nav__inner {
  max-width: 1680px; margin-inline: auto;
  padding: clamp(1rem, 2vw, 1.6rem) var(--gutter);
  display: flex; align-items: center; justify-content: space-between; gap: 2rem;
}

.nav__brand-name {
  font-size: .95rem; font-weight: 500; letter-spacing: -.01em;
}
.nav__links { display: flex; gap: clamp(1.1rem, 2.2vw, 2.4rem); }

.navlink {
  position: relative;
  display: inline-flex; align-items: center;
  min-height: 24px;
  font-size: .84rem; font-weight: 300;
  color: var(--fg-soft);
  padding-block: .45rem;
  transition: color var(--t-hover) var(--ease-hover);
}
.navlink::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-ui) var(--ease-out);
}
.navlink:hover { color: var(--fg); }
.navlink:hover::after, .navlink.is-active::after { transform: scaleX(1); }
.navlink.is-active { color: var(--fg); }

.nav__actions { display: flex; align-items: center; gap: clamp(.5rem, 1.4vw, 1.25rem); }

.theme-toggle svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; }
.theme-toggle .icon-moon { fill: currentColor; stroke: none; }

/* Burger */
.burger { display: none; width: 40px; height: 40px; place-items: center; }
.burger span {
  display: block; width: 20px; height: 1px; background: currentColor;
  transition: transform var(--t-gross) var(--ease-out), opacity var(--t-hover) var(--ease-out);
}
.burger span + span { margin-top: 6px; }
.burger.is-open span:first-child { transform: translateY(3.5px) rotate(45deg); }
.burger.is-open span:last-child { transform: translateY(-3.5px) rotate(-45deg); }

/* Mobile Menü */
.mobile-menu {
  position: fixed; inset: 0; z-index: var(--z-vorhang);
  background: var(--bg);
  padding: clamp(6rem, 16vh, 9rem) var(--gutter) 3rem;
  display: flex; flex-direction: column; justify-content: space-between;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-gross) var(--ease-schub), visibility var(--t-gross);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu__nav { display: flex; flex-direction: column; }
.mobile-menu__nav a {
  display: flex; align-items: baseline; gap: 1rem;
  padding: .75rem 0;
  border-bottom: 1px solid var(--rule-soft);
  font-size: clamp(1.6rem, 8vw, 2.4rem);
  letter-spacing: -.03em;
  opacity: 0; transform: translateY(12px);
  /* Transitions statt Keyframes: laesst sich mitten in der Bewegung
     umkehren. Keyframes wuerden bei jedem Umschalten neu bei null
     anfangen — sichtbar, wenn jemand schnell auf- und zumacht. */
  transition: opacity var(--t-ui) var(--ease-out) var(--stufe, 0ms),
              transform var(--t-gross) var(--ease-out) var(--stufe, 0ms);
}
.mobile-menu.is-open .mobile-menu__nav a { opacity: 1; transform: none; }
/* Beim Schliessen ohne Staffelung und schneller — der Nutzer hat
   entschieden, das System soll nur noch bestaetigen. */
.mobile-menu:not(.is-open) .mobile-menu__nav a {
  transition-duration: var(--t-hover);
  transition-delay: 0ms;
}
.mobile-menu__nav a:nth-child(1) { --stufe: 0ms; }
.mobile-menu__nav a:nth-child(2) { --stufe: 45ms; }
.mobile-menu__nav a:nth-child(3) { --stufe: 90ms; }
.mobile-menu__nav a:nth-child(4) { --stufe: 135ms; }
.mobile-menu__nav a:nth-child(5) { --stufe: 180ms; }
.mobile-menu__nav a:nth-child(6) { --stufe: 225ms; }
.mobile-menu__nav a:nth-child(7) { --stufe: 270ms; }
.mobile-menu__nav em {
  font-family: var(--ff-sans); font-style: normal;
  font-size: .75rem; letter-spacing: .2em; color: var(--accent);
}
.mobile-menu__foot { display: flex; flex-direction: column; gap: 1.75rem; }
.mobile-menu__socials { display: flex; gap: 1.75rem; font-size: .82rem; color: var(--fg-mute); letter-spacing: .06em; }
.mobile-menu__socials a { display: inline-flex; align-items: center; min-height: 24px; padding-block: .25rem; }

/* ─────────── 6. HERO ─────────── */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; align-items: flex-end;
  padding: clamp(7rem, 14vh, 10rem) 0 clamp(3.5rem, 8vh, 6rem);
  overflow: hidden;
}

.hero__media {
  position: absolute; inset: 0;
  z-index: 0;
  display: flex; justify-content: flex-end;
  will-change: transform;
}
.hero__media .portrait {
  height: 100%; width: min(62vw, 1000px);
  object-fit: cover; object-position: 42% 20%;
  /* Foto läuft weich in den Hintergrund aus — keine Foto-Card */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 22%, #000 62%),
    linear-gradient(to bottom, transparent 0%, #000 26%, #000 72%, transparent 99%);
  mask-image:
    linear-gradient(to right, transparent 0%, rgba(0,0,0,.35) 22%, #000 62%),
    linear-gradient(to bottom, transparent 0%, #000 26%, #000 72%, transparent 99%);
  -webkit-mask-composite: source-in;
  mask-composite: intersect;
  opacity: 0;
  animation: heroImg 1.9s var(--ease) .15s forwards;
}
@keyframes heroImg { from { opacity: 0; transform: scale(1.06); } to { opacity: 1; transform: none; } }
.hero__media .portrait { filter: contrast(1.02) saturate(.94); }

.hero__veil {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(100deg, var(--bg) 6%, color-mix(in srgb, var(--bg) 78%, transparent) 40%, transparent 68%),
    linear-gradient(to top, var(--bg) 2%, transparent 42%);
}

.hero__inner { position: relative; z-index: 2; }

.hero__title {
  font-size: clamp(2.5rem, 1rem + 6.2vw, 6.4rem);
  line-height: .99;
  letter-spacing: -.048em;
  margin: 0 0 clamp(2rem, 4vw, 3rem);
  max-width: 16ch;
}
.hero__title .line { display: block; }
.hero__title em { color: var(--fg); }

.hero__meta {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .5rem 1.25rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--rule);
  max-width: 46ch;
}
.hero__name { font-size: 1rem; font-weight: 500; letter-spacing: .01em; }
.hero__role { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }

.hero__text {
  max-width: 46ch;
  margin: 1.5rem 0 clamp(2.25rem, 4vw, 3rem);
  font-size: clamp(.98rem, .93rem + .25vw, 1.1rem);
  color: var(--fg-soft);
}

.hero__ctas { display: flex; flex-wrap: wrap; gap: .75rem 1rem; }

.hero__scroll {
  position: absolute; right: var(--gutter); bottom: clamp(3.5rem, 8vh, 6rem); z-index: 2;
  display: flex; align-items: center; gap: .9rem;
  font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; color: var(--fg-mute);
}
.hero__scroll-line { display: block; width: 56px; height: 1px; background: var(--rule); position: relative; overflow: hidden; }
.hero__scroll-line::after {
  content: ""; position: absolute; inset: 0; background: var(--accent);
  animation: scrollLine 2.8s var(--ease-soft) infinite;
}
@keyframes scrollLine {
  0% { transform: translateX(-100%); }
  55%, 100% { transform: translateX(100%); }
}

/* ─────────── 7. SECTIONS ─────────── */
.section {
  position: relative;
  padding-block: clamp(5.5rem, 13vw, 11rem);
}

.band { background: var(--band); }
.band--soft { background: var(--band-soft); }
.band--soft {
  --fg: #262524; --fg-soft: rgba(46,71,48,.82); --fg-mute: rgba(46,71,48,.76);
  --rule: rgba(46,71,48,.18); --rule-soft: rgba(46,71,48,.10);
  --accent: #91662C; --btn-fg: #FFFFFF; --fehler: #AD5537;
  --ph-a: #EDEDEC; --ph-b: #F6F6F5;
}
.band, .band--soft { transition: background-color var(--t-theme); }

/* Facts */
.facts { padding-block: clamp(2.5rem, 5vw, 4rem); border-block: 1px solid var(--rule-soft); }
.facts__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 4vw, 4rem); }
.fact { display: flex; flex-direction: column; gap: .4rem; }
.fact + .fact { position: relative; }
.fact + .fact::before {
  content: ""; position: absolute; left: calc(clamp(1.5rem, 4vw, 4rem) / -2); top: .2em; bottom: .2em;
  width: 1px; background: var(--rule-soft);
}
.fact__num {
  font-size: clamp(1.35rem, .9rem + 1.5vw, 2.2rem);
  letter-spacing: -.03em; line-height: 1.1;
}
.fact__num .plus { color: var(--accent); }
.fact__label { font-size: .78rem; letter-spacing: .13em; text-transform: uppercase; color: var(--fg-mute); }

/* Editorial */
.editorial {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: start;
}
.editorial--offset { grid-template-columns: minmax(0, 1fr); }
.editorial__body { padding-top: .6rem; }
.editorial__body--full { max-width: 62ch; margin-left: auto; }

.media-break { margin-block: clamp(4rem, 9vw, 8rem); }

/* Statement */
.statement {
  margin: 0 0 clamp(3.5rem, 8vw, 7rem);
  padding: 0;
  font-family: var(--ff-serif);
  font-size: clamp(2rem, .9rem + 4vw, 4.6rem);
  line-height: 1.06;
  letter-spacing: -.02em;
  max-width: 26ch;
  text-wrap: initial;
}
.statement em { color: var(--accent); }

.principles {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  padding-top: clamp(1rem, 2vw, 1.5rem);
}
.principle {
  padding-top: 1.6rem;
  border-top: 1px solid var(--accent);
}
.principle h3 {
  font-size: clamp(1.15rem, 1rem + .5vw, 1.5rem);
  margin-bottom: .85rem;
}
.principle p { margin: 0; font-size: .96rem; max-width: 32ch; }

/* Split */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .82fr);
  gap: clamp(2.5rem, 6vw, 6rem);
  align-items: center;
}
.split__text .h2 { margin-bottom: 2rem; }

/* Topics */
.topics {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 4vw, 3.5rem);
  margin-block: clamp(3.5rem, 8vw, 6rem);
}
.topic { border-top: 1px solid var(--rule); padding-top: 1.5rem; }
.topic span { font-size: .75rem; letter-spacing: .2em; color: var(--accent); }
.topic h3 { font-size: 1.25rem; margin: .9rem 0 .7rem; }
.topic p { margin: 0; font-size: .93rem; color: var(--fg-mute); max-width: 30ch; }

.values {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: clamp(.75rem, 2.5vw, 2rem);
  margin-bottom: clamp(3rem, 6vw, 4.5rem);
  font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-mute);
}
.values i { width: 4px; height: 4px; background: var(--accent); border-radius: 50%; }

/* ─── Rechner ─── */
.calc__intro { max-width: 66ch; margin-bottom: clamp(3rem, 7vw, 5.5rem); }
.calc__intro .h2 { margin-bottom: 1.75rem; }

.calc__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 25rem);
  gap: clamp(2.5rem, 6vw, 5.5rem);
  align-items: start;
}

.calc__block { border: 0; padding: 0; margin: 0 0 clamp(2.5rem, 5vw, 3.5rem); }
.calc__legend {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem;
  width: 100%; padding: 0 0 1.25rem;
  /* Der Abstand unter der Linie gehoert zur Ueberschrift, nicht zur
     ersten Zeile: die Zeilen tragen seit dem Umbau keinen Innenabstand
     mehr, sonst klebte die erste Beschriftung an der Linie. */
  margin-bottom: 1.6rem;
  border-bottom: 1px solid var(--rule);
  font-size: .72rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-mute);
}
.calc__legend span { color: var(--accent); }

/* Zwei Felder nebeneinander, sobald Platz ist. Elf Positionen
   untereinander lasen sich wie eine Liste ohne Ende; nebeneinander
   halbiert sich der Weg nach unten.

   Die Zeile ist dafuer eine Spalte, die ihr Feld nach unten drueckt:
   nur so stehen die Felder auf einer Linie, auch wenn die Beschriftung
   daneben zweizeilig umbricht. */
.crow-gitter { display: grid; gap: 0 1.5rem; }
@media (min-width: 721px) {
  .crow-gitter { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .crow-gitter > .crow { display: flex; flex-direction: column; justify-content: flex-end; }
}

/* Zwischenueberschriften geben dem Block Rhythmus. Sie sind leiser als
   die Blockueberschrift darueber — eine Stufe, keine zweite Ebene. */
.calc__gruppe + .calc__gruppe { margin-top: 1.9rem; }
.calc__gruppe-titel {
  display: flex; align-items: center; gap: .55rem;
  margin: 0 0 .85rem;
  font-size: .8rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 78%, transparent);
}
/* Haken, sobald die Gruppe vollstaendig ist. Kein Farbwechsel der
   ganzen Zeile — das waere bei vier Gruppen zu viel Bewegung. */
.calc__gruppe.ist-fertig .calc__gruppe-titel { color: var(--accent); }
.calc__gruppe-haken {
  display: inline-grid; place-items: center; flex: none;
  width: 1.05rem; height: 1.05rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  animation: hakenAn var(--t-ui) var(--ease-out) both;
}
.calc__gruppe-haken svg {
  width: .68rem; height: .68rem;
  fill: none; stroke: var(--accent); stroke-width: 3;
  stroke-linecap: round; stroke-linejoin: round;
}
@keyframes hakenAn {
  from { opacity: 0; transform: scale(.6); }
  to   { opacity: 1; transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .calc__gruppe-haken { animation: none; }
}


/* Eingabezeile
   Beschriftung ueber dem Feld, nicht daneben: auf schmalen Schirmen
   blieben von der 8,5-rem-Spalte sonst vier Ziffern uebrig. Das Feld
   ist eine eigene Flaeche mit Rand und Radius — man sieht, wohin man
   tippen kann, bevor man es versucht hat. */
.crow { display: block; padding: 0; margin-bottom: 1.35rem; border: 0; }
.crow:last-child { margin-bottom: 0; }
.crow-gitter > .crow:last-child { margin-bottom: 1.35rem; }

.crow__kopf {
  display: flex; align-items: center; gap: .5rem;
  margin-bottom: .5rem;
}
.crow__label {
  font-size: .95rem; font-weight: 500; color: var(--fg);
  line-height: 1.45; letter-spacing: -.005em;
}

/* Der Hinweis liegt hinter dem Fragezeichen und kostet so keine
   Zeilenhoehe, solange niemand fragt. 26 px sind knapp — die Flaeche
   waechst deshalb unten in den Antippregeln auf 44 px. */
.crow__frage {
  flex: none; display: inline-grid; place-items: center;
  width: 1.35rem; height: 1.35rem; padding: 0;
  border: 0; border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  color: var(--accent); font: inherit; font-size: .76rem; font-weight: 600;
  line-height: 1; cursor: pointer;
  transition: background var(--t-hover) var(--ease-hover),
              color var(--t-hover) var(--ease-hover);
}
.crow__frage:hover { background: var(--accent); color: var(--btn-fg); }
.crow__frage[aria-expanded="true"] { background: var(--accent); color: var(--btn-fg); }
.crow__frage:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Der Huelle gehoert der Platz im Layout, dem Text nur das Aussehen —
   sonst schoebe der Aussenabstand die zugeklappte Zeile weiter
   auseinander, obwohl nichts zu sehen ist. */
.crow__hinweis {
  display: grid; grid-template-rows: 0fr;
  margin: -.15rem 0 0; padding-bottom: 0; opacity: 0;
  transition: grid-template-rows var(--t-ui) var(--ease-out),
              padding-bottom var(--t-ui) var(--ease-out),
              opacity var(--t-hover) var(--ease-out);
}
/* Der Abstand nach unten sitzt an der Huelle, nicht am Text: Im
   abgeschnittenen Kind zaehlte er nicht zur Zeilenhoehe und blieb
   zugeklappt als 9-px-Luecke stehen. */
.crow__hinweis[data-offen] {
  grid-template-rows: 1fr; padding-bottom: .55rem; opacity: 1;
  transition: grid-template-rows var(--t-gross) var(--ease-schub),
              padding-bottom var(--t-gross) var(--ease-schub),
              opacity var(--t-ui) var(--ease-out);
}
.crow__hint {
  overflow: hidden; min-height: 0; margin: 0;
  font-family: var(--ff-sans); font-style: normal;
  font-size: .82rem; line-height: 1.55; color: var(--fg-mute);
}
.crow__hint a { color: var(--accent); border-bottom: 1px solid transparent; transition: border-color var(--t-hover) var(--ease-hover); }
.crow__hint a:hover { border-bottom-color: var(--accent); }

.crow__field { position: relative; display: block; }
.crow__field input {
  width: 100%; padding: .9rem 2.6rem .9rem 1.05rem;
  background: var(--bg); border: 1px solid var(--rule);
  color: var(--fg); font: inherit; font-size: 1.02rem; font-weight: 400;
  letter-spacing: -.01em; font-variant-numeric: tabular-nums;
  border-radius: var(--r-m); -webkit-appearance: none; appearance: none;
  transition: border-color var(--t-hover) var(--ease-hover),
              box-shadow var(--t-hover) var(--ease-hover);
}
.crow__field input::placeholder { color: var(--fg-mute); font-weight: 300; }

/* Gruen heisst im Rechner genau zweierlei: erledigt oder Ergebnis.
   Ein ausgefuelltes Feld traegt deshalb einen gruenen Hauch am Rand und
   ein gruenes Einheitszeichen. Bei 21 Feldern sieht man damit auf einen
   Blick, was noch offen ist — ohne dass die Spalte zur Ampel wird.

   Steht bewusst vor :hover und :focus: gleiche Spezifitaet, also
   gewinnt die spaetere Regel, und Fokus muss gewinnen. */
.crow[data-gefuellt] .crow__field input {
  border-color: color-mix(in srgb, var(--accent) 32%, transparent);
}
.crow[data-gefuellt] .crow__field i { color: var(--accent); }

.crow__field input:hover { border-color: var(--fg-mute); }
.crow__field input:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
/* Tastatur bekommt den deutlicheren Rahmen, den der Rest der Seite
   auch benutzt; der weiche Ring bleibt der Maus vorbehalten. */
.crow__field input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none;
}
/* Unlesbare Eingabe. Steht bewusst hinter den Fokusregeln: wer das
   Feld zum Korrigieren wieder anklickt, soll weiter sehen, dass es
   das fehlerhafte ist. Farbe allein traegt die Aussage nicht — der
   Satz darunter sagt, was erwartet wird. */
.crow__field input[aria-invalid="true"] {
  border-color: var(--fehler);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fehler) 18%, transparent);
}
.crow__field input[aria-invalid="true"]:focus-visible {
  outline-color: var(--fehler);
}
.crow__field input[aria-invalid="true"] ~ i { color: var(--fehler); }
.crow__fehler {
  display: block; margin: .4rem 0 0;
  font-size: .8rem; line-height: 1.5; color: var(--fehler);
  /* Kommt unter der Feldkante hervor, statt aufzuploppen. Kurz —
     ein Fehler soll gelesen werden, nicht vorgefuehrt. */
  transition: opacity var(--t-hover) var(--ease-out),
              transform var(--t-hover) var(--ease-out);
}
@starting-style {
  .crow__fehler { opacity: 0; transform: translateY(-.25rem); }
}
.crow__field i {
  position: absolute; right: 1.05rem; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: .95rem; color: var(--fg-mute); pointer-events: none;
  transition: color var(--t-hover) var(--ease-hover);
}
.crow__field input:focus ~ i { color: var(--accent); }

/* Summenzeilen sind keine Eingaben: Beschriftung links, Wert rechts. */
.crow--auto, .crow--sum {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  gap: .5rem 1rem; align-items: baseline;
}
.crow--auto .crow__kopf, .crow--sum .crow__kopf {
  grid-column: 1; grid-row: 1; margin-bottom: 0;
}
/* Ohne feste Platzierung schiebt der aufgeklappte Hinweis den Wert in
   eine dritte Zeile — er soll aber neben der Beschriftung stehen bleiben. */
.crow--auto .crow__out, .crow--sum .crow__out {
  grid-column: 2; grid-row: 1;
}
.crow--auto .crow__hinweis, .crow--sum .crow__hinweis {
  grid-column: 1 / -1; grid-row: 2; margin: .1rem 0 0;
}
.crow--sum {
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--rule);
}
.crow--sum .crow__label { color: var(--fg); font-size: 1rem; }
.crow__out {
  font-size: 1.15rem; letter-spacing: -.02em; color: var(--accent);
  font-variant-numeric: tabular-nums; text-align: right;
}

/* Verdeckte Zwischenwerte */
.crow__out--gesperrt { color: var(--fg-mute); letter-spacing: .18em; }

/* Deckungslücke — der Moment, auf den alles hinausläuft */
.luecke {
  display: flex; flex-direction: column; gap: .3rem;
  margin-bottom: 2rem; padding: 1.35rem 1.3rem 1.45rem;
  border: 1px solid color-mix(in srgb, var(--accent) 24%, transparent);
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
}
.luecke--fehlt {
  background: color-mix(in srgb, var(--fehler) 8%, transparent);
  border-color: color-mix(in srgb, var(--fehler) 26%, transparent);
}
.luecke--fehlt { border-left-color: var(--fehler); }
.luecke__label {
  font-size: .75rem; letter-spacing: .2em; text-transform: uppercase;
  color: var(--fg-mute);
}
.luecke__zahl {
  font-size: clamp(1.8rem, 1.2rem + 1.6vw, 2.5rem);
  letter-spacing: -.035em; line-height: 1;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}
.luecke--fehlt .luecke__zahl { color: var(--fehler); }
.luecke__sub { font-size: .8rem; color: var(--fg-mute); font-variant-numeric: tabular-nums; }

/* Die Zehn-Jahres-Zeile trägt am meisten Gewicht */
.rline--stark { border-top-color: var(--rule); }
.rline--stark dt { color: var(--fg-soft); }
.rline--stark dd span { font-size: 1.3rem; color: var(--accent); }

/* Schalter */
.switch {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.5rem, 3vw, 2rem) 0;
  border-block: 1px solid var(--rule);
}
.switch__title { display: block; font-size: 1.05rem; color: var(--fg); letter-spacing: -.01em; }
.switch__sub { display: block; margin-top: .35rem; font-size: .85rem; color: var(--fg-mute); max-width: 44ch; }
.switch__btn { display: inline-flex; align-items: center; gap: .85rem; }

/* Schalter nach Apples Mass: Spur 51x31, Knopf 27, voll gefuellte
   Spur statt hohler Kontur. Der alte Schalter war eine Kontur mit
   einem kleinen Punkt darin — das liest sich als Anzeige, nicht als
   Schalter. Gefuellt sieht man den Zustand aus dem Augenwinkel. */
.switch__track {
  position: relative; display: block;
  width: 51px; height: 31px; flex: none;
  border: 0; border-radius: var(--r-pill);
  background: rgba(46, 71, 48, .16);
  transition: background-color var(--t-ui) var(--ease-out);
}
.switch__knob {
  position: absolute; top: 2px; left: 2px;
  width: 27px; height: 27px; border-radius: 50%;
  background: #FFFFFF;
  /* Apples Knopf traegt zwei Schatten: einen weichen fuer die Hoehe,
     einen harten dicht darunter fuer die Kante. */
  box-shadow:
    0 3px 8px rgba(38, 37, 36, .15),
    0 3px 1px rgba(38, 37, 36, .06),
    0 0 0 .5px rgba(38, 37, 36, .04);
  transition: transform var(--t-ui) var(--ease-out);
}
.switch__btn[aria-checked="true"] .switch__track { background: var(--accent); }
/* 51 minus Knopf 27 minus zweimal 2 Rand = 20 */
.switch__btn[aria-checked="true"] .switch__knob {
  transform: translateX(20px);
  /* Der HIG erlaubt Glas ausdruecklich fuer Schalter im Moment des
     Schaltens: „Transient interactive elements in the content layer
     (sliders, toggles) can take on a Liquid Glass appearance when
     activated." Hier als Lichtkante auf dem Knopf. */
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 3px 8px rgba(38, 37, 36, .22),
    0 3px 1px rgba(38, 37, 36, .08);
}
@media (prefers-reduced-motion: reduce) {
  .switch__track, .switch__knob { transition: none; }
}
.switch__state { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-mute); min-width: 3.5em; }
.switch__btn[aria-checked="true"] .switch__state { color: var(--accent); }

/* Ausklappen */
.collapse {
  display: grid; grid-template-rows: 0fr;
  /* Zuklappen darf schneller sein als Aufklappen */
  transition: grid-template-rows var(--t-ui) var(--ease-out), opacity var(--t-hover) var(--ease-out);
  opacity: 0;
}
.collapse.is-open {
  transition: grid-template-rows var(--t-gross) var(--ease-schub), opacity var(--t-ui) var(--ease-out);
}
.collapse__inner { overflow: hidden; min-height: 0; }
.collapse.is-open { grid-template-rows: 1fr; opacity: 1; }
.collapse .calc__block { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; }

/* Ergebnis */
.result__sticky { position: sticky; top: clamp(5.5rem, 11vh, 7.5rem); }
.calc__result { border-top: 1px solid var(--accent); padding-top: 1.75rem; }
.result__kicker {
  margin: 0 0 1.75rem;
  font-size: .75rem; letter-spacing: .24em; text-transform: uppercase; color: var(--accent);
}
.result__hero { margin-bottom: 2.25rem; }
.result__hero-label { display: block; font-size: .84rem; color: var(--fg-mute); line-height: 1.5; max-width: 26ch; }
.result__hero-num {
  display: block; margin: .6rem 0 .35rem;
  font-size: clamp(2.1rem, 1.4rem + 1.9vw, 3.1rem);
  letter-spacing: -.035em; line-height: 1; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.result__hero-sub { display: block; font-size: .88rem; color: var(--fg-soft); font-variant-numeric: tabular-nums; }

.result__list { margin: 0 0 2rem; }
.rline {
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
  padding: .85rem 0; border-top: 1px solid var(--rule-soft);
}
.rline dt { font-size: .86rem; color: var(--fg-mute); max-width: 18ch; line-height: 1.4; }
.rline dd { margin: 0; text-align: right; }
.rline dd span { display: block; font-size: 1.05rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.rline dd em {
  display: block; margin-top: .15rem;
  font-family: var(--ff-sans); font-style: normal;
  font-size: .78rem; color: var(--fg-mute); font-variant-numeric: tabular-nums;
}

.result__note { font-size: .8rem; line-height: 1.6; color: var(--fg-mute); margin-bottom: 1.75rem; }
.result__cta { width: 100%; justify-content: center; text-align: center; }

/* ─── Rechenweg in der leeren Stufe ───────────────────────────
   Fuellt die Spalte, solange keine Zahl da ist. Bewusst dieselbe
   Zeilenanatomie wie die fertige Ergebnisliste (.rline): Wer spaeter
   das Ergebnis sieht, erkennt die Form wieder. */
.rechenweg { margin: 1.5rem 0 0; }
.rechenweg__zeile {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; padding: .7rem 0;
  border-bottom: 1px solid var(--rule-soft);
  color: var(--fg-mute);
  transition: color var(--t-ui) var(--ease-hover);
}
.rechenweg__zeile dt { display: flex; align-items: baseline; gap: .55rem; font-size: .88rem; }
.rechenweg__zeile dd {
  margin: 0; font-size: .92rem; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rechenweg__zeichen {
  display: inline-block; width: .8em; text-align: center;
  color: var(--accent); font-weight: 500;
}
/* Sobald das zugehoerige Feld gefuellt ist, tritt die Zeile hervor. */
.rechenweg__zeile.ist-aktiv { color: var(--fg); }
.rechenweg__zeile--summe {
  border-bottom: 0; border-top: 1px solid var(--rule);
  margin-top: .3rem; padding-top: .9rem;
  font-weight: 500; color: var(--fg);
}
.rechenweg__zeile--summe dd { color: var(--fg-mute); font-style: italic; }

/* ─── Ausblick: was am Ende dabei herauskommt ─────────────────── */
.ausblick { margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--rule-soft); }
.ausblick__titel {
  /* Keine weitere Versalzeile — davon hat die Seite schon genug. */
  margin: 0 0 .7rem; font-size: .82rem; font-weight: 500;
  color: var(--fg-mute);
}
.ausblick ul { list-style: none; margin: 0; padding: 0; }
.ausblick li {
  position: relative; padding-left: 1.05rem; margin-bottom: .45rem;
  font-size: .85rem; line-height: 1.5; color: var(--fg-soft);
}
.ausblick li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--accent);
}

/* ─── Abschluss unter dem Ergebnis ────────────────────────────
   Die Zahl allein bewegt niemanden. Hier steht, was ein Gespräch
   bringt — in derselben Sprache wie Seite 2 des PDF. */
.abschluss {
  margin: 1.75rem 0 1.25rem;
  padding: 1.5rem 1.5rem 1.6rem;
  border-radius: var(--r-m);
  background: var(--gruen);
  color: #fff;
}
.abschluss__titel {
  font-family: var(--ff-serif); font-size: 1.45rem; line-height: 1.15;
  margin: 0 0 .5rem;
  /* Muss explizit gesetzt sein: die allgemeine Regel fuer <p> faerbt
     das Element selbst und schlaegt damit das geerbte Weiss vom
     Kasten. Der Titel stand dadurch dunkelgruen auf dunkelgruen. */
  color: #FFFFFF;
}
.abschluss__text {
  font-size: .88rem; line-height: 1.6; margin: 0 0 1.1rem;
  color: rgba(255, 255, 255, .78);
}
.abschluss__liste { list-style: none; margin: 0 0 1.4rem; padding: 0; }
.abschluss__liste li {
  position: relative; padding-left: 1.1rem; margin-bottom: .55rem;
  font-size: .85rem; line-height: 1.5; color: rgba(255, 255, 255, .9);
}
.abschluss__liste li::before {
  content: ""; position: absolute; left: 0; top: .52em;
  width: 5px; height: 5px; border-radius: 50%; background: var(--sand);
}
.abschluss .btn { width: 100%; justify-content: center; text-align: center; }
.result__reset {
  display: block; width: 100%; margin-top: 1rem; padding: .5rem 0;
  font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-mute);
  transition: color var(--t-hover) var(--ease-hover);
}
.result__reset:hover { color: var(--accent); }

/* ─────────── NEUE STRUKTUR ───────────
   Die Seite hat nur noch drei Aufgaben: einordnen, rechnen, belegen.
   ───────────────────────────────────── */

/* 1 — Kopfbereich: hell, Text links, Bild rechts.
      Layout nach dem Referenzbild, Farben aus Saschas Markenpaket. */
.start, .wer {
  --bg:        #FFFFFF;
  --fg:        #262524;
  --fg-soft:   rgba(46, 71, 48, .84);
  --fg-mute:   rgba(46, 71, 48, .76);
  --rule:      rgba(46, 71, 48, .18);
  --rule-soft: rgba(46, 71, 48, .10);
  --accent:    #2E4730;
  --btn-fg:    #FFFFFF;
  --ph-a:      #EDEDEC;
  --ph-b:      #F6F6F5;
  background: var(--bg);
  color: var(--fg);
}

.start {
  position: relative;
  /* Volle Fensterhoehe, aber gedeckelt: In sehr hohen Fenstern (Hochkant-
     Monitor, Ganzseiten-Screenshot) zog das Video sonst auf Fensterhoehe
     auf und zeigte nur noch ein riesiges Gesicht. */
  min-height: min(100svh, 1080px);
  /* stretch statt center: die Bildspalte soll die volle Hoehe fuellen,
     der Text wird stattdessen fuer sich zentriert. */
  display: flex; align-items: stretch;
  padding-top: clamp(5rem, 10vh, 7rem);
  overflow: hidden;
}
.start__raster {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  align-items: stretch; gap: clamp(2rem, 5vw, 4rem);
  width: 100%; max-width: 1680px; margin-inline: auto;
}
.start__text {
  position: relative; z-index: 1;
  align-self: center;
  padding-inline: var(--gutter);
  padding-block: clamp(2rem, 5vw, 4rem);
  max-width: 40rem; margin-left: auto;
}
.start__titel {
  font-size: var(--h-display);
  line-height: 1.04; letter-spacing: -.038em;
  margin: 0 0 1.5rem; max-width: 15ch;
}
.start__fliess {
  font-size: clamp(.98rem, .94rem + .28vw, 1.1rem);
  line-height: 1.7; color: var(--fg-soft);
  max-width: 46ch; margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}
/* Aus einem Absatz sind zwei geworden. Zwischen ihnen gehoert der
   Abstand einer Absatzgrenze, nicht der Abstand zum naechsten Block —
   sonst reisst der Gedanke in der Mitte auseinander. */
.start__fliess:has(+ .start__fliess) { margin-bottom: .9rem; }
.start__ctas { display: flex; flex-wrap: wrap; gap: .75rem 1rem; }

/* Bild rechts, laeuft nach links weich in den Grund aus */
.start__bild {
  position: relative; z-index: 0; align-self: stretch;
  /* Das Motiv greift nach links unter die Textspalte. Nur so hat die
     Ueberblendung genug Strecke — endet sie an der Spaltenkante,
     sieht man genau dort eine Kante. */
  margin-left: clamp(-22vw, -14vw, -8vw);
  /* Die Section hat oben Platz fuer die Navigation — das Bild
     soll trotzdem bis an die Kante laufen. */
  margin-top: calc(-1 * clamp(5rem, 10vh, 7rem));
  /* Der Raster ist auf 1680 px gedeckelt und zentriert. In breiteren
     Fenstern blieb rechts vom Bild ein weisser Block — das Bild greift
     deshalb um die halbe Restbreite nach rechts bis an die Fensterkante. */
  margin-right: calc(-1 * max(0px, (100vw - 1680px) / 2));
}
.start__bild img,
.start__video {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  display: block;
}
/* Die Vorlage ist eine Instagram-Aufnahme mit 572 px Breite. Kontrast,
   Saettigung und eine Spur weniger Helligkeit nehmen der Hochskalierung
   die Flauheit — das Motiv soll Farbe haben, nicht blass wirken. */
.start__video {
  filter: contrast(1.14) saturate(1.28) brightness(.97);
  /* Eine Maske loest das Video wirklich auf, statt es mit Weiss zu
     ueberdecken. Ein weisser Schleier ueber dunklem Motiv ergibt Grau —
     sichtbar als Kante. Hier bleibt reines Seitenweiss stehen.
     Die Rampe steigt frueher an: so steht das Motiv frueher voll im
     Bild, der Beginn bleibt aber flach genug fuer eine weiche Kante. */
  -webkit-mask-image: linear-gradient(to right,
    transparent 0%,
    rgba(0, 0, 0, .08) 18%,
    rgba(0, 0, 0, .30) 30%,
    rgba(0, 0, 0, .62) 43%,
    rgba(0, 0, 0, .88) 56%,
    #000 68%);
  mask-image: linear-gradient(to right,
    transparent 0%,
    rgba(0, 0, 0, .08) 18%,
    rgba(0, 0, 0, .30) 30%,
    rgba(0, 0, 0, .62) 43%,
    rgba(0, 0, 0, .88) 56%,
    #000 68%);
}
.start__blende { display: none; }

/* Klammer-Auszeichnung */
.klammer {
  /* Ohne Zierrat: Hier standen frueher spitze Klammern links und
     rechts. Der Text sagt selbst, worum es geht. */
  display: block;
  margin: 0 0 1.25rem;
  font-size: .88rem; color: var(--fg-soft);
}
.klammer--klein { font-size: .82rem; margin: 0; color: var(--fg-mute); }

/* Beleg-Zeile mit ueberlappenden Koepfen */
.beleg {
  display: flex; flex-wrap: wrap; align-items: center; gap: .9rem 1rem;
  margin-top: clamp(2rem, 4vw, 3rem);
}
.beleg__koepfe { display: flex; }
.beleg__koepfe img {
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  /* Bewusst rund, entgegen der Markenregel "scharfe Kanten": Als
     Rechtecke zerfaellt der ueberlappende Stapel in ein Raster mit
     weissen Stegen — probiert und verworfen. Der Kreis ist hier das
     Einzige, was die Reihe zusammenhaelt. */
  object-fit: cover; object-position: center 16%;
  border: 2px solid var(--bg);
  margin-left: -.7rem;
}
.beleg__koepfe img:first-child { margin-left: 0; }

/* Gruener CTA nach Vorbild — Primaerfarbe des Markenpakets */
.btn--gruen {
  background: var(--gruen); color: #FFFFFF; border-color: var(--gruen);
  border-radius: var(--r-s);
}
.btn--gruen::before { background: #24381F; }
.btn--gruen:hover { color: #FFFFFF; border-color: #24381F; }
.pfeile { letter-spacing: -.12em; opacity: .75; }

/* Navigation ueber hellem Kopf */
.oben-hell .nav:not(.is-stuck) { color: #262524; }
.oben-hell .nav.is-stuck {
  background: rgba(255, 255, 255, .82);
  border-bottom-color: rgba(46, 71, 48, .12);
}
.oben-hell .nav .nav__brand-name { color: #262524; }

/* 3 — Wer ich bin */
/* Das Bild bricht links aus dem Raster aus und laeuft bis an den
   Seitenrand — derselbe Kunstgriff wie im Kopf, damit der weisse
   Abschnitt den hellen Ton des Kopfes wieder aufnimmt. */
.wer { overflow: hidden; }
.wer__grid {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1fr);
  gap: clamp(2.5rem, 6vw, 5.5rem); align-items: center;
  max-width: 1680px; padding-inline: 0;
}
.wer__grid > .figure { margin-left: 0; }
.wer__grid .media { border-radius: 0 var(--r-l) var(--r-l) 0; }
.wer__text {
  position: relative;
  padding-inline: var(--gutter);
  max-width: 42rem;
}
.wer__text .h2 { margin-bottom: 1.75rem; }

/* Die Jahreszahl aus der Ueberschrift, gross und still im Hintergrund.
   Kein Dekor — sie benennt, worum es in dem Absatz geht. */
.wer__zahl {
  position: absolute; z-index: 0;
  top: -.35em; right: clamp(1rem, 4vw, 4rem);
  font-size: clamp(9rem, 6rem + 12vw, 20rem);
  line-height: .8; font-weight: 500;
  letter-spacing: -.06em;
  color: var(--accent); opacity: .07;
  pointer-events: none; user-select: none;
}
.wer__text > *:not(.wer__zahl) { position: relative; z-index: 1; }
.verweis {
  color: var(--accent);
  border-bottom: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
  transition: border-color var(--t-hover) var(--ease-hover);
}
.verweis:hover { border-bottom-color: var(--accent); }

@media (max-width: 900px) {
  .start { min-height: auto; padding-bottom: clamp(3rem, 6vw, 5rem); }
  .start__raster { grid-template-columns: 1fr; gap: 2.5rem; }
  .start__text { margin-left: 0; max-width: none; }
  .start__bild { min-height: 58svh; order: -1; }
  /* Auf Mobil liegt das Video oben und laeuft nach unten aus */
  .start__video {
    -webkit-mask-image: linear-gradient(to bottom,
      #000 52%, rgba(0,0,0,.72) 70%, rgba(0,0,0,.28) 86%, transparent 100%);
    mask-image: linear-gradient(to bottom,
      #000 52%, rgba(0,0,0,.72) 70%, rgba(0,0,0,.28) 86%, transparent 100%);
  }
  .start__bild { margin-left: 0; }
  .wer__grid { grid-template-columns: 1fr; }
  .wer__grid .figure { order: -1; }
}

/* 3 — Einstieg in den Funnel */
.einstieg { max-width: 60ch; }
.einstieg .h2 { margin-bottom: 1.5rem; }
.einstieg .btn { margin-top: .5rem; }
.einstieg__notiz { margin: 1rem 0 0; font-size: .82rem; color: var(--fg-mute); }

/* Videoflächen */
.video {
  position: relative; display: block; width: 100%;
  padding: 0; border: 1px solid var(--rule-soft); border-radius: var(--r-m);
  overflow: hidden; background: none;
}
/* Der Deckel traegt Standbild, Abspielknopf und Laufzeit und ist der
   einzige Knopf. Die Steuerung des Videos liegt darunter frei. */
.video__deckel {
  position: absolute; inset: 0; z-index: 2;
  display: block; width: 100%; height: 100%;
  padding: 0; border: 0; background: none; cursor: pointer;
}
.video__deckel.ist-weg { opacity: 0; pointer-events: none; }
.video--quer { aspect-ratio: 16 / 9; }
.video--hoch { aspect-ratio: 9 / 14; }
.video__platte {
  position: absolute; inset: 0;
  /* Beschriftung nach unten, damit sie nicht hinter dem Abspielknopf liegt */
  display: grid; align-content: end; justify-items: center;
  text-align: center; padding: 1.25rem;
  background: linear-gradient(135deg, var(--ph-a), var(--ph-b));
  color: var(--fg-mute);
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1.7;
}
.video__platte::after { content: attr(data-label); }
.video__start {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 4rem; height: 4rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--accent);
  transition: transform var(--t-ui) var(--ease-out);
}
.video__start svg { width: 1.5rem; height: 1.5rem; fill: var(--btn-fg); }
@media (hover: hover) and (pointer: fine) {
  .video:hover .video__start { transform: translate(-50%, -50%) scale(1.08); }
}
.video:active .video__start { transform: translate(-50%, -50%) scale(.95); }
.video video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Der Deckel liegt darueber und blendet weg, sobald wirklich Bild laeuft */
.video__deckel, .video__platte { transition: opacity 320ms var(--ease-out); }
.video__platte.ist-weg { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .video__deckel, .video__platte { transition: none; }
}
.video__bild { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Laufzeit unten rechts, wie man es von Videoportalen kennt */
.video__dauer {
  position: absolute; right: .6rem; bottom: .6rem; z-index: 2;
  padding: .22rem .55rem; border-radius: var(--r-pill);
  background: rgba(38, 37, 36, .82); color: #FFFFFF;
  font-size: .72rem; letter-spacing: .04em;
  font-variant-numeric: tabular-nums;
}

.funnel__video { margin-bottom: clamp(3rem, 7vw, 5rem); }
.funnel__untertitel {
  margin: 1rem 0 0; font-size: .8rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--fg-mute);
}

/* 4 — Stimmen: heller Streifen, runde Kacheln.
      Wie im Referenzbild — der dunkle Einstieg oben, hier ein Bruch ins Helle. */
.stimmen {
  --bg:        #FFFFFF;
  --fg:        #262524;
  --fg-soft:   rgba(46, 71, 48, .82);
  --fg-mute:   rgba(46, 71, 48, .76);
  --rule:      rgba(46, 71, 48, .16);
  --rule-soft: rgba(46, 71, 48, .09);
  --accent:    #2E4730;
  --btn-fg:    #FFFFFF;
  --ph-a:      #F6F6F5;
  --ph-b:      #E9E9E8;
  background: #FFFFFF;
  color: var(--fg);
  text-align: center;
}
.stimmen__titel {
  font-size: var(--h-klein);
  line-height: 1.15; letter-spacing: -.03em;
  margin: 0 auto clamp(2.5rem, 5vw, 4rem);
  max-width: 22ch; color: var(--fg);
}
.stimmen__titel em { color: var(--accent); }

.stimmen__grid {
  /* Vier Stimmen seit 08.10.2026 — eine Reihe, damit keine allein
     in der zweiten Zeile steht. */
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: clamp(1rem, 2vw, 1.5rem);
  text-align: left;
}



/* Namensschild unten auf der Kachel */
/* ─── Stimmen: Karte mit Buehne, Name und Zitat ───────────────
   Nach der Vorlage: Bild oben, das nach unten in die gruene Flaeche
   laeuft, Name und Schild darauf, das Zitat darunter. Ein Klick
   oeffnet das Video gross — in der Kachel ist es beschnitten. */
.stimme {
  display: flex; flex-direction: column;
  border-radius: var(--r-l);
  overflow: hidden;
  background: var(--gruen);
  box-shadow: 0 10px 30px rgba(38, 37, 36, .10);
}

.stimme__buehne {
  position: relative; display: block; width: 100%;
  aspect-ratio: 3 / 4;
  padding: 0; border: 0; background: none; cursor: pointer;
  overflow: hidden;
}
/* Die Standbilder sind 3:4 — genau das Format der Buehne. Ohne Zutun
   stuende also das ganze Bild da, samt der leeren Wand ueber den
   Koepfen. Das Bild ist deshalb hoeher als die Buehne und haengt am
   unteren Rand: oben faellt weg, was niemand braucht, und die Koepfe
   ruecken in die Mitte der freien Flaeche ueber dem Namen. */
.stimme__bild {
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: var(--stimme-zoom, 118%);
  object-fit: cover; object-position: center bottom; display: block;
}

/* Der Verlauf traegt Name und Schild und bindet Bild und Flaeche
   zusammen. Zwei Halte, damit die Mitte nicht grau absaeuft. */
.stimme__buehne::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  /* Der Name liegt auf dem Foto, sein Kontrast haengt also vom Motiv
     ab. Der Verlauf setzt frueher an und wird unten dichter, damit
     Weiss dort in jedem Fall traegt und nicht nur bei dunklen
     Aufnahmen. */
  background: linear-gradient(to bottom,
    transparent 32%,
    color-mix(in srgb, var(--gruen) 42%, transparent) 58%,
    color-mix(in srgb, var(--gruen) 88%, transparent) 82%,
    var(--gruen) 100%);
}

.stimme__start {
  position: absolute; left: 1rem; top: 1rem; z-index: 2;
  display: grid; place-items: center;
  width: 3.4rem; height: 3.4rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform var(--t-ui) var(--ease-out),
              background var(--t-hover) var(--ease-hover);
}
.stimme__start svg { width: 1.5rem; height: 1.5rem; fill: var(--sand); }
@media (hover: hover) and (pointer: fine) {
  .stimme__buehne:hover .stimme__start { transform: scale(1.08); background: rgba(255, 255, 255, .3); }
  .stimme__buehne:hover .stimme__bild { transform: scale(1.03); }
}
.stimme__buehne:active .stimme__start { transform: scale(.95); }
.stimme__bild { transition: transform var(--t-gross) var(--ease-out); }
.stimme__buehne:focus-visible { outline: 2px solid var(--sand); outline-offset: -4px; }

.stimme__fuss {
  position: absolute; left: 1.15rem; right: 1.15rem; bottom: 1.1rem; z-index: 2;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem .75rem;
  text-align: left;
}
.stimme__name {
  font-size: 1.15rem; letter-spacing: -.01em; color: #FFFFFF; line-height: 1.2;
  /* Zweite Sicherung neben dem Verlauf: ein weicher Schatten haelt die
     Schrift auch ueber einer hellen Stelle lesbar. */
  text-shadow: 0 1px 10px rgba(38, 37, 36, .55);
}
/* Der Nachname kursiv — dieselbe Signatur wie in den Ueberschriften */
.stimme__name em { color: #FFFFFF; }

/* Die Rolle: eine Zeile, keine Kapsel. Sand auf Waldgruen sind 6,7:1,
   waehrend Sand auf einer Sand-Toenung dieselbe Farbe auf sich selbst
   war — davon kam der matschige Eindruck. Keine Versalsperrung: davon
   traegt die Seite schon genug (DESIGN.md). */
.stimme__rolle {
  margin: 0; padding: .9rem 1.15rem 0;
  font-size: .82rem; line-height: 1.4; letter-spacing: -.005em;
  color: var(--sand);
}
/* Ohne Zitat schliesst die Rolle die Karte ab und braucht den Abstand
   nach unten selbst. */
.stimme__rolle:last-child { padding-bottom: 1.3rem; }

.stimme__zitat {
  margin: 0; padding: .5rem 1.15rem 1.3rem;
  font-size: .88rem; line-height: 1.6;
  color: rgba(255, 255, 255, .86);
}

/* ─── Das grosse Fenster ────────────────────────────────────── */
.stimmfenster {
  width: min(92vw, 30rem); max-width: none;
  max-height: 92dvh;
  padding: 0; border: 0; background: none;
  overflow: visible;
}
.stimmfenster::backdrop { background: rgba(38, 37, 36, .82); backdrop-filter: blur(4px); }
.stimmfenster__inhalt { position: relative; }
.stimmfenster video {
  display: block; width: 100%; max-height: 84dvh;
  border-radius: var(--r-l);
  background: #000;
}
.stimmfenster__name {
  position: absolute; left: 0; top: -2.4rem; margin: 0;
  padding: .3rem .8rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92); color: #262524;
  font-size: .78rem; font-weight: 500;
}
.stimmfenster__zu {
  position: absolute; right: 0; top: -2.6rem;
  display: grid; place-items: center;
  width: 2.2rem; height: 2.2rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .92); color: #262524;
  font-size: .9rem; cursor: pointer;
  transition: background var(--t-hover) var(--ease-hover);
}
.stimmfenster__zu:hover { background: #FFFFFF; }
.stimmfenster__zu:focus-visible { outline: 2px solid var(--sand); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .stimme__start, .stimme__bild { transition: none; }
}

/* Funnel-Teaser: dunkelgruen mit feinem Wellenmuster, nach dem Vorbild.
   Kein Listen-Raster mehr — der Nutzen steht im Fliesstext. */
.funnelteaser {
  --bg:        #2E4730;
  --fg:        #FFFFFF;
  --fg-soft:   rgba(255, 255, 255, .80);
  --fg-mute:   rgba(255, 255, 255, .62);
  --rule:      rgba(255, 255, 255, .18);
  --rule-soft: rgba(255, 255, 255, .10);
  --accent:    #E6CEAD;
  --btn-fg:    #2E4730;
  --auswahl:    #E6CEAD;   /* auf dunklem Grund traegt Sand */
  --auswahl-fg: #2E4730;
  position: relative;
  background: var(--bg);
  color: var(--fg);
  overflow: hidden;
}
/* Kariertes Papier — dasselbe Raster, auf dem im Video gerechnet wird.
   Bewusst an der Wahrnehmungsgrenze: es soll den Grund beleben, nicht
   als Muster auffallen. Zu den Raendern hin laeuft es aus. */
.funnelteaser::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, rgba(255, 255, 255, .05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255, 255, 255, .05) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: radial-gradient(75% 60% at 50% 45%, #000 15%, transparent 80%);
  mask-image: radial-gradient(75% 60% at 50% 45%, #000 15%, transparent 80%);
}
.funnelteaser__inner { position: relative; z-index: 1; text-align: center; }

/* Versale Auszeichnung wie im Vorbild */
.versal {
  /* margin-inline: auto — sonst klebt der begrenzte Kasten am linken
     Rand, waehrend Ueberschrift und Fliesstext mittig stehen. */
  margin: 0 auto 1.5rem; max-width: 60ch;
  /* Kein Versalsatz: Bei 1440 px lief diese Zeile ueber 168 Zeichen.
     Grossbuchstaben bleiben Knoepfen und echten Kickern vorbehalten. */
  font-size: .82rem; font-weight: 500;
  /* .06em galt dem Detektor als weite Sperrung im Fliesstext — zu
     Recht: ohne Versalien braucht die Zeile sie nicht mehr. */
  letter-spacing: .02em;
  color: var(--accent);
}

/* Kraeftige Sans statt der zarten Display-Groesse — das ist der Ton der
   Referenz. Ein Wort bleibt in der Serife, damit die Marke erkennbar bleibt. */
.funnelteaser__titel {
  font-size: var(--h-mittel);
  /* 600 statt 400 ist hier Absicht, keine Ausnahme: im gruenen
     Abschnitt wird alles lauter, weil dort die Konversion sitzt.
     Ueberall sonst bleibt es ruhig. Bitte nicht angleichen. */
  font-weight: 600; line-height: 1.08; letter-spacing: -.032em;
  margin: 0 auto 1.75rem; max-width: 20ch;
}
.funnelteaser__titel em { font-weight: 400; color: var(--accent); }

.funnelteaser__text {
  font-size: clamp(1rem, .95rem + .3vw, 1.15rem);
  line-height: 1.7; color: var(--fg-soft);
  max-width: 56ch; margin: 0 auto clamp(2.25rem, 4vw, 3rem);
}
.funnelteaser__text:has(+ .funnelteaser__text) { margin-bottom: .9rem; }

.funnelteaser__cta { display: grid; justify-items: center; gap: .9rem; }
.funnelteaser__notiz { margin: 0; font-size: .84rem; color: var(--fg-mute); }

/* Sand-Button auf gruenem Grund — der Kontrast des Markenpakets */
.btn--sand { background: var(--sand); color: #2E4730; border-color: var(--sand); }
.btn--sand::before { background: #F1E0C8; }
.btn--sand:hover { color: #2E4730; border-color: #F1E0C8; }

.beleg--mitte { justify-content: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.beleg--mitte .beleg__koepfe img { border-color: var(--bg); }
.beleg__text { margin: 0; font-size: .84rem; color: var(--fg-mute); }

/* Eigene Seite: Video und Rechner, durchgehend hell */
.seite-hell {
  --bg:         #FFFFFF;
  --bg-alt:     #F6F6F5;
  --band:       #2E4730;
  --band-soft:  #F2F2F1;
  --fg:         #262524;
  --fg-soft:    rgba(46, 71, 48, .82);
  /* .64 ergab auf den hellen Gruenden 3,6:1 und lag damit unter den
     4,5:1, die Fliesstext braucht. Betraf Hinweise, Blocklegenden und
     die Einheitszeichen im Rechner. .76 bringt 4,7:1.
     Die dunklen Paletten sind davon nicht betroffen, die liegen
     ohnehin zwischen 4,8 und 6,8:1. */
  --fg-mute:    rgba(46, 71, 48, .76);
  --rule:       rgba(46, 71, 48, .18);
  --rule-soft:  rgba(46, 71, 48, .10);
  --accent:     #2E4730;
  --btn-fg:     #FFFFFF;
  --auswahl:    #DEE2DE;   /* helle Gruentoenung */
  --auswahl-fg: #262524;
  --shade:      rgba(255, 255, 255, .7);
  --nav-bg:     rgba(255, 255, 255, .72);
  --ph-a:       #EDEDEC;
  --ph-b:       #F6F6F5;
  --fehler:     #AD5537;
  --calc-bg:    #F7F7F6;
  --calc-flaeche: rgba(255, 255, 255, .66);
  background: var(--bg); color: var(--fg);
  color-scheme: light;
}
.videoseite {
  padding: clamp(7rem, 14vh, 10rem) 0 clamp(3rem, 6vw, 5rem);
  text-align: center;
}
.videoseite__inner .eyebrow { display: inline-block; }
.videoseite__titel {
  font-size: var(--h-mittel);
  line-height: 1.12; letter-spacing: -.035em;
  margin: 0 auto 1.5rem; max-width: 24ch;
}
.videoseite__titel em { color: var(--accent); }
.videoseite__buehne {
  max-width: 54rem; margin: clamp(2.5rem, 5vw, 3.5rem) auto 0;
  padding: clamp(1rem, 2vw, 1.5rem);
  background: #FFFFFF;
  border-radius: var(--r-l);
  box-shadow: 0 18px 50px rgba(38, 37, 36, .12);
}
.videoseite__buehne .video { border-radius: var(--r-m); border: 0; }
.videoseite__unter {
  margin: 1rem 0 0; font-size: .8rem; letter-spacing: .02em;
  color: var(--fg-mute);
}
.videoseite__weiter { margin: clamp(2.5rem, 5vw, 3.5rem) 0 0; }

/* Der Rechner nimmt beim Sprung den Fokus auf, damit die Tastatur
   dort weitergeht. Sichtbar soll das nicht sein — der Sprung selbst
   ist die Rueckmeldung. */
.calc:focus { outline: none; }
.calc:focus-visible { outline: none; }

@media (max-width: 900px) { .stimmen__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .stimmen__grid { grid-template-columns: 1fr; } }

/* 5 — Termin */
/* Abschluss. Gruen ist der Konversionsmoment und kommt genau einmal vor —
   deshalb schliesst die Seite in Anthrazit ab. Jede Markenfarbe hat damit
   eine Aufgabe: Weiss informiert, Gruen verkauft, Anthrazit schliesst ab.
   Die Token muessen hier explizit stehen: .termin ist weder .band noch
   .contact und erbte sonst die Akzentfarbe der hellen Palette — auf
   dunklem Grund waren das 2,01:1. */
.termin {
  --bg:        #262524;
  --fg:        #FFFFFF;
  --fg-soft:   rgba(255, 255, 255, .80);
  --fg-mute:   rgba(255, 255, 255, .62);
  --rule:      rgba(255, 255, 255, .16);
  --rule-soft: rgba(255, 255, 255, .09);
  --accent:    #E6CEAD;
  --btn-fg:    #262524;
  --auswahl:    #E6CEAD;   /* auf dunklem Grund traegt Sand */
  --auswahl-fg: #262524;
  background: var(--bg); color: var(--fg);
  min-height: 70svh; display: flex; align-items: center;
}
.termin__inner { text-align: center; }
.termin .h1-alt { max-width: 18ch; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.termin .h1-alt em { color: var(--accent); }
.termin .lead--center { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
/* Die Negativliste traegt die Zusage darueber, statt mit ihr um
   Aufmerksamkeit zu streiten: kleiner, stiller, dicht am Absatz. */
.termin .lead--center:has(+ .termin__ohne) { margin-bottom: 1rem; }
.termin__ohne {
  max-width: 52ch; margin: 0 auto clamp(2.5rem, 5vw, 3.5rem);
  font-size: .92rem; color: var(--fg-mute);
}

@media (max-width: 900px) {
  .wer__grid { grid-template-columns: 1fr; }
  .wer__grid .figure { order: -1; }
  .stimmen__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .stimmen__grid { grid-template-columns: 1fr; }
  .start__media { justify-content: center; }
  .start__media .portrait {
    width: 100%; object-position: 45% 8%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, rgba(0,0,0,.5) 58%, transparent 88%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, rgba(0,0,0,.5) 58%, transparent 88%);
  }
  .start__veil {
    background: linear-gradient(to top, var(--bg) 34%, color-mix(in srgb, var(--bg) 82%, transparent) 56%, transparent 96%);
  }
  .start__ctas .btn { width: 100%; justify-content: center; }
}

/* ─── Rechner: eigene Bühne ───
   Vorher unterschied sich die Section nur um drei Helligkeitsstufen vom
   Seitenhintergrund und ging deshalb unter. Jetzt: tieferer Grund, ein
   goldener Lichtschein hinter dem Ergebnis und ein umlaufender Rahmen,
   der das Ganze als Werkzeug lesbar macht. */
.calc {
  position: relative;
  background: var(--calc-bg);
  overflow: hidden;
}
/* Flaechen des Rechners. Frueher dreifach gefuehrt, einmal je Modus. */
:root { --calc-bg: #F7F7F6; --calc-flaeche: rgba(255, 255, 255, .6); }

/* Lichtschein hinter dem Ergebnis — zieht den Blick nach rechts */
/* Der radiale Lichtschein, der hier stand, ist als Flaechenschmuck
   in DESIGN.md ausgeschlossen und wurde von zwei Pruefungen unabhaengig
   als Verraetermuster gemeldet. */
.calc__leer::before { content: none; }
.calc > .container { position: relative; z-index: 1; }

/* Kopfzeile mit Auszeichnung */
.calc__kopf {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between;
  gap: 1rem;
}
.calc__kopf .eyebrow { margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.kopfnotiz {
  margin: 0 0 clamp(2rem, 4vw, 3.5rem);
  font-size: .8rem; letter-spacing: .04em;
  color: var(--fg-mute);
}

/* Die drei Schritte */
.schritte {
  list-style: none; display: flex; flex-wrap: wrap;
  gap: clamp(1rem, 3vw, 2.5rem);
  margin: clamp(2rem, 4vw, 3rem) 0 0; padding: 0;
}
.schritt {
  display: flex; align-items: baseline; gap: .7rem;
  font-size: .88rem; color: var(--fg-mute);
  transition: color var(--t-gross) var(--ease-out);
}
.schritt__nr {
  font-family: var(--ff-serif); font-style: italic;
  font-size: 1rem; color: var(--accent); opacity: .55;
  transition: opacity var(--t-gross) var(--ease-out);
}
.schritt.ist-aktiv { color: var(--fg); }
.schritt.ist-aktiv .schritt__nr { opacity: 1; }
.schritt.ist-fertig .schritt__nr { opacity: 1; }
.schritt.ist-fertig::after {
  content: "✓"; margin-left: .1rem; color: var(--accent); font-size: .9em;
}

/* Eingabeteil und Ergebnis bekommen eine sichtbare Fläche */
/* Bedienebene: eigenes Material, damit sie sich vom Inhalt abhebt.
   Der goldene Lichtschein der Section scheint gedaempft durch. */
.calc__form, .calc__result {
  background: var(--calc-flaeche);
  border: 1px solid var(--rule-soft);
  /* Grosse Flaeche, grosser Radius — und ein Schatten, der die Farbe
     des Untergrunds traegt statt neutralem Schwarz. */
  border-radius: var(--r-l);
  box-shadow: 0 1px 2px rgba(46, 71, 48, .04),
              0 12px 32px -12px rgba(46, 71, 48, .10);
  padding: clamp(1.75rem, 3.5vw, 2.75rem);
}
/* Die Ergebnisspalte trug oben eine harte Akzentlinie quer ueber die
   Karte. Die Farbe bleibt, aber als warme Tonung der Flaeche selbst. */
.calc__result {
  background:
    linear-gradient(to bottom,
      color-mix(in srgb, var(--accent) 6%, transparent) 0,
      transparent 8rem),
    var(--calc-flaeche);
  border-color: color-mix(in srgb, var(--accent) 18%, transparent);
}

/* Ergebniszahl darf größer auftreten */
.result__hero-num { font-size: clamp(2.4rem, 1.5rem + 2.4vw, 3.6rem); }

/* Zusicherungen unter dem Formular */
.zusicherung { list-style: none; margin: .25rem 0 0; padding: 0; display: grid; gap: .45rem; }
.zusicherung li {
  position: relative; padding-left: 1.35rem;
  font-size: .8rem; line-height: 1.5; color: var(--fg-mute);
}
.zusicherung li::before {
  content: "✓"; position: absolute; left: 0; top: 0;
  color: var(--accent); font-size: .85em;
}

/* ─── Rechner: Stufen, Teaser, Leadformular ─── */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.stufe__text { font-size: .92rem; color: var(--fg-mute); line-height: 1.65; margin-bottom: 1.75rem; }

/* Fortschritt bis zum Ergebnis */
.fortschritt { display: flex; flex-direction: column; gap: .7rem; }
.fortschritt__bahn {
  display: block; height: 4px; border-radius: var(--r-pill);
  background: var(--rule-soft); overflow: hidden;
}
.fortschritt__bahn i {
  display: block; height: 100%; width: 100%; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  /* scaleX statt width — width loest bei jedem Frame ein Layout aus */
  transition: transform var(--t-gross) var(--ease-out);
}
.fortschritt__text { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-mute); }

/* Verdecktes Ergebnis — die Zahl ist da, aber nicht lesbar */
.verdeckt {
  filter: blur(11px);
  opacity: .5;
  user-select: none; pointer-events: none;
}
.result__hero-sub.verdeckt { filter: blur(6px); }

.teaser { list-style: none; margin: 0 0 2rem; padding: 1.5rem 0 0; border-top: 1px solid var(--rule); }
.teaser li {
  position: relative; padding: .5rem 0 .5rem 1.6rem;
  font-size: .89rem; color: var(--fg-soft); line-height: 1.5;
}
.teaser li::before {
  content: ""; position: absolute; left: 0; top: 1.15em;
  width: 9px; height: 2px; border-radius: var(--r-pill); background: var(--accent);
}

/* Leadformular */
.lead { display: flex; flex-direction: column; gap: 1.1rem; }
.lead__titel { margin: 0; font-size: 1.05rem; color: var(--fg); letter-spacing: -.01em; }
.lead__text { margin: -.6rem 0 .3rem; font-size: .84rem; color: var(--fg-mute); line-height: 1.6; }

/* Gleiche Formsprache wie die Rechnerfelder: Beschriftung oben,
   Feld als eigene Flaeche mit Rand und Radius. */
.feld { display: flex; flex-direction: column; gap: .45rem; }
.feld__label { font-size: .9rem; font-weight: 500; color: var(--fg); letter-spacing: -.005em; }
/* „freiwillig" neben der Beschriftung. Bewusst keine weitere
   Grossbuchstaben-Sperrung — davon hat die Seite schon genug
   (DESIGN.md, Anti-Patterns). Nur leichter und zurueckgenommen. */
.feld__zusatz { font-weight: 400; color: var(--fg-mute); font-size: .82em; }
.feld input {
  width: 100%; padding: .9rem 1.05rem;
  background: var(--bg); border: 1px solid var(--rule);
  color: var(--fg); font: inherit; font-size: 1rem;
  border-radius: var(--r-m); -webkit-appearance: none; appearance: none;
  transition: border-color var(--t-hover) var(--ease-hover),
              box-shadow var(--t-hover) var(--ease-hover);
}
.feld input:hover { border-color: var(--fg-mute); }
.feld input:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
/* Tastatur bekommt den deutlicheren Rahmen, den der Rest der Seite
   auch benutzt; der weiche Ring bleibt der Maus vorbehalten. */
.feld input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none;
}
.feld input[aria-invalid="true"] { border-color: var(--fehler); }
.feld input[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fehler) 20%, transparent);
}

.feld__fehler { font-size: .8rem; color: var(--fehler); line-height: 1.45; }
.feld__fehler:empty { display: none; }

/* Fehleruebersicht oben im Formular */
/* Gleiche Form wie die Eingabefelder daneben: voller Rand, gleicher
   Radius. Der angeschnittene Kasten mit dem Balken links stammte noch
   aus der Zeit der unterstrichenen Felder und passte zu nichts mehr. */
.fehlerbox {
  padding: 1rem 1.1rem 1.05rem;
  margin-bottom: .4rem;
  border: 1px solid color-mix(in srgb, var(--fehler) 32%, transparent);
  border-radius: var(--r-m);
  background: color-mix(in srgb, var(--fehler) 6%, transparent);
}
.fehlerbox:focus { outline: none; }
.fehlerbox:focus-visible {
  outline: 0; border-color: var(--fehler);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--fehler) 20%, transparent);
}
.fehlerbox__titel {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .55rem;
  font-size: .9rem; font-weight: 600; color: var(--fehler); letter-spacing: -.005em;
}
/* Punkt statt Aufzaehlungszeichen des Browsers — der sass zu weit
   links und riss die Liste aus der Flucht des Titels. */
.fehlerbox__liste { margin: 0; padding: 0; list-style: none; }
.fehlerbox__liste li {
  position: relative; padding-left: 1rem;
  font-size: .84rem; line-height: 1.6; color: var(--fg-soft);
}
.fehlerbox__liste li + li { margin-top: .3rem; }
.fehlerbox__liste li::before {
  content: ""; position: absolute; left: .15rem; top: .6em;
  width: 4px; height: 4px; border-radius: 50%;
  background: color-mix(in srgb, var(--fehler) 70%, transparent);
}
.fehlerbox__liste a {
  display: inline; color: var(--fg);
  text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--fehler) 45%, transparent);
  text-underline-offset: 3px;
  transition: color var(--t-hover) var(--ease-hover);
}
.fehlerbox__liste a:hover { color: var(--fehler); text-decoration-color: var(--fehler); }

/* Spamfalle — bewusst nicht display:none, damit Bots sie ausfuellen */
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.zustimmung {
  display: grid; grid-template-columns: auto 1fr; gap: .85rem;
  align-items: start;
  font-size: .82rem; line-height: 1.55; color: var(--fg-mute);
  cursor: pointer;
}
.zustimmung input {
  /* 24x24 ist die WCAG-2.2-Mindestflaeche fuer Web */
  width: 24px; height: 24px; margin-top: 0;
  border-radius: var(--r-s);
  accent-color: var(--accent);
  flex: none;
}
.zustimmung a { color: var(--accent); border-bottom: 1px solid transparent; transition: border-color var(--t-hover) var(--ease-hover); }
.zustimmung a:hover { border-bottom-color: var(--accent); }
/* Seit dem zweiten, freiwilligen Haken stehen hier zwei Bloecke
   untereinander. Ohne Abstand lesen sie sich als ein einziger Satz —
   und genau das soll die Trennung ja verhindern. */
.zustimmung + .zustimmung { margin-top: .25rem; }

.lead__senden { width: 100%; justify-content: center; margin-top: .4rem; }
.lead__senden[disabled] { opacity: .55; cursor: progress; }

.lead__hinweis {
  margin: 0; font-size: .82rem; line-height: 1.55; color: var(--fg-mute);
  /* allow-discrete haelt die Zeile waehrend des Auf- und Abblendens
     im Fluss. Einzeln notiert, nicht als Kurzform: Ein Browser, der
     transition-behavior nicht kennt, verwirft dann nur diese eine
     Zeile — in der Kurzform risse er die ganze Regel mit
     und es bliebe gar keine Blende. */
  transition-property: opacity, transform, display;
  transition-duration: var(--t-ui);
  transition-timing-function: var(--ease-out);
  transition-behavior: allow-discrete;
}
@starting-style {
  .lead__hinweis { opacity: 0; transform: translateY(-.25rem); }
}
.lead__hinweis:empty { display: none; opacity: 0; }
.lead__hinweis[data-art="fehler"] { color: var(--fehler); }
.lead__hinweis[data-art="demo"] { color: var(--accent); }

/* Der Ausdruck ist entfallen: das Ergebnis kommt als PDF per Mail,
   ein zweiter Weg ueber den Druckdialog des Browsers hat davon nur
   abgelenkt — und er brachte ohnehin die ganze Seite mit aufs Blatt,
   weil .videoseite nie unter .section fiel. */

/* Bestaetigung nach dem Absenden */
.versand {
  display: grid; justify-items: start;
  padding: 1.5rem 1.4rem 1.6rem;
  margin-bottom: 2rem;
  border-radius: var(--r-l);
  background: color-mix(in srgb, var(--accent) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
}
.versand__zeichen {
  display: grid; place-items: center;
  width: 2.6rem; height: 2.6rem; margin-bottom: 1rem;
  border-radius: var(--r-pill);
  background: var(--accent);
}
.versand__zeichen svg {
  width: 1.4rem; height: 1.4rem;
  fill: none; stroke: var(--btn-fg); stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
}
.versand__titel {
  margin: 0 0 .5rem;
  font-size: 1.35rem; font-weight: 500; letter-spacing: -.02em; color: var(--fg);
}
.versand__text { margin: 0; font-size: .88rem; line-height: 1.6; color: var(--fg-soft); }
.versand__text b { font-weight: 500; color: var(--fg); overflow-wrap: anywhere; }

.versand--fehler {
  background: color-mix(in srgb, var(--fehler) 7%, transparent);
  border-color: color-mix(in srgb, var(--fehler) 22%, transparent);
}
.versand--fehler .versand__zeichen { background: var(--fehler); }

/* Finance & Coffee */
.fc { overflow: hidden; padding-block: clamp(7rem, 16vw, 13rem); }
.fc__bg { position: absolute; inset: -8% 0; z-index: 0; will-change: transform; }
.fc__bg img { width: 100%; height: 100%; object-fit: cover; }
.fc::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to right, var(--bg) 4%, color-mix(in srgb, var(--bg) 82%, transparent) 46%, color-mix(in srgb, var(--bg) 30%, transparent) 100%);
}
.fc__inner { position: relative; z-index: 2; }
.fc .h1-alt { max-width: 14ch; margin-bottom: clamp(2rem, 4vw, 3rem); }
.fc .h1-alt em { color: var(--accent); }
.fc__text { max-width: 54ch; }
.fc__text .btn { margin-top: .75rem; }

/* Insights */
.posts {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.75rem, 3.5vw, 3rem);
  margin-block: clamp(3.5rem, 7vw, 5.5rem);
}
.post { display: block; }
.post__meta { display: flex; align-items: center; gap: .9rem; margin: 1.4rem 0 .8rem; }
.post__idx { font-family: var(--ff-serif); font-style: italic; font-size: 1rem; color: var(--accent); }
.post__cat { font-size: .75rem; letter-spacing: .2em; text-transform: uppercase; color: var(--fg-mute); }
.post__title {
  font-size: clamp(1.1rem, 1rem + .5vw, 1.4rem);
  line-height: 1.25; margin-bottom: 1rem; max-width: 22ch;
  transition: color var(--t-hover) var(--ease-hover);
}
.post:hover .post__title { color: var(--accent); }
.post__link {
  position: relative; display: inline-block; padding-bottom: .35rem;
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; color: var(--fg-mute);
}
.post__link::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-ui) var(--ease-out);
}
.post:hover .post__link::after { transform: scaleX(1); }

.more {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 1.25rem;
  border-top: 1px solid var(--rule); padding-top: 2rem;
}
.more__label { font-size: .74rem; letter-spacing: .22em; text-transform: uppercase; color: var(--fg-mute); }
.more__links { display: flex; gap: clamp(1.5rem, 4vw, 3rem); }
.more__links a {
  position: relative; font-size: clamp(1.1rem, 1rem + .7vw, 1.6rem); letter-spacing: -.02em;
  transition: color var(--t-hover) var(--ease-hover);
}
.more__links a::after {
  content: ""; position: absolute; left: 0; bottom: -.15em; width: 100%; height: 1px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-ui) var(--ease-out);
}
.more__links a:hover { color: var(--accent); }
.more__links a:hover::after { transform: scaleX(1); }

/* Kontakt */
.contact {
  background: var(--band);
  min-height: 88svh;
  display: flex; align-items: center;
  transition: background-color var(--t-theme);
}
.contact__inner { text-align: center; }
.contact .h1-alt { max-width: 18ch; margin: 0 auto clamp(2rem, 4vw, 3rem); }
.contact .h1-alt em { color: var(--accent); }
.contact .lead--center { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.contact__alt {
  display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  font-size: .76rem; letter-spacing: .18em; text-transform: uppercase; color: var(--fg-mute);
}
.contact__alt a {
  display: inline-flex; align-items: center; min-height: 24px;
  padding-block: .25rem;
  transition: color var(--t-hover) var(--ease-hover);
}
.contact__alt a:hover { color: var(--accent); }

/* ─────────── 8. MEDIA / BILDER ─────────── */
.media {
  position: relative; margin: 0; overflow: hidden;
  border-radius: var(--r-m);
  background: linear-gradient(135deg, var(--ph-a), var(--ph-b));
}
.media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform var(--t-gross) var(--ease-out);
}
.media--wide { aspect-ratio: 16 / 8; }
.media--tall { aspect-ratio: 3 / 4; }
.media--post { aspect-ratio: 4 / 5; }
.figure { margin: 0; }
.figure figcaption {
  margin-top: 1.1rem; font-size: .75rem; letter-spacing: .16em;
  text-transform: uppercase; color: var(--fg-mute);
}

.media-pair {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: clamp(1.25rem, 4vw, 4rem);
  align-items: start;
}
/* zweites Bild versetzt — editorialer Rhythmus statt starrer Reihe */
.figure--drop { margin-top: clamp(2rem, 7vw, 7rem); }

a:hover .media img, .figure:hover .media img, .split__media:hover img { transform: scale(1.025); }

/* Platzhalter, solange kein echtes Foto vorliegt */
.media.is-empty::after,
.hero__media.is-empty::after,
.fc__bg.is-empty::after {
  content: attr(data-label);
  position: absolute; inset: 0;
  border-radius: inherit;
  display: grid; place-content: center; text-align: center;
  padding: 2rem;
  background: linear-gradient(135deg, var(--ph-a), var(--ph-b));
  color: var(--fg-mute);
  font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; line-height: 2;
  border: 1px solid var(--rule-soft);
}
.media.is-empty img, .hero__media.is-empty img, .fc__bg.is-empty img { visibility: hidden; }
.hero__media.is-empty { --ph-a: transparent; --ph-b: transparent; }
.hero__media.is-empty::after {
  background: radial-gradient(60% 70% at 72% 45%, color-mix(in srgb, var(--band) 70%, transparent), transparent 70%);
  border: 0; align-content: center; justify-items: end; padding-right: var(--gutter);
}
.fc__bg.is-empty::after { background: linear-gradient(120deg, var(--band), var(--bg)); border: 0; }

/* ─────────── 9. FOOTER ─────────── */
.footer { padding-block: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid var(--rule-soft); }
.footer__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 1.5rem 2rem;
}
.footer__brand { display: flex; flex-direction: column; gap: .35rem; }
.footer__name { font-size: 1rem; font-weight: 500; }
.footer__role { font-size: .8rem; letter-spacing: .02em; color: var(--accent); }
.footer__links { display: flex; flex-wrap: wrap; gap: clamp(1rem, 2.5vw, 2rem); font-size: .82rem; color: var(--fg-soft); }
.footer__links a {
  display: inline-flex; align-items: center; gap: .45rem; min-height: 24px;
  padding-block: .2rem;
  transition: color var(--t-hover) var(--ease-hover);
}
/* Die Zeichen erben die Farbe des Verweises, damit sie den
   Hover-Wechsel mitmachen. Etwas schmaler im Strich als die Zeichen im
   Rechner: Bei 1 rem Groesse in Fliesstextnaehe wirkt 2 sonst fett
   neben der Schrift. */
.footer__links svg {
  flex: none; width: 1rem; height: 1rem;
  fill: none; stroke: currentColor; stroke-width: 1.5;
  stroke-linecap: round; stroke-linejoin: round;
}
.footer__links a:hover { color: var(--accent); }
.footer__copy { font-size: .78rem; color: var(--fg-mute); letter-spacing: .04em; }

/* ─────────── 9b. ZEIGERGERÄTE ───────────
   Auf Touchgeräten löst eine Berührung den Hover-Zustand aus und
   lässt ihn danach hängen — Bilder blieben vergrößert, goldene
   Linien ausgefahren. Deshalb bleiben Hover-Bewegungen dort aus.
   ───────────────────────────────────────── */
@media not all and (hover: hover) {
  a:hover .media img,
  .figure:hover .media img,
  .split__media:hover img { transform: none; }

  .navlink:hover::after,
  .post:hover .post__link::after,
  .more__links a:hover::after { transform: scaleX(0); }

  .btn:hover::before { transform: scaleY(0); }
  .btn:hover { color: inherit; border-color: var(--rule); }
  .btn--solid:hover { background: var(--accent); color: var(--btn-fg); }
  .theme-toggle:hover { transform: none; }
}

/* ─────────── 10. MOTION ───────────
   Ein System statt verstreuter Effekte:
   1. Zeilen steigen hinter einer Maske hervor  (Headlines)
   2. Bilder werden aufgewischt und beruhigen sich  (Fotos)
   3. Goldene Linien zeichnen sich  (Trenner)
   4. Alles gestaffelt, alles langsam, alles abschaltbar
   ───────────────────────────────────────────────────── */

/* 1 — Zeilenmaske */
.zeile {
  display: block; overflow: hidden;
  /* Unterlaengen — vor allem das kursive „g" der Serife bei enger
     Zeilenhoehe — wuerden sonst von der Maske abgeschnitten. Das
     Kastenmass bleibt durch den negativen Aussenabstand unveraendert. */
  padding-bottom: .18em;
  margin-bottom: -.18em;
}
.zeile > i {
  display: block; font-style: inherit;
  /* 128 statt 108 Prozent: die zusaetzliche Innenhoehe muss mit
     ueberfahren werden, sonst blitzt die Zeile vorab auf. */
  transform: translate3d(0, 128%, 0);
  transition: transform 1.15s cubic-bezier(.16, .84, .28, 1)
              calc(var(--z, 0) * 75ms);
  will-change: transform;
}
.ist-sichtbar .zeile > i, .zeile.ist-sichtbar > i { transform: none; }

/* 2 — Bildwischer: Blende faehrt hoch, Motiv beruhigt sich aus dem Zoom */
.media img {
  clip-path: inset(0 0 0 0);
}
.media--wisch img {
  clip-path: inset(0 0 100% 0);
  transform: scale(1.12);
  transition: clip-path 1.5s cubic-bezier(.16,.84,.28,1),
              transform 1.9s cubic-bezier(.16,.84,.28,1);
}
.media--wisch.ist-sichtbar img { clip-path: inset(0 0 0 0); transform: none; }
/* Auftritt darf lang sein, Hover danach nicht */
.media--wisch.ist-sichtbar img { transition: transform var(--t-gross) var(--ease-out); }

/* 3 — Goldene Linie zeichnet sich */
.linie {
  display: block; height: 1px; background: var(--accent);
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.4s cubic-bezier(.16,.84,.28,1);
}
.linie.ist-sichtbar { transform: scaleX(1); }

/* 4 — Ladesequenz: Vorhang hebt sich, Signatur bleibt kurz stehen */
.vorhang {
  position: fixed; inset: 0; z-index: var(--z-vorhang);
  display: grid; place-items: center;
  background: var(--bg);
  transition: transform 1.1s cubic-bezier(.76,0,.24,1) .35s;
}
.vorhang__marke {
  font-size: clamp(1rem, .9rem + .6vw, 1.35rem);
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--fg);
  opacity: 0;
  animation: markeAn 1s cubic-bezier(.16,.84,.28,1) .1s forwards;
}
@keyframes markeAn { from { opacity: 0; letter-spacing: .55em; } to { opacity: 1; } }
.geladen .vorhang { transform: translateY(-101%); }
.geladen .vorhang__marke { opacity: 0; transition: opacity .35s; }

/* Zaehlwerk fuer die Ergebniszahl */
.result__hero-num { font-variant-numeric: tabular-nums; }

/* Feiner Rahmenschimmer auf dem Ergebnis, wenn es freigeschaltet wird */
@keyframes ergebnisAn {
  0%   { opacity: 0; transform: translateY(14px); }
  100% { opacity: 1; transform: none; }
}
.stufe[data-stufe="frei"]:not([hidden]) { animation: ergebnisAn .9s cubic-bezier(.16,.84,.28,1); }

/* Bestehendes Fade bleibt fuer alles, was keine Zeilenmaske hat */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 1s var(--ease) calc(var(--d, 0) * 70ms),
    transform 1.1s var(--ease) calc(var(--d, 0) * 70ms);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  .hero__media .portrait { opacity: 1; }
  .zeile > i { transform: none !important; }
  .media--wisch img { clip-path: none !important; transform: none !important; }
  .linie { transform: scaleX(1) !important; }
  .vorhang { display: none !important; }
  /* Die Regel oben kappt Dauern, keine Verzoegerungen — die Leiste
     haenge sonst noch eine Dreihundertstel herum, nachdem sie weg ist. */
  .statusleiste, .statusleiste[data-weg], .lead__hinweis { transition-delay: 0s !important; }
  /* Kein selbstlaufendes Video, wenn Bewegung unerwuenscht ist */
  .start__video { display: none; }
  .start__bild { background: center 30% / cover no-repeat url('../img/kopf-cover-standbild.jpg'); }
}

/* ─────────── 11. RESPONSIVE ─────────── */
/* ─── Statusleiste am unteren Rand (nur schmal) ───────────────
   Auf dem Handy steht die Ergebnisspalte hinter allen Eingaben. Die
   Leiste holt die Rueckmeldung in Daumenreichweite zurueck. Auf dem
   Desktop existiert sie nicht — dort ist die Spalte klebend sichtbar. */
.statusleiste { display: none; }

@media (max-width: 1080px) {
  /* Schwebende Leiste statt kantigem Balken ueber die volle Breite:
     sie liegt sichtbar auf der Seite, statt sie unten abzuschneiden. */
  /* Hier gehoert Glas hin: die Leiste schwebt ueber dem scrollenden
     Formular, ist also Bedienebene im Sinne des HIG. Gruen bleibt,
     aber durchscheinend — das Material nimmt die Farbe von dem an,
     was gerade darunter vorbeilaeuft. */
  .statusleiste {
    position: fixed; z-index: var(--z-leiste);
    left: .9rem; right: .9rem; bottom: calc(.9rem + env(safe-area-inset-bottom));
    display: flex; align-items: center; gap: .9rem;
    padding: .8rem .9rem .8rem 1.15rem;
    background: color-mix(in srgb, var(--gruen) 82%, transparent);
    color: #fff;
    border-radius: var(--r-l);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, .2),
      0 12px 36px -10px rgba(38, 37, 36, .5);
    /* Kommt von unten und geht nach unten — den Weg, den sie liegt.
       Schubkurve wie beim Ausklappen, das ist hier dieselbe Geste. */
    transition:
      transform var(--t-gross) var(--ease-schub),
      opacity var(--t-ui) var(--ease-out),
      visibility 0s linear;
  }
  /* Auftritt beim Laden. Ohne Unterstuetzung faellt das still weg und
     die Leiste steht einfach da — kein Fehler, nur weniger. */
  @starting-style {
    .statusleiste { opacity: 0; transform: translateY(calc(100% + 1.4rem)); }
  }
  /* Nach dem Freischalten. pointer-events sofort, damit die Leiste
     waehrend der Fahrt keine Klicks mehr abfaengt; visibility erst am
     Ende, sonst gaebe es nichts zu sehen. */
  .statusleiste[data-weg] {
    opacity: 0; transform: translateY(calc(100% + 1.4rem));
    visibility: hidden; pointer-events: none;
    transition:
      transform var(--t-gross) var(--ease-schub),
      opacity var(--t-ui) var(--ease-out),
      visibility 0s linear var(--t-gross);
  }
  /* Der Wechsel von Fortschritt auf „fertig" ist ein Zustandswechsel,
     kein Austausch von Text: Das Neue blendet auf. */
  @starting-style {
    .statusleiste__text--fertig, .statusleiste__knopf { opacity: 0; }
  }
  .statusleiste__text--fertig, .statusleiste__knopf {
    transition: opacity var(--t-ui) var(--ease-out);
  }
  .statusleiste__bahn {
    position: relative; flex: 1; height: 4px;
    border-radius: var(--r-pill);
    background: rgba(255, 255, 255, .22); overflow: hidden;
  }
  .statusleiste__bahn i {
    position: absolute; inset: 0;
    background: var(--sand);
    transform-origin: left; transform: scaleX(0);
    transition: transform var(--t-ui) var(--ease-out);
  }
  .statusleiste__text {
    font-size: .78rem; letter-spacing: .04em; white-space: nowrap;
    color: rgba(255, 255, 255, .86);
  }
  .statusleiste__text--fertig { flex: 1; color: #fff; font-weight: 500; }
  .statusleiste__knopf {
    display: inline-flex; align-items: center; gap: .5em;
    min-height: 44px; padding: .5rem 1.1rem;
    background: var(--sand); color: #2E4730; border: 0;
    font: inherit; font-size: .74rem; font-weight: 500;
    letter-spacing: .1em; text-transform: uppercase;
    border-radius: var(--r-s); cursor: pointer;
  }
  /* Damit die Leiste nichts verdeckt, bekommt der Rechner unten Luft. */
  .calc { padding-bottom: 7rem; }
}

@media (max-width: 1080px) {
  .nav__links { display: none; }
  .burger { display: grid; }
  /* Der CTA bleibt sichtbar. Frueher verbarg ihn das Burger-Menue —
     das gibt es nicht mehr, dadurch hatte Mobil gar keinen
     Handlungsaufruf mehr in der Navigation. */
  .nav__cta { padding: .8em 1em; font-size: .72rem; letter-spacing: .08em; }
  .nav__cta .pfeile { display: none; }
  /* Auf schmalen Schirmen heisst der Knopf nur „Berechnen" —
     „Kosten berechnen" wird sonst abgeschnitten. */
  .nur-breit { display: none; }
  .nav__inner { gap: 1rem; }

  .editorial { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; }
  .split__media { order: -1; }
  .principles { grid-template-columns: 1fr; gap: 2.5rem; }
  .principle { border-top: 1px solid var(--rule-soft); padding-top: 1.5rem; }
  .principles { border-top: 0; padding-top: 0; }
  .topics { grid-template-columns: repeat(2, 1fr); }
  .posts { grid-template-columns: 1fr; gap: 3rem; }
  .media--post { aspect-ratio: 16 / 10; }

  .calc__grid { grid-template-columns: 1fr; }
  .result__sticky { position: static; }
}

@media (max-width: 1240px) and (min-width: 1081px) {
  .navlink { font-size: .8rem; }
  .nav__links { gap: 1.1rem; }
}

@media (max-width: 720px) {
  .hero { align-items: flex-end; min-height: 100svh; }
  .hero__media { justify-content: center; }
  .hero__media .portrait {
    width: 100%;
    object-position: 45% 6%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, rgba(0,0,0,.55) 58%, transparent 88%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, rgba(0,0,0,.55) 58%, transparent 88%);
  }
  .hero__veil {
    background:
      linear-gradient(to top, var(--bg) 34%, color-mix(in srgb, var(--bg) 82%, transparent) 56%, color-mix(in srgb, var(--bg) 30%, transparent) 78%, transparent 96%);
  }
  .hero__scroll { display: none; }
  .hero__ctas .btn { width: 100%; justify-content: center; }

  .facts__grid { grid-template-columns: 1fr; gap: 0; }
  .fact { padding-block: 1.15rem; border-bottom: 1px solid var(--rule-soft); }
  .fact:last-child { border-bottom: 0; }
  .fact + .fact::before { display: none; }

  .topics { grid-template-columns: 1fr; }
  .media--wide { aspect-ratio: 4 / 3; }
  .more { flex-direction: column; align-items: flex-start; }
  .media-pair { grid-template-columns: 1fr; gap: 2.5rem; }
  .figure--drop { margin-top: 0; }
  .crow { margin-bottom: 1.15rem; }
  .crow__label { font-size: .9rem; }
  .crow__field input { padding: .85rem 2.4rem .85rem .95rem; }
  .switch { flex-direction: column; align-items: flex-start; gap: 1.25rem; }
  .footer__inner { flex-direction: column; align-items: flex-start; }
  .fc::before {
    background: linear-gradient(to top, var(--bg) 18%, color-mix(in srgb, var(--bg) 80%, transparent) 60%, color-mix(in srgb, var(--bg) 55%, transparent) 100%);
  }
}

/* ─── Antippflaechen ──────────────────────────────────────────
   Gemessen wurden 17 bis 31 px Hoehe bei Fusszeilenlinks, Wortmarke
   und dem Unternehmer-Schalter. Auf dem Handy trifft man das nicht
   zuverlaessig; 44 px sind die uebliche Untergrenze. Die Flaeche
   waechst, das Schriftbild bleibt.

   Steht bewusst als Letztes in der Datei: bei gleicher Spezifitaet
   gewinnt die spaetere Regel, und .footer__links a setzt weiter oben
   min-height auf 24 px. Die Druckregeln stehen mitten im Dokument,
   taugen als Marke also nicht. */
.footer__links a,
.nav__brand,
.switch__btn,
.nav__cta {
  display: inline-flex; align-items: center;
  min-height: 44px;
}

/* Verweise mitten im Fliesstext koennen nicht 44 px hoch werden, ohne
   den Satz zu zerreissen. Sie bekommen wenigstens etwas mehr Flaeche. */
.crow__hint a { display: inline-block; padding-block: .3rem; }

/* Das Fragezeichen misst 26 px. Ein unsichtbarer Rahmen bringt die
   Antippflaeche auf 44 px, ohne den Kreis groesser zu machen. */
.crow__frage { position: relative; }
.crow__frage::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 44px; height: 44px; transform: translate(-50%, -50%);
}

/* ─── Newsletter ──────────────────────────────────────────────
   Aufbau wie beim Vorbild: Zeile, Satz, Feld mit Knopf daneben,
   Einwilligung darunter. Die Mittel sind die der Seite — runde
   Flaeche, gruener Akzent, Serifentitel, keine Emoji. */
.nl { display: block; }
/* Inter, nicht die Serife: die Serife ist auf dieser Seite fuer den
   einen kursiven Einwurf reserviert. Genau den traegt der Titel im
   grossen Abschnitt als <em> — einmal, nicht in jeder Fassung. */
.nl__titel {
  margin: 0 0 .6rem;
  font-size: 1.35rem; font-weight: 500; line-height: 1.2;
  letter-spacing: -.02em; color: var(--fg);
}
.nl__text {
  margin: 0 0 1.4rem; max-width: 46ch;
  font-size: .92rem; line-height: 1.65; color: var(--fg-soft);
}

/* Feld und Knopf sitzen in einer Zeile und teilen sich den Radius. */
.nl__reihe { display: flex; gap: .6rem; align-items: stretch; }
.nl__reihe input {
  flex: 1; min-width: 0;
  padding: .9rem 1.05rem;
  background: var(--bg); border: 1px solid var(--rule);
  color: var(--fg); font: inherit; font-size: 1rem;
  border-radius: var(--r-m); -webkit-appearance: none; appearance: none;
  transition: border-color var(--t-hover) var(--ease-hover),
              box-shadow var(--t-hover) var(--ease-hover);
}
.nl__reihe input::placeholder { color: var(--fg-mute); font-weight: 300; }
.nl__reihe input:hover { border-color: var(--fg-mute); }
.nl__reihe input:focus {
  outline: 0; border-color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
}
.nl__reihe input:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: none;
}
.nl__reihe input[aria-invalid="true"] { border-color: var(--fehler); }
.nl__knopf { flex: none; white-space: nowrap; }
.nl__knopf[disabled] { opacity: .55; cursor: progress; }

.nl__ok {
  display: grid; grid-template-columns: auto 1fr; gap: .7rem;
  align-items: start; margin-top: .9rem;
  font-size: .8rem; line-height: 1.55; color: var(--fg-mute);
  cursor: pointer;
}
.nl__ok input {
  /* 24 px ist die Mindestflaeche aus WCAG 2.2 AA (2.5.8). Bei 22 lag
     das Kaestchen knapp darunter. */
  width: 24px; height: 24px; margin: 0;
  border-radius: var(--r-s); accent-color: var(--accent); flex: none;
}
/* Der Datenschutzverweis in der Einwilligung war 17 px hoch und damit
   auf dem Handy kaum zu treffen. */
.nl__ok a { display: inline-block; padding-block: .25rem; }
.nl__ok a { color: var(--accent); border-bottom: 1px solid transparent; transition: border-color var(--t-hover) var(--ease-hover); }
.nl__ok a:hover { border-bottom-color: var(--accent); }

.nl__fehler { margin: .7rem 0 0; font-size: .82rem; color: var(--fehler); line-height: 1.5; }
.nl__fehler:empty { display: none; }

/* Nach dem Absenden bleibt die Flaeche stehen, nur der Inhalt wechselt —
   ein Formular, das ersatzlos verschwindet, liest sich wie ein Fehler. */
.nl--fertig { display: block; }
.nl__fertig-titel {
  margin: 0 0 .5rem;
  font-size: 1.3rem; font-weight: 500; line-height: 1.2;
  letter-spacing: -.02em; color: var(--fg);
}
.nl__fertig-text { margin: 0; font-size: .92rem; line-height: 1.6; color: var(--fg-soft); max-width: 42ch; }

/* Auf der Bestaetigungskarte im Rechner */
.nl--karte {
  margin-bottom: 1.75rem; padding: 1.4rem 1.3rem 1.5rem;
  border: 1px solid color-mix(in srgb, var(--accent) 20%, transparent);
  border-radius: var(--r-l);
  background: color-mix(in srgb, var(--accent) 5%, transparent);
}
.nl--karte .nl__titel { font-size: 1.25rem; }
.nl--karte .nl__text { font-size: .87rem; margin-bottom: 1.1rem; }
.nl--karte .nl__reihe { flex-direction: column; }
.nl--karte .nl__knopf { justify-content: center; }

/* In der Fusszeile */
.footer__brief {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 26rem);
  gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center;
  padding-bottom: 2.25rem; margin-bottom: 2.25rem;
  border-bottom: 1px solid var(--rule-soft);
}
.footer__brief-titel {
  margin: 0;
  font-size: clamp(1.35rem, 1rem + 1.2vw, 1.75rem); font-weight: 500;
  line-height: 1.2; letter-spacing: -.025em; color: var(--fg);
}
.nl--schmal .nl__ok { margin-top: .7rem; font-size: .75rem; }

/* Eigener Abschnitt auf der Startseite */
.nlband__inner {
  max-width: 46rem; margin-inline: auto;
  padding: clamp(2rem, 4.5vw, 3.25rem);
  border: 1px solid var(--rule-soft);
  border-radius: var(--r-l);
  background: var(--bg-alt);
  box-shadow: 0 1px 2px rgba(46, 71, 48, .04),
              0 12px 32px -12px rgba(46, 71, 48, .10);
}
.nlband .nl__titel {
  font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.2rem); letter-spacing: -.03em;
  margin-bottom: .8rem;
}

/* Rueckmeldung nach dem Klick in der Mail */
.nlstand { padding-block: clamp(6rem, 16vh, 10rem); text-align: center; }
.nlstand__inner { max-width: 44rem; }
.nlstand__titel {
  font-size: var(--h-mittel); line-height: 1.12; letter-spacing: -.035em;
  margin: 0 auto 1.25rem; max-width: 18ch;
}

/* ═══════════════════════════════════════════════════════════════
   Workbook — versteckte Download-Seite (seiten/Workbook.tsx).
   Kopf mit Cover rechts, dann die Kapitel auf weichem Band, dann
   „fuer wen" mit einer zweiten Download-Flaeche.
   ═══════════════════════════════════════════════════════════════ */
.workbook { padding-top: clamp(7rem, 14vw, 10rem); }
.workbook__titel {
  font-size: var(--h-gross); line-height: 1.04; letter-spacing: -.04em;
  margin: 0 0 1.25rem; max-width: 14ch;
}
.workbook__titel em { font-size: 1.06em; }
.workbook__kopf {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: center;
}
.workbook__text .lead { margin-bottom: 1.2em; }
.workbook__text p:not(.lead) { max-width: 54ch; }
.workbook__cta { margin-top: clamp(2rem, 4vw, 3rem); }
.workbook .btn .arr { display: inline-block; }
.workbook .btn:hover .arr, .workbook__box .btn:hover .arr { transform: translate(0, 4px); }
.workbook__hinweis {
  margin: 1.1rem 0 0; font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-mute);
}
.workbook__cover {
  /* Das Mockup bringt Schatten und Perspektive selbst mit — kein
     Rahmen, keine Rundung, keine Neigung obendrauf. */
  margin: 0; justify-self: center; width: min(100%, 32rem);
}
.workbook__cover img {
  display: block; width: 100%; height: auto;
  /* Der Grund des Mockups ist nicht ganz weiss — multipliziert
     verschwindet die Bildkante im Weiss der Seite. */
  mix-blend-mode: multiply;
}

.workbook__h2 { margin-bottom: clamp(2.5rem, 5vw, 4rem); }
.workbook__liste {
  list-style: none; margin: 0; padding: 0; max-width: 52rem;
  border-bottom: 1px solid var(--rule-soft);
}
.workbook__kap {
  display: grid; grid-template-columns: 3rem 1fr; gap: 1.25rem;
  padding: 1.75rem 0; border-top: 1px solid var(--rule-soft);
}
.workbook__nr {
  font-size: .78rem; letter-spacing: .18em; color: var(--accent);
  padding-top: .35rem; font-variant-numeric: tabular-nums;
}
.workbook__kaptitel { font-size: 1.15rem; letter-spacing: -.015em; margin: 0 0 .5rem; }
.workbook__kaptext { font-size: .98rem; line-height: 1.6; margin: 0; max-width: 56ch; }

.workbook__schluss-inner {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2.5rem, 6vw, 6rem); align-items: start;
}
.workbook__punkte { list-style: none; margin: 0; padding: 0; max-width: 46ch; }
.workbook__punkte li {
  position: relative; padding: .9rem 0 .9rem 1.6rem;
  border-top: 1px solid var(--rule-soft); color: var(--fg-soft); line-height: 1.55;
}
.workbook__punkte li::before {
  content: ''; position: absolute; left: 0; top: 1.5rem;
  width: .55rem; height: .55rem; border-radius: 50%; background: var(--accent);
}
.workbook__box {
  background: var(--bg-alt); border-radius: var(--r-l);
  padding: clamp(2rem, 4vw, 3rem);
}
.workbook__box-titel { font-size: 1.6rem; letter-spacing: -.03em; color: var(--fg); margin: 0 0 .75rem; }
.workbook__box-text { margin: 0 0 1.75rem; max-width: 36ch; }

/* Dank nach dem Klick, mit Terminbuchung als naechstem Schritt */
.workbook--danke { padding-block: clamp(6rem, 12vh, 9rem); text-align: center; }
.workbook--danke .workbook__inner { max-width: 44rem; }
.workbook--danke .workbook__titel { margin-inline: auto; max-width: 18ch; }
.workbook--danke .lead--center { margin-bottom: clamp(1.5rem, 3vw, 2rem); }
.workbook__termin {
  margin: clamp(2.5rem, 5vw, 3.5rem) auto; max-width: 40rem;
  background: var(--bg-alt); border-radius: var(--r-l);
  padding: clamp(2rem, 4vw, 3rem);
}
.workbook__termin-titel {
  font-size: clamp(1.4rem, 1rem + 1.4vw, 1.9rem); line-height: 1.15;
  letter-spacing: -.03em; color: var(--fg); margin: 0 0 .9rem;
}
.workbook__termin-text { margin: 0 auto 1.75rem; max-width: 42ch; }
.workbook__termin-hinweis {
  margin: 1.1rem 0 0; font-size: .74rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--fg-mute);
}
.workbook--danke .btn .arr { display: inline-block; }
.workbook--danke .btn:hover .arr { transform: translateX(5px); }
.workbook__nochmal { font-size: .95rem; margin: 0 0 .6rem; }
.workbook__nochmal a { color: var(--accent); text-underline-offset: .2em; }

@media (max-width: 860px) {
  .workbook__kopf, .workbook__schluss-inner { grid-template-columns: 1fr; }
  .workbook__cover { width: min(100%, 22rem); justify-self: start; }
}

@media (max-width: 720px) {
  .nl__reihe { flex-direction: column; }
  .nl__knopf { justify-content: center; }
  .footer__brief { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   Rechtstexte — Impressum, Datenschutz, Erstinformation,
   Transparenzverordnung.

   Lag bis 16.09.2026 in rechtstexte.css, und die wurde nirgends
   eingebunden: weder index.html noch ein @import kannten sie. Die
   Rechtsseiten liefen ohne Abstand zur Navigation und ohne die
   Ueberschriften-Abstaende. Jetzt hier, in der einen Datei, die die
   Seite tatsaechlich laedt.
   ═══════════════════════════════════════════════════════════════ */
.legal { padding-block: clamp(8rem, 16vw, 12rem) clamp(5rem, 10vw, 8rem); }
.legal h1 { font-size: clamp(2.2rem, 1.2rem + 3.4vw, 4rem); margin-bottom: 3rem; letter-spacing: -.03em; }
.legal h2 { font-size: 1.15rem; margin: 3rem 0 1rem; letter-spacing: .02em; }
.legal .body { max-width: 68ch; }
.legal p { font-size: .98rem; }
.todo {
  border-left: 1px solid var(--accent); padding: .2rem 0 .2rem 1.25rem;
  color: var(--fg-mute); font-size: .92rem;
}
.stand { color: var(--fg-mute); font-size: .88rem; margin-top: 2.5rem; }
.legal .body ul { padding-left: 1.15rem; }
.legal .body li { margin-bottom: .5rem; }
/* Vorspann unter der Ueberschrift: nennt die Rechtsgrundlage der
   Seite, bevor der Text beginnt. Etwas groesser und leiser als der
   Fliesstext, damit er als Einordnung liest und nicht als Absatz 1. */
.legal .vorspann { font-size: 1.05rem; color: var(--fg-mute); margin-bottom: 2.5rem; }