@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/Fraunces-Latin.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fraunces';
  src: url('/assets/fonts/Fraunces-LatinExt.woff2') format('woff2');
  font-weight: 300 700; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/assets/fonts/source-sans-3-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/assets/fonts/source-sans-3-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'Source Sans 3';
  src: url('/assets/fonts/source-sans-3-700.woff2') format('woff2');
  font-weight: 700; font-style: normal; font-display: swap;
}

/* Kalibrierter Fallback: verhindert den Sprung beim Font-Swap. Werte gegen
   Arial gemessen, alle drei genutzten Weights sind oben als @font-face da. */
@font-face {
  font-family: 'SourceSans-Fallback';
  src: local('Arial');
  size-adjust: 96.5%; ascent-override: 105%; descent-override: 29%; line-gap-override: 0%;
}

:root {
  /* Grundflaechen: warmes Papier, kein Reinweiss, kein Reinschwarz */
  --papier: #F7F4EE;
  --papier-tief: #EFEAE0;
  --karte: #FFFDF9;
  --tinte: #1E221C;
  --tinte-weich: #3B4238;
  --stumm: #666D61;

  /* Moosgruen traegt die Struktur, Terrakotta traegt jede Handlung.
     Genau eine Akzentfarbe, damit ein oranger Punkt immer heisst: hier klicken. */
  --moos: #34492F;
  --moos-hell: #4C6644;
  --moos-blass: #DCE4D6;
  --moos-hauch: #EDF1E9;
  --terra: #A9502F;
  --terra-dunkel: #833C21;
  --terra-hauch: #F7EBE4;

  --linie: #DED7C9;
  --linie-fein: #E9E3D7;

  /* Naehrstoffe bekommen feste Farben. Funktional, nicht dekorativ: derselbe
     Stickstoff hat auf Profilseite, im Diagnosebaum und in der Tabelle denselben Ton. */
  --n: #2F6B4F;
  --p: #7A5230;
  --k: #4A5A8C;
  --mg: #6B4573;
  --fe: #8C4A2F;

  --warn: #7A5A16;
  --warn-grund: #FBF5E6;
  --warn-linie: #E3D2A6;

  --maxw: 1220px;
  --maxw-text: 68ch;
  --radius: 3px;
  --easing: cubic-bezier(0.16, 1, 0.3, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body {
  margin: 0;
  background: var(--papier);
  color: var(--tinte);
  font-family: 'Source Sans 3', 'SourceSans-Fallback', Arial, sans-serif;
  font-size: clamp(1.0625rem, 0.99rem + 0.36vw, 1.1875rem);
  line-height: 1.65;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: 'Fraunces', Georgia, 'Times New Roman', serif;
  color: var(--moos);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
  text-wrap: balance;
}
h1 { font-size: clamp(2rem, 1.45rem + 2.6vw, 3.4rem); font-weight: 600; }
h2 { font-size: clamp(1.5rem, 1.25rem + 1.2vw, 2.1rem); font-weight: 600; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
h3 { font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem); font-weight: 600; margin-top: 2.2em; }
h4 { font-size: 1.05rem; font-weight: 700; margin-top: 1.8em; font-family: 'Source Sans 3', 'SourceSans-Fallback', Arial, sans-serif; letter-spacing: 0; }

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

a { color: var(--terra-dunkel); text-decoration: underline; text-decoration-color: #D8B39F; text-underline-offset: .18em; text-decoration-thickness: 1px; }
a:hover, a:focus-visible { text-decoration-color: currentColor; }
:focus-visible { outline: 2px solid var(--terra); outline-offset: 3px; }

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

strong, b { font-weight: 700; }
small { font-size: .875rem; }
hr { border: 0; border-top: 1px solid var(--linie); margin: 2.5rem 0; }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1rem, .55rem + 2.2vw, 2.25rem); }
.textbreite { max-width: var(--maxw-text); }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.vgw { position: static; }

/* ---------- Kopf ---------- */

.kopf { border-bottom: 1px solid var(--linie); background: var(--papier); }
.kopf-innen { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding-block: clamp(.85rem, .7rem + .6vw, 1.25rem); }

.marke { display: inline-flex; align-items: baseline; font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.25rem, 1.1rem + .7vw, 1.6rem); font-weight: 600; color: var(--moos); text-decoration: none; letter-spacing: -0.02em; }
.marke:hover { color: var(--moos-hell); }
.marke .marke-punkt { color: var(--terra); }

.hauptnav ul { display: flex; flex-wrap: wrap; gap: clamp(.75rem, .4rem + 1.1vw, 1.6rem); list-style: none; margin: 0; padding: 0; }
.hauptnav a { font-size: .975rem; font-weight: 600; color: var(--tinte-weich); text-decoration: none; padding: .4rem .1rem; border-bottom: 2px solid transparent; transition: border-color .18s var(--easing), color .18s var(--easing); }
.hauptnav a:hover, .hauptnav a:focus-visible { color: var(--moos); border-bottom-color: var(--terra); }
.hauptnav a[aria-current="page"] { color: var(--moos); border-bottom-color: var(--moos-blass); }

@media (max-width: 720px) {
  .kopf-innen { flex-direction: column; align-items: flex-start; gap: .6rem; }
  .hauptnav ul { gap: .9rem; }
}

/* ---------- Papier ----------
   Eine feine Maserung ueber der ganzen Seite, damit das Beige nicht nach
   Bildschirm aussieht. Fixe Kachel, kein Bild von aussen, keine Bewegung. */

body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .055; background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .2 0 0 0 0 .15 0 0 0 0 .1 0 0 0 .9 0'/></filter><rect width='240' height='240' filter='url(%23n)'/></svg>"); background-size: 240px 240px; mix-blend-mode: multiply; }
/* main bekommt bewusst KEINEN eigenen Stacking-Kontext: mix-blend-mode der Tafeln muss bis zum Body-Papier durchblenden. Bloecke ohne eigenen Hintergrund haetten sonst nichts, womit sie multiplizieren. */
.kopf, .fuss { position: relative; z-index: 1; }

