/* ============================================================
   biometric underwriting · Design-System
   Farbwelt aus der Live-CI: Petrol, Koralle, Mint (13.09.2026)
   Inhalte/Zahlen/Quellen: wortgenau geschützt (Marlon-README)
   ============================================================ */
:root{
  --petrol:#2F525D;        /* Marke: Headlines, Nav, Footer */
  --petrol-tief:#243F48;   /* Hover, Footer-Verlauf */
  --text:#3A5560;          /* Fließtext, petrolstichig */
  --muted:#5F7B85;
  --light:#8EA7AF;
  --koralle:#E44753;       /* CTAs + Kostenzahlen */
  --koralle-tief:#C9333F;
  --koralle-soft:#FCEBEC;
  --mint:#D5FCDC;          /* Lösungs-/Positivflächen */
  --mint-soft:#EDFDF1;
  --petrol-hauch:#E7EFF2;   /* helle Petrol-Flaeche (ersetzt Mint) */
  --gruen:#1B7A45;         /* Häkchen, Bestätigung */
  --surface:#F2F7F8;       /* ruhige Wechselflächen */
  --bg:#FFFFFF;
  --border:#DCE6E9;
  --radius:14px;
  --schatten:0 10px 30px rgba(47,82,93,.08);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--text);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;font-size:16px}
img{max-width:100%;display:block}
.container{max-width:1080px;margin:0 auto;padding:0 28px}
.container--eng{max-width:920px}
section{padding:76px 0}
section.surface{background:var(--surface)}
section.mint{background:var(--petrol-hauch)}
section.petrol{background:linear-gradient(160deg,var(--petrol) 0%,var(--petrol-tief) 100%);color:#fff}

h1,h2,h3{color:var(--petrol);font-weight:700;text-wrap:balance}
h1{font-size:clamp(34px,4.8vw,50px);line-height:1.1;letter-spacing:-.9px}
h2{font-size:clamp(25px,3.2vw,32px);line-height:1.22;letter-spacing:-.5px}
h3{font-size:19px;line-height:1.35;font-weight:650}
p{color:var(--text)}
.lead{font-size:17px;color:var(--muted)}
.eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--koralle);margin-bottom:14px}
.eyebrow--hell{color:var(--light)}
b,strong{color:var(--petrol);font-weight:650}

