/* ============================================================================
   Automobiltechnik Hirschfeld GmbH — Relaunch-Entwurf (DRB IT Solution)
   Design-DNA: Whitebuild "Werkstatt-Beton" + dunkle Kino-Zonen (Header/Hero/HV-Band/Footer)
   Akzent: Hochvolt-Orange (ISO 6469) · Typo: Saira (Display, DIN-Abstammung) + Fira Sans (Body)
   Signature: "Hochvolt-Leitung" (orange Rail mit Knoten) · self-hosted Fonts, keine Google-Requests
   ========================================================================== */
@import url('../fonts/fonts.css');

/* ---------- Tokens ---------- */
:root{
  /* Basis (kühles Werkstatt-Beton) */
  --paper:      oklch(96.5% 0.004 250);
  --paper-2:    oklch(93.5% 0.005 250);
  --concrete:   oklch(89% 0.006 255);
  --ink:        oklch(23% 0.012 260);
  --ink-2:      oklch(44% 0.012 260);
  --line:       oklch(86% 0.008 260);
  --line-2:     oklch(80% 0.01 260);

  /* Dunkle Zonen */
  --dark:       oklch(17% 0.008 260);
  --dark-2:     oklch(22% 0.01 260);
  --dark-3:     oklch(28% 0.012 260);
  --on-dark:    oklch(95% 0.004 250);
  --on-dark-2:  oklch(72% 0.012 255);

  /* Hochvolt-Orange (einziger Akzent) */
  --hv:         oklch(70% 0.195 48);
  --hv-deep:    oklch(60% 0.18 44);
  --hv-ink:     oklch(52% 0.17 44);   /* dunkleres Orange NUR für Text/Links auf hell (WCAG AA ≥4.5:1) */
  --hv-soft:    oklch(70% 0.195 48 / 0.14);

  /* Typo */
  --display: 'Saira', system-ui, sans-serif;
  --body:    'Fira Sans', system-ui, sans-serif;
  --fs-hero: clamp(2.5rem, 1rem + 6vw, 5.75rem);
  --fs-h2:   clamp(1.85rem, 1.1rem + 2.7vw, 3.25rem);
  --fs-h3:   clamp(1.2rem, 1rem + 0.8vw, 1.55rem);
  --fs-lead: clamp(1.075rem, 1rem + 0.35vw, 1.3rem);
  --fs-base: 1.0625rem;
  --fs-sm:   0.875rem;
  --fs-xs:   0.75rem;

  /* Raster & Raum */
  --wrap: 1220px;
  --gut: clamp(1.1rem, 0.6rem + 2.4vw, 3rem);
  --sp-sec: clamp(3.75rem, 2rem + 6vw, 8rem);
  --r: 3px;
  --r-lg: 7px;

  --dur: 260ms;
  --ease: cubic-bezier(.2,.7,.2,1);
}

/* ---------- Reset / Base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:clamp(100px,16vw,128px); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--body); font-size:var(--fs-base); line-height:1.65;
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ max-width:100%; height:auto; display:block; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--display); font-weight:600; line-height:1.02; margin:0; letter-spacing:-0.01em; }
p{ margin:0 0 1em; }
:focus-visible{ outline:2.5px solid var(--hv-deep); outline-offset:3px; }
::selection{ background:var(--hv); color:#111; }
.wrap{ width:min(100% - 2*var(--gut), var(--wrap)); margin-inline:auto; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0; }

/* Eyebrow / Datenlabel (Saira, technisch) */
.eyebrow{
  font-family:var(--display); font-weight:600; font-size:var(--fs-xs);
  letter-spacing:.28em; text-transform:uppercase; color:var(--hv-ink);
  display:inline-flex; align-items:center; gap:.6em;
}
.eyebrow::before{ content:''; width:26px; height:2px; background:var(--hv); }

