Die ausführliche Referenz mit Vorher/Nachher-Beispielen steht in docs/voice.md. Hier die Kurzfassung.

Zwei Schriften. Pally für Überschriften und Zahlen, variabel 100–900, liegt lokal in assets/fonts/Pally-Variable.woff2 und wird per @font-face in index.css eingebunden. Inter für Fließtext, variabel mit echtem Kursivschnitt, kommt vorläufig per @import von Google — der Preconnect dafür steht in snippets/header.php.

Überschriften

Zwei Familien: eine kühle um die Markenfarbe, eine warme als Akzent. Fünf Farben sind vom Verein geliefert und stehen als Anker exakt auf ihrem Wert; Dark Brown ist die einzige hinzugefügte, weil Mustard eine Schriftfarbe braucht. Alle übrigen Stufen sind in OKLCH zwischen genau diesen Ankern interpoliert — gleichmäßige Abstände in wahrgenommener Helligkeit, dichter am hellen Ende, Buntheit mit Maximum bei der Markenfarbe. Kein Schritt erreicht Reinweiß oder Reinschwarz. Werte 1:1 aus assets/css/input.css.

Die Ankerfarben

Kühle Rampe — Ton ~212°

Anker auf 200 (Light Cyan), 400 (Sky Blue) und 900 (Dark Teal), dazwischen gleichmäßige Abstände in wahrgenommener Helligkeit, dichter am hellen Ende.

Warme Rampe — Ton ~94°

Anker auf 100 (Cornsilk), 400 (Mustard) und 900 (Dark Brown). Akzent, nicht zweite Markenfarbe: die hellen Stufen tragen ausschließlich dunkle Schrift. 500 ist der Hover des CTA in der Kopfleiste, 900 die Schrift darauf.

Rollen

Nur diese gehören in Templates. Die Zahlenstufen darüber sind die Rohwerte. Links lesen ihre Farbe über --link-color, das auf evg-strong zeigt.

Neutrale

Der Seitengrund ist nicht weiß, sondern Papier — --color-paper, .bg-paper. Der Grund dafür sind die Aquarelle: sie sind auf weißes Papier gemalt und standen auf Reinweiß als hellere Platte auf der Seite. Auf dem Papierton gehen sie per mix-blend-mode: multiply darin auf, ihr ausgefranster Rand wird wieder zum Rand des Bildes statt zur Kante einer Bilddatei. Weiß bleibt dem vorbehalten, was auf dem Papier liegt: Karten (.bg-fullwhite), Formulare, die Glasleiste.

Alle drei Neutralen tragen denselben Ton wie die warme Familie (95,5°) mit einem Bruchteil ihrer Buntheit. Kühle Grautöne wie das frühere #f4f4f4 fielen neben dem warmen Grund sofort auf. --color-background ist der Token für getönte Flächen (.bg-background), nicht für die Seite. Die beiden nicht verwechseln: eine getönte Fläche auf getöntem Grund ist keine Fläche mehr.

Eine Tinte, vier Stufen

Fließtext, Beschriftungen und Hinweise laufen alle auf evg-text — abgestuft über die Deckkraft, nicht über eine zweite Farbe. Vorher standen hier Tailwinds gray-400 bis gray-900: ein kühles Blaugrau, das auf dem warmen Grund als eigene Farbfamilie auffiel. Die Prozentwerte sind auf dem Papiergrund gemessen, dem ungünstigsten Untergrund — auf Weiß liegt jede Stufe höher. /70 gibt es bewusst nicht: mit 4,37:1 auf Papier fiele es unter AA.

