/* kfzgutachter.net – Tokens und Basis. Moderner SaaS-Stil: dunkler Kopf/Hero/Fuß, helle Seite mit weißen Karten, Markenblau. Skill kfzgutachter-design */
:root{
  --surface-000:#f7f7f7;--surface-100:#f7f7f7;--surface-card:#ffffff;--card-line:#e6e8ee;--surface-inverse:#10131a;
  --ink:#10131a;--ink-hover:#1b2030;--ink-inverse:#ffffff;
  --text-muted:#4b5262;--text-subtle:#646b7a;
  --line:#d6d9e0;--line-strong:#b9bec9;
  --signal:#cc1631;--scrim:#10131a14;--focus:#10131a;
  --brand:#286bcd;--brand-hover:#1f58ab;--on-brand:#ffffff;--shadow-feature:0 18px 48px 0 #286bcd59;
  --tag-bg:#286bcd1a;--tag-fg:#1f58ab;
  --hero-bg:#f4f6fb;--on-hero:#10131a;--on-hero-muted:#4b5262;--hero-edge:#10131a14;
  --hero-fx:radial-gradient(55% 60% at 12% 18%,#ffffff 0%,transparent 70%),radial-gradient(45% 55% at 88% 28%,#dfe6f6 0%,transparent 72%),radial-gradient(60% 45% at 50% 100%,#286bcd1a 0%,transparent 75%);
  --ghost-bg:#ffffff;--ghost-fg:#10131a;--ghost-line:#d6d9e0;--ghost-hover:#eef1f8;
  --dark-bg:#0a0f1c;--on-dark:#ffffff;--on-dark-muted:#ffffffcc;--dark-line:#ffffff8c;
  --font-sans:"Figtree","Helvetica Neue",Helvetica,Arial,sans-serif;
  --hdr-h:72px;
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
  --space-8:30px;--space-10:40px;--space-15:60px;--space-20:80px;--space-30:120px;
  --container:1120px;--container-wide:1340px;--measure:630px;
  --radius-sm:8px;--radius-card:24px;--radius-xl:32px;--radius-chip:24px;--radius-pill:100px;
  --shadow-card:0 1px 2px #10131a0d,0 14px 40px #10131a14;
  color-scheme:light;
}
/* Dunkles Thema: nur per Switcher (data-theme="dark" auf <html>), Standard ist Hell. */
:root[data-theme="dark"]{
  --surface-000:#0b0f19;--surface-100:#11172a;--surface-card:#121829;--card-line:#232b40;--surface-inverse:#ffffff;
  --ink:#f3f5f9;--ink-hover:#ffffff;--ink-inverse:#10131a;
  --text-muted:#aab1c0;--text-subtle:#8a93a6;--line:#2a3248;--line-strong:#3a4460;
  --signal:#ff4d63;--scrim:#ffffff26;--focus:#ffffff;--shadow-card:0 1px 2px #00000066,0 14px 40px #00000066;
  --brand:#286bcd;--brand-hover:#3a7ee0;--on-brand:#ffffff;--shadow-feature:0 18px 48px 0 #286bcd80;
  --tag-bg:#286bcd33;--tag-fg:#7fb0ff;
  --hero-bg:#060913;--on-hero:#ffffff;--on-hero-muted:#ffffffcc;--hero-edge:#ffffff1f;
  --hero-fx:radial-gradient(65% 60% at 50% 0%,#286bcd59 0%,transparent 72%);
  --ghost-bg:transparent;--ghost-fg:#ffffff;--ghost-line:#ffffff8c;--ghost-hover:#ffffff1a;
  --dark-bg:#060913;
  color-scheme:dark;
}

/* Fonts – lokal, OFL. Dateien: public/assets/fonts/ */
@font-face{font-family:"Figtree";font-weight:400;font-display:swap;src:url(/assets/fonts/figtree-400.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:500;font-display:swap;src:url(/assets/fonts/figtree-500.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:700;font-display:swap;src:url(/assets/fonts/figtree-700.woff2) format("woff2")}
@font-face{font-family:"Figtree";font-weight:900;font-display:swap;src:url(/assets/fonts/figtree-900.woff2) format("woff2")}

/* Basis */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdr-h) + 16px)}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--surface-000);color:var(--ink);font-family:var(--font-sans);font-size:18px;line-height:1.55}
img,svg{max-width:100%;height:auto;display:block}
h1,h2,h3,p{margin:0}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}
.topbar,.cta,.site-footer{--focus:#fff}
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* Typo-Stile */
.display-1{font-size:clamp(40px,7vw,76px);line-height:1.04;font-weight:700;letter-spacing:-.035em;text-wrap:balance}
.display-2{font-size:clamp(30px,4.4vw,52px);line-height:1.08;font-weight:700;letter-spacing:-.03em;text-wrap:balance}
.heading-1{font-size:28px;line-height:1.1;font-weight:700;letter-spacing:-.02em}
.heading-2{font-size:24px;line-height:1.2;font-weight:700;letter-spacing:-.01em}
.lead{font-size:clamp(18px,2vw,22px);line-height:1.45;letter-spacing:-.01em}
.body-sm{font-size:16px;line-height:1.5}
.caption{font-size:14px;line-height:1.45}
.muted{color:var(--text-muted)}

/* Layout */
.container{max-width:var(--container);margin-inline:auto;padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px))}
.container--wide{max-width:var(--container-wide)}
.section{padding-block:clamp(64px,9vw,120px)}
.section--alt{background:var(--surface-100)}
@media (min-width:900px){.container--wide{padding-inline:var(--space-6)}}
.measure{max-width:var(--measure)}

