/* ===========================================================================
   Auswertungen 2 – eigenes Erscheinungsbild (Namensraum a2-*)
   ---------------------------------------------------------------------------
   Bewusst getrennt von public/css/auswertungen.css (geteiltes Fundament,
   darf nicht geändert werden). Keine .ausw-*-Klasse wird hier überschrieben.

   Leitidee: das dichte Power-BI-Raster der Vorlage „PRO-00" (1280x720,
   Kopfzeile 37 px, drei Slicer-Reihen à 50 px, KPI-Band 49 px) nachbilden,
   aber in KuRD-Farben und -Typografie, damit sich der Bereich einfügt.
   =========================================================================== */

.a2 {
    --a2-primary: #0d6efd;
    --a2-pos: #198754;
    --a2-neg: #dc3545;
    --a2-warn: #fd7e14;
    --a2-border: #e2e5e9;
    --a2-bg-soft: #f6f7f9;
    --a2-ink-soft: #6c757d;
    --a2-radius: .375rem;

    max-width: 1560px;
    margin: 0 auto;
    font-size: .875rem;
}

/* --- Kopfzeile (Original: y=0, Höhe 37) ---------------------------------- */
.a2-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--a2-primary);
    color: #fff;
    border-radius: var(--a2-radius) var(--a2-radius) 0 0;
    padding: .4rem .75rem;
    min-height: 2.4rem;
}
.a2-head h1 {
    font-size: 1.02rem;
    font-weight: 600;
    margin: 0;
    line-height: 1.25;
}
/* Ordnungsnummer vor dem Berichtstitel: mitlesbar, aber nicht lauter als der Name. */
.a2-head-nr { color: var(--a2-muted, #6c757d); font-weight: 500; margin-right: .45em;
    font-variant-numeric: tabular-nums; }
.a2-head .a2-head-sub {
    font-size: .74rem;
    opacity: .85;
    margin: 0;
    line-height: 1.2;
}
.a2-head-spacer { flex: 1 1 auto; }
.a2-head .a2-stand {
    font-size: .72rem;
    background: rgba(255, 255, 255, .16);
    border-radius: var(--a2-radius);
    padding: .2rem .5rem;
    white-space: nowrap;
}
.a2-head .btn { --bs-btn-padding-y: .15rem; --bs-btn-padding-x: .5rem; font-size: .75rem; }

/* --- Filterband (Original: drei Reihen à 50 px) -------------------------- */
.a2-filter {
    border: 1px solid var(--a2-border);
    border-top: 0;
    background: var(--a2-bg-soft);
    padding: .5rem .6rem;
}
/* Dichtes, gleichmäßiges Raster – im Original 6-7 Slicer je Reihe. */
.a2-filter-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: .4rem .5rem;
}
.a2-field { min-width: 0; }
.a2-field > label {
    display: block;
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--a2-ink-soft);
    margin-bottom: .1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.a2-field .form-control,
.a2-field .form-select {
    font-size: .8rem;
    padding: .2rem .4rem;
    height: auto;
    min-height: 1.85rem;
}
.a2-filter-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
    margin-top: .5rem;
    padding-top: .5rem;
    border-top: 1px dashed var(--a2-border);
}
.a2-filter-actions .btn { --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .55rem; font-size: .78rem; }
.a2-filter-hint { font-size: .72rem; color: var(--a2-ink-soft); }

/* Select2 an die dichte Höhe anpassen (nur innerhalb .a2). */
.a2 .select2-container--default .select2-selection--multiple,
.a2 .select2-container--default .select2-selection--single {
    min-height: 1.85rem;
    border-color: #ced4da;
    font-size: .8rem;
}
.a2 .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.7rem;
    padding-left: .4rem;
}
.a2 .select2-container--default .select2-selection--single .select2-selection__arrow { height: 1.8rem; }
/*
 * Mehrfachauswahl: die Loesch-Schaltflaeche von Select2 4.1 liegt ABSOLUT am linken
 * Rand der Kachel (gemessen 15 px breit). Ein umlaufendes `padding: 0 .3rem` laesst
 * ihr keinen Platz - sie legt sich dann ueber den ersten Buchstaben ("Archiv" sah aus
 * wie "×rchiv"). Deshalb links so viel Innenabstand, wie die Schaltflaeche braucht.
 */
.a2 .select2-container--default .select2-selection--multiple .select2-selection__choice {
    font-size: .74rem;
    padding: 0 .35rem 0 1.2rem;
    margin: .15rem .15rem 0 0;
    max-width: 100%;
}
.a2 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    padding: 0 .25rem;
    border-right: 1px solid rgba(0, 0, 0, .12);
    color: var(--a2-ink-soft);
}
.a2 .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    background: rgba(0, 0, 0, .06);
    color: #b02a37;
}
/*
 * Hoehe deckeln: ohne Deckel wuchs ein Filter mit sechs gewaehlten Werten auf 189 px,
 * waehrend die uebrigen Felder 49 px hoch blieben - das Filterband war dann viermal so
 * hoch wie noetig und die Zeilen sprangen. Ab drei Zeilen wird gescrollt.
 */
.a2 .select2-container--default .select2-selection--multiple {
    max-height: 4.6rem;
    overflow-y: auto;
}

/* --- KPI-Band (Original: y=190, Höhe 49, 11 Karten in einer Reihe) ------- */
.a2-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(112px, 1fr));
    gap: 1px;
    background: var(--a2-border);
    border: 1px solid var(--a2-border);
    border-top: 0;
}
.a2-kpi {
    background: #fff;
    padding: .35rem .5rem;
    min-width: 0;
}
.a2-kpi-label {
    font-size: .66rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--a2-ink-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.a2-kpi-value {
    font-size: 1.02rem;
    font-weight: 700;
    line-height: 1.25;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.a2-kpi-sub { font-size: .66rem; color: var(--a2-ink-soft); line-height: 1.2; }
.a2-kpi.is-pos .a2-kpi-value { color: var(--a2-pos); }
.a2-kpi.is-neg .a2-kpi-value { color: var(--a2-neg); }
.a2-kpi.is-warn .a2-kpi-value { color: var(--a2-warn); }
/* Kennzahl ohne Wert (DAX BLANK) – nicht als 0 ausgeben. */
.a2-kpi.is-blank .a2-kpi-value { color: #adb5bd; font-weight: 600; }

/* --- Inhaltsraster (Original: 3 Diagramme à 426 px, dann Tabelle) -------- */
.a2-row {
    display: grid;
    gap: .5rem;
    margin-top: .5rem;
}
.a2-row-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.a2-row-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.a2-row-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 1199px) {
    .a2-row-3, .a2-row-2, .a2-row-2-1 { grid-template-columns: minmax(0, 1fr); }
}

.a2-panel {
    border: 1px solid var(--a2-border);
    border-radius: var(--a2-radius);
    background: #fff;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.a2-panel-head {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .55rem;
    border-bottom: 1px solid var(--a2-border);
    background: var(--a2-bg-soft);
    font-size: .78rem;
    font-weight: 600;
    border-radius: var(--a2-radius) var(--a2-radius) 0 0;
}
.a2-panel-head .a2-panel-note {
    font-weight: 400;
    font-size: .7rem;
    color: var(--a2-ink-soft);
}
.a2-panel-body { padding: .5rem; flex: 1 1 auto; min-width: 0; }
.a2-panel-body.is-flush { padding: 0; }

/* Diagrammfläche – im Original 261 px hoch. */
.a2-chart { position: relative; height: 248px; }
.a2-chart.is-tall { height: 320px; }
.a2-chart.is-short { height: 150px; }

/* --- Tabellen (Original: Detailtabelle 21 Spalten) ---------------------- */
.a2-tablewrap { overflow: auto; max-height: 460px; }
.a2-tablewrap.is-short { max-height: 260px; }
.a2-table {
    width: 100%;
    font-size: .78rem;
    margin: 0;
    border-collapse: separate;
    border-spacing: 0;
}
.a2-table th,
.a2-table td {
    padding: .22rem .4rem;
    border-bottom: 1px solid #eef0f2;
    white-space: nowrap;
}
.a2-table thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: #eef1f5;
    font-weight: 600;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: #495057;
    border-bottom: 1px solid var(--a2-border);
}
.a2-table td.num, .a2-table th.num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.a2-table td.wide { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.a2-table tbody tr:hover { background: #f8fbff; }
.a2-table tfoot td {
    position: sticky;
    bottom: 0;
    background: #f6f7f9;
    font-weight: 700;
    border-top: 2px solid var(--a2-border);
}
.a2-pos { color: var(--a2-pos); }
.a2-neg { color: var(--a2-neg); }
.a2-muted { color: var(--a2-ink-soft); }

/* Ampel für Zielkorridore (Weiterentwicklung). */
.a2-dot {
    display: inline-block;
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    margin-right: .3rem;
    vertical-align: baseline;
}
.a2-dot.is-ok { background: var(--a2-pos); }
.a2-dot.is-warn { background: var(--a2-warn); }
.a2-dot.is-bad { background: var(--a2-neg); }

/* --- Reiterleiste (PRO-01: fünf Original-Seiten als Reiter) -------------- */
.a2-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: .15rem;
    border: 1px solid var(--a2-border);
    border-top: 0;
    background: #fff;
    padding: .3rem .4rem 0;
}
.a2-tab {
    font-size: .78rem;
    padding: .25rem .7rem;
    border: 1px solid transparent;
    border-bottom: 0;
    border-radius: var(--a2-radius) var(--a2-radius) 0 0;
    color: #495057;
    text-decoration: none;
    white-space: nowrap;
}
.a2-tab:hover { background: var(--a2-bg-soft); color: #212529; }
.a2-tab.is-active {
    background: #fff;
    border-color: var(--a2-border);
    color: var(--a2-primary);
    font-weight: 600;
    box-shadow: inset 0 2px 0 var(--a2-primary);
}

/* --- Kennzeichnungen ---------------------------------------------------- */
/* „Neu" = Weiterentwicklung ggü. dem Power-BI-Original (Auftrag Schritt 4). */
.a2-badge-neu,
.a2-badge-quelle,
.a2-badge-fehlt {
    display: inline-block;
    font-size: .64rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .03em;
    padding: .08rem .32rem;
    border-radius: .2rem;
    vertical-align: middle;
}
.a2-badge-neu { background: #e7f5ec; color: #146c43; border: 1px solid #a3cfbb; }
.a2-badge-quelle { background: #eef2ff; color: #3b4ba8; border: 1px solid #c5cdf5; font-weight: 600; }
.a2-badge-fehlt { background: #fdecea; color: #b02a37; border: 1px solid #f1aeb5; }

/* Hinweis „Datenfeld fehlt: …" bzw. fachliche Einschränkung. */
.a2-note {
    font-size: .74rem;
    border-left: 3px solid var(--a2-warn);
    background: #fff8f1;
    padding: .35rem .55rem;
    margin: .5rem 0 0;
    border-radius: 0 var(--a2-radius) var(--a2-radius) 0;
}
.a2-note.is-missing { border-left-color: var(--a2-neg); background: #fdf2f3; }
.a2-note.is-info { border-left-color: var(--a2-primary); background: #f2f7ff; }
.a2-note p:last-child { margin-bottom: 0; }

/* Ergebnis-Container während AJAX ausgrauen. */
.a2-loading { opacity: .45; transition: opacity .15s; }

.a2-empty {
    padding: 1.5rem .75rem;
    text-align: center;
    color: var(--a2-ink-soft);
    font-size: .82rem;
}

/* --- Übersichtsseite (Kacheln) ------------------------------------------ */
.a2-origin { margin-bottom: 1.75rem; }
.a2-origin-head { border-bottom: 2px solid var(--a2-border); padding-bottom: .3rem; margin-bottom: .3rem; }
.a2-origin-head h2 { font-size: 1.05rem; font-weight: 600; margin: 0; }
.a2-origin-head p { font-size: .8rem; color: var(--a2-ink-soft); margin: .15rem 0 0; }
.a2-group { margin-top: 1rem; }
.a2-group-label {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--a2-ink-soft);
    margin-bottom: .45rem;
    display: flex;
    align-items: center;
    gap: .4rem;
}
.a2-group-label::before {
    content: "";
    width: .7rem;
    height: .7rem;
    border-radius: .15rem;
    background: var(--a2-group-accent, var(--a2-primary));
}
.a2-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
    gap: .75rem;
}

/* Rollen-Startansichten (Weiterentwicklung): bewusst kräftiger als die
   Berichtskacheln, weil sie der empfohlene Einstieg sind. */
.a2-rollen {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: .75rem;
    margin-top: .75rem;
}
.a2-rolle {
    display: block;
    text-decoration: none;
    color: inherit;
    border: 1px solid var(--a2-border);
    border-left: 4px solid var(--a2-primary);
    border-radius: var(--a2-radius);
    background: linear-gradient(180deg, #fbfdff 0%, #fff 60%);
    padding: .7rem .85rem;
    transition: box-shadow .15s, transform .15s, border-color .15s;
}
.a2-rolle:hover {
    color: inherit;
    border-color: var(--a2-primary);
    box-shadow: 0 .3rem .9rem rgba(13, 110, 253, .15);
    transform: translateY(-1px);
}
.a2-rolle-label { font-size: .95rem; font-weight: 700; margin-bottom: .15rem; }
.a2-rolle-frage { font-size: .82rem; color: var(--a2-primary); font-style: italic; line-height: 1.3; margin-bottom: .3rem; }
.a2-rolle-desc { font-size: .76rem; color: #495057; line-height: 1.35; }
.a2-card {
    border: 1px solid var(--a2-border);
    border-radius: var(--a2-radius);
    background: #fff;
    padding: .75rem .85rem;
    text-decoration: none;
    color: inherit;
    display: flex;
    flex-direction: column;
    gap: .35rem;
    transition: box-shadow .15s, border-color .15s, transform .15s;
}
.a2-card:hover {
    border-color: var(--a2-primary);
    box-shadow: 0 .25rem .75rem rgba(13, 110, 253, .12);
    transform: translateY(-1px);
    color: inherit;
}
.a2-card-top { display: flex; align-items: flex-start; gap: .5rem; }
.a2-card-title { font-size: .95rem; font-weight: 600; margin: 0; flex: 1 1 auto; }
/* Ordnungsnummer vor dem Titel: mitlesbar, aber nicht lauter als der Name.
   Tabellenziffern, damit „1.3" und „2.10" gleich breit stehen. */
.a2-card-nr { color: var(--a2-muted, #6c757d); margin-right: .4em; font-variant-numeric: tabular-nums; }
.a2-card-desc { font-size: .8rem; color: #495057; margin: 0; line-height: 1.35; }
.a2-card-meta {
    font-size: .7rem;
    color: var(--a2-ink-soft);
    margin: 0;
    padding-top: .3rem;
    border-top: 1px dashed var(--a2-border);
}
.a2-card-meta dt { display: inline; font-weight: 600; }
.a2-card-meta dd { display: inline; margin: 0 .6rem 0 .2rem; }

/* Mini-Vorschau in der Kachel – rein dekorativ, deutet die Darstellung an. */
.a2-prev { display: flex; align-items: flex-end; gap: 2px; height: 26px; width: 46px; flex: 0 0 auto; }
.a2-prev i { display: block; flex: 1 1 auto; background: var(--a2-primary); opacity: .3; border-radius: 1px; }
.a2-prev.is-bars i:nth-child(1) { height: 40%; }
.a2-prev.is-bars i:nth-child(2) { height: 70%; }
.a2-prev.is-bars i:nth-child(3) { height: 55%; }
.a2-prev.is-bars i:nth-child(4) { height: 100%; }
.a2-prev.is-kpi i { height: 100%; opacity: .18; border-radius: 2px; }
.a2-prev.is-kpi i:nth-child(2) { opacity: .34; }
.a2-prev.is-kpi i:nth-child(3) { opacity: .5; }
.a2-prev.is-line { align-items: center; }
.a2-prev.is-line i { height: 2px; opacity: .5; }
.a2-prev.is-line i:nth-child(2) { margin-bottom: 8px; }
.a2-prev.is-line i:nth-child(3) { margin-bottom: 4px; }
.a2-prev.is-line i:nth-child(4) { margin-bottom: 12px; }
.a2-prev.is-table i { height: 4px; opacity: .28; }
.a2-prev.is-table i:first-child { opacity: .55; }

/* --- Suche auf der Übersichtsseite -------------------------------------- */

.a2-suche {
    display: flex;
    align-items: center;
    gap: .5rem;
    margin-bottom: 1rem;
}
.a2-suche-label {
    font-size: .68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .03em;
    color: var(--a2-ink-soft);
    white-space: nowrap;
}
.a2-suche input { max-width: 560px; font-size: .85rem; }
.a2-suche-treffer { font-size: .76rem; color: var(--a2-ink-soft); white-space: nowrap; }
.a2-suche-leer { margin-bottom: 1rem; }

/* Von der Suche ausgeblendet. Eigene Klasse statt [hidden], damit sie auch bei
   Tabellenzeilen greift und nicht mit dem hidden-Attribut der Leermeldung kollidiert. */
.a2-aus { display: none !important; }

/* --- Umstiegshilfe „Ich suchte in Power BI …" --------------------------- */

.a2-umstieg {
    border: 1px solid var(--a2-border);
    border-radius: .35rem;
    background: #fff;
    margin-bottom: 1.1rem;
}
.a2-umstieg > summary {
    cursor: pointer;
    padding: .55rem .8rem;
    font-size: .86rem;
    list-style: none;
    display: flex;
    align-items: center;
    gap: .5rem;
}
.a2-umstieg > summary::-webkit-details-marker { display: none; }
/* Eigenes Dreieck, damit der Zustand auch ohne Browser-Marker erkennbar ist. */
.a2-umstieg > summary::before {
    content: "▸";
    color: var(--a2-ink-soft);
    transition: transform .12s ease;
}
.a2-umstieg[open] > summary::before { transform: rotate(90deg); }
.a2-umstieg > summary:hover { background: #f8fbff; }
.a2-umstieg-zahl { margin-left: auto; font-size: .74rem; color: var(--a2-ink-soft); }

.a2-umstieg-body { padding: 0 .8rem .8rem; border-top: 1px solid var(--a2-border); }
.a2-umstieg-intro, .a2-umstieg-fuss { font-size: .8rem; margin: .6rem 0; max-width: 78ch; }
.a2-umstieg-fuss { color: var(--a2-ink-soft); border-top: 1px dashed var(--a2-border); padding-top: .6rem; }

.a2-legende { list-style: none; padding: 0; margin: .5rem 0 .9rem; font-size: .76rem; }
.a2-legende li { margin-bottom: .2rem; color: var(--a2-ink-soft); }

.a2-status {
    display: inline-block;
    padding: 0 .35rem;
    border-radius: .2rem;
    font-size: .68rem;
    font-weight: 600;
    white-space: nowrap;
}
.a2-status.is-ok   { background: #e7f5ec; color: #146c43; border: 1px solid #a3cfbb; }
.a2-status.is-info { background: #e7f1ff; color: #0a58ca; border: 1px solid #a6c8ff; }
.a2-status.is-alt  { background: #f3eefc; color: #59359a; border: 1px solid #cbb8ee; }
.a2-status.is-bad  { background: #fdf2f3; color: #b02a37; border: 1px solid #f1aeb5; }

.a2-umstieg-datei { margin-bottom: .9rem; }
.a2-umstieg-datei h3 {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    color: var(--a2-ink-soft);
    margin: 0 0 .25rem;
}
.a2-umstieg-ext { font-weight: 400; text-transform: none; opacity: .6; }
/* Feste Spaltenbreiten und Umbruch: Die Basisregel .a2-table setzt nowrap – richtig
   für Zahlenkolonnen, falsch für die Erklärtexte hier, die sonst rechts aus dem
   Bild laufen. */
.a2-umstieg-tabelle { table-layout: fixed; }
.a2-umstieg-tabelle td { vertical-align: top; white-space: normal; }
/* Der Seitenname ist die Suchmarke – er bekommt das Gewicht, nicht das Ziel. */
.a2-umstieg-seite { font-weight: 600; width: 46%; }
.a2-umstieg-status { width: 14%; }
.a2-umstieg-ziel { white-space: normal; }
.a2-umstieg-hinweis { font-weight: 400; color: var(--a2-ink-soft); font-size: .74rem; margin-top: .15rem; }

@media (max-width: 720px) {
    .a2-umstieg-seite, .a2-umstieg-status, .a2-umstieg-ziel { width: auto; display: block; }
}

/* --- Projekt-zu-Projekt-Vergleich (Weiterentwicklung) ------------------- */

/* Das Eingabefeld für die Projektnummern braucht mehr Platz als ein Slicer. */
.a2-field-wide { grid-column: span 3; }
@media (max-width: 900px) {
    .a2-field-wide { grid-column: span 1; }
}

/* Gedrehte Tabelle: Zeilen sind Kennzahlen, Spalten sind Projekte. Die erste
   Spalte bleibt beim Blättern stehen, sonst weiß man bei sechs Projekten nicht
   mehr, welche Zeile man liest. */
.a2-vergleich th[scope="row"] {
    position: sticky;
    left: 0;
    z-index: 1;
    background: #f6f7f9;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}
.a2-vergleich td { min-width: 120px; }
.a2-vergleich .a2-vergleich-kopf th {
    font-weight: 400;
    color: var(--a2-ink-soft);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* Bester und schwächster Wert der Zeile. Bewusst nur eine zarte Flächenfarbe
   plus Schriftfarbe – kräftige Balken würden die Tabelle in ein Schachbrett
   verwandeln, obwohl es je Zeile nur um zwei Zellen geht. */
.a2-vergleich td.is-best {
    background: #e7f5ec;
    color: #146c43;
    font-weight: 600;
}
.a2-vergleich td.is-schlecht {
    background: #fdf2f3;
    color: #b02a37;
    font-weight: 600;
}

/* --- Druck ------------------------------------------------------------- */
@media print {
    .a2-filter, .a2-head .btn, .a2-tabs { display: none !important; }
    .a2-tablewrap { max-height: none !important; overflow: visible !important; }
    .a2-panel, .a2-kpi, .a2-table { break-inside: avoid; }
}

/* --- Speicherbare Filter (eigener Speicher, siehe Auswertungen2\FilterStore) --- */
.a2-presets-leiste {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    align-items: center;
}
.a2-presets-leiste .btn { --bs-btn-padding-y: .2rem; --bs-btn-padding-x: .55rem; font-size: .78rem; }
.a2-presets-panel {
    position: absolute;
    z-index: 1050;
    min-width: 280px;
    max-height: 60vh;
    overflow: auto;
    font-size: .82rem;
}
.a2-presets-form { padding: .4rem 0; }
/* display:contents – die Schnellzugriffs-Knoepfe sollen Geschwister in derselben
   Flex-Zeile sein, nicht in einem eigenen Kasten stehen. */
.a2-presets-schnell { display: contents; }