/* ==========================================================================
   DESIGN-TOKENS  ·  "Bold Athletic"
   --------------------------------------------------------------------------
   Alle Farben, Abstaende und Schriftgroessen der Seite kommen aus dieser
   Datei. Wer die Optik aendern will, aendert hier - nicht in style.css.

   Farbprinzip: dunkle Basis + GENAU EIN Signalton (Tuerkis). Das ist die
   Konvention, die hochwertige Trainer-Seiten von bunten Fitness-Seiten
   unterscheidet. Der Vereinsbereich wird deshalb NICHT durch eine zweite
   Farbe abgesetzt, sondern durch eine invertierte Flaeche.
   ========================================================================== */

:root {
  color-scheme: dark;

  /* --- Farben: Basis -----------------------------------------------------
     Bewusst NEUTRALE Graustufen ohne Farbstich. Wenn die Flaechen mit
     eingefaerbt werden, wirkt die ganze Seite getoent und der Akzent
     verliert seine Signalwirkung. Schwarz bleibt schwarz - nur der Button
     ist farbig.                                                            */
  --ink:            #0A0A0B;  /* Seitenhintergrund                          */
  --ink-raised:     #111113;  /* Sektionsflaeche, zweite Ebene              */
  --ink-raised-2:   #17171A;  /* Karten, Formulare                          */
  --ink-raised-3:   #1E1E22;  /* Karten-Hover                               */
  --line:           #26262B;  /* Trennlinien, Rahmen                        */
  --line-strong:    #35353D;  /* betonte Rahmen                             */

  /* --- Farben: Text ----------------------------------------------------- */
  --text:           #F4F4F5;  /* Standardtext                (17.9:1)       */
  --text-dim:       #A8A8B0;  /* Fliesstext zweiter Ordnung   (8.0:1)       */
  --text-faint:     #85858F;  /* Meta, Bildunterschriften     (5.4:1)       */

  /* --- Farbe: Akzent ----------------------------------------------------
     EINE Zeile aendern = ganze Seite umfaerben.
     Alternative, falls es doch knalliger werden soll: #D7FF3E (Volt).      */
  --accent:         #00C6A7;
  --accent-deep:    #00A98F;  /* Hover/Aktiv                                */
  --accent-bright:  #3FE3C6;  /* kleine Texte - heller fuer Kontrast        */
  --accent-ink:     #04211C;  /* Text AUF der Akzentflaeche (12.4:1)        */
  --accent-soft:    color-mix(in oklab, var(--accent) 10%, transparent);
  --accent-line:    color-mix(in oklab, var(--accent) 26%, transparent);
  --accent-glow:    color-mix(in oklab, var(--accent) 34%, transparent);

  /* --- Invertierte Flaeche (Vereinsbereich) ------------------------------
     Eine grosse tuerkise Flaeche waere zu laut und wuerde mit den Buttons
     um Aufmerksamkeit konkurrieren. Der B2B-Pfad wird deshalb hell-auf-
     dunkel abgesetzt - das wirkt hochwertiger und laesst den Akzent
     ausschliesslich beim Handlungsaufruf.                                  */
  --invert-bg:      #EFEFF1;
  --invert-fg:      #0A0A0B;
  --invert-dim:     #4C4C55;
  --invert-line:    rgb(10 10 11 / .14);

  /* --- Typografie ------------------------------------------------------- */
  --font-display: 'Archivo', 'Arial Narrow', Arial, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Fluid-Scale: waechst zwischen 360px und 1400px Viewport stufenlos mit. */
  --step--1: clamp(0.82rem, 0.79rem + 0.13vw, 0.89rem);
  --step-0:  clamp(1rem,    0.96rem + 0.19vw, 1.09rem);
  --step-1:  clamp(1.19rem, 1.11rem + 0.34vw, 1.37rem);
  --step-2:  clamp(1.41rem, 1.29rem + 0.55vw, 1.73rem);
  --step-3:  clamp(1.68rem, 1.48rem + 0.86vw, 2.18rem);
  --step-4:  clamp(2rem,    1.70rem + 1.31vw, 2.75rem);
  --step-5:  clamp(2.37rem, 1.94rem + 1.93vw, 3.46rem);
  --step-6:  clamp(2.82rem, 2.20rem + 2.79vw, 4.36rem);

  /* Display bricht bewusst aus der Scale aus. Der Groessensprung zwischen
     H1 und Fliesstext ist das, was die Seite hochwertig wirken laesst.     */
  --display-s:  clamp(1.6rem, 1.25rem + 1.6vw, 2.3rem);
  --display-m:  clamp(1.95rem, 1.4rem + 2.5vw, 3.1rem);
  --display-l:  clamp(2.4rem, 1.2rem + 5.4vw, 6.4rem);

  /* Breitenachse der variablen Schrift - schmaler wirkt athletischer.      */
  --wdth-display: 82;
  --wdth-tight:   72;

  /* --- Abstaende (4px-Raster) ------------------------------------------- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 3rem;     --sp-8: 4rem;
  --sp-9: 6rem;     --sp-10: 8rem;

  --section-y: clamp(4.5rem, 3rem + 7vw, 9rem);

  /* --- Layout ----------------------------------------------------------- */
  --container:       1240px;
  --container-tight: 820px;
  --gutter:          clamp(1.15rem, 0.7rem + 2vw, 2.5rem);

  /* --- Form ------------------------------------------------------------- */
  --radius-s:    6px;
  --radius:      14px;
  --radius-l:    24px;
  --radius-pill: 999px;

  /* --- Schatten --------------------------------------------------------- */
  --shadow-1: 0 1px 2px rgb(0 0 0 / .4);
  --shadow-2: 0 12px 32px -12px rgb(0 0 0 / .7);
  --shadow-3: 0 32px 64px -24px rgb(0 0 0 / .85);

  /* --- Bewegung --------------------------------------------------------- */
  --ease-out:    cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 160ms;
  --dur:      320ms;
  --dur-slow: 620ms;

  /* --- Ebenen ----------------------------------------------------------- */
  --z-sticky:  40;
  --z-nav:     50;
  --z-overlay: 60;
  --z-modal:   70;
}