/* =====================================================================
   Hofladen Bergerhof — gemeinsame styles.css (Demo "Profi-Paket + Shop-Modul")
   Beispiel-Website von Vor Ort Online · fiktiver Musterbetrieb.
   Farbwelt: Erntepalette Terrakotta / Senfgelb / Hafer. Offline lauffähig
   (Doppelklick auf index.html), keine CDNs, keine Tracker.
   Umsetzung nach _design-konzept.md (@ui-ux-designer Mira).
   Ausgangsbasis: musterbetrieb-profi-gasthaus/styles.css (Struktur über-
   nommen, Farb-/Font-Tokens komplett ersetzt, Shop-Komponenten neu).
   ===================================================================== */

/* --- 1. Design-Tokens ------------------------------------------------ */
:root{
  --terrakotta:#b5541f;
  --terrakotta-dunkel:#7c3714;
  --senfgelb:#d9a53e;
  --hafer:#f6efe2;
  --erde:#2b211a;
  --weiss:#fffcf7;
  --text:#2b211a;
  --text-leicht:#6b5d4f;
  --linie:#e6d9c2;
  --schatten:0 14px 38px rgba(124,55,20,.15);
  --schatten-soft:0 6px 18px rgba(124,55,20,.10);
  /* Phase 7b (12.4 Randnotiz): zusätzlicher, kräftigerer Schatten-Token für
     die insgesamt kontrastreicheren Editorial-Bauteile -- KEIN Ersatz für
     --schatten (der bleibt für kleinere Elemente wie Buttons bestehen). */
  --schatten-editorial:0 20px 50px rgba(124,55,20,.22);
  --radius:14px;
  --radius-lg:22px;
  --s1:.5rem; --s2:1rem; --s3:1.5rem; --s4:2rem; --s5:3rem; --s6:4.5rem;
  --slab:Rockwell,"Bookman Old Style",Georgia,serif;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

/* --- 2. Reset & Basis ------------------------------------------------ */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* Phase 7b (12.2): notwendig, sobald .vollbreit-Sektionen existieren --
   100vw ist auf Desktop breiter als 100%, sobald eine vertikale Scrollbar
   sichtbar ist (die Scrollbar zählt nicht zur Viewport-Breite, 100vw
   schon). Ohne diese Zeile erzeugt jede .vollbreit-Sektion einen
   horizontalen Scrollbalken. */
/* Fix 15.07.: overflow-x:hidden erzeugt einen Scrollcontainer und bricht
   dadurch position:sticky beim gepinnten Hero (.hero-scroll). overflow-x:clip
   verhindert horizontales Scrollen genauso, ohne Nachfahren-sticky zu brechen. */
html,body{overflow-x:clip}
body{
  font-family:var(--sans);
  font-size:17px;
  color:var(--text);
  background:var(--weiss);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--slab);line-height:1.15;font-weight:700;letter-spacing:-.01em;color:var(--erde)}
h1{font-size:clamp(2rem,5vw,3.2rem)}
h2{font-size:clamp(1.6rem,4vw,2.4rem);color:var(--terrakotta);margin-bottom:.6rem}
h3{font-size:1.24rem}
p{color:var(--text-leicht);font-size:clamp(1rem,1rem + .2vw,1.06rem)}
a{color:var(--terrakotta);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%;display:block}
ul{list-style:none}
button{font-family:inherit}

.wrap{max-width:1180px;margin:0 auto;padding:0 24px}
section{padding:var(--s6) 0}
.hafer-bg{background:var(--hafer)}
/* Phase 7b (12.2): Vollbreite-Technik für randabschneidende Bildsektionen --
   reißt das Element aus der zentrierten .wrap-Spalte heraus und spannt es
   über die volle Fensterbreite, unabhängig von der Position im Dokument.
   WARNUNG (Bugfix 15.07.2026, 2. Playwright-Gegencheck): .vollbreit zentriert
   per transform (translateX(-50%)) -- NIEMALS zusammen mit .reveal auf
   demselben Element verwenden (siehe Abschnitt 22)! Die Reveal-"sichtbar"-
   Regel setzt `transform:none`, was den translateX-Wert beim Sichtbarwerden
   komplett zerstört (transform ist eine einzelne Property, "none"
   überschreibt statt zu ergänzen) -- Element springt dann seitlich aus dem
   Viewport. Fundstelle: .story-zeile (index.html), dort deshalb bewusst
   eine margin-basierte Alternative statt .vollbreit (siehe dort). Bei jeder
   künftigen Kombination aus Vollbreite-Technik + Scroll-Reveal auf
   demselben Element erst per Browser-Check verifizieren. */
.vollbreit{width:100vw;position:relative;left:50%;transform:translateX(-50%)}
/* Phase 7b (12.3 ueber-uns.html Split-Bild): .vollbreit selbst funktioniert
   NUR für Elemente, die NICHT innerhalb von .wrap verschachtelt sind (siehe
   Kommentar oben) -- ein width:100vw auf einem Grid-Kind tief in einem
   zentrierten 1180px-Wrap würde das ganze Grid sprengen. .bleed-links ist
   die dafür passende Alternativtechnik: eine exakte negative margin-left
   (+ passende Breitenerhöhung), berechnet aus derselben Formel wie der
   Innenabstand von .wrap (max(24px, (100vw-1180px)/2+24px)) -- verschiebt
   nur die LINKE Kante bis zum Viewport-Rand, die RECHTE Kante (Grenze zur
   Textspalte) bleibt exakt an ihrer bisherigen Position stehen. */
.bleed-links{
  margin-left:calc(-1 * max(24px, (100vw - 1180px)/2 + 24px));
  width:calc(100% + max(24px, (100vw - 1180px)/2 + 24px));
  max-width:none;
}

/* Sichtbar nur für Screenreader (Skip-Link) */
.skip{position:absolute;left:-9999px;top:0;background:var(--terrakotta);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:8px;top:8px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* --- 3. Signature: Getreide-Ähre -------------------------------------- */
.aehre{width:1em;height:1em;display:inline-block;vertical-align:-.12em;flex:none}

.label{
  display:inline-flex;align-items:center;gap:8px;font-size:.8rem;font-weight:700;
  letter-spacing:.13em;text-transform:uppercase;color:var(--terrakotta);margin-bottom:.7rem;
}
.label .aehre{color:var(--senfgelb);font-size:1.05rem}
.intro{max-width:620px}

/* --- 4. Buttons -------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;
  background:var(--terrakotta);color:#fff;padding:13px 30px;border-radius:50px;
  font-weight:600;font-family:var(--sans);font-size:1rem;cursor:pointer;border:0;
  transition:transform .15s ease,background .2s ease,box-shadow .2s ease;box-shadow:var(--schatten-soft);
}
.btn:hover{background:var(--terrakotta-dunkel);transform:translateY(-2px);box-shadow:var(--schatten);text-decoration:none}
.btn.ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.78);box-shadow:none}
.btn.ghost:hover{background:rgba(255,255,255,.16)}
.btn.dunkel{background:var(--terrakotta-dunkel)}
.btn.dunkel:hover{background:var(--terrakotta)}
.btn.voll{width:100%}
.btn[disabled]{opacity:.6;cursor:not-allowed;transform:none}
.btn-sekundaer{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;
  background:transparent;color:var(--terrakotta);border:2px solid var(--terrakotta);
  padding:10px 22px;border-radius:50px;font-weight:600;cursor:pointer;
}
.btn-sekundaer:hover{background:var(--hafer);text-decoration:none}

/* --- 5. Demo-Balken ----------------------------------------------------- */
.demo-bar{
  background:var(--terrakotta-dunkel);color:var(--hafer);font-size:.8rem;text-align:center;
  padding:7px 16px;line-height:1.4;
}
.demo-bar a{color:#fff;text-decoration:underline;font-weight:600}

/* --- 6. Header / Navigation ---------------------------------------------- */
header{
  position:sticky;top:0;z-index:100;background:rgba(255,252,247,.95);
  backdrop-filter:blur(8px);
}
/* Phase 7 (11.4): Gradient-Hairline statt flacher 1px-Trennlinie -- reines
   Pseudo-Element am unteren Rand, keine Höhen-/Layout-Änderung (header
   bleibt sticky, exakt gleiche Klick-/Scroll-Logik). */
header::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--terrakotta) 0%,var(--senfgelb) 50%,var(--terrakotta) 100%);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:74px;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--slab);font-weight:700;
  font-size:1.2rem;color:var(--terrakotta);white-space:nowrap}
.brand:hover{text-decoration:none}
.brand .aehre{color:var(--senfgelb);font-size:1.7rem}
.brand small{display:block;font-family:var(--sans);font-size:.6rem;font-weight:600;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-leicht);margin-top:-2px}
.menu{display:flex;gap:26px;align-items:center}
.menu a{color:var(--text);font-weight:500;font-size:.98rem;padding:6px 2px;position:relative}
.menu a:hover{color:var(--terrakotta);text-decoration:none}
.menu a.aktiv{color:var(--terrakotta);font-weight:700}
.menu a.aktiv::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:3px;
  border-radius:3px;background:var(--senfgelb)}
