/* ========================================================================== THEME VARIABLES für Farben, Typografie, Abstände, Schatten u.a. AUFBAU: Section 1 — Rohwerte: NUR hier stehen Hex-Werte und RGB-Kanäle. Section 2+ — Semantik: NUR var()-Referenzen, nie Hex direkt. Einbindung (Contao Seitenlayout, Reihenfolge): 1. fontawesome 2. theme_variables.css 3. styles_generated.css ========================================================================== */ /* -------------------------------------------------------------------------- 1. FARB-ROHWERTE (Palette) !! Einzige Stelle mit Hex-Werten und RGB-Kanälen !! Alle anderen Blöcke nutzen ausschließlich var()-Referenzen. -------------------------------------------------------------------------- */ :root { /* ── Primär: Navy ──────────────────────────────────────────────────────── */ --color-default: #1f3e5b; --color-default-dark: #162c40; --color-default-darker: #0e1d2b; --color-default-light: #2d5680; --color-default-lighter: #d6e8f5; --color-default-tint: #eef3f8; --color-default-tint2: #dde5ed; /* RGB-Kanäle für rgba()-Transparenzwerte (kein Hex in Schatten nötig) */ --color-brand-rgb: 31, 62, 91; /* = #1f3e5b */ --color-brand2-rgb: 195, 157, 48; /* = #c39d30 */ --color-highlight-rgb: 192, 88, 64; /* = #c05840 */ --color-white-rgb: 255, 255, 255; --color-black-rgb: 0, 0, 0; /* ── Sekundär: Green ────────────────────────────────────────────────────── */ --color-default2: #E3000F; --color-default2-dark: #b61c3e; --color-default2-darker: #2c3a0d; --color-default2-light: #d5e5d5; --color-default2-tint: #faf4e0; /* ── Akzent: Koralle ───────────────────────────────────────────────────── */ --color-highlight: #c05840; --color-highlight-dark: #a34832; --color-highlight-light: #d4725a; --color-highlight-tint: #faede9; /* ── Grautöne (navy-getönt) ────────────────────────────────────────────── */ --color-gray-900: #1c2733; --color-gray-dark: #344050; /* Haupttextfarbe (≈ gray-800) */ --color-gray: #546070; /* Body-Text (≈ gray-600) */ --color-gray-500: #788898; --color-gray-400: #9aaabb; --color-gray-light:#c8d4de; /* Borders, Trennlinien (≈ gray-300) */ --color-gray-200: #dde5ed; --color-gray-100: #eef3f8; --color-gray-50: #f6f9fb; /* ── Weiß & Seitenhintergrund ──────────────────────────────────────────── */ --color-page-background: #fbfbfb; /* ── Button-Farben (eigene Palette-Einträge) ───────────────────────────── */ --color-btn-blue: #1a5080; --color-btn-blue-dark: #133d60; --color-btn-gold: #b8890a; --color-btn-gold-dark: #9e7508; /* ── Systemfarben ──────────────────────────────────────────────────────── */ --color-success: #1a6e3c; --color-success-light: #e4f4eb; --color-warning: #b86400; --color-warning-light: #fdf3e0; --color-error: #b83232; --color-error-light: #faeaea; --color-info: #1f5c8a; --color-info-light: #e6eff7; --color-white-text: #FFFFFF; } /* -------------------------------------------------------------------------- 2. SEMANTISCHE FARB-ALIASE Ausschließlich var()-Referenzen auf Section 1. -------------------------------------------------------------------------- */ :root { /* ── Brand ────────────────────────────────────────────────────────────── */ --color-brand: var(--color-default); --color-brand-dark: var(--color-default-dark); --color-brand-light: var(--color-default-light); --color-brand-tint: var(--color-default-tint); --color-brand2: var(--color-default2); --color-brand2-dark: var(--color-default2-dark); --color-brand2-light: var(--color-default2-light); --color-brand2-tint: var(--color-default2-tint); --color-brand3: var(--color-highlight); /* Alias für Intro-Border */ /* ── Text ─────────────────────────────────────────────────────────────── */ --color-text: var(--color-gray-dark); --color-text-muted: var(--color-gray-500); --color-text-subtle: var(--color-gray-400); --color-text--inverted: var(--color-page-background); --color-text-on-brand: var(--color-page-background); --color-text-on-brand2: var(--color-gray-900); /* ── Links ────────────────────────────────────────────────────────────── */ --color-links: var(--color-brand2); --color-links-hover: var(--color-default2-dark); /* ── Buttons ──────────────────────────────────────────────────────────── */ --color-btn: var(--color-brand); --color-btn-text: var(--color-page-background); --color-btn-text-2: #fff; /* ── Status ───────────────────────────────────────────────────────────── */ --color-text-success: var(--color-success); --color-text-warning: var(--color-warning); --color-text-error: var(--color-error); --color-text-info: var(--color-info); /* ── Hintergründe ─────────────────────────────────────────────────────── */ --color-bg-subtle: var(--color-gray-100); --color-bg-muted: var(--color-gray-200); --color-bg-inverted: var(--color-brand); --color-bg-accent: var(--color-brand2-tint); /* ── Legacy-Kompatibilität ────────────────────────────────────────────── */ --main-color: var(--color-brand); --font-color: var(--color-text-on-brand); --pu-main-color: var(--color-text-on-brand); --pu-font-color: var(--color-gray-900); --shadow-color: var(--color-brand2); } /* -------------------------------------------------------------------------- 3. TYPOGRAFIE -------------------------------------------------------------------------- */ :root { /* Schriftfamilien */ --base-font-family: "Fira Sans", Arial, sans-serif; --headings__font-family: "Fira Sans", Arial, sans-serif; --font--special: "Caveat", Arial, sans-serif; --font--mono: "Courier New", Courier, monospace; /* Schriftgrößen */ --base-font-size--xs: 0.875rem; --base-font-size: 1rem; --base-font-size--xl: 1.125rem; /* Zeilenhöhen */ --base-line-height: 1.625; --headings__line-height: 1.2; --line-height-tight: 1.1; --line-height-relaxed: 1.8; /* Schriftgewichte */ --base-font-weight: 400; --font-weight-medium: 500; --font-weight-semibold: 600; --font-weight-bold: 700; /* H1 behält 700, H2–H3 nutzen 600, H4–H6 nutzen 500 */ --headings__font-weight: var(--font-weight-semibold); --font-weight-h1: var(--font-weight-bold); --font-weight-h4: var(--font-weight-medium); --font-weight-h5: var(--font-weight-medium); --font-weight-h6: var(--font-weight-medium); /* Überschriften fluid – harmonische Größensprünge */ --font-size-h1: clamp(1.75rem, 3.2vw, 2.375rem); --font-size-h2: clamp(1.5rem, 2.8vw, 2.25rem); --font-size-h3: clamp(1.25rem, 2.2vw, 1.625rem); --font-size-h4: clamp(1.125rem,1.8vw, 1.375rem); --font-size-h5: clamp(1rem, 1.4vw, 1.125rem); --font-size-h6: 0.875rem; /* Moderner optischer Ausgleich für große Überschriften */ --headings__letter-spacing: -0.015em; /* Weitere Größen */ --font-size-small: 0.875rem; --font-size-xsmall: 0.75rem; --font-size-large: 1.125rem; --font-size-lead: 1.25rem; --font--special--size: 2.2rem; /* Überschriften-Farben */ --headings__color: var(--color-brand); --headings__color-inverted: var(--color-text--inverted); /* Links im Fließtext */ --paragraph__link-color: var(--color-links); --paragraph__link-decoration: underline; --paragraph__link-decoration--hover: none; /* Code */ --code__color: var(--color-highlight); --pre__color-background: var(--color-gray); --pre__color: var(--color-text--inverted); /* Textauswahl */ --selection-background: var(--color-brand); --selection-color: var(--color-text--inverted); /* Trennlinien */ --hr-border: transparent; /* Schrift-Gradient: Navy → Gold (via Palette-Variablen) */ --fontgradient-direction: right; --fontgradient-color: var(--color-default2-light); --fontgradient-color1: var(--color-default); --fontgradient-color2: var(--color-default2); --fontgradient-color3: var(--color-default2-light); } /* -------------------------------------------------------------------------- 4. ABSTÄNDE / SPACING -------------------------------------------------------------------------- */ :root { --base-spacing-unit: 1rem; --base-spacing-unit--xs: calc(var(--base-spacing-unit) / 4); --base-spacing-unit--sm: calc(var(--base-spacing-unit) / 2); --base-spacing-unit--lg: calc(var(--base-spacing-unit) * 2); --base-spacing-unit--xl: calc(var(--base-spacing-unit) * 4); --spacing-section: clamp(2rem, 5vw, 5rem); --spacing-section--sm: clamp(1rem, 3vw, 2.5rem); --spacing-component: 1.5rem; --spacing-component--sm: 1rem; --spacing-stack: 1rem; --spacing-inline: 0.5rem; --grid__gutter: 2rem; --grid__gutter--half: 1rem; --container-max-width: 66.625em; --container-max-width--wide: 80em; } /* -------------------------------------------------------------------------- 5. BORDER / RAHMEN -------------------------------------------------------------------------- */ :root { --base-border-radius: 25px; --base-border-radius--sm: 4px; --base-border-radius--md: 8px; --base-border-radius--lg: 15px; --base-border-radius--pill: 999px; --base-border-width: 2px; --base-border-color: var(--color-gray-light); --base-border: transparent; /* Fokus-Ring: Gold auf Navy-Seiten klar sichtbar */ --focus-ring-color: var(--color-brand2); --focus-ring-width: 3px; --focus-ring-offset: 2px; --focus-ring: var(--focus-ring-width) solid var(--focus-ring-color); } /* -------------------------------------------------------------------------- 6. SCHATTEN / SHADOWS Nutzen --color-brand-rgb / --color-brand2-rgb / --color-highlight-rgb aus Section 1 — kein einziger Hex-Wert hier. -------------------------------------------------------------------------- */ :root { --shadow-xs: 0 1px 3px rgba(var(--color-brand-rgb), 0.08); --shadow-sm: 0 2px 6px rgba(var(--color-brand-rgb), 0.12); --shadow-md: 0 4px 12px rgba(var(--color-brand-rgb), 0.16); --shadow-lg: 0 8px 24px rgba(var(--color-brand-rgb), 0.20); --shadow-xl: 0 16px 40px rgba(var(--color-brand-rgb), 0.24); --shadow-inner: inset 0 2px 6px rgba(var(--color-brand-rgb), 0.10); --shadow-brand: 0 4px 14px rgba(var(--color-brand-rgb), 0.35); --shadow-brand2: 0 4px 14px rgba(var(--color-brand2-rgb), 0.40); --shadow-highlight: 0 4px 14px rgba(var(--color-highlight-rgb), 0.35); /* mmenu — aus semantischer Schattenvariable ableiten */ --mm-shadow: 0 0 16px rgba(var(--color-brand-rgb), 0.40); } /* -------------------------------------------------------------------------- 7. TRANSITIONEN / ANIMATIONEN -------------------------------------------------------------------------- */ :root { --transition-duration--fast: 150ms; --transition-duration: 250ms; --transition-duration--slow: 400ms; --transition-easing: ease-in-out; --transition-easing--enter: ease-out; --transition-easing--leave: ease-in; --transition-base: var(--transition-duration) var(--transition-easing); --transition-fast: var(--transition-duration--fast) var(--transition-easing); --transition-slow: var(--transition-duration--slow) var(--transition-easing); } /* -------------------------------------------------------------------------- 8. Z-INDEX-SKALA -------------------------------------------------------------------------- */ :root { --z-index-below: -1; --z-index-base: 0; --z-index-raised: 10; --z-index-dropdown: 100; --z-index-sticky: 200; --z-index-overlay: 300; --z-index-modal: 400; --z-index-toast: 500; --z-index-tooltip: 600; } /* -------------------------------------------------------------------------- 9. FORMULAR-ELEMENTE -------------------------------------------------------------------------- */ :root { --form-input-border-color: var(--base-border-color); --form-input-border-color-focus: var(--color-brand2); --form-input-border-radius: var(--base-border-radius); --form-input-bg: var(--color-page-background); --form-input-bg-disabled: var(--color-gray-100); --form-input-color: var(--color-text); --form-input-placeholder-color: var(--color-text-subtle); --form-input-font-size: var(--base-font-size); --form-input-padding-y: 0.5rem; --form-input-padding-x: 0.75rem; --form-label-font-size: var(--base-font-size); --form-label-font-weight: var(--font-weight-medium); --form-label-color: var(--color-text); --input-border-radius: 5px; } /* -------------------------------------------------------------------------- 10. SCHALTFLÄCHEN / BUTTONS -------------------------------------------------------------------------- */ :root { --button-border-radius: 5px; --btn-rounded-radius: 0.5rem; --btn-font-size: var(--base-font-size); --btn-font-weight: var(--font-weight-semibold); --btn-padding-y: 0.6rem; --btn-padding-x: 1.25rem; --btn-transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast); /* "Blue"-Variante → Palette-Variable aus Section 1 */ --button-blue-bgcolor: var(--color-btn-blue); --button-blue-bgcolor-hover: var(--color-btn-blue-dark); --button-blue-color: var(--color-text-on-brand); /* "Orange"-Variante → Gold-Palette aus Section 1 */ --button-orange-bgcolor: var(--color-btn-gold); --button-orange-bgcolor-hover: var(--color-btn-gold-dark); --button-orange-color: var(--color-text-on-brand2); /* Highlight-Button → Koralle */ --button-highlight-bgcolor: var(--color-highlight); --button-highlight-bgcolor-hover: var(--color-highlight-dark); --button-highlight-color: var(--color-text-on-brand); /* Back-to-Top */ --button-to-top-color: var(--color-brand); --button-to-top-bgcolor: rgba(var(--color-white-rgb), 0.90); --button-to-top-bgcolor-hover: var(--color-page-background); /* Filter-Buttons (aus customized.css) */ --button-bg: var(--color-brand); --button-spacing: 0.5rem 1rem; --button-border-width: var(--base-border-width); --button-font-family: var(--base-font-family); --button-font-weight: var(--font-weight-semibold); --button-line-height: var(--base-line-height); /* Toggle-Switch */ --toggle-inactive-bg: var(--color-gray-light); --toggle-inactive-color: var(--color-text-muted); --toggle-active-bg: var(--color-brand); --toggle-handle-bg: var(--color-page-background); /* Overlay-Gradient */ --overlay-gradient-start: rgba(var(--color-black-rgb), 1); --overlay-gradient-end: rgba(var(--color-black-rgb), 0); } /* -------------------------------------------------------------------------- 11. NAVIGATION / HEADER -------------------------------------------------------------------------- */ html { /* Header & Topbar */ --header-color-background: transparent; --header-color-text: var(--color-text); --logo-bg-color: transparent; --ctabar-bgcolor: var(--color-brand); --ctabar-color: var(--color-text-on-brand); /* Top-Navigation */ --topnav-bgcolor: transparent; --topnav-bgcolor-hover: rgba(var(--color-brand-rgb), 0.06); --topnav-bgcolor-submenu-trigger: var(--color-brand-dark); --topnav-color: var(--color-brand); --topnav-color-hover: var(--color-brand2); --topnav-color-hover-textshadow: 1px 1px 4px rgba(var(--color-brand-rgb), 0.25); --topnav-font-size: 1rem; --topnav-font-weight: var(--font-weight-medium); /* Untermenü */ --topnav-submenu-bgcolor: var(--color-default-tint); --topnav-submenu-width: 17rem; /* Mobile Menü */ --mobilemenu-nav-color: var(--color-gray-light); --mobilemenu-nav-bgcolor: var(--color-default-darker); --mobilemenu-nav-color-hover: var(--color-text-on-brand); --mobilemenu-nav-bgcolor-hover: var(--color-brand); } /* -------------------------------------------------------------------------- 12. MMENU-VARIABLEN -------------------------------------------------------------------------- */ :root { --mm-color-border: rgba(var(--color-white-rgb), 0.15); --mm-color-button: var(--color-default2-light); --mm-color-text: var(--color-text-on-brand); --mm-color-text-dimmed: var(--color-gray-400); --mm-color-background: var(--color-default-darker); --mm-color-background-highlight: rgba(var(--color-brand2-rgb), 0.12); --mm-color-background-emphasis: rgba(var(--color-white-rgb), 0.08); } /* -------------------------------------------------------------------------- 13. FOOTER -------------------------------------------------------------------------- */ html { --footer-pre__bg-color: var(--color-default); --footer-pre__color: var(--color-white-text); --footer-pre__link-color: var(--color-white-text); --footer-sub__bg-color: var(--color-brand); --footer-sub__color: var(--color-text-on-brand); --footer-sub__link-color: var(--color-default2-light); --footer-font-size: var(--font-size-small); --footer-heading-font-size: var(--base-font-size); } /* -------------------------------------------------------------------------- 14. KOMPONENTEN-VARIABLEN -------------------------------------------------------------------------- */ html { /* Logo-Slider */ --logo-slider-bg-color: var(--color-page-background); /* Badge "Neu" */ --badge-neu-textstring: "Neu"; --badge-neu-bgcolor: var(--color-highlight); --badge-neu-textcolor: var(--color-text-on-brand); --badge-neu-fontsize: 1.5em; /* Fancy Headline Trenner */ --fancy-headline-seperator-color: var(--color-brand2); /* Teaser-Box */ --teaserbox-default-bgcolor: var(--color-page-background); --teaserbox-default-border: none; --teaserbox-default-boder-radius: 0; --teaserbox-default-padding: 0; --teaserbox-primary-bgcolor: var(--color-brand); --teaserbox-primary-color: var(--color-text-on-brand); --teaserbox-secondary-bgcolor: var(--color-brand2); --teaserbox-secondary-color: var(--color-text-on-brand2); --teaserbox-blue-bgcolor: var(--color-default-darker); --teaserbox-blue-color: var(--color-text-on-brand); --teaserbox-orange-bgcolor: var(--color-default2); --teaserbox-orange-color: var(--color-text-on-brand2); /* Teaser (ce_rsce_teaser) */ --teaser-default-color: var(--color-text); --teaser-default-bgcolor: var(--color-bg-subtle); --teaser-primary-color: var(--color-text-on-brand); --teaser-secondary-color: var(--color-text-on-brand2); --teaser-primary-bgcolor: var(--color-brand); --teaser-secondary-bgcolor: var(--color-brand2); --teaser-section-radius: var(--base-border-radius); /* Icon-Box */ --icon-box__icon-bg-color: var(--color-brand); --icon-box__icon-border-color: var(--color-brand); --icon-box__icon-color: var(--color-text-on-brand); --icon-box__icon-border-radius: 50%; --icon-box__title-color: var(--color-brand); /* Quicknav */ --quicknav-bgcolor: var(--color-brand); --quicknav-border: var(--base-border-width) solid var(--color-brand2); /* Header-Slide */ --headerslide__textwrapper-bgcolor: var(--color-brand); /* Testimonials / Quotes */ --quote__bottom--bgcolor: var(--color-brand); --quote__bottom--textcolor: var(--color-text-on-brand); --quote__item--bgcolor: var(--color-bg-subtle); --quote__item--textcolor: var(--color-text); /* Centered Wrapper */ --ks-centered-wrapper-border: var(--color-gray-light); --ks-centered-wrapper-color-inverted: var(--color-text-on-brand); --ks-centered-wrapper-color-highlight: var(--color-highlight); --ks-centered-wrapper-textshadow: none; /* Accordion / Toggler */ --toggler-background: var(--color-brand); /* Ansprechpartner */ --ansprechpartner-anzahl: 3; --ansprechpartner-spacing: var(--base-spacing-unit); --ansprechpartner-minwidth: 300px; --ansprechpartner-image-height: 300px; /* Download */ --download-elem__border-color: var(--color-gray-light); /* Cookiebar */ --cookiebar__btn--border: var(--base-border-width) solid var(--color-brand); --cookiebar__btn--color: var(--color-text); --cookiebar__btn--background: var(--color-bg-subtle); --cookiebar__btn--background-hover: var(--color-bg-muted); /* Dritte Markenfarbe */ --color-brand3: var(--color-highlight); }