/* ================================================================
   Barrierefreiheits-Widget — Immopages4OnOffice
   ================================================================ */

/* ── Body-Klassen für globale Effekte ─────────────────────────── */

body.a11y-bold,
body.a11y-bold p,
body.a11y-bold span,
body.a11y-bold a,
body.a11y-bold li,
body.a11y-bold td,
body.a11y-bold th,
body.a11y-bold h1,
body.a11y-bold h2,
body.a11y-bold h3,
body.a11y-bold h4 {
    font-weight: 700 !important;
}

body.a11y-spacing,
body.a11y-spacing p,
body.a11y-spacing li,
body.a11y-spacing h1,
body.a11y-spacing h2,
body.a11y-spacing h3,
body.a11y-spacing h4 {
    line-height: 1.9 !important;
    letter-spacing: 0.03em;
}

/* TTS-Modus: Cursor + Hover-Indikator */
body.a11y-tts-mode *:not(#a11y-widget):not(#a11y-widget *) {
    cursor: crosshair !important;
}
body.a11y-tts-mode p:hover,
body.a11y-tts-mode h1:hover,
body.a11y-tts-mode h2:hover,
body.a11y-tts-mode h3:hover,
body.a11y-tts-mode h4:hover,
body.a11y-tts-mode li:hover,
body.a11y-tts-mode td:hover,
body.a11y-tts-mode a:hover {
    outline: 2px dashed currentColor;
    outline-offset: 3px;
}

/* ── Seite-Vorlesen Pille ─────────────────────────────────────── */

#a11y-tts-pill {
    position: fixed;
    bottom: 25px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 999999;
    background: #141617;
    color: #fff;
    border-radius: 999px;
    overflow: hidden;
    box-shadow: 0 4px 22px rgba(0,0,0,0.38);
    min-width: 185px;
    animation: a11y-pill-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

@keyframes a11y-pill-in {
    from { transform: translateX(-50%) translateY(10px) scale(0.85); opacity: 0; }
    to   { transform: translateX(-50%) translateY(0)    scale(1);    opacity: 1; }
}

#a11y-tts-pill-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 11px 22px;
    background: none;
    border: none;
    color: inherit;
    cursor: pointer;
    width: 100%;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.04em;
    white-space: nowrap;
    font-family: inherit;
    transition: background 0.15s;
}

#a11y-tts-pill-btn:hover {
    background: rgba(255,255,255,0.1);
}

#a11y-tts-pill-bar {
    height: 3px;
    background: rgba(255,255,255,0.5);
    width: 0%;
    transition: width 0.5s ease;
    margin: 0 14px 7px;
    border-radius: 2px;
}

/* Liest gerade → blau + pulsierendes Pause-Icon */
#a11y-tts-pill.is-reading {
    background: #1a4cad;
}

#a11y-tts-pill.is-reading #a11y-tts-pill-bar {
    background: rgba(255,255,255,0.7);
}

#a11y-tts-pill.is-reading #a11y-tts-pill-icon {
    display: inline-block;
    animation: a11y-tts-pulse 1.3s ease-in-out infinite;
}

/* Pausiert → grau */
#a11y-tts-pill.is-paused {
    background: #444;
}

@keyframes a11y-tts-pulse {
    0%, 100% { opacity: 1;   transform: scale(1);    }
    50%       { opacity: 0.3; transform: scale(0.75); }
}

/* ── Widget-Container ─────────────────────────────────────────── */

#a11y-widget {
    position: fixed;
    bottom: 24px;
    left: 20px;
    z-index: 999999;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 14px;
    line-height: 1.4;
}

/* ── Auslöse-Button ───────────────────────────────────────────── */

#a11y-toggle-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    background: #141617;
    color: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 3px 12px rgba(0,0,0,0.35);
    transition: background 0.2s, transform 0.15s;
    padding: 0;
    line-height: 1;
}

#a11y-toggle-btn:hover {
    background: #2a2a2a;
    transform: scale(1.06);
}

#a11y-toggle-btn:focus-visible {
    outline: 3px solid #4f90ea;
    outline-offset: 3px;
}

