/* MEK Gartenpflege & Hausmeisterservice – Website, Design „A2 – Jahreslauf“ (#42)
   Die Leistungen erzählt durch das Jahr, in einer ruhigen Waldpalette: Forest trägt den Anfang und den Schluss,
   Creme und Weiß die Mitte. Natur kommt Ton in Ton, Blattgrün nur als kleiner Akzent.
   Farben, Schrift und Abstände nur aus branding/logo/06-design-system/tokens.css (docs/design-system.md). */

/* Rubik – SIL Open Font License 1.1, liegt lokal unter assets/fonts (OFL.txt) */
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/rubik-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("assets/fonts/rubik-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/rubik-latin-500-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 500; font-display: swap;
  src: url("assets/fonts/rubik-latin-ext-500-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("assets/fonts/rubik-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Rubik"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("assets/fonts/rubik-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  /* Tokens, wörtlich aus tokens.css */
  --mek-green: #1D4F37;
  --mek-leaf: #7DBA45;       /* nur Akzent: nie Text oder Button auf Weiß (2.3:1) */
  --mek-forest: #14301F;
  --mek-cream: #F3F1E8;
  --mek-ink: #1B1F1C;
  --mek-muted: #5B625D;
  --mek-line: #E4E2DC;
  --mek-white: #FFFFFF;

  --mek-font: "Rubik", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mek-fs-xs: 13px; --mek-fs-sm: 15px; --mek-fs-base: 17px; --mek-fs-lg: 20px;
  --mek-fs-xl: 26px; --mek-fs-2xl: 34px; --mek-fs-3xl: 44px;

  --mek-radius-sm: 4px; --mek-radius-md: 6px; --mek-radius-lg: 10px;
  --mek-space-1: 4px; --mek-space-2: 8px; --mek-space-3: 12px; --mek-space-4: 16px;
  --mek-space-5: 24px; --mek-space-6: 32px; --mek-space-7: 48px; --mek-space-8: 64px; --mek-space-9: 96px;

  /* Saisonale Illustrationsfarben: KEINE Tokens. Nur innerhalb der Zeichnungen (Herbstkarte, Karte),
     nie für Text oder Buttons. Herbstfarben und Seeblau freigegeben (Veli, 2026-11-02, docs/design-system.md). */
  --autumn-paper: #F2E0BD;
  --autumn-rust: #B4532A;
  --autumn-orange: #D9822B;
  --autumn-ochre: #D8A23F;
  --autumn-bark: #6E4A2E;
  --map-lake: #B9D3E3;

  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --gutter: var(--mek-space-5);
  --focus: var(--mek-green);
}

/* ---------- Grundlagen ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--mek-font);
  font-size: var(--mek-fs-base);
  line-height: 1.55;
  color: var(--mek-ink);
  background: var(--mek-white);
  overflow-wrap: break-word;
}
h1, h2, h3 { color: var(--mek-green); font-weight: 700; line-height: 1.15; margin: 0; text-wrap: balance; }
p { margin: 0; }
p, li, figcaption { text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--mek-green); text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: text-underline-offset 200ms var(--ease-out), text-decoration-thickness 200ms ease; }
a:hover { text-decoration-thickness: 2px; }
@media (hover: hover) and (pointer: fine) { a:hover { text-underline-offset: 0.32em; } }
::selection { background: var(--mek-leaf); color: var(--mek-forest); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: var(--mek-radius-sm); }
.on-dark { --focus: var(--mek-leaf); }

.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.skip { position: absolute; left: var(--mek-space-4); top: -100px; z-index: 50; background: var(--mek-cream); color: var(--mek-green); border: 2px solid var(--mek-green); font-weight: 500; padding: var(--mek-space-3) var(--mek-space-4); border-radius: var(--mek-radius-md); }
.skip:focus { top: var(--mek-space-4); }

/* ---------- Buttons: grüne Fläche, weiße Schrift, Rubik 500, mindestens 44 px ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--mek-space-2);
  min-height: 48px; padding: var(--mek-space-3) var(--mek-space-5);
  border: 2px solid transparent; border-radius: var(--mek-radius-md);
  font: 500 var(--mek-fs-base)/1.2 var(--mek-font); text-decoration: none; text-align: center;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--mek-green); color: var(--mek-white); }
.btn-secondary { background: transparent; color: var(--mek-green); border-color: var(--mek-green); }
.btn-on-dark { background: var(--mek-cream); color: var(--mek-forest); }
.btn .icon { transition: rotate 200ms var(--ease-out), translate 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--mek-forest); }
  .btn-secondary:hover { background: var(--mek-green); color: var(--mek-white); }
  .btn-on-dark:hover { background: var(--mek-white); }
  .btn:hover .icon { rotate: -10deg; translate: 0 -1px; }
}

.input {
  width: 100%; min-height: 48px; padding: var(--mek-space-3) var(--mek-space-4);
  font: 400 var(--mek-fs-base)/1.4 var(--mek-font); color: var(--mek-ink);
  background: var(--mek-white); border: 1px solid var(--mek-muted); border-radius: var(--mek-radius-md);
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.input:focus-visible { outline: 2px solid transparent; border-color: var(--mek-green); box-shadow: 0 0 0 3px var(--mek-green); }
.input::placeholder { color: var(--mek-muted); }

/* ---------- Kopfzeile ---------- */
.top { position: relative; z-index: 40; background: var(--mek-forest); border-bottom: 1px solid var(--mek-green); }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--mek-space-5); padding-block: var(--mek-space-5); }
.brand { display: block; padding: var(--mek-space-1); }
.brand img { width: 220px; height: auto; }
.nav { display: flex; gap: var(--mek-space-6); }
.nav a { position: relative; color: var(--mek-cream); font-weight: 500; font-size: var(--mek-fs-sm); text-decoration: none; padding-block: var(--mek-space-3); }
.nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 6px; height: 2px; background: var(--mek-leaf); transform: scaleX(0); transform-origin: left; transition: transform 200ms var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .nav a:hover::after { transform: scaleX(1); } }
.back-link { display: inline-flex; align-items: center; min-height: 44px; color: var(--mek-cream); font-weight: 500; white-space: nowrap; }

/* Handy-Menü: natives <details>, ohne JavaScript. Desktop behält die einfache Navigation. */
.mnav { display: none; }

