/* ============================================================
   FRÜCHTE À LA CARTE — „Marktfrische"
   Hell, frisch, einladend, edel. Farbwelt der Bestellapp:
   Marken-Grün #1E5C28 (die EINE Wahrheit, wie App primaryBtn),
   warmes Creme, weiße Karten, weiche Radien und Schatten.
   Markenrot #AF1F2B nur im Logo + sparsamen Akzenten.
   ============================================================ */

/* ---------- Fonts (self-hosted, variable) ---------- */
@font-face {
  font-family: 'Fraunces';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/fraunces-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Fraunces';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('../assets/fonts/fraunces-italic-var.woff2') format('woff2');
}
@font-face {
  font-family: 'Archivo';
  font-style: normal;
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-display: swap;
  src: url('../assets/fonts/archivo-var.woff2') format('woff2');
}
/* Metrik-abgestimmte Fallbacks — kein Hero-Sprung beim Font-Swap */
@font-face {
  font-family: 'Fraunces-fallback';
  src: local('Georgia');
  size-adjust: 104%;
  ascent-override: 92%;
  descent-override: 24%;
}
@font-face {
  font-family: 'Archivo-fallback';
  src: local('Arial');
  size-adjust: 99%;
}

/* ---------- Design-Tokens ---------- */
:root {
  /* Grund (Markt am Morgen) — warmes Creme, Richtung „Serenade" (Allies-Studio-Referenz) */
  --bg: #F9F6EE; --bg-deep: #F2EDE2;
  --surface: #FFFFFF; --surface-2: #FBFAF7;
  --line: #E5E0D8; --line-strong: #D2CCC0; /* App-Kartenborder */
  /* Text */
  --text: #1F241D; --text-dim: #5C635A;
  /* Marke */
  --gruen: #1E5C28;          /* App-BRAND — Buttons, Akzente, Eyebrows */
  --gruen-dunkel: #17471F;   /* Hover / Verläufe */
  --gruen-nacht: #12301A;    /* Footer-Grund */
  --gruen-hell: #EAF1E4;     /* Tint-Flächen */
  --rot: #AF1F2B;            /* Markenrot — Logo, sparsame Akzente */
  /* Saison-Accents (3b) — dunkel genug für Creme-Grund */
  --saison-fruehjahr: #4E8F3A; --saison-sommer: #C65B44;
  --saison-herbst: #B27A1E; --saison-winter: #4E8B7E;
  /* Schatten — weich, gemütlich */
  --shadow-s: 0 2px 10px rgba(31, 36, 29, .06);
  --shadow-m: 0 12px 32px rgba(31, 36, 29, .10);
  --shadow-l: 0 24px 60px rgba(31, 36, 29, .14);
  /* Typo-Skala (fluid) */
  --fs-display: clamp(2.75rem, 7vw, 6rem);
  --fs-h2: clamp(2rem, 4.5vw, 3.5rem);
  --fs-h3: clamp(1.375rem, 2.2vw, 1.75rem);
  --fs-lead: clamp(1.125rem, 1.5vw, 1.375rem);
  --fs-body: 1.0625rem; --lh-body: 1.65;
  --fs-eyebrow: .8125rem;
  --fs-menu-item: clamp(1.5rem, 3vw, 2.5rem);
  /* Spacing / Radius / Breiten — Radien wie die App (8/10/12), Karten 14 */
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-6:1.5rem;
  --sp-8:2rem; --sp-12:3rem; --sp-16:4rem; --sp-24:6rem;
  --sect-y: clamp(5rem, 13vh, 9rem);
  --r-s:8px; --r-m:14px; --r-l:24px; --r-btn:12px; --r-pill:999px;
  --maxw:76rem; --maxw-text:42rem;
  /* Motion */
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-soft: cubic-bezier(.33,1,.68,1);
  --font-serif: 'Fraunces', 'Fraunces-fallback', Georgia, serif;
  --font-sans: 'Archivo', 'Archivo-fallback', Arial, sans-serif;
}

