/**
 * MPM Barrierefrei - Toolbar Styles
 * Version 1.0
 */

/* ======================================================================
   KOMPLETTER RESET für Button und Panel
   Isoliert die Toolbar komplett vom WordPress-Theme
   ====================================================================== */

/* Reset für Panel und alle Kinder */
.mpm-bf-panel,
.mpm-bf-panel * {
    box-sizing: border-box !important;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
    letter-spacing: normal !important;
    text-transform: none !important;
    text-decoration: none !important;
    font-style: normal !important;
    word-spacing: normal !important;
    text-shadow: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
    float: none !important;
    clear: none !important;
    vertical-align: baseline !important;
}

/* SVGs im Panel */
.mpm-bf-panel svg {
    display: inline-block !important;
    vertical-align: middle !important;
    overflow: visible !important;
}

.mpm-bf-panel svg path {
    stroke: none !important;
}

/* ======================================================================
   Hauptbutton (schwebt am Rand)
   ====================================================================== */

.mpm-bf-button {
    position: fixed !important;
    width: 56px !important;
    height: 56px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 2px solid #000000 !important;
    border-radius: 0 !important;
    cursor: pointer !important;
    z-index: 999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
    outline: none !important;
}

.mpm-bf-button:hover {
    opacity: 0.9 !important;
}

.mpm-bf-button:focus {
    outline: 3px solid #000 !important;
    outline-offset: 2px !important;
}

.mpm-bf-button svg {
    width: 28px !important;
    height: 28px !important;
    fill: #ffffff !important;
    display: block !important;
}

/* Positionen Button */
.mpm-bf-button.mpm-bf-unten-links { left: 20px !important; bottom: 20px !important; }
.mpm-bf-button.mpm-bf-unten-rechts { right: 20px !important; bottom: 20px !important; }
.mpm-bf-button.mpm-bf-mitte-links { left: 20px !important; top: 50% !important; transform: translateY(-50%) !important; }
.mpm-bf-button.mpm-bf-mitte-rechts { right: 20px !important; top: 50% !important; transform: translateY(-50%) !important; }

/* ======================================================================
   Panel
   ====================================================================== */

.mpm-bf-panel {
    position: fixed !important;
    width: 280px !important;
    max-height: 80vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    background: #ffffff !important;
    border: 2px solid #000000 !important;
    border-radius: 0 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25) !important;
    z-index: 999998 !important;
    padding: 16px !important;
    display: none !important;
    color: #000000 !important;
    font-size: 13px !important;
}

.mpm-bf-panel.mpm-bf-open {
    display: block !important;
}

/* Positionen Panel */
.mpm-bf-panel.mpm-bf-unten-links { left: 20px !important; bottom: 86px !important; }
.mpm-bf-panel.mpm-bf-unten-rechts { right: 20px !important; bottom: 86px !important; }
.mpm-bf-panel.mpm-bf-mitte-links { left: 86px !important; top: 50% !important; transform: translateY(-50%) !important; }
.mpm-bf-panel.mpm-bf-mitte-rechts { right: 86px !important; top: 50% !important; transform: translateY(-50%) !important; }

/* ======================================================================
   Panel Header
   ====================================================================== */

.mpm-bf-panel-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin: 0 0 12px 0 !important;
    padding: 0 0 10px 0 !important;
    border-bottom: 2px solid #000000 !important;
}

