/* ============================================================ Wishalize Base · Design Tokens — OneExpatServices (OES) ------------------------------------------------------------ Single Source of Truth: Elementor Site Settings. Diese Datei verlinkt nur — Farben/Schriften werden in Elementor → Site Settings gepflegt. Fallback-Hex/Schriften greifen, falls Elementor-Globals mal nicht laden. Quelle: OES_Design_Definition (Elementor Kit Export, 2026-06-15) Elementor-IDs (Custom): Farben bg1=520340c CD1-light=251a02e Plain-white=b33313f Typografie Title XXL=5bdc2a9 XL=db3bed7 L=d5b6625 M=69d23f8 S=d9826ee Subline=2404621 Button=5684dbb ============================================================ */ :root { /* ============================================================ FARBEN — System Colors (aus Elementor, stabile IDs) ============================================================ */ --wsh-primary: var(--e-global-color-primary, #516224); /* CD1 — dunkles Oliv */ --wsh-secondary: var(--e-global-color-secondary, #9DC33C); /* CD2 — helles Grün */ --wsh-text: var(--e-global-color-text, #000000); --wsh-accent: var(--e-global-color-accent, #C4723A); /* Komplement — Terracotta */ /* ============================================================ FARBEN — Custom Colors (aus Elementor, projekt-IDs) ============================================================ */ --wsh-complement: var(--e-global-color-accent, #C4723A); /* = Komplement/Terracotta (Akzent-Pop) */ --wsh-complement-light: var(--e-global-color-251a02e, #6B7D39); /* CD1-light — helleres Oliv */ --wsh-primary-light: var(--e-global-color-251a02e, #6B7D39); /* Alias: CD1-light */ --wsh-gray-dark: #4A4A4A; /* neutral, kein Elementor-Global */ --wsh-off-white: var(--e-global-color-520340c, #EAF0EC); /* bg1 — heller Grün-Grau-BG */ --wsh-white: var(--e-global-color-b33313f, #FFFFFF); /* Plain white */ /* ============================================================ TYPOGRAFIE — System (aus Elementor) Primär/Sekundär/Akzent: Plus Jakarta Sans · Text: Inter ============================================================ */ --wsh-font-primary-family: var(--e-global-typography-primary-font-family, "Plus Jakarta Sans"), system-ui, sans-serif; --wsh-font-primary-size: var(--e-global-typography-primary-font-size, 24px); --wsh-font-primary-weight: var(--e-global-typography-primary-font-weight, 600); --wsh-font-secondary-family: var(--e-global-typography-secondary-font-family, "Plus Jakarta Sans"), system-ui, sans-serif; --wsh-font-secondary-size: var(--e-global-typography-secondary-font-size, 21px); --wsh-font-secondary-weight: var(--e-global-typography-secondary-font-weight, 400); --wsh-font-text-family: var(--e-global-typography-text-font-family, "Inter"), system-ui, sans-serif; --wsh-font-text-size: var(--e-global-typography-text-font-size, 18px); --wsh-font-text-weight: var(--e-global-typography-text-font-weight, 400); --wsh-font-accent-family: var(--e-global-typography-accent-font-family, "Plus Jakarta Sans"), system-ui, sans-serif; --wsh-font-accent-size: var(--e-global-typography-accent-font-size, 21px); --wsh-font-accent-weight: var(--e-global-typography-accent-font-weight, 500); /* Generischer Mono-Stack (von mehreren Komponenten genutzt) */ --wsh-font-mono-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* ============================================================ TYPOGRAFIE — Custom Title-Skala + Subline + Button Line-Heights bei OES = Font-Size (sehr tight, lh ~1.0). ============================================================ */ --wsh-title-xxl-family: var(--e-global-typography-5bdc2a9-font-family, "Plus Jakarta Sans"), system-ui, sans-serif; --wsh-title-xxl-size: var(--e-global-typography-5bdc2a9-font-size, 60px); --wsh-title-xxl-weight: var(--e-global-typography-5bdc2a9-font-weight, 600); --wsh-title-xxl-lh: var(--e-global-typography-5bdc2a9-line-height, 60px); --wsh-title-xl-family: var(--e-global-typography-db3bed7-font-family, "Plus Jakarta Sans"), system-ui, sans-serif; --wsh-title-xl-size: var(--e-global-typography-db3bed7-font-size, 51px); --wsh-title-xl-weight: var(--e-global-typography-db3bed7-font-weight, 600); --wsh-title-xl-lh: var(--e-global-typography-db3bed7-line-height, 51px); --wsh-title-l-family: var(--e-global-typography-d5b6625-font-family, "Plus Jakarta Sans"), system-ui, sans-serif; --wsh-title-l-size: var(--e-global-typography-d5b6625-font-size, 45px); --wsh-title-l-weight: var(--e-global-typography-d5b6625-font-weight, 600); --wsh-title-l-lh: var(--e-global-typography-d5b6625-line-height, 45px); --wsh-title-m-family: var(--e-global-typography-69d23f8-font-family, "Plus Jakarta Sans"), system-ui, sans-serif; --wsh-title-m-size: var(--e-global-typography-69d23f8-font-size, 30px); --wsh-title-m-weight: var(--e-global-typography-69d23f8-font-weight, 600); --wsh-title-m-lh: var(--e-global-typography-69d23f8-line-height, 30px); --wsh-title-s-family: var(--e-global-typography-d9826ee-font-family, "Plus Jakarta Sans"), system-ui, sans-serif; --wsh-title-s-size: var(--e-global-typography-d9826ee-font-size, 24px); --wsh-title-s-weight: var(--e-global-typography-d9826ee-font-weight, 600); --wsh-title-s-lh: var(--e-global-typography-d9826ee-line-height, 24px); --wsh-subline-family: var(--e-global-typography-2404621-font-family, "Inter"), system-ui, sans-serif; --wsh-subline-size: var(--e-global-typography-2404621-font-size, 21px); --wsh-button-family: var(--e-global-typography-5684dbb-font-family, "Inter"), system-ui, sans-serif; --wsh-button-size: var(--e-global-typography-5684dbb-font-size, 18px); --wsh-button-weight: var(--e-global-typography-5684dbb-font-weight, 600); --wsh-button-transform: capitalize; /* OES Button-Style */ /* ============================================================ LAYOUT (aus Elementor: container 1440, viewport md 768 / lg 1025) ============================================================ */ --wsh-container-max: 1440px; --wsh-container-pad: 20px; --wsh-breakpoint-md: 768px; --wsh-breakpoint-lg: 1025px; /* ============================================================ SPACING (universal) ============================================================ */ --wsh-space-1: 4px; --wsh-space-2: 8px; --wsh-space-3: 12px; --wsh-space-4: 16px; --wsh-space-5: 20px; --wsh-space-6: 24px; --wsh-space-7: 32px; --wsh-space-8: 48px; --wsh-space-9: 64px; --wsh-space-10: 96px; /* ============================================================ RADII (universal) ============================================================ */ --wsh-radius-sm: 4px; --wsh-radius-md: 12px; --wsh-radius-lg: 18px; --wsh-radius-xl: 22px; --wsh-radius-pill: 999px; /* ============================================================ SHADOWS (universal) ============================================================ */ --wsh-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.12); --wsh-shadow-md: 0 8px 20px rgba(0, 0, 0, 0.18); --wsh-shadow-lg: 0 24px 60px -22px rgba(0, 0, 0, 0.35); --wsh-shadow-hover: 0 26px 50px -22px rgba(0, 0, 0, 0.55); /* ============================================================ EASINGS + DURATIONS (universal) ============================================================ */ --wsh-ease-out: cubic-bezier(0.2, 0.7, 0.3, 1); --wsh-ease-bounce: cubic-bezier(0.2, 0.8, 0.3, 1); --wsh-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1); --wsh-ease-slide: cubic-bezier(0.77, 0, 0.18, 1); /* Off-Canvas Slide */ --wsh-duration-fast: 150ms; --wsh-duration-base: 250ms; --wsh-duration-slow: 400ms; --wsh-duration-slower: 800ms; /* ============================================================ KOMPONENTEN-SPEZIFISCHE TOKENS ============================================================ */ /* Marquee */ --wsh-marquee-speed: 40s; --wsh-marquee-item-size: 22px; --wsh-marquee-bg: transparent; --wsh-marquee-item-color: var(--wsh-primary); /* 360° Perspektive ("Kompass der Perspektiven") — dunkle Radar-Sektion. Die Brand-Akzente referenzieren die globalen Tokens; die dunklen Flächen-/Linienwerte sind sektion-spezifisch (kommen nicht aus Elementor). */ --wsh-p360-bg: #161C0C; /* tiefes Oliv-Schwarz */ --wsh-p360-bg-2: #1F2711; --wsh-p360-surface: rgba(255, 255, 255, 0.04); --wsh-p360-hair: rgba(194, 208, 107, 0.16); --wsh-p360-text: #ECEFE0; /* heller Text auf dunklem Grund */ --wsh-p360-muted: #9BA585; --wsh-p360-accent-1: #E0A36B; /* helle Terracotta (Rolle: Expat) */ --wsh-p360-accent-2: var(--wsh-accent); /* Terracotta (Rolle: Partnerin) */ --wsh-p360-accent-3: var(--wsh-secondary); /* Lime (Rolle: HQ-Leiterin) */ --wsh-p360-accent-4: #C2D06B; /* helles Lime (Rolle: Consultant) */ --wsh-p360-tour-speed: 3400ms; /* Auto-Tour-Intervall */ --wsh-p360-spin-speed: 48s; /* Tempo Ambient-Ring */ /* FAQ "Dossier" (helle Sektion) — Liste + grosses Antwort-Panel. Brand-Akzent = Primary (Oliv); Marker = Secondary (Lime). */ --wsh-faq-bg: #F4F6EC; /* helle, grünlich getönte Fläche */ --wsh-faq-surface: #FFFFFF; /* Antwort-Panel */ --wsh-faq-hair: rgba(81, 98, 36, 0.16); /* oliv-getönte Trennlinie */ --wsh-faq-text: #1B210F; /* dunkler Text */ --wsh-faq-muted: #5B6549; /* gedämpfter Text */ /* Hero "Flug-Szene" (Flat-Design, helle Szene) — Flugzeug + Wolken + Story-Bubbles. Brand-Flächen via globale Tokens; szene-spezifische Werte hier. */ --wsh-pf-sky: #E4ECCF; /* flache Himmelfläche — für Elementor ggf. auf transparent setzen */ --wsh-pf-text: #1B210F; /* Bubble-Text */ --wsh-pf-cloud-shadow: rgba(74, 90, 34, 0.16); /* harter Flat-Offset-Schatten */ /* DL-Ablauf "vertikale Timeline" (helle Sektion). Akzent = Primary, Linie/Node = Secondary. */ --wsh-vt-text: #1B210F; --wsh-vt-muted: #5B6549; --wsh-vt-hair: rgba(81, 98, 36, 0.16); /* Testimonials (helle Sektion) — Featured-Zitat + Auswahl-Avatare. */ --wsh-ts-text: #1B210F; --wsh-ts-muted: #5B6549; --wsh-ts-hair: rgba(81, 98, 36, 0.16); /* ============================================================ NAV — Off-Canvas Mobile-Navigation ------------------------------------------------------------ Panel slidet von rechts. Toggle bleibt im Header, der Close-Button sitzt im Panel (wird per JS injiziert). Breakpoint 1025px = Elementor-Desktop → ab da Desktop-Menü. ============================================================ */ --wsh-nav-panel-width: min(85vw, 380px); --wsh-nav-panel-bg: var(--wsh-white); --wsh-nav-panel-shadow: -4px 0 24px rgba(0, 0, 0, 0.12); --wsh-nav-overlay-bg: rgba(0, 0, 0, 0.45); --wsh-nav-toggle-color: var(--wsh-primary); --wsh-nav-toggle-line-width: 36px; --wsh-nav-toggle-line-height: 3px; --wsh-nav-toggle-gap: 6px; --wsh-nav-breakpoint: 1025px; /* Hinweis: nicht in @media nutzbar, dort fixe Pixel */ --wsh-nav-z-overlay: 9999; --wsh-nav-z-panel: 10001; --wsh-nav-z-toggle: 100; /* Toggle bleibt unter dem Panel */ --wsh-nav-z-close: 10005; /* Close-Button oben auf allem */ /* Nav-Drill (Apple-Style Sub-Menü) */ --wsh-nav-drill-slide-distance: 24px; --wsh-nav-drill-link-color-hover: var(--wsh-secondary); --wsh-nav-divider-color: rgba(81, 98, 36, 0.16); /* = --wsh-ts-hair (Oliv, 16%) */ }