/* TV4ALL Ratgeber, gemeinsames Gerüst. Nicht je Seite abwandeln. */
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('fonts/open-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;}
@font-face{font-family:'Open Sans';font-style:normal;font-weight:400 800;font-display:swap;
  src:url('fonts/open-sans-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;}

:root{
  --orange:#F3480F; --pink:#EC0B71; --orange-hell:#FF6900;
  --verlauf:linear-gradient(135deg,#F3480F 0%,#EC0B71 100%);
  --tinte:#15162b; --tinte-weich:#4a4b63; --grau:#6f7086;
  --papier:#ffffff; --grund:#fbfbfd; --kante:#e8e8ef; --kante-zart:#f1f1f6;
  --satz:min(720px,100%); --weit:min(1060px,100%);
  --r:16px; --r-gross:24px;
  --schatten:0 1px 2px rgba(21,22,43,.04),0 8px 24px -12px rgba(21,22,43,.14);
  --schatten-hoch:0 2px 4px rgba(21,22,43,.04),0 24px 56px -20px rgba(21,22,43,.20);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:88px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--grund);color:var(--tinte);
  font-family:'Open Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  font-size:17px;line-height:1.72;font-weight:400;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--orange);text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--pink)}

/* ---------- Raster ---------- */
.bahn{width:100%;padding:0 20px}
.satz{max-width:var(--satz);margin-inline:auto}
.weit{max-width:var(--weit);margin-inline:auto}

/* ---------- Kopf ---------- */
.kopf{position:sticky;top:0;z-index:60;background:rgba(255,255,255,.88);
  backdrop-filter:saturate(160%) blur(14px);-webkit-backdrop-filter:saturate(160%) blur(14px);
  border-bottom:1px solid var(--kante-zart)}
.kopf-innen{max-width:var(--weit);margin-inline:auto;padding:12px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:16px}
.kopf img{height:36px;width:auto}
.kopf-knopf{display:inline-flex;align-items:center;gap:8px;background:var(--verlauf);color:#fff;
  font-weight:700;font-size:14.5px;padding:11px 20px;border-radius:999px;text-decoration:none;
  box-shadow:0 6px 18px -8px rgba(236,11,113,.75);transition:transform .18s ease,box-shadow .18s ease;white-space:nowrap}
.kopf-knopf:hover{color:#fff;transform:translateY(-1px);box-shadow:0 10px 26px -10px rgba(236,11,113,.85)}

/* ---------- Kopfbereich der Seite ---------- */
.hero{padding:52px 0 8px;position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:-180px 0 auto;height:420px;pointer-events:none;
  background:radial-gradient(60% 70% at 50% 0%,rgba(243,72,15,.10),rgba(236,11,113,.05) 45%,transparent 72%)}
.hero>*{position:relative}
.krumen{font-size:13.5px;color:var(--grau);margin:0 0 18px}
.krumen a{color:var(--grau);text-decoration:none}
.krumen a:hover{color:var(--orange)}
.marke-thema{display:inline-block;font-size:12.5px;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;background:var(--verlauf);-webkit-background-clip:text;background-clip:text;
  color:transparent;margin:0 0 14px}
h1{font-size:clamp(31px,5.2vw,46px);line-height:1.16;letter-spacing:-.022em;font-weight:800;margin:0 0 22px}
.stand{font-size:13.5px;color:var(--grau);margin:26px 0 0}

/* Antwortkasten direkt unter H1, 40 bis 60 Wörter */
.antwort{position:relative;background:var(--papier);border:1px solid var(--kante);
  border-radius:var(--r-gross);padding:26px 28px 26px 32px;box-shadow:var(--schatten);
  font-size:18.5px;line-height:1.66;color:var(--tinte)}
.antwort::before{content:"";position:absolute;left:0;top:18px;bottom:18px;width:4px;
  border-radius:99px;background:var(--verlauf)}
.antwort strong{font-weight:800}

/* ---------- Inhalt ---------- */
main{padding-bottom:20px}
.abschnitt{padding:30px 0}
h2{font-size:clamp(24px,3.4vw,32px);line-height:1.26;letter-spacing:-.018em;font-weight:800;
  margin:44px 0 16px;scroll-margin-top:92px}
h3{font-size:clamp(19px,2.4vw,22px);line-height:1.36;font-weight:700;margin:32px 0 10px}
h4{font-size:17.5px;font-weight:700;margin:24px 0 8px}
p{margin:0 0 18px}
ul,ol{margin:0 0 20px;padding-left:22px}
li{margin:0 0 9px}
li::marker{color:var(--orange)}
strong{font-weight:700;color:var(--tinte)}

/* ---------- Inhaltsverzeichnis ---------- */
.ivz{background:var(--papier);border:1px solid var(--kante);border-radius:var(--r-gross);
  padding:24px 26px;box-shadow:var(--schatten);margin:34px 0 8px}
.ivz p{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grau);margin:0 0 14px}
.ivz ol{list-style:none;margin:0;padding:0;counter-reset:ivz}
.ivz li{counter-increment:ivz;margin:0;border-top:1px solid var(--kante-zart)}
.ivz li:first-child{border-top:0}
.ivz a{display:flex;gap:12px;padding:10px 0;text-decoration:none;color:var(--tinte);
  font-size:16px;font-weight:600;transition:color .15s ease}
.ivz a::before{content:counter(ivz);font-size:12.5px;font-weight:800;color:var(--orange);
  min-width:20px;padding-top:4px}
.ivz a:hover{color:var(--orange)}

/* ---------- Tabelle ---------- */
.tabelle-rahmen{overflow-x:auto;margin:26px 0 30px;border:1px solid var(--kante);
  border-radius:var(--r-gross);background:var(--papier);box-shadow:var(--schatten);
  -webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:520px;font-size:15.5px}
caption{caption-side:bottom;padding:12px 20px 16px;font-size:13.5px;color:var(--grau);text-align:left;line-height:1.55}
thead th{background:#fdf4f2;color:var(--tinte);font-weight:800;font-size:13px;letter-spacing:.045em;
  text-transform:uppercase;text-align:left;padding:14px 20px;border-bottom:1px solid var(--kante)}
tbody td{padding:13px 20px;border-bottom:1px solid var(--kante-zart);vertical-align:top;line-height:1.55}
tbody tr:last-child td{border-bottom:0}
tbody tr:nth-child(even){background:#fcfcfe}
td.zahl,th.zahl{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}

/* ---------- Kästen ---------- */
.kasten{border-radius:var(--r-gross);padding:24px 26px;margin:28px 0;border:1px solid var(--kante);
  background:var(--papier);box-shadow:var(--schatten)}
.kasten>:last-child{margin-bottom:0}
.kasten .titel{display:flex;align-items:center;gap:9px;font-size:12.5px;font-weight:800;
  letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin:0 0 12px}
.kasten .titel::before{content:"";width:7px;height:7px;border-radius:99px;background:var(--verlauf);flex:0 0 auto}
.kasten.merk{background:linear-gradient(180deg,#fff9f7 0%,#ffffff 62%);border-color:#f8ddd4}
.kasten.achtung{background:linear-gradient(180deg,#fdf7fa 0%,#ffffff 62%);border-color:#f6d9e7}
.kasten.achtung .titel{color:var(--pink)}

/* ---------- Zahlenkacheln ---------- */
.kacheln{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(210px,100%),1fr));gap:14px;margin:28px 0 32px}
.kachel{background:var(--papier);border:1px solid var(--kante);border-radius:var(--r);
  padding:22px;box-shadow:var(--schatten)}
.kachel .wert{font-size:30px;font-weight:800;letter-spacing:-.02em;line-height:1.12;
  background:var(--verlauf);-webkit-background-clip:text;background-clip:text;color:transparent}
.kachel .was{font-size:14.5px;color:var(--tinte-weich);margin:8px 0 0;line-height:1.5}

/* ---------- Fallstudie ---------- */
.fall{background:var(--papier);border:1px solid var(--kante);border-radius:var(--r-gross);
  padding:28px;margin:26px 0;box-shadow:var(--schatten-hoch);position:relative;overflow:hidden}
.fall::after{content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--verlauf)}
.fall .wer{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--grau);margin:0 0 10px}
.fall blockquote{margin:0 0 16px;font-size:19.5px;line-height:1.56;font-weight:600;color:var(--tinte)}
.fall blockquote::before{content:"\201E"}
.fall blockquote::after{content:"\201C"}
.fall .name{font-size:14.5px;color:var(--tinte-weich);margin:0}
.fall .name b{color:var(--tinte)}

/* ---------- FAQ ---------- */
.faq{background:var(--papier);border:1px solid var(--kante);border-radius:var(--r-gross);
  overflow:hidden;box-shadow:var(--schatten);margin:26px 0 32px}
.faq details{border-top:1px solid var(--kante-zart)}
.faq details:first-child{border-top:0}
.faq summary{cursor:pointer;list-style:none;padding:19px 52px 19px 24px;font-weight:700;
  font-size:17px;line-height:1.48;position:relative;transition:color .15s ease}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--orange)}
.faq summary::after{content:"";position:absolute;right:24px;top:26px;width:9px;height:9px;
  border-right:2px solid var(--orange);border-bottom:2px solid var(--orange);
  transform:rotate(45deg);transition:transform .22s ease}
.faq details[open] summary::after{transform:rotate(-135deg);top:30px}
.faq .inhalt{padding:0 24px 22px;color:var(--tinte-weich)}
.faq .inhalt>:last-child{margin-bottom:0}

/* ---------- Handlungsaufruf ---------- */
.cta{background:var(--verlauf);border-radius:var(--r-gross);padding:40px 34px;margin:44px 0;
  color:#fff;text-align:center;box-shadow:0 22px 50px -24px rgba(236,11,113,.7);position:relative;overflow:hidden}
.cta::before{content:"";position:absolute;inset:auto -10% -60% auto;width:340px;height:340px;
  border-radius:99px;background:rgba(255,255,255,.10)}
.cta>*{position:relative}
.cta h2{color:#fff;margin:0 0 12px;font-size:clamp(22px,3.2vw,28px)}
.cta p{color:rgba(255,255,255,.93);margin:0 auto 24px;max-width:46ch;font-size:16.5px}
.cta-knopf{display:inline-block;background:#fff;color:var(--orange);font-weight:800;font-size:16.5px;
  padding:15px 34px;border-radius:999px;text-decoration:none;box-shadow:0 10px 26px -12px rgba(0,0,0,.45);
  transition:transform .18s ease}
.cta-knopf:hover{color:var(--pink);transform:translateY(-2px)}
.cta .klein{font-size:13.5px;color:rgba(255,255,255,.82);margin:16px 0 0}

/* ---------- Autor ---------- */
.autor{display:flex;gap:18px;align-items:flex-start;background:var(--papier);border:1px solid var(--kante);
  border-radius:var(--r-gross);padding:24px 26px;margin:40px 0 8px;box-shadow:var(--schatten)}
.autor .zeichen{flex:0 0 auto;width:52px;height:52px;border-radius:99px;background:var(--verlauf);
  display:flex;align-items:center;justify-content:center;color:#fff;font-weight:800;font-size:20px}
.autor .txt{min-width:0}
.autor .txt p{margin:0 0 6px;font-size:15.5px;color:var(--tinte-weich);line-height:1.62}
.autor .txt p:last-child{margin-bottom:0}
.autor .txt b{color:var(--tinte);font-size:16.5px}

/* ---------- Weiterlesen ---------- */
.weiter{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(260px,100%),1fr));gap:14px;margin:22px 0 8px}
.weiter a{display:block;background:var(--papier);border:1px solid var(--kante);border-radius:var(--r);
  padding:20px 22px;text-decoration:none;color:var(--tinte);box-shadow:var(--schatten);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.weiter a:hover{transform:translateY(-2px);border-color:#f0cfc4;box-shadow:var(--schatten-hoch);color:var(--tinte)}
.weiter .thema{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--orange);margin:0 0 7px}
.weiter .t{font-weight:700;font-size:16.5px;line-height:1.42;margin:0 0 6px}
.weiter .u{font-size:14px;color:var(--grau);margin:0;line-height:1.5}

/* ---------- Senderleiste ---------- */
.sender{background:var(--papier);border:1px solid var(--kante);border-radius:var(--r-gross);
  padding:24px 26px;margin:28px 0;box-shadow:var(--schatten);text-align:center}
.sender p{font-size:13.5px;color:var(--grau);margin:0 0 16px}
.sender img{margin:0 auto 10px;max-height:36px;width:auto;opacity:.92}

/* ---------- Fuß ---------- */
.fuss{border-top:1px solid var(--kante);background:var(--papier);margin-top:56px;padding:34px 0 40px}
.fuss-innen{max-width:var(--weit);margin-inline:auto;padding:0 20px;display:flex;flex-wrap:wrap;
  gap:14px 26px;align-items:center;justify-content:space-between}
.fuss p{margin:0;font-size:14px;color:var(--grau)}
.fuss nav{display:flex;flex-wrap:wrap;gap:8px 20px}
.fuss nav a{font-size:14px;color:var(--grau);text-decoration:none}
.fuss nav a:hover{color:var(--orange)}

/* ---------- Cookie-Streifen ---------- */
#cookie{position:fixed;left:0;right:0;bottom:0;z-index:9999;display:none;background:#fff;
  border-top:1px solid var(--kante);box-shadow:0 -8px 32px -16px rgba(21,22,43,.3);
  padding:16px 20px calc(16px + env(safe-area-inset-bottom,0px))}
#cookie .ck-innen{max-width:var(--weit);margin-inline:auto;display:flex;flex-wrap:wrap;
  gap:12px 20px;align-items:center;justify-content:space-between}
#cookie p{margin:0;font-size:14px;line-height:1.55;color:var(--tinte-weich);max-width:62ch}
#cookie .ck-knoepfe{display:flex;gap:10px;flex-wrap:wrap}
#cookie button{font:inherit;font-size:14.5px;font-weight:700;padding:11px 22px;border-radius:999px;
  cursor:pointer;border:1px solid var(--kante);background:#fff;color:var(--tinte-weich)}
#cookie button.ck-ja{background:var(--verlauf);color:#fff;border-color:transparent}
#cookie .ck-detail{width:100%;border-top:1px solid var(--kante-zart);margin-top:14px;padding-top:14px}
#cookie .ck-zeile{display:flex;gap:12px;align-items:flex-start;padding:9px 0;font-size:14px;color:var(--tinte-weich)}
#cookie .ck-zeile b{color:var(--tinte);display:block;font-size:14.5px}

@media(max-width:640px){
  body{font-size:16.5px}
  .antwort{padding:22px 22px 22px 26px;font-size:17.5px}
  .kasten,.fall,.ivz,.sender,.autor{padding:20px}
  .cta{padding:32px 22px}
  .autor{flex-direction:column;gap:14px}
  .hero{padding-top:36px}
}
@media print{.kopf,.cta,#cookie,.weiter{display:none}}