/* Gestaltungstokens des öffentlichen Teils (Konzept 15.2). Diese Datei enthält ausschließlich Werte, keine Regeln. Wer eine Farbe, einen Abstand oder eine Schriftgröße braucht, greift auf ein Token zu und schreibt keinen Zahlenwert in base.css, layout.css, components.css oder hero.css. So bleibt eine spätere Änderung eine Änderung an einer Stelle. Die Farbwerte stammen aus der Entscheidungsvorlage, die dem Vorstand am 01.09.2026 zugeleitet wurde; alle Paarungen sind nach WCAG 2.1 Stufe AA nachgerechnet (Konzept 6.4). Der Nachweis steht in der Vorlage, die erreichten Verhältnisse sind hier je Token vermerkt. */ :root { /* ------------------------------------------------------------------ Farben Vier Werte stammen unverändert aus Konzept 15.2, das Gold ist aus dem Vereinswappen gemessen, Verweisgrün und helles Grün sind ergänzt. Bei den Ergänzungen wurde nur die Helligkeit verändert, nicht der Farbton. ------------------------------------------------------------------ */ /* Waldgrün. Kopfbereich, Überschriften, Fußzeile. Auf Weiß 9,77:1. */ --farbe-primaer: #2C4A3B; /* Verweisgrün. Links, Schaltflächen, Rahmen von Eingabefeldern. Waldgrün auf 38 % Helligkeit. Auf Weiß 5,02:1, auf heller Fläche 4,53:1 – beides über den geforderten 4,5:1 für Fließtext. */ --farbe-primaer-mittel: #487961; /* Helles Grün. Hervorgehobene Kästen, Zierflächen hinter dunklem Text. Text darauf 11,03:1. Als Trägerfläche gedacht, nicht als Textfarbe. */ --farbe-primaer-hell: #B9D4C7; /* Gold aus dem Wappen. Sparsam einsetzen: Hinweise, Trennstreifen, Fokusrahmen. Verwendungsregel – bitte einhalten, sie ist gerechnet, nicht Geschmack: Gold trägt als *Fläche* dunklen Text (11,39:1) oder Waldgrün (6,40:1). Als *Schrift* ist es nur auf dem Waldgrün zulässig (6,40:1), etwa im Kopfbereich und in der Fußzeile. Niemals als Schrift auf Weiß oder Creme: es gibt keinen Goldton, der zugleich leuchtet und auf hellem Grund die geforderten 4,5:1 erreicht – wer ihn so weit abdunkelt, hat kein Gold mehr, sondern Olivbraun. Wo auf hellem Grund eine hervorgehobene Textfarbe gebraucht wird, übernimmt das Waldgrün. */ --farbe-akzent: #F0D020; /* Weiße Grundfläche des Inhaltsbereichs. */ --farbe-flaeche: #FFFFFF; /* Abgesetzte Abschnitte. Warm getönt, nicht reinweiß. */ --farbe-flaeche-alt: #F5F3EE; /* Fließtext. Kein reines Schwarz – das flimmert auf hellem Grund. Auf Weiß 17,40:1, auf heller Fläche 15,69:1. */ --farbe-text: #1A1A1A; /* Datumsangaben, Bildunterschriften. Auf Weiß 6,90:1. */ --farbe-text-leise: #5A5A5A; /* Fehlermeldungen in Formularen. Gehört nicht zur Farbwelt des Vereins, sondern ist ein Signalton – deshalb bewusst kein Ton aus dem Wappen. Auf Weiß 7,35:1. Die Farbe allein zeigt nie einen Fehler an: Konzept 6.4 verlangt, dass die Meldung im Klartext danebensteht, weil ein rot umrandetes Feld für Menschen mit Farbsehschwäche aussieht wie jedes andere. */ --farbe-fehler: #B00000; /* ------------------------------------------------------------------ Abstände Konsistente Skala statt beliebiger Pixelwerte (Konzept 15.2). Wer einen Zwischenwert zu brauchen glaubt, braucht in aller Regel den nächsten Wert der Skala. ------------------------------------------------------------------ */ --raum-1: 0.5rem; --raum-2: 1rem; --raum-3: 1.5rem; --raum-4: 2.5rem; --raum-5: 4rem; --raum-6: 6rem; /* ------------------------------------------------------------------ Typografie Beide Schriften werden selbst gehostet als woff2 unter wwwroot/fonts/ ausgeliefert, mit font-display: swap; die @font-face-Regeln stehen in base.css. Keine Einbindung von Google Fonts oder anderen externen Diensten (Konzept 6.2) – solange keine Drittdienste im Spiel sind, braucht die Seite kein Einwilligungsbanner. „Eringerfeld Serif" und „Eringerfeld Sans" sind Source Serif 4 und Source Sans 3, wie in Konzept 15.2 festgelegt. Die Umbenennung ist keine Marotte, sondern eine Auflage ihrer Lizenz: Beide tragen den Reserved Font Name „Source", der für eine bearbeitete Fassung – und das Verkleinern auf den lateinischen Zeichenvorrat ist eine solche – nicht weiterverwendet werden darf. Die vollständige Begründung samt Herkunft und Versionsnummern steht in wwwroot/fonts/LIESMICH.md. ------------------------------------------------------------------ */ --schrift-text: 'Eringerfeld Serif', Georgia, 'Times New Roman', serif; --schrift-titel: 'Eringerfeld Sans', system-ui, -apple-system, sans-serif; /* 18px. Untergrenze aus Konzept 6.4; die Zielgruppe umfasst viele ältere Leserinnen und Leser. Nicht verkleinern. */ --groesse-basis: 1.125rem; --zeilenhoehe: 1.65; /* Größenskala, abgeleitet von der Grundgröße. Das Konzept legt nur Grundgröße und Zeilenhöhe fest; die übrigen Stufen sind ergänzt und können angepasst werden, sobald die Seitenlayouts aus Content/Bauplan/ umgesetzt sind. Die Überschriften wachsen mit der Fensterbreite, bleiben aber nach unten auf einem Wert stehen, der auf dem Telefon noch als Überschrift wirkt. clamp() rechnet in rem, damit der Zoom auf 200 % greift. */ --groesse-klein: 0.9375rem; --groesse-vorspann: 1.375rem; --groesse-titel-3: 1.5rem; --groesse-titel-2: clamp(1.625rem, 1.35rem + 1.4vw, 2.125rem); --groesse-titel-1: clamp(2rem, 1.5rem + 2.5vw, 3rem); /* Überschriften brauchen eine engere Zeilenführung als der Fließtext, sonst zerfallen sie bei zwei Zeilen. */ --zeilenhoehe-titel: 1.2; /* ------------------------------------------------------------------ Maße ------------------------------------------------------------------ */ /* Äußere Begrenzung des Inhalts. Der Abzug hält den Text auf schmalen Fenstern vom Rand fern, ohne dass der Container eigenes Padding braucht. */ --breite-inhalt: min(1200px, 100% - 2 * var(--raum-3)); /* Fließtextspalte. Rund 70 Zeichen je Zeile – darüber verliert das Auge beim Zeilenwechsel den Anschluss. */ --breite-text: min(38rem, 100%); } /* ---------------------------------------------------------------------- Schmale Fenster Auf dem Telefon steht dieselbe Schrift in einer Spalte von keinen 350 px. Die Grundgröße bleibt davon unberührt: Konzept 6.4 verlangt mindestens 18 px, und die Zielgruppe umfasst viele ältere Leserinnen und Leser. Angepasst wird, was daneben zu groß gerät. Der seitliche Abzug kostet mit zweimal 24 px auf einem 390-px-Fenster ein Achtel der Breite; bei zweimal 16 px bleiben rund vier Zeichen je Zeile mehr, und der Fließtext wirkt weniger gedrängt, ohne dass die Schrift kleiner wird. Die Vorspanngröße trägt auf dieser Breite keine 22 px mehr – sie steht dann nicht mehr über, sondern neben dem Fließtext. ---------------------------------------------------------------------- */ @media (max-width: 30rem) { :root { --groesse-vorspann: 1.25rem; --breite-inhalt: min(1200px, 100% - 2 * var(--raum-2)); } }