@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}

@font-face{font-family:"Source Serif 4";src:url("fonts/sourceserif4-var.woff2") format("woff2");font-weight:200 700;font-display:swap}

:root{
  --gold:#C8A227; --gold-dunkel:#7A6012; --gold-hell:#E3C464; --nacht:#0B0E13;
  --nacht-2:#141922;
  --text:#3A3A3A; --titel:#15181E; --grau:#6B6B6B;
  --flaeche:#FFFFFF; --grund:#F7F5F1; --linie:#E0DBD1;
  --breite:1240px;
  --serif:"Source Serif 4",Georgia,"Times New Roman",serif;
  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace;
}
*{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)}
/* Nebenziele als Text, nicht als Knopf — damit nur ein Aufruf je Blick
   die Akzentfarbe traegt (22.10.2026, CTA-Fokus). */
.textlink{color:var(--gold-dunkel);text-decoration:underline;text-decoration-color:var(--linie);
  text-underline-offset:3px;font-weight:600;display:inline-flex;align-items:center;padding:10px 0}
.textlink:hover{text-decoration-color:var(--gold-dunkel)}
.textlinks{display:flex;gap:18px;flex-wrap:wrap;margin-top:10px}
.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}
/* 22.10.2026: Die FAQ-Frage ist jetzt ein <h3> (Strukturdaten brauchen die
   Ueberschrift). Optisch darf sich dadurch nichts aendern — sie bleibt die
   Summary-Zeile, kein Block-Heading. */
summary h3{display:inline;margin:0;font:inherit;color:inherit;letter-spacing:inherit}
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}}

/* 22.10.2026: langes Formular und Kurzformular nebeneinander. Das kurze ist
   schmaler und ruhiger — es soll als Nebenweg erkennbar sein, nicht als
   zweites Hauptformular. */
.kontakt-paar{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,.85fr);
  gap:24px;align-items:start}
.kontakt-paar .formular{max-width:none}
.formular.kurz{background:var(--grund)}
.formular.kurz h3{margin-bottom:6px}
.formular.kurz .btn{width:100%;text-align:center}
@media(max-width:900px){
  /* Am Handy steht das kurze ZUERST: wer acht Felder sieht, bevor er die drei
     sieht, hoert vorher auf. */
  .kontakt-paar{grid-template-columns:1fr;gap:18px}
  .formular.kurz{order:-1}
}
.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;
    transition:transform .22s ease,opacity .22s ease}
  /* 22.10.2026: ausgefahren, solange der Hero-Knopf im Bild ist (siehe Skript
     im Fuss). Kein display:none, damit body{padding-bottom} stehen bleibt und
     beim Einblenden nichts springt. */
  .mobil-cta.aus{transform:translateY(110%);opacity:0;pointer-events:none}
  .mobil-cta .btn{display:block;text-align:center}
  body{padding-bottom:74px}
}
@media(prefers-reduced-motion:reduce){.mobil-cta{transition:none}}

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

/* Tabelle — echte Spaltentabelle fuer Vergleichswerte */
.tabelle{width:100%;border-collapse:collapse;margin:22px 0;font-size:.95rem}
.tabelle th,.tabelle td{text-align:left;padding:10px 12px;border-bottom:1px solid var(--linie)}
.tabelle th{color:var(--grau);font-weight:600;background:var(--grund);font-size:.85rem}
.tabelle td:last-child,.tabelle th:last-child{text-align:right;font-variant-numeric:tabular-nums}
@media(max-width:480px){.tabelle th,.tabelle td{padding:8px 8px}.tabelle{font-size:.88rem}}

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

/* ---------- Rechner-Wahl: zwei Rechner, eine Seite (23.10.2026) ----------
   Eigene Klassen statt .schritt-leiste/.schritt-tab: der Rentenrechner
   greift auf diese Klassen dokumentweit zu (document.querySelectorAll),
   nicht nur innerhalb seines eigenen Schrittassistenten. Gleicher Name
   hier wuerde dessen Schrittwechsel durcheinanderbringen. */