/* ---------- Tafeln ----------
   Die Chromolithographien liegen per multiply auf dem Papier, dadurch
   verschwindet ihr eigener cremefarbener Grund. Kein Rahmen, kein Schatten:
   eine Tafel ist ein Druck auf derselben Seite, kein Foto in einem Kasten. */

.tafel { mix-blend-mode: multiply; width: 100%; height: auto; }
figure.tafel-figur { margin: 0; }
.tafel-breit { max-width: 900px; margin: 0 0 clamp(1.5rem, 1rem + 2vw, 2.5rem); }
.tafel-figur figcaption { font-size: .8125rem; color: var(--stumm); margin-top: .6rem; font-style: italic; }

/* ---------- Hero: Poster, links Text, rechts die Tafel ---------- */

.hero { border-bottom: 1px solid var(--linie); background: linear-gradient(178deg, var(--moos-hauch) 0%, var(--papier) 78%); overflow: hidden; }
.hero-innen { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 4vw, 5rem); align-items: end; padding-block: clamp(3rem, 2rem + 5vw, 6rem) 0; }
.hero-anriss { padding-bottom: clamp(3rem, 2rem + 5vw, 6rem); }
@media (max-width: 900px) { .hero-innen { grid-template-columns: 1fr; gap: 1.5rem; } .hero-anriss { padding-bottom: 0; } }

.hero h1 { margin-bottom: .35em; font-size: clamp(2.3rem, 1.5rem + 3.4vw, 4.2rem); letter-spacing: -.025em; }
.hero h1 em { font-style: italic; font-weight: 500; color: var(--terra-dunkel); }
.hero-lead { font-size: clamp(1.125rem, 1.05rem + .35vw, 1.3rem); color: var(--tinte-weich); max-width: 44ch; }
.hero-handlung { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; margin-top: 1.75rem; }
.hero-handlung .nebenweg { font-weight: 600; color: var(--moos); text-decoration-color: var(--moos-blass); }

/* Nur die Tafel bewegt sich beim Laden, nie der Text: was in der
   Verzoegerungsphase unsichtbar ist, fehlt jedem Screenshot. */
.hero-tafel { align-self: end; margin-bottom: -6%; }
/* Animation auf dem Bild selbst: ein animierter Wrapper waere ein eigener Stacking-Kontext, und mix-blend-mode haette darin keinen Untergrund. */
.hero-tafel .tafel { transform-origin: bottom center; animation: wachsen 1.1s var(--easing) both; }
.hero-tafel .tafel { max-height: min(78vh, 720px); width: auto; max-width: 100%; margin-inline: auto; }
@keyframes wachsen { from { transform: translateY(18px) scale(.985); } to { transform: none; } }
@media (max-width: 900px) { .hero-tafel { margin-bottom: -4%; } .hero-tafel .tafel { max-height: 60vh; } }
@media (prefers-reduced-motion: reduce) { .hero-tafel .tafel { animation: none; } }

/* Ohne Tafel (Bild noch nicht da) bleibt der Hero ein reiner Textblock. */
.hero-innen.ohne-tafel { grid-template-columns: 1fr; }
.hero-innen.ohne-tafel .hero-anriss { padding-bottom: clamp(3rem, 2rem + 5vw, 6rem); }

/* ---------- Knoepfe ---------- */

.knopf { display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .6rem 1.15rem; background: var(--terra); color: #fff; font-weight: 600; font-size: 1rem; text-decoration: none; border: 1px solid var(--terra); border-radius: var(--radius); cursor: pointer; transition: background-color .18s var(--easing), transform .18s var(--easing); }
.knopf:hover, .knopf:focus-visible { background: var(--terra-dunkel); border-color: var(--terra-dunkel); color: #fff; transform: translateY(-1px); }
.knopf-still { background: transparent; color: var(--moos); border-color: var(--moos-blass); }
.knopf-still:hover, .knopf-still:focus-visible { background: var(--moos-hauch); border-color: var(--moos-hell); color: var(--moos); }

/* ---------- Abschnitte ---------- */

main { counter-reset: kapitel; }
.block { padding-block: clamp(3rem, 2.2rem + 3.5vw, 5.5rem); }
.block + .block:not(.block-getoent) { border-top: 1px solid var(--linie); }
.block-kopf .dachzeile::before { counter-increment: kapitel; content: counter(kapitel, upper-roman) "\2002\00B7\2002"; font-family: 'Fraunces', Georgia, serif; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--stumm); }
.block-getoent { background: var(--papier-tief); border-block: 1px solid var(--linie); }
.block-kopf { max-width: 60ch; margin-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.75rem); }
.block-kopf h2 { margin-top: 0; }
.block-kopf p { color: var(--tinte-weich); }

.dachzeile { display: block; font-family: 'Source Sans 3', 'SourceSans-Fallback', Arial, sans-serif; font-size: .8125rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--terra); margin-bottom: .7em; }

/* Werkzeuge: bewusst nicht drei gleiche Kacheln, sondern eins gross, zwei schmal */
/* Hauptbuch: eine Zeile je Werkzeug, getrennt durch Haarlinien, links die
   kleine Tafel, rechts der Beleg. Keine Karten, die Trennung macht die Linie. */
