/* ---------- Schriften (lokal, keine Verbindung zu Google) ----------
   Quelle: Fontsource 5.3 (SIL Open Font License). */
@font-face{ font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/inter-latin-ext-400-normal.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: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url(fonts/inter-latin-400-normal.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: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/inter-latin-ext-600-normal.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: 'Inter'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/inter-latin-600-normal.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: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/inter-latin-ext-700-normal.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: 'Inter'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/inter-latin-700-normal.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: 'Saira Condensed'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/saira-condensed-latin-ext-600-normal.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: 'Saira Condensed'; font-style: normal; font-weight: 600; font-display: swap;
  src: url(fonts/saira-condensed-latin-600-normal.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: 'Saira Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/saira-condensed-latin-ext-700-normal.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: 'Saira Condensed'; font-style: normal; font-weight: 700; font-display: swap;
  src: url(fonts/saira-condensed-latin-700-normal.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: 'Saira Condensed'; font-style: normal; font-weight: 900; font-display: swap;
  src: url(fonts/saira-condensed-latin-ext-900-normal.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: 'Saira Condensed'; font-style: normal; font-weight: 900; font-display: swap;
  src: url(fonts/saira-condensed-latin-900-normal.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; }

/* =============================================================
   Hertrampf Racing — Design System
   Tokens 1:1 aus den Figma-Variablen (File ThpgwE5bEnNinP3QajKnCq)
   Mobile-first. Breakpoints ausschliesslich via min-width.
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* Farben */
  --c-primary:        #e30613;
  --c-primary-dark:   #b30510;
  --c-primary-soft:   rgba(227, 6, 19, .15);
  /* Aufgehelltes Rot NUR fuer Schrift auf dunklem Grund: #e30613 erreicht
     bei kleiner Schrift nur 3,6–4,3:1, noetig sind 4,5:1 (WCAG AA).
     Flaechen, Buttons und grosse Headlines bleiben im Markenrot. */
  --c-primary-text:   #ff3b47;
  --c-bg:             #0b0b0c;
  --c-bg-alt:         #141416;
  --c-surface:        #000000;
  --c-surface-alt:    #1a1a1c;
  --c-field:          #212124;
  --c-border:         rgba(255, 255, 255, .1);
  --c-border-strong:  rgba(255, 255, 255, .2);
  --c-text:           #ffffff;
  --c-text-dim:       #b4b4bc;
  --c-text-muted:     rgba(255, 255, 255, .5);
  --c-success:        #2fbf71;

  /* Schrift */
  --font-display: 'Saira Condensed', 'Arial Narrow', sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  /* Typo-Skala (Figma Font/Headings/*) */
  --fs-display: 64px; --lh-display: 67px;
  --fs-h1: 54px;      --lh-h1: 56px;
  --fs-h2: 36px;      --lh-h2: 40px;
  --fs-h3: 27px;      --lh-h3: 31px;
  --fs-h4: 21px;      --lh-h4: 25px;
  --fs-h5: 17px;      --lh-h5: 21px;
  --fs-h6: 14px;      --lh-h6: 18px;
  --fs-body-md: 16px; --lh-body-md: 27px;
  --fs-body-s: 14px;  --lh-body-s: 26px;
  --fs-label: 13px;

  /* Layout */
  --gutter: 204px;          /* Figma-Seitenrand bei 1728px */
  --gutter-mobile: 20px;
  --maxw: 1728px;
  --maxw-form: 1096px;      /* Figma: 1728 − 2 × 316 */
  --radius: 8px;
  --radius-sm: 2px;
  --radius-field: 4px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{ animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

body{
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--font-body);
  font-size: var(--fs-body-md);
  line-height: var(--lh-body-md);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6{ margin: 0; font-family: var(--font-display); font-weight: 700; }
p{ margin: 0; }
a{ color: inherit; text-decoration: none; }
img{ max-width: 100%; display: block; }
ul{ list-style: none; margin: 0; padding: 0; }
button{ font: inherit; color: inherit; }

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

.visually-hidden{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link{
  position: absolute; left: 16px; top: -100px; z-index: 100;
  background: var(--c-primary); color: #fff; padding: 12px 20px; border-radius: var(--radius-sm);
  transition: top .2s;
}
.skip-link:focus{ top: 16px; }

/* ---------- 3. Layout-Primitives ---------- */
.container{
  width: 100%; max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter-mobile);
}
@media (min-width: 640px){ .container{ padding-inline: 32px; } }
@media (min-width: 1280px){ .container{ padding-inline: 96px; } }
@media (min-width: 1600px){ .container{ padding-inline: var(--gutter); } }

.section{ padding-block: 56px; }
@media (min-width: 1024px){ .section{ padding-block: 96px; } }
.section--alt{ background: var(--c-bg-alt); }

.section__head{ margin-bottom: 32px; }
@media (min-width: 1024px){ .section__head{ margin-bottom: 44px; } }

.section__title{
  font-size: clamp(28px, 5vw, var(--fs-h2));
  line-height: 1.12;
  text-transform: uppercase;
  margin-top: 8px;
}

.section__lead{
  color: var(--c-text-dim);
  margin-top: 12px;
  max-width: 56ch;
}

.eyebrow{
  display: inline-flex; align-items: center; gap: 16px;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h6); line-height: var(--lh-h6);
  letter-spacing: .8px; text-transform: uppercase;
  color: var(--c-primary-text);
}
.eyebrow::before{ content: ""; width: 48px; height: 2px; background: var(--c-primary); flex-shrink: 0; }

/* ---------- 4. Buttons ---------- */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 48px; padding: 12px 24px;
  border: none; border-radius: var(--radius-sm);
  font-family: var(--font-body); font-weight: 700; font-size: var(--fs-body-md);
  line-height: 1.2; cursor: pointer; text-align: center; white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s;
}
.btn--primary{ background: var(--c-primary); color: #fff; }
.btn--primary:hover{ background: var(--c-primary-dark); }
.btn--outline{ background: transparent; border: 1px solid #fff; color: #fff; }
.btn--outline:hover{ border-color: var(--c-primary); color: var(--c-primary); }
.btn--block{ width: 100%; }
.btn__icon{ width: 20px; height: 20px; flex-shrink: 0; }
.btn[disabled]{ opacity: .5; cursor: not-allowed; }

/* ---------- 5. Header ---------- */
.site-header{
  position: sticky; top: 0; z-index: 50;
  background: rgba(11, 11, 12, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--c-border);
}
.site-header__bar{
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; padding-block: 14px;
}
@media (min-width: 1024px){ .site-header__bar{ padding-block: 20px; } }

.brand-logo{ height: 36px; width: auto; }
@media (min-width: 1024px){ .brand-logo{ height: 48px; } }

.site-nav{
  display: none; gap: 40px;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h5); letter-spacing: .7px;
}
@media (min-width: 1100px){ .site-nav{ display: flex; } }
.site-nav a{ transition: color .2s; }
.site-nav a:hover{ color: var(--c-primary-text); }

.header-actions{ display: flex; align-items: center; gap: 16px; }
@media (min-width: 1024px){ .header-actions{ gap: 24px; } }

/* CTA erst ab 640px im Header — darunter liegt sie im Mobile-Menue */
.header-actions .btn{ display: none; }
@media (min-width: 640px){ .header-actions .btn{ display: inline-flex; } }

.header-phone{
  display: none; align-items: center; gap: 8px; white-space: nowrap;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h5);
}
@media (min-width: 1400px){ .header-phone{ display: flex; } }
.header-phone svg, .header-phone img{ width: 24px; height: 24px; fill: currentColor; stroke: none; }

.nav-toggle{
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  background: none; border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm);
  cursor: pointer;
}
@media (min-width: 1100px){ .nav-toggle{ display: none; } }
.nav-toggle svg{ width: 22px; height: 22px; stroke: currentColor; fill: none; }

.mobile-nav{
  display: none; flex-direction: column;
  border-top: 1px solid var(--c-border);
  padding: 8px var(--gutter-mobile) 20px;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h5);
}
@media (min-width: 640px){ .mobile-nav{ padding-inline: 32px; } }
.mobile-nav.is-open{ display: flex; }
@media (min-width: 1100px){ .mobile-nav{ display: none !important; } }
.mobile-nav a{ padding: 14px 0; border-bottom: 1px solid var(--c-border); }
.mobile-nav .btn{ margin-top: 16px; border-bottom: none; }
@media (min-width: 640px){ .mobile-nav .btn{ display: none; } }

/* ---------- 6. Hero ---------- */
.hero{ position: relative; padding-top: 40px; }
@media (min-width: 1024px){ .hero{ padding-top: 64px; } }
.hero::before{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(circle at 85% 10%, rgba(227, 6, 19, .16), transparent 55%);
}
.hero__grid{ position: relative; display: grid; gap: 40px; align-items: center; }
@media (min-width: 1024px){ .hero__grid{ grid-template-columns: 1fr 1fr; gap: 32px; } }

.hero__title{
  font-size: clamp(38px, 6.5vw, var(--fs-display));
  line-height: .98; text-transform: uppercase;
  margin-top: 24px;
}
.hero__title .accent{ color: var(--c-primary); display: block; }
.hero__desc{
  color: var(--c-text-dim); font-weight: 600;
  max-width: 46ch; margin-top: 24px;
}
.hero__ctas{ display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }

.hero__media{ border-radius: var(--radius); overflow: hidden; aspect-ratio: 648 / 432; }
.hero__media img{ width: 100%; height: 100%; object-fit: cover; }

.dealer-strip{ margin-top: 40px; padding-block: 24px 40px; }

/* Endlos laufender Markenstreifen. Der Track enthaelt den Inhalt zweimal,
   die Animation verschiebt um 50 % — daher springt nichts. */
.marquee{
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee__track{
  display: flex; width: max-content; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
/* Animation erst, wenn app.js die Logos geprueft und verdoppelt hat. */
.marquee.is-ready .marquee__track{ animation: marquee-scroll var(--marquee-duration, 36s) linear infinite; }
.marquee:hover .marquee__track,
.marquee:focus-within .marquee__track{ animation-play-state: paused; }
/* Logos stehen auf hellen Kacheln: Herstellerlogos sind fuer hellen
   Grund gemacht (farbige Badges, schwarze Wortmarken). Einheitliche
   Kacheln halten alle lesbar und ergeben ein ruhiges Raster, egal
   welche Proportionen ein Logo hat. */
/* Die Kachel ist das <li>, der Filter wirkt nur auf das Logo darin.
   Abstand ueber margin statt gap, damit die 50-%-Verschiebung der
   Endlos-Animation exakt aufgeht. */
.marquee__item{
  flex-shrink: 0; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  width: 124px; height: 56px; padding: 10px 16px; margin-right: 12px;
  background: #f4f4f5; border-radius: var(--radius);
  transition: transform .25s ease, box-shadow .25s ease;
}
@media (min-width: 640px){ .marquee__item{ width: 168px; height: 76px; padding: 14px 22px; margin-right: 16px; } }
.marquee__item:hover{ transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0, 0, 0, .45); }
.marquee__item img{ display: block; width: 100%; height: 100%; object-fit: contain; }
/* Liegt ein Logo nur als weisse Datei vor: data-logo="invert" am <li>
   faerbt es dunkel. Besser langfristig: die Standard-Datei des Herstellers. */
.marquee__item[data-logo="invert"] img{ filter: brightness(0); opacity: .88; }

@keyframes marquee-scroll{
  from{ transform: translate3d(0, 0, 0); }
  to  { transform: translate3d(-50%, 0, 0); }
}
@media (prefers-reduced-motion: reduce){
  .marquee__track{ animation: none; }
}

/* ---------- 7. Gruende-Slider ---------- */
.reasons__head{
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
/* margin-left:auto haelt die Pfeile rechts — auch wenn sie mobil
   auf eine eigene Zeile umbrechen. */
.reasons-nav{ display: flex; gap: 10px; margin-left: auto; }
.reasons-nav button{
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid var(--c-border-strong); background: transparent;
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: border-color .2s, color .2s, opacity .2s;
}
.reasons-nav button svg{ width: 20px; height: 20px; stroke: currentColor; fill: none; }
.reasons-nav button:hover:not(:disabled){ border-color: var(--c-primary); color: var(--c-primary); }
.reasons-nav button:disabled{ opacity: .3; cursor: default; }

/* Der Track bricht bewusst aus dem Container aus, damit die Karten am
   Viewport-Rand ausfransen. --track-pad haelt Aussenabstand, Innenabstand
   und scroll-padding synchron — ohne scroll-padding wuerde scroll-snap den
   Innenabstand wegscrollen und die erste Karte am Rand kleben. */
.reasons-track{
  --track-pad: var(--gutter-mobile);
  display: flex; gap: 24px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none;
  margin-inline: calc(var(--track-pad) * -1);
  padding-inline: var(--track-pad);
  scroll-padding-inline: var(--track-pad);
  padding-bottom: 4px;
}
@media (min-width: 640px){  .reasons-track{ --track-pad: 32px; } }
@media (min-width: 1280px){ .reasons-track{ --track-pad: 96px; } }
@media (min-width: 1600px){ .reasons-track{ --track-pad: var(--gutter); } }
.reasons-track::-webkit-scrollbar{ display: none; }

.reason-card{
  scroll-snap-align: start; flex: 0 0 min(300px, 80vw);
  background: var(--c-surface); border-radius: var(--radius);
  padding: 24px; min-height: 260px;
  display: flex; flex-direction: column; justify-content: space-between;
}
@media (min-width: 480px){ .reason-card{ flex-basis: 340px; } }
.reason-card__icon{
  width: 48px; height: 48px; margin-bottom: 16px; border-radius: 50%;
  background: var(--c-primary-soft);
  display: flex; align-items: center; justify-content: center;
}
.reason-card__icon svg, .reason-card__icon img{ width: 24px; height: 24px; fill: var(--c-primary); stroke: none; }
.reason-card h3{ font-size: var(--fs-h3); line-height: var(--lh-h3); }
.reason-card p{ color: var(--c-text-dim); margin-top: 16px; }
.reason-card__num{
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h3); line-height: var(--lh-h3);
  color: rgba(255, 255, 255, .12); margin-top: 16px;
}
.footnote{ color: var(--c-text-dim); font-size: var(--fs-body-s); line-height: var(--lh-body-s); margin-top: 24px; }

/* ---------- 8. Standort ---------- */
.location__grid{ display: grid; gap: 40px; }
@media (min-width: 1024px){ .location__grid{ grid-template-columns: 1fr 1fr; gap: 32px; align-items: start; } }

/* Mobil steht die Karte oben, die Ortsliste darunter.
   Ab zwei Spalten gilt wieder die Reihenfolge aus dem Markup. */
.location__map{ order: -1; }
@media (min-width: 1024px){ .location__map{ order: 0; } }

.location__list li{
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
  padding-block: 18px; padding-inline: 16px;
  border-bottom: 1px solid var(--c-border);
}
.location__list li:first-child{ border-top: 1px solid var(--c-border); }
.location__city{ font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h4); }
.location__time{ color: var(--c-primary-text); white-space: nowrap; }

/* Achtung: aspect-ratio zusammen mit min-height leitet auf schmalen
   Viewports die BREITE aus der Hoehe ab und sprengt das Grid.
   Deshalb ist die Breite hier die fuehrende Groesse. */
.location__map{
  position: relative; overflow: hidden;
  width: 100%;
  background: var(--c-bg-alt); border-radius: var(--radius);
  aspect-ratio: 648 / 486; padding: 20px;
}
@media (min-width: 640px){ .location__map{ padding: 32px; } }
.location__map-rings{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; opacity: .12; }
.location__map-rings span{ position: absolute; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; }
.location__map-labels{
  position: relative; z-index: 1;
  display: flex; justify-content: space-between;
  font-size: 12px; font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--c-text-dim);
}
.location__map-divider{
  position: absolute; top: 0; bottom: 0; left: 50%; width: 2px;
  background: rgba(227, 6, 19, .5); transform: translateX(-1px);
}
.location__marker{
  position: absolute; display: flex; flex-direction: column; align-items: center; gap: 6px;
  transform: translate(-50%, -50%);
}
.location__marker::before{ content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.location__marker span{ font-size: 12px; font-weight: 700; white-space: nowrap; }
@media (min-width: 640px){ .location__marker span{ font-size: 13px; } }
.location__marker--home::before{
  position: relative; z-index: 1;
  width: 16px; height: 16px; background: var(--c-primary);
  box-shadow: 0 0 0 6px rgba(227, 6, 19, .25);
}
.location__marker--home span{ font-weight: 900; }

/* Konstanter, dezenter Puls auf dem Standortpunkt.
   Eigener Ring statt animiertem box-shadow — transform und opacity
   laufen auf dem Compositor und loesen kein Re-Layout aus. */
.location__marker--home::after{
  content: ""; position: absolute; top: 0; left: 50%;
  width: 16px; height: 16px; margin-left: -8px;
  border-radius: 50%; background: var(--c-primary);
  pointer-events: none;
  animation: marker-pulse 2.6s cubic-bezier(.2, .6, .3, 1) infinite;
}
@keyframes marker-pulse{
  0%       { transform: scale(1);   opacity: .45; }
  70%, 100%{ transform: scale(2.8); opacity: 0; }
}

/* ---------- 9. Marken-Bento ---------- */
.brand-grid{ display: grid; gap: 20px; }
@media (min-width: 900px){ .brand-grid{ grid-template-columns: 1fr 1fr; gap: 24px; } }
.brand-grid__quad{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (min-width: 900px){ .brand-grid__quad{ gap: 24px; } }
/* Ungerade Anzahl: die letzte Karte nimmt die volle Breite — so bleibt das
   Raster geschlossen, egal ob ein Standort 3, 5 oder 7 Marken hat. */
.brand-grid__quad > .brand-card:last-child:nth-child(odd){ grid-column: 1 / -1; }
.brand-grid__row{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (min-width: 700px){ .brand-grid__row{ grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 900px){ .brand-grid__row{ grid-column: 1 / -1; gap: 24px; } }

.brand-card{
  position: relative; overflow: hidden;
  border: 1px solid var(--c-border); border-radius: var(--radius);
  min-height: 220px; display: flex; align-items: flex-end;
}
@media (min-width: 640px){ .brand-card{ min-height: 260px; } }
.brand-card--hero{ min-height: 340px; }
@media (min-width: 900px){ .brand-card--hero{ min-height: 100%; } }
.brand-card img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .6; }
.brand-card::after{
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, #000 5%, rgba(0, 0, 0, .2) 50%, transparent 90%);
}
.brand-card__body{ position: relative; z-index: 1; padding: 20px; }
@media (min-width: 640px){ .brand-card__body{ padding: 24px; } }
.brand-card--hero .brand-card__body{ padding: 24px; }
@media (min-width: 640px){ .brand-card--hero .brand-card__body{ padding: 40px; } }
.brand-card__tag{
  display: block;
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h6); letter-spacing: .8px; text-transform: uppercase;
  color: var(--c-primary-text);
}
.brand-card--hero .brand-card__tag{
  display: inline-block; background: var(--c-primary); color: #fff;
  padding: 4px 12px; border-radius: var(--radius-sm); margin-bottom: 16px;
}
.brand-card__name{ font-size: clamp(22px, 5vw, var(--fs-h2)); text-transform: uppercase; margin-top: 4px; }
.brand-card--hero .brand-card__name{ font-size: clamp(32px, 5vw, var(--fs-h1)); line-height: 1.05; }
.brand-card__desc{ color: var(--c-text-dim); font-size: var(--fs-body-s); line-height: var(--lh-body-s); margin-top: 8px; }
.brand-card--hero .brand-card__desc{ font-size: var(--fs-body-md); line-height: 28px; margin-top: 12px; }

/* Standort-Gruppen und reine Service-Marken */
.brand-group__title{
  display: flex; align-items: center; gap: 10px;
  font-size: var(--fs-h4); line-height: var(--lh-h4); text-transform: uppercase; letter-spacing: .5px;
  margin: 0 0 20px;
}
.brand-group__title img{ width: 20px; height: 20px; opacity: .8; }
/* Adresszeile unter einer Standort-Ueberschrift */
.brand-group__title:has(+ .brand-group__meta){ margin-bottom: 6px; }
.brand-group__meta{ color: var(--c-text-dim); font-size: var(--fs-body-s); line-height: 1.6; margin: 0 0 20px 30px; }
.brand-group__meta a{ color: var(--c-text); white-space: nowrap; text-decoration: underline; text-underline-offset: 3px; }
.brand-group__meta a:hover{ color: var(--c-primary-text); }
.brand-grid + .brand-grid__row--3{ margin-top: 20px; }
.brand-grid__row--3 + .brand-group__title,
.brand-grid + .brand-group__title{ margin-top: 56px; }
@media (min-width: 900px){ .brand-grid + .brand-grid__row--3{ margin-top: 24px; } }

/* Drei Service-Marken nebeneinander (ab Tablet), auf dem Handy untereinander.
   Ohne Bild bleibt die Karte dunkel statt ein kaputtes Bild zu zeigen. */
.brand-grid__row--3{ grid-template-columns: 1fr; }
@media (min-width: 700px){ .brand-grid__row--3{ grid-template-columns: repeat(3, 1fr); } }
.brand-grid__row--3 .brand-card{ background: var(--c-surface); }

/* Dorsten: Kacheln links, Spezialisten-Karte rechts (gespiegelt zu Emsbüren) */
@media (min-width: 900px){ .brand-grid--reverse{ grid-template-columns: 1fr 1fr; } }
.special-card{ min-height: 360px; background: var(--c-surface); }
@media (min-width: 900px){ .special-card{ min-height: 100%; } }
/* Motiv sitzt mittig im Bild — Ausschnitt leicht nach oben, damit Tank
   und Motor im Hochformat sichtbar bleiben. */
.special-card img{ object-position: 50% 40%; }
.special-card .brand-card__body{ padding: 28px; }
@media (min-width: 640px){ .special-card .brand-card__body{ padding: 40px; } }
.special-card__icon{ width: 72px; height: 72px; color: var(--c-primary); margin-bottom: 20px; display: block; }
.special-card .brand-card__name{ font-size: clamp(28px, 4.5vw, var(--fs-h2)); line-height: 1.1; }

.brands__banner-title{
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h3); line-height: var(--lh-h3); margin: 48px 0 24px;
}

.service-banner{
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; gap: 24px;
  background: var(--c-surface); border: 1px solid rgba(255, 255, 255, .05);
  border-radius: var(--radius); padding: 28px;
}
@media (min-width: 800px){
  .service-banner{ flex-direction: row; align-items: center; justify-content: space-between; padding: 48px; }
}
.service-banner::before{ content: ""; position: absolute; inset-block: 0; left: 0; width: 4px; background: var(--c-primary); }
.service-banner h3{ font-size: var(--fs-h3); line-height: var(--lh-h3); }
.service-banner p{ color: var(--c-text-dim); margin-top: 8px; max-width: 52ch; }
.service-banner__actions{ display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------- 10. Split-Feature ---------- */
.feature{ display: grid; gap: 32px; }
@media (min-width: 1024px){ .feature{ grid-template-columns: 1fr 1fr; gap: 32px; align-items: center; } }
@media (min-width: 1024px){ .feature--reverse .feature__visual{ order: 2; } }
.feature__media{ border-radius: var(--radius); overflow: hidden; aspect-ratio: 648 / 486; }
.feature__media img{ width: 100%; height: 100%; object-fit: cover; }
.feature__desc{ color: var(--c-text-dim); margin-top: 16px; max-width: 56ch; }
.feature .btn{ margin-top: 32px; }

.checklist{ display: grid; gap: 24px; margin-top: 32px; }
.checklist li{ display: flex; gap: 12px; align-items: flex-start; }
.checklist__icon{ width: 24px; height: 24px; flex-shrink: 0; fill: var(--c-primary); stroke: none; }
.checklist strong{
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h4); line-height: var(--lh-h4);
}
.checklist span{ display: block; color: var(--c-text-dim); font-size: var(--fs-body-s); line-height: var(--lh-body-s); margin-top: 2px; }

.stat-graphic{
  position: relative; overflow: hidden;
  width: 100%;
  background: var(--c-bg-alt); border-radius: var(--radius);
  aspect-ratio: 648 / 500;
  display: flex; align-items: center; justify-content: center;
}
.stat-graphic__rings{ position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.stat-graphic__rings span{
  position: absolute; border-radius: 50%; border: 1px solid rgba(227, 6, 19, .2);
  aspect-ratio: 1;
}
.stat-graphic__rings span:nth-child(1){ width: min(440px, 90%); }
.stat-graphic__rings span:nth-child(2){ width: min(320px, 65%); }
.stat-graphic__rings span:nth-child(3){ width: min(200px, 42%); }
.stat-graphic__value{ position: relative; z-index: 1; text-align: center; }
.stat-graphic__value{ margin: 0; }
.stat-graphic__value b{
  display: block; font-family: var(--font-display); font-weight: 700;
  font-size: clamp(40px, 12vw, 56px); color: var(--c-primary); line-height: 1;
  font-variant-numeric: tabular-nums;   /* Ziffern gleich breit — kein Springen */
}
/* Der Zaehler bleibt Teil der Zahl — gleiche Zeile, gleiche Groesse. */
.stat-graphic__count{ display: inline; font: inherit; color: inherit; }
/* Bewusst eine eigene Klasse statt eines Selektors auf "span": Die Zahl
   enthaelt selbst einen span fuer den Zaehler — ein allgemeiner
   Nachfahren-Selektor wuerde den mitformatieren und die Zahl zerlegen. */
.stat-graphic__label{
  display: block; margin-top: 8px;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-h6); letter-spacing: .5px;
}

/* ---------- 11. Aktivitaeten ---------- */
.activity-grid{ display: grid; gap: 24px; }
@media (min-width: 800px){ .activity-grid{ grid-template-columns: repeat(3, 1fr); } }
.activity-card{ background: var(--c-surface); border-radius: var(--radius); overflow: hidden; }
.activity-card__media{ aspect-ratio: 424 / 220; overflow: hidden; }
.activity-card__media img{ width: 100%; height: 100%; object-fit: cover; }
.activity-card__body{ padding: 24px; }
.activity-card h3{ font-size: var(--fs-h3); line-height: var(--lh-h3); }
.activity-card p{ color: var(--c-text-dim); margin-top: 16px; }

/* ---------- 12. Termin-CTA ---------- */
.booking-card{
  display: grid; overflow: hidden;
  background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
}
@media (min-width: 1000px){ .booking-card{ grid-template-columns: 1fr 1fr; } }
/* Inhalt vertikal mittig — spiegelt die rechte Spalte (Schritte), die
   ebenfalls zentriert ist. Sonst klebt der Text oben und unten bleibt
   eine grosse Leerflaeche. */
.booking-card__info{ display: flex; flex-direction: column; justify-content: center; gap: 32px; padding: 28px; }
@media (min-width: 640px){ .booking-card__info{ padding: 48px; } }
@media (min-width: 1280px){ .booking-card__info{ padding: 64px; } }
.booking-card__title{ font-size: clamp(26px, 4vw, var(--fs-h2)); line-height: 1.1; text-transform: uppercase; margin-top: 8px; }
.booking-card__desc{ color: var(--c-text-dim); margin-top: 16px; max-width: 500px; }
.booking-card__cta-row{ display: flex; align-items: center; gap: 24px; flex-wrap: wrap; }
.booking-card__meta strong{
  display: block; font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h6); letter-spacing: .8px; text-transform: uppercase;
}
.booking-card__meta span{ display: block; color: var(--c-text-dim); font-size: var(--fs-body-s); }

.booking-card__social{
  display: flex; align-items: center; gap: 16px;
  padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, .05);
}
.booking-card__social p{ color: var(--c-text-dim); font-size: var(--fs-body-s); }
.booking-card__social b{ color: #fff; }
.avatar-stack{ display: flex; flex-shrink: 0; }
.avatar-stack img{
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--c-surface); margin-left: -12px;
}
.avatar-stack img:first-child{ margin-left: 0; }

