/* ==========================================================
   Tom erklärt Geld – Seitenlayout (Aufbau wie ein klassisches
   Finanzportal), Farben von Tom: Navy, Blau, Gelb, Rot, Creme.
   Schrift etwas größer als üblich – für Leser über 60.
   ========================================================== */
:root{
  --navy:#0e2240; --navy-2:#132c52; --navy-3:#091830;
  --blau:#1f5fbf; --blau-hell:#e8f0fc;
  --gelb:#ffc928; --gelb-hell:#fff6d6; --gelb-text:#ffd75e;
  --rot:#e3342f; --gruen:#1f9d63;
  --text:#101a33; --grau:#4a5368; --grau-hell:#6f7a92; --linie:#e6e8ef;
  --flaeche:#f7f6f2; --weiss:#fff;
  --schatten:0 15px 40px rgba(14,34,64,.08);
  --max:1180px; --fs:18px;
}
html.gross{--fs:21px} html.sehr-gross{--fs:24px}
*{box-sizing:border-box;margin:0;padding:0}
html{font-size:var(--fs);scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{font-family:"Segoe UI",Inter,system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;color:var(--text);background:var(--flaeche);line-height:1.6;overflow-x:hidden;overflow-wrap:break-word}
img{max-width:100%;display:block}
a{color:inherit}
:focus-visible{outline:3px solid var(--gelb);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
h1,h2,h3{font-weight:400;letter-spacing:-.035em;line-height:1.05}
.kicker{display:block;font-size:.78rem;font-weight:900;letter-spacing:.2em;text-transform:uppercase;color:var(--blau);margin-bottom:14px}
.dunkel .kicker{color:var(--gelb)}
.abschnitt-kopf{max-width:720px;margin-bottom:34px}
.abschnitt-kopf h2{font-size:clamp(2.1rem,6vw,3.2rem);color:var(--navy)}
.abschnitt-kopf p{color:var(--grau);margin-top:14px;font-size:1rem}
.dunkel .abschnitt-kopf h2{color:#fff}.dunkel .abschnitt-kopf p{color:#c5cde0}
section{padding:80px 0}

/* ---------- Kopf (dunkel) ---------- */
.kopf{position:sticky;top:0;z-index:60;background:rgba(9,24,48,.97);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.08)}
.kopf .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:14px}
.marke{display:flex;align-items:center;gap:12px;text-decoration:none;color:#fff;font-weight:900;font-size:1.05rem;letter-spacing:-.02em;white-space:nowrap}
.marke img{width:46px;height:46px;border-radius:50%;border:3px solid var(--gelb);background:#fff}
.marke span b{color:var(--gelb);font-weight:900}
.kopf-nav{display:flex;align-items:center;gap:4px}
.kopf-nav>a{color:#fff;text-decoration:none;font-size:.95rem;padding:10px 14px;border-radius:10px;white-space:nowrap}
.kopf-nav>a:hover{background:rgba(255,255,255,.08)}
.rund{width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;display:grid;place-items:center;cursor:pointer;font-size:1.05rem;flex:none}
.rund:hover{background:rgba(255,255,255,.08)}
.abo-mini{display:inline-flex;align-items:center;gap:8px;background:var(--rot);color:#fff;text-decoration:none;font-weight:700;font-size:.9rem;padding:11px 16px;border-radius:999px;white-space:nowrap}
.yt{width:20px;height:14px;background:#fff;border-radius:4px;position:relative;flex:none}
.yt:after{content:"";position:absolute;left:7.5px;top:3.5px;border-left:6px solid var(--rot);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
@media(max-width:980px){.kopf-nav>a{display:none}.abo-mini{display:none}}
@media(max-width:400px){.marke span{display:none}}
/* Menü (wie Dropdown-Liste) */
.menue{display:none;position:absolute;right:20px;top:80px;width:min(380px,calc(100vw - 40px));max-height:calc(100vh - 100px);overflow:auto;background:#121f3d;border-radius:18px;box-shadow:0 30px 60px rgba(0,0,0,.4);padding:14px 10px}
.menue.offen{display:block}
.menue b{display:block;color:#fff;font-size:.95rem;padding:12px 14px 6px}
.menue a{display:block;color:#d6deef;text-decoration:none;padding:10px 14px;border-radius:10px;font-size:.95rem}
.menue a:hover{background:rgba(255,255,255,.08);color:#fff}
.menue hr{border:0;border-top:1px solid rgba(255,255,255,.1);margin:8px 6px}
.menue .schrift{display:flex;align-items:center;gap:8px;padding:10px 14px;color:#d6deef;font-size:.9rem}
.menue .schrift button{min-width:42px;height:42px;border-radius:10px;border:1px solid rgba(255,255,255,.25);background:transparent;color:#fff;cursor:pointer;font-weight:800}
.menue .schrift button:nth-of-type(1){font-size:.8rem}.menue .schrift button:nth-of-type(2){font-size:1rem}.menue .schrift button:nth-of-type(3){font-size:1.25rem}
.menue .schrift button.an{background:var(--gelb);color:var(--navy);border-color:var(--gelb)}

/* ---------- Hero (Startseite) ---------- */
.hero{background:radial-gradient(900px 500px at 85% 20%,rgba(31,95,191,.35),transparent 60%),var(--navy-3);color:#fff;padding:70px 0 0;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.9fr);gap:40px;align-items:center}
@media(max-width:900px){.hero .wrap{grid-template-columns:minmax(0,1fr);text-align:center}}
.hero h1{font-size:clamp(2.6rem,9vw,4.2rem);color:#fff;letter-spacing:-.05em;line-height:.98}
.hero h1 em{font-style:normal;color:var(--gelb);font-weight:600}
.hero .unter{color:#c5cde0;font-size:1rem;margin:22px 0 28px;max-width:520px}
@media(max-width:900px){.hero .unter{margin-left:auto;margin-right:auto}}
.reiter-box{background:#fff;color:var(--text);border-radius:18px;padding:8px 8px 14px;max-width:520px;box-shadow:var(--schatten)}
@media(max-width:900px){.reiter-box{margin:0 auto}}
.reiter{display:flex;gap:4px;background:#eef0f5;border-radius:12px;padding:4px}
.reiter button{flex:1;border:0;background:transparent;padding:11px 8px;border-radius:9px;font:inherit;font-size:.9rem;font-weight:700;color:var(--grau);cursor:pointer}
.reiter button.an{background:#fff;color:var(--navy);box-shadow:0 2px 6px rgba(0,0,0,.08)}
.reiter-ziel{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 14px 4px;text-decoration:none;color:var(--text);font-size:.95rem;text-align:left}
.reiter-ziel span:last-child{font-size:1.6rem}
.direkt{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:22px;font-size:.8rem;color:#c5cde0}
@media(max-width:900px){.direkt{justify-content:center}}
.direkt a{color:#fff;text-decoration:none;border:1px solid rgba(255,255,255,.25);border-radius:999px;padding:7px 14px;font-size:.85rem}
.direkt a:hover{border-color:var(--gelb)}
.hero-bild{position:relative;align-self:end;padding-bottom:40px}
.hero-bild .rahmen{background:linear-gradient(160deg,#1a3566,#0b1a33);border-radius:28px 28px 0 0;padding:40px 30px 0;display:grid;place-items:center;min-height:360px}
.hero-bild img{width:min(300px,70vw);border-radius:50%;border:8px solid var(--gelb);background:#fff}
.plakette{position:absolute;background:#fff;color:var(--navy);border-radius:14px;padding:12px 16px;box-shadow:var(--schatten);text-align:left}
.plakette b{display:block;font-size:1.3rem;line-height:1.1}
.plakette small{font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--grau)}
.plakette.p1{top:30px;left:10px}.plakette.p2{bottom:70px;right:10px}

/* ---------- Einstiegskarten (Themen-Kacheln) ---------- */
.einstieg{padding:0 0 80px;margin-top:-1px;background:linear-gradient(var(--navy-3) 0 120px,transparent 120px)}
.einstieg .raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:900px){.einstieg .raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.einstieg .raster{grid-template-columns:minmax(0,1fr)}}
.karte{display:block;background:linear-gradient(145deg,#fff,#fbf6e6);border-radius:18px;padding:26px;text-decoration:none;color:var(--text);box-shadow:var(--schatten);transition:transform .2s}
.karte:nth-child(3n+2){background:linear-gradient(145deg,#fff,#eef3fc)}
.karte:nth-child(3n+3){background:linear-gradient(145deg,#fff,#fdf0ee)}
.karte:hover{transform:translateY(-4px)}
.symbol{width:48px;height:48px;border-radius:13px;background:var(--navy);color:var(--gelb);display:grid;place-items:center;font-weight:900;font-size:1.05rem}
.karte h3{font-size:1.45rem;margin:30px 0 10px;color:var(--navy)}
.karte p{color:var(--grau);font-size:.95rem;line-height:1.55}

/* ---------- Ratgeberwelten (nummerierte Karten) ---------- */
.welten{background:#fff}
.welten .raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:900px){.welten .raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.welten .raster{grid-template-columns:minmax(0,1fr)}}
.welt{position:relative;display:flex;flex-direction:column;background:#fff;border:1px solid var(--linie);border-radius:21px;padding:30px;text-decoration:none;color:var(--text);box-shadow:0 12px 35px rgba(14,34,64,.045)}
.welt:hover{border-color:var(--blau)}
.welt .nr{position:absolute;top:28px;right:28px;font-size:.75rem;font-weight:800;color:var(--grau-hell)}
.welt h3{font-size:1.8rem;margin:40px 0 12px;color:var(--navy)}
.welt p{color:var(--grau);font-size:.85rem;line-height:1.7;flex:1}
.pille{align-self:flex-start;margin-top:26px;background:var(--gelb-hell);color:var(--navy);font-size:.8rem;font-weight:800;padding:8px 14px;border-radius:999px}

/* ---------- Rechnerwelten (dunkle Liste) ---------- */
.rechnerwelt{background:var(--navy-3);color:#fff}
.zeile-dunkel{display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:18px;align-items:center;padding:26px 4px;border-bottom:1px solid rgba(255,255,255,.1);text-decoration:none;color:#fff}
.zeile-dunkel:hover h3{color:var(--gelb)}
.zeile-dunkel .symbol{background:#1b2e52}
.zeile-dunkel h3{font-size:1.35rem}
.zeile-dunkel p{color:#8f9bb5;font-size:.8rem;margin-top:6px}
.zeile-dunkel .pfeil{font-size:1.5rem;color:#fff}
.rechner-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 40px}
@media(max-width:800px){.rechner-raster{grid-template-columns:minmax(0,1fr)}}

/* ---------- Inhalte (Geschichten & Videos) ---------- */
.magazin{background:#f2f0ea}
.magazin .raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:900px){.magazin .raster{grid-template-columns:minmax(0,1fr)}}
.beitrag{display:flex;flex-direction:column;background:#fff;border-radius:21px;overflow:hidden;text-decoration:none;color:var(--text);box-shadow:var(--schatten)}
.beitrag .bild{aspect-ratio:16/10;background:var(--navy);position:relative;overflow:hidden}
.beitrag .bild img{width:100%;height:100%;object-fit:cover}
.beitrag .bild .gross-symbol{position:absolute;inset:0;display:grid;place-items:center;font-size:3.5rem}
.beitrag .text{padding:22px 24px 26px}
.beitrag small{font-size:.74rem;font-weight:900;letter-spacing:.18em;color:var(--blau);text-transform:uppercase}
.beitrag h3{font-size:1.25rem;margin:10px 0 8px;color:var(--navy);letter-spacing:-.02em;line-height:1.2}
.beitrag p{color:var(--grau);font-size:.93rem}
.link-pfeil{color:var(--blau);font-weight:700;text-decoration:none;font-size:.95rem}

/* ---------- Mission ---------- */
.mission{background:linear-gradient(145deg,#0b1a33,#132c52);color:#fff}
.mission .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:center}
@media(max-width:800px){.mission .wrap{grid-template-columns:minmax(0,1fr)}}
.mission h2{font-size:clamp(2.4rem,7vw,3.6rem);color:#fff}
.mission p{color:#c5cde0;margin-top:18px}
.zahlen-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.zahlen-raster div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:22px}
.zahlen-raster b{display:block;font-size:2rem;font-weight:700;color:var(--gelb)}
.zahlen-raster span{font-size:.74rem;font-weight:800;letter-spacing:.14em;color:#c5cde0;text-transform:uppercase}

/* ---------- Fuß ---------- */
.fuss{background:#071426;color:#c8d1e3;padding:60px 0 30px}
.abo-zeile{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;border-bottom:1px solid rgba(255,255,255,.1);padding-bottom:40px;margin-bottom:40px}
.abo-zeile h3{color:#fff;font-size:1.6rem}
.abo-zeile p{color:#c5cde0;margin-top:8px;font-size:.95rem}
.fuss .spalten{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:30px}
@media(max-width:800px){.fuss .spalten{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media(max-width:520px){.fuss .spalten{grid-template-columns:minmax(0,1fr)}}
.fuss h4{color:#fff;font-size:.95rem;margin-bottom:12px;font-weight:700}
.fuss ul{list-style:none;display:grid;gap:9px;font-size:.92rem}
.fuss a{color:#c8d1e3;text-decoration:none}.fuss a:hover{color:var(--gelb)}
.fuss .klein{border-top:1px solid rgba(255,255,255,.1);margin-top:36px;padding-top:20px;font-size:.78rem;color:#8f9bb5;line-height:1.6}

/* ---------- Detailkopf (Themenwelt, Artikel, Rechner) ---------- */
.detail-kopf{background:var(--navy-3);color:#fff;padding:40px 0 60px}
.detail-kopf .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center}
@media(max-width:900px){.detail-kopf .wrap{grid-template-columns:minmax(0,1fr)}}
.zurueck,.krumen{font-size:.82rem;color:#c5cde0}
.zurueck a,.krumen a{color:#c5cde0;text-decoration:none}.zurueck a:hover,.krumen a:hover{color:#fff}
.detail-kopf .kicker{margin:26px 0 12px}
.detail-kopf h1{font-size:clamp(2.4rem,8vw,3.6rem);color:#fff}
.detail-kopf .unter{color:#c5cde0;margin-top:18px;font-size:1rem;max-width:620px}
.detail-meta{display:flex;flex-wrap:wrap;gap:8px 26px;margin-top:28px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);font-size:.8rem;color:#c5cde0}
.detail-bild{background:linear-gradient(160deg,#1a3566,#0b1a33);border-radius:24px;min-height:260px;display:grid;place-items:center;position:relative;overflow:hidden}
.detail-bild img{width:180px;height:180px;border-radius:50%;border:6px solid var(--gelb);background:#fff}
.detail-bild .marker{position:absolute;left:18px;bottom:18px;width:64px;height:64px;border-radius:16px;background:var(--gelb);color:var(--navy);display:grid;place-items:center;font-size:1.6rem;font-weight:900}

/* ---------- Themenwelt: nummerierte Themenkarten ---------- */
.abschnitt-nr{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.abschnitt-nr span{font-size:.8rem;font-weight:900;color:var(--blau)}
.abschnitt-nr small{font-size:.74rem;font-weight:900;letter-spacing:.2em;color:var(--grau);text-transform:uppercase}
.themen-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
@media(max-width:900px){.themen-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.themen-raster{grid-template-columns:minmax(0,1fr)}}
.thema-karte{display:flex;flex-direction:column;background:#fff;border-radius:18px;padding:26px;text-decoration:none;color:var(--text);box-shadow:var(--schatten);border-bottom:3px solid var(--gelb);min-height:100%}
.thema-karte:hover{transform:translateY(-3px)}
.thema-karte .nr{font-size:.75rem;color:var(--grau-hell);font-weight:700}
.thema-karte h3{font-size:1.3rem;margin:28px 0 10px;color:var(--navy);letter-spacing:-.02em;line-height:1.2}
.thema-karte p{color:var(--grau);font-size:.85rem;flex:1}
.thema-karte .weiter{margin-top:18px;font-size:.85rem;font-weight:700;color:var(--blau)}
.thema-karte.offen-noch{border-bottom-color:var(--linie)}
.thema-karte.offen-noch .weiter{color:var(--grau-hell)}

/* ---------- Check (dunkler Kasten) ---------- */
.check-kasten{background:linear-gradient(145deg,#0b1a33,#152f57);color:#fff;border-radius:21px;padding:34px 28px}
.check-kasten h2{font-size:clamp(2rem,6vw,2.8rem);color:#fff}
.check-kasten>p{color:#c5cde0;margin:12px 0 18px;font-size:.92rem}
.check-punkt{display:flex;gap:16px;align-items:center;padding:16px 0;border-bottom:1px solid rgba(255,255,255,.1);font-size:.95rem;cursor:pointer}
.check-punkt:last-child{border-bottom:0}
.check-punkt i{width:32px;height:32px;border-radius:50%;background:var(--gelb);color:var(--navy);display:grid;place-items:center;font-style:normal;font-weight:900;flex:none;font-size:.9rem}
.check-punkt input{width:26px;height:26px;accent-color:var(--gelb);flex:none;cursor:pointer}

/* ---------- Artikel ---------- */
.artikel-raster{display:grid;grid-template-columns:300px minmax(0,1fr);gap:50px;align-items:start;padding:50px 20px 20px}
@media(max-width:980px){.artikel-raster{grid-template-columns:minmax(0,1fr);gap:24px}}
.toc{background:#fff;border-radius:18px;padding:24px;position:sticky;top:96px;box-shadow:var(--schatten)}
@media(max-width:980px){.toc{position:static}}
.toc small{font-size:.74rem;font-weight:900;letter-spacing:.2em;color:var(--grau);text-transform:uppercase}
.toc ol{list-style:none;margin-top:12px}
.toc a{display:flex;gap:18px;padding:13px 0;border-bottom:1px solid var(--linie);text-decoration:none;color:var(--grau);font-size:.92rem}
.toc a span{color:var(--blau);font-weight:800;min-width:22px}
.toc a:hover{color:var(--navy)}
.kurzgesagt{background:linear-gradient(145deg,#fff6d6,#ffefb8);border-radius:21px;padding:30px}
.kurzgesagt small{font-size:.74rem;font-weight:900;letter-spacing:.2em;color:#8a6400;text-transform:uppercase}
.kurzgesagt p{font-size:1.45rem;font-weight:700;color:var(--navy);line-height:1.3;margin-top:12px;letter-spacing:-.02em}
.teil{padding-top:70px;scroll-margin-top:80px}
.teil>.nr{font-size:.8rem;font-weight:900;color:var(--blau)}
.teil>h2{font-size:clamp(2rem,6vw,2.7rem);color:var(--navy);margin:12px 0 22px}
.lesetext p{font-family:Georgia,"Times New Roman",serif;font-size:1.12rem;line-height:1.85;color:#222b3f;margin:0 0 18px;max-width:68ch}
.lesetext ul,.lesetext ol{font-family:Georgia,"Times New Roman",serif;font-size:1.08rem;line-height:1.8;margin:0 0 18px 24px}
.lesetext li{margin:6px 0}
.lesetext strong{color:var(--navy)}
.lesetext a{color:var(--blau)}
.fragen{background:#fff;border-radius:18px;box-shadow:var(--schatten);overflow:hidden}
.fragen details{border-bottom:1px solid var(--linie)}
.fragen details:last-child{border-bottom:0}
.fragen summary{list-style:none;cursor:pointer;padding:22px 26px;font-size:1rem;display:flex;justify-content:space-between;gap:14px;color:var(--navy)}
.fragen summary::-webkit-details-marker{display:none}
.fragen summary:after{content:"+";color:var(--blau);font-size:1.3rem;line-height:1}
.fragen details[open] summary:after{content:"–"}
.fragen details p{padding:0 26px 22px;color:var(--grau);font-size:.95rem;line-height:1.7}
.schritte{list-style:none}
.schritte li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:20px;padding:26px 0;border-bottom:1px solid var(--linie)}
.schritte .n{width:52px;height:52px;border-radius:13px;background:var(--navy);color:var(--gelb);display:grid;place-items:center;font-weight:800;font-size:1.05rem}
.schritte h3{font-size:1.1rem;font-weight:800;letter-spacing:-.01em;color:var(--navy);line-height:1.3}
.schritte p{color:var(--grau);font-size:.95rem;margin-top:8px;line-height:1.65}
.fehler li{display:grid;grid-template-columns:52px minmax(0,1fr);gap:20px;padding:22px 0;border-bottom:1px solid var(--linie);list-style:none}
.fehler .n{width:52px;height:52px;border-radius:13px;background:#fdecea;color:var(--rot);display:grid;place-items:center;font-weight:900;font-size:1.2rem}
.fehler h3{font-size:1.05rem;font-weight:800;letter-spacing:-.01em;color:var(--navy);line-height:1.3}
.fehler p{color:var(--grau);font-size:.92rem;margin-top:6px;line-height:1.6}
.tabelle{width:100%;border-collapse:collapse;background:#fff;border-radius:16px;overflow:hidden;box-shadow:var(--schatten);font-size:.92rem;margin:4px 0 20px}
.tabelle th,.tabelle td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--linie)}
.tabelle th{background:var(--navy);color:#fff;font-weight:700;font-size:.82rem}
@media(max-width:600px){.tabelle{display:block;overflow-x:auto}}
.hinweis-kasten{border-radius:18px;padding:22px 24px;margin:6px 0 22px;font-size:.95rem;line-height:1.65}
.hinweis-kasten b{display:block;color:var(--navy);margin-bottom:4px}
.hinweis-kasten.blau{background:var(--blau-hell)}
.hinweis-kasten.gruen{background:#e5f5ec}
.hinweis-kasten.gelb{background:var(--gelb-hell)}
.hinweis-kasten a{color:var(--blau);font-weight:700}
.geschichte{display:grid;grid-template-columns:64px minmax(0,1fr);gap:18px;background:#fff;border-radius:18px;padding:24px;text-decoration:none;color:var(--text);box-shadow:var(--schatten)}
.geschichte .av{width:64px;height:64px;border-radius:50%;background:#fde6e4;display:grid;place-items:center;font-size:1.8rem}
.geschichte q{display:block;font-family:Georgia,serif;font-size:1.05rem;color:var(--navy);margin:6px 0 10px}
.video-einbettung{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#000;cursor:pointer;margin-top:18px}
.video-einbettung img{width:100%;height:100%;object-fit:cover;opacity:.82}
.video-einbettung .play{position:absolute;inset:0;display:grid;place-items:center}
.video-einbettung .play i{width:80px;height:56px;border-radius:14px;background:var(--rot);position:relative}
.video-einbettung .play i:after{content:"";position:absolute;left:31px;top:16px;border-left:21px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.video-einbettung .hinweis{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;background:linear-gradient(transparent,rgba(0,0,0,.9));color:#fff;font-size:.72rem;line-height:1.4}
.video-einbettung .hinweis a{color:#fff}
.video-einbettung iframe{width:100%;height:100%;border:0}
.passend{padding:80px 0;background:#eef0f4}
.passend .raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:900px){.passend .raster{grid-template-columns:minmax(0,1fr)}}
.passend-karte{background:#fff;border-radius:21px;padding:30px;text-decoration:none;color:var(--text);box-shadow:var(--schatten);display:block}
.passend-karte h3{font-size:1.5rem;margin:28px 0 14px;color:var(--navy);letter-spacing:-.02em;line-height:1.15}
.hinweis-zeile{padding:30px 0;font-size:.8rem;color:var(--grau);line-height:1.6}

/* ---------- Rechner ---------- */
.rechner-kasten{background:#fff;border-radius:21px;padding:28px;box-shadow:var(--schatten)}
.rechner-kasten .kopfzeile small{font-size:.74rem;font-weight:900;letter-spacing:.2em;color:var(--blau);text-transform:uppercase}
.rechner-kasten h2{font-size:1.8rem;color:var(--navy);margin:8px 0 6px}
.rechner-kasten .leise{color:var(--grau);font-size:.88rem}
.feld{margin:16px 0}
.feld label{display:block;font-size:.85rem;font-weight:700;color:var(--navy);margin-bottom:6px}
.eingabe{display:flex;align-items:center;border:1.5px solid #d4d9e4;border-radius:12px;background:#fff;overflow:hidden}
.eingabe:focus-within{border-color:var(--blau)}
.eingabe input,.eingabe select{flex:1;min-width:0;border:0;outline:0;padding:14px 16px;font:inherit;font-size:1.05rem;font-weight:700;color:var(--navy);background:transparent}
.eingabe em{font-style:normal;padding:0 16px;color:var(--grau);font-weight:700}
.feld small{display:block;color:var(--grau);font-size:.78rem;margin-top:6px}
.schulden-zeile{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr)) 50px;gap:8px;align-items:end;margin:6px 0}
.schulden-zeile .feld{margin:0}.schulden-zeile label{font-size:.72rem}
.weg{width:50px;height:54px;border-radius:12px;border:1.5px solid #d4d9e4;background:#fff;cursor:pointer;color:var(--grau);font-size:1.1rem}
@media(max-width:700px){
  .schulden-zeile{grid-template-columns:repeat(3,minmax(0,1fr));padding:14px 0;border-bottom:1px dashed var(--linie)}
  .schulden-zeile .feld:first-child{grid-column:1/3}
  .schulden-zeile .weg{grid-column:3;grid-row:1;justify-self:end;align-self:end}
  .schulden-zeile .eingabe input{padding:12px 10px;font-size:1rem}
}
.knopf-hell{display:inline-flex;align-items:center;gap:8px;border:1.5px solid #d4d9e4;background:#fff;border-radius:999px;padding:11px 18px;font:inherit;font-size:.9rem;font-weight:700;color:var(--navy);cursor:pointer}
.so-gerechnet{background:#f4f6fa;border-radius:14px;padding:16px 18px;font-size:.82rem;color:var(--grau);margin-top:16px}
.so-gerechnet b{color:var(--navy);display:block;margin-bottom:4px}
.mehr-einstellungen{margin-top:12px}.mehr-einstellungen summary{cursor:pointer;font-weight:700;color:var(--blau);padding:8px 0}
.antwort{background:var(--navy);color:#fff;border-radius:18px;padding:24px;margin-top:20px}
.antwort .satz{font-size:1.5rem;font-weight:700;letter-spacing:-.02em;line-height:1.25;color:var(--gelb)}
.antwort p{color:#c9d3e6;margin-top:10px;font-size:.92rem;line-height:1.6}
.antwort b{color:#fff}
.zahlen{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-top:14px}
.zahlen div{background:#f4f6fa;border-radius:14px;padding:16px}
.zahlen small{display:block;font-size:.72rem;font-weight:700;color:var(--grau)}
.zahlen b{font-size:1.25rem;color:var(--navy)}
.balken{height:12px;background:#eceef4;border-radius:999px;overflow:hidden;margin-top:6px}
.balken i{display:block;height:100%;border-radius:999px}
.grafik svg{width:100%;height:auto;display:block}

/* ---------- Übersichtslisten (wie Ratgeber-/Rechner-Übersicht) ---------- */
.welt-block{padding:60px 0;border-bottom:1px solid var(--linie)}
.welt-block:last-child{border-bottom:0}
.welt-block .kopfzeile{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:40px}
@media(max-width:900px){.welt-block .kopfzeile{grid-template-columns:minmax(0,1fr);gap:20px}}
.welt-block h2{font-size:clamp(2.2rem,7vw,3rem);color:var(--navy);margin:20px 0 14px}
.welt-block .beschr{color:var(--grau);font-size:1rem;line-height:1.65}
.welt-block .uebersicht{display:inline-block;margin-top:16px;color:var(--blau);font-weight:700;text-decoration:none}
.zeilen{list-style:none;display:grid;gap:12px;grid-template-columns:minmax(0,1fr)}
.zeilen>li{min-width:0}
.zeilen small{flex:none}
.zeilen a,.zeilen span.offen-noch{display:flex;justify-content:space-between;align-items:center;gap:16px;background:#fff;border-radius:16px;padding:22px 26px;text-decoration:none;color:var(--text);font-size:1rem;box-shadow:0 4px 18px rgba(14,34,64,.05)}
.zeilen a:hover{box-shadow:0 8px 24px rgba(14,34,64,.1)}
.zeilen a,.zeilen span.offen-noch,.thema-karte h3,.karte h3,.welt h3,h1,h2{hyphens:auto;-webkit-hyphens:auto;min-width:0}
.zeilen a>span,.zeilen span.offen-noch>span{min-width:0}
.zeilen a i{font-style:normal;color:var(--blau);font-size:1.2rem}
.zeilen span.offen-noch{color:var(--grau-hell);flex-wrap:wrap;row-gap:8px}
.zeilen span.offen-noch small{font-size:.7rem;font-weight:800;background:#f1f2f6;color:var(--grau);padding:4px 10px;border-radius:999px}
.seiten-hero{background:var(--navy-3);color:#fff;padding:60px 0 70px}
.seiten-hero h1{font-size:clamp(2.4rem,8vw,3.8rem);color:#fff;max-width:760px}
.seiten-hero p{color:#c5cde0;margin-top:18px;max-width:620px}

/* ---------- Suche (Overlay) ---------- */
.suche-overlay{position:fixed;inset:0;background:rgba(7,20,38,.7);z-index:200;display:none;align-items:flex-start;justify-content:center;padding:10vh 16px}
.suche-overlay.offen{display:flex}
.suche-box{background:#fff;border-radius:20px;width:100%;max-width:640px;box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:hidden}
.suche-box input{width:100%;border:0;outline:0;padding:22px 24px;font:inherit;font-size:1.1rem;border-bottom:1px solid var(--linie)}
.suche-ergebnisse{max-height:55vh;overflow:auto;padding:8px}
.suche-ergebnisse a{display:flex;gap:12px;align-items:center;padding:13px 14px;border-radius:12px;text-decoration:none;color:var(--text)}
.suche-ergebnisse a:hover{background:#f4f6fa}
.suche-ergebnisse .typ{font-size:.74rem;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:var(--blau);background:var(--blau-hell);padding:4px 8px;border-radius:6px;min-width:84px;text-align:center;flex:none}
.suche-leer{padding:24px;color:var(--grau);text-align:center}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(120px);background:var(--navy);color:#fff;padding:12px 20px;border-radius:12px;z-index:300;transition:transform .3s}
.toast.zeigen{transform:translateX(-50%) translateY(0)}

@media print{.kopf,.fuss,.toc,.menue{display:none!important}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* ==========================================================
   Erweiterungen für die fertigen Seiten (Generator)
   ========================================================== */
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sprung:focus{position:fixed!important;left:12px;top:12px;width:auto;height:auto;clip:auto;z-index:100;background:var(--gelb);color:var(--navy);padding:12px 18px;border-radius:12px;font-weight:800}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible,textarea:focus-visible{outline:3px solid var(--gelb);outline-offset:3px}
section.ohne-oben{padding-top:0}
.abo-mini.gross{font-size:1rem;padding:15px 22px}
.abo-mini.blau{background:var(--blau)}
.abo-mini .yt{width:22px;height:16px;border-radius:5px;background:#fff;position:relative;flex:none}
.abo-mini .yt:after{content:"";position:absolute;left:8px;top:4px;border-left:7px solid var(--rot);border-top:4px solid transparent;border-bottom:4px solid transparent}
.abo-mini.blau .yt:after{border-left-color:var(--blau)}

/* Startseite: Suche, Sofort-Hilfe, Werkzeuge */
.hero-suche{display:flex;gap:8px;max-width:520px;margin-top:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:6px}
@media(max-width:900px){.hero-suche{margin-left:auto;margin-right:auto}}
.hero-suche input{flex:1;min-width:0;border:0;background:transparent;color:#fff;font:inherit;font-size:1rem;padding:10px 12px}
.hero-suche input::placeholder{color:#c5cde0}
.hero-suche input:focus{outline:none}
.hero-suche button{border:0;background:var(--gelb);color:var(--navy);font:inherit;font-weight:800;border-radius:10px;padding:0 18px;cursor:pointer}
.seiten-hero .hero-suche{margin-top:26px}
.karte-mehr{display:inline-block;margin-top:16px;font-weight:800;color:var(--blau);font-size:.9rem}
.sofort{background:#fff;padding:60px 0}
.sofort-raster{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
@media(max-width:1000px){.sofort-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.sofort-raster{grid-template-columns:minmax(0,1fr)}}
.sofort-raster.gross{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:700px){.sofort-raster.gross{grid-template-columns:minmax(0,1fr)}}
.sofort-karte{display:flex;align-items:center;gap:16px;background:#fff5f4;border:1.5px solid #f6d3d1;border-radius:16px;padding:18px;text-decoration:none;color:var(--text);min-width:0}
.sofort-karte:hover{border-color:var(--rot)}
.sofort-karte>span:nth-child(2){min-width:0;flex:1}
.sofort-karte b{display:block;color:var(--navy);font-size:1rem;line-height:1.25;hyphens:auto}
.sofort-karte small{display:block;color:var(--grau);font-size:.85rem;margin-top:4px;line-height:1.45}
.sofort-karte i{font-style:normal;color:var(--rot);font-size:1.2rem}
.sofort-ic{flex:none;width:46px;height:46px;border-radius:12px;background:var(--rot);color:#fff;display:grid;place-items:center;font-size:1.3rem}
.werkzeug-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:900px){.werkzeug-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.werkzeug-raster{grid-template-columns:minmax(0,1fr)}}
.werkzeug{display:block;background:#fff;border-radius:18px;padding:26px;text-decoration:none;color:var(--text);box-shadow:var(--schatten)}
a.werkzeug{transition:transform .2s}
a.werkzeug:hover{transform:translateY(-3px)}
.werkzeug h3{font-size:1.3rem;color:var(--navy);margin:20px 0 8px}
.werkzeug p{color:var(--grau);font-size:.95rem}
.werkzeug .symbol{font-size:.95rem}

/* Detailköpfe mit Video-Vorschaubild */
.detail-bild:has(.foto){aspect-ratio:16/10;min-height:0}
.detail-bild img.foto{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:0;object-fit:cover;background:var(--navy)}
.detail-bild img.rund-bild{width:180px;height:180px}
@media(max-width:900px){.detail-bild{min-height:0}.detail-bild:not(:has(.foto)){display:none}.detail-bild .marker{width:48px;height:48px;font-size:1.2rem;left:12px;bottom:12px}}
.detail-kopf .person{color:#fff}
.vorlesen-knopf{margin-top:22px;display:inline-flex;align-items:center;gap:8px;background:var(--gelb);color:var(--navy);border:0;border-radius:999px;padding:12px 20px;font:inherit;font-weight:800;font-size:.95rem;cursor:pointer}
.vorlesen-knopf.an{background:#fff}
@media(max-width:900px){.hero-bild .rahmen{min-height:0;padding:26px 20px 0}.hero-bild img{width:min(200px,48vw);border-width:6px}.hero-bild{padding-bottom:20px}}
@media(max-width:560px){.plakette{padding:8px 12px}.plakette b{font-size:1.05rem}.plakette.p1{top:10px;left:0}.plakette.p2{bottom:30px;right:0}}

/* Artikel-Bausteine */
.toc-abo{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:18px;background:var(--rot);color:#fff;text-decoration:none;font-weight:800;border-radius:12px;padding:12px;font-size:.92rem}
.toc-abo .yt{width:20px;height:14px;border-radius:4px;background:#fff;position:relative}
.toc-abo .yt:after{content:"";position:absolute;left:7px;top:3.5px;border-left:7px solid var(--rot);border-top:3.5px solid transparent;border-bottom:3.5px solid transparent}
.hinweis-kasten.rot{background:#fdeceb}
.hinweis-kasten ul{margin:6px 0 0 20px}
.lesetext h3{font-size:1.3rem;color:var(--navy);margin:26px 0 10px}
.rechne-selbst{display:grid;gap:12px;margin:30px 0 0}
.rechne-selbst a{display:flex;align-items:center;gap:18px;background:var(--navy);color:#fff;border-radius:18px;padding:20px 22px;text-decoration:none}
.rechne-selbst a>span:nth-child(2){flex:1;min-width:0}
.rechne-selbst .symbol{background:var(--gelb);color:var(--navy);flex:none}
.rechne-selbst small{display:block;font-size:.74rem;font-weight:900;letter-spacing:.16em;text-transform:uppercase;color:var(--gelb)}
.rechne-selbst b{display:block;font-size:1.15rem;margin:4px 0 2px}
.rechne-selbst span span{color:#c5cde0;font-size:.9rem}
.rechne-selbst i{font-style:normal;font-size:1.4rem;color:var(--gelb)}
.quellen{margin-top:50px;border-top:2px solid var(--linie);padding-top:24px;font-size:.92rem;color:var(--grau)}
.quellen b{color:var(--navy);font-size:1rem}
.quellen ul{margin:10px 0 12px 20px}
.quellen li{margin:4px 0}
.quellen a{color:var(--blau)}
.abo-band{display:flex;align-items:center;gap:22px;background:linear-gradient(135deg,var(--navy),#1a3566);color:#fff;border-radius:22px;padding:28px;margin:50px 0 10px}
.abo-band img{width:76px;height:76px;border-radius:50%;border:4px solid var(--gelb);background:#fff;flex:none}
.abo-band>div{flex:1;min-width:0}
.abo-band h3{color:#fff;font-size:1.35rem}
.abo-band p{color:#c5cde0;font-size:.95rem;margin-top:4px}
@media(max-width:700px){.abo-band{flex-direction:column;text-align:center}}
.abo-band .abo-mini,.fuss .abo-mini,.mission .abo-mini,.seiten-hero .abo-mini,.brief-kasten .abo-mini{display:inline-flex}
.anker{scroll-margin-top:90px}

/* Fachwörter zum Antippen */
button.wort{all:unset;cursor:help;border-bottom:2px dotted var(--blau);color:inherit}
button.wort:focus-visible{outline:3px solid var(--gelb)}
.wort-info{position:absolute;z-index:60;max-width:min(360px,calc(100vw - 30px));background:var(--navy);color:#fff;border-radius:14px;padding:16px 36px 16px 18px;box-shadow:0 20px 40px rgba(0,0,0,.3);font-family:"Segoe UI",system-ui,sans-serif;font-size:.92rem;line-height:1.55}
.wort-info b{display:block;color:var(--gelb);margin-bottom:6px;font-size:1rem}
.wort-info a{color:#fff;font-weight:700;display:inline-block;margin-top:8px}
.wort-info button{position:absolute;right:8px;top:6px;background:none;border:0;color:#c5cde0;font-size:1.2rem;cursor:pointer}

/* Geschichten */
.schmal-artikel{max-width:820px;padding-top:50px;padding-bottom:60px}
.zitat-gross{font-family:Georgia,serif;font-size:clamp(1.5rem,4.5vw,2rem);line-height:1.35;color:var(--navy);border-left:6px solid var(--gelb);padding:4px 0 4px 24px;margin:0 0 34px}
.lehre{background:var(--gelb-hell);border-radius:20px;padding:28px;margin:34px 0}
.lehre ul{margin:6px 0 0 22px}
.lehre li{margin:8px 0;font-size:1.02rem}
h2.zwischen{font-size:clamp(1.7rem,5vw,2.2rem);color:var(--navy);margin:44px 0 18px}
.magazin-raster{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
@media(max-width:900px){.magazin-raster{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:600px){.magazin-raster{grid-template-columns:minmax(0,1fr)}}
.magazin-raster>div{display:flex}.magazin-raster>div>.beitrag{flex:1}
.beitrag .dauer{position:absolute;right:10px;bottom:10px;background:rgba(0,0,0,.75);color:#fff;font-size:.8rem;font-weight:700;padding:3px 8px;border-radius:6px}
.brief-kasten{display:flex;gap:24px;background:#fff;border-radius:22px;padding:34px;box-shadow:var(--schatten);align-items:flex-start}
.brief-kasten .symbol{flex:none}
.brief-kasten h2{color:var(--navy);font-size:1.7rem}
.brief-kasten p{color:var(--grau);margin:10px 0 20px}
@media(max-width:600px){.brief-kasten{flex-direction:column}}

/* Videos-Filter */
.filter-leiste{display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;align-items:center;margin-bottom:28px}
.filter{display:flex;flex-wrap:wrap;gap:8px}
.filter button{border:1.5px solid #d4d9e4;background:#fff;border-radius:999px;padding:9px 16px;font:inherit;font-size:.9rem;font-weight:700;color:var(--navy);cursor:pointer}
.filter button.an{background:var(--navy);color:#fff;border-color:var(--navy)}
.filter-suche input{border:1.5px solid #d4d9e4;border-radius:999px;padding:11px 18px;font:inherit;font-size:.95rem;width:min(300px,100%)}
.leer{color:var(--grau);text-align:center;padding:40px 0}

/* Sofort-Hilfe */
.rot-akzent{background:linear-gradient(160deg,#3a0f14,#091830 70%)}
.rot-akzent .kicker{color:#ff9d99}
.sofort-jetzt{background:#fff5f4;border:2px solid var(--rot);border-radius:22px;padding:28px}
.sofort-jetzt .kicker{color:var(--rot)}
.sofort-jetzt ol{margin-left:22px}
.sofort-jetzt li{margin:12px 0;font-size:1.08rem;line-height:1.6}
.nummern{display:grid;gap:10px;margin:26px 0}
.nummern>b{color:var(--navy);font-size:1.1rem}
.nummern a{display:flex;justify-content:space-between;align-items:center;gap:14px;background:var(--navy);color:#fff;text-decoration:none;border-radius:16px;padding:16px 20px}
.nummern a small{display:block;color:#c5cde0;font-size:.82rem}
.nummern a b{font-size:1.35rem;color:var(--gelb);white-space:nowrap}

/* Musterbriefe */
.brief-raster{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:30px;padding-top:40px;padding-bottom:20px;align-items:start}
@media(max-width:900px){.brief-raster{grid-template-columns:minmax(0,1fr)}}
.brief-raster textarea{width:100%;border:0;font:inherit;resize:vertical;background:transparent}
.brief-raster .feld input::placeholder,.brief-raster textarea::placeholder{color:#8a93a8}
.leise{color:var(--grau);font-size:.9rem;margin:6px 0 16px}
.brief-vorschau-box{position:sticky;top:96px}
@media(max-width:900px){.brief-vorschau-box{position:static}}
.brief-knoepfe{display:flex;gap:10px;margin-bottom:12px;flex-wrap:wrap}
.brief-vorschau{white-space:pre-wrap;word-break:break-word;background:#fff;border-radius:6px;box-shadow:0 10px 30px rgba(14,34,64,.12);padding:40px 38px;font-family:Georgia,serif;font-size:.98rem;line-height:1.6;color:#111;min-height:400px;margin:0}
@media(max-width:600px){.brief-vorschau{padding:24px 20px}}
@media print{body.brief-druck *{visibility:hidden}body.brief-druck .brief-vorschau,body.brief-druck .brief-vorschau *{visibility:visible}body.brief-druck .brief-vorschau{position:absolute;left:0;top:0;box-shadow:none;padding:0;width:100%}}

/* Fristen */
.fristen{max-width:900px}
.monat h2{font-size:1.8rem;color:var(--navy);margin:40px 0 14px;padding-bottom:8px;border-bottom:2px solid var(--linie)}
.monat:first-child h2{margin-top:0}
.frist{display:grid;grid-template-columns:72px minmax(0,1fr) auto;gap:18px;align-items:start;background:#fff;border-radius:18px;padding:20px;box-shadow:0 4px 16px rgba(14,34,64,.05);margin-bottom:12px}
.frist .datum{background:var(--navy);color:var(--gelb);border-radius:14px;text-align:center;font-weight:900;font-size:1.5rem;padding:8px 0;line-height:1.1}
.frist .datum small{display:block;color:#fff;font-size:.74rem;letter-spacing:.1em;text-transform:uppercase}
.frist h3{color:var(--navy);font-size:1.15rem;margin-bottom:6px}
.frist p{color:var(--grau);font-size:.95rem;margin-bottom:6px}
.knopf-hell.klein{padding:8px 14px;font-size:.85rem}
@media(max-width:640px){.frist{grid-template-columns:60px minmax(0,1fr)}.frist button{grid-column:2;justify-self:start}}

/* Neuerungen */
.neu-liste{list-style:none;display:grid;gap:12px}
.neu-liste li{background:#fff;border-radius:16px;padding:20px 22px;box-shadow:0 4px 16px rgba(14,34,64,.05);border-left:5px solid var(--gelb)}
.neu-liste b{color:var(--navy);font-size:1.08rem}
.neu-liste p{color:var(--grau);margin:6px 0}

/* Lexikon */
.abc{display:flex;flex-wrap:wrap;gap:6px;margin-top:26px}
.abc a,.abc span{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;font-weight:800;text-decoration:none}
.abc a{background:rgba(255,255,255,.12);color:#fff}.abc a:hover{background:var(--gelb);color:var(--navy)}
.abc span{color:rgba(255,255,255,.3)}
.buchstabe{font-size:2.6rem;color:var(--blau);margin:40px 0 14px;scroll-margin-top:90px}
.lexikon-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media(max-width:700px){.lexikon-raster{grid-template-columns:minmax(0,1fr)}}
.begriff{background:#fff;border-radius:16px;padding:22px;box-shadow:0 4px 16px rgba(14,34,64,.05);scroll-margin-top:90px}
.begriff:target{outline:3px solid var(--gelb)}
.begriff h3{color:var(--navy);font-size:1.15rem;margin-bottom:6px;hyphens:auto}
.begriff p{color:var(--grau);font-size:.95rem}
.begriff .beispiel{background:var(--gelb-hell);border-radius:10px;padding:10px 12px;margin-top:10px;color:var(--text)}

/* Checklisten & Lernpfad */
.checklisten-raster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
@media(max-width:800px){.checklisten-raster{grid-template-columns:minmax(0,1fr)}}
.check-karte{background:#fff;border-radius:20px;padding:28px;box-shadow:var(--schatten);scroll-margin-top:90px}
.check-karte h2{color:var(--navy);font-size:1.45rem;margin:16px 0 6px}
.check-karte>p{color:var(--grau);font-size:.92rem;margin-bottom:12px}
.check-zeile{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-bottom:1px solid var(--linie);cursor:pointer;font-size:.98rem}
.check-zeile input,.pfad-kopf input{width:22px;height:22px;flex:none;margin-top:2px;accent-color:var(--gruen)}
.check-zeile input:checked+span{text-decoration:line-through;color:var(--grau-hell)}
.check-karte .knopf-hell{margin-top:16px}
.pfad-schritt{background:#fff;border-radius:20px;padding:24px;box-shadow:0 4px 16px rgba(14,34,64,.05);margin-bottom:14px}
.pfad-kopf{display:flex;gap:14px;align-items:flex-start;cursor:pointer}
.pfad-kopf .n{flex:none;width:40px;height:40px;border-radius:50%;background:var(--navy);color:var(--gelb);display:grid;place-items:center;font-weight:900}
.pfad-kopf b{display:block;color:var(--navy);font-size:1.15rem}
.pfad-kopf small{display:block;color:var(--grau);font-size:.92rem;margin-top:2px}
.pfad-schritt ul{margin:14px 0 0 76px;color:var(--text)}
.pfad-schritt li{margin:4px 0}
.pfad-links{display:flex;flex-wrap:wrap;gap:8px 16px;margin:12px 0 0 76px}
.pfad-links a{color:var(--blau);font-weight:700;text-decoration:none;font-size:.92rem}
@media(max-width:600px){.pfad-schritt ul,.pfad-links{margin-left:0}}
.pfad-schritt:has(.pfad-kopf input:checked){opacity:.7}

/* Über, Recht */
.ueber-kopf{display:flex;gap:28px;align-items:center;background:#fff;border-radius:22px;padding:30px;box-shadow:var(--schatten);margin-bottom:24px}
.ueber-kopf img{width:130px;height:130px;border-radius:50%;border:5px solid var(--gelb);flex:none}
@media(max-width:640px){.ueber-kopf{flex-direction:column;text-align:center}}
.gross-text{font-size:1.15rem;margin-bottom:12px}
.werkzeug-raster.drei{margin:10px 0 30px}
.recht h2{font-size:1.6rem;color:var(--navy);margin:34px 0 10px}
.recht h3{font-size:1.15rem;color:var(--navy);margin:22px 0 6px}
.recht p,.recht li{margin-bottom:10px;line-height:1.7}
.recht ul{margin-left:22px}
.recht a{color:var(--blau)}
.recht .lead{font-size:1.1rem;background:var(--blau-hell);border-radius:16px;padding:20px 22px}
.recht .hinweis{color:var(--grau);font-size:.9rem;margin-top:30px}

@media(max-width:480px){.abo-mini.gross{white-space:normal;text-align:center;justify-content:center;max-width:100%}.nummern a{flex-wrap:wrap}.nummern a b{font-size:1.2rem}}
.seiten-hero .krumen{margin-bottom:22px}
/* Lange deutsche Wörter sauber umbrechen (wichtig bei großer Schrift) */
main{hyphens:auto;-webkit-hyphens:auto;overflow-wrap:break-word}
td,th,.check-zeile span,.sofort-jetzt li,.nummern span,.rechne-selbst b,.rechne-selbst span{overflow-wrap:anywhere;min-width:0}
button.wort{white-space:normal;overflow-wrap:anywhere;hyphens:auto}
.lesetext strong,.lesetext b{overflow-wrap:anywhere}
@media(max-width:480px){.rechne-selbst a{gap:12px;padding:16px}.rechne-selbst .symbol{display:none}.tabelle td,.tabelle th{padding:10px 8px}}
.check-punkt span{overflow-wrap:anywhere;min-width:0}
/* Teilen-Leiste */
.teilen-leiste{display:flex;flex-wrap:wrap;gap:14px 20px;align-items:center;justify-content:space-between;background:#fff;border:1.5px solid var(--linie);border-radius:18px;padding:18px 22px;margin:40px 0 0}
.teilen-leiste>span{color:var(--grau);font-size:.95rem;min-width:0}
.teilen-leiste>span b{display:block;color:var(--navy);font-size:1.05rem}
.teilen-leiste>div{display:flex;flex-wrap:wrap;gap:8px}
.teil-knopf{display:inline-flex;align-items:center;border:1.5px solid #d4d9e4;background:#fff;color:var(--navy);border-radius:999px;padding:10px 16px;font:inherit;font-size:.9rem;font-weight:700;text-decoration:none;cursor:pointer}
.teil-knopf.wa{background:#1f9d63;border-color:#1f9d63;color:#fff}
@media print{.teilen-leiste,.abo-band,.rechne-selbst,.vorlesen-knopf,.passend{display:none!important}}
/* Schlichter Video-Hinweis */
.video-hinweis{display:flex;align-items:center;gap:16px;background:#fff;border:1.5px solid var(--linie);border-radius:16px;padding:16px 20px;margin:40px 0 0;text-decoration:none;color:var(--text)}
.video-hinweis:hover{border-color:var(--rot)}
.video-hinweis .yt-ic{flex:none;width:44px;height:32px;border-radius:9px;background:var(--rot);position:relative}
.video-hinweis .yt-ic:after{content:"";position:absolute;left:17px;top:9px;border-left:12px solid #fff;border-top:7px solid transparent;border-bottom:7px solid transparent}
.video-hinweis .vh-text{flex:1;min-width:0}
.video-hinweis small{display:block;color:var(--grau);font-size:.85rem}
.video-hinweis b{display:block;color:var(--navy);font-size:1.02rem;line-height:1.35;overflow-wrap:anywhere}
.video-hinweis .vh-pfeil{flex:none;color:var(--rot);font-weight:800;font-size:.95rem}
@media(max-width:520px){.video-hinweis{flex-wrap:wrap}.video-hinweis .vh-pfeil{width:100%;padding-left:60px}}