/* ========================================================================== 01-TOKENS — Design-Tokens -------------------------------------------------------------------------- Einzige Quelle für Farbe, Typo, Abstände, Bewegung. Kundenspezifische Werte NICHT hier ändern, sondern in brand.css überschreiben. Gestaltungsprinzip: kantig, technisch, handwerklich. Keine Radien, keine weichen Schatten, keine Pastell-Gradienten. ========================================================================== */ :root { /* --- Farbe: Basis ------------------------------------------------------- Warmes Schwarz statt #000, warmes Weiß statt #FFF. Reines Schwarz/Weiß wirkt billig und flach am Bildschirm. */ --c-ink: #14110F; /* Text, Rahmen, Flächen */ --c-ink-soft: #3A3431; /* Sekundärtext */ --c-ink-mute: #6E6862; /* Meta, Labels */ --c-paper: #F6F2EB; /* Seitenhintergrund */ --c-paper-warm: #EDE7DC; /* abgesetzte Sektion */ --c-line: #14110F; /* Rahmenfarbe = Tinte, volle Härte */ --c-line-soft: #CFC7B9; /* dezente Trennlinie */ /* --- Farbe: Marke (pro Kunde überschreiben) --- */ --c-accent: #C63A17; /* Primärakzent — Zinnober */ --c-accent-ink: #FFFFFF; /* Text auf Akzentfläche */ --c-accent-deep: #93290F; /* Hover/Tiefe */ --c-accent-2: #1B4D8F; /* Sekundärakzent — Kobalt */ /* --- Farbe: Funktional --- */ --c-focus: #1B4D8F; --c-error: #A61B1B; --c-success: #1E6B3A; /* --- Typografie --------------------------------------------------------- Font-Stacks lokal/system. Webfonts erst final einbauen (siehe fonts/README). --f-display: eng, kräftig, für Headlines in Großbuchstaben. --f-text: ruhig, gut lesbar, für Fließtext. --f-label: für Labels, Navigation, Schaltflächen. */ --f-display: "Kunde Display", "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif; --f-text: "Kunde Text", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* --f-label: für Kleinschrift wie Navigation, Schaltflächen, Bildlegenden. BEWUSST dieselbe Familie wie der Fließtext. Frühere Fassungen setzten hier eine Monospace-Schrift ein, um einen "technischen" Ton zu erzeugen. Das war ein Fehler: Systemseitige Monospace-Schriften sehen auf jedem Betriebssystem anders aus, wirken billig und sind sofort als Vorlagenmerkmal erkennbar. Eine gut gesetzte Grotesk in Versalien mit weitem Tracking erreicht dieselbe Klarheit und sieht nach Gestaltung aus statt nach Terminalfenster. */ --f-label: var(--f-text); /* Nur für echte Codedarstellung. In Komponenten nicht verwenden. */ --f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace; /* Typo-Skala: fluid, aber mit klaren Sprüngen. Große Sprünge = klare Hierarchie = wirkt gestaltet, nicht generiert. */ /* Hero-Headline. Bewusst nicht größer: Ab etwa 7.5rem braucht eine vierzeilige Headline mehr Höhe, als der Hero hat — dann schiebt sie Fließtext, Schaltflächen und Faktenzeile aus dem Bild. Wer eine größere Wirkung will, kürzt den Text, statt den Grad zu erhöhen. */ --t-mega: clamp(2.75rem, 7.5vw, 7.5rem); --t-h1: clamp(2.5rem, 6.5vw, 5.25rem); --t-h2: clamp(1.9rem, 4.2vw, 3.5rem); --t-h3: clamp(1.35rem, 2.4vw, 1.95rem); --t-h4: clamp(1.1rem, 1.6vw, 1.3rem); --t-lead: clamp(1.1rem, 1.5vw, 1.375rem); --t-body: 1.0625rem; --t-small: 0.9375rem; --t-label: 0.75rem; /* Mono-Labels, uppercase */ --lh-tight: 0.94; /* Display-Headlines */ --lh-snug: 1.12; --lh-normal: 1.62; /* Fließtext — großzügig, das liest sich teuer */ --ls-mega: -0.045em; /* enges Tracking bei großen Graden */ --ls-tight: -0.025em; --ls-label: 0.16em; /* weites Tracking bei Mono-Labels */ /* --- Raum --------------------------------------------------------------- Basis 8px, aber mit bewusst großen Sektionsabständen. Zu enge Abstände sind das häufigste Merkmal billiger Seiten. */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4rem; --s-9: 6rem; --s-10: 8rem; --s-11: 12rem; --sektion-y: clamp(4.5rem, 9vw, 9rem); /* vertikaler Sektionsabstand */ --gutter: clamp(1.25rem, 4vw, 3.5rem); /* seitlicher Seitenrand */ --max-w: 82.5rem; /* 1320px — Inhaltsbreite */ --max-w-text: 38rem; /* Lesebreite, ca. 70 Zeichen */ /* --- Kanten & Rahmen ---------------------------------------------------- Leichte Rundung statt scharfer Ecke. 4px ist genug, um die Härte zu nehmen, und zu wenig, um weich oder verspielt zu wirken. Absolut scharfe Ecken lassen jede Fläche nach unfertigem Prototyp aussehen. */ --radius: 4px; --radius-sm: 3px; --radius-lg: 6px; --b-hair: 1px solid var(--c-line); --b-thin: 1.5px solid var(--c-line); --b-bold: 2px solid var(--c-line); --b-heavy: 3px solid var(--c-line); --b-soft: 1px solid var(--c-line-soft); /* Schatten: sehr zurückhaltend und NIE reines Schwarz. Ein schwarzer Versatzschatten wirkt wie ein Aufkleber. Diese hier geben Tiefe, ohne sich in den Vordergrund zu drängen. */ --sh-weich: 0 2px 6px rgba(20, 17, 15, 0.07), 0 8px 24px rgba(20, 17, 15, 0.06); --sh-karte: 0 1px 3px rgba(20, 17, 15, 0.06), 0 12px 32px rgba(20, 17, 15, 0.08); --sh-hoch: 0 4px 12px rgba(20, 17, 15, 0.10), 0 20px 48px rgba(20, 17, 15, 0.10); /* --- Bewegung ----------------------------------------------------------- Ein Easing-Set, konsequent verwendet. Uneinheitliche Easings sind ein sofort sichtbares Qualitätsleck. */ --e-out: cubic-bezier(0.16, 1, 0.30, 1); /* Standard: satt, entschieden */ --e-in: cubic-bezier(0.55, 0, 1, 0.45); --e-io: cubic-bezier(0.65, 0, 0.35, 1); --e-snap: cubic-bezier(0.34, 1.32, 0.42, 1); /* leichtes Überschwingen */ --d-fast: 180ms; --d-base: 320ms; --d-slow: 620ms; --d-reveal: 900ms; /* --- Ebenen --- */ --z-base: 1; --z-sticky: 50; --z-nav: 100; --z-overlay: 200; --z-modal: 300; } /* Raster-Linien-Textur als wiederverwendbarer Hintergrund. Erzeugt das technische Millimeterpapier-Gefühl. */ :root { --bg-raster: repeating-linear-gradient(0deg, var(--c-line-soft) 0 1px, transparent 1px 4.5rem), repeating-linear-gradient(90deg, var(--c-line-soft) 0 1px, transparent 1px 4.5rem); --bg-diagonal: repeating-linear-gradient(45deg, var(--c-ink) 0 1px, transparent 1px 7px); } /* Dunkle Sektionen: Tokens umkehren, damit Komponenten unverändert funktionieren. Kein Extra-CSS pro Komponente nötig. */ .ist-dunkel { --c-ink: #F6F2EB; --c-ink-soft: #C9C2B8; --c-ink-mute: #8E877E; --c-paper: #14110F; --c-paper-warm: #1E1A17; --c-line: #F6F2EB; --c-line-soft: #3A3431; color: var(--c-ink); background-color: var(--c-paper); }