/* BARRIEREFREIHEITS-WIDGET - CSS */

/* ==================== WIDGET BUTTON & PANEL ==================== */
#a11y-button {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 60px !important;
    height: 60px !important;
    background: #2563eb !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s !important;
}

#a11y-button:hover {
    background: #1d4ed8 !important;
    transform: scale(1.1) !important;
}

#a11y-button svg {
    width: 30px !important;
    height: 30px !important;
    fill: white !important;
}

#a11y-panel {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 100% !important;
    max-width: 550px !important;
    height: 100vh !important;
    background: white !important;
    box-shadow: -5px 0 15px rgba(0,0,0,0.3) !important;
    z-index: 999998 !important;
    overflow-y: auto !important;
    transition: right 0.3s ease !important;
}

#a11y-panel.open {
    right: 0 !important;
}

/* ==================== INHALTSANPASSUNGEN ==================== */

/* Skalierung - Zoom auf body, dann Widget zurückskalieren */
body.a11y-scale-50 { zoom: 0.5 !important; }
body.a11y-scale-55 { zoom: 0.55 !important; }
body.a11y-scale-60 { zoom: 0.6 !important; }
body.a11y-scale-65 { zoom: 0.65 !important; }
body.a11y-scale-70 { zoom: 0.7 !important; }
body.a11y-scale-75 { zoom: 0.75 !important; }
body.a11y-scale-80 { zoom: 0.8 !important; }
body.a11y-scale-85 { zoom: 0.85 !important; }
body.a11y-scale-90 { zoom: 0.9 !important; }
body.a11y-scale-95 { zoom: 0.95 !important; }
body.a11y-scale-100 { zoom: 1 !important; }
body.a11y-scale-105 { zoom: 1.05 !important; }
body.a11y-scale-110 { zoom: 1.1 !important; }
body.a11y-scale-115 { zoom: 1.15 !important; }
body.a11y-scale-120 { zoom: 1.2 !important; }
body.a11y-scale-125 { zoom: 1.25 !important; }
body.a11y-scale-130 { zoom: 1.3 !important; }
body.a11y-scale-135 { zoom: 1.35 !important; }
body.a11y-scale-140 { zoom: 1.4 !important; }
body.a11y-scale-145 { zoom: 1.45 !important; }
body.a11y-scale-150 { zoom: 1.5 !important; }
body.a11y-scale-155 { zoom: 1.55 !important; }
body.a11y-scale-160 { zoom: 1.6 !important; }
body.a11y-scale-165 { zoom: 1.65 !important; }
body.a11y-scale-170 { zoom: 1.7 !important; }
body.a11y-scale-175 { zoom: 1.75 !important; }
body.a11y-scale-180 { zoom: 1.8 !important; }
body.a11y-scale-185 { zoom: 1.85 !important; }
body.a11y-scale-190 { zoom: 1.9 !important; }
body.a11y-scale-195 { zoom: 1.95 !important; }
body.a11y-scale-200 { zoom: 2 !important; }

/* Widget zurückskalieren - inverse Zoom-Werte */
body.a11y-scale-50 #a11y-panel, body.a11y-scale-50 #a11y-button { zoom: 2 !important; }
body.a11y-scale-55 #a11y-panel, body.a11y-scale-55 #a11y-button { zoom: 1.8181818 !important; }
body.a11y-scale-60 #a11y-panel, body.a11y-scale-60 #a11y-button { zoom: 1.6666667 !important; }
body.a11y-scale-65 #a11y-panel, body.a11y-scale-65 #a11y-button { zoom: 1.5384615 !important; }
body.a11y-scale-70 #a11y-panel, body.a11y-scale-70 #a11y-button { zoom: 1.4285714 !important; }
body.a11y-scale-75 #a11y-panel, body.a11y-scale-75 #a11y-button { zoom: 1.3333333 !important; }
body.a11y-scale-80 #a11y-panel, body.a11y-scale-80 #a11y-button { zoom: 1.25 !important; }
body.a11y-scale-85 #a11y-panel, body.a11y-scale-85 #a11y-button { zoom: 1.1764706 !important; }
body.a11y-scale-90 #a11y-panel, body.a11y-scale-90 #a11y-button { zoom: 1.1111111 !important; }
body.a11y-scale-95 #a11y-panel, body.a11y-scale-95 #a11y-button { zoom: 1.0526316 !important; }
body.a11y-scale-100 #a11y-panel, body.a11y-scale-100 #a11y-button { zoom: 1 !important; }
body.a11y-scale-105 #a11y-panel, body.a11y-scale-105 #a11y-button { zoom: 0.952381 !important; }
body.a11y-scale-110 #a11y-panel, body.a11y-scale-110 #a11y-button { zoom: 0.9090909 !important; }
body.a11y-scale-115 #a11y-panel, body.a11y-scale-115 #a11y-button { zoom: 0.8695652 !important; }
body.a11y-scale-120 #a11y-panel, body.a11y-scale-120 #a11y-button { zoom: 0.8333333 !important; }
body.a11y-scale-125 #a11y-panel, body.a11y-scale-125 #a11y-button { zoom: 0.8 !important; }
body.a11y-scale-130 #a11y-panel, body.a11y-scale-130 #a11y-button { zoom: 0.7692308 !important; }
body.a11y-scale-135 #a11y-panel, body.a11y-scale-135 #a11y-button { zoom: 0.7407407 !important; }
body.a11y-scale-140 #a11y-panel, body.a11y-scale-140 #a11y-button { zoom: 0.7142857 !important; }
body.a11y-scale-145 #a11y-panel, body.a11y-scale-145 #a11y-button { zoom: 0.6896552 !important; }
body.a11y-scale-150 #a11y-panel, body.a11y-scale-150 #a11y-button { zoom: 0.6666667 !important; }
body.a11y-scale-155 #a11y-panel, body.a11y-scale-155 #a11y-button { zoom: 0.6451613 !important; }
body.a11y-scale-160 #a11y-panel, body.a11y-scale-160 #a11y-button { zoom: 0.625 !important; }
body.a11y-scale-165 #a11y-panel, body.a11y-scale-165 #a11y-button { zoom: 0.6060606 !important; }
body.a11y-scale-170 #a11y-panel, body.a11y-scale-170 #a11y-button { zoom: 0.5882353 !important; }
body.a11y-scale-175 #a11y-panel, body.a11y-scale-175 #a11y-button { zoom: 0.5714286 !important; }
body.a11y-scale-180 #a11y-panel, body.a11y-scale-180 #a11y-button { zoom: 0.5555556 !important; }
body.a11y-scale-185 #a11y-panel, body.a11y-scale-185 #a11y-button { zoom: 0.5405405 !important; }
body.a11y-scale-190 #a11y-panel, body.a11y-scale-190 #a11y-button { zoom: 0.5263158 !important; }
body.a11y-scale-195 #a11y-panel, body.a11y-scale-195 #a11y-button { zoom: 0.5128205 !important; }
body.a11y-scale-200 #a11y-panel, body.a11y-scale-200 #a11y-button { zoom: 0.5 !important; }

