/** * Roover Widgets – Design Tokens * * Zwei Selektoren: * * :root — reine Roover-Werte ohne Abhängigkeit zu Elementor * .elementor-kit-6 — Aliases auf Elementor-Tokens (müssen im gleichen * Scope wie die Tokens selbst definiert sein) * * Widget-CSS verwendet ausschließlich --r-* Variablen. * Referenz zu Elementor-Token-IDs: DESIGN-TOKENS.md */ /* ========================================================================== Reine Roover-Werte — unabhängig von Elementor-Tokens ========================================================================== */ :root { /* Navigation Clearance — responsiv */ --r-nav-clearance: 160px; /* Section Vertical Padding — Content-Sections ohne eigenen Header-Hintergrund */ --r-section-padding-y: 90px; /* Secondary mit Opazität — Social-Icon-Buttons Hardcoded weil rgba() nicht mit var() als Farbwert kombinierbar ist */ --r-color-secondary-10: rgba(49, 96, 255, 0.10); --r-color-secondary-14: rgba(49, 96, 255, 0.14); /* Article Header Typografie — eigenständig, ~25% kleiner als H1/H2 global */ --r-article-headline-size: 60px; --r-article-headline-lh: 1.1; --r-article-subline-size: 24px; --r-article-subline-lh: 1.35; /* Gradient-Mittelwert — Article/Author Header Hintergrund */ --r-color-gradient-mid: #1C0838; /* Glasmorphism — Kurzantwort-Panel */ --r-color-white-glass: rgba(255, 255, 255, 0.94); --r-color-accent-glass: rgba(245, 238, 255, 0.94); } /* * Breakpoints — Elementor-Werte (CSS custom properties in @media nicht nutzbar) * Tablet: max-width: 1024px * Mobile: max-width: 767px * Wide: min-width: 1440px (nur für Elementor-Typo-Overrides) */ @media (max-width: 1024px) { :root { --r-nav-clearance: 120px; } } @media (min-width: 1440px) { :root { --r-article-headline-size: 70px; --r-article-subline-size: 32px; } } @media (max-width: 1024px) { :root { --r-article-headline-size: 48px; } } @media (max-width: 767px) { :root { --r-nav-clearance: 80px; --r-section-padding-y: 60px; --r-article-headline-size: 32px; --r-article-subline-size: 18px; } } /* ========================================================================== Elementor Token Aliases Elementor definiert --e-global-* auf body (.elementor-kit-{id}). Aliases auf body = gleicher Scope, aber stabil gegenüber Kit-ID-Änderungen. ========================================================================== */ body { /* --- Farben ---------------------------------------------------------- */ --r-color-primary: var(--e-global-color-primary); /* #240054 Deep Purple */ --r-color-secondary: var(--e-global-color-secondary); /* #3160FF Blue */ --r-color-text: var(--e-global-color-text); /* #485460 Dark Gray */ --r-color-accent: var(--e-global-color-accent); /* #F5EEFF Light Purple */ --r-color-almost-black: var(--e-global-color-9f691a7); /* #14101B */ --r-color-purple-mid: var(--e-global-color-2c87f94); /* #9287B6 */ --r-color-purple-dark: var(--e-global-color-e8bd7ab); /* #3E2D6D */ --r-color-blue-gray: var(--e-global-color-db71671); /* #6B7A89 */ --r-color-white: var(--e-global-color-a17d796); /* #FFFFFF */ --r-color-light-gray: var(--e-global-color-69ba58a); /* #E7EBEE */ /* --- Typografie ------------------------------------------------------ */ /* * Verwendung: * font-family: var(--r-typo-h1-family); * font-size: var(--r-typo-h1-size); * font-weight: var(--r-typo-h1-weight); * line-height: var(--r-typo-h1-line-height); * * Breakpoint-Overrides kommen automatisch von Elementor. */ /* H1 — 80px, kein Tablet-Breakpoint [a860df0] */ --r-typo-h1-family: var(--e-global-typography-a860df0-font-family); --r-typo-h1-size: var(--e-global-typography-a860df0-font-size); --r-typo-h1-weight: var(--e-global-typography-a860df0-font-weight); --r-typo-h1-line-height: var(--e-global-typography-a860df0-line-height); /* H1 Full — 80px, alle Breakpoints [8fa9edf] */ --r-typo-h1-full-family: var(--e-global-typography-8fa9edf-font-family); --r-typo-h1-full-size: var(--e-global-typography-8fa9edf-font-size); --r-typo-h1-full-weight: var(--e-global-typography-8fa9edf-font-weight); --r-typo-h1-full-line-height: var(--e-global-typography-8fa9edf-line-height); /* Display — 50px, Hero/Autorname [6ffb3cf] */ --r-typo-display-family: var(--e-global-typography-6ffb3cf-font-family); --r-typo-display-size: var(--e-global-typography-6ffb3cf-font-size); --r-typo-display-weight: var(--e-global-typography-6ffb3cf-font-weight); --r-typo-display-line-height: var(--e-global-typography-6ffb3cf-line-height); /* H2 — 32px, Sublines, Rollen [941f868] */ --r-typo-h2-family: var(--e-global-typography-941f868-font-family); --r-typo-h2-size: var(--e-global-typography-941f868-font-size); --r-typo-h2-weight: var(--e-global-typography-941f868-font-weight); --r-typo-h2-line-height: var(--e-global-typography-941f868-line-height); /* H3 — 24px, mit 1440-Breakpoint [830246c] */ --r-typo-h3-family: var(--e-global-typography-830246c-font-family); --r-typo-h3-size: var(--e-global-typography-830246c-font-size); --r-typo-h3-weight: var(--e-global-typography-830246c-font-weight); --r-typo-h3-line-height: var(--e-global-typography-830246c-line-height); /* Heading MD — 24px, Panel-Titel [802cd0f] */ --r-typo-heading-md-family: var(--e-global-typography-802cd0f-font-family); --r-typo-heading-md-size: var(--e-global-typography-802cd0f-font-size); --r-typo-heading-md-weight: var(--e-global-typography-802cd0f-font-weight); --r-typo-heading-md-line-height: var(--e-global-typography-802cd0f-line-height); /* H4 — 20px [43cf182] */ --r-typo-h4-family: var(--e-global-typography-43cf182-font-family); --r-typo-h4-size: var(--e-global-typography-43cf182-font-size); --r-typo-h4-weight: var(--e-global-typography-43cf182-font-weight); --r-typo-h4-line-height: var(--e-global-typography-43cf182-line-height); /* Body LG — 18px, Langtext [3012a37] */ --r-typo-body-lg-family: var(--e-global-typography-3012a37-font-family); --r-typo-body-lg-size: var(--e-global-typography-3012a37-font-size); --r-typo-body-lg-weight: var(--e-global-typography-3012a37-font-weight); --r-typo-body-lg-line-height: var(--e-global-typography-3012a37-line-height); /* Label — 16px / 600 [b2c482d] */ --r-typo-label-family: var(--e-global-typography-b2c482d-font-family); --r-typo-label-size: var(--e-global-typography-b2c482d-font-size); --r-typo-label-weight: var(--e-global-typography-b2c482d-font-weight); --r-typo-label-line-height: var(--e-global-typography-b2c482d-line-height); /* Body — 16px / 400, Standard [979b14b] */ --r-typo-body-family: var(--e-global-typography-979b14b-font-family); --r-typo-body-size: var(--e-global-typography-979b14b-font-size); --r-typo-body-weight: var(--e-global-typography-979b14b-font-weight); --r-typo-body-line-height: var(--e-global-typography-979b14b-line-height); /* Link — 16px / 500, Buttons [ac90924] */ --r-typo-link-family: var(--e-global-typography-ac90924-font-family); --r-typo-link-size: var(--e-global-typography-ac90924-font-size); --r-typo-link-weight: var(--e-global-typography-ac90924-font-weight); --r-typo-link-line-height: var(--e-global-typography-ac90924-line-height); /* Body SM — 14px, Meta, Captions [e702f23] */ --r-typo-body-sm-family: var(--e-global-typography-e702f23-font-family); --r-typo-body-sm-size: var(--e-global-typography-e702f23-font-size); --r-typo-body-sm-weight: var(--e-global-typography-e702f23-font-weight); --r-typo-body-sm-line-height: var(--e-global-typography-e702f23-line-height); } /* ========================================================================== Reserviert (bei Bedarf ergänzen) ========================================================================== */ /* :root { --r-space-*: ; --r-radius-*: ; --r-shadow-*: ; } */