/* 04.09.2026 - Ergebnis-Sidebar (Tarifoptionen, Filter und Tarifsuche links neben
   der Trefferliste). Wirkt nur, wenn #vvergleich zusaetzlich die Klasse
   .mrmo-erg-sidebar traegt. 07.09.2026 - das setzt wohngebaeude-ergebnis-div.html
   jetzt fuer alle Partner, abschaltbar ueber $ergebnis_sidebar in
   config_rechnerv1.inc.php.

   Gestaltungsregeln dieser Datei:
   - Gruppen entstehen durch Abstand, nicht durch Linien (genau eine Trennlinie).
   - Alle Bedienelemente sind exakt gleich hoch und fluchten links wie rechts.
   - Nur eine kraeftig gefuellte Farbflaeche: der "Aktualisieren"-Button.
     Ausgewaehltes wird ueber hellen Grund und Rahmen markiert, nicht ueber Fuellung. */

#vvergleich.mrmo-erg-sidebar {
    --wg-hoehe: 36px;
    --wg-rahmen: #d7dee6;
    --wg-rahmen-stark: #c2ccd8;
    --wg-radius: 6px;
    --wg-grund: #f7f9fc;
    --wg-akzent: var(--schaltflaeche-hintergrund-farbe, #0054B3);
    --wg-akzent-hell: #eaf2fc;
    --wg-label: #5b6875;
}

/* ------------------------------------------------------------------ 1. Grid */

#vvergleich.mrmo-erg-sidebar .wg-ergebnis-grid {
    display: grid;
    grid-template-columns: 250px minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    margin-top: 15px;
}

/* ------------------------------------------------------- 1b. Aktionsbuttons */

/* "Eingaben aendern" wurde aus der Zeile ueber dem Ergebnis in diese Buttonbox
   geholt, damit ueber der Sidebar nichts mehr steht. Der <input> erbt sonst die
   Systemschrift und wird an der Baseline ausgerichtet - deshalb Flex. */
#vvergleich.mrmo-erg-sidebar .vergleichbutton-box.abstand {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 12px;
}

/* style-responsive2-global.css:117 setzt auf alle Buttons "order: 2". Solange die
   Box inline-block war, blieb das wirkungslos - im Flex-Container wuerde es die
   Reihenfolge umdrehen. Deshalb hier fuer alle direkten Kinder neutralisieren. */
#vvergleich.mrmo-erg-sidebar .vergleichbutton-box.abstand > * {
    order: 0;
}

#vvergleich.mrmo-erg-sidebar .vergleichbutton-box.abstand > input,
#vvergleich.mrmo-erg-sidebar .vergleichbutton-box.abstand > a,
#vvergleich.mrmo-erg-sidebar .vergleichbutton-box.abstand .vergleichen-button-box > input {
    float: none ! important;
    margin: 0 ! important;
    font-family: inherit;
    font-size: 16px;
    line-height: 1.5;
    padding: 4px 15px;
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* "Tarife vergleichen" bleibt rechts aussen, alles andere sammelt sich links */
#vvergleich.mrmo-erg-sidebar .vergleichbutton-box.abstand .vergleichen-button-box {
    order: 99;
    float: none ! important;
    margin-left: auto ! important;
    margin-right: 0 ! important;
    /* bewusst kein Flex: sonst greift "order: 2" des Submit-Buttons auch hier
       und der Hinweispfeil rutscht vor den Button */
    display: inline-block;
    align-self: center;
}

/* --------------------------------------------------------------- 2. Sidebar */

#vvergleich.mrmo-erg-sidebar .wg-sidebar {
    position: sticky;
    top: 10px;
    min-width: 0;
    background: #ffffff;
    border: 1px solid #e3e8ee;
    border-radius: 12px;
    padding: 16px 14px;
    font-size: 14px;
    box-shadow: 0 1px 3px rgba(16, 42, 67, 0.06);
}

/* Abstand statt Linien: viel Luft ueber einer Gruppenueberschrift, wenig darunter */
#vvergleich.mrmo-erg-sidebar .wg-sidebar .wg-block + .wg-block {
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid #edf1f5;
}

