/* =====================================================================
 * plate_discovery — Sucheinstieg, Chips, Ergebnis-Panel
 * ---------------------------------------------------------------------
 * Generische Optik. Alles Sichtbare haengt an `--pldsc-*`-Variablen; ein
 * Theme setzt die Variablen und schreibt keine Regeln nach.
 *
 * DREI DINGE STEHEN HIER BEWUSST NICHT:
 *
 *  1. Kein Sektions-Hintergrund und kein Sektions-Padding. Beides gehoert an
 *     die generischen Frame-Felder des Elements (`background_color_class`,
 *     `background_image`, `space_before/after_class`, `frame_layout_inner_*`).
 *     Wer es hier setzt, macht genau diese Redakteursfelder wirkungslos.
 *  2. Keine eigene Container-Breite. Kein `max-width`, kein `margin: auto`,
 *     kein Seiten-Padding auf einem Sektions-Wrapper — die Inhaltsbreite kommt
 *     fuer ALLE Elemente ausschliesslich vom generischen `.frame-container`
 *     (Feld `frame_layout`). Eine zweite Breitenquelle macht Seiten uneinheitlich.
 *  3. Keine `z-index`-Verschiebung an einer Kopfzeile und kein Overlay ueber
 *     der Navigation. Das Panel liegt bewusst NIEDRIG (`--pldsc-panel-z`, 40)
 *     und damit unter jedem ueblichen Header. Wer es hochzieht, macht
 *     Nav-Links unklickbar.
 *
 * Erlaubt und benutzt: Text-Zeilenlaengen in `rem`/`ch` INNERHALB der Karten.
 * ===================================================================== */

atomic-discovery {
    /* --- Skin-Variablen (ein Theme setzt diese, nicht die Regeln) --- */
    --pldsc-radius: 0;
    --pldsc-gap: 0.75rem;
    --pldsc-surface: #fff;
    --pldsc-surface-soft: rgba(0, 0, 0, 0.03);
    --pldsc-ink: currentColor;
    --pldsc-ink-soft: rgba(0, 0, 0, 0.62);
    /* DIE GEDAEMPFTE STUFE IST EINE FARBE, KEINE OPAZITAET.
       Bis 09/2026 wurden Nullzustaende und Trefferzahlen mit `opacity` gedimmt
       (0.42 / 0.6 / 0.7). Opazitaet rechnet gegen den JEWEILIGEN Grund: auf einer
       hellen Flaeche landet dieselbe Angabe bei ~2.2:1, auf einer dunklen
       verschwindet sie ganz — ein Theme kann das nicht mehr geradeziehen, weil
       ihm der Stellhebel fehlt. Als eigene Variable ist die Stufe messbar und
       pro Flaeche einstellbar. */
    --pldsc-ink-muted: rgba(0, 0, 0, 0.72);
    --pldsc-line: rgba(0, 0, 0, 0.16);
    --pldsc-line-strong: rgba(0, 0, 0, 0.34);
    --pldsc-accent: currentColor;
    --pldsc-accent-ink: #fff;
    --pldsc-shadow: 0 18px 60px rgba(0, 0, 0, 0.16);
    --pldsc-panel-max-h: min(70vh, 40rem);
    --pldsc-panel-z: 40;
    /* Das Options-Panel einer Facette liegt UEBER dem Ergebnis-Panel (es klappt
       aus der Zeile darueber auf) — aber weiterhin unter jedem ueblichen
       Seitenkopf (100), Overlay (99), Abschnittsnavigation (90) und
       Barrierewerkzeug (80). */
    --pldsc-pop-z: 45;
    /* Grundbreite eines Options-Panels; `--pldsc-pop-max-w` deckelt sie am
       Fensterrand. Lange Listen ziehen die Grundbreite selbst auf das Maximum
       (siehe `:has(.pldsc__opt:nth-child(9))`). */
    --pldsc-pop-w: 19rem;
    --pldsc-pop-max-w: min(26rem, calc(100vw - 2rem));
    --pldsc-pop-max-h: min(60vh, 24rem);
    /* Bildlaufleiste der beiden scrollenden Bereiche (Options-Panel,
       Ergebnis-Panel). Sie muss SICHTBAR sein: eine Overlay-Leiste, die erst
       waehrend des Scrollens erscheint, laesst einen Bereich aussehen, als
       reagiere er nicht (Kundenmeldung 02.09.2026). Ein Theme stellt hier EINEN
       Wert um, nicht zwei Regeln. */
    --pldsc-scrollbar: var(--pldsc-ink-soft) var(--pldsc-surface-soft);
    --pldsc-focus: 2px solid currentColor;
    --pldsc-card-measure: 34ch;
    /* Der Pfeil am Auslöser ist die einzige Anzeige des Auf-/Zu-Zustands und
       braucht deshalb Kontrast (WCAG 1.4.11). Auf hellem Grund traegt 0.65
       genug; auf dunklem Grund stellt ein Theme hier hoch. */
    --pldsc-caret-opacity: 0.65;
    /* Stellschrauben der zweispaltigen Anordnung (Knopf neben Feld), siehe
       unten. `--pldsc-query-gap` ist der Abstand ZWISCHEN Feld und Knopf,
       `--pldsc-go-min-w` haelt den Knopf breit genug, dass er als Flaeche und
       nicht als Wortende gelesen wird. */
    --pldsc-query-gap: 0.75rem;
    --pldsc-go-min-w: 12rem;

    display: block;
    position: relative;
}