.hauptbuch { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--linie); }
.hauptbuch li { border-bottom: 1px solid var(--linie); }
.hauptbuch a { display: grid; grid-template-columns: minmax(0, 140px) minmax(0, 1.4fr) minmax(0, 1fr); gap: clamp(1rem, .6rem + 1.5vw, 2.5rem); align-items: center; padding-block: clamp(1.25rem, 1rem + 1vw, 2rem); text-decoration: none; color: inherit; transition: background-color .2s var(--easing); }
.hauptbuch a:hover, .hauptbuch a:focus-visible { background: var(--moos-hauch); }
.hauptbuch .hb-tafel { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; }
.hauptbuch .hb-tafel .tafel { max-height: 140px; width: auto; }
.hauptbuch .hb-tafel:empty { visibility: hidden; }
.hauptbuch h3 { margin: 0 0 .3em; font-size: clamp(1.35rem, 1.2rem + .7vw, 1.8rem); }
.hauptbuch p { margin: 0; color: var(--tinte-weich); font-size: .975rem; max-width: 46ch; }
.hauptbuch .hb-nr { display: block; font-family: 'Fraunces', Georgia, serif; font-weight: 500; color: var(--stumm); font-size: .95rem; margin-bottom: .25rem; }
.hauptbuch .hb-hinweis { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-style: italic; color: var(--moos); font-size: 1.05rem; }
@media (max-width: 760px) {
  .hauptbuch a { grid-template-columns: 72px minmax(0, 1fr); }
  .hauptbuch a:has(.hb-tafel:empty) { grid-template-columns: minmax(0, 1fr); }
  .hauptbuch a:has(.hb-tafel:empty) .hb-beleg { grid-column: 1; }
  .hauptbuch .hb-tafel .tafel { max-height: 72px; }
  .hauptbuch .hb-beleg { grid-column: 2; }
}
.beweis { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; }
.beweis li { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem 1rem; align-items: baseline; font-size: .9375rem; }
.beweis .produkt { color: var(--tinte-weich); }
.beweis .gehalt { color: var(--stumm); font-variant-numeric: tabular-nums; }
.beweis .je-kilo { font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: var(--moos); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Die grosse Kachel zeigt die Rechnung, statt sie anzukuendigen. */
.beweis { list-style: none; margin: 1.5rem 0 0; padding: 1.25rem 0 0; border-top: 1px solid var(--linie-fein); display: grid; gap: .55rem; }
.beweis li { display: grid; grid-template-columns: 1fr auto auto; gap: .5rem 1rem; align-items: baseline; font-size: .9375rem; }
.beweis .produkt { color: var(--tinte-weich); }
.beweis .gehalt { color: var(--stumm); font-variant-numeric: tabular-nums; }
.beweis .je-kilo { font-family: 'Fraunces', Georgia, serif; font-weight: 600; color: var(--moos); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 480px) { .beweis li { grid-template-columns: 1fr auto; } .beweis .gehalt { grid-column: 1; } }

/* ---------- Register: Listen statt Kartensuppe ---------- */

.register { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); gap: 0 clamp(1rem, .6rem + 1.5vw, 2.5rem); list-style: none; margin: 0; padding: 0; }
.register li { border-bottom: 1px solid var(--linie-fein); }
.register a { display: flex; align-items: baseline; justify-content: space-between; gap: .75rem; min-height: 44px; padding: .55rem .5rem .55rem .1rem; text-decoration: none; color: var(--tinte); font-weight: 600; font-size: 1rem; transition: background-color .16s var(--easing), padding-left .16s var(--easing); }
.register a:hover, .register a:focus-visible { background: var(--moos-hauch); padding-left: .5rem; }
.nach-register { margin-top: 1.75rem; }
.register .beiwert { font-family: 'Fraunces', Georgia, serif; font-size: .875rem; font-weight: 400; color: var(--stumm); font-variant-numeric: tabular-nums; }

/* ---------- Hinweisblock, ohne KI-Rahmen-Optik ---------- */

.hinweis { position: relative; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: 1.25rem 1.5rem 1.25rem 1.75rem; margin: 2.25rem 0 2rem; box-shadow: 0 1px 0 var(--linie-fein), 0 10px 30px -22px rgba(52,73,47,.35); }
.hinweis::after { content: ""; position: absolute; inset: 5px; border: 1px solid var(--linie-fein); border-radius: 2px; pointer-events: none; }
.hinweis::before { content: ""; position: absolute; top: -16px; left: 1.25rem; width: 34px; height: 34px; border-radius: 50%; background: var(--moos) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23F7F4EE' d='M19 4c-7 0-12 3-13 10 2-4 5-6 9-7-4 2-7 5-8 10 1 1 2 1 3 1 6 0 9-6 9-14z'/></svg>") center/20px no-repeat; z-index: 1; }
.hinweis p { font-size: .975rem; }
.hinweis-warn { background: var(--warn-grund); border-color: var(--warn-linie); }
.hinweis-warn::before { background-color: var(--warn); background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%23FBF5E6' d='M11 4h2v10h-2zM11 17h2v3h-2z'/></svg>"); }
.hinweis-warn strong { color: var(--warn); }

/* ---------- Tabellen ---------- */

.tabelle-huelle { overflow-x: auto; margin: 1.75rem 0; border: 1px solid var(--linie); border-radius: var(--radius); background: var(--karte); }
table { border-collapse: collapse; width: 100%; min-width: 34rem; font-size: .9375rem; }
caption { text-align: left; font-size: .875rem; color: var(--stumm); padding: .75rem 1rem 0; }
th, td { text-align: left; padding: .65rem 1rem; border-bottom: 1px solid var(--linie-fein); vertical-align: top; }
thead th { background: var(--moos-hauch); color: var(--moos); font-size: .8125rem; letter-spacing: .05em; text-transform: uppercase; border-bottom: 1px solid var(--linie); white-space: nowrap; }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: var(--papier-tief); }
td.zahl, th.zahl { text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- Naehrstoff-Marker ---------- */

.npk { display: inline-flex; gap: .3rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.npk span { padding: .05rem .35rem; border-radius: 2px; font-size: .875rem; color: #fff; }
.npk .w-n { background: var(--n); }
.npk .w-p { background: var(--p); }
.npk .w-k { background: var(--k); }

/* ---------- Diagnose-Dialog ---------- */

.dialog { max-width: 44rem; }
.dialog-frage { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.35rem, 1.2rem + .8vw, 1.85rem); font-weight: 600; color: var(--moos); line-height: 1.2; margin: 0 0 1.5rem; }
.artikel .dialog-optionen { display: grid; gap: .65rem; list-style: none; margin: 0 0 2rem; padding: 0; max-width: none; }
.hauptbuch a:has(.hb-tafel:empty) { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); }
.hauptbuch a:has(.hb-tafel:empty) .hb-tafel { display: none; }
.dialog-optionen .schema { width: 64px; height: 64px; display: block; }
.dialog-optionen .schema svg { width: 100%; height: 100%; display: block; overflow: visible; }
.dialog-optionen a.ohne-schema { grid-template-columns: minmax(0, 1fr); }
.dialog-optionen a { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 1rem; align-items: center; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: .9rem 1.15rem .9rem 1.35rem; text-decoration: none; color: var(--tinte); font-weight: 600; overflow: hidden; transition: background-color .18s var(--easing), border-color .18s var(--easing); }
.dialog-optionen a::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--terra); transform: scaleY(0); transform-origin: top; transition: transform .22s var(--easing); }
.dialog-optionen a:hover, .dialog-optionen a:focus-visible { background: var(--moos-hauch); border-color: var(--moos-blass); }
.dialog-optionen a:hover::before, .dialog-optionen a:focus-visible::before { transform: scaleY(1); }
.dialog-optionen .zusatz { display: block; font-weight: 400; font-size: .9375rem; color: var(--stumm); margin-top: .15rem; }

