/* =========================================================================
   styles.css — Landing Page
   Aufbau nach dem Apple-Tile-Prinzip: randlose Sektionen, die sich hell/
   dunkel abwechseln. Der Farbwechsel IST der Trenner — keine Rahmen,
   keine Schatten, keine Verläufe als Dekoration.
   ========================================================================= */

/* ---------- Reset ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

body {
  font-family: var(--font-text);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  color: var(--color-ink);
  background: var(--color-canvas);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; }

:focus-visible {
  outline: 2px solid var(--color-primary-focus);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.is-dark :focus-visible { outline-color: var(--color-primary-on-dark); }

.skip-link {
  position: absolute; left: var(--sp-sm); top: var(--sp-sm);
  transform: translateY(-200%);
  background: var(--color-canvas); color: var(--color-ink);
  padding: var(--sp-sm) var(--sp-lg); border-radius: var(--r-sm);
  z-index: 100;
}
.skip-link:focus { transform: none; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* ---------- Typografie-Klassen ---------------------------------------- */
.t-hero {
  font-family: var(--font-display);
  font-size: var(--fs-hero); font-weight: var(--fw-strong);
  line-height: var(--lh-hero); letter-spacing: var(--ls-hero);
}
.t-display {
  font-family: var(--font-display);
  font-size: var(--fs-display-lg); font-weight: var(--fw-strong);
  line-height: var(--lh-display); letter-spacing: var(--ls-display);
}
.t-display-md {
  font-family: var(--font-display);
  font-size: var(--fs-display-md); font-weight: var(--fw-strong);
  line-height: 1.2; letter-spacing: var(--ls-display);
}
.t-lead {
  font-size: var(--fs-lead); font-weight: var(--fw-regular);
  line-height: var(--lh-lead); letter-spacing: .007em;
}
.t-lead-airy {
  font-size: var(--fs-lead-airy); font-weight: var(--fw-airy);
  line-height: 1.5; letter-spacing: 0;
}
.t-tagline {
  font-size: var(--fs-tagline); font-weight: var(--fw-strong);
  line-height: 1.19; letter-spacing: .011em;
}
.t-caption {
  font-size: var(--fs-caption); line-height: 1.43; letter-spacing: var(--ls-caption);
}
.t-fine {
  font-size: var(--fs-fine); line-height: 1.5; letter-spacing: var(--ls-nano);
  color: var(--color-ink-muted-48);
}
.is-dark .t-fine { color: var(--color-body-muted); opacity: .72; }

/* ---------- Buttons ---------------------------------------------------- */
/* Grammatik: Pille = Aktion. Rechteck = Werkzeug. Nichts dazwischen.     */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-xs);
  text-decoration: none; cursor: pointer;
  border: 0; background: none;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}
.btn:active { transform: scale(.95); }   /* die System-Mikrointeraktion */

.btn--primary {
  background: var(--color-primary); color: var(--color-on-primary);
  font-size: var(--fs-body); font-weight: var(--fw-regular);
  border-radius: var(--r-pill);
  padding: 11px 22px;
  min-height: 44px;
}
.btn--primary:hover { background: var(--color-primary-focus); }

.btn--ghost {
  background: transparent; color: var(--color-primary);
  border: 1px solid var(--color-primary);
  font-size: var(--fs-body); border-radius: var(--r-pill);
  padding: 10px 21px; min-height: 44px;
}
.is-dark .btn--ghost { color: var(--color-primary-on-dark); border-color: var(--color-primary-on-dark); }

.btn--utility {
  background: var(--color-ink); color: var(--color-on-dark);
  font-size: var(--fs-caption); letter-spacing: var(--ls-caption);
  border-radius: var(--r-sm); padding: 8px 15px;
}

.btn--large { font-size: 1.125rem; font-weight: var(--fw-airy); padding: 14px 28px; }

/* Textlinks — der einzige „click me"-Ton der Seite. */
.link {
  color: var(--color-primary); text-decoration: none;
  font-size: var(--fs-body);
}
.link:hover { text-decoration: underline; }
.link::after { content: " ›"; }
.is-dark .link { color: var(--color-primary-on-dark); }

.cta-row {
  display: flex; flex-wrap: wrap; gap: var(--sp-md);
  justify-content: center; align-items: center;
  margin-top: var(--sp-lg);
}
.cta-row--links { gap: var(--sp-xl); }

