/* ─────────────────────────────────────────────────────────────────────────────
 * NC BFSG Tool – Frontend Styles v2.0
 * WCAG 2.1 AA:
 *  – Fokus über outline (nicht box-shadow allein)
 *  – prefers-reduced-motion
 *  – prefers-color-scheme (dark)
 *  – Windows High Contrast Mode (forced-colors)
 *  – Touch-Targets min. 44×44px
 *  – Öffnen über JS-Klasse .bfsg-open (nicht CSS :hover)
 * ───────────────────────────────────────────────────────────────────────── */

/* ── Custom Properties ───────────────────────────────────────────────────── */
:root {
    --bfsg-primary:   #444444;
    --bfsg-accent:    #007bff;
    --bfsg-bg:        rgba(255, 255, 255, 0.97);
    --bfsg-text:      #1a1a1a;
    --bfsg-border:    rgba(0, 0, 0, 0.08);
    --bfsg-shadow:    0 8px 32px rgba(0, 0, 0, 0.14);
    --bfsg-radius:    18px;
    --bfsg-btn-r:     10px;
    --bfsg-speed:     0.3s;
    --bfsg-curve:     cubic-bezier(0.4, 0, 0.2, 1);
    --bfsg-base-size: 100%;
}

/* Basis-Schriftgröße – vom JS gesteuert */
html { font-size: var(--bfsg-base-size, 100%); }

/* ── Toolbar Container ───────────────────────────────────────────────────── */
#bfsg-toolbar {
    position:      fixed;
    right:         20px;
    bottom:        20%;
    z-index:       9999999;
    display:       flex;
    flex-direction: column;
    align-items:   center;
    width:         60px;
    background:    var(--bfsg-bg);
    /* ⛔ Kein backdrop-filter. Der Hintergrund ist zu 97 % deckend - der
       Effekt ist dahinter kaum zu sehen, kostet auf Mobilgeraeten aber
       mehr Rechenzeit als jede andere Eigenschaft in dieser Datei. */
    border-radius: var(--bfsg-radius);
    border:        1px solid var(--bfsg-border);
    box-shadow:    var(--bfsg-shadow);
    overflow:      hidden;
    padding:       8px;
    box-sizing:    border-box;
    transition:    width var(--bfsg-speed) var(--bfsg-curve),
                   padding var(--bfsg-speed) var(--bfsg-curve);
}

/* Geöffneter Zustand via JS-Klasse (NICHT :hover) */
#bfsg-toolbar.bfsg-open {
    width:   300px;
    padding: 16px;
}

/* ── Toggle-Button ───────────────────────────────────────────────────────── */
#bfsg-toggle {
    display:         flex;
    align-items:     center;
    justify-content: center;
    width:           44px;  /* WCAG 2.5.5 Touch Target */
    height:          44px;
    min-width:       44px;
    min-height:      44px;
    padding:         0;
    background:      var(--bfsg-primary);
    color:           #ffffff;
    border:          none;
    border-radius:   var(--bfsg-btn-r);
    cursor:          pointer;
    flex-shrink:     0;
    -webkit-tap-highlight-color: transparent;
    transition:      background var(--bfsg-speed) ease,
                     transform  0.4s ease;
}

#bfsg-toolbar.bfsg-open #bfsg-toggle {
    margin-bottom: 12px;
}

/* Focus-Indikator: outline statt box-shadow (HC-Mode kompatibel) */
#bfsg-toggle:focus-visible {
    outline:        3px solid var(--bfsg-accent);
    outline-offset: 2px;
}

#bfsg-toggle svg {
    pointer-events: none;
}

/* Rotation nur wenn keine Reduktion gewünscht */
@media (prefers-reduced-motion: no-preference) {
    #bfsg-toolbar.bfsg-open #bfsg-toggle {
        transform: rotate(360deg);
    }
}

/* ── Menü ────────────────────────────────────────────────────────────────── */
#bfsg-menu {
    display:    flex;
    flex-direction: column;
    gap:        6px;
    width:      100%;
    opacity:    0;
    visibility: hidden;
    overflow-y: auto;
    overflow-x: hidden;
    max-height: 0;
    box-sizing: border-box;
    scrollbar-width: thin;
    scrollbar-color: rgba(0,0,0,0.15) transparent;
    transition: opacity    var(--bfsg-speed) ease,
                max-height var(--bfsg-speed) var(--bfsg-curve);
}

