/**
 * EDDAIR — Image Foundation (Mobile-Sprint)
 * Fix: <picture> als Flex-Kind in .ps-card
 * Muss NACH index-below.css und NACH inline <style> geladen werden.
 * Deshalb überall !important (inline Styles haben sonst Vorrang).
 */

/* Basis: kein Overflow, sinnvolle Defaults */
img {
  max-width: 100%;
  height: auto;
}

/* === KERN-FIX: .ps-card > picture als Flex-Kind === */
/* Problem: <img> hatte flex:1 als Inline-Style, war direktes Flex-Kind.
   Nach <picture>-Wrapper ist <picture> das Flex-Kind, nicht <img>.
   Lösung: <picture> bekommt flex:1, <img> darin füllt 100%. */
.ps-card > picture {
  display: block !important;
  width: 100% !important;
  flex: 1 !important;
  min-height: 0 !important;
  margin: 12px 0 !important;
}

.ps-card > picture > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 4px !important;
  display: block !important;
}

/* === Branche-Referenzkarten: Bild in article === */
.prod-feat > picture {
  display: block !important;
  width: 100% !important;
}

.prod-feat > picture > img {
  width: 100% !important;
  height: 200px !important;
  object-fit: cover !important;
  display: block !important;
}

/* === Hero-Slides: <picture> transparent === */
.hero-slide > picture {
  display: block !important;
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
}

.hero-slide > picture > img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

/* === 480px Smartphone Breakpoint === */
@media (max-width: 480px) {
  .ps-card {
    flex: 0 0 100% !important;
    min-height: 360px !important;
  }

  .ps-box {
    padding: 40px 16px !important;
  }

  .ps-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 32px !important;
  }

  .box-outer {
    padding: 0 12px !important;
  }

  .counter-section {
    padding: 32px 16px !important;
    gap: 20px !important;
  }

  .ref-video-box .video-placeholder {
    min-height: 220px !important;
  }

  .ps-card > picture > img {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;
  }
}

/* ============================================================
   MOBILE LAYOUT FIXES V2 — 768px + 480px + 390px
   Fixes: App-Section, Sustainability, Newsletter, Ref-Cards,
   Footer, Product-Showcase
   ============================================================ */

/* --- Global Safety-Net --- */
html, body {
  overflow-x: hidden !important;
}

/* === FIX 1: App-Section einspaltig auf Mobile === */
@media (max-width: 768px) {
  .app-inner {
    display: block !important;
    padding: 40px 24px !important;
    min-height: auto !important;
  }
  .app-lifestyle {
    width: 100% !important;
    height: 280px !important;
    margin-bottom: 24px !important;
  }
  .app-phone {
    position: static !important;
    transform: none !important;
    width: 200px !important;
    height: 373px !important;
    margin: -20px auto 0 !important;
    left: auto !important;
  }
  .app-title {
    font-size: 28px !important;
    line-height: 1.2 !important;
  }
  .app-body {
    font-size: 15px !important;
    line-height: 1.5 !important;
  }
}

/* === FIX 2: Nachhaltigkeit (.sus-box) einspaltig auf Mobile === */
@media (max-width: 768px) {
  .sus-box {
    flex-direction: column !important;
    min-height: auto !important;
  }
  .sus-left {
    width: 100% !important;
    padding: 32px 24px !important;
  }
  .sus-badge {
    width: 100% !important;
    padding: 24px !important;
  }
  .sus-badge-inner {
    width: 200px !important;
    height: 200px !important;
    margin: 0 auto !important;
  }
  .sus-title {
    font-size: 26px !important;
    line-height: 1.2 !important;
  }
}

/* === FIX 3: Newsletter (.nl-card) responsive auf Mobile === */
@media (max-width: 768px) {
  .nl-outer {
    padding: 32px 16px !important;
  }
  .nl-card {
    padding: 32px 24px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .nl-card h2 {
    font-size: clamp(1.3rem, 5.5vw, 1.8rem) !important;
    line-height: 1.2 !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
  .nl-form,
  .nl-card form {
    flex-direction: column !important;
    gap: 12px !important;
  }
  .nl-form input,
  .nl-form button,
  .nl-btn {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* === FIX 4: Referenz-Karten einspaltig unter 600px === */
@media (max-width: 600px) {
  .ref-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .ref-card,
  .ref-card-bg {
    min-width: 0 !important;
  }
  .ref-card h3 {
    font-size: clamp(1rem, 4.5vw, 1.25rem) !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
  }
  .ref-section {
    padding: 40px 16px !important;
  }
}

/* === FIX 5: Footer einspaltig unter 480px === */
@media (max-width: 480px) {
  .footer__grid {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .footer__col {
    min-width: 0 !important;
  }
  .footer__col a,
  .footer__col li,
  .footer__col span {
    white-space: normal !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
  }
  .footer__bottom {
    flex-direction: column !important;
    text-align: center !important;
    gap: 12px !important;
  }
}

/* === FIX 6: Produkt-Showcase weniger Leerraum auf Mobile === */
@media (max-width: 768px) {
  .ps-grid {
    scroll-snap-type: x mandatory !important;
    -webkit-overflow-scrolling: touch;
    scroll-padding-inline: 16px !important;
  }
  .ps-card {
    scroll-snap-align: start !important;
    min-height: 300px !important;
  }
  .ps-box {
    padding: 48px 16px !important;
  }
  .ps-title {
    font-size: 24px !important;
  }
}