/* ==========================================================================
 * SINEOS Fahrzeuglack finden
 *
 * Designsystem 1:1 vom Produktfinder der Startseite übernommen (CMS-Element
 * "lv-finder"): Primärblau #406ebb, Akzent #df0c73, Rahmen #cbd7e8,
 * Radius 5px, getönte Köpfe mit Farbstreifen, weisse Karten auf #f5f7fb.
 *
 * Fertiges CSS statt SCSS unter app/storefront: das Theme führt in theme.json
 * unter "style" keinen Platzhalter @Plugins, Plugin-SCSS würde hier nicht
 * kompiliert. Eingebunden über layout/meta.html.twig.
 *
 * Aufbau
 *   1  Tokens            6  Ergebnisse
 *   2  Leiste            7  Karten
 *   3  Auswahlfelder     8  Zustände (Laden, Overlay, Toast)
 *   4  Menüs             9  Eingeklappt / Tablet / Smartphone
 *   5  Knöpfe           10  Reduzierte Bewegung
 * ======================================================================== */

/* 1 ─ Tokens ─────────────────────────────────────────────────────────── */

.scf,
.scf-overlay {
    --scf-primary: #406ebb;
    --scf-primary-dark: #345c9e;
    --scf-primary-darker: #2b4c82;
    --scf-primary-lighter: #eaf0fa;
    --scf-accent: #df0c73;
    --scf-accent-dark: #b80a5e;
    --scf-accent-lighter: #fdeef5;
    --scf-dark: #2c3e5f;
    --scf-gray: #5e6b7d;
    --scf-gray-muted: #97a3b4;
    --scf-gray-light: #eef2f8;
    --scf-body: #f5f7fb;
    --scf-white: #fff;
    --scf-border: #cbd7e8;
    --scf-radius: 5px;
    --scf-shadow: 0 1px 2px rgba(44, 62, 95, .05);
    --scf-shadow-hover: 0 3px 12px rgba(44, 62, 95, .13);
    --scf-shadow-pop: 0 14px 36px -8px rgba(28, 41, 64, .28);
    --scf-focus: 0 0 0 3px rgba(64, 110, 187, .28);
    --scf-inset: 0px;
    --scf-stripe: linear-gradient(90deg, #e5007d 0 8.333%, #c0392b 8.333% 16.666%, #df7d2b 16.666% 25%, #ffd500 25% 33.333%, #95c11f 33.333% 41.666%, #1d9e75 41.666% 50%, #009fe3 50% 58.333%, #2f6fae 58.333% 66.666%, #28407a 66.666% 75%, #6a4bb0 75% 83.333%, #8e2f6b 83.333% 91.666%, #3a3f45 91.666% 100%);
    --scf-i-car: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 15.5V12l1.8-4.6A2 2 0 0 1 7.7 6h8.6a2 2 0 0 1 1.9 1.4L20 12v3.5a1 1 0 0 1-1 1h-1.3M6.3 16.5H5a1 1 0 0 1-1-1M4 12h16M9.8 16.5h4.4'/%3E%3Ccircle cx='8' cy='16.5' r='1.8'/%3E%3Ccircle cx='16' cy='16.5' r='1.8'/%3E%3C/svg%3E");
    --scf-i-calendar: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='5' width='17' height='15.5' rx='2'/%3E%3Cpath d='M3.5 10h17M8 3v4M16 3v4'/%3E%3C/svg%3E");
    --scf-i-drop: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5c3.4 4 6 7.5 6 10.5a6 6 0 0 1-12 0c0-3 2.6-6.5 6-10.5z'/%3E%3C/svg%3E");
    --scf-i-hash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9h14M5 15h14M10 4 8 20M16 4l-2 16'/%3E%3C/svg%3E");
    --scf-i-tag: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12.3V4.5a1 1 0 0 1 1-1h7.8l8.2 8.2a1.5 1.5 0 0 1 0 2.1l-6.7 6.7a1.5 1.5 0 0 1-2.1 0z'/%3E%3Ccircle cx='8' cy='8' r='1.4'/%3E%3C/svg%3E");
    --scf-i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E");
    --scf-i-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    --scf-i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E");
    --scf-i-bookmark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h11v17l-5.5-4-5.5 4z'/%3E%3C/svg%3E");
    --scf-i-bookmarkFilled: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6.5 3.5h11v17l-5.5-4-5.5 4z' fill='black'/%3E%3C/svg%3E");
    --scf-i-link: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M10 14a4.5 4.5 0 0 0 6.4 0l3-3a4.5 4.5 0 0 0-6.4-6.4l-1.2 1.2'/%3E%3Cpath d='M14 10a4.5 4.5 0 0 0-6.4 0l-3 3a4.5 4.5 0 0 0 6.4 6.4l1.2-1.2'/%3E%3C/svg%3E");
    --scf-i-reset: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 4v5h5'/%3E%3Cpath d='M5.1 15a7.5 7.5 0 1 0 1.8-7.8L4 9'/%3E%3C/svg%3E");
    --scf-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12.5 4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}

/* Seitlicher Einzug zusätzlich zum Container-Innenabstand – wie im Theme:
   der Kopf (.sin-custom-header-wrapper, $headerPadding) und die CMS-Blöcke
   rücken ab 576px je 20px ein. Leiste, Logo, Warenkorb und Seiteninhalt
   stehen damit in einer Flucht; darunter bündig mit dem Kopf. */
@media (min-width: 576px) {
    .scf,
    .scf-overlay {
        --scf-inset: 20px;
    }
}

.scf {
    position: relative;
    color: var(--scf-dark);
    background: var(--scf-primary-lighter);
    border-bottom: 1px solid var(--scf-border);
    font-size: 14px;
    line-height: 1.4;
    -webkit-font-smoothing: antialiased;
}

/* Farbstreifen am unteren Rand – wie im Kopf des Produktfinders */
.scf::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1px;
    height: 4px;
    background: var(--scf-stripe);
    pointer-events: none;
}

