/*  TT Energielabel - Frontend Styles v2.2
 *  ----------------------------------------------------------------
 *  MediaMarkt-Style Energiepfeil:
 *  - Klickbarer Pfeil = farbiges Trapez mit Klassen-Buchstabe + weisses
 *    Quadrat mit Download-Symbol (wie bei MediaMarkt).
 *  - Klick oeffnet das eingebaute Bootstrap-Modal von NOVA mit Tabs:
 *    "Energielabel" (JPG) und "Produktdatenblatt" (PDF inline).
 *  - Modal hat Download-Button für das Datenblatt.
 *
 *  Dateigrößen werden über CSS-Variablen gesteuert (Pfeilgrößen).
 *  Farbe wird inline am SVG via --tt-arrow-color gesetzt.
 */

/* ==== Wrapper ==== */
.tt-energy-label-wrapper {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    margin: 8px 0;
    vertical-align: middle;
}

.tt-energy-arrow-group {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
}

/* ==== Kontext-spezifische Default-Positionierung ====
 * Listenansicht & Galerieansicht haben jeweils 4 Positionen, die per
 * globaler Einstellung gewaehlt werden:
 *   - right_of_price (rechts neben Preis im price_wrapper)
 *   - left_of_price  (links neben Preis, Preis rechts ausgerichtet)
 *   - top_right / top_left (oben rechts/links in der productbox)  [Liste]
 *   - bottom_right / bottom_left (unten rechts/links in der productbox)  [Galerie]
 *
 * z-index: 10 verhindert, dass der Hover-Overlay
 * (.productbox.productbox-hover .productbox-inner::before mit weissem
 * Hintergrund) den Pfeil verdeckt. position:relative ist noetig, damit
 * z-index ueberhaupt greift.
 */
.product-wrapper,
.productbox,
.productbox-row,
.productbox-column,
.product-list-item,
.product-tile-card,
.product-card { position: relative; }

.productbox-inner { position: relative; }

/* ===== LISTENANSICHT (tt-ctx-list) =====
 * Drei Positionen:
 *   top_right    - oben in der productbox-options Sub-Spalte, ueber dem
 *                  Preis im Flow (kein absolute, damit der Preis sichtbar
 *                  bleibt). Mit text-align:right rechts ausgerichtet.
 *   above_price  - oberhalb des Preises im price_wrapper (per Renderer-Override)
 *   below_price  - unterhalb des Preises im price_wrapper (per Renderer-Override)
 */

/* Position: oben rechts (Default) - im Flow, rechts ausgerichtet */
.tt-energy-label-wrapper.tt-ctx-list.tt-pos-top-right {
    display: block;
    margin: 0 0 8px 0;
    text-align: right;
    position: relative;
    z-index: 10;
}

/* Damit der Pfeil den Preis nicht ueberdeckt: die productbox-options-Spalte
 * (enthaelt Preis, Lieferstatus, Warenkorb-Button) bekommt einen Versatz
 * nach unten. Pfeil L ist ca. 48px hoch + 8px top = 56px - 60px padding
 * gibt etwas Luft. Mit :has() greift die Regel nur, wenn der Pfeil
 * tatsaechlich an der productbox sitzt.
 */
.productbox-row:has(> .tt-energy-label-wrapper.tt-ctx-list.tt-pos-top-right) .productbox-options {
    padding-top: 60px;
}

/* Position: über dem Preis - Pfeil ist per Renderer-Override
 * als erstes Kind im price_wrapper. Den Wrapper als Block-Inline,
 * damit er auf eigener Zeile sitzt. */
.tt-energy-label-wrapper.tt-ctx-list.tt-pos-above-price {
    display: block;
    margin: 0 0 6px 0;
    position: relative;
    z-index: 10;
}

/* Position: unter dem Preis */
.tt-energy-label-wrapper.tt-ctx-list.tt-pos-below-price {
    display: block;
    margin: 6px 0 0 0;
    position: relative;
    z-index: 10;
}

/* ===== GALERIEANSICHT (tt-ctx-gallery) =====
 * Vier Positionen:
 *   bottom_right    - unten rechts in productbox-inner (Default)
 *   bottom_left     - unten links in productbox-inner
 *   right_of_price  - rechts neben Preis im price_wrapper
 *   left_of_price   - links neben Preis (Preis rechts ausgerichtet)
 *
 * Der Pfeil wird ueber den Renderer-Override IMMER in productbox-inner
 * oder price_wrapper platziert - dadurch greift die CSS-Positionierung
 * und der z-index ueber dem Hover-Overlay zuverlaessig.
 */

