/* ═══════════════════════════════════════════════════════════════ GJ Forst- und Gartentechnik — global.css CI: „Werkstatt & Wald" · Logo-Ocker als Primary ═══════════════════════════════════════════════════════════════ */ /* ─── Google Fonts ─── */ @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600;700&display=swap'); /* ─── CSS-Variablen ─── */ :root { /* Farben — aus dem Logo abgeleitet (Ocker/Camel + Tinte/Schwarz + Creme) */ --color-brand-main: #8A5A1E; /* rich bronze-ocker, primary, WCAG-tauglich */ --color-brand-darker: #6E4615; /* hover / active */ --color-brand-lighter: #C89860; /* exaktes Logo-Tan — Akzent, Siegel, Text auf dunkel */ --color-brand-subtle: #F4E9D7; /* heller Tan-Tint — Akzentflächen */ --color-bg-light: #FAF6EF; /* warmes Creme */ --color-bg-dark: #17140F; /* warmes Fast-Schwarz (Logo-Tinte) */ --color-bg-card: #FFFFFF; --color-bg-accent: #F1E6D2; /* Tan-Panel */ --color-border: #E7DCC7; /* warme Border */ --color-text-muted: #6B6155; /* warmes Grau-Braun */ --color-off-white: #FBF7F0; /* Creme-Text auf dunkel */ --color-success: #3F7D4F; /* natürliches Grün — Eco/Automower/Checks */ --color-heading: #1A150E; /* warmes Fast-Schwarz */ --color-body: #3A332A; /* warmes Dunkelbraun-Grau */ /* RGB-Channels (für rgba()-Tints aus denselben Tokens) */ --color-brand-lighter-rgb: 200,152,96; --color-success-rgb: 63,125,79; --color-off-white-rgb: 251,247,240; /* Typografie */ --font-display: 'Outfit', sans-serif; --font-main: 'IBM Plex Sans', sans-serif; --font-size-body: 17px; --line-height-body: 1.6; --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; --section-padding: 100px 40px; --section-padding-mobile: 60px 20px; --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; /* Schatten — layered + ocker-getönt */ --shadow-sm: 0 1px 2px rgba(26,21,14,0.05), 0 2px 6px rgba(138,90,30,0.06); --shadow: 0 1px 2px rgba(26,21,14,0.05), 0 6px 16px rgba(138,90,30,0.08), 0 18px 36px rgba(138,90,30,0.06); --shadow-lg: 0 2px 6px rgba(26,21,14,0.06), 0 14px 30px rgba(138,90,30,0.12), 0 32px 60px rgba(138,90,30,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). */ 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; } /* ─── Typografie ─── */ 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; font-weight: 700; } 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); letter-spacing: 0; } p { max-width: 68ch; } a { color: var(--color-brand-main); text-decoration: none; transition: color 0.2s var(--ease-out); } a:hover { color: var(--color-brand-darker); } img { max-width: 100%; display: block; } strong { font-weight: 600; color: var(--color-heading); } /* ─── Layout ─── */ .container { max-width: var(--max-width); margin: 0 auto; padding: 0 40px; } /* ─── Eyebrow / Label (Signatur: gravur-feine Tags) ─── */ .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-main); font-size: 17px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--color-brand-main); } .eyebrow::before { content: ''; width: 22px; height: 2px; background: 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-main); font-size: var(--font-size-button); font-weight: 600; line-height: 1; padding: 16px 28px; min-height: 52px; border-radius: var(--radius-sm); border: 2px solid transparent; cursor: pointer; transition: transform 0.25s var(--ease-spring), background-color 0.2s var(--ease-out), box-shadow 0.25s var(--ease-out), color 0.2s var(--ease-out), border-color 0.2s var(--ease-out); } .btn-primary { background: var(--color-brand-main); color: var(--color-off-white); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--color-brand-darker); color: var(--color-off-white); transform: translateY(-2px); box-shadow: var(--shadow); } .btn-primary:active { transform: translateY(0); } .btn-secondary { background: var(--color-bg-dark); color: var(--color-off-white); } .btn-secondary:hover { color: var(--color-off-white); transform: translateY(-2px); box-shadow: var(--shadow); } .btn-secondary:active { transform: translateY(0); } .btn-ghost { background: transparent; color: var(--color-heading); border-color: var(--color-border); } .btn-ghost:hover { color: var(--color-brand-main); border-color: var(--color-brand-main); transform: translateY(-2px); } .btn-primary:focus-visible, .btn-secondary:focus-visible, .btn-ghost:focus-visible, a:focus-visible { outline: 3px solid var(--color-brand-lighter); outline-offset: 3px; } /* ─── Lead-Text ─── */ .text-lead { font-size: 20px; line-height: 1.6; color: var(--color-text-muted); max-width: 62ch; } @media (max-width: 767px) { .text-lead { font-size: 18px; } } /* ─── Scroll-Reveal (zentral aus index.html getriggert via .is-visible) ─── Als Animation (nicht Transition) umgesetzt, damit sie nicht mit den Hover-`transition`s der Karten kollidiert (Spezifitäts-Konflikt). */ .reveal { opacity: 0; will-change: opacity, transform; } .reveal.is-visible { opacity: 1; animation: revealIn 0.7s var(--ease-out) var(--reveal-delay, 0ms) backwards; } @keyframes revealIn { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } } /* ─── Reduced Motion ─── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } .reveal { opacity: 1 !important; transform: none !important; } } /* ─── Responsive ─── */ @media (max-width: 1024px) { h1 { font-size: 48px; } h2 { font-size: 36px; } :root { --section-padding: 80px 32px; } } @media (max-width: 767px) { .container { padding: 0 20px; } h1 { font-size: 36px; } h2 { font-size: 28px; } h3 { font-size: 24px; } :root { --section-padding: 60px 20px; } }