/**
 * IDF Woo Attribute Filter - die Filterleiste
 *
 * Sie sieht aus wie die Produktkarte darunter und nicht wie ein Formular: die
 * Werte sind dieselben Pillen wie in `[idf_attr_bars]`, die Farben dieselben
 * Quadrate wie in `[idf_attr_colors]`. Deshalb traegt der Wrapper die Klasse
 * `idf-attr-bars` **und** die Design-Werte aus dem Reiter „Einstellungen" als
 * Inline-Stil - wer dort die Pillenform aendert, aendert sie an beiden Stellen.
 *
 * Hier steht nur, was die Filterleiste zusaetzlich braucht: die Beschriftung
 * ueber den Werten, der gewaehlte Zustand und der Ladezustand.
 */

.idf-attr-filter {
    display: flex;
    flex-direction: column;
    gap: var(--idf-attr-filter-gap, 14px);
    margin: 0 0 var(--idf-attr-filter-abstand, 28px);
}

/* Nur fuer Screenreader. Bewusst nicht `screen-reader-text`: die Klasse
   gehoert dem Theme, und wo es sie nicht mitbringt, stuende „(gewaehlt)"
   sichtbar mitten in der Farbreihe. */
.idf-attr-filter__nurlesen {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.idf-attr-filter__kopf {
    display: flex;
    justify-content: var(--idf-attr-filter-reset-align, flex-end);
}

.idf-attr-filter__reset {
    font-size: var(--idf-attr-filter-reset-size, 0.85em);
    font-weight: var(--idf-attr-filter-reset-weight, 400);
    color: var(--idf-attr-filter-reset-color, inherit);
    text-decoration: underline;
}

/* Mit Flaeche oder Rahmen wird aus dem Link eine Schaltflaeche. Ob eine
   Custom Property gesetzt ist, kann CSS nicht abfragen - deshalb entscheidet
   das der Server ueber die Klasse. */
.idf-attr-filter__reset--knopf {
    display: inline-block;
    padding: 0.35em 0.9em;
    background: var(--idf-attr-filter-reset-bg, transparent);
    border: 1px solid var(--idf-attr-filter-reset-border, transparent);
    border-radius: var(--idf-attr-filter-reset-radius, var(--idf-attr-pill-radius));
    text-decoration: none;
}

/* Beschriftung ueber den Werten, nicht daneben: nebeneinander kostet jede
   Zeile ein Drittel ihrer Breite, und bei acht Attributen steht die Leiste
   dann als schmale Spalte da. Uebereinander laeuft jede Wertereihe ueber die
   volle Breite (07.09.2026). */
.idf-attr-filter__gruppe {
    display: flex;
    flex-direction: column;
    gap: var(--idf-attr-filter-titel-gap, 6px);
}

.idf-attr-filter__titel {
    font-size: var(--idf-attr-filter-titel-size, var(--idf-attr-bar-font-size));
    font-weight: var(--idf-attr-filter-titel-weight, 600);
    line-height: 1.3;
    color: var(--idf-attr-filter-titel-color, inherit);
}

.idf-attr-filter__werte {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--idf-attr-filter-werte-gap, 6px);
}

/* Wo das Skript einen Schieberegler gebaut hat, verschwindet die Pillenreihe.
   `!important`, weil `display: flex` darueber sonst das `hidden` des Browsers
   schlaegt - der Klassiker bei jedem Element, das man versteckt und zugleich
   als Flexbox auslegt. */
.idf-attr-filter__werte[hidden] {
    display: none !important;
}

/* Und schon vorher: mit JavaScript wird aus einer Zahlengruppe ohnehin ein
   Regler, also gar nicht erst die Pillen zeigen. Die Klasse setzt ein
   Zweizeiler direkt vor der Leiste - vor dem ersten Zeichnen. Ohne
   JavaScript greift die Regel nie und die Pillen bleiben. */
.idf-attr-js [data-idf-filter-zahlen] > .idf-attr-filter__werte {
    display: none;
}

/* Solange der Regler noch nicht steht, haelt die Gruppe seinen Platz frei -
   sonst springt die Seite, sobald er erscheint. Danach nicht mehr: eine
   Mindesthoehe, die bleibt, sieht aus wie ein zu grosser Abstand nach unten. */