/* Vor dem Upgrade der Komponente ist alles ein normales Formular. Nichts wird
   versteckt: ohne JavaScript muss die Suche vollstaendig bedienbar bleiben. */
atomic-discovery:not(:defined) .pldsc__panel { display: none; }

/* Der Bezugsrahmen der ANORDNUNG ist die Huelle, nicht das Fenster.
   Dieselbe Komponente steht an drei sehr verschiedenen Orten — als breite
   Leiste unter dem Seitenkopf, als Filterbereich einer Ergebnisseite und als
   schmales Aufklapp-Feld in der Kopfzeile. Ein `@media`-Umbruch wuerde die
   Kopfzeilen-Fassung (rund 30rem breit) bei grossem Fenster in die
   zweispaltige Anordnung zwingen, fuer die sie keinen Platz hat. `@container`
   fragt genau das Richtige: wie viel Platz hat DIESES Vorkommen. */
.pldsc__shell {
    position: relative;
    container-type: inline-size;
    container-name: pldsc;
}

/* --------------------------------------------------------------- Formular */
.pldsc__form {
    display: flex;
    flex-direction: column;
    gap: var(--pldsc-gap);
}

.pldsc__field {
    display: flex;
    align-items: stretch;
    gap: 0.5rem;
    background: var(--pldsc-surface);
    border: 1px solid var(--pldsc-line);
    border-radius: var(--pldsc-radius);
    padding: 0.35rem 0.35rem 0.35rem 1rem;
}

.pldsc__label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.pldsc__input {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--pldsc-ink);
    font: inherit;
    padding: 0.6rem 0;
    appearance: none;
}
/* Der Platzhalter ist gelesener Text und braucht Kontrast. Ohne diese Regel
   nimmt der Browser die Textfarbe bei ~54 % Deckung — auf jedem Grund unter der
   Schwelle. `opacity: 1` ist Pflicht: Firefox dimmt sonst zusaetzlich. */
.pldsc__input::placeholder {
    color: var(--pldsc-ink-muted);
    opacity: 1;
}
.pldsc__input:focus { outline: none; }
.pldsc__field:focus-within {
    border-color: var(--pldsc-line-strong);
    /* EIN Ring, am Kasten: als Schatten statt Outline, damit er dem Radius folgt. */
    box-shadow: 0 0 0 1px var(--pldsc-line-strong);
}

.pldsc__submit {
    flex: 0 0 auto;
    border: 0;
    border-radius: var(--pldsc-radius);
    background: var(--pldsc-accent);
    color: var(--pldsc-accent-ink);
    font: inherit;
    font-size: 0.85em;
    letter-spacing: 0.04em;
    padding: 0.55rem 1.1rem;
    cursor: pointer;
}

/* Visuell verborgener Standardknopf: er sorgt nur dafuer, dass ENTER im
   Suchfeld das Formular absendet (statt den ersten Chip auszuloesen). Sichtbar
   ist an seiner Stelle der Link `.pldsc__go`. `display:none` waere falsch —
   ein nicht gerenderter Standardknopf ist in einigen Browsern keiner mehr. */