/* productbox-inner braucht position:relative, damit absolute Position
 * der Galerie-Bottom-Pfeile auf die Tile-Box bezogen wird. */
.productbox-inner { position: relative; }

/* Position: unten rechts (Default) */
.tt-energy-label-wrapper.tt-ctx-gallery.tt-pos-bottom-right {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 10;
}
/* Position: unten links */
.tt-energy-label-wrapper.tt-ctx-gallery.tt-pos-bottom-left {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 10;
}



/* ==========================================================================
   ARTIKEL-SLIDER
   --------------------------------------------------------------------------
   Cross-Selling, Slider-Widget, ähnliche Artikel - alles, was in einer
   .swiper-slide oder einer Kachel der TT Portlet Collection steckt.

   Die Positionen sind dieselben vier wie in der Galerieansicht, deshalb
   sind es hier dieselben Regeln. Bis 1.3.2 gab es sie gar nicht: der
   Renderer setzte den Pfeil zwar an die eingestellte Stelle im DOM, die
   Klasse tt-pos-* fehlte aber, und damit blieb jede Slider-Einstellung
   ohne sichtbare Wirkung.
   ========================================================================== */
/* ===== ARTIKEL-SLIDER (tt-ctx-slider) =====
 * Vier Positionen:
 *   bottom_right    - unten rechts in productbox-inner (Default)
 *   bottom_left     - unten links in productbox-inner
 *   right_of_price  - rechts neben Preis im price_wrapper
 *   left_of_price   - links neben Preis (Preis rechts ausgerichtet)
 *
 * Der Pfeil wird ueber den Renderer-Override IMMER in productbox-inner
 * oder price_wrapper platziert - dadurch greift die CSS-Positionierung
 * und der z-index ueber dem Hover-Overlay zuverlaessig.
 */

/* productbox-inner braucht position:relative, damit absolute Position
 * der Galerie-Bottom-Pfeile auf die Tile-Box bezogen wird. */
/* Bezugsrahmen fuer die absolut gesetzten Ecken-Positionen. Bewusst nur
 * dort, wo wirklich ein Pfeil dieses Plugins sitzt - eine pauschale
 * Regel auf .swiper-slide wuerde in fremde Slider eingreifen. */
.swiper-slide:has(> .tt-energy-label-wrapper.tt-ctx-slider),
.swiper-slide:has(.productbox-inner > .tt-energy-label-wrapper.tt-ctx-slider),
.tt-as__slide:has(.tt-energy-label-wrapper.tt-ctx-slider),
.tt-as__card:has(.tt-energy-label-wrapper.tt-ctx-slider),
.productbox-inner:has(> .tt-energy-label-wrapper.tt-ctx-slider) { position: relative; }

/* Position: unten rechts (Default) */
.tt-energy-label-wrapper.tt-ctx-slider.tt-pos-bottom-right {
    position: absolute;
    bottom: 8px;
    right: 8px;
    z-index: 10;
}
/* Position: unten links */
.tt-energy-label-wrapper.tt-ctx-slider.tt-pos-bottom-left {
    position: absolute;
    bottom: 8px;
    left: 8px;
    z-index: 10;
}

/* ==========================================================================
   PFEIL RECHTS / LINKS NEBEN DEM PREIS (Detailseite, Galerie, Slider)
   --------------------------------------------------------------------------
   1.3.13: Der Renderer setzt den Pfeil als direktes Kind in .price_wrapper
   (rechts: append, links: prepend). Der price_wrapper wird zum Grid:

     Rechts neben Preis:  [ab][Preis][ .......... ][Pfeil]
     Links neben Preis:   [Pfeil][ .......... ][ab][Preis]

   "ab" (.price_label, bei Vaterartikeln) und Preis stehen in zwei festen,
   benachbarten Spalten und können dadurch nie getrennt werden - auch nicht
   bei wenig Platz. Der Pfeil sitzt immer ganz außen. Alle übrigen Kinder
   (Steuerhinweis, Versand, Grundpreis) laufen über die volle Breite
   darunter. Das frühere Flex-Layout mit flex-wrap konnte den Preis in eine
   neue Zeile schieben, dann stand der Pfeil zwischen "ab" und Preis.
   ========================================================================== */