/* Buttons */
.btn{display:inline-block;background:var(--koralle);color:#fff;padding:14px 28px;border-radius:10px;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;border:none;font-family:inherit;transition:background .15s,transform .15s}
@media(hover:hover){.btn:hover{background:var(--koralle-tief);transform:translateY(-1px)}}
.btn-ghost{display:inline-block;background:transparent;color:var(--petrol);padding:13px 26px;border-radius:10px;font-size:15px;font-weight:600;text-decoration:none;cursor:pointer;border:1.5px solid var(--petrol);font-family:inherit;transition:background .15s,color .15s}
@media(hover:hover){.btn-ghost:hover{background:var(--petrol);color:#fff}}
.btn-outline-koralle{display:inline-block;background:transparent;color:var(--koralle);padding:11px 20px;border-radius:10px;font-size:14px;font-weight:700;text-decoration:none;border:1.5px solid var(--koralle);transition:background .15s,color .15s}
@media(hover:hover){.btn-outline-koralle:hover,.nav-links a.btn-outline-koralle:hover{background:var(--koralle);color:#fff}}

/* Navigation */
nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav-inner{max-width:1080px;margin:0 auto;padding:16px 28px;display:flex;align-items:center;justify-content:space-between;gap:20px}
.nav-logo img{height:34px;width:auto}
.nav-links{display:flex;gap:26px;align-items:center;font-size:14.5px}
.nav-links a{color:var(--petrol);text-decoration:none;font-weight:550}
@media(hover:hover){.nav-links a:hover{color:var(--koralle)}}
.nav-links a.aktiv{color:var(--koralle);font-weight:650}
.nav-burger{display:none;background:none;border:none;cursor:pointer;padding:8px;flex-direction:column;gap:5px}
.nav-burger span{display:block;width:24px;height:2.5px;background:var(--petrol);border-radius:2px;transition:transform .2s,opacity .2s}

/* Hero */
.hero{padding:72px 0 64px;background:linear-gradient(180deg,var(--surface) 0%,var(--bg) 100%)}
.hero-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}
.hero .sub{font-size:18px;color:var(--muted);margin:22px 0 30px;max-width:560px}
.hero .ctas{display:flex;gap:14px;flex-wrap:wrap}
.hero-bild{position:relative;z-index:0}
.hero-bild img{border-radius:20px;box-shadow:var(--schatten);width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
.hero-bild::before{content:"";position:absolute;inset:auto -26px -26px auto;width:62%;height:62%;background:var(--petrol-hauch);border-radius:20px;z-index:-1}

/* Statbar */
.statband{background:linear-gradient(160deg,var(--petrol) 0%,var(--petrol-tief) 100%);padding:40px 0 22px}
.statbar{max-width:1080px;margin:0 auto;padding:0 28px;display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.statbar>div{padding:6px 22px;text-align:left;border-left:2px solid var(--koralle)}
.statbar .num{font-size:26px;font-weight:750;letter-spacing:-.5px;color:#fff;overflow-wrap:anywhere}
.statbar .lbl{font-size:12.5px;color:rgba(255,255,255,.68);margin-top:6px;line-height:1.5}
.srcnote{max-width:1080px;margin:26px auto 0;padding:14px 28px 0;border-top:1px solid rgba(255,255,255,.14);text-align:left;font-size:11px;color:rgba(255,255,255,.45)}

/* Karten */
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:30px}
.quad{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:30px}
.card{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:24px}
.card--surface{background:var(--surface);border-color:transparent}
.card--warn{background:var(--koralle-soft);border-color:transparent}
.card--warn .t,.card--warn .d{color:var(--koralle-tief)}
.card .t{font-weight:650;font-size:15px;color:var(--petrol);margin-bottom:8px}
.card .d{font-size:14px;color:var(--muted);line-height:1.7}
.card .big{font-size:26px;font-weight:750;letter-spacing:-.5px;color:var(--koralle);margin-bottom:8px}
.kv{font-size:21px;font-weight:750;color:var(--koralle);letter-spacing:-.4px;margin-bottom:6px}
.kd{font-size:13.5px;color:var(--muted);line-height:1.65}
.hl{font-size:12.5px;font-weight:700;color:var(--petrol);text-transform:uppercase;letter-spacing:.8px;padding-bottom:8px;margin-bottom:10px;border-bottom:1px solid var(--border)}
.note{font-size:12px;color:var(--light);margin-top:16px;line-height:1.7}

/* Lösungs-Bausteine */
.bcard{background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);padding:30px}
.bcard .badge{display:inline-block;background:var(--petrol);color:#fff;font-size:11px;font-weight:650;letter-spacing:.6px;text-transform:uppercase;padding:4px 12px;border-radius:20px;margin-bottom:14px}
.bcard .bt{font-size:19px;font-weight:700;color:var(--petrol);line-height:1.35;margin-bottom:6px}
.bcard .blead{font-size:14px;color:var(--muted);margin-bottom:16px}
.bcard .fact{display:flex;gap:10px;align-items:flex-start;padding:9px 0;border-top:1px solid var(--border);font-size:14.5px;color:var(--text)}
.bcard .fact span{color:var(--gruen);font-weight:750;flex-shrink:0}

/* Rechner */
.calc{background:var(--bg);border:1px solid var(--border);border-radius:18px;padding:38px;margin-top:30px;box-shadow:var(--schatten)}
.slider-row{display:flex;align-items:center;gap:18px;margin-bottom:20px}
.slider-row label{font-size:14px;color:var(--muted);width:210px;flex-shrink:0}
.slider-row output{font-size:16px;font-weight:650;color:var(--petrol);min-width:92px;text-align:right;font-variant-numeric:tabular-nums}
input[type=range]{flex:1;accent-color:var(--petrol);height:5px}
.stellen-row{display:flex;align-items:center;gap:12px;margin:4px 0 24px;font-size:14px;color:var(--muted);flex-wrap:wrap}
.stepper{display:inline-flex;align-items:stretch;border:1px solid var(--border);border-radius:10px;background:var(--bg);overflow:hidden}
.stepper .step-btn{width:38px;border:none;background:var(--surface);color:var(--petrol);font-size:18px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s,color .15s;line-height:1}
@media(hover:hover){.stepper .step-btn:hover{background:var(--petrol);color:#fff}}
.stepper input{width:60px;padding:9px 6px;border:none;font-size:15px;font-weight:600;font-family:inherit;background:var(--bg);text-align:center;color:var(--petrol);-moz-appearance:textfield;appearance:textfield}
.stepper input::-webkit-outer-spin-button,.stepper input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.stepper input:focus{outline:none;background:var(--surface)}
.rblocks{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:26px 0 0}
.rblocks .box{background:var(--surface);border-radius:10px;padding:16px}
.rblocks .lbl{font-size:12px;color:var(--muted);margin-bottom:5px}
.rblocks .val{font-size:20px;font-weight:750;letter-spacing:-.4px;color:var(--koralle);font-variant-numeric:tabular-nums}
.rblocks .form{font-size:11px;color:var(--light);margin-top:6px;line-height:1.5}
.rsum{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.rsum .box{background:var(--koralle-soft);border:1.5px solid var(--koralle);border-radius:10px;padding:18px}
.rsum .lbl{font-size:12px;color:var(--muted);margin-bottom:5px}
.rsum .val{font-size:26px;font-weight:750;letter-spacing:-.5px;color:var(--koralle);font-variant-numeric:tabular-nums}
.annahmen{background:var(--surface);border-radius:10px;padding:14px 20px;margin-top:14px}
.annahmen summary.t{cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:12px}
.annahmen summary.t::-webkit-details-marker{display:none}
.annahmen summary.t::after{content:"+";font-size:17px;font-weight:600;color:var(--muted);transition:transform .3s ease}
.annahmen[open] summary.t::after{transform:rotate(45deg)}
.annahmen-huelle{display:grid;grid-template-rows:1fr}
.annahmen-inhalt{overflow:hidden;min-height:0}
.annahmen-inhalt>:first-child{margin-top:8px}
html.js .annahmen-huelle{grid-template-rows:0fr;transition:grid-template-rows .4s ease}
html.js .annahmen.offen .annahmen-huelle{grid-template-rows:1fr}
.annahmen .t{font-size:13px;font-weight:650;color:var(--petrol)}
.annahmen .a{font-size:12.5px;color:var(--muted);padding:2px 0;line-height:1.6}
.kleinbox{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:26px;margin-top:24px;display:none}
.kleinbox .t{font-weight:650;color:var(--petrol);margin-bottom:8px;font-size:16px}
.kleinbox p{font-size:14.5px}

/* CTA-Bänder */
.ctaband{background:linear-gradient(160deg,var(--petrol) 0%,var(--petrol-tief) 100%);border-radius:var(--radius);padding:26px 30px;margin-top:26px;display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}
.ctaband .t{font-size:17px;font-weight:650;color:#fff}
.ctaband .s{font-size:13.5px;color:rgba(255,255,255,.72);margin-top:2px}
.hinweisband{margin-top:30px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px 26px;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.hinweisband .txt{font-size:15px;max-width:640px}

/* Analyse-Produkt (PDF-Mockup) */
.product{display:grid;grid-template-columns:280px 1fr;gap:44px;align-items:center;margin-top:32px}
.pdf{background:var(--petrol);border-radius:var(--radius);padding:30px;display:flex;justify-content:center}
.pdf .doc{background:var(--bg);border-radius:8px;width:200px;padding:20px 18px;box-shadow:0 14px 34px rgba(16,24,40,.28)}
.pdf .brand{font-size:10px;font-weight:750;letter-spacing:1.2px;color:var(--light);margin-bottom:10px}
.pdf .titel{font-size:14px;font-weight:650;color:var(--petrol);line-height:1.35}
.pdf .firm{font-size:12px;color:var(--muted);font-weight:500;margin:2px 0 16px}
.pdf .line{height:5px;background:var(--surface);border-radius:3px;margin-bottom:6px}
.pdf .gross{font-size:20px;font-weight:750;margin-top:14px;color:var(--koralle)}
.pdf .cap{font-size:10px;color:var(--muted)}
.pdf .eck{font-size:10px;color:var(--muted);margin-top:8px;line-height:1.5}
.checks{margin:14px 0 18px}
.checks div{font-size:15px;padding:5px 0 5px 26px;color:var(--text);position:relative}
.checks span{color:var(--gruen);font-weight:750;position:absolute;left:0}

/* Zielgruppen-Wahl */
.wahl .card{display:flex;flex-direction:column;transition:box-shadow .15s,transform .15s}
@media(hover:hover){.wahl .card:hover{box-shadow:var(--schatten);transform:translateY(-2px)}}
.wahl .card .d{flex:1}
.wahl .card a{align-self:flex-start;margin-top:16px}

/* Final + Footer */
.final{text-align:center}
.final h2,.final p{color:#fff}
.final p{max-width:560px;margin:14px auto 30px;opacity:.85}
footer{background:var(--petrol-tief);color:rgba(255,255,255,.8);padding:46px 28px 36px;font-size:13.5px}
footer .cols{max-width:1080px;margin:0 auto;display:flex;justify-content:space-between;flex-wrap:wrap;gap:26px}
footer b{color:#fff;font-weight:650}
footer a{color:rgba(255,255,255,.8);text-decoration:none}
@media(hover:hover){footer a:hover{color:#fff}}
footer .legal{max-width:1080px;margin:24px auto 0;padding-top:18px;border-top:1px solid rgba(255,255,255,.16);font-size:11.5px;color:rgba(255,255,255,.55);line-height:1.7}

/* Anker unter Sticky-Nav */
[id]{scroll-margin-top:86px}

/* Mobile */
@media(max-width:880px){
  section{padding:56px 0}
  .hero{padding:44px 0 48px}
  .hero-grid{grid-template-columns:1fr;gap:36px}
  .hero-bild{max-width:420px}
  .statbar{grid-template-columns:1fr 1fr;gap:22px 0}
  .split,.product{grid-template-columns:1fr}
  .trio{grid-template-columns:1fr}
  .quad{grid-template-columns:1fr 1fr}
  .rblocks{grid-template-columns:1fr 1fr}
  .rsum{grid-template-columns:1fr}
  .slider-row{flex-wrap:wrap}
  .slider-row label{width:100%}
  .nav-links{display:none;position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--border);flex-direction:column;align-items:flex-start;gap:0;padding:10px 28px 18px;box-shadow:0 18px 30px rgba(47,82,93,.12)}
  .nav-links.offen{display:flex}
  .nav-links{max-height:calc(100vh - 67px);max-height:calc(100dvh - 67px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch} /* Mobile-Audit G-01: Querformat, Menue scrollt intern */
  .nav-links a{padding:11px 0;font-size:16px;width:100%}
  .nav-links a.btn-outline-koralle{text-align:center;margin-top:10px;padding:12px 20px}
  .nav-burger{display:flex}
  .nav-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
  .nav-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
  .nav-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
}
@media(max-width:520px){
  .quad{grid-template-columns:1fr}
  .rblocks{grid-template-columns:1fr}
  .rsum .val{font-size:21px;-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
  .statband .statbar{grid-template-columns:1fr;gap:16px 0}
  .hero-grid>*{min-width:0}
  h1{-webkit-hyphens:auto;hyphens:auto;overflow-wrap:break-word}
}

/* Kompaktes Fussband der Formularseiten (Quell-Wortlaut) */
footer.foot-kompakt{display:flex;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:11.5px;color:rgba(255,255,255,.6);padding:22px 28px}

/* Icon-Badges (Variante B: zweifarbig gefuellt) */
.ibadge{width:44px;height:44px;border-radius:12px;background:var(--petrol-hauch);display:flex;align-items:center;justify-content:center;margin-bottom:12px;flex-shrink:0}
.ibadge svg{width:24px;height:24px;display:block}
.ibadge--hell{background:rgba(255,255,255,.12);width:38px;height:38px;border-radius:10px}
.ibadge--hell svg{width:20px;height:20px}
.statbar--icons>div{display:flex;gap:14px;align-items:flex-start}
.statbar--icons>div>div{min-width:0}
.statbar .lbl{hyphens:auto}
.statbar .ibadge--hell{margin:3px 0 0}
.bcard .ibadge{margin-bottom:10px}
.fotoband{margin-top:28px}
.fotoband img{width:100%;height:auto;border-radius:16px;display:block;box-shadow:var(--schatten)}

/* Loesungs-Sektion: Beratungsfoto als Hintergrund hinter Petrol-Overlay */
section.loesung-foto{background:linear-gradient(160deg,rgba(36,63,72,.93) 0%,rgba(47,82,93,.88) 100%),url(../images/beratungsgespraech.webp) center 30%/cover no-repeat}
.loesung-foto h2{color:#fff}
.loesung-foto>.container>p{color:rgba(255,255,255,.88)}
.loesung-foto .note{color:rgba(255,255,255,.72)}
.loesung-foto .bcard{border-color:transparent;box-shadow:0 18px 44px rgba(21,38,44,.28)}

/* Zielgruppen-Wahl kompakt (nach der Problem-Sektion) */
section.wahl-kompakt{padding:52px 0}
.wahl-kompakt .trio{margin-top:20px;gap:14px}
.wahl-kompakt .card .d{font-size:13px;line-height:1.6;margin:6px 0 12px}
.wahl-kompakt .ibadge{width:38px;height:38px;margin-bottom:10px}
.wahl-kompakt .ibadge svg{width:20px;height:20px}

/* Analyse-Sektion kompakt (direkt nach dem Rechner) */
section.analyse-kompakt{padding:52px 0}
.analyse-kompakt .product{margin-top:24px;gap:36px}
.analyse-kompakt .pdf{padding:22px}
.analyse-kompakt .checks div{font-size:14px}
@media(min-width:881px){.analyse-kompakt .product{grid-template-columns:250px 1fr}}

/* Dunkle Dropdown-Variante fuer farbige Sektionen */
.annahmen--dunkel{background:rgba(255,255,255,.10)}
.annahmen--dunkel summary.t{color:#fff}
.annahmen--dunkel summary.t::after{color:rgba(255,255,255,.75)}
.annahmen--dunkel summary.t a{color:#fff;font-weight:650;text-decoration:underline;text-underline-offset:3px}
@media(hover:hover){.annahmen--dunkel summary.t a:hover{color:var(--koralle-soft,#F4B6BB)}}
.annahmen--dunkel .a{color:rgba(255,255,255,.82)}

/* Belebung: Scroll-Reveal (Klassen setzt das Skript, ohne JS bleibt alles sichtbar) */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .55s ease var(--rd,0s),transform .55s ease var(--rd,0s)}
.reveal.da{opacity:1;transform:none}
@media(max-width:880px){.calc.reveal{opacity:1;transform:none;transition:none}} /* Mobile-Audit G-04: hoher Rechner mobil sofort sichtbar */

/* Kostenkacheln: Hover-Akkordeon (nur Desktop, nur mit JS) */
@media(min-width:881px){
  html.js .kacheln{display:flex;gap:16px}
  html.js .kacheln .card{flex:1 1 0;min-width:0;padding-bottom:36px;transition:flex-grow .55s cubic-bezier(.3,.7,.25,1),border-color .3s,box-shadow .3s,opacity .55s ease var(--rd,0s),transform .55s ease var(--rd,0s)}
  html.js .kacheln .card .kv{hyphens:auto;font-size:18px}
  html.js .kacheln .card.aktiv{flex-grow:2.6;border-color:#C9D9DE;box-shadow:var(--schatten)}
  html.js .kacheln .kd{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows .55s cubic-bezier(.3,.7,.25,1),opacity .3s ease}
  html.js .kacheln .kd>div{overflow:hidden;min-height:0}
  html.js .kacheln .card.aktiv .kd{grid-template-rows:1fr;opacity:1;transition:grid-template-rows .55s cubic-bezier(.3,.7,.25,1),opacity .45s ease .15s}
  /* Schein-Textzeilen in eingeklappten Kacheln (Optik wie .pdf .line im Analyse-Mock) */
  html.js .kacheln .kd-schein{display:grid;grid-template-rows:1fr;opacity:1;transition:grid-template-rows .55s cubic-bezier(.3,.7,.25,1),opacity .3s ease}
  html.js .kacheln .kd-schein>div{overflow:hidden;min-height:0}
  html.js .kacheln .kd-schein i{display:block;height:5px;border-radius:3px;background:var(--surface);margin-top:9px}
  html.js .kacheln .kd-schein>div>i:first-child{margin-top:12px}
  html.js .kacheln .card.aktiv .kd-schein{grid-template-rows:0fr;opacity:0}
  html.js .kacheln.messe .card,html.js .kacheln.messe .kd,html.js .kacheln.messe .kd-schein,html.js .kacheln.messe .ladebalken{transition:none!important}
}
.kd-schein{display:none}
.kacheln .card{position:relative}
.ladebalken{position:absolute;left:18px;right:18px;bottom:14px;height:3px;border-radius:2px;background:var(--petrol-hauch);opacity:0;transition:opacity .3s ease;pointer-events:none}
html.js .kacheln .card.aktiv .ladebalken{opacity:1}
.ladebalken span{display:block;height:100%;width:100%;border-radius:2px;background:var(--koralle);transform:scaleX(0);transform-origin:left}
.kacheln .card{outline:none}
.kacheln .card:focus-visible{border-color:var(--petrol);box-shadow:0 0 0 3px rgba(47,82,93,.25)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1;transform:none;transition:none}
  .ladebalken{display:none}
  html.js .kacheln .card,html.js .kacheln .kd,html.js .annahmen-huelle,.annahmen summary.t::after{transition:none!important}
}

/* ============================================================
   Grundlagen-Runde 26.09.2026 (Marlon-Feedback, additiv)
   Statband einzeilig · Vergleichs-Karten · Vertrauensband · Kontakt-Karte
   Zeilenangleich („in eine Reihe") macht js/belebung.js, Teil 4.
   ============================================================ */

/* Statband: Zahlen brechen nicht um. Die Schriftgroesse folgt der Spaltenbreite (Container-Einheit cqi),
   ausgelegt auf die laengste Zahl „Nur 8 von 100" (≈ 6,5 em breit). Alle Spalten sind gleich breit,
   also sind alle Zahlen gleich gross und die Beschreibungen (.lbl) beginnen auf einer Ebene.
   Ohne cqi-Unterstuetzung bleibt das bisherige Verhalten (26 px, Umbruch erlaubt). */
@supports (width:1cqi){
  .statbar>div{container-type:inline-size}
  .statbar .num{white-space:nowrap;overflow-wrap:normal;letter-spacing:-.02em;line-height:1.3;font-size:clamp(14px,calc(100cqi / 6.7),26px)}
  /* --sb-ic = Icon-Badge + Abstand daneben */
  .statbar--icons{--sb-ic:52px}
  .statbar--icons .num{font-size:clamp(14px,calc((100cqi - var(--sb-ic)) / 6.7),26px)}
  /* Badge mittig zur (jetzt kompakteren) Zahlenzeile */
  .statbar--icons .ibadge--hell{margin-top:-3px}
}
@media(min-width:881px){
  /* Innenabstand schrumpft mit der Spalte (bei 1080 px Rasterbreite exakt die bisherigen 22 px), damit die Zahl mehr Platz behaelt */
  .statbar>div{padding-left:clamp(12px,8.6%,22px);padding-right:clamp(12px,8.6%,22px)}
}
@media(min-width:881px) and (max-width:1023px){
  /* enge Vierspalter: Badge etwas kleiner, damit die Zahl groesser bleiben kann */
  .statbar--icons{--sb-ic:42px}
  .statbar--icons>div{gap:10px}
  .statbar .ibadge--hell{width:32px;height:32px;border-radius:9px}
  .statbar .ibadge--hell svg{width:18px;height:18px}
}

/* Raster duerfen nicht ueber ihre Spalte hinauswachsen (lange Einzelwoerter wie „Mitarbeiterveranstaltungen"
   drueckten die Care-Concept-Kacheln bei 521–1000 px ueber den Rand); sehr lange Woerter (ab 14 Zeichen) in Kacheln
   werden getrennt statt ueberzustehen. .kv (z. B. „Langzeitausfälle") bleibt bewusst ungetrennt und darf wenige px in
   den Karten-Innenabstand laufen; die Kostenkacheln (.kacheln) behalten ihre eigene Trennung. */
.quad>*,.trio>*,.split>*{min-width:0}
.quad:not(.kacheln)>.card :is(.t,.d,.kd){hyphens:auto;-webkit-hyphenate-limit-before:6;-webkit-hyphenate-limit-after:6;hyphenate-limit-chars:14 6 6;overflow-wrap:break-word}

/* Vergleichs-Karten (Gegenueberstellung Problem / Loesung)
   .vgl am Raster (z. B. <div class="split vgl">), je Karte .vgl-neg (Problem, Koralle) oder .vgl-pos (Loesung, Petrol/Gruen).
   Funktioniert mit dem bestehenden Markup: .card(.card--surface/.card--warn) mit .t/.d sowie .ag-gap/.ag-plus/.br-gap/.br-gut mit .t + <ul>.
   Kopf-Icon: <span class="vgl-ico">✓</span> um ein vorhandenes Zeichen im Titel legen (Zeichen bleibt sichtbar, als rundes Badge),
   oder leer <span class="vgl-ico" aria-hidden="true"></span> als erstes Kind der .t: dann zeichnet CSS × bzw. ✓. */
.vgl{gap:22px}
.vgl>.vgl-neg,.vgl>.vgl-pos{position:relative;background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:30px 28px 24px;box-shadow:0 1px 2px rgba(47,82,93,.05),0 14px 34px rgba(47,82,93,.08);overflow:hidden}
.vgl>.vgl-neg::before,.vgl>.vgl-pos::before{content:"";position:absolute;left:0;right:0;top:0;height:4px;pointer-events:none}
.vgl>.vgl-neg::before{background:linear-gradient(90deg,var(--koralle) 0%,var(--koralle-tief) 100%)}
.vgl>.vgl-pos::before{background:linear-gradient(90deg,var(--petrol) 0%,var(--gruen) 100%)}
.vgl>.vgl-neg>.t,.vgl>.vgl-pos>.t{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:13px;align-items:start;align-content:start;font-size:16.5px;font-weight:700;line-height:1.35;letter-spacing:-.1px;color:var(--petrol);margin-bottom:18px}
/* Badge steht mittig zur ersten Titelzeile (22,3 px) und ragt je 7 px darueber/darunter: alle Badges einer Reihe auf gleicher Hoehe */
.vgl .vgl-ico{width:36px;height:36px;margin:-7px 0;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;line-height:1;letter-spacing:0}
.vgl .vgl-neg .vgl-ico{background:var(--koralle-soft);color:var(--koralle-tief);box-shadow:inset 0 0 0 1px rgba(228,71,83,.2)}
.vgl .vgl-pos .vgl-ico{background:var(--mint-soft);color:var(--gruen);box-shadow:inset 0 0 0 1px rgba(27,122,69,.2)}
.vgl .vgl-neg .vgl-ico:empty::before{content:"×";content:"×"/"";font-size:20px;font-weight:700}
.vgl .vgl-pos .vgl-ico:empty::before{content:"✓";content:"✓"/""}
.vgl>.vgl-neg>.d,.vgl>.vgl-pos>.d{font-size:14.5px;line-height:1.7;color:var(--text)}
.vgl>.vgl-neg ul,.vgl>.vgl-pos ul{list-style:none;margin:0;padding:0;font-size:14.5px;line-height:1.6;color:var(--text)}
.vgl>.vgl-neg li,.vgl>.vgl-pos li{--vgl-pt:10px;position:relative;padding:var(--vgl-pt) 0 10px 32px;border-top:1px solid var(--border);color:var(--text)}
.vgl>.vgl-neg li:first-child,.vgl>.vgl-pos li:first-child{--vgl-pt:3px;border-top:none}
.vgl>.vgl-neg li::before,.vgl>.vgl-pos li::before{position:absolute;left:0;top:calc(var(--vgl-pt) + 1.6px);width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;line-height:1}
.vgl>.vgl-neg li::before{content:"×";content:"×"/"";background:var(--koralle-soft);color:var(--koralle-tief);font-size:15px;font-weight:700}
.vgl>.vgl-pos li::before{content:"✓";content:"✓"/"";background:var(--mint);color:var(--gruen)}
@media(max-width:520px){
  .vgl>.vgl-neg,.vgl>.vgl-pos{padding:26px 20px 20px}
  .vgl>.vgl-neg>.t,.vgl>.vgl-pos>.t{font-size:16px;column-gap:11px}
}

/* Vertrauensband: drei gleich breite Aussagen, je Icon-Badge + Text, zentriert; mobil untereinander.
   Pflicht: .vband plus genau eine Variante .vband--dunkel (auf Petrol) oder .vband--hell (auf Surface/Weiss).
   Jedes direkte Kind ist eine Aussage: <div><span class="ibadge" aria-hidden="true"><svg…></span><span class="vband-txt">Originaltext mit <b></span></div> */
.vband:is(.vband--dunkel,.vband--hell){display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;align-items:start;text-align:center;font-size:14px;line-height:1.55}
.vband:is(.vband--dunkel,.vband--hell)>*{display:block;min-width:0;padding:2px 22px}
.vband:is(.vband--dunkel,.vband--hell)>*+*{border-left:1px solid var(--border)}
.vband.vband--dunkel>*+*{border-left-color:rgba(255,255,255,.14)}
.vband:is(.vband--dunkel,.vband--hell) .ibadge{width:38px;height:38px;border-radius:10px;margin:0 auto 12px}
.vband:is(.vband--dunkel,.vband--hell) .ibadge svg{width:20px;height:20px}
.vband:is(.vband--dunkel,.vband--hell) .vband-txt{display:block}
.vband.vband--dunkel{color:rgba(255,255,255,.72)}
.vband.vband--dunkel b{color:#fff;font-weight:650}
.vband.vband--dunkel .ibadge{background:rgba(255,255,255,.12)}
.vband.vband--hell{color:var(--muted)}
.vband.vband--hell b{color:var(--petrol);font-weight:650}
.vband.vband--hell .ibadge{background:var(--bg);box-shadow:0 4px 14px rgba(47,82,93,.10)}
@media(max-width:760px){
  .vband:is(.vband--dunkel,.vband--hell){grid-template-columns:minmax(0,1fr);gap:14px;max-width:440px;margin-left:auto;margin-right:auto}
  .vband:is(.vband--dunkel,.vband--hell)>*{padding:0}
  .vband:is(.vband--dunkel,.vband--hell)>*+*{border-left:none;border-top:1px solid var(--border);padding-top:14px}
  .vband.vband--dunkel>*+*{border-top-color:rgba(255,255,255,.14)}
  /* mit Text-Huelle: Badge links, Text daneben (ohne .vband-txt bleibt es gestapelt und zentriert) */
  .vband:is(.vband--dunkel,.vband--hell)>*:has(>.vband-txt){display:flex;align-items:center;gap:14px;text-align:left}
  .vband:is(.vband--dunkel,.vband--hell)>*:has(>.vband-txt) .ibadge{margin:0;flex-shrink:0}
  .vband:is(.vband--dunkel,.vband--hell)>*:has(>.vband-txt) .vband-txt{flex:1;min-width:0}
}

/* Kontakt-Karte: Ansprechpartner mit Hochformat-Foto (4:5) neben Name/Rolle/Kontakt.
   .kkarten = Raster fuer 1–2 Karten (zwei nebeneinander ab 881 px), .kkarten--einzeln fuer eine einzelne Karte.
   Kinder: img.kkarte-foto + div mit .nm / .ro / .ct (.ct darf <a> sein). */
.kkarten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:28px;align-items:stretch}
.kkarten--einzeln{grid-template-columns:minmax(0,1fr);max-width:620px}
.kkarte{display:grid;grid-template-columns:clamp(112px,11vw,140px) minmax(0,1fr);gap:22px;align-items:center;background:var(--bg);border:1px solid var(--border);border-radius:16px;padding:20px 24px 20px 20px;box-shadow:0 1px 2px rgba(47,82,93,.05),0 14px 34px rgba(47,82,93,.08);min-width:0}
.kkarte .kkarte-foto{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;object-position:center 20%;border-radius:12px;background:var(--petrol-hauch)}
.kkarte>div{min-width:0}
.kkarte .nm{font-size:18px;font-weight:700;line-height:1.3;color:var(--petrol);letter-spacing:-.2px}
.kkarte .ro{font-size:13.5px;line-height:1.6;color:var(--muted);margin:5px 0 12px}
.kkarte .ro b{color:var(--petrol);font-weight:650}
.kkarte .ct{display:block;font-size:14px;font-weight:600;line-height:1.5;color:var(--petrol);text-decoration:none;overflow-wrap:anywhere}
.kkarte a.ct,.kkarte .ct a{color:var(--koralle);text-decoration:none}
@media(hover:hover){.kkarte a.ct:hover,.kkarte .ct a:hover{color:var(--koralle-tief)}}
.kkarte .kk-tel{white-space:nowrap} /* Telefonnummer in <span class="kk-tel"> bricht nicht mitten in der Nummer um */
@media(max-width:880px){
  .kkarten{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:480px){
  .kkarte{grid-template-columns:96px minmax(0,1fr);gap:16px;padding:16px;align-items:start}
  .kkarte .nm{font-size:17px}
}
@media(max-width:359px){.kkarte{grid-template-columns:minmax(0,1fr);gap:14px}.kkarte .kkarte-foto{width:96px}} /* Mobile-Audit G-07: Foto ueber dem Text */

/* ============================================================
   Schluss-CTA (letzte Sektion vor dem Footer), Runde 26.09.2026
   Einheitlich auf Arbeitgeber, Makler, Betriebsraete, Care Concept, Ueber uns und Wirkungsanalyse
   (nicht Startseite, nicht Erstgespraech; beide behalten ihren eigenen Abschluss). Markup, auf allen Seiten gleich:
   <section class="cta-schluss" [id="…"]>
     <div class="container cta-schluss-raster">
       <div class="cta-schluss-text">[<div class="eyebrow">] <h2> [<p>] <div class="cta-schluss-btns"> a.btn [a.btn-ghost] </div></div>
       <div class="cta-schluss-bild" aria-hidden="true">
         <div class="cs-doc"> Analyse-Mock ohne Text (.cs-kopf, .cs-l…, .cs-balken, .cs-check) </div>
         <div class="cs-team"> 3 × span.cs-p(--daniel/--pia/--andreas) > img[alt=""] + span.cs-team-ico </div>
       </div>
     </div>
   </section>
   Desktop zweispaltig (Text links, Bild rechts), ab 880 px gestapelt: Portraet-Reihe klein ueber der Headline, Mock entfaellt.
   Einblenden: belebung.js macht aus der h2 ein .reveal; solange sie noch nicht .da ist, warten Text, Buttons und Bild
   (reines CSS ueber :has). Ohne JS, ohne :has oder bei reduzierter Bewegung ist alles sofort sichtbar.
   ============================================================ */
.cta-schluss{position:relative;isolation:isolate;overflow:hidden;padding:96px 0;color:#fff;border-bottom:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(ellipse 40% 72% at 84% 40%,rgba(255,255,255,.10) 0%,rgba(255,255,255,0) 70%),
    radial-gradient(ellipse 46% 60% at 6% 0%,rgba(255,255,255,.07) 0%,rgba(255,255,255,0) 70%),
    linear-gradient(155deg,#35616D 0%,var(--petrol) 40%,var(--petrol-tief) 100%)}
/* feines Punktraster, nur rund um das Bild sichtbar */
.cta-schluss::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(rgba(255,255,255,.11) 1px,transparent 1.5px);background-size:22px 22px;-webkit-mask-image:radial-gradient(ellipse 34% 62% at 80% 46%,#000 0%,transparent 80%);mask-image:radial-gradient(ellipse 34% 62% at 80% 46%,#000 0%,transparent 80%)}
.cta-schluss-raster{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:48px;align-items:center}
.cta-schluss-text{min-width:0}
.cta-schluss-text::before{content:"";display:block;width:44px;height:3px;border-radius:2px;background:var(--koralle);margin-bottom:24px;transform-origin:left center}
.cta-schluss .eyebrow{color:rgba(255,255,255,.8);margin-bottom:12px}
.cta-schluss h2{color:#fff;font-size:clamp(27px,3.4vw,38px);line-height:1.17;letter-spacing:-.8px;max-width:620px}
.cta-schluss-text p{color:rgba(255,255,255,.84);font-size:17px;line-height:1.7;max-width:570px;margin-top:18px}
.cta-schluss-btns{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:32px}
.cta-schluss-btns .btn{display:inline-flex;align-items:center;gap:10px;box-shadow:0 12px 28px rgba(228,71,83,.30)}
.cta-schluss-btns .btn::after{content:"";width:16px;height:16px;flex-shrink:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 8h9.2M8.6 4.2L12.4 8l-3.8 3.8' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/16px 16px no-repeat;transition:transform .2s ease}
@media(hover:hover){.cta-schluss-btns .btn:hover::after{transform:translateX(3px)}}
.cta-schluss-btns .btn-ghost{color:#fff;border-color:rgba(255,255,255,.55);background:rgba(255,255,255,.05)}
@media(hover:hover){.cta-schluss-btns .btn-ghost:hover{background:#fff;border-color:#fff;color:var(--petrol)}}
.cta-schluss-btns a:focus-visible{outline:2px solid #fff;outline-offset:3px}

/* Bild: Analyse-Mock (ohne Text) mit ueberlappenden Portraets der Ansprechpartner.
   Gezeichnet auf 400 × 320 px, per zoom auf die Spaltenbreite (360 px) gebracht: so passen auch zwei lange Buttons
   (Betriebsraete) bei 1280 px nebeneinander in die Textspalte. */
.cta-schluss-bild{position:relative;height:320px;min-width:0;zoom:.9}
.cta-schluss-bild::before,.cta-schluss-bild::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.cta-schluss-bild::before{width:360px;height:360px;right:-50px;top:-52px;border:1px solid rgba(255,255,255,.11)}
.cta-schluss-bild::after{width:520px;height:520px;right:-130px;top:-132px;border:1px solid rgba(255,255,255,.06)}
.cs-doc{position:absolute;z-index:1;top:12px;right:22px;width:236px;padding:20px 20px 18px;background:#fff;border-radius:14px;box-shadow:0 2px 6px rgba(12,28,34,.16),0 30px 60px rgba(12,28,34,.36)}
.cs-doc::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;background:rgba(255,255,255,.13);transform:translate(16px,-14px) rotate(5deg)}
.cs-kopf{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.cs-kopf::before{content:"";width:16px;height:16px;border-radius:5px;background:var(--petrol);flex-shrink:0}
.cs-kopf::after{content:"";width:40%;height:5px;border-radius:3px;background:var(--border)}
.cs-l{display:block;height:5px;border-radius:3px;background:var(--petrol-hauch);margin-top:7px}
.cs-l--titel{height:8px;border-radius:4px;background:var(--petrol);width:86%;margin-top:0}
.cs-l--titel2{height:8px;border-radius:4px;background:var(--petrol);width:56%}
.cs-l--zahl{height:14px;border-radius:5px;background:var(--koralle);width:62%;margin-top:18px;margin-bottom:10px}
.cs-l--80{width:80%}
.cs-l--60{width:60%}
.cs-balken{display:flex;align-items:flex-end;justify-content:space-between;height:56px;margin-top:16px;padding-top:12px;border-top:1px solid var(--border)}
.cs-balken>i{display:block;flex:0 0 30px;border-radius:4px 4px 2px 2px;background:#DCE8EC}
.cs-balken>i:nth-child(1){height:42%}
.cs-balken>i:nth-child(2){height:66%}
.cs-balken>i:nth-child(3){height:52%}
.cs-balken>i:nth-child(4){height:100%;background:var(--koralle)}
.cs-check{position:absolute;display:block;top:-15px;right:-15px;width:38px;height:38px;border-radius:50%;background:var(--mint) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.5 12.5l3.6 3.6 7.4-7.6' fill='none' stroke='%231B7A45' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/20px 20px no-repeat;box-shadow:0 0 0 3px #fff,0 8px 18px rgba(12,28,34,.28)}
.cs-team{position:absolute;z-index:2;left:0;bottom:4px;display:flex;align-items:center}
.cs-p{position:relative;display:block;width:96px;height:96px;flex-shrink:0;border-radius:50%;overflow:hidden;border:3px solid #fff;background:var(--petrol-hauch);box-shadow:0 14px 30px rgba(12,28,34,.34)}
.cs-p+.cs-p{margin-left:-22px}
.cs-p img{width:100%;height:100%;object-fit:cover;object-position:50% 25%;transform:scale(1.45);transform-origin:var(--ox,50%) var(--oy,25%)}
.cs-p--daniel img{--ox:36%;--oy:19%}
.cs-p--pia img{--ox:59%;--oy:29%}
.cs-p--andreas img{--ox:60%;--oy:4%}
.cs-team-ico{position:relative;display:block;width:46px;height:46px;flex-shrink:0;align-self:flex-end;margin-left:-16px;border-radius:50%;border:3px solid #fff;background:var(--koralle) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 5.2h14a2 2 0 012 2v8.2a2 2 0 01-2 2h-7.6L7 20.8v-3.4H5a2 2 0 01-2-2V7.2a2 2 0 012-2z' fill='%23fff'/%3E%3Ccircle cx='8.4' cy='11.3' r='1.3' fill='%23E44753'/%3E%3Ccircle cx='12' cy='11.3' r='1.3' fill='%23E44753'/%3E%3Ccircle cx='15.6' cy='11.3' r='1.3' fill='%23E44753'/%3E%3C/svg%3E") center/22px 22px no-repeat;box-shadow:0 10px 22px rgba(12,28,34,.30)}

/* Einblenden im Takt der Headline (belebung.js setzt .reveal/.da nur an der h2) */
.cta-schluss-text>*:not(h2),.cta-schluss-text::before,.cs-doc,.cs-team{transition:opacity .6s ease,transform .6s ease}
.cta-schluss-text>p{transition-delay:.1s}
.cta-schluss-btns{transition-delay:.2s}
.cs-doc{transition-delay:.15s}
.cs-team{transition-delay:.32s}
.cta-schluss:has(h2.reveal:not(.da)) .cta-schluss-text>*:not(h2){opacity:0;transform:translateY(14px)}
.cta-schluss:has(h2.reveal:not(.da)) .cta-schluss-text::before{transform:scaleX(0)}
.cta-schluss:has(h2.reveal:not(.da)) .cs-doc{opacity:0;transform:translateY(24px)}
.cta-schluss:has(h2.reveal:not(.da)) .cs-team{opacity:0;transform:translateX(-18px)}

@media(min-width:881px) and (max-width:1023px){
  .cta-schluss-raster{grid-template-columns:minmax(0,1fr) 320px;gap:36px}
  .cta-schluss-bild{zoom:.8}
}
@media(max-width:880px){
  .cta-schluss{padding:64px 0}
  .cta-schluss::before{-webkit-mask-image:radial-gradient(ellipse 60% 34% at 18% 12%,#000 0%,transparent 80%);mask-image:radial-gradient(ellipse 60% 34% at 18% 12%,#000 0%,transparent 80%)}
  .cta-schluss-raster{grid-template-columns:minmax(0,1fr);gap:26px}
  .cta-schluss-bild{order:-1;height:auto;zoom:1}
  .cta-schluss-bild::before,.cta-schluss-bild::after,.cs-doc{display:none}
  .cs-team{position:relative;left:auto;bottom:auto}
  .cs-p{width:64px;height:64px;border-width:2.5px;box-shadow:0 10px 22px rgba(12,28,34,.30)}
  .cs-p+.cs-p{margin-left:-14px}
  .cs-team-ico{width:36px;height:36px;margin-left:-12px;border-width:2.5px;background-size:17px 17px}
  .cta-schluss-text::before{display:none}
  /* Portraets stehen hier ueber der Headline: zuerst und von unten einblenden */
  .cs-team{transition-delay:0s}
  .cta-schluss:has(h2.reveal:not(.da)) .cs-team{transform:translateY(10px)}
}
@media(max-width:520px){
  .cta-schluss{padding:56px 0}
  .cta-schluss-text p{font-size:16px;margin-top:14px}
  .cta-schluss-btns{flex-direction:column;align-items:stretch;margin-top:26px}
  .cta-schluss-btns .btn,.cta-schluss-btns .btn-ghost{display:flex;justify-content:center;align-items:center;text-align:center;text-wrap:balance;padding-left:20px;padding-right:20px}
  .cta-schluss-btns .btn::after{display:none} /* volle Breite: Pfeil entfaellt, damit auch „Analyse für Ihren Kunden anfordern" einzeilig bleibt */
}
@media(prefers-reduced-motion:reduce){
  .cta-schluss-text>*,.cta-schluss-text::before,.cs-doc,.cs-team,.cta-schluss-btns .btn::after{transition:none!important}
  .cta-schluss-btns .btn:hover::after{transform:none}
}

/* Rechner (Startseite + Arbeitgeber): Innenabstaende auf schmalen Screens knapper,
   damit „Ihre Analyse anfordern" im CTA-Band bei 375 px einzeilig bleibt */
@media(max-width:520px){
  .calc{padding:26px 18px}
  .calc .ctaband{padding:22px 20px}
}
/* ============================================================
   SEO-Semantik 26.09.2026: Titel-Elemente sind h2/h3 statt div (Wortlaut unverändert).
   Die Regeln nehmen die globalen h2/h3-Vorgaben (Zeilenhöhe, Balance-Umbruch, Laufweite,
   Schrift im summary/Akkordeon) für genau diese Klassen zurück, damit die Optik pixelgleich bleibt.
   ============================================================ */
:is(h2,h3):is(.t,.kv,.bt,.nm,.uu-nm,.wa-side-t){text-wrap:inherit}
:is(h2,h3):is(.t,.kv,.wa-side-t){line-height:inherit}
h2:is(.t,.wa-side-t){letter-spacing:inherit}
:is(.ag-faq,.mk-faq,.br-faq) summary>h3,.mk-werk-zeile>h3{font:inherit;color:inherit;letter-spacing:inherit;text-wrap:inherit}

/* ============================================================
   Mobile-Audit 27.09.2026 (global, additiv; Desktop mit Maus ab 881 px unveraendert)
   ============================================================ */
/* G-03: 16 px in Eingabefeldern, sonst zoomt iOS Safari beim Antippen hinein und bleibt gezoomt.
   !important, weil Seiten-Styles (.eg-form input, .wa-formwrap input, #partner .formwrap input, .ag-select) spaeter/spezifischer sind. */
@media (max-width:880px),(hover:none) and (pointer:coarse){input:not([type=range]):not([type=checkbox]):not([type=radio]),select,textarea{font-size:16px!important}select{max-width:100%}}
/* G-05: Senkrechtes Wischen auf den Rechner-Reglern scrollt die Seite statt den Wert zu setzen (JS stellt den Wert bei pointercancel zurueck) */
@media (pointer:coarse){.calc input[type=range]{touch-action:pan-y}}
/* F-03: Groessere Trefferflaeche der Regler fuer den Finger in iOS/iPadOS-WebKit (Box 28 statt 5 px, native Spur und Thumb bleiben mittig).
   Der negative Aussenabstand haelt den Platzbedarf bei 5 px, sonst wird jede Reglerzeile bei 320 px 23 px hoeher.
   Nur WebKit-Touch (-webkit-touch-callout), weil Chrome/Android die native Spur bei hoeherer Box sichtbar dicker zeichnet (etwa 8 statt 4 px). */
@media (pointer:coarse){@supports (-webkit-touch-callout:none){.calc input[type=range]{height:28px;margin-top:-11.5px;margin-bottom:-11.5px}}}
/* G-06: Touch-Rueckmeldung statt klebendem Hover (Hover-Regeln oben stehen in @media(hover:hover)) */
.stepper .step-btn{touch-action:manipulation}
@media(hover:none){.stepper .step-btn:active{background:var(--petrol);color:#fff}.btn:active{background:var(--koralle-tief)}}
/* G-09: Silbentrennung auch in iOS Safari <= 16 (nur mobil, Desktop-Regeln Z. 228/335 bleiben unpraefixiert) */
@media(max-width:880px){.statbar .lbl{-webkit-hyphens:auto}.quad:not(.kacheln)>.card :is(.t,.d,.kd){-webkit-hyphens:auto}}
/* F-02: Footer-Links brechen mobil nicht mitten im Link um; 3 px senkrechtes Polster vergroessert nur die Trefferflaeche (Inline, Zeilenhoehe unveraendert) */
@media(max-width:880px){footer .cols a{white-space:nowrap;padding:3px 0}}