/* ==========================================================================
   Zuchtwerk — Startseite. Die einzige Stilvorlage dieses Repositoriums.
   CI v1; dieselben Tokens gehen als docs/ci-marke.css in die Anwendung.
   Keine Webschrift, keine data:-URI, kein externer Aufruf — CSP-konform.
   Erzeugt wird das HTML aus templates/ + i18n/: python3 scripts/build.py
   ========================================================================== */

/* OD-LAYOUT-PRIMITIVES v1 — structure only: display, flex/grid, overflow, wrapping, ratio.
   Put this @layer first; product CSS outside the layer always wins. */
@layer od-layout {
  :where(.od-stack,.od-row,.od-row-top,.od-cluster,.od-grid,.od-field,.od-stat,.od-cell,.od-tile) > :where(*) { min-width: 0; }

  /* containers */
  .od-stack   { display: flex; flex-direction: column; gap: var(--od-gap, 8px); }
  .od-row     { display: flex; align-items: center; gap: var(--od-gap, 8px); }
  .od-row-top { display: flex; align-items: flex-start; gap: var(--od-gap, 8px); }
  .od-cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--od-gap, 8px); }
  .od-fill    { flex: 1 1 0; min-width: 0; }
  .od-fixed   { flex: none; }
  .od-grid    { display: grid; gap: var(--od-gap, 12px); grid-template-columns: repeat(var(--od-cols, 3), minmax(0, 1fr)); }

  /* stacked information: each piece is its own line — never sibling inline spans */
  .od-stat, .od-field, .od-cell { display: grid; gap: var(--od-gap, 2px); }
  :where(.od-stat,.od-field,.od-cell) > :where(*) { display: block; }
  .od-tile { display: grid; grid-template-rows: auto 1fr; }
  :where(.od-tile) > :where(*) { display: block; }

  /* media keeps its intrinsic ratio by default; never a distorted or cropped
     cover by accident. height:auto lets the ratio win over an <img height="…">
     attribute. Cropping to a uniform box is an explicit opt-in: set --od-ratio
     AND add .od-media-cover together (per the core rule, only where a crop is
     deliberate — tile thumbs, decorative fills — never on full-frame content). */
  .od-media { display: block; width: 100%; height: auto; aspect-ratio: var(--od-ratio, auto); }
  .od-media-cover { object-fit: cover; }

  /* data text only — authored copy is rewritten to its budget instead */
  .od-truncate { display: block; max-width: 100%; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .od-clamp-2, .od-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
  .od-clamp-2 { -webkit-line-clamp: 2; }
  .od-clamp-3 { -webkit-line-clamp: 3; }
  .od-lines-2 { min-height: calc(2 * 1.4em); }   /* block-level reservation for a shared baseline */
  .od-nowrap  { white-space: nowrap; }           /* 数字+单位 · 价格+起 · 日期+星期 */
  .od-keep    { word-break: keep-all; overflow-wrap: anywhere; } /* CJK labels break at spaces / <wbr> first */

  /* screen skeleton (optional): bars take their own space, the middle scrolls — no padding guessed for chrome */
  .od-screen { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; height: 100%; }
  .od-scroll { overflow-y: auto; overscroll-behavior: contain; min-height: 0; }

  /* horizontal rail: the next item peeks at the edge; trailing room survives overflow */
  .od-rail { display: flex; gap: var(--od-gap, 8px); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none;
             padding-inline: var(--od-rail-pad, 16px); scroll-padding-inline: var(--od-rail-pad, 16px); }
  .od-rail::-webkit-scrollbar { display: none; }
  :where(.od-rail) > :where(*) { flex: none; scroll-snap-align: start; }
  :where(.od-rail) > :where(:last-child) { margin-inline-end: var(--od-rail-pad, 16px); }

  .od-spacer { flex: none; visibility: hidden; pointer-events: none; }
  .od-touch  { min-width: 44px; min-height: 44px; }
}
/* /OD-LAYOUT-PRIMITIVES v1 */


/* --- Tokens (Designsystem v1, unverändert) -------------------------------- */
:root {
  --bg:#fbfbfd; --surface:#ffffff; --surface-2:#f4f5f7; --surface-3:#eceef1;
  --ink:#17181a; --muted:#565b60; --faint:#74797f;
  --line:rgba(16,20,24,.09); --line-strong:rgba(16,20,24,.16);
  --accent:#14624a; --accent-hover:#0f5540; --accent-soft:#e8f2ed; --accent-line:#bcd9cc; --on-accent:#ffffff;
  --ok:#17784f; --ok-soft:#e6f3ec; --warn:#8a5a00; --warn-soft:#fbf0dc;
  --danger:#b3261e; --danger-soft:#fbeae9; --info:#1c5e9e; --info-soft:#e8f0f8;
  --viz-1:#14624a; --viz-2:#3f8fb8; --viz-3:#9a6b1f;
  --r-ctl:8px; --r-input:10px; --r-card:12px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px; --sp-24:96px;
  --shadow-micro:0 1px 2px rgba(16,20,24,.06), 0 1px 1px rgba(16,20,24,.04);
  --shadow-raised:0 6px 16px -6px rgba(16,20,24,.12), 0 1px 2px rgba(16,20,24,.05);
  --shadow-pop:0 18px 44px -18px rgba(16,20,24,.28), 0 2px 6px rgba(16,20,24,.06);
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  --fs-11:11px; --fs-12:12px; --fs-13:13px; --fs-14:14px; --fs-16:16px; --fs-18:18px;
  --fs-20:20px; --fs-24:24px; --fs-30:30px; --fs-38:38px; --fs-48:48px; --fs-60:60px;
  --dur-ctl:160ms; --dur-panel:240ms; --dur-max:320ms;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-in:cubic-bezier(.4,0,1,1);
  --measure:68ch;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --bg:#0e1012; --surface:#16191c; --surface-2:#1d2125; --surface-3:#262b30;
  --ink:#f2f4f5; --muted:#a3abb2; --faint:#7d858c;
  --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.20);
  --accent:#4fbf90; --accent-hover:#6bd0a5; --accent-soft:rgba(79,191,144,.14); --accent-line:rgba(79,191,144,.34); --on-accent:#06231a;
  --ok:#4fbf90; --ok-soft:rgba(79,191,144,.14); --warn:#e0a63a; --warn-soft:rgba(224,166,58,.15);
  --danger:#ff6b60; --danger-soft:rgba(255,107,96,.15); --info:#6fb2ef; --info-soft:rgba(111,178,239,.15);
  --viz-1:#4fbf90; --viz-2:#6fb2ef; --viz-3:#e0a63a;
  --shadow-micro:0 1px 2px rgba(0,0,0,.5);
  --shadow-raised:0 6px 16px -6px rgba(0,0,0,.62), 0 1px 2px rgba(0,0,0,.4);
  --shadow-pop:0 18px 44px -18px rgba(0,0,0,.78), 0 2px 6px rgba(0,0,0,.45);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:#0e1012; --surface:#16191c; --surface-2:#1d2125; --surface-3:#262b30;
    --ink:#f2f4f5; --muted:#a3abb2; --faint:#7d858c;
    --line:rgba(255,255,255,.10); --line-strong:rgba(255,255,255,.20);
    --accent:#4fbf90; --accent-hover:#6bd0a5; --accent-soft:rgba(79,191,144,.14); --accent-line:rgba(79,191,144,.34); --on-accent:#06231a;
    --ok:#4fbf90; --ok-soft:rgba(79,191,144,.14); --warn:#e0a63a; --warn-soft:rgba(224,166,58,.15);
    --danger:#ff6b60; --danger-soft:rgba(255,107,96,.15); --info:#6fb2ef; --info-soft:rgba(111,178,239,.15);
    --viz-1:#4fbf90; --viz-2:#6fb2ef; --viz-3:#e0a63a;
    --shadow-micro:0 1px 2px rgba(0,0,0,.5);
    --shadow-raised:0 6px 16px -6px rgba(0,0,0,.62), 0 1px 2px rgba(0,0,0,.4);
    --shadow-pop:0 18px 44px -18px rgba(0,0,0,.78), 0 2px 6px rgba(0,0,0,.45);
    color-scheme: dark;
  }
}

