/* ============================================================
   sm-a11y-panel.css — Bedienfeld für die Barrierefreiheit

   Slide-in von rechts, aufgebaut von js/sm-a11y-panel.js.

   ⚠️ SCHATTEN NUR IM OFFENEN ZUSTAND (Projektregel, CLAUDE.md):
   Ein geschlossenes Panel liegt per `translateX(100%)` rechts ausserhalb,
   sein nach links zeigender `box-shadow` blutet aber in den sichtbaren Rand
   und erzeugt dort einen grauen Streifen. Ein `overflow-x`-Riegel am Root
   behebt das NICHT (verifiziert). Deshalb steht der Schatten unten
   ausschliesslich an `.is-auf`.
   ============================================================ */

#sm-a11y-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 18, 34, .42);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s ease, visibility .22s;
    z-index: 2147482000;
}
#sm-a11y-overlay.is-auf { opacity: 1; visibility: visible; }

#sm-a11y-panel {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: min(400px, 92vw);
    background: var(--mb-surface, #fff);
    border-left: 1px solid var(--mb-border, #e9eaf2);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .26s cubic-bezier(.22, .61, .36, 1);
    z-index: 2147482001;
    /* KEIN box-shadow hier — siehe Kopf */
}
#sm-a11y-panel.is-auf {
    transform: translateX(0);
    box-shadow: -8px 0 40px rgba(15, 18, 34, .18);
}

