/* CAR AUDIT — gemeinsames Stylesheet aller Seiten.
   Ausgelagert, weil die Seite jetzt mehrseitig ist: inline wären die
   Tokens und Komponenten sonst in acht Dateien dupliziert. */

/* ============ Tokens ============ */
:root{
  --graphite:#141414;
  --graphite-2:#1b1d21;
  --graphite-3:#22252b;
  --silver:#9aa3ad;
  --silver-light:#c6ccd3;
  --amber:#f2a900;
  --amber-hover:#ffbb1f;
  --text:#e8eaee;
  --text-dim:#aab1ba;
  --line:rgba(154,163,173,.22);
  --error:#f0b3a0;
  --error-line:#c96a4a;
  --graphite-0:#10131a;
  --ease-out:cubic-bezier(.23,1,.32,1);
  --font-display:"Chakra Petch",system-ui,sans-serif;
  --font-body:"Inter",system-ui,sans-serif;
  --container:1200px;
  --pad-x:clamp(20px,4vw,48px);
  --section-pad:clamp(88px,11vw,150px);
}

/* ============ Base ============ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--graphite);
  color:var(--text);
  font-family:var(--font-body);
  font-size:16px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
.container{max-width:var(--container);margin:0 auto;padding-left:var(--pad-x);padding-right:var(--pad-x)}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:100;
  background:var(--amber);color:var(--graphite);
  padding:10px 18px;font-weight:600;
}
.skip-link:focus{left:0}

:focus-visible{outline:2px solid var(--amber);outline-offset:3px}

h1,h2,h3{font-family:var(--font-display);text-transform:uppercase;font-weight:700;line-height:1.12}
h2{font-size:clamp(26px,3.6vw,42px);letter-spacing:.04em;max-width:18em}
h3{font-size:17px;letter-spacing:.08em;font-weight:600}

/* ============ Kicker ============ */
.kicker{
  display:flex;align-items:center;gap:14px;
  font-family:var(--font-display);font-weight:600;
  font-size:13px;letter-spacing:.24em;text-transform:uppercase;
  color:var(--silver);margin-bottom:20px;
}
.kicker-line{
  width:36px;height:2px;background:var(--amber);flex:none;
  transform-origin:left center;
}
.js .kicker-line{transform:scaleX(0);transition:transform 300ms var(--ease-out)}
.js .is-in .kicker-line{transform:scaleX(1)}

/* ============ Buttons ============ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:600;
  font-size:14px;letter-spacing:.14em;text-transform:uppercase;
  padding:16px 30px;border:1px solid transparent;cursor:pointer;
  transition:background-color 150ms var(--ease-out),border-color 150ms var(--ease-out),color 150ms var(--ease-out),transform 120ms var(--ease-out);
}
.btn:active{transform:scale(.97)}
.btn-arrow{flex:none;margin-left:14px;transition:transform 200ms var(--ease-out)}
.btn-amber{background:var(--amber);color:var(--graphite);border-color:var(--amber)}
.btn-ghost{background:transparent;color:var(--text);border-color:rgba(198,204,211,.4)}
@media (hover:hover) and (pointer:fine){
  .btn-amber:hover{background:var(--amber-hover);border-color:var(--amber-hover)}
  .btn-ghost:hover{border-color:var(--silver-light);color:var(--silver-light)}
  .btn:hover .btn-arrow{transform:translateX(3px)}
}

/* ============ Header ============ */
.site-header{
  position:fixed;inset:0 0 auto 0;z-index:50;
  background-color:rgba(20,20,20,0);
  border-bottom:1px solid transparent;
  transition:background-color 200ms var(--ease-out),border-color 200ms var(--ease-out);
}
.site-header.is-scrolled{
  background-color:rgba(20,20,20,.92);
  border-bottom-color:var(--line);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.header-inner{
  display:flex;align-items:center;justify-content:space-between;
  height:72px;
}
.brand{display:inline-flex;align-items:center}
.brand-mark{height:34px;width:auto}
.site-nav ul{display:flex;gap:34px}
.site-nav a{
  position:relative;
  font-size:13px;font-weight:500;letter-spacing:.06em;
  color:var(--text-dim);padding:6px 0;
  transition:color 150ms var(--ease-out);
}
.site-nav a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
  background:var(--amber);transform:scaleX(0);transform-origin:left center;
  transition:transform 150ms var(--ease-out);
}
.site-nav a.is-active{color:var(--text)}
.site-nav a.is-active::after{transform:scaleX(1)}
@media (hover:hover) and (pointer:fine){
  .site-nav a:hover{color:var(--text)}
}
.nav-cta{color:var(--amber) !important;font-weight:600}
.nav-cta::after{display:none}

