/* ==========================================================================
   Klima-Insider - Design-System "Frischluft"
   Kuehle Vertrauensbasis + ein warmer Aktionston. Alle Stile extern
   (CSP script-src/style-src 'self', keine Inline-Styles noetig).
   ========================================================================== */

/* ---- Self-hosted Fonts ------------------------------------------------
   Deaktiviert, solange keine woff2-Dateien in /assets/fonts/ liegen.
   Aktiv wuerden die Regeln pro Seitenaufruf sieben 404er ausloesen, ohne
   dass sich am Bild etwas aendert: es greift ohnehin die System-Schrift
   aus --sans / --body / --mono.
   WIEDER AKTIVIEREN: die sieben Dateien nach /assets/fonts/ legen
   (Namen siehe assets/fonts/README.md) und den Block unten entkommentieren.

@font-face{font-family:"Libre Franklin";src:url("/assets/fonts/LibreFranklin-SemiBold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url("/assets/fonts/LibreFranklin-Bold.woff2") format("woff2");
  font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Libre Franklin";src:url("/assets/fonts/LibreFranklin-ExtraBold.woff2") format("woff2");
  font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-Regular.woff2") format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Inter";src:url("/assets/fonts/Inter-SemiBold.woff2") format("woff2");
  font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Mono";src:url("/assets/fonts/IBMPlexMono-Medium.woff2") format("woff2");
  font-weight:500;font-style:normal;font-display:swap}
   ---------------------------------------------------------------------- */

:root{
  --air:#F4F8FB; --card:#FFFFFF; --mist:#E4EFF6;
  --sky:#15628F; --deep:#0B2A3E; --cool:#17B0BE;
  /* --action traegt weissen Text und muss deshalb 4,5:1 erreichen.
     Das fruehere #E4863A kam auf 2,70:1 - zu wenig fuer Schaltflaechen
     und fuer das Werbe-Kennzeichen. #B65F19 kommt auf 4,53:1. */
  --action:#B65F19; --action-dark:#9C5721;
  /* --cool bleibt die dekorative Farbe (Linien, Grafik, dunkler Grund).
     Fuer Text und Symbole auf hellem Grund reicht sie nicht: 2,46:1.
     Dafuer gibt es --accent-text: 4,53:1 auch auf dem dunkelsten der
     hellen Untergruende (--mist), 5,29:1 auf Weiss. */
  --accent-text:#107780;
  --ink:#16242C; --muted:#566872; --line:#D3E1EA; --ok:#27865B;
  /* Rahmen von Eingabefeldern brauchen 3:1 gegen den Fuellgrund
     (WCAG 1.4.11). --line kommt auf 1,34:1 und bleibt deshalb den
     dekorativen Kanten vorbehalten. */
  --line-strong:#6B9AB9;
  --sans:"Libre Franklin",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --body:"Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  /* Ueberschriften laufen auf einer Serife aus dem Systemstack: keine
     Datei, kein CDN, kein Abmahnrisiko - und der Unterschied zum
     Fliesstext macht die Seite auf den ersten Blick redaktionell
     statt shopartig. */
  --serif:"Iowan Old Style","Hoefler Text","Palatino Linotype",Palatino,Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular","Cascadia Mono",Consolas,monospace;
  --wrap:1140px; --r:14px;
  --shadow:0 1px 2px rgba(11,42,62,.04),0 8px 24px rgba(11,42,62,.06);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--air);color:var(--ink);font-family:var(--body);
  font-size:18px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,h4{font-family:var(--sans);line-height:1.15;letter-spacing:-.01em;margin:0;
  overflow-wrap:break-word}
/* H1 und H2 auf der Serife: sie tragen die Argumentation. H3 und H4
   bleiben grotesk, weil sie eher als Beschriftung wirken. Serifen
   vertragen kein Gewicht 800 und keine negative Laufweite. */
h1,h2{font-family:var(--serif);font-weight:700;letter-spacing:0;line-height:1.18}
/* Ausgleich der Zeilenlaengen erst ab Tablet: auf schmalen Displays
   arbeitet er gegen die Silbentrennung und erzeugt kurze Restzeilen. */
@media (min-width:601px){h1,h2{text-wrap:balance}}
/* Lange deutsche Komposita ("Waermedaemmverbundsystem") passen auf 360 px nicht
   in eine Zeile und wurden vom overflow:hidden des Body abgeschnitten. Auf
   schmalen Displays deshalb Silbentrennung, das lang="de" der Seiten liefert
   das Woerterbuch. Ab 481 px bleibt die Typografie unveraendert. */
