/* ============================================================ Wishalize MTI-Child · Design Tokens — Münger Treuhand & Immobilien ------------------------------------------------------------ Single Source of Truth: Elementor Site Settings. Diese Datei verlinkt nur — Farben/Schriften werden in Elementor → Site Settings gepflegt. >>> PRO PROJEKT ANPASSEN <<< 1. Custom-Color-IDs in der Elementor-Export-JSON nachschauen (Tools → Import/Export Kit → JSON enthält die _id-Werte) und unten in die var(--e-global-color-XXXXXXX, FALLBACK) eintragen. 2. Custom-Typography-IDs analog (Title-Skala, Subline, Button). 3. Fallback-Werte mit den Brand-Farben + Schriften des Kunden ersetzen — als Sicherheitsnetz, wenn Elementor mal nicht lädt. Syntax: var(--e-global-…, FALLBACK) ============================================================ */ :root { /* ============================================================ FARBEN — System Colors (aus Elementor) Diese IDs (primary/secondary/text/accent) sind in Elementor STABIL benannt — bleiben gleich pro Projekt. ============================================================ */ --wsh-primary: var(--e-global-color-primary, #36499B); /* Treuhand-Blau */ --wsh-secondary: var(--e-global-color-secondary, #04955F); /* Immobilien-Grün */ --wsh-text: var(--e-global-color-text, #1B1F2A); /* TODO: Fliesstext-Farbe mit Kunde bestätigen */ --wsh-accent: var(--e-global-color-accent, #6173C0); /* Treuhand-Blau hell */ /* ============================================================ FARBEN — Sparten (MTI-spezifisch) ------------------------------------------------------------ Münger führt zwei Sparten mit eigener Farbwelt. Komponenten, die sparten-abhängig einfärben (z.B. Nav-Drill, Kästli, CTA), referenzieren AUSSCHLIESSLICH diese vier Tokens — nicht die Hex-Werte. So bleibt ein späterer Farb-Tweak eine Ein-Zeilen- Änderung. ============================================================ */ --wsh-treuhand: #36499B; --wsh-treuhand-light: #6173C0; --wsh-immobilien: #04955F; --wsh-immobilien-light: #30B684; /* ============================================================ FARBEN — Custom Colors (aus Elementor) IDs aus der Elementor-Export-JSON eintragen (in den Default unten nur den Hex setzen). ============================================================ */ --wsh-complement: var(--e-global-color-TODO_ID, #04955F); /* = Immobilien-Grün */ --wsh-complement-light: var(--e-global-color-TODO_ID, #30B684); --wsh-gray-dark: var(--e-global-color-TODO_ID, #4A4A4A); --wsh-off-white: var(--e-global-color-TODO_ID, #F5F6F8); --wsh-white: var(--e-global-color-TODO_ID, #FFFFFF); /* ============================================================ TYPOGRAFIE — System (aus Elementor) ============================================================ */ --wsh-font-primary-family: var(--e-global-typography-primary-font-family, "TODO_FONT"), 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, "TODO_FONT"), 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, "TODO_FONT"), 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, "TODO_FONT"), 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 IDs aus Elementor-Export-JSON eintragen. ============================================================ */ --wsh-title-xxl-family: var(--e-global-typography-TODO_ID-font-family, "TODO_FONT"), system-ui, sans-serif; --wsh-title-xxl-size: var(--e-global-typography-TODO_ID-font-size, 60px); --wsh-title-xxl-weight: var(--e-global-typography-TODO_ID-font-weight, 500); --wsh-title-xl-family: var(--e-global-typography-TODO_ID-font-family, "TODO_FONT"), system-ui, sans-serif; --wsh-title-xl-size: var(--e-global-typography-TODO_ID-font-size, 45px); --wsh-title-xl-weight: var(--e-global-typography-TODO_ID-font-weight, 500); --wsh-title-l-family: var(--e-global-typography-TODO_ID-font-family, "TODO_FONT"), system-ui, sans-serif; --wsh-title-l-size: var(--e-global-typography-TODO_ID-font-size, 39px); --wsh-title-l-weight: var(--e-global-typography-TODO_ID-font-weight, 500); --wsh-title-m-family: var(--e-global-typography-TODO_ID-font-family, "TODO_FONT"), system-ui, sans-serif; --wsh-title-m-size: var(--e-global-typography-TODO_ID-font-size, 30px); --wsh-title-m-weight: var(--e-global-typography-TODO_ID-font-weight, 500); --wsh-title-s-family: var(--e-global-typography-TODO_ID-font-family, "TODO_FONT"), system-ui, sans-serif; --wsh-title-s-size: var(--e-global-typography-TODO_ID-font-size, 24px); --wsh-title-s-weight: var(--e-global-typography-TODO_ID-font-weight, 500); --wsh-subline-family: var(--e-global-typography-TODO_ID-font-family, "TODO_FONT"), system-ui, sans-serif; --wsh-subline-size: var(--e-global-typography-TODO_ID-font-size, 21px); --wsh-button-family: var(--e-global-typography-TODO_ID-font-family, "TODO_FONT"), system-ui, sans-serif; --wsh-button-size: var(--e-global-typography-TODO_ID-font-size, 18px); /* ============================================================ LAYOUT ============================================================ */ --wsh-container-max: 1440px; --wsh-container-pad: 20px; --wsh-breakpoint-md: 768px; --wsh-breakpoint-lg: 1025px; /* ============================================================ SPACING (universal — selten zu ändern) ============================================================ */ --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 — pro Projekt evtl. Brand-spezifisch ändern) ============================================================ */ --wsh-radius-sm: 4px; --wsh-radius-md: 12px; --wsh-radius-lg: 18px; --wsh-radius-xl: 22px; --wsh-radius-pill: 999px; /* ============================================================ SHADOWS (universal — Werte werden über RGBA auf Primary gemischt; bei dunklem Primary ggf. anpassen) ============================================================ */ --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); /* ============================================================ NAV — Off-Canvas Mobile-Menü (§ 4 in design-system.css) ------------------------------------------------------------ Panel-BG/-Farbe sind die einzigen brand-relevanten Werte. Bei dunklem Panel: --wsh-nav-panel-bg auf Primary setzen und --wsh-nav-toggle-color auf --wsh-white. ============================================================ */ --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-accent: var(--wsh-treuhand); /* Hover/Focus im Nav-Chrome */ --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 fix-Pixel */ --wsh-nav-z-overlay: 9999; --wsh-nav-z-panel: 10001; --wsh-nav-z-toggle: 100; /* Toggle bleibt unter Panel — Close-Button im Panel übernimmt */ --wsh-nav-z-close: 10005; /* X-Button OBEN auf allem */ /* NAV-DRILL (§ 5 in design-system.css) */ --wsh-nav-drill-slide-distance: 24px; --wsh-nav-drill-link-color-hover: var(--wsh-nav-accent); --wsh-nav-divider-color: rgba(0, 0, 0, 0.12); }