.pldsc__submit--quiet {
    position: absolute;
    /* `inset` gehoert dazu, nicht nur `width`: OHNE eine gesetzte Kante nimmt
       der Knopf seine statische Position im Flex-Container ein und die
       Ausrichtung faellt auf „linke UND rechte Kante" zurueck — der Kasten wird
       so breit wie sein Container und schiebt die Seite um zwei Pixel nach
       rechts (gemessen 09/2026 auf 375 px: scrollWidth 377 statt 375). Der
       Knopf ist unsichtbar, sein KASTEN war es nicht. */
    inset-block-start: 0;
    inset-inline-start: 0;
    width: 1px; height: 1px;
    margin: 0; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* =====================================================================
 * ZWEISPALTIGE ANORDNUNG — der Absendeknopf steht NEBEN dem Suchfeld
 * ---------------------------------------------------------------------
 * Ab genug Breite ruecken Suchfeld und „Ergebnisse anzeigen" in EINE Zeile und
 * die Rueckmeldung (Trefferzahl, „Alles zuruecksetzen") an das rechte Ende der
 * Filterzeile. Aus drei Zeilen werden zwei; das Suchfeld hoert auf, ueber die
 * volle Breite zu laufen.
 *
 * DAS MARKUP AENDERT SICH DAFUER NICHT. Der Knopf bleibt dort stehen, wo er
 * fachlich hingehoert — als letztes Element der Rueckmeldezeile, hinter den
 * Filtern. Das ist die Reihenfolge, in der ihn Tastatur und Vorleser
 * antreffen (erst suchen, dann filtern, dann absenden), und ohne JavaScript
 * bleibt er ein echter `<a href>` mit den aktiven Parametern. Verschoben wird
 * nur die DARSTELLUNG: `display: contents` an der Rueckmeldezeile hebt deren
 * eigenen Kasten auf, ihre drei Kinder werden selbst Raster-Elemente und
 * lassen sich einzeln setzen.
 *
 * Die Schwelle steht als Zahl und nicht als Variable, weil eine
 * Container-Query-Bedingung keine `var()` auswerten kann. 46rem ist der Punkt,
 * ab dem neben einem Knopf von `--pldsc-go-min-w` noch ein Suchfeld steht, das
 * laenger ist als sein Platzhalter breit.
 *
 * Die Bedingung `:has(> .pldsc__bar-status > .pldsc__go)` ist kein Schmuck: ist
 * kein Ziel gepflegt, gibt es den Knopf gar nicht (dann sitzt der sichtbare
 * Submit-Knopf IM Feld) — und eine dritte Rasterspalte ohne Inhalt hinterliesse
 * nur eine Luecke am rechten Rand.
 * ================================================================= */
@container pldsc (min-width: 46rem) {
    .pldsc__form:has(> .pldsc__bar-status > .pldsc__go) {
        display: grid;
        /* Spalte 1 nimmt den Rest, Spalte 2 die Trefferzahl, Spalte 3 den
           Knopf. Das Suchfeld spannt 1+2 — seine Breite haengt damit NICHT an
           der Laenge der Trefferzahl, die sich beim Filtern aendert. */
        grid-template-columns: minmax(0, 1fr) auto auto;
        grid-template-areas:
            "field  field go"
            "facets count reset";
        align-items: center;
        column-gap: var(--pldsc-query-gap);
        row-gap: var(--pldsc-gap);
    }
    .pldsc__form:has(> .pldsc__bar-status > .pldsc__go) > .pldsc__field { grid-area: field; }
    .pldsc__form:has(> .pldsc__bar-status > .pldsc__go) > .pldsc__facets { grid-area: facets; }
    .pldsc__form:has(> .pldsc__bar-status > .pldsc__go) > .pldsc__bar-status { display: contents; }

    /* Kindselektoren, nicht Nachfahren: `.pldsc__count` gibt es ein zweites Mal
       im Fuss jedes Options-Panels — das steht in derselben Formular-Teilbaum
       und wuerde sonst mit ins Raster gezogen. */
    .pldsc__form:has(> .pldsc__bar-status > .pldsc__go) > .pldsc__bar-status > .pldsc__count {
        grid-area: count;
        justify-self: end;
    }
    .pldsc__form:has(> .pldsc__bar-status > .pldsc__go) > .pldsc__bar-status > .pldsc__reset {
        grid-area: reset;
        justify-self: end;
    }
    .pldsc__form:has(> .pldsc__bar-status > .pldsc__go) > .pldsc__bar-status > .pldsc__go {
        grid-area: go;
        /* Der Knopf ist so hoch wie das Feld — damit stehen die Mittelachsen
           der beiden Beschriftungen exakt aufeinander (beide Kaesten beginnen
           auf derselben Zeilenoberkante und sind gleich hoch, beide zentrieren
           ihren Text senkrecht). */
        align-self: stretch;
        justify-content: center;
        /* Die automatische Ausrichtung der Flex-Zeile faellt weg. */
        margin-inline-start: 0;
        min-width: var(--pldsc-go-min-w);
    }
}

/* ------------------------------------------------------- Rueckmeldezeile */
/* Was ein Klick bewirkt hat, steht AN DER LEISTE — nicht erst unterhalb des
   sichtbaren Bereichs. Ohne diese Zeile sieht ein Chip-Klick nach nichts aus,
   sobald die Treffer weiter unten liegen. */
.pldsc__bar-status {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem 1rem;
    font-size: 0.85em;
}

/* Die aria-live-Region: nur fuer Screenreader. Sichtbar steht dieselbe Zahl
   an der Leiste (`.pldsc__count`) — zweimal dieselbe Angabe untereinander liest
   sich wie ein Fehler. */
.pldsc__status {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

.pldsc__count {
    color: var(--pldsc-ink-soft);
    font-variant-numeric: tabular-nums;
}
.pldsc__count:empty { display: none; }

.pldsc__reset {
    color: var(--pldsc-ink-soft);
    text-decoration: underline;
    text-underline-offset: 0.2em;
}
.pldsc__reset:hover { color: var(--pldsc-ink); }

.pldsc__go {
    margin-inline-start: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 1px solid var(--pldsc-accent);
    border-radius: var(--pldsc-radius);
    background: var(--pldsc-accent);
    color: var(--pldsc-accent-ink);
    letter-spacing: 0.04em;
    padding: 0.5rem 1.1rem;
    text-decoration: none;
}
.pldsc__go:hover { color: var(--pldsc-accent-ink); }

.pldsc__reset:focus-visible,
.pldsc__go:focus-visible {
    outline: var(--pldsc-focus);
    outline-offset: 2px;
}

/* ============================================================= Facetten
 * Je Gruppe EIN Auslöser, der ein Options-Panel aufklappt.
 *
 * Bis 09/2026 standen hier alle Optionen aller Gruppen gleichzeitig als
 * waagerecht scrollende Reihen. Das war auf schmalen Fenstern ein hoher Block
 * ueber den Treffern und liess sich nur durch seitliches Schieben bedienen.
 *
 * ES GIBT HIER KEIN `overflow-x` MEHR — nirgends. Passt eine Optionsliste nicht
 * ins Panel, scrollt das PANEL (senkrecht, mit sichtbarer Leiste) oder es wird
 * mehrspaltig. Die Leiste selbst bricht um.
 * ================================================================== */
.pldsc__facets {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* <details>. Das Aufklappen macht der Browser — auch ohne JavaScript. */
.pldsc__group {
    position: relative;
    border: 0;
    margin: 0;
    padding: 0;
    min-width: 0;
}

/* ------------------------------------------------------------ Auslöser */
.pldsc__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    border: 1px solid var(--pldsc-line);
    border-radius: var(--pldsc-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.85em;
    padding: 0.42rem 0.7rem 0.42rem 0.8rem;
    cursor: pointer;
    user-select: none;
    /* Das Dreieck des Browsers weg — der Auslöser traegt seinen eigenen Pfeil,
       der sich beim Aufklappen dreht. `list-style` und das WebKit-Pseudo
       braucht es BEIDE, sonst bleibt in einem der beiden Lager ein Marker. */
    list-style: none;
}
.pldsc__trigger::-webkit-details-marker { display: none; }
.pldsc__trigger::marker { content: ''; }
.pldsc__trigger:hover { border-color: var(--pldsc-line-strong); }

/* Eine Gruppe MIT Auswahl ist auch eingeklappt als solche zu erkennen — die
   Zahl allein waere eine Angabe, die nur farblich spricht. */
.pldsc__group:has(.pldsc__badge:not([hidden])) > .pldsc__trigger,
.pldsc__group[open] > .pldsc__trigger { border-color: var(--pldsc-line-strong); }

.pldsc__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35em;
    height: 1.35em;
    padding: 0 0.35em;
    border-radius: 999px;
    background: var(--pldsc-accent);
    color: var(--pldsc-accent-ink);
    font-size: 0.8em;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}

.pldsc__caret {
    display: inline-flex;
    margin-inline-start: 0.1rem;
    opacity: var(--pldsc-caret-opacity);
    transition: transform 0.16s ease;
}
.pldsc__group[open] > .pldsc__trigger .pldsc__caret { transform: rotate(180deg); }

/* Nur fuer Vorleser — traegt die Bedeutung der Zahlen („, 2 ausgewählt"). */
.pldsc__sr {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* ------------------------------------------------------- Options-Panel */
.pldsc__pop {
    position: absolute;
    /* UEBER dem Seiteninhalt, nicht im Fluss: Sonst wuerde jedes Aufklappen die
       Treffer darunter nach unten schieben — genau der Mangel, den dieser Umbau
       auf schmalen Fenstern beseitigt.
       Die Ebene liegt bewusst NIEDRIG (45) und damit unter Seitenkopf,
       Overlay, Abschnittsnavigation und Barrierewerkzeug. Wer sie hochzieht,
       macht deren Bedienelemente unklickbar. */
    z-index: var(--pldsc-pop-z);
    inset-block-start: calc(100% + 0.4rem);
    inset-inline-start: 0;
    /* NICHT `width: max-content`: In einem Raster mit `auto-fill` loest sich das
       unter intrinsischer Breite auf EINE Spalte der Mindestbreite auf — das
       Panel wurde dann schmaler als seine laengste Beschriftung und schnitt sie
       ab (gemessen 02.09.: 221 px, „Regeneration (Journal-Themen)" abgeschnitten).
       Stattdessen eine ruhige Grundbreite, mindestens so breit wie der Auslöser. */
    width: max(100%, min(var(--pldsc-pop-w), var(--pldsc-pop-max-w)));
    max-width: var(--pldsc-pop-max-w);
    background: var(--pldsc-surface);
    border: 1px solid var(--pldsc-line);
    border-radius: var(--pldsc-radius);
    box-shadow: var(--pldsc-shadow);
    padding: 0.85rem;
    /* DER BILDLAUF LIEGT IN DER OPTIONSLISTE, NICHT AM PANEL.
       Am Panel scrollte der Fuss („Fertig" und die Trefferzahl) mit aus dem
       Bild — gemessen 02.09. auf /entdecken: der Mittelpunkt von „Fertig" lag
       ausserhalb des sichtbaren Panelbereichs. Wer auswaehlt, verliert damit
       genau die Rueckmeldung, fuer die der Fuss da ist. */
}
/* Am rechten Fensterrand schlaegt das Panel um, am unteren klappt es nach oben
   (beide Merkmale setzt das JavaScript nach der Messung). Ohne das liefe es aus
   dem Bild — oder die ganze Seite bekaeme Querlauf. */
.pldsc__group[data-a-discovery-flip] > .pldsc__pop {
    inset-inline-start: auto;
    inset-inline-end: 0;
}
.pldsc__group[data-a-discovery-flip-up] > .pldsc__pop {
    inset-block-start: auto;
    inset-block-end: calc(100% + 0.4rem);
}

.pldsc__options {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.15rem 0.6rem;
    max-height: var(--pldsc-pop-max-h);
    overflow-y: auto;
    /* KEIN `contain`: Am Ende des eigenen Scrollwegs uebernimmt die Seite. Ein
       Bereich, der das Rad verschluckt, ohne dass die Seite sich bewegt, sieht
       aus wie eine eingefrorene Website (Kundenmeldung 02.09.). */
    overscroll-behavior-y: auto;
    /* SICHTBARE Bildlaufleiste. Ohne diese Angaben liefert Chromium eine
       Overlay-Leiste von 2 px, die man erst beim Scrollen sieht — dann weiss
       niemand, dass es hier ueberhaupt weitergeht. */
    scrollbar-width: thin;
    scrollbar-color: var(--pldsc-scrollbar);
    scrollbar-gutter: stable;
}

/* Lange Listen (Kategorie-Aeste haben schnell ein Dutzend Eintraege) werden
   ZWEISPALTIG statt endlos lang — das Panel scrollt dann meist gar nicht mehr.
   Die Schwelle steht im Markup, nicht im JavaScript: neun Optionen sind der
   Punkt, ab dem eine Spalte laenger wird als das Panel hoch ist. */
.pldsc__pop:has(.pldsc__opt:nth-child(9)) { --pldsc-pop-w: var(--pldsc-pop-max-w); }
.pldsc__options:has(.pldsc__opt:nth-child(9)) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
/* Auf schmalen Fenstern bleibt es bei einer Spalte — zwei Spalten aus je acht
   Zeichen sind schlechter als eine Liste, die man scrollt. */
@media (max-width: 35.99em) {
    .pldsc__options:has(.pldsc__opt:nth-child(9)) { grid-template-columns: 1fr; }
}

.pldsc__opt {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    width: 100%;
    border: 0;
    border-radius: var(--pldsc-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 0.9em;
    text-align: start;
    padding: 0.4rem 0.45rem;
    cursor: pointer;
}
.pldsc__opt:hover { background: var(--pldsc-surface-soft); }

.pldsc__opt-box {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.05em;
    height: 1.05em;
    border: 1px solid var(--pldsc-line-strong);
    border-radius: 2px;
    color: transparent;
}
.pldsc__opt[aria-checked="true"] .pldsc__opt-box {
    background: var(--pldsc-accent);
    border-color: var(--pldsc-accent);
    color: var(--pldsc-accent-ink);
}

.pldsc__opt-label { flex: 1 1 auto; min-width: 0; }
.pldsc__opt-count {
    flex: 0 0 auto;
    font-size: 0.85em;
    color: var(--pldsc-ink-muted);
    font-variant-numeric: tabular-nums;
}

/* EINE OPTION MIT 0 MUSS MAN SEHEN.
   Sie wird NICHT entfernt (sonst faende niemand zu ihr zurueck) und NICHT
   gesperrt (ein Knopf ohne Wirkung war schon einmal der gemeldete Mangel) —
   sie wird gekennzeichnet: gedaempft, das Kaestchen ohne Rahmenkontrast, und
   die Zahl steht als eigene „0" da, statt nur blasser zu werden.

   `[data-empty="1"]` und nicht `[data-empty]`: das Attribut steht IMMER im
   Markup (ein leeres Attribut gilt in HTML als gesetzt, ein bedingtes waere im
   Fluid also immer wahr), sein WERT schaltet. */
.pldsc__opt[data-empty="1"] { color: var(--pldsc-ink-muted); }
.pldsc__opt[data-empty="1"] .pldsc__opt-label { text-decoration: line-through; text-decoration-thickness: 1px; }
.pldsc__opt[data-empty="1"] .pldsc__opt-count { color: inherit; }

/* Ist die GANZE Gruppe leer, sagt es schon der geschlossene Auslöser — sonst
   klappt man auf und findet dort ausschliesslich Nullen. Bedienbar bleibt sie:
   der Weg zurueck fuehrt ueber sie. */
/* Gedaempft wird ueber FLAECHE und Durchstreichung, nicht ueber Opazitaet: auf
   einem dunklen Grund (die Startseiten-Leiste ist seit 09/2026 einer) faellt
   eine halbtransparente Beschriftung unter jede Lesbarkeitsschwelle. Der
   eingesunkene Grund traegt die Bedeutung, die Schrift bleibt voll. */
.pldsc__group[data-empty="1"] > .pldsc__trigger {
    color: var(--pldsc-ink-muted);
    background: var(--pldsc-surface-soft);
}
.pldsc__group[data-empty="1"] > .pldsc__trigger .pldsc__trigger-label { text-decoration: line-through; text-decoration-thickness: 1px; }

.pldsc__pop-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-top: 0.6rem;
    padding-top: 0.55rem;
    border-top: 1px solid var(--pldsc-line);
    font-size: 0.85em;
}
.pldsc__pop-foot:has(.pldsc__count:empty) { justify-content: flex-end; }

.pldsc__done {
    border: 1px solid var(--pldsc-line);
    border-radius: var(--pldsc-radius);
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 1em;
    padding: 0.3rem 0.8rem;
    cursor: pointer;
}
.pldsc__done:hover { border-color: var(--pldsc-line-strong); }
/* „Fertig" schliesst per JavaScript. Solange die Komponente nicht laeuft, waere
   es ein Knopf ohne Wirkung — dann bleibt der native Weg (noch einmal auf den
   Auslöser). */
atomic-discovery:not([data-a-discovery-ready]) .pldsc__done { display: none; }

/* Das Suchfeld steht NICHT in dieser Liste: seine Fokusanzeige ist der Kasten
   `.pldsc__field` (`:focus-within`, Rahmen in `--pldsc-line-strong` bzw. der
   Akzentfarbe des Themes). Ein zweiter Ring am Eingabeelement darin war ein
   Rahmen im Rahmen (Kundenmeldung 03.09.2026). */
.pldsc__trigger:focus-visible,
.pldsc__opt:focus-visible,
.pldsc__done:focus-visible,
.pldsc__submit:focus-visible,
.pldsc__opener:focus-visible,
.pldsc__close:focus-visible,
.pldsc-card:focus-visible {
    outline: var(--pldsc-focus);
    outline-offset: 2px;
}
.pldsc__input:focus-visible { outline: none; }

/* --------------------------------------------------- kompakter Einstieg */
/* `.pldsc--inline`: die Regeln gelten nur, solange die Suche IM FLUSS liegt.
   Im Overlay (`.pldsc--overlay`, weiter unten) ist die Huelle Inhalt des
   Dialogs und darf weder absolut haengen noch verborgen sein. */
.pldsc--inline.pldsc--compact { display: inline-block; }
.pldsc--inline.pldsc--compact .pldsc__shell {
    position: absolute;
    inset-inline-end: 0;
    top: calc(100% + 0.75rem);
    width: min(34rem, calc(100vw - 2rem));
}
.pldsc--inline.pldsc--compact:not([open]) .pldsc__shell { display: none; }

.pldsc__opener {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    padding: 0.25rem;
}
.pldsc__opener-label {
    position: absolute;
    width: 1px; height: 1px;
    margin: -1px; padding: 0; border: 0;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}

/* Leisten-Variante: der Schliessen-Knopf erscheint nur, solange das Panel
   angeheftet ist (offen UND gefiltert, `data-a-discovery-pinned` — dann
   schliesst ein Klick daneben nicht mehr). Oben rechts im Panel, damit er
   ohne Scrollen erreichbar ist. */
.pldsc--inline.pldsc--bar .pldsc__close { display: none; }
.pldsc--inline.pldsc--bar[data-a-discovery-pinned] .pldsc__close {
    display: inline-flex;
    position: absolute;
    top: 0.35rem;
    inset-inline-end: 0.75rem;
    z-index: 1;
}
.pldsc--inline.pldsc--bar[data-a-discovery-pinned] .pldsc__close::before {
    content: "\00d7";
    margin-inline-end: 0.35rem;
    font-size: 1.15em;
    line-height: 1;
}

.pldsc__close {
    border: 0;
    background: transparent;
    color: var(--pldsc-ink-soft);
    font: inherit;
    font-size: 0.85em;
    cursor: pointer;
    padding: 0.5rem 0;
}

/* ----------------------------------------------------------------- Panel */
.pldsc__panel {
    position: absolute;
    inset-inline: 0;
    top: calc(100% + 0.6rem);
    z-index: var(--pldsc-panel-z);
    background: var(--pldsc-surface);
    border: 1px solid var(--pldsc-line);
    border-radius: var(--pldsc-radius);
    box-shadow: var(--pldsc-shadow);
    padding: 1.25rem;
    max-height: var(--pldsc-panel-max-h);
    overflow-y: auto;
    /* ZWEI ANGABEN, DIE ZUSAMMENGEHOEREN — Kundenmeldung 02.09.2026:
       „man kann nicht scrollen wenn man ueber den Ergebnissen ist, was
        verwirrend ist, wenn keine Scrollleiste in den Results angezeigt wird."

       1. `overscroll-behavior-y: auto` statt `contain`. Mit `contain` war am
          Ende des Panel-Scrollwegs Schluss: das Rad tat nichts mehr, die Seite
          stand (gemessen 02.09.: Panel-scrollTop 408 von 408, danach 4000 px
          Rad ⇒ window.scrollY unveraendert 386). Jetzt uebernimmt die Seite.
       2. Eine SICHTBARE Bildlaufleiste. Ohne `scrollbar-color` liefert Chromium
          eine Overlay-Leiste von 2 px, die erst waehrend des Scrollens
          erscheint — der Bereich scrollt also unsichtbar, und genau das war
          das Verwirrende. `scrollbar-gutter: stable` haelt den Platz frei,
          damit der Inhalt beim Erscheinen nicht springt. */
    overscroll-behavior-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--pldsc-scrollbar);
    scrollbar-gutter: stable;
}
.pldsc--inline.pldsc--compact .pldsc__panel { position: static; box-shadow: none; }

.pldsc__note { font-size: 0.85em; color: var(--pldsc-ink-soft); }

.pldsc__curated-head,
.pldsc-group__head {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    margin: 0 0 0.6rem;
    font-size: 0.78em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pldsc-ink-soft);
    font-weight: inherit;
}
.pldsc-group__count { font-variant-numeric: tabular-nums; color: var(--pldsc-ink-muted); }

.pldsc__curated { margin-top: 1rem; }

.pldsc-group + .pldsc-group { margin-top: 1.4rem; }

.pldsc__cards,
.pldsc-group__items {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    gap: 0.6rem;
}

.pldsc-group__more {
    display: inline-block;
    margin-top: 0.6rem;
    font-size: 0.85em;
    color: inherit;
}

/* ----------------------------------------------------------------- Karte */
.pldsc-card {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.6rem;
    border-radius: var(--pldsc-radius);
    color: inherit;
    text-decoration: none;
    background: transparent;
}
.pldsc-card:hover,
.pldsc-card[data-active] { background: var(--pldsc-surface-soft); }

.pldsc-card__media {
    flex: 0 0 auto;
    width: 4.5rem;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--pldsc-radius);
    background: var(--pldsc-surface-soft);
}
.pldsc-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.pldsc-card__body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
    /* Zeilenlaenge INNERHALB der Karte — das ist keine Sektionsbreite. */
    max-width: var(--pldsc-card-measure);
}
.pldsc-card__kicker {
    font-size: 0.68em;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--pldsc-ink-soft);
}
.pldsc-card__title { font-size: 1em; line-height: 1.25; }
.pldsc-card__sub,
.pldsc-card__meta { font-size: 0.82em; color: var(--pldsc-ink-soft); }

