/* * TOURMIO CRITICAL CSS * Inline in für schnelles Above-the-Fold Rendering * Enthält: Design System, Reset, Header, Hero */ /* ============================================ DESIGN SYSTEM - CSS CUSTOM PROPERTIES ============================================ */ :root { /* Farben */ --color-primary: #2e4d34; /* Deep Forest Green - Tourmio Hauptfarbe */ --color-accent: #d2b48c; /* Sand/Beige - Skandinavien, Strand */ --color-text: #333333; --color-text-light: #666666; --color-bg: #f8f9fa; --color-white: #ffffff; /* Spacing */ --spacing-xs: 8px; --spacing-sm: 16px; --spacing-md: 32px; --spacing-lg: 64px; --spacing-xl: 120px; /* Typography */ --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-size-h1: clamp(32px, 5vw, 56px); --font-size-h2: clamp(24px, 4vw, 40px); --font-size-h3: clamp(20px, 3vw, 28px); --font-size-body: 16px; --font-size-small: 14px; --line-height: 1.6; --line-height-heading: 1.2; /* Breakpoints */ --mobile: 320px; --tablet: 768px; --desktop: 1024px; --wide: 1440px; /* Effects */ --shadow-sm: 0 2px 8px rgba(0,0,0,0.08); --shadow-md: 0 4px 16px rgba(0,0,0,0.12); --shadow-lg: 0 8px 32px rgba(0,0,0,0.16); --transition: all 0.3s ease; --radius: 8px; --radius-lg: 16px; } /* ============================================ MODERN CSS RESET ============================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font-family); font-size: var(--font-size-body); line-height: var(--line-height); color: var(--color-text); background-color: var(--color-white); overflow-x: hidden; } img, picture, video, canvas, svg { display: block; max-width: 100%; height: auto; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: none; background: none; } ul, ol { list-style: none; } /* ============================================ TYPOGRAPHY ============================================ */ h1, h2, h3, h4, h5, h6 { font-weight: 700; line-height: var(--line-height-heading); color: var(--color-text); } h1 { font-size: var(--font-size-h1); } h2 { font-size: var(--font-size-h2); } h3 { font-size: var(--font-size-h3); } p { line-height: var(--line-height); color: var(--color-text); } /* ============================================ HEADER (STICKY) ============================================ */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: transparent; /* Transparent am Anfang */ transition: all 0.3s ease; padding: var(--spacing-sm) 0; } .header.scrolled { background: rgba(46, 77, 52, 0.95); /* Leicht translucent grün beim Scrollen */ box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); /* Moderner Blur-Effekt */ } .header-container { max-width: 1440px; margin: 0 auto; padding: 0 var(--spacing-md); display: flex; justify-content: space-between; align-items: center; } .logo { display: flex; align-items: center; } .logo-img { height: 80px; width: auto; transition: all 0.3s ease; drop-shadow: 0 1px 4px rgba(0,0,0,0.4); /* Logo mit weißem Kreis - gut sichtbar auf Hero & grünem Header */ } /* Mobile: Logo etwas kleiner */ @media (max-width: 768px) { .logo-img { height: 70px; } } /* Desktop Navigation */ .nav-desktop { display: none; } @media (min-width: 1024px) { .nav-desktop { display: flex; gap: var(--spacing-md); align-items: center; } .nav-desktop a { color: var(--color-white); font-weight: 500; transition: var(--transition); text-shadow: 0 1px 4px rgba(0,0,0,0.6); } .header.scrolled .nav-desktop a { text-shadow: none; } .nav-desktop a:hover { color: var(--color-accent); } .nav-desktop .button-primary { background: var(--color-accent); color: var(--color-primary); } .nav-desktop .button-primary:hover { background: var(--color-white); transform: translateY(-2px); } } /* Burger Menu */ .burger-menu { display: flex; flex-direction: column; gap: 6px; width: 32px; height: 32px; cursor: pointer; z-index: 1001; } @media (min-width: 1024px) { .burger-menu { display: none; } } .burger-menu span { display: block; width: 100%; height: 3px; background: var(--color-white); transition: var(--transition); border-radius: 2px; } .header.scrolled .burger-menu span { background: var(--color-white); /* Bleibt weiß auf grünem Header */ } .burger-menu.active span:nth-child(1) { transform: rotate(45deg) translate(8px, 8px); } .burger-menu.active span:nth-child(2) { opacity: 0; } .burger-menu.active span:nth-child(3) { transform: rotate(-45deg) translate(8px, -8px); } /* Mobile Menu Overlay */ .nav-mobile { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: var(--color-primary); z-index: 999; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: var(--spacing-lg); opacity: 0; visibility: hidden; transition: var(--transition); } .nav-mobile.active { opacity: 1; visibility: visible; } .nav-mobile a { color: var(--color-white); font-size: 24px; font-weight: 600; transition: var(--transition); } .nav-mobile a:hover { color: var(--color-accent); transform: translateX(10px); } /* ============================================ BUTTONS ============================================ */ .button { display: inline-block; padding: 16px 32px; border-radius: var(--radius); font-weight: 600; text-align: center; transition: var(--transition); cursor: pointer; } .button-primary { background: var(--color-primary); color: var(--color-white); box-shadow: 0 4px 12px rgba(46, 77, 52, 0.2); } .button-primary:hover { background: #254a2d; /* 10% darker */ transform: translateY(-2px); box-shadow: 0 6px 16px rgba(46, 77, 52, 0.3); } .button-primary:active { transform: translateY(0); } /* Mobile: Full-width buttons */ @media (max-width: 768px) { .button-primary { width: 100%; } } /* ============================================ SCROLL-TO-TOP BUTTON ============================================ */ .scroll-to-top { position: fixed; bottom: 32px; right: 32px; z-index: 999; width: 56px; height: 56px; border-radius: 50%; background: var(--color-primary); color: var(--color-white); border: none; cursor: pointer; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; } .scroll-to-top.visible { opacity: 1; visibility: visible; transform: translateY(0); } .scroll-to-top:hover { background: #254a2d; transform: translateY(-4px); box-shadow: 0 8px 16px rgba(46, 77, 52, 0.4); } .scroll-to-top:active { transform: translateY(-2px); } @media (max-width: 768px) { .scroll-to-top { bottom: 24px; right: 24px; width: 48px; height: 48px; } } /* ============================================ HERO SECTION ============================================ */ .hero { position: relative; height: 100vh; min-height: 600px; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; } @media (max-width: 768px) { .hero { min-height: 80vh; } } .hero-background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } .hero-background::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.4) 100%); } .hero-background img { width: 100%; height: 100%; object-fit: cover; } .hero-content { position: relative; z-index: 1; max-width: 800px; padding: 0 var(--spacing-md); color: var(--color-white); } .hero h1 { color: var(--color-white); margin-bottom: var(--spacing-sm); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .hero-subtitle { font-size: var(--font-size-h2); } .hero .hero-subtitle { color: var(--color-white); font-weight: 400; margin-bottom: var(--spacing-sm); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } .hero-tagline { font-size: 20px; font-weight: 500; letter-spacing: 0.5px; color: var(--color-white); margin-bottom: var(--spacing-lg); text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3); } @media (max-width: 768px) { .hero-tagline { font-size: 16px; } } /* ============================================ UTILITY CLASSES ============================================ */ .container { max-width: 1440px; margin: 0 auto; padding: 0 var(--spacing-md); } @media (min-width: 768px) { .container { padding: 0 var(--spacing-lg); } } .section { padding: 48px var(--spacing-sm); } @media (min-width: 768px) { .section { padding: 80px var(--spacing-md); } } @media (min-width: 1024px) { .section { padding: 120px var(--spacing-lg); } } .text-center { text-align: center; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }