@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:#7A6012; --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-dunkel)}
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:var(--nacht);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);color:#fff}
.btn.hell{background:transparent;color:var(--gold-dunkel)}
.btn.hell:hover{background:var(--gold);color:var(--nacht)}
.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}
.alslink{background:none;border:0;padding:0;font:inherit;color:var(--gold-dunkel);text-decoration:underline;cursor:pointer}
.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}
/* Links mitten im Text brauchen mehr als Farbe, sonst sieht sie niemand */
.fuss-unten a{display:inline;text-decoration:underline;color:#E2DFD6}
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:#9A968C;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:"– "}

/* Unterlagen anhaengen. Das Feld selbst wird versteckt, weil der Browser seinen
   Knopf in seiner eigenen Sprache beschriftet ("Choose Files") und das auf einer
   deutschen Seite falsch aussieht. Sichtbar ist stattdessen das Label. */
.feldtitel{display:block;font-weight:600;margin-bottom:7px;font-size:.96rem;color:var(--titel)}
.dateiwahl{position:relative}
.dateiwahl input[type=file]{position:absolute;inset:0;width:100%;height:100%;opacity:0;
  cursor:pointer}
.dateiknopf{display:block;text-align:center;font-weight:600;font-size:.94rem;
  color:var(--gold-dunkel);border:1px dashed var(--linie);border-radius:6px;
  padding:14px 12px;background:#fff;cursor:pointer}
.dateiwahl:hover .dateiknopf{background:var(--grund);border-color:var(--gold)}
.dateiwahl input[type=file]:focus-visible + .dateiknopf{outline:2px solid var(--gold);
  outline-offset:2px}
/* Einwilligung. Beide Knoepfe gleich gross und gleich auffaellig — wer das
   Ablehnen kleiner macht, holt sich eine Abmahnung. */
.cookiefrage{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--nacht);
  color:#E8E5DE;box-shadow:0 -6px 24px rgba(0,0,0,.25)}
.ew-inhalt{max-width:860px;margin:0 auto;padding:22px 20px}
.ew-titel{margin:0 0 8px;font-weight:700;font-size:1.05rem;color:#fff}
.ew-text{margin:0;font-size:.92rem;line-height:1.55;color:#C9C5BC}
.ew-text a{color:var(--gold)}
.ew-knoepfe{display:flex;gap:12px;margin-top:16px}
.ew-knopf{flex:1 1 0;font:inherit;font-size:.95rem;font-weight:600;padding:13px 16px;
  border:1px solid var(--gold);border-radius:5px;background:transparent;color:var(--gold);
  cursor:pointer}
.ew-knopf:hover{background:var(--gold);color:var(--nacht)}
.ew-vorschau{margin:14px 0 0;font-size:.82rem;color:#9A968D;border-top:1px solid rgba(255,255,255,.14);
  padding-top:12px}
@media(min-width:720px){
  .ew-inhalt{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
  .ew-knoepfe{margin-top:0;flex:0 0 auto}
  .ew-knopf{flex:0 0 auto;min-width:148px}
  .ew-vorschau{flex:1 1 100%}
}
/* Der feste Knopf unten darf den Banner nicht ueberdecken */
.cookiefrage ~ .mobil-cta,body:has(.cookiefrage) .mobil-cta{display:none}

.dateiliste{list-style:none;padding:0;margin:10px 0 0;font-size:.88rem;color:var(--text)}
.dateiliste li{padding:6px 10px;background:var(--grund);border-radius:4px;margin-bottom:6px;
  word-break:break-all}
.dateiliste li::before{content:"✓ ";color:var(--gold-dunkel);font-weight:700}
.dateiliste li.schlecht{background:#FBF3DC;color:#7A5B00}
.dateiliste li.schlecht::before{content:"! ";color:#A3761B}

/* 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}

/* Dreizeiler im Foerderschritt: Sie + Staat = zusammen */
.dreizeiler{margin:20px 0 6px;border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12);padding:4px 0}
.dz{display:flex;justify-content:space-between;align-items:baseline;gap:14px;padding:9px 0;
  position:relative}
.dz span{color:#C9C5B9;font-size:.96rem}
.dz b{color:#fff;font-variant-numeric:tabular-nums;font-size:1.05rem;white-space:nowrap}
.dz.plus b{color:var(--gold)}
.dz.gleich{border-top:1px solid rgba(255,255,255,.18);margin-top:3px}
.dz.gleich span{color:#fff;font-weight:600}
.dz.gleich b{color:var(--gold);font-size:1.2rem;font-weight:700}

/* Fazitkasten in Schritt 4 */
.fazit{border-radius:6px;padding:24px 26px;margin-bottom:24px;text-align:center;
  background:var(--grund);border:2px solid var(--linie)}
.fazit.geschafft{background:#EAF4EC;border-color:#4C8B5B}
.fazit-label{margin:0 0 6px;font-size:.88rem;letter-spacing:1px;text-transform:uppercase;
  color:var(--grau);font-weight:600}
.fazit.geschafft .fazit-label{color:#2C5536}
.fazit-zahl{margin:0;font-size:clamp(2rem,6vw,3rem);font-weight:700;color:var(--titel);
  letter-spacing:-1px;font-variant-numeric:tabular-nums;line-height:1.1}
.fazit.geschafft .fazit-zahl{color:#2C5536}