/* ============================================================ code dimension — Grundlagen ============================================================ Diese Datei traegt die Barrierefreiheitsschicht, die im Entwurf in assets/responsive.css steckte. Sie ist beim Umbau von Inline-Angaben auf Klassen der Teil, der am leichtesten verlorengeht — nichts sieht kaputt aus, wenn ein Fokusring fehlt. Jede Regel hier nennt deshalb ihr Kriterium. ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* WCAG 2.4.11 — Fokus nicht verdeckt (Minimum). Der Kopfbereich steht fest. Ohne diesen Abstand landet ein angesprungenes Ziel darunter und der Fokus ist unsichtbar. */ scroll-padding-top: calc(var(--cd-kopf-gesamt) + 16px); } /* Unterhalb von 1100 px schrumpft der Kopf auf eine Zeile — und die feste Leiste am unteren Rand kommt dazu (layout.css:978). Das Gegenstueck nach UNTEN fehlte. Gemessen bei 390 px: Der fokussierte Handlungsknopf des Seitenkopfs wurde von der Leiste zu 70 Prozent verdeckt (58 von 82 px), weil der Browser beim Fokussieren nur bis zur Fensterkante scrollt und die feste Leiste nicht kennt. WCAG 2.4.11 war damit gerade noch gehalten — ein Reststreifen blieb sichtbar —, 2.4.12 fiel durch. Die Hoehe steht als eigene Variable, weil layout.css:1254 sie ebenfalls liest (der Nach-oben-Knopf legt sich sonst auf die Leiste). Dort stand bisher ein Rueckfallwert von 0px und damit still gar kein Abstand. */ @media (max-width: 1100px) { html { --cd-mobilleiste-hoehe: 58px; scroll-padding-top: 96px; scroll-padding-block-end: calc(var(--cd-mobilleiste-hoehe) + 16px); } } body { margin: 0; background: var(--cd-weiss); color: var(--cd-tinte); font-family: var(--cd-schrift-text); font-size: var(--cd-gr-text); line-height: var(--cd-zeile-text); -webkit-font-smoothing: antialiased; text-wrap: pretty; /* WCAG 1.4.10 — Reflow. Nichts darf die Seite waagerecht ueber den Rand schieben. Ueberlaeufe werden an der Quelle behoben, nicht hier versteckt — deshalb kein overflow-x. */ min-height: 100dvh; } h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; } ul, ol { margin: 0; padding: 0; list-style: none; } /* ------------------------------------------------------------ Redaktionelle Listen ------------------------------------------------------------ Der Reset darueber nimmt Listen ihre Browsermarke. Das ist fuer Navigationen und gebaute Komponenten richtig, aber nicht fuer Fliesstext aus dem RTE: Dessen ul und ol kommen bewusst ohne Bauteilklasse. Sie bekommen hier Punkte beziehungsweise Zahlen sowie genug Einzug fuer die Marke zurueck. Die Regel erkennt redaktionelle Listen an der fehlenden Klasse. Dadurch bleiben alle benannten Komponentenlisten unveraendert. Brotkrumen liegen ebenfalls klassenlos im Markup, sind aber eine Navigation und werden im Gegenblock wieder neutralisiert. ------------------------------------------------------------ */ .cd-inhalt :where(ul:not([class]), ol:not([class])) { margin-block: var(--cd-a4); padding-inline-start: 1.4em; } .cd-inhalt :where(ul:not([class])) { list-style: disc; } .cd-inhalt :where(ol:not([class])) { list-style: decimal; } .cd-inhalt :where(ul:not([class]), ol:not([class])) > li::marker { color: var(--cd-rot); font-weight: 700; } /* Klassenlose Listen in einer Navigation sind Struktur, kein Fliesstext. Zurzeit betrifft das die Brotkrumen im Seitenkopf. */ .cd-inhalt :where(nav ul:not([class]), nav ol:not([class])) { margin: 0; padding: 0; list-style: none; } /* Zeilenabstand und Sperrung nach Grad, nicht pauschal: Der Entwurf setzt grosse Grade eng (44px/1.1, -.028em) und kleine luftiger (22px/1.25, -.018em). Ein gemeinsamer Wert fuer alle liesse die Schlagzeilen auseinanderfallen und die kleinen Ueberschriften kleben. */ h1, h2, h3, h4 { font-family: var(--cd-schrift-display); text-wrap: balance; } h1 { font-size: var(--cd-gr-h1); font-weight: 700; line-height: 1.06; letter-spacing: -.03em; } h2 { font-size: var(--cd-gr-h2); font-weight: 700; line-height: 1.1; letter-spacing: -.028em; } h3 { font-size: var(--cd-gr-h3); font-weight: 600; line-height: 1.25; letter-spacing: -.018em; } h4 { font-size: var(--cd-gr-h4); font-weight: 600; line-height: 1.25; letter-spacing: -.018em; } /* WCAG 1.4.12 — Textabstand. Fliesstext muss vergroesserte Zeilen- und Wortabstaende aushalten, ohne dass Inhalt abgeschnitten wird. Deshalb keine festen Hoehen an Textblocks. */ p { max-width: 68ch; } a { color: var(--cd-rot); text-decoration: none; } a:hover { color: var(--cd-rot-tief); } /* ------------------------------------------------------------ Unterstreichung nur im FLIESSTEXT ------------------------------------------------------------ Ein Link mitten im Satz muss sich vom Text daneben unterscheiden, und Farbe allein reicht dafuer nicht (WCAG 1.4.1). Deshalb die Unterstreichung. ABER: "li a[href]" ohne Eingrenzung trifft JEDE Liste — und Navigationen sind Listen. Damit lagen Hauptnavigation, Mega-Menue, Fussbereich und Menueschublade durchgehend unterstrichen da. Das sah aus wie ein Gestaltungsfehler und war einer. Die Regel gilt deshalb nur noch im Inhaltsbereich, und auch dort nicht fuer Bauteile, die als Knopf oder Kachel auftreten: Ein Knopf ist durch seine Flaeche schon unterscheidbar, eine Unterstreichung darin wirkt wie ein Fehler. ------------------------------------------------------------ */ .cd-inhalt :where(p, li, dd, blockquote, figcaption) a[href] { text-decoration: underline; text-underline-offset: .18em; } /* Ausnahmen innerhalb des Inhaltsbereichs. */ .cd-inhalt :where(p, li, dd) a.cd-knopf, .cd-inhalt :where(p, li, dd) a.cd-karte, .cd-inhalt :where(p, li, dd) a.cd-chip, .cd-inhalt :where(p, li) a[class*="__knopf"], .cd-inhalt :where(p, li) a[class*="__karte"], .cd-inhalt :where(p, li) a[class*="__kachel"], /* Die Projektzeile der Referenzliste. Sie steht in einem li und ist selbst die ganze Zeile — Bild, Kicker, Ueberschrift, Teaser und Pfeil liegen darin. Unterstrichen war damit ALLES, bis hinunter zum Pfeilzeichen. Ein Bauteil, das eine Flaeche ist, braucht die Unterstreichung nicht: Es ist ohnehin unterscheidbar, und beim Zeigen faerbt sich die Zeile. */ .cd-inhalt :where(p, li) a[class*="__zeile"] { text-decoration: none; } /* Das Kundenmenue ist eine Navigation, liegt aber IM Inhaltsbereich (unter
). Die nav-Ausnahme weiter unten wird AUSSERHALB von .cd-inhalt berechnet und verliert deshalb gegen die Prosa-Unterstreichung darueber — der aktive Punkt trug so eine graue Text-Unterstreichung ZUSAETZLICH zur roten Merklinie (doppelt). Hier gezielt und mit genug Gewicht zuruecknehmen. */ .cd-inhalt .cd-kundenmenue a[href] { text-decoration: none; } /* Dieselbe Lage im Ticket-System, im Portal-Dashboard und in der Anfragenliste: Listen- und Kachel-Links stehen in Bauteilen (Flaechen), nicht in Prosa — die Unterstreichung wirkt darin wie ein Fehler. WER EINE PORTALBAHN ERGAENZT, ERGAENZT SIE HIER. Ohne Eintrag traegt die neue Liste Unterstreichungen und sieht neben den anderen falsch aus; aufgefallen ist das bei cd_anfragen. */ .cd-inhalt :where(.cd-tickets, .cd-portal, .cd-anfragen, .cd-mitteilungen) a[href] { text-decoration: none; } /* Navigationen tragen nie eine Unterstreichung — ihre Punkte sind durch Stellung und Abstand als Bedienelemente erkennbar. Der aktive Punkt bekommt sein eigenes Merkmal (layout.css). */ :where(nav, .cd-kopf, .cd-fuss, .cd-mobilmenue, .cd-mega, .cd-kontaktschiene) a[href] { text-decoration: none; } img, svg, video { max-width: 100%; height: auto; } ::selection { background: var(--cd-rot); color: #fff; } button { font: inherit; color: inherit; } /* ------------------------------------------------------------ WCAG 2.4.7 — Fokus sichtbar, und 1.4.11 Kontrast ------------------------------------------------------------ Ein Ring in zwei Lagen: heller Kern, dunkler Saum. So traegt er auf hellem UND auf dunklem Grund. Nicht gerundet. ------------------------------------------------------------ */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 3px solid var(--cd-rot); outline-offset: 2px; border-radius: 1px; } /* Auf dunklen Bahnen wuerde Rot auf Anthrazit zu schwach kontrastieren — dort weiss. */ .cd-auf-dunkel :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible, .cd-fuss :where(a, button, [tabindex]):focus-visible { outline-color: #fff; } /* ------------------------------------------------------------ WCAG 2.5.8 — Zielgroesse (Minimum) ------------------------------------------------------------ 24 x 24 px fuer alles Bedienbare, auf Fingergeraeten 44 px. Ausgenommen sind Links IM Fliesstext — dort waere eine Mindestflaeche schaedlich, sie wuerde die Zeilen sprengen. ------------------------------------------------------------ */ a[href], button, [role="button"], summary, input[type="checkbox"], input[type="radio"] { min-block-size: var(--cd-zielgroesse, 24px); min-inline-size: var(--cd-zielgroesse, 24px); } p a[href], li a[href], span a[href] { min-block-size: 0; min-inline-size: 0; } /* Ein Kaestchen IN einem Label braucht die Mindestflaeche nicht selbst — das Label ist das Ziel. Genau wie beim Link in der Zeile eine Zeile darueber. WARUM DAS HIER STEHEN MUSS und nicht im Formular-Stylesheet: cd_kontakt.css sagt seit dem Bau „ein 44 px grosses Kaestchen saehe falsch aus" und setzt 18 px — vergeblich. input[type= "checkbox"] traegt (0,1,1), eine blosse Klasse nur (0,1,0); die Regel oben gewann und machte jedes Kaestchen am Finger 44 x 44 px. Gemessen am 03.09.2026 auf /kontakt: 44 x 44 bei 390 und 834 px, 24 x 24 am Rechner. Das Label war dabei 324 x 100 px gross — die Zielflaeche war also laengst erfuellt. :not(.cd-nurlesen) ist keine Vorsicht, sondern noetig: die Filterknoepfe der Referenzen und die Anhalte-Schalter von Logoband und Abfolge sind versteckte Kaestchen in einem Label. Ohne die Ausnahme bekaemen sie hier 18 px und waeren sichtbar. */ label input[type="checkbox"]:not(.cd-nurlesen), label input[type="radio"]:not(.cd-nurlesen) { min-block-size: 0; min-inline-size: 0; inline-size: 18px; block-size: 18px; } /* Und die Flaeche wandert an das Label. Sonst haelt ein kurzes Label („Ja") die 44 px nicht mehr, sobald das Kaestchen sie abgibt. */ label:has(> input[type="checkbox"]:not(.cd-nurlesen)), label:has(> input[type="radio"]:not(.cd-nurlesen)) { min-block-size: var(--cd-zielgroesse, 24px); } /* DASSELBE NOCH EINMAL FUER DAS GESCHWISTER-MUSTER. Die Regel darueber verlangt ein Kaestchen IM Label. EXT:felogin baut die Zeile „Angemeldet bleiben" anders: Kaestchen und Label stehen nebeneinander und sind ueber for= verbunden. Die Ausnahme griff dort nicht — und cd_felogin.css setzt zwar 18 px, verliert aber gegen das min-block-size oben, genau wie cd_kontakt.css es schon einmal getan hat. Gemessen am 04.09.2026 auf /kundenbereich/anmeldung: 390 px (Finger) Kaestchen 44 x 44 Beschriftung 118 x 21 834 px (Finger) Kaestchen 44 x 44 Beschriftung 118 x 21 1440 px (Maus) Kaestchen 24 x 24 Beschriftung 118 x 21 Ein Kaestchen, doppelt so hoch wie die Schrift daneben. Die Zielflaeche war dabei nie in Gefahr — sie wandert hier an die Beschriftung, die ohnehin mitschaltet. :has(+ label) trifft nur Kaestchen, denen wirklich eine Beschriftung folgt. Ein alleinstehendes Kaestchen ohne Label behaelt die volle Zielflaeche — es hat ja nichts, woran sie uebergehen koennte. */ input[type="checkbox"]:not(.cd-nurlesen):has(+ label), input[type="radio"]:not(.cd-nurlesen):has(+ label) { min-block-size: 0; min-inline-size: 0; inline-size: 18px; block-size: 18px; } input[type="checkbox"]:not(.cd-nurlesen) + label, input[type="radio"]:not(.cd-nurlesen) + label { display: inline-flex; align-items: center; min-block-size: var(--cd-zielgroesse, 24px); } /* ------------------------------------------------------------ WCAG 2.4.1 — Bereiche ueberspringen ------------------------------------------------------------ Im Entwurf fehlte diese Marke. Sie ist sichtbar, sobald sie den Fokus hat — nicht per display:none versteckt, das nimmt sie aus der Tabreihenfolge. ------------------------------------------------------------ */ .cd-sprungmarke { position: absolute; inset-inline-start: var(--cd-a4); inset-block-start: calc(var(--cd-a4) * -6); z-index: var(--cd-e-dialog); padding: var(--cd-a3) var(--cd-a5); background: var(--cd-rot); color: #fff; font-weight: 600; border-radius: 0 0 var(--cd-r-knopf) var(--cd-r-knopf); transition: inset-block-start var(--cd-zeit) var(--cd-kurve); } .cd-sprungmarke:focus { inset-block-start: 0; color: #fff; } /* ABER NICHT BEI MAUSBEDIENUNG. Der Knopf „Nach oben" setzt den Fokus auf diese Marke — das ist richtig, sonst stuende er nach dem Sprung weiter am Seitenende (WCAG 2.4.3). Mit :focus allein fuhr die Marke dabei aber auch dann heraus, wenn jemand den Knopf mit der MAUS gedrueckt hat: Ein Bedienelement fuer die Tastatur erschien ohne Tastatur. :focus bleibt stehen und wird nur zurueckgenommen, wo der Browser den Fokus als „nicht sichtbar noetig" einstuft. Andersherum — gleich :focus-visible zu schreiben — waere ein Rueckschritt fuer Browser ohne diese Faehigkeit: Dort erschiene die Marke gar nicht mehr, und das Ueberspringen waere unbedienbar. */ @supports selector(:focus-visible) { .cd-sprungmarke:focus:not(:focus-visible) { inset-block-start: calc(var(--cd-a4) * -6); } } /* Der Inhaltsbereich bekommt den Fokus per Skript, soll aber keinen Ring zeigen — der Sprung ist die Rueckmeldung. */ .cd-inhalt:focus { outline: none; } /* Nur fuer Vorleseprogramme. */ .cd-nurlesen { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* ------------------------------------------------------------ FALLE: nicht mit einem pauschalen Reset erschlagen ------------------------------------------------------------ Ein globales `* { margin: 0 }` oder ein eigener dialog-Reset hebelt die Voreinstellungen des Elements aus — Fokusfalle, Esc und inerter Hintergrund haengen daran. Das hat in zwei Projekten Modalboxen zerlegt. Deshalb wird dialog hier ausdruecklich NICHT zurueckgesetzt; nur Rahmen und Polster werden gesetzt. ------------------------------------------------------------ */ dialog { border: 0; padding: 0; color: inherit; background: transparent; } dialog::backdrop { background: rgb(13 26 33 / .62); } /* ------------------------------------------------------------ WCAG 2.3.3 — Bewegung aus Interaktionen ------------------------------------------------------------ Gilt fuer die Seite. Eingebettete SVG erreicht diese Regel NICHT — jede Illustrationsdatei bringt ihren eigenen Rueckzug mit. Beim Uebernehmen der 52 Grafiken darauf achten. ------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; /* Der animation-Kurzwert setzt animation-timeline NICHT zurueck. Ohne diese Zeile liefe eine scroll-getriebene Animation trotz abbestellter Bewegung weiter — Dauer und Wiederholung sind dort ohne Bedeutung, weil der Fortschritt am Blaettern haengt. */ animation-timeline: auto !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }