/* Harmonisierte EU-Mitteilung über die gesetzliche Gewährleistung
   (lut/partials/gewaehrleistung.html und gewaehrleistung_link.html).
   Die Grafik selbst bleibt unverändert, hier stehen nur Rahmen und Link. */

.gw-link {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .2em;
}

.gw-link__schild {
    flex: none;
}

.gw-link:focus-visible,
.gw-dialog a:focus-visible,
.gw-dialog__schliessen:focus-visible {
    outline: 3px solid #039;
    outline-offset: 2px;
}

/* Bestellübersicht: hervorgehobener Kasten mit dem Link */
.gw-hinweis {
    border: 2px solid #039;
    border-radius: 4px;
    padding: .75rem 1rem;
    margin: 0 0 1.25rem;
}

.gw-hinweis__titel {
    margin-bottom: .5rem;
}

/* Produktseite und Fußzeile */
.gw-produkt {
    margin: 1rem 0;
}

.gw-fuss {
    margin: 1rem 0 0;
}

.sf .gw-link,
.footer .gw-link {
    color: inherit;
}

/* Dialog: Mitteilung in lesbarer Größe. Das alte Theme (template.css)
   setzt dialog auf display: block, geschlossen bleibt er hier verborgen. */
.gw-dialog:not([open]) {
    display: none;
}

.gw-dialog {
    width: min(820px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 0;
    border-radius: 4px;
    overflow: auto;
}

.gw-dialog::backdrop {
    background: rgba(0, 0, 0, .6);
}

.gw-dialog__kopf {
    position: sticky;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .75rem 1rem;
    background: #fff;
    border-bottom: 1px solid #ddd;
}

.gw-dialog__titel {
    margin: 0;
    font-size: 1.15rem;
}

.gw-dialog__kopf form {
    margin: 0;
}

.gw-dialog__schliessen {
    min-width: 44px;
    min-height: 44px;
    border: 1px solid #999;
    border-radius: 4px;
    background: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.gw-dialog__mitteilung {
    margin: 0;
    padding: 1rem;
}

.gw-dialog__mitteilung img {
    display: block;
    width: 100%;
    height: auto;
}

/* Die Mitteilung muss in der Standardgröße lesbar sein (Leitfaden der
   Kommission, Abschnitt 2.3): auf schmalen Bildschirmen nicht schmaler als
   640 px, dafür seitlich scrollbar (auch per Tastatur, tabindex am figure) */
@media (max-width: 700px) {
    .gw-dialog__mitteilung {
        overflow-x: auto;
        padding: .5rem;
    }

    .gw-dialog__mitteilung img {
        width: 640px;
        max-width: none;
    }
}

.gw-dialog__links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin: 0;
    padding: 0 1rem 1rem;
}

/* nur für Screenreader: Wortlaut der Mitteilung */
.gw-unsichtbar {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}