/* ════════════════════════════════════════════════════════════════════════════
   welt.css: die Gestaltung des Shops (Aufgabe 1.6, Gerüst §7).

   Kombi 2028-1 «Lebende Wiese» + 2028-5 «Mein Garten zuerst»
   (docs/design-vorschlaege/2028-kombi/README.md). Grundlage ist 2028-1:
   Morgenwiese statt Creme, Rasengrün als einziger Akzent, Berg-Grün für Marke
   und Fuss. Hell ist die Gestaltung für alle (auch bei dunklem System);
   dunkel nur nach Wahl im Kopf (data-thema="dunkel" an <html>). Im dunklen Schema
   werden die Token neu gesetzt, nicht invertiert. Jedes Token ist ein
   Hex-Wert ohne var(); test/welt-css.test.mjs liest die zwei Blöcke und prüft
   die Kontraste.

   Schriften stehen hier mit Kurznamen (/schrift/hanken-latin-1f21c6eaa0.woff2);
   api/_dateien.js setzt beim Laden den Namen mit Prüfwert ein.

   Komponenten und ihr HTML-Vertrag stehen in Plan 1, Aufgabe 1.6. Seiten
   ergänzen eigene Klassen am Ende unter «Seiten», nie als <style> im Dokument.
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Schrift ──────────────────────────────────────────────────────────────── */
/* Eine Familie: Hanken Grotesk, variabel 100–900, selbst gehostet. Titel 700
   mit enger Laufweite, Text 400. «Hanken Ersatz» ist Arial mit den Massen der
   Webschrift (aus der Datei gerechnet), damit beim Tausch nichts springt. */
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/schrift/hanken-latin-1f21c6eaa0.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Hanken Grotesk";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(/schrift/hanken-latin-ext-a1376a5637.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Hanken Ersatz";
  src: local("Arial"), local("ArialMT"), local("Helvetica");
  size-adjust: 102.68%; ascent-override: 97.39%; descent-override: 29.51%; line-gap-override: 0%;
}

/* ── Farben, hell ─────────────────────────────────────────────────────────── */
/* Morgenwiese: kühles Weissgrün als Grund, Rasengrün als Akzent. --rasen ist
   Fläche und Grafik, nie Schrift (3.2:1). --rasen-a/-b sind die zwei Töne der
   gemähten Streifen, --himmel der Dunst am Horizont des Helds. --warn-* bleibt
   bernsteinfarben: Das ist der Zustand «auf Bestellung», kein Akzent. */
:root {
  color-scheme: light;
  --berg: #143d2e;
  --berg-2: #1d5740;
  --berg-3: #e8f0e9;
  --linie: #dbe4d5;
  --rasen: #4f9a3c;
  --rasen-tief: #357a28;
  --rasen-hell: #e2efd6;
  --rasen-a: #6aa64e;
  --rasen-b: #4d8b38;
  --himmel: #d6e3cb;
  --text: #121a16;
  --text-2: #45514b;
  --text-3: #5b6660;
  --papier: #f6f8f2;
  --papier-2: #edf2e7;
  --rot: #d8232a;
  --karte: #ffffff;
  --ton: #e8f0e1;
  --rahmen: #7a8680;
  --link: #1d5740;
  --kopf: #143d2e;
  --kopf-text: #ffffff;
  --kopf-text-2: #cfe0d6;
  --fokus: #1d5740;
  --fokus-kopf: #8ccf74;
  --haupt: #357a28;
  --haupt-hover: #2c6a21;
  --haupt-text: #ffffff;
  --gut-text: #1d5740;
  --gut-grund: #e2efd6;
  --warn-text: #6b4b00;
  --warn-grund: #fff2c2;
  --schlecht-text: #a3161c;
  --schlecht-grund: #fbe7e7;
  --fehler-text: #b3141b;
  --band-text: #121a16;
  --band-grund: #e2efd6;
  --strich: #143d2e;
  --wiese: #dcebcb;
  --wiese-2: #c2daab;
  --lichtung: #e7f1dc;
  --pille: #ffffff;
  --pille-aktiv: #e2efd6;
}

/* ── Farben, dunkel ───────────────────────────────────────────────────────── */
/* Wiese am Abend: tiefes Grün statt Schwarz. Knöpfe hellgrün mit dunkler
   Schrift, Flächen in tiefem Grün mit heller Schrift. */
:root[data-thema="dunkel"] {
  color-scheme: dark;
  --berg: #10291f;
  --berg-2: #8fd1ad;
  --berg-3: #15291f;
  --linie: #24392c;
  --rasen: #6dbb57;
  --rasen-tief: #8ccf74;
  --rasen-hell: #1c3925;
  --rasen-a: #2a5a31;
  --rasen-b: #1f4826;
  --himmel: #16281d;
  --text: #eef2ec;
  --text-2: #c2ccc5;
  --text-3: #9ca8a1;
  --papier: #0c1611;
  --papier-2: #122019;
  --rot: #ff6b6b;
  --karte: #14221a;
  --ton: #16291f;
  --rahmen: #6f7c76;
  --link: #9bdcb8;
  --kopf: #08100c;
  --kopf-text: #ffffff;
  --kopf-text-2: #b9cdc2;
  --fokus: #8ccf74;
  --fokus-kopf: #8ccf74;
  --haupt: #8ccf74;
  --haupt-hover: #a2db8d;
  --haupt-text: #0f1a12;
  --gut-text: #9bdcb8;
  --gut-grund: #16291f;
  --warn-text: #ffd466;
  --warn-grund: #3b2f05;
  --schlecht-text: #ff9b9b;
  --schlecht-grund: #3a1717;
  --fehler-text: #ff9b9b;
  --band-text: #eef2ec;
  --band-grund: #1c3925;
  --strich: #a9dcbf;
  --wiese: #1f3d29;
  --wiese-2: #2b5638;
  --lichtung: #1a2d22;
  --pille: #14221a;
  --pille-aktiv: #1c3925;
}

/* ── Masse, Schriftgrade, Kurven ──────────────────────────────────────────── */
/* Radien: Karten und Tafeln 20 px, Felder 12 px, alles Drückbare als Pille. */
:root {
  --schrift: "Hanken Grotesk", "Hanken Ersatz", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --schrift-titel: var(--schrift);
  --gr-klein: 0.875rem;
  --gr-text: 1.0625rem;
  --gr-h3: 1.3125rem;
  --gr-h2: clamp(1.625rem, 1.2rem + 1.6vw, 2.75rem);
  --gr-h1: clamp(2.125rem, 1.4rem + 2.6vw, 3.5rem);
  --gr-gross: clamp(2.25rem, 0.95rem + 4vw, 4.5rem);
  --rand: clamp(1rem, 4vw, 2.5rem);
  --breite: 78rem;
  --radius: 20px;
  --radius-klein: 12px;
  --radius-gross: 28px;
  --schatten: 0 1px 2px rgba(18, 52, 32, 0.06), 0 18px 40px -16px rgba(18, 52, 32, 0.22);
  --dauer: 180ms;
  --federn: cubic-bezier(0.23, 1, 0.32, 1);
  --gleiten: cubic-bezier(0.77, 0, 0.175, 1);
}

/* ── Grundlage ────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--text);
  font: 400 var(--gr-text)/1.6 var(--schrift);
  font-kerning: normal;
  overflow-wrap: break-word;
  overflow-x: clip;
  /* Kurze Seiten (Warenkorb leer, 404): der Fuss steht unten, nicht mitten im Bild. */
  display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh;
}
body > main { flex: 1 0 auto; }
img, svg, video { display: block; max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0 0 0.5em; font-family: var(--schrift-titel); font-weight: 700; line-height: 1.1; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: var(--gr-h1); letter-spacing: -0.035em; line-height: 1.02; }
h2 { font-size: var(--gr-h2); letter-spacing: -0.03em; }
h3 { font-size: var(--gr-h3); }
h4 { font-size: var(--gr-text); }
p, ul, ol, dl, figure { margin: 0 0 1rem; }
p { text-wrap: pretty; }
a { color: var(--link); text-decoration-thickness: 1px; text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }
small, .klein { font-size: var(--gr-klein); }
strong, b { font-weight: 650; }
hr { margin: 2rem 0; border: 0; border-top: 1px solid var(--linie); }
::selection { background: var(--rasen-hell); color: var(--text); }
html { scrollbar-color: var(--rahmen) var(--papier-2); }
input, textarea { caret-color: var(--link); }
td, .zahl, .preis { font-variant-numeric: tabular-nums; }

