:root, body{ /* Layout variables */ --content-width: 1248px; /* * Font variables * We are mapping the generic variable names from Elementor * to our own custom variables that are reusable in our standard CSS */ /* Color variables */ /* Standard */ --primary: var(--e-global-color-primary); --primary-50: rgba(0,216,255,0.5); --secondary: var(--e-global-color-secondary); --text: var(--e-global-color-text); --accent: var(--e-global-color-accent); /* B&W */ --black: var(--e-global-color-69eb973); --black-80: var(--e-global-color-8c3d495); --white: var(--e-global-color-22adef8); --white-80: var(--e-global-color-37ce953); /* Dark mode (default) */ /* Text */ --text-primary: var(--e-global-color-1cbd393); --text-primary-muted: var(--e-global-color-08f612a); --text-secondary: var(--e-global-color-b549c99); --text-secondary-muted: var(--e-global-color-692d0c5); /* Surface */ --surface-nav: var(--e-global-color-27681bb); --surface-highlight: var(--e-global-color-29494bf); --surface-primary: var(--e-global-color-78eae6e); --surface-footer: var(--e-global-color-fa26935); --surface-card: var(--e-global-color-f4f32ab); --widget-gradient: radial-gradient(50% 50% at 50% 50%, #213D48 0%, #213D48 100%); /* Circles */ --blurry-bg-circles: radial-gradient(50% 50% at 50% 50%, #54CCFF 0%, rgba(255, 255, 255, 0.00) 100%); --input-default: var(--e-global-color-f691f01); --input-active: var(--e-global-color-57c1046); --button-primary-hover: var(--e-global-color-afa2045); /* Messages */ --status-error: var(--e-global-color-598b724); --status-OK: var(--e-global-color-96842ec); --status-warning: var(--e-global-color-3ffc8de); /* Border */ --border-nav: var(--e-global-color-504a97f); --border-card: var(--e-global-color-389c1ea); --widget-border: var(--e-global-color-043c884); /* Icons */ --icon-primary: var(--e-global-color-be77a3a); --icon-arrows: var(--e-global-color-4d7a319); /* Light mode */ .light-mode { /* Standard */ --e-global-color-primary: var(--e-global-color-bceec99); /* --primary */ --primary-50: #00778D80; /* --primary-50 */ /* Text */ --e-global-color-1cbd393: var(--e-global-color-d62c9ea); /* --text-primary */ --e-global-color-08f612a: var(--e-global-color-11687a2); /* --text-primary-muted */ --e-global-color-b549c99: var(--e-global-color-4a372e7); /* --text-secondary */ --e-global-color-692d0c5: var(--e-global-color-6442b7f); /* --text-secondary-muted */ /* Surface */ --e-global-color-27681bb: var(--e-global-color-68c679d); /* --surface-nav */ --e-global-color-29494bf: var(--e-global-color-9be2622); /* --surface-highlight */ --e-global-color-78eae6e: var(--e-global-color-9ab85bc); /* --surface-primary */ --e-global-color-fa26935: var(--e-global-color-7c1a42e); /* --surface-footer */ --e-global-color-f4f32ab: var(--e-global-color-1cbd393); /* --surface-card */ --widget-gradient: radial-gradient(50% 50% at 50% 50%, #213D48 0%, #213D48 100%); /* --widget-gradient */ --blurry-bg-circles: radial-gradient(50% 50% at 50% 50%, #E2DED4 0%, rgba(255, 255, 255, 0.00) 100%); /* --blurry-bg-circles */ /* Border */ --e-global-color-504a97f: var(--e-global-color-a59cdf7); /* --border-nav */ --e-global-color-389c1ea: var(--e-global-color-1570d0b); /* --border-card */ --e-global-color-043c884: var(--e-global-color-139e741); /* --widget-border */ /* Icons */ --e-global-color-be77a3a: var(--e-global-color-c518b88); /* --icon-primary */ --e-global-color-4d7a319: var(--e-global-color-c8a572b); /* --icon-arrows */ } /* Box shadow */ --box-shadow-100: 0px 22.336px 17.869px 0px rgba(0, 0, 0, 0.09), 0px 12.522px 10.017px 0px rgba(0, 0, 0, 0.07), 0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.07), 0px 2.767px 2.214px 0px rgba(0, 0, 0, 0.06); --box-shadow-300: 0px 22.336px 17.869px 0px rgba(0, 0, 0, 0.11), 0px 12.522px 10.017px 0px rgba(0, 0, 0, 0.11), 0px 6.65px 5.32px 0px rgba(0, 0, 0, 0.11), 0px 2.767px 2.214px 0px rgba(0, 0, 0, 0.10); --box-shadow-500: 0px 0px 17.869px 0px rgba(0, 0, 0, 0.15), 0px 0px 10.017px 0px rgba(0, 0, 0, 0.14), 0px 0px 5.32px 0px rgba(0, 0, 0, 0.13), 0px 0px 2.214px 0px rgba(0, 0, 0, 0.12); /* Font variables */ /* DIE HIER SIND NOCH NICHT KOMPLETT ABGEGLICHEN */ --h1-font-size: var(--e-global-typography-c282863-font-size); --h1-line-height: var(--e-global-typography-c282863-line-height); --h1-font-family: var(--e-global-typography-c282863-font-family), Sans-serif; --h1-default-color: var(--primary-color); --h1-font-weight: var(--e-global-typography-c282863-font-weight); --h1-bold-font-size: var(--e-global-typography-362cbff-font-size); --h1-bold-line-height: var(--e-global-typography-362cbff-line-height); --h1-bold-font-family: var(--e-global-typography-362cbff-font-family), Sans-serif; --h1-bold-font-weight: var(--e-global-typography-362cbff-font-weight); --h2-font-size: var(--e-global-typography-a43b537-font-size); --h2-line-height: var(--e-global-typography-a43b537-line-height); --h2-font-family: var(--e-global-typography-a43b537-font-family), Sans-serif; --h2-default-color: var(--primary-color); --h2-font-weight: var( --e-global-typography-a43b537-font-weight ) @media (max-width:768px) { --e-global-typography-a43b537-font-weight: 600; } --h3-font-size: var(--e-global-typography-8008c0d-font-size); --h3-line-height: var(--e-global-typography-8008c0d-line-height); --h3-font-family: var(--e-global-typography-8008c0d-font-family), Sans-serif; --h3-default-color: var(--primary-color); --h3-font-weight: var(--e-global-typography-8008c0d-font-weight); /* --h4-font-size: var(--e-global-typography-eb707fb-font-size); --h4-line-height: var(--e-global-typography-eb707fb-line-height); --h4-font-family: var(--e-global-typography-eb707fb-font-family), Sans-serif; --h4-default-color: var(--primary-color); --h4-font-weight: var(--e-global-typography-eb707fb-font-weight); */ --p-font-size: var(--e-global-typography-6a41892-font-size); --p-line-height: var(--e-global-typography-6a41892-line-height); --p-font-family: var(--e-global-typography-6a41892-font-family), Sans-serif; --p-font-weight: var(--e-global-typography-6a41892-font-weight); --p-xs-font-size: var(--e-global-typography-8aae780-font-size); --p-sm-font-size: var( --e-global-typography-4fe41de-font-size ); --form-input-font-family: var( --e-global-typography-3c6b3fd-font-family ), Sans-serif; --form-input-font-size: var( --e-global-typography-3c6b3fd-font-size ); --form-input-font-weight: var( --e-global-typography-3c6b3fd-font-weight ); --form-input-line-height: var( --e-global-typography-3c6b3fd-line-height ); /* label */ --label-font-weight: var( --e-global-typography-bea5d0e-font-weight ); @media (max-width:768px) { --e-global-typography-bea5d0e-font-weight: 500; } /* * Outer Elementor container paddings * Using clamp() to set a minimum and maximum padding value * the clamp calculator can be found here: https://www.marcbacon.com/tools/clamp-calculator/ */ --content-padding: clamp(20px, calc(1.25rem + ((1vw - 4.8px) * 0.6061)), 24px); /* Default section paddings */ --section-padding-top: 80px; --section-padding-bottom: 80px; --section-padding-top-tablet: 50px; --section-padding-bottom-tablet: 50px; --section-padding-top-mobile: 50px; --section-padding-bottom-mobile: 50px; /* Additional variables */ /* Boxes */ --default-border-radius: clamp(25px, calc(1.5625rem + ((1vw - 4.8px) * 0.5208)), 30px); }