/* ========================================================================= ToShift · Brand Stylesheet — Single Source of Truth Quelle: TSH Visual Identity Guidelines, Mai 2026 (Studio KON) Verlinke aus jedem HTML: 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 (drei Schriften, drei Rollen — Entscheidung Silvio Funke 2026-09-28) ---- Headline: PP Monument Extended Regular (kurz & impactvoll, line-height 100%) → --ts-head-font Subline: PP Neue Montreal SemiBold (Unterzeilen, line-height 100%) → --ts-sub-font Copy/UI: Aptos (Fließtext, Oberflächen, Mails, 150%) → --ts-body-font Aptos ist die COPY-Schrift, kein Fallback mehr. Neue Montreal nie als Fließtext, Monument nie als Fließtext. */ --ts-head-font: "PP Monument Extended","Monument Extended","Aptos Display",Aptos,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; --ts-sub-font: "PP Neue Montreal","Neue Montreal",Aptos,-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif; --ts-body-font: Aptos,"Aptos Display",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; } /* ========================================================================= FONTS — die Schnitte liegen seit 2026-09-14 im Skill (kopiert aus "01 Vorlagen & Brand/CI/TYPOGRAPHY"). Pfade relativ zu dieser Datei. Format .otf statt .woff2: so liegen die Originale vor, ~50 KB je Schnitt — klein genug, und für .woff2 fehlt lokal das Konvertierwerkzeug. Ohne diese Dateien greift automatisch der Aptos/System-Fallback. LIZENZ PP: toShift hat die PP-Schriften kommerziell lizenziert - komplette Nutzung inkl. Web-Einbettung (Stand 2026-09-14). Nachweis liegt bei toShift, nicht im Repo. LIZENZ APTOS (seit 2026-09-28 Copy-Schrift per @font-face): toShift besitzt eine Lizenz, die die Web-Einbettung abdeckt (bestaetigt Silvio Funke 2026-09-28; Nachweis bei toShift, nicht im Repo). Die beiliegende Microsoft-EULA in fonts/aptos/ ist nur die Download-EULA der Einzelinstallation und nicht die massgebliche Lizenz. ========================================================================= */ @font-face{ font-family:"PP Monument Extended"; src:url("fonts/pp-monument-extended/PPMonumentExtended-Regular.otf") format("opentype"); font-weight:400; font-display:swap; } @font-face{ font-family:"PP Neue Montreal"; src:url("fonts/pp-neue-montreal/PPNeueMontreal-SemiBold.otf") format("opentype"); font-weight:600; font-display:swap; } @font-face{ font-family:"PP Neue Montreal"; src:url("fonts/pp-neue-montreal/PPNeueMontreal-Regular.otf") format("opentype"); font-weight:400; font-display:swap; } @font-face{ font-family:"PP Neue Montreal"; src:url("fonts/pp-neue-montreal/PPNeueMontreal-Medium.otf") format("opentype"); font-weight:500; font-display:swap; } @font-face{ font-family:"PP Neue Montreal"; src:url("fonts/pp-neue-montreal/PPNeueMontreal-Italic.otf") format("opentype"); font-weight:400; font-style:italic; font-display:swap; } @font-face{ font-family:"Aptos"; src:url("fonts/aptos/Aptos.ttf") format("truetype"); font-weight:400; font-style:normal; font-display:swap; } @font-face{ font-family:"Aptos"; src:url("fonts/aptos/Aptos-Italic.ttf") format("truetype"); font-weight:400; font-style:italic; font-display:swap; } @font-face{ font-family:"Aptos"; src:url("fonts/aptos/Aptos-SemiBold.ttf") format("truetype"); font-weight:600; font-style:normal; font-display:swap; } @font-face{ font-family:"Aptos"; src:url("fonts/aptos/Aptos-SemiBold-Italic.ttf") format("truetype"); font-weight:600; font-style:italic; font-display:swap; } @font-face{ font-family:"Aptos"; src:url("fonts/aptos/Aptos-Bold.ttf") format("truetype"); font-weight:700; font-style:normal; font-display:swap; } @font-face{ font-family:"Aptos"; src:url("fonts/aptos/Aptos-Bold-Italic.ttf") format("truetype"); font-weight:700; font-style:italic; font-display:swap; } /* ========================================================================= TYPO-UTILITIES — drei Klassen, drei Schriften. Nie mischen. ========================================================================= */ .ts-head{ font-family:var(--ts-head-font); font-weight:400; line-height:1.0; letter-spacing:-.005em; } .ts-sub { font-family:var(--ts-sub-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 . 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): Auto-Umschaltung hell/dunkel: zwei , 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; }