/* ── Fokus, Sprunglink, versteckter Text ─────────────────────────────────── */
:focus-visible { outline: 3px solid var(--fokus); outline-offset: 2px; border-radius: 4px; }
.fuss :focus-visible { outline-color: var(--fokus-kopf); }
#inhalt:focus { outline: none; }
.sprung {
  position: absolute; left: var(--rand); top: -6rem; z-index: 20;
  padding: 0.6rem 1.1rem; border-radius: 999px;
  background: var(--haupt); color: var(--haupt-text); font-weight: 700; text-decoration: none;
}
.sprung:focus { top: 0.5rem; }
.visuell-versteckt {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ── Raster ───────────────────────────────────────────────────────────────── */
.breite { width: 100%; max-width: var(--breite); margin-inline: auto; padding-inline: var(--rand); }
.abschnitt { padding-block: clamp(3rem, 7vw, 6rem); }
.abschnitt-ton { background: var(--ton); }
.seitenkopf { padding-block: clamp(1.5rem, 4vw, 3rem) 0.5rem; }
/* Direkt unter dem Seitenkopf hält ein Abschnitt nur Abstand zum Titel, nicht
   den vollen Abschnittsabstand (sonst klafft über Tabelle und leerem Korb ein Loch). */
.seitenkopf + .abschnitt { padding-top: clamp(1.25rem, 3vw, 2.25rem); }
.einleitung { max-width: 60ch; font-size: 1.1875rem; color: var(--text-2); }
.spalten { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 56rem) {
  .spalten { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: start; }
}

/* ── Zeichnungen (Strichzeichnungen aus _produktteile.js, Übersicht) ──────── */
.zeichnung { width: 100%; height: auto; overflow: visible; }
.zeichnung .il-l { fill: none; stroke: var(--strich); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.zeichnung .il-f { fill: var(--wiese); }
.zeichnung .il-f2 { fill: var(--wiese-2); }
.zeichnung .il-a { fill: var(--rasen); }
.zeichnung .il-p { fill: var(--papier); }
.zeichnung .il-a-linie { fill: none; stroke: var(--rasen); stroke-width: 6; stroke-linecap: round; }
.zeichnung .il-spur { fill: none; stroke: var(--strich); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 2 11; opacity: 0.7; }
.zeichnung .il-signal { stroke: var(--rasen); stroke-width: 4; }

/* ── Hinweisband (shop_offen = 0) ─────────────────────────────────────────── */
.band { background: var(--band-grund); color: var(--band-text); }
.band p { max-width: var(--breite); margin: 0 auto; padding: 0.6rem var(--rand); font-size: var(--gr-klein); font-weight: 600; }

/* ── Kopf ─────────────────────────────────────────────────────────────────── */
/* Hell und ruhig, Navigation als Textreihe mit einer Mähspur unter dem
   aktiven Punkt statt Pillen. */
.kopf { position: relative; z-index: 5; background: var(--papier); color: var(--text); }
.kopf a { color: var(--text); }
.kopf-oben { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.25rem; padding-block: 0.9rem 0.25rem; }
.marke { display: inline-flex; align-items: center; gap: 0.75rem; min-height: 44px; margin-right: auto; text-decoration: none; }
.marke img { width: 42px; height: 42px; border-radius: 12px; }
.marke-text { display: flex; flex-direction: column; line-height: 1.15; }
.marke-name { font-size: 1.1875rem; font-weight: 750; letter-spacing: -0.025em; color: var(--strich); }
.marke-zeile { font-size: 0.8125rem; color: var(--text-2); }
.kopf-werkzeuge { display: flex; align-items: center; gap: 0.75rem; }
.sprachwahl { display: inline-flex; gap: 0.125rem; padding: 0.2rem; border-radius: 999px; background: var(--papier-2); }
.sprachwahl a {
  display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 40px; padding: 0 0.5rem;
  border-radius: 999px; color: var(--text-2);
  font-size: var(--gr-klein); font-weight: 650; letter-spacing: 0.03em; text-decoration: none;
  transition: background-color var(--dauer) ease, color var(--dauer) ease;
}
.sprachwahl a:hover { color: var(--text); background: var(--pille); }
.sprachwahl a[aria-current="page"] { color: var(--haupt-text); background: var(--haupt); }
/* Wahl der dunklen Ansicht: ein kleiner runder Knopf vor der Sprachwahl. */
.thema-knopf {
  display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0;
  border: 0; border-radius: 999px; background: var(--papier-2); color: var(--text-2); cursor: pointer;
  transition: background-color var(--dauer) ease, color var(--dauer) ease, transform 160ms var(--federn);
}
.thema-knopf[hidden] { display: none; }
.thema-knopf svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.thema-knopf:hover { background: var(--pille-aktiv); color: var(--text); }
.thema-knopf:active { transform: scale(0.94); }
.thema-knopf[aria-pressed="true"] { background: var(--haupt); color: var(--haupt-text); }
.thema-knopf[aria-pressed="true"] svg { fill: currentColor; }
.korb-link {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0 1.15rem;
  border: 1.5px solid var(--berg); border-radius: 999px; font-weight: 650; text-decoration: none;
  transition: background-color var(--dauer) ease, transform 160ms var(--federn);
}
.kopf .korb-link { color: var(--link); border-color: var(--link); }
.korb-link:hover { background: var(--ton); }
.korb-link:active { transform: scale(0.97); }
.hauptnav ul { display: flex; gap: 0.15rem 1.35rem; margin: 0 auto; padding-block: 0.15rem 0.6rem; list-style: none; overflow-x: auto; scrollbar-width: none; }
/* Schmal rollt die Navigation seitwärts. Der rechte Rand blendet aus, damit
   man sieht, dass es weitergeht; der Abstand am Ende lässt den letzten Punkt
   ganz aus dem Verlauf herausrollen. */
@media (max-width: 75rem) {
  .hauptnav ul { padding-inline-end: 2.5rem; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 2.5rem), transparent); }
}
.hauptnav a {
  position: relative; display: block; padding: 0.55rem 0; white-space: nowrap;
  color: var(--text-2); font-size: 0.9375rem; font-weight: 550; text-decoration: none;
  transition: color var(--dauer) ease;
}
.hauptnav a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0.2rem; height: 3px; border-radius: 3px;
  background: repeating-linear-gradient(90deg, var(--rasen) 0 6px, var(--rasen-tief) 6px 12px);
  transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--federn);
}
.hauptnav a:hover { color: var(--text); }
.hauptnav a:hover::after { transform: scaleX(0.4); }
.hauptnav a[aria-current] { color: var(--text); }
.hauptnav a[aria-current]::after { transform: scaleX(1); }
.hauptnav a:focus-visible { outline-offset: 2px; }
@media (max-width: 30rem) {
  .marke-zeile { display: none; }
  .kopf-oben { gap: 0.5rem; padding-top: 0.7rem; }
  .marke { gap: 0.55rem; }
  .marke img { width: 36px; height: 36px; border-radius: 10px; }
  .marke-name { font-size: 1rem; }
  .sprachwahl a { min-width: 34px; min-height: 36px; padding: 0 0.35rem; font-size: 0.8125rem; }
  .korb-link { min-height: 40px; padding: 0 0.8rem; font-size: 0.9375rem; }
  .thema-knopf { width: 44px; height: 44px; }
}

/* ── Brotkrumen ───────────────────────────────────────────────────────────── */
.brotkrumen { padding-top: 1.1rem; font-size: var(--gr-klein); color: var(--text-2); }
.brotkrumen ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; margin: 0; padding: 0; list-style: none; }
.brotkrumen li + li::before { content: "›"; content: "›" / ""; margin-right: 0.5rem; color: var(--text-3); }
.brotkrumen a { color: var(--text-2); }
.brotkrumen [aria-current="page"] { color: var(--text); }

/* ── Knöpfe ───────────────────────────────────────────────────────────────── */
.knopf {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  min-height: 48px; padding: 0.7rem 1.4rem; border: 2px solid var(--link); border-radius: 999px;
  background: transparent; color: var(--link); font: 650 1rem/1.2 var(--schrift); text-decoration: none; cursor: pointer;
  transition: background-color var(--dauer) ease, border-color var(--dauer) ease, transform var(--dauer) var(--federn), box-shadow var(--dauer) ease;
}
.knopf:hover { background: var(--ton); }
.knopf:active { transform: scale(0.97); }
.knopf-haupt { border-color: var(--haupt); background: var(--haupt); color: var(--haupt-text); box-shadow: 0 6px 16px -8px rgba(31, 84, 26, 0.55); }
.knopf-haupt:hover { border-color: var(--haupt-hover); background: var(--haupt-hover); }
.knopf-leise { border-color: transparent; }
.knopf-breit { width: 100%; }
.knopf[disabled], .knopf[aria-disabled="true"] { opacity: 0.55; cursor: not-allowed; transform: none; }