/* Schriftgröße - auf html setzen, dann erbt alles relativ */
html.a11y-font-50 { font-size: 8px !important; }
html.a11y-font-60 { font-size: 9.6px !important; }
html.a11y-font-70 { font-size: 11.2px !important; }
html.a11y-font-80 { font-size: 12.8px !important; }
html.a11y-font-90 { font-size: 14.4px !important; }
html.a11y-font-100 { font-size: 16px !important; }
html.a11y-font-110 { font-size: 17.6px !important; }
html.a11y-font-120 { font-size: 19.2px !important; }
html.a11y-font-130 { font-size: 20.8px !important; }
html.a11y-font-140 { font-size: 22.4px !important; }
html.a11y-font-150 { font-size: 24px !important; }
html.a11y-font-160 { font-size: 25.6px !important; }
html.a11y-font-170 { font-size: 27.2px !important; }
html.a11y-font-180 { font-size: 28.8px !important; }
html.a11y-font-190 { font-size: 30.4px !important; }
html.a11y-font-200 { font-size: 32px !important; }

/* Widget muss feste font-size behalten */
html[class*="a11y-font"] #a11y-panel,
html[class*="a11y-font"] #a11y-panel *,
html[class*="a11y-font"] #a11y-button,
html[class*="a11y-font"] #a11y-button * {
    font-size: 14px !important;
}

html[class*="a11y-font"] #a11y-panel h2 { font-size: 24px !important; }
html[class*="a11y-font"] #a11y-panel h3 { font-size: 18px !important; }
html[class*="a11y-font"] #a11y-panel h4 { font-size: 16px !important; }
html[class*="a11y-font"] #a11y-panel .a11y-header .a11y-close { font-size: 30px !important; }

/* Widget-Inhalte FIXE Größen in px */
#a11y-panel,
#a11y-panel *,
#a11y-button,
#a11y-button * {
    font-size: 14px !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
}

#a11y-panel h2 {
    font-size: 24px !important;
    line-height: 1.3 !important;
}

#a11y-panel h3 {
    font-size: 18px !important;
    line-height: 1.4 !important;
}

#a11y-panel h4 {
    font-size: 16px !important;
    line-height: 1.4 !important;
}

#a11y-panel .a11y-header .a11y-close {
    font-size: 30px !important;
    line-height: 30px !important;
}

/* Zeilenhöhe - Widget ausschließen */
body.a11y-line-50 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { line-height: 1.0 !important; }
body.a11y-line-60 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { line-height: 1.1 !important; }
body.a11y-line-70 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { line-height: 1.2 !important; }
body.a11y-line-80 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { line-height: 1.3 !important; }
body.a11y-line-90 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { line-height: 1.4 !important; }
body.a11y-line-100 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { line-height: 1.5 !important; }
body.a11y-line-110 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { line-height: 1.6 !important; }
body.a11y-line-120 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { line-height: 1.7 !important; }
body.a11y-line-130 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { line-height: 1.8 !important; }
body.a11y-line-140 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { line-height: 1.9 !important; }
body.a11y-line-150 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { line-height: 2.0 !important; }
body.a11y-line-160 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { line-height: 2.1 !important; }
body.a11y-line-170 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { line-height: 2.2 !important; }
body.a11y-line-180 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { line-height: 2.3 !important; }
body.a11y-line-190 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { line-height: 2.4 !important; }
body.a11y-line-200 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { line-height: 2.5 !important; }

/* Buchstabenabstand - Widget ausschließen */
body.a11y-spacing-0 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { letter-spacing: 0px !important; }
body.a11y-spacing-1 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { letter-spacing: 0.5px !important; }
body.a11y-spacing-2 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { letter-spacing: 1px !important; }
body.a11y-spacing-3 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { letter-spacing: 1.5px !important; }
body.a11y-spacing-4 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { letter-spacing: 2px !important; }
body.a11y-spacing-5 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { letter-spacing: 2.5px !important; }
body.a11y-spacing-6 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { letter-spacing: 3px !important; }
body.a11y-spacing-7 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { letter-spacing: 3.5px !important; }
body.a11y-spacing-8 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { letter-spacing: 4px !important; }
body.a11y-spacing-9 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { letter-spacing: 4.5px !important; }
body.a11y-spacing-10 :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *):not(#a11y-magnifier):not(#a11y-magnifier *) { letter-spacing: 5px !important; }

/* Textausrichtung - einfache Methode */
body.a11y-align-left * { text-align: left !important; }
body.a11y-align-center * { text-align: center !important; }
body.a11y-align-right * { text-align: right !important; }

/* Widget behält linksbündige Ausrichtung */
body.a11y-align-left #a11y-panel,
body.a11y-align-left #a11y-panel *,
body.a11y-align-center #a11y-panel,
body.a11y-align-center #a11y-panel *,
body.a11y-align-right #a11y-panel,
body.a11y-align-right #a11y-panel * {
    text-align: left !important;
}

