@font-face{font-family:"Source Sans 3";src:url("fonts/sourcesans3-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("fonts/sourcesans3-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Source Sans 3";src:url("fonts/sourcesans3-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --gold:#C8A227; --gold-dunkel:#8C6F15; --nacht:#1C2430;
  --text:#3A3A3A; --titel:#1F1F1F; --grau:#6B6B6B;
  --flaeche:#FFFFFF; --grund:#F4F4F2; --linie:#E3E0D6;
  --breite:1180px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:"Source Sans 3",-apple-system,"Segoe UI",Arial,sans-serif;
  color:var(--text);background:var(--flaeche);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
.wrap{max-width:var(--breite);margin:0 auto;padding:0 22px}
h1,h2,h3{color:var(--titel);line-height:1.18;margin:0 0 .5em;font-weight:700;letter-spacing:-.4px}
h1{font-size:clamp(2rem,5.2vw,3.3rem)}
h2{font-size:clamp(1.5rem,3.2vw,2.1rem)}
h3{font-size:1.18rem;font-weight:600}
p{margin:0 0 1.1em}
a{color:var(--gold-dunkel)}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,summary:focus-visible{
  outline:3px solid var(--gold);outline-offset:3px;border-radius:2px}
.kicker{font-size:.86rem;letter-spacing:1.4px;text-transform:uppercase;color:var(--grau);font-weight:600;margin-bottom:.9em}
.skip{position:absolute;left:-9999px}
.skip:focus{left:14px;top:14px;z-index:99;background:#fff;padding:10px 16px;border:2px solid var(--gold)}

/* Kopf */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.97);border-bottom:1px solid var(--linie)}
.kopf{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:14px 0}
.marke{font-size:1.32rem;font-weight:700;color:var(--nacht);text-decoration:none;letter-spacing:-.6px}
.marke span{color:var(--gold)}
nav.haupt{display:flex;gap:26px;align-items:center}
nav.haupt a{color:var(--text);text-decoration:none;font-weight:600;font-size:.98rem}
nav.haupt a:hover{color:var(--gold-dunkel)}
.btn{display:inline-block;background:var(--gold);color:#fff;text-decoration:none;font-weight:600;
  padding:12px 22px;border-radius:4px;border:2px solid var(--gold);cursor:pointer;font-size:1rem;font-family:inherit}
.btn:hover{background:var(--gold-dunkel);border-color:var(--gold-dunkel)}
.btn.hell{background:transparent;color:var(--gold-dunkel)}
.btn.hell:hover{background:var(--gold);color:#fff}
.menue{display:none}
.menue summary{list-style:none;cursor:pointer;width:42px;height:42px;display:flex;flex-direction:column;
  justify-content:center;gap:5px;padding:0 8px;border:1px solid var(--linie);border-radius:4px}
.menue summary::-webkit-details-marker{display:none}
.menue summary span{display:block;height:2px;background:var(--nacht);border-radius:2px}
.menue[open] nav{position:absolute;left:0;right:0;top:100%;background:#fff;border-bottom:1px solid var(--linie);
  padding:10px 22px 18px;box-shadow:0 8px 20px rgba(0,0,0,.08)}
.menue nav a{display:block;padding:11px 0;color:var(--text);text-decoration:none;font-weight:600;
  border-bottom:1px solid var(--grund)}
@media(max-width:900px){
  nav.haupt{display:none}
  .menue{display:block}
  /* Im Kopf kein zweiter Button — unten steht die feste Leiste. */
  .kopf > .btn{display:none}
}

/* Hero */
.hero{position:relative;background:var(--grund);overflow:hidden}
.hero-raster{display:grid;grid-template-columns:1.05fr .95fr;gap:50px;align-items:center;padding:68px 0 76px}
.hero h1{margin-bottom:.45em}
.hero .unter{font-size:1.16rem;color:#4a4a4a;max-width:34em;margin-bottom:1.9em}
.weiche{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px}
.karte{display:block;background:#fff;border:2px solid var(--linie);border-left:5px solid var(--gold);
  border-radius:5px;padding:19px 20px;text-decoration:none;color:var(--titel);transition:border-color .15s,transform .15s}
.karte:hover{border-color:var(--gold);transform:translateY(-2px)}
.karte strong{display:block;font-size:1.06rem;font-weight:700;margin-bottom:4px;line-height:1.3}
.karte span{display:block;font-size:.93rem;color:var(--grau);font-weight:400;line-height:1.45}
.hero .fein{font-size:.92rem;color:var(--grau);margin:0}
.hero .fein a{color:var(--grau)}

/* Bildflaeche rechts — hier haengt spaeter das Video ein */
.szene{position:relative;background:var(--nacht);min-height:460px;
  clip-path:polygon(0 5%,100% 0,100% 95%,0 100%);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.szene img{width:100%;height:100%;min-height:460px;object-fit:cover;object-position:72% 26%;display:block}
@media(max-width:900px){
  .hero-raster{grid-template-columns:1fr;gap:22px;padding:22px 0 40px}
  .szene{min-height:178px;order:-1;clip-path:polygon(0 0,100% 0,100% 93%,0 100%)}
  .szene img{min-height:178px;object-position:72% 22%}
  .weiche{grid-template-columns:1fr;gap:11px}
  .hero h1{font-size:1.72rem}
  .hero .unter{font-size:1.02rem;margin-bottom:1.3em}
  .kicker{font-size:.76rem;margin-bottom:.6em}
  .karte{padding:15px 17px}
}

/* Vertrauensleiste */
.vertrauen{background:var(--nacht);color:#D8D5CB;font-size:.93rem}
.vertrauen .wrap{display:flex;flex-wrap:wrap;gap:10px 26px;padding-top:15px;padding-bottom:15px;align-items:center}
.vertrauen b{color:#fff;font-weight:600}
.vertrauen .reg{font-variant-numeric:tabular-nums;color:#A9A396}

/* Abschnitte */
section{padding:76px 0}
section.grau{background:var(--grund)}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:center}
@media(max-width:860px){.zwei{grid-template-columns:1fr;gap:28px}section{padding:52px 0}}
.vorstellung img{width:100%;max-height:520px;object-fit:cover;object-position:center 18%;border-radius:6px;display:block}

.gruppen{display:grid;grid-template-columns:1fr 1fr;gap:26px;margin-top:34px}
.gruppe{background:#fff;border:1px solid var(--linie);border-top:4px solid var(--gold);border-radius:6px;padding:28px 26px}
.gruppe ul{margin:0 0 20px;padding-left:19px}
.gruppe li{margin-bottom:7px}
@media(max-width:860px){.gruppen{grid-template-columns:1fr}}

.schritte{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:34px;counter-reset:s}
.schritt{counter-increment:s;position:relative;padding-top:54px}
.schritt::before{content:counter(s);position:absolute;top:0;left:0;width:40px;height:40px;border-radius:50%;
  background:var(--gold);color:#fff;font-weight:700;display:flex;align-items:center;justify-content:center;font-size:1.1rem}
@media(max-width:860px){.schritte{grid-template-columns:1fr;gap:22px}}

.platzhalter{background:#fff;border:2px dashed var(--linie);border-radius:6px;padding:30px 28px;text-align:center}
.platzhalter .marker{display:inline-block;background:#FBF3DC;color:var(--gold-dunkel);font-weight:600;
  font-size:.84rem;padding:4px 11px;border-radius:3px;margin-bottom:12px;letter-spacing:.4px}

details{border-bottom:1px solid var(--linie);padding:16px 0}
summary{font-weight:600;color:var(--titel);cursor:pointer;font-size:1.05rem;list-style:none;position:relative;padding-right:30px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:4px;top:-2px;color:var(--gold);font-size:1.5rem;font-weight:400}
details[open] summary::after{content:"–"}
details p{margin:12px 0 2px;color:#4a4a4a}

/* Formular */
.formular{background:#fff;border:1px solid var(--linie);border-radius:6px;padding:32px 30px;max-width:660px}
.feld{margin-bottom:17px}
label{display:block;font-weight:600;color:var(--titel);margin-bottom:5px;font-size:.96rem}
input,select,textarea{width:100%;padding:11px 13px;border:1px solid #CFCCC2;border-radius:4px;
  font-family:inherit;font-size:1rem;color:var(--text);background:#fff}
input:hover,select:hover,textarea:hover{border-color:var(--gold)}
.paar{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:620px){.paar{grid-template-columns:1fr}.formular{padding:24px 20px}}
.honig{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.hinweis{font-size:.88rem;color:var(--grau);line-height:1.5}
.newsletter{background:var(--grund);border:1px solid var(--linie);border-radius:6px;padding:24px 26px;max-width:660px;margin-top:40px}
.einwilligung{display:flex;gap:11px;align-items:flex-start;margin:16px 0}
.einwilligung input{width:19px;height:19px;flex:0 0 19px;margin-top:3px}
.einwilligung label{font-weight:400;font-size:.93rem;color:#4a4a4a;margin:0}

/* Fuss */
footer{background:var(--nacht);color:#B9B5A9;padding:52px 0 26px;font-size:.94rem}
footer h3{color:#fff;font-size:1rem;margin-bottom:12px}
.fuss-raster{display:grid;grid-template-columns:1.6fr 1fr 1fr;gap:38px;margin-bottom:34px}
@media(max-width:860px){.fuss-raster{grid-template-columns:1fr;gap:26px}}
footer a{color:#D8D5CB;text-decoration:none;display:block;margin-bottom:7px}
footer a:hover{color:var(--gold)}
.sozial{display:flex;gap:16px;flex-wrap:wrap}
.sozial a{margin:0}
.fuss-unten{border-top:1px solid #2E3744;padding-top:20px;font-size:.86rem;color:#8A867C;line-height:1.6}

/* mobile Dauerleiste */
.mobil-cta{display:none}
@media(max-width:900px){
  .mobil-cta{display:block;position:fixed;bottom:0;left:0;right:0;z-index:60;
    background:rgba(255,255,255,.98);border-top:1px solid var(--linie);padding:11px 16px}
  .mobil-cta .btn{display:block;text-align:center}
  body{padding-bottom:74px}
}

/* ---------- ergaenzt 19.10.2026: Unterseiten, Rechner, Test ---------- */
.wrap.schmal{max-width:780px}
.wrap.mitte{text-align:center}
.kopfbereich{background:var(--grund);padding:52px 0 44px}
.kopfbereich h1{font-size:clamp(1.8rem,4.2vw,2.7rem)}
.vorspann{font-size:1.12rem;color:#4a4a4a;max-width:40em}
.wrap.mitte .vorspann{margin-left:auto;margin-right:auto}
.fliess h2{margin-top:2em}
.fliess h2:first-child{margin-top:0}
.recht{font-size:.97rem}
.recht h2{font-size:1.3rem}
.recht h3{font-size:1.05rem;margin-top:1.6em}
.knopfreihe{display:flex;gap:12px;flex-wrap:wrap;align-items:center;margin:1.6em 0 0}
.knopfreihe.mitte{justify-content:center}
.btn.gross{padding:15px 30px;font-size:1.06rem}
.opt{font-weight:400;color:var(--grau);font-size:.92em}
ul.haken{list-style:none;padding:0;margin:1em 0}
ul.haken li{position:relative;padding-left:28px;margin-bottom:11px}
ul.haken li::before{content:"";position:absolute;left:0;top:.52em;width:13px;height:8px;
  border-left:3px solid var(--gold);border-bottom:3px solid var(--gold);transform:rotate(-45deg)}
.warnbox{background:#FBF3DC;border-left:4px solid var(--gold);padding:14px 18px;
  border-radius:4px;font-size:.95rem;color:#5a4a1d;margin:1.4em 0}
.warnung{background:#FBF3DC;border-left:4px solid var(--gold);padding:10px 14px;
  border-radius:4px;font-size:.9rem;color:#5a4a1d;margin:14px 0 0}
.marker{display:inline-block;background:#FBF3DC;color:var(--gold-dunkel);font-weight:600;
  font-size:.84rem;padding:4px 11px;border-radius:3px;margin-bottom:12px;letter-spacing:.4px}
.videoflaeche{background:var(--nacht);border-radius:6px;padding:54px 30px;text-align:center;color:#C9C5B9}
.videoflaeche .hinweis{color:#A9A396;max-width:30em;margin:0 auto}

fieldset{border:0;padding:0;margin:0 0 18px}
legend{font-weight:600;color:var(--titel);margin-bottom:8px;font-size:.96rem;padding:0}
.wahl{display:grid;gap:8px}
.wahl.reihe{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.wahl label{display:flex;align-items:center;gap:9px;font-weight:400;font-size:.98rem;
  border:1px solid #CFCCC2;border-radius:4px;padding:11px 14px;cursor:pointer;margin:0;color:var(--text)}
.wahl label:hover{border-color:var(--gold);background:#FDFCF8}
.wahl input[type=radio]{width:18px;height:18px;flex:0 0 18px;margin:0;accent-color:var(--gold)}
.wahl label.eigen{flex-wrap:wrap}
.wahl label.eigen input[type=number]{width:72px;padding:5px 7px;margin-left:4px}
.rueckmeldung{margin-top:14px;font-size:.96rem;line-height:1.5}
.rueckmeldung.gut{background:#EAF4EC;border-left:4px solid #4C8B5B;padding:12px 15px;border-radius:4px;color:#2C5536}
.rueckmeldung.test{background:#FBF3DC;border-left:4px solid var(--gold);padding:12px 15px;border-radius:4px;color:#5a4a1d}
.rueckmeldung.schlecht{background:#F9EDEC;border-left:4px solid #B5483C;padding:12px 15px;border-radius:4px;color:#7A2C24}

/* Rechner */
.rechner-raster{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:start;margin-bottom:46px}
@media(max-width:860px){.rechner-raster{grid-template-columns:1fr;gap:24px}}
.regler{display:flex;align-items:center;gap:14px}
.regler input[type=range]{flex:1;accent-color:var(--gold);height:26px}
.regler .zahl{display:flex;align-items:center;gap:5px;font-weight:600;color:var(--titel);white-space:nowrap}
.regler .zahl input{width:92px;text-align:right;padding:8px 10px}
.ergebnis{background:var(--nacht);color:#E6E3D9;border-radius:6px;padding:30px 28px;position:sticky;top:92px}
.ergebnis .kicker{color:#A9A396;margin-bottom:.4em}
.ergebnis .gross{font-size:clamp(2rem,5vw,2.9rem);font-weight:700;color:#fff;margin:0 0 20px;
  letter-spacing:-1px;font-variant-numeric:tabular-nums}
.aufstellung{width:100%;border-collapse:collapse;font-size:.97rem}
.aufstellung td{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.12)}
.aufstellung td:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.ergebnis .aufstellung td{color:#C9C5B9}
.ergebnis .aufstellung td:last-child{color:#fff}
.aufstellung tr.summe td{border-bottom:0;padding-top:12px;font-size:1.05rem}
.ergebnis .aufstellung tr.summe td{color:var(--gold)}
.recht .aufstellung td{color:var(--text);font-variant-numeric:normal}
.balken{display:flex;height:11px;border-radius:6px;overflow:hidden;margin:20px 0 10px;background:rgba(255,255,255,.1)}
.b-ein{background:#6E7684}.b-ertrag{background:var(--gold)}
.legende{font-size:.85rem;color:#A9A396;display:flex;gap:18px;align-items:center;margin:0}
.legende span{display:inline-block;width:11px;height:11px;border-radius:2px;margin-right:5px}
.p-ein{background:#6E7684}.p-ertrag{background:var(--gold)}
.ergebnis .hinweis{color:#A9A396;margin-top:16px;border-top:1px solid rgba(255,255,255,.12);padding-top:14px}
.annahmen{background:var(--grund);border-radius:6px;padding:28px 26px;margin-bottom:34px}
.annahmen h2{font-size:1.25rem;margin-top:0}
.annahmen ul{padding-left:19px;margin:0 0 4px}
.annahmen li{margin-bottom:9px}
.selbsttest{background:#1C2430;color:#C9F0CF;padding:16px;border-radius:5px;font-size:.82rem;
  overflow-x:auto;white-space:pre-wrap;margin-top:18px}

/* Persoenlichkeitstest */
.teststart{text-align:center;padding:36px 0}
.fortschritt{margin-bottom:28px}
.balken-aussen{height:7px;background:var(--linie);border-radius:4px;overflow:hidden}
.balken-innen{height:100%;background:var(--gold);width:0;transition:width .25s}
.fortschritt-text{font-size:.88rem;color:var(--grau);margin:8px 0 0;text-align:right}
.frage{background:var(--grund);border-radius:6px;padding:34px 30px;margin-bottom:18px}
.frage-text{font-size:1.25rem;color:var(--titel);font-weight:600;line-height:1.4;margin-bottom:26px;min-height:2.6em}
.skala{display:grid;gap:9px}
.skala button{background:#fff;border:1px solid #CFCCC2;border-radius:4px;padding:13px 16px;
  font-family:inherit;font-size:1rem;color:var(--text);cursor:pointer;text-align:left}
.skala button:hover{border-color:var(--gold);background:#FDFCF8}
.skala button.gewaehlt{border-color:var(--gold);background:#FBF3DC;font-weight:600}
@media(min-width:620px){.skala{grid-template-columns:repeat(5,1fr)}
  .skala button{text-align:center;font-size:.88rem;padding:14px 8px}}
.farbbalken{margin:24px 0 34px}
.farbzeile{display:grid;grid-template-columns:120px 1fr 62px;gap:14px;align-items:center;margin-bottom:11px}
.fname{font-weight:600;color:var(--titel);font-size:.97rem}
.fbalken{background:var(--grund);height:16px;border-radius:8px;overflow:hidden}
.fbalken span{display:block;height:100%;border-radius:8px}
.fwert{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;color:var(--titel)}
@media(max-width:560px){.farbzeile{grid-template-columns:100px 1fr 54px;gap:9px}.fname{font-size:.88rem}}
.deutungsblock{border-left:4px solid var(--gold);background:var(--grund);border-radius:0 5px 5px 0;
  padding:20px 24px;margin-bottom:18px}
.deutungsblock h3{margin-top:0}
.nl-form .paar{gap:12px}
@media(max-width:620px){.nl-form .paar{grid-template-columns:1fr}}

/* Brotkrume — Pfad statt nackter URL, auch fuer Google */
.krume{border-bottom:1px solid var(--linie);background:var(--flaeche)}
.krume .wrap{padding-top:11px;padding-bottom:11px;font-size:.88rem;color:var(--grau)}
.krume a{color:var(--grau);text-decoration:none}
.krume a:hover{color:var(--gold-dunkel);text-decoration:underline}
.krume span[aria-current]{color:var(--titel);font-weight:600}

/* Regional — wo gearbeitet wird */
.orte{display:flex;flex-wrap:wrap;gap:9px;margin:0 0 18px;padding:0;list-style:none}
.orte li{background:var(--grund);border:1px solid var(--linie);border-radius:999px;
  padding:6px 14px;font-size:.92rem;color:var(--text)}
.ort-raster{display:grid;grid-template-columns:1.1fr .9fr;gap:44px;align-items:start}
@media(max-width:820px){.ort-raster{grid-template-columns:1fr;gap:28px}}

/* Fakten — kurze, zitierbare Angaben fuer Mensch und Antwortmaschine */
.fakten{border:1px solid var(--linie);border-radius:6px;overflow:hidden;margin:26px 0 0;
  width:100%;border-collapse:collapse;font-size:.97rem}
.fakten th,.fakten td{text-align:left;padding:11px 16px;border-bottom:1px solid var(--linie);vertical-align:top}
.fakten th{width:38%;color:var(--grau);font-weight:600;background:var(--grund)}
.fakten tr:last-child th,.fakten tr:last-child td{border-bottom:0}

/* Wissen — Antwortliste */
.antworten{margin:0;padding:0;list-style:none}
.antworten > li{border-top:1px solid var(--linie);padding:26px 0}
.antworten > li:last-child{border-bottom:1px solid var(--linie)}
.antworten h3{margin-bottom:.45em;font-size:1.26rem;font-weight:700}
.antworten .kurz{font-weight:600;color:var(--titel)}
.themenliste{display:grid;grid-template-columns:repeat(auto-fit,minmax(252px,1fr));gap:18px;margin-top:26px}
.themenliste a{display:block;background:var(--flaeche);border:1px solid var(--linie);border-radius:6px;
  padding:20px 22px;text-decoration:none;color:var(--text)}
.themenliste a:hover{border-color:var(--gold);box-shadow:0 6px 18px rgba(0,0,0,.06)}
.themenliste strong{display:block;color:var(--titel);font-size:1.08rem;margin-bottom:6px}
.themenliste span{font-size:.94rem;color:var(--grau)}

/* Vertrauen direkt am Absenden-Knopf */
.beweis{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 16px;padding:14px 16px;
  background:var(--grund);border-radius:6px;font-size:.92rem;color:var(--text)}
.beweis span{display:flex;align-items:center;gap:7px}
.beweis span::before{content:"✓";color:var(--gold-dunkel);font-weight:700}

/* Zusatzfeld, erst auf Klick — kuerzeres Formular wirkt kuerzer */
.mehr-feld summary{cursor:pointer;font-weight:600;color:var(--gold-dunkel);font-size:.96rem;
  list-style:none;padding:4px 0}
.mehr-feld summary::-webkit-details-marker{display:none}
.mehr-feld summary::before{content:"+ ";font-weight:700}
.mehr-feld[open] summary::before{content:"– "}

/* Hero: Hauptknopf gleich sichtbar, nicht erst nach dem Scrollen */
.hero-knopf{margin:26px 0 18px}
@media(max-width:600px){.hero-knopf .btn{width:100%;text-align:center}}

/* Nummerierte Listen in Fliesstexten */
.fliess ol{padding-left:1.3em;margin:1em 0}
.fliess ol > li{margin-bottom:.9em}
.fakten caption{caption-side:top}

/* <picture> ist von Haus aus inline — sonst greift die Hoehe im Kopfbereich nicht */
picture{display:block}
.szene picture{height:100%}

/* ---------- ergaenzt 19.10.2026: Rentenluecke, Social, Downloads ---------- */
.feineinstellung{border-top:1px solid var(--linie);border-bottom:0;margin-top:6px;padding-top:14px}
.feineinstellung summary{font-size:.95rem;color:var(--gold-dunkel)}
.feineinstellung summary::after{top:-4px;font-size:1.3rem}
.feld .zahl{display:flex;align-items:center;gap:6px;font-weight:600;color:var(--titel);white-space:nowrap}
.feld .zahl input{flex:1;min-width:0;text-align:right}
.rb-rente{background:#6E7684}.rb-schon{background:#4C8B5B}.rb-luecke{background:var(--gold)}
.p-rente{background:#6E7684}.p-schon{background:#4C8B5B}.p-luecke{background:var(--gold)}
.legende{flex-wrap:wrap;gap:8px 16px}

.kacheln{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:26px 0 22px}
.kachel{background:var(--grund);border-radius:6px;padding:22px 20px;text-align:center}
.kachel.stark{background:var(--nacht)}
.kachel-zahl{font-size:clamp(1.4rem,3.4vw,1.9rem);font-weight:700;color:var(--titel);
  margin:0 0 6px;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
.kachel.stark .kachel-zahl{color:var(--gold)}
.kachel-text{font-size:.9rem;color:var(--grau);margin:0;line-height:1.4}
.kachel.stark .kachel-text{color:#A9A396}
@media(max-width:700px){.kacheln{grid-template-columns:1fr;gap:12px}
  .kachel{display:flex;align-items:center;justify-content:space-between;text-align:left;padding:16px 18px}
  .kachel-zahl{margin:0;font-size:1.3rem}.kachel-text{max-width:55%;text-align:right}}

.sozialgitter{display:grid;gap:13px}
.sozialkarte{display:grid;grid-template-columns:auto 1fr auto;grid-template-rows:auto auto;
  gap:2px 15px;align-items:center;background:#fff;border:1px solid var(--linie);
  border-radius:6px;padding:18px 20px;text-decoration:none;color:var(--text);
  transition:border-color .15s,transform .15s}
.sozialkarte:hover{border-color:var(--gold);transform:translateY(-2px)}
.sk-punkt{grid-row:1/3;width:13px;height:13px;border-radius:50%}
.sozialkarte strong{color:var(--titel);font-size:1.06rem}
.sk-handle{grid-column:2;font-size:.88rem;color:var(--grau);font-variant-numeric:tabular-nums}
.sk-text{grid-column:2;font-size:.94rem;color:#4a4a4a;margin-top:5px;line-height:1.45}
.sk-pfeil{grid-row:1/3;grid-column:3;color:var(--gold);font-size:1.3rem;font-weight:700}
@media(max-width:560px){.sozialkarte{padding:15px 16px;gap:2px 11px}.sk-text{font-size:.89rem}}

.downloadkarte{background:var(--grund);border-left:5px solid var(--gold);border-radius:0 6px 6px 0;
  padding:30px 28px}
.downloadkarte h2{margin:6px 0 10px;font-size:1.4rem}
.downloadkarte .nl-form{margin-top:18px}
@media(max-width:560px){.downloadkarte{padding:22px 18px}}

/* Ratgeberliste auf der Startseite */
.ratgeberliste{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:24px 0 10px}
.rg{display:block;background:var(--grund);border-left:4px solid var(--gold);border-radius:0 5px 5px 0;
  padding:15px 18px;text-decoration:none;transition:background .15s}
.rg:hover{background:#EDEBE4}
.rg strong{display:block;color:var(--titel);font-size:1rem;margin-bottom:3px}
.rg span{display:block;color:var(--grau);font-size:.9rem;line-height:1.4}
.gruppe .knopfreihe,.gruppe a.btn+a.btn{margin-top:8px}
@media(max-width:700px){.ratgeberliste{grid-template-columns:1fr}}

/* ---------- Rentenrechner in vier Schritten (19.10.2026) ---------- */
.schritt-leiste{scroll-margin-top:84px;display:grid;grid-template-columns:repeat(4,1fr);gap:2px;background:var(--nacht);
  border-radius:6px 6px 0 0;overflow:hidden;margin-bottom:0}
.schritt-tab{display:flex;align-items:center;justify-content:center;gap:9px;background:#243044;
  border:0;border-bottom:3px solid transparent;color:#A9A396;font-family:inherit;font-size:.95rem;
  font-weight:600;padding:16px 10px;cursor:pointer;transition:background .15s,color .15s}
.schritt-tab:hover{background:#2C3A50;color:#D8D5CB}
.schritt-tab.aktiv{background:var(--nacht);color:#fff;border-bottom-color:var(--gold)}
.st-nr{display:inline-flex;align-items:center;justify-content:center;width:25px;height:25px;
  border-radius:50%;border:1.5px solid #5A6478;font-size:.82rem;flex:0 0 25px}
.schritt-tab.aktiv .st-nr{background:var(--gold);border-color:var(--gold);color:#fff}
.schritt-tab.erledigt .st-nr{border-color:var(--gold);color:var(--gold)}
@media(max-width:760px){.schritt-tab{flex-direction:column;gap:5px;font-size:.78rem;padding:12px 4px}
  .st-nr{width:22px;height:22px;flex:0 0 22px;font-size:.75rem}}

.schrittfeld{border:1px solid var(--linie);border-top:0;border-radius:0 0 6px 6px;
  padding:32px 30px;background:#fff}
.schritt-kopf{margin-bottom:26px}
.schritt-kopf h2{margin-bottom:.25em}
.schritt-kopf .vorspann{font-size:1.03rem;margin:0}
.schrittfeld .formular{border:0;padding:0;max-width:none;background:transparent}
@media(max-width:760px){.schrittfeld{padding:24px 18px}}

.reglerwert{float:right;color:var(--gold-dunkel);font-variant-numeric:tabular-nums}
input[type=range]{width:100%;accent-color:var(--gold);height:26px}
.vorschlag{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:#FBF3DC;border-left:4px solid var(--gold);border-radius:0 4px 4px 0;
  padding:13px 16px;margin-bottom:20px;font-size:.95rem;color:#5a4a1d}
.vorschlag b{color:var(--titel)}
.btn.klein{padding:7px 14px;font-size:.88rem}

.verlauf{width:100%;height:auto;display:block;margin:18px 0 6px}
.aufstellung.hell td{color:var(--text)}
.aufstellung.hell tr.summe td{color:var(--titel);font-size:1.15rem;border-top:2px solid var(--linie)}

.vergleich{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-bottom:28px}
.vk{background:var(--grund);border-radius:6px;padding:24px 22px}
.vk.stark{background:var(--nacht)}
.vk-label{font-size:.85rem;letter-spacing:1px;text-transform:uppercase;color:var(--grau);
  font-weight:600;margin:0 0 8px}
.vk.stark .vk-label{color:#A9A396}
.vk-zahl{font-size:clamp(1.9rem,5vw,2.7rem);font-weight:700;color:var(--titel);margin:0 0 14px;
  font-variant-numeric:tabular-nums;letter-spacing:-1px}
.vk.stark .vk-zahl{color:var(--gold)}
.vk-balken{height:11px;background:rgba(0,0,0,.08);border-radius:6px;overflow:hidden}
.vk.stark .vk-balken{background:rgba(255,255,255,.12)}
.vk-balken span{display:block;height:100%;background:#8C9099;border-radius:6px;transition:width .3s}
.vk.stark .vk-balken span{background:var(--gold)}
@media(max-width:620px){.vergleich{grid-template-columns:1fr;gap:12px}}

.gewaehr{font-size:.92rem;color:var(--grau);background:var(--grund);border-radius:6px;
  padding:16px 20px;margin:26px 0 34px;line-height:1.55}