/* ============================================================
B. Tola — ihrgartenmacher
global.css — Mood "Heckengrün" auf weißem Grund
============================================================ */
/* ─── Google Fonts: Manrope ───
Wird via im jeder HTML-Datei geladen
(kein @import hier — render-blocking + doppelte Anfrage). */
/* ─── CSS-Variablen ─── */
:root {
/* ───── Brand (Apfelgrün-Familie) ───── */
--color-brand-main: #468020; /* tiefes Apfelgrün — AA-lesbar für Text/Buttons */
--color-brand-darker: #356418; /* Hover-State / dunkleres Apfelgrün */
--color-brand-lighter: #63B32E; /* echte Markenfarbe (Logo) — Akzent-Pop */
--color-brand-subtle: #EEF6E6; /* sehr helle apfelgrüne Tint */
/* ───── Akzent (Sandstein-Beige — passt zu Naturstein-Projekten) ───── */
--color-accent-main: #B89968; /* warmer Sandstein */
--color-accent-darker: #8F7449;
--color-accent-lighter: #D9C39B;
--color-accent-subtle: #F7F2E8;
/* ───── Backgrounds ───── */
--color-bg-light: #FFFFFF; /* Default Seitenhintergrund — weiß */
--color-bg-dark: #1F3D14; /* dunkle Sections (z.B. Footer) — tiefes Apfelgrün */
--color-bg-card: #FFFFFF;
--color-bg-accent: #F8FAF6; /* dezente alternierende Section */
/* ───── Linien & neutrale Töne ───── */
--color-border: #E5E7E1; /* warm getöntes Hellgrau */
--color-border-strong: #C9CDC4;
--color-text-muted: #69715F;
--color-off-white: #FAFAF8;
/* ───── Semantisch ───── */
--color-success: #22C55E;
--color-heading: #213D12; /* sehr dunkles Apfelgrün-Anthrazit */
--color-body: #3C4A33;
/* ───── Typografie ───── */
--font-main: 'Manrope', system-ui, -apple-system, 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;
--letter-spacing-tight: -0.03em;
--letter-spacing-snug: -0.015em;
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.08em;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semi: 600;
--font-weight-bold: 700;
/* ───── Layout ───── */
--max-width: 1200px;
--max-width-wide: 1400px;
--section-padding: 120px 40px;
--section-padding-mobile: 72px 20px;
--radius-sm: 6px;
--radius-md: 12px;
--radius-lg: 20px;
--radius-pill: 999px;
/* ───── Schatten — layered, brand-tinted ───── */
--shadow-xs:
0 1px 2px rgba(30, 61, 42, 0.04);
--shadow-sm:
0 1px 2px rgba(30, 61, 42, 0.04),
0 2px 6px rgba(30, 61, 42, 0.06);
--shadow-md:
0 1px 2px rgba(30, 61, 42, 0.04),
0 6px 16px rgba(30, 61, 42, 0.08),
0 12px 24px rgba(30, 61, 42, 0.06);
--shadow-lg:
0 2px 4px rgba(30, 61, 42, 0.04),
0 12px 28px rgba(30, 61, 42, 0.10),
0 24px 48px rgba(30, 61, 42, 0.08);
/* ───── Easing ───── */
--ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}
/* ─── Reset ─── */
*, *::before, *::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* WICHTIG: KEIN scroll-behavior: smooth — kollidiert mit Lenis in Phase 5. */
html {
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
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;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* ─── Headings ─── */
h1, h2, h3, h4, h5, h6 {
color: var(--color-heading);
font-weight: var(--font-weight-semi);
line-height: 1.12;
letter-spacing: var(--letter-spacing-tight);
}
h1 {
font-size: var(--font-size-h1);
font-weight: var(--font-weight-bold);
}
h2 {
font-size: var(--font-size-h2);
font-weight: var(--font-weight-semi);
}
h3 {
font-size: var(--font-size-h3);
font-weight: var(--font-weight-semi);
letter-spacing: var(--letter-spacing-snug);
}
h4 {
font-size: var(--font-size-h4);
font-weight: var(--font-weight-semi);
letter-spacing: var(--letter-spacing-snug);
line-height: 1.3;
}
h5 {
font-size: var(--font-size-h5);
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-normal);
line-height: 1.4;
}
p {
color: var(--color-body);
line-height: var(--line-height-body);
}
/* ─── Links ─── */
a {
color: var(--color-brand-main);
text-decoration: none;
transition: color 200ms var(--ease-out);
}
a:hover {
color: var(--color-brand-darker);
}
/* ─── Bilder ─── */
img {
max-width: 100%;
display: block;
height: auto;
}
/* ─── Container ─── */
.container {
max-width: var(--max-width);
margin: 0 auto;
padding: 0 40px;
}
.container-wide {
max-width: var(--max-width-wide);
margin: 0 auto;
padding: 0 40px;
}
/* ─── Buttons ─── */
.btn-primary,
.btn-primary-on-dark,
.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: var(--font-weight-semi);
letter-spacing: var(--letter-spacing-snug);
padding: 16px 32px;
border-radius: var(--radius-pill);
border: 1.5px solid transparent;
cursor: pointer;
text-decoration: none;
min-height: 52px;
transition:
transform 220ms var(--ease-spring),
background-color 220ms var(--ease-out),
color 220ms var(--ease-out),
border-color 220ms var(--ease-out),
box-shadow 220ms var(--ease-out);
will-change: transform;
}
.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-primary:focus-visible {
outline: 2px solid var(--color-brand-main);
outline-offset: 3px;
}
.btn-secondary {
background: transparent;
color: var(--color-heading);
border-color: var(--color-border-strong);
}
.btn-secondary:hover {
border-color: var(--color-brand-main);
color: var(--color-brand-main);
transform: translateY(-2px);
}
.btn-secondary:focus-visible {
outline: 2px solid var(--color-brand-main);
outline-offset: 3px;
}
.btn-ghost {
background: transparent;
color: var(--color-brand-main);
padding: 8px 0;
border-radius: 0;
min-height: auto;
position: relative;
}
.btn-ghost::after {
content: '';
position: absolute;
left: 0;
bottom: 4px;
height: 1.5px;
width: 100%;
background: currentColor;
transform-origin: right;
transform: scaleX(1);
transition: transform 320ms var(--ease-out);
}
.btn-ghost:hover::after {
transform-origin: left;
transform: scaleX(1);
}
.btn-ghost:hover {
color: var(--color-brand-darker);
}
/* Variante: Light-Button für dunkle Backgrounds */
.btn-primary-on-dark {
background: var(--color-off-white);
color: var(--color-brand-darker);
}
.btn-primary-on-dark:hover {
background: var(--color-accent-lighter);
color: var(--color-brand-darker);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
/* ─── Form Inputs ─── */
input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
font-family: var(--font-main);
font-size: var(--font-size-body);
color: var(--color-body);
background: var(--color-bg-card);
border: 1.5px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 14px 18px;
width: 100%;
transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus {
outline: none;
border-color: var(--color-brand-main);
box-shadow: 0 0 0 3px rgba(45, 91, 62, 0.12);
}
input::placeholder,
textarea::placeholder {
color: var(--color-text-muted);
}
label {
display: block;
font-size: 15px;
font-weight: var(--font-weight-medium);
color: var(--color-heading);
margin-bottom: 8px;
letter-spacing: var(--letter-spacing-snug);
}
/* ─── Utility ─── */
.eyebrow {
display: inline-flex;
align-items: center;
gap: 10px;
font-size: 14px;
font-weight: var(--font-weight-semi);
color: var(--color-brand-main);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
}
.eyebrow::before {
content: '';
width: 28px;
height: 1.5px;
background: var(--color-brand-main);
display: inline-block;
}
.text-muted { color: var(--color-text-muted); }
.text-brand { color: var(--color-brand-main); }
.text-accent { color: var(--color-accent-darker); }
/* ─── Animation defaults: nur transform + opacity ─── */
@keyframes fadeUp {
from { opacity: 0; transform: translate3d(0, 24px, 0); }
to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
/* IntersectionObserver-Pattern (gleicher Trigger-Class für Sections): */
.reveal {
opacity: 0;
transform: translate3d(0, 24px, 0);
transition:
opacity 720ms var(--ease-out),
transform 720ms var(--ease-out);
will-change: transform, opacity;
}
.reveal.is-visible {
opacity: 1;
transform: translate3d(0, 0, 0);
}
/* ─── Responsive ─── */
@media (max-width: 1024px) {
:root {
--section-padding: 96px 32px;
}
h1 { font-size: 52px; }
h2 { font-size: 40px; }
h3 { font-size: 28px; }
}
@media (max-width: 767px) {
:root {
/* Mobil: Section-Padding vertikal behalten, horizontal 0 —
der seitliche Abstand (15px) kommt allein vom Container unten. */
--section-padding: 72px 0;
}
.container,
.container-wide { padding: 0 20px; }
/* Einheitlich 20px links/rechts auf Mobil. !important, weil die
Section-