.scf *,
.scf *::before,
.scf *::after {
    box-sizing: border-box;
}

.scf button,
.scf input {
    font-family: inherit;
}

.scf [hidden] {
    display: none !important;
}

/* Stapelung
   Die Leiste folgt im DOM auf Kopf und Navigation und enthält positionierte
   Elemente. Ein Dropdown des Themes ohne eigenen z-index (Konto/Login je nach
   Stand) würde deshalb von ihr verdeckt – DOM-Reihenfolge schlägt. Kopf und
   Navigation bekommen daher eine eigene Ebene über der Leiste; alles darin
   (Konto-Dropdown, Suchvorschläge, Flyouts) liegt dann sicher obenauf.
   :where() hält die Spezifität bei 0 – Theme-Regeln und die Inline-Styles des
   Sticky-Headers (1000/999) gewinnen weiterhin. Unter der Abdunklung (1040)
   bleiben beide, damit geöffnete Vorschläge den Kopf mit abdunkeln. */
:where(.header-main) {
    position: relative;
    z-index: 910;
}

:where(.nav-main) {
    position: relative;
    z-index: 905;
}

/* Die Leiste selbst: im Ruhezustand ohne z-index, mit offenem Menü über dem
   Seiteninhalt (Slider & Co.), mit offenen Vorschlägen über der Abdunklung. */
.scf.has-menu {
    z-index: 900;
}

.scf.is-open {
    z-index: 1045;
}

.scf__container {
    position: relative;
}

/* Maskierte Icons: Form aus der SVG-Maske, Farbe aus background-color */
.scf-field__icon,
.scf-field__caret,
.scf-field__clear::before,
.scf-icon-btn::before,
.scf-menu__reset::before,
.scf-chip__x::before,
.scf-bar__expand-icon,
.scf-option.is-active::after {
    -webkit-mask: var(--scf-icon) center / contain no-repeat;
    mask: var(--scf-icon) center / contain no-repeat;
}

/* 2 ─ Leiste ─────────────────────────────────────────────────────────── */

.scf-bar {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: "head fields actions";
    align-items: center;
    gap: 10px 16px;
    padding: 10px var(--scf-inset) 14px;
}