#bfsg-toolbar.bfsg-open #bfsg-menu {
    opacity:    1;
    visibility: visible;
    max-height: 600px;
}

#bfsg-menu::-webkit-scrollbar       { width: 4px; }
#bfsg-menu::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.12); border-radius: 4px; }

/* Keine Animationen wenn gewünscht */
@media (prefers-reduced-motion: reduce) {
    #bfsg-toolbar,
    #bfsg-menu,
    #bfsg-toggle { transition: none; }
}

/* ── Schriftgrößen-Buttons ───────────────────────────────────────────────── */
.bfsg-font-controls {
    display:               grid;
    grid-template-columns: 1fr 1.4fr 1fr;
    gap:                   6px;
    width:                 100%;
    margin-bottom:         4px;
}

.bfsg-font-controls button {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      40px;
    padding:         8px 4px;
    background:      #f0f0f0;
    border:          1px solid #ddd;
    border-radius:   var(--bfsg-btn-r);
    font-size:       13px;
    font-weight:     700;
    color:           #333;
    cursor:          pointer;
    transition:      background 0.2s ease;
}

.bfsg-font-controls button:hover {
    background: #e2e2e2;
}

.bfsg-font-controls button:focus-visible {
    outline:        2px solid var(--bfsg-accent);
    outline-offset: 1px;
}

/* ── Toggle-Schalter (Schieberegler-Optik) ───────────────────────────────── */
.bfsg-toggle-btn {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    width:           100%;
    min-height:      44px; /* WCAG 2.5.5 */
    padding:         10px 6px;
    background:      transparent;
    border:          none;
    border-bottom:   1px solid rgba(0, 0, 0, 0.07);
    font-size:       13px;
    font-weight:     500;
    color:           var(--bfsg-text);
    cursor:          pointer;
    text-align:      left;
    position:        relative;
}

.bfsg-toggle-btn:last-of-type {
    border-bottom: none;
}

.bfsg-toggle-btn:focus-visible {
    outline:        2px solid var(--bfsg-accent);
    outline-offset: -2px;
    border-radius:  4px;
}

/* Schieberegler: Rinne */
.bfsg-toggle-btn::after {
    content:       '';
    display:       block;
    flex-shrink:   0;
    width:         36px;
    height:        18px;
    background:    #c0c0c0;
    border-radius: 9px;
    margin-left:   8px;
    transition:    background 0.25s ease;
    position:      relative;
}

/* Schieberegler: Knauf */
.bfsg-toggle-btn::before {
    content:       '';
    position:      absolute;
    right:         15px; /* 6px padding + 36px rinne - 14px knauf - 1px */
    top:           50%;
    transform:     translateY(-50%);
    width:         14px;
    height:        14px;
    background:    #ffffff;
    border-radius: 50%;
    box-shadow:    0 1px 3px rgba(0,0,0,0.2);
    transition:    transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                   right     0.25s cubic-bezier(0.4, 0, 0.2, 1);
    z-index:       1;
}

/* Aktiv-Zustand */
.bfsg-toggle-btn.is-active::after {
    background: var(--bfsg-accent);
}

.bfsg-toggle-btn.is-active::before {
    right: 7px;
}

@media (prefers-reduced-motion: reduce) {
    .bfsg-toggle-btn::after,
    .bfsg-toggle-btn::before { transition: none; }
}

/* ── Reset-Button ────────────────────────────────────────────────────────── */
.bfsg-reset-btn {
    width:           100%;
    min-height:      40px;
    padding:         10px;
    margin-top:      4px;
    background:      transparent;
    border:          1px solid rgba(0, 0, 0, 0.15);
    border-radius:   var(--bfsg-btn-r);
    font-size:       12px;
    color:           #666;
    cursor:          pointer;
    text-align:      center;
    transition:      background 0.2s, color 0.2s;
}

.bfsg-reset-btn:hover {
    background: #f5f5f5;
    color:      #333;
}

.bfsg-reset-btn:focus-visible {
    outline:        2px solid var(--bfsg-accent);
    outline-offset: 1px;
}

/* ── Trennlinie ──────────────────────────────────────────────────────────── */
#bfsg-menu hr {
    border:     none;
    border-top: 1px solid rgba(0, 0, 0, 0.07);
    margin:     4px 0;
    width:      100%;
}