/* ---------- Global Nav ------------------------------------------------- */
.global-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-surface-black);
  height: var(--nav-h);
}
.global-nav__inner {
  max-width: var(--w-grid); margin-inline: auto; height: 100%;
  display: flex; align-items: center; gap: var(--sp-lg);
  padding-inline: var(--sp-lg);
}
.global-nav a {
  color: var(--color-on-dark); text-decoration: none;
  font-size: var(--fs-fine); letter-spacing: var(--ls-nano);
  opacity: .82; transition: opacity .18s ease;
  padding: var(--sp-sm) 0;
}
.global-nav a:hover { opacity: 1; }
.global-nav__brand { font-weight: var(--fw-strong); opacity: 1 !important; letter-spacing: .14em; }
.global-nav__spacer { margin-left: auto; }

/* ---------- Sub-Nav (Frosted) ------------------------------------------ */
.sub-nav {
  position: sticky; top: var(--nav-h); z-index: 49;
  height: var(--subnav-h);
  background: color-mix(in srgb, var(--color-canvas-parchment) 80%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--color-divider-soft);
}
.sub-nav__inner {
  max-width: var(--w-grid); margin-inline: auto; height: 100%;
  display: flex; align-items: center; gap: var(--sp-lg);
  padding-inline: var(--sp-lg);
}
.sub-nav__title {
  font-size: var(--fs-tagline); font-weight: var(--fw-strong);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-ink); text-decoration: none; white-space: nowrap;
}
.sub-nav__links { display: flex; gap: var(--sp-lg); margin-left: auto; }
.sub-nav__links a {
  font-size: var(--fs-caption); letter-spacing: var(--ls-caption);
  color: var(--color-ink); text-decoration: none; opacity: .78;
}
.sub-nav__links a:hover { opacity: 1; }
.sub-nav .btn--primary { padding: 7px 16px; min-height: 34px; font-size: var(--fs-caption); }

/* ---------- Tiles ------------------------------------------------------ */
/* Randlos, kein Radius, kein Rahmen. Der Farbwechsel ist der Trenner.    */
.tile {
  padding-block: var(--sp-section);
  padding-inline: var(--sp-lg);
  border-radius: var(--r-none);
  text-align: center;
  overflow: hidden;
}
.tile--light     { background: var(--color-canvas);           color: var(--color-ink); }
.tile--parchment { background: var(--color-canvas-parchment); color: var(--color-ink); }
.tile--dark      { background: var(--color-surface-tile-1);   color: var(--color-on-dark); }
.tile--dark-2    { background: var(--color-surface-tile-2);   color: var(--color-on-dark); }
.tile--dark-3    { background: var(--color-surface-tile-3);   color: var(--color-on-dark); }

.tile__inner { max-width: var(--w-content); margin-inline: auto; }
.tile__inner--wide { max-width: var(--w-grid); }

.tile__eyebrow {
  font-size: var(--fs-caption); font-weight: var(--fw-strong);
  letter-spacing: .18em; text-transform: uppercase;
  color: var(--color-ink-muted-48);
  margin-bottom: var(--sp-sm);
}
.is-dark .tile__eyebrow { color: var(--color-body-muted); }

.tile__sub { margin-top: var(--sp-sm); }
.is-dark .tile__sub { color: var(--color-body-muted); }

.tile__stage { margin-top: var(--sp-xxl); }

/* ---------- Fotografie ------------------------------------------------- */
/* Die Fotos tragen die Seite. Die Oberfläche tritt zurück.               */
.photo { width: 100%; height: 100%; object-fit: cover; display: block; }
.frame {
  border-radius: var(--r-lg); overflow: hidden;
  background: var(--color-canvas-sage);
}
.frame--shadow { box-shadow: var(--shadow-product); }
.is-dark .frame--shadow { box-shadow: var(--shadow-product-dark); }
.frame--4x5 { aspect-ratio: 4 / 5; }
.frame--3x2 { aspect-ratio: 3 / 2; }
.frame--4x3 { aspect-ratio: 4 / 3; }

/* ---------- Bewegung ---------------------------------------------------- */
/* Sehr langsam und sehr klein. Alles hier ist unter prefers-reduced-motion
   abgeschaltet (siehe Reset oben).                                        */
