/* AlgoPush Barrierefreiheit v2.3.0 */

/* === RESET: prevent any theme interference === */
.apb-skip-link,.apb-toggle-btn,.apb-panel,.apb-panel *,.apb-color-overlay{all:revert;box-sizing:border-box}

/* === Skip Link === */
.apb-skip-link{position:fixed!important;top:-60px!important;left:50%!important;transform:translateX(-50%)!important;z-index:2000000!important;background:#1a56db!important;color:#fff!important;padding:12px 24px!important;font-size:16px!important;font-weight:600!important;text-decoration:none!important;border-radius:0 0 8px 8px!important;transition:top .2s!important}
.apb-skip-link:focus{top:0!important;outline:3px solid #fbbf24!important}

/* === SR Only === */
.apb-sr-only{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

/* === Toggle Button (RIGHT BOTTOM, always visible) === */
.apb-toggle-btn{
    position:fixed!important;bottom:28px!important;right:28px!important;left:auto!important;top:auto!important;
    z-index:2000001!important;
    width:60px!important;height:60px!important;min-width:60px!important;min-height:60px!important;
    border-radius:50%!important;background:#1a56db!important;color:#fff!important;
    border:3px solid #fff!important;cursor:pointer!important;
    display:flex!important;align-items:center!important;justify-content:center!important;
    box-shadow:0 4px 20px rgba(0,0,0,.35)!important;
    padding:0!important;margin:0!important;
    opacity:1!important;visibility:visible!important;pointer-events:auto!important;
    transition:transform .2s,box-shadow .2s!important;
    animation:apb-pulse 2s ease-in-out 3!important;
}
.apb-toggle-btn:hover{transform:scale(1.1)!important;box-shadow:0 6px 28px rgba(0,0,0,.45)!important}
.apb-toggle-btn:focus-visible{outline:3px solid #fbbf24!important;outline-offset:4px!important}
.apb-toggle-btn svg{width:30px!important;height:30px!important;display:block!important;fill:currentColor!important}

@keyframes apb-pulse{
    0%,100%{box-shadow:0 4px 20px rgba(0,0,0,.35)}
    50%{box-shadow:0 0 0 12px rgba(26,86,219,.3),0 4px 20px rgba(0,0,0,.35)}
}

/* === Color Overlay (for dark/contrast modes) === */
.apb-color-overlay{
    position:fixed!important;top:0!important;left:0!important;right:0!important;bottom:0!important;
    z-index:999990!important;pointer-events:none!important;
    display:none!important;
    mix-blend-mode:multiply!important;
}

/* === Panel === */
.apb-panel{
    position:fixed!important;bottom:100px!important;right:28px!important;left:auto!important;top:auto!important;
    z-index:2000002!important;
    width:370px!important;max-height:calc(100vh - 130px)!important;
    background:#fff!important;color:#333!important;
    border-radius:16px!important;
    box-shadow:0 12px 48px rgba(0,0,0,.25)!important;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif!important;
    overflow:hidden!important;
    padding:0!important;margin:0!important;
    border:none!important;
}
.apb-panel.apb-open{display:flex!important;flex-direction:column!important;animation:apb-fadein .25s ease!important}
@keyframes apb-fadein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.apb-panel-inner{display:flex!important;flex-direction:column!important;max-height:calc(100vh - 130px)!important;overflow:hidden!important}

/* Header */
.apb-header{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:14px 18px!important;background:#f0f4ff!important;border-bottom:1px solid #e0e5f0!important;flex-shrink:0!important;border-radius:16px 16px 0 0!important}
.apb-title{font-size:16px!important;font-weight:700!important;color:#1e293b!important;margin:0!important;padding:0!important;display:flex!important;align-items:center!important;gap:8px!important;background:transparent!important;border:none!important}
.apb-title svg{width:22px!important;height:22px!important;color:#1a56db!important;fill:#1a56db!important}
.apb-close-btn{width:32px!important;height:32px!important;border-radius:8px!important;border:none!important;background:transparent!important;color:#64748b!important;cursor:pointer!important;font-size:18px!important;font-weight:700!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;line-height:1!important}
.apb-close-btn:hover{background:#e0e5f0!important;color:#1e293b!important}

/* Content */
.apb-content{overflow-y:auto!important;padding:6px 16px 10px!important;flex:1!important;min-height:0!important;background:#fff!important}
.apb-section{padding:12px 0!important;border-bottom:1px solid #f0f2f5!important;background:transparent!important}
.apb-section:last-child{border-bottom:none!important}
.apb-section-title{font-size:11px!important;font-weight:700!important;text-transform:uppercase!important;letter-spacing:.08em!important;color:#8892a4!important;margin:0 0 8px!important;padding:0!important;background:transparent!important;border:none!important}

/* Grids */
.apb-grid{display:grid!important;gap:6px!important}
.apb-grid-2{grid-template-columns:1fr 1fr!important}
.apb-grid-3{grid-template-columns:1fr 1fr 1fr!important}

/* Buttons */
.apb-btn{border:none!important;cursor:pointer!important;font-family:inherit!important;transition:all .15s!important;background:transparent!important}
.apb-btn:focus-visible{outline:3px solid #1a56db!important;outline-offset:2px!important}
.apb-btn-feature{
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;
    gap:3px!important;padding:8px 4px!important;
    background:#f7f8fa!important;border:2px solid #e4e7ec!important;border-radius:10px!important;
    color:#4a5568!important;font-size:10px!important;font-weight:600!important;text-align:center!important;
    min-height:58px!important;line-height:1.2!important;
}
.apb-btn-feature:hover{background:#eef2ff!important;border-color:#a5b4fc!important;color:#3730a3!important}
.apb-btn-feature[aria-pressed="true"]{background:#1a56db!important;border-color:#1a56db!important;color:#fff!important}
.apb-btn-feature[aria-pressed="true"]:hover{background:#1648b8!important;border-color:#1648b8!important;color:#fff!important}
.apb-icon{font-size:18px!important;line-height:1!important;display:block!important}
.apb-wide{grid-column:1/-1!important}

/* Font size */
.apb-font-size-controls{display:flex!important;align-items:center!important;justify-content:center!important;gap:16px!important}
.apb-btn-icon{width:42px!important;height:42px!important;border-radius:10px!important;background:#f7f8fa!important;border:2px solid #e4e7ec!important;color:#4a5568!important;font-size:15px!important;font-weight:700!important;display:flex!important;align-items:center!important;justify-content:center!important}
.apb-btn-icon:hover{background:#eef2ff!important;border-color:#a5b4fc!important;color:#3730a3!important}
.apb-font-size-display{font-size:18px!important;font-weight:700!important;color:#1e293b!important;min-width:50px!important;text-align:center!important}

/* TTS */
.apb-tts-buttons{display:grid!important;grid-template-columns:1fr 1fr!important;gap:6px!important}
.apb-speed-control{display:flex!important;align-items:center!important;gap:8px!important;padding:8px 10px!important;background:#f7f8fa!important;border-radius:8px!important;margin-top:8px!important}
.apb-speed-control label{font-size:11px!important;font-weight:600!important;color:#8892a4!important;white-space:nowrap!important}
.apb-speed-control input[type="range"]{flex:1!important;height:4px!important;-webkit-appearance:none!important;appearance:none!important;background:#e4e7ec!important;border-radius:2px!important;outline:none!important;cursor:pointer!important;border:none!important;padding:0!important;margin:0!important}
.apb-speed-control input[type="range"]::-webkit-slider-thumb{-webkit-appearance:none!important;width:16px!important;height:16px!important;border-radius:50%!important;background:#1a56db!important;border:2px solid #fff!important;box-shadow:0 1px 3px rgba(0,0,0,.2)!important}
#apb-speed-display{font-size:12px!important;font-weight:700!important;color:#1e293b!important;min-width:30px!important;text-align:right!important}

/* Footer */
.apb-footer{padding:10px 16px!important;border-top:1px solid #e0e5f0!important;background:#f0f4ff!important;border-radius:0 0 16px 16px!important;flex-shrink:0!important}
.apb-btn-reset{width:100%!important;padding:10px!important;border-radius:10px!important;background:#fef2f2!important;border:2px solid #fecaca!important;color:#dc2626!important;font-size:13px!important;font-weight:700!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:6px!important}
.apb-btn-reset:hover{background:#fee2e2!important;border-color:#f87171!important}

/* Reading Ruler */
#apb-reading-ruler{position:fixed!important;left:0!important;width:100%!important;height:12px!important;background:rgba(26,86,219,.15)!important;border-top:2px solid rgba(26,86,219,.5)!important;border-bottom:2px solid rgba(26,86,219,.5)!important;pointer-events:none!important;z-index:999990!important;display:none}

/* ============================================================
   COLOR/CONTRAST MODES
   
   NEW APPROACH: Instead of trying to override every element,
   we apply a CSS filter to the <body> element and then 
   un-filter the panel/button. This works reliably with 
   Elementor's deep DOM structures.
   ============================================================ */

/* --- HIGH CONTRAST --- */
html.apb-high-contrast body {
    filter: contrast(1.8) brightness(0.85) !important;
}
html.apb-high-contrast .apb-panel,
html.apb-high-contrast .apb-toggle-btn {
    filter: contrast(0.56) brightness(1.18) !important; /* inverse to neutralize */
}

/* --- DARK MODE --- */
html.apb-dark-mode body {
    filter: invert(0.88) hue-rotate(180deg) !important;
}
/* Re-invert images, videos, and our panel so they look normal */
html.apb-dark-mode img,
html.apb-dark-mode video,
html.apb-dark-mode canvas,
html.apb-dark-mode iframe,
html.apb-dark-mode picture,
html.apb-dark-mode [style*="background-image"],
html.apb-dark-mode svg:not(.apb-panel svg):not(.apb-toggle-btn svg) {
    filter: invert(1) hue-rotate(180deg) !important;
}
html.apb-dark-mode .apb-panel,
html.apb-dark-mode .apb-toggle-btn {
    filter: invert(1.136) hue-rotate(180deg) !important; /* inverse of 0.88 invert */
}

/* --- LIGHT MODE --- */
html.apb-light-mode body {
    filter: brightness(1.15) contrast(1.05) !important;
}
html.apb-light-mode .apb-panel,
html.apb-light-mode .apb-toggle-btn {
    filter: brightness(0.87) contrast(0.95) !important;
}

/* --- INVERTED --- */
html.apb-inverted body {
    filter: invert(1) hue-rotate(180deg) !important;
}
html.apb-inverted img,
html.apb-inverted video,
html.apb-inverted canvas,
html.apb-inverted iframe,
html.apb-inverted picture {
    filter: invert(1) hue-rotate(180deg) !important;
}
html.apb-inverted .apb-panel,
html.apb-inverted .apb-toggle-btn {
    filter: invert(1) hue-rotate(180deg) !important;
}

/* --- GRAYSCALE --- */
html.apb-grayscale body {
    filter: grayscale(1) !important;
}
html.apb-grayscale .apb-panel,
html.apb-grayscale .apb-toggle-btn {
    filter: grayscale(0) !important;
}

/* --- SATURATION --- */
html.apb-saturated body {
    filter: saturate(2.5) !important;
}
html.apb-saturated .apb-panel,
html.apb-saturated .apb-toggle-btn {
    filter: saturate(0.4) !important;
}

/* ============================================================
   TEXT & READABILITY
   ============================================================ */
html.apb-letter-spacing *:not([class*="apb-"]):not([id*="apb-"]) { letter-spacing:.12em!important }
html.apb-word-spacing *:not([class*="apb-"]):not([id*="apb-"]) { word-spacing:.25em!important }
html.apb-line-height *:not([class*="apb-"]):not([id*="apb-"]) { line-height:2!important }
html.apb-dyslexia-font *:not([class*="apb-"]):not([id*="apb-"]) { font-family:"OpenDyslexic","Comic Sans MS",cursive!important }
html.apb-text-left *:not([class*="apb-"]):not([id*="apb-"]) { text-align:left!important }

/* ============================================================
   NAVIGATION & FOCUS
   ============================================================ */
html.apb-focus-outline *:focus{outline:3px solid #ff6600!important;outline-offset:3px!important}
html.apb-highlight-links a:not([class*="apb-"]){outline:2px solid #1a56db!important;outline-offset:2px!important;text-decoration:underline!important}
html.apb-big-cursor,html.apb-big-cursor *{cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 48 48'%3E%3Cpath d='M8 4l28 20H20l8 16-4 2-8-16-8 10z' fill='%23000' stroke='%23fff' stroke-width='2'/%3E%3C/svg%3E") 4 4,auto!important}
html.apb-stop-animations *,html.apb-stop-animations *::before,html.apb-stop-animations *::after{animation-duration:0s!important;transition-duration:0s!important;scroll-behavior:auto!important}
html.apb-stop-animations .apb-panel,html.apb-stop-animations .apb-panel *,html.apb-stop-animations .apb-toggle-btn{transition-duration:.15s!important}
html.apb-hide-images img:not([class*="apb-"]),html.apb-hide-images video,html.apb-hide-images svg:not([class*="apb-"]):not(.apb-toggle-btn svg){opacity:.03!important;visibility:hidden!important}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:440px){
    .apb-panel{right:8px!important;left:8px!important;width:auto!important;bottom:96px!important}
    .apb-toggle-btn{bottom:20px!important;right:20px!important;width:52px!important;height:52px!important;min-width:52px!important;min-height:52px!important}
    .apb-grid-3{grid-template-columns:1fr 1fr!important}
}