.scf-bar__head {
    grid-area: head;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

/* Farbrad als Logo – dieselben zwölf Töne wie der Streifen */
.scf-bar__logo {
    position: relative;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: conic-gradient(#e5007d, #c0392b, #df7d2b, #ffd500, #95c11f, #1d9e75, #009fe3, #2f6fae, #28407a, #6a4bb0, #8e2f6b, #3a3f45, #e5007d);
    box-shadow: 0 1px 3px rgba(44, 62, 95, .25);
}

.scf-bar__logo::after {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    background: var(--scf-primary-lighter);
}

.scf-bar__titles {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.scf-bar__title {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--scf-dark);
    white-space: nowrap;
}

.scf-bar__subtitle {
    max-width: 210px;
    overflow: hidden;
    font-size: 12px;
    line-height: 1.35;
    color: var(--scf-gray);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.scf-bar.has-selection .scf-bar__subtitle {
    font-weight: 600;
    color: var(--scf-primary-darker);
}

.scf-bar__summary-part + .scf-bar__summary-part::before {
    content: " · ";
    font-weight: 400;
    color: var(--scf-gray);
}

/* Nur im eingeklappten Zustand sichtbar */
.scf-bar__expand {
    display: none;
}

.scf-bar__fields {
    grid-area: fields;
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 8px;
    min-width: 0;
}

.scf-bar__actions {
    grid-area: actions;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* 3 ─ Auswahlfelder ──────────────────────────────────────────────────── */

.scf-field {
    position: relative;
    min-width: 0;
}

.scf-field--source    { --scf-field-icon: var(--scf-i-car); }
.scf-field--year      { --scf-field-icon: var(--scf-i-calendar); }
.scf-field--colorGroup { --scf-field-icon: var(--scf-i-drop); }
.scf-field--colorCode { --scf-field-icon: var(--scf-i-hash); }
.scf-field--colorName { --scf-field-icon: var(--scf-i-tag); }

.scf-field__toggle {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    height: 46px;
    margin: 0;
    padding: 0 28px 0 10px;
    text-align: left;
    color: var(--scf-dark);
    background: var(--scf-white);
    border: 1px solid var(--scf-border);
    border-radius: var(--scf-radius);
    box-shadow: var(--scf-shadow);
    cursor: pointer;
    transition: border-color .18s, box-shadow .18s;
}

.scf-field__toggle:hover {
    border-color: var(--scf-primary);
}

.scf-field__toggle:focus-visible,
.scf-field__toggle[aria-expanded="true"] {
    outline: 0;
    border-color: var(--scf-primary);
    box-shadow: var(--scf-focus);
}

.scf-field__icon {
    --scf-icon: var(--scf-field-icon);
    flex: 0 0 16px;
    height: 16px;
    background-color: var(--scf-primary);
}

.scf-field__text {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.scf-field__label,
.scf-field__value {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.scf-field__label {
    font-size: 10.5px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--scf-gray);
}

.scf-field__value {
    font-size: 13.5px;
    line-height: 1.35;
    color: var(--scf-gray);
}

.scf-field__caret {
    --scf-icon: var(--scf-i-chevron);
    position: absolute;
    top: 50%;
    right: 10px;
    width: 11px;
    height: 11px;
    margin-top: -5.5px;
    background-color: var(--scf-gray);
    transition: transform .18s;
}

.scf-field__toggle[aria-expanded="true"] .scf-field__caret {
    transform: rotate(180deg);
}

/* Gewählt: blauer Rahmen, Wert in Blau, × statt Pfeil – ohne Schatten */
.scf-field.is-set .scf-field__toggle {
    padding-right: 32px;
    border-color: var(--scf-primary);
    box-shadow: none;
}

.scf-field.is-set .scf-field__toggle:focus-visible,
.scf-field.is-set .scf-field__toggle[aria-expanded="true"] {
    box-shadow: var(--scf-focus);
}

.scf-field.is-set .scf-field__value {
    font-weight: 700;
    color: var(--scf-primary-darker);
}

.scf-field.is-set .scf-field__caret {
    display: none;
}

.scf-field__clear {
    position: absolute;
    top: 50%;
    right: 7px;
    z-index: 1;
    width: 22px;
    height: 22px;
    margin: -11px 0 0;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--scf-primary-lighter);
    cursor: pointer;
    transition: background-color .18s;
}

.scf-field__clear::before {
    --scf-icon: var(--scf-i-x);
    content: "";
    position: absolute;
    inset: 6px;
    background-color: var(--scf-primary-darker);
}

.scf-field__clear:hover,
.scf-field__clear:focus-visible {
    outline: 0;
    background: var(--scf-accent);
}

.scf-field__clear:hover::before,
.scf-field__clear:focus-visible::before {
    background-color: var(--scf-white);
}

/* Deaktiviert: gestrichelt und blass, aber in der Leiste an seinem Platz */
.scf-field.is-disabled .scf-field__toggle {
    cursor: not-allowed;
    background: #f4f7fb;
    border-style: dashed;
    box-shadow: none;
}

.scf-field.is-disabled .scf-field__icon,
.scf-field.is-disabled .scf-field__caret {
    background-color: #b3bfcf;
}

.scf-field.is-disabled .scf-field__label,
.scf-field.is-disabled .scf-field__value {
    color: var(--scf-gray-muted);
}

/* 4 ─ Menüs ──────────────────────────────────────────────────────────── */

.scf-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    width: max(100%, 290px);
    max-width: calc(100vw - 24px);
    overflow: hidden;
    background: var(--scf-white);
    border: 1px solid var(--scf-border);
    border-radius: var(--scf-radius);
    box-shadow: var(--scf-shadow-pop);
    animation: scf-pop .16s ease-out;
}

/* Die hinteren Felder klappen nach links auf, damit nichts aus dem Bild ragt */
.scf-field:nth-child(n+4) .scf-menu {
    right: 0;
    left: auto;
}

.scf-menu__search {
    padding: 8px;
    background: var(--scf-body);
    border-bottom: 1px solid var(--scf-gray-light);
}

.scf-menu__input {
    display: block;
    width: 100%;
    height: 36px;
    margin: 0;
    padding: 0 10px 0 32px;
    font-size: 14px;
    color: var(--scf-dark);
    background: var(--scf-white);
    border: 1px solid var(--scf-border);
    border-radius: var(--scf-radius);
    -webkit-appearance: none;
    appearance: none;
}

.scf-menu__search {
    position: relative;
}

.scf-menu__search::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 18px;
    width: 14px;
    height: 14px;
    margin-top: -7px;
    background-color: var(--scf-gray);
    -webkit-mask: var(--scf-i-search) center / contain no-repeat;
    mask: var(--scf-i-search) center / contain no-repeat;
    pointer-events: none;
}

.scf-menu__input:focus {
    outline: 0;
    border-color: var(--scf-primary);
    box-shadow: var(--scf-focus);
}

.scf-menu__input::-webkit-search-cancel-button {
    cursor: pointer;
}

.scf-menu__list {
    max-height: 330px;
    padding: 4px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.scf-menu__group + .scf-menu__group {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid var(--scf-gray-light);
}

.scf-menu__group-title {
    padding: 8px 8px 4px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--scf-gray);
}

.scf-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    min-height: 36px;
    margin: 0;
    padding: 6px 8px;
    font-size: 14px;
    line-height: 1.3;
    text-align: left;
    color: var(--scf-dark);
    background: transparent;
    border: 0;
    border-radius: 4px;
    cursor: pointer;
}

.scf-option:hover,
.scf-option:focus-visible {
    outline: 0;
    background: var(--scf-primary-lighter);
}

.scf-option.is-active {
    font-weight: 700;
    color: var(--scf-primary-darker);
    background: var(--scf-primary-lighter);
}

.scf-option.is-active::after {
    --scf-icon: var(--scf-i-check);
    content: "";
    order: 2;
    flex: 0 0 14px;
    height: 14px;
    background-color: var(--scf-primary);
}

.scf-option__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.scf-option__hint {
    flex: 0 1 auto;
    min-width: 0;
    max-width: 48%;
    overflow: hidden;
    font-size: 12px;
    font-weight: 400;
    color: var(--scf-gray);
    white-space: nowrap;
    text-overflow: ellipsis;
}

.scf-option__count {
    flex: 0 0 auto;
    order: 3;
    min-width: 30px;
    padding: 2px 7px;
    font-size: 11.5px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--scf-gray);
    background: var(--scf-gray-light);
    border-radius: 999px;
}