/* Phase 7 (11.4 Punkt 2): kleine Ähre-Spitze am rechten Ende des aktiven
   Unterstrichs -- reines Pseudo-Element mit content:'' (kein Text, daher
   ohne Zusatzaufwand nicht im Accessibility-Baum), kein neues DOM-Element,
   keine Fokus-Reihenfolgen-Änderung. */
.menu a.aktiv::before{
  /* Fix 15.07.: alte Position (bottom:-5px) erzeugte eine Luecke zwischen
     Unterstrich-Linie und Dreieck (Glitch-Optik). Neue Werte: Dreieck-Basis
     liegt direkt auf der Unterstrich-Oberkante, zurueck auf 6x6px, leichte
     Rotation bricht die geometrische Strenge auf (Mira-Spec). */
  content:'';position:absolute;right:-2px;bottom:0px;
  width:6px;height:6px;
  background:var(--senfgelb);
  clip-path:polygon(50% 0%,100% 100%,0% 100%);
  transform:rotate(6deg);
  transform-origin:50% 100%;
}
.nav-rechts{display:flex;align-items:center;gap:14px}

/* Warenkorb-Icon-Button im Header */
.warenkorb-button{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  width:46px;height:46px;border-radius:50%;border:1px solid var(--linie);background:var(--weiss);
  color:var(--terrakotta);cursor:pointer;flex:none;
}
.warenkorb-button:hover{background:var(--hafer)}
.warenkorb-button svg{width:22px;height:22px}
.warenkorb-badge{
  position:absolute;top:-6px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:50%;
  background:var(--terrakotta);color:#fff;font-size:.7rem;font-weight:700;display:flex;
  align-items:center;justify-content:center;line-height:1;
}
.warenkorb-badge[data-anzahl="0"]{display:none}
/* Phase 7 (11.4 Punkt 3): kurzer Puls bei Mengenänderung (script.js setzt/
   entfernt .puls für 300ms). Wird automatisch von der globalen
   reduced-motion-Regel am Dateiende mit unterbunden (animation:none
   !important) -- kein separater JS-matchMedia-Check nötig, da hier (anders
   als Hover-Tilt/Parallax) eine echte CSS-@keyframes-Animation läuft und
   keine per JS gesetzten Inline-Transforms (siehe QA-Empfehlung 1). */
@keyframes badge-puls{0%,100%{transform:scale(1)}50%{transform:scale(1.25)}}
.warenkorb-badge.puls{animation:badge-puls .3s ease}

.burger{display:none;background:none;border:0;cursor:pointer;color:var(--terrakotta);
  width:46px;height:46px;align-items:center;justify-content:center;flex:none}
.burger svg{width:26px;height:26px}

/* --- 7. Hero (Hintergrundfoto + Terrakotta-Gradient als Kontrast-Overlay) ---
   Stapel-Reihenfolge (z-index): 0 Foto -> 1 Gradient-Overlay -> 2 Wasserzeichen
   + Text. Der Gradient liegt halbtransparent ÜBER dem Foto, damit der weiße
   Text (h1, Fließtext, Buttons) trotz wechselndem Fotohintergrund lesbar
   bleibt (WCAG-Kontrast) — reines Foto ohne Overlay wäre an hellen Stellen
   (Himmel) zu kontrastarm für weiße Schrift. */
.hero{
  position:relative;color:#fff;overflow:hidden;
}
.hero-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.hero::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(120deg,rgba(181,84,31,.82) 0%,rgba(124,55,20,.85) 55%,rgba(43,33,26,.9) 100%);
}
.hero .wrap{padding-top:clamp(78px,12vw,140px);padding-bottom:clamp(78px,12vw,140px);max-width:760px;margin-left:0;position:relative;z-index:2}
.hero .label{color:var(--hafer)}
.hero .label .aehre{color:var(--senfgelb)}
.hero h1{color:#fff;margin-bottom:1rem;text-shadow:0 2px 18px rgba(0,0,0,.25)}
.hero p{color:rgba(255,255,255,.94);font-size:1.18rem;max-width:560px;margin-bottom:2rem}
.hero .cta{display:flex;gap:14px;flex-wrap:wrap}
.hero-watermark{position:absolute;right:-40px;bottom:-70px;color:rgba(217,165,62,.16);font-size:340px;
  line-height:1;pointer-events:none;z-index:2}

/* --- 7b. Hero-Scroll-Video (Phase 6, Enterprise-Showcase "KI-Produktvideo") ---
   Grundzustand (kein JS ODER prefers-reduced-motion:reduce): .hero-scroll
   verhält sich exakt wie die bisherige Einzel-Viewport-Hero -- keine
   zusätzliche Scroll-Höhe, kein Pinning, statisches Foto sichtbar, kein
   einziges Video-Byte wird geladen (script.js fügt <source> erst dann ein,
   wenn diese Klasse aktiviert wird). Erst .js-scrub (nur von script.js
   gesetzt) schaltet auf den gepinnten Scrub-Modus um. */
.hero-scroll{position:relative;padding:0} /* überschreibt section{padding:var(--s6) 0} -- Hero bleibt Vollbild ohne Rand */
.hero-spacer{height:auto}
.hero-video-wrap{display:none}
.hero-video{display:none;object-fit:cover}
.hero-video.ist-aktiv{display:block}

.hero-scroll.js-scrub .hero-spacer{height:300vh}
.hero-scroll.js-scrub .hero{position:sticky;top:0;height:100vh;height:100dvh;z-index:1}
.hero-scroll.js-scrub #hero-fallback-bild{display:none}
.hero-scroll.js-scrub .hero-video-wrap{display:block}

/* Clip 1 (Bio-Eier): laut Meta-Datei liegt die Deckel-Öffnung bei x≈200
   von 1024px Framebreite -- deutlich links der Bildmitte. Auf schmalen
   Viewports schneidet object-fit:cover mit "center center" sonst genau
   die interessante Bildstelle weg. */
.hero-video[data-clip="bio-eier"]{object-position:30% center}

/* Badge "KI-Produktvideo · Enterprise" -- bewusst nur im aktiven Scrub-
   Modus sichtbar (ohne Scroll-Scrubbing gibt es nichts, worauf der Badge
   verweisen könnte). Kleiner/leiser als .label, s. _design-konzept.md 10.4. */
.hero-video-badge{
  display:none;align-items:center;gap:6px;position:absolute;top:90px;right:16px;z-index:3;
  background:var(--senfgelb);color:var(--erde);font-weight:700;font-size:.78rem;
  padding:8px 16px;border-radius:50px;box-shadow:var(--schatten-soft);white-space:nowrap;
}
.hero-video-badge .aehre{font-size:.95rem}
.hero-scroll.js-scrub .hero-video-badge{display:inline-flex}

/* Scroll-Hinweis (Discoverability) -- scroll-gesteuertes Video ist ein
   unübliches Interaktionsmuster, ohne sichtbaren Hinweis merkt die
   Zielgruppe oft gar nicht, dass Scrollen den Clip steuert. Ebenfalls nur
   im Scrub-Modus sichtbar. */
.hero-scroll-hinweis{
  display:none;align-items:center;gap:6px;position:absolute;left:50%;bottom:28px;
  transform:translateX(-50%);z-index:3;color:rgba(255,255,255,.92);font-size:.85rem;
  font-weight:600;white-space:nowrap;text-shadow:0 2px 10px rgba(0,0,0,.3);
}
.hero-scroll-hinweis .chevron{width:18px;height:18px;animation:hero-hinweis-bounce 1.6s ease-in-out infinite}
.hero-scroll.js-scrub .hero-scroll-hinweis{display:inline-flex}
@keyframes hero-hinweis-bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(6px)}
}