/* ---------- Buttons ---------- */
.btn{
  --bg:var(--hv); --fg:#150c02;
  display:inline-flex; align-items:center; gap:.55em;
  font-family:var(--display); font-weight:600; font-size:.95rem; letter-spacing:.02em;
  padding:.85em 1.5em; background:var(--bg); color:var(--fg);
  border:2px solid var(--bg); border-radius:var(--r); cursor:pointer;
  transition:transform var(--dur) var(--ease), background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover{ background:var(--hv-deep); border-color:var(--hv-ink); transform:translateY(-2px); }
.btn--ghost{ --bg:transparent; --fg:var(--ink); border-color:var(--line-2); }
.btn--ghost:hover{ --bg:transparent; border-color:var(--ink); color:var(--ink); transform:translateY(-2px); }
.btn--on-dark{ --fg:#150c02; }
.btn--ghost.btn--on-dark{ --fg:var(--on-dark); border-color:oklch(100% 0 0 / .28); }
.btn--ghost.btn--on-dark:hover{ border-color:var(--on-dark); color:var(--on-dark); }
.btn__ar{ font-weight:600; transition:transform var(--dur) var(--ease); }
.btn:hover .btn__ar{ transform:translateX(3px); }
/* CTA-Button in Nav/Drawer: dunkle Schrift auf Orange erzwingen (Nav-Link-Farbe würde sonst gewinnen) */
.mast__nav a.btn, .drawer a.btn{ color:#150c02; }
.mast__nav a.btn:hover, .drawer a.btn:hover{ color:#150c02; }

/* ============================================================================
   HEADER — dunkles Masthead, Logo zentriert, Split-Nav, Öffnungs-/Standort-Microbar
   ========================================================================== */
.top{ background:var(--dark); color:var(--on-dark); position:sticky; top:0; z-index:60; }
.top__bar{
  display:flex; justify-content:space-between; align-items:center; gap:1rem;
  font-family:var(--display); font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase;
  color:var(--on-dark-2); border-bottom:1px solid oklch(100% 0 0 / .08); padding:.5rem 0;
}
.top__bar a{ color:var(--on-dark-2); }
.top__bar a:hover{ color:var(--hv); }
.top__bar b{ color:var(--on-dark); font-weight:500; }
.top__bar .dot{ color:var(--hv); }

.mast{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; padding:.85rem 0 1rem; }
.mast__nav{ display:flex; gap:1.6rem; }
.mast__nav a{
  font-family:var(--display); font-weight:500; font-size:.95rem; letter-spacing:.04em; text-transform:uppercase;
  color:var(--on-dark-2); padding:.25em 0; position:relative;
}
.mast__nav a:not(.btn)::after{ content:''; position:absolute; left:0; bottom:-4px; height:2px; width:0; background:var(--hv); transition:width var(--dur) var(--ease); }
.mast__nav a:hover,.mast__nav a[aria-current="page"]{ color:var(--on-dark); }
.mast__nav a:not(.btn):hover::after,.mast__nav a:not(.btn)[aria-current="page"]::after{ width:100%; }
.mast__nav--left{ justify-self:start; }
.mast__nav--right{ justify-self:end; align-items:center; }
.mast__brand{ justify-self:center; display:block; }
.mast__brand img{ height:clamp(46px,7vw,68px); width:auto; }
.mast__cta{ display:inline-flex; }

.burger{ display:none; }

/* ============================================================================
   HERO — Fullbleed dunkle Werkstatt, Inhalt unten-links, Fakten-Leiste
   ========================================================================== */
.hero{ position:relative; background:var(--dark); color:var(--on-dark); isolation:isolate; }
.hero__media{ position:absolute; inset:0; z-index:-2; overflow:hidden; background:var(--dark); }
.hero__media img,.hero__media video{ width:100%; height:100%; object-fit:cover; object-position:center 55%; }
.hero__media::after{
  content:''; position:absolute; inset:0;
  background:
    radial-gradient(130% 85% at 50% 42%, oklch(10% .01 260 /.30) 0%, oklch(10% .01 260 /.58) 100%),
    linear-gradient(180deg, oklch(12% .008 260 /.5) 0%, oklch(12% .008 260 /.32) 42%, oklch(13% .008 260 /.86) 100%);
}
.hero__inner{ min-height:min(88vh,820px); display:flex; align-items:center; justify-content:center; text-align:center; padding-block:clamp(4rem,10vh,8rem); }
.hero__body{ max-width:min(94%,70ch); margin-inline:auto; }
.hero .eyebrow{ justify-content:center; }
.hero h1{
  font-size:var(--fs-hero); font-weight:600; letter-spacing:-0.02em; margin:.7rem auto 1.15rem;
  text-wrap:balance; text-shadow:0 2px 32px oklch(8% .01 260 /.7), 0 1px 3px oklch(8% .01 260 /.55);
}
.hero h1 .hv{ color:var(--hv); }
.hero__lead{ font-size:var(--fs-lead); color:var(--on-dark); max-width:54ch; margin:0 auto 1.9rem; text-shadow:0 1px 16px oklch(8% .01 260 /.75); }
.hero__actions{ display:flex; flex-wrap:wrap; gap:.8rem 1.2rem; align-items:center; justify-content:center; }
.hero__tel{ font-family:var(--display); font-weight:500; letter-spacing:.02em; display:inline-flex; align-items:center; gap:.5rem; color:var(--on-dark); }
.hero__tel b{ color:var(--hv); font-weight:600; }
.hero__tel:hover{ color:var(--hv); }

/* Fakten-Leiste am Hero-Fuß */
.facts{ background:var(--dark-2); color:var(--on-dark); border-top:2px solid var(--hv); }
.facts__grid{ display:grid; grid-template-columns:repeat(4,1fr); }
.fact{ padding:1.15rem var(--gut) 1.15rem 0; border-left:1px solid oklch(100% 0 0 /.09); padding-left:clamp(1rem,2vw,1.6rem); }
.fact:first-child{ border-left:0; padding-left:0; }
.fact__k{ font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--hv); display:block; margin-bottom:.3rem; }
.fact__v{ font-family:var(--display); font-weight:500; font-size:clamp(.95rem,.8rem+.4vw,1.12rem); color:var(--on-dark); line-height:1.15; }
.fact__v small{ display:block; font-family:var(--body); font-weight:400; font-size:.8rem; color:var(--on-dark-2); letter-spacing:0; text-transform:none; margin-top:.2rem; }

/* Helle „Section Bar" — unter einem DUNKLEN Seitenkopf, damit die Leiste klar abgesetzt ist
   (auf hell = Kontrast; die dunkle Variante nutzt die Startseite unter dem hellen Video-Hero) */
.facts--light{ background:var(--paper-2); color:var(--ink); border-top-width:3px; box-shadow:inset 0 -1px 0 var(--line); }
.facts--light .fact{ border-left-color:var(--line); }
.facts--light .fact:first-child{ border-left:0; }
.facts--light .fact__k{ color:var(--hv-ink); }
.facts--light .fact__v{ color:var(--ink); }
.facts--light .fact__v small{ color:var(--ink-2); }

/* ============================================================================
   SECTIONS + Hochvolt-Leitung (Signature)
   ========================================================================== */
.sec{ position:relative; padding-block:var(--sp-sec); }
.sec--paper2{ background:var(--paper-2); }
.sec__head{ max-width:56ch; margin-bottom:clamp(2rem,4vw,3.5rem); }
.sec__head h2{ font-size:var(--fs-h2); margin:.7rem 0 0; text-wrap:balance; }
.sec__head p{ color:var(--ink-2); font-size:var(--fs-lead); margin-top:1rem; }

/* Rail-Gutter: Nummer LINKS der Leitung, Knoten sitzt auf der Leitung */
.rail{ position:relative; padding-left:0; }
.rail__no{ font-family:var(--display); font-weight:600; font-size:1.05rem; color:var(--hv-ink); letter-spacing:.06em; display:flex; align-items:center; gap:.5rem; }
.rail__no::before{ content:''; width:11px; height:11px; background:var(--hv); border:2px solid var(--paper); outline:2px solid var(--hv); border-radius:1px; flex:none; }
.sec--paper2 .rail__no::before{ border-color:var(--paper-2); }
@media (min-width:900px){
  .rail{ padding-left:6.75rem; }
  .rail::before{ content:''; position:absolute; left:3.7rem; top:.15rem; bottom:0; width:2px; background:var(--hv); opacity:.5; }
  .rail__no{ position:absolute; left:0; top:-.12em; width:2.9rem; display:block; text-align:right; }
  .rail__no::before{ position:absolute; left:calc(3.7rem - 4.5px); top:.32em; margin:0; }
}

/* ---------- Über / Positionierung (editorial, asymmetrisch) ---------- */
.pos{ display:grid; grid-template-columns:1.15fr .85fr; gap:clamp(1.5rem,4vw,4rem); align-items:center; }
.pos__text h2{ font-size:var(--fs-h2); margin-bottom:1.1rem; text-wrap:balance; }
.pos__text p{ color:var(--ink-2); max-width:52ch; }
.pos__text .lead{ color:var(--ink); font-size:var(--fs-lead); }
.pos__media{ position:relative; }
.pos__media img{ border-radius:var(--r-lg); width:100%; aspect-ratio:4/3.2; object-fit:cover; }
.pos__media figcaption{
  position:absolute; left:0; bottom:0; transform:translateY(35%);
  background:var(--dark); color:var(--on-dark); font-family:var(--display); font-weight:500;
  font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; padding:.6rem 1rem; border-left:3px solid var(--hv);
}
.note{
  margin-top:2.5rem; border-left:3px solid var(--hv); background:var(--hv-soft);
  padding:1rem 1.3rem; font-size:var(--fs-sm); color:var(--ink-2); border-radius:0 var(--r) var(--r) 0;
}
.note b{ color:var(--ink); }

/* ---------- 3 Welten (asymmetrischer Bento, UNGLEICHE Größen) ---------- */
.welten{ display:grid; gap:1rem; grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(160px,auto); }
.welt{ position:relative; overflow:hidden; border-radius:var(--r-lg); color:var(--on-dark); isolation:isolate; display:flex; align-items:flex-end; min-height:220px; }
.welt img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; transition:transform 600ms var(--ease); }
.welt::after{ content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg, oklch(17% .008 260 /0) 0%, oklch(17% .008 260 /.06) 42%, oklch(17% .008 260 /.72) 100%); }
.welt:hover img{ transform:scale(1.05); }
.welt__body{ padding:1.4rem; text-shadow:0 1px 12px oklch(14% .008 260 /.65); }
.welt__k{ font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.2em; text-transform:uppercase; color:var(--hv); }
.welt h3{ font-size:clamp(1.3rem,1rem+1.1vw,1.9rem); margin:.35rem 0 .3rem; color:#fff; }
.welt p{ margin:0; font-size:var(--fs-sm); color:var(--on-dark-2); max-width:34ch; }
.welt--xl{ grid-column:span 4; min-height:360px; }
.welt--m{ grid-column:span 2; min-height:360px; }
.welt--s{ grid-column:span 3; min-height:230px; }
.welt--s2{ grid-column:span 3; min-height:230px; }
.welt--flat{ color:var(--ink); background:var(--paper); border:1px solid var(--line); align-items:stretch; }
.welt--flat::after{ display:none; }
.welt--flat .welt h3,.welt--flat h3{ color:var(--ink); }
.welt--flat p{ color:var(--ink-2); }

/* ---------- Leistungs-Index (nummeriert) ---------- */
.leist{ border-top:1px solid var(--line); }
.leist__row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:1rem 1.4rem;
  padding:1.25rem 0; border-bottom:1px solid var(--line);
  transition:background var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.leist__row:hover{ background:var(--paper-2); padding-left:.8rem; }
.leist__no{ font-family:var(--display); font-weight:600; color:var(--hv-ink); font-size:1rem; letter-spacing:.06em; }
.leist__name{ font-family:var(--display); font-weight:600; font-size:clamp(1.15rem,1rem+.7vw,1.55rem); color:var(--ink); }
.leist__desc{ display:block; font-family:var(--body); font-weight:400; font-size:var(--fs-sm); color:var(--ink-2); letter-spacing:0; margin-top:.15rem; max-width:60ch; }
.leist__tag{ font-family:var(--display); font-weight:500; font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--ink-2); white-space:nowrap; align-self:center; }
.leist__tag--hv{ color:var(--hv-ink); }

/* ============================================================================
   HV-BAND — die EINE dunkle Content-Sektion (TÜV Hessen / HU-AU)
   ========================================================================== */
.band{ background:var(--dark); color:var(--on-dark); position:relative; overflow:hidden; }
.band::before{ content:''; position:absolute; left:0; right:0; top:0; height:3px; background:var(--hv); }
.band__grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.5rem,4vw,4rem); align-items:center; }
.band h2{ font-size:var(--fs-h2); color:#fff; margin-bottom:1rem; text-wrap:balance; }
.band p{ color:var(--on-dark-2); max-width:52ch; }
.band .eyebrow{ color:var(--hv); }
.band__card{ background:var(--dark-2); border:1px solid oklch(100% 0 0 /.1); border-left:3px solid var(--hv); border-radius:var(--r-lg); padding:1.6rem 1.7rem; }
.band__card h3{ color:#fff; font-size:var(--fs-h3); margin-bottom:.6rem; }
.band__card p{ color:var(--on-dark-2); margin-bottom:0; font-size:var(--fs-sm); }
.band__card + .band__card{ margin-top:1rem; }

/* ---------- Stellplatz (Sportwagen) ---------- */
.stell{ display:grid; grid-template-columns:.9fr 1.1fr; gap:clamp(1.5rem,4vw,3.5rem); align-items:center; }
.stell__media img{ border-radius:var(--r-lg); width:100%; aspect-ratio:5/3.4; object-fit:cover; }
.stell h2{ font-size:var(--fs-h2); margin-bottom:1rem; }
.stell p{ color:var(--ink-2); max-width:50ch; }

/* ============================================================================
   ANFRAGE-WIZARD (4 Schritte) + Kontaktfakten
   ========================================================================== */
.kontakt{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.75rem,4vw,4rem); align-items:start; }
.kfacts{ }
.kfacts h2{ font-size:var(--fs-h2); margin-bottom:1.3rem; }
.kfact{ display:flex; gap:1rem; padding:1rem 0; border-bottom:1px solid var(--line); }
.kfact__k{ font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--hv-ink); min-width:8.5rem; padding-top:.15rem; }
.kfact__v{ font-size:1.02rem; color:var(--ink); }
.kfact__v a:hover{ color:var(--hv-ink); }
.kfact__v small{ display:block; color:var(--ink-2); font-size:var(--fs-sm); }