/* ═══════════════════════════════════════════════════════════════════════════
   A11Y-MODI – Klassen die per JS am body/html gesetzt werden
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Hoher Kontrast ──────────────────────────────────────────────────────── */
body.bfsg-high-contrast,
body.bfsg-high-contrast * {
    background-color: #000000 !important;
    color:            #ffffff !important;
    border-color:     #ffffff !important;
}
body.bfsg-high-contrast a {
    color:           #ffff00 !important;
    text-decoration: underline !important;
}
/* Toolbar selbst ausnehmen */
body.bfsg-high-contrast #bfsg-toolbar,
body.bfsg-high-contrast #bfsg-toolbar * {
    background-color: revert !important;
    color:            revert !important;
    border-color:     revert !important;
}

/* ── Animationen stoppen ─────────────────────────────────────────────────── */
body.bfsg-no-animations *,
body.bfsg-no-animations *::before,
body.bfsg-no-animations *::after {
    animation:        none !important;
    transition:       none !important;
    scroll-behavior:  auto !important;
}

/* ── Lesbare Schrift (Dyslexia-freundlich) ───────────────────────────────── */
body.bfsg-dyslexic-font,
body.bfsg-dyslexic-font * {
    font-family: 'Verdana', 'Trebuchet MS', Arial, sans-serif !important;
    letter-spacing: 0.05em !important;
    word-spacing:   0.1em !important;
}

/* ── Textabstand (WCAG 1.4.12 Text Spacing) ─────────────────────────────── */
body.bfsg-text-spacing * {
    line-height:     1.8 !important;
    letter-spacing:  0.12em !important;
    word-spacing:    0.16em !important;
    /* paragraph spacing: nur für Block-Elemente */
}
body.bfsg-text-spacing p,
body.bfsg-text-spacing li,
body.bfsg-text-spacing dd {
    margin-bottom: 1.5em !important;
}

/* ── Großer Cursor ───────────────────────────────────────────────────────── */
body.bfsg-big-cursor,
body.bfsg-big-cursor * {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'><circle cx='24' cy='24' r='20' fill='none' stroke='%23FFD700' stroke-width='4'/><circle cx='24' cy='24' r='4' fill='%23FFD700'/></svg>") 24 24, auto !important;
}

/* ── Starker Fokus ───────────────────────────────────────────────────────── */
html.bfsg-strong-focus *:focus {
    /* outline statt box-shadow → funktioniert im Windows High Contrast Mode */
    outline:        4px solid var(--bfsg-accent, #007bff) !important;
    outline-offset: 3px !important;
    z-index:        99999 !important;
}
/* Toolbar selbst ausnehmen (hat eigene Fokus-Stile) */
html.bfsg-strong-focus #bfsg-toolbar *:focus {
    outline:        2px solid var(--bfsg-accent) !important;
    outline-offset: -2px !important;
}

/* ── Sättigung reduzieren (Farbenblindheit) ──────────────────────────────── */
body.bfsg-low-saturation {
    filter: saturate(0.2);
}
/* Toolbar ausnehmen */
body.bfsg-low-saturation #bfsg-toolbar {
    filter: none;
}

/* ── Lesemodus ───────────────────────────────────────────────────────────── */
body.bfsg-reader-mode aside,
body.bfsg-reader-mode nav:not( [aria-label*="Haupt"] ),
body.bfsg-reader-mode .sidebar,
body.bfsg-reader-mode .widget,
body.bfsg-reader-mode .wp-block-group:not(.entry-content *),
body.bfsg-reader-mode footer:not(.entry-content *),
body.bfsg-reader-mode header:not(.entry-content *) {
    display: none !important;
}
body.bfsg-reader-mode main,
body.bfsg-reader-mode article,
body.bfsg-reader-mode .entry-content,
body.bfsg-reader-mode .post-content {
    max-width:   720px !important;
    margin:      2rem auto !important;
    padding:     0 1.5rem !important;
    font-size:   1.1rem !important;
    line-height: 1.8 !important;
}

