/* ═══════════════════════════════════════════════════════════════
   SchadenFix — Pit-Lane × Carbon × Industrial Motorsport
   Nima Autowerkstatt · Trier · Wittlich
   ═══════════════════════════════════════════════════════════════ */

/* ─── Local Fonts (DSGVO-konform, kein Google-CDN) ─── */
@font-face {
  font-family: 'Anton';
  font-style: normal; font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Anton';
  font-style: normal; font-weight: 400;
  font-display: swap;
  src: url('../fonts/anton-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal; font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal; font-weight: 400 700;
  font-display: swap;
  src: url('../fonts/space-grotesk-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal; font-weight: 400;
  font-display: swap;
  src: url('../fonts/space-mono-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal; font-weight: 400;
  font-display: swap;
  src: url('../fonts/space-mono-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal; font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-mono-700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Space Mono';
  font-style: normal; font-weight: 700;
  font-display: swap;
  src: url('../fonts/space-mono-700-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ─── Design Tokens ─── */
:root {
  /* Surfaces */
  --ink:      #050505;    /* carbon void */
  --carbon:   #0d0d0d;    /* base carbon */
  --carbon-2: #161616;    /* card */
  --carbon-3: #232323;    /* raised */
  --rule:     rgba(255,255,255,.10);
  --rule-2:   rgba(255,255,255,.18);

  /* Paper sections */
  --paper:    #f4f3ee;
  --paper-2:  #e9e6da;
  --paper-3:  #d4cfbc;

  /* Signal colors */
  --yel:      #f5d300;    /* hazard yellow — primary accent */
  --yel-deep: #c9ac00;
  --red:      #ff2a1f;    /* race red — alert/critical */
  --red-deep: #c41a10;
  --grn:      #25d366;    /* whatsapp */
  --txt-mute: #a3a3a3;
  --txt-dim:  #6e6e6e;

  /* Type */
  --f-display: 'Anton', 'Bebas Neue', 'Impact', 'Arial Narrow', sans-serif;
  --f-body:    'Space Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --f-mono:    'Space Mono', ui-monospace, 'JetBrains Mono', monospace;

  /* Layout */
  --max: 1360px;
  --pad: clamp(20px, 4vw, 56px);
  --hazard: repeating-linear-gradient(
    135deg,
    var(--yel) 0 14px,
    var(--ink) 14px 28px
  );
  --hazard-thin: repeating-linear-gradient(
    135deg,
    var(--yel) 0 7px,
    var(--ink) 7px 14px
  );
}

/* ─── Reset / Base ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--f-body);
  color: #ededed;
  background: var(--ink);
  line-height: 1.55;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  font-feature-settings: 'ss01', 'cv11';
  overflow-wrap: break-word;
  word-break: break-word;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; background: none; border: 0; color: inherit; }
svg { display: block; }

::selection { background: var(--yel); color: var(--ink); }

/* ─── Overlays ─── */
.grain {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 200;
  opacity: .08; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scanline {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 199;
  opacity: .15;
  background-image: repeating-linear-gradient(
    180deg,
    transparent 0 2px,
    rgba(255,255,255,.04) 2px 3px
  );
}

/* ═══════════════════════════════════════════════════════════════
   TELEMETRIE TICKER
   ═══════════════════════════════════════════════════════════════ */
.ticker {
  background: var(--ink);
  border-top: 1px solid var(--yel);
  border-bottom: 1px solid var(--yel);
  overflow: hidden;
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--yel);
  padding: 9px 0;
  position: sticky; top: 0; z-index: 60;
  box-shadow: 0 6px 18px rgba(0,0,0,.6);
}
.ticker-track {
  display: inline-flex; gap: 22px;
  white-space: nowrap;
  animation: ticker 70s linear infinite;
  padding-left: 22px;
  align-items: center;
}
.ticker-track em { color: #fff; font-style: normal; font-weight: 700; padding: 0 4px; }
.t-pill {
  padding: 3px 10px;
  border: 1px solid currentColor;
  letter-spacing: .26em;
}
.t-pill-yel { background: var(--yel); color: var(--ink) !important; }
.t-pill-yel em { color: var(--ink) !important; }
.t-pill-red { background: var(--red); color: #fff !important; border-color: var(--red); }
@keyframes ticker {
  to { transform: translateX(-50%); }
}

/* ═══════════════════════════════════════════════════════════════
   PIT-BOARD HEADER
   ═══════════════════════════════════════════════════════════════ */
.head {
  position: sticky; top: 33px;
  z-index: 55;
  background: rgba(5,5,5,.86);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--rule);
  transition: background .25s ease, border-color .25s ease;
}
.head.is-scrolled {
  background: rgba(5,5,5,.96);
  border-bottom-color: var(--yel);
}
.head-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 16px var(--pad);
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  align-items: center;
  gap: 18px;
}

.brand { display: flex; align-items: center; gap: 14px; color: var(--yel); }
.brand-logo {
  height: 82px;
  width: auto;
  display: block;
  flex: 0 0 auto;
}
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-name {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -.025em;
  color: #fff;
  line-height: 1;
  font-feature-settings: 'ss01';
}
.brand-schaden { color: #fff; }
.brand-fix     { color: var(--yel); }
.brand-pipe    { color: var(--yel); padding: 0 1px; }
.brand-meta {
  font-family: var(--f-mono);
  font-size: 9px;
  letter-spacing: .26em;
  color: var(--txt-mute);
  margin-top: 6px;
}

.nav { display: flex; gap: 2px; }
.nav a {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;            /* Labels nie umbrechen ("LEISTUNG/EN") */
  color: #e3e3e3;
  padding: 9px 10px;
  display: inline-flex; align-items: baseline; gap: 7px;
  border: 1px solid transparent;
  transition: color .2s, border-color .2s, background .2s;
  position: relative;
}
.nav a:hover {
  color: var(--yel);
  border-color: var(--rule-2);
}
.nav-num { color: var(--yel); opacity: .75; font-size: 9px; }
.nav a:hover .nav-num { opacity: 1; }

.head-cta {
  position: relative;
  display: inline-flex; flex-direction: column;
  padding: 11px 30px 11px 26px;
  min-width: 200px;
  background: var(--yel);
  color: var(--ink);
  font-family: var(--f-mono);
  border: 2px solid var(--yel);
  line-height: 1.1;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .2s ease;
  box-shadow: 4px 4px 0 var(--ink), 4px 4px 0 1px var(--yel);
}
.head-cta:hover { transform: translate(-1px, -1px); box-shadow: 6px 6px 0 var(--ink), 6px 6px 0 1px var(--yel); }
.head-cta:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.head-cta-stripes {
  position: absolute; inset: auto 0 0 0;
  height: 4px;
  background: var(--hazard-thin);
}
.head-cta-label {
  font-size: 9px; letter-spacing: .26em; text-transform: uppercase;
  font-weight: 700; display: inline-flex; align-items: center; gap: 6px;
}
.head-cta-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--red); display: inline-block;
  box-shadow: 0 0 0 0 rgba(255,42,31,.6);
  animation: pulse 1.4s ease-out infinite;
}
.head-cta-num { font-weight: 700; font-size: 14px; letter-spacing: .04em; margin-top: 2px; }

.burger {
  display: none;
  width: 44px; height: 44px;
  border: 1px solid var(--rule-2);
  color: var(--yel);
  position: relative;
}
.burger span {
  position: absolute; left: 12px; right: 12px; height: 2px;
  background: currentColor;
  transition: transform .25s, opacity .2s, top .25s;
}
.burger span:nth-child(1) { top: 17px; }
.burger span:nth-child(2) { top: 22px; }
.burger span:nth-child(3) { top: 27px; }
.burger[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

.drawer {
  display: none;
  background: var(--carbon);
  border-top: 1px solid var(--yel);
  padding: 16px var(--pad);
  flex-direction: column; gap: 2px;
}
.drawer a {
  font-family: var(--f-mono);
  font-size: 13px; letter-spacing: .18em; text-transform: uppercase;
  padding: 14px 10px;
  border-bottom: 1px solid var(--rule);
  display: flex; align-items: baseline; gap: 8px;
  color: #ededed;
}
.drawer a:hover { color: var(--yel); }
.drawer-cta {
  background: var(--yel); color: var(--ink) !important;
  border-bottom: 0 !important;
  margin-top: 10px;
  display: flex !important; flex-direction: column !important;
  align-items: flex-start !important;
  padding: 16px !important;
}
.drawer-cta strong { font-size: 22px; letter-spacing: .02em; font-family: var(--f-body); }
.drawer.is-open { display: flex; }

@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(255,42,31,.6); }
  70% { box-shadow: 0 0 0 14px rgba(255,42,31,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,42,31,0); }
}

/* ═══════════════════════════════════════════════════════════════
   HERO
   ═══════════════════════════════════════════════════════════════ */
.hero {
  position: relative;
  /* Hintergrund einfarbig — kein Werkstatt-Bild, keine Funken (Kunden-Wunsch) */
  background-color: var(--ink);
  background-image: none;
  color: #fff;
  overflow: hidden;
  padding: 0;
  isolation: isolate;
}
/* Raster + Schräg-Streifen im Hero ausgeblendet (einfarbig) */
.hero-grid-bg,
.hero-stripes { display: none !important; }
.hero-grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(245,211,0,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,211,0,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  background-position: center center;
  pointer-events: none;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%);
  z-index: 0;
}
.hero-stripes {
  position: absolute; top: 0; bottom: 0; left: -10%;
  width: 35%;
  background: repeating-linear-gradient(
    -68deg,
    transparent 0 80px,
    rgba(245,211,0,.04) 80px 82px,
    transparent 82px 160px
  );
  pointer-events: none;
  z-index: 0;
  transform: skewX(-8deg);
}

.hero-inner {
  position: relative;
  z-index: 2;
  max-width: var(--max);
  margin: 0 auto;
  padding: 80px var(--pad) 48px;
}

.hero-startnum {
  position: absolute;
  top: 32px; right: var(--pad);
  display: flex; flex-direction: column; align-items: flex-end;
  z-index: 1;
  pointer-events: none;
}
.hero-startnum-tag {
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .3em;
  color: var(--yel);
  border: 1px solid var(--yel);
  padding: 3px 8px;
  margin-bottom: 6px;
}
.hero-startnum-big {
  font-family: var(--f-display);
  font-size: clamp(110px, 16vw, 220px);
  line-height: .82;
  color: transparent;
  -webkit-text-stroke: 2px rgba(245,211,0,.22);
  letter-spacing: -.02em;
  filter: drop-shadow(0 4px 0 rgba(245,211,0,.05));
}
.hero-startnum-foot {
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .3em;
  color: var(--txt-mute);
  margin-top: 4px;
}

.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 60px;
  align-items: start;
  position: relative;
  z-index: 2;
}

.hero-left { max-width: none; }

.hero-mark {
  display: inline-flex; align-items: center;
  gap: 14px;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--yel);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--yel);
  margin-bottom: 28px;
}
.hero-mark-num { color: #fff; opacity: .6; }
.hero-mark-label { color: var(--yel); }

.hero-title {
  font-family: var(--f-display);
  font-size: clamp(40px, 12.5vw, 175px);
  line-height: .92;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 400;
  max-width: 100%;
}
.hero-cut {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: clamp(20px, 3vw, 40px);
  letter-spacing: .1em;
  color: var(--yel);
  font-weight: 700;
  transform: translateY(-.4em);
  margin: 0 .15em;
  padding: 4px 12px;
  border: 2px solid var(--yel);
}
.hero-title-row { display: block; }
.hero-title-strike {
  display: inline-block;
  position: relative;
  color: var(--txt-mute);
  margin-right: .25em;
}
.hero-title-strike::after {
  content: ''; position: absolute;
  left: -4%; right: -4%;
  top: 52%; height: .14em;
  background: var(--red);
  transform: rotate(-6deg);
}
.hero-title-hit {
  display: inline-block;
  max-width: 100%;
  white-space: nowrap;
  background: var(--yel);
  color: var(--ink);
  padding: 0 .12em;
  clip-path: polygon(3% 0, 100% 0, 97% 100%, 0 100%);
}

.hero-lead {
  margin-top: 32px;
  font-size: clamp(16px, 1.5vw, 19px);
  line-height: 1.55;
  color: #d5d5d5;
  max-width: 560px;
}
.hero-lead strong { color: var(--yel); font-weight: 700; }

.hero-actions {
  margin-top: 36px;
  display: flex; flex-wrap: wrap; gap: 14px;
  max-width: 620px;
}

/* CTA — common */
.cta {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  min-height: 58px;
  padding: 0 30px;
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 13px; letter-spacing: .14em;
  text-transform: uppercase;
  border: 2px solid var(--yel);
  background: var(--yel);
  color: var(--ink);
  transition: transform .18s cubic-bezier(.2,.7,.2,1), box-shadow .18s cubic-bezier(.2,.7,.2,1);
  box-shadow: 5px 5px 0 var(--ink);
  overflow: hidden;
  isolation: isolate;
}
.cta-primary .cta-stripes {
  position: absolute; inset: auto 0 0 0; height: 5px;
  background: var(--hazard-thin);
  z-index: 1;
}
.cta:hover { transform: translate(-2px, -2px); box-shadow: 7px 7px 0 var(--ink); }
.cta:active { transform: translate(2px, 2px); box-shadow: 3px 3px 0 var(--ink); }
.cta-icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 18px;
}
.cta-icon svg { width: 22px; height: 22px; }
.cta-label { white-space: nowrap; }
.cta-tag {
  font-size: 9px; padding: 3px 6px;
  background: var(--ink); color: var(--yel);
  letter-spacing: .26em;
  margin-left: 4px;
}
.cta-ghost {
  background: transparent;
  color: var(--yel);
  border-color: var(--yel);
  box-shadow: 5px 5px 0 rgba(245,211,0,.32);
}
.cta-ghost:hover { box-shadow: 7px 7px 0 rgba(245,211,0,.32); }
.cta-ghost:active { box-shadow: 3px 3px 0 rgba(245,211,0,.32); }
.cta-ghost:hover { background: rgba(245,211,0,.08); }