.idf-attr-js [data-idf-filter-zahlen]:not([data-idf-regler-fertig]) {
    min-height: 3.4em;
}

.idf-attr-filter__gruppe--farben .idf-attr-filter__werte {
    gap: var(--idf-attr-filter-werte-gap, var(--idf-attr-swatch-gap));
}

/* Die Farbfelder der Leiste duerfen anders sein als die in der Karte: dort
   stehen sie als Angabe am Produkt, hier sind sie ein Bedienelement. */
.idf-attr-filter .idf-attr-bar__farbfeld {
    width: var(--idf-attr-filter-swatch-size, var(--idf-attr-swatch-size));
    height: var(--idf-attr-filter-swatch-size, var(--idf-attr-swatch-size));
    border-radius: var(--idf-attr-filter-swatch-radius, var(--idf-attr-swatch-radius));
}

/* Pillen: dieselbe Form wie in der Karte, aber anklickbar - deshalb Zeiger,
   Hover und ein sichtbarer Fokusring. Jeder der drei Zustaende laesst sich im
   Reiter „Filter" einzeln einstellen; leer heisst „wie in der Karte". */
.idf-attr-filter__pille {
    background: var(--idf-attr-filter-pille-bg, var(--idf-attr-pill-bg));
    border-color: var(--idf-attr-filter-pille-border, var(--idf-attr-pill-border));
    color: var(--idf-attr-filter-pille-text, var(--idf-attr-pill-text));
    border-radius: var(--idf-attr-filter-pille-radius, var(--idf-attr-pill-radius));
    font-size: var(--idf-attr-filter-pille-size, inherit);
    font-weight: var(--idf-attr-filter-pille-weight, 400);
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}