/* Lesbare Schrift - einfache Methode */
body.a11y-readable * {
    font-family: Arial, Helvetica, "Segoe UI", Roboto, sans-serif !important;
}

/* Widget behält seine Original-Schrift */
body.a11y-readable #a11y-panel,
body.a11y-readable #a11y-panel * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Widget behält eigene Schrift */
#a11y-panel,
#a11y-panel * {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Dyslexie Schrift */
/* Lokal eingebunden (keine Übertragung der Besucher-IP an ein CDN) */
@font-face {
    font-family: 'OpenDyslexic';
    src: url('fonts/OpenDyslexic-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'OpenDyslexic';
    src: url('fonts/OpenDyslexic-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

body.a11y-dyslexic :not(#a11y-panel):not(#a11y-panel *):not(#a11y-button):not(#a11y-button *) {
    font-family: 'OpenDyslexic', Arial, sans-serif !important;
}

/* Titel hervorheben - Widget ausschließen */
body.a11y-highlight-titles h1:not(#a11y-panel *):not(#a11y-panel),
body.a11y-highlight-titles h2:not(#a11y-panel *):not(#a11y-panel),
body.a11y-highlight-titles h3:not(#a11y-panel *):not(#a11y-panel),
body.a11y-highlight-titles h4:not(#a11y-panel *):not(#a11y-panel),
body.a11y-highlight-titles h5:not(#a11y-panel *):not(#a11y-panel),
body.a11y-highlight-titles h6:not(#a11y-panel *):not(#a11y-panel) {
    background: #ffeb3b !important;
    color: #000 !important;
    padding: 6px 10px !important;
    border-radius: 4px !important;
    display: table !important;
    box-decoration-break: clone !important;
    -webkit-box-decoration-break: clone !important;
}

/* Dynamische Ausrichtung basierend auf data-Attribut */
body.a11y-highlight-titles h1[data-a11y-align="center"],
body.a11y-highlight-titles h2[data-a11y-align="center"],
body.a11y-highlight-titles h3[data-a11y-align="center"],
body.a11y-highlight-titles h4[data-a11y-align="center"],
body.a11y-highlight-titles h5[data-a11y-align="center"],
body.a11y-highlight-titles h6[data-a11y-align="center"] {
    margin-left: auto !important;
    margin-right: auto !important;
}

body.a11y-highlight-titles h1[data-a11y-align="right"],
body.a11y-highlight-titles h2[data-a11y-align="right"],
body.a11y-highlight-titles h3[data-a11y-align="right"],
body.a11y-highlight-titles h4[data-a11y-align="right"],
body.a11y-highlight-titles h5[data-a11y-align="right"],
body.a11y-highlight-titles h6[data-a11y-align="right"] {
    margin-left: auto !important;
    margin-right: 0 !important;
}

/* Widget-Titel dürfen nicht hervorgehoben werden */
body.a11y-highlight-titles #a11y-panel h1,
body.a11y-highlight-titles #a11y-panel h2,
body.a11y-highlight-titles #a11y-panel h3,
body.a11y-highlight-titles #a11y-panel h4,
body.a11y-highlight-titles #a11y-panel h5,
body.a11y-highlight-titles #a11y-panel h6 {
    background: none !important;
    color: inherit !important;
    padding: 0 !important;
    border-radius: 0 !important;
    display: block !important;
}

/* Links hervorheben - maximale Spezifität */
html body.a11y-highlight-links a,
html body.a11y-highlight-links a:link,
html body.a11y-highlight-links a:visited {
    background: #ffff00 !important;
    color: #000 !important;
    font-weight: bold !important;
    text-decoration: underline !important;
    padding: 2px 4px !important;
    border-radius: 2px !important;
}

/* Widget-Links MÜSSEN ausgeschlossen werden - noch höhere Spezifität */
html body.a11y-highlight-links #a11y-panel a,
html body.a11y-highlight-links #a11y-panel a:link,
html body.a11y-highlight-links #a11y-panel a:visited,
html body.a11y-highlight-links #a11y-panel a:hover,
html body.a11y-highlight-links #a11y-panel a:focus,
html body.a11y-highlight-links #a11y-button a,
html body.a11y-highlight-links #a11y-button a:link,
html body.a11y-highlight-links #a11y-button a:visited {
    background: none !important;
    color: #1f2937 !important;
    font-weight: normal !important;
    text-decoration: none !important;
    padding: 0 !important;
    border-radius: 0 !important;
}

/* Textlupe - wird per JS gesteuert */
#a11y-magnifier {
    position: fixed !important;
    display: none !important;
    border: 4px solid #2563eb !important;
    border-radius: 6px !important;
    background: white !important;
    overflow: auto !important;
    pointer-events: none !important;
    z-index: 2147483647 !important;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important;
    box-sizing: border-box !important;
}

#a11y-magnifier-content {
    padding: 15px !important;
    font-size: 18px !important;
    line-height: 1.6 !important;
    color: #000 !important;
    pointer-events: none !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    white-space: normal !important;
    box-sizing: border-box !important;
    display: block !important;
}

/* Kontrast-Modi */
/* Filter auf <html> statt <body>: nur dort bleibt position:fixed (Panel, Button) am Fenster */
html.a11y-filter-dark-contrast {
    filter: invert(1) hue-rotate(180deg) !important;
}

body.a11y-dark-contrast {
    background-color: #000 !important;
}

/* Filter auf <html> statt <body>: nur dort bleibt position:fixed (Panel, Button) am Fenster */
html.a11y-filter-light-contrast {
    filter: brightness(1.3) !important;
}

/* Filter auf <html> statt <body>: nur dort bleibt position:fixed (Panel, Button) am Fenster */
html.a11y-filter-high-contrast {
    filter: contrast(2) !important;
}

/* Sättigung */
/* Filter auf <html> statt <body>: nur dort bleibt position:fixed (Panel, Button) am Fenster */
html.a11y-filter-high-saturation {
    filter: saturate(2) !important;
}

/* Filter auf <html> statt <body>: nur dort bleibt position:fixed (Panel, Button) am Fenster */
html.a11y-filter-low-saturation {
    filter: saturate(0.5) !important;
}

/* Filter auf <html> statt <body>: nur dort bleibt position:fixed (Panel, Button) am Fenster */
html.a11y-filter-monochrome {
    filter: grayscale(100%) !important;
}

/* Widget von Filter-Effekten ausnehmen - Gegen-Filter anwenden */
body.a11y-dark-contrast #a11y-panel,
body.a11y-dark-contrast #a11y-button,
body.a11y-dark-contrast #a11y-magnifier,
body.a11y-dark-contrast #a11y-reading-guide,
body.a11y-dark-contrast #a11y-reading-mask {
    filter: invert(1) hue-rotate(180deg) !important;
    background-color: #fff !important;
}

body.a11y-light-contrast #a11y-panel,
body.a11y-light-contrast #a11y-button,
body.a11y-light-contrast #a11y-magnifier {
    filter: brightness(0.769) !important; /* 1 / 1.3 */
    background-color: #fff !important;
}

body.a11y-high-contrast #a11y-panel,
body.a11y-high-contrast #a11y-button,
body.a11y-high-contrast #a11y-magnifier {
    filter: contrast(0.5) !important; /* 1 / 2 */
    background-color: #fff !important;
}

body.a11y-high-saturation #a11y-panel,
body.a11y-high-saturation #a11y-button,
body.a11y-high-saturation #a11y-magnifier {
    filter: saturate(0.5) !important; /* 1 / 2 */
    background-color: #fff !important;
}

