/* ========================================================================== Design Tokens — apr training (Look 2.0) Farben, Fonts, Abstände als CSS-Variablen. Keine Komponenten-Styles hier. Look 2.0 in einem Satz: dunkler Grund, darüber eine fixe Aurora aus Teal-Lichtbahnen, darauf Milchglas-Boxen mit hauchdünnem Rand. Akzente entstehen über Türkis-Tönung und Glow an Icons — nicht über gefüllte Flächen. Alles, was diesen Look ausmacht, steht hier als Token, damit keine Seite eigene Farben, Radien oder Schatten erfindet. ========================================================================== */ :root { /* Farben — Hintergrund */ --color-bg-950: #0a0d0d; --color-bg-900: #121717; --color-bg-800: #181f1e; /* Seitenhintergrund: Kuppel über dem Hero, Glow am Fuß, darunter der Grund. Gehört auf — nicht auf einen Wrapper, sonst deckt er die Aurora zu. */ --bg-seite: radial-gradient(780px 480px at 50% -100px, rgba(32, 173, 172, 0.22), transparent 65%), radial-gradient(820px 440px at 50% 104%, rgba(32, 173, 172, 0.16), transparent 66%), var(--color-bg-950); /* Farben — Marke / Akzent. Türkis ist die einzige Akzentfarbe. */ --color-teal-400: #5ecfce; --color-teal-500: #20adac; --color-teal-600: #178584; --color-teal-glow: rgba(32, 173, 172, 0.2); /* Milchglas-Linse B — die eine Oberfläche für alle Boxen. Kein Verlauf im klassischen Sinn, sondern ein Lichtabfall von oben: heller Anriss oben, kühler Fall nach unten, halbtransparenter Grund. Dazu gehören immer --glass-line als Rand und --glass-shadow als Kante. */ --glass-bg: radial-gradient(140% 80% at 50% -15%, rgba(255, 255, 255, 0.09), transparent 55%), linear-gradient(165deg, rgba(255, 255, 255, 0.05), transparent 38%, rgba(0, 0, 0, 0.16)), rgba(15, 20, 20, 0.5); --glass-line: rgba(255, 255, 255, 0.07); --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09), inset 0 -1px 0 rgba(0, 0, 0, 0.3), 0 20px 44px rgba(0, 0, 0, 0.35); /* Blur kostet auf Mobilgeräten spürbar Leistung — dort die halbe Stärke. */ --glass-blur: blur(26px) saturate(1.2); --glass-blur-mobil: blur(12px); /* Farben — Oberflächen ohne Milchglas (Eingabefelder, kleine Kästen) */ --color-surface: rgba(15, 20, 20, 0.5); --color-surface-strong: rgba(10, 14, 14, 0.72); --color-surface-feld: rgba(10, 13, 13, 0.7); /* Der Grund der Karten-CTAs: --color-bg-800 halbdurchsichtig. Ein Button am Kartenfuß steht auf Milchglas und braucht eine eigene, ruhige Fläche — er soll die Karte abschließen, nicht mit dem Ghost-Teal der echten Handlungen konkurrieren. */ --color-surface-karte: rgba(24, 31, 30, 0.6); /* Türkis-Tönungen — Ghost-Buttons, Tags, Pills. tint ist der Ruhezustand, tint-stark der Hover. */ --color-surface-tint: rgba(32, 173, 172, 0.1); --color-surface-tint-stark: rgba(32, 173, 172, 0.2); --color-surface-tint-weich: rgba(32, 173, 172, 0.12); /* Farben — Text */ --color-white: #ffffff; --color-text: #ffffff; --color-text-85: rgba(255, 255, 255, 0.85); --color-text-65: rgba(255, 255, 255, 0.62); --color-text-55: rgba(255, 255, 255, 0.5); --color-text-45: rgba(255, 255, 255, 0.35); /* Farben — Rahmen */ --color-border: rgba(255, 255, 255, 0.14); --color-border-soft: rgba(255, 255, 255, 0.08); --color-border-teal: rgba(32, 173, 172, 0.3); --color-border-teal-strong: rgba(32, 173, 172, 0.4); --color-border-teal-solid: var(--color-teal-500); /* Der Rand der Ghost-Buttons und der Header-Pille. */ --color-linie-teal: rgba(32, 173, 172, 0.5); --color-linie-header: rgba(94, 207, 206, 0.22); /* Glow — sparsam dosiert. Icons leuchten (Neon-Doppelschatten), Zahlen bekommen einen Hauch, Titel gar nichts. Boxen leuchten nie, Buttons nur im Hover. */ --glow-icon: drop-shadow(0 0 5px rgba(32, 173, 172, 0.75)) drop-shadow(0 0 14px rgba(32, 173, 172, 0.35)); --glow-taste: 0 0 22px rgba(32, 173, 172, 0.3); --glow-zahl: 0 0 16px rgba(94, 207, 206, 0.28); --glow-zahl-klein: 0 0 12px rgba(94, 207, 206, 0.25); --glow-feld: 0 0 12px rgba(32, 173, 172, 0.25); /* Schatten ohne Farbe */ --shadow-weich: 0 14px 34px rgba(0, 0, 0, 0.35); --shadow-header: 0 10px 30px rgba(0, 0, 0, 0.35), 0 16px 44px -18px rgba(32, 173, 172, 0.5); /* Masken für Seiten-Heros: Bild blendet oben ein und unten aus, damit weder zum Header noch zur Aurora eine harte Kante steht. */ --maske-hero: linear-gradient(180deg, transparent 0%, #000 16%, #000 55%, transparent 96%); /* Foto- und Video-Heros werden vor dem Veil gedimmt. Die Bilder sind unterschiedlich hell; der Veil allein traegt den Text nicht auf jedem. Gedimmt wird das Bild, nicht der Veil — so bleibt dessen weiche Form mit den transparenten Enden erhalten. */ --dimmer-hero: brightness(0.7) saturate(0.95); /* Das Hero-Video der Startseite liegt ungedimmt unter dem Veil — der Entwurf traegt den Text allein ueber diese Stufen. Gleicher Aufbau wie --veil-hero: an beiden Enden transparent, in der Mitte dichter. */ --veil-hero-video: linear-gradient(180deg, transparent 0%, rgba(10, 14, 14, 0.5) 16%, rgba(10, 14, 14, 0.35) 45%, rgba(10, 14, 14, 0.3) 70%, transparent 100%); --veil-hero: linear-gradient(180deg, transparent 0%, rgba(10, 14, 14, 0.55) 16%, rgba(10, 14, 14, 0.35) 45%, rgba(10, 14, 14, 0.3) 70%, transparent 100%); /* Fonts */ --font-sans: 'Archivo', system-ui, sans-serif; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; /* Schriftgrößen — mobile-first Basiswerte, wachsen per Media Query in components.css */ --fs-xs: 0.7rem; /* 11.2px Meta/Labels */ --fs-sm: 0.78rem; /* 12.5px Kleine Labels */ --fs-base: 0.9rem; /* 14.4px Fließtext */ --fs-md: 1rem; /* 16px Fließtext groß */ --fs-lg: 1.2rem; /* 19.2px Zitat/Hervorhebung */ --fs-xl: 1.4rem; /* 22.4px Kartentitel */ --fs-2xl: 1.8rem; /* 28.8px Sektionstitel mobil */ --fs-3xl: 2.4rem; /* 38.4px Sektionstitel desktop */ --fs-4xl: 3rem; /* 48px Hero mobil */ --fs-5xl: 5.25rem; /* 84px Hero desktop */ /* Abstände — 4px-Skala */ --space-1: 0.25rem; /* 4px */ --space-2: 0.5rem; /* 8px */ --space-3: 0.75rem; /* 12px */ --space-4: 1rem; /* 16px */ --space-5: 1.25rem; /* 20px */ --space-6: 1.5rem; /* 24px */ --space-7: 1.75rem; /* 28px */ --space-8: 2rem; /* 32px */ --space-9: 2.5rem; /* 40px */ --space-10: 3.5rem; /* 56px */ --space-11: 4rem; /* 64px */ --space-12: 5.25rem; /* 84px */ /* Radien — Look 2.0 rundet deutlich stärker als der alte Stil. sm trägt Buttons und Eingabefelder, lg die Karten. */ --radius-sm: 11px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 20px; --radius-pill: 999px; /* Breakpoints (nur als Referenz, Media Queries können keine Variablen nutzen) */ --bp-sm: 560px; --bp-md: 780px; --bp-lg: 1080px; }