/*
================================================================
  MANIFEST – css/tokens.css
  ┌──────────────────────┬─────────────────────────────────────────────────────────┐
  │ Block-ID             │ Beschreibung                                            │
  ├──────────────────────┼─────────────────────────────────────────────────────────┤
  │ primitives           │ Rohwerte: Farben, Spacing, Typo, Radius, Motion         │
  │ theme-default        │ Semantische Tokens: Dunkel-Minimal-Theme (Default)      │
  │ theme-default-light  │ Heller Modus des Default-Themes (data-mode="light")     │
  │ theme-fitness-shared │ Kunden-Theme Fitness: Marken-DNA (beide Modi)           │
  │ theme-fitness-dark   │ Kunden-Theme Fitness: dunkler Modus (Marken-Default)    │
  │ theme-fitness-light  │ Kunden-Theme Fitness: heller Modus                      │
  │ theme-jaeck-shared   │ jaeckmusic: Marken-DNA – weiche Radien (beide Modi)     │
  │ theme-jaeck-dark     │ jaeckmusic dunkel: Tiefschwarz + Champagner-Silber      │
  │ theme-jaeck-light    │ jaeckmusic hell: Off-White + Karamell-Braun             │
  │ theme-template       │ Leeres Gerüst für neue Kunden                           │
  └──────────────────────┴─────────────────────────────────────────────────────────┘
  Modus-Logik: data-mode="light" am <html> schaltet hell (setzt mode-init
  im <head> bzw. mode.js). Ohne Attribut gilt dunkel. Marken-Themes via
  data-theme="…" am <html>; Light-Blöcke gewinnen durch Doppel-Attribut-
  Selektor html[data-mode="light"][data-theme="…"].
================================================================
*/

/* ### BLOCK: primitives ### */
:root {
  /* Farb-Palette */
  --color-white:        #ffffff;
  --color-black:        #000000;

  --color-gray-50:      #fafafa;
  --color-gray-100:     #f4f4f5;
  --color-gray-200:     #e4e4e7;
  --color-gray-300:     #d4d4d8;
  --color-gray-400:     #a1a1aa;
  --color-gray-500:     #71717a;
  --color-gray-600:     #52525b;
  --color-gray-700:     #3f3f46;
  --color-gray-800:     #27272a;
  --color-gray-900:     #18181b;
  --color-gray-950:     #09090b;

  --color-blue-400:     #60a5fa;
  --color-blue-500:     #3b82f6;
  --color-blue-600:     #2563eb;

  --color-green-400:    #4ade80;
  --color-green-600:    #16a34a;
  --color-green-900:    #14532d;
  --color-green-950:    #052e16;

  --color-red-400:      #f87171;
  --color-red-600:      #dc2626;
  --color-red-950:      #450a0a;

  --color-amber-400:    #fbbf24;
  --color-amber-950:    #451a03;

  /* Spacing */
  --space-1:   0.25rem;
  --space-2:   0.5rem;
  --space-3:   0.75rem;
  --space-4:   1rem;
  --space-5:   1.25rem;
  --space-6:   1.5rem;
  --space-8:   2rem;
  --space-10:  2.5rem;
  --space-12:  3rem;
  --space-16:  4rem;
  --space-20:  5rem;
  --space-24:  6rem;
  --space-32:  8rem;

  /* Typografie */
  --text-xs:   0.75rem;
  --text-sm:   0.875rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --text-3xl:  1.875rem;
  --text-4xl:  2.25rem;
  --text-5xl:  3rem;
  --text-6xl:  3.75rem;
  --text-7xl:  4.5rem;

  --weight-normal: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold:   700;

  --leading-tight:  1.15;
  --leading-snug:   1.35;
  --leading-normal: 1.6;
  --leading-loose:  1.8;

  --tracking-tight:  -0.03em;
  --tracking-normal:  0em;
  --tracking-wide:    0.08em;
  --tracking-widest:  0.15em;

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

  /* Motion */
  --ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:    cubic-bezier(0, 0, 0.2, 1);
  --dur-fast:    120ms;
  --dur-normal:  250ms;
  --dur-slow:    400ms;

  /* Schatten */
  --shadow-sm:  0 1px 3px rgb(0 0 0 / 0.3);
  --shadow-md:  0 4px 12px rgb(0 0 0 / 0.4);
  --shadow-lg:  0 8px 32px rgb(0 0 0 / 0.5);
  --shadow-glow: 0 0 40px rgb(99 102 241 / 0.15);
}
/* ### /BLOCK: primitives ### */