.price_wrapper:has(> .tt-energy-label-wrapper.tt-pos-right-of-price) {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto !important;
    column-gap: 0 !important;
    row-gap: 4px !important;
    align-items: center !important;
    justify-content: stretch !important;
}
.price_wrapper:has(> .tt-energy-label-wrapper.tt-pos-left-of-price) {
    display: grid !important;
    grid-template-columns: auto minmax(0, 1fr) auto auto !important;
    column-gap: 0 !important;
    row-gap: 4px !important;
    align-items: center !important;
    justify-content: stretch !important;
}

.price_wrapper:has(> .tt-energy-label-wrapper.tt-pos-right-of-price) > *,
.price_wrapper:has(> .tt-energy-label-wrapper.tt-pos-left-of-price) > * {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    order: 0 !important;
}

.price_wrapper:has(> .tt-energy-label-wrapper.tt-pos-right-of-price) > .price_label,
.price_wrapper:has(> .tt-energy-label-wrapper.tt-pos-left-of-price) > .price_label {
    grid-row: 1 !important;
    align-self: baseline !important;
    margin: 0 .3em 0 0 !important;
    white-space: nowrap !important;
    width: auto !important;
}
.price_wrapper:has(> .tt-energy-label-wrapper.tt-pos-right-of-price) > .price,
.price_wrapper:has(> .tt-energy-label-wrapper.tt-pos-left-of-price) > .price {
    grid-row: 1 !important;
    align-self: baseline !important;
    margin: 0 !important;
    white-space: nowrap !important;
    width: auto !important;
}
.price_wrapper > .tt-energy-label-wrapper.tt-pos-right-of-price,
.price_wrapper > .tt-energy-label-wrapper.tt-pos-left-of-price {
    grid-row: 1 !important;
    align-self: center !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
    z-index: 10;
    width: auto !important;
}

.price_wrapper:has(> .tt-energy-label-wrapper.tt-pos-right-of-price) > .price_label { grid-column: 1 !important; }
.price_wrapper:has(> .tt-energy-label-wrapper.tt-pos-right-of-price) > .price       { grid-column: 2 !important; }
.price_wrapper > .tt-energy-label-wrapper.tt-pos-right-of-price {
    grid-column: 4 !important;
    justify-self: end !important;
    margin: 0 0 0 16px !important;
}

.price_wrapper > .tt-energy-label-wrapper.tt-pos-left-of-price {
    grid-column: 1 !important;
    justify-self: start !important;
    margin: 0 16px 0 0 !important;
}
.price_wrapper:has(> .tt-energy-label-wrapper.tt-pos-left-of-price) > .price_label { grid-column: 3 !important; }
.price_wrapper:has(> .tt-energy-label-wrapper.tt-pos-left-of-price) > .price       { grid-column: 4 !important; }

/* 1.3.14: Der price_wrapper nimmt immer die volle Breite der Kachel bzw.
   Box ein. In Slidern (z. B. Topseller) sind die Elternelemente oft
   zentrierte Flex-Spalten, die den price_wrapper sonst auf Inhaltsbreite
   schrumpfen - dann stand der Pfeil direkt neben dem Preis statt am Rand.
   Die Container-Abfrage legt den Pfeil bei sehr schmalen Kacheln in eine
   eigene Zeile, weiterhin ganz außen. */