.mpm-bf-panel-title {
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mpm-bf-close {
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #000000 !important;
    background: #ffffff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mpm-bf-close svg {
    width: 16px !important;
    height: 16px !important;
}

.mpm-bf-close svg,
.mpm-bf-close svg path {
    fill: #000000 !important;
}

.mpm-bf-close:hover {
    background: #000000 !important;
}

.mpm-bf-close:hover svg,
.mpm-bf-close:hover svg path {
    fill: #ffffff !important;
}

/* ======================================================================
   Akkordeon-Gruppen
   ====================================================================== */

.mpm-bf-group {
    margin: 0 0 8px 0 !important;
    border: 2px solid #000000 !important;
}

.mpm-bf-group-header {
    width: 100% !important;
    padding: 10px 12px !important;
    margin: 0 !important;
    background: #f5f5f5 !important;
    border: none !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: left !important;
}

.mpm-bf-group-header:hover {
    background: #e8e8e8 !important;
}

.mpm-bf-group-header .mpm-bf-icon {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}

.mpm-bf-group-header .mpm-bf-icon,
.mpm-bf-group-header .mpm-bf-icon path {
    fill: #000000 !important;
}

.mpm-bf-group-header span {
    flex: 1 !important;
}

.mpm-bf-group-header .mpm-bf-chevron {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
    transition: transform 0.2s ease !important;
}

.mpm-bf-group-header .mpm-bf-chevron,
.mpm-bf-group-header .mpm-bf-chevron path {
    fill: #666666 !important;
}

.mpm-bf-group-content {
    display: none !important;
    padding: 12px !important;
    background: #ffffff !important;
}

.mpm-bf-group.mpm-bf-group-open .mpm-bf-group-content {
    display: block !important;
}

.mpm-bf-group.mpm-bf-group-open .mpm-bf-chevron {
    transform: rotate(180deg) !important;
}

/* ======================================================================
   Feature-Bereiche
   ====================================================================== */

.mpm-bf-feature {
    margin: 0 0 10px 0 !important;
    padding: 0 !important;
}

.mpm-bf-feature:last-child {
    margin-bottom: 0 !important;
}

.mpm-bf-feature-label {
    display: block !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    margin: 0 0 6px 0 !important;
    padding: 0 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

/* ======================================================================
   Slider Controls (Schriftgröße, Zeilenabstand)
   ====================================================================== */

.mpm-bf-fontsize-controls,
.mpm-bf-slider-controls {
    display: flex !important;
    gap: 0 !important;
    align-items: center !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #cccccc !important;
}

.mpm-bf-fontsize-controls button,
.mpm-bf-slider-controls button {
    width: 36px !important;
    height: 36px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-right: 1px solid #cccccc !important;
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

.mpm-bf-fontsize-controls button:last-child,
.mpm-bf-slider-controls button:last-child {
    border-right: none !important;
    border-left: 1px solid #cccccc !important;
}

.mpm-bf-fontsize-controls button:hover,
.mpm-bf-slider-controls button:hover {
    background: #000000 !important;
    color: #ffffff !important;
}

.mpm-bf-fontsize-value,
.mpm-bf-slider-value {
    flex: 1 !important;
    text-align: center !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #000000 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
}

/* ======================================================================
   Toggle Buttons
   ====================================================================== */

.mpm-bf-toggle {
    width: 100% !important;
    padding: 8px 10px !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid #cccccc !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #000000 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    text-align: left !important;
}

.mpm-bf-toggle:hover {
    background: #f0f0f0 !important;
}

.mpm-bf-toggle.mpm-bf-toggle-active {
    background: #000000 !important;
    color: #ffffff !important;
}

.mpm-bf-toggle .mpm-bf-icon {
    width: 18px !important;
    height: 18px !important;
    flex-shrink: 0 !important;
}

.mpm-bf-toggle .mpm-bf-icon,
.mpm-bf-toggle .mpm-bf-icon path {
    fill: #000000 !important;
}

.mpm-bf-toggle.mpm-bf-toggle-active .mpm-bf-icon,
.mpm-bf-toggle.mpm-bf-toggle-active .mpm-bf-icon path {
    fill: #ffffff !important;
}

.mpm-bf-toggle span {
    flex: 1 !important;
}

/* ======================================================================
   TTS Controls
   ====================================================================== */

.mpm-bf-tts-controls {
    display: flex !important;
    gap: 4px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}

.mpm-bf-tts-btn {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid #cccccc !important;
    background: #ffffff !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.mpm-bf-tts-btn:hover {
    background: #000000 !important;
}

.mpm-bf-tts-btn svg {
    width: 14px !important;
    height: 14px !important;
}

/* Play/Pause Icon Toggle - höhere Spezifität nötig */
.mpm-bf-panel .mpm-bf-tts-btn svg.mpm-bf-icon-pause {
    display: none !important;
}

.mpm-bf-panel .mpm-bf-tts-btn svg.mpm-bf-icon-play {
    display: block !important;
}

.mpm-bf-panel .mpm-bf-tts-btn.mpm-bf-playing svg.mpm-bf-icon-play {
    display: none !important;
}

.mpm-bf-panel .mpm-bf-tts-btn.mpm-bf-playing svg.mpm-bf-icon-pause {
    display: block !important;
}

.mpm-bf-tts-btn svg,
.mpm-bf-tts-btn svg path {
    fill: #000000 !important;
}

.mpm-bf-tts-btn:hover svg,
.mpm-bf-tts-btn:hover svg path {
    fill: #ffffff !important;
}

.mpm-bf-tts-speed-select {
    flex: 1 !important;
    height: 32px !important;
    padding: 0 6px !important;
    margin: 0 !important;
    border: 1px solid #cccccc !important;
    background: #ffffff !important;
    color: #000000 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    text-align: center !important;
}


/* ======================================================================
   Reset Button
   ====================================================================== */

.mpm-bf-reset {
    width: 100% !important;
    padding: 8px 12px !important;
    margin: 12px 0 0 0 !important;
    background: transparent !important;
    border: 1px dashed #999999 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #666666 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
}

.mpm-bf-reset .mpm-bf-icon {
    width: 16px !important;
    height: 16px !important;
}

.mpm-bf-reset .mpm-bf-icon,
.mpm-bf-reset .mpm-bf-icon path {
    fill: #666666 !important;
}

.mpm-bf-reset:hover {
    border-color: #000000 !important;
    color: #000000 !important;
    background: #f5f5f5 !important;
}

.mpm-bf-reset:hover .mpm-bf-icon,
.mpm-bf-reset:hover .mpm-bf-icon path {
    fill: #000000 !important;
}

/* ======================================================================
   Hoher Kontrast Modus
   Panel und Button sind KOMPLETT ausgenommen
   ====================================================================== */

body.mpm-bf-kontrast {
    background: #000000 !important;
}

body.mpm-bf-kontrast *:not(.mpm-bf-panel):not(.mpm-bf-panel *):not(.mpm-bf-button):not(.mpm-bf-button *):not(.mpm-bf-tts-highlight):not(.mpm-bf-tts-word-highlight):not(.mpm-bf-word) {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #ffffff !important;
}

body.mpm-bf-kontrast a:not(.mpm-bf-panel a):not(.mpm-bf-button) {
    color: #ffff00 !important;
}

body.mpm-bf-kontrast img:not(.mpm-bf-panel img):not(.mpm-bf-button img) {
    filter: grayscale(100%) contrast(120%) !important;
}

/* ======================================================================
   Zeilenabstand Stufen
   ====================================================================== */

body.mpm-bf-zeilenabstand-1 { line-height: 1.75 !important; }
body.mpm-bf-zeilenabstand-2 { line-height: 2 !important; }
body.mpm-bf-zeilenabstand-3 { line-height: 2.25 !important; }
body.mpm-bf-zeilenabstand-4 { line-height: 2.5 !important; }

/* Panel vom Zeilenabstand ausnehmen */
.mpm-bf-panel,
.mpm-bf-panel * {
    line-height: 1.4 !important;
}

/* ======================================================================
   Links unterstreichen
   ====================================================================== */

body.mpm-bf-links-unterstreichen a:not(.mpm-bf-panel a) {
    text-decoration: underline !important;
}

/* ======================================================================
   Animationen stoppen
   ====================================================================== */

body.mpm-bf-animationen-stoppen *:not(.mpm-bf-panel *):not(.mpm-bf-button *),
body.mpm-bf-animationen-stoppen *:not(.mpm-bf-panel *)::before,
body.mpm-bf-animationen-stoppen *:not(.mpm-bf-panel *)::after {
    animation: none !important;
    transition: none !important;
}

/* ======================================================================
   Bilder ausblenden
   ====================================================================== */

body.mpm-bf-bilder-ausblenden img:not(.mpm-bf-panel img):not(.mpm-bf-button img),
body.mpm-bf-bilder-ausblenden picture:not(.mpm-bf-panel picture),
body.mpm-bf-bilder-ausblenden svg:not(.mpm-bf-panel svg):not(.mpm-bf-button svg):not(.mpm-bf-tts-btn svg),
body.mpm-bf-bilder-ausblenden video:not(.mpm-bf-panel video),
body.mpm-bf-bilder-ausblenden [style*="background-image"]:not(.mpm-bf-panel *):not(.mpm-bf-button) {
    opacity: 0 !important;
}

/* ======================================================================
   TTS Highlight (Styles kommen per JS)
   ====================================================================== */

body.mpm-bf-kontrast .mpm-bf-tts-word-highlight {
    background-color: #ffff00 !important;
    color: #000000 !important;
}

/* Element-Modus - Hover-Styles kommen per JS (injectHighlightStyles) */

/* ======================================================================
   Graustufen-Modus (v2.0)
   Filter auf body bricht position:fixed, daher auf Kinder anwenden
   ====================================================================== */

body.mpm-bf-graustufen > *:not(.mpm-bf-panel):not(.mpm-bf-button) {
    filter: grayscale(100%) !important;
}

body.mpm-bf-graustufen img:not(.mpm-bf-panel img),
body.mpm-bf-graustufen video:not(.mpm-bf-panel video),
body.mpm-bf-graustufen picture:not(.mpm-bf-panel picture),
body.mpm-bf-graustufen svg:not(.mpm-bf-panel svg):not(.mpm-bf-button svg),
body.mpm-bf-graustufen iframe {
    filter: grayscale(100%) !important;
}

/* ======================================================================
   Farbenblind-Filter (v2.0)
   NUR auf Bilder/Medien anwenden, nicht auf Text
   ====================================================================== */

/* Protanopie (Rot-Schwäche) - nur Bilder */
body.mpm-bf-filter-protanopie img:not(.mpm-bf-panel img):not(.mpm-bf-button img),
body.mpm-bf-filter-protanopie picture:not(.mpm-bf-panel picture),
body.mpm-bf-filter-protanopie video:not(.mpm-bf-panel video),
body.mpm-bf-filter-protanopie canvas,
body.mpm-bf-filter-protanopie svg:not(.mpm-bf-panel svg):not(.mpm-bf-button svg):not(#mpm-bf-color-filters) {
    filter: url(#mpm-bf-filter-protanopie) !important;
}

/* Deuteranopie (Grün-Schwäche) - nur Bilder */
body.mpm-bf-filter-deuteranopie img:not(.mpm-bf-panel img):not(.mpm-bf-button img),
body.mpm-bf-filter-deuteranopie picture:not(.mpm-bf-panel picture),
body.mpm-bf-filter-deuteranopie video:not(.mpm-bf-panel video),
body.mpm-bf-filter-deuteranopie canvas,
body.mpm-bf-filter-deuteranopie svg:not(.mpm-bf-panel svg):not(.mpm-bf-button svg):not(#mpm-bf-color-filters) {
    filter: url(#mpm-bf-filter-deuteranopie) !important;
}

/* Tritanopie (Blau-Schwäche) - nur Bilder */
body.mpm-bf-filter-tritanopie img:not(.mpm-bf-panel img):not(.mpm-bf-button img),
body.mpm-bf-filter-tritanopie picture:not(.mpm-bf-panel picture),
body.mpm-bf-filter-tritanopie video:not(.mpm-bf-panel video),
body.mpm-bf-filter-tritanopie canvas,
body.mpm-bf-filter-tritanopie svg:not(.mpm-bf-panel svg):not(.mpm-bf-button svg):not(#mpm-bf-color-filters) {
    filter: url(#mpm-bf-filter-tritanopie) !important;
}

/* ======================================================================
   Großer Mauszeiger (v2.0)
   ====================================================================== */

body.mpm-bf-grosser-cursor,
body.mpm-bf-grosser-cursor * {
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path fill="%23000" stroke="%23fff" stroke-width="1" d="M4 4l16 8-7 2-2 7z"/></svg>') 0 0, auto !important;
}

body.mpm-bf-grosser-cursor a,
body.mpm-bf-grosser-cursor button,
body.mpm-bf-grosser-cursor [role="button"],
body.mpm-bf-grosser-cursor input[type="submit"],
body.mpm-bf-grosser-cursor input[type="button"],
body.mpm-bf-grosser-cursor .mpm-bf-panel *,
body.mpm-bf-grosser-cursor .mpm-bf-button {
    cursor: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24"><path fill="%23000" stroke="%23fff" stroke-width="1" d="M11 2v8H3v2h8v8h2v-8h8v-2h-8V2z"/></svg>') 24 24, pointer !important;
}

/* ======================================================================
   Buchstabenabstand (v2.0)
   ====================================================================== */

body.mpm-bf-buchstabenabstand {
    letter-spacing: 0.12em !important;
}

/* Panel vom Buchstabenabstand ausnehmen */
body.mpm-bf-buchstabenabstand .mpm-bf-panel,
body.mpm-bf-buchstabenabstand .mpm-bf-panel * {
    letter-spacing: normal !important;
}

/* ======================================================================
   Wortabstand (v2.0)
   ====================================================================== */

body.mpm-bf-wortabstand {
    word-spacing: 0.25em !important;
}

/* Panel vom Wortabstand ausnehmen */
body.mpm-bf-wortabstand .mpm-bf-panel,
body.mpm-bf-wortabstand .mpm-bf-panel * {
    word-spacing: normal !important;
}

/* ======================================================================
   Focus hervorheben (v2.0)
   ====================================================================== */

body.mpm-bf-fokus-hervorheben *:focus {
    outline: 3px solid #ff6600 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px rgba(255, 102, 0, 0.3) !important;
}

body.mpm-bf-fokus-hervorheben a:focus,
body.mpm-bf-fokus-hervorheben button:focus,
body.mpm-bf-fokus-hervorheben input:focus,
body.mpm-bf-fokus-hervorheben select:focus,
body.mpm-bf-fokus-hervorheben textarea:focus,
body.mpm-bf-fokus-hervorheben [tabindex]:focus {
    outline: 3px solid #ff6600 !important;
    outline-offset: 2px !important;
    box-shadow: 0 0 0 6px rgba(255, 102, 0, 0.3) !important;
}

/* ======================================================================
   Mobile Anpassungen
   ====================================================================== */

@media (max-width: 768px) {
    .mpm-bf-button {
        width: 50px !important;
        height: 50px !important;
    }

    .mpm-bf-button svg {
        width: 24px !important;
        height: 24px !important;
    }

    .mpm-bf-panel {
        width: 260px !important;
        padding: 14px !important;
        max-height: 75vh !important;
    }

    .mpm-bf-panel.mpm-bf-unten-links,
    .mpm-bf-panel.mpm-bf-unten-rechts {
        bottom: 70px !important;
    }

    .mpm-bf-panel.mpm-bf-mitte-links { left: 70px !important; }
    .mpm-bf-panel.mpm-bf-mitte-rechts { right: 70px !important; }

    .mpm-bf-group-header {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }

    .mpm-bf-group-content {
        padding: 10px !important;
    }

    .mpm-bf-toggle {
        padding: 7px 9px !important;
        font-size: 12px !important;
    }

    .mpm-bf-fontsize-controls button,
    .mpm-bf-slider-controls button {
        width: 32px !important;
        height: 32px !important;
        font-size: 14px !important;
    }

    .mpm-bf-tts-btn {
        width: 30px !important;
        height: 30px !important;
    }
}

/* ======================================================================
   Kleine Screens (< 400px)
   ====================================================================== */

@media (max-width: 400px) {
    .mpm-bf-panel {
        width: calc(100vw - 40px) !important;
        left: 20px !important;
        right: 20px !important;
    }
}