/* kompostergarten.de - Stilvorgabe
   Farben aus dem Bestand, Bauregeln aus dem Maskottchen.
   Keine Rahmen, keine schwarzen Schatten. Ein Eckradius. */

@font-face{font-family:DMSans;src:url(fonts/DMSans-Latin.woff2) format('woff2');font-weight:100 1000;font-display:swap}
@font-face{font-family:Vollkorn;src:url(fonts/Vollkorn-VariableFont_wght.woff2) format('woff2');font-weight:400 900;font-display:swap}

/* ---- Palette aus dem Sticker ---- */
:root{
  /* Farben aus dem Bestand von kompostergarten.de */
  --dunkel:#04360A;      /* Kopf und Fuss */
  --tief:#005610;        /* dunkles Markengruen */
  --moos:#006B13;        /* Leitfarbe, das Markengruen */
  --gruen:#4D985A;       /* mittleres Gruen */
  --oliv:#709D16;        /* Oliv aus dem Bestand */
  --gruen-b:#E4EDD8;     /* blasses Gruen, abgeleitet */
  --erde:#B86838;        /* echtes Rotbraun aus der Figur */
  --erde-d:#984828;      /* Schattenton der Figur */
  --ringel:#E8B888;      /* heller Ringel */
  --kontur:#180808;      /* warme Kontur der Figur */
  --gelb:#EBB62C;        /* Gold aus dem Bestand */
  --gold-h:#F3D686;
  --creme:#EFDEB3;
  --kalk:#F4F2ED;        /* Grund aus dem Bestand */
  --kalk-2:#E6E3DA;
  --text:#14270F;
  --grau:#5F6B5C;
  --grund:var(--kalk);
  --flaeche:#FFFFFF;
  --schrift:var(--text);
  --leise:var(--grau);
  --r:14px;
  --disp:Vollkorn,Georgia,serif;
  --disp-w:700;
  --disp-ls:-.012em;
  --disp-lh:1.1;
  /* Fluide Schriftskala, gerechnet zwischen 320 und 1400 Pixeln Fensterbreite.
     Immer rem plus vw, nie reines vw: sonst haengt die Groesse allein am
     Fenster, waechst beim 200-Prozent-Zoom nicht mit und verletzt WCAG 1.4.4.
     Grenzwerte deshalb ebenfalls in rem, nicht in px. */
  --t-xs:clamp(0.6875rem, 0.669rem + 0.093vw, 0.75rem);
  --t-s:clamp(0.7812rem, 0.7627rem + 0.093vw, 0.8438rem);
  --t-sm:clamp(0.875rem, 0.8565rem + 0.093vw, 0.9375rem);
  --t-m:clamp(0.9688rem, 0.9502rem + 0.093vw, 1.0312rem);
  --t-body:clamp(1rem, 0.9815rem + 0.093vw, 1.0625rem);
  --t-l:clamp(1.0312rem, 0.985rem + 0.231vw, 1.1875rem);
  --t-xl:clamp(1.125rem, 1.0694rem + 0.278vw, 1.3125rem);
  --t-2xl:clamp(1.1875rem, 1.1134rem + 0.370vw, 1.4375rem);
  --t-3xl:clamp(1.375rem, 1.2269rem + 0.741vw, 1.875rem);
  --t-4xl:clamp(1.5rem, 1.3519rem + 0.741vw, 2rem);
  --t-5xl:clamp(1.625rem, 1.4398rem + 0.926vw, 2.25rem);
  --t-6xl:clamp(1.9375rem, 1.4375rem + 2.500vw, 3.625rem);
  --t-7xl:clamp(2.125rem, 1.6065rem + 2.593vw, 3.875rem);
  --schatten:0 4px 14px rgba(0,86,16,.12);
  --schatten-t:0 10px 24px rgba(0,86,16,.19);
}
body.dunkel{
  --grund:#0A2410;
  --flaeche:#123018;
  --schrift:#EFF2E9;
  --leise:#9DB09A;
  --kalk:#123018;
  --kalk-2:#1B3D22;
  --schatten:0 6px 16px rgba(0,0,0,.34);
  --schatten-t:0 10px 22px rgba(0,0,0,.42);
}
*{box-sizing:border-box}
body{margin:0;background:var(--grund);color:var(--schrift);
  font-family:DMSans,"Segoe UI",sans-serif;font-size:var(--t-body);line-height:1.62;overflow-x:hidden;
  transition:background .25s,color .25s}
h1,h2,h3,h4{font-family:var(--disp);font-weight:var(--disp-w);margin:0;
  letter-spacing:var(--disp-ls);line-height:var(--disp-lh);text-wrap:balance}

a{color:inherit}

/* ---- Links im Fliesstext ----
   Vorher trugen sie die Textfarbe und nur den duennen Standardstrich des
   Browsers - im Absatz praktisch unsichtbar. Jetzt drei Signale zugleich:
   Markengruen, ein kraeftiger goldener Unterstrich mit Abstand zur Schrift,
   und auf Hover ein heller Grund.

   Gerechnet, nicht geschaetzt: Moosgruen auf dem Grund 6,0 zu 1, also ueber
   den 4,5 der WCAG-Stufe AA. Der Unterschied zum Fliesstext betraegt 2,4 zu 1;
   das allein wuerde 1.4.1 nicht genuegen, deshalb bleibt der Unterstrich.
   Farbe ist hier die Zugabe, nicht das einzige Merkmal.

   Bewusst nur in Textbehaeltern, nicht ueber `.art a`: Brotkrumen, Karten,
   Produkttitel und Knoepfe haben ihre eigene Form und sollen sie behalten. */
.art p a,.art li a,.art td a,.art dd a,.art blockquote a,.art figcaption a{
  color:var(--moos);
  text-decoration:underline;
  text-decoration-color:var(--gelb);
  text-decoration-thickness:2px;
  text-underline-offset:3px;
  border-radius:3px;
  transition:color .15s,background-color .15s,text-decoration-color .15s}

.art p a:hover,.art li a:hover,.art td a:hover,.art dd a:hover,
.art blockquote a:hover,.art figcaption a:hover{
  color:var(--tief);
  background:var(--gruen-b);
  text-decoration-color:var(--tief)}

.art p a:focus-visible,.art li a:focus-visible,.art td a:focus-visible,
.art dd a:focus-visible,.art blockquote a:focus-visible,
.art figcaption a:focus-visible{
  outline:3px solid var(--gelb);outline-offset:2px;background:var(--gruen-b)}

/* Der Goldkasten traegt die Quellenlisten. Moosgruen kommt auf Gold nur auf
   3,6 zu 1 und faellt damit unter die 4,5 der Stufe AA. Dort tragen die Links
   deshalb die dunkle Textfarbe (8,5 zu 1) und unterscheiden sich allein ueber
   den kraeftigeren Strich. Auf Hover dreht sich die Flaeche um. */
.art .merk a{color:var(--dunkel);text-decoration:underline;
  text-decoration-color:var(--dunkel);text-decoration-thickness:3px;
  text-underline-offset:3px}