/* ============ Mobile-Menü ============ */
.nav-toggle{
  display:none;
  flex-direction:column;justify-content:center;gap:6px;
  width:44px;height:44px;margin-right:-10px;
  background:none;border:0;cursor:pointer;
  align-items:flex-end;
}
.nav-toggle-bar{
  display:block;width:24px;height:2px;background:var(--text);
  transition:transform 200ms var(--ease-out),width 200ms var(--ease-out);
}
.nav-toggle-bar:last-child{width:16px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar{width:24px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:first-child{transform:translateY(4px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:last-child{transform:translateY(-4px) rotate(-45deg)}
@media (hover:hover) and (pointer:fine){
  .nav-toggle:hover .nav-toggle-bar:last-child{width:24px}
}

.mobile-nav{
  position:fixed;inset:0;z-index:45;
  background:rgba(20,20,20,.98);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  display:flex;align-items:center;
  padding-top:72px;
  opacity:0;transition:opacity 220ms var(--ease-out);
}
.mobile-nav[hidden]{display:none}
.mobile-nav.is-open{opacity:1}
.mobile-nav-inner{display:flex;flex-direction:column;width:100%;gap:6px}
.mobile-nav-link{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(26px,7vw,34px);letter-spacing:.05em;text-transform:uppercase;
  color:var(--text);padding:14px 0;
  border-bottom:1px solid var(--line);
}
.mobile-nav-cta{margin-top:28px;align-self:flex-start}
.mobile-nav-inner > *{opacity:0;transform:translateY(10px)}
.mobile-nav.is-open .mobile-nav-inner > *{
  opacity:1;transform:translateY(0);
  transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out);
}
.mobile-nav.is-open .mobile-nav-inner > *:nth-child(1){transition-delay:40ms}
.mobile-nav.is-open .mobile-nav-inner > *:nth-child(2){transition-delay:70ms}
.mobile-nav.is-open .mobile-nav-inner > *:nth-child(3){transition-delay:100ms}
.mobile-nav.is-open .mobile-nav-inner > *:nth-child(4){transition-delay:130ms}
.mobile-nav.is-open .mobile-nav-inner > *:nth-child(5){transition-delay:160ms}

@media (max-width:860px){
  .site-nav{display:none}
  .nav-toggle{display:flex}
}
@media (min-width:861px){
  .mobile-nav{display:none}
}

/* ============ Hero ============ */
.hero{
  position:relative;min-height:100svh;
  display:flex;align-items:center;justify-content:center;
  text-align:center;overflow:hidden;
}
.hero-media{position:absolute;inset:0;z-index:-2;background:var(--graphite)}
.hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:center 62%;
}
.js .hero-media img{
  opacity:0;transform:scale(1.04);
  transition:opacity 900ms var(--ease-out),transform 900ms var(--ease-out);
}
.js .hero.is-ready .hero-media img{opacity:1;transform:scale(1)}
.hero-media.no-img img{display:none}
.hero-media.no-img{
  background:
    radial-gradient(120% 90% at 50% 100%,rgba(242,169,0,.16) 0%,rgba(242,169,0,0) 55%),
    linear-gradient(180deg,var(--graphite-0) 0%,var(--graphite) 70%);
}
.hero-scrim{
  /* z-index positiv: negativ landet im Stacking-Context von .hero-media hinter dem Bild */
  position:absolute;inset:0;z-index:1;
  /* Nur Rand-Verlauf: oben für Logo und Menü, unten als Übergang zur Seite.
     Die Bildmitte bleibt unverdunkelt (Kundenwunsch), die Lesbarkeit der
     Schrift übernimmt der Textschatten weiter unten. */
  background:linear-gradient(180deg,rgba(20,20,20,.36) 0%,rgba(20,20,20,0) 22%,rgba(20,20,20,0) 64%,rgba(20,20,20,.55) 100%);
}
.hero-content{padding-top:72px;padding-bottom:48px}

.hero-title{
  font-size:clamp(38px,7vw,84px);
  letter-spacing:.05em;line-height:1.06;
}
.hero-line{display:block;clip-path:inset(-4% -2% -12% -2%)}
.hero-line-inner{display:block}
.js .hero-line-inner{transform:translateY(112%)}

.js .hero-sub{opacity:0;transition:opacity 500ms var(--ease-out) 360ms}
.js .hero.is-ready .hero-sub{opacity:1}

.hero-ctas{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-top:38px}
.js .hero-ctas{opacity:0;transform:translateY(10px);transition:opacity 450ms var(--ease-out) 440ms,transform 450ms var(--ease-out) 440ms}
.js .hero.is-ready .hero-ctas{opacity:1;transform:translateY(0)}

.scroll-hint{
  position:absolute;left:50%;bottom:26px;
  width:1px;height:44px;background:var(--silver);
  transform:translateX(-50%);
  animation:hint-pulse 2.4s ease-in-out infinite alternate;
}
@keyframes hint-pulse{from{opacity:.15}to{opacity:.65}}

/* ============ Sections shared ============ */
.section{padding-top:var(--section-pad);padding-bottom:var(--section-pad)}
.section-alt{background:var(--graphite-2)}

/* Scroll-Reveals: die Sektionen fliegen abwechselnd von links und von rechts
   ein. Die Richtung kommt als Variable von der Sektion, so setzt die is-in-Regel
   ohne Spezifitätskampf alles auf null. Einmalig, ease-out, nur transform/opacity. */
.js [data-reveal]{opacity:0;transform:translate3d(var(--reveal-x,0px),var(--reveal-y,14px),0)}
.js [data-reveal].is-in{
  opacity:1;transform:translate3d(0,0,0);
  transition:opacity 500ms var(--ease-out),transform 500ms var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}
main > section:nth-of-type(odd){--reveal-x:-40px;--reveal-y:0px}
main > section:nth-of-type(even){--reveal-x:40px;--reveal-y:0px}
@media (max-width:600px){
  main > section:nth-of-type(odd){--reveal-x:-24px}
  main > section:nth-of-type(even){--reveal-x:24px}
}
/* Von rechts einfliegende Elemente ragen kurz über den Rand: ohne Clip
   wackelt die Seite auf dem Handy seitlich. clip statt hidden, weil clip
   keinen Scroll-Container erzeugt; hidden bleibt als Rückfall. */
main{overflow-x:hidden;overflow-x:clip}

/* ============ Problem ============ */
.problem-grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  margin-top:56px;border-top:1px solid var(--line);
}
.problem-cell{
  position:relative;
  padding:34px 34px 34px 0;
}
/* Trennlinie als Pseudoelement, damit sie sich beim Reveal zeichnen kann */
.problem-cell:not(:last-child)::after{
  content:"";position:absolute;top:0;right:0;bottom:0;width:1px;
  background:var(--line);transform-origin:top center;
}
.js .problem-cell:not(:last-child)::after{transform:scaleY(0);transition:transform 500ms var(--ease-out) 120ms}
.js .problem-cell.is-in:not(:last-child)::after{transform:scaleY(1)}
.problem-cell + .problem-cell{padding-left:34px}
.problem-cell:last-child{padding-right:0}
/* .problem-cell-Präfix nötig: sonst gewinnt .problem-cell p mit höherer Spezifität */
.problem-cell .problem-figure{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(40px,4.8vw,60px);line-height:1;
  letter-spacing:.01em;color:var(--text);
  margin-bottom:20px;
}
.problem-cell .problem-figure .unit{
  font-size:.38em;color:var(--silver);
  letter-spacing:.14em;margin-left:.18em;
}
.problem-cell .problem-figure.is-word{font-size:clamp(28px,3.1vw,38px);color:var(--silver-light)}
.problem-cell h3{color:var(--silver);letter-spacing:.2em;font-size:13px;margin-bottom:14px}
.problem-cell p{color:var(--text-dim);font-size:15px}
@media (max-width:860px){
  .problem-grid{grid-template-columns:1fr}
  .problem-cell{padding:30px 0}
  .problem-cell + .problem-cell{padding-left:0}
  .problem-cell:not(:last-child)::after{
    top:auto;left:0;right:auto;bottom:0;
    width:100%;height:1px;transform-origin:left center;
  }
  .js .problem-cell:not(:last-child)::after{transform:scaleX(0)}
  .js .problem-cell.is-in:not(:last-child)::after{transform:scaleX(1)}
}

.punchline{
  margin-top:72px;
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  font-size:clamp(30px,5.4vw,64px);letter-spacing:.03em;line-height:1.18;
  max-width:15em;
}
/* Startwert deutlich gedimmt, sonst ist das Aufleuchten beim Scrollen kaum wahrnehmbar */
.punchline .w{color:rgba(232,234,238,.26);transition:color 260ms var(--ease-out)}
.punchline .w.is-lit{color:var(--text)}
.punchline .w.is-key.is-lit{color:var(--amber)}

/* ============ Bausteine ============ */
.cards-note{color:var(--text-dim);margin-top:14px;max-width:36em}
.card{
  position:relative;background:var(--graphite-3);
  padding:30px 26px 34px;
  border:1px solid var(--line);
  transition:transform 200ms var(--ease-out),border-color 200ms var(--ease-out);
}
.card::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:2px;
  background:var(--amber);transform:scaleY(0);transform-origin:top center;
  transition:transform 200ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .card:hover{transform:translateY(-3px);border-color:rgba(154,163,173,.38)}
  .card:hover::before{transform:scaleY(1)}
  .card:hover .card-num{color:var(--text)}
  .card:hover .card-num::after{background:var(--amber);transform:scaleX(1.6)}
}
/* .card-Präfix nötig: sonst gewinnt .card p mit höherer Spezifität */
.card .card-num{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(30px,2.6vw,36px);line-height:1;
  letter-spacing:.06em;color:var(--silver);
  transition:color 260ms var(--ease-out);
}
.card .card-num.num-flash{color:var(--amber);transition:color 150ms var(--ease-out)}
/* Kurze Linie unter der Ziffer greift das Lichtspur-Motiv auf */
.card-num::after{
  content:"";display:block;width:26px;height:2px;
  background:var(--line);margin-top:16px;
  transform-origin:left center;
  transition:background-color 200ms var(--ease-out),transform 200ms var(--ease-out);
}
.card-num.num-flash::after{background:var(--amber)}
/* Icons: SVG-Dateien aus assets/icons (Silber mit Amber-Lichtspur) */
.card-icon{display:block;width:56px;height:56px;margin:24px 0 20px}
.card h3{margin-bottom:12px;color:var(--text)}
.card p{color:var(--text-dim);font-size:14.5px}
/* .card-Präfix nötig: sonst gewinnt .card p mit höherer Spezifität */
.card .card-price{
  margin-top:14px;font-family:var(--font-display);font-weight:600;
  font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--text);
}

/* ============ Ablauf ============ */
.steps{position:relative;margin-top:72px}
.steps-track{
  position:absolute;top:27px;left:27px;right:27px;height:2px;
  background:var(--amber);transform-origin:left center;
}
.js .steps-track{transform:scaleX(0)}
.js .is-drawn .steps-track{transform:scaleX(1);transition:transform 600ms var(--ease-out)}
.steps-grid{
  position:relative;
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
}
.step{list-style:none}
.step-num{
  width:56px;height:56px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--graphite);border:2px solid var(--amber);
  font-family:var(--font-display);font-weight:700;font-size:18px;
  color:var(--amber);
  margin-bottom:22px;
}
.js .step-num{opacity:0;transform:scale(.8)}
.js .is-drawn .step-num{
  opacity:1;transform:scale(1);
  transition:opacity 350ms var(--ease-out),transform 350ms var(--ease-out);
  transition-delay:var(--step-delay,0ms);
}
.step h3{margin-bottom:10px}
.step p{color:var(--text-dim);font-size:14.5px;max-width:24em}
@media (max-width:860px){
  .steps-track{top:27px;bottom:27px;left:27px;right:auto;width:2px;height:auto;transform-origin:top center}
  .js .steps-track{transform:scaleY(0)}
  .js .is-drawn .steps-track{transform:scaleY(1)}
  .steps-grid{grid-template-columns:1fr;gap:36px}
  .step{display:grid;grid-template-columns:56px 1fr;gap:20px}
  .step-num{margin-bottom:0}
  .step-body{padding-top:8px}
}