/* ── Formulare ────────────────────────────────────────────────────────────── */
.formular { display: grid; gap: 1rem; max-width: 40rem; }
.feld { display: grid; gap: 0.35rem; }
.feld > label, .feld-titel { font-weight: 700; }
.feld-hilfe { margin: 0; font-size: var(--gr-klein); color: var(--text-2); }
.feld-fehler { margin: 0; font-size: var(--gr-klein); font-weight: 700; color: var(--fehler-text); }
input:not([type="checkbox"]):not([type="radio"]), select, textarea {
  width: 100%; min-height: 48px; padding: 0.65rem 0.9rem;
  border: 1.5px solid var(--rahmen); border-radius: var(--radius-klein);
  background: var(--karte); color: var(--text); font: inherit;
}
textarea { min-height: 7rem; resize: vertical; }
input:not([type="checkbox"]):not([type="radio"]):focus-visible, select:focus-visible, textarea:focus-visible { outline-offset: 0; border-color: var(--fokus); }
[aria-invalid="true"] { border-color: var(--rot) !important; border-width: 2px !important; }
input[type="checkbox"], input[type="radio"] { flex: none; width: 1.3rem; height: 1.3rem; margin: 0.15rem 0 0; accent-color: var(--link); }
.wahl { display: flex; align-items: flex-start; gap: 0.7rem; min-height: 44px; padding: 0.65rem 0.85rem; border-radius: var(--radius-klein); background: var(--ton); cursor: pointer; }
fieldset { margin: 0; padding: 1rem 1.25rem 1.25rem; border: 1px solid var(--linie); border-radius: var(--radius); }
legend { padding: 0 0.35rem; font-weight: 700; }
.fehlerliste { margin: 0 0 1.5rem; padding: 1rem 1.25rem; border: 2px solid var(--rot); border-radius: var(--radius-klein); background: var(--schlecht-grund); color: var(--text); }
.fehlerliste a { color: var(--fehler-text); font-weight: 700; }

/* Mengenfeld: ohne Skript das Zahlenfeld des Browsers, mit Skript − und + */
.menge { display: inline-flex; align-items: stretch; }
.menge input[type="number"] { width: 4.5rem; text-align: center; }
.menge[data-menge-bereit] input[type="number"] { border-radius: 0; -moz-appearance: textfield; appearance: textfield; }
.menge[data-menge-bereit] input::-webkit-outer-spin-button,
.menge[data-menge-bereit] input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.menge-knopf {
  min-width: 48px; min-height: 48px; border: 1.5px solid var(--rahmen);
  background: var(--karte); color: var(--text); font: 700 1.25rem/1 var(--schrift); cursor: pointer;
}
.menge-knopf:first-child { border-right: 0; border-radius: 999px 0 0 999px; }
.menge-knopf:last-child { border-left: 0; border-radius: 0 999px 999px 0; }


/* ── Produktkarte ─────────────────────────────────────────────────────────── */
/* Mit Maus neigt sich die Karte zum Zeiger und fängt Licht (welt.js setzt
   transform und --licht-x/-y direkt am Element). Ohne Skript: leichtes Heben. */
.karten { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16.5rem), 1fr)); gap: clamp(1rem, 2vw, 1.5rem); margin: 0 0 2rem; padding: 0; list-style: none; }
.karte {
  position: relative; isolation: isolate;
  display: flex; flex-direction: column; height: 100%; overflow: hidden;
  border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); color: var(--text); text-decoration: none;
  transition: border-color var(--dauer) ease, box-shadow 320ms var(--federn), transform 320ms var(--federn);
}
.karte::after {
  content: ""; position: absolute; inset: 0; z-index: 2; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at var(--licht-x, 50%) var(--licht-y, 0%), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 52%);
  opacity: 0; transition: opacity 320ms var(--federn);
  mix-blend-mode: soft-light;
}
.karte:hover { border-color: var(--rasen); }
@media (hover: hover) and (pointer: fine) {
  /* Eigene Ebene nur, wo welt.js die Karte neigt (feiner Zeiger), nicht für jede Karte auf dem Handy. */
  .karte { will-change: transform; }
  .karte:hover { box-shadow: var(--schatten); }
  .karte:hover::after { opacity: 1; }
  }
.karte:active { transform: scale(0.985); }
.karte-bild { display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; background: radial-gradient(120% 90% at 50% 100%, var(--wiese) 0%, var(--papier-2) 70%); }
.karte-bild img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--federn); }
.karte:hover .karte-bild img { transform: scale(1.04); }
.karte-text { display: flex; flex: 1; flex-direction: column; gap: 0.35rem; padding: 1.05rem 1.15rem 1.15rem; }
.karte-name { margin: 0; font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.karte-kurz { margin: 0; font-size: var(--gr-klein); color: var(--text-2); }
.karte-flaeche { width: fit-content; margin-top: 0.3rem; padding: 0.15rem 0.65rem; border-radius: 999px; background: var(--ton); color: var(--text); font-weight: 650; }
.karte-fuss { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: auto; padding-top: 0.85rem; }
.karte .preis { font-size: 1.3125rem; }
@media (hover: none) { .karte::after { display: none; } }

/* ── Preisblock und Verfügbarkeit ─────────────────────────────────────────── */
.preisblock {
  display: grid; gap: 0.75rem; padding: 1.5rem 1.5rem 1.6rem;
  border: 1px solid var(--linie); border-radius: var(--radius-gross); background: var(--karte); box-shadow: var(--schatten);
}
.preis { color: var(--text); font-family: var(--schrift-titel); font-weight: 750; letter-spacing: -0.03em; }
.preisblock .preis { font-size: var(--gr-h1); line-height: 1.05; }
.mwst, .lieferfrist, .rueckgabe { margin: 0; font-size: var(--gr-klein); color: var(--text-2); }
.preisblock form { display: grid; gap: 0.75rem; margin-top: 0.25rem; padding-top: 1rem; border-top: 2px dashed var(--linie); }
.verfuegbar {
  display: inline-flex; align-items: center; gap: 0.45rem; width: fit-content; padding: 0.25rem 0.75rem; border-radius: 999px;
  background: var(--gut-grund); color: var(--gut-text); font-size: var(--gr-klein); font-weight: 700;
}
.verfuegbar::before { content: ""; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: currentColor; }
.verfuegbar[data-status="auf_bestellung"] { background: var(--warn-grund); color: var(--warn-text); }
.verfuegbar[data-status="nicht_lieferbar"] { background: var(--schlecht-grund); color: var(--schlecht-text); }

/* ── Datentabelle mit Quellen ─────────────────────────────────────────────── */
/* Zeilen im Wechsel getönt statt Linie unter jeder Zeile. */
.tabelle-rahmen { position: relative; margin: 0 0 1.5rem; overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); }
/* Rollt die Tabelle seitwärts, blendet der rechte Rand aus, bis man am Ende
   ist (scroll-getrieben, ohne Skript). Ohne Überlauf ruht die Zeitleiste,
   --rest bleibt 0 und nichts blendet aus. */
@property --rest { syntax: "<length>"; inherits: false; initial-value: 0px; }
@supports (animation-timeline: scroll()) {
  .tabelle-rahmen {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - var(--rest)), rgba(0, 0, 0, 0.12));
    mask-image: linear-gradient(90deg, #000 calc(100% - var(--rest)), rgba(0, 0, 0, 0.12));
    animation: rand-rest linear both; animation-timeline: scroll(self inline);
  }
  @media (prefers-reduced-motion: reduce) { .tabelle-rahmen { animation-duration: auto !important; } }
}
@keyframes rand-rest { from { --rest: 3.5rem; } 92% { --rest: 3.5rem; } to { --rest: 0px; } }
.datentabelle { width: 100%; margin: 0; border-collapse: collapse; font-size: 0.9375rem; }
.datentabelle caption { padding: 0.9rem 1.1rem 0.4rem; text-align: left; font-weight: 700; }
.datentabelle th, .datentabelle td { padding: 0.7rem 1.1rem; text-align: left; vertical-align: top; }
.datentabelle tbody tr:nth-child(even) > * { background: var(--papier); }
.datentabelle thead th { background: var(--ton); color: var(--text); font-weight: 700; }
.datentabelle tbody th { width: 45%; color: var(--text-2); font-weight: 600; }
.datentabelle.vergleich tbody th { position: sticky; left: 0; z-index: 1; width: auto; min-width: 11rem; background: var(--karte); box-shadow: 1px 0 0 var(--linie); }
/* Die klebende erste Spalte trägt dieselbe Tönung wie ihre Zeile. */
.datentabelle.vergleich tbody tr:nth-child(even) > th { background: var(--papier); }
/* Kopf und Werte brechen nicht in Wortsplitter: Jede Spalte bekommt eine
   Mindestbreite (Zahl und Einheit hält schon &nbsp; zusammen). Die Tabelle rollt. */
.datentabelle.vergleich thead th { min-width: 8.5rem; vertical-align: bottom; line-height: 1.3; }
.datentabelle.vergleich thead th:first-child { position: sticky; left: 0; z-index: 2; box-shadow: 1px 0 0 var(--linie); }
.datentabelle.vergleich td { min-width: 9rem; }
/* «Quelle» steht in jeder Zelle gleich unter dem Wert, nicht mal daneben, mal darunter. */
.datentabelle.vergleich td .quelle { display: block; width: fit-content; margin: 0.1rem 0 0; padding: 0.15rem 0; }
@media (max-width: 40rem) {
  .datentabelle.vergleich tbody th { min-width: 8.5rem; max-width: 9.5rem; }
}
.quelle { display: inline-block; margin-left: 0.35rem; padding: 0.2rem; color: var(--text-3); font-size: 0.75rem; white-space: nowrap; }
.quelle:hover { color: var(--link); }
.tabelle-hinweis { font-size: var(--gr-klein); color: var(--text-2); }

