/* BF Barrierefrei – Frontend */ .bf-sr{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* ---------- Skip-Link ---------- */ .bf-skip{position:fixed;top:-100px;left:12px;z-index:100000;padding:12px 20px;background:#0e1b33;color:#fff;font:600 16px/1.2 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;text-decoration:underline;border-radius:0 0 12px 12px} .bf-skip:focus{top:0} /* ---------- Design-Tokens ---------- */ .bf-toolbar{ --bf-ink:#0e1b33; --bf-muted:#4a5470; --bf-paper:#ffffff; --bf-surface:#f4f6fb; --bf-surface-2:#e9edf6; --bf-track:#6b7592; --bf-accent:#3a3ae8; --bf-on-accent:#ffffff; --bf-ring:#ffbf00; --bf-shadow:0 2px 4px rgba(14,27,51,.08),0 24px 48px -8px rgba(14,27,51,.30); } .bf-toolbar .bf-c-contrast{--fg:#3a3ae8;--bg:#e7e7fd} .bf-toolbar .bf-c-links{--fg:#0b6b63;--bg:#d9f2ee} .bf-toolbar .bf-c-font{--fg:#8a4b00;--bg:#fcebd2} .bf-toolbar .bf-c-spacing{--fg:#b01e55;--bg:#fde2eb} .bf-toolbar .bf-c-motion{--fg:#1d6b2f;--bg:#dcf2e1} @media (prefers-color-scheme:dark){ .bf-toolbar{ --bf-ink:#eef1fa; --bf-muted:#b4bdd6; --bf-paper:#121a2e; --bf-surface:#1b2540; --bf-surface-2:#243155; --bf-track:#8a96b8; --bf-accent:#5252f5; --bf-on-accent:#ffffff; --bf-shadow:0 2px 4px rgba(0,0,0,.4),0 24px 48px -8px rgba(0,0,0,.7); } .bf-toolbar .bf-c-contrast{--fg:#b3b3ff;--bg:#26264f} .bf-toolbar .bf-c-links{--fg:#6fe0d3;--bg:#12332f} .bf-toolbar .bf-c-font{--fg:#ffc27a;--bg:#3d2a10} .bf-toolbar .bf-c-spacing{--fg:#ff9fc0;--bg:#40182a} .bf-toolbar .bf-c-motion{--fg:#8fe3a2;--bg:#163a20} } /* ---------- Grundgerüst (Theme-Styles neutralisieren) ---------- */ #bf-toolbar,#bf-toolbar *{box-sizing:border-box!important} #bf-toolbar{position:fixed!important;bottom:20px!important;z-index:99999!important;font:400 15px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;color:var(--bf-ink)!important} #bf-toolbar.bf-right{right:20px!important} #bf-toolbar.bf-left{left:20px!important} #bf-toolbar button{all:unset!important;box-sizing:border-box!important;cursor:pointer!important;font:inherit!important;color:inherit!important;-webkit-tap-highlight-color:transparent!important} #bf-toolbar button:focus-visible,#bf-toolbar a:focus-visible{outline:3px solid var(--bf-ink)!important;outline-offset:2px!important;box-shadow:0 0 0 6px var(--bf-accent)!important} #bf-toolbar .bf-ico{width:22px!important;height:22px!important;flex:none!important} /* ---------- Auslöser ---------- */ #bf-toolbar .bf-open{display:grid!important;place-items:center!important;width:58px!important;height:58px!important;border-radius:50%!important;background:var(--bf-accent)!important;color:var(--bf-on-accent)!important;box-shadow:var(--bf-shadow),0 0 0 4px var(--bf-paper)!important;transition:transform .15s ease!important} #bf-toolbar .bf-open:hover{transform:scale(1.06)!important} #bf-toolbar .bf-open .bf-ico-lg{width:30px!important;height:30px!important} /* ---------- Panel ---------- */ #bf-toolbar .bf-panel{position:absolute!important;bottom:74px!important;width:372px!important;max-width:calc(100vw - 40px)!important;max-height:calc(100vh - 118px)!important;max-height:calc(100dvh - 118px)!important;overflow:auto!important;padding:20px!important;background:var(--bf-paper)!important;border-radius:28px!important;box-shadow:var(--bf-shadow)!important;overscroll-behavior:contain!important} #bf-toolbar.bf-right .bf-panel{right:0!important;transform-origin:bottom right!important} #bf-toolbar.bf-left .bf-panel{left:0!important;transform-origin:bottom left!important} #bf-toolbar .bf-panel[hidden]{display:none!important} #bf-toolbar .bf-panel:not([hidden]){animation:bf-pop .2s cubic-bezier(.2,.8,.2,1)!important} @keyframes bf-pop{from{opacity:0;transform:translateY(10px) scale(.96)}to{opacity:1;transform:none}} #bf-toolbar .bf-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:12px!important;margin:0 0 16px!important} #bf-toolbar .bf-title{margin:0!important;padding:0!important;font-family:inherit!important;font-size:22px!important;font-weight:750!important;line-height:1.15!important;color:var(--bf-ink)!important;letter-spacing:-.01em!important;text-transform:none!important} #bf-toolbar .bf-sub{margin:4px 0 0!important;padding:0!important;font-size:14px!important;color:var(--bf-muted)!important} #bf-toolbar .bf-close{display:grid!important;place-items:center!important;flex:none!important;width:44px!important;height:44px!important;margin:-6px -8px 0 0!important;border-radius:50%!important;background:var(--bf-surface)!important;color:var(--bf-ink)!important} #bf-toolbar .bf-close:hover{background:var(--bf-surface-2)!important} /* ---------- Schriftgröße ---------- */ #bf-toolbar .bf-card{padding:14px!important;margin:0 0 10px!important;border-radius:20px!important;background:var(--bf-surface)!important} #bf-toolbar .bf-size-top{display:flex!important;align-items:baseline!important;justify-content:space-between!important;margin:0 2px 10px!important} #bf-toolbar .bf-size-label{font-weight:700!important;font-size:15px!important} #bf-toolbar .bf-size-val{font-size:14px!important;font-weight:600!important;color:var(--bf-muted)!important;font-variant-numeric:tabular-nums!important} #bf-toolbar .bf-seg{display:grid!important;grid-template-columns:repeat(5,1fr)!important;gap:4px!important;padding:4px!important;border-radius:16px!important;background:var(--bf-paper)!important} #bf-toolbar .bf-seg-btn{display:grid!important;place-items:center!important;height:46px!important;border-radius:12px!important;font-weight:700!important;color:var(--bf-ink)!important;transition:background .15s,color .15s!important} #bf-toolbar .bf-seg-btn:nth-child(1){font-size:13px!important} #bf-toolbar .bf-seg-btn:nth-child(2){font-size:15px!important} #bf-toolbar .bf-seg-btn:nth-child(3){font-size:17px!important} #bf-toolbar .bf-seg-btn:nth-child(4){font-size:20px!important} #bf-toolbar .bf-seg-btn:nth-child(5){font-size:23px!important} #bf-toolbar .bf-seg-btn:hover{background:var(--bf-surface)!important} #bf-toolbar .bf-seg-btn[aria-pressed="true"]{background:var(--bf-accent)!important;color:var(--bf-on-accent)!important} /* ---------- Schalter-Zeilen ---------- */ #bf-toolbar .bf-list{list-style:none!important;margin:0 0 14px!important;padding:0!important;display:grid!important;gap:8px!important} #bf-toolbar .bf-list li{margin:0!important;padding:0!important;list-style:none!important} #bf-toolbar .bf-row{display:flex!important;align-items:center!important;gap:12px!important;width:100%!important;padding:10px 14px 10px 10px!important;border-radius:20px!important;background:var(--bf-surface)!important;border:2px solid transparent!important;transition:background .15s,border-color .15s!important} #bf-toolbar .bf-row:hover{background:var(--bf-surface-2)!important} #bf-toolbar .bf-row[aria-checked="true"]{border-color:var(--bf-accent)!important} #bf-toolbar .bf-chip{display:grid!important;place-items:center!important;flex:none!important;width:44px!important;height:44px!important;border-radius:14px!important;background:var(--bg)!important;color:var(--fg)!important} #bf-toolbar .bf-text{display:grid!important;gap:1px!important;flex:1!important;min-width:0!important} #bf-toolbar .bf-name{font-weight:700!important;font-size:15px!important;line-height:1.25!important} #bf-toolbar .bf-hint{font-size:13px!important;line-height:1.3!important;color:var(--bf-muted)!important} #bf-toolbar .bf-switch{position:relative!important;flex:none!important;width:46px!important;height:28px!important;border-radius:999px!important;background:var(--bf-track)!important;transition:background .2s!important} #bf-toolbar .bf-switch i{position:absolute!important;top:3px!important;left:3px!important;width:22px!important;height:22px!important;border-radius:50%!important;background:#fff!important;box-shadow:0 1px 3px rgba(0,0,0,.35)!important;transition:transform .2s cubic-bezier(.2,.8,.2,1)!important} #bf-toolbar .bf-row[aria-checked="true"] .bf-switch{background:var(--bf-accent)!important} #bf-toolbar .bf-row[aria-checked="true"] .bf-switch i{transform:translateX(18px)!important;background:var(--bf-on-accent)!important} /* ---------- Sprache (GTranslate) ---------- */ #bf-toolbar .bf-lang .bf-size-label{display:block!important;margin:0!important} #bf-toolbar .bf-lang-top{display:flex!important;align-items:center!important;justify-content:space-between!important;margin:0 0 6px 2px!important} #bf-toolbar .bf-lang-body{display:flex!important;flex-wrap:wrap!important;gap:8px!important;align-items:center!important} #bf-toolbar .bf-lang select{width:100%!important;min-height:46px!important;padding:0 12px!important;border-radius:14px!important;border:2px solid var(--bf-track)!important;background:var(--bf-paper)!important;color:var(--bf-ink)!important;font-size:15px!important;font-weight:600!important;cursor:pointer!important} #bf-toolbar .bf-lang a{display:inline-flex!important;align-items:center!important;gap:6px!important;min-height:44px!important;padding:0 10px!important;border-radius:12px!important;background:var(--bf-paper)!important;color:var(--bf-ink)!important;font-weight:600!important;font-size:14px!important;text-decoration:none!important} #bf-toolbar .bf-lang a:hover{background:var(--bf-surface-2)!important} #bf-toolbar .bf-lang img{width:24px!important;height:auto!important;max-width:none!important;border-radius:3px!important} #bf-toolbar .bf-lang-body *{position:static!important;float:none!important;margin-top:0!important} /* ---------- Tooltips (Hover + Tastaturfokus, hoverbar, per Escape schließbar) ---------- */ #bf-toolbar .bf-tip{position:absolute!important;z-index:5!important;width:max-content!important;max-width:220px!important;padding:8px 12px!important;border-radius:10px!important;background:var(--bf-ink)!important;color:var(--bf-paper)!important;font-size:13px!important;font-weight:600!important;line-height:1.35!important;box-shadow:var(--bf-shadow)!important;opacity:0!important;visibility:hidden!important;transition:opacity .12s ease,visibility 0s linear .25s!important} #bf-toolbar .bf-tip-side{bottom:15px!important;white-space:nowrap!important} #bf-toolbar.bf-right .bf-tip-side{right:70px!important} #bf-toolbar.bf-left .bf-tip-side{left:70px!important} #bf-toolbar .bf-tip-side::before{content:""!important;position:absolute!important;top:-6px!important;bottom:-6px!important;width:16px!important} #bf-toolbar.bf-right .bf-tip-side::before{right:-16px!important} #bf-toolbar.bf-left .bf-tip-side::before{left:-16px!important} #bf-toolbar .bf-tipwrap{position:relative!important;display:inline-flex!important} #bf-toolbar .bf-tip-below{top:calc(100% + 4px)!important;right:0!important;width:220px!important;white-space:normal!important} #bf-toolbar .bf-open:hover + .bf-tip, #bf-toolbar .bf-open:focus-visible + .bf-tip, #bf-toolbar .bf-tip-side:hover, #bf-toolbar .bf-tipwrap:hover .bf-tip, #bf-toolbar .bf-tipwrap:focus-within .bf-tip{opacity:1!important;visibility:visible!important;transition-delay:0s!important} #bf-toolbar .bf-open[aria-expanded="true"] + .bf-tip{display:none!important} #bf-toolbar.bf-tips-off .bf-tip.bf-tip.bf-tip{opacity:0!important;visibility:hidden!important} #bf-toolbar .bf-info{display:grid!important;place-items:center!important;width:36px!important;height:36px!important;margin:-6px -6px -6px 0!important;border-radius:50%!important;color:var(--bf-muted)!important} #bf-toolbar .bf-info:hover{background:var(--bf-surface-2)!important;color:var(--bf-ink)!important} #bf-toolbar .bf-info .bf-ico{width:20px!important;height:20px!important} /* ---------- Fußzeile ---------- */ #bf-toolbar .bf-foot{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;flex-wrap:wrap!important;padding:0 2px!important} #bf-toolbar .bf-reset{display:inline-flex!important;align-items:center!important;gap:8px!important;min-height:44px!important;padding:0 6px!important;border-radius:12px!important;font-weight:700!important;color:var(--bf-ink)!important} #bf-toolbar .bf-reset:hover{color:var(--bf-accent)!important} #bf-toolbar .bf-reset .bf-ico{width:18px!important;height:18px!important} #bf-toolbar a.bf-statement{display:inline-flex!important;align-items:center!important;min-height:44px!important;color:var(--bf-ink)!important;font-weight:600!important;font-size:14px!important;text-decoration:underline!important;text-underline-offset:3px!important} #bf-toolbar a.bf-statement:hover{color:var(--bf-accent)!important} /* ---------- Mobil: Panel am Bildschirmrand verankern (dvh + Safe-Area) ---------- */ @media (max-width:600px){ #bf-toolbar{bottom:calc(12px + env(safe-area-inset-bottom,0px))!important} #bf-toolbar.bf-right{right:calc(12px + env(safe-area-inset-right,0px))!important} #bf-toolbar.bf-left{left:calc(12px + env(safe-area-inset-left,0px))!important} #bf-toolbar .bf-panel, #bf-toolbar.bf-right .bf-panel, #bf-toolbar.bf-left .bf-panel{ position:fixed!important; top:auto!important; left:12px!important; right:12px!important; bottom:calc(82px + env(safe-area-inset-bottom,0px))!important; width:auto!important; max-width:none!important; max-height:calc(100vh - 180px)!important; max-height:calc(100dvh - 180px - env(safe-area-inset-bottom,0px))!important; padding:16px!important; border-radius:24px!important; transform-origin:bottom center!important } #bf-toolbar .bf-tip-side{display:none!important} } /* Niedrige Bildschirme (Querformat): weniger Rand oben */ @media (max-height:520px){ #bf-toolbar .bf-panel, #bf-toolbar.bf-right .bf-panel, #bf-toolbar.bf-left .bf-panel{ max-height:calc(100vh - 146px)!important; max-height:calc(100dvh - 146px)!important } } /* ---------- Theme-Isolation: Schrift, Kursiv, Listen, Überschriften ---------- */ #bf-toolbar,#bf-toolbar *{font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif!important;font-style:normal!important;text-transform:none!important;text-shadow:none!important;float:none!important} #bf-toolbar .bf-title{font-size:22px!important;font-weight:750!important;line-height:1.15!important;margin:0!important;padding:0!important;border:0!important;letter-spacing:-.01em!important} #bf-toolbar button::before,#bf-toolbar button::after{content:none!important} /* ---------- Schriftgröße ---------- */ html[data-bf-size="1"]{font-size:112.5%} html[data-bf-size="2"]{font-size:125%} html[data-bf-size="3"]{font-size:150%} html[data-bf-size="4"]{font-size:175%} /* ---------- Hoher Kontrast ---------- */ html.bf-contrast body :not(.bf-toolbar):not(.bf-toolbar *):not(img):not(svg):not(video){background-color:#000!important;color:#fff!important;border-color:#fff!important;text-shadow:none!important} html.bf-contrast body{background:#000!important} html.bf-contrast body a:not(.bf-toolbar a){color:#ffe600!important;text-decoration:underline!important} /* ---------- Links hervorheben ---------- */ html.bf-links body a:not(.bf-toolbar a){text-decoration:underline!important;text-decoration-thickness:2px!important;background-color:#fff3a0!important;color:#001a66!important;outline:1px solid #001a66} /* ---------- Lesbare Schrift ---------- */ html.bf-font body :where(p,li,a,span,h1,h2,h3,h4,h5,h6,td,th,label,input,button,textarea,div):not(.bf-toolbar):not(.bf-toolbar *):not([class*="icon"]):not([class^="fa"]):not(.dashicons){font-family:Arial,Verdana,Helvetica,sans-serif!important} /* ---------- Abstände (WCAG 1.4.12) ---------- */ html.bf-spacing body :where(p,li,td,th,dd,dt,blockquote,label):not(.bf-toolbar *){line-height:1.8!important;letter-spacing:.12em!important;word-spacing:.16em!important} html.bf-spacing body :where(p):not(.bf-toolbar *){margin-bottom:2em!important} /* ---------- Animationen stoppen ---------- */ html.bf-motion *,html.bf-motion *::before,html.bf-motion *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important} }