.price_wrapper:has(> .tt-energy-label-wrapper.tt-pos-right-of-price),
.price_wrapper:has(> .tt-energy-label-wrapper.tt-pos-left-of-price) {
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    align-self: stretch !important;
    justify-self: stretch !important;
    text-align: left !important;
    container-type: inline-size;
}
:is(.swiper-slide, .slick-slide, .product-wrapper, .productbox, .productbox-inner, .tt-as__card, .tt-as__slide, .item-slider-desc, .item-slider-price) :has(.price_wrapper > .tt-energy-label-wrapper:is(.tt-ctx-slider, .tt-ctx-gallery):is(.tt-pos-right-of-price, .tt-pos-left-of-price)),
.price_wrapper:has(> .tt-energy-label-wrapper.tt-pos-right-of-price),
.price_wrapper:has(> .tt-energy-label-wrapper.tt-pos-left-of-price) {
    align-self: stretch !important;
    justify-self: stretch !important;
}
:is(.swiper-slide, .slick-slide, .product-wrapper, .productbox, .productbox-inner, .tt-as__card, .tt-as__slide) :has(.price_wrapper > .tt-energy-label-wrapper:is(.tt-ctx-slider, .tt-ctx-gallery):is(.tt-pos-right-of-price, .tt-pos-left-of-price)) {
    box-sizing: border-box;
    min-width: 100%;
}
@container (max-width: 210px) {
    .price_wrapper > .tt-energy-label-wrapper.tt-pos-right-of-price,
    .price_wrapper > .tt-energy-label-wrapper.tt-pos-left-of-price {
        grid-row: 2 !important;
        margin: 2px 0 0 0 !important;
    }
    .price_wrapper > .tt-energy-label-wrapper.tt-pos-right-of-price { grid-column: 1 / -1 !important; justify-self: end !important; }
    .price_wrapper > .tt-energy-label-wrapper.tt-pos-left-of-price  { grid-column: 1 / -1 !important; justify-self: start !important; }
}

/* 1.3.15: Kacheln ohne .price_wrapper (TT-Artikelslider .tt-as__price,
   Fallback .productbox-price). Dort steht der Preis als reiner Text im
   selben Element wie der Pfeil. Das Element wird zur vollen Breite
   gezogen, der Pfeil per margin ganz nach außen geschoben. Die umgebenden
   Flex-Container (.tt-as__prices, .tt-as__foot) werden ebenfalls auf volle
   Breite gestreckt, sonst bleibt alles auf Inhaltsbreite. */
:is(.tt-as__price, .productbox-price):has(> .tt-energy-label-wrapper:is(.tt-pos-right-of-price, .tt-pos-left-of-price)) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    column-gap: 12px !important;
    row-gap: 4px !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: 1 1 100% !important;
    align-self: stretch !important;
    white-space: nowrap;
}
:is(.tt-as__price, .productbox-price) > .tt-energy-label-wrapper.tt-pos-right-of-price {
    order: 99 !important;
    margin: 0 0 0 auto !important;
    flex: 0 0 auto !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
}
:is(.tt-as__price, .productbox-price) > .tt-energy-label-wrapper.tt-pos-left-of-price {
    order: -1 !important;
    margin: 0 auto 0 0 !important;
    flex: 0 0 auto !important;
    position: relative !important;
    top: auto !important;
    right: auto !important;
    bottom: auto !important;
    left: auto !important;
}
:is(.tt-as__card, .tt-as__slide, .swiper-slide, .productbox, .product-wrapper) :has(:is(.tt-as__price, .productbox-price) > .tt-energy-label-wrapper:is(.tt-pos-right-of-price, .tt-pos-left-of-price)) {
    box-sizing: border-box;
    min-width: 100%;
    align-self: stretch !important;
}
:is(.tt-as__foot, .tt-as__prices):has(.tt-as__price > .tt-energy-label-wrapper:is(.tt-pos-right-of-price, .tt-pos-left-of-price)) {
    flex-wrap: wrap !important;
}

/* ===== Hover-Overlay-Schutz =====
 * NOVA legt beim Hover ein weisses ::before-Overlay ueber die productbox-inner.
 * Wir heben unsere Pfeile auf z-index: 10, damit sie immer sichtbar bleiben.
 * Die direkten Kinder werden position: relative gesetzt - ABER nicht der
 * tt-energy-label-wrapper, damit dessen position: absolute (top_right,
 * bottom_right etc.) nicht ueberschrieben wird.
 */
.productbox.productbox-hover .productbox-inner > *:not(.tt-energy-label-wrapper) {
    position: relative;
    z-index: 2;
}
.tt-energy-label-wrapper {
    z-index: 10 !important;
}
/* Detailseite: Basis - der Wrapper selbst ist nur ein Inline-Container,
 * die genaue Positionierung kommt aus den .tt-pos-*-Klassen unten. */
.tt-energy-label-wrapper.tt-ctx-detail {
    display: inline-block;
    vertical-align: middle;
}