.wiz{ background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r-lg); padding:clamp(1.3rem,3vw,2rem); box-shadow:0 1px 0 var(--line); }
.sec--paper2 .wiz{ background:#fff; }
.wiz__top{ display:flex; justify-content:space-between; align-items:center; margin-bottom:1.3rem; }
.wiz__steps{ display:flex; gap:.4rem; }
.wiz__pip{ width:34px; height:4px; border-radius:2px; background:var(--line-2); transition:background var(--dur); }
.wiz__pip.is-done{ background:var(--hv-deep); }
.wiz__pip.is-active{ background:var(--hv); }
.wiz__count{ font-family:var(--display); font-weight:600; font-size:var(--fs-xs); letter-spacing:.16em; text-transform:uppercase; color:var(--ink-2); }
.wiz__panel{ display:none; }
.wiz__panel.is-active{ display:block; animation:fade .4s var(--ease); }
@media (prefers-reduced-motion:reduce){ .wiz__panel.is-active{ animation:none; } }
.wiz__q{ font-family:var(--display); font-weight:600; font-size:1.25rem; color:var(--ink); margin-bottom:1rem; }
.wiz__opts{ display:grid; gap:.6rem; }
.opt{ display:flex; align-items:center; gap:.8rem; border:1.5px solid var(--line-2); border-radius:var(--r); padding:.85rem 1rem; cursor:pointer; font-weight:500; transition:border-color var(--dur),background var(--dur); background:var(--paper); }
.opt:hover{ border-color:var(--hv); }
.opt input{ accent-color:var(--hv-ink); width:18px; height:18px; }
.opt.is-sel{ border-color:var(--hv); background:var(--hv-soft); }
.field{ margin-bottom:1rem; }
.field label{ display:block; font-family:var(--display); font-weight:500; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin-bottom:.4rem; }
.field input,.field textarea,.field select{
  width:100%; font-family:var(--body); font-size:1rem; color:var(--ink);
  padding:.7rem .85rem; border:1.5px solid var(--line-2); border-radius:var(--r); background:#fff;
}
.field input:focus,.field textarea:focus{ border-color:var(--hv-ink); }
.wiz__nav{ display:flex; justify-content:space-between; align-items:center; margin-top:1.4rem; gap:1rem; }
.wiz__check{ display:flex; gap:.6rem; align-items:flex-start; font-size:var(--fs-sm); color:var(--ink-2); }
.wiz__check input{ margin-top:.2rem; accent-color:var(--hv-ink); }
.wiz__review{ background:var(--paper-2); border-radius:var(--r); padding:1rem 1.2rem; font-size:var(--fs-sm); }
.wiz__review dt{ font-family:var(--display); font-weight:600; color:var(--hv-ink); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; }
.wiz__review dd{ margin:.1rem 0 .7rem; color:var(--ink); }
.wiz__ok{ text-align:center; padding:1.5rem 0; }
.wiz__ok .ok-mark{ width:56px; height:56px; margin:0 auto 1rem; border-radius:50%; background:var(--hv); display:grid; place-items:center; color:#150c02; font-size:1.8rem; font-family:var(--display); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

/* ============================================================================
   FOOTER — dunkles Kolophon
   ========================================================================== */
.foot{ background:var(--dark); color:var(--on-dark-2); padding-block:clamp(2.75rem,5vw,4.5rem) 1.5rem; position:relative; }
.foot::before{ content:''; position:absolute; left:0; top:0; height:3px; width:100%; background:linear-gradient(90deg,var(--hv),transparent 60%); }
.foot__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:2rem clamp(1.5rem,4vw,3rem); }
.foot__brand img{ height:56px; width:auto; margin-bottom:1rem; }
.foot__brand p{ font-size:var(--fs-sm); max-width:34ch; }
.foot h2{ font-family:var(--display); font-weight:600; font-size:.75rem; letter-spacing:.2em; text-transform:uppercase; color:var(--on-dark); margin-bottom:1rem; line-height:1.1; }
.foot a{ color:var(--on-dark-2); }
.foot a:hover{ color:var(--hv); }
.foot__list{ list-style:none; margin:0; padding:0; display:grid; gap:.55rem; font-size:var(--fs-sm); }
.foot__list b{ color:var(--on-dark); font-weight:500; }
.foot__bottom{ display:flex; flex-wrap:wrap; justify-content:space-between; gap:.8rem; margin-top:2.5rem; padding-top:1.3rem; border-top:1px solid oklch(100% 0 0 /.1); font-size:var(--fs-xs); letter-spacing:.04em; }
.foot__bottom a{ margin-left:1.1rem; }

/* ============================================================================
   Mobile Sticky Callbar
   ========================================================================== */
.callbar{ display:none; }
@media (max-width:720px){
  .callbar{
    display:grid; grid-template-columns:1fr 1fr; position:fixed; left:0; right:0; bottom:0; z-index:70;
    background:var(--dark); border-top:2px solid var(--hv); box-shadow:0 -6px 22px oklch(0% 0 0 /.25);
  }
  .callbar a{ display:flex; align-items:center; justify-content:center; gap:.5rem; padding:.95rem; font-family:var(--display); font-weight:600; font-size:.95rem; letter-spacing:.03em; color:var(--on-dark); }
  .callbar a + a{ border-left:1px solid oklch(100% 0 0 /.12); }
  .callbar a.is-hv{ color:var(--hv); }
  body{ padding-bottom:56px; }
}

/* ============================================================================
   Reveal-Motion (dezent) + Legal-Seiten
   ========================================================================== */
@keyframes fade{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }
/* Reveal nur wenn JS aktiv ist (html.js) — sonst bleibt Inhalt sichtbar (No-JS/SEO-sicher) */
.js .reveal{ opacity:0; transform:translateY(18px); transition:opacity .7s var(--ease), transform .7s var(--ease); }
.js .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .js .reveal{ opacity:1; transform:none; transition:none; } }

.legal{ padding-block:clamp(2.5rem,5vw,4.5rem); }
.legal .wrap{ max-width:820px; }
.legal h1{ font-size:var(--fs-h2); margin-bottom:.4rem; }
.legal h2{ font-size:1.4rem; margin:2.2rem 0 .6rem; padding-top:1.2rem; border-top:1px solid var(--line); }
.legal h3{ font-size:1.1rem; margin:1.4rem 0 .4rem; color:var(--ink); }
.legal p,.legal li{ color:var(--ink-2); font-size:.98rem; }
.legal .draft{ background:var(--hv-soft); border-left:3px solid var(--hv); padding:.9rem 1.2rem; border-radius:0 var(--r) var(--r) 0; color:var(--ink); font-size:var(--fs-sm); margin-bottom:2rem; }
.legal address{ font-style:normal; }
.breadcrumb{ font-size:var(--fs-sm); color:var(--ink-2); padding-top:1.4rem; }
.breadcrumb a:hover{ color:var(--hv-ink); }

/* 404 */
.e404{ min-height:62vh; display:grid; place-items:center; text-align:center; padding:4rem var(--gut); }
.e404 .code{ font-family:var(--display); font-weight:700; font-size:clamp(4rem,20vw,10rem); color:var(--hv); line-height:.9; }