/* ---------- Basis ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg); color: var(--text);
  font-family: var(--font-sans);
  font-size: var(--fs-body); line-height: var(--lh-body);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
img, svg { max-width: 100%; height: auto; display: block; }
/* Feines Papier-Korn über der ganzen Seite — macht das Creme „handfest" statt steril.
   Statisch (kein Motion), pointer-events none, unter dem Header (z-index 100). */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 99; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: .028; mix-blend-mode: multiply;
}
@media print { body::before { display: none; } }
a { color: var(--gruen); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--gruen-dunkel); }
h1, h2, h3, blockquote { font-family: var(--font-serif); font-weight: 400; line-height: 1.12; color: var(--text); }
h2 { font-size: var(--fs-h2); font-variation-settings: "opsz" 100; letter-spacing: -.01em; }
h3 { font-size: var(--fs-h3); }
em, i { font-style: italic; }
::selection { background: rgba(30,92,40,.85); color: #fff; }

:focus-visible { outline: 2px solid var(--gruen); outline-offset: 3px; border-radius: 2px; }
/* Auf Grün-Flächen wäre der grüne Ring unsichtbar — dort Weiß (8:1 bzw. 14:1) */
.portal-panel :focus-visible, .site-footer :focus-visible { outline-color: #fff; }

.skip-link {
  position: absolute; left: var(--sp-4); top: -100px; z-index: 200;
  background: var(--surface); color: var(--text);
  padding: var(--sp-3) var(--sp-6); border-radius: var(--r-s);
  border: 1px solid var(--line-strong); text-decoration: none;
  box-shadow: var(--shadow-m);
}
.skip-link:focus { top: var(--sp-4); }

.wrap { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(1.25rem, 4vw, 3rem); }
section { padding-block: var(--sect-y); scroll-margin-top: 4rem; }

.eyebrow {
  font-size: var(--fs-eyebrow); text-transform: uppercase;
  letter-spacing: .18em; font-variation-settings: "wdth" 125;
  font-weight: 600; color: var(--gruen);
  display: block; margin-bottom: var(--sp-4);
}
.lead { font-size: var(--fs-lead); color: var(--text-dim); max-width: var(--maxw-text); }
.num { font-variant-numeric: tabular-nums; }

/* ---------- Buttons — wie die App: Grün, satt, freundliche Radien ---------- */
.btn {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  font-family: var(--font-sans); font-weight: 600; font-size: 1rem;
  padding: .85em 1.6em; border-radius: var(--r-btn);
  text-decoration: none; cursor: pointer; border: 0;
  transition: transform .35s var(--ease-out), box-shadow .3s ease, background-color .3s ease, border-color .3s ease, color .3s ease;
}
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.98); transition-duration: .1s; }
.btn-glut { /* Klassenname bleibt (Markup), Look = App-primaryBtn */
  color: #fff; background: var(--gruen);
  box-shadow: var(--shadow-s);
}
.btn-glut:hover, .btn-glut:focus-visible {
  color: #fff; background: var(--gruen-dunkel); box-shadow: var(--shadow-m);
}
.btn-ghost {
  color: var(--text); background: var(--surface);
  border: 1px solid var(--line-strong);
}
.btn-ghost:hover, .btn-ghost:focus-visible { border-color: var(--gruen); color: var(--gruen); }

/* ============================================================
   0 · Header — hell, ruhig, mit echtem Logo
   ============================================================ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  transition: background .3s ease, border-color .3s ease, box-shadow .3s ease, backdrop-filter .3s ease;
  border-bottom: 1px solid transparent;
  background: transparent;
}
.site-header.scrolled {
  background: rgba(247,245,239,.88);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom-color: var(--line);
  box-shadow: var(--shadow-s);
}
.header-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-6); min-height: 5.5rem;
}
.brand {
  display: flex; align-items: center; gap: var(--sp-3);
  text-decoration: none; color: var(--text);
}
/* Die Wortmarke pur (ohne Granatapfel) — volle Höhe für die Schreibschrift */
.brand-logo { height: 3.5rem; width: auto; display: block; }
.main-nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2.25rem); }
.main-nav a:not(.btn) {
  color: var(--text); text-decoration: none; font-size: .95rem; font-weight: 500;
}
.main-nav a:not(.btn):hover { color: var(--gruen); }
.main-nav .btn { padding: .6em 1.3em; font-size: .9rem; }
.nav-toggle {
  display: none; background: var(--surface); border: 1px solid var(--line-strong);
  border-radius: var(--r-s); color: var(--text);
  width: 2.75rem; height: 2.75rem; cursor: pointer;
  font-size: 1.2rem; line-height: 1;
}
.call-pill { display: none; }

/* ============================================================
   1 · Hero — hell, einladend, ruhige Bildkarte
   ============================================================ */