/* ### BLOCK: theme-default ### */
/*
  Dunkel & Minimalistisch
  ────────────────────────────────────────────────
  Kontrast-Paare (nachgerechnet, WCAG 2.2):
  --c-text-primary   auf --c-bg-base    → 14.2:1 (AAA)
  --c-text-secondary auf --c-bg-base    →  7.0:1 (AAA)
  --c-text-secondary auf --c-bg-inset   →  5.6:1 (AA)
  --c-text-muted     auf --c-bg-base    →  5.8:1 (AA)
  --c-text-muted     auf --c-bg-inset   →  4.7:1 (AA)  ← schlechtester Fall
  --c-text-on-accent auf --c-accent     →  5.0:1 (AA)
  --c-accent-text    auf --c-bg-base    →  6.5:1 (AA)
  --c-focus          gegen --c-bg-base  →  6.5:1 (≥3:1 ✓)
*/
:root {

  /* Hintergründe */
  --c-bg-base:      #0c0c0e;
  --c-bg-surface:   #141416;
  --c-bg-elevated:  #1c1c1f;
  --c-bg-inset:     #232326;
  --c-bg-overlay:   rgb(0 0 0 / 0.7);

  /* Texte */
  --c-text-primary:   #f0f0f2;
  --c-text-secondary: #9a9aa5;
  --c-text-muted:     #8b8b96;
  --c-text-on-accent: #ffffff;
  --c-text-link:      #818cf8;
  --c-text-link-hover:#a5b4fc;

  /* Brand */
  --c-accent:         #5b5ee9;  /* Indigo, minimal dunkler für 4.5:1 mit Weiß */
  --c-accent-hover:   #4f52e0;
  --c-accent-subtle:  rgb(91 94 233 / 0.12);
  --c-accent-text:    #818cf8;  /* Indigo als TEXT auf dunklem Grund (Eyebrows etc.) */
  --c-accent-2:       #a855f7;  /* Zweit-Akzent für Verläufe (Headline, Multistep) */

  /* Status */
  --c-success:        var(--color-green-400);
  --c-success-bg:     var(--color-green-950);
  --c-error:          var(--color-red-400);
  --c-error-bg:       var(--color-red-950);
  --c-warning:        var(--color-amber-400);
  --c-warning-bg:     var(--color-amber-950);

  /* Rahmen */
  --c-border-subtle:  rgb(255 255 255 / 0.06);
  --c-border-default: rgb(255 255 255 / 0.10);
  --c-border-strong:  rgb(255 255 255 / 0.20);

  /* Fokus */
  --c-focus:          #818cf8;

  /* Typografie */
  --font-sans:    "Inter", system-ui, -apple-system, sans-serif;
  --font-heading: var(--font-sans);
  --font-mono:    "Fira Code", ui-monospace, monospace;

  --font-size-body:    var(--text-base);
  --font-size-small:   var(--text-sm);
  --font-size-h1:      clamp(var(--text-4xl), 6vw, var(--text-7xl));
  --font-size-h2:      clamp(var(--text-3xl), 4vw, var(--text-5xl));
  --font-size-h3:      clamp(var(--text-2xl), 3vw, var(--text-4xl));
  --font-size-h4:      clamp(var(--text-xl),  2vw, var(--text-3xl));

  --font-weight-heading: var(--weight-bold);
  --line-height-body:    var(--leading-normal);
  --line-height-heading: var(--leading-tight);

  /* Spacing semantisch */
  --space-xs:      var(--space-2);
  --space-sm:      var(--space-4);
  --space-md:      var(--space-6);
  --space-lg:      var(--space-10);
  --space-xl:      var(--space-16);
  --space-section: clamp(var(--space-16), 10vw, var(--space-32));

  /* Layout */
  --container-max:     1200px;
  --container-narrow:  680px;
  --container-pad:     var(--space-5);
  --nav-height:        68px;

  /* Komponenten-Radius
     ⚠️ Hier aendern, NICHT in components.css. Diese vier Tokens gelten
     projektweit - genau das ist ihr Zweck. Direkte Werte (999px, 12px)
     an Einzelstellen laufen daran vorbei und lassen das Bild zerfallen.
     card auf lg (12px) statt xl (16px) gesenkt (05.08.): bestimmter,
     ohne hart zu wirken. */
  --radius-btn:    var(--radius-md);
  --radius-card:   var(--radius-xl);
  --radius-input:  var(--radius-md);    /*  8px */
  --radius-badge:  var(--radius-full);

  /* Hero Gradient */
  --hero-gradient: radial-gradient(
      ellipse 80% 60% at 50% -10%,
      rgb(91 94 233 / 0.25) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 50% 40% at 85% 50%,
      rgb(139 92 246 / 0.12) 0%,
      transparent 60%
    ),
    linear-gradient(180deg, #0c0c0e 0%, #0c0c0e 100%);
}
/* ### /BLOCK: theme-default ### */

/* ### BLOCK: theme-default-light ### */
/*
  Heller Modus – Studio Forma Default
  Aktiv bei <html data-mode="light">. Ohne data-mode gilt Dunkel (:root).
  ────────────────────────────────────────────────
  Kontrast-Paare (nachgerechnet, WCAG 2.2, schlechtester Fall bg-inset):
  --c-text-primary   auf --c-bg-inset   → 13.4:1 (AAA)
  --c-text-secondary auf --c-bg-inset   →  7.1:1 (AAA)
  --c-text-muted     auf --c-bg-inset   →  5.0:1 (AA)
  --c-text-on-accent auf --c-accent     →  5.0:1 (AA)
  --c-accent-text    auf --c-bg-base    →  7.9:1 (AAA)
  --c-focus          gegen --c-bg-base  →  5.9:1 (≥3:1 ✓)
*/
html[data-mode="light"] {

  /* Hintergründe (hell: base hellste Fläche → inset dunkelste) */
  --c-bg-base:      #fafafa;
  --c-bg-surface:   #ffffff;
  --c-bg-elevated:  #f4f4f5;
  --c-bg-inset:     #ececee;
  --c-bg-overlay:   rgb(20 20 22 / 0.55);

  /* Texte */
  --c-text-primary:   #17171a;
  --c-text-secondary: #494952;
  --c-text-muted:     #5d5d67;
  --c-text-on-accent: #ffffff;
  --c-text-link:      #4338ca;
  --c-text-link-hover:#3730a3;

  /* Brand (Accent-Flächen identisch zu Dunkel – Weiß trägt auf beiden) */
  --c-accent:         #5b5ee9;
  --c-accent-hover:   #4f52e0;
  --c-accent-subtle:  rgb(91 94 233 / 0.10);
  --c-accent-text:    #4338ca;   /* Indigo-TEXT: hell braucht DUNKLES Indigo */
  --c-accent-2:       #7c3aed;  /* Zweit-Akzent, dunkler für hellen Grund */

  /* Status (helle Flächen, dunkle Schrift) */
  --c-success:        #166534;
  --c-success-bg:     #dcfce7;
  --c-error:          #b91c1c;
  --c-error-bg:       #fee2e2;
  --c-warning:        #854d0e;
  --c-warning-bg:     #fef3c7;

  /* Rahmen (dunkle Transparenzen statt weißer) */
  --c-border-subtle:  rgb(0 0 0 / 0.08);
  --c-border-default: rgb(0 0 0 / 0.13);
  --c-border-strong:  rgb(0 0 0 / 0.25);

  /* Fokus */
  --c-focus:          #4f46e5;

  /* Schatten (zarter – die dunklen Defaults erschlagen helle Flächen) */
  --shadow-sm:  0 1px 3px rgb(0 0 0 / 0.08);
  --shadow-md:  0 4px 12px rgb(0 0 0 / 0.10);
  --shadow-lg:  0 8px 32px rgb(0 0 0 / 0.14);
  --shadow-glow: 0 0 40px rgb(91 94 233 / 0.18);

  /* Hero Gradient – heller Grund, zarterer Indigo-Schleier */
  --hero-gradient: radial-gradient(
      ellipse 80% 60% at 50% -10%,
      rgb(91 94 233 / 0.14) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 50% 40% at 85% 50%,
      rgb(139 92 246 / 0.08) 0%,
      transparent 60%
    ),
    linear-gradient(180deg, #fafafa 0%, #fafafa 100%);
}
/* ### /BLOCK: theme-default-light ### */

/* ### BLOCK: theme-fitness-shared ### */
/*
  Fitness – Marken-DNA (gilt in BEIDEN Modi)
  Blau als Akzent auf neutralen Flächen, Cyan als Verlaufs-Partner.
  Eckigere Radien: sportlich-direkt. Headings kräftiger (800).
*/
[data-theme="fitness"] {
  --font-weight-heading: 800;

  --radius-btn:    var(--radius-sm);
  --radius-card:   var(--radius-lg);
  --radius-input:  var(--radius-sm);
}
/* ### /BLOCK: theme-fitness-shared ### */

/* ### BLOCK: theme-fitness-dark ### */
/*
  Fitness – Dunkler Modus (Default der Marke)
  ────────────────────────────────────────────────
  Kontrast-Paare (nachgerechnet, WCAG 2.2, schlechtester Fall bg-inset):
  --c-text-primary   auf --c-bg-inset   → 12.5:1 (AAA)
  --c-text-secondary auf --c-bg-inset   →  6.6:1 (AA)
  --c-text-muted     auf --c-bg-inset   →  4.6:1 (AA)
  --c-text-on-accent auf --c-accent     →  4.6:1 (AA)
  --c-accent-text    auf --c-bg-base    →  6.7:1 (AA)
  --c-focus          gegen --c-bg-base  →  6.7:1 (≥3:1 ✓)
*/
[data-theme="fitness"] {

  /* Hintergründe: neutral-kühles Anthrazit, minimaler Blaustich */
  --c-bg-base:      #0b0d10;
  --c-bg-surface:   #12151a;
  --c-bg-elevated:  #1a1e24;
  --c-bg-inset:     #22262d;
  --c-bg-overlay:   rgb(0 0 0 / 0.7);

  /* Texte */
  --c-text-primary:   #eef1f4;
  --c-text-secondary: #97a0ab;
  --c-text-muted:     #8a939e;
  --c-text-on-accent: #ffffff;
  --c-text-link:      #60a5fa;
  --c-text-link-hover:#93c5fd;

  /* Brand: sattes Blau (Fläche) + helles Blau (Text) + Cyan (Verlauf) */
  --c-accent:         #2563eb;
  --c-accent-hover:   #1d4ed8;
  --c-accent-subtle:  rgb(37 99 235 / 0.12);
  --c-accent-text:    #60a5fa;
  --c-accent-2:       #06b6d4;

  /* Status */
  --c-success:        var(--color-green-400);
  --c-success-bg:     var(--color-green-950);
  --c-error:          var(--color-red-400);
  --c-error-bg:       var(--color-red-950);
  --c-warning:        var(--color-amber-400);
  --c-warning-bg:     var(--color-amber-950);

  /* Rahmen */
  --c-border-subtle:  rgb(255 255 255 / 0.06);
  --c-border-default: rgb(255 255 255 / 0.10);
  --c-border-strong:  rgb(255 255 255 / 0.20);

  /* Fokus */
  --c-focus:          #60a5fa;

  /* Schatten */
  --shadow-glow: 0 0 40px rgb(37 99 235 / 0.18);

  /* Hero Gradient – blaues Licht von oben, Cyan-Schimmer seitlich */
  --hero-gradient: radial-gradient(
      ellipse 80% 60% at 50% -10%,
      rgb(37 99 235 / 0.22) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 50% 40% at 85% 50%,
      rgb(6 182 212 / 0.10) 0%,
      transparent 60%
    ),
    linear-gradient(180deg, #0b0d10 0%, #0b0d10 100%);
}
/* ### /BLOCK: theme-fitness-dark ### */

/* ### BLOCK: theme-fitness-light ### */
/*
  Fitness – Heller Modus
  ────────────────────────────────────────────────
  Kontrast-Paare (nachgerechnet, WCAG 2.2, schlechtester Fall bg-inset):
  --c-text-primary   auf --c-bg-inset   → 13.4:1 (AAA)
  --c-text-secondary auf --c-bg-inset   →  7.0:1 (AAA)
  --c-text-muted     auf --c-bg-inset   →  5.0:1 (AA)
  --c-text-on-accent auf --c-accent     →  5.2:1 (AA)
  --c-accent-text    auf --c-bg-base    →  7.2:1 (AAA)
  --c-focus          gegen --c-bg-base  →  5.2:1 (≥3:1 ✓)
*/
html[data-mode="light"][data-theme="fitness"] {

  /* Hintergründe */
  --c-bg-base:      #fafbfc;
  --c-bg-surface:   #ffffff;
  --c-bg-elevated:  #f2f4f6;
  --c-bg-inset:     #e9edf0;
  --c-bg-overlay:   rgb(15 20 25 / 0.55);

  /* Texte */
  --c-text-primary:   #14181d;
  --c-text-secondary: #47505a;
  --c-text-muted:     #5a636d;
  --c-text-on-accent: #ffffff;
  --c-text-link:      #1d4ed8;
  --c-text-link-hover:#1e40af;

  /* Brand */
  --c-accent:         #2563eb;
  --c-accent-hover:   #1d4ed8;
  --c-accent-subtle:  rgb(37 99 235 / 0.10);
  --c-accent-text:    #1d4ed8;
  --c-accent-2:       #0e7490;   /* Cyan, dunkler für hellen Grund */

  /* Status */
  --c-success:        #166534;
  --c-success-bg:     #dcfce7;
  --c-error:          #b91c1c;
  --c-error-bg:       #fee2e2;
  --c-warning:        #854d0e;
  --c-warning-bg:     #fef3c7;

  /* Rahmen */
  --c-border-subtle:  rgb(0 0 0 / 0.08);
  --c-border-default: rgb(0 0 0 / 0.13);
  --c-border-strong:  rgb(0 0 0 / 0.25);

  /* Fokus */
  --c-focus:          #2563eb;

  /* Schatten */
  --shadow-sm:  0 1px 3px rgb(0 0 0 / 0.08);
  --shadow-md:  0 4px 12px rgb(0 0 0 / 0.10);
  --shadow-lg:  0 8px 32px rgb(0 0 0 / 0.14);
  --shadow-glow: 0 0 40px rgb(37 99 235 / 0.15);

  /* Hero Gradient */
  --hero-gradient: radial-gradient(
      ellipse 80% 60% at 50% -10%,
      rgb(37 99 235 / 0.12) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 50% 40% at 85% 50%,
      rgb(6 182 212 / 0.08) 0%,
      transparent 60%
    ),
    linear-gradient(180deg, #fafbfc 0%, #fafbfc 100%);
}
/* ### /BLOCK: theme-fitness-light ### */

/* ### BLOCK: theme-jaeck-shared ### */
/*
  jaeckmusic – Marken-DNA (gilt in BEIDEN Modi)
  Reduziert, warm, edel. Klare, knappe Radien. Charakter kommt über Farbe + Typo.
  Typo-Rollen: Lora = Headings/Name (edel), Caveat = Lyrics (Handschrift),
  Inter (--font-sans, geerbt) = Fließtext (ruhig lesbar).
*/
[data-theme="jaeck"] {
  /* ⚠️ DAS sind die Werte, die auf jaeckmusic.com wirken. Jede Seite
     setzt data-theme="jaeck", dieser Block schlaegt damit die Grundwerte
     im :root-Block weiter oben. Wer dort aendert, aendert nichts.
     card auf md (8px) statt xl (16px) gesenkt (05.08.): schaerfer und
     einheitlich mit btn. Beide sind jetzt gleich - wer Karten und
     Knoepfe wieder unterscheiden will, aendert hier. */
  --radius-btn:    var(--radius-md);    /*  8px */
  --radius-card:   var(--radius-md);    /*  8px */
  --radius-input:  var(--radius-md);    /*  8px */

  /* x-Farbe auf IMMER dunklem Grund (Cover-Zoom, Galerie-Lightbox,
     Bild-Overlays). Dort gilt der Hell/Dunkel-Modus nicht - die Flaeche
     ist in beiden Modi schwarz. accent-text waere im Hellmodus dunkles
     Braun auf Schwarz. Eigener Token statt hartem #fff wie bisher. */
  --c-close-on-dark: #d9c9a3;

  /* Typografie */
  --font-heading:        "Lora", Georgia, "Times New Roman", serif;
  --font-hand:           "Caveat", "Segoe Script", cursive;
  --font-weight-heading: var(--weight-bold);
}
/* ### /BLOCK: theme-jaeck-shared ### */

/* ### BLOCK: theme-jaeck-dark ### */
/*
  jaeckmusic – Dunkler Modus (Marken-Default)
  Tiefschwarze Bühne, warmes Champagner-Silber ("Targaryen-Haar" mit
  Goldhauch) als Hauptakzent, Karamell-Braun als Glut im Verlauf.
  Grund ist #050505 statt reinem #000 (OLED-sauber, erlaubt Abstufungen).
  ────────────────────────────────────────────────
  Kontrast-Paare (nachgerechnet, WCAG 2.2, schlechtester Fall bg-inset):
  --c-text-primary   auf --c-bg-inset   → 14.8:1 (AAA)
  --c-text-secondary auf --c-bg-inset   →  7.2:1 (AAA)
  --c-text-muted     auf --c-bg-inset   →  5.9:1 (AA)
  --c-text-on-accent auf --c-accent     →  9.6:1 (AAA, DUNKLER Text auf Champagner)
  --c-accent-text    auf --c-bg-base    → 12.5:1 (AAA)
  --c-focus          gegen --c-bg-base  → 12.5:1 (≥3:1 ✓)
*/
[data-theme="jaeck"] {

  /* Hintergründe: Tiefschwarz, darüber kaum sichtbare warme Staffelung */
  --c-bg-base:      #050505;
  --c-bg-surface:   #141210;
  --c-bg-elevated:  #1c1a17;
  --c-bg-inset:     #232019;
  --c-bg-overlay:   rgb(0 0 0 / 0.75);

  /* Texte: warmes Champagner-Elfenbein statt kühlem Grau */
  --c-text-primary:   #f3ece0;
  --c-text-secondary: #b3a68f;
  --c-text-muted:     #a1957f;
  --c-text-on-accent: #1a1206;   /* DUNKEL auf Champagner – Weiß trüge nicht */
  --c-text-link:      #d9c9a3;
  --c-text-link-hover:#e8dcbe;

  /* Brand: Champagner-Silber (Fläche + Text) + Karamell-Braun (Verlauf) */
  --c-accent:         #c9ba8e;   /* Champagner-Fläche für Buttons */
  --c-accent-hover:   #d8cca4;   /* heller (dunkler würde Textkontrast kosten) */
  --c-accent-subtle:  rgb(201 186 142 / 0.12);
  --c-accent-text:    #d9c9a3;   /* Champagner als TEXT (Eyebrows, Links) */
  --c-accent-2:       #8a5a34;   /* Karamell-Braun, Glut im Verlauf */

  /* Status */
  --c-success:        var(--color-green-400);
  --c-success-bg:     var(--color-green-950);
  --c-error:          var(--color-red-400);
  --c-error-bg:       var(--color-red-950);
  --c-warning:        var(--color-amber-400);
  --c-warning-bg:     var(--color-amber-950);

  /* Rahmen: warm getönt statt rein weiß */
  --c-border-subtle:  rgb(243 236 224 / 0.07);
  --c-border-default: rgb(243 236 224 / 0.12);
  --c-border-strong:  rgb(243 236 224 / 0.22);

  /* Fokus */
  --c-focus:          #d9c9a3;

  /* Schatten */
  --shadow-glow: 0 0 40px rgb(201 186 142 / 0.14);

  /* Hero Gradient – Champagner-Licht von oben, Karamell-Glut seitlich */
  --hero-gradient: radial-gradient(
      ellipse 80% 60% at 50% -10%,
      rgb(201 186 142 / 0.14) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 50% 40% at 85% 50%,
      rgb(138 90 52 / 0.10) 0%,
      transparent 60%
    ),
    linear-gradient(180deg, #050505 0%, #050505 100%);
}
/* ### /BLOCK: theme-jaeck-dark ### */

/* ### BLOCK: theme-jaeck-light ### */
/*
  jaeckmusic – Heller Modus
  Cremiges Off-White wie Büttenpapier, dein Karamell-Braun als Akzent.
  Braun-FLÄCHE (#7f5230) trägt weißen Text; Braun-TEXT nutzt die dunklere
  Schwester (#6e4523), damit auch Feines sauber lesbar bleibt.
  ────────────────────────────────────────────────
  Kontrast-Paare (nachgerechnet, WCAG 2.2, schlechtester Fall bg-inset):
  --c-text-primary   auf --c-bg-inset   → 13.4:1 (AAA)
  --c-text-secondary auf --c-bg-inset   →  6.7:1 (AA)
  --c-text-muted     auf --c-bg-inset   →  5.2:1 (AA)
  --c-text-on-accent auf --c-accent     →  6.7:1 (AA, Weiß auf Braun-Fläche)
  --c-accent-text    auf --c-bg-base    →  7.7:1 (AAA)
  --c-focus          gegen --c-bg-base  →  6.2:1 (≥3:1 ✓)
*/
html[data-mode="light"][data-theme="jaeck"] {

  /* Hintergründe: warmes Creme statt klinischem Weiß */
  --c-bg-base:      #faf6f0;
  --c-bg-surface:   #fffdf9;
  --c-bg-elevated:  #f3ebdf;
  --c-bg-inset:     #ebe3d6;
  --c-bg-overlay:   rgb(36 26 16 / 0.55);

  /* Texte: dunkles Sepia statt Schwarz */
  --c-text-primary:   #241a10;
  --c-text-secondary: #584a37;
  --c-text-muted:     #6a5b45;
  --c-text-on-accent: #ffffff;   /* Weiß auf Braun-Fläche */
  --c-text-link:      #6e4523;
  --c-text-link-hover:#54341a;

  /* Brand: dein Karamell-Braun */
  --c-accent:         #7f5230;   /* Braun-Fläche für Buttons */
  --c-accent-hover:   #6e4523;
  --c-accent-subtle:  rgb(127 82 48 / 0.10);
  --c-accent-text:    #6e4523;   /* Braun-TEXT (dunklere Schwester) */
  --c-accent-2:       #96522e;   /* Kupfer-Braun für Verläufe */

  /* Status */
  --c-success:        #166534;
  --c-success-bg:     #e3f4e3;
  --c-error:          #b91c1c;
  --c-error-bg:       #fbe4e4;
  --c-warning:        #854d0e;
  --c-warning-bg:     #f9efd2;

  /* Rahmen: warme Sepia-Transparenzen */
  --c-border-subtle:  rgb(36 26 16 / 0.09);
  --c-border-default: rgb(36 26 16 / 0.14);
  --c-border-strong:  rgb(36 26 16 / 0.26);

  /* Fokus */
  --c-focus:          #7f5230;

  /* Schatten: warm getönt, zart */
  --shadow-sm:  0 1px 3px rgb(36 26 16 / 0.08);
  --shadow-md:  0 4px 12px rgb(36 26 16 / 0.10);
  --shadow-lg:  0 8px 32px rgb(36 26 16 / 0.14);
  --shadow-glow: 0 0 40px rgb(127 82 48 / 0.14);

  /* Hero Gradient */
  --hero-gradient: radial-gradient(
      ellipse 80% 60% at 50% -10%,
      rgb(127 82 48 / 0.12) 0%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 50% 40% at 85% 50%,
      rgb(150 82 46 / 0.08) 0%,
      transparent 60%
    ),
    linear-gradient(180deg, #faf6f0 0%, #faf6f0 100%);
}
/* ### /BLOCK: theme-jaeck-light ### */

/* ### BLOCK: theme-template ### */
/*
  ══════════════════════════════════════════════════
  KUNDEN-THEME – kopieren, umbenennen, ausfüllen
  ══════════════════════════════════════════════════

  KONTRAST-CHECKLISTE (WCAG 2.2 AA) – vor Abnahme prüfen:
  □ text-primary   ≥ 7:1   auf bg-base UND bg-inset (schlechtester Fall!)
  □ text-secondary ≥ 4.5:1 auf bg-base UND bg-inset
  □ text-muted     ≥ 4.5:1 auf ALLEN vier Hintergründen
  □ text-on-accent ≥ 4.5:1 auf accent
  □ accent-text    ≥ 4.5:1 auf bg-base (Eyebrows, Akzent-TEXT)
  □ focus          ≥ 3:1   gegen angrenzende Flächen
  MERKE: accent (Button-HINTERGRUND) und accent-text (TEXT auf
  dunklem/hellem Grund) sind ZWEI verschiedene Jobs – selten
  erfüllt EIN Farbwert beide. Im Zweifel: accent dunkler/satter,
  accent-text heller (dunkles Theme) bzw. dunkler (helles Theme).

[data-theme="KUNDENNAME"] {

  Hintergründe (Hierarchie: base → surface → elevated → inset)
  --c-bg-base:      ;
  --c-bg-surface:   ;
  --c-bg-elevated:  ;
  --c-bg-inset:     ;
  --c-bg-overlay:   ;   (rgba, z.B. rgb(0 0 0 / 0.7) – Lightbox-Backdrop)

  Texte
  --c-text-primary:   ;
  --c-text-secondary: ;
  --c-text-muted:     ;
  --c-text-on-accent: ;
  --c-text-link:      ;
  --c-text-link-hover:;

  Brand
  --c-accent:         ;   Button-/Flächen-Farbe
  --c-accent-hover:   ;
  --c-accent-subtle:  ;   (rgba, sehr transparent)
  --c-accent-text:    ;   Akzent als TEXT (Eyebrows etc.)

  Status (an Theme-Helligkeit anpassen! Default ist auf DUNKEL gebaut)
  --c-success:        ;
  --c-success-bg:     ;
  --c-error:          ;
  --c-error-bg:       ;
  --c-warning:        ;
  --c-warning-bg:     ;

  Rahmen
  --c-border-subtle:  ;
  --c-border-default: ;
  --c-border-strong:  ;

  Fokus
  --c-focus:          ;

  Typografie
  --font-sans:        ;
  --font-heading:     ;
  --font-weight-heading: ;

  Radius – Charakterentscheidung: eckig (0) ↔ rund (radius-full)
  --radius-btn:   ;
  --radius-card:  ;
  --radius-input: ;

  Hero-Gradient
  --hero-gradient: ;

  ANDOCKSTELLE: Kunden-spezifische Tokens
}
*/
/* ### /BLOCK: theme-template ### */