/* ─── EU-Gewaehrleistungslabel: Panel (DVO (EU) 2025/1960) ──────────── Geoeffnet vom Button "Gesetzliche Gewaehrleistung" in der Fuss-Linkgruppe "Rechtliches" (boxes/box_linkgroups.tpl) auf jeder Seite mit Footer-Boxen; Markup in snippets/sd24-warranty-hint.tpl (eingebunden in layout/footer.tpl). Liegt in , weil das Panel erst auf Klick sichtbar wird. */ /* Panel: Bootstrap-Modal als Slide-in von rechts (Breite/Optik wie Sidebasket, Tokens --sd-oc-*). Im Snackys-Template ist .modal-dialog der Vollbild-Dimmer (flex, zentriert) und .modal-content die Karte - deshalb wird hier die KARTE an den rechten Rand geschoben und animiert, der Dialog bleibt Dimmer. Bootstrap liefert Backdrop, ESC, Fokus. [data-page] (steht auf ) nur fuer die Spezifitaet gegen die Snackys-Modal-Basis. */ [data-page] .modal.fade.sd-warranty-modal .modal-dialog { justify-content: flex-end; align-items: stretch; margin: 0; padding: 0; background: var(--sd-oc-overlay); transform: none; transition: none; } /* Breiter als der Sidebasket (460px), damit die EU-Grafik lesbar bleibt */ [data-page] .modal.sd-warranty-modal .modal-content { display: flex; flex-direction: column; width: min(640px, 100vw); max-width: 100vw; min-width: 0; height: 100%; max-height: none; border: 0; border-radius: 0; box-shadow: var(--sd-shadow-modal); transform: translateX(100%); transition: transform .35s ease; } [data-page] .modal.sd-warranty-modal.show .modal-content { transform: none; } .sd-warranty-modal .modal-content .modal-header { align-items: center; padding: 1rem 1.25rem; border-bottom: var(--sd-border-slim) solid var(--sd-border-faint); } .sd-warranty-modal .modal-title { margin: 0; font-family: var(--sd-font-heading); font-size: var(--sd-h5); font-weight: var(--sd-heading-font-weight); letter-spacing: var(--sd-tracking-tight); color: var(--sd-text); } .sd-warranty-modal .sd-warranty-modal__close { width: 36px; height: 36px; margin: 0 0 0 auto; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--sd-radius-pill); background: var(--sd-bg-light); border: var(--sd-border-slim) solid var(--sd-border-faint); color: var(--sd-text); opacity: 1; cursor: pointer; transition: var(--sd-transition-base); } .sd-warranty-modal .sd-warranty-modal__close:hover, .sd-warranty-modal .sd-warranty-modal__close:focus-visible { background: var(--sd-bg-subtle); } .sd-warranty-modal .sd-warranty-modal__close svg { width: 16px; height: 16px; } /* Body fuellt die Karte bis unten und scrollt dort - Snackys (modals.css) kappt .modal-body sonst auf 65vh, darunter bleibt weisser Leerraum. */ .sd-warranty-modal .modal-content .modal-body { flex: 1 1 auto; min-height: 0; max-height: none; padding: 1.25rem; overflow-y: auto; -webkit-overflow-scrolling: touch; } .sd-warranty-modal__intro { margin: 0 0 1rem; font-size: var(--sd-text-sm); line-height: var(--sd-leading-normal); color: var(--sd-muted); } /* Grafik immer komplett und im Original-Seitenverhaeltnis (1654x2339) zeigen - !important gegen etwaige Snackys-/Plugin-Regeln fuer .modal-body img. */ .sd-warranty-modal .modal-body img { display: block; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: 1654 / 2339; object-fit: contain !important; margin: 0; border: var(--sd-border-slim) solid var(--sd-border-faint); border-radius: var(--sd-radius-md); } .sd-warranty-modal__pdf { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; font-size: var(--sd-text-sm); font-weight: 600; color: var(--sd-text); text-decoration: underline; text-underline-offset: 0.15em; } .sd-warranty-modal__pdf svg { width: 18px; height: 18px; flex: 0 0 auto; } /* DE/EN-Umschalter im Panel (segmentierte Pille) */ .sd-warranty-modal__lang { display: inline-flex; margin: 0 0 1rem; padding: 3px; border: var(--sd-border-slim) solid var(--sd-border-faint); border-radius: var(--sd-radius-pill); background: var(--sd-bg-light); } .sd-warranty-modal__lang-btn { padding: 0.35rem 0.9rem; border: 0; border-radius: var(--sd-radius-pill); background: transparent; font-size: var(--sd-text-sm); font-weight: 600; color: var(--sd-muted); cursor: pointer; transition: var(--sd-transition-base); } .sd-warranty-modal__lang-btn.is-active { background: var(--sd-text-inverse); color: var(--sd-text); box-shadow: var(--sd-shadow-overlay); }