/* P1.45.0.10.8.17.4.62 – einheitlicher Produkt-Hero-Vertrag
 * Ziel: Bild, Produktidentität und Preisrail bleiben auf jeder Produktseite
 * geometrisch getrennt. Keine Aspect-Ratio-Zwangsbox, keine negativen Offsets,
 * kein Überdecken. Desktop, Tablet und Mobil verwenden denselben Komponenten-
 * vertrag mit ausschließlich breakpointgerechter Anordnung.
 */

body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] {
  display: grid !important;
  align-items: stretch !important;
  isolation: isolate !important;
  overflow: visible !important;
  gap: clamp(16px, 1.55vw, 26px) !important;
}

body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-hero-media,
body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-decision-identity,
body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-premium-price-rail {
  position: relative !important;
  inset: auto !important;
  margin: 0 !important;
  min-width: 0 !important;
  max-width: none !important;
  transform: none !important;
  align-self: stretch !important;
  box-sizing: border-box !important;
}

/* Der historische 1:1-Zwang auf .detail-image war die Ursache für die
 * scheinbar frei schwebende weiße Bildbox bei hohen Hero-Zeilen. */
body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-hero-media {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  aspect-ratio: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  z-index: 1 !important;
  background: radial-gradient(circle at 50% 47%, #f8fbfd 0%, #fbfdff 54%, #fff 100%) !important;
}

body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-hero-media img,
body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-hero-media picture,
body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-hero-media picture img {
  position: static !important;
  inset: auto !important;
  margin: auto !important;
  transform: none !important;
}

body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-hero-media img,
body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-hero-media picture img {
  display: block !important;
  width: auto !important;
  height: auto !important;
  max-width: min(82%, 250px) !important;
  max-height: 300px !important;
  object-fit: contain !important;
  object-position: 50% 50% !important;
  filter: drop-shadow(0 10px 14px rgba(20,48,82,.075)) !important;
}

body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-decision-identity {
  z-index: 2 !important;
  width: 100% !important;
  min-height: 100% !important;
}

body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-premium-price-rail {
  z-index: 3 !important;
  width: 100% !important;
  min-height: 100% !important;
}

/* Server-seitig gekennzeichneter Fallback: gleiche Karte, aber ohne den
 * Eindruck einer aktuellen Kaufempfehlung. */
body.product-page .product-premium-price-rail.is-recorded-fallback {
  border-color: rgba(177,121,0,.24) !important;
  background: linear-gradient(180deg, #fff 0%, #fffdf7 100%) !important;
}
body.product-page .product-premium-price-rail .product-hero-freshness-state {
  display: inline-flex !important;
  align-items: center !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin: 0 0 10px !important;
  padding: 4px 8px !important;
  border: 1px solid rgba(177,121,0,.22) !important;
  border-radius: 999px !important;
  background: rgba(255,247,225,.76) !important;
  color: #74540b !important;
  font-size: .71rem !important;
  font-weight: 760 !important;
  line-height: 1.25 !important;
}
body.product-page .product-premium-price-rail .product-hero-recorded-comparison {
  display: grid !important;
  gap: 2px !important;
  margin: 0 0 14px !important;
  padding: 10px 0 !important;
  border-top: 1px solid rgba(31,55,106,.09) !important;
  border-bottom: 1px solid rgba(31,55,106,.09) !important;
}
body.product-page .product-premium-price-rail .product-hero-recorded-comparison span,
body.product-page .product-premium-price-rail .product-hero-recorded-comparison small {
  color: #66798c !important;
  font-size: .7rem !important;
  line-height: 1.35 !important;
}
body.product-page .product-premium-price-rail .product-hero-recorded-comparison strong {
  color: #173a63 !important;
  font-size: 1rem !important;
  font-variant-numeric: tabular-nums !important;
}
body.product-page .product-premium-price-rail .product-hero-provider-count-detail {
  display: block !important;
  margin-top: 2px !important;
  color: #6d7f91 !important;
  font-size: .7rem !important;
  line-height: 1.35 !important;
}

/* Desktop und Tablet Landscape: drei echte Spalten. */
@media (min-width: 901px) {
  body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] {
    grid-template-columns: minmax(210px, .78fr) minmax(0, 1.58fr) minmax(235px, .74fr) !important;
  }
  body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-hero-media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 330px !important;
    padding: clamp(24px, 2.25vw, 34px) !important;
  }
  body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-decision-identity {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-premium-price-rail {
    grid-column: 3 !important;
    grid-row: 1 !important;
  }
}

@media (min-width: 1180px) {
  body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] {
    grid-template-columns: minmax(245px, .84fr) minmax(0, 1.62fr) minmax(250px, .72fr) !important;
  }
  body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-hero-media img,
  body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-hero-media picture img {
    max-width: min(84%, 270px) !important;
    max-height: 320px !important;
  }
}

/* Tablet portrait: Produktbild + Identität nebeneinander, Preisrail darunter.
 * Das verhindert eine gequetschte dritte Spalte und bewahrt trotzdem dieselbe
 * visuelle Hierarchie. */
@media (min-width: 721px) and (max-width: 900px) {
  body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] {
    grid-template-columns: minmax(190px, 30%) minmax(0, 1fr) !important;
    gap: 16px !important;
  }
  body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-hero-media {
    grid-column: 1 !important;
    grid-row: 1 !important;
    min-height: 290px !important;
    padding: 22px !important;
  }
  body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-decision-identity {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }
  body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-premium-price-rail {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    min-height: 0 !important;
  }
  body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-hero-media img,
  body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-hero-media picture img {
    max-width: min(78%, 210px) !important;
    max-height: 230px !important;
  }
}

