/** * Barrierefreiheit RettZV – Widget-Styles * Präfix "bfz-" um Konflikte mit dem Theme zu vermeiden. * Klassen, die auf gesetzt werden, wirken auf die gesamte Seite. */ :root { --bf-accent: #0b6b3a; } /* --------------------------------------------------------------------------- * Auslöse-Button * ------------------------------------------------------------------------ */ .bfz-toggle { position: fixed; top: 50%; transform: translateY(-50%); z-index: 2147483000; /* möglichst hoch, damit nichts überlagert */ width: 56px; height: 56px; border: 2px solid #fff; border-radius: 50%; background: var(--bf-accent); color: #fff; cursor: pointer; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); display: flex; align-items: center; justify-content: center; padding: 0; transition: transform 0.2s ease, box-shadow 0.15s ease, opacity 0.2s ease; } .bfz-toggle:hover { box-shadow: 0 4px 16px rgba(0, 0, 0, 0.45); } .bfz-toggle:focus-visible { outline: 3px solid #ffbf00; outline-offset: 3px; } .bfz-toggle svg { width: 32px; height: 32px; fill: currentColor; pointer-events: none; } .bfz-pos-left .bfz-toggle { left: 12px; } .bfz-pos-right .bfz-toggle { right: 12px; } /* --------------------------------------------------------------------------- * Panel * ------------------------------------------------------------------------ */ .bfz-panel { position: fixed; top: 0; bottom: 0; width: 340px; max-width: 90vw; background: #ffffff; color: #1a1a1a; z-index: 2147483001; box-shadow: 0 0 30px rgba(0, 0, 0, 0.4); overflow-y: auto; -webkit-overflow-scrolling: touch; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 16px; line-height: 1.5; transition: transform 0.25s ease; } .bfz-pos-left .bfz-panel { left: 0; transform: translateX(-105%); } .bfz-pos-right .bfz-panel { right: 0; transform: translateX(105%); } .bfz-open.bfz-pos-left .bfz-panel, .bfz-open.bfz-pos-right .bfz-panel { transform: translateX(0); } .bfz-panel * { box-sizing: border-box; } .bfz-header { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 16px 18px; background: var(--bf-accent); color: #fff; position: sticky; top: 0; z-index: 2; } .bfz-header h2 { margin: 0; font-size: 18px; line-height: 1.3; color: #fff; font-weight: 700; } .bfz-close { background: transparent; border: 2px solid transparent; color: #fff; font-size: 26px; line-height: 1; width: 40px; height: 40px; border-radius: 6px; cursor: pointer; flex: 0 0 auto; } .bfz-close:hover { background: rgba(255, 255, 255, 0.18); } .bfz-close:focus-visible { outline: 3px solid #ffbf00; outline-offset: 2px; } .bfz-body { padding: 14px 18px 24px; } .bfz-group { margin: 0 0 18px; border: 0; padding: 0; } .bfz-group legend { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: #555; padding: 0; margin: 0 0 8px; } /* Steuerzeile mit +/- */ .bfz-stepper { display: flex; align-items: center; gap: 8px; } .bfz-stepper .bfz-value { flex: 1 1 auto; text-align: center; font-weight: 600; } .bfz-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 8px 12px; border: 2px solid #cfcfcf; border-radius: 8px; background: #f5f5f5; color: #1a1a1a; font-size: 15px; font-weight: 600; cursor: pointer; width: 100%; text-align: left; } .bfz-btn.bfz-square { width: 44px; flex: 0 0 44px; justify-content: center; font-size: 22px; text-align: center; } .bfz-btn:hover { border-color: var(--bf-accent); } .bfz-btn:focus-visible { outline: 3px solid #ffbf00; outline-offset: 2px; } .bfz-btn[aria-pressed="true"] { background: var(--bf-accent); border-color: var(--bf-accent); color: #fff; } .bfz-btn .bfz-ico { width: 22px; height: 22px; flex: 0 0 22px; fill: currentColor; } .bfz-btn .bfz-state { margin-left: auto; font-size: 12px; font-weight: 700; opacity: 0.85; } /* Zwei-Spalten-Raster für Umschalter */ .bfz-grid { display: grid; grid-template-columns: 1fr; gap: 8px; } .bfz-reset { margin-top: 6px; background: #fff; border: 2px solid #b00020; color: #b00020; justify-content: center; } .bfz-reset:hover { background: #b00020; border-color: #b00020; color: #fff; } .bfz-footer { margin-top: 6px; padding-top: 14px; border-top: 1px solid #e2e2e2; font-size: 13px; color: #444; } .bfz-footer a { color: var(--bf-accent); font-weight: 600; } .bfz-hint { font-size: 12px; color: #666; margin: 8px 0 0; } /* Backdrop */ .bfz-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); z-index: 2147483000; opacity: 0; visibility: hidden; transition: opacity 0.25s ease; } .bfz-open .bfz-backdrop { opacity: 1; visibility: visible; } /* =========================================================================== * ANWENDUNGS-KLASSEN – wirken auf * ======================================================================== */ /* Schriftgröße: über CSS-Variable skaliert (per JS gesetzt) */ html.bfz-fontscale body { font-size: calc(1rem * var(--bfz-font, 1)) !important; } html.bfz-fontscale body :where(p, li, a, span, td, th, dd, dt, blockquote, label, input, button, h1, h2, h3, h4, h5, h6) { font-size: calc(1em * var(--bfz-font, 1)); } /* Hoher Kontrast */ html.bfz-contrast body, html.bfz-contrast body :where(p, li, span, td, th, dd, dt, blockquote, h1, h2, h3, h4, h5, h6) { color: #000 !important; background-color: #fff !important; } html.bfz-contrast a { color: #00309e !important; text-decoration: underline !important; } /* Dunkler / invertierter Modus */ html.bfz-invert { filter: invert(1) hue-rotate(180deg); background: #fff; } html.bfz-invert img, html.bfz-invert video, html.bfz-invert picture, html.bfz-invert iframe, html.bfz-invert .bfz-panel, html.bfz-invert .bfz-toggle { filter: invert(1) hue-rotate(180deg); } /* Graustufen */ html.bfz-grayscale { filter: grayscale(1); } html.bfz-grayscale .bfz-panel, html.bfz-grayscale .bfz-toggle { filter: grayscale(0); } /* Invert + Graustufen kombiniert */ html.bfz-invert.bfz-grayscale { filter: invert(1) hue-rotate(180deg) grayscale(1); } /* Links hervorheben */ html.bfz-links a { text-decoration: underline !important; text-underline-offset: 2px; outline: 1px dashed currentColor; outline-offset: 2px; } /* Fokus deutlich hervorheben */ html.bfz-focus :where(a, button, input, select, textarea, [tabindex]):focus { outline: 4px solid #ffbf00 !important; outline-offset: 2px !important; box-shadow: 0 0 0 2px #000 !important; } /* Großer Cursor */ html.bfz-cursor, html.bfz-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 fill='%23000' stroke='%23fff' stroke-width='2' d='M8 4l30 18-13 3 7 15-5 2-7-15-9 9z'/%3E%3C/svg%3E") 6 4, auto !important; } /* Lesbare Schrift (Dyslexie-freundlich) */ html.bfz-readable body, html.bfz-readable body :where(p, li, a, span, td, th, dd, dt, blockquote, label, h1, h2, h3, h4, h5, h6) { font-family: Verdana, "Trebuchet MS", "Segoe UI", Tahoma, sans-serif !important; letter-spacing: 0.03em !important; word-spacing: 0.12em !important; } /* Zeilenabstand vergrößern */ html.bfz-spacing body, html.bfz-spacing body :where(p, li, blockquote, dd) { line-height: 1.9 !important; } /* Leselineal / Lesemaske */ .bfz-ruler { position: fixed; left: 0; right: 0; height: 44px; background: rgba(255, 235, 120, 0.25); border-top: 2px solid rgba(0, 0, 0, 0.65); border-bottom: 2px solid rgba(0, 0, 0, 0.65); pointer-events: none; z-index: 2147482000; display: none; } html.bfz-ruler-on .bfz-ruler { display: block; } /* Animationen reduzieren (wird immer respektiert) */ @media (prefers-reduced-motion: reduce) { .bfz-panel, .bfz-backdrop, .bfz-toggle { transition: none !important; } } /* Auf dem Handy: Button beim Scrollen ausblenden (Panel geschlossen). Wird per JS über die Klasse .bfz-scrolling gesteuert. */ @media (max-width: 782px) { .bfz-scrolling.bfz-pos-left:not(.bfz-open) .bfz-toggle { opacity: 0; pointer-events: none; transform: translate(-150%, -50%); } .bfz-scrolling.bfz-pos-right:not(.bfz-open) .bfz-toggle { opacity: 0; pointer-events: none; transform: translate(150%, -50%); } } /* Kleine Bildschirme: Panel volle Breite */ @media (max-width: 480px) { .bfz-panel { width: 100vw; max-width: 100vw; } }