/* =============================================================
   02 – HERO
   Dunkelblauer Markenverlauf, Highlights-Leiste
   ============================================================= */

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;   /* Text oben, Highlights unten – Bild atmet dazwischen */
  min-height: 100vh;
  min-height: 100svh;   /* mobil: dynamische Viewport-Höhe (kein Sprung durch Browserleisten) */
  padding-top: calc(var(--header-h) + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: clamp(2.5rem, 5vw, 4rem);
  overflow: hidden;
  color: #EAF2FB;
  --hero-dur: 6s;   /* Anzeigedauer pro Slide – muss zu SLIDE_MS in js/main.js passen */
  /* KEIN background hier: .hero__bg liegt bei z-index:-3 dahinter; ein Hintergrund
     auf .hero (kein Stacking-Context) würde das ganze Karussell verdecken. */
}

/* Hintergrund-Video (optional, siehe index.html) */
.hero__video {
  position: absolute; inset: 0; z-index: -3;
  width: 100%; height: 100%; object-fit: cover;
}

/* Hintergrund-Karussell: äußere Box trägt den Parallax (JS verschiebt sie langsamer).
   Box oben/unten größer als der Hero → beim Parallax-Verschieben kein Rand. */
.hero__bg {
  position: absolute; left: 0; right: 0; top: -20%; height: 140%;
  z-index: -3;
  overflow: hidden;
  background: var(--c-blue-deep);
  will-change: transform;
}
/* Bild-Slides: aktiver Slide vollflächig (scharfe Ecken); der wechselnde rückt
   kleiner + mit runden Ecken nach hinten/links raus, der neue wächst von rechts auf. */
.hero__slide-img {
  position: absolute; inset: 0;
  background-position: center; background-size: cover; background-repeat: no-repeat;
  border-radius: 20px;
  transform: translateX(102%) scale(0.9);   /* Parkposition: rechts, verkleinert, unsichtbar */
  opacity: 0;
  z-index: 0;
  transition: transform 1.1s var(--ease), opacity 0.9s var(--ease), border-radius 1.1s var(--ease);
  will-change: transform, opacity;
}
.hero__slide-img[data-slide="0"] { background-image: url("../assets/images/Bilder Impressionen --- Pictures impressions/FF3972_2019-06-13_B3972_C674_P893_Enull_2019-06-12_DJI_0104-HDR.webp"); }
.hero__slide-img[data-slide="1"] { background-image: url("../assets/images/Bilder Impressionen --- Pictures impressions/brauerei_04.webp"); }
.hero__slide-img[data-slide="2"] { background-image: url("../assets/images/Bilder Impressionen --- Pictures impressions/Gruppe_01.webp"); }

.hero__slide-img.is-active {           /* vollflächig, vorne */
  transform: translateX(0) scale(1);
  border-radius: 0;
  opacity: 1;
  z-index: 2;
}
.hero__slide-img.is-leaving {          /* rückt kleiner + rund nach links, blendet aus */
  transform: translateX(-42%) scale(0.82);
  border-radius: 20px;
  opacity: 0;
  z-index: 1;
}
/* Farb-Scrim (statisch, über dem Foto) – Lesbarkeit des hellen, linksbündigen Textes */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(to right, rgba(0, 30, 62, 0.82) 0%, rgba(0, 30, 62, 0.42) 50%, rgba(0, 30, 62, 0.14) 100%),
    linear-gradient(to bottom, rgba(0, 26, 54, 0.55) 0%, transparent 24%, transparent 66%, rgba(0, 26, 54, 0.62) 100%);
}
/* Echte bayerische Rauten (weiße Flaggen-SVG) – links, sehr dezent, nach rechts ausblendend */
.hero::before {
  display: none;   /* Bayern-Rauten vorerst ausgeblendet – zum Reaktivieren diese Zeile entfernen */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url("../assets/images/Bayern_flagge.svg") left center / auto 118% no-repeat;
  opacity: 0.12;
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 10%, transparent 50%);
          mask-image: linear-gradient(to right, #000 0%, #000 10%, transparent 50%);
}

/* Inhalt-Karussell: die drei Blöcke im selben Raster gestapelt, nur der aktive sichtbar */
.hero__content { position: relative; display: grid; }
.hero__slide-content {
  grid-area: 1 / 1;
  align-self: start; justify-self: start;
  max-width: 680px;                     /* schmaler, linksbündiger Textblock */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.6s var(--ease);
}
.hero__slide-content.is-active { opacity: 1; pointer-events: auto; }

/* ---- Slide-Vorschau (ersetzt den mittigen Punkt-Indikator) ----
   Kleine Bild-Kacheln der drei Slides, linksbündig am unteren Hero-Rand.
   Jede Kachel: feine gelbe Kontur (bei Hover dicker), leichte Vergrößerung,
   Glanz-Sweep bei Hover, integrierter Fortschrittsbalken (Restlaufzeit). */
.hero__previews {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: center;               /* Kacheln mittig im Hero */
  gap: clamp(0.8rem, 1.6vw, 1.25rem);
  margin-top: clamp(2.5rem, 5vw, 3.8rem);
}
/* Kontur-Stärke als registrierte Custom Property → weich animierbar */
@property --ow {
  syntax: "<length>";
  inherits: false;
  initial-value: 1px;
}

