Grüne AT Design System

Sichtbarer Style Guide & maschinenlesbare Spezifikation

Dieses Designsystem bündelt Farben, Typografie, Layout und UI-Bausteine aus dem Corporate Design der Grünen Österreich, damit alle Grüne-AT-Repos und -Tools ein einheitliches Erscheinungsbild teilen. Diese Seite dokumentiert das vollständige Vokabular von design-system.css — und nutzt es dabei selbst: jeder Seitenkopf, jede Karte, jedes Raster ist mit den echten gat--Klassen gerendert, nicht nachgebaut.

Sie richtet sich an Menschen als Referenz und an LLMs als lesbare Spezifikation. Der maschinenlesbare Teil steht im Abschnitt Spezifikation.

Farben

Das Farbsystem besteht aus vier Marken-Primitiven (1:1 aus dem CD-Quickguide), zwei neutralen Web-Ergänzungen und acht semantischen Aliasen. Komponenten verweisen ausschließlich auf die Aliase — so bleibt die Markenfarbe an einer Stelle änderbar.

Primitive

Die vier Markenfarben des grünen Corporate Designs. Der HEX-Wert ist maßgeblich.

--gat-color-dunkelgruen #257639 Primäre Markenfarbe (Dunkelgrün).

--gat-color-dunkelgruen-strong #005538 v2.1.1: vertiefte Variante für Opacity-Stacking (bleibt AA bei opacity: 0.8). Voll-opaker Marken-Default ist weiterhin --gat-color-dunkelgruen.

--gat-color-hellgruen #56af31 Sekundäre Markenfarbe (Hellgrün).

--gat-color-gelb #ffed00 Highlight-Farbe (Gelb).

--gat-color-magenta #e6007e Akzentfarbe (Magenta). HEX maßgeblich; das PDF-RGB ist inkonsistent.

Neutrals

Web-Ergänzung — der CD-Quickguide definiert nur die vier Markenfarben. Für Web-Text und -Hintergrund werden zwei Neutraltöne ergänzt.

--gat-color-weiss #ffffff Flächen / Text auf Grün.

--gat-color-anthrazit #1d1d1b Dunkler Textton.

Semantische Aliase

Acht rollenbasierte Aliase, die auf die Primitive bzw. Neutrals verweisen. Komponenten nutzen ausschließlich diese Aliase.

