/* ───────────────────────────────────────────────────────── Gartenbau Hein — global.css Identität: Waldgrün-Naturmarke · Brand #00852D (aus Logo) Display: Outfit · Body: Inter ───────────────────────────────────────────────────────── */ /* ─── Fonts ─── Self-hosted (DSGVO): @font-face-Bloecke liegen in css/fonts.css (generiert von scripts/fetch-fonts.sh), eingebunden im jeder Seite. NIEMALS fonts.googleapis.com laden (LG Muenchen 2022, abmahnfaehig). */ /* ─── CSS-Variablen ─── */ :root { /* Farben — monochrom Waldgrün, abgeleitet aus #00852D (hsl 140 100% 26%) */ --color-brand-main: #00852D; --color-brand-darker: #006B24; --color-brand-deep: #00531C; --color-brand-lighter: #1FA84A; --color-brand-subtle: #EAF7EE; --color-bg-light: #F6FAF6; --color-bg-dark: #0E1F14; --color-bg-dark-2: #133024; --color-bg-card: #FFFFFF; --color-bg-accent: #EEF6F0; --color-border: #DCE7DE; --color-border-strong: #C4D6C9; --color-text-muted: #56685C; --color-off-white: #F6FAF6; --color-success: #22C55E; --color-heading: #14231A; --color-body: #2E3D34; /* Akzent: warmes Bernstein (Holz/Bark) — nur als Mikro-Akzent, sparsam */ --color-accent-amber: #C8862B; /* Typografie */ --font-display: 'Outfit', sans-serif; --font-main: 'Inter', sans-serif; --font-size-body: 17px; --line-height-body: 1.65; --font-size-h1: 68px; --font-size-h2: 48px; --font-size-h3: 32px; --font-size-h4: 22px; --font-size-h5: 18px; --font-size-small: 17px; --font-size-nav: 17px; --font-size-button: 17px; /* Layout */ --max-width: 1200px; --nav-height: 84px; --section-padding: 110px 0; /* nur vertikal: horizontal regelt .container */ --section-padding-mobile: 60px 0; --radius-sm: 10px; --radius-md: 16px; --radius-lg: 24px; /* Schatten — layered, grün getönt */ --shadow-sm: 0 1px 2px rgba(0,83,28,0.05), 0 2px 6px rgba(0,83,28,0.06); --shadow-md: 0 1px 2px rgba(0,83,28,0.04), 0 6px 16px rgba(0,83,28,0.08), 0 16px 32px rgba(0,83,28,0.06); --shadow-lg: 0 2px 4px rgba(0,83,28,0.05), 0 12px 28px rgba(0,83,28,0.12), 0 28px 56px rgba(0,83,28,0.10); /* Easing */ --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } /* ─── Reset ─── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* KEIN scroll-behavior: smooth — kollidiert mit Lenis (Phase 5). */ html { -webkit-text-size-adjust: 100%; scroll-padding-top: var(--nav-height); } /* Nav liegt im Hero (transparent), schiebt ihn nicht nach unten: der Inhalt rückt um die Nav-Höhe nach oben unter die sticky Nav. */ main { margin-top: calc(-1 * var(--nav-height)); } body { font-family: var(--font-main); font-size: var(--font-size-body); line-height: var(--line-height-body); color: var(--color-body); background: var(--color-bg-light); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--color-heading); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; } h1 { font-size: var(--font-size-h1); letter-spacing: -0.035em; } h2 { font-size: var(--font-size-h2); letter-spacing: -0.03em; } h3 { font-size: var(--font-size-h3); } h4 { font-size: var(--font-size-h4); } h5 { font-size: var(--font-size-h5); } p { color: var(--color-body); } a { color: var(--color-brand-main); text-decoration: none; transition: color 0.25s var(--ease-out); } a:hover { color: var(--color-brand-darker); } img { max-width: 100%; display: block; } strong { color: var(--color-heading); font-weight: 600; } /* ─── Layout-Helfer ─── */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 40px; } /* Eyebrow — wiederkehrendes Struktur-Label */ .sk-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 14px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-brand-main); } .sk-eyebrow::before { content: ''; width: 26px; height: 2px; background: var(--color-brand-main); display: inline-block; } /* ─── Buttons ─── */ .btn-primary, .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 28px; font-family: var(--font-display); font-size: var(--font-size-button); font-weight: 600; border-radius: var(--radius-sm); cursor: pointer; border: 2px solid transparent; transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-out), background-color 0.25s var(--ease-out), color 0.25s var(--ease-out); } .btn-primary { background: var(--color-brand-main); color: #fff; box-shadow: var(--shadow-md); } .btn-primary:hover { background: var(--color-brand-darker); color: #fff; transform: translateY(-3px); box-shadow: var(--shadow-lg); } .btn-primary:active { transform: translateY(-1px); } .btn-secondary { background: transparent; color: var(--color-brand-main); border-color: var(--color-border-strong); } .btn-secondary:hover { border-color: var(--color-brand-main); color: var(--color-brand-darker); transform: translateY(-3px); } .btn-primary:focus-visible, .btn-secondary:focus-visible, a:focus-visible { outline: 3px solid var(--color-brand-lighter); outline-offset: 3px; } /* ─── Reveal-Animation (IntersectionObserver in js/main.js) ─── Gating auf html.js: ohne JavaScript bleibt aller Inhalt sichtbar (main.js setzt die Klasse). */ html.js .reveal { opacity: 0; transform: translateY(28px); will-change: transform, opacity; } /* Reveal als Animation (nicht Transition) — so leakt die Stagger-Verzögerung NICHT in die Hover-Transition der Karten. `backwards` hält das Element während der animation-delay-Phase unsichtbar, ohne den Endzustand zu pinnen. */ html.js .reveal.is-visible { opacity: 1; transform: none; animation: sk-reveal 0.7s var(--ease-out) backwards; } @keyframes sk-reveal { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } /* Screenshot-Modus (screenshot.mjs setzt html.screenshot): Reveals deaktivieren, damit alle Inhalte sichtbar und die Bilder deterministisch sind. */ html.screenshot .reveal { opacity: 1; transform: none; animation: none; } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } html.js .reveal { opacity: 1; transform: none; } } /* ─── Google Maps Zwei-Klick (DSGVO) ─── Markup in snippets/google-maps-consent.html, Klick-Handler in js/main.js. */ .map-consent { position: relative; overflow: hidden; background: var(--color-bg-accent); } .map-consent > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: blur(2px) brightness(0.85); } .map-consent-overlay { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 24px; text-align: center; background: rgba(14, 31, 20, 0.55); } .map-consent-overlay p { color: var(--color-off-white); font-size: var(--font-size-body); max-width: 520px; } .map-consent-overlay a { color: #FFFFFF; text-decoration: underline; } /* ─── Responsive ─── */ @media (max-width: 1024px) { :root { --section-padding: 84px 0; } h1 { font-size: 48px; } h2 { font-size: 36px; } h3 { font-size: 28px; } } @media (max-width: 767px) { :root { --section-padding: var(--section-padding-mobile); } .container { padding: 0 20px; } h1 { font-size: 36px; } h2 { font-size: 28px; } h3 { font-size: 24px; } }