/* --- Basis ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--font-sans); font-size: var(--fs-16); line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  padding-bottom: var(--lp-dock, 0px);
}
h1,h2,h3,h4 { margin: 0; font-weight: 640; line-height: 1.14; letter-spacing: -.022em; text-wrap: balance; }
h1 { font-size: clamp(var(--fs-30), 5.2vw, var(--fs-48)); letter-spacing: -.032em; line-height: 1.08; }
h2 { font-size: clamp(var(--fs-24), 3.4vw, var(--fs-38)); letter-spacing: -.028em; }
h3 { font-size: var(--fs-20); }
p, ul, ol, figure, dl { margin: 0; padding: 0; }
li { list-style: none; }
img, svg { display: block; max-width: 100%; }
/* <picture> ist nur ein Behaelter fuer die Formatwahl — es darf im
   Layout nicht mitzaehlen, sonst bekaeme das absolut gesetzte Kopfbild
   eine Zeilenbox darueber. */
picture { display: contents; }
a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 2px; }
button { font: inherit; color: inherit; }
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--accent); outline-offset: 3px; border-radius: var(--r-ctl);
}
::selection { background: var(--accent-soft); color: var(--ink); }
[hidden] { display: none !important; }

.wrap { width: min(1180px, calc(100% - var(--sp-8))); margin-inline: auto; }
.narrow { width: min(760px, calc(100% - var(--sp-8))); margin-inline: auto; }
.zw-sr { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }
.zw-skip {
  position:absolute; left:var(--sp-4); top:-64px; z-index:100;
  padding:var(--sp-2) var(--sp-3); background:var(--surface); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:var(--r-ctl); box-shadow:var(--shadow-raised);
  text-decoration:none; transition: top var(--dur-ctl) var(--ease-out);
}
.zw-skip:focus { top: var(--sp-3); }
.eyebrow { font-size:var(--fs-12); font-weight:640; letter-spacing:.09em; text-transform:uppercase; color:var(--accent); }
.lead { font-size:clamp(var(--fs-16), 1.6vw, var(--fs-18)); line-height:1.62; color:var(--muted); max-width:var(--measure); }
.muted { color: var(--muted); }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }

.zw-i { width:20px; height:20px; flex:none; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; }
.zw-i-sm { width:16px; height:16px; }
.zw-i-lg { width:24px; height:24px; }

/* --- Knöpfe --------------------------------------------------------------- */
.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-2);
  min-height:44px; padding:0 var(--sp-5, 20px);
  background:var(--surface); color:var(--ink);
  border:1px solid var(--line-strong); border-radius:var(--r-ctl);
  font-size:var(--fs-15, 15px); font-weight:580; letter-spacing:-.006em;
  text-decoration:none; white-space:nowrap; cursor:pointer; box-shadow:var(--shadow-micro);
  transition: background var(--dur-ctl) var(--ease-out), border-color var(--dur-ctl) var(--ease-out),
              transform var(--dur-ctl) var(--ease-out), color var(--dur-ctl) var(--ease-out);
}
.btn:active { transform: translateY(1px); }
@media (hover: hover) { .btn:hover { background:var(--surface-2); } }
.btn.primary { background:var(--accent); color:var(--on-accent); border-color:transparent; }
@media (hover: hover) { .btn.primary:hover { background:var(--accent-hover); } }
.btn.ghost { background:transparent; border-color:var(--line-strong); box-shadow:none; }
@media (hover: hover) { .btn.ghost:hover { background:var(--surface-2); border-color:var(--accent-line); } }
.btn.plain { background:transparent; border-color:transparent; box-shadow:none; color:var(--muted); }
@media (hover: hover) { .btn.plain:hover { background:var(--surface-2); color:var(--ink); } }
.btn.lg { min-height:52px; padding:0 var(--sp-6); font-size:var(--fs-16); }
.btn.sm { min-height:38px; padding:0 var(--sp-3); font-size:var(--fs-13); }
.btn.icon { width:44px; padding:0; }
.btn.block { width:100%; }

/* Container wie .plan und .path setzen ihre direkten Kinder auf display:block.
   Das hat die Knöpfe darin flach gelegt, wodurch justify-content wirkungslos
   wurde und der Text linksbündig stand. Element + Klasse gewinnt gegen
   `.plan > *`, unabhängig von der Reihenfolge im Dokument. */
a.btn, button.btn { display:inline-flex; }
a.btn.block, button.btn.block { display:flex; width:100%; }

.badge {
  display:inline-flex; align-items:center; gap:6px; padding:3px 10px;
  background:var(--surface-2); color:var(--muted); border-radius:var(--r-pill);
  font-size:var(--fs-12); font-weight:600; line-height:1.6; white-space:nowrap;
}
.badge.accent { background:var(--accent-soft); color:var(--accent); }
.badge.ok { background:var(--ok-soft); color:var(--ok); }
.badge.warn { background:var(--warn-soft); color:var(--warn); }
/* "Neu" traegt gefuellte Farbe, die Empfehlung nur getoente -- damit stehen
   die beiden Auszeichnungen nicht auf derselben Stufe. Leer heisst weg:
   Text in der Sprachdatei loeschen, neu bauen, die Pille verschwindet. */
.badge.neu { background:var(--accent); color:var(--on-accent); }
.badge:empty { display:none; }
.dot { width:7px; height:7px; border-radius:50%; background:currentColor; flex:none; }

.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--r-card); box-shadow:var(--shadow-micro); }