.booking-card__media{
  position: relative;
  display: flex; flex-direction: column; justify-content: center; gap: 16px;
  background: var(--c-surface-alt); padding: 32px 20px; min-height: 320px;
}
@media (min-width: 640px){ .booking-card__media{ padding: 40px 48px; } }
.booking-card__media-bg{ position: absolute; inset: 0; opacity: .3; }
.booking-card__media-bg img{ width: 100%; height: 100%; object-fit: cover; }

.booking-step{
  position: relative; z-index: 1;
  display: flex; align-items: center; gap: 16px;
  background: rgba(255, 255, 255, .05); border: 1px solid var(--c-border);
  border-radius: var(--radius); padding: 18px; backdrop-filter: blur(6px);
}
@media (min-width: 640px){ .booking-step{ gap: 24px; padding: 24px; } }
.booking-step--active{ background: rgba(227, 6, 19, .1); border-color: rgba(227, 6, 19, .3); }
.booking-step__icon{
  width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%;
  background: var(--c-primary-soft); display: flex; align-items: center; justify-content: center;
}
.booking-step__icon svg, .booking-step__icon img{ width: 24px; height: 24px; fill: var(--c-primary); stroke: none; }
.booking-step strong{ display: block; font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h5); }
.booking-step span{ display: block; color: var(--c-text-dim); font-size: var(--fs-h6); margin-top: 2px; }