/* TELEMETRIE strip */
.hero-tele {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border-top: 1px solid var(--rule-2);
  border-bottom: 1px solid var(--rule-2);
  padding: 22px 0;
  max-width: 620px;
}
.hero-tele > div {
  padding: 0 22px;
  border-left: 1px solid var(--rule);
}
.hero-tele > div:first-child { padding-left: 0; border-left: 0; }
.tele-idx {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .26em;
  color: var(--yel);
  margin-bottom: 8px;
}
.tele-idx span {
  border: 1px solid var(--yel);
  padding: 1px 5px;
  color: var(--yel);
}
.hero-tele dt {
  font-family: var(--f-display);
  font-size: clamp(34px, 4vw, 52px);
  line-height: 1;
  color: #fff;
  letter-spacing: -.01em;
}
.hero-tele dt em { font-style: normal; color: #fff; font-size: .55em; margin-left: 2px; }
.hero-tele dd {
  font-family: var(--f-mono);
  font-size: 11px;
  color: var(--txt-mute);
  letter-spacing: .14em;
  margin-top: 6px;
  text-transform: uppercase;
}

/* ─── PIT-BOARD (Right side widget) ─── */
.hero-right {
  position: relative;
  display: flex; flex-direction: column;
  gap: 18px;
}

.pitboard {
  position: relative;
  background:
    linear-gradient(180deg, rgba(255,255,255,.03), transparent 60%),
    repeating-linear-gradient(45deg, var(--carbon) 0 4px, var(--carbon-2) 4px 8px);
  border: 1px solid var(--yel);
  padding: 22px 22px 18px;
  box-shadow:
    0 30px 60px -20px rgba(0,0,0,.6),
    inset 0 0 0 1px rgba(245,211,0,.08);
}
.pitboard::before {
  content: '';
  position: absolute;
  inset: -1px -1px auto -1px;
  height: 6px;
  background: var(--hazard-thin);
}

.pb-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--yel);
  padding-bottom: 14px;
  border-bottom: 1px solid var(--rule-2);
}
.pb-head-time {
  background: var(--ink);
  border: 1px solid var(--yel);
  padding: 4px 10px;
  color: #fff;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .1em;
}

/* RPM */
.pb-rpm { padding: 18px 0 8px; }
.pb-rpm-track {
  position: relative;
  height: 14px;
  background: var(--ink);
  border: 1px solid var(--rule-2);
  overflow: hidden;
}
.pb-rpm-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    #1d8a3a 0%, #1d8a3a 35%,
    var(--yel) 50%, var(--yel) 78%,
    var(--red) 88%, var(--red) 100%);
  transform-origin: left center;
  animation: rpmpulse 2.6s ease-in-out infinite alternate;
}
@keyframes rpmpulse {
  0%   { transform: scaleX(.4); }
  60%  { transform: scaleX(.92); }
  100% { transform: scaleX(.78); }
}
.pb-rpm-tick {
  position: absolute; top: 0; bottom: 0;
  width: 1px;
  background: rgba(0,0,0,.6);
}
.pb-rpm-tick-red { background: var(--red); width: 2px; }
.pb-rpm-foot {
  margin-top: 8px;
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--txt-mute);
}
.pb-rpm-num { color: var(--yel); font-weight: 700; font-size: 18px; letter-spacing: .04em; }
.pb-rpm-max { color: var(--txt-dim); }

/* Gauges */
.pb-gauges {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
  margin-top: 18px;
  border: 1px solid var(--rule-2);
}
.pb-gauge {
  background: var(--carbon-2);
  padding: 12px 10px 10px;
}
.pb-gauge-l {
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: .3em; color: var(--txt-mute);
  display: block; text-transform: uppercase;
}
.pb-gauge-v {
  font-family: var(--f-display);
  font-size: clamp(20px, 4vw, 26px); line-height: 1;
  color: #fff;
  display: block;
  margin: 6px 0 6px;
  letter-spacing: -.01em;
}
.pb-gauge-v em { font-style: normal; font-size: 12px; color: var(--yel); margin-left: 2px; }
.pb-gauge-bar {
  display: block;
  height: 3px;
  background: var(--ink);
  position: relative;
  overflow: hidden;
}
.pb-gauge-bar span {
  position: absolute; inset: 0 auto 0 0;
  background: var(--red);
}

/* Car */
.pb-car {
  margin: 18px -22px 0;
  background: var(--ink);
  padding: 18px 22px 6px;
  border-top: 1px solid var(--rule-2);
}
.pb-car svg { width: 100%; height: auto; max-height: 100px; }

.pb-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 12px;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
}
.pb-foot-l { color: var(--txt-mute); }
.pb-foot-v { color: #fff; display: inline-flex; align-items: center; gap: 8px; }
.pb-dot {
  width: 9px; height: 9px;
  background: var(--grn);
  display: inline-block;
  box-shadow: 0 0 0 0 rgba(37,211,102,.6);
  animation: pulse-grn 1.6s ease-out infinite;
}
@keyframes pulse-grn {
  0% { box-shadow: 0 0 0 0 rgba(37,211,102,.6); }
  70% { box-shadow: 0 0 0 12px rgba(37,211,102,0); }
  100% { box-shadow: 0 0 0 0 rgba(37,211,102,0); }
}

/* Hazard rail */
.hero-hazard {
  position: relative;
  overflow: hidden;
  background: var(--hazard-thin);
  padding: 14px 0;
}
.hero-hazard span {
  display: block;
  font-family: var(--f-mono);
  font-size: 12px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--ink);
  font-weight: 700;
  text-align: center;
  background: var(--yel);
  margin: 0 14px;
  padding: 5px 10px;
}

/* Bottom row */
.hero-bottom {
  margin-top: 42px;
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--rule);
  padding-top: 18px;
}
.hero-scroll {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--txt-mute);
}
.hero-scroll-line {
  width: 64px; height: 1px; background: var(--yel);
  position: relative; overflow: hidden;
}
.hero-scroll-line::after {
  content: ''; position: absolute;
  left: -100%; top: 0; bottom: 0; width: 30%;
  background: #fff;
  animation: scrollline 2.4s ease-in-out infinite;
}
@keyframes scrollline { to { left: 100%; } }

.hero-lights { display: flex; gap: 8px; }
.hl {
  width: 22px; height: 22px;
  border: 1px solid var(--rule-2);
  background: radial-gradient(circle, var(--carbon-3) 0%, var(--ink) 100%);
  position: relative;
}
.hl::after {
  content: ''; position: absolute; inset: 3px; border-radius: 50%;
  background: var(--carbon-3);
  transition: background .25s;
}
.hl.on::after {
  background: var(--red);
  box-shadow: 0 0 12px var(--red), 0 0 24px var(--red);
}

/* ═══════════════════════════════════════════════════════════════
   SECTION BASE
   ═══════════════════════════════════════════════════════════════ */
.sec {
  position: relative;
  max-width: var(--max);
  margin: 0 auto;
  padding: 120px var(--pad);
}
.sec-head {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 40px;
  align-items: end;
  margin-bottom: 64px;
}
.sec-mark {
  display: flex; flex-direction: column;
  gap: 8px;
  min-width: 0; max-width: 100%;
}
.sec-mark-label { overflow-wrap: anywhere; }
.sec-mark-num {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .3em;
  color: var(--yel);
}
.sec-mark-label {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--txt-mute);
  border-top: 1px solid var(--yel);
  padding-top: 8px;
}
.sec-mark-light .sec-mark-num,
.sec-mark-light .sec-mark-label {
  color: var(--ink);
}
.sec-mark-light .sec-mark-label {
  border-top-color: var(--ink);
  color: rgba(5,5,5,.6);
}
.sec-title {
  font-family: var(--f-display);
  font-size: clamp(32px, 8.5vw, 96px);
  line-height: .92;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fff;
  font-weight: 400;
  overflow-wrap: break-word;
  hyphens: auto;
}
.sec-head > * { min-width: 0; }
.sec-title-light { color: var(--ink); }
.sec-sub {
  grid-column: 2;
  font-size: 17px;
  color: var(--txt-mute);
  max-width: 540px;
  margin-top: 20px;
}
.sec-sub-light { color: rgba(5,5,5,.7); }