/* Schmaler Seiten-Header (Unterseiten) */
.pagehead{
  position:relative;color:#fff;text-align:center;
  background:linear-gradient(120deg,var(--terrakotta) 0%,var(--terrakotta-dunkel) 100%);
}
.pagehead .wrap{padding:clamp(50px,9vw,88px) 24px}
.pagehead h1{color:#fff;margin-bottom:.5rem}
.pagehead p{color:rgba(255,255,255,.92);max-width:620px;margin:0 auto}
.pagehead .label{color:var(--hafer);justify-content:center}
.pagehead .label .aehre{color:var(--senfgelb)}

/* Content-Fotos (echte Bilder aus bilder/, siehe BILDNACHWEIS.md).
   Klasse heißt weiterhin ".bild-platzhalter" (historisch gewachsen aus der
   Platzhalter-Phase) — sie sitzt jetzt direkt auf dem <img>-Tag. Die
   Positionierungs-Regeln je Einsatzort (Aspect-Ratio, Rundung, absolute
   Position) stehen unverändert bei den jeweiligen Containern weiter unten
   (.card, .kategorie-kachel, .split, .produkt-bild, .mc-bild, .wk-bild). */
.bild-platzhalter{
  display:block;width:100%;height:100%;object-fit:cover;background:var(--hafer);
}

/* --- 8. Trust-Leiste (Phase 7b, 12.10 Pilot-Abschnitt) ------------------ */
/* Ersetzt die alte "überlappende Karte" (Abschnitt 11, verworfen) komplett:
   statt einer 48px-Überlappung mit Kartenschatten sorgt jetzt ein kompletter
   Farbflächen-Wechsel (hell -> --erde -> hell) für den beim Scrollen auch
   peripher wahrnehmbaren Kontrast (Begründung: _design-konzept.md 12.1).
   .trust-neu ist zugleich die erste .vollbreit-Sektion der Seite. */
.trust-neu.vollbreit{background:var(--erde)}
.trust-grid{
  display:grid;grid-template-columns:minmax(300px,32vw) repeat(3,1fr);
  min-height:clamp(260px,30vw,340px);
}
/* Foto-Panel (Zelle 1): Bildfläche statt Bild-Anordnung (12.1, Hebel 2) --
   volle Zellhöhe, Gradient-Overlay blendet rechts nahtlos in --erde über. */
.trust-foto{position:relative;overflow:hidden}
.trust-foto img{width:100%;height:100%;object-fit:cover;display:block}
.trust-foto::before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(43,33,26,0) 0%,rgba(43,33,26,.55) 60%,rgba(43,33,26,.92) 100%);
}
.trust-foto-text{position:absolute;left:clamp(20px,3vw,36px);bottom:clamp(20px,3vw,36px);z-index:1}
.trust-foto-text b{display:block;font-family:var(--slab);font-size:clamp(2.2rem,4vw,3.2rem);color:var(--senfgelb);line-height:1.1}
.trust-foto-text span{font-size:.92rem;color:var(--weiss)}
/* Stat-Zellen (2-4): große Zahl als eigenständiges Statement (12.1, Hebel 2) */
.trust-stat{
  display:flex;flex-direction:column;justify-content:center;
  padding:0 clamp(20px,3vw,48px);border-left:1px solid rgba(255,255,255,.14);
}
.trust-stat b{display:block;font-family:var(--slab);font-size:clamp(2.8rem,5.5vw,5.2rem);color:var(--senfgelb);line-height:1}
/* Screenshot-Gegencheck (12.10) hat gezeigt: die Riesengröße oben passt nur zu
   kurzen Ziffern-Werten (4,9 / 24) -- bei "Bio seit 1998" (13 Zeichen) bricht
   sie in 3 Zeilen und wirkt fragmentiert. Eigene, kleinere Stufe nur für diese
   Textzelle, Inhalt bleibt unverändert. */
.trust-stat--text b{font-size:clamp(1.7rem,3.2vw,2.6rem)}
/* Direktes-Kind-Kombinator (>) statt Nachfahren-Selektor: verhindert, dass diese
   Regel auch die verschachtelte .zaehler-Span in Zelle 4 ("<b><span
   class=zaehler>24</span> Produkte</b>") trifft und deren große Schrift/Farbe
   überschreibt -- Bug beim Screenshot-Gegencheck (12.10) gefunden. */
.trust-stat > span{font-size:.92rem;color:rgba(255,255,255,.78)}
/* Animierte Zähler (11.3, weiterhin unverändert): siehe script.js -- Markup
   zeigt per Default den Zielwert (progressive enhancement/No-JS), JS setzt
   vor dem Hochzählen kurz auf 0 zurück. */
.zaehler{display:inline-block}

/* --- 9. Karten / Grids ---------------------------------------------- */
.grid{display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:var(--s5)}
.card{
  background:var(--weiss);border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--schatten-soft);border:1px solid var(--linie);
  transition:transform .2s ease,box-shadow .2s ease;display:flex;flex-direction:column;
}
.card:hover{transform:translateY(-6px);box-shadow:var(--schatten)}
.card .bild-platzhalter{aspect-ratio:4/3;width:100%}
.card .card-body{padding:22px 24px 26px}
.card h3{color:var(--terrakotta);margin-bottom:.4rem;font-size:1.15rem}
.card p{font-size:.97rem}
.card .mehr{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-weight:600;color:var(--terrakotta)}
/* .card wird in Phase 7 zusätzlich als klickbare Karte (<a class="card">)
   auf den Produkt-Detailseiten ("Passt gut dazu") wiederverwendet -- reine
   Ergänzung, ändert nichts an der bestehenden <article class="card">-Nutzung. */
a.card{color:inherit}
a.card:hover{text-decoration:none}

/* Kategorie-Kacheln (Startseite) */
.kategorie-kachel{position:relative;display:block;border-radius:var(--radius-lg);overflow:hidden;
  box-shadow:var(--schatten-soft);transition:transform .2s ease,box-shadow .2s ease;color:#fff}
.kategorie-kachel:hover{transform:translateY(-6px);box-shadow:var(--schatten);text-decoration:none}
.kategorie-kachel .bild-platzhalter{aspect-ratio:4/3;transform-origin:center;transition:transform .1s linear}
.kategorie-kachel .kachel-titel{
  position:absolute;left:0;right:0;bottom:0;padding:18px 18px 14px;
  background:linear-gradient(transparent,rgba(43,33,26,.82));font-family:var(--slab);font-weight:700;font-size:1.1rem;
}

/* Phase 7 (11.2): Bento-Layout statt 5 gleich großer Kacheln -- 1 große
   Kachel (2x2, meistverkaufte Kategorie) + 4 kleinere. Reine CSS-Grid-
   Lösung (grid-template-areas), kein JS-Masonry. */
.kategorien-bento{
  display:grid;gap:20px;grid-template-columns:repeat(4,1fr);
  grid-template-areas:"gross gross b c" "gross gross d e";
  margin-top:var(--s5);
}
.kategorien-bento .kachel-gross{grid-area:gross}
.kategorien-bento .kachel-gross .bild-platzhalter{aspect-ratio:1/1}
.kategorien-bento > a:nth-child(2){grid-area:b}
.kategorien-bento > a:nth-child(3){grid-area:c}
.kategorien-bento > a:nth-child(4){grid-area:d}
.kategorien-bento > a:nth-child(5){grid-area:e}
/* Parallax (11.3): Basis-Vergrößerung nur, wenn body.js-parallax aktiv ist
   (script.js, ab 640px + nicht reduced-motion). Ohne diese Klasse bleibt
   das Bild wie heute (object-fit:cover, kein Zoom) -- reduced-motion- UND
   No-JS-Fallback in einem. */
body.js-parallax .kategorien-bento .bild-platzhalter{transform:scale(1.22)}

/* Phase 7b (12.3): große 2x2-Kachel bekommt ab 960px eine feste
   Mindesthöhe (56vh) statt der reinen aspect-ratio:1/1-Steuerung -- bei
   100vw Sektionsbreite (siehe .vollbreit oben) würde 1/1 sonst mit der
   Breite mitwachsen und unverhältnismäßig hoch werden. aspect-ratio wird
   deshalb hier gezielt wieder aufgehoben (auto), height:100% (Basisregel
   .bild-platzhalter) übernimmt dann die Höhensteuerung anhand der jetzt
   definierten Elternhöhe (min-height). Unter 960px bleibt die bisherige
   aspect-ratio:1/1-Regel unverändert aktiv. */
@media(min-width:960px){
  .kategorien-bento .kachel-gross{min-height:56vh}
  .kategorien-bento .kachel-gross .bild-platzhalter{aspect-ratio:auto;height:100%}
}

/* Listen mit Ähren-Marker */
.aehren-liste li{position:relative;padding-left:32px;margin-bottom:12px;color:var(--text-leicht)}
.aehren-liste li .aehre{position:absolute;left:0;top:.2em;color:var(--senfgelb);font-size:1.15rem}
.aehren-liste li b{color:var(--text)}

/* Phase 7 (11.2, ueber-uns.html "Werte"): große, blasse Editorial-Ziffer
   (01/02/03) hinter dem Ähre-Icon -- dieselbe "Geisterzahl"-Optik wie das
   Hero-Wasserzeichen. Nur für die Werte-Liste (eigene Modifier-Klasse),
   NICHT für die "Herkunft & Herstellung"-Listen der Produkt-Detailseiten
   (die bleiben bewusst schlicht, siehe _design-konzept.md 11.6/11.2). */
.aehren-liste.werte-editorial{counter-reset:werte}
/* BUGFIX (15.07.2026, 3. Playwright-Gegencheck durch Claude/Mira):
   margin-bottom MUSS mit der Zifferngröße mitwachsen, sonst stapeln sich
   aufeinanderfolgende Geisterziffern übereinander statt sich zu staffeln.
   Die Basisregel ".aehren-liste li" liefert nur margin-bottom:12px -- bei
   der Phase-7b-Vergrößerung der Ziffer (clamp(4rem,9vw,6.5rem), bis zu
   104px hoch bei line-height:1) UND deren top:-10px-Versatz reicht dieser
   12px-Abstand bei weitem nicht, um zu verhindern, dass Ziffer N in den
   Bereich von Ziffer N+1 hineinragt (Fund: alle 3 Werte-Listenpunkte auf
   ueber-uns.html stapelten sich optisch übereinander). Rechnung: der
   nötige Abstand zwischen zwei <li>-Oberkanten muss mindestens der
   Ziffernhöhe entsprechen (die -10px-Versätze beider Ziffern kürzen sich
   sonst heraus) -- margin-bottom bindet sich hier deshalb bewusst per
   calc() an genau dieselbe clamp()-Formel wie die Ziffer-Schriftgröße
   (+16px Sicherheitsabstand), NICHT an einen für eine einzelne
   Viewport-Breite fest eingetragenen Pixelwert -- bleibt so automatisch
   über die gesamte clamp-Bandbreite (schmal bis zum 6.5rem-Deckel bei
   >=1156px, unverändert auch bei sehr breiten Viewports) korrekt, auch
   falls die Ziffer-Formel künftig nochmal angepasst wird. */
.aehren-liste.werte-editorial li{
  counter-increment:werte;padding-left:56px;
  margin-bottom:calc(clamp(4rem,9vw,6.5rem) + 16px);
}
.aehren-liste.werte-editorial li::before{
  content:counter(werte,decimal-leading-zero);position:absolute;left:0;top:-10px;
  font-family:var(--slab);font-size:clamp(4rem,9vw,6.5rem);color:var(--senfgelb);opacity:.35;
  line-height:1;z-index:0;pointer-events:none;
}
.aehren-liste.werte-editorial li .aehre{z-index:1}
.aehren-liste.werte-editorial li b,.aehren-liste.werte-editorial li{position:relative}

/* Phase 7b (12.3 index.html, "Warum Bergerhof" -> Editorial-Story-Column):
   .story-ziffer nutzt dieselbe "Geisterzahl"-Optik wie oben, aber noch
   einmal deutlich größer (die Zeile nimmt jetzt sehr viel mehr Raum ein). */
.story-ziffer{
  display:block;font-family:var(--slab);font-size:clamp(6rem,14vw,11rem);
  color:var(--senfgelb);opacity:.35;line-height:1;margin-bottom:-.15em;
}

/* --- 10. Bewertungen (Phase 7, 11.2: Scroll-Snap-Karussell) ------------- */
.rezensionen{
  display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;
  margin-top:var(--s5);padding-bottom:10px;
}
.rezi{
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius-lg);
  padding:26px 24px;box-shadow:var(--schatten-soft);position:relative;overflow:hidden;
  flex:0 0 min(340px,84vw);scroll-snap-align:start;
}
.sterne,.rezi blockquote,.rezi .wer{position:relative;z-index:1}
.sterne{color:var(--senfgelb);font-size:1.1rem;letter-spacing:2px;margin-bottom:12px}
.rezi blockquote{font-family:var(--slab);font-style:italic;font-size:1.05rem;color:var(--text);
  line-height:1.5;margin-bottom:14px}
.rezi .wer{font-size:.86rem;color:var(--text-leicht)}
.rezi .wer b{color:var(--text);font-style:normal}
.rezi .quelle{display:block;font-size:.78rem;color:var(--senfgelb);margin-top:2px}
/* Rein dekoratives Anführungszeichen-Glyph im Hintergrund (aria-hidden im
   Markup, siehe index.html) -- kein Einfluss auf die Screenreader-
   Reihenfolge des eigentlichen Zitat-Texts. */
.rezi-zitat-glyph{
  position:absolute;top:-14px;right:14px;z-index:0;font-family:var(--slab);
  font-size:7rem;line-height:1;color:var(--senfgelb);opacity:.22;pointer-events:none;
}

/* --- 11. CTA-Band ------------------------------------------------------- */
.cta-band{
  position:relative;background:var(--terrakotta);color:#fff;text-align:center;
  clip-path:polygon(0 3vw,100% 0,100% 100%,0 100%);
}
.cta-band h2{color:#fff}
.cta-band p{color:rgba(255,255,255,.92);max-width:560px;margin:0 auto 1.6rem}
.cta-band .cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}

/* Phase 7b (12.3 index.html): Vollbreite-Fotosektion statt Vollton-Fläche --
   NUR auf index.html über die zusätzliche Klasse .cta-band-foto. Die 3
   Produkt-Detailseiten behalten das schlichte Vollton-.cta-band unverändert
   (siehe _design-konzept.md 12.3: "kein zusätzlicher Änderungsbedarf"). */
.cta-band-foto{background:var(--terrakotta-dunkel)}
.cta-band-bild{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transform:scale(1.08);transition:transform 1.4s ease-out;
}
.cta-band-bild.ist-sichtbar{transform:scale(1)}
.cta-band-foto::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(120deg,rgba(181,84,31,.82) 0%,rgba(124,55,20,.85) 55%,rgba(43,33,26,.9) 100%);
}
.cta-band-foto .wrap{position:relative;z-index:2}

/* --- 12. Split-Layout ---------------------------------------------------- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.split .bild-platzhalter{aspect-ratio:4/3;width:100%;border-radius:var(--radius-lg)}

/* Phase 7 (11.2, ueber-uns.html "Geschichte"): überlappende Bild/Text-
   Komposition statt symmetrischem 1:1-Split. Bild größer + Textspalte als
   weiße Karte, die über die untere Bildkante ragt. Mobile (<860px, siehe
   bestehende .split-Regel im Responsive-Abschnitt): Überlappung entfällt
   automatisch, weil die Spalten ohnehin auf 1fr fallen (gestapelt). */
.split.editorial{grid-template-columns:1.4fr .6fr;align-items:end}
/* Phase 7b (12.3): Bild bekommt zusätzlich .bleed-links (s.o.) -- bleedet
   nur nach links zum Viewport-Rand, endet rechts an der Textkarte. Runde
   Ecke nur noch rechts (links läuft das Bild ohnehin randlos aus).
   WICHTIG: margin-left/width hier NOCH EINMAL explizit gesetzt (identisch
   zur allgemeinen .bleed-links-Regel oben) -- ".split .bild-platzhalter"
   (Spezifität 0,2,0) würde die allgemeine ".bleed-links"-Regel (0,1,0)
   sonst per CSS-Spezifität überstimmen und das width:100% zurücksetzen. */
.split.editorial .bleed-links{
  border-radius:0 var(--radius-lg) var(--radius-lg) 0;
  margin-left:calc(-1 * max(24px, (100vw - 1180px)/2 + 24px));
  width:calc(100% + max(24px, (100vw - 1180px)/2 + 24px));
  max-width:none;
}
.split-textkarte{
  background:var(--weiss);border-radius:var(--radius-lg);box-shadow:var(--schatten-editorial);
  padding:var(--s4);position:relative;z-index:1;align-self:end;margin-bottom:-40px;
}
@media(max-width:860px){
  .split-textkarte{margin-bottom:0;align-self:auto}
  /* Phase 7b (12.3): Split-Grid stapelt auf Mobile ohnehin einspaltig --
     der Desktop-Bleed-Effekt (.bleed-links) wird hier zurückgesetzt, sonst
     bliebe eine kleine, unmotivierte negative Randverschiebung stehen. */
  .split.editorial .bleed-links{margin-left:0;width:100%;max-width:100%;border-radius:var(--radius-lg)}
}

/* --- 13. Sortiment / Produktgrid ------------------------------------- */
.kategorie-filter{
  position:sticky;top:74px;z-index:60;background:rgba(255,252,247,.96);backdrop-filter:blur(6px);
  padding:14px 0;
}
/* Phase 7 (11.2/11.4): dieselbe Gradient-Hairline wie der Header statt
   schlichter 1px-Linie -- rein kosmetisch, keine Struktur-/Verhaltens-
   änderung an der sticky Filterleiste. */