@media (max-width:480px){h1,h2,h3,h4{hyphens:auto;-webkit-hyphens:auto}}
p{margin:0 0 1rem}
img{max-width:100%;height:auto;display:block}
a{color:var(--sky)}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 20px}
.kicker{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-text)}
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Accessibility floor */
.skip{position:absolute;left:-999px;top:0;background:var(--deep);color:#fff;padding:10px 16px;
  border-radius:0 0 8px 0;z-index:100}
.skip:focus{left:0}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{
  outline:3px solid var(--accent-text);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--sans);font-weight:700;
  font-size:1rem;border:0;border-radius:11px;padding:14px 22px;cursor:pointer;text-decoration:none;
  transition:transform .12s ease,background .12s ease}
.btn-action{background:var(--action);color:#fff}
.btn-action:hover{background:var(--action-dark);transform:translateY(-1px)}
.btn-ghost{background:transparent;color:var(--sky);border:2px solid var(--line-strong)}
.btn-ghost:hover{border-color:var(--sky)}
.btn-sm{padding:10px 16px;font-size:.92rem;border-radius:9px}

/* Header */
.site-header{position:sticky;top:0;z-index:50;background:rgba(244,248,251,.92);
  backdrop-filter:saturate(120%) blur(8px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;gap:18px;min-height:66px}
.brand{display:flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:800;
  font-size:1.18rem;color:var(--deep);text-decoration:none;letter-spacing:-.02em}
.brand .mark{width:26px;height:26px;flex:0 0 auto}
.navlinks{display:flex;gap:20px;margin-left:auto;font-family:var(--sans);font-weight:600;font-size:.95rem}
.navlinks a{color:var(--deep);text-decoration:none;opacity:.85}
.navlinks a:hover,.navlinks a:focus-visible{opacity:1;color:var(--sky)}
.nav .header-cta{margin-left:6px}
.burger{display:none;margin-left:auto;background:none;border:1px solid var(--line);
  border-radius:9px;padding:9px 11px;cursor:pointer;color:var(--deep)}
@media (max-width:900px){
  .navlinks{position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0;
    background:var(--card);border-bottom:1px solid var(--line);padding:8px 20px;display:none}
  .navlinks.open{display:flex}
  .navlinks a{padding:12px 0;border-bottom:1px solid var(--line);opacity:1}
  .burger{display:inline-flex}
  .nav .header-cta{display:none}
}

/* Hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(180deg,#EAF3F9 0%,var(--air) 100%)}
.hero .flow{position:absolute;inset:0;z-index:0;opacity:.5;pointer-events:none;color:var(--cool)}
.hero .wrap{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;
  gap:44px;align-items:center;padding-top:56px;padding-bottom:60px}
.hero h1{font-size:clamp(2rem,4.2vw,3.05rem);color:var(--deep);font-weight:700}
.hero .lead{font-size:1.14rem;color:var(--muted);max-width:34ch;margin-top:14px}
.hero-cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
.microcopy{font-size:.9rem;color:var(--muted);margin-top:12px}
.microcopy b{color:var(--sky)}
@media (max-width:860px){.hero .wrap{grid-template-columns:1fr;gap:30px;padding-top:34px}}

/* Kuehllast-Rechner (Signature) */
.calc{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);overflow:hidden}
.calc .top{background:var(--deep);color:#fff;padding:14px 18px;display:flex;align-items:center;gap:9px}
.calc .top .kicker{color:#7FD6DF}
.calc .top .top-title{font-family:var(--sans);font-size:1.02rem;color:#fff;margin-left:auto;font-weight:700}
.calc .body{padding:18px}
.field{margin-bottom:13px}
.field label{display:block;font-family:var(--sans);font-weight:600;font-size:.86rem;color:var(--deep);margin-bottom:5px}
.field input[type=number],.field input[type=text],.field select{width:100%;font-family:var(--body);font-size:1rem;
  padding:12px;border:1px solid var(--line-strong);border-radius:9px;background:#fff;color:var(--ink)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.chk{display:flex;align-items:center;gap:9px;font-size:.92rem;color:var(--ink);
  padding:12px;border:1px solid var(--line-strong);border-radius:9px;cursor:pointer}
.chk input{width:18px;height:18px;accent-color:var(--accent-text)}
.readout{margin-top:6px;border:1px solid var(--line);border-top:3px solid var(--cool);
  border-radius:11px;background:linear-gradient(180deg,#F2FAFB,#fff);padding:15px 16px}
.readout .rk{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted)}
.readvals{display:flex;gap:20px;flex-wrap:wrap;margin-top:8px;align-items:baseline}
.readvals .big{font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:2rem;
  font-weight:500;color:var(--deep);line-height:1}
.readvals .unit{font-family:var(--sans);font-size:.82rem;color:var(--muted);display:block;margin-top:3px}
.klass{margin-top:10px;font-size:.94rem}
.klass b{color:var(--sky)}
.calcnote{margin-top:12px}
.calcnote summary{cursor:pointer;font-family:var(--sans);font-weight:600;font-size:.86rem;color:var(--sky)}
.calcnote p{font-size:.82rem;color:var(--muted);margin:.6rem 0 0}
@media (max-width:420px){.row2{grid-template-columns:1fr}.readvals .big{font-size:1.7rem}}

/* Trust bar */
.trust{background:var(--deep)}
.trust .wrap{display:flex;flex-wrap:wrap;gap:10px 30px;justify-content:center;padding:14px 20px;
  color:#CFE3EF;font-size:.9rem}
.trust .ti{display:flex;align-items:center;gap:8px}
.trust .ti svg{color:var(--accent-text);flex:0 0 auto}

/* Generic section */
.band{padding:56px 0}
.band.tint{background:var(--mist)}
.sechead{max-width:62ch;margin-bottom:26px}
.sechead h2{font-size:clamp(1.5rem,3vw,2.1rem);color:var(--deep);margin-top:6px}
.sechead p{color:var(--muted);margin-top:10px}

/* Why size */
.why{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.why .box{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px}
.why .box h3{font-size:1.05rem;color:var(--deep);margin-bottom:6px;display:flex;gap:9px;align-items:center;flex-wrap:wrap}
.why .box p{font-size:.96rem;color:var(--muted);margin:0}
.tag{font-family:var(--mono);font-size:.74rem;color:#fff;background:var(--sky);padding:2px 8px;border-radius:20px}
.tag.warn{background:var(--action)}
@media (max-width:720px){.why{grid-template-columns:1fr}}

/* Steps (echte Reihenfolge) */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.step{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:20px 18px}
.step .num{font-family:var(--mono);font-size:1.15rem;font-weight:500;color:#fff;background:var(--sky);
  width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.step h3{font-size:1.02rem;color:var(--deep);margin-bottom:5px}
.step p{font-size:.9rem;color:var(--muted);margin:0 0 .7rem}
.step a{font-family:var(--sans);font-weight:600;font-size:.88rem;text-decoration:none}
.step a:hover{text-decoration:underline}
@media (max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.steps{grid-template-columns:1fr}}

/* Cluster cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.ccard{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;
  text-decoration:none;color:inherit;display:block;transition:border-color .12s,transform .12s}
.ccard:hover{border-color:var(--sky);transform:translateY(-2px)}
.ccard .ic{width:40px;height:40px;border-radius:10px;background:var(--mist);color:var(--sky);
  display:flex;align-items:center;justify-content:center;margin-bottom:13px}
.ccard h3{font-size:1.08rem;color:var(--deep);margin-bottom:5px}
.ccard p{font-size:.92rem;color:var(--muted);margin:0}
.ccard .go{display:inline-block;margin-top:11px;color:var(--sky);font-family:var(--sans);font-weight:600;font-size:.9rem}
@media (max-width:820px){.cards{grid-template-columns:1fr 1fr}}
@media (max-width:520px){.cards{grid-template-columns:1fr}}

/* Comparison + affiliate */
.cmp{display:grid;grid-template-columns:1.4fr 1fr;gap:22px;align-items:start}
.cmptable{width:100%;border-collapse:collapse;background:var(--card);border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;font-size:.94rem}
.cmptable caption{text-align:left;font-size:.8rem;color:var(--muted);padding:0 0 8px}
.cmptable th,.cmptable td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line)}
.cmptable thead th{background:var(--deep);color:#fff;font-family:var(--sans);font-size:.82rem;
  letter-spacing:.03em;text-transform:uppercase}
.cmptable td.num{font-family:var(--mono);font-variant-numeric:tabular-nums;color:var(--sky)}
.cmptable tr:last-child td,.cmptable tr:last-child th{border-bottom:0}
/* Zeilenkoepfe in den Vergleichstabellen: th statt td, damit Screenreader und
   Maschinen die Zuordnung lesen. Farbe und Groesse bleiben wie beim Text. */
.cmptable tbody th{font-family:inherit;font-size:inherit;color:var(--ink);background:transparent;
  text-transform:none;letter-spacing:0}
.adbox{background:var(--card);border:1px solid var(--line);border-top:4px solid var(--action);
  border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.adlabel{display:inline-block;font-family:var(--sans);font-weight:700;font-size:.7rem;letter-spacing:.1em;
  text-transform:uppercase;color:#8A5A22;background:#FBEBD9;padding:3px 9px;border-radius:5px;margin-bottom:11px}
.adbox h3{font-size:1.12rem;color:var(--deep);margin-bottom:4px}
.adbox .price{font-family:var(--mono);color:var(--ink);font-size:.92rem;margin:.3rem 0 .6rem}
.adbox ul{margin:.2rem 0 1rem;padding-left:1.1rem;font-size:.9rem;color:var(--muted)}
.adbox ul li{margin:.2rem 0}
.adbox .btn{width:100%;justify-content:center}
.adnote{font-size:.76rem;color:var(--muted);margin:.7rem 0 0}
@media (max-width:820px){.cmp{grid-template-columns:1fr}}
/* Schmale Telefone: die Vergleichstabelle darf die Seite nicht breiter machen
   als das Fenster. Gemessen bei 390 px: Tabelle 437 px, dadurch waagerechte
   Scrollleiste auf der Startseite. Engere Innenabstaende und kleinere Schrift
   loesen das, ohne die Tabelle unleserlich zu machen. */
@media (max-width:560px){
  .cmptable{font-size:.84rem;table-layout:fixed}
  .cmptable th,.cmptable td{padding:10px 8px;hyphens:auto;overflow-wrap:break-word}
  .cmptable thead th{font-size:.68rem;letter-spacing:0;text-transform:none;hyphens:manual}
  .cmptable col.c1{width:38%}
}

/* Kosten + zwei Jahreszeiten (Heizen) */
.cost{display:grid;grid-template-columns:1fr 1fr;gap:22px;align-items:stretch}
.cost .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px}
.cost .panel h3{color:var(--deep);font-size:1.2rem;margin-bottom:8px}
.season{background:linear-gradient(135deg,var(--sky),var(--deep));color:#fff;border-radius:var(--r);padding:24px}
.season .kicker{color:#9CE4EB}
.season h3{color:#fff;font-size:1.25rem;margin:6px 0 8px}
.season p{color:#D6E8F1;font-size:.96rem}
.season .scop{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:.86rem;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:8px;padding:6px 11px;margin:.2rem 0 .8rem}
.season a{color:#fff;font-weight:600}
.season .fnote{font-size:.78rem;color:#C8DBE5;margin-top:10px}
@media (max-width:720px){.cost{grid-template-columns:1fr}}

/* Honesty */
.honest{background:var(--card);border:1px solid var(--line);border-left:5px solid var(--cool);
  border-radius:var(--r);padding:26px}
.honest h2{color:var(--deep);font-size:1.5rem;margin-bottom:8px}
.honest p{color:var(--muted);margin:0 0 .6rem;max-width:72ch}
.honest a{font-weight:600;text-decoration:none}
.honest a:hover{text-decoration:underline}

/* FAQ */
.faq details{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:4px 18px;margin-bottom:10px}
.faq summary{cursor:pointer;font-family:var(--sans);font-weight:600;color:var(--deep);padding:14px 0;
  list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--accent-text);font-family:var(--mono);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:"-"}
.faq details p{color:var(--muted);font-size:.96rem;margin:0 0 14px}

/* Footer */
.site-footer{background:var(--deep);color:#C6DBE8;padding:48px 0 26px;margin-top:8px}
.fgrid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:26px}
.fcol h4{font-family:var(--sans);color:#fff;font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;margin:0 0 12px}
.fcol a{display:block;color:#AEC8D8;text-decoration:none;font-size:.92rem;padding:4px 0}
.fcol a:hover,.fcol a:focus-visible{color:#fff}
.fbrand{display:flex;align-items:center;gap:9px;font-family:var(--sans);font-weight:800;color:#fff;font-size:1.1rem;margin-bottom:10px}
.fbrand .mark{width:24px;height:24px}
.fcol.about p{font-size:.9rem;color:#9FBACB;margin:0 0 .6rem}
.foot-legal{border-top:1px solid rgba(255,255,255,.12);margin-top:28px;padding-top:18px;font-size:.8rem;
  color:#8FAABC;display:flex;flex-wrap:wrap;gap:6px 18px}
.foot-legal a{color:#AEC8D8}
.legal h1{font-size:clamp(1.5rem,3vw,2rem);color:var(--deep);margin-bottom:14px}
.legal h2{font-size:1.15rem;color:var(--deep);margin:22px 0 8px}
.legal p,.legal li{color:var(--ink);font-size:.98rem}
.legal .ph{background:#FBEBD9;border-left:3px solid var(--action);padding:2px 8px;border-radius:4px}
.legal .updated{color:var(--muted);font-size:.85rem}
@media (max-width:820px){.fgrid{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.fgrid{grid-template-columns:1fr}}

/* ============================================================
   COOKIE-CONSENT
   Ohne Inline-Styles, damit die strikte CSP (style-src 'self')
   bestehen bleibt. Der Dialog dunkelt die Seite ab, deckt sie
   aber nicht weiss zu.
   ============================================================ */
.consent{
  position:fixed; inset:0; z-index:200;
  display:none; align-items:center; justify-content:center;
  padding:1rem; background:rgba(11,42,62,.55);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px);
  pointer-events:none;
}
.consent[data-open="true"]{ display:flex; pointer-events:auto; }
.consent-card{
  position:relative; width:100%; max-width:33rem; overflow:hidden;
  border-radius:var(--r); border:1px solid var(--line);
  background:var(--card); box-shadow:0 20px 60px -20px rgba(11,42,62,.45);
}
.consent-bar{ height:4px; background:linear-gradient(90deg,var(--sky),var(--cool)); }
.consent-body{ padding:1.5rem; }
.consent-body h2{ font-family:var(--sans); font-size:1.2rem; margin:0; color:var(--ink); }
.consent-body>p{ margin:.5rem 0 0; font-size:.9rem; line-height:1.6; color:var(--muted); }
.consent-details{ margin-top:1.25rem; display:flex; flex-direction:column; gap:.75rem;
  border-radius:10px; border:1px solid var(--line); background:var(--air); padding:1rem; }
.consent-details[hidden]{ display:none; }
.consent-item{ border-radius:8px; background:var(--card); padding:.75rem; }
.consent-item-head{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; }
.consent-item-head strong{ font-size:.875rem; color:var(--ink); }
.consent-tag{ border-radius:999px; background:var(--mist); padding:.125rem .5rem;
  font-size:.65rem; font-weight:700; color:var(--sky); }
.consent-item p{ margin:.25rem 0 0; font-size:.78rem; line-height:1.55; color:var(--muted); }
.consent-choice{ display:flex; align-items:flex-start; gap:.75rem; border-radius:8px;
  background:var(--card); padding:.75rem; cursor:pointer; }
.consent-choice input{ margin-top:3px; width:15px; height:15px; flex-shrink:0; cursor:pointer; }
.consent-actions{ margin-top:1.25rem; display:grid; gap:.75rem; grid-template-columns:1fr 1fr; }
.btn-consent{ display:inline-flex; align-items:center; justify-content:center;
  padding:.7rem 1rem; border-radius:10px; border:1px solid transparent;
  font-family:var(--sans); font-size:.9rem; font-weight:650; cursor:pointer; color:#fff; }
.btn-consent.is-plain{ background:var(--deep); border-color:var(--deep); }
.btn-consent.is-accept{ background:var(--action); border-color:var(--action); }
.btn-consent.is-accept:hover{ background:var(--action-dark); border-color:var(--action-dark); }
.consent-foot{ margin-top:1rem; display:flex; flex-wrap:wrap; align-items:center;
  justify-content:space-between; gap:.75rem; font-size:.78rem; }
.consent-link{ font-weight:500; color:var(--muted); text-decoration:underline;
  text-underline-offset:2px; background:none; border:0; cursor:pointer;
  font-family:var(--body); font-size:.78rem;
  /* Gemessen waren es 15 px Hoehe. Wer die granulare Wahl treffen soll,
     muss den Knopf auch treffen koennen - Mindestmass 24 px (WCAG 2.5.8).
     Nur die Trefferflaeche waechst, die Schrift bleibt gleich. */
  padding:.45rem 0; min-height:24px; display:inline-flex; align-items:center; }
.consent-link.is-save{ color:var(--sky); }
.consent-link[hidden]{ display:none; }
.consent-legal{ display:flex; align-items:center; gap:.5rem; color:var(--muted); }
.consent-legal a{ color:inherit; }
@media (max-width:420px){ .consent-actions{ grid-template-columns:1fr; } }

/* Footer-Schaltflaeche "Cookie-Einstellungen" */
.foot-consent{ background:none; border:0; cursor:pointer;
  font-family:var(--body); font-size:inherit; color:inherit; text-decoration:underline;
  text-underline-offset:2px;
  /* Der Widerruf muss so leicht zu treffen sein wie die Einwilligung.
     Gemessen waren es 15 px Hoehe - unter dem Mindestmass von 24 px
     (WCAG 2.5.8). Die Polsterung vergroessert nur die Trefferflaeche,
     die Schrift bleibt gleich. */
  padding:.45rem 0; min-height:24px; display:inline-flex; align-items:center; }

/* Brotkrumen-Navigation */
.breadcrumb{ font-size:.85rem; color:var(--muted); margin-bottom:.75rem; }
.breadcrumb a{ color:var(--sky); text-decoration:none; }
.breadcrumb a:hover{ text-decoration:underline; }

/* ============================================================
   RATGEBER: Artikel-Typografie und Bausteine
   ============================================================ */
.prose{ max-width:760px; margin:0 auto; }
/* Auch die Abschnittsueberschriften im Artikel laufen auf der Serife -
   dort trennt sie Text von Text und macht den Sprung sichtbar, noch
   bevor man liest. Etwas groesser, weil Serifen kleiner wirken. */
.prose h2{ font-family:var(--serif); font-weight:700; letter-spacing:0;
  font-size:1.6rem; line-height:1.25; color:var(--ink);
  margin:2.5rem 0 .75rem; }
.prose h3{ font-family:var(--sans); font-size:1.15rem; color:var(--ink); margin:1.5rem 0 .5rem; }
.prose p{ line-height:1.75; color:var(--ink); margin:0 0 1rem; }
.prose ul,.prose ol{ line-height:1.75; color:var(--ink); margin:0 0 1.25rem; padding-left:1.25rem; }
.prose li{ margin-bottom:.4rem; }
.prose a{ color:var(--sky); }
.prose-media{ margin:0 0 1.5rem; }
.prose-media img{ width:100%; height:auto; border-radius:var(--r); display:block; }
.prose-media figcaption{ font-size:.8rem; color:var(--muted); margin-top:.5rem; }

/* Kurzantwort oben im Artikel */
.callout{ border-left:4px solid var(--cool); background:var(--air);
  border-radius:0 10px 10px 0; padding:1rem 1.1rem; margin:0 0 1.5rem; }
.callout p{ margin:0; line-height:1.7; }
.callout strong{ color:var(--deep); }

/* Hervorgehobener Kasten (Weiterlesen, Hinweise) */
.panel{ border:1px solid var(--line); background:var(--card); border-radius:var(--r);
  padding:1.25rem; margin:1.75rem 0; box-shadow:var(--shadow); }
.panel h3{ margin-top:0; }
.panel ul{ margin-bottom:0; }
.panel-accent{ border-color:var(--mist); background:var(--air); }

/* Meta-Zeile unter der Ueberschrift */
.artmeta{ font-size:.85rem; color:var(--muted); margin:.5rem 0 0; }
.artmeta span+span::before{ content:"·"; margin:0 .45rem; opacity:.6; }

/* Artikelkarten im Ratgeber-Hub */
.artgrid{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); }
.artcard{ border:1px solid var(--line); border-radius:var(--r); background:var(--card);
  overflow:hidden; box-shadow:var(--shadow); display:flex; flex-direction:column; }
.artcard img{ width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover; }
.artcard-body{ padding:1rem 1.1rem 1.25rem; display:flex; flex-direction:column; gap:.4rem; flex:1; }
.artcard h3{ font-family:var(--sans); font-size:1.05rem; margin:0; }
.artcard h3 a{ color:var(--ink); text-decoration:none; }
.artcard h3 a:hover{ color:var(--sky); }
.artcard p{ font-size:.9rem; color:var(--muted); line-height:1.6; margin:0; }
.artcard .tag{ align-self:flex-start; }

/* Vertrauensleiste ganz oben */
.ribbon{ background:var(--deep); color:#EAF3F8; font-size:.8rem; }
.ribbon .wrap{ display:flex; align-items:center; justify-content:center; gap:1rem;
  min-height:34px; flex-wrap:wrap; text-align:center; padding:.35rem 1rem; }
.ribbon .sep{ opacity:.4; }
/* Hinweis ohne JavaScript */
.nojs{ background:var(--action); color:#fff; padding:.9rem 1rem; text-align:center; font-size:.9rem; }

/* Weiterfuehrender Link unter dem Karten-Raster */
.cards-more{ margin:1.25rem 0 0; text-align:center; font-size:.95rem; }
.cards-more a{ color:var(--sky); font-weight:600; text-decoration:none; }
.cards-more a:hover{ text-decoration:underline; }

/* Ueberschrift ueber dem Beitrags-Raster */
.grid-title{ font-family:var(--sans); font-size:1.35rem; color:var(--ink); margin:0 0 1.25rem; }

/* Abgesetztes Anzeigen-Badge: klare Trennung Redaktion und Werbung
   Schriftgroesse bewusst nicht unter 13 px: das KG Berlin (23.07.2024,
   5 U 78/22) hat "Anzeige" in zu kleiner und zu blasser Schrift als
   unzureichende Kennzeichnung gewertet. Weiss auf --action ergibt
   4,53:1 und liegt damit ueber 4,5:1. */
.ad-badge{ display:inline-block; background:var(--action); color:#fff;
  border-radius:4px; padding:.15rem .45rem; font-size:.82rem; font-weight:700;
  letter-spacing:.03em; text-transform:uppercase; margin-right:.35rem; }

/* Autorenbox unter dem Artikel (E-E-A-T) */
.autorbox{ margin:2rem 0 0; padding:1.1rem 1.25rem; border-left:4px solid var(--sky);
  background:var(--air); border-radius:0 10px 10px 0; }
.autorbox-name{ margin:0 0 .35rem; font-family:var(--sans); font-weight:700; color:var(--ink); }
.autorbox p{ margin:0; font-size:.9rem; line-height:1.65; color:var(--muted); }

/* Artikelkarte ohne Bild (Cluster-Hubs) */
.artcard-plain{ border-left:4px solid var(--mist); }

/* Vorab-Hinweis in Rechtsartikeln */
.rechtsnote{ font-size:.88rem; line-height:1.6; color:var(--muted);
  border:1px dashed var(--line); border-radius:8px; padding:.75rem .9rem; margin:0 0 1.5rem; }
.rechtsnote strong{ color:var(--ink); }

/* ==========================================================================
   NACHTRAG ZIELGRUPPE / MOBIL
   ========================================================================== */

/* 1. Rechner-Ergebnis auf dem Handy VOR die Eingabefelder.
   Vorher stand die Zahl je nach Rechner 1425 bis 1843 px unter dem
   Seitenanfang - zwei Bildschirmhoehen Scrollen, bevor ueberhaupt ein
   Ergebnis zu sehen war, und beim Aendern eines Feldes sah man nicht,
   was passiert. Nur die visuelle Reihenfolge dreht sich; im Quelltext
   und fuer Screenreader bleibt sie wie sie ist, und im Ergebnisblock
   liegt nichts Fokussierbares. */
@media (max-width:860px){
  .calc .body{display:flex;flex-direction:column}
  .calc .readout,.calc .calc-out{order:-1;margin-top:0;margin-bottom:14px}
}

/* 2. Claim-Leiste auf dem Handy einzeilig halten. Auf 390 px brach sie
   auf zwei Zeilen um und kostete 40 px der ersten Bildschirmseite. Der
   Werbe-Hinweis bleibt stehen, das Stand-Datum steht ohnehin an jedem
   Artikel. */
@media (max-width:600px){
  .ribbon{font-size:.72rem}
  .ribbon .wrap{gap:.5rem;padding:.3rem .75rem;min-height:28px}
  .ribbon .wrap > span:nth-child(4),
  .ribbon .wrap > span:nth-child(5){display:none}
}

/* 3. Schaubilder auf schmalen Displays lesbar machen. Die Beschriftungen
   in den Diagrammen sind fuer 1200 px gezeichnet; auf 350 px werden sie
   unleserlich. Die Abbildung darf deshalb quer laufen und wird
   angeschoben, statt weiter geschrumpft zu werden. */
@media (max-width:600px){
  /* Nur fuer die gezeichneten Schaubilder. Fotos bleiben auf Breite
     skaliert - sie sind auch klein erkennbar und muessen nicht laufen. */
  figure.prose-media.schaubild{overflow-x:auto;-webkit-overflow-scrolling:touch}
  figure.prose-media.schaubild > img,
  figure.prose-media.schaubild > picture > img{min-width:520px}
  figure.prose-media.schaubild figcaption{position:sticky;left:0;width:calc(100vw - 40px)}
  /* Hinweis, dass die Abbildung seitlich laeuft. Rein visuell, der
     Bildinhalt steht im alt-Text. */
  figure.prose-media.schaubild figcaption::before{content:"\2194\00A0Seitlich schieben \00B7 ";
    font-weight:700;color:var(--accent-text)}
}

/* ==========================================================================
   DESKTOP-SPALTE FUER ARTIKELSEITEN
   Bis 1199 px aendert sich nichts: das Inhaltsverzeichnis bleibt
   ausgeblendet, der Artikel laeuft wie bisher einspaltig.
   Ab 1200 px bekommt die Seite ein eigenes Desktop-Layout. Grund: Bei
   1440 px lagen Brotkrumen, Ueberschrift, Anzeigenblock und FAQ an der
   linken Kante bei 170 px, der Fliesstext dagegen bei 340 px - drei
   verschiedene Kanten auf einer Seite, und links wie rechts je 190 px
   ungenutzte Flaeche. Jetzt steht alles in EINER Spalte von 760 px, und
   die freie Flaeche links traegt das Inhaltsverzeichnis.
   Die Lesebreite des Fliesstextes bleibt bei 760 px - sie wurde nicht
   verbreitert, 66 Zeichen je Zeile sind der gute Wert.
   ========================================================================== */

.toc{display:none}

@media (min-width:1200px){
  body.hat-toc main > section > .wrap{
    display:grid;
    grid-template-columns:264px minmax(0,760px);
    column-gap:56px;
    justify-content:center;
    align-items:start;
  }
  body.hat-toc main > section > .wrap > *{grid-column:2}
  body.hat-toc main > section > .wrap > .prose{margin:0;max-width:760px}
  /* Die Abschnittsueberschrift ist auf Artikelseiten das letzte Element
     der Kopfzeile; ihr Aussenabstand waere dort tote Flaeche. */
  body.hat-toc .sechead:last-child{margin-bottom:0}

  /* Spezifischer als die Regel oben, die alle Kinder in Spalte 2 setzt. */
  body.hat-toc main > section > .wrap > .toc{
    display:block;
    grid-column:1;
    position:sticky;
    top:86px;              /* Hoehe der klebenden Kopfzeile plus Luft */
    align-self:start;
    max-height:calc(100vh - 110px);
    overflow-y:auto;
    padding-right:8px;
    border-left:3px solid var(--line-strong);
    padding-left:16px;
  }
  .toc-titel{
    font-family:var(--sans);font-size:.72rem;font-weight:700;
    letter-spacing:.14em;text-transform:uppercase;
    color:var(--accent-text);margin:0 0 10px;
  }
  .toc ol{list-style:none;margin:0;padding:0}
  .toc li{margin:0 0 2px}
  .toc a{
    display:block;padding:6px 0;
    font-family:var(--sans);font-size:.92rem;line-height:1.35;
    color:var(--sky);text-decoration:none;
  }
  .toc a:hover,.toc a:focus-visible{text-decoration:underline}
  .toc a.ist-aktiv{color:var(--accent-text);font-weight:700}
}

/* Zwischen 1000 und 1199 px ist fuer die Verzeichnisspalte kein Platz,
   die Kantenverschiebung gab es dort aber genauso: Ueberschrift bei
   20 bis 50 px, Fliesstext bei 132 bis 220 px. Deshalb dort wenigstens
   eine gemeinsame, mittige Spalte. */
@media (min-width:1000px) and (max-width:1199px){
  body.hat-toc main > section > .wrap > *{
    max-width:760px;margin-left:auto;margin-right:auto;
  }
}