/* ── Bilder ausblenden ───────────────────────────────────────────────────── */
body.bfsg-hide-images img,
body.bfsg-hide-images figure,
body.bfsg-hide-images video,
body.bfsg-hide-images [style*="background-image"] {
    display: none !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE
   ═══════════════════════════════════════════════════════════════════════ */
@media (prefers-color-scheme: dark) {
    #bfsg-toolbar {
        --bfsg-bg:     rgba(30, 30, 30, 0.97);
        --bfsg-text:   #e8e8e8;
        --bfsg-border: rgba(255, 255, 255, 0.1);
        --bfsg-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    }
    .bfsg-font-controls button {
        background:   #3a3a3a;
        border-color: #555;
        color:        #ddd;
    }
    .bfsg-font-controls button:hover { background: #4a4a4a; }
    .bfsg-toggle-btn { color: #e8e8e8; border-color: rgba(255,255,255,0.08); }
    .bfsg-reset-btn  { color: #aaa; border-color: rgba(255,255,255,0.12); }
    .bfsg-reset-btn:hover { background: rgba(255,255,255,0.05); color: #ddd; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   WINDOWS HIGH CONTRAST MODE
   ═══════════════════════════════════════════════════════════════════════ */
@media (forced-colors: active) {
    #bfsg-toolbar {
        border: 2px solid ButtonText;
        forced-color-adjust: none;
    }
    #bfsg-toggle {
        background:    ButtonFace;
        color:         ButtonText;
        border:        2px solid ButtonText;
        forced-color-adjust: none;
    }
    .bfsg-toggle-btn::after {
        background: ButtonFace;
        border:     1px solid ButtonText;
        forced-color-adjust: none;
    }
    .bfsg-toggle-btn.is-active::after {
        background: Highlight;
        forced-color-adjust: none;
    }
    .bfsg-toggle-btn::before {
        background: ButtonText;
        forced-color-adjust: none;
    }
}


/* ═════════════════════════════════════════════════════════════════════════
   Sichtbarkeit der Oberflaeche - unabhaengig davon, wo das Symbol sitzt
   ─────────────────────────────────────────────────────────────────────────
   ⛔ Das Problem: Der Kasten haengt an seiner konfigurierten Position
   (z. B. bottom: 20%) und waechst beim Oeffnen von dort aus. Mit
   max-height: 600px lief er auf dem Handy oben aus dem Bildschirm heraus -
   die ersten Eintraege waren schlicht nicht erreichbar. Und je weiter man
   das Symbol nach unten oder oben stellt, desto schlimmer wird es.

   Die Loesung in zwei Stufen:

   1. Ueberall: Der geoeffnete Kasten ist nie hoeher als der Bildschirm,
      und die Liste darin scrollt. Das rettet auch kleine Fenster am
      Schreibtisch.

   2. Auf schmalen Geraeten: Beim Oeffnen loest sich der Kasten von der
      konfigurierten Position und legt sich als Blatt an den unteren Rand,
      ueber die volle Breite. Damit ist die Anzeige garantiert vollstaendig -
      egal, wo das Symbol im geschlossenen Zustand steht.

   dvh statt vh, weil die Adressleiste mobiler Browser ein- und ausfaehrt.
   Fuer aeltere Browser steht vh als Rueckfall davor.
   ═════════════════════════════════════════════════════════════════════════ */

#bfsg-toolbar.bfsg-open {
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
}

#bfsg-toolbar.bfsg-open #bfsg-menu {
    max-height: 600px;
    max-height: min(600px, calc(100dvh - 148px));
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Schmale Geraete: Blatt am unteren Rand.

   --bfsg-abstand-unten kann ein Theme setzen, wenn es selbst eine feste
   Leiste am unteren Rand hat - sonst legt sich das Blatt darauf. */
@media (max-width: 599px) {
    #bfsg-toolbar.bfsg-open {
        top:    auto;
        left:   8px;
        right:  8px;
        width:  auto;
        bottom: calc(8px + var(--bfsg-abstand-unten, 0px) + env(safe-area-inset-bottom, 0px));
        align-items: stretch;
    }

    #bfsg-toolbar.bfsg-open #bfsg-menu {
        max-height: 62vh;
        max-height: min(62dvh, calc(100dvh - 160px));
    }

    /* Der Umschalter bleibt rechts, damit der Daumen ihn dort wiederfindet,
       wo er ihn geoeffnet hat. */
    #bfsg-toolbar.bfsg-open #bfsg-toggle {
        align-self: flex-end;
    }
}