/* ── Panel ────────────────────────────────────────────────────── */

#a11y-panel {
    position: absolute;
    bottom: calc(100% + 10px);
    left: 0;
    width: 252px;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 6px 32px rgba(0,0,0,0.18);
    opacity: 0;
    transform: translateY(10px) scale(0.97);
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
    overflow: hidden;
}

#a11y-panel.a11y-panel--open {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.a11y-panel__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 13px 16px 11px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: #444;
    border-bottom: 1px solid #ebebeb;
}

.a11y-panel__close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #999;
    line-height: 1;
    border-radius: 4px;
    transition: color 0.15s;
}

.a11y-panel__close:hover { color: #333; }

.a11y-panel__body {
    padding: 12px 14px 14px;
    max-height: 75vh;
    overflow-y: auto;
}

/* ── Sektionen ────────────────────────────────────────────────── */

.a11y-section {
    margin-bottom: 12px;
}

.a11y-section:last-child {
    margin-bottom: 0;
}

.a11y-section__label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #aaa;
    margin-bottom: 5px;
}

/* ── Buttons ──────────────────────────────────────────────────── */

.a11y-btn-group {
    display: flex;
    gap: 5px;
}

.a11y-btn-group--col {
    flex-direction: column;
}

.a11y-btn {
    padding: 7px 10px;
    border: 1.5px solid #e0e0e0;
    border-radius: 8px;
    background: #f7f7f7;
    cursor: pointer;
    color: #333;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    text-align: left;
    line-height: 1.3;
    font-family: inherit;
}

.a11y-btn:hover {
    border-color: #bbb;
    background: #ededed;
}

.a11y-btn:focus-visible {
    outline: 2px solid #4f90ea;
    outline-offset: 2px;
}

.a11y-btn--active {
    border-color: #141617;
    background: #141617;
    color: #fff;
}

.a11y-btn--active:hover {
    background: #2a2a2a;
    border-color: #2a2a2a;
}

.a11y-btn--full {
    width: 100%;
    font-size: 13px;
}

/* Schriftgröße-Varianten */
.a11y-btn-fontsize-0 { font-size: 13px; flex: 1; }
.a11y-btn-fontsize-1 { font-size: 16px; flex: 1; }
.a11y-btn-fontsize-2 { font-size: 20px; flex: 1; }

.a11y-btn--reset {
    color: #aaa;
    border-color: #ebebeb;
    background: #f9f9f9;
    font-size: 12px;
    text-align: center;
}

.a11y-btn--reset:hover {
    background: #f0f0f0;
    color: #555;
}

.a11y-hint {
    font-size: 11px;
    color: #999;
    margin: 5px 0 0;
    font-style: italic;
}

/* ── Divider ──────────────────────────────────────────────────── */
.a11y-divider {
    height: 1px;
    background: #ebebeb;
    margin: 10px 0;
}

/* ── Dark Mode ────────────────────────────────────────────────── */
@media (prefers-color-scheme: dark) {
    #a11y-panel {
        background: #1c1c1e;
        color: #f0f0f0;
        box-shadow: 0 6px 32px rgba(0,0,0,0.5);
    }
    .a11y-panel__header {
        color: #ccc;
        border-color: #2e2e2e;
    }
    .a11y-panel__close { color: #666; }
    .a11y-panel__close:hover { color: #ccc; }
    .a11y-section__label { color: #666; }
    .a11y-btn {
        background: #2c2c2e;
        border-color: #3a3a3a;
        color: #e0e0e0;
    }
    .a11y-btn:hover {
        background: #3a3a3a;
        border-color: #555;
    }
    .a11y-btn--active {
        background: #e0e0e0;
        border-color: #e0e0e0;
        color: #111;
    }
    .a11y-btn--active:hover {
        background: #ccc;
    }
    .a11y-btn--reset {
        background: #232323;
        border-color: #2e2e2e;
        color: #666;
    }
    .a11y-divider { background: #2e2e2e; }
    .a11y-hint { color: #666; }
}