.pldsc__empty {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 0.5rem 0 1rem;
    font-size: 0.9em;
    color: var(--pldsc-ink-soft);
}

/* --------------------------------------------- Ergebnisseite (ohne JS) */
.pldsc-results { margin-top: 2rem; }
.pldsc-results__count {
    margin: 0 0 1rem;
    font-size: 0.8em;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--pldsc-ink-soft);
}
.pldsc-results .pldsc-group + .pldsc-group { margin-top: 2.4rem; }
.pldsc-results .pldsc-group__items {
    grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr));
    gap: 1rem;
}
.pldsc-results__actions { margin: 0 0 1.5rem; font-size: 0.9em; }
.pldsc-results__reset { color: inherit; }

.pldsc-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 2rem;
    font-size: 0.9em;
}
.pldsc-pager__state { font-variant-numeric: tabular-nums; color: var(--pldsc-ink-soft); }

@media (max-width: 47.99em) {
    .pldsc__field { flex-wrap: wrap; padding-inline: 0.75rem; }
    .pldsc__submit { width: 100%; }
    .pldsc__panel { max-height: min(78vh, 34rem); padding: 1rem; }
    .pldsc--inline.pldsc--compact .pldsc__shell { width: min(30rem, calc(100vw - 1.5rem)); }
    /* Auf schmalen Fenstern spannt das Options-Panel ueber die GANZE
       Filterzeile statt neben seinem Auslöser zu haengen: volle Breite, kein
       Umschlagen noetig, keine Kante, die aus dem Bild laeuft.
       Dafuer gibt die Gruppe ihre Rolle als Bezugsrahmen ab — der Bezug ist
       dann `.pldsc__facets`, und das Panel oeffnet unter ALLEN Auslösern
       (die auf dieser Breite ohnehin mehrzeilig umbrechen). */
    .pldsc__group { position: static; }
    .pldsc__pop,
    .pldsc__group[data-a-discovery-flip] > .pldsc__pop {
        inset-inline: 0;
        width: auto;
        min-width: 0;
        max-width: none;
    }
}

