/* Baustein Lesbarkeit 55+ (Werkbank). Mobil zuerst, selbst gehostete Poppins, hoher Kontrast.
   Grundlagen: WCAG 2.2 AA (1.4.3 Kontrast, 1.4.4 Text bis 200 %, 1.4.12 Abstaende, 2.4.7 Fokus, 2.5.8 Zielgroesse),
   W3C WAI "Older Users", NN/g (grosse Standardschrift, unterstrichene Links). Farben aus brand_system_linkedin.md.
   Schriftgroessen in rem, damit die Browser-Einstellung der Person wirkt. Fonts-Pfad: /assets/fonts/ */
@font-face{font-family:"Poppins";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/Poppins-Regular.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:500;font-display:swap;src:url("/assets/fonts/Poppins-Medium.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url("/assets/fonts/Poppins-SemiBold.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/Poppins-Bold.woff2") format("woff2")}
@font-face{font-family:"Poppins";font-style:italic;font-weight:700;font-display:swap;src:url("/assets/fonts/Poppins-BoldItalic.woff2") format("woff2")}

:root{
  /* Farben (Kontrast gemessen gegen den jeweiligen Grund) */
  --anthrazit:#1F2329;   /* Text auf Hell: 14,4:1 auf Off-White */
  --slate:#5a6070;       /* nur Flaechen, Text darauf weiss: 6,3:1 */
  --slate-dunkel:#474C59;/* Zweittext auf Hell: 7,8:1 */
  --peach:#F5CDBB;       /* nur auf Dunkel: 10,8:1 auf Anthrazit */
  --blau:#3D5A80;        /* Akzent und Buttons auf Hell: 6,4:1 auf Off-White, weiss darauf 7,1:1 */
  --offwhite:#F6F4F1;
  --weiss:#FFFFFF;
  --grau-hell:#C8CCD2;   /* Zweittext auf Anthrazit: 9,8:1 */
  --linie:#E2DFDA;
  --fokus:#3D5A80;
  /* Typo: Grundschrift 20 px (1,25rem) mobil, 21 px ab Tablet. Zeilenhoehe 1,6, Zeilenlaenge max. ca. 65 Zeichen */
  --schrift:"Poppins",system-ui,"Segoe UI",Roboto,Arial,sans-serif;
  --text:1.25rem; --klein:1.0625rem; --zeile:1.6; --mass:38rem;
  --h1:clamp(2.1rem,6.5vw,3.4rem); --h2:clamp(1.65rem,4.6vw,2.35rem); --h3:1.35rem;
  --ziel:3.5rem;         /* Mindesthoehe Buttons 56 px, deutlich ueber WCAG 24 px */
  --rand:1.25rem; --radius:10px;
}
@media (min-width:48rem){:root{--text:1.3125rem;--rand:2rem}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:5.5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important;animation:none!important}}
body{margin:0;font-family:var(--schrift);font-size:var(--text);line-height:var(--zeile);color:var(--anthrazit);background:var(--offwhite);font-weight:400;letter-spacing:.005em}
img{max-width:100%;height:auto;display:block}
h1,h2,h3{font-weight:700;line-height:1.2;margin:0 0 .6em;letter-spacing:-.005em;text-wrap:balance}
h1{font-size:var(--h1)} h2{font-size:var(--h2)} h3{font-size:var(--h3);line-height:1.3}
p,ul,ol{margin:0 0 1em;max-width:var(--mass)}
strong{font-weight:600}
em.akzent{font-style:italic;font-weight:700;color:var(--blau)}
.dunkel em.akzent{color:var(--peach)}

/* Links immer unterstrichen und gut treffbar (NN/g, WCAG 1.4.1) */
a{color:var(--blau);text-decoration:underline;text-underline-offset:.18em;text-decoration-thickness:.08em}
a:hover{text-decoration-thickness:.14em}
.dunkel a{color:var(--peach)}
:focus-visible{outline:3px solid var(--fokus);outline-offset:3px;border-radius:4px}
.dunkel :focus-visible{outline-color:var(--peach)}

/* Buttons: gross, klare Beschriftung, ein Primaerziel */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.5em;min-height:var(--ziel);padding:.7em 1.4em;border-radius:var(--radius);border:2px solid transparent;font:600 1.2rem/1.2 var(--schrift);text-decoration:none;cursor:pointer;background:var(--blau);color:var(--weiss)}
.btn:hover{filter:brightness(1.08)}
.dunkel .btn{background:var(--peach);color:var(--anthrazit)}
.btn-zweit{background:transparent;color:var(--blau);border-color:var(--blau)}
.dunkel .btn-zweit{background:transparent;color:var(--peach);border-color:var(--peach)}
.btn[disabled]{opacity:.55;cursor:not-allowed;filter:none}
@media (max-width:30rem){.btn-voll{width:100%}}

