/* =========================================================
   Design-Tokens, Reset, Typografie, Bewegung

   Alle Bausteine beziehen ihre Farben, Flächen, Radien und
   Schatten ausschliesslich aus diesen Variablen. Ein Theme
   überschreibt nur die Tokens (siehe themes.css) — nie die
   Bausteine selbst. Deshalb bleiben Layout, Typografie-
   hierarchie, Abstände und Bedienung über alle Themes gleich.
   ========================================================= */

:root{
  /* --- Flächen, von hinten nach vorne --- */
  --bg:#0b0b0c;                 /* Seitengrund */
  --bg2:#141416;                /* Karten, Panels */
  --bg3:#1b1b1e;                /* Eingabefelder, Chips */
  --bg4:#232326;                /* gehobene Flächen, Hover */

  /* --- Linien: sparsam, fast unsichtbar --- */
  --line:rgba(242,239,234,.07);
  --line2:rgba(242,239,234,.13);

  /* --- Schrift --- */
  --txt:#f2efea;                /* Off-White, kein hartes Weiss */
  --txt2:#c9c6c0;
  --muted:#86858a;
  --muted2:#6a696e;             /* dritte Ebene: Fussnoten */

  /* --- Akzent: genau einer, sparsam --- */
  --accent:#f2efea;             /* aktive Zustände, Primärknopf */
  --accent2:#c1342e;            /* Signalpunkt, Links */
  --accent-soft:var(--txt2);
  --on-accent:#0b0b0c;          /* Schrift auf Akzentfläche */

  /* --- Status --- */
  --ok:#6f9d78; --warn:#a8894f; --err:#c1554d;
  --ok-bg:rgba(111,157,120,.12); --err-bg:rgba(193,85,77,.09);

  /* --- Flächenbehandlung --- */
  --glass:rgba(28,28,34,.5);            /* halbtransparente Fläche */
  --glass-strong:rgba(242,239,234,.12); /* Knopf über Bild */
  --scrim:rgba(11,11,12,.9);            /* Abdunkelung über Bildern */
  --scrim-soft:rgba(11,11,12,.72);
  --on-scrim:#f2efea;
  --header-bg:rgba(11,11,12,.72);
  --overlay:rgba(0,0,0,.78);
  --skel1:#1c1c22; --skel2:#26262e;
  --scroll-thumb:#2e2e37;
  --card-ring:0 0 0 1px var(--line);    /* Fassung um Kartenbilder */

  /* --- Form --- */
  --r:20px; --r-sm:12px; --r-xs:8px;
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 24px 70px rgba(0,0,0,.45);
  --shadow-sm:0 1px 2px rgba(0,0,0,.3), 0 8px 24px rgba(0,0,0,.25);

  /* --- Atmosphäre: zwei Ebenen hinter allem --- */
  --bg-layer:none;              /* Farbstimmung, driftet sehr langsam */
  --bg-layer-size:auto;
  --bg-layer-opacity:1;
  --bg-drift:none;              /* Bewegung der Farbebene */
  --bg-drift-dur:180s;

  --fx-layer:none;              /* Partikel: Blüten, Sterne, Funken */
  --fx-size:auto;
  --fx-opacity:1;
  --fx-anim:none;
  --fx-dur:120s;

  /* --- Bewegung: 0 = still, 1 = normal, 1.4 = lebendig --- */
  --motion:1;
  --dur-1:calc(200ms * var(--motion));
  --dur-2:calc(320ms * var(--motion));
  --dur-3:calc(500ms * var(--motion));
  --ease:cubic-bezier(.16,1,.3,1);

  --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --radius:var(--r-sm);
  color-scheme:dark;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--bg);
  color:var(--txt); min-height:100vh;
  font-family:var(--sans); font-size:14.5px; font-weight:400;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  transition:background-color var(--dur-3) var(--ease), color var(--dur-3) var(--ease);
}

/* ---------------------------------------------------------
   Zwei Hintergrundebenen, beide hinter allem und klickdurchlässig.
   ::before trägt die Farbstimmung, ::after die Partikel. Bewegt
   wird ausschliesslich über transform und opacity — das läuft auf
   der Grafikkarte und kostet kein Scrollruckeln. Die Ebenen sind
   grösser als der Bildschirm, damit beim Driften keine Kante zeigt.
   --------------------------------------------------------- */