.kategorie-filter::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--terrakotta) 0%,var(--senfgelb) 50%,var(--terrakotta) 100%);
}
.chip-leiste{display:flex;gap:10px;flex-wrap:wrap;overflow-x:auto;padding-bottom:2px}
.chip{
  display:inline-flex;align-items:center;gap:6px;padding:8px 18px;border-radius:50px;
  border:1px solid var(--linie);background:var(--weiss);color:var(--text);font-size:.88rem;font-weight:600;
  cursor:pointer;white-space:nowrap;min-height:38px;
}
.chip:hover{border-color:var(--terrakotta)}
.chip[aria-pressed="true"]{background:var(--terrakotta);color:#fff;border-color:var(--terrakotta)}

.produkt-grid{display:grid;gap:24px;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:var(--s4)}
.produkt-karte{
  background:var(--weiss);border-radius:var(--radius-lg);overflow:hidden;border:1px solid var(--linie);
  box-shadow:var(--schatten-soft);display:flex;flex-direction:column;transition:transform .2s ease,box-shadow .2s ease;
}
.produkt-karte:hover{transform:translateY(-5px);box-shadow:var(--schatten)}
.produkt-bild{position:relative;aspect-ratio:4/3;width:100%}
.produkt-bild .bild-platzhalter{position:absolute;inset:0}
.produkt-badge{
  position:absolute;top:10px;left:10px;z-index:1;display:inline-flex;align-items:center;gap:5px;
  background:var(--senfgelb);color:var(--erde);font-size:.72rem;font-weight:700;padding:5px 12px;border-radius:50px;
}
.produkt-badge .aehre{font-size:.85rem}
.produkt-body{padding:16px 18px 20px;display:flex;flex-direction:column;gap:6px;flex:1}
.produkt-body h3{font-family:var(--sans);font-weight:700;font-size:1.02rem;color:var(--text)}
/* Phase 7 (11.6): Bild + Name der 3 Produkte mit eigener Detailseite sind
   zusätzlich verlinkt (script.js) -- Linkfarbe an die Kartenoptik angleichen
   statt der globalen Terrakotta-Linkfarbe, damit alle 24 Produktnamen
   optisch gleich aussehen. */
.produkt-body h3 a{color:inherit;text-decoration:none}
.produkt-body h3 a:hover{text-decoration:underline}
a.produkt-bild:hover{text-decoration:none}
.produkt-body .produkt-beschreibung{font-size:.88rem;color:var(--text-leicht);flex:1}
.produkt-preis{font-family:var(--sans);font-weight:700;font-size:1.15rem;color:var(--terrakotta);text-align:right}
.produkt-karte .btn{width:100%;border-radius:0;margin-top:6px}
.produkt-karte .btn.erledigt{background:var(--erde)}
.kein-treffer{color:var(--text-leicht);margin-top:var(--s4)}
.kein-treffer button{background:none;border:0;padding:0;font:inherit;color:var(--terrakotta);text-decoration:underline;cursor:pointer}

/* Phase 7b (Mira-Punkt, 15.07.2026): kleiner, unaufdringlicher Hinweis, wenn der
   Saisonkalender-Vorfilter (aktiverMonat) gerade Produkte ausblendet -- bleibt leer/
   unsichtbar, solange kein Monat aktiv ist oder nichts ausgeblendet wird (:empty). */
.saison-hinweis:empty{display:none}
.saison-hinweis{
  margin-top:var(--s4);padding:10px 16px;background:var(--hafer);border-radius:var(--radius);
  font-size:.9rem;color:var(--text-leicht);
}
.saison-hinweis button{background:none;border:0;padding:0;font:inherit;font-weight:600;color:var(--terrakotta);text-decoration:underline;cursor:pointer}

/* Phase 7 (11.5 Saisonkalender): Hinweistext für ganzjährig erhältliche
   Produkte, nur sichtbar, wenn ein Monat aktiv gewählt ist (script.js). */
.produkt-ganzjaehrig{font-size:.78rem;color:var(--text-leicht);font-style:italic}
/* Kurzer Fokus-Rahmen-Puls auf der ersten Saison-Trefferkarte nach Klick auf
   einen Monat (script.js scrollt zusätzlich sanft dorthin). Reduced-motion:
   script.js prüft matchMedia VOR dem Setzen dieser Klasse UND vor dem
   smooth-scroll (QA-Empfehlung 2) -- zusätzlich von der globalen
   reduced-motion-Regel (animation:none!important) mit abgesichert, da
   echte @keyframes-Animation, kein Inline-Transform. */
@keyframes saison-puls{
  0%,100%{box-shadow:var(--schatten-soft)}
  50%{box-shadow:0 0 0 4px rgba(217,165,62,.55),var(--schatten)}
}
.produkt-karte.saison-puls{animation:saison-puls .9s ease}

/* --- 14. Mengen-Stepper -------------------------------------------------- */
.stepper{display:inline-flex;align-items:center;gap:0;border:1px solid var(--terrakotta);border-radius:50px;overflow:hidden}
.stepper button{
  width:38px;height:38px;min-height:0;border:0;background:var(--weiss);color:var(--terrakotta);font-size:1.15rem;
  cursor:pointer;display:flex;align-items:center;justify-content:center;line-height:1;
}
.stepper button:hover{background:var(--hafer)}
.stepper button:focus-visible{outline:2px solid var(--terrakotta);outline-offset:-2px}
.stepper .stepper-zahl{min-width:34px;text-align:center;font-weight:700;font-size:.98rem}

/* --- 15. Mini-Cart (Slide-in) --------------------------------------- */
.mini-cart-overlay{
  position:fixed;inset:0;background:rgba(43,33,26,.5);z-index:190;display:none;
}
.mini-cart-overlay.offen{display:block}
.mini-cart{
  position:fixed;top:0;right:0;bottom:0;width:100%;max-width:420px;background:var(--weiss);
  box-shadow:var(--schatten);z-index:200;transform:translateX(100%);transition:transform .28s ease;
  display:flex;flex-direction:column;
}
.mini-cart.offen{transform:translateX(0)}
.mini-cart-kopf{display:flex;align-items:center;justify-content:space-between;padding:18px 20px;
  border-bottom:1px solid var(--linie)}
.mini-cart-kopf h2{font-size:1.15rem;margin:0;display:flex;align-items:center;gap:8px}
.mini-cart-kopf h2 .aehre{color:var(--senfgelb)}
.mini-cart-schliessen{background:none;border:0;cursor:pointer;color:var(--text);width:40px;height:40px;
  display:flex;align-items:center;justify-content:center;font-size:1.5rem;line-height:1}
.mini-cart-liste{flex:1;overflow-y:auto;padding:14px 20px;display:flex;flex-direction:column;gap:16px}
.mini-cart-leer{color:var(--text-leicht);text-align:center;padding:40px 10px}
.mini-cart-leer .aehre{width:44px;height:44px;color:var(--senfgelb);margin:0 auto 14px;opacity:.6}
.mc-position{display:grid;grid-template-columns:56px 1fr auto;gap:12px;align-items:center}
.mc-position .mc-bild{width:56px;height:56px;border-radius:var(--radius);overflow:hidden}
.mc-position .mc-bild .bild-platzhalter{width:100%;height:100%}
.mc-position .mc-name{font-weight:700;font-size:.92rem}
.mc-position .mc-preis{font-size:.82rem;color:var(--text-leicht)}
.mc-position .mc-entfernen{background:none;border:0;color:var(--text-leicht);cursor:pointer;font-size:1rem;
  width:32px;height:32px;justify-self:end}
.mc-position .mc-entfernen:hover{color:var(--terrakotta)}
.mini-cart-fuss{border-top:1px solid var(--linie);padding:16px 20px 20px;display:grid;gap:12px}
.mini-cart-summe{display:flex;justify-content:space-between;font-weight:700;font-size:1.05rem}
.mini-cart-fuss .btn-sekundaer{width:100%}

/* --- 16. Warenkorb-Seite ---------------------------------------------- */
.warenkorb-layout{display:grid;grid-template-columns:1.4fr 1fr;gap:44px;align-items:start;margin-top:var(--s4)}
.wk-positionen{display:grid;gap:16px}
.wk-position{
  display:grid;grid-template-columns:76px 1fr auto auto;gap:16px;align-items:center;
  background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius);padding:14px 16px;
}
.wk-position .wk-bild{width:76px;height:76px;border-radius:var(--radius);overflow:hidden}
.wk-position .wk-bild .bild-platzhalter{width:100%;height:100%}
.wk-position .wk-name{font-weight:700}
.wk-position .wk-preis-einzeln{font-size:.85rem;color:var(--text-leicht)}
.wk-position .wk-zeilensumme{font-weight:700;color:var(--terrakotta);text-align:right;min-width:70px}
.wk-position .mc-entfernen{background:none;border:0;color:var(--text-leicht);cursor:pointer;font-size:1.1rem;width:38px;height:38px}
.wk-position .mc-entfernen:hover{color:var(--terrakotta)}

.wk-leer{text-align:center;padding:60px 20px;color:var(--text-leicht)}
.wk-leer .aehre{width:56px;height:56px;color:var(--senfgelb);margin:0 auto 16px;opacity:.6}

.wk-karte{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius-lg);
  padding:24px;box-shadow:var(--schatten-soft);display:grid;gap:18px}