/* ---------- Hero: die Leistungen als Beschriftung ---------- */
.hero { background: var(--mek-forest); color: var(--mek-cream); padding-top: var(--mek-space-8); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--mek-space-8); align-items: center; }
.lettering { display: flex; flex-direction: column; align-items: flex-start; font-size: var(--mek-fs-3xl); line-height: 1.12; color: var(--mek-cream); letter-spacing: -0.01em; }
.lettering a { color: var(--mek-cream); text-decoration: none; display: inline-flex; align-items: center; gap: var(--mek-space-4); }
.lettering a::after { content: ""; width: 14px; height: 14px; border-radius: 0 50% 0 50%; background: var(--mek-leaf); flex: none; transform: translateX(-8px); opacity: 0; transition: transform 200ms var(--ease-out), opacity 200ms ease; }
.lettering a:focus-visible::after { opacity: 1; transform: none; }
@media (hover: hover) and (pointer: fine) { .lettering a:hover::after { opacity: 1; transform: none; } }
.lettering-place { margin-top: var(--mek-space-3); font-size: var(--mek-fs-xl); font-weight: 500; color: var(--mek-leaf); letter-spacing: 0; }
.hero-lead { max-width: 34em; margin-top: var(--mek-space-5); font-size: var(--mek-fs-lg); line-height: 1.5; color: var(--mek-cream); }

/* Auftritt: Inhalt ist immer sichtbar, @starting-style ergänzt nur ein kurzes Aufsteigen */
.lettering > *, .hero-lead { transition: opacity 500ms var(--ease-out), transform 500ms var(--ease-out); }
@starting-style {
  .lettering > *, .hero-lead { opacity: 0; transform: translateY(8px); }
}
.lettering > :nth-child(2) { transition-delay: 50ms; }
.lettering > :nth-child(3) { transition-delay: 100ms; }
.lettering > :nth-child(4), .hero-lead { transition-delay: 150ms; }

/* „Jetzt“-Karte im Hero: was in dieser Jahreszeit ansteht. Sichtbar ist nur .now-season.is-now. */
.now-card { display: grid; gap: var(--mek-space-3); width: 360px; padding: var(--mek-space-5); background: var(--mek-green); border-radius: var(--mek-radius-lg); color: var(--mek-cream); }
.now-season { display: grid; gap: var(--mek-space-3); }
.now-season:not(.is-now) { display: none; }
.now-text { display: grid; gap: var(--mek-space-3); }
.now-tag { display: inline-flex; align-items: center; gap: var(--mek-space-2); justify-self: start; padding: 2px var(--mek-space-3); border-radius: 999px; background: var(--mek-forest); color: var(--mek-white); font-size: var(--mek-fs-xs); font-weight: 500; }
.now-tag::before { content: ""; width: 8px; height: 8px; border-radius: 0 50% 0 50%; background: var(--mek-leaf); }
.now-title { color: var(--mek-white); font-size: var(--mek-fs-xl); }
.now-card ul { display: grid; gap: var(--mek-space-1); }
.now-card li { position: relative; padding-left: var(--mek-space-4); }
.now-card li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 6px; height: 2px; background: var(--mek-leaf); }
.now-link { display: inline-flex; align-items: center; gap: var(--mek-space-2); justify-self: start; min-height: 44px; color: var(--mek-cream); font-weight: 500; }
.now-art { position: relative; width: 100%; aspect-ratio: 2 / 1; margin-bottom: var(--mek-space-2); }
.now-art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
/* Motive auf MEK-Grün: was in der Jahresliste grün ist, wird hier Forest oder Creme */
.now-spring .m-line, .now-spring .m-stem { fill: none; stroke: var(--mek-cream); stroke-width: 2; stroke-linecap: round; }
.now-spring .m-leaf { fill: var(--mek-leaf); }
.now-summer .m-sun { fill: var(--mek-white); }
.now-summer .m-ray { fill: none; stroke: var(--mek-white); stroke-width: 3; stroke-linecap: round; }
.now-summer .m-tree, .now-summer .m-meadow { fill: var(--mek-forest); }
.now-autumn .m-ground { fill: var(--mek-forest); }
.now-autumn .m-rust { fill: var(--autumn-rust); }
.now-autumn .m-orange { fill: var(--autumn-orange); }
.now-autumn .m-ochre { fill: var(--autumn-ochre); }
.now-autumn .m-bark { fill: var(--autumn-bark); }
.now-winter .m-fir { fill: var(--mek-forest); }
.now-winter .m-snow { fill: var(--mek-white); }
.now-winter .m-flake { fill: none; stroke: var(--mek-white); stroke-width: 1.5; stroke-linecap: round; }
/* kommt kurz nach der Beschriftung herein */
.now-card { transition: opacity 600ms var(--ease-out) 250ms, transform 600ms var(--ease-out) 250ms; }
@starting-style { .now-card { opacity: 0; transform: translateY(12px); } }

/* Baumreihe: zwei Schichten, hinten heller (fill-opacity), vorne MEK-Grün auf Forest */
.treeline { display: block; width: 100%; height: 140px; margin-top: var(--mek-space-6); margin-bottom: -1px; }
.treeline path { transform-box: fill-box; transform-origin: 50% 100%; }
.treeline .tl-back { fill: var(--mek-green); fill-opacity: 0.5; }
.treeline .tl-front { fill: var(--mek-green); }
/* Schluss: Bäume wachsen aus der Creme-Fläche in den Kontaktbereich */
.treeline-close { margin-top: 0; background: var(--mek-cream); }
.treeline-close .tl-back, .treeline-close .tl-front { fill: var(--mek-forest); }
.treeline-close .tl-back { fill-opacity: 0.4; }

/* Kontaktband: der Streifen unten am Transporter */
.band { position: relative; background: var(--mek-cream); color: var(--mek-ink); --focus: var(--mek-green); }
.band-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--mek-space-5); padding-block: var(--mek-space-5); flex-wrap: wrap; }
.band-offer { font-size: var(--mek-fs-lg); color: var(--mek-green); }
.band-offer strong { font-weight: 700; }
.band-actions { display: flex; align-items: center; gap: var(--mek-space-4); flex-wrap: wrap; }
.band-phone { display: inline-flex; align-items: center; gap: var(--mek-space-2); min-height: 48px; padding-inline: var(--mek-space-2); font-weight: 500; font-size: var(--mek-fs-lg); color: var(--mek-green); text-decoration: none; font-variant-numeric: tabular-nums; }
.band-phone span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }

/* ---------- So läuft es ab: drei Schritte auf einer Linie, als ein Block mit dem Band ---------- */
.process { background: var(--mek-cream); padding-block: 0 var(--mek-space-6); }
.process-title { font-size: var(--mek-fs-2xl); padding-top: var(--mek-space-6); border-top: 1px solid var(--mek-line); }
.steps { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mek-space-6); margin-top: var(--mek-space-6); }
/* die Linie läuft von der ersten bis zur letzten Ziffer */
.steps::before { content: ""; position: absolute; top: 23px; left: 24px; right: calc((100% - 2 * var(--mek-space-6)) / 3 - 24px); height: 2px; background: var(--mek-line); }
.step { position: relative; display: grid; gap: var(--mek-space-2); align-content: start; }
.step-n { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--mek-space-2); border-radius: 50%; background: var(--mek-forest); color: var(--mek-white); font-weight: 700; font-size: var(--mek-fs-lg); box-shadow: 0 0 0 6px var(--mek-cream); }
.step h3 { font-size: var(--mek-fs-xl); }
.step p { color: var(--mek-ink); max-width: 26em; }
.step:last-child .step-n { background: var(--mek-leaf); color: var(--mek-forest); }

/* ---------- Abschnitte ---------- */
.section { padding-block: var(--mek-space-9); }
.section-cream { background: var(--mek-cream); }
.section-head { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--mek-space-6); align-items: end; margin-bottom: var(--mek-space-7); }
.section-head h2 { font-size: var(--mek-fs-2xl); }
.section-head p { color: var(--mek-muted); max-width: 36em; }

/* ---------- Leistungen: Zeichen, Arbeit und Jahreszeit als Zeilen ---------- */
.services { position: relative; border-top: 2px solid var(--mek-green); }
.service { position: relative; display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: var(--mek-space-5); align-items: center; padding-block: var(--mek-space-5); border-bottom: 1px solid var(--mek-line); scroll-margin-top: var(--mek-space-6); }
.service::before { content: ""; position: absolute; left: 0; top: -2px; width: 64px; height: 4px; background: var(--mek-leaf); transform: scaleX(0); transform-origin: left; transition: transform 300ms var(--ease-out); }
.service:target::before { transform: scaleX(1); }
.service h3 { display: flex; align-items: center; gap: var(--mek-space-2); font-size: var(--mek-fs-xl); transition: translate 220ms var(--ease-out); }
.service h3::after { content: ""; width: 12px; height: 12px; border-radius: 0 50% 0 50%; background: var(--mek-leaf); opacity: 0; scale: 0.4; transition: opacity 200ms ease, scale 220ms var(--ease-out); }
.service:target h3 { color: var(--mek-forest); }
.service-mark { display: grid; place-items: center; width: 64px; height: 64px; border-radius: var(--mek-radius-lg); background: var(--mek-cream); color: var(--mek-green); transition: background-color 250ms ease, color 250ms ease, rotate 300ms var(--ease-out); }
.service-mark .icon { width: 34px; height: 34px; }
.service-body p { margin-top: var(--mek-space-1); max-width: 40em; }
.service-season { justify-self: end; padding: var(--mek-space-1) var(--mek-space-3); border: 1px solid var(--mek-green); border-radius: 999px; font-size: var(--mek-fs-xs); font-weight: 500; color: var(--mek-green); white-space: nowrap; }
@media (hover: hover) and (pointer: fine) {
  .service:hover h3 { translate: 6px 0; }
  .service:hover h3::after { opacity: 1; scale: 1; }
  .service:hover .service-mark { background: var(--mek-leaf); color: var(--mek-forest); rotate: -4deg; }
}

/* Weitere Leistungen als ruhige Reihe kleiner Karten */
.more { display: grid; gap: var(--mek-space-4); padding-top: var(--mek-space-6); }
.more h3 { font-size: var(--mek-fs-lg); color: var(--mek-ink); }
.more ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--mek-space-2); }
.more li { display: grid; gap: 2px; padding: var(--mek-space-3) var(--mek-space-4); background: var(--mek-cream); border-radius: var(--mek-radius-lg); font-size: var(--mek-fs-sm); }
.more strong { font-weight: 500; color: var(--mek-green); }

/* ---------- Rund ums Jahr: vier Karten, je eine Token-Farbe von hell nach dunkel, mit kleinem Motiv ---------- */
.year-title { display: flex; align-items: center; justify-content: space-between; gap: var(--mek-space-4); flex-wrap: wrap; }
.seasons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mek-space-2); }
.season { position: relative; display: flex; flex-direction: column; gap: var(--mek-space-4); padding: var(--mek-space-5); border-radius: var(--mek-radius-lg); }
.season h3 { font-size: var(--mek-fs-xl); }
.season ul { display: grid; gap: var(--mek-space-2); margin-bottom: var(--mek-space-4); }
.season li { position: relative; padding-left: var(--mek-space-4); }
.season li::before { content: ""; position: absolute; left: 0; top: 0.7em; width: 6px; height: 2px; background: currentColor; }
.season-note { font-size: var(--mek-fs-sm); }
/* Zeichnung: ein festes SVG und darüber eigene Ebenen für die bewegten Teile (gleiches 160×80-Raster).
   Bewegt werden nur ganze Ebenen mit transform/opacity: das erledigt die Grafikkarte, nicht der Prozessor. */
.season-art { position: relative; width: 100%; max-width: 200px; aspect-ratio: 2 / 1; margin-top: auto; align-self: flex-end; }
.season-art svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.season-spring { background: var(--mek-cream); color: var(--mek-ink); }
.season-spring h3 { color: var(--mek-green); }
.season-spring .m-line, .season-spring .m-stem { fill: none; stroke: var(--mek-green); stroke-width: 2; stroke-linecap: round; }
.season-spring .m-leaf { fill: var(--mek-leaf); }

/* Sommer ist die hellste Karte: Blattgrün, Forest-Text (6.1:1), weiße Sonne */
.season-summer { background: var(--mek-leaf); color: var(--mek-forest); }
.season-summer h3 { color: var(--mek-forest); }
.season-summer .m-sun { fill: var(--mek-white); }
.season-summer .m-ray { fill: none; stroke: var(--mek-white); stroke-width: 3; stroke-linecap: round; }
.season-summer .m-tree, .season-summer .m-meadow { fill: var(--mek-green); }

/* Herbst: Papierfarbe als Fläche nur hinter Tinte und MEK-Grün; Herbstfarben nur in der Zeichnung */
.season-autumn { background: var(--autumn-paper); color: var(--mek-ink); }
.season-autumn h3 { color: var(--mek-green); }
.season-autumn .m-rust { fill: var(--autumn-rust); }
.season-autumn .m-orange { fill: var(--autumn-orange); }
.season-autumn .m-ochre { fill: var(--autumn-ochre); }
.season-autumn .m-bark { fill: var(--autumn-bark); }

