/* ============================================================
   EU-GEWAEHRLEISTUNGSHINWEIS – VO (EU) 2025/1960
   Nur Container-Styles. Das offizielle Label selbst wird
   unveraendert dargestellt: kein Zuschnitt, keine Verzerrung,
   keine Filter/Effekte, Seitenverhaeltnis fix (A4).
   Quelle & Regeln: assets/legal/QUELLE.txt
   ============================================================ */

.eu-guarantee {
  padding: var(--space-4xl) 0;
  background: var(--bg-900);
  border-top: 1px solid var(--border);
}

.eu-guarantee-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 640px);
  gap: var(--space-3xl);
  align-items: start;
}

.eu-guarantee-text h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--text-100);
  margin: var(--space-sm) 0 var(--space-lg);
  line-height: 1.2;
}

.eu-guarantee-text p {
  font-size: 0.95rem;
  color: var(--text-300);
  line-height: 1.75;
  margin-bottom: var(--space-md);
}

.eu-guarantee-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  margin-top: var(--space-lg);
}

.eu-guarantee-links a,
.eu-guarantee-link {
  color: var(--gold-400);
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 0.9rem;
  word-break: break-word;
}

.eu-guarantee-links a:hover,
.eu-guarantee-links a:focus-visible,
.eu-guarantee-link:hover,
.eu-guarantee-link:focus-visible {
  color: var(--text-100);
}

/* ── Label-Rahmen ─────────────────────────────────────────── */
.eu-guarantee-figure {
  margin: 0;
  width: 100%;
  max-width: 640px;
}

/* Scroll-Container: auf schmalen Displays bleibt das Label in
   lesbarer Mindestgroesse und wird horizontal scrollbar statt
   auf unleserliche Groesse verkleinert (Leitfaden Kap. 2.3:
   "legible at default display size"). */
.eu-guarantee-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: #ffffff;
  border: 1px solid var(--border-2);
}

.eu-guarantee-scroll:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 2px;
}

.eu-guarantee-img {
  display: block;
  width: 100%;
  min-width: 600px;
  max-width: none;
  height: auto;
  aspect-ratio: 1654 / 2339;
  background: #ffffff;
}

.eu-guarantee-hint {
  display: none;
  margin-top: var(--space-sm);
  font-size: 0.8rem;
  color: var(--text-400);
}

/* ── Checkout-Hinweis (reiner Text-Link, keine Checkbox) ──── */
.checkout-guarantee-note {
  margin: calc(-1 * var(--space-sm)) 0 var(--space-lg);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-300);
}

.checkout-guarantee-note a,
.checkout-info-note a {
  color: var(--gold-400);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Checkout: Datenschutz-/Widerrufshinweis (Text statt Checkbox) ── */
.checkout-info-note {
  margin: calc(-1 * var(--space-sm)) 0 var(--space-md);
  font-size: 0.8rem;
  line-height: 1.5;
  color: var(--text-300);
}

/* ── Checkout: Label ganz unten, kompakt auf Modalbreite ─────
   Vollstaendig + unveraendert (kein Zuschnitt, Seitenverhaeltnis
   fix), lediglich auf die Breite des Checkout-Fensters skaliert.
   Klick oeffnet die Grossansicht (gewaehrleistung.html). */
.checkout-guarantee-label {
  margin: var(--space-xl) 0 0;
  padding-top: var(--space-lg);
  border-top: 1px solid var(--border);
}

.checkout-guarantee-label__frame {
  display: block;
  background: #ffffff;
  border: 1px solid var(--border-2);
}

.checkout-guarantee-label__frame:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 2px;
}

.checkout-guarantee-label__img {
  display: block;
  width: 100%;
  min-width: 0;
  max-width: 100%;
  height: auto;
  aspect-ratio: 1654 / 2339;
  background: #ffffff;
}

.checkout-guarantee-label__caption {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: var(--space-sm);
  font-size: 0.75rem;
  color: var(--text-400);
}

