/* ===========================================================================
   Varianten im Shorts-Vollbild-Viewer   (Nachtrag Fatih, 06.10.2026)
   Gehoert zu: js/kh-shorts-viewer.js

   Warum eine eigene Datei und nicht custom.css: custom.css ist der
   Kollisionsherd (fasst jeder an). Die Datei wird NACH custom.css geladen —
   bei gleicher Spezifitaet gewinnt also sie.

   Farben kommen ausschliesslich aus den Marken-Tokens (css/brand.css). Die
   Leiste liegt auf dunklem Video, deshalb helle Flaechen und weisse Schrift —
   das ist kein neues Thema, sondern dieselbe Leiste wie der Kaufknopf darunter.
   =========================================================================== */

/* .kh-sv__bar hat pointer-events:none (damit man am Video vorbeitippen kann) —
   alles Bedienbare darin muss es ausdruecklich wieder einschalten. */
.kh-sv__vars {
    pointer-events: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 0 2px;
}

.kh-sv__vars[hidden] { display: none; }

.kh-sv__vars-kopf {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
    font-family: 'Lato', sans-serif;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
}

.kh-sv__vars-titel {
    flex: 0 0 auto;
    color: #fff;
    font-size: 12.5px;
    font-weight: 700;
}

.kh-sv__vars-wahl {
    min-width: 0;
    overflow: hidden;
    color: rgba(255, 255, 255, .82);
    font-size: 12.5px;
    font-weight: 400;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.kh-sv__vars-wahl:empty { display: none; }

/* --- Die Reihe: waagerecht wischbar, Einrasten, keine Scrollleiste -------- */
.kh-sv__vars-rail {
    display: flex;
    flex-wrap: nowrap;
    gap: 8px;
    padding: 2px 2px 4px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    overscroll-behavior-x: contain;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

.kh-sv__vars-rail::-webkit-scrollbar { display: none; width: 0; height: 0; }

/* --- Eine Kachel --------------------------------------------------------- */
.kh-sv__var {
    position: relative;
    flex: 0 0 auto;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 4px;
    width: 76px;
    padding: 5px 5px 6px;
    border: 1.5px solid rgba(255, 255, 255, .34);
    border-radius: 10px;
    background: rgba(17, 24, 39, .62);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color .14s ease, background-color .14s ease;
}

/* Ohne Preis reicht es schmaler; mit Preis braucht die Zahl eine Zeile. */
.kh-sv__var.has-preis { width: 92px; }

.kh-sv__var:hover { border-color: rgba(255, 255, 255, .7); }

.kh-sv__var.is-active {
    border-color: var(--brand-primary, #017EC7);
    background: rgba(1, 126, 199, .3);
    box-shadow: inset 0 0 0 1px var(--brand-primary, #017EC7);
}

.kh-sv__var:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

/* Nicht waehlbar (JTL-Radio disabled): sichtbar bleiben, aber still. */
.kh-sv__var.is-tot {
    border-style: dashed;
    opacity: .5;
    cursor: not-allowed;
}

.kh-sv__var-bild {
    position: relative;
    display: block;
    width: 100%;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    border-radius: 7px;
    background: #fff;
}

.kh-sv__var-bild img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    object-fit: contain;
}

.kh-sv__var-txt { display: block; min-width: 0; }

.kh-sv__var-name {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: 'Lato', sans-serif;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
}

.kh-sv__var-preis {
    display: block;
    margin-top: 2px;
    font-family: 'Montserrat', sans-serif;
    font-size: 11.5px;
    font-weight: 800;
    line-height: 1.2;
    white-space: nowrap;
}

.kh-sv__var-hinweis {
    display: block;
    margin-top: 2px;
    font-size: 9.5px;
    font-weight: 700;
    line-height: 1.2;
    color: #ffb4b4;
}

/* --- "Variante waehlen": der Knopf hebt die Reihe hervor ----------------- */
.kh-sv__buy.is-wahl {
    border-color: rgba(255, 255, 255, .55);
    background: rgba(17, 24, 39, .72);
}

.kh-sv__buy.is-wahl:hover {
    border-color: #fff;
    background: rgba(17, 24, 39, .85);
}

/* Kein Warenkorb-Zeichen, solange nichts gewaehlt ist — der Knopf legt ja
   nichts ab, er zeigt nach oben. */
.kh-sv__buy.is-wahl .kh-sv__buy-ic { display: none; }

@keyframes khSvHinweis {
    0%, 100% { transform: none; }
    20%, 60%  { transform: translateX(-5px); }
    40%, 80%  { transform: translateX(5px); }
}

.kh-sv__vars.is-hinweis .kh-sv__vars-rail { animation: khSvHinweis .5s ease; }

.kh-sv__vars.is-hinweis .kh-sv__var:not(.is-tot) {
    border-color: #fff;
}

/* --- "Zum Artikel" ------------------------------------------------------- */
.kh-sv__more {
    pointer-events: auto;
    align-self: center;
    margin: 2px 0 0;
    padding: 4px 8px;
    border: 0;
    background: none;
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-shadow: 0 1px 3px rgba(0, 0, 0, .6);
    cursor: pointer;
}

.kh-sv__more[hidden] { display: none; }
.kh-sv__more:hover { color: rgba(255, 255, 255, .82); }

/* --- Handy: etwas kleiner, damit Video sichtbar bleibt ------------------- */
@media (max-width: 767.98px) {
    .kh-sv__var { width: 70px; }
    .kh-sv__var.has-preis { width: 86px; }
    .kh-sv__vars-rail { padding-bottom: 2px; }
}

@media (prefers-reduced-motion: reduce) {
    .kh-sv__vars.is-hinweis .kh-sv__vars-rail { animation: none; }
    .kh-sv__var { transition: none; }
}