/* ============================================================================= ELRO Barriere-FREI — Barrierefreiheits-Widget · Front-End ----------------------------------------------------------------------------- Eigenständiges Widget (funktionaler & visueller Ersatz für "OneTap Pro"). Aufbau (nach Referenz-Frontend): • Zentrierter Akzent-Header (Icon, Titel, Aktionslinks) • Profile = horizontale Zeilen mit iOS-Switch • Module = gleichmäßiges 3-Spalten-Kachelraster (Icon oben, Label unten) Schriftgröße/Zeilenhöhe = breite Kachel (2 Spalten) mit +/− Stepper • Reset = breiter Button unten Feature-Zustand als Klassen auf , Prefix `bf-`. Kein Fremdcode. ========================================================================== */ :root{ --bf-size: 56px; --bf-radius: 14px; --bf-offset-x: 20px; --bf-offset-y: 20px; --bf-accent: #1e73be; --bf-accent-fg: #ffffff; --bf-accent-soft: rgba(30,115,190,.10); --bf-panel-w: 680px; --bf-z: 2147483000; } #elro-ot,#elro-ot *{box-sizing:border-box;} #elro-ot{position:fixed;z-index:var(--bf-z); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;line-height:1.45;} /* ============================ Trigger (FAB) ============================ */ #elro-ot .eot-toggle{ position:fixed;border:0!important;margin:0!important;padding:0!important; width:var(--bf-size)!important;height:var(--bf-size)!important; min-width:var(--bf-size)!important;min-height:var(--bf-size)!important;aspect-ratio:1; border-radius:var(--bf-radius)!important;background:var(--bf-accent)!important;color:var(--bf-accent-fg)!important; cursor:pointer;display:flex!important;align-items:center!important;justify-content:center!important; box-shadow:0 8px 24px rgba(0,0,0,.28)!important;transition:transform .18s ease, box-shadow .18s ease;z-index:var(--bf-z); } #elro-ot .eot-toggle:hover{transform:scale(1.06);box-shadow:0 12px 30px rgba(0,0,0,.34);} #elro-ot .eot-toggle:focus-visible{outline:3px solid #fff;outline-offset:3px;} #elro-ot .eot-toggle svg{width:60%;height:60%;display:block;} #elro-ot .eot-toggle img{width:64%;height:64%;object-fit:contain;display:block;} #elro-ot.eot-border .eot-toggle{border:3px solid rgba(255,255,255,.85);} #elro-ot[data-pos="bottom-right"] .eot-toggle{bottom:var(--bf-offset-y);right:var(--bf-offset-x);} #elro-ot[data-pos="bottom-left"] .eot-toggle{bottom:var(--bf-offset-y);left:var(--bf-offset-x);} #elro-ot[data-pos="top-right"] .eot-toggle{top:var(--bf-offset-y);right:var(--bf-offset-x);} #elro-ot[data-pos="top-left"] .eot-toggle{top:var(--bf-offset-y);left:var(--bf-offset-x);} #elro-ot[data-pos="middle-right"] .eot-toggle{top:50%;right:var(--bf-offset-x);transform:translateY(-50%);} #elro-ot[data-pos="middle-left"] .eot-toggle{top:50%;left:var(--bf-offset-x);transform:translateY(-50%);} #elro-ot[data-pos="middle-right"] .eot-toggle:hover,#elro-ot[data-pos="middle-left"] .eot-toggle:hover{transform:translateY(-50%) scale(1.06);} @media (max-width:1024px){#elro-ot.eot-hide-tablet .eot-toggle{display:none;}} @media (max-width:600px){#elro-ot.eot-hide-mobile .eot-toggle{display:none;}} @media (min-width:1025px){#elro-ot.eot-hide-desktop .eot-toggle{display:none;}} /* ============================ Panel ============================ */ #elro-ot .eot-panel{ position:fixed;width:min(var(--bf-panel-w),calc(100vw - 24px));max-height:min(88vh,900px); background:#fff!important;color:#1c1c1e!important;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.30); display:flex;flex-direction:column;overflow:hidden;opacity:0;transform:translateY(14px) scale(.98); pointer-events:none;transition:opacity .2s ease, transform .2s ease;z-index:var(--bf-z); } #elro-ot.eot-open .eot-panel{opacity:1;transform:none;pointer-events:auto;} #elro-ot[data-pos$="-right"] .eot-panel{right:var(--bf-offset-x);} #elro-ot[data-pos$="-left"] .eot-panel{left:var(--bf-offset-x);} #elro-ot[data-pos^="bottom"] .eot-panel{bottom:calc(var(--bf-offset-y) + var(--bf-size) + 14px);} #elro-ot[data-pos^="top"] .eot-panel{top:calc(var(--bf-offset-y) + var(--bf-size) + 14px);} #elro-ot[data-pos^="middle"] .eot-panel{top:50%;transform:translateY(-50%);} #elro-ot[data-pos="middle-right"] .eot-panel{right:calc(var(--bf-offset-x) + var(--bf-size) + 14px);} #elro-ot[data-pos="middle-left"] .eot-panel{left:calc(var(--bf-offset-x) + var(--bf-size) + 14px);} #elro-ot[data-pos^="middle"].eot-open .eot-panel{transform:translateY(-50%);} /* Header — zentriert */ #elro-ot .eot-head{ background:var(--bf-accent)!important;color:var(--bf-accent-fg)!important;flex:0 0 auto; padding:22px 20px 18px;text-align:center;position:relative; } #elro-ot .eot-hicon{display:inline-flex;align-items:center;justify-content:center;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.18)!important;margin-bottom:8px;} #elro-ot .eot-hicon svg{width:28px;height:28px;} #elro-ot .eot-title{font-size:21px;font-weight:800;margin:0;color:inherit!important;line-height:1.2;} #elro-ot .eot-headlinks{margin-top:5px;font-size:13px;color:inherit!important;opacity:.95;} #elro-ot .eot-headlinks a,#elro-ot .eot-headlinks button{ color:inherit!important;background:none!important;border:0;padding:0;cursor:pointer;font:inherit;text-decoration:underline;opacity:.92; } #elro-ot .eot-headlinks a:hover,#elro-ot .eot-headlinks button:hover{opacity:1;} #elro-ot .eot-headlinks .sep{margin:0 8px;opacity:.7;text-decoration:none;} #elro-ot .eot-lang-btn{position:absolute;top:16px;right:16px;background:rgba(255,255,255,.2)!important;color:inherit!important;border:0;height:30px;padding:0 10px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:700;} #elro-ot .eot-langs{position:absolute;top:14px;right:16px;} #elro-ot .eot-lang-list{position:absolute;top:36px;right:0;background:#fff;border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.25);padding:6px;min-width:150px;display:none;z-index:2;} #elro-ot .eot-lang-list.eot-open{display:block;} #elro-ot .eot-lang-list button{display:block;width:100%;text-align:left;background:transparent!important;color:#333!important;border:0;padding:8px 10px;border-radius:7px;cursor:pointer;font-size:13px;} #elro-ot .eot-lang-list button:hover{background:#f2f4f6!important;} /* Erklärungs-Modal (generierte Barrierefreiheitserklärung) */ #elro-ot .eot-stmt{position:absolute;inset:0;z-index:3;background:#fff!important;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;} #elro-ot .eot-stmt[hidden]{display:none;} #elro-ot .eot-stmt-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px;padding:14px 18px;background:var(--bf-accent)!important;color:var(--bf-accent-fg)!important;font-size:15px;} #elro-ot .eot-stmt-head button{background:rgba(255,255,255,.2)!important;color:inherit!important;border:0!important;width:32px!important;height:32px!important;border-radius:9px!important;cursor:pointer;display:flex!important;align-items:center!important;justify-content:center!important;padding:0!important;} #elro-ot .eot-stmt-head button svg{width:15px;height:15px;} #elro-ot .eot-stmt-body{overflow-y:auto;padding:16px 20px;font-size:13.5px;line-height:1.6;color:#2a2f36!important;} #elro-ot .eot-stmt-body h1,#elro-ot .eot-stmt-body h2,#elro-ot .eot-stmt-body h3{font-size:16px;font-weight:800;color:#1c1c1e!important;margin:14px 0 6px;} #elro-ot .eot-stmt-body p,#elro-ot .eot-stmt-body li{margin:0 0 8px;color:#2a2f36!important;} #elro-ot .eot-stmt-body ul{padding-left:18px;margin:0 0 10px;} /* Body */ #elro-ot .eot-body{overflow-y:auto;padding:4px 16px 12px;flex:1 1 auto;-webkit-overflow-scrolling:touch;background:#eef1f4;} #elro-ot .eot-body::-webkit-scrollbar{width:9px;} #elro-ot .eot-body::-webkit-scrollbar-thumb{background:#c9ced4;border-radius:9px;} /* Section = weiße Karte */ #elro-ot .eot-card{background:#fff!important;border-radius:14px;padding:14px 16px 16px;margin-top:12px;} #elro-ot .eot-section-title{font-size:15px;font-weight:800;color:#1c1c1e!important;margin:0 0 12px;} /* ---- Profile: horizontale Zeilen mit Switch ---- Alle Layout-Props mit !important gehärtet — Theme-CSS (Elementor/Hello u. a.) darf hier NICHTS überschreiben (Ursache der Inline-/Oval-Defekte auf Live-Sites). */ #elro-ot .eot-prow{ display:flex!important;align-items:center!important;gap:14px!important;width:100%!important; min-height:0!important;margin:0!important;padding:12px 2px!important; border:0!important;border-top:1px solid #eef0f2!important;border-radius:0!important; background:transparent!important;box-shadow:none!important;cursor:pointer;text-align:left!important; font-family:inherit!important; } #elro-ot .eot-prow:first-of-type{border-top:0!important;} #elro-ot .eot-prow-ico{display:block!important;width:26px!important;height:26px!important;flex:0 0 26px!important;color:#5b6472!important;} #elro-ot .eot-prow-ico svg{width:100%!important;height:100%!important;display:block!important;} #elro-ot .eot-prow.eot-is-on .eot-prow-ico{color:var(--bf-accent)!important;} #elro-ot .eot-prow-txt{display:block!important;flex:1 1 auto!important;min-width:0!important;} #elro-ot .eot-prow-title{display:block!important;font-size:15px!important;font-weight:600!important;color:#1c1c1e!important;line-height:1.3!important;margin:0!important;} #elro-ot .eot-prow-desc{display:block!important;font-size:12.5px!important;font-weight:400!important;color:#8a919b!important;line-height:1.35!important;margin:2px 0 0!important;} /* iOS switch — feste Geometrie, niemals oval */ #elro-ot .eot-switch{ position:relative!important;display:inline-block!important; width:46px!important;min-width:46px!important;max-width:46px!important; height:27px!important;min-height:27px!important;max-height:27px!important; flex:0 0 46px!important;margin:0!important;padding:0!important; } #elro-ot .eot-switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;} #elro-ot .eot-track{position:absolute!important;inset:0!important;background:#d2d6db!important;border-radius:27px!important;transition:background .15s;} #elro-ot .eot-track::before{ content:"";position:absolute;top:3px;left:3px; width:21px!important;height:21px!important;aspect-ratio:1; background:#fff!important;border-radius:50%!important; box-shadow:0 1px 3px rgba(0,0,0,.25);transition:transform .15s; } #elro-ot .eot-is-on .eot-track{background:var(--bf-accent)!important;} #elro-ot .eot-is-on .eot-track::before{transform:translateX(19px);} /* ---- Module: 3-Spalten-Kachelraster (gleichmäßig, nichts bricht mitten im Wort) ---- */ #elro-ot .eot-grid{display:grid!important;grid-template-columns:repeat(3,1fr)!important;grid-auto-rows:1fr!important;gap:10px!important;} #elro-ot .eot-tile{ grid-column:span 1;position:relative!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:9px!important; min-height:112px!important;margin:0!important;padding:14px 8px!important; border:1.5px solid #e7eaee!important;border-radius:12px!important;background:#f7f8fa!important; box-shadow:none!important;cursor:pointer;text-align:center!important;font-family:inherit!important; transition:border-color .12s,background .12s,box-shadow .12s; } #elro-ot .eot-tile:hover{border-color:var(--bf-accent)!important;background:#fff!important;} /* Icon im weißen Kreis (wie Referenz) */ #elro-ot .eot-tile-ico{ display:flex!important;align-items:center!important;justify-content:center!important; width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;aspect-ratio:1; border-radius:50%!important;background:#fff!important;box-shadow:0 1px 3px rgba(20,25,35,.10)!important; color:#2b323d!important; } #elro-ot .eot-tile-ico svg{width:22px!important;height:22px!important;display:block!important;} #elro-ot .eot-tile-label{ display:block!important;font-size:13px!important;font-weight:600!important;color:#3a414c!important;line-height:1.25!important;margin:0!important; hyphens:none!important;-webkit-hyphens:none!important;overflow-wrap:normal!important;word-break:keep-all!important; } #elro-ot .eot-tile.eot-is-on{border-color:var(--bf-accent)!important;background:var(--bf-accent-soft)!important;box-shadow:inset 0 0 0 1px var(--bf-accent)!important;} #elro-ot .eot-tile.eot-is-on .eot-tile-ico{background:var(--bf-accent)!important;color:#fff!important;} #elro-ot .eot-tile.eot-is-on .eot-tile-label{color:var(--bf-accent)!important;} /* Level-Punkte auf Cycle-Kacheln — absolut positioniert (kein Höhenbeitrag, alle Kacheln bleiben exakt gleich hoch) */ #elro-ot .eot-tile .eot-dots{position:absolute!important;bottom:9px;left:50%;transform:translateX(-50%);display:flex;gap:4px;height:6px;} #elro-ot .eot-tile .eot-dots i{width:6px;height:6px;border-radius:50%;background:#cfd4da;} #elro-ot .eot-tile.eot-lvl-1 .eot-dots i:nth-child(1), #elro-ot .eot-tile.eot-lvl-2 .eot-dots i:nth-child(-n+2), #elro-ot .eot-tile.eot-lvl-3 .eot-dots i{background:var(--bf-accent);} /* Breite Stepper-Kachel (Schriftgröße/Zeilenhöhe) */ #elro-ot .eot-tile-wide{grid-column:span 2;flex-direction:column!important;gap:12px!important;justify-content:center!important;} #elro-ot .eot-tile-wide .eot-tile-label{font-size:14px!important;font-weight:700!important;color:#1c1c1e!important;} #elro-ot .eot-stepper{display:flex!important;align-items:center!important;justify-content:center!important;gap:14px!important;width:100%!important;} /* +/− Buttons — feste Kreise, niemals oval */ #elro-ot .eot-stepper button{ width:38px!important;min-width:38px!important;max-width:38px!important; height:38px!important;min-height:38px!important;max-height:38px!important;aspect-ratio:1; flex:0 0 38px!important;margin:0!important;padding:0!important; border-radius:50%!important;border:0!important;background:var(--bf-accent)!important;color:#fff!important; font-size:21px!important;font-weight:700!important;line-height:1!important;font-family:inherit!important; cursor:pointer;display:flex!important;align-items:center!important;justify-content:center!important; box-shadow:none!important;transition:filter .12s; } #elro-ot .eot-stepper button:hover{filter:brightness(1.1);} #elro-ot .eot-stepper .eot-step-val{min-width:96px;text-align:center!important;font-size:14px!important;font-weight:600!important;color:#3a414c!important;} /* Reset-Button (breit, unten) */ #elro-ot .eot-reset{ display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important; width:100%!important;margin:14px 0 4px!important;padding:14px!important; border:0!important;border-radius:12px!important;background:var(--bf-accent)!important;color:#fff!important; font-size:15px!important;font-weight:700!important;font-family:inherit!important;line-height:1.2!important; box-shadow:none!important;cursor:pointer;transition:filter .12s; } #elro-ot .eot-reset:hover{filter:brightness(1.08);} #elro-ot .eot-reset svg{width:18px;height:18px;} #elro-ot .eot-foot{text-align:center;font-size:11px;color:#9aa1ab!important;padding:6px 0 8px;} #elro-ot .eot-foot strong{color:#7a828d!important;} #elro-ot .eot-tile:focus-visible,#elro-ot .eot-prow:focus-visible,#elro-ot .eot-stepper button:focus-visible{outline:2px solid var(--bf-accent);outline-offset:2px;} @media (max-width:520px){ #elro-ot .eot-grid{grid-template-columns:repeat(2,1fr);} #elro-ot .eot-tile-wide{grid-column:span 2;} } /* ============================================================================= Accessibility feature effects (auf , Prefix bf-) ========================================================================== */ html.bf-readable body p,html.bf-readable body li,html.bf-readable body a,html.bf-readable body span,html.bf-readable body label,html.bf-readable body td,html.bf-readable body th,html.bf-readable body h1,html.bf-readable body h2,html.bf-readable body h3,html.bf-readable body h4,html.bf-readable body h5,html.bf-readable body h6,html.bf-readable body div,html.bf-readable body button,html.bf-readable body input,html.bf-readable body blockquote{font-family:Verdana,"Segoe UI",Tahoma,Arial,sans-serif!important;} html.bf-dyslexic body p,html.bf-dyslexic body li,html.bf-dyslexic body a,html.bf-dyslexic body span,html.bf-dyslexic body label,html.bf-dyslexic body td,html.bf-dyslexic body th,html.bf-dyslexic body h1,html.bf-dyslexic body h2,html.bf-dyslexic body h3,html.bf-dyslexic body h4,html.bf-dyslexic body h5,html.bf-dyslexic body h6,html.bf-dyslexic body div{font-family:"OpenDyslexic","Comic Sans MS","Comic Neue","Trebuchet MS",sans-serif!important;letter-spacing:.03em!important;} html.bf-bold body p,html.bf-bold body li,html.bf-bold body a,html.bf-bold body span,html.bf-bold body h1,html.bf-bold body h2,html.bf-bold body h3,html.bf-bold body h4,html.bf-bold body h5,html.bf-bold body h6,html.bf-bold body td,html.bf-bold body div{font-weight:700!important;} html.bf-ls-1 body p,html.bf-ls-1 body li,html.bf-ls-1 body a,html.bf-ls-1 body span,html.bf-ls-1 body h1,html.bf-ls-1 body h2,html.bf-ls-1 body h3,html.bf-ls-1 body h4,html.bf-ls-1 body h5,html.bf-ls-1 body h6{letter-spacing:.05em!important;} html.bf-ls-2 body p,html.bf-ls-2 body li,html.bf-ls-2 body a,html.bf-ls-2 body span,html.bf-ls-2 body h1,html.bf-ls-2 body h2,html.bf-ls-2 body h3,html.bf-ls-2 body h4,html.bf-ls-2 body h5,html.bf-ls-2 body h6{letter-spacing:.12em!important;} html.bf-ls-3 body p,html.bf-ls-3 body li,html.bf-ls-3 body a,html.bf-ls-3 body span,html.bf-ls-3 body h1,html.bf-ls-3 body h2,html.bf-ls-3 body h3,html.bf-ls-3 body h4,html.bf-ls-3 body h5,html.bf-ls-3 body h6{letter-spacing:.2em!important;} html.bf-lh-1 body p,html.bf-lh-1 body li,html.bf-lh-1 body a,html.bf-lh-1 body span,html.bf-lh-1 body h1,html.bf-lh-1 body h2,html.bf-lh-1 body h3,html.bf-lh-1 body h4,html.bf-lh-1 body h5,html.bf-lh-1 body h6{line-height:1.6!important;} html.bf-lh-2 body p,html.bf-lh-2 body li,html.bf-lh-2 body a,html.bf-lh-2 body span,html.bf-lh-2 body h1,html.bf-lh-2 body h2,html.bf-lh-2 body h3,html.bf-lh-2 body h4,html.bf-lh-2 body h5,html.bf-lh-2 body h6{line-height:2!important;} html.bf-lh-3 body p,html.bf-lh-3 body li,html.bf-lh-3 body a,html.bf-lh-3 body span,html.bf-lh-3 body h1,html.bf-lh-3 body h2,html.bf-lh-3 body h3,html.bf-lh-3 body h4,html.bf-lh-3 body h5,html.bf-lh-3 body h6{line-height:2.5!important;} html.bf-align-1 body p,html.bf-align-1 body li,html.bf-align-1 body h1,html.bf-align-1 body h2,html.bf-align-1 body h3,html.bf-align-1 body h4,html.bf-align-1 body h5,html.bf-align-1 body h6,html.bf-align-1 body td{text-align:left!important;} html.bf-align-2 body p,html.bf-align-2 body li,html.bf-align-2 body h1,html.bf-align-2 body h2,html.bf-align-2 body h3,html.bf-align-2 body h4,html.bf-align-2 body h5,html.bf-align-2 body h6,html.bf-align-2 body td{text-align:center!important;} html.bf-align-3 body p,html.bf-align-3 body li,html.bf-align-3 body h1,html.bf-align-3 body h2,html.bf-align-3 body h3,html.bf-align-3 body h4,html.bf-align-3 body h5,html.bf-align-3 body h6,html.bf-align-3 body td{text-align:right!important;} html.bf-hl-links body a{outline:2px solid #1a56db!important;outline-offset:2px!important;text-decoration:underline!important;background:rgba(26,86,219,.06)!important;} html.bf-hl-titles body h1,html.bf-hl-titles body h2,html.bf-hl-titles body h3,html.bf-hl-titles body h4,html.bf-hl-titles body h5,html.bf-hl-titles body h6{outline:2px dashed #ff8a00!important;outline-offset:3px!important;background:rgba(255,138,0,.06)!important;} /* ----------------------------------------------------------------------------- Kontrast/Farbe — Filter-Technik (Lesbarkeit bleibt IMMER erhalten) -------------------------------------------------------------------------- */ html.bf-c-dark,html.bf-c-light,html.bf-c-high,html.bf-mono, html.bf-sat-1,html.bf-sat-2,html.bf-sat-3{filter:var(--bf-cfilter)!important;} html.bf-c-dark{--bf-cfilter:invert(1) hue-rotate(180deg);background:#fff!important;} html.bf-c-dark img,html.bf-c-dark video,html.bf-c-dark picture,html.bf-c-dark canvas, html.bf-c-dark iframe,html.bf-c-dark [style*="background-image"],html.bf-c-dark #elro-ot{filter:invert(1) hue-rotate(180deg)!important;} html.bf-c-light{--bf-cfilter:brightness(1.08) contrast(1.14);} html.bf-c-high{--bf-cfilter:contrast(1.55) saturate(1.15);} html.bf-mono{--bf-cfilter:grayscale(1);} html.bf-sat-1{--bf-cfilter:saturate(1.5);} html.bf-sat-2{--bf-cfilter:saturate(2);} html.bf-sat-3{--bf-cfilter:saturate(2.8);} html.bf-c-dark.bf-sat-1{--bf-cfilter:invert(1) hue-rotate(180deg) saturate(1.5);} html.bf-c-dark.bf-sat-2{--bf-cfilter:invert(1) hue-rotate(180deg) saturate(2);} html.bf-c-dark.bf-sat-3{--bf-cfilter:invert(1) hue-rotate(180deg) saturate(2.8);} /* Bilder ausblenden */ html.bf-hide-img body img:not(#elro-ot img),html.bf-hide-img body picture,html.bf-hide-img body video,html.bf-hide-img body svg:not(#elro-ot svg),html.bf-hide-img body canvas{visibility:hidden!important;} html.bf-hide-img #elro-ot,html.bf-hide-img #elro-ot *{visibility:visible!important;} /* Animationen stoppen */ html.bf-stop-anim body *:not(#elro-ot):not(#elro-ot *){animation:none!important;transition:none!important;scroll-behavior:auto!important;} /* Hover / Tastatur-Fokus */ html.bf-hover body a:hover,html.bf-hover body button:hover,html.bf-hover body input:hover,html.bf-hover body [role="button"]:hover{outline:3px solid #1a56db!important;outline-offset:2px!important;background:rgba(26,86,219,.08)!important;} html.bf-kbd body a:focus,html.bf-kbd body button:focus,html.bf-kbd body input:focus,html.bf-kbd body select:focus,html.bf-kbd body textarea:focus,html.bf-kbd body [tabindex]:focus{outline:3px solid #ff8a00!important;outline-offset:2px!important;} /* Große Cursor */ html.bf-cursor,html.bf-cursor body *{cursor:url('data:image/svg+xml;utf8,') 4 3,auto!important;} /* JS-Overlays */ #bf-reading-line{position:fixed;left:0;width:100%;height:0;border-top:6px solid rgba(30,115,190,.9);box-shadow:0 0 0 2px rgba(255,255,255,.7);pointer-events:none;z-index:var(--bf-z);display:none;} #bf-mask-top,#bf-mask-bottom{position:fixed;left:0;width:100%;background:rgba(0,0,0,.55);pointer-events:none;z-index:calc(var(--bf-z) - 1);display:none;} #bf-magnifier{position:fixed;pointer-events:none;z-index:var(--bf-z);background:#fff;color:#111;border:2px solid var(--bf-accent);border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.3);padding:12px 16px;max-width:420px;font-size:24px;line-height:1.35;display:none;} .bf-tts-active{background:#ffe14d!important;color:#000!important;box-shadow:0 0 0 3px #ffe14d!important;} @media (prefers-reduced-motion:reduce){#elro-ot .eot-toggle,#elro-ot .eot-panel{transition:none;}}