/* Leiste oben */
.topbar{background:#000;color:#fff;display:none;flex-wrap:wrap;justify-content:center;gap:var(--space-1) var(--space-6);padding:0 var(--space-4);font-size:14px;line-height:1.4}
.topbar a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.topbar a:hover{text-decoration:underline;text-underline-offset:3px}
.topbar a+a{border-left:1px solid #ffffff40;padding-left:var(--space-6)}

main{flex:1}
@media (min-width:640px){.topbar{display:flex}}

/* Header */
.hdr{position:sticky;top:0;z-index:30;height:var(--hdr-h);display:grid;grid-template-columns:1fr auto;align-items:center;gap:var(--space-4);padding-inline:max(16px,env(safe-area-inset-left,0px)) max(16px,env(safe-area-inset-right,0px));background:var(--surface-000);transition:background-color .25s ease-out,box-shadow .25s ease-out}
.js .hdr{background:transparent}
.js.is-scrolled .hdr{background:color-mix(in srgb,var(--surface-000) 92%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--card-line)}
.hdr__brand{display:flex;align-items:center;min-height:44px;text-decoration:none}
.hdr__brand img{display:block;height:52px;width:auto}
:root[data-theme="dark"] .hdr__brand img{filter:brightness(0) invert(1)}
.icon-btn{width:44px;height:44px;border-radius:var(--radius-pill);background:var(--scrim);display:grid;place-items:center;color:var(--ink);border:0;cursor:pointer;text-decoration:none}
.hdr__actions{display:flex;align-items:center;gap:var(--space-2);justify-self:end;position:relative}
.hdr__cta{min-height:44px;padding:var(--space-2) var(--space-4)}
@media (max-width:479px){.hdr__cta{padding:0;width:44px}.hdr__cta-text{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}}
/* Startseite: Kopfbereich dunkel wie der Hero */
.home .hdr{background:var(--hero-bg);color:var(--on-hero)}
.js .home .hdr{background:transparent}
.js.is-scrolled .home .hdr{background:color-mix(in srgb,var(--hero-bg) 90%,transparent);box-shadow:0 1px 0 var(--hero-edge)}
/* Theme-Menü */
.theme{position:relative}
.theme__btn .ico{display:none}
.theme__btn[data-mode="light"] .ico--sun,.theme__btn[data-mode="dark"] .ico--moon,.theme__btn[data-mode="system"] .ico--system{display:block}
.theme__menu{position:absolute;right:0;top:calc(100% + var(--space-2));min-width:240px;margin:0;padding:var(--space-2);list-style:none;background:var(--surface-card);color:var(--ink);border:1px solid var(--card-line);border-radius:var(--radius-card);box-shadow:var(--shadow-card);z-index:20}
.theme__menu[hidden]{display:none}
.theme__label{padding:var(--space-2) var(--space-3) var(--space-1);font-size:13px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-subtle)}
.theme__opt{display:flex;align-items:center;gap:var(--space-3);width:100%;padding:var(--space-3);border:0;border-radius:var(--radius-sm);background:transparent;color:var(--ink);font:inherit;font-size:17px;text-align:left;cursor:pointer;transition:background-color .2s ease-out}
.theme__opt:hover{background:var(--scrim)}
.theme__opt[aria-checked="true"]{background:var(--scrim);font-weight:500}
.theme__opt svg{flex:none}
/* Navigation: mobil als Menü unter dem Header (Hamburger links), ab 900px in der Zeile */
.hdr{grid-template-columns:auto 1fr auto}
.hdr__burger{position:relative;width:44px;height:44px;border:0;border-radius:var(--radius-pill);background:var(--scrim);color:inherit;cursor:pointer}
.hdr__burger span{position:absolute;left:13px;width:18px;height:2px;border-radius:2px;background:currentColor;transition:transform .25s ease-out,opacity .2s ease-out}
.hdr__burger span:nth-child(1){top:15px}
.hdr__burger span:nth-child(2){top:21px}
.hdr__burger span:nth-child(3){top:27px}
.hdr.is-open .hdr__burger span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.hdr.is-open .hdr__burger span:nth-child(2){opacity:0}
.hdr.is-open .hdr__burger span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.hdr__nav{position:absolute;left:0;right:0;top:100%;display:flex;flex-direction:column;padding:var(--space-2) var(--space-4) var(--space-5);background:var(--surface-card);color:var(--ink);border-bottom:1px solid var(--card-line);border-radius:0 0 var(--radius-card) var(--radius-card);box-shadow:var(--shadow-card);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s ease-out,transform .2s ease-out,visibility 0s linear .2s}
.hdr.is-open .hdr__nav{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.hdr__nav a:not(.btn){display:flex;align-items:center;min-height:56px;padding:0 var(--space-2);border-bottom:1px solid var(--card-line);font-size:20px;font-weight:700;letter-spacing:-.01em;text-decoration:none}
.hdr__nav a:not(.btn):hover{color:var(--brand)}
.hdr__navcta{margin-top:var(--space-4)}
.theme{display:none}
@media (min-width:900px){
  :root{--hdr-h:84px}
  .hdr{grid-template-columns:1fr auto 1fr;padding-inline:var(--space-6)}
  .hdr__burger,.hdr__nav .hdr__navcta{display:none}
  .hdr__nav{position:static;flex-direction:row;gap:var(--space-8);padding:0;background:none;color:inherit;border:0;border-radius:0;box-shadow:none;opacity:1;visibility:visible;transform:none}
  .hdr__nav a:not(.btn){min-height:44px;padding:0;border:0;font-size:16px;transition:opacity .2s ease-out}
  .hdr__nav a:not(.btn):hover{color:inherit;opacity:.65}
  .theme{display:block}
  .hdr__brand img{height:64px}
}

/* Button */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:48px;padding:var(--space-3) 26px;border-radius:var(--radius-pill);border:1px solid var(--brand);background:var(--brand);color:var(--on-brand);font:600 17px/1 var(--font-sans);letter-spacing:-.01em;text-decoration:none;cursor:pointer;transition:background-color .2s ease-out,border-color .2s ease-out,color .2s ease-out}
.btn:hover{background:var(--brand-hover);border-color:var(--brand-hover)}
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--line-strong)}
.btn--ghost:hover{background:var(--scrim);border-color:var(--ink);color:var(--ink)}
.btn--lg{font-size:18px;min-height:56px;padding:var(--space-4) 34px}
.btn[disabled]{opacity:.35;cursor:not-allowed}
.hero .btn--ghost{background:var(--ghost-bg);color:var(--ghost-fg);border-color:var(--ghost-line)}
.hero .btn--ghost:hover{background:var(--ghost-hover);border-color:var(--ghost-fg);color:var(--ghost-fg)}
.cta .btn--ghost{color:var(--on-dark);border-color:var(--dark-line)}
.cta .btn--ghost:hover{background:#ffffff1a;border-color:var(--on-dark);color:var(--on-dark)}

/* Card */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--space-6)}
.card{background:var(--surface-card);border:1px solid var(--card-line);border-radius:var(--radius-card);box-shadow:var(--shadow-card);overflow:hidden;display:flex;flex-direction:column}
.card__img{aspect-ratio:16/10;object-fit:cover;width:100%}
.card__body{padding:var(--space-8);display:flex;flex-direction:column;gap:var(--space-3);flex:1}
.card__body .lead{color:var(--text-muted);flex:1}

