/* * ============================================================ * LOEWENLAGER — DESIGN TOKENS v1.1 * ============================================================ * Das Fundament. Wird von ALLEN Projekten importiert. * Änderung hier = Änderung überall. * * Nutzung in Claude Code: * @import url('./loewenlager-tokens.css'); * oder: * * Marke: LOEWENLAGER · ALETHEIA Framework * Modus: Hell als Primär · Dunkel für Dramatik * ============================================================ * * Google Fonts einbinden (in HTML oder @import): * @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,600;1,300;1,400&family=Inter:wght@300;400;600&display=swap'); */ :root { /* -------------------------------------------------- * 1 · FARBEN — HINTERGRUND & FLÄCHEN * -------------------------------------------------- * Pergament ist die Basis. Nicht Weiß — Pergament. * Der Unterschied: Wärme statt Kälte, Würde statt Sterilität. */ --color-bg-primary: #F5F0E8; /* Pergament · Haupt-Hintergrund */ --color-bg-secondary: #EDE8DF; /* Pergament 2 · Karten, erhöhte Flächen */ --color-bg-tertiary: #E4DDD2; /* Pergament 3 · vertieft, Tabellen */ --color-bg-dark: #0a0a0a; /* Tiefschwarz · Hero, Video, Dramatik */ --color-bg-dark-mid: #1a1a1a; /* Anthrazit · Dark-Mode Standard */ --color-bg-dark-mineral: #0d0d14; /* Blauschwarz · mineralischer Akzent */ /* -------------------------------------------------- * 2 · FARBEN — TEXT * -------------------------------------------------- * Text auf Hell: dunkel. Text auf Dunkel: Pergament. * Niemals reines Schwarz auf Pergament — zu hart. */ --color-text-primary: #0a0a0a; /* Primärtext auf hellem Grund */ --color-text-secondary: #3d3a32; /* Sekundärtext, Fließtext */ --color-text-muted: #7a7468; /* Captions, Labels, Metainfo */ --color-text-on-dark: #F5F0E8; /* Text auf dunklem Grund */ --color-text-on-dark-muted: #9a9080; /* Gedämpft auf Dunkel */ /* -------------------------------------------------- * 3 · GOLD-SYSTEM * -------------------------------------------------- * Gold füllt nicht — Gold leuchtet. * Dünne Linien, Highlights, Labels. Niemals Fläche. */ --color-gold-primary: #C9A84C; /* Gold · Hauptakzent, Linien, Icons */ --color-gold-light: #E4C06E; /* Gold hell · Hover, aktive Zustände */ --color-gold-warm: #F0C040; /* Gold warm · maximale Helligkeit */ --color-gold-deep: #8B6914; /* Gold tief · Schatten, Tiefe */ /* -------------------------------------------------- * 4 · SEMANTISCHE FARBEN * -------------------------------------------------- * Jede Farbe trägt Bedeutung. Niemals dekorativ verwenden. */ /* Lebensrot — Leben, Aufbau, Löwe-Pol, positiv */ --color-red-life: #C8102E; --color-red-life-subtle: rgba(200, 16, 46, 0.08); /* Rubinrot — edel, Materialakzent, Tier 2 */ --color-red-ruby: #9B1B30; /* Giftgrün — Lüge, selten!, nur bei expliziter Bedeutung */ --color-green-toxic: #7FFF00; /* WARNUNG: nur mit Absicht einsetzen */ /* Smaragd — Mineral, Tiefe, Tier 2 */ --color-green-emerald: #1A6B3C; /* Charakter-Kompass-Farben */ --color-pole-loewe: #C8102E; /* Löwe · schöpferisch · rot */ --color-pole-schaf: #F5F0E8; /* Schaf · neutral · pergament */ --color-pole-clown: #0a0a0a; /* Clown · zerstörerisch · schwarz */ --color-clown-nase: #C8102E; /* Clowns-Nase · einziges Farbelement */ /* -------------------------------------------------- * 5 · TYPOGRAFIE * -------------------------------------------------- * Zwei Schriftfamilien — ein bewusstes Paar: * * --font-display: Cormorant Garamond (Serif) * → Headlines, Hero, Display, Nordung-Texte * → Gewicht: 300 (Light) und 400 (Regular) * → Kursiv für emotionale Akzente (em, Zitate) * → Erzeugt Würde, Tiefe, historische Qualität * * --font-body: Inter (Sans-serif) * → Fließtext, Labels, Navigation, Buttons * → Gewicht: 300, 400, 600 * → Maximale Lesbarkeit, technische Präzision * * Regel: Display für Bedeutung — Body für Lesbarkeit. * Niemals beide auf gleicher Hierarchieebene mischen. */ --font-display: 'Cormorant Garamond', Georgia, serif; --font-body: 'Inter', 'Helvetica Neue', system-ui, sans-serif; /* Rückwärtskompatibel: --font-family zeigt auf Body */ --font-family: var(--font-body); /* Schriftgrößen — modular, konsequent */ --font-size-display: clamp(3rem, 6vw, 5rem); /* LOEWENLAGER · Display */ --font-size-h1: clamp(2rem, 4vw, 3rem); /* Seitenüberschrift */ --font-size-h2: clamp(1.5rem, 3vw, 2rem); /* Sektionsüberschrift */ --font-size-h3: clamp(1.25rem, 2vw, 1.5rem);/* Unterüberschrift */ --font-size-subhead: 1.125rem; /* Subhead, Intro */ --font-size-body: 1rem; /* Fließtext */ --font-size-small: 0.875rem; /* Captions, Labels */ --font-size-label: 0.75rem; /* Kapitel-Labels, Tags */ /* Schriftgewichte */ --font-weight-light: 300; /* Display, Headlines */ --font-weight-regular: 400; /* Body, Subhead */ --font-weight-bold: 700; /* Labels, Caps */ /* Letter-Spacing */ --letter-spacing-display: 0.02em; /* Headlines in Cormorant — wenig Spacing nötig */ --letter-spacing-headline: 0.04em; /* Headlines */ --letter-spacing-label: 0.08em; /* Caps-Labels */ --letter-spacing-body: 0; /* Fließtext — kein Spacing */ /* Zeilenhöhen */ --line-height-tight: 1.2; /* Headlines */ --line-height-body: 1.7; /* Fließtext — großzügig */ --line-height-label: 1.4; /* Labels */ /* -------------------------------------------------- * 6 · ABSTÄNDE — SPACING SYSTEM * -------------------------------------------------- * Basis: 8px. Alle Abstände sind Vielfache davon. * Leerraum ist Material. Enge ist Schwäche. */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.5rem; /* 24px */ --space-6: 2rem; /* 32px */ --space-7: 3rem; /* 48px */ --space-8: 4rem; /* 64px */ --space-9: 6rem; /* 96px */ --space-10: 8rem; /* 128px */ /* Semantische Spacing-Aliases */ --space-section: var(--space-10); /* Zwischen Sektionen */ --space-component: var(--space-7); /* Zwischen Komponenten */ --space-element: var(--space-5); /* Zwischen Elementen */ --space-inline: var(--space-4); /* Innerhalb von Elementen */ /* -------------------------------------------------- * 7 · FORMEN & RAHMEN * -------------------------------------------------- * Gerundetes Rechteck ist die Systemform. * Radius 8–16px. Modern ohne kalt zu sein. */ --radius-sm: 8px; /* Buttons, Tags, kleine Elemente */ --radius-md: 12px; /* Karten, Inputs */ --radius-lg: 16px; /* Große Container, Panels */ --radius-xl: 24px; /* Hero-Bereiche */ --radius-pill: 9999px; /* Badges, Pills */ /* Rahmenlinien */ --border-width-thin: 1px; --border-width-medium: 1.5px; --border-color-default: rgba(201, 168, 76, 0.25); /* Gold, gedämpft */ --border-color-strong: rgba(201, 168, 76, 0.6); /* Gold, sichtbar */ --border-color-subtle: rgba(10, 10, 10, 0.08); /* Neutral */ /* -------------------------------------------------- * 8 · ICON-STIL * -------------------------------------------------- * Gravur-Ästhetik: dünn, präzise, geometrisch. * Als wäre es in Metall geritzt. */ --icon-stroke-width: 1.5px; /* Standard */ --icon-stroke-thin: 1px; /* Subtil */ --icon-color: currentColor; --icon-size-sm: 16px; --icon-size-md: 20px; --icon-size-lg: 24px; /* -------------------------------------------------- * 9 · SCHATTEN & TIEFE * -------------------------------------------------- * Schichtung erzeugt Tiefe ohne 3D-Software. * Kein Box-Shadow-Exzess — Würde durch Zurückhaltung. */ --shadow-subtle: 0 1px 3px rgba(10, 10, 10, 0.06); --shadow-card: 0 2px 12px rgba(10, 10, 10, 0.08); --shadow-elevated: 0 8px 32px rgba(10, 10, 10, 0.12); --shadow-gold-glow: 0 0 20px rgba(201, 168, 76, 0.15); /* Gold-Glühen */ /* -------------------------------------------------- * 10 · TRANSITIONS * -------------------------------------------------- */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 400ms ease; /* -------------------------------------------------- * 11 · LAYOUT * -------------------------------------------------- */ --max-width-content: 720px; /* Fließtext, eBook-Breite */ --max-width-site: 1200px; /* Website max */ --max-width-wide: 1440px; /* Für Hintergründe, volle Breite */ /* -------------------------------------------------- * 12 · MODUS-VARIABLEN (Hell — Standard) * -------------------------------------------------- * Diese Variablen wechseln im Dark-Modus. * Immer diese verwenden, nie direkte Hex-Werte im Layout. */ --bg: var(--color-bg-primary); --bg-raised: var(--color-bg-secondary); --bg-sunken: var(--color-bg-tertiary); --text: var(--color-text-primary); --text-secondary: var(--color-text-secondary); --text-muted: var(--color-text-muted); --border: var(--border-color-default); --gold: var(--color-gold-primary); } /* -------------------------------------------------- * DARK MODE — Dramatik-Modus * -------------------------------------------------- * Wird aktiviert durch: class="dark" auf oder * ODER durch prefers-color-scheme wenn gewünscht. * * Einsatz: Hero-Sections, Video-Hintergrunde, Plakate, * Social Media, CTA-Momente. */ .dark, [data-mode="dark"] { --bg: var(--color-bg-dark); --bg-raised: var(--color-bg-dark-mid); --bg-sunken: #111111; --text: var(--color-text-on-dark); --text-secondary: #c0b89a; --text-muted: var(--color-text-on-dark-muted); --border: rgba(201, 168, 76, 0.2); } /* -------------------------------------------------- * BASIS-RESET & TYPOGRAFIE * -------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { font-family: var(--font-family); font-size: var(--font-size-body); font-weight: var(--font-weight-regular); line-height: var(--line-height-body); color: var(--text); background: var(--bg); letter-spacing: var(--letter-spacing-body); } /* -------------------------------------------------- * TYPOGRAFIE-KLASSEN * -------------------------------------------------- * Diese Klassen direkt im HTML verwenden. */ .lw-display { font-family: var(--font-display); font-size: var(--font-size-display); font-weight: var(--font-weight-light); letter-spacing: var(--letter-spacing-display); line-height: var(--line-height-tight); /* Kein uppercase — Cormorant wirkt in Groß/Kleinschreibung edler */ } .lw-h1 { font-family: var(--font-display); font-size: var(--font-size-h1); font-weight: var(--font-weight-light); letter-spacing: var(--letter-spacing-headline); line-height: var(--line-height-tight); } .lw-h2 { font-family: var(--font-display); font-size: var(--font-size-h2); font-weight: var(--font-weight-light); letter-spacing: var(--letter-spacing-headline); line-height: var(--line-height-tight); } .lw-h3 { font-family: var(--font-display); font-size: var(--font-size-h3); font-weight: var(--font-weight-regular); letter-spacing: 0.02em; line-height: var(--line-height-tight); } .lw-subhead { font-size: var(--font-size-subhead); font-weight: var(--font-weight-regular); line-height: var(--line-height-body); } .lw-body { font-size: var(--font-size-body); font-weight: var(--font-weight-light); line-height: var(--line-height-body); } .lw-label { font-size: var(--font-size-label); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-label); text-transform: uppercase; color: var(--gold); } .lw-small { font-size: var(--font-size-small); color: var(--text-muted); } /* -------------------------------------------------- * LAYOUT-UTILITIES * -------------------------------------------------- */ .lw-container { width: 100%; max-width: var(--max-width-site); margin-inline: auto; padding-inline: var(--space-5); } .lw-container--narrow { max-width: var(--max-width-content); } .lw-section { padding-block: var(--space-section); } /* -------------------------------------------------- * KARTEN * -------------------------------------------------- */ .lw-card { background: var(--bg-raised); border: var(--border-width-thin) solid var(--border); border-radius: var(--radius-md); padding: var(--space-6); box-shadow: var(--shadow-card); } .lw-card--bordered { border-color: var(--border-color-strong); } /* -------------------------------------------------- * GOLD-AKZENT-ELEMENTE * -------------------------------------------------- */ .lw-gold-line { width: 100%; height: 1px; background: linear-gradient( to right, transparent, var(--gold), transparent ); opacity: 0.5; } .lw-gold-text { color: var(--gold); } /* -------------------------------------------------- * BUTTONS * -------------------------------------------------- */ .lw-btn { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-radius: var(--radius-sm); font-family: var(--font-body); font-size: var(--font-size-small); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-label); text-transform: uppercase; cursor: pointer; transition: all var(--transition-base); border: none; text-decoration: none; } .lw-btn--primary { background: var(--color-red-life); color: #ffffff; } .lw-btn--primary:hover { background: var(--color-red-ruby); } .lw-btn--gold { background: transparent; color: var(--gold); border: var(--border-width-thin) solid var(--gold); } .lw-btn--gold:hover { background: rgba(201, 168, 76, 0.1); } /* -------------------------------------------------- * VERBOTEN — Niemals verwenden * -------------------------------------------------- * Diese Klassen existieren als Dokumentation. * Ihr Einsatz ist ein Fehler. * * ✕ Pastell, Erdtöne, Salbeigrün, Rosé * ✕ Organisch-runde Blob-Formen * ✕ Serifenschriften außer Cormorant Garamond (als --font-display) * ✕ Mehr als zwei Akzentfarben pro Anwendung * ✕ Stockfotos, Wellness-Bilder, Esoterik-Symbole * ✕ Giftgrün ohne explizite Bedeutung (Lüge) */