/* KI AffAIrs – Tokens als CSS-Variablen. Erzeugt aus tokens.json (Version 7). Standard ist das Theme "dark". */
:root, [data-theme="dark"] {
  --ground: #1A1A1A;
  --ground-deep: #0A0F14;
  --midnight: #0E1B2C;
  --surface: #212121;
  --surface-raised: #2A2A2A;
  --line: #333333;
  --line-strong: #6B6B6B;
  --ink: #F0F0F0;
  --ink-muted: #A6A6A6;
  --white: #FFFFFF;
  --orange: #F47700;
  --orange-glow: #FF9433;
  --text-orange: #F47700;
  --on-orange: #1A1A1A;
  --cyan: #00939D;
  --cyan-glow: #4BBCC6;
  --text-cyan: #4BBCC6;
  --on-cyan: #1A1A1A;
  --orange-tint: #342517;
  --cyan-tint: #153032;
  --neon-purple: #B14DFF;
  --warm-white: #F5E9D0;
  --focus: var(--cyan-glow);
  --glow-orange: 0 0 30px rgba(244, 119, 0, 0.25);
  --glow-cyan: 0 0 30px rgba(75, 188, 198, 0.22);
}
[data-theme="light"] {
  --ground: #FAF7F2;
  --ground-deep: #F0EBE3;
  --midnight: #E6EDF3;
  --surface: #FFFFFF;
  --surface-raised: #F3EEE7;
  --line: #E3DBD0;
  --line-strong: #8C8175;
  --ink: #1A1A1A;
  --ink-muted: #5C5C5C;
  --white: #FFFFFF;
  --orange: #F47700;
  --orange-glow: #FF9433;
  --text-orange: #A04E00;
  --on-orange: #1A1A1A;
  --cyan: #00939D;
  --cyan-glow: #4BBCC6;
  --text-cyan: #006F77;
  --on-cyan: #1A1A1A;
  --orange-tint: #FDECDB;
  --cyan-tint: #E0F2F3;
  --neon-purple: #B14DFF;
  --warm-white: #F5E9D0;
  --focus: var(--text-cyan);
  --glow-orange: 0 0 30px rgba(244, 119, 0, 0.25);
  --glow-cyan: 0 0 30px rgba(75, 188, 198, 0.22);
}
:root {
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --space-24: 96px;
  --canvas-safe: 80px;
  --story-safe: 250px;
  --reel-safe-top: 270px;
  --reel-safe-bottom: 680px;
  --ig-grid-crop: 34px;
  --radius-sm: 4px;
  --radius-md: 12px;
  --radius-lg: 24px;
  --radius-pill: 9999px;
  --li-square: 1200px 1200px;
  --li-portrait: 1080px 1350px;
  --li-banner-personal: 1584px 396px;
  --li-banner-company: 1128px 191px;
  --x-post: 1600px 900px;
  --x-portrait: 1080px 1350px;
  --x-header: 1500px 500px;
  --ig-portrait: 1080px 1350px;
  --ig-carousel: 1080px 1350px;
  --ig-grid: 1013px 1350px;
  --ig-story: 1080px 1920px;
  --podcast-cover: 3000px 3000px;
  --yt-thumb: 1280px 720px;
  --blog-hero: 1600px 900px;
  --og-image: 1200px 630px;
  --video-short: 1080px 1920px;
  --video-feed: 1080px 1350px;
  --gif-loop: 1080px 810px;
  --duration-sofort: 120ms;
  --duration-schnell: 240ms;
  --duration-normal: 400ms;
  --duration-schub: 500ms;
  --duration-ruhig: 640ms;
  --duration-takt: 80ms;
  --duration-schlag: 480ms;
  --duration-fenster: 7680ms;
  --ease-rein: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-raus: cubic-bezier(0.32, 0, 0.67, 0);
  --ease-weiter: cubic-bezier(0.76, 0, 0.24, 1);
  --ease-zeichnen: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-gleich: linear;
  --font-display: Sora, "Arial Black", system-ui, sans-serif;
  --font-sans: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-mono: Consolas, "Courier New", ui-monospace, monospace;
}

/* Schriftstile als Klassen */
.display-mega { font-family: var(--font-display); font-size: 96px; line-height: 0.95; font-weight: 700; letter-spacing: -0.02em; }
.h1 { font-family: var(--font-display); font-size: 48px; line-height: 1.05; font-weight: 700; letter-spacing: -0.01em; }
.h2 { font-family: var(--font-display); font-size: 32px; line-height: 1.15; font-weight: 700; }
.h3 { font-family: var(--font-display); font-size: 22px; line-height: 1.25; font-weight: 600; }
.eyebrow { font-family: var(--font-display); font-size: 12px; line-height: 1.4; font-weight: 600; letter-spacing: 0.15em; }
.body-lg { font-family: var(--font-sans); font-size: 18px; line-height: 1.6; font-weight: 400; }
.body { font-family: var(--font-sans); font-size: 16px; line-height: 1.6; font-weight: 400; }
.small { font-family: var(--font-sans); font-size: 13px; line-height: 1.5; font-weight: 400; }
.stat { font-family: var(--font-display); font-size: 40px; line-height: 1; font-weight: 700; }
.mono-badge { font-family: var(--font-mono); font-size: 11px; line-height: 1.4; font-weight: 600; letter-spacing: 0.08em; }
.slide-hook { font-family: var(--font-display); font-size: 88px; line-height: 1.0; font-weight: 700; letter-spacing: -0.02em; }
.slide-headline { font-family: var(--font-display); font-size: 64px; line-height: 1.05; font-weight: 700; }
.slide-body { font-family: var(--font-sans); font-size: 42px; line-height: 1.3; font-weight: 400; }
.slide-meta { font-family: var(--font-mono); font-size: 34px; line-height: 1.3; font-weight: 600; letter-spacing: 0.06em; }