/* ========================================================= FESTWOCH' WANG 2027 – Design Tokens Namen wie in Figma (Farbe + Stufe in %). ✅ = aus Figma bestätigt ~ = aus Screenshots geschätzt, mit Figma abgleichen ========================================================= */ /* Quelle: design/festwoch-ci/tokens/tokens.css, ergänzt um Mittelgrün und das Disco-Thema. Schriften werden lokal eingebunden (Server erlaubt nur eigene Schriften, DSGVO). Lizenzen (SIL OFL 1.1): /fonts/LIZENZEN.txt */ /* ---------- 1. Schriften (lokal, variable Fonts, lateinischer Zeichensatz) ---------- */ @font-face { font-family: "Unbounded"; src: url("/fonts/unbounded.woff2") format("woff2"); font-weight: 500 600; font-style: normal; font-display: swap; } @font-face { font-family: "Google Sans Flex"; src: url("/fonts/google-sans-flex.woff2") format("woff2"); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: "UnifrakturCook"; src: url("/fonts/unifrakturcook-bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; } :root { /* ---------- 2. Primitive Farben (Rohwerte, nicht direkt verwenden) ---------- */ /* Beige */ --beige-10: #FEFDF9; /* sehr helles Beige (Projekt-Ergänzung, z. B. Kopfzeile) */ --beige-20: #FBF7EB; /* ✅ Haupt-Beige, Hintergründe */ --beige-30: #EAE6D9; /* ~ abgesetzte Flächen, Sektionen */ --beige-30-warm: #ECE5D6; /* minimal wärmer, Kontakt-Bereich (Projekt-Ergänzung) */ --beige-40: #DCD5C0; /* ~ Linien, Rahmen, Strahlen */ --beige-70: #837555; /* ~ dunkleres Beige, große Auszeichnungen */ --beige-85: #545043; /* ✅ Schrift (Fließtext) */ --beige-90: #413D32; /* ✅ Schrift (Headlines neutral, starker Text) */ --gold: #B1A589; /* ✅ warme Gold-Akzente für Beige-Gestaltungselemente (nicht für Text) */ --white: #FFFFFF; /* Karten */ --grau-20: #D9D9D9; /* Platzhalter (Projekt-Ergänzung) */ /* Rot */ --rot-10: #F2D4D4; /* ~ zartes Rot, Flächen */ --rot-50: #C21E1D; /* ✅ Feuerwehr-Rot */ --rot-60: #9C201E; /* ~ Hover/aktiv */ --rot-80: #4C1110; /* ~ sehr dunkles Rot (Disco-Entwurf) */ --rot-90: #260808; /* ~ fast Schwarz-Rot (Disco-Entwurf) */ /* Grün */ --gruen-10: #E6F3D0; /* ✅ Schützen hell */ --gruen-50: #00311F; /* ✅ Schützen dunkel */ --gruen-55: #00492E; /* Hover zu Grün 50 */ --gruen-mittel: #0E682E; /* Zusatzton (Entscheidung 11/2026): Knöpfe, Akzente */ --gruen-hell: #1F7D3E; /* Hover für grüne Texte: heller, Kontrast auf Beige noch AA */ /* ---------- 3. Semantische Farben (DIESE verwenden) ---------- */ --color-bg: var(--beige-20); --color-surface: var(--white); --color-surface-muted: var(--beige-30); --color-header: var(--beige-10); /* Kopfzeile */ --color-kontakt: var(--beige-30-warm); --color-border: var(--beige-40); --color-border-soft: var(--beige-30); /* zarte Linien (Projekt-Ergänzung) */ --color-decor: var(--gold); --color-placeholder: var(--grau-20); /* Bild-Platzhalter */ --color-text: var(--beige-85); /* Fließtext */ --color-text-strong: var(--beige-90); /* Headlines neutral */ --color-text-muted: var(--beige-70); /* nur ab 24px oder fett ab 19px */ /* Akzent = aktuelles Thema. Standard ist Feuerwehr-Rot (Hauptmarke). */ --color-accent: var(--rot-50); --color-accent-hover: var(--rot-60); --color-accent-soft: var(--beige-30); --color-on-accent: var(--beige-20); --color-accent-strong: var(--rot-60); /* dunkle Themenfläche (Projekt-Ergänzung) */ /* ---------- 4. Typografie ---------- */ --font-display: "Unbounded", system-ui, sans-serif; /* Headlines, Auszeichnungen */ --font-fraktur: "UnifrakturCook", "UnifrakturMaguntia", serif; /* bayerischer Akzent, kräftig, dezent eingesetzt */ --font-body: "Google Sans Flex", "Google Sans", system-ui, sans-serif; /* Fließtext */ --fs-xs: 0.8125rem; /* 13px */ --fs-sm: 0.9375rem; /* 15px */ --fs-base: 1.0625rem; /* 17px */ --fs-lg: 1.25rem; /* 20px */ --fs-xl: 1.5rem; /* 24px */ --fs-2xl: clamp(1.75rem, 1.2rem + 2vw, 2.5rem); --fs-3xl: clamp(2.25rem, 1.4rem + 3.5vw, 4rem); --fs-hero: clamp(2.75rem, 1.5rem + 5.5vw, 6rem); --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* Unbounded bewusst nicht zu fett */ --fw-display: var(--fw-semibold); /* Hero */ --fw-heading: var(--fw-semibold); /* H1–H3, Event-Titel */ --fw-label: var(--fw-medium); /* Buttons, Wimpel, Datum-Meta */ --fw-fraktur: var(--fw-bold); /* UnifrakturCook gibt es nur in Bold */ --lh-tight: 1.05; --lh-snug: 1.25; --lh-body: 1.6; --ls-display: 0.01em; --ls-caps: 0.04em; /* ---------- 5. Abstände (4er-Raster) ---------- */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; /* ---------- 6. Form ---------- */ --radius-none: 0; --radius-sm: 2px; --radius-full: 999px; --border-width: 1px; --border-strong: 2px; --shadow-card: 0 1px 2px rgb(65 61 50 / 0.06), 0 6px 18px rgb(65 61 50 / 0.08); --shadow-lift: 0 2px 4px rgb(65 61 50 / 0.08), 0 12px 28px rgb(65 61 50 / 0.12); /* ---------- 7. Wimpel / Fahne (dezente Kerbe wie beim "E" in Unbounded) ---------- */ --notch-depth: 0.3em; /* Tiefe der seitlichen Einkerbung */ --pennant-tip: 0.5rem; /* Kerbe unten beim hängenden Datums-Wimpel */ /* ---------- 7b. Berg-Trenner (gezackte Hügel-Landschaft) ---------- */ --mtn-height: clamp(48px, 8vw, 120px); --mtn-back: var(--beige-40); /* hintere Kette: IMMER neutrales Beige als Übergang */ --mtn-front: var(--white); /* vordere Kette = Farbe des nächsten Abschnitts */ /* ---------- 8. Layout ---------- */ --container-max: 72rem; --container-pad: clamp(1rem, 4vw, 2rem); --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; /* ---------- 9. Bewegung ---------- */ --ease: cubic-bezier(0.2, 0.7, 0.2, 1); --dur-fast: 150ms; --dur-base: 250ms; } /* ---------- Themen: Feuerwehr / Schützen / Neutral ---------- Auf einen Bereich setzen, z. B.
. */ [data-theme="feuerwehr"] { --mtn-back: var(--beige-40); --mtn-front: var(--rot-50); --color-accent: var(--rot-50); --color-accent-hover: var(--rot-60); --color-accent-soft: var(--beige-30); --color-on-accent: var(--beige-20); } [data-theme="schuetzen"] { --mtn-back: var(--beige-40); --mtn-front: var(--gruen-50); /* Projekt-Entscheidung: Mittelgrün für Knöpfe/Akzente, Grün 50 für Flächen */ --color-accent: var(--gruen-mittel); --color-accent-hover: var(--gruen-50); --color-accent-soft: var(--gruen-10); --color-on-accent: var(--gruen-10); --color-accent-strong: var(--gruen-50); /* dunkelgrüne Fläche, z. B. Instagram-Bereich */ /* Links im Schützen-Bereich: grün, beim Hover helleres Grün – nie Rot */ --color-link: var(--gruen-mittel); --color-link-hover: var(--gruen-hell); } [data-theme="neutral"] { --mtn-back: var(--beige-40); --mtn-front: var(--white); --color-accent: var(--beige-90); --color-accent-hover: var(--beige-85); --color-accent-soft: var(--beige-30); --color-on-accent: var(--beige-20); } /* Gold-Variante für warme Beige-Gestaltungselemente (Wimpel, Datum, Deko) */ [data-theme="gold"] { --mtn-back: var(--beige-40); --mtn-front: var(--beige-20); --color-accent: var(--gold); --color-accent-hover: var(--beige-70); --color-accent-soft: var(--beige-30); --color-on-accent: var(--beige-20); } /* Disco Party (Mi 26.05.): sehr dunkles Rot laut Entwurf */ [data-theme="disco"] { --mtn-back: var(--beige-40); --mtn-front: var(--rot-80); --color-accent: var(--rot-80); --color-accent-hover: var(--rot-90); --color-accent-soft: var(--rot-10); --color-on-accent: var(--beige-20); } @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur-base: 0ms; } }