/* ================================================================
   TOKENS - zentrale Design-Variablen der Website (EIN Easing, feste
   Dauern, ein Farbsystem, Haarlinien). Werte NUR hier aendern.
   Sondersections (z. B. auf Text-to-Store) duerfen eigene Tokens
   fuehren, aber nur, wenn kein globales Token denselben Wert traegt.
   Die SpotTool-Buehne (spottool-buehne.css) bleibt ein eigener,
   unter .portal-buehne gescopter Token-Raum.
   ================================================================ */


/*
 * Design-Tokens – sound.dna
 *
 * Farben aus den Figma-/Webflow-Variablen; Bewegung, Hairlines und
 * Typo-Logik nach der Spottool-Designsprache (kleine feste Größen,
 * EIN Easing, feste Dauern). Tokens NUR hier ändern.
 */
:root {
  /* Buttons: Innenabstaende als Tokens. Verhaeltnis aus dem SpotTool
     (40px-Button, 0 22px bei 15px Schrift -> seitlich ~1.5x Schrift). */
  --button-pad-y: 0.875rem;   /* Achswerte - nur fuer abgeleitete Sonderfaelle */
  --button-pad-x: 1.125rem;
  --button-padding: var(--button-pad-y) var(--button-pad-x); /* DAS Button-Padding (14/18) */
  /* Farben */
  --white: #ffffff;
  --white-40: rgba(255, 255, 255, 0.4);
  --white-60: rgba(255, 255, 255, 0.6);
  --white-80: rgba(255, 255, 255, 0.8);
  --hellblau-grau: #f8f8f9;
  --mittelblau: #191b33;   /* Felder/Eingaben auf dunklen Seiten (SpotTool) */
  --dunkelblau: #090d31;   /* Dunkelblau auf Weiß (Text, Pill, Footer) */
  --dunkelblau-rgb: 9, 13, 49;
  --darkblue-40: rgba(var(--dunkelblau-rgb), 0.4);
  --darkblue-60: rgba(var(--dunkelblau-rgb), 0.6);
  --darkblue-80: rgba(var(--dunkelblau-rgb), 0.8);

  /* Semantische Farben – kippen im Dark Mode (body.theme-dark, siehe unten).
     Komponenten verwenden NUR diese, damit helle und dunkle Seiten aus
     einem Guss sind und Änderungen überall gleich wirken. */
  --text-farbe: var(--dunkelblau);
  --text-80: var(--darkblue-80);
  --text-60: var(--darkblue-60);
  --text-40: var(--darkblue-40);
  --text-invers: var(--white);
  --flaeche: var(--white);          /* Seitengrund */
  --feld: var(--white);             /* Felder/Karten auf der Fläche */
  --feld-hell: var(--hellblau-grau);/* helle Felder (bleiben auch im Dark Mode hell) */
  --hair-rgb: var(--dunkelblau-rgb); /* Farbe der Hairlines (RGB-Anteile) */

  /* Feine Linien und Flächen-Tints */
  --hover-tint: rgba(var(--hair-rgb), 0.04);
  --hair-w: 1px;
  --hair-a: 0.12;
  --hairline: var(--hair-w) solid rgba(var(--hair-rgb), var(--hair-a));
  --shadow: 0 0 40px rgba(0, 0, 0, 0.04); /* der EINE Schatten (Header) */

  /* p5-Flow-Gradient-Paletten – die EINE Quelle für alle Akzentflächen.
     JS liest sie über data-p5-palette="name" → --p5-name-a/-b/-c/-bg (effekte.js). */
  /* Home - TESTLAUF 2026-09-13 (Spielwiese 2). Vorher: Feinschliff 2026-09-12
     a #c07aff / b #3047c3 / c #d8d2a0 / bg #ffffff; Ur-Zustand: b #2b3fa8. */
  --p5-home-a: #b6afc2;    --p5-home-b: #55908c;    --p5-home-c: #ffffff;    --p5-home-bg: #ffffff;
  --p5-tts-a: #ecb793;     --p5-tts-b: #d6772f; --p5-tts-c: #f6e3d3; --p5-tts-bg: #fdf4ec;
  --p5-music-a: #9bd59f;   --p5-music-b: #91ba95;   --p5-music-c: #f2fbf3;   --p5-music-bg: #f2fbf3;
  --p5-systems-a: #8eb3c7; --p5-systems-b: #94a3b1; --p5-systems-c: #f2f7ea; --p5-systems-bg: #f2f7ea;

  /* Player (Playbar 1:1 wie im SpotTool-Dummy) */
  --track-rest: rgba(var(--hair-rgb), 0.25);
  --track-played: var(--text-farbe);
  --thumb: var(--text-80);

  /* Layout */
  --max-width-breit: 2000px;
  --max-width-schmal: 1660px;
  --border-radius-big: 12px;
  --border-radius-klein: 7px;

  /* Typografie – Inter Tight, ausschließlich Regular (400).
     Kleine Größen fest (wie Spottool), nur große Headings fluid:
     clamp(min, bevorzugt, max) = viewport-abhängig mit Ober-/Untergrenze. */
  --font-family-base: 'Inter Tight', Arial, sans-serif;

  --text-klein: 0.84375rem;   /* NUR Labels/Meta (Zeiten, Quellen, Achsen) - nie Fließtext */
  --text-basis: 0.9375rem;     /* Fließtext - auch kleiner Fließtext, kleiner wird Text nie */
  --ls-klein: 0.015em;         /* Letter-Spacing für text-klein UND text-basis */
  --ls-mittel: 0.01em;         /* Letter-Spacing für text-gross UND text-lead */
  --text-gross: 1.0625rem;     --ls-gross: 0.005em;   /* Letter-Spacing ab den Headings aufwärts */
  --text-lead: 1.375rem;         /* Lead-/Intro-Texte, Kartentitel */
  --heading-s: 2rem;           /* Modultitel (Feld-Karten, Systems-Zeilen, Use-Cases, Rechtstexte) */
  --hero-subline: 2rem;        /* Hero-Subline der Startseite - Solitär, kein Teil der Heading-Reihe */
  --heading-m: 3rem;         /* Section-Headings */
  --heading-l: clamp(2.5rem, 5vw, 5.5rem);           /* Banner-Headings */
  --heading-xl: clamp(3rem, 6.4vw, 7rem);       /* Hero-Headline */
  --zahl-gross: clamp(4rem, 7vw, 7.75rem);         /* Studienwert 73% - Solitär */
  --about-text: clamp(1.875rem, 3.5vw, 3.875rem);  /* Über-uns-Satz - Solitär wie --zahl-gross */

  /* Zu jedem Schriftgrößen-Token gehört GENAU EINE Line-Height und EIN
     Letter-Spacing (klein/basis→ls-klein, gross/lead→ls-mittel, ab den Headings→ls-gross).
     Einzige benannte Ausnahme: --lh-knopf, die optisch zentrierte
     Button-Textbox (Webflow-Wert). */
  --lh-klein: 1.4;
  --lh-basis: 1.4;
  --lh-gross: 1.4;
  --lh-lead: 1.3;
  --lh-heading-s: 1.2;
  --lh-heading-m: 1.2;
  --lh-heading-l: 1.05;
  --lh-heading-xl: 1;
  --lh-zahl: 1;
  --lh-about: 1.3;
  --lh-hero-subline: 1.2;
  --lh-knopf: 0.73;

  /* Bewegung – EIN Easing (aus dem Spottool), drei Dauern + Stagger.
     Immer diese Variablen verwenden, keine eigenen Kurven/Dauern erfinden.
     (Ausnahme: der 1:1 übernommene Webflow-Custom-Code im Header.) */
  --ease: cubic-bezier(0.45, 0, 0.15, 1);
  /* Nackte Dauern: JS liest sie über tokenMs() – eine Quelle für CSS und JS */
  --dur-standard: 380ms;
  --dur-traege: 1200ms; /* ganz langsame Bewegungen: Slider, Zaehler, Cursor, Trenner-Delay */
  --dur-langsam: 560ms;
  --dur-wattig: 950ms;   /* Viewport-Reveals, große weiche Bewegungen */
  /* Reveal-Schwelle: wie tief ein Element im Viewport stehen muss (Anteil
     der Viewport-Höhe, gemessen vom unteren Rand), bevor sein Reveal
     startet. Gilt über js/global.js für die GANZE Website - hier tweaken. */
  --reveal-schwelle: 30%;
  --reveal-schwelle-banner: 0%; /* große Bild-Banner laufen sofort an */
  --ablauf-lesehoehe: 66%;      /* bis zu dieser Viewport-Hoehe zeichnet die Ablauf-Linie mit dem Scroll */
  --scroll-traegheit: 0.06;     /* Lenis-lerp: kleiner = wattigeres Nachziehen des Rad-Scrollens */
  --transition-standard: var(--dur-standard) var(--ease);
  --transition-traege: var(--dur-traege) var(--ease);
  --transition-langsam: var(--dur-langsam) var(--ease);
  --transition-wattig: var(--dur-wattig) var(--ease);
  /* Choreografie-Dauern (alles mit eigenem Takt, aber derselben Kurve) */
  --dur-zeichnen: 1600ms;  /* Rahmen/Linien, die sich selbst zeichnen */
  --delay-zeichnen: 150ms;
  --dur-playline: 12s;     /* Playline über den fertigen Spot */
  --dur-choreo-element: 450ms; /* Lade-Choreo: Logo/Links/Pill blenden (Paar!) */
  /* Reveal-Delays (--reveal-delay im Markup) liegen auf diesem Raster */
  --stagger: 60ms;

  /* Vertikaler Abstand zwischen Sections */
  --abstand-innen: clamp(4.375rem, 8vw, 9.375rem);      /* Sektionen innerhalb eines Bereichs */
  --abstand-ablauf: clamp(220px, 25vw, 415px);          /* Takt der Ablauf-Stationen (TTS) - Solitär */
  --abstand-bereich: clamp(8.75rem, 15vw, 16.25rem);   /* Beginn eines neuen Bereichs (.bereich-start) */
  --section-abstand: calc(var(--abstand-innen) * 2.8);
  /* Lade-Choreografie des Headers (nur Direktaufruf der Home) */
  --hero-setzen: 1500ms;           /* Hero-Flaeche setzt sich (Startseite) */
  --hero-einblenden: 700ms;        /* Hero-Inhalte blenden ein */
  --hero-inhalt-start: calc(var(--hero-setzen) - var(--dur-standard)); /* Inhalte starten kurz vor Ende */
  --hero-inhalt-takt: calc(var(--stagger) * 2.5);
  --choreo-header-start: 1050ms;   /* Header klappt auf, sobald die Hero-Flaeche sitzt */
  --choreo-header-dauer: 600ms;
  --choreo-komponenten-start: calc(var(--choreo-header-start) + var(--choreo-header-dauer)); /* Logo & Co. starten, wenn der Header offen ist */
  --choreo-schritt: var(--stagger); /* Versatz zwischen den Header-Komponenten (Logo, Links, Pill) */
  /* Raum-Skala: alle wiederkehrenden Abstaende laufen ueber diese Stufen */
  --raum-xs: 0.5rem;    /* 8px  - fasst 6/8/10 zusammen */
  --raum-s: 0.75rem;    /* 12px - fasst 11/12/14 zusammen */
  --raum-m: 1rem;       /* 16px - fasst 16/18/20 zusammen */
  --raum-l: 1.5rem;     /* 24px - fasst 22/24/26 zusammen */
  --raum-xl: 2rem;      /* 32px - fasst 30/34/36 zusammen */
  --raum-2xl: 3rem;     /* 48px - fasst 44/46/48/50 zusammen */
  --grid-gap: 1rem;     /* DER Zwischenraum von Raster- und Slider-Elementen (Karten, Personen, Logos) */
  --seiten-rand-gross: 8vw;   /* seitlicher Rand aller Inhaltsseiten (schmale Sections) */
  --seiten-rand-klein: 1vw;   /* seitlicher Rand der breiten Sections */
  --seiten-rand-banner: calc(var(--seiten-rand-gross) / 2); /* img-Banner mit banner-rand */
  --abstand-kopf: clamp(2.4rem, 3.9vw, 4.875rem); /* Sektionskopf -> Inhalt (40 % unter dem alten Wert) */
  --linie-deckkraft: 0.45;                        /* Unterstriche der underlined-Buttons */                           /* Luecke in Kachel-/Feld-Rastern */
}