/* ═══════════════════════════════════════════════════════════════
   BOX-STOPPS (Leistungen)
   ═══════════════════════════════════════════════════════════════ */
.sec-leistungen {
  position: relative;
}
/* Titel "Ein Sachverständiger." ist sehr lang. Engeres Tracking, damit das Wort
   nicht mitten umbricht. */
.sec-leistungen .sec-title { letter-spacing: -.045em; }
/* Ab Tablet/Desktop Marker-Spalte schmaler (1fr 4fr) → Titel bekommt Breite für eine
   Zeile, Marker-Trennlinie bleibt sichtbar. NICHT auf Mobile: dort greift der globale
   1fr-Stack der .sec-head (Marker oben, Titel volle Breite). Sonst quetscht das Grid
   Marker ("LEISTU/NGEN") und Titel ("…SACHVERSTÄNDIGE/R.") auf dem Handy. */
@media (min-width: 721px) {
  .sec-leistungen .sec-head { grid-template-columns: 1fr 4fr; }
}
.stops {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--yel);
  border: 1px solid var(--yel);
  position: relative;
}
.stop {
  position: relative;
  background-color: var(--carbon);
  padding: 32px 28px 28px;
  display: flex; flex-direction: column;
  min-height: 360px;
  transition: background-color .25s ease;
  isolation: isolate;
  overflow: hidden;
}
.stop:hover,
.stop:focus-within {
  background-color: var(--carbon-3);
}
.stop:active {
  background-color: var(--yel-deep);
}
.stop::after {
  content: '';
  position: absolute; inset: auto 0 0 0;
  height: 0; background: var(--yel);
  transition: height .25s ease;
}
.stop:hover::after { height: 4px; }

.stop-num {
  font-family: var(--f-mono);
  font-size: 12px; letter-spacing: .2em;
  color: var(--yel);
  display: flex; align-items: baseline; gap: 6px;
  margin-bottom: 14px;
}
.stop-num span { color: var(--txt-mute); font-size: 10px; }
.stop-num {
  font-family: var(--f-display);
  font-size: clamp(22px, 5vw, 28px); letter-spacing: 0; color: #fff;
}
.stop-num span { color: var(--yel); font-size: 12px; font-family: var(--f-mono); letter-spacing: .2em; }

.stop-body h3 {
  font-family: var(--f-display);
  font-size: clamp(22px, 5vw, 30px);
  line-height: 1;
  color: #fff;
  letter-spacing: -.01em;
  text-transform: uppercase;
  margin-bottom: 14px;
  font-weight: 400;
  /* Top-Bereich jetzt frei (Icon ist nach unten-rechts gewandert) */
}
.stop-body p {
  color: #c8c8c8;
  font-size: 15px;
  margin-bottom: 16px;
}
.stop-body ul {
  list-style: none;
  padding: 0; margin: 0 0 24px;
  display: flex; flex-direction: column;
  gap: 8px;
  flex: 1;
}
.stop-body ul li {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .08em;
  color: #b8b8b8;
  padding-left: 18px;
  position: relative;
}
.stop-body ul li::before {
  content: '▸';
  position: absolute; left: 0; top: 0;
  color: var(--yel);
  font-size: 11px;
}

.stop-icon {
  position: absolute;
  bottom: 22px; right: 22px;
  width: 68px; height: 68px;
  color: var(--yel);
  opacity: .22;
  transition: opacity .3s ease, transform .3s ease, color .3s ease;
  z-index: 2;
  pointer-events: none;  /* Cursor klickt immer auf die Karte */
}
.stop:hover .stop-icon {
  opacity: .85;
  transform: scale(1.06) rotate(-4deg);
}

.stop-time {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .22em;
  color: var(--ink);
  background: var(--yel);
  padding: 6px 10px;
  align-self: flex-start;
  margin-top: auto;
  position: relative;
  z-index: 3;  /* immer vor dem Icon-Watermark */
}

.stop-hot {
  background-image:
    linear-gradient(180deg, rgba(38,14,14,.7) 0%, rgba(38,14,14,.94) 70%, rgba(20,5,5,.98) 100%),
    var(--stop-bg, none);
}
.stop-hot:hover {
  background-image:
    linear-gradient(180deg, rgba(38,14,14,.42) 0%, rgba(38,14,14,.88) 70%, rgba(20,5,5,.96) 100%),
    var(--stop-bg, none);
}
.stop-hot .stop-icon { color: var(--red); opacity: .35; }
.stop-hot::after { background: var(--red); }
.stop-hot .stop-time { background: var(--red); color: #fff; }

/* ═══════════════════════════════════════════════════════════════
   SEQUENZ (Light section)
   ═══════════════════════════════════════════════════════════════ */
.sec-sequenz {
  background: var(--paper);
  max-width: none;
  padding: 120px var(--pad);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
.sec-sequenz::before {
  content: ''; position: absolute;
  top: 0; left: 0; right: 0; height: 8px;
  background: var(--hazard-thin);
}
.sec-sequenz::after {
  content: ''; position: absolute;
  bottom: 0; left: 0; right: 0; height: 8px;
  background: var(--hazard-thin);
}
.sec-sequenz .sec-head { max-width: var(--max); margin-left: auto; margin-right: auto; }
.sec-sequenz .sec-title { color: var(--ink); }

.sequenz {
  list-style: none;
  max-width: var(--max);
  margin: 0 auto;
  display: flex; flex-direction: column;
  border: 2px solid var(--ink);
  background: #fff;
}
.sequenz li {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 32px;
  padding: 28px 28px;
  border-bottom: 1px solid rgba(5,5,5,.12);
  align-items: center;
  position: relative;
  transition: background .2s ease;
}
.sequenz li:last-child { border-bottom: 0; }
.sequenz li:hover { background: var(--paper-2); }

.sq-num {
  display: flex; flex-direction: column;
  align-items: flex-start;
  padding-right: 24px;
  border-right: 1px solid rgba(5,5,5,.18);
  position: relative;
}
.sq-num-tag {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .3em; color: rgba(5,5,5,.6);
  margin-bottom: 4px;
}
.sq-num strong {
  font-family: var(--f-display);
  font-size: clamp(40px, 11vw, 64px); line-height: .9;
  color: var(--ink);
  letter-spacing: -.02em;
  position: relative;
}
.sq-num strong::after {
  content: ''; position: absolute;
  bottom: 8px; left: 105%; width: 18px; height: 4px;
  background: var(--yel);
}

.sq-body h3 {
  font-family: var(--f-display);
  font-size: clamp(21px, 5vw, 28px);
  line-height: 1; letter-spacing: -.005em;
  text-transform: uppercase;
  font-weight: 400;
  color: var(--ink);
  margin-bottom: 8px;
}
.sq-body p { color: rgba(5,5,5,.75); font-size: 15px; max-width: 560px; }

.sq-time {
  display: flex; flex-direction: column;
  align-items: flex-end;
  font-family: var(--f-mono);
  border-left: 1px solid rgba(5,5,5,.18);
  padding-left: 24px;
  min-width: 140px;
}
.sq-time span { font-size: 10px; letter-spacing: .3em; color: rgba(5,5,5,.6); }
.sq-time strong {
  font-family: var(--f-display);
  font-size: clamp(18px, 4.5vw, 24px);
  color: var(--ink);
  letter-spacing: -.01em;
  background: var(--yel);
  padding: 4px 10px;
  margin-top: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   STRECKE (Track map)
   ═══════════════════════════════════════════════════════════════ */
.strecke-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: center;
}

.track {
  position: relative;
  background: var(--carbon-2);
  border: 1px solid var(--yel);
}
.track-head {
  display: flex; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule-2);
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--yel);
}
.track-meta { color: var(--txt-mute); }
.track-svg {
  width: 100%; height: auto;
  display: block;
  background: var(--ink);
}

.track-legend {
  display: flex; flex-direction: column;
  gap: 22px;
  font-family: var(--f-mono);
}
.legend-head {
  display: flex; justify-content: space-between;
  border-bottom: 1px solid var(--yel);
  padding-bottom: 10px;
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
}
.legend-num { color: var(--yel); }
.legend-title { color: #fff; }

.legend-hq {
  border: 1px solid var(--yel);
  padding: 14px 16px;
  background: linear-gradient(180deg, rgba(245,211,0,.06), transparent);
}
.legend-hq-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.legend-hq-pin { color: var(--yel); font-size: 18px; line-height: 1; }
.legend-hq-row strong {
  font-family: var(--f-display);
  font-size: clamp(22px, 5vw, 28px);
  color: #fff;
  letter-spacing: -.005em;
}
.legend-hq-tag {
  font-size: 9px; letter-spacing: .3em;
  color: var(--yel);
  margin-left: auto;
  border: 1px solid var(--yel);
  padding: 2px 6px;
}
.legend-hq small {
  font-family: var(--f-body);
  color: var(--txt-mute);
  font-size: 13px;
  line-height: 1.5;
}

.legend-region {
  padding-top: 10px;
}
.legend-region-tag {
  display: block;
  font-size: 10px; letter-spacing: .3em;
  color: var(--yel);
  margin-bottom: 12px;
}
.legend-region ol {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 18px;
  counter-reset: city;
}
.legend-region ol li {
  font-size: 13px;
  letter-spacing: .04em;
  color: #ddd;
  padding: 4px 0;
  border-bottom: 1px dashed var(--rule-2);
  counter-increment: city;
  position: relative;
  padding-left: 28px;
}
.legend-region ol li::before {
  content: counter(city, decimal-leading-zero);
  position: absolute; left: 0; top: 4px;
  color: var(--yel);
  font-size: 11px;
  letter-spacing: .14em;
}

.legend-note {
  font-family: var(--f-body);
  font-size: 13px;
  color: var(--txt-mute);
  line-height: 1.6;
  border-top: 1px dashed var(--rule-2);
  padding-top: 14px;
}

/* ═══════════════════════════════════════════════════════════════
   CREW (light + dark hybrid)
   ═══════════════════════════════════════════════════════════════ */
.sec-crew {
  background: var(--paper);
  max-width: none;
  color: var(--ink);
  padding: 120px var(--pad);
  position: relative;
  overflow: hidden;
}
.sec-crew::before,
.sec-crew::after {
  content: ''; position: absolute;
  left: 0; right: 0; height: 8px;
  background: var(--hazard-thin);
}
.sec-crew::before { top: 0; }
.sec-crew::after { bottom: 0; }

.crew-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 64px;
  align-items: start;
}

