/* =====================================================
   BISSANTZ DESIGN-SYSTEM · WEBSITE — bissantz-website-tokens.css

   Werte für alle Website-Seiten (Marktplatz, Lexikon, künftige Vorlagen).
   Wird VOR bissantz.css geladen und beim Veröffentlichen mit hochgeladen.
   Doku und Prüfung: designsystem/website/ (index.html, test-tokens.js).
   Eine Änderung hier wirkt auf alle Seiten — vorher die Vorschau ansehen
   (node designsystem/website/vorschau.js). Neue Token: Gruppe + Beschreibung,
   test-tokens.js muss grün sein.

   Zwei Ebenen, streng getrennt:
   1. PRIMITIV   — Rohwerte, benannt nach dem, was sie SIND
                   (Farbton, Stufe, Größe). Farben ohne Präfix:
                   --neutral-40, --blue-3. Komponenten nutzen sie nie direkt.
   2. SEMANTISCH — Rollen, benannt nach dem, WOFÜR sie sind.
                   Farben mit Präfix --color-*, Textstile mit --typo-*.
                   Farben verweisen nur auf Primitive (Alias oder color-mix);
                   Rollen ohne Skala (z-index, Deckkraft, Größe) dürfen Werte tragen.

   Modell nach W3C Design Tokens (DTCG 2025.10): jede Gruppe hat einen
   Typ, jedes Token eine Beschreibung (Kommentar hinter dem Wert),
   Semantik entsteht über Alias (var()). Komponenten-Token (z. B. Farbwelten
   der Indexseite) bleiben in ihrer Komponente, nicht hier.

   Lesekonvention für Doku-Seite und test-tokens.js: Gruppenkopf ist ein
   Kommentar der Form „@ebene | Gruppe | DTCG-Typ“, der Kommentar hinter
   einem Token ist seine Beschreibung.
   ===================================================== */

