/* =======================================================================
   THEMA A3 - Speisekammer
   quadratisch, flach, salbeigrün — dichtes Raster für ein großes Sortiment

   Ueberschreibt Token aus tokens.css und ergaenzt wenige Regeln.
   Markup und styles.css sind identisch mit Variante A.
   Einbindung: tokens.css -> DIESE DATEI -> styles.css
   ======================================================================= */

:root {
  /* ---- Farbe ---- */
  --color-primary:           #2f5d43;
  --color-primary-focus:     #3a7052;
  --color-primary-on-dark:   #a4d7bb;
  --color-gold:              #b9a06a;
  --color-gold-dim:          rgba(185,160,106,.38);
  --color-canvas-parchment:  #eff2ec;
  --color-canvas-sage:       #dce5dc;
  --color-surface-pearl:     #f7faf6;
  --color-surface-tile-1:    #1d2a24;
  --color-surface-tile-2:    #223028;
  --color-surface-tile-3:    #17211c;
  --color-surface-olive:     #33553f;
  --color-surface-black:     #0c1310;
  --color-ink:               #151d18;
  --color-ink-muted-80:      #2d382f;
  --color-ink-muted-48:      #6d786f;
  --color-body-muted:        #c2cfc4;
  --color-hairline:          #cfdacd;

  /* ---- Form, Schrift, Rhythmus ---- */
  --r-xs:                    0;
  --r-sm:                    0;
  --r-md:                    0;
  --r-lg:                    0;
  --r-pill:                  0;
  --shadow-product:          none;
  --shadow-product-dark:     none;
  --fw-strong:               600;
  --lh-body:                 1.62;
  --ls-body:                 -0.008em;
  --sp-section:              clamp(64px, 4rem + 5vw, 120px);
  --w-grid:                  1560px;

  /* Verlaufskette muss mitwandern, sonst laeuft der Hero in die
     Farbe der alten Sektion aus. */
  --scrim-hero: linear-gradient(to top, #1d2a24 0%, rgba(14,21,17,.74) 26%, rgba(14,21,17,.34) 58%, rgba(14,21,17,.14) 78%, rgba(14,21,17,.34) 100%);
  --scrim-band: linear-gradient(to top, rgba(14,21,17,.78) 0%, rgba(14,21,17,.24) 38%, rgba(14,21,17,0) 68%, rgba(14,21,17,.30) 100%);
}

/* Statt Schatten eine Haarlinie - flach und ruhig */
.card, .frame { border: 1px solid var(--color-hairline); }
.is-dark .card, .is-dark .frame { border-color: var(--color-hairline-on-dark); }

/* Dichteres Raster: ein wachsendes Feinkostsortiment passt in dieselbe
   Seitenhoehe, statt sie immer laenger werden zu lassen. */
.grid { grid-template-columns: repeat(auto-fill, minmax(min(248px, 100%), 1fr)); }
.varieties { grid-template-columns: repeat(auto-fit, minmax(min(186px, 100%), 1fr));
  max-width: 1320px; }

/* Ruhigere Eyebrows, mehr Luft im Kopf der Sektion */
.tile__eyebrow, .hero__eyebrow { letter-spacing: .16em; font-weight: var(--fw-regular); }
.btn { font-weight: var(--fw-regular); }