/* Winter: Schnee liegt auf der Oberkante, auf den Tannen und am Boden */
.season-winter { overflow: hidden; padding-top: var(--mek-space-6); background: var(--mek-forest); color: var(--mek-cream); }
.season-winter h3 { color: var(--mek-white); }
.snowcap { position: absolute; top: 0; left: 0; width: 100%; height: 14px; fill: var(--mek-white); }
.season-winter .m-fir { fill: var(--mek-green); }
.season-winter .m-snow { fill: var(--mek-white); }
.season-winter .m-flake { fill: none; stroke: var(--mek-white); stroke-width: 1.5; stroke-linecap: round; }

/* „Jetzt“: die aktuelle Jahreszeit (Umstellen: website/README.md) */
.season.is-now { outline: 3px solid var(--mek-forest); outline-offset: 4px; }
.season-now { position: absolute; top: var(--mek-space-4); right: var(--mek-space-4); display: inline-flex; align-items: center; gap: var(--mek-space-1); padding: 2px var(--mek-space-3); border-radius: 999px; background: var(--mek-forest); color: var(--mek-white); font-size: var(--mek-fs-xs); font-weight: 500; }
.season-now::before { content: ""; width: 8px; height: 8px; border-radius: 0 50% 0 50%; background: var(--mek-leaf); }

/* Pause für die dauerhaften Animationen (Schnee, Blätter, Sonne, Baumreihe): nur CSS (WCAG 2.2.2) */
.motion-toggle { position: relative; display: inline-flex; align-items: center; gap: var(--mek-space-2); min-height: 44px; padding: 0 var(--mek-space-4); border: 1px solid var(--mek-green); border-radius: 999px; font-size: var(--mek-fs-sm); font-weight: 500; color: var(--mek-green); cursor: pointer; }
.motion-toggle input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.motion-toggle span::before { content: ""; display: inline-block; width: 10px; height: 12px; margin-right: var(--mek-space-2); border-inline: 3px solid currentColor; vertical-align: -1px; }
.motion-toggle .mt-paused { display: none; }
.motion-toggle:has(input:checked) { background: var(--mek-green); color: var(--mek-white); }
.motion-toggle:has(input:checked) span::before { width: 0; height: 0; border-inline: 0; border-block: 6px solid transparent; border-left: 10px solid currentColor; }
.motion-toggle:has(input:checked) .mt-run { display: none; }
.motion-toggle:has(input:checked) .mt-paused { display: inline; }
.motion-toggle:has(input:focus-visible) { outline: 3px solid var(--mek-green); outline-offset: 3px; }
html:has(#motion-pause:checked) .art-move,
html:has(#motion-pause:checked) .treeline path { animation-play-state: paused; }

/* ---------- Vorher und nachher: leere Bilderrahmen, bis echte Fotos da sind ---------- */
.soon-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--mek-space-8); align-items: center; }
.soon-text h2 { font-size: var(--mek-fs-2xl); }
.soon-text p { margin-top: var(--mek-space-4); max-width: 30em; }
.soon-note { color: var(--mek-muted); font-size: var(--mek-fs-sm); }
.frames { position: relative; height: 320px; }
.frame { position: absolute; width: 52%; margin: 0; padding: var(--mek-space-3) var(--mek-space-3) var(--mek-space-2); background: var(--mek-white); border-radius: var(--mek-radius-sm); box-shadow: 0 10px 24px -12px rgb(20 48 31 / 0.35); transition: rotate 400ms var(--ease-out), translate 400ms var(--ease-out); }
.frame-photo { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--mek-line); color: var(--mek-muted); border-radius: 2px; }
.frame-photo .icon { width: 28px; height: 28px; }
.frame figcaption { margin-top: var(--mek-space-2); font-size: var(--mek-fs-xs); font-weight: 500; color: var(--mek-muted); }
.frame-1 { left: 0; top: 24px; rotate: -5deg; }
.frame-2 { left: 26%; top: 0; rotate: 3deg; z-index: 1; }
.frame-3 { right: 0; top: 64px; rotate: -1deg; }
@media (hover: hover) and (pointer: fine) {
  .frames:hover .frame-1 { rotate: -8deg; translate: -12px 0; }
  .frames:hover .frame-2 { rotate: 0deg; translate: 0 -8px; }
  .frames:hover .frame-3 { rotate: 4deg; translate: 12px 0; }
}

/* ---------- Über mich: ein Satz auf Forest, drei Fakten ---------- */
.about { background: var(--mek-forest); color: var(--mek-cream); }
.about-statement { font-size: var(--mek-fs-3xl); max-width: 14em; color: var(--mek-white); }
.about-lead { margin-top: var(--mek-space-5); font-size: var(--mek-fs-lg); max-width: 34em; color: var(--mek-cream); }
.about-facts { margin-top: var(--mek-space-7); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mek-space-5); }
.about-facts li { display: grid; gap: var(--mek-space-1); padding-top: var(--mek-space-4); border-top: 2px solid var(--mek-leaf); }
.about-facts strong { display: flex; align-items: center; gap: var(--mek-space-2); font-size: var(--mek-fs-lg); color: var(--mek-white); }
.about-facts strong::before { content: ""; width: 12px; height: 12px; border-radius: 0 50% 0 50%; background: var(--mek-leaf); }
.about-facts span { color: var(--mek-cream); font-size: var(--mek-fs-sm); }

/* ---------- Häufige Fragen: natives details/summary ---------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--mek-space-6); align-items: start; }
.faq h2 { font-size: var(--mek-fs-2xl); }
.faq-intro { margin-top: var(--mek-space-3); color: var(--mek-muted); }
.faq-list { border-top: 2px solid var(--mek-green); }
.faq-item { border-bottom: 1px solid var(--mek-line); }
.faq-item summary { display: flex; align-items: center; justify-content: space-between; gap: var(--mek-space-4); min-height: 56px; padding-block: var(--mek-space-3); font-weight: 500; font-size: var(--mek-fs-lg); color: var(--mek-green); cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: ""; flex: none; width: 12px; height: 12px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; translate: 0 -3px; transition: rotate 250ms var(--ease-out), translate 250ms var(--ease-out); }
.faq-item[open] summary::after { rotate: 225deg; translate: 0 3px; }
.faq-answer p { padding-bottom: var(--mek-space-5); max-width: 40em; }
@media (hover: hover) and (pointer: fine) { .faq-item summary:hover { text-decoration: underline; text-underline-offset: 0.2em; } }
/* Weiches Öffnen, wo der Browser auf auto-Höhe animieren kann; sonst sofort */
@supports (interpolate-size: allow-keywords) {
  .faq-list { interpolate-size: allow-keywords; }
  .faq-item::details-content { block-size: 0; overflow: hidden; transition: block-size 300ms var(--ease-out), content-visibility 300ms allow-discrete; }
  .faq-item[open]::details-content { block-size: auto; }
}

