/**
 * Vorschlaege beim Tippen (Stufe 5).
 *
 * Eigenes Stylesheet statt eines Anbaus an `search_layout/style.css`: Die
 * Vorschlaege haengen am Suchfeld, und das steht auf **jeder** Seite in der
 * Kopfzeile -- die Ergebnisliste dagegen nur auf der Suchseite. Zwei
 * Lebensraeume, zwei Dateien.
 *
 * Die Gestaltung folgt den Autocomplete-Mustern des Baymard Institute. Vier
 * davon waren in der ersten Fassung verletzt und sind hier begruendet
 * nachgezogen: Gruppenueberschriften, Titel in normaler Schreibweise,
 * abgedunkelter Hintergrund und deutlich groessere Trefferflaechen.
 */

/*
 * Der Selektor traegt die Klasse doppelt (Spezifitaet 0,2,0). Grund: Fremde
 * Regeln setzen `position` und `z-index` auf Behaeltern in Suchformularen --
 * die Adminleiste tut es, Themes tun es.
 */

.f12-suggest.f12-suggest {
    position: relative;
}

/*
 * Baymards Muster „visuelle Tiefe schaffen": Solange die Liste offen ist,
 * tritt die Seite zurueck. Auf der Startseite laeuft ein Bilderkarussell --
 * die Vorschlaege standen bisher mitten darin und gingen unter.
 */

.f12-suggest__scrim {
    background-color: rgba(16, 24, 10, .34);
    bottom: 0;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    /* Unter der Liste, ueber allem anderen. */
    z-index: 99998;
}

.f12-suggest__scrim[hidden] {
    display: none;
}

.f12-suggest__list.f12-suggest__list {
    background-color: var(--content_bg_color, #fff);
    border: 1px solid rgba(0, 0, 0, .08);
    border-radius: 14px;
    box-shadow: 0 18px 40px -18px rgba(16, 24, 10, .45), 0 3px 10px rgba(16, 24, 10, .08);
    color: var(--awb-color7, #212326);
    list-style: none;
    margin: 0;
    padding: .4rem;
    /*
     * `fixed` am `body`, nicht `absolute` in der Huelle: Avadas Kopfzeile
     * bildet einen eigenen Stapelkontext, aus dem die Liste nicht nach oben
     * kommt -- Menueleiste und Slider lagen darueber. Position und Breite setzt
     * das Skript, weil die Liste hier nichts mehr von ihrem Feld weiss.
     */
    position: fixed;
    /* Ueber der Abdunkelung und ueber der Adminleiste (99999). */
    z-index: 100000;
    /* Nur fuer den Notfall, dass das Fenster kleiner ist als die Liste --
       die Hoehe setzt das Skript. Siehe die Begruendung dort. */
    overflow-y: auto;
    overscroll-behavior: contain;
}

.f12-suggest__list[hidden] {
    display: none;
}

/*
 * Gruppenueberschriften. Ohne sie laeuft die Liste durch, und die
 * Suchbegriffe oben gehen zwischen den Produkten unter -- genau der Einwand,
 * den Baymard gegen gemischte Vorschlagsfelder erhebt. Mit ihnen sind es drei
 * kurze Listen statt einer langen.
 */

.f12-suggest__group {
    color: var(--body_typography-color, #6b6b6b);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .08em;
    padding: .7rem .75rem .3rem;
    text-transform: uppercase;
}

.f12-suggest__group:first-child {
    padding-top: .35rem;
}

/* Ein Eintrag: Bild, Text, Preis. */

.f12-suggest__item {
    align-items: center;
    border-radius: 10px;
    color: var(--awb-color7, #212326);
    display: flex;
    gap: .7rem;
    /*
     * Grosszuegige Trefferflaechen -- auf dem Telefon verlangt Baymards
     * Muster 9 das ausdruecklich, am Schreibtisch schadet es nicht. Die
     * erste Fassung hatte .5rem Innenabstand und 0,9 rem Schrift -- auf dem
     * Telefon zu klein zum sicheren Antippen, am Schreibtisch zu eng zum
     * Ueberfliegen.
     */
    padding: .55rem .75rem;
    text-decoration: none;
}

/*
 * Der aktive Eintrag (Aufgabe 5.11). Er wird ueber die Pfeiltasten gesetzt und
 * beim Ueberfahren -- beides derselbe Zustand, damit Maus und Tastatur nicht
 * zwei verschiedene Vorstellungen davon haben, wo man gerade ist.
 *
 * Auch hier: Der Zustand aendert die Flaeche, nicht die Schrift.
 */

.f12-suggest__item.is-active,
.f12-suggest__item:focus-visible {
    background-color: var(--bg_color, #f2f3f5);
    color: var(--awb-color7, #212326);
    outline: none;
}

.f12-suggest__item.is-active {
    box-shadow: inset 3px 0 0 var(--primary_color, #9cc931);
}

/* Das Vorschaubild. Klein und quadratisch -- es soll wiedererkennen helfen,
   nicht werben. */

.f12-suggest__thumb {
    background-color: var(--bg_color, #f2f3f5);
    border-radius: 7px;
    flex: 0 0 auto;
    height: 40px;
    object-fit: cover;
    width: 40px;
}

.f12-suggest__thumb--leer {
    display: block;
}

.f12-suggest__text {
    display: block;
    min-width: 0;
}

.f12-suggest__title {
    display: block;
    font-size: .95rem;
    line-height: 1.3;
    /* Ein Titel, der umbricht, sprengt die Zeilenhoehe der ganzen Liste. */
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Aufgabe 5.9: Nur die Ergaenzung ist fett -- der eingetippte Teil bleibt
   normal. Andersherum sieht die Liste aus, als stuende ueberall dasselbe. */

.f12-suggest__title strong {
    font-weight: 700;
}

/*
 * Die Kategorie ueber dem Produkttitel -- in **normaler Schreibweise**.
 *
 * Korrektur am 2026-08-21: Das stand hier als Baymards Muster 9. Falsch --
 * Muster 9 ist der Zeilenabstand auf dem Telefon; zu Grossbuchstaben sagt
 * die Neunerliste gar nichts. Die Aenderung bleibt trotzdem richtig, nur
 * aus einem anderen Grund: Versalien nehmen der Zeile die Umrissform, an
 * der man Woerter beim Ueberfliegen erkennt. Die erste Fassung hatte
 * `text-transform: uppercase`.
 */

.f12-suggest__kicker {
    color: var(--body_typography-color, #6b6b6b);
    display: block;
    font-size: .72rem;
    line-height: 1.3;
}

/*
 * „in Mehl & Schrot" (Aufgabe 5.10). Baymards Muster 2 verlangt, dass
 * eingegrenzte Suchen sich sichtbar von gewoehnlichen unterscheiden --
 * kursiv ist die dort genannte Form, und sie kostet keine Farbe.
 */

.f12-suggest__scope {
    color: var(--body_typography-color, #6b6b6b);
    font-size: .88em;
    font-style: italic;
}

/* Der Preis steht rechts und bricht nie um. */

.f12-suggest__price {
    color: var(--awb-color7, #212326);
    flex: 0 0 auto;
    font-size: .88rem;
    font-variant-numeric: tabular-nums;
    font-weight: 700;
    margin-left: auto;
    white-space: nowrap;
}

/*
 * Die Meldung ueber der leeren Liste. Kein Ziel, also auch kein Eintrag --
 * sie steht da und erklaert, was gerade nicht da ist.
 */

.f12-suggest__hinweis {
    color: var(--body_typography-color, #6b6b6b);
    font-size: .9rem;
    line-height: 1.4;
    padding: .8rem .75rem .5rem;
}

/*
 * „Meintest du Dinkelmehl?" -- der Vorschlag aus dem Woerterbuch.
 *
 * Er ist der einzige Eintrag, der von sich aus auffallen soll: In diesem
 * Zustand steht nichts anderes in der Liste, was den Blick halten koennte.
 * Deshalb eine eigene Flaeche statt nur einer Zeile -- und trotzdem schwarze
 * Schrift, wie ueberall in dieser Suche.
 */

.f12-suggest__item--correction {
    background-color: var(--bg_color, #f2f3f5);
    margin: 0 .1rem;
}

.f12-suggest__item--correction strong {
    font-weight: 700;
}

/*
 * Der Verlauf. Eine Uhr davor -- das Zeichen sagt in einem Zug, woher diese
 * Zeilen kommen, wofuer sonst eine Ueberschrift pro Zeile noetig waere.
 * `currentColor`, damit sie im markierten Zustand mitgeht.
 */

@supports ((mask: url("#x")) or (-webkit-mask: url("#x"))) {
    .f12-suggest__item--recent .f12-suggest__title::before {
        content: "";
        background-color: currentColor;
        display: inline-block;
        height: .85em;
        margin-right: .5rem;
        opacity: .5;
        vertical-align: -.1em;
        width: .85em;
        /* Eine Uhr, als Maske statt als Bilddatei: keine zweite Anfrage. */
        -webkit-mask: var(--f12-suggest-uhr) center / contain no-repeat;
        mask: var(--f12-suggest-uhr) center / contain no-repeat;
    }
}

.f12-suggest__list {
    --f12-suggest-uhr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5l3 2'/%3E%3C/svg%3E");
}

/*
 * Das Loeschen des Verlaufs. Ein `button` und kein Verweis -- er fuehrt
 * nirgendwohin. Browser geben Knoepfen eigene Schrift, eigenen Rahmen und
 * eigenen Hintergrund; das muss alles zurueckgenommen werden, sonst steht
 * mitten in der Liste ein graues Kaestchen.
 */

.f12-suggest__item--clear {
    background: none;
    border: 0;
    border-top: 1px solid rgba(0, 0, 0, .08);
    color: var(--body_typography-color, #6b6b6b);
    cursor: pointer;
    font: inherit;
    font-size: .82rem;
    justify-content: center;
    margin-top: .3rem;
    padding-top: .6rem;
    text-align: center;
    width: 100%;
}

.f12-suggest__item--clear.is-active {
    background-color: var(--bg_color, #f2f3f5);
}

/* Der letzte Eintrag: der Weg zu allen Ergebnissen. */

.f12-suggest__item--all {
    border-top: 1px solid rgba(0, 0, 0, .08);
    color: var(--body_typography-color, #6b6b6b);
    font-size: .85rem;
    justify-content: center;
    margin-top: .3rem;
    padding-top: .65rem;
}

/*
 * Der Ladezustand. Er ersetzt die Liste nicht, sondern legt sich darueber --
 * die alten Vorschlaege bleiben stehen, bis die neuen da sind. Der Server
 * braucht auf dieser Installation rund anderthalb Sekunden; eine leergeraeumte
 * Liste saehe in dieser Zeit aus, als waere die Suche kaputt.
 */

.f12-suggest__list.is-loading::after {
    background: linear-gradient(90deg,
        var(--primary_color, #9cc931) 0%,
        var(--primary_color, #9cc931) 40%,
        transparent 40%);
    background-size: 250% 100%;
    border-radius: 14px 14px 0 0;
    content: "";
    height: 3px;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
    animation: f12-suggest-laden 1.1s linear infinite;
}

@keyframes f12-suggest-laden {
    from { background-position: 100% 0; }
    to   { background-position: -60% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .f12-suggest__list.is-loading::after {
        animation: none;
        background: var(--primary_color, #9cc931);
    }
}

/* Bildschirmleser-Text -- die Meldung, wie viele Vorschlaege es gibt. */

.f12-suggest__status.screen-reader-text {
    border: 0;
    clip: rect(1px, 1px, 1px, 1px);
    clip-path: inset(50%);
    height: 1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    white-space: nowrap;
    width: 1px;
}

@media (max-width: 640px) {
    /*
     * Baymards Muster 8 und 9: Auf dem Telefon konkurriert alles um denselben
     * Platz. Groessere Schrift, hoehere Zeilen, mehr Abstand -- und weniger
     * Eintraege, das entscheidet das Skript.
     */
    .f12-suggest__item {
        gap: .8rem;
        padding: .7rem .8rem;
    }

    .f12-suggest__title {
        font-size: 1rem;
    }

    .f12-suggest__thumb {
        height: 44px;
        width: 44px;
    }
}