/*
  RockADEMY Design System

  Für einen späteren Farbwechsel müssen nur diese beiden Werte geändert werden:
  --ra-accent-dark  = Akzent auf dunklem Hintergrund
  --ra-accent-light = Akzent auf hellem Hintergrund

  Zwei Werte sind bewusst nötig, damit Grün beziehungsweise Gelb in beiden
  Modi ausreichend kontrastreich bleibt. WhatsApp ist eine separate Kanalfarbe.
*/
:root{
  /* Einzige zentrale Akzent-Einstellungen */
  --ra-accent-dark:#ffe000;
  --ra-brand-green:#9fbb78;
  --ra-accent-light:#4f7138;
  --ra-channel-whatsapp:#25d366;

  /* Dunkler Zustand */
  --ra-dark-bg:#171613;
  --ra-dark-bg-subtle:#12110f;
  --ra-dark-surface:#211f1a;
  --ra-dark-surface-strong:#2b2821;
  --ra-dark-text:#f6f1e6;
  --ra-dark-text-muted:#aaa398;
  --ra-dark-line:rgba(246,241,230,.14);
  --ra-dark-on-accent:#171613;

  /* Heller Zustand */
  --ra-light-bg:#fcfcfa;
  --ra-light-bg-subtle:#f3f5f0;
  --ra-light-surface:#ffffff;
  --ra-light-surface-strong:#e6ebdf;
  --ra-light-text:#1a1f17;
  --ra-light-text-muted:#596155;
  --ra-light-line:rgba(26,31,23,.16);
  --ra-light-on-accent:#ffffff;

  /* Typografie */
  --ra-font-display:'Anton',Impact,system-ui,sans-serif;
  --ra-font-body:'Archivo',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --ra-text-xs:.75rem;
  --ra-text-sm:.875rem;
  --ra-text-base:1rem;
  --ra-text-lead:clamp(1.125rem,2vw,1.5rem);
  --ra-display-sm:clamp(3rem,8vw,5.5rem);
  --ra-display-md:clamp(4rem,11vw,8rem);
  --ra-display-lg:clamp(5rem,15vw,12rem);
  --ra-line-tight:.92;
  --ra-line-body:1.55;

  /* Abstände: 4-Pixel-Grundraster */
  --ra-space-1:.25rem;
  --ra-space-2:.5rem;
  --ra-space-3:.75rem;
  --ra-space-4:1rem;
  --ra-space-5:1.25rem;
  --ra-space-6:1.5rem;
  --ra-space-8:2rem;
  --ra-space-10:2.5rem;
  --ra-space-12:3rem;
  --ra-space-16:4rem;
  --ra-space-20:5rem;
  --ra-space-24:6rem;
  --ra-space-32:8rem;

  /* Layout und Komponenten */
  --ra-layout-gutter:clamp(20px,5vw,72px);
  --ra-layout-gutter-mobile:20px;
  --ra-content-max:1440px;
  --ra-header-height-mobile:72px;
  --ra-control-height:48px;
  --ra-icon-control-size:44px;
  --ra-radius-small:8px;
  --ra-radius-medium:16px;
  --ra-radius-large:22px;
  --ra-radius-pill:999px;
  --ra-ease:cubic-bezier(.16,1,.3,1);

  /* Bestehende Namen bleiben als Übergangs-API erhalten. */
  --anton:var(--ra-font-display);
  --sans:var(--ra-font-body);
  --archivo:var(--ra-font-body);
  --pad:var(--ra-layout-gutter);
  --max:var(--ra-content-max);
  --ease:var(--ra-ease);
  --mobile-gutter:var(--ra-layout-gutter-mobile);
  --gap-s:var(--ra-space-5);
  --gap-m:var(--ra-space-10);
  --gap-l:var(--ra-space-20);
  --gap-xl:var(--ra-space-24);
  --gap-2xl:var(--ra-space-32);
}

html[data-theme="dark"]{
  --site-bg:var(--ra-dark-bg);
  --site-bg-2:var(--ra-dark-bg-subtle);
  --site-surface:var(--ra-dark-surface);
  --site-surface-2:var(--ra-dark-surface-strong);
  --site-ink:var(--ra-dark-text);
  --site-muted:var(--ra-dark-text-muted);
  --site-line:var(--ra-dark-line);
  --site-accent:var(--ra-accent-dark);
  --site-on-accent:var(--ra-dark-on-accent);
  color-scheme:dark;
}

html[data-theme="light"]{
  --site-bg:var(--ra-light-bg);
  --site-bg-2:var(--ra-light-bg-subtle);
  --site-surface:var(--ra-light-surface);
  --site-surface-2:var(--ra-light-surface-strong);
  --site-ink:var(--ra-light-text);
  --site-muted:var(--ra-light-text-muted);
  --site-line:var(--ra-light-line);
  --site-accent:var(--ra-accent-light);
  --site-on-accent:var(--ra-light-on-accent);
  color-scheme:light;
}

html{background:var(--site-bg)!important}

body{
  --bg:var(--site-bg);
  --bg-2:var(--site-bg-2);
  --paper:var(--site-bg);
  --paper-2:var(--site-bg-2);
  --sand:var(--site-surface);
  --surface:var(--site-surface);
  --surface-2:var(--site-surface-2);
  --ink:var(--site-ink);
  --muted:var(--site-muted);
  --line:var(--site-line);
  --line-soft:color-mix(in srgb,var(--site-line) 55%,transparent);
  --volt:var(--site-accent);
  --accent:var(--site-accent)!important;
  --flame:var(--site-accent);
  --volt-dark:var(--site-on-accent);
  background:var(--site-bg)!important;
  color:var(--site-ink);
  font-family:var(--ra-font-body);
  font-size:var(--ra-text-base);
  line-height:var(--ra-line-body);
}

button,input,select,textarea{font-family:var(--ra-font-body)}
h1,h2,h3,.anton{font-family:var(--ra-font-display);line-height:var(--ra-line-tight)}

/* Startseite: keine eigenständigen Sektionspaletten. */
html[data-theme] :is(.statement,.kurse,.coaches,.stats,.preise,.standorte,.about,.reviews,.early-start,.closing-new){
  --bg:var(--site-bg);
  --bg-2:var(--site-bg-2);
  --surface:var(--site-surface);
  --surface-2:var(--site-surface-2);
  --ink:var(--site-ink);
  --muted:var(--site-muted);
  --line:var(--site-line);
  --line-soft:color-mix(in srgb,var(--site-line) 55%,transparent);
  --volt:var(--site-accent);
  --flame:var(--site-accent);
  --volt-dark:var(--site-on-accent);
  color:var(--site-ink);
  background:var(--site-bg);
}

@media(max-width:860px){
  :root{
    --pad:var(--ra-layout-gutter-mobile)!important;
    --gap-l:var(--ra-space-12);
    --gap-xl:var(--ra-space-20);
    --gap-2xl:var(--ra-space-24);
  }
}

@media(max-width:360px){
  :root{--ra-layout-gutter-mobile:16px}
}

/* Text sweeps inherit the current theme, including an immediate theme switch. */
:root{--reveal-1:#ffe000;--reveal-2:#ffc400;--reveal-3:#ffa629;--reveal-4:#e98a24;--reveal-5:#ffcf70;--reveal-6:#ffe8ae}
html[data-theme="light"]{--reveal-1:#4f7138;--reveal-2:#63874a;--reveal-3:#7fa05f;--reveal-4:#a7be8b;--reveal-5:#d9e5cb;--reveal-6:#f6f1e6}