/* assets/css/aob-search.css — Kundensuche (Header-Feld, Dropdown, Ergebnisseite).
   ACHTUNG Spezifitaet: site.css setzt `input[type="search"] { border-radius: var(--radius-sm) }`.
   Das ist (0,1,1) und schlaegt eine einzelne Klasse (0,1,0) — unabhaengig von der Ladereihenfolge.
   Deshalb steht beim Eingabefeld immer der Elternkontext `.aob-search` davor.
   Angelegt 2026-08-20. Nutzt die vorhandenen Design-Tokens (--primary, --gold,
   --ux-*) und faellt sauber zurueck, wenn eine Variable fehlt.
   Dark Mode laeuft ueber [data-theme="dark"] wie im uebrigen Layout. */

/* ------------------------------------------------------------------ *
 *  1. Suchleiste im Header                                            *
 * ------------------------------------------------------------------ */
.aob-search {
    position: relative;
    max-width: var(--max-w, 1400px);
    margin: 0 auto;
    padding: 0 1.5rem .85rem;
}

.aob-search__form {
    position: relative;
    display: flex;
    align-items: center;
    gap: .5rem;
    /* 760 statt 640: bei 640 wurde der Platzhalter auf 1440er Schirmen
       abgeschnitten (483 px Text gegen 437 px nutzbare Feldbreite). */
    max-width: 760px;
    margin: 0 auto;
}

.aob-search__field {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
}