/* ============ Privat / Gewerbe ============ */
.panels{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:56px}
@media (max-width:860px){.panels{grid-template-columns:1fr}}
.panel{
  background:var(--graphite-3);border:1px solid var(--line);
  display:flex;flex-direction:column;
}
/* Akzent als kurze Amber-Linie im Textteil — konsistent mit den Kicker-Linien */
.panel-accent .panel-body::before{
  content:"";display:block;width:48px;height:2px;
  background:var(--amber);margin-bottom:20px;
}
.panel-media{aspect-ratio:16/9;overflow:hidden}
.panel-media img{width:100%;height:100%;object-fit:cover}
.panel-body{padding:30px 28px 34px;display:flex;flex-direction:column;flex:1}
.panel-body h3{font-size:20px;letter-spacing:.1em;margin-bottom:6px}
.panel-lead{color:var(--silver-light);font-size:15px;margin-bottom:20px}
.panel-list li{
  position:relative;padding-left:22px;margin-bottom:10px;
  color:var(--text-dim);font-size:14.5px;
}
.panel-list li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:10px;height:2px;background:var(--amber);
}
.panel-link{
  margin-top:auto;padding-top:22px;
  font-family:var(--font-display);font-weight:600;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber);
}
@media (hover:hover) and (pointer:fine){
  .panel-link:hover{color:var(--amber-hover)}
}

/* ============ Vertrauen ============ */
.trust-grid{
  display:grid;grid-template-columns:1.1fr .9fr;gap:56px;
  margin-top:56px;align-items:start;
}
@media (max-width:860px){.trust-grid{grid-template-columns:1fr;gap:40px}}
.trust-copy p{color:var(--text-dim);margin-bottom:18px;max-width:36em}
.trust-facts{
  margin-top:34px;border-top:1px solid var(--line);
}
.trust-facts li{
  display:flex;justify-content:space-between;gap:20px;
  padding:14px 0;border-bottom:1px solid var(--line);
  font-size:14.5px;
}
.trust-facts .k{color:var(--silver)}
.trust-facts .v{color:var(--text);text-align:right}
/* height:auto nötig, sonst erzwingt das height-Attribut die native Pixelhöhe */
.trust-media img{width:100%;height:auto;aspect-ratio:3/2;object-fit:cover;object-position:center 42%}
.report-card{
  margin-top:18px;background:var(--graphite-3);border:1px dashed rgba(154,163,173,.4);
  padding:22px 24px;
}
.report-card h3{font-size:14px;letter-spacing:.14em;margin-bottom:6px}
.report-card p{color:var(--text-dim);font-size:14px}

/* ============ Anfrage ============ */
.form-wrap{max-width:720px;margin-top:56px}
.field{margin-bottom:22px}
.field label{
  display:block;font-size:13px;font-weight:600;letter-spacing:.04em;
  color:var(--silver-light);margin-bottom:8px;
}
.field input,.field textarea{
  width:100%;background:var(--graphite-2);
  border:1px solid var(--line);color:var(--text);
  font-family:var(--font-body);font-size:15px;
  padding:14px 16px;
  transition:border-color 150ms var(--ease-out);
}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--amber)}
.field input::placeholder,.field textarea::placeholder{color:rgba(170,177,186,.78)}
.field textarea{display:block;min-height:124px;line-height:1.55;resize:vertical}
.label-opt{font-weight:400;letter-spacing:0;color:var(--text-dim)}
.req{color:var(--amber);margin-left:3px}
.req-note{font-size:12.5px;color:var(--text-dim);margin-bottom:18px}
.req-note .req{margin-left:0}
.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}
.field .hint{font-size:12.5px;color:var(--text-dim);margin-top:6px}
.field-error{display:none;font-size:12.5px;color:var(--error);margin-top:6px}
.field.has-error input{border-color:var(--error-line)}
.field.has-error .field-error,
.field-group.has-error .field-error{display:block}
/* Leistungsauswahl ist Pflicht: ohne Häkchen färben sich alle Karten */
.field-group.has-error .service-card{border-color:var(--error-line)}
.field-group .field-error{margin-top:10px}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:600px){.field-row{grid-template-columns:1fr}}

fieldset{border:0;margin:30px 0 26px}
legend{
  font-size:13px;font-weight:600;letter-spacing:.04em;
  color:var(--silver-light);margin-bottom:12px;
}
.service-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:600px){.service-grid{grid-template-columns:1fr}}
.service-card{
  position:relative;
  display:flex;align-items:center;gap:12px;
  background:var(--graphite-2);border:1px solid var(--line);
  padding:15px 16px;cursor:pointer;
  transition:border-color 120ms var(--ease-out),background-color 120ms var(--ease-out);
}
.service-card input{position:absolute;opacity:0;pointer-events:none}
.service-box{
  width:18px;height:18px;flex:none;
  border:1px solid var(--silver);position:relative;
  transition:border-color 120ms var(--ease-out),background-color 120ms var(--ease-out);
}
.service-box::after{
  content:"";position:absolute;inset:0;margin:auto;
  width:8px;height:5px;
  border-left:2px solid var(--graphite);border-bottom:2px solid var(--graphite);
  transform:rotate(-45deg) scale(0);
  transition:transform 120ms var(--ease-out);
}
.service-card .t{font-size:14.5px;color:var(--text)}
.service-card:has(input:checked){border-color:var(--amber);background:rgba(242,169,0,.06)}
.service-card:has(input:checked) .service-box{background:var(--amber);border-color:var(--amber)}
.service-card:has(input:checked) .service-box::after{transform:rotate(-45deg) scale(1)}
.service-card:has(input:focus-visible){outline:2px solid var(--amber);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .service-card:hover{border-color:rgba(154,163,173,.45)}
}

.submit-row{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.btn-submit{position:relative;overflow:hidden;white-space:nowrap}
.btn-submit .label-done{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:10px;
  opacity:0;transform:translateY(6px);
  transition:opacity 200ms var(--ease-out) 60ms,transform 200ms var(--ease-out) 60ms;
}
/* Absenden: erst Ladekreis, dann zeichnet sich ein Kreis mit Häkchen.
   Der Ladekreis dreht linear (Dauerbewegung) und schnell, das lässt die
   Wartezeit kürzer wirken. Er läuft nur während des Sendens und friert
   danach an Ort und Stelle ein, statt beim Ausblenden zurückzuspringen. */
.btn-submit .label-loading{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  opacity:0;transform:scale(.9);
  transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out);
}
.btn-spinner{animation:btn-spin 650ms linear infinite paused}
@keyframes btn-spin{to{transform:rotate(360deg)}}
@keyframes btn-pulse{from{opacity:.45}to{opacity:1}}
.btn-submit.is-loading .btn-spinner{animation-play-state:running}
.btn-submit.is-loading .label-default{opacity:0;transform:translateY(-6px)}
.btn-submit.is-loading .label-loading{opacity:1;transform:scale(1);transition-delay:40ms}
.btn-check{flex:none}
.btn-check-ring{
  stroke-dasharray:54;stroke-dashoffset:54;
  transform:rotate(-90deg);transform-box:fill-box;transform-origin:center;
  transition:stroke-dashoffset 300ms var(--ease-out) 60ms;
}
.btn-check-mark{
  stroke-dasharray:11;stroke-dashoffset:11;
  transition:stroke-dashoffset 220ms var(--ease-out) 260ms;
}
.btn-submit.is-sent .btn-check-ring,
.btn-submit.is-sent .btn-check-mark{stroke-dashoffset:0}
.btn-submit .label-default{
  transition:opacity 180ms var(--ease-out),transform 180ms var(--ease-out);
}
.btn-submit.is-sent{transition:background-color 150ms var(--ease-out),border-color 150ms var(--ease-out),color 150ms var(--ease-out),transform 120ms var(--ease-out),width 250ms var(--ease-out)}
.btn-submit.is-sent .label-default{opacity:0;transform:translateY(-6px)}
.btn-submit.is-sent .label-done{opacity:1;transform:translateY(0)}
.btn-submit[aria-disabled="true"]{cursor:default}
/* Fangfeld für Bots: aus dem Bild geschoben statt display:none, das manche Bots erkennen */
.hp{position:absolute;left:-10000px;width:1px;height:1px;overflow:hidden}
.form-error{font-size:13.5px;color:var(--error);max-width:36em}

