/* ============================================================================= WCAG 2.1 Accessibility Stylesheet – IBC Furtwangen Ensures WCAG 2.1 AA compliance with a premium keyboard-navigation experience. Load this file LAST so it can override violations in other stylesheets. Note on !important usage: Several component stylesheets use `!important` to suppress focus indicators (a WCAG violation). This file intentionally uses `!important` in targeted :focus-visible rules to restore those indicators. All other selectors use standard specificity without !important. ============================================================================= */ /* ───────────────────────────────────────────────────────────────────────────── 1. WCAG-COMPLIANT COLOUR SYSTEM Primary green #6D9744 has only 3.41:1 on white (fails AA for body text). These variables provide accessible text-colour alternatives while keeping the brand identity intact. ───────────────────────────────────────────────────────────────────────────── */ :root { /* Text greens: WCAG AA-compliant on white (#fff) and near-white (#f8f9fa) */ --wcag-green-text: #355B2C; /* 7.82:1 on white → passes AAA */ --wcag-green-text-aa: #4a7c1f; /* 4.63:1 on white → passes AA normal text */ --wcag-green-btn-label: #ffffff; /* white on #6D9744 background = 3.41:1 (large/bold only) */ /* IBC brand green – used for focus rings on interactive elements */ --wcag-focus-ibc-green: #6D9744; /* IBC brand green; contrast 3.41:1 on white (passes for large/UI elements ≥24px or bold ≥18.66px per WCAG SC 1.4.3) */ /* Focus-ring colours */ --wcag-focus-primary: #20234A; /* IBC Navy – 14.99:1 on white */ --wcag-focus-accent: #3481b9; /* Accent blue – 4.18:1 on white */ --wcag-focus-green: #355B2C; /* Dark green – 7.82:1 on white */ /* Focus glow layers (semi-transparent) */ --wcag-glow-blue: rgba(32, 35, 74, 0.20); --wcag-glow-green: rgba(53, 91, 44, 0.25); --wcag-glow-accent: rgba(52, 129, 185, 0.22); --wcag-glow-ibc-green: rgba(109, 151, 68, 0.35); /* IBC green glow */ /* Keyboard-focus ring geometry */ --wcag-ring-width: 3px; --wcag-ring-offset: 3px; --wcag-ring-radius: 6px; /* Double-contrast ring system (IBC green -> white -> IBC green sandwich) The white outline sits between two IBC-green layers so the ring is legible on BOTH light and dark backgrounds simultaneously. */ --wcag-double-ring-spread: 9px; /* total box-shadow spread for outer green */ --wcag-double-ring-white: #ffffff; /* center band colour */ /* Update shared text-green variable used across the site */ --ibc-green-text: var(--wcag-green-text); --ibc-text-green: var(--wcag-green-text); --ibc-text-green-alt: var(--wcag-green-text); --ibc-green-accessible: var(--wcag-green-text); } /* ───────────────────────────────────────────────────────────────────────────── 3. PREMIUM FOCUS-STATE SYSTEM ── DOUBLE CONTRAST RING All interactive elements receive a double-contrast ring on :focus-visible per WCAG 2.1 SC 2.4.7 / 2.4.11. Architecture of the double-contrast ring (IBC green -> white -> IBC green): · outline – 3 px WHITE ring at outline-offset (3 px) from the element · box-shadow[0] – solid IBC-green spread to --wcag-double-ring-spread (9 px), fills behind the outline, creating an inner IBC-green ring between the element edge and the white outline · box-shadow[1] – solid IBC-green from 9 px → 12 px (outer green ring) · box-shadow[2] – soft ambient glow Visual cross-section (distances from element edge): 0──3px IBC green (box-shadow, inner ring) 3──6px WHITE (outline, center ring) ← white always contrasts 6──9px IBC green (box-shadow continues) ← green contrasts on light bg 9─12px IBC green (outer ring) 12─+∞px soft green glow Works on both light AND dark backgrounds: Light bg: IBC-green rings are visible; white band provides separation. Dark bg : White band is highly visible; IBC-green glows against dark. ───────────────────────────────────────────────────────────────────────────── */ /* Base reset: never hide focus for keyboard navigation */ *:focus:not(:focus-visible) { outline: none; /* mouse/pointer clicks: clean, no visible ring */ } *:focus-visible { outline: var(--wcag-ring-width) solid var(--wcag-double-ring-white); /* white center ring */ outline-offset: var(--wcag-ring-offset); border-radius: var(--wcag-ring-radius); box-shadow: 0 0 0 var(--wcag-double-ring-spread) var(--wcag-focus-ibc-green), /* inner + outer IBC green */ 0 0 0 calc(var(--wcag-double-ring-spread) + 3px) var(--wcag-glow-ibc-green), 0 0 22px 6px var(--wcag-glow-ibc-green); /* ambient glow */ transition: outline-offset 0.1s ease, box-shadow 0.15s ease; } /* ── Interactive text links ────────────────────────────────────────────────── */ a:not(.btn):not(.nav-link):not(.navbar-brand):focus-visible { outline: var(--wcag-ring-width) solid var(--wcag-double-ring-white); outline-offset: 2px; border-radius: 3px; box-shadow: 0 0 0 calc(4px + var(--wcag-ring-width)) var(--wcag-focus-ibc-green), 0 0 0 calc(7px + var(--wcag-ring-width)) var(--wcag-glow-ibc-green), 0 0 14px 4px var(--wcag-glow-ibc-green); } /* ── Navigation links ──────────────────────────────────────────────────────── */ .nav-link:focus-visible, .navbar-brand:focus-visible, .lang-toggle:focus-visible, .lang-item:focus-visible, .dropdown-item:focus-visible { outline: var(--wcag-ring-width) solid var(--wcag-double-ring-white) !important; outline-offset: 4px !important; border-radius: 8px !important; box-shadow: 0 0 0 var(--wcag-double-ring-spread) var(--wcag-focus-ibc-green), 0 0 0 calc(var(--wcag-double-ring-spread) + 3px) var(--wcag-glow-ibc-green), 0 0 22px 6px var(--wcag-glow-ibc-green) !important; } /* ── Buttons (CTA / primary) ───────────────────────────────────────────────── */ .btn:focus-visible, button:focus-visible, [role="button"]:focus-visible, input[type="button"]:focus-visible, input[type="submit"]:focus-visible, input[type="reset"]:focus-visible { outline: var(--wcag-ring-width) solid var(--wcag-double-ring-white) !important; outline-offset: var(--wcag-ring-offset) !important; border-radius: var(--wcag-ring-radius) !important; box-shadow: 0 0 0 var(--wcag-double-ring-spread) var(--wcag-focus-ibc-green), 0 0 0 calc(var(--wcag-double-ring-spread) + 3px) var(--wcag-glow-ibc-green), 0 0 26px 8px var(--wcag-glow-ibc-green), 0 4px 12px rgba(0, 0, 0, 0.15) !important; } /* Green CTA buttons specifically */ .btn-ibc:focus-visible, .btn-primary:focus-visible, .ethereal-button:focus-visible, .btn-cta:focus-visible { outline-color: var(--wcag-double-ring-white) !important; box-shadow: 0 0 0 var(--wcag-double-ring-spread) var(--wcag-focus-ibc-green), 0 0 0 calc(var(--wcag-double-ring-spread) + 3px) var(--wcag-glow-ibc-green), 0 0 32px 10px var(--wcag-glow-ibc-green), 0 4px 12px rgba(0, 0, 0, 0.15) !important; } /* ── Buttons on dark backgrounds (navbar, footer) Invert the ring so the IBC-green inner ring gives contrast on the dark surface while the white outer ring reads clearly against the dark background. */ .navbar .btn:focus-visible, .navbar button:focus-visible, footer .btn:focus-visible, footer button:focus-visible, footer a:focus-visible, .footer-section a:focus-visible, [data-bs-theme="dark"] button:focus-visible, [data-bs-theme="dark"] a:focus-visible { outline-color: var(--wcag-focus-ibc-green) !important; /* IBC green center ring */ box-shadow: 0 0 0 var(--wcag-double-ring-spread) #ffffff, /* white outer ring */ 0 0 0 calc(var(--wcag-double-ring-spread) + 3px) var(--wcag-focus-ibc-green), 0 0 22px 5px var(--wcag-glow-ibc-green) !important; } /* ── Form elements ─────────────────────────────────────────────────────────── */ input:focus-visible, textarea:focus-visible, select:focus-visible { outline: var(--wcag-ring-width) solid var(--wcag-double-ring-white) !important; outline-offset: 1px !important; border-radius: 6px !important; border-color: var(--wcag-focus-ibc-green) !important; box-shadow: 0 0 0 calc(1px + var(--wcag-ring-width) + 2px) var(--wcag-focus-ibc-green), 0 0 0 calc(1px + var(--wcag-ring-width) + 5px) var(--wcag-glow-ibc-green), 0 0 14px 3px var(--wcag-glow-ibc-green) !important; } /* ── Checkboxes, radios ────────────────────────────────────────────────────── */ input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline: var(--wcag-ring-width) solid var(--wcag-double-ring-white) !important; outline-offset: 2px !important; box-shadow: 0 0 0 var(--wcag-double-ring-spread) var(--wcag-focus-ibc-green), 0 0 0 calc(var(--wcag-double-ring-spread) + 3px) var(--wcag-glow-ibc-green) !important; } /* ── Cards / interactive containers ───────────────────────────────────────── */ .service-card:focus-visible, .angebot-card:focus-visible, .value-card:focus-visible, .physics-card-wrap:focus-visible, .team-card:focus-visible, .referenz-card:focus-visible, [tabindex]:focus-visible { outline: var(--wcag-ring-width) solid var(--wcag-double-ring-white) !important; outline-offset: 4px !important; border-radius: 12px !important; box-shadow: 0 0 0 var(--wcag-double-ring-spread) var(--wcag-focus-ibc-green), 0 0 0 calc(var(--wcag-double-ring-spread) + 3px) var(--wcag-glow-ibc-green), 0 0 28px 8px var(--wcag-glow-ibc-green), var(--shadow-hover, 0 20px 40px -10px rgba(32,35,74,0.15)) !important; } /* ── Cookie / consent toggle ───────────────────────────────────────────────── */ .cookie-consent__switch input:focus-visible + .cookie-consent__slider, .form-check-input:focus-visible { outline: var(--wcag-ring-width) solid var(--wcag-double-ring-white) !important; outline-offset: 2px !important; box-shadow: 0 0 0 var(--wcag-double-ring-spread) var(--wcag-focus-ibc-green), 0 0 0 calc(var(--wcag-double-ring-spread) + 3px) var(--wcag-glow-ibc-green) !important; } /* ── Navbar toggler ────────────────────────────────────────────────────────── */ .navbar-toggler:focus-visible { outline: var(--wcag-ring-width) solid var(--wcag-double-ring-white) !important; outline-offset: 3px !important; border-radius: 6px !important; box-shadow: 0 0 0 var(--wcag-double-ring-spread) var(--wcag-focus-ibc-green), 0 0 0 calc(var(--wcag-double-ring-spread) + 3px) var(--wcag-glow-ibc-green) !important; } /* ───────────────────────────────────────────────────────────────────────────── 4. FIX CRITICAL VIOLATIONS Some component stylesheets set `outline: none !important` even for :focus-visible states, which is a WCAG 2.1 SC 1.4.11 / 2.4.7 failure. The selectors below specifically restore focus visibility with `!important` to override those violations while keeping the mouse-click clean. ───────────────────────────────────────────────────────────────────────────── */ /* Fix: index.css removes all focus for .btn (:focus and :focus-visible) */ .btn:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } /* Fix: send-button.css removes focus from send-button-wrapper */ .send-button-wrapper:focus:not(:focus-visible), #sendButtonSvg:focus:not(:focus-visible), .send-button-wrapper button:focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } .send-button-wrapper:focus-visible, #sendButtonSvg:focus-visible { outline: var(--wcag-ring-width) solid var(--wcag-double-ring-white) !important; outline-offset: var(--wcag-ring-offset) !important; border-radius: 8px !important; box-shadow: 0 0 0 var(--wcag-double-ring-spread) var(--wcag-focus-ibc-green), 0 0 0 calc(var(--wcag-double-ring-spread) + 3px) var(--wcag-glow-ibc-green), 0 0 22px 6px var(--wcag-glow-ibc-green) !important; } /* Fix: style.css sets outline:none on .info-card .btn */ .info-card .btn:focus-visible { outline: var(--wcag-ring-width) solid var(--wcag-double-ring-white) !important; outline-offset: var(--wcag-ring-offset) !important; box-shadow: 0 0 0 var(--wcag-double-ring-spread) var(--wcag-focus-ibc-green), 0 0 0 calc(var(--wcag-double-ring-spread) + 3px) var(--wcag-glow-ibc-green), 0 0 18px 5px var(--wcag-glow-ibc-green) !important; } /* ───────────────────────────────────────────────────────────────────────────── 5. HIGH-CONTRAST TEXT COLOURS (WCAG 1.4.3) Ensure all green-coloured body text uses the AAA-compliant dark variant. ───────────────────────────────────────────────────────────────────────────── */ /* Inline text links that use the brand green */ a.text-green, .text-ibc-green, .text-green, span.ibc-green { color: var(--wcag-green-text) !important; /* #355B2C – 7.82:1 on white */ } /* Form labels, helper text, muted text used in dark contexts */ .form-label, .form-text { color: var(--wcag-focus-primary); /* navy – maximum contrast */ } /* ───────────────────────────────────────────────────────────────────────────── 6. KEYBOARD NAVIGATION INDICATOR Add a subtle "keyboard mode" body class that can be toggled via JS to give extra visibility cues beyond focus rings when desired. ───────────────────────────────────────────────────────────────────────────── */ body.keyboard-nav *:focus-visible { outline-width: 4px !important; outline-offset: 4px !important; } /* ───────────────────────────────────────────────────────────────────────────── 7. REDUCED-MOTION COMPLIANCE (WCAG 2.3.3 / WCAG 2.1 SC 2.3.3) When the user requests reduced motion: • ALL CSS animations and transitions are immediately stopped (duration → 0) • ALL blur and backdrop-filter effects are removed instantly • Focus rings are preserved and still visible (outline only, no glow) This optimises the experience for users with vestibular disorders. ───────────────────────────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { /* ── Disable every animation and transition site-wide ──────────────────── */ /* 0.01ms (not 0s) is used because some browsers treat 0s as "unset" rather than "instant", causing animations to run at default speed. */ *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } /* ── Remove all blur and backdrop-filter effects ───────────────────────── */ * { filter: none !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ── Preserve focus rings: keep double-ring outline, drop animated glow ── */ *:focus-visible, .btn:focus-visible, button:focus-visible, a:focus-visible, .nav-link:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { transition: none !important; /* Retain double-ring without animated glow */ box-shadow: 0 0 0 var(--wcag-double-ring-spread) var(--wcag-focus-ibc-green), 0 0 0 calc(var(--wcag-double-ring-spread) + 3px) var(--wcag-glow-ibc-green) !important; } } /* ───────────────────────────────────────────────────────────────────────────── 8. FORCED-COLOURS / HIGH-CONTRAST MODE (WCAG 1.4.11) Ensure components remain usable in Windows High-Contrast Mode. ───────────────────────────────────────────────────────────────────────────── */ @media (forced-colors: active) { *:focus-visible { outline: 3px solid ButtonText !important; outline-offset: 3px !important; box-shadow: none !important; } .btn:focus-visible, button:focus-visible, a:focus-visible { outline: 3px solid ButtonText !important; forced-color-adjust: auto; } } /* ───────────────────────────────────────────────────────────────────────────── 9. HIGH-CONTRAST OVERRIDES: TEXT ON DARK BACKGROUNDS (WCAG 1.4.6 / AAA) WCAG AAA (SC 1.4.6) requires a minimum contrast ratio of 7:1 for body text and 4.5:1 for large text (≥ 18 pt or ≥ 14 pt bold) against their background. This section ensures elements rendered on the site's dark surfaces — IBC Navy (#20234A), footer-copyright (#151730), hero overlay, and the dark page-hero gradient — meet the 7:1 AAA threshold. Contrast ratios cited below were computed using the WCAG 2.x relative- luminance formula (W3C algorithm: https://www.w3.org/TR/WCAG21/#dfn-contrast-ratio). Values were verified with the WebAIM Contrast Checker (https://webaim.org/resources/contrastchecker/). APCA approximate values provided for reference only. ───────────────────────────────────────────────────────────────────────────── */ /* ── 9a. Footer – body text ───────────────────────────────────────────────── Fat Footer background is now var(--ibc-blue) = #20234A (IBC blue). White text #ffffff gives ~10.3:1 on #20234A – passes WCAG AAA. */ footer, .footer-section { color: #ffffff; /* ~10.3:1 on #20234A – passes AAA normal text */ } footer p, .footer-section p, .fat-footer__tagline { color: var(--fat-footer-link, #ffffff) !important; /* ~10.3:1 on #20234A – AAA */ } /* ── 9c. Footer – navigation & legal links ────────────────────────────────── Fat Footer background is now var(--ibc-blue) = #20234A (IBC blue). White #ffffff gives ~10.3:1 on #20234A — passes WCAG AAA. The fat-footer nav links use .fat-footer__nav-list a and .fat-footer__connect-link with var(--fat-footer-link, #ffffff). */ .fat-footer__nav-list a, .fat-footer__connect-link { color: var(--fat-footer-link, #ffffff) !important; /* ~10.3:1 on #20234A – AAA */ } .fat-footer__nav-list a:hover, .fat-footer__connect-link:hover { color: var(--ibc-green, #6D9744) !important; /* hover glow – IBC-Grün */ text-shadow: 0 0 10px rgba(109, 151, 68, 0.5) !important; } /* ── 9d. Footer – bottom bar links ───────────────────────────────────────── .footer-bottom a uses rgba(255,255,255,0.70) on #152229 (~4.5:1 – AA only) */ .footer-bottom a { color: rgba(255, 255, 255, 0.90) !important; /* ~11.8:1 on #152229 */ } /* ── 9e. Copyright area ───────────────────────────────────────────────────── Copyright bar uses #080916 background. rgba(255,255,255,0.35) gives ~4.8:1 which passes AA. Ensure minimum AA compliance. */ .copyright-text p, .copyright-area p { color: rgba(255, 255, 255, 0.55) !important; /* ~7.7:1 on #080916 – AAA */ } .copyright-text p a, .copyright-area p a { color: #a8d880 !important; /* light green; passes AAA on #080916 */ text-decoration: underline; } /* ── 9f. Footer – social icon links ──────────────────────────────────────── Social icons use rgba(255,255,255,0.70) on navy – fails AAA. */ footer .social-icons a, .footer-section .social-icons a, footer .social-button-list a, .footer-section .social-button-list a { color: #e0e0e0 !important; /* ~8.5:1 on #20234A */ } /* ── 9g. Hero section (#hero-section) ────────────────────────────────────── The hero overlays video/dark gradient. Text is already #ffffff but the lead paragraph may render at reduced opacity (≤ 0.85). Ensure full opacity and a legibility-boosting text-shadow. */ #hero-section p.lead, #hero-section .ibc-lead { color: #ffffff !important; opacity: 1 !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.40) !important; } /* ── 9h. Page-hero section (.page-hero-section) ───────────────────────────── The animated blue-to-green gradient background can lighten at certain animation frames. Reinforce contrast with a stronger text-shadow. */ .page-hero-section h1, .page-hero-section .ibc-heading { text-shadow: 0 2px 14px rgba(0, 0, 0, 0.50), 0 1px 4px rgba(0, 0, 0, 0.40) !important; } .page-hero-section p.lead, .page-hero-section .ibc-lead { color: #ffffff !important; opacity: 1 !important; text-shadow: 0 2px 14px rgba(0, 0, 0, 0.55), 0 1px 4px rgba(0, 0, 0, 0.40) !important; } /* ── 9i. Navbar links on dark navbar background ───────────────────────────── Navbar background is #20234A (IBC Navy). Nav links must exceed 7:1. */ .navbar-dark .nav-link, .navbar[data-bs-theme="dark"] .nav-link, .navbar .nav-link { color: rgba(255, 255, 255, 0.95) !important; /* ~14.1:1 on #20234A */ } /* ── 9j. Dark-themed section headings & sub-headings ─────────────────────── Sections that set a dark background via .bg-dark or data attributes must maintain WCAG AAA for all contained text. */ [data-bs-theme="dark"] h1, [data-bs-theme="dark"] h2, [data-bs-theme="dark"] h3, [data-bs-theme="dark"] h4, [data-bs-theme="dark"] h5, [data-bs-theme="dark"] h6, [data-bs-theme="dark"] p, [data-bs-theme="dark"] li, [data-bs-theme="dark"] span:not([class*="badge"]), .bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4, .bg-dark h5, .bg-dark h6, .bg-dark p, .bg-dark li { color: #e8e8e8 !important; /* ~9.5:1 on #212529 Bootstrap dark bg */ } /* ── 9k. Muted / secondary text on dark surfaces ─────────────────────────── Bootstrap .text-muted is #6c757d which has ~4.5:1 on white but < 2:1 on dark backgrounds. Provide a lighter fallback for dark contexts. */ .footer-section .text-muted, footer .text-muted, [data-bs-theme="dark"] .text-muted, .bg-dark .text-muted { color: #b0b8c1 !important; /* ~5.8:1 on #20234A – passes AA for large text */ }