.dialog-pfad { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .875rem; color: var(--stumm); margin-bottom: 1.5rem; }
.dialog-pfad a { color: var(--stumm); }

/* ---------- Fuss ---------- */

.fuss { background: var(--moos); color: #D7DFD1; padding-block: clamp(2.5rem, 2rem + 2vw, 4rem); margin-top: clamp(3rem, 2.5rem + 2vw, 5rem); }
.fuss-innen { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 2rem clamp(1.5rem, 1rem + 2vw, 3rem); }
.fuss h2 { font-size: .8125rem; font-family: 'Source Sans 3', 'SourceSans-Fallback', Arial, sans-serif; letter-spacing: .11em; text-transform: uppercase; color: #A9BCA0; margin: 0 0 .9em; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .45em; }
.fuss a { color: #EAF0E6; text-decoration: none; }
.fuss a:hover, .fuss a:focus-visible { text-decoration: underline; text-decoration-color: currentColor; }
.fuss-schluss { border-top: 1px solid #4C6644; margin-top: 2.5rem; padding-top: 1.5rem; font-size: .875rem; color: #A9BCA0; }
.fuss-schluss p { max-width: 75ch; }

/* ---------- Produktboxen (Amazon-Modul, BEM-Klassen sind Master) ---------- */
/* Die --ab-* Properties binden das Modul an das Farbsystem der Seite. Einzige
   bewusste Ausnahme von der Ein-Akzent-Regel ist der Amazon-Knopf: das Orange
   ist eine Erwartung, die der Nutzer mitbringt, und die traegt hier mehr als
   Konsequenz. Alles andere folgt Moos und Terrakotta. */
:root {
  --ab-accent:      var(--terra);
  --ab-accent-dark: var(--terra-dunkel);
  --ab-cta:         #F0A02C;
  --ab-cta-dark:    #D98A18;
  --ab-cta-text:    #241703;
  --ab-ink:         var(--tinte);
  --ab-ink-soft:    var(--tinte-weich);
  --ab-muted:       var(--stumm);
  --ab-pro:         var(--n);
  --ab-con:         var(--terra-dunkel);
  --ab-bg:          var(--karte);
  --ab-line:        var(--linie);
  --ab-feedback-bg: var(--moos-hauch);
  --ab-radius:      var(--radius);
}

.ab-product { display: flex; gap: 1.25rem; align-items: flex-start; background: var(--ab-bg); border: 1px solid var(--ab-line); border-left: 3px solid var(--ab-accent); border-radius: var(--ab-radius); padding: 1.35rem 1.5rem; margin: 2rem 0; color: var(--ab-ink-soft); }
.ab-product__image { flex: 0 0 165px; position: relative; background: #fff; border: 1px solid var(--ab-line); border-radius: var(--ab-radius); padding: .65rem; text-align: center; }
.ab-product__image img { max-width: 100%; height: auto; max-height: 180px; object-fit: contain; mix-blend-mode: multiply; }
.ab-product__badge { position: absolute; top: .5rem; left: .5rem; background: var(--ab-accent); color: #fff; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .15rem .55rem; border-radius: 2px; }
.ab-product__badge--nobild { position: static; display: inline-block; margin: 0 0 .5rem; }
.ab-product__body { min-width: 0; flex: 1; }
.ab-product__title { font-family: 'Fraunces', Georgia, serif; font-size: 1.2rem; font-weight: 600; margin: 0 0 .15em; color: var(--ab-ink); line-height: 1.25; letter-spacing: -0.01em; }
.ab-product__title a { color: var(--ab-ink); text-decoration: none; }
.ab-product__title a:hover, .ab-product__title a:focus-visible { color: var(--ab-accent-dark); }
.ab-product__brand { display: block; font-size: .8125rem; color: var(--ab-muted); margin: 0 0 .5rem; }
.ab-product__price { font-family: 'Fraunces', Georgia, serif; font-size: 1.5rem; font-weight: 600; color: var(--ab-ink); line-height: 1.1; margin: 0 0 .7rem; font-variant-numeric: tabular-nums; }
.ab-product__price-note { font-family: 'Source Sans 3', 'SourceSans-Fallback', Arial, sans-serif; font-size: .8125rem; font-weight: 400; color: var(--ab-muted); }
.ab-product__price-stamp { font-size: .78rem; color: var(--ab-muted); margin: -.5rem 0 .7rem; }
.ab-product__desc { margin: 0 0 .9rem; font-size: .9375rem; }
.ab-product__proscons { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem 1.4rem; margin: 0 0 .9rem; }
.ab-product__proscons ul { margin: .3rem 0 0; padding: 0; list-style: none; background: none; border: 0; }
.ab-product__proscons li { position: relative; padding: .12rem 0 .12rem 1.35rem; font-size: .9rem; line-height: 1.45; }
.ab-product__pros-label, .ab-product__cons-label { font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; }
.ab-product__pros-label { color: var(--ab-pro); }
.ab-product__cons-label { color: var(--ab-con); }
.ab-product__pros li::before, .ab-product__cons li::before { position: absolute; top: 0; font-weight: 700; font-size: 1rem; line-height: 1.5; }
.ab-product__pros li::before { content: "+"; left: .1rem; color: var(--ab-pro); }
.ab-product__cons li::before { content: "!"; left: .25rem; color: var(--ab-con); }
.ab-product__feedback { font-size: .9rem; background: var(--ab-feedback-bg); border-radius: var(--ab-radius); padding: .7rem .9rem; margin: 0 0 .9rem; }
.ab-product__verdict { font-size: .9375rem; color: var(--ab-ink); border-left: 3px solid var(--ab-accent); padding: .15rem 0 .15rem .8rem; margin: 0 0 1rem; }
.ab-product__cta { display: inline-flex; align-items: center; min-height: 44px; background: var(--ab-cta); color: var(--ab-cta-text); font-weight: 700; padding: .7rem 1.6rem; border-radius: var(--ab-radius); text-decoration: none; transition: background-color .18s var(--easing), transform .18s var(--easing); }
.ab-product__cta:hover, .ab-product__cta:focus-visible { background: var(--ab-cta-dark); color: var(--ab-cta-text); transform: translateY(-1px); }

@media (max-width: 620px) {
  .ab-product { flex-direction: column; gap: .9rem; }
  .ab-product__image { flex: none; width: 100%; max-width: 220px; margin: 0 auto; }
  .ab-product__proscons { grid-template-columns: 1fr; gap: .7rem; }
  .ab-product__cta { display: flex; justify-content: center; }
}

/* ---------- Werbekennzeichnung ---------- */
/* Sitzt am Anfang des Abschnitts, in dem die Werbung wirklich steht, nicht ganz
   oben. Oben wuerde sie die eigentliche Antwort nach unten schieben. */
.werbehinweis { border: 1px solid var(--linie); border-radius: var(--radius); background: var(--papier-tief); margin: 2rem 0 1.5rem; font-size: .9rem; }
.werbehinweis > summary { cursor: pointer; padding: .6rem .9rem; font-weight: 600; color: var(--tinte-weich); list-style: none; display: flex; align-items: center; gap: .5rem; }
.werbehinweis > summary::-webkit-details-marker { display: none; }
.werbehinweis > summary::before { content: "Werbung"; font-size: .7rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #fff; background: var(--stumm); padding: .1rem .45rem; border-radius: 2px; }
.werbehinweis > summary::after { content: "\203A"; margin-left: auto; transition: transform .2s var(--easing); }
.werbehinweis[open] > summary::after { transform: rotate(90deg); }
.werbehinweis > div { padding: 0 .9rem .8rem; color: var(--tinte-weich); }
.werbehinweis p { margin-bottom: .6em; }

/* ---------- Artikelseiten ---------- */

.artikel { padding-block: clamp(2.5rem, 2rem + 2.5vw, 4rem); }
.artikel-kopf { max-width: var(--maxw-text); margin-bottom: clamp(1.75rem, 1.4rem + 1.5vw, 2.5rem); }
.artikel-kopf h1 { margin-bottom: .3em; }
.artikel-kopf.mit-tafel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: clamp(1.5rem, 1rem + 2.5vw, 4rem); align-items: end; max-width: none; }
.artikel-kopf-text { max-width: var(--maxw-text); }
.artikel-kopf-tafel .tafel { max-height: 360px; width: auto; max-width: 100%; margin-inline: auto; }
@media (max-width: 900px) { .artikel-kopf.mit-tafel { grid-template-columns: 1fr; gap: 1.25rem; } .artikel-kopf-tafel .tafel { max-height: 220px; margin-inline: 0; } }
.artikel .lead { font-size: clamp(1.1rem, 1.03rem + .35vw, 1.25rem); color: var(--tinte-weich); max-width: 60ch; }
.artikel-meta { font-size: .85rem; color: var(--stumm); margin-top: 1rem; }
.artikel .textbreite { max-width: var(--maxw-text); }

.inhalt { background: var(--moos-hauch); border-radius: var(--radius); padding: 1.1rem 1.35rem; margin: 2rem 0; max-width: 34rem; }
.inhalt h2 { font-family: 'Source Sans 3', 'SourceSans-Fallback', Arial, sans-serif; font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--moos); margin: 0 0 .7em; }
.inhalt ol { margin: 0; padding-left: 1.3rem; }
.inhalt li { margin-bottom: .3em; font-size: .95rem; }
.inhalt a { color: var(--tinte); text-decoration-color: var(--moos-blass); }
.inhalt a:hover { color: var(--terra-dunkel); }

/* Die Aufwandmenge gross setzen: das ist die Zahl, wegen der die Leute kommen. */
.kennzahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 165px), 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; margin: 2rem 0; }
.kennzahl > div { background: var(--karte); padding: 1rem 1.15rem; }
.kennzahl dt { font-size: .75rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--stumm); margin-bottom: .3rem; }
.kennzahl dd { margin: 0; font-family: 'Fraunces', Georgia, serif; font-size: 1.45rem; font-weight: 600; color: var(--moos); line-height: 1.15; font-variant-numeric: tabular-nums; }
.kennzahl dd small { display: block; font-family: 'Source Sans 3', 'SourceSans-Fallback', Arial, sans-serif; font-size: .8125rem; font-weight: 400; color: var(--tinte-weich); margin-top: .2rem; line-height: 1.4; }

/* ---------- Listen im Fliesstext ---------- */

.artikel ul, .artikel ol { max-width: var(--maxw-text); padding-left: 1.35rem; margin: 0 0 1.15em; }
.artikel li { margin-bottom: .35em; }
.artikel li::marker { color: var(--moos-hell); }
.inhalt li::marker { color: var(--stumm); }

/* ---------- Rechtsseiten ---------- */

/* Der Kurzueberblick oben steht im Hinweisblock. Die Ueberschrift darin darf
   nicht wie eine normale H2 nach oben abstehen. */
.hinweis h2 { margin-top: 0; font-size: 1.15rem; }
.hinweis > p:last-child { margin-bottom: 0; }

.anbieter { display: block; background: var(--karte); border: 1px solid var(--linie); border-left: 3px solid var(--terra); border-radius: var(--radius); padding: 1.35rem 1.6rem; margin: 1rem 0 1.5rem; font-style: normal; max-width: 34rem; }
.anbieter-firma { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--stumm); margin-bottom: .5rem; }
.anbieter-name { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 1.35rem; font-weight: 600; letter-spacing: -.01em; line-height: 1.25; color: var(--moos); margin-bottom: .7rem; }
.anbieter-adresse { display: block; color: var(--tinte-weich); line-height: 1.65; }
.anbieter-land { display: block; margin-top: .5rem; font-size: .9rem; color: var(--stumm); }
@media (max-width: 480px) { .anbieter { padding: 1.1rem; } }

.exali { display: flex; gap: 1.25rem; align-items: flex-start; flex-wrap: wrap; margin: 1rem 0 1.5rem; }
.exali-text { flex: 1 1 260px; }
.exali-text p:first-child { margin-top: 0; }
.exali-siegel { border: 1px solid var(--linie); border-radius: 2px; width: 108px; height: auto; }
.oeko-banner img { border-radius: 2px; margin: .25rem 0 .6rem; }

.artikel code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .875em; background: var(--papier-tief); padding: .1em .35em; border-radius: 2px; }

