/* 
  DVP Holding - Typography Fixes
  Behebt das Problem kollidierender Unterlängen bei Überschriften (H1/H2)
*/

/* 1. Hero-Überschrift (H1) */
.leading-\[0\.86\] {
  line-height: 1.05 !important;
}

/* 2. Haupt-Sektionsüberschriften (H2) */
.leading-\[0\.94\] {
  line-height: 1.15 !important;
}

/* 3. Kleinere Überschriften & Zwischenüberschriften (H2/H3) */
.leading-\[1\] {
  line-height: 1.18 !important;
}

.leading-\[1\.05\] {
  line-height: 1.20 !important;
}

.leading-\[1\.08\] {
  line-height: 1.22 !important;
}

/* Responsive Anpassungen & Overflow-Sicherung */
@media (max-width: 768px) {
  /* Auf Mobilgeräten etwas mehr Luft geben, da die Schriften relativ groß gerendert werden */
  .leading-\[0\.86\] {
    line-height: 1.10 !important;
  }
  .leading-\[0\.94\] {
    line-height: 1.18 !important;
  }
}

/* Margins und Paddings anpassen, um Layout-Verschiebungen durch höhere line-height zu kompensieren */
h1, h2 {
  padding-bottom: 0.05em !important;
}

/* ============================================================
   MOBILE OPTIMIERUNGEN
   ============================================================ */

/* Neuer H1 clamp-Wert */
.text-\[clamp\(2\.2rem\,6vw\,6rem\)\] {
  font-size: clamp(2.2rem, 6vw, 6rem);
}

/* Verhindert horizontales Scrollen */
body, section {
  overflow-x: hidden;
}

@media (max-width: 767px) {
  /* Sektions-Überschriften auf Mobile anpassen */
  .text-\[clamp\(2rem\,4vw\,4rem\)\] {
    font-size: clamp(1.7rem, 7vw, 2.5rem) !important;
  }

  .text-\[clamp\(1\.9rem\,3\.5vw\,3\.2rem\)\] {
    font-size: clamp(1.5rem, 6vw, 2.2rem) !important;
  }

  .text-\[clamp\(1\.25rem\,2\.2vw\,2rem\)\] {
    font-size: clamp(1.1rem, 4vw, 1.5rem) !important;
  }

  /* Footer-Grid auf Mobile: einspaltig und zentriert */
  .md\:grid-cols-\[1\.25fr_0\.85fr_0\.7fr\] {
    grid-template-columns: 1fr !important;
    text-align: center;
    gap: 2rem !important;
  }

  /* Karten-Padding auf Mobile reduzieren */
  .sm\:p-8 {
    padding: 1.25rem !important;
  }

  /* Touch-Scrolling für Galerie */
  .snap-x {
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
  }
}

@media (min-width: 640px) and (max-width: 767px) {
  .text-\[clamp\(2rem\,4vw\,4rem\)\] {
    font-size: clamp(2rem, 5vw, 3rem) !important;
  }
}

/* Hero-Hintergrundbild: auf Mobile als voller Hintergrund hinter dem Text */
@media (max-width: 767px) {
  /* Das animierte Bild-Div soll auf Mobile die volle Sektion bedecken */
  section.grain > div[style] {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    transform: none !important;
  }
  
  /* Bild-Opacity auf Mobile etwas erhöhen für bessere Sichtbarkeit */
  section.grain > div[style] img {
    opacity: 0.15 !important;
    object-position: center center !important;
  }
  
  /* Sicherstellen dass der Text-Container über dem Bild liegt */
  section.grain .container {
    position: relative;
    z-index: 10;
  }
}

/* ============================================================
   BUTTON GLEICHGRÖSSE & SCROLL-ANIMATION
   ============================================================ */

/* Buttons auf Desktop: gleiche Breite nebeneinander */
@media (min-width: 768px) {
  /* md:flex Override - Buttons gleich groß nebeneinander */
  .md\:flex.grid {
    display: flex !important;
  }
  
  /* Beide Buttons gleiche Mindestbreite auf Desktop */
  .md\:flex > a,
  .sm\:grid-cols-2 > a {
    min-width: 200px;
  }
}

/* Auf sm (640-767px): 2-Spalten Grid = gleich breit */
@media (min-width: 640px) and (max-width: 767px) {
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* Scroll-Indikator: sanfte Pulsanimation zusätzlich zur Bewegung */
@keyframes scrollPulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.scroll-indicator > span {
  animation: scrollPulse 1.6s ease-in-out infinite;
}

/* ============================================================
   SCROLL-INDIKATOR ANIMATION (CSS-Override für Framer Motion)
   ============================================================ */

/* Keyframe für die Linie (Auf-Ab-Bewegung) */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0px); opacity: 0.6; }
  50% { transform: translateY(14px); opacity: 1; }
}

/* Keyframe für den Text (Pulsieren) */
@keyframes scrollFade {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

/* Scroll-Linie animieren - überschreibt Framer Motion inline style */
.scroll-line {
  animation: scrollBounce 1.6s ease-in-out infinite !important;
  transform: none !important;
}

/* Scroll-Text pulsieren */
.scroll-indicator > span {
  animation: scrollFade 1.6s ease-in-out infinite;
  display: block;
}

/* Sicherstellen dass der Scroll-Container sichtbar ist */
.scroll-indicator {
  opacity: 1 !important;
}