/* ============================================================ CP-FIT Website – styles.css Custom Styles, Accessibility (A11y) System, Form & Widget ============================================================ */ /* Custom Styles & W3C fixes */ body { font-family: 'Inter', sans-serif; } h1, h2, h3, h4 { font-family: 'Merriweather', serif; } .nav-link { position: relative; } .nav-link::after { content: ''; position: absolute; width: 0; height: 2px; bottom: -4px; left: 0; background-color: #e32526; transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } /* Form Focus Styles */ input:focus, textarea:focus { outline: none; border-color: #1a2b4c; box-shadow: 0 0 0 3px rgba(26, 43, 76, 0.1); } /* Funnel Animations */ .step-container { transition: opacity 0.4s ease, transform 0.4s ease; } .step-hidden { opacity: 0; transform: translateX(20px); pointer-events: none; position: absolute; top: 0; left: 0; width: 100%; visibility: hidden; } .step-active { opacity: 1; transform: translateX(0); position: relative; visibility: visible; } .radio-card-input:checked + .radio-card { border-color: #e32526; background-color: #fef2f2; box-shadow: 0 4px 6px -1px rgba(227, 37, 38, 0.1), 0 2px 4px -1px rgba(227, 37, 38, 0.06); } .radio-card-input:checked + .radio-card .check-icon { opacity: 1; transform: scale(1); } /* ========================================== ENTERPRISE ACCESSIBILITY (A11Y) SYSTEM ========================================== */ /* CSS Variables for dynamic scaling */ :root { --a11y-font-scale: 1; --a11y-line-height: 1.5; --a11y-word-spacing: normal; --a11y-letter-spacing: normal; --a11y-bg-color: transparent; --a11y-text-color: inherit; --a11y-link-color: inherit; --a11y-title-color: inherit; } /* Base application of variables to content (excluding widget) */ body.a11y-active-vars main, body.a11y-active-vars header, body.a11y-active-vars footer { font-size: calc(1rem * var(--a11y-font-scale)) !important; line-height: var(--a11y-line-height) !important; word-spacing: var(--a11y-word-spacing) !important; letter-spacing: var(--a11y-letter-spacing) !important; background-color: var(--a11y-bg-color) !important; color: var(--a11y-text-color) !important; } body.a11y-active-vars h1, body.a11y-active-vars h2, body.a11y-active-vars h3, body.a11y-active-vars h4 { color: var(--a11y-title-color) !important; } body.a11y-active-vars a { color: var(--a11y-link-color) !important; } /* Specific A11y Feature Classes */ body.a11y-dyslexia main, body.a11y-dyslexia header, body.a11y-dyslexia footer { font-family: 'Arial', 'Helvetica', sans-serif !important; } body.a11y-dyslexia h1, body.a11y-dyslexia h2, body.a11y-dyslexia h3, body.a11y-dyslexia h4 { font-family: 'Arial', 'Helvetica', sans-serif !important; } body.a11y-hide-images img, body.a11y-hide-images .bg-cover { display: none !important; background-image: none !important; } body.a11y-highlight-links a, body.a11y-highlight-links button:not(.a11y-widget-btn) { outline: 3px solid #e32526 !important; outline-offset: 2px !important; text-decoration: underline !important; background-color: #ffe5e5 !important; color: #000 !important; } html.a11y-stop-animations, html.a11y-stop-animations * { transition: none !important; animation: none !important; scroll-behavior: auto !important; } body.a11y-grayscale { filter: grayscale(100%) !important; } body.a11y-low-saturation { filter: saturate(30%) !important; } body.a11y-high-contrast main, body.a11y-high-contrast header, body.a11y-high-contrast footer { background-color: #000000 !important; color: #00ff00 !important; } body.a11y-high-contrast h1, body.a11y-high-contrast h2, body.a11y-high-contrast h3, body.a11y-high-contrast p, body.a11y-high-contrast span { color: #00ff00 !important; } body.a11y-high-contrast a { color: #ffff00 !important; text-decoration: underline !important; } body.a11y-high-contrast .bg-cover { background-image: none !important; background-color: #000 !important; } body.a11y-large-cursor, body.a11y-large-cursor * { cursor: url('data:image/svg+xml;utf8,'), auto !important; } /* Reading Mask (Lichtbalken) */ #a11y-reading-mask { position: fixed; left: 0; width: 100vw; height: 150px; background: rgba(0, 0, 0, 0.4); box-shadow: 0 -3000px 0 3000px rgba(0,0,0,0.4), 0 3000px 0 3000px rgba(0,0,0,0.4); z-index: 9999; pointer-events: none; display: none; transform: translateY(-50%); } body.a11y-reading-mask-active #a11y-reading-mask { display: block; } /* Leselinie (Fokus-Linie folgt dem Cursor) */ #a11y-reading-line { position: fixed; left: 0; width: 100vw; height: 2px; background: #e32526; z-index: 9998; pointer-events: none; display: none; transform: translateY(-50%); box-shadow: 0 0 0 1px rgba(227, 37, 38, 0.15), 0 -24px 0 24px rgba(227, 37, 38, 0.04), 0 24px 0 24px rgba(227, 37, 38, 0.04); } body.a11y-reading-line-active #a11y-reading-line { display: block; } /* Widget specific styling to prevent interference */ .a11y-widget-btn.active-card { background-color: #3b82f6 !important; color: white !important; border-color: #2563eb !important; } .a11y-widget-btn.active-card svg { stroke: white !important; fill: white !important; } .a11y-color-btn.active { outline: 3px solid #3b82f6; outline-offset: 2px; } /* Custom Toggle Switch for Widget */ .a11y-toggle-input:checked + .a11y-toggle-bg { background-color: #3b82f6; } .a11y-toggle-input:checked + .a11y-toggle-bg .a11y-toggle-dot { transform: translateX(20px); } /* ========================================== SECTION BOX TITEL – Responsive ========================================== */ /* Desktop: volle Größe wie bisher */ .cp-section-title { font-size: 1.875rem; /* text-3xl = 30px */ font-weight: 700; color: #1a2b4c; /* cpblue */ min-width: 0; /* erlaubt Umbruch in flex */ word-break: break-word; overflow-wrap: break-word; line-height: 1.25; } /* Mobil (< 640px): kleinere Schrift, zweizeilig möglich */ @media (max-width: 639px) { .cp-section-title { font-size: 1.25rem; /* 20px – passt sicher in jede Box */ line-height: 1.3; } }