/* ═══════════════════════════════════════════════════════════
   AIM WebEngine — Design System v2
   Tokens, Typography, Reset, Fonts, Themes
   ═══════════════════════════════════════════════════════════ */

@layer reset, tokens, base, components, animations, utilities;

/* ── Font Faces (Self-hosted, DSGVO-konform) ─────────── */

@font-face {
  font-family: 'Open Sans';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('../fonts/open-sans/open-sans-variable.woff2') format('woff2');
}

@font-face {
  font-family: 'Playfair Display';
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url('../fonts/playfair-display/playfair-display-variable.woff2') format('woff2');
}

/* ── CSS Reset ───────────────────────────────────────── */

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
  }

  html {
    -webkit-text-size-adjust: 100%;
    -moz-text-size-adjust: 100%;
    text-size-adjust: 100%;
    /* scroll-behavior: smooth — entfernt, Lenis übernimmt Smooth Scrolling */
  }

  body {
    min-height: 100dvh;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }

  img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
    height: auto;
  }

  input, button, textarea, select {
    font: inherit;
  }

  p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
  }

  a {
    color: inherit;
    text-decoration: none;
  }

  ul, ol {
    list-style: none;
  }
}

/* ── Design Tokens ───────────────────────────────────── */

@layer tokens {
:root {
  /* Spacing (8pt Grid) */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 2.5rem;
  --space-8: 3rem;
  --space-9: 4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;

  /* Typography Scale */
  --text-xs:   clamp(0.6875rem, 0.65rem + 0.12vw, 0.75rem);
  --text-sm:   clamp(0.8125rem, 0.76rem + 0.2vw, 0.9375rem);
  --text-base: clamp(0.9375rem, 0.88rem + 0.25vw, 1.0625rem);
  --text-lg:   clamp(1.0625rem, 0.97rem + 0.4vw, 1.25rem);
  --text-xl:   clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl:  clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);
  --text-3xl:  clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem);
  --text-4xl:  clamp(2.25rem, 1.5rem + 2.8vw, 3.5rem);
  --text-5xl:  clamp(2.75rem, 1.8rem + 3.5vw, 4.5rem);
  --text-6xl:  clamp(3.25rem, 2rem + 4.8vw, 5.5rem);

  /* Font Families */
  --font-heading: 'Playfair Display', Georgia, serif;
  --font-body: 'Open Sans', 'Helvetica Neue', Arial, sans-serif;

  /* Font Weights */
  --weight-light: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* Line Heights */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --leading-relaxed: 1.75;

  /* Letter Spacing */
  --tracking-tight: -0.025em;
  --tracking-normal: 0;
  --tracking-wide: 0.04em;
  --tracking-wider: 0.08em;

  /* Border Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.25rem;
  --radius-full: 9999px;

  /* Layered Shadow System */
  --shadow-sm:  0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 2px 4px rgba(0, 0, 0, 0.04),
                0 6px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg:  0 2px 4px rgba(0, 0, 0, 0.02),
                0 8px 16px rgba(0, 0, 0, 0.06),
                0 24px 48px rgba(0, 0, 0, 0.06);
  --shadow-xl:  0 2px 4px rgba(0, 0, 0, 0.02),
                0 12px 24px rgba(0, 0, 0, 0.06),
                0 48px 80px rgba(0, 0, 0, 0.08);
  --shadow-2xl: 0 4px 8px rgba(0, 0, 0, 0.02),
                0 16px 32px rgba(0, 0, 0, 0.08),
                0 64px 100px rgba(0, 0, 0, 0.1);

  /* Glassmorphism */
  --glass-bg: rgba(255, 255, 255, 0.06);
  --glass-border: rgba(255, 255, 255, 0.08);
  --glass-blur: blur(20px);

  /* Premium Easing */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-smooth: cubic-bezier(0.25, 0.1, 0.25, 1);
  --duration-fast: 150ms;
  --duration-normal: 300ms;
  --duration-slow: 500ms;
  --duration-slower: 800ms;

  /* Container */
  --container-max: 1200px;
  --container-padding: clamp(1.25rem, 4vw, 2.5rem);

  /* Z-Index Scale */
  --z-base: 0;
  --z-above: 10;
  --z-nav: 100;
  --z-overlay: 200;
  --z-modal: 300;

  /* Neutral Colors */
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;
  --gray-950: #0a0a0a;

  /* Formsprache — Theme-steuerbare Form-Variablen
     Jeder Theme kann diese überschreiben, um die visuelle
     Identität zu steuern, ohne Komponenten-CSS zu ändern. */
  --btn-radius: var(--radius-full);
  --card-radius: var(--radius-xl);
  --card-shadow: var(--shadow-md);
  --section-gap: var(--space-12);
  --hero-min-height: 90dvh;
  --img-radius: var(--radius-lg);
}