#vvergleich.mrmo-erg-sidebar .wg-sidebar .wg-block-titel {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--wg-label);
    margin: 0 0 12px 0;
    padding: 0;
    border: 0;
}

#vvergleich.mrmo-erg-sidebar .wg-sidebar .wg-feld {
    margin-bottom: 14px;
}

#vvergleich.mrmo-erg-sidebar .wg-sidebar .wg-feld:last-child {
    margin-bottom: 0;
}

#vvergleich.mrmo-erg-sidebar .wg-sidebar .wg-feld > label,
#vvergleich.mrmo-erg-sidebar .wg-sidebar .wg-feld-label,
#vvergleich.mrmo-erg-sidebar #ajax_sb_selector .ajax-sb-col > label {
    display: block;
    font-size: 12px;
    font-weight: 400;
    color: var(--wg-label);
    margin: 0 0 4px 0;
    padding: 0;
}

/* ------------------------------------------------ 2b. Klappschalter (schmal) */

/* Im breiten Layout gibt es nichts zu klappen - der Schalter erscheint erst,
   wenn die Sidebar ueber der Trefferliste sitzt (Abschnitt 12). */
#vvergleich.mrmo-erg-sidebar .wg-sidebar-toggle {
    display: none;
}

#vvergleich.mrmo-erg-sidebar .wg-sidebar-toggle-pfeil {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-bottom: 3px;
    transition: transform 0.15s ease;
}

#vvergleich.mrmo-erg-sidebar .wg-sidebar.wg-offen .wg-sidebar-toggle-pfeil {
    transform: rotate(-135deg);
    margin-bottom: 0;
}

/* -------------------------------------------------------- 3. Ergebnis-Spalte */

/* Die Spalte wird selbst zum Container "vvergleich". Dadurch messen die
   vorhandenen @container-Breakpoints aus style-responsive2-ergebnis.css die
   Spaltenbreite statt der Seitenbreite und die Tarifzeilen schieben sich von
   allein ins kompaktere Layout. */
#vvergleich.mrmo-erg-sidebar .wg-ergebnis-spalte {
    container-type: inline-size;
    container-name: vvergleich;
    min-width: 0;
}

/* ---------------------------------------------------- 4. Treffer + Filterstatus */

#vvergleich.mrmo-erg-sidebar .wg-sidebar .wg-treffer {
    float: none;
    width: auto;
    text-align: left;
    margin: 0 0 20px 0;
    padding: 0;
    border: 0;
    line-height: 1.1;
}

#vvergleich.mrmo-erg-sidebar .wg-treffer-zahl {
    font-size: 26px;
    font-weight: 700;
    color: var(--text-farbe, #333);
}

#vvergleich.mrmo-erg-sidebar .wg-treffer-wort {
    font-size: 14px;
    font-weight: 400;
    color: var(--wg-label);
    margin-left: 6px;
}

#vvergleich.mrmo-erg-sidebar a.wg-filter-reset {
    display: block;
    margin-top: 6px;
    font-size: 12px;
    font-weight: 400;
    text-decoration: underline;
}

#vvergleich.mrmo-erg-sidebar .wg-treffer #chk_show_hidden_tarife {
    font-weight: 400;
    font-size: 12px;
    margin-top: 8px;
    line-height: 1.3;
}

#vvergleich.mrmo-erg-sidebar .wg-treffer #chk_show_hidden_tarife.hidden {
    display: none;
}

/* ------------------------------------------- 5. Bedienelemente, alle gleich hoch */

#vvergleich.mrmo-erg-sidebar .wg-sidebar select,
#vvergleich.mrmo-erg-sidebar .wg-sidebar input[type="text"],
#vvergleich.mrmo-erg-sidebar .wg-sidebar #ajax_param_neuberechnen,
#vvergleich.mrmo-erg-sidebar .wg-sidebar .mrmo_form_button_search {
    height: var(--wg-hoehe);
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.3;
}

#vvergleich.mrmo-erg-sidebar .wg-sidebar select,
#vvergleich.mrmo-erg-sidebar .wg-sidebar input[type="text"] {
    width: 100%;
    padding: 0 8px;
    border: 1px solid var(--wg-rahmen);
    border-radius: var(--wg-radius);
    background: #ffffff;
    color: var(--text-farbe, #333);
    font-weight: 400;
}