/* Flaechen */
.dunkel{background:var(--anthrazit);color:var(--weiss)}
.dunkel .zweittext{color:var(--grau-hell)}
.zweittext{color:var(--slate-dunkel)}
.hell{background:var(--offwhite)} .weiss{background:var(--weiss)}
.wrap{max-width:72rem;margin:0 auto;padding:0 var(--rand)}
.abschnitt{padding:3.5rem 0} @media (min-width:48rem){.abschnitt{padding:5rem 0}}
.kicker{font-weight:500;font-size:var(--klein);letter-spacing:.01em;margin-bottom:1rem}
.trenner{width:120px;height:4px;background:var(--peach);border:0;margin:0 0 1.5rem}
.hell .trenner,.weiss .trenner{background:var(--blau)}

/* Nummerierte Listen mit Ziffernkreis (Vorlage 2) */
ol.ziffern{list-style:none;padding:0;counter-reset:z;max-width:44rem}
ol.ziffern>li{counter-increment:z;position:relative;padding:0 0 1.4rem 4rem;min-height:3rem}
ol.ziffern>li::before{content:counter(z);position:absolute;left:0;top:.05em;width:2.75rem;height:2.75rem;border-radius:50%;background:var(--blau);color:var(--weiss);font-weight:600;display:flex;align-items:center;justify-content:center;font-size:1.15rem}
.dunkel ol.ziffern>li::before{background:var(--peach);color:var(--anthrazit)}

/* FAQ mit details: grosse Klickflaeche */
details{border-top:1px solid var(--linie);max-width:46rem}
details:last-of-type{border-bottom:1px solid var(--linie)}
summary{cursor:pointer;list-style:none;padding:1.1rem 2.5rem 1.1rem 0;font-weight:600;position:relative;min-height:var(--ziel)}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";position:absolute;right:.25rem;top:.85rem;font-size:1.6rem;font-weight:500;color:var(--blau)}
details[open] summary::after{content:"\2212"}
details>div{padding:0 0 1.2rem}

.skip{position:absolute;left:-999px;top:0;background:var(--weiss);color:var(--anthrazit);padding:.8rem 1rem;z-index:10}
.skip:focus{left:1rem;top:1rem}