/* ---------- Kurzwahl: die Auswahl direkt unter der H1 ---------- */
/* Muster von weihnachtsbaum-christbaum.de. Wer kaufen will, sieht die Auswahl
   sofort und springt per Anker zur Besprechung. Kein Vorlauftext davor. */

.kurzwahl { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 1px; background: var(--linie); border: 1px solid var(--linie); border-radius: var(--radius); overflow: hidden; margin: 0 0 clamp(2rem, 1.6rem + 1.6vw, 3rem); }
.kurzwahl-karte { display: flex; gap: .9rem; align-items: flex-start; background: var(--karte); padding: 1rem 1.15rem; text-decoration: none; color: inherit; transition: background-color .18s var(--easing); }
.kurzwahl-karte:hover, .kurzwahl-karte:focus-visible { background: var(--moos-hauch); }
.kurzwahl-bild { flex: 0 0 62px; background: #fff; border: 1px solid var(--linie-fein); border-radius: 2px; padding: .25rem; }
.kurzwahl-bild img { width: 100%; height: auto; object-fit: contain; mix-blend-mode: multiply; }
.kurzwahl-text { min-width: 0; }
.kurzwahl-rolle { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--terra); margin-bottom: .25rem; }
.kurzwahl-titel { display: block; font-family: 'Fraunces', Georgia, serif; font-size: 1rem; font-weight: 600; line-height: 1.25; color: var(--moos); margin-bottom: .25rem; }
.kurzwahl-info { display: block; font-size: .875rem; color: var(--tinte-weich); line-height: 1.45; }