/* ==== Detail-Position-Modi (globale Einstellung) ====
 * .tt-pos-right-of-price  - oben rechts in .product-info-inner (sichtbar
 *                           rechts neben dem Preis-Bereich) [Default]
 * .tt-pos-left-of-price   - links im price_wrapper, Preis ganz rechts
 * .tt-pos-top-right-box   - neben dem Artikelnamen H1 (Pfeil wird ueber den
 *                           Renderer in .product-headline platziert)
 */

/* Ausweichweg fuer Browser ohne :has() und fuer Themes, die den Preis in
 * einen eigenen Block packen: der Pfeil steht dann wenigstens in der Zeile
 * hinter dem Preis statt darunter. */
@supports not selector(:has(*)) {
    .tt-energy-label-wrapper.tt-ctx-detail.tt-pos-right-of-price {
        display: inline-block;
        vertical-align: middle;
        margin-left: 16px;
    }
}

/* === Vom Anwender per Selektor gesetzt ===
 * Der Pfeil steht genau dort, wo der Selektor ihn eingefuegt hat. Deshalb
 * KEINE eigene Positionierung - jede der tt-pos-*-Regeln oben wuerde ihn
 * wieder wegziehen (bis 1.3.1 landete er dadurch trotz Selektor immer oben
 * rechts). Wer die Stelle feinjustieren will, nimmt Custom CSS und faengt
 * bei dieser Klasse an.
 */
.tt-energy-label-wrapper.tt-pos-custom {
    position: static;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    display: inline-block;
    vertical-align: middle;
}

/* === Position 3: Oben rechts an Produktinfobox ===
 * Pfeil sitzt DOM-maessig in .product-headline (per Renderer-Override).
 * .product-headline wird zu Flex mit Pfeil rechts vom H1.
 * :has() macht die Aenderung nur, wenn auch wirklich ein Pfeil drin sitzt. */
.product-headline:has(.tt-pos-top-right-box) {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}
.product-headline:has(.tt-pos-top-right-box) > h1,
.product-headline:has(.tt-pos-top-right-box) > .product-title {
    flex: 1 1 auto;
    min-width: 0;
}
.tt-energy-label-wrapper.tt-ctx-detail.tt-pos-top-right-box {
    margin-left: auto;
}

/* ==== Beschriftung "Produktdatenblatt" um den Pfeil herum ====
   Position wird per Modifier-Klasse (tt-caption-*) auf der Group gesteuert.
   Die Caption sitzt im DOM immer NACH dem Pfeil; flex-direction sorgt
   fuer die gewuenschte Anordnung. */
.tt-energy-arrow-caption {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
    color: #1f2328;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 2px;
    text-align: center;
    cursor: pointer;
    transition: color .15s ease;
    padding: 2px 4px;
    white-space: nowrap;
}
.tt-energy-arrow-caption:hover,
.tt-energy-arrow-caption:focus-visible {
    color: #2563eb;
    text-decoration-thickness: 2px;
}
.tt-energy-arrow-caption:focus {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}
.tt-energy-arrow-caption:focus:not(:focus-visible) { outline: none; }