.aob-search__icon {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    pointer-events: none;
    color: var(--ux-text-muted, var(--muted, #6e7679));
}

.aob-search .aob-search__input {
    width: 100%;
    height: 46px;
    padding: 0 42px 0 42px;
    font: inherit;
    font-size: .95rem;
    color: var(--ux-text, var(--text, #2d2d2d));
    background: var(--ux-surface, #fff);
    border: 1px solid var(--ux-border, var(--border, #e8eaed));
    border-radius: var(--radius-pill, 999px);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, .04));
    transition: border-color 180ms ease, box-shadow 180ms ease;
    -webkit-appearance: none;
    appearance: none;
}
.aob-search .aob-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.aob-search .aob-search__input::placeholder {
    color: var(--ux-text-faint, #8b9295);
    opacity: 1;
}
.aob-search .aob-search__input:focus {
    outline: none;
    border-color: var(--primary, #90a7ac);
    box-shadow: 0 0 0 3px rgba(144, 167, 172, .22);
}

.aob-search__clear {
    position: absolute;
    right: 8px;
    width: 30px;
    height: 30px;
    display: none;
    align-items: center;
    justify-content: center;
    border: 0;
    padding: 0;
    background: transparent;
    color: var(--ux-text-muted, var(--muted, #6e7679));
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.15rem;
    line-height: 1;
}
.aob-search__clear:hover { background: var(--ux-surface-2, #f2f4f5); }
.aob-search.has-text .aob-search__clear { display: flex; }

.aob-search__submit {
    flex: 0 0 auto;
    height: 46px;
    padding: 0 1.15rem;
    border: 0;
    border-radius: var(--radius-pill, 999px);
    background: var(--primary, #90a7ac);
    color: #fff;
    font: inherit;
    font-size: .9rem;
    font-weight: 600;
    letter-spacing: .01em;
    cursor: pointer;
    transition: background 180ms ease, transform 180ms ease;
}
.aob-search__submit:hover { background: var(--primary-dark, #7a9499); }
.aob-search__submit:active { transform: translateY(1px); }

/* ------------------------------------------------------------------ *
 *  2. Vorschlags-Dropdown                                             *
 * ------------------------------------------------------------------ */
.aob-search__panel {
    position: absolute;
    z-index: 320;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    max-height: min(70vh, 560px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    background: var(--ux-surface, #fff);
    border: 1px solid var(--ux-border, var(--border, #e8eaed));
    border-radius: var(--radius-lg, 14px);
    box-shadow: var(--shadow-lg, 0 16px 48px rgba(0, 0, 0, .12));
    padding: .35rem 0 .5rem;
    display: none;
}
.aob-search__panel.is-open { display: block; }

.aob-sug__group {
    padding: .55rem .95rem .2rem;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--ux-text-faint, #8b9295);
}

.aob-sug__row {
    display: flex;
    align-items: center;
    gap: .7rem;
    padding: .5rem .95rem;
    text-decoration: none;
    color: var(--ux-text, var(--text, #2d2d2d));
    border: 0;
    background: none;
    width: 100%;
    text-align: left;
    font: inherit;
    cursor: pointer;
}
.aob-sug__row:hover,
.aob-sug__row.is-active {
    background: var(--ux-surface-2, #f4f6f7);
}
.aob-sug__row:focus-visible {
    outline: 2px solid var(--primary, #90a7ac);
    outline-offset: -2px;
}

.aob-sug__thumb {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm, 6px);
    object-fit: cover;
    background: var(--ux-surface-2, #f0f2f3);
}
.aob-sug__dot {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: var(--radius-sm, 6px);
    background: var(--ux-surface-2, #f0f2f3);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.aob-sug__txt { min-width: 0; flex: 1 1 auto; }
.aob-sug__title {
    display: block;
    font-size: .9rem;
    font-weight: 600;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aob-sug__title mark {
    background: rgba(218, 190, 146, .38);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
}
.aob-sug__sub {
    display: block;
    font-size: .76rem;
    color: var(--ux-text-muted, var(--muted, #6e7679));
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aob-sug__price {
    flex: 0 0 auto;
    font-size: .82rem;
    font-weight: 600;
    color: var(--ux-text, var(--text, #2d2d2d));
    white-space: nowrap;
}

.aob-sug__terms {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .2rem .95rem .55rem;
}
.aob-sug__term {
    border: 1px solid var(--ux-border, var(--border, #e8eaed));
    background: var(--ux-surface, #fff);
    color: var(--ux-text, var(--text, #2d2d2d));
    border-radius: var(--radius-pill, 999px);
    padding: .24rem .7rem;
    font: inherit;
    font-size: .8rem;
    cursor: pointer;
}
.aob-sug__term:hover,
.aob-sug__term.is-active {
    border-color: var(--primary, #90a7ac);
    background: rgba(144, 167, 172, .12);
}

.aob-sug__all {
    display: block;
    margin: .35rem .6rem 0;
    padding: .6rem;
    text-align: center;
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--primary-dark, #7a9499);
    background: var(--ux-surface-2, #f4f6f7);
    border-radius: var(--radius-md, 10px);
}
.aob-sug__all:hover { background: rgba(144, 167, 172, .16); }
.aob-sug__all.is-active { background: rgba(144, 167, 172, .22); }

.aob-sug__empty {
    padding: 1rem .95rem;
    font-size: .88rem;
    color: var(--ux-text-muted, var(--muted, #6e7679));
}
.aob-sug__hint {
    padding: .2rem .95rem .6rem;
    font-size: .78rem;
    color: var(--ux-text-faint, #8b9295);
}
.aob-search__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ------------------------------------------------------------------ *
 *  3. Mobil                                                           *
 * ------------------------------------------------------------------ */
@media (max-width: 900px) {
    .aob-search { padding: 0 1rem .7rem; }
    .aob-search__form { max-width: none; }
    /* Auf kleinen Schirmen traegt die Lupe im Feld die Aktion — der Button
       wuerde sonst die Hälfte der Zeile belegen. */
    .aob-search__submit { display: none; }
    .aob-search .aob-search__input {
        height: 44px;                 /* >= --touch-min */
        font-size: 16px;              /* verhindert iOS-Zoom beim Fokus */
    }
    .aob-search__panel {
        max-height: min(65vh, 480px);
        border-radius: var(--radius-md, 10px);
    }
    .aob-sug__row { padding: .6rem .85rem; }
}
@media (max-width: 380px) {
    .aob-search { padding: 0 .6rem .6rem; }
}

/* ------------------------------------------------------------------ *
 *  3b. Kompakte Fassung in der oberen Leiste                          *
 *                                                                     *
 *  Nora am 20.08.: "Setz bitte die Suchleiste nach rechts oben ueber   *
 *  die Seitenbeschreibung und nicht unten drunter. Naemlich dadurch    *
 *  wird der obere Balken zu breit und die Seite laesst sich ganz       *
 *  schlecht scrollen."                                                 *
 *  Das Feld sass als eigene Zeile unter der Navigation und kostete den *
 *  Kopfbereich rund 60 px Hoehe. Jetzt sitzt es in der schmalen        *
 *  dunklen Leiste ganz oben und braucht dort keine eigene Zeile mehr.  *
 *  Deshalb hier eine dunkle, flachere Variante — heller Text auf       *
 *  transparentem Feld statt der weissen Pille.                          *
 * ------------------------------------------------------------------ */
.header-top .aob-search {
    padding: 0;
    margin: 0 0 0 auto;          /* schiebt das Feld nach rechts */
    /* Breit genug, dass der Platzhalter mit Beispielen hineinpasst: bei
       1265 px sind das rund 380 px Feld und damit ~304 px fuer den Text.
       Gemessen: "Wonach suchst du? z. B. Akne, Falten …" braucht 280 px. */
    flex: 0 1 clamp(210px, 30vw, 420px);
    min-width: 0;
}
.header-top .aob-search__form { max-width: none; gap: 0; }
/* Der Knopf wuerde die Leiste sprengen — die Lupe im Feld traegt die Aktion. */
.header-top .aob-search__submit { display: none; }

/* ⚠ 44 px, nicht kleiner: site.css setzt auf allen Eingabefeldern
   `min-height: var(--touch-min)` (44 px), mobile-enhance.css unter 768 px sogar
   46 px. Das ist die Mindestgroesse fuer Beruehrziele und wird hier bewusst
   NICHT ueberschrieben — ein Wert von 32 px stand hier zuerst und war
   wirkungslos. Die Ersparnis kommt ohnehin nicht aus der Feldhoehe, sondern
   daraus, dass die eigene Zeile unter der Navigation komplett entfaellt. */
.header-top .aob-search .aob-search__input {
    height: 44px;
    padding: 0 34px 0 34px;
    font-size: .82rem;
    color: #fff;
    background: rgba(255, 255, 255, .09);
    border: 1px solid rgba(255, 255, 255, .18);
    box-shadow: none;
}
.header-top .aob-search .aob-search__input::placeholder { color: rgba(255, 255, 255, .55); }
.header-top .aob-search .aob-search__input:focus {
    background: rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .45);
    box-shadow: none;
}
.header-top .aob-search__icon { left: 11px; width: 15px; height: 15px; color: rgba(255, 255, 255, .6); }
.header-top .aob-search__clear { right: 5px; width: 24px; height: 24px; color: rgba(255, 255, 255, .75); }
.header-top .aob-search__clear:hover { background: rgba(255, 255, 255, .14); }
/* Die Vorschlagsliste bleibt hell — sie liegt ueber der Seite, nicht in der Leiste. */
.header-top .aob-search__panel { top: calc(100% + 7px); }

/* Bis 940 px steht die obere Leiste in site.css bewusst auf flex-wrap:nowrap
   ("Topbar in EINE Zeile statt 2 Reihen", Fix vom 02.07.). Ohne Gegenmassnahme
   wuerde das Suchfeld dort mit Flaggen, Telefonnummer und Warenkorb in
   dieselbe Zeile gequetscht. Deshalb hier gezielt wieder Umbruch erlauben —
   aber NUR, damit das Suchfeld eine eigene Zeile bekommt. Flaggen und
   Symbole teilen sich weiterhin die erste Zeile, genau wie vorher. */
@media (max-width: 940px) {
    .header-top-inner { flex-wrap: wrap; }
    /* ⚠ Ohne die naechste Zeile entstehen DREI Zeilen statt zwei: die
       Sprachwahl beansprucht mit `flex: 1 1 auto` ihre volle Inhaltsbreite
       (gemessen 310 px von 375 px) und schiebt Telefon/Konto/Warenkorb in eine
       eigene Zeile. Gemessen: obere Leiste 171 px statt 100 px.
       Mit `flex: 1 1 0` schrumpft die Sprachwahl und scrollt intern weiter
       (overflow-x steht in site.css bereits) — Zeile 1 traegt damit wieder
       Flaggen UND Symbole, Zeile 2 das Suchfeld. */
    .header-top .lang-switch { flex: 1 1 0; min-width: 0; }
    .header-top .header-top-utils { flex: 0 0 auto; }
    .header-top .lang-switch,
    .header-top .header-top-utils { order: 1; }
    .header-top .aob-search {
        flex: 1 1 100%;
        order: 3;
        margin: .3rem 0 .05rem;
        max-width: none;
    }
    .header-top .aob-search .aob-search__input {
        /* Hoehe kommt hier aus mobile-enhance.css (min-height 46 px) — siehe
           Hinweis oben. Nur Schrift und Innenabstand werden angepasst. */
        font-size: 16px;             /* verhindert iOS-Zoom beim Fokus */
        padding: 0 38px 0 38px;
    }
    .header-top .aob-search__icon { left: 13px; width: 17px; height: 17px; }
    .header-top .aob-search__clear { right: 7px; width: 28px; height: 28px; }
}

/* Wenn das mobile Menue offen ist, darf die Suchleiste nicht darueber liegen. */
body.nav-open .aob-search__panel { display: none; }

/* ------------------------------------------------------------------ *
 *  3c. Ab 941 px bleibt die obere Leiste EINZEILIG                    *
 *                                                                     *
 *  Befund 21.08.2026: site.css setzt in der Grundregel                *
 *  `.header-top-inner { flex-wrap: wrap }`. Ausgeloggt passt alles    *
 *  knapp in eine Zeile — bei 1265 px betraegt der Puffer aber nur     *
 *  14 px. Sobald jemand EINGELOGGT ist, steht im Symbolblock der      *
 *  Vorname statt "Login" (gemessen 38 px -> 56 px bei "Nora"). Damit  *
 *  sind es 3 px zu viel: die Symbolgruppe bricht in eine zweite Zeile *
 *  um und der Kopfbereich waechst von 249 px auf 288 px — genau die   *
 *  Hoehe, die Nora am 20.08. beseitigt haben wollte.                  *
 *                                                                     *
 *  Gegenmassnahme: oberhalb der Mobilzone kein Umbruch, dafuer darf   *
 *  das Suchfeld schrumpfen. Gemessen mit dem langen Stressnamen       *
 *  "Alexandra": 941 -> Feld 216 px · 1000 -> 242 · 1265 -> 370 ·      *
 *  1440 -> 420, jeweils EINE Zeile, kein Querlauf, Feldhoehe 44 px.   *
 *  Mobil (375 px) bleibt unveraendert zweizeilig.                     *
 *                                                                     *
 *  site.css wird bewusst NICHT angefasst — die nowrap-Regel bis       *
 *  940 px ist ein eigener Fix vom 02.07.                              *
 * ------------------------------------------------------------------ */
@media (min-width: 941px) {
    .header-top-inner { flex-wrap: nowrap; }
    .header-top .aob-search { min-width: 0; }
}

/* ------------------------------------------------------------------ *
 *  3d. Platz fuer den Dunkel/Hell-Umschalter freihalten               *
 *                                                                     *
 *  Befund 21.08.2026, erst im Screenshot sichtbar geworden: der runde *
 *  Umschalter `.aob-theme-toggle` liegt UEBER dem Wort "Warenkorb".   *
 *  Gemessen 14 px Ueberlappung bei 1646 px, 19 px bei 1265 px — je    *
 *  schmaler, desto schlimmer.                                         *
 *                                                                     *
 *  Der Knopf gehoert zu `aob-premium-ux.css` und steht dort fest auf  *
 *  top/right 18 px bei 46x46 px. Die Kollision ist AELTER als die     *
 *  Suchleiste und tritt unabhaengig von Abschnitt 3c auf — nachgemes- *
 *  sen mit und ohne 3c: beide Male exakt 14 px.                       *
 *                                                                     *
 *  Dieselbe Datei entschaerft die Kollision an zwei Stellen bereits   *
 *  selbst: unter 720 px rueckt der Knopf auf `top: 72px` (also unter  *
 *  die Leiste), im Admin auf `right: 78px`. Nur die oeffentliche      *
 *  Desktop-Ansicht ueber 720 px war uebersehen.                       *
 *                                                                     *
 *  Hier wird deshalb nur PLATZ RESERVIERT, statt den Knopf zu ver-    *
 *  schieben: er bleibt, wo Nora ihn gewohnt ist, und der Leisten-     *
 *  inhalt rutscht ihm nicht mehr darunter. 64 px = 46 Knopf + 18      *
 *  Randabstand.                                                       *
 *                                                                     *
 *  Gemessen mit dem langen Stressnamen "Alexandra", jeweils einzeilig *
 *  und ohne Querlauf:                                                 *
 *     941 px  -> 45 px Abstand, Suchfeld 198 px                       *
 *    1265 px  -> 45 px Abstand, Suchfeld 339 px (vorher 19 px UEBER-  *
 *                lappung)                                             *
 *    1646 px  -> 50 px Abstand, Suchfeld unveraendert 420 px          *
 *     375 px  -> unveraendert, die Regel greift dort nicht            *
 *                                                                     *
 *  `aob-premium-ux.css` wird bewusst NICHT angefasst: an dieser Datei *
 *  arbeiten parallele Sitzungen, und der Umschalter selbst ist in     *
 *  Ordnung — es fehlt nur der Platz in der Leiste.                    *
 *  `body:not(.is-admin)`, weil der Knopf im Admin ohnehin woanders    *
 *  sitzt und die Adminleiste diese Reservierung nicht braucht.        *
 * ------------------------------------------------------------------ */
@media (min-width: 721px) {
    body:not(.is-admin) .header-top-inner { padding-right: calc(1.5rem + 64px); }
}

/* ------------------------------------------------------------------ *
 *  3e. Mobil: Umschalter lag AUF dem Suchfeld                         *
 *                                                                     *
 *  Befund 21.08.2026, gefunden im ersten Handy-Screenshot ueberhaupt. *
 *  Die alte Sitzung konnte keine Bilder erzeugen, deshalb hat es       *
 *  seit dem Umzug der Suchleiste (20.08. abends) niemand gesehen.     *
 *                                                                     *
 *  `aob-premium-ux.css` setzt den Umschalter unter 720 px auf         *
 *  `top: 72px` — das war richtig, solange dort nichts stand. Seit die *
 *  Suchleiste in der oberen Leiste sitzt, liegt das Suchfeld bei      *
 *  y 64–110 und der Knopf bei y 72–112. Gemessen bei 375 px:          *
 *  **20 x 38 px Ueberlappung**, direkt auf dem Loeschkreuz des Felds. *
 *                                                                     *
 *  Zwei Wege geprueft:                                                *
 *    A) Suchfeld schmaler (margin-right 52px) -> Feld 311 -> 259 px.  *
 *       Auf einem 375er Bildschirm ein Sechstel weniger. Verworfen.   *
 *    B) Knopf tiefer, in den leeren rechten Bereich der weissen       *
 *       Kopfzeile neben dem Logo. Feld behaelt volle Breite.          *
 *  Gewaehlt: B.                                                       *
 *                                                                     *
 *  Geprueft ueber zehn Breiten (360/375/414/500/600/680/720/721/800/  *
 *  940): **kein einziges ueberlapptes Bedienelement**, kein Querlauf, *
 *  Leiste unveraendert 114–116 px, Kopfbereich 183–185 px.            *
 *  Ab 721 px greift die Regel nicht — dort sitzt der Knopf weiterhin  *
 *  auf `top: 18px` und Abschnitt 3d haelt ihm den Platz frei.         *
 *                                                                     *
 *  `aob-premium-ux.css` wird bewusst NICHT angefasst (parallele       *
 *  Sitzungen arbeiten daran); die Ausnahme steht hier, wie schon      *
 *  bei 3b, 3c und 3d.                                                 *
 * ------------------------------------------------------------------ */
@media (max-width: 720px) {
    .aob-theme-toggle { top: 126px; }
}


/* ------------------------------------------------------------------ *
 *  4. Ergebnisseite /suche                                            *
 * ------------------------------------------------------------------ */
.sr-page { padding: 2rem 1rem 4rem; max-width: var(--max-w-default, 1200px); }
.sr-h1 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); margin: 0 0 1.2rem; }

.sr-form { margin: 0 0 1.6rem; }
.sr-form__label {
    display: block;
    font-size: .85rem;
    color: var(--ux-text-muted, var(--muted, #6e7679));
    margin: 0 0 .4rem;
}
.sr-form__row { display: flex; gap: .6rem; flex-wrap: wrap; }
.sr-form__row input[type=search] {
    flex: 1 1 260px;
    min-width: 0;
    height: 48px;
    padding: 0 1rem;
    font: inherit;
    font-size: 16px;
    color: var(--ux-text, var(--text, #2d2d2d));
    background: var(--ux-surface, #fff);
    border: 1px solid var(--ux-border, var(--border, #e8eaed));
    border-radius: var(--radius-pill, 999px);
}
.sr-form__row input[type=search]:focus {
    outline: none;
    border-color: var(--primary, #90a7ac);
    box-shadow: 0 0 0 3px rgba(144, 167, 172, .22);
}
.sr-form__row .btn { height: 48px; }

.sr-intro, .sr-none, .sr-none-sub, .sr-count {
    font-size: 1rem;
    color: var(--ux-text-muted, var(--muted, #6e7679));
    margin: 0 0 1rem;
}
.sr-none { font-size: 1.1rem; color: var(--ux-text, var(--text, #2d2d2d)); }

.sr-chips, .sr-filter, .sr-concepts {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
    align-items: center;
    list-style: none;
    padding: 0;
    margin: 0 0 1.4rem;
}
.sr-concepts__lbl {
    font-size: .82rem;
    color: var(--ux-text-muted, var(--muted, #6e7679));
    margin-right: .2rem;
}
.sr-chip {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .8rem;
    border: 1px solid var(--ux-border, var(--border, #e8eaed));
    border-radius: var(--radius-pill, 999px);
    background: var(--ux-surface, #fff);
    color: var(--ux-text, var(--text, #2d2d2d));
    font-size: .85rem;
    text-decoration: none;
}
.sr-chip:hover { border-color: var(--primary, #90a7ac); }
.sr-chip.is-active {
    background: var(--primary, #90a7ac);
    border-color: var(--primary, #90a7ac);
    color: #fff;
}
.sr-chip--concept { border-color: var(--gold, #dabe92); }
.sr-chip__n { font-size: .74rem; opacity: .7; }

.sr-group { margin: 0 0 2.4rem; }
.sr-group__h {
    font-size: 1.15rem;
    margin: 0 0 .8rem;
    padding-bottom: .45rem;
    border-bottom: 1px solid var(--ux-border, var(--border, #e8eaed));
}

.sr-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .5rem; }
.sr-item {
    border: 1px solid var(--ux-border, var(--border, #e8eaed));
    border-radius: var(--radius-md, 10px);
    background: var(--ux-surface, #fff);
    overflow: hidden;
    transition: border-color 180ms ease, box-shadow 180ms ease;
}
.sr-item:hover {
    border-color: var(--primary, #90a7ac);
    box-shadow: var(--shadow-sm, 0 2px 8px rgba(0, 0, 0, .04));
}
.sr-item__link {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: .85rem 1rem;
    text-decoration: none;
    color: inherit;
}
.sr-item__img { flex: 0 0 auto; }
.sr-item__img img {
    width: 72px; height: 72px;
    object-fit: cover;
    border-radius: var(--radius-sm, 6px);
    background: var(--ux-surface-2, #f0f2f3);
}
.sr-item__body { min-width: 0; flex: 1 1 auto; }
.sr-item__type {
    display: block;
    font-size: .7rem;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--ux-text-faint, #8b9295);
    margin-bottom: .15rem;
}
.sr-item__title { display: block; font-size: 1rem; font-weight: 600; line-height: 1.35; }
.sr-item__sub, .sr-item__teaser {
    display: block;
    font-size: .84rem;
    color: var(--ux-text-muted, var(--muted, #6e7679));
    margin-top: .15rem;
}
.sr-item__teaser {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sr-item__meta {
    display: flex; flex-wrap: wrap; gap: .6rem;
    margin-top: .35rem;
    font-size: .85rem;
}
.sr-item__price { font-weight: 700; }
.sr-price-sale { color: var(--alert, #E3213C); }
.sr-item__dur, .sr-item__flag { color: var(--ux-text-muted, var(--muted, #6e7679)); }
.sr-item__flag { font-style: italic; }
/* FAQ-Antworten, die in den Kontobereich fuehren: ehrlich auszeichnen statt
   die Besucherin unangekuendigt auf die Anmeldemaske zu schicken. */
.sr-item__login {
    display: inline-block;
    margin-top: .3rem;
    padding: .12rem .5rem;
    font-size: .74rem;
    border-radius: var(--radius-pill, 999px);
    background: var(--ux-surface-2, #f2f4f5);
    color: var(--ux-text-muted, var(--muted, #6e7679));
}

.sr-variants {
    list-style: none;
    margin: 0;
    padding: .1rem .9rem .8rem 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    border-top: 1px dashed var(--ux-border, var(--border, #e8eaed));
}
.sr-variants a {
    display: inline-flex;
    gap: .4rem;
    align-items: center;
    padding: .3rem .7rem;
    font-size: .82rem;
    text-decoration: none;
    color: var(--ux-text, var(--text, #2d2d2d));
    background: var(--ux-surface-2, #f4f6f7);
    border-radius: var(--radius-pill, 999px);
}
.sr-variants a:hover { background: rgba(144, 167, 172, .18); }
.sr-variants__p { font-weight: 700; }

@media (min-width: 780px) {
    .sr-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .sr-group--wide .sr-list { grid-template-columns: 1fr; }
}

/* Dark Mode: die --ux-Tokens tragen die Farben; nur explizite Weisstoene fixen. */
[data-theme="dark"] .aob-search .aob-search__input,
[data-theme="dark"] .aob-search__panel,
[data-theme="dark"] .sr-item,
[data-theme="dark"] .sr-chip,
[data-theme="dark"] .aob-sug__term,
[data-theme="dark"] .sr-form__row input[type=search] {
    background: var(--ux-surface, #1c2024);
    border-color: var(--ux-border, #2c3338);
    color: var(--ux-text, #ecede9);
}
[data-theme="dark"] .aob-sug__row:hover,
[data-theme="dark"] .aob-sug__row.is-active,
[data-theme="dark"] .sr-variants a,
[data-theme="dark"] .aob-sug__all { background: var(--ux-surface-2, #242a2f); }

@media (prefers-reduced-motion: reduce) {
    .aob-search__input, .aob-search__submit, .sr-item { transition: none; }
}