.wk-karte h3{font-size:1.05rem;margin-bottom:2px}

.erfuellung-option{display:flex;gap:12px;align-items:flex-start;padding:14px;border:1px solid var(--linie);
  border-radius:var(--radius);cursor:pointer}
.erfuellung-option:has(input:checked){border-color:var(--terrakotta);background:var(--hafer)}
.erfuellung-option input{margin-top:3px;accent-color:var(--terrakotta);flex:none}
.erfuellung-option b{display:block;color:var(--text)}
.erfuellung-option span.hinweis{display:block;font-size:.84rem;color:var(--text-leicht);margin-top:2px}
.frisch-warnung{
  display:flex;gap:10px;background:#fbf1de;border:1px solid var(--senfgelb);border-radius:var(--radius);
  padding:12px 14px;font-size:.86rem;color:var(--erde);margin-top:4px;
}

.summen-zeile{display:flex;justify-content:space-between;font-size:.96rem;color:var(--text-leicht)}
.summen-zeile.gesamt{font-weight:700;color:var(--text);font-size:1.15rem;border-top:1px solid var(--linie);
  padding-top:12px}
.summen-zeile.gesamt .betrag{color:var(--terrakotta)}

.kurzformular{display:grid;gap:12px}
.kurzformular label{font-size:.85rem;font-weight:600;color:var(--text)}
.kurzformular input{
  width:100%;padding:12px 14px;border-radius:10px;border:1px solid var(--linie);background:#fff;
  font-size:1rem;font-family:inherit;color:var(--text);min-height:46px;margin-top:4px;
}
.kurzformular input:focus{outline:2px solid var(--terrakotta);outline-offset:1px;border-color:var(--terrakotta)}
.versand-felder{
  display:none;gap:10px;border-top:1px dashed var(--linie);padding-top:12px;margin-top:2px;
  font-size:.86rem;color:var(--text-leicht);
}
.versand-felder.sichtbar{display:flex}

.vertrauens-leiste{display:grid;gap:8px;padding:14px;background:var(--hafer);border-radius:var(--radius);
  font-size:.85rem;color:var(--text-leicht)}
.vertrauens-leiste .zahlarten{display:flex;gap:8px;font-size:1.3rem}
.vertrauens-leiste b{color:var(--text)}

#kasse-status{min-height:1.4em;font-size:.9rem;color:var(--terrakotta-dunkel)}
#bestell-status-banner.abbruch{background:#fbeee6;border-color:var(--terrakotta)}

/* --- 17. Kontakt / Öffnungszeiten / Anfahrt ------------------------- */
.kontakt-split{display:grid;grid-template-columns:1fr 1fr;gap:46px;align-items:start}
.info{display:grid;gap:15px;margin-top:var(--s2)}
.info .row{display:flex;gap:13px;align-items:flex-start}
.info .row .i{font-size:1.2rem;line-height:1.4;color:var(--terrakotta)}
.info a{color:var(--terrakotta);font-weight:600}

/* Phase 7 (11.2 kontakt.html): dieselbe "überlappende Karte"-Behandlung wie
   ueber-uns.html -- reine Container-Kosmetik um .info + Abholzeiten-Tabelle,
   ragt leicht in Richtung der darunterliegenden Kartenskizze (.karte).
   Bewusst KEIN Hover-Tilt/Scroll-Reveal auf dieser Karte (Kontaktdaten
   sollen beim Draufschauen ruhig bleiben, siehe _design-konzept.md 11.2). */
.info-karte{
  background:var(--weiss);border-radius:var(--radius-lg);box-shadow:var(--schatten-editorial);
  padding:var(--s4);margin-bottom:-24px;position:relative;z-index:1;
}
@media(max-width:760px){
  .info-karte{margin-bottom:0}
}

.zeiten{width:100%;border-collapse:collapse;margin-top:var(--s2);background:var(--weiss);
  border:1px solid var(--linie);border-radius:var(--radius);overflow:hidden}
.zeiten th,.zeiten td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--linie);font-size:.96rem}
.zeiten th{font-family:var(--sans);font-weight:600;color:var(--text);width:46%}
.zeiten td{color:var(--text-leicht)}
.zeiten tr:last-child th,.zeiten tr:last-child td{border-bottom:0}

