/* ==========================================================================
   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; }
.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; }
}
@media (max-width: 900px) {
  .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: 901px) { .nav .nav-cta { display:none; } }

/* --- 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); }

.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); }

.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); }

/* ==========================================================================
   MARKENSCHICHT STALLTRAK
   Identisch mit docs/ci-marke.css. Die Seite setzt data-marke="stalltrak"
   am <html>; nur die Akzentfamilie wechselt, Grund und Schrift bleiben.
   Sattelleder statt Pinie — damit man ohne Logo sieht, welche Marke das ist.
   ========================================================================== */
[data-marke="stalltrak"] {
  --accent:       #7d4a1e;   /*  7.32:1 auf #ffffff  */
  --accent-hover: #653b16;
  --accent-soft:  #f4ece2;
  --accent-line:  #ddc6ab;
  --on-accent:    #ffffff;
  --viz-1: #7d4a1e; --viz-2: #3f6f8f; --viz-3: #4a6b3a;
}
[data-marke="stalltrak"][data-theme="dark"] {
  --accent:       #dfa06a;   /*  8.51:1 auf #0e1012  */
  --accent-hover: #e8b088;
  --accent-soft:  rgba(223,160,106,.14);
  --accent-line:  rgba(223,160,106,.34);
  --on-accent:    #2a1408;
  --viz-1: #dfa06a; --viz-2: #6fb2ef; --viz-3: #8fc48a;
}
@media (prefers-color-scheme: dark) {
  [data-marke="stalltrak"]:not([data-theme="light"]) {
    --accent:       #dfa06a;
    --accent-hover: #e8b088;
    --accent-soft:  rgba(223,160,106,.14);
    --accent-line:  rgba(223,160,106,.34);
    --on-accent:    #2a1408;
    --viz-1: #dfa06a; --viz-2: #6fb2ef; --viz-3: #8fc48a;
  }
}
/* Der Hero-Knopf und der Abschluss tragen bei Zuchtwerk das Pinien-Grün fest
   im Regelwerk — hier die Lederfassung. */
[data-marke="stalltrak"] .hero .btn.primary,
[data-marke="stalltrak"] .close .btn.primary { background:#dfa06a; color:#2a1408; }
@media (hover: hover) {
  [data-marke="stalltrak"] .hero .btn.primary:hover,
  [data-marke="stalltrak"] .close .btn.primary:hover { background:#e8b088; }
}

/* Wortmarke ohne Bildzeichen — der Platz dafür ist reserviert, nicht gefüllt. */
.brand.wort { font-size: var(--fs-18); letter-spacing: -.02em; }
.brand.wort span { font-weight: 660; }