/* Mobil: dieselben drei Bausteine, sauber untereinander und ohne horizontales
 * Überlaufen. */
@media (max-width: 720px) {
  body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 12px !important;
    border-radius: 17px !important;
  }
  body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-hero-media,
  body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-decision-identity,
  body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-premium-price-rail {
    grid-column: 1 !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
  }
  body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-hero-media {
    grid-row: 1 !important;
    height: auto !important;
    min-height: 210px !important;
    padding: 20px !important;
  }
  body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-decision-identity {
    grid-row: 2 !important;
  }
  body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-premium-price-rail {
    grid-row: 3 !important;
  }
  body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-hero-media img,
  body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-hero-media picture img {
    max-width: min(66%, 190px) !important;
    max-height: 185px !important;
  }
}

@media (max-width: 430px) {
  body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] {
    gap: 10px !important;
  }
  body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] > .product-hero-media {
    min-height: 192px !important;
    padding: 18px !important;
  }
}

html[data-aw-contrast="dark"] body.product-page .product-premium-price-rail.is-recorded-fallback {
  border-color: rgba(241,184,59,.42) !important;
  background: #132235 !important;
}

@media (forced-colors: active) {
  body.product-page .product-premium-price-rail.is-recorded-fallback,
  body.product-page .product-premium-price-rail .product-hero-freshness-state {
    border-color: CanvasText !important;
    background: Canvas !important;
    color: CanvasText !important;
  }
}


/* .61: vollständiger Produktname im Hero auf allen Breakpoints. */
body.product-page .product-decision-hero.product-premium-hero[data-premium-product-hero] .detail-title {
  display: block !important;
  -webkit-line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  max-height: none !important;
  overflow: visible !important;
  text-overflow: clip !important;
  white-space: normal !important;
}

/* .62 – AVP/UVP direkt an der Preisentscheidung. */
body.product-page .product-hero-reference-price {
  display: flex !important;
  align-items: baseline !important;
  justify-content: space-between !important;
  gap: 10px !important;
  margin: 2px 0 10px !important;
  color: #607287 !important;
  font-size: .82rem !important;
  line-height: 1.35 !important;
}
body.product-page .product-hero-reference-price span {
  display: inline-flex !important;
  align-items: baseline !important;
  gap: 5px !important;
  min-width: 0 !important;
}
body.product-page .product-hero-reference-price strong {
  color: #52677e !important;
  font-size: .74rem !important;
  letter-spacing: .02em !important;
}
body.product-page .product-hero-reference-price del {
  text-decoration-thickness: 1px !important;
  text-decoration-color: rgba(69,91,116,.72) !important;
}
body.product-page .product-hero-reference-price b {
  flex: 0 0 auto !important;
  padding: 3px 7px !important;
  border-radius: 999px !important;
  background: #edf8f1 !important;
  color: #087a43 !important;
  font-size: .76rem !important;
}
body.product-page .product-hero-reference-price sup,
body.product-page .product-hero-contract-note sup,
body.product-page .offer-price-checked sup,
body.product-page .product-hero-recorded-comparison sup,
body.product-page .price-alert-current sup,
.product-reference-price sup,
.product-saving-badge sup,
.portal-footer-legend sup {
  position: relative !important;
  top: -.25em !important;
  margin-left: 1px !important;
  font-size: .68em !important;
  line-height: 0 !important;
  font-weight: 780 !important;
  text-decoration: none !important;
}

/* .62 – ein einziger, ruhiger Hinweis beim Recorded-Fallback. */
body.product-page .product-hero-offer.is-recorded-fallback .product-hero-contract-note {
  margin-top: 12px !important;
  color: #64788d !important;
  font-size: .75rem !important;
  line-height: 1.45 !important;
}
body.product-page .product-hero-offer.is-recorded-fallback .product-premium-compare-cta {
  margin-top: 14px !important;
}

/* .62 – Preisstand je Angebot wieder sichtbar. */
body.product-page .offer-price-checked {
  display: flex !important;
  align-items: baseline !important;
  justify-content: flex-end !important;
  gap: 2px !important;
  margin: 6px 0 0 !important;
  color: #6b7f92 !important;
  font-size: .7rem !important;
  line-height: 1.35 !important;
  font-variant-numeric: tabular-nums !important;
}

/* Der alte Trennpunkt gehört nicht in eigenständige Versand-/MBW-Chips. */
body.product-page .offer-facts {
  gap: 6px 8px !important;
}
body.product-page .offer-facts span + span::before {
  content: none !important;
  display: none !important;
  margin: 0 !important;
}

/* .62 – globale, dezente Preislegende im Footer. */
.portal-footer-legend {
  display: grid !important;
  gap: 5px !important;
  margin-top: 14px !important;
  padding-top: 13px !important;
  border-top: 1px solid rgba(255,255,255,.13) !important;
  color: rgba(255,255,255,.78) !important;
}
.portal-footer-legend p {
  margin: 0 !important;
  max-width: 118ch !important;
  font-size: .72rem !important;
  line-height: 1.48 !important;
}
.portal-footer-legend sup {
  color: #fff !important;
}

@media (max-width: 720px) {
  body.product-page .product-hero-reference-price {
    flex-wrap: wrap !important;
  }
  body.product-page .offer-price-checked {
    justify-content: flex-start !important;
  }
  .portal-footer-legend {
    gap: 7px !important;
  }
}