/* dieheimhelden.de — Design „Ruhig“: hell, redaktionell, Lesetypografie.
   Stand 2026-11-08. Literata (Text, Überschriften) + Instrument Sans (Bedienung, Tabelle, Etiketten).
   Anton nur im Logo. Violett = Links/Kaufknopf, Mint = nur Markierung „Unsere Wahl“. */
@font-face{font-family:"Anton";src:url(/static/fonts/anton-latin.woff2) format("woff2");font-display:swap}
@font-face{font-family:"Literata";src:url(/static/fonts/literata-latin-400-normal.woff2) format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Literata";src:url(/static/fonts/literata-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/static/fonts/instrument-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Instrument Sans";src:url(/static/fonts/instrument-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-display:swap}

:root{
  --papier:#FFFFFF;--flaeche:#F6F5F9;--flaeche-wahl:#F8F5FD;
  --tinte:#1E1B26;--grau:#5A5666;--hell:#77727F;
  --linie:#E4E1EA;--linie-stark:#CBC6D4;--linie-wahl:#D3C4EE;
  --violett:#7A2FD4;--violett-tief:#5F1FB0;--mint:#38E8B0;
  --balken:#CFC8DB;
  --mass:42rem;--breit:60rem;
  --text:"Literata",Georgia,"Times New Roman",serif;
  --ui:"Instrument Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --logo:"Anton",Impact,"Arial Narrow",sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;color-scheme:light}
body{margin:0;overflow-x:hidden;background:var(--papier);color:var(--tinte);font:400 1.0625rem/1.72 var(--text);
  font-feature-settings:"kern";text-rendering:optimizeLegibility}
a{color:var(--violett);text-decoration-thickness:1px;text-underline-offset:.18em;text-decoration-color:rgba(122,47,212,.4)}
a:hover{color:var(--violett-tief);text-decoration-color:currentColor}
a:focus-visible,button:focus-visible{outline:2px solid var(--violett);outline-offset:3px;border-radius:2px}
img{max-width:100%;height:auto;display:block}
strong,b{font-weight:600}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.rahmen{max-width:var(--breit);margin:0 auto;padding:0 1.5rem;box-sizing:content-box}
/* eine linke Kante für alles: Rahmen 60rem, Lesetext links darin auf 42rem */
.spalte{max-width:var(--breit);margin:0 auto;padding:0 1.5rem;box-sizing:content-box}
.seitenkopf .spalte>*,.lesen>*{max-width:var(--mass)}
main{padding-bottom:2rem;flex:1 0 auto}
body{display:flex;flex-direction:column;min-height:100vh}
body>*{flex-shrink:0}

/* ===== Kopf + Werbehinweis ===== */
.kopf{border-bottom:1px solid var(--linie)}
.kopf .rahmen{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4rem}
.logo{font:1.5rem/1 var(--logo);text-transform:uppercase;letter-spacing:.02em;color:var(--tinte);text-decoration:none}
.logo span{color:var(--violett)}
.logo:hover{color:var(--tinte)}
.kopf nav{display:flex;gap:1.6rem;font:500 .95rem/1 var(--ui)}
.kopf nav a{color:var(--tinte);text-decoration:none;padding:.4rem 0}
.kopf nav a:hover{color:var(--violett);text-decoration:underline;text-decoration-color:var(--violett)}
@media(max-width:560px){.kopf nav a:not(.immer){display:none}}
.werbung{font:500 .8rem/1.5 var(--ui);color:var(--grau);background:var(--flaeche);border-bottom:1px solid var(--linie)}
.werbung .rahmen{padding-top:.5rem;padding-bottom:.5rem}
.werbung strong{color:var(--tinte);font-weight:600}
.werbung a{color:var(--grau)}

/* ===== Seitenkopf (Titel, Stand, Kernantwort) ===== */
.seitenkopf{padding:2.75rem 0 0}
.krumen{font:500 .85rem/1.4 var(--ui);color:var(--grau);margin:0 0 1.25rem}
.krumen a{color:var(--grau);text-decoration:none}
.krumen a:hover{color:var(--violett);text-decoration:underline}
.titel{font:600 clamp(2rem,3.6vw,2.75rem)/1.15 var(--text);letter-spacing:-.012em;margin:0;text-wrap:balance;overflow-wrap:break-word}
.titel .oder{font-weight:400;color:var(--hell)}
.meta{font:500 .85rem/1.5 var(--ui);color:var(--grau);margin:1rem 0 0}
.meta a{color:var(--grau)}
.kurz{margin:2.25rem 0 0;padding:1.6rem 0 0;border-top:1px solid var(--linie)}
.kurz-label,.etikett,.sit,.kat{font:600 .78rem/1.3 var(--ui);letter-spacing:.06em;text-transform:uppercase;color:var(--grau)}
.kern{font-size:1.25rem;line-height:1.62;margin:.6rem 0 0}
.kern strong{font-weight:600}
.unter{font-size:1.2rem;line-height:1.6;color:var(--grau);margin:1rem 0 0;max-width:38rem}
.unter a{color:var(--violett)}

/* ===== Kurzentscheidung: Unsere Wahl + Alternative ===== */
.entscheid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:1.25rem;margin:2.5rem auto 0}
.entscheid>div{display:flex;flex-direction:column;padding:1.5rem 1.6rem 1.6rem;background:var(--papier);border:1px solid var(--linie-stark);border-radius:6px}
.entscheid>div.empfohlen{background:var(--flaeche-wahl);border-color:var(--linie-wahl);box-shadow:inset 0 3px 0 var(--violett)}
.wahl,.alt{align-self:flex-start;font:600 .8rem/1 var(--ui);letter-spacing:.02em;color:var(--tinte);background:var(--mint);padding:.38rem .6rem .36rem;border-radius:3px;margin:0 0 1rem}
.alt{color:var(--grau);background:var(--flaeche);box-shadow:inset 0 0 0 1px var(--linie)}
.entscheid .name{font:600 1.45rem/1.25 var(--text);margin:.35rem 0 .8rem;overflow-wrap:break-word}
.entscheid ul{flex:1;margin:0 0 1.5rem;padding:0;list-style:none;font-size:1rem;line-height:1.55}
.entscheid li{padding:.32rem 0 .32rem 1.5rem;position:relative}
.entscheid li::before{content:"";position:absolute;left:.15rem;top:.78rem;width:.55rem;height:.3rem;border-left:2px solid var(--violett);border-bottom:2px solid var(--violett);transform:rotate(-45deg)}
.kauf{display:block;text-align:center;font:600 1rem/1.3 var(--ui);text-decoration:none;color:#fff;background:var(--violett);border:1px solid var(--violett);border-radius:5px;padding:.8rem 1rem .7rem;transition:background-color .15s}
.kauf:hover{background:var(--violett-tief);border-color:var(--violett-tief);color:#fff}
.kauf small{display:block;font:500 .75rem/1.4 var(--ui);opacity:.88;margin-top:.15rem}
.entscheid.empf-a .b .kauf,.entscheid.empf-b .a .kauf{background:var(--papier);color:var(--violett-tief);border-color:var(--violett)}
.entscheid.empf-a .b .kauf:hover,.entscheid.empf-b .a .kauf:hover{background:var(--flaeche-wahl)}
.entscheid.empf-a .b .kauf small,.entscheid.empf-b .a .kauf small{color:var(--grau);opacity:1}
.kein-link{font:500 .88rem/1.4 var(--ui);color:var(--grau);margin:0}

/* ===== Lesetext ===== */
h2{font:600 1.55rem/1.3 var(--text);letter-spacing:-.005em;margin:3.25rem 0 .9rem;text-wrap:balance}
h3{font:600 1.15rem/1.4 var(--text);margin:1.9rem 0 .35rem}
p{margin:0 0 1.1rem}
.lesen ul,.lesen ol{padding-left:1.25rem;margin:0 0 1.2rem}
.lesen li{margin:.35rem 0;padding-left:.2rem}
.lesen li::marker{color:var(--hell)}
.lesen .kern{margin:0 0 2rem;padding:0 0 1.6rem;border-bottom:1px solid var(--linie)}
.textseite{padding-top:2rem}
.quellen{font-size:.95rem;color:var(--grau)}
.ratgeber-hinweis{font:500 .95rem/1.5 var(--ui);margin:2.5rem 0 0;padding:1rem 1.2rem;background:var(--flaeche);border-radius:6px}

/* ===== Tabelle + Messbalken ===== */
.tabwrap{margin:.25rem 0 0}
.tabelle{width:100%;border-collapse:collapse;font:500 .95rem/1.45 var(--ui);font-variant-numeric:tabular-nums}
.tabelle th,.tabelle td{padding:.85rem .9rem;text-align:left;vertical-align:top;border-bottom:1px solid var(--linie)}
.tabelle thead th{font:600 .95rem/1.3 var(--ui);color:var(--tinte);border-bottom:2px solid var(--tinte);padding-top:.4rem;vertical-align:bottom}
.tabelle thead th:first-child{color:var(--grau);font-weight:500;padding-left:0}
.tabelle .wahlspalte{background:var(--flaeche-wahl)}
.tabelle thead th.wahlspalte{padding-top:.8rem}
.tabelle thead .wahl{display:table;margin:0 0 .5rem;font-size:.74rem;padding:.3rem .5rem .28rem}
.tabelle tbody th{width:32%;font-weight:500;color:var(--grau);padding-left:0}
.tabelle td{width:34%;color:var(--tinte)}
.tabelle td.besser{font-weight:600}
.tabelle td.besser .haken{color:var(--violett);font-weight:600;margin-left:.3rem}
.balken{display:block;height:4px;margin-top:.55rem;background:var(--linie);border-radius:2px;max-width:12rem}
.balken i{display:block;height:100%;width:var(--w);min-width:3px;background:var(--balken);border-radius:2px}
.besser .balken i{background:var(--violett)}
.tabelle caption{caption-side:bottom;text-align:left;font:500 .82rem/1.5 var(--ui);color:var(--grau);padding:.9rem 0 0}

.nichtfuer{margin:2.75rem 0 0;padding:1.3rem 1.4rem;background:var(--flaeche);border-radius:6px}
.nichtfuer strong{display:block;font:600 1.05rem/1.4 var(--text);margin:0 0 .3rem}
.nichtfuer ul{margin:.3rem 0 0;padding-left:1.15rem;font-size:1rem}

/* ===== Video (2-Klick) — klein und ruhig ===== */
.video{position:relative;aspect-ratio:16/9;max-width:26rem;background:var(--flaeche);overflow:hidden;border-radius:6px;margin:1rem 0 .5rem;border:1px solid var(--linie)}
.video img{width:100%;height:100%;object-fit:cover;filter:saturate(.7)}
.video button{position:absolute;inset:0;width:100%;border:0;background:linear-gradient(rgba(20,16,28,.05) 30%,rgba(20,16,28,.82));color:#fff;font:500 .78rem/1.45 var(--ui);cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;padding:1rem;gap:.55rem;text-align:left}
.video button b{font:600 .92rem/1 var(--ui);background:#fff;color:var(--tinte);padding:.6rem .85rem;border-radius:4px}
.video button:hover b{background:var(--flaeche-wahl)}
.video button small{font-size:.74rem;max-width:26rem}
.video button small a{color:#fff}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.transkript{margin:1.5rem 0;padding:0 0 0 1.2rem;border-left:2px solid var(--linie-stark);color:var(--grau)}
.transkript p{margin:0}
.transkript footer{font:500 .8rem/1.4 var(--ui);color:var(--hell);margin-top:.5rem}

/* ===== Ratgeber: Empfehlung je Situation ===== */
.empfliste{margin:1.25rem 0 0;border-top:1px solid var(--linie)}
.empf{padding:1.5rem 0 1.6rem;border-bottom:1px solid var(--linie)}
.empf .modell{font:600 1.35rem/1.3 var(--text);margin:.4rem 0 .5rem}
.empf p{margin:0 0 1rem}
.empf .kauf{display:inline-block;padding:.6rem 1rem .55rem;font-size:.95rem;background:var(--papier);color:var(--violett-tief);border-color:var(--violett)}
.empf .kauf:hover{background:var(--flaeche-wahl);color:var(--violett-tief)}

/* ===== Listen (Start, Kategorien, Alle) ===== */
.liste{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:2.5rem;margin:1rem 0 0;border-top:1px solid var(--tinte)}
.eintrag{display:block;text-decoration:none;color:var(--tinte);padding:1.35rem 0 1.4rem;border-bottom:1px solid var(--linie)}
.eintrag strong{display:block;font:600 1.2rem/1.35 var(--text);margin:.35rem 0 .4rem;overflow-wrap:break-word}
.eintrag .o{font-weight:400;color:var(--hell)}
.eintrag .teaser{display:block;font-size:.98rem;line-height:1.55;color:var(--grau)}
.eintrag .fuss-zeile{display:block;font:500 .82rem/1.4 var(--ui);color:var(--grau);margin-top:.6rem}
.eintrag .fuss-zeile b{color:var(--tinte);font-weight:600}
.eintrag:hover strong{color:var(--violett);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.18em}
.eintrag.auf{grid-column:1/-1;padding:1.8rem 0 1.9rem}
.eintrag.auf strong{font-size:clamp(1.55rem,2.6vw,1.95rem);line-height:1.25;max-width:40rem}
.eintrag.auf .teaser{font-size:1.08rem;max-width:40rem}
.abschnitt{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin:3.5rem 0 0}
.abschnitt h2{margin:0}
.abschnitt a{font:500 .92rem/1.4 var(--ui);white-space:nowrap}
.kats{columns:3 12rem;column-gap:2.5rem;margin:1rem 0 0;padding:1rem 0 0;list-style:none;border-top:1px solid var(--tinte);font:500 1rem/1.4 var(--ui)}
.kats li{break-inside:avoid;padding:.45rem 0}
.kats a{text-decoration:none;color:var(--tinte)}
.kats a:hover{color:var(--violett);text-decoration:underline}
.methode{margin:3.5rem 0 0;padding:1.6rem 1.75rem;background:var(--flaeche);border-radius:6px;max-width:var(--mass)}
.methode h2{margin:0 0 .5rem;font-size:1.3rem}
.methode p{margin:0}

/* ===== Fuß ===== */
.fuss{margin-top:5rem;background:var(--flaeche);color:var(--grau);font:500 .88rem/1.6 var(--ui);border-top:1px solid var(--linie)}
.fuss .rahmen{padding-top:2.2rem;padding-bottom:2.4rem}
.fuss p{margin:.4rem 0;max-width:46rem}
.fuss strong{color:var(--tinte)}
.fuss a{color:var(--tinte)}
.fuss a:hover{color:var(--violett)}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== Start ===== */
.start-kopf{padding:4rem 0 .5rem}
.start-kopf .titel{font-size:clamp(2.3rem,4.6vw,3.4rem);line-height:1.1}
.start-kopf .unter{font-size:1.2rem}

/* ===== Handy ===== */
@media(max-width:760px){
  .rahmen,.spalte{padding:0 1.1rem}
  .seitenkopf{padding-top:1.75rem}
  .start-kopf{padding-top:2.5rem}
  .titel{font-size:1.85rem}
  .start-kopf .titel{font-size:2.2rem}
  .kern{font-size:1.12rem}
  .unter,.start-kopf .unter{font-size:1.08rem}
  .kurz{margin-top:1.6rem;padding-top:1.3rem}
  .entscheid{grid-template-columns:minmax(0,1fr);gap:1rem;margin-top:2rem}
  .entscheid.empf-b .b{order:-1}
  .entscheid>div{padding:1.25rem 1.2rem 1.3rem}
  .entscheid .name{font-size:1.3rem}
  h2{font-size:1.35rem;margin-top:2.6rem}
  .liste{grid-template-columns:minmax(0,1fr)}
  .eintrag.auf strong{font-size:1.45rem}
  .abschnitt{margin-top:2.75rem}
  .methode{padding:1.3rem 1.2rem}
  .tabelle thead{display:none}
  .tabelle{display:flex;flex-direction:column}
  .tabelle tbody,.tabelle tr{display:block;width:100%}
  .tabelle tr{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:1rem;border-bottom:1px solid var(--linie);padding:.8rem 0 .85rem}
  .tabelle tr:first-child{border-top:2px solid var(--tinte)}
  .tabelle tbody th{grid-column:1/-1;width:auto;border:0;padding:0 0 .35rem;font-weight:600;color:var(--tinte)}
  .tabelle td{width:auto;border:0;padding:0;overflow-wrap:break-word;hyphens:auto}
  .tabelle td::before{content:attr(data-label);display:block;font:500 .74rem/1.3 var(--ui);color:var(--grau);margin-bottom:.2rem}
  .tabelle caption{display:block;order:2;padding:.8rem 0 0}
  .balken{max-width:none}
  .tabelle .wahlspalte{background:none}
  .video{max-width:none}
}