.form-confirm:not(:empty){margin-top:30px}
/* Bestätigung als Karte mit Zusammenfassung der Anfrage */
.confirm-card{
  max-width:520px;margin:0 auto;padding:30px 30px 24px;
  background:rgba(20,20,20,.55);border:1px solid var(--line);text-align:center;
}
.confirm-kicker{
  display:flex;align-items:center;justify-content:center;gap:12px;
  font-family:var(--font-display);font-weight:600;font-size:12px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--silver);
}
.confirm-kicker .kicker-line{width:28px}
.confirm-title{
  margin-top:14px;font-family:var(--font-display);font-weight:700;
  font-size:clamp(22px,2.6vw,28px);letter-spacing:.04em;text-transform:uppercase;color:var(--text);
}
.confirm-text{margin:10px auto 0;max-width:36ch;font-size:15px;line-height:1.65;color:var(--text-dim)}
.confirm-summary{list-style:none;margin:22px 0 0;padding:0;border-top:1px solid var(--line);text-align:left}
.confirm-summary li{display:flex;justify-content:space-between;align-items:baseline;gap:18px;padding:12px 0;border-bottom:1px solid var(--line)}
.confirm-summary .k{
  flex:none;font-family:var(--font-display);font-weight:600;font-size:12px;
  letter-spacing:.18em;text-transform:uppercase;color:var(--silver);
}
.confirm-summary .v{font-size:14px;color:var(--text);text-align:right}
@media (max-width:600px){
  .confirm-card{padding:26px 20px 20px}
}
/* Die Karte tritt als Ganzes ein (Opacity, 10 px, Scale .98 statt aus dem Nichts),
   darin staffeln Kicker, Titel, Text und Zusammenfassung im 50-ms-Takt;
   die Kicker-Linie zieht sich wie bei den Sektionsköpfen. */
.js .confirm-card{opacity:0;transform:translateY(10px) scale(.98)}
.js .form-confirm.is-on .confirm-card{
  opacity:1;transform:none;
  transition:opacity 320ms var(--ease-out),transform 320ms var(--ease-out);
}
.js .confirm-card > *{opacity:0;transform:translateY(6px)}
.js .form-confirm.is-on .confirm-card > *{
  opacity:1;transform:none;
  transition:opacity 300ms var(--ease-out),transform 300ms var(--ease-out);
}
.js .form-confirm.is-on .confirm-card > :nth-child(2){transition-delay:50ms}
.js .form-confirm.is-on .confirm-card > :nth-child(3){transition-delay:100ms}
.js .form-confirm.is-on .confirm-card > :nth-child(4){transition-delay:150ms}
.js .form-confirm.is-on .kicker-line{transform:scaleX(1);transition-delay:120ms}

/* ============ Footer ============ */
.site-footer{
  border-top:1px solid var(--line);
  padding:60px 0 30px;background:var(--graphite);
}
.footer-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.3fr;gap:40px}
.footer-brand{display:inline-block}
.footer-brand img{width:108px;height:auto}
.footer-claim{margin-top:16px;max-width:28ch;font-size:14px;line-height:1.6;color:var(--text-dim)}
/* Spaltenköpfe im Stil der Kicker */
.footer-head{
  font-family:var(--font-display);font-weight:600;font-size:12px;
  letter-spacing:.24em;text-transform:uppercase;color:var(--silver);margin-bottom:16px;
}
.footer-col ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.footer-col a,.footer-legal a{color:var(--text-dim);transition:color 150ms var(--ease-out)}
.footer-col a{font-size:14px}
.footer-col a[aria-current="page"],.footer-legal a[aria-current="page"]{color:var(--text)}
@media (hover:hover) and (pointer:fine){
  .footer-col a:hover,.footer-legal a:hover{color:var(--text)}
}
.footer-address{font-style:normal;font-size:14px;line-height:1.7;color:var(--text-dim)}
.footer-line{display:block}
.footer-line:first-of-type{margin-top:10px}
.footer-bottom{
  display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;
  margin-top:48px;padding-top:22px;border-top:1px solid var(--line);
}
.footer-copy{font-size:12.5px;color:var(--silver)}
.footer-legal{display:flex;gap:24px;font-size:13px}
@media (max-width:900px){
  .footer-grid{grid-template-columns:1fr 1fr}
}
/* Handy: gestapelt und mittig, wie die Sektionsköpfe */
@media (max-width:600px){
  .footer-grid{grid-template-columns:1fr;gap:34px;text-align:center}
  .footer-claim{margin-left:auto;margin-right:auto}
  .footer-bottom{flex-direction:column;justify-content:center;text-align:center}
}

/* ============ Reduced motion ============ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .hero-media img{transform:none;transition:opacity 400ms var(--ease-out)}
  .js .kicker-line,.js .steps-track{transform:none;transition:opacity 300ms var(--ease-out);opacity:0}
  .js .is-in .kicker-line{opacity:1;transform:none}
  .js .is-drawn .steps-track{opacity:1;transform:none}
  .js .hero-line-inner{transform:none}
  .js .hero-ctas{transform:none}
  .js [data-reveal]{transform:none}
  .js [data-reveal].is-in{transform:none;transition:opacity 400ms var(--ease-out)}
  .js .step-num{transform:none;transition:opacity 300ms var(--ease-out)}
  .js .is-drawn .step-num{transform:none}
  .js .confirm-card,.js .confirm-card > *,
  .js .form-confirm.is-on .confirm-card,.js .form-confirm.is-on .confirm-card > *{transform:none}
  .js .form-confirm.is-on .kicker-line{opacity:1}
  .js .problem-cell:not(:last-child)::after{transform:none;opacity:0;transition:opacity 300ms var(--ease-out)}
  .js .problem-cell.is-in:not(:last-child)::after{transform:none;opacity:1}
  .scroll-hint{animation:none;opacity:.4}
  .btn:active{transform:none}
  .btn-arrow{transition:none}
  .btn:hover .btn-arrow{transform:none}
  .nav-toggle-bar{transition:none}
  .mobile-nav-inner > *{transform:none}
  .mobile-nav.is-open .mobile-nav-inner > *{transform:none;transition:opacity 260ms var(--ease-out)}
  /* Bewegung aus, Information bleibt: Zustände wechseln per Opacity/Farbe */
  .site-nav a::after{transition:none}
  .card{transition:border-color 200ms var(--ease-out)}
  .card-num::after{transition:background-color 200ms var(--ease-out)}
  .card:hover .card-num::after{transform:none}
  .card::before{transform:scaleY(1);opacity:0;transition:opacity 200ms var(--ease-out)}
  .service-box::after{transition:none}
  .btn-submit .label-default,.btn-submit .label-done,.btn-submit .label-loading{transform:none;transition:opacity 200ms var(--ease-out)}
  .btn-submit.is-sent .label-default,.btn-submit.is-sent .label-done,
  .btn-submit.is-loading .label-default,.btn-submit.is-loading .label-loading{transform:none}
  .btn-spinner{animation:btn-pulse 900ms ease-in-out infinite alternate paused}
  .btn-check-ring,.btn-check-mark{stroke-dashoffset:0;transition:none}
  .btn-submit.is-sent{transition-property:background-color,border-color,color}
  @media (hover:hover) and (pointer:fine){
    .card:hover{transform:none}
    .card:hover::before{transform:scaleY(1);opacity:1}
  }
}

/* ============ Rechtsseiten ============ */
/* .kicker und .kicker-line standen hier ein zweites Mal, wortgleich zu Zeile 58.
   Hinter dem Reduced-Motion-Block gewannen sie gegen dessen Regeln. */
.legal{padding-top:calc(72px + clamp(56px,8vw,104px));padding-bottom:clamp(72px,10vw,132px)}
.legal-intro{margin-top:22px;color:var(--text-dim);max-width:34em}
.legal-blocks{margin-top:56px;max-width:44em;border-top:1px solid var(--line)}
.legal-block{padding:28px 0;border-bottom:1px solid var(--line)}
.legal-block p{color:var(--text-dim)}
/* Rechtstexte als Dokument: Titel in Unterseitengröße, Abschnittsköpfe klein und
   gesperrt. Ohne eigene Regel bekamen die h2 die 42 px der Sektionsüberschriften
   und waren größer als der Seitentitel. */