.scf-option.is-active .scf-option__count {
    color: var(--scf-white);
    background: var(--scf-primary);
}

.scf-menu__reset {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    margin: 0 0 4px;
    padding: 9px 8px;
    font-size: 13px;
    font-weight: 600;
    text-align: left;
    color: var(--scf-accent);
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--scf-gray-light);
    cursor: pointer;
}

.scf-menu__reset::before {
    --scf-icon: var(--scf-i-x);
    content: "";
    flex: 0 0 12px;
    height: 12px;
    background-color: currentColor;
}

.scf-menu__reset:hover,
.scf-menu__reset:focus-visible {
    outline: 0;
    background: var(--scf-accent-lighter);
}

.scf-menu__empty {
    margin: 0;
    padding: 16px 12px;
    font-size: 13px;
    text-align: center;
    color: var(--scf-gray);
}

/* 5 ─ Knöpfe ─────────────────────────────────────────────────────────── */

.scf-btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 46px;
    margin: 0;
    padding: 0 18px;
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
    text-decoration: none;
    border: 1px solid transparent;
    border-radius: var(--scf-radius);
    cursor: pointer;
    transition: background-color .18s, border-color .18s, color .18s, box-shadow .18s;
}

.scf-btn--secondary {
    height: 40px;
    color: var(--scf-dark);
    background: var(--scf-white);
    border-color: var(--scf-border);
}

.scf-btn--secondary:hover,
.scf-btn--secondary:focus-visible {
    outline: 0;
    color: var(--scf-primary);
    border-color: var(--scf-primary);
}

.scf-icon-btn {
    position: relative;
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    margin: 0;
    padding: 0;
    background: var(--scf-white);
    border: 1px solid var(--scf-border);
    border-radius: var(--scf-radius);
    cursor: pointer;
    transition: border-color .18s;
}

.scf-icon-btn::before {
    content: "";
    width: 18px;
    height: 18px;
    background-color: var(--scf-gray);
    transition: background-color .18s;
}

.scf-icon-btn:not(:disabled):hover,
.scf-icon-btn:focus-visible {
    outline: 0;
    border-color: var(--scf-primary);
}

.scf-icon-btn:not(:disabled):hover::before,
.scf-icon-btn:focus-visible::before {
    background-color: var(--scf-primary);
}

.scf-icon-btn:focus-visible {
    box-shadow: var(--scf-focus);
}

/* Deaktiviert wie die Auswahlfelder: gestrichelt und blass */
.scf-icon-btn:disabled {
    cursor: not-allowed;
    background: #f4f7fb;
    border-style: dashed;
}

.scf-icon-btn:disabled::before {
    background-color: #b3bfcf;
}

.scf-icon-btn--share    { --scf-icon: var(--scf-i-link); }
.scf-icon-btn--reset    { --scf-icon: var(--scf-i-reset); }
.scf-icon-btn--remember { --scf-icon: var(--scf-i-bookmark); }
.scf-icon-btn--close    { --scf-icon: var(--scf-i-x); }

/* Link kopieren und Zurücksetzen neben "Anzeigen" – gleiche Höhe wie die Felder */
.scf-bar__tool {
    width: 46px;
    height: 46px;
}

.scf-icon-btn--remember[aria-pressed="true"] {
    --scf-icon: var(--scf-i-bookmarkFilled);
    border-color: var(--scf-accent);
}

