/* ==========================================================================
Saale-Baumschule — Website-Stylesheet
Grundlage: design/design-system/tokens.css (Farben pixel-gemessen im Logo)
Formprinzip: „Hochkant" — design/vision/BRIEF.md §1, Prototypen in design/vision/
Regeln: design/round-c/BRIEF.md §1 (Kontrast) und §5 (Technik)
Warum eine unkomprimierte Datei unter /styles/ statt im Astro-Asset-Pipeline?
Weil die serverseitig gerenderte Terminseite eine Cloudflare Pages Function ist
(functions/termine/[slug].js) und keinen Zugriff auf die gehashten Astro-Assets
hat. Ein stabiler Pfad ist hier mehr wert als ein Hash im Dateinamen.
Nicht verhandelbar:
- Salbei ist nie Textfarbe. Er kommt hier gar nicht erst vor.
- Jade als Text nur auf Tief. Sonst nur Punkt, Rand, Linie.
- Gelb auf Tanne nur gross — nie fuer 14-px-Labels.
- Text auf Foto braucht einen Schleier, der auch an der hellsten Stelle traegt.
- Blatt-Radius: drei runde Ecken, eine straffe — immer unten links.
- Tropfen-Fenster hoechstens einmal pro Seite.
========================================================================== */
:root {
/* ---- Gruen-Familie ---------------------------------------------------- */
--gruen-tanne: #0C644C;
--gruen-tief: #07402F;
--gruen-jade: #74B088;
--mint: #D8F0E4;
--mint-licht: #EAF6EE;
--weiss: #FDFDFB;
/* ---- Warm-Familie ----------------------------------------------------- */
--sand: #E8C090;
--sand-licht: #F3E2C8;
--karamell: #C89870;
--holz: #B8885C;
--rinde: #6E4A2B;
/* ---- Bluetenakzente (nie als Flaeche) --------------------------------- */
--rosa: #EC8094;
--gelb: #F2C05C;
/* ---- Text ------------------------------------------------------------- */
--tinte: #1C332A;
--tinte-sanft: #45594E;
/* ---- Semantische Rollen ----------------------------------------------- */
--flaeche: var(--weiss);
--flaeche-wechsel: var(--mint-licht);
--flaeche-dunkel: var(--gruen-tief);
--text: var(--tinte);
--text-auf-dunkel: var(--weiss);
--ampel-vorraetig: var(--gruen-jade);
--ampel-wenige: var(--gelb);
--ampel-vergriffen: var(--karamell);
/* ---- Schrift ---------------------------------------------------------- */
--font-display: "Signika", "Segoe UI", system-ui, sans-serif;
--font-body: "Outfit", "Segoe UI", system-ui, sans-serif;
--font-hand: "Caveat", cursive;
--fs-hero: clamp(2.3rem, 7.2vw, 3.9rem);
--fs-h2: clamp(1.7rem, 4.6vw, 2.5rem);
--fs-h3: clamp(1.15rem, 3.4vw, 1.4rem);
--fs-body: 1.0625rem;
--fs-klein: 0.9375rem;
--fs-label: 0.875rem; /* Projekt-Minimum, nie kleiner */
--fs-preis: clamp(1.6rem, 5vw, 2rem);
--ls-label: 0.08em;
/* ---- Raum ------------------------------------------------------------- */
--raum-1: .25rem;
--raum-2: .5rem;
--raum-3: .75rem;
--raum-4: 1rem;
--raum-5: 1.5rem;
--raum-6: 2rem;
--raum-7: 3rem;
--raum-8: 4rem;
--raum-sektion: clamp(3.5rem, 8vw, 6.5rem);
--container: 1360px;
--gutter: clamp(1rem, 4vw, 2.25rem);
--spalt: clamp(.5rem, 1.6vw, 1.25rem); /* Abstand zwischen zwei Bahnen */
/* ---- Form ------------------------------------------------------------- */
--radius-blatt: 18px 18px 18px 5px;
--radius-blatt-gross: 28px 28px 28px 8px;
--radius-rund: 999px;
--schatten-karte: 0 1px 2px rgba(7, 64, 47, .06), 0 6px 18px rgba(7, 64, 47, .08);
--schatten-schild: 0 2px 4px rgba(110, 74, 43, .18);
--dauer-kurz: 160ms;
--dauer-mittel: 260ms;
--kurve: cubic-bezier(.33, 1, .68, 1);
/* Schleier fuer Text auf Foto — traegt auch ueber der hellsten Bildstelle */
--schleier: linear-gradient(to top,
rgba(7, 64, 47, .97) 0%, rgba(7, 64, 47, .95) 48%,
rgba(7, 64, 47, .80) 72%, rgba(7, 64, 47, 0) 100%);
}
/* ==========================================================================
Basis
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
margin: 0;
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: 1.65;
color: var(--text);
background: var(--flaeche);
-webkit-font-smoothing: antialiased;
overflow-x: hidden;
padding-bottom: 56px; /* Platz fuer die feste Anruf-Leiste am Telefon */
}
h1, h2, h3, h4 {
font-family: var(--font-display);
font-weight: 600;
color: var(--gruen-tanne);
margin: 0 0 var(--raum-4);
overflow-wrap: break-word;
}
h1 { font-size: var(--fs-hero); line-height: 1.04; letter-spacing: -.015em; }
h2 { font-size: var(--fs-h2); line-height: 1.14; }
h3 { font-size: var(--fs-h3); line-height: 1.3; }
h4 { font-size: 1.05rem; line-height: 1.35; }
p { margin: 0 0 var(--raum-4); }
p:last-child { margin-bottom: 0; }
img, video { max-width: 100%; display: block; }
ul, ol { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }
fieldset { border: 0; padding: 0; margin: 0 0 var(--raum-5); }
a {
color: var(--gruen-tanne);
text-decoration: underline;
text-decoration-thickness: 1.5px;
text-underline-offset: 3px;
text-decoration-color: var(--gruen-jade);
transition: text-decoration-color var(--dauer-kurz) var(--kurve);
}
a:hover { text-decoration-color: var(--gruen-tanne); }
/* Fokus: Doppelring, traegt auf hell UND dunkel */
:focus { outline: none; }
:focus-visible {
outline: 3px solid transparent; /* Windows-Kontrastmodus */
box-shadow: 0 0 0 3px var(--weiss), 0 0 0 6px var(--gruen-tanne);
border-radius: 8px;
position: relative;
z-index: 5;
}
.auf-dunkel :focus-visible {
box-shadow: 0 0 0 3px var(--gruen-tief), 0 0 0 6px var(--gelb);
}
.sr {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.sprung {
position: absolute; left: -9999px; top: 0; z-index: 100;
background: var(--gruen-tief); color: var(--weiss);
padding: .75rem 1rem; border-radius: 0 0 var(--radius-blatt);
text-decoration: none; font-weight: 600;
}
.sprung:focus { left: 0; }
/* ==========================================================================
Raster
========================================================================== */
.container {
max-width: var(--container);
margin-inline: auto;
padding-inline: var(--gutter);
}
.lese { max-width: 62ch; }
.sektion { padding-block: var(--raum-sektion); scroll-margin-top: 1rem; }
.sektion--schmal { padding-block: var(--raum-7); }
.sektion--mint { background: var(--flaeche-wechsel); }
.sektion--sand { background: var(--sand-licht); }
.sektion--dunkel { background: var(--flaeche-dunkel); color: var(--text-auf-dunkel); }
.sektion--dunkel h2, .sektion--dunkel h3, .sektion--dunkel h4 { color: var(--mint); }
.sektion--dunkel a { color: var(--mint); text-decoration-color: var(--gruen-jade); }
.sektion--dunkel strong { color: var(--weiss); }
/* Kapitelmarke: die Naht, die senkrecht durch die Seite laeuft */
.kopf { margin-bottom: var(--raum-6); }
.kopf::before {
content: ""; display: block; width: 2px; height: 44px;
background: var(--gruen-jade); margin-bottom: var(--raum-4); border-radius: 2px;
}
.sektion--dunkel .kopf::before, .auf-dunkel .kopf::before { background: var(--gelb); }
.kopf p { color: var(--tinte-sanft); max-width: 56ch; }
.kopf--flach { margin-bottom: 0; }
.sektion--dunkel .kopf p, .auf-dunkel .kopf p { color: var(--mint); }
.eyebrow {
font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label);
text-transform: uppercase; color: var(--rinde);
display: block; margin-bottom: var(--raum-3);
}
.sektion--dunkel .eyebrow, .auf-dunkel .eyebrow { color: var(--gelb); }
.zwei-spalten { display: grid; gap: var(--raum-5); grid-template-columns: 1fr; }
.zwei-spalten > * { min-width: 0; }
.abstand-oben { margin-top: var(--raum-6); }
.abstand-oben-gross { margin-top: var(--raum-8); }
/* ==========================================================================
Die Bahn — das eine Grundmodul
Eine stehende Flaeche (9:16 bzw. 3:4), die Foto, Video, Typo oder
Angebotskarte gleichermassen traegt.
========================================================================== */
.bahnen { display: grid; gap: var(--spalt); grid-template-columns: 1fr; }
.bahnen > * { min-width: 0; }
.breit-3 { display: grid; gap: var(--spalt); grid-template-columns: 1fr; }
.breit-3 > * { min-width: 0; }
.bahn {
position: relative; border-radius: var(--radius-blatt-gross);
overflow: hidden; background: var(--mint-licht);
}
.bahn--hoch { aspect-ratio: 9/16; }
.bahn--halb { aspect-ratio: 3/4; }
.bahn > img, .bahn > video, .bahn > picture > img {
width: 100%; height: 100%; object-fit: cover;
}
.bahn > picture { display: block; width: 100%; height: 100%; }
/* Bildetikett — weisse Karte auf Foto, traegt immer */
.bildetikett {
position: absolute; left: var(--raum-4); bottom: var(--raum-4); right: var(--raum-4);
background: var(--weiss); border-radius: var(--radius-blatt);
padding: var(--raum-3) var(--raum-4);
font-size: var(--fs-klein); line-height: 1.45; color: var(--tinte);
box-shadow: var(--schatten-karte);
display: flex; align-items: flex-start; gap: var(--raum-3);
max-width: 34ch; margin: 0;
}
.bildetikett::before {
content: ""; width: .62em; height: .62em; margin-top: .5em; flex: none;
border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
background: var(--gruen-jade);
}
.bildetikett--rosa::before { background: var(--rosa); }
.bildetikett--gelb::before { background: var(--gelb); }
.bildetikett--karamell::before { background: var(--karamell); }
/* Tropfen-Fenster — hoechstens einmal pro Seite */
.tropfen {
border-radius: 50% 50% 50% 0; overflow: hidden;
aspect-ratio: 1; background: var(--mint);
}
.tropfen img { width: 100%; height: 100%; object-fit: cover; }
/* ==========================================================================
Knoepfe
========================================================================== */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--raum-2);
font-family: var(--font-body); font-size: 1rem; font-weight: 600; line-height: 1.2;
padding: .85rem 1.4rem; min-height: 48px;
border-radius: var(--radius-blatt); border: 2px solid transparent;
cursor: pointer; text-decoration: none; text-align: center;
transition: background-color var(--dauer-kurz) var(--kurve),
color var(--dauer-kurz) var(--kurve),
border-color var(--dauer-kurz) var(--kurve),
transform var(--dauer-kurz) var(--kurve);
}
.btn:hover { transform: translateY(-1px); }
.btn--gross { font-size: 1.0625rem; padding: 1rem 1.6rem; min-height: 56px; }
.btn--primaer { background: var(--gruen-tanne); color: var(--weiss); }
.btn--primaer:hover { background: var(--gruen-tief); }
.btn--warm { background: var(--rinde); color: var(--weiss); } /* 7,7:1 */
.btn--warm:hover { background: #5A3C22; }
.btn--hell, .sektion--dunkel a.btn--hell, .auf-dunkel a.btn--hell {
background: var(--mint); color: var(--gruen-tief);
}
.btn--hell:hover { background: var(--weiss); }
.btn--sekundaer { background: transparent; color: var(--gruen-tanne); border-color: var(--gruen-tanne); }
.btn--sekundaer:hover { background: var(--mint-licht); }
.auf-dunkel .btn--sekundaer, .sektion--dunkel .btn--sekundaer {
color: var(--mint); border-color: var(--gruen-jade);
}
.auf-dunkel .btn--sekundaer:hover, .sektion--dunkel .btn--sekundaer:hover {
background: rgba(216, 240, 228, .14);
}
.btn-reihe { display: flex; flex-wrap: wrap; gap: var(--raum-3); }
/* Sichtbar deaktiviert — nicht nur blass: gestrichelter Rand plus Wortlaut daneben */
.btn[disabled], .btn[aria-disabled="true"] {
background: var(--mint-licht); color: var(--tinte-sanft);
border: 2px dashed var(--karamell); cursor: not-allowed;
}
.btn[disabled]:hover, .btn[aria-disabled="true"]:hover {
transform: none; background: var(--mint-licht);
}
/* ==========================================================================
Nachrichten-Banner (redaktionell, wegklickbar)
Ist im Backend kein Text gepflegt, steht dieses Element gar nicht im HTML.
========================================================================== */
.banner { background: var(--sand); color: var(--tinte); }
.banner .container {
display: flex; align-items: flex-start; gap: var(--raum-3);
padding-block: .55rem; justify-content: space-between;
}
.banner__text { min-width: 0; overflow-wrap: anywhere; font-size: var(--fs-label); line-height: 1.45; margin: 0; }
.banner__text b { font-family: var(--font-display); font-weight: 600; }
.banner__zu {
flex: none; background: transparent; border: 1.5px solid var(--rinde); color: var(--rinde);
border-radius: var(--radius-rund); min-width: 40px; min-height: 40px; cursor: pointer;
font-family: var(--font-body); font-size: 1.1rem; line-height: 1; font-weight: 600;
display: inline-flex; align-items: center; justify-content: center;
}
.banner__zu:hover { background: var(--rinde); color: var(--weiss); }
.banner[hidden] { display: none; }
/* ==========================================================================
Utility-Leiste, Kopfzeile, Krume
========================================================================== */
.utility {
background: var(--gruen-tief); color: var(--weiss);
font-size: var(--fs-label); padding: .5rem 0;
}
.utility .container {
display: flex; flex-wrap: wrap; gap: var(--raum-2) var(--raum-5);
justify-content: space-between; align-items: center;
}
.utility a { color: var(--gelb); text-decoration: none; font-weight: 600; }
.utility a:hover { text-decoration: underline; }
.utility__ort { color: var(--mint); }
/* Oeffnungsstatus: Punkt UND Wort, wie bei der Ampel */
.status {
display: inline-flex; align-items: center; gap: var(--raum-2);
font-weight: 600; color: var(--weiss);
}
.status::before {
content: ""; width: .7em; height: .7em; border-radius: 50%;
flex: none; background: var(--gruen-jade);
}
.status--offen::before { background: var(--gruen-jade); }
.status--oeffnet_gleich::before, .status--schliesst_gleich::before { background: var(--gelb); }
.status--geschlossen::before, .status--winterpause::before { background: var(--karamell); }
.status--geschlossen, .status--winterpause,
.status--oeffnet_gleich, .status--schliesst_gleich { color: var(--mint); }
.status--klein { font-size: var(--fs-klein); }
.kopfleiste {
background: var(--weiss); border-bottom: 1px solid var(--mint);
padding: var(--raum-3) 0;
}
.kopfleiste .container {
display: flex; align-items: center; justify-content: space-between; gap: var(--raum-4);
}
.kopfleiste img { height: 76px; width: auto; } /* Logo größer: Begehung + Erik 30.09.2026 */
.nav { display: none; gap: var(--raum-5); }
.nav a {
text-decoration: none; font-weight: 500; color: var(--tinte);
padding: .35rem .1rem; border-bottom: 2px solid transparent;
}
.nav a:hover { color: var(--gruen-tanne); border-bottom-color: var(--gruen-jade); }
.nav a[aria-current="page"] { color: var(--gruen-tanne); border-bottom-color: var(--gruen-tanne); }
.kopfleiste__tel {
font-weight: 600; color: var(--gruen-tanne); text-decoration: none; font-size: var(--fs-klein);
}
.krume { padding-block: var(--raum-3); font-size: var(--fs-klein); color: var(--tinte-sanft); }
.krume ol { display: flex; flex-wrap: wrap; gap: .35rem var(--raum-2); }
.krume li::after { content: "\203A"; margin-left: var(--raum-2); color: var(--karamell); }
.krume li:last-child::after { content: ""; }
.krume a { color: var(--gruen-tanne); }
/* ==========================================================================
Hero — mobil Bild zuerst, Text danach.
Am Desktop ergibt dieselbe DOM-Reihenfolge das Triptychon Blume | Wort | Baum.
========================================================================== */
.hero { padding: var(--gutter) 0 0; }
.hero__foto { aspect-ratio: 9/16; max-height: 64vh; }
/* --------------------------------------------------------------------------
Mobil wird aus dem Triptychon ein Diptychon.
Auf dem Desktop rahmen die beiden Fotos die Behauptung: links der Innenhof
(„Blume"), rechts die Baumreihen („bis zum Baum"). Der Claim steht zwischen
seinen eigenen Belegen — das ist die Idee des Aufmachers.
Untereinander gestapelt geht genau diese Klammer verloren. Man sieht Beleg,
Behauptung und Beleg nie zusammen, bezahlt aber 1.643 px dafür — fast zwei
Bildschirme, bevor irgendetwas anderes kommt. Nebeneinander bleibt die Figur
lesbar, und der ganze Aufmacher passt in einen Bildschirm.
Diese Regeln stehen ausdrücklich in einer eigenen max-width-Abfrage, obwohl
das Stylesheet sonst mobile-first arbeitet. Grund: die Anordnung ist hier
nicht eine Abstufung derselben Idee, sondern eine andere. Als Basisregeln
müssten sie oben einzeln zurückgenommen werden — und dabei gewinnt
`.hero--drei .bahnen > .hero__foto:first-of-type` jedes schlichte
`.hero__foto`. Genau daran ist der erste Versuch gescheitert: das Foto
behielt sein 3:4 und schob sich über den Textblock.
-------------------------------------------------------------------------- */
@media (max-width: 719.98px) {
/* Reihenfolge mobil (Erik, 15.08.): erst Logo und Claim, dann das Fotopaar.
Das Wort steht damit vor seinem Beleg statt zwischen zwei Belegen. Die
Fotos ragen trotzdem in den ersten Bildschirm hinein — die Seite beginnt
also nicht mit einer reinen Textwand. */
.hero--drei .bahnen { grid-template-columns: 1fr 1fr; }
.hero--drei .bahnen > .hero__text { grid-column: 1 / -1; grid-row: 1; }
.hero--drei .bahnen > .hero__foto {
grid-row: 2; aspect-ratio: 3/4; max-height: none;
}
.hero--drei .bahnen > .hero__foto:first-of-type { grid-column: 1; }
.hero--drei .bahnen > .hero__foto:last-of-type { grid-column: 2; }
.hero--drei .bahnen > .hero__paar { grid-column: 1 / -1; grid-row: 3; }
/* Die beiden Knoepfe im Aufmacher doppeln mobil exakt die feste Leiste am
unteren Rand („Anrufen" · „Zeiten & Anfahrt"), die ohnehin immer sichtbar
ist. Sie kosten hier rund 120 px und schieben das Fotopaar aus dem ersten
Bildschirm. Die Telefonnummer steht oben in der Kopfleiste weiterhin. */
.hero--drei .hero__text .btn-reihe { display: none; }
/* Ebenso der Öffnungsstatus: derselbe Satz steht mobil schon in der
Utility-Leiste ganz oben, keine zwei Bildschirmzentimeter entfernt. */
.hero--drei .hero__text .status--klein { display: none; }
/* In halber Breite ist ein Bildetikett nicht mehr lesbar. Eine gemeinsame
Zeile unter dem Paar sagt dasselbe und macht die Klammer sogar
ausdrücklich, statt sie nur anzudeuten. */
.hero--drei .hero__foto .bildetikett { display: none; }
}
.hero__paar {
margin: 0;
font-size: var(--fs-klein); line-height: 1.45; color: var(--tinte-sanft);
}
.hero__text {
background: var(--gruen-tief); color: var(--weiss);
border-radius: var(--radius-blatt-gross);
padding: clamp(1.5rem, 6vw, 2.5rem);
display: flex; flex-direction: column; justify-content: center; gap: var(--raum-4);
}
.hero__text h1 { color: var(--weiss); margin: 0; }
.hero__text p { color: var(--mint); margin: 0; max-width: 40ch; }
.marke1934 {
display: inline-block; align-self: flex-start;
font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label);
text-transform: uppercase; background: var(--sand); color: var(--gruen-tief);
border-radius: var(--radius-blatt); padding: .35rem .8rem; transform: rotate(-1.5deg);
}
.stichtag { font-size: var(--fs-klein); border-left: 3px solid var(--gelb); padding-left: var(--raum-4); }
/* ==========================================================================
Gaertnerpreis-Schild — die einzige Stelle mit Caveat
========================================================================== */
.schild {
background: var(--sand-licht); border: 1.5px solid var(--karamell);
border-radius: var(--radius-blatt);
padding: var(--raum-4) var(--raum-5) var(--raum-3);
text-align: center; position: relative; margin: 0;
transform: rotate(-1.5deg); box-shadow: var(--schatten-schild); color: var(--tinte);
}
.schild::before { /* Lochoese */
content: ""; position: absolute; top: 7px; left: 50%;
width: 9px; height: 9px; transform: translateX(-50%);
border-radius: 50%; background: var(--weiss); border: 1.5px solid var(--karamell);
}
.schild__preis {
font-family: var(--font-hand); font-size: var(--fs-preis); font-weight: 700;
color: var(--gruen-tief); line-height: 1.05; display: block;
}
.schild__vorher { display: block; font-size: var(--fs-label); color: var(--rinde); text-decoration: line-through; }
.schild__zusatz, .schild__was { display: block; font-size: var(--fs-label); color: var(--rinde); }
.schild__ab {
display: block; font-size: var(--fs-label); font-weight: 600;
letter-spacing: var(--ls-label); text-transform: uppercase; color: var(--rinde);
}
.schild--auf-bild { position: absolute; right: var(--raum-4); bottom: var(--raum-4); }
.schild--frei { align-self: flex-start; padding-top: var(--raum-4); }
.auf-dunkel .schild { color: var(--tinte); }
.merker {
display: inline-block; font-size: var(--fs-label); font-weight: 600;
letter-spacing: var(--ls-label); text-transform: uppercase;
background: var(--sand); color: var(--gruen-tief);
border-radius: var(--radius-blatt); padding: .3rem .75rem; margin-bottom: var(--raum-3);
}
/* ==========================================================================
Ampel — Punkt UND Wort, nie nur Farbe
========================================================================== */
.ampel {
display: inline-flex; align-items: center; gap: var(--raum-2);
font-size: var(--fs-klein); font-weight: 600; color: var(--tinte); margin: 0;
}
.ampel--gross { font-size: var(--fs-body); }
.ampel::before { content: ""; width: .7em; height: .7em; border-radius: 50%; flex: none; }
.ampel--vorraetig::before { background: var(--ampel-vorraetig); }
.ampel--wenige::before { background: var(--ampel-wenige); }
.ampel--vergriffen::before { background: var(--ampel-vergriffen); }
.ampel--vergriffen { color: var(--tinte-sanft); }
.auf-dunkel .ampel, .auf-dunkel .ampel--vergriffen, .sektion--dunkel .ampel { color: var(--mint); }
/* ==========================================================================
Angebote
========================================================================== */
.angebot {
background: var(--weiss); border-radius: var(--radius-blatt-gross); overflow: hidden;
box-shadow: var(--schatten-karte);
display: flex; flex-direction: column; min-width: 0; height: 100%;
}
.angebot__link { display:flex;flex-direction:column;min-width:0;height:100%;color:inherit;text-decoration:none }
.angebot__link:focus-visible { outline:4px solid var(--gelb);outline-offset:-4px }
.angebot__link:hover h3 { text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.16em }
.angebot__bild { position: relative; aspect-ratio: 3/4; }
.angebot__bild img { width: 100%; height: 100%; object-fit: cover; }
.angebot__bild .schild { position: absolute; right: var(--raum-4); bottom: var(--raum-4); }
.angebot__inhalt {
padding: var(--raum-5); display: flex; flex-direction: column;
gap: var(--raum-3); flex: 1;
}
.angebot__inhalt h3 { margin: 0; }
.angebot__inhalt p { color: var(--tinte-sanft); font-size: var(--fs-klein); margin: 0; }
.angebot__inhalt .btn { margin-top: auto; }
.angebot__lauf { font-size: var(--fs-label); color: var(--rinde); font-weight: 600; }
/* --------------------------------------------------------------------------
Angebote mobil zweispaltig — Variante B (15.08.).
Untereinander war der Abschnitt 2.935 px lang: 3,5 Bildschirme fuer zwei
Angebote, und im Personendurchgang der zweitgroesste Brocken der Startseite.
Nebeneinander sieht man beide Preise auf einen Blick — was ein Angebotsblock
eigentlich leisten soll.
Was in halber Spaltenbreite nicht mehr traegt, wird ersetzt statt gestrichen:
Die dreizeilige Beschreibung weicht dem Kurzsatz aus demselben Datensatz
(`kurz`), die lange Knopfbeschriftung ihrer kurzen Fassung. Der Satz „im
Gegensatz zur Bauernhortensie braucht sie keinen sauren Boden" ist genau das
Gaertnerwissen, das die Seite tragen soll — er faellt am Desktop nicht weg
und steht mobil auf der Produktseite. Das Preisschild rueckt naeher an den
Rand und wird eine Spur kleiner, sonst liegt es auf dem halben Foto.
-------------------------------------------------------------------------- */
.nur-schmal { display: none; }
.angebot__kurz { display: none; color: var(--tinte-sanft); font-size: var(--fs-klein); margin: 0; }
@media (max-width: 719.98px) {
.angebote--paar { grid-template-columns: 1fr 1fr; align-items: start; }
/* Der Erklaerblock ist kein Angebot und behaelt die volle Breite. */
.angebote--paar > .erklaerbahn { grid-column: 1 / -1; }
.angebote--paar .angebot__inhalt { padding: var(--raum-4); gap: var(--raum-2); }
.angebote--paar .angebot__inhalt h3 { font-size: 1.05rem; line-height: 1.25; }
.angebote--paar .angebot__text { display: none; }
.angebote--paar .angebot__kurz { display: block; }
.angebote--paar .nur-breit { display: none; }
.angebote--paar .nur-schmal { display: inline; }
.angebote--paar .btn { padding-inline: var(--raum-3); font-size: var(--fs-label); }
.angebote--paar .angebot__bild .schild {
right: var(--raum-2); bottom: var(--raum-2); padding: .3rem .55rem;
}
.angebote--paar .schild__preis { font-size: 1.45rem; }
/* Ungerade Anzahl: Tommy legt die Angebote im Backend an, es sind nicht
immer zwei. Bliebe die letzte Karte allein in ihrer Spalte, stuende
daneben ein Loch. Sie nimmt deshalb die volle Breite — und dann traegt
auch wieder die lange Beschreibung statt des Kurzsatzes.
`nth-of-type` zaehlt alle , und der Erklaerblock ist das letzte.
Die letzte Angebotskarte ist also das vorletzte ; steht sie
zugleich auf einer ungeraden Position, ist die Anzahl ungerade. */
.angebote--paar > .angebot:nth-of-type(odd):nth-last-of-type(2) {
grid-column: 1 / -1;
}
.angebote--paar > .angebot:nth-of-type(odd):nth-last-of-type(2) .angebot__bild {
aspect-ratio: 16/10;
}
.angebote--paar > .angebot:nth-of-type(odd):nth-last-of-type(2) .angebot__text { display: block; }
.angebote--paar > .angebot:nth-of-type(odd):nth-last-of-type(2) .angebot__kurz { display: none; }
.angebote--paar > .angebot:nth-of-type(odd):nth-last-of-type(2) .nur-breit { display: inline; }
.angebote--paar > .angebot:nth-of-type(odd):nth-last-of-type(2) .nur-schmal { display: none; }
}
/* Die dritte Bahn im Angebots-Band erklaert, wie Reservieren laeuft */
.erklaerbahn {
background: var(--gruen-tief); color: var(--mint);
border-radius: var(--radius-blatt-gross);
padding: var(--raum-6) var(--raum-5);
display: flex; flex-direction: column; gap: var(--raum-4); min-width: 0;
}
.erklaerbahn h3 { color: var(--mint); margin: 0; }
.erklaerbahn .hinweis { margin-top: auto; }
.schrittliste { display: grid; gap: var(--raum-4); counter-reset: schritt; }
.schrittliste li {
position: relative; padding-left: 3rem; min-height: 2rem;
font-size: var(--fs-klein); overflow-wrap: anywhere; hyphens: auto;
}
.schrittliste li::before {
counter-increment: schritt; content: counter(schritt);
position: absolute; left: 0; top: 0;
font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; line-height: 1;
color: var(--gruen-tief); background: var(--gelb);
width: 2rem; height: 2rem; border-radius: 50%;
display: grid; place-items: center;
}
/* Variante fuer helle Flaechen: Zahl in Tanne mit Blatt-Radius */
.schritte { counter-reset: schritt; display: grid; gap: var(--raum-4); }
.schritte > li {
counter-increment: schritt; display: grid;
grid-template-columns: auto minmax(0, 1fr); gap: var(--raum-4); align-items: start;
}
.schritte > li::before {
content: counter(schritt);
font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; line-height: 1;
color: var(--weiss); background: var(--gruen-tanne);
width: 2.25rem; height: 2.25rem; border-radius: 50% 50% 50% 0;
display: grid; place-items: center;
}
.schritte h3 { margin: 0 0 var(--raum-1); font-size: 1.05rem; }
.schritte p { margin: 0; font-size: var(--fs-klein); color: var(--tinte-sanft); }
/* ==========================================================================
Sortiment — Kacheln
========================================================================== */
.kacheln {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--spalt); align-items: start;
}
.kacheln > li { min-width: 0; }
.beratungs-kachel > a { min-height:100%;padding:var(--raum-5);display:flex;flex-direction:column;justify-content:flex-end;gap:var(--raum-3);border-radius:var(--radius-blatt);background:var(--gruen-tanne);color:var(--weiss);text-decoration:none;box-shadow:var(--schatten) }
.beratungs-kachel strong { font:600 clamp(1.45rem,3vw,2.2rem)/1.08 var(--font-display) }
.beratungs-kachel .eyebrow { color:var(--gelb) }
.beratungs-kachel .btn { align-self:flex-start;margin-top:var(--raum-2) }
.kategorie-galerie { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--spalt);padding:0;margin:0;list-style:none }
.kategorie-galerie li { min-width:0;overflow:hidden;border-radius:var(--radius-blatt);aspect-ratio:4/3;background:var(--mint) }
.kategorie-galerie img { width:100%;height:100%;display:block;object-fit:cover }
@media(min-width:720px){.kategorie-galerie{grid-template-columns:repeat(3,minmax(0,1fr))}}
.kachel {
position: relative; border-radius: var(--radius-blatt-gross); overflow: hidden;
aspect-ratio: 3/4; text-decoration: none; color: inherit; display: block;
transition: transform var(--dauer-mittel) var(--kurve);
}
.kachel:hover { transform: translateY(-3px); }
.kachel img { width: 100%; height: 100%; object-fit: cover; }
.kachel__fuss {
display: block; position: absolute; left: 0; right: 0; bottom: 0;
padding: var(--raum-6) var(--raum-3) var(--raum-3); background: var(--schleier);
}
.kachel__name {
display: block; font-family: var(--font-display); font-weight: 600;
font-size: 1.05rem; line-height: 1.2; color: var(--weiss);
overflow-wrap: break-word; hyphens: auto;
}
.kachel__preis {
display: block; font-size: var(--fs-label); font-weight: 600;
color: var(--mint); margin-top: .15rem;
}
.kachel__bsp { font-size: var(--fs-label); color: var(--tinte-sanft); line-height: 1.4; }
/* Kategorienkopf ohne überlagerte Fotobeschriftung. */
.kachel--ki { aspect-ratio: auto; background: var(--mint-licht); border: 1.5px solid var(--mint); }
.kachel--ki img { aspect-ratio: 3/4; height: auto; width: 100%; object-fit: cover; }
.kachel--ki .kachel__fuss { position: static; background: none; padding: var(--raum-3); }
.kachel--ki .kachel__name { color: var(--gruen-tanne); }
.kachel--ki .kachel__preis { color: var(--rinde); }
.kachel--typo {
background: var(--mint-licht); display: flex; flex-direction: column-reverse;
justify-content: space-between; gap: var(--raum-4);
padding: var(--raum-4); border: 1.5px solid var(--mint);
}
.kachel--typo .kachel__name { color: var(--gruen-tanne); font-size: 1.15rem; }
.kachel--typo .kachel__preis { color: var(--rinde); }
/* Bildbahn in voller Größe */
.ki-bahn { display: grid; gap: var(--raum-5); grid-template-columns: 1fr; align-items: center; }
.ki-bahn > * { min-width: 0; }
.ki-bahn figure {
border-radius: var(--radius-blatt-gross); overflow: hidden;
background: var(--weiss); box-shadow: var(--schatten-karte);
}
.ki-bahn img { width: 100%; height: auto; }
.ki-bahn figcaption { padding: var(--raum-4); font-size: var(--fs-klein); color: var(--tinte-sanft); }
/* ==========================================================================
Vier-Punkte-Formel
========================================================================== */
.formel { display: grid; gap: var(--spalt); grid-template-columns: 1fr; }
.formel__bahn {
background: var(--mint-licht); border-radius: var(--radius-blatt-gross);
padding: var(--raum-5); display: flex; flex-direction: column;
gap: var(--raum-3); min-width: 0;
}
.formel__bahn:nth-child(2n) { background: var(--sand-licht); }
.formel__nr {
font-family: var(--font-display); font-size: 2.4rem; font-weight: 700;
line-height: 1; color: var(--rinde);
}
.formel__bahn h3 { margin: 0; }
.formel__bahn p { color: var(--tinte-sanft); margin: 0; }
.formel__bild { margin:calc(var(--raum-5) * -1) calc(var(--raum-5) * -1) var(--raum-3);aspect-ratio:4/3;overflow:hidden }
.formel__bild picture,.formel__bild img { width:100%;height:100%;display:block }
.formel__bild img { object-fit:cover }
/* ==========================================================================
Video-Bahn
========================================================================== */
.videobahn { position: relative; background: var(--gruen-tief); }
.videobahn video { display: block; }
.videoknopf {
position: absolute; right: var(--raum-3); top: var(--raum-3); z-index: 2;
font-family: var(--font-body); font-size: var(--fs-label); font-weight: 600;
background: rgba(7, 64, 47, .92); color: var(--weiss);
border: 1.5px solid var(--gruen-jade); border-radius: var(--radius-rund);
padding: .5rem .9rem; min-height: 40px; cursor: pointer;
}
.videoknopf:hover { background: var(--gruen-tief); }
.textbahn {
display: flex; flex-direction: column; justify-content: center;
gap: var(--raum-4); min-width: 0;
}
/* ==========================================================================
Schippie — die Ratgeber-Zone.
Einzige Stelle mit Maskottchen: nie ueber dem Fold, nie im Kopf oder Fuss,
nie an einem Preis, nie begruessend.
========================================================================== */
.rat { background: var(--gruen-tief); color: var(--mint); padding-block: var(--raum-sektion); }
.rat h2, .rat h3 { color: var(--weiss); }
.rat .eyebrow { color: var(--gelb); }
.rat a { color: var(--mint); text-decoration-color: var(--gruen-jade); }
.rat__kopf { display: grid; gap: var(--raum-5); align-items: center; margin-bottom: var(--raum-7); }
.schippie {
width: clamp(150px, 26vw, 220px); aspect-ratio: 1; border-radius: 50%;
background: var(--weiss); border: 4px solid var(--holz); overflow: hidden;
box-shadow: 0 10px 30px rgba(0, 0, 0, .28);
}
.schippie img { width: 100%; height: 100%; object-fit: cover; }
.rat__lead { color: var(--mint); max-width: 54ch; }
.regeln { display: grid; gap: var(--raum-4); margin-bottom: var(--raum-7); }
.regel {
border: 2px solid rgba(216, 240, 228, .22); border-radius: var(--radius-blatt-gross);
padding: var(--raum-5); min-width: 0;
}
.regel__nr {
font-family: var(--font-display); font-weight: 700; font-size: 1.5rem; line-height: 1;
display: block; margin-bottom: var(--raum-3); color: var(--gelb);
}
.regel h3 { font-size: 1.25rem; margin-bottom: var(--raum-2); }
.regel p { font-size: 1rem; color: var(--mint); margin: 0; }
.wahl { border-top: 2px solid rgba(216, 240, 228, .22); padding-top: var(--raum-6); }
.wahl__tabs { display: flex; flex-wrap: wrap; gap: var(--raum-3); margin-bottom: var(--raum-5); }
.wahl__tab {
font-family: var(--font-body); font-size: 1rem; font-weight: 600;
padding: .7rem 1.2rem; cursor: pointer; background: transparent; color: var(--mint);
min-height: 48px; border: 2px solid var(--gruen-jade); border-radius: var(--radius-blatt);
transition: background-color var(--dauer-kurz) var(--kurve), color var(--dauer-kurz) var(--kurve);
}
.wahl__tab:hover { background: rgba(216, 240, 228, .12); }
.wahl__tab[aria-selected="true"] { background: var(--mint); color: var(--gruen-tief); border-color: var(--mint); }
.wahl__panel { display: grid; gap: var(--raum-5); }
.wahl__panel[hidden] { display: none; }
.wahl__liste { display: grid; gap: var(--raum-2); }
.wahl__liste li { padding-left: 1.4rem; position: relative; color: var(--mint); }
.wahl__liste li::before {
content: ""; position: absolute; left: 0; top: .55em; width: .55em; height: .55em;
background: var(--gruen-jade); border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
}
.wahl__liste b { color: var(--weiss); }
.fussnote {
margin-top: var(--raum-7); border-top: 2px solid rgba(216, 240, 228, .22);
padding-top: var(--raum-5); font-size: var(--fs-klein); color: var(--mint); max-width: 70ch;
}
.fussnote b { color: var(--weiss); }
/* ==========================================================================
Ratgeber-Karten
========================================================================== */
.ratgeber { display: block; text-decoration: none; color: inherit; }
.ratgeber__bild {
position: relative; border-radius: var(--radius-blatt-gross); overflow: hidden;
aspect-ratio: 3/4; margin-bottom: var(--raum-4); display: block;
}
.ratgeber__bild img {
width: 100%; height: 100%; object-fit: cover;
transition: transform var(--dauer-mittel) var(--kurve);
}
.ratgeber:hover .ratgeber__bild img { transform: scale(1.03); }
.ratgeber h3 { margin-bottom: var(--raum-2); }
.ratgeber p { color: var(--tinte-sanft); font-size: var(--fs-klein); }
.ratgeber__mehr {
font-weight: 600; color: var(--gruen-tanne); text-decoration: underline;
text-decoration-color: var(--gruen-jade); text-underline-offset: 3px;
}
/* ==========================================================================
Produkte — Karte in Kategorie und „aus demselben Bereich"
========================================================================== */
.produkte { display: grid; gap: var(--spalt); grid-template-columns: 1fr; }
.produkte > li { min-width: 0; }
.produkt {
background: var(--weiss); border-radius: var(--radius-blatt-gross); overflow: hidden;
box-shadow: var(--schatten-karte); display: flex; flex-direction: column; height: 100%;
}
.produkt__bild { position: relative; aspect-ratio: 3/4; background: var(--mint-licht); }
.produkt__bild img {
width: 100%; height: 100%; object-fit: cover;
transition: transform var(--dauer-mittel) var(--kurve);
}
.produkt:hover .produkt__bild img { transform: scale(1.02); }
.produkt__inhalt {
padding: var(--raum-5); display: flex; flex-direction: column; gap: var(--raum-3); flex: 1;
}
.produkt__inhalt h3 { margin: 0; }
.produkt__inhalt h3 a { color: var(--gruen-tanne); text-decoration-color: var(--gruen-jade); }
.produkt__bot { font-style: italic; color: var(--tinte-sanft); font-size: var(--fs-klein); margin: 0; }
.produkt__text { color: var(--tinte-sanft); font-size: var(--fs-klein); margin: 0; }
.produkt__fakten { display: flex; flex-wrap: wrap; gap: var(--raum-2); margin: 0; padding: 0; }
.produkt__fakten li {
font-size: var(--fs-label); background: var(--mint-licht); color: var(--tinte);
border-radius: var(--radius-rund); padding: .2rem .7rem;
}
.produkt__aktion { margin-top: auto; display: flex; flex-direction: column; gap: var(--raum-2); }
/* ==========================================================================
Kategoriekopf und Produktkopf
========================================================================== */
.katkopf, .prodkopf { padding-top: var(--gutter); }
.katkopf .bahnen { align-items: stretch; }
.katkopf__bild { aspect-ratio: 3/4; max-height: 70vh; }
.prodkopf__bild { aspect-ratio: 3/4; max-height: 72vh; }
.prodkopf__bild.produktgalerie { aspect-ratio:auto;max-height:none;display:flex;flex-direction:column;gap:.65rem;background:transparent;overflow:visible }
.produktgalerie__buehne { position:relative;min-height:0;aspect-ratio:3/4;overflow:hidden;border-radius:inherit;background-color:#e8f1eb;isolation:isolate }
/* Unscharfe Fassung des Titelbilds hinter ungeschnittenen Fotos (Review 30.09.2026). */
.produktgalerie__buehne::before { content:"";position:absolute;inset:-24px;z-index:-1;background:var(--galerie-hintergrund, none) center/cover no-repeat;filter:blur(22px) saturate(1.05);opacity:.55 }
.produktgalerie__medium { width:100%;height:100%;margin:0 }
.produktgalerie__medium[hidden] { display:none }
.produktgalerie__medium img,.produktgalerie__medium video { width:100%;height:100%;display:block;object-fit:contain;background:transparent }
.produktgalerie__auswahl { display:grid;grid-auto-flow:column;grid-auto-columns:72px;gap:.55rem;overflow-x:auto;padding:.2rem .1rem .45rem;scroll-snap-type:x proximity }
.produktgalerie__auswahl button { width:72px;height:72px;padding:0;overflow:hidden;display:grid;place-items:center;border:2px solid transparent;border-radius:10px;background:var(--mint);color:var(--gruen-tief);cursor:pointer;scroll-snap-align:start }
.produktgalerie__auswahl button[aria-pressed=true] { border-color:var(--gruen-tief);box-shadow:0 0 0 2px var(--weiss),0 0 0 4px var(--gruen-tief) }
.produktgalerie__auswahl img { width:100%;height:100%;object-fit:cover }
.produktgalerie__videozeichen { font-size:1.45rem;transform:translateX(2px) }
.katkopf__text, .prodkopf__info {
background: var(--gruen-tief); color: var(--weiss);
border-radius: var(--radius-blatt-gross); padding: clamp(1.5rem, 6vw, 2.5rem);
display: flex; flex-direction: column; justify-content: center; gap: var(--raum-4);
}
.katkopf__text h1, .prodkopf__info h1 { color: var(--weiss); margin: 0; }
.katkopf__text p, .prodkopf__info p { color: var(--mint); margin: 0; max-width: 44ch; }
.prodkopf__bot { font-style: italic; }
.prodkopf__preis { display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-5); }
/* ==========================================================================
Datenblatt
========================================================================== */
.datenblatt {
display: grid; grid-template-columns: 1fr; gap: 0; margin: 0;
border: 1.5px solid var(--mint); border-radius: var(--radius-blatt-gross);
overflow: hidden; background: var(--weiss);
}
.datenblatt > div {
display: grid; grid-template-columns: minmax(0, 11rem) minmax(0, 1fr);
gap: var(--raum-4); padding: var(--raum-3) var(--raum-4); border-bottom: 1px solid var(--mint);
}
.datenblatt > div:last-child { border-bottom: 0; }
.datenblatt dt { font-weight: 600; color: var(--gruen-tanne); font-size: var(--fs-klein); }
.datenblatt dd { margin: 0; font-size: var(--fs-klein); color: var(--tinte); overflow-wrap: break-word; }
.kann { display: grid; gap: var(--raum-3); }
.kann li {
background: var(--mint-licht); border-radius: var(--radius-blatt);
padding: var(--raum-3) var(--raum-4); font-size: var(--fs-klein);
}
.pflege {
background: var(--sand-licht); border-radius: var(--radius-blatt-gross);
padding: var(--raum-5); margin-top: var(--raum-5);
}
.pflege h3 { margin-top: 0; }
.fragen { display: grid; gap: var(--raum-4); }
.fragen > div {
background: var(--weiss); border: 1.5px solid var(--mint);
border-radius: var(--radius-blatt); padding: var(--raum-4);
}
.fragen h3 { margin: 0 0 var(--raum-2); font-size: var(--fs-h3); }
.fragen p { margin: 0; color: var(--tinte-sanft); font-size: var(--fs-klein); }
/* ==========================================================================
Formulare und Reservierung
========================================================================== */
.reservierung { display: grid; gap: var(--raum-6); grid-template-columns: 1fr; }
.reservierung > * { min-width: 0; }
.formkarte {
background: var(--weiss); border: 1.5px solid var(--mint);
border-radius: var(--radius-blatt-gross); padding: clamp(1.25rem, 4vw, 2rem);
box-shadow: var(--schatten-karte);
}
.formkarte h3 { margin-top: 0; }
legend {
font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
color: var(--gruen-tanne); padding: 0; margin-bottom: var(--raum-3);
}
.feld { display: flex; flex-direction: column; gap: var(--raum-2); margin-bottom: var(--raum-4); }
.feld label { font-size: var(--fs-label); font-weight: 600; letter-spacing: .02em; }
.feld input, .feld select, .feld textarea {
font-family: var(--font-body); font-size: 1rem; padding: .75rem .9rem; min-height: 48px;
border: 1.5px solid var(--karamell); border-radius: var(--radius-blatt);
background: var(--weiss); color: var(--tinte); width: 100%;
}
.feld textarea { min-height: 96px; resize: vertical; }
.feld--zeile { flex-direction: row; align-items: flex-start; gap: var(--raum-3); }
.feld--zeile input { width: auto; min-height: 0; margin-top: .35rem; }
.feld--zeile label { font-weight: 400; font-size: var(--fs-klein); }
.feld__hilfe { font-size: var(--fs-label); color: var(--tinte-sanft); }
.auf-dunkel .feld input, .auf-dunkel .feld select { border-color: var(--gruen-jade); }
.feldpaar { display: grid; gap: 0 var(--raum-4); grid-template-columns: 1fr; }
.pflichtnote { font-size: var(--fs-label); color: var(--tinte-sanft); margin-bottom: var(--raum-4); }
.fehler {
font-size: var(--fs-klein); font-weight: 600; color: var(--rinde);
min-height: 1.4em; margin: 0 0 var(--raum-3);
}
.hinweis { font-size: var(--fs-klein); color: var(--tinte-sanft); }
.auf-dunkel .hinweis, .sektion--dunkel .hinweis { color: var(--mint); }
.antwort { font-size: var(--fs-klein); font-weight: 600; color: var(--gruen-tanne); min-height: 1.4em; }
.auf-dunkel .antwort { color: var(--gelb); }
.merkkasten {
border-left: 4px solid var(--gruen-jade); background: var(--mint-licht);
border-radius: 0 var(--radius-blatt) var(--radius-blatt) 0;
padding: var(--raum-4); margin-bottom: var(--raum-5); font-size: var(--fs-klein);
}
.merkkasten strong { color: var(--gruen-tanne); }
.merkkasten--warm { border-left-color: var(--rinde); background: var(--sand-licht); }
.merkkasten--warm strong { color: var(--rinde); }
.bestaetigung {
background: var(--weiss); border: 2px solid var(--gruen-tanne);
border-radius: var(--radius-blatt-gross); padding: clamp(1.25rem, 4vw, 2rem);
margin-top: var(--raum-5);
}
.bestaetigung h3 { margin-top: 0; }
.bestaetigung__vorspann {
font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label);
text-transform: uppercase; color: var(--rinde);
}
.code {
display: inline-block; font-family: var(--font-display); font-weight: 700;
font-size: clamp(1.6rem, 5vw, 2.1rem); letter-spacing: .06em; color: var(--gruen-tief);
background: var(--mint); border-radius: var(--radius-blatt);
padding: .4rem 1rem; margin: var(--raum-2) 0 var(--raum-4);
}
.checkliste { display: grid; gap: var(--raum-3); margin-top: var(--raum-4); }
.checkliste li { position: relative; padding-left: 1.6rem; font-size: var(--fs-klein); }
.checkliste li::before {
content: ""; position: absolute; left: .15rem; top: .6em; width: .7em; height: .7em;
border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--gruen-jade);
}
.punkte { display: grid; gap: var(--raum-3); }
.punkte li { position: relative; padding-left: 1.6rem; }
.punkte li::before {
content: ""; position: absolute; left: .15rem; top: .62em; width: .65em; height: .65em;
border-radius: 50% 50% 50% 0; transform: rotate(-45deg); background: var(--gruen-jade);
}
.punkte--warm li::before { background: var(--karamell); }
.zeiten, .ablauf {
display: grid; grid-template-columns: auto minmax(0, 1fr);
gap: .35rem var(--raum-4); margin: var(--raum-4) 0 0;
}
.zeiten dt, .ablauf dt { font-weight: 600; }
.zeiten dd, .ablauf dd { margin: 0; }
.zeiten > div { display: contents; }
/* ==========================================================================
Termine
========================================================================== */
.termine { display: grid; gap: var(--spalt); grid-template-columns: 1fr; }
.termine > li { min-width: 0; }
.veranstaltung {
background: var(--weiss); border: 1.5px solid var(--mint);
border-radius: var(--radius-blatt-gross); overflow: hidden; height: 100%;
display: flex; flex-direction: column;
}
.veranstaltung--flagship { border-color: var(--karamell); border-width: 2px; }
.veranstaltung__bild { position: relative; aspect-ratio: 3/4; background: var(--mint-licht); }
.veranstaltung__bild img { width: 100%; height: 100%; object-fit: cover; }
.veranstaltung__bild .schild { position: absolute; right: var(--raum-4); bottom: var(--raum-4); }
.veranstaltung__bild--typo {
display: flex; flex-direction: column; justify-content: flex-end; gap: var(--raum-3);
padding: var(--raum-5); background: var(--sand-licht); border-bottom: 1.5px solid var(--sand);
}
.typo__wort {
font-family: var(--font-display); font-weight: 700;
font-size: clamp(1.6rem, 5vw, 2.1rem); line-height: 1.1; color: var(--gruen-tanne);
}
.typo__notiz { font-size: var(--fs-klein); color: var(--rinde); }
.veranstaltung__inhalt {
padding: var(--raum-5); display: flex; flex-direction: column; gap: var(--raum-3); flex: 1;
}
.veranstaltung__inhalt h3 { margin: 0; }
.veranstaltung__inhalt p { margin: 0; color: var(--tinte-sanft); font-size: var(--fs-klein); }
.veranstaltung__datum, .termin__datum, .vorbei__datum {
font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label);
text-transform: uppercase; color: var(--rinde);
}
.veranstaltung__frist { font-size: var(--fs-label); font-weight: 600; color: var(--gruen-tanne); }
.veranstaltung__aktion { margin-top: auto; padding-top: var(--raum-2); }
/* Die drei Bausteine als sichtbarer Zustand — nicht als Schalter */
.bausteine { display: flex; flex-wrap: wrap; gap: var(--raum-2); }
.baustein {
display: inline-flex; align-items: center; gap: .45rem;
font-size: var(--fs-label); font-weight: 600; line-height: 1.35;
border-radius: var(--radius-rund); padding: .32rem .75rem;
border: 1.5px solid var(--mint); background: var(--mint-licht); color: var(--gruen-tief);
}
.baustein--aus { background: var(--weiss); border-color: var(--mint); color: var(--tinte-sanft); font-weight: 500; }
.baustein--beitrag { background: var(--sand-licht); border-color: var(--karamell); color: var(--rinde); }
.baustein--platz::before { content: ""; width: .7em; height: .7em; border-radius: 50%; flex: none; }
.platz--viele::before { background: var(--ampel-vorraetig); }
.platz--wenige::before { background: var(--ampel-wenige); }
.platz--voll::before { background: var(--ampel-vergriffen); }
.platz--voll { color: var(--tinte-sanft); }
/* Kurzkarte fuer den Termin-Teaser auf der Startseite */
.termin {
background: var(--weiss); border: 1.5px solid var(--mint);
border-radius: var(--radius-blatt-gross); padding: var(--raum-5);
display: flex; flex-direction: column; gap: var(--raum-3); min-width: 0; height: 100%;
}
.termin h3 { margin: 0; }
.termin p { margin: 0; color: var(--tinte-sanft); font-size: var(--fs-klein); }
.termin .btn { margin-top: auto; align-self: flex-start; }
.archiv {
border: 1.5px solid var(--mint); border-radius: var(--radius-blatt-gross);
background: var(--weiss); padding: var(--raum-4) var(--raum-5);
}
.archiv summary {
font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h3);
color: var(--gruen-tanne); cursor: pointer; padding: var(--raum-2) 0;
}
.archiv summary::marker { color: var(--gruen-jade); }
.archiv__liste { display: grid; gap: var(--raum-4); margin-top: var(--raum-4); grid-template-columns: 1fr; }
.vorbei {
display: grid; gap: var(--raum-1) var(--raum-4); grid-template-columns: 72px minmax(0, 1fr);
align-items: start; padding-top: var(--raum-4); border-top: 1px solid var(--mint);
}
.vorbei:first-child { border-top: 0; padding-top: 0; }
.vorbei img {
width: 72px; height: 96px; object-fit: cover;
border-radius: var(--radius-blatt); grid-row: span 3;
}
.vorbei h3 { font-size: 1.05rem; margin: 0; }
.vorbei p { margin: 0; font-size: var(--fs-klein); color: var(--tinte-sanft); }
/* Termin-Detail: Fakten, Anmeldung, Beitrags-Vorschau */
.fakten { display: grid; gap: var(--raum-4); margin: 0; }
.fakten dt {
font-size: var(--fs-label); font-weight: 600; letter-spacing: var(--ls-label);
text-transform: uppercase; color: var(--gelb);
}
.fakten dd { margin: 0; color: var(--mint); }
.anmeldekarte {
background: var(--weiss); border: 1.5px solid var(--mint);
border-radius: var(--radius-blatt-gross); padding: clamp(1.25rem, 4vw, 2rem);
box-shadow: var(--schatten-karte);
}
.platzstand { font-weight: 600; color: var(--gruen-tanne); margin-bottom: var(--raum-2); }
.balken {
height: 10px; border-radius: var(--radius-rund); background: var(--mint);
overflow: hidden; margin-bottom: var(--raum-5);
}
.balken > span { display: block; height: 100%; background: var(--gruen-jade); }
.platznummer { font-weight: 600; }
.vorschau {
border: 2px dashed var(--karamell); border-radius: var(--radius-blatt-gross);
padding: clamp(1.25rem, 4vw, 2rem); background: var(--weiss);
}
.vorschau__marke {
display: inline-block; font-size: var(--fs-label); font-weight: 600;
letter-spacing: var(--ls-label); text-transform: uppercase;
background: var(--rinde); color: var(--weiss);
border-radius: var(--radius-blatt); padding: .3rem .75rem; margin-bottom: var(--raum-3);
}
.vorschau .schritte { display: flex; flex-wrap: wrap; gap: var(--raum-3); margin-bottom: var(--raum-5); }
.vorschau .schritt {
display: inline-flex; align-items: center; gap: var(--raum-2);
font-size: var(--fs-klein); font-weight: 600; color: var(--tinte-sanft);
}
.vorschau .schritt__nr {
width: 1.6rem; height: 1.6rem; border-radius: 50% 50% 50% 0;
background: var(--mint); color: var(--gruen-tief);
display: grid; place-items: center; font-family: var(--font-display); font-weight: 700;
}
.vorschau .schritt--offen .schritt__nr { background: var(--sand); }
.zahlzeile {
display: flex; justify-content: space-between; gap: var(--raum-4);
border-top: 1px solid var(--mint); padding-top: var(--raum-3); font-weight: 600;
}
.summe { font-family: var(--font-hand); font-size: var(--fs-preis); color: var(--gruen-tief); }
/* ==========================================================================
Zitat, Zahlen, Instagram
========================================================================== */
.zitat {
border-left: 4px solid var(--gruen-jade);
padding: var(--raum-2) 0 var(--raum-2) var(--raum-5); margin: 0;
font-family: var(--font-display); font-size: clamp(1.15rem, 3vw, 1.4rem);
line-height: 1.45; color: var(--mint);
}
.zitat footer { font-family: var(--font-body); font-size: var(--fs-klein); color: var(--weiss); margin-top: var(--raum-3); }
.zahlen {
display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
gap: var(--raum-4); margin-top: var(--raum-5);
}
.zahlen dt {
font-family: var(--font-display); font-size: 1.6rem; font-weight: 700;
color: var(--gelb); line-height: 1.1;
}
.zahlen dd { margin: 0; font-size: var(--fs-klein); color: var(--mint); overflow-wrap: break-word; hyphens: auto; }
.insta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--spalt); }
.insta .bahn { aspect-ratio: 9/16; }
/* ==========================================================================
Footer
========================================================================== */
.footer {
background: var(--gruen-tief); color: var(--mint);
padding-block: var(--raum-7) var(--raum-6); font-size: var(--fs-klein);
}
.footer a { color: var(--weiss); }
.footer strong { color: var(--weiss); }
.footer h2, .footer h3 { color: var(--mint); font-size: var(--fs-h3); }
.footer__raster { display: grid; gap: var(--raum-6); grid-template-columns: 1fr; }
.footer__raster > * { min-width: 0; }
.footer__zeiten { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .35rem var(--raum-4); }
.footer__zeiten dt { color: var(--weiss); }
.footer__zeiten dd { margin: 0; }
.footer__zeiten > div { display: contents; }
.footer__zeiten .heute dt, .footer__zeiten .heute dd { color: var(--gelb); font-weight: 600; }
.pin {
width: 52px; height: 52px; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
border: 3px solid var(--mint); display: grid; place-items: center; margin-bottom: var(--raum-4);
}
.pin span { transform: rotate(45deg); width: 12px; height: 12px; border-radius: 50%; background: var(--gelb); }
.footer__schluss {
border-top: 1px solid rgba(216, 240, 228, .25); margin-top: var(--raum-6);
padding-top: var(--raum-4); display: flex; flex-wrap: wrap;
gap: var(--raum-4); justify-content: space-between;
}
/* ==========================================================================
Feste Leiste unten am Telefon.
In der Kundenbewertung der staerkste Einzelvorteil.
========================================================================== */
.daumen {
position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
display: flex; gap: 1px; background: var(--gruen-jade);
box-shadow: 0 -4px 16px rgba(7, 64, 47, .18);
}
.daumen a {
flex: 1; display: flex; align-items: center; justify-content: center; gap: .5rem;
min-height: 56px; padding: .4rem .5rem; text-align: center; line-height: 1.25;
background: var(--gruen-tief); color: var(--weiss); text-decoration: none;
font-weight: 600; font-size: var(--fs-klein);
}
.daumen a:first-child { background: var(--gruen-tanne); }
/* --------------------------------------------------------------------------
Mobiles Menü in der Daumenleiste.
Bis zum 15.08. gab es mobil gar keine Navigation — `.nav` erscheint erst ab
720 px. Wer zum Sortiment oder zu den Terminen wollte, musste die ganze
Startseite durchwischen. Deshalb sitzt das Menü hier unten, im Daumenbereich,
und heisst „Menü" statt eines Symbols: verstaendlich auch fuer Leute, die
mit dem Hamburger-Zeichen nichts anfangen.
Gebaut als , damit es ohne JavaScript oeffnet und schliesst.
/skripte/menue.js ergaenzt nur Escape und Tippen daneben.
-------------------------------------------------------------------------- */
.menue { flex: 1; min-width: 0; }
.menue__knopf {
display: flex; align-items: center; justify-content: center; gap: .45rem;
min-height: 56px; padding: .4rem .5rem;
background: var(--gruen-tief); color: var(--weiss);
font-weight: 600; font-size: var(--fs-klein); line-height: 1.25;
cursor: pointer; list-style: none; text-align: center;
}
.menue__knopf::-webkit-details-marker { display: none; }
/* Eigener Pfeil statt des Standarddreiecks — er dreht sich beim Oeffnen. */
.menue__knopf::after {
content: ""; width: .5rem; height: .5rem; flex: none;
border-right: 2px solid var(--gruen-jade); border-bottom: 2px solid var(--gruen-jade);
transform: rotate(-135deg) translate(-2px, -2px);
}
.menue[open] .menue__knopf::after { transform: rotate(45deg) translate(-1px, -1px); }
.menue__knopf:focus-visible { outline: 3px solid var(--gelb); outline-offset: -3px; }
.menue__blatt {
position: absolute; left: 0; right: 0; bottom: 100%;
background: var(--gruen-tief);
border-top: 3px solid var(--gruen-jade);
box-shadow: 0 -10px 28px rgba(7, 64, 47, .3);
max-height: 70vh; overflow-y: auto; overscroll-behavior: contain;
}
.menue__blatt ul { list-style: none; margin: 0; padding: 0; }
.menue__blatt li + li { border-top: 1px solid rgba(216, 240, 228, .18); }
.menue__blatt a {
/* justify-content und text-align ausdruecklich zuruecksetzen: `.daumen a`
zentriert (fuer die zwei breiten Schaltflaechen richtig), eine Liste liest
sich linksbuendig aber deutlich schneller. */
display: flex; align-items: center; justify-content: flex-start; text-align: left;
min-height: 56px; padding: .5rem var(--gutter);
color: var(--weiss); text-decoration: none;
font-weight: 600; font-size: var(--fs-body);
}
.menue__blatt a[aria-current="page"] { color: var(--mint); }
.menue__blatt a:focus-visible { outline: 3px solid var(--gelb); outline-offset: -3px; }
/* ==========================================================================
Ab 720 px — die Uebersetzung beginnt: Bahnen stehen nebeneinander
========================================================================== */
@media (min-width: 720px) {
.bahnen--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.bahnen--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.formel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kacheln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.produkte { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.termine { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.regeln { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wahl__panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rat__kopf { grid-template-columns: 220px minmax(0, 1fr); gap: var(--raum-7); }
.footer__raster { grid-template-columns: 1.2fr 1fr 1fr; }
.insta { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.fragen { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.kann { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.feldpaar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.archiv__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ki-bahn { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); }
.zwei-spalten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fakten { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ==========================================================================
Ab 1024 px — Desktop: die Wand. Alles bleibt hochkant, auch der Text.
========================================================================== */
@media (min-width: 1024px) {
:root { --fs-body: 1.125rem; --fs-klein: 1rem; --fs-label: .9375rem; }
body { padding-bottom: 0; }
.daumen { display: none; }
.nav { display: flex; }
.kopfleiste img { height: 120px; }
/* Hero-Triptychon: Blume | Wort | Baum */
.hero { padding-top: var(--raum-5); }
/* Das Diptychon gilt nur unterhalb 720 px (eigene max-width-Abfrage weiter
oben) — hier ist nichts zurueckzunehmen. Nur die Paarzeile verschwindet:
ab hier erzaehlt die Anordnung selbst, was sie sagt. */
.hero__paar { display: none; }
.hero--drei .bahnen {
grid-template-columns: 1fr 1.18fr 1fr; align-items: stretch;
height: clamp(560px, 78vh, 780px);
}
.hero--zwei .bahnen {
grid-template-columns: 1fr 1.05fr; align-items: stretch;
height: clamp(520px, 72vh, 700px);
}
.hero__foto { aspect-ratio: auto; height: 100%; max-height: none; }
.hero__text { height: 100%; }
.katkopf .bahnen {
grid-template-columns: 1fr 1.18fr 1fr; align-items: stretch;
height: clamp(540px, 72vh, 720px);
}
.katkopf__bild { aspect-ratio: auto; height: 100%; max-height: none; }
.katkopf__text { height: 100%; }
.prodkopf .bahnen {
grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: stretch;
height: clamp(560px, 74vh, 760px);
}
.prodkopf__bild { aspect-ratio: auto; height: 100%; max-height: none; }
.prodkopf__bild.produktgalerie { height:100% }
.produktgalerie__buehne { flex:1;aspect-ratio:auto }
.formel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.formel__bahn { justify-content: flex-start; padding: var(--raum-6); }
.formel__bild { margin:calc(var(--raum-6) * -1) calc(var(--raum-6) * -1) var(--raum-3) }
.formel__bahn h3 { margin-top: auto; } /* Zahl oben, Text an der Unterkante */
/* Vier Spalten, nicht mehr: die KI-Uebergangsbilder tragen ihr Badge im Bild —
bei schmaleren Kacheln waere es nicht mehr zu lesen. */
.kacheln { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* 17 Foto-Kacheln + eine Typo-Kachel: die letzte fuellt die angebrochene Reihe */
.kacheln--voll > li:last-child { grid-column: span 3; }
.kacheln--voll > li:last-child .kachel { aspect-ratio: auto; height: 100%; }
.kacheln--voll > li:last-child .kachel--typo {
flex-direction: row; align-items: center; justify-content: flex-start;
gap: clamp(2rem, 5vw, 4rem); padding: var(--raum-6) var(--raum-7);
}
.kacheln--voll > li:last-child .kachel__name { font-size: clamp(1.3rem, 2.4vw, 1.9rem); }
.kacheln--voll > li:last-child .kachel__bsp { max-width: 44ch; }
.produkte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.termine { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.regeln { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.breit-3 {
grid-template-columns: 1fr 1.15fr 1fr; align-items: stretch;
min-height: clamp(560px, 70vh, 720px);
}
.breit-3 .bahn--hoch { aspect-ratio: auto; height: 100%; }
.textbahn .kopf { margin-bottom: 0; }
/* Sektionskopf ueber die volle Bahnbreite: Titel links, Einordnung rechts */
.container > .kopf {
display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
column-gap: clamp(2rem, 5vw, 4rem); margin-bottom: var(--raum-7);
}
.container > .kopf::before { grid-column: 1; grid-row: 1; margin-bottom: var(--raum-3); }
.container > .kopf .eyebrow { grid-column: 1; grid-row: 2; }
.container > .kopf h1, .container > .kopf h2 { grid-column: 1; grid-row: 3; margin-bottom: 0; }
.container > .kopf p { grid-column: 2; grid-row: 3; align-self: end; max-width: 46ch; }
.zwei-spalten { grid-template-columns: .85fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items: center; }
.zwei-spalten--gleich { grid-template-columns: 1fr 1fr; gap: var(--raum-4); align-items: start; }
.zwei-spalten--oben { align-items: start; }
.zwei-spalten--breit { grid-template-columns: 1.05fr .95fr; align-items: start; }
.reservierung {
grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
.ki-bahn { grid-template-columns: minmax(0, .55fr) minmax(0, 1.45fr); gap: clamp(2rem, 5vw, 4rem); }
.lese { max-width: 66ch; }
}
@media (min-width: 1440px) {
:root { --fs-body: 1.1875rem; }
}
/* Sehr schmale Geraete: die Kopfleiste darf nicht ueberlaufen */
@media (max-width: 420px) {
.kopfleiste .container { gap: var(--raum-3); }
.kopfleiste img { height: 68px; }
.datenblatt > div { grid-template-columns: 1fr; gap: var(--raum-1); }
}
/* ==========================================================================
Bewegung aus. Inhalte starten immer sichtbar — kein Scroll-Reveal.
========================================================================== */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
html { scroll-behavior: auto; }
.kachel:hover, .btn:hover { transform: none; }
.ratgeber:hover .ratgeber__bild img,
.produkt:hover .produkt__bild img { transform: none; }
}
/* ==========================================================================
Gutscheinkauf — Auswahl als Chips. Echte Radiobuttons darunter, damit
Tastatur, Screenreader und Formularprüfung ohne Zusatzcode funktionieren.
========================================================================== */
.abstand-unten { margin-bottom: var(--raum-4); }
.auswahl { border: 0; padding: 0; margin: 0 0 var(--raum-5); min-width: 0; }
.auswahl legend { font-size: var(--fs-label); font-weight: 600; letter-spacing: .02em; margin-bottom: var(--raum-2); }
.auswahl__reihe { display: flex; flex-wrap: wrap; gap: var(--raum-2); }
.auswahl__chip { position: relative; }
.auswahl__chip input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.auswahl__chip span {
display: inline-flex; align-items: center; min-height: 48px; padding: .55rem 1.1rem;
border: 2px solid var(--gruen-tanne); border-radius: var(--radius-klein, 12px 12px 12px 4px);
background: var(--weiss); color: var(--gruen-tanne); font-weight: 600; cursor: pointer;
}
.auswahl__chip input:checked + span { background: var(--gruen-tanne); color: var(--weiss); }
.auswahl__chip input:focus-visible + span { outline: 3px solid var(--tinte); outline-offset: 3px; }
.auswahl__chip:hover span { background: var(--mint-licht); }
.auswahl__chip:hover input:checked + span { background: var(--gruen-tief); }
.gutschein-summe { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; color: var(--gruen-tanne); margin: var(--raum-2) 0 var(--raum-4); }
.feld .feld__hilfe { font-weight: 400; }
/* Leerzustand des Termin-Teasers — sichtbar, bis die API echte Termine liefert. */
.termin-leer { max-width: 60ch; padding: var(--raum-5); border: 2px dashed var(--karamell); border-radius: 18px 18px 18px 5px; color: var(--tinte-sanft); }
.termin-leer[hidden] { display: none; }
/* ==========================================================================
Kategorieseite: „Bei uns vor Ort" — vor den Produkten (Erik, 29.09.2026)
Bildstrecke im Bahn-Prinzip: Hochformat | breite Querbahn | Hochformat.
Die Querbahn nimmt die 16:9-Aufnahmen von Tischen, Hallen und Regalen auf,
ohne sie in eine stehende Bahn zu pressen. Mobil steht sie oben, die beiden
Hochformate teilen sich darunter eine Reihe.
========================================================================== */
.vorort__strecke {
display: grid; gap: var(--spalt);
grid-template-columns: 1fr 1fr;
grid-template-areas: "quer quer" "a b";
margin-top: var(--raum-6);
}
.vorort__bild { margin: 0; }
.vorort__bild--hoch { aspect-ratio: 3/4; }
.vorort__bild--quer { aspect-ratio: 3/2; grid-area: quer; }
.vorort__strecke > .vorort__bild--hoch:first-child { grid-area: a; }
.vorort__strecke > .vorort__bild--hoch:last-child { grid-area: b; }
.vorort__bild .bildetikett { font-size: .875rem; }
@media (max-width: 719px) {
/* Auf schmalen Hochformaten würde die Karte das halbe Bild verdecken. */
.vorort__bild--hoch .bildetikett {
left: var(--raum-2); right: var(--raum-2); bottom: var(--raum-2);
padding: var(--raum-2) var(--raum-3); font-size: .8125rem; line-height: 1.35;
}
.vorort__bild--hoch .bildetikett::before { display: none; }
}
@media (min-width: 900px) {
.vorort__strecke { grid-template-columns: 1fr 2fr 1fr; grid-template-areas: "a quer b"; }
.vorort__bild--quer { aspect-ratio: auto; }
}
.vorort__hinweis { margin: var(--raum-3) 0 0; font-size: var(--fs-klein); color: var(--tinte-sanft); }
.vorort__punkte {
display: grid; gap: var(--raum-5); grid-template-columns: 1fr;
margin-top: var(--raum-7);
}
@media (min-width: 900px) { .vorort__punkte { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raum-6); } }
.vorort__punkt { border-top: 3px solid var(--gruen-tanne); padding-top: var(--raum-4); }
.vorort__punkt h3 { margin: var(--raum-2) 0 var(--raum-3); font-size: var(--fs-h3); color: var(--gruen-tanne); }
.vorort__punkt p { margin: 0 0 var(--raum-3); max-width: 46ch; }
.vorort__nr { font-family: var(--font-display); font-weight: 600; font-size: .9375rem; letter-spacing: var(--ls-label); color: var(--rinde); }
.vorort__beispiele { display: flex; flex-wrap: wrap; gap: var(--raum-2); list-style: none; padding: 0; margin: var(--raum-3) 0 0; }
.vorort__beispiele li {
background: var(--mint-licht); border: 1px solid var(--mint); color: var(--tinte);
border-radius: 999px; padding: .3rem .8rem; font-size: var(--fs-label);
}
.vorort__kontakt { font-weight: 600; }
.vorort__kontakt a { color: var(--gruen-tanne); }
/* Einstiegspreis am Anfang des Produktabschnitts (Erik, 29.09.2026) */
.preis-bereich { width: fit-content; margin: 0 0 var(--raum-6); }
/* ==========================================================================
Kategorieseite: Ausbau nach der Sichtprüfung (29.09.2026)
========================================================================== */
/* Lange Bereichsnamen brachen im schmalen Kopffeld mitten im Wort um
(„Kletterpflanze/n"). Kleinere Stufe und deutsche Silbentrennung. */
.katkopf__text h1 {
font-size: clamp(2.1rem, 3.3vw, 3.3rem);
hyphens: auto; -webkit-hyphens: auto; overflow-wrap: normal; word-break: normal;
}
.jahreslauf {
list-style: none; padding: 0; margin: var(--raum-6) 0 0;
display: grid; gap: var(--raum-4); grid-template-columns: 1fr;
}
@media (min-width: 720px) { .jahreslauf { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .jahreslauf { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.jahreslauf__station {
position: relative; background: var(--weiss); border: 1.5px solid var(--mint);
border-radius: var(--radius-blatt); padding: var(--raum-5) var(--raum-4) var(--raum-4);
}
.jahreslauf__station p { margin: var(--raum-2) 0 0; color: var(--tinte-sanft); font-size: var(--fs-klein); }
.jahreslauf__zeit { font-family: var(--font-display); font-weight: 600; font-size: 1.1rem; color: var(--gruen-tanne); }
.jahreslauf__station--jetzt { border-color: var(--gruen-tanne); box-shadow: 0 0 0 2px var(--gruen-tanne) inset; }
.jahreslauf__jetzt {
position: absolute; top: calc(var(--raum-3) * -1); left: var(--raum-4);
background: var(--gruen-tanne); color: var(--weiss); border-radius: 999px;
padding: .15rem .7rem; font-size: var(--fs-label); font-weight: 600; letter-spacing: .02em;
}
.kaufschritte { list-style: none; padding: 0; margin: var(--raum-5) 0 0; display: grid; gap: var(--raum-4); }
.kaufschritte li { display: grid; grid-template-columns: 2.5rem 1fr; gap: var(--raum-3); align-items: baseline; }
.kaufschritte p { margin: 0; }
.kaufschritte__nr { font-family: var(--font-display); font-weight: 600; color: var(--rinde); letter-spacing: var(--ls-label); }
.fragen__titel { margin: 0 0 var(--raum-4); }
@media (min-width: 900px) { .fragen--drei { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.passt { list-style: none; padding: 0; margin: var(--raum-5) 0 0; display: grid; gap: var(--raum-4); grid-template-columns: 1fr; }
@media (min-width: 720px) { .passt { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.passt__karte {
display: flex; flex-direction: column; gap: var(--raum-2); height: 100%;
border: 1.5px solid var(--mint); border-radius: var(--radius-blatt); padding: var(--raum-4) var(--raum-5);
text-decoration: none; color: var(--tinte); background: var(--weiss);
}
.passt__karte:hover { border-color: var(--gruen-tanne); }
.passt__name { font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--gruen-tanne); }
.passt__name::after { content: " →"; }
.passt__grund { color: var(--tinte-sanft); font-size: var(--fs-klein); }
/* Karte am Ende der Produktliste: füllt die leere Fläche neben einem einzelnen
Produkt mit dem, was stimmt: Vor Ort gibt es mehr. */
.produkt-mehr__karte {
height: 100%; display: flex; flex-direction: column; justify-content: center; gap: var(--raum-3);
background: var(--gruen-tief); color: var(--weiss);
border-radius: var(--radius-blatt-gross); padding: var(--raum-6) var(--raum-5);
}
.produkt-mehr__karte h3 { color: var(--weiss); margin: 0; }
.produkt-mehr__karte p { margin: 0; color: var(--mint); }
.produkt-mehr__wege { display: flex; flex-wrap: wrap; gap: var(--raum-3) var(--raum-5); font-weight: 600; }
.produkt-mehr__wege a { color: var(--weiss); }
.produkt__bild, .angebot__bild, .produktgalerie__buehne { position: relative; }
/* Für Profis & GaLaBau (Erik, 29.09.2026) */
.galabau-fuer { grid-template-columns: 1fr; }
@media (min-width: 720px) { .galabau-fuer { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Honigtopf: für Menschen unsichtbar, für Screenreader ausgeblendet (aria-hidden) */
.galabau-honig { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.galabau-einstieg {
display: grid; gap: var(--raum-3); align-items: center;
padding: var(--raum-5); border-radius: var(--radius-blatt-gross);
background: var(--sand-licht); border-left: 6px solid var(--gruen-tanne);
}
.galabau-einstieg h2, .galabau-einstieg h3 { margin: 0; }
.galabau-einstieg p { margin: 0; color: var(--tinte-sanft); }
@media (min-width: 720px) { .galabau-einstieg { grid-template-columns: minmax(0, 1fr) auto; } }
.galabau-sektion { padding-top: 0; }
/* ==========================================================================
Begehung Tommy/Erik, 30.09.2026
========================================================================== */
/* Logo: +50 %, die Kopfleiste wächst mit. Dazwischen (720–1023 px) 76 px. */
@media (min-width: 720px) and (max-width: 1023.98px) { .kopfleiste img { height: 96px; } }
.kopfleiste__logo { display: inline-flex; flex: none; }
/* Adresse in der Leiste ist ein Link zur Anfahrt, bleibt aber mint statt gelb. */
.utility a.utility__ort { color: var(--mint); font-weight: 500; }
/* „Aus unserem Bestand": gemischte Reihe mit ca. acht Karten */
.bestand {
display: grid; gap: var(--raum-4);
grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch;
}
@media (min-width: 720px) { .bestand { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--raum-5); } }
@media (min-width: 1024px) { .bestand { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.bestand .angebot__inhalt { padding: var(--raum-4); gap: var(--raum-2); }
.bestand .angebot__inhalt h3 { font-size: 1.1rem; line-height: 1.25; }
.bestand .angebot__text {
display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.angebot__kat {
font-size: var(--fs-label); font-weight: 600; letter-spacing: .04em;
text-transform: uppercase; color: var(--rinde) !important;
}
@media (max-width: 719.98px) {
.bestand .angebot__text { -webkit-line-clamp: 2; }
.bestand .btn { padding-inline: var(--raum-3); font-size: var(--fs-label); }
.bestand .angebot__bild .schild { right: var(--raum-2); bottom: var(--raum-2); padding: .3rem .55rem; }
.bestand .schild__preis { font-size: 1.35rem; }
}
.bestand__fuss {
display: flex; flex-wrap: wrap; align-items: center; gap: var(--raum-3) var(--raum-5);
margin-top: var(--raum-6);
}
.bestand__fuss .hinweis { margin: 0; max-width: 52ch; }
/* GaLaBau-Band: groß, mit Bild (vorher ein schmaler beiger Streifen) */
.btn--gelb, .auf-dunkel a.btn--gelb { background: var(--gelb); color: var(--gruen-tief); } /* 7,0:1 */
.btn--gelb:hover, .auf-dunkel a.btn--gelb:hover { background: var(--weiss); color: var(--gruen-tief); }
.galabau-band {
display: grid; grid-template-columns: 1fr;
background: var(--gruen-tief); color: var(--mint);
border-radius: var(--radius-blatt-gross); overflow: hidden;
box-shadow: var(--schatten-karte);
}
.galabau-band__bild { position: relative; aspect-ratio: 16 / 10; min-height: 220px; }
.galabau-band__bild picture, .galabau-band__bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.galabau-band__bild .bildetikett { position: absolute; left: var(--raum-4); bottom: var(--raum-4); right: auto; margin: 0; }
.galabau-band__text {
padding: var(--raum-6) var(--raum-5);
display: flex; flex-direction: column; align-items: flex-start; gap: var(--raum-4);
}
.galabau-band__titel {
margin: 0; color: var(--weiss);
font-size: clamp(1.9rem, 1.2rem + 2.6vw, 3.1rem); line-height: 1.05; letter-spacing: -.01em;
text-wrap: balance;
}
.galabau-band__text p { margin: 0; color: var(--mint); max-width: 46ch; }
.galabau-band__stichworte { display: flex; flex-wrap: wrap; gap: var(--raum-2); padding: 0; margin: 0; list-style: none; }
.galabau-band__stichworte li {
border: 1.5px solid var(--gelb); color: var(--gelb); border-radius: 999px;
padding: .3rem .8rem; font-weight: 600; font-size: var(--fs-klein);
}
@media (min-width: 1024px) {
.galabau-band { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 460px; }
.galabau-band__bild { aspect-ratio: auto; }
.galabau-band__text { padding: var(--raum-7, 3.5rem) var(--raum-6); justify-content: center; }
}
.gutschein-bald { margin: var(--raum-3) 0 0; font-weight: 600; color: var(--rinde); }
/* Menüpunkt Termine ohne angekündigte Termine ausblenden (Review 30.09.2026). */
[data-nav-termine][hidden] { display: none !important; }
/* /produkte/: Abteilungsfilter am Handy als eine wischbare Zeile, damit die
Produkte nicht erst nach sechs Zeilen Knöpfen beginnen (Erik, 30.09.2026). */
@media (max-width: 719.98px) {
.produkte-filter .auswahl__reihe {
flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
margin-inline: calc(-1 * var(--gutter)); padding: 0 var(--gutter) var(--raum-2);
scrollbar-width: thin;
}
.produkte-filter .auswahl__chip { flex: none; scroll-snap-align: start; }
.produkte-filter .auswahl__chip span { white-space: nowrap; }
}