.legal > h1{font-size:clamp(32px,5.4vw,60px);letter-spacing:.04em}
.legal-block h2{
  font-size:clamp(15px,1.3vw,17px);letter-spacing:.12em;line-height:1.3;
  color:var(--text);margin:0 0 14px;max-width:none;
}
/* Platzhalter mitten im Satz schlanker als der Block-Platzhalter */
[data-cms-inline] .placeholder{padding:0 6px;font-size:.9em;letter-spacing:0}
/* Muster-Widerrufsformular: Gedankenstriche wie im Gesetzestext */
.form-muster{list-style:none;margin:0 0 12px;padding:0}
.form-muster li{position:relative;padding-left:18px;margin-bottom:8px;color:var(--text-dim)}
.form-muster li::before{content:"–";position:absolute;left:0}
.legal-block p + p{margin-top:10px}
.placeholder{
  display:inline-block;padding:4px 12px;background:var(--graphite-3);
  border:1px dashed rgba(154,163,173,.4);
  font-size:13px;letter-spacing:.04em;color:var(--silver-light);
}
.back-link{
  display:inline-block;margin-top:44px;
  font-family:var(--font-display);font-weight:600;font-size:13px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber);
}
@media (hover:hover) and (pointer:fine){
  .back-link:hover{color:var(--amber-hover)}
}




/* ============ Unterseiten ============ */
.page-hero{
  position:relative;
  padding-top:calc(72px + clamp(64px,9vw,120px));
  padding-bottom:clamp(48px,6vw,72px);
  border-bottom:1px solid var(--line);
  overflow:hidden;
}
.page-hero-media{position:absolute;inset:0;z-index:0}
.page-hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 55%}
.page-hero-media::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,20,20,.82) 0%,rgba(20,20,20,.7) 55%,var(--graphite) 100%);
}
.page-hero .container{position:relative;z-index:1}
.page-hero h1{
  font-size:clamp(32px,5.4vw,60px);letter-spacing:.04em;
  max-width:16em;
}
.page-lead{
  margin-top:22px;max-width:36em;
  font-size:clamp(15px,1.5vw,18px);color:var(--silver-light);
}
.page-hero .hero-ctas{margin-top:34px;justify-content:flex-start}
.js .page-hero .hero-ctas{opacity:1;transform:none}

.back-link{
  display:inline-flex;align-items:center;gap:10px;
  margin-bottom:22px;
  font-family:var(--font-display);font-weight:600;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--silver);
  transition:color 150ms var(--ease-out);
}
.back-link svg{flex:none}
@media (hover:hover) and (pointer:fine){
  .back-link:hover{color:var(--text)}
}

/* Prüfumfang / Merkmalsliste */
.feature-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:0;
  margin-top:56px;border-top:1px solid var(--line);
}
@media (max-width:760px){.feature-grid{grid-template-columns:1fr}}
.feature{
  padding:32px 34px 32px 0;border-bottom:1px solid var(--line);
}
.feature:nth-child(odd){border-right:1px solid var(--line)}
.feature:nth-child(even){padding-left:34px}
@media (max-width:760px){
  .feature{padding:26px 0}
  .feature:nth-child(odd){border-right:0}
  .feature:nth-child(even){padding-left:0}
}
.feature h3{margin-bottom:12px;color:var(--text)}
.feature p{color:var(--text-dim);font-size:14.5px;max-width:34em}
.feature-mark{
  display:block;width:24px;height:2px;background:var(--amber);
  margin-bottom:18px;transform-origin:left center;
}
.js .feature-mark{transform:scaleX(0);transition:transform 300ms var(--ease-out)}
.js .is-in .feature-mark{transform:scaleX(1)}

/* Kacheln mit Nummer, Titel und Text. Ersetzen die frühere zentrierte Liste:
   gleich breite Kacheln, eine unvollständige letzte Reihe steht mittig. */
.point-grid{
  display:flex;flex-wrap:wrap;justify-content:center;gap:18px;
  max-width:1080px;margin:56px auto 0;
}
.point{
  position:relative;flex:0 1 calc((100% - 36px) / 3);min-width:260px;
  padding:30px 28px 32px;background:var(--graphite-3);border:1px solid var(--line);
}
/* Kurze Lichtspur an der Oberkante */
.point::before{content:"";position:absolute;left:-1px;top:-1px;width:48px;height:2px;background:var(--amber)}
.point-num{font-family:var(--font-display);font-weight:600;font-size:13px;letter-spacing:.12em;color:var(--silver)}
.point h3{margin-top:14px;font-size:16px;line-height:1.3;letter-spacing:.08em;color:var(--text)}
.point p:not(.point-num){margin-top:10px;font-size:14.5px;line-height:1.65;color:var(--text-dim)}
@media (max-width:900px){.point{flex-basis:calc((100% - 18px) / 2)}}
@media (max-width:600px){.point{flex-basis:100%;min-width:0}}

/* Weiterführende Bausteine */
.next-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
@media (max-width:860px){.next-grid{grid-template-columns:1fr}}
.next-card{
  display:block;background:var(--graphite-3);border:1px solid var(--line);
  padding:26px 24px 28px;
  transition:transform 200ms var(--ease-out),border-color 200ms var(--ease-out);
}
.next-card .num{
  font-family:var(--font-display);font-weight:700;font-size:13px;
  letter-spacing:.22em;color:var(--silver);
}
.next-card h3{margin:14px 0 8px}
.next-card p{color:var(--text-dim);font-size:14px}
@media (hover:hover) and (pointer:fine){
  .next-card:hover{transform:translateY(-3px);border-color:rgba(154,163,173,.38)}
}

/* FAQ als Akkordeon: <details> ist ohne JS bedienbar und für Screenreader ein
   Schalter mit Auf/Zu-Zustand. Beim Öffnen blendet nur die Antwort ein (Opacity
   und 4 px Weg); die Höhe springt, statt teuer animiert zu werden. Schließen ist
   sofort, Ausgänge dürfen schneller sein als Eingänge. */