.hero {
  min-height: 92svh;
  display: grid; align-items: center;
  position: relative; overflow: clip;
  background:
    radial-gradient(60% 50% at 85% 8%, rgba(30,92,40,.07) 0%, transparent 70%),
    linear-gradient(180deg, var(--bg-deep) 0%, var(--bg) 55%);
  padding-block: clamp(7rem, 16vh, 9rem) var(--sp-16);
}
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  align-items: center; gap: clamp(2rem, 5vw, 4rem);
  position: relative; z-index: 2;
}
.hero h1 {
  font-size: var(--fs-display);
  font-variation-settings: "opsz" 144, "WONK" 0;
  font-weight: 420; line-height: 1.04; letter-spacing: normal;
}
.hero h1 em { color: var(--gruen); }
.hero h1 .line { display: block; overflow: clip; padding-block: .06em; }
.hero h1 .line > span {
  display: block;
  transform: translateY(110%);
  transition: transform .9s var(--ease-out);
}
.hero h1 .line:nth-child(2) > span { transition-delay: .12s; }
.hero.is-in h1 .line > span { transform: translateY(0); }
/* Ohne JS: Hero komplett sichtbar (is-in kommt nie) */
.no-js .hero h1 .line > span { transform: none; }
.no-js .hero-copy > .sub, .no-js .hero-copy > .hero-cta, .no-js .hero-copy > .hero-trust,
.no-js .hero-bild { opacity: 1; transform: none; }
.hero .sub {
  margin-top: var(--sp-6); max-width: var(--maxw-text);
  font-size: var(--fs-lead); color: var(--text-dim);
}
.hero-cta { display: flex; flex-wrap: wrap; gap: var(--sp-4); margin-top: var(--sp-8); }
.hero-trust {
  margin-top: var(--sp-6); font-size: .875rem; color: var(--text-dim);
}
.hero-copy > .sub, .hero-copy > .hero-cta, .hero-copy > .hero-trust {
  opacity: 0; transform: translateY(18px);
  transition: opacity .7s var(--ease-soft) var(--d, .4s), transform .7s var(--ease-out) var(--d, .4s);
}
.hero-copy > .sub { --d: .3s; }
.hero-copy > .hero-cta { --d: .45s; }
.hero-copy > .hero-trust { --d: .6s; }
.hero.is-in .hero-copy > .sub,
.hero.is-in .hero-copy > .hero-cta,
.hero.is-in .hero-copy > .hero-trust { opacity: 1; transform: none; }

/* Bildkarte: dunkles Food-Foto als edles Fenster auf hellem Grund */
.hero-bild {
  position: relative; justify-self: center;
  width: min(40vw, 30rem);
  opacity: 0; transform: translateY(24px) rotate(2deg);
  transition: opacity .9s var(--ease-soft) .35s, transform 1.1s var(--ease-out) .35s;
}
.hero.is-in .hero-bild { opacity: 1; transform: rotate(2deg); }
.hero-bild img {
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: var(--r-l);
  box-shadow: var(--shadow-l);
}
.hero-bild::after { /* feine Kante als Rahmen */
  content: ""; position: absolute; inset: -1px; border-radius: var(--r-l);
  border: 1px solid rgba(31,36,29,.08); pointer-events: none;
}

.scroll-cue {
  position: absolute; left: 50%; bottom: var(--sp-8); z-index: 3;
  width: 1px; height: 48px; background: var(--line-strong);
  transform-origin: top;
  opacity: 0;
  animation: cue-puls 2.4s ease-in-out 1.8s infinite;
}
@keyframes cue-puls { 0%,100% { transform: scaleY(.35); opacity:.5; } 50% { transform: scaleY(1); opacity:1; } }

/* ============================================================
   2 · Marquee — feines Band, Liefergebiet
   ============================================================ */
.marquee {
  border-block: 1px solid var(--line);
  background: var(--surface-2);
  padding-block: var(--sp-4); overflow: clip;
  position: relative;
}
.marquee-pause { /* WCAG 2.2.2: anhaltbar auch ohne Maus-Hover */
  position: absolute; right: var(--sp-3); top: 50%; translate: 0 -50%; z-index: 2;
  width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--surface); border: 1px solid var(--line-strong);
  color: var(--text-dim); font-size: .8rem; line-height: 1; cursor: pointer;
}
.marquee-pause:hover { color: var(--gruen); border-color: var(--gruen); }
.marquee.paused .marquee-track { animation-play-state: paused; }
.marquee-track {
  display: flex; width: max-content;
  animation: marquee-lauf 45s linear infinite;
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.05rem, 1.6vw, 1.35rem); color: var(--text-dim);
  white-space: nowrap;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track > span { display: inline-block; }
@keyframes marquee-lauf { to { transform: translateX(-50%); } }

/* ============================================================
   3 · Sortiment — Menükarte (helle Liste, dunkle Bild-Fenster)
   ============================================================ */
.menu-head { max-width: var(--maxw-text); margin-bottom: var(--sp-12); }
.menu-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: start;
}
.menu-list { list-style: none; }
.menu-row {
  width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  color: inherit; font: inherit;
  display: block; padding: var(--sp-6) 0 var(--sp-6) 0;
  border-bottom: 1px solid var(--line);
  position: relative;
  transition: transform .3s ease;
}
.menu-row::after { /* grüne Hairline unter aktiver Zeile */
  content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 100%;
  background: var(--gruen);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.16,1,.3,1);
}
.menu-row.is-active { transform: translateX(8px); }
.menu-row.is-active::after { transform: scaleX(1); }
.menu-row-top { display: flex; align-items: baseline; gap: var(--sp-4); }
.menu-name {
  font-family: var(--font-serif); font-size: var(--fs-menu-item);
  line-height: 1.1; font-variation-settings: "opsz" 60;
  transition: color .3s ease;
}
.menu-row.is-active .menu-name { color: var(--gruen); }
.menu-copy { margin-top: var(--sp-2); color: var(--text-dim); max-width: 34rem; font-size: .98rem; }
.menu-foot { margin-top: var(--sp-12); display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-6); }
.menu-foot p { color: var(--text-dim); max-width: 30rem; font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; }