@keyframes drift {
  0%, 100% { transform: scale(1.06) translate3d(0, 0, 0); }
  50%      { transform: scale(1.13) translate3d(-1.6%, -1.2%, 0); }
}
@keyframes sheen {
  from { transform: translateX(-60%) skewX(-14deg); }
  to   { transform: translateX(220%) skewX(-14deg); }
}
@keyframes breathe { 0%, 100% { opacity: .34; } 50% { opacity: .62; } }
@keyframes cue     { 0%, 100% { transform: translateY(0); opacity: .45; } 50% { transform: translateY(7px); opacity: .95; } }

/* ---------- Hero: Vollbild-Foto ---------------------------------------- */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: min(88vh, 820px);
  display: grid; align-items: end; justify-items: center;
  text-align: center;
  padding: var(--sp-section) var(--sp-lg) clamp(72px, 8vw, 120px);
  color: var(--color-on-dark);
  background: var(--color-surface-tile-3);
}
.hero__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -3;
  animation: drift 30s ease-in-out infinite;   /* Ken Burns, kaum merklich */
}
/* Wanderndes Streiflicht — 6 % Weiß, mehr nicht. */
.hero__sheen {
  position: absolute; top: -20%; left: 0; width: 32%; height: 140%;
  z-index: -2; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.06), rgba(255,255,255,0));
  animation: sheen 13s linear infinite;
}
/* Goldschein hinter der Headline — nimmt den Ton des Öls auf. */
.hero__glow {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: radial-gradient(60% 45% at 50% 78%, rgba(201,162,39,.16) 0%, rgba(201,162,39,0) 70%);
  animation: breathe 9s ease-in-out infinite;
}
/* Kein dekorativer Verlauf — Lesbarkeits-Schleier, der unten exakt in der
   Farbe der Folgesektion endet. Dadurch geht der Hero in sie über.       */
.hero::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--scrim-hero); }
.hero__inner { max-width: 820px; }
.hero .tile__sub { color: rgba(255, 255, 255, .88); }
.hero__eyebrow {
  font-size: var(--fs-fine); letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 255, 255, .62); margin-bottom: var(--sp-lg);
}
.hero__cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  color: rgba(255, 255, 255, .6);
  font-size: var(--fs-micro); letter-spacing: .2em; text-transform: uppercase;
}
.hero__cue i {
  display: block; width: 1px; height: 26px;
  background: linear-gradient(to bottom, rgba(255,255,255,.7), rgba(255,255,255,0));
  animation: cue 2.6s ease-in-out infinite;
}

/* ---------- Vollbild-Bildband ------------------------------------------ */
.band {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(420px, 46vw, 660px);
  display: grid; align-items: end;
  background: var(--color-surface-tile-3);
}
.band__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
  animation: drift 38s ease-in-out infinite;
}
.band::after { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--scrim-band); }
.band__caption {
  max-width: var(--w-grid); width: 100%; margin-inline: auto;
  padding: var(--sp-xl) var(--sp-lg) clamp(40px, 5vw, 56px);
  color: var(--color-on-dark); text-align: left;
}
.band__caption p { color: rgba(255, 255, 255, .8); max-width: 48ch; margin-top: var(--sp-xxs); }
.band--short { min-height: clamp(280px, 32vw, 460px); }

/* ---------- Tile mit Foto-Untergrund ----------------------------------- */
/* Nur für Texturen (Rinde, Stein), nicht für Szenen — sonst kämpft das
   Bild mit dem Text statt ihn zu tragen.                                 */
.tile--photo { position: relative; isolation: isolate; overflow: hidden; }
.tile__bg {
  position: absolute; inset: -8%; width: 116%; height: 116%;
  object-fit: cover; z-index: -3;
  animation: drift 44s ease-in-out infinite;
}
.tile--photo::before {
  content: ''; position: absolute; inset: 0; z-index: -2;
  background: rgba(20, 30, 12, .8);
}

/* ---------- Sortenraster ------------------------------------------------ */
.varieties {
  display: grid; gap: var(--sp-lg);
  grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
  max-width: 1100px; margin: var(--sp-xxl) auto 0; text-align: left;
}
.variety { text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: var(--sp-sm); }
.variety .frame { transition: transform .45s cubic-bezier(.2, .8, .2, 1); }
.variety:hover .frame { transform: translateY(-5px); }
.variety__head { display: flex; align-items: center; gap: var(--sp-xs); }
/* Zweitkodierung: Piktogramm + Wortmarke + Farbfamilie. Farbe allein trägt
   nur bis etwa acht Sorten — wir planen für vierzig.                     */