body.a11y-low-saturation #a11y-panel,
body.a11y-low-saturation #a11y-button,
body.a11y-low-saturation #a11y-magnifier {
    filter: saturate(2) !important; /* 1 / 0.5 */
    background-color: #fff !important;
}

body.a11y-monochrome #a11y-panel,
body.a11y-monochrome #a11y-button,
body.a11y-monochrome #a11y-magnifier {
    filter: none !important;
    isolation: isolate !important;
    background-color: #fff !important;
}

/* Widget-Button behält blauen Hintergrund + Gegen-Filter */
body.a11y-dark-contrast #a11y-button {
    background: #2563eb !important;
    filter: invert(1) hue-rotate(180deg) !important;
}

body.a11y-light-contrast #a11y-button {
    background: #2563eb !important;
    filter: brightness(0.769) !important;
}

body.a11y-high-contrast #a11y-button {
    background: #2563eb !important;
    filter: contrast(0.5) !important;
}

body.a11y-high-saturation #a11y-button {
    background: #2563eb !important;
    filter: saturate(0.5) !important;
}

body.a11y-low-saturation #a11y-button {
    background: #2563eb !important;
    filter: saturate(2) !important;
}

body.a11y-monochrome #a11y-button {
    background: #2563eb !important;
    filter: none !important;
    isolation: isolate !important;
}

/* Widget-Inhalte erben Gegen-Filter vom Parent */

/* Widget von Filter-Effekten ausnehmen - MAXIMALER SCHUTZ */
body.a11y-dark-contrast #a11y-panel,
body.a11y-dark-contrast #a11y-button {
    filter: invert(1) hue-rotate(180deg) !important;
    background-color: #fff !important;
}

/* Widget-Inhalte erben Gegen-Filter vom Parent */

/* Widget-Text behält IMMER dunkle Farbe */
body.a11y-light-contrast #a11y-panel,
body.a11y-high-contrast #a11y-panel,
body.a11y-high-saturation #a11y-panel,
body.a11y-low-saturation #a11y-panel,
body.a11y-monochrome #a11y-panel {
    color: #1f2937 !important;
}

/* Widget SVGs explizit schützen */
body.a11y-light-contrast #a11y-panel svg,
body.a11y-high-contrast #a11y-panel svg,
body.a11y-high-saturation #a11y-panel svg,
body.a11y-low-saturation #a11y-panel svg,
body.a11y-monochrome #a11y-panel svg,
body.a11y-light-contrast #a11y-button svg,
body.a11y-high-contrast #a11y-button svg,
body.a11y-high-saturation #a11y-button svg,
body.a11y-low-saturation #a11y-button svg,
body.a11y-monochrome #a11y-button svg {
    filter: none !important;
    fill: white !important;
}

/* Widget-Buttons behalten ihre Farben */
body.a11y-light-contrast #a11y-panel .a11y-btn-primary,
body.a11y-high-contrast #a11y-panel .a11y-btn-primary,
body.a11y-high-saturation #a11y-panel .a11y-btn-primary,
body.a11y-low-saturation #a11y-panel .a11y-btn-primary,
body.a11y-monochrome #a11y-panel .a11y-btn-primary {
    background-color: #2563eb !important;
    color: white !important;
}

body.a11y-light-contrast #a11y-panel .a11y-btn-secondary,
body.a11y-high-contrast #a11y-panel .a11y-btn-secondary,
body.a11y-high-saturation #a11y-panel .a11y-btn-secondary,
body.a11y-low-saturation #a11y-panel .a11y-btn-secondary,
body.a11y-monochrome #a11y-panel .a11y-btn-secondary {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
}

/* Farbanpassungen - Seite */
body.a11y-text-color-custom p,
body.a11y-text-color-custom span,
body.a11y-text-color-custom div,
body.a11y-text-color-custom li,
body.a11y-text-color-custom td,
body.a11y-text-color-custom a {
    color: var(--a11y-text-color) !important;
}

