/* ============================================================
   TRÆN · Ratgeber (/ratgeber/, Auftrag Alex 28.10.2026) — baut auf site.css auf
   Nur Tokens und Bausteine des Design-Systems v2.5 (DESIGN.md): Kreideweiß/Nebel, Text in Anthrazit, Kobalt nur Links und
   Knöpfe, keine eigenen Farben, keine Verläufe. Lesespalte bis 68 Zeichen; das Inhaltsverzeichnis steht ab 1100 px links und
   bleibt stehen, darunter als Liste über dem Text. Tabellen wischen am Handy seitlich (.vergleich-rahmen), Zeilentitel bleiben.
   Ohne JavaScript vollständig; Bewegung nur über die vorhandene Seitenüberblendung.
   ============================================================ */

/* ---------- Kopf des Artikels ---------- */
.rg-kopf{display:grid;gap:clamp(14px,1.8vw,22px);padding-top:clamp(20px,3vw,40px)}
.rg-h1{font-size:clamp(36px,5.4vw,76px);line-height:.98;letter-spacing:-.052em;max-width:17ch}
.rg-kopf .lead{max-width:58ch;color:var(--text)}
.rg-meta{display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14px;line-height:1.5;color:var(--text-leise)}
.rg-meta span:not(:last-child){font:500 12px/1.75 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.rg-meta .link{color:var(--link)}

/* ---------- Bilder ---------- */
.rg-bild figcaption{margin-top:10px;font-size:14px;line-height:1.5;color:var(--text-leise);max-width:68ch}
.rg-lead{margin-top:clamp(28px,4vw,52px)}
.rg-lead .bild{aspect-ratio:4/3}
@media (min-width:760px){.rg-lead .bild{aspect-ratio:2/1}}
.rg-bilder{display:grid;gap:clamp(10px,1.4vw,18px);grid-template-columns:repeat(2,minmax(0,1fr))}
.rg-bilder.n3{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (min-width:760px){.rg-bilder.n3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rg-bilder .bild{aspect-ratio:4/5}
.rg-abschnitt > .rg-bild .bild{aspect-ratio:4/3}

/* ---------- Raster: Inhaltsverzeichnis und Lesespalte ---------- */
.rg-raster{display:grid;gap:clamp(28px,4vw,56px);margin-top:clamp(36px,5vw,64px)}
@media (min-width:1100px){
  .rg-raster.mit-inhalt{grid-template-columns:minmax(0,220px) minmax(0,720px);justify-content:start;column-gap:clamp(48px,6vw,96px)}
  .rg-inhalt{position:sticky;top:calc(var(--kopf-h) + 28px);align-self:start;max-height:calc(100vh - var(--kopf-h) - 56px);overflow:auto}
}
.rg-inhalt{border-top:1px solid var(--linie-stark);padding-top:14px}
.rg-inhalt ol{list-style:none;display:grid;gap:2px;margin-top:10px;counter-reset:i}
.rg-inhalt li{counter-increment:i}
.rg-inhalt a{display:grid;grid-template-columns:26px minmax(0,1fr);padding:6px 0;font-size:15px;line-height:1.35;text-decoration:none;color:inherit}
.rg-inhalt a::before{content:counter(i,decimal-leading-zero);font:500 11.5px/1.75 var(--mono);color:var(--text-leise)}
.rg-inhalt a:hover{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.rg-text{min-width:0;max-width:720px}

/* ---------- Text ---------- */
.rg-abschnitt{padding-top:clamp(44px,5.4vw,72px)}
.rg-kurz + .rg-abschnitt,.rg-text > .rg-abschnitt:first-child{padding-top:clamp(28px,3.4vw,44px)}
.rg-text h2{font-size:clamp(26px,2.7vw,36px);line-height:1.06;letter-spacing:-.035em;margin-bottom:clamp(14px,1.6vw,20px)}
.rg-text h3{font-size:clamp(18px,1.5vw,20px);line-height:1.25;letter-spacing:-.02em}
.rg-abschnitt > * + *{margin-top:clamp(16px,1.8vw,22px)}
.rg-abschnitt > h2 + *{margin-top:0}
.rg-text p{max-width:68ch;text-wrap:pretty}
.rg-text strong{font-weight:600}
.rg-punkte{padding-left:1.15em;display:grid;gap:9px;max-width:68ch}
.rg-punkte li::marker{color:var(--text-leise)}
.rg-punkte b{font-weight:600}
/* Belegklammer bricht zwischen den Quellen um, jede Quelle bleibt ganz (mehrere Quellen ungebrochen schoben die Spalte am Handy breiter) */
.beleg{font-size:.9em;color:var(--text-leise)}
.beleg a{color:var(--link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:2px;white-space:nowrap}
.rg-kopf > *,.rg-punkte > li,.rg-kurz li{min-width:0}

/* Kurz gesagt: Nebel-Karte wie die Karten der Anleitung */
.rg-kurz{background:var(--flaeche);border-radius:var(--radius);padding:clamp(18px,2.4vw,28px)}
.rg-text .rg-kurz h2.label{font:500 11.5px/1.35 var(--mono);letter-spacing:.09em;margin:0}
.rg-kurz ul{list-style:none;display:grid;gap:10px;margin-top:12px}
.rg-kurz li{position:relative;padding-left:20px;text-wrap:pretty}
.rg-kurz li::before{content:"";position:absolute;left:0;top:.78em;width:9px;height:1.5px;background:currentColor}

/* Hinweis: Kontur in Textfarbe, keine Warnfarbe (wie .anl-warnung) */
.rg-hinweis{border-left:2px solid var(--linie-stark);padding:2px 0 2px 18px;max-width:68ch}
.rg-hinweis .label{margin-bottom:6px}
.rg-empfehlung{border-left:2px solid var(--link);padding:2px 0 2px 18px;max-width:68ch}
.rg-empfehlung .label{margin-bottom:6px;color:var(--link)}

/* Schritte: Nummer in Mono, leise */
.rg-schritte{list-style:none;display:grid;gap:18px;counter-reset:s;max-width:68ch}
.rg-schritte li{counter-increment:s;display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:10px;padding-top:14px;border-top:1px solid var(--linie)}
.rg-schritte li::before{content:counter(s,decimal-leading-zero);grid-row:span 2;font:500 12px/1.9 var(--mono);color:var(--text-leise)}
.rg-schritte p{margin-top:4px;color:var(--text-leise)}

/* Tabellen: Muster der Vergleichstabelle, in der Lesespalte ohne Überstand ab Tablet */
.rg-tabelle figcaption.label{margin-bottom:10px}
.rg-tabelle .quelle{margin-top:10px}
.rg-tab{min-width:520px}
.rg-tab thead th{font:600 15px/1.3 var(--sans);letter-spacing:-.005em}
.vergleich-rahmen:focus-visible{outline-offset:-2px}
@media (min-width:760px){.rg-text .vergleich-rahmen{margin-inline:0;padding-inline:0}}

/* Produktkarte: nächster Schritt zu Produktseite und Amazon */
.rg-produkt{display:grid;grid-template-columns:minmax(0,112px) minmax(0,1fr);gap:14px clamp(14px,2vw,24px);align-items:start;padding:clamp(14px,1.8vw,20px);border:1px solid var(--linie);border-radius:var(--radius)}
@media (min-width:760px){.rg-produkt{grid-template-columns:minmax(0,168px) minmax(0,1fr)}}
.rg-produkt .bild{aspect-ratio:1/1;border-radius:2px}
.rg-produkt-text{display:grid;gap:6px;min-width:0}
.rg-produkt h3 a{text-decoration:none}
.rg-produkt h3 a:hover{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.rg-produkt .text{color:var(--text-leise);font-size:15.5px}
.rg-knoepfe{display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;margin-top:8px}
.rg-knoepfe .knopf{min-height:44px;padding:11px 20px;font-size:14.5px}
@media (max-width:520px){.rg-produkt{grid-template-columns:minmax(0,1fr)}.rg-produkt-bild{max-width:120px}}
.rg-schluss .rg-produkt + .rg-produkt{margin-top:12px}
.rg-kacheln{margin-top:8px}

/* Antworten im Artikel: Aufklapper der Produktseiten */
.rg-text .antworten{max-width:none}

/* Quellen: lesbar, mit Sprungziel */
.rg-quellen ol{list-style:none;display:grid;gap:4px;border-top:1px solid var(--linie);padding-top:10px}
.rg-quellen li{display:grid;gap:3px;padding:10px 12px;margin-inline:-12px;border-radius:var(--radius);font-size:14.5px;line-height:1.5;scroll-margin-top:calc(var(--kopf-h) + 24px)}
.rg-quellen li:target{background:var(--flaeche)}
.rg-quellen li .label{font-size:11px}
.rg-evidenz{display:block;margin-bottom:2px;font:500 11px/1.35 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--text)}
.rg-quellen .quelle{max-width:68ch}

/* ---------- Karten: Übersicht und Weiterlesen ---------- */
.rg-karten{list-style:none;display:grid;grid-template-columns:minmax(0,1fr);column-gap:clamp(20px,3vw,40px);border-top:1px solid var(--linie)}
@media (min-width:760px){.rg-karten{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1100px){.rg-karten{grid-template-columns:repeat(3,minmax(0,1fr))}}
.rg-karten > li{min-width:0;border-bottom:1px solid var(--linie)}
.rg-karte{display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;align-items:start;padding-block:18px;text-decoration:none;color:inherit}
.rg-karte .bild{aspect-ratio:1/1;border-radius:2px}
.rg-karte-text{display:grid;gap:5px;min-width:0}
.rg-karte b{font:600 17px/1.3 var(--sans);letter-spacing:-.01em;text-wrap:balance}
.rg-karte .leise{font-size:14.5px;line-height:1.45}
.rg-karte:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}

/* Nach Gerät: statischer Index je Produktgruppe */
.rg-geraete{display:grid;gap:clamp(28px,3.6vw,48px)}
@media (min-width:900px){.rg-geraete{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:clamp(32px,4vw,64px)}}
.rg-gruppe > .label{padding-bottom:10px;border-bottom:1px solid var(--linie-stark)}
.rg-geraet{padding-block:14px;border-bottom:1px solid var(--linie)}
.rg-geraet-name{display:grid;gap:2px;text-decoration:none;color:inherit}
.rg-geraet-name b{font:600 16px/1.3 var(--sans)}
.rg-geraet-name .mono{font-size:12px;letter-spacing:.06em;color:var(--text-leise)}
.rg-geraet-name:hover b{text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.rg-geraet ul{list-style:none;display:grid;gap:6px;margin-top:10px}
.rg-geraet li{font-size:15px;line-height:1.4}

.rg-weiter{padding-top:clamp(56px,7vw,100px)}