.variety__glyph { width: 22px; height: 22px; flex: 0 0 auto; color: var(--variety, var(--color-primary)); }
.variety__name { font-size: var(--fs-body); font-weight: var(--fw-strong); }
.variety__meta { font-size: var(--fs-fine); color: var(--color-ink-muted-48); }
.is-dark .variety__meta { color: var(--color-body-muted); }

/* ---------- alter SVG-Slot (bleibt für Notfälle) ----------------------- */
/* HIER kommen die Higgsfield-Bilder rein: <img> statt der SVG-Flasche.
   Der Slot behält Seitenverhältnis und Schatten, egal was drin liegt.    */
/* Über die HÖHE dimensioniert, nicht die Breite — sonst wachsen die
   3,3:1-Renders auf Mobilgeräten ins Absurde. */
.render {
  display: block; margin-inline: auto; width: auto;
  filter: drop-shadow(var(--shadow-product));
}
.is-dark .render { filter: drop-shadow(var(--shadow-product-dark)); }
.render--hero  { height: clamp(260px, 34vw, 400px); }
.render--star  { height: clamp(280px, 36vw, 440px); }
.render--small { height: clamp(120px, 17vw, 190px); }

/* ---------- Milenario: das einzige Gold der Seite ---------------------- */
.milenario { position: relative; }
.milenario__rule {
  width: 64px; height: 1px; margin: 0 auto var(--sp-lg);
  background: var(--color-gold);
}
.milenario__seal {
  display: inline-flex; align-items: center; gap: var(--sp-xs);
  border: 1px solid var(--color-gold-dim);
  border-radius: var(--r-pill);
  padding: 6px 16px;
  font-size: var(--fs-fine); letter-spacing: .14em; text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: var(--sp-lg);
}

/* Foto links, Kennzahlen rechts — die Flasche ist hier das Argument. */
.milenario__split {
  display: grid; gap: var(--sp-xxl); align-items: center;
  margin-top: var(--sp-xxl); text-align: left;
}
@media (min-width: 834px) { .milenario__split { grid-template-columns: .9fr 1.1fr; } }

.milenario__facts {
  display: grid; gap: var(--sp-lg) var(--sp-xl);
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  border-top: 1px solid var(--color-hairline-on-dark);
  padding-top: var(--sp-xl); margin-top: var(--sp-lg);
}
.fact__value {
  font-family: var(--font-display);
  font-size: var(--fs-display-md); font-weight: var(--fw-strong);
  letter-spacing: var(--ls-display); line-height: 1.1;
  color: var(--color-gold);
}
.fact__label {
  font-size: var(--fs-caption); letter-spacing: var(--ls-caption);
  color: var(--color-body-muted); margin-top: var(--sp-xxs);
}

/* Presseleiste — ruhig und typografisch, kein Badge-Friedhof. */
.press {
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: var(--sp-xl); margin-top: var(--sp-xxl);
  padding-top: var(--sp-lg); border-top: 1px solid var(--color-hairline-on-dark);
  font-size: var(--fs-fine); letter-spacing: .16em; text-transform: uppercase;
  color: var(--color-body-muted); opacity: .62;
}

/* ---------- Geschenkbox ------------------------------------------------ */
.gift {
  display: grid; gap: var(--sp-xxl);
  grid-template-columns: 1fr;
  align-items: center; text-align: left;
  margin-top: var(--sp-xxl);
}
@media (min-width: 834px) {
  .gift { grid-template-columns: 1.05fr .95fr; }
}
.gift__steps { list-style: none; padding: 0; display: grid; gap: var(--sp-md); }
.gift__steps li { display: flex; gap: var(--sp-sm); align-items: baseline; }
.gift__num {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: var(--r-pill);
  background: var(--color-primary); color: var(--color-on-primary);
  display: inline-grid; place-items: center;
  font-size: var(--fs-fine); font-weight: var(--fw-strong);
}
.gift .cta-row { justify-content: flex-start; }