/* ── Kopf ──────────────────────────────────────────────── */
.a11y-kopf {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 18px 14px;
    border-bottom: 1px solid var(--mb-border, #e9eaf2);
}
.a11y-titel {
    font-size: 16px;
    font-weight: 800;
    color: var(--mb-text, #1a202c);
}
.a11y-untertitel {
    font-size: 12px;
    color: var(--mb-text-2, #6b7280);
    margin-top: 2px;
    line-height: 1.5;
}
.a11y-schliessen {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1px solid var(--mb-border, #e9eaf2);
    background: var(--mb-surface-2, #f7f8fc);
    color: var(--mb-text-2, #6b7280);
    border-radius: 9px;
    cursor: pointer;
    font-size: 14px;
    font-family: inherit;
    transition: background .15s, color .15s;
}
.a11y-schliessen:hover {
    background: var(--mb-border, #e9eaf2);
    color: var(--mb-text, #1a202c);
}

/* ── Hauptschalter ─────────────────────────────────────── */
.a11y-haupt {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 18px;
    background: var(--mb-surface-2, #f7f8fc);
    border-bottom: 1px solid var(--mb-border, #e9eaf2);
}
.a11y-haupt-titel {
    font-size: 14px;
    font-weight: 700;
    color: var(--mb-text, #1a202c);
    margin-bottom: 2px;
}

/* ── Rumpf ─────────────────────────────────────────────── */
.a11y-koerper {
    flex: 1;
    overflow-y: auto;
    padding: 4px 18px 18px;
    transition: opacity .18s;
}
/* Ausgegraut statt ausgeblendet: die Einstellungen bleiben sichtbar, damit
   erkennbar ist, was der Hauptschalter überhaupt bewirkt. Bedienbar bleiben
   sie ebenfalls — ein Klick schaltet ihn gleich mit ein. */
.a11y-koerper.is-aus { opacity: .45; }

.a11y-gruppe { padding: 16px 0; border-bottom: 1px solid var(--mb-border, #eceef2); }
.a11y-gruppe:last-child { border-bottom: none; }
.a11y-gruppe-titel {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--mb-text-3, #9aa0b4);
    margin-bottom: 12px;
}

.a11y-zeile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 7px 0;
}
.a11y-zeile--block {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
}
.a11y-zeile.is-gesperrt { opacity: .4; pointer-events: none; }

.a11y-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--mb-text, #1a202c);
    min-width: 0;
}
.a11y-hinweis {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: var(--mb-text-2, #6b7280);
    line-height: 1.5;
    margin-top: 2px;
}
.a11y-wert {
    font-weight: 700;
    color: var(--mb-primary, #6366f1);
    font-variant-numeric: tabular-nums;
}

/* ── Stufen (Schriftgröße, Abstände) ───────────────────── */
.a11y-stufen {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.a11y-stufe {
    min-width: 34px;
    height: 34px;
    padding: 0 8px;
    border: 1px solid var(--mb-border, #e9eaf2);
    background: var(--mb-surface, #fff);
    color: var(--mb-text-2, #6b7280);
    border-radius: 8px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    transition: border-color .12s, background .12s, color .12s;
}
/* Die Schriftgrößen-Stufen zeigen ihre Wirkung am eigenen „A" */
.a11y-stufe[data-feld="schrift"][data-wert="0"] { font-size: 11px; }
.a11y-stufe[data-feld="schrift"][data-wert="1"] { font-size: 13px; }
.a11y-stufe[data-feld="schrift"][data-wert="2"] { font-size: 15px; }
.a11y-stufe[data-feld="schrift"][data-wert="3"] { font-size: 17px; }
.a11y-stufe[data-feld="schrift"][data-wert="4"] { font-size: 19px; }

.a11y-stufe:hover { border-color: var(--mb-border-strong, #c7cbe0); }
.a11y-stufe.is-an {
    background: var(--mb-primary, #6366f1);
    border-color: var(--mb-primary, #6366f1);
    color: #fff;
}

/* ── Auswahlknöpfe (Kontrast, Farben, Farbschwäche) ────── */
.a11y-wahlen {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.a11y-wahl {
    padding: 7px 12px;
    border: 1px solid var(--mb-border, #e9eaf2);
    background: var(--mb-surface, #fff);
    color: var(--mb-text-2, #6b7280);
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    transition: border-color .12s, background .12s, color .12s;
}
.a11y-wahl:hover { border-color: var(--mb-border-strong, #c7cbe0); }
.a11y-wahl.is-an {
    background: var(--mb-primary, #6366f1);
    border-color: var(--mb-primary, #6366f1);
    color: #fff;
}

/* ── Schieberegler ─────────────────────────────────────── */
.a11y-regler {
    width: 100%;
    accent-color: var(--mb-primary, #6366f1);
    height: 22px;
}

/* ── Schalter ──────────────────────────────────────────── */
.a11y-schalter {
    flex-shrink: 0;
    width: 46px;
    height: 26px;
    padding: 0;
    border: none;
    border-radius: 999px;
    background: var(--mb-border-strong, #c7cbe0);
    cursor: pointer;
    position: relative;
    transition: background .18s;
}
.a11y-schalter--gross { width: 54px; height: 30px; }
.a11y-schalter.is-an { background: var(--mb-primary, #6366f1); }

.a11y-schalter-knopf {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(15, 18, 34, .3);
    transition: transform .18s;
}
.a11y-schalter--gross .a11y-schalter-knopf { width: 24px; height: 24px; }
.a11y-schalter.is-an .a11y-schalter-knopf { transform: translateX(20px); }
.a11y-schalter--gross.is-an .a11y-schalter-knopf { transform: translateX(24px); }

/* ── Fuß ───────────────────────────────────────────────── */
.a11y-fuss {
    padding: 14px 18px;
    border-top: 1px solid var(--mb-border, #e9eaf2);
    background: var(--mb-surface-2, #f7f8fc);
}
.a11y-reset {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--mb-border, #e9eaf2);
    background: var(--mb-surface, #fff);
    color: var(--mb-text-2, #6b7280);
    border-radius: 10px;
    cursor: pointer;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    transition: border-color .15s, color .15s;
}
.a11y-reset:hover {
    border-color: var(--mb-red, #ef4444);
    color: var(--mb-red, #ef4444);
}

/* ── Handy: von unten statt von rechts ─────────────────── */
@media (max-width: 560px) {
    #sm-a11y-panel {
        width: 100%;
        top: auto;
        height: min(88vh, 720px);
        border-left: none;
        border-top: 1px solid var(--mb-border, #e9eaf2);
        border-radius: 18px 18px 0 0;
        transform: translateY(100%);
    }
    #sm-a11y-panel.is-auf {
        transform: translateY(0);
        box-shadow: 0 -8px 40px rgba(15, 18, 34, .22);
    }
    /* Platz für die untere Navigationsleiste */
    .a11y-fuss { padding-bottom: calc(14px + var(--sm-safe-bottom, 0px)); }
}