.rechner-leiste{scroll-margin-top:84px;display:grid;grid-template-columns:repeat(2,1fr);gap:2px;
  background:var(--nacht);border-radius:6px;overflow:hidden;margin-bottom:8px}
.rechner-tab{display:flex;align-items:center;justify-content:center;background:#243044;
  border:0;border-bottom:3px solid transparent;color:#A9A396;font-family:inherit;font-size:.95rem;
  font-weight:600;padding:18px 14px;cursor:pointer;transition:background .15s,color .15s}
.rechner-tab:hover{background:#2C3A50;color:#D8D5CB}
.rechner-tab.aktiv{background:var(--nacht);color:#fff;border-bottom-color:var(--gold)}
@media(max-width:760px){.rechner-tab{font-size:.85rem;padding:14px 8px}}

.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}

.termin-knopf{margin:18px 0 30px}

/* ==========================================================================
   CI3 — neue Optik, 21.10.2026
   Liegt bewusst als Schicht ueber dem Bestand: die Rechner, der Test und die
   Formulare behalten ihre Klassen und ihre Logik, nur das Aussehen aendert
   sich. Leitgedanke nach Daniels Referenzvideos: dunkle Flaechen im Wechsel
   mit hellem Lesetext, grosse helle Serifenschrift, Haarlinien statt Kaesten,
   Mono-Kleinschrift fuer Beschriftungen, Gold sehr sparsam.
   ========================================================================== */

/* --- Schrift ---------------------------------------------------------- */
h1,h2,h3{font-family:var(--serif);font-weight:300;letter-spacing:-.015em}
h1{font-size:clamp(2.3rem,5.2vw,4.1rem);line-height:1.05;font-weight:200}
h2{font-size:clamp(1.8rem,3.4vw,2.7rem);line-height:1.12}
h3{font-size:1.3rem;font-weight:400;line-height:1.25}
body{font-size:17.5px}
.wrap{padding:0 28px}

/* Beschriftungen: Versalien, Monospace, Haarlinie davor */
.kicker,.vk-label,.fazit-label,.marker{font-family:var(--mono);font-size:.72rem;
  letter-spacing:.22em;text-transform:uppercase;font-weight:400}
.kicker{display:flex;align-items:center;gap:14px;color:var(--grau);margin-bottom:26px}
.kicker::before{content:"";width:34px;height:1px;background:var(--gold);flex:none}
.marker{background:transparent;color:var(--gold-dunkel);padding:0;border-radius:0}

/* --- Knopf ------------------------------------------------------------ */
.btn{border-radius:2px;font-weight:700;padding:16px 28px;border-width:1px;
  transition:background .18s,transform .18s,color .18s}
.btn:hover{background:var(--gold-hell);border-color:var(--gold-hell);color:var(--titel);
  transform:translateY(-2px)}
.btn.hell{border-color:var(--linie)}

/* --- Kopf: dunkel, durchgehend ---------------------------------------- */
header{background:var(--nacht);border-bottom:1px solid rgba(255,255,255,.12)}
.marke{font-family:var(--serif);font-weight:400;font-size:1.45rem;color:#fff}
.marke span{color:var(--gold)}
nav.haupt a{font-family:var(--mono);font-size:.74rem;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.72);font-weight:400}
nav.haupt a:hover,nav.haupt a[aria-current]{color:var(--gold)}
.kopf .btn{padding:12px 20px;font-size:.9rem}
.menue summary{border-color:rgba(255,255,255,.25)}
.menue summary span{background:#fff}
.menue[open] nav{background:var(--nacht-2);border-bottom-color:rgba(255,255,255,.12)}
.menue nav a{color:rgba(255,255,255,.8);border-bottom-color:rgba(255,255,255,.08)}
@media(max-width:900px){.kopf > .btn{display:inline-flex;padding:11px 15px;font-size:.8rem;
  white-space:nowrap}}

/* --- Hero: dunkel und grossflaechig ----------------------------------- */
.hero{background:var(--nacht);color:rgba(255,255,255,.74)}
.hero::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(120% 90% at 78% 40%,rgba(200,162,39,.14),transparent 62%)}
.hero-raster{position:relative;z-index:2;padding:86px 0 92px;gap:60px}
.hero h1{color:#fff}
.hero .unter{color:rgba(255,255,255,.74);font-size:1.18rem}
.hero .fein{font-family:var(--mono);font-size:.73rem;letter-spacing:.13em;
  text-transform:uppercase;color:rgba(255,255,255,.64)}
.hero .fein a{color:rgba(255,255,255,.64)}
.hero .kicker{color:rgba(255,255,255,.55)}

/* Die zwei Wege: Haarlinien statt Kaesten */
.weiche{gap:0;border-top:1px solid rgba(255,255,255,.14);margin-bottom:30px}
.karte{background:transparent;border:0;border-bottom:1px solid rgba(255,255,255,.14);
  border-radius:0;padding:20px 24px 20px 0;color:#fff}
.karte:hover{background:rgba(255,255,255,.04);transform:none;border-color:var(--gold)}
.karte strong{font-family:var(--serif);font-weight:400;font-size:1.14rem;color:#fff}
.karte span{color:rgba(255,255,255,.55)}
@media(min-width:901px){.weiche{grid-template-columns:1fr 1fr}
  .karte:nth-child(odd){border-right:1px solid rgba(255,255,255,.14);padding-right:24px}
  .karte:nth-child(even){padding-left:24px}}

/* Bildflaeche: gegradet, damit das Foto zur dunklen Flaeche passt */
.szene{clip-path:none;border-radius:3px;background:var(--nacht-2)}
.szene img{filter:grayscale(.5) contrast(1.1) brightness(.84) sepia(.1)}
.szene::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(11,14,19,.9),rgba(11,14,19,.15) 55%,transparent 80%),
             linear-gradient(to right,rgba(11,14,19,.7),transparent 48%)}

/* --- Zahlenband unter dem Hero ---------------------------------------- */
.vertrauen{background:var(--nacht);color:rgba(255,255,255,.5);font-size:.88rem;
  border-bottom:1px solid rgba(255,255,255,.12)}
.vertrauen .wrap{gap:8px 30px;padding-top:16px;padding-bottom:16px}
.vertrauen b{color:rgba(255,255,255,.85);font-weight:600}
.vertrauen .reg{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(255,255,255,.65)}

/* Leiser Zweitweg neben dem Hauptknopf — kein zweiter Knopf, nur ein Link */
.leise{font-family:var(--mono);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.5);text-decoration:none;border-bottom:1px solid rgba(255,255,255,.22);
  padding-bottom:3px}
.leise:hover{color:#fff;border-color:var(--gold)}

/* Vier Zahlen nebeneinander, durch Haarlinien getrennt */
.zahlenband{background:var(--nacht-2);border-top:1px solid rgba(255,255,255,.12);
  border-bottom:1px solid rgba(255,255,255,.12)}
.zahlenband .wrap{display:grid;grid-template-columns:repeat(5,1fr)}
.zahlenband div{padding:30px 26px 30px 0;border-right:1px solid rgba(255,255,255,.12)}
.zahlenband div:last-child{border-right:0}
.zahlenband b{display:block;font-family:var(--serif);font-size:2.1rem;font-weight:300;
  color:var(--gold-hell);line-height:1}
.zahlenband span{display:block;font-family:var(--mono);font-size:.67rem;letter-spacing:.17em;
  text-transform:uppercase;color:rgba(255,255,255,.52);margin-top:9px}
@media(max-width:860px){
  /* Am Handy hatte das Band links 0 und rechts 18 Pixel Luft: die erste
     Spalte klebte am Bildschirmrand, das Band stand sichtbar schief
     (gemessen 21.10.2026 bei 390 px). Polster hier fest setzen. */
  .zahlenband .wrap{grid-template-columns:1fr 1fr;padding-left:22px;padding-right:22px}
  .zahlenband div{padding:20px 18px 20px 0;border-bottom:1px solid rgba(255,255,255,.12)}
  .zahlenband div:nth-child(2n){padding-left:18px}
  .zahlenband div:nth-child(2n){border-right:0}
  .zahlenband div:nth-child(n+3){border-bottom:0}
  .zahlenband b{font-size:1.6rem}
}

/* --- Abschnitte ------------------------------------------------------- */
section{padding:104px 0}
@media(max-width:860px){section{padding:64px 0}}
section.grau{background:var(--grund)}
/* Dunkle Abschnitte im Wechsel */
section.dunkel{background:var(--nacht);color:rgba(255,255,255,.72)}
section.dunkel h1,section.dunkel h2,section.dunkel h3{color:#fff}
section.dunkel .kicker{color:rgba(255,255,255,.55)}
section.dunkel .gruppe{background:transparent;border-color:rgba(255,255,255,.14)}
section.dunkel .gruppe li{color:rgba(255,255,255,.72)}

/* Abschnittsnummer // 01 */
.nr{font-family:var(--mono);font-size:.72rem;letter-spacing:.2em;color:var(--gold);
  margin:0 0 18px}

/* --- Zwei Gruppen: Haarlinienraster ----------------------------------- */
.gruppen{gap:0;border-top:1px solid var(--linie);margin-top:46px}
.gruppe{background:transparent;border:0;border-radius:0;padding:40px 40px 40px 0}
.gruppe ul{list-style:none;padding:0;margin:20px 0 24px}
.gruppe li{padding:11px 0 11px 26px;border-top:1px solid var(--linie);position:relative;margin:0}
.gruppe li::before{content:"";position:absolute;left:0;top:19px;width:9px;height:1px;
  background:var(--gold)}
@media(min-width:861px){
  .gruppen{grid-template-columns:1fr 1fr}
  .gruppe:first-child{border-right:1px solid var(--linie)}
  .gruppe:last-child{padding-left:40px;padding-right:0}
}
@media(max-width:860px){.gruppe{padding:28px 0;border-bottom:1px solid var(--linie)}}

/* --- Ablauf: grosse helle Ziffern ------------------------------------- */
.schritte{gap:0;border-top:1px solid var(--linie);margin-top:46px}
.schritt{padding:36px 36px 36px 0;border-right:1px solid var(--linie)}
.schritt:last-child{border-right:0}
.schritt::before{position:static;width:auto;height:auto;background:none;border-radius:0;
  display:block;font-family:var(--serif);font-size:3.2rem;font-weight:200;color:#D5CFBF;
  line-height:1;margin-bottom:14px}
.schritt{padding-top:36px}
section.dunkel .schritte{border-top-color:rgba(255,255,255,.14)}
section.dunkel .schritt{border-right-color:rgba(255,255,255,.14)}
section.dunkel .schritt::before{color:rgba(255,255,255,.17)}
@media(max-width:860px){.schritt{padding:26px 0;border-right:0;border-bottom:1px solid var(--linie)}
  .schritt:last-child{border-bottom:0}}

/* --- Kopfbereich der Unterseiten: dunkel ------------------------------ */
.kopfbereich{background:var(--nacht);color:rgba(255,255,255,.74);padding:76px 0 68px;
  position:relative;overflow:hidden}
.kopfbereich::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(100% 80% at 80% 30%,rgba(200,162,39,.12),transparent 64%)}
.kopfbereich .wrap{position:relative;z-index:2}
.kopfbereich h1{color:#fff;font-size:clamp(2rem,4.4vw,3.2rem)}
.kopfbereich .vorspann{color:rgba(255,255,255,.72)}
.kopfbereich .kicker{color:rgba(255,255,255,.55)}
.kopfbereich .marker{color:var(--gold)}
.kopfbereich .btn.hell{color:#fff;border-color:rgba(255,255,255,.35)}
.kopfbereich .btn.hell:hover{background:rgba(255,255,255,.1);border-color:#fff;color:#fff}
@media(max-width:860px){.kopfbereich{padding:52px 0 46px}}

/* --- Brotkrume: leise ------------------------------------------------- */
.krume{background:var(--nacht);border-bottom:1px solid rgba(255,255,255,.1)}
.krume .wrap{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(255,255,255,.65);padding-top:13px;padding-bottom:13px}
.krume a{color:rgba(255,255,255,.65)}
.krume a:hover{color:var(--gold);text-decoration:none}
.krume span[aria-current]{color:rgba(255,255,255,.75);font-weight:400}

/* --- Aufklapper, Kaesten, Listen -------------------------------------- */
summary{font-family:var(--serif);font-weight:400;font-size:1.16rem}
details{padding:18px 0}
.formular,.newsletter,.annahmen,.gewaehr,.downloadkarte,.frage,.schrittfeld,
.themenliste a,.sozialkarte,.rg,.kachel,.vk,.fazit,.deutungsblock{border-radius:2px}
.formular{border-color:var(--linie)}
.themenliste a:hover{box-shadow:none;border-color:var(--gold)}
.sozialkarte:hover{transform:none;border-color:var(--gold)}
.themenliste strong,.sozialkarte strong,.rg strong{font-family:var(--serif);font-weight:400;
  font-size:1.14rem}
.downloadkarte h2,.annahmen h2{font-family:var(--serif)}
input,select,textarea,.skala button{border-radius:2px}
.orte li{border-radius:2px;background:transparent;font-family:var(--mono);font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--grau);padding:7px 13px}

/* Zahlen gross und in der Serifenschrift */
.kachel-zahl,.vk-zahl,.fazit-zahl,.ergebnis .gross{font-family:var(--serif);font-weight:300;
  letter-spacing:-.02em}

/* --- Fuss ------------------------------------------------------------- */
footer h3{font-family:var(--serif);font-weight:400;font-size:1.1rem}
footer{color:rgba(255,255,255,.55)}
footer a{color:rgba(255,255,255,.68)}
.fuss-unten{border-top-color:rgba(255,255,255,.12);color:rgba(255,255,255,.65)}

/* --- Mobile Dauerleiste ----------------------------------------------- */
@media(max-width:900px){
  .mobil-cta{background:rgba(11,14,19,.96);border-top:1px solid rgba(255,255,255,.14);
    backdrop-filter:blur(12px)}
}

/* Portraet im hellen Abschnitt: leicht entsaettigt, damit es zur dunklen
   Bildsprache des Hero passt, aber im Licht nicht stumpf wirkt. */
.vorstellung img{border-radius:2px;filter:grayscale(.32) contrast(1.05)}
.ergebnis,.kachel.stark,.vk.stark,.schritt-leiste,.videoflaeche{border-radius:2px}
.ergebnis .kicker,.vk.stark .vk-label{color:rgba(255,255,255,.5)}
.ergebnis .kicker::before{background:var(--gold)}

/* Handy: Korrekturen nach dem Blick auf das Geraet (21.10.2026)
   - Der Knopf im Kopf kollidierte mit dem Menuezeichen. Unten steht ohnehin
     die feste Leiste, also bleibt er oben weg (wie vor dem Umbau).
   - Das Bild stand vor der Ueberschrift. Zuerst gehoert das Versprechen hin,
     dann das Gesicht. */
@media(max-width:900px){
  .kopf > .btn{display:none}
  .hero-raster{padding:34px 0 40px;gap:26px}
  .szene{order:0;min-height:0;aspect-ratio:4/3;clip-path:none}
  .szene img{min-height:0;height:100%;object-position:62% 16%}
  .hero h1{font-size:clamp(2rem,8.4vw,2.8rem)}
  .hero .unter{font-size:1.04rem;margin-bottom:1.5em}
  .kicker{font-size:.68rem;margin-bottom:18px}
  .hero-knopf{margin:22px 0 14px}
  .hero-knopf .btn{width:100%;text-align:center;justify-content:center}
  .hero-knopf .leise{display:inline-block;margin-top:16px}
}

/* --- Bewertungen (27.10.2026, Daniels Freigabe) ------------------------
   Texte woertlich aus dem Google-Profil, Name nur Vorname + Initial.
   Bewusst KEIN schema.org Review: eigene Bewertungen auf der eigenen Seite
   bekommen seit 2019 keine Sterne mehr und verstossen gegen die Richtlinie. */
.stimmen-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 18px;margin-bottom:28px}
.stimmen-kopf h2{margin:0}
.sterne{color:var(--gold);letter-spacing:2px;font-size:1.05rem}
.stimmen-wert{color:var(--grau);font-size:.98rem}
.stimmen{display:flex;gap:18px;margin:0;padding:0 0 6px;list-style:none;overflow-x:auto;
  scroll-snap-type:x mandatory;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.stimmen::-webkit-scrollbar{display:none}
.stimmen > li{flex:0 0 calc((100% - 36px)/3);scroll-snap-align:start;display:flex}
.stimmen > li > .stimme{flex:1}
.stimmen-pfeile{display:flex;gap:10px;margin-top:16px}
.stimmen-pfeil{width:42px;height:42px;border:1px solid var(--linie);background:#fff;border-radius:50%;
  font-size:1.5rem;line-height:1;color:var(--titel);cursor:pointer}
.stimmen-pfeil:hover{border-color:var(--gold);color:var(--gold)}
.stimme{background:#fff;border:1px solid var(--linie);border-top:3px solid var(--gold);border-radius:4px;
  padding:22px 22px 18px;margin:0;display:flex;flex-direction:column;justify-content:space-between}
.stimme p{font-family:var(--serif);font-size:1.04rem;line-height:1.55;color:var(--titel);margin:0 0 14px}
.stimme .stimme-name{display:block;font-size:.9rem;color:var(--grau)}
.stimmen-link{margin:22px 0 0;font-size:.95rem}
.stimme-einzeln{border-left:3px solid var(--gold);padding:4px 0 4px 18px;margin:0 0 30px}
.stimme-einzeln p{font-family:var(--serif);font-size:1.1rem;color:var(--titel);margin:0 0 6px}
.stimme-einzeln .stimme-name{display:block;font-size:.9rem;color:var(--grau)}
@media(max-width:900px){.stimmen{gap:14px}.stimmen > li{flex-basis:84%}.stimme{padding:18px 18px 14px}}

/* ==========================================================================
   Handy-Umbau, 27.10.2026 (Daniel: zu voll, zu viele Schriften, zu viel
   Scrollen, "+" am Menue). Ziel am Handy: zwei Schriften (Serif fuer
   Ueberschriften, Sans fuer alles andere), weniger Abstand, Nebensachen
   zum Wischen oder Aufklappen statt untereinander.
   Die Regeln fuer Kopf und Hero stehen zusaetzlich in KRITISCH_CSS (bauen.py).
   ========================================================================== */
.menue summary::after{content:none!important;display:none!important}
.menue{border:0;padding:0}
.wrap.hero-raster{padding-left:28px;padding-right:28px}
@media(max-width:900px){
  .wrap.hero-raster{padding:0 22px 34px;gap:0}
  .szene{order:-1;margin:0 -22px;aspect-ratio:auto;height:min(58vh,460px);border-radius:0}
  .szene img{object-position:62% 14%}
  .hero-raster > div:first-child{position:relative;z-index:3;margin-top:-104px}
  .hero .kicker,.hero .fein{display:none}
  .hero h1{font-size:2rem;line-height:1.12;font-weight:300;margin-bottom:.5em}
  .hero .unter{font-size:1rem;line-height:1.55;margin-bottom:0}
  .hero-knopf{margin:22px 0 0;display:flex;flex-direction:column;align-items:stretch;gap:14px}
  .hero-knopf .btn{width:100%;text-align:center}
  .hero .leise{font-family:inherit;font-size:.95rem;letter-spacing:0;text-transform:none;text-align:center;
    border:0;text-decoration:underline;text-underline-offset:3px;color:rgba(255,255,255,.75);margin:0}
  body{font-size:16.5px}
  .kicker,.leise,.krume .wrap{font-family:inherit;letter-spacing:.06em}
  section{padding:44px 0}
  .kopfbereich{padding:38px 0 34px}
  h2{font-size:1.65rem}
}

/* Aufklapper (Formulare, Faktenliste): am Schreibtisch offen, am Handy zu */
.klapp{border:0;padding:0}
.klapp > summary{font-family:var(--serif);font-size:1.3rem;padding:4px 30px 14px 0}
.klapp .formular.kurz h3,.klapp .formular.kurz h3 + .hinweis{display:none}
.klapp-text{margin:-4px 0 14px}
.fakten-ende{padding:40px 0 56px}
.fakten-ende .fakten{margin-top:10px}
.ort-raster details:first-of-type{border-top:1px solid var(--linie)}

@media(max-width:900px){
  /* eine Schrift fuer alle Kleinbeschriftungen statt Monospace */
  .zahlenband span,.vertrauen .reg,.orte li,.marker,.vk-label,.fazit-label,.fakten caption{
    font-family:inherit;letter-spacing:.04em}
  /* Abschnitts-Etiketten weg: die Ueberschrift sagt dasselbe */
  section .wrap > .kicker,section .wrap > div:not(.ergebnis) > .kicker{display:none}
  .vorspann{font-size:1rem}
  h3{font-size:1.15rem}

  /* Zahlen in einer Reihe statt 2x2 */
  .zahlenband .wrap{grid-template-columns:repeat(5,1fr);padding:0 8px}
  .zahlenband div,.zahlenband div:nth-child(2n){padding:14px 4px;border-bottom:0;
    border-right:1px solid rgba(255,255,255,.12);text-align:center}
  .zahlenband div:last-child{border-right:0}
  .zahlenband b{font-size:1.3rem}
  .zahlenband span{font-size:.66rem;text-transform:none;margin-top:5px;line-height:1.3}
  .vertrauen .wrap{padding-top:10px;padding-bottom:10px;font-size:.82rem;gap:2px 14px}
  .vertrauen .reg{display:none}

  /* Wischreihen: Bewertungen, die zwei Wege, die zwei Rechner */
  .wisch{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px;
    margin:18px -28px 0!important;padding:0 28px 8px!important;scroll-padding-left:28px;border:0!important;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .wisch::-webkit-scrollbar{display:none}
  .wisch > *{flex:0 0 84%;scroll-snap-align:start}
  .wisch > .gruppe{background:#fff;border:1px solid var(--linie)!important;border-top:3px solid var(--gold)!important;
    border-radius:2px;padding:20px 18px!important}
  .wisch > .gruppe > p:has(+ ul){display:none}
  .gruppe ul{margin:12px 0 10px}
  .gruppe li{padding:8px 0 8px 22px}
  .gruppe li::before{top:17px}
  .stimmen-kopf{margin-bottom:6px}
  .stimme p{font-size:.98rem}

  /* Ueber mich: ohne zweites Foto und ohne zweiten Absatz */
  .kurz-handy > div:last-child{display:none}
  .kurz-handy p:nth-of-type(2){display:none}

  /* Ablauf: Ziffer links, Text rechts */
  .schritte{margin-top:18px}
  .schritt{display:grid;grid-template-columns:42px 1fr;column-gap:6px;padding:16px 0}
  .schritt::before{grid-row:1 / span 2;font-size:2rem;margin:0}
  .schritt h3{margin:0 0 4px}
  .schritt p{margin:0;font-size:.95rem}
  .schritte + .knopfreihe.mitte{display:none}

  /* Vor Ort: Orte knapper */
  .ort-raster{gap:30px}
  .orte{gap:6px}
  .orte li{padding:4px 10px;font-size:.78rem;text-transform:none}

  /* Ratgeber: zwei Spalten, nur der Name */
  .ratgeberliste{grid-template-columns:1fr 1fr;gap:8px;margin:16px 0 4px}
  .rg{padding:12px 12px}
  .rg strong{font-size:.98rem;margin:0}
  .rg span{display:none}

  /* Kontakt: Kalender-Knopf zuerst, Formulare aufklappbar */
  .termin-knopf{margin:14px 0 20px}
  .termin-knopf .btn{display:block;text-align:center}
  .kontakt-paar{gap:0}
  #anrufen{order:-1}
  .klapp{border-top:1px solid var(--linie);padding:4px 0}
  .klapp > summary{font-size:1.12rem;padding:14px 30px 14px 0}
  .klapp[open] > summary{padding-bottom:10px}
  .klapp .formular{padding:20px 16px;margin-bottom:14px}
  .newsletter{margin-top:10px;padding:20px 18px}
  .fakten-ende{padding:10px 0 30px}
  .fakten th,.fakten td{padding:9px 10px;font-size:.88rem}

  /* Fuss: zwei Spalten, kleiner */
  footer{padding:34px 0 20px;font-size:.88rem}
  .fuss-raster{grid-template-columns:1fr 1fr;gap:20px;margin-bottom:22px}
  .fuss-raster > div:first-child{grid-column:1 / -1}
  footer a{margin-bottom:5px}
  .fuss-unten{font-size:.76rem}
}

.klapp > summary::after{top:2px}
@media(max-width:900px){.klapp > summary::after{top:12px}}

/* ---------- Immobilien-Rechner (28.10.2026): vier Reiter, Ampel ---------- */
.rechner-leiste{grid-template-columns:repeat(4,1fr)}
@media(max-width:760px){.rechner-leiste{grid-template-columns:repeat(2,1fr)}}
label.haken{display:flex;align-items:center;gap:9px;font-weight:600;margin-bottom:8px}
label.haken input{width:18px;height:18px;flex:0 0 18px;margin:0;accent-color:var(--gold)}
.zahl input:disabled{opacity:.45}
.ampel{display:flex;gap:14px;align-items:flex-start;background:rgba(255,255,255,.06);
  border-radius:6px;padding:14px 16px;margin:0 0 16px}
.ampel p{margin:0;color:#E6E3D9;font-size:.97rem}
.ampel-punkt{flex:0 0 18px;width:18px;height:18px;border-radius:50%;background:#6B6B6B;margin-top:3px}
.ampel.gruen .ampel-punkt{background:#3FA34D}
.ampel.gelb .ampel-punkt{background:var(--gold)}
.ampel.rot .ampel-punkt{background:#C8442F}
a.rechner-tab{text-decoration:none;text-align:center}
/* Buerofoto (28.10.2026) */
figure.foto{margin:26px 0 30px}
figure.foto img{width:100%;height:auto;display:block;border-radius:6px}
figure.foto figcaption{font-size:.88rem;color:var(--grau);margin-top:8px}

/* Potenzialanalyse: Rad mit Rolle */
.radbereich{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:28px;align-items:center;margin:20px 0 26px}
.rad svg{width:100%;height:auto;display:block;max-width:400px;margin:0 auto}
.rad text{font-family:inherit}
.rolle-name{font-family:Georgia,'Times New Roman',serif;font-size:2.6rem;line-height:1.1;margin:4px 0 6px;font-weight:700}
.rolle-motto{font-size:1.1rem;color:var(--titel);margin:0 0 14px}
@media(max-width:620px){.radbereich{grid-template-columns:1fr;gap:10px}.rolle{text-align:center}}

/* Karriereseite 03.11.2026: abgesetzte Flaeche zwischen zwei weissen Abschnitten */
section.grund{background:var(--grund)}
.zahlenband div{min-width:0}