/* ============================================
   Yaska A11y Widget — FAB + Panel + Features
   Version: 1.0.0
   ============================================ */

:root { --a11y-font-scale: 1; }
html { font-size: calc(16px * var(--a11y-font-scale)); }

/* FAB (Floating Action Button) */
.a11y-fab {
    position: fixed;
    bottom: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 0;
    background: #001a40;
    color: #fff;
    font-size: 28px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    z-index: 9998;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}
.a11y-fab:hover,
.a11y-fab:focus-visible {
    transform: scale(1.05);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    outline: 3px solid #0072b8;
    outline-offset: 3px;
}

/* FAB + Panel Position */
.a11y-fab[data-pos="right"],
.a11y-fab:not([data-pos]) { right: 24px; left: auto; }
.a11y-fab[data-pos="left"]  { left: 24px; right: auto; }
.a11y-panel[data-pos="right"],
.a11y-panel:not([data-pos]) { right: 24px; left: auto; }
.a11y-panel[data-pos="left"] { left: 24px; right: auto; }

/* Panel */
.a11y-panel {
    position: fixed;
    bottom: 96px;
    width: 320px;
    max-width: calc(100vw - 48px);
    max-height: calc(100vh - 120px);
    overflow-y: auto;
    background: #fff;
    color: #1a1a1a;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.25);
    padding: 20px;
    z-index: 9999;
    transform: translateY(10px) scale(0.95);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.2s, opacity 0.2s;
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}
.a11y-panel[aria-hidden="false"] {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
}
.a11y-panel h2 {
    margin: 0 0 16px;
    font-size: 1.1rem;
    color: #001a40;
    font-weight: 700;
}
.a11y-panel__close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 32px;
    height: 32px;
    border: 0;
    background: transparent;
    font-size: 20px;
    cursor: pointer;
    border-radius: 4px;
    color: #555;
    line-height: 1;
}
.a11y-panel__close:hover,
.a11y-panel__close:focus-visible {
    background: #f0f0f2;
    outline: 2px solid #0072b8;
}

.a11y-group { margin-bottom: 16px; }
.a11y-group__label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}

.a11y-btn-row { display: flex; gap: 6px; }
.a11y-btn {
    flex: 1;
    padding: 10px 8px;
    border: 1px solid #d0d0d4;
    background: #fff;
    border-radius: 6px;
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    color: #1a1a1a;
    font-family: inherit;
}
.a11y-btn:hover,
.a11y-btn:focus-visible {
    background: #f0f0f2;
    outline: 2px solid #0072b8;
    outline-offset: 1px;
}
.a11y-btn[aria-pressed="true"] {
    background: #001a40;
    color: #fff;
    border-color: #001a40;
    font-weight: 600;
}

