/* ========================================================================= BARRIEREFREIHEITS-MODI · a11y.css (SAR-34) ------------------------------------------------------------------------- Übernommen aus dem Schwesterprojekt „Kein Einzelfall" und auf diese Seite übertragen. Lädt NACH theme.css, darf also Tokens umdefinieren. ZWEI REGELN, DIE DEN GANZEN AUFBAU TRAGEN: 1. Alles hängt an Attributen und Klassen auf , gesetzt von a11y.js. Kein Modus fasst einzelne Bausteine an. Dadurch gilt jede Regel automatisch auch für Komponenten, die es heute noch gar nicht gibt. 2. Die Kontrastmodi arbeiten ausschließlich über die Farb-Tokens aus theme.css. Sie sind deshalb kurz, obwohl sie die ganze Seite umfärben – Frontend wie Admin, Kalender wie Formulare. Was hier NICHT drin ist: die Leichte Sprache. Das ist keine Darstellungs- einstellung, sondern ein zweiter Textbestand – den schreibt Sarah. ========================================================================= */ /* --- Stellschrauben, die das Panel dreht --------------------------------- Die Standardwerte sind die, die die Seite ohne Einstellung hat. Wer nichts anfasst, sieht also genau das, was vorher da war. */ :root { --a11y-font-scale: 1; --a11y-line-height: 1.6; --a11y-letter-spacing: 0em; } /* Grundschrift = Browsereinstellung × Nutzerfaktor. `100%` und keine px-Angabe: Wer im Browser eine größere Grundschrift eingestellt hat, behält sie (WCAG 1.4.4). Weil die ganze Seite seit SAR-34 in rem an zehn Tokens hängt, wächst mit diesem einen Faktor alles gleichmäßig – Schrift, Abstände, Kartenhöhen, Knöpfe. */ html { font-size: calc(100% * var(--a11y-font-scale)); } body { line-height: var(--a11y-line-height); letter-spacing: var(--a11y-letter-spacing); } /* --- Gut lesbare Schrift ------------------------------------------------- Die Hausschriften sind Fredoka (Überschriften) und Roboto Mono (Fließtext). Beide sind schön, beide sind nicht für jeden gut lesbar – eine Monospace für ganze Absätze schon gar nicht. Dieser Modus tauscht sie gegen die Systemschrift, also gegen die, die auf dem Gerät ohnehin am besten sitzt. */ html.a11y-lesbar body, html.a11y-lesbar :is(h1, h2, h3, h4, h5, h6, p, a, li, span, strong, em, button, label, input, textarea, select, figcaption, dt, dd, th, td) { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif !important; } /* --- Schrift für Legasthenie --------------------------------------------- Ohne Zusatzschrift: OpenDyslexic ist nicht für jeden Einsatz frei. Statt dessen die Faktoren, die nachweislich am meisten helfen – Abstände, Zeilenhöhe und begrenzte Zeilenlänge. Linksbündig, weil Blocksatz die Wortabstände unregelmäßig macht. */ html.a11y-dyslexie body { font-family: Verdana, Tahoma, sans-serif !important; letter-spacing: 0.08em !important; word-spacing: 0.18em !important; line-height: 2 !important; } html.a11y-dyslexie :is(p, li, dd) { max-width: 62ch; text-align: left !important; } /* --- Links hervorheben --------------------------------------------------- */ html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; text-decoration-thickness: 2px !important; font-weight: 600 !important; } /* Knöpfe sind schon als Fläche erkennbar. Unterstrichen sähen sie aus wie ein Link IN einem Knopf. */ html.a11y-links a.btn { text-decoration: none !important; } /* --- Großer Mauszeiger --------------------------------------------------- */ html.a11y-cursor, html.a11y-cursor * { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M4 2l7 18 2.5-7.5L21 10z' fill='%23fff' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") 4 2, auto !important; } /* --- Bewegung stoppen --------------------------------------------------- Diese Seite hat mehr Bewegung als die meisten: die ziehenden Farbwolken im Hintergrund, die einblendenden Abschnitte, die getippte Überschrift, der schrumpfende Header. Der Modus hält alles an. `prefers-reduced-motion` gibt es bereits in nd-base.css und greift von selbst. Dieser Schalter ist für die, die das im Betriebssystem nicht eingestellt haben oder es nur für diese Seite wollen. */ html.a11y-ruhe *, html.a11y-ruhe *::before, html.a11y-ruhe *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } /* Die einblendenden Abschnitte hängen an einer Klasse, die JavaScript erst beim Scrollen setzt. Ohne Übergang bliebe sie unsichtbar stehen – deshalb hier ausdrücklich sichtbar. */ html.a11y-ruhe .reveal { opacity: 1 !important; transform: none !important; } html.a11y-ruhe [data-typewriter] { visibility: visible !important; } /* --- Bilder ausblenden -------------------------------------------------- Für Menschen, die von Bildern überreizt werden. `visibility` und nicht `display`, damit der Platz erhalten bleibt und das Layout nicht springt. Icons bleiben: Sie sind Teil der Bedienung, nicht Bildmaterial. */ html.a11y-bilder :is(img, picture, video, .arc-figure, .hero-arc) { visibility: hidden !important; } html.a11y-bilder .page-aurora, html.a11y-bilder .photo-wrap::before { display: none !important; } /* Der Bogen und die Fotorahmen sind Hintergrundbilder bzw. gedrehte Flächen – ohne Bild darin bleibt sonst ein leerer schiefer Kasten stehen. */ html.a11y-bilder :is(.photo, .video-frame) { box-shadow: none !important; transform: none !important; border: 0 !important; } /* --- Leselinie ---------------------------------------------------------- Waagerechte Linie, die dem Zeiger folgt. Hilft beim Halten der Zeile. */ #leselinie { display: none; } html.a11y-leselinie #leselinie { display: block; position: fixed; left: 0; right: 0; height: 0; border-top: 3px solid var(--accent); box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6); pointer-events: none; z-index: 9999; } /* ========================================================================= KONTRASTMODI ------------------------------------------------------------------------- Umgesetzt durch Umdefinieren der Farb-Tokens aus theme.css. Dadurch zieht jeder Modus automatisch durch alle Komponenten – auch durch künftige. ========================================================================= */ /* --- Dunkel ------------------------------------------------------------- Warm gehalten und nicht kaltes Grau: Die Seite soll auch dunkel nach dieser Marke aussehen und nicht nach Systemeinstellung. */ html[data-kontrast='dunkel'] { --bg: #1B1722; --bg-secondary: #221D2B; --bg-card: #272130; --section-alt-bg: rgba(34, 29, 43, 0.85); --text: #F1ECF6; --text-soft: #C6BDD2; --muted: #A399B0; /* Die Leitfarbe kehrt sich hier um. Hell ist sie ein ABGEDUNKELTES Grün (#30751E, siehe theme.css) – auf diesem Grund käme das auf 1,6:1 und wäre praktisch unsichtbar. Dunkel muss dasselbe Grün AUFGEHELLT werden. Es ist derselbe Wert wie --footer-accent im hellen Schema, denn dort ist die Fläche ebenfalls dunkel. 8,59:1 auf dem Grund, 7,61:1 auf der Karte, dunkler Text darauf 8,59:1 – dieselben Zahlen, die das helle Violett vorher hatte und die auch Sarahs eigenes Grün (#51CC74) hier hatte. SEIT SAR-81 (22.08.2026) ist es Sanders Farbton (107° statt 137°), nach derselben Rechnung aufgehellt wie hell abgedunkelt. Wer das hier vergisst, wenn er in theme.css die Leitfarbe wechselt, bekommt eine Seite, die im Dunkelmodus noch in der alten Farbe steht – auffallen würde das erst, wenn jemand den Modus einschaltet. */ --accent: #5BCD3D; --accent-hover: #86DA6F; --accent-text: #5BCD3D; --on-accent: #1B1722; --accent-soft: rgba(91, 205, 61, 0.16); /* Die Flaechen-Token aus theme.css MUESSEN hier mitgesetzt werden. Sie stehen dort auf `:root`, also am selben Element wie dieser Block – ohne eigene Zuweisung behielte der Dunkelmodus Sanders helles Logo-Gruen auf dunklem Grund und dazu die dunkle Schrift von dort. Dunkel dreht sich das Verhaeltnis ohnehin schon um: Die Flaeche ist hier hell und die Schrift dunkel, also ist `--accent` bereits die richtige Farbe. */ --accent-surface: #5BCD3D; /* Dunkelmodus: Die Schrift im Hero ist hier HELL, der Schleier also dunkel. Dieselbe Rechnung wie in theme.css, nur andersherum. */ --hero-video-scrim: rgba(27, 23, 34, 0.72); --accent-surface-hover: #86DA6F; --on-accent-surface: #1B1722; /* DIE KANALKNOEPFE (SAR-87). Die Fuellungen bleiben, wie sie sind – es sind fremde Marken, und ein aufgehelltes TikTok-Schwarz waere keins mehr. Was sich aendert, ist die KANTE: Schwarz auf #1B1722 kommt auf 1,19:1, der Knopf verschwaende ohne sie schlicht im Hintergrund. #C6BDD2 ist --text-soft dieses Modus und kommt auf 9,74:1 gegen den Grund und 11,54:1 gegen die schwarze Flaeche. Instagram bekommt sie mit, aus einem zweiten Grund: Seine Fuellung traegt zwar 3,72:1 gegen den Grund, beim Hover faellt sie aber auf 2,92:1. Mit Kante traegt den Umriss ohnehin die Kante. */ --brand-tiktok-edge: #C6BDD2; --brand-instagram-edge: #C6BDD2; /* Der Videorahmen (SAR-88). Hell steht dort ein helles Gruen; dunkel waere das ein leuchtender Block mitten auf der dunklen Seite. Also derselbe Farbton, nur tief - und die Schrift kehrt sich um. Schrift auf der Flaeche 6,42:1. */ --video-frame-bg: #293E23; --video-frame-text: #C6BDD2; --border: rgba(241, 236, 246, 0.16); --border-strong: rgba(241, 236, 246, 0.32); --header-bg: rgba(27, 23, 34, 0.92); --input-bg: #201B28; --placeholder: #9A90A8; --row-hover: rgba(241, 236, 246, 0.06); --day-head-bg: #221D2B; --glass-card: rgba(39, 33, 48, 0.78); /* Der Fuß ist im Standard die dunkle Fläche der Seite. Dunkel wäre er nicht mehr abgesetzt – deshalb hier eine Stufe dunkler als der Grund. */ --bg-footer: #120F17; --footer-text: #F1ECF6; --footer-muted: #B3A9C0; --footer-accent: #5BCD3D; --footer-border: rgba(241, 236, 246, 0.14); --footer-hover: rgba(241, 236, 246, 0.08); /* Statusfarben aufhellen: Die Textvarianten waren für hellen Grund gerechnet und wären hier nicht zu lesen. */ --green-text: #8FD6A6; --yellow-text: #E8C65A; --red-text: #FF9E82; --green-soft: rgba(62, 165, 91, 0.20); --yellow-soft: rgba(232, 181, 23, 0.20); --red-soft: rgba(228, 87, 46, 0.20); /* Die Farbwolken im Hintergrund dürfen dunkel kaum sichtbar sein, sonst wird der Fließtext darüber unruhig. */ --aurora-1: rgba(62, 165, 91, 0.20); --aurora-2: rgba(124, 58, 237, 0.16); --aurora-3: rgba(240, 138, 36, 0.12); --aurora-4: rgba(59, 125, 216, 0.16); /* Der Hero trug einen hellen Schleier, der die Schrift vom Bild trennt. Dunkel muss er dunkel sein, sonst leuchtet er als weißer Nebel. */ --hero-overlay: linear-gradient(180deg, rgba(27, 23, 34, 0.35) 0%, rgba(27, 23, 34, 0.62) 55%, var(--bg) 100%); } /* --- Hoher Kontrast ---------------------------------------------------- Reines Schwarz/Weiß, Gelb als einziger Akzent – die maximale Trennschärfe. Gelb und nicht die Leitfarbe: Sanders Akzent-Grün #30751E kommt auf Schwarz auf 3,69:1 und fällt für Text damit durch – genau wie Sarahs Grün davor (3,67:1) und das Violett davor (3,69:1). Weder der Farbwechsel vom 18.08.2026 noch der auf Sander (SAR-81) ändert an dieser Entscheidung etwas. Auch Sanders Originalwert #43a22a hilft hier nicht, obwohl er auf Schwarz mit 6,44:1 durchkäme: In diesem Modus soll es EINEN Akzent geben und nicht einen zweiten Grünton neben --green-text. Dasselbe Argument wie beim hellen Regenbogen-Grün #3EA55B (6,74:1). */ html[data-kontrast='hoch'] { --bg: #000000; --bg-secondary: #000000; --bg-card: #000000; --bg-footer: #000000; --section-alt-bg: #000000; --text: #FFFFFF; --text-soft: #FFFFFF; --muted: #FFFFFF; --accent: #FFFF00; --accent-hover: #FFFF00; --accent-text: #FFFF00; /* Auch hier gilt: Flaeche gelb, Schrift schwarz – das ist ohnehin der Aufbau dieses Modus. Ohne diese drei Zeilen bliebe Sanders Gruen stehen und der Modus haette seinen Zweck verfehlt. */ --accent-surface: #FFFF00; /* Hochkontrast: Der Schleier wird fast undurchsichtig. Hier zählt Lesbarkeit vor Bild – das Video bleibt als Ahnung stehen, mehr nicht. */ --hero-video-scrim: rgba(0, 0, 0, 0.92); --accent-surface-hover: #FFFF00; --on-accent-surface: #000000; /* Auch die Kanalknoepfe werden gelb (SAR-87). In diesem Modus gibt es genau einen Akzent – eine fremde Marke ist kein Grund fuer eine Ausnahme, im Gegenteil: Wer ihn braucht, braucht ihn ueberall. Erkennbar bleiben die beiden an Icon und Beschriftung. */ --brand-tiktok: #FFFF00; --brand-tiktok-hover: #FFFF00; --brand-tiktok-edge: #FFFF00; --on-brand-tiktok: #000000; --brand-instagram: #FFFF00; --brand-instagram-hover: #FFFF00; --brand-instagram-edge: #FFFF00; --on-brand-instagram: #000000; /* Videorahmen (SAR-88): schwarz mit weisser Schrift wie alles hier. Ein Gruenton waere in diesem Modus eine zweite Farbe neben Gelb. */ --video-frame-bg: #000000; --video-frame-text: #FFFFFF; --on-accent: #000000; --accent-soft: #000000; --border: #FFFFFF; --border-strong: #FFFFFF; --header-bg: #000000; --input-bg: #000000; --placeholder: #FFFFFF; --row-hover: rgba(255, 255, 0, 0.18); --day-head-bg: #000000; --glass-card: #000000; --footer-text: #FFFFFF; --footer-muted: #FFFFFF; --footer-accent: #FFFF00; --footer-border: #FFFFFF; --footer-hover: rgba(255, 255, 0, 0.18); --green-text: #7CFF9E; --yellow-text: #FFFF00; --red-text: #FF9E82; --green-soft: #000000; --yellow-soft: #000000; --red-soft: #000000; /* Die Farbwolken und der Hero-Verlauf sind Zierde und stören hier den Kontrast. Aus. */ --aurora-1: transparent; --aurora-2: transparent; --aurora-3: transparent; --aurora-4: transparent; --hero-bg: #000000; --hero-overlay: none; /* Der Regenbogen ist die Marke, aber als Farbverlauf auf Schwarz ist er eine Linie, die stellenweise verschwindet. Hier trägt ihn Gelb. */ --gradient-rainbow: #FFFF00; --gradient-rainbow-v: #FFFF00; /* Die Kachel-Akzente hängen an sieben Regenbogenfarben (theme.css). Vier davon kommen auf Schwarz nicht über 4,5:1. Alle auf Gelb. */ --c-red: #FFFF00; --c-orange: #FFFF00; --c-yellow: #FFFF00; --c-green: #FFFF00; --c-teal: #FFFF00; --c-blue: #FFFF00; --c-violet: #FFFF00; } /* Links und Knöpfe brauchen ein zweites Merkmal neben der Farbe. */ /* Der Spektrum-Kreis: Toenung weg, Kante bleibt. In diesem Modus sind alle sieben Regenbogen-Tokens Gelb und der Grund Schwarz – eine transparente Farbflaeche darueber waere ein schmutziger Fleck, der den Kontrast der Schrift senkt, ohne noch etwas zu unterscheiden. Uebrig bleiben gelbe Kreise mit weisser Schrift auf Schwarz; getrennt werden sie durch die Beschriftung, nicht mehr durch die Farbe. */ html[data-kontrast='hoch'] .spektrum-feld { background: none; border-width: 3px; } /* Der Kern traegt sonst ein gedaempftes Grau als Kante – auf Schwarz ist das ein kaum sichtbarer Ring. Hier bekommt er die Schriftfarbe, also Weiss, und hebt sich damit von den gelben Feldern ab: Der Oberbegriff sieht anders aus als seine Auspraegungen, auch ohne Farbe. */ html[data-kontrast='hoch'] .spektrum-kern { background: none; border-width: 3px; border-color: var(--text); } html[data-kontrast='hoch'] :is(a, button) { text-decoration: underline; } html[data-kontrast='hoch'] a.btn { text-decoration: none; border-width: 2px; } /* Schatten sind auf Schwarz unsichtbar und nehmen den Karten die Kante. */ html[data-kontrast='hoch'] :is(.card, .feature-card, .video-frame, .photo, .cta-inner, .week-day) { box-shadow: none; border: 1px solid #FFFFFF; } html[data-kontrast='hoch'] :focus-visible { outline: 3px solid #FFFF00 !important; outline-offset: 3px; } /* --- Graustufen -------------------------------------------------------- */ html[data-kontrast='monochrom'] { filter: grayscale(1); } /* --- Das Logo im Header ------------------------------------------------ Sarahs Logo trägt schwarze Schrift („Fahrlehrerin") auf durchsichtigem Grund. Auf dem hellen Standard-Header stimmt das; auf dunklem oder schwarzem Grund verschwindet die Hälfte des Logos. Deshalb eine helle Platte darunter. Ein Tausch der Bilddatei im Header wäre die andere Lösung, dann müsste die helle Fassung aber auf jeder Seite geladen werden, auch von allen, die diesen Modus nie einschalten. Hier stand bis zum 19.08.2026 zusätzlich, der Fuß brauche die Platte nicht, weil dort die helle Logo-Fassung laufe. Der Fuß trägt seit SAR-49 gar kein Logo mehr, sondern eine Wortmarke aus Text; die Begründung ist damit gegenstandslos. Die Seitenleiste der Schaltzentrale zeigt die helle Fassung weiterhin und kommt ohne Platte aus. */ html[data-kontrast='dunkel'] .brand-logo, html[data-kontrast='hoch'] .brand-logo { background: #FDF8F0; border-radius: 14px; padding: 4px 8px; } /* --- Die Logos der Wegbegleiter ---------------------------------------- Dasselbe Problem eine Etage tiefer, nur schlimmer: Fremde Logos sind für den hellen Grund gezeichnet, auf dem sie normalerweise stehen. Das Logo der Fahrschule Sander etwa schreibt „FAHRSCHULE" in Schwarz – dunkel verschwindet das halbe Wort, im Schwarz-Weiß-Modus das halbe Logo. Und anders als bei Sarahs eigenem Logo ist eine helle Zweitfassung hier keine Option: Sie müsste vom Partner kommen, und für jeden neuen Wegbegleiter noch einmal. Die Platte gilt deshalb für alle und hält diesen Fall ein für alle Mal offen. Die Kachel selbst bleibt dunkel – nur das Logo bekommt seinen hellen Grund, so groß wie nötig und keinen Millimeter größer. */ /* Hier stand bis zum 19.08.2026 eine Ausnahme von „jeder Link bekommt einen Unterstrich": Die Kachel war als Ganzes ein Link und enthielt drei Zeilen Fließtext, die der Modus alle unterstrichen hätte. Seit die Kachel nur noch das Logo trägt, gibt es darin keinen Text mehr – die Ausnahme ist gegenstandslos und deshalb raus. */ html[data-kontrast='dunkel'] .partner-logo, html[data-kontrast='hoch'] .partner-logo, html[data-kontrast='dunkel'] .partner-head-logo, html[data-kontrast='hoch'] .partner-head-logo { background: #FDF8F0; border-radius: 10px; padding: 6px 10px; /* Die Seite rechnet global mit `border-box` – damit fräßen die 6 px Polsterung oben und unten das Logo von 46 auf 34 px herunter, und es stünde im dunklen Modus kleiner da als im hellen. Hier also die Ausnahme: Die Höhe meint das Logo, die Platte kommt obendrauf. DIE KACHEL WÄCHST DADURCH NICHT MEHR MIT, seit ihre Höhe fest steht (SAR-75, 21.08.2026). Sie ist auf das größte Logo-Kästchen gerechnet, und das sind die 96 px eines blockigen Logos auf eigener Platte – die 12 px hier bringen ein blockiges Logo auf 92 px und bleiben darunter. Nachgemessen in allen drei Modi: 290 × 152 px, überall dieselbe Kachel. Wer diese Polsterung erhöht, prüft `--partner-logo-box` in nd-base.css mit. */ box-sizing: content-box; } /* DASSELBE FÜR DAS LOGO DER FAHRSCHULE IN DER SEKTION „WIE DU BEI MIR FAHRSCHÜLER:IN WIRST" (SAR-91). Es ist dieselbe Datei wie in der Reihe unten, steht dort aber ohne Kachel frei auf der Fläche: Ohne Platte verschwände „FAHRSCHULE" in Schwarz im dunklen Modus genauso. Die Regel steht als eigener Block und nicht im Selektor darüber, weil sie andere Werte braucht: Das Logo ist hier gut dreimal so breit wie in der Kachel, und die 6 px Polsterung von dort säßen daran wie eine zu enge Fassung. `box-sizing: content-box` aus demselben Grund wie oben, nur für die Breite: Die Deckelung in theme.css meint das Logo, die Platte kommt obendrauf. */ html[data-kontrast='dunkel'] .enroll-logo, html[data-kontrast='hoch'] .enroll-logo { background: #FDF8F0; border-radius: 12px; padding: 10px 16px; box-sizing: content-box; } /* AUSGENOMMEN: Logos, die ihre eigene Platte mitbringen (`--plate` in nd-base.css, seit dem 20.08.2026). Die helle Platte oben rettet dunkle Marken. Eine HELLE Marke rettet sie nicht, sie erledigt sie: Das Mintgrün von moooov steht auf Creme genauso bei 1,4:1 wie auf Weiß. Solche Logos behalten deshalb in jedem Modus ihren dunklen Grund. Der ist ihr eigener, nicht unserer, und liefert dort 10:1 – mehr als die helle Platte je erreicht. Die Regel steht hier und nicht oben, weil sie eine Ausnahme von dieser Ausnahme ist und sonst niemand sie fände. */ html[data-kontrast='dunkel'] .partner-logo--plate, html[data-kontrast='hoch'] .partner-logo--plate, html[data-kontrast='dunkel'] .partner-head-logo--plate, html[data-kontrast='hoch'] .partner-head-logo--plate { background: var(--logo-plate, #1F2B37); padding: 8px 12px; } /* ========================================================================= DIE LEISTE SELBST ------------------------------------------------------------------------- Der Knopf klebt senkrecht mittig am linken Rand: auf jeder Seite und in jeder Scrollposition an derselben Stelle. Links, weil rechts der Regenbogenbogen des Heros und auf dem Handy der Hamburger sitzen. ========================================================================= */ .a11y-tab { /* NUR die Platzierung. Aussehen und Maße stehen bei `.rand-tab` in theme.css – der Knopf teilt sie sich mit Sarahs Kanälen darunter (SAR-36). Standen sie hier ein zweites Mal, liefen die drei Reiter beim nächsten Anfassen auseinander; genau das ist beim Einbau des Labels passiert. */ position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 60; } /* Der Zähler sitzt in der Ecke des Knopfs und zeigt, wie viele Einstellungen aktiv sind. Kleiner als --fs-xs geht hier ausnahmsweise nicht anders: Es ist eine einzelne Ziffer in einem 18-px-Kreis, kein Text. */ .a11y-zaehler { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; padding: 0 4px; border-radius: 999px; background: var(--accent-surface, var(--accent)); color: var(--on-accent-surface, var(--on-accent)); font-family: var(--font-head); font-size: 11px; font-weight: 700; line-height: 1; } .a11y-panel { position: fixed; left: 12px; right: 12px; top: 50%; transform: translateY(-50%); z-index: 61; max-height: 86vh; overflow-y: auto; padding: 1.1rem 1.2rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-card); box-shadow: var(--shadow-lg); } @media (min-width: 560px) { .a11y-panel { right: auto; width: 21rem; left: 52px; } } .a11y-panel-kopf { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; } .a11y-titel { margin: 0; font-family: var(--font-head); font-size: var(--fs-lg); color: var(--text); } .a11y-schliessen { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border: 0; border-radius: 999px; background: none; color: var(--text-soft); font-size: var(--fs-xl); line-height: 1; cursor: pointer; } .a11y-schliessen:hover { background: var(--accent-soft); color: var(--text); } .a11y-gruppe { padding: .75rem 0; border-bottom: 1px solid var(--border); } .a11y-gruppe:last-of-type { border-bottom: 0; } .a11y-label { margin: 0 0 .5rem; font-family: var(--font-head); font-size: var(--fs-sm); color: var(--text); } .a11y-stufen { display: flex; flex-wrap: wrap; gap: .4rem; } .a11y-stufe { padding: .4rem .8rem; border: 1px solid var(--border-strong); border-radius: 999px; background: var(--bg-card); color: var(--text-soft); font-family: var(--font-head); font-size: var(--fs-xs); cursor: pointer; } .a11y-stufe[aria-pressed='true'] { background: var(--accent-surface, var(--accent)); border-color: var(--accent-surface, var(--accent)); color: var(--on-accent-surface, var(--on-accent)); } /* Der Schalter ist ein Knopf mit aria-pressed – kein Kontrollkästchen. Die Schiene daneben ist reine Anzeige (aria-hidden), den Zustand trägt das Attribut. */ .a11y-schalter { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 0; border: 0; background: none; color: var(--text); font-family: var(--font-body); font-size: var(--fs-sm); text-align: left; cursor: pointer; } .a11y-schalter-spur { position: relative; flex-shrink: 0; width: 42px; height: 24px; border-radius: 999px; background: var(--border-strong); transition: background .15s; } .a11y-schalter-spur > span { position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 999px; background: var(--bg-card); box-shadow: 0 1px 2px rgba(0, 0, 0, .3); transition: transform .15s; } .a11y-schalter[aria-pressed='true'] .a11y-schalter-spur { background: var(--accent-surface, var(--accent)); } .a11y-schalter[aria-pressed='true'] .a11y-schalter-spur > span { transform: translateX(18px); } .a11y-reset { width: 100%; margin-top: .9rem; padding: .55rem 1rem; border: 1px solid var(--border-strong); border-radius: 999px; background: none; color: var(--text-soft); font-family: var(--font-head); font-size: var(--fs-sm); cursor: pointer; } .a11y-reset:hover { background: var(--accent-soft); color: var(--text); } .a11y-hinweis { margin: .8rem 0 0; font-size: var(--fs-xs); color: var(--muted); line-height: 1.5; } /* AUF DEM HANDY SITZT DER KNOPF UNTEN RECHTS, seit dem 21.08.2026. Die Stelle ist die dritte, und die beiden davor sind je an einer Sache gescheitert: UNTEN LINKS (bis heute) lag er über dem Inhalt – auf der Startseite über dem Knopf „Fahrschule Sander" im Hero, zusammen mit den beiden Kanal-Reitern daneben (Kevin, 21.08.2026). IN DER KOPFZEILE, oben links, hielt genau einen Nachmittag: Auf dem Handy steht die Marke oben mittig und WANDERT BEIM SCROLLEN NACH LINKS (Mechanik in nd-base.css, 740er Block). Sobald man scrollte, lag der Knopf auf dem Logo. Wer dort etwas hinsetzt, muss diese Bewegung kennen. UNTEN RECHTS ist die Ecke, die auf dieser Seite niemandem gehört: Die Knöpfe im Hero laufen über die volle Breite oder stehen links, der Sprunglink sitzt oben links, sonst schwebt hier nichts mehr – die Kanäle sind seit heute im Menü. Und für die Hand, die das Gerät hält, ist die untere Ecke der kürzeste Weg. ER BLEIBT DABEI, WO ER IM QUELLTEXT STAND: gleich hinter dem Sprunglink und damit zweiter Tab-Stopp. `position: fixed` löst ihn aus dem Fluss, an der Reihenfolge ändert keine dieser Positionen etwas. 44 px statt der 52 aus `--rand-tab-h`: freistehend in einer Ecke wirkt der hohe Reiter wie ein Rest der Randleiste, die er einmal war. 44 px ist zugleich die Untergrenze für eine sichere Berührfläche, tiefer darf er nicht. Und weil er nicht mehr am Rand klebt, bekommt er seine linke Kante und alle vier Ecken zurück. */ @media (max-width: 559px) { .a11y-tab { top: auto; bottom: 14px; left: auto; right: 10px; transform: none; height: 44px; margin-left: 0; border-left: 1px solid var(--border-strong); border-radius: var(--radius-sm); } } /* --- Im Admin: unten rechts statt am linken Rand ------------------------- Links klebt dort die dunkle Seitenleiste, und der Reiter lag mitten auf ihren Menüpunkten (Nils, 22.09.2026: „im Weg"). Unten rechts gehört im Admin niemandem – dieselbe Ecke, in die er auf dem Handy ohnehin zieht, mit denselben Maßen. Rechts verankert wächst er beim Aufklappen des Namens nach LINKS, bleibt also im Bild. Das Panel öffnet sich darüber, rechts bündig, statt mittig links neben einem Knopf, der dort nicht mehr steht. Auf dem Handy bleibt es bei der Regel oben (volle Breite). Der Abstand unter dem Inhalt sorgt dafür, dass der Knopf am Seitenende nicht auf den Aktionsknöpfen der letzten Tabellenzeile liegt. */ .admin-body .a11y-tab { top: auto; bottom: 14px; left: auto; right: 14px; transform: none; height: 44px; margin-left: 0; border-left: 1px solid var(--border-strong); border-radius: var(--radius-sm); } .admin-body .admin-content { padding-bottom: 5rem; } @media (min-width: 560px) { .admin-body .a11y-panel { left: auto; right: 14px; top: auto; bottom: 70px; transform: none; } }