/*
 * Stylesheet der neuen Suchergebnisseite (search_result_v2.tpl).
 *
 * WIRD AKTIV GELADEN: search_result_v2.tpl bindet diese Datei als
 * /source/styles/search_v2.css ein. Sie liegt in diesem Repo und kommt
 * damit über den NFS-Mount automatisch auf jeden Shop — es ist kein
 * Eingriff im Template-Repo und keine Datei je Shop nötig.
 *
 * Shopseitige Anpassung: Ein Shop überschreibt einzelne Regeln in seiner
 * eigenen styles.css (wird später eingebunden) oder legt ein eigenes
 * templates/default/search_result_v2.tpl an, das diesen Link weglässt.
 *
 * Die Filterleiste nutzt bewusst das bestehende Shop-Muster
 * `.content .subdir_sort select` (Kategorieseiten) — die Dropdowns sind
 * dadurch bereits shopkonform gestylt (blauer Rahmen, var(--blue, #1f67b1)) und
 * brauchen hier KEINE eigenen Regeln. Ergänzt werden nur Layout und
 * Kleinigkeiten, für die es im Bestand nichts Passendes gibt.
 *
 * Die :root-Variablen (--blue, --lightgrey, --border_radius_1 …) kommen aus
 * dem Shop-Stylesheet. Fehlt eine, greift der jeweils angegebene Rückfall.
 *
 * Konventionen (Skill weban-design-skill): CSS-Variablen statt Hex-Werten,
 * proportionale Maße, kein Inline-CSS, kein !important. Präfix sv2_.
 */

/* NEU: Filterleiste in eine Zeile umbrechen lassen (das Bestandsmuster
   .subdir_sort ist ein einfacher Block ohne Flex-Layout) */
.sv2_filterform
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4em 0.8em;
}