body.a11y-title-color-custom h1,
body.a11y-title-color-custom h2,
body.a11y-title-color-custom h3,
body.a11y-title-color-custom h4,
body.a11y-title-color-custom h5,
body.a11y-title-color-custom h6 {
    color: var(--a11y-title-color) !important;
}

/* Widget behält ursprüngliche Farben - höhere Spezifität */
body.a11y-text-color-custom #a11y-panel,
body.a11y-text-color-custom #a11y-panel * {
    color: unset !important;
}

body.a11y-title-color-custom #a11y-panel,
body.a11y-title-color-custom #a11y-panel * {
    color: unset !important;
}

/* Hintergrundfarbe nur auf body setzen */
body.a11y-bg-color-custom {
    background-color: var(--a11y-bg-color) !important;
}

/* Panel behält weißen Hintergrund */
body.a11y-text-color-custom #a11y-panel,
body.a11y-title-color-custom #a11y-panel,
body.a11y-bg-color-custom #a11y-panel {
    background-color: #fff !important;
}

body.a11y-bg-color-custom #a11y-panel .a11y-card.active,
body.a11y-text-color-custom #a11y-panel .a11y-card.active,
body.a11y-title-color-custom #a11y-panel .a11y-card.active {
    background-color: #dbeafe !important;
}

body.a11y-bg-color-custom #a11y-panel .a11y-card:hover,
body.a11y-text-color-custom #a11y-panel .a11y-card:hover,
body.a11y-title-color-custom #a11y-panel .a11y-card:hover {
    background-color: #eff6ff !important;
}

/* Buttons behalten ihre Hintergründe */
body.a11y-bg-color-custom #a11y-button,
body.a11y-text-color-custom #a11y-button,
body.a11y-title-color-custom #a11y-button {
    background-color: #2563eb !important;
}

body.a11y-bg-color-custom #a11y-panel .a11y-btn-primary,
body.a11y-text-color-custom #a11y-panel .a11y-btn-primary,
body.a11y-title-color-custom #a11y-panel .a11y-btn-primary {
    background-color: #2563eb !important;
    color: white !important;
}

body.a11y-bg-color-custom #a11y-panel .a11y-btn-secondary,
body.a11y-text-color-custom #a11y-panel .a11y-btn-secondary,
body.a11y-title-color-custom #a11y-panel .a11y-btn-secondary {
    background-color: #f3f4f6 !important;
    color: #1f2937 !important;
}

/* KRITISCH: Farbfelder (.a11y-color-swatch) behalten ihre inline-style Farben */
/* KEINE CSS-Regel hier - inline styles bleiben erhalten! */

/* Töne stummschalten */
body.a11y-mute-sounds audio,
body.a11y-mute-sounds video {
    display: none !important;
}

/* Bilder, Videos und Hintergrundbilder ausblenden */
body.a11y-hide-images img,
body.a11y-hide-images video,
body.a11y-hide-images iframe[src*="youtube"],
body.a11y-hide-images iframe[src*="vimeo"] {
    opacity: 0 !important;
    visibility: hidden !important;
}

body.a11y-hide-images * {
    background-image: none !important;
}

/* Lesemodus */
body.a11y-reading-mode > *:not(#a11y-panel):not(#a11y-button):not(#a11y-magnifier):not(#a11y-reading-guide):not(#a11y-reading-mask) {
    max-width: 900px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}

/* Leseleitfaden */
#a11y-reading-guide {
    position: fixed !important;
    display: none !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: rgba(255, 0, 0, 0.8) !important;
    pointer-events: none !important;
    z-index: 999996 !important;
    box-shadow: 0 0 5px rgba(255, 0, 0, 0.5) !important;
}

body.a11y-reading-guide #a11y-reading-guide {
    display: block !important;
}

/* Lesemaske mit klaren Grenzen */
#a11y-reading-mask {
    position: fixed !important;
    display: none !important;
    pointer-events: none !important;
    z-index: 999995 !important;
}

body.a11y-reading-mask #a11y-reading-mask {
    display: block !important;
}

#a11y-reading-mask::before {
    content: '' !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--mask-top, 200px) !important;
    background: rgba(0, 0, 0, 0.85) !important;
}

#a11y-reading-mask::after {
    content: '' !important;
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: var(--mask-bottom, 200px) !important;
    background: rgba(0, 0, 0, 0.85) !important;
}

/* Animationen anhalten */
body.a11y-stop-animations *,
body.a11y-stop-animations *::before,
body.a11y-stop-animations *::after {
    animation-duration: 0s !important;
    animation-delay: 0s !important;
    transition-duration: 0s !important;
}

/* Hervorheben beim Schweben */
body.a11y-highlight-hover *:hover:not(#a11y-panel):not(#a11y-panel *):not(#a11y-button) {
    outline: 3px solid #ff0000 !important;
    outline-offset: 2px !important;
}

/* Hervorheben beim Fokus */
body.a11y-highlight-focus *:focus {
    outline: 3px solid #0000ff !important;
    outline-offset: 2px !important;
}

/* Screenreader-Unterstützung - KEINE visuellen Effekte */

/* Großer schwarzer Cursor */
body.a11y-cursor-black,
body.a11y-cursor-black * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='black' stroke='white' stroke-width='1' d='M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z'/%3E%3C/svg%3E") 12 12, auto !important;
}

/* Großer weißer Cursor */
body.a11y-cursor-white,
body.a11y-cursor-white * {
    cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath fill='white' stroke='black' stroke-width='2' d='M3 3l7.07 16.97 2.51-7.39 7.39-2.51L3 3z'/%3E%3C/svg%3E") 12 12, auto !important;
}

/* ==================== PANEL STYLES ==================== */
#a11y-panel .a11y-header {
    background: #2563eb !important;
    color: white !important;
    padding: 20px !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
    min-height: 120px !important;
    box-sizing: border-box !important;
}

