/* ============================================================
   WebSofort — gemeinsames Stylesheet
   Token stammen aus marke/tokens.css (dort ist die Quelle)
   ============================================================ */

/* ---------- Schriften (selbst gehostet, keine Fremdserver) ---------- */
@font-face{font-family:Chivo;src:url(schrift/chivo-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Chivo;src:url(schrift/chivo-800.woff2) format('woff2');font-weight:800;font-display:swap}
@font-face{font-family:Chivo;src:url(schrift/chivo-900.woff2) format('woff2');font-weight:900;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url(schrift/hanken-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url(schrift/hanken-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url(schrift/hanken-600.woff2) format('woff2');font-weight:600;font-display:swap}
@font-face{font-family:'Hanken Grotesk';src:url(schrift/hanken-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Poppins;src:url(schrift/poppins-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Poppins;src:url(schrift/poppins-800.woff2) format('woff2');font-weight:800;font-display:swap}

/* ---------- Token ---------- */
:root{
  --bg:#F6F7F4; --surface:#FFFFFF; --surface-2:#ECEEEA; --navy:#111B29;
  --on-navy:#F6F7F4; --on-navy-soft:#9AA6B4;
  --ink:#121417; --soft:#55606B; --faint:#8B95A0;
  --line:#E1E4DF; --line-2:#CDD2CC;
  --accent:#FF6B00; --accent-2:#E65F00; --accent-weak:#FFE7D6;
  --btn:#121417; --btn-ink:#FFFFFF; --btn-hover:#000;
  --ok:#2E7D46; --warn:#C8811E;
  --ring:#FF6B00;
  --display:Chivo,system-ui,-apple-system,"Segoe UI",sans-serif;
  --sans:'Hanken Grotesk',system-ui,-apple-system,"Segoe UI",sans-serif;
  --wm:Poppins,'Hanken Grotesk',system-ui,sans-serif;
  --radius:14px; --radius-s:10px;
  --shadow:0 2px 6px rgba(18,20,23,.06),0 18px 44px -16px rgba(17,27,41,.20);
  --shadow-s:0 1px 2px rgba(18,20,23,.06);
  --wrap:1160px;
}

/* ---------- Grundlage ---------- */
*,*::before,*::after{box-sizing:border-box}
html,body{overflow-x:clip}
html{scroll-behavior:smooth;scroll-padding-top:96px}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:800;line-height:1.08;letter-spacing:-.02em;margin:0;text-wrap:balance}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:24px}
.lead{color:var(--soft);font-size:1.06rem}
[hidden]{display:none!important}

.btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:.98rem;
  padding:13px 22px;border-radius:11px;border:1.5px solid transparent;cursor:pointer;text-decoration:none;transition:background .18s,border-color .18s}
.btn-primary{background:var(--btn);color:var(--btn-ink)}
.btn-primary:hover{background:var(--btn-hover)}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line-2)}
.btn-ghost:hover{border-color:var(--ink)}
.btn-accent{background:var(--accent);color:#2a1500}
.btn-accent:hover{background:var(--accent-2)}
a:focus-visible,button:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--ring);outline-offset:2px}

.eyebrow{display:inline-flex;align-items:center;gap:8px;font-weight:600;font-size:.9rem;color:var(--accent-2);
  background:var(--accent-weak);padding:6px 13px;border-radius:999px}
/* Kapitel-Zeile: „01 · Herzeigen" */
.kapitel{display:block;font-family:var(--sans);font-weight:700;font-size:.82rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--accent-2);margin-bottom:12px}
.kapitel .nr{color:var(--faint);margin-right:8px}

.checkrow{display:flex;flex-wrap:wrap;gap:10px 22px;margin-top:22px;font-size:.95rem;color:var(--soft)}
.checkrow span{display:inline-flex;align-items:center;gap:8px}
.checkrow svg{width:18px;height:18px;color:var(--ok);flex:none}