/* ---------- Einsatzgebiet: Text, PLZ-Prüfung und Orte neben der Karte ---------- */
.area-layout { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--mek-space-8); align-items: center; }
.area-text h2 { font-size: var(--mek-fs-2xl); }
.area-text > p:first-of-type { margin-top: var(--mek-space-4); max-width: 34em; }
.place-chips { display: flex; flex-wrap: wrap; gap: var(--mek-space-2); margin-top: var(--mek-space-5); }
.place-chips li { padding: var(--mek-space-1) var(--mek-space-3); background: var(--mek-white); border: 1px solid var(--mek-line); border-radius: var(--mek-radius-md); font-size: var(--mek-fs-sm); }
.area-note { margin-top: var(--mek-space-5); color: var(--mek-muted); font-size: var(--mek-fs-sm); max-width: 34em; }
.area-map { margin: 0; }
.area-map svg { display: block; width: 100%; height: auto; background: var(--mek-white); border: 1px solid var(--mek-line); border-radius: var(--mek-radius-lg); }
.area-map figcaption { margin-top: var(--mek-space-2); font-size: var(--mek-fs-xs); color: var(--mek-muted); }
.ring { fill: none; stroke: var(--mek-green); stroke-opacity: 0.35; stroke-dasharray: 4 6; transition: stroke 300ms ease, stroke-opacity 300ms ease; }
.lake { fill: var(--map-lake); }
.dot { fill: var(--mek-green); }
.dot-home { fill: var(--mek-leaf); stroke: var(--mek-green); stroke-width: 3; }
.lbl { font: 500 13px var(--mek-font); fill: var(--mek-ink); }
.lbl-home { font: 700 16px var(--mek-font); fill: var(--mek-green); }

/* PLZ-Prüfung ohne JavaScript: das pattern-Attribut listet die PLZ-Bereiche, :valid zeigt die Antwort */
.plz-check { display: grid; gap: var(--mek-space-2); margin-top: var(--mek-space-5); padding: var(--mek-space-4); background: var(--mek-white); border: 1px solid var(--mek-line); border-radius: var(--mek-radius-lg); max-width: 30em; }
.plz-check label { font-weight: 500; color: var(--mek-green); }
.plz-check .input { max-width: 16em; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.plz-result { display: grid; gap: var(--mek-space-2); }
.plz-msg { display: flex; align-items: flex-start; gap: var(--mek-space-2); font-size: var(--mek-fs-sm); }
.plz-hint { color: var(--mek-muted); }
.plz-yes, .plz-no { display: none; transition: opacity 220ms var(--ease-out), translate 220ms var(--ease-out), display 220ms allow-discrete; }
@starting-style { .plz-yes, .plz-no { opacity: 0; translate: 0 4px; } }
.plz-yes .icon { flex: none; width: 22px; height: 22px; padding: 3px; border-radius: 50%; background: var(--mek-green); color: var(--mek-white); }
.plz-yes strong { color: var(--mek-green); }
.plz-no strong { color: var(--mek-ink); }
.plz-check:has(input:not(:placeholder-shown)) .plz-hint { display: none; }
.plz-check:has(input:valid:not(:placeholder-shown)) .plz-yes { display: flex; }
.plz-check:has(input:invalid:not(:placeholder-shown)) .plz-no { display: flex; }
.plz-check:has(input:valid:not(:placeholder-shown)) .input { border-color: var(--mek-green); box-shadow: inset 0 0 0 1px var(--mek-green); }
.plz-check:has(input:valid:not(:placeholder-shown)) .input:focus-visible { box-shadow: inset 0 0 0 1px var(--mek-green), 0 0 0 3px var(--mek-green); }
/* Eine passende PLZ lässt die Karte aufleuchten: Ringe in Blattgrün, der Heimatpunkt wächst */
.area-layout:has(#plz-check:valid:not(:placeholder-shown)) .ring { stroke: var(--mek-leaf); stroke-opacity: 1; }
.area-layout:has(#plz-check:valid:not(:placeholder-shown)) .dot-home { stroke-width: 6; }

/* ---------- Kontakt: wieder Forest, die Hecktüren des Transporters ---------- */
.contact { background: var(--mek-forest); color: var(--mek-cream); padding-block: var(--mek-space-9); }
.contact-grid { display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); gap: var(--mek-space-8); align-items: end; }
.contact h2 { color: var(--mek-cream); font-size: var(--mek-fs-3xl); }
.contact-main > p { margin-top: var(--mek-space-5); font-size: var(--mek-fs-lg); max-width: 30em; }
.btn-big { margin-top: var(--mek-space-6); min-height: 56px; padding-inline: var(--mek-space-6); font-size: var(--mek-fs-lg); }
.contact-alt { display: grid; }
.contact-alt li { display: grid; gap: var(--mek-space-1); padding-block: var(--mek-space-4); border-top: 1px solid var(--mek-green); }
.contact-alt span { color: var(--mek-cream); font-size: var(--mek-fs-sm); }
.contact-alt a { display: inline-flex; align-items: center; gap: var(--mek-space-3); min-height: 44px; color: var(--mek-cream); font-weight: 500; font-size: var(--mek-fs-lg); overflow-wrap: anywhere; }
.contact-alt .icon { color: var(--mek-leaf); }

/* ---------- Fußzeile ---------- */
.foot { background: var(--mek-forest); color: var(--mek-cream); }
.foot a { color: var(--mek-cream); }
.foot-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr); gap: var(--mek-space-7); padding-block: var(--mek-space-8) var(--mek-space-6); }
.foot-brand img { width: 200px; height: auto; }
.foot-brand p { margin-top: var(--mek-space-4); max-width: 26em; font-size: var(--mek-fs-sm); }
.foot-col h2 { font-size: var(--mek-fs-sm); font-weight: 500; color: var(--mek-leaf); }
.foot-col ul { margin-top: var(--mek-space-2); display: grid; }
.foot-col a { display: inline-flex; align-items: center; min-height: 44px; font-size: var(--mek-fs-sm); overflow-wrap: anywhere; }
.foot-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--mek-space-3); padding-block: var(--mek-space-4); border-top: 1px solid var(--mek-green); font-size: var(--mek-fs-xs); }
.foot-bottom nav { display: flex; gap: var(--mek-space-5); }
.foot-bottom a { display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- Anrufleiste: übernimmt unter 900 px die versteckte Navigation ---------- */
.callbar { display: none; }

/* ---------- Unterseiten (404, Impressum, Datenschutz) ---------- */
.page-hero { background: var(--mek-forest); color: var(--mek-cream); padding-top: var(--mek-space-8); }
.page-title { color: var(--mek-cream); font-size: var(--mek-fs-3xl); }
.page-lead { margin-top: var(--mek-space-4); font-size: var(--mek-fs-lg); line-height: 1.5; max-width: 32em; }
.page-hero .treeline { margin-top: var(--mek-space-7); }
.page-body { padding-block: var(--mek-space-8) var(--mek-space-9); }
.lost-grid { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mek-space-3) var(--mek-space-6); }
.lost-link { display: inline-flex; align-items: center; min-height: 44px; font-weight: 500; font-size: var(--mek-fs-lg); }