/* =====================================================================
 * OVERLAY — die Suche in einem nativen <dialog>
 * ---------------------------------------------------------------------
 * Im Fluss steht nur der AUSLÖSER (`.pldsc__opener`): Icon, Frage, Hinweis
 * (was es zu finden gibt, wonach sich filtern laesst) und die Beschriftung
 * „Suchen & filtern". Seiteninhalt (`.pldsc--bar`) und Kopfzeile
 * (`.pldsc--compact`) rendern denselben Auslöser; die Kopfzeile zeigt davon
 * nur Icon und Beschriftung. Ein Theme macht aus dem einen eine Karte und aus
 * dem anderen ein Icon — ueber Variablen und wenige Regeln, nicht ueber
 * zweierlei Markup.
 *
 * Das Dialog selbst folgt dem Muster des Formular-Overlays (plate_forms):
 * abgedunkelter Hintergrund, ein Panel mit Seitenspalte (Ansprache, die Typen
 * mit Anzahl) und Inhalt (die unveraenderte Suche). `showModal()` liefert
 * Fokusfalle, Escape, Inertisierung und Fokusrueckgabe vom Browser.
 *
 * Das Ergebnis-Panel ist hier KEIN Dropdown mehr: es steht statisch unter der
 * Filterzeile, der INHALT des Dialogs scrollt (`[data-a-discovery-clip]` —
 * die Komponente misst die Options-Panels dagegen, nicht gegen das Fenster).
 * ================================================================= */