/* ============================================================================
   Responsive
   ========================================================================== */
@media (max-width:980px){
  .pos,.band__grid,.stell,.kontakt{ grid-template-columns:1fr; }
  .pos__media{ order:-1; }
  .pos__media figcaption{ transform:none; position:static; display:inline-block; margin-top:-1.4rem; margin-left:.5rem; }
  .stell__media{ order:-1; }
  .facts__grid{ grid-template-columns:1fr 1fr; }
  .fact:nth-child(3){ border-left:0; padding-left:0; }
  .foot__grid{ grid-template-columns:1fr 1fr; }
  .welt--xl,.welt--m,.welt--s,.welt--s2{ grid-column:span 6; min-height:240px; }
}
@media (max-width:720px){
  .top__bar .hide-sm{ display:none; }
  .mast{ grid-template-columns:auto 1fr auto; }
  .mast__nav{ display:none; }
  .mast__brand{ justify-self:start; }
  .mast__cta{ display:none; }
  .burger{
    display:inline-flex; flex-direction:column; gap:5px; justify-self:end; background:none; border:0; cursor:pointer; padding:.4rem;
  }
  .burger span{ width:26px; height:2px; background:var(--on-dark); transition:transform var(--dur),opacity var(--dur); }
  .burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
  .burger[aria-expanded="true"] span:nth-child(2){ opacity:0; }
  .burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
  .drawer{
    position:fixed; inset:0 0 0 auto; width:min(84vw,320px); background:var(--dark); color:var(--on-dark);
    transform:translateX(100%); transition:transform var(--dur) var(--ease); z-index:80; padding:5rem 1.6rem 2rem;
    display:flex; flex-direction:column; gap:.2rem; border-left:2px solid var(--hv);
    overflow-y:auto; overscroll-behavior:contain; /* Handy quer: innen scrollen, Seite dahinter bleibt stehen */
  }
  .drawer.open{ transform:none; }
  .drawer a{ font-family:var(--display); font-weight:500; font-size:1.15rem; text-transform:uppercase; letter-spacing:.04em; padding:.85rem 0; border-bottom:1px solid oklch(100% 0 0 /.09); color:var(--on-dark); }
  .drawer a:hover{ color:var(--hv); }
  .drawer .btn{ margin-top:1.2rem; justify-content:center; }
  .drawer__x{ position:absolute; top:1rem; right:1.2rem; background:none; border:0; color:var(--on-dark); font-size:2rem; cursor:pointer; line-height:1; }
  .scrim{ position:fixed; inset:0; background:oklch(0% 0 0 /.5); opacity:0; visibility:hidden; transition:opacity var(--dur); z-index:75; }
  .scrim.open{ opacity:1; visibility:visible; }
  .hero__body{ max-width:none; }
  .kfact{ flex-direction:column; gap:.2rem; }
  .kfact__k{ min-width:0; }
}
@media (min-width:721px){ .drawer,.scrim,.burger{ display:none; } }

/* ---------- Skip-Link (Tastatur) ---------- */
.skip-link:focus{
  position:fixed; top:.6rem; left:.6rem; z-index:200; width:auto; height:auto;
  clip:auto; margin:0; padding:.7rem 1.1rem; overflow:visible;
  background:var(--dark); color:var(--on-dark); border:2px solid var(--hv); border-radius:var(--r);
  font-family:var(--display); font-weight:600; letter-spacing:.03em;
}

/* ---------- Hero-Video: Pause/Play-Steuerung (WCAG 2.2.2) ---------- */
.hero__vidctl{
  position:absolute; right:1rem; bottom:1rem; z-index:2;
  display:inline-flex; align-items:center; justify-content:center; gap:.4em;
  width:40px; height:40px; padding:0; cursor:pointer;
  background:oklch(14% .008 260 /.55); color:var(--on-dark);
  border:1.5px solid oklch(100% 0 0 /.35); border-radius:50%;
  font-family:var(--display); font-size:.85rem; line-height:1;
  backdrop-filter:blur(4px); transition:background var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.hero__vidctl:hover{ background:var(--hv); color:#150c02; border-color:var(--hv); }
.hero__vidctl-icon{ pointer-events:none; }
@media (max-width:720px){ .hero__vidctl{ right:.7rem; bottom:.7rem; width:36px; height:36px; } }

/* ============================================================================
   Ausbau 19 Seiten (23.09.2026) — gleiche Tokens, gleiche Formen, keine neue Gestaltung.
   Hierher gezogen: bisher seiteneigene Stile (Seitenkopf, FAQ, 404) — Vorarbeit T3.
   Neu: nur Anordnungs-Varianten vorhandener Bausteine.
   ========================================================================== */

/* --- Seitenkopf (vorher inline in e-auto/leistungen/kontakt) --- */
.pagehead{ padding-block:var(--sp-sec); }
.pagehead .breadcrumb{ color:var(--on-dark-2); padding-top:0; margin-bottom:1.4rem; }
.pagehead .breadcrumb a{ color:var(--on-dark-2); }
.pagehead .breadcrumb a:hover{ color:var(--hv); }
.pagehead h1{ font-size:var(--fs-h2); color:var(--on-dark); margin:.7rem 0 1rem; text-wrap:balance; max-width:22ch; }
.pagehead h1 .hv, .abschluss h2 .hv{ color:var(--hv); }
.pagehead__lead{ color:var(--on-dark-2); font-size:var(--fs-lead); max-width:56ch; margin-bottom:1.3rem; }
.pagehead__actions{ display:flex; flex-wrap:wrap; gap:.8rem 1rem; align-items:center; margin-top:1.4rem; }

/* Vertrauenszeile: "A · B · C" als Datenlabel. Der Punkt hängt am Ende des vorigen Eintrags,
   damit eine umbrochene Zeile nie mit „·" beginnt (Abstand danach über gap) */
.pagehead__trust{ display:flex; flex-wrap:wrap; gap:.3rem .6rem; margin:0 0 .4rem; font-family:var(--display); font-weight:500; font-size:var(--fs-sm); letter-spacing:.04em; color:var(--on-dark-2); }
.pagehead__trust > span:not(:last-child)::after{ content:"\00B7"; content:"\00B7" / ""; color:var(--hv); margin-left:.6rem; } /* leerer Alternativtext: Punkt wird nicht vorgelesen */
.hero .pagehead__trust{ justify-content:center; }
.pagehead__trust--hell{ color:var(--ink-2); margin-top:1rem; }
.pagehead__trust--hell > span:not(:last-child)::after{ color:var(--hv-ink); }

/* --- FAQ (vorher inline in e-auto) --- */
.faq__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(1.3rem,2rem+1vw,2.4rem) clamp(1.6rem,2rem+2vw,3.2rem); }
.faq__item{ border-top:2px solid var(--hv); padding-top:1rem; margin:0; }
.faq__q{ font-family:var(--display); font-weight:600; font-size:var(--fs-h3); color:var(--ink); line-height:1.12; margin:0 0 .5rem; letter-spacing:-0.01em; }
.faq__a{ color:var(--ink-2); font-size:var(--fs-base); margin:0; max-width:52ch; }
@media (max-width:720px){ .faq__grid{ grid-template-columns:1fr; } }

/* --- 404 (vorher inline) --- */
.e404 .eyebrow{ color:var(--hv-ink); margin:1rem 0 .35rem; justify-content:center; }
.e404__lead{ max-width:44ch; margin:1.1rem auto 0; color:var(--ink-2); }
.e404__actions{ display:flex; flex-wrap:wrap; gap:.8rem 1rem; justify-content:center; margin-top:1.9rem; }

/* --- Text, Kernaussage, Aktionen --- */
.text p{ color:var(--ink-2); max-width:64ch; }
.kern{ font-family:var(--display); font-weight:500; font-size:var(--fs-lead); color:var(--ink); max-width:56ch; margin:2rem 0 0; padding-left:1rem; border-left:3px solid var(--hv); line-height:1.35; }
.band .kern{ color:var(--on-dark); }
.aktionen{ display:flex; flex-wrap:wrap; gap:.8rem 1.2rem; align-items:center; margin-top:2rem; }
.textlink{ font-family:var(--display); font-weight:500; color:var(--hv-ink); border-bottom:1.5px solid currentColor; padding-bottom:1px; }
.textlink:hover{ color:var(--ink); }
.band .textlink{ color:var(--hv); }
.band .textlink:hover{ color:var(--on-dark); }
.pos:not(:has(.pos__media)){ grid-template-columns:1fr; }
.pos:not(:has(.pos__media)) .pos__text{ max-width:70ch; }

/* --- Liste mit Hochvolt-Knoten --- */
.liste{ list-style:none; margin:1.2rem 0 0; padding:0; display:grid; gap:.55rem; }
.liste li{ position:relative; padding-left:1.6rem; color:var(--ink); }
.liste li::before{ content:""; position:absolute; left:0; top:.55em; width:9px; height:9px; background:var(--hv); border-radius:1px; }
@media (min-width:900px){ .liste--2{ grid-template-columns:1fr 1fr; column-gap:2.5rem; } }

/* --- Leistungs-Index: zweispaltig und als Link --- */
@media (min-width:900px){
  .leist--2{ display:grid; grid-template-columns:1fr 1fr; column-gap:clamp(1.5rem,4vw,3.5rem); border-top:0; }
  .leist--2 .leist__row:nth-child(-n+2){ border-top:1px solid var(--line); }
}
a.leist__row{ cursor:pointer; }
a.leist__row:hover .leist__name{ color:var(--hv-ink); }
/* Ziffern gleich breit: Sonst springt der Leistungsname je nach Nummer um bis zu 9px (11 schmal, 08 breit) */
.leist__no{ font-variant-numeric:tabular-nums; }

/* --- Ablauf-Karten im dunklen Band ---
   Feste Spaltenzahl je Breite und Kartenzahl (Klasse schritte--N aus bausteine.mjs), damit keine Reihe halb leer bleibt:
   unter 560px eine Spalte; ab 560px zwei, eine ungerade letzte Karte läuft über beide (5 = 2 + 2 + 1);
   ab 900px drei Spalten bei 3, 6 oder 9 Karten (6 = 3 + 3); ab 1120px vier bei 4, 5 oder 8 Karten (5 = 4 + 1).
   Die Sprünge liegen so, dass keine Karte schmaler als etwa 250px wird (wie beim früheren minmax(250px));
   die Titel brechen dann nur zwischen Wörtern. Grenzen in em (35 / 56,25 / 70em = 560 / 900 / 1120px bei 16px),
   damit die Karten bei größerer Standardschrift im Browser mitwachsen. */
.schritte{ list-style:none; margin:0; padding:0; display:grid; gap:1rem; grid-template-columns:minmax(0,1fr); }
.schritte .band__card{ padding:1.3rem 1.4rem; }
.schritte h3{ font-size:1.12rem; margin:.35rem 0 .4rem; }
.schritte p{ font-size:var(--fs-sm); margin:0; text-wrap:pretty; }
.schritte__nr{ font-family:var(--display); font-weight:600; font-size:.95rem; letter-spacing:.06em; color:var(--hv); }
.note--dunkel{ background:oklch(100% 0 0 / .05); color:var(--on-dark-2); }
.band .sec__head h2{ color:#fff; }
.band .sec__head p{ color:var(--on-dark-2); }

/* --- Abschluss-Band --- */
.abschluss__inner{ max-width:62ch; }
.abschluss__inner p{ font-size:var(--fs-lead); }
.abschluss .pagehead__trust{ margin-top:1.4rem; }

/* --- Startseite: Hero-Schnellkontakt, Kacheln --- */
.hero__schnell{ margin-top:1.1rem; text-align:center; font-family:var(--display); font-size:.95rem; color:var(--on-dark-2); }
.hero__schnell a{ color:var(--on-dark); }
.hero__schnell a:hover{ color:var(--hv); }
.hero__schnell b{ color:var(--hv); font-weight:600; }
.hero__schnell span{ margin:0 .6rem; color:var(--hv); }
.welt__mehr{ display:inline-block; margin-top:.9rem; font-family:var(--display); font-weight:600; font-size:.9rem; letter-spacing:.02em; color:var(--hv); }
.welt--flat .welt__mehr{ color:var(--hv-ink); }
.welt__mehr:hover{ text-decoration:underline; text-underline-offset:3px; }
.welt--voll{ grid-column:1 / -1; min-height:auto; }

/* --- Bewertungen --- */
.bewertungen{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); margin:0; }
.bewertung{ margin:0; display:flex; flex-direction:column; }
.bewertung__sterne{ color:var(--hv); letter-spacing:.18em; font-size:1rem; margin:0 0 .6rem; }
.bewertung blockquote{ margin:0; flex:1; }
.bewertung blockquote p{ color:var(--on-dark); font-size:1.02rem; line-height:1.55; max-width:none; }
.bewertung figcaption{ font-family:var(--display); font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--on-dark-2); margin-top:.8rem; }
.bewertung__quelle{ margin-top:1.4rem; font-size:var(--fs-sm); color:var(--on-dark-2); }
.bewertung__quelle b{ color:var(--on-dark); font-weight:500; }
.bewertung__quelle a{ color:var(--hv); border-bottom:1px solid currentColor; }
.bewertung__hinweis{ font-size:var(--fs-xs); color:var(--on-dark-2); max-width:90ch; opacity:.85; }
.band .pagehead__trust{ margin-top:1.6rem; }