.trust-grid{ display: grid; gap: 24px; margin-top: 24px; }
@media (min-width: 800px){ .trust-grid{ grid-template-columns: repeat(3, 1fr); } }
.trust-card{ background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); padding: 24px; }
.trust-card__icon{
  width: 48px; height: 48px; margin-bottom: 16px; border-radius: 50%;
  background: var(--c-primary-soft); display: flex; align-items: center; justify-content: center;
}
.trust-card__icon svg, .trust-card__icon img{ width: 24px; height: 24px; fill: var(--c-primary); stroke: none; }
.trust-card h3{ font-size: var(--fs-h4); line-height: var(--lh-h4); }
.trust-card p{ color: var(--c-text-dim); margin-top: 8px; }

/* ---------- 13. Formular ---------- */
.form-page{ padding-block: 48px 64px; }
@media (min-width: 1024px){ .form-page{ padding-block: 80px 96px; } }
.form-shell{ width: 100%; max-width: var(--maxw-form); margin-inline: auto; }

.form-head{ margin-bottom: 32px; }
@media (min-width: 1024px){ .form-head{ margin-bottom: 48px; } }
.form-head h1{
  font-size: clamp(28px, 5vw, var(--fs-h2)); line-height: 1.12;
  text-transform: uppercase; margin-top: 16px;
}