--gat-color-primary → dunkelgruen (#257639) Primärfläche.

--gat-color-secondary → hellgruen (#56af31) Sekundärfläche.

--gat-color-accent → magenta (#e6007e) Akzent — Unterstreichung, Störer.

--gat-color-highlight → gelb (#ffed00) Hervorhebung / Nav-Unterstreichung.

--gat-color-text → anthrazit (#1d1d1b) Standard-Textfarbe.

--gat-color-surface → weiss (#ffffff) Standard-Hintergrund.

Aa

--gat-color-on-primary → weiss (#ffffff) Text auf Dunkelgrün — Kontrast 5,63:1. Weiß-Text steht nur auf Dunkelgrün.

Aa

--gat-color-on-secondary → anthrazit (#1d1d1b) Text auf Hellgrün — Kontrast 6,09:1. Hellgrün und Gelb tragen Anthrazit-Text, nie Weiß.

Web-Layer-Tokens

Eine additive, entsättigte Schicht für Datenwerkzeuge mit langen Lesestrecken (Tabellen, Diagramme, Auswertungen). Die Marken-Tokens bleiben unverändert; Konsumenten wählen, welche Schicht sie binden. Alle Werte stehen unter --gat-web-*.

Flächen & Trennlinien

#f3f5f0 --gat-web-bg Seiten-Hintergrund.

#ffffff --gat-web-surface Kartenfläche / Panel.

#f7f9f4 --gat-web-surface-sunk Vertiefte Fläche (Tag-Hintergrund, Filter-Leisten).

#e1e4db --gat-web-hairline Trennlinien / Rahmen / Gitter.

Text-Töne (Web-Auslegung)

#23271f --gat-web-text Standard-Textfarbe.

#5e6358 --gat-web-text-soft Sekundär-Text, Sublines.

#6b6f63 --gat-web-text-mute Schwächste Textebene; AA auf allen drei Surfaces.

#9c5a38 --gat-web-clay-text Akzent-Text (Hinweise, Pflicht). AA auf Weiß: 5.34.

Web-Grüns & Gelb

#2c6e40 --gat-web-green-deep Akzent dunkel, Fokus-Ring, primäre Marken-Akzente.

#4a8a52 --gat-web-green Akzent mittel; Header-Linie, Aktiv-Indikatoren.

#e7efe3 --gat-web-green-tint Sanfte grüne Fläche (Callouts, Hero, Hover).

#ecd64a --gat-web-yellow Web-tauglicher Gelb-Akzent (entsättigt vs. Marken-Gelb).

8-Ton-Chart-Palette

Kategoriale Palette für Datenvisualisierung. Niedrige Sättigung für lange Lesestrecken, semantisch belegt. Identische Reihenfolge in gat-charts.js als PALETTE.

#3f7d4f --gat-web-chart-1 Erträge / primär grün.

#6ba368 --gat-web-chart-2 Personal-Alt / sekundär grün.

#4f93a0 --gat-web-chart-3 Personal / Teal.

#c9a24b --gat-web-chart-4 Sachaufwand / Ocker.

#b9744f --gat-web-chart-5 Aufwand / Risiko / Terrakotta.

#9c5b7d --gat-web-chart-6 Transfers / Pflaume.

#5d6b8a --gat-web-chart-7 Nettoergebnis / Schiefer.

#8a8f7d --gat-web-chart-8 Sonstige / neutrales Olivgrau.

Typografie

Drei Schrift-Tokens, eine modulare Größenskala (Basis 1rem, Ratio 1,25) und zwei Zeilenabstands-Faktoren aus dem CD-Quickguide. Die Headline- und Copy-Rolle nutzen Barlow Semi Condensed als freien Ersatz für das kommerzielle Gotham Narrow.

Schrift-Tokens

Barlow Semi Condensed — Headline-Rolle

--gat-font-headline · 'Barlow Semi Condensed', sans-serif · Headlines (CD: Gotham-Ultra-Ersatz)

Barlow Semi Condensed — Fließtext und UI-Beschriftungen.

--gat-font-copy · 'Barlow Semi Condensed', sans-serif · Fließtext / UI

Vollkorn — Hervorhebung und Zitat.

--gat-font-emphasis · 'Vollkorn', serif · Hervorhebungen / Zitate

Typo-Klassen (Live-Beispiele)

Vier Textklassen, jeweils echt gerendert plus Markup. Sie setzen nur Schrift, Größe, Zeilenabstand und Textfarbe — keine Fläche.

Gemeinsam für ein gutes Klima

<h2 class="gat-headline">Gemeinsam für ein gutes Klima</h2>

Eine Subline fasst die Headline in einem Satz zusammen.

<p class="gat-subline">Eine Subline fasst die Headline in einem Satz zusammen.</p>

Fließtext trägt die ausführliche Information. Er nutzt den weiten Copy-Zeilenabstand von 1,3, damit längere Absätze gut lesbar bleiben — auch über mehrere Zeilen hinweg.

<p class="gat-fliesstext">Fließtext trägt die ausführliche Information …</p>

Ein Satz mit einer besonders betonten Stelle im Vollkorn-Schnitt.

<em class="gat-emphasis">besonders betonte Stelle</em>

Größenskala

Sechs Größen-Tokens als Specimen-Reihe. Die rem-Werte folgen einer modularen Skala mit Ratio 1,25; die Pixel-Angaben gelten bei einer Browser-Basis von 16 px.

--gat-text-h1
2.441rem · ~39 px · Headline (H1-Rolle)

Beispieltext

--gat-text-h2
1.953rem · ~31 px · H2

Beispieltext

--gat-text-h3
1.563rem · ~25 px · H3 / Karten-Titel

Beispieltext

--gat-text-subline
1.25rem · ~20 px · Subline

Beispieltext

--gat-text-copy
1rem · 16 px · Fließtext

Beispieltext

--gat-text-small
0.8rem · ~13 px · Kleintext

Beispieltext

--gat-text-micro
0.6875rem · ~11 px · Caption (v2.1.1)

Beispieltext

--gat-text-micro (v2.1.1) ist ausschließlich für dichten Caption-Kontext — Glossar-Sub-Labels, Tabellenfußzeilen, Meta-Tags. Nicht für Lese-Text verwenden.

Zeilenabstände

Zwei einheitslose Multiplikatoren direkt aus dem CD-Quickguide. Sie werden unverändert als line-height gesetzt.

Enger Headline-Zeilenabstand
über mehrere Zeilen
für kompakte Schlagzeilen

--gat-leading-headline = 0,9 · Headline- und Subline-Zeilenabstand

Weiter Fließtext-Zeilenabstand
über mehrere Zeilen
für gut lesbare Absätze

--gat-leading-copy = 1,3 · Fließtext-Zeilenabstand

Layout

Fünf Layout-Klassen, sechs Abstands-Tokens, vier Komponenten-Maße und zwei Breakpoint-Tokens. Die Rasterklassen brechen ohne Media-Query selbsttätig um.

Layout-Klassen

.gat-container begrenzt die Lesebreite auf 72rem und zentriert den Inhalt mit seitlichem Padding — jeder Abschnitt dieser Seite sitzt darin. .gat-section setzt den vertikalen CD-Abstandsrhythmus; auch dieser Abschnitt ist eine gat-section.

1

2

3

4

.gat-grid — responsives auto-fit/minmax-Raster, bricht ohne Media-Query um.

<div class="gat-grid"> … N Kinder … </div>

1

2

.gat-grid--2 — feste 2-Spalten-Variante, bricht unter 36rem auf eine Spalte um.

1

2

3

.gat-grid--3 — feste 3-Spalten-Variante, bricht unter 36rem auf eine Spalte um.

Abstände

Sechs Abstands-Tokens für eine konsistente Layout-Rhythmik, Basis 0,25rem. Die Balkenbreite entspricht dem Token-Wert.

--gat-space-1 · 0.25rem

--gat-space-2 · 0.5rem

--gat-space-3 · 1rem

--gat-space-4 · 1.5rem

--gat-space-5 · 2rem

--gat-space-6 · 3rem

Komponenten-Maße

Komponenten-Maße — damit keine Komponente harte px-/rem-Werte verwendet. v2.1.1 ergänzt zwei Web-Token-Lücken (--gat-web-radius-mini, --gat-web-input-min-h).

Token	Wert	Verwendungszweck
--gat-radius-sm	0.25rem	Kleine Rundung — Buttons, Badges.
--gat-radius-md	0.5rem	Karten-Rundung.
--gat-border-width	2px	Standard-Strichstärke — z. B. Sekundär-Button-Outline.
--gat-container-max	72rem	Maximale Inhaltsbreite.
--gat-web-radius-mini	4px	v2.1.1 — Mini-Lozenge-Rundung für Inline-Tags und Chips. .gat-tag nutzt diesen Wert seit v2.1.1 (war 999px Pill in v2.0/v2.1).
--gat-web-radius-control	6px	Formular-/Control-Rundung — Inputs, Select, Buttons.
--gat-web-radius-card	10px	Card- und Panel-Rundung — Modal, Panel, Callout-rechts.
--gat-web-input-min-h	44px	v2.1.1 — WCAG-Touch-Target-Floor auf .gat-input/.gat-select/.gat-textarea. Konsumenten mit dichter Pointer-Optik überschreiben den Token nach unten.

radius-sm radius-md

Breakpoints

Zwei Breakpoint-Tokens, ausschließlich zur Dokumentation.

Token	Wert
--gat-breakpoint-sm	36rem
--gat-breakpoint-md	48rem

Hinweis: @media-Bedingungen können kein var() lesen. In design-system.css stehen die rem-Werte daher direkt in den Media-Queries; diese Tokens dienen rein der Nachvollziehbarkeit.

Komponenten

Alle UI-Bausteine als live gerendertes Beispiel plus HTML-Markup. Die Komponenten-Selektoren sind flach, einklassig und gat--präfixiert.

Header & Navigation

Der Seitenkopf ganz oben auf dieser Seite IST das Live-Beispiel für die weiße Brandbar: .gat-header, .gat-header__inner, .gat-header__brand, .gat-header__logo (echtes <img>), .gat-header__wordmark, .gat-header__nav-list und .gat-header__nav-current. Eine schmale grüne Akzentlinie sitzt am unteren Rand; die Navigation bricht auf schmalen Viewports um statt ein Hamburger-Menü zu nutzen.

v1.x-Konsumenten, die die dunkelgrüne Brandbar beibehalten möchten, ergänzen den Opt-in-Modifier .gat-header--dunkel — gleiches Markup, dunkler Hintergrund, weißer Text.

Design System (dunkel)

.gat-header.gat-header--dunkel — opt-in für die v1.x-Optik (dunkelgrüne Brandbar, weißer Text).

<header class="gat-header"> <div class="gat-header__inner"> <a class="gat-header__brand" href="#top"> <img class="gat-header__logo" src="https://design-system.gruene.at/assets/gruene-logo.svg" alt="Die Grünen"> <span class="gat-header__wordmark">Tool-Name</span> </a> <nav class="gat-header__nav" aria-label="Hauptnavigation"> <ul class="gat-header__nav-list"> <li><a class="gat-header__nav-current" href="#start">Start</a></li> <li><a href="#kontakt">Kontakt</a></li> </ul> </nav> </div> </header>

Kompakt-Modifier (v2.1.1)

.gat-header--kompakt erzwingt eine einreihige Brandbar mit kleinerem Padding und Text-Truncation (flex-wrap: nowrap, min-width: 0 auf den Sub-Elementen). Sinnvoll für search-first-Layouts mit Brandbar + Search-Trigger + Nav, wenn die Standard-Header in eine zweite Reihe umbrechen würde.

Sehr lange Tool-Bezeichnung mit Suffix

.gat-header.gat-header--kompakt — alles auf einer Zeile; Wordmark trunciert bei knappem Platz.

Werkzeug-Navigation

Horizontale Abschnitts-Navigation, gedacht direkt unter der Seiten-Headline im Hauptcontainer — die ruhige Alternative zum vertikalen Seitenmenü. Die Reiter sitzen auf einer Hairline-Grundlinie; der aktive Reiter trägt eine dunkelgrüne Markierung. Optionale .gat-toolnav__label-Gruppen strukturieren längere Navigationen, geplante Schritte bleiben als .gat-toolnav__item--disabled sichtbar.

Personenauswahl

.gat-toolnav mit __group, __label, __item (aktiv via --active / aria-current="page", deaktiviert via --disabled).

<h1 class="gat-headline">Personenauswahl</h1> <nav class="gat-toolnav" aria-label="Werkzeugnavigation"> <span class="gat-toolnav__group"> <a class="gat-toolnav__item gat-toolnav__item--active" href="#uebersicht" aria-current="page">Übersicht</a> </span> <span class="gat-toolnav__group"> <span class="gat-toolnav__label">Verfahren</span> <a class="gat-toolnav__item" href="#stage1">Stage 1</a> <span class="gat-toolnav__item gat-toolnav__item--disabled" aria-disabled="true">Stage 2</span> <a class="gat-toolnav__item" href="#stage3">Stage 3</a> </span> </nav>

Buttons

Ein Basis-Button mit Pflicht-Modifier. .gat-btn allein liefert nur Layout und Schrift — die Farbwelt kommt immer über --primary oder --secondary.

Primär-Aktion Sekundär-Aktion

:hover dunkelt den Primär-Button ab bzw. füllt den Sekundär-Button dunkelgrün; :focus-visible zeigt einen grünen Outline — alles rein per CSS, kein JavaScript.

<a class="gat-btn gat-btn--primary" href="#">Primär-Aktion</a> <a class="gat-btn gat-btn--secondary" href="#">Sekundär-Aktion</a>

Karten

.gat-card wird nie nackt verwendet — immer mit --primary oder --secondary. Titel und Body erben die Textfarbe der Variante und sitzen so kontrastrichtig auf ihrer grünen Fläche.

Primär-Karte

Dunkelgrüne Fläche mit weißem Text — Kontrast 5,63:1.

Sekundär-Karte

Hellgrüne Fläche mit Anthrazit-Text — Kontrast 6,09:1.

<article class="gat-card gat-card--primary"> <h3 class="gat-card__title">Primär-Karte</h3> <p class="gat-card__body">Dunkelgrüne Fläche mit weißem Text.</p> </article> <article class="gat-card gat-card--secondary"> <h3 class="gat-card__title">Sekundär-Karte</h3> <p class="gat-card__body">Hellgrüne Fläche mit Anthrazit-Text.</p> </article>

CD-Gestaltungselemente

Vier Inline-Elemente aus dem Corporate Design: die Magenta-Unterstreichung, die gelbe Hervorhebung und der gedrehte „Störer" in zwei Varianten.

Ein Satz mit einer unterstrichenen Stelle und einer gelb hervorgehobenen Stelle.

.gat-underline — Magenta-Unterstreichung; .gat-highlight — gelbe Marker-Fläche mit Anthrazit-Text.

<span class="gat-underline">unterstrichene Stelle</span> <mark class="gat-highlight">gelb hervorgehobene Stelle</mark>

Neu! Jetzt mitmachen

.gat-stoerer--gelb — gelbe Fläche, Anthrazit-Text; .gat-stoerer--magenta — magenta Fläche, weißer Text. Beide leicht gedreht.

<span class="gat-stoerer gat-stoerer--gelb">Neu!</span> <span class="gat-stoerer gat-stoerer--magenta">Jetzt mitmachen</span>

Do & Don't

Die zwei häufigsten Fehlpaarungen — und wie es richtig aussieht.

Richtig

Mit Varianten-Modifier

.gat-card trägt immer --primary oder --secondary; Anthrazit-Text auf Hellgrün.

Falsch

.gat-card ohne Varianten-Modifier — transparente Fläche, der Inhalt wirkt „kaputt". Und: weißer Text auf Hellgrün oder Gelb fällt durch den Kontrast, Hellgrün/Gelb tragen ausschließlich Anthrazit-Text.

Inhalts-Komponenten

Strukturelle Bausteine für lange Lesestrecken: Hinweise, Abschnitts-Köpfe, Hero-Streifen, Tags und der Skip-Link.

Callout

Hinweis-Panel mit grünem Linksrand; bündelt zusätzliche Erläuterungen oder Hinweise zu einem Abschnitt. v2.1 ergänzt fünf semantische Modifier (--info, --warn, --error/--danger, --success, --legal). Der unbenannte .gat-callout bleibt visuell wie in v2.0 (= info).

<aside class="gat-callout"> <p>Inhalt des Hinweises.</p> </aside>

Semantische Modifier (v2.1)

<aside class="gat-callout gat-callout--warn"> <p><strong>Warnung:</strong> Etwas erfordert Aufmerksamkeit.</p> </aside>

Mit Icon-Slot

Optionales Subelement .gat-callout__icon als reiner Slot. Das DS liefert keine Icons — der Konsument inseriert ein eigenes SVG oder einen Buchstaben.

Mit Lead-Slot (v2.1.1)

Optionales Subelement .gat-callout__lead für kurze Prefix-Labels („Hinweis:", „Wichtig:", „Hinweise zum Rechtsstand:"). Ersetzt das manuelle <strong> am Absatzanfang — eigenes Subelement, fett, dezenter Bottom-Spacing.

<aside class="gat-callout gat-callout--info"> <span class="gat-callout__lead">Hinweis:</span> <p>Inhalt des Hinweises.</p> </aside>

Section-Head

Kopf eines Inhalts-Abschnitts mit Subline. Erzwingt einheitliches Spacing zwischen Titel, Lead und folgendem Inhalt.

Demo-Abschnitt

Erklärungs-Lead unter dem Titel. Max-Breite begrenzt den Lesefluss.

<div class="gat-section-head"> <h2>Demo-Abschnitt</h2> <p>Erklärungs-Lead.</p> </div>

Hero

Hero-Streifen am Seitenanfang einer Inhalts-Seite, mit Titel und größerem Intro-Text.

Demo-Hero

Ein einleitender Absatz im Hero-Stil: größer als Fließtext, web-tauglicher Text-Soft-Ton, weiche Max-Breite.

<header class="gat-hero"> <h1 class="gat-hero__title">Titel</h1> <p class="gat-hero__intro">Einleitung.</p> </header>

Tag

Lozenge-Badge für Status, Kategorien oder Meta-Informationen. v2.0 brachte --neutral, --info, --pflicht, --risiko. v2.1 ergänzt die semantische Familie --ok/--success, --warn, --error/--danger. v2.1.1 wechselt die Rundung von Pill (999px) auf --gat-web-radius-mini (4px) — passt besser zu Inline-Tags in dichten Tabellen. Wer die alte Pill-Form will, setzt lokal .gat-tag { border-radius: 999px; }.

Neutral Info Pflichtfeld Risiko

OK Erfolg Warnung Fehler Danger

v2.1 — semantische Modifier --ok, --success, --warn, --error, --danger.

<span class="gat-tag gat-tag--ok">OK</span> <span class="gat-tag gat-tag--warn">Warnung</span> <span class="gat-tag gat-tag--error">Fehler</span>

Skiplink

Erstes interaktives Element der Seite; wird beim Fokussieren (Tab-Taste) sichtbar und springt zum Hauptinhalt. Auf dieser Seite ist er als allererstes Body-Element gesetzt — beim Laden der Seite einmal Tab drücken, um den Skiplink zu sehen.

<a class="gat-skiplink" href="#main">Direkt zum Inhalt</a>

Mark (v2.1.1)

Search-Highlight-Atom für Pagefind-Excerpts, On-Page-Search-Treffer oder hervorgehobene Token. Der Browser-Default für <mark> ist ein greller Highlighter, der mit der Marken-Palette beißt — v2.1.1 resettet natives <mark> per :where(mark)-Selektor (Spezifität (0,0,0), ohne Sieg überschreibbar) auf eine DS-konforme Optik und liefert parallel die explizite Klasse .gat-mark für Span-Wrapping in JS-Render-Pipelines.

Treffer in einer Excerpt-Zeile, automatisch via nativem Pagefind-Markup — oder explizit per Klasse im JS-Render-Pipeline-Span.

Natives <mark> und .gat-mark sind visuell identisch — beide nutzen --gat-color-gelb (entsättigt via color-mix) und --gat-color-text.

<p>Treffer-Excerpt mit <mark>Suchbegriff</mark>.</p> <p>Oder explizit: <span class="gat-mark">Suchbegriff</span>.</p>

HC-Pendant: in .gat-mode-hc wird der Treffer auf Gelb-auf-Anthrazit gespiegelt — bleibt sichtbar in der HC-Palette.

Formulare

v2.1 ergänzt eine strikt additive Form-Primitives-Familie. Native HTML-Elemente bekommen die Klasse direkt; das DS liefert Optik und States (default, hover, focus-visible, disabled, readonly, invalid), kein Verhalten. Der optionale .gat-field- Wrapper bündelt Label, Hint und Fehlertext.

Textfeld & Field-Wrapper

.gat-input deckt text/number/url/email/ tel/search/password/date ab. .gat-field gruppiert Label, Eingabe, Hinweis und Fehlertext.

E-Mail-Adresse Wir nutzen die Adresse nur für Rückfragen.

<div class="gat-field"> <label class="gat-field__label" for="email">E-Mail-Adresse</label> <input class="gat-input" id="email" type="email"> <span class="gat-field__hint">Nur für Rückfragen.</span> </div>

Eingabe-Zustände

Sechs States, alle aus dem gleichen Token-Set: default, hover, focus-visible, disabled, readonly, invalid.

Default

Disabled

Readonly

Invalid Bitte gültige E-Mail-Adresse angeben.

Select, Textarea, Range

Auswahl

Anmerkung

Lautstärke

Checkbox & Radio-Group

Native Inputs mit eigener Optik via accent-color. Konsumenten wickeln eine Checkbox oder Radio in .gat-check für das Label-Layout; mehrere Radios sammeln sie in .gat-radio-group.

Ich stimme der Verarbeitung meiner Eingaben zu.

Bevorzugte Kontaktart E-Mail Post Telefon

<label class="gat-check"> <input class="gat-checkbox" type="checkbox"> <span>Zustimmung</span> </label> <div class="gat-radio-group"> <label class="gat-check"> <input class="gat-radio" type="radio" name="kontakt"> <span>E-Mail</span> </label> </div>

Modal

v2.1 ergänzt eine opt-in-Klasse für das native <dialog>-Element. Konsumenten rufen showModal()/close() selbst auf; das DS liefert Backdrop, Schatten, Radius und das Sub-Element-Layout (__head, __title, __close, __body, __actions). Esc und Klick auf Backdrop schließen das Dialog nativ.

Funktionierendes Demo

Knopf öffnet das Dialog via showModal(). Esc und der Schließen-Knopf schließen es.

<button onclick="document.getElementById('m').showModal()">Öffnen</button> <dialog class="gat-modal" id="m"> <div class="gat-modal__head"> <h2 class="gat-modal__title">Titel</h2> <button class="gat-modal__close" onclick="this.closest('dialog').close()" aria-label="Schließen">×</button> </div> <div class="gat-modal__body"> … </div> <div class="gat-modal__actions"> <button class="gat-btn gat-btn--secondary" onclick="this.closest('dialog').close()">Abbrechen</button> <button class="gat-btn gat-btn--primary" onclick="this.closest('dialog').close()">Bestätigen</button> </div> </dialog>

Backdrop-Click schließen

Empfohlenes Muster — Konsumenten fügen einen Click-Handler auf das Dialog selbst hinzu und prüfen, ob der Klick außerhalb des Inhalts war.

dialog.addEventListener('click', (e) => { const r = dialog.getBoundingClientRect(); if (e.clientX < r.left || e.clientX > r.right || e.clientY < r.top || e.clientY > r.bottom) { dialog.close(); } });

Steuerungselemente

Tabs und Switcher zum Navigieren zwischen Inhalts-Sichten oder Filter-Ebenen. Konsumenten attachen JS-Listener, die die .is-active-Klasse zwischen den Buttons umschalten — das DS liefert nur die Optik.

Tabs

Folder-Tab-Optik mit Inset-Schatten als aktive Markierung. Tab-Mindestgröße 1.08rem für gute Lesbarkeit auch im Datenwerkzeug-Kontext.

Inhalt des aktiven Tab-Panels. Ein Einblend-Keyframe (gat-tab-panel-ein) macht den Wechsel weniger abrupt; prefers-reduced- motion reduziert ihn automatisch.

<div role="tablist" class="gat-tabbar"> <button class="gat-tab is-active">Übersicht</button> <button class="gat-tab">Erträge</button> </div> <div class="gat-tab-panel is-active">...</div> <div class="gat-tab-panel">...</div>

Switcher

Ruhige Segment-Gruppe für Filter- und Modus-Auswahlen. Mindestgröße 0.98rem.

Zeitraum

<div class="gat-switcher"> <span class="gat-switcher__label">Zeitraum</span> <button class="gat-switch-btn">2024</button> <button class="gat-switch-btn is-active">2026</button> </div>

Datenwerkzeug-Komponenten

Bausteine für Tools mit langen Lesestrecken (Tabellen, Diagramme, Auswertungen). Sie nutzen die --gat-web-*- Schicht und stehen optisch deutlich ruhiger als die Marken-Karten.

Metric-Cards

Einzelne Kennzahlen, mit semantischer Akzentlinie obenauf. Vier Varianten: --hero (grüne Tönung), --ertrag, --aufwand, --netto.

Nettoergebnis 2026

+312 k €

Ertrag VA

8,2 Mio €

Aufwand VA

7,9 Mio €

Δ Plan/Ist

−54 k €

<article class="gat-metric-card gat-metric-card--hero"> <div class="gat-metric-card__label">Nettoergebnis 2026</div> <div class="gat-metric-card__num">+312 k €</div> </article>

Panel

Rahmen für einen Inhaltsblock mit Kopf, Body und optionaler Note. Body bekommt Padding; der Modifier __body--table hebt das Padding für randlose Tabellen wieder auf.

Gemeindefinanzen 2026 — Voranschlag

.gat-panel

Hinweis: alle Werte sind Demo-Daten. Real-Werte werden vom Konsumenten-Tool nachgeladen.

Der Body-Teil ist die Bühne für den eigentlichen Inhalt: Tabellen, Diagramme, Listen, alles. Erstes und letztes Kind werden automatisch ohne zusätzlichen Außenabstand gerendert.

<section class="gat-panel"> <header class="gat-panel__head"> <div class="gat-panel__head-row"> <h3>Titel</h3> <span>Aktion</span> </div> <p class="gat-panel__note">Optionale Note.</p> </header> <div class="gat-panel__body">Body-Inhalt</div> </section>

Datentabelle

Die .gat-table-Familie liefert eine sticky-Head-Datentabelle mit optionalem Zebra-, Compact-, Dense- und Sticky-erste-Spalte-Modifier. Sortierung und Selektion sind Konsumenten-JS — das DS liefert nur die Optik und die Funktionsklassen .is-active / .is-desc.

Basis + Zebra + sortierbarer Head

.gat-table--zebra alterniert die Zeilenhintergründe. .gat-table__sortable markiert sortierbare Spaltenköpfe mit einem dezenten Pfeil-Indikator (CSS-Pseudo, kein Bild-Asset). Die mittlere Spalte ist hier aktiv- sortiert (.is-active). Die numerische Spalte nutzt .gat-table__num für rechtsbündige, tabellarische Ziffern.

Gemeinde	Einwohner	Budget €	Status
Herzogenburg	9 320	12 480 000	geprüft
Traismauer	5 870	7 920 400	offen
St. Pölten	57 100	204 100 000	geprüft
Krems	25 200	86 740 100	in Arbeit
Summe	97 490	311 240 500

<div class="gat-table-scroll"> <table class="gat-table gat-table--zebra"> <thead> <tr> <th class="gat-table__sortable is-active">Spalte</th> <th class="gat-table__sortable gat-table__num">Wert</th> </tr> </thead> <tbody>...</tbody> <tfoot>...</tfoot> </table> </div>

Compact + Dense

.gat-table--compact reduziert das Zellpadding; .gat-table--dense schaltet zusätzlich auf --gat-text-micro (~11 px) für datenreiche Vergleichstabellen.

Schrift	Gewicht	px	rem
Barlow Semi Condensed	400	16	1,00
Barlow Semi Condensed	700	20	1,25
Vollkorn	900 italic	25	1,56

Sticky erste Spalte

.gat-table--sticky-col hält die erste Spalte beim horizontalen Scrollen sichtbar. Wirkt nur innerhalb von .gat-table-scroll.

Maßnahme	2024	2025	2026	2027	2028	2029
Kinderbetreuung	120	135	142	150	158	165
Straßeninstandhaltung	88	92	97	99	104	108
Wasserversorgung	54	56	59	62	66	68

Drop-Zone

Datei-Upload-Zone mit vier visuellen States. Drag/Drop-Listener implementiert der Konsument und schaltet die Funktionsklassen .is-dragover bzw. .is-error.

Idle (Default)

Gestrichelter Rand, leicht entsättigter Hintergrund. .gat-dropzone__trigger ist der Sekundär-Button als File-Picker-Fallback.

Datei hierher ziehen

PDF, CSV oder XLSX — max. 10 MB

<div class="gat-dropzone"> <div class="gat-dropzone__icon"><svg .../></div> <p class="gat-dropzone__label">Datei hierher ziehen</p> <p class="gat-dropzone__hint">PDF, CSV oder XLSX — max. 10 MB</p> <button class="gat-btn gat-btn--secondary gat-dropzone__trigger"> Datei auswählen </button> </div>

Dragover-State (.is-dragover)

Konsument toggelt die Klasse während des nativen dragenter / dragleave-Lifecycles. Rand wird durchgehend, Hintergrund nimmt den Marken-Tint an.

Loslassen zum Hochladen

budget-2026.csv

Error-State (.is-error)

Nach fehlgeschlagenem Upload — Konsument setzt die Klasse und ergänzt einen erklärenden Hinweis.

Upload fehlgeschlagen

Datei zu groß (max. 10 MB). Bitte erneut versuchen.

Toast

Kurzlebige Status-Notifications. Container .gat-toaster ist fix-positioniert (Default unten-rechts), die einzelnen .gat-toast-Karten stapeln sich mit Slide-in-Animation. Lifecycle (Anzeige, Auto-Dismiss, Schließen) ist Konsumenten-JS. Hier sind die vier Varianten statisch demonstriert — der Toaster ist nicht auf position: fixed geschaltet, damit die Doku-Seite nicht überlagert wird.

Vier Schwere-Varianten

CSV-Import läuft im Hintergrund.

Voranschlag erfolgreich gespeichert.

3 Zeilen ohne Konto-Zuordnung übersprungen.

Verbindung zum Server verloren.

<div class="gat-toaster" role="status" aria-live="polite"> <div class="gat-toast gat-toast--success"> <div class="gat-toast__icon"><svg .../></div> <div class="gat-toast__body">Gespeichert.</div> <button class="gat-toast__close" aria-label="Schließen">×</button> </div> </div>

Toolbar

Sticky Action-Bar für Massen-Aktionen und Selektions-Operationen. Default ist .gat-toolbar sticky am unteren Rand des Scroll-Containers; .gat-toolbar--top kippt nach oben.

Top-Toolbar (--top)

Sticky am oberen Rand — typisch für persistente Filter-/Such-Bars.

Beispiel-Inhalt unter der Top-Toolbar. In einer realen Seite scrollt dieser Bereich, die Toolbar bleibt oben kleben.

Bottom-Toolbar (Default)

Sticky am unteren Rand — typisch für Massen-Aktionen nach Selektion (z. B. „3 ausgewählt → Löschen / Verschieben").

Beispiel-Inhalt über der Bottom-Toolbar.

<div class="gat-toolbar"> <span class="gat-toolbar__count">3 ausgewählt</span> <div class="gat-toolbar__actions"> <button class="gat-btn gat-btn--secondary">Verschieben</button> <button class="gat-btn gat-btn--primary">Löschen</button> </div> </div>

Hoher Kontrast (gat-mode-hc)

Eine zugängliche High-Contrast-Variante über die Tailwind-v4 Custom-Variant gat-mode-hc. Aktiviert wird sie durch Setzen der Klasse .gat-mode-hc auf <body> oder einem Ancestor. Das DS liefert die Variant und Komponenten-Overrides; der Toggle-Knopf ist Konsumenten-Sache.

Demo-Toggle (nur in dieser Doku-Seite)

Der Knopf hier setzt document.body.classList.toggle('gat-mode-hc') per Klick. Wenn aktiv, schaltet die gesamte Seite auf Anthrazit + Gelb + Magenta-Akzent um.

Konsumenten bauen ihren eigenen Knopf in ihrer Brandbar — das DS liefert nur die Variant. Snippet siehe MIGRATION.md.

Komponenten-Overrides

Folgende DS-Komponenten werden in gat-mode-hc automatisch umgestylt: .gat-header, .gat-callout, .gat-panel, .gat-metric-card, .gat-btn--primary/--secondary, .gat-tag--*, .gat-tab.is-active, .gat-switch-btn.is-active, .gat-skiplink.

/* Konsumenten-Snippet: Toggle-Knopf in der eigenen Brandbar */ <button type="button" aria-pressed="false" onclick="this.setAttribute('aria-pressed', document.body.classList.toggle('gat-mode-hc'))"> Hoher Kontrast </button>

Patterns

Übergreifende A11y- und Druck-Regeln, die für alle DS-Komponenten gleichzeitig greifen. Konsumenten passen nur die Tokens an, falls überhaupt nötig — der Rest läuft automatisch.

:focus-visible

Ein gemeinsamer Fokus-Ring liegt auf allen interaktiven DS-Elementen (Buttons, Skiplink, Tag, Tab, Switch-btn, Header-Brand-Link). Konsumenten verändern bei Bedarf --gat-web-focus-ring und --gat-web-focus-offset — der Selektor- Block bleibt unverändert.

prefers-reduced-motion

Wenn das OS oder der Browser die Bewegungs-Reduktion eingestellt haben, werden alle Transitions und Animationen auf 0.01ms gekürzt — Konsumenten brauchen nichts zu tun. Testbar in den Entwickler-Tools per „Emulate CSS media feature prefers-reduced-motion".

@media print

Eine zusammenhängende Druck-Stylesheet sorgt für saubere Ausdrucke: Weißer Hintergrund, schwarzer Text, Header ohne Schatten/Nav, Panels und Metric-Cards mit Hairline-Rand statt Schatten, keine Akzent-Linie obenauf, intelligente break-inside-Regeln für Tabellen und Headings. Bedienelemente, die im Druck nicht erscheinen sollen, bekommen die Klasse .gat-no-print.

.gat-header--fixed

Konvention für einen klebrigen Seitenkopf: position: fixed auf .gat-header, pointer-events: none am Header und : auto an seinen Kindern, damit Klicks „durch" den Header auf darunter liegende Elemente fallen können wenn die Maus den freien Platz im Header trifft. Konsumenten ergänzen eine zur Header-Höhe passende scroll-padding-top:

html { scroll-padding-top: 80px; }

Diagramme

Chart-Palette und ECharts-Helfer als ES-Modul. Konsumenten importieren das Modul direkt von der Pages-URL — kein npm, kein Build-Schritt, kein Vendoring. ECharts selbst bringen Konsumenten via eigenem CDN-Import mit.

Chart-Palette

Acht kategoriale Farben für Datenvisualisierung — identische Reihenfolge in CSS (--gat-web-chart-1..8) und JS (PALETTE[0..7]). Die Swatches sind direkt aus dem Token-Layer gerendert.

#3f7d4f PALETTE[0] Erträge / primär grün.

#6ba368 PALETTE[1] Personal-Alt / sekundär grün.

#4f93a0 PALETTE[2] Personal / Teal.

#c9a24b PALETTE[3] Sachaufwand / Ocker.

#b9744f PALETTE[4] Aufwand / Risiko.

#9c5b7d PALETTE[5] Transfers.

#5d6b8a PALETTE[6] Nettoergebnis.

#8a8f7d PALETTE[7] Sonstige.

Import-Beispiel

Das Modul gat-charts.js wird vom Pages-Workflow als statische Datei mitgeliefert. Konsumenten importieren es direkt aus dem Konsumenten-JS:

import { PALETTE, INK, LABEL_SIZE, AXIS_SIZE, BAR_MAX_DICHT, BAR_MAX_WEIT, tip, legende, grid, planIstLegende } from 'https://design-system.gruene.at/gat-charts.js';

ECharts selbst wird unabhängig vom Konsumenten geladen (eigener CDN-Import). Das DS bündelt ECharts bewusst nicht, um Vendoring zu vermeiden und Versions-Drift zu erlauben.

CD-Layout-Prinzipien

Vier Grundregeln aus dem CD-Quickguide für das Zusammenspiel von Logo, Schutzzone, Textabständen und Flächen. Sie sind formatabhängig und bewusst nicht als Tokens hinterlegt — es gibt in design-system.css keinen --gat-*-Wert für M oder das Logo-Verhältnis. Sie werden hier als Prinzip dokumentiert.

Schutzzone M

Rund um das Logo bleibt ein Freiraum frei von anderen Elementen. Das Maß M = 0,06 × kurze Kante des Mediums. Auf einem A4-Hochformat (kurze Kante 210 mm) sind das rund 12,6 mm.

Die gestrichelte Linie markiert die Schutzzone M rund um das Logo.

Logo-Verhältnis

Die Logo-Größe leitet sich aus der Schutzzone M ab: 3 × M im Print, 2,5 × M im Digitalen. So bleibt das Logo über alle Formate hinweg proportional.

Print — 3 × M

Digital — 2,5 × M

Textabstand

Der Abstand Headline ↔ Subline entspricht dem Abstand Headline ↔ Copy und beträgt jeweils X × 2 — X ist die Basiseinheit des jeweiligen Layouts.

Headline

Abstand = X × 2

Subline

Abstand = X × 2

Fließtext …

Typografie immer auf Grün

Die zentrale CD-Grundregel: Typografie steht immer auf einer grünen Fläche. design-system.css erzwingt das strukturell — .gat-header und die .gat-card-Varianten setzen Fläche und den passenden on-*-Textton gemeinsam.

Headline auf dunkelgrüner Fläche

Weißer Text auf Dunkelgrün — Kontrast 5,63:1.

Maschinenlesbare Spezifikation

Der folgende Block ist die maschinenlesbare Fassung dieses Style Guides — ein eingebetteter <script type="application/json">-Datenblock (kein ausführbares JavaScript). Er enthält das geschlossene Vokabular: alle 22 --gat-*-Tokens, alle 22 .gat-*-Klassen und die Nutzungsregeln.

LLMs und Tools können den Block über die id gat-design-spec auslesen und als verbindliche Spezifikation verwenden — ohne dieses CSS oder HTML interpretieren zu müssen. Tokens sind nach color/font/text/leading/space/size gruppiert; jeder Komponenten-Eintrag nennt purpose, modifiers, requires und markup.

Einbindung in eigene Tools

Ein konsumierendes Grüne-AT-Tool bindet das gehostete Stylesheet mit einem einzigen <link> im <head> ein. Damit erhält es automatisch die zentral gepflegten --gat-*-Tokens und alle gat--Komponenten.

Wichtig: design-system.css setzt bewusst keine Tag-Defaults — es stylt also kein body und keine sonstigen HTML-Elemente direkt. Eine konsumierende Seite muss ihr body-Grundlayout selbst setzen (margin, background, color und font-family aus den --gat-*-Tokens), sonst rendert sie in der Standardschrift und ohne Hintergrund.

Ein vollständiges, lauffähiges Minimal-Beispiel liegt unter examples/minimal.html — es zeigt die Einbindung, das body-Grundlayout und den Einsatz echter gat--Komponenten. Konsumierende Tools verlinken stets dieselbe URL und erhalten damit immer den aktuellen Stand; alle nennenswerten Änderungen — insbesondere Breaking Changes — sind in der CHANGELOG.md dokumentiert.