/* --- Formulare --- */
.form{ max-width:900px; }
.felder-2{ display:grid; gap:0 1.2rem; }
@media (min-width:720px){ .felder-2{ grid-template-columns:1fr 1fr; } }
.field--jn{ border:0; padding:0; margin:0 0 1.1rem; min-width:0; container-type:inline-size; }
.field--jn legend{ font-family:var(--display); font-weight:500; font-size:.8rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-2); margin-bottom:.5rem; padding:0; }
.field--jn .opt{ padding:.6rem .9rem; }
.field select:focus{ border-color:var(--hv-ink); }
.wiz__flash{ color:var(--hv-ink); font-size:var(--fs-sm); font-weight:600; margin:.6rem 0; }
.wiz__flash:empty{ display:none; }
.form__klein{ font-size:var(--fs-sm); color:var(--ink-2); margin-top:.8rem; }
.form__klein a{ color:var(--hv-ink); border-bottom:1px solid currentColor; }
.form button[type="submit"]{ margin-top:.6rem; }
.form__ok,.form__fehler{ text-align:center; padding:1.5rem .5rem; }
.form__ok h3,.form__fehler h3{ font-size:1.4rem; margin:.6rem 0; }
.form__ok-text{ color:var(--ink-2); max-width:46ch; margin-inline:auto; }
.form__ok-klein{ font-size:var(--fs-sm); color:var(--ink-2); }
.ok-mark{ width:56px; height:56px; margin:0 auto; border-radius:50%; display:grid; place-items:center; font-size:1.6rem; font-weight:700; color:#150c02; background:var(--hv); }
.wiz.is-gesendet .wiz__top,.wiz.is-gesendet .wiz__body,.wiz.is-gesendet .wiz__nav,.wiz.is-gesendet .wiz__flash,.wiz.is-gesendet .form__inhalt{ display:none; }
.wiz[aria-busy="true"] button[type="submit"],.wiz[aria-busy="true"] [data-next]{ opacity:.6; pointer-events:none; }

/* --- Bilder (Toms Fotos, sobald vorhanden) --- */
.bild-breit{ margin:0 0 1.5rem; }
.bild-breit img{ width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r-lg); }
.bilder{ display:grid; gap:1rem; grid-template-columns:minmax(0,1fr); }
.bilder .bild-breit{ margin:0; }

/* --- Rechtstexte, Fuß --- */
.legal ul{ padding-left:1.2rem; }
.legal__stand{ margin-top:2.5rem; font-size:var(--fs-sm); color:var(--ink-2); }
.foot__grid--4{ grid-template-columns:1.3fr 1fr 1fr 1fr; }
@media (max-width:980px){ .foot__grid--4{ grid-template-columns:1fr 1fr; } }
.foot__recht a{ margin-left:0; }

/* Spezifität gegen die bestehende Regel .band p (Farbe/Breite) */
.band .bewertung__sterne{ color:var(--hv); }
.band .bewertung__quelle,.band .pagehead__trust{ max-width:none; }
.band .bewertung__hinweis{ max-width:90ch; }
.band .abschluss__inner p{ max-width:60ch; }

/* Karten im Raster (Ablauf, Bewertungen): den Abstand aus „.band__card + .band__card" aufheben —
   sonst sitzen die zweite und jede weitere Karte 1rem tiefer als die erste */
.schritte .band__card, .bewertungen .band__card{ margin:0; }
/* Bewertungen im Zwei-Spalten-Raster (Tablet): die dritte Karte läuft über die volle Breite,
   statt allein in einer halben Spalte zu stehen. Grenzen = Raster: 2×280px + 1rem bis 3×280px + 2rem. */