/* Der Stepper bleibt auf jeder Breite einzeilig. Auf schmalen Screens
   tragen die Stufen ihre Kurzbeschriftung und kompaktere Masse. */
.stepper{
  display: flex; align-items: center; flex-wrap: nowrap;
  gap: 5px; margin-bottom: 32px;
}
@media (min-width: 700px){ .stepper{ gap: 16px; } }

.stepper__pill{
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 10px; border-radius: 50px;
  background: rgba(227, 6, 19, .06); color: rgba(255, 255, 255, .55);
  font-weight: 600; font-size: 12px; line-height: 1.3;
  white-space: nowrap; min-width: 0;
  transition: background-color .25s, color .25s;
}
@media (min-width: 380px){ .stepper__pill{ gap: 6px; padding: 9px 14px; font-size: 13px; } }
@media (min-width: 700px){ .stepper__pill{ gap: 8px; padding: 10px 18px; font-size: var(--fs-body-s); } }

.stepper__num{ opacity: .75; }
.stepper__label--full{ display: none; }
@media (min-width: 700px){
  .stepper__label--compact{ display: none; }
  .stepper__label--full{ display: inline; }
}
.stepper__pill.is-active{ background: rgba(227, 6, 19, .18); color: var(--c-primary-text); }
.stepper__pill.is-done{ background: rgba(47, 191, 113, .12); color: var(--c-success); }
.stepper__line{ display: none; flex: 1 0 0; height: 1px; background: rgba(255, 255, 255, .15); }
@media (min-width: 900px){ .stepper__line{ display: block; } }