#a11y-panel .a11y-header h2 {
    margin: 0 0 15px 0 !important;
    font-size: 24px !important;
    color: white !important;
    font-weight: bold !important;
    line-height: 1.2 !important;
}

#a11y-panel .a11y-header .a11y-close {
    position: absolute !important;
    top: 20px !important;
    right: 20px !important;
    background: transparent !important;
    border: none !important;
    color: white !important;
    font-size: 30px !important;
    cursor: pointer !important;
    width: 40px !important;
    height: 40px !important;
    line-height: 30px !important;
    padding: 0 !important;
    margin: 0 !important;
}

.a11y-actions {
    display: flex !important;
    gap: 10px !important;
}

#a11y-panel .a11y-header .a11y-actions .a11y-btn,
#a11y-panel .a11y-content .a11y-section .a11y-btn {
    flex: 1 !important;
    background: white !important;
    color: #2563eb !important;
    border: none !important;
    padding: 10px 15px !important;
    border-radius: 6px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    font-size: 14px !important;
}

#a11y-panel .a11y-content .a11y-section .a11y-btn:hover {
    background: #f3f4f6 !important;
}

/* Touch-Feedback für Mobile */
#a11y-panel .a11y-content .a11y-section .a11y-btn:active,
#a11y-panel .a11y-content .a11y-section .a11y-card:active,
.a11y-profile-btn:active {
    transform: scale(0.98) !important;
    opacity: 0.9 !important;
    transition: transform 0.1s, opacity 0.1s !important;
}

#a11y-panel .a11y-content .a11y-section .a11y-control-buttons button:active {
    transform: scale(0.95) !important;
    background: #0ea5e9 !important;
}

#a11y-panel .a11y-content {
    padding: 20px !important;
}

#a11y-panel .a11y-content .a11y-section {
    margin-bottom: 25px !important;
}

#a11y-panel .a11y-content .a11y-section h3 {
    font-size: 18px !important;
    margin-bottom: 15px !important;
    color: #1f2937 !important;
    font-weight: bold !important;
}

/* Profile */
.a11y-profile {
    background: #f3f4f6 !important;
    padding: 15px !important;
    border-radius: 6px !important;
    margin-bottom: 10px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

#a11y-panel .a11y-content .a11y-section .a11y-profile-info h4 {
    margin: 0 0 5px 0 !important;
    font-size: 16px !important;
    color: #1f2937 !important;
    font-weight: 600 !important;
}

#a11y-panel .a11y-content .a11y-section .a11y-profile-info p {
    margin: 0 !important;
    font-size: 14px !important;
    color: #6b7280 !important;
}

.a11y-toggle {
    display: flex !important;
    gap: 5px !important;
}

.a11y-toggle button {
    padding: 8px 15px !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-weight: bold !important;
    font-size: 13px !important;
    transition: all 0.2s !important;
}

#a11y-panel .a11y-content .a11y-section .a11y-profile .a11y-toggle button.active {
    background: #2563eb !important;
    color: white !important;
}

#a11y-panel .a11y-content .a11y-section .a11y-profile .a11y-toggle button.inactive {
    background: #d1d5db !important;
    color: #374151 !important;
}

/* Controls im Screenshot-Stil */
#a11y-panel .a11y-content .a11y-section .a11y-control {
    background: #f9fafb !important;
    padding: 15px !important;
    border-radius: 6px !important;
    margin-bottom: 12px !important;
}

#a11y-panel .a11y-content .a11y-section .a11y-control label {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-weight: 600 !important;
    margin-bottom: 12px !important;
    font-size: 14px !important;
    color: #374151 !important;
}

#a11y-panel .a11y-content .a11y-section .a11y-control-buttons {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
}

#a11y-panel .a11y-content .a11y-section .a11y-control button {
    width: 44px !important;
    height: 44px !important;
    border-radius: 6px !important;
    background: #2563eb !important;
    color: white !important;
    border: none !important;
    font-weight: bold !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.2s !important;
}

#a11y-panel .a11y-content .a11y-section .a11y-control button:hover {
    background: #1d4ed8 !important;
    transform: scale(1.05) !important;
}

#a11y-panel .a11y-content .a11y-section .a11y-control-value {
    flex: 1 !important;
    text-align: center !important;
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #2563eb !important;
    background: white !important;
    padding: 10px !important;
    border-radius: 6px !important;
}

.a11y-align-buttons {
    display: flex !important;
    gap: 8px !important;
    margin-top: 8px !important;
}

.a11y-align-btn {
    flex: 1 !important;
    padding: 10px !important;
    background: white !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    transition: all 0.2s !important;
}

.a11y-align-btn:hover {
    border-color: #2563eb !important;
}

.a11y-align-btn.active {
    background: #2563eb !important;
    color: white !important;
    border-color: #2563eb !important;
}

/* Karten-Grid */
.a11y-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
}

.a11y-grid-2{
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
}

.a11y-grid-2-2 {
    display: grid !important;
    grid-template-columns: repeat(1, 1fr) !important;
    gap: 10px !important;
}

.a11y-grid-3 {
    grid-template-columns: repeat(3, 1fr) !important;
}

#a11y-panel .a11y-content .a11y-section .a11y-card {
    background: #f3f4f6 !important;
    padding: 16px 12px !important;
    border-radius: 6px !important;
    text-align: center !important;
    cursor: pointer !important;
    border: 2px solid transparent !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    color: #374151 !important;
    transition: all 0.2s !important;
    min-height: 70px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#a11y-panel .a11y-content .a11y-section .a11y-card:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
}

#a11y-panel .a11y-content .a11y-section .a11y-card.active {
    background: #2563eb !important;
    color: white !important;
    border-color: #1d4ed8 !important;
}

/* Farbauswahl */
#a11y-panel .a11y-content .a11y-section .a11y-color-picker {
    margin-bottom: 15px !important;
    color: #374151 !important;
}

