/* ==========================================================================
   DMW-Performance — Hero (static, single image)
   ==========================================================================
   One calm full-bleed image with a left-aligned caption and a gentle
   scroll-down hint. No autoplay, no rotation.

   Zum Licht: Das Motiv ist ein sonniges Aussenfoto der Werkstatt (mittlere
   Helligkeit 110 von 255). Die Bildunterschrift steht links, und links ist bei
   diesem Bild die helle Seite — Himmel, Pflaster, Baeume. Ein Verlauf von links
   nach rechts reicht deshalb nicht: Die Textspalte laeuft bis 55 % der Breite,
   da ist so ein Verlauf laengst ausgelaufen (gemessen 2,96:1). Stattdessen
   liegt ein weicher Schleier genau unter der Bildunterschrift; das Foto bleibt
   ringsum sonnig.
   ========================================================================== */

.hero {
  position: relative;
  display: flex;
  align-items: center;
  overflow: hidden;
  width: 100%;
  min-height: clamp(440px, 64dvh, 600px);
  /* Platzhalterfarbe, bis das Bild da ist: der Mittelwert des Fotos. Vorher
     stand hier das Marken-Navy — auf einem hellen Foto blitzt das als dunkler
     Kasten auf. */
  background-color: #716E66;
  isolation: isolate;
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* Weicher Schleier genau unter der Bildunterschrift statt eines Verlaufs ueber
   das ganze Bild. Der Mittelpunkt liegt auf dem Schwerpunkt der Textspalte
   (gemessen 33 % / 50 % bei 1024 bis 1920 px Fensterbreite), die Raender laufen
   vollstaendig aus. Ergebnis: Ueberschrift 6,7:1, und Himmel, Werkstatt und
   Fahrzeug bleiben unangetastet. */
.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: radial-gradient(
    58% 62% at 33% 50%,
    rgba(8, 10, 24, 0.78) 0%,
    rgba(8, 10, 24, 0.62) 45%,
    rgba(8, 10, 24, 0.18) 78%,
    transparent 100%
  );
  pointer-events: none;
}

/* Goldene Naht zum hellen Kennzahlenband darunter. Gleiche Form wie die
   Abschnittstrenner in sections.css, damit es kein neues Muster gibt. */
.hero::after {
  content: '';
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  z-index: 3;
  height: 3px;
  background: linear-gradient(90deg, var(--color-primary), transparent 70%);
  pointer-events: none;
}

/* ==========================================================================
   Caption
   ========================================================================== */
/* Kein eigenes margin-left und keine eigene Hoechstbreite mehr: Das Element
   traegt bereits .container, hero.css laedt nur spaeter und hat sie ueberschrieben.
   Dadurch begann die Ueberschrift bei 1440 px 88 px vom Rand, jede
   Abschnittsueberschrift darunter aber bei 144 px. Die Breitengrenze der
   Textspalte sitzt jetzt an den Kindern, wo sie hingehoert. */
.hero__inner {
  position: relative;
  z-index: 2;
  padding-block: var(--space-16);
  color: #FFFFFF;
  text-shadow: 0 1px 3px rgba(8, 10, 24, 0.45);
}

.hero__eyebrow {
  display: inline-block;
  margin-bottom: var(--space-4);
  padding: var(--space-1) var(--space-3);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
  /* Frueher rgba(0,0,0,0.3) — ein schwarzes Kaestchen auf schwarzem Grund,
     das wie ein Fleck wirkte. Jetzt Marken-Navy mit goldener Haarlinie: liest
     sich als Label statt als Fleck und traegt die goldene Schrift auch dort,
     wo das Bild dahinter hell wird. Rein goldgetoent und durchsichtig gemessen:
     1,35:1 am Handy — deshalb der deckende Grund. */
  background: color-mix(in srgb, var(--color-accent) 80%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-primary) 45%, transparent);
  border-radius: var(--radius-sm);
}

.hero__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 5.5vw, var(--text-4xl));
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  max-width: 620px;
  color: #FFFFFF;
  /* Marken-Navy statt reinem Schwarz — dieselbe Toenung wie die Schattenskala
     in variables.css. Gebraucht wird der Schatten nur dort, wo das Ende der
     Zeile ueber den helleren Diagrammbereich des Bildes laeuft. */
  text-shadow: 0 2px 8px rgba(8, 10, 24, 0.50);
}

.hero__text {
  max-width: 480px;
  margin: 0 0 var(--space-8);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  opacity: 0.95;
}

.hero__actions {
  max-width: 620px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4) var(--space-8);
}

/* ==========================================================================
   "Mehr erfahren" scroll hint
   ========================================================================== */
.hero__scroll {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.04em;
  color: #FFFFFF;
  text-decoration: none;
  opacity: 0.9;
  transition: opacity var(--transition-fast), color var(--transition-fast);
}

.hero__scroll:hover,
.hero__scroll:focus-visible {
  opacity: 1;
  color: var(--color-primary);
}

.hero__scroll:focus-visible {
  outline: 3px solid var(--color-primary);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.hero__scroll i {
  animation: hero-bob 1.8s ease-in-out infinite;
}

@keyframes hero-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(4px); }
}

/* ==========================================================================
   Reduced motion
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero__scroll i {
    animation: none;
  }
}

/* Scroll target for the "Mehr erfahren" hint — offset for the sticky header
   so the section heading isn't hidden underneath after the jump. */
#hero-next {
  scroll-margin-top: var(--header-height);
}

/* ==========================================================================
   Mobile
   ========================================================================== */
@media (max-width: 768px) {
  .hero {
    min-height: 60vh;
  }

  .hero__inner {
    padding-block: var(--space-12);
  }

  /* Am Handy passt nur rund ein Drittel der Bildbreite ins Bild. Bei 85 % steht
     die Schrift auf der ruhigen Hauswand, das Fahrzeug liegt frei darunter und
     oben rechts bleiben Himmel und Baum. Weiter links waere das Firmenschild im
     Bild, saesse aber genau hinter der Ueberschrift. */
  .hero__media {
    object-position: 85% center;
  }

  .hero__text {
    font-size: var(--text-base);
  }

  /* Hier liegt die Schrift ueber dem ganzen Bild. Frueher wurde deshalb das
     komplette Bild abgedunkelt (bis 72 %) — genau das machte den Hero am Handy
     zur schwarzen Flaeche. Stattdessen ein weicher Schleier NUR unter der
     Bildunterschrift, plus eine leichte Grundabdunklung nach unten. */
  .hero::before {
    background:
      radial-gradient(
        135% 46% at 50% 48%,
        rgba(8, 10, 24, 0.68) 0%,
        rgba(8, 10, 24, 0.50) 62%,
        transparent 100%
      ),
      linear-gradient(
        180deg,
        rgba(8, 10, 24, 0.14) 0%,
        rgba(8, 10, 24, 0.30) 100%
      );
  }
}

/* The eyebrow now sits inside the H1 (so the heading carries the search term).
   These two rules keep it rendering exactly as it did as a sibling. */
.hero__title .hero__eyebrow {
  display: block;
  width: fit-content;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: 0.12em;
  line-height: 1.4;
  text-shadow: none;
}

.hero__title-claim {
  display: block;
}