/* Die Karte setzt den Abstand zwischen ALLEN Kindern ueber gap (Figma: 20px).
   Keine Einzelabstaende auf Feldern — sonst bekommen Felder, die als
   Grid-Geschwister nebeneinander liegen, einen Versatz gegeneinander. */
.step-card{
  display: flex; flex-direction: column; gap: 20px;
  background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 24px; margin-bottom: 24px;
}
@media (min-width: 640px){ .step-card{ padding: 32px; } }
.step-card__title{
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--fs-h4); line-height: var(--lh-h4);
}
.step-card__hint{ color: var(--c-text-muted); font-size: var(--fs-label); line-height: 20px; }

.field-row{ display: grid; gap: 20px; align-items: start; }
@media (min-width: 700px){ .field-row--2{ grid-template-columns: 1fr 1fr; } }

/* min-width:0 hebt die automatische Mindestbreite von Flex- und
   Grid-Kindern auf — ohne das können Felder nicht unter ihre
   Inhaltsbreite schrumpfen und schieben sich aus dem Container. */
.field{ display: flex; flex-direction: column; gap: 8px; min-width: 0; }
/* display:flex oben schlaegt sonst das hidden-Attribut. */
.field[hidden]{ display: none; }
/* Ist ein Feld der Zweierreihe ausgeblendet, nimmt das andere die volle Breite. */
.field-row--2:has(> .field[hidden]){ grid-template-columns: 1fr; }
.field__label{ font-weight: 600; font-size: var(--fs-label); color: rgba(255, 255, 255, .85); text-transform: uppercase; letter-spacing: .3px; }
.field__label .optional{ font-weight: 400; color: var(--c-text-muted); text-transform: none; letter-spacing: 0; }
/* 08.11.2026: Pflichtfelder mit Sternchen. Per ::after, weil data-teile den
   Label-Text per JS austauscht. Screenreader erkennen Pflicht ueber required. */