.faq{margin:48px auto 0;max-width:820px;border-top:1px solid var(--line)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:24px 0;cursor:pointer;list-style:none;
  font-family:var(--font-display);font-weight:600;font-size:clamp(15px,1.5vw,17px);
  letter-spacing:.06em;text-transform:uppercase;color:var(--text);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:focus{outline:none}
.faq-item summary:focus-visible{outline:2px solid var(--amber);outline-offset:4px}
/* Plus, das sich beim Öffnen zum X dreht */
.faq-icon{position:relative;width:14px;height:14px;flex:none;transition:transform 200ms var(--ease-out)}
.faq-icon::before,.faq-icon::after{
  content:"";position:absolute;left:0;top:6px;width:14px;height:2px;background:var(--amber);
}
.faq-icon::after{transform:rotate(90deg)}
.faq-item[open] .faq-icon{transform:rotate(45deg)}
.faq-item p{
  padding:0 34px 26px 0;max-width:62ch;
  color:var(--text-dim);font-size:15px;line-height:1.7;
  opacity:1;transform:translateY(0);
  transition:opacity 220ms var(--ease-out),transform 220ms var(--ease-out);
}
@starting-style{
  .faq-item[open] p{opacity:0;transform:translateY(-4px)}
}
@media (hover:hover) and (pointer:fine){
  .faq-item summary:hover .faq-q{color:var(--silver-light)}
}
.faq-q{transition:color 150ms var(--ease-out)}

/* Abschluss-CTA */
.cta-band{
  border-top:1px solid var(--line);
  padding:clamp(64px,8vw,104px) 0;
  text-align:center;
}
.cta-band h2{margin:0 auto;max-width:16em}
.cta-band p{margin:20px auto 0;max-width:32em;color:var(--text-dim)}
.cta-band .hero-ctas{justify-content:center;margin-top:34px}
.js .cta-band .hero-ctas{opacity:1;transform:none}

.section-more{margin-top:48px}
.section-more-tight{margin-top:26px}

/* Verlinkte Karten (Leistungsübersicht und „Dazu buchbar") */
.card-link{padding-bottom:64px}
.card-go{
  position:absolute;left:26px;bottom:28px;
  display:block;color:var(--silver);
  transition:transform 200ms var(--ease-out),color 200ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .card-link:hover .card-go{transform:translateX(4px);color:var(--amber)}
}
@media (prefers-reduced-motion:reduce){
  .card-go{transition:color 200ms var(--ease-out)}
  .card-link:hover .card-go{transform:none}
  .faq-icon{transition:none}
  .faq-item p{transform:none;transition:opacity 220ms var(--ease-out)}
  /* muss nach .js .feature-mark stehen, sonst gewinnt dort die scaleX-Bewegung */
  .js .feature-mark,.js .is-in .feature-mark{transform:none;transition:none}
}

/* ============ Hero: langsames Leben ============
   Eine sehr träge Drift auf <picture>, damit der Scrim ruhig bleibt. */
.hero-media picture{
  display:block;width:100%;height:100%;
  /* eigene GPU-Ebene: ohne das muss der Browser die driftende Ebene beim
     Scrollen neu zeichnen, was sich als Ruckeln bemerkbar macht */
  will-change:transform;
  backface-visibility:hidden;
}
@keyframes hero-drift{
  /* startet bei scale(1) — dort endet die Ladesequenz, sonst springt das Bild */
  from{transform:scale(1) translate3d(0,0,0)}
  to{transform:scale(1.07) translate3d(-1.2%,-0.8%,0)}
}
.js .hero.is-ready .hero-media picture{
  animation:hero-drift 42s ease-in-out 1.1s infinite alternate;
}
@media (prefers-reduced-motion:reduce){
  .js .hero.is-ready .hero-media picture{animation:none}
}

/* Fehlerzustand des Absende-Buttons: einmal rot, X und kurzer Shake */
.btn-submit .label-error{
  position:absolute;inset:0;
  display:flex;align-items:center;justify-content:center;gap:9px;
  opacity:0;transform:translateY(6px);
  transition:opacity 160ms var(--ease-out),transform 160ms var(--ease-out);
}
@keyframes btn-shake{
  0%,100%{transform:translateX(0)}
  18%{transform:translateX(-6px)}
  38%{transform:translateX(5px)}
  58%{transform:translateX(-3px)}
  78%{transform:translateX(2px)}
}
.btn-submit.is-invalid{
  background:var(--error-line);border-color:var(--error-line);color:var(--graphite);
  animation:btn-shake 420ms var(--ease-out);
}
.btn-submit.is-invalid .label-default{opacity:0;transform:translateY(-6px)}
.btn-submit.is-invalid .label-error{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){
  .btn-submit.is-invalid{animation:none}
  .btn-submit .label-error{transform:none;transition:opacity 160ms var(--ease-out)}
  .btn-submit.is-invalid .label-default{transform:none}
  .btn-submit.is-invalid .label-error{transform:none}
}

/* Textlinks im Inhalt als klickbar kennzeichnen: Pfeil wie auf den Buttons.
   Als Maske, damit er die Linkfarbe erbt. */
.panel-link{display:inline-flex;align-items:center;gap:10px}
.panel-link::after{
  content:"";flex:none;width:17px;height:10px;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='10' viewBox='0 0 17 10' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.8 5h14.4M11.4 1.2 15.2 5l-3.8 3.8'/%3E%3C/svg%3E") no-repeat center/contain;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='10' viewBox='0 0 17 10' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M0.8 5h14.4M11.4 1.2 15.2 5l-3.8 3.8'/%3E%3C/svg%3E") no-repeat center/contain;
  transition:transform 200ms var(--ease-out);
}
@media (hover:hover) and (pointer:fine){
  .panel-link:hover::after{transform:translateX(4px)}
}
@media (prefers-reduced-motion:reduce){
  .panel-link::after{transition:none}
  .panel-link:hover::after{transform:none}
}

/* Anfrage-Sektion mittig setzen — Felder bleiben linksbündig lesbar */
#anfrage .form-wrap{margin-left:auto;margin-right:auto}
/* Button exakt mittig: der Demo-Hinweis rutscht darunter, sonst
   zentriert justify-content beide Elemente gemeinsam */
#anfrage .submit-row{flex-direction:column;align-items:center;gap:14px;text-align:center}
#anfrage .form-confirm{text-align:center}
@media (max-width:600px){
  #anfrage .submit-row{align-items:stretch;text-align:center}
  /* Nach dem Absenden wird der Button schmaler; ohne das rutschte er nach links */
  #anfrage .btn-submit.is-sent{align-self:center}
}

/* Punchline mittig — das Wort-Aufleuchten läuft weiter in Lesereihenfolge */
.punchline{margin-left:auto;margin-right:auto;text-align:center}

/* Sektionsköpfe auf allen Seiten mittig: Kicker, Überschrift und die Absätze,
   die direkt im Container stehen. Vorher galt das nur für Sektionen mit
   Checkliste, beim Scrollen sprang die Ausrichtung zwischen links und mittig.
   Fließtext in Karten, Listen, FAQ und Rechtstexten bleibt linksbündig,
   sonst findet das Auge den Zeilenanfang nicht. */
.section > .container > .kicker,
.page-hero .kicker,
.legal > .kicker{justify-content:center}
.section > .container > h2,
.page-hero h1,
.legal > h1{text-align:center;margin-left:auto;margin-right:auto}
.section > .container > .cards-note,
.section > .container > .page-lead,
.section > .container > .section-more,
.page-hero .page-lead,
.legal > .legal-intro{text-align:center;margin-left:auto;margin-right:auto}
.page-hero .hero-ctas{justify-content:center}
/* Rechtstexte (Impressum, Datenschutz, Widerruf): Kopf linksbündig, damit er mit
   dem Textblock darunter eine Kante bildet. 404 und Danke bleiben mittig. */
.legal-doc > .kicker{justify-content:flex-start}
.legal-doc > h1,
.legal-doc > .legal-intro{text-align:left;margin-left:0;margin-right:0}

/* Paket-Kombinationen: die vier Icons zeigen auf einen Blick, welche Bausteine
   enthalten sind (hell) und welche nicht (blass). Unten steht der Preis, der
   häufigste Fall ist mit Amber-Rahmen und Etikett hervorgehoben. */
.combo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:56px}
@media (max-width:900px){.combo-grid{grid-template-columns:1fr}}
.combo{
  position:relative;display:flex;flex-direction:column;
  background:var(--graphite-3);border:1px solid var(--line);
  padding:28px 26px 32px;
}
.combo-icons{display:flex;gap:10px;margin-bottom:16px}
.combo-icons img{width:40px;height:40px;opacity:.28;filter:grayscale(1)}
.combo-icons img.is-on{opacity:1;filter:none}
.combo h3{margin-bottom:10px}
.combo p{color:var(--text-dim);font-size:14.5px}
.combo .combo-includes{
  margin-bottom:18px;font-family:var(--font-display);font-weight:600;font-size:12px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber);
}
.combo > p:not(.combo-includes):not(.combo-price):not(.combo-badge){margin-bottom:24px}
.combo .combo-price{
  margin-top:auto;padding-top:18px;border-top:1px solid var(--line);
  font-family:var(--font-display);font-weight:600;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text);
}
.combo-featured{border-color:rgba(242,169,0,.45)}
.combo-featured::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;background:var(--amber)}
/* Etikett sitzt auf der Oberkante, damit es auf schmalen Karten nicht über den Icons liegt */
.combo .combo-badge{
  position:absolute;top:-12px;right:18px;padding:5px 9px;
  font-family:var(--font-display);font-weight:600;font-size:11px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--graphite);background:var(--amber);
}


/* Headline auf schmalen Screens enger gesperrt */
@media (max-width:600px){
  .hero-title{letter-spacing:.03em}
}

/* Hero-Textfolge nach Kundenvorgabe: Headline, Claim, Subline, Detailabsatz.
   balance/pretty gegen Waisenwörter: auf 375px brach der Claim als
   "Wir prüfen und überführen / es." um; die zweisätzige Subline soll ohne
   Einzelwort in der letzten Zeile enden.
   Ältere Browser ignorieren die Eigenschaft, der Umbruch bleibt dort wie bisher. */
.hero-claim,.hero-sub{text-wrap:balance}
.hero-detail{text-wrap:pretty}
.hero-claim{
  font-family:var(--font-display);font-weight:600;text-transform:uppercase;
  font-size:clamp(19px,2.6vw,30px);letter-spacing:.08em;line-height:1.2;
  color:var(--text);margin-top:18px;
}
/* Subline trägt zwei Sätze Kundentext. In Versalien wären das auf dem Handy
   sechs Zeilen, deshalb Fließtext: heller und kräftiger als der Absatz
   darunter, damit die Stufe zwischen beiden sichtbar bleibt. */