.scf-icon-btn--remember[aria-pressed="true"]::before {
    background-color: var(--scf-accent);
}

/* 6 ─ Ergebnisse ─────────────────────────────────────────────────────── */

.scf-results {
    position: absolute;
    top: calc(100% + 8px);
    right: calc(var(--bs-gutter-x, 1.5rem) * .5 + var(--scf-inset));
    left: calc(var(--bs-gutter-x, 1.5rem) * .5 + var(--scf-inset));
    z-index: 20;
    display: flex;
    flex-direction: column;
    max-height: var(--scf-results-max, 78vh);
    overflow: hidden;
    background: var(--scf-body);
    border: 1px solid var(--scf-border);
    border-radius: var(--scf-radius);
    box-shadow: 0 26px 52px -14px rgba(20, 32, 54, .45);
    animation: scf-drop .22s ease-out;
}

.scf-results__head {
    position: relative;
    display: flex;
    flex: 0 0 auto;
    align-items: flex-start;
    gap: 14px;
    padding: 14px 16px 19px;
    background: var(--scf-primary-lighter);
    border-bottom: 1px solid var(--scf-border);
}

.scf-results__head::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 5px;
    background: var(--scf-stripe);
}

.scf-results__heading {
    flex: 1 1 auto;
    min-width: 0;
}

.scf-results__title {
    margin: 0 0 7px;
    font-size: 17px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--scf-dark);
}

.scf-results__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.scf-results__tools {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
}

.scf-results__tools .scf-icon-btn {
    width: 36px;
    height: 36px;
}


.scf-results__body {
    position: relative;
    flex: 1 1 auto;
    padding: 16px;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.scf-results__notice {
    margin: 14px 0 0;
    font-size: 12.5px;
    text-align: center;
    color: var(--scf-gray);
}

/* Filter-Chips im Kopf der Vorschläge. Weder Chip noch Inhalt dürfen
   schrumpfen: manche Browser messen schrumpfbare Inhalte in Buttons mit
   null Breite und kürzen "Audi" dann auf "A…". */
.scf-chip {
    display: inline-flex;
    flex: none;
    align-items: center;
    gap: 7px;
    height: 30px;
    margin: 0;
    padding: 0 6px 0 11px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--scf-primary-darker);
    background: var(--scf-white);
    border: 1px solid var(--scf-border);
    border-radius: var(--scf-radius);
    cursor: pointer;
    transition: border-color .18s;
}

.scf-chip > * {
    flex: none;
}

.scf-chip__label {
    max-width: 18em;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scf-chip__x {
    position: relative;
    width: 18px;
    height: 18px;
    border-radius: 3px;
    background: var(--scf-gray-light);
    transition: background-color .18s;
}

.scf-chip__x::before {
    --scf-icon: var(--scf-i-x);
    content: "";
    position: absolute;
    inset: 5px;
    background-color: var(--scf-gray);
}

.scf-chip:hover,
.scf-chip:focus-visible {
    outline: 0;
    border-color: var(--scf-accent);
}

.scf-chip:hover .scf-chip__x,
.scf-chip:focus-visible .scf-chip__x {
    background: var(--scf-accent);
}

.scf-chip:hover .scf-chip__x::before,
.scf-chip:focus-visible .scf-chip__x::before {
    background-color: var(--scf-white);
}

.scf-more {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
}

.scf-more:empty {
    display: none;
}

.scf-more__info {
    font-size: 12.5px;
    color: var(--scf-gray);
}

.scf-empty {
    padding: 30px 16px;
    text-align: center;
}

.scf-empty__title {
    margin: 0 0 4px;
    font-size: 16px;
    font-weight: 700;
    color: var(--scf-dark);
}

.scf-empty__text {
    margin: 0 0 16px;
    font-size: 13px;
    color: var(--scf-gray);
}

/* 7 ─ Karten ─────────────────────────────────────────────────────────── */

.scf-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 292px), 1fr));
    gap: 12px;
    align-items: stretch;
}

.scf-card {
    display: flex;
    flex-direction: column;
    min-width: 0;
    background: var(--scf-white);
    border: 1px solid var(--scf-border);
    border-radius: var(--scf-radius);
    box-shadow: var(--scf-shadow);
    transition: border-color .18s, box-shadow .18s;
}

.scf-card:hover,
.scf-card:focus-within {
    border-color: var(--scf-primary);
    box-shadow: var(--scf-shadow-hover);
}

.scf-card__main,
.scf-card__main:hover,
.scf-card__main:focus,
.scf-variant,
.scf-variant:hover,
.scf-variant:focus {
    text-decoration: none !important;
}

.scf-card__main {
    display: flex;
    flex: 1 1 auto;
    gap: 12px;
    padding: 12px;
    color: inherit;
    border-radius: var(--scf-radius) var(--scf-radius) 0 0;
}

.scf-card__main:focus-visible {
    outline: 0;
    box-shadow: inset 0 0 0 2px var(--scf-primary);
}