/* ── PLZ-Prüfer ───────────────────────────────────────────────────────────── */
.plz-pruefer { display: grid; gap: 0.6rem; max-width: 34rem; margin: 0 0 1.5rem; padding: 1.4rem; border-radius: var(--radius); background: var(--ton); }
.plz-zeile { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.5rem; }
.plz-zeile .feld { flex: 0 1 9rem; }
.plz-zeile input, .plz-zeile .knopf { height: 3.25rem; min-height: 0; }
.plz-ergebnis { min-height: 1.6em; font-weight: 700; }
.plz-ergebnis p { margin: 0; }
.plz-quelle { margin: 0; font-size: 0.8125rem; color: var(--text-2); }


/* ── Hinweis, Galerie, Rechner, Text ──────────────────────────────────────── */
.hinweis { margin: 0 0 1.5rem; padding: 1.1rem 1.35rem; border-radius: var(--radius); background: var(--ton); }
.hinweis > :last-child { margin-bottom: 0; }
.galerie { display: grid; gap: 0.75rem; margin: 0 0 1.5rem; }
.galerie-haupt { aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius-gross); background: var(--wiese); }
.galerie-haupt img { width: 100%; height: 100%; object-fit: cover; }
.galerie-reihe { display: flex; gap: 0.6rem; margin: 0; padding: 0 0 0.25rem; overflow-x: auto; list-style: none; scroll-snap-type: x mandatory; }
.galerie-reihe li { flex: 0 0 5.5rem; scroll-snap-align: start; }
.galerie-reihe a { display: block; border-radius: var(--radius-klein); }
.galerie-reihe img { aspect-ratio: 1; object-fit: cover; border: 2px solid var(--linie); border-radius: var(--radius-klein); background: var(--karte); transition: border-color var(--dauer) ease; }
.galerie-reihe a:hover img { border-color: var(--rasen); }
.drei-d[hidden] { display: none; }
/* Rechner: zwei Zahlenfelder nebeneinander, darunter Mobilfunk als Pillen-Reihe,
   dann Bäume und der Knopf. Jede Zeile beginnt an derselben Kante. */
.rechner { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 1.5rem 1.75rem; max-width: 50rem; margin: 0 0 2rem; padding: clamp(1.25rem, 3vw, 2rem); border-radius: var(--radius); background: var(--ton); }
.rechner > fieldset, .rechner > .wahl, .rechner > button { grid-column: 1 / -1; }
.rechner > fieldset { display: flex; flex-wrap: wrap; gap: 0.6rem; padding: 0; border: 0; }
.rechner > fieldset > legend { float: left; width: 100%; margin: 0 0 0.6rem; padding: 0; }
.rechner > fieldset .wahl { align-items: center; padding: 0.55rem 1.1rem 0.55rem 0.85rem; border: 1.5px solid var(--rahmen); border-radius: 999px; background: var(--karte); }
.rechner > fieldset .wahl:has(input:checked) { border-color: var(--haupt); background: var(--rasen-hell); }
.rechner > fieldset input, .rechner > .wahl input { margin: 0; }
.rechner > .wahl { align-items: center; justify-self: start; padding: 0.55rem 1.1rem 0.55rem 0.85rem; border: 1.5px solid var(--rahmen); border-radius: var(--radius-klein); background: var(--karte); }
.rechner > button { justify-self: start; }
@media (max-width: 40rem) { .rechner { grid-template-columns: 1fr; } .rechner > button { justify-self: stretch; } }
.rechner-ergebnis { display: grid; gap: 1rem; }
.empfehlung { padding: 1.1rem 1.35rem; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); }
.empfehlung[data-passt="false"] { border-style: dashed; }
.gruende { margin: 0.5rem 0 0; padding-left: 1.2rem; font-size: 0.9375rem; color: var(--text-2); }
.prosa { max-width: 68ch; }
/* Als Seitenblock (.breite.prosa) läuft der Text an der Kante des Titels, nur die Zeilen bleiben schmal. */
.breite.prosa { max-width: var(--breite); }
.breite.prosa > * { max-width: 68ch; }
.prosa h2 { margin-top: 2.5rem; font-size: clamp(1.5rem, 1.2rem + 1vw, 2.125rem); }
.prosa h3 { margin-top: 1.75rem; }
.prosa ul, .prosa ol { padding-left: 1.4rem; }
.prosa li + li { margin-top: 0.35rem; }
.prosa li::marker { color: var(--berg-2); }
.prosa table { width: 100%; margin: 0 0 1.5rem; border-collapse: collapse; font-size: 0.9375rem; }
.prosa th, .prosa td { padding: 0.55rem 0.8rem; text-align: left; vertical-align: top; }
.prosa tr:nth-child(even) > * { background: var(--papier-2); }
.prosa blockquote { margin: 0 0 1rem; padding-left: 1.1rem; border-left: 2px solid var(--rasen); color: var(--text-2); }
.prosa img { border-radius: var(--radius); }
.inhaltsverzeichnis { margin: 0 0 2rem; padding: 1.1rem 1.35rem; border-radius: var(--radius); background: var(--papier-2); }
.inhaltsverzeichnis ol { margin: 0; padding-left: 1.2rem; }
.quellenliste { font-size: var(--gr-klein); color: var(--text-2); }


/* ── Fuss ─────────────────────────────────────────────────────────────────── */
/* Oben ein schmaler Streifen gemähter Rasen. */
.fuss { position: relative; margin-top: clamp(4rem, 9vw, 7rem); background: var(--kopf); color: var(--kopf-text-2); font-size: 0.9375rem; }
.fuss::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 6px;
  background: repeating-linear-gradient(90deg, #4f9a3c 0 48px, #357a28 48px 96px);
  pointer-events: none;
}
.fuss a { color: var(--kopf-text); text-decoration: none; }
.fuss a:hover { text-decoration: underline; }
.fuss h2 { margin: 0 0 0.75rem; color: var(--fokus-kopf); font-size: 1rem; font-weight: 700; letter-spacing: 0; }
.fuss-raster { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); gap: 2rem; padding-block: 3.5rem 1.5rem; }
.fuss-gruppe ul { display: grid; gap: 0.1rem; margin: 0; padding: 0; list-style: none; }
.fuss-gruppe a { display: inline-block; padding-block: 0.3rem; }
.fuss-unten { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; padding-block: 1.25rem 2rem; border-top: 1px solid rgba(255, 255, 255, 0.14); }
.fuss-betreiber { margin: 0 0 0.75rem; font-style: normal; line-height: 1.6; }
.fuss-klein { margin: 0; font-size: 0.8125rem; }

/* ── Bewegung und erzwungene Farben ───────────────────────────────────────── */
/* Einmal beim Laden: Der Held hebt sich um wenige Pixel (nur transform, der
   Text ist ab dem ersten Bild sichtbar). Alles andere bewegt welt.js. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
  .held-text > * { animation: heben 900ms var(--federn) both; }
  .held-text > :nth-child(2) { animation-delay: 60ms; }
  .held-text > :nth-child(3) { animation-delay: 120ms; }
  .zahlen { animation: heben 1000ms var(--federn) 180ms both; }
}
@keyframes heben { from { transform: translateY(16px); } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
  .karte:hover, .knopf:active, .karte:hover .karte-bild img, .pille:active { transform: none; }
}
@media (forced-colors: active) {
  .verfuegbar::before { background: CanvasText; }
  .knopf, .karte, .korb-link { border: 2px solid ButtonText; }
  .zeichnung, .held-buehne, .plan, .versprechen-bild, .tafel-bild, .korb-leer-bild { display: none; }
}

/* ── Seiten ───────────────────────────────────────────────────────────────── */

/* ── Seite fehlt (404) ─────────────────────────────────────────────────── */
.fehlt { padding-bottom: clamp(2rem, 5vw, 4rem); }
.fehlt h1 { max-width: 18ch; }
.fehlt-wege { max-width: 34rem; margin-top: 2rem; }

/* ── Ratgeber und Infoseiten (Aufgabe 1.14) ─────────────────────────────── */
div.tabelle[role="region"] { margin: 0 0 1.5rem; overflow-x: auto; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); }
div.tabelle[role="region"] table { margin: 0; }
.rg-stand { margin: 0.5rem 0 0; font-size: var(--gr-klein); color: var(--text-2); }
.rg-inhalt { margin: 0 0 2rem; padding: 1.1rem 1.35rem; border-radius: var(--radius); background: var(--papier-2); }
.rg-inhalt-titel { margin: 0 0 0.5rem; font-weight: 700; }
.rg-inhalt ol { margin: 0; padding-left: 1.2rem; }
.rg-teil { max-width: 70ch; margin-top: 2.5rem; }
.rg-quellen { padding-left: 1.4rem; font-size: var(--gr-klein); color: var(--text-2); }
.rg-quellen li + li { margin-top: 0.35rem; }
.rg-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); gap: 1.25rem; margin: 0 0 2rem; }
.rg-karte {
  display: flex; flex-direction: column; gap: 0.35rem; padding: 1.2rem 1.3rem 1.3rem;
  border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); color: var(--text); text-decoration: none;
  transition: border-color var(--dauer) ease, box-shadow var(--dauer) ease;
}
.rg-karte:hover { border-color: var(--rasen); box-shadow: var(--schatten); }
.rg-karte h3 { margin: 0; font-size: 1.1875rem; }
.rg-karte p { margin: 0; font-size: var(--gr-klein); color: var(--text-2); }
.rg-karte .mehr { margin-top: auto; padding-top: 0.5rem; color: var(--link); font-weight: 700; }
.rg-leer, .rg-alle { margin: 0 0 2rem; }