.hero-sub{
  font-size:clamp(16px,1.7vw,19px);font-weight:500;line-height:1.55;
  /* Farbe statt opacity: die Ladesequenz animiert bereits die Opacity des Elements */
  color:var(--text);
  margin:18px auto 0;max-width:40ch;
}
.hero-detail{
  max-width:44ch;margin:22px auto 0;
  font-size:15px;line-height:1.7;
  color:rgba(232,234,238,.9);
}
/* Button sitzt bewusst tiefer, wie vom Kunden gewünscht */
.hero-ctas{margin-top:clamp(34px,5vw,58px)}
.js .hero-claim{opacity:0;transition:opacity 500ms var(--ease-out) 300ms}
.js .hero.is-ready .hero-claim{opacity:1}
.js .hero-detail{opacity:0;transition:opacity 500ms var(--ease-out) 430ms}
.js .hero.is-ready .hero-detail{opacity:1}
@media (max-width:600px){
  /* muss nach der Basisregel stehen, sonst gewinnt dort das clamp() */
  .hero-sub{max-width:32ch;font-size:16px}
  .hero-detail{max-width:34ch;line-height:1.72}
}
/* Ohne Schleier liegt der Claim auf dem Handy direkt auf dem hellsten Teil des
   Sonnenuntergangs (gemessen: 67 % der Zeile unter 4.5:1). Der Schatten dunkelt
   nur die Fläche um die Buchstaben ab, das Bild daneben bleibt hell. */
.hero-title,.hero-claim,.hero-sub,.hero-detail{
  text-shadow:0 1px 3px rgba(0,0,0,.6),0 0 26px rgba(0,0,0,.55);
}


/* ============ Startseite: Link direkt im Hero ============
   Feld und Button bilden auf dem Desktop eine Zeile, auf dem Handy stehen sie
   untereinander. Der halbdunkle Grund hält den Platzhalter auf dem hellen Teil
   des Bildes lesbar, ohne das Bild selbst abzudunkeln. */
.hero-ctas-quick{display:block}
.hero-quick{
  display:flex;max-width:660px;margin:0 auto;
  background:rgba(20,20,20,.62);border:1px solid rgba(198,204,211,.4);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:border-color 150ms var(--ease-out);
}
.hero-quick:focus-within{border-color:var(--amber)}
.hero-quick input{
  flex:1;min-width:0;height:58px;padding:0 20px;
  background:transparent;border:0;color:var(--text);
  font-family:var(--font-body);font-size:15px;
}
.hero-quick input:focus{outline:none}
.hero-quick input::placeholder{color:rgba(232,234,238,.72)}
.hero-quick .btn{flex:none;height:58px;border:0}
.hero-quick-note{
  margin-top:14px;font-size:13.5px;color:rgba(232,234,238,.86);
  text-shadow:0 1px 3px rgba(0,0,0,.6),0 0 18px rgba(0,0,0,.5);
}
@media (max-width:600px){
  .hero-quick{
    flex-direction:column;gap:10px;
    background:none;border:0;-webkit-backdrop-filter:none;backdrop-filter:none;
  }
  .hero-quick input{
    /* flex:none: im Spaltenlayout würde flex:1 die Höhe auf null drücken */
    flex:none;height:54px;
    background:rgba(20,20,20,.62);border:1px solid rgba(198,204,211,.4);
    -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
    transition:border-color 150ms var(--ease-out);
  }
  .hero-quick input:focus{border-color:var(--amber)}
  .hero-quick .btn{width:100%;height:54px}
}

/* ============ Startseite: Prüfprotokoll mit Preis ============
   Kopfzeile mit Preis und Button, darunter die sechs Prüfpunkte in zwei Spalten.
   Die Oberkante trägt die Amber-Lichtspur aus Hero und Logo. */
.protocol{
  position:relative;max-width:1080px;margin:56px auto 0;
  background:var(--graphite-2);border:1px solid var(--line);
}
.protocol::before{
  content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;
  background:linear-gradient(90deg,var(--amber) 0%,rgba(242,169,0,.5) 40%,rgba(242,169,0,0) 85%);
  transform-origin:left center;
}
.js .protocol::before{transform:scaleX(0);transition:transform 600ms var(--ease-out) 150ms}
.js .protocol.is-in::before{transform:scaleX(1)}
.protocol-head{
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  column-gap:40px;align-items:end;
  padding:38px 40px 36px;border-bottom:1px solid var(--line);
}
.protocol-label{
  grid-column:1/-1;margin-bottom:14px;
  display:flex;align-items:center;gap:14px;
  font-family:var(--font-display);font-weight:600;font-size:13px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--silver);
}
.protocol-icon{display:block;flex:none;width:48px;height:48px}
.protocol-price{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(60px,6.4vw,88px);line-height:.9;letter-spacing:.02em;color:var(--text);
}
.protocol-info{padding-bottom:4px;max-width:34ch}
.protocol-meta{color:var(--text);font-size:15px;font-weight:500}
.protocol-note{margin-top:4px;font-size:13.5px;line-height:1.55;color:var(--text-dim)}
.protocol-cta{white-space:nowrap}
.protocol-list{display:grid;grid-template-columns:1fr 1fr}
.protocol-row{
  display:grid;grid-template-columns:34px minmax(0,1fr) 18px;gap:14px;align-items:start;
  padding:24px 36px 24px 40px;border-bottom:1px solid var(--line);
}
.protocol-row:nth-child(odd){border-right:1px solid var(--line)}
.protocol-row:nth-last-child(-n+2){border-bottom:0}
.protocol-num{
  font-family:var(--font-display);font-weight:600;font-size:13px;
  letter-spacing:.12em;color:var(--silver);padding-top:2px;
}
.protocol-row h3{font-size:15px;letter-spacing:.08em;color:var(--text);margin-bottom:6px}
.protocol-row p{font-size:14px;line-height:1.6;color:var(--text-dim)}
.protocol-check{color:var(--amber);margin-top:1px}
.protocol-foot{
  display:flex;align-items:center;gap:14px;
  border-top:1px solid var(--line);padding:18px 40px;
  font-size:13.5px;color:var(--text-dim);
}
.protocol-foot::before{content:"";width:18px;height:2px;background:var(--amber);flex:none}
@media (max-width:980px){
  .protocol-head{grid-template-columns:auto minmax(0,1fr)}
  .protocol-cta{grid-column:1/-1;margin-top:26px}
}
@media (max-width:760px){
  .protocol-head{display:block;padding:30px 22px 28px}
  .protocol-info{margin-top:12px}
  .protocol-cta{width:100%;margin-top:24px}
  .protocol-list{grid-template-columns:1fr}
  .protocol-row{grid-template-columns:30px minmax(0,1fr) 18px;gap:12px;padding:18px 22px}
  .protocol-row:nth-child(odd){border-right:0}
  .protocol-row:nth-last-child(2){border-bottom:1px solid var(--line)}
  .protocol-foot{align-items:flex-start;padding:16px 22px}
  .protocol-foot::before{margin-top:.7em}
}
@media (prefers-reduced-motion:reduce){
  .js .protocol::before{transform:none;transition:none}
}

/* ============ Startseite: Kontaktzeile unter den häufigen Fragen ============ */
.faq-note [data-cms]{color:var(--text);white-space:nowrap}
.faq-note a{
  color:var(--text);white-space:nowrap;
  text-decoration:underline;text-decoration-color:var(--amber);
  text-decoration-thickness:1px;text-underline-offset:4px;
}

/* ============ Startseite: Anfrage mit Seitenfeld ============
   Desktop: Formular links, Seitenfeld rechts; der Absende-Button steht dann
   linksbündig im Formular, damit er eine Kante mit den Feldern bildet.
   Handy und Tablet: Seitenfeld unter dem Formular, damit das erste Feld oben bleibt. */