.menu-stage { position: sticky; top: 6rem; }
.menu-frame {
  position: relative; aspect-ratio: 4 / 5;
  border-radius: var(--r-l); overflow: clip;
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-m);
}
.menu-img {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity .5s ease;
}
.menu-img.is-active { opacity: 1; }
/* Mikro-Ken-Burns: Bild setzt sich beim Einblenden minimal */
.menu-img .slot, .menu-img img { transform: scale(1.06); transition: transform 1.4s var(--ease-out); }
.menu-img.is-active .slot, .menu-img.is-active img { transform: scale(1); }
.menu-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.menu-img figcaption {
  position: absolute; left: var(--sp-6); bottom: var(--sp-6);
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.1rem; color: #fff;
  text-shadow: 0 1px 12px rgba(0,0,0,.7);
}

/* Bild-Platzhalter: helle Stillleben-Kompositionen */
.slot { width: 100%; height: 100%; }
.slot-beeren { background:
  radial-gradient(38% 30% at 62% 58%, rgba(175,31,43,.55), rgba(175,31,43,.12) 60%, transparent 75%),
  radial-gradient(22% 18% at 40% 68%, rgba(120,20,60,.4), transparent 70%),
  linear-gradient(180deg, #2A2320, #1B1714 80%); }
.slot-kraeuter { background:
  radial-gradient(40% 34% at 55% 60%, rgba(110,170,80,.5), rgba(30,92,40,.3) 55%, transparent 75%),
  radial-gradient(18% 30% at 38% 52%, rgba(126,181,92,.35), transparent 70%),
  linear-gradient(180deg, #23281E, #151812 80%); }
.slot-pilze { background:
  radial-gradient(36% 26% at 58% 62%, rgba(190,150,100,.55), rgba(120,90,55,.2) 60%, transparent 78%),
  radial-gradient(20% 14% at 40% 70%, rgba(230,210,180,.3), transparent 70%),
  linear-gradient(180deg, #282219, #181410 80%); }
.slot-exoten { background:
  radial-gradient(34% 28% at 60% 58%, rgba(235,160,60,.6), rgba(200,90,40,.22) 60%, transparent 78%),
  radial-gradient(16% 20% at 42% 66%, rgba(196,87,74,.4), transparent 70%),
  linear-gradient(180deg, #2A2118, #191310 80%); }
.slot-regional { background:
  radial-gradient(30% 24% at 44% 60%, rgba(175,31,43,.4), transparent 72%),
  radial-gradient(26% 22% at 64% 64%, rgba(110,170,80,.4), transparent 72%),
  linear-gradient(180deg, #262419, #171612 80%); }

/* ============================================================
   3b · Saisonkalender — flache Kalenderleisten
   ============================================================ */
.season-head { max-width: var(--maxw-text); margin-bottom: var(--sp-12); }
.season-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); }
/* Bewusst KEINE Karte (Kunden-Karten folgen direkt darunter): flache Kalenderleiste,
   nur Accent-Linie oben — vier Jahreszeiten als Farbreihe. Kein Hover, nichts animiert. */
.season-card {
  border-top: 3px solid var(--accent, var(--line-strong));
  padding-top: var(--sp-6);
}
.season-months {
  display: block; margin-bottom: var(--sp-3);
  font-size: var(--fs-eyebrow); text-transform: uppercase;
  letter-spacing: .14em; font-variation-settings: "wdth" 125;
  font-weight: 600; color: var(--text-dim);
  min-height: calc(2em * var(--lh-body)); /* 2 Zeilen reserviert — Saisonnamen fluchten über alle 4 Karten */
}
@media (max-width: 960px) { .season-months { min-height: 0; } }
.season-card h3 { margin-bottom: var(--sp-3); }
.season-card p { color: var(--text-dim); font-size: .98rem; }
.season-foot {
  margin-top: var(--sp-12); max-width: 34rem;
  font-family: var(--font-serif); font-style: italic;
  font-size: 1.15rem; color: var(--text-dim);
}

/* ============================================================
   4 · Für wen wir arbeiten — weiße Karten wie die App
   ============================================================ */
.clients-head { max-width: var(--maxw-text); margin-bottom: var(--sp-12); }
.client-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-6);
}
.client-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: var(--sp-8);
  box-shadow: var(--shadow-s);
  transition: transform .45s var(--ease-out), border-color .35s ease, box-shadow .45s ease;
}
.client-card:hover {
  transform: translateY(-5px);
  border-color: var(--line-strong);
  box-shadow: var(--shadow-m);
}
.client-no {
  display: block; margin-bottom: var(--sp-4);
  font-family: var(--font-serif); font-style: italic;
  font-size: 2rem; line-height: 1; color: var(--gruen);
  transition: transform .45s var(--ease-out);
}
.client-card:hover .client-no { transform: translateY(-3px); }
.client-card h3 { margin-bottom: var(--sp-3); }
.client-card p { color: var(--text-dim); font-size: .98rem; }

/* ============================================================
   5 · Frische-Ablauf — Timeline in Grün
   ============================================================ */
.timeline-head { max-width: var(--maxw-text); margin-bottom: var(--sp-12); }
.timeline { position: relative; max-width: 46rem; }
.timeline::before { /* Grundlinie */
  content: ""; position: absolute; left: .4375rem; top: .5rem; bottom: .5rem;
  width: 2px; background: var(--line);
}
.timeline-fill { /* grüne Füllung, wächst mit Scroll */
  position: absolute; left: .4375rem; top: .5rem; bottom: .5rem; width: 2px;
  background: linear-gradient(var(--gruen), var(--gruen)) no-repeat;
  background-size: 100% var(--p, 0%);
}
@supports (animation-timeline: view()) {
  .timeline-fill {
    animation: linie-gruen linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 70%;
  }
  @keyframes linie-gruen { from { background-size: 100% 0%; } to { background-size: 100% 100%; } }
}
.station {
  position: relative; padding-left: var(--sp-12); padding-block: var(--sp-6);
}
.station::before { /* Marker */
  content: ""; position: absolute; left: 0; top: 2.1rem;
  width: 1rem; height: 1rem; border-radius: 50%;
  border: 2px solid var(--line-strong); background: var(--bg);
  transition: border-color .4s ease, background .4s ease, box-shadow .4s ease, transform .5s var(--ease-out);
}
.station.is-active::before {
  border-color: var(--gruen); background: var(--gruen);
  box-shadow: 0 0 0 5px var(--gruen-hell);
  transform: scale(1.1);
}
.station-time { /* Phasen-Label statt Uhrzeit — echte Zeiten folgen, wenn bestätigt */
  font-weight: 600; text-transform: uppercase;
  font-size: .8125rem; letter-spacing: .14em; color: var(--text-dim);
  font-variation-settings: "wdth" 125;
}
.station.is-active .station-time { color: var(--gruen); }
.station h3 { margin-block: var(--sp-2) var(--sp-2); }
.station.is-active h3 { font-weight: 560; }
.station p { color: var(--text-dim); max-width: 34rem; }
.timeline-img {
  margin-top: var(--sp-12);
  max-width: 46rem; /* Spaltenflucht mit der Timeline — kein Vollbreite-Loch */
  aspect-ratio: 16 / 9; border-radius: var(--r-l); overflow: clip;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-m);
}
.timeline-img img { width: 100%; height: 100%; object-fit: cover; }
/* Heller Platzhalter im Marktfrische-Stil — bis Orhans echtes Tour-Foto kommt */
.slot-tour { background:
  radial-gradient(60% 45% at 30% 68%, rgba(30,92,40,.14), transparent 75%),
  radial-gradient(28% 22% at 72% 40%, rgba(175,31,43,.07), transparent 75%),
  linear-gradient(180deg, #FFFFFF 0%, var(--gruen-hell) 100%); }
.timeline-quote {
  margin-top: var(--sp-12);
  font-family: var(--font-serif); font-style: italic;
  font-size: clamp(1.25rem, 2.2vw, 1.75rem); line-height: 1.4;
  max-width: 38rem; color: var(--text);
  border-left: 3px solid var(--gruen); padding-left: var(--sp-6);
}

/* ============================================================
   6 · Bestellportal — tiefgrünes Panel wie der App-Header
   ============================================================ */
.portal-panel {
  --text-dim: #C9D6C6; /* Sekundärton auf Tiefgrün: AA-fest */
  background: linear-gradient(135deg, var(--gruen), var(--gruen-dunkel));
  border-radius: var(--r-l);
  padding: clamp(2rem, 6vw, 5rem);
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: var(--sp-12); align-items: center;
  overflow: clip; position: relative;
  box-shadow: var(--shadow-l);
}
.portal-panel h2, .portal-panel .lead { color: #fff; }
.portal-panel .eyebrow { color: #A9D293; }
.portal-copy h2 { margin-bottom: var(--sp-6); }
.portal-bullets { list-style: none; margin-block: var(--sp-6); display: grid; gap: var(--sp-3); }
.portal-bullets li { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--text-dim); }
.portal-bullets li strong { color: #fff; font-weight: 600; }
.portal-bullets .check { color: #A9D293; flex: none; line-height: var(--lh-body); }
.portal-panel .btn-glut { /* auf Grün: weißer Button, grüner Text — wie App-Ghost invertiert */
  background: #fff; color: var(--gruen);
}
.portal-panel .btn-glut:hover, .portal-panel .btn-glut:focus-visible {
  background: var(--gruen-hell); color: var(--gruen-dunkel);
}
.portal-note { margin-top: var(--sp-4); font-size: .9rem; color: var(--text-dim); }
.portal-note a { color: #fff; }
.portal-phone-wrap { position: relative; justify-self: center; }
.portal-phone {
  position: relative; width: min(16rem, 60vw); aspect-ratio: 390 / 844;
  border-radius: 2.2rem; border: 1px solid rgba(255,255,255,.25);
  background: #F4F2EC; overflow: clip;
  transform: rotate(4deg);
  box-shadow: 0 30px 80px rgba(10,26,13,.45);
}
/* Portal-Screenshot-Platzhalter: skizzierte Bestell-App (hell, wie das echte Portal) */
.phone-ui { padding: 14% 8% 8%; display: grid; gap: .6rem; height: 100%; align-content: start; }
.phone-ui .ui-head { height: 1.6rem; border-radius: .4rem; background: var(--gruen); }
.phone-ui .ui-row { height: 2.6rem; border-radius: .5rem; background: #fff; border: 1px solid #E5E0D8; position: relative; }
.phone-ui .ui-row::after { content: ""; position: absolute; right: .6rem; top: 50%; translate: 0 -50%; width: 1.4rem; height: 1.4rem; border-radius: .35rem; background: rgba(30,92,40,.18); }
.phone-ui .ui-cta { height: 2.4rem; border-radius: var(--r-btn); background: var(--gruen); margin-top: .4rem; }

/* ============================================================
   7 · Über uns
   ============================================================ */
.about-grid {
  display: grid; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: center;
}
/* Westerwald-Galerie: 4 Motive im ruhigen Crossfade (nur opacity, 24s Zyklus) */
.about-img {
  aspect-ratio: 4 / 3; border-radius: var(--r-l); overflow: clip;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-m);
  position: relative;
}
.about-img img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  opacity: 0; animation: ww-fade 24s ease-in-out infinite;
}
.about-img img:nth-child(1) { animation-name: ww-fade-erstes; }
.about-img img:nth-child(2) { animation-delay: 6s; }
.about-img img:nth-child(3) { animation-delay: 12s; }
.about-img img:nth-child(4) { animation-delay: 18s; }
@keyframes ww-fade { /* 6s Fenster pro Bild: 1s einblenden, 5s stehen */
  0% { opacity: 0; } 4% { opacity: 1; } 25% { opacity: 1; } 33% { opacity: 0; } 100% { opacity: 0; }
}
@keyframes ww-fade-erstes { /* erstes Bild: sofort sichtbar, am Zyklusende wieder da */
  0% { opacity: 1; } 25% { opacity: 1; } 33% { opacity: 0; } 92% { opacity: 0; } 100% { opacity: 1; }
}
/* Heller Platzhalter — bis Orhans Über-uns-Foto (Orhan + Resul) kommt */
.slot-haende { background:
  radial-gradient(46% 34% at 55% 45%, rgba(230,190,150,.3), transparent 70%),
  radial-gradient(30% 24% at 48% 62%, rgba(30,92,40,.1), transparent 72%),
  linear-gradient(180deg, #FFFFFF, var(--bg-deep) 85%); }
.about-copy p + p { margin-top: var(--sp-4); }
.about-copy p { color: var(--text-dim); max-width: var(--maxw-text); }
.about-copy h2 { margin-bottom: var(--sp-6); }
.values { list-style: none; margin-top: var(--sp-8); display: grid; gap: var(--sp-4); }
.values li { display: flex; gap: var(--sp-4); align-items: baseline; }
.values .roman {
  font-family: var(--font-serif); font-style: italic; color: var(--gruen);
  min-width: 2rem; font-size: 1.1rem;
}
.values strong { font-weight: 600; }
.values span.txt { color: var(--text-dim); }

/* ============================================================
   8 · Kontakt — auf sanftem Creme-Wechsel
   ============================================================ */
.contact { background: var(--bg-deep); }
.contact h2 { max-width: 50rem; margin-bottom: var(--sp-12); }
.contact-grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(2rem, 5vw, 5rem);
}
.contact-block address { font-style: normal; }
.contact-block p { margin-bottom: var(--sp-4); color: var(--text-dim); }
.contact-lines { display: grid; gap: var(--sp-2); margin-top: var(--sp-6); }
.contact-lines a { font-variant-numeric: tabular-nums; text-decoration: none; }
.contact-lines a:hover { text-decoration: underline; }
.contact-lines .label { color: var(--text-dim); display: inline-block; min-width: 6rem; }
.delivery-area { margin-top: var(--sp-8); }
.delivery-area h3 { font-size: 1.15rem; margin-bottom: var(--sp-3); }
.delivery-area p { color: var(--text-dim); }

.contact-form {
  display: grid; gap: var(--sp-4);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--r-m); padding: clamp(1.25rem, 3vw, 2rem);
  box-shadow: var(--shadow-s);
}
/* Ohne JS: Formular verstecken (Submit würde Daten als GET-Query leaken), mailto-Hinweis zeigen */
.no-js .contact-form { display: none; }
.no-js-note { display: none; }
.no-js .no-js-note { display: block; }
.form-row { display: grid; gap: var(--sp-4); grid-template-columns: 1fr 1fr; }
.field { display: grid; gap: var(--sp-2); }
.field label { font-size: .875rem; font-weight: 600; color: var(--text-dim); }
.field input, .field textarea {
  background: #fff; border: 1.5px solid #8A9084; /* ≥3:1 auf Weiß — Feldgrenze erkennbar (WCAG 1.4.11) */
  border-radius: var(--r-s); color: var(--text);
  font: inherit; padding: .7em 1em; width: 100%;
}
.field input:focus-visible, .field textarea:focus-visible {
  outline: 2px solid var(--gruen); outline-offset: 1px; border-color: transparent;
}
.field textarea { min-height: 9rem; resize: vertical; }
.consent { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: .875rem; color: var(--text-dim); }
.consent input { accent-color: var(--gruen); width: 1.1rem; height: 1.1rem; margin-top: .2rem; flex: none; }
.form-msg { font-size: .95rem; min-height: 1.5em; }
.form-msg.ok { color: var(--gruen); }

/* ============================================================
   9 · Footer — tiefgrün wie der App-Header, gemütlicher Abschluss
   ============================================================ */
.site-footer {
  background: var(--gruen-nacht); border-top: 0;
  color: #E9EFE6;
  padding-block: var(--sp-16) var(--sp-8);
}
.footer-brand { display: flex; align-items: center; gap: var(--sp-4); margin-bottom: var(--sp-8); }
.footer-brand .mark { width: 2.25rem; }
.footer-brand .wortmarke { height: 2.75rem; width: auto; }
.footer-claim { color: #BCCBB7; max-width: 34rem; margin-bottom: var(--sp-12); }
.footer-cols {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-8);
  padding-bottom: var(--sp-12); border-bottom: 1px solid rgba(255,255,255,.14);
}
.footer-cols h3 {
  font-family: var(--font-sans); font-size: var(--fs-eyebrow);
  text-transform: uppercase; letter-spacing: .18em;
  font-variation-settings: "wdth" 125; font-weight: 600;
  color: #A9D293; margin-bottom: var(--sp-4);
}
.footer-cols ul { list-style: none; display: grid; gap: var(--sp-2); }
.footer-cols a { color: #E9EFE6; text-decoration: none; }
.footer-cols a:hover { color: #fff; text-decoration: underline; }
.footer-cols address { font-style: normal; color: #E9EFE6; }
.footer-cols .dim { color: #BCCBB7; }
.footer-legal {
  display: flex; flex-wrap: wrap; gap: var(--sp-4); justify-content: space-between;
  padding-top: var(--sp-8); font-size: .875rem; color: #BCCBB7;
}
.footer-end {
  display: flex; align-items: center; gap: var(--sp-6); margin-top: var(--sp-12);
}
.footer-end .hair { flex: 1; height: 1px; background: rgba(255,255,255,.14); }
.footer-end .mark { width: 1.1rem; opacity: .9; }

/* ============================================================
   Reveals
   ============================================================ */
.reveal {
  opacity: 0; transform: translateY(28px);
  transition: opacity .7s var(--ease-soft), transform .8s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.in { opacity: 1; transform: none; }
/* Ohne JS (oder reduced-motion): alles sichtbar */
.no-js .reveal, .no-motion .reveal { opacity: 1; transform: none; }

/* ============================================================
   Papier-Unterseiten (Impressum / Datenschutz)
   ============================================================ */
.legal-page .site-header { position: static; background: var(--surface); border-bottom: 1px solid var(--line); }
.legal-page .main-nav { display: flex !important; position: static; flex-direction: row; background: none; border: 0; padding: 0; }
.legal-main { max-width: var(--maxw-text); margin-inline: auto; padding: var(--sp-16) clamp(1.25rem, 4vw, 3rem) var(--sp-24); }
.legal-main h1 { font-size: var(--fs-h2); margin-bottom: var(--sp-8); }
.legal-main h2 { font-size: 1.5rem; margin: var(--sp-12) 0 var(--sp-4); }
.legal-main h3 { font-size: 1.15rem; margin: var(--sp-8) 0 var(--sp-3); }
.legal-main p, .legal-main li { color: var(--text); }
.legal-main p + p { margin-top: var(--sp-3); }
.legal-main ul { padding-left: 1.2rem; margin-block: var(--sp-3); }
.legal-main address { font-style: normal; }
.legal-back { display: inline-block; margin-top: var(--sp-12); }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
  .season-grid { grid-template-columns: 1fr 1fr; }
  .brand-logo { height: 3rem; } /* neben voller Nav braucht das Logo weniger Breite */
  .hero { min-height: auto; }
  .hero-bild { justify-self: start; width: min(78vw, 22rem); margin-top: var(--sp-4); }
  .menu-grid, .about-grid, .contact-grid, .portal-panel { grid-template-columns: 1fr; }
  .menu-stage { position: static; order: -1; display: none; } /* mobil: Bilder in den Karten */
  .menu-row { padding-block: var(--sp-6); }
  .menu-card-img { display: block !important; }
  .about-img { max-width: 26rem; }
}
@media (max-width: 760px) {
  /* Mobile-Verdichtung: 80% der Besucher kommen übers Handy — kompakt, übersichtlich,
     schnell erfassbar. Nur Skalen/Abstände, keine anderen Inhalte als am Desktop. */
  :root {
    --sect-y: clamp(3rem, 8vh, 4rem);
    --fs-display: 2.45rem;
    --fs-h2: 1.7rem;
    --fs-h3: 1.22rem;
    --fs-lead: 1.05rem;
    --fs-body: 1rem;
    --fs-menu-item: 1.35rem;
    --sp-12: 2.25rem; --sp-16: 3rem;
  }
  .hero { padding-block: 6.5rem var(--sp-8); }
  .hero-bild { width: min(58vw, 15rem); margin-top: var(--sp-2); }
  .hero-cta { margin-top: var(--sp-6); }
  .menu-head, .season-head, .clients-head, .timeline-head { margin-bottom: var(--sp-8); }
  .menu-card-img { aspect-ratio: 21 / 9; margin-bottom: var(--sp-3); } /* flach — Liste bleibt Liste */
  .menu-row { padding-block: var(--sp-4); }
  .menu-copy { font-size: .92rem; }
  .menu-foot { margin-top: var(--sp-8); }
  .season-card { padding-top: var(--sp-4); }
  .season-card p { font-size: .92rem; }
  .client-card { padding: var(--sp-6); }
  .client-no { font-size: 1.5rem; margin-bottom: var(--sp-2); }
  .station { padding-left: var(--sp-8); padding-block: var(--sp-4); }
  .station::before { top: 1.6rem; }
  .timeline-quote { margin-top: var(--sp-8); font-size: 1.15rem; }
  .portal-phone-wrap { display: none; } /* Deko-Handy kostet mobil nur Scrollweg */
  .portal-panel { gap: var(--sp-4); }
  .about-img { max-width: 17rem; }
  .footer-cols { gap: var(--sp-6); }
  .client-grid, .season-grid, .form-row, .footer-cols { grid-template-columns: 1fr; }
  .main-nav {
    position: fixed; inset: 4.25rem 0 auto 0;
    background: rgba(247,245,239,.98);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-m);
    flex-direction: column; align-items: flex-start;
    padding: var(--sp-6) clamp(1.25rem, 4vw, 3rem) var(--sp-8);
    gap: var(--sp-4);
    display: none;
  }
  .main-nav.open { display: flex; }
  .nav-toggle { display: block; }
  .brand-logo { height: 2.7rem; }
  .call-pill {
    display: flex; position: fixed; z-index: 90;
    white-space: nowrap; font-size: .95rem;
    left: 50%; bottom: max(1rem, env(safe-area-inset-bottom));
    translate: -50% 0;
    box-shadow: var(--shadow-l);
  }
  body:not(.legal-page) { padding-bottom: 4.5rem; } /* Platz für die Pill */
}

/* Mobile Menükarten: echtes Foto oben in der Karte */
.menu-card-img {
  display: none; aspect-ratio: 5 / 3; border-radius: var(--r-m);
  overflow: clip; border: 1px solid var(--line); margin-bottom: var(--sp-4);
}
.menu-card-img img { width: 100%; height: 100%; object-fit: cover; }

/* ============================================================
   Reduced Motion — alles steht im Endzustand
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
    transition-delay: 0s !important;
  }
  .hero h1 .line > span { transform: none; }
  .hero-copy > .sub, .hero-copy > .hero-cta, .hero-copy > .hero-trust { opacity: 1; transform: none; }
  .hero-bild { opacity: 1 !important; transform: rotate(2deg) !important; }
  .marquee-track { animation: none !important; }
  .scroll-cue { animation: none; opacity: .5; }
  .reveal { opacity: 1; transform: none; }
  .about-img img { animation: none !important; }
  .about-img img:first-child { opacity: 1; }
  .timeline-fill { --p: 100%; animation: none !important; }
  .menu-img .slot, .menu-img img { transform: none !important; }
  .btn:hover, .client-card:hover { transform: none; }
  .client-card:hover .client-no { transform: none; }
  .station.is-active::before { transform: none; }
}

/* ---------- Print (Papier) ---------- */
@media print {
  .site-header, .call-pill, .scroll-cue { display: none; }
  body { background: #fff; color: #1F241D; }
}