/* Position: oben mittig */
.tt-energy-arrow-group.tt-caption-above {
    flex-direction: column-reverse;
    align-items: center;
}
/* Position: unten mittig */
.tt-energy-arrow-group.tt-caption-below {
    flex-direction: column;
    align-items: center;
}
/* Position: links daneben (vertikal mittig) */
.tt-energy-arrow-group.tt-caption-left {
    flex-direction: row-reverse;
    align-items: center;
    gap: 8px;
}
/* Position: rechts daneben (vertikal mittig) */
.tt-energy-arrow-group.tt-caption-right {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.tt-arrow-title {
    font-size: 11px;
    color: #555;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
    margin-bottom: 1px;
}

/* ==== Pfeil-Container (klickbar als <a>) ==== */
.tt-energy-arrow {
    display: inline-block;
    text-decoration: none !important;
    line-height: 0;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease;
    border-radius: 2px;
    overflow: hidden;
}
a.tt-energy-arrow:hover,
a.tt-energy-arrow:focus {
    transform: translateY(-1px);
    filter: brightness(1.06);
    text-decoration: none !important;
}
/* Sichtbarer Fokus-Indikator für Tastatur-Bedienung (WCAG 2.1 AA: 2.4.7 Focus Visible) */
a.tt-energy-arrow:focus {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}
a.tt-energy-arrow:focus:not(:focus-visible) {
    outline: none;
}
a.tt-energy-arrow:focus-visible {
    outline: 3px solid #2563eb;
    outline-offset: 2px;
}

/* Reduced Motion: keine Bewegung für Nutzer mit vestibulaeren Stoerungen
   (WCAG 2.1 AA: 2.3.3 Animation from Interactions) */
@media (prefers-reduced-motion: reduce) {
    .tt-energy-arrow {
        transition: none;
    }
    a.tt-energy-arrow:hover,
    a.tt-energy-arrow:focus {
        transform: none;
    }
}

/* ==== Pfeil-Groessen (S / M / L) ====
 * SVG nutzt preserveAspectRatio="xMidYMid meet" mit viewBox 122 x 42
 * (Aspect-Ratio 3:1 nach EU-Spec). Wir setzen nur die Hoehe in CSS -
 * die Breite kommt aus dem Aspect-Ratio.
 *
 *   S (klein):  32 px hoch, ~92 px breit   - noch erkennbar bei 76% Skalierung
 *   M (mittel): 38 px hoch, ~110 px breit  - EU-Mobile-Range
 *   L (gross):  48 px hoch, ~140 px breit  - Default
 */
.tt-size-small  { height: 32px; min-width: 92px;  }
.tt-size-medium { height: 38px; min-width: 110px; }
.tt-size-large  { height: 48px; min-width: 140px; }

.tt-arrow-svg {
    display: block;
    width: auto;
    height: 100%;
    max-width: 100%;
}

/* ==== Modal-Inhalt ==== */

.tt-energy-modal .modal-dialog { max-width: 800px; }

/* Der Inhalt bekommt einen eigenen Bildlauf. Ohne ihn wuchs das Fenster
 * mit dem Datenblatt mit und der untere Rand lag ausserhalb des
 * Bildschirms - der Schliessen-Knopf blieb zwar oben, das Blatt selbst
 * war aber nicht mehr vollstaendig erreichbar. */
.tt-energy-modal .modal-body {
    max-height: calc(100vh - 190px);
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* ==== Modal-Tabs ====
   Eigenstaendiges Styling, ohne Bootstrap-Klasse "nav-tabs" -
   damit jtl.evo.js' tabdrop-Plugin nicht versucht das Modal-Tablist
   beim DOM-Ready zu initialisieren (verursacht sonst einen JS-Fehler
   im Frontend). Das Tab-Switching funktioniert weiterhin ueber
   data-toggle="tab" bzw. data-bs-toggle="tab". */
.tt-energy-modal-tabs {
    border-bottom: 1px solid #dee2e6;
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    padding: 0;
    list-style: none;
}
.tt-energy-modal-tabs .nav-item {
    margin-bottom: -1px;
}
.tt-energy-modal-tabs .nav-link {
    display: block;
    padding: 8px 16px;
    color: #495057;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid transparent;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    background-color: transparent;
    transition: border-color .15s, color .15s;
}
.tt-energy-modal-tabs .nav-link:hover {
    border-color: #e9ecef #e9ecef #dee2e6;
    color: #1a1a1a;
    text-decoration: none;
}
.tt-energy-modal-tabs .nav-link.active {
    color: #495057;
    background-color: #fff;
    border-color: #dee2e6 #dee2e6 #fff;
}

.tt-modal-label-wrap {
    text-align: center;
    padding: 12px;
    background: #fff;
}
.tt-modal-label-img {
    max-width: 100%;
    max-height: 70vh;
    height: auto;
    display: inline-block;
}

.tt-modal-sheet-wrap {
    width: 100%;
    height: 70vh;
    background: #f8f9fa;
}
.tt-modal-sheet-pdf {
    width: 100%;
    height: 100%;
    border: none;
}

.tt-modal-product {
    font-weight: 400;
    color: #6c757d;
    font-size: 0.9em;
}

.tt-modal-download {
    text-decoration: none !important;
}

/* ==== Datenblatt-Tab im Artikeldetail (separater Tab in NOVA-Tabs) ==== */
.tt-energy-tab-content {
    padding: 12px 0;
    line-height: 1.5;
}

/* ==== Reduzierte Bewegung ==== */
@media (prefers-reduced-motion: reduce) {
    .tt-energy-arrow { transition: none; }
    a.tt-energy-arrow:hover { transform: none; }
}

/* ==== Print ==== */
@media print {
    .tt-energy-arrow {
        print-color-adjust: exact;
        -webkit-print-color-adjust: exact;
    }
}

/* ==== High-Contrast ==== */
@media (forced-colors: active) {
    .tt-energy-arrow { forced-color-adjust: none; }
}

/* ============================================================
 * Mini-Warenkorb, Warenkorb-Seite, Checkout - Pfeil-Positionen
 * Der Pfeil wird ueber processCartTiles() im richtigen DOM-Element
 * platziert. CSS regelt nur das Layout (inline/block, ausrichtung).
 * ============================================================ */

/* Basis: Wrapper als inline-block mit Abstand zum vorigen Element
 * (Artikelname etc.). Etwas mehr Luft als die default 8px - Pfeile
 * klebten sonst zu nah am Text. */
.tt-energy-label-wrapper.tt-ctx-minicart,
.tt-energy-label-wrapper.tt-ctx-cartpage,
.tt-energy-label-wrapper.tt-ctx-checkout {
    display: inline-block;
    vertical-align: middle;
    margin-left: 16px;
    padding: 2px 0;
}

/* ===== MINI-WARENKORB ===== */
/* below_name: Pfeil als Block-Element unter dem Artikelnamen */
.tt-energy-label-wrapper.tt-ctx-minicart.tt-pos-below-name {
    display: block;
    margin: 8px 0 4px 0;
}

/* ===== WARENKORB-SEITE ===== */
/* below_name: unter Artikelname als Block */
.tt-energy-label-wrapper.tt-ctx-cartpage.tt-pos-below-name {
    display: block;
    margin: 10px 0 4px 0;
}
/* below_price: in der Preis-Spalte als Block unter dem 77,91 € */
.tt-energy-label-wrapper.tt-ctx-cartpage.tt-pos-below-price {
    display: block;
    margin: 12px 0 4px 0;
}
.cart-items-price.price-col:has(.tt-pos-below-price.tt-ctx-cartpage),
.cart-items-price:has(.tt-pos-below-price.tt-ctx-cartpage) {
    text-align: right;
}
/* right_of_info: per Float rechts ausgerichtet, Pfeil sitzt RECHTS NEBEN
 * der .list-unstyled, nicht darunter. Clearfix darunter. */
.tt-energy-label-wrapper.tt-ctx-cartpage.tt-pos-right-of-info {
    float: right;
    margin: 0 0 8px 16px;
    display: block;
}
.col.ml-auto-util:has(.tt-pos-right-of-info.tt-ctx-cartpage)::after {
    content: "";
    display: table;
    clear: both;
}
/* below_info: NACH der .list-unstyled als Block-Element */
.tt-energy-label-wrapper.tt-ctx-cartpage.tt-pos-below-info {
    display: block;
    margin: 10px 0 4px 0;
}

/* ===== CHECKOUT / BESTELLUEBERSICHT ===== */
/* right_of_name: inline neben dem Link im <p> mit Abstand */
.tt-energy-label-wrapper.tt-ctx-checkout.tt-pos-right-of-name {
    display: inline-block;
    margin-left: 16px;
}
/* below_name: unter Artikelname als Block */
.tt-energy-label-wrapper.tt-ctx-checkout.tt-pos-below-name {
    display: block;
    margin: 10px 0 4px 0;
}
/* right_of_info: per Float rechts NEBEN der .list-unstyled mit Clearfix */
.tt-energy-label-wrapper.tt-ctx-checkout.tt-pos-right-of-info {
    float: right;
    margin: 0 0 8px 16px;
    display: block;
}
.checkout-items-item-main:has(.tt-pos-right-of-info.tt-ctx-checkout)::after {
    content: "";
    display: table;
    clear: both;
}
/* below_info: NACH der .list-unstyled als Block-Element */
.tt-energy-label-wrapper.tt-ctx-checkout.tt-pos-below-info {
    display: block;
    margin: 12px 0 4px 0;
}


/* =====================================================================
   PDF-Datenblatt-Modal mit PDF.js Multi-Page-Viewer.
   Funktioniert auf ALLEN Geraeten - iOS, Android, Desktop - weil PDF.js
   das PDF selbst als Canvas/Image rendert und nicht den Browser-Viewer
   nutzt (der auf Mobile haeufig nicht funktioniert).
   ===================================================================== */
.tt-energy-modal-pdf-wrap {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px;
    box-sizing: border-box;
}

/* Toolbar mit Prev/Next + Seitenzahl + Download-Button */
.tt-energy-modal-pdf-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 12px;
    background: #f3f4f6;
    border-radius: 6px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.tt-energy-modal-pdf-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 0 1 auto;
}
.tt-energy-modal-pdf-toolbar button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #fff;
    color: #111;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
}
.tt-energy-modal-pdf-toolbar button:hover:not(:disabled) {
    background: #f9fafb;
    border-color: #9ca3af;
}
.tt-energy-modal-pdf-toolbar button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.tt-energy-modal-pdf-pageinfo {
    font-size: 13px;
    font-weight: 500;
    color: #374151;
    font-variant-numeric: tabular-nums;
}
/* Download-Button rechts in der Toolbar - kompakt, mit Icon */
.tt-energy-modal-pdf-dlbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #2563eb;
    color: #fff !important;
    border-radius: 4px;
    text-decoration: none !important;
    font-weight: 500;
    font-size: 13px;
    border: 1px solid #2563eb;
    transition: background 0.15s;
    white-space: nowrap;
}
.tt-energy-modal-pdf-dlbtn:hover,
.tt-energy-modal-pdf-dlbtn:focus {
    background: #1d4ed8;
    border-color: #1d4ed8;
    color: #fff !important;
}