/* ── Übersicht: Kopf mit Zeichnung ────────────────────────────────────────── */
.seitenkopf-bild { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem 2.5rem; align-items: center; }
.seitenkopf-bild > .zeichnung { display: none; }
.wege { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.25rem 0 0; }
@media (min-width: 52rem) {
  .seitenkopf-bild { grid-template-columns: minmax(0, 1fr) 15rem; }
  .seitenkopf-bild > .zeichnung { display: block; }
}

/* ── Modellseite (Aufgabe 1.9) ────────────────────────────────────────────── */
.modell .seitenkopf h1 { max-width: 22ch; }
@media (min-width: 56rem) {
  .modell .spalten > :last-child { position: sticky; top: 1.25rem; }
}
.hinweise { display: grid; gap: 0.5rem; margin: 1.25rem 0 0; padding: 0; list-style: none; font-size: var(--gr-klein); }
.hinweise li { display: flex; align-items: flex-start; gap: 0.6rem; }
.hinweise li:not(:has(.drei-d))::before { content: ""; flex: none; width: 0.7rem; height: 0.7rem; margin-top: 0.35rem; border-radius: 50%; background: var(--rasen); }
.hinweise a { color: var(--link); font-weight: 600; }
.modell > .abschnitt h2 { margin-bottom: 1rem; }

/* ── Zubehör (Aufgabe 1.11) ─────────────────────────────────────────────── */
.zubehoer-liste .karten > li { display: flex; flex-direction: column; gap: 0.5rem; }
.zubehoer-liste .karte { flex: 1; height: auto; }
.passt-zu { margin: 0.5rem 0 0; font-size: var(--gr-klein); color: var(--text-2); }
.zubehoer-leer { display: grid; gap: 0.75rem; max-width: 62ch; }
.zubehoer-leer p, .zubehoer-leer ul { margin: 0; }

/* ── Startseite (Aufgabe 1.15, Vorschlag 2028-1 «Lebende Wiese») ──────────── */
/* Held: eine Bühne über die ganze Breite. Darin zuerst das CSS-Bild
   (.held-poster: Himmel, Streifenrasen in Perspektive, gestrichelte Grenze),
   darüber die WebGL-Szene (.held-leinwand), die erst nach dem ersten Bild
   kommt und weich einblendet. Text links auf dem Himmel, der Schleier
   (.held-buehne::after) hält ihn lesbar. Mobil steht die Bühne unter dem Text.
   Platz für ein späteres Stimmungsvideo: .held-video, gleiche Lage wie das
   Poster (siehe start.js). */
.held { position: relative; padding: 0; }
.held h1 { max-width: 17ch; font-size: var(--gr-gross); font-weight: 700; line-height: 0.98; letter-spacing: -0.045em; hyphens: manual; }
.held-wiese { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto auto; overflow: hidden; }
.held-buehne { position: relative; grid-row: 2; grid-column: 1; height: clamp(20rem, 58svh, 34rem); overflow: hidden; isolation: isolate; }
.held-raster { position: relative; z-index: 3; grid-row: 1; grid-column: 1; padding-block: clamp(1.5rem, 5vw, 3rem) 1.5rem; }
.held-text > p:not(.held-aktionen) { max-width: 52ch; font-size: 1.0625rem; color: var(--text-2); }
.held-aktionen { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1.5rem; margin: 1.6rem 0 0; }
.held .held-aktionen .knopf {
  min-height: 52px; padding-inline: 1.9rem; border-color: var(--haupt); background: var(--haupt); color: var(--haupt-text); font-size: 1.0625rem;
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.25) inset, 0 12px 26px -12px rgba(28, 82, 22, 0.65);
}
.held .held-aktionen .knopf:hover { border-color: var(--haupt-hover); background: var(--haupt-hover); }
.held .held-aktionen .knopf::after { content: "→"; content: "→" / ""; transition: transform 260ms var(--federn); }
.held .held-aktionen .knopf:hover::after { transform: translateX(3px); }
.held-zahlen { position: relative; z-index: 3; grid-row: 3; grid-column: 1; padding-block: 1rem 0; }

.held-poster, .held-video, .held-leinwand { position: absolute; inset: 0; width: 100%; height: 100%; }
.held-video { z-index: 1; object-fit: cover; }
.held-poster { overflow: hidden; background: linear-gradient(180deg, var(--papier) 0%, var(--himmel) 30%, var(--himmel) 31%); perspective: 640px; perspective-origin: 58% 30%; }
.poster-himmel { position: absolute; left: 0; right: 0; top: calc(30% - 3rem); height: 6rem; z-index: 2; background: linear-gradient(180deg, rgba(0, 0, 0, 0), var(--himmel) 50%, rgba(0, 0, 0, 0)); }
.poster-rasen {
  position: absolute; left: -80%; right: -80%; top: 30%; height: 620px; transform-origin: 50% 0; transform: rotateX(80deg);
  background:
    repeating-linear-gradient(90deg, var(--rasen-a) 0 64px, var(--rasen-b) 64px 128px);
}
.poster-grenze {
  position: absolute; left: 51%; top: 6%; width: 22%; height: 64%;
  border: 6px dashed rgba(255, 255, 255, 0.85); border-radius: 34%;
}
.held-leinwand { z-index: 1; opacity: 0; transition: opacity 1100ms var(--federn); }
.held-buehne-lebt .held-leinwand { opacity: 1; }
.held-buehne::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(180deg, var(--papier) 0%, rgba(0, 0, 0, 0) 18%); }
:root[data-thema="dunkel"] .poster-grenze { border-color: rgba(158, 224, 133, 0.7); }
/* Held-Video (Higgsfield, start.js HELD_VIDEO): Standbild als <picture> über
   dem CSS-Poster, das Video darüber. Das Video blendet erst ein, wenn es
   läuft (welt.js setzt .held-video-laeuft); ohne Bewegung bleibt das Bild. */
.held-bild { position: absolute; inset: 0; z-index: 1; }
.held-bild img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 60% 50%; }
.held-video { opacity: 0; transition: opacity 900ms var(--gleiten); }
.held-video.held-video-laeuft { opacity: 1; }
:root[data-thema="dunkel"] .held-bild img, :root[data-thema="dunkel"] .held-video { filter: brightness(0.72) saturate(0.9); }

/* Desktop: die Bühne füllt den ganzen Held, der Text steht links davor. */
@media (min-width: 56rem) {
  .held-wiese { grid-template-rows: minmax(0, 1fr) auto; min-height: clamp(38rem, calc(100svh - 7.5rem), 56rem); }
  .held-buehne { grid-row: 1 / -1; height: auto; }
  .held-buehne::after {
    background:
      linear-gradient(90deg, var(--papier) 0%, color-mix(in srgb, var(--papier) 92%, transparent) 30%, color-mix(in srgb, var(--papier) 40%, transparent) 46%, rgba(0, 0, 0, 0) 60%),
      linear-gradient(180deg, var(--papier) 0%, rgba(0, 0, 0, 0) 12%);
  }
  .held-raster { align-self: start; padding-block: clamp(2.5rem, 6vh, 4.5rem) 2rem; }
  .held-text { max-width: 41rem; }
  .held-text > p:not(.held-aktionen) { max-width: 34rem; }
  .held-zahlen { grid-row: 2; padding-block: 0 clamp(1.5rem, 4vh, 2.5rem); }
  .held-poster { perspective-origin: 62% 27%; background: linear-gradient(180deg, var(--papier) 0%, var(--himmel) 27%, var(--himmel) 28%); }
  .poster-himmel { top: calc(27% - 3rem); }
  .poster-rasen { top: 27%; }
  .held-poster .poster-grenze { left: 49%; top: 5%; width: 30%; height: 40%; border-width: 5px; }
}

/* Kennzahlen: grosse Ziffern auf einer hellen, leicht durchscheinenden Tafel. */
.zahlen {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 0; padding: 0.4rem 1.4rem; list-style: none;
  border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); box-shadow: var(--schatten);
}
@supports (backdrop-filter: blur(2px)) {
  .zahlen { background: color-mix(in srgb, var(--karte) 90%, transparent); backdrop-filter: blur(16px) saturate(1.25); -webkit-backdrop-filter: blur(16px) saturate(1.25); }
}
.zahlen li { display: grid; gap: 0.15rem; padding-block: 0.95rem; }
.zahlen li + li { border-top: 1px solid var(--linie); }
.zahl-wert { font-size: clamp(2rem, 1.4rem + 2vw, 3rem); font-weight: 700; line-height: 1; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; color: var(--text); }
.zahl-text { max-width: 30ch; font-size: 0.9375rem; color: var(--text-2); }
@media (min-width: 48rem) {
  .zahlen { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0.4rem 0; }
  .zahlen li { padding: 1.25rem 1.6rem; }
  .zahlen li + li { border-top: 0; border-left: 1px solid var(--linie); }
}
@media (min-width: 56rem) { .zahlen { max-width: 54rem; margin-left: auto; } }