/* Accordion */
.acc{max-width:var(--measure)}
.acc details{border-bottom:1px solid var(--line)}
.acc summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);padding:var(--space-4) 0;font-size:20px;line-height:1.4;letter-spacing:-.01em;font-weight:500}
.acc summary::-webkit-details-marker{display:none}
.acc summary svg{flex:none;transition:transform .24s ease-out}
.acc details[open] summary svg{transform:rotate(180deg)}
.acc details p{padding-bottom:var(--space-5);color:var(--text-muted)}

/* ServiceItem */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:var(--space-10);text-align:center}
.svc__item{display:flex;flex-direction:column;align-items:center;gap:var(--space-3)}
.svc__item svg{width:48px;height:48px}
.svc__item h3{margin-top:var(--space-2);font-size:24px;line-height:1.1;font-weight:700;letter-spacing:-.02em}
.svc__item p{max-width:300px;color:var(--text-muted)}

/* TextLink */
.tl{font-size:16px;font-weight:500;color:inherit;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;display:inline-flex;align-items:center;gap:var(--space-1)}
.tl:hover{text-decoration-thickness:2px}
.prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.prose a:hover{text-decoration-thickness:2px}

/* Input */
.field{display:flex;flex-direction:column;gap:var(--space-2)}
.field label{font-size:16px;font-weight:500}
.input{height:48px;padding:0 var(--space-4);border-radius:var(--radius-chip);border:1px solid var(--line-strong);background:var(--surface-card);color:var(--ink);font:inherit;width:100%}
.input::placeholder{color:var(--text-subtle)}
.input:focus{outline:none;border:2px solid var(--ink);padding-inline:calc(var(--space-4) - 1px)}
textarea.input{height:auto;min-height:120px;padding-block:var(--space-3);border-radius:var(--radius-card)}
.field--error .input{border:2px solid var(--signal);padding-inline:calc(var(--space-4) - 1px)}
.hint{font-size:14px;line-height:1.45;color:var(--signal)}