/* Dark Mode: dieselben Rollen, gekippte Werte */
body.theme-dark {
  --feld-hell: var(--mittelblau);
  /* Dunkle Seiten liegen auf dem SpotTool-Blau (nicht dem hellen Dunkelblau) */
  --dunkelblau: #0c0e29;
  --dunkelblau-rgb: 12, 14, 41;
  --text-farbe: var(--white);
  --text-80: rgba(255, 255, 255, 0.8);
  --text-60: rgba(255, 255, 255, 0.6);
  --text-40: var(--white-40);
  --text-invers: var(--dunkelblau);
  --flaeche: var(--dunkelblau);
  --feld: var(--mittelblau);
  --hair-rgb: 255, 255, 255;
  --hair-a: 0.14; /* so fein wie Footer-Linie und Header-Border */
  /* Zusammengesetzte Tokens hier NEU deklarieren: var()-Verweise werden dort
     aufgelöst, wo der Token deklariert ist – sonst blieben Hairlines dunkel. */
  --hairline: var(--hair-w) solid rgba(var(--hair-rgb), var(--hair-a));
  --hover-tint: rgba(var(--hair-rgb), 0.06);
  --track-rest: rgba(var(--hair-rgb), 0.25);
  --track-played: var(--text-farbe);
  --thumb: var(--text-80);
}