.karte{margin-top:var(--s3);height:220px;border-radius:var(--radius);overflow:hidden;position:relative;
  border:1px solid var(--linie);
  background:
    repeating-linear-gradient(0deg,var(--hafer) 0 40px,#ecdfc4 40px 41px),
    repeating-linear-gradient(90deg,var(--hafer) 0 40px,#ecdfc4 40px 41px);}
.karte .strasse{position:absolute;background:#d8cbb0}
.karte .s1{top:48%;left:0;right:0;height:16px;transform:rotate(-3deg)}
.karte .s2{top:0;bottom:0;left:36%;width:13px;transform:rotate(5deg)}
.karte .pin{position:absolute;top:44%;left:38%;transform:translate(-50%,-100%);font-size:2rem;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.3))}
.karte .cap{position:absolute;bottom:8px;right:10px;background:rgba(124,55,20,.9);color:#fff;
  font-size:.72rem;padding:4px 10px;border-radius:20px}

/* --- 18. Formular (Kontaktseite) -------------------------------------- */
form.kontakt-formular{background:var(--weiss);border:1px solid var(--linie);border-radius:var(--radius-lg);
  padding:30px;box-shadow:var(--schatten-soft);display:grid;gap:16px}
form.kontakt-formular label{font-size:.85rem;font-weight:600;color:var(--text)}
form.kontakt-formular label .pflicht{color:var(--terrakotta)}
form.kontakt-formular input,form.kontakt-formular select,form.kontakt-formular textarea{
  width:100%;padding:13px 15px;border-radius:10px;border:1px solid var(--linie);
  background:#fff;font-size:1rem;font-family:inherit;color:var(--text);min-height:48px;
}
form.kontakt-formular textarea{min-height:120px;resize:vertical}
form.kontakt-formular input:focus,form.kontakt-formular select:focus,form.kontakt-formular textarea:focus{
  outline:2px solid var(--terrakotta);outline-offset:1px;border-color:var(--terrakotta)}
.einwilligung{display:flex;gap:10px;align-items:flex-start;font-size:.88rem;color:var(--text-leicht);line-height:1.5}
form.kontakt-formular .einwilligung input{flex:none;width:18px;height:18px;min-height:0;padding:0;margin:2px 0 0;accent-color:var(--terrakotta)}
.einwilligung a{color:var(--terrakotta);font-weight:600}
/* Honeypot: für Menschen unsichtbar, aber nicht per display:none (manche Bots umgehen das gezielt) */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
#formular-status{min-height:1.4em;font-size:.92rem;color:var(--terrakotta-dunkel)}

/* --- 19. Footer -------------------------------------------------------- */
footer{background:var(--terrakotta-dunkel);color:rgba(255,255,255,.8);font-size:.92rem;position:relative;overflow:hidden}
footer .wrap{padding:var(--s6) 24px var(--s4)}
.footer-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:40px}
footer h4{color:#fff;font-family:var(--slab);font-size:1.1rem;margin-bottom:14px}
footer a{color:rgba(255,255,255,.88)}
footer a:hover{color:#fff}
footer .f-brand{display:flex;align-items:center;gap:9px;font-family:var(--slab);font-weight:700;
  font-size:1.2rem;color:#fff;margin-bottom:10px}
footer .f-brand .aehre{color:var(--senfgelb);font-size:1.5rem}
footer li{margin-bottom:8px}
.footer-bottom{border-top:1px solid rgba(255,255,255,.18);margin-top:var(--s5);padding-top:var(--s3);
  display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px;font-size:.84rem;color:rgba(255,255,255,.62)}
.fiktiv{display:block;margin-top:14px;font-size:.82rem;color:rgba(255,255,255,.58);max-width:720px}
.footer-watermark{position:absolute;left:-30px;bottom:-70px;color:rgba(217,165,62,.12);font-size:300px;
  line-height:1;pointer-events:none}

/* --- 20. Sticky Mobile-Leiste ------------------------------------------ */
.mobil-leiste{display:none}

/* --- 22. Phase 7 -- Scroll-Reveal-Grundgerüst (11.3) -------------------
   Basis-Mechanik für Kacheln, "Warum Bergerhof"-Karten, Rezensionen,
   Werte-Liste und Produktkarten. OHNE body.js-reveal (kein JS ODER
   reduzierte Bewegung, siehe script.js) sind alle .reveal-Elemente vom
   ersten Moment an voll sichtbar -- das ist zugleich der No-JS- UND der
   reduced-motion-Fallback, ganz ohne eigene Media-Query hier. */
/* Phase 7b (12.4): Rise 48px/700ms statt 24px/600ms -- etwas länger, damit
   die größere Distanz nicht ruckartig wirkt. */
body.js-reveal .reveal{opacity:0;transform:translateY(48px)}
/* BUGFIX (15.07.2026, Fund beim 2. Playwright-Screenshot-Gegencheck durch
   Claude/Mira): Diese Regel MUSS mit "body.js-reveal" qualifiziert sein --
   ohne das Präfix hat sie Spezifität (0,2,0), während die Hidden-Regel oben
   (0,2,1) hat ("body" + 2 Klassen). (0,2,1) > (0,2,0), die Hidden-Regel
   gewann deshalb IMMER, unabhängig von der Reihenfolge im Stylesheet --
   sitewide betroffen (jedes .reveal-Element blieb unsichtbar/verschoben,
   obwohl IntersectionObserver die Klasse .ist-sichtbar korrekt setzte).
   Bug stammt bereits aus Phase 7 (14.07.2026, damals translateY(24px)),
   fiel aber nie auf, weil bis zum Pilot-Abschnitt nur Code-Review statt
   echtem Browser-/Screenshot-Check stattfand. Fix: dieselbe Qualifikation
   "body.js-reveal" auch hier -> Spezifität (0,3,1), schlägt (0,2,1).
   WARNUNG (2. Bugfix, selbes Datum): `transform:none` in dieser Regel
   überschreibt JEDEN vorher per CSS gesetzten transform-Wert vollständig
   (transform ist eine einzelne Property, kein additiver Stapel) -- .reveal
   deshalb NIEMALS mit einer transform-basierten Vollbreite-/Zentrierungs-
   Technik wie `.vollbreit` auf demselben Element kombinieren (Fundstelle:
   `.story-zeile`, siehe die margin-basierte Alternative dort und die
   Warnung bei `.vollbreit` oben). */
body.js-reveal .reveal.ist-sichtbar{opacity:1;transform:none;transition:opacity .7s ease-out,transform .7s ease-out}
/* Gestaffeltes Erscheinen (max. 5 Geschwisterelemente, 90ms-Schritte,
   Phase 7b: vorher 80ms) -- NUR für Gruppen mit der Zusatzklasse
   .reveal-stagger (Kacheln, Story-Zeilen, Rezensionen, Werte-Liste,
   Saisonkalender-Startseiten-Karten). Das Produktgrid (bis zu 24 Karten)
   bekommt bewusst KEINE Verzögerungs-Kette (siehe 11.3). */
.reveal-stagger > .reveal:nth-child(2){transition-delay:90ms}
.reveal-stagger > .reveal:nth-child(3){transition-delay:180ms}
.reveal-stagger > .reveal:nth-child(4){transition-delay:270ms}
.reveal-stagger > .reveal:nth-child(n+5){transition-delay:360ms}

/* --- 23. Phase 7 -- Saisonkalender (11.5) ------------------------------- */
.saison-monate{margin-top:var(--s3)}
#saisonkalender{padding-top:var(--s5)}

/* Phase 7b (12.3 sortiment.html + 12.5 index.html): "Erde-Fläche" -- der
   gleiche satte Farbflächen-Wechsel wie die Trust-Leiste (.trust-neu),
   wiederverwendet für den Saisonkalender auf sortiment.html UND die neue
   Saisonkalender-Startseiten-Sektion auf index.html. Ersetzt auf
   sortiment.html die bisherige .hafer-bg-Klasse an derselben Stelle. */
.erde-bg{background:var(--erde);color:rgba(255,255,255,.85)}
.erde-bg h2{color:var(--senfgelb)}
.erde-bg .label{color:var(--senfgelb)}
.erde-bg .label .aehre{color:var(--weiss)}
.erde-bg .intro{color:rgba(255,255,255,.82)}
.erde-bg .chip{background:transparent;border-color:rgba(255,255,255,.35);color:#fff}
.erde-bg .chip:hover{border-color:var(--senfgelb)}
.erde-bg .chip[aria-pressed="true"]{background:var(--senfgelb);color:var(--erde);border-color:var(--senfgelb)}

/* Phase 7b (12.5 index.html): Saisonkalender-Startseiten-Sektion -- ersetzt
   den bisherigen .saison-teaser-Banner vollständig. Zeigt automatisch 2-3
   Produkte mit Saison im aktuellen Monat (script.js), gerendert mit den
   bestehenden .produkt-karte-Bausteinen -- daher hier bewusst KEIN eigenes
   Karten-Styling, nur das Zwei-Spalten-Layout drumherum. */
#saison-start{padding-top:var(--s6)}
.saison-start-layout{display:grid;grid-template-columns:minmax(240px,1fr) 2fr;gap:var(--s5);align-items:start}
.saison-start-grid{margin-top:0}
@media(max-width:860px){
  .saison-start-layout{grid-template-columns:1fr}
}

/* --- 24. Phase 7 -- Produkt-Detailseiten (11.6) ------------------------- */
.breadcrumb{
  font-size:.82rem;color:var(--text-leicht);display:flex;flex-wrap:wrap;gap:6px;
  align-items:center;margin-bottom:var(--s3);
}
.breadcrumb a{color:var(--terrakotta);font-weight:600}
.breadcrumb .trenner{color:var(--linie)}
.breadcrumb .aktuell{color:var(--text);font-weight:600}

/* Wichtig (analog Phase 6, .hero-scroll): der generische
   section{padding:var(--s6) 0}-Reset würde sonst einen ungewollten
   ~72px-Rand um das Video legen und die vorgesehene 100vh-Höhe
   sprengen -- hier explizit neutralisiert. */
.produkt-hero{position:relative;overflow:hidden;background:var(--erde);color:#fff;padding:0}
/* Phase 7b (12.3): 100vh/100dvh statt 70vh/56vh -- bindender
   Beschlusspunkt, für BEIDE Breakpoints identisch (siehe Media-Query weiter
   unten, dort bleibt nur noch die min-height je Breakpoint unterschiedlich).
   Das .produkt-hero{padding:0} oben bleibt zwingend erhalten, sonst reißt
   der generische section{padding:var(--s6) 0}-Reset wieder einen Rand rein. */
.produkt-hero-video-wrap{position:relative;width:100%;height:100vh;height:100dvh;min-height:340px;background:var(--erde)}
.produkt-hero-video-wrap video,.produkt-hero-video-wrap img{width:100%;height:100%;object-fit:cover;display:block}
.produkt-hero-badge{
  position:absolute;left:16px;bottom:16px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  background:rgba(43,33,26,.6);color:#fff;font-size:.78rem;font-weight:600;
  padding:7px 15px;border-radius:50px;backdrop-filter:blur(4px);
}
.produkt-hero-info{background:var(--weiss);padding:var(--s4) 0 var(--s3)}
.produkt-hero-info h1{margin-bottom:.3rem}
.produkt-hero-preis{font-family:var(--sans);font-weight:700;font-size:1.6rem;color:var(--terrakotta);margin:12px 0 18px}
.produkt-hero-kauf{display:flex;align-items:center;gap:16px;flex-wrap:wrap}

.produkt-detail-abschnitt{border-top:1px solid var(--linie)}
.passt-dazu-grid{display:grid;gap:22px;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));margin-top:var(--s4)}

@media(max-width:759px){
  .produkt-hero-video-wrap{min-height:260px}
}

/* --- 25. Phase 7b -- Editorial-Story-Column (12.3 index.html, ersetzt
   .warum-grid/.card vollständig) --------------------------------------
   3 groß angelegte, alternierende Bild/Text-Zeilen statt 3 gleichwertiger
   Karten, mit einem einfachen 2-Spalten-Grid -- Bild füllt seine Spalte
   randlos bis zum Viewport-Rand, Text bleibt in einer an .wrap angelehnten
   Spaltenbreite (max-width:590px, per Padding-Formel randbündig zur
   bestehenden 1180px-Spalte ausgerichtet). Bewusst KEIN Hover-Tilt (siehe
   Begründung _design-konzept.md 12.3).
   BUGFIX (15.07.2026, 2. Playwright-Gegencheck durch Claude/Mira):
   .story-zeile trägt auch .reveal, und die Reveal-"sichtbar"-Regel setzt
   `transform:none` (siehe Abschnitt 22) -- das würde einen transform-
   basierten Vollbreite-Trick (`.vollbreit`: `left:50%;
   transform:translateX(-50%)`) beim Sichtbarwerden vollständig zerstören
   (transform ist eine EINZELNE Property, "none" überschreibt statt zu
   ergänzen). .story-zeile bekommt deshalb bewusst NICHT die `.vollbreit`-
   Klasse, sondern eine eigene, margin-basierte Vollbreite-Technik, die
   `transform` gar nicht erst anfasst -- funktioniert identisch, kollidiert
   aber nicht mit .reveal. Siehe auch die Warnung bei .vollbreit weiter
   oben (Abschnitt 2). */
.story-spalte{margin-top:var(--s5);display:flex;flex-direction:column;gap:var(--s3)}
.story-zeile{width:100vw;margin-left:calc(50% - 50vw);display:grid;grid-template-columns:1fr 1fr;min-height:70vh}
.story-bild{position:relative;overflow:hidden}
.story-bild img{width:100%;height:100%;object-fit:cover;display:block}
.story-text{display:flex;flex-direction:column;justify-content:center;max-width:590px;padding:var(--s4) 0}
.story-text h3{color:var(--terrakotta);margin-bottom:.4rem}
.story-text p{font-size:.98rem}
/* Bild links (Zeile 1 & 3): Text im rechten Grid-Track, an den rechten
   Rand der 1180px-Spalte angelehnt (identische Formel wie .wrap-Innenabstand). */
.story-zeile:not(.bild-rechts) .story-text{margin-left:auto;padding-right:max(24px, calc((100vw - 1180px)/2))}
/* Bild rechts (Zeile 2, spiegelverkehrt): Bild/Text-Reihenfolge im Grid
   getauscht, Text im linken Grid-Track, an den linken Rand angelehnt. */
.story-zeile.bild-rechts .story-bild{order:2}
.story-zeile.bild-rechts .story-text{order:1;margin-right:auto;padding-left:max(24px, calc((100vw - 1180px)/2))}
@media(max-width:760px){
  .story-zeile{grid-template-columns:1fr;min-height:auto}
  .story-zeile .story-bild{aspect-ratio:4/3;order:0}
  .story-zeile .story-text{order:1;max-width:none;margin:0;padding:var(--s4) 24px}
}

/* --- 26. Phase 7b -- Vollbreite Foto-Zitat-Sektion (12.3: "Blick in den
   Hofladen" auf sortiment.html + Editorial-Break auf ueber-uns.html) ----
   Gemeinsames Bauteil für beide Einsatzorte: Vollbreite-Foto + Gradient-
   Overlay (identisches Rezept wie .hero::before) + zentriertes großes
   Slab-Serif-Zitat. Mindesthöhe je Einsatzort über die jeweilige ID. */
.foto-zitat{
  position:relative;overflow:hidden;color:#fff;display:flex;
  align-items:center;justify-content:center;text-align:center;
}
.foto-zitat-bild{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.foto-zitat::before{
  content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(120deg,rgba(181,84,31,.82) 0%,rgba(124,55,20,.85) 55%,rgba(43,33,26,.9) 100%);
}
.foto-zitat-text{
  position:relative;z-index:2;font-family:var(--slab);font-style:italic;
  font-size:clamp(1.5rem,3.6vw,2.6rem);line-height:1.3;max-width:820px;padding:0 24px;
  text-shadow:0 2px 18px rgba(0,0,0,.25);
}
#laden-blick{min-height:64vh}
#ueber-uns-break{min-height:70vh}
@media(max-width:759px){
  #laden-blick{min-height:44vh}
  #ueber-uns-break{min-height:48vh}
}

/* --- 21. Responsive ----------------------------------------------------- */
@media(max-width:960px){
  .warenkorb-layout{grid-template-columns:1fr}
}
@media(max-width:860px){
  /* Fix 15.07.: .split.editorial (Spezifitaet 0,2,0, Zeile 508) schlug zuvor
     .split hier (0,1,0) -- Grid blieb 2-spaltig auf Mobile, Bild kollabierte.
     Jetzt direkt .split.editorial adressieren, gleiche Spezifitaet wie Basis. */
  .split.editorial,.kontakt-split{grid-template-columns:1fr;gap:32px}
}
@media(max-width:760px){
  section{padding:var(--s5) 0}
  .menu{display:none}
  .burger{display:flex}
  .menu.offen{display:flex;position:absolute;top:74px;left:0;right:0;flex-direction:column;gap:0;
    background:var(--weiss);border-bottom:1px solid var(--linie);box-shadow:var(--schatten);padding:8px 24px 18px;z-index:150}
  .menu.offen a{padding:13px 0;border-bottom:1px solid var(--hafer);font-size:1.05rem}
  .menu.offen a.aktiv::after{display:none}
  .kategorie-filter{top:74px}
  .footer-grid{grid-template-columns:1fr;gap:30px}
  .wk-position{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px}
  .wk-position .wk-bild{order:1}
  .wk-position > span:nth-child(2){order:2;flex:1 1 140px}
  .wk-position .mc-entfernen{order:3}
  .wk-position .stepper{order:4}
  .wk-position .wk-zeilensumme{order:5;text-align:left}

  /* Phase 7 (11.2): Bento-Kacheln fallen auf einspaltige Stapelung zurück,
     große Kachel bleibt oben (steht im Markup bereits an erster Stelle) --
     keine Sonderbehandlung nötig, siehe _design-konzept.md 11.2.
     BUGFIX (15.07.2026, 4. Playwright-Gegencheck durch Claude/Mira -- Bug
     stammt bereits aus Phase 7, hier zum ersten Mal per echtem Browser-
     Check gefunden): ".kategorien-bento > a{grid-area:auto}" hatte nur
     Spezifität (0,1,1) -- schwächer als die Basis-Regeln
     ".kategorien-bento .kachel-gross{grid-area:gross}" (0,2,0) UND
     ".kategorien-bento > a:nth-child(2..5){grid-area:b/c/d/e}" (0,2,1).
     Der Container wurde zwar korrekt zurückgesetzt (grid-template-
     areas:none), aber die 5 Kind-Links behielten ihre alte
     grid-area-Zuweisung -- alle 5 fielen dadurch in Chromium auf dieselbe
     erste Grid-Zelle zurück und lagen exakt übereinander (nur die oberste
     im DOM sichtbar). Fix: ":nth-child(n)" ergänzt (matcht weiterhin ALLE
     Kinder, hebt aber die Spezifität auf (0,2,1) -- schlägt jetzt beide
     Basis-Regeln zuverlässig, unabhängig von der Reihenfolge im
     Stylesheet). */
  .kategorien-bento{grid-template-columns:1fr;grid-template-areas:none}
  .kategorien-bento > a:nth-child(n){grid-area:auto}
  .kategorien-bento .kachel-gross .bild-platzhalter{aspect-ratio:4/3}

  /* Phase 7b (12.10): Trust-Leiste stapelt auf schmalen Viewports --
     Foto-Panel wird zur kurzen Kopfzeile, die 3 Stat-Zellen stapeln sich
     darunter (Zahl links, Label rechts spart vertikalen Platz gegenüber
     zentrierter Stapelung). */
  .trust-grid{grid-template-columns:1fr}
  .trust-foto{min-height:160px}
  .trust-stat{
    display:flex;flex-direction:row;justify-content:space-between;align-items:baseline;
    padding:16px clamp(20px,6vw,28px);border-top:1px solid rgba(255,255,255,.14);border-left:0;
  }
}
@media(max-width:639px){
  body{padding-bottom:64px}
  .mobil-leiste{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:90;
    background:var(--weiss);border-top:1px solid var(--linie);box-shadow:0 -6px 18px rgba(124,55,20,.12);
    padding:8px 12px;gap:10px}
  .mobil-leiste a{flex:1;min-height:48px;display:flex;align-items:center;justify-content:center;gap:7px;
    border-radius:50px;font-weight:600;font-size:.95rem;position:relative}
  .mobil-leiste .anruf{background:var(--hafer);color:var(--terrakotta);border:1px solid var(--linie)}
  .mobil-leiste .warenkorb-mobil{background:var(--terrakotta);color:#fff;border:0;cursor:pointer}
  .mobil-leiste a:hover{text-decoration:none}
  .hero-watermark,.footer-watermark{font-size:200px}
  .mini-cart{max-width:100%}

  /* Hero-Scroll-Video: kürzerer Spacer (mobile Nutzer scrollen ungeduldiger,
     H1/CTA bleiben ohnehin die ganze Zeit stehen, siehe _design-konzept.md 10.1) */
  .hero-scroll.js-scrub .hero-spacer{height:240vh}
  /* Badge: oben rechts wäre auf schmalen Viewports zu nah am Warenkorb-/
     Burger-Icon im Header -- stattdessen als eigene Zeile im normalen
     Textfluss statt absolut positioniert (liegt im DOM nach .wrap, s.
     index.html-Kommentar zur Desktop-Positionierungs-Einschränkung).
     Horizontale Einrückung manuell wie .wrap (padding 24px) nachgebildet,
     damit die Ausrichtung optisch zum übrigen Hero-Text passt. */
  .hero-video-badge{position:static;display:flex;width:fit-content;margin:18px 0 24px 24px}
}

/* Reduzierte Bewegung respektieren */
@media(prefers-reduced-motion:reduce){
  *{transition:none !important;scroll-behavior:auto !important;animation:none !important}
}