.produkt-anker { scroll-margin-top: 1.5rem; }

/* Der Pflichthinweis fuer Pflanzenschutzmittel darf nicht wie ein beliebiger
   Kasten aussehen, er ist gesetzlich vorgeschrieben. */
.psm { border-width: 2px; }
.psm > p:first-child { font-size: 1rem; }

/* ---------- Marktuebersicht ---------- */

.markt { font-size: .9rem; min-width: 44rem; }
.markt td:first-child { line-height: 1.4; }
.markt a { color: var(--tinte); text-decoration-color: var(--linie); font-weight: 600; }
.markt a:hover, .markt a:focus-visible { color: var(--terra-dunkel); text-decoration-color: currentColor; }
.markt-marke, .markt-npk, .markt-offen { display: inline-block; font-size: .72rem; font-weight: 600; letter-spacing: .04em; padding: .05rem .4rem; border-radius: 2px; margin-left: .4rem; white-space: nowrap; }
.markt-marke { background: var(--moos-hauch); color: var(--moos); }
.markt-npk { background: var(--papier-tief); color: var(--stumm); font-variant-numeric: tabular-nums; }
.markt-offen { color: var(--stumm); font-weight: 400; font-style: italic; margin-left: 0; }
.markt tbody tr:first-child td { background: var(--moos-hauch); }
.markt tbody tr:first-child:hover td { background: var(--moos-blass); }

.tabelle-fuss { font-size: .85rem; color: var(--stumm); max-width: var(--maxw-text); margin-top: -1rem; }

/* ---------- Pflanzenprofile ---------- */
/* Monatsleiste: zwoelf Zellen, drei Stufen. Moos traegt die Duengezeit,
   Papier die Ruhe. Keine weitere Farbe, das Orange bleibt den Links. */