.platzhalter{background:#FFF4C2;border:1px dashed #C8A20E;border-radius:6px;padding:1px 6px;font-size:.9em;color:#7A5B00}

section{padding-block:clamp(44px,6vw,80px)}
.sec-head{max-width:640px;margin-bottom:34px}
.sec-head h2{font-size:clamp(1.7rem,3.6vw,2.5rem);font-weight:900}
.sec-head p{margin-top:12px}

/* ---------- Kopfzeile ---------- */
header.site{position:sticky;top:0;z-index:50;background:color-mix(in srgb,var(--bg) 86%,transparent);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
header.site .in{display:flex;align-items:center;gap:28px;padding-block:14px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;flex:none}
.brand svg{height:34px;width:auto}
.brand b{font-family:var(--wm);font-weight:800;font-size:1.28rem;letter-spacing:-.02em;color:var(--ink)}
header.site nav{display:flex;gap:24px;margin-left:auto;font-weight:600;font-size:.95rem}
header.site nav a{text-decoration:none;color:var(--soft);white-space:nowrap}
header.site nav a:hover{color:var(--ink)}
header.site nav a[aria-current="page"]{color:var(--ink)}
header.site nav a[aria-current="page"]::after{content:"";display:block;height:2px;background:var(--accent);border-radius:2px;margin-top:3px}
header.site .btn{flex:none}
@media(max-width:1080px){
  header.site .in{flex-wrap:wrap;gap:12px 20px}
  header.site nav{order:3;width:100%;margin-left:0;overflow-x:auto;padding-bottom:4px;
    scrollbar-width:none;-webkit-overflow-scrolling:touch}
  header.site nav::-webkit-scrollbar{display:none}
  header.site .btn{margin-left:auto}
}

/* ---------- Produkt-Mockup (dunkel) ---------- */
.mock{background:var(--navy);color:var(--on-navy);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.mock .bar{display:flex;align-items:center;justify-content:space-between;font-size:.82rem;color:var(--on-navy-soft);margin-bottom:16px}
.mock .dots{display:flex;gap:6px}
.mock .dots i{width:10px;height:10px;border-radius:50%;background:#2b3a4d}
.mock .dots i:first-child{background:var(--accent)}
.flow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.flow .step{background:#16202e;border:1px solid #23303f;border-radius:12px;padding:14px 12px;text-align:center}
.flow .step .ic{width:34px;height:34px;margin:0 auto 8px;border-radius:9px;background:#1e2c3c;display:flex;align-items:center;justify-content:center;color:var(--accent)}
.flow .step .ic svg{width:19px;height:19px}
.flow .step b{display:block;font-family:var(--display);font-weight:700;font-size:.92rem}
.flow .step small{color:var(--on-navy-soft);font-size:.76rem}
.flow .step .done{display:inline-flex;align-items:center;gap:5px;margin-top:9px;font-size:.72rem;color:#7ee3a3;background:#12311f;padding:3px 8px;border-radius:999px}
.flow .step .done svg{width:12px;height:12px}
.mock .foot{display:flex;justify-content:space-between;margin-top:16px;font-size:.8rem;color:var(--on-navy-soft)}
@media(max-width:520px){.flow{grid-template-columns:1fr}}

/* ---------- Startseite: Hero ---------- */
.hero{padding-top:clamp(32px,5vw,56px);padding-bottom:clamp(44px,6vw,84px)}
.hero .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:start}
.hero h1{font-size:clamp(2.3rem,5.4vw,3.75rem);font-weight:900}
.hero p.sub{margin-top:20px;font-size:1.12rem;color:var(--soft);max-width:44ch}
.hero .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
@media(max-width:920px){.hero .grid{grid-template-columns:1fr;gap:36px}}

/* ---------- Zwei Spalten ---------- */
.split2{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center}
@media(max-width:860px){.split2{grid-template-columns:1fr;gap:28px}}
.chaos-card{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:26px}
.chaos-card ul{margin:0;padding:0;list-style:none;display:grid;gap:12px}
.chaos-card li{display:flex;gap:12px;align-items:flex-start;font-size:.98rem}
.chaos-card li svg{width:20px;height:20px;flex:none;color:var(--accent);margin-top:2px}

/* ---------- Die 4 S auf der Startseite ---------- */
.phasetitle{font-family:var(--display);font-weight:900;font-size:clamp(1.6rem,4vw,2.4rem);letter-spacing:-.02em;line-height:1.12}
.phasetitle .en{display:block;font-family:var(--sans);font-weight:500;font-size:1rem;color:var(--soft);letter-spacing:0;margin-top:14px;max-width:54ch;line-height:1.5}
.phases{display:grid;gap:18px;margin-top:40px}
.phase{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:28px;box-shadow:var(--shadow-s);transition:border-color .18s,box-shadow .18s}
.phase:hover{border-color:var(--line-2);box-shadow:var(--shadow)}
.phase h3{font-size:1.5rem;font-weight:900}
.phase .outcome{margin-top:10px;color:var(--soft);max-width:56ch}
.phase .svcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:14px;margin-top:20px;padding-top:20px;border-top:1px solid var(--line)}
.phase .mehr{display:inline-flex;align-items:center;gap:7px;margin-top:20px;font-weight:700;font-size:.95rem;
  color:var(--accent-2);text-decoration:none}
.phase .mehr:hover{text-decoration:underline}
.phase .mehr svg{width:16px;height:16px}

.svc{display:flex;gap:12px;align-items:flex-start}
.svc .tile{width:42px;height:42px;flex:none;border-radius:11px;background:var(--accent-weak);display:flex;align-items:center;justify-content:center;color:var(--accent-2)}
.svc .tile svg{width:23px;height:23px}
.svc b{display:block;font-family:var(--display);font-weight:700;font-size:.96rem;line-height:1.2}
.svc span{font-size:.86rem;color:var(--soft)}

/* ---------- Ablauf-Schritte ---------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:s}
@media(max-width:860px){.steps{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.steps{grid-template-columns:1fr}}
.step-c{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px}
.step-c::before{counter-increment:s;content:counter(s);display:flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;background:var(--ink);color:#fff;font-family:var(--display);font-weight:800;margin-bottom:14px}
.step-c b{display:block;font-family:var(--display);font-weight:700;margin-bottom:5px}
.step-c p{font-size:.9rem;color:var(--soft)}

/* ---------- Referenzen ---------- */
.refs{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:760px){.refs{grid-template-columns:1fr}}
.ref{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.ref .shot{aspect-ratio:16/10;background:#FFF4C2;display:flex;align-items:center;justify-content:center;color:#7A5B00;font-size:.9rem;text-align:center;padding:16px}
.ref .body{padding:20px}
.ref .body .k{font-size:.8rem;color:var(--faint);font-weight:600}
.ref .body b{display:block;font-family:var(--display);font-weight:800;font-size:1.15rem;margin:3px 0 6px}
.ref .body p{font-size:.92rem;color:var(--soft)}

/* ---------- Kontakt (dunkel) ---------- */
.kontakt{background:var(--navy);color:var(--on-navy)}
.kontakt h2{color:var(--on-navy)}
.kontakt .sec-head p{color:var(--on-navy-soft)}
.kgrid{display:grid;grid-template-columns:1fr 1.1fr;gap:40px}
@media(max-width:860px){.kgrid{grid-template-columns:1fr;gap:28px}}
.kways{display:grid;gap:12px;align-content:start}
.kway{display:flex;align-items:center;gap:14px;background:#16202e;border:1px solid #23303f;border-radius:12px;padding:16px 18px;text-decoration:none;color:var(--on-navy)}
.kway:hover{border-color:var(--accent)}
.kway .ic{width:40px;height:40px;flex:none;border-radius:10px;background:#1e2c3c;display:flex;align-items:center;justify-content:center;color:var(--accent)}
.kway .ic svg{width:20px;height:20px}
.kway b{font-family:var(--display);font-weight:700;font-size:.98rem}
.kway span{display:block;font-size:.84rem;color:var(--on-navy-soft)}
form.anfrage{background:#16202e;border:1px solid #23303f;border-radius:14px;padding:22px;display:grid;gap:14px;align-content:start}
form.anfrage label{font-size:.85rem;font-weight:600;color:var(--on-navy-soft);display:block;margin-bottom:6px}
form.anfrage input,form.anfrage textarea{width:100%;background:#0f1722;border:1px solid #2b3a4d;border-radius:10px;
  padding:12px 14px;color:var(--on-navy);font:inherit;font-size:.95rem}
form.anfrage textarea{min-height:110px;resize:vertical}
form.anfrage .hp{position:absolute;left:-9999px}
form.anfrage .dsgvo{font-size:.78rem;color:var(--on-navy-soft)}
form.anfrage .dsgvo a{color:var(--accent)}
.kmini{display:flex;flex-wrap:wrap;gap:8px 20px;margin-top:20px;font-size:.86rem;color:var(--on-navy-soft)}

/* ---------- Fußzeile ---------- */
footer.site{background:var(--navy);color:var(--on-navy-soft);border-top:1px solid #23303f;padding-block:40px;font-size:.9rem}
footer.site .in{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between}
footer.site .brand b{color:var(--on-navy)}
footer.site svg{height:30px}
footer.site a{color:var(--on-navy-soft);text-decoration:none}
footer.site a:hover{color:var(--on-navy)}
footer.site .cols{display:flex;gap:44px;flex-wrap:wrap}
footer.site .cols div{display:grid;gap:7px;align-content:start}
footer.site .ku{margin-top:18px;font-size:.82rem;opacity:.8}

/* ============================================================
   Unterseiten (Leistungs-Kategorien)
   ============================================================ */

/* Kopf einer Kategorieseite */
.seitenkopf{padding-top:clamp(32px,5vw,56px);padding-bottom:clamp(36px,5vw,64px);border-bottom:1px solid var(--line)}
.seitenkopf .grid{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start}
@media(max-width:920px){.seitenkopf .grid{grid-template-columns:1fr;gap:32px}}
.seitenkopf h1{font-size:clamp(2.1rem,4.8vw,3.2rem);font-weight:900}
.seitenkopf p.sub{margin-top:18px;font-size:1.1rem;color:var(--soft);max-width:46ch}
.seitenkopf .cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}

/* Sprungmarken-Leiste */
.sprung{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.sprung a{display:inline-flex;align-items:center;gap:8px;background:var(--surface);border:1px solid var(--line-2);
  border-radius:999px;padding:9px 16px;font-size:.92rem;font-weight:600;text-decoration:none;color:var(--ink);transition:border-color .18s,background .18s}
.sprung a:hover{border-color:var(--accent);background:var(--accent-weak)}
.sprung a svg{width:16px;height:16px;color:var(--accent-2)}

/* Ein Dienst als ausführlicher Block */
.dienst{border-top:1px solid var(--line);padding-block:clamp(40px,5vw,68px)}
.dienst:first-of-type{border-top:0}
.dienst .kopf{display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;max-width:720px}
.dienst .kopf .tile{width:54px;height:54px;flex:none;border-radius:14px;background:var(--accent-weak);
  display:flex;align-items:center;justify-content:center;color:var(--accent-2)}
.dienst .kopf .tile svg{width:29px;height:29px}
.dienst h2{font-size:clamp(1.5rem,3vw,2.05rem);font-weight:900}
.dienst .kopf p{margin-top:10px;color:var(--soft)}
.dienst .inhalt{display:grid;grid-template-columns:1.15fr .85fr;gap:32px;margin-top:30px;align-items:start}
@media(max-width:900px){.dienst .inhalt{grid-template-columns:1fr;gap:24px}}

/* Leistungs-Liste mit Haken */
.liste{margin:0;padding:0;list-style:none;display:grid;gap:11px}
.liste li{display:flex;gap:11px;align-items:flex-start;font-size:.98rem}
.liste li svg{width:19px;height:19px;flex:none;color:var(--ok);margin-top:3px}

/* Seitenkasten (für wen / Beispiel) */
.kasten{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px;box-shadow:var(--shadow-s)}
.kasten + .kasten{margin-top:14px}
.kasten .titel{font-family:var(--display);font-weight:800;font-size:1rem;margin-bottom:10px}
.kasten p{font-size:.93rem;color:var(--soft)}
.kasten .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}
.kasten .tags span{background:var(--surface-2);border:1px solid var(--line);border-radius:999px;
  padding:4px 11px;font-size:.82rem;color:var(--soft)}
.kasten.echt{background:var(--navy);border-color:#23303f;color:var(--on-navy)}
.kasten.echt .titel{color:var(--on-navy)}
.kasten.echt p{color:var(--on-navy-soft)}
.kasten.echt .marke{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--accent);margin-bottom:9px}

/* „Immer dabei"-Raster */
.dabei{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.dabei .k{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.dabei .k .ic{width:38px;height:38px;border-radius:10px;background:var(--accent-weak);color:var(--accent-2);
  display:flex;align-items:center;justify-content:center;margin-bottom:12px}
.dabei .k .ic svg{width:20px;height:20px}
.dabei .k b{display:block;font-family:var(--display);font-weight:700;font-size:.98rem;margin-bottom:5px}
.dabei .k p{font-size:.89rem;color:var(--soft)}

/* ============================================================
   Digital-Check
   ============================================================ */
.check{max-width:640px;margin-inline:auto}
.fortschritt{display:flex;align-items:center;gap:14px;margin-bottom:26px}
.fortschritt .balken{flex:1;height:6px;background:var(--line);border-radius:99px;overflow:hidden}
.fortschritt .balken i{display:block;height:100%;width:0;background:var(--accent);border-radius:99px;transition:width .25s}
.fortschritt .zaehler{font-size:.85rem;font-weight:600;color:var(--soft);white-space:nowrap}

.schritt{display:none}
.schritt.aktiv{display:block}
/* Sicherheitsnetz: ohne JavaScript sind alle Schritte sichtbar */
.check.bereit .schritt{display:none}
.check.bereit .schritt.aktiv{display:block}

.schritt h2{font-size:clamp(1.35rem,3.2vw,1.8rem);font-weight:900;margin-bottom:6px}
.schritt .hilfe{color:var(--soft);font-size:.95rem;margin-bottom:22px}
.antworten{display:grid;gap:10px}
.antworten button{display:block;width:100%;text-align:left;background:var(--surface);
  border:1.5px solid var(--line-2);border-radius:12px;padding:16px 18px;font:inherit;font-size:1rem;
  cursor:pointer;transition:border-color .15s,background .15s}
.antworten button:hover{border-color:var(--accent);background:var(--accent-weak)}
.antworten button.gewaehlt{border-color:var(--accent);background:var(--accent-weak);font-weight:600}
.zurueck{margin-top:20px;background:none;border:0;font:inherit;font-size:.92rem;color:var(--soft);
  cursor:pointer;padding:6px 0}
.zurueck:hover{color:var(--ink)}
.ueberspringen{background:none;border:0;font:inherit;font-size:.92rem;color:var(--soft);cursor:pointer;text-decoration:underline}

/* Ergebnis */
.ergebnis .zahl{font-family:var(--display);font-weight:900;font-size:clamp(3.4rem,11vw,5rem);line-height:1;letter-spacing:-.03em}
.ergebnis .zahl small{font-family:var(--sans);font-weight:600;font-size:.26em;color:var(--faint);letter-spacing:0}
.ergebnis .band{font-family:var(--display);font-weight:800;font-size:1.3rem;margin-top:10px}
.ergebnis .bandsatz{color:var(--soft);margin-top:8px;max-width:56ch}
.ergebnis .grobe{font-size:.85rem;color:var(--faint);margin-top:16px}

.holen{display:grid;gap:14px;margin-top:12px}
.holen .th{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:20px 22px;
  border-left:4px solid var(--line-2)}
.holen .th[data-prio="Jetzt"]{border-left-color:var(--accent)}
.holen .th[data-prio="Bald"]{border-left-color:var(--warn)}
.holen .th .kopfzeile{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.holen .th b{font-family:var(--display);font-weight:800;font-size:1.05rem}
.holen .th .prio{font-size:.76rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  background:var(--surface-2);color:var(--soft);padding:3px 10px;border-radius:999px;white-space:nowrap}
.holen .th[data-prio="Jetzt"] .prio{background:var(--accent-weak);color:var(--accent-2)}
.holen .th .ihre{font-size:.9rem;color:var(--faint);margin-top:7px}
.holen .th .heisst{margin-top:10px;font-size:.96rem}
.holen .th .machen{margin-top:10px;font-size:.93rem;color:var(--soft);padding-top:10px;border-top:1px solid var(--line)}

.laeuft{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:22px;margin-top:22px}
.laeuft b{font-family:var(--display);font-weight:800;display:block;margin-bottom:10px}
.laeuft ul{margin:0;padding:0;list-style:none;display:grid;gap:8px;font-size:.95rem}
.laeuft li{display:flex;gap:10px;align-items:flex-start}
.laeuft li svg{width:18px;height:18px;flex:none;color:var(--ok);margin-top:3px}
.laeuft .lob{margin-top:12px;font-size:.93rem;color:var(--soft)}

@media print{
  header.site, footer.site, .fortschritt, .zurueck, .druckweg, form.anfrage, .kways{display:none!important}
  .ergebnis{color:#000}
  .holen .th{break-inside:avoid;border:1px solid #999}
  body{background:#fff}
}

/* Muster-Vorschau (zwei Bildschirmfotos nebeneinander) */
.muster{display:grid;grid-template-columns:1fr 1fr;gap:20px}
@media(max-width:820px){.muster{grid-template-columns:1fr}}
.muster a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;text-decoration:none;box-shadow:var(--shadow-s);transition:border-color .18s,box-shadow .18s}
.muster a:hover{border-color:var(--accent);box-shadow:var(--shadow)}
.muster img{display:block;width:100%;height:auto;border-bottom:1px solid var(--line)}
.muster .u{padding:18px 20px}
.muster .u .k{font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2)}
.muster .u b{display:block;font-family:var(--display);font-weight:800;font-size:1.12rem;margin:5px 0 6px}
.muster .u p{font-size:.92rem;color:var(--soft)}
.muster .u .oeffnen{display:inline-flex;align-items:center;gap:7px;margin-top:12px;font-weight:700;
  font-size:.92rem;color:var(--accent-2)}
.muster .u .oeffnen svg{width:15px;height:15px}

/* Einwand → Antwort */
.einwaende{display:grid;gap:14px;max-width:82ch}
.einwand{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:22px 24px}
.einwand .frage{font-family:var(--display);font-weight:800;font-size:1.04rem;display:flex;gap:10px;align-items:flex-start}
.einwand .frage::before{content:"„";font-size:1.9rem;line-height:.7;color:var(--accent);flex:none}
.einwand .antwort{margin-top:10px;color:var(--soft);font-size:.97rem;padding-left:26px}

/* Schmerzpunkte (Alltag der Zielgruppe) */
.schmerz{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:14px}
.schmerz .s{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.schmerz .s b{display:block;font-family:var(--display);font-weight:700;font-size:.98rem;margin-bottom:6px}
.schmerz .s p{font-size:.91rem;color:var(--soft)}

/* Rückruf-Formular */
form.rueckruf{background:#16202e;border:1px solid #23303f;border-radius:14px;padding:24px;display:grid;gap:14px;align-content:start}
form.rueckruf label{font-size:.85rem;font-weight:600;color:var(--on-navy-soft);display:block;margin-bottom:6px}
form.rueckruf input,form.rueckruf select,form.rueckruf textarea{width:100%;background:#0f1722;border:1px solid #2b3a4d;
  border-radius:10px;padding:12px 14px;color:var(--on-navy);font:inherit;font-size:.95rem}
form.rueckruf .hp{position:absolute;left:-9999px}
form.rueckruf .zustimmung{display:flex;gap:11px;align-items:flex-start;font-size:.86rem;color:var(--on-navy-soft);line-height:1.5}
form.rueckruf .zustimmung input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:var(--accent)}
form.rueckruf .zustimmung a{color:var(--accent)}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media(max-width:520px){.zwei{grid-template-columns:1fr}}

/* Der Vorschau-Haken im Kopfbereich */
.vorschau{display:flex;gap:12px;align-items:flex-start;margin-top:24px;padding:16px 18px;
  background:var(--accent-weak);border:1px solid #FFD0AE;border-radius:var(--radius)}
.vorschau svg{width:22px;height:22px;flex:none;color:var(--accent-2);margin-top:2px}
.vorschau b{font-family:var(--display);font-weight:800}
.vorschau span{display:block;font-size:.93rem;color:var(--soft);margin-top:3px}

/* Preise */
.preise{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px}
.preis{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;display:flex;flex-direction:column}
.preis.hervor{border-color:var(--accent);box-shadow:var(--shadow);position:relative}
.preis.hervor::before{content:"Am häufigsten gewählt";position:absolute;top:-11px;left:26px;
  background:var(--accent);color:#2a1500;font-size:.76rem;font-weight:700;padding:3px 11px;border-radius:999px}
.preis .name{font-family:var(--display);font-weight:800;font-size:1.15rem}
.preis .zahl{font-family:var(--display);font-weight:900;font-size:2.3rem;line-height:1.1;margin-top:12px}
.preis .zahl small{font-family:var(--sans);font-weight:600;font-size:.9rem;color:var(--soft)}
.preis .dazu{font-size:.86rem;color:var(--faint);margin-top:4px}
.preis ul{margin:18px 0 0;padding:0;list-style:none;display:grid;gap:9px;font-size:.93rem}
.preis li{display:flex;gap:9px;align-items:flex-start}
.preis li svg{width:17px;height:17px;flex:none;color:var(--ok);margin-top:3px}
.preis .btn{margin-top:20px;justify-content:center}
.preis-hinweis{margin-top:22px;font-size:.93rem;color:var(--soft);max-width:70ch}

/* FAQ */
.faq{display:grid;gap:0;max-width:80ch;border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer;padding:20px 34px 20px 0;font-family:var(--display);font-weight:700;
  font-size:1.04rem;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;
  border-right:2.5px solid var(--accent);border-bottom:2.5px solid var(--accent);
  transform:translateY(-70%) rotate(45deg);transition:transform .18s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq summary:hover{color:var(--accent-2)}
.faq .antwort{padding:0 34px 22px 0;color:var(--soft);font-size:.97rem}
.faq .antwort p + p{margin-top:10px}

/* Rechtstext-Seiten (Impressum, Datenschutz) */
.rechtstext{max-width:74ch}
.rechtstext h2{font-size:clamp(1.3rem,2.6vw,1.7rem);font-weight:900;margin-top:44px;padding-top:26px;border-top:1px solid var(--line)}
.rechtstext h2:first-of-type{margin-top:0;padding-top:0;border-top:0}
.rechtstext h3{font-family:var(--display);font-weight:800;font-size:1.06rem;margin-top:26px}
.rechtstext p{margin-top:12px;color:var(--soft)}
.rechtstext a{color:var(--accent-2);font-weight:600}
.rechtstext dl{margin:14px 0 0;display:grid;grid-template-columns:auto 1fr;gap:10px 22px}
.rechtstext dt{font-weight:700;color:var(--ink)}
.rechtstext dd{margin:0;color:var(--soft)}
@media(max-width:620px){.rechtstext dl{grid-template-columns:1fr;gap:2px 0}.rechtstext dd{margin-bottom:12px}}
.rechtstext .adresse{font-style:normal;color:var(--soft);margin-top:12px;line-height:1.7}
.rechtstext ul{margin:12px 0 0;padding-left:22px;color:var(--soft)}
.rechtstext li{margin-bottom:8px}
.stand{margin-top:44px;padding:20px 22px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--radius);font-size:.92rem;color:var(--soft)}
.stand b{color:var(--ink)}

/* Dunkler Abschnitt (z. B. „Was Sie über KI wissen sollten") */
.dunkel{background:var(--navy);color:var(--on-navy)}
.dunkel h2{color:var(--on-navy)}
.dunkel .sec-head p{color:var(--on-navy-soft)}
.wissen{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:16px}
.wissen .w{background:#16202e;border:1px solid #23303f;border-radius:var(--radius);padding:22px}
.wissen .w b{display:block;font-family:var(--display);font-weight:800;font-size:1.02rem;margin-bottom:8px;color:var(--on-navy)}
.wissen .w p{font-size:.92rem;color:var(--on-navy-soft)}
.wissen .w .zitat{color:var(--accent);font-style:normal}

/* Weiter-zu-Navigation am Seitenende */
.weiter{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.weiter{grid-template-columns:1fr}}
.weiter a{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;text-decoration:none;transition:border-color .18s}
.weiter a:hover{border-color:var(--accent)}
.weiter a .k{font-size:.8rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
.weiter a b{display:block;font-family:var(--display);font-weight:800;font-size:1.2rem;margin-top:6px}
.weiter a p{font-size:.9rem;color:var(--soft);margin-top:6px}

@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important;scroll-behavior:auto!important}}

@media print{
  header.site,.sprung,.weiter{display:none}
  body{background:#fff}
}


/* ============================================================
   Logo-Intro beim ersten Besuch (wird per JavaScript erzeugt —
   ohne Skript erscheint es gar nicht, die Seite ist sofort da)
   ============================================================ */
.ws-intro{position:fixed;inset:0;z-index:200;background:var(--bg);
  display:flex;align-items:center;justify-content:center;
  transition:opacity .4s ease,background-color .55s ease}
.ws-intro.verblassen{background:transparent}
.ws-intro.weg{opacity:0;pointer-events:none}
.ws-intro-zeichen{will-change:transform;transform-origin:center center;
  animation:ws-intro-auf .42s cubic-bezier(.2,.8,.3,1) both}
.ws-intro-zeichen svg{height:clamp(78px,15vw,132px);width:auto;display:block}
@keyframes ws-intro-auf{
  from{opacity:0;transform:scale(.82)}
  to{opacity:1;transform:scale(1)}
}
@media(prefers-reduced-motion:reduce){.ws-intro{display:none}}
@media print{.ws-intro{display:none}}


/* ============================================================
   Das Ablauf-Bild läuft einmal durch: die drei Schritte kommen
   nacheinander, dann setzen sich die Häkchen.

   WICHTIG — teuer gelernt:
   Animationen starten erst beim ersten Zeichnen. Ein Tab im
   Hintergrund zeichnet nie. Eine Einblendung "aus dem Nichts"
   bliebe dort also für immer unsichtbar.

   Deshalb laufen alle Animationen, die Inhalt verbergen, NUR
   unter der Klasse "ablauf-an". Die setzt intro.js ausschliesslich
   bei sichtbarer Seite und nimmt sie danach wieder weg. Ohne
   JavaScript, im Hintergrund-Tab oder bei "weniger Bewegung"
   steht schlicht das fertige Bild da.
   ============================================================ */
@media (prefers-reduced-motion: no-preference){

  html.ablauf-an .mock .flow .step{
    animation: ws-schritt .5s cubic-bezier(.2,.8,.3,1) both;
  }
  html.ablauf-an .mock .flow .step:nth-child(1){ animation-delay:.25s }
  html.ablauf-an .mock .flow .step:nth-child(2){ animation-delay:.45s }
  html.ablauf-an .mock .flow .step:nth-child(3){ animation-delay:.65s }

  html.ablauf-an .mock .flow .step .done{
    animation: ws-haken .45s cubic-bezier(.2,1.3,.4,1) both;
  }
  html.ablauf-an .mock .flow .step:nth-child(1) .done{ animation-delay:1.15s }
  html.ablauf-an .mock .flow .step:nth-child(2) .done{ animation-delay:1.65s }
  html.ablauf-an .mock .flow .step:nth-child(3) .done{ animation-delay:2.15s }

  /* Diese beiden verbergen nichts — sie duerfen immer laufen. */
  .mock .flow .step .ic{ animation: ws-leuchten .8s ease-out both }
  .mock .flow .step:nth-child(1) .ic{ animation-delay:1.05s }
  .mock .flow .step:nth-child(2) .ic{ animation-delay:1.55s }
  .mock .flow .step:nth-child(3) .ic{ animation-delay:2.05s }
  .mock .dots i:first-child{ animation: ws-pulsen 2.6s ease-in-out 2.6s infinite }

  @keyframes ws-schritt{
    from{ opacity:0; transform:translateY(10px) }
    to  { opacity:1; transform:none }
  }
  @keyframes ws-haken{
    from{ opacity:0; transform:scale(.7) }
    60% { opacity:1; transform:scale(1.06) }
    to  { opacity:1; transform:none }
  }
  @keyframes ws-leuchten{
    from{ box-shadow:0 0 0 0 rgba(255,107,0,.55) }
    to  { box-shadow:0 0 0 12px rgba(255,107,0,0) }
  }
  @keyframes ws-pulsen{
    0%,100%{ opacity:1 }
    50%    { opacity:.35 }
  }
}

/* Beim Drucken nie animieren */
@media print{ .mock .flow .step, .mock .flow .step .done{ animation:none!important } }


/* ============================================================
   Der Kurzfilm im Kopfbereich der Startseite.

   Er sitzt im selben dunklen Rahmen wie das Ablauf-Bild auf den
   Unterseiten, damit der Kopfbereich überall gleich wirkt.

   Der Film ist stumm. Trotzdem gibt es IMMER einen Knopf zum
   Anhalten — bewegte Bilder, die länger als fünf Sekunden von
   selbst laufen, müssen anhaltbar sein.
   ============================================================ */
.film{background:var(--navy);color:var(--on-navy);border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.film .bar{display:flex;align-items:center;justify-content:space-between;font-size:.82rem;color:var(--on-navy-soft);margin-bottom:16px}
.film .dots{display:flex;gap:6px}
.film .dots i{width:10px;height:10px;border-radius:50%;background:#2b3a4d}
.film .dots i:first-child{background:var(--accent)}
.film .foot{display:flex;justify-content:space-between;margin-top:16px;font-size:.8rem;color:var(--on-navy-soft)}

.film .buehne{position:relative;border-radius:10px;overflow:hidden;background:#fff;aspect-ratio:16/9}
.film video{display:block;width:100%;height:100%;object-fit:cover;background:#fff}

.filmknopf{
  position:absolute; right:10px; bottom:10px;
  display:inline-flex; align-items:center; gap:8px;
  border:0; border-radius:999px; padding:9px 14px; cursor:pointer;
  font:inherit; font-size:.82rem; font-weight:600; line-height:1;
  background:rgba(18,20,23,.74); color:#fff;
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .18s ease, opacity .18s ease;
}
.filmknopf:hover{background:rgba(18,20,23,.9)}
.filmknopf svg{width:15px;height:15px;flex:none}
.filmknopf .ik-pause{display:none}
/* Läuft der Film, tritt der Knopf zurück — bleibt aber sichtbar und klickbar */
.filmknopf[data-an="1"]{background:rgba(18,20,23,.42);opacity:.75}
.filmknopf[data-an="1"]:hover,
.filmknopf[data-an="1"]:focus-visible{opacity:1;background:rgba(18,20,23,.9)}
.filmknopf[data-an="1"] .ik-play{display:none}
.filmknopf[data-an="1"] .ik-pause{display:inline-block}

/* Am Handy ist der Knopf das Wichtigste — dort startet nichts von selbst */
@media(max-width:920px){
  .film{padding:16px}
  .filmknopf{right:8px;bottom:8px;padding:10px 15px}
}

/* Wird der Fokus per Skript auf eine Überschrift gesetzt (damit Vorlese-
   programme die neue Frage ansagen), braucht es keinen sichtbaren Rahmen —
   der Besucher hat ja nicht getippt. Tastatur-Fokus auf echten Bedienelementen
   bleibt sichtbar. */
[tabindex="-1"]:focus{outline:none}