/* ════════════════════════════════════════════════════════════════════ Gies & Reitz Gartenbau — Global Stylesheet CI: „Garten-Haus" — tiefes Smaragdgrün (Logo) · warme Greige-Töne · Smaragd-Schwarz · sparsamer Messing-Akzent · Lorbeer-Motiv. Fonts: Plus Jakarta Sans (Display) · Inter (Body) — sans-only. ════════════════════════════════════════════════════════════════════ */ /* ─── Fonts ─── */ /* Self-hosted via css/fonts.css (im vor global.css eingebunden). DSGVO: niemals fonts.googleapis.com auf der Live-Site. */ /* ─── CSS-Variablen ─── */ :root { /* Farben — Brand */ --color-brand-main: #006850; /* Logo-Smaragd */ --color-brand-darker: #014C3B; /* Hover / Tiefe */ --color-brand-lighter: #2F9E73; /* frisches Blattgrün */ --color-brand-subtle: #E7F2EC; /* heller Mint-Wash */ --color-accent: #BE9A4E; /* Messing/Honig (sparsam)*/ --color-accent-soft: #EBDFC4; /* heller Messing-Wash */ /* Farben — Flächen */ --color-bg-light: #F6F8F5; /* warmes Greige-Weiß */ --color-bg-dark: #0B2019; /* Smaragd-Schwarz */ --color-bg-card: #FFFFFF; --color-bg-accent: #EEF4EF; /* zarte grüne Sektion */ /* Farben — Linien & Text */ --color-border: #E1E8E2; --color-border-strong: #CBD8CF; --color-text-muted: #54625A; /* AA auf hellem BG */ --color-text-on-dark: #C9D8CF; /* gedämpft auf dunkel */ --color-off-white: #F6F8F5; --color-success: #2F9E73; --color-heading: #102A22; /* tiefes Grün-Anthrazit */ --color-body: #38453E; /* Typografie */ --font-display: 'Plus Jakarta Sans', sans-serif; --font-body: 'Inter', sans-serif; --font-main: 'Inter', sans-serif; /* Alias */ --font-size-body: 17px; --line-height-body: 1.7; --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: 1300px; /* Nur vertikal — der seitliche Abstand kommt ausschließlich vom .container. Sonst addieren sich Section- und Container-Padding (mobil 20 + 20 = 40px pro Seite). */ --section-padding: 110px 0; --section-padding-mobile: 64px 0; --radius-sm: 10px; --radius: 18px; --radius-lg: 28px; /* Schatten — geschichtet, grün-getönt */ --shadow-sm: 0 1px 2px rgba(16,42,34,0.04), 0 2px 6px rgba(16,42,34,0.05); --shadow: 0 1px 2px rgba(16,42,34,0.04), 0 6px 16px rgba(16,42,34,0.07), 0 18px 38px rgba(16,42,34,0.06); --shadow-lg: 0 2px 6px rgba(16,42,34,0.05), 0 12px 28px rgba(16,42,34,0.10), 0 32px 64px rgba(16,42,34,0.10); /* Motion */ --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%; } body { font-family: var(--font-body); 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; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); color: var(--color-heading); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; } h1 { font-size: var(--font-size-h1); font-weight: 800; letter-spacing: -0.035em; } h2 { font-size: var(--font-size-h2); font-weight: 700; letter-spacing: -0.03em; } h3 { font-size: var(--font-size-h3); font-weight: 700; letter-spacing: -0.02em; } h4 { font-size: var(--font-size-h4); font-weight: 600; letter-spacing: -0.01em; } h5 { font-size: var(--font-size-h5); font-weight: 600; } p { color: var(--color-body); } a { color: var(--color-brand-main); text-decoration: none; transition: color .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; } ::selection { background: var(--color-brand-main); color: #fff; } /* ─── Layout-Helfer ─── */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 40px; width: 100%; } /* ─── Eyebrow / Sektions-Label (Signatur: Lorbeer-Motiv) ─── */ .eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--font-body); font-size: 17px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-brand-main); } .eyebrow::before, .eyebrow::after { content: ''; width: 28px; height: 1.5px; background: linear-gradient(90deg, transparent, var(--color-accent)); } .eyebrow::after { background: linear-gradient(90deg, var(--color-accent), transparent); } .eyebrow--solo::before { display: none; } .eyebrow--light { color: var(--color-brand-lighter); } /* ─── Buttons ─── */ .btn-primary, .btn-secondary, .btn-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-display); font-size: var(--font-size-button); font-weight: 600; line-height: 1; padding: 17px 30px; min-height: 52px; border-radius: 999px; border: 1px solid transparent; cursor: pointer; transition: transform .3s var(--ease-spring), box-shadow .3s var(--ease-out), background-color .25s var(--ease-out), color .25s var(--ease-out), border-color .25s var(--ease-out); } .btn-primary { background: var(--color-brand-main); color: #fff; box-shadow: 0 6px 18px rgba(0,104,80,0.28); } .btn-primary:hover { background: var(--color-brand-darker); color: #fff; transform: translateY(-2px); box-shadow: 0 12px 26px rgba(0,104,80,0.34); } .btn-secondary { background: transparent; color: var(--color-brand-main); border-color: var(--color-border-strong); } .btn-secondary:hover { background: var(--color-brand-subtle); color: var(--color-brand-darker); border-color: var(--color-brand-lighter); transform: translateY(-2px); } /* Buttons auf dunklem Grund */ .on-dark .btn-secondary, .btn-secondary.on-dark { color: #fff; border-color: rgba(255,255,255,0.32); } .on-dark .btn-secondary:hover, .btn-secondary.on-dark:hover { background: rgba(255,255,255,0.10); color: #fff; border-color: rgba(255,255,255,0.6); } .btn-primary:active, .btn-secondary:active { transform: translateY(0); } :focus-visible { outline: 3px solid var(--color-brand-lighter); outline-offset: 3px; border-radius: 4px; } /* ─── Sektions-Kopf ─── */ .section-head { max-width: 720px; } .section-head h2 { margin: 18px 0 0; } .section-head p { margin-top: 18px; color: var(--color-text-muted); font-size: 19px; } .section-head--center { margin-left: auto; margin-right: auto; text-align: center; } .section-head--center .eyebrow { justify-content: center; } /* ─── Reveal-Animationen (IntersectionObserver setzt .is-visible) ─── */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); will-change: opacity, transform; } .reveal.is-visible { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } .reveal { opacity: 1; transform: none; } } /* ─── Responsive Basis ─── */ @media (max-width: 1024px) { :root { --font-size-h1: 48px; --font-size-h2: 36px; --font-size-h3: 28px; } .container { padding: 0 32px; } } @media (max-width: 767px) { :root { --font-size-h1: 36px; --font-size-h2: 28px; --font-size-h3: 24px; --line-height-body: 1.65; } .container { padding: 0 20px; } .section-head p { font-size: 17px; } .btn-primary, .btn-secondary, .btn-ghost { width: 100%; } }