#vvergleich.mrmo-erg-sidebar .wg-sidebar select:hover,
#vvergleich.mrmo-erg-sidebar .wg-sidebar input[type="text"]:hover {
    border-color: var(--wg-rahmen-stark);
}

#vvergleich.mrmo-erg-sidebar .wg-sidebar select:focus,
#vvergleich.mrmo-erg-sidebar .wg-sidebar input[type="text"]:focus {
    border-color: var(--wg-akzent);
    outline: none;
    box-shadow: 0 0 0 3px var(--wg-akzent-hell);
}

/* Ein Filter, der von "alle" abweicht, bleibt auch nach dem Scrollen erkennbar */
#vvergleich.mrmo-erg-sidebar .wg-sidebar select.wg-aktiv {
    border-color: var(--wg-akzent);
    background: var(--wg-akzent-hell);
    font-weight: 600;
}

#vvergleich.mrmo-erg-sidebar .wg-feld-doppel {
    display: flex;
    gap: 6px;
}

#vvergleich.mrmo-erg-sidebar .wg-feld-doppel > div {
    flex: 1 1 50%;
    min-width: 0;
}

/* ---------------------------------------------------------- 6. Tarifoptionen */

#vvergleich.mrmo-erg-sidebar #ajax_sb_selector {
    margin: 0;
}

#vvergleich.mrmo-erg-sidebar #ajax_sb_selector .ajax-sb-grid {
    display: block;
}

#vvergleich.mrmo-erg-sidebar #ajax_sb_selector .ajax-sb-col {
    display: block;
    min-width: 0;
    margin-bottom: 14px;
}

#vvergleich.mrmo-erg-sidebar #ajax_sb_selector .ajax-sb-grid-elementar {
    margin: 0 0 14px 0;
    padding: 12px 10px 2px;
    background: var(--wg-grund);
    border: 1px solid #e8eef5;
    border-radius: var(--wg-radius);
}

#vvergleich.mrmo-erg-sidebar #ajax_sb_selector .ajax-sb-grid-elementar .ajax-sb-col:last-child {
    margin-bottom: 12px;
}

#vvergleich.mrmo-erg-sidebar #ajax_sb_selector .input-zusatz {
    position: absolute;
    right: 9px;
    top: 50%;
    margin-top: -8px;
    font-size: 12px;
    color: var(--wg-label);
}

/* Die Klapp-Legende wird nicht mehr gebraucht, der Block ist dauerhaft offen */
#vvergleich.mrmo-erg-sidebar #ajax_sb_selector .ajax-sb-legend {
    display: none;
}

/* ------------------------------------------------- 7. Aktualisieren + Kringel */

#vvergleich.mrmo-erg-sidebar #ajax_sb_selector .ajax-sb-col-btn {
    margin: 2px 0 0 0;
    text-align: left;
}

/* Einzige kraeftig gefuellte Flaeche der Sidebar - dorthin soll das Auge, wenn
   etwas zu tun ist. Der deaktivierte Zustand wird nur abgeschwaecht dargestellt,
   nicht ueber die globale Regel "button:disabled { opacity: .3 }", sonst wuerde
   der Ladekringel im Button mit ausbleichen. */
#vvergleich.mrmo-erg-sidebar #ajax_param_neuberechnen {
    position: relative;
    width: 100%;
    min-width: 0;
    padding: 0 12px;
    border: 1px solid var(--wg-akzent);
    border-radius: var(--wg-radius);
    background: var(--wg-akzent);
    color: var(--schaltflaeche-text-farbe, #fff);
    font-weight: 600;
}

#vvergleich.mrmo-erg-sidebar #ajax_param_neuberechnen:disabled {
    opacity: 0.5;
    cursor: default;
}

#vvergleich.mrmo-erg-sidebar #ajax_sb_loader {
    position: absolute;
    left: 12px;
    top: 50%;
    margin-top: -7px;
    line-height: 0;
}

/* Das graue cupertino_loading.gif waere auf dem blauen Button kaum zu sehen -
   stattdessen ein weisser Ring in CSS. Das img bleibt im Markup, weil
   ajax_matrix.js den umgebenden Span ueber seine ID ein- und ausblendet. */