.checkout-guarantee-label__caption a {
  color: var(--gold-400);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* Vorbestehender Layout-Fehler: Das Lieferland-Select nahm die Breite
   der laengsten Option an (521px) und machte das Checkout-Fenster auf
   allen Viewports horizontal scrollbar. Rein optisch, Funktion
   unveraendert. Liegt hier, weil diese Datei auf beiden Checkout-Seiten
   (index.html, en/index.html) geladen wird. */
#checkout-modal .checkout-country-select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* Schmale Displays: Label randlos ueber die volle Modalbreite
   (hebt das Innen-Padding von .modal-body auf), damit es so gross
   wie moeglich dargestellt wird. */
@media (max-width: 600px) {
  .modal-body .checkout-guarantee-label {
    margin-left: calc(-1 * var(--space-xl));
    margin-right: calc(-1 * var(--space-xl));
  }
  .modal-body .checkout-guarantee-label__frame {
    border-left: 0;
    border-right: 0;
  }
}

/* ── Footer: kompakter Verweis (nur index.html) ───────────── */
.footer-guarantee {
  display: flex;
  align-items: flex-start;
  gap: var(--space-lg);
  padding: var(--space-lg) 0;
  margin-bottom: var(--space-lg);
  border-top: 1px solid var(--border);
  scroll-margin-top: 96px;
}

.footer-guarantee__thumb {
  flex: 0 0 auto;
  display: block;
  width: 84px;
  background: #ffffff;
  border: 1px solid var(--border-2);
}

.footer-guarantee__thumb:focus-visible {
  outline: 2px solid var(--gold-400);
  outline-offset: 2px;
}

.footer-guarantee__thumb img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1654 / 2339;
}

.footer-guarantee__text .footer-col-title {
  margin-bottom: var(--space-sm);
}

.footer-guarantee__text p {
  font-size: 0.85rem;
  color: var(--text-400);
  line-height: 1.7;
  margin: 0 0 var(--space-xs);
}

.footer-guarantee__text a {
  color: var(--gold-400);
  text-decoration: underline;
  text-underline-offset: 3px;
  word-break: break-word;
}

.footer-guarantee__text a:hover,
.footer-guarantee__text a:focus-visible {
  color: var(--text-100);
}

/* ── Eigene Seite (gewaehrleistung.html) ─────────────────── */
.legal-card .eu-guarantee-figure {
  max-width: 760px;
  margin: var(--space-lg) auto;
}

.eu-guarantee-transcript {
  margin-top: var(--space-xl);
  border: 1px solid var(--border);
  padding: var(--space-md) var(--space-lg);
}

.eu-guarantee-transcript summary {
  cursor: pointer;
  color: var(--text-200);
  font-weight: 600;
  font-size: 0.9rem;
}

.eu-guarantee-transcript[open] summary {
  margin-bottom: var(--space-md);
}

.eu-guarantee-transcript ul,
.eu-guarantee-transcript ol {
  list-style: disc;
  padding-left: 1.4rem;
  margin: var(--space-sm) 0 var(--space-md);
}

.eu-guarantee-transcript ol {
  list-style: decimal;
}

/* ── Off-Canvas-Warenkorb: Schatten nur im geoeffneten Zustand ──
   Der geschlossene Warenkorb liegt rechts ausserhalb des Viewports;
   sein box-shadow ragte in den Bildschirm und legte einen grauen
   Verlauf ueber das Label (unzulaessiger "Effekt"). Rein kosmetisch,
   Warenkorb-Funktion unveraendert. */
#cart-sidebar:not(.open) {
  box-shadow: none;
}

/* ── Produktkarte: 2er-Set-Zeile (Chain Wax) ─────────────────
   Liegt hier, weil diese Datei versioniert auf index.html und
   en/index.html geladen wird. */
.product-set-offer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  margin-top: var(--space-md);
  padding: 10px 12px;
  border: 1px dashed var(--gold-400);
  border-radius: var(--radius-md);
  font-size: 0.8rem;
  color: var(--text-200);
  line-height: 1.4;
}

.product-set-offer small {
  display: block;
  font-size: 0.7rem;
  color: var(--text-400);
}

.product-set-offer .btn-add-to-cart--set {
  width: auto;
  flex: 0 0 auto;
  padding: 8px 14px;
}

/* ── Responsive ───────────────────────────────────────────── */
@media (max-width: 1100px) {
  .eu-guarantee-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-xl);
  }
}

@media (max-width: 680px) {
  .eu-guarantee {
    padding: var(--space-3xl) 0;
  }
  .eu-guarantee-hint {
    display: block;
  }
}

@media print {
  .eu-guarantee-scroll { overflow: visible; border: none; }
  .eu-guarantee-img { min-width: 0; }
  .eu-guarantee-hint { display: none; }
}