.idf-attr-filter__pille:hover,
.idf-attr-filter__pille:focus-visible {
    background: var(--idf-attr-filter-hover-bg, var(--idf-attr-filter-aktiv-bg, var(--idf-attr-pill-border)));
    border-color: var(--idf-attr-filter-hover-border, var(--idf-attr-filter-hover-bg, var(--idf-attr-filter-aktiv-bg, var(--idf-attr-pill-border))));
    color: var(--idf-attr-filter-hover-text, #fff);
}

/* Gewaehlt ist gefuellt. Nicht nur eine andere Randfarbe: der Unterschied muss
   auch dann zu sehen sein, wenn man die Leiste nur ueberfliegt. */
.idf-attr-filter__pille.is-aktiv {
    background: var(--idf-attr-filter-aktiv-bg, var(--idf-attr-pill-border));
    border-color: var(--idf-attr-filter-aktiv-border, var(--idf-attr-filter-aktiv-bg, var(--idf-attr-pill-border)));
    color: var(--idf-attr-filter-aktiv-text, #fff);
    font-weight: var(--idf-attr-filter-aktiv-weight, var(--idf-attr-filter-pille-weight, 600));
}

.idf-attr-filter__anzahl {
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

/* Farbfelder: das Quadrat kommt aus bars.css, hier kommt nur der Zustand dazu.
   Der Ring liegt aussen, damit er die Farbe nicht verfaelscht. */
.idf-attr-filter__farbe {
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--idf-attr-swatch-radius);
}

.idf-attr-filter__farbe:hover .idf-attr-bar__farbfeld,
.idf-attr-filter__farbe:focus-visible .idf-attr-bar__farbfeld {
    outline: 2px solid var(--idf-attr-filter-swatch-ring, var(--idf-attr-filter-aktiv-bg, var(--idf-attr-bar-color)));
    outline-offset: 2px;
}

.idf-attr-filter__farbe.is-aktiv .idf-attr-bar__farbfeld {
    outline: 3px solid var(--idf-attr-filter-swatch-ring, var(--idf-attr-filter-aktiv-bg, var(--idf-attr-bar-color)));
    outline-offset: 2px;
}

/* Der Tooltip gehoert zu bars.css; hier wird er nur auch bei Tastaturfokus
   gezeigt, weil die Filterleiste anders als die Karte bedienbar ist. */
.idf-attr-filter__farbe:focus-visible .idf-attr-bar__tip {
    opacity: 1;
    visibility: visible;
}

/* ---------------------------------------------------------------------------
   Grafiken

   Markenlogos und Piktogramme statt Pillen - eingestellt in der Liste im Reiter
   „Filter", Spalte „Darstellung".

   Das Bild bleibt unangetastet: kein Ausgrauen, kein Einfaerben, keine
   gefuellte Flaeche im gewaehlten Zustand. Ein Logo traegt seine eigenen Farben,
   und ein dunkles Logo auf gefuellter Flaeche waere nicht mehr zu erkennen. Die
   Auswahl zeigt deshalb der Rahmen - und zwar ueber `box-shadow` statt ueber
   eine zweite Rahmenbreite, sonst ruecken beim Anklicken alle Nachbarn um einen
   Pixel.
--------------------------------------------------------------------------- */

.idf-attr-filter__gruppe--grafiken .idf-attr-filter__werte {
    gap: var(--idf-attr-filter-grafik-gap, var(--idf-attr-icon-gap));
}

.idf-attr-filter__grafik {
    align-items: center;
    padding: var(--idf-attr-filter-grafik-padding, 6px);
    background: var(--idf-attr-filter-grafik-bg, transparent);
    border: 1px solid var(--idf-attr-filter-grafik-border, var(--idf-attr-filter-pille-border, var(--idf-attr-pill-border)));
    border-radius: var(--idf-attr-filter-grafik-radius, var(--idf-attr-filter-pille-radius, var(--idf-attr-pill-radius)));
    text-decoration: none;
    cursor: pointer;
    transition: border-color 0.12s ease, background-color 0.12s ease, box-shadow 0.12s ease;
}

/* Hoehe allein reicht bei Logos nicht.

   Piktogramme sind ungefaehr quadratisch, Markenlogos nicht: eine Wortmarke mit
   6:1 wird bei 32 px Hoehe 193 px breit und steht neben einem quadratischen
   Logo wie ein Plakat neben einer Briefmarke (10.09.2026, Seven Seas neben ID
   Identity). Deshalb begrenzt eine zweite Kante die Breite.

   `object-fit: contain` haelt dabei das Seitenverhaeltnis: greift die
   Breitengrenze, rueckt das Bild INNERHALB der Zeilenhoehe zusammen, statt
   gestaucht zu werden. Die Kachel behaelt ihre Hoehe, die Reihe bleibt ruhig. */
.idf-attr-filter__grafik .idf-attr-bar__grafik {
    height: var(--idf-attr-filter-grafik-height, var(--idf-attr-icon-height));
    width: auto;
    max-width: var(
        --idf-attr-filter-grafik-max-width,
        calc(var(--idf-attr-filter-grafik-height, var(--idf-attr-icon-height, 32px)) * 2.5)
    );
    object-fit: contain;
}

.idf-attr-filter__grafik:hover,
.idf-attr-filter__grafik:focus-visible {
    border-color: var(--idf-attr-filter-hover-bg, var(--idf-attr-filter-aktiv-bg, var(--idf-attr-pill-border)));
}

.idf-attr-filter__grafik.is-aktiv {
    border-color: var(--idf-attr-filter-aktiv-bg, var(--idf-attr-pill-border));
    box-shadow: 0 0 0 1px var(--idf-attr-filter-aktiv-bg, var(--idf-attr-pill-border));
}

/* ---------------------------------------------------------------------------
   Schieberegler fuer Zahlenwerte

   Zwei uebereinanderliegende `input[type=range]`: das ist der einzige Weg zu
   zwei Griffen ohne fremde Bibliothek. Die Bahn zeichnet der Container, die
   Regler selbst sind unsichtbar bis auf ihre Griffe, und `pointer-events`
   schaltet nur die Griffe scharf - sonst faenge der obere Regler jeden Klick
   ab und der untere waere nie erreichbar.
--------------------------------------------------------------------------- */

/* Der Regler soll so hoch bauen wie eine Pillenreihe daneben - sonst steht
   die Zeile aus der Reihe. */
.idf-attr-filter__regler {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: var(--idf-attr-filter-regler-breite, 320px);
}

.idf-attr-filter__bahn {
    position: relative;
    height: 18px;
}

/* Die Spur und die gewaehlte Strecke darauf. */
.idf-attr-filter__bahn::before,
.idf-attr-filter__strecke {
    content: "";
    position: absolute;
    top: 50%;
    height: var(--idf-attr-filter-regler-hoehe, 4px);
    border-radius: 999px;
    transform: translateY(-50%);
}

/* Die Spur traegt die Farbe einer nicht gewaehlten Pille, die Strecke darauf
   die des gewaehlten Zustands - der Regler steht neben Pillenreihen und soll
   dieselbe Aussage machen: das hier ist offen, das hier ist gewaehlt. */
.idf-attr-filter__bahn::before {
    left: 0;
    right: 0;
    background: var(--idf-attr-filter-pille-border, var(--idf-attr-pill-border, var(--idf-attr-bar-track)));
    opacity: var(--idf-attr-filter-regler-spur-deckkraft, 0.35);
}

/* Solange der ganze Bereich offen steht, ist nichts eingeschraenkt - dann
   traegt auch die Strecke die Farbe einer offenen Pille. Erst eine echte
   Auswahl faerbt sie im gewaehlten Zustand, genau wie eine angeklickte Pille. */
.idf-attr-filter__strecke {
    background: var(--idf-attr-filter-pille-border, var(--idf-attr-pill-border, var(--idf-attr-bar-color)));
}

.idf-attr-filter__regler.is-aktiv .idf-attr-filter__strecke {
    background: var(--idf-attr-filter-aktiv-bg, var(--idf-attr-pill-border, var(--idf-attr-bar-color)));
}

.idf-attr-filter__griff {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 18px;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
    appearance: none;
    -webkit-appearance: none;
    pointer-events: none;
}

.idf-attr-filter__griff:focus-visible {
    outline: none;
}

.idf-attr-filter__griff::-webkit-slider-thumb {
    -webkit-appearance: none;
    pointer-events: auto;
    width: var(--idf-attr-filter-regler-griff, 16px);
    height: var(--idf-attr-filter-regler-griff, 16px);
    border-radius: 50%;
    background: var(--idf-attr-filter-pille-border, var(--idf-attr-pill-border, var(--idf-attr-bar-color)));
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    cursor: grab;
}

.idf-attr-filter__griff::-moz-range-thumb {
    pointer-events: auto;
    width: var(--idf-attr-filter-regler-griff, 16px);
    height: var(--idf-attr-filter-regler-griff, 16px);
    border-radius: 50%;
    background: var(--idf-attr-filter-pille-border, var(--idf-attr-pill-border, var(--idf-attr-bar-color)));
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .3);
    cursor: grab;
}

.idf-attr-filter__griff:focus-visible::-webkit-slider-thumb {
    outline: 2px solid var(--idf-attr-bar-color);
    outline-offset: 2px;
}

.idf-attr-filter__griff:focus-visible::-moz-range-thumb {
    outline: 2px solid var(--idf-attr-bar-color);
    outline-offset: 2px;
}

/* Die Griffe ziehen mit der Strecke mit. */
.idf-attr-filter__regler.is-aktiv .idf-attr-filter__griff::-webkit-slider-thumb {
    background: var(--idf-attr-filter-aktiv-bg, var(--idf-attr-pill-border, var(--idf-attr-bar-color)));
}

.idf-attr-filter__regler.is-aktiv .idf-attr-filter__griff::-moz-range-thumb {
    background: var(--idf-attr-filter-aktiv-bg, var(--idf-attr-pill-border, var(--idf-attr-bar-color)));
}

/* Die gewaehlte Spanne in Worten - der Regler allein sagt nicht, wo er steht,
   und auf Touch verdeckt der Finger den Griff. */
.idf-attr-filter__spanne {
    margin: 0;
    line-height: 1.3;
    font-size: var(--idf-attr-filter-pille-size, var(--idf-attr-bar-font-size));
    font-variant-numeric: tabular-nums;
}

/* ---------------------------------------------------------------------------
   Groessen

   Darstellung „Groesse" im Reiter „Filter": je Groessensystem ein Regler, die
   Regler untereinander, unter jedem sein System mit der gewaehlten Spanne
   („Normal: 32 bis 66"). Masse und Einheitsgroesse haben keine Achse und
   stehen als Pillen darunter.

   Ohne JavaScript stehen die Systeme ebenso untereinander, jedes mit seinem
   Namen ueber den Pillen.
--------------------------------------------------------------------------- */

.idf-attr-filter__system {
    display: flex;
    flex-direction: column;
    gap: var(--idf-attr-filter-titel-gap, 6px);
}

.idf-attr-filter__systemname {
    font-size: var(--idf-attr-filter-pille-size, var(--idf-attr-bar-font-size));
    line-height: 1.3;
    opacity: 0.75;
}

/* Mit JavaScript steht der Name eines Systems in der Spanne unter seinem
   Regler („Normal: 32 bis 66"), darueber waere er doppelt. Ein System ohne
   Regler (unter drei Stufen) behaelt ihn ueber seinen Pillen; in der
   gemeinsamen Reihe von Massen und Einheitsgroesse erklaeren sich die Werte
   selbst. */
.idf-attr-js .idf-attr-filter__gruppe--groessen [data-idf-filter-zahlen] > .idf-attr-filter__systemname,
.idf-attr-js .idf-attr-filter__gruppe--groessen .idf-attr-filter__listen .idf-attr-filter__systemname {
    display: none;
}

/* Masse, Einheitsgroesse und Weitere: ohne Skript je System ein Block mit
   Namen, mit Skript eine gemeinsame Pillenreihe unter dem Regler. Einzeln
   untereinander sahen zwei Pillen aus wie zwei eigene Filter. */
.idf-attr-filter__listen {
    display: flex;
    flex-direction: column;
    gap: var(--idf-attr-filter-titel-gap, 6px);
}

.idf-attr-js .idf-attr-filter__gruppe--groessen .idf-attr-filter__listen {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--idf-attr-filter-werte-gap, 6px);
}

