/* chancenreich – Stylesheet v3 (IBM Plex Sans, eckig). Markenfarben aus dem Design System (Business-Logo). Schriften lokal (SIL OFL). */
@font-face{font-family:"IBM Plex Sans";src:url(../fonts/ibm-plex-sans-latin-400-normal.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(../fonts/ibm-plex-sans-latin-400-italic.woff2) format("woff2");font-weight:400;font-style:italic;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(../fonts/ibm-plex-sans-latin-500-normal.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(../fonts/ibm-plex-sans-latin-600-normal.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"IBM Plex Sans";src:url(../fonts/ibm-plex-sans-latin-700-normal.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}

:root{
  --brand:#e30521; --brand-dark:#b5041a; --brand-soft:#fde8ea;
  --ink:#1e2226; --text:#3b4046; --muted:#5d636a;
  --surface:#ffffff; --sand:#f6f2ed; --mist:#eef1f4; --line:#e4e6e9;
  --grad:linear-gradient(125deg,#f7f1ea 0%,#f1efee 45%,#e9eef2 100%);
  --dark:#1b1f23;
  --r-sm:0; --r:0; --r-lg:0;
  --shadow:0 1px 2px rgba(20,24,28,.04),0 8px 24px rgba(20,24,28,.06);
  --shadow-lg:0 2px 4px rgba(20,24,28,.05),0 20px 48px rgba(20,24,28,.10);
  --max:1180px; --gutter:clamp(16px,4vw,40px);
  --head:"IBM Plex Sans",Arial,Helvetica,sans-serif; --body:"IBM Plex Sans",Arial,Helvetica,sans-serif;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--body);font-size:17px;line-height:1.65;color:var(--text);background:var(--surface);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:var(--ink);text-decoration-color:var(--brand);text-decoration-thickness:2px;text-underline-offset:4px}
a:hover{color:var(--brand)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:0}
h1,h2,h3{font-family:var(--head);color:var(--ink);font-weight:600;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(38px,5.4vw,64px);line-height:1.04}
h2{font-size:clamp(30px,3.6vw,44px);line-height:1.1;margin-bottom:16px}
h3{font-size:22px;line-height:1.25;margin-bottom:8px}
p{margin:0 0 16px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.skip{position:absolute;left:-9999px}.skip:focus{left:12px;top:12px;background:#fff;padding:10px 14px;z-index:50;border-radius:var(--r-sm)}
.eyebrow{font-family:var(--head);font-weight:600;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-dark);margin:0 0 14px}
.lead{font-size:clamp(19px,1.6vw,22px);line-height:1.55;color:var(--muted);max-width:620px}
.muted{color:var(--muted)}
section{padding:clamp(36px,5vw,64px) 0}
.sec-head{max-width:760px;margin-bottom:28px}
.sec-head p{color:var(--muted);font-size:19px}
.bg-sand{background:var(--sand)} .bg-mist{background:var(--mist)} .bg-grad{background:var(--grad)}

/* Header */
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.86);backdrop-filter:saturate(1.4) blur(12px);-webkit-backdrop-filter:saturate(1.4) blur(12px);border-bottom:1px solid transparent;transition:box-shadow .3s,border-color .3s}
.site-header.scrolled{border-bottom-color:var(--line);box-shadow:0 4px 20px rgba(20,24,28,.06)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:84px;transition:min-height .3s}
.site-header.scrolled .wrap{min-height:68px}
.logo{flex:none}
.logo img{width:150px;transition:width .3s}
.site-header.scrolled .logo img{width:120px}
.nav>ul{list-style:none;margin:0;padding:0;display:flex;gap:2px;align-items:center}
.nav a{display:block;padding:10px 9px;font-family:var(--head);font-weight:500;font-size:15px;text-decoration:none;color:var(--ink);border-radius:0;white-space:nowrap;transition:background .2s,color .2s}
.nav a:hover{background:var(--mist);color:var(--ink)}
.nav a[aria-current="page"]{color:var(--brand)}
.nav li{position:relative}
.nav .sub{list-style:none;margin:0;padding:8px;position:absolute;top:calc(100% + 6px);left:0;min-width:0;width:max-content;background:#fff;border-radius:var(--r);box-shadow:var(--shadow-lg);opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s,transform .2s,visibility .2s}
.nav li:hover>.sub,.nav li:focus-within>.sub{opacity:1;visibility:visible;transform:none}
.nav .sub a{border-radius:var(--r-sm);font-size:15px;white-space:nowrap;padding:10px 14px 10px 16px}
.menu-btn{display:none;background:none;border:1px solid var(--line);border-radius:0;padding:9px 16px;font:600 15px var(--head);color:var(--ink);cursor:pointer}

/* Buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-family:var(--head);font-weight:600;font-size:17px;line-height:1;padding:16px 26px;border-radius:0;text-decoration:none;border:2px solid var(--brand);background:var(--brand);color:#fff;transition:transform .2s,box-shadow .2s,background .2s,border-color .2s}
.btn:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff;transform:translateY(-2px);box-shadow:0 10px 24px rgba(227,5,33,.25)}
.btn .arr{transition:transform .2s}.btn:hover .arr{transform:translateX(4px)}
.btn-ghost{background:transparent;color:var(--ink);border-color:var(--ink)}
.btn-ghost:hover{background:var(--ink);border-color:var(--ink);box-shadow:none}
.btn-sm{padding:12px 20px;font-size:15px}
.btn-light{background:#fff;color:var(--ink);border-color:#fff}.btn-light:hover{background:var(--sand);border-color:var(--sand);color:var(--ink);box-shadow:none}
.link-arrow{font-family:var(--head);font-weight:600;text-decoration:none;color:var(--brand-dark);display:inline-flex;gap:8px;align-items:center}
.link-arrow:hover .arr{transform:translateX(4px)}.link-arrow .arr{transition:transform .2s}

/* Hero */
.hero{padding:clamp(40px,6vw,80px) 0 clamp(56px,7vw,96px);background:var(--grad);overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1.15fr 1fr;gap:clamp(32px,5vw,72px);align-items:center}
.hero h1 em{font-style:normal;color:var(--brand)}
.hero .lead{margin:24px 0 36px}
.cta-row{display:flex;flex-wrap:wrap;gap:14px;align-items:center}
.hero-visual{position:relative;justify-self:center;width:min(100%,540px)}
.hero-visual .blob{border:5px solid #fff;box-shadow:var(--shadow-lg)}
.blob{overflow:hidden;background:#e9e4dd;position:relative}
.blob img{width:100%;aspect-ratio:1/1;object-fit:cover}
.trust{margin-top:56px;display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
.trust span.lbl{font-size:14px;color:var(--muted);margin-right:6px}
.chip{display:inline-block;font-size:14px;font-weight:600;color:var(--ink);background:rgba(255,255,255,.75);border:1px solid var(--line);border-radius:0;padding:7px 14px}

/* Kennzahlen */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:left}
.stat{border-top:2px solid var(--ink);padding-top:18px}
.stat b{display:block;font:700 clamp(42px,5vw,60px)/1 var(--head);color:var(--ink);letter-spacing:-.02em}
.stat b .u{color:var(--brand)}
.stat>span{display:block;margin-top:10px;color:var(--muted);font-size:16px}

/* Leistungen – Tabs */
.tabs{display:grid;grid-template-columns:300px 1fr;gap:32px;align-items:start}
.tablist{display:flex;flex-direction:column;gap:8px}
.tab{all:unset;cursor:pointer;display:block;padding:18px 22px;border-radius:var(--r);font:600 20px var(--head);color:var(--ink);background:transparent;border:1px solid var(--line);transition:background .2s,border-color .2s,color .2s}
.tab small{display:block;font:400 15px var(--body);color:var(--muted);margin-top:2px}
.tab:hover{background:#fff}
.tab[aria-selected="true"]{background:#fff;border-color:#fff;box-shadow:var(--shadow);color:var(--brand)}
.tab:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.panel{background:#fff;border-radius:var(--r-lg);padding:clamp(28px,4vw,48px);box-shadow:var(--shadow);display:grid;grid-template-columns:1.3fr 1fr;gap:36px}
.panel[hidden]{display:none}
.panel h3{font-size:30px}
.panel ul{list-style:none;padding:0;margin:0 0 24px;display:grid;gap:10px}
.panel li{padding-left:30px;position:relative}
.panel li::before{content:"";position:absolute;left:0;top:.45em;width:18px;height:18px;border-radius:0;background:var(--brand-soft)}
.panel li::after{content:"";position:absolute;left:6px;top:calc(.45em + 4px);width:4px;height:8px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:rotate(45deg)}
.panel .side{background:var(--sand);border-radius:var(--r);padding:24px}
.panel .side h4{font:600 17px var(--head);color:var(--ink);margin:0 0 8px}
.panel .side p+h4{margin-top:20px}
.panel .side p{font-size:16px;margin:0}
.no-js .tablist{display:none}.no-js .panel[hidden]{display:grid;margin-bottom:24px}
.tabs-note{margin-top:28px;font-size:17px}

/* Warum */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.why-card{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:32px;transition:transform .25s,box-shadow .25s,border-color .25s}
a.why-card:hover,a.why-card:focus-visible{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:transparent}
.why-card .num{font:700 15px var(--head);color:var(--brand-dark);letter-spacing:.1em}
.why-card h3{margin-top:12px}
.why-card p{font-size:17px;margin:0}

/* Über-mich-Teaser */
.about{display:grid;grid-template-columns:.9fr 1.1fr;gap:clamp(32px,6vw,80px);align-items:center}
.about .blob img{aspect-ratio:1/1}
.about blockquote{margin:24px 0;padding:0 0 0 20px;border-left:3px solid var(--brand);font:500 22px/1.4 var(--head);color:var(--ink)}

/* Meinungen – Slider */
.slider{position:relative}
.track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 48px)/3);gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px 2px 20px}
.track::-webkit-scrollbar{display:none}
.quote{scroll-snap-align:start;margin:0;background:#fff;border-radius:var(--r-lg);padding:32px;box-shadow:var(--shadow);display:flex;flex-direction:column}
.quote::before{content:"“";font:700 64px/0.6 var(--head);color:var(--brand);display:block;height:28px}
.quote p{font-size:18px;color:var(--ink)}
.quote footer{margin-top:auto;font-size:15px;color:var(--muted)}
.quote footer strong{color:var(--ink);display:block;font-family:var(--head);font-size:17px}
.slider-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:8px}
.slider-nav button{width:48px;height:48px;border-radius:0;border:1px solid var(--line);background:#fff;cursor:pointer;font-size:20px;color:var(--ink);transition:background .2s,border-color .2s}
.slider-nav button:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.no-js .slider-nav{display:none}

/* Schritte */
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;list-style:none;padding:0;margin:0;counter-reset:s}
.steps li{counter-increment:s;background:#fff;border-radius:var(--r-lg);padding:32px;border:1px solid var(--line)}
.steps li::before{content:"0" counter(s);font:700 44px/1 var(--head);color:var(--brand);display:block;margin-bottom:16px}

/* FAQ */
.faq{max-width:860px}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;list-style:none;font:600 20px var(--head);color:var(--ink);padding:22px 48px 22px 0;position:relative}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:8px;top:50%;width:12px;height:12px;border-right:2px solid var(--brand);border-bottom:2px solid var(--brand);transform:translateY(-70%) rotate(45deg);transition:transform .25s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{margin:0 0 22px;max-width:760px}

/* CTA */
.cta{background:var(--dark);color:#d9dde1;border-radius:var(--r-lg);padding:clamp(36px,5vw,64px);display:grid;grid-template-columns:1.4fr 1fr;gap:32px;align-items:center;position:relative;overflow:hidden}

.cta::after{content:"";position:absolute;right:0;top:0;width:12px;height:100%;background:var(--brand)}
.cta h2{color:#fff}
.cta a:not(.btn){color:#fff}
.cta .actions{display:flex;flex-direction:column;gap:12px;align-items:flex-start;position:relative;z-index:1}

/* Unterseiten */
.page-hero{background:var(--grad);padding:clamp(28px,4vw,52px) 0}
.page-hero h1{font-size:clamp(32px,4vw,50px);line-height:1.08;margin-bottom:20px}
.page-hero .wrap{display:grid;grid-template-columns:1.3fr .9fr;gap:clamp(32px,5vw,64px);align-items:center}
.breadcrumb{font-size:15px;color:var(--muted);margin:0 0 18px}
.breadcrumb a{color:var(--muted)}
.factbox{background:#fff;border-radius:var(--r-lg);padding:28px;box-shadow:var(--shadow)}
.factbox h2{font-size:22px;margin-bottom:14px}
.factbox dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:10px 18px;font-size:16px}
.factbox dt{font-weight:700;color:var(--ink)}
.factbox dd{margin:0}
.timeline{list-style:none;margin:0;padding:0;position:relative;max-width:900px}
.timeline::before{content:"";position:absolute;left:19px;top:8px;bottom:8px;width:2px;background:var(--line)}
.timeline>li{position:relative;padding:0 0 48px 68px}
.timeline>li::before{content:"";position:absolute;left:10px;top:6px;width:20px;height:20px;border-radius:0;background:#fff;border:4px solid var(--brand);box-shadow:0 0 0 6px var(--surface)}
.bg-sand .timeline>li::before{box-shadow:0 0 0 6px var(--sand)}
.timeline .when{font:600 14px var(--head);letter-spacing:.12em;text-transform:uppercase;color:var(--brand-dark);margin:0 0 6px}
.timeline h3{font-size:26px}
.lesson{margin:16px 0 0;padding:18px 22px;background:#fff;border-radius:var(--r);font-size:17px;box-shadow:var(--shadow)}
.lesson strong{color:var(--ink)}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,5vw,64px)}
.quals{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.quals li{padding-left:30px;position:relative;font-size:17px}
.quals li::before{content:"";position:absolute;left:0;top:.5em;width:12px;height:12px;border-radius:0;background:var(--brand)}
.roles{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0}
.prices{width:100%;border-collapse:separate;border-spacing:0;background:#fff;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow)}
.prices th,.prices td{text-align:left;padding:20px 24px;border-bottom:1px solid var(--line);vertical-align:top}
.prices tr:last-child td{border-bottom:0}
.prices th{font:600 14px var(--head);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);background:var(--mist)}
.prices td:last-child{white-space:nowrap;font:700 19px var(--head);color:var(--ink)}
.prices td small{display:block;color:var(--muted);font-size:15px}
.note{font-size:15px;color:var(--muted);margin-top:18px}

/* Footer */
.site-footer{background:var(--dark);color:#aeb4ba;padding:64px 0 32px;font-size:16px;margin-top:clamp(64px,9vw,120px)}
.site-footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid #30363c}
.site-footer h3{color:#fff;font-size:17px;margin-bottom:14px}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:8px}
.site-footer a{color:#d9dde1;text-decoration:none}.site-footer a:hover{color:#fff;text-decoration:underline}
.site-footer .legal{display:flex;justify-content:space-between;flex-wrap:wrap;gap:16px;padding-top:24px;font-size:14px}
.site-footer .legal ul{display:flex;gap:20px;flex-wrap:wrap}
.footer-logo{background:#fff;border-radius:var(--r-sm);padding:10px 12px;display:inline-block;margin-bottom:16px}
.footer-logo img{width:130px}
.cta-wrap{margin-top:clamp(36px,5vw,64px)}
.cta-wrap + .site-footer{margin-top:clamp(36px,5vw,64px)}

/* Scroll-Animation */
.js .reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}.js .reveal{opacity:1;transform:none;transition:none}*,*::before,*::after{transition:none!important;animation:none!important}}

/* Responsiv */
@media (max-width:1180px){
  .nav a{padding:10px 7px;font-size:14.5px}
}
@media (max-width:900px){
  .header-cta{order:2;margin-left:auto}
  /* erste Navigationsebene bleibt im Header sichtbar: alle Punkte sichtbar, bei Platzmangel in zwei Zeilen */
  .menu-btn{display:none!important}
  .site-header .wrap{flex-wrap:wrap;gap:0 16px;min-height:0;padding-top:10px;padding-bottom:0}
  .site-header.scrolled .wrap{min-height:0}
  .logo img,.site-header.scrolled .logo img{width:110px}
  .nav{flex:1 0 100%;order:3;padding:2px 0 8px}
  .nav>ul{flex-direction:row;flex-wrap:wrap;gap:0 2px}
  .nav a{padding:6px 7px;font-size:14px}
}
@media (max-width:900px){
  .hero .wrap,.about,.page-hero .wrap,.two-col,.cta,.panel{grid-template-columns:1fr}
  .tabs{grid-template-columns:1fr}
  .tablist{flex-direction:column;overflow-x:visible}
  .tab{white-space:normal;padding:14px 18px;font-size:18px}.tab small{display:none}
  .stats{grid-template-columns:repeat(2,1fr)}
  .why,.steps{grid-template-columns:1fr}
  .track{grid-auto-columns:85%}
  .hero-visual{width:min(100%,420px)}
  .site-footer .cols{grid-template-columns:1fr}
  .prices td:last-child{white-space:normal}
}
@media (max-width:480px){body{font-size:16px}.hero-visual .blob{border-width:4px}}

/* Meinungen */
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.quotes-wall{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:start}
.quotes-col{display:flex;flex-direction:column;gap:28px}
.quotes-wall .quote{display:block;margin:0}
.quotes-wall blockquote{margin:0}
.quotes-wall .quote p{font-size:17px;margin:0 0 12px}
.quote figcaption{margin-top:18px;font-size:15px;color:var(--muted)}
.quote figcaption strong{color:var(--ink);display:block;font-family:var(--head);font-size:17px}
/* Kontakt */
.contact-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.contact-card{background:#fff;border:1px solid var(--line);padding:32px;box-shadow:var(--shadow)}
.contact-card h3{font-size:15px;letter-spacing:.14em;text-transform:uppercase;color:var(--brand-dark);margin-bottom:14px}
.contact-card .big{display:inline-block;font:600 26px/1.2 var(--head);color:var(--ink);text-decoration:none;margin-bottom:14px;overflow-wrap:anywhere}
.contact-card .big.mail{font-size:20px;overflow-wrap:normal}
.nb{white-space:nowrap}
.contact-card .big:hover{color:var(--brand)}
.contact-card address{font-style:normal;color:var(--ink);font-weight:500;margin-bottom:14px}
.contact-card p{margin:0;color:var(--muted);font-size:16px}
.hero h1{font-size:clamp(34px,4.1vw,52px);line-height:1.08}
/* Stimme: Fließtext in Ich-Form */
.voice{max-width:780px}
.voice p{font-size:19px;line-height:1.7;margin:0 0 18px;color:var(--text)}
.voice q{font-style:italic;color:var(--ink)}
.voice q::before{content:"„"}.voice q::after{content:"“"}
.voice .strong{font-family:var(--head);font-weight:500;font-size:21px;color:var(--ink);border-left:3px solid var(--brand);padding-left:20px;margin-top:28px}
.more-link{margin-top:28px}
.stats.three{grid-template-columns:repeat(3,1fr);margin-bottom:8px}
.pull{margin:36px 0;padding:0 0 0 24px;border-left:3px solid var(--brand);max-width:760px}
.pull blockquote{margin:0;font:500 clamp(22px,2.4vw,28px)/1.35 var(--head);color:var(--ink)}
.pull figcaption{margin-top:10px;font-size:15px;color:var(--muted)}
#was-bremst h3,section h3.reveal{margin-top:8px}
@media (max-width:900px){.stats.three{grid-template-columns:1fr}}
/* Rechtstexte und Sitemap */
.page-hero.slim{padding:clamp(32px,4vw,56px) 0}
.page-hero.slim .wrap{grid-template-columns:1fr}
.prose>h2,.prose>p,.prose>ul{max-width:820px}
.prose h2{font-size:24px;margin:36px 0 10px}
.prose h2:first-child{margin-top:0}
.prose p,.prose ul{margin:0 0 14px}
.prose ul{padding-left:22px}
.prose li{margin-bottom:6px}
mark.todo{background:#fff3b0;color:#5a4500;padding:1px 6px;font-size:15px;font-weight:600}
.sitemap{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
.sitemap h2{font-size:20px;margin:0 0 10px}
.sitemap ul{list-style:none;padding:0;margin:0}
@media (max-width:900px){.sitemap{grid-template-columns:1fr}}
/* Leistungsseiten */
.quals.pains li::before{background:transparent;border:2px solid var(--muted);width:12px;height:12px;box-sizing:border-box}
.gainbox{background:var(--sand);padding:clamp(24px,3vw,40px);border-left:3px solid var(--brand)}
.gainbox .quals li,.quals.pains li{font-size:18px}
.steps.four{grid-template-columns:repeat(4,1fr)}
a.why-card.tile{display:flex;flex-direction:column;text-decoration:none;color:inherit}
a.why-card.tile h3{margin-top:0}
.tile .more{margin-top:auto;padding-top:16px;font:600 15px var(--head);color:var(--brand-dark)}
.points{margin:0;padding:0;list-style:none;counter-reset:p;display:grid;grid-template-columns:repeat(3,1fr);gap:20px 32px}
.points li{counter-increment:p;position:relative;padding:18px 20px 18px 62px;background:#fff;border:1px solid var(--line);font-size:17px}
.points li::before{content:counter(p);position:absolute;left:20px;top:14px;font:700 26px/1.2 var(--head);color:var(--brand)}
.points strong{color:var(--ink)}
.h-small{font-size:22px}
.related{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.related .chip{text-decoration:none;background:#fff}
.related .chip:hover{border-color:var(--brand);color:var(--brand-dark)}
@media (max-width:1100px){.steps.four{grid-template-columns:repeat(2,1fr)}.points{grid-template-columns:repeat(2,1fr)}}
@media (max-width:900px){.steps.four,.points{grid-template-columns:1fr}}
/* Über mich: Nutzen zuerst */
.why.four{grid-template-columns:repeat(2,1fr)}
.lesson.first{margin:12px 0 16px;background:var(--sand);box-shadow:none;border-left:3px solid var(--brand)}
@media (max-width:900px){.why.four{grid-template-columns:1fr}.quotes-wall{display:flex;flex-direction:column}.quotes-col{display:contents}.o1{order:1}.o2{order:2}.o3{order:3}.o4{order:4}.o5{order:5}.o6{order:6}.o7{order:7}.o8{order:8}.o9{order:9}.o10{order:10}.o11{order:11}.o12{order:12}.o13{order:13}.o14{order:14}.contact-cards{grid-template-columns:1fr}}

/* Helle Variante für Kontaktkasten und Fußbereich (22.10.2026, Grauton --mist aus der Palette) */
.cta{background:var(--mist);color:var(--text)}
.cta h2{color:var(--ink)}
.cta a:not(.btn){color:var(--ink)}
.cta .btn-light{background:var(--brand);color:#fff;border-color:var(--brand)}
.cta .btn-light:hover{background:var(--brand-dark);border-color:var(--brand-dark);color:#fff}
.site-footer{background:var(--mist);color:var(--muted);border-top:1px solid var(--line)}
.site-footer .cols{border-bottom-color:var(--line)}
.site-footer h3{color:var(--ink)}
.site-footer a{color:var(--ink)}
.site-footer a:hover{color:var(--brand-dark)}

/* Hero: Foto im Text, editorial */
.hero{position:relative;padding:clamp(48px,7vw,104px) 0 clamp(64px,8vw,112px)}
.hero .wrap{display:block;position:relative}
.hero .eyebrow{display:block;margin-bottom:22px}
.hero .eyebrow::before,.hero .eyebrow .sep{content:"";display:inline-block;width:3px;height:1.25em;background:var(--brand);vertical-align:-.28em}
.hero .eyebrow::before{margin-right:14px}
.hero .eyebrow .sep{margin:0 12px}
.hero h1{font-size:clamp(34px,5vw,64px);line-height:1.06;max-width:960px}
.hero h1 em{display:block;margin-top:.45em;font-size:.56em;line-height:1.25;font-weight:500;color:var(--brand);padding-left:20px;border-left:3px solid var(--brand);max-width:34ch}
.hero-photo{position:relative;float:right;width:clamp(280px,38%,440px);margin:0 0 28px clamp(28px,4vw,56px)}
.hero-photo img{position:relative;z-index:1;display:block;width:100%;height:auto;border:5px solid #fff;box-shadow:var(--shadow-lg)}
.hero .lead{margin:32px 0 0;max-width:none}
.hero .lead{text-align:justify;-webkit-hyphens:auto;hyphens:auto}
.hero .cta-row{clear:both}
.hero .trust{clear:both;margin-top:40px;padding-top:24px;border-top:1px solid rgba(30,34,38,.2)}
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){.hero .eyebrow,.hero h1,.hero-photo,.hero .lead,.hero .cta-row,.hero .trust{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}.hero h1{animation-delay:.08s}.hero-photo{animation-delay:.2s}.hero .lead{animation-delay:.25s}.hero .cta-row{animation-delay:.35s}.hero .trust{animation-delay:.45s}}
@media (max-width:720px){.hero .wrap>div{display:flex;flex-direction:column;align-items:flex-start}.hero-photo{order:1}.hero .lead{order:2}.hero .cta-row{order:3}.hero .trust{order:4}.hero .eyebrow{letter-spacing:.1em;font-size:13px}.hero-photo{float:none;width:min(100%,340px);margin:28px 0 32px}.hero h1 em{padding-left:14px;border-left-width:3px;max-width:none}.hero .lead{margin-top:0}}

/* Startseite: engere Abstände */
.home section{padding:clamp(36px,5vw,64px) 0}
.home .hero{padding:clamp(28px,4vw,52px) 0 clamp(36px,4.5vw,56px)}
.home .sec-head{margin-bottom:28px}
.home .hero .eyebrow{margin-bottom:16px}
.home .hero .lead{margin-top:22px}
.home .hero h1 em{margin-top:.35em}
.home .hero-photo{margin-bottom:12px}
.home .hero .trust{margin-top:24px;padding-top:18px}
.home .stats{gap:20px}
.home .pull{margin:0}
.home .tabs-note{margin-top:20px}

/* Navigation: Erstkontakt in Rot, Hover-Effekt fuer die Unternavigation */
.nav .sub{border-top:3px solid var(--brand)}
.nav .sub a{position:relative;transition:background .2s,color .2s,padding-left .2s,box-shadow .2s}
.nav .sub a:hover,.nav .sub a:focus-visible{background:var(--mist);color:var(--brand);padding-left:16px;box-shadow:inset 3px 0 0 var(--brand)}
.nav li.has-sub:hover>a{color:var(--brand)}
@media (max-width:900px){.nav .sub{min-width:0}.nav li:last-child .sub,.nav li:nth-last-child(2) .sub,.nav li:nth-child(3) .sub{left:auto;right:0}}
.nav .sub{z-index:30}
.nav li:hover{z-index:31}
/* Hover-Dropdown (Maus): Die Hauptpunkte stehen waagerecht, beim Überfahren klappt das Untermenü senkrecht darunter auf und legt sich über den Seiteninhalt. Die unsichtbare Brücke schließt die Lücke zwischen Hauptpunkt und Dropdown, damit das Menü beim Hinüberfahren nicht zuklappt. Gilt bei jeder Fensterbreite. */
.nav .sub::before{content:"";position:absolute;left:0;right:0;top:-10px;height:10px}
@media (max-width:900px) and (hover:hover){.nav>ul{align-items:flex-start}.nav .sub{width:max-content;max-width:calc(100vw - 32px)}}
/* Nur Geräte ohne Hover (Touch): Hauptpunkte nebeneinander, kein Hover. Der Tipp lädt die Seite, das Dropdown des aktuellen Bereichs steht dort sofort offen, senkrecht unter dem Hauptpunkt. Der Platz dafür wird in der Navigation freigehalten, damit nichts verdeckt wird. */
@media (hover:none){
.nav>ul{flex-direction:row;flex-wrap:wrap;align-items:flex-start;gap:0 2px}
.nav a:hover{background:transparent}
.nav li.has-sub:hover>a{color:var(--ink)}
.nav .sub,.nav li:hover>.sub,.nav li:focus-within>.sub{opacity:0;visibility:hidden;transform:translateY(-6px)}
.nav li.has-sub:has(>.sub>li:first-child>a[aria-current="page"]){margin-bottom:214px}
.nav li.has-sub:has(>.sub>li:first-child>a[aria-current="page"]):has(>.sub li:nth-child(5)){margin-bottom:348px}
.nav li.has-sub:has(>.sub>li:first-child>a[aria-current="page"])>.sub{opacity:1;visibility:visible;transform:none;top:calc(100% + 6px);left:0;right:auto;min-width:0;width:max-content;max-width:calc(100vw - 32px)}
.nav>ul>li:nth-child(n+2)>.sub,.nav>ul>li:nth-child(n+2):has(>.sub>li:first-child>a[aria-current="page"])>.sub{left:auto;right:0}
.nav li.has-sub:has(>.sub>li:first-child>a[aria-current="page"])>.sub a{padding:10px 14px 10px 16px;font-size:15px;white-space:nowrap}
.nav a[aria-current="page"],.nav li.has-sub:hover>a[aria-current="page"]{color:var(--brand)}
}

/* Seitenkopf mit Foto auch auf Hinweis- und Rechtsseiten (kompakt) */
@media (min-width:901px){.page-hero.compact .wrap{grid-template-columns:1fr 180px}}
.page-hero.compact .blob{max-width:180px}
@media (max-width:900px){.page-hero.compact .blob{max-width:140px}}

/* Kurze rote Trennstriche zwischen den Navigationspunkten */
.nav>ul>li:not(:last-child)::after{content:"";position:absolute;right:-1px;top:50%;width:3px;height:16px;margin-top:-8px;background:var(--brand);pointer-events:none}

/* two-col-stack: untereinander stehende Spalten naeher zusammen */
@media (max-width:900px){.two-col{row-gap:12px}.two-col>.reveal>p:last-child{margin-bottom:0}.two-col>.reveal>.quals:first-child{margin-top:0}}

/* Spalten immer untereinander */
.two-col.stack{grid-template-columns:1fr;row-gap:12px}
.two-col.stack>.reveal>p:last-child{margin-bottom:0}
.two-col.stack>.reveal>.quals:first-child{margin-top:0}
.quals.two-col{display:block;column-count:2;column-gap:clamp(32px,5vw,64px)}
.quals.two-col li{break-inside:avoid;margin-bottom:14px}
.quals.two-col li:last-child{margin-bottom:0}
@media (max-width:900px){.quals.two-col{column-count:1}}
/* Seitenkopf: Anthrazit, Rot, Grau */
.page-hero h1{color:var(--ink);border-left:4px solid var(--brand);padding-left:18px}
.page-hero .eyebrow{color:var(--brand)}
.page-hero .lead{color:var(--muted)}
/* Kompaktere Abstände zwischen den Bereichen */
section,.home section{padding:clamp(24px,3.5vw,40px) 0}
.cta-wrap{margin-top:clamp(16px,2.5vw,28px)}
.cta-wrap + .site-footer{margin-top:clamp(24px,3.5vw,40px)}
/* Einheitlicher Abstand Zahl zu Überschrift in den Karten */
.why-card .num{display:block;line-height:1;margin:0 0 14px}
.why-card h3,a.why-card.tile h3{margin-top:0}
/* Unvollständige Überschriften: drei rote Punkte */
.ell::after{content:"...";content:"..." / "";color:var(--brand);margin-left:.08em;letter-spacing:.02em}
/* Navigation: größere Schrift */
.nav a{font-size:17px}
.nav .sub a{font-size:16px}
@media (max-width:1180px){.nav a{font-size:16px}}
@media (max-width:900px){.nav a{font-size:15px}}
.why + .gainbox{margin-top:24px}

.page-hero.compact.no-photo .wrap{grid-template-columns:1fr}

.li-icon{display:block;width:28px;height:28px}
.site-footer a:hover .li-icon,.site-footer a:focus-visible .li-icon{opacity:.8}

/* Startseite Hero: Grauverlauf */
.hero{background:linear-gradient(125deg,#f5f5f5 0%,#e6e7e8 50%,#d4d6d8 100%)}
/* Startseite Hero: Überschrift dunkelgrau (Unterzeile bleibt rot) */
.hero h1{color:#44484d}
/* Startseite Hero: Zeile über der Überschrift im gleichen Rot wie die Unterzeile */
.hero .eyebrow{color:var(--brand)}
/* Alle cremefarbenen Hintergründe in Grau */
:root{--sand:#eaebec;--grad:linear-gradient(125deg,#f5f5f5 0%,#e6e7e8 50%,#d4d6d8 100%)}
/* Alle Seiten: Hauptüberschrift dunkelgrau */
h1{color:#44484d}
/* Alle Seiten: Hauptüberschrift dunkelgrau, auch in den Seitenköpfen */
.page-hero h1,.hero h1,h1{color:#44484d}
/* Alle Seiten: Zwischenüberschriften (H2) im gleichen Dunkelgrau */
h2,.cta h2,.sec-head h2{color:#44484d}
/* Alle Fotos: weißer Rand */
.blob{border:5px solid #fff;box-shadow:var(--shadow-lg)}
@media (max-width:480px){.blob{border-width:4px}}
/* Fotorand dünner */
.blob,.hero-visual .blob,.hero-photo img{border-width:3px}
@media (max-width:480px){.blob,.hero-visual .blob,.hero-photo img{border-width:2px}}

.page-hero.about-hero .wrap{gap:clamp(20px,3vw,40px)}
.page-hero.about-hero .lead{margin-bottom:0}
.page-hero.about-hero .note{margin:12px 0 0}
.nav .sub a[aria-current="page"]{color:var(--brand);font-weight:600}

/* Touch: Beim Lesen (Scrollen) schließt sich das Untermenü, der Platz oben wird frei. Ganz oben ist es wieder offen. */
@media (hover:none){
html.sub-closed .nav li.has-sub:has(>.sub>li:first-child>a[aria-current="page"]){margin-bottom:0}
html.sub-closed .nav li.has-sub:has(>.sub>li:first-child>a[aria-current="page"]):has(>.sub li:nth-child(5)){margin-bottom:0}
html.sub-closed .nav li.has-sub:has(>.sub>li:first-child>a[aria-current="page"])>.sub{opacity:0;visibility:hidden;transform:translateY(-6px);pointer-events:none}
}

/* Mobil: Rasterkinder dürfen schmaler werden als ihr längstes Wort, lange Wörter in Überschriften umbrechen statt die Seite zu verbreitern */
.hero .wrap>*,.about>*,.page-hero .wrap>*,.two-col>*,.cta>*,.panel>*{min-width:0}
h1,h2,h3{overflow-wrap:break-word}
@media (max-width:480px){.page-hero h1{font-size:clamp(28px,8vw,32px);hyphens:auto}}
@media (max-width:480px){
.factbox{padding:22px 18px}
.factbox dl{grid-template-columns:1fr;gap:2px 0}
.factbox dd{margin-bottom:10px;overflow-wrap:break-word}
.prices th,.prices td{padding:16px 14px}
.prices th{letter-spacing:.05em;font-size:13px}
}

/* Barrierefreiheit: Kleiner roter Text (Eyebrow) auf getönten Heldenflächen in dunklerem Rot, damit der Kontrast mindestens 4,5:1 erreicht. */
.eyebrow,.hero .eyebrow,.page-hero .eyebrow{color:var(--brand-dark)}
/* Größere Tippflächen für Links im Footer (mind. 24 px) */
.site-footer a{display:inline-block;padding:3px 0}
.site-footer .legal a{padding:4px 2px}