/* ================================================================
   STREETEC Product Image Badges - Variante C "Modern Performance"
   Verbindliche Referenz: docs/product-badges/STREETEC Product Image Badges – Guide Variante C.md
   Der Social-Media-Export (Services/BadgeImageRenderer.cs) bildet diese Maße 1:1 nach -
   Änderungen an Geometrie, Farben oder Typografie immer in beiden Dateien nachziehen.
   ================================================================ */

/* Self-hosted Barlow Condensed (latin), nur die von Variante C genutzten Schnitte. Eigener Familienname,
   damit das Theme (das "Barlow Condensed" ggf. selbst lädt) unberührt bleibt. */
@font-face { font-family: "SB Barlow Condensed"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/barlow-condensed-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "SB Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "SB Barlow Condensed"; font-style: italic; font-weight: 600; font-display: swap; src: url("../fonts/barlow-condensed-latin-600-italic.woff2") format("woff2"); }
@font-face { font-family: "SB Barlow Condensed"; font-style: italic; font-weight: 700; font-display: swap; src: url("../fonts/barlow-condensed-latin-700-italic.woff2") format("woff2"); }
@font-face { font-family: "SB Barlow Condensed"; font-style: italic; font-weight: 800; font-display: swap; src: url("../fonts/barlow-condensed-latin-800-italic.woff2") format("woff2"); }

:root {
    --sb-brand: #C0272D;
    --sb-on-brand: #FFFFFF;
    --sb-plate: rgba(26,26,26,.90);
    --sb-fg: #FFFFFF;
    --sb-fg2: #B9C0C7;
    --sb-shadow: rgba(0,0,0,.32);
    --sb-slant: .7em;
    --sb-joint: .18em;
}

.sb--light { --sb-plate: rgba(255,255,255,.94); --sb-fg: #1A1A1A; --sb-fg2: #555B61; }

/* ---------- Host & Frame ----------
   Das Script setzt .sb-host auf den Bild-Container (Galerie: .gal-item-viewport, Kachel: .art-picture) und hängt
   .sb-frame an. Der Frame liegt absolut über dem Container; nur er bekommt container-type, damit die Größe des
   bestehenden Containers nie von der Containment-Regel abhängt. */
.sb-host  { position: relative; }
.sb-frame { position: absolute; inset: 0; z-index: 2; pointer-events: none; container-type: inline-size; container-name: sb; }

.sb-overlay {
    position: absolute;
    display: flex;
    gap: .43em;
    pointer-events: none;
    font-size: 14px;                                 /* M */
    --sb-edge: max(8px, 3.5cqi);
}

/* Priorität 1 sitzt am Bildrand: DOM-Reihenfolge = Priorität. */
.sb-pos-bl { left: var(--sb-edge); bottom: var(--sb-edge); flex-direction: column-reverse; align-items: flex-start; }
.sb-pos-br { right: var(--sb-edge); bottom: var(--sb-edge); flex-direction: column-reverse; align-items: flex-end; }
.sb-pos-tl { left: var(--sb-edge); top: var(--sb-edge); flex-direction: column; align-items: flex-start; }

@container sb (260px <= width < 480px) { .sb-overlay { font-size: 12px; } }   /* S */
@container sb (min-width: 800px)       { .sb-overlay { font-size: 17px; } }   /* L */

/* ---------- Badge ---------- */
.sb {
    display: inline-flex;
    align-items: stretch;
    line-height: 1;
    font-family: "SB Barlow Condensed", "Barlow Condensed", "Arial Narrow", sans-serif;
    font-variant-numeric: tabular-nums lining-nums;
    filter: drop-shadow(0 1px 1.5px var(--sb-shadow));
}

.sb-value {
    background: var(--sb-brand);
    color: var(--sb-on-brand);
    font-style: italic;
    display: flex;
    align-items: baseline;
    gap: .14em;
    white-space: nowrap;
    padding: .3em 1.15em .28em .68em;
    clip-path: polygon(0 0, 100% 0, calc(100% - var(--sb-slant)) 100%, 0 100%);
}

.sb-q    { font-weight: 600; }
.sb-num  { font-weight: 800; font-size: 2.05em; letter-spacing: -.01em; }
.sb-unit { font-weight: 700; font-size: 1.1em; }

/* Trägt das U+202F zwischen Wert und Einheit (Copy & Paste, Semantik). Der latin-Subset enthält die Glyphe nicht -
   die Breite ist deshalb fest, der Abstand ergibt sich aus den beiden Flex-Gaps. */
.sb-sep  { width: 0; overflow: hidden; align-self: stretch; }

.sb-text {
    margin-left: calc(var(--sb-joint) - var(--sb-slant));
    background: var(--sb-plate);
    padding: 0 1.3em 0 1.25em;
    max-width: 12em;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: .22em;
    clip-path: polygon(var(--sb-slant) 0, 100% 0, calc(100% - var(--sb-slant)) 100%, 0 100%);
}

.sb-label {
    font-weight: 700;
    font-size: .8em;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--sb-fg);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-label2 {
    font-weight: 500;
    font-size: .72em;
    color: var(--sb-fg2);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sb-short { display: none; }

/* ---------- Maximale Anzahl je Stufe ---------- */
.sb-overlay > .sb:nth-child(n+4) { display: none; }                                   /* M, L: 3 */
@container sb (width < 480px) { .sb-overlay > .sb:nth-child(n+3) { display: none; } }   /* S, XS: 2 */
@container sb (width < 180px) { .sb-overlay > .sb:nth-child(n+2) { display: none; } }   /* mobile Kachel: 1 */

/* ---------- XS: nur Wertfeld, Kurzlabel ab 200 px Bildbreite ---------- */
@container sb (max-width: 259px) {
    .sb-overlay { font-size: 10px; gap: 4px; --sb-edge: 8px; }
    .sb         { height: 2.3em; }
    .sb-value   { --sb-slant: .6em; align-items: center; padding: 0 1em 0 .6em; }
    .sb-num     { font-size: 1.45em; }
    .sb-text, .sb-label2 { display: none; }
}

@container sb (200px <= width < 260px) {
    .sb-short {
        display: flex;
        align-items: center;
        margin-left: -.42em;
        padding: 0 .9em 0 1em;
        background: var(--sb-plate);
        color: var(--sb-fg);
        font-weight: 700;
        font-size: .95em;
        letter-spacing: .06em;
        text-transform: uppercase;
        clip-path: polygon(.6em 0, 100% 0, calc(100% - .6em) 100%, 0 100%);
    }
}

/* ---------- Fallback ohne Container Queries ----------
   Stufe M bleibt; in Kacheln setzt das Script .sb-overlay--xs. */
@supports not (container-type: inline-size) {
    .sb-overlay { --sb-edge: 8px; }
    .sb-overlay--xs { font-size: 10px; gap: 4px; }
    .sb-overlay--xs > .sb:nth-child(n+3) { display: none; }
    .sb-overlay--xs .sb       { height: 2.3em; }
    .sb-overlay--xs .sb-value { --sb-slant: .6em; align-items: center; padding: 0 1em 0 .6em; }
    .sb-overlay--xs .sb-num   { font-size: 1.45em; }
    .sb-overlay--xs .sb-text  { display: none; }
}

/* ---------- Zoom, Lightbox, Thumbnails: kein Overlay ---------- */
.is-zoomed .sb-frame,
.pswp .sb-frame,
.gal-nav .sb-frame,
.thumbs .sb-frame { display: none; }