body::before,
body::after{
  content:"";position:fixed;pointer-events:none;z-index:-1;
  inset:-25%;                       /* Reserve für die Drift */
  will-change:transform;
}
body::before{
  background:var(--bg-layer);
  background-size:var(--bg-layer-size);
  opacity:var(--bg-layer-opacity);
  animation:var(--bg-drift);
  animation-duration:calc(var(--bg-drift-dur) / var(--motion));
  transition:opacity var(--dur-3) var(--ease);
}
body::after{
  background:var(--fx-layer);
  background-size:var(--fx-size);
  opacity:var(--fx-opacity);
  animation:var(--fx-anim);
  animation-duration:calc(var(--fx-dur) / var(--motion));
  transition:opacity var(--dur-3) var(--ease);
}

/* Endlose Bewegungsmuster. Ruhig, aber deutlich genug, dass man sie
   beim Hinsehen bemerkt — nicht erst nach Minuten. */
@keyframes bgDrift{
  0%   { transform:translate3d(-3%,-2%,0) scale(1.02) }
  50%  { transform:translate3d(4%,3%,0)   scale(1.12) }
  100% { transform:translate3d(-3%,-2%,0) scale(1.02) }
}
@keyframes bgBreathe{           /* Glühen, das an- und abschwillt */
  0%,100% { opacity:calc(var(--bg-layer-opacity) * .5); transform:scale(1) }
  50%     { opacity:var(--bg-layer-opacity);            transform:scale(1.14) }
}
@keyframes fxFall{              /* Blütenblätter: fallen und driften seitlich */
  0%   { transform:translate3d(-8%,-22%,0) rotate(-1deg) }
  100% { transform:translate3d(9%,24%,0)   rotate(1.5deg) }
}
@keyframes fxRise{              /* Funken: steigen auf und verlöschen */
  0%   { transform:translate3d(3%,20%,0);   opacity:0 }
  18%  { opacity:var(--fx-opacity) }
  82%  { opacity:var(--fx-opacity) }
  100% { transform:translate3d(-4%,-24%,0); opacity:0 }
}
@keyframes fxPan{               /* Sterne: seitliches Gleiten, Parallaxe */
  0%   { transform:translate3d(6%,-2%,0) }
  100% { transform:translate3d(-9%,3%,0) }
}
@keyframes fxSway{              /* Blattschatten: Wiegen im Wind */
  0%,100% { transform:translate3d(-3%,-1.5%,0) rotate(-1.2deg) }
  50%     { transform:translate3d(4%,2.5%,0)   rotate(1.4deg) }
}
@keyframes fxShimmer{           /* Lichtbrechung, Glasreflex */
  0%   { transform:translate3d(-22%,-3%,0) }
  100% { transform:translate3d(22%,3%,0) }
}

/* „Still“ und Systemeinstellung halten beide Ebenen an */
[data-motion="still"] body::before,
[data-motion="still"] body::after{ animation:none; transform:none }
@media(prefers-reduced-motion:reduce){
  body::before, body::after{ animation:none !important; transform:none !important }
}

h1,h2,h3{font-family:var(--sans); font-weight:200; letter-spacing:.012em; margin:0}
h1{font-size:clamp(40px,5.6vw,78px); line-height:1.04}
h2{font-size:clamp(28px,3.4vw,40px); line-height:1.1}
/* Kleine Versal-Labels mit weitem Sperrsatz — das Gegengewicht zu den dünnen Headlines */
.label,.eyebrow,.field label,.panel h3,.stat span,.section-h{
  font-size:9.5px; text-transform:uppercase; letter-spacing:.24em; font-weight:500; color:var(--muted)
}

/* Sections erscheinen beim Scrollen — subtil, nicht sprunghaft */
.rv{opacity:0;transform:translateY(18px);
    transition:opacity calc(.8s * var(--motion)) var(--ease),
               transform calc(.8s * var(--motion)) var(--ease)}
.rv.in{opacity:1;transform:none}

/* Bewegungsstufe „Still“ und Systemeinstellung schalten alles ab */
[data-motion="still"] .rv{opacity:1;transform:none;transition:none}
@media(prefers-reduced-motion:reduce){
  :root{--motion:0}
  .rv{opacity:1;transform:none;transition:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;
                       transition-duration:.01ms !important;scroll-behavior:auto !important}
}

button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
a{color:var(--accent2)}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--scroll-thumb);border-radius:0}
::-webkit-scrollbar-thumb:hover{background:var(--muted)}
::selection{background:var(--accent2);color:#fff}