atomic-discovery {
    --pldsc-dialog-w: 72rem;
    --pldsc-dialog-aside-w: 20rem;
    --pldsc-dialog-pad: clamp(1.5rem, 4vw, 3rem);
    --pldsc-backdrop: rgba(0, 0, 0, 0.6);
    --pldsc-opener-icon: 2.5rem;
}

.pldsc--overlay { display: block; }
.pldsc--overlay.pldsc--compact { display: inline-flex; align-items: center; }

/* ------------------------------------------------------------ Auslöser */
.pldsc--overlay .pldsc__opener {
    display: inline-flex;
    align-items: center;
    gap: 0.9rem;
    width: 100%;
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    text-align: start;
    text-decoration: none;
    padding: 0;
    cursor: pointer;
}
.pldsc--overlay .pldsc__opener-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: var(--pldsc-opener-icon);
    height: var(--pldsc-opener-icon);
    border: 1px solid currentColor;
    border-radius: 50%;
}
.pldsc--overlay .pldsc__opener-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
    flex: 1 1 auto;
}
.pldsc--overlay .pldsc__opener-title { font-size: 1.15em; line-height: 1.2; }
.pldsc--overlay .pldsc__opener-hint { font-size: 0.85em; color: var(--pldsc-ink-soft); }
.pldsc--overlay .pldsc__opener-cta {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    letter-spacing: 0.04em;
    font-size: 0.85em;
}
/* Die Beschriftung ist hier SICHTBAR — der kompakte Inline-Einstieg versteckt
   sie (`.pldsc__opener-label`, oben); hier ist sie das, was beide Auslöser
   als denselben ausweist. */