.hero__preview {
  --ow: 1px;                     /* feine gelbe Kontur; aktiv/Hover: dicker */
  position: relative;
  width: clamp(112px, 12vw, 168px);
  aspect-ratio: 16 / 10;
  padding: 0; border: 0; background: none;
  cursor: pointer;
  /* Kontur folgt der eingekerbten Silhouette: 4 harte Drop-Shadows rundum
     (+ weicher Tiefenschatten). border/box-shadow können den nach innen
     gekehrten Ecken nicht folgen – Drop-Shadow umschließt die Maskenform. */
  filter:
    drop-shadow(var(--ow) 0 0 var(--c-yellow))
    drop-shadow(calc(-1 * var(--ow)) 0 0 var(--c-yellow))
    drop-shadow(0 var(--ow) 0 var(--c-yellow))
    drop-shadow(0 calc(-1 * var(--ow)) 0 var(--c-yellow))
    drop-shadow(0 12px 22px rgba(0, 20, 40, 0.35));
  transition: transform 0.4s var(--ease), --ow 0.4s var(--ease);
  will-change: transform, filter;
}
.hero__preview:hover { transform: scale(1.05); --ow: 2.5px; }
.hero__preview.is-active { --ow: 2px; }
.hero__preview:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }

/* Bildfläche: Foto + Maske mit INVERTIERTEN Ecken (Viertelkreis-Kerben).
   --notch = Radius der nach innen gekehrten Ecken. */
.hero__preview-inner {
  --notch: 14px;
  position: absolute; inset: 0; display: block;
  overflow: hidden;
  background-position: center; background-size: cover;
  -webkit-mask:
    radial-gradient(circle at left  top,    transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left  top    / 51% 51% no-repeat,
    radial-gradient(circle at right top,    transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right top    / 51% 51% no-repeat,
    radial-gradient(circle at left  bottom, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left  bottom / 51% 51% no-repeat,
    radial-gradient(circle at right bottom, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right bottom / 51% 51% no-repeat;
          mask:
    radial-gradient(circle at left  top,    transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left  top    / 51% 51% no-repeat,
    radial-gradient(circle at right top,    transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right top    / 51% 51% no-repeat,
    radial-gradient(circle at left  bottom, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) left  bottom / 51% 51% no-repeat,
    radial-gradient(circle at right bottom, transparent var(--notch), #000 calc(var(--notch) + 0.5px)) right bottom / 51% 51% no-repeat;
}
.hero__preview[data-slide="0"] .hero__preview-inner { background-image: url("../assets/images/Bilder Impressionen --- Pictures impressions/FF3972_2019-06-13_B3972_C674_P893_Enull_2019-06-12_DJI_0104-HDR.webp"); }
.hero__preview[data-slide="1"] .hero__preview-inner { background-image: url("../assets/images/Bilder Impressionen --- Pictures impressions/brauerei_04.webp"); }
.hero__preview[data-slide="2"] .hero__preview-inner { background-image: url("../assets/images/Bilder Impressionen --- Pictures impressions/Gruppe_01.webp"); }

/* leichte Abdunklung unten, damit der Fortschrittsbalken immer lesbar ist */
.hero__preview-inner::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(0, 20, 40, 0.45), transparent 45%);
}

/* Glanz-Sweep bei Hover (Lichtstreifen läuft schräg über die Kachel) */
.hero__preview-inner::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg,
              transparent 40%, rgba(255, 255, 255, 0.55) 50%, transparent 60%);
  background-size: 250% 100%;
  background-position: 130% 0;
  opacity: 0;
}
.hero__preview:hover .hero__preview-inner::after { animation: preview-shine 0.9s var(--ease) forwards; }
@keyframes preview-shine {
  0%   { background-position: 130% 0; opacity: 0; }
  15%  { opacity: 1; }
  85%  { opacity: 1; }
  100% { background-position: -30% 0; opacity: 0; }
}

/* Fortschritt: schmaler Balken am Kachel-Boden, füllt sich über --hero-dur */
.hero__preview-progress {
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: rgba(255, 255, 255, 0.25);
}
.hero__preview-fill {
  display: block; width: 100%; height: 100%;
  background: var(--c-yellow);
  transform: scaleX(0); transform-origin: left;
}
.hero__preview.is-active .hero__preview-fill {
  animation: hero-progress var(--hero-dur, 6s) linear forwards;
}
@keyframes hero-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) { .hero__preview-progress { display: none; } }
.hero__eyebrow {
  font: 700 1.2rem/1 var(--font-sans); letter-spacing: 0.2em; text-transform: uppercase;
  color: #FFCE2E; margin-bottom: 1.3rem;
}
.hero__title { font-size: clamp(2.9rem, 7vw, 6.2rem) !important; font-weight: 600; color: #fff; text-transform: uppercase; }
.hero__title .accent {
  font-style: italic;
  color: #fff;
}
.hero__lead { margin-top: 1.5rem; font-size: clamp(1.05rem, 2vw, 1.28rem); max-width: 56ch; color: #fff; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 2.1rem; }

/* ---- Entrance-Animation: Ken-Burns-Bild + gestaffeltes Auftauchen ---- */
@keyframes hero-kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
@keyframes hero-rise { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes hero-title-in {
  from { opacity: 0; transform: translateY(34px); filter: blur(10px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}
.hero__eyebrow    { animation: hero-rise 0.8s var(--ease) both;   animation-delay: 0.15s; }
.hero__title      { animation: hero-title-in 1s var(--ease) both; animation-delay: 0.30s; }
.hero__lead       { animation: hero-rise 0.8s var(--ease) both;   animation-delay: 0.55s; }
.hero__actions    { animation: hero-rise 0.8s var(--ease) both;   animation-delay: 0.70s; }
.hero__previews   { animation: hero-rise 0.9s var(--ease) both;   animation-delay: 0.85s; }

@media (max-width: 600px) {
  /* Kacheln teilen sich die volle Breite (3 nebeneinander) */
  .hero__preview { width: auto; flex: 1; min-width: 0; }
}
@media (max-width: 480px) {
  .hero__actions .btn { flex: 1; }
}