:root {

  /* ===== 1 · PRIMITIV ================================ */

  /* @primitiv | Farbe · Neutral | color */
  --neutral-0:   #000000; /* Schwarz */
  --neutral-5:   #0d0d0d;
  --neutral-10:  #1a1a1a;
  --neutral-15:  #262626;
  --neutral-20:  #333333;
  --neutral-25:  #404040;
  --neutral-30:  #4d4d4d;
  --neutral-35:  #595959;
  --neutral-40:  #666666;
  --neutral-45:  #737373;
  --neutral-50:  #808080;
  --neutral-55:  #8c8c8c;
  --neutral-60:  #999999;
  --neutral-65:  #a6a6a6;
  --neutral-70:  #b3b3b3;
  --neutral-75:  #bfbfbf;
  --neutral-80:  #cccccc;
  --neutral-85:  #d9d9d9;
  --neutral-90:  #e6e6e6;
  --neutral-95:  #f2f2f2;
  --neutral-97:  #f7f7f7; /* einzige Zwischenstufe: Seitenhintergrund, bewusst nicht auf 95 gerundet */
  --neutral-100: #ffffff; /* Weiß */

  /* @primitiv | Farbe · Marke | color */
  --blue-ai: #4ec5f2; /* KI-Hellblau */
  --blue-ai-dark: #00719b; /* KI-Blau als Text auf hellem Grund (5,5:1 auf Weiß; User 15.10.) */
  --blue-3:  #002d71; /* Produkt-Blau = stärkste Stufe der Bewertungsskala */
  --blue-2:  #4c6c9b;
  --blue-1:  #9aabc5;
  --red-1:   #e599a3;
  --red-2:   #d14c5d;
  --red-3:   #be0019;
  --orange:  #ff9302; /* In Bearbeitung */
  --orange-dark: #7c2d00; /* Text und Icon auf orangem Grund (8:1) */

  /* @primitiv | Verlauf | gradient */
  --gradient-dark:        linear-gradient(135deg, #555 0%, #333 20%, #111 60%, #0a0a0a 100%); /* Markenverlauf, Stufen exakt wie bisher */
  --gradient-placeholder: linear-gradient(135deg, var(--neutral-95), var(--neutral-85)); /* Bild-Platzhalter */
  --gradient-power:       linear-gradient(120deg, #ff6b6b 0%, #ec5e8a 22%, #b9609e 44%, #7a68b8 66%, #4f7fd1 88%, #3f8fdc 100%); /* Power-Verlauf: Power-Teaser, Power-Hintergrund, Whitepaper-Kachel */

  /* @primitiv | Schrift · Familie | fontFamily */
  --font-family-title: 'Heebo', sans-serif;     /* Titel, Zahlen, Fähnchen */
  --font-family-body:  'Open Sans', sans-serif; /* alles Lesbare */

  /* @primitiv | Schrift · Größe | dimension */
  --font-size-2xs:  0.625rem;  /* 10px — nur Kleinst-Etiketten auf Bildern */
  --font-size-xs:   0.75rem;   /* 12px — Eyebrow, Label, Badge */
  --font-size-sm:   0.875rem;  /* 14px — Fußzeile, Nebentext in Kacheln */
  --font-size-base: 1rem;      /* 16px — Fließtext, Mindestgröße für Lesetext */
  --font-size-lg:   1.125rem;  /* 18px — Einleitung, Zitat */
  --font-size-xl:   1.25rem;   /* 20px */
  --font-size-2xl:  1.5rem;    /* 24px */
  --font-size-3xl:  1.75rem;   /* 28px */
  --font-size-4xl:  2rem;      /* 32px */
  --font-size-5xl:  2.5rem;    /* 40px */
  --font-size-6xl:  4rem;      /* 64px — Hero */

  /* @primitiv | Schrift · Gewicht | fontWeight */
  --font-weight-regular:   400;
  --font-weight-semibold:  600;
  --font-weight-bold:      700;
  --font-weight-extrabold: 800; /* Fähnchen, Labels — heute 7× fest im CSS */
  --font-weight-black:     900; /* Heebo Black, Titel */

  /* @primitiv | Schrift · Zeilenhöhe | number */
  --line-height-none:    1;   /* einzeilige Elemente, Hero */
  --line-height-tight:   1.1; /* große Titel */
  --line-height-snug:    1.3; /* Zwischentitel */
  --line-height-normal:  1.5; /* kurzer Text */
  --line-height-relaxed: 1.7; /* langer Fließtext */

  /* @primitiv | Schrift · Laufweite | dimension */
  --letter-spacing-tight:  -0.02em; /* große Titel */
  --letter-spacing-normal: 0;
  --letter-spacing-wide:   0.04em;
  --letter-spacing-wider:  0.08em; /* Label */
  --letter-spacing-widest: 0.2em;  /* Eyebrow / Sondertitel in GROSSBUCHSTABEN */

  /* @primitiv | Abstand | dimension */
  --space-0:   0px;     /* bewusst kein Abstand — mit Einheit, damit es auch in calc() gilt */
  --space-4:   0.25rem;
  --space-8:   0.5rem;
  --space-12:  0.75rem;
  --space-16:  1rem;
  --space-24:  1.5rem;
  --space-32:  2rem;
  --space-48:  3rem;
  --space-64:  4rem;
  --space-96:  6rem;
  --space-128: 8rem;

  /* @primitiv | Radius | dimension */
  --radius-xs:   2px;
  --radius-sm:   4px;
  --radius-md:   8px;
  --radius-lg:   10px; /* Karten — heute 18× im Einsatz */
  --radius-xl:   16px;
  --radius-2xl:  24px;
  --radius-full: 9999px; /* Pille, Kreis */

  /* @primitiv | Linienstärke | dimension */
  --border-width-thin:  1px; /* Trennlinie, Rahmen von Eingabe und Pill */
  --border-width-thick: 2px; /* Kontur von Knopf und Kasten, Akzentlinie */

  /* @primitiv | Ecke | keyword */
  --corner-shape: squircle; /* glattere Rundung; wirkt mit border-radius zusammen. Chrome/Edge ab 139, sonst normale Rundung */

  /* @primitiv | Schatten | shadow */
  --shadow-sm: 0 1px 8px rgba(0, 0, 0, 0.08);   /* Karte in Ruhe */
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.10);  /* schwebende Fläche */
  --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.16); /* Karte bei Hover */

  /* @primitiv | Dauer | duration */
  --duration-fast:   150ms; /* Farbe, Hover */
  --duration-base:   250ms; /* Ein-/Ausblenden */
  --duration-slow:   350ms; /* Auf-/Zuklappen */
  --duration-slower: 600ms; /* Karten-Bewegung */

  /* @primitiv | Kurve | cubicBezier */
  --ease-standard: ease;
  --ease-in:       cubic-bezier(0.7, 0, 0.84, 0); /* Hinausgehen */
  --ease-out:      cubic-bezier(0.16, 1, 0.3, 1); /* weiches Ankommen — heute 9× fest + --mp-ease-hover */

  /* @primitiv | Breakpoint | dimension */
  /* Nur für die FENSTERBREITE (responsiv, @media) — Breiten von Inhalten stehen unter Layout/Größe.
     In @media wirken CSS-Variablen nicht: dort steht die Zahl, mit dem Token-Namen als Kommentar.
     Abfrage von oben nach unten (max-width): „bis einschließlich dieser Breite gilt die Geräteklasse".
     Umstellung 14.10.: jeder alte Wert auf die nächsthöhere Stufe (nie enger als vorher). */
  --breakpoint-mobile:           480px;  /* Telefon hochkant (360–430) — vorher 480 */
  --breakpoint-mobile-landscape: 640px;  /* Telefon quer, große Telefone — vorher 520/560/640 */
  --breakpoint-tablet-portrait:  900px;  /* Tablet hochkant (744–834) — vorher 720/768/900 */
  --breakpoint-tablet-landscape: 1100px; /* Tablet quer, kleiner Laptop — vorher 960/1024/1100 */
  --breakpoint-desktop:          1300px; /* darüber: Desktop mit vollem Layout — vorher 1300 */


  /* ===== 2 · SEMANTISCH ============================== */

  /* @semantisch | Farbe · Fläche | color */
  --color-background:     var(--neutral-97);  /* Seitenhintergrund */
  --color-surface:        var(--neutral-100); /* Karten, Boxen — liegt auf dem Hintergrund */
  --color-surface-sunken: var(--neutral-95);  /* vertieft: Tabellenkopf, Eingabe-Hintergrund, Bild-Platzhalter */
  --color-overlay:        color-mix(in srgb, var(--neutral-0) 40%, transparent); /* Abdunklung hinter Dialog, Lightbox */
  --color-overlay-strong: color-mix(in srgb, var(--neutral-0) 60%, transparent); /* starke Abdunklung, Text auf Bild */

  /* @semantisch | Farbe · Vordergrund | color */
  --color-foreground:         var(--neutral-0);   /* Überschriften, Navigation, starker Text — ein Schwarz (User 14.10.) */
  --color-foreground-body:    var(--neutral-35);  /* Fließtext auf Marktplatz UND Lexikon — eine Farbe (User 14.10.) */
  --color-foreground-muted:   var(--neutral-40);  /* Eyebrow, Label, Nebentext */
  --color-foreground-subtle:  var(--neutral-55);  /* Nebeninfo, Fußnoten, Hinweise */

  /* @semantisch | Farbe · Linie | color */
  --color-border:        var(--neutral-85);
  --color-border-subtle: var(--neutral-90); /* Tabellen- und Trennlinien */

  /* @semantisch | Farbe · Dunkler Grund | color */
  --color-surface-dark:              var(--neutral-5);   /* einfarbige dunkle Fläche (neben dem Verlauf) — vorher #111 */
  --color-foreground-inverse:        var(--neutral-100); /* Text auf dunklem Grund */
  --color-foreground-inverse-muted:  color-mix(in srgb, var(--neutral-100) 85%, transparent); /* Fließtext auf dunkel — vorher .75–.9 */
  --color-foreground-inverse-subtle: color-mix(in srgb, var(--neutral-100) 65%, transparent); /* Nebeninfo auf dunkel — vorher .6–.7 */
  --color-border-inverse:            color-mix(in srgb, var(--neutral-100) 20%, transparent); /* Linie auf dunkel — vorher .15–.25 */

  /* @semantisch | Farbe · Link | color */
  --color-link:              var(--neutral-0);   /* Text-Link auf hellem Grund */
  --color-link-line:         color-mix(in srgb, var(--neutral-0) 30%, transparent);   /* Ruhe-Linie unter dem Link */
  --color-link-inverse:      var(--neutral-100); /* Text-Link auf dunklem Grund (User 15.10.) */
  --color-link-inverse-line: color-mix(in srgb, var(--neutral-100) 45%, transparent); /* Ruhe-Linie auf dunklem Grund */

  /* @semantisch | Farbe · Akzent (Kontext-Regel) | color */
  --color-accent:         var(--neutral-0);  /* Website / Beratung: Buttons, Links, Icons */
  --color-accent-hover:   var(--neutral-5);  /* dunkle Hover-Fläche von Buttons — vorher #111 (User 14.10.) */
  --color-accent-subtle:  var(--neutral-97); /* helle Hover-/Auswahl-Fläche (Nav, Menüs) */
  --color-accent-product: var(--blue-3);     /* nur Produkt-Kontext */
  --color-ai:             var(--blue-ai);    /* KI, alle Kontexte */
  --color-ai-strong:      var(--blue-ai-dark); /* KI-Text und -Icon auf hellem oder getöntem Grund (4,8:1) */
  --color-focus:          var(--neutral-0);  /* Fokusrahmen — vorher Navy */

  /* @semantisch | Farbe · Rückmeldung | color */
  --color-error:          var(--red-3);    /* Fehler in Formular, KI-Antwort */
  --color-error-subtle:   color-mix(in srgb, var(--red-3) 10%, transparent);
  --color-warning:        var(--orange);   /* Hinweis, Achtung */
  --color-warning-subtle: color-mix(in srgb, var(--orange) 12%, transparent);
  --color-warning-strong: var(--orange-dark); /* Text/Icon auf der Tönung — Orange selbst ist dort unlesbar (1,9:1) */
  --color-success:        var(--blue-2);   /* Erfolg — Bissantz-Logik: gut = Blau, kein Grün */
  --color-success-subtle: color-mix(in srgb, var(--blue-2) 12%, transparent);
  --color-success-strong: var(--blue-3);      /* Text/Icon auf der Tönung (10:1; Blau 2 nur 4,3:1) */

  /* @semantisch | Farbe · Bewertung | color */
  --color-rating-best:      var(--blue-3); /* nur Produkt und Datenvisualisierung */
  --color-rating-very-good: var(--blue-2);
  --color-rating-good:      var(--blue-1);
  --color-rating-bad:       var(--red-1);
  --color-rating-very-bad:  var(--red-2);
  --color-rating-worst:     var(--red-3);
  --color-status-editing:   var(--orange); /* In Bearbeitung */

  /* @semantisch | Fläche · Verlauf | gradient */
  --background-dark:        var(--gradient-dark);        /* Fähnchen, dunkle Box, Akzent-Buttons */
  --background-placeholder: var(--gradient-placeholder); /* Bild-Platzhalter, solange kein Bild gesetzt ist */
  --background-power:       var(--gradient-power);       /* bunte Akzentfläche (Power-Teaser, Whitepaper-Kachel) */

  /* @semantisch | Textstil | typography */
  /* Kurzform für font: Gewicht Größe/Zeilenhöhe Familie. Laufweite getrennt (*-tracking),
     GROSSBUCHSTABEN bei Eyebrow und Label setzt die Komponente. */
  --typo-display:            var(--font-weight-black) clamp(var(--font-size-5xl), 6vw, var(--font-size-6xl))/var(--line-height-none) var(--font-family-title); /* Hero-Titel */
  --typo-display-tracking:   var(--letter-spacing-tight);
  --typo-heading-1:          var(--font-weight-black) var(--font-size-4xl)/var(--line-height-tight) var(--font-family-title); /* Seiten- und Abschnittstitel */
  --typo-heading-1-tracking: var(--letter-spacing-tight);
  --typo-heading-2:          var(--font-weight-black) var(--font-size-2xl)/var(--line-height-tight) var(--font-family-title); /* Box- und Sektionstitel */
  --typo-heading-3:          var(--font-weight-black) var(--font-size-xl)/var(--line-height-tight) var(--font-family-title); /* kleine Titel, Kacheln */
  --typo-lead:               var(--font-weight-regular) var(--font-size-lg)/var(--line-height-relaxed) var(--font-family-body); /* Einleitung unter dem Titel */
  --typo-body:               var(--font-weight-regular) var(--font-size-base)/var(--line-height-relaxed) var(--font-family-body); /* Fließtext */
  --typo-body-sm:            var(--font-weight-regular) var(--font-size-sm)/var(--line-height-normal) var(--font-family-body); /* nur Fußzeile, Nebentext — nie Lesetext */
  --typo-quote:              var(--font-weight-regular) var(--font-size-lg)/var(--line-height-normal) var(--font-family-body); /* Testimonial */
  --typo-eyebrow:            var(--font-weight-bold) var(--font-size-xs)/var(--line-height-normal) var(--font-family-body); /* Sondertitel über dem Titel, GROSS */
  --typo-eyebrow-tracking:   var(--letter-spacing-widest);
  --typo-label:              var(--font-weight-bold) var(--font-size-xs)/var(--line-height-normal) var(--font-family-body); /* Etikett, Fakten-Label, GROSS */
  --typo-label-tracking:     var(--letter-spacing-wider);

  /* @semantisch | Abstand · Rolle | dimension */
  --space-section:    var(--space-96); /* oben/unten je Abschnitt */
  --space-section-sm: var(--space-48); /* dichte Abschnitte (Indexseite), mobil */
  --space-columns:    var(--space-48); /* zwischen Haupt- und Seitenspalte */
  --space-block:      var(--space-32); /* Innenabstand Box/Karte, Abstand zwischen Boxen */
  --space-block-sm:   var(--space-24); /* enge Box, mobil */
  --space-stack:      var(--space-16); /* Titel → Inhalt, Absatz → Absatz */
  --space-stack-sm:   var(--space-8);  /* eng zusammengehörige Zeilen */

  /* @semantisch | Fokus | dimension */
  --focus-ring-width:  2px;
  --focus-ring-offset: 2px;

  /* @semantisch | Deckkraft | number */
  --opacity-disabled: 0.4;
  --opacity-muted:    0.6;

  /* @semantisch | Ebene | number */
  --z-index-sticky:  100;  /* Navigation */
  --z-index-overlay: 1000; /* Mobil-Menü, Dialog */

  /* @semantisch | Größe | dimension */
  /* Maße von Elementen und Komponenten — nicht Fensterbreite (Breakpoint), nicht Seitenaufbau (Layout). */
  --size-icon-sm:    16px;
  --size-icon-md:    20px;
  --size-icon-lg:    24px;
  --size-control-sm: 32px;
  --size-control-md: 40px;
  --size-control-lg: 44px;  /* Mindest-Trefferfläche Touch */
  --size-button-min: 130px; /* Mindestbreite Knopf (KI-Box) — vorher 120/130 */
  --size-input-min:  320px; /* Mindestbreite Eingabefeld, bevor es umbricht */
  --size-card:       360px; /* Produktkarte im Karussell */
  --size-media:      480px; /* Hero-Bild, wenn es unter dem Text steht — vorher 420/480 */
  --size-popover:    220px; /* Info-Popover */

  /* @semantisch | Layout | dimension */
  /* Breiten des Seitenaufbaus und von Inhalten — nicht Fensterbreite (dafür --breakpoint-*). */
  --layout-content-width:  1148px; /* Inhalt der Seite, alle Vorlagen (Lexikon vorher 1200); so breit wie der Inhalt der Navigation */
  --layout-page-gutter:    var(--space-32); /* Seitenrand neben dem Inhalt: Navigation, Abschnitte, Hero, Footer (seit 2.13.0) */
  --layout-page-width:     calc(var(--layout-content-width) + 2 * var(--layout-page-gutter)); /* Inhalt samt Seitenrand, für Bausteine mit eigenem Rand */
  --layout-sidebar-width:  380px;  /* Seitenspalte Produktseite + Lexikon (Lexikon vorher 340) */
  --layout-narrow-width:   800px;  /* schmaler Abschnitt (Index-Mitte, Logo-Reihe) — vorher 760/780/820 */
  --layout-measure:        720px;  /* Lesebreite Fließtext, Einleitung, Tabelle */
  --layout-measure-narrow: 560px;  /* kurze Texte: Hero-Text, Zitat, Text auf dunkel — vorher 480/560/640 */
  --layout-panel-width:    480px;  /* Dialog, Seitenpanel (heute auf der Website noch ungenutzt) */
  --layout-nav-height:     68px;
  --layout-gutter:        max(var(--space-32), calc((100% - var(--layout-content-width)) / 2));

  /* @semantisch | Karte | gemischt */
  --card-radius:       var(--radius-lg); /* 10 px rund; mit Squircle 16 px (s. @supports am Ende) */
  --card-corner-shape: var(--corner-shape);
  --card-shadow:       var(--shadow-sm);
  --card-shadow-hover: var(--shadow-lg);
  --card-ease:         var(--ease-out);
}

/* Squircle: bei gleichem Radius schneidet die Ecke weniger ab und wirkt straffer. Gleicher optischer
   Eindruck wie 10 px rund ≈ 17 px Squircle (abgeschnittene Fläche 0,21·r² rund vs. 0,073·r² Squircle)
   → nächste Stufe --radius-xl (16 px). Nur wo der Browser corner-shape kann (Chrome/Edge ab 139);
   sonst bleibt die runde 10-px-Ecke. Überschreibt nur bestehende Token (test-tokens.js prüft das). */
@supports (corner-shape: squircle) {
  :root {
    --card-radius: var(--radius-xl);
  }
}