.legal > * { max-width: 38em; }
.legal h2 { margin-top: var(--mek-space-7); margin-bottom: var(--mek-space-3); font-size: var(--mek-fs-lg); }
.legal h2:first-child { margin-top: 0; }
.legal p + p, .legal p + ul, .legal ul + p { margin-top: var(--mek-space-3); }
.legal ul { display: grid; gap: var(--mek-space-2); padding-left: var(--mek-space-5); list-style: disc; }
.legal li::marker { color: var(--mek-green); }
.legal a { overflow-wrap: anywhere; }
.legal-date { color: var(--mek-muted); margin-bottom: var(--mek-space-6); }

/* ---------- Bewegung: eine Grammatik, „wachsen“ ----------
   Inhalte steigen beim Scrollen auf, grüne Linien wachsen von links, die Sprossen wachsen.
   Nur CSS: scroll-gesteuerte Animationen, wo unterstützt; sonst ist alles sofort sichtbar.
   Unter prefers-reduced-motion bewegt sich nichts (ganz unten). */
@keyframes rise { from { opacity: 0; translate: 0 28px; } to { opacity: 1; translate: 0 0; } }
@keyframes grow-x { from { scale: 0 1; } to { scale: 1 1; } }
@keyframes grow-y { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes grow-up { from { scale: 1 0.3; opacity: 0.4; } to { scale: 1 1; opacity: 1; } }
@keyframes turn { to { transform: rotate(360deg); } }
@keyframes beckon { 0% { box-shadow: 0 0 0 0 var(--mek-leaf); } 100% { box-shadow: 0 0 0 14px transparent; } }
@keyframes snowfall { from { transform: translateY(-4px); opacity: 1; } to { transform: translateY(10px); opacity: 0.2; } }
@keyframes sway { from { transform: translate(-2px, -2px); } to { transform: translate(3px, 6px); } }
@keyframes forest-in { from { scale: 1 0.5; opacity: 0; } to { scale: 1 1; opacity: 1; } }
@keyframes parallax-back { to { translate: 0 26px; } }
@keyframes parallax-front { to { translate: 0 10px; } }
@keyframes breeze-back { 0%, 100% { transform: skewX(0deg); } 50% { transform: skewX(-1.8deg); } }
@keyframes breeze-front { 0%, 100% { transform: skewX(0deg); } 50% { transform: skewX(-1deg); } }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mark-in { from { transform: scale(0.6) rotate(-12deg); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes drift { from { transform: translateY(var(--drift)); } to { transform: translateY(calc(-1 * var(--drift))); } }
@keyframes card-in { from { transform: scale(0.9); opacity: 0.55; } }
@keyframes card-out { to { transform: scale(0.9); opacity: 0.55; } }
@keyframes menu-in { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }
@keyframes header-settle { from { box-shadow: 0 0 0 0 transparent; } to { box-shadow: 0 10px 30px -18px rgb(20 48 31 / 0.6); } }
@keyframes callbar-reveal {
  0%, 50% { transform: translateY(100%); opacity: 0; visibility: hidden; }
  100% { transform: none; opacity: 1; visibility: visible; }
}

@media (prefers-reduced-motion: no-preference) {
  /* Ein wenig Wetter: Schnee rieselt im Winter, Blätter wiegen sich im Herbst, die Sonne dreht sich langsam */
  .art-snow-a { animation: snowfall 6.5s linear -4s infinite; }
  .art-snow-b { animation: snowfall 5.5s linear -2s infinite; }
  .art-snow-c { animation: snowfall 4s linear infinite; }
  .art-leaves-a { animation: sway 3.2s ease-in-out infinite alternate; }
  .art-leaves-b { animation: sway 4.1s ease-in-out -1.5s infinite alternate; }
  /* die Sonne dreht sich um ihren Mittelpunkt (120/24 im 160×80-Raster) */
  .art-sun { transform-origin: 75% 30%; animation: turn 30s linear infinite; }
  .mnav[open] .mnav-panel { animation: menu-in 220ms var(--ease-out); }

  /* Die Baumreihe wächst einmal herein */
  .hero .tl-back, .page-hero .tl-back { animation: forest-in 1400ms var(--ease-out) both; }
  .hero .tl-front, .page-hero .tl-front { animation: forest-in 1400ms var(--ease-out) 200ms both; }

  @supports (animation-timeline: scroll()) {
    /* Startseite: die Anrufleiste kommt erst, wenn die Kontaktknöpfe im Hero weggescrollt sind */
    .page-home .callbar { animation: callbar-reveal linear both; animation-timeline: scroll(root); animation-range: 0 90vh; }
    /* Handys: nur ein günstiger Parallax-Versatz */
    .hero .tl-back, .page-hero .tl-back {
      animation: forest-in 1400ms var(--ease-out) both, parallax-back linear both;
      animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh;
    }
    .hero .tl-front, .page-hero .tl-front {
      animation: forest-in 1400ms var(--ease-out) 200ms both, parallax-front linear both;
      animation-timeline: auto, scroll(root); animation-range: normal, 0 100vh;
    }
  }

  /* Desktop mit Maus: dazu eine langsame Brise */
  @media (hover: hover) and (pointer: fine) {
    .treeline-close .tl-back { animation: breeze-back 9s ease-in-out infinite; }
    .treeline-close .tl-front { animation: breeze-front 7s ease-in-out -2s infinite; }
    /* nur auf der Startseite, wo es den Schalter „Bewegung anhalten“ gibt (WCAG 2.2.2) */
    .hero .tl-back { animation: forest-in 1400ms var(--ease-out) both, breeze-back 9s ease-in-out 1400ms infinite; }
    .hero .tl-front { animation: forest-in 1400ms var(--ease-out) 200ms both, breeze-front 7s ease-in-out 1600ms infinite; }
    @supports (animation-timeline: scroll()) {
      .hero .tl-back {
        animation: forest-in 1400ms var(--ease-out) both, parallax-back linear both, breeze-back 9s ease-in-out 1400ms infinite;
        animation-timeline: auto, scroll(root), auto; animation-range: normal, 0 100vh, normal;
      }
      .hero .tl-front {
        animation: forest-in 1400ms var(--ease-out) 200ms both, parallax-front linear both, breeze-front 7s ease-in-out 1600ms infinite;
        animation-timeline: auto, scroll(root), auto; animation-range: normal, 0 100vh, normal;
      }
    }
  }

  @supports (animation-timeline: view()) {
    /* Einsatzgebiet bleibt bewusst ruhig: neben der festen Karte wirkt aufsteigender Text, als ob die Karte wackelt */
    .section-head, .service, .more h3, .more li, .season, .step, .frame,
    .soon-text > *, .about-statement, .about-lead, .about-facts li,
    .contact-main > *, .contact-alt li {
      animation: rise var(--ease-out) both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    .faq-item { animation: rise var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% entry 60%; }
    /* Karten einer Reihe kommen nacheinander */
    .season:nth-child(2), .frame-2, .about-facts li:nth-child(2) { animation-range: entry 8% entry 78%; }
    .season:nth-child(3), .frame-3, .about-facts li:nth-child(3) { animation-range: entry 16% entry 86%; }
    .season:nth-child(4) { animation-range: entry 24% entry 94%; }
    .step:nth-child(2) { animation-range: entry 10% entry 80%; }
    .step:nth-child(3) { animation-range: entry 20% entry 90%; }

    /* Grüne Linien wachsen von links; die feste Linie bleibt der Rückfall */
    .services { border-top-color: transparent; }
    .services::before {
      content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px; background: var(--mek-green);
      transform-origin: left; animation: grow-x var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 35%;
    }
    .steps::before { transform-origin: left; animation: grow-x var(--ease-out) both; animation-timeline: view(); animation-range: entry 10% cover 40%; }

    /* Frühlingssprossen wachsen aus der Bodenlinie */
    .season-spring .season-art { transform-origin: 50% 100%; animation: grow-up var(--ease-out) both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    /* Die Bäume am Schluss wachsen aus dem Boden */
    .treeline-close { transform-origin: 50% 100%; animation: grow-up var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% cover 40%; }
    /* Der große WhatsApp-Knopf winkt einmal, wenn der Kontakt erscheint */
    .btn-big { animation: beckon ease-out both; animation-timeline: view(); animation-range: entry 60% cover 40%; }

    /* Mehr Leben, nur mit transform/opacity (läuft auf der Grafikkarte):
       Ziffern und Leistungszeichen springen auf, Karten und Kontaktzeilen kommen nacheinander,
       die Bilderrahmen treiben beim Scrollen leicht gegeneinander. */
    .step-n, .season-now { animation: pop var(--ease-out) both; animation-timeline: view(); animation-range: entry 30% cover 30%; }
    .service-mark { animation: mark-in var(--ease-out) both; animation-timeline: view(); animation-range: entry 20% cover 30%; }
    .more li:nth-child(2), .contact-alt li:nth-child(2) { animation-range: entry 6% entry 76%; }
    .more li:nth-child(3), .contact-alt li:nth-child(3) { animation-range: entry 12% entry 82%; }
    .more li:nth-child(4) { animation-range: entry 18% entry 88%; }
    .more li:nth-child(5) { animation-range: entry 24% entry 94%; }
    .frame { --drift: 14px; animation: rise var(--ease-out) both, drift linear both; animation-timeline: view(), view(); animation-range: entry 0% entry 70%, cover 0% cover 100%; }
    .frame-2 { --drift: 26px; animation-range: entry 8% entry 78%, cover 0% cover 100%; }
    .frame-3 { --drift: 8px; animation-range: entry 16% entry 86%, cover 0% cover 100%; }
  }
}

/* ---------- Glas-Kopfzeile: nur Desktop mit Maus ----------
   Handys, Touch-Geräte und wer weniger Transparenz wünscht, behalten die feste, statische Kopfzeile.
   Text bleibt Creme auf mindestens 82 % Forest (> 6:1). */
@media (min-width: 900px) and (hover: hover) and (pointer: fine) {
  html { scroll-padding-top: 96px; }
  .top { position: sticky; top: 0; }
  @media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: scroll()) {
      .top { animation: header-settle linear both; animation-timeline: scroll(root); animation-range: 0 120px; }
      /* Oben deckend (sonst schiene der weiße Seitengrund durch), erst über dem Inhalt wird sie zu Glas */
      @supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
        .top { -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); animation-name: header-glass; }
        /* Wer weniger Transparenz wünscht, behält die deckende Kopfzeile */
        @media (prefers-reduced-transparency: reduce) {
          .top { -webkit-backdrop-filter: none; backdrop-filter: none; animation-name: header-settle; }
        }
      }
    }
  }
}
@keyframes header-glass {
  from { background-color: var(--mek-forest); box-shadow: 0 0 0 0 transparent; }
  to { background-color: rgb(20 48 31 / 0.82); box-shadow: 0 10px 30px -18px rgb(20 48 31 / 0.6); }
}

/* ---------- Breiten ---------- */
@media (max-width: 1099px) {
  .now-card { width: 300px; }
}

@media (max-width: 899px) {
  .nav { display: none; }
  .mnav { display: block; }
  .mnav > summary { display: inline-flex; align-items: center; gap: var(--mek-space-2); min-height: 48px; padding: 0 var(--mek-space-4); border: 2px solid var(--mek-cream); border-radius: var(--mek-radius-md); color: var(--mek-cream); font-weight: 500; cursor: pointer; list-style: none; transition: background-color 200ms ease, color 200ms ease; }
  .mnav > summary::-webkit-details-marker { display: none; }
  .mnav-icon { position: relative; width: 18px; height: 2px; background: currentColor; transition: background-color 200ms ease; }
  .mnav-icon::before, .mnav-icon::after { content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: currentColor; transition: translate 220ms var(--ease-out), rotate 220ms var(--ease-out); }
  .mnav-icon::before { translate: 0 -6px; }
  .mnav-icon::after { translate: 0 6px; }
  .mnav[open] > summary { background: var(--mek-cream); color: var(--mek-forest); }
  .mnav[open] .mnav-icon { background: transparent; }
  .mnav[open] .mnav-icon::before { translate: 0 0; rotate: 45deg; }
  .mnav[open] .mnav-icon::after { translate: 0 0; rotate: -45deg; }
  .mnav-panel { position: absolute; left: 0; right: 0; top: 100%; padding: var(--mek-space-2) var(--gutter) var(--mek-space-6); background: var(--mek-forest); border-top: 1px solid var(--mek-green); box-shadow: 0 24px 40px -24px rgb(20 48 31 / 0.5); }
  .mnav-panel ul { display: grid; }
  .mnav-panel li + li { border-top: 1px solid var(--mek-green); }
  .mnav-panel a:not(.btn) { display: flex; align-items: center; min-height: 56px; color: var(--mek-cream); font-size: var(--mek-fs-lg); font-weight: 500; text-decoration: none; }
  .mnav-wa { width: 100%; margin-top: var(--mek-space-4); }

  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .now-card { width: 100%; max-width: 420px; }
  .section-head, .more { grid-template-columns: minmax(0, 1fr); gap: var(--mek-space-4); }
  .seasons { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .soon-grid, .area-layout { grid-template-columns: minmax(0, 1fr); gap: var(--mek-space-6); }
  .about-facts { grid-template-columns: minmax(0, 1fr); gap: var(--mek-space-4); }
  .faq-grid { grid-template-columns: minmax(0, 1fr); }
  .contact-grid { grid-template-columns: minmax(0, 1fr); gap: var(--mek-space-6); }
  .foot-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mek-space-6); }
  .foot-brand { grid-column: 1 / -1; }

  /* Schritte untereinander: jeder Schritt zeichnet seine eigene Verbindung zur nächsten Ziffer */
  .steps { grid-template-columns: minmax(0, 1fr); gap: var(--mek-space-5); }
  .steps::before { display: none; }
  .step { grid-template-columns: 48px minmax(0, 1fr); column-gap: var(--mek-space-4); }
  .step-n { grid-row: 1 / span 2; margin-bottom: 0; }
  .step:not(:last-child)::after { content: ""; position: absolute; left: 23px; top: 48px; bottom: calc(-1 * var(--mek-space-5)); width: 2px; background: var(--mek-line); }

  /* Platz für die Anrufleiste, in der Farbe der Fußzeile */
  body:has(.callbar) .foot { padding-bottom: 72px; }
  .callbar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--mek-space-2); position: fixed; inset: auto 0 0 0; z-index: 10; padding: var(--mek-space-2) var(--gutter); padding-bottom: calc(var(--mek-space-2) + env(safe-area-inset-bottom)); background: var(--mek-forest); border-top: 1px solid var(--mek-green); }
  .callbar a { display: flex; align-items: center; justify-content: center; gap: var(--mek-space-2); min-height: 52px; border-radius: var(--mek-radius-md); font-weight: 500; text-decoration: none; color: var(--mek-cream); border: 2px solid var(--mek-cream); --focus: var(--mek-leaf); transition: transform 160ms var(--ease-out); }
  .callbar a:active { transform: scale(0.97); }
  .callbar .callbar-wa { background: var(--mek-cream); color: var(--mek-forest); }
}
@media (max-width: 899px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .step:not(:last-child)::after { transform-origin: top; animation: grow-y var(--ease-out) both; animation-timeline: view(); animation-range: entry 20% cover 50%; }
  }
}