.art .merk a:hover{background:var(--dunkel);color:var(--gelb);
  text-decoration-color:var(--gelb)}

/* Auf den farbigen Flaechen von Ringo traegt der helle Hovergrund nicht,
   dort wird der Strich dicker statt die Flaeche heller. */
.merkbox p a:hover,.tipp p a:hover{background:transparent;text-decoration-thickness:3px}

body.dunkel .art p a,body.dunkel .art li a,body.dunkel .art td a,
body.dunkel .art dd a,body.dunkel .art blockquote a,body.dunkel .art figcaption a{
  color:var(--gelb);text-decoration-color:var(--gruen)}
body.dunkel .art p a:hover,body.dunkel .art li a:hover,body.dunkel .art td a:hover,
body.dunkel .art dd a:hover,body.dunkel .art blockquote a:hover,
body.dunkel .art figcaption a:hover{
  color:var(--gold-h);background:#1B3D22;text-decoration-color:var(--gold-h)}

/* ---- Bauregel: Kontur nur fuer Objekte ---- */
.objekt{border-radius:var(--r);box-shadow:var(--schatten);background:var(--flaeche)}

.w{max-width:1100px;margin:0 auto;padding-inline:22px}
.lese{max-width:62ch}

/* ---- Kopf ---- */
.kopf{background:var(--dunkel);color:var(--kalk);padding-block:13px}
.kopf .w{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.marke{display:flex;align-items:center;gap:10px;font-family:var(--disp);font-weight:var(--disp-w);
  font-size:var(--t-2xl);letter-spacing:-.015em;text-decoration:none}
.marke em{font-style:normal;color:var(--gelb)}
.nav{display:flex;gap:17px;margin-left:auto;flex-wrap:wrap;font-size:var(--t-sm);font-weight:600}
.nav a{text-decoration:none;opacity:.78}
.nav a:hover{opacity:1;color:var(--gelb)}

/* ---- Klappmenue in der Hauptnavigation ---- */
.nav-ast{position:relative;display:flex;align-items:center;gap:1px}
.nav-klapp{display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:26px;flex:none;padding:0;margin:0;
  background:none;border:0;border-radius:7px;color:inherit;opacity:.6;cursor:pointer;
  visibility:hidden}
.nav-bereit .nav-klapp{visibility:visible}
.nav-klapp:hover{opacity:1;background:rgba(255,255,255,.12)}
.nav-klapp svg{transition:transform .32s cubic-bezier(.16,1,.3,1)}
.nav-klapp[aria-expanded="true"]{opacity:1;background:rgba(255,255,255,.14)}
.nav-klapp[aria-expanded="true"] svg{transform:rotate(180deg)}

.nav-panel{position:absolute;top:calc(100% + 14px);left:-14px;z-index:20;
  min-width:250px;max-width:calc(100vw - 32px);
  background:var(--flaeche);color:var(--text);border-radius:var(--r);
  box-shadow:0 18px 40px rgba(0,86,16,.24);padding:14px 8px 10px;
  transform-origin:18px top;
  opacity:0;transform:translateY(-9px) scale(.97);
  transition:opacity .2s ease,transform .3s cubic-bezier(.16,1,.3,1)}
.nav-panel.offen{opacity:1;transform:none}
.nav-panel[hidden]{display:none}
/* Unsichtbare Bruecke ueber die Luecke, sonst flackert das Menue auf dem Weg
   nach unten, weil der Zeiger kurz nichts beruehrt. */
.nav-panel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
.nav-panel.breit{min-width:min(470px,calc(100vw - 32px))}
.nav-panel.breit ul{display:grid;grid-auto-flow:column;
  grid-template-rows:repeat(var(--zeilen,9),auto);column-gap:10px}

/* Ringo schaut oben rechts aus dem Kasten */
.nav-ringo{position:absolute;top:-25px;right:-14px;width:58px;height:58px;
  object-fit:contain;pointer-events:none;
  opacity:0;transform:translateY(10px) scale(.6) rotate(-16deg);
  transition:opacity .26s ease .07s,transform .44s cubic-bezier(.3,1.5,.5,1) .07s}
.nav-panel.offen .nav-ringo{opacity:1;transform:none}

.nav-alle{display:block;margin:0 10px 8px;padding-bottom:9px;padding-right:40px;
  font-family:var(--disp);font-weight:var(--disp-w);font-size:var(--t-sm);
  color:var(--tief);text-decoration:none;
  box-shadow:0 1px 0 var(--gruen-b)}
.nav-alle:hover{color:var(--moos)}
.nav-panel ul{list-style:none;margin:0;padding:0}
.nav-panel li{break-inside:avoid;
  opacity:0;transform:translateY(-6px);
  transition:opacity .24s ease,transform .3s cubic-bezier(.16,1,.3,1)}
/* Die Eintraege laufen versetzt ein, --i steht am li und zaehlt von 1 hoch.
   Bei 17 Eintraegen waeren 17 Stufen zu lang, deshalb gedeckelt. */
.nav-panel.offen li{opacity:1;transform:none;
  transition-delay:calc(min(var(--i,1),9) * 26ms)}
.nav-panel li a{display:block;padding:6px 10px;border-radius:9px;
  font-size:var(--t-sm);font-weight:500;line-height:1.35;text-decoration:none;opacity:.88;
  transition:background .18s ease,opacity .18s ease}
.nav-panel li a:hover{background:var(--gruen-b);opacity:1}
.nav-panel li a[aria-current]{background:var(--gruen-b);opacity:1;color:var(--tief)}
body.dunkel .nav-panel{background:var(--kalk-2)}
body.dunkel .nav-panel li a:hover,body.dunkel .nav-panel li a[aria-current]{background:#1B3D22}

@media(prefers-reduced-motion:reduce){
  .nav-klapp svg,.nav-panel,.nav-ringo,.nav-panel li{transition:opacity .15s ease}
  .nav-panel,.nav-panel.offen,.nav-ringo,.nav-panel.offen .nav-ringo,
  .nav-panel li,.nav-panel.offen li{transform:none}
  .nav-panel.offen li{transition-delay:0s}
}

/* ---- Aufmacher: Farbfeld mit Figur ---- */
.auf{background:var(--moos);color:var(--kalk);padding-block:48px 54px;position:relative}
.auf .w{display:grid;grid-template-columns:260px 1fr;gap:40px;align-items:center}
.auf h1{font-size:var(--t-7xl)}
.auf p{margin:18px 0 0;font-size:var(--t-l);max-width:40ch;opacity:.92}
.auf img{width:100%;height:auto;display:block}

/* ---- Fragenliste: Wurmpunkt als Marke ---- */
.fragen{padding-block:46px 40px}
.fragen h2{font-size:var(--t-5xl);margin-bottom:22px}
.frage{display:grid;grid-template-columns:34px 1fr auto;gap:18px;align-items:center;
  padding:16px 18px;margin-bottom:11px;text-decoration:none;
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s}
.frage:hover{transform:translateY(-3px);box-shadow:var(--schatten-t)}
.frage .punkt{width:34px;height:34px}
.frage h3{font-size:var(--t-xl);margin-bottom:2px}
.frage p{margin:0;font-size:var(--t-sm);color:var(--leise)}
.frage .tag{font-size:var(--t-s);color:var(--leise);white-space:nowrap}

/* ---- Bereiche: unterschiedlich grosse Aufkleber ---- */
.bereiche{padding-block:12px 54px;display:grid;grid-template-columns:repeat(6,1fr);gap:18px}
.ber{padding:24px 22px 26px;text-decoration:none;display:block;
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s}
.ber:hover{transform:translateY(-3px);box-shadow:var(--schatten-t)}
.ber h3{font-size:var(--t-2xl);margin-bottom:7px}
.ber p{margin:0;font-size:var(--t-sm);color:var(--leise)}
.b-a{grid-column:span 3;background:var(--gelb);color:var(--dunkel)}
.b-a p{color:#4A3A12}
.b-e{background:var(--creme)}
body.dunkel .b-e{background:var(--kalk-2)}
.b-b{grid-column:span 3;background:var(--tief);color:var(--kalk)}
.b-b p{color:#C6D6C2}
.b-c{grid-column:span 2;background:var(--gruen-b)}
body.dunkel .b-c{background:var(--kalk-2)}
.b-d{grid-column:span 2}
.b-e{grid-column:span 2}

/* ---- Artikel ---- */
.art{padding-block:40px 66px}
/* Brotkrumen und H1 gehen ueber die volle Abschnittsbreite, der Lesetext
   bleibt bei 62 Zeichen. Der Kopf der Seite darf Platz haben, die Zeile
   darunter muss lesbar bleiben. Beide brechen symmetrisch aus, deshalb
   stehen sie buendig uebereinander. */
.art .krumen,.art h1{--voll:min(1056px,calc(100vw - 44px));
  width:var(--voll);max-width:none;
  margin-left:calc((100% - var(--voll))/2);
  margin-right:calc((100% - var(--voll))/2)}
.krumen{font-size:var(--t-s);color:var(--leise);margin-bottom:15px}
.art h1{font-size:var(--t-6xl);margin-bottom:24px}
.antwort{display:grid;grid-template-columns:104px 1fr;gap:20px;align-items:center;
  background:var(--tief);color:#F2F6EF;padding:22px 24px;max-width:62ch;margin:0 0 36px}
body.dunkel .antwort{color:#F2F6EF}
.antwort img{width:104px;height:auto}
.antwort .kurz{font-family:var(--disp);font-weight:var(--disp-w);font-size:var(--t-3xl);display:block;margin-bottom:6px}
.antwort p{margin:0;font-size:var(--t-body);color:#D6E3D4}
.art h2{font-size:var(--t-3xl);margin:40px 0 12px}
/* h3 und h4 hatten bisher gar keine Angabe und kamen aus den Browservorgaben.
   In den Texten stehen 145 h3 und 33 h4, die brauchen eigene Stufen. */
.art h3{font-size:var(--t-xl);margin:30px 0 9px}
.art h4{font-size:var(--t-l);margin:24px 0 7px}
.art p{margin:0 0 15px}
.merk{background:var(--gelb);color:var(--dunkel);padding:17px 20px;margin:28px 0;max-width:54ch;font-weight:600}
.faq details{margin-bottom:11px;padding:15px 18px}
.faq summary{cursor:pointer;font-family:var(--disp);font-weight:var(--disp-w);font-size:var(--t-l);list-style:none;
  display:grid;grid-template-columns:30px 1fr;gap:13px;align-items:center}
.faq summary::marker{content:""}
.faq summary img{width:30px;height:auto;transition:transform .25s cubic-bezier(.16,1,.3,1)}
.faq details[open] summary img{transform:rotate(11deg) scale(1.08)}
.faq p{margin:11px 0 0 43px;color:var(--leise);font-size:var(--t-body)}

/* ---- Produkt: 1 ganz oben ---- */
.prod{padding:22px;display:grid;grid-template-columns:118px 1fr auto;gap:22px;align-items:center;margin-bottom:10px}
.prod .bild{aspect-ratio:1;border-radius:9px;background:var(--kalk-2)}
.prod h3{font-size:var(--t-xl);margin-bottom:4px}
.prod .sub{margin:0;font-size:var(--t-sm);color:var(--leise)}
.preis{font-family:var(--disp);font-weight:var(--disp-w);font-size:var(--t-4xl);display:block;margin-bottom:10px}
.knopf{display:inline-block;background:var(--erde-d);color:var(--kalk);font-family:var(--disp);font-weight:var(--disp-w);
  padding:12px 21px;text-decoration:none;font-size:var(--t-m);white-space:nowrap;
  border:0;border-radius:9px;box-shadow:var(--schatten);
  transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s}
.knopf:hover{transform:translateY(-3px);box-shadow:var(--schatten-t)}
.hinweis{font-size:var(--t-xs);color:var(--leise);margin:9px 0 32px}

.tabbox{overflow-x:auto;margin:22px 0}
.tab{width:100%;border-collapse:collapse;font-size:var(--t-sm);min-width:460px;
  border-radius:var(--r);overflow:hidden;background:var(--flaeche);box-shadow:var(--schatten)}
.tab th,.tab td{text-align:left;padding:13px 15px;border-bottom:2px solid var(--kalk-2)}
.tab thead th{background:var(--tief);color:var(--kalk);font-family:var(--disp);font-weight:var(--disp-w);font-size:var(--t-sm)}
.tab td:first-child{color:var(--leise);width:33%}
.tab tbody tr:last-child td{border-bottom:0}

/* Dafuer und Dagegen brechen wie die Bilder auf die volle Abschnittsbreite
   aus. In der Lesespalte blieben je Kasten gut dreissig Zeichen, jeder
   Stichpunkt brach dreimal um. */
.procon{--voll:min(1056px,calc(100vw - 44px));
  width:var(--voll);max-width:none;
  margin:38px 0 38px calc((100% - var(--voll))/2);
  margin-right:calc((100% - var(--voll))/2);
  display:grid;grid-template-columns:1fr 1fr;gap:22px}
.procon>div{position:relative;padding:32px 26px 24px}
.pro{background:var(--moos);color:#EEF3EC}
.con{background:var(--erde-d);color:#FAF0EA}

/* Das Schild sitzt halb ausserhalb der oberen Kante. Heller Grund, Farbe des
   eigenen Kastens - die Zuordnung bleibt, ohne neue Farbe. */
.procon h3{position:absolute;top:-16px;left:22px;margin:0;
  width:25%;min-width:100px;text-align:center;
  background:var(--kalk);border:2px solid currentColor;
  border-radius:999px;padding:6px 10px;
  font-family:var(--disp);font-weight:var(--disp-w);
  font-size:var(--t-s);letter-spacing:.14em;text-transform:uppercase;
  box-shadow:var(--schatten)}
.pro h3{color:var(--moos)}
.con h3{color:var(--erde-d)}
body.dunkel .procon h3{background:var(--grund)}

.procon ul{margin:0;padding-left:18px;font-size:var(--t-m)}
.procon li{margin-bottom:8px}
.procon li:last-child{margin-bottom:0}

.fuss{background:var(--dunkel);color:var(--kalk);padding-block:30px 40px;font-size:var(--t-sm);margin-top:54px}
.fuss .w{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.fuss img{width:46px;height:auto;flex:none}

/* ---- Bilder: brechen aus der Lesespalte auf volle Abschnittsbreite ----
   --voll ist die Breite des Abschnitts. Ist die Lesespalte schmaler, wird
   der Aussenabstand negativ und die Figur waechst nach beiden Seiten
   gleich weit heraus. Auf dem Handy sind beide gleich, der Abstand wird 0. */
.art figure.bild,.art .galerie{--voll:min(1056px,calc(100vw - 44px));
  width:var(--voll);margin:34px 0 34px calc((100% - var(--voll))/2);
  margin-right:calc((100% - var(--voll))/2);max-width:none}

.art figure.bild{position:relative}
.art figure.bild img,.art .galerie img{display:block;width:100%;height:auto;
  border-radius:var(--r);box-shadow:var(--schatten)}
.art figure.bild figcaption,.art .galerie figcaption{margin-top:9px;font-size:var(--t-sm);
  line-height:1.5;color:var(--leise)}

/* Bildlink: ohne Skript oeffnet er das Bild, mit Skript die Lupe */
.art .bildlink{display:block;position:relative;border-radius:var(--r);
  text-decoration:none;transition:transform .3s cubic-bezier(.16,1,.3,1)}
.art .bildlink:hover{transform:translateY(-3px)}
.art .bildlink::after{content:"";position:absolute;right:12px;bottom:12px;
  width:34px;height:34px;border-radius:50%;background:var(--flaeche) center/17px no-repeat;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23005610' stroke-width='2.4' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='M16 16l5 5M10.5 7.5v6M7.5 10.5h6'/%3E%3C/svg%3E");
  box-shadow:var(--schatten);opacity:0;transition:opacity .25s}
.art .bildlink:hover::after,.art .bildlink:focus-visible::after{opacity:1}

/* Galerie: mehrere Bilder nebeneinander, gleiche Hoehe */
.art .galerie{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px}
.art .galerie figure{margin:0}
.art .galerie img{aspect-ratio:4/3;object-fit:cover}

/* Lupe: Vollbild ueber der Seite, erst durch das Skript sichtbar */
.lupe{position:fixed;inset:0;z-index:90;display:none;place-items:center;
  padding:26px;background:rgba(4,54,10,.93)}
.lupe.lupe-auf{display:grid}
.lupe figure{margin:0;max-width:1200px;max-height:100%;display:flex;
  flex-direction:column;align-items:center;gap:13px}
.lupe img{max-width:100%;max-height:78vh;width:auto;height:auto;
  border-radius:var(--r);box-shadow:0 18px 48px rgba(0,0,0,.42)}
.lupe figcaption{color:var(--kalk);font-size:var(--t-body);line-height:1.5;text-align:center;
  max-width:70ch}
.lupe button{position:absolute;top:18px;right:18px;width:46px;height:46px;
  border:0;border-radius:50%;background:var(--flaeche);color:var(--tief);
  font-size:27px;line-height:1;cursor:pointer;box-shadow:var(--schatten)} /* Zeichen, keine Schrift */
.lupe button:hover{background:var(--gelb)}

/* ---- Ringo spricht: Sprechblase mit rundem Profilbild ----
   Das Bild ist ueberall 86 px gross, auch auf dem Handy. Der Zipfel sitzt
   links unter dem Bild und zeigt auf die Figur, damit der Kasten als Rede
   gelesen wird. Kasten und Tipp teilen die Form, nur die Flaeche wechselt. */
.merkbox,.tipp{position:relative;border-radius:26px;min-height:124px;
  padding:22px 26px 22px 68px;margin:36px 0 36px 44px;max-width:60ch}
.merkbox{background:var(--gruen-b)}
.tipp{background:var(--creme)}
body.dunkel .merkbox,body.dunkel .tipp{background:var(--kalk-2)}

.merkbox>img,.tipp>img{position:absolute;left:-44px;top:14px;
  width:86px;height:86px;object-fit:contain;border-radius:50%;
  background:var(--flaeche);padding:7px;box-shadow:var(--schatten);z-index:2}
body.dunkel .merkbox>img,body.dunkel .tipp>img{background:var(--kalk-2)}

/* Zipfel: sitzt an der linken Kante unter dem Bild und laeuft nach links aus */
.merkbox::before,.tipp::before{content:"";position:absolute;left:-13px;top:100px;
  width:28px;height:18px;background:inherit;
  clip-path:polygon(100% 0,100% 100%,0 100%)}

.merkbox p,.tipp p{margin:0}
.merkbox p+p,.tipp p+p{margin-top:10px}
.merkbox .marke-t,.tipp .marke-t{display:block;font-family:var(--disp);
  font-weight:var(--disp-w);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--tief);margin-bottom:6px}
body.dunkel .merkbox .marke-t,body.dunkel .tipp .marke-t{color:var(--gelb)}

/* ---- Karten ---- */
.karten{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;padding-block:8px 20px}
.karte{border-radius:var(--r);overflow:hidden;background:var(--flaeche);box-shadow:var(--schatten);
  text-decoration:none;display:flex;flex-direction:column;
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s}
.karte:hover{transform:translateY(-4px);box-shadow:var(--schatten-t)}
.karte .kopfbild{aspect-ratio:16/10;display:grid;place-items:center;padding:16px}
.karte .kopfbild img{width:62%;height:auto;max-height:100%;object-fit:contain}
.k1 .kopfbild{background:var(--moos)}
.k2 .kopfbild{background:var(--gelb)}
.k3 .kopfbild{background:var(--gruen-b)}
.karte .inhalt{padding:18px 20px 22px}
.karte .eyebrow{font-family:var(--disp);font-weight:var(--disp-w);font-size:var(--t-xs);letter-spacing:.16em;
  text-transform:uppercase;color:var(--tief);display:block;margin-bottom:7px}
body.dunkel .karte .eyebrow{color:var(--gelb)}
.karte h3{font-size:var(--t-xl);margin-bottom:6px}
.karte p{margin:0;font-size:var(--t-sm);color:var(--leise)}

/* ---- Produktkarten: vier nebeneinander ---- */
.produkte{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:18px;padding-block:6px 18px}
.pk{border-radius:var(--r);background:var(--flaeche);box-shadow:var(--schatten);padding:16px 16px 18px;
  display:flex;flex-direction:column;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s}
.pk:hover{transform:translateY(-4px);box-shadow:var(--schatten-t)}
.pk .bild{aspect-ratio:1;border-radius:9px;background:var(--kalk-2);margin-bottom:13px}
.pk h4{font-family:var(--disp);font-weight:var(--disp-w);font-size:var(--t-m);margin:0 0 3px;letter-spacing:-.02em}
.pk .sub{margin:0 0 11px;font-size:var(--t-s);color:var(--leise)}
.pk .fuss-p{margin-top:auto;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.pk .p{font-family:var(--disp);font-weight:var(--disp-w);font-size:var(--t-xl)}
.pk .kl{margin-left:auto;background:var(--erde-d);color:#fff;font-family:var(--disp);font-weight:var(--disp-w);
  font-size:var(--t-s);padding:8px 14px;border-radius:8px;text-decoration:none;white-space:nowrap}
.abschnitt-kopf{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin:44px 0 18px}
.abschnitt-kopf h2{font-size:var(--t-5xl)}
.abschnitt-kopf span{font-size:var(--t-sm);color:var(--leise)}

/* ---- Typografische Ebene ---- */
.lead{font-size:var(--t-xl);line-height:1.55;color:var(--text);max-width:58ch;margin:0 0 26px}
body.dunkel .lead{color:var(--schrift)}

/* Marker: liegt hinter der Grundlinie wie ein Textmarker */
mark{background:linear-gradient(transparent 58%,var(--gold-h) 58%);color:inherit;padding:0 2px}
body.dunkel mark{background:linear-gradient(transparent 58%,rgba(235,182,44,.42) 58%)}

.art strong{color:var(--tief);font-weight:700}
body.dunkel .art strong{color:var(--gelb)}
/* Auf farbigen Flaechen erbt das Fettgedruckte die Textfarbe der Flaeche.
   Ohne diese Ausnahme faerbt die Regel darueber es dunkelgruen, und im
   Dafuer-Kasten steht dann Gruen auf Gruen. Gemessen: 1,3 zu 1. */
.art .pro strong,.art .con strong,.art .antwort strong,
.art .ab-product__pros strong,.art .ab-product__cons strong,
body.dunkel .art .pro strong,body.dunkel .art .con strong,
body.dunkel .art .antwort strong{color:inherit}

/* Kennwert im Fliesstext */
.wert{font-family:var(--disp);font-weight:var(--disp-w);color:var(--moos);
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
body.dunkel .wert{color:#8FCB8A}

/* Kleine Marken fuer Ja und Nein */
.ja,.nein{display:inline-block;font-family:var(--disp);font-weight:var(--disp-w);font-size:var(--t-xs);
  letter-spacing:.09em;text-transform:uppercase;padding:3px 9px;border-radius:99px;vertical-align:2px}
.ja{background:var(--moos);color:#fff}
/* Sicherung: ein Link in einer Ja- oder Nein-Marke wuerde sonst die gruene
   Linkfarbe auf gruenem Grund tragen und verschwinden. */
.art .ja a,.art .nein a{color:inherit;text-decoration-color:currentColor;
  text-decoration-thickness:1.5px}
.art .ja a:hover,.art .nein a:hover{background:transparent;color:inherit;
  text-decoration-thickness:3px}
.nein{background:var(--erde-d);color:#fff}

/* Trenner aus Wurmsegmenten */
.trenner{display:flex;align-items:center;gap:18px;margin:44px 0}
.trenner::before,.trenner::after{content:"";flex:1;height:5px;border-radius:99px;
  background:repeating-linear-gradient(90deg,var(--moos) 0 13px,transparent 13px 23px);opacity:.5}
.trenner img{width:34px;height:auto;flex:none}
.trenner-s{height:5px;border-radius:99px;margin:36px 0;
  background:repeating-linear-gradient(90deg,var(--moos) 0 13px,transparent 13px 23px);opacity:.42}

/* Herausgestellter Satz */
.schluessel{font-family:var(--disp);font-weight:var(--disp-w);font-size:var(--t-3xl);
  line-height:1.24;letter-spacing:-.025em;color:var(--tief);max-width:22ch;margin:38px 0;
  padding-left:20px;border-left:6px solid var(--gelb)}
body.dunkel .schluessel{color:var(--gelb);border-left-color:var(--moos)}

/* Echter Leserkommentar */
.leser{background:var(--flaeche);border-radius:var(--r);box-shadow:var(--schatten);
  padding:22px 24px;margin:32px 0;max-width:60ch}
.leser .von{display:flex;align-items:center;gap:11px;margin-bottom:11px}
.leser .kreis{width:34px;height:34px;border-radius:50%;background:var(--gruen-b);
  display:grid;place-items:center;font-family:var(--disp);font-weight:var(--disp-w);color:var(--tief);font-size:var(--t-sm);flex:none}
body.dunkel .leser .kreis{background:var(--kalk-2);color:var(--gelb)}
.leser .name{font-family:var(--disp);font-weight:var(--disp-w);font-size:var(--t-sm)}
.leser .datum{font-size:var(--t-s);color:var(--leise);margin-left:auto}
.leser blockquote{margin:0;font-size:var(--t-m);line-height:1.6}
.leser .label{display:block;font-family:var(--disp);font-weight:var(--disp-w);font-size:var(--t-xs);letter-spacing:.17em;
  text-transform:uppercase;color:var(--erde);margin-bottom:10px}

/* ---- Maskottchen-Bilder: Groesse haengt am Ort ---- */
img{max-width:100%;height:auto}
.marke img{width:34px;height:34px;object-fit:contain;flex:none}
.auf img{width:100%;max-width:280px;height:auto;display:block;justify-self:center}
.frage img{width:38px;height:38px;object-fit:contain;flex:none}
.antwort img{width:104px;height:auto;flex:none}
.faq summary img{width:30px;height:30px;object-fit:contain;
  transition:transform .25s cubic-bezier(.16,1,.3,1)}
.faq details[open] summary img{transform:rotate(11deg) scale(1.08)}
.trenner img{width:42px;height:42px;object-fit:contain;flex:none}
.fuss img{width:44px;height:44px;object-fit:contain;flex:none}
.karte .kopfbild img{width:auto;max-width:78%;max-height:100%;height:auto;object-fit:contain}

@media(max-width:860px){
  /* Am Telefon schwebt nichts. Das Panel legt sich als eigene Zeile unter
     den Menuepunkt, dafuer braucht es die volle Breite des Astes. */
  .nav-ast{flex-wrap:wrap}
  .nav-panel{position:static;flex:0 0 100%;width:100%;min-width:0;max-width:none;
    margin:6px 0 10px;box-shadow:none;background:rgba(255,255,255,.09);padding:8px 4px}
  .nav-panel.breit{min-width:0}
  .nav-panel.breit ul{display:block}
  .nav-panel li a,.nav-alle{color:var(--kalk)}
  .nav-panel li a:hover{background:rgba(255,255,255,.14)}
  .nav-panel li a[aria-current]{background:rgba(255,255,255,.16);color:var(--gelb)}
  .nav-alle{box-shadow:0 1px 0 rgba(255,255,255,.2);padding-right:10px}
  /* In der Zeile ist rechts kein Platz fuer Ringo, er setzt sich nach innen. */
  .nav-ringo{top:-20px;right:6px;width:48px;height:48px}
  .auf .w{grid-template-columns:110px 1fr;gap:20px}
  .auf img{max-width:110px}
  .bereiche{grid-template-columns:1fr}
  .b-a,.b-b,.b-c,.b-d,.b-e{grid-column:span 1}
  .antwort{grid-template-columns:1fr}
  .antwort svg{width:74px}
  .merkbox,.tipp{margin-left:30px;padding:20px 20px 20px 60px}
  .merkbox>img,.tipp>img{left:-30px;top:12px}
  .merkbox::before,.tipp::before{left:-9px;top:98px;width:22px;height:16px}
  .art .galerie{grid-template-columns:1fr}
  .prod{grid-template-columns:82px 1fr;gap:15px}
  .prod>div:last-child{grid-column:1/-1}
  .procon{grid-template-columns:1fr;gap:26px}
}

/* ---- Produktboxen des Amazon-Moduls ----
   Daniels Regel: ein Produkt oder vier, nie drei, nie fuenf. Beide Formen
   teilen sich die Bausteine und unterscheiden sich nur in der Anordnung. */

/* Gemeinsames */
.ab-product{background:var(--flaeche);border-radius:var(--r);box-shadow:var(--schatten);
  border:0;position:relative}
.ab-product__image{position:relative}
.ab-product__image img{display:block;object-fit:contain}
.ab-product__badge{position:absolute;top:10px;left:10px;z-index:2;
  background:var(--gelb);color:var(--dunkel);border-radius:999px;
  padding:5px 12px;font-family:var(--disp);font-weight:var(--disp-w);
  font-size:var(--t-xs);letter-spacing:.02em;box-shadow:var(--schatten)}
.ab-product__badge--nobild{position:static;display:inline-block;margin-bottom:10px}

.ab-product__title{font-family:var(--disp);font-weight:var(--disp-w);
  letter-spacing:var(--disp-ls);line-height:1.22;margin:0 0 4px}
.ab-product__title a{text-decoration:none}
.ab-product__title a:hover{color:var(--moos)}
.ab-product__brand{display:block;font-size:var(--t-s);letter-spacing:.08em;
  text-transform:uppercase;color:var(--leise);margin-bottom:12px}

.ab-product__price{font-family:var(--disp);font-weight:var(--disp-w);
  font-size:var(--t-4xl);line-height:1;color:var(--tief);margin-bottom:4px}
body.dunkel .ab-product__price{color:var(--gelb)}
.ab-product__price-note{font-family:DMSans,sans-serif;font-weight:500;
  font-size:var(--t-s);color:var(--leise);letter-spacing:0}
.ab-product__price-stamp{font-size:var(--t-xs);color:var(--leise);margin:0 0 14px;line-height:1.4}

.ab-product__desc{margin:0 0 14px;font-size:var(--t-m);line-height:1.55}

/* Vorteile und Einschraenkungen nebeneinander, farblich getrennt ohne Rahmen */
/* Zwei Spalten, solange es beide Seiten gibt. Steht nur eine da, soll sie
   nicht als halber Kasten neben einer Leerstelle haengen. */
.ab-product__proscons{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:12px;margin-bottom:14px}
.ab-product__pros,.ab-product__cons{border-radius:11px;padding:13px 15px}
.ab-product__pros{background:var(--gruen-b)}
.ab-product__cons{background:var(--creme)}
body.dunkel .ab-product__pros,body.dunkel .ab-product__cons{background:var(--kalk-2)}
.ab-product__pros-label,.ab-product__cons-label{display:block;font-family:var(--disp);
  font-weight:var(--disp-w);font-size:var(--t-xs);letter-spacing:.15em;text-transform:uppercase;
  margin-bottom:7px}
.ab-product__pros-label{color:var(--tief)}
.ab-product__cons-label{color:#6E4614}
body.dunkel .ab-product__pros-label{color:#9FD0A8}
body.dunkel .ab-product__cons-label{color:var(--gelb)}
.ab-product__pros ul,.ab-product__cons ul{list-style:none;margin:0;padding:0;
  font-size:var(--t-sm);line-height:1.45}
.ab-product__pros li,.ab-product__cons li{position:relative;padding-left:19px;margin-bottom:6px}
.ab-product__pros li:last-child,.ab-product__cons li:last-child{margin-bottom:0}
/* Haken fuer dafuer, Strich fuer zu beachten. Beide gezeichnet, keine Schrift. */
.ab-product__pros li::before{content:"";position:absolute;left:1px;top:.5em;
  width:9px;height:5px;border-left:2.5px solid var(--moos);border-bottom:2.5px solid var(--moos);
  transform:rotate(-45deg)}
.ab-product__cons li::before{content:"";position:absolute;left:1px;top:.68em;
  width:10px;height:2.5px;background:#96682A;border-radius:2px}

/* Eignung: die Entscheidungshilfe, deshalb ruhig und ohne Flaeche */
.ab-product__fit{margin:0 0 14px;font-size:var(--t-m);line-height:1.55}
.ab-product__fit strong{font-family:var(--disp);font-weight:var(--disp-w);color:var(--tief)}
body.dunkel .ab-product__fit strong{color:var(--gelb)}

/* Kaeuferstimmen: fremde Rede, deshalb die Form der Stimme aus dem Fliesstext */
.ab-product__feedback{margin:0 0 14px;padding:2px 0 2px 18px;
  border-left:4px solid var(--gelb);font-size:var(--t-sm);line-height:1.55}

/* Einordnung: unsere Meinung, deshalb abgesetzt */
.ab-product__verdict{background:var(--gruen-b);border-radius:11px;padding:13px 15px;
  margin-bottom:16px;font-size:var(--t-sm);line-height:1.55}
body.dunkel .ab-product__verdict{background:var(--kalk-2)}
.ab-product__verdict strong{font-family:var(--disp);font-weight:var(--disp-w);color:var(--tief)}
body.dunkel .ab-product__verdict strong{color:var(--gelb)}

.ab-product__cta{display:inline-block;background:var(--erde-d);color:var(--kalk);
  font-family:var(--disp);font-weight:var(--disp-w);font-size:var(--t-m);
  padding:12px 22px;border-radius:9px;text-decoration:none;white-space:nowrap;
  box-shadow:var(--schatten);
  transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s}
.ab-product__cta:hover{transform:translateY(-3px);box-shadow:var(--schatten-t)}

/* ---- Einzelne Box im Fliesstext: Bild links, Inhalt rechts ----
   Sie bricht wie die Bilder aus der Lesespalte auf die volle Abschnittsbreite
   aus. In 62 Zeichen Breite blieben fuer Vorteile und Einschraenkungen sonst
   zwei Spalten von je vier Woertern uebrig. */
.art .ab-product{--voll:min(1056px,calc(100vw - 44px));
  width:var(--voll);margin:34px 0 34px calc((100% - var(--voll))/2);
  margin-right:calc((100% - var(--voll))/2);max-width:none;
  display:grid;grid-template-columns:260px 1fr;gap:32px;
  align-items:start;padding:26px 30px}
.art .ab-product__image img{width:260px;max-width:100%;height:auto;border-radius:11px}
.art .ab-product__title{font-size:var(--t-2xl)}

/* ---- Kurze Box: weit oben auf einer Einzelproduktseite ----
   Nur Bild, Name, Preis, Knopf. Wer schon weiss, was er will, ist damit
   sofort am Ziel, ohne dass eine halbe Seite Produkttext den Artikel
   blockiert. Sie bleibt in der Lesespalte, sie soll den Text nicht
   auseinanderreissen.

   Der Koerper bekommt ein eigenes Raster mit benannten Feldern. Titel, Marke
   und Preis stehen links untereinander, der Knopf rechts daneben ueber alle
   drei Zeilen. Ein display:contents am Koerper waere kuerzer, wirft aber alle
   Teile einzeln ins aeussere Raster - dann steht der Knopf in der naechsten
   Zeile. */
/* Die Grundregel oben laesst die Box auf Abschnittsbreite ausbrechen, ueber
   negative Aussenabstaende. Die kurze Fassung nimmt beides zurueck und bleibt
   in der Lesespalte. */
.art .ab-product--kurz{display:flex;align-items:center;gap:20px;
  padding:16px 20px;margin:24px 0 24px 0;width:auto;max-width:62ch}
.art .ab-product--kurz .ab-product__image{flex:none}
.art .ab-product--kurz .ab-product__image img{width:96px;border-radius:9px}
.art .ab-product--kurz .ab-product__body{flex:1;display:grid;
  grid-template-columns:1fr auto;
  grid-template-areas:"titel knopf" "marke knopf" "preis knopf";
  align-items:center;gap:0 20px}
.art .ab-product--kurz .ab-product__title{grid-area:titel;font-size:var(--t-l);margin-bottom:2px}
.art .ab-product--kurz .ab-product__brand{grid-area:marke;font-size:var(--t-xs);margin-bottom:6px}
.art .ab-product--kurz .ab-product__price{grid-area:preis;font-size:var(--t-2xl);margin-bottom:0}
.art .ab-product--kurz .ab-product__cta{grid-area:knopf;justify-self:end;
  font-size:var(--t-sm);padding:11px 18px}
.art .ab-product--kurz .ab-product__price-stamp{display:none}
/* Das Abzeichen liegt in der grossen Box ueber dem Produktbild. In der kurzen
   Box ist das Bild nur 96 px breit, dort schob sich die Plakette quer ueber
   den Produkttitel. Sie sitzt deshalb halb ausserhalb auf der Oberkante -
   dasselbe Muster wie die Schilder an den Pro- und Contra-Kaesten. */
.art .ab-product--kurz .ab-product__badge{top:0;left:22px;
  transform:translateY(-50%);font-size:var(--t-xs);padding:4px 11px}

@media(max-width:620px){
  .art .ab-product--kurz{gap:14px;align-items:flex-start}
  .art .ab-product--kurz .ab-product__image img{width:76px}
  .art .ab-product--kurz .ab-product__body{grid-template-columns:1fr;
    grid-template-areas:"titel" "marke" "preis" "knopf";gap:0}
  .art .ab-product--kurz .ab-product__cta{justify-self:stretch;text-align:center;
    margin-top:12px}
}

/* ---- Vier nebeneinander: gestapelt, gleiche Hoehe ---- */
.produkte-live{--voll:min(1056px,calc(100vw - 44px));
  width:var(--voll);max-width:none;
  margin-left:calc((100% - var(--voll))/2);
  margin-right:calc((100% - var(--voll))/2);
  display:grid;grid-template-columns:repeat(4,1fr);
  gap:18px;padding-block:6px 14px}
@media(max-width:1040px){.produkte-live{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.produkte-live{grid-template-columns:1fr}}
.produkte-live .ab-product{display:flex;flex-direction:column;padding:16px;
  width:auto;max-width:none;margin:0;
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s}
.produkte-live .ab-product:hover{transform:translateY(-4px);box-shadow:var(--schatten-t)}
.produkte-live .ab-product__image img{width:100%;height:auto;border-radius:9px;margin-bottom:12px}
.produkte-live .ab-product__body{display:flex;flex-direction:column;flex:1}
.produkte-live .ab-product__title{font-size:var(--t-l)}
.produkte-live .ab-product__price{font-size:var(--t-2xl)}
/* In der Vierergruppe ist fuer die lange Fassung kein Platz. Die Angaben
   stehen auf der Einzelseite, hier zaehlt der Vergleich auf einen Blick. */
.produkte-live .ab-product__proscons,.produkte-live .ab-product__feedback,
.produkte-live .ab-product__verdict,.produkte-live .ab-product__price-stamp,
.produkte-live .ab-product__fit{display:none}
.produkte-live .ab-product__desc{font-size:var(--t-sm);margin-bottom:14px}
.produkte-live .ab-product__cta{margin-top:auto;text-align:center;font-size:var(--t-sm);
  padding:11px 16px}

@media(max-width:700px){
  .art .ab-product{grid-template-columns:1fr;gap:16px;padding:18px}
  .art .ab-product__image img{width:100%;max-width:280px}
  .ab-product__proscons{grid-template-columns:1fr}
  .ab-product__cta{display:block;text-align:center}
}

/* Hakenliste aus den alten su_list-Shortcodes */
.haken ul{list-style:none;padding-left:0}
.haken li{padding-left:26px;position:relative;margin-bottom:7px}
.haken li::before{content:"";position:absolute;left:4px;top:.62em;width:9px;height:5px;
  border-left:3px solid var(--moos);border-bottom:3px solid var(--moos);
  transform:rotate(-45deg)}

/* Sicherung: Inline-SVG im Fliesstext darf nie ueber Zeilenhoehe wachsen.
   Die Icons aus dem alten WordPress hatten ihre Groessenangaben verloren
   und rendern sonst als riesige Flaeche. */
.art svg,.lese svg{width:1.05em;height:1.05em;vertical-align:-.13em}

/* ---- 404 ---- */
.vierhundertvier{padding-block:44px 70px}
.vv-kopf{display:grid;grid-template-columns:150px 1fr;gap:30px;align-items:center;
  margin-bottom:30px}
.vv-ringo{width:150px;height:auto;flex:none}
.vv-code{display:inline-block;font-family:var(--disp);font-weight:var(--disp-w);
  font-size:var(--t-5xl);line-height:1;color:var(--kalk);background:var(--erde-d);
  border-radius:999px;padding:5px 20px;margin-bottom:12px;
  letter-spacing:.04em;box-shadow:var(--schatten)}
.vierhundertvier h1{font-size:var(--t-6xl);margin-bottom:12px}
.vv-unter{margin:0;font-size:var(--t-xl);max-width:46ch;color:var(--leise)}

/* Der Bericht: sieht aus wie eine Kompostanalyse, ist ein HTTP-Status */
.vv-bericht{background:var(--flaeche);border-radius:var(--r);box-shadow:var(--schatten);
  padding:26px 30px;margin-bottom:44px;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:var(--t-sm)}
.vv-zeile{display:flex;align-items:baseline;gap:10px;padding:5px 0}
.vv-zeile span{color:var(--leise);white-space:nowrap}
/* Die Punktreihe zwischen Bezeichnung und Wert, wie in einem Messprotokoll */
.vv-zeile::after{content:"";order:1;flex:1;align-self:center;height:0;
  border-bottom:2px dotted var(--kalk-2)}
.vv-zeile b{order:2;color:var(--tief);font-weight:600;word-break:break-all}
body.dunkel .vv-zeile b{color:var(--gelb)}

.vv-balken{position:relative;margin-top:20px;height:30px;border-radius:999px;
  background:var(--dunkel);overflow:hidden}
.vv-balken-fuell{position:absolute;inset:0;right:auto;width:100%;
  background:var(--moos);border-radius:999px;
  transform-origin:left;animation:vv-verrotten 1.6s cubic-bezier(.16,1,.3,1) both}
.vv-balken-text{position:absolute;inset:0;z-index:2;display:grid;place-items:center;
  color:var(--kalk);font-size:var(--t-xs);letter-spacing:.09em;text-transform:uppercase}
@keyframes vv-verrotten{from{transform:scaleX(.04)}to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.vv-balken-fuell{animation:none}}

.vv-h2{font-size:var(--t-3xl);margin:0 0 18px}
.vv-ziele{display:grid;grid-template-columns:repeat(6,1fr);
  gap:12px;margin-bottom:42px}
@media(max-width:1040px){.vv-ziele{grid-template-columns:repeat(3,1fr)}}
.vv-ziel{display:grid;place-items:center;text-align:center;
  padding:16px 14px;text-decoration:none;font-family:var(--disp);
  font-weight:var(--disp-w);font-size:var(--t-l);
  transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,background .2s}
.vv-ziel:hover{transform:translateY(-3px);box-shadow:var(--schatten-t);
  background:var(--gruen-b)}
body.dunkel .vv-ziel:hover{background:var(--kalk-2)}
.vv-fragen{padding-block:0 30px}
.vv-fragen .frage{grid-template-columns:38px 1fr}
.vv-fuss{font-size:var(--t-m);color:var(--leise);max-width:60ch;margin:0}

@media(max-width:720px){
  .vv-kopf{grid-template-columns:96px 1fr;gap:18px}
  .vv-ringo{width:96px}
  .vv-bericht{padding:16px 18px}
  .vv-ziele{grid-template-columns:repeat(2,1fr)}
  .vv-zeile{flex-wrap:wrap;gap:4px}
  .vv-zeile::after{display:none}
  .vv-zeile b{order:0}
}

/* ---- Stimme: fremde Rede, ohne Ringo ---- */
.stimme{margin:28px 0;padding:4px 0 4px 22px;border-left:5px solid var(--gelb);
  max-width:60ch;font-size:var(--t-body)}
.stimme p{margin:0}
.stimme p+p{margin-top:10px}



/* ---- Anzeigenblock ----
   Steht direkt unter der H1 auf Startseite und Ratgeberseiten. Die Breite
   folgt der Lesespalte, nicht der vollen Abschnittsbreite: Eine Anzeige ueber
   1056 px schiebt den Artikelanfang weit nach unten.

   Bewusst KEINE min-height. Die Hoehe bestimmt AdSense nach dem gelieferten
   Format, eine Angabe im Stilblatt ist dort wirkungslos und taeuscht nur
   Kontrolle vor. Gegen Spruenge hilft die Formatwahl, nicht CSS. */
.anzeige{margin:22px 0 30px;max-width:62ch}
.anzeige ins{display:block}

/* Die Beschriftung erscheint erst, wenn AdSense wirklich etwas geliefert hat.
   Vorher stand "ANZEIGE" ueber weissem Raum, an der prominentesten Stelle der
   Seite - das sieht nach kaputter Seite aus.

   AdSense setzt am <ins> selbst data-ad-status auf "filled" oder "unfilled".
   Voreinstellung ist deshalb: Beschriftung aus. Bleibt das Attribut ganz weg,
   weil ein Werbeblocker das Skript abgefangen hat, bleibt sie ebenfalls aus -
   genau richtig. Kein JavaScript noetig, CSS kann das selbst. */
.anzeige-marke{display:none;font-size:var(--t-xs);letter-spacing:.09em;
  text-transform:uppercase;color:var(--leise);margin-bottom:6px}
.anzeige:has(ins[data-ad-status="filled"]) .anzeige-marke{display:block}
/* Bleibt der Platz leer, faellt der ganze Block samt Abstand weg. */
.anzeige:has(ins[data-ad-status="unfilled"]){display:none}
/* Auf der Startseite steht der Block ausserhalb von .lese und wuerde sonst
   ueber die ganze Breite laufen. */
.w > .anzeige{margin-inline:auto}

/* ---- Karten: Link nur auf dem Titel ----
   Vorher umschloss ein einziges <a> Ueberschrift, Beschreibung und Schlagwort.
   Der Ankertext las sich dann als "Warum sind Ameisen im Komposthaufen? Weil
   er zu trocken ist. Kein Schaden, eine Ansage. zu trocken" - fuer
   Vorleseprogramme und fuer Suchmaschinen gleichermassen unbrauchbar.

   Jetzt traegt nur die Ueberschrift den Link. Damit die Karte trotzdem
   vollstaendig anklickbar bleibt, legt sich ein unsichtbares ::after des
   Links ueber die ganze Karte. */
.frage,.karte,.ber{position:relative}
.frage h3 a,.karte h3 a,.ber h3 a{text-decoration:none;color:inherit}
.frage h3 a::after,.karte h3 a::after,.ber h3 a::after{
  content:"";position:absolute;inset:0;z-index:1}
.frage h3 a:focus-visible::after,.karte h3 a:focus-visible::after,
.ber h3 a:focus-visible::after{outline:3px solid var(--gelb);outline-offset:3px;
  border-radius:var(--r)}

/* Autorenzeile im Fuss. Die Seite arbeitet mit einem Erfahrungsargument
   ("Seit 2018 sammle ich"), das ohne Namen und Datum niemand zuordnen kann. */
/* .fuss .w ist ein Flexbehaelter - ohne volle Breite setzt sich die Zeile
   neben Logo und Links statt darunter. */
.fuss-redaktion{flex:1 0 100%;margin:14px 0 0;font-size:var(--t-s);line-height:1.6;
  color:var(--kalk);opacity:.72;max-width:78ch}
.fuss-redaktion a{text-decoration:underline;text-decoration-color:var(--gelb);
  text-underline-offset:2px}
.fuss-redaktion a:hover{color:var(--gelb)}

/* Ein einzelnes Produkt im Vierer-Raster wuerde auf ein Viertel der Breite
   zusammenschnurren. Der Block fuer Kueche und Balkon fuehrt nur eins. */
.produkte-live.einzeln{grid-template-columns:minmax(0,320px)}