.crew-left .sec-title { color: var(--ink); }
.crew-lead {
  margin-top: 28px;
  font-size: 19px;
  line-height: 1.55;
  color: var(--ink);
  font-weight: 500;
  border-left: 4px solid var(--yel);
  padding-left: 16px;
}
.crew-left p:not(.crew-lead) {
  margin-top: 16px;
  font-size: 16px;
  color: rgba(5,5,5,.78);
  max-width: 540px;
}

.crew-pillars {
  margin-top: 38px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
}
.crew-pillars > div {
  background: #fff;
  padding: 18px 16px 18px;
  display: flex; flex-direction: column;
  gap: 4px;
}
.pillar-num {
  font-family: var(--f-mono); font-size: 10px;
  letter-spacing: .3em;
  color: var(--yel-deep);
  font-weight: 700;
}
.crew-pillars strong {
  font-family: var(--f-display);
  font-size: clamp(22px, 5vw, 28px);
  color: var(--ink);
  text-transform: uppercase;
  letter-spacing: -.005em;
}
.crew-pillars small {
  font-size: 13px;
  color: rgba(5,5,5,.7);
  line-height: 1.5;
}

/* ── Racing License Card ── */
.crew-right {
  display: flex; flex-direction: column;
  gap: 22px;
}
.card-race {
  background: var(--ink);
  color: #fff;
  border: 2px solid var(--ink);
  box-shadow: 10px 10px 0 var(--yel);
  font-family: var(--f-mono);
  position: relative;
  isolation: isolate;
}
.card-race-head {
  display: flex; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--rule-2);
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
}
.card-race-tag { color: var(--yel); }
.card-race-id { color: #fff; }

.card-race-body {
  display: grid;
  grid-template-columns: 130px 1fr;
  gap: 22px;
  padding: 22px;
  align-items: stretch;
}
.card-race-portrait {
  position: relative;
  border: 1px solid var(--yel);
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: #0a0a0a;
}
.card-race-portrait img,
.card-race-portrait svg {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: grayscale(.35) contrast(1.08) brightness(.95);
}
.card-race-portrait::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(180deg, transparent 40%, rgba(5,5,5,.55) 100%);
  pointer-events: none;
}
.card-race-portrait-stripes {
  position: absolute; left: 0; right: 0; bottom: 0; height: 8px;
  background: var(--hazard-thin);
  z-index: 2;
}

.card-race-data {
  display: flex; flex-direction: column;
  gap: 0;
  font-family: var(--f-mono);
}
.card-race-data > div {
  display: flex; justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px dashed var(--rule-2);
  font-size: 12px;
  letter-spacing: .04em;
}
.card-race-data dt { color: var(--yel); letter-spacing: .22em; font-size: 10px; align-self: center; }
.card-race-data dd { color: #fff; text-align: right; }

.card-race-foot {
  position: relative;
  padding: 12px 18px 14px;
  border-top: 1px solid var(--rule-2);
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--yel);
  text-align: right;
}
.card-race-stripes {
  position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: var(--hazard-thin);
}

/* Mini stats */
.card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ink);
  border: 1px solid var(--ink);
}
.card-stats > div {
  background: #fff;
  padding: 18px 14px 14px;
}
.card-stats strong {
  font-family: var(--f-display);
  font-size: clamp(30px, 7vw, 42px);
  color: var(--ink);
  line-height: 1;
  letter-spacing: -.02em;
  display: block;
}
.card-stats strong em {
  font-style: normal;
  font-size: 16px;
  color: var(--yel-deep);
  margin-left: 2px;
}
.card-stats span {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .2em;
  color: rgba(5,5,5,.7);
  text-transform: uppercase;
  display: block;
  margin-top: 8px;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════
   KONTAKT (Box-Funk)
   ═══════════════════════════════════════════════════════════════ */
.sec-kontakt {
  background: var(--ink);
  max-width: none;
  padding: 120px var(--pad);
  position: relative;
}
.kontakt-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.kontakt-left .sec-title { color: #fff; }
.kontakt-accent {
  display: inline-block;
  background: var(--red);
  color: #fff;
  padding: 0 .12em;
  transform: rotate(-1deg);
}
.kontakt-lead {
  margin-top: 24px;
  font-size: 17px;
  color: #d6d6d6;
  max-width: 500px;
}
.kontakt-rail {
  margin-top: 36px;
  background: var(--hazard);
  padding: 16px 0;
  overflow: hidden;
  position: relative;
}
.kontakt-rail span {
  display: block;
  background: var(--ink);
  color: var(--yel);
  font-family: var(--f-mono);
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  font-weight: 700;
  text-align: center;
  padding: 6px 14px;
  margin: 0 14px;
}

.kontakt-right {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--yel);
  border: 1px solid var(--yel);
}
.kbox {
  background: var(--carbon);
  padding: 22px 22px 20px;
  display: flex; flex-direction: column;
  gap: 6px;
  transition: background .2s, color .2s;
  position: relative;
  overflow: hidden;
  color: #fff;
}
.kbox:hover { background: var(--carbon-2); }
.kbox-row {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--yel);
}
.kbox-row svg { width: 22px; height: 22px; color: var(--yel); }
.kbox-row span:not(.kbox-arrow) { flex: 1; }
.kbox-arrow {
  font-size: 18px;
  color: var(--yel);
  transition: transform .2s;
}
.kbox:hover .kbox-arrow { transform: translateX(4px); }
.kbox strong {
  font-family: var(--f-display);
  font-size: clamp(19px, 4.5vw, 24px);
  color: #fff;
  letter-spacing: 0;
  line-height: 1.1;
  margin-top: 4px;
}
.kbox small {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--txt-mute);
  line-height: 1.5;
}

.kbox-hero {
  grid-column: 1 / -1;
  background: var(--yel);
  color: var(--ink);
  padding: 28px;
  position: relative;
}
.kbox-hero:hover { background: #f5d300; transform: translateY(-1px); }
.kbox-hero .kbox-row,
.kbox-hero .kbox-row svg,
.kbox-hero .kbox-arrow { color: var(--ink); }
.kbox-hero strong { color: var(--ink); font-size: clamp(28px, 6.5vw, 38px); }
.kbox-hero small { color: rgba(5,5,5,.7); }
.kbox-stripes {
  position: absolute; left: 0; right: 0; top: 0; height: 5px;
  background: var(--hazard-thin);
}

/* BoxMaps */
.boxes {
  max-width: var(--max);
  margin: 64px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.boxmap {
  background: var(--carbon-2);
  border: 1px solid var(--yel);
  overflow: hidden;
}
.boxmap-head {
  display: flex; justify-content: space-between;
  padding: 12px 16px;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  border-bottom: 1px solid var(--rule-2);
  background: var(--ink);
}
.boxmap-num { color: var(--yel); }
.boxmap-loc { color: #fff; }
.boxmap iframe {
  width: 100%; height: 280px;
  border: 0;
  filter: grayscale(.7) invert(.92) hue-rotate(180deg);
}
.boxmap-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px;
  background: var(--carbon);
  border-top: 1px solid var(--rule-2);
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--yel);
}
.boxmap-foot strong { color: #fff; font-weight: 700; }
.boxmap-foot:hover { background: var(--carbon-2); }
.boxmap-foot:hover strong { color: var(--yel); }

/* ═══════════════════════════════════════════════════════════════
   FOOTER (Pit-Board)
   ═══════════════════════════════════════════════════════════════ */
.foot {
  background: #020202;
  border-top: 1px solid var(--yel);
  color: #ccc;
  font-family: var(--f-mono);
  position: relative;
}
.foot-top {
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px var(--pad) 28px;
  display: grid;
  grid-template-columns: 1.2fr 2fr;
  gap: 56px;
}
.foot-brand .brand-name { font-family: var(--f-body); font-weight: 700; font-size: clamp(24px, 6vw, 30px); color: #fff; letter-spacing: -.025em; }
.foot-brand .brand-fix  { color: var(--yel); }
.foot-brand .brand-pipe { color: var(--yel); }
.foot-brand .brand-meta { font-size: 10px; color: var(--txt-mute); letter-spacing: .26em; margin-top: 6px; display: block; }
.foot-logo { height: 62px; width: auto; margin-bottom: 4px; }
.foot-cols {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 28px;
  font-size: 13px;
  line-height: 1.7;
}
.foot-cols a:hover { color: var(--yel); }
.foot-h {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--yel);
  margin-bottom: 8px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--rule-2);
  text-transform: uppercase;
}

/* IT-Recht block */
.itrk-block {
  max-width: var(--max);
  margin: 0 auto;
  padding: 22px var(--pad);
  border-top: 1px solid var(--rule-2);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}
.itrk-block-logo {
  display: inline-flex; align-items: center; justify-content: center;
  width: 80px; height: 80px;
  background: #fff;
  color: var(--ink);
}
.itrk-placeholder {
  font-family: var(--f-mono); font-size: 9px;
  letter-spacing: .14em; text-align: center;
  padding: 4px; color: var(--ink);
}
.itrk-block-tag {
  display: inline-block;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--yel);
  border: 1px solid var(--yel);
  padding: 2px 8px;
  margin-bottom: 6px;
}
.itrk-block-title {
  display: block;
  font-family: var(--f-display);
  font-size: 18px;
  color: #fff;
  letter-spacing: -.005em;
  margin-bottom: 4px;
}
.itrk-block-sub { font-size: 11px; color: var(--txt-mute); letter-spacing: .12em; }
.itrk-block-stand {
  text-align: right;
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--txt-mute);
}
.itrk-block-stand strong {
  display: block; font-size: 16px; color: var(--yel);
  letter-spacing: .04em; margin-top: 4px;
}

/* Hazard rail */
.foot-rail {
  overflow: hidden;
  background: var(--ink);
  border-top: 1px solid var(--yel);
  border-bottom: 1px solid var(--yel);
}
.foot-rail span {
  display: block;
  background: var(--yel);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .26em;
  font-weight: 700;
  text-transform: uppercase;
  padding: 8px 0;
  white-space: nowrap;
  animation: ticker 50s linear infinite;
}

.foot-bottom {
  max-width: var(--max);
  margin: 0 auto;
  padding: 20px var(--pad);
  display: flex; justify-content: space-between; align-items: center;
  font-size: 11px; letter-spacing: .14em;
  color: var(--txt-mute);
  border-top: 1px solid var(--rule);
}
.foot-akte { color: var(--yel); }