/* Seiten-Container - hoehenbegrenzt, damit das Datenblatt nie ueber das
 * Fenster hinauswaechst. Bis 1.3.3 fehlte die Obergrenze: ein A4-Blatt
 * ragte unten aus dem Fenster heraus und liess sich nicht erreichen. */
.tt-energy-modal-pdf-page {
    width: 100%;
    min-height: 240px;
    max-height: 68vh;
    background: #f8f8f8;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12px;
    box-sizing: border-box;
}
.tt-energy-modal-pdf-page img.tt-energy-modal-pdf-img,
.tt-energy-modal-pdf-page canvas.tt-energy-modal-pdf-img {
    display: block;
    max-width: 100%;
    max-height: 100%;
    height: auto;
    width: auto;
    background: #fff;
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
    border-radius: 2px;
}

/* Loading / Error */
.tt-energy-modal-pdf-loading,
.tt-energy-modal-pdf-error {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 40px 16px;
    text-align: center;
    color: #666;
    font-size: 13px;
    width: 100%;
}
.tt-energy-modal-pdf-error p {
    margin: 0;
    line-height: 1.4;
}
.tt-energy-modal-pdf-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: tt-energy-modal-pdf-spin 0.8s linear infinite;
}
@keyframes tt-energy-modal-pdf-spin {
    to { transform: rotate(360deg); }
}

