/* TIT_DESIGN_V2 – Visual-/Structure-Only Token-Layer. Aendert ausschliesslich Darstellung: Farben, Typografie, Abstaende, Rundung, Dichte und die Reihenfolge bereits vorhandener Bereiche. Keine Inhalte, Links, Formulare, IDs oder Event-Hooks werden beruehrt. Aktiv nur wenn gesetzt ist. */ html[data-titv2] { --v2-ink: #0b1220; --v2-ink-soft: #384258; --v2-surface: #ffffff; --v2-surface-2: #f4f6fa; --v2-line: rgba(11, 18, 32, .12); --v2-gold: #f2c14e; --v2-gold-deep: #c99a20; --v2-navy: #0d1526; --v2-accent: #1f6feb; --v2-radius: 18px; --v2-gap: 18px; --v2-pad: 18px; --v2-font-base: 17px; --v2-font-lead: 19px; --v2-font-h1: clamp(28px, 7vw, 46px); --v2-font-h2: clamp(21px, 4.6vw, 30px); --v2-shadow: 0 14px 34px rgba(11, 18, 32, .12); --v2-hero-order: 1; --v2-trust-order: 2; --v2-need-order: 3; --v2-pkg-order: 4; --v2-rest-order: 5; } /* ---------- Presets: nur Token-Werte ---------- */ html[data-titv2="01"] { /* Swiss Gold Classic */ --v2-surface-2: #fbf7ee; --v2-gold: #e8b53a; --v2-accent: #8a6a12; --v2-radius: 16px; } html[data-titv2="02"] { /* Executive Night */ --v2-ink: #f4f6fb; --v2-ink-soft: #b6c0d4; --v2-surface: #131b2b; --v2-surface-2: #0d1526; --v2-line: rgba(244,246,251,.14); --v2-gold: #f5cc63; --v2-accent: #f5cc63; --v2-shadow: 0 18px 44px rgba(0,0,0,.55); --v2-radius: 20px; } html[data-titv2="03"] { /* Clean Light */ --v2-surface-2: #f2f6fd; --v2-accent: #1f6feb; --v2-gold: #ffcf4d; --v2-radius: 14px; --v2-gap: 20px; } html[data-titv2="04"] { /* Video First */ --v2-surface-2: #f0f2f7; --v2-radius: 22px; --v2-hero-order: 1; --v2-trust-order: 2; --v2-need-order: 4; --v2-pkg-order: 3; } html[data-titv2="05"] { /* App Grid */ --v2-radius: 22px; --v2-gap: 14px; --v2-pad: 14px; --v2-surface-2: #eef1f7; --v2-need-order: 2; --v2-trust-order: 3; } html[data-titv2="06"] { /* Compact Conversion */ --v2-gap: 12px; --v2-pad: 13px; --v2-radius: 14px; --v2-font-base: 16px; --v2-pkg-order: 2; --v2-trust-order: 3; --v2-need-order: 4; } html[data-titv2="07"] { /* Premium Editorial */ --v2-surface-2: #f7f5f1; --v2-ink: #10131a; --v2-gold: #c9a227; --v2-accent: #10131a; --v2-radius: 8px; --v2-gap: 24px; --v2-pad: 22px; --v2-font-base: 18px; --v2-font-lead: 20px; } html[data-titv2="08"] { /* Learning Focus */ --v2-surface-2: #eef7f2; --v2-accent: #12805c; --v2-gold: #f2c14e; --v2-need-order: 2; --v2-pkg-order: 5; --v2-rest-order: 3; } html[data-titv2="09"] { /* Swiss Academy */ --v2-surface-2: #fbf3f3; --v2-accent: #d52b1e; --v2-gold: #f2c14e; --v2-radius: 12px; } html[data-titv2="10"] { /* Paket Direkt */ --v2-surface-2: #f5f7fb; --v2-pkg-order: 2; --v2-trust-order: 3; --v2-need-order: 4; } /* ---------- Basis-Lesbarkeit (mobile first) ---------- */ html[data-titv2] body { font-size: var(--v2-font-base); line-height: 1.55; -webkit-text-size-adjust: 100%; overflow-x: hidden; } html[data-titv2] p, html[data-titv2] li, html[data-titv2] .tmv2-menu a span, html[data-titv2] .card-desc { font-size: var(--v2-font-base); } html[data-titv2] h1 { font-size: var(--v2-font-h1); line-height: 1.1; letter-spacing: -.01em; } html[data-titv2] h2 { font-size: var(--v2-font-h2); line-height: 1.18; } html[data-titv2] a, html[data-titv2] button, html[data-titv2] .tmv2-menu a, html[data-titv2] .tmv2-quickbar a { min-height: 44px; } html[data-titv2] img { max-width: 100%; height: auto; } html[data-titv2] :focus-visible { outline: 3px solid var(--v2-accent); outline-offset: 2px; } /* ---------- Karten und Flaechen ---------- */ html[data-titv2] .tmv2-start-panel, html[data-titv2] .tmv2-view, html[data-titv2] .home-package-grid > *, html[data-titv2] .grid > .card, html[data-titv2] .tmv2-service-grid > *, html[data-titv2] .tmv2-contact-grid > * { border-radius: var(--v2-radius); } html[data-titv2] .home-package-grid > * { background: var(--v2-surface); border: 1px solid var(--v2-line); box-shadow: var(--v2-shadow); padding: var(--v2-pad); } html[data-titv2] .home-price { font-weight: 800; letter-spacing: -.01em; } html[data-titv2] .home-packages, html[data-titv2] .tmv2-home-packages { gap: var(--v2-gap); } /* ---------- Reihenfolge vorhandener Bereiche (nur visuell) ---------- */ html[data-titv2] .tmv2-scroll { display: flex; flex-direction: column; } html[data-titv2] .tmv2-scroll > .tmv2-brand { order: 0; } html[data-titv2] .tmv2-scroll > .tmv2-quickbar { order: 1; } html[data-titv2] .tmv2-scroll > #tmv2AppTop { order: 2; } html[data-titv2] .tmv2-scroll > #tmv2MenuView { order: 3; } html[data-titv2] #tmv2MenuView { display: flex; flex-direction: column; } html[data-titv2] #tmv2MenuView > .tmv2-home-video { order: var(--v2-hero-order); } html[data-titv2] #tmv2MenuView > .tmv2-menu-head { order: var(--v2-trust-order); } html[data-titv2] #tmv2MenuView > #tmv2PrimaryMenu { order: var(--v2-need-order); } html[data-titv2] #tmv2MenuView > .tmv2-package-title, html[data-titv2] #tmv2MenuView > #tmv2PackageSlot { order: var(--v2-pkg-order); } html[data-titv2] #tmv2MenuView > .tmv2-section-head, html[data-titv2] #tmv2MenuView > .tmv2-service-grid, html[data-titv2] #tmv2MenuView > .tmv2-contact-grid { order: var(--v2-rest-order); } /* ---------- Kopf und Navigation im Portal ---------- */ html[data-titv2] .tit-global-header { background: var(--v2-surface); border-bottom: 1px solid var(--v2-line); } html[data-titv2] .tit-global-nav a { font-size: var(--v2-font-base); min-height: 44px; display: inline-flex; align-items: center; } html[data-titv2] .tit-global-nav a.primary { background: var(--v2-gold); color: #11161f; border-radius: 999px; padding: 8px 16px; font-weight: 800; } html[data-titv2] .tit-global-logo { max-height: 46px; width: auto; } /* ---------- Dunkle Variante: Flaechen nachziehen ---------- */ html[data-titv2="02"] body { background: var(--v2-surface-2); color: var(--v2-ink); } html[data-titv2="02"] .home-package-grid > *, html[data-titv2="02"] .tit-global-header { background: var(--v2-surface); color: var(--v2-ink); } /* ---------- Keine horizontale Ueberbreite ---------- */ html[data-titv2] .tmv2-scroll, html[data-titv2] .home-package-grid, html[data-titv2] .grid { max-width: 100%; } @media (min-width: 900px) { html[data-titv2] { --v2-pad: 26px; --v2-gap: 24px; } html[data-titv2] body { font-size: calc(var(--v2-font-base) + 1px); } } /* ---------- TIT_PKG_CONTRAST_V1: Paketkarten immer lesbar ---------- */ html[data-titv2]:not([data-titv2="02"]) .home-package-grid > *, html[data-titv2]:not([data-titv2="02"]) .home-package { color: var(--v2-ink); } html[data-titv2]:not([data-titv2="02"]) .home-package h3, html[data-titv2]:not([data-titv2="02"]) .home-package-grid > * h3 { color: var(--v2-ink); } html[data-titv2]:not([data-titv2="02"]) .home-package-desc, html[data-titv2]:not([data-titv2="02"]) .home-package ul, html[data-titv2]:not([data-titv2="02"]) .home-package li { color: #3c4657; } html[data-titv2]:not([data-titv2="02"]) .home-price-current { color: var(--v2-accent); } html[data-titv2]:not([data-titv2="02"]) .home-price-old { color: #77808f; } html[data-titv2]:not([data-titv2="02"]) .home-package-cta { background: var(--v2-gold); color: #16120a; font-weight: 800; } html[data-titv2]:not([data-titv2="02"]) .home-package-badge { color: #16120a; } /* ---------- TIT_LOGO_SWAP_CSS_V1: Logo folgt der Flaechenhelligkeit ---------- */ .tit-logo-swap{display:inline-flex;align-items:center;line-height:0} .tit-logo-swap .tit-logo-var-light{display:none} .tit-logo-swap.on-light .tit-logo-var-light{display:inline-block} .tit-logo-swap.on-light .tit-logo-var-dark{display:none} /* ---------- TIT_PKG_CONTRAST_V2: auch Hover/Fokus/Auswahl lesbar ---------- */ html[data-titv2]:not([data-titv2="02"]) .home-package:hover, html[data-titv2]:not([data-titv2="02"]) .home-package:focus-within, html[data-titv2]:not([data-titv2="02"]) .home-package.is-selected, html[data-titv2]:not([data-titv2="02"]) .home-package[aria-selected="true"]{ background: #ffffff; color: var(--v2-ink); border-color: var(--v2-gold-deep); } html[data-titv2]:not([data-titv2="02"]) .home-package:hover .home-package-desc, html[data-titv2]:not([data-titv2="02"]) .home-package:hover li, html[data-titv2]:not([data-titv2="02"]) .home-package.is-selected .home-package-desc, html[data-titv2]:not([data-titv2="02"]) .home-package.is-selected li{ color:#2b3446; } html[data-titv2]:not([data-titv2="02"]) .home-package:hover h3, html[data-titv2]:not([data-titv2="02"]) .home-package.is-selected h3{ color: var(--v2-ink); } html[data-titv2]:not([data-titv2="02"]) .home-package-cta:hover, html[data-titv2]:not([data-titv2="02"]) .home-package-cta:focus{ background: var(--v2-gold-deep); color:#fff8e6; } html[data-titv2="02"] .home-package:hover .home-package-desc, html[data-titv2="02"] .home-package:hover li{ color:#dbe3f2; } @media (max-width: 700px){ html[data-titv2] .home-package-desc, html[data-titv2] .home-package li{ font-size: 15px; line-height:1.5; } }