/* eit_eulabel - EU-Mitteilung über das gesetzliche Gewährleistungsrecht und GARAN-Label.

   Gestaltbar ist nur der Auslöser-Satz und der Kasten vor dem Bestellbutton - über CSS-Variablen, die das
   Backend setzt oder die ein Template selbst definiert (siehe README). Die amtlichen Grafiken bleiben
   unberührt und werden gegen Template-Stile abgeschottet: Der Leitfaden der Kommission verbietet Filter,
   Farbänderungen und Verzerrung.

   Standard ohne Variablen: Der Auslöser nimmt die TEXTfarbe seiner Umgebung, nicht die Linkfarbe des
   Templates. Linkfarben sind für helle Flächen gemacht; in dunklen Fußzeilen (Stoffekontor) wäre der Satz
   sonst kaum lesbar, während der umgebende Text dort bereits hell ist.

   Variablen (alle optional):
     --eit-eu-farbe, --eit-eu-farbe-hover, --eit-eu-groesse, --eit-eu-gewicht,
     --eit-eu-linie (underline | none), --eit-eu-linie-hover, --eit-eu-ausrichtung, --eit-eu-abstand
     je Ort: --eit-eu-{fuss|kopf|artikel|warenkorb}-farbe, -ausrichtung, -abstand
     Kasten Kasse: --eit-eu-kasse-hintergrund, -text, -rand, -akzent, -farbe, -gewicht, -radius, -ausrichtung
     Mini-Label: --eit-garan-hoehe-{artikel|liste|warenkorb|kasse} */

.eit-eu-hinweis {
    margin: var(--eit-eu-abstand, .75rem 0);
    font-size: var(--eit-eu-groesse, .875rem);
    line-height: 1.4;
    text-align: var(--eit-eu-ausrichtung, inherit);
}

.eit-eu-ausloeser,
.eit-eu-ausloeser:visited {
    color: var(--eit-eu-farbe, currentColor);
    font-weight: var(--eit-eu-gewicht, inherit);
    text-decoration-line: var(--eit-eu-linie, underline);
    text-underline-offset: .15em;
    cursor: pointer;
}

.eit-eu-ausloeser:hover,
.eit-eu-ausloeser:focus-visible {
    color: var(--eit-eu-farbe-hover, var(--eit-eu-farbe, currentColor));
    text-decoration-line: var(--eit-eu-linie-hover, underline);
}

.eit-eu-hinweis--fuss {
    margin: var(--eit-eu-fuss-abstand, 0 0 .5rem);
    text-align: var(--eit-eu-fuss-ausrichtung, var(--eit-eu-ausrichtung, inherit));
}

.eit-eu-hinweis--fuss .eit-eu-ausloeser {
    color: var(--eit-eu-fuss-farbe, var(--eit-eu-farbe, currentColor));
}

.eit-eu-hinweis--kopf {
    margin: var(--eit-eu-kopf-abstand, 0 1rem 0 0);
    text-align: var(--eit-eu-kopf-ausrichtung, var(--eit-eu-ausrichtung, inherit));
}

.eit-eu-hinweis--kopf .eit-eu-ausloeser {
    color: var(--eit-eu-kopf-farbe, var(--eit-eu-farbe, currentColor));
}

.eit-eu-hinweis--artikel {
    margin: var(--eit-eu-artikel-abstand, var(--eit-eu-abstand, .75rem 0));
    text-align: var(--eit-eu-artikel-ausrichtung, var(--eit-eu-ausrichtung, inherit));
}

.eit-eu-hinweis--artikel .eit-eu-ausloeser {
    color: var(--eit-eu-artikel-farbe, var(--eit-eu-farbe, currentColor));
}

.eit-eu-hinweis--warenkorb {
    margin: var(--eit-eu-warenkorb-abstand, var(--eit-eu-abstand, .75rem 0));
    text-align: var(--eit-eu-warenkorb-ausrichtung, var(--eit-eu-ausrichtung, inherit));
}

.eit-eu-hinweis--warenkorb .eit-eu-ausloeser {
    color: var(--eit-eu-warenkorb-farbe, var(--eit-eu-farbe, currentColor));
}

/* Vor dem Bestellbutton deutlich abgesetzt: Die Mitteilung muss „in hervorgehobener Weise“ erscheinen.
   Deshalb hat der Kasten eigene Farben statt der Umgebung - er soll auch auf bunten Kassenseiten auffallen. */