.a11y-color-trigger {
    width: 100% !important;
    padding: 14px !important;
    background: #f3f4f6 !important;
    border: none !important;
    border-radius: 6px !important;
    text-align: left !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.2s !important;
}

.a11y-color-trigger:hover {
    background: #e5e7eb !important;
}

.a11y-color-options {
    display: none;
    margin-top: 10px !important;
    padding: 15px !important;
    background: white !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 6px !important;
}

.a11y-color-options.show {
    display: block !important;
}

.a11y-color-grid {
    display: flex !important;
    gap: 10px !important;
    justify-content: center !important;
    margin: 12px 0 !important;
}

.a11y-color-swatch {
    width: 44px !important;
    height: 44px !important;
    border-radius: 6px !important;
    border: 3px solid #d1d5db !important;
    cursor: pointer !important;
    transition: transform 0.2s !important;
}

.a11y-color-swatch:hover {
    transform: scale(1.15) !important;
    border-color: #2563eb !important;
}

.a11y-color-cancel {
    width: 100% !important;
    padding: 8px !important;
    background: transparent !important;
    border: none !important;
    color: #6b7280 !important;
    cursor: pointer !important;
    font-size: 14px !important;
}

.a11y-color-cancel:hover {
    color: #374151 !important;
}

/* Responsive */
@media (max-width: 768px) {
    /* Panel nimmt ganzen Bildschirm ein */
    #a11y-panel {
        max-width: 100% !important;
        width: 100% !important;
    }
    
    /* Button etwas kleiner und näher am Rand */
    #a11y-button {
        bottom: 15px !important;
        right: 15px !important;
        width: 56px !important;
        height: 56px !important;
    }
    
    /* Größere Touch-Targets */
    #a11y-panel .a11y-content .a11y-section .a11y-btn,
    #a11y-panel .a11y-content .a11y-section .a11y-card,
    #a11y-panel .a11y-content .a11y-section .a11y-control button {
        min-height: 44px !important;
        padding: 12px 16px !important;
    }
    
    /* Größere Touch-Slider */
    #a11y-panel .a11y-content .a11y-section .a11y-control-buttons button {
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 20px !important;
    }
    
    /* Grid auf 2 Spalten */
    .a11y-grid-2,
    .a11y-grid-3 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    /* Lupe größer auf Mobile */
    #a11y-magnifier {
        width: 200px !important;
        height: 200px !important;
    }
    
    #a11y-magnifier-content {
        font-size: 20px !important;
        padding: 15px !important;
    }
    
    #a11y-button svg {
        width: 28px !important;
        height: 28px !important;
    }
    
    #a11y-panel .a11y-content .a11y-section .a11y-card,
    #a11y-panel .a11y-content .a11y-section .a11y-btn {
        min-height: 48px !important;
        padding: 12px !important;
        font-size: 16px !important;
    }
    
    #a11y-panel .a11y-content .a11y-section .a11y-control-buttons button {
        min-width: 44px !important;
        min-height: 44px !important;
        font-size: 18px !important;
    }
    
    .a11y-profile-btn {
        min-height: 56px !important;
        padding: 12px 16px !important;
    }
}

/* Sehr kleine Bildschirme - Profile Grid auf 1 Spalte */
@media (max-width: 480px) {
    .a11y-grid-2 {
        grid-template-columns: 1fr !important;
    }
}

/* Widget Panel - Basis-Styles */
#a11y-panel {
    position: fixed !important;
    top: 0 !important;
    right: -100% !important;
    width: 100% !important;
    max-width: 550px !important;
    height: 100vh !important;
    background: white !important;
    box-shadow: -5px 0 15px rgba(0,0,0,0.3) !important;
    z-index: 999998 !important;
    overflow-y: auto !important;
    transition: right 0.3s ease !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
    zoom: 1 !important;
    transform: none !important;
    filter: none !important;
}

#a11y-panel.open {
    right: 0 !important;
}

/* Widget Button */
#a11y-button {
    position: fixed !important;
    bottom: 20px !important;
    right: 20px !important;
    width: 60px !important;
    height: 60px !important;
    background: #2563eb !important;
    border: none !important;
    border-radius: 50% !important;
    cursor: pointer !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3) !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: all 0.3s !important;
    zoom: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* KRITISCH: Widget explizit von allen Transformationen ausschließen */
body[class*="a11y-scale"] #a11y-panel,
body[class*="a11y-scale"] #a11y-button {
    transform: none !important;
}

/* Widget muss immer seine Basis-Styles behalten */
#a11y-panel {
    background: white !important;
    color: #1f2937 !important;
    zoom: 1 !important;
    transform: none !important;
    filter: none !important;
}

#a11y-button {
    background: #2563eb !important;
    zoom: 1 !important;
    transform: none !important;
    filter: none !important;
}

/* Widget Inhalte fixe Größen (überschreibt Vererbung) */
#a11y-panel,
#a11y-panel *,
#a11y-button,
#a11y-button * {
    font-size: 14px !important;
    line-height: 1.5 !important;
    letter-spacing: 0 !important;
}

#a11y-panel h2 {
    font-size: 24px !important;
    line-height: 1.3 !important;
}

#a11y-panel h3 {
    font-size: 18px !important;
    line-height: 1.4 !important;
}

#a11y-panel h4 {
    font-size: 16px !important;
    line-height: 1.4 !important;
}

#a11y-panel .a11y-header .a11y-close {
    font-size: 30px !important;
    line-height: 30px !important;
}

#a11y-panel .a11y-actions .a11y-btn {
    text-align: center !important;
}

/* Bestätigungs-Dialog für dauerhaftes Ausblenden */
#a11y-hide-dialog {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 1000000 !important;
}

.a11y-dialog-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0, 0, 0, 0.5) !important;
}