@media (min-resolution: 2dppx) {
  :root {
    --hair-w: 0.5px;
    --hair-a: 0.22;
  }

  body.theme-dark {
    --hair-a: 0.2;
  }
}


  /* ---------- Nav-Variablen und Pill (früher Inline-Embed in jedem HTML) ----------
     Eine Quelle: Farben hängen an den Design-Tokens, kippen mit body.theme-dark.
     Die Logik dazu liegt in js/nav.js. */

  body {
    --page-bg: var(--flaeche);
    --nav-bg: rgba(255, 255, 255, 0.8);
    --nav-border: rgba(var(--dunkelblau-rgb), 0.3);
    --nav-border-w: 0.25px; /* bewusst feiner als die Hairline – große fixe Fläche */
    --nav-logo: var(--dunkelblau);
    --pill-bg: var(--dunkelblau);
    --nav-link: var(--dunkelblau);
    --nav-link-active: var(--white);
    --nav-hover-tint: rgba(var(--dunkelblau-rgb), 0.05);
  }


  body.theme-dark {
    --nav-bg: rgba(var(--dunkelblau-rgb), 0.8);
    --nav-border: rgba(255, 255, 255, 0.2);
    --nav-logo: var(--white);
    --pill-bg: var(--white);
    --nav-link: var(--white);
    --nav-link-active: var(--dunkelblau);
    --nav-hover-tint: rgba(255, 255, 255, 0.07);
  }