.foot-credit {
  border-top: 1px solid var(--rule);
  padding: 22px var(--pad);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  flex-wrap: wrap;
}
.foot-pexels {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .26em;
  text-transform: uppercase;
  color: var(--txt-dim);
}
.foot-pexels a { color: var(--txt-mute); border-bottom: 1px dotted currentColor; }
.foot-pexels a:hover { color: var(--yel); }
/* ── addus. Signatur · Gold ──────────────────────── */
.credit-link {
  display: inline-flex; align-items: baseline; gap: 9px;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .26em; text-transform: uppercase;
  color: var(--txt-dim);
  transition: color .3s ease;
}
.credit-link:hover { color: var(--txt-mute); }
.credit-prefix { opacity: .85; }
.credit-brand {
  font-family: var(--f-display);
  font-size: 19px;
  letter-spacing: .05em;
  background: linear-gradient(100deg, #f9e9a8 0%, #e6c258 38%, #b8860b 70%, #f3d978 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  transition: filter .3s ease;
}
.credit-link:hover .credit-brand { filter: drop-shadow(0 0 10px rgba(230,194,88,.5)); }
.credit-dot {
  -webkit-text-fill-color: #f5d300; color: #f5d300;
  text-shadow: 0 0 10px rgba(245,211,0,.6);
}

/* ═══════════════════════════════════════════════════════════════
   FLOATING WHATSAPP
   ═══════════════════════════════════════════════════════════════ */
.wa {
  position: fixed;
  /* Safe-area-aware Positionierung — schützt vor iOS Home-Bar,
     Android Navigation-Pill, mobilen Browser-UI-Overlays */
  bottom: max(24px, calc(env(safe-area-inset-bottom, 0px) + 20px));
  right:  max(24px, calc(env(safe-area-inset-right,  0px) + 20px));
  width: 60px; height: 60px;
  background: var(--grn);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
  box-shadow: 0 12px 30px rgba(0,0,0,.5), 4px 4px 0 var(--ink);
  z-index: 95;
  transition: transform .2s ease;
}
@media (max-width: 720px) {
  /* Mehr Abstand zum Bildschirm-Rand auf Mobile, weil Browser-UI
     (Address-Bar, Nav-Pill, Tab-Switcher) hier oft rumlungert */
  .wa {
    bottom: max(72px, calc(env(safe-area-inset-bottom, 0px) + 64px));
    right:  max(16px, calc(env(safe-area-inset-right,  0px) + 14px));
    width: 56px; height: 56px;
  }
  .wa svg { width: 26px; height: 26px; }
}
.wa:hover { transform: scale(1.08); }
.wa svg { width: 30px; height: 30px; }
.wa-pulse {
  position: absolute; inset: 0;
  border: 2px solid var(--grn);
  animation: wapulse 2s ease-out infinite;
  pointer-events: none;
}
@keyframes wapulse {
  0% { transform: scale(1); opacity: 1; }
  100% { transform: scale(1.7); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   LEGAL PAGES (impressum/datenschutz)
   ═══════════════════════════════════════════════════════════════ */
.legal {
  max-width: 860px;
  margin: 0 auto;
  padding: 80px var(--pad) 120px;
  font-family: var(--f-body);
  color: #e5e5e5;
  line-height: 1.7;
}
.legal h1 {
  font-family: var(--f-display);
  font-size: clamp(34px, 7vw, 64px);
  text-transform: uppercase;
  color: #fff;
  letter-spacing: -.01em;
  margin-bottom: 12px;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.legal h2 {
  font-family: var(--f-display);
  font-size: clamp(22px, 5vw, 28px);
  text-transform: uppercase;
  color: var(--yel);
  letter-spacing: -.005em;
  margin: 40px 0 12px;
  hyphens: auto;
  -webkit-hyphens: auto;
  overflow-wrap: break-word;
}
.legal h3 {
  font-family: var(--f-mono);
  font-size: 13px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--yel);
  margin: 28px 0 8px;
}
.legal p, .legal li { font-size: 15px; color: #d2d2d2; margin-bottom: 12px; }
.legal a { color: var(--yel); text-decoration: underline; text-underline-offset: 3px; }
.legal-tag {
  display: inline-block;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--yel);
  border: 1px solid var(--yel);
  padding: 4px 10px;
  margin-bottom: 14px;
}
.legal-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono);
  font-size: 12px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--yel);
  margin-top: 40px;
}

/* Form-Box (Button) in der Kontakt-Kachel — füllt die freie Zelle, öffnet das Formular */
.kbox-form {
  font: inherit;
  text-align: left;
  border: 0;
  width: 100%;
  cursor: pointer;
  -webkit-appearance: none; appearance: none;
}
.kbox-form strong { color: var(--yel); }

/* ─── Kontaktformular (Sektion auf index + eigene Seite) ─── */
.kontakt-form-wrap.kform-hidden { display: none; }
.kontakt-form-wrap {
  max-width: var(--max);
  margin: 56px auto 0;
  padding-top: 48px;
  border-top: 1px solid var(--rule);
}
.kontakt-form-head, .kontakt-form-wrap .kform { max-width: 880px; }
.kontakt-form-head { margin-bottom: 8px; }
.kontakt-form-title {
  font-family: var(--f-display);
  font-size: clamp(28px, 4vw, 44px);
  text-transform: uppercase;
  color: #fff;
  line-height: 1;
  letter-spacing: -.01em;
  margin: 14px 0 10px;
}
.kontakt-form-sub {
  font-family: var(--f-body);
  font-size: 15px; color: #d2d2d2; line-height: 1.6;
  max-width: 56ch;
}
.kontakt-form-sub strong { color: var(--yel); }

.kform { margin: 28px 0 8px; display: flex; flex-direction: column; gap: 22px; }
.kform-hp { position: absolute; left: -9999px; }
.kform-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.kform-field { display: flex; flex-direction: column; gap: 8px; }
.kform-label {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .22em; text-transform: uppercase;
  color: var(--txt-mute);
}
.kform-label em { color: var(--yel); font-style: normal; }
.kform-opt { color: #6b6b6b; letter-spacing: .12em; }
.kform input,
.kform select,
.kform textarea {
  font-family: var(--f-body);
  font-size: 15px;
  color: #fff;
  background: var(--carbon);
  border: 1px solid var(--rule);
  padding: 14px 16px;
  width: 100%;
  transition: border-color .2s ease, background-color .2s ease;
}
.kform textarea { resize: vertical; min-height: 120px; }
.kform input::placeholder,
.kform textarea::placeholder { color: #6b6b6b; }
.kform input:focus,
.kform select:focus,
.kform textarea:focus {
  outline: none;
  border-color: var(--yel);
  background: var(--carbon-3);
}
.kform-consent {
  display: flex; align-items: flex-start; gap: 12px;
  font-family: var(--f-body);
  font-size: 13px; line-height: 1.5; color: #d2d2d2;
}
.kform-consent input { width: 18px; height: 18px; margin-top: 2px; flex: 0 0 auto; accent-color: var(--yel); }
.kform-consent a { color: var(--yel); }
.kform-consent em { color: var(--yel); font-style: normal; }
.kform-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 4px;
}
.kform-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  font-family: var(--f-display);
  font-size: 20px; letter-spacing: .02em; text-transform: uppercase;
  border: 0;
  padding: 18px 26px;
  cursor: pointer;
  transition: background-color .2s ease, transform .1s ease, box-shadow .2s ease;
}
.kform-btn svg { width: 22px; height: 22px; flex: 0 0 auto; }
.kform-btn:active { transform: translateY(1px); }
.kform-btn-wa {
  color: var(--ink);
  background: var(--grn);
}
.kform-btn-wa:hover { background: #2fe675; box-shadow: 0 8px 24px rgba(37,211,102,.25); }
.kform-btn-mail {
  color: var(--ink);
  background: var(--yel);
}
.kform-btn-mail:hover { background: #fff; box-shadow: 0 8px 24px rgba(245,211,0,.22); }

/* ─── Scroll-nach-oben-Button ─── */
.totop {
  position: fixed;
  left: 20px; bottom: 20px;
  z-index: 60;
  width: 50px; height: 50px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--carbon);
  color: var(--yel);
  border: 1px solid var(--yel);
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease, color .2s ease;
}
.totop svg { width: 22px; height: 22px; }
.totop:hover { background: var(--yel); color: var(--ink); }
.totop.is-visible { opacity: 1; visibility: visible; transform: none; }
@media (max-width: 720px) {
  /* über der mobilen Schnellkontakt-Leiste halten */
  .totop { bottom: 88px; width: 46px; height: 46px; }
}
.kform-hint { font-family: var(--f-mono); font-size: 11px; color: var(--txt-mute); letter-spacing: .04em; margin: 0; line-height: 1.6; }

/* ─── E-Mail-Fallback (Desktop ohne Standard-Mail-Programm) · dunkles Theme ─── */
.kform-fallback {
  margin-top: 16px;
  border: 1px solid var(--rule-2);
  border-left: 3px solid var(--yel);
  background: rgba(245,211,0,.06);
  padding: 16px 18px;
}
.kform-fallback-title {
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .08em;
  text-transform: uppercase; color: #fff; font-weight: 700; margin: 0 0 12px;
}
.kform-fallback-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.kform-fb-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--f-mono); font-size: 12px; letter-spacing: .06em;
  padding: 9px 14px; border: 1px solid var(--rule-2); color: #ededed;
  background: rgba(255,255,255,.04); text-decoration: none; cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.kform-fb-btn:hover { border-color: var(--yel); color: var(--yel); background: rgba(245,211,0,.08); }
.kform-fb-note { font-family: var(--f-mono); font-size: 11px; color: var(--txt-mute); letter-spacing: .04em; margin: 12px 0 0; }
.kform-fb-note strong { color: var(--yel); }

