/* -----------------------------------------------------------------
 *  guarantee.css – Gewährleistungs- und GARAN-Label (VO (EU) 2025/1960)
 *  Bewusst NICHT im gebündelten stylesheet.css (cseo_css.php), sondern
 *  direkt aus includes/header.php eingebunden, damit Änderungen ohne
 *  Cache-Neuaufbau sofort wirken. Inter ist Pflichtschrift der Labels.
 * --------------------------------------------------------------- */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400; src: url(../fonds/inter/Inter-Regular.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 700 800; src: url(../fonds/inter/Inter-ExtraBold.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Inter-Regular'; font-style: normal; font-weight: 400; src: url(../fonds/inter/Inter-Regular.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Inter-ExtraBold'; font-style: normal; font-weight: 700 800; src: url(../fonds/inter/Inter-ExtraBold.woff2) format('woff2'); font-display: swap; }

/* ---------- Gewährleistung & GARAN-Garantielabel (VO (EU) 2025/1960) ---------- */
/* unterhalb des Kaufbuttons, vor den übrigen Kaufhinweisen */
.guarantee_buybox { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 14px 0 10px; clear: both; }
/* rechte Kaufspalte ist rechtsbündig */
.product_info_right .guarantee_buybox { justify-content: flex-end; }

/* kleines GARAN-Label (Kurzform) – Klick öffnet das vollständige Label */
.garan_badge { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; -webkit-appearance: none; appearance: none; }
.garan_badge_label { display: block; width: 230px; max-width: 100%; line-height: 0; }
.garan_badge_label svg { display: block; width: 100%; height: auto; }
.garan_badge--buybox .garan_badge_label { width: 130px; }
.garan_badge_text { display: flex; flex-direction: column; gap: 2px; font-size: 13px; line-height: 1.35; }
.garan_badge_caption { color: #333; }
.garan_badge_link { color: #034ea2; text-decoration: none; text-underline-offset: 2px; }
.garan_badge:hover .garan_badge_link { text-decoration: underline; }
.garan_badge--cart, .garan_badge--checkout { display: flex; width: -webkit-fit-content; width: fit-content; max-width: 100%; flex-direction: row; align-items: center; gap: 12px; margin: 8px 0 6px; }
.garan_badge--cart .garan_badge_label, .garan_badge--checkout .garan_badge_label { width: 150px; flex: 0 0 auto; }
.garan_badge--cart .garan_badge_text, .garan_badge--checkout .garan_badge_text { font-size: 12px; }

/* Button "Gesetzliche Gewährleistung" */
/* Link "ⓘ Gewährleistung" */
.legal_guarantee_btn { display: inline-flex; align-items: center; gap: 5px; margin: 0; padding: 0; border: 0; background: none; color: #034ea2; font: inherit; font-size: 12px; line-height: 1.3; white-space: nowrap; cursor: pointer; -webkit-appearance: none; appearance: none; }
.legal_guarantee_btn span { text-decoration: none; text-underline-offset: 2px; }
.legal_guarantee_btn_icon { flex: 0 0 auto; display: block; }
.legal_guarantee_btn:hover span { text-decoration: underline; }

.garan_badge:focus-visible, .legal_guarantee_btn:focus-visible, .guarantee_dialog_close:focus-visible { outline: 2px solid #034ea2; outline-offset: 3px; }

/* Overlay (natives <dialog>, Markup in index.html, Logik in plugins/js/guarantee.js)
   Inhalt nutzt die Bootstrap-Klassen von #modal (.modal-dialog/.modal-content/...), der Dialog selbst
   ist nur der unsichtbare, scrollbare Vollbild-Container wie .modal */
html.guarantee_dialog_open { overflow: hidden; }
.guarantee_dialog { position: fixed; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: transparent; color: inherit; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; }
.guarantee_dialog:focus { outline: none; }
.guarantee_dialog::backdrop { background: rgba(0, 0, 0, .14); }
.guarantee_dialog[open] .modal-dialog { animation: guarantee-dialog-in .3s ease-out; }
@keyframes guarantee-dialog-in { from { opacity: 0; transform: translate(0, -25%); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .guarantee_dialog[open] .modal-dialog { animation: none; } }
.guarantee_dialog_close:focus-visible { outline-offset: -6px; }
.guarantee_dialog_state { display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 220px; padding: 25px 0; font-size: 14px; color: #535d69; text-align: center; }
.guarantee_dialog_spinner { width: 26px; height: 26px; flex: 0 0 auto; border: 3px solid #d7e1ef; border-top-color: #034ea2; border-radius: 50%; animation: guarantee-spin .8s linear infinite; }
@keyframes guarantee-spin { to { transform: rotate(360deg); } }

.guarantee_overlay_label { line-height: 0; }
.guarantee_overlay_label svg, .guarantee_overlay_label img { display: block; width: 100%; height: auto; }
.guarantee_overlay_links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin: 0; font-size: 13px; line-height: 1.5; }
.guarantee_overlay_links a { color: #034ea2; text-decoration: underline; text-underline-offset: 2px; }
.guarantee_overlay_links a:hover { text-decoration-thickness: 2px; }
/* Linkleiste wie .modal-text-footer, über die Innenabstände von .modal-body hinweg */
.guarantee_overlay--legal .guarantee_overlay_links { margin: 15px -15px -15px; padding: 10px 20px; border-top: 1px solid #c7c7c7; background: #f5f5f5; }
.guarantee_overlay--garan .guarantee_overlay_label { margin: 0 0 15px; }
.guarantee_overlay--garan .guarantee_overlay_info { padding: 0; }
.guarantee_overlay_meta { margin: 0 0 15px; font-size: 13px; color: #535d69; }
.guarantee_overlay_meta strong { color: #231f20; }
.guarantee_overlay_note { margin: 0 0 12px; padding: 10px 12px; border-left: 3px solid #034ea2; background: #f3f7fc; font-size: 13px; line-height: 1.45; color: #333; }