/* ---------- Sortiment-Raster (die erweiterbare Stelle) ----------------- */
.grid {
  display: grid; gap: var(--sp-lg);
  /* 3 Spalten bei Desktop → die 6 Kacheln füllen zwei Reihen restlos.
     Kommt eine Warengruppe dazu, wächst das Raster von allein. */
  grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
  max-width: 1100px; margin: var(--sp-xxl) auto 0;
  text-align: left;
}
.card {
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
  display: flex; flex-direction: column; gap: var(--sp-sm);
  text-decoration: none; color: inherit;
  transition: border-color .2s ease, transform .3s cubic-bezier(.2,.8,.2,1);
}
.card:hover { border-color: var(--color-primary); transform: translateY(-3px); }
.card__figure {
  background: var(--color-canvas-sage);
  border-radius: var(--r-sm);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.card__name { font-size: var(--fs-body); font-weight: var(--fw-strong); }
.card__price { font-size: var(--fs-body); }
/* Grundpreis ist bei Ölen Pflicht (PAngV) — fester Platz, nicht optional. */
.card__base { font-size: var(--fs-fine); color: var(--color-ink-muted-48); margin-top: calc(var(--sp-xxs) * -1); }
.card__link { margin-top: auto; }

.card--soon {
  border-style: dashed; background: transparent;
  align-items: flex-start; justify-content: center;
  min-height: 240px;
}
.card--soon:hover { transform: none; }
.card--soon .card__name { color: var(--color-ink-muted-48); }

/* ---------- Herkunft --------------------------------------------------- */
.origin { display: grid; gap: var(--sp-xl); text-align: left; }
@media (min-width: 834px) { .origin { grid-template-columns: 1fr 1fr; align-items: center; } }
/* ---------- Volloliv-Tile (Abschluss) ---------------------------------- */
.tile--olive { background: var(--color-surface-olive); color: var(--color-on-dark); }
.tile--olive .btn--primary {
  background: var(--color-canvas); color: var(--color-surface-olive);
  font-weight: var(--fw-strong);
}
.tile--olive .btn--primary:hover { background: var(--color-canvas-parchment); }

/* ---------- Footer ----------------------------------------------------- */
.footer {
  background: var(--color-canvas-parchment);
  color: var(--color-ink-muted-80);
  padding: 64px var(--sp-lg) var(--sp-xxl);
}
.footer__inner { max-width: var(--w-grid); margin-inline: auto; }
.footer__cols {
  display: grid; gap: var(--sp-xl);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.footer h2 {
  font-size: var(--fs-caption); font-weight: var(--fw-strong);
  letter-spacing: var(--ls-caption); margin-bottom: var(--sp-xs);
}
.footer ul { list-style: none; padding: 0; }
.footer li a {
  font-size: var(--fs-body); line-height: var(--lh-dense);
  color: var(--color-ink-muted-80); text-decoration: none;
}
.footer li a:hover { text-decoration: underline; }
.footer__legal {
  border-top: 1px solid var(--color-hairline);
  margin-top: var(--sp-xl); padding-top: var(--sp-lg);
  display: flex; flex-wrap: wrap; gap: var(--sp-md) var(--sp-lg);
  align-items: center;
}
.footer__legal p { font-size: var(--fs-fine); color: var(--color-ink-muted-48); }
.footer__legal nav { display: flex; flex-wrap: wrap; gap: var(--sp-md); margin-left: auto; }
.footer__legal nav a {
  font-size: var(--fs-fine); color: var(--color-ink-muted-48); text-decoration: none;
}
.footer__legal nav a:hover { text-decoration: underline; }

/* ---------- Consent-Platz ---------------------------------------------- */
/* Kein Banner gebaut — nur der Platz, damit er später nichts zerschießt. */
.consent-slot {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  background: color-mix(in srgb, var(--color-canvas) 92%, transparent);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-top: 1px solid var(--color-hairline);
  padding: var(--sp-sm) var(--sp-lg);
  display: flex; flex-wrap: wrap; gap: var(--sp-sm) var(--sp-lg);
  align-items: center; justify-content: center;
}
.consent-slot[hidden] { display: none; }
.consent-slot .btn--primary { padding: 8px 18px; min-height: 38px; font-size: var(--fs-caption); }

/* ---------- Reveal (ohne JS voll lesbar) ------------------------------- */
.js .reveal { opacity: 0; transform: translateY(20px); }
.js .reveal.is-revealed {
  opacity: 1; transform: none;
  transition: opacity .7s ease, transform .7s cubic-bezier(.2,.8,.2,1);
}
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ---------- Responsive Feinschliff -------------------------------------- */
@media (max-width: 833px) {
  .sub-nav__links { display: none; }
  .sub-nav__links + .btn { margin-left: auto; }
  .global-nav__inner { gap: var(--sp-md); overflow-x: auto; scrollbar-width: none; }
  .global-nav__inner::-webkit-scrollbar { display: none; }
  .milenario__facts { gap: var(--sp-lg) var(--sp-xl); }
}
@media (max-width: 640px) {
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; }
  .cta-row--links { flex-direction: row; justify-content: center; }
  .press { gap: var(--sp-md); }
  /* Sorten zweispaltig — vier Fotos untereinander machen die Seite endlos. */
  .varieties { grid-template-columns: 1fr 1fr; gap: var(--sp-md); }
  .variety__meta { font-size: var(--fs-micro); line-height: 1.5; }
  .band--short { min-height: 260px; }
}

/* =========================================================================
   SEKTIONSFOLGE — Verlaufskanten
   Regel: Jede Sektion beginnt in der ENDfarbe der vorigen und endet in der
   ANFANGsfarbe der nächsten. Dadurch reißt nirgends eine harte Kante auf,
   ohne dass der Apple-Grundsatz „der Farbwechsel ist der Trenner" fällt —
   der Wechsel bleibt, er bekommt nur eine Übergangszone.
   Wer hier eine Sektion einschiebt, muss BEIDE Nachbarn mit anfassen.
   Reihenfolge: Hero → Milenario → Baum-Band → Öle → Öl-Band → Geschenk →
                Sortiment → Herkunft → Abschluss → Footer
   ========================================================================= */

.sec-milenario::after {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(to bottom,
    #1e2a15 0%, rgba(30, 42, 21, 0) 16%,
    rgba(30, 42, 21, 0) 84%, #1c2814 100%);
}

.sec-band-baum::after {
  background: linear-gradient(to bottom,
    #1c2814 0%, rgba(28, 40, 20, .60) 12%,
    rgba(28, 40, 20, 0) 32%, rgba(28, 40, 20, 0) 62%,
    rgba(16, 22, 10, .72) 88%, #f7f6ef 100%);
}

.sec-oele {
  background: linear-gradient(to bottom,
    #f7f6ef 0%, #ffffff 220px, #ffffff 78%, #f4f2e8 100%);
}

.sec-band-oel::after {
  background: linear-gradient(to bottom,
    #f4f2e8 0%, rgba(244, 242, 232, .35) 9%,
    rgba(28, 40, 20, 0) 28%, rgba(28, 40, 20, 0) 60%,
    rgba(16, 22, 10, .72) 86%, #e5e3d4 100%);
}

.sec-geschenke { background: linear-gradient(to bottom, #e5e3d4 0%, #f1efe3 180px); }

.sec-sortiment {
  background: linear-gradient(to bottom,
    #f1efe3 0%, #ffffff 260px, #ffffff 82%, #f4f2e8 100%);
}

.sec-herkunft {
  background: linear-gradient(to bottom,
    #2c3c1e 0%, #22301a 240px, #22301a 82%, #2b3f1f 100%);
}

.sec-abschluss {
  background: linear-gradient(to bottom,
    #2b3f1f 0%, #3a5228 200px, #3a5228 70%, #48642f 100%);
}

/* Sub-Nav: feiner Unterstrich beim Überfahren statt nur Deckkraft. */
.sub-nav__links a { position: relative; padding-block: 4px; }
.sub-nav__links a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform .28s cubic-bezier(.2, .8, .2, 1);
}
.sub-nav__links a:hover::after { transform: scaleX(1); }

/* Ken Burns und Streiflicht nur am Desktop. Vier großformatige Bilder, die
   dauerhaft transformieren, kosten auf dem Handy Akku ohne Gegenwert —
   und der Effekt ist auf 390 px Breite ohnehin nicht zu sehen. */
@media (max-width: 833px) {
  .hero__img, .band__img, .tile__bg, .hero__sheen, .hero__glow { animation: none; }
  .tile__bg { inset: 0; width: 100%; height: 100%; }
}

/* Sprungmarken: Platz für die klebende Kopfzeile lassen, sonst
   verschwindet die Überschrift darunter. */
[id] { scroll-margin-top: 104px; }