/* ==========================================================================
   GEN Z / DESIGNGUIDE · DESIGN SYSTEM TOKENS (tokens.css)
   --------------------------------------------------------------------------
   Quelle: UIrules/GEN Z · Designguide.pdf (01 / 2026)
   Leitmotiv: "KLARE HALTUNG. KLARE REGELN." / "LAUT IN DER SACHE. KLAR IM DESIGN."
   ========================================================================== */

@font-face {
  font-family: 'BBH Bartle';
  src: local('BBH Bartle Regular'), local('BBH Bartle'), local('BBHBartle-Regular');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ------------------------------------------------------------------------
     01 / TYPO, DIE FÜHRT (Basisskala für kompakte Layouts · Laufweite 0)
     Hauptschrift: Lexend (400 Regular, 700 Bold, 800 ExtraBold, 900 Black)
     Signatur: BBH Bartle Regular (NUR für #GENZREGELT Signatur)
     ------------------------------------------------------------------------ */
  --ds-font-primary: 'Lexend', system-ui, -apple-system, sans-serif;
  --ds-font-signature: 'BBH Bartle', 'Syne', 'Unbounded', 'Arial Black', sans-serif;
  --ds-font-mono: 'Lexend', ui-monospace, monospace;

  /* H1 – Lexend Black 900 · 64 / 68 px · Zentrale Botschaft / Titel */
  --ds-h1-size: 64px;
  --ds-h1-line: 68px;
  --ds-h1-weight: 900;
  --ds-h1-tracking: 0;

  /* H2 – Lexend ExtraBold 800 · 40 / 48 px · Abschnitte / zweite Botschaft */
  --ds-h2-size: 40px;
  --ds-h2-line: 48px;
  --ds-h2-weight: 800;
  --ds-h2-tracking: 0;

  /* H3 – Lexend Bold 700 · 28 / 36 px · Themen / Zwischenüberschriften */
  --ds-h3-size: 28px;
  --ds-h3-line: 36px;
  --ds-h3-weight: 700;
  --ds-h3-tracking: 0;

  /* H4 – Lexend Bold 700 · 20 / 28 px · Kurze Untertitel / Infoblöcke */
  --ds-h4-size: 20px;
  --ds-h4-line: 28px;
  --ds-h4-weight: 700;
  --ds-h4-tracking: 0;

  /* Text – Lexend Regular 400 · 16 / 24 px · Information / Begleittext */
  --ds-text-size: 16px;
  --ds-text-line: 24px;
  --ds-text-weight: 400;
  --ds-text-tracking: 0;

  /* Label – Lexend Regular 400 · 12 / 16 px · Themen / kurze Metadaten */
  --ds-label-size: 12px;
  --ds-label-line: 16px;
  --ds-label-weight: 400;
  --ds-label-tracking: 0;

  /* ------------------------------------------------------------------------
     02 / FARBE MIT FUNKTION
     #212121 Grundfläche · #FF7302 Ein Orange · #FFFFFF Lesbare Information
     Regel: "Schlüsselwörter statt Farbteppich. Orange gezielt zur Betonung.
     Infos in Weiß; Bold sparsam einsetzen."
     ------------------------------------------------------------------------ */
  --ds-color-bg-canvas: #212121;      /* IST · Grundfläche */
  --ds-color-bg-surface: #212121;     /* Reine Grundfläche wie im Designguide */
  --ds-color-bg-elevated: #2A2A2A;    /* Dezente Abstufung für Karten/Module */
  --ds-color-bg-subtle: #181818;      /* Vertiefte Felder / Inputs */
  --ds-color-bg-inverse: #000000;     /* Tiefschwarz (#000000 lt. Guide) */

  /* Information in Weiß (#FFFFFF) */
  --ds-color-text-primary: #FFFFFF;   /* IST · lesbare Information */
  --ds-color-text-secondary: rgba(255, 255, 255, 0.86);
  --ds-color-text-muted: rgba(255, 255, 255, 0.60);
  --ds-color-text-on-accent: #212121; /* Dunkler Text auf #FF7302 (wie im Guide-Kasten) */
  --ds-color-text-inverse: #FFFFFF;

  /* Ein Orange: #FF7302 (Empfehlung für neue Entwürfe) */
  --ds-color-accent: #FF7302;
  --ds-color-accent-near: #FF7300;    /* Nahe Orange-Variante lt. Guide */
  --ds-color-accent-hover: #FF8524;
  --ds-color-accent-soft: rgba(255, 115, 2, 0.12);
  --ds-color-accent-border: rgba(255, 115, 2, 0.55);

  /* Klare Trennlinien wie im Designguide-Raster */
  --ds-color-border-subtle: rgba(255, 255, 255, 0.14);
  --ds-color-border-strong: rgba(255, 255, 255, 0.28);

  /* Kontext-Mapping: Kein bunter Farbteppich! Klare Haltung mit #FFFFFF & #FF7302 */
  --ds-relation-origin-bg: rgba(255, 115, 2, 0.14);
  --ds-relation-origin-text: #FF7302;
  --ds-relation-origin-border: #FF7302;

  --ds-relation-response-bg: rgba(255, 255, 255, 0.08);
  --ds-relation-response-text: #FFFFFF;
  --ds-relation-response-border: #FF7302;

  --ds-relation-evolution-bg: rgba(255, 255, 255, 0.06);
  --ds-relation-evolution-text: #FFFFFF;
  --ds-relation-evolution-border: rgba(255, 255, 255, 0.65);

  --ds-relation-background-bg: rgba(255, 255, 255, 0.04);
  --ds-relation-background-text: rgba(255, 255, 255, 0.88);
  --ds-relation-background-border: rgba(255, 255, 255, 0.35);

  /* ------------------------------------------------------------------------
     03 / ABSTÄNDE & LESBARKEIT ("Kurze Zeilen, klare Abstände")
     ------------------------------------------------------------------------ */
  --ds-space-2xs: 4px;
  --ds-space-xs: 8px;
  --ds-space-sm: 12px;
  --ds-space-md: 16px;
  --ds-space-lg: 24px;
  --ds-space-xl: 32px;
  --ds-space-2xl: 48px;

  --ds-radius-sm: 2px;
  --ds-radius-md: 4px;
  --ds-radius-lg: 6px;
  --ds-radius-pill: 2px; /* Kantige, klare Haltung statt weicher Pillen */

  --ds-shadow-sm: none;
  --ds-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45);
  --ds-shadow-focus: 0 0 0 2px var(--ds-color-accent);

  --ds-container-max: 1380px;
  --ds-reading-max: 62ch; /* Kurze Zeilen für maximale Lesbarkeit */
}

/* ==========================================================================
   TYPOGRAFIE-KLASSEN NACH BASISSKALA (01 / Typo, die führt)
   Laufweite 0 · Versalien für kurze Statements & Labels · Fließtext normal
   ========================================================================== */

.ds-h1 {
  font-family: var(--ds-font-primary);
  font-size: clamp(2.5rem, 4.5vw, var(--ds-h1-size));
  line-height: calc(clamp(2.5rem, 4.5vw, var(--ds-h1-size)) * 1.0625);
  font-weight: var(--ds-h1-weight);
  letter-spacing: 0;
  color: var(--ds-color-text-primary);
  text-transform: uppercase; /* Versalien für kurze Statements */
}

.ds-h2 {
  font-family: var(--ds-font-primary);
  font-size: clamp(1.75rem, 3vw, var(--ds-h2-size));
  line-height: calc(clamp(1.75rem, 3vw, var(--ds-h2-size)) * 1.2);
  font-weight: var(--ds-h2-weight);
  letter-spacing: 0;
  color: var(--ds-color-text-primary);
}

.ds-h3 {
  font-family: var(--ds-font-primary);
  font-size: clamp(1.35rem, 2.2vw, var(--ds-h3-size));
  line-height: calc(clamp(1.35rem, 2.2vw, var(--ds-h3-size)) * 1.285);
  font-weight: var(--ds-h3-weight);
  letter-spacing: 0;
  color: var(--ds-color-text-primary);
}

.ds-h4 {
  font-family: var(--ds-font-primary);
  font-size: var(--ds-h4-size);
  line-height: var(--ds-h4-line);
  font-weight: var(--ds-h4-weight);
  letter-spacing: 0;
  color: var(--ds-color-text-primary);
}

.ds-text {
  font-family: var(--ds-font-primary);
  font-size: var(--ds-text-size);
  line-height: var(--ds-text-line);
  font-weight: var(--ds-text-weight);
  letter-spacing: 0;
  color: var(--ds-color-text-primary);
}

.ds-label {
  font-family: var(--ds-font-primary);
  font-size: var(--ds-label-size);
  line-height: var(--ds-label-line);
  font-weight: var(--ds-label-weight);
  letter-spacing: 0; /* Laufweite 0 lt. Designguide */
  text-transform: uppercase; /* Versalien für Labels: FRIEDEN · KLIMASCHUTZ */
}

/* BBH Bartle Regular · NUR für die Signatur #GENZREGELT */
.ds-signature {
  font-family: var(--ds-font-signature);
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ds-color-text-primary);
  font-stretch: expanded;
}

/* Schlüsselwörter statt Farbteppich: Orange (#FF7302) gezielt zur Betonung */
.ds-accent-keyword {
  color: var(--ds-color-accent);
}