/* r228 (13.11.2026): eigenes Energielabel (ersetzt knowmates) – VO (EU) 2019/2013 Anh. VIII / 2023/1669 Anh. VII.
   Pflicht: Buchstabe = Preis-Schriftgröße. Der Pfeil steht IM Preis-Element und erbt dessen font-size; SVG 1.2em hoch, Buchstabe 20 von
   24 Einheiten = 1em. NICHTS hier darf die font-size des Pfeils verändern.
   Design aus dem Theme (my-nova): Primär #004E9E, Text #1A1A1A, Hinweisgrau #707070, Karten 14.4px/leichter Schatten, Knöpfe 4.8px/600. */

.jbc-eek-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ── Pfeil ───────────────────────────────────────────────────────────────────────────────────────────── */
.jbc-eek {
    position: relative; z-index: 3; display: inline-block; margin: 0 0 0 .24em; padding: 0; border: 0; background: none;   /* z-index: über gespannten Kachel-Links */
    font: inherit; font-size: 1em; line-height: 0; color: inherit; cursor: pointer;
    /* Grundlinie des Buchstabens (y 18.5 von 24) auf die Grundlinie des Preises: Unterkante 5.5/20 em darunter */
    vertical-align: -.275em;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation; border-radius: 2px;
    transition: transform .12s ease, filter .12s ease;
}
.jbc-eek svg { display: block; height: 1.2em; overflow: visible; }
/* Touch: Tippfläche mind. 44 × 44 px (WCAG 2.5.5), unabhängig von der sichtbaren Größe */
.jbc-eek::before { content: ""; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%); }
.jbc-eek .jbc-eek-rahmen { fill: #fff; stroke: #000; stroke-width: 1; vector-effect: non-scaling-stroke; }
.jbc-eek .jbc-eek-pfeil { stroke: #000; stroke-width: 1; vector-effect: non-scaling-stroke; }
.jbc-eek .jbc-eek-sp { fill: #000; }
/* Buchstabe weiß mit schwarzer Kontur; Strichbreite in Glyphen-Einheiten (2048/em): 130 ≈ 1.27 SVG-Einheiten */
.jbc-eek .jbc-eek-kl { fill: #fff; stroke: #000; stroke-width: 130px; paint-order: stroke fill; stroke-linejoin: round; }
.jbc-eek .jbc-eek-plus { stroke-width: 150px; }
.jbc-eek:focus { outline: none; }
.jbc-eek:focus-visible { outline: 2px solid #004e9e; outline-offset: 3px; }
.jbc-eek:active { filter: brightness(.92); }
@media (hover: hover) and (pointer: fine) {
    .jbc-eek:hover { transform: translateX(1px); filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .22)); }
}
@media (prefers-reduced-motion: reduce) { .jbc-eek { transition: none; } .jbc-eek:hover { transform: none; } }
@media (forced-colors: active) { .jbc-eek .jbc-eek-pfeil { forced-color-adjust: none; } }

/* ── Produktdatenblatt ───────────────────────────────────────────────────────────────────────────────── */
/* a) hinter „inkl. 19 % USt., Kostenloser Versand“ (gleiche Zeile, gleiche Optik) */
/* kein Trennpunkt: bricht die Zeile um, stünde er sonst am Zeilenanfang – das Dokument-Symbol trennt optisch */
.jbc-eek-inl { white-space: nowrap; display: inline-block; margin-left: .7em; }
/* b) eigene kleine Zeile, wo es keine USt.-Zeile gibt (Slider, Warenkorb, Kasse, Popup) */
.jbc-eek-zeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; margin: 3px 0 0; font-size: 12px; line-height: 1.35; }
.price_wrapper > .jbc-eek-zeile { order: 3; }
.item-slider-price .jbc-eek-zeile, .productbox .jbc-eek-zeile { justify-content: inherit; }
.jbc-eek-db {
    display: inline-flex; align-items: center; gap: .3em; color: #707070; font-weight: 400; text-decoration: underline;
    text-decoration-color: rgba(112, 112, 112, .45); text-underline-offset: 2px; white-space: nowrap; touch-action: manipulation;
    position: relative; z-index: 3; -webkit-tap-highlight-color: transparent;
}
/* Tippfläche des Links vergrößern, ohne die Zeile höher zu machen */
.jbc-eek-db::after { content: ""; position: absolute; left: -4px; right: -4px; top: 50%; height: max(100%, 32px); transform: translateY(-50%); }
.jbc-eek-db:hover { color: #004e9e; text-decoration-color: currentColor; }
.jbc-eek-db:focus-visible { outline: 2px solid #004e9e; outline-offset: 2px; border-radius: 2px; }
.jbc-eek-db svg { width: 1.15em; height: 1.15em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* Schmale Spalten: Pfeil bricht notfalls unter den Preis um (Buchstabe bleibt Preisgröße), nie abgeschnitten */
.price:has(> .jbc-eek), .price_overall:has(> .jbc-eek), .preis_success:has(> .jbc-eek), .jbc-si-p:has(> .jbc-eek) { white-space: normal; }

/* Warenkorb, Mini-Warenkorb, Kasse, Popup: Datenblatt rechtsbündig unter dem Preis */
.jbc-cart-pricecol .jbc-eek-zeile, .price-col .jbc-eek-zeile, .jbc-pushed-price .jbc-eek-zeile, .jbc-dd-qty + .jbc-eek-zeile { justify-content: flex-end; font-size: 11.5px; }
td .jbc-eek-zeile { white-space: normal; }
.jbc-sum-item + .jbc-eek-zeile { justify-content: flex-end; margin: -4px 0 8px; font-size: 11.5px; }
.jbc-dd-price .jbc-eek { margin-left: .2em; }
.jbc-si-p { white-space: nowrap; }

/* ── Label-Fenster (ein <dialog> je Seite, jbc-eek.js) ─────────────────────────────────────────────── */
html.jbc-eek-offen, html.jbc-eek-offen body { overflow: hidden; }
.jbc-eek-dialog {
    border: 0; padding: 0; margin: auto; border-radius: 14.4px; width: min(430px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px);
    background: #fff; color: #1a1a1a; box-shadow: 0 18px 50px rgba(0, 0, 0, .22); overflow: hidden; font-family: Manrope, "Helvetica Neue", Arial, sans-serif;
}
.jbc-eek-dialog::backdrop { background: rgba(10, 22, 40, .5); }
.jbc-eek-dialog[open] { display: flex; flex-direction: column; animation: jbcEekAuf .18s ease-out; }
@keyframes jbcEekAuf { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.jbc-eek-dialog-kopf { display: flex; align-items: center; gap: 12px; padding: 14px 12px 12px 20px; border-bottom: 1px solid #ececec; }
.jbc-eek-dialog-titel { flex: 1; min-width: 0; }
.jbc-eek-dialog-titel strong { display: block; font: 700 17px/1.25 "Space Grotesk", Manrope, Arial, sans-serif; }
.jbc-eek-dialog-titel span { display: block; margin-top: 2px; font-size: 12.5px; color: #707070; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jbc-eek-dialog-zu { flex: none; width: 44px; height: 44px; border: 0; border-radius: 50%; background: transparent; cursor: pointer; display: grid; place-items: center;
    touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.jbc-eek-dialog-zu:hover, .jbc-eek-dialog-zu:active { background: #f2f4f7; }
.jbc-eek-dialog-zu:focus-visible { outline: 2px solid #004e9e; outline-offset: 0; }
.jbc-eek-dialog-zu svg { width: 20px; height: 20px; stroke: #1a1a1a; stroke-width: 2; fill: none; stroke-linecap: round; }
.jbc-eek-dialog-bild { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y pinch-zoom;
    padding: 16px 20px; display: flex; justify-content: center; align-items: flex-start; background: #fff; }
.jbc-eek-dialog-bild img { display: block; width: 100%; max-width: 340px; height: auto; max-height: calc(100vh - 210px); max-height: calc(100dvh - 210px); object-fit: contain; }
.jbc-eek-laden { align-self: center; color: #707070; font-size: 13px; padding: 48px 0; }
.jbc-eek-dialog-gross { display: block; text-align: center; padding: 0 20px 2px; font-size: 12px; }
.jbc-eek-dialog-gross a { color: #707070; text-decoration: underline; text-underline-offset: 2px; padding: 10px 4px; display: inline-block; }
.jbc-eek-dialog-fuss { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 20px 16px; padding-bottom: max(16px, env(safe-area-inset-bottom)); border-top: 1px solid #ececec; }
.jbc-eek-dialog-fuss .jbc-eek-knopf {
    flex: 1 1 150px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 8px 16px;
    border-radius: 4.8px; font: 600 14px/1.2 Manrope, "Helvetica Neue", Arial, sans-serif; text-decoration: none; cursor: pointer; touch-action: manipulation;
    -webkit-tap-highlight-color: transparent; transition: background-color .15s, border-color .15s, color .15s;
}
.jbc-eek-knopf--primaer { background: #004e9e; border: 1px solid #004e9e; color: #fff !important; }
.jbc-eek-knopf--primaer:hover, .jbc-eek-knopf--primaer:active { background: #003f80; border-color: #003f80; }
.jbc-eek-knopf--sekundaer { background: #fff; border: 1px solid #cfd4dc; color: #1a1a1a; }
.jbc-eek-knopf--sekundaer:hover, .jbc-eek-knopf--sekundaer:active { border-color: #1a1a1a; }
.jbc-eek-knopf:focus-visible { outline: 2px solid #004e9e; outline-offset: 2px; }
/* Handy: Blatt von unten, volle Breite, sichere Fläche unten */
@media (max-width: 575.98px) {
    .jbc-eek-dialog { width: 100vw; max-width: 100vw; max-height: 94vh; max-height: 94dvh; margin: auto 0 0; border-radius: 16px 16px 0 0; }
    .jbc-eek-dialog[open] { animation-name: jbcEekBlatt; }
    .jbc-eek-dialog-bild img { max-height: calc(94vh - 200px); max-height: calc(94dvh - 200px); }
}
@keyframes jbcEekBlatt { from { transform: translateY(40px); opacity: 0; } to { transform: none; opacity: 1; } }
/* Querformat am Handy (wenig Höhe): Label links, Knöpfe rechts */
@media (max-height: 500px) and (orientation: landscape) {
    .jbc-eek-dialog { width: min(660px, calc(100vw - 24px)); max-width: calc(100vw - 24px); max-height: calc(100vh - 16px); max-height: calc(100dvh - 16px); margin: auto; border-radius: 14.4px; }
    .jbc-eek-dialog[open] { display: grid; grid-template-columns: 1fr 210px; grid-template-rows: auto 1fr auto; }
    .jbc-eek-dialog-kopf { grid-column: 1 / -1; padding-top: 6px; padding-bottom: 6px; }
    .jbc-eek-dialog-bild { grid-column: 1; grid-row: 2 / 4; padding: 8px 16px; }
    .jbc-eek-dialog-bild img { max-height: calc(100vh - 80px); max-height: calc(100dvh - 80px); }
    .jbc-eek-dialog-gross { grid-column: 2; grid-row: 2; align-self: end; }
    .jbc-eek-dialog-fuss { grid-column: 2; grid-row: 3; flex-direction: column; border-top: 0; padding: 8px 16px 12px; }
    .jbc-eek-dialog-fuss .jbc-eek-knopf { flex: 0 0 auto; }
}
@media (prefers-reduced-motion: reduce) { .jbc-eek-dialog[open] { animation: none; } }
body:has(.jbc-eek-dialog[open]) #ws_eu-cookie-container > * { visibility: hidden; }