/** * Basis-Typografie/-Resets, gueltig fuer den gesamten Baum (nicht * komponenten- oder seitenspezifisch). Aus main.css ausgelagert seit * Phase 7.3, s. FRONTEND.md "CSS-Architektur"-Entscheidung. * * Phase 8.1 (REDESIGN.md) hat einen minimalen modernen Reset ergaenzt und die * Typo-Werte selbst bewusst stehen lassen. Phase 8.2 loest sie ab: * * - Body von 10pt (~13px) auf --fs-base (16px) mit --lh-base (1.6). Der * Altbestand hatte NIRGENDS eine line-height, Fliesstext lief auf dem * Browser-Default ~1.2. * - "table { font-size: 9pt }" ersatzlos raus. Diese Regel war die Quelle * des Kompatibilitaets-Nachtrags in layout.css (.main-panel__content / * .forum-panel, s. FRONTEND.md Phase 7.7): sie traf vor Phase 7.3 auf die * aeusserste Rahmentabelle zu und vererbte 9pt an jeden Seiteninhalt. * Diesen Vorfahren gibt es seit 7.3 nicht mehr, und mit einer echten * Typo-Skala ist die Regel gegenstandslos -- Tabellen tragen jetzt * dieselbe Groesse wie der uebrige Inhalt. * - Links sind nicht mehr pauschal fett. Das war die einzige * "Hervorhebung", die der Altbestand kannte, und wurde von a.menu direkt * wieder auf normal zurueckgesetzt. Ersatz: Markenfarbe + gedaempfte * Unterstreichung, die beim Hover voll wird. "a:active { text-decoration: * overline }" ist ersatzlos gestrichen. * - h1-h6 sind erstmals ueberhaupt definiert (vorher voellig ungestylt, * daneben drei Ad-hoc-Ersatzstile .big/.satzheader/.profile-form__section). * * Phase 8.4 ergaenzt den Block "Bedienelemente" ganz unten -- input, select, * textarea und button hatten bis dahin ueberhaupt keinen Stil. */ /* Genau eine box-sizing-Deklaration gab es vor 8.1 im ganzen Baum (.field-form--wide in components.css). */ *, *::before, *::after { box-sizing: border-box; } /* Phase 8.8 (Nebenbefund 19): das weisse Inhaltsband endete bisher mit dem Inhalt -- auf kurzen Seiten (login, historie, na, Fehlerseiten) klebte der Fuss mitten im Bild und darunter stand der graue Seitenhintergrund. Der Flexrahmen laesst .page-shell den Rest der Fensterhoehe fuellen. Er gilt fuer alle drei Seitensorten (index.php, forum/forum.php, die Popups und Fehlerseiten): ueberall sind die -Kinder Kopf/Hero (optional), .page-shell und der Fuss. Absolut positionierte Kinder (Skip-Link, ) sind aus dem Fluss und damit unberuehrt. */ body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; background: var(--color-page-bg); color: var(--color-text); font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-base); } .page-shell { flex: 1 0 auto; } /* Bilder brechen den Rahmen nicht auf schmalen Viewports. "height: auto" hat 8.1 bewusst weggelassen und auf spaeter vertagt: im Baum standen Hoehen als HTML-Attribut, und CSS gewinnt gegen das Attribut -- die drei Seitenfotos mit height="290", vor allem aber die img/null.gif-Spacer mit Attributhoehen bis 130px (details.php, intern.termine.php, intern.gallery.php, intern.list.php, intern.proto.php, forum.threads.php) waeren auf ihre natuerliche 1px-Groesse zusammengefallen und haetten Abstaende in Seiten zerlegt, die damals noch nicht umgebaut waren. Phase 8.8: der letzte dieser Spacer ist mit details.php gefallen, img/null.gif wird im ganzen Baum nicht mehr referenziert. Verbliebene height-Attribute an Bildern gibt es nur noch in der nie aufgerufenen msginfo() in list.functions.php (Messenger-Icons; die Spalte ist laut CLAUDE.md ein totes Altfeld). Damit ist die Zeile jetzt gefahrlos -- und noetig, sobald ein Bild ueber max-width skaliert: ohne sie wuerde es verzerren. */ img { max-width: 100%; height: auto; } /* Tastaturbedienung war vorher unsichtbar -- kein :focus-visible irgendwo im Baum. Notiz zur Abweichung vom Plan (REDESIGN.md 8.1 nennt --accent-gold): Gold auf Weiss misst 2,6:1 und verfehlt damit die 3:1, die WCAG 1.4.11 fuer Bedienelement-Indikatoren verlangt. Auf den heutigen weissen Flaechen ist --brand-700 mit 8,1:1 der richtige Ring. Gold bleibt fuer die dunkelgruene Kopfleiste reserviert, wo Gruen unsichtbar waere -- die kommt in 8.3 und bringt ihre eigene Ring-Variante mit. */ :focus-visible { outline: 2px solid var(--brand-700); outline-offset: 2px; } /** * Ueberschriften. Bis Phase 8.1 hatte der Baum keine einzige h1-h6-Regel; die * wenigen vorhandenen Ueberschriften liefen auf den Browser-Defaults (Times, * 2em/1.5em/1.17em), waehrend als "Ueberschrift" tatsaechlich drei Ad-hoc- * Klassen mit reiner font-size dienten. Die Skala hier haelt die * Groessenverhaeltnisse des Altbestands ein (16pt auf 9pt Inhalt = 1,78x, hier * --fs-2xl auf --fs-base = 1,75x), nur eben von einer lesbaren Basis aus. * * Verwendung im Baum: h1 = Seitentitel eines Fragments (bisher nur * main.satzung.php), h2 = Abschnittstitel innerhalb eines Fragments (die * bisherigen .big/.profile-form__section-Stellen), h3/h4 darunter. */ h1, h2, h3, h4, h5, h6 { margin: var(--space-6) 0 var(--space-3); font-family: var(--font-display); font-weight: 700; line-height: var(--lh-tight); /* Phase 8.7 gegen die Uebergangs-Zentrierung von .page eingezogen (Nebenbefund 16); seit 8.8 ist diese Zentrierung weg und die Zeile bestaetigt nur noch den Standardwert. Bleibt stehen, weil sie die Absicht festhaelt: Ueberschriften in diesem Design sind linksbuendig, ein .text-center am Element gewinnt weiterhin. */ text-align: left; } /* Ein Fragment beginnt oft direkt mit seiner Ueberschrift -- dort waere der obere Abstand ein Loch am Seitenanfang. */ h1:first-child, h2:first-child, h3:first-child, h4:first-child, h5:first-child, h6:first-child { margin-top: 0; } h1 { font-size: var(--fs-3xl); } h2 { font-size: var(--fs-2xl); } h3 { font-size: var(--fs-xl); } h4 { font-size: var(--fs-lg); } h5 { font-size: var(--fs-base); } h6 { font-size: var(--fs-sm); } /** * Links. Vorher: font-weight:bold auf JEDEN Link, text-decoration:none, blau * (#336699), beim Hover schwarz + Unterstreichung, beim :active eine Overline. * Das Pauschal-Bold war die einzige Hervorhebung im ganzen Dokument und musste * von a.menu (Navigation) sofort wieder zurueckgenommen werden. * * Jetzt: Markenfarbe plus dauerhafte, aber gedaempfte Unterstreichung -- Links * sind damit auch ohne Farbwahrnehmung als Links erkennbar (WCAG 1.4.1), und * der Hover verstaerkt die Linie, statt die Farbe zu wechseln. * font-family/font-size standen hier dreimal explizit, obwohl sie ohnehin * erbt -- ersatzlos entfallen. */ a { color: var(--color-link); text-decoration: underline; text-decoration-thickness: 1px; text-decoration-color: color-mix(in srgb, currentColor 35%, transparent); text-underline-offset: .15em; transition: color var(--transition), text-decoration-color var(--transition); } a:hover { color: var(--color-link-hover); text-decoration-color: currentColor; } /** * Bedienelemente. Bis Phase 8.4 gab es dafuer genau eine Regel -- "input { * border-color: ...; border-width: 1px }" --, und die war wirkungslos: ohne * border-style bleibt die Umrandung auf "none" bzw. auf dem UA-Default * (Nebenbefund 6 in REDESIGN.md). Effektiv waren alle Felder und Knoepfe im * Baum reine Browser-Widgets. * * font: inherit ist dabei mehr als Kosmetik: Formularelemente erben ihre * Schrift NICHT, sie liefen auf dem UA-Default (13px Arial). Auf 16px zu * kommen verhindert nebenbei den Auto-Zoom, den iOS Safari bei kleineren * Eingabefeldern ausloest. */ input, select, textarea, button { font: inherit; color: inherit; } input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="date"], input[type="file"], select, textarea { max-width: 100%; padding: var(--space-1) var(--space-2); background: var(--color-surface); border: 1px solid var(--color-input-border); border-radius: var(--radius-sm); transition: border-color var(--transition), box-shadow var(--transition); } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus, input[type="number"]:focus, input[type="date"]:focus, select:focus, textarea:focus { border-color: var(--brand-600); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-600) 20%, transparent); } button, input[type="submit"], input[type="reset"], input[type="button"] { /* 40px hoch statt der ~22px eines UA-Buttons -- die Formulare des internen Bereichs werden am Handy bedient. */ min-height: 40px; padding: var(--space-2) var(--space-4); background: var(--brand-700); color: var(--color-on-brand); border: 1px solid var(--brand-700); border-radius: var(--radius); cursor: pointer; transition: background-color var(--transition), border-color var(--transition); } button:hover, input[type="submit"]:hover, input[type="reset"]:hover, input[type="button"]:hover { background: var(--brand-800); border-color: var(--brand-800); } input[type="checkbox"], input[type="radio"] { accent-color: var(--brand-700); width: 1.1em; height: 1.1em; } /* Pflichtfeld-Markierung in den Steckbrief-Formularen. */ b.needed { color: var(--danger-600); } /** * Bewegung nur, wenn sie erwuenscht ist (Phase 8.8). * * Der Baum hat seit 8.1/8.3 an rund einem Dutzend Stellen Transitions -- * Nav-Kacheln, Links, Kacheln, Karten, Eingabefelder, Skip-Link. Nichts davon * ist gross oder bewegt sich ueber den Bildschirm, aber "prefers-reduced-motion" * ist eine Nutzerentscheidung und keine Frage der Groesse. Der Block schaltet * Transitions und Animationen global auf praktisch null, statt sie in jeder * einzelnen Regel zu bedingen -- die 0.01ms statt 0 halten transitionend-Handler * am Leben (hier keine, aber es ist die verbreitete Fassung des Rezepts). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }