/* ============================================================
   TOKENS — die EINZIGE Datei mit Designentscheidungen.
   Befuellt aus dna.yaml am 04.09.2026 (Wahl B2, entbubblet).
   Welt: Weiss + Eisblau-Wechselflaeche, Markenblau-Akzent,
   dunkelblaue Macht-Buehne, Gelb NUR als Unterstrich/Marker.
   ============================================================ */

:root {
  /* Farben (max. 3 Eigenfarben + Neutrale, dna.yaml anzahl-max) */
  --farbe-flaeche: #ffffff;      /* Hauptgrund */
  --farbe-flaeche-alt: #F2F6F8;  /* Eisblau-Wechselflaeche */
  --farbe-text: #12262F;
  --farbe-text-gedimmt: color-mix(in srgb, var(--farbe-text) 62%, var(--farbe-flaeche));
  --farbe-akzent: #125E8A;       /* Markenblau aus dem Logo */
  --farbe-auf-akzent: #ffffff;   /* Kontrast 5.5:1 auf Markenblau — ok */
  --farbe-buehne: #0E3A54;       /* dunkelblaue Macht-Buehne (max. 2 pro Seite) */
  --farbe-auf-buehne: #ffffff;
  --farbe-auf-buehne-gedimmt: #CDE2EE;
  --farbe-signatur: #F5D66B;     /* Gelb: NUR Unterstrich, Marker, Sterne — nie Flaeche */
  --farbe-linie: color-mix(in srgb, var(--farbe-text) 16%, transparent);
  --farbe-fehler: #B42318;       /* Formularfehler (Paul 06.09.2026: "Rot oder so"), nur dort */

  /* Typografie — geladen in fonts.css (selbst gehostet) */
  --schrift-display: 'Bricolage Grotesque', 'Arial Black', sans-serif;
  --schrift-text: 'Work Sans', 'Segoe UI', sans-serif;
  --skala: 1.25;                 /* aus dna.yaml */
  --text-basis: 1.125rem;
  --text-s: calc(var(--text-basis) / var(--skala));
  --text-m: var(--text-basis);
  --text-l: calc(var(--text-basis) * var(--skala));
  --text-xl: calc(var(--text-l) * var(--skala));
  --text-2xl: calc(var(--text-xl) * var(--skala));
  --text-3xl: calc(var(--text-2xl) * var(--skala));
  --text-display: calc(var(--text-3xl) * var(--skala));
  --text-buehne: clamp(3rem, 8.5vw, 6.5rem);  /* der EINE laute Versal-Moment (typo-sprung ~6) */
  --zeilenhoehe-text: 1.55;
  --zeilenhoehe-eng: 1.05;

  /* Form — kantig statt bubbly (Korrektur Paul 04.09.2026) */
  --radius: 12px;                /* Karten */
  --radius-klein: 8px;           /* Buttons, Chips */
  --linie: 1px solid var(--farbe-linie);

  /* Oberflaechen-Register (dna.yaml -> oberflaeche) */
  --schatten-flach: none;
  --schatten-schwebend: 0 14px 28px rgb(14 58 84 / 22%);  /* NUR gedrehtes Element + primaerer CTA */
  --kontur: 1px solid var(--farbe-linie);                  /* feine Kontur auf Karten statt Weichzeichner */
  --verlauf-zonierung: none;
  --verlauf-akzent: none;
  --farbe-toenung: var(--farbe-flaeche-alt);
  --akzentkante: 3px solid var(--farbe-signatur);          /* gelber Aufzaehlungs-Strich (Signatur-Ort 4) */

  /* Signatur: KLARMANN_-Unterstrich in Gelb (Orte: Wortmarke, lautes
     H1-Wort, Stat-Unterstreichung, Aufzaehlungs-Strich) */
  --signatur-unterstrich: 0.09em solid var(--farbe-signatur);

  /* Layout */
  --container-max: 1120px;       /* aus dna.yaml */
  --raum-1: 0.5rem;
  --raum-2: 1rem;
  --raum-3: 2rem;
  --raum-4: 4rem;
  --raum-sektion: 6rem;
  --textspalte: 65ch;

  /* Verspielt, dosiert: GENAU EIN gedrehtes Element pro Seite */
  --drehung-verspielt: rotate(-3deg);

  /* Feinschliff 04.09.2026: Buehnen-Innenflaeche + Countup-Dauer */
  --farbe-auf-buehne-flaeche: color-mix(in srgb, #ffffff 9%, transparent);
  --dauer-zahl: 1100ms;

  /* Runde 7, 09.09.2026 (Paul: "paar mehr Effekte"): Hover-Schatten NUR auf
     Karten und Knoepfen im Hover-Zustand, Dauer fuer das Einblenden beim Scrollen */
  --schatten-hover: 0 10px 24px rgb(14 58 84 / 14%);
  --dauer-enthuellen: 550ms;
}

/* Mobil-Skala (Paul 10.09.2026, Screenshots vom iPhone: "viele Darstellungsfehler,
   zu gross"): kleinere Basis, flacherer Sprung, leiserer Versal-Moment, weniger
   Sektionsluft. Alle Groessen leiten sich weiter aus der Skala ab, nichts wird
   einzeln ueberschrieben. Desktop bleibt unveraendert. */
@media (max-width: 720px) {
  :root {
    --text-basis: 1rem;            /* 16px statt 18px */
    --skala: 1.18;                 /* 3xl = 31px statt 44px, 2xl = 26px statt 35px */
    --text-buehne: clamp(2.4rem, 10.5vw, 3rem);  /* AUS TOUCHPOINTS WERDEN KUNDEN passt in eine Spalte */
    --raum-sektion: 4rem;
    --raum-4: 3rem;
  }
}