@media (max-width: 640px) {
  .kform-row { grid-template-columns: 1fr; }
  .kform-actions { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════ */
/* Desktop-Nav nur zeigen, wenn alle 5 Punkte einzeilig passen — sonst Burger.
   (Breite Brand-Logo + CTA lassen die Leiste sonst erst ab ~1410px reichen.) */
@media (max-width: 1300px) {
  .nav { display: none; }
  .burger { display: inline-flex; align-items: center; justify-content: center; }
  .head-inner { grid-template-columns: 1fr auto auto; gap: 14px; }
}
@media (max-width: 1080px) {
  .hero-grid { grid-template-columns: 1fr; gap: 36px; }
  .hero-startnum-big { font-size: clamp(96px, 22vw, 180px); }
  .hero-startnum { opacity: .35; }
  .strecke-grid { grid-template-columns: 1fr; }
  .crew-grid { grid-template-columns: 1fr; }
  .stops { grid-template-columns: repeat(2, 1fr); }
  .kontakt-grid { grid-template-columns: 1fr; gap: 36px; }
}
@media (max-width: 720px) {
  body { font-size: 15px; }
  .head-cta { display: none; }
  .ticker { font-size: 10px; }
  .sec { padding: 80px var(--pad); }
  .sec-sequenz, .sec-crew, .sec-kontakt { padding: 80px var(--pad); }
  .sec-head { grid-template-columns: 1fr; gap: 18px; margin-bottom: 40px; }
  .sec-sub { grid-column: 1; max-width: none; }
  .hero-inner { padding: 56px var(--pad) 32px; }
  /* Headline auf dem Handy groß & dominant (wie Desktop) — SCHADENSFALL füllt die Breite */
  .hero-title { font-size: clamp(40px, 14vw, 90px); }
  .hero-cut { font-size: clamp(22px, 5vw, 34px); transform: translateY(-.3em); }
  .hero-actions .cta { width: 100%; justify-content: center; }
  .hero-tele { grid-template-columns: 1fr; gap: 16px; }
  .hero-tele > div { padding: 16px 0; border-left: 0; border-top: 1px dashed var(--rule); }
  .hero-tele > div:first-child { border-top: 0; padding-top: 0; }
  .stops { grid-template-columns: 1fr; }
  .sequenz li { grid-template-columns: 1fr; gap: 12px; padding: 22px; }
  .sq-num { padding-right: 0; border-right: 0; flex-direction: row; align-items: baseline; gap: 12px; }
  .sq-num strong::after { display: none; }
  .sq-time { align-items: flex-start; padding-left: 0; border-left: 0; border-top: 1px dashed rgba(5,5,5,.2); padding-top: 10px; min-width: 0; flex-direction: row; gap: 10px; align-items: baseline; }
  .crew-pillars { grid-template-columns: 1fr; }
  .card-race-body { grid-template-columns: 1fr; }
  .card-race-portrait { max-width: 160px; }
  .card-stats { grid-template-columns: 1fr; }
  .kontakt-right { grid-template-columns: 1fr; }
  .boxes { grid-template-columns: 1fr; }
  .foot-top { grid-template-columns: 1fr; gap: 36px; }
  .foot-cols { grid-template-columns: 1fr 1fr; gap: 22px; }
  .foot-bottom { flex-direction: column; gap: 10px; text-align: center; }
  .itrk-block { grid-template-columns: 1fr; text-align: center; }
  .itrk-block-logo, .itrk-block-stand { margin: 0 auto; }
  .itrk-block-stand { text-align: center; }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY
   ═══════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

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

/* ═══════════════════════════════════════════════════════════════
   WELDING SPARKS — bloom + arc-rays + flying particles
   Sitzt ungefähr da wo der Schweißer im Hero-Backdrop steht
   ═══════════════════════════════════════════════════════════════ */
.hero-sparks {
  position: absolute;
  /* EXAKT am Schweißer-Lichtbogen im Foto (1600×1067 cover-skaliert).
     Sweet-Spot des blauen Schweiß-Lichtpunkts: (40%, 55%) — konstant
     über alle Desktop/Tablet-Viewports. */
  left: 40%;
  top: 55%;
  width: 0; height: 0;
  z-index: 3;             /* ÜBER hero-inner (z=2). mix-blend-mode: screen
                             addiert nur Licht — Headline bleibt lesbar,
                             Funken brennen drüber wie echter Lichtbogen. */
  pointer-events: none;
  mix-blend-mode: screen;
}

/* Tablet — hero-grid collapse, Foto-Anschnitt verschiebt sich minimal */
@media (max-width: 1080px) {
  .hero-sparks { left: 40%; top: 52%; }
}
/* Kleine Tablets */
@media (max-width: 900px) {
  .hero-sparks { left: 38%; top: 50%; }
}

/* Hauptbloom — flackert wie ein Lichtbogen */
.spark-glow {
  position: absolute;
  left: -95px; top: -95px;
  width: 190px; height: 190px;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255,255,255,1) 0%,
    rgba(255,220,140,.9) 12%,
    rgba(255,150,40,.55) 30%,
    rgba(255,80,20,.25) 55%,
    transparent 78%
  );
  filter: blur(8px);
  animation: weld-flicker .14s steps(3) infinite;
}
@keyframes weld-flicker {
  0%   { opacity: .55; transform: scale(.92); }
  20%  { opacity: 1.0; transform: scale(1.15); }
  40%  { opacity: .30; transform: scale(.85); }
  60%  { opacity: .95; transform: scale(1.08); }
  80%  { opacity: .50; transform: scale(.94); }
  100% { opacity: .70; transform: scale(1.00); }
}

/* Arc-Strahlen (Stern-Pattern) */
.spark-rays {
  position: absolute;
  left: 0; top: 0;
  width: 0; height: 0;
}
.spark-rays span {
  position: absolute;
  left: -1.5px; top: -110px;
  width: 3px; height: 110px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255,230,170,.4) 35%,
    rgba(255,255,220,.9) 80%,
    rgba(255,255,255,1) 100%);
  transform-origin: bottom center;
  filter: blur(.6px);
}
.spark-rays span:nth-child(1) { transform: rotate(0deg);   animation: ray-flick .22s steps(2) infinite 0s; }
.spark-rays span:nth-child(2) { transform: rotate(45deg);  animation: ray-flick .19s steps(2) infinite .05s; }
.spark-rays span:nth-child(3) { transform: rotate(90deg);  animation: ray-flick .25s steps(2) infinite .10s; }
.spark-rays span:nth-child(4) { transform: rotate(135deg); animation: ray-flick .17s steps(2) infinite .15s; }
.spark-rays span:nth-child(5) { transform: rotate(180deg); animation: ray-flick .21s steps(2) infinite .20s; }
.spark-rays span:nth-child(6) { transform: rotate(225deg); animation: ray-flick .23s steps(2) infinite .25s; }
.spark-rays span:nth-child(7) { transform: rotate(270deg); animation: ray-flick .20s steps(2) infinite .30s; }
.spark-rays span:nth-child(8) { transform: rotate(315deg); animation: ray-flick .18s steps(2) infinite .35s; }
@keyframes ray-flick {
  0%, 100% { opacity: .10; }
  50%      { opacity: .90; }
}

/* Funken-Partikel die nach außen fliegen */
.spark {
  position: absolute;
  left: -2px; top: -2px;
  width: 4px; height: 4px;
  background: #fff5d0;
  border-radius: 50%;
  box-shadow:
    0 0 6px #ffcc66,
    0 0 14px #ff8833,
    0 0 22px rgba(255,80,20,.4);
  animation-name: spark-fly;
  animation-timing-function: cubic-bezier(.2,.5,.3,1);
  animation-iteration-count: infinite;
}
/* CSS-Variablen pro Funken für Richtung + Geschwindigkeit */
.s1  { --dx:-110px; --dy:-140px; animation-duration:1.1s; animation-delay:0.00s; }
.s2  { --dx:  70px; --dy:-160px; animation-duration:1.4s; animation-delay:0.15s; }
.s3  { --dx:-140px; --dy: -90px; animation-duration:1.3s; animation-delay:0.30s; }
.s4  { --dx: 110px; --dy:-120px; animation-duration:1.0s; animation-delay:0.45s; }
.s5  { --dx: -60px; --dy:-180px; animation-duration:1.5s; animation-delay:0.60s; }
.s6  { --dx: 140px; --dy: -90px; animation-duration:1.2s; animation-delay:0.75s; }
.s7  { --dx:-160px; --dy:-100px; animation-duration:1.6s; animation-delay:0.90s; }
.s8  { --dx:  50px; --dy:-190px; animation-duration:1.3s; animation-delay:1.05s; }
.s9  { --dx: -90px; --dy:-150px; animation-duration:1.4s; animation-delay:0.20s; }
.s10 { --dx: 130px; --dy:-140px; animation-duration:1.1s; animation-delay:0.40s; }
.s11 { --dx: -40px; --dy:-180px; animation-duration:1.5s; animation-delay:0.55s; }
.s12 { --dx:  80px; --dy:-130px; animation-duration:1.3s; animation-delay:0.70s; }
.s13 { --dx:-120px; --dy:-110px; animation-duration:1.4s; animation-delay:0.85s; }
.s14 { --dx:  60px; --dy:-170px; animation-duration:1.2s; animation-delay:1.00s; }
.s15 { --dx:-140px; --dy: -70px; animation-duration:1.3s; animation-delay:0.35s; }
.s16 { --dx:  20px; --dy:-200px; animation-duration:1.7s; animation-delay:0.10s; }
.s17 { --dx: -30px; --dy:-160px; animation-duration:1.6s; animation-delay:0.50s; }
.s18 { --dx: 100px; --dy: -60px; animation-duration:1.0s; animation-delay:0.80s; }

@keyframes spark-fly {
  0%   { transform: translate(0,0) scale(1.2); opacity: 1; }
  35%  { opacity: 1; }
  80%  { opacity: .45; }
  100% { transform: translate(var(--dx,80px), var(--dy,-120px)) scale(.15); opacity: 0; }
}

/* Mobile — Sparks bleiben sichtbar, aber kleiner skaliert,
   leicht andere Position (Nº24 ist relativ größer auf schmaler Anzeige)
   und reduzierte Partikel-Anzahl für Akku-Schonung */
@media (max-width: 720px) {
  .hero-sparks {
    left: 72%; top: 11%;
    transform: scale(.55);
    transform-origin: center center;
  }
  /* Nur die ersten 6 Funken animieren — Rest aus */
  .hero-sparks .s7,  .hero-sparks .s8,  .hero-sparks .s9,
  .hero-sparks .s10, .hero-sparks .s11, .hero-sparks .s12,
  .hero-sparks .s13, .hero-sparks .s14, .hero-sparks .s15,
  .hero-sparks .s16, .hero-sparks .s17, .hero-sparks .s18 {
    display: none;
  }
}
/* Sehr schmale Geräte (320er) — noch kleiner */
@media (max-width: 380px) {
  .hero-sparks { transform: scale(.42); left: 70%; top: 9%; }
}
/* Respektiere Bewegungs-Präferenz */
@media (prefers-reduced-motion: reduce) {
  .hero-sparks { display: none; }
}

/* ═══════════════════════════════════════════════════════════════
   CRASH LOGO — Animated 2-Car Collision
   ═══════════════════════════════════════════════════════════════ */
.crashlogo {
  display: block;
  width: 100%; height: 100%;
  overflow: hidden;
  color: #fff;
}
.crashlogo .cl-car,
.crashlogo .cl-flash {
  transform-box: view-box;
  transform-origin: 0 0;
}
.crashlogo .cl-car-a {
  animation: cl-a 5.2s cubic-bezier(.55,.08,.6,1) infinite;
}
.crashlogo .cl-car-b {
  animation: cl-b 5.2s cubic-bezier(.55,.08,.6,1) infinite;
}
.crashlogo .cl-flash {
  opacity: 0;
  transform-origin: 115px 47px;
  animation: cl-flash 5.2s ease-out infinite;
}

/*
  Impact-Punkt = (118, 47). Car-Body width 64 (front at +32 from center).
  Endposition Car A (rot -15°): center = (87, 55) so front lands at impact.
  Endposition Car B (rot 165°): center = (149, 39) so front lands at impact.
*/
@keyframes cl-a {
  0%   { transform: translate(-60px, 30px) rotate(-15deg); }
  28%  { transform: translate(87px, 55px)  rotate(-15deg); }
  31%  { transform: translate(82px, 57px)  rotate(-23deg); }   /* recoil */
  34%  { transform: translate(86px, 55px)  rotate(-13deg); }
  37%  { transform: translate(87px, 55px)  rotate(-15deg); }
  82%  { transform: translate(87px, 55px)  rotate(-15deg); opacity: 1; }
  93%  { transform: translate(87px, 55px)  rotate(-15deg); opacity: 0; }
  94%  { transform: translate(-60px, 30px) rotate(-15deg); opacity: 0; }
  100% { transform: translate(-60px, 30px) rotate(-15deg); opacity: 1; }
}

@keyframes cl-b {
  0%   { transform: translate(300px, 60px) rotate(165deg); }
  28%  { transform: translate(149px, 39px) rotate(165deg); }
  31%  { transform: translate(154px, 37px) rotate(173deg); }   /* recoil */
  34%  { transform: translate(150px, 39px) rotate(163deg); }
  37%  { transform: translate(149px, 39px) rotate(165deg); }
  82%  { transform: translate(149px, 39px) rotate(165deg); opacity: 1; }
  93%  { transform: translate(149px, 39px) rotate(165deg); opacity: 0; }
  94%  { transform: translate(300px, 60px) rotate(165deg); opacity: 0; }
  100% { transform: translate(300px, 60px) rotate(165deg); opacity: 1; }
}

@keyframes cl-flash {
  0%, 27% { opacity: 0; transform: scale(0.2) rotate(0deg); }
  29%     { opacity: 1; transform: scale(1.25) rotate(8deg); }
  33%     { opacity: .9; transform: scale(0.9) rotate(-4deg); }
  42%     { opacity: 0; transform: scale(0.4) rotate(0deg); }
  100%    { opacity: 0; transform: scale(0.2) rotate(0deg); }
}

/* Small (header) variant — color inherits from container */
.crashlogo-sm { color: #fff; }
.brand:hover .crashlogo-sm { color: var(--yel); }

/* ═══════════════════════════════════════════════════════════════
   INCIDENT BAND — Brand Crash Moment
   ═══════════════════════════════════════════════════════════════ */
.incident {
  position: relative;
  background: var(--ink);
  border-top: 1px solid var(--yel);
  border-bottom: 1px solid var(--yel);
  overflow: hidden;
  isolation: isolate;
}
/* Faint Logo-Watermark deaktiviert — Logo wird jetzt als crisp .incident-logo-img gezeigt */
.incident-stripes { display: none; }
@keyframes incident-bg-breathe {
  0%, 100% { opacity: 0.30; }
  50%      { opacity: 0.42; }
}
.incident::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: var(--hazard-thin);
  z-index: 2;
}
.incident::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 6px;
  background: var(--hazard-thin);
  z-index: 2;
}

.incident-inner {
  position: relative;
  z-index: 1;
  max-width: var(--max);
  margin: 0 auto;
  padding: 56px var(--pad);
}

.incident-top {
  display: flex; align-items: center;
  gap: 28px;
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .3em; text-transform: uppercase;
  color: var(--yel);
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule-2);
  margin-bottom: 18px;
}
.incident-tag {
  display: inline-flex; align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border: 1px solid var(--red);
  color: var(--red);
}
.incident-tag::before {
  content: ''; width: 7px; height: 7px; background: var(--red);
  display: inline-block;
  animation: pulse 1.4s ease-out infinite;
}
.incident-time {
  background: var(--ink);
  border: 1px solid var(--yel);
  padding: 4px 10px;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.incident-loc {
  color: var(--txt-mute);
  margin-left: auto;
}

.incident-stage {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  padding: 72px 0 64px;
  min-height: 0;
}
@media (max-width: 900px) {
  .incident-stage { padding: 56px 0 48px; }
}
@media (max-width: 720px) {
  .incident-stage { padding: 44px 0 40px; }
}
/* SchadenFix-Logo weiß (transparentes Asset, Kunden-Wunsch "Logo in weiß") */
.incident-logo-img {
  display: block;
  width: min(520px, 80%);
  height: auto;
  margin: 0 auto 4px;
}
.crashlogo-lg {
  width: min(680px, 90%);
  height: auto;
  aspect-ratio: 240 / 90;
}
.incident-word {
  text-align: center;
  margin-top: -8px;
}
.incident-mark {
  font-family: var(--f-body);
  font-weight: 700;
  font-size: clamp(64px, 11vw, 168px);
  line-height: .9;
  letter-spacing: -.045em;
  color: #fff;
  display: inline-block;
  text-rendering: optimizeLegibility;
}
.incident-mark-fix {
  color: var(--yel);
  display: inline-block;
  position: relative;
}
.incident-mark-fix::after {
  content: '';
  position: absolute;
  left: -2%; right: -2%; bottom: 8%;
  height: 3px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left;
  animation: incident-underscore 5.2s ease-out infinite;
}
@keyframes incident-underscore {
  0%, 27% { transform: scaleX(0); }
  30%     { transform: scaleX(1); }
  85%     { transform: scaleX(1); }
  92%     { transform: scaleX(0); }
  100%    { transform: scaleX(0); }
}
.incident-sub {
  font-family: var(--f-mono);
  font-size: clamp(11px, 1.1vw, 14px);
  letter-spacing: .32em; text-transform: uppercase;
  color: var(--yel);
  font-weight: 700;
  display: inline-flex; flex-wrap: wrap;
  align-items: center; justify-content: center;
  gap: 10px;
  padding: 10px 20px;
  border: 1px solid rgba(245,211,0,.45);
  background: rgba(5,5,5,.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  margin-top: 6px;
}
.incident-sub .sub-dot   { color: var(--red); font-weight: 700; }
.incident-sub .sub-bracket { color: rgba(245,211,0,.55); letter-spacing: .04em; }

.incident-claim {
  margin-top: 20px;
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(22px, 2.6vw, 36px);
  line-height: 1;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 2px 24px rgba(0,0,0,.7);
}
.incident-claim strong {
  color: #fff;
  font-weight: 400;
  position: relative;
}

.incident-foot {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule-2);
  border: 1px solid var(--rule-2);
  margin-top: 20px;
}
.incident-stat {
  background: var(--ink);
  padding: 14px 18px;
  display: flex; flex-direction: column;
  gap: 4px;
}
.incident-stat span {
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .3em;
  color: var(--txt-mute);
}
.incident-stat strong {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 14px; letter-spacing: .1em;
  color: var(--yel);
}
.incident-stat:first-child strong { color: var(--grn); }

@media (max-width: 720px) {
  .incident-top { flex-wrap: wrap; gap: 10px; font-size: 9px; }
  .incident-loc { margin-left: 0; width: 100%; }
  .incident-foot { grid-template-columns: 1fr 1fr; }
  .brand-logo { height: 58px; }
  .brand-name { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════════
   POLISH — visibility + drama improvements
   ═══════════════════════════════════════════════════════════════ */

/* Larger, more visible Start-Lights */
.hero-lights { gap: 6px; }
.hl { width: 28px; height: 28px; }

/* Subtle pulse on the hero startnumber outline */
.hero-startnum-big {
  animation: startnum-pulse 6s ease-in-out infinite;
}
@keyframes startnum-pulse {
  0%, 100% { -webkit-text-stroke-color: rgba(245,211,0,.22); }
  50%      { -webkit-text-stroke-color: rgba(245,211,0,.42); }
}

/* Stronger hover on box-stopps — diagonal damage line */
.stop {
  position: relative;
}
.stop::before {
  content: '';
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(
    -45deg,
    transparent 0 30px,
    rgba(245,211,0,.07) 30px 31px,
    transparent 31px 60px
  );
  opacity: 0;
  transition: opacity .3s ease;
  pointer-events: none;
  z-index: 0;
}
.stop:hover::before { opacity: 1; }
.stop > * { position: relative; z-index: 1; }

/* Slight scale on incident-mark hover (interactive feel) */
.incident-word:hover .incident-mark-fix {
  transform: translateX(2px);
  transition: transform .2s;
}

/* ═══════════════════════════════════════════════════════════════
   TRUST STRIP — scrolling marquee of partner/certifications
   ═══════════════════════════════════════════════════════════════ */
.trust {
  position: relative;
  background: var(--paper);
  color: var(--ink);
  overflow: hidden;
  border-top: 1px solid var(--ink);
  border-bottom: 1px solid var(--ink);
}
.trust-rail {
  height: 5px;
  background: var(--hazard-thin);
}
.trust-inner {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 14px var(--pad);
  max-width: var(--max);
  margin: 0 auto;
}
.trust-tag {
  font-family: var(--f-mono);
  font-size: 11px; letter-spacing: .3em;
  color: var(--ink);
  background: var(--yel);
  padding: 6px 12px;
  text-transform: uppercase;
  white-space: nowrap;
}
.trust-marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.trust-track {
  display: inline-flex; gap: 28px; align-items: center;
  white-space: nowrap;
  animation: trust-scroll 38s linear infinite;
}
.trust-item {
  display: inline-flex; flex-direction: column;
  line-height: 1.1;
  font-family: var(--f-mono);
}
.trust-item strong {
  font-family: var(--f-display);
  font-size: 22px;
  color: var(--ink);
  letter-spacing: -.005em;
  text-transform: uppercase;
}
.trust-item span {
  font-size: 9px; letter-spacing: .26em;
  color: rgba(5,5,5,.6);
  text-transform: uppercase;
  margin-top: 3px;
}
.trust-sep {
  font-family: var(--f-display);
  font-size: clamp(20px, 5vw, 28px);
  color: var(--yel-deep);
  opacity: .5;
}
@keyframes trust-scroll {
  to { transform: translateX(-50%); }
}
@media (max-width: 720px) {
  .trust-inner { grid-template-columns: 1fr; gap: 12px; }
  .trust-tag { text-align: center; }
  .trust-item strong { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════════
   STIMMEN AUS DER BOX — Testimonials
   ═══════════════════════════════════════════════════════════════ */
.sec-voices {
  position: relative;
}

.voices-rating {
  display: flex; align-items: center;
  gap: 24px;
  padding: 18px 22px;
  margin-bottom: 40px;
  background: linear-gradient(90deg, rgba(245,211,0,.08), transparent);
  border: 1px solid var(--yel);
  border-left-width: 4px;
}
.vr-score {
  font-family: var(--f-display);
  display: flex; align-items: baseline;
  gap: 4px;
  color: #fff;
}
.vr-score strong {
  font-size: clamp(38px, 9vw, 56px);
  line-height: 1;
  color: var(--yel);
  letter-spacing: -.02em;
}
.vr-score span {
  font-size: 18px;
  color: var(--txt-mute);
}
.vr-stars {
  font-size: clamp(18px, 4.5vw, 24px);
  letter-spacing: .1em;
  color: var(--yel);
  text-shadow: 0 0 12px rgba(245,211,0,.4);
}
.vr-meta {
  display: flex; flex-direction: column; gap: 4px;
  margin-left: auto;
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .22em;
  color: var(--txt-mute);
  text-transform: uppercase;
  text-align: right;
}

.voices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--yel);
  border: 1px solid var(--yel);
}
.voice {
  background: var(--carbon);
  padding: 28px 24px 24px;
  display: flex; flex-direction: column;
  gap: 16px;
  position: relative;
  transition: background .25s;
  margin: 0;
}
.voice:hover { background: var(--carbon-2); }
.voice-head {
  display: flex; justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--rule-2);
}
.voice-num {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .26em;
  color: var(--yel);
}
.voice-stars {
  color: var(--yel);
  font-size: 16px;
  letter-spacing: .08em;
  text-shadow: 0 0 8px rgba(245,211,0,.3);
}
.voice-quote {
  font-family: var(--f-body);
  font-size: 16px;
  line-height: 1.55;
  color: #e8e8e8;
  font-style: italic;
  margin: 0;
  position: relative;
  padding-left: 18px;
}
.voice-quote::before {
  content: '"';
  position: absolute; left: -4px; top: -16px;
  font-family: var(--f-display);
  font-size: clamp(40px, 9vw, 56px);
  color: var(--yel);
  opacity: .35;
  line-height: 1;
}
.voice-meta {
  display: flex; flex-direction: column; gap: 3px;
  padding-top: 14px;
  border-top: 1px solid var(--rule);
  margin-top: auto;
}
.voice-meta strong {
  font-family: var(--f-display);
  font-size: 20px;
  color: #fff;
  letter-spacing: -.005em;
}
.voice-meta span {
  font-family: var(--f-mono);
  font-size: 11px;
  letter-spacing: .12em;
  color: var(--txt-mute);
}
.voice-when {
  color: var(--yel-deep) !important;
}

.voice-hot {
  background: linear-gradient(180deg, var(--carbon), #1a0a0a);
  border-left: 2px solid var(--red);
}
.voice-hot .voice-num { color: var(--red); }

@media (max-width: 1080px) {
  .voices-grid { grid-template-columns: 1fr 1fr; }
  .voices-rating { flex-wrap: wrap; gap: 14px; }
  .vr-meta { margin-left: 0; text-align: left; }
}
@media (max-width: 720px) {
  .voices-grid { grid-template-columns: 1fr; }
  .vr-score strong { font-size: 42px; }
}

/* ═══════════════════════════════════════════════════════════════
   FAQ · HÄUFIGE FRAGEN
   ═══════════════════════════════════════════════════════════════ */
.sec-faq {
  background: var(--paper);
  max-width: none;
  padding: 120px var(--pad);
  color: var(--ink);
  position: relative;
  overflow: hidden;
}
.sec-faq::before,
.sec-faq::after {
  content: ''; position: absolute;
  left: 0; right: 0; height: 6px;
  background: var(--hazard-thin);
}
.sec-faq::before { top: 0; }
.sec-faq::after { bottom: 0; }
.sec-faq .sec-head { max-width: var(--max); margin-left: auto; margin-right: auto; }
.sec-faq .sec-title { color: var(--ink); }

.faq-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--ink);
  border: 2px solid var(--ink);
}

.faq {
  background: #fff;
  position: relative;
  overflow: hidden;
}
.faq[open] {
  background: var(--paper-2);
}
.faq summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 16px;
  align-items: center;
  user-select: none;
  transition: background .15s;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::marker { content: ''; }
.faq summary:hover { background: var(--paper-2); }
.faq[open] summary { border-bottom: 1px solid rgba(5,5,5,.15); }
.faq-q-num {
  font-family: var(--f-mono);
  font-size: 10px;
  letter-spacing: .3em;
  color: var(--yel-deep);
  font-weight: 700;
  background: var(--ink);
  color: var(--yel);
  padding: 4px 8px;
}
.faq-q-text {
  font-family: var(--f-display);
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -.005em;
  text-transform: uppercase;
  color: var(--ink);
  font-weight: 400;
}
.faq-q-arrow {
  font-family: var(--f-mono);
  font-size: clamp(22px, 5vw, 28px);
  color: var(--ink);
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--yel);
  transition: transform .25s ease;
  line-height: 1;
}
.faq[open] .faq-q-arrow {
  transform: rotate(45deg);
}
.faq-a {
  padding: 4px 24px 24px;
  font-family: var(--f-body);
  font-size: 15px;
  line-height: 1.6;
  color: rgba(5,5,5,.78);
}
.faq-a strong { color: var(--ink); }
.faq-a ul, .faq-a ol {
  margin: 10px 0 10px 22px;
  padding: 0;
  display: flex; flex-direction: column;
  gap: 6px;
}
.faq-a li::marker { color: var(--yel-deep); }
.faq-a p + p { margin-top: 10px; }