#vvergleich.mrmo-erg-sidebar #ajax_sb_loader img {
    display: none;
}

#vvergleich.mrmo-erg-sidebar #ajax_sb_loader:after {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    box-sizing: border-box;
    border: 2px solid rgba(255, 255, 255, 0.4);
    border-top-color: #ffffff;
    border-radius: 50%;
    animation: wgSidebarSpin 0.7s linear infinite;
}

@keyframes wgSidebarSpin {
    to { transform: rotate(360deg); }
}

/* ------------------------------------------------ 9. Tarifsuche in der Sidebar */

#vvergleich.mrmo-erg-sidebar .wg-suche .searchQueryBox {
    display: block ! important;
    margin: 0 ! important;
}

/* Das Lupen-Icon kostet in der schmalen Spalte nur Platz, das Feldlabel
   benennt die Funktion bereits */
#vvergleich.mrmo-erg-sidebar .wg-suche .searchQueryBoxLabel {
    display: none;
}

#vvergleich.mrmo-erg-sidebar .wg-suche .searchQueryBox {
    display: flex ! important;
    gap: 6px;
    align-items: flex-start;
}

#vvergleich.mrmo-erg-sidebar .wg-suche #searchQuery {
    flex: 1 1 auto;
    min-width: 0;
}

/* Quadratischer Icon-Button direkt hinter dem Feld. Die Beschriftung bleibt als
   value im Markup (Screenreader lesen sie), wird aber optisch ausgeblendet.
   Die Akzentfarbe ist im SVG fest hinterlegt - CSS-Variablen wirken nicht in
   data-URIs.

   07.09.2026 - Warum hier ueberall "! important": das Icon ist ein
   background-image, und gleich zwei fremde Quellen setzen auf diesem Knopf eine
   background-Kurzschreibweise, die es mitloescht. Erstens macht
   ergebnis_search.js:2 aus dem <input> per .button() einen jQuery-UI-Button
   (.ui-state-default bringt "background: <farbe> url(...) repeat-x" mit),
   zweitens faerben partnereigene user_styles.css / user_colors.css die Klasse
   .vergleichbutton ein. Die Klasse laesst das Template in der Sidebar inzwischen
   weg (siehe $suche_ohne_vergleichbutton in ergebnis-suche.phtml); gegen die
   ui-Klassen und gegen unbekanntes Partner-CSS bleibt nur die Gewichtung. */
#vvergleich.mrmo-erg-sidebar .wg-suche .mrmo_form_button_search {
    flex: 0 0 auto;
    width: var(--wg-hoehe);
    margin: 0 ! important;
    padding: 0 ! important;
    border: 1px solid var(--wg-rahmen-stark) ! important;
    border-radius: var(--wg-radius) ! important;
    background-color: var(--wg-grund) ! important;
    background-repeat: no-repeat ! important;
    background-position: center ! important;
    background-size: 18px 18px ! important;
    box-shadow: none ! important;
    text-shadow: none ! important;
    font-size: 0;
    color: transparent;
    text-indent: -9999px;
    overflow: hidden;
    cursor: pointer;
}

#vvergleich.mrmo-erg-sidebar .wg-suche #btnSearchQueryStart {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230054B3' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4.4-4.4'/%3E%3C/svg%3E") ! important;
}

#vvergleich.mrmo-erg-sidebar .wg-suche #btnSearchQueryReset {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6875' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E") ! important;
}

#vvergleich.mrmo-erg-sidebar .wg-suche .mrmo_form_button_search:hover {
    border-color: var(--wg-akzent) ! important;
    background-color: #ffffff ! important;
}

#vvergleich.mrmo-erg-sidebar .wg-suche .empty-search-result {
    margin-top: 8px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--fehler-text-farbe, #FF3B30);
}

#vvergleich.mrmo-erg-sidebar .wg-suche .empty-search-result p {
    margin: 0;
}

/* --------------------------------------- 9b. Gesperrt waehrend der Neuberechnung */

/* Solange der Server eine neue Tarifliste liefert, beziehen sich die Filter auf
   Daten, die gleich verworfen werden. Sie sind deshalb fuer die Dauer gesperrt
   (das disabled-Attribut setzt wg_sidebar_filter.js, hier nur die Optik). */