/* Hero: dunkle Fläche mit Lichtschein, zentriert */
.hero{position:relative;overflow:hidden;background:var(--hero-bg);color:var(--on-hero);text-align:center;margin-top:calc(var(--hdr-h) * -1);padding-top:calc(var(--hdr-h) + clamp(48px,8vw,112px));padding-bottom:clamp(48px,8vw,112px);border-bottom:1px solid var(--hero-edge);border-bottom-left-radius:var(--radius-xl);border-bottom-right-radius:var(--radius-xl)}
.hero::before,.cta::before{content:"";position:absolute;inset:0;pointer-events:none}
.hero::before{background:var(--hero-fx)}
.cta::before{background:radial-gradient(65% 60% at 50% 0%,#286bcd59 0%,transparent 72%)}
.hero__inner{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-6)}
.hero__badge-wrap{display:inline-flex;background:#0a0f1c;border-radius:var(--radius-sm);padding:var(--space-2) var(--space-4);margin-bottom:var(--space-4)}
.hero__badge{width:150px;height:auto}
.hero__title{max-width:18ch}
.hero__lead{color:var(--on-hero-muted);max-width:38ch}
.hero__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--space-3)}

/* Vergleich (Werkstatt | Kfz-Gutachten | Versicherung) */
.compare{display:grid;gap:var(--space-6);align-items:start}
.compare__col{background:var(--surface-card);border:1px solid var(--card-line);border-radius:var(--radius-card);box-shadow:var(--shadow-card);padding:var(--space-8)}
.compare__col h3{font-size:28px;line-height:1.1;font-weight:700;letter-spacing:-.02em;text-align:center}
.compare__list{list-style:none;margin:var(--space-6) 0 0;padding:0}
.compare__list li{display:flex;align-items:flex-start;gap:var(--space-3);padding-block:var(--space-4);font-size:18px;line-height:1.4;color:var(--text-muted)}
.compare__list li+li{border-top:1px solid var(--line)}
.compare__list svg{flex:none;margin-top:1px}
.compare__col--main{border-color:transparent;display:flex;flex-direction:column;align-items:center;text-align:center;background:var(--brand);color:var(--on-brand);box-shadow:var(--shadow-feature);padding-block:var(--space-10)}
.compare__col--main h3{font-size:32px}
.compare__logo{height:64px;width:auto;margin-bottom:var(--space-6);filter:brightness(0) invert(1)}
.compare__sub{margin-top:var(--space-2);font-size:16px;line-height:1.5}
.compare__col--main .compare__list{align-self:stretch;text-align:left;margin-bottom:var(--space-8)}
.compare__col--main .compare__list li{font-size:19px;line-height:1.4;letter-spacing:-.01em;color:inherit}
.compare__col--main .compare__list li+li{border-top:1px solid #ffffff40}
.compare__col--main .btn{background:var(--on-brand);color:var(--brand);border-color:var(--on-brand)}
.compare__col--main .btn:hover{background:transparent;color:var(--on-brand);border-color:var(--on-brand)}
.compare__col--main .btn:focus-visible{outline-color:var(--on-brand)}
.compare__note{margin-top:var(--space-4);font-size:16px;line-height:1.5;max-width:36ch}
.compare__title{text-align:center;margin-bottom:clamp(32px,5vw,56px)}
@media (min-width:640px){.compare{grid-template-columns:1fr 1fr}.compare__col--main{grid-column:1/-1}}
@media (min-width:1200px){.compare{grid-template-columns:1fr 1.3fr 1fr}.compare__col--left{grid-column:1;grid-row:1}.compare__col--main{grid-column:2;grid-row:1}.compare__col--right{grid-column:3;grid-row:1}.compare{align-items:center}}

/* Kontakt-Band: dunkle, runde Fläche */
.cta{position:relative;overflow:hidden;background:var(--dark-bg);color:var(--on-dark);border-radius:var(--radius-xl);padding:clamp(40px,7vw,88px) var(--space-6);display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-5)}
.cta>*{position:relative}
.cta__lead{max-width:40ch;color:var(--on-dark-muted)}
.cta .tl{min-height:44px}

/* Rechtstexte */
.legal{max-width:var(--measure);margin-inline:auto;padding:clamp(40px,6vw,88px) max(16px,env(safe-area-inset-left,0px))}
.legal h1{font-size:clamp(32px,5vw,48px);line-height:1.1;font-weight:700;letter-spacing:-.03em;margin-bottom:var(--space-8)}
.legal h2{font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.01em;margin:var(--space-8) 0 var(--space-2)}
.legal p{margin-bottom:var(--space-3);color:var(--text-muted)}

