/* =========================================================================
   ToShift · Brand Stylesheet — Single Source of Truth
   Quelle: TSH Visual Identity Guidelines, Mai 2026 (Studio KON)
   Verlinke aus jedem HTML:  <link rel="stylesheet" href="../_Brand/brand.css">
   Tokens (var(--ts-*)) und Utility-Klassen stehen danach global zur Verfügung.
   ========================================================================= */

:root{
  /* ---- Farben (exakt aus den Guidelines) ---- */
  --ts-blue:   #0C15C3;   /* Medium Blue · PRIMARY   · PANTONE 2736 C */
  --ts-navy:   #060A4B;   /* Navy        · SECONDARY · PANTONE 2757 C */
  --ts-grey:   #CBD2D0;   /* Dust Grey   · SECONDARY · PANTONE 420 C  */
  --ts-orchid: #590EB6;   /* Dark Orchid · TERTIARY  · PANTONE Violet C */
  --ts-yellow: #FFBC00;   /* Orange Yellow · TERTIARY · PANTONE 1235 C */

  /* ---- Abgeleitete Flächen-/Textwerte ---- */
  --ts-paper: #ffffff;
  --ts-mist:  #f4f5fb;    /* heller Doku-Hintergrund */
  --ts-ink:   #0a0d2e;    /* Fließtext auf hell */
  --ts-mute:  #5a5f86;    /* gedämpfter Text */

  /* ---- Signature Gradient (Hintergründe, NIE auf dem Logo) ---- */
  --ts-grad: radial-gradient(120% 120% at 75% 8%, #1f7cf5 0%, #0C15C3 40%, #060A4B 100%);

  /* ---- Typografie ----
     Primär: PP Monument Extended (Headlines, kurz & impactvoll, line-height 100%)
             PP Neue Montreal (Subline Semibold / Copy Regular, line-height 150%)
     Fallback laut Guidelines: Aptos (NICHT Inter) */
  --ts-head-font: "PP Monument Extended","Monument Extended","Aptos Display",Aptos,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
  --ts-body-font: "PP Neue Montreal","Neue Montreal",Aptos,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* =========================================================================
   FONTS — für pixelgenaue, offline-identische Darstellung die .woff2 Dateien
   nach _Brand/fonts/ legen und die folgenden Blöcke aktivieren (Kommentar weg).
   Ohne diese Dateien greift automatisch der Aptos/System-Fallback.
   ========================================================================= */
/*
@font-face{ font-family:"PP Monument Extended"; src:url("fonts/PPMonumentExtended-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"PP Neue Montreal"; src:url("fonts/PPNeueMontreal-Regular.woff2") format("woff2"); font-weight:400; font-display:swap; }
@font-face{ font-family:"PP Neue Montreal"; src:url("fonts/PPNeueMontreal-SemiBold.woff2") format("woff2"); font-weight:600; font-display:swap; }
@font-face{ font-family:"PP Neue Montreal"; src:url("fonts/PPNeueMontreal-Italic.woff2") format("woff2"); font-weight:400; font-style:italic; font-display:swap; }
*/

/* =========================================================================
   TYPO-UTILITIES
   ========================================================================= */
.ts-head{ font-family:var(--ts-head-font); font-weight:400; line-height:1.0; letter-spacing:-.005em; }
.ts-sub { font-family:var(--ts-body-font); font-weight:600; line-height:1.0; }
.ts-copy{ font-family:var(--ts-body-font); font-weight:400; line-height:1.5; }

/* =========================================================================
   LOGO — offizielle Assets in _Brand/logo/ (Studio KON, ersetzt 2026-06-01)
   Einbinden als <img>. Pro Hintergrund die richtige Variante wählen:
     · "...RGB color.svg"  = Navy→Blau (Color)    → auf HELLEM Grund
     · "...RGB pos.svg"    = Weiß (Positive)       → auf DUNKLEM Grund / Gradient
   Verfügbare Lock-ups (jeweils color + pos):
     · Signet                         → TOSHIFT Logo Signet RGB {color|pos}.svg
     · Logo (Signet über Wordmark)    → TOSHIFT Logo RGB {color|pos}.svg
     · Logo w/ Subline                → TOSHIFT Logo w- Subline RGB {color|pos}.svg
     · Logo Landscape                 → TOSHIFT Logo Landscape RGB {color|pos}.svg
     · Logo Landscape w/ Subline      → TOSHIFT Logo Landscape w- Subline RGB {color|pos}.svg
     · Square                         → TOSHIFT Logo Square RGB {color|pos}.svg
     · Wordmark (nur Schriftzug)      → TOSHIFT Wordmark Landscape ... .svg
   Dateinamen enthalten Leerzeichen → in HTML-src als %20 kodieren.

   Beispiel (hell):  <img class="ts-logo" src="../_Brand/logo/TOSHIFT%20Logo%20Landscape%20RGB%20color.svg" alt="TOSHIFT">
   Auto-Umschaltung hell/dunkel: zwei <img>, eines .ts-logo--color, eines
   .ts-logo--pos; auf dunklem Container .ts-on-dark setzen. */
.ts-logo{ height:1.6em; width:auto; display:block; }
.ts-logo--pos{ display:none; }
.ts-on-dark .ts-logo--color{ display:none; }
.ts-on-dark .ts-logo--pos{ display:block; }