/* 
  DVP Holding – Typography & Layout Fixes
  Basiert auf exakter DOM-Analyse der gerenderten React-App
*/

/* ============================================================
   1. TYPOGRAPHY – Line-Height Fixes
   ============================================================ */

.leading-\[0\.86\] { line-height: 1.05 !important; }
.leading-\[0\.94\] { line-height: 1.15 !important; }
.leading-\[1\]     { line-height: 1.18 !important; }
.leading-\[1\.05\] { line-height: 1.20 !important; }
.leading-\[1\.08\] { line-height: 1.22 !important; }

@media (max-width: 768px) {
  .leading-\[0\.86\] { line-height: 1.10 !important; }
  .leading-\[0\.94\] { line-height: 1.18 !important; }
}

h1, h2 { padding-bottom: 0.05em !important; }

/* ============================================================
   2. SAFE AREA / DYNAMIC ISLAND (iPhone 15 Pro Max, Notch)
   ============================================================
   Der Header ist fixed top-0. Ohne safe-area-inset-top liegt
   das Logo direkt unter der Dynamic Island / Notch.
   viewport-fit=cover ist in index.html gesetzt.
   ============================================================ */

header {
  padding-top: env(safe-area-inset-top, 0px) !important;
}

/* Hero-Sektion: Padding-Top erhöhen um safe-area zu kompensieren */
@supports (padding-top: env(safe-area-inset-top)) {
  section.grain {
    padding-top: calc(6rem + env(safe-area-inset-top, 0px)) !important;
  }
}

/* ============================================================
   3. FOOTER – Copyright-Zentrierung (Desktop + Mobile)
   ============================================================
   DOM-Analyse: Copyright-div (.mt-10.border-t) ist das 4. Kind
   des Grid-divs (.grid.gap-10). Bei 3-spaltigem Desktop-Grid
   landet es in Spalte 1 (links). Fix: grid-column: 1 / -1
   ============================================================ */

/* Copyright über alle Grid-Spalten spannen + zentrieren */
footer .mt-10.border-t {
  grid-column: 1 / -1 !important;
  text-align: center !important;
  width: 100% !important;
}

footer .mt-10.border-t p {
  text-align: center !important;
  margin: 0 auto !important;
}

/* ============================================================
   4. FOOTER – Mobile Layout
   ============================================================
   Grid: 'grid gap-10 text-center md:grid-cols-[1.25fr_0.85fr_0.7fr]'
   Auf Mobile: 1-spaltig, Copyright ist letztes Element (korrekt)
   ============================================================ */

@media (max-width: 767px) {
  /* Footer-Grid: einspaltig, zentriert */
  footer .grid {
    grid-template-columns: 1fr !important;
    text-align: center !important;
    gap: 2rem !important;
  }

  /* Copyright: letztes Element, volle Breite, zentriert */
  footer .mt-10.border-t {
    grid-column: 1 / -1 !important;
    order: 999 !important;
    text-align: center !important;
  }

  /* Adresse-Spalte: zentriert */
  footer .grid > div:nth-child(2) {
    text-align: center !important;
  }
}

/* ============================================================
   5. MOBILE ALLGEMEIN
   ============================================================ */

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

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

@media (max-width: 767px) {
  .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;
  }

  .sm\:p-8 {
    padding: 1.25rem !important;
  }

  .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;
  }
  .sm\:grid-cols-2 {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   6. HERO-HINTERGRUNDBILD – Mobile vollständig anzeigen
   ============================================================ */

@media (max-width: 767px) {
  section.grain > div[style] {
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 100% !important;
    transform: none !important;
    position: absolute !important;
  }

  section.grain > div[style] img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    opacity: 0.18 !important;
  }

  section.grain {
    min-height: 100svh !important;
    background-size: cover !important;
    background-position: center center !important;
  }

  section.grain .container {
    position: relative;
    z-index: 10;
  }
}

/* ============================================================
   7. SCROLL-INDIKATOR ANIMATION
   ============================================================ */

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0px); opacity: 0.6; }
  50% { transform: translateY(14px); opacity: 1; }
}

@keyframes scrollFade {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.scroll-line {
  animation: scrollBounce 1.6s ease-in-out infinite !important;
  transform: none !important;
}

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

.scroll-indicator {
  opacity: 1 !important;
}

/* ============================================================
   8. BUTTONS DESKTOP
   ============================================================ */

@media (min-width: 768px) {
  .md\:flex > a,
  .sm\:grid-cols-2 > a {
    min-width: 200px;
  }
}