/* ── Theme: AIM Beratung (Light, Standard — passend zum CI) ── */

[data-theme="aim-beratung"] {
  --color-primary: #DE8419;
  --color-primary-rgb: 222, 132, 25;
  --color-primary-light: #f0a04e;
  --color-primary-dark: #b86a10;

  --color-secondary: #1D4E89;
  --color-secondary-rgb: 29, 78, 137;
  --color-secondary-light: #2a6bb5;
  --color-secondary-dark: #153a66;

  --color-accent: #DE8419;

  --color-bg: #fafafa;
  --color-bg-alt: #f5f5f5;
  --color-bg-card: #ffffff;
  --color-surface: #f0f0f2;

  --color-text: #171717;
  --color-text-muted: #525252;
  --color-text-subtle: #737373;

  --color-border: rgba(0, 0, 0, 0.08);

  --gradient-primary: linear-gradient(135deg, #DE8419, #f0a04e);
  --gradient-hero: linear-gradient(160deg, #fafafa 0%, #f0ece4 45%, #eef2f7 70%, #fafafa 100%);
  --gradient-mesh: radial-gradient(ellipse at 25% 40%, rgba(29, 78, 137, 0.06) 0%, transparent 55%),
                   radial-gradient(ellipse at 75% 25%, rgba(222, 132, 25, 0.05) 0%, transparent 50%),
                   radial-gradient(ellipse at 50% 85%, rgba(29, 78, 137, 0.04) 0%, transparent 45%);

  --shadow-glow-sm: 0 0 20px rgba(222, 132, 25, 0.06);
  --shadow-glow-md: 0 0 40px rgba(222, 132, 25, 0.08);
  --shadow-glow-lg: 0 0 60px rgba(222, 132, 25, 0.1);

  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(0, 0, 0, 0.06);

  --card-bg: var(--color-bg-card);
  --card-border: rgba(0, 0, 0, 0.06);
  --card-border-hover: rgba(0, 0, 0, 0.12);
  --card-shine: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, transparent 50%);

  color-scheme: light;
}

/* ── Theme: AIM Beratung — Dark Mode Override ────────── */

[data-theme="aim-beratung"][data-mode="dark"] {
  --color-bg: #0c0c0e;
  --color-bg-alt: #121214;
  --color-bg-card: #18181b;
  --color-surface: #1c1c20;

  --color-text: #ededef;
  --color-text-muted: #9a9a9f;
  --color-text-subtle: #636368;

  --color-border: rgba(255, 255, 255, 0.07);

  --gradient-hero: linear-gradient(160deg, #0c0c0e 0%, #111528 45%, #0f1a2e 70%, #0c0c0e 100%);
  --gradient-mesh: radial-gradient(ellipse at 25% 40%, rgba(29, 78, 137, 0.18) 0%, transparent 55%),
                   radial-gradient(ellipse at 75% 25%, rgba(222, 132, 25, 0.08) 0%, transparent 50%),
                   radial-gradient(ellipse at 50% 85%, rgba(29, 78, 137, 0.12) 0%, transparent 45%);

  --shadow-glow-sm: 0 0 20px rgba(222, 132, 25, 0.08);
  --shadow-glow-md: 0 0 40px rgba(222, 132, 25, 0.12);
  --shadow-glow-lg: 0 0 60px rgba(222, 132, 25, 0.15),
                    0 0 120px rgba(29, 78, 137, 0.08);

  --glass-bg: rgba(12, 12, 14, 0.8);
  --glass-border: rgba(255, 255, 255, 0.06);

  --card-bg: var(--color-bg-card);
  --card-border: rgba(255, 255, 255, 0.06);
  --card-border-hover: rgba(255, 255, 255, 0.12);
  --card-shine: linear-gradient(135deg, rgba(255,255,255,0.04) 0%, transparent 50%);

  color-scheme: dark;
}

/* ── Theme: Handwerker Demo (Light, Warm) ────────────── */

[data-theme="handwerker"] {
  --color-primary: #1e3a5f;
  --color-primary-rgb: 30, 58, 95;
  --color-primary-light: #2a5490;
  --color-primary-dark: #142840;

  --color-secondary: #d4a843;
  --color-secondary-rgb: 212, 168, 67;
  --color-secondary-light: #e0be6a;
  --color-secondary-dark: #b08d30;

  --color-accent: #d4a843;

  --color-bg: #fdfcfa;
  --color-bg-alt: #f5f3ef;
  --color-bg-card: #ffffff;
  --color-surface: #f0ede8;

  --color-text: #1a1a1f;
  --color-text-muted: #4a4a52;
  --color-text-subtle: #7a7a85;

  --color-border: rgba(0, 0, 0, 0.08);

  --gradient-primary: linear-gradient(135deg, #1e3a5f, #2a5490);
  --gradient-hero: linear-gradient(160deg, #1e3a5f 0%, #2a5490 50%, #1e3a5f 100%);
  --gradient-mesh: radial-gradient(ellipse at 30% 50%, rgba(30, 58, 95, 0.06) 0%, transparent 50%),
                   radial-gradient(ellipse at 70% 20%, rgba(212, 168, 67, 0.04) 0%, transparent 50%);
  --gradient-gold: linear-gradient(135deg, #d4a843, #e0be6a);

  --shadow-glow-sm: 0 0 20px rgba(30, 58, 95, 0.06);
  --shadow-glow-md: 0 0 40px rgba(30, 58, 95, 0.08);
  --shadow-glow-lg: 0 0 60px rgba(30, 58, 95, 0.1);

  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(0, 0, 0, 0.06);

  --card-bg: var(--color-bg-card);
  --card-border: rgba(0, 0, 0, 0.06);
  --card-border-hover: rgba(0, 0, 0, 0.12);
  --card-shine: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, transparent 50%);

  /* Formsprache: Handwerker — eckig, kräftig */
  --btn-radius: var(--radius-sm);
  --card-shadow: var(--shadow-lg);
  --img-radius: var(--radius-sm);

  color-scheme: light;
}

/* ── Theme: Naturstein (Light, Earthy Warm) ──────────── */

[data-theme="naturstein"] {
  --color-primary: #3d3426;
  --color-primary-rgb: 61, 52, 38;
  --color-primary-light: #5a4d3a;
  --color-primary-dark: #2a231a;

  --color-secondary: #6b7c5e;
  --color-secondary-rgb: 107, 124, 94;
  --color-secondary-light: #8a9e7a;
  --color-secondary-dark: #4f5c46;

  --color-accent: #c4a265;
  --color-accent-rgb: 196, 162, 101;

  --color-bg: #faf6f0;
  --color-bg-alt: #f0ebe2;
  --color-bg-card: #ffffff;
  --color-surface: #ebe5da;

  --color-text: #2d2d2d;
  --color-text-muted: #7a7267;
  --color-text-subtle: #9a9288;

  --color-border: rgba(61, 52, 38, 0.1);

  --gradient-primary: linear-gradient(135deg, #3d3426, #5a4d3a);
  --gradient-hero: linear-gradient(160deg, #3d3426 0%, #5a4d3a 50%, #3d3426 100%);
  --gradient-mesh: radial-gradient(ellipse at 30% 50%, rgba(61, 52, 38, 0.05) 0%, transparent 50%),
                   radial-gradient(ellipse at 70% 20%, rgba(107, 124, 94, 0.04) 0%, transparent 50%);
  --gradient-accent: linear-gradient(135deg, #c4a265, #d4b87a);

  --shadow-glow-sm: 0 0 20px rgba(61, 52, 38, 0.06);
  --shadow-glow-md: 0 0 40px rgba(61, 52, 38, 0.08);
  --shadow-glow-lg: 0 0 60px rgba(61, 52, 38, 0.1);

  --glass-bg: rgba(250, 246, 240, 0.9);
  --glass-border: rgba(61, 52, 38, 0.08);

  --card-bg: var(--color-bg-card);
  --card-border: rgba(61, 52, 38, 0.08);
  --card-border-hover: rgba(61, 52, 38, 0.15);
  --card-shine: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 50%);

  color-scheme: light;
}
/* ── Theme: Gastro (Editorial, Bay.Chi-inspired) ─────── */

[data-theme="gastro"] {
  --color-primary: #5C2018;
  --color-primary-rgb: 92, 32, 24;
  --color-primary-light: #7A3428;
  --color-primary-dark: #3E1510;

  --color-secondary: #C4956A;
  --color-secondary-rgb: 196, 149, 106;
  --color-secondary-light: #D4AB85;
  --color-secondary-dark: #A07A52;

  --color-accent: #8B2500;

  --color-bg: #FDF8F3;
  --color-bg-alt: #F5EDE4;
  --color-bg-card: #ffffff;
  --color-surface: #EDE5DA;

  --color-text: #2D1F14;
  --color-text-muted: #7A6B5D;
  --color-text-subtle: #9A8E82;

  --color-border: rgba(92, 32, 24, 0.1);

  --gradient-primary: linear-gradient(135deg, #5C2018, #7A3428);
  --gradient-hero: linear-gradient(160deg, #FDF8F3 0%, #F5EDE4 50%, #FDF8F3 100%);
  --gradient-mesh: radial-gradient(ellipse at 30% 50%, rgba(92, 32, 24, 0.04) 0%, transparent 50%),
                   radial-gradient(ellipse at 70% 20%, rgba(196, 149, 106, 0.04) 0%, transparent 50%);
  --gradient-accent: linear-gradient(135deg, #C4956A, #D4AB85);

  --shadow-glow-sm: 0 0 20px rgba(92, 32, 24, 0.06);
  --shadow-glow-md: 0 0 40px rgba(92, 32, 24, 0.08);
  --shadow-glow-lg: 0 0 60px rgba(92, 32, 24, 0.1);

  --glass-bg: rgba(253, 248, 243, 0.9);
  --glass-border: rgba(92, 32, 24, 0.08);

  --card-bg: var(--color-bg-card);
  --card-border: rgba(92, 32, 24, 0.08);
  --card-border-hover: rgba(92, 32, 24, 0.15);
  --card-shine: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 50%);

  /* Formsprache: Gastro — kantig, flach, editorial */
  --btn-radius: 2px;
  --card-radius: 0;
  --card-shadow: none;
  --img-radius: 0;
  --hero-min-height: 100dvh;
  --section-gap: var(--space-10);

  color-scheme: light;
}

/* ── Theme: THE SWEAT SET (Modern, Energetic) ────────── */

[data-theme="thesweatset"] {
  --color-primary: #F79238;
  --color-primary-rgb: 247, 146, 56;
  --color-primary-light: #FFB066;
  --color-primary-dark: #D97B1F;

  --color-secondary: #24B8C2;
  --color-secondary-rgb: 36, 184, 194;
  --color-secondary-light: #4DCCD4;
  --color-secondary-dark: #1A9AA3;

  --color-accent: #F79238;

  --color-bg: #FAFAFA;
  --color-bg-alt: #F5F5F5;
  --color-bg-card: #FFFFFF;
  --color-surface: #F0F0F0;

  --color-text: #414546;
  --color-text-muted: #4B5563;
  --color-text-subtle: #9CA3AF;

  --color-border: rgba(0, 0, 0, 0.05);

  --gradient-primary: linear-gradient(135deg, #F79238 0%, #24B8C2 100%);
  --gradient-hero: linear-gradient(160deg, #FAFAFA 0%, #FFF5EB 45%, #F0FAFB 70%, #FAFAFA 100%);
  --gradient-mesh: radial-gradient(ellipse at 25% 40%, rgba(36, 184, 194, 0.06) 0%, transparent 55%),
                   radial-gradient(ellipse at 75% 25%, rgba(247, 146, 56, 0.05) 0%, transparent 50%),
                   radial-gradient(ellipse at 50% 85%, rgba(36, 184, 194, 0.04) 0%, transparent 45%);

  --shadow-glow-sm: 0 0 20px rgba(247, 146, 56, 0.06);
  --shadow-glow-md: 0 0 40px rgba(247, 146, 56, 0.08);
  --shadow-glow-lg: 0 0 60px rgba(247, 146, 56, 0.1);

  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(0, 0, 0, 0.06);

  --card-bg: var(--color-bg-card);
  --card-border: rgba(0, 0, 0, 0.05);
  --card-border-hover: rgba(0, 0, 0, 0.12);
  --card-shine: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, transparent 50%);

  /* Formsprache: Modern, rund, weich */
  --btn-radius: var(--radius-full);
  --card-radius: 24px;
  --card-shadow: 0 4px 6px -1px rgba(0,0,0,0.1);
  --img-radius: 24px;
  --hero-min-height: 100dvh;
  --section-gap: var(--space-12);

  /* TheSweatSet uses Rubik from Google Fonts */
  --font-heading: 'Rubik', system-ui, -apple-system, sans-serif;
  --font-body: 'Rubik', system-ui, -apple-system, sans-serif;

  color-scheme: light;
}

/* ── Theme: KREATIVAGENTUR (Dark, Bold, Neon-Lime) ─── */
[data-theme="kreativagentur"] {
  --color-primary: #c8ff00;
  --color-primary-rgb: 200, 255, 0;
  --color-primary-light: #d4ff33;
  --color-primary-dark: #a0cc00;

  --color-secondary: #f5f5f0;
  --color-secondary-rgb: 245, 245, 240;
  --color-secondary-light: #ffffff;
  --color-secondary-dark: #cccccc;

  --color-accent: #c8ff00;

  --color-bg: #0a0a0a;
  --color-bg-alt: #111111;
  --color-bg-card: #141414;
  --color-surface: #1a1a1a;

  --color-text: #f5f5f0;
  --color-text-muted: #888888;
  --color-text-subtle: #666666;

  --color-border: rgba(200, 255, 0, 0.1);

  --gradient-primary: linear-gradient(135deg, #c8ff00, #a0cc00);
  --gradient-hero: linear-gradient(160deg, #0a0a0a 0%, #111111 50%, #0a0a0a 100%);
  --gradient-mesh: radial-gradient(ellipse at 30% 50%, rgba(200, 255, 0, 0.03) 0%, transparent 50%),
                   radial-gradient(ellipse at 70% 20%, rgba(200, 255, 0, 0.02) 0%, transparent 50%);
  --gradient-accent: linear-gradient(135deg, #c8ff00, #d4ff33);

  --shadow-glow-sm: 0 0 20px rgba(200, 255, 0, 0.05);
  --shadow-glow-md: 0 0 40px rgba(200, 255, 0, 0.08);
  --shadow-glow-lg: 0 0 60px rgba(200, 255, 0, 0.1);

  --glass-bg: rgba(10, 10, 10, 0.9);
  --glass-border: rgba(200, 255, 0, 0.08);

  --card-bg: var(--color-bg-card);
  --card-border: rgba(200, 255, 0, 0.08);
  --card-border-hover: rgba(200, 255, 0, 0.2);
  --card-shine: linear-gradient(135deg, rgba(200, 255, 0, 0.05) 0%, transparent 50%);

  /* Formsprache: Kreativagentur — kantig, bold, dunkel */
  --btn-radius: 0;
  --card-radius: 0;
  --card-shadow: none;
  --img-radius: 0;
  --hero-min-height: 100dvh;
  --section-gap: 0;

  color-scheme: dark;
}

/* ── Theme: PRODUKTSEITE (Premium, Dark, Kupfer) ──── */
[data-theme="produktseite"] {
  --color-primary: #c87850;
  --color-primary-rgb: 200, 120, 80;
  --color-primary-light: #d99070;
  --color-primary-dark: #a06040;

  --color-secondary: #ffffff;
  --color-secondary-rgb: 255, 255, 255;
  --color-secondary-light: #ffffff;
  --color-secondary-dark: #cccccc;

  --color-accent: #c87850;

  --color-bg: #000000;
  --color-bg-alt: #0a0a0a;
  --color-bg-card: #0d0d0d;
  --color-surface: #111111;

  --color-text: #ffffff;
  --color-text-muted: #888888;
  --color-text-subtle: #555555;

  --color-border: rgba(200, 120, 80, 0.1);

  --gradient-primary: linear-gradient(135deg, #c87850, #a06040);
  --gradient-hero: linear-gradient(160deg, #000000 0%, #0a0a0a 50%, #000000 100%);
  --gradient-mesh: radial-gradient(ellipse at 30% 50%, rgba(200, 120, 80, 0.03) 0%, transparent 50%),
                   radial-gradient(ellipse at 70% 20%, rgba(200, 120, 80, 0.02) 0%, transparent 50%);
  --gradient-accent: linear-gradient(135deg, #c87850, #d99070);

  --shadow-glow-sm: 0 0 20px rgba(200, 120, 80, 0.05);
  --shadow-glow-md: 0 0 40px rgba(200, 120, 80, 0.08);
  --shadow-glow-lg: 0 0 60px rgba(200, 120, 80, 0.1);

  --glass-bg: rgba(0, 0, 0, 0.9);
  --glass-border: rgba(200, 120, 80, 0.08);

  --card-bg: var(--color-bg-card);
  --card-border: rgba(200, 120, 80, 0.08);
  --card-border-hover: rgba(200, 120, 80, 0.2);
  --card-shine: linear-gradient(135deg, rgba(200, 120, 80, 0.05) 0%, transparent 50%);

  --btn-radius: 0;
  --card-radius: 0;
  --card-shadow: none;
  --img-radius: 0;
  --hero-min-height: 100dvh;
  --section-gap: 0;

  color-scheme: dark;
}

/* ── Theme: ARCHITEKTUR (Brutalist Minimal, Light, Kantig) ──── */
[data-theme="architektur"] {
  --color-primary: #8c7a6b;
  --color-primary-rgb: 140, 122, 107;
  --color-primary-light: #a6947f;
  --color-primary-dark: #6e5f52;

  --color-secondary: #1a1a1a;
  --color-secondary-rgb: 26, 26, 26;
  --color-secondary-light: #333333;
  --color-secondary-dark: #000000;

  --color-accent: #8c7a6b;

  --color-bg: #f2f0ed;
  --color-bg-alt: #ebe8e4;
  --color-bg-card: #e8e5e0;
  --color-surface: #e8e5e0;

  --color-text: #1a1a1a;
  --color-text-muted: #666666;
  --color-text-subtle: #999999;

  --color-border: rgba(140, 122, 107, 0.2);

  --gradient-primary: linear-gradient(135deg, #8c7a6b, #6e5f52);
  --gradient-hero: linear-gradient(160deg, #f2f0ed 0%, #e8e5e0 50%, #f2f0ed 100%);
  --gradient-mesh: radial-gradient(ellipse at 30% 50%, rgba(140, 122, 107, 0.05) 0%, transparent 50%),
                   radial-gradient(ellipse at 70% 20%, rgba(140, 122, 107, 0.03) 0%, transparent 50%);
  --gradient-accent: linear-gradient(135deg, #8c7a6b, #a6947f);

  --shadow-glow-sm: none;
  --shadow-glow-md: none;
  --shadow-glow-lg: none;

  --glass-bg: rgba(242, 240, 237, 0.95);
  --glass-border: rgba(140, 122, 107, 0.15);

  --card-bg: var(--color-bg-card);
  --card-border: rgba(140, 122, 107, 0.15);
  --card-border-hover: rgba(140, 122, 107, 0.3);
  --card-shine: none;

  --btn-radius: 0;
  --card-radius: 0;
  --card-shadow: none;
  --img-radius: 0;
  --hero-min-height: 100dvh;
  --section-gap: 0;

  color-scheme: light;
}

/* ── Theme: CONSUMER-PRODUCT (Premium Dark, Copper Accent) ──── */
[data-theme="consumer-product"] {
  --color-primary: #c87850;
  --color-primary-rgb: 200, 120, 80;
  --color-primary-light: #d99070;
  --color-primary-dark: #a06040;

  --color-secondary: #ffffff;
  --color-secondary-rgb: 255, 255, 255;
  --color-secondary-light: #ffffff;
  --color-secondary-dark: #cccccc;

  --color-accent: #c87850;

  --color-bg: #0a0a0a;
  --color-bg-alt: #0d0d0d;
  --color-bg-card: #111111;
  --color-surface: #141414;

  --color-text: #ffffff;
  --color-text-muted: #888888;
  --color-text-subtle: #555555;

  --color-border: rgba(200, 120, 80, 0.1);

  --gradient-primary: linear-gradient(135deg, #c87850, #a06040);
  --gradient-hero: linear-gradient(160deg, #0a0a0a 0%, #0d0d0d 50%, #0a0a0a 100%);
  --gradient-mesh: radial-gradient(ellipse at 30% 50%, rgba(200, 120, 80, 0.03) 0%, transparent 50%),
                   radial-gradient(ellipse at 70% 20%, rgba(200, 120, 80, 0.02) 0%, transparent 50%);
  --gradient-accent: linear-gradient(135deg, #c87850, #d99070);

  --shadow-glow-sm: 0 0 20px rgba(200, 120, 80, 0.05);
  --shadow-glow-md: 0 0 40px rgba(200, 120, 80, 0.08);
  --shadow-glow-lg: 0 0 60px rgba(200, 120, 80, 0.1);

  --glass-bg: rgba(10, 10, 10, 0.9);
  --glass-border: rgba(200, 120, 80, 0.08);

  --card-bg: var(--color-bg-card);
  --card-border: rgba(200, 120, 80, 0.08);
  --card-border-hover: rgba(200, 120, 80, 0.2);
  --card-shine: linear-gradient(135deg, rgba(200, 120, 80, 0.05) 0%, transparent 50%);

  --btn-radius: 0;
  --card-radius: 0;
  --card-shadow: none;
  --img-radius: 0;
  --hero-min-height: 100dvh;
  --section-gap: 0;

  color-scheme: dark;
}

/* ─── Fisch-Lang: Maritime Tradition ───────────────── */
[data-theme="fisch-lang"] {
  --color-primary: #1a365d;
  --color-primary-rgb: 26, 54, 93;
  --color-primary-light: #2a4a7f;
  --color-primary-dark: #0f2440;

  --color-secondary: #c9a84c;
  --color-secondary-rgb: 201, 168, 76;
  --color-secondary-light: #d4b96a;
  --color-secondary-dark: #a88a3a;

  --color-accent: #c9a84c;

  --color-bg: #faf8f5;
  --color-bg-alt: #f0ece4;
  --color-bg-card: #ffffff;
  --color-surface: #ede8df;

  --color-text: #2d3748;
  --color-text-muted: #5a6577;
  --color-text-subtle: #8b95a5;

  --color-border: rgba(0, 0, 0, 0.08);

  --gradient-primary: linear-gradient(135deg, #1a365d, #2a4a7f);
  --gradient-hero: linear-gradient(160deg, #1a365d 0%, #2a4a7f 50%, #1a365d 100%);
  --gradient-mesh: radial-gradient(ellipse at 30% 50%, rgba(26, 54, 93, 0.06) 0%, transparent 50%),
                   radial-gradient(ellipse at 70% 20%, rgba(201, 168, 76, 0.04) 0%, transparent 50%);
  --gradient-gold: linear-gradient(135deg, #c9a84c, #d4b96a);

  --shadow-glow-sm: 0 0 20px rgba(201, 168, 76, 0.08);
  --shadow-glow-md: 0 0 40px rgba(201, 168, 76, 0.12);
  --shadow-glow-lg: 0 0 60px rgba(201, 168, 76, 0.16);

  --glass-bg: rgba(255, 255, 255, 0.85);
  --glass-border: rgba(0, 0, 0, 0.06);

  --card-bg: var(--color-bg-card);
  --card-border: rgba(0, 0, 0, 0.06);
  --card-border-hover: rgba(0, 0, 0, 0.12);
  --card-shine: linear-gradient(135deg, rgba(255,255,255,0.6) 0%, transparent 50%);

  /* Formsprache: Traditionell, leicht gerundet, warm */
  --btn-radius: var(--radius-sm);
  --card-radius: var(--radius-md);
  --card-shadow: var(--shadow-lg);
  --img-radius: var(--radius-sm);
  --section-gap: var(--space-12);

  color-scheme: light;
}

} /* end @layer tokens */

/* ── Base Typography ─────────────────────────────────── */

@layer base {
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-normal);
  color: var(--color-text);
  background-color: var(--color-bg);
  font-optical-sizing: auto;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

h1, h2, h3 {
  text-wrap: balance;
}

h1 {
  font-size: var(--text-6xl);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

h2 {
  font-size: var(--text-4xl);
  line-height: 1.1;
}

h3 {
  font-size: var(--text-2xl);
  line-height: var(--leading-snug);
  letter-spacing: -0.015em;
}

h4 { font-size: var(--text-xl); }
h5 { font-size: var(--text-lg); }
h6 { font-size: var(--text-base); }

p {
  line-height: var(--leading-normal);
  max-width: 60ch;
  text-wrap: pretty;
}

.lead {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text-muted);
  font-weight: var(--weight-light);
  text-wrap: pretty;
}

.label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wider);
  text-transform: uppercase;
  color: var(--color-accent);
}

.accent-text {
  color: var(--color-primary);
}

/* ── Container ───────────────────────────────────────── */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding);
}

.container--narrow {
  max-width: 860px;
}

.container--wide {
  max-width: 1400px;
}

/* ── Section ─────────────────────────────────────────── */

.section {
  padding-block: clamp(var(--space-9), 8vw, var(--space-12));
}

.section--tight {
  padding-block: clamp(var(--space-7), 5vw, var(--space-9));
}

/* ── Scroll Progress ─────────────────────────────────── */

.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--color-primary);
  z-index: calc(var(--z-nav) + 1);
  transition: width 50ms linear;
}

/* ── Selection ───────────────────────────────────────── */

::selection {
  background-color: rgba(var(--color-primary-rgb), 0.25);
  color: var(--color-text);
}

/* ── Focus Visible ───────────────────────────────────── */

:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 3px;
}

/* ── Reduced Motion ──────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}
} /* end @layer base */