/* NEU: Beschriftung vor Filterfeldern */
.sv2_filterform .sv2_filter_label
{
    color: var(--grey, #666);
    font-size: 0.85em;
}

/* NEU: aufklappbare Filtergruppe mit Mehrfachauswahl (details/summary) */
.sv2_gruppe
{
    position: relative;
    min-width: 11em;
}

/* Einheitliches Aussehen ALLER Bedienelemente der Filterleiste:
   aufklappbare Filtergruppen, Preisfelder, Sortierauswahl und Button.
   Gleiche Höhe, Rundung, Rahmenstärke und Innenabstand — damit die Leiste
   wie eine Reihe gleichartiger Schalter wirkt.
   Die Selektoren sind bewusst dreistufig: Das Shop-Stylesheet gestaltet
   `.content .subdir_sort select` bereits selbst; diese Regel muss
   spezifischer sein, um sie zu übersteuern. */
.sv2_filterbereich .sv2_gruppe_titel,
.sv2_filterbereich .sv2_filterform select,
.sv2_filterbereich .sv2_filterform .sv2_preisfeld
{
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    height: 2.6em;
    margin: 0;
    padding: 0 0.9em;
    border: 2px solid var(--blue, #1f67b1);
    border-radius: var(--border_radius_1, 10px);
    background: var(--white, #fff);
    color: var(--blue, #1f67b1);
    font-family: inherit;
    font-size: 1em;
    line-height: 1.2;
    cursor: pointer;
    white-space: nowrap;
}

.sv2_gruppe_titel
{
    gap: 0.4em;
    list-style: none;
}

.sv2_gruppe_titel::-webkit-details-marker
{
    display: none;
}

.sv2_gruppe_titel::after
{
    content: " \25BE";
}

.sv2_gruppe[open] .sv2_gruppe_titel::after
{
    content: " \25B4";
}

/* Anzahl gewählter Werte direkt am Gruppentitel */
.sv2_badge
{
    display: inline-block;
    min-width: 1.4em;
    margin-left: 0.4em;
    padding: 0 0.35em;
    border-radius: var(--border_radius, 1.5em);
    background: var(--lightgreen, #53cbb1);
    color: var(--white, #fff);
    text-align: center;
    font-size: 0.8em;
}

/* Auswahlliste — schwebt über dem Inhalt, damit die Leiste nicht springt.
   Jede Auswahl steckt in einem eigenen Block-Element: ohne dieses CSS
   stehen sie trotzdem untereinander, nur eben ohne Rahmen und Überlagerung. */
.sv2_optionen
{
    position: absolute;
    z-index: 20;
    min-width: 100%;
    max-width: 24em;
    margin: 0.25em 0 0 0;
    padding: 0.5em;
    border: 1px solid var(--lightgrey, #f5f5f5);
    border-radius: var(--border_radius_1, 10px);
    background: var(--white, #fff);
    box-shadow: 0 0.2em 0.6em rgba(0, 0, 0, 0.15);
    list-style: none;
}

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

/* Lange Listen (viele Hersteller) scrollen statt die Seite zu sprengen.
   Der Abstand rechts hält die Trefferzahl vom Scrollbalken frei — auf
   Systemen mit überlagerndem Scrollbalken (macOS) läge sie sonst darunter. */
.sv2_optionen_scroll
{
    max-height: 18em;
    padding-right: 1em;
    overflow-y: auto;
}

/* Drei Spalten: Checkbox links, Logo/Name in der Mitte, Trefferzahl rechts.
   Als Raster statt Flexbox, damit die Spalten in jeder Zeile gleich liegen
   und die Zahlen sauber untereinander fluchten. Die Mindesthöhe hält Zeilen
   mit und ohne Logo gleich hoch. */
.sv2_option
{
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 0.5em;
    width: 100%;
    min-height: 2.2em;
    padding: 0.25em 0.3em;
    border-radius: var(--border_radius_1, 10px);
    cursor: pointer;
    white-space: nowrap;
}

.sv2_option input[type="checkbox"]
{
    justify-self: start;
    margin: 0;
    vertical-align: middle;
}

.sv2_option:hover
{
    background: var(--lightgrey, #f5f5f5);
}

.sv2_option_aktiv
{
    color: var(--darkblue, #0B274C);
    font-weight: bold;
}

/* NEU: Herstellerlogo in der Filterliste. Es ersetzt den Namen, steht also
   allein zwischen Checkbox und Trefferzahl. Feste Hoehe plus object-fit
   haelt die Proportionen und die Zeilenhoehe unabhaengig vom Bildformat:
   Das Bild fuellt die mittlere Spalte nie aus, sondern wird auf die Hoehe
   skaliert und darin ausgerichtet. */
.sv2_option_logo
{
    /* Höhe kommt aus der Backend-Konfiguration (facetten.logo_hoehe_em);
       das Template setzt dafür --sv2_logo_hoehe. Der Rückfallwert gilt,
       solange nichts konfiguriert ist. Die Breite folgt proportional und
       ist auf das Fünffache der Höhe begrenzt — sonst zöge ein einzelnes
       Panorama-Logo die ganze Auswahlliste in die Breite. Kein max-width
       in Prozent: Das machte die Spalte beliebig schmal und die Logos
       unlesbar klein, statt die Liste am breitesten Logo auszurichten. */
    justify-self: start;
    max-width: calc( var(--sv2_logo_hoehe, 2.7em) * 5 );
    height: var(--sv2_logo_hoehe, 2.7em);
    object-fit: contain;
}

/* Trefferzahl in einer eigenen Spalte gleicher Mindestbreite: So enden alle
   Zahlen an derselben Kante, egal ob (4) oder (38). */
.sv2_option .sv2_anzahl
{
    justify-self: end;
    min-width: 2.4em;
    text-align: right;
}

/* Herstellerfilter: Logos und Namen mittig zwischen Checkbox und
   Trefferzahl. Beide Randspalten sind dafür gleich breit — sonst zöge die
   breitere Zahlenspalte die Mitte nach links. Die Logos unterscheiden sich
   stark in der Breite; zentriert wirkt die Liste ruhiger als linksbündig. */
.sv2_gruppe_f_hersteller .sv2_option
{
    grid-template-columns: 2.4em 1fr 2.4em;
}

.sv2_gruppe_f_hersteller .sv2_option_label
{
    text-align: center;
}

.sv2_gruppe_f_hersteller .sv2_option_logo
{
    justify-self: center;
}

/* NEU: Preisbereich als geschlossene Einheit — bricht nie um */
.sv2_preisgruppe,
.sv2_sortgruppe
{
    display: inline-flex;
    flex-wrap: nowrap;
    align-items: center;
    gap: 0.4em;
    white-space: nowrap;
}

/* Preisfelder: Maße kommen aus der gemeinsamen Regel oben, hier nur die
   feldspezifischen Eigenschaften. Breite reicht für 99.999,99. */
.sv2_filterbereich .sv2_filterform .sv2_preisfeld
{
    width: 6.5em;
    padding: 0 0.7em;
    text-align: right;
    cursor: text;
}

.sv2_filterform .sv2_preis_trenner
{
    color: var(--grey, #666);
}

/* Filtern-Button auf dieselbe Höhe wie die übrigen Elemente. Der
   Standard-.shopButton ist display:flex mit großzügigem Padding und würde
   die Zeile sprengen. */
.sv2_filterbereich .sv2_filterform .sv2_filter_submit
{
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    height: 2.6em;
    padding: 0 1.5em;
    border: 2px solid transparent;
    border-radius: var(--border_radius_1, 10px);
    font-size: 1em;
    line-height: 1.2;
}

/* NEU: aktive Filter als entfernbare Chips über der Filterleiste */
.sv2_aktive_filter
{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5em;
    margin: 0.8em 0;
}

.sv2_aktive_filter_titel
{
    color: var(--grey, #666);
    font-size: 0.85em;
}

.sv2_chip
{
    display: inline-block;
    padding: 0.2em 0.8em;
    border-radius: var(--border_radius, 1.5em);
    background: var(--lightgreen, #53cbb1);
    color: var(--white, #fff);
    text-decoration: none;
    font-size: 0.9em;
}

.sv2_chip:hover
{
    background: var(--darkgreen, #03775e);
    color: var(--white, #fff);
}

.sv2_chip_x
{
    margin-left: 0.3em;
}

.sv2_reset
{
    color: var(--grey, #666);
    font-size: 0.85em;
}

/* NEU: Hinweis auf die automatische Tippfehler-Korrektur ("Meinten Sie …") */
.sv2_korrektur
{
    margin-top: 0.5em;
    color: var(--darkred, #92191e);
}

/* NEU: Debug-Statuszeile — nur bei ?sv2debug=1, reines Entwicklerwerkzeug */
.sv2_debug
{
    margin: 0 0 1em 0;
    padding: 0.5em 1em;
    border-radius: var(--border_radius_1, 10px);
    background: var(--lightgrey, #f5f5f5);
    color: var(--grey, #666);
    font-size: 0.85em;
}

/* NEU: Nulltreffer-Seite mit anklickbaren Suchvorschlägen */
.sv2_vorschlaege
{
    display: flex;
    flex-wrap: wrap;
    gap: 0.5em;
    margin: 0.5em 0;
    padding: 0;
    list-style: none;
}

.sv2_vorschlaege li a
{
    display: inline-block;
    padding: 0.25em 0.8em;
    border-radius: var(--border_radius, 1.5em);
    background: var(--lightgrey, #f5f5f5);
    color: var(--darkblue, #0B274C);
    text-decoration: none;
}

.sv2_vorschlaege li a:hover
{
    background: var(--lightgreen, #53cbb1);
    color: var(--white, #fff);
}

.sv2_tipps
{
    color: var(--grey, #666);
    font-size: 0.9em;
}

/* NEU: Fallback-Kachel, falls ein Shop kein item_small.tpl besitzt */
.sv2_treffer_einfach
{
    padding: 0.5em 0;
    border-bottom: 1px solid var(--lightgrey, #f5f5f5);
}

/* ---------------------------------------------------------------
 * Responsive — greift direkt aus dieser Datei, dieselben Breakpoints
 * wie tablet.css im Shop.
 * --------------------------------------------------------------- */
@media screen and (max-width: 800px)
{
    .sv2_filterform
    {
        flex-direction: column;
        align-items: stretch;
    }

    .sv2_gruppe,
    .sv2_filterform .sv2_filter_select
    {
        width: 100%;
    }

    /* Aufklappliste im Fluss statt schwebend — auf Touch angenehmer */
    .sv2_optionen
    {
        position: static;
        max-width: none;
        box-shadow: none;
    }

    /* Preisbereich bleibt auch mobil eine Zeile, füllt aber die Breite */
    .sv2_preisgruppe,
    .sv2_sortgruppe
    {
        width: 100%;
    }

    .sv2_filterform .sv2_preisfeld
    {
        flex: 1 1 auto;
        min-width: 0;
    }
}