/* Drei Fragen: ruhige Typografie, keine Bilder. */
.start-versprechen h2 { max-width: 26ch; }
.versprechen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin: 2.25rem 0 0; padding: 0; list-style: none; counter-reset: frage; }
.versprechen-punkt { padding-block: 1.5rem; border-top: 1px solid var(--linie); }
.versprechen-punkt h3 { margin: 0 0 0.6rem; font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); letter-spacing: -0.03em; }
.versprechen-punkt p { margin: 0; max-width: 36ch; color: var(--text-2); }
.versprechen-text { margin-top: 2.5rem; color: var(--text-2); }
.versprechen-text p:last-child { margin-bottom: 0; }
/* Stimmungsbilder (api/_medien.js): Garten und Rasen, nie ein Gerät. */
.versprechen-bild, .tafel-bild, .korb-leer-bild { display: block; }
.versprechen-bild img, .tafel-bild img, .korb-leer-bild img {
  display: block; width: 100%; height: auto; object-fit: cover; border-radius: var(--radius-gross); background: var(--rasen-hell);
}
.versprechen-bild { margin-top: 2rem; }
.versprechen-bild img { aspect-ratio: 16 / 10; object-position: 50% 70%; }
@media (min-width: 48rem) { .versprechen-bild img { aspect-ratio: 1600 / 686; } }
.tafel-bild { grid-column: 1 / -1; }
.tafel-bild img { aspect-ratio: 16 / 9; border-radius: var(--radius); object-position: 40% 60%; }
@media (min-width: 52rem) { .tafel-bild img { aspect-ratio: 3 / 1; } }
:root[data-thema="dunkel"] .versprechen-bild img, :root[data-thema="dunkel"] .tafel-bild img, :root[data-thema="dunkel"] .korb-leer-bild img { filter: brightness(0.85); }
.korb-leer { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.5rem; align-items: center; }
.korb-leer-bild img { aspect-ratio: 16 / 9; max-width: 26rem; }
.korb-leer-text p:first-child { margin-top: 0; }
@media (min-width: 48rem) { .korb-leer { grid-template-columns: minmax(0, 22rem) minmax(0, 1fr); gap: 2.5rem; } .korb-leer-bild img { aspect-ratio: 4 / 3; } }
@media (min-width: 56rem) {
  .versprechen { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; }
  .versprechen-punkt { padding-block: 1.75rem 0; }
  .versprechen-text { column-count: 2; column-gap: 3rem; max-width: none; }
  .versprechen-text p { break-inside: avoid; }
}
.start-modelle h2 { margin-bottom: 1.5rem; }
.start-modelle .abschnitt { padding-top: 0; }
.weiter { margin-block: 0 1rem; font-weight: 650; }
.weiter a { text-underline-offset: 0.25em; }

/* Die Geschichte «ohne Draht»: links der Gartenplan (klebt beim Scrollen),
   rechts die drei Navigationsarten. Die Ebene der gelesenen Art leuchtet. */
.start-navigation { background: var(--ton); }
.geschichte > h2 { max-width: 18ch; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); letter-spacing: -0.04em; }
.geschichte-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; margin-top: 2rem; }
.geschichte-bild { max-width: 26rem; width: 100%; margin-inline: auto; }
.nav-arten { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0.5rem; max-width: none; }
.nav-art { padding: 1.4rem 0 0.6rem 1.4rem; border-left: 2px solid var(--linie); transition: border-color 400ms var(--federn); }
.nav-art h3 { margin-top: 0; font-size: clamp(1.375rem, 1.1rem + 0.9vw, 1.875rem); letter-spacing: -0.03em; }
.start-navigation .prosa > :first-child { margin-top: 0; }
.start-navigation[data-schritt="1"] .nav-art:nth-child(1),
.start-navigation[data-schritt="2"] .nav-art:nth-child(2),
.start-navigation[data-schritt="3"] .nav-art:nth-child(3) { border-left-color: var(--rasen); }
@media (min-width: 56rem) {
  .geschichte-raster { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(2.5rem, 6vw, 6rem); align-items: start; }
  .geschichte-bild { position: sticky; top: max(2rem, calc(50vh - 17rem)); max-width: none; }
  .nav-art { padding-block: 2.5rem 8vh; }
  .nav-art:last-child { padding-bottom: 2rem; }
}