Vollrunde Pille mit abgesetzter Icon-Scheibe. Im Ruhezustand überlappen beide um 4px; beim Hover wandert die Scheibe 12px nach rechts, der Steg dazwischen zieht sich in die Länge und reißt kurz vor Schluss ab. Das Verschmelzen macht ein SVG-Filter (url(#gooey-button), die <defs> stehen in snippets/header.php), keine Grafik. Wer prefers-reduced-motion gesetzt hat, sieht die Scheibe unbewegt; der Fokus per Tastatur bewegt sie auch auf Touch-Geräten.

Die Hülle trägt nur den Filter; die sichtbaren Flächen sind .inner (die Pille) und das Icon (die Scheibe). Jede Variante setzt genau zwei Werte: --btn-bg und --btn-fg.

Eine Klasse für alle Textfelder, Textareas und Selects: .input-field — Mitgliedsantrag, Wunschglas und Einmalspende teilen sie sich. Der Ruhezustand ist bewusst leise — 1px Haarlinie, großzügiges Polster, kein Kasten. Die Linie ist getönte Tinte und die Füllung durchscheinendes Weiß, weil dieselbe Klasse auf Weiß und auf dem Cyan-Panel der Einmalspende sitzt.

Zustände

Auswahlkacheln — die Förderstufen

Das Radio ist sr-only, sichtbar ist die Kachel; peer-checked: übernimmt die Anzeige. Zwei mal zwei auf jeder Breite — vier nebeneinander gingen in der Formularspalte nur mit Worttrennung. Keine Stufe ist vorgewählt: eine Vorauswahl macht aus der Entscheidung, um die es hier geht, etwas, das man überspringt.

Schrittabzeichen

Die vier Abschnitte des Mitgliedsantrags tragen eine Nummer, damit die Länge absehbar ist. Die Scheibe ist Dekoration (aria-hidden); für Screenreader steht davor <span class="sr-only">Schritt 1 von 3: </span>.

Zustimmungskasten

Pflichtzustimmungen stehen im eigenen Kasten, nicht zwischen den Feldern: bg-evg-soft border-2 border-evg-mid rounded-card. Er trägt die stärkste Umrandung des ganzen Formulars — stärker als die Auswahlkacheln (1px, evg-text/25) und die Eingabefelder. Die Rangfolge ist Absicht: hier hakt jemand etwas rechtlich Bindendes ab. evg-mid ist dafür nicht frei gewählt, sondern genau die Rolle, die die Palette mit „Rahmen, die eine Komponente sichtbar machen“ beschreibt (3,9:1 auf Weiß) — dieselbe Kontur wie die Erfolgsmeldung darunter, nur zwei statt einem Pixel. Kühl darf der Kasten sein, weil er auf einer weißen Seitenkarte liegt und nicht auf dem Papiergrund.

Sammelmeldungen

Ohne Skript setzt der Browser nach dem Absenden oben an, und eine Meldung neben dem dritten Feld sieht dort niemand. Die Sammelmeldung steht deshalb über dem Formular, trägt role="alert" und tabindex="-1", und jeder Punkt verlinkt sein Feld.

Muster, die auf mehr als einer Seite vorkommen und deshalb gleich aussehen müssen. Was hier nicht steht, ist Einzelfall und darf einer bleiben.

Kicker

Eine Zeile Herkunft oder Kontext über der Überschrift. Immer evg-strong auf Weiß (5,6:1), immer versal, immer ohne Satzzeichen am Ende. Das Mittelpunkt-Trennzeichen (·) statt eines Kommas, damit die Zeile als Etikett und nicht als Satz gelesen wird.

Seitenkarte

Der Rahmen von /ideen, /mitglied-werden und den Projektseiten: bg-fullwhite, Breite max-w-6xl, und die Rundung erst ab md — auf schmalen Fenstern läuft die Karte randlos über die volle Breite, wo eine Rundung nur den Rand anknabbern würde. Seit der Seitengrund paper trägt, hat die Karte wieder einen Tonwertabstand zum Grund — auf Weiß hatte sie keinen und hing allein an md:border. Die Kontur bleibt trotzdem: der Abstand ist mit 1,16:1 ein Hauch, keine Kante.

Abstimmen im Wunschglas

Alle drei Zustände — offen, abgestimmt, Stimmen aufgebraucht — stehen serverseitig im Markup und werden per data-state in CSS umgeschaltet. Das Skript baut nie Markup, es kippt nur ein Attribut; genau das hält Karte, Modal und Projektseite davon ab, auseinanderzulaufen. Die Rücknahme ist immer sichtbar und nicht erst beim Hover: Touch-Geräte haben keinen Hover, und das Telefon ist, wo die meisten abstimmen.

Karte im Inhalt

Die kleinere Schwester der Seitenkarte, für Listen innerhalb einer Seite — Aufklappfragen, Förderstufen, der Abbinder unter dem FAQ: bg-fullwhite border-2 border-paper-line rounded-card. Weiß als Fläche, warme Neutrale als Kontur. Getönte Karten gibt es hier bewusst nicht: eine kühle Fläche direkt auf dem Papiergrund liest sich als Fremdkörper, eine warme nimmt dem gelben Knopf darin die Abhebung. Die Farbe im Block ist der Knopf, sonst nichts.

Himmelband

.page-sky — das Aquarell, das auf allen Unterseiten von der Oberkante des Dokuments über die volle Breite läuft und die Kopfleiste trägt. Auf der Startseite nicht: dort liegt die Leiste im Keyvisual. Es ist Textur, kein zweites Keyvisual — deshalb Wolken statt Motiv, deshalb ausgeblendet statt abgeschnitten.

Drei Dinge halten es zusammen: mix-blend-mode: multiply, damit das weiße Papier der Vorlage im Papiergrund aufgeht — dasselbe Verfahren wie beim Keyvisual; z-index: -1, weil ein positioniertes Element mit z-index: 0 nach der Malreihenfolge über dem späteren Inhalt landet und die Überschrift verdeckt hätte; und ein Maskenverlauf, dessen letzter Halt eine Länge ist und nicht ein Prozentwert — er muss genau dort bei null sein, wo der Inhalt beginnt, und in Prozent liefe dieser Punkt bei jeder Fensterbreite woanders hin. Unter prefers-contrast: more fällt das Band ganz weg.

Glasleiste

Die Kopfleiste schwebt über allem und ist deshalb Glas: backdrop-filter: blur(16px) saturate(150%) auf 85 % Weiß, gescrollt 92 %. Das Nachsättigen gehört dazu — reines Weichzeichnen wäscht die Farben dahinter aus und macht aus Glas Milch. Die Deckkraft ist zweimal gestiegen: erst von 55 % auf 68 %, weil weiße Schrift über den dunklen Abschnitten unter 4,5:1 fiel, dann von 68 % auf 85 %, weil das Himmelband Struktur hinter die Wortmarke legte. Der zweite Fall ist der lehrreiche — das Kontrastverhältnis war die ganze Zeit einwandfrei, der helle Teil des Lockups verlor trotzdem seine Form, weil hinter jedem Buchstaben ein anderer Blauton stand. Gegen gemusterten Untergrund hilft keine Rechnung, nur Deckkraft. Unter 65 % darf sie nie fallen; prefers-reduced-transparency und fehlendes backdrop-filter machen die Fläche deckend.

Meta-Zeile

p.meta — 13px, evg-strong, für Datumsangaben und die Fußzeile.

Mitgliederversammlung am 14. März 2026

Seitenbreiten

Die Breite steht als Tailwind-Utility am Wrapper, nicht in einer eigenen Klasse: max-w-6xl mx-auto px-4 md:px-12 für Formular- und Projektseiten, max-w-4xl für reine Textseiten. Das Polster wächst am Breakpoint mit, die Mitte bleibt die Mitte.

Sechs Dateien in assets/images/logo/, eingebunden über snippet('logo', ['variant' => …]). Das Snippet schneidet beim Einbetten width und height aus dem <svg>, damit CSS die Box bestimmt — und die Grafik wird von links angeschnitten statt skaliert. Genau das macht die Kopfleiste responsiv: Box verengen, und der Schriftzug fällt weg, das Signet bleibt in voller Größe. Kein zweites Markup, keine zweite Datei. Die Steckbriefe unten zeigen jede Datei dagegen vollständig und unbeschnitten.

Farben des Logos

Das Signet behält sein eigenes Türkis, #6EB1BE — es liegt neben der Markenfarbe, ist aber nicht dieselbe und wird deshalb nicht durch evg-base ersetzt. Der Schriftzug läuft dagegen auf der Palette: #6EB1BE hält unter Text nur 2,4:1 — als Form lesbar, als Wort ausgewaschen.

Outline-Icons im Tabler-Stil, 24×24-Raster, stroke: currentColor, Strichstärke 1.5–2 (2.5 in der Button-Scheibe, weil sie auf 18px Zeichenfläche schrumpft). Immer inline als <svg> im Markup: es gibt keine Icon-Bibliothek und keinen Sprite. Ein <svg> ohne eigene Maßangaben füllt seine Box — die Größe steht also am Container (w-8 h-8), nicht doppelt im Markup und im CSS.