/* --- Kopfleiste ----------------------------------------------------------- */
.top {
  position:sticky; top:0; z-index:60;
  background:color-mix(in srgb, var(--bg) 86%, transparent);
  backdrop-filter:saturate(180%) blur(18px);
  border-bottom:1px solid var(--line);
}
.top-in { display:flex; align-items:center; gap:var(--sp-3); min-height:60px; }
.brand { display:inline-flex; align-items:center; gap:var(--sp-2); color:var(--ink); text-decoration:none; font-weight:660; letter-spacing:-.02em; font-size:16px; flex:none; }
.brand img { width:28px; height:28px; border-radius:7px; }
.nav { display:flex; gap:var(--sp-1); margin-inline-start:var(--sp-4); }
.nav a { padding:8px 10px; border-radius:var(--r-ctl); font-size:var(--fs-14); font-weight:520; color:var(--muted); text-decoration:none; }
@media (hover: hover) { .nav a:hover { color:var(--ink); background:var(--surface-2); } }
.top-end { display:flex; align-items:center; gap:var(--sp-2); margin-inline-start:auto; }
.top-end .menubtn { display:none; }
.theme .i-moon { display:none; }
:root[data-theme="dark"] .theme .i-sun { display:none; }
:root[data-theme="dark"] .theme .i-moon { display:block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme .i-sun { display:none; }
  :root:not([data-theme="light"]) .theme .i-moon { display:block; }
}
/* Der Umschaltpunkt ist 1180 px — die Breite des Inhaltsrahmens. Darunter passt
   die Zeile aus Marke, sechs Verweisen, Sprachlink, Umschalter und zwei Knöpfen
   nicht mehr nebeneinander: gemessen am 19.09.2026 braucht die breiteste der
   vier Fassungen 1075 px, und fremde Systemschriften fallen breiter aus.
   Der Knopf trägt .top-end davor, weil `button.btn { display:inline-flex }` eine
   einzelne Klasse schlägt — ohne das stand er in jeder Breite da und tat am
   grossen Schirm nichts. */
@media (max-width: 1179px) {
  .top-end .menubtn { display:inline-flex; }
  .nav {
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:var(--sp-1);
    padding:var(--sp-3) var(--sp-4) var(--sp-4);
    margin:0; background:var(--bg); border-bottom:1px solid var(--line);
    box-shadow:var(--shadow-raised);
  }
  .nav[data-open="false"] { display:none; }
  .nav a { padding:12px 10px; font-size:var(--fs-16); }
  .nav .nav-cta { display:grid; gap:var(--sp-2); padding-top:var(--sp-2); }
  .top-end .desk { display:none; }
}
@media (min-width: 1180px) { .nav .nav-cta { display:none; } }

/* --- Ohne JavaScript ------------------------------------------------------- */
/* Menüknopf und Design-Umschalter sind reine Skript-Bedienelemente. Läuft das
   Skript nicht — blockiert, gesperrt, in einem Rahmen ohne Skriptrecht —, wäre
   der Knopf rechts oben tot. Dann stehen die Verweise stattdessen offen da.
   js/landing.js nimmt die Klasse im <head> wieder weg, bevor gezeichnet wird. */
.nojs .menubtn, .nojs .theme { display:none; }
@media (max-width: 1179px) {
  .nojs .top { position:static; }
  .nojs .top-in { flex-wrap:wrap; padding-bottom:var(--sp-2); }
  .nojs .nav {
    position:static; flex:1 0 100%; flex-direction:row; flex-wrap:wrap;
    margin:0; padding:0; background:transparent; border:0; box-shadow:none;
  }
  .nojs .nav[data-open="false"] { display:flex; }
  .nojs .nav a { padding:8px 10px; font-size:var(--fs-14); }
  .nojs .nav .nav-cta { display:flex; gap:var(--sp-2); padding-top:0; }
}