/* Gartenplan (SVG in start.js). Ohne Skript fertig gezeichnet. */
.plan { width: 100%; height: auto; overflow: visible; }
.plan-grund { fill: var(--papier-2); stroke: var(--linie); stroke-width: 1.5; }
.plan-haus { fill: var(--karte); stroke: var(--rahmen); stroke-width: 1.5; }
.plan-weg { stroke: var(--rahmen); stroke-width: 6; stroke-linecap: round; }
.plan-baum { fill: var(--wiese-2); stroke: var(--rasen-tief); stroke-width: 1.5; }
.plan-rasen { fill: var(--rasen-b); }
.plan-spur { fill: none; stroke: var(--rasen-a); stroke-width: 22; stroke-linejoin: round; }
.plan-grenze { fill: none; stroke: #ffffff; stroke-width: 4; stroke-linejoin: round; }
.plan-bewegt .plan-spur, .plan-bewegt .plan-grenze { stroke-dasharray: 1 1; }
.plan-ebene { transition: opacity 500ms var(--federn); }
[data-schritt] .plan-ebene { opacity: 0.1; }
[data-schritt="1"] .plan-ebene-1, [data-schritt="2"] .plan-ebene-2, [data-schritt="3"] .plan-ebene-3 { opacity: 1; }
.plan-satellit { fill: var(--berg-2); }
.plan-strahl { stroke: var(--berg-2); stroke-width: 1.5; stroke-dasharray: 3 5; }
.plan-signal { fill: none; stroke: var(--berg-2); stroke-width: 3; stroke-linecap: round; }
.plan-station { fill: none; stroke: var(--berg-2); stroke-width: 4; stroke-linecap: round; }
.plan-station-kopf { fill: var(--berg-2); }
.plan-lidar { fill: none; stroke: #ffffff; stroke-width: 2; stroke-dasharray: 2 6; opacity: 0.85; }
.plan-maeher-koerper { fill: var(--karte); stroke: var(--berg); stroke-width: 2.5; }
.plan-maeher-sensor { fill: var(--rasen); stroke: var(--berg); stroke-width: 1.5; }
:root[data-thema="dunkel"] .plan-grenze, :root[data-thema="dunkel"] .plan-lidar { stroke: #b6e8a4; }
:root[data-thema="dunkel"] .plan-maeher-koerper { fill: #dfe7e2; }

/* Rechner und Service als grosse Tafeln. */
.tafel { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.75rem; align-items: center; padding: clamp(1.5rem, 4vw, 3.25rem); border-radius: var(--radius-gross); }
.start-modelle .weiter a, .start-ratgeber .weiter a {
  display: inline-flex; align-items: center; gap: 0.5rem; min-height: 48px; padding: 0.7rem 1.4rem;
  border: 1.5px solid var(--link); border-radius: 999px; text-decoration: none;
  transition: background-color var(--dauer) ease, transform 160ms var(--federn);
}
.start-modelle .weiter a::after, .start-ratgeber .weiter a::after { content: "→"; content: "→" / ""; }
.start-modelle .weiter a:hover, .start-ratgeber .weiter a:hover { background: var(--ton); }
.start-modelle .weiter a:active, .start-ratgeber .weiter a:active { transform: scale(0.97); }
.tafel-service { background: var(--rasen-hell); }
.tafel-service h2 { max-width: 18ch; margin: 0; font-size: clamp(1.75rem, 1.2rem + 2vw, 3rem); letter-spacing: -0.04em; }
.start-links { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.start-links a {
  display: flex; align-items: center; justify-content: space-between; min-height: 56px; padding: 0.9rem 0.25rem;
  border-bottom: 1px solid color-mix(in srgb, var(--berg-2) 25%, transparent);
  color: var(--text); font-size: 1.1875rem; font-weight: 650; letter-spacing: -0.015em; text-decoration: none;
}
.start-links li:first-child a { border-top: 1px solid color-mix(in srgb, var(--berg-2) 25%, transparent); }
.start-links a::after { content: "→"; content: "→" / ""; color: var(--berg-2); transition: transform 260ms var(--federn); }
.start-links a:hover::after { transform: translateX(5px); }
@media (min-width: 52rem) {
  .tafel { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 3.5rem; }
}

/* Ratgeber: Artikel als Reihe ruhiger Tafeln. */
.start-artikel { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: 1.25rem; max-width: none; margin: 1.25rem 0 1.5rem; padding: 0; list-style: none; }
.start-artikel li { padding: 1.4rem 1.5rem; border-radius: var(--radius); background: var(--papier-2); border: 1px solid var(--linie); }
.start-artikel a { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.02em; line-height: 1.25; text-decoration: none; color: var(--text); }
.start-artikel a:hover { text-decoration: underline; }
.start-artikel p { margin: 0.5rem 0 0; font-size: 0.9375rem; color: var(--text-2); }

/* ── Gartenfinder (Kombi 2028-1 + 2028-5) ──────────────────────────────────── */
/* Direkt unter dem Held. Dieselbe Sprache wie die Wiese: der Rasen im Garten
   trägt die zwei Töne der gemähten Streifen (--rasen-a/-b), die Grenze ist
   die weisse gestrichelte Linie aus der App, Haus und Bäume wie im Gartenplan.
   Karten deckend mit feiner Linie, keine Glasflächen. */
.held-zweit {
  display: inline-flex; align-items: center; gap: 0.45rem; min-height: 52px; padding: 0;
  color: var(--text); font-weight: 650; text-decoration: none;
}
.held-zweit::after { content: "↓"; content: "↓" / ""; color: var(--rasen-tief); transition: transform 260ms var(--federn); }
.held-zweit:hover { text-decoration: underline; text-decoration-thickness: 2px; }
.held-zweit:hover::after { transform: translateY(3px); }

.start-finder { scroll-margin-top: 1rem; }
.start-finder .abschnitt { padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(1.5rem, 4vw, 3rem); }
.finder { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; }
.finder-kopf h2 { max-width: 20ch; font-size: clamp(2rem, 1.3rem + 2.6vw, 3.5rem); letter-spacing: -0.04em; }
.finder-unter { max-width: 56ch; margin: 0; font-size: 1.125rem; color: var(--text-2); }
.finder-garten, .finder-treffer {
  border: 1px solid var(--linie); border-radius: var(--radius-gross); background: var(--karte); box-shadow: var(--schatten);
}
.finder-garten { padding: 0.6rem; }
/* In einer schmalen Spalte (Rechner) passen Formen und «Neu zeichnen» in eine Reihe. */
@container (max-width: 31rem) {
  .garten-werkzeug .pille { padding-inline: 0.7rem; font-size: 0.875rem; }
}
.finder-treffer { display: flex; flex-direction: column; gap: 0.75rem; padding: 1.35rem 1.2rem 1.2rem; }
@media (min-width: 64rem) {
  .finder { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 1.5rem 1.75rem; align-items: start; }
  .finder-kopf { grid-column: 1 / -1; padding-bottom: 0.75rem; }
  /* Der Garten klebt, die Treffer laufen daneben: Wer zieht, sieht beides. */
  .finder-garten { grid-column: 1; position: sticky; top: 1.25rem; }
  .finder-treffer { grid-column: 2; grid-row: 2; }
}

/* Garten: SVG in Metern, Werkzeug oben, Fläche und Massstab unten. Die
   Füllung des Rasens (Streifenmuster) steht als Attribut im SVG, nicht hier.
   Ort für ein späteres Video (Rasen von oben): .garten-grund nimmt es auf. */
.garten-flaeche { container-type: inline-size; position: relative; overflow: hidden; border-radius: calc(var(--radius-gross) - 8px); background: var(--lichtung); isolation: isolate; }
.garten-grund { position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 30% 15%, var(--papier-2), var(--lichtung) 70%); }
.garten-bild { width: 100%; height: auto; aspect-ratio: 640 / 440; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.g-raster { fill: none; stroke: var(--strich); stroke-opacity: 0.08; stroke-width: 1; }
.g-streifen-a { fill: var(--rasen-a); }
.g-streifen-b { fill: var(--rasen-b); }
.g-rasen { stroke: var(--rasen-b); stroke-width: 2; stroke-linejoin: round; cursor: grab; }
.g-spur { fill: none; stroke: #ffffff; stroke-opacity: 0.9; stroke-width: 3; stroke-dasharray: 10 8; stroke-linejoin: round; pointer-events: none; }
.g-haus { fill: var(--karte); stroke: var(--rahmen); stroke-width: 1.5; }
.g-dach { stroke: var(--rahmen); stroke-width: 1.5; stroke-opacity: 0.6; }
.g-baum { fill: var(--wiese-2); stroke: var(--rasen-tief); stroke-width: 1.5; }
.griff { cursor: grab; outline: none; }
.griff-flaeche { fill: transparent; }
.griff-ecke { touch-action: none; }
.griff-punkt { fill: var(--karte); stroke: var(--berg); stroke-width: 2.5; transition: r var(--dauer) var(--federn); }
.griff-mitte .griff-punkt { fill: #ffffff; stroke: var(--rasen-b); stroke-width: 2; opacity: 0.9; }
.griff-ecke:focus-visible .griff-punkt { stroke: var(--fokus); stroke-width: 5; }
.griff-erster .griff-punkt { fill: var(--rasen-tief); }
.garten.ziehen .g-rasen, .garten.ziehen .griff { cursor: grabbing; }
.garten.zeichnen .garten-bild { touch-action: none; cursor: crosshair; }
.garten.zeichnen .g-rasen { fill: none; }
:root[data-thema="dunkel"] .g-spur { stroke: #b6e8a4; stroke-opacity: 0.85; }
:root[data-thema="dunkel"] .griff-punkt { fill: #dfe7e2; stroke: #0c1611; }
.garten-werkzeug { position: absolute; top: 0.6rem; left: 0.6rem; right: 0.6rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; pointer-events: none; }
.garten-werkzeug > * { pointer-events: auto; }
.formen, .zoom, .pille-zeichnen, .garten-zahl {
  border: 1px solid var(--linie); background: var(--karte); box-shadow: 0 6px 16px -10px rgba(18, 52, 32, 0.45);
}
.formen { display: flex; flex-wrap: wrap; gap: 0.15rem; padding: 0.2rem; border-radius: 999px; }
.pille {
  display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 0.95rem;
  border: 0; border-radius: 999px; background: transparent; color: var(--text-2); font: 650 0.9375rem/1 var(--schrift); cursor: pointer;
  transition: background-color var(--dauer) ease, color var(--dauer) ease, transform 140ms var(--federn);
}
.pille:hover { background: var(--pille-aktiv); color: var(--text); }
.pille:active { transform: scale(0.96); }
.pille[aria-pressed="true"] { background: var(--haupt); color: var(--haupt-text); }
.pille-zeichnen { color: var(--text); }
.pille-rund { width: 40px; padding: 0; font-size: 1.25rem; color: var(--text); }
.garten-zahl { position: absolute; left: 0.75rem; bottom: 0.65rem; margin: 0; padding: 0.3rem 0.95rem; border-radius: 999px;
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.875rem); font-weight: 700; letter-spacing: -0.035em; font-variant-numeric: tabular-nums; pointer-events: none; }
.garten-massstab { position: absolute; right: 0.75rem; bottom: 0.65rem; display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem; width: 42%; margin: 0; }
.massstab-linie { display: flex; flex: 1; align-items: center; justify-content: flex-end; gap: 0.4rem; font-size: 0.8125rem; font-weight: 700; color: var(--text); }
.massstab-linie [data-massstab-strich] { display: block; height: 6px; border: 2px solid var(--strich); border-top: 0; }
.zoom { display: inline-flex; gap: 0.15rem; padding: 0.2rem; border-radius: 999px; }
.zoom[hidden], .garten-werkzeug[hidden], .garten-hilfe[hidden] { display: none; }
.garten-hilfe { margin: 0.6rem 0.4rem 0; font-size: var(--gr-klein); color: var(--text-2); }
/* Mobil: Werkzeug über, Fläche und Massstab unter dem Bild, das Bild
   fast quadratisch statt flach. finder.js zeigt oben und unten mehr Welt und
   lässt den Rasen das Bild fast füllen: grössere Ecken für den Finger. */
@media (max-width: 40rem) {
  .finder-garten { margin-inline: calc(-0.5 * var(--rand)); padding: 0.45rem; }
  /* Treffer dieselbe Kante wie der Garten darüber. */
  .finder-treffer { margin-inline: calc(-0.5 * var(--rand)); padding-inline: 1rem; }
  .garten-flaeche { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; padding: 0.45rem; }
  .garten-bild { order: 2; width: 100%; aspect-ratio: 8 / 7; border-radius: 14px; background: radial-gradient(120% 90% at 30% 15%, var(--papier-2), var(--lichtung) 70%); }
  .garten-werkzeug { position: static; order: 1; width: 100%; min-width: 0; justify-content: flex-start; }
  .garten-zahl { position: static; order: 3; }
  .garten-massstab { position: static; order: 4; flex: 1; width: auto; }
  .formen { flex-wrap: nowrap; }
  .pille { padding: 0 0.75rem; font-size: 0.875rem; white-space: nowrap; }
  .pille-rund { width: 40px; padding: 0; }
}

/* Angaben unter dem Garten: Fläche als Zahl, Steigung als Regler mit Hang. */
.finder-angaben { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; padding: 1rem 0.6rem 0.4rem; }
@media (min-width: 48rem) { .finder-angaben { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: 1.5rem; } }
.feld-flaeche input { font-size: 1.25rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.regler-zeile { display: flex; align-items: center; gap: 0.9rem; }
.hang { flex: none; width: 4.5rem; height: auto; margin-bottom: 1.4rem; }
.hang-boden { stroke: var(--rahmen); stroke-width: 2; stroke-linecap: round; }
.hang-flaeche { fill: var(--rasen-a); stroke: var(--rasen-tief); stroke-width: 2; stroke-linejoin: round; transition: d 220ms var(--federn); }
.regler-spur { position: relative; flex: 1; padding-bottom: 1.4rem; }
.regler-spur input[type="range"] { width: 100%; height: 44px; min-height: 0; margin: 0; padding: 0; border: 0; border-radius: 999px; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.regler-spur input[type="range"]::-webkit-slider-runnable-track {
  height: 10px; border-radius: 999px;
  background: linear-gradient(to right, var(--rasen) calc(var(--wert) * 1%), var(--papier-2) calc(var(--wert) * 1%));
  box-shadow: inset 0 0 0 1px var(--linie);
}
.regler-spur input[type="range"]::-moz-range-track { height: 10px; border-radius: 999px; background: var(--papier-2); }
.regler-spur input[type="range"]::-moz-range-progress { height: 10px; border-radius: 999px; background: var(--rasen); }
.regler-spur input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 28px; height: 28px; margin-top: -9px; border: 3px solid var(--karte); border-radius: 50%;
  background: var(--haupt); box-shadow: 0 2px 8px rgba(18, 52, 32, 0.35); transition: transform 140ms var(--federn);
}
.regler-spur input[type="range"]::-moz-range-thumb { width: 22px; height: 22px; border: 3px solid var(--karte); border-radius: 50%; background: var(--haupt); }
.regler-spur input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.12); }
.regler-spur input[type="range"]:focus-visible { outline-offset: 4px; border-radius: 999px; }
.regler-marken { position: absolute; left: 14px; right: 14px; bottom: 0; height: 1.3rem; margin: 0; padding: 0; list-style: none; }
.regler-marken li { position: absolute; left: calc(var(--bei) * 1%); transform: translateX(-50%); font-size: 0.75rem; font-weight: 700; color: var(--text-3); font-variant-numeric: tabular-nums; }
.regler-marken li::before { content: ""; position: absolute; left: 50%; top: -0.55rem; width: 2px; height: 0.4rem; border-radius: 1px; background: currentColor; }
.regler-marken li[data-erreicht] { color: var(--text); }
.finder-angaben .feld-hilfe output { font-weight: 700; color: var(--text); }

/* Treffer: höchstens drei, je mit Bild, Preis und Gründen samt Quelle. */
.finder-titel { margin: 0; font-size: 1.375rem; letter-spacing: -0.025em; }
.finder-stand { margin: 0; font-size: 0.9375rem; color: var(--text-2); }
.finder-liste { display: grid; gap: 0.6rem; margin: 0; padding: 0; list-style: none; contain: layout; view-transition-name: treffer-liste; }
.treffer { padding: 0.6rem; border: 1px solid var(--linie); border-radius: 16px; background: var(--papier); view-transition-class: treffer; transition: border-color var(--dauer) ease; }
.treffer:hover { border-color: var(--rasen); }
.treffer[hidden] { display: none; }
.treffer-link { display: flex; align-items: center; gap: 0.85rem; color: var(--text); text-decoration: none; border-radius: 12px; }
.treffer-bild { flex: none; width: 4.25rem; aspect-ratio: 1; overflow: hidden; border-radius: 12px; background: radial-gradient(120% 90% at 50% 100%, var(--wiese) 0%, var(--papier-2) 70%); }
.treffer-bild img { width: 100%; height: 100%; object-fit: cover; }
.treffer-kopf { display: flex; flex: 1; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.15rem 0.75rem; }
.treffer-name { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.015em; }
.treffer-link:hover .treffer-name { text-decoration: underline; text-underline-offset: 0.18em; }
.treffer .preis { font-size: 1.0625rem; }
.treffer-gruende { display: grid; gap: 0.25rem; margin: 0.5rem 0 0.15rem; padding: 0 0.25rem; list-style: none; font-size: 0.8125rem; line-height: 1.45; color: var(--text-2); }
.treffer-gruende li { position: relative; padding-left: 1.35rem; }
.treffer-gruende li::before { content: "✓"; content: "✓" / ""; position: absolute; left: 0; top: 0.05em; display: grid; place-items: center; width: 1rem; height: 1rem;
  border-radius: 50%; background: var(--rasen-hell); color: var(--rasen-tief); font-size: 0.625rem; font-weight: 700; }
.treffer-gruende li[data-gut="false"]::before { content: "!"; content: "!" / ""; background: var(--warn-grund); color: var(--warn-text); }
.treffer-gruende .quelle { margin-left: 0.15rem; padding: 0; }
.finder-mehr { padding-top: 0.6rem; border-top: 1px solid var(--linie); }
.finder-mehr summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 44px; font-weight: 700; cursor: pointer; list-style: none; }
.finder-mehr summary::-webkit-details-marker { display: none; }
/* Ohne Marker sähe die Zeile wie ein Titel ohne Inhalt aus: ein Pfeil zeigt, dass sie aufgeht. */
.finder-mehr summary::after {
  content: ""; flex: none; width: 0.55rem; height: 0.55rem; margin-right: 0.35rem;
  border-right: 2px solid var(--text-2); border-bottom: 2px solid var(--text-2);
  transform: translateY(-25%) rotate(45deg); transition: transform 200ms var(--federn);
}
.finder-mehr[open] summary::after { transform: translateY(25%) rotate(-135deg); }
.finder-mehr summary:hover::after { border-color: var(--text); }
.finder-mehr fieldset { display: grid; gap: 0.4rem; margin: 0.25rem 0 0.6rem; padding: 0; border: 0; }
.finder-mehr legend { margin-bottom: 0.4rem; padding: 0; font-size: 0.9375rem; }
.finder-mehr .wahl { padding: 0.45rem 0.7rem; background: var(--papier-2); font-size: 0.9375rem; }
.finder-fuss { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.finder-fuss .knopf { flex: 1 1 auto; }
.finder-alle { margin: 0; font-size: var(--gr-klein); font-weight: 650; }

/* Seitenwechsel mit geteiltem Produktbild (gleicher view-transition-name auf
   Trefferkarte, Übersichtskarte und Modellseite) und Umordnen der Treffer.
   Nichts startet unsichtbar; ohne Bewegung steht alles sofort am Ziel. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-group(*) { animation-duration: 440ms; animation-timing-function: var(--federn); }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }
  ::view-transition-new(*):only-child { animation: einfliegen 480ms var(--federn) both; }
  ::view-transition-old(*):only-child { animation: ausblenden 160ms ease-out both; }
}
@keyframes einfliegen { from { opacity: 0; transform: translateY(16px) scale(0.97); } }
@keyframes ausblenden { to { opacity: 0; transform: scale(0.98); } }
@media (forced-colors: active) {
  .g-rasen { fill: Highlight; }
  .g-spur { stroke: CanvasText; }
  .griff-punkt { fill: ButtonText; }
  .pille, .formen, .zoom { border: 2px solid ButtonText; }
}

/* ── Rechner: links Formular und Ergebnis, rechts der Garten aus dem Finder ─ */
/* Mobil steht der Garten über dem Formular (Reihenfolge im HTML). Ab 64 rem
   klebt er rechts, fast quadratisch (6:5): finder.js nutzt die Höhe für den Rasen. */
.rechner-raster { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 2rem; grid-template-areas: "garten" "form" "ergebnis"; }
.rechner-garten { grid-area: garten; min-width: 0; margin: 0 0 1.25rem; padding: 0.6rem; border: 1px solid var(--linie); border-radius: var(--radius-gross); background: var(--karte); box-shadow: var(--schatten); }
.rechner-raster > .rechner { grid-area: form; }
.rechner-raster > .rechner-ergebnis { grid-area: ergebnis; }
@media (min-width: 64rem) {
  .rechner-raster { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); grid-template-areas: "form garten" "ergebnis garten"; align-items: start; }
  .rechner-garten { position: sticky; top: 1.25rem; margin: 0; }
  /* Schmale Spalte: Werkzeug über, Fläche und Massstab unter dem Bild wie mobil. */
  .rechner-garten .garten-flaeche { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem; padding: 0.45rem; }
  .rechner-garten .garten-bild { order: 2; aspect-ratio: 6 / 5; border-radius: 14px; background: radial-gradient(120% 90% at 30% 15%, var(--papier-2), var(--lichtung) 70%); }
  .rechner-garten .garten-werkzeug { position: static; order: 1; width: 100%; justify-content: flex-start; }
  .rechner-garten .garten-zahl { position: static; order: 3; }
  .rechner-garten .garten-massstab { position: static; order: 4; flex: 1; width: auto; }
}

/* Startseite mobil: die Modelle als Reihe zum Wischen statt zwölf Karten
   untereinander. Die Reihe läuft bis an den Rand, rastet je Karte ein. */
@media (max-width: 47.99rem) {
  .start-modelle .karten {
    grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(78%, 20rem);
    margin-inline: calc(-1 * var(--rand)); padding: 0.25rem var(--rand) 1rem;
    overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: var(--rand);
    scrollbar-width: none;
  }
  .start-modelle .karten > li { scroll-snap-align: start; }
}