/* Option zum Baustein Lesbarkeit 55+: Leseschrift Atkinson Hyperlegible (Braille Institute, SIL OFL 1.1, Lizenz fonts/OFL-Atkinson-Hyperlegible.txt).
   Nach lesbar-55plus.css einbinden. Fliesstext in Atkinson, Headlines, Buttons, Labels und Kicker bleiben Poppins.
   Groesse: Atkinson hat eine kleinere x-Hoehe (0,496 em) als Poppins (0,548 em). 22 px Atkinson entsprechen optisch knapp 20 px Poppins,
   23 px Atkinson etwa 21 px Poppins. So bleibt die gefuehlte Groesse des Bausteins erhalten. */
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:400;font-display:swap;src:url("/assets/fonts/AtkinsonHyperlegible-Regular.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:normal;font-weight:700;font-display:swap;src:url("/assets/fonts/AtkinsonHyperlegible-Bold.woff2") format("woff2")}
@font-face{font-family:"Atkinson Hyperlegible";font-style:italic;font-weight:400;font-display:swap;src:url("/assets/fonts/AtkinsonHyperlegible-Italic.woff2") format("woff2")}
:root{--lese:"Atkinson Hyperlegible",Verdana,system-ui,sans-serif;--text:1.375rem;--klein:1.1875rem;--mass:40rem}
@media (min-width:48rem){:root{--text:1.4375rem}}
body{font-family:var(--lese);letter-spacing:.01em}
strong{font-weight:700}
h1,h2,h3,h4,.btn,summary,.kicker,legend,label,.marke,em.akzent,button{font-family:var(--schrift)}
summary{font-size:1.25rem}
label{font-size:1.25rem}
.kicker{font-size:1.0625rem}

/* Baustein Termin-Embed (Werkbank). Nutzt Variablen aus lesbar-55plus.css, hat aber eigene Rueckfallwerte. */
.termin-box{background:var(--weiss,#fff);color:var(--anthrazit,#1F2329);border-radius:var(--radius,10px);padding:1.5rem;max-width:46rem;box-shadow:0 1px 0 rgba(0,0,0,.04)}
@media (min-width:48rem){.termin-box{padding:2rem 2.25rem}}
.termin-vorab .btn{margin:0 0 1rem}
.termin-hinweis{font-size:var(--text,1.25rem);color:var(--slate-dunkel,#474C59);max-width:40rem}
.termin-platzhalter{border-left:4px solid var(--blau,#3D5A80);padding:.6rem 1rem;background:var(--offwhite,#F6F4F1);font-size:var(--klein,1.0625rem)}
.termin-wege{display:flex;flex-wrap:wrap;gap:.75rem 1.5rem;margin-top:1rem;font-size:var(--klein,1.0625rem)}
.termin-ziel{min-height:615px}
.termin-iframe{display:block;width:100%;min-width:312px;height:756px;border:0}
.ist-geladen{padding:.5rem}
/* Box ist immer hell, auch in dunklen Abschnitten: Farben zuruecksetzen (Peach nie auf Hell) */
.termin-box .btn{background:var(--blau,#3D5A80);color:var(--weiss,#fff);border-color:transparent}
.termin-box a{color:var(--blau,#3D5A80)}
.termin-box :focus-visible{outline-color:var(--blau,#3D5A80)}

/* Seitenspezifisch: Der Käufer-Blick. Basis: lesbar-55plus.css und termin-embed.css (Build haengt alles zu style.css zusammen). */
.kopf{position:sticky;top:0;z-index:5;border-bottom:1px solid #353A42}
.kopf-zeile{display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:4.5rem}
.marke{display:inline-flex;align-items:center;text-decoration:none}
.btn-klein{min-height:2.9rem;padding:.45em 1em;font-size:1rem}

/* Split-Raster (Branding Variante C "Zwei Seiten"): Foto auf Weiss links, dunkles Panel rechts. Mobil: Text zuerst, Foto darunter */
.split-hero{display:flex;flex-direction:column;background:var(--anthrazit)}
.split-foto{margin:0;background:var(--weiss);order:2;display:flex;justify-content:center;align-items:flex-end;overflow:hidden}
.split-foto picture{display:block;width:100%;max-width:26rem}
.split-foto img{width:100%;height:auto}
.split-panel{order:1;padding:2.5rem var(--rand) 3rem}
.split-inhalt{max-width:40rem}
.split-panel .lead{font-size:clamp(1.375rem,3.4vw,1.5rem);line-height:1.55}
.split-panel .kicker{max-width:34rem}
.split-check .split-foto picture{max-width:20rem}
@media (min-width:60rem){
  .split-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:min(50rem,92vh)}
  .split-foto{order:0;align-items:stretch}
  .split-foto picture,.split-check .split-foto picture{max-width:none;height:100%}
  .split-foto img{height:100%;object-fit:cover;object-position:50% 0}
  .split-panel{display:flex;align-items:center;padding:4rem clamp(2rem,5vw,5rem)}
  .split-check{grid-template-columns:minmax(0,4fr) minmax(0,8fr);min-height:0}
  .split-check .split-foto img{max-height:34rem}
}
.cta-zeile{margin:1.75rem 0 .6rem}
.mikro{font-size:var(--klein);margin:0}
.marke img{display:block;height:36px;width:auto}
.fuss img{display:block;height:30px;width:auto}

.zwei-spalten{display:grid;gap:2.5rem}
@media (min-width:60rem){.zwei-spalten{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:4rem;align-items:start}}
.karte{background:var(--weiss);border-radius:var(--radius);padding:1.75rem 1.5rem .75rem;border:1px solid var(--linie)}
.karte h3{margin-bottom:1.25rem}
.kernsatz{font-weight:700;font-size:clamp(1.4rem,3.6vw,1.7rem);line-height:1.35;border-left:6px solid var(--blau);padding:.2rem 0 .2rem 1.1rem;margin:1.5rem 0}

.schritte{list-style:none;padding:0;margin:0 0 1rem;display:grid;gap:1.5rem;max-width:none}
@media (min-width:60rem){.schritte{grid-template-columns:repeat(3,minmax(0,1fr));gap:2rem}}
.schritte li{background:var(--offwhite);border-radius:var(--radius);padding:1.5rem}
.schritt-nr{display:flex;align-items:center;justify-content:center;width:3rem;height:3rem;border-radius:50%;background:var(--blau);color:var(--weiss);font-weight:600;font-size:1.25rem;margin-bottom:1rem}
.schritte p{margin:0}

.zitat{margin:0;border-radius:var(--radius);padding:2rem 1.75rem;align-self:center}
.zitat p{font-size:clamp(1.3rem,3.2vw,1.55rem);line-height:1.5;font-weight:500;margin-bottom:1rem}
.zitat footer{font-size:var(--klein)}

#termin .lead{font-size:clamp(1.25rem,3.2vw,1.4rem)}
#termin .termin-box{margin-top:1.75rem}

.fuss{padding:2rem 0;border-top:1px solid #353A42}
.fuss-zeile{display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:var(--klein)}
.fuss nav{display:flex;gap:1.5rem}
.fuss a{display:inline-block;padding:.35rem 0}

/* Rechtsseiten */
.seite{padding:3rem 0 4rem}
.seite h1{font-size:clamp(2rem,5.5vw,2.8rem)}
.seite h2{font-size:1.5rem;margin-top:2.25rem}
.seite h3{font-size:1.25rem;margin-top:1.5rem}
.seite p,.seite li{max-width:46rem}
.marke,.btn-klein{white-space:nowrap}
@media (max-width:26rem){.kopf-zeile{gap:.5rem}.marke img{height:28px}.btn-klein{font-size:.9rem;padding:.4em .7em;min-height:2.75rem}}
@media (max-width:23.5rem){.marke img{height:25px}.btn-klein{font-size:.82rem;padding:.4em .6em}}
@media (max-width:21rem){.kopf .btn-klein{display:none}}

/* Käufer-Blick-Check (/check) */
.check-app{max-width:46rem;margin:0 auto;padding:1.75rem 1.5rem 1.5rem}
.check-app h2{font-size:clamp(1.45rem,4vw,1.9rem)}
.check-liste{padding-left:1.25rem;margin:0 0 1.25rem}
.check-liste li{margin-bottom:.5rem}
.feld{margin:0 0 1.25rem}
.feld label{display:block;font-weight:600;margin-bottom:.4rem}
.feld input,.feld select{width:100%;font:inherit;min-height:var(--ziel);padding:.6rem .8rem;border:2px solid var(--slate-dunkel);border-radius:8px;background:var(--weiss);color:var(--anthrazit)}
.fortschritt{height:10px;background:var(--offwhite);border-radius:5px;overflow:hidden;margin-bottom:.5rem}
.fortschritt i{display:block;height:100%;background:var(--blau);width:0;transition:width .25s}
.schritt-info{font-size:var(--klein);margin:0 0 1rem}
.frage-bereich{font-size:var(--klein);font-weight:600;color:var(--blau);margin:0 0 .4rem}
.frage-text{font-size:clamp(1.35rem,3.8vw,1.6rem);line-height:1.35;margin:0 0 1.25rem}
.frage-text:focus{outline:none}
.optionen{display:grid;gap:.75rem;margin-bottom:1.25rem}
.opt-btn{display:block;width:100%;text-align:left;font:inherit;padding:.8rem 1.1rem;min-height:var(--ziel);border:2px solid var(--linie);border-radius:10px;background:var(--weiss);color:var(--anthrazit);cursor:pointer}
.opt-btn:hover,.opt-btn.gewaehlt{border-color:var(--blau);background:#EEF2F7}
.opt-btn:focus-visible{outline:3px solid var(--fokus);outline-offset:2px}
.nl-box{border:2px solid var(--linie);border-radius:10px;padding:1.25rem 1.1rem .5rem;margin:1.25rem 0}
.nl-box legend{font-weight:700;padding:0 .4rem}
.haken{display:flex;gap:.75rem;align-items:flex-start;margin:0 0 1rem;cursor:pointer}
.haken input{width:1.6rem;height:1.6rem;flex:none;margin-top:.2rem;accent-color:var(--blau)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.fehler{color:#8A1F11;font-weight:600;border-left:5px solid #8A1F11;padding-left:.8rem}
.klein{font-size:var(--klein)}
.kicker-hell{font-size:var(--klein);font-weight:600;color:var(--blau);margin:0 0 .3rem}
.erg-titel{margin-bottom:.75rem}
.erg-bereiche{list-style:none;padding:0;margin:0 0 1.5rem;display:grid;gap:1rem}
.erg-zeile{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.1rem 1rem;margin-bottom:.35rem}
.erg-name{font-weight:600}
.erg-stufe{font-size:var(--klein)}
.balken{display:block;height:12px;border-radius:6px;background:var(--offwhite);position:relative;overflow:hidden}
.balken::after{content:"";position:absolute;inset:0 auto 0 0;width:var(--w,0);border-radius:6px;background:currentColor}
.stufe-gut{color:var(--anthrazit)}.stufe-gut .balken{color:var(--blau)}
.stufe-mittel .balken{color:#8C6A12}
.stufe-schwach .balken{color:#A8402F}
.stufe-schwach .erg-stufe{font-weight:700;color:#8A1F11}
.ko-box{background:#FBEDEA;border-left:6px solid #A8402F;padding:.9rem 1rem;border-radius:8px}
.hebel{border-left:5px solid var(--blau);padding:.2rem 0 .2rem 1rem;margin:0 0 1.25rem}
.hebel h4{font-size:1.2rem;margin:0 0 .4rem}
.hebel p{margin:0 0 .5rem}
.cta-box{border-radius:var(--radius);padding:1.5rem 1.4rem .5rem;margin:1.75rem 0 1.25rem}
.cta-box h3{margin-top:0}
.hinweis-box{background:var(--offwhite);border-left:5px solid var(--slate-dunkel);padding:.8rem 1rem;border-radius:8px}
.check-teaser .cta-zeile{margin-bottom:0}
.cta-paar{display:flex;flex-wrap:wrap;gap:.75rem}

/* Mit wem du sprichst: Foto (Blick zur Textspalte) und Zitat */
.person-rechts{display:grid;gap:1.5rem;align-self:start}
.person-foto{margin:0;background:var(--weiss);border-radius:var(--radius);overflow:hidden;border:1px solid var(--linie);max-width:30rem}
/* Einwilligungstext in der Leseschrift */
.haken{font-family:var(--lese,inherit);font-size:var(--text)}
/* Report: Deckblatt im Split-Raster, Innenseite hell (wie Variante B) */
.check-app.mit-report{max-width:58rem}
.report-deckblatt{display:grid;border-radius:var(--radius);overflow:hidden;margin:0 0 1.5rem;border:1px solid var(--linie)}
.report-deckblatt .split-foto{order:0;max-height:22rem}
.report-deckblatt .split-foto picture{max-width:17rem}
.report-deckblatt .split-panel{order:1;padding:1.75rem 1.5rem 1.5rem}
.report-deckblatt .erg-titel{font-size:clamp(1.6rem,4.4vw,2.1rem);color:var(--weiss)}
.report-deckblatt .erg-titel:focus{outline:none}
.report-deckblatt .kicker{margin:1rem 0 .4rem}
.deck-satz{margin:0;font-size:var(--text)}
.tag{display:inline-block;background:var(--slate-dunkel);color:var(--weiss);font:500 1.0625rem/1.3 var(--schrift);padding:.3rem .7rem;border-radius:8px}
@media (min-width:48rem){
  .report-deckblatt{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .report-deckblatt .split-foto{max-height:none;align-items:flex-end}
  .report-deckblatt .split-foto picture{max-width:none}
  .report-deckblatt .split-panel{display:flex;flex-direction:column;justify-content:center;padding:2.25rem 2.25rem}
}
.report-seite{background:var(--offwhite);border-radius:var(--radius);padding:1.5rem 1.25rem 1rem;border:1px solid var(--linie)}
@media (min-width:48rem){.report-seite{padding:2rem 2.25rem 1.25rem}}
.report-seite .erg-bereiche li{background:var(--weiss);border-radius:8px;padding:.8rem 1rem}
.seiten-kopf{display:flex;justify-content:space-between;flex-wrap:wrap;gap:.25rem 1rem;font:500 1.0625rem/1.4 var(--schrift);color:var(--slate-dunkel);border-bottom:2px solid var(--linie);padding-bottom:.6rem;margin-bottom:1.25rem}
.report-deckblatt .split-panel{align-items:flex-start}
.split-panel.dunkel .trenner{background:var(--peach)}
.report-seite .erg-bereiche,.report-seite p,.report-seite .check-liste{max-width:none}
.report-seite .hebel p{max-width:46rem}
/* Report per E-Mail und Newsletter (getrennt) */
.mail-box{margin-top:2rem;border-top:2px solid var(--linie);padding-top:1.5rem}
.mail-box h3{margin-top:0}
.mail-box .cta-zeile{margin:1rem 0 .5rem}
.nl-box .haken span{max-width:none}
#mail-status .hinweis-box{margin:1rem 0 0}
/* Termin-CTA im Check-Ergebnis: auf dem Handy weniger verschachtelte Innenabstände, damit Text und Kalender Platz haben */
.check-termin .termin-box{margin-top:1rem}
@media (max-width:47.99rem){
  .check-app.mit-report{padding-left:.75rem;padding-right:.75rem}
  .report-seite{padding-left:.9rem;padding-right:.9rem}
  .report-seite .cta-box{padding-left:1rem;padding-right:1rem;margin-left:-.4rem;margin-right:-.4rem}
  .check-termin .termin-box{padding:1.1rem 1rem;margin-left:-.5rem;margin-right:-.5rem}
}