/* Die dunklen Werte stehen EINMAL, als --d-*. Darunter gibt es zwei Regeln, die sie zuweisen — eine für die ausdrückliche Wahl, eine für „der Rechner entscheidet". Eine Farbe zu ändern heißt hier eine Zeile zu ändern; vorher hätte man die zweite Liste vergessen und nur eines der beiden Verhalten korrigiert. */ :root { --d-bg:#12131a; --d-fg:#e8e9ee; --d-leise:#9a9cab; --d-linie:#2a2c38; --d-flaeche:#191b24; --d-akzent:#8fb2e8; --d-rahmen:#686c80; --d-warn-bg:#2a2214; --d-warn-li:#a97c28; --d-ok:#6ec38f; color-scheme: light; --bg:#f6f7f9; --fg:#1a1a2e; --leise:#5a5c6b; --linie:#dcdee5; --flaeche:#fff; --akzent:#2b4c7e; --warn-bg:#fff6e5; --warn-li:#e0a03a; /* ⚠️ Zwei Randfarben, und der Unterschied ist kein Geschmack. --linie (1,25:1) ist reine Zier: Trennstriche, Kanten von Flächen. Für so etwas verlangt WCAG nichts. --rahmen (3,23:1 hell / 3,31:1 dunkel) gehört an alles, was man anklicken kann. WCAG 1.4.11 verlangt dort 3:1, weil sonst nicht erkennbar ist, wo ein Bedienelement anfängt und aufhört. Gemessen: mit --linie lagen alle Pillen und runden Knöpfe bei 1,25:1. */ --rahmen:#86899a; /* Grün nur für den Gemeinnützigkeits-Haken. Beide Töne gegen ihren Hintergrund geprüft: 4,7:1 hell, 7,1:1 dunkel — über den 4,5:1 aus WCAG 2.1 AA. Der Haken trägt ohnehin keine Information allein, der Text daneben sagt dasselbe. */ --ok:#2e7d4f; } /* Ausdrücklich gewählt (Cookie gesetzt). ⚠️ :not([data-kontrast]) an beiden Dunkelregeln ist kein Zierrat: ohne es entschiede zwischen „dunkel" und „hoher Kontrast" die Reihenfolge im Stylesheet. Explizit ausgeschlossen bleibt es richtig, auch wenn jemand die Blöcke später umsortiert. */ :root[data-thema="dunkel"]:not([data-kontrast]) { color-scheme: dark; --bg:var(--d-bg); --fg:var(--d-fg); --leise:var(--d-leise); --linie:var(--d-linie); --flaeche:var(--d-flaeche); --akzent:var(--d-akzent); --warn-bg:var(--d-warn-bg); --warn-li:var(--d-warn-li); --ok:var(--d-ok); --rahmen:var(--d-rahmen); } /* Ohne Wahl entscheidet das Betriebssystem. Das :not([data-thema]) ist der entscheidende Teil: ohne es würde ein Rechner im Dunkelmodus die ausdrückliche Wahl „hell" wieder überschreiben, und der Schalter wäre in genau einer Richtung wirkungslos. */ @media (prefers-color-scheme: dark) { :root:not([data-thema]):not([data-kontrast]) { color-scheme: dark; --bg:var(--d-bg); --fg:var(--d-fg); --leise:var(--d-leise); --linie:var(--d-linie); --flaeche:var(--d-flaeche); --akzent:var(--d-akzent); --warn-bg:var(--d-warn-bg); --warn-li:var(--d-warn-li); --ok:var(--d-ok); --rahmen:var(--d-rahmen); } } /* --- Hoher Kontrast --------------------------------------------------- * * Reines Schwarz auf Weiß bzw. Weiß auf Schwarz: Verhältnis 21:1, das * höchste überhaupt mögliche. Alle gedämpften Töne verschwinden — --leise * ist hier NICHT grau, sondern dieselbe Vordergrundfarbe. Genau das ist der * Zweck: die Nebenangaben im Fuß sind sonst der erste Text, der wegfällt. * * Die Linien werden von 1px hellgrau zu voller Vordergrundfarbe, damit * Pillen, Rahmen und Trenner überhaupt sichtbar bleiben. * * Blau bzw. Gelb als Akzent statt Schwarz: ein Link, der aussieht wie * Fließtext, ist im hohen Kontrast kein Gewinn, sondern ein neuer Verlust. */ :root[data-kontrast="hoch"] { color-scheme: light; --bg:#fff; --fg:#000; --leise:#000; --linie:#000; --flaeche:#fff; --akzent:#0000cc; --rahmen:#000; --warn-bg:#fff; --warn-li:#000; --ok:#005723; } :root[data-kontrast="hoch"][data-thema="dunkel"] { color-scheme: dark; --bg:#000; --fg:#fff; --leise:#fff; --linie:#fff; --flaeche:#000; --akzent:#7ab8ff; --rahmen:#fff; --warn-bg:#000; --warn-li:#fff; --ok:#4ce08a; } @media (prefers-color-scheme: dark) { :root[data-kontrast="hoch"]:not([data-thema]) { color-scheme: dark; --bg:#000; --fg:#fff; --leise:#fff; --linie:#fff; --flaeche:#000; --akzent:#7ab8ff; --rahmen:#fff; --warn-bg:#000; --warn-li:#fff; --ok:#4ce08a; } } /* Unterstrichene Links: im hohen Kontrast darf die Erkennbarkeit eines Links nicht allein an der Farbe hängen (WCAG 1.4.1). */ :root[data-kontrast="hoch"] a { text-decoration:underline; } /* --- Weitere Einstellungen ------------------------------------------- */ /* Zeilenabstand. WCAG 1.4.12 nennt das 1,5-fache der Schriftgröße als Maß, das Text für viele erst lesbar macht; „weiter" geht darüber hinaus. */ :root[data-zeilen="weit"] { --zeile:1.85; } :root[data-zeilen="weiter"] { --zeile:2.15; } /* Buchstaben- und Wortabstand, ebenfalls WCAG 1.4.12 (0,12em bzw. 0,16em). */ :root[data-abstand="weit"] body { letter-spacing:.12em; word-spacing:.16em; } /* Absatzabstand, das vierte und letzte Maß aus WCAG 1.4.12: mindestens das Doppelte der Schriftgröße. Die anderen drei gab es schon, dieses fehlte — und gerade es trennt Textblöcke für viele erst sichtbar voneinander. */ :root[data-absatz="weit"] main p, :root[data-absatz="weit"] main li, :root[data-absatz="weit"] main dd, :root[data-absatz="weit"] main address { margin-bottom:2em; } /* Breitere, offenere Schrift mit großer x-Höhe. ⚠️ Bewusst aus vorhandenen Systemschriften und NICHT „Legasthenie-Schrift" genannt: eine echte wie OpenDyslexic müsste als Datei mitgeliefert werden (font-src, rund 100 kB), und ihr Nutzen ist in Studien umstritten. Was unumstritten hilft, ist mehr Weißraum im Buchstaben — das leisten Verdana und Tahoma ohne einen einzigen zusätzlichen Abruf. */ :root[data-schriftart="lesbar"] body { font-family:Verdana,Tahoma,"DejaVu Sans","Bitstream Vera Sans",sans-serif; } /* Kürzere Zeilen. 48 rem sind bereits ein guter Wert; 34 rem landen bei etwa 45–55 Zeichen und helfen beim Wiederfinden des Zeilenanfangs. */ :root[data-breite="schmal"] main { max-width:34rem; } /* ⚠️ 72rem und nicht „so breit wie das Fenster": ab etwa 75 Zeichen pro Zeile findet das Auge den nächsten Zeilenanfang nicht mehr zuverlässig. 48rem liegt bei rund 96 Zeichen und ist damit schon am oberen Rand; 72rem ist eine bewusste Entscheidung für Leute mit viel Platz, keine Empfehlung. Deshalb ist es eine Einstellung und nicht die Voreinstellung. */ :root[data-breite="breit"] main { max-width:72rem; } /* Überschriften markieren: eine Kante in der Akzentfarbe. Kein farbiger Hintergrund — der müsste in vier Themenkombinationen einzeln auf Kontrast geprüft werden, die Kante nicht. */ :root[data-titel="betont"] main h1, :root[data-titel="betont"] main h2, :root[data-titel="betont"] main h3 { border-left:4px solid var(--akzent); padding-left:.65rem; } /* Kräftigerer Fokusrahmen für die Tastaturbedienung. Die Seite hat überall einen, aber 2 px sind auf einem hellen Bildschirm im Sonnenlicht wenig. */ :root[data-fokus="stark"] a:focus-visible, :root[data-fokus="stark"] [tabindex]:focus-visible { outline:4px solid var(--akzent) !important; outline-offset:3px !important; } /* Links hervorheben: unterstrichen und fetter, damit sie sich nicht allein durch die Farbe vom Fließtext abheben. */ :root[data-links="betont"] main a { text-decoration:underline; font-weight:600; } /* Bewegung anhalten. Wir achten schon auf prefers-reduced-motion, aber das hilft nur, wer die Einstellung im Betriebssystem gefunden hat. Dieser Schalter ist der Weg für alle anderen. ⚠️ Auch scroll-behavior wird zurückgenommen — sonst rollt der Knopf „nach oben" weiter sanft, und genau das ist für manche das Problem. */ :root[data-bewegung="aus"] { scroll-behavior:auto; } :root[data-bewegung="aus"] *, :root[data-bewegung="aus"] *::before, :root[data-bewegung="aus"] *::after { animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; } /* Knöpfe innerhalb der Bedienelemente bleiben ohne Unterstreichung — dort ist die Umrandung das Erkennungsmerkmal, nicht der Strich. */ :root[data-kontrast="hoch"] .nach-oben, :root[data-kontrast="hoch"] .fuss-nav a, :root[data-kontrast="hoch"] .thema a, :root[data-kontrast="hoch"] .zugang a, :root[data-kontrast="hoch"] .zugang summary, :root[data-links="betont"] .zugang a { text-decoration:none; } * { box-sizing:border-box; } html { /* Der klebende Kopf verdeckt sonst den Anfang jedes Sprungziels. */ scroll-padding-top:4.5rem; } /* Sanftes Rollen nur, wenn Bewegung nicht abbestellt ist. Für manche Menschen ist eine springende Seite nicht angenehm, sondern übel. */ @media (prefers-reduced-motion: no-preference) { html { scroll-behavior:smooth; } } /* ⚠️ WCAG 2.4.11 Focus Not Obscured (AA). Fara asta, derularea la focus aseaza elementul chiar sub subsolul lipit (`.fuss`, sticky bottom:0, z-index 18) — pe kontaktformular.php butonul de trimitere era focusat si complet invizibil. Valorile sunt masurate: antet pana la 5,3 rem, subsol pana la 15,2 rem (320 px latime, treapta de scris „groesser"). In rem fiindca amandoua cresc cu scrisul; o valoare in px ar ceda exact la treapta cea mai mare, adica la utilizatorii care au cea mai mare nevoie de ea. Cine schimba inaltimea antetului sau a subsolului remasoara aici. */ :root { scroll-padding-top:6rem; scroll-padding-bottom:16rem; } /* ⚠️ Die Schriftgröße steht in Prozent, nicht in px — und body erbt sie über rem. Vorher stand hier „font:16px/…", was die im Browser eingestellte Schriftgröße stillschweigend überschrieb: wer sein System auf 20 px gestellt hatte, bekam trotzdem 16. Prozent rechnen auf genau diesen Wert, der Schriftregler multipliziert ihn nur. */ :root[data-schrift="klein"] { font-size:87.5%; } :root[data-schrift="gross"] { font-size:112.5%; } :root[data-schrift="groesser"] { font-size:125%; } body { margin:0; background:var(--bg); color:var(--fg); font:1rem/var(--zeile,1.65) system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; display:flex; flex-direction:column; min-height:100vh; } a { color:var(--akzent); } a:hover { text-decoration:none; } /* Klebender Kopf. Der Hintergrund muss deckend bleiben — sonst schiebt sich der Text darunter durch, und bei durchscheinendem Grund wäre die Marke auf halbem Weg unlesbar. */ .kopf { position:sticky; top:0; z-index:20; border-bottom:1px solid var(--linie); background:var(--flaeche); } /* Im Kopf steht nur noch die Marke, also reicht text-align. Das frühere Raster mit drei Spalten war nötig, solange der Schalter rechts daneben saß — jetzt schwebt er, und die Marke ist von allein mittig. */ /* Drei Spalten: links der Menüknopf, mittig die Marke, rechts nichts. Die beiden 1fr-Spalten sind gleich breit, also steht die Marke in der ECHTEN Mitte — auch wenn der Knopf links Platz braucht. * * ⚠️ KEIN max-width. Hier stand bis zum 13.08.2026 `max-width:62rem; * margin:0 auto`, und damit wanderte der Menüknopf mit wachsendem Fenster * immer weiter in die Seite hinein: bei 1000 px saß er am Rand, bei 1440 px * 244 px daneben, bei 1920 px 484 px — mitten im Nichts, weil (Fensterbreite * − 62rem) / 2 als leerer Rand links von ihm liegt. Auf dem Telefon fiel es * nicht auf, weil dort kein Platz zum Wandern ist; deshalb blieb es stehen. * * Der Knopf gehört an den Rand des FENSTERS, nicht an den einer gedachten * Textspalte — dorthin greift die Hand, und dort sitzen auch die drei * schwebenden Schaltflächen dieses Auftritts. * * ⚠️ Das Polster ist 1rem, nicht 1,25rem: genau so viel wie `left` beim * Spendenherz. Beide stehen in derselben linken Gasse übereinander, und * eine Kante, die um vier Pixel danebenliegt, sieht nach Versehen aus. * Wer eines von beiden verschiebt, verschiebt das andere mit. */ /* ⚠️ Flex statt `grid-template-columns:1fr auto 1fr`. Das Raster reservierte * rechts genau so viel Platz, wie der Knopf links braucht — auch wenn dort * nichts steht. Auf 360 px blieben der Marke dadurch nur 229 px, während der * Slogan 264 px braucht: er brach in zwei Zeilen. Gemessen, nicht vermutet. * Mit `margin-inline:auto` an der Marke fällt die Geisterspalte weg; die * Marke sitzt dann mittig im FREIEN Platz statt mittig im Fenster. Der * Versatz ist auf dem Telefon kleiner als der Gewinn. */ .kopf .innen { padding:.7rem 1rem; display:flex; align-items:center; gap:.75rem; } .marke { margin-inline:auto; } /* ⚠️ Kein white-space:nowrap. Es stand hier und ist genau das Muster, das WCAG 1.4.12 bricht: mit Buchstabenabstand 0,12em, Wortabstand 0,16em und 125 % Schriftgröße wird „ICD360S e.V." rund 60 % breiter, und auf einem 320-px-Gerät hätte der Name nicht mehr umbrechen dürfen. Nachgerechnet passt er auch dann noch — aber die Regel verbot den Umbruch für jeden künftigen, längeren Namen gleich mit. */ .marke { grid-column:2; justify-self:center; font-weight:600; font-size:1.1rem; letter-spacing:.02em; text-decoration:none; color:var(--fg); } /* --- Slogan unter dem Namen ------------------------------------------- * * Der Name allein sagt niemandem, was der Verein tut — „ICD360S" ist eine * Buchstabenfolge. Der Slogan löst sie auf, und zwar buchstäblich: seine * Anfänge SIND der Name. Deshalb steht er direkt darunter und nicht * irgendwo auf der Startseite. * * ⚠️ Der Kopf ist sticky. Alles, was hier an Höhe dazukommt, fehlt auf * jedem Bildschirm dauerhaft. Gemessen: eine Zeile bei .72rem sind 15 px, * der Kopf wächst von 44 auf 59 px. Zwei Zeilen wären zu viel — deshalb * darf der Slogan unter 30rem umbrechen, aber die Schrift schrumpft dort * mit, damit es bei zwei Zeilen bleibt und nicht drei werden. */ /* ⚠️ min-height wegen WCAG 2.5.8 (Zielgröße 24×24). Bei 320 px fällt der Slogan weg (Regel bei 22rem weiter unten), übrig bleibt der Name — und der maß gemessen 100×20 px, also 4 px zu flach. Formal wäre das noch erlaubt, weil daneben ein zweiter Verweis auf die Startseite mit 44×44 steht und die Ausnahme „gleichwertiges Bedienelement" greift; eine Zielgröße, die von der Anwesenheit eines anderen Knopfes abhängt, ist aber genau die Sorte Erfüllung, die beim nächsten Umbau still verfällt. */ .marke { display:flex; flex-direction:column; align-items:center; gap:.12rem; line-height:1.25; min-height:24px; justify-content:center; } /* ⚠️ Fliessende Grösse statt Sprüngen an Schwellen. Sie wächst stetig mit * dem Fenster, statt bei 480 px von einem Wert auf den anderen zu springen — * und trifft damit auch die Breiten, an die niemand gedacht hat (360, 375, * 390 px liegen alle zwischen den bisherigen Stufen). * ⚠️ Der mittlere Wert MISCHT rem und vw. Ein reiner vw-Wert würde beim * Zoomen nicht mitwachsen und verstiesse gegen WCAG 1.4.4 — der rem-Anteil * hält die Schrift an die Einstellung des Benutzers gebunden. Genau davor * warnen die Anleitungen zu clamp(). */ .marke .s-slogan { font-weight:400; font-size:clamp(.53rem, .16rem + 1.55vw, .72rem); letter-spacing:.06em; text-transform:uppercase; color:var(--leise); display:flex; flex-wrap:wrap; justify-content:center; align-items:baseline; gap:0 .34rem; } /* Der Anfangsbuchstabe in der Tonfarbe der Seite: er zeigt, dass aus I-C-D-360-S der Name wird, ohne dass irgendwo „Akronym" stehen muss. ⚠️ Er trägt keine eigene Information (WCAG 1.4.1) — der Satz liest sich ohne die Farbe genauso, und im Kontrastmodus fällt sie ganz weg, weil --ton dort auf --fg liegt. */ .marke .s-slogan b { font-weight:700; color:var(--ton); } /* ⚠️ --leise, nicht --linie. Als --linie (#dcdee5) kamen die Trennpunkte auf 1,25:1. Sie sind aria-hidden und damit nach WCAG 1.4.3 als reine Dekoration ausgenommen — aber sie sind das Einzige, was die fünf Wörter des Akrostichons optisch trennt; wer sie nicht sieht, liest „IntegrationChancenDiversity". --leise ist eine gesetzte Textfarbe und dreht sich mit Schema und Kontrastmodus mit: 6,16:1 im hellen Schema. */ .marke .s-punkt { color:var(--leise); } /* Hält jeden Teil zusammen: „360°" ist EIN Teil des Slogans, und ein Umbruch zwischen Zahl und Gradzeichen sähe aus wie zwei. */ .marke .s-wort { white-space:nowrap; } /* Kein Unterstreichen des Slogans beim Überfahren: unterstrichen wird der Name, das Ziel des Links ist die Startseite und nicht der Satz. */ .marke:hover .s-name, .marke:focus-visible .s-name { text-decoration:underline; } @media (max-width:30rem) { /* Die Grösse regelt jetzt clamp(); hier bleibt nur, was enger stehen soll, damit die Zeile auf schmalen Geräten sicher hält. */ .marke .s-slogan { letter-spacing:.03em; gap:0 .22rem; } } /* Ganz schmale Geräte (320 px): der Slogan bräuchte drei Zeilen und verdrängt den Inhalt aus einem Kopf, der immer mitscrollt. Dort trägt ihn die Startseite, sichtbar und in voller Größe. ⚠️ display:none und nicht visibility/opacity — er soll dann auch nicht vorgelesen werden. Auf der Startseite steht derselbe Satz noch einmal; zweimal hintereinander vorgelesen wäre er dort eine Dopplung. */ @media (max-width:22rem) { .marke .s-slogan { display:none; } } /* --- Sprungmarke zum Inhalt (WCAG 2.4.1) ------------------------------- Unsichtbar, bis sie den Tastaturfokus bekommt. Bei geschlossenem Bedienfeld stehen nur vier Links vor dem Inhalt — bei geöffnetem sind es über dreißig, und genau dann rettet dieser eine Link den Tastaturnutzer. position:fixed, damit sie auch bei gerollter Seite oben am Fenster erscheint und nicht irgendwo im Dokument. */ .skip { position:fixed; left:.75rem; top:-5rem; z-index:60; padding:.65rem 1.1rem; border-radius:8px; background:var(--flaeche); color:var(--fg); border:2px solid var(--akzent); text-decoration:none; transition:top .15s; } .skip:focus { top:.75rem; } /* --- Sonne / Mond ---------------------------------------------------- */ /* Senkrecht gestapelt, weil die Leiste eine Spalte ist. Eigener Hintergrund und Schatten wie beim Knopf darüber, sonst schwebte eine durchsichtige Pille über dem Text. */ /* ⚠️ Alle vier schwebenden Knöpfe sind gleich groß — 2.9rem, dieselbe Zahl * wie bei .zugang-knopf. Bis zum 14.08.2026 war das nicht so: die beiden * Themawähler maßen 2.35rem (37,6 px) in einer Pille mit .25rem Polster, * die Kreise daneben 2.9rem (46,4 px). Die Pille wirkte dadurch als der * große Knopf und die Kreise daneben klein — dabei waren die Kreise die * größeren, nur eben einzeln. * * ⚠️ Der eigentliche Grund für die Änderung ist aber nicht die Optik: 37,6 px * liegen UNTER den 44 px, die WCAG 2.5.5 verlangt und die dieser Auftritt * sonst überall einhält (die Pillen im Fuß tragen dafür sogar einen * Kommentar). Ausgerechnet der Knopf, mit dem man die Darstellung barrierefrei * einstellt, war der kleinste. * * ⚠️ padding und gap sind jetzt 0, sonst würde die Pille breiter als die * Kreise und die Kante der Leiste stimmte nicht mehr. Dafür braucht sie * `overflow:hidden`: die beiden rechteckigen Felder werden damit von der * runden Außenform beschnitten, und die Markierung des aktiven Themas füllt * die Hälfte sauber aus, statt als Kreis darin zu schwimmen. */ .thema { display:flex; flex-direction:column; gap:0; overflow:hidden; border:1px solid var(--rahmen); border-radius:999px; padding:0; background:var(--flaeche); box-shadow:0 4px 14px rgba(0,0,0,.14); } .thema a { display:inline-flex; align-items:center; justify-content:center; width:2.9rem; height:2.9rem; border-radius:0; color:var(--fg); text-decoration:none; transition:background-color .15s, color .15s; } .thema a:hover { color:var(--fg); background:var(--bg); } .thema a:focus-visible { outline:2px solid var(--akzent); outline-offset:2px; } .thema svg { display:block; } /* Welches Symbol „an" ist, entscheidet dieselbe Logik wie die Farben — ausdrückliche Wahl schlägt Systemvorgabe. Der Zustand hängt damit nie an einem Wert, den der Server raten müsste. */ :root[data-thema="hell"] .thema-hell, :root[data-thema="dunkel"] .thema-dunkel { background:var(--bg); color:var(--fg); } @media (prefers-color-scheme: light) { :root:not([data-thema]) .thema-hell { background:var(--bg); color:var(--fg); } } @media (prefers-color-scheme: dark) { :root:not([data-thema]) .thema-dunkel { background:var(--bg); color:var(--fg); } } /* --- Bedienfeld Barrierefreiheit -------------------------------------- */ /* * Aufklappen ohne JavaScript über :target. Der Knopf ist ein Anker auf * #zugang, das Feld hängt an #zugang:target.
wäre die andere * Möglichkeit gewesen und scheitert hier an einem Detail: jede Einstellung * lädt die Seite neu, und ein
käme dabei jedes Mal zugeklappt * zurück. Der Anker überlebt den Neustart, weil die Weiterleitung #zugang * mitschickt. */ /* --- Schwebeleiste ---------------------------------------------------- * * Eine Spalte am rechten Rand, mittig in der Höhe: erst das Bedienfeld für * Barrierefreiheit, darunter Sonne/Mond. Beide gehören zur Darstellung, * also stehen sie beieinander statt einmal oben im Kopf und einmal * schwebend — zwei Orte für dieselbe Sache findet niemand. * * Weit genug vom Knopf „nach oben" unten rechts entfernt: die Leiste ist * rund 9 rem hoch und mittig, der Knopf sitzt 1,25 rem über der Unterkante. * Selbst auf einem kurzen Fenster von 600 px berühren sie sich nicht. */ /* ⚠️ Mittig OHNE transform. Ein Vorfahr mit `transform` wird zum * Bezugsrahmen für ALLE `position:fixed`-Nachfahren — und das Bedienfeld * darunter ist genau so eines. Mit translateY(-50%) rechnete es seine * `left`/`right` gegen diesen 46 px breiten Knopf statt gegen den * Bildschirm: auf dem Telefon klebte es rechts am Rand, und die * Einstellungen waren nicht zu sehen. Genau derselbe Fehler wie zuvor bei * den Fenstern innerhalb von `main` mit backdrop-filter. * `inset` plus `margin-block:auto` zentriert genauso, ohne transform. */ /* ⚠️ Oben verankert, auf derselben Höhe wie die linke Gasse (5.5rem) — die * beiden Ränder sollen auf einer Linie beginnen, sonst sieht es aus, als * wäre einer verrutscht. Dieselbe Begründung wie links: mittig heisst, dass * die Gruppe bei grösserer Schrift nach unten in den Fuss wächst. * ⚠️ WEITERHIN KEIN `transform`. Ein Vorfahr mit transform wird zum * Bezugsrahmen für `position:fixed`-Nachfahren, und das Bedienfeld * darunter ist genau so eines — mit translateY(-50%) klebte es auf dem * Telefon am rechten Rand statt mittig auf dem Schirm. Wer hier je wieder * zentrieren will, nimmt inset plus margin, nicht transform. * ⚠️ Reserve nach unten in rem, damit sie mit der Schriftgrösse wächst — * der Fuss tut das auch. */ .schwebe { position:fixed; right:1rem; top:5.5rem; z-index:40; display:flex; flex-direction:column; align-items:flex-end; gap:.55rem; max-height:calc(100dvh - 5.5rem - 12rem); overflow-y:auto; scrollbar-width:none; } .schwebe::-webkit-scrollbar { display:none; } /* Nur noch Bezugspunkt für das Feld daneben — das Schweben macht die Leiste. */ .zugang, .kontakt { position:relative; } /* ⚠️ Alle vier Symbole der Schwebeleiste sind 19 x 19 bei stroke-width 2 und * in var(--fg). Sie waren es nicht: Barrierefreiheit 19, Brief 18 (stroke * 1.9), Sonne und Mond 17 und dazu in var(--leise) — drei Größen, zwei * Strichstärken, zwei Farben in einer Reihe von vier Knöpfen. Auf dem Schirm * las sich das als „die beiden runden sind größer", obwohl die Knöpfe selbst * längst gleich groß waren. * * ⚠️ Die Farbe der Themasymbole ist damit nicht mehr der Hinweis darauf, * welches Thema gerade gilt — das trägt jetzt allein die hellere Fläche * hinter dem aktiven der beiden. Wer das ändert, braucht einen anderen * zweiten Hinweis; die Farbe allein war ohnehin nur einer. */ .zugang-knopf { display:inline-flex; align-items:center; justify-content:center; width:2.9rem; height:2.9rem; border:1px solid var(--rahmen); border-radius:999px; background:var(--flaeche); color:var(--fg); text-decoration:none; box-shadow:0 4px 14px rgba(0,0,0,.14); } .zugang-knopf:hover, .zugang-knopf:focus-visible { border-color:var(--akzent); color:var(--akzent); } .zugang a:focus-visible { outline:2px solid var(--akzent); outline-offset:2px; } /* * ⚠️ Zwei Knöpfe übereinander statt einem. * * Der Server sieht das Fragment NIE — #zugang wird nicht mitgeschickt. PHP * kann also unmöglich wissen, ob das Feld offen ist, und der Knopf könnte * sein Ziel nicht wechseln. Ein einzelner Anker auf #zugang öffnet deshalb * nur; ein zweiter Klick darauf ändert nichts, das Feld blieb stehen. * Also gibt es zwei Anker — einer öffnet, einer schließt — und CSS zeigt * je nach :target genau den richtigen. */ .zugang-knopf.zu { display:none; } #zugang:target .zugang-knopf.auf { display:none; } #zugang:target .zugang-knopf.zu { display:inline-flex; border-color:var(--akzent); color:var(--akzent); } /* Unsichtbare Fläche hinter dem Feld: ein Klick irgendwo daneben schließt. Ohne sie müsste man den kleinen Knopf wieder treffen. aria-hidden und tabindex=-1, damit dieser riesige Link nirgends auftaucht, wo er stört. */ /* ⚠️ Der Hintergrund ist jetzt SICHTBAR und dunkelt ab, statt nur eine unsichtbare Klickfläche zu sein. Zwei Gründe: das Feld liegt seit heute mittig auf dem Schirm und braucht eine Trennung vom Inhalt darunter, und ein abgedunkelter Grund sagt ohne Worte, dass alles andere gerade wartet. ⚠️ z-index 99, also UNTER dem Feld (100) und über allem anderen. */ .zugang-hintergrund { display:none; position:fixed; inset:0; z-index:99; background:rgba(12,22,38,.5); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); } #zugang:target .zugang-hintergrund { display:block; } /* ⚠️ MITTIG AUF DEM SCHIRM, auf jeder Grösse. Vorher hing es links neben * dem Knopf (`right:calc(100% + .55rem)`) — auf dem Rechner ging das, auf * dem Telefon klebte es am Rand. Ein Feld mit Einstellungen für Menschen, * die genau deswegen hier sind, gehört in die Mitte des Blicks. * ⚠️ `inset:0` plus `margin:auto` plus `height:fit-content` zentriert in * beiden Achsen OHNE transform — und ohne transform bleibt es unabhängig * von seinen Vorfahren. Mit translate(-50%,-50%) hinge es wieder an * `.schwebe` und wäre dort auf 46 px Breite gequetscht; genau dieser Fehler * war schon einmal da. */ .zugang-feld { display:none; position:fixed; inset:0; margin:auto; height:fit-content; width:min(28rem, calc(100vw - 2rem)); max-height:min(85dvh, 46rem); overflow-y:auto; z-index:100; padding:0 1.25rem 1.25rem; border:1px solid var(--rahmen); border-radius:18px; background:var(--flaeche); box-shadow:0 24px 60px rgba(12,22,38,.32); text-align:left; } #zugang:target .zugang-feld { display:block; } /* Auf schmalen Geräten öffnet es unten über die volle Breite: seitlich wären neben dem Knopf nur noch gut zwei Zentimeter übrig. */ @media (max-width:42rem) { /* Die Zentrierung gilt jetzt überall (siehe .zugang-feld oben); hier bleibt nur die Breite, damit auf schmalen Geräten Rand bleibt. */ .zugang-feld { width:calc(100vw - 1.5rem); } } /* Abschnittsüberschrift: mit zwölf Einstellungen in einer flachen Liste findet niemand mehr etwas wieder. Drei Abschnitte sind scannbar. */ /* ⚠️ Abschnittstitel ohne Trennlinie, dafür mit Farbe und Abstand. Eine Linie unter JEDER Überschrift zerlegt ein kurzes Feld in Streifen; in einem Fenster, das man in zwei Sekunden überfliegen soll, trennt Weissraum ruhiger als ein Strich. */ /* ⚠️ `position:sticky` im rollenden Feld: der Kopf bleibt oben stehen, während der Inhalt darunter durchläuft. Das Feld verliert dafür sein oberes Polster — der Kopf bringt es selbst mit, sonst entstünde beim Rollen ein Streifen Weiss über der Leiste. */ .zugang-kopf { position:sticky; top:0; z-index:2; display:flex; align-items:center; justify-content:space-between; gap:1rem; margin:0 -1.25rem .9rem; padding:.85rem 1.25rem; background:var(--flaeche); border-bottom:1px solid var(--linie); border-radius:18px 18px 0 0; } .zugang-kopf strong { font-size:.95rem; } .zugang-schliessen { display:inline-flex; align-items:center; justify-content:center; width:2.75rem; height:2.75rem; margin:-.5rem -.5rem -.5rem 0; border-radius:999px; color:var(--fg); text-decoration:none; } .zugang-schliessen:hover, .zugang-schliessen:focus-visible { background:var(--ton-flaeche); color:var(--ton); } .zugang-intro { margin:0 0 1.1rem; padding:.6rem .75rem; border-radius:10px; background:var(--ton-flaeche); color:var(--fg); font-size:.82rem; line-height:1.5; } .zugang-feld h2.zugang-teil { font-size:.8rem; font-weight:700; color:var(--ton); text-transform:uppercase; letter-spacing:.09em; margin:1.5rem 0 .8rem; padding:0; } .zugang-feld h2.zugang-teil:first-child { margin-top:0; } .zugang-feld h3 { font-size:.8rem; text-transform:none; letter-spacing:0; color:var(--fg); font-weight:600; margin:.9rem 0 .4rem; } /* ⚠️ Segmentwähler statt loser Knöpfe: die Auswahl einer Zeile gehört sichtbar zusammen. Die gemeinsame Fläche zeigt „hier ist EINE Wahl zu treffen", der gefüllte Knopf zeigt welche — das ist auf einen Blick lesbar, während vier gleich aussehende Rechtecke erst gelesen werden müssen. */ .zugang-reihe { display:inline-flex; flex-wrap:wrap; gap:.25rem; padding:.25rem; border-radius:12px; background:var(--ton-flaeche); } .zugang-reihe a { display:inline-flex; align-items:center; justify-content:center; min-height:2.4rem; padding:.3rem .85rem; border:1px solid transparent; border-radius:9px; background:transparent; color:var(--fg); text-decoration:none; font-size:.875rem; line-height:1; transition:background-color .15s, color .15s, border-color .15s; } .zugang-reihe a:hover { background:var(--flaeche); border-color:var(--rahmen); } /* ⚠️ Der laufende Zustand hängt NICHT allein an der Farbe (WCAG 1.4.1): gefüllte Fläche, Fettung UND Rahmen ändern sich gemeinsam. Wer Farben nicht unterscheidet, sieht immer noch den gefüllten Knopf. */ .zugang-reihe a[aria-current="true"] { background:var(--ton); border-color:var(--ton); color:var(--ton-auf); font-weight:700; } :root[data-kontrast="hoch"] .zugang-reihe a[aria-current="true"] { background:var(--fg); color:var(--bg); } .zugang-reihe .a1 { font-size:.78rem; } .zugang-reihe .a2 { font-size:.95rem; } .zugang-reihe .a3 { font-size:1.15rem; } .zugang-reihe .a4 { font-size:1.35rem; } .zugang-fuss { display:flex; flex-wrap:wrap; gap:.5rem 1rem; justify-content:space-between; align-items:center; margin-top:1.1rem; padding-top:.85rem; border-top:1px solid var(--linie); font-size:.875rem; } /* --- Spendenknopf, schwebend links -------------------------------------- * Gegenstück zur Leiste rechts. Ein dauerhaft sichtbarer Spendenknopf ist * bei gemeinnützigen Organisationen der übliche Weg — er wandert beim * Rollen mit, statt nur auf einer Unterseite zu warten. * * Nur das Herz, ohne das Wort „Spenden": ein Herz an dieser Stelle ist * eindeutig, und der Knopf bleibt damit so rund und ruhig wie die drei * rechts. Den Namen trägt aria-label — für Screenreader und als Tooltip * beim Verweilen ändert sich also nichts. * * Das Herz ist gefüllt und nicht nur umrissen: als einziges Symbol auf der * Seite ohne Text daneben braucht es die Fläche, um auf einen Blick als * Herz und nicht als Strichzeichnung gelesen zu werden. */ /* --- Spenden und Mitglied werden: grösser und in Farbe ------------------ * * ⚠️ Die Farben sind NICHT erfunden, sie kommen aus dem Farbleitsystem * dieses Auftritts: jede Seite trägt einen Ton, und der schwebende Knopf * trägt den Ton der Seite, zu der er führt — Spenden bernstein, Mitglied * indigo. Wer auf der Seite ankommt, sieht dieselbe Farbe wieder. * * ⚠️ Gemessen auf der Knopffläche, nicht geschätzt (WCAG 1.4.11 verlangt * 3:1 für Grafik): * bernstein #8a4b12 auf weiss 6,78:1 * indigo #414b9e auf weiss 7,71:1 * im dunklen Thema 8,92:1 bzw. 7,37:1 * Beide liegen weit über der Schwelle. Wer andere Farben nimmt, misst neu. * * ⚠️ Das Herz ist AUSGEFÜLLT, nicht als Umriss. Recherche zu Spendenknöpfen * (Neon One, Donorbox, Bonterra, 14.08.2026) sagt übereinstimmend: das Herz * ist das eingeführte Zeichen, es soll auffallen, und die Farbe soll sich * abheben — aber im Rahmen der eigenen Gestaltung bleiben. Ein Umriss in * Grau tut nichts davon. * * ⚠️ Grösser NUR ab 62rem. Auf dem Telefon liegen die Knöpfe ohnehin in * einer engen Gasse neben dem Text (siehe Regel weiter unten); dort wären * 3.5rem kein Gewinn, sondern weniger Platz zum Lesen. */ /* ⚠️ Die Farbe wird DIREKT in den Regeln unten gesetzt, nicht hier als Überschreibung. Ein erster Versuch stand vor ihnen und blieb wirkungslos: `.spende a { color:var(--fg) }` kommt später im Stylesheet, hat dieselbe Spezifität und gewinnt damit durch die Reihenfolge. Auf dem Bild sah man weiterhin zwei graue Umrisse. */ :root { --k-spende:#8a4b12; --k-mitglied:#414b9e; --k-ueberuns:#1f6b41; --k-aktuelles:#0f6070; --k-vertrauen:#1a5490; } :root[data-thema="dunkel"]:not([data-kontrast]) { --k-spende:#f0b064; --k-mitglied:#9ba6f5; --k-ueberuns:#5ed49a; --k-aktuelles:#5fd3e8; --k-vertrauen:#7fb6ea; } @media (prefers-color-scheme: dark) { :root:not([data-thema]):not([data-kontrast]) { --k-spende:#f0b064; --k-mitglied:#9ba6f5; --k-ueberuns:#5ed49a; --k-aktuelles:#5fd3e8; --k-vertrauen:#7fb6ea; } } /* Im hohen Kontrast zurück auf Schwarz: dort gilt Schwarz auf Weiss, und Farbe als einziger Unterschied ist genau das, was der Modus abstellt. */ :root[data-kontrast="hoch"] { --k-spende:var(--fg); --k-mitglied:var(--fg); --k-ueberuns:var(--fg); --k-aktuelles:var(--fg); --k-vertrauen:var(--fg); } /* Über uns und Aktuelles, über dem Herzen. Reihenfolge von oben: Über uns · Aktuelles · Spenden · Mitglied · Widerruf — von der Vorstellung des Vereins über das Laufende zu den beiden Handlungen. */ /* ⚠️ Sechs schwebende Knöpfe links, dazu drei rechts und der Pfeil nach * oben: ACHT feste Bedienelemente. Das ist eine bewusste Entscheidung des * Users vom 14.08.2026, getroffen nachdem die Gegenargumente auf dem Tisch * lagen — nicht ein Versehen. * * Was dagegen sprach, zum Nachlesen bei der nächsten Änderung: * • WCAG 2.2 SC 2.4.11 „Focus Not Obscured" (AA): ein Element mit * Tastaturfokus darf von festem Inhalt nicht verdeckt werden. Die * häufigste Ursache für Verstösse ist genau das Zusammenspiel aus * klebenden und schwebenden Elementen. * • Forschung zu schwebenden Knöpfen: sie stören das Ertasten, sind bei * VERGRÖSSERTER Schrift schwer zu umgehen und verdecken Bedienelemente * für Sprachsteuerung. Dieser Auftritt bietet vier Schriftstufen an. * * ⚠️ Deshalb der Schutz unten: unter 46rem Fensterhöhe verschwinden die * beiden untersten wieder. Sie stünden sonst im Fuss. Wer weitere ergänzt, * rechnet diese Schwelle neu: sechs Knöpfe mal 4.2rem Schritt sind 21rem, * plus Kopf und Fuss. */ /* Position kommt jetzt von .gasse. */ /* Position kommt jetzt von .gasse. */ .tr-schwebt a, .ok-schwebt a { display:inline-flex; align-items:center; justify-content:center; width:2.9rem; height:2.9rem; border:1px solid currentColor; border-radius:999px; background:var(--flaeche); text-decoration:none; box-shadow:0 4px 14px rgba(0,0,0,.14); transition:border-color .15s, color .15s; } .tr-schwebt a, .ok-schwebt a { color:var(--k-vertrauen); } .tr-schwebt, .ok-schwebt { transition:opacity .22s ease; } html.rollt .tr-schwebt, html.rollt .ok-schwebt { opacity:0; pointer-events:none; } @media (prefers-reduced-motion: reduce) { html.rollt .tr-schwebt, html.rollt .ok-schwebt { opacity:1; pointer-events:auto; } } :root[data-bewegung="aus"].rollt .tr-schwebt, :root[data-bewegung="aus"].rollt .ok-schwebt { opacity:1; pointer-events:auto; } /* ⚠️ Hier stand `@media (max-height:46rem) { .tr-schwebt, .ok-schwebt { display:none } }`. Entfernt: die Schwelle wuchs nicht mit der eingestellten Schriftgrösse mit (siehe Erklärung bei .gasse) und war damit genau dann wirkungslos, wenn sie gebraucht wurde. Die Begrenzung macht jetzt `max-height` an der Gasse — die rechnet in echten Pixeln des Fensters und stimmt bei jeder Schriftgrösse. */ /* --- Die Gasse: EIN Behälter für alle sechs Knöpfe ---------------------- * * ⚠️ Vorher trug jeder Knopf sein eigenes `position:fixed` und einen * `top:calc(50% ± n * schritt)`. Das ging schief, sobald jemand die Schrift * hochstellte: die Knöpfe und die Schritte wachsen mit (sie stehen in rem), * der unterste rutschte in den Fuss — und die Schutzregel dagegen war * `@media (max-height:46rem)`, die NICHT mitwächst. In Media Queries meint * `rem` die ANFÄNGLICHE Schriftgrösse des Wurzelelements, nicht die vom * Benutzer eingestellte. Die Schwelle blieb also bei 736 px stehen, während * alles andere grösser wurde. * * Als Flex-Spalte ist die Gruppe als GANZES mittig, ihre Höhe kennt der * Browser, und `max-height` begrenzt sie an echten Fensterhöhen — in dvh, * damit die ein- und ausfahrende Adressleiste auf dem Telefon nichts * verschiebt. Reicht der Platz trotzdem nicht, rollt die Gasse in sich * selbst, statt in den Fuss zu wandern. * * ⚠️ Wer einen siebten Knopf ergänzt, muss NICHTS nachrechnen. Das war * vorher anders und der eigentliche Grund für diesen Umbau. */ .gasse { /* ⚠️ Oben verankert, nicht mittig. Mittig hiess: die Gruppe wächst nach UNTEN in den Fuss, sobald die Schrift grösser gestellt wird — genau der gemeldete Fehler. Von oben herunter ist die Lage vorhersagbar. ⚠️ Die Reserve steht in rem, nicht in Pixeln: der Fuss wächst mit der Schriftgrösse mit, also muss der Abstand zu ihm dasselbe tun. Eine feste Pixelzahl wäre bei der grössten Stufe wieder zu klein — dieselbe Falle wie bei der alten Media Query. */ position:fixed; left:1rem; top:5.5rem; z-index:40; display:flex; flex-direction:column; gap:.7rem; max-height:calc(100dvh - 5.5rem - 12rem); overflow-y:auto; /* Auf dem Telefon dichter an den Rand: jeder Millimeter, den die Knöpfe nach links rücken, ist Lesebreite für den Text daneben. */ left:var(--gasse-rand, 1rem); /* Kein sichtbarer Rollbalken, solange nichts zu rollen ist. */ scrollbar-width:none; } .gasse::-webkit-scrollbar { display:none; } @media (max-width:48rem) { :root { --gasse-rand:.35rem; } } /* Position kommt jetzt von .gasse. */ /* ---------------------------------------------------- Sprachknopf ------ * * Kugel mit aufgesetzter Flagge. Die Flagge sitzt als kleine Plakette unten * rechts — dieselbe Stelle, an der Betriebssysteme das Sprachkürzel führen. * * ⚠️ Die Plakette hängt IM Knopf und nicht darüber hinaus. Ein Überhang * bräuchte einen negativen Versatz, und Flutter wie Browser werten Treffer * nur innerhalb der Elterngrenzen — der überhängende Teil wäre sichtbar und * tot. Bei 2,9 rem Knopfgröße ist innen genug Platz. */ /* ⚠️ Bewusst dieselben Werte wie `.zugang-knopf` — Rahmen aus var(--rahmen), Schrift aus var(--fg). Der Knopf steht jetzt in der rechten Leiste, direkt über dem Zugänglichkeitszeichen; ein eigener Akzentton hätte ihn dort als Fremdkörper wirken lassen. Links in der Gasse trug jeder Knopf die Farbe seines Themas, rechts trägt keiner eine — das ist der Unterschied zwischen „führt woandershin" und „stellt etwas um". */ .sp-schwebt a { position:relative; display:inline-flex; align-items:center; justify-content:center; width:2.9rem; height:2.9rem; border:1px solid var(--rahmen); border-radius:999px; background:var(--flaeche); color:var(--fg); text-decoration:none; box-shadow:0 4px 14px rgba(0,0,0,.14); transition:border-color .15s, color .15s; } .sp-schwebt a:hover, .sp-schwebt a:focus-visible { border-color:var(--akzent); color:var(--akzent); } .sp-schwebt a:focus-visible { outline:2px solid var(--akzent); outline-offset:2px; } /* ⚠️ Die Größe MUSS hier stehen und nicht im Aufruf von ikone(). ikone() schreibt zwar width="26" ins , aber die Regel `.ikone { width:1.15em }` weiter oben schlägt das Attribut — in CSS gewinnt eine Deklaration immer gegen ein Präsentationsattribut. Der Größenparameter der Funktion ist an dieser Stelle also WIRKUNGSLOS, und zwar lautlos: der Aufruf sieht richtig aus, das Bild ändert sich nicht. Genau das ist beim ersten Anlauf passiert — 21 → 22 → 26 ohne jede sichtbare Wirkung, nachgemessen am Bildschirmfoto: unverändert 16×15 px. 1.5rem = 24 px. Gerechnet, nicht geraten: das Zugänglichkeitszeichen daneben ist mit 19 px angegeben und füllt seinen viewBox fast ganz, ergibt also rund 20 px Tinte. Das Übersetzen-Zeichen belegt im viewBox nur y=2…22, also 83 % — für dieselben 20 px braucht es 20 / 0,83 ≈ 24 px. Optische Größe ist nicht Kantenlänge. ⚠️ KORREKTUR 15.08.2026: die Rechnung stimmte, die Annahme darunter nicht. „Füllt seinen viewBox fast ganz" galt für das Zugänglichkeitszeichen NICHT — nachgemessen im Browser (getBBox gegen die viewBox) belegt die Figur waagerecht nur 69 % der Kantenlänge, das Übersetzen-Zeichen dagegen 92 %. Bei GLEICHER Kantenlänge ist das Übersetzen-Zeichen also ein Drittel breiter, nicht schmaler. Mit den 24 px hier gegen 19 px dort stand auf dem Telefon 22,0 px Tinte neben 13,1 px — die doppelte Fläche, in einem gleich großen Kreis. Genau das war die Meldung „der Knopf für Barrierefreiheit ist zu klein": nicht der Kreis war kleiner, der Nachbar darüber war voller. Deshalb steht die Zahl jetzt an DERSELBEN Schwelle wie bei den drei anderen Zeichen der Leiste: 19 px unter 62rem, 24 px darüber. Wer sie ändert, ändert `.zugang-knopf svg, .thema a svg` mit. */ .sp-schwebt .ikone { width:19px; height:19px; } /* ⚠️ KEINE Flaggenplakette mehr auf dem Knopf (Wunsch des Users, 14.08.2026 — „scoate steagul, nu are sens"). Sie sollte anzeigen, welche Sprache gerade eingestellt ist. Der Einwand ist berechtigt: wer die Seite gerade liest, SIEHT die Sprache — die Plakette beantwortete eine Frage, die sich niemand stellt, und kostete dafür ein Viertel der Knopffläche. Weg damit; die gewählte Sprache steht ohnehin im Fenster dahinter mit Haken. Nebenwirkung, die zugleich die zweite Meldung erledigt: ohne Plakette darf das Zeichen den Knopf ausfüllen. Es stand vorher auf 21 px und wirkte neben dem 19-px-Zugänglichkeitszeichen KLEINER, weil dessen Silhouette ausgefüllt und kompakt ist, während das Übersetzen-Zeichen aus dünnen Buchstabenformen besteht. Optische Größe ist nicht Kantenlänge. */ /* ⚠️ KEINE eigene .rollt-Regel mehr. Der Knopf sitzt seit 14.08.2026 in `.schwebe`, und die Leiste blendet sich als Ganzes aus — inklusive der Ausnahmen für „Bewegung aus" und prefers-reduced-motion. Eine zweite Regel daneben wäre eine Kopie, die beim nächsten Umbau nur an einer der beiden Stellen nachgezogen wird. */ /* --- Das Auswahlfenster ------------------------------------------------ * * ⚠️ Die Überschrift ist DREISPRACHIG und wird nicht übersetzt. Dieses * Fenster ist das einzige auf dem ganzen Auftritt, das jemand öffnet, der * die laufende Sprache NICHT kann — eine Überschrift in genau dieser * Sprache wäre dort die eine, die nicht hilft. * * ⚠️ Jede Zeile trägt Flagge UND den Namen der Sprache in ihrer eigenen * Schreibweise. Eine Flagge allein wäre falsch: sie bezeichnet ein Land, * keine Sprache. Rumänisch spricht auch die Republik Moldau, Englisch * sprechen Dutzende Länder — der Union Jack ist eine Abkürzung, kein * Sachverhalt. Der Name daneben ist die eigentliche Aussage. */ /* ── Die Sprachwahl als Bilderraster (Wunsch des Users, 15.08.2026) ───── * * Vorher eine Liste aus Flagge + Name + Zustand. Jetzt nur noch Flaggen, * und die laufende Sprache trägt einen grünen Haken. * * ⚠️ Der Name steht weiterhin im `aria-label` — unsichtbar, aber vorhanden. * Ohne ihn hörte jemand mit Sprachausgabe sechsmal „Link" und hätte keine * Sprachwahl mehr, nur noch ein Ratespiel. Das kostet optisch nichts und * ist der Unterschied zwischen „ohne Text" und „ohne Bedeutung". * * ⚠️ Eine Flagge bezeichnet ein LAND, keine Sprache. Das bleibt sachlich * falsch und ist eine bewusste Entscheidung des Users: Rumänisch spricht * auch die Republik Moldau, Englisch sprechen Dutzende Länder, und ein * russischsprachiger Ukrainer findet seine Sprache unter der russischen * Flagge. Wer das je zurückdreht, findet die alte Fassung in der * Versionsgeschichte dieser Datei. */ .sprachwahl { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:.7rem; } @media (max-width:26rem) { .sprachwahl { grid-template-columns:repeat(2, 1fr); } } .sprachwahl a { position:relative; display:flex; align-items:center; justify-content:center; padding:.5rem; aspect-ratio:3/2; border:2px solid var(--linie); border-radius:12px; background:var(--bg); text-decoration:none; /* Trefferfläche weit über den 44 px aus WCAG 2.5.5 — die Kachel IST der Knopf, es gibt keinen kleineren Bereich, den man treffen müsste. */ min-height:3.4rem; } .sprachwahl a:hover { border-color:var(--akzent); } .sprachwahl a:focus-visible { outline:3px solid var(--akzent); outline-offset:2px; } /* ⚠️ KEIN `aspect-ratio` und KEIN `object-fit` auf der Flagge selbst. `object-fit` wirkt nur auf ersetzte Elemente — ein Inline-SVG ist keines, die Eigenschaft wäre wirkungslos. Und ein erzwungenes 3:2 würde den Union Jack verzerren: er ist amtlich 2:1 und als solcher gezeichnet. Also behält jede Flagge ihr eigenes Verhältnis und wird in der Kachel zentriert; die britische ist dadurch etwas flacher als die übrigen, und das ist richtig so. ⚠️ Die Breitenangabe im Markup (`flagge(..., 30)`) ist hier wirkungslos — die Klasse schlägt das Attribut. Dieselbe Falle wie bei `.ikone`. */ .sprachwahl .flagge { display:block; width:100%; height:auto; border-radius:6px; box-shadow:0 0 0 1px var(--rahmen); } /* ⚠️ Das Abzeichen hat ZWEI Ringe, und das ist gerechnet, nicht dekorativ. Gemessen gegen die Flaggenfarben (WCAG 1.4.11 verlangt 3:1 für Grafik): ein weißer Ring verschwindet auf Gelb (1,4:1), ein grüner auf Dunkelblau (2,5:1). Zusammen liegt auf JEDER Fläche JEDER Flagge mindestens einer der beiden über 3:1 — grün gegen Gelb 3,4–4,2:1, weiß gegen Blau 9,8–14,9:1. ⚠️ Am 15.08.2026 für Frankreich nachgerechnet, nicht angenommen: Blau #000091 weiß 14,91:1 · Weiß grün 5,95:1 · Rot #E1000F weiß 4,99:1. Wer eine Flagge hinzufügt, rechnet ihre Flächen nach — sonst steht hier eine Messung, die keine mehr ist. */ .sprachwahl .sp-haken { position:absolute; top:-.35rem; right:-.35rem; width:1.75rem; height:1.75rem; border-radius:999px; background:#177245; color:#fff; display:flex; align-items:center; justify-content:center; box-shadow:0 0 0 2px #fff, 0 0 0 3.5px #177245, 0 2px 6px rgba(0,0,0,.3); } .sprachwahl .sp-haken svg { width:1.05rem; height:1.05rem; display:block; } /* ⚠️ Die laufende Sprache bleibt anklickbar und wird NICHT ausgegraut: wer sich vertippt hat, muss zurückkönnen, und ein Klick darauf setzt zugleich das Cookie — also die ausdrückliche Wahl „ich will Deutsch", die den Hinweisbalken danach verstummen lässt. */ /* ⚠️ Die laufende Sprache bleibt anklickbar und wird NICHT ausgegraut: wer sich vertippt hat, muss zurückkönnen, und ein Klick darauf setzt zugleich das Cookie — also die ausdrückliche Wahl „ich will Deutsch", die den Hinweisbalken danach verstummen lässt. ⚠️ Der Rahmen ist die ZWEITE Auszeichnung neben dem Haken. Farbe allein dürfte die Information nicht tragen (WCAG 1.4.1); der Haken ist eine FORM und trägt sie, der Rahmen hilft beim schnellen Finden. */ .sprachwahl [aria-current="true"] { border-color:#177245; } /* Im hohen Kontrast verschwinden alle Farbtöne. Der Haken bleibt grün — er ist ein Zustandszeichen, kein Seitenton —, der Rahmen wird zur Schriftfarbe, damit die aktive Kachel auch dort ohne Farbunterscheidung auffällt. */ /* ⚠️ Im hohen Kontrast wird JEDER Rahmen zur Schriftfarbe — die aktive Kachel wäre dann durch den Rahmen nicht mehr zu unterscheiden, sondern nur noch durch den Haken. Der Haken ist eine FORM und trägt die Aussage allein (WCAG 1.4.1 ist damit erfüllt), aber „gerade noch erfüllt" ist auf dieser Seite nicht das Ziel. Deshalb dort ein DICKERER Rahmen: der Unterschied liegt in der Stärke, nicht in der Farbe, und überlebt damit jede Farbumstellung. Der Innenabstand gleicht die zwei Pixel aus, sonst springt die Kachel beim Wechsel. */ :root[data-kontrast="hoch"] .sprachwahl [aria-current="true"] { border-color:var(--fg); border-width:5px; padding:calc(.5rem - 3px); } /* --- Hinweisbalken ------------------------------------------------------ * * Erscheint nur, wenn der Browser eine andere unserer Sprachen bevorzugt * und noch niemand gewählt hat. Kein Aufklappfenster, kein Überdecken des * Inhalts — eine Zeile über der Seite, die man lesen oder übergehen kann. * * ⚠️ Der Text steht in der ZIELSPRACHE, nicht in der laufenden. Ein * deutscher Satz „Diese Seite gibt es auch auf Englisch" hilft dem nicht, * der kein Deutsch kann — und nur für den ist der Balken da. */ .sp-hinweis { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem .9rem; padding:.55rem 1rem; background:var(--ton-flaeche); border-bottom:1px solid var(--linie); font-size:.92rem; } .sp-hinweis .flagge { flex:none; border-radius:2px; box-shadow:0 0 0 1px var(--rahmen); } .sp-hinweis a { color:var(--fg); } .sp-hinweis .sp-weg { margin-left:auto; color:var(--leise); text-decoration:none; font-size:1.15rem; line-height:1; padding:.25rem .5rem; } .sp-hinweis .sp-weg:hover { color:var(--fg); } /* Hinweis auf einer noch nicht übersetzten Seite. Als Warnfeld, nicht als leise Zeile: die Aussage „was Sie jetzt lesen, ist nicht Ihre Sprache" muss ankommen, bevor jemand anfängt zu lesen. */ .sp-fehlt { margin:0 0 1.4rem; padding:.75rem 1rem; border:1px solid var(--warn-li); border-left-width:4px; border-radius:8px; background:var(--warn-bg); font-size:.94rem; } /* „Maßgeblich ist die deutsche Fassung." Steht nur auf den drei Rechtsseiten und nur in einer Übersetzung. ⚠️ Bewusst KEIN Warnfeld wie .sp-fehlt: dort ist etwas nicht da, hier ist alles da und es gilt bloß ein anderer Text. Ein rotes Feld über einer sauber übersetzten Satzung behauptete, die Übersetzung sei fehlerhaft — und träfe damit ausgerechnet die Leser, die auf sie angewiesen sind. */ .sp-geltung { margin:0 0 1.4rem; padding:.7rem 1rem; border-left:3px solid var(--ton); border-radius:0 4px 4px 0; background:var(--ton-flaeche); font-size:.92rem; } .sp-geltung a { color:var(--fg); } /* ⚠️ Das Übersetzen-Zeichen ist hier NICHT Schmuck, es ist die einzige Unterscheidung. Auf den drei Rechtsseiten (Ton „schiefer") sehen --ton-flaeche und --warn-bg praktisch gleich aus, also stünden dieser Kasten und der .hinweis direkt darunter als zwei identische graue Kästen übereinander — und wer den einen überfliegt, überfliegt den anderen mit. Am Bild gesehen, nicht aus dem Code geschlossen. */ .sp-geltung .ikone { vertical-align:-.2em; margin-right:.4rem; color:var(--ton); } /* Position kommt jetzt von .gasse. */ .uu-schwebt a, .ak-schwebt a { display:inline-flex; align-items:center; justify-content:center; width:2.9rem; height:2.9rem; border:1px solid currentColor; border-radius:999px; background:var(--flaeche); text-decoration:none; box-shadow:0 4px 14px rgba(0,0,0,.14); transition:border-color .15s, color .15s; } .uu-schwebt a { color:var(--k-ueberuns); } .ak-schwebt a { color:var(--k-aktuelles); } .uu-schwebt, .ak-schwebt { transition:opacity .22s ease; } html.rollt .uu-schwebt, html.rollt .ak-schwebt { opacity:0; pointer-events:none; } @media (prefers-reduced-motion: reduce) { html.rollt .uu-schwebt, html.rollt .ak-schwebt { opacity:1; pointer-events:auto; } } :root[data-bewegung="aus"].rollt .uu-schwebt, :root[data-bewegung="aus"].rollt .ak-schwebt { opacity:1; pointer-events:auto; } /* ⚠️ JEDER schwebende Knopf braucht aria-label UND title. Das eine ist für die Sprachausgabe, das andere für den Mauszeiger — sie ersetzen einander nicht. Drei Knöpfe hatten nur aria-label und zeigten deshalb beim Darüberfahren nichts an: das Herz und die beiden Themawähler. Aufgefallen ist es, weil daneben alle anderen einen Text zeigten; ein Knopf ohne Beschriftung UND ohne Tooltip ist ein Rätsel, und nach NN/G ist fast kein Sinnbild allein verständlich. */ /* Position kommt jetzt von .gasse. */ .spende a { display:inline-flex; align-items:center; justify-content:center; width:2.9rem; height:2.9rem; border:1px solid var(--k-spende); border-radius:999px; background:var(--flaeche); color:var(--k-spende); text-decoration:none; box-shadow:0 4px 14px rgba(0,0,0,.14); transition:border-color .15s, color .15s; } .spende a:hover, .spende a:focus-visible { border-color:var(--akzent); color:var(--akzent); } .spende a:focus-visible { outline:2px solid var(--akzent); outline-offset:2px; } /* Schwebende Schaltfläche für den Widerruf. Nur auf widerrufsrecht.php im Markup — global wäre sie eine Aufforderung, wo niemand danach gefragt hat. ⚠️ Unterhalb des Spendenherzens abgesetzt (3,6rem), sonst liegen beide übereinander: beide sind links auf halber Höhe verankert. ⚠️ Mit Beschriftung statt nur Symbol — ein Piktogramm für „Widerruf" gibt es nicht, und geraten würde es garantiert falsch. */ /* Vorbelegte, unveränderliche Felder: erkennbar anders, aber lesbar. ⚠️ NICHT ausgegraut bis zur Unlesbarkeit — es sind die zwei wichtigsten Angaben der ganzen Erklärung. */ .wf input.fest { background:var(--ton-flaeche); border-style:dashed; font-weight:600; cursor:default; } /* ── Die linke Gasse ──────────────────────────────────────────────────── * * Drei Schaltflächen, untereinander, alle an `left:1rem` — dieselbe Kante * wie der Menüknopf im Kopf. * * 50 % Spenden (überall) * 50 % + 1 Schritt Mitglied werden (überall) * 50 % + 2 Schritte Widerruf / Kündigung (nur auf ihrer Seite) * * ⚠️ Die Reihenfolge ist fest und die beiden globalen stehen oben, obwohl * auf widerrufsrecht.php der Widerruf die wichtigere Handlung ist. Der * Grund: eine Schaltfläche, die je nach Seite woanders sitzt, sucht man * jedes Mal neu. Die seitenspezifische trägt eine Beschriftung und ist * deshalb auch an dritter Stelle unverwechselbar. * * ⚠️ Der Abstand steht EINMAL in --gasse-schritt. Vorher war die 3,6rem in * .wr-schwebt fest eingetragen; die zweite Schaltfläche hätte sich lautlos * darübergelegt, weil an der Zahl nicht steht, dass sie ein Raster meint. */ :root { --gasse-schritt:3.6rem; } /* Position kommt jetzt von .gasse. */ .mw-schwebt a { display:inline-flex; align-items:center; justify-content:center; width:2.9rem; height:2.9rem; border:1px solid var(--k-mitglied); border-radius:999px; background:var(--flaeche); color:var(--k-mitglied); text-decoration:none; box-shadow:0 4px 14px rgba(0,0,0,.14); transition:border-color .15s, color .15s; } .mw-schwebt a:hover, .mw-schwebt a:focus-visible { border-color:var(--ton); color:var(--ton); } .mw-schwebt a:focus-visible { outline:2px solid var(--ton); outline-offset:2px; } /* ⚠️ Diese Regel steht NACH den beiden Grundregeln, nicht davor. Ein erster Versuch stand oben und blieb wirkungslos: eine @media-Regel hat dieselbe Spezifität wie eine ohne, es entscheidet die Reihenfolge — und `width:2.9rem` kam später. Auf dem Bild blieben die Knöpfe klein. Grösser nur ab 62rem: auf dem Telefon liegen sie in einer engen Gasse neben dem Text, dort wäre mehr Durchmesser weniger Lesebreite. */ @media (min-width:62rem) { .spende a, .mw-schwebt a, .uu-schwebt a, .ak-schwebt a, .tr-schwebt a, .ok-schwebt a { width:3.5rem; height:3.5rem; } .spende a svg, .mw-schwebt a svg, .uu-schwebt a svg, .ak-schwebt a svg, .tr-schwebt a svg, .ok-schwebt a svg { width:24px; height:24px; } /* ⚠️ Die rechte Leiste wächst MIT — sonst stünden links sechs Knöpfe zu 3.5rem und rechts drei zu 2.9rem, und die beiden Ränder sähen aus wie zwei verschiedene Auftritte. Beide Gruppen hängen deshalb an derselben Schwelle; wer eine ändert, ändert die andere mit. ⚠️ Die Zeichen werden über CSS vergrössert, nicht über die width- und height-Attribute im Markup: eine Regel schlägt das Attribut, und so steht die Zahl an EINER Stelle statt in einem Dutzend -Tags. */ /* ⚠️ `.sp-schwebt a` gehört in DIESE Liste. Es fehlte, weil der Sprachknopf am 14.08.2026 dazukam, als die Regel längst stand — und ein Knopf, der nirgends genannt wird, wächst eben nicht mit. Auf dem Rechner maß er 46,4 px neben vier Kreisen zu 56 px, trug aber ein Zeichen von 24 px: 47 % Füllung gegen 30 % beim Nachbarn darunter. Der kleinere Kreis wirkte dadurch als der volle und der größere daneben als der leere — gemeldet wurde folgerichtig „der Knopf für Barrierefreiheit ist zu klein", obwohl er der größere von beiden war. */ .zugang-knopf { width:3.5rem; height:3.5rem; } .thema a { width:3.5rem; height:3.5rem; } .sp-schwebt a { width:3.5rem; height:3.5rem; } .zugang-knopf svg, .thema a svg { width:24px; height:24px; } .sp-schwebt .ikone { width:24px; height:24px; } /* ⚠️ Der Schritt wächst mit. Er stand auf 3,6rem und war auf 2,9rem Durchmesser gerechnet — bei 3,5rem berührten sich die Kreise, und der dritte (Widerruf) rückte gleich mit auf. Neuer Wert: Durchmesser 3,5 plus 0,7 Luft. Wer den Durchmesser wieder ändert, ändert diese Zeile mit; sie ist die EINZIGE Stelle, an der der Abstand steht. */ :root { --gasse-schritt:4.2rem; } } .mw-schwebt { transition:opacity .22s ease; } html.rollt .mw-schwebt { opacity:0; pointer-events:none; } @media (prefers-reduced-motion: reduce) { html.rollt .mw-schwebt { opacity:1; pointer-events:auto; } } :root[data-bewegung="aus"].rollt .mw-schwebt { opacity:1; pointer-events:auto; } .wr-schwebt { position:fixed; left:1rem; top:calc(50% + 2 * var(--gasse-schritt)); transform:translateY(-50%); z-index:40; } .wr-schwebt a { display:inline-flex; align-items:center; gap:.45rem; padding:.6rem .9rem; border:1px solid var(--rahmen); border-radius:999px; background:var(--flaeche); color:var(--fg); text-decoration:none; font-size:.85rem; font-weight:600; white-space:nowrap; box-shadow:0 4px 14px rgba(0,0,0,.14); } .wr-schwebt a:hover, .wr-schwebt a:focus-visible { border-color:var(--ton); color:var(--ton); } .wr-schwebt a:focus-visible { outline:2px solid var(--ton); outline-offset:2px; } /* Auf schmalen Geräten überdeckte die Pille den Text. Dort nur das Symbol. */ @media (max-width:44rem) { .wr-schwebt a { padding:.6rem; } .wr-schwebt .wort { display:none; } } /* Beim Rollen ausblenden — dieselbe Klasse, die das kurze Skript setzt. */ html.rollt .wr-schwebt { opacity:0; pointer-events:none; } .wr-schwebt { transition:opacity .2s; } /* --- Spenden-Modal ------------------------------------------------------ * Gleiche Bauweise wie das Kontaktfenster: :target, mittig, drei Wege * hinaus. Der Herzknopf öffnet jetzt dieses Fenster statt die Seite — * spenden.php bleibt daneben als ausführliche Fassung bestehen. */ #spenden:target { display:grid; } /* Reiter über dem Inhalt. Bewusst KEINE ARIA-Tabs (role="tablist" und Freunde): die versprechen Bedienung mit den Pfeiltasten, und die gibt es ohne JavaScript nicht. Es sind Links, sie verhalten sich wie Links, und der laufende trägt aria-current. Ein ehrliches Navigationsmuster ist besser als ein vorgetäuschtes Widget. */ .sp-reiter { display:flex; flex-wrap:wrap; gap:.3rem; margin:1rem 0 0; padding-bottom:.7rem; border-bottom:1px solid var(--linie); } .sp-reiter a { display:inline-flex; align-items:center; min-height:2.4rem; padding:.35rem .75rem; border-radius:8px; color:var(--leise); text-decoration:none; font-size:.9rem; } .sp-reiter a:hover { color:var(--fg); background:var(--bg); } .sp-reiter a[aria-current="page"] { background:var(--bg); color:var(--akzent); font-weight:700; box-shadow:inset 0 -2px 0 var(--akzent); } .sp-block { margin:1.1rem 0 0; } .sp-block h3 { font-size:.7rem; text-transform:uppercase; letter-spacing:.08em; color:var(--leise); font-weight:600; margin:0 0 .6rem; } .sp-noch { margin:.6rem 0 0; padding:.9rem 1.05rem; border:1px dashed var(--rahmen); border-radius:10px; color:var(--leise); font-size:.92rem; } .sp-konto { margin:0; font-size:.95rem; line-height:1.7; } .sp-konto dt { display:inline-block; min-width:6.5rem; color:var(--leise); font-weight:400; font-size:.85rem; margin:0; } .sp-konto dd { display:inline; margin:0; } .sp-konto dd::after { content:""; display:block; } /* Die IBAN in Ziffernblöcken und mit gleichen Zeichenbreiten — so lässt sie sich abtippen, ohne die Stelle zu verlieren. */ .sp-konto .iban { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:.04em; } .sp-betraege { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.9rem; } .sp-betraege a { display:inline-flex; align-items:center; justify-content:center; min-height:2.4rem; padding:.35rem .8rem; border:1px solid var(--rahmen); border-radius:8px; background:var(--bg); color:var(--fg); text-decoration:none; font-size:.9rem; } .sp-betraege a:hover { border-color:var(--akzent); } .sp-betraege a[aria-current="true"] { border-color:var(--akzent); color:var(--akzent); font-weight:700; box-shadow:inset 0 0 0 1px var(--akzent); } /* Der QR-Code steht auf weißem Grund mit Rand — ein Code auf dunklem Untergrund oder ohne Ruhezone wird von vielen Kameras nicht erkannt. Deshalb hier bewusst fest weiß/schwarz und NICHT var(--bg)/var(--fg): im Dunkelmodus wäre er sonst invertiert und damit unlesbar. */ .sp-qr { display:block; width:min(15rem,60vw); margin:0 auto; padding:.7rem; background:#fff; border-radius:10px; border:1px solid var(--rahmen); } .sp-qr svg { display:block; width:100%; height:auto; } .sp-qr svg path { fill:#000; } .sp-geplant { display:flex; justify-content:space-between; align-items:baseline; gap:.5rem; padding:.45rem 0; color:var(--leise); font-size:.92rem; } .sp-geplant em { font-style:normal; font-size:.7rem; text-transform:uppercase; letter-spacing:.06em; } /* --- Hauptmenü: Schublade von links ------------------------------------- * * Kein aufpoppender Kasten, sondern eine Lade, die hereinfährt. Ohne eine * Zeile JavaScript: :target schaltet, transform bewegt. * * ⚠️ Der entscheidende Kniff steckt in visibility, nicht im transform. * Eine nur nach links geschobene Lade wäre unsichtbar, aber weiterhin im * Tabulator-Lauf — sechs Links, durch die man sich auf jeder Seite tippen * müsste, ohne etwas zu sehen. visibility:hidden nimmt sie heraus. * Und weil visibility hart schaltet, bekommt sie beim Schließen eine * Verzögerung von genau der Dauer der Bewegung: sonst verschwände die Lade * schlagartig, statt hinauszufahren. * * Die Lade steht im Dokument NACH dem Kopf und nicht darin. Der Kopf ist * sticky mit z-index 20 und bildet damit einen eigenen Stapelkontext — * darin eingesperrt läge die Lade trotz z-index 90 immer noch unter der * Leiste rechts (z-index 40). */ /* Beide Knöpfe teilen sich die erste Spalte des Kopfrasters. */ .kopf-knoepfe { grid-column:1; justify-self:start; display:inline-flex; gap:.4rem; } .menue-knopf { display:inline-flex; align-items:center; justify-content:center; width:2.75rem; height:2.75rem; border:1px solid var(--rahmen); border-radius:10px; background:var(--bg); color:var(--fg); text-decoration:none; } .menue-knopf:hover, .menue-knopf:focus-visible { border-color:var(--akzent); color:var(--akzent); } .menue-knopf:focus-visible { outline:2px solid var(--akzent); outline-offset:2px; } /* ⚠️ Die Menülade ist am 14.08.2026 ENTFERNT worden — Knopf, Markup und Regeln. Ausdrückliche Entscheidung des Users, nachdem der Einwand auf dem Tisch lag: `href="#menue"` war der einzige Weg dorthin. Was die Navigation seither trägt: sechs schwebende Knöpfe (Über uns, Aktuelles, Spenden, Mitglied, Transparenz, Offene Kasse), die fünf Rechtsverweise im Fuss, die Seite „Übersicht aller Seiten" mit Beschreibungen — und der neue Haus-Knopf oben links. ⚠️ WCAG 2.4.5 „Mehrere Wege" bleibt damit erfüllt: Übersicht und Fuss sind zwei voneinander unabhängige Wege zu jeder Seite. Wer die Übersicht je entfernt, muss das neu prüfen — dann wäre es nur noch einer. */ /* --- Kontakt-Modal ---------------------------------------------------- * * Mittig statt seitlich: das Kontaktfenster ist kein Einstellungsregal, * das man beim Weiterlesen offen lässt, sondern eine Frage mit einer * Antwort. Dafür ist die Bildmitte der richtige Ort. * * Aufklappen weiterhin über :target, ohne eine Zeile JavaScript. Der Knopf * in der Leiste öffnet nur — geschlossen wird über das Kreuz im Kasten, * die Fläche dahinter oder „Schließen". Deshalb braucht es hier NICHT den * Zwei-Knopf-Trick des Bedienfelds: das Kreuz sitzt sichtbar im Kasten. * * ⚠️ Kein aria-modal="true". Das Attribut verspricht, dass der Fokus im * Kasten gefangen bleibt — und genau das kann ohne JavaScript niemand * einlösen. Ein Versprechen, das die Seite nicht hält, ist für einen * Screenreader schlimmer als gar keins. Aus demselben Grund schließt die * Esc-Taste nicht; die drei sichtbaren Wege tun es. */ .modal-huelle { display:none; position:fixed; inset:0; z-index:100; place-items:center; padding:1rem; } #kontakt:target { display:grid; } /* ⚠️ Jedes Fenster braucht seine EIGENE :target-Regel. Fehlt sie, bleibt das Fenster unsichtbar, der Link scheint kaputt, und man sucht den Fehler im Markup — wo keiner ist. Genau das ist am 12.08.2026 beim zweiten Fenster passiert, obwohl die Warnung schon hier stand: die Regel wird beim Hinzufügen eines Fensters vergessen, nicht beim Lesen dieses Kommentars. Wer ein Fenster ergänzt, ergänzt HIER eine Zeile. */ #widerruf:target, #kuendigen:target, #sprache:target, #mitglied-werden:target { display:grid; } /* Der eine hervorgehobene Verweis im Fuß eines Fensters. Sieht aus wie ein Knopf, ist aber ein Verweis — er führt auf eine andere Seite, und ein
, nicht als Geschwister daneben. In einer
* darf ein gruppierendes
laut HTML nur
und
enthalten — ein * dazwischen macht die Liste ungültig und kann die Zuordnung von * Begriff und Wert für Screenreader zerreißen. Genau das wäre auf einer * Pflichtangabenseite der falsche Ort zum Experimentieren. */ .datenliste { margin:0; } .datenliste > div { padding:.6rem 0; border-bottom:1px solid var(--linie); } .datenliste > div:last-child { border-bottom:0; } .datenliste dt { display:flex; align-items:center; gap:.45rem; font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--leise); font-weight:600; margin:0 0 .2rem; } .datenliste dt .ikone { color:var(--ton); } .datenliste dd { margin:0; padding-left:1.6rem; } /* Das Paragraphenzeichen als Symbol für die Rechtsabschnitte. * * ⚠️ Bewusst KEIN gezeichnetes Piktogramm. Nach den Untersuchungen der * Nielsen Norman Group erkennen Nutzer außerhalb von Haus, Drucker und Lupe * kaum ein Symbol zuverlässig — ein selbst erfundenes Schild für „Haftung" * erklärt niemandem etwas. „§" dagegen ist im deutschen Sprachraum das * eindeutigste Zeichen für eine Rechtsvorschrift, und es ist ein Schriftzeichen: * es skaliert mit der Schriftgröße, erbt jede Farbe und braucht kein SVG. */ .paragraf { color:var(--ton); font-weight:700; margin-right:.5rem; font-size:1.15em; line-height:1; } /* Bestätigter Status — derzeit nur die Gemeinnützigkeit. * * ⚠️ --ok NICHT als Text auf der grünen Tönung verwenden: gemessen 4,46:1, * also knapp unter den geforderten 4,5:1. Als Rand (dort gelten 3:1) und als * Fläche unter weißer Schrift (5,05:1) ist die Farbe in Ordnung. Der * Unterschied sieht nach Haarspalterei aus und ist genau der Grund, warum * hier gerechnet und nicht geschätzt wird. */ .block.bestaetigt { border-left:4px solid var(--ok); } .siegel-marke { display:inline-flex; align-items:center; gap:.4rem; background:var(--ok); color:var(--ton-auf); border-radius:999px; padding:.25rem .7rem; font-size:.8rem; font-weight:600; } :root[data-kontrast="hoch"] .siegel-marke { background:var(--bg); color:var(--fg); border:2px solid var(--fg); } /* Kurzfassung: die Antworten, die jemand sucht, bevor er sich entscheidet, ob er die zehn Bildschirmseiten darunter überhaupt liest. ⚠️ Sie ersetzt die Erklärung NICHT und darf nichts behaupten, was unten nicht ausgeführt und belegt ist. Eine „Zusammenfassung", die freundlicher klingt als der Volltext, ist irreführende Werbung mit dem Datenschutz. */ /* ⚠️ minmax auf 19rem, damit sich HÖCHSTENS zwei Spalten bilden. Bei 14rem entstanden drei, und dann blieben pro Karte rund 170 px für den Text: „Nichts von fremden / Servern" mitten im Titel. Mehr Spalten sind hier nicht mehr Übersicht, sondern weniger. */ .kurzfassung { display:grid; gap:.7rem; margin:1.5rem 0 2rem; /* ⚠️ `min(19rem,100%)`, nu `19rem` direct. 19rem sunt 304 px, iar la o fereastră de 320 px coloana are 187 — pista rămânea la 304 și împingea 50 px în afara ecranului, deci derulare orizontală (WCAG 1.4.10). `min()` păstrează exact intenția de mai sus: cel mult două coloane, niciodată trei. Doar că sub 19rem pista are voie să se strângă. */ grid-template-columns:repeat(auto-fit,minmax(min(19rem,100%),1fr)); } .kurzfassung > div { display:flex; align-items:flex-start; gap:.7rem; background:var(--flaeche); border:1px solid var(--rahmen); border-radius:8px; padding:.85rem .95rem; } /* ⚠️ Fara `min-width:0` cutia de text nu coboara sub latimea celui mai lung cuvant — implicit un element flex are `min-width:auto`. La 320 px asta impingea „Keine Reichweitenmessung" cu 34 px in afara ferestrei, desi cutia din jur era corect dimensionata. Acelasi WCAG 1.4.10. */ .kurzfassung > div > div { min-width:0; } .kurzfassung .ikonrund { width:1.9rem; height:1.9rem; } .kurzfassung .ikonrund .ikone { width:1rem; height:1rem; } .kurzfassung strong { display:block; font-size:.95rem; margin-bottom:.15rem; } .kurzfassung span.text { font-size:.86rem; color:var(--leise); line-height:1.45; } /* Gute Nachricht in Grün — aber nur die Scheibe, nie der Text: --ok auf der Tönung misst 4,46:1 und liegt damit unter den geforderten 4,5:1. */ .kurzfassung .gut .ikonrund { background:var(--ton-flaeche); color:var(--ok); } :root[data-kontrast="hoch"] .kurzfassung .gut .ikonrund { color:var(--fg); } /* Rechte-Karten: der Teil, der die Leserin wirklich betrifft. Als Aufzählung mit sechs Artikelnummern liest ihn niemand zu Ende. */ .rechte { display:grid; gap:.6rem; margin:1.2rem 0; grid-template-columns:repeat(auto-fit,minmax(13rem,1fr)); } .rechte > div { background:var(--ton-flaeche); border:1px solid var(--rahmen); border-left:3px solid var(--ton); border-radius:7px; padding:.7rem .85rem; } .rechte strong { display:block; font-size:.93rem; } .rechte .fundstelle { font-size:.78rem; color:var(--leise); font-variant-numeric:tabular-nums; } /* Adressblock mit Symbol daneben. */ .adressblock { display:flex; align-items:flex-start; gap:.75rem; } .adressblock .ikone { color:var(--ton); margin-top:.25rem; } .adressblock address { line-height:1.6; } /* --- Offene Kasse ------------------------------------------------------- * * Beträge stehen in Tabellenziffern (font-variant-numeric: tabular-nums): * ohne das sind „1.234,00" und „999,00" unterschiedlich breit und die * Kommas einer Spalte stehen nicht untereinander. Bei einer Kassenaufstellung * ist das kein Schönheitsfehler — untereinander stehende Kommas sind der * Grund, warum man eine Spalte überhaupt überfliegen kann. * * ⚠️ Die Tabellen liegen in einem eigenen Scrollbereich (.tabelle). main ist * 48rem breit; eine sechsspaltige Buchungstabelle ist das auf dem Telefon * nicht. Ohne den Bereich schiebt sie die ganze Seite seitwärts — dann * wandert auch der Fließtext aus dem Bild, und das ist ein echter * Bedienfehler, kein enges Layout. */ .zahl { font-variant-numeric:tabular-nums; white-space:nowrap; } .kbilanz { display:grid; gap:.75rem; margin:1.5rem 0; grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr)); } .kbilanz div { background:var(--flaeche); border:1px solid var(--rahmen); border-radius:8px; padding:.85rem .9rem; } .kbilanz .was { display:block; font-size:.7rem; text-transform:uppercase; letter-spacing:.07em; color:var(--leise); margin-bottom:.2rem; } .kbilanz .wert { font-size:1.35rem; font-weight:600; font-variant-numeric:tabular-nums; } .tabelle { overflow-x:auto; margin:1rem 0; } table.buch { border-collapse:collapse; width:100%; font-size:.92rem; } table.buch caption { text-align:left; font-size:.9rem; color:var(--leise); padding-bottom:.5rem; } table.buch th, table.buch td { padding:.5rem .6rem; text-align:left; border-bottom:1px solid var(--linie); vertical-align:top; } table.buch th { font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; color:var(--leise); font-weight:600; white-space:nowrap; } table.buch td.r, table.buch th.r { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; } table.buch tfoot td { font-weight:600; border-top:2px solid var(--rahmen); border-bottom:0; } table.buch tbody tr:last-child td { border-bottom:0; } /* Gesperrte Zelle. Der Punkt allein trägt die Information nicht — das title-Attribut und die Erklärung unter der Tabelle sagen dasselbe in Worten (WCAG 1.4.1: Farbe und Zeichen sind nie der einzige Träger). */ .gesperrt { color:var(--leise); } /* Balken für die Kategorien. Reine Zier neben der Zahl, deshalb aria-hidden im Markup — ein Screenreader liest den Betrag, nicht die Breite eines Kästchens. */ .balken { display:block; height:.4rem; margin-top:.3rem; border-radius:2px; background:var(--akzent); min-width:2px; } .balken-spur { display:block; background:var(--linie); border-radius:2px; } .frisch { font-size:.85rem; color:var(--leise); margin:.4rem 0 0; } /* --- Warnband --------------------------------------------------------- * * Ein rotes Band ueber dem Inhalt, gespeist aus warnungen.json. Es traegt * NIE Information allein durch die Farbe (WCAG 1.4.1): die Pille sagt in * Worten, worum es geht, und die Ueberschrift wiederholt es. * * ⚠️ Die Werte sind gemessen, nicht gewaehlt. barrierefreiheit.php sagt * zu, dass keine Textstelle unter 5,05:1 (hell) bzw. 5,77:1 (dunkel) * liegt. Gemessen hier: hell #ffffff auf #b3001b = 7,16:1, dunkel * #ffe4e6 auf #8f1220 = 7,69:1. Wer die Farbe aendert, rechnet nach — * sonst wird aus einer Messung eine Behauptung, und zwar in elf Sprachen. * * ⚠️ Im hohen Kontrast wird das Band schwarzweiss. Dieselbe Seite sagt * zu: „Im hohen Kontrast entfallen alle Toene — dort entsteht 21:1 nur * aus Schwarz und Weiss." Ein rotes Band waere ein Gegenbeweis. Sichtbar * bleibt es durch den 4px-Rahmen, nicht durch die Flaeche. * * ⚠️ Kein opacity auf der Quellzeile. Es senkt den gemessenen Kontrast, * ohne dass irgendwo eine Zahl falsch wuerde — die schlimmste Sorte. */ :root { --alarm-bg:#b3001b; --alarm-fg:#ffffff; --alarm-li:#8f0016; } :root[data-thema="dunkel"]:not([data-kontrast]) { --alarm-bg:#8f1220; --alarm-fg:#ffe4e6; --alarm-li:#ff6b7a; } @media (prefers-color-scheme: dark) { :root:not([data-thema]):not([data-kontrast]) { --alarm-bg:#8f1220; --alarm-fg:#ffe4e6; --alarm-li:#ff6b7a; } } :root[data-kontrast="hoch"] { --alarm-bg:#fff; --alarm-fg:#000; --alarm-li:#000; } :root[data-kontrast="hoch"][data-thema="dunkel"] { --alarm-bg:#000; --alarm-fg:#fff; --alarm-li:#fff; } @media (prefers-color-scheme: dark) { :root[data-kontrast="hoch"]:not([data-thema]) { --alarm-bg:#000; --alarm-fg:#fff; --alarm-li:#fff; } } /* ⚠️ Abstand zwischen zwei Bändern. Ohne ihn stossen zwei Meldungen bündig aneinander und sehen aus wie EIN Block mit einer Naht in der Mitte — am Bild gesehen, nicht aus dem Code geschlossen. */ .warnband + .warnband { margin-top:.9rem; } .warnband { background:var(--alarm-bg); color:var(--alarm-fg); border-top:4px solid var(--alarm-li); border-bottom:4px solid var(--alarm-li); } .warnband .wb-innen { max-width:48rem; margin:0 auto; padding:1rem 1.1rem; } .warnband p { margin:.4rem 0; } .warnband .wb-kopf { display:flex; align-items:center; gap:.55rem; flex-wrap:wrap; margin-top:0; font-size:1.06rem; font-weight:700; } .warnband .wb-pille { border:2px solid var(--alarm-fg); border-radius:999px; padding:.1rem .65rem; font-size:.78rem; font-weight:700; text-transform:uppercase; letter-spacing:.04em; white-space:nowrap; } .warnband .wb-wichtig { font-weight:700; } .warnband .wb-quelle { font-size:.82rem; margin-bottom:0; } .warnband .ikone { vertical-align:-.15em; flex:0 0 auto; } /* Originaltext einer amtlichen Meldung. ⚠️
, kein Skript: die CSP ist default-src 'none', ein JS-Aufklapper wäre hier ein totes Bedienelement. */ .warnband .wb-original { margin:.5rem 0 0; font-size:.9rem; } .warnband .wb-original summary { cursor:pointer; font-weight:700; padding:.15rem 0; } .warnband .wb-original p { margin:.3rem 0; }