.faq-foot {
  max-width: var(--max);
  margin: 40px auto 0;
  display: flex; flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}
.faq-foot p {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .26em;
  color: rgba(5,5,5,.7);
  text-transform: uppercase;
}
.faq-cta {
  display: inline-flex; align-items: center;
  gap: 12px;
  padding: 18px 28px;
  background: var(--ink);
  color: var(--yel);
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .18em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  transition: transform .15s, box-shadow .2s;
  box-shadow: 5px 5px 0 var(--yel);
}
.faq-cta:hover {
  transform: translate(-2px,-2px);
  box-shadow: 7px 7px 0 var(--yel);
}
.faq-cta-num { white-space: nowrap; }
.faq-cta-icon {
  color: var(--red);
  animation: pulse 1.4s ease-out infinite;
}

@media (max-width: 720px) {
  .faq-grid { grid-template-columns: 1fr; }
  .faq-q-text { font-size: 18px; }
}

/* ═══════════════════════════════════════════════════════════════
   COOKIE CONSENT BANNER
   ═══════════════════════════════════════════════════════════════ */
.cc {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 110;
  background: rgba(5,5,5,.96);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid var(--yel);
  color: #fff;
  transform: translateY(110%);
  transition: transform .35s cubic-bezier(.5,0,.3,1);
}
.cc.is-visible { transform: translateY(0); }
.cc[hidden] { display: none; }
.cc-stripes {
  height: 4px;
  background: var(--hazard-thin);
}
.cc-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
  padding: 18px var(--pad);
  max-width: var(--max);
  margin: 0 auto;
}
.cc-text strong {
  display: block;
  font-family: var(--f-mono);
  font-size: 10px; letter-spacing: .3em;
  color: var(--yel);
  margin-bottom: 6px;
}
.cc-text p {
  font-size: 13px;
  line-height: 1.5;
  color: #ddd;
}
.cc-text a {
  color: var(--yel);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cc-actions {
  display: flex; gap: 10px;
  flex-shrink: 0;
}
.cc-btn {
  font-family: var(--f-mono);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 12px 18px;
  white-space: nowrap;
  border: 2px solid var(--yel);
  transition: transform .15s, background .15s, color .15s;
  cursor: pointer;
}
.cc-btn-ok {
  background: var(--yel);
  color: var(--ink);
}
.cc-btn-ok:hover { transform: translateY(-1px); }
.cc-btn-info {
  background: transparent;
  color: var(--yel);
  text-decoration: none;
}
.cc-btn-info:hover { background: rgba(245,211,0,.08); }

@media (max-width: 720px) {
  .cc-inner { grid-template-columns: 1fr; gap: 14px; padding: 16px var(--pad); }
  .cc-actions { width: 100%; }
  .cc-btn { flex: 1; text-align: center; }
  /* Sekundär-/Rechtslinks: bequeme Tap-Fläche (>=40px) */
  .foot-cols a, .foot-pexels a, .credit-link { display: inline-block; padding: 8px 0; }
  .faq-cta { width: 100%; justify-content: center; flex-wrap: wrap; text-align: center; line-height: 1.35; letter-spacing: .12em; }
}
/* Cookie-Buttons stapeln, sobald sie nebeneinander nicht mehr passen */
@media (max-width: 480px) {
  .cc-actions { flex-direction: column; }
  .cc-btn { width: 100%; flex: none; }
}

/* ═══════════════════════════════════════════════════════════════
   STICKY MOBILE CTA BAR
   ═══════════════════════════════════════════════════════════════ */
.mcta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  z-index: 92;
  display: none;  /* nur auf Mobile sichtbar */
  background: var(--ink);
  border-top: 1px solid var(--yel);
  padding: 10px max(10px, env(safe-area-inset-right, 10px))
           max(10px, env(safe-area-inset-bottom, 10px))
           max(10px, env(safe-area-inset-left, 10px));
  gap: 8px;
  transform: translateY(0);
  transition: transform .3s cubic-bezier(.5,0,.3,1);
}
.mcta.is-hidden { transform: translateY(110%); }

.mcta-btn {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  font-family: var(--f-mono);
  font-weight: 700;
  text-transform: uppercase;
  transition: transform .15s, background .15s;
}
.mcta-btn:active { transform: scale(.97); }
.mcta-btn svg { width: 22px; height: 22px; flex-shrink: 0; }
.mcta-label { display: flex; flex-direction: column; line-height: 1; gap: 3px; }
.mcta-label strong { font-size: 13px; letter-spacing: .12em; }
.mcta-label small { font-size: 9px; letter-spacing: .2em; opacity: .8; }

.mcta-call {
  background: var(--yel);
  color: var(--ink);
  border: 2px solid var(--yel);
}
.mcta-wa {
  background: var(--grn);
  color: #fff;
  border: 2px solid var(--grn);
}

@media (max-width: 720px) {
  .mcta { display: flex; }
  /* WhatsApp Floating dann nicht doppelt — Floating ausblenden */
  .wa { display: none; }
  /* Page-Bottom padding für mcta-bar */
  body { padding-bottom: 76px; }
  /* Wenn Cookie-Banner aktiv ist → mcta zeitweise weg (sonst überlappt) */
  body.cc-active .mcta { display: none; }
  body.cc-active { padding-bottom: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   ACCESSIBILITY · Skip-Link + Drawer Body-Lock
   ═══════════════════════════════════════════════════════════════ */
.skip-link {
  position: absolute;
  top: -100px; left: 8px;
  z-index: 9999;
  padding: 12px 18px;
  background: var(--yel);
  color: var(--ink);
  font-family: var(--f-mono);
  font-size: 13px; font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  border: 2px solid var(--ink);
  transition: top .15s ease;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 8px;
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

body.drawer-open {
  overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════
   PRINT STYLES
   ═══════════════════════════════════════════════════════════════ */
@media print {
  *, *::before, *::after {
    background: #fff !important;
    color: #000 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    animation: none !important;
    transition: none !important;
  }
  .grain, .scanline, .ticker, .head, .drawer, .hero-sparks, .hero-grid-bg,
  .hero-stripes, .hero-startnum, .pitboard, .wa, .mcta, .cc, .foot-rail,
  .incident-stripes, .trust, .crashlogo {
    display: none !important;
  }
  body { font-size: 12pt; }
  .sec, section { padding: 20px 0 !important; page-break-inside: avoid; }
  .stop, .voice, .faq, .sequenz li, .boxmap { page-break-inside: avoid; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555 !important; }
  a[href^="tel"]::after, a[href^="mailto"]::after { content: ""; }
  .hero-title, .sec-title { font-size: 24pt !important; line-height: 1.1 !important; }
  .stop, .voice { border: 1px solid #888 !important; padding: 12px !important; }
  iframe { display: none; }
}