/* ============================================================================
   WebDevCore — Design-Token-System (theme.css)
   Stack-neutral: identische Token-Namen werden auch im react-vercel-Template genutzt.
   Eine Akzentfarbe + ein Preset steuern den Gesamteindruck. Alles andere leitet
   sich per color-mix aus den Tokens ab. Light + Dark. Keine externen Ressourcen.
   ========================================================================== */

:root {
  /* --- Marken-Akzent (vom Design-Agent pro Kunde gesetzt; Default = seriöses Blau) --- */
  --accent: #1f6feb;
  --accent-ink: #ffffff;              /* Textfarbe auf Akzentflächen */

  /* abgeleitete Akzent-Töne (aus --accent gemischt -> ein Regler genügt) */
  --accent-700: color-mix(in srgb, var(--accent) 78%, #000);
  --accent-600: color-mix(in srgb, var(--accent) 90%, #000);
  --accent-300: color-mix(in srgb, var(--accent) 55%, #fff);
  --accent-100: color-mix(in srgb, var(--accent) 16%, #fff);
  --accent-soft: color-mix(in srgb, var(--accent) 10%, transparent);
  --accent-ring: color-mix(in srgb, var(--accent) 40%, transparent);

  /* Wahrnehmungsgerechte Abstufungen (in oklab statt srgb -- kein matschiger
     Zwischenton). Fuer Blockflaechen/Schrift, die spuerbar vom Akzent abgeleitet
     wirken sollen; die --accent-NNN-Stufen oben bleiben fuer alles Bestehende. */
  --accent-weich:   color-mix(in oklab, var(--accent) 12%, var(--surface));
  --accent-satt:    color-mix(in oklab, var(--accent) 85%, black);
  --accent-schrift: color-mix(in oklab, var(--accent) 70%, var(--fg));

  /* Hero-Akzent-Glow: Position/Groesse des radialen Scheins hinter dem Hero.
     Presets variieren diese, damit nicht jede Seite denselben Glow oben-rechts traegt. */
  --hero-glow-pos: 75% 10%;
  --hero-glow-size: 60% 70%;
  /* Button-Radius als eigene Achse (Default = Pill). Presets setzen ihn eckig/scharf. */
  --btn-radius: var(--radius-full);

  /* Optionale Sekundär-Markenfarbe (nur bei Zwei-Farben-Marken vom Design-Agent
     gesetzt). Default = Hauptakzent -> ohne brand.accent2 ist die Site exakt wie
     zuvor. Sparsam einsetzen (Eyebrow-Linien, kleine Icons, Sekundär-Badges) —
     niemals als zweiter, gleich lauter Knall-Akzent ("spend boldness in one place"). */
  --accent-2:      var(--accent);
  --accent-2-ink:  var(--accent-ink);
  --accent-2-600:  color-mix(in srgb, var(--accent-2) 90%, #000);
  --accent-2-300:  color-mix(in srgb, var(--accent-2) 55%, #fff);
  --accent-2-soft: color-mix(in srgb, var(--accent-2) 10%, transparent);

  /* --- Neutrale Skala --- */
  --n-0:  #ffffff;
  --n-25: #fbfcfd;
  --n-50: #f6f8fa;
  --n-100:#eef1f4;
  --n-200:#e3e8ee;
  --n-300:#cdd5df;
  --n-400:#9aa6b2;
  --n-500:#6b7785;
  --n-600:#4d5765;
  --n-700:#363f4b;
  --n-800:#222a34;
  --n-900:#141a22;
  --n-950:#0c1117;

  /* --- Semantische Flächen/Text (Light) --- */
  --bg:        var(--n-0);
  --surface:   var(--n-0);
  --surface-2: var(--n-50);
  --surface-3: var(--n-100);
  --border:    var(--n-200);
  --border-strong: var(--n-300);
  --fg:        var(--n-900);
  --fg-muted:  var(--n-600);
  --fg-subtle: var(--n-500);

  /* --- Statusfarben --- */
  --success: #1a7f4b;
  --warning: #b3791b;
  --danger:  #c2401f;

  /* --- Typografie --- */
  /* Self-hosted Fonts werden (falls vorhanden) per @font-face in fonts.css geladen;
     sonst greift der jeweilige System-Stack. Display und Body sind getrennt und
     werden pro Preset auf ein echtes Schrift-Paar gemappt (siehe unten). */
  --font-sans:  system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-serif: Georgia, "Times New Roman", "Iowan Old Style", "Apple Garamond", serif;

  /* Wiederverwendbare Schrift-Stacks (self-hosted Name -> System-Fallback) */
  --stack-inter:        "WDC Inter", var(--font-sans);
  --stack-work-sans:    "WDC Work Sans", var(--font-sans);
  --stack-space-grotesk:"WDC Space Grotesk", ui-rounded, var(--font-sans);
  --stack-fraunces:     "WDC Fraunces", var(--font-serif);
  --stack-source-serif: "WDC Source Serif", var(--font-serif);
  --stack-playfair:     "WDC Playfair", var(--font-serif);
  --stack-hanken:       "WDC Hanken Grotesk", var(--font-sans);
  --stack-literata:     "WDC Literata", var(--font-serif);
  --stack-big-shoulders:"WDC Big Shoulders", var(--font-sans);
  --stack-bitter:       "WDC Bitter", var(--font-serif);
  --stack-karla:        "WDC Karla", var(--font-sans);
  --stack-unbounded:    "WDC Unbounded", var(--font-sans);

  /* Aktives Paar — Default modern-clean = Inter / Inter. Presets re-mappen diese. */
  --font-display: var(--stack-inter);
  --font-body:    var(--stack-inter);
  --font-mono: ui-monospace, "Cascadia Code", "SFMono-Regular", Menlo, Consolas, monospace;

  /* Display-Feinschliff (Presets justieren diese je nach Schriftcharakter) */
  --display-weight: 700;
  --display-tracking: var(--tracking-tight);

  /* fluide Type-Scale (clamp: mobil -> desktop) */
  --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --step-0:  clamp(1rem, 0.96rem + 0.20vw, 1.13rem);
  --step-1:  clamp(1.20rem, 1.13rem + 0.36vw, 1.45rem);
  --step-2:  clamp(1.44rem, 1.32rem + 0.62vw, 1.86rem);
  --step-3:  clamp(1.73rem, 1.54rem + 0.98vw, 2.38rem);
  --step-4:  clamp(2.07rem, 1.78rem + 1.48vw, 3.05rem);
  --step-5:  clamp(2.49rem, 2.04rem + 2.24vw, 3.90rem);
  --step-6:  clamp(2.99rem, 2.32rem + 3.32vw, 5.00rem);

  --leading-tight: 1.12;
  --leading-snug: 1.3;
  --leading-normal: 1.65;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* --- Spacing-Skala --- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs:  0.75rem;
  --space-sm:  1rem;
  --space-md:  1.5rem;
  --space-lg:  2.5rem;
  --space-xl:  4rem;
  --space-2xl: 6rem;
  --space-3xl: 8rem;

  /* --- Radius --- */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 20px;
  --radius-xl: 28px;
  --radius-full: 9999px;

  /* --- Schatten (weich, mehrlagig) --- */
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.08), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 6px 16px -4px rgba(16, 24, 40, 0.12), 0 2px 6px -2px rgba(16, 24, 40, 0.07);
  --shadow-lg: 0 20px 40px -12px rgba(16, 24, 40, 0.18), 0 8px 16px -8px rgba(16, 24, 40, 0.08);
  --shadow-accent: 0 12px 30px -10px var(--accent-ring);

  /* --- Hairline-Alternative zu Schatten (flache Presets nutzen Borders statt Schatten) --- */
  --hairline: 1px solid var(--border);
  --hairline-strong: 1px solid var(--border-strong);

  /* --- Karten-/Flächen-Persönlichkeit (von Presets re-gemappt) --- */
  --card-shadow: var(--shadow-xs);     /* Ruhezustand einer Karte */
  --card-shadow-hover: var(--shadow-md);
  --card-border: var(--hairline);
  --elevation-hero: var(--shadow-lg);  /* Hero-Medien / grosse Flächen */

  /* --- Section-Rhythmus (tight | normal | generous über Presets) --- */
  --section-pad: clamp(var(--space-xl), 8vw, var(--space-3xl));
  --section-pad-tight: var(--space-xl);

  /* --- Neutral-Tönung: Presets mischen ein paar % Akzent in die Flächen --- */
  --neutral-tint: 0%;                  /* 0% = rein neutral; Presets erhöhen das */

  /* --- Layout --- */
  --container: 76rem;
  --container-narrow: 46rem;
  --container-wide: 86rem;
  --gutter: clamp(1.1rem, 4vw, 2rem);

  /* --- Motion --- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast: 140ms;
  --dur-base: 240ms;
  --dur-slow: 420ms;

  --z-base: 1;
  --z-raised: 10;
  --z-sticky: 40;
  --z-header: 50;
  --z-overlay: 80;
  --z-modal: 100;

  /* ============================================================================
     Premium-Layer-Tokens (WebDevCore Premium Motion/Design). Rein additiv — ändern
     KEINE bestehenden Token. Werden von premium.css / effects.css / motion.js genutzt.
     ========================================================================== */
  /* Flächen & Glow */
  --surface-soft: color-mix(in srgb, var(--accent) 3%, var(--surface-2));
  --glow: color-mix(in srgb, var(--accent) 55%, transparent);
  /* Radius-Achse für Medien (Presets können sie separat setzen) */
  --radius-image: var(--radius-lg);
  /* Premium-Schatten: reichere Elevation, Innen-Highlight, Akzent-Glow */
  --shadow-inset: inset 0 1px 0 color-mix(in srgb, #fff 55%, transparent);
  --shadow-premium: 0 32px 60px -22px rgba(16, 24, 40, 0.28), 0 10px 26px -14px rgba(16, 24, 40, 0.14);
  --shadow-glow: 0 0 0 1px var(--accent-ring), 0 12px 44px -8px color-mix(in srgb, var(--accent) 45%, transparent);
  /* Premium-Easings + zusätzliche Dauer */
  --ease-premium: cubic-bezier(0.7, 0, 0.2, 1);   /* kräftig, „teuer" */
  --ease-soft:    cubic-bezier(0.33, 1, 0.68, 1); /* weich ausklingend */
  --dur-xslow: 720ms;
  /* Stagger-Token (gestaffelte Reveals ohne JS-Rechnung) */
  --stagger-sm: 60ms;
  --stagger-md: 110ms;
  /* Blur-Skala (Glas/Overlays) */
  --blur-sm: 6px;
  --blur-md: 14px;
  --blur-lg: 30px;
  /* Wiederverwendbare Verläufe */
  --gradient-accent: linear-gradient(135deg, var(--accent), var(--accent-700));
  --gradient-sheen: linear-gradient(100deg, transparent 20%, color-mix(in srgb, #fff 55%, transparent) 50%, transparent 80%);
  /* Fluider Gap für Premium-Sektions-Innenabstände */
  --gap-fluid: clamp(var(--space-md), 4vw, var(--space-xl));

  /* Eine generierte Kunden-Site ist HELL. color-scheme:light hält Formular-
     Controls/Scrollbars/Autofill hell, auch wenn das Besucher-OS dunkel ist.
     Dunkel gibt es nur bewusst (Preset premium-dark / data-theme="dark"). */
  color-scheme: light;
}

/* ============================================================================
   Dark Mode — BEWUSSTE Design-Wahl (Preset premium-dark / data-theme="dark"),
   NICHT automatisch nach OS. Siehe Begründung unten.
   ========================================================================== */
/* Früher kippte hier eine `@media (prefers-color-scheme: dark)`-Regel JEDE helle
   Preset-Site auf Dunkel, sobald das Besucher-OS dunkel war. Das verursachte zwei
   Bugs: (1) „alles zu dunkel" bei hellen Presets; (2) einen Hell-auf-Hell-
   Kontrastfehler — die `--surface-2`-Tönungsregel weiter unten ignorierte die
   Media-Query, sodass Footer/getönte Bänder hell blieben, der Text aber auf hell
   umschaltete. Die automatische OS-Umschaltung ist deshalb ENTFERNT.
   Dunkel gibt es nur bewusst per data-theme="dark" (oder Preset premium-dark): */
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: var(--n-950); --surface: var(--n-900); --surface-2: var(--n-800);
  --surface-3: var(--n-700);
  --border: color-mix(in srgb, var(--n-0) 12%, transparent);
  --border-strong: color-mix(in srgb, var(--n-0) 20%, transparent);
  --fg: var(--n-50); --fg-muted: var(--n-300); --fg-subtle: var(--n-400);
  --accent-100: color-mix(in srgb, var(--accent) 22%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  /* dunkle Flächen brauchen helleren Akzent-Ton für AA-Text */
  --accent-600: color-mix(in srgb, var(--accent) 55%, #fff);
}

/* ============================================================================
   Ästhetik-Presets — vom Design-Agent pro Kunde gewählt (data-preset am <html>).
   Jedes Preset ist ein EIGENES Design-System: Schrift-Paar, Akzent-Strategie-Hinweis,
   Neutral-Tönung, Radius-Charakter, Schatten-Elevation (flach/hairline vs. weich),
   Section-Rhythmus und Default-Layout-Varianten. Der Akzent bleibt --accent
   (pro Kunde gesetzt); Neutrale werden per color-mix mit etwas Akzent getönt.
   Struktur/Blöcke bleiben identisch — nur Tokens werden re-gemappt.

   Akzent-Strategie-Hinweis (--accent-strategy) wird vom design-director gelesen:
     vivid   = kräftiger, gesättigter Akzent passt
     muted   = gedämpfter, erdiger/entsättigter Akzent passt
     jewel   = tiefer, satter Edelstein-Ton
     mono    = nahezu monochrom, Akzent sehr sparsam
   ========================================================================== */

/* ---------------------------------------------------------------------------
   modern-clean (Default) — Inter/Inter, weiche Schatten, ruhige Neutrale.
   Akzent-Strategie: vivid. Bereits in :root definiert; hier nur explizit.
   Bewusst bei Inter belassen (Stufe C): dies ist der EINE explizit "neutrale"
   Preset-Name -- alle 12 anderen hellen/dunklen Presets wurden auf Faces
   jenseits der Überbenutzt-Liste umgestellt (nur organic/etched-dark-mono
   behalten Fraunces/Inter aus genannten Gründen).
   --------------------------------------------------------------------------- */
:root[data-preset="modern-clean"] {
  --accent-strategy: vivid;
  --hero-variant: split-right;
}

/* ---------------------------------------------------------------------------
   editorial — Playfair Display / Literata. Hoher Typo-Kontrast, eckig,
   großzügige Weißräume, flache Hairline-Optik. Magazin-Anmutung; Literata ist
   eine fürs Lesen gebaute Serif -- Fließtext bleibt serifig statt auf Sans zu wechseln.
   --------------------------------------------------------------------------- */
:root[data-preset="editorial"] {
  --hero-glow-pos: 12% 0%; --hero-glow-size: 40% 55%; --btn-radius: 2px;
  --font-display: var(--stack-playfair);
  --font-body:    var(--stack-literata);
  --display-weight: 700;
  --display-tracking: -0.01em;
  --radius-sm: 2px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 12px;
  --tracking-tight: -0.025em;
  --weight-semibold: 600;
  --accent-strategy: jewel;
  /* Flache, gedruckte Anmutung: Hairlines statt Schatten */
  --card-shadow: none;
  --card-shadow-hover: var(--shadow-sm);
  --card-border: var(--hairline-strong);
  --elevation-hero: none;
  --section-pad: clamp(var(--space-2xl), 9vw, var(--space-3xl));
  --neutral-tint: 1%;
  --hero-variant: full-bleed;
}

/* ---------------------------------------------------------------------------
   warm — Bitter / Karla. Cremiger, getönter Hintergrund, runde Radien,
   weiche Schatten. Einladend, menschlich (Handwerk, Pflege, lokal); die robuste
   Slab-Serif Bitter trägt den handwerklichen Charakter, Karla bleibt warm-ruhig im Body.
   --------------------------------------------------------------------------- */
:root[data-preset="warm"] {
  --hero-glow-pos: 15% 90%; --hero-glow-size: 70% 80%;
  --font-display: var(--stack-bitter);
  --font-body:    var(--stack-karla);
  --display-weight: 600;
  --display-tracking: -0.005em;
  --n-0: #fffdfa; --n-25: #fdfaf4; --n-50: #fbf6ee; --n-100: #f4ebdd;
  --n-200: #ebdcc8; --n-300: #d8c3a6;
  --radius-md: 18px; --radius-lg: 26px; --radius-xl: 36px; --radius-sm: 12px;
  --accent-strategy: muted;
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);
  --neutral-tint: 4%;
  --section-pad: clamp(var(--space-xl), 8vw, var(--space-3xl));
  --hero-variant: split-left;
}

/* ---------------------------------------------------------------------------
   premium-dark — Unbounded / Hanken Grotesk. Dunkle Bühne unabhängig vom System,
   tiefe Schatten, leuchtender Akzent. Hochwertig, „abends"; Unbounded ist eine
   geometrische Display mit Zirkel-Charakter statt der überbenutzten Space Grotesk.
   --------------------------------------------------------------------------- */
:root[data-preset="premium-dark"] {
  --hero-glow-pos: 50% -10%; --hero-glow-size: 80% 90%;
  --font-display: var(--stack-unbounded);
  --font-body:    var(--stack-hanken);
  --display-weight: 700;
  --bg: var(--n-950); --surface: var(--n-900); --surface-2: var(--n-800);
  --surface-3: var(--n-700);
  --border: color-mix(in srgb, var(--n-0) 12%, transparent);
  --border-strong: color-mix(in srgb, var(--n-0) 22%, transparent);
  --fg: var(--n-50); --fg-muted: var(--n-300); --fg-subtle: var(--n-400);
  --accent-100: color-mix(in srgb, var(--accent) 24%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.4);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.5);
  --shadow-md: 0 10px 26px -8px rgba(0,0,0,0.6);
  --shadow-lg: 0 28px 56px -14px rgba(0,0,0,0.66);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);
  --accent-strategy: vivid;
  color-scheme: dark;
  --neutral-tint: 6%;
  --hero-variant: full-bleed;
}

/* ---------------------------------------------------------------------------
   corporate — Source Serif (Display) / Work Sans (Body). Ruhig, kühl, geringe
   Radien, dezente Hairlines. Vertrauen, Beratung, B2B (Kanzlei, Finance).
   --------------------------------------------------------------------------- */
:root[data-preset="corporate"] {
  --hero-glow-pos: 100% 0%; --hero-glow-size: 45% 60%; --btn-radius: 6px;
  --font-display: var(--stack-source-serif);
  --font-body:    var(--stack-work-sans);
  --display-weight: 600;
  --display-tracking: -0.005em;
  --radius-sm: 4px; --radius-md: 7px; --radius-lg: 10px; --radius-xl: 14px;
  --surface-2: var(--n-25);
  --accent-strategy: muted;
  --card-shadow: var(--shadow-xs);
  --card-shadow-hover: var(--shadow-sm);
  --card-border: var(--hairline-strong);
  --neutral-tint: 2%;
  --section-pad: clamp(var(--space-xl), 7vw, var(--space-2xl));
  --hero-variant: split-right;
}

/* ---------------------------------------------------------------------------
   luxe-serif — Playfair Display / Source Serif. Helle, edle Bühne, viel Luft,
   feine Hairlines, fast monochrome Neutrale. Schmuck, Beauty, Fine Dining.
   --------------------------------------------------------------------------- */
:root[data-preset="luxe-serif"] {
  --hero-glow-pos: 50% 0%; --hero-glow-size: 35% 50%; --btn-radius: 2px;
  --font-display: var(--stack-playfair);
  --font-body:    var(--stack-source-serif);
  --display-weight: 700;
  --display-tracking: 0;
  --n-0: #fffefb; --n-25: #fcfbf6; --n-50: #f8f6ef; --n-100: #efece2;
  --n-200: #e4e0d2;
  --radius-sm: 1px; --radius-md: 2px; --radius-lg: 4px; --radius-xl: 6px;
  --radius-full: 9999px;
  --tracking-tight: -0.005em;
  --accent-strategy: jewel;
  --card-shadow: none;
  --card-shadow-hover: var(--shadow-sm);
  --card-border: var(--hairline);
  --elevation-hero: none;
  --section-pad: clamp(var(--space-2xl), 10vw, var(--space-3xl));
  --neutral-tint: 2%;
  --hero-variant: full-bleed;
}

/* ---------------------------------------------------------------------------
   tech-forward — Hanken Grotesk (Display+Body, monoton). Präzise, sachlich,
   knappe Radien, leichte Akzent-Tönung in den Flächen, klare Schatten.
   SaaS, Agentur, IT; Hanken Grotesk statt der überbenutzten Space Grotesk.
   --------------------------------------------------------------------------- */
:root[data-preset="tech-forward"] {
  --hero-glow-pos: 100% 100%; --hero-glow-size: 55% 65%; --btn-radius: 8px;
  --font-display: var(--stack-hanken);
  --font-body:    var(--stack-hanken);
  --display-weight: 700;             /* Hanken Grotesk laedt nur 400/700 -- kein 600-Schnitt */
  --display-tracking: -0.02em;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px;
  --accent-strategy: vivid;
  --card-shadow: var(--shadow-xs);
  --card-shadow-hover: var(--shadow-md);
  --neutral-tint: 5%;
  --section-pad: clamp(var(--space-xl), 8vw, var(--space-3xl));
  --hero-variant: asymmetric;
}

/* ---------------------------------------------------------------------------
   organic — Fraunces / Work Sans. Erdige, getönte Neutrale, sehr runde Formen,
   weiche Schatten, gedämpfter Akzent. Natur, Garten, Bio, Wellness. Fraunces
   steht auf der Überbenutzt-Liste (Stufe C) -- bewusst nur HIER belassen (1 von
   14 Presets statt vorher 3), weil die warme Charakter-Serif zu dieser einen
   Stimmung wirklich passt. warm/studio-sage wurden auf andere Faces umgestellt.
   --------------------------------------------------------------------------- */
:root[data-preset="organic"] {
  --hero-glow-pos: 20% 100%; --hero-glow-size: 75% 85%;
  --font-display: var(--stack-fraunces);
  --font-body:    var(--stack-work-sans);
  --display-weight: 600;
  --n-0: #fdfcf8; --n-25: #f9f8f1; --n-50: #f3f2e8; --n-100: #e8e7d6;
  --n-200: #dadabf; --n-300: #c2c2a0;
  --radius-sm: 14px; --radius-md: 22px; --radius-lg: 30px; --radius-xl: 40px;
  --accent-strategy: muted;
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-md);
  --neutral-tint: 8%;
  --section-pad: clamp(var(--space-xl), 8vw, var(--space-3xl));
  --hero-variant: split-left;
}

/* ---------------------------------------------------------------------------
   minimalist — Karla / Karla, reduziert: nahezu keine Schatten, scharfe
   Radien, viel Weißraum, monochromer Akzent-Einsatz. Architektur, Studio, Portfolio.
   Eine leise, humanistische Grotesk statt des Inter-Reflexes -- Größe statt Gewicht
   trägt die Hierarchie (nur Weight 400 geladen).
   --------------------------------------------------------------------------- */
:root[data-preset="minimalist"] {
  --hero-glow-size: 0% 0%; --btn-radius: 0px;
  --font-display: var(--stack-karla);
  --font-body:    var(--stack-karla);
  --display-weight: var(--weight-normal);  /* Karla laedt nur 400 -- kein Fake-Bold */
  --display-tracking: -0.03em;
  --radius-sm: 0px; --radius-md: 0px; --radius-lg: 2px; --radius-xl: 2px;
  --tracking-tight: -0.035em;
  --accent-strategy: mono;
  --card-shadow: none;
  --card-shadow-hover: none;
  --card-border: var(--hairline);
  --elevation-hero: none;
  --section-pad: clamp(var(--space-2xl), 9vw, var(--space-3xl));
  --neutral-tint: 0%;
  --hero-variant: asymmetric;
}

/* ---------------------------------------------------------------------------
   warm-editorial — Playfair Display / Source Serif. Warmes Creme-Magazin: kräftiger
   Typo-Kontrast, flache, gedruckte Anmutung, vivid-warmer Akzent. Destillat aus
   godaylight. Gastro, Handwerk-Premium, Editorial-Marken. Serif/Serif-Paar
   unterscheidet den Look bewusst von "editorial" (dort: Playfair/Literata).
   --------------------------------------------------------------------------- */
:root[data-preset="warm-editorial"] {
  --hero-glow-pos: 85% 5%; --hero-glow-size: 55% 65%; --btn-radius: 4px;
  --font-display: var(--stack-playfair);
  --font-body:    var(--stack-source-serif);
  --display-weight: 700;
  --display-tracking: -0.01em;
  --n-0: #fffdf8; --n-25: #fdf9f0; --n-50: #faf3e6; --n-100: #f2e7d3;
  --n-200: #e8d8bd; --n-300: #d4bd97;
  --radius-sm: 3px; --radius-md: 6px; --radius-lg: 12px; --radius-xl: 18px;
  --tracking-tight: -0.02em;
  --accent-strategy: vivid;
  --card-shadow: var(--shadow-xs);
  --card-shadow-hover: var(--shadow-md);
  --card-border: var(--hairline);
  --neutral-tint: 3%;
  --section-pad: clamp(var(--space-2xl), 9vw, var(--space-3xl));
  --hero-variant: full-bleed;
}

/* ---------------------------------------------------------------------------
   studio-sage — Literata / Bitter. Warme Stein-/Salbei-Neutrale, gedämpfter Akzent,
   viel Luft, feine Hairlines. High-craft Studio/Agentur/Beratung. Destillat aus
   dobre.agency. Zwei ruhige Serifen statt Fraunces (das bereits "organic" trägt).
   --------------------------------------------------------------------------- */
:root[data-preset="studio-sage"] {
  --hero-glow-pos: 10% 15%; --hero-glow-size: 60% 70%; --btn-radius: 6px;
  --font-display: var(--stack-literata);
  --font-body:    var(--stack-bitter);
  --display-weight: var(--weight-normal);  /* Literata laedt nur 400 -- kein Fake-Bold */
  --display-tracking: -0.01em;
  --n-0: #fbfcf7; --n-25: #f6f8ef; --n-50: #eef1e6; --n-100: #e2e6d6;
  --n-200: #cfd4c2; --n-300: #aab09a;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px;
  --accent-strategy: muted;
  --card-shadow: none;
  --card-shadow-hover: var(--shadow-sm);
  --card-border: var(--hairline-strong);
  --neutral-tint: 4%;
  --section-pad: clamp(var(--space-2xl), 9vw, var(--space-3xl));
  --hero-variant: split-left;
}

/* ---------------------------------------------------------------------------
   cinematic-dark — Big Shoulders Display / Hanken Grotesk. Tiefe Near-Black-Bühne
   (systemunabhängig), EIN leuchtender Akzent mit Bloom-Glow als Signatur.
   Premium/Motorsport/Studio. OPT-IN (nicht Hell-Default). Destillat aus
   acmotorsport/trionn. Die kondensierte Display-Grotesk liest sich wie ein
   Filmplakat-Titel -- passender als die überbenutzte Space Grotesk.
   --------------------------------------------------------------------------- */
:root[data-preset="cinematic-dark"] {
  --hero-glow-pos: 50% 0%; --hero-glow-size: 90% 80%;
  --font-display: var(--stack-big-shoulders);
  --font-body:    var(--stack-hanken);
  --display-weight: 700;             /* Big Shoulders Display laedt nur 700 */
  --display-tracking: -0.02em;
  --bg: #05070d; --surface: #0b0f17; --surface-2: #121826; --surface-3: #1b2230;
  --border: color-mix(in srgb, var(--n-0) 12%, transparent);
  --border-strong: color-mix(in srgb, var(--n-0) 22%, transparent);
  --fg: var(--n-50); --fg-muted: var(--n-300); --fg-subtle: var(--n-400);
  --accent-100: color-mix(in srgb, var(--accent) 24%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 18%, transparent);
  --accent-600: color-mix(in srgb, var(--accent) 60%, #fff);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.6);
  --shadow-md: 0 12px 30px -8px rgba(0,0,0,0.7);
  --shadow-lg: 0 30px 60px -14px rgba(0,0,0,0.75);
  /* Bloom-Glow als Signatur: kräftiger Akzent-Schein statt neutraler Schatten */
  --shadow-accent: 0 0 0 1px var(--accent-ring), 0 10px 44px -6px var(--accent);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);
  --accent-strategy: vivid;
  color-scheme: dark;
  --neutral-tint: 6%;
  --hero-variant: full-bleed;
}

/* ---------------------------------------------------------------------------
   glass-product — Unbounded / Karla. Dunkle Bühne mit Glas-Karten
   (backdrop-filter), für Produkt-/App-Showcases. OPT-IN. Destillat aus dock.cool.
   Die Glas-Optik der Karten liegt preset-gescopt in base.css. Geometrische Display
   statt der überbenutzten Space Grotesk (teilt sich Unbounded mit premium-dark --
   beide sind bewusst "tech/premium"-Presets).
   --------------------------------------------------------------------------- */
:root[data-preset="glass-product"] {
  --hero-glow-pos: 70% 120%; --hero-glow-size: 85% 90%;
  --font-display: var(--stack-unbounded);
  --font-body:    var(--stack-karla);
  --display-weight: 700;             /* Unbounded laedt nur 700 */
  --bg: #0a0c12; --surface: #11141d; --surface-2: #161a25; --surface-3: #1e2330;
  --border: color-mix(in srgb, var(--n-0) 14%, transparent);
  --border-strong: color-mix(in srgb, var(--n-0) 24%, transparent);
  --fg: var(--n-50); --fg-muted: var(--n-300); --fg-subtle: var(--n-400);
  --accent-100: color-mix(in srgb, var(--accent) 24%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-600: color-mix(in srgb, var(--accent) 60%, #fff);
  --shadow-xs: 0 1px 2px rgba(0,0,0,0.5);
  --shadow-sm: 0 2px 8px rgba(0,0,0,0.55);
  --shadow-md: 0 14px 34px -10px rgba(0,0,0,0.65);
  --shadow-lg: 0 30px 60px -16px rgba(0,0,0,0.7);
  --card-shadow: var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);
  --radius-sm: 8px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 26px;
  --accent-strategy: vivid;
  color-scheme: dark;
  --neutral-tint: 6%;
  --hero-variant: full-bleed;
}

/* ---------------------------------------------------------------------------
   etched-dark-mono — Inter (ultra-dünn, Weight 200) auf reinem Schwarz. EIN
   Akzent, flach (keine Schatten), pill-Radien. "In Licht geätzte" Display-Headlines.
   OPT-IN, sehr puristisch (Studio/Portfolio/Mode). Destillat aus refero/Dala.
   Bewusst bei Inter belassen (Stufe C): der Look hängt am eigens gehärteten
   ultra-dünnen inter-200.woff2-Schnitt, den keine der neuen Faces besitzt.
   --------------------------------------------------------------------------- */
:root[data-preset="etched-dark-mono"] {
  --hero-glow-size: 0% 0%;
  --font-display: var(--stack-inter);
  --font-body:    var(--stack-inter);
  --display-weight: 200;            /* ultra-dünn — nur für große Display-Headings */
  --display-tracking: -0.04em;
  --bg: #000000; --surface: #0a0a0c; --surface-2: #101013; --surface-3: #17171b;
  --border: color-mix(in srgb, var(--n-0) 12%, transparent);
  --border-strong: color-mix(in srgb, var(--n-0) 22%, transparent);
  --fg: #ffffff; --fg-muted: var(--n-300); --fg-subtle: var(--n-400);
  --accent-100: color-mix(in srgb, var(--accent) 22%, #000);
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-600: color-mix(in srgb, var(--accent) 60%, #fff);
  --radius-sm: 6px; --radius-md: 12px; --radius-lg: 18px; --radius-xl: 24px;
  --tracking-tight: -0.005em;       /* Body NICHT eng (Lesbarkeit auf Schwarz) */
  --accent-strategy: mono;
  --card-shadow: none;
  --card-shadow-hover: none;
  --card-border: var(--hairline);
  --elevation-hero: none;
  --section-pad: clamp(var(--space-2xl), 10vw, var(--space-3xl));
  color-scheme: dark;
  --neutral-tint: 0%;
  --hero-variant: asymmetric;
}

/* ============================================================================
   Neutral-Tönung anwenden — jedes Preset gibt --neutral-tint (% Akzent) vor;
   die getönten Flächen leiten sich daraus ab. Bei 0% bleibt alles rein neutral.
   Greift nur im Light-Mode (Dark/premium-dark setzen Flächen explizit).
   ========================================================================== */
:root:not([data-theme="dark"]):not([data-preset="premium-dark"]):not([data-preset="cinematic-dark"]):not([data-preset="glass-product"]):not([data-preset="etched-dark-mono"]) {
  --surface-2: color-mix(in srgb, var(--accent) var(--neutral-tint), var(--n-50));
  --surface-3: color-mix(in srgb, var(--accent) var(--neutral-tint), var(--n-100));
}

/* Dunkle Bühnen brauchen ein dezenteres Innen-Highlight (sonst „milchige" Kante). */
:root[data-theme="dark"],
:root[data-preset="premium-dark"],
:root[data-preset="cinematic-dark"],
:root[data-preset="glass-product"],
:root[data-preset="etched-dark-mono"] {
  --shadow-inset: inset 0 1px 0 color-mix(in srgb, #fff 8%, transparent);
  --surface-soft: color-mix(in srgb, var(--accent) 8%, var(--surface-2));
}