.a11y-dialog-content {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    background: white !important;
    padding: 40px !important;
    border-radius: 6px !important;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3) !important;
    max-width: 500px !important;
    width: 90% !important;
    box-sizing: border-box !important;
}

.a11y-dialog-close {
    position: absolute !important;
    top: 15px !important;
    left: 15px !important;
    background: transparent !important;
    border: none !important;
    font-size: 28px !important;
    color: #666 !important;
    cursor: pointer !important;
    width: 35px !important;
    height: 35px !important;
    line-height: 28px !important;
    padding: 0 !important;
}

.a11y-dialog-close:hover {
    color: #000 !important;
}

.a11y-dialog-content h2 {
    margin: 0 0 20px 0 !important;
    font-size: 22px !important;
    color: #1f2937 !important;
    font-weight: bold !important;
}

.a11y-dialog-content p {
    margin: 0 0 30px 0 !important;
    font-size: 15px !important;
    color: #4b5563 !important;
    line-height: 1.6 !important;
}

.a11y-dialog-buttons {
    display: flex !important;
    gap: 15px !important;
}

.a11y-dialog-btn {
    flex: 1 !important;
    padding: 14px 20px !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    cursor: pointer !important;
    border: none !important;
    transition: all 0.2s !important;
}

.a11y-dialog-btn-primary {
    background: #2563eb !important;
    color: white !important;
}

.a11y-dialog-btn-primary:hover {
    background: #1d4ed8 !important;
}

.a11y-dialog-btn-secondary {
    background: white !important;
    color: #2563eb !important;
    border: 2px solid #2563eb !important;
}

.a11y-dialog-btn-secondary:hover {
    background: #eff6ff !important;
}

/* Mobile Anpassungen für Dialog */
@media (max-width: 768px) {
    .a11y-dialog-content {
        padding: 30px 20px !important;
        max-width: 90% !important;
    }
    
    .a11y-dialog-content h2 {
        font-size: 20px !important;
    }
    
    .a11y-dialog-content p {
        font-size: 14px !important;
    }
    
    .a11y-dialog-buttons {
        flex-direction: column !important;
    }
    
    .a11y-dialog-btn {
        width: 100% !important;
    }
}

/* ==================== ERGÄNZUNGEN v6.2.0 ==================== */

/* Dauerhaft ausgeblendet (Klasse wird per Inline-Script auf <html> gesetzt) */
html.a11y-widget-hidden #a11y-button,
html.a11y-widget-hidden #a11y-panel {
    display: none !important;
}

/* Geschlossenes Panel aus der Tab-Reihenfolge nehmen */
#a11y-panel {
    visibility: hidden !important;
    transition: right 0.3s ease, visibility 0s linear 0.3s !important;
}

#a11y-panel.open {
    visibility: visible !important;
    transition: right 0.3s ease, visibility 0s linear 0s !important;
}

/* Sichtbarer Tastaturfokus im Widget */
#a11y-button:focus-visible,
#a11y-panel button:focus-visible,
#a11y-panel .a11y-card:focus-visible,
#a11y-panel .a11y-color-swatch:focus-visible {
    outline: 3px solid #f59e0b !important;
    outline-offset: 2px !important;
}

/* Abstände im Widget fest in px – verhindert, dass rem-basierte Theme-Abstände
   bei geänderter Schriftgröße (Profile Sehbeeinträchtigt / Kognitive Unterstützung) mitwachsen */
#a11y-panel h1,
#a11y-panel h2,
#a11y-panel h3,
#a11y-panel h4,
#a11y-panel h5,
#a11y-panel h6,
#a11y-panel p,
#a11y-panel label {
    margin-top: 0 !important;
}

#a11y-panel .a11y-content .a11y-section h3 {
    margin: 0 0 15px 0 !important;
    padding: 0 !important;
}

#a11y-panel .a11y-content .a11y-section .a11y-control label {
    margin: 0 0 12px 0 !important;
    padding: 0 !important;
}

#a11y-panel .a11y-content .a11y-section .a11y-control-buttons button {
    padding: 0 !important;
    margin: 0 !important;
    min-width: 44px !important;
    flex-shrink: 0 !important;
}

#a11y-panel .a11y-toggle button,
#a11y-panel .a11y-align-btn,
#a11y-panel .a11y-color-trigger,
#a11y-panel .a11y-color-cancel,
#a11y-panel .a11y-close {
    margin: 0 !important;
}

#a11y-panel .a11y-color-picker,
#a11y-panel .a11y-grid,
#a11y-panel .a11y-grid-2,
#a11y-panel .a11y-grid-2-2,
#a11y-panel .a11y-profile-info {
    margin-top: 0 !important;
}

/* Ausrichtungs-Buttons: nicht die Optik der +/−-Buttons übernehmen, aktiver Zustand erkennbar */
#a11y-panel .a11y-content .a11y-section .a11y-control .a11y-align-btn {
    width: auto !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 10px !important;
    background: white !important;
    color: #374151 !important;
    border: 2px solid #e5e7eb !important;
    border-radius: 6px !important;
    font-weight: 500 !important;
    transform: none !important;
}

#a11y-panel .a11y-content .a11y-section .a11y-control .a11y-align-btn:hover {
    border-color: #2563eb !important;
    background: white !important;
}

#a11y-panel .a11y-content .a11y-section .a11y-control .a11y-align-btn.active {
    background: #2563eb !important;
    color: white !important;
    border-color: #2563eb !important;
}

/* Einheitlicher Schatten für alle Elemente im Widget */
#a11y-panel .a11y-profile,
#a11y-panel .a11y-content .a11y-section .a11y-control,
#a11y-panel .a11y-content .a11y-section .a11y-card,
#a11y-panel .a11y-content .a11y-section .a11y-card:hover,
#a11y-panel .a11y-color-trigger,
#a11y-panel .a11y-color-options {
    box-shadow: rgb(55, 65, 81) 0px 0px 0.5em !important;
}