.pldsc--overlay .pldsc__opener-label {
    position: static;
    width: auto; height: auto;
    margin: 0; padding: 0;
    overflow: visible; clip-path: none; white-space: nowrap;
}
/* Kopfzeile: nur Icon und Beschriftung. `display: none` nimmt Frage und Hinweis
   auch aus dem zugaenglichen Namen — er lautet dort „Suchen & filtern". */
.pldsc--overlay.pldsc--compact .pldsc__opener { width: auto; gap: 0.6rem; }
.pldsc--overlay.pldsc--compact .pldsc__opener-text,
.pldsc--overlay.pldsc--compact .pldsc__opener-arrow { display: none; }

/* --------------------------------------------------------------- Dialog */
.pldsc__dialog {
    width: min(100%, var(--pldsc-dialog-w));
    max-width: 100%;
    max-height: 100dvh;
    margin: auto;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--pldsc-ink);
    overflow: visible;
}
.pldsc__dialog::backdrop { background: var(--pldsc-backdrop); }

.pldsc__dialog-panel {
    position: relative;
    display: grid;
    grid-template-columns: var(--pldsc-dialog-aside-w) minmax(0, 1fr);
    background: var(--pldsc-surface);
    color: var(--pldsc-ink);
    box-shadow: var(--pldsc-shadow);
    max-height: 100dvh;
}