.bewertungen{ container-type:inline-size; }
@container (576px <= width < 872px){
  .bewertungen .band__card:last-child:nth-child(odd){ grid-column:1 / -1; }
}

/* Ablauf-Raster: Spaltenzahl je Breite (Begründung oben bei „Ablauf-Karten") */
@media (min-width:35em){
  .schritte{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .schritte > .band__card:last-child:nth-child(odd){ grid-column:1 / -1; }
}
@media (min-width:56.25em){
  .schritte--3, .schritte--6, .schritte--9{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  .schritte--3 > .band__card:last-child:nth-child(odd), .schritte--9 > .band__card:last-child:nth-child(odd){ grid-column:auto; }
}
@media (min-width:70em){
  .schritte--4, .schritte--5, .schritte--8{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}
/* Nummer, Titel und Text stehen je Reihe auf gleicher Höhe: Jede Karte belegt drei Zeilen des Rasters
   und übernimmt sie (subgrid), die Karten einer Reihe sind damit auch gleich hoch.
   Karten ohne Text: der Titel reicht bis in die letzte Zeile, damit der Innenabstand unten bleibt.
   Die breite Karte (ungerade letzte) teilt sich zusätzlich die Spalten: links Nummer und Titel in der
   ersten Spalte, rechts der Text, bündig mit dem Text der Karte darüber; Titel und erste Textzeile auf einer Grundlinie. */
@supports (grid-template-rows:subgrid){
  @media (min-width:35em){
    .schritte > .band__card{ display:grid; grid-row:span 3; grid-template-rows:subgrid; row-gap:0; align-content:start; }
    .schritte > .band__card > h3:last-child{ grid-row:span 2; }
    .schritte > .band__card:last-child:nth-child(odd){ grid-template-columns:subgrid; column-gap:1rem; }
    .schritte > .band__card:last-child:nth-child(odd) > .schritte__nr{ grid-column:1; grid-row:1; }
    .schritte > .band__card:last-child:nth-child(odd) > h3{ grid-column:1; grid-row:2 / span 2; align-self:baseline; }
    .schritte > .band__card:last-child:nth-child(odd) > p{ grid-column:2 / -1; grid-row:2 / span 2; align-self:baseline; margin-left:calc(1.4rem + 3px); max-width:62ch; }
  }
  /* Drei Spalten (3 oder 9 Karten): die letzte Karte ist wieder eine normale Karte */
  @media (min-width:56.25em){
    .schritte--3 > .band__card:last-child:nth-child(odd), .schritte--9 > .band__card:last-child:nth-child(odd){ grid-template-columns:none; }
    .schritte--3 > .band__card:last-child:nth-child(odd) > *, .schritte--9 > .band__card:last-child:nth-child(odd) > *{ grid-column:auto; grid-row:auto; align-self:auto; margin-left:0; max-width:none; }
  }
  /* Vier Spalten (5 Karten): Die breite Karte teilt sich in zwei Hälften wie im Zwei-Spalten-Raster. Links Nummer und
     Titel (Spalten 1–2), rechts der Text (Spalten 3–4, bündig mit dem Text von Karte 03). So reicht der Text bis an
     den rechten Rand, statt nach 62ch ein gutes Drittel der Karte leer zu lassen; die Zeile bleibt unter 90 Zeichen. */
  @media (min-width:70em){
    .schritte--5 > .band__card:last-child:nth-child(odd) > h3{ grid-column:1 / span 2; }
    .schritte--5 > .band__card:last-child:nth-child(odd) > p{ grid-column:3 / -1; max-width:none; }
  }
}

/* Weitere Raster ohne halb leere letzte Reihe: ungerade letzte Zeile bzw. Frage über beide Spalten */
@media (min-width:900px){
  .leist--2 > .leist__row:last-child:nth-child(odd){ grid-column:1 / -1; }
}
@media (min-width:721px){
  .faq__grid > .faq__item:last-child:nth-child(odd){ grid-column:1 / -1; }
}
/* Fotoreihe (Über uns, sobald Fotos da sind): Spaltenzahl = Fotoanzahl (Klasse bilder--N), unter 640px untereinander */
@media (min-width:640px){
  .bilder--2{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .bilder--3{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
/* Auswahlgruppen (Ja/Nein, Versicherung, Fahrzeugarten): nicht wie Feldüberschriften (.field label) setzen.
   Alle Felder einer Gruppe gleich breit und gleich hoch. Nebeneinander (gleiche Spalten, Inhalt mittig) erst,
   wenn die längste Beschriftung einzeilig passt; die Stufe setzt formulare.mjs (field--kurz/-mittel/-lang).
   Gemessen mit drei Feldern: kurz braucht gut 410px Gruppenbreite, mittel gut 600px, lang knapp 790px;
   die Grenzen unten lassen Luft für breitere Ersatzschriften. Schmaler: untereinander in voller Breite.
   Grenzen in rem (27,5 / 40 / 51,25rem = 440 / 640 / 820px bei 16px): Sie wachsen mit der Standardschrift
   des Browsers wie die Beschriftungen, sonst stünden bei 125 % Schrift zweizeilige Felder in einer Reihe. */
.field__opts{ display:grid; gap:.5rem; grid-template-columns:minmax(0,1fr); grid-auto-rows:1fr; }
.field--jn .opt{ text-transform:none; letter-spacing:0; font-family:var(--body); font-weight:400; font-size:.95rem; line-height:1.35; color:var(--ink); display:flex; align-items:center; gap:.55rem; margin:0; }
@container (min-width:27.5rem){
  .field--kurz .field__opts{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); }
  .field--kurz .opt{ justify-content:center; text-align:center; }
}
@container (min-width:40rem){
  .field--mittel .field__opts{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); }
  .field--mittel .opt{ justify-content:center; text-align:center; }
}
@container (min-width:51.25rem){
  .field--lang .field__opts{ grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); }
  .field--lang .opt{ justify-content:center; text-align:center; }
}
/* Radioknopf immer 18px: Ohne diese Regel greift „.field input" (volle Breite, Innenabstand) und bläht ihn auf */
.opt input[type="radio"]{ flex:none; width:18px; height:18px; margin:0; padding:0; }
/* Tastatur: Rahmen des Felds zeigt zusätzlich zum Fokusring des Knopfs, wo man steht */
.opt:has(input:focus-visible){ border-color:var(--hv-ink); }
/* Fokus ohne Fokusring (Absenden mit der Maus, das Skript springt in die leere Pflichtgruppe): Rahmen wie bei
   Textfeldern (.field input:focus). Ausgewählte Felder behalten beim Klicken ihren Hochvolt-Rahmen. */
.opt:not(.is-sel):focus-within{ border-color:var(--hv-ink); }
/* Anfrage-Assistent: alle Antworten gleich hoch, auch wenn eine auf schmalen Bildschirmen zweizeilig wird */
.wiz__opts{ grid-auto-rows:1fr; container-type:inline-size; }
/* Schmale Liste (Handy, Assistent in der Seitenspalte bei etwa 1000px): „Sportwagen / Oldtimer / Motorsport" bricht
   um, durch die Gleichhöhe würden alle sechs Antworten 85px hoch. Dort Zeilenhöhe und Innenabstand wie bei den
   Auswahlgruppen der Formulare (.field--jn .opt). Grenze: Die längste Antwort braucht einzeilig knapp 350px. */
@container (width < 22.5rem){
  .wiz__opts .opt{ padding-block:.6rem; line-height:1.35; }
}

/* Kacheln mit mehr Text (Schnelleinstiege): Verlauf kräftiger, auf dem Handy höher —
   damit Beschriftung und Text im dunklen Teil liegen (Lesbarkeit/Kontrast), Look unverändert */
.welt:has(.welt__mehr)::after{ background:linear-gradient(180deg, oklch(17% .008 260 /.08) 0%, oklch(17% .008 260 /.4) 38%, oklch(17% .008 260 /.9) 100%); }
@media (max-width:980px){ .welt:has(.welt__mehr):not(.welt--flat){ min-height:340px; } }

/* Helle Kacheln: kein dunkler Textschatten (auf hellem Grund verwischt) */
.welt--flat .welt__body{ text-shadow:none; }

/* Gesperrter Absendeknopf (Formulare ohne JavaScript; site.js schaltet ihn frei):
   gedämpft, ohne Hover-Bewegung und ohne Farbwechsel */
.btn:disabled,.btn[disabled]{ opacity:.5; cursor:not-allowed; }
.btn:disabled:hover,.btn[disabled]:hover{ background:var(--bg); border-color:var(--bg); transform:none; }
.btn--ghost:disabled:hover,.btn--ghost[disabled]:hover{ border-color:var(--line-2); color:var(--fg); }
.btn:disabled:hover .btn__ar,.btn[disabled]:hover .btn__ar{ transform:none; }

/* --- Kopf-Knopf „Termin buchen" (Desktop-Kopf und Schubfach) ---
   Nur dieser Knopf, nicht .btn allgemein: etwas größer, weichere Ecken, Druck-Feedback.
   Ohne diese Regeln setzen .mast__nav a / .drawer a Innenabstand, Rahmen und Schriftstärke von .btn außer Kraft. */
.mast__nav a.mast__cta, .drawer a.btn{
  font-weight:600; letter-spacing:.05em; line-height:1.2; white-space:nowrap;
  background:var(--hv); color:#150c02; border:2px solid var(--hv); border-radius:var(--r-lg);
  box-shadow:0 1px 2px oklch(0% 0 0 / .3), 0 4px 14px -6px color-mix(in oklch, var(--hv) 40%, transparent);
  transition:transform 160ms var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  -webkit-tap-highlight-color:transparent;
}
.mast__nav a.mast__cta{ font-size:1rem; padding:.62em 1.15em; }
.drawer a.btn{ font-size:1.15rem; padding:.95em 1.2em; } /* nicht kleiner als vorher (1.15rem aus .drawer a) */
/* Sehr schmale Handys (unter 360px): „Unfallinstandsetzung" läuft im Schubfach sonst über den Rand */
@media (max-width:359px){
  .drawer{ padding-inline:1.25rem; }
  .drawer a{ font-size:1.05rem; }
}
/* Reduzierte Bewegung: Schubfach und Menüknopf wechseln ohne Einfahren und Drehen (der Schleier blendet weiter kurz über) */
@media (prefers-reduced-motion:reduce){
  .drawer, .burger span{ transition:none; }
}
/* Mittlere Breiten (721–999px): Knopf kompakter und beide Navigationshälften gleich eng
   (rechts braucht es den Platz, sonst bricht „Über uns" bis etwa 940px um), damit das Logo
   in der Mitte bleibt und der Kopf nicht höher wird. Ab 1000px volle Größe und alte Abstände. */
@media (min-width:721px) and (max-width:999px){
  .mast__nav{ gap:1rem; }
  .mast__nav a.mast__cta{ font-size:.95rem; letter-spacing:.04em; padding:.6em .8em; }
}
/* Tablet hochkant (721–899px): Fünf Links, Logo und Knopf passen nur mit kleinerer Schrift und engerer
   Laufweite in eine Zeile. Kein Umbruch in den Links („Über uns"); das Logo steht ab 744px (iPad mini
   hochkant) genau mittig, zwischen 721 und 743px höchstens 8px links davon. */
@media (min-width:721px) and (max-width:899px){
  .mast{ gap:.6rem; }
  .mast__nav{ gap:.65rem; }
  .mast__nav a{ font-size:.85rem; letter-spacing:.02em; white-space:nowrap; }
  .mast__nav a.mast__cta{ font-size:.85rem; letter-spacing:.02em; padding:.55em .6em; }
}
/* Obere Zeile (Name, Adresse, Zeiten, Telefon): Unter etwa 795px passten beide Hälften nicht nebeneinander, beide
   brachen um („… 61250 / Usingen", „0151 185 156 / 18") und der Kopf wurde 16px höher. Bis 50em fehlt dort die
   Adresse wie auf dem Handy (sie steht im Fuß und auf der Kontaktseite); die Telefonnummer bricht nie um. */
.top__bar a[href^="tel:"]{ white-space:nowrap; }
@media (min-width:721px) and (max-width:49.99em){
  .top__bar > span:first-child .hide-sm{ display:none; }
}
/* Überfahren ohne Bewegung als Grundzustand (Touch löst :hover beim Tippen aus) */
.mast__nav a.mast__cta:hover, .drawer a.btn:hover{ background:var(--hv); border-color:var(--hv); color:#150c02; transform:none; }
@media (hover:hover) and (pointer:fine){
  .mast__nav a.mast__cta:hover, .drawer a.btn:hover{
    transform:translateY(-1px);
    box-shadow:0 2px 4px oklch(0% 0 0 / .3), 0 10px 26px -8px color-mix(in oklch, var(--hv) 75%, transparent);
  }
}
.mast__nav a.mast__cta:active, .drawer a.btn:active{
  transform:scale(.97); transition-duration:100ms;
  box-shadow:0 1px 1px oklch(0% 0 0 / .3), 0 2px 8px -4px color-mix(in oklch, var(--hv) 40%, transparent);
}
.mast__nav a.mast__cta:focus-visible, .drawer a.btn:focus-visible{ outline:2px solid var(--on-dark); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  .mast__nav a.mast__cta, .drawer a.btn{ transition:background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
  .mast__nav a.mast__cta:hover, .drawer a.btn:hover, .mast__nav a.mast__cta:active, .drawer a.btn:active{ transform:none; }
}

/* --- Fester Kopf: Anker- und Fokusziele nicht darunter schieben (WCAG 2.2, 2.4.11) ---
   Der bisherige Abstand oben (100–128px) war an jeder Breite kleiner als der Kopf (112–140px), Ziele lagen bis zu
   22px darunter. Werte = gemessene Kopfhöhe + 8px Luft; site.js misst den Kopf und setzt den Wert genau
   (auch bei vergrößerter Schrift), diese Regeln gelten ohne JavaScript. */
html{ scroll-padding-top:142px; }
@media (max-width:720px){ html{ scroll-padding-top:125px; } }
@media (min-width:721px) and (max-width:899px){ html{ scroll-padding-top:137px; } } /* Kopf 117–129px, seit die obere Zeile nicht mehr umbricht */
/* Tastatur (site.js setzt .tastatur nach einem Tastendruck, Maus oder Finger nehmen die Klasse wieder weg):
   Fokus-Scrollen ohne Animation. Sanft endete es in Chrome teils 10–30px zu kurz, das Ziel lag dann unter dem Kopf.
   Mit Maus und Finger bleibt das sanfte Scrollen der Ankerlinks. */
html.tastatur{ scroll-behavior:auto; }

/* --- WhatsApp-Knopf (nur Handy): rund, schwebt rechts über der Anrufleiste ---
   Steht im Markup in der Anrufleiste (Landmark „Schnellkontakt"), ist aber position:fixed und belegt dort
   keine Rasterzelle; auf dem Desktop verschwindet er mit der Leiste. Liegt im Stapel der Leiste (70),
   also unter Scrim (75) und Schubfach (80); bei offenem Schubfach ausgeblendet (site.js setzt .drawer.open).
   Farben bewusst: WhatsApp-Markengrün #25D366 mit weißem Logo. Das Symbol hat darauf nur etwa 2:1 Kontrast;
   Ausnahme Markenlogo, der Zweck steht zusätzlich im zugänglichen Namen (aria-label). */
.wa-fab{ display:none; }
@keyframes wa-ein{ from{ opacity:0; translate:0 10px; scale:.9; } }
@media (max-width:720px){
  .callbar a.wa-fab{
    position:fixed; z-index:1;
    right:calc(16px + env(safe-area-inset-right, 0px));
    bottom:calc(72px + env(safe-area-inset-bottom, 0px)); /* Anrufleiste (58px) + 14px Luft */
    display:grid; place-items:center; width:56px; height:56px; padding:0; border:0; border-radius:50%;
    background:#25D366; color:#fff;
    box-shadow:0 1px 3px oklch(0% 0 0 / .22), 0 8px 22px -6px oklch(0% 0 0 / .4);
    transition:transform 160ms var(--ease), box-shadow var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility 0s linear 0s;
    animation:wa-ein 240ms var(--ease) 120ms backwards;
    -webkit-tap-highlight-color:transparent;
  }
  .callbar a.wa-fab svg{ width:30px; height:30px; }
  /* Seitenende: Der Fuß endet oberhalb des Knopfs (70px über der Anrufleiste),
     damit die letzten Links (Lizenzen, DRB IT Solution) nie darunter liegen */
  .foot{ padding-bottom:calc(1.5rem + 56px); }
  /* Tastatur: Fokusziele beim Durchtabben über Anrufleiste und Knopf halten
     (72px Abstand des Knopfs + 56px Knopf + 8px Luft). Dazu etwas Abstand am Element selbst, für Browser,
     die beim Fokussieren nur scroll-margin auswerten (WCAG 2.2, 2.4.11) */
  html{ scroll-padding-bottom:calc(136px + env(safe-area-inset-bottom, 0px)); }
  :where(a[href], button, input, select, textarea, summary){ scroll-margin-bottom:1rem; }
  .callbar a.wa-fab:active{ transform:scale(.94); transition-duration:100ms; box-shadow:0 1px 2px oklch(0% 0 0 / .25), 0 3px 10px -4px oklch(0% 0 0 / .35); }
  /* Zweifarbiger Ring: hell auf dunklem Grund, dunkel auf hellem Grund */
  .callbar a.wa-fab:focus-visible{ outline:2.5px solid var(--dark); outline-offset:2.5px; box-shadow:0 0 0 2.5px var(--on-dark); }
  .drawer.open ~ .callbar a.wa-fab{
    opacity:0; visibility:hidden; pointer-events:none; transform:scale(.9);
    transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  /* Der Knopf ist ausgeblendet, solange er auf oder dicht neben den Knöpfen oben auf der Seite läge. Startseite:
     solange Hero-Knöpfe oder Schnellkontakt zwischen Kopf und Anrufleiste stehen (bei 320px läge er sonst über
     „Leistungen entdecken"). Unterseiten und 404: nur solange ein Knopf des Seitenkopfs im Feld des WhatsApp-Knopfs
     liegt (12px Luft ringsum). site.js setzt dafür .wa-hero und .wa-frei (IntersectionObserver). Hat der Knopf den
     Tastaturfokus, bleibt er stehen, damit der Fokus beim Zurückscrollen nicht verloren geht. */
  .wa-hero:not(.wa-frei) .callbar a.wa-fab:not(:focus-visible){
    opacity:0; visibility:hidden; pointer-events:none; transform:scale(.9);
    transition:transform var(--dur) var(--ease), opacity var(--dur) var(--ease), visibility 0s linear var(--dur);
  }
  /* Pause-Taste des Hero-Videos oben links in den Hero: unten läge sie im ersten Bildschirm unter der
     Anrufleiste, rechts unten schwebt der Knopf. Die Taste steht im Markup direkt in .hero (nicht in .hero__media
     mit z-index:-2), nur so liegt sie über .hero__inner und nimmt Klicks und Berührungen an. */
  .hero__vidctl{ right:auto; left:.7rem; top:.7rem; bottom:auto; }
}
/* Ohne JavaScript startet das Video nicht (kein autoplay im HTML, site.js startet es), es steht das Standbild.
   Die Pause-Taste hätte dann keine Wirkung und ist ausgeblendet. */
html:not(.js) .hero__vidctl{ display:none; }
/* Ohne Skripte blendet Chrome nach dem HTML-Standard eigene Bedienelemente ins Video ein: vier bis fünf zusätzliche
   Tab-Stopps unter dem dunklen Verlauf, der Fokus darauf kaum sichtbar. Ohne sie bleibt das Standbild wie vorgesehen. */
html:not(.js) .hero__media video::-webkit-media-controls{ display:none; }
/* Desktop: Taste im ersten Bildschirm. Hero und Kopf sind zusammen höher als der Bildschirm (1440×900: Taste bei
   870–910px). Die Taste rückt so weit hoch, dass sie 1rem über der Bildschirmunterkante steht
   (150px = Kopf 134px + 1rem); ist der Hero niedriger, bleibt sie wie bisher 1rem über seiner Unterkante. */
@media (min-width:721px){
  .hero__vidctl{ bottom:max(1rem, calc(100% - 100vh + 150px)); bottom:max(1rem, calc(100% - 100svh + 150px)); }
}
/* Ohne diese Beobachtung (kein JavaScript oder site.js noch nicht geladen): Browser mit scroll-getriebenen
   Animationen machen dasselbe rein per CSS. Startseite: Zeitleiste ist der Weg des Hero-Schnellkontakts durch den
   Bildschirm, oben um den Kopf (117px) verkürzt; erst danach steht der Knopf. Unterseiten und 404: ausgeblendet,
   solange die Knöpfe des Seitenkopfs die Höhe des Knopfs kreuzen (Streifen 60–140px über der Unterkante = Knopf
   mit 12px Luft), davor und danach steht er. Anders als site.js prüft das nur die Höhe, nicht die Seite.
   So gleichen die Seiten ohne JavaScript denen mit JavaScript, und der Knopf blinkt nicht auf, wenn site.js spät lädt.
   Die Animation schaltet nur ein und aus (keine Bewegung) und gilt daher auch bei reduzierter Bewegung. */
@supports (animation-timeline:view()) and (timeline-scope:--a) and selector(:has(a)){
  @media (max-width:720px) and (min-height:421px){
    html:not(.wa-hero):has(.hero__schnell){ timeline-scope:--wa-schnell; }
    html:not(.wa-hero) .hero__schnell{ view-timeline:--wa-schnell block; view-timeline-inset:117px 0px; }
    html:not(.wa-hero):has(.hero__schnell) .callbar a.wa-fab:not(:focus-visible){ animation:wa-nach-hero 1ms linear both; animation-timeline:--wa-schnell; animation-range:cover 0% cover 100%; }
    /* overflow:clip statt hidden schneidet gleich ab, macht den Seitenkopf aber nicht zum Scrollbereich; sonst
       bezöge sich die Zeitleiste der Knöpfe auf den Seitenkopf statt auf den Bildschirm (Innenabstand: kein Randeinbruch) */
    html:not(.wa-hero) .band.pagehead{ overflow:clip; }
    html:not(.wa-hero):has(.pagehead__actions, .e404__actions){ timeline-scope:--wa-kopf; }
    html:not(.wa-hero) :is(.pagehead__actions, .e404__actions){ view-timeline:--wa-kopf block; view-timeline-inset:calc(100% - 140px - env(safe-area-inset-bottom, 0px)) calc(60px + env(safe-area-inset-bottom, 0px)); }
    html:not(.wa-hero):has(.pagehead__actions, .e404__actions) .callbar a.wa-fab:not(:focus-visible){ animation:wa-im-kopf 1ms linear none; animation-timeline:--wa-kopf; animation-range:cover 0% cover 100%; }
  }
}
@keyframes wa-nach-hero{ 0%, 99.9%{ opacity:0; visibility:hidden; } 100%{ opacity:1; visibility:visible; } }
@keyframes wa-im-kopf{ from, to{ opacity:0; visibility:hidden; } }
/* Browser ohne diese Technik: Der Knopf steht von Anfang an. Dann übernimmt er den WhatsApp-Link des
   Hero-Schnellkontakts (er läge im ersten Bildschirm sonst genau darüber), und unter 360px steht die Nummer
   unter „Anrufen" (einzeilig endete sie 2px vor dem Knopf). Bei 320px berührt der Knopf dort die Hero-Knöpfe
   (bis 18px bei 320×640); bewusst hingenommen, das betrifft nur ältere Browser ohne JavaScript. */
@supports not ((animation-timeline:view()) and (timeline-scope:--a) and selector(:has(a))){
  @media (max-width:720px) and (min-height:421px){
    html:not(.wa-hero) .hero__schnell .hero__trenn, html:not(.wa-hero) .hero__schnell .hero__wa{ display:none; }
  }
  @media (max-width:359px) and (min-height:421px){
    html:not(.wa-hero) .hero__schnell a[href^="tel:"]{ display:inline-block; }
    html:not(.wa-hero) .hero__schnell a[href^="tel:"] b{ display:block; }
  }
}
/* Wenig Höhe (Handy quer, starker Zoom): Knopf weg, damit er nicht einen großen Teil der freien Fläche belegt.
   WhatsApp bleibt über den Hero-Schnellkontakt, die Kontakt- und die Terminseite erreichbar. */
@media (max-width:720px) and (max-height:420px){
  .callbar a.wa-fab{ display:none; }
  html{ scroll-padding-bottom:calc(64px + env(safe-area-inset-bottom, 0px)); }
  .foot{ padding-bottom:1.5rem; }
}
@media (prefers-reduced-motion:reduce){
  .callbar a.wa-fab{ animation:none; transition:opacity var(--dur) var(--ease), visibility 0s linear 0s; }
  .callbar a.wa-fab:active, .drawer.open ~ .callbar a.wa-fab{ transform:none; }
  /* Knopf ohne Übergang ein- und ausblenden */
  .wa-hero .callbar a.wa-fab, .wa-hero:not(.wa-frei) .callbar a.wa-fab:not(:focus-visible){ transition:none; transform:none; }
}
@media print{ .wa-fab, .callbar a.wa-fab{ display:none; } }