.scf-card__media {
    display: flex;
    flex: 0 0 96px;
    align-items: center;
    justify-content: center;
    align-self: flex-start;
    width: 96px;
    height: 96px;
    overflow: hidden;
    border-radius: 4px;
}

.scf-card__media img,
.scf-card__image {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform .3s ease;
}

.scf-card__main:hover .scf-card__media img {
    transform: scale(1.06);
}

.scf-card__swatch {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 4px;
    box-shadow: inset 0 0 0 1px rgba(44, 62, 95, .14);
}

.scf-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    min-width: 0;
}

.scf-card__name {
    display: -webkit-box;
    overflow: hidden;
    font-size: 14px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--scf-dark);
    overflow-wrap: anywhere;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

.scf-card__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.scf-card__foot {
    display: flex;
    flex-direction: column;
    margin-top: auto;
    padding-top: 9px;
}

.scf-card__type {
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--scf-gray);
}

/* Preis und Grundpreis in einer Zeile; wird es zu eng, bricht der Grundpreis als Ganzes um */
.scf-card__price {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    column-gap: 6px;
    font-size: 15px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--scf-dark);
}

.scf-card__list-price {
    font-size: 12.5px;
    font-weight: 400;
    color: var(--scf-gray);
}

.scf-card__reference {
    font-size: 11.5px;
    font-weight: 400;
    white-space: nowrap;
    color: var(--scf-gray);
}

.scf-card__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 9px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--scf-primary);
    transition: color .18s;
}

.scf-card__link::after {
    content: "→";
    transition: transform .18s;
}

.scf-card__main:hover .scf-card__link,
.scf-card__main:focus-visible .scf-card__link {
    color: var(--scf-accent);
}

.scf-card__main:hover .scf-card__link::after {
    transform: translateX(3px);
}

.scf-card__variants {
    padding: 8px 12px 10px;
    background: #fafbfd;
    border-top: 1px dashed var(--scf-border);
    border-radius: 0 0 var(--scf-radius) var(--scf-radius);
}

.scf-card__variants-title {
    display: block;
    margin-bottom: 3px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--scf-gray);
}

.scf-card__variant-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.scf-variant {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 -6px;
    padding: 6px;
    font-size: 13px;
    color: var(--scf-dark);
    border-radius: 4px;
    transition: background-color .18s, color .18s;
}

.scf-variant:hover,
.scf-variant:focus-visible {
    outline: 0;
    color: var(--scf-primary-darker);
    background: var(--scf-primary-lighter);
}

.scf-variant__label {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.scf-variant__price {
    flex: 0 0 auto;
    font-weight: 700;
}

.scf-variant__arrow::before {
    content: "→";
    color: var(--scf-primary);
    transition: color .18s;
}

.scf-variant:hover .scf-variant__arrow::before {
    color: var(--scf-accent);
}

/* Merkmale als dezent eingefärbte Chips */
.scf-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 22px;
    padding: 0 8px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    color: var(--scf-dark);
    white-space: nowrap;
    background: var(--scf-gray-light);
    border-radius: 4px;
}

.scf-tag--code {
    letter-spacing: .02em;
    font-variant-numeric: tabular-nums;
    color: var(--scf-primary-darker);
    background: var(--scf-primary-lighter);
    box-shadow: inset 0 0 0 1px #c3d3ee;
}