/* Mobile */
@media (max-width: 600px) {
    .tt-energy-modal-pdf-wrap { padding: 8px; gap: 8px; }
    .tt-energy-modal-pdf-toolbar { padding: 6px 8px; gap: 6px; }
    .tt-energy-modal-pdf-toolbar button { padding: 5px 8px; font-size: 12px; }
    .tt-energy-modal-pdf-dlbtn { padding: 6px 10px; font-size: 12px; }
    .tt-energy-modal-pdf-dlbtn span { display: none; } /* Auf Mobile nur Icon zeigen, Platz sparen */
    .tt-energy-modal-pdf-dlbtn::after { content: 'PDF'; font-size: 11px; }
    .tt-energy-modal-pdf-page { min-height: 300px; padding: 6px; }
}

/* =====================================================================
   PDF-Viewer direkt im Energielabel-Tab eingebettet
   (statt nur Link "Datenblatt herunterladen")
   ===================================================================== */
.tt-energy-tab-pdfviewer {
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.tt-energy-tab-pdfviewer .tt-energy-modal-pdf-page {
    width: 100%;
    min-height: 350px;
    background: #f8f8f8;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    overflow: auto;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 8px;
    box-sizing: border-box;
}
.tt-energy-tab-pdfviewer .tt-energy-modal-pdf-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 10px;
    background: #f3f4f6;
    border-radius: 6px;
}
.tt-energy-tab-pdfviewer .tt-energy-modal-pdf-toolbar button {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #fff;
    color: #111;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
}
.tt-energy-tab-pdfviewer .tt-energy-modal-pdf-toolbar button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}