/* ========================================================= VARIABLEN.CSS Datei: variablen.css Inhalt: NUR CSS-Variablen (:root) ========================================================= */ /* ========================= VARIABLEN ========================= */ :root{ /* ========================================================= CONTENTBEREICH + FOOTERBEREICH ========================================================= */ --content-width: 870px; /* Breite des Contentsbereich - Standard: 870px */ --content-padding: 17px 40px 40px 40px; /* Padding Content - Standard: 17px, 40px, 40px, 40px */ --footer-padding: 17px 40px 17px 40px; /* Padding Footer - Standard: 17px, 40px, 17px, 40px */ /* ========================================================= MENÜBEREICH ========================================================= */ --menu-width: 220px; /* Breite des Menü - Standard: 220px */ --menu-gap: 20px; /* Abstand Menü zum Contentbereich - Standard: 20px */ --menu-bg: rgba(0, 0, 0, 0.35); /* Hintergrund des Menü - Standard: rgba(0, 0, 0, 0.35) */ --menu-footer-bg: rgba(0, 0, 0, 0.00); /* Hintergrund Menüfooter - Standard: rgba(0, 0, 0, 0.00) */ /* ========================================================= SCHRIFTGRÖSSEN - Menü fix lassen - Content + Überschriften skaliert über --font-scale ========================================================= */ --font-scale: 1; /* Menü (fix) */ --font-size-menu-header: 1.4rem; /* Text Menü Navigation - 1.4rem = 24px */ --font-size-menu-footer: 1.1rem; /* Text Menü footer - 1.1rem = 16px */ /* Content (skaliert) */ --font-size-content: calc(1.0rem * var(--font-scale)); /* Text Content - Fließtext - 1.0rem = 14px */ /* Überschriften (skaliert) */ --font-size-headline-hero: clamp( calc(1.8rem * var(--font-scale)), 4vw, calc(2.2rem * var(--font-scale)) ); /* h1 - 2.2rem = >32px */ --font-size-headline-main: clamp( calc(1.5rem * var(--font-scale)), calc(3vw * var(--font-scale)), calc(1.8rem * var(--font-scale)) ); /* h2 - 1.8rem = 28px */ --font-size-headline-section: clamp( calc(1.3rem * var(--font-scale)), calc(2.5vw * var(--font-scale)), calc(1.6rem * var(--font-scale)) ); /* h3 - 1.3rem = 24px */ --font-size-headline-sub: clamp( calc(1.05rem * var(--font-scale)), calc(2vw * var(--font-scale)), calc(1.1rem * var(--font-scale)) ); /* h4 - 1.1rem = 16px */ --font-size-headline-minor: clamp( calc(0.75rem * var(--font-scale)), calc(0.85vw * var(--font-scale)), calc(0.95rem * var(--font-scale)) ); /* h5, h6 - 0.95rem = ca. 12px */ /* Mobile Menü Typo */ --font-size-menu-header-mobile: 1.2rem; /* Text Menü Navigation Mobile - 1.2rem = 18px */ --font-size-menu-footer-mobile: 1.0rem; /* Text Menü footer Mobile - 1.0rem = 16px */ /* Footer UI */ --font-size-mobile-menu-copyright: 0.95rem; /* Text footer Copyright - 0.95rem = 12px */ --font-size-action-buttons-footer: 0.95rem; /* Text buttons footer - 0.95rem = 12px */ /* ========================================================= ZEICHENABSTÄNDE / LINE-HEIGHTS ========================================================= */ --line-height-headline-xl: clamp(1.05, 1.1, 1.15); /* h1 */ --line-height-headline-lg: clamp(1.1, 1.15, 1.2); /* h2 */ --line-height-headline-md: clamp(1.15, 1.2, 1.25); /* h3 */ --line-height-headline-sm: clamp(1.2, 1.25, 1.3); /* h4 */ --line-height-headline-xs: clamp(1.25, 1.3, 1.35); /* h5, h6 */ --line-height-text: clamp(1.5, 1.6, 1.7); /* p */ --line-height-ui: clamp(1.3, 1.4, 1.5); /* Footer / Listen */ --line-height-menu: clamp(1.2, 1.3, 1.4); /* Abstände Höhe im Header Menü */ /* ========================================================= RUNDUNGEN ========================================================= */ --radius-sm: 7px; /* leichte Rundung, z. B. für Hero-Bilder */ /* ========================================================= HOVER-LINIE MENÜ ========================================================= */ --hover-line-width: 100%; /* Breite der Linie: Standard: 100% */ /* ========================================================= TOUR DESIGN ========================================================= */ --color-tour-crew-divider: rgba(132,91,221,0.9); /* ========================================================= SCHRIFTARTEN ========================================================= */ --font-style-side-area: "Roboto"; /* Menüpunkte */ --font-style-text: "Roboto"; /* Fließtexte */ --font-style-headline: "Winky Sans"; /* Überschriften */ --font-style-ui: "Roboto"; /* Footer / Listen */ /* ========================================================= FARBEN HINTERGRUND ========================================================= */ --color-content-bg: rgba(16, 61, 223, 0.9); /* Hintergrund Content - Standard: rgba(16, 61, 223, 0.9) = #103DDF */ --color-content-bg-gray: rgba(67, 80, 107, 0.97); /* Hintergrund Content - dunkel */ --color-primary: rgba(16, 61, 223, 0.9); /* Primary - Standard */ --color-primary-bg-gray: rgba(67, 80, 107, 0.97); /* Primary - dunkel */ --color-secondary: rgba(18, 0, 181, 1); /* Alternativfarbe 3 - #1200B5 */ --color-accent-1: rgba(15, 110, 220, 1); /* Alternativfarbe 1 - #0F6EDC */ --color-accent-2: rgba(15, 87, 222, 1); /* Alternativfarbe 2 - #0F57DE */ --color-footer-bg: rgba(12, 56, 100, 0.95); /* Hintergrund Footer - #0c3864f2 */ --color-accent-3: rgba(12, 56, 100, 0.95); /* Hintergrund Footer */ /* ========================================================= FARBEN SCHRIFT ========================================================= */ --color-font-primary: rgba(255, 255, 255); /* Standard weiß */ --color-font-ticker: rgba(255, 255, 255, 0.95); /* Ticker */ --color-font-credit: rgba(10, 170, 162, 0.95); /* Credits */ /* ========================================================= FARBEN LINKS IM CONTENT ========================================================= */ --color-link: rgba(243, 105, 105, 0.95); /* Standard-Link */ --color-link-hover: rgba(255, 255, 255, 0.75); /* Hover-Link */ /* ========================================================= TO TOP BUTTON ========================================================= */ --bottom-menu-height: 100px; /* Höhe to top button */ /* ========================================================= CONTENT BOXEN ========================================================= */ --color-content-box-bg: rgba(0, 0, 0, 0.18); --color-content-box-border: rgba(255, 255, 255, 0.16); /* Variante für hervorgehobene Boxen */ --color-content-box-bg-strong: rgba(0, 0, 0, 0.28); --color-content-box-border-strong: rgba(255, 255, 255, 0.25); /* ========================================================= CONTENT / CARD BOXEN (global) ========================================================= */ --color-box-bg: rgba(0, 0, 0, 0.18); --color-box-border: rgba(255, 255, 255, 0.16); /* Variante für hervorgehobene Boxen */ --color-box-bg-strong: rgba(0, 0, 0, 0.28); --color-box-border-strong: rgba(255, 255, 255, 0.25); /* ========================================================= HIGHLIGHTS – SPEZIALBOXEN ========================================================= */ --color-highlight-section-bg: rgba(33, 13, 104, 0.863); --color-highlight-section-border: rgba(255,255,255,0.30); --color-highlight-section-bg-hover: rgba(40, 20, 120, 0.78); --color-highlight-section-border-hover: rgba(255,255,255,0.40); --color-highlight-box-bg: rgba(59, 21, 197, 0.863); --color-highlight-box-border: rgba(255,255,255,0.18); --color-highlight-box-bg-hover: rgba(75, 32, 215, 0.88); --color-highlight-box-border-hover: rgba(255,255,255,0.28); /* ========================================================= WIDESCREEN (Landscape Mobile) – optional ========================================================= */ /* Content */ --font-size-content-widescreen: 0.9rem; --line-height-text-widescreen: 1.5; --font-size-headline-hero-widescreen: 1.8rem; --line-height-headline-xl-widescreen: 1.15; /* Content Padding */ --content-padding-widescreen: 0.75rem 1.25rem 0 1rem; /* Footer */ --footer-padding-widescreen: 2rem 1.5rem; --footer-copyright-size-widescreen: 0.75rem; --footer-copyright-margin-top-widescreen: 2rem; --footer-h3-size-widescreen: 1rem; --footer-link-size-widescreen: 0.9rem; /* Optional: Mobile Nav Typo */ --font-size-menu-header-mobile-widescreen: 1.2rem; --font-size-menu-footer-mobile-widescreen: 1.0rem; /* ========================================================= THEME UI (Buttons / Border / Shadows) ========================================================= */ --color-text: rgba(255, 255, 255, 0.95); --color-border: rgba(255, 255, 255, 0.22); --color-border-strong: rgba(255, 255, 255, 0.32); --color-box-bg-hover: rgba(0, 0, 0, 0.24); --color-box-bg-active: rgba(0, 0, 0, 0.32); --shadow-soft: 0 3px 10px rgba(0, 0, 0, 0.25); --shadow-medium: 0 6px 16px rgba(0, 0, 0, 0.35); --shadow-strong: 0 8px 22px rgba(0, 0, 0, 0.45); }