/* ========================================================================== EUROTEC Design-Tokens – die einzige Quelle für Farben, Typo, Raster, Radien, Bewegung. Werte stammen 1:1 aus dem Elementor-Kit der Live-Site (Stand 2026-09-17). Breakpoints: Mobil ≤767, Tablet 768–1200, Desktop >1200. ========================================================================== */ :root { /* Unternehmensfarben (Schwarz/Weiß, Grün als Akzent) */ --c-black: #000000; --c-white: #FFFFFF; --c-grey-100: #F4F4F4; /* helle Fläche, Kacheln */ --c-grey-200: #ECECEC; /* Bildbänder, Flächen */ --c-grey-400: #BCBCBC; /* Kennzahlen, gedämpfte Labels */ --c-grey-800: #3A3939; /* Text gedämpft, Footer-Links */ --c-green: #00FF99; --c-green-light: #D2FFED; --c-yellow-light: #FFF5B6; --c-purple: #5F1DFF; --c-purple-light: #6465FF; --c-purple-dark: #4641A8; /* Welten (Themenfarben) – Zuordnung in inc/worlds.php */ --w-e-mobility: #6465FF; --w-smart-home: #EA6550; --w-elektroinstallation: #BFAB06; --w-elektroinstallation-dark: #756900; --w-gebaeudeautomation: #BCE834; --w-datennetzwerke: #5FD672; --w-energiemonitoring: #FFD656; /* Semantische Farben (werden je Welt am überschrieben) */ --accent: var(--c-green); /* Logo-Icon, Burger, Formular-Aktiv, Hover */ --accent-ink: var(--c-black); /* Text auf Akzentfläche */ --world-box: var(--c-purple-light);/* Zitat-/Feature-Boxen */ --world-ink: var(--c-white); --world-dark: #171538; /* dunkle Welt-Fläche (Prozess-Akkordeon) */ --world-deep: #0E1030; --ink: var(--c-black); --ink-muted: var(--c-grey-800); --ink-soft: var(--c-grey-400); --surface: var(--c-white); --surface-2: var(--c-grey-100); --surface-3: var(--c-grey-200); /* Schrift */ --font: "HelveticaNeueLTPro", "Helvetica Neue", Helvetica, Arial, sans-serif; --fw-thin: 100; /* ThEx – Display, Kennzahlen */ --fw-light: 300; /* Lt – Überschriften */ --fw-regular: 400; /* Roman – Fließtext */ --fw-medium: 500; /* MdEx – Links, Buttons, Menü */ /* Typo-Stufen Desktop (>1200) – Größe/Zeilenhöhe */ --fs-display: 96px; --lh-display: 105px; /* Display D2: Kennzahlen, Riesentitel */ --fs-d3: 64px; --lh-d3: 70px; /* Display D3: Kachel-Headlines */ --fs-h1: 64px; --lh-h1: 74px; /* Seiten-Headlines, Hover-Karten, Halbbild-Titel */ --fs-h2: 51px; --lh-h2: 58px; --fs-h3: 40px; --lh-h3: 46px; /* Zitate */ --fs-h4: 32px; --lh-h4: 35px; /* Kennzahl-Labels, Footer-Adresse */ --fs-h5: 24px; --lh-h5: 29px; /* Textspalten, Karten-Beschreibung */ --fs-p: 24px; --lh-p: 33px; /* Absatz */ --fs-link: 20px; --lh-link: 21px; /* Eyebrow, Textlink (Medium) */ --fs-link-l: 24px; --lh-link-l: 25px; /* Menü, Kicker (Medium) */ --fs-caps: 16px; --lh-caps: 16px; /* Buttons, Versalien */ --fs-small: 16px; --lh-small: 22px; /* Copyright, Hinweise */ --fs-card: 20px; --lh-card: 22px; /* News-Karten-Titel */ /* Raster & Abstände */ --container: 1600px; --gutter: 35px; --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 35px; --space-5: 48px; --space-6: 68px; --space-7: 100px; --space-8: 130px; --section-y: var(--space-7); /* vertikaler Sektionsabstand */ --grid-gap: 20px; /* Kachel-Abstand */ --hero-h: 600px; /* Seiten-Hero (Bildband mit Header) */ --band-h: 588px; /* Bildband ohne Text */ --header-h: 120px; --menu-w: 580px; /* Form */ --radius: 10px; /* Kacheln, Karten, Boxen (einheitlich) */ --radius-pill: 999px; /* Buttons, Eingabefelder */ --line: 1px; /* Bewegung */ --ease: cubic-bezier(.2, .7, .2, 1); --t-fast: 150ms; --t-base: 300ms; --t-slow: 450ms; } @media (max-width: 1200px) { :root { --fs-display: 84px; --lh-display: 92px; --fs-d3: 49px; --lh-d3: 55px; --fs-h1: 48px; --lh-h1: 56px; --fs-h2: 40px; --lh-h2: 45px; --fs-h3: 37px; --lh-h3: 43px; --fs-h4: 27px; --lh-h4: 30px; --fs-h5: 22px; --lh-h5: 26px; --fs-p: 22px; --lh-p: 29px; --fs-link: 19px; --lh-link: 20px; --fs-link-l: 22px; --lh-link-l: 23px; --fs-caps: 14px; --lh-caps: 14px; --section-y: var(--space-6); --header-h: 100px; } } @media (max-width: 767px) { :root { --fs-display: 73px; --lh-display: 80px; --fs-d3: 34px; --lh-d3: 39px; --fs-h1: 34px; --lh-h1: 39px; --fs-h2: 30px; --lh-h2: 34px; --fs-h3: 34px; --lh-h3: 39px; --fs-h4: 23px; --lh-h4: 25px; --fs-h5: 20px; --lh-h5: 24px; --fs-p: 20px; --lh-p: 24px; --fs-link: 18px; --lh-link: 19px; --fs-link-l: 20px; --lh-link-l: 21px; --fs-caps: 12px; --lh-caps: 12px; --fs-card: 18px; --lh-card: 21px; --gutter: 16px; --grid-gap: 12px; --section-y: var(--space-5); --hero-h: 400px; --band-h: 500px; --header-h: 88px; --menu-w: 100vw; } } /* Welten: setzt Akzent und Box-Farbe (siehe inc/worlds.php) */ body.world-e-mobility { --accent: var(--c-green); --world-box: var(--w-e-mobility); } body.world-smart-home { --accent: var(--w-smart-home); --world-box: var(--w-smart-home); } body.world-elektroinstallation { --accent: var(--w-elektroinstallation); --world-box: var(--w-elektroinstallation); --world-dark: var(--w-elektroinstallation-dark); } body.world-gebaeudeautomation { --accent: var(--w-gebaeudeautomation); } body.world-datennetzwerke { --accent: var(--w-datennetzwerke); } body.world-energiemonitoring { --accent: var(--w-energiemonitoring); } body.world-powerstations { --world-box: var(--c-purple); }