/* Oben ausgerichtet, auf einer Linie mit dem Suchfeld — NICHT zentriert:
   mit Treffern wird der Inhalt hoch, und eine mittig haengende Frage stuende
   dann irgendwo im Nichts. */
.pldsc__aside {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.8rem;
    padding: calc(var(--pldsc-dialog-pad) + 0.5rem) var(--pldsc-dialog-pad) var(--pldsc-dialog-pad);
    background: var(--pldsc-surface-soft);
}
.pldsc__aside-eyebrow {
    margin: 0;
    font-size: 0.72em;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--pldsc-accent);
}
.pldsc__aside-title { margin: 0; font-size: 1.7em; line-height: 1.15; }
.pldsc__aside-text { margin: 0; font-size: 0.92em; line-height: 1.55; color: var(--pldsc-ink-soft); max-width: 32ch; }
.pldsc__aside-types {
    list-style: none;
    margin: 0.6rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    font-size: 0.9em;
}
.pldsc__aside-type { display: flex; align-items: baseline; gap: 0.65rem; }
.pldsc__aside-count { min-width: 2.4ch; text-align: end; font-variant-numeric: tabular-nums; }

.pldsc__body {
    /* Oben etwas mehr: rechts darueber sitzt der Schliessen-Knopf. */
    padding: calc(var(--pldsc-dialog-pad) + 0.5rem) var(--pldsc-dialog-pad) var(--pldsc-dialog-pad);
    overflow-y: auto;
    max-height: 100dvh;
    overscroll-behavior-y: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--pldsc-scrollbar);
    scrollbar-gutter: stable;
}

.pldsc--overlay .pldsc__close {
    position: absolute;
    top: 0.6rem;
    inset-inline-end: 0.9rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.4rem 0.5rem;
    color: inherit;
    font-size: 1em;
}
/* Kreuz und Beschriftung auf EINER Mittelachse: beides `inline-flex`-Kinder
   mit `align-items: center`, das Kreuz ein SVG ohne eigene Zeilenhoehe. */
.pldsc__close-x { display: inline-flex; align-items: center; line-height: 0; }
.pldsc__close-label { font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; line-height: 1; }

/* Das Ergebnis-Panel steht im Dialog im Fluss — kein Dropdown, kein eigener
   Bildlauf: der Dialog-Inhalt scrollt als Ganzes. */
.pldsc--overlay .pldsc__panel {
    position: static;
    inset: auto;
    margin-top: var(--pldsc-gap);
    padding: 0;
    border: 0;
    box-shadow: none;
    background: transparent;
    max-height: none;
    overflow: visible;
}

/* Klick auf den Hintergrund bei gefiltertem Ergebnis: das Panel zuckt kurz,
   statt das Ergebnis wegzunehmen (die Komponente setzt das Merkmal). */
@keyframes pldsc-nudge {
    0%, 100% { transform: none; }
    25% { transform: translateX(-6px); }
    75% { transform: translateX(6px); }
}
.pldsc__dialog[data-a-discovery-nudge] .pldsc__dialog-panel { animation: pldsc-nudge 0.3s ease; }

/* Solange das Dialog offen ist, scrollt die Seite dahinter nicht. */
html[data-a-discovery-modal] { overflow: hidden; }

@media (max-width: 59.99em) {
    .pldsc__dialog { width: 100%; height: 100dvh; max-height: 100dvh; }
    .pldsc__dialog-panel { grid-template-columns: 1fr; min-height: 100dvh; align-content: start; }
    /* Auf schmalen Fenstern bleibt von der Seitenspalte die Frage — die
       Typen stehen ohnehin gleich darunter als Filter. Rechts Platz fuer den
       Schliessen-Knopf. */
    .pldsc__aside { padding-block: 1.25rem 1rem; padding-inline-end: 7rem; }
    .pldsc__aside-text, .pldsc__aside-types { display: none; }
    .pldsc__aside-title { font-size: 1.35em; }
    .pldsc__body { padding-top: var(--pldsc-dialog-pad); max-height: none; overflow: visible; }
    .pldsc__dialog-panel { max-height: none; overflow-y: auto; overscroll-behavior-y: contain; }
}

@media (prefers-reduced-motion: reduce) {
    .pldsc-card { transition: none; }
    .pldsc__caret { transition: none; }
    .pldsc__dialog[data-a-discovery-nudge] .pldsc__dialog-panel { animation: none; }
}