.idf-attr-js .idf-attr-filter__listen > .idf-attr-filter__system,
.idf-attr-js .idf-attr-filter__listen .idf-attr-filter__werte {
    display: contents;
}

/* Abstand unter einem Regler: zum naechsten Regler und zu den Pillen darunter.
   Die Gruppe stellt ihre Teile schon mit dem Abstand der Beschriftung
   auseinander; der Rand ergaenzt nur, was bis zum eingestellten Wert fehlt,
   sonst waeren es beide zusammen. Nur hinter einem Groessensystem: stehen
   allein Masse in der Gruppe, gibt es keinen Regler, von dem Abstand zu
   halten waere. Mit 10 px Abstand der Beschriftung klebten die Pillen unter
   der Spanne (13.09.2026). */
.idf-attr-js .idf-attr-filter__gruppe--groessen .idf-attr-filter__system + .idf-attr-filter__system,
.idf-attr-js .idf-attr-filter__gruppe--groessen .idf-attr-filter__system ~ .idf-attr-filter__listen {
    margin-top: max(0px, calc(var(--idf-attr-filter-regler-abstand, 20px) - var(--idf-attr-filter-titel-gap, 6px)));
}

/* Themes geben Absaetzen einen Aussenabstand; alles, was hier Text traegt, ist
   deshalb ein `div` und bekommt seine Abstaende von hier. */
.idf-attr-filter div,
.idf-attr-filter p {
    margin-top: 0;
}

/* Karten, die nicht zur Auswahl passen.

   `!important`, weil die Karte aus einem fremden Raster kommt und dessen
   Regeln (`display: flex` auf der Spalte) sonst gewinnen. */
.idf-attr-filter-weg {
    display: none !important;
}

/* Wenn die Auswahl nichts uebrig laesst. Steht direkt unter der Leiste, nicht
   im leeren Raster - dort wuerde sie im Zweifel gar nicht auffallen. */
.idf-attr-filter-leer {
    margin: 0 0 24px;
    padding: 12px 14px;
    background: rgba(0, 0, 0, 0.04);
    border-radius: 3px;
    font-size: var(--idf-attr-bar-font-size);
}

/* Waehrend nachgeladen wird, bleibt alles stehen und wird blass. Ein Skelett
   oder ein Spinner waere mehr Bewegung als Information - der Austausch dauert
   den Bruchteil einer Sekunde. */
.idf-attr-filter-laedt {
    opacity: 0.45;
    pointer-events: none;
    transition: opacity 0.15s ease;
}