.a11y-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #d0d0d4;
    background: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
    text-align: left;
    color: #1a1a1a;
    margin-bottom: 6px;
    font-family: inherit;
}
.a11y-toggle:hover,
.a11y-toggle:focus-visible {
    background: #f0f0f2;
    outline: 2px solid #0072b8;
    outline-offset: 1px;
}
.a11y-toggle[aria-pressed="true"] {
    background: #001a40;
    color: #fff;
    border-color: #001a40;
}
.a11y-toggle__indicator {
    display: inline-block;
    width: 32px;
    height: 18px;
    background: #ccc;
    border-radius: 10px;
    position: relative;
    transition: background 0.15s;
    flex-shrink: 0;
}
.a11y-toggle__indicator::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #fff;
    transition: transform 0.15s;
}
.a11y-toggle[aria-pressed="true"] .a11y-toggle__indicator { background: #0072b8; }
.a11y-toggle[aria-pressed="true"] .a11y-toggle__indicator::after { transform: translateX(14px); }

.a11y-reset {
    width: 100%;
    padding: 10px;
    background: transparent;
    border: 1px solid #d0d0d4;
    border-radius: 6px;
    color: #555;
    cursor: pointer;
    font-size: 0.9rem;
    margin-top: 8px;
    font-family: inherit;
}
.a11y-reset:hover,
.a11y-reset:focus-visible {
    background: #f7f7f8;
    color: #1a1a1a;
    border-color: #999;
    outline: 2px solid #0072b8;
}

/* ============================================
   FEATURES — data-attribute driven overrides
   ============================================ */

/* Hoher Kontrast (Schwarz + Gelb, eigenes Theme) */
html[data-a11y-contrast="high"] body,
html[data-a11y-contrast="high"] main,
html[data-a11y-contrast="high"] section,
html[data-a11y-contrast="high"] article,
html[data-a11y-contrast="high"] aside,
html[data-a11y-contrast="high"] header,
html[data-a11y-contrast="high"] footer,
html[data-a11y-contrast="high"] nav,
html[data-a11y-contrast="high"] div {
    background-color: #000 !important;
    background-image: none !important;
    color: #fff !important;
    border-color: #fff !important;
}
html[data-a11y-contrast="high"] h1,
html[data-a11y-contrast="high"] h2,
html[data-a11y-contrast="high"] h3,
html[data-a11y-contrast="high"] h4,
html[data-a11y-contrast="high"] h5,
html[data-a11y-contrast="high"] h6 { color: #ffff00 !important; }
html[data-a11y-contrast="high"] a { color: #ffff00 !important; text-decoration: underline !important; }
html[data-a11y-contrast="high"] button,
html[data-a11y-contrast="high"] input[type="submit"],
html[data-a11y-contrast="high"] .btn,
html[data-a11y-contrast="high"] .button {
    background: #ffff00 !important;
    color: #000 !important;
    border: 2px solid #ffff00 !important;
}
/* Panel selbst NICHT invertieren (sonst unlesbar) */
html[data-a11y-contrast="high"] .a11y-panel,
html[data-a11y-contrast="high"] .a11y-panel div,
html[data-a11y-contrast="high"] .a11y-panel h2,
html[data-a11y-contrast="high"] .a11y-panel button {
    background: initial;
    color: inherit;
    border-color: initial;
}
html[data-a11y-contrast="high"] .a11y-panel { background: #fff !important; color: #1a1a1a !important; }
html[data-a11y-contrast="high"] .a11y-panel h2 { color: #001a40 !important; }
html[data-a11y-contrast="high"] .a11y-fab { background: #ffff00 !important; color: #000 !important; }

/* Links hervorheben */
html[data-a11y-links="highlight"] a:not(.a11y-fab):not(.a11y-panel *) {
    text-decoration: underline !important;
    text-decoration-thickness: 2px !important;
    text-underline-offset: 3px !important;
    font-weight: 700 !important;
    background: rgba(255, 235, 0, 0.25);
    padding: 2px 4px;
    border-radius: 3px;
}
html[data-a11y-links="highlight"][data-a11y-contrast="high"] a:not(.a11y-fab):not(.a11y-panel *) {
    background: #ffff00 !important;
    color: #000 !important;
}

/* Animationen aus */
html[data-a11y-motion="reduce"] *,
html[data-a11y-motion="reduce"] *::before,
html[data-a11y-motion="reduce"] *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
}

/* Großer Cursor + prominenter Fokusring */
html[data-a11y-cursor="big"],
html[data-a11y-cursor="big"] *,
html[data-a11y-cursor="big"] button,
html[data-a11y-cursor="big"] a {
    cursor: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48"><path d="M 10 10 L 10 38 L 18 30 L 24 42 L 28 40 L 22 28 L 32 28 Z" fill="black" stroke="white" stroke-width="2"/></svg>') 6 6, auto !important;
}
html[data-a11y-cursor="big"] *:focus-visible {
    outline: 4px solid #ff8c00 !important;
    outline-offset: 3px !important;
}

/* Dyslexie-Schrift (System-Fallback; für echtes OpenDyslexic @font-face hier einbinden) */
html[data-a11y-font="dyslexia"] body,
html[data-a11y-font="dyslexia"] * {
    font-family: "Comic Sans MS", "Trebuchet MS", Verdana, sans-serif !important;
    letter-spacing: 0.04em !important;
    word-spacing: 0.12em !important;
    line-height: 1.9 !important;
}
/* Panel von Dyslexie ausnehmen */
html[data-a11y-font="dyslexia"] .a11y-panel,
html[data-a11y-font="dyslexia"] .a11y-panel * {
    font-family: -apple-system, "Segoe UI", Roboto, sans-serif !important;
    letter-spacing: normal !important;
    word-spacing: normal !important;
    line-height: 1.5 !important;
}

/* Baseline Focus (immer aktiv, keyboard-only) */
:focus-visible {
    outline: 3px solid #0072b8;
    outline-offset: 2px;
}