@media (max-width: 599px) {
  :root { --gutter: var(--mek-space-4); }
  .top-inner { padding-block: var(--mek-space-3); }
  .brand img { width: 200px; }
  .hero { padding-top: var(--mek-space-6); }
  .page-hero { padding-top: var(--mek-space-7); }
  .lettering { font-size: var(--mek-fs-2xl); }
  .lettering a { padding-block: 7px; }   /* 44-px-Ziel auf dem Handy */
  .lettering a::after { display: none; }
  .lettering-place { font-size: var(--mek-fs-lg); }
  .hero-lead { font-size: var(--mek-fs-base); }
  .now-card { padding: var(--mek-space-4); }
  .now-season { grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: var(--mek-space-4); }
  .now-art { margin-bottom: 0; }
  .now-text { gap: var(--mek-space-2); }
  .now-title { font-size: var(--mek-fs-lg); }
  .now-card ul { font-size: var(--mek-fs-sm); }
  .treeline { height: 88px; }
  .band-actions, .band-actions .btn { width: 100%; }
  .band-phone { width: 100%; justify-content: center; }

  .section { padding-block: var(--mek-space-8); }
  .section-head { margin-bottom: var(--mek-space-6); }
  .section-head h2, .area-text h2, .soon-text h2, .process-title, .faq h2 { font-size: var(--mek-fs-xl); }
  .service { grid-template-columns: 48px minmax(0, 1fr); gap: var(--mek-space-4); align-items: start; }
  .service-mark { width: 48px; height: 48px; }
  .service-mark .icon { width: 26px; height: 26px; }
  .service-season { grid-column: 2; justify-self: start; }
  .season h3 { font-size: var(--mek-fs-lg); }
  .season-art { margin-top: var(--mek-space-2); max-width: 128px; }
  /* Jahreszeiten als wischbarer Streifen statt vier gestapelter Karten */
  .seasons { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 82%; gap: var(--mek-space-3); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); margin-inline: calc(-1 * var(--gutter)); padding: var(--mek-space-2) var(--gutter) var(--mek-space-4); overscroll-behavior-x: contain; scrollbar-width: thin; scrollbar-color: var(--mek-green) var(--mek-line); }
  .season { scroll-snap-align: start; min-height: 0; }
  .season.is-now { outline-offset: -3px; }
  .frames { height: 240px; }
  .about-statement { font-size: var(--mek-fs-2xl); }
  .about-lead { font-size: var(--mek-fs-base); }
  .faq-item summary { font-size: var(--mek-fs-base); }
  .contact { padding-block: var(--mek-space-8); }
  .contact h2 { font-size: var(--mek-fs-2xl); }
  .btn-big { width: 100%; }
  .foot-grid { grid-template-columns: minmax(0, 1fr); gap: var(--mek-space-5); padding-block: var(--mek-space-7) var(--mek-space-5); }

  .page-title { font-size: var(--mek-fs-2xl); }
  .page-lead { font-size: var(--mek-fs-base); }
  .page-body { padding-block: var(--mek-space-7) var(--mek-space-8); }
}

@media (max-width: 599px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .seasons { animation: rise var(--ease-out) both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
    .seasons .season { animation: card-in linear both, card-out linear both; animation-timeline: view(inline), view(inline); animation-range: entry 0% entry 100%, exit 0% exit 100%; }
  }
}

@media (max-width: 429px) {
  .lettering { font-size: var(--mek-fs-xl); line-height: 1.2; }
}

/* ---------- Weniger Bewegung: nichts bewegt sich, alles ist sichtbar ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition-property: color, background-color, border-color, opacity !important; }
  .btn:active, .callbar a:active { transform: none; }
  .faq-item::details-content { transition: none; }
  .motion-toggle { display: none; }
}