/* * Neutraler Standardsatz (ADR-0024). * * Erscheinung — Farben, Wappen, Schriften — ist Mandantendatum nach ADR-0003. * Sie kommt spaeter als CSS-Variablen je Mandant; hier stehen nur die * Vorgabewerte. * * HIER STAND BIS ZUM 28.08.2026: "Bis zum zweiten Verein genuegt das." * ADR-0046 hat diesen Aufschub abgeloest und nennt genau diese Stelle in * seinen Konsequenzen: Die Erscheinung je Verein wartet nicht mehr auf den * zweiten Verein. Der Satz wird mitgezogen, sonst steht die alte Begruendung * ueber dem neuen Code. * * Was der Standardsatz IST, steht bei ihm selbst (Suchwort --verein). * * Eigene Datei statt inline, damit die Content-Security-Policy ohne * 'unsafe-inline' auskommt (kern/sicherheit.php). */ :root { /* --------------------------------------------------------------------- DER SEITENGRUND IST NICHT WEISS (ADR-0031). --grund ist die Seitenflaeche HINTER den Karten, --karte die Karte selbst. Weiss auf Weiss waere eine Flaechentrennung von 1,00 — die Karte waere buchstaeblich unsichtbar, und der Bausteinsatz aus ADR-0024 setzt eine Trennung voraus. Gemessen sind es 1,23. Daraus folgt eine Regel, die man nicht sieht, wenn man sie nicht kennt: --grund-tief steht NIE direkt auf --grund. Die stille Flaeche erreicht dort nur 1,12 und verschwindet. Sie gehoert in eine Karte, wo sie mit 1,38 traegt. Wer eine stille Flaeche ausserhalb einer Karte braucht, braucht eine Karte. --------------------------------------------------------------------- */ --karte: #ffffff; --grund: #e4e9e4; --grund-tief: #d6ddd7; /* Fliesstext im ganzen Portal. EIN Schwarzton, nicht zwei — vorher stand hier --schrift #1c1c1c neben --tinte #1b211e, zwei Namen fuer eine Sache (Tokensatz, Nachtrag der Umsetzung). Gegen --grund 13,31. */ --tinte: #1b211e; --tinte-leise: #556059; /* Zwei Linien, und der Unterschied ist keine Geschmacksfrage: --linie ist ZIERLINIE (Zeilentrenner) und erreicht auf der Karte nur 1,60. --linie-stark traegt die Raender aller BEDIENELEMENTE und haelt mit 4,48 die Schwelle aus WCAG 1.4.11. Ein Feldrand in --linie waere ein Verstoss. */ --linie: #c6cfc8; --linie-stark: #6b7b70; /* Rot ist Hauptaktion UND Gefahr, sonst nichts (ADR-0024) — deshalb ein Token und nicht zwei. Weisse Schrift darauf: 7,49. */ --gefahr: #a81622; --gefahr-schrift: #ffffff; --ok: #1c6b39; --info: #1b5a96; --hinweis: #74571c; /* --------------------------------------------------------------------- MESSING MARKIERT AUSSCHLIESSLICH VERPFLICHTUNG (ADR-0030). Wo Messing steht, muss jemand etwas tun: eine Faelligkeit, eine offene Rueckgabe, eine Frist, ein Befund, der eine Entscheidung verlangt. "Wichtig" ist nicht "verpflichtend". Messing ist NIE Text. Ausschliesslich Flaeche und Linie — damit greift die Textschwelle 4,5:1 nicht, sondern die Nichttext-Schwelle 3:1. Gemessen: gegen --karte 4,97, gegen --grund 4,04, gegen --grund-tief 3,60, gegen --verein-hell mindestens 3,35 — zugesichert ist >= 3,34 (Vorgaben, korrigiert am 19.08.2026). EINE erlaubte Ausnahme, und nur diese eine: 1. DIE TRENNKANTE UNTER DEM KOPFBAND (.kopf unten). Sie grenzt an die Vereinsfarbe, die beliebig dunkel sein kann; gegen #2B3A67 sind es nur 2,22. Das ist hinnehmbar, weil eine Kante zwischen zwei Flaechen keine Zustandsanzeige ist und nicht unter WCAG 1.4.11 faellt. DIESER KOMMENTAR IST DIE BEGRUENDUNG — ohne ihn meldet die naechste Pruefung die Kante als Verstoss. AUSNAHME 2 IST AUFGEHOBEN, SOWEIT SIE SCHRIFT IST (ADR-0030, Nachtrag vom 28.08.2026, Entscheidung des Betreibers). Hier stand bis dahin: "DAS PRODUKTZEICHEN SELBST (.fuss-marke)" — und damit war Messing als SCHRIFTton im Fussband erlaubt. DIE VERBOTSLISTE DESSELBEN ADR SAGT SEIT DEM ERSTEN TAG DAS GEGENTEIL: "Messing auf Ueberschriften, MARKEN oder Kennzahlen", Zeile 41, unter "Nicht erlaubt, auch wenn es gut aussieht". Beides stand nebeneinander, und niemand hat es gegeneinander gehalten. Die Wortmarke im Fuss fuehrt --tinte (wortmarke-tinte.svg). Zugesichert in 120_farbe.php, und zwar in der DATEI und nicht nur hier: Die Marke besteht aus zwei , ihre Farbe steht im SVG und nicht in diesem Stilblatt. DIE BILDMARKE IST DAVON NICHT BERUEHRT. Sie ist kein Text; ob sie den Ton behaelt, entscheidet der Betreiber mit Design (ADR-0049). Hier wird nichts erschlossen. Weitere Ausnahmen gibt es nicht. Eine zweite braucht ein neues ADR. --------------------------------------------------------------------- */ --messing: #8a6b2e; /* Form, Mass, Bewegung. */ --abstand: 1rem; --radius: 6px; --radius-gross: 10px; --dauer: 140ms; /* DIE ABSTANDSSKALA (Gestaltungsanweisung Uebersicht, 20.08.2026). Zwischen zwei Zonenkarten am Schreibtisch 14px, am Handy 10px. Der Wert wechselt in der Bruchkante weiter unten und nirgends sonst — wer ihn an einer Karte einzeln setzt, hat zwei Skalen. */ --zonenabstand: 14px; /* DAS ZEILENMASS. Steht als Token, weil body und Karte es teilen und weil eine Zahl, die an zwei Stellen steht, an einer davon veraltet. */ --zeilenmass: 1.5; /* DIE SATZBREITE (Uebersicht-Vorgaben, Abschnitt 2). Das zweite Mass, das fehlte: die ZeilenLAENGE. Die Inhaltsspalte ist 68 rem breit, ein Absatz laeuft darin ueber etwa 135 Zeichen — mehr als das Doppelte des Lesbaren. HIER STAND BIS ZUM 29.08.2026: "66 und nicht 74 wie auf Papier: Am Schreibtisch haelt 66 die Zeile." DER SATZ WAR RICHTIG UND DIE ZAHL IST ES NICHT MEHR — Design hat am 29.08.2026 auf 72ch entschieden (anweisung-farbe-dunkelmodus-inhaltsbreite.md, Punkt 6), nachdem der Kern gemeldet hatte, dass 66ch im Fliesstextgrad nur 525 px von 1060 px Kartenbreite belegen. WARUM NICHT 75ch, und das ist Designs Begruendung und nicht unsere: 75ch ist das obere Ende der Lesbarkeitsspanne. "Der Leser dieses Vereins ist jenseits 50 und liest im Vereinsheim. Das obere Ende einer Spanne ist kein Zielwert." DIE 426 px, DIE IM BESTAND ALS UNTERE GRENZE HERUMSTANDEN, WAREN EIN ZWEITER SCHRIFTGRAD und kein Rundungsfehler: Sie messen 66ch in --grad-klein (13px). Design im Wortlaut: "Die Spanne ist kein Rundungsfehler, sondern zwei Grade." Sie gilt fuer LAUFENDEN TEXT — Absaetze, Einleitungen einer Zone, Meldungstexte, der Satz des leeren Falls. NICHT fuer Zeilen in Faelligkeitszonen, Tabellenzellen, Titel, Kicker, Feldbeschriftungen: Die sind kurz, und eine Grenze bricht sie nur frueher. ES GIBT NUR DEN NAMEN --satzbreite. Design fuehrte in den eigenen Dateien zeitweise --satz-breite mit 74ch daneben und hat das am 29.08.2026 widerrufen (Punkt 10). Der Name mit Bindestrich ist in KEINER Datei zu verwenden; 060_bedienkonzept.php haelt das zu. GEWAEHLT, nicht gerechnet. */ --satzbreite: 72ch; /* DIE ZEILENHOEHE (Auftrag App-Eindruck, Abschnitt 2). 56px, weil am Handy der Daumen trifft und 44px das Minimum ist — die 12px darueber halten die Zeile lesbar. Hergeleitet. Der Auftrag nennt sie sein einziges neues Token. Aus ihm sind vier geworden: --zeile-hoehe, --grad-seitentitel, --grad-seitentitel-schmal (Antwort auf Rueckfrage 2) und --karte-innen-schmal (Antwort auf Rueckfrage 6). Die Zahl im Auftrag ist der Stand vom 20.08.2026 vormittags und nicht falsch gewesen — sie ist ueberholt. */ --zeile-hoehe: 56px; /* DIE RAENDER (Kopfband-Vorgaben, Abschnitt 3). Bis zum 20.08.2026 stand ueberall --abstand. Ein Mass fuer alles ist kein Mass. Alle drei Saetze sind GEWAEHLT, mit einem gemeinsamen Verhaeltnis: unten mehr als oben (rund 1 : 1,2), weil eine Seite unten Luft braucht, damit sie endet und nicht abbricht. Die Werte je Bruchkante stehen dort. */ --seitenrand: 20px; --randoben: 22px; --randunten: 26px; /* Beide Schriften sind ausgeliefert und gebunden: fuenf @font-face weiter unten, fuenf Dateien in oeffentlich/schriften/, Lizenztexte daneben. Der Rueckfall auf system-ui und Georgia bleibt trotzdem in der Kette — ein Ladefehler darf die Oberflaeche nicht unlesbar machen. Bis zum 20.08.2026 stand hier "NICHT ausgeliefert ... im Repository liegen sie nicht". Der Satz hat einen Bericht der Gestaltung in die Irre gefuehrt: Er steht da, wo man ihn liest, wenn man von oben liest, und widerspricht der Datei, in der er steht. */ --schrift-text: "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* ZAHLEN IN BITTER PRO BRAUCHEN tabular-nums, Zahlen in Source Sans 3 nicht. Der Grund ist gemessen und nicht Geschmack: Bitter laeuft proportional (432 bis 635 Einheiten je Ziffer) und bringt das Merkmal tnum mit; Source Sans laeuft ohnehin gleich breit (497 fuer alle zehn) und hat gar kein tnum — dort waere es wirkungslos. Wer also eine Zahlenkolonne in den Zierschnitt setzt, setzt font-variant-numeric: tabular-nums dazu. Sonst tanzen die Spalten. Genau der Fall, fuer den der Zierschnitt vorgesehen ist: Zahlen in Auswertungen. Ein Test haelt das an jeder Regel, die ihn verwendet. */ --schrift-zier: "Bitter Pro", Georgia, serif; /* Nie unter 16px im Fliesstext. --grad-klein sind 13px und damit die Untergrenze fuer Text auf --grund-tief (Tokensatz, Abschnitt 5). */ --grad-klein: 0.8125rem; --grad-text: 1rem; --grad-gross: 1.25rem; --grad-titel: 1.625rem; /* DER SEITENTITEL HAT EINEN EIGENEN GRAD (Gestaltung, 20.08.2026, Antwort auf Rueckfrage 2). Bis dahin trug er 30px auf Zonenseiten und --grad-titel (26px) sonst — dieselbe Ueberschrift in zwei Groessen, je nachdem ob eine Uebergangsliste abgearbeitet ist. Das war in beiden Groessen falsch. GEWAEHLT sind die 30px, und der Grund ist die Lage: Der Seitentitel ist die einzige Schrift, die auf --grund steht — ohne Karte, ohne Kante, ohne Kicker. Er hat nichts, was ihn traegt, ausser seinem Grad. Bei 26px liegt er zu nah an den Kartentiteln, die auf Weiss stehen und dort optisch groesser wirken. HERGELEITET sind die 25px am Handy: der groesste Grad, in dem die laengste Ueberschrift des Bestands bei 390px in zwei Zeilen bleibt. --grad-titel bleibt, wo er hingehoert: Kartentitel. */ --grad-seitentitel: 1.875rem; --grad-seitentitel-schmal: 1.5625rem; /* EIN TOKEN FUER ZWEI STELLEN, DAMIT SIE NICHT AUSEINANDERLAUFEN KOENNEN (Gestaltung, Antwort auf Rueckfrage 6): der Innenabstand der Karte am Handy UND der Einzug des Seitenkopfs. Unter 700px stehen Seitentitel, Rueckverweis und Karteninhalt auf derselben senkrechten Kante; zwei getrennte 16 waeren zwei Zahlen ueber dieselbe Sache. */ --karte-innen-schmal: 16px; } /* --------------------------------------------------------------------------- Die Schriften. Selbst ausgeliefert, kein Fremdhost — die CSP erlaubt font-src 'self', und der Ausfall eines fremden Hosts waere unser Ausfall. font-display: swap ist Pflicht und keine Feinheit: Ohne sie bleibt der Text bis zu drei Sekunden unsichtbar, waehrend die Datei laedt. Der Rueckfall auf system-ui und Georgia waere dann formal vorhanden und praktisch nie zu sehen. Bitter Pro hat NUR zwei Schnitte, 600 und 700, und das ist Absicht: Es ist reine Auszeichnung — Seitentitel, Wortmarke, Zahlen in Auswertungen. Kein Regular. Wer einen dritten Schnitt nachlaedt, hat die Schrift zur Fliesstextschrift gemacht. DIE FAMILIE WIRD HIER BENANNT, NICHT AUS DER DATEI GELESEN. Die name-Tabelle der beiden Bitter-Dateien nennt sie weiterhin "Bitter Thin" — ein bekanntes Verhalten des Instanziierers, der die Namen beim Festsetzen der Gewichte nicht nachzieht. Ohne Folge, solange font-family und font-weight hier stehen. Wer das fuer einen Fehler haelt und die Dateien "richtigstellt", tauscht eine geprueft eingegangene Datei gegen eine selbstgebaute. Die Pfade sind relativ zu dieser Datei und nicht ab Wurzel: So traegt das Stylesheet auch, wenn das Portal einmal unter einem Unterpfad liegt. Herkunft, Fassung und Lizenz stehen in DRITTANBIETER.md, die Lizenztexte liegen neben den Dateien — die OFL verlangt ihre Mitlieferung. --------------------------------------------------------------------------- */ @font-face { font-family: "Source Sans 3"; src: url("schriften/SourceSans3-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("schriften/SourceSans3-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Source Sans 3"; src: url("schriften/SourceSans3-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: "Bitter Pro"; src: url("schriften/BitterPro-SemiBold.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Bitter Pro"; src: url("schriften/BitterPro-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } * { box-sizing: border-box; } body { margin: 0; background: var(--grund); color: var(--tinte); font: var(--grad-text)/var(--zeilenmass) var(--schrift-text); } /* --------------------------------------------------------------------------- DER VERWEIS (Gestaltungsanweisung Uebersicht, 20.08.2026). --tinte mit 1px --linie-stark darunter. KEIN BLAU und keine eigene Linkfarbe: Das Portal traegt drei bedeutungstragende Farben — Vereinsfarbe fuer Zugehoerigkeit, Messing fuer Verpflichtung, Rot fuer Hauptaktion und Gefahr (ADR-0030). Eine vierte fuer "hier kann man klicken" waere die vierte, und ADR-0030 verlangt dafuer ein eigenes ADR. Der Unterstrich und nicht text-decoration: Er sitzt tiefer, er traegt seine eigene Farbe, und er ueberlebt eine Zeile, die umbricht. Die Farbe ist --linie-stark, weil sie gegen alle drei Flaechen ueber 3,0 haelt — dieselbe Zahl, die 120_farbe an jedem Rand eines Bedienelements misst. Das Kopfband ist ausgenommen: Dort steht weisse Schrift auf der Vereinsfarbe, und ein --tinte-Verweis waere dort unlesbar. --------------------------------------------------------------------------- */ .inhalt a, .fuss a { color: var(--tinte); text-decoration: none; border-bottom: 1px solid var(--linie-stark); } .inhalt a:hover, .inhalt a:focus-visible, .fuss a:hover, .fuss a:focus-visible { border-bottom-color: var(--tinte); } /* Knoepfe sind keine Verweise. Ein Knopf, der als Verweis gebaut ist, traegt seine eigene Form und nicht zusaetzlich einen Unterstrich. */ .inhalt a.knopf-haupt, .inhalt a.knopf-still, .inhalt a.knopf-plus, .inhalt a.knopf-zeile { border-bottom: 0; } /* --------------------------------------------------------------------------- DAS KOPFBAND IN DREI BREITEN (Kopfband-Vorgaben, Abschnitte 1 und 2). Bis zum 20.08.2026 gab es genau eine Fassung, und die brach um: Unter 700px stand das Band auf drei Zeilen und frass ein Sechstel des Bildschirms, bevor Inhalt kam. Keine Vorgabe hatte je etwas darueber gesagt. Jetzt drei Fassungen mit gemessenen Grenzen: ab 1120px eine Zeile, 72px hoch 700-1119px zwei Zeilen, 115px hoch, Navigation offen unter 700px eine Zeile, 62px hoch, Navigation im Menue DIE 1120 SIND HERGELEITET, nicht gerundet: Wappen 38 + 12 + Vereinsname von 22 Zeichen (rund 200) + 28 + Haarlinie + 28 + fuenf Eintraege (rund 400) + 28 + Kontoname (rund 130) + 16 + Abmelden (rund 108) + 48 Innenabstand = 1094px. Der Aufschlag auf 1120 ist die Reserve fuer einen laengeren Namen. DIE 13px INNENABSTAND SIND GERECHNET: Das hoechste Teil im Band ist Abmelden mit 44px Treffbereich (ADR-0024). 13 + 44 + 13 = 70, mit der Kante 72 — das ist auf einem Bildschirm von 800px ein Elftel statt eines Sechstels. DER VEREINSNAME KUERZT, DIE NAVIGATION NIE. Ein Modul, das still aus dem Band faellt, ist fuer den Nutzer nicht vorhanden; ein gekuerzter Vereinsname ist eine Unschoenheit, ein fehlendes Modul ein Fehler. --------------------------------------------------------------------------- */ .kopf { display: flex; align-items: center; gap: 28px; padding: 13px 24px; flex-wrap: nowrap; position: sticky; top: 0; z-index: 20; } /* Der Namensblock kuerzt. min-width: 0 ist die Bedingung dafuer, dass text-overflow in einem Flex-Kind ueberhaupt greift. */ .kopf-name { display: inline-flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; font-size: 18px; font-weight: 600; text-decoration: none; color: inherit; } .kopf-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* DIE SENKRECHTE HAARLINIE IST FORT (Vorgabe 27.08.2026, Abschnitt 3.1). Sie trennte Zugehoerigkeit von Bedienung. Im Band steht seit E1 keine Bedienung mehr ausser Abmelden, also gibt es nichts mehr zu trennen. Hier stand `.kopf-strich`; die Regel ist geloescht und nicht auskommentiert. `.kopf-nav` IST EBENFALLS FORT. Die Navigation steht in drei eigenen Fassungen weiter unten — Seitenleiste, Modulzeile, Fussleiste. */ /* Der rechte Block wird GESCHOBEN, nicht getrennt. Keine zweite Linie: Eine Linie markiert eine Grenze, zwei markieren keine. */ .kopf-ich { margin-left: auto; padding-left: 8px; display: flex; align-items: center; gap: 16px; flex: none; } .kopf-ich form { margin: 0; } /* --------------------------------------------------------------------------- DAS BENUTZERZEICHEN IM BAND (Design, 29.08.2026, Punkt 12, Bauteile q und r). ES STEHT NEBEN `.kopf-ich` UND NICHT DARIN, und das ist der tragende Teil dieses Bauteils: `.kopf-ich` ist unter der E4-Bedingung `display: none`. Das Zeichen IST die Geraetefassung des Weges zum eigenen Konto — steckte es in `.kopf-ich`, waere es genau dort weg, wo es gebraucht wird. `align-self: stretch` UND NICHT `align-items: center` DES BANDES: Die weisse Flaeche des offenen Zustands muss bis an die Bandunterkante reichen und die Messingkante ueberdecken. Ein zentriertes Kind kennt seinen Abstand zur Bandunterkante nicht; ein gedehntes ist genau so hoch wie der Inhaltskasten des Bandes, und was darunter noch fehlt, ist der Innenabstand plus die Kante — beides feste Zahlen je Bruchkante. DAHER `--band-unterhang`: der Weg von der Unterkante dieses Elements bis unter die Messingkante. 13px Innenabstand + 2px Kante = 15; unter der E4-Bedingung 8 + 2 = 10. WER DEN INNENABSTAND VON `.kopf` AENDERT, AENDERT DIESE ZAHL MIT — sie steht deshalb neben ihm im selben Medienblock und nicht hier als Literal. --------------------------------------------------------------------------- */ .kopf-benutzer { --band-unterhang: 15px; /* 72 Band + 7 Hals. Unter der E4-Bedingung 62 + 7 + 60 Fussleiste. */ --flaeche-luft: 79px; /* DER RUECKZUG STEHT GENAU EINMAL IM BLATT, und die Bruchstellen setzen nur noch die ZAHL. Zuerst stand `margin-right` in beiden Medienblöcken; die Zusicherung „Kein Rand aus einer Bruchstelle wird spaeter von einer Grundregel ueberholt" (060_bedienkonzept.php) hat es angeschlagen. Sie hatte im Ergebnis unrecht — die zwei Bloecke schliessen einander aus —, und im Verfahren recht: Wer zwei Raender an denselben Selektor haengt, verlaesst sich darauf, dass zwei Medienbedingungen sich nie ueberlappen. Eine Zahl in einer Marke kann das nicht. */ margin-right: var(--zeichen-rueckzug, 0px); position: relative; flex: none; align-self: stretch; display: flex; align-items: center; } /* DER TREFFBEREICH IST 44 x 44 px (ADR-0024, Nachtrag vom 27.08.2026: "Der Treffbereich jeder Handlung betraegt am Geraet mindestens 44 px. Er gilt fuer ... Bandeintrag."). Das Zeichen darin misst 24px — die Mindestgroesse der Zeichenliste. */ .kopf-benutzer > summary { cursor: pointer; list-style: none; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); position: relative; } .kopf-benutzer > summary::-webkit-details-marker { display: none; } /* DER RING NIMMT DIE SCHRIFTFARBE UND IST DESHALB IN BEIDEN ZUSTAENDEN SICHTBAR: geschlossen weiss auf der Vereinsfarbe, geoeffnet --tinte auf --karte. Ein fester Ton waere in einem der zwei Zustaende unsichtbar — das ist derselbe Fall, den `.geraet-menue > summary:focus-visible` am 27.08.2026 hatte. */ .kopf-benutzer > summary:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; } /* DAS ZEICHEN KOMMT ALS MASKE, wie die Navigationszeichen und aus demselben Grund: Ueber `` greift `currentColor` nicht, und dieses Zeichen traegt zwei Toene. `.nav-zeichen` wird NICHT wiederverwendet — es ist die Klasse der Navigation, und das Benutzerzeichen ist keine (tests/faelle/175_navigation.php haelt jene Klasse gegen die Menuereihenfolge). */ .kopf-zeichen { display: block; width: 24px; height: 24px; flex: none; position: relative; background-color: currentColor; -webkit-mask-image: url(zeichen/person.svg); mask-image: url(zeichen/person.svg); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; } /* DAS ZEICHENFELD IM OFFENEN ZUSTAND — der obere Teil der Verbindung. `z-index: -1` legt es HINTER das Zeichen und VOR die Flaeche und die Messingkante des Bandes: Ein negativer Index bleibt im Stapelkontext von `.kopf` (position: sticky, z-index: 20) und malt dort ueber dessen eigenen Hintergrund und Rand, aber unter jeden Inhalt. Genau das verlangt Design: "Es reicht bis an die Bandunterkante und ueberdeckt die Messinglinie auf seinen 44 px." */ .kopf-benutzer[open]::before { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 22px); bottom: 0; border-radius: var(--radius) var(--radius) 0 0; background: var(--karte); z-index: -1; } /* DER HALS — 44px breit, also GENAU SO BREIT WIE DAS ZEICHENFELD, und 7px lang. Design: "Er ist die einzige Verbindung", "sie schwebt nicht". ER IST EIN ZWEITES PSEUDOELEMENT UND KEIN LAENGERES ERSTES, und der Grund ist die Kante der Flaeche: Die Flaeche traegt oben 1px `--linie`, und die liefe quer durch den Hals. Der Hals liegt deshalb DARUEBER (z-index 28 gegen 27) und reicht 1px in die Flaeche hinein. Seine Laenge ist `--band-unterhang` + 7 + 1: vom Ende des gedehnten Kastens bis unter die Bandkante, dann die 7px des Halses, dann das eine Pixel ueber die Kante der Flaeche. */ .kopf-benutzer[open]::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: calc(var(--band-unterhang) + 8px); background: var(--karte); z-index: 28; } /* DIE FLAECHE HINTER DEM ZEICHEN. 270px, rechts buendig mit dem Zeichenfeld — nur so trifft der 44px breite Hals ihre Oberkante. OBEN RECHTS SCHARF: Design nennt den Grund, und er ist geometrisch. Der Hals sitzt in den rechten 44px der Oberkante; eine Rundung dort schnitte ihm eine Kerbe in die Verbindung. KEIN SCHATTEN: "Der Bestand kennt keine schwebenden Flaechen. Fuss, Modulzeile und Fussleiste sind Baender mit einer Kante." Das ist der Unterschied zu `.mehr-flaeche` und `.menue-flaeche`, die beide einen tragen — sie haengen an nichts. */ .kopf-benutzer-flaeche { position: absolute; top: calc(100% + var(--band-unterhang) + 7px); right: 0; width: 270px; background: var(--karte); border: 1px solid var(--linie); border-radius: var(--radius); border-top-right-radius: 0; padding: 0 16px 12px; /* SIE IST NACH UNTEN BEGRENZT UND ROLLT — wie `.mehr-flaeche` (70vh) und `.menue-flaeche` (100dvh - 122px), und aus deren Grund. HEUTE PASST SIE OHNEHIN: zwei Zeilen, 162,5px, gemessen am 29.08.2026 bei 390 x 844. DIE VORGABE NENNT SIEBEN — dann sind es rund 400px, und im Querformat (844 x 390, E4 ueber die Hoehenbedingung) liefe die letzte Zeile aus dem Bild. Die letzte Zeile ist `Abmelden`, und unter der E4-Bedingung ist sie der EINZIGE Weg hinaus. `--flaeche-luft` ist, was ueber und unter der Flaeche verbraucht ist: Bandhoehe plus die 7px des Halses, unter E4 zusaetzlich die 60px der Fussleiste. Gemessen am 29.08.2026: Band 62px am Geraet, 72px ab 700px. */ max-height: calc(100dvh - var(--flaeche-luft)); overflow-y: auto; -webkit-overflow-scrolling: touch; z-index: 27; } /* DER KOPF DER FLAECHE. Er traegt heute NUR DEN NAMEN — die Rolle fehlt, und das ist gemessen und gemeldet: `ich()` liefert sie nicht, und `rollen_der_person()` liefert eine LISTE. Welche davon hier steht, ist nicht entschieden. Der Kommentar in kern/ansicht/kopf.php nennt den Preis beider Wege. */ .kopf-benutzer-kopfzeile { font-family: var(--schrift-zier); font-variant-numeric: tabular-nums; font-size: 19px; margin: 0; padding: 14px 0 10px; } .kopf-benutzer-liste { list-style: none; margin: 0; padding: 0; } /* 48px JE ZEILE (Design, Punkt 12) — mehr als die 44px des Treffbereichs und weniger als die 56px der Modulzeilen (`--zeile-hoehe`). Es ist eine eigene Zahl der Vorgabe und wird deshalb hingeschrieben statt aus einer der zwei bestehenden abgeleitet. */ .kopf-benutzer-weg { display: flex; align-items: center; min-height: 48px; font-size: 17px; text-decoration: none; border-bottom: 1px solid var(--linie); } .kopf-benutzer-weg:hover, .kopf-benutzer-weg:focus-visible { text-decoration: underline; text-underline-offset: 3px; } .kopf-benutzer-austritt { margin: 0; } /* `Abmelden` IST DIE EINZIGE HANDLUNG IN EINER LISTE VON WEGEN und steht zuletzt, halbfett (Design, Punkt 12). Es sieht aus wie eine Zeile und ist ein Knopf: Ein Verweis, der abmeldet, waere eine Handlung hinter einem GET. ES TRAEGT KEINE FLAECHE UND KEINEN RAND — es ist kein `knopf-still` in einem Formularfuss, sondern die letzte Zeile einer Liste. */ .kopf-benutzer-abmelden { display: flex; align-items: center; width: 100%; min-height: 48px; padding: 0; background: none; border: 0; font-family: inherit; font-size: 17px; font-weight: 600; color: inherit; text-align: left; cursor: pointer; } .kopf-benutzer-abmelden:hover, .kopf-benutzer-abmelden:focus-visible { text-decoration: underline; text-underline-offset: 3px; } /* --------------------------------------------------------------------------- DAS ZEICHEN AM SCHREIBTISCH (Design, Punkt 12: "32 px am Schreibtisch. Das Zeichen steht als Marke davor, 32 px, 9 px Abstand. Kein Umbau des Bandes."). DIESELBE BEDINGUNG WIE DIE SEITENLEISTE (E1) und nicht `min-width` allein: Ein Telefon im Querformat ist 844px breit und faellt unter E4 — dort gilt die Geraetefassung mit 24px, sonst stuende das grosse Zeichen in einem 62px hohen Band. DIE 9 PX SIND EINE RECHNUNG AUS VIER BEKANNTEN ZAHLEN, und sie steht als calc da, damit sie beim naechsten Griff mitgelesen wird: - 9 der gewuenschte Abstand zwischen Zeichen und Name - 6 das Spiel im Treffbereich: (44 - 32) / 2 - 28 `.kopf { gap }` - 8 `.kopf-ich { padding-left }` WER EINE DIESER VIER ZAHLEN AENDERT, AENDERT DIE ABSTAENDE HIER MIT. Das ist der Preis dafuer, dass das Zeichen NEBEN `.kopf-ich` steht und nicht darin — und dass es dort steht, ist die E4-Bedingung und keine Wahl. GEMELDET, WEIL UNGEPRUEFT: Ob die 9px vom ZEICHEN oder vom TREFFBEREICH aus gelten, sagt die Anweisung nicht. Gebaut ist "vom Zeichen", weil der Satz das Zeichen zum Subjekt hat. Das Beiblatt `pruefung/benutzerzeichen-29-08-2026.html`, das es entscheiden wuerde, ist nicht mitgeliefert worden. --------------------------------------------------------------------------- */ /* DER ABSTAND ZUM NAMEN GILT UEBERALL, WO `.kopf-ich` SICHTBAR IST — also ab 700px und ab 451px Hoehe, nicht erst am Schreibtisch. HIER FIEL DER BEREICH 700 BIS 1119 DURCH BEIDE BLOECKE (gefunden vom Skill code-review am 29.08.2026, nachgemessen bei 900 x 700): Das Zeichen stand dort 46px vom Namen — 10px Spiel im Feld, 28px Bandabstand, 8px Innenabstand von `.kopf-ich` — statt der verlangten 9. Es sah aus wie eine Marke ohne Zugehoerigkeit. ZWEI BLOECKE UND NICHT EINER, weil das Spiel im 44-px-Feld von der Zeichengroesse abhaengt: (44 - 24) / 2 = 10 hier, (44 - 32) / 2 = 6 am Schreibtisch. Die Rechnung steht in beiden als calc und nicht als Ergebnis. */ @media (min-width: 700px) and (min-height: 451px) { .kopf-benutzer { --zeichen-rueckzug: calc(9px - 10px - 28px - 8px); } } @media (min-width: 1120px) and (min-height: 451px) { .kopf-zeichen { width: 32px; height: 32px; } .kopf-benutzer { --zeichen-rueckzug: calc(9px - 6px - 28px - 8px); } /* DIE KANTE FAELLT AM SCHREIBTISCH WEG — die Regel dafuer steht im Farbabschnitt und nicht hier. SIE MUSS DORT STEHEN: Die weisse Kante wird unten gesetzt, und ein Medienblock erhoeht die Spezifitaet nicht. Ein `border-color: transparent` an dieser Stelle waere von der spaeteren Regel ueberschrieben worden — gemessen, nicht vermutet. */ } /* Die drei Navigationsfassungen sind im Grundzustand ALLE AUS und schalten sich je in ihrem eigenen Medienblock ein (siehe "DIE NAVIGATION IN DREI FASSUNGEN" weiter unten). Drei Bedingungen, die einander ausschliessen, sind leichter richtig zu halten als drei, die einander ueberschreiben — und display:none nimmt eine Fassung auch der Vorlesehilfe, statt sie ihr als zweite Liste derselben Ziele vorzulegen. */ .seitenleiste, .modulzeile, .fussleiste { display: none; } /* Seitentitel und Kartenueberschrift: der Zierschnitt, sonst nirgends. tabular-nums, weil Bitter Pro proportionale Ziffern hat (siehe :root). EIN GRAD FUER JEDES h1 IM INHALT, mit Zonen oder ohne (Gestaltung, 20.08.2026, Antwort auf Rueckfrage 2). Bis dahin stand hier --grad-titel (26px) und weiter unten fuer Zonenseiten 30px — dieselbe Ueberschrift in zwei Groessen, je nachdem ob die Uebergangsliste fuer diese Seite schon abgearbeitet ist. Das war in beiden Groessen falsch, und es waere mit der letzten Modulseite stillschweigend verschwunden, ohne dass jemand entschieden haette, welcher Grad gilt. --grad-titel IST DAMIT UNBENUTZT, und das steht hier, weil der Kommentar sonst eine Regel behauptet, die es nicht gibt: Die Antwort sagt, er bleibe "wo er hingehoert: Kartentitel" — im Stilblatt gibt es aber keine Regel fuer h2 im Inhalt. Gemessen: `var(--grad-titel)` kommt null mal vor, und die einzige h2-Regel ist `.fenster h2` mit --grad-gross. Die Kartentitel tragen heute den Vorgabewert des Browsers. Das ist eine Luecke in der Vorgabe und keine im Bau — sie ist gemeldet, und bis sie entschieden ist, bleibt das Token stehen, statt still zu verschwinden. Begruendung der beiden Werte des Seitentitels am Token. */ .inhalt h1 { font-size: var(--grad-seitentitel); font-family: var(--schrift-zier); font-variant-numeric: tabular-nums; margin-top: 0; } @media (max-width: 699px) { .inhalt h1 { font-size: var(--grad-seitentitel-schmal); } } /* --------------------------------------------------------------------------- DIE SEITE IST NICHT EINE KARTE MIT ABSCHNITTEN (Gestaltungsanweisung Uebersicht, 20.08.2026). Jede Zone ist eine EIGENE Karte auf --grund. Der Seitentitel steht auf --grund, nicht auf Weiss. Das widerspricht ADR-0031 nicht, es setzt ihn zum ersten Mal um: Der ADR sagt "darauf stehen weisse Karten" und begruendet sich damit, dass Zone 1 des Dashboards auf den ersten Blick von Zone 4 unterscheidbar sein muss (ADR-0025). Eine einzige Karte ueber die ganze Seite leistet das nicht — sie hat genau eine Flaeche, und darin sind alle Zonen gleich. DER UEBERGANG STEHT HIER UND IST BENANNT: Seiten, die ihre Zonen selbst setzen, tragen `.inhalt.zonen`. Alle uebrigen behalten die eine Karte, bis ihre Sitzung sie umstellt — das sind heute die Modulseiten, und sie gehoeren nicht dem Kern. Die Liste steht in 060_bedienkonzept und schrumpft; ist sie leer, faellt die Regel darunter weg. --------------------------------------------------------------------------- */ .inhalt { padding: var(--abstand) var(--seitenrand); max-width: 1100px; margin: var(--randoben) auto var(--randunten); background: var(--karte); border-radius: var(--radius-gross); } /* DIE RAENDER SIND DREI TOKEN, NICHT EINES (Kopfband-Vorgaben, Abschnitt 3). --randoben ist der Abstand unter dem Band, --randunten der unter dem Inhalt, --seitenrand der seitliche. Sie sind NICHT --zonenabstand: der regelt den Abstand ZWISCHEN Karten und bleibt bei 14/10px. */ .inhalt.zonen { padding: 0 var(--seitenrand); background: none; border-radius: 0; display: flex; flex-direction: column; gap: var(--zonenabstand); } /* Die Zonenkarte. Weiss auf --grund, damit alles Darinliegende — Listen, Formulare, stille Flaechen — sein gewohntes Verhaeltnis zu Weiss behaelt. --flaeche steht nie direkt auf --grund (ADR-0031), und das ist der Grund, warum eine Zone eine Karte braucht und nicht bloss einen Abstand. */ .karte { padding: var(--abstand); background: var(--karte); border-radius: var(--radius-gross); } /* --------------------------------------------------------------------------- DIE TEXTKARTE (Design, 29.08.2026, Punkt 6). ZWEI FASSUNGEN, EINE REGEL. `.karte` SELBST WIRD NICHT ANGEFASST — das steht so in der Anweisung ("`.karte` selbst wird in keinem Fall angefasst"), und der Grund ist gemessen: Kolonnenkarten wie das Vereinsbuch oder die Rollenseite behalten ihre Breite. Eine Begrenzung an `.karte` haette jede Tabelle mitgenommen. WAS DER FALL IST, den beide Fassungen loesen: Bei 1512 px Fensterbreite ist die Karte 1060 px breit. Laufender Text darin haelt --satzbreite und belegt damit 525 px — die uebrigen 535 px sind leere weisse Flaeche, und der Leser sieht eine Karte, die zur Haelfte leer ist. Design im Wortlaut: "wo die Flaeche sonst leer bliebe, folgt ihr die Karte." AUFGELOEST WURDE DABEI EIN WIDERSPRUCH, DEN DIE FRAGE SELBST ERZEUGT HATTE: `kopfband-vorgaben.md:433` verlangt "beides zusammen, nicht eines statt des anderen" — Text breiter UND Karte schmaler. Die Frage an den Betreiber war als Entweder-oder gestellt ("Karte schmaler ODER Text breiter"), seine Antwort BREITER gilt und ist hier enthalten: 66ch -> 72ch, und die Karte folgt. 1. `.textkarte` — DIE KARTE ENDET BEIM SATZ. Die Begrenzung steht auf DIESER Klasse und nicht auf `.karte`. Die Rechnung ist keine gewaehlte Zahl: --satzbreite ist die INHALTSbreite, die Karte traegt links und rechts je `--abstand` Innenabstand, und `box-sizing: border-box` gilt im ganzen Blatt (Zeile 276). Also Satzbreite plus zweimal Innenabstand. UNTER DER BRUCHKANTE IST SIE AUSGESCHALTET, und das steht als Regel im Bruchkantenblock — nicht als Annahme hier. HIER STAND: „UNTER DER BRUCHKANTE WIRKT SIE NIE ... weil das Fenster die Grenze ohnehin unterschreitet." DAS WAR FALSCH, gemessen am 29.08.2026: Die Bruchkante liegt bei 700 px, die Begrenzung greift ab rund 606 px. In den 94 px dazwischen war die Karte randlos UND begrenzt und hoerte vor der Geraetekante auf — bei 667 px mit einer Luecke von 62 px. GEFUNDEN HAT ES DER SKILL code-review, NICHT DIE KETTE. Der Fall ist die Klasse „ein Grund, der den heutigen Zustand beschreibt statt der Bauart": Die Aussage stimmte fuer 390 px und fuer 500 px, an denen jeder hinsieht, und nicht fuer 667. 2. `.textkarte-beiwerk` — VOLLE KARTENBREITE, SATZ LINKS, RANDSPALTE RECHTS. Beiwerk sind nach Designs Aufzaehlung: Stand (wann beschlossen, wann geaendert), Zustaendig (welches Amt), Dazu gehoert (Verweise auf andere Module). SIE HAT AM 29.08.2026 KEINEN VERWENDER IM BESTAND, und das steht hier mit Datum, weil es sonst niemand merkt: Keine Kernseite und keine Modulseite traegt heute Beiwerk. Design sagt ausdruecklich "nur wo vorhanden, kein Nachtragen erzwungen, eine leere Randspalte gibt es nicht" — es ist also kein Versaeumnis, sondern die Vorgabe. WER DIE ERSTE SEITE MIT BEIWERK BAUT, IST DER ERSTE, DER DIESE REGEL IM BILD SIEHT; bis dahin ist sie am Rendervorgang ungeprueft. DIE DREI ZAHLEN SIND DESIGNS UND NICHT UNSERE: Satz --satzbreite, Randspalte 260 px, dazwischen 32 px und eine Trennlinie in --linie. Die Linie steht als linke Kante der Randspalte, also 32 px neben dem Satz; ihr Innenabstand haelt den Text der Randspalte von ihr weg. Weicht Design davon ab, ist es EINE Zahl an EINER Stelle. --------------------------------------------------------------------------- */ .textkarte { max-width: calc(var(--satzbreite) + 2 * var(--abstand)); } .textkarte-beiwerk { display: grid; grid-template-columns: minmax(0, var(--satzbreite)) 260px; column-gap: 32px; align-items: start; } .textkarte-beiwerk > .beiwerk { border-left: 1px solid var(--linie); padding-left: 16px; font-size: var(--grad-klein); color: var(--tinte-leise); } /* Unter 1120 px ist fuer zwei Spalten kein Platz: 72ch plus 260 plus 32 plus zweimal Innenabstand ueberschreiten die Karte. Dann steht das Beiwerk unter dem Satz, und die Trennlinie wandert von links nach oben — sie trennt weiterhin dieselben zwei Dinge, nur in der anderen Richtung. */ @media (max-width: 1119px) { .textkarte-beiwerk { grid-template-columns: minmax(0, 1fr); row-gap: 32px; } .textkarte-beiwerk > .beiwerk { border-left: 0; border-top: 1px solid var(--linie); padding-left: 0; padding-top: 16px; } } /* Der Seitentitel steht auf --grund. Kein Kasten, keine Karte: Er benennt die Seite und traegt selbst nichts. DER GRAD DES SEITENTITELS STEHT NICHT MEHR HIER, sondern einmal an `.inhalt h1` weiter oben: Er gilt fuer jedes h1 im Inhalt, mit Zonen oder ohne (Gestaltung, Antwort auf Rueckfrage 2). Hier bleibt nur, was die Zone angeht — der Seitenkopf traegt keinen eigenen Aussenabstand, weil der Zonenabstand ihn setzt. */ .inhalt.zonen > .seitenkopf { margin: 0; } /* Der Rueckverweis steht wie der Seitentitel auf --grund und nicht in einer Karte. Das widerspricht ADR-0031 nicht: Der ADR verbietet --flaeche direkt auf --grund, und ein Verweis ist keine Flaeche — er ist Text mit Unterlinie, genau wie die Ueberschrift daneben Text ist. Eine eigene Karte um einen einzigen Verweis waere eine Zone, die kein Thema hat; im Seitenkopf neben dem Titel waere er eine Aktion, die er nicht ist. Beides von der Gestaltung am 20.08.2026 bestaetigt (Antwort auf Rueckfrage 5), mit zwei Berichtigungen: ER STEHT UEBER DEM SEITENKOPF, NICHT DARUNTER. Unter dem Kopf liegt er zwischen Titel und erster Karte und liest sich als deren erste Zeile. Ueber dem Titel ist er, was er ist: der Weg herein, also auch der Weg hinaus. Hergeleitet aus der Leserichtung, nicht gewaehlt — deshalb steht die Reihenfolge im Markup und nicht hier. UND ER TRAEGT EIN `‹` DAVOR, gespiegelt zum `›` der Befundzeile, damit Hin und Zurueck dasselbe Zeichen in beide Richtungen tragen. 14PX ABSTAND ZUM TITEL — UND DIE 14 STEHEN SCHON DA. Hier stand bis zum 21.08.2026 `margin: 0 0 14px`, und der Zonenstapel legt seinen `gap: var(--zonenabstand)` (ebenfalls 14px) DAZU: Flex-Abstand und Aussenabstand werden addiert, nicht zusammengelegt. Gemessen im Browser: 28px statt 14. Der Abstand kommt jetzt aus dem Zonenabstand, wo er ohnehin herkommt, und die Regel setzt ihn nicht ein zweites Mal. ENTSCHIEDEN AM 22.08.2026 — Gestaltung, Nachtrag in `docs/gestaltung/antwort-rueckfragen-kern.md`: Es gilt --zonenabstand, also 14px am Schreibtisch und 10px unter 700px. Der Abstand kommt hier aus dem Token und ist nicht eigens gesetzt. Abschnitt 5 der Vorgabe nannte nur die 14 und keine zweite Breite; die zweite Breite ist mit dem Nachtrag nachgetragen. Der Bau bleibt, wie er hier steht. Warum so gebaut — und das ist kein Geschmack: Eine feste 14 neben einer Skala, die unter 700px bei 10 endet, veraltet beim naechsten Mal, wenn jemand die Skala anfasst. Dann stehen zwei Werte fuer dieselbe Frage da, und nur einer wird nachgezogen. DIESER KOMMENTAR SICHERT NICHTS ZU: Ein Kommentar wird nicht rot (Gestaltung, 22.08.2026). Das tut `tests/faelle/060_bedienkonzept.php` — die Zeile „Der Abstand zwischen Rueckverweis und Seitentitel ist var(--zonenabstand) und keine eigene Zahl" prueft die Bindung an das Token und die drei Nullen, die den Abstand freihalten: hier, am Seitenkopf und am Titel darin. */ .inhalt .zurueck { margin: 0; } /* 44 px Trefffläche, dieselbe Zahl wie bei Hilfe und Support (Auftrag App-Eindruck, Abschnitt 8). Ein Rueckweg, den der Daumen nicht trifft, ist am Handy kein Rueckweg — und er ist dort haeufiger gebraucht als am Schreibtisch, wo der Browser einen Zurueck-Knopf hat. */ .inhalt .zurueck a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; } /* Der Winkel gehoert zum Weg, nicht zum Wort: Er traegt keine Unterlinie und steht in --tinte-leise. 19px und line-height 1 wie am `›` der Befundzeile. DAMIT DAS STIMMT, TRAEGT DAS WORT DIE UNTERLINIE UND NICHT DER VERWEIS. Stuende sie wie sonst am `a`, liefe sie unter dem Winkel mit — im Bild gesehen, nicht im Text. Am `›` der Befundzeile ist es genauso geloest (Auftrag App-Eindruck, Abschnitt 2). */ .inhalt .zurueck a { border-bottom: 0; } .zurueck-wort { border-bottom: 1px solid var(--linie-stark); } .inhalt .zurueck a:hover .zurueck-wort, .inhalt .zurueck a:focus-visible .zurueck-wort { border-bottom-color: var(--tinte); } .zurueck-winkel { font-size: 19px; line-height: 1; color: var(--tinte-leise); } /* Der Punkt im offenen Menue steht auf --karte — dort traegt Messing 4,97, waehrend es auf der Vereinsfarbe rund 1,0 erreicht. Eine Regel, zwei Flaechen (Kopfband-Vorgaben, Abschnitt 2.5). */ .menue-punkt { display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--messing); } /* Eine Meldung IST auf einer Zonenseite eine eigene Zone. Der Grund ist ADR-0031 und nicht Geschmack: --grund-tief ist die stille Flaeche und steht nie direkt auf --grund — dort erreicht sie 1,14 und verschwindet. Sie braucht eine Karte um sich, und auf einer Zonenseite ist die Meldung selbst eine. HIER STEHT NUR NOCH, WAS SICH VON `.meldung` UNTERSCHEIDET: Grund, Rahmen und Radius traegt die Meldung seit dem 20.08.2026 ohnehin (Gestaltung, Antwort auf Rueckfrage 9) — sie stehen deshalb nicht ein zweites Mal hier. Was die Zone braucht, ist der Abstand: kein eigener Aussenabstand, weil der Zonenabstand ihn setzt, und der volle Innenabstand einer Karte statt der 8px einer Zeile im Fliesstext. */ .inhalt.zonen > .meldung { margin: 0; padding: var(--abstand); } /* Der Satz in der Meldung. Er traegt die Satzbreite, damit die Karte sie nicht tragen muss (siehe oben) — auf JEDER Seite, mit Zonen oder ohne. Hier stand bis zum 21.08.2026: "Auf einer Seite ohne Zonen aendert er nichts: Dort ist `.meldung` selbst schon 66ch breit." Das war wahr, solange `.meldung` selbst ein max-width trug. Seit dem 20.08.2026 traegt sie keines mehr, und der Satz behauptete seither das Gegenteil dessen, was dasteht. */ .meldung-satz { display: block; max-width: var(--satzbreite); } /* DIE VERPFLICHTUNGSKANTE. Die Regel selbst und keine Ausnahme (ADR-0030, Nachtrag 20.08.2026): Wo sie steht, muss jemand etwas tun. 3px und nicht 2 — randlose Karten am Handy tragen 2px nicht: Unter der Bruchkante liegt die Karte am Bildschirmrand an, und eine 2px-Kante verschwindet dort in der Geraetekante. Sie sitzt an der KARTE und nicht an einer Liste darin. Bis zum 20.08.2026 hing sie an einer ul (.befundliste) — dann markiert sie den Befund und nicht die Zone, und wer die Zone ueberfliegt, sieht sie nicht. */ .karte-pflicht { border-left: 3px solid var(--messing); } .seitenkopf { display: flex; align-items: center; gap: var(--abstand); flex-wrap: wrap; } .seitenkopf-aktionen { margin-left: auto; } /* DIE ZAHL AM SEITENTITEL BLEIBT, ABER NICHT ALS FUSSNOTE (Gestaltung, 20.08.2026, Antwort auf Rueckfrage 4). Bis dahin stand sie in --grad-klein (13px) neben einem 30px-Titel; das ist keine Nebeninformation mehr, sondern eine Fussnote. Die Unterscheidung zum Zonentitel haelt: Ein Zonentitel steht ueber einer bis drei Zeilen, die man sieht, ohne zu zaehlen — dort ist die Zahl Laerm, und eine Zusicherung haelt sie fern. "Wie viele sind wir" ist dagegen eine Frage, die ein Funktionaer wirklich hat. 17px und nicht --grad-text: --grad-text ist der Fliesstextgrad (16px); 17px ist der Grad der Bedienschrift und steht so schon an .knopf-zeile und .kopf-name. Gemessen, nicht angenommen — die Antwort der Gestaltung nennt beides in einem Zug, und der Wert entscheidet. Source Sans 3 in 400: Dort laufen alle zehn Ziffern gleich breit (497 Einheiten), tabular-nums waere wirkungslos — es steht trotzdem da, weil die Zahl beim Filtern wechselt und die Kolonnenlage dann sichtbar wird, falls der Rueckfallschnitt einspringt. */ .anzahl { color: var(--tinte-leise); font-family: var(--schrift-text); font-weight: 400; font-size: 17px; font-variant-numeric: tabular-nums; margin-left: 8px; } /* ---------- Knoepfe ---------- */ /* --------------------------------------------------------------------------- DIE EINE HAUPTAKTION JE BILDSCHIRM IST GEFUELLT IN DER VEREINSFARBE (Kopfband-Vorgaben, Abschnitt 5.1). GEFAHR IST ROT UND NIE GEFUELLT. Das berichtigt ADR-0024, Aufzaehlungspunkt 1, und die Entscheidung dahinter ist dieselbe geblieben — "eine gefuellte Flaeche je Bildschirm". Nur die FARBE war an eine Annahme gebunden, die entfallen ist: Das ADR ist am 17.08.2026 geschrieben worden und nimmt die Erscheinung ausdruecklich aus. Damals gab es keine Vereinsfarbe. Jetzt gibt es sie, und sie traegt das Band. DER FALL, DER NICHT WARTET: Fuehrt ein Verein Rot als Vereinsfarbe — Schuetzenkompanien tun das —, dann waeren Hauptaktion und Gefahr dieselbe rote Flaeche. Genau davor schuetzt "Gefahr ist nie gefuellt": Die Hauptaktion ist die einzige gefuellte Flaeche im Inhalt, Gefahr ist Schrift und Rand. So bleiben beide unterscheidbar, in jedem Mandanten. Der Kontrast traegt: Die Vereinsfarbe ist auf weissen Text normiert, Garantie mindestens 4,64 ueber beide Fallmengen. Die Farbe selbst steht im Mandantensatz weiter unten — hier steht die Form. --------------------------------------------------------------------------- */ /* DIE MASSE STEHEN SEIT DEM 29.08.2026 FEST (Design, Punkt 10). HIER STAND `padding: 8px 16px` UND `font: inherit`. Beides ist ersetzt, und zwar durch Zahlen, die Design aus dem GEBAUTEN Stand uebernommen und geschaerft hat — nicht neu erfunden. Was sich aendert: Innenabstand 8/16 -> 10/18 Schriftgrad 16 px -> 17 px (`font: inherit` war --grad-text) Gewicht 400 -> 600 Zeilenmass 1.5 -> 1.2 Umbruch erlaubt -> nowrap Zeichen->Wort keiner -> 9 px `font` ALS KURZSCHRIFT UND NICHT VIER ZEILEN: Design gibt sie so an (`600 17px/1.2 var(--schrift-text)`), und die Kurzschrift setzt die uebrigen Bestandteile auf ihren Vorgabewert zurueck — das ist hier gewollt, weil `font: inherit` sonst durch die Hintertuer weiterwirkte. DIE MINDESTHOEHE VON 44 px WIRKT UND IST NICHT DEKORATION: 10 + 17*1,2 + 10 ergibt 40,4 px. Ohne sie waere jeder Knopf unter dem Treffbereich, den ADR-0024 fuer den Daumen am Telefon verlangt. Design: „Der Treffbereich am Handy ist keine Groessenfrage." `white-space: nowrap` UND SEIN PREIS: Ein Knopf bricht nicht mehr um, sondern schiebt die Zeile. Das ist die Vorgabe; `.formular-fuss` traegt dafuer `flex-wrap: wrap`, damit die KNOEPFE untereinander rutschen statt ihre WOERTER. `display: inline-flex` STEHT DAZU, WEIL DIE 9 px SONST NICHTS TUN: Ein `gap` wirkt nur in einem Flex- oder Rasterbehaelter. Ein