/* ========================================================================== Barrierefreiheits-Widget Uebernommen aus dem Elblandschwestern-Projekt. Das Widget erwartet die Variablen --panel, --ink, --hairline-strong und --font-b; hier werden sie auf die neuziel-Tokens gelegt, damit es zur Marke passt statt zu den Fallback-Farben des Ursprungsprojekts. Position: unten LINKS. Unten rechts sitzt der Calendly-Termin-Badge, die beiden duerfen sich nicht ueberlagern. Hinweis: neuziel berät selbst zu BFSG-Barrierefreiheit -- die eigene Seite sollte hier vorbildlich sein. ========================================================================== */ :root { --panel: var(--color-navy); --ink: var(--color-white); --hairline-strong: rgba(255, 255, 255, .28); --font-b: var(--font-sans); } /* a11y-widget.css -- Badge unten links + Einstellungspanel. */ .a11y-badge{ position:fixed;left:20px;bottom:20px;z-index:950; display:flex;align-items:center;gap:8px; background:var(--panel,#1A3628);color:var(--ink,#F2F7F4); border:1px solid var(--hairline-strong,rgba(255,255,255,.3)); border-radius:999px;padding:12px 18px;cursor:pointer; font-family:var(--font-b,system-ui,sans-serif);font-size:.85rem;font-weight:600; box-shadow:0 12px 30px rgba(0,0,0,.35); } .a11y-badge svg{width:22px;height:22px;flex-shrink:0} .a11y-badge:hover{border-color:var(--orange,#F59101)} .a11y-panel{ position:fixed;left:20px;bottom:calc(20px + var(--a11y-badge-height, 46px) + 12px);z-index:950; width:320px;max-height:80vh;overflow-y:auto; background:var(--panel,#1A3628);color:var(--ink,#F2F7F4); border:1px solid var(--hairline-strong,rgba(255,255,255,.3)); border-radius:18px;padding:18px; box-shadow:0 30px 70px rgba(0,0,0,.45); font-family:var(--font-b,system-ui,sans-serif); } .a11y-panel-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .a11y-panel-heading{font-family:var(--font-d,system-ui,sans-serif);font-weight:700;font-size:1.05rem;margin:0} .a11y-panel-close{background:none;border:none;color:var(--ink,#F2F7F4);cursor:pointer;padding:4px} .a11y-panel-close svg{width:18px;height:18px;display:block} .a11y-panel-list{display:grid;gap:6px;margin-bottom:14px} .a11y-option{ display:flex;align-items:center;gap:10px;width:100%;text-align:left; background:transparent;border:1px solid var(--hairline,rgba(255,255,255,.12)); border-radius:12px;padding:11px 12px;color:var(--ink,#F2F7F4);cursor:pointer; font-family:inherit;font-size:.9rem; } .a11y-option:hover{border-color:var(--hairline-strong,rgba(255,255,255,.3))} .a11y-option.is-active{border-color:var(--orange,#F59101);background:rgba(245,145,1,.1)} .a11y-option-icon{flex-shrink:0;width:20px;height:20px;display:flex} .a11y-option-icon svg{width:20px;height:20px} .a11y-option-label{flex:1} .a11y-btn-status{font-size:.78rem;color:var(--dim,#A9C4B5)} .a11y-reset{ width:100%;background:none;border:1px solid var(--hairline-strong,rgba(255,255,255,.3)); border-radius:999px;padding:10px;color:var(--ink,#F2F7F4);cursor:pointer; font-family:inherit;font-size:.85rem;font-weight:600; } .a11y-reset:hover{background:var(--bg,#11291E)} @media(max-width:480px){ .a11y-badge-label{display:none} .a11y-badge{padding:12px;border-radius:50%} .a11y-panel{left:12px;right:12px;width:auto} } /* ============================================================ Effekte der einzelnen Optionen (auf gesetzte Klassen) ============================================================ */ /* Schriftgröße: rem-basierte Elemente skalieren über html-font-size, die px-basierte Body-Basisschrift wird separat gesetzt. */ html.a11y-large-text{font-size:112%} html.a11y-large-text body{font-size:19px} html.a11y-large-text-2{font-size:125%} html.a11y-large-text-2 body{font-size:21px} /* Hochkontrast: direkte Eigenschaften statt Custom-Property-Namen, damit es unabhaengig von Token-Umbenennungen funktioniert. */ html.a11y-high-contrast body{background:#000 !important;color:#fff !important} html.a11y-high-contrast body *{ background-color:#000 !important;color:#fff !important; border-color:#fff !important;background-image:none !important; text-shadow:none !important;box-shadow:none !important; } html.a11y-high-contrast a, html.a11y-high-contrast .grad-text, html.a11y-high-contrast .label{color:#FFD866 !important;-webkit-text-fill-color:#FFD866 !important} html.a11y-high-contrast .btn{border:2px solid #fff !important} html.a11y-high-contrast img, html.a11y-high-contrast video{filter:grayscale(40%) contrast(1.1)} /* Animationen stoppen -- auch ::before/::after */ html.a11y-reduce-motion, html.a11y-reduce-motion *, html.a11y-reduce-motion *::before, html.a11y-reduce-motion *::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important; } html.a11y-reduce-motion .rv{opacity:1 !important;transform:none !important;filter:none !important} html.a11y-reduce-motion .creed{height:auto !important} html.a11y-reduce-motion .creed-sticky, html.a11y-reduce-motion .morph-sticky{position:static !important;height:auto !important;padding:90px 0 !important} html.a11y-reduce-motion .creed-text .w{color:var(--ink,#F2F7F4) !important} /* Zeilenabstand */ html.a11y-line-spacing body, html.a11y-line-spacing p, html.a11y-line-spacing li, html.a11y-line-spacing td{line-height:2.2 !important} /* Links hervorheben */ html.a11y-highlight-links a{ outline:1px solid currentColor !important;outline-offset:2px; text-decoration:underline !important;text-underline-offset:3px; } /* Grosser Cursor: Farbe/Data-URI wird per JS als