.field__label--req::after{ content: " *"; color: var(--c-primary); font-weight: 700; }
.form-legend{ margin: -4px 0 16px; color: var(--c-text-muted); font-size: var(--fs-label); line-height: 20px; }
.form-legend span{ color: var(--c-primary); font-weight: 700; }

.input,
.select,
.textarea{
  width: 100%; min-width: 0; max-width: 100%;
  padding: 13px 16px 13px 18px;
  background: var(--c-field); color: #fff;
  border: 1px solid rgba(255, 255, 255, .12); border-radius: var(--radius-field);
  font-family: var(--font-body); line-height: 20px;
  transition: border-color .2s;

  /* 16px ist auf Mobilgeräten Pflicht, nicht Geschmack: iOS Safari zoomt
     die Seite automatisch hinein, sobald ein Feld mit kleinerer Schrift
     fokussiert wird — das Layout wirkt danach verrutscht. Ab Tablet-Breite
     ist der Zoom kein Thema mehr, dort greift wieder die Designgröße. */
  font-size: 16px;
}
@media (min-width: 700px){
  .input,
  .select,
  .textarea{ font-size: 15px; }
}
.input::placeholder,
.textarea::placeholder{ color: rgba(255, 255, 255, .55); }
.input:focus,
.select:focus,
.textarea:focus{ border-color: var(--c-primary); outline: none; }
.textarea{ min-height: 90px; resize: vertical; }

