/* ============================================================ Wishalize Child · Design Tokens — Wishalize ------------------------------------------------------------ Single Source of Truth: Elementor Site Settings. Diese Datei verlinkt nur — Farben und Schriften werden in Elementor → Site Settings gepflegt. Die Hex- und px-Werte hier sind Fallbacks für den Fall, dass Elementor mal nicht lädt, nicht die eigentliche Quelle. IDs und Werte stammen aus dem Kit-Export „wishalize-website" vom 13.08.2026 (Elementor 4.1.5). Nach Änderungen in Elementor Site Settings: Kit neu exportieren und diese Datei abgleichen. Syntax: var(--e-global-…, FALLBACK) ============================================================ */ :root { /* ============================================================ FARBEN — System Colors (aus Elementor) Diese IDs sind in Elementor stabil benannt. ============================================================ */ --wsh-primary: var(--e-global-color-primary, #222A5D); /* CD1 — Haupt-Brandfarbe */ --wsh-secondary: var(--e-global-color-secondary, #565F97); /* CD1 light */ --wsh-text: var(--e-global-color-text, #000000); --wsh-accent: var(--e-global-color-accent, #9DF0CD); /* Mint — Highlight */ /* ============================================================ FARBEN — Custom Colors (aus Elementor) ------------------------------------------------------------ Wishalize führt eine zweite Farbfamilie (CD2, petrol) neben CD1 (navy). Sie landet in den complement-Slots der Base. ============================================================ */ --wsh-complement: var(--e-global-color-eccb58d, #4E7C92); /* CD2 */ --wsh-complement-light: var(--e-global-color-d7cf20e, #7CACC0); /* CD2 light */ --wsh-off-white: var(--e-global-color-4e3dcb6, #F8F8F8); /* Gray BG */ --wsh-white: var(--e-global-color-78045d4, #FFFFFF); /* Hell-/Dunkelvarianten ohne eigenen Elementor-Eintrag. Kein var(--e-global-…), weil es in Elementor keine entsprechende Farbe gibt — ein Verweis auf eine nicht existierende ID wäre stiller Leerlauf. Falls diese Werte gebraucht werden: in Elementor anlegen und hier verlinken, statt den Hex hier zu pflegen. */ --wsh-secondary-light: #8A92C4; /* aufgehelltes CD1-light — TODO in Elementor anlegen */ --wsh-accent-dark: #4FBF95; /* abgedunkeltes Mint, damit es auf Weiss trägt */ --wsh-gray-dark: #4A4A4A; /* ============================================================ TYPOGRAFIE — System (aus Elementor) ------------------------------------------------------------ Drei Schriften: roca (Titel), effra (Text/Subtitel), serenity (Title 2). Alle drei sind Custom Fonts — die Fallback-Stacks greifen nur, wenn Elementor die Fonts nicht ausliefert. ============================================================ */ --wsh-font-primary-family: var(--e-global-typography-primary-font-family, "roca"), system-ui, sans-serif; --wsh-font-primary-size: var(--e-global-typography-primary-font-size, 2.7em); --wsh-font-primary-weight: var(--e-global-typography-primary-font-weight, 600); --wsh-font-secondary-family: var(--e-global-typography-secondary-font-family, "serenity"), Georgia, serif; --wsh-font-secondary-size: var(--e-global-typography-secondary-font-size, 2.1em); --wsh-font-secondary-weight: var(--e-global-typography-secondary-font-weight, 600); --wsh-font-text-family: var(--e-global-typography-text-font-family, "effra"), 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-text-leading: var(--e-global-typography-text-line-height, 24px); --wsh-font-accent-family: var(--e-global-typography-accent-font-family, "effra"), system-ui, sans-serif; --wsh-font-accent-size: var(--e-global-typography-accent-font-size, 24px); --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 ------------------------------------------------------------ Die Base kennt fünf Stufen (xxl…s), Elementor führt bei Wishalize vier benannte Titel (XL/L/M/S) plus „Title 1" als System-Typografie. Zuordnung deshalb: xxl → Title 1 (System primary, 2.7em — die grösste) xl → Title XL 4b282c4 l → Title L dfe130f m → Title M d7f9301 s → Title S 1046093 Die Namen bleiben absichtlich deckungsgleich mit Elementor, damit beim Blick in die Site Settings klar ist, welcher Token gemeint ist. ============================================================ */ --wsh-title-xxl-family: var(--e-global-typography-primary-font-family, "roca"), system-ui, sans-serif; --wsh-title-xxl-size: var(--e-global-typography-primary-font-size, 2.7em); --wsh-title-xxl-weight: var(--e-global-typography-primary-font-weight, 600); --wsh-title-xxl-ls: normal; --wsh-title-xl-family: var(--e-global-typography-4b282c4-font-family, "roca"), system-ui, sans-serif; --wsh-title-xl-size: var(--e-global-typography-4b282c4-font-size, 42px); --wsh-title-xl-weight: var(--e-global-typography-4b282c4-font-weight, 600); --wsh-title-xl-ls: normal; --wsh-title-l-family: var(--e-global-typography-dfe130f-font-family, "roca"), system-ui, sans-serif; --wsh-title-l-size: var(--e-global-typography-dfe130f-font-size, 36px); --wsh-title-l-weight: var(--e-global-typography-dfe130f-font-weight, 600); --wsh-title-l-ls: normal; --wsh-title-m-family: var(--e-global-typography-d7f9301-font-family, "roca"), system-ui, sans-serif; --wsh-title-m-size: var(--e-global-typography-d7f9301-font-size, 30px); --wsh-title-m-weight: var(--e-global-typography-d7f9301-font-weight, 600); --wsh-title-m-ls: normal; --wsh-title-s-family: var(--e-global-typography-1046093-font-family, "roca"), system-ui, sans-serif; --wsh-title-s-size: var(--e-global-typography-1046093-font-size, 24px); --wsh-title-s-weight: var(--e-global-typography-1046093-font-weight, 600); --wsh-title-s-ls: normal; /* ============================================================ TYPOGRAFIE — Sublines ------------------------------------------------------------ Die Base kennt einen einzelnen --wsh-subline-Slot. Wishalize führt vier Subtitel-Stufen. --wsh-subline bleibt der Standardwert (SubTitle M), die übrigen kommen als eigene Tokens dazu. BASE-KANDIDAT: eine dreistufige Subline-Skala (l/m/s) plus Thin-Variante ist nicht Wishalize-spezifisch. Bei der zweiten Verwendung in die Base heben (CONVENTIONS §4). ============================================================ */ --wsh-subline-family: var(--e-global-typography-129f3e4-font-family, "effra"), system-ui, sans-serif; --wsh-subline-size: var(--e-global-typography-129f3e4-font-size, 28px); --wsh-subline-weight: var(--e-global-typography-129f3e4-font-weight, 600); --wsh-subline-l-family: var(--e-global-typography-5041c69-font-family, "effra"), system-ui, sans-serif; --wsh-subline-l-size: var(--e-global-typography-5041c69-font-size, 33px); --wsh-subline-l-weight: var(--e-global-typography-5041c69-font-weight, 600); --wsh-subline-s-family: var(--e-global-typography-588ec72-font-family, "effra"), system-ui, sans-serif; --wsh-subline-s-size: var(--e-global-typography-588ec72-font-size, 24px); --wsh-subline-s-weight: var(--e-global-typography-588ec72-font-weight, 600); /* SubTitle M — Thin: gleiche Grösse, leichteres Gewicht */ --wsh-subline-thin-family: var(--e-global-typography-eacfb9e-font-family, "effra"), system-ui, sans-serif; --wsh-subline-thin-size: var(--e-global-typography-eacfb9e-font-size, 28px); --wsh-subline-thin-weight: var(--e-global-typography-eacfb9e-font-weight, 500); /* Text small */ --wsh-font-small-family: var(--e-global-typography-4166dda-font-family, "effra"), system-ui, sans-serif; --wsh-font-small-size: var(--e-global-typography-4166dda-font-size, 18px); --wsh-font-small-weight: var(--e-global-typography-4166dda-font-weight, 400); /* Akzent-Titel */ --wsh-font-akzent-family: var(--e-global-typography-c913dce-font-family, "effra"), system-ui, sans-serif; --wsh-font-akzent-size: var(--e-global-typography-c913dce-font-size, 24px); --wsh-font-akzent-weight: var(--e-global-typography-c913dce-font-weight, 500); /* ============================================================ TYPOGRAFIE — Buttons ============================================================ */ --wsh-button-family: var(--e-global-typography-a5a8226-font-family, "effra"), system-ui, sans-serif; --wsh-button-size: var(--e-global-typography-a5a8226-font-size, 21px); --wsh-button-weight: var(--e-global-typography-a5a8226-font-weight, 600); --wsh-button-ls: 0.3px; /* ============================================================ GEWICHTE — benannte Stufen ------------------------------------------------------------ Damit Komponenten-CSS kein nacktes `font-weight: 600` enthält. Werte spiegeln die im Kit verwendeten Gewichte. ============================================================ */ --wsh-weight-light: 300; --wsh-weight-regular: 400; --wsh-weight-medium: 500; --wsh-weight-semibold: 600; /* ============================================================ LAYOUT ------------------------------------------------------------ Werte aus dem Kit: container_width 1440px, viewport_md 768, viewport_lg 1025. ============================================================ */ --wsh-container-max: 1440px; --wsh-container-pad: 20px; --wsh-breakpoint-md: 768px; --wsh-breakpoint-lg: 1025px; /* ------------------------------------------------------------ LESBARKEIT — pro Projekt prüfen und anpassen ------------------------------------------------------------ --wsh-measure Zeilenlänge für Fliesstext. Einheit ch (Breite der Ziffer „0"), damit der Wert an der Schrift hängt und nicht an einer Pixelzahl. 60–75 Zeichen sind der bewährte Bereich; wo genau innerhalb davon, hängt von Schriftart, Schriftgrösse und Zeilenhöhe ab. --wsh-narrow Breite begrenzter Inhaltsblöcke (.wsh-narrow). Anders als --wsh-measure eine Layoutgrösse, deshalb in px. ------------------------------------------------------------ */ --wsh-measure: 68ch; --wsh-narrow-sm: 700px; --wsh-narrow: 900px; --wsh-narrow-lg: 1100px; /* ============================================================ 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 ============================================================ */ --wsh-radius-sm: 4px; --wsh-radius-md: 12px; --wsh-radius-lg: 18px; --wsh-radius-xl: 22px; --wsh-radius-pill: 999px; /* ============================================================ SHADOWS ============================================================ */ --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); /* ============================================================ LINIEN — Trennlinien und Rahmen ------------------------------------------------------------ Als rgba auf Schwarz statt als eigene Farbe: eine Trennlinie soll sich dem Untergrund unterordnen, nicht als fünfte Brandfarbe auftreten. ============================================================ */ --wsh-rule-color: rgba(0, 0, 0, 0.12); --wsh-rule-color-strong: rgba(0, 0, 0, 0.22); --wsh-rule-width: 1px; /* ============================================================ 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); /* Panels, Off-Canvas */ --wsh-duration-fast: 150ms; --wsh-duration-base: 250ms; --wsh-duration-slow: 400ms; --wsh-duration-slower: 800ms; /* ============================================================ Z-INDEX — Layer-Skala (universal) ============================================================ */ --wsh-z-base: 1; --wsh-z-sticky: 100; --wsh-z-header: 500; --wsh-z-overlay: 900; --wsh-z-panel: 950; --wsh-z-modal: 1000; --wsh-z-toast: 1100; /* ============================================================ PROSE — Fliesstext-Darstellung (.wsh-prose) ------------------------------------------------------------ Zeilenhöhe grosszügiger als bei Layout-Text: lange Absätze brauchen mehr Luft, damit das Auge die Zeile hält. ============================================================ */ --wsh-prose-color: var(--wsh-text); --wsh-prose-heading-color: var(--wsh-primary); --wsh-prose-link-color: var(--wsh-complement); /* CD2 — wie link_normal_color im Kit */ --wsh-prose-link-color-hover: var(--wsh-complement-light); /* CD2 light — wie link_hover_color */ --wsh-prose-rule-color: var(--wsh-rule-color); --wsh-prose-leading: 1.65; --wsh-prose-heading-leading: 1.25; --wsh-prose-gap: var(--wsh-space-5); /* Absatzabstand */ --wsh-prose-heading-gap: var(--wsh-space-8); /* Abstand VOR Überschriften */ /* ------------------------------------------------------------ PROSE — Zuordnung Skala → H-Tags (nur für .wsh-prose--scale) ------------------------------------------------------------ NORMALFALL: diese Zuordnung wird NICHT hier gepflegt, sondern in Elementor → Site Settings → Theme Style → Typografie → Überschriften Dort ist sie bei Wishalize bereits gesetzt (h1→Title XL, h2→Title L, h3→SubTitle L, …). Dieser Block greift nur zusätzlich mit .wsh-prose--scale. ------------------------------------------------------------ */ --wsh-prose-h1-family: var(--wsh-title-xl-family); --wsh-prose-h1-size: var(--wsh-title-xl-size); --wsh-prose-h1-weight: var(--wsh-title-xl-weight); --wsh-prose-h1-ls: var(--wsh-title-xl-ls); --wsh-prose-h2-family: var(--wsh-title-l-family); --wsh-prose-h2-size: var(--wsh-title-l-size); --wsh-prose-h2-weight: var(--wsh-title-l-weight); --wsh-prose-h2-ls: var(--wsh-title-l-ls); --wsh-prose-h3-family: var(--wsh-subline-l-family); --wsh-prose-h3-size: var(--wsh-subline-l-size); --wsh-prose-h3-weight: var(--wsh-subline-l-weight); --wsh-prose-h3-ls: normal; --wsh-prose-h4-family: var(--wsh-subline-family); --wsh-prose-h4-size: var(--wsh-subline-size); --wsh-prose-h4-weight: var(--wsh-subline-weight); --wsh-prose-h4-ls: normal; --wsh-prose-h5-family: var(--wsh-subline-s-family); --wsh-prose-h5-size: var(--wsh-subline-s-size); --wsh-prose-h5-weight: var(--wsh-subline-s-weight); --wsh-prose-h5-ls: normal; /* ============================================================ KOMPONENTEN-SPEZIFISCHE TOKENS ------------------------------------------------------------ Hier — und nur hier — stehen Rohwerte. Das Komponenten-CSS in design-system.css enthält ausschliesslich var(). ============================================================ */ /* ---- Marquee ---- */ --wsh-marquee-speed: 40s; --wsh-marquee-item-size: 22px; --wsh-marquee-bg: transparent; --wsh-marquee-item-color: var(--wsh-primary); /* ---- Lightbox (Fullscreen-Bild-Modal .wsh-lightbox-modal) ---- */ --wsh-lightbox-bg: rgba(15, 20, 28, 0.94); --wsh-lightbox-btn-bg: rgba(255, 255, 255, 0.14); --wsh-lightbox-btn-bg-hover: rgba(255, 255, 255, 0.24); --wsh-lightbox-btn-color: var(--wsh-white); --wsh-lightbox-caption-color: rgba(255, 255, 255, 0.85); --wsh-lightbox-counter-color: rgba(255, 255, 255, 0.55); --wsh-lightbox-max-width: 92vw; --wsh-lightbox-max-height: 88vh; --wsh-lightbox-radius: 8px; /* ---- FAQ-Akkordeon (.wsh-faq) --------------------------------- Ursprung: Snippet-Bibliothek (Projekt Monia Herzog), auf Wishalize-Tokens umgestellt. Farbentscheide beim Refactoring: - Frage/Nummer laufen auf CD1 (--wsh-primary), wie alle Überschriften im Kit (h1–h6 = #222A5D). - Das Plus-/Minus-Icon lief im Original auf einem Gold-Ton. Ersetzt durch CD2 (--wsh-complement): Mint (--wsh-accent) trägt als 1.5px-Linie auf Weiss nicht genug Kontrast. - Hover der Frage auf CD1-light (--wsh-secondary) statt auf einem eigenen Braun. - Die Trennlinie kommt aus --wsh-rule-color, nicht aus einer Brandfarbe. Eine Trennlinie ist Struktur, kein Statement. -------------------------------------------------------------- */ --wsh-faq-rule-color: var(--wsh-rule-color); --wsh-faq-rule-width: var(--wsh-rule-width); /* Flächenfarbe der Frage-Zeile. Transparent ist Absicht: das Akkordeon lebt von der Trennlinie, nicht von Kästen. Wer eine Fläche will, setzt diese beiden Tokens — nicht das CSS. */ --wsh-faq-row-bg: transparent; --wsh-faq-row-bg-hover: transparent; --wsh-faq-no-col: var(--wsh-space-8); /* Breite der Nummernspalte */ --wsh-faq-col-gap: var(--wsh-space-5); --wsh-faq-row-pad: var(--wsh-space-6); /* vertikale Polsterung des Triggers */ --wsh-faq-line-height: 30px; /* gemeinsame Zeilenhöhe Nummer/Frage/Icon */ --wsh-faq-no-color: var(--wsh-primary); --wsh-faq-no-size: var(--wsh-font-text-size); --wsh-faq-no-weight: var(--wsh-weight-light); --wsh-faq-q-color: var(--wsh-primary); --wsh-faq-q-color-hover: var(--wsh-secondary); --wsh-faq-q-family: var(--wsh-font-text-family); --wsh-faq-q-size: var(--wsh-font-text-size); --wsh-faq-q-weight: var(--wsh-weight-semibold); --wsh-faq-a-color: var(--wsh-text); --wsh-faq-a-family: var(--wsh-font-text-family); --wsh-faq-a-size: var(--wsh-font-small-size); --wsh-faq-a-weight: var(--wsh-weight-regular); --wsh-faq-a-leading: 1.6; --wsh-faq-a-gap: var(--wsh-space-3); /* Abstand zwischen Absätzen */ --wsh-faq-a-pad-end: var(--wsh-space-8); /* rechter Einzug der Antwort */ --wsh-faq-a-pad-bottom: var(--wsh-space-6); --wsh-faq-icon-color: var(--wsh-complement); --wsh-faq-icon-size: 14px; --wsh-faq-icon-stroke: 1.5px; --wsh-faq-focus-color: var(--wsh-complement); --wsh-faq-focus-width: 2px; --wsh-faq-focus-offset: var(--wsh-space-1); --wsh-faq-duration: var(--wsh-duration-slow); --wsh-faq-ease: var(--wsh-ease-out); /* Mobile-Anpassungen (greifen unter --wsh-breakpoint-md) */ --wsh-faq-no-col-sm: var(--wsh-space-7); --wsh-faq-col-gap-sm: var(--wsh-space-3); --wsh-faq-row-pad-sm: var(--wsh-space-5); }