/* Gestaltungstoken Tammen GmbH, Übergangsseite tammen.de * * Quelle der Systematik: Skill digitly-website, assets/tokens.template.css, * references/tokens-schema.md. Reduzierter Scope, siehe .website/state.json. * Stand: 17.09.2026. * * Diese Datei ist die Quelle der Wahrheit für Farbe, Typografie, Raum, Form und Fokus. * Kein Wert steht irgendwo sonst. * * Belege: * Markenrot #e30b3c aus assets-quelle/logo-tammen-2026.svg, Attribut fill der Pfade * .st0 und .st1 sowie beider rect-Elemente. * Alles Übrige neutral abgeleitet. Kein Farbstich ohne Beleg aus der Marke. * * Kontrastwerte sind Verhältnisse nach WCAG 2.1 (1.4.3 Text 4,5:1, großer Text 3:1; * 1.4.11 Bedienelemente und Fokusring 3:1), gerechnet gegen jede Fläche, auf der die * Farbe vorkommt. * * Richtung: Reduziert und typografisch. Die Marke ist Rot auf Weiß mit viel Weißraum, * das Logo trägt die Seite, keine zweite Gestaltungsebene daneben. * Kernfarben: Markenrot (Akzent), Rot tief (Text und Fokus), Weiß, Papier, Tinte, Weichtext. * Schriftrollen: eine Familie, System-Grotesk. Kein Webfont, siehe docs/offene-punkte.md. * Layout: einspaltig, linksbündig, Inhalt max. 62rem, Sektionsrhythmus fluide. * Prinzipien: Kein Wert außerhalb dieser Datei. Rot ist Fläche und Signal, nicht Fließtext. */ :root { color-scheme: light; /* ---------------------------------------------------------------------- * 1 Farbskala * -------------------------------------------------------------------- */ /* Akzent: das Markenrot aus dem Logo */ --akzent-100: #fdeaef; /* Fläche hinter Hinweisen */ --akzent-500: #e30b3c; /* Markenrot, Beleg siehe Kopf. 4,80 auf Weiß, 4,40 auf Papier */ --akzent-700: #b00030; /* Rot tief für Text, Links, Fokus. 7,27 auf Weiß, 6,67 auf Papier */ /* Neutral */ --neutral-50: #ffffff; /* Grundfläche */ --neutral-100: #f5f5f5; /* Papier, getönte Wechselfläche */ --neutral-200: #dcdcdc; /* Linie, 1,37 auf Weiß, rein dekorativ */ --neutral-400: #767676; /* starke Linie und Rahmen: 4,54 auf Weiß, 4,17 auf Papier */ --neutral-600: #595959; /* weicher Text: 7,00 auf Weiß, 6,42 auf Papier */ --neutral-900: #000000; /* Tinte: 21,00 auf Weiß, 19,26 auf Papier */ /* ---------------------------------------------------------------------- * 2 Semantische Rollen * Komponenten greifen nur auf Rollen zu, nie auf Skalenwerte. * -------------------------------------------------------------------- */ --flaeche: var(--neutral-50); --flaeche-getoent: var(--neutral-100); --flaeche-dunkel: var(--neutral-900); --flaeche-akzent: var(--akzent-500); --text: var(--neutral-900); /* 21,00 auf Fläche, 19,26 auf Papier */ --text-weich: var(--neutral-600); /* 7,00 auf Fläche, 6,42 auf Papier */ --text-auf-dunkel: var(--neutral-50); /* 21,00 auf --flaeche-dunkel */ --text-auf-akzent: #ffffff; /* 4,80 auf --flaeche-akzent */ --text-link: var(--akzent-700); /* 7,27 auf Fläche, 6,67 auf Papier */ --akzent: var(--akzent-500); --akzent-tief: var(--akzent-700); --akzent-weich: var(--akzent-100); --linie: var(--neutral-200); --linie-stark: var(--neutral-400); /* Fokus: 7,27 auf --flaeche, 6,67 auf --flaeche-getoent. * Auf --flaeche-dunkel läge der Ring bei 2,89 und damit unter den geforderten 3:1. * Deshalb trägt dort --fokus-abstand: die 3 px Versatz zeigen die helle Grundfläche * darunter, gegen die der Ring 7,27 hält. Betrifft nur die Sprungmarke. * Wird später ein dunkler Block mit Bedienelementen gebaut, braucht er einen * eigenen hellen Fokuswert. */ --fokus: var(--akzent-700); /* ---------------------------------------------------------------------- * 3 Farbregeln * - --akzent-500 nie als Fließtext: 4,40 auf Papier liegt unter 4,5. Als Großschrift * ab 24px oder 18,66px fett ist es zulässig (3:1), für Flächen immer. * - Fließtext in Markenfarbe nutzt --akzent-700. * - Rot ist Marke und Signal zugleich. Diese Seite hat keine Fehlerzustände, * deshalb keine zweite Signalfarbe. * -------------------------------------------------------------------- */ /* ---------------------------------------------------------------------- * 4 Typografie * Eine Familie. Das Logo ist eine geometrische Grotesk, die Hausschrift liegt * nicht vor (docs/offene-punkte.md, Punkt 3). Bis dahin System-Grotesk: * kein externer Font-Server, keine Lizenzfrage, kein DSGVO-Risiko. * -------------------------------------------------------------------- */ --schrift-text: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --groesse-xs: 0.8125rem; --groesse-s: 0.9375rem; --groesse-m: 1.0625rem; --groesse-l: clamp(1.125rem, 1.04rem + 0.4vw, 1.375rem); --groesse-xl: clamp(1.5rem, 1.25rem + 1.1vw, 2.125rem); --groesse-2xl: clamp(1.75rem, 1.35rem + 1.9vw, 2.75rem); --zeile-eng: 1.18; --zeile-mittel: 1.5; --zeile-weit: 1.65; --laufweite-eng: -0.015em; --laufweite-weit: 0.08em; --gewicht-normal: 400; --gewicht-stark: 600; /* ---------------------------------------------------------------------- * 5 Raum und Maße, Vierpunktraster * -------------------------------------------------------------------- */ --raum-1: 0.25rem; --raum-2: 0.5rem; --raum-3: 0.75rem; --raum-4: 1rem; --raum-5: 1.5rem; --raum-6: 2rem; --raum-7: 2.75rem; --raum-8: 3.5rem; --raum-9: 4.5rem; --raum-sektion: clamp(3rem, 1.5rem + 6vw, 6rem); --rinne: clamp(1.25rem, 0.75rem + 2.5vw, 3rem); --rand: clamp(1.25rem, 0.5rem + 3vw, 3rem); --breite-inhalt: 62rem; --breite-text: 34rem; /* ---------------------------------------------------------------------- * 6 Form * Das Logo besteht aus rechtwinkligen Flächen. Keine Rundung, kein Schatten. * -------------------------------------------------------------------- */ --rundung: 0; --rahmen: 1px solid var(--linie); --rahmen-stark: 2px solid var(--text); /* ---------------------------------------------------------------------- * 7 Bewegung * Nur transform und opacity. Diese Seite hat keine Scroll-Effekte. * -------------------------------------------------------------------- */ --weich: cubic-bezier(0.22, 1, 0.36, 1); --dauer-kurz: 0.2s; /* ---------------------------------------------------------------------- * 8 Fokus, sichtbar auf jeder Fläche * -------------------------------------------------------------------- */ --fokus-rahmen: 3px solid var(--fokus); --fokus-abstand: 3px; } @media (prefers-reduced-motion: reduce) { :root { --dauer-kurz: 0.01ms; } }