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

/* --- CSS Variablen für Chip & Close Button & generelle Abstände --- */
.hero-container {
    --hero-edge-spacing: 20px;
    --hero-element-height: 40px;
    --hero-element-bg: rgba(0, 0, 0, 0.45); 
    --hero-element-bg-hover: rgba(0, 0, 0, 0.65);
    --hero-element-text-color: #ffffff;
    --hero-chip-font-size: 0.9rem;
    /* Globale Textabstände aus custom.css (Beispielannahme) */
    --page-max-width: 1496px; 
    --content-padding-default: 30px; 
    --content-padding-mobile: 15px;  
}

/* --- Haupt-Container --- */
.hero-container {
  position: relative; 
  width: 100vw; 
  overflow: hidden; 
  margin: 0;
  padding: 0; 
  border-radius: 0; 
  background-color: #333; 
  display: flex; 
  align-items: center; 
  justify-content: center; 
}

/* --- HINTERGRUNDELEMENTE (z-index: 1) --- */
.hero-container > .static-image-bg,
.hero-container video.video-bg,
.hero-parallax-img,
.hero-container .hero-gradient-effect.gradient-box {
  position: absolute;
  inset: 0; 
  width: 100%;
  height: 100%;
  z-index: 1;
}
.hero-container > .static-image-bg { background-size: cover; background-position: center; background-repeat: no-repeat; }
.hero-container video.video-bg { object-fit: cover; }
.hero-parallax-img {
  height: 130vh; background-size: cover; background-position: center; background-repeat: no-repeat;
  will-change: transform; backface-visibility: hidden; transform: scale(1.0001);
}
.hero-container .hero-gradient-effect.gradient-box { 
  overflow: hidden; border-radius: 0 !important; margin: 0 !important;       
}
.hero-container .hero-gradient-effect.gradient-box::before {
  content: ''; position: absolute; inset: 0; z-index: 1; background: var(--gradient-definition);
  opacity: var(--gradient-opacity); pointer-events: none; background-size: 100% 100%; transition: opacity 0.3s ease;
}
.hero-container .hero-gradient-effect.gradient-box .bg-translator {
  position: absolute; inset: 0; z-index: 0; will-change: transform;
}
.hero-container .hero-gradient-effect.gradient-box .moving-background {
  position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-size: cover !important; 
  background-position: center center !important; background-repeat: no-repeat; will-change: transform;
}
.hero-container .hero-gradient-effect.gradient-box.js-autonomous-bg .moving-background {
  width: 120%; height: 120%; top: -10%; left: -10%;   
}
/* Gradient Definitionen */
.hero-container .hero-gradient-effect.gradient-box.gradient-1  { --gradient-definition: linear-gradient(90deg, #f8ff00 0%, #3ad59f 100%); }
.hero-container .hero-gradient-effect.gradient-box.gradient-2  { --gradient-definition: linear-gradient(90deg, #1CB5E0 0%, #000851 100%); }
.hero-container .hero-gradient-effect.gradient-box.gradient-3  { --gradient-definition: radial-gradient(circle, #e0f2f7 0%, #b0bec5 100%); }
.hero-container .hero-gradient-effect.gradient-box.gradient-4  { --gradient-definition: linear-gradient(135deg, #ff8c00 0%, #ff0080 20%, #ff4500 45%, #40E0D0 60%, #ab47bc 85%, #ff8c00 100%); }
.hero-container .hero-gradient-effect.gradient-box.gradient-5  { --gradient-definition: radial-gradient(circle 248px at center, #16d9e3 0%, #30c7ec 47%, #46aef7 100%); }
.hero-container .hero-gradient-effect.gradient-box.gradient-6  { --gradient-definition: linear-gradient(90deg, #FC466B 0%, #3F5EFB 100%); }
.hero-container .hero-gradient-effect.gradient-box.gradient-7  { --gradient-definition: linear-gradient(90deg, #4b6cb7 0%, #182848 100%); }
.hero-container .hero-gradient-effect.gradient-box.gradient-8  { --gradient-definition: linear-gradient(90deg, #e3ffe7 0%, #d9e7ff 100%); }
.hero-container .hero-gradient-effect.gradient-box.gradient-9  { --gradient-definition: linear-gradient(115deg, #d1ff60 0%, #60ffbf 100%); }
.hero-container .hero-gradient-effect.gradient-box.gradient-10 { --gradient-definition: linear-gradient(90deg, rgba(253,146,146,1) 0%, rgba(209,254,212,1) 100%); }
.hero-container .hero-gradient-effect.gradient-box.animated-gradient::before {
  background-size: 500% 500% !important; animation: heroGradientWanderDiagonal 14s ease infinite;
}
@keyframes heroGradientWanderDiagonal {0%{background-position:0% 0%}50%{background-position:100% 100%}100%{background-position:0% 0%}}

/* ============================================================
   HERO CUTOUT STYLES (SVG-Overlay, z-index: 2)
   ============================================================ */
.hero-container .hero-cutout-svg {
    position: absolute;
    inset: 0; 
    width: 100%;
    height: 100%;
    z-index: 2; 
    pointer-events: none; 
}
.hero-container .hero-cutout-svg .hero-cutout-title-svg { /* Nur Titel im SVG */
    fill: #000000; 
    font-family: 'MatterSQ', Arial, sans-serif; 
    font-weight: 700; 
    text-anchor: middle; 
    dominant-baseline: central; 
    /* font-size wird per Inline-Style (--current-title-fsize) aus PHP gesetzt */
}

/* ============================================================
   HERO UI-ELEMENTE (Chip & Close Button, z-index: 10)
   ============================================================ */
.hero-close-btn {
  position: absolute;
  top: var(--hero-edge-spacing);    
  right: var(--hero-edge-spacing);   
  width: var(--hero-element-height); 
  height: var(--hero-element-height);
  padding: 0; background: var(--hero-element-bg); border: none; border-radius: 50%; 
  display: flex; align-items: center; justify-content: center;
  color: var(--hero-element-text-color); cursor: pointer; z-index: 10; 
  transition: background-color 0.3s ease;
}
.hero-close-btn:hover, .hero-close-btn:focus { background: var(--hero-element-bg-hover); }
.hero-close-btn svg { width: 60%; height: 60%; }

.hero-meta-top { /* Container für den Chip oben links */
  position: absolute;
  top: var(--hero-edge-spacing);    
  left: var(--hero-edge-spacing);
  z-index: 10; 
}

.hero-chip {
  display: inline-flex; align-items: center; justify-content: center; 
  height: var(--hero-element-height); 
  padding: 0 18px; 
  box-sizing: border-box; 
  font-size: var(--hero-chip-font-size);
  font-weight: 500;
  color: var(--hero-element-text-color);
  background-color: var(--hero-element-bg); 
  border-radius: calc(var(--hero-element-height) / 2); 
  line-height: 1; 
  white-space: nowrap; 
}

/* ============================================================
   HERO CONTENT - ZENTRIERTER TEXTBEREICH (Titel, Subtitel, Links - z-index: 3)
   ============================================================ */
.hero-main-text-area {
  position: relative; 
  z-index: 3; /* Über SVG-Cutout */
  display: flex; 
  flex-direction: column;
  justify-content: center; /* Vertikale Zentrierung des .hero-main-text-area-inner */
  align-items: center;    /* Horizontale Zentrierung des .hero-main-text-area-inner */
  width: 100%; 
  height: 100%; 
  padding: var(--hero-edge-spacing) var(--content-padding-default); 
  box-sizing: border-box;
  color: #fff; /* Standardtextfarbe für diesen Bereich */
}

.hero-main-text-area-inner {
  display: flex;
  flex-direction: column;
  align-items: center; /* Zentriert Titel-Platzhalter/Titel und Subtitel horizontal */
  text-align: center;   /* Zentriert den Text innerhalb von Titel/Subtitel */
  width: auto; /* Passt sich dem Inhalt an */
  max-width: var(--page-max-width); /* Begrenzt die Breite des Textblocks */
  position: relative; 
}

/* Unsichtbarer Platzhalter für den Cutout-Titel */
.hero-title-cutout-placeholder {
    /* font-size, line-height, font-family, font-weight werden inline aus PHP gesetzt */
    visibility: hidden; 
    margin: 0; 
    padding: 0;
    display: block; 
    /* Dieser Block nimmt den Platz des Titels ein, damit der Subtitel korrekt positioniert wird */
}

/* Standard Titel (wenn kein Cutout aktiv ist) */
.hero-title { 
  font-size: 2.8rem; 
  font-weight: 700; 
  margin: 0 0 0 0; /* Abstand nach unten wird durch margin-top des Subtitels gesteuert */
  line-height:1.2; 
  color:#fff; 
}

/* Standard Subtitel (wenn kein Cutout aktiv ist) */
.hero-subtitle { 
  /* font-size wird per Inline-Style aus PHP gesetzt oder über CF-Default */
  font-weight:400; 
  line-height:1.4; 
  margin-top: 20px; /* Abstand zum Standard-Titel */
  margin-bottom: 20px; 
  opacity:.9; 
  max-width:700px; 
  margin-left: auto; 
  margin-right: auto;
}

/* Handschrift-Subtitel (wenn Titel-Cutout aktiv ist) */
.hero-subtitle-handwriting {
  font-family: 'PinyonScript', cursive;
  /* font-size wird per Inline-Style aus PHP gesetzt */
  color: #ffffff;    
  line-height: 1.0;  
  margin-top: 130px;  /* Abstand von 20px zum (unsichtbaren) Titel-Cutout-Platzhalter */
  opacity: 0.98;
  margin-bottom: 20px; 
  padding-bottom: 10px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4); 
  width: auto; 
  max-width: 90%; 
  margin-left: auto; 
  margin-right: auto;
  white-space: nowrap; /* Verhindert Umbruch - mit Vorsicht auf sehr kleinen Screens verwenden! */
  position: relative; 
  z-index: 1; /* Sicherstellen, dass er über ggf. Pseudoelementen des Parents liegt */
}

/* Links/Buttons im Hero */
.hero-action-links { 
  margin-top:30px; /* Abstand zum Subtitel */
  display:flex; 
  gap:10px; 
  justify-content: center; /* Buttons immer zentrieren */
}
.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 .3s ease, color .3s ease; border:1px solid transparent; 
}
.hero-link-btn:hover, .hero-link-btn:focus { background:rgba(255,255,255,1); color:#000; }

/* --- RESPONSIVE ANPASSUNGEN --- */
@media (max-width: 767px) {
  .hero-container { 
    --hero-edge-spacing: 15px;    
    --hero-element-height: 36px;  
    --hero-chip-font-size: 0.8rem;
  }
  .hero-main-text-area {
    padding-left: var(--content-padding-mobile); 
    padding-right: var(--content-padding-mobile);
    /* padding-top wird indirekt durch die verringerte Höhe von Chip/Close und ggf. angepasste 
       explizite Abstände in .hero-subtitle-handwriting und .hero-title beeinflusst. */
  }
  .hero-title { font-size: 2rem !important; } /* Für normalen Titel */
  .hero-subtitle { 
    font-size: 1rem !important; 
    max-width: 100%; 
    margin-top: 15px; /* Reduzierter Abstand */
  } 
  .hero-subtitle-handwriting { 
      /* font-size wird inline gesetzt */
      margin-top: 15px; /* Reduzierter Abstand */
      max-width: 95%; 
  }
  /* SVG Cutout Schriftgrößen (diese waren für die responsive Anpassung der --current... Variablen) */
  /* Wichtig: Wenn du die SVG Schriftgröße fix aus CF nimmst, sind diese nicht mehr nötig,
     es sei denn, du willst die CF-Werte auf Mobile überschreiben, was aber komplizierter wird.
     Für den Moment gehe ich davon aus, die CF-Werte gelten für alle Größen, und die Lesbarkeit
     auf Mobile wird durch die ViewBox und ggf. Textlänge sichergestellt. */
   .hero-container .hero-cutout-svg .hero-cutout-title-svg {
       /* --current-title-fsize: 60px !important; */ /* Beispiel, falls du doch responsive SVG-Größen brauchst */
   }
}

@media (max-width: 480px) {
  .hero-container {
    --hero-edge-spacing: 10px;
    --hero-element-height: 32px; 
    --hero-chip-font-size: 0.75rem;
  }
  .hero-subtitle-handwriting {
      /* font-size wird inline gesetzt */
      margin-top: 10px; /* Noch kleinerer Abstand */
  }
  .hero-subtitle {
      margin-top: 10px;
  }
  .hero-container .hero-cutout-svg .hero-cutout-title-svg {
      /* --current-title-fsize: 48px !important; */ /* Beispiel */
  }
}