/*
 * tabslGarantielabel — EU-Gewaehrleistungslabel
 *
 * Wichtig: Die offizielle Grafik darf NICHT umgefaerbt oder mit Filtern/Effekten
 * veraendert werden (DVO (EU) 2025/1960). Daher KEIN filter/opacity/mix-blend auf
 * .tabslgl-svg — nur proportionale Groessenbegrenzung ist erlaubt.
 */

.tabslgl-notice {
    margin: 1rem 0;
    max-width: 480px;
}

/* Trigger: Text-Link, oeffnet die Mitteilung als Modal (JS) bzw. im neuen Tab
   (ohne JS, Fallback). */
.tabslgl-trigger {
    cursor: pointer;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem 0;
    text-decoration: none;
    color: inherit;
}
.tabslgl-trigger::after {
    content: "\25B8"; /* ▸ */
}

.tabslgl-link {
    display: inline-block;
    margin-top: .5rem;
    text-decoration: underline;
}

.tabslgl-trigger:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}

/* Ausloeser als kleine Vorschau-Grafik (Setting sNoticeTrigger = graphic).
   Nur proportionale Skalierung — Grafik bleibt inhaltlich unveraendert. */
.tabslgl-trigger--graphic {
    display: inline-block;
    padding: 0;
}
.tabslgl-trigger--graphic::after {
    content: none;
}
.tabslgl-trigger-img {
    display: block;
    width: auto;
    max-width: 200px;
    height: auto;
}

/* --- Modal/Lightbox fuer die vollstaendige Mitteilung ------------------- */
/* Die offizielle Grafik/PDF bleibt inhaltlich unveraendert (DVO 2025/1960);
   das Modal skaliert nur die Darstellung. */
.tabslgl-modal {
    width: min(92vw, 820px);
    max-width: 820px;
    height: min(90vh, 1160px);
    padding: 0;
    border: none;
    border-radius: 10px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .35);
    overflow: hidden;
    background: #fff;
}
.tabslgl-modal::backdrop {
    background: rgba(0, 0, 0, .6);
}
.tabslgl-modal-close {
    position: absolute;
    top: .5rem;
    right: .5rem;
    width: 2.2rem;
    height: 2.2rem;
    border: none;
    border-radius: 50%;
    background: rgba(0, 0, 0, .6);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 2;
}
.tabslgl-modal-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}
.tabslgl-modal-frame {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
}
.tabslgl-modal-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: #fff;
}

/* --- v1.1 GARAN-Garantielabel ------------------------------------------- */
/* Auch hier gilt: KEINE Farb-/Filter-Aenderung an der offiziellen Grafik. */

/* Pflicht-Schriftart Inter (SIL OFL) fuer die editierbaren GARAN-Felder.
   Font-Dateien unter out/fonts/ ablegen (siehe out/fonts/README.md). */
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('../../fonts/Inter-Regular.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('../../fonts/Inter-SemiBold.woff2') format('woff2');
}
@font-face {
    font-family: 'Inter';
    font-style: normal;
    font-weight: 800;
    font-display: swap;
    src: url('../../fonts/Inter-ExtraBold.woff2') format('woff2');
}

.tabslgl-garan {
    margin: 1rem 0;
    max-width: 480px;
}

.tabslgl-garan-svg svg,
.tabslgl-garan-panel svg,
.tabslgl-garan-summary svg {
    display: block;
    width: 100%;
    max-width: 320px;
    height: auto;
}

/* Nested-Badge im Listing: kompakt, klappt zum vollen Label auf */
.tabslgl-garan--nested {
    max-width: 220px;
}
.tabslgl-garan--nested > .tabslgl-garan-summary {
    cursor: pointer;
    list-style: none;
}
.tabslgl-garan--nested > .tabslgl-garan-summary::-webkit-details-marker {
    display: none;
}
.tabslgl-garan--nested > .tabslgl-garan-summary svg {
    max-width: 180px;
}
.tabslgl-garan-panel {
    margin-top: .5rem;
}

.tabslgl-garan-link,
.tabslgl-garan-terms {
    display: inline-block;
    margin-top: .35rem;
    margin-right: 1rem;
    text-decoration: underline;
}

.tabslgl-garan--nested > .tabslgl-garan-summary:focus-visible {
    outline: 2px solid currentColor;
    outline-offset: 2px;
}