.anfrage-grid{max-width:1060px;margin:56px auto 0}
#anfrage .anfrage-grid .form-wrap{margin-top:0}
.anfrage-aside{
  max-width:720px;margin:40px auto 0;
  background:var(--graphite-3);border:1px solid var(--line);padding:22px 20px;
}
.aside-kicker{
  display:flex;align-items:center;gap:12px;
  font-family:var(--font-display);font-weight:600;font-size:12px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--silver);
}
.aside-kicker .kicker-line{width:24px}
.aside-title{
  margin-top:16px;font-family:var(--font-display);font-weight:700;font-size:20px;
  letter-spacing:.05em;line-height:1.2;text-transform:uppercase;color:var(--text);
}
.aside-text{margin-top:10px;font-size:14.5px;color:var(--text-dim)}
.aside-facts{margin-top:22px;border-top:1px solid var(--line)}
.aside-facts li{
  display:flex;justify-content:space-between;gap:12px;
  padding:12px 0;border-bottom:1px solid var(--line);font-size:14px;
}
.aside-facts .k{color:var(--text-dim)}
.aside-facts .v{color:var(--text);font-weight:500}
.aside-call{margin-top:22px;font-size:13.5px;color:var(--text-dim)}
.aside-phone{
  display:block;margin-top:4px;font-family:var(--font-display);font-weight:600;
  font-size:18px;letter-spacing:.06em;color:var(--text);
}
@media (min-width:861px){
  .anfrage-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:56px;align-items:start}
  #anfrage .anfrage-grid .form-wrap{max-width:none;margin:0}
  .anfrage-aside{position:sticky;top:104px;margin:0;padding:28px 26px}
  #anfrage .anfrage-grid .submit-row{align-items:flex-start;text-align:left}
}

/* Leistungen auf dem Handy zweispaltig: halbiert die Länge der Liste.
   Nur auf der Startseite; die Kontaktseite behält die einspaltige Auswahl. */
@media (max-width:600px){
  /* minmax(0,…): sonst macht „Fahrzeuganmeldung“ die rechte Spalte breiter */
  .anfrage-grid .service-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
  .anfrage-grid .service-card{align-items:flex-start;gap:10px;padding:13px 12px}
  .anfrage-grid .service-card .t{font-size:13.5px;line-height:1.35;-webkit-hyphens:auto;hyphens:auto}
  .anfrage-grid .service-box{width:16px;height:16px;margin-top:1px}
}


/* ============ Transport, Abwicklung, Anmeldung: Preis als Wort ============
   Dieselbe Protokoll-Karte wie bei der Fahrzeugprüfung; ohne festen Preis steht
   im Kopf „Nach Strecke“ oder „Auf Anfrage“, dafür kleiner als eine Zahl. */
.protocol-price-text{font-size:clamp(34px,3.6vw,48px);line-height:1;letter-spacing:.04em;text-transform:uppercase}

/* ============ Kontakt: Seitenfeld mit mehrzeiliger Anschrift ============ */
.aside-contact li{align-items:flex-start}
.aside-contact .v{text-align:right}
.aside-contact + .aside-text{margin-top:18px;font-size:13.5px}

/* ============ Leistungen: große nummerierte Zeilen ============
   Jede Zeile ist ein Link. Beim Überfahren zieht sich eine Lichtspur über die
   Oberkante und die Nummer wird amber. */
.service-rows{max-width:1080px;margin:56px auto 0;border-bottom:1px solid var(--line)}
.service-row{
  position:relative;
  display:grid;grid-template-columns:88px minmax(0,1.15fr) minmax(0,1fr) 150px;
  column-gap:40px;align-items:start;
  padding:40px 0;border-top:1px solid var(--line);
}
.service-row::after{
  content:"";position:absolute;left:0;right:0;top:-1px;height:1px;background:var(--amber);
  transform:scaleX(0);transform-origin:left center;transition:transform 250ms var(--ease-out);
}
.service-row-num{
  font-family:var(--font-display);font-weight:700;font-size:clamp(36px,3.6vw,52px);
  line-height:1;letter-spacing:.04em;color:var(--silver);transition:color 200ms var(--ease-out);
}
/* Ziffer blitzt beim Einblenden kurz amber auf (main.js: flashNumber) */
.service-row-num.num-flash{color:var(--amber);transition:color 150ms var(--ease-out)}
/* Nummer und Icon stehen untereinander in der ersten Spalte */
.service-row-lead{display:flex;flex-direction:column;align-items:flex-start;gap:20px}
.service-row-icon{display:block;width:64px;height:64px}
.service-row-main h3{font-size:clamp(22px,2.2vw,30px);letter-spacing:.05em;line-height:1.15;color:var(--text)}
.service-row-main p{margin-top:12px;max-width:40ch;font-size:15px;color:var(--text-dim)}
.service-row-list{padding-top:6px}
.service-row-list li{position:relative;padding-left:22px;margin-bottom:8px;font-size:14.5px;line-height:1.5;color:var(--text-dim)}
.service-row-list li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:2px;background:var(--amber)}
.service-row-side{
  display:flex;flex-direction:column;align-items:flex-end;justify-content:space-between;
  align-self:stretch;gap:18px;padding-top:6px;text-align:right;
}
.service-row-price{
  font-family:var(--font-display);font-weight:600;font-size:13px;
  letter-spacing:.1em;text-transform:uppercase;color:var(--text);
}
.service-row-go{
  display:inline-flex;align-items:center;
  font-family:var(--font-display);font-weight:600;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;color:var(--amber);
}
@media (hover:hover) and (pointer:fine){
  .service-row:hover::after{transform:scaleX(1)}
  .service-row:hover .service-row-num{color:var(--amber)}
  .service-row:hover .btn-arrow{transform:translateX(3px)}
}
@media (max-width:900px){
  .service-row{grid-template-columns:52px minmax(0,1fr);column-gap:18px;row-gap:16px;padding:28px 0}
  .service-row-lead{grid-row:1 / span 3;gap:14px}
  .service-row-num{font-size:32px}
  .service-row-icon{width:44px;height:44px}
  .service-row-side{flex-direction:row;align-items:center;justify-content:space-between;text-align:left;padding-top:0}
}
@media (prefers-reduced-motion:reduce){
  .service-row::after{transform:scaleX(1);opacity:0;transition:opacity 200ms var(--ease-out)}
  .service-row:hover::after{opacity:1}
  .service-row:hover .btn-arrow{transform:none}
}

/* ============ Ablauf: Zeitleiste ============
   Die Amber-Linie wächst mit dem Scrollen (main.js setzt --progress), erreichte
   Schritte leuchten auf. Ohne JS steht alles fertig da. */
.timeline-wrap{
  display:grid;grid-template-columns:minmax(0,1fr) 320px;column-gap:72px;align-items:start;
  max-width:1060px;margin:64px auto 0;
}
.timeline{position:relative}
.timeline-track{position:absolute;left:21px;top:22px;bottom:22px;width:2px;background:var(--graphite-3)}
.timeline-fill{position:absolute;inset:0;background:var(--amber);transform-origin:top center}
.js .timeline-fill{transform:scaleY(var(--progress,0))}
.timeline-list{position:relative}
.timeline-step{display:grid;grid-template-columns:44px minmax(0,1fr);column-gap:28px;padding-bottom:56px}
.timeline-step:last-child{padding-bottom:0}
.timeline-dot{
  display:flex;align-items:center;justify-content:center;
  width:44px;height:44px;border-radius:50%;
  border:1px solid var(--amber);background:var(--graphite);
  font-family:var(--font-display);font-weight:700;font-size:16px;color:var(--amber);
  transition:border-color 200ms var(--ease-out),color 200ms var(--ease-out);
}
.timeline-body{padding-top:9px}
.timeline-body h3{font-size:18px;color:var(--text);transition:color 200ms var(--ease-out)}
.timeline-body p{margin-top:10px;max-width:52ch;font-size:15px;line-height:1.7;color:var(--text-dim)}
.js .timeline-step:not(.is-active) .timeline-dot{border-color:var(--line);color:var(--silver)}
.js .timeline-step:not(.is-active) .timeline-body h3{color:var(--text-dim)}
.timeline-aside{margin:0}
.timeline-aside .aside-facts .k{flex:none}
.timeline-aside .aside-facts .v{text-align:right}
.timeline-cta{width:100%;margin-top:24px}
@media (max-width:860px){
  .timeline-wrap{grid-template-columns:1fr;row-gap:44px}
  .timeline-aside{position:static;max-width:none}
}
@media (prefers-reduced-motion:reduce){
  .timeline-dot,.timeline-body h3{transition:none}
}