.monate { margin: 2rem 0 .75rem; max-width: 60rem; }
.monate ol { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 3px; list-style: none; margin: 0; padding: 0; }
.monate li { text-align: center; font-size: .75rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; padding: .6rem 0 .5rem; border-radius: 2px; background: var(--papier-tief); color: var(--stumm); border: 1px solid var(--linie-fein); }
.monate abbr { text-decoration: none; }
.monate .m1 { background: var(--moos-blass); color: var(--moos); border-color: var(--moos-blass); }
.monate .m2 { background: var(--moos); color: #EAF0E6; border-color: var(--moos); }
.monate-legende { display: flex; flex-wrap: wrap; gap: 1.25rem; font-size: .8125rem; color: var(--stumm); margin: .6rem 0 0; }
.monate-legende span::before { content: ""; display: inline-block; width: .75rem; height: .75rem; border-radius: 2px; margin-right: .4rem; vertical-align: -1px; background: var(--papier-tief); border: 1px solid var(--linie-fein); }
.monate-legende .l1::before { background: var(--moos-blass); border-color: var(--moos-blass); }
.monate-legende .l2::before { background: var(--moos); border-color: var(--moos); }
.monate-hinweis { color: var(--tinte-weich); font-size: .975rem; max-width: var(--maxw-text); margin-top: .75rem; }
@media (max-width: 600px) { .monate li { font-size: .6rem; letter-spacing: 0; padding: .45rem 0 .35rem; } }

.artikel .eignung { list-style: none; margin: 0 0 1.5rem; padding: 0; max-width: 60rem; border-top: 1px solid var(--linie); }
.eignung li { display: grid; grid-template-columns: minmax(0, 180px) 90px minmax(0, 1fr); gap: 1rem; align-items: start; padding: .9rem 0; margin: 0; border-bottom: 1px solid var(--linie-fein); }
.eignung .e-name { font-weight: 700; }
.eignung .e-name a { color: var(--tinte); text-decoration-color: var(--linie); }
.eignung .e-name a:hover, .eignung .e-name a:focus-visible { color: var(--terra-dunkel); text-decoration-color: currentColor; }
.eignung .e-note { color: var(--tinte-weich); font-size: .95rem; line-height: 1.55; }
.e-badge { display: inline-block; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: .25rem .5rem; border-radius: 2px; text-align: center; min-width: 5rem; margin-top: .1rem; }
.e-ja      { background: var(--moos-hauch); color: var(--moos); }
.e-bedingt { background: var(--warn-grund); color: var(--warn); }
.e-nein    { background: var(--papier-tief); color: var(--tinte-weich); }
@media (max-width: 640px) { .eignung li { grid-template-columns: minmax(0, 1fr) 90px; } .eignung .e-note { grid-column: 1 / -1; } }

.artikel .symptome-liste { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: .6rem; max-width: 44rem; }
.symptome-liste li { margin: 0; }
.symptome-liste a { display: block; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: .9rem 1.15rem; text-decoration: none; color: var(--tinte); transition: background-color .18s var(--easing), border-color .18s var(--easing); }
.symptome-liste a:hover, .symptome-liste a:focus-visible { background: var(--moos-hauch); border-color: var(--moos-blass); }
.symptome-liste strong { display: block; margin-bottom: .15rem; }
.symptome-liste span { display: block; color: var(--tinte-weich); font-size: .95rem; }
.symptome-liste .s-weiter { margin-top: .4rem; font-size: .875rem; font-weight: 600; color: var(--terra-dunkel); text-decoration: underline; text-decoration-color: #D8B39F; text-underline-offset: .18em; }

.artikel .weiter { list-style: none; padding: 0; margin: .5rem 0 0; }
.weiter li { margin-bottom: .45em; }
.weiter a { font-weight: 600; }

.artikel .pflanzen-register { list-style: none; margin: 0 0 1rem; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: clamp(1rem, .7rem + 1.2vw, 1.75rem); }
.pflanzen-register li { margin: 0; }
.pflanzen-register a { display: block; text-decoration: none; color: var(--tinte); border-top: 1px solid var(--linie); padding: 1rem .25rem .75rem; transition: background-color .18s var(--easing); }
.pflanzen-register a:hover, .pflanzen-register a:focus-visible { background: var(--moos-hauch); }
.pflanzen-register .pr-tafel { aspect-ratio: 3 / 4; display: flex; align-items: flex-end; justify-content: center; margin-bottom: .75rem; }
.pflanzen-register .pr-tafel .tafel { max-height: 100%; width: auto; max-width: 100%; }
.pflanzen-register h3 { margin: 0 0 .15em; font-size: 1.2rem; }
.pflanzen-register .beiwert { display: block; font-family: 'Fraunces', Georgia, serif; font-size: .9rem; color: var(--stumm); font-variant-numeric: tabular-nums; }

/* ---------- Hausmittel ---------- */
.register-quer .pr-tafel { aspect-ratio: 4 / 3; }
.artikel .schritte { padding-left: 1.6rem; counter-reset: schritt; list-style: none; }
.schritte li { position: relative; margin-bottom: .9em; padding-left: .4rem; }
.schritte li::before { counter-increment: schritt; content: counter(schritt); position: absolute; left: -1.6rem; top: .05em; width: 1.35rem; height: 1.35rem; border-radius: 50%; background: var(--moos); color: #EAF0E6; font-family: 'Fraunces', Georgia, serif; font-size: .8rem; font-weight: 600; display: flex; align-items: center; justify-content: center; }
.mythen { margin: 0; }
.mythen dt { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 1.1rem; color: var(--moos); margin: 1.4em 0 .3em; }
.mythen dt::before { content: "\201E"; } .mythen dt::after { content: "\201C"; }
.mythen dd { margin: 0; color: var(--tinte); padding-left: 1rem; border-left: 2px solid var(--moos-blass); }
.hausmittel-vergleich td:first-child a { color: var(--tinte); font-weight: 600; text-decoration-color: var(--linie); }
.hausmittel-vergleich tbody tr:last-child td { color: var(--stumm); font-style: italic; }

/* ---------- Kalender ---------- */
.monatsnav { display: flex; flex-wrap: wrap; gap: .35rem .9rem; list-style: none; margin: 0; padding: 0; }
.inhalt .monatsnav { padding-left: 0; }
.monatsnav li { margin: 0; }
.monatsnav a { font-weight: 600; }
.monat { border-top: 1px solid var(--linie); padding: clamp(1.5rem, 1.2rem + 1.2vw, 2.25rem) 0 .5rem; }
.monat h2 { margin-top: 0; display: flex; align-items: baseline; gap: .75rem; }
.monat-nr { font-family: 'Fraunces', Georgia, serif; font-weight: 500; font-size: .85em; color: var(--stumm); font-variant-numeric: tabular-nums; }
.monat-innen { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; }
@media (max-width: 760px) { .monat-innen { grid-template-columns: 1fr; gap: .5rem; } }
.monat-listen h3 { font-family: 'Source Sans 3', 'SourceSans-Fallback', Arial, sans-serif; font-size: .75rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--stumm); margin: 0 0 .4rem; }
.monat-listen h3 + .monat-pflanzen, .monat-listen h3 + .monat-leer { margin-bottom: 1.1rem; }
.artikel .monat-pflanzen { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.monat-pflanzen li { margin: 0; }
.monat-pflanzen a { display: inline-block; padding: .3rem .7rem; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: .9375rem; border: 1px solid var(--moos-blass); background: var(--moos-hauch); color: var(--moos); transition: background-color .16s var(--easing); }
.monat-pflanzen .m2 a { background: var(--moos); color: #EAF0E6; border-color: var(--moos); }
.monat-pflanzen a:hover, .monat-pflanzen a:focus-visible { background: var(--terra-hauch); color: var(--terra-dunkel); border-color: var(--terra); }
.monat-leer { color: var(--stumm); font-style: italic; font-size: .9375rem; margin: 0; }

/* ---------- Rechner ---------- */
.rechner { background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); padding: clamp(1.25rem, 1rem + 1vw, 2rem); margin: 0 0 2.5rem; max-width: 44rem; display: grid; gap: 1.25rem; }
.rechner-feld { border: 0; padding: 0; margin: 0; min-width: 0; }
.rechner-feld > label, .rechner-feld legend { display: block; font-weight: 700; margin-bottom: .5rem; padding: 0; }
.rechner input[type="number"] { font: inherit; font-size: 1.25rem; padding: .6rem .8rem; border: 1px solid var(--linie); border-radius: var(--radius); background: #fff; color: var(--tinte); width: 12rem; max-width: 100%; }
.rechner input[type="number"]:focus-visible { outline: 2px solid var(--terra); outline-offset: 2px; border-color: var(--terra); }
.rechner-wahl { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem .7rem; align-items: baseline; padding: .45rem 0; border-bottom: 1px solid var(--linie-fein); cursor: pointer; }
.rechner-wahl:last-of-type { border-bottom: 0; }
.rechner-wahl input { accent-color: var(--terra); width: 1.1rem; height: 1.1rem; }
.rechner-wahl span { grid-column: 2; color: var(--stumm); font-size: .9375rem; }
.rechner-tabelle { min-width: 48rem; font-size: .9rem; }
.rechner-tabelle td:first-child a { color: var(--tinte); font-weight: 600; text-decoration-color: var(--linie); }
.rechner-tabelle tbody tr:first-child td { background: var(--moos-hauch); }
.rechner-tabelle small { color: var(--stumm); font-weight: 400; }

/* ---------- Vergleich je Naehrstoff ---------- */
.vergleich { min-width: 58rem; font-size: .9rem; }
.vergleich td:first-child a { color: var(--tinte); font-weight: 600; text-decoration-color: var(--linie); }
.vergleich td:first-child a:hover, .vergleich td:first-child a:focus-visible { color: var(--terra-dunkel); text-decoration-color: currentColor; }
.vergleich td.zahl a { color: var(--terra-dunkel); }
.vergleich tbody tr:first-child td { background: var(--moos-hauch); }

/* ---------- Diagnose-Dialog ---------- */
/* Der Befund traegt die Naehrstofffarbe als linken Balken, sonst nichts. Bei
   Befunden ohne Naehrstoff (Staunaesse, Kaelte, Schaedlinge) bleibt der Balken
   moosgruen, damit die Farbe weiterhin nur Naehrstoff heisst. */

.dialog-pfad a { text-decoration: none; background: var(--karte); border: 1px solid var(--linie); border-radius: 999px; padding: .2rem .7rem; color: var(--tinte-weich); transition: border-color .16s var(--easing), color .16s var(--easing); }
.dialog-pfad a:hover, .dialog-pfad a:focus-visible { border-color: var(--terra); color: var(--terra-dunkel); }
.dialog-pfad .pfad-neu { background: transparent; border-color: transparent; color: var(--terra); text-decoration: underline; text-decoration-color: var(--linie); }
.dialog-hilfe { color: var(--stumm); font-size: .9375rem; max-width: var(--maxw-text); margin: -1rem 0 1.5rem; }
.dialog-schritt { font-size: .8125rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--stumm); margin: 0 0 .6rem; }

.befund { background: var(--karte); border: 1px solid var(--linie); border-left: 5px solid var(--moos-hell); border-radius: var(--radius); padding: clamp(1.4rem, 1.1rem + 1.2vw, 2.25rem); margin: 0 0 2.5rem; max-width: 52rem; }
.befund-n  { border-left-color: var(--n); }
.befund-p  { border-left-color: var(--p); }
.befund-k  { border-left-color: var(--k); }
.befund-mg { border-left-color: var(--mg); }
.befund-fe { border-left-color: var(--fe); }
.befund-tafel { float: right; width: min(38%, 300px); margin: 0 0 1rem 1.5rem; }
@media (max-width: 640px) { .befund-tafel { float: none; width: 100%; max-width: 320px; margin: 0 auto 1.25rem; } }
.befund::after { content: ""; display: table; clear: both; }
.befund h2 { margin: 0 0 .5rem; font-size: clamp(1.5rem, 1.3rem + 1vw, 2.1rem); }
.befund-kurz { font-size: 1.1rem; color: var(--tinte-weich); margin: 0 0 1.25rem; }
.befund-urteil { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: .9375rem; padding: .45rem .9rem; border-radius: var(--radius); margin: 0 0 1.75rem; }
.befund-urteil::before { content: ""; width: .6rem; height: .6rem; border-radius: 50%; background: currentColor; }
.urteil-ja      { background: var(--moos-hauch); color: var(--moos); }
.urteil-nein    { background: var(--warn-grund); color: var(--warn); }
.urteil-bedingt { background: var(--papier-tief); color: var(--tinte-weich); }
.befund h3 { font-size: 1.05rem; margin: 1.75rem 0 .5rem; }
.befund ul { padding-left: 1.2rem; }
.befund li { margin-bottom: .55em; }
.artikel .befund-weiter { list-style: none; padding: 0; margin: .5rem 0 0; }
.befund-weiter li { margin-bottom: .4em; }
.befund-weiter a { font-weight: 600; }

.symptome th:first-child, .symptome td:first-child { white-space: nowrap; }
.symptome .npk span { min-width: 2.2rem; text-align: center; }
.npk .w-mg { background: var(--mg); }
.npk .w-fe { background: var(--fe); }
.npk .w-0  { background: var(--stumm); }