.scf-tag--year     { color: #146b52; background: #e3f4ec; }
.scf-tag--scale    { color: #974b10; background: #fcefe3; }
.scf-tag--group    { background: var(--scf-white); box-shadow: inset 0 0 0 1px var(--scf-border); }
.scf-tag--metallic { color: #553a9a; background: #efeafa; }
.scf-tag--perl     { color: #a4105a; background: #fce7f1; }
.scf-tag--kristall { color: #0a6a98; background: #e2f4fc; }
.scf-tag--matt     { color: #4f5b69; background: #eceff3; }

.scf-dot {
    display: inline-block;
    flex: 0 0 10px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(44, 62, 95, .22);
}

.scf-dot--weiss, .scf-swatch--weiss { background: #fbfbf8; }
.scf-dot--schwarz, .scf-swatch--schwarz { background: #1f2328; }
.scf-dot--silber, .scf-swatch--silber { background: linear-gradient(135deg, #f1f3f5, #a7b0ba); }
.scf-dot--grau, .scf-swatch--grau { background: #8a929b; }
.scf-dot--rot, .scf-swatch--rot { background: #c0392b; }
.scf-dot--blau, .scf-swatch--blau { background: #2f6fae; }
.scf-dot--gruen, .scf-swatch--gruen { background: #1d9e75; }
.scf-dot--gelb, .scf-swatch--gelb { background: #ffd500; }
.scf-dot--orange, .scf-swatch--orange { background: #df7d2b; }
.scf-dot--braun, .scf-swatch--braun { background: #7a5234; }
.scf-dot--beige, .scf-swatch--beige { background: #dcc9a4; }
.scf-dot--violett, .scf-swatch--violett { background: #6a4bb0; }
.scf-dot--gold, .scf-swatch--gold { background: linear-gradient(135deg, #f5e29a, #b8902a); }
.scf-dot--rosa, .scf-swatch--rosa { background: #ee8fb7; }
.scf-dot--sonstige, .scf-swatch--sonstige { background: conic-gradient(#e5007d, #ffd500, #1d9e75, #009fe3, #6a4bb0, #e5007d); }

/* 8 ─ Zustände ───────────────────────────────────────────────────────── */

@keyframes scf-pop {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: none; }
}

@keyframes scf-drop {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: none; }
}

@keyframes scf-spin {
    to { transform: rotate(360deg); }
}

/* Laden: Lauflicht über dem Farbstreifen, Spinner in "Weitere laden",
   Ergebnisliste gedimmt */
.scf.is-loading {
    cursor: progress;
}

.scf.is-loading::after {
    background:
        linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent) no-repeat,
        var(--scf-stripe);
    background-size: 30% 100%, 100% 100%;
    animation: scf-stripe-load 1s linear infinite;
}

@keyframes scf-stripe-load {
    from { background-position: -40% 0, 0 0; }
    to   { background-position: 140% 0, 0 0; }
}

.scf-more__button.is-loading {
    color: transparent !important;
    pointer-events: none;
}

.scf-more__button.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin: -9px 0 0 -9px;
    border: 2px solid rgba(64, 110, 187, .25);
    border-top-color: var(--scf-primary);
    border-radius: 50%;
    animation: scf-spin .7s linear infinite;
}

.scf.is-loading .scf-bar__fields {
    pointer-events: none;
}

.scf.is-loading .scf-results__body {
    opacity: .5;
    pointer-events: none;
    transition: opacity .15s;
}

/* Abdunklung hinter den Vorschlägen (liegt als Geschwister vor der Leiste) */
.scf-overlay {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(28, 41, 64, .45);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s ease, visibility 0s linear .2s;
    -webkit-tap-highlight-color: transparent;
}

.scf-overlay.is-visible {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s ease;
}

html.scf-scroll-lock {
    overflow: hidden;
}

html.scf-scroll-lock body {
    padding-right: var(--scf-scrollbar, 0px);
}

.scf-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    z-index: 1060;
    max-width: calc(100vw - 32px);
    padding: 11px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--scf-white);
    background: var(--scf-dark);
    border-radius: 999px;
    box-shadow: 0 10px 28px rgba(20, 32, 54, .35);
    transform: translateX(-50%);
    animation: scf-pop .2s ease-out;
}

.scf-toast.is-error {
    background: var(--scf-accent-dark);
}

/* 9 ─ Eingeklappt, Tablet, Smartphone ────────────────────────────────── */

/* Einzeilig ab 1200px: Die Felder zeigen die Auswahl selbst, der Untertitel
   entfällt. Rechts stehen nur noch zwei Icon-Knöpfe – so bleiben auch auf
   Laptops mit 1200–1366px je Feld gut 160px samt Icon. */
@media (min-width: 1200px) {
    .scf-bar__subtitle {
        display: none;
    }
}

@media (min-width: 1200px) and (max-width: 1399.98px) {
    .scf-bar {
        column-gap: 12px;
    }

    .scf-bar__fields {
        gap: 6px;
    }
}

/* Knapp über 1200px: Titel zweizeilig ("Fahrzeuglack / finden"), damit die
   Felder ihre Platzhalter vollständig zeigen */
@media (min-width: 1200px) and (max-width: 1299.98px) {
    .scf-bar__title {
        width: min-content;
        white-space: normal;
        line-height: 1.15;
    }
}

/* Zweizeilig (Tablet quer, kleine Laptops): Kopf + Link/Zurücksetzen oben, die fünf Felder darunter */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .scf-bar {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "head actions"
            "fields fields";
    }

    .scf-bar__subtitle {
        max-width: 520px;
    }
}

/* Unter 992px: Kopfzeile mit "Filter" zum Auf- und Zuklappen. Aufgeklappt
   stehen Link/Zurücksetzen rechts in der Kopfzeile und die Felder zweispaltig
   darunter. Bei offenen Vorschlägen sind die Felder immer sichtbar. */
@media (max-width: 991.98px) {
    .scf-bar {
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas:
            "head actions"
            "fields fields";
        gap: 10px 8px;
    }

    .scf:not(.is-expanded):not(.is-open) .scf-bar {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "head";
    }

    .scf:not(.is-expanded):not(.is-open) .scf-bar__fields,
    .scf:not(.is-expanded):not(.is-open) .scf-bar__actions {
        display: none;
    }

    .scf-bar__expand {
        display: inline-flex;
    }

    .scf.is-open .scf-bar__expand {
        display: none;
    }

    /* Aufgeklappt: "Filter" schrumpft zum Pfeil-Knopf, der Untertitel entfällt –
       die Felder zeigen die Auswahl selbst. So passt die Kopfzeile samt
       Link/Zurücksetzen auch auf 320px breite Geräte. */
    .scf.is-expanded .scf-bar__expand {
        justify-content: center;
        width: 38px;
        padding: 0;
    }

    .scf.is-expanded .scf-bar__expand-label,
    .scf.is-expanded .scf-bar__expand-count,
    .scf.is-expanded .scf-bar__subtitle {
        display: none;
    }

    /* Gleiche Höhe wie der Knopf "Filter" */
    .scf-bar__tool {
        width: 38px;
        height: 38px;
    }

    .scf-bar__subtitle {
        max-width: none;
    }

    .scf-bar__fields {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    /* Das fünfte Feld allein in der letzten Zeile nimmt die volle Breite */
    .scf-field:last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    .scf-field:nth-child(even) .scf-menu {
        right: 0;
        left: auto;
    }

    .scf-field:nth-child(odd) .scf-menu {
        right: auto;
        left: 0;
    }

}

.scf-bar__expand {
    align-items: center;
    gap: 8px;
    height: 38px;
    margin: 0 0 0 auto;
    padding: 0 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--scf-dark);
    background: var(--scf-white);
    border: 1px solid var(--scf-border);
    border-radius: var(--scf-radius);
    cursor: pointer;
}

.scf-bar__expand:hover,
.scf-bar__expand:focus-visible {
    outline: 0;
    border-color: var(--scf-primary);
}

.scf-bar__expand-count {
    min-width: 22px;
    padding: 2px 7px;
    font-size: 12px;
    line-height: 1.3;
    text-align: center;
    color: var(--scf-white);
    background: var(--scf-accent);
    border-radius: 999px;
}

.scf-bar__expand-icon {
    --scf-icon: var(--scf-i-chevron);
    width: 12px;
    height: 12px;
    background-color: var(--scf-gray);
    transition: transform .18s;
}

.scf-bar__expand[aria-expanded="true"] .scf-bar__expand-icon {
    transform: rotate(180deg);
}

@media (max-width: 575.98px) {
    .scf-bar {
        padding-top: 8px;
        padding-bottom: 12px;
    }

    .scf-bar__title {
        font-size: 14.5px;
    }

    .scf-bar__fields {
        gap: 6px;
    }
}

/* Sehr schmale Geräte: ohne Feld-Icons passen Feldname und Platzhalter;
   neben Pfeil, Link und Zurücksetzen bricht der Titel zweizeilig um */
@media (max-width: 374.98px) {
    .scf-field__icon {
        display: none;
    }

    .scf.is-expanded:not(.is-open) .scf-bar__title {
        width: min-content;
        white-space: normal;
        line-height: 1.15;
    }
}

/* Smartphone: Die Leiste bleibt bei offenen Vorschlägen kompakt oben stehen,
   die Liste füllt den Rest des Bildschirms. So lassen sich weitere Filter
   setzen, ohne die Vorschläge zu schliessen. --scf-sheet-top (Unterkante der
   Leiste) setzt das Skript. */
@media (max-width: 767.98px) {
    .scf.is-open {
        position: fixed;
        top: 0;
        right: 0;
        left: 0;
    }

    .scf.is-open .scf-bar {
        row-gap: 8px;
        padding-top: 8px;
        padding-bottom: 10px;
    }

    .scf.is-open .scf-bar__subtitle {
        display: none;
    }

    .scf.is-open .scf-bar__logo {
        flex-basis: 28px;
        width: 28px;
        height: 28px;
    }

    .scf.is-open .scf-bar__logo::after {
        inset: 7px;
    }

    .scf.is-open .scf-bar__fields {
        gap: 6px;
    }

    .scf.is-open .scf-field__toggle {
        height: 42px;
    }

    .scf-results {
        position: fixed;
        top: var(--scf-sheet-top, 0px);
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 20; /* unter den Menüs der Leiste (40) */
        max-height: none;
        border: 0;
        border-radius: 0;
        box-shadow: none;
        animation: scf-sheet .25s ease-out;
    }

    /* Filter stehen direkt darüber: ohne Chips und zweiten Farbstreifen */
    .scf-results__head {
        align-items: center;
        padding: 10px 12px;
    }

    .scf-results__head::after,
    .scf-results__chips {
        display: none;
    }

    .scf-results__title {
        margin: 0;
        font-size: 15px;
    }

    .scf-results__body {
        padding: 12px;
    }

    .scf-card__media {
        flex-basis: 80px;
        width: 80px;
        height: 80px;
    }

    .scf-menu__list {
        max-height: 50vh;
    }

    /* 16px verhindert, dass iOS Safari beim Fokus ins Suchfeld zoomt */
    .scf-menu__input {
        font-size: 16px;
    }
}

@keyframes scf-sheet {
    from { opacity: .4; transform: translateY(24px); }
    to   { opacity: 1; transform: none; }
}

/* 10 ─ Reduzierte Bewegung ───────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .scf::after,
    .scf *,
    .scf *::before,
    .scf *::after,
    .scf-overlay {
        transition: none !important;
        animation: none !important;
    }
}