/* Footer: dunkel, vier Spalten, Leiste unten */
.site-footer{position:relative;background:var(--dark-bg);color:var(--on-dark-muted);font-size:16px;line-height:1.5}
.site-footer::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,transparent,var(--brand) 30%,var(--brand) 70%,transparent)}
.footer__grid{display:grid;grid-template-columns:1fr;gap:var(--space-10) var(--space-8);padding-block:clamp(48px,7vw,80px) var(--space-8)}
.footer__brand{display:inline-flex;align-items:center;min-height:44px}
.footer__brand img{height:56px;width:auto;filter:brightness(0) invert(1)}
.footer__company{margin-top:var(--space-4);font-style:normal}
.footer__company strong{display:block;color:var(--on-dark);font-weight:700}
.footer__title{margin:0 0 var(--space-3);font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--on-dark)}
.footer__list{list-style:none;margin:0;padding:0}
.site-footer a{display:inline-flex;align-items:center;min-height:44px;color:var(--on-dark-muted);text-decoration:none;transition:color .2s ease-out}
.site-footer a:hover{color:var(--on-dark);text-decoration:underline;text-underline-offset:3px}
.footer__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);padding-block:var(--space-4);border-top:1px solid #ffffff1f}
.footer__copy{margin:0;font-size:14px}
.site-footer .footer__top{gap:var(--space-2);padding:0 var(--space-4);border:1px solid #ffffff40;border-radius:var(--radius-pill);color:var(--on-dark)}
.site-footer .footer__top:hover{background:#ffffff1a;text-decoration:none}
.footer__col:nth-child(1){--d:.05s}.footer__col:nth-child(2){--d:.15s}.footer__col:nth-child(3){--d:.25s}.footer__col:nth-child(4){--d:.35s}
@media (min-width:640px){.footer__grid{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.footer__grid{grid-template-columns:1.5fr 1fr 1fr 1fr}}

/* Ablauf nach einem Unfallschaden: vier Schritte, Einblendung beim Scrollen */
.steps__title{text-align:center;margin-bottom:clamp(40px,6vw,72px)}
.steps__title::after{content:"";display:block;width:72px;height:6px;margin:var(--space-5) auto 0;border-radius:var(--radius-pill);background:var(--brand)}
.steps{list-style:none;margin:0;padding:0;display:grid;gap:var(--space-6)}
.step{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--space-4);padding:var(--space-8) var(--space-6);background:var(--surface-card);border:1px solid var(--card-line);border-radius:var(--radius-card);box-shadow:var(--shadow-card);transition:transform .3s ease-out,box-shadow .3s ease-out}
.step:hover{transform:translateY(-6px);box-shadow:0 24px 48px #286bcd26,0 1px 2px #10131a0d}
.step__icon{display:grid;place-items:center;width:88px;height:88px;border-radius:50%;background:#286bcd1a;color:var(--brand);box-shadow:0 0 0 8px #286bcd0d;margin-bottom:var(--space-2)}
:root[data-theme="dark"] .step__icon{background:#286bcd33;color:#7fb0ff;box-shadow:0 0 0 8px #286bcd1a}
.step__icon svg{width:40px;height:40px}
.step__title{font-size:22px;line-height:1.2;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.step__text{color:var(--text-muted);font-size:17px;line-height:1.5}
.steps__cta{display:flex;justify-content:center;margin-top:clamp(32px,5vw,56px)}
.step:nth-child(1){--d:.05s}.step:nth-child(2){--d:.2s}.step:nth-child(3){--d:.35s}.step:nth-child(4){--d:.5s}
.steps__cta{--d:.65s}
@media (min-width:640px){.steps{grid-template-columns:1fr 1fr}}
@media (min-width:1100px){
  .steps{grid-template-columns:repeat(4,1fr)}
  /* Verbindungslinie zwischen den Karten, baut sich beim Einblenden auf */
  .step:not(:last-child)::after{content:"";position:absolute;top:calc(var(--space-8) + 44px);left:100%;width:var(--space-6);height:3px;background:var(--brand);transform-origin:left;transition:transform .5s ease-out}
}
/* Animationen nur mit JavaScript (html.js), sonst alles sichtbar */
@keyframes rise{from{opacity:0;transform:translateY(32px)}to{opacity:1;transform:none}}
@keyframes grow{to{transform:scaleX(1)}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes ring{0%,100%{transform:rotate(0)}15%,45%{transform:rotate(-14deg)}30%,60%{transform:rotate(14deg)}75%{transform:rotate(0)}}
.js [data-reveal]{opacity:0}
.js [data-reveal].is-visible{opacity:1;animation:rise .7s ease-out var(--d,0s) backwards}
.js .steps__title::after{transform:scaleX(0)}
.js .steps__title.is-visible::after{animation:grow .8s ease-out .35s forwards}
.js .step:not(:last-child)::after{transform:scaleX(0)}
.js .step.is-visible:not(:last-child)::after{transform:scaleX(1);transition-delay:calc(var(--d,0s) + .45s)}
.js .step__icon .check{stroke-dasharray:12;stroke-dashoffset:12}
.js .step.is-visible .step__icon .check{animation:draw .6s ease-out calc(var(--d,0s) + .55s) forwards}
.js .step--call.is-visible .step__icon svg{animation:ring 1.3s ease-in-out calc(var(--d,0s) + .9s) 1}
@media (prefers-reduced-motion:reduce){
  .js [data-reveal]{opacity:1}
  .js .steps__title::after,.js .step:not(:last-child)::after{transform:none}
  .js .step__icon .check{stroke-dashoffset:0}
}

/* Leistungsangebot: Zweispalter, Überschrift klebt links beim Scrollen */
.offer-intro{max-width:72ch;margin:0 auto clamp(32px,5vw,56px);text-align:center;color:var(--text-muted)}
.offers{display:grid;gap:var(--space-6)}
.offer{position:relative;overflow:hidden;display:grid;gap:var(--space-6);padding:clamp(28px,4vw,56px) clamp(24px,4vw,56px) clamp(28px,4vw,56px) clamp(30px,4.4vw,62px);background:var(--surface-card);border:1px solid var(--card-line);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
.offer::before{content:"";position:absolute;left:0;top:0;bottom:0;width:6px;background:var(--brand);transform-origin:top}
.offer__head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-4)}
.offer__icon{width:64px;height:64px;margin-bottom:0}
.offer__icon svg{width:30px;height:30px}
.offer__title{font-size:clamp(24px,2.6vw,32px);line-height:1.15;font-weight:700;letter-spacing:-.025em;text-wrap:balance}
.offer__body p{max-width:68ch;font-size:18px;line-height:1.7;color:var(--text-muted)}
.offer__body>*+*{margin-top:var(--space-4)}
.offer__body ul{margin-bottom:0;padding-left:1.3em;max-width:68ch;font-size:18px;line-height:1.6;color:var(--text-muted)}
.offer__body li+li{margin-top:var(--space-2)}
.offer__body li::marker{color:var(--brand)}
@media (min-width:900px){
  .offer{grid-template-columns:minmax(0,5fr) minmax(0,8fr);gap:clamp(40px,5vw,72px)}
  .offer__head{position:sticky;top:calc(var(--hdr-h) + var(--space-6));align-self:start}
}
@keyframes growY{to{transform:scaleY(1)}}
.js .offer::before{transform:scaleY(0)}
.js .offer.is-visible::before{animation:growY .9s ease-out .25s forwards}
@media (prefers-reduced-motion:reduce){.js .offer::before{transform:none}}
/* Listenpunkte blenden gestaffelt ein */
.offer li:nth-child(1){--i:0}.offer li:nth-child(2){--i:1}.offer li:nth-child(3){--i:2}.offer li:nth-child(4){--i:3}.offer li:nth-child(5){--i:4}.offer li:nth-child(6){--i:5}.offer li:nth-child(7){--i:6}.offer li:nth-child(8){--i:7}
.js .offer li{opacity:0}
.js .offer.is-visible li{opacity:1;animation:rise .5s ease-out calc(.35s + var(--i,0) * .07s) backwards}
@media (prefers-reduced-motion:reduce){.js .offer li{opacity:1}}

/* Kacheln für die Prüfpunkte */
.offer__body ul.tiles{list-style:none;margin:var(--space-4) 0 0;padding:0;max-width:none;display:grid;gap:var(--space-3);grid-template-columns:1fr;font-size:16px}
.offer__body .tiles li+li{margin-top:0}
.tile{display:flex;align-items:center;gap:14px;padding:14px 16px;background:#286bcd0d;border:1px solid var(--card-line);border-radius:18px;transition:transform .25s ease-out,box-shadow .25s ease-out;animation:rise .5s ease-out backwards;animation-delay:calc(.15s + var(--i,0) * .07s)}
.tile:hover{transform:translateY(-3px);box-shadow:0 14px 28px #286bcd1f}
.tile__icon{flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;background:#286bcd1f;color:var(--brand)}
:root[data-theme="dark"] .tile__icon{background:#286bcd33;color:#7fb0ff}
.tile__text{font-size:16px;line-height:1.4;color:var(--text-muted)}
.tile:nth-child(1){--i:0}.tile:nth-child(2){--i:1}.tile:nth-child(3){--i:2}.tile:nth-child(4){--i:3}.tile:nth-child(5){--i:4}.tile:nth-child(6){--i:5}.tile:nth-child(7){--i:6}
@media (min-width:640px){.offer__body ul.tiles{grid-template-columns:1fr 1fr}}

/* Leistungsangebot: Seitennavigation links, Karten rechts */
.lnav-wrap{display:grid;gap:var(--space-6)}
.lnav ol{list-style:none;margin:0;padding:0;display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:var(--space-2)}
.lnav a{display:block;padding:10px 18px;border:1px solid var(--card-line);border-radius:var(--radius-pill);background:var(--surface-card);color:var(--text-muted);font-weight:600;line-height:1.3;text-decoration:none;white-space:nowrap}
.lnav a:hover{color:var(--ink);border-color:var(--ink)}
.lnav a[aria-current="true"]{background:var(--brand);border-color:var(--brand);color:var(--on-brand)}
.offers--nav .offer{grid-template-columns:1fr}
.offers--nav .offer__head{position:static}
@media (min-width:1000px){
  .lnav-wrap{grid-template-columns:280px minmax(0,1fr);gap:var(--space-10);align-items:start}
  .lnav{position:sticky;top:calc(var(--hdr-h) + var(--space-6))}
  .lnav ol{flex-direction:column;overflow:visible;gap:0;padding:0}
  .lnav a{padding:14px 18px;border:0;border-left:3px solid var(--line);border-radius:0 12px 12px 0;background:transparent;white-space:normal;transition:background-color .2s ease-out,border-color .2s ease-out}
  .lnav a:hover{background:var(--scrim);border-left-color:var(--line-strong);color:var(--ink)}
  .lnav a[aria-current="true"]{background:#286bcd14;border-left-color:var(--brand);color:var(--ink)}
}

/* Karte neben der Navigation: einspaltig, enger Abstand */
.offers--nav .offer{grid-template-columns:1fr;row-gap:var(--space-5)}
.offer__body ol{margin-bottom:0;padding-left:1.4em;max-width:68ch;font-size:18px;line-height:1.7;color:var(--text-muted)}
.offer__body ol li+li{margin-top:var(--space-2)}
.offer__body ol li::marker{color:var(--brand);font-weight:700}
.offer__body strong{color:var(--ink);font-weight:700}

/* Ratgeber-Übersicht */
.guide__head{max-width:820px;margin:0 0 clamp(32px,5vw,48px);text-align:left}
.guide__intro{margin-top:var(--space-4);color:var(--text-muted)}
/* Ratgeber-Artikel */
.article{padding-block:clamp(40px,6vw,88px)}
.article h1{margin:var(--space-3) 0 var(--space-3);font-size:clamp(30px,4.4vw,52px);line-height:1.1;font-weight:700;letter-spacing:-.03em;text-wrap:balance}
.art-main p.article__lead{margin-top:var(--space-6);padding:var(--space-5) var(--space-6);font-size:clamp(19px,2vw,21px);line-height:1.55;font-weight:500;color:var(--ink);background:var(--surface-card);border:1px solid var(--card-line);border-left:6px solid var(--brand);border-radius:var(--radius-card);box-shadow:var(--shadow-card)}
.art-main h2{margin:clamp(40px,6vw,64px) 0 var(--space-4);font-size:clamp(26px,3vw,32px);line-height:1.15;font-weight:700;letter-spacing:-.025em;text-wrap:balance}
.art-main h3{margin:var(--space-8) 0 var(--space-3);font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.02em}
.art-main p{font-size:18px;line-height:1.7;color:var(--text-muted)}
.art-main p+p,.art-main p+ul,.art-main ul+p{margin-top:var(--space-4)}
.art-main ul{margin:var(--space-3) 0 0;padding-left:1.3em;font-size:18px;line-height:1.7;color:var(--text-muted)}
.art-main li+li{margin-top:var(--space-2)}
.art-main li::marker{color:var(--brand)}
.art-main strong{color:var(--ink)}
.art-main a:not(.btn){color:var(--ink)}
.prose a.btn{color:var(--on-brand);text-decoration:none}
.article .prose .article .prose .art-main .acc{max-width:none;margin-top:var(--space-4)}
.art-main .acc summary{font-size:19px;font-weight:600}
.art-main .acc details p{padding-bottom:var(--space-5)}
.article__sources{margin-top:clamp(40px,6vw,64px);padding:var(--space-6);background:var(--surface-card);border:1px solid var(--card-line);border-radius:var(--radius-card)}
.article__sources h2{margin:0 0 var(--space-3);font-size:22px}
.article__sources p,.article__sources ul{font-size:16px;line-height:1.6}
/* Ratgeber im Stil moderner Content-Hubs: Brotkrumen, Kategorie-Pillen, Meta, Kartenlisten, Inhaltsverzeichnis, Infobox */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:0 var(--space-2);font-size:15px;color:var(--text-subtle)}
.crumbs a{display:inline-flex;align-items:center;min-height:44px;color:var(--text-muted);font-weight:600;text-decoration:none}
.crumbs a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.pill{display:inline-flex;align-self:flex-start;padding:4px 12px;border-radius:var(--radius-pill);background:var(--tag-bg);color:var(--tag-fg);font-size:14px;font-weight:700;letter-spacing:.04em;text-decoration:none}
a.pill{position:relative}
a.pill::after{content:"";position:absolute;inset:-8px 0}
a.pill:hover{text-decoration:underline;text-underline-offset:3px}
.art-meta,.article p.art-meta{font-size:15px;line-height:1.5;color:var(--text-subtle)}

/* Übersicht */
.guide-tabs{display:flex;flex-wrap:wrap;gap:var(--space-2);margin:0 0 clamp(32px,5vw,48px);padding-bottom:var(--space-4);border-bottom:1px solid var(--line)}
.guide-tabs a{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;padding:0 18px;border-radius:var(--radius-pill);color:var(--text-muted);font-weight:600;text-decoration:none;transition:background-color .2s ease-out,color .2s ease-out}
.guide-tabs a:hover{background:var(--scrim);color:var(--ink)}
.guide-tabs a[aria-current="page"]{background:var(--ink);color:var(--ink-inverse)}
.guide-tabs__n{display:inline-grid;place-items:center;min-width:24px;height:24px;padding:0 6px;border-radius:var(--radius-pill);background:#10131a14;font-size:14px}
.guide-tabs a[aria-current="page"] .guide-tabs__n{background:#ffffff33}
:root[data-theme="dark"] .guide-tabs__n{background:#ffffff1f}
.guide__sec{margin:clamp(40px,6vw,64px) 0 var(--space-6);font-size:clamp(26px,3vw,32px);line-height:1.15;font-weight:700;letter-spacing:-.025em}
.guide-tabs+.guide__sec{margin-top:0}
.guide{padding-top:clamp(40px,6vw,88px)}
.art-list{display:grid;gap:var(--space-6)}
.art-grid{display:grid;gap:var(--space-6);grid-template-columns:repeat(auto-fill,minmax(min(300px,100%),1fr))}
.art-card{display:grid;grid-template-columns:1fr;gap:var(--space-6);padding:var(--space-6);background:var(--surface-card);border:1px solid var(--card-line);border-radius:var(--radius-card);box-shadow:var(--shadow-card);color:inherit;text-decoration:none;transition:box-shadow .3s ease-out,transform .3s ease-out}
.art-card__thumb{display:grid;place-items:center;min-height:120px;border-radius:var(--radius-card);background:var(--tag-bg);color:var(--brand)}
:root[data-theme="dark"] .art-card__thumb{color:#7fb0ff}
.art-card__body{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3)}
.art-card__title{font-size:clamp(22px,2.4vw,26px);line-height:1.2;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.art-card__text{font-size:18px;line-height:1.5;color:var(--text-muted)}
.art-card__more{display:inline-flex;align-items:center;gap:var(--space-2);margin-top:auto;padding-top:var(--space-2);font-size:16px;font-weight:700;color:var(--brand)}
:root[data-theme="dark"] .art-card__more{color:#7fb0ff}
a.art-card:hover{box-shadow:0 24px 48px #286bcd26,0 1px 2px #10131a0d}
@media (prefers-reduced-motion:no-preference){a.art-card:hover{transform:translateY(-4px)}}
@media (min-width:700px){.art-list .art-card{grid-template-columns:200px 1fr;align-items:stretch}.art-list .art-card__thumb{min-height:0}}
.topic-tiles{display:grid;gap:var(--space-6);grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.topic-tile{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);padding:var(--space-8);border:1px dashed var(--line-strong);border-radius:var(--radius-card)}
.topic-tile__title{font-size:22px;line-height:1.25;font-weight:700;letter-spacing:-.02em;text-wrap:balance}
.guide__band,.art-band{margin-top:clamp(56px,8vw,96px)}

/* Artikel */
.art-head{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-3);max-width:900px;margin-bottom:var(--space-8)}
.art-head h1{margin:0}
.art-hero{position:relative;display:grid;place-items:center;height:clamp(120px,18vw,220px);margin-bottom:clamp(32px,5vw,56px);overflow:hidden;border-radius:var(--radius-xl);background:var(--hero-bg);border:1px solid var(--hero-edge);color:var(--brand)}
.art-hero::before{content:"";position:absolute;inset:0;background:var(--hero-fx)}
.art-hero svg{position:relative}
:root[data-theme="dark"] .art-hero{color:#7fb0ff}
.art-layout{display:grid;gap:var(--space-8);justify-content:start}
.art-main{max-width:var(--measure)}
.toc{padding:var(--space-2) var(--space-6) var(--space-3);background:var(--surface-card);border:1px solid var(--card-line);border-radius:var(--radius-card);font-size:15px}
.toc summary{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:44px;cursor:pointer;list-style:none;font-size:14px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--text-subtle)}
.toc summary::-webkit-details-marker{display:none}
.toc summary svg{flex:none;transition:transform .24s ease-out}
.toc[open] summary svg{transform:rotate(180deg)}
.toc ol{list-style:none;margin:0;padding:0}
.toc a{display:flex;align-items:center;min-height:44px;padding:var(--space-1) 0;color:var(--text-muted);font-weight:500;line-height:1.35;text-decoration:none}
.toc a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (min-width:1100px){
  .art-layout{grid-template-columns:minmax(0,var(--measure)) 300px;gap:var(--space-15)}
  .art-main{grid-column:1;grid-row:1}
  .toc-nav{grid-column:2;grid-row:1;align-self:start;position:sticky;top:calc(var(--hdr-h) + var(--space-6))}
  .toc summary{pointer-events:none;cursor:default}
  .toc summary svg{display:none}
}
.callout{margin-top:var(--space-6);padding:var(--space-4) var(--space-5);background:var(--tag-bg);border-radius:var(--radius-card)}
.callout strong{display:block;margin-bottom:var(--space-1);font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:var(--tag-fg)}
.article .callout p{font-size:16px;line-height:1.55;color:var(--ink)}
.art-more{margin-top:clamp(56px,8vw,96px)}
.art-more>.guide__sec{margin-top:0}
.art-more .art-grid{margin-bottom:var(--space-6)}

/* Bild im Artikel und in Karten */
.art-hero--img{display:block;height:auto;margin:0 0 clamp(32px,5vw,56px);padding:0;background:none;border:0;color:inherit}
.art-hero--img::before{display:none}
.art-hero--img img{display:block;width:100%;height:auto;aspect-ratio:16/9;max-height:520px;object-fit:cover;object-position:left center;border-radius:var(--radius-xl);border:1px solid var(--card-line)}
.art-hero--img figcaption{margin-top:var(--space-2);font-size:14px;line-height:1.4;color:var(--text-subtle)}
.art-card__thumb--img{padding:0;overflow:hidden;aspect-ratio:16/9;min-height:0;background:var(--surface-100)}
.art-card__thumb--img img{display:block;width:100%;height:100%;object-fit:cover}
@media (min-width:700px){.art-list .art-card__thumb--img{aspect-ratio:auto;min-height:150px}}