/* ============================================================================
   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);
  }
  .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; } }