/* ═══════════════════════════════════════════════════════════════════════════ Wohnkonzept Oberberg – a11y-mode.css Barrierefrei-Modus (Umschalter im Header). Aktiv, wenn die Klasse .wko-a11y trägt. Der Standard-Look bleibt unberührt – dieser Modus legt für ältere Nutzer und Menschen mit Seheinschränkung nach: - größere Schrift & Bedienflächen (Root-Skalierung via rem) - stärkere Kontraste (Neu-Definition der Farb-Tokens) - keine Animationen/Hover-Effekte, unterstrichene Links - kräftige Fokus-Indikatoren ═══════════════════════════════════════════════════════════════════════════ */ /* ── Skalierung & Token-Overrides ────────────────────────────────────────── */ html.wko-a11y { /* Alle rem-basierten Größen wachsen um 12,5 % */ font-size: 112.5%; /* Header wächst mit – body-padding nutzt dieselbe Variable und bleibt synchron */ --header-height: 104px; --header-height-sm: 74px; /* etwas mehr Luft im geschrumpften Header (war 66px) */ /* Kontrastreiche Farb-Tokens: Weiß statt Grau-Beige, Schwarz statt #111, dunkleres Kupfer (≥7:1 auf Weiß) für Akzent-Texte */ --color-bg: #ffffff; --color-text: #000000; --color-dark-blue: #101a2e; --color-dark: #101a2e; --color-royal-blue:#101a2e; --copper-start: #7a4a1e; --copper-end: #7a4a1e; scroll-behavior: auto; } /* ── Basistext ───────────────────────────────────────────────────────────── */ html.wko-a11y body { font-size: 1.15rem; line-height: 1.8; letter-spacing: 0.01em; } /* Links immer unterstreichen – Farbe allein reicht nicht (WCAG 1.4.1) */ html.wko-a11y main a, html.wko-a11y .site-nav a, html.wko-a11y .site-footer a, html.wko-a11y .site-contact-footer a, html.wko-a11y .wko-breadcrumb a { text-decoration: underline; text-underline-offset: 2px; } /* ── Leistungs-Klappe: Kontrast vor Optik ────────────────────────────────── */ /* Milchglas heisst durchscheinender Hintergrund – über dem Hero-Bild sinkt damit der Textkontrast. In dieser Ansicht deshalb deckend, mit klarem Rahmen, und der Zeiger in derselben Farbe wie der Rahmen. */ html.wko-a11y .site-nav__sub { background: #ffffff; backdrop-filter: none; -webkit-backdrop-filter: none; border: 2px solid var(--color-dark-blue); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.25); } html.wko-a11y .site-nav .site-nav__toggle[aria-expanded="true"]::after { border-bottom-color: var(--color-dark-blue); } /* Aufgeklappter Punkt deutlicher getönt – auf Weiß sonst kaum zu sehen. */ html.wko-a11y .site-nav .site-nav__toggle[aria-expanded="true"] { background: rgba(122, 74, 30, 0.16); } /* Gruppentitel und Trennlinien mitwachsen lassen: 0,72 rem waeren hier 13 px und damit genau das, wogegen diese Ansicht antritt. */ html.wko-a11y .site-nav__group-title { font-size: 0.85rem; letter-spacing: 0.06em; } html.wko-a11y .site-nav__group:nth-child(n + 3), html.wko-a11y .site-nav__group + .site-nav__group { border-top-color: rgba(16, 26, 46, 0.3); } html.wko-a11y .site-nav__sub-list a:hover, html.wko-a11y .site-nav__sub-list a:focus-visible, html.wko-a11y .site-nav__sub-list a.is-current { background: rgba(122, 74, 30, 0.16); } /* ── Bewegung vollständig deaktivieren ───────────────────────────────────── */ html.wko-a11y *, html.wko-a11y *::before, html.wko-a11y *::after { animation: none !important; transition: none !important; } html.wko-a11y .reveal { opacity: 1 !important; transform: none !important; } /* ── Fokus-Indikatoren verstärken ────────────────────────────────────────── */ html.wko-a11y a:focus-visible, html.wko-a11y button:focus-visible, html.wko-a11y input:focus-visible, html.wko-a11y select:focus-visible, html.wko-a11y textarea:focus-visible, html.wko-a11y [tabindex]:focus-visible { outline: 4px solid #0b63ce !important; outline-offset: 3px; } /* ── Formulare: größere Felder & Bedienflächen (Zielgröße ≥ 44 px) ──────── */ html.wko-a11y input:not([type="checkbox"]):not([type="radio"]), html.wko-a11y select, html.wko-a11y textarea { min-height: 48px; font-size: 1.05rem; } html.wko-a11y button, html.wko-a11y .btn-primary { min-height: 48px; font-size: 1.05rem; } /* Icon-Button rund halten: gleiche Breite/Höhe trotz Button-min-height (48px) */ html.wko-a11y .a11y-toggle { width: 48px; height: 48px; min-height: 48px; } /* Header aufgeräumt: Der Rückruf-Button darf im Header kompakt bleiben (die 48px-Mindesthöhe gilt für Formular-Buttons, nicht hier), damit der geschrumpfte Header nicht überläuft. Elemente etwas enger zusammenrücken. */ html.wko-a11y .header-phone__badge { min-height: 0; padding: 0.4rem 0.9rem; } html.wko-a11y .header-phone { gap: 0.15rem; } html.wko-a11y .header-actions { gap: 0.75rem; } html.wko-a11y .wko-consent input[type="checkbox"] { width: 1.5rem; height: 1.5rem; } html.wko-a11y .wko-consent { font-size: 0.95rem; } html.wko-a11y ::placeholder { color: #595959 !important; opacity: 1; } /* ── Hero: Text auf Bild besser lesbar ───────────────────────────────────── */ /* Kein ganzflächiger Schleier – oben bleibt das Bild klar, nur unten (wo der weiße Titel sitzt) wird für den Kontrast abgedunkelt. */ html.wko-a11y .hero-new__overlay { background: linear-gradient( to bottom, rgba(16, 26, 46, 0) 0%, rgba(16, 26, 46, 0) 30%, rgba(16, 26, 46, 0.15) 50%, rgba(16, 26, 46, 0.72) 100% ); } html.wko-a11y .hero-new__text h1, html.wko-a11y .hero-new__text p { text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); } /* ── Service-Cards: Hover-Overlay aus, Vorderseite bleibt stehen ─────────── */ html.wko-a11y .card:hover .card__front, html.wko-a11y .card:focus-within .card__front { opacity: 1; } html.wko-a11y .card__overlay { display: none; } html.wko-a11y .card:hover, html.wko-a11y .card:focus-within { transform: none; } html.wko-a11y .card__details-link { color: var(--color-dark-blue); font-weight: 700; } html.wko-a11y .card:hover .card__details-link, html.wko-a11y .card:focus-within .card__details-link { color: var(--color-dark-blue); } /* Verkauf-Blöcke: Zoom-Effekt aus */ html.wko-a11y .verkauf-row:hover .verkauf-image img, html.wko-a11y .verkauf-row:focus-within .verkauf-image img { transform: none; } /* ── Karten/Flächen: klare Ränder statt zarter Schatten ─────────────────── */ html.wko-a11y .card, html.wko-a11y .immo-card, html.wko-a11y .sp-feature, html.wko-a11y .cert-card { border: 2px solid rgba(16, 26, 46, 0.45); } /* ── Footer: hellere Links auf Dunkelblau (Kontrast bleibt hoch) ─────────── */ html.wko-a11y .site-footer { color: rgba(255, 255, 255, 0.92); } html.wko-a11y .site-footer a:not(.site-footer__back-btn) { color: #f0b491; } /* Kontaktblock (NAP): gedämpfte Grautöne auf volle Deckkraft anheben */ html.wko-a11y .site-contact-footer, html.wko-a11y .site-contact-footer__area, html.wko-a11y .site-contact-footer__hours { color: rgba(255, 255, 255, 0.92); } html.wko-a11y .site-contact-footer__contact a { color: #f0b491; } /* ── Breadcrumb & Nebentexte dunkler ─────────────────────────────────────── */ html.wko-a11y .wko-breadcrumb__list { color: #1a2233; font-size: 0.95rem; } html.wko-a11y .hero-form--copper .hero-form__desc, html.wko-a11y .contact-intro, html.wko-a11y .cert-card__issuer { color: #1a2233; } html.wko-a11y .hero-form--blue .hero-form__desc, html.wko-a11y .hero-form--blue .wko-consent { color: #ffffff; }