/* --- Mitlaufende CTA-Leiste ----------------------------------------------- */
.dock {
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  display:flex; align-items:center; gap:var(--sp-4);
  padding:var(--sp-3) var(--sp-4);
  background:color-mix(in srgb, var(--surface) 94%, transparent);
  backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid var(--line-strong);
  box-shadow:0 -6px 24px -12px rgba(0,0,0,.28);
  transform:translateY(110%);
  visibility:hidden;
  transition:transform var(--dur-panel) var(--ease-out), visibility 0s linear var(--dur-panel);
}
.dock[data-show="true"] { transform:translateY(0); visibility:visible; transition-delay:0s; }
.dock .dock-txt { display:grid; gap:2px; min-width:0; }
.dock .dock-txt > * { display:block; }
.dock .dock-t { font-size:var(--fs-14); font-weight:600; }
.dock .dock-s { font-size:var(--fs-12); color:var(--muted); }
@media (max-width: 560px) { .dock .dock-txt { display:none; } .dock .btn { width:100%; } }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  --hero-ink:#ffffff; --hero-soft:rgba(255,255,255,.86); --hero-line:rgba(255,255,255,.28);
  --hero-btn:#4fbf90; --hero-btn-ink:#06231a;
  position:relative; isolation:isolate; overflow:hidden;
  padding-block:var(--sp-12);
  color:var(--hero-ink);
}
@media (min-width: 1024px) { .hero { padding-block:var(--sp-16) var(--sp-16); } }
.hero-bg { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.hero::before {
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(8,13,11,.80) 0%, rgba(8,13,11,.66) 45%, rgba(8,13,11,.82) 100%);
}
.hero-in { display:grid; gap:var(--sp-12); align-items:center; }
@media (min-width: 1024px) { .hero-in { grid-template-columns: minmax(0,1.05fr) minmax(0,.95fr); gap:var(--sp-16); } }
.hero h1 { color:var(--hero-ink); margin-block:var(--sp-3) var(--sp-4); max-width:16ch; }
.hero .eyebrow { color:var(--hero-btn); }
.hero .hero-lead { font-size:clamp(var(--fs-16), 1.7vw, var(--fs-18)); line-height:1.62; color:var(--hero-soft); max-width:50ch; }
.hero-cta { display:flex; flex-wrap:wrap; gap:var(--sp-3); margin-top:var(--sp-6); }
.hero .btn.primary { background:var(--hero-btn); color:var(--hero-btn-ink); border-color:transparent; box-shadow:0 8px 24px -10px rgba(0,0,0,.6); }
@media (hover: hover) { .hero .btn.primary:hover { background:#6bd0a5; } }
.hero .btn.ghost { background:rgba(255,255,255,.08); color:var(--hero-ink); border-color:var(--hero-line); }
@media (hover: hover) { .hero .btn.ghost:hover { background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.5); } }
.hero :where(a, button):focus-visible { outline-color:#ffffff; }
/* Eine kompakte Zeile statt drei Häkchen-Zeilen: gleiche Aussage, weniger Gewicht. */
.trust { margin-top:var(--sp-4); font-size:var(--fs-13); line-height:1.5; color:var(--hero-soft); max-width:46ch; }

/* Zweitaktion als Textlink, damit im Hero nur ein gefüllter Knopf steht. */
.hero-link {
  display:inline-flex; align-items:center; gap:6px;
  min-height:44px; padding-inline:2px;
  color:var(--hero-ink); text-decoration:none;
  font-size:var(--fs-15, 15px); font-weight:560;
  border-bottom:1px solid var(--hero-line);
  transition:border-color var(--dur-ctl) var(--ease-out);
}
.hero-link .zw-i { color:var(--hero-btn); }
@media (hover: hover) { .hero-link:hover { border-bottom-color:var(--hero-btn); } }

/* Produktvorschau im Hero */
.prev { border-radius:14px; background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow-pop); overflow:hidden; color:var(--ink); }
.prev-head { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3) var(--sp-4); border-bottom:1px solid var(--line); background:var(--surface-2); }
.prev-head .od-stat { --od-gap:1px; }
.prev-d { font-size:var(--fs-13); font-weight:620; }
.prev-s { font-size:var(--fs-12); color:var(--muted); }
.prev-list { padding:var(--sp-2) 0; }
.prev-row { display:flex; align-items:center; gap:var(--sp-3); padding:10px var(--sp-4); border-bottom:1px solid var(--line); }
.prev-row:last-child { border-bottom:0; }
.prev-tick { flex:none; width:22px; height:22px; border-radius:7px; border:1.5px solid var(--line-strong); display:grid; place-items:center; color:transparent; }
.prev-row.done .prev-tick { background:var(--accent); border-color:var(--accent); color:var(--on-accent); }
.prev-name { display:grid; gap:1px; flex:1 1 auto; min-width:0; }
.prev-name > * { display:block; }
.prev-n { font-size:var(--fs-14); font-weight:560; }
.prev-b { font-size:var(--fs-12); color:var(--muted); }
.prev-row.done .prev-n { color:var(--muted); }
.prev-q { flex:none; font-size:var(--fs-13); font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.prev-foot { padding:var(--sp-3) var(--sp-4); border-top:1px solid var(--line); background:var(--surface-2); font-size:var(--fs-12); color:var(--muted); }
.prev-cap { margin-top:var(--sp-3); font-size:var(--fs-12); color:rgba(255,255,255,.72); text-align:center; }

/* --- Abschnitte ----------------------------------------------------------- */
.sec { padding-block:var(--sp-24); }
.sec.tight { padding-block:var(--sp-16); }
.sec-head { max-width:var(--measure); margin-bottom:var(--sp-12); }
.sec-head h2 { margin-block:var(--sp-3) var(--sp-4); }

/* Drei Wahrheiten */
.truths { display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.truth { padding:var(--sp-6); display:grid; gap:var(--sp-3); }
.truth > * { display:block; }
.truth .zw-i { color:var(--accent); }
.truth h3 { font-size:var(--fs-18); }
.truth p { font-size:var(--fs-14); color:var(--muted); }
.turn-line { margin-top:var(--sp-8); font-size:clamp(var(--fs-18), 2.2vw, var(--fs-24)); font-weight:620; letter-spacing:-.02em; max-width:34ch; }

/* Text + Bild */
.split { display:grid; gap:var(--sp-12); align-items:center; }
@media (min-width: 900px) { .split { grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--sp-16); } .split.flip > figure { order:-1; } }
.split p + p { margin-top:var(--sp-4); }
.split .lead { margin-top:var(--sp-4); }
/* Trennbild über die volle Breite. Bewusst beschnittenes Dekorbild — deshalb
   --od-ratio zusammen mit .od-media-cover, wie es die Primitiven vorsehen. */
.bleed { margin:0; }
.bleed img { --od-ratio: 16 / 6; }
.bleed figcaption {
  width: min(1180px, calc(100% - var(--sp-8)));
  margin: var(--sp-3) auto 0;
  font-size: var(--fs-12);
  color: var(--faint);
}
@media (max-width: 700px) {
  .bleed img { --od-ratio: 4 / 3; }
}

figure.shot { margin:0; }
figure.shot img { border-radius:var(--r-card); }
figure.shot figcaption { margin-top:var(--sp-3); font-size:var(--fs-12); color:var(--faint); }

/* Beweis */
/* Drei gleich breite und gleich hohe Segmente. Kein auto-fit, weil zwei Spalten
   ein Kärtchen allein lassen würden — entweder alle drei nebeneinander oder
   alle drei untereinander. */
.proof { display:grid; gap:var(--sp-4); grid-template-columns:1fr; align-items:stretch; }
@media (min-width: 1024px) { .proof { grid-template-columns:repeat(3, minmax(0, 1fr)); } }

/* auto / 1fr / auto: der Inhalt steht oben, die Fußnote liegt bei allen dreien
   auf derselben Linie. Der Rest ist Luft, und die darf da sein. */
.pcard { display:grid; grid-template-rows:auto 1fr auto; overflow:hidden; }
.pcard > * { display:block; }
.pcard-head { padding:var(--sp-4) var(--sp-5, 20px) 0; }
.pcard-k { font-size:var(--fs-12); font-weight:640; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.pcard-t { margin-top:var(--sp-1); font-size:var(--fs-16); font-weight:620; letter-spacing:-.01em; }
.pcard-body { padding:var(--sp-4) var(--sp-5, 20px) var(--sp-5, 20px); }
/* Ohne Füllfarbe: drei getönte Balken nebeneinander waren der unruhigste Teil
   des Abschnitts. Eine Haarlinie reicht, um die Fußnote abzusetzen. */
.pcard-note { padding:var(--sp-4) var(--sp-5, 20px); border-top:1px solid var(--line); font-size:var(--fs-12); line-height:1.5; color:var(--muted); }

.doc { display:flex; align-items:center; gap:var(--sp-3); padding:var(--sp-3); border:1px solid var(--line-strong); border-radius:var(--r-input); background:var(--bg); }
.doc .zw-i { color:var(--accent); }
.doc-meta { display:grid; gap:1px; flex:1 1 auto; min-width:0; }
.doc-meta > * { display:block; }
.doc-n { font-size:var(--fs-13); font-weight:580; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-s { font-size:var(--fs-12); color:var(--muted); }

.chart { width:100%; height:auto; }
.chart .grid-l { stroke:var(--line-strong); stroke-width:1; }
.chart .ax { fill:var(--faint); font-size:9px; font-family:var(--font-sans); }
.chart .lbl { font-size:9.5px; font-weight:640; font-family:var(--font-sans); }
.chart path { fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }

.att { display:grid; gap:var(--sp-2); }
.att-row { display:flex; align-items:center; gap:var(--sp-3); }
.att-who { display:grid; gap:1px; flex:1 1 auto; min-width:0; }
.att-who > * { display:block; }
.att-n { font-size:var(--fs-13); font-weight:560; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.att-d { font-size:var(--fs-12); color:var(--muted); }
.att-btn {
  flex:none; display:inline-flex; align-items:center; gap:6px;
  min-height:36px; padding:0 12px; cursor:pointer;
  background:var(--surface-2); color:var(--ink);
  border:1px solid var(--line); border-radius:var(--r-pill);
  font-size:var(--fs-12); font-weight:560; white-space:nowrap;
  transition:background var(--dur-ctl) var(--ease-out), color var(--dur-ctl) var(--ease-out), border-color var(--dur-ctl) var(--ease-out);
}
/* Statt drei satt eingefärbter Pillen: eine ruhige Pille, der Zustand steht im
   Wort und im Punkt davor. Farbe trägt die Information nie allein. */
.att-btn::before {
  content:""; flex:none; width:8px; height:8px; border-radius:50%;
  background:var(--att-dot, var(--faint));
  transition:background var(--dur-ctl) var(--ease-out);
}
.att-btn[data-state="da"]    { --att-dot:var(--ok); }
.att-btn[data-state="fehlt"] { --att-dot:var(--danger); }
.att-btn[data-state="ent"]   { --att-dot:var(--warn); }
@media (pointer: coarse) { .att-btn { min-height:44px; } }
.att-sum { margin-top:var(--sp-3); font-size:var(--fs-13); font-weight:600; }

/* Bento */
.bento { display:grid; gap:var(--sp-4); grid-template-columns:1fr; }
/* Fünf Kacheln, eine davon doppelt breit — macht sechs Einheiten und geht
   sowohl bei zwei als auch bei drei Spalten glatt auf. Keine Kachel bleibt
   allein in einer letzten Reihe stehen. */
@media (min-width: 768px) { .bento { grid-template-columns:repeat(2, minmax(0,1fr)); } .bento .wide { grid-column:span 2; } }
@media (min-width: 1024px) { .bento { grid-template-columns:repeat(3, minmax(0,1fr)); } .bento .wide { grid-column:span 2; } }
.tile { padding:var(--sp-6); display:grid; gap:var(--sp-3); align-content:start; transition:border-color var(--dur-ctl) var(--ease-out), transform var(--dur-ctl) var(--ease-out); }
.tile > * { display:block; }
@media (hover: hover) { .tile:hover { border-color:var(--accent-line); transform:translateY(-2px); } }
.tile .zw-i { color:var(--accent); }
.tile h3 { font-size:var(--fs-18); }
.tile p { font-size:var(--fs-14); color:var(--muted); }

/* Einwände */
.faq { display:grid; gap:var(--sp-4); grid-template-columns:repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.qa { padding:var(--sp-6); display:grid; gap:var(--sp-2); }
.qa > * { display:block; }
.qa h3 { font-size:var(--fs-16); }
.qa p { font-size:var(--fs-14); color:var(--muted); }

/* Preise */
/* Fuenf Tarife gehen auf zwei oder vier Spalten nie glatt auf -- einer stuende
   immer allein in der letzten Reihe. Deshalb ein Raster aus sechs Spalten, in
   dem die Karten spannen: drei nebeneinander, die letzten beiden mittig
   darunter. Kein Waisenkind bei keiner Breite. */
.prices { display:grid; gap:var(--sp-4); grid-template-columns:1fr; }
@media (min-width: 700px) {
  .prices { grid-template-columns:repeat(6, minmax(0,1fr)); }
  .prices > .plan { grid-column:span 3; }
  .prices > .plan:last-child { grid-column:1 / -1; }
}
@media (min-width: 1080px) {
  .prices > .plan { grid-column:span 2; }
  .prices > .plan:nth-child(4) { grid-column:2 / span 2; }
  .prices > .plan:last-child { grid-column:span 2; }
}
.plan { padding:var(--sp-6); display:grid; grid-template-rows:auto auto auto 1fr auto; gap:var(--sp-3); }
.plan > * { display:block; }
.plan .p-name { font-size:var(--fs-16); font-weight:640; }
.plan .p-amt { font-size:clamp(var(--fs-30), 3vw, var(--fs-38)); font-weight:680; letter-spacing:-.03em; line-height:1.05; font-variant-numeric:tabular-nums; white-space:nowrap; }
.plan .p-per { font-size:var(--fs-13); color:var(--muted); }
.plan ul { display:grid; gap:8px; margin-top:var(--sp-2); }
.plan li { display:grid; grid-template-columns:18px 1fr; gap:10px; align-items:start; font-size:var(--fs-14); color:var(--muted); }
.plan li .zw-i { color:var(--accent); margin-top:3px; }
.plan.best { border-color:var(--accent); box-shadow:var(--shadow-raised); }
.plan .p-top { display:flex; align-items:center; justify-content:space-between; gap:var(--sp-2); }
.price-note { margin-top:var(--sp-6); display:grid; gap:var(--sp-2); font-size:var(--fs-13); color:var(--muted); }

/* 45-Tage-Band */
.band { background:var(--surface-2); border-block:1px solid var(--line); }
.paths { display:grid; gap:var(--sp-4); margin-top:var(--sp-8); }
@media (min-width: 820px) { .paths { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.path { padding:var(--sp-6); display:grid; gap:var(--sp-3); align-content:start; background:var(--surface); }
.path > * { display:block; }
.path h3 { font-size:var(--fs-18); }
.path ul { display:grid; gap:8px; }
.path li { display:grid; grid-template-columns:18px 1fr; gap:10px; align-items:start; font-size:var(--fs-14); color:var(--muted); }
.path li .zw-i { color:var(--accent); margin-top:3px; }

/* Abschluss */
.close {
  position:relative; isolation:isolate; overflow:hidden;
  padding-block:var(--sp-24); color:#fff; text-align:center;
}
.close-bg { position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; }
.close::before { content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, rgba(8,13,11,.78), rgba(8,13,11,.88)); }
.close h2 { color:#fff; max-width:20ch; margin-inline:auto; }
.close p { margin-top:var(--sp-4); color:rgba(255,255,255,.86); max-width:52ch; margin-inline:auto; }
.close .btn.primary { background:#4fbf90; color:#06231a; border-color:transparent; }
@media (hover: hover) { .close .btn.primary:hover { background:#6bd0a5; } }
.close .cta2 { margin-top:var(--sp-8); display:flex; justify-content:center; }
.close .risk { margin-top:var(--sp-4); font-size:var(--fs-13); color:rgba(255,255,255,.74); }
.close :where(a, button):focus-visible { outline-color:#ffffff; }

/* Fußzeile */
footer.foot { padding-block:var(--sp-12); border-top:1px solid var(--line); }
.foot-in { display:flex; flex-wrap:wrap; gap:var(--sp-3) var(--sp-6); align-items:center; justify-content:space-between; font-size:var(--fs-13); color:var(--faint); }
.foot-in nav { display:flex; flex-wrap:wrap; gap:var(--sp-4); }
.foot-in nav a { color:var(--muted); text-decoration:none; }
@media (hover: hover) { .foot-in nav a:hover { color:var(--ink); text-decoration:underline; } }

/* --- Bewegung ------------------------------------------------------------- */
.reveal { opacity:0; transform:translateY(14px); transition:opacity var(--dur-max) var(--ease-out), transform var(--dur-max) var(--ease-out); }
.reveal.in { opacity:1; transform:none; }

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

/* --- Hilfsklassen (kein style-Attribut: die CSP der Seite verbietet es) ---- */
.push  { margin-inline-start: auto; }
.mt-2  { margin-top: var(--sp-2); }
.mt-3  { margin-top: var(--sp-3); }
.mt-4  { margin-top: var(--sp-4); }
.mt-12 { margin-top: var(--sp-12); }
.mb-0  { margin-bottom: 0; }

/* --- Vorrat: was ist noch da? ---------------------------------------------
   Der Abschnitt trägt das Futtermodul. Bewusst ohne Foto: wer hier Rezepte
   und Küche zeigt, verliert die Hälfte der Zielgruppe im ersten Bildschirm.
   -------------------------------------------------------------------------- */
.vorrat-grid { display:grid; gap:var(--sp-4); grid-template-columns:1fr; align-items:start; }
@media (min-width: 1024px) {
  .vorrat-grid { grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:var(--sp-6); }
}

.stock { padding:var(--sp-6); display:grid; gap:var(--sp-4); }
.stock > * { display:block; }

.stock-head { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--sp-3); }
.stock-id { display:grid; gap:2px; min-width:0; }
.stock-id > * { display:block; }
.stock-n { font-size:var(--fs-18); font-weight:620; letter-spacing:-.015em; }
.stock-c { font-size:var(--fs-12); color:var(--faint); font-family:var(--font-mono); }

.stock-amt { display:grid; gap:2px; }
.stock-amt > * { display:block; }
.stock-num {
  font-size:clamp(var(--fs-30), 4.4vw, var(--fs-48)); font-weight:680;
  letter-spacing:-.035em; line-height:1.02;
  font-variant-numeric:tabular-nums;
}
.stock-num .of { font-size:var(--fs-20); font-weight:600; color:var(--muted); letter-spacing:-.02em; white-space:nowrap; }
.stock-sub { font-size:var(--fs-13); color:var(--muted); }

.bar { height:10px; border-radius:var(--r-pill); background:var(--surface-3); overflow:hidden; }
.bar > span {
  display:block; height:100%; border-radius:var(--r-pill); background:var(--accent);
  transition:width var(--dur-panel) var(--ease-out), background-color var(--dur-ctl) var(--ease-out);
}
.stock[data-knapp="true"] .bar > span { background:var(--warn); }

.srows { display:grid; gap:var(--sp-3); padding-top:var(--sp-4); border-top:1px solid var(--line); }
.srow { display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:var(--sp-3); align-items:center; font-size:var(--fs-14); }
.srow .zw-i { color:var(--faint); }
.srow .k { color:var(--muted); }
.srow .v { font-weight:600; white-space:nowrap; font-variant-numeric:tabular-nums; }
.srow.lead-row .zw-i { color:var(--accent); }
.srow.lead-row .k { color:var(--ink); }
.srow.lead-row .v { color:var(--accent); }
.stock[data-knapp="true"] .srow.lead-row .zw-i,
.stock[data-knapp="true"] .srow.lead-row .v { color:var(--warn); }

.stock-note { font-size:var(--fs-12); line-height:1.5; color:var(--muted); }

/* Die zwei gleichrangigen Fälle — keiner darf nach Nebensache aussehen. */
.cases { display:grid; gap:var(--sp-4); align-content:start; }
.case { padding:var(--sp-6); display:grid; gap:var(--sp-3); }
.case > * { display:block; }
.case-k { font-size:var(--fs-12); font-weight:640; letter-spacing:.06em; text-transform:uppercase; color:var(--faint); }
.case h3 { font-size:var(--fs-18); }
.case p { font-size:var(--fs-14); color:var(--muted); }
.case ul { display:grid; gap:var(--sp-2); }
.case li { display:grid; grid-template-columns:18px minmax(0,1fr); gap:10px; align-items:start; font-size:var(--fs-14); color:var(--muted); }
.case li .zw-i { color:var(--accent); margin-top:3px; }
.case .out { font-size:var(--fs-13); font-weight:600; color:var(--ink); }

/* Die drei Wege zur eigenen Seite stehen im .proof-Raster, und das zieht
   die Karten auf gleiche Hoehe. Als Grid wuerde .case die gewonnene Hoehe
   auf alle Zeilen verteilen — der Text stuende in jeder Karte anders weit
   auseinander. Als Flex-Spalte bleibt er oben, und `margin-top:auto`
   schiebt die Schlusszeile nach unten: die drei Pfeile stehen auf einer
   Linie, so wie die Fussnoten im Beweisabschnitt. */
.proof > .case { display:flex; flex-direction:column; gap:var(--sp-3); }
.proof > .case .out { margin-top:auto; padding-top:var(--sp-2); }

.both {
  margin-top:var(--sp-6); padding:var(--sp-4) var(--sp-6);
  border:1px solid var(--accent-line); border-radius:var(--r-card); background:var(--accent-soft);
  font-size:var(--fs-16); color:var(--ink); text-align:center; text-wrap:balance;
}
.both strong { font-weight:640; }

/* --- Rechtstexte ----------------------------------------------------------- */
.legal { max-width:var(--measure); }
.legal h1 { margin-bottom:var(--sp-4); }
.legal h2 { font-size:var(--fs-20); letter-spacing:-.02em; margin-top:var(--sp-8); margin-bottom:var(--sp-2); }
.legal p { color:var(--muted); }
.legal p + p { margin-top:var(--sp-3); }
.legal a { color:var(--accent); }
.legal-note {
  margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4);
  border-left: 3px solid var(--accent-line); background: var(--surface-2);
  border-radius: var(--r-ctl); font-size: var(--fs-14); color: var(--muted);
}

/* --- Sprachumschalter ------------------------------------------------------ */
.langs { display: inline-flex; gap: var(--sp-1); flex: none; }
.langs .lang {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 36px; padding-inline: var(--sp-3);
  border-radius: var(--r-ctl); border: 1px solid transparent;
  font-size: var(--fs-13); font-weight: 560; line-height: 1;
  color: var(--muted); text-decoration: none;
}
@media (hover: hover) { .langs .lang:hover { color: var(--ink); background: var(--surface-2); } }
@media (pointer: coarse) { .langs .lang { min-height: 44px; } }
.foot-in .langs .lang { padding-inline: 0; min-height: 0; }
@media (hover: hover) { .foot-in .langs .lang:hover { background: none; text-decoration: underline; } }
@media (max-width: 560px) { .top-end .langs { display: none; } }

/* --- Kleine Seiten: 404 und Danke ------------------------------------------ */
.klein { max-width: 60ch; margin-inline: auto; text-align: center; }
.klein > * { display: block; }
.klein .k-code {
  font-size: var(--fs-12); font-weight: 640; letter-spacing: .08em;
  text-transform: uppercase; color: var(--accent);
}
.klein h1 { margin-top: var(--sp-3); }
.klein .k-lead { margin-top: var(--sp-4); font-size: var(--fs-18); color: var(--muted); text-wrap: balance; }
.klein .k-note { margin-top: var(--sp-8); font-size: var(--fs-13); color: var(--faint); }

.k-links { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; margin-top: var(--sp-8); }

/* Die zwei Punkte auf der Bestaetigungsseite.
   Eigene Regel statt .schritt: das ist das dreispaltige Pendant der
   Dankeseite und passt in einer 60ch-Spalte nicht. Ohne diese Regel erben
   die <h2> die Ueberschriftgroesse, und die Seite liest sich wie drei Titel
   untereinander — genau so stand sie vom 20.09.2026 bis heute live.
   Selektor bewusst zweiteilig (.klein .k-steps): `.klein > *` setzt seine
   Kinder auf display:block und hat dieselbe Spezifitaet wie `.k-steps`
   allein — dann entscheidet die Reihenfolge, und das ist keine Absicherung. */
.klein .k-steps {
  list-style: none; padding: var(--sp-8) 0 0; margin-top: var(--sp-8);
  border-top: 1px solid var(--line);
  display: grid; gap: var(--sp-6);
  max-width: 46ch; margin-inline: auto; text-align: start;
}
.klein .k-steps li { display: grid; gap: var(--sp-1); }
.klein .k-steps li > * { display: block; }
.klein .k-steps h2 { font-size: var(--fs-16); font-weight: 640; letter-spacing: -.01em; }
.klein .k-steps p { font-size: var(--fs-14); line-height: 1.6; color: var(--muted); }

.schritte { display: grid; gap: var(--sp-4); margin-top: var(--sp-12); text-align: start; }
@media (min-width: 820px) { .schritte { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.schritt { padding: var(--sp-6); display: grid; gap: var(--sp-2); align-content: start; }
.schritt > * { display: block; }
.schritt .s-n {
  width: 28px; height: 28px; border-radius: var(--r-pill);
  background: var(--accent-soft); color: var(--accent);
  font-size: var(--fs-13); font-weight: 680; line-height: 28px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.schritt h2 { font-size: var(--fs-18); letter-spacing: -.02em; margin-top: var(--sp-1); }
.schritt p { font-size: var(--fs-14); color: var(--muted); }

.k-cta { display: flex; justify-content: center; margin-top: var(--sp-12); }

/* --- Kontaktformular -------------------------------------------------------
   Das einzige Formular auf der ganzen Seite. Es steht in .klein, und das ist
   mittig gesetzt — ein Formular liest man aber links, sonst springt das Auge
   bei jedem Feld zurück. Deshalb hier zurückgedreht.

   Kein `appearance: none` auf dem Auswahlfeld: der eigene Pfeil bräuchte ein
   Hintergrundbild, und `img-src 'self'` lässt keine data:-URI zu. Das
   Systemfeld sieht je Browser etwas anders aus und funktioniert überall. */
.form { position: relative; text-align: start; margin-top: var(--sp-10); display: grid; gap: var(--sp-5); }
.form > * { display: block; }
.form-req { font-size: var(--fs-13); color: var(--faint); }

.feld { display: grid; gap: var(--sp-2); }
.feld > * { display: block; }
.feld label { font-size: var(--fs-14); font-weight: 640; color: var(--ink); }
.feld-hint { font-size: var(--fs-13); color: var(--faint); line-height: 1.55; }

.feld input, .feld select, .feld textarea {
  width: 100%; font: inherit; font-size: var(--fs-16); color: var(--ink);
  background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-input); padding: 12px 14px;
  transition: border-color var(--dur-ctl) var(--ease-out);
}
.feld textarea { resize: vertical; min-height: 9em; line-height: 1.6; }

/* Der Fokusring oben deckt a, button, summary und [tabindex] ab — Eingabe-
   felder stehen dort nicht drin und brauchen ihn hier. */
.feld input:focus-visible, .feld select:focus-visible, .feld textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent);
}

/* Der Honigtopf. Weggeblendet, aber nicht `display: none` — manche Skripte
   überspringen genau das und tappen sonst nicht hinein. Für einen Vorleser
   bleibt er erreichbar, und sein Label sagt im Klartext, dass er leer
   bleiben soll; deshalb kein aria-hidden über einem Eingabefeld. */
.form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-privacy { font-size: var(--fs-13); color: var(--muted); line-height: 1.6; }
.form-privacy a { color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.form .k-cta { margin-top: var(--sp-4); }
.form .k-cta .btn { width: 100%; }
@media (min-width: 560px) { .form .k-cta .btn { width: auto; min-width: 16rem; } }

/* =========================================================================
   Die Vergleichsseite (vergleich.html)
   =========================================================================
   Derselbe Block steht in beiden Marken, damit die zwei Stylesheets nicht
   auseinanderlaufen. Die Matrixregeln greifen nur bei Zuchtwerk — Stalltrak
   zeigt an derselben Stelle Modulbloecke, weil es dort drei Tarifspalten
   gibt und in fast jeder Zelle einen Haken. Ungenutzte Regeln sind der
   billigere Fehler als zwei Stylesheets, die sich langsam entfremden.
   Alle Farben kommen aus den Tokens, keine trägt ihren Wert selbst. */

.v-head { max-width: var(--measure); }
.v-head h1 { margin-block: var(--sp-2) var(--sp-4); }

/* Der Wechsel der Flaeche ersetzt eine Trennlinie: vier Schichten lesen
   sich als vier, ohne dass die Seite ein Gitter bekommt. */
.v-alt { background: var(--surface-2); border-block: 1px solid var(--line); }

/* Sockel und Zugaben: drei Spalten ab 900 px, zwei ab 620, sonst eine. */
.v-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
.v-b { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); }
.v-b h3 { font-size: var(--fs-18); }
.v-b p { font-size: var(--fs-14); line-height: 1.62; color: var(--muted); }

/* Die Zuschnittkarten. Der Tarifname steht oben und nicht unten: wer sich
   in der Ueberschrift wiedererkennt, liest den Rest ohnehin. */
.v-zug { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
.v-z { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); }
.v-z h3 { font-size: var(--fs-18); }
.v-z p { font-size: var(--fs-14); line-height: 1.62; color: var(--muted); }
.v-plan {
  align-self: start; font-size: var(--fs-12); font-weight: 640;
  letter-spacing: .04em; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--r-pill); padding: 2px var(--sp-3);
}

/* Die Modulbloecke von Stalltrak: zwei Spalten, volle Breite je Block. */
.v-mods { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; }
.v-mod { padding: var(--sp-6); display: flex; flex-direction: column; gap: var(--sp-2); }
.v-mod h3 { font-size: var(--fs-20); }
.v-mod p { font-size: var(--fs-14); line-height: 1.62; color: var(--muted); }

/* Der Kasten fuer die Grenze aus ADR-026 und fuer die Einzelfreischaltung.
   Kein Warnrot: es ist keine Fehlermeldung, sondern der Satz, den der Kunde
   vor dem Kauf lesen soll. Die Kante links traegt den Rang. */
.v-grenze {
  margin-top: var(--sp-8); padding: var(--sp-6);
  background: var(--surface); border: 1px solid var(--line);
  border-inline-start: 3px solid var(--accent-line);
  border-radius: var(--r-card); max-width: var(--measure);
}
.v-grenze h3 { font-size: var(--fs-16); font-weight: 640; margin-bottom: var(--sp-2); }
.v-grenze p { font-size: var(--fs-14); line-height: 1.7; color: var(--muted); }
.v-frei { border-inline-start-color: var(--accent); }

/* Fussnoten unter der Matrix. Klein, aber nicht versteckt — die Fundstelle
   gehoert dazu, sonst ist die Abschrift eine Behauptung. */
.v-note {
  margin-top: var(--sp-4); max-width: var(--measure);
  font-size: var(--fs-13); line-height: 1.65; color: var(--faint);
}
.v-note a { color: var(--accent); }

/* Was es bewusst nicht gibt. Keine Aufzaehlungspunkte, keine Kreuze: die
   Liste ist ein Verkaufsabschnitt und keine Mangelliste. */
.v-list { list-style: none; display: grid; gap: var(--sp-3); max-width: var(--measure); }
.v-list li {
  font-size: var(--fs-14); line-height: 1.65; color: var(--muted);
  padding-inline-start: var(--sp-6); position: relative;
}
.v-list li::before {
  content: "\2014"; position: absolute; inset-inline-start: 0;
  color: var(--faint); font-weight: 600;
}

.v-cta { max-width: var(--measure); }
.v-cta h2 { margin-bottom: var(--sp-3); }
.v-cta .lead { margin-bottom: var(--sp-6); }

/* ---- Die Matrix --------------------------------------------------------
   Unter 760 px wird aus jeder Zeile ein Block. Das ist dieselbe Tabelle mit
   anderen display-Werten und keine zweite Auszeichnung im HTML: zwei
   Fassungen desselben Inhalts laufen beim naechsten Umbau auseinander.
   Gestapelt wird deshalb je Modul und nicht je Paket — eine Tabelle laesst
   sich in CSS nicht kippen. Wer wissen will, was ER bekommt, liest eine
   Schicht darueber den Zuschnitt; hier steht, wer welches Modul hat. */
.v-matrix { width: 100%; border-collapse: collapse; }
.v-matrix th, .v-matrix td { text-align: start; vertical-align: top; }
.v-matrix thead th {
  font-size: var(--fs-12); font-weight: 640; letter-spacing: .04em;
  color: var(--faint); padding: 0 var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--line-strong);
}
.v-matrix thead th a { color: inherit; text-decoration: none; border-bottom: 1px dotted var(--line-strong); }
.v-matrix tbody th { padding: var(--sp-4) var(--sp-4) var(--sp-4) 0; font-weight: 400; }
.v-matrix tbody td { padding: var(--sp-4) var(--sp-2); }
.v-matrix tbody tr + tr th, .v-matrix tbody tr + tr td { border-top: 1px solid var(--line); }
.v-m-h { display: block; font-size: var(--fs-16); font-weight: 640; color: var(--ink); }
.v-m-p { display: block; margin-top: var(--sp-1); font-size: var(--fs-13); line-height: 1.6; color: var(--muted); }
/* Der Zustand steht immer auch im Wort (zw-sr), nie allein in Zeichen
   oder Farbe. */
.v-yes { color: var(--ok); font-weight: 700; }
.v-no { color: var(--faint); }

@media (min-width: 620px) {
  .v-grid, .v-zug, .v-mods { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 760px) {
  .v-matrix thead th { padding-inline: var(--sp-3); }
  .v-matrix tbody td { text-align: center; padding-inline: var(--sp-3); }
  .v-matrix tbody th { width: 42%; }
}
@media (min-width: 900px) {
  .v-grid, .v-zug { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Unter 760 px: ein Block je Modul. thead faellt weg, jede Zelle traegt
   ihren Spaltennamen selbst — er steht als data-p am td und nicht ein
   zweites Mal im Text. */
@media (max-width: 759.98px) {
  .v-matrix, .v-matrix tbody, .v-matrix tr, .v-matrix th, .v-matrix td { display: block; }
  .v-matrix thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .v-matrix tbody tr {
    background: var(--surface); border: 1px solid var(--line);
    border-radius: var(--r-card); padding: var(--sp-4);
  }
  .v-matrix tbody tr + tr { margin-top: var(--sp-4); border-top: 1px solid var(--line); }
  .v-matrix tbody th { padding: 0 0 var(--sp-3); width: auto; }
  .v-matrix tbody td {
    display: flex; align-items: baseline; justify-content: space-between;
    gap: var(--sp-4); padding: var(--sp-2) 0; border-top: 1px solid var(--line);
  }
  .v-matrix tbody tr + tr td { border-top: 1px solid var(--line); }
  .v-matrix tbody td::before {
    content: attr(data-p); font-size: var(--fs-13); color: var(--muted);
  }
}

/* Die Zugangszeile auf der Demoseite. Eigene Regel, weil sie in einer
   Fliesstextspalte sonst wie ein Satz aussieht und nicht wie etwas, das man
   abtippt. Kein <code>: der Anmeldename ist kein Programmtext. */
.klein .zug {
  margin-top: var(--sp-3); font-size: var(--fs-14); color: var(--muted);
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--r-input); padding: var(--sp-2) var(--sp-4);
}
.klein .zug b { color: var(--ink); font-weight: 640; }

/* Die Demostaende. Bewusst immer eine Spalte: .klein ist 60ch breit, und
   zwei Karten darin waeren zwei schmale Streifen. Keine Fensterbreite, bei
   der eine Karte allein stehen bleibt. */
.staende { display: grid; gap: var(--sp-4); margin-top: var(--sp-8); text-align: start; }

/* Zwischenueberschrift auf einer kleinen Seite. Ohne eigene Regel erbt ein
   <h2> die Groesse aus dem Grundstil und liest sich wie eine zweite h1 —
   derselbe Fehler, der .k-steps noetig gemacht hat. */
.klein .k-h2 {
  margin-top: var(--sp-12); font-size: var(--fs-18); font-weight: 640;
  letter-spacing: -.02em;
}

/* Das Paket unter dem Kartennamen auf der Demoseite. Zweiteiliger Selektor,
   weil .klein > * dieselbe Spezifitaet haette wie .k-plan allein — dann
   entschiede die Reihenfolge im Stylesheet und nicht die Absicht. */
.klein .k-plan {
  margin-top: var(--sp-1);
  font-size: var(--fs-14);
  color: var(--muted);
}
.klein .k-plan b { color: var(--ink); font-weight: 640; }