/* ---------- Konsolidierungen (Variablenreduktion) ---------- */
:root {
  /* Feld-Innenabstaende: drei Groessen fuer alle Karten und Felder
     (Ziel fuer den schrittweisen Umbau der Einzel-clamps) */
  --pad-feld-s: 1.5rem;
  --pad-feld-m: 2.25rem;
  --pad-feld-l: 3rem;
}


/* ---------- Responsive Staffelung: das Sizing steckt in der Variable ---------- */
@media screen and (max-width: 991px) {
  :root {
    --text-lead: 1.25rem;     /* 20px */
    --heading-s: 1.75rem;     /* 28px */
    --hero-subline: 1.75rem;
    --heading-m: 2.5rem;      /* 40px */
    --pad-feld-s: 1.25rem;
    --pad-feld-m: 1.75rem;
    --pad-feld-l: 2.5rem;
  }
}
@media screen and (max-width: 767px) {
  :root {
    /* EIN einheitlicher Seitenrand am Handy - alle Sections buendig
       (Referenz: der bisherige banner-rand des About-img-Banners, 4vw) */
    --seiten-rand-gross: 4vw;
    --seiten-rand-klein: 4vw;
    --seiten-rand-banner: var(--seiten-rand-gross);
    --text-lead: 1.125rem;    /* 18px */
    --heading-s: 1.375rem;    /* 22px */
    --hero-subline: 1.375rem;
    --heading-m: 1.875rem;    /* 30px */
    --pad-feld-s: 1rem;
    --pad-feld-m: 1.5rem;
    --pad-feld-l: 2rem;
  }
}