.select{
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff8c' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 16px center; background-size: 16px;
  padding-right: 42px;
}
.select option{ background: var(--c-field); color: #fff; }

/* ---------- Datumsfeld ----------
   iOS Safari ignoriert bei input[type=date] die Breitenangabe und
   bemisst das Feld nach seinem eigenen Inhalt — dadurch schiebt es
   sich aus der Karte. appearance:none schaltet auf die normale
   Feld-Darstellung um, erst dann greift width:100%.

   Nebenwirkung: Ein leeres Feld zeigt auf iOS danach keine
   TT.MM.JJJJ-Segmente mehr. Das Label "DATUM" darüber sagt ohnehin,
   worum es geht, und ein aus dem Container laufendes Feld wiegt
   schwerer als die fehlende Vorschau.

   Dieselben Angaben stehen zusätzlich inline im HTML, damit sie auch
   bei veralteter CSS im Cache greifen. */
.input[type="date"]{
  -webkit-appearance: none;
          appearance: none;
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 46px;
  line-height: 20px;
  text-align: left;
}

/* Natives Picker-Icon im dunklen Layout sichtbar halten. */
.input[type="date"]::-webkit-calendar-picker-indicator{
  filter: invert(1); opacity: .6; cursor: pointer;
  margin-left: 4px; flex-shrink: 0;
}

.select:disabled,
.input:disabled{ opacity: .45; cursor: not-allowed; }

.checkbox{ display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.checkbox input{
  appearance: none; flex-shrink: 0;
  width: 20px; height: 20px; margin: 0;
  border: 1.5px solid rgba(255, 255, 255, .3); border-radius: var(--radius-field);
  background: transparent; cursor: pointer;
  display: grid; place-content: center;
  transition: background-color .2s, border-color .2s;
}
.checkbox input::before{
  content: ""; width: 10px; height: 10px; transform: scale(0);
  background: #fff; transition: transform .15s;
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}
.checkbox input:checked{ background: var(--c-primary); border-color: var(--c-primary); }
.checkbox input:checked::before{ transform: scale(1); }
.checkbox span{ font-size: var(--fs-body-s); color: rgba(255, 255, 255, .85); line-height: 1.4; }
.checkbox a{ color: var(--c-primary-text); text-decoration: underline; }

.field__hint{ color: var(--c-text-muted); font-size: var(--fs-label); line-height: 1.4; }

/* FIN: Monospace, damit 0/O und 1/I auseinanderzuhalten sind. */
.input--mono{ font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .5px; text-transform: uppercase; }
.input--mono::placeholder{ text-transform: none; letter-spacing: 0; }

/* Datei-Upload im Feld-Look. Der native Button wird ueber
   ::file-selector-button gestylt, der Dateiname bleibt vom Browser. */
.input--file{ padding: 8px 12px; cursor: pointer; color: rgba(255, 255, 255, .75); }
.input--file::file-selector-button{
  margin-right: 14px; padding: 8px 14px;
  background: var(--c-surface-alt); color: #fff;
  border: 1px solid var(--c-border-strong); border-radius: var(--radius-field);
  font-family: var(--font-body); font-weight: 600; font-size: var(--fs-label);
  cursor: pointer; transition: border-color .2s;
}
.input--file:hover::file-selector-button{ border-color: var(--c-primary); }

.field-error{
  display: none;
  color: #ff6b6b; font-size: var(--fs-label); line-height: 1.4; margin-top: 2px;
}
.field.has-error .field-error{ display: block; }
.field.has-error .input,
.field.has-error .select,
.field.has-error .textarea{ border-color: #ff6b6b; }
.field.has-error .checkbox input{ border-color: #ff6b6b; }
.form-legal{ color: var(--c-text-muted); font-size: var(--fs-label); line-height: 20px; text-align: center; }

.send-error{
  background: rgba(255, 107, 107, .1); border: 1px solid rgba(255, 107, 107, .4);
  border-radius: var(--radius-field); padding: 14px 16px;
  color: #ff9b9b; font-size: var(--fs-body-s); line-height: 1.5;
}
.send-error[hidden]{ display: none; }

/* Honeypot: aus dem Blickfeld geschoben statt display:none — Bots
   ueberspringen ausgeblendete Felder haeufig, verschobene nicht. */
.honeypot{
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}


.form-status{
  display: none;
  background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--radius);
  padding: 32px; text-align: center;
}
.form-status.is-visible{ display: block; }
.form-status__icon{
  width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%;
  background: rgba(47, 191, 113, .12);
  display: flex; align-items: center; justify-content: center;
}
.form-status__icon svg{ width: 32px; height: 32px; fill: var(--c-success); stroke: none; }
.form-status h2{ font-size: var(--fs-h3); line-height: var(--lh-h3); text-transform: uppercase; }
.form-status p{ color: var(--c-text-dim); margin-top: 12px; }
.form-status dl{
  display: grid; gap: 8px; max-width: 420px; margin: 24px auto 0;
  text-align: left; font-size: var(--fs-body-s);
}
.form-status dl > div{ display: flex; justify-content: space-between; gap: 16px; padding-block: 8px; border-bottom: 1px solid var(--c-border); }
.form-status dt{ color: var(--c-text-dim); }
.form-status dd{ margin: 0; font-weight: 600; text-align: right; }

/* ---------- 14. Footer ---------- */
.site-footer{ background: #000; padding-top: 56px; }
.footer-grid{ display: grid; gap: 40px; padding-bottom: 56px; }
@media (min-width: 700px){ .footer-grid{ grid-template-columns: 1fr 1fr; } }
@media (min-width: 1100px){ .footer-grid{ grid-template-columns: 2fr 1fr 1fr 1.2fr; gap: 32px; } }

.footer-brand img{ height: 40px; }
.footer-brand p{ color: var(--c-text-dim); font-size: 14px; line-height: 24px; margin-top: 24px; max-width: 34ch; }
.footer-social{ display: flex; gap: 16px; margin-top: 24px; }
.footer-social a{
  width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid var(--c-border); background: var(--c-bg-alt);
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, color .2s;
}
.footer-social svg{ width: 18px; height: 18px; fill: currentColor; }
.footer-social a:hover{ border-color: var(--c-primary); color: var(--c-primary); }

.footer-col h2{
  font-family: var(--font-body); font-weight: 600;
  font-size: var(--fs-h6); letter-spacing: .8px; text-transform: uppercase;
  color: var(--c-primary-text); margin-bottom: 24px;
}
.footer-col ul{ display: grid; gap: 16px; }

/* Leistungen-Spalte: engerer Abstand als die übrigen Footer-Listen */
.footer-col[aria-labelledby="ft-services"] h2{ margin-bottom: 16px; }
.footer-col[aria-labelledby="ft-services"] ul{ gap: 8px; }
.footer-col a{ font-size: var(--fs-h6); transition: color .2s; }
.footer-col a:hover{ color: var(--c-primary-text); }

.footer-contact li{
  display: flex; gap: 8px; align-items: flex-start;
  font-size: var(--fs-body-s); color: var(--c-text-dim);
}
.footer-contact svg, .footer-contact img{ width: 24px; height: 24px; flex-shrink: 0; fill: currentColor; stroke: none; }
.footer-contact a{ color: #fff; font-weight: 600; }
.footer-contact a:hover{ color: var(--c-primary-text); }

.footer-bottom{
  background: #0a0a0a; border-top: 1px solid rgba(255, 255, 255, .05);
  display: flex; flex-direction: column; gap: 12px;
  padding: 24px var(--gutter-mobile);
  font-size: 12px; color: var(--c-text-dim);
}
@media (min-width: 700px){
  .footer-bottom{ flex-direction: row; justify-content: space-between; align-items: center; padding-inline: 32px; }
}
@media (min-width: 1600px){ .footer-bottom{ padding-inline: var(--gutter); } }
.footer-bottom nav{ display: flex; gap: 24px; flex-wrap: wrap; }
.footer-bottom a:hover{ color: #fff; }

/* =============================================================
   15. Interaktion — zurueckhaltende Hover- und Fokus-Animationen
   Gemeinsame Sprache: kurzer Weg nach oben, rote Akzentlinie,
   leichter Bildzoom. Alles ueber transform/opacity, damit der
   Compositor arbeitet und kein Layout neu berechnet wird.
   Die globale prefers-reduced-motion-Regel oben schaltet das ab.
   ============================================================= */

/* Buttons: Pfeil laeuft mit */
.btn__icon{ transition: transform .25s ease; }
.btn:hover .btn__icon{ transform: translateX(4px); }
.btn--primary:active,
.btn--outline:active{ transform: translateY(1px); }

/* Hauptnavigation: Unterstrich waechst von links */
.site-nav a{ position: relative; }
.site-nav a::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px;
  background: var(--c-primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.site-nav a:hover::after,
.site-nav a:focus-visible::after{ transform: scaleX(1); }

/* Marken-Bento: Bildzoom, Akzentlinie unten, Text hebt leicht an */
.brand-card{ transition: border-color .35s ease, transform .35s ease; }
.brand-card img{ transition: transform .7s cubic-bezier(.2, .6, .2, 1), opacity .35s ease; }
.brand-card__body{ transition: transform .35s ease; }
.brand-card::before{
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 2px; z-index: 2;
  background: var(--c-primary);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.2, .6, .2, 1);
}
.brand-card:hover,
.brand-card:focus-visible{ border-color: rgba(227, 6, 19, .45); }
.brand-card:hover::before,
.brand-card:focus-visible::before{ transform: scaleX(1); }
.brand-card:hover img,
.brand-card:focus-visible img{ transform: scale(1.06); opacity: .72; }
.brand-card:hover .brand-card__body,
.brand-card:focus-visible .brand-card__body{ transform: translateY(-4px); }

/* Gruende-Karten: Icon wird kraeftiger, Ziffer nimmt Rot an */
.reason-card{ transition: transform .3s ease, background-color .3s ease; }
.reason-card__icon{ transition: transform .3s ease, background-color .3s ease; }
.reason-card__num{ transition: color .3s ease; }
.reason-card:hover{ transform: translateY(-4px); }
.reason-card:hover .reason-card__icon{ transform: scale(1.08); background: rgba(227, 6, 19, .28); }
.reason-card:hover .reason-card__num{ color: rgba(227, 6, 19, .45); }

/* Aktivitaeten: Karte hebt an, Bild zoomt */
.activity-card{ transition: transform .35s ease; }
.activity-card__media img{ transition: transform .7s cubic-bezier(.2, .6, .2, 1); }
.activity-card:hover{ transform: translateY(-5px); }
.activity-card:hover .activity-card__media img{ transform: scale(1.06); }

/* Trust-Karten */
.trust-card{ transition: transform .3s ease, border-color .3s ease; }
.trust-card__icon{ transition: transform .3s ease, background-color .3s ease; }
.trust-card:hover{ transform: translateY(-4px); border-color: rgba(227, 6, 19, .35); }
.trust-card:hover .trust-card__icon{ transform: scale(1.08); background: rgba(227, 6, 19, .28); }

/* Standortliste: Zeile rueckt beim Hover leicht ein */
.location__list li{ transition: background-color .25s ease; }
.location__list li:hover{ background: rgba(255, 255, 255, .03); }
.location__city{ display: inline-block; transition: transform .25s ease, color .25s ease; }
.location__list li:hover .location__city{ transform: translateX(6px); }

/* Termin-Schritte in der CTA-Karte */
.booking-step{ transition: transform .3s ease, border-color .3s ease; }
.booking-step:hover{ transform: translateX(4px); border-color: rgba(227, 6, 19, .35); }

/* Service-Banner: Akzentkante waechst */
.service-banner::before{ transition: width .3s ease; }
.service-banner:hover::before{ width: 6px; }

/* Footer-Links */
.footer-col a,
.footer-contact a{ display: inline-block; transition: color .2s ease, transform .2s ease; }
.footer-col a:hover,
.footer-contact a:hover{ transform: translateX(3px); }

/* ---------- 16. Scroll-Reveal ---------- */
[data-reveal]{ opacity: 0; transform: translateY(16px); transition: opacity .5s ease, transform .5s ease; }
.has-js [data-reveal].is-visible{ opacity: 1; transform: none; }
.no-js [data-reveal]{ opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce){
  [data-reveal]{ opacity: 1; transform: none; }
}


/* ---------- Cookie-Einwilligung (assets/consent.js) ----------
   "Nur notwendige" und "Alle akzeptieren" sind bewusst gleich
   gestaltet — Ablehnen darf nicht schwerer sein als Zustimmen. */
.consent{
  position: fixed; inset: auto 0 0 0; z-index: 1000;
  padding: 16px;
  display: flex; justify-content: center;
  pointer-events: none;
}
.consent[hidden]{ display: none; }
.consent__box{
  pointer-events: auto;
  width: 100%; max-width: 720px; max-height: calc(100vh - 32px); overflow-y: auto;
  background: var(--c-surface-alt); color: var(--c-text);
  border: 1px solid var(--c-border-strong); border-top: 3px solid var(--c-primary);
  border-radius: var(--radius); padding: 24px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
}
@media (min-width: 640px){ .consent{ padding: 24px; } .consent__box{ padding: 28px 32px; } }
.consent__title{ font-size: var(--fs-h4); line-height: var(--lh-h4); text-transform: uppercase; }
.consent__text{ color: var(--c-text-dim); font-size: var(--fs-body-s); line-height: 1.6; margin-top: 10px; }

.consent__settings{ display: grid; gap: 12px; margin-top: 20px; }
.consent__settings[hidden]{ display: none; }
.consent__option{
  display: flex; gap: 12px; align-items: flex-start; cursor: pointer;
  background: var(--c-bg-alt); border: 1px solid var(--c-border); border-radius: var(--radius-field);
  padding: 12px 14px; font-size: var(--fs-body-s); color: var(--c-text-dim); line-height: 1.5;
}
.consent__option strong{ display: block; color: var(--c-text); font-weight: 600; }
.consent__option input{ width: 18px; height: 18px; margin-top: 2px; flex-shrink: 0; accent-color: var(--c-primary); }
.consent__option input:disabled{ opacity: .6; }
.consent__option:has(input:disabled){ cursor: default; }

.consent__actions{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 20px; }
.consent__btn{
  flex: 1 1 180px;
  padding: 13px 20px; border: 1px solid var(--c-primary); border-radius: var(--radius-sm);
  background: var(--c-primary); color: #fff;
  font-family: var(--font-body); font-weight: 700; font-size: 15px; cursor: pointer;
  transition: background-color .2s, border-color .2s;
}
.consent__btn:hover{ background: var(--c-primary-dark); border-color: var(--c-primary-dark); }
.consent__link{
  flex: 1 0 100%;
  background: none; border: 0; padding: 4px 0; cursor: pointer;
  color: var(--c-text); font-family: var(--font-body); font-size: var(--fs-body-s); font-weight: 600;
  text-decoration: underline; text-underline-offset: 3px;
}
@media (min-width: 640px){ .consent__link{ flex: 0 0 auto; } }
.consent__legal{ margin-top: 14px; font-size: var(--fs-label); color: var(--c-text-muted); }
.consent__legal a{ color: var(--c-text-dim); text-decoration: underline; }

/* ---------- Rechtstexte (Impressum, Datenschutz) ---------- */
.legal-page{ padding: 64px 0 96px; }
@media (min-width: 900px){ .legal-page{ padding: 96px 0 120px; } }
.legal{ max-width: 760px; }
.legal h1{ font-size: clamp(36px, 6vw, var(--fs-h1)); line-height: 1.05; text-transform: uppercase; margin: 12px 0 40px; }
.legal h2{ font-size: var(--fs-h4); line-height: var(--lh-h4); text-transform: uppercase; letter-spacing: .3px; margin: 36px 0 10px; }
.legal p{ color: var(--c-text-dim); font-size: var(--fs-body-md); line-height: 1.7; }
.legal a{ color: var(--c-text); text-decoration: underline; text-underline-offset: 3px; }
.legal a:hover{ color: var(--c-primary-text); }
/* Sichtbarer Platzhalter fuer fehlende Pflichtangaben — vor Livegang entfernen. */
.legal__todo{ border: 1px dashed #ffb020; border-radius: var(--radius-field); padding: 12px 16px; }
.legal__todo strong{ color: #ffb020; }
.legal ul{ list-style: disc; margin: 12px 0 12px; padding-left: 20px; color: var(--c-text-dim); line-height: 1.7; }
.legal li + li{ margin-top: 4px; }
.legal p + p{ margin-top: 12px; }
.legal__stand{ margin-top: 48px; font-size: var(--fs-body-s); }