/* H+P Gewaehrleistungshinweis (EU). Farben aus den Bootstrap-Variablen des Themes.
   Die amtliche Grafik wird nie ueberdeckt, beschnitten oder verzerrt. */

/* Alter Weg: ThemeWare "Individuelle Ankuendigung" mit dem Label als grossem gelbem Kasten im
   Checkout. Dieses Plugin ersetzt ihn; ist das Plugin aus, erscheint der Kasten wieder. */
.twt-custom-announcement:has(img[src*="gewaehrleistungslabel"]) { display: none !important; }

/* --- Kopfleiste (ThemeWare-USP-Leiste), ab 768 px ------------------------------------------ */
.twt-usp-bar .twt-usp-bar-item.hp-gw-usp { display: none; }
.hp-gw-usp--ohne-leiste { display: none; justify-content: flex-end; align-items: center; gap: .25rem;
    padding: .25rem 0; font-size: .8125rem; }
.hp-gw-usp--ohne-leiste .icon { width: 13px; height: 13px; }
@media (min-width: 768px) {
    .twt-usp-bar .twt-usp-bar-item.hp-gw-usp,
    .hp-gw-usp--ohne-leiste { display: flex; }
}
/* Leiste ohne eigene ThemeWare-Eintraege (Live seit 24.09.): der Link steht allein - dann
   rechtsbuendig und auch auf dem Handy, dort ist Platz. */
.twt-usp-bar .twt-usp-bar-items:has(> .hp-gw-usp:only-child) { justify-content: flex-end; }
.twt-usp-bar .twt-usp-bar-items > .twt-usp-bar-item.hp-gw-usp:only-child { display: flex; }
@media (max-width: 767.98px) {
    .twt-usp-bar .twt-usp-bar-items:has(> .hp-gw-usp:only-child) { justify-content: center; }
}
.hp-gw-usp[hidden] { display: none !important; }

/* --- Mobilmenue ---------------------------------------------------------------------------- */
.hp-gw-menue { padding: .75rem 1rem; border-bottom: 1px solid var(--bs-border-color, #dee2e6); }
.hp-gw-menue-link { display: flex; align-items: center; gap: .5rem; color: inherit; font-weight: 600;
    text-decoration: none; }
.hp-gw-menue-link:hover { color: var(--bs-primary, #009ee3); }
.hp-gw-menue-link .icon { color: var(--bs-primary, #009ee3); }

/* --- Die sichtbare Grafik (Checkout-Karte und zentrale Seite) ------------------------------ */
.hp-gw-grafik { max-width: 520px; margin: 0 auto; }
.hp-gw-grafik-bild { display: block; width: 100%; height: auto; cursor: zoom-in; }
.hp-gw-grafik-fuss { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;
    gap: .25rem 1rem; margin-top: .5rem; font-size: .875rem; }
.hp-gw-vergroessern { display: inline-flex; align-items: center; gap: .375rem; padding: 0; font-size: inherit; }
.hp-gw-checkout { scroll-margin-top: 7rem; }
/* Als eigenes Element in .checkout-container (Skript in confirm/index.html.twig). Reihenfolge der
   Shop-CSS: Hauptteil 0, Zusammenfassung 0, Zusatzblock (Kommissionsnummer) 2.
   Unter 992 px: order 0 -> direkt nach dem Hauptteil, vor Zusammenfassung und Button.
   Ab 992 px: order 3 -> ganz unten in der linken Spalte, nach dem Zusatzblock.
   Doppelte Klasse: schlaegt ".checkout .checkout-container > *" (width: 100%) der Shop-CSS. */
.checkout .checkout-container > .hp-gw-checkout--eigen.hp-gw-checkout { order: 0; margin-bottom: 1.5rem; }
@media (min-width: 992px) {
    .checkout .checkout-container > .hp-gw-checkout--eigen.hp-gw-checkout { order: 3; flex: 0 0 auto; width: 66.66666667%; margin-left: 0; }
}

/* Zentrale Seite */
.hp-gw-seite { max-width: 720px; margin: 1.5rem auto 3rem; }
.hp-gw-seite .hp-gw-grafik { max-width: 640px; }
.hp-gw-seite-einleitung { margin-bottom: 1.25rem; }

/* --- Satz ueber dem Bestellbutton (nur Desktop: dort stehen Button und Grafik nebeneinander) - */
.hp-gw-verweis { display: none; align-items: flex-start; gap: .5rem; margin: 0 0 .75rem; padding: .5rem .75rem;
    border-left: 3px solid var(--bs-primary, #009ee3); background: var(--bs-tertiary-bg, #f8f9fa);
    color: var(--bs-body-color, #212529); font-size: .875rem; line-height: 1.35; text-decoration: none; }
.hp-gw-verweis:hover { color: var(--bs-body-color, #212529); text-decoration: underline; }
.hp-gw-verweis .icon { flex: 0 0 auto; margin-top: .1rem; color: var(--bs-primary, #009ee3); }
@media (min-width: 992px) {
    .hp-gw-verweis { display: flex; }
}

/* --- Grossansicht --------------------------------------------------------------------------- */
.hp-gw-dialog { max-width: 720px; }
.hp-gw-titel { margin: 0; font-size: 1.125rem; }
.hp-gw-koerper { overflow-x: auto; text-align: center; }
.hp-gw-bild { display: block; width: 100%; margin: 0 auto; padding: 0; border: 0; background: none; cursor: zoom-in; }
.hp-gw-bild img { display: block; width: 100%; height: auto; margin: 0 auto; }
.hp-gw-bild.is-gross { width: 200%; max-width: none; cursor: zoom-out; }
.hp-gw-zoomhinweis { margin: .5rem 0 0; font-size: .8125rem; color: var(--bs-secondary-color, #6c757d); }
.hp-gw-fuss { flex-wrap: wrap; justify-content: space-between; gap: .5rem; }
.hp-gw-eu-link { font-size: .875rem; }
@media (max-width: 575.98px) {
    .hp-gw-schliessen { width: 100%; }
}
/* Desktop/Tablet: die ganze Mitteilung ohne Scrollen, aber nie kleiner als gut lesbar
   (mind. 42rem hoch ~ 475 px breit); Klick vergroessert zusaetzlich. */
@media (min-width: 576px) {
    .hp-gw-bild img { width: auto; max-width: 100%; max-height: max(42rem, calc(100dvh - 12rem)); }
    .hp-gw-bild.is-gross { width: 160%; }
    .hp-gw-bild.is-gross img { width: 100%; max-height: none; }
    .hp-gw-zoomhinweis { display: none; }
}