/* ========================================
   OwnMag2Ext LayeredNavigation - Filter-Optik + Hover-UX (Handoff Punkt 3)
   Pill-/Tag-Buttons fuer Single- UND Mehrfachauswahl (kein Radio-Look).
   Moderne Methode statt Sprite: das modul-eigene <a> aus layer/filter.phtml
   wird als Pill gestylt, Zustaende rein ueber :hover / .active.
   Der Klick togglet bereits (ItemUrlPlugin/Reinjection) - das hier ist
   nur Optik + Affordance. Farb-Swatches rendern ueber Porto -> NICHT betroffen.
   ======================================== */

/* Optionsliste als scanbare Reihen (KEINE Pill-Wolke): ein Wert je Zeile,
   volle Breite, Label links / Count rechts. Vertraute Faceted-Search-Optik
   (impeccable Product-Register: "earned familiarity, the tool disappears in
   the task") statt klobiger runder Buttons. */
.filter-options-content .ownmag2ext-filter-items {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 1px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.filter-options-content .ownmag2ext-filter-items > .item {
    margin: 0 !important;
    padding: 0 !important;
    line-height: normal;
}

/* Native Radio/Checkbox entfaellt - die Zeile IST die Steuerung. */
.filter-options-content .ownmag2ext-filter-option-input {
    display: none !important;
}

/* Die Zeile (Grundzustand): volle Breite, fester Marker-Slot links (damit
   ✓/✕/› zwischen den Zustaenden ohne Text-Sprung erscheinen). */
.filter-options-content .ownmag2ext-filter-option-link {
    position: relative;
    display: flex !important;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 6px 10px 6px 24px;
    border: 0 !important;
    border-radius: 6px !important;
    background: transparent !important;
    color: #2b2f33 !important;       /* dunkel -> lesbar (vormals #555) */
    line-height: 1.35;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color .15s ease, color .15s ease;
}
.filter-options-content .ownmag2ext-filter-option-link .label {
    flex: 1 1 auto;
}
.filter-options-content .ownmag2ext-filter-option-link .count {
    flex: 0 0 auto;
    font-size: .85em;
    color: #6b7177;                  /* >=4.5:1 auf Weiss */
}
/* Marker-Slot (leer im Ruhezustand). */
.filter-options-content .ownmag2ext-filter-option-link::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 50%;
    transform: translateY(-50%);
    width: 1em;
    text-align: center;
    line-height: 1;
    color: var(--theme-color, #179c80);
    font-weight: 700;
}

/* Hover ueber NICHT gewaehlte Zeile -> dezente Akzent-Fuellung + ›-Marker
   ("auswaehlbar", konsistent mit Nav/Megamenue). */
.filter-options-content .ownmag2ext-filter-option-link:not(.active):hover {
    background: color-mix(in srgb, var(--theme-color) 9%, white) !important;
    color: var(--theme-color, #179c80) !important;
}
.filter-options-content .ownmag2ext-filter-option-link:not(.active):hover .count {
    color: var(--theme-color, #179c80);
}
.filter-options-content .ownmag2ext-filter-option-link:not(.active):hover::before {
    content: "\203A";               /* › */
}

/* Gewaehlte Zeile -> ✓ + Akzentfarbe + fett + zarte Toenung (KEINE
   Vollfuellung; Register-Ban auf full-saturation accents). */
.filter-options-content .ownmag2ext-filter-option-link.active {
    background: color-mix(in srgb, var(--theme-color) 12%, white) !important;
    color: var(--theme-color, #179c80) !important;
    font-weight: 700;
}
.filter-options-content .ownmag2ext-filter-option-link.active .count {
    color: var(--theme-color, #179c80);
}
.filter-options-content .ownmag2ext-filter-option-link.active::before {
    content: "\2713";               /* ✓ */
}

/* Hover ueber BEREITS gewaehlte Zeile -> Entfernen-Affordance: ✕ + roter Ton
   (erneuter Klick auf den aktiven Wert entfernt den Filter). */
.filter-options-content .ownmag2ext-filter-option-link.active:hover {
    background: color-mix(in srgb, #cc2200 9%, white) !important;
    color: #cc2200 !important;
}
.filter-options-content .ownmag2ext-filter-option-link.active:hover .count {
    color: #cc2200;
}
.filter-options-content .ownmag2ext-filter-option-link.active:hover::before {
    content: "\2715";               /* ✕ */
    color: #cc2200;
}


/* ========================================
   OwnMag2Ext LayeredNavigation - Aktive Filter ("Einkaufen nach")
   Neu geordnet als kompakte, entfernbare Chip-Reihen: Label (klein, gedaempft,
   normal case) ueber Wert (fett), ✕-Button rechts zum Entfernen. Der Text
   "Dies entfernen" bleibt SR-only erhalten (Barrierefreiheit). "Alles loeschen"
   als dezenter Textbutton. KEIN Side-Stripe-Border (impeccable-Ban).
   Kein display-Override auf .items -> Collapsible-Mechanik bleibt intakt.
   ======================================== */
.block.filter .filter-current {
    margin-bottom: 16px;
}
.block.filter .filter-current .filter-current-subtitle,
.block.filter .filter-current .block-subtitle {
    display: block;
    margin-bottom: 8px;
}
.block.filter .filter-current .items {
    margin: 0;
    padding: 0;
    list-style: none;
}
.block.filter .filter-current .items .item {
    position: relative;
    margin: 0 0 6px !important;
    padding: 8px 32px 8px 12px !important;
    background: color-mix(in srgb, var(--theme-color) 8%, white);
    border-radius: 8px;
    line-height: 1.3;
}
.block.filter .filter-current .items .item .filter-label {
    display: block;
    font-size: .8em;
    color: #6b7177;
    text-transform: none;           /* nicht ALL-CAPS (konsistent mit Theme) */
}
/* Porto haengt ein ": " an das Label (::after) - redundant, da der Wert in
   eigener Zeile darunter steht. */
.block.filter .filter-current .items .item .filter-label::after {
    content: none !important;
}
.block.filter .filter-current .items .item .filter-value {
    display: block;
    font-weight: 700;
    color: #2b2f33;
}
/* ✕-Entfernen-Button rechts; "Dies entfernen"-Text SR-only. */
.block.filter .filter-current .items .item .action.remove {
    position: absolute;
    top: 50%;
    right: 8px;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    color: #8a9097;
    text-decoration: none;
    transition: background-color .15s ease, color .15s ease;
}
.block.filter .filter-current .items .item .action.remove > span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
    padding: 0;
}
.block.filter .filter-current .items .item .action.remove::before {
    content: "\2715";               /* ✕ */
    font-size: 13px;
    line-height: 1;
}
.block.filter .filter-current .items .item .action.remove:hover {
    background: #cc2200;
    color: #fff;
}

/* "Alles loeschen" als dezenter Textbutton (rot beim Hover). */
.block.filter .filter-actions .filter-clear,
.block.filter .action.clear.filter-clear {
    display: inline-block;
    margin-top: 8px;
    color: #6b7177 !important;
    text-decoration: underline;
    font-size: .9em;
}
.block.filter .filter-actions .filter-clear:hover,
.block.filter .action.clear.filter-clear:hover {
    color: #cc2200 !important;
}


/* ========================================
   OwnMag2Ext: Filter-Sidebar auf Kategorie- UND Suchergebnisseiten schmaler
   (20% statt Portos 25%), damit das Produktgrid mehr Platz bekommt. Porto/Luma
   setzt die 25/75-Aufteilung fest im Grid-CSS (styles-l/m.css, @media
   min-width:992px) - das ist KEINE Porto-Admin-Option, daher hier per CSS
   ueberschrieben. Beide Spalten anpassen (sonst summieren sie nicht auf 100%).
   Nur Desktop (>=992px); darunter stapelt das Layout ohnehin auf eine Spalte.
   Scope auf Katalog-/Such-Listing, damit Konto-/CMS-2-Spalter (eigene Breiten)
   unberuehrt bleiben. !important: Porto laedt spaeter im Bundle
   ([[porto-css-override-important]]).
   ======================================== */
@media (min-width: 992px) {
    :is(.catalog-category-view, .catalogsearch-result-index).page-layout-2columns-left .sidebar-main {
        width: 20% !important;
    }
    :is(.catalog-category-view, .catalogsearch-result-index).page-layout-2columns-left .column.main {
        width: 80% !important;
    }
    /* Mobile-Filter-UX-Artefakte auf Desktop unterdruecken: das JS erzeugt
       Sticky-Bar und Chip-Klon immer (an <body> gehaengt), gestylt werden
       sie aber nur im max-width:991px-Block - ohne diese Regel rendert die
       Bar als statischer Streifen unter dem Footer, der Chip-Klon als
       Dublette der Sidebar-Filter-Current. Auf Desktop ist die echte
       Sidebar der Zugang, beides gehoert weg. */
    .o2e-filterbar,
    .o2e-filterchips,
    .o2e-sortsheet,
    .o2e-sortsheet-backdrop {
        display: none !important;
    }
}


/* ========================================
   OwnMag2Ext LayeredNavigation - Kategorie-Sidebar
   Darstellung wie das Megamenue (CT118/M1-Parität, gleiche visuelle Sprache
   wie die Hauptnavigation): ›-Chevron als Aufzaehlungszeichen in Akzentfarbe
   STATT disc/circle-Bullets, Hover ruckt den Eintrag 4px nach rechts
   (translateX) + Akzentfarbe, aktuelle Kategorie fett + Akzentfarbe
   ("du bist hier"). Chevron + Hover sind 1:1 zu .sw-megamenu li.level2 > a,
   damit Haupt- und Seitennavigation dasselbe Muster zeigen.
   Active-State bewusst OHNE farbigen Side-Stripe-Border (impeccable-Ban) -
   stattdessen Gewicht + Farbe. Counts bleiben gedaempft (Sekundaer-Metadaten).
   !important: Porto/Smartwave setzen list-style + Link-Farbe spaeter im
   Bundle ([[porto-css-override-important]]).
   ======================================== */
/* Bullets weg + ul-Default-Einrueckung zuruecknehmen */
.ownmag2ext-category-navigation__list,
.ownmag2ext-category-navigation__sublist {
    list-style: none !important;
    margin: 0;
    padding-left: 0;
}
/* Kind-Liste einruecken -> sichtbare Hierarchie */
.ownmag2ext-category-navigation__sublist {
    padding-left: 14px;
}

/* Link als Block: ganze Zeile klickbar, Platz fuer den Chevron, sauberes translateX */
.ownmag2ext-category-navigation__link {
    position: relative;
    display: block;
    padding: 4px 0 4px 16px;
    transition: transform 0.15s ease, color 0.15s ease;
}
/* ›-Chevron als Bullet (identisch zum Megamenue) */
.ownmag2ext-category-navigation__link::before {
    content: "\203A";            /* › Single Right-Pointing Angle Quotation */
    position: absolute;
    left: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--theme-color, #ff6840);
    font-weight: 600;
    line-height: 1;
}

/* Ruhe- UND :visited-Zustand einheitlich dunkel (sonst faerbt der Browser
   unbesuchte Links willkuerlich in der Akzentfarbe, abhaengig vom Verlauf). */
.ownmag2ext-category-navigation__link,
.ownmag2ext-category-navigation__link:visited {
    color: #222529 !important;
}
/* Hover: 4px nach rechts + Akzentfarbe (Muscle-Memory vom Megamenue) */
.ownmag2ext-category-navigation__link:hover {
    transform: translateX(4px);
    color: var(--theme-color, #ff6840) !important;
}

/* Aktuelle Kategorie kenntlich: fett + Akzentfarbe. KEIN Side-Stripe-Border
   (impeccable-Ban) - Gewicht + Farbe reichen. Nur der direkte Link des aktiven
   <li>, nicht dessen Kinder (> Kombinator). */
.ownmag2ext-category-navigation__item.active > .ownmag2ext-category-navigation__link,
.ownmag2ext-category-navigation__item.active > .ownmag2ext-category-navigation__link:visited {
    color: var(--theme-color, #ff6840) !important;
    font-weight: 700;
}

/* Kind-Eintraege visuell untergeordnet (etwas kleiner) */
.ownmag2ext-category-navigation__item--child > .ownmag2ext-category-navigation__link {
    font-size: 0.95em;
}

/* Produktanzahl dezenter: in Klammern + kleiner + gedaempft, damit der
   Kategoriename die Hauptzeile bleibt. Grau passt Kontrast (>4.5:1 auf Weiss). */
.ownmag2ext-category-navigation__count {
    font-size: 0.85em;
    color: #6b7177;
}
.ownmag2ext-category-navigation__count::before {
    content: "(";
}
.ownmag2ext-category-navigation__count::after {
    content: ")";
}

/* Reduced Motion: kein Verschieben, nur Farbwechsel */
@media (prefers-reduced-motion: reduce) {
    .ownmag2ext-category-navigation__link { transition: color 0.15s ease; }
    .ownmag2ext-category-navigation__link:hover { transform: none; }
}


/* ==============================================
   Mobile Filter-UX (<=991px): Sticky-Bar + Bottom Sheet + Chips
   Critique 2026-07-19 (P1) + Recherche .scratch/research/mobile-filter-ux.md
   (Baymard sticky Filter&Sort-Trigger, NN/g Bottom Sheet mit sichtbarem
   Close, Applied-Filter-Chips mit Truncation-Cue). Gegenstueck zum JS
   web/js/o2e-filter-sheet.js - das JS setzt nur body-Klassen/Elemente,
   die gesamte Optik lebt hier. Desktop (>=992px) bleibt komplett
   unveraendert (Sidebar); alles hier ist auf <=991px gegated.
   z-index-Skala: Bar 999 < Toast 1000 (product-page.css) < Off-Canvas-
   Menue 1001 (mobile-menu.css); Sheet 1002 + Backdrop 1001 liegen
   BEWUSST ueber dem Menue-Level: ein offenes Sheet ist der oberste
   modale Kontext, das Menue ist dann nie gleichzeitig offen.
   ============================================== */
@media (max-width: 991px) {
    /* Guard gegen JS-Race: Portos alter FILTER-Toggle (2 Instanzen, s.
       toolbar.phtml) darf nicht kurz sichtbar/klickbar aufblitzen, bevor
       o2e-filter-sheet.js ihn entfernt. Das echte Entfernen macht das JS -
       das hier ist nur die Absicherung fuer den Moment davor. */
    .sidebar-toggle,
    .porto-product-filters-toggle {
        display: none !important;
    }

    /* Sidebar-Filterblock im Ruhezustand mobil aus dem Flow nehmen -
       der Zugang ist die Sticky-Bar. (Vorher stand der Block als
       "Shop By"-Toggle irgendwo im Seitenfluss, beim 15.000px-Grid
       faktisch unauffindbar.) */
    /* ID-Selektor statt .sidebar-Pfad: das JS haengt den Block mobil an
       <body> (Porto-Off-Canvas-transform macht die Sidebar sonst zum
       Containing Block des fixed-Sheets, s. Kommentar im JS) */
    body.o2e-has-filterbar #layered-filter-block {
        display: none;
    }

    /* --- Sticky-Trigger-Bar unten --- */
    body.o2e-has-filterbar {
        /* Platz fuer die Bar, damit Footer/letzte Produkte nicht verdeckt werden */
        padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
    }
    .o2e-filterbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 999;
        display: flex;
        background: #fff;
        border-top: 1px solid #dadada;
        box-shadow: 0 -4px 16px rgba(0, 0, 0, .08);
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    .o2e-filterbar__btn {
        flex: 1 1 50%;
        min-height: 52px; /* Touch-Target >=48px */
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        background: none;
        border: 0;
        font-family: inherit;
        font-size: 15px;
        font-weight: 600;
        color: #2f2f2f;
        text-transform: none;
        cursor: pointer;
    }
    .o2e-filterbar__btn--filter + .o2e-filterbar__btn--sort {
        border-left: 1px solid #dadada;
    }
    /* Nur-Sortieren-Variante (Kategorie ohne Filter, o2e-filter-sheet.js
       setzt den Modifier): kein Filter-Button, keine leere Haelfte -
       "Sortieren" nimmt die volle Bar-Breite, zentriert wie die Zwei-
       Button-Variante. */
    .o2e-filterbar--sort-only .o2e-filterbar__btn--sort {
        flex: 1 1 100%;
    }
    .o2e-filterbar__icon {
        color: var(--theme-color, #179c80);
        font-size: 16px;
        line-height: 1;
    }
    .o2e-filterbar__count {
        min-width: 22px;
        height: 22px;
        border-radius: 11px;
        background: var(--theme-color, #179c80);
        color: #fff;
        font-size: 12px;
        font-weight: 700;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0 6px;
    }

    /* --- Backdrop + Scroll-Lock --- */
    .o2e-filtersheet-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1001;
        background: rgba(0, 0, 0, .4);
    }
    .o2e-filtersheet-backdrop[hidden] {
        display: none;
    }
    body.o2e-filtersheet-open {
        overflow: hidden;
    }

    /* --- Bottom Sheet: der vorhandene Filterblock, fixiert --- */
    body.o2e-filtersheet-open #layered-filter-block {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        z-index: 1002;
        max-height: 88dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, .2);
        padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
        margin: 0;
        animation: o2e-sheet-up .28s cubic-bezier(.16, 1, .3, 1);
    }
    /* Sheet-Kopf: Porto-"Shop By"-Titel wird zur Sheet-Titelzeile */
    body.o2e-filtersheet-open .block.filter .filter-title {
        position: sticky;
        top: 0;
        z-index: 1;
        /* !important-Riegel: Porto stylt .filter-title mobil als Toggle-
           Kasten (display:block, strong mit Border/Padding) - gemessen
           2026-07-20, ohne Riegel stapeln Titel und Close-Button links */
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        padding: 14px 0 12px !important;
        border-bottom: 1px solid #ececec;
        margin: 0 0 8px !important;
    }
    body.o2e-filtersheet-open .block.filter .filter-title strong {
        /* Porto versteckt den Titel mobil (display:none) - im Sheet ist er
           die Titelzeile; !important gegen Portos mobile Regel */
        display: block !important;
        /* Porto positioniert strong/Toggle im Titel absolut - zurueck in
           den Flex-Flow, sonst stapeln Titel und Close-Button links */
        position: static !important;
        font-size: 17px !important;
        font-weight: 700;
        color: #222529 !important;
        text-transform: none;
        border: 0 !important;
        padding: 0 !important;
        background: none !important;
    }
    /* Inhalt im Sheet immer offen - Portos Collapsible-Toggle auf dem
       Titel darf das Sheet nicht "zuklappen" (Zustand hier erzwingen,
       mage-init bleibt aktiv) */
    body.o2e-filtersheet-open .block.filter .filter-content {
        display: block !important;
    }
    .o2e-filtersheet-close {
        position: static !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 48px !important;
        height: 48px !important;
        margin: -8px -8px -8px 0 !important;
        /* !important durchgaengig: Porto gibt Buttons generisch Border/
           Flaeche/16px und ueberstimmt sonst einzelne Properties */
        border: 0 !important;
        background: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        font-size: 28px !important;
        line-height: 1 !important;
        color: #2f2f2f !important;
        cursor: pointer;
    }
    /* Filter-Zeilen: Touch-Targets, ruhige Typo in Satzschreibung */
    body.o2e-filtersheet-open .block.filter .filter-options-title {
        min-height: 48px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 15px;
        font-weight: 600;
        text-transform: none;
        letter-spacing: 0.2px; /* statt Portos 0.75px - nur die Laufweite */
    }
    body.o2e-filtersheet-open .block.filter .filter-options-content a {
        display: flex;
        align-items: center;
        min-height: 44px;
        font-size: 14px;
    }

    /* --- Applied-Filter-Chips ueber der Toolbar (Klon aus dem JS) --- */
    .o2e-filterchips {
        display: flex;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        /* rechts offen auslaufen lassen: angeschnittener letzter Chip =
           Baymard-Truncation-Cue (mehr Inhalt, weiterwischen) */
        padding: 8px 0 8px 10px;
        margin: 0 0 4px;
        scrollbar-width: none;
    }
    .o2e-filterchips::-webkit-scrollbar {
        display: none;
    }
    .o2e-filterchips .items,
    .o2e-filterchips ol {
        display: flex;
        gap: 8px;
        margin: 0;
        padding: 0;
        list-style: none;
    }
    .o2e-filterchips .item {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        white-space: nowrap;
        margin: 0;
        min-height: 44px; /* Touch-Target >=44px (Remove-Button) */
        padding: 0 12px;
        border: 1.5px solid color-mix(in srgb, var(--theme-color, #179c80) 30%, #dadada);
        border-radius: 20px;
        background: color-mix(in srgb, var(--theme-color, #179c80) 6%, #fff);
        font-size: 13px;
    }
    /* Klon bringt den "Einkaufen nach"-Untertitel des state-Blocks mit -
       in der Chip-Leiste ist er Rauschen */
    .o2e-filterchips .block-subtitle,
    .o2e-filterchips .filter-current-subtitle {
        display: none !important;
    }
    .o2e-filterchips .filter-label {
        color: #6b6b6b;
        font-weight: 400;
        text-transform: none !important;
        font-size: 13px !important;
    }
    .o2e-filterchips .filter-label::after {
        content: ":";
    }
    .o2e-filterchips .filter-value {
        color: #2f2f2f;
        font-weight: 600;
    }
    .o2e-filterchips .action.remove {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px; /* Touch-Target >=44px */
        height: 44px;
        margin-right: -12px;
        color: #6b6b6b;
        text-decoration: none;
        font-size: 18px;
        line-height: 1;
    }
    /* Magento rendert den Remove-Link als Text ("Dies entfernen") - im Chip
       wird er zum x-Glyph, der Text bleibt fuer Screenreader erhalten
       (visually-hidden statt display:none) */
    .o2e-filterchips .action.remove::before {
        content: "\00d7";
    }
    .o2e-filterchips .action.remove span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
    }
    .o2e-filterchips__clear {
        display: inline-flex;
        align-items: center;
        min-height: 44px; /* Touch-Target >=44px */
        white-space: nowrap;
        font-size: 13px;
        font-weight: 600;
        color: var(--theme-color, #179c80);
        margin-left: 4px;
        padding: 8px 10px;
    }

    @keyframes o2e-sheet-up {
        from { transform: translateY(24px); opacity: .6; }
        to   { transform: translateY(0); opacity: 1; }
    }
    @media (prefers-reduced-motion: reduce) {
        body.o2e-filtersheet-open #layered-filter-block,
        body.o2e-sortsheet-open .o2e-sortsheet {
            animation: none;
        }
    }

    /* --- Sortier-Sheet (Ein-Tap Action-List, o2e-filter-sheet.js) ---
       Gleiche Sheet-Sprache wie das Filter-Sheet (abgerundete Oberkante,
       Kopf mit Titel + Close-Button), eigener State/Backdrop, schliesst
       das Filter-Sheet beim Oeffnen und umgekehrt (JS-seitig exklusiv). */
    .o2e-sortsheet[hidden] {
        display: none;
    }
    .o2e-sortsheet-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1001;
        background: rgba(0, 0, 0, .4);
    }
    .o2e-sortsheet-backdrop[hidden] {
        display: none;
    }
    body.o2e-sortsheet-open {
        overflow: hidden;
    }
    body.o2e-sortsheet-open .o2e-sortsheet {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1002;
        max-height: 60dvh;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        background: #fff;
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -8px 32px rgba(0, 0, 0, .2);
        padding: 0 16px calc(16px + env(safe-area-inset-bottom, 0px));
        margin: 0;
        animation: o2e-sheet-up .28s cubic-bezier(.16, 1, .3, 1);
    }
    .o2e-sortsheet__header {
        position: sticky;
        top: 0;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #fff;
        padding: 14px 0 12px;
        border-bottom: 1px solid #ececec;
        margin: 0 0 8px;
    }
    .o2e-sortsheet__title {
        font-size: 17px;
        font-weight: 700;
        color: #222529;
    }
    /* !important durchgaengig wie .o2e-filtersheet-close oben: Porto gibt
       Buttons generisch Border/1px solid #ccc/Flaeche/10.4px 26px Padding -
       gemessen 2026-07-20 (getComputedStyle), ohne Riegel wirkt das Sheet
       wie eckige Kaesten statt ruhige Listen-Zeilen. */
    .o2e-sortsheet-close {
        position: static !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 48px !important;
        height: 48px !important;
        margin: -8px -8px -8px 0 !important;
        border: 0 !important;
        background: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        font-size: 28px !important;
        line-height: 1 !important;
        color: #2f2f2f !important;
        cursor: pointer;
    }
    .o2e-sortsheet__list {
        margin: 0 0 8px;
        padding: 0;
        list-style: none;
    }
    .o2e-sortsheet__list li + li .o2e-sortsheet__option {
        border-top: 1px solid #ececec !important;
    }
    .o2e-sortsheet__option {
        display: flex;
        align-items: center;
        gap: 10px;
        width: 100%;
        min-height: 48px; /* Touch-Target >=48px */
        padding: 0 4px !important;
        border: 0 !important;
        background: none !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        font-family: inherit;
        font-size: 14px;
        font-weight: 400;
        color: #2f2f2f;
        text-align: left;
        cursor: pointer;
    }
    .o2e-sortsheet__check {
        flex: 0 0 20px;
        text-align: center;
        color: var(--theme-color, #179c80);
        font-weight: 700;
    }
    .o2e-sortsheet__label {
        flex: 1 1 auto;
    }
    .o2e-sortsheet__option--current {
        font-weight: 600;
        color: var(--theme-color, #179c80);
    }

    /* --- Sheet-Sektion: Kategorie-Nav (o2e-filter-sheet.js haengt sie als
       erste Sektion in den filterBlock). .ownmag2ext-category-navigation ist
       ein eigener .block, kein .block.filter - die Filter-Sektions-Regeln
       oben greifen hier nicht, eigener Satz analog dazu. --- */
    body.o2e-filtersheet-open .ownmag2ext-category-navigation {
        margin: 0 0 8px;
        padding-bottom: 8px;
        border-bottom: 1px solid #ececec;
    }
    body.o2e-filtersheet-open .ownmag2ext-category-navigation .block-title {
        /* !important-Riegel: dieselbe Porto-Falle wie bei .filter-title
           strong oben - Titel wird mobil generisch versteckt/absolutiert.
           display:flex statt block: der Titel ist im Sheet zugleich der
           Auf-/Zuklapp-Toggle (o2e-filter-sheet.js), braucht also Platz
           fuer den Chevron rechts + ein komfortables Tap-Target. */
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        min-height: 48px;
        position: static !important;
        margin: 0 !important;
        padding: 14px 0 8px !important;
        cursor: pointer;
    }
    body.o2e-filtersheet-open .ownmag2ext-category-navigation .block-title strong {
        display: block !important;
        position: static !important;
        font-size: 15px !important;
        font-weight: 600;
        text-transform: none;
        color: #2f2f2f !important;
        border: 0 !important;
        padding: 0 !important;
        background: none !important;
    }
    body.o2e-filtersheet-open .ownmag2ext-category-navigation .ownmag2ext-category-navigation__link {
        display: flex;
        align-items: center;
        min-height: 48px;
        /* Typografie wie das Mobile-Hauptmenue (statt Portos 13px/700/gruen
           aus der Sidebar-Kaskade) - Kategorie-Nav im Sheet ist ruhige
           Fliess-Navigation, keine Auszeichnungs-Liste. !important-Riegel:
           die generische .ownmag2ext-category-navigation__link-Regel weiter
           oben setzt color bereits mit !important (Porto-Falle), das hier
           muesste sonst dagegen verlieren. */
        font-size: 14px !important;
        font-weight: 500 !important;
        color: #2f2f2f !important;
        line-height: 1.35 !important;
    }

    /* --- Kategorie-Sektion im Sheet: default zugeklappt (Issue 2026-07-21)
       Zustand lebt in der o2e-catnav-collapsed-Klasse (o2e-filter-sheet.js),
       Chevron in derselben visuellen Sprache wie das Off-Canvas-Menue
       (border-Dreieck, Markenfarbe, rotiert beim Aufklappen - s.
       mobile-menu.css). Nur im Sheet-Kontext (body.o2e-filtersheet-open) -
       die Desktop-Sidebar traegt die Klasse nie. --- */
    body.o2e-filtersheet-open .ownmag2ext-category-navigation.o2e-catnav-collapsed .block-content {
        display: none !important;
    }
    body.o2e-filtersheet-open .ownmag2ext-category-navigation .block-title::after {
        content: "";
        flex: none;
        width: 9px;
        height: 9px;
        margin-left: 8px;
        border-right: 2px solid var(--theme-color, #179c80);
        border-bottom: 2px solid var(--theme-color, #179c80);
        transform: rotate(-135deg); /* aufgeklappt: Pfeil zeigt nach oben */
        transition: transform 0.2s ease;
    }
    body.o2e-filtersheet-open .ownmag2ext-category-navigation.o2e-catnav-collapsed .block-title::after {
        transform: rotate(45deg); /* zugeklappt: Pfeil zeigt nach unten */
    }
    @media (prefers-reduced-motion: reduce) {
        body.o2e-filtersheet-open .ownmag2ext-category-navigation .block-title::after {
            transition: none !important;
        }
    }

    /* --- optionsetting-left (kuratierter Kategorietext) im Content-Fluss:
       o2e-filter-sheet.js haengt ihn mobil ans Ende von .column.main. Reiner
       Fliesstext, kein Sidebar-Rail-Layout. --- */
    .column.main .ownmag2ext-optionsetting-left {
        margin-top: 24px;
        padding-top: 16px;
        border-top: 1px solid #ececec;
        font-size: 14px;
        line-height: 1.6;
    }
}