.eit-eu-hinweis--kasse {
    padding: .625rem .875rem;
    border: 1px solid var(--eit-eu-kasse-rand, rgba(0, 0, 0, .15));
    border-left: 4px solid var(--eit-eu-kasse-akzent, #003399);
    border-radius: var(--eit-eu-kasse-radius, 6px);
    background: var(--eit-eu-kasse-hintergrund, #fff);
    color: var(--eit-eu-kasse-text, #1a1a1a);
    text-align: var(--eit-eu-kasse-ausrichtung, start);
}

.eit-eu-hinweis--kasse .eit-eu-ausloeser,
.eit-eu-hinweis--kasse .eit-eu-ausloeser:visited {
    color: var(--eit-eu-kasse-farbe, var(--eit-eu-kasse-akzent, #003399));
    font-weight: var(--eit-eu-kasse-gewicht, 600);
}

.eit-eu-hinweis--kasse .eit-eu-ausloeser:hover,
.eit-eu-hinweis--kasse .eit-eu-ausloeser:focus-visible {
    color: var(--eit-eu-kasse-farbe, var(--eit-eu-kasse-akzent, #003399));
}

/* Dialog - bewusst helles Schema unabhängig vom Template, die Mitteilung ist weiß hinterlegt. */
.eit-eu-dialog {
    color-scheme: light;
    box-sizing: border-box;
    width: min(820px, calc(100vw - 2rem));
    max-height: calc(100vh - 2rem);
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: #fff;
    color: #1a1a1a;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    overflow: auto;
}

.eit-eu-dialog *,
.eit-eu-dialog *::before,
.eit-eu-dialog *::after {
    box-sizing: border-box;
}

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

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

.eit-eu-dialog__titel {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.3;
    color: #1a1a1a;
}

.eit-eu-dialog__zu {
    flex: none;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: #1a1a1a;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
}

.eit-eu-dialog__zu:hover,
.eit-eu-dialog__zu:focus-visible {
    background: #f0f0f0;
}

.eit-eu-dialog__bild {
    padding: 1rem;
}

.eit-eu-dialog__bild a {
    display: block;
}

.eit-eu-dialog__bild img {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    aspect-ratio: 595 / 842;
    margin: 0;
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    object-fit: contain;
}

.eit-eu-dialog__links {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.5rem;
    margin: 0;
    padding: 0 1rem 1rem;
    font-size: .9375rem;
    line-height: 1.4;
}

.eit-eu-dialog__links a {
    color: #003399;
    text-decoration: underline;
}

@media (max-width: 575.98px) {
    .eit-eu-dialog {
        width: calc(100vw - 1rem);
        max-height: calc(100vh - 1rem);
    }

    .eit-eu-dialog__bild {
        padding: .5rem;
    }
}

/* GARAN - Mini-Label (geschachtelte Anzeige, DVO Anhang II). Seitenverhältnis der amtlichen Vorlage 368,5 : 56,69;
   gesteuert wird nur die Höhe, die Breite folgt. Keine Filter, keine Verzerrung (Leitfaden 3.1.5). */
.eit-garan {
    display: inline-block;
    margin: .375rem 0 0;
    padding: 0;
    line-height: 0;
    cursor: pointer;
    vertical-align: middle;
}

.eit-garan img {
    display: block;
    width: auto;
    max-width: 100%;
    height: var(--eit-garan-hoehe-liste, 28px);
    filter: none !important;
    opacity: 1 !important;
    mix-blend-mode: normal !important;
    object-fit: contain;
}

.eit-garan:focus-visible {
    outline: 2px solid #003399;
    outline-offset: 3px;
    border-radius: 2px;
}

.eit-garan--artikel {
    display: block;
    margin: .75rem 0 .25rem;
}

.eit-garan--artikel img {
    height: var(--eit-garan-hoehe-artikel, 36px);
}

.eit-garan--warenkorb img {
    height: var(--eit-garan-hoehe-warenkorb, 24px);
}

.eit-garan--kasse img {
    height: var(--eit-garan-hoehe-kasse, 24px);
}

.eit-garan--warenkorb,
.eit-garan--kasse {
    display: block;
    margin: .25rem 0 .5rem;
}

/* Vollständiges Label: Der Leitfaden verlangt einen QR-Code von mindestens 2 x 2 cm. Der Code nimmt rund ein Viertel
   der Labelbreite ein; ab 340 px Breite liegt er sicher über 76 CSS-Pixeln (2 cm bei 96 dpi). */
.eit-garan-dialog {
    width: min(480px, calc(100vw - 1rem));
}

.eit-garan-dialog .eit-eu-dialog__bild img {
    width: 100%;
    min-width: 340px;
    max-width: 440px;
    margin: 0 auto;
    aspect-ratio: 269.29 / 283.46;
}

/* Browser begrenzen dialog standardmäßig auf 100% - 2em - 6px. Auf dem Handy kostet das genau die Pixel, die der
   QR-Code für 2 cm braucht - deshalb aufheben und den Innenrand schmal halten. */
.eit-eu-dialog {
    max-width: none;
}

@media (max-width: 575.98px) {
    .eit-garan-dialog .eit-eu-dialog__bild {
        padding: .25rem;
    }

    .eit-garan-dialog .eit-eu-dialog__bild img {
        min-width: 0;
    }
}