/* ─────────────────────────────────────────────
Kewel Baumschulen — global.css
Mood: „Gewachsen" — warm, naturnah, premium-botanisch
───────────────────────────────────────────── */
/* ─── Google Fonts ───
Werden NICHT per @import geladen (render-blocking), sondern via
+ im jeder HTML-Datei. */
/* ─── CSS-Variablen ─── */
:root {
/* Marke — sattes Naturgrün (aus Logo / Polos / Lkw) */
--color-brand-main: #2F7A44;
--color-brand-darker: #1E5630;
--color-brand-lighter: #4FA368;
--color-brand-subtle: #E9F2EA;
/* Warmer Akzent — Ocker/Honig (Herbst, Obst, Rosen) */
--color-accent: #C6863F;
--color-accent-darker: #A66C2C;
--color-accent-subtle: #F6ECDD;
/* Hintergründe — warmes Creme-Papier statt kaltem Weiß */
--color-bg-light: #F7F5EF;
--color-bg-dark: #16271B;
--color-bg-card: #FFFFFF;
--color-bg-accent: #EDF3EC;
/* Linien & Text */
--color-border: #E3DFD3;
--color-text-muted: #6E7A6C;
--color-off-white: #F7F5EF;
--color-success: #4FA368;
--color-heading: #18301F;
--color-body: #3C4A3F;
/* Typografie */
--font-heading: 'Plus Jakarta Sans', sans-serif;
--font-body: 'Figtree', sans-serif;
--font-main: 'Figtree', 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;
--section-padding: 110px 40px;
--section-padding-mobile: 64px 20px;
--radius-sm: 10px;
--radius-md: 18px;
--radius-lg: 28px;
/* Schatten — geschichtet + grün getönt */
--shadow-sm:
0 1px 2px rgba(24,48,31,0.05),
0 2px 8px rgba(24,48,31,0.06);
--shadow-md:
0 1px 2px rgba(24,48,31,0.04),
0 6px 16px rgba(24,48,31,0.08),
0 18px 40px rgba(24,48,31,0.07);
--shadow-lg:
0 2px 4px rgba(24,48,31,0.05),
0 12px 28px rgba(24,48,31,0.12),
0 32px 64px rgba(24,48,31,0.12);
/* 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%; }
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;
text-rendering: optimizeLegibility;
overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
color: var(--color-heading);
font-weight: 700;
line-height: 1.12;
letter-spacing: -0.02em;
}
h1 { font-size: var(--font-size-h1); letter-spacing: -0.03em; }
h2 { font-size: var(--font-size-h2); letter-spacing: -0.025em; }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); font-weight: 600; }
h5 { font-size: var(--font-size-h5); font-weight: 600; }
p { font-size: var(--font-size-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, b { font-weight: 600; color: var(--color-heading); }
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 40px;
}
/* ─── Wiederverwendbare Utilities ─── */
/* Augenbraue / Eyebrow über Headlines */
.sk-eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-heading);
font-weight: 700;
font-size: 14px;
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--color-brand-main);
}
.sk-eyebrow::before {
content: '';
width: 26px;
height: 2px;
background: var(--color-accent);
border-radius: 2px;
}
/* Buttons */
.btn-primary,
.btn-secondary {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
min-height: 52px;
padding: 0 30px;
font-family: var(--font-heading);
font-size: var(--font-size-button);
font-weight: 600;
letter-spacing: -0.01em;
border-radius: 999px;
cursor: pointer;
border: 1.5px 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: 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-md);
}
.btn-primary:active { transform: translateY(0); }
.btn-secondary {
background: transparent;
color: var(--color-heading);
border-color: var(--color-border);
}
.btn-secondary:hover {
border-color: var(--color-brand-main);
color: var(--color-brand-main);
transform: translateY(-2px);
}
.btn-primary:focus-visible,
.btn-secondary:focus-visible {
outline: 3px solid var(--color-brand-lighter);
outline-offset: 3px;
}
/* Section-Kopf */
.sk-head { max-width: 720px; }
.sk-head h2 { margin: 18px 0 0; }
.sk-head p { margin-top: 18px; color: var(--color-text-muted); font-size: 19px; }
/* Scroll-Reveal Basis (IntersectionObserver in js/main.js toggelt .is-visible).
Gating auf html.js: ohne JavaScript bleibt aller Inhalt sichtbar
(main.js setzt die Klasse). */
html.js .reveal {
opacity: 0;
transform: translateY(28px);
transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
will-change: opacity, transform;
}
html.js .reveal.is-visible { 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; transition: none; }
@media (prefers-reduced-motion: reduce) {
html.js .reveal { opacity: 1; transform: none; transition: none; }
* { scroll-behavior: auto !important; }
}
/* Google Maps Zwei-Klick (DSGVO): Markup in snippets/google-maps-consent.html,
Klick-Handler in js/main.js. Reine Technik, Look kommt aus den Tokens. */
.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(22, 39, 27, 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) {
h1 { font-size: 48px; }
h2 { font-size: 36px; }
:root { --section-padding: 84px 40px; }
}
@media (max-width: 767px) {
.container { padding: 0 20px; }
h1 { font-size: 36px; }
h2 { font-size: 28px; }
h3 { font-size: 24px; }
/* Seitlich 0: den 20px-Randabstand liefert mobil allein der .container,
sonst stapeln sich Section- und Container-Padding zu 40px (Hero/Footer
haetten dann nur 20px — Innenabstaende waeren ungleich) */
:root { --section-padding: 60px 0; }
/* Einheitliche Header-Abstaende mobil: Eyebrow → Titel 16px, Titel → Subline 18px
(die Section-Leads ziehen in ihren eigenen Styles auf dieselben Werte) */
.sk-head h2 { margin: 16px 0 0; }
.sk-head p { font-size: 17px; }
}