#vvergleich.mrmo-erg-sidebar .wg-sidebar.wg-laedt .wg-filter {
    opacity: 0.45;
    pointer-events: none;
}

#vvergleich.mrmo-erg-sidebar .wg-sidebar.wg-laedt .wg-block-titel {
    color: var(--wg-label);
}

/* --------------------------------------------------------- 10. Nachhaltigkeit */

#vvergleich.mrmo-erg-sidebar .wg-nachhaltigkeit label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
}

#vvergleich.mrmo-erg-sidebar .wg-nachhaltigkeit input {
    margin: 0;
}

/* -------------------------------------- 11. Original-Slider aus dem Blickfeld */

/* Bewusst NICHT display:none - die jQuery-UI-Slider muessen initialisiert werden
   und ihre Breite behalten, weil die gesamte Filterlogik in global_functions.js
   ueber deren change-Handler laeuft. */
#vvergleich.mrmo-erg-sidebar .resultFilter_out {
    position: absolute;
    left: -9999px;
    top: 0;
    width: 300px;
    height: auto;
}

#vvergleich.mrmo-erg-sidebar .resultFilter {
    display: block ! important;
}

#vvergleich.mrmo-erg-sidebar .resultFilter_legend {
    display: none;
}

/* ------------------------------------------- 11b. Untere Auswahl-Leiste */

/* style-responsive2-ergebnis.css:795 macht die Leiste halbtransparent
   (rgba .5 + blur). Ueber scrollendem Inhalt ist der Textkontrast damit nicht
   mehr garantiert - WCAG 1.4.3 verlangt 4.5:1, und was hinter der Leiste
   durchscrollt, wechselt staendig. Deshalb hier deckend, mit klarer Oberkante
   statt Transparenz als Tiefenwirkung. Spart nebenbei das teure Neuberechnen
   des backdrop-filter bei jedem Scroll-Frame. */
#vvergleich.mrmo-erg-sidebar #vergleichen-button-center-box {
    background-color: #ffffff;
    backdrop-filter: none;
    border-top: 1px solid #dbe2ea;
    box-shadow: 0 -3px 12px rgba(16, 42, 67, 0.10);
}

/* Die Leiste zeigt Tarife aus der Trefferliste - sie soll deshalb auch unter
   der Trefferliste beginnen und nicht unter der Sidebar kleben.
   250px Sidebar + 18px Spalten-Gap + 8px Innenabstand von #vvergleich. */
#vvergleich.mrmo-erg-sidebar #vergleichen-button-center-box .inner-container {
    box-sizing: border-box;
    padding-left: 276px;
}

/* Sobald die Sidebar ueber der Liste sitzt statt daneben, faellt der Versatz weg */
@media (max-width: 1000px) {
    #vvergleich.mrmo-erg-sidebar #vergleichen-button-center-box .inner-container {
        padding-left: 0;
    }
}

/* ------------------------------- 11b2. Auswahl-Leiste im schmalen Viewport */

/* Ab 850px stapelt die Leiste ihre Zeilen (vergleichen-button-box.phtml:180ff)
   und wird dadurch sehr hoch - auf kleinen Schirmen verdeckt sie einen guten
   Teil der Trefferliste. Deshalb hier kompakter: kleinere Logos, engere
   Kacheln, und das Label "Auswahl:" faellt weg, damit seine Zeile frei wird.
   Die Kacheln zeigen ohnehin, worum es geht. */
@media (max-width: 850px) {

    #vvergleich.mrmo-erg-sidebar #vergleichen-button-center-box {
        padding: 7px 10px;
    }

    #vvergleich.mrmo-erg-sidebar #vergleichen-button-center-box .inner-container {
        gap: 8px;
    }

    #vvergleich.mrmo-erg-sidebar #vergleichen-button-center-box .selection-label {
        display: none;
    }

    /* .tarif-items scrollt horizontal (vergleichen-button-box.phtml:41). Sobald
       eine Achse scrollt, clippt die andere - die ueberstehenden Entfernen-
       Buttons wurden dadurch oben abgeschnitten. Der Platz muss deshalb als
       Innenabstand im Scroll-Container selbst stehen. */
    #vvergleich.mrmo-erg-sidebar #vergleichen-button-center-box .tarif-items {
        padding: 7px 5px 2px 0;
        gap: 8px;
    }

    #vvergleich.mrmo-erg-sidebar #vergleichen-button-center-box .tarif-item {
        min-width: 84px;
        padding: 3px 6px 5px 6px;
        gap: 0;
    }

    #vvergleich.mrmo-erg-sidebar #vergleichen-button-center-box .tarif-logo {
        width: 62px;
        height: 30px;
    }

    #vvergleich.mrmo-erg-sidebar #vergleichen-button-center-box .tarif-name {
        font-size: 11px;
        margin: 0;
        max-width: 92px;
    }

    #vvergleich.mrmo-erg-sidebar #vergleichen-button-center-box .tarif-item .remove-btn {
        width: 16px;
        height: 16px;
        font-size: 11px;
        top: -4px;
        right: -4px;
    }

    #vvergleich.mrmo-erg-sidebar #vergleichen-button-center {
        padding: 9px 20px;
        font-size: 15px;
        border-radius: 6px;
    }
}

/* --------------------------------- 11c. Icon-Buttons im schmalen Viewport */

/* style-responsive2-global.css:177ff blendet ab 600px die Textbuttons aus und
   zeigt stattdessen reine Icon-Buttons mit fester "height: 26px". In der
   Flex-Zeile bricht das die gemeinsame Hoehe - deshalb hier zurueckgenommen. */
@media (max-width: 600px) {

    #vvergleich.mrmo-erg-sidebar .vergleichbutton-box.abstand > a.btn_sendtoemail_mobile,
    #vvergleich.mrmo-erg-sidebar .vergleichbutton-box.abstand > a.btn_telefonberatung_mobile {
        height: auto ! important;
        min-height: 0;
        margin: 0 ! important;
        padding: 4px 14px;
        display: inline-flex ! important;
        align-items: center;
        justify-content: center;
    }

    #vvergleich.mrmo-erg-sidebar .vergleichbutton-box.abstand > a.btn_sendtoemail_mobile img,
    #vvergleich.mrmo-erg-sidebar .vergleichbutton-box.abstand > a.btn_telefonberatung_mobile img {
        display: block;
        width: 22px;
        height: 22px;
    }

    #vvergleich.mrmo-erg-sidebar .vergleichbutton-box.abstand > a.btn_telefonberatung_mobile .telefonberatungLabel {
        display: flex;
        align-items: center;
    }
}

/* ------------------------------------------------------ 12. Schmaler Container */

@container vvergleich (max-width: 700px) {

    #vvergleich.mrmo-erg-sidebar .wg-ergebnis-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 12px;
    }

    #vvergleich.mrmo-erg-sidebar .wg-sidebar {
        position: static;
        top: auto;
        padding: 12px;
    }

    /* Beim ersten Aufruf zugeklappt: die Trefferliste soll ohne Scrollen
       sichtbar sein, die Sidebar ist hier eine Nebenfunktion. */
    #vvergleich.mrmo-erg-sidebar .wg-sidebar-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
        width: 100%;
        height: var(--wg-hoehe);
        margin: 0;
        padding: 0 12px;
        box-sizing: border-box;
        border: 1px solid var(--wg-akzent);
        border-radius: var(--wg-radius);
        background: #ffffff;
        color: var(--wg-akzent);
        font-family: inherit;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
    }

    #vvergleich.mrmo-erg-sidebar .wg-sidebar:not(.wg-offen) .wg-sidebar-body {
        display: none;
    }

    #vvergleich.mrmo-erg-sidebar .wg-sidebar.wg-offen .wg-sidebar-body {
        margin-top: 16px;
    }

    #vvergleich.mrmo-erg-sidebar .wg-sidebar .wg-treffer {
        margin-bottom: 12px;
    }

    #vvergleich.mrmo-erg-sidebar #ajax_sb_selector .ajax-sb-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 0 12px;
    }

    #vvergleich.mrmo-erg-sidebar #ajax_param_neuberechnen {
        width: auto;
        min-width: 160px;
    }
}