/* ============================================================
   HERO STYLES (assets/css/hero.css)
   ============================================================ */

/* --- Container & Hintergrund --- */
.hero-container {
  position: relative; /* Wichtig für absolute Positionierung der Kinder */
  width: 100vw; /* Volle Viewport-Breite */
  height: 70vh; /* Standard Höhe - kann per Inline-Style oder spezifischer Klasse überschrieben werden */
  overflow: hidden; /* Verhindert, dass überstehende Hintergrundelemente Scrollbalken verursachen */
  margin: 0;
  padding: 0;
  padding-left: 20px;
  border-radius: 0; /* KEINE abgerundeten Ecken für den Hero */
  background-color: #333; /* Fallback-Hintergrund, falls kein Bild/Video geladen wird */
}

/* Hintergrundbild (static-image, parallax-fallback) */
.hero-container .static-image-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  z-index: 1; /* Hinter dem Content, aber über ggf. anderen statischen BG-Farben */
}

/* Hintergrundvideo */
.hero-container video.video-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Stellt sicher, dass das Video den Container ausfüllt ohne Verzerrung */
  z-index: 1;
}

/* Gradient Overlay (für Gradient Hero Typ) */
.hero-container .hero-gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 2; /* Über dem Hintergrundbild, unter dem Content */
  pointer-events: none; /* Lässt Klicks durch zum Hintergrund, falls nötig */
  /* Opacity wird inline gesetzt */
}
/* Gradient-Definitionen - diese müssen mit den Klassen in template-parts/hero.php übereinstimmen */
.hero-container .hero-gradient-overlay.gradient-1  { --gradient-definition: linear-gradient(90deg, #f8ff00 0%, #3ad59f 100%); background: var(--gradient-definition); }
.hero-container .hero-gradient-overlay.gradient-2  { --gradient-definition: linear-gradient(90deg, #1CB5E0 0%, #000851 100%); background: var(--gradient-definition); }
.hero-container .hero-gradient-overlay.gradient-3  { --gradient-definition: radial-gradient(circle, #e0f2f7 0%, #b0bec5 100%); background: var(--gradient-definition); } /* Angepasst an deine gradient.css */
.hero-container .hero-gradient-overlay.gradient-4  { --gradient-definition: linear-gradient(135deg, #ff8c00 0%, #ff0080 20%, #ff4500 45%, #40E0D0 60%, #ab47bc 85%, #ff8c00 100%); background: var(--gradient-definition); }
.hero-container .hero-gradient-overlay.gradient-5  { --gradient-definition: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%); background: var(--gradient-definition); }
.hero-container .hero-gradient-overlay.gradient-6  { --gradient-definition: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%); background: var(--gradient-definition); }
.hero-container .hero-gradient-overlay.gradient-7  { --gradient-definition: linear-gradient(90deg, #4b6cb7 0%, #182848 100%); background: var(--gradient-definition); }
.hero-container .hero-gradient-overlay.gradient-8  { --gradient-definition: linear-gradient(90deg, #e3ffe7 0%, #d9e7ff 100%); background: var(--gradient-definition); }
.hero-container .hero-gradient-overlay.gradient-9  { --gradient-definition: linear-gradient(115deg, #d1ff60 0%, #60ffbf 100%); background: var(--gradient-definition); }
.hero-container .hero-gradient-overlay.gradient-10 { --gradient-definition: linear-gradient(90deg, rgba(253,146,146,1) 0%, rgba(209,254,212,1) 100%); background: var(--gradient-definition); }

/* Animation für Gradienten, falls .animated-gradient Klasse gesetzt ist */
.hero-container .hero-gradient-overlay.animated-gradient {
  background-size: 500% 500% !important; /* Wichtig für die Animation, !important um ggf. Inline-Styles zu überschreiben */
  animation: heroGradientWanderDiagonal 14s ease infinite;
}
@keyframes heroGradientWanderDiagonal {
  0%   { background-position:   0%   0%; }
  50%  { background-position: 100% 100%; }
  100% { background-position:   0%   0%; }
}


/* --- Close-Button oben rechts (aus page-content.php) --- */
.hero-close-btn {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  padding: 0;
  margin-right: 20px;
  background: rgba(0, 0, 0, 0.4);
  border: none;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  cursor: pointer;
  z-index: 10; /* Muss über allem im Hero sein */
  transition: background-color 0.3s ease;
}
.hero-close-btn:hover,
.hero-close-btn:focus {
  background: rgba(0, 0, 0, 0.6);
}
.hero-close-btn svg {
    width: 24px;
    height: 24px;
}


/* --- Hero-Content Wrapper --- */
.hero-content {
  position: relative; 
  z-index: 3; 
  display: flex;
  flex-direction: column;
  width: 100%; 
  max-width: var(--page-max-width, 1496px); /* Nutzt globale Variable, Fallback auf 1496px */
  margin-left: auto;
  margin-right: auto;
  height: 100%; 
  padding-top: 30px;    /* Oberes Padding beibehalten oder anpassen */
  padding-bottom: 30px; /* Unteres Padding beibehalten oder anpassen */
  padding-left: var(--content-padding-default, 30px);
  padding-right: var(--content-padding-default, 30px);
  box-sizing: border-box;
  color: #fff; 
  text-shadow: 0 1px 3px rgba(0,0,0,0.3); 
}

/* Vertikale Ausrichtung des .hero-content Blocks (bleibt gleich) */
.hero-content.align-top    { justify-content: flex-start; }
.hero-content.align-center { justify-content: center; }
.hero-content.align-bottom { justify-content: flex-end; }

/* Horizontale Ausrichtung des TEXTES innerhalb .hero-content-inner (bleibt gleich) */
.hero-content.align-left .hero-content-inner     { align-items: flex-start; text-align: left; }
.hero-content.align-center-h .hero-content-inner { align-items: center;    text-align: center; }
.hero-content.align-right .hero-content-inner    { align-items: flex-end;  text-align: right; }

/* Innerer Content-Block für zentrale Elemente wie Titel, Chip (bleibt gleich) */
.hero-content-inner {
    display: flex;
    flex-direction: column;
}

/* --- Meta Top Area (Breadcrumb & Chip) --- */
.hero-meta-top {
  margin-bottom: 8px; /* Abstand zum Titel */
  min-height: 1.5em; /* Mindesthöhe, um Layout-Sprünge zu reduzieren, falls Breadcrumb/Chip fehlen */
}

/* --- Breadcrumb oben links --- */
.hero-breadcrumb {
  font-size: 0.9rem;
  opacity: 0.85;
  line-height: 1.3;
  /* margin-bottom: 8px; Wird jetzt vom Chip geregelt, falls vorhanden */
}
.hero-breadcrumb a {
    color: #fff;
    text-decoration: underline;
}
.hero-breadcrumb a:hover {
    text-decoration: none;
}

/* --- Farb-Chip --- */
.hero-chip {
  display: inline-block;
  padding: 5px 12px;
  font-size: 0.8rem;
  font-weight: 500;
  background-color: var(--chip-bg, rgba(0, 0, 0, 0.5)); /* Fallback, kann per CSS-Variable überschrieben werden */
  color: #fff;
  border-radius: 15px; /* Rundere Ecken */
  line-height: 1.3;
}

/* Wenn Chip das erste Element ist (keine Breadcrumbs), kein extra margin-top */
.hero-meta-top.chip-is-first .hero-chip {
  margin-top: 0;
}
/* Wenn Breadcrumb da ist, bekommt der Chip einen margin-top */
.hero-meta-top:not(.chip-is-first) .hero-chip {
    margin-top: 8px;
}
/* Wenn NUR Breadcrumb da ist und KEIN Chip, dann braucht Breadcrumb einen margin-bottom */
.hero-breadcrumb:only-child {
    margin-bottom: 8px; /* Um den Abstand zu simulieren, den sonst .hero-meta-top gibt */
}


/* --- Hero-Titel --- */
.hero-title {
  font-size: 2.8rem;
  font-weight: 600;
  margin-top: 0; /* Da .hero-meta-top darüber ist */
  margin-bottom: 10px; /* Reduziert, wenn Subtitle folgt */
  line-height: 1.2;
  color: #fff;
}

/* --- Hero-Subtitle --- */
.hero-subtitle {
  font-size: 1.25rem;
  font-weight: 400;
  line-height: 1.4;
  margin-top: 0; /* Direkt unter dem Titel */
  margin-bottom: 20px; /* Abstand zu den unteren Links oder zum Rand */
  opacity: 0.9;
  max-width: 700px; /* Begrenzt die Breite für bessere Lesbarkeit */
}
/* Horizontale Zentrierung für Subtitle, wenn .hero-content.align-center-h */
.hero-content.align-center-h .hero-content-inner .hero-subtitle {
    margin-left: auto;
    margin-right: auto;
}

/* --- Link-Buttons am unteren Rand --- */
.hero-links {
  margin-top: auto; /* Schiebt es nach unten, wenn .hero-content-inner nicht den Platz füllt */
  padding-top: 20px; /* Abstand nach oben, falls Titel etc. kurz sind */
  display: flex;
  gap: 10px;
}
/* Wenn der Content oben oder mittig ist, brauchen die Links einen festen margin-top */
.hero-content.align-top .hero-links,
.hero-content.align-center .hero-links {
    margin-top: 20px; /* Fester Abstand nach dem Titel/Subtitle */
}
/* Horizontale Ausrichtung der Buttons selbst */
.hero-content.align-left .hero-links { justify-content: flex-start; } /* Standard */
.hero-content.align-center-h .hero-links { justify-content: center; }
.hero-content.align-right .hero-links { justify-content: flex-end; }

.hero-link-btn {
  padding: 10px 20px;
  background: rgba(255, 255, 255, 0.9);
  color: #333;
  text-decoration: none;
  font-size: 0.95rem;
  border-radius: 6px;
  font-weight: 500;
  transition: background-color 0.3s ease, color 0.3s ease;
  border: 1px solid transparent; /* Für konsistentes Box-Modell */
}
.hero-link-btn:hover,
.hero-link-btn:focus {
  background: rgba(255, 255, 255, 1);
  color: #000;
}

/* --- Hero Parallax Hintergrund --- */
.hero-parallax-img {
  position: absolute;
  left: 0;
  top: 0; /* Startet oben */
  width: 100%;
  /* Höhe ist größer als der Hero-Container, um vertikales Verschieben zu ermöglichen.
     70vh (Hero-Höhe) + z.B. 30vh Puffer = 100vh.
     Oder relativ zum Container: height: 140%; (wenn Hero-Container 70vh hat, wäre das 98vh)
     Wir setzen es mal auf eine feste Relation zum Viewport für mehr Konsistenz. */
  height: 130vh; /* Deutlich höher als die 70vh des Hero-Containers */
  background-size: cover;
  background-position: center center; /* Zentriert das Bild initial */
  background-repeat: no-repeat;
  will-change: transform; /* Performance-Hinweis für den Browser */
  z-index: 1; /* Hinter dem hero-content */
  backface-visibility: hidden;
  transform: scale(1.0001);
  /* Das transform (translateY) wird per JavaScript gesteuert */
}

/* Wenn der Hero-Container eine andere Höhe als 70vh hat,
   muss diese .hero-parallax-img Höhe ggf. angepasst werden,
   oder man berechnet sie dynamischer, falls nötig.
   Für feste 70vh Hero-Höhe ist 130vh ein guter Puffer. */

/* --- Responsive für Mobile --- */
@media (max-width: 767px) {
  .hero-container {
    height: 60vh; /* Etwas weniger Höhe auf Mobile */
    perspective: 1000px; /* Hinzufügen für den 3D-Kontext */
  }
  .hero-content {
    padding-top: 20px;    /* Oberes Padding anpassen für Mobile */
    padding-bottom: 20px; /* Unteres Padding anpassen für Mobile */
    padding-left: var(--content-padding-mobile, 10px);
    padding-right: var(--content-padding-mobile, 10px);
  }
  .hero-title {
    font-size: 2rem;
  }
  .hero-subtitle {
    font-size: 1rem;
    max-width: 100%; /* Volle Breite für Subtitle auf Mobile */
  }
  .hero-chip {
    padding: 4px 10px;
    font-size: 0.75rem;
  }
  .hero-links {
    /* flex-direction: column; // Wenn Buttons untereinander sollen */
    align-items: center; /* Zentriert Buttons, wenn sie wrappen */
    width: 100%;
    justify-content: center; /* Buttons zentrieren (Standard) */
  }
  .hero-link-btn {
    font-size: 0.9rem;
    padding: 8px 16px;
    /* width: 100%; // Falls Buttons volle Breite sollen */
    /* text-align: center; */
  }
}