/* ===== Hadilo – Media Utilities (CLS-safe) ===== */

/* Basis: Medien nie überlaufen lassen */
.hd-media,
.hd-media img,
.hd-media video {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ---- Aspect-Ratio Utilities (Breite flexibel, Höhe reserviert) ---- */
/* Nutze eine der Ratio-Klassen + optional Fit-Variante */

.hd-fit-cover img,
.hd-fit-cover video,
.hd-fit-cover iframe,
.hd-fit-cover .elementor-wrapper > iframe {
  object-fit: cover;
}

.hd-fit-contain img,
.hd-fit-contain video,
.hd-fit-contain iframe,
.hd-fit-contain .elementor-wrapper > iframe {
  object-fit: contain;
  background: #f5f7fb; /* dezente Fläche bei Letterboxing */
}

/* Gemeinsame Regeln für Widgets: */
[class*="hd-ar-"] img,
[class*="hd-ar-"] video,
[class*="hd-ar-"] iframe,
[class*="hd-ar-"] .elementor-wrapper > iframe {
  width: 100%;
  height: auto; /* Bilder/Videos behalten intrinsische Größe */
  aspect-ratio: inherit; /* erbt die Ratio vom Elternelement */
}

/* Container bestimmt die Ratio; Inhalte passen sich an */
.hd-ar-1x1   { aspect-ratio: 1 / 1; }
.hd-ar-4x3   { aspect-ratio: 4 / 3; }
.hd-ar-3x2   { aspect-ratio: 3 / 2; }
.hd-ar-16x9  { aspect-ratio: 16 / 9; }
.hd-ar-21x9  { aspect-ratio: 21 / 9; }
.hd-ar-9x16  { aspect-ratio: 9 / 16; }  /* Hochformat (Reels) */
.hd-ar-3x4   { aspect-ratio: 3 / 4; }
.hd-ar-gold  { aspect-ratio: 1.618 / 1; } /* Goldener Schnitt */

/* Wrapper-Hilfen für Elementor Video-Widget (iframe liegt in .elementor-wrapper) */
.hd-vid { aspect-ratio: 16 / 9; }
.hd-vid.hd-ar-3x2,
.hd-vid.hd-ar-4x3,
.hd-vid.hd-ar-1x1,
.hd-vid.hd-ar-21x9,
.hd-vid.hd-ar-9x16 { aspect-ratio: inherit; }

/* Skeletton / Platzhalter – wenn Inhalte später geladen werden */
.hd-skeleton {
  background: linear-gradient(90deg, #eef1f7 0%, #f6f8fc 50%, #eef1f7 100%);
  background-size: 200% 100%;
  animation: hd-shimmer 1.25s linear infinite;
  border-radius: 8px;
  min-height: 160px; /* bei Bedarf überschreiben */
}
@keyframes hd-shimmer { to { background-position: -200% 0; } }

/* Reservierte Infozeile oben (z. B. für Hinweise/Consent) – vermeidet DOM-Shift */
.hd-reserve-top {
  min-height: 48px;  /* Platz reservieren */
  display: flex; align-items: center;
}

/* Performante Animationen: nur Transform/Opacity (Motion-Reduce respektieren) */
.hd-anim-enter {
  opacity: 0;
  transform: translateY(12px);
  will-change: transform, opacity;
}
.hd-anim-enter.is-inview {
  opacity: 1;
  transform: translateY(0);
  transition: transform .36s ease, opacity .36s ease;
}
@media (prefers-reduced-motion: reduce) {
  .hd-anim-enter,
  .hd-anim-enter.is-inview {
    transition: none !important;
    transform: none !important;
  }
}

/* Nützliche Helfer */
.hd-rounded { border-radius: 16px; overflow: hidden; }
.hd-shadow  { box-shadow: 0 8px 30px rgba(16,17,24,.08); }