/* GENERATED by scripts/build-css.mjs — do NOT edit directly.
   Edit the module files (tokens.css, base.css, …) and run: npm run css */

/* ===================== tokens.css ===================== */
/* ============================================================
   VOIGT HAUSGEMACHTES — Design tokens (palette, spacing, shadows, image refs)
   ============================================================ */

:root{
  /* Palette */
  --wattenmeer:#123B40;      /* deep North Sea — primary dark/text */
  --wattenmeer-90:#1c4a4f;
  --himmel:#AED4DC;          /* Sylter sky — signature soft tone */
  --himmel-soft:#D6EAEE;
  --duene:#E8DCC4;           /* warm dune sand */
  --liebstoeckel:#4F6E37;    /* lovage herb green — primary accent */
  --liebstoeckel-dk:#3d5729;
  --bernstein:#C0822E;       /* amber — warmth, price (on light) */
  --bernstein-bright:#E6B566; /* lighter amber — accents on dark (AA contrast) */
  --bernstein-deep:#9C6212;   /* darker amber — small text on light (AA contrast) */
  --salz:#F7F4EC;            /* salt white — background */
  --salz-2:#FBF9F3;
  --line:rgba(18,59,64,.14);
  --line-soft:rgba(18,59,64,.08);
  --shadow-sm:0 2px 10px rgba(18,59,64,.06);
  --shadow:0 14px 40px -16px rgba(18,59,64,.28);
  --shadow-lg:0 30px 70px -28px rgba(18,59,64,.40);
  --r:18px;
  --r-sm:12px;
  --container:1240px;
  --header-h:74px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --bg-show:url("../images/lifestyle-salad.jpg");
  --bg-b2b:url("../images/lifestyle-dish.jpg");

  /* ---------- Typo-Skala ----------
     Vorher standen 48 freie rem-Werte im CSS, allein 19 davon zwischen .6 und
     1.0 rem — Abstufungen von .01rem (≈0,16px) sind nicht unterscheidbar,
     erzeugen aber bei jeder Änderung die Frage "welcher Wert war hier richtig".
     Die Stufen liegen auf den Häufungen der Ist-Werte, damit die Umstellung
     optisch nicht auffällt. */
  --fs-2xs:.68rem;
  --fs-xs:.74rem;
  --fs-sm:.8rem;
  --fs-base:.86rem;
  --fs-md:.93rem;
  --fs-lg:1.05rem;
  --fs-xl:1.2rem;
  --fs-2xl:1.4rem;
  --fs-3xl:1.6rem;
  --fs-4xl:1.9rem;

  /* Fluide Überschriften — ersetzen 20 fast identische clamp()-Definitionen
     (es gab u.a. vier Varianten von clamp(2rem,4.4vw,3…rem)). */
  --fs-display:clamp(2.9rem,6.8vw,5.6rem);
  --fs-h1:clamp(2rem,4.4vw,3.2rem);
  --fs-h2:clamp(1.9rem,4vw,2.9rem);
  --fs-h3:clamp(1.5rem,3.4vw,2.4rem);

  --lh-tight:1.06;
  --lh-snug:1.25;
  --lh-normal:1.5;
  --lh-relaxed:1.6;
  --lh-loose:1.8;

  /* Laufweite: für dasselbe Uppercase-Label-Muster standen .22/.18/.16/.14em
     nebeneinander — je nach Datei, in der es geschrieben wurde. */
  --ls-wide:.16em;
  --ls-wider:.22em;

  /* ---------- Spacing (4px-Basis) ----------
     Die Ist-Werte kannten weder 4er- noch 8er-Raster: 5, 7, 9, 13, 26, 34, 46,
     58 und 78px standen frei im Code. Der Bestand wurde ab 16px auf das Raster
     gezogen; darunter blieben die Werte stehen, weil 2px dort optische
     Feinjustierung sind (Icon-Ausrichtung) und keine Layout-Abstände.
     Die Skala ist bewusst vollständig — sie ist die Vorgabe für neuen Code,
     nicht bloß eine Liste der aktuell belegten Stufen. */
  --sp-1:4px;   --sp-2:8px;   --sp-3:12px;  --sp-4:16px;
  --sp-5:20px;  --sp-6:24px;  --sp-8:32px;  --sp-10:40px;
  --sp-12:48px; --sp-16:64px; --sp-20:80px;

  /* Stagger-Verzögerung der Reveal-Animation. Wird zur Laufzeit je Element von
     src/features/reveal.js gesetzt; der Default hält die Regel gültig, solange
     (oder falls) kein JS läuft. */
  --rd:0ms;

  /* ---------- Scrims: eine Dunkelbasis ----------
     KONVENTION, kein Token: Abdunkelnde Overlays über Fotos werden aus
     rgba(18,59,64,α) gebildet — derselben Basis wie --wattenmeer. Vorher lagen
     dafür drei praktisch gleiche Grüntöne nebeneinander (11,36,38 · 13,42,42 ·
     13,40,42), je nachdem in welcher Datei die Regel entstand.
     Die Deckkraft bleibt frei wählbar: bei Verlaufs-Scrims sind die Stopps
     gestalterisch gesetzt, eine feste Alpha-Skala würde sie zerstören.

     Bewusst NICHT auf diese Basis gezogen, weil dort die Farbe die Gestaltung
     ist — nicht bloß Abdunklung:
       rgba(9,72,102) · rgba(8,54,76) · rgba(6,45,64) → Blaugradierung des
         Studio-Videos in .film__media (arbeitet mit mix-blend-mode)
       rgba(12,30,24) · rgba(10,28,20) → warme Schlagschatten der Flasche
         in .showcase__bottle / .showcase__pedestal                        */

  /* ---------- z-index ----------
     Benennt die vorhandene Stapelung, statt sie umzunummerieren — die
     Reihenfolge stimmt, sie stand nur als nackte Zahl im Code (u.a. eine 59,
     die sich manuell unter den Header von 60 schiebt). Werte unverändert,
     damit sich die Schichtung nicht verschiebt. */
  --z-mega:59;        /* Mega-Panel: schiebt sich unter die Headerleiste */
  --z-header:60;
  --z-dropdown:70;    /* Sprachmenü */
  --z-totop:80;
  --z-overlay:90;
  --z-drawer:100;     /* Warenkorb + mobile Navigation */
  --z-consent:120;
  --z-modal:130;
  --z-skip:200;       /* Skip-Link muss über allem Normalen liegen */
  --z-lightbox:300;

  /* ---------- Breakpoints (Konvention, nicht technisch nutzbar) ----------
     Custom Properties funktionieren NICHT in @media-Bedingungen. Diese Liste
     ist die verbindliche Absprache; es gab vorher 15 verschiedene Grenzen,
     sechs davon zwischen 540 und 700px, plus 1080 und 1100 in zwei Dateien.
       600px  · Phone
       760px  · große Phone / kleines Tablet
       860px  · Tablet          (häufigste Ist-Grenze)
       960px  · großes Tablet
       1100px · Desktop / Umschaltpunkt der Hauptnavigation           */
}

/* Serve the AVIF/WebP twins for the two full-bleed backgrounds (710 KB → 124 KB).
   Both tokens are consumed inside `background` shorthands, so an unparseable
   value would take the overlay gradient down with it and leave light text on a
   light photo. @supports keeps the JPEG for anything that can't read image-set()
   with type() — the query is deliberately written with type() so Firefox < 113,
   which supports image-set() but not the type hint, also stays on the fallback. */
@supports (background-image:image-set(url("x.avif") type("image/avif"))){
  :root{
    --bg-show:image-set(url("../images/lifestyle-salad.avif") type("image/avif"),
                        url("../images/lifestyle-salad.webp") type("image/webp"),
                        url("../images/lifestyle-salad.jpg") type("image/jpeg"));
    --bg-b2b:image-set(url("../images/lifestyle-dish.avif") type("image/avif"),
                       url("../images/lifestyle-dish.webp") type("image/webp"),
                       url("../images/lifestyle-dish.jpg") type("image/jpeg"));
  }
}


/* ===================== base.css ===================== */
/* ============================================================
   VOIGT HAUSGEMACHTES — Base: reset, typography, layout primitives, buttons
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Hanken Grotesk",system-ui,sans-serif;
  color:var(--wattenmeer);
  background:var(--salz);
  line-height:var(--lh-relaxed);
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
body.no-scroll{overflow:hidden}
img{max-width:100%;display:block}
/* <picture> is a pure format-negotiation wrapper — take it out of the layout so
   every `.foo img{height:100%}` rule keeps addressing its real parent box. */
picture{display:contents}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
ul{list-style:none}

h1,h2,h3,h4,.display{font-family:"Fraunces",Georgia,serif;font-weight:500;line-height:var(--lh-tight);letter-spacing:-.01em}

.container{width:100%;max-width:var(--container);margin:0 auto;padding:0 clamp(18px,4vw,46px)}
.eyebrow{
  font-size:var(--fs-xs);font-weight:600;letter-spacing:var(--ls-wider);text-transform:uppercase;
  color:var(--liebstoeckel);display:inline-flex;align-items:center;gap:.6em;
}
.eyebrow::before{content:"";width:26px;height:1.5px;background:var(--bernstein)}
.section{padding:clamp(78px,10.5vw,152px) 0}

/* Horizon divider — signature motif (where dune meets Sylt sky) */
.horizon{position:relative;height:1px;background:var(--line);overflow:visible}
.horizon::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:9px;height:9px;border-radius:50%;background:var(--bernstein);
  box-shadow:0 0 0 5px var(--salz);
}

/* Buttons */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font-weight:600;font-size:var(--fs-md);letter-spacing:.01em;
  padding:.85em 1.6em;border-radius:100px;transition:transform .35s var(--ease),background .25s,box-shadow .35s;
  white-space:nowrap;
}
.btn svg{width:18px;height:18px;flex:none}

/* Accessibility: visible keyboard focus + skip-to-content link */
:focus-visible{outline:3px solid var(--himmel);outline-offset:2px}
/* Für Labels, die der Screenreader braucht, das Layout aber nicht hergibt
   (Newsletter-Feld). Kein display:none — das nähme sie dem A11y-Tree. */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
.skip-link{position:fixed;top:10px;left:10px;z-index:var(--z-skip);background:var(--wattenmeer);color:#fff;font-weight:600;font-size:var(--fs-md);padding:.65em 1.1em;border-radius:10px;box-shadow:var(--shadow);transform:translateY(-160%);transition:transform .2s var(--ease)}
.skip-link:focus{transform:none;outline:2px solid #fff;outline-offset:2px}
.btn--primary{background:var(--liebstoeckel);color:#fff;box-shadow:0 10px 24px -10px rgba(79,110,55,.7)}
.btn--primary:hover{background:var(--liebstoeckel-dk);transform:translateY(-2px)}
.btn--dark{background:var(--wattenmeer);color:var(--salz)}
.btn--dark:hover{background:var(--wattenmeer-90);transform:translateY(-2px)}
.btn--ghost{background:transparent;border:1.5px solid var(--line);color:var(--wattenmeer)}
.btn--ghost:hover{border-color:var(--wattenmeer);background:rgba(18,59,64,.04)}
.btn--block{width:100%}
.btn--lg{padding:1.05em 2em;font-size:var(--fs-lg)}


/* ===================== header.css ===================== */
/* ============================================================
   VOIGT HAUSGEMACHTES — Header: topbar, nav, mega-menu, tools, mobile nav
   ============================================================ */

/* ===================== ANNOUNCEMENT BAR ===================== */
.topbar{
  background:var(--wattenmeer);color:var(--himmel-soft);
  font-size:var(--fs-sm);letter-spacing:.04em;
}
.topbar .container{display:flex;align-items:center;justify-content:center;gap:.7em;min-height:38px;text-align:center;padding-block:6px}
.topbar svg{width:15px;height:15px;flex:none;opacity:.85}
.topbar strong{color:#fff;font-weight:600}

/* ===================== HEADER ===================== */
.header{
  position:sticky;top:0;z-index:var(--z-header);
  background:rgba(247,244,236,.86);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-soft);
  transition:box-shadow .35s var(--ease),background .35s var(--ease),border-color .35s;
}
/* condensed state once scrolled past the hero — more solid + soft shadow */
.header--scrolled{
  background:rgba(247,244,236,.97);
  border-bottom-color:transparent;
  box-shadow:0 6px 28px -10px rgba(18,59,64,.22);
}
.header.scrolled{box-shadow:var(--shadow-sm);background:rgba(247,244,236,.96)}
.header__inner{display:flex;align-items:center;gap:1rem;min-height:var(--header-h)}

.brand{display:flex;flex-direction:row;align-items:center;gap:.6rem;line-height:1;margin-right:auto}
.brand__mark{width:42px;height:42px;flex:none;display:block}
.brand__text{display:flex;flex-direction:column;line-height:1}
@media(max-width:480px){.brand__mark{width:36px;height:36px}}
.brand__name{font-family:"Fraunces";font-weight:600;font-size:var(--fs-2xl);letter-spacing:-.02em;color:var(--wattenmeer)}
.brand__sub{font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:var(--fs-base);letter-spacing:0;text-transform:none;white-space:nowrap;color:var(--liebstoeckel);font-weight:500;margin-top:1px}

.nav{display:flex;align-items:center;gap:.1rem}
.nav__link{
  position:relative;padding:.55em .68em;border-radius:100px;font-weight:500;font-size:var(--fs-md);
  display:inline-flex;align-items:center;gap:.4em;transition:background .2s,color .2s;white-space:nowrap;
}
@media(min-width:1101px) and (max-width:1280px){.nav__link{padding:.5em .58em;font-size:var(--fs-base)}}
.nav__link:hover,.nav__link:focus-visible{background:rgba(18,59,64,.06)}
.nav__link svg{width:13px;height:13px;transition:transform .3s}
.has-mega.open .nav__link svg{transform:rotate(180deg)}

/* Megamenu */
.has-mega{position:static}
.mega{
  position:absolute;left:0;right:0;top:100%;
  background:var(--salz-2);border-top:1px solid var(--line-soft);
  box-shadow:var(--shadow);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;
  z-index:var(--z-mega);
}
.has-mega.open .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega__grid{
  display:grid;grid-template-columns:1.5fr 1.5fr .9fr;gap:clamp(24px,3vw,52px);
  padding:clamp(28px,3.5vw,48px) 0;
}
.mega__col h4{font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--liebstoeckel);font-family:"Hanken Grotesk";font-weight:700;margin-bottom:1.2rem}
.mega__products{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.mega__card{
  display:flex;gap:12px;align-items:center;padding:10px;border-radius:14px;
  border:1px solid var(--line-soft);background:#fff;transition:border-color .2s,transform .2s,box-shadow .2s;
}
.mega__card:hover{border-color:var(--himmel);transform:translateY(-2px);box-shadow:var(--shadow-sm)}
.mega__card img{width:46px;height:60px;object-fit:contain;flex:none}
.mega__card .mc-name{font-weight:600;font-size:var(--fs-base);line-height:var(--lh-snug)}
.mega__card .mc-price{color:var(--bernstein-deep);font-weight:700;font-size:var(--fs-base);margin-top:3px}
/* PAngV § 4/§ 6: VAT note + unit price must sit next to every price. */
.mc-unit{display:block;color:var(--wattenmeer-90);font-weight:500;font-size:var(--fs-2xs);line-height:var(--lh-normal);margin-top:1px}
.mega__links li a{display:flex;gap:.6em;padding:.5em 0;font-size:var(--fs-md);color:var(--wattenmeer);transition:color .2s,padding .2s}
.mega__links li a:hover{color:var(--liebstoeckel);padding-left:6px}
.mega__feature{
  background:linear-gradient(160deg,var(--wattenmeer),var(--liebstoeckel-dk));
  border-radius:16px;padding:24px;color:var(--salz);display:flex;flex-direction:column;justify-content:flex-end;min-height:200px;
}
.mega__feature .eyebrow{color:var(--himmel)}
.mega__feature .eyebrow::before{background:var(--himmel)}
.mega__feature h5{font-family:"Fraunces";font-size:var(--fs-2xl);margin:.5rem 0 .4rem;color:#fff}
.mega__feature p{font-size:var(--fs-base);opacity:.9}

/* Header tools */
.tools{display:flex;align-items:center;gap:.4rem}
.lang{position:relative}
.lang__btn{display:flex;align-items:center;gap:.45em;padding:.55em .8em;border-radius:100px;font-weight:600;font-size:var(--fs-base);border:1px solid var(--line)}
.lang__btn:hover{background:rgba(18,59,64,.05)}
.lang__btn .flag{font-size:var(--fs-lg);line-height:1}
.lang__menu{
  position:absolute;right:0;top:calc(100% + 8px);background:#fff;border:1px solid var(--line);
  border-radius:14px;box-shadow:var(--shadow);padding:6px;min-width:160px;
  opacity:0;visibility:hidden;transform:translateY(-6px);transition:.22s var(--ease);z-index:var(--z-dropdown);
}
.lang.open .lang__menu{opacity:1;visibility:visible;transform:translateY(0)}
.lang__menu button{display:flex;align-items:center;gap:.6em;width:100%;padding:.6em .7em;border-radius:9px;font-size:var(--fs-md);font-weight:500;text-align:left}
.lang__menu button:hover{background:var(--salz)}
.lang__menu button[aria-current="true"]{background:var(--himmel-soft);font-weight:700}

.cart-btn{position:relative;display:flex;align-items:center;gap:.5em;padding:.6em 1.1em;border-radius:100px;background:var(--wattenmeer);color:var(--salz);font-weight:600;font-size:var(--fs-md);transition:background .2s,transform .2s}
.cart-btn:hover{background:var(--wattenmeer-90);transform:translateY(-1px)}
.cart-btn svg{width:18px;height:18px}
.cart-count{
  position:absolute;top:-6px;right:-6px;min-width:21px;height:21px;padding:0 5px;
  background:var(--bernstein);color:#fff;border-radius:100px;font-size:var(--fs-xs);font-weight:700;
  display:flex;align-items:center;justify-content:center;border:2px solid var(--salz);
  transform:scale(0);transition:transform .3s var(--ease);
}
.cart-count.show{transform:scale(1)}

.burger{display:none;flex-direction:column;gap:5px;padding:10px;border-radius:10px}
.burger span{width:22px;height:2px;background:var(--wattenmeer);border-radius:2px;transition:.3s var(--ease)}



/* ===================== MOBILE NAV ===================== */
.mobile-nav{position:fixed;top:0;left:0;height:100%;width:min(360px,88%);background:var(--salz);z-index:var(--z-drawer);transform:translateX(-100%);transition:transform .4s var(--ease);display:flex;flex-direction:column;box-shadow:var(--shadow-lg);overflow-y:auto}
.mobile-nav.show{transform:translateX(0)}
.mobile-nav__head{display:flex;justify-content:space-between;align-items:center;padding:20px var(--sp-5);border-bottom:1px solid var(--line-soft)}
.mobile-nav__head .brand__name{font-size:var(--fs-2xl)}
.mobile-nav__links{padding:14px 8px;flex:1}
.mobile-nav__links>a,.m-acc__btn{display:flex;align-items:center;justify-content:space-between;width:100%;padding:15px 16px;font-size:var(--fs-lg);font-weight:500;border-radius:12px;transition:background .2s}
.mobile-nav__links>a:hover,.m-acc__btn:hover{background:rgba(18,59,64,.05)}
.m-acc__btn svg{width:15px;height:15px;transition:transform .3s}
.m-acc.open .m-acc__btn svg{transform:rotate(180deg)}
.m-acc__panel{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.m-acc__panel a{display:flex;align-items:center;gap:12px;padding:12px 16px 12px 28px;font-size:var(--fs-md);border-radius:10px}
.m-acc__panel a:hover{background:rgba(18,59,64,.05)}
.m-acc__panel img{width:34px;height:44px;object-fit:contain}
.m-acc__panel .mp{font-size:var(--fs-sm);color:var(--bernstein-deep);font-weight:700}
.m-acc__panel .mp .mc-unit{font-size:var(--fs-2xs)}
.mobile-nav__foot{padding:var(--sp-4) var(--sp-5);border-top:1px solid var(--line-soft)}
.mobile-langs{display:flex;gap:8px;flex-wrap:wrap}
.mobile-langs button{padding:.5em .9em;border-radius:100px;border:1px solid var(--line);font-size:var(--fs-base);font-weight:600;display:flex;align-items:center;gap:.4em}
.mobile-langs button[aria-current="true"]{background:var(--himmel-soft);border-color:var(--himmel)}

/* ===================== NAV BREAKPOINT ===================== */
/* Below 1100px the full desktop nav no longer fits → switch to the burger drawer.
   Placed at the end so it overrides the base .burger{display:none}. */
@media(max-width:1100px){
  .nav,.has-mega .mega{display:none}
  .burger{display:flex}
  /* visually hidden but kept in the a11y tree so the icon-only cart button
     still has an accessible name ("Warenkorb") on mobile */
  .cart-btn .cart-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .cart-btn{padding:.65em .8em}
}


/* ===================== hero.css ===================== */
/* ============================================================
   VOIGT HAUSGEMACHTES — Hero + marquee strip
   ============================================================ */

/* ===================== HERO — full-bleed Sylt cover ===================== */
.hero--cover{position:relative;overflow:hidden;display:flex;align-items:center;color:#fff;min-height:min(92vh,880px)}
.hero__bgimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 44%;z-index:0;animation:heroZoom 24s ease-in-out infinite alternate;will-change:transform}
@keyframes heroZoom{from{transform:scale(1.03)}to{transform:scale(1.09)}}
.hero--cover::after{ /* LIGHT legibility scrim — just enough behind the text column,
                        the sky/sea/dune stay bright & airy (premium, not moody) */
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(104deg, rgba(18,59,64,.5) 0%, rgba(18,59,64,.26) 30%, rgba(18,59,64,.05) 55%, rgba(18,59,64,0) 75%),
    linear-gradient(0deg, rgba(18,59,64,.32) 0%, rgba(18,59,64,0) 40%);
}
.hero__cover{position:relative;z-index:2;max-width:680px;padding-block:clamp(40px,8vw,80px)}
.hero__kicker{margin-bottom:1.5rem;color:var(--himmel)}
.hero__kicker::before{background:var(--bernstein)}
.hero--cover h1{font-size:var(--fs-display);font-weight:400;line-height:var(--lh-tight);color:#fff;text-shadow:0 2px 22px rgba(18,59,64,.5),0 1px 4px rgba(18,59,64,.4)}
.hero--cover h1 em{font-style:italic;color:var(--himmel);font-weight:500}
.hero__lead{font-size:clamp(1.08rem,1.6vw,1.32rem);max-width:46ch;margin:1.6rem 0 2.3rem;color:rgba(255,255,255,.94);text-shadow:0 1px 20px rgba(0,0,0,.3)}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem;align-items:center}
.hero__trust{display:flex;flex-wrap:wrap;gap:1.4rem;margin-top:2.8rem;font-size:var(--fs-base);color:rgba(255,255,255,.92)}
.hero__trust span{display:inline-flex;align-items:center;gap:.45em;font-weight:600}
.hero__trust svg{width:16px;height:16px;color:var(--himmel)}
.btn--on-dark{border-color:rgba(255,255,255,.55);color:#fff;background:rgba(255,255,255,.06);backdrop-filter:blur(4px)}
.btn--on-dark:hover{border-color:#fff;background:rgba(255,255,255,.16)}
/* scroll cue */
.hero__scroll{position:absolute;z-index:2;left:50%;bottom:24px;transform:translateX(-50%);width:42px;height:42px;border-radius:50%;border:1.5px solid rgba(255,255,255,.5);display:flex;align-items:center;justify-content:center;color:#fff;animation:heroBob 2.4s ease-in-out infinite}
.hero__scroll:hover{background:rgba(255,255,255,.14)}
.hero__scroll svg{width:18px;height:18px}
@keyframes heroBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(5px)}}
@media(max-width:760px){
  .hero--cover{min-height:88vh}
  .hero__bgimg{object-position:60% 42%}
  .hero__scroll{display:none}
}

/* ===================== MARQUEE STRIP ===================== */
.strip{background:var(--wattenmeer);color:var(--himmel-soft);overflow:hidden;border-block:1px solid rgba(255,255,255,.08)}
.strip__track{display:flex;gap:0;white-space:nowrap;animation:slide 32s linear infinite;will-change:transform}
.strip__track span{display:inline-flex;align-items:center;gap:1.2em;padding:16px 1.6rem;font-family:"Fraunces";font-style:italic;font-size:var(--fs-xl)}
.strip__track span::after{content:"✻";color:var(--bernstein);font-style:normal;font-size:var(--fs-md)}
@keyframes slide{to{transform:translateX(-50%)}}

/* ===================== AMBIENT MOTION (Ken Burns) ===================== */
/* Slow, subtle drift/zoom that gives the big scenic photos life without
   distracting. Product shots and thumbnails stay still on purpose. */
@keyframes kenburns{from{transform:scale(1.04) translate(0,0)}to{transform:scale(1.13) translate(-1.6%,-1.2%)}}
.story__img img{animation:kenburns 30s ease-in-out infinite alternate;will-change:transform}

@media (prefers-reduced-motion: reduce){
  .hero__bgimg,.adbanner__img,.story__img img,.feature-figure img,.strip__track{animation:none !important}
}


/* ===================== sections.css ===================== */
/* ============================================================
   VOIGT HAUSGEMACHTES — Page sections (premium, shop, story, recipes, nutrition, reviews, maker, visit, b2b, news)
   ============================================================ */

/* ===== Premium-Upgrade: Strategie-Ausrichtung ===== */
/* Calm, airy brand statement on a light canvas (a quiet pause after the hero) */
.manifesto{background:linear-gradient(180deg,var(--salz) 0%,var(--salz-2) 100%);color:var(--wattenmeer);text-align:center;padding:clamp(84px,11vw,168px) 0;position:relative}
.manifesto::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:54px;height:2px;background:var(--bernstein);opacity:.7}
.manifesto .container{max-width:880px}
.manifesto__kicker{color:var(--liebstoeckel);justify-content:center;display:inline-flex}
.manifesto__kicker::before{background:var(--bernstein)}
.manifesto__text{font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:clamp(1.7rem,4.2vw,3rem);line-height:var(--lh-snug);margin:1.3rem auto 1.1rem;color:var(--wattenmeer);max-width:24ch}
.manifesto__sub{color:var(--bernstein-deep);font-weight:700;letter-spacing:var(--ls-wide);text-transform:uppercase;font-size:var(--fs-base)}
.promise{background:var(--salz-2);border-top:1px solid var(--line-soft);border-bottom:1px solid var(--line-soft)}
.promise__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(18px,3vw,44px);padding:clamp(40px,6vw,68px) 0}
.promise__item{text-align:center}
.promise__ic{display:inline-flex;width:54px;height:54px;align-items:center;justify-content:center;border-radius:50%;border:1.5px solid var(--bernstein);color:var(--bernstein);margin-bottom:.9rem}
.promise__ic svg{width:24px;height:24px}
.promise__item h4{font-family:"Fraunces",Georgia,serif;font-size:var(--fs-lg);margin-bottom:.25rem;color:var(--wattenmeer)}
.promise__item p{font-size:var(--fs-base);color:var(--wattenmeer-90);opacity:.82;line-height:var(--lh-normal)}
.gift__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px)}
.gift-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.4vw,30px);transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.gift-card:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.gift-card__ic{display:inline-flex;width:50px;height:50px;align-items:center;justify-content:center;border-radius:14px;background:var(--himmel-soft);color:var(--liebstoeckel);margin-bottom:1rem}
.gift-card__ic svg{width:24px;height:24px}
.gift-card h3{font-family:"Fraunces",Georgia,serif;font-size:var(--fs-xl);margin-bottom:.4rem}
.gift-card p{font-size:var(--fs-md);color:var(--wattenmeer-90);opacity:.85;line-height:var(--lh-normal)}
.gift__cta{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:clamp(28px,4vw,44px)}
.abo .eyebrow{color:var(--himmel)}
.abo__inner{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,4vw,56px);align-items:center;background:var(--wattenmeer);color:var(--salz);border-radius:calc(var(--r) * 1.6);padding:clamp(32px,5vw,68px);box-shadow:var(--shadow-lg);position:relative;overflow:hidden}
.abo__inner::after{content:"";position:absolute;right:-60px;top:-60px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(174,212,220,.18),transparent 70%)}
.abo__inner h2{color:#fff;margin:.4rem 0 .7rem}
.abo__inner>div>p{color:var(--himmel-soft);max-width:46ch}
.abo__inner .btn{display:flex;width:fit-content;margin:1.8rem auto .2rem}
.abo__note{font-size:var(--fs-base);color:var(--himmel);opacity:.85;margin-top:1rem;text-align:center}
.abo__list{display:flex;flex-direction:column;gap:1rem;position:relative}
.abo__list li{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--fs-lg);color:var(--salz)}
.abo__list svg{flex:0 0 auto;width:22px;height:22px;color:var(--bernstein);margin-top:2px}
.family{background:var(--duene)}
.family__inner{max-width:860px;text-align:center;margin:0 auto}
.family__lead{color:var(--wattenmeer-90);max-width:62ch;margin:1rem auto 1.8rem;font-size:var(--fs-lg)}
/* Steht auf --duene, nicht auf Salz: dort erreicht selbst --bernstein-deep nur
   3,7:1. Liebstöckel-dunkel schafft 5,96:1. .6rem waren zudem 9,6px. */
.family__badge{display:inline-block;vertical-align:middle;font-family:"Hanken Grotesk",sans-serif;font-size:var(--fs-xs);font-weight:700;letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--liebstoeckel-dk);border:1px solid var(--liebstoeckel-dk);border-radius:100px;padding:.4em .85em;margin-left:.55em}
.family__chips{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.family-chip{background:var(--salz-2);border:1px dashed rgba(18,59,64,.28);border-radius:100px;padding:.7em 1.25em;font-weight:600;font-size:var(--fs-md);color:var(--wattenmeer)}
.family__grid{display:grid;grid-template-columns:1.02fr .98fr;gap:clamp(28px,4vw,60px);align-items:center}
.family__copy{max-width:40rem}
.family__copy .eyebrow{justify-content:flex-start}
.family__copy .family__lead{margin:1rem 0 1.6rem;text-align:left}
.family__copy .family__chips{justify-content:flex-start}
.family__media{position:relative;margin:0;background:linear-gradient(155deg,#fff,var(--salz-2));border-radius:24px;padding:clamp(16px,2.2vw,26px);box-shadow:var(--shadow-lg)}
.family__media::before{content:"";position:absolute;right:-10px;top:-10px;width:90px;height:90px;border-radius:50%;background:radial-gradient(circle,rgba(174,212,220,.45),transparent 70%);z-index:0}
.family__media img{position:relative;z-index:1;width:100%;height:auto;border-radius:14px;display:block;box-shadow:0 14px 32px -18px rgba(18,59,64,.32)}
.family__media figcaption{margin-top:.8rem;font-size:var(--fs-sm);letter-spacing:.03em;color:var(--wattenmeer-90);opacity:.72;text-align:center}
@media(max-width:860px){.family__grid{grid-template-columns:1fr}.family__media{order:-1;max-width:430px;margin:0 auto}}
.adbanner-wrap{padding:clamp(22px,4vw,52px) 0}
.adbanner{position:relative;display:block;aspect-ratio:16/7;border-radius:calc(var(--r) * 1.2);overflow:hidden;box-shadow:var(--shadow-lg)}
.adbanner__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%;display:block;animation:kenburns 26s ease-in-out infinite alternate;will-change:transform}
/* legibility scrim — darker toward the headline (top-left) */
.adbanner::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(105deg, rgba(18,59,64,.6) 0%, rgba(18,59,64,.18) 44%, rgba(18,59,64,0) 72%),
             linear-gradient(0deg, rgba(18,59,64,.5) 0%, rgba(18,59,64,0) 46%)}
.adbanner__tag{position:absolute;top:clamp(18px,3.2vw,42px);left:clamp(18px,3.2vw,44px);z-index:2;max-width:13ch;
  font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500;color:#fff;
  font-size:clamp(1.5rem,3.4vw,2.9rem);line-height:var(--lh-tight);text-shadow:0 2px 26px rgba(0,0,0,.45)}
.adbanner__cta{position:absolute;left:clamp(18px,3.2vw,44px);bottom:clamp(18px,3.2vw,42px);z-index:2;display:inline-flex;align-items:center;gap:.5em;background:var(--liebstoeckel);color:#fff;font-weight:600;font-size:var(--fs-md);padding:.85em 1.5em;border-radius:100px;box-shadow:0 12px 26px -10px rgba(0,0,0,.55);transition:transform .3s var(--ease),background .25s}
.adbanner:hover .adbanner__cta{transform:translateY(-2px);background:var(--liebstoeckel-dk)}
.adbanner__cta svg{width:18px;height:18px}
/* Cinematic image band used inside sections (ferry, lighthouse) */
.feature-figure{position:relative;margin:clamp(30px,4vw,52px) 0 clamp(8px,1vw,16px);border-radius:calc(var(--r) * 1.1);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:21/9}
.feature-figure img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kenburns 32s ease-in-out infinite alternate;will-change:transform}
.feature-figure figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:clamp(34px,6vw,64px) clamp(20px,3vw,40px) clamp(16px,2.4vw,28px);color:#fff;font-family:"Fraunces",Georgia,serif;font-style:italic;font-weight:500;font-size:clamp(1.05rem,1.9vw,1.55rem);line-height:var(--lh-snug);text-shadow:0 2px 22px rgba(0,0,0,.5);background:linear-gradient(0deg, rgba(18,59,64,.74) 0%, rgba(18,59,64,0) 100%)}
@media(max-width:760px){.feature-figure{aspect-ratio:16/10}}
/* ===================== SYLT-MOMENTE (Galerie) ===================== */
.moments{background:linear-gradient(180deg,var(--salz-2),var(--salz))}
.moments__head{text-align:center;max-width:60ch;margin:0 auto clamp(34px,5vw,56px)}
.moments__head .eyebrow{justify-content:center}
.moments__head h2{font-size:var(--fs-h1);margin:1rem 0 .6rem}
.moments__head p{color:var(--wattenmeer-90);font-size:var(--fs-lg)}
.moments__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.4vw,18px)}
.moment{position:relative;display:block;width:100%;padding:0;border:0;cursor:pointer;aspect-ratio:1/1;border-radius:calc(var(--r) * .9);overflow:hidden;box-shadow:0 1px 2px rgba(18,59,64,.05),0 16px 34px -24px rgba(18,59,64,.4);background:var(--salz-2)}
.moment:focus-visible{outline:3px solid var(--himmel);outline-offset:3px}
.moment::before{content:"";position:absolute;z-index:1;top:50%;left:50%;width:46px;height:46px;transform:translate(-50%,-50%) scale(.85);border-radius:50%;background:rgba(255,255,255,.92);opacity:0;transition:opacity .35s,transform .35s;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='22' viewBox='0 0 24 24' fill='none' stroke='%23123B40' stroke-width='2.2'%3E%3Cpath d='M21 21l-4.3-4.3M11 18a7 7 0 1 0 0-14 7 7 0 0 0 0 14zM11 8v6M8 11h6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center}
.moment:hover::before,.moment:focus-visible::before{opacity:1;transform:translate(-50%,-50%) scale(1)}
.moment img{width:100%;height:100%;object-fit:cover;object-position:center;transition:transform .65s var(--ease)}
.moment::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(18,59,64,.22),rgba(18,59,64,0) 42%);opacity:0;transition:opacity .4s}
.moment:hover img{transform:scale(1.07)}
.moment:hover::after{opacity:1}
@media(max-width:860px){.moments__grid{grid-template-columns:repeat(2,1fr)}}

/* ===================== FIRMENGESCHENKE ===================== */
.firmgift{background:linear-gradient(180deg,var(--salz),#f1e8d8)}
.firmgift__head{text-align:center;max-width:62ch;margin:0 auto clamp(34px,5vw,56px)}
.firmgift__head .eyebrow{justify-content:center}
.firmgift__head h2{font-size:var(--fs-h1);margin:1rem 0 .7rem}
.firmgift__head p{color:var(--wattenmeer-90);font-size:var(--fs-lg)}
.firmgift__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px);margin-bottom:clamp(20px,2.6vw,32px);align-items:stretch}
.firmgift-card{position:relative;background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 1px 2px rgba(18,59,64,.05),0 20px 42px -28px rgba(18,59,64,.42);transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.firmgift-card:hover{transform:translateY(-6px);box-shadow:0 8px 18px rgba(18,59,64,.09),0 34px 64px -30px rgba(18,59,64,.5)}
.firmgift-card--featured{border-color:var(--liebstoeckel);box-shadow:0 1px 2px rgba(18,59,64,.05),0 26px 52px -26px rgba(79,110,55,.55)}
.firmgift-card__media{position:relative;aspect-ratio:1/1;overflow:hidden;background:#f1e8d8}
.firmgift-card__media img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.firmgift-card:hover .firmgift-card__media img{transform:scale(1.04)}
.firmgift-card__flag{position:absolute;top:14px;left:14px;z-index:2;background:var(--liebstoeckel);color:#fff;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.45em .9em;border-radius:100px;box-shadow:var(--shadow-sm)}
.firmgift-card__body{padding:24px var(--sp-6) var(--sp-6);display:flex;flex-direction:column;flex:1}
.firmgift-card__body h3{font-family:"Fraunces",Georgia,serif;font-size:var(--fs-2xl);line-height:var(--lh-snug);margin-bottom:.35rem}
.firmgift-card__price{font-family:"Fraunces",Georgia,serif;font-size:var(--fs-xl);font-weight:600;color:var(--wattenmeer);margin:0 0 .95rem}
.firmgift-card--featured .firmgift-card__price{color:var(--liebstoeckel)}
.firmgift-card__body>p{color:var(--wattenmeer-90);font-size:var(--fs-md);line-height:var(--lh-relaxed);margin-bottom:1.1rem}
/* packaging components — visual cue for the gift's wertigkeit */
.firmgift-card__pack{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.2rem;padding:0}
.firmgift-card__pack li{display:inline-flex;align-items:center;gap:.4em;background:var(--salz-2);border:1px solid var(--line-soft);border-radius:100px;padding:.4em .8em;font-size:var(--fs-xs);font-weight:600;color:var(--wattenmeer)}
.firmgift-card__pack svg{width:15px;height:15px;color:var(--liebstoeckel);flex:none}
.firmgift-card--featured .firmgift-card__pack li{background:rgba(106,168,79,.1);border-color:rgba(106,168,79,.3)}
.firmgift__pricenote{text-align:center;color:var(--wattenmeer-90);font-size:var(--fs-base);margin:0 0 clamp(28px,4vw,48px)}
/* meta pinned to the bottom so cards read evenly, with a clean divider */
.firmgift-card__meta{margin-top:auto;padding-top:16px;border-top:1px solid var(--line-soft);display:grid;grid-template-columns:max-content 1fr;gap:.55rem .9rem;font-size:var(--fs-base);align-items:baseline}
.firmgift-card__meta dt{color:var(--liebstoeckel);font-weight:700;font-size:var(--fs-2xs);letter-spacing:.07em;text-transform:uppercase;white-space:nowrap;padding-top:.12em}
.firmgift-card__meta dd{margin:0;color:var(--wattenmeer-90);line-height:var(--lh-normal)}
.firmgift__perso{display:grid;grid-template-columns:1.25fr 1fr;gap:clamp(24px,4vw,56px);align-items:center;background:var(--wattenmeer);color:var(--salz);border-radius:calc(var(--r) * 1.1);padding:clamp(28px,4vw,52px);box-shadow:var(--shadow-lg)}
.firmgift__perso-text h3{font-family:"Fraunces",Georgia,serif;font-size:clamp(1.5rem,2.6vw,2rem);color:#fff;margin-bottom:1.3rem;line-height:var(--lh-snug)}
.firmgift__perso-list{display:grid;gap:.9rem}
.firmgift__perso-list li{display:flex;gap:.8rem;align-items:center;color:var(--himmel-soft);font-size:var(--fs-md)}
.firmgift__perso-list svg{width:24px;height:24px;color:var(--himmel);flex:none}
.firmgift__perso-cta p{color:var(--himmel-soft);font-size:var(--fs-md);margin-bottom:1.1rem}
.firmgift__perso-cta .btn{width:100%;justify-content:center}
.firmgift__phone{display:block;margin-top:1rem;color:#fff;font-size:var(--fs-md);text-decoration:underline;text-underline-offset:3px}
@media(max-width:960px){
  .firmgift__grid{grid-template-columns:1fr;max-width:460px;margin-inline:auto}
  .firmgift__perso{grid-template-columns:1fr;text-align:center}
  .firmgift__perso-list li{justify-content:center}
}
.b2b__cta{display:flex;flex-wrap:wrap;gap:14px}
@media(max-width:960px){.promise__grid,.gift__grid{grid-template-columns:repeat(2,1fr)}.abo__inner{grid-template-columns:1fr}}
@media(max-width:600px){.gift__grid{grid-template-columns:1fr}}
/* ===== Lifestyle-Showcase (Flasche vor Sylt) ===== */
.showcase{position:relative;overflow:hidden;min-height:clamp(440px,62vh,660px);display:flex;align-items:center;padding:clamp(40px,6vw,80px) 0;background:linear-gradient(95deg, rgba(18,59,64,.76) 0%, rgba(18,59,64,.46) 42%, rgba(18,59,64,.10) 70%, rgba(18,59,64,0) 100%), var(--bg-show) center/cover no-repeat}
.showcase__inner{position:relative;z-index:1;display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(24px,4vw,56px);align-items:center;width:100%}
.showcase__text{color:#fff;max-width:36rem}
.showcase__text .eyebrow{color:var(--himmel)}
.showcase__text .eyebrow::before{background:var(--bernstein)}
.showcase__text h2{color:#fff;font-size:var(--fs-h1);line-height:var(--lh-tight);margin:.7rem 0 1rem}
.showcase__text p{color:rgba(247,244,236,.94);font-size:var(--fs-lg);max-width:42ch;margin-bottom:1.9rem}
.showcase__product{position:relative;display:flex;justify-content:center;align-items:flex-end;min-height:300px}
.showcase__bottle{width:min(64%,300px);filter:drop-shadow(0 42px 36px rgba(12,30,24,.55));animation:float 6.8s ease-in-out infinite}
.showcase__pedestal{position:absolute;bottom:7%;left:50%;transform:translateX(-50%);width:48%;height:26px;background:radial-gradient(ellipse,rgba(10,28,20,.5),transparent 70%);filter:blur(5px);z-index:0}
@media(max-width:860px){.showcase{background:linear-gradient(180deg,rgba(18,59,64,.60),rgba(18,59,64,.72)),var(--bg-show) center/cover no-repeat}.showcase__inner{grid-template-columns:1fr}.showcase__product{display:none}}



/* ===================== SHOP ===================== */
.shop__head{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1.5rem;margin-bottom:clamp(34px,4.5vw,58px)}
.shop__head h2{font-size:var(--fs-h1)}
.shop__head p{max-width:40ch;color:var(--wattenmeer-90)}
.products{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,26px)}
.card{
  position:relative;
  background:#fff;border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;
  /* resting elevation so the card reads as a physical object on the warm page */
  box-shadow:0 1px 2px rgba(18,59,64,.05), 0 20px 42px -28px rgba(18,59,64,.42);
  display:flex;flex-direction:column;transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .3s;
}
.card:hover{transform:translateY(-7px);box-shadow:0 8px 18px rgba(18,59,64,.09), 0 34px 64px -30px rgba(18,59,64,.55);border-color:transparent}
/* Title doubles as the whole-card "open details" control (stretched overlay). */
.card__open{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left}
.card__open::after{content:"";position:absolute;inset:0;z-index:1}
/* Der Button ist nur der Titel, seine ::after-Fläche deckt die ganze Karte.
   Ein Ring um den Titel sähe falsch aus — also Ring um die Karte statt
   outline:none ersatzlos (Tastaturnutzer sahen sonst gar keinen Fokus). */
.card__open:focus-visible{outline:none}
.card:has(.card__open:focus-visible){outline:3px solid var(--himmel);outline-offset:2px}
.card:focus-within{outline:3px solid var(--himmel);outline-offset:3px}
.card__media{
  position:relative;aspect-ratio:4/5;
  /* cool studio gradient — deliberately cooler than the warm page so the
     bottle (and the whole card) reads as a distinct, premium object */
  background:radial-gradient(120% 82% at 50% 16%, #fff 0%, #eef5f5 52%, #d9e7e9 100%);
  display:flex;align-items:center;justify-content:center;padding:clamp(12px,1.8vw,22px);overflow:hidden;
  box-shadow:inset 0 -1px 0 rgba(18,59,64,.07);
}
/* soft spotlight halo behind the product */
.card__media::before{
  content:"";position:absolute;z-index:0;left:50%;top:40%;width:80%;aspect-ratio:1;transform:translate(-50%,-50%);
  background:radial-gradient(closest-side, rgba(255,255,255,.92), rgba(255,255,255,0) 72%);
}
/* grounded contact shadow so the bottle sits on a surface, not floats */
.card__media::after{
  content:"";position:absolute;z-index:0;left:50%;bottom:12%;width:54%;height:7%;transform:translateX(-50%);
  background:radial-gradient(ellipse at center, rgba(18,59,64,.30), rgba(18,59,64,0) 72%);
  filter:blur(5px);transition:width .55s var(--ease),opacity .55s var(--ease);
}
.card:hover .card__media::after{width:46%;opacity:.82}
/* full-bleed scene media: real bottle composited into a styled setting — drop the
   studio gradient, halo and synthetic contact shadow (the photo brings its own) */
.card__media--scene{background:none;padding:0}
.card__media--scene::before,.card__media--scene::after{display:none}
.card__scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;z-index:0;transition:transform .6s var(--ease)}
.card:hover .card__scene{transform:scale(1.035)}
.card__qty{position:absolute;top:14px;right:14px;z-index:2;background:var(--wattenmeer);color:#fff;font-weight:700;font-size:var(--fs-base);letter-spacing:.02em;padding:.32em .7em;border-radius:100px;box-shadow:var(--shadow-sm)}
.card__tag{pointer-events:none;position:absolute;top:14px;left:14px;z-index:2;background:rgba(255,255,255,.9);color:var(--liebstoeckel);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:.45em .85em;border-radius:100px;box-shadow:var(--shadow-sm);backdrop-filter:blur(4px)}
.card__tag--save{color:var(--bernstein-deep);left:auto;right:14px}
.card__body{padding:var(--sp-5) var(--sp-5) 24px;display:flex;flex-direction:column;flex:1}
.card__title{font-family:"Fraunces";font-size:var(--fs-xl);font-weight:600;line-height:var(--lh-snug)}
.card__sub{font-size:var(--fs-base);color:var(--wattenmeer-90);margin-top:5px}
.card__craft{display:flex;align-items:center;gap:.4em;margin-top:9px;font-size:var(--fs-xs);font-weight:600;letter-spacing:.01em;color:var(--liebstoeckel)}
.card__craft svg{width:14px;height:14px;flex:none}
.card__foot{margin-top:auto;padding-top:var(--sp-4);display:flex;flex-direction:column;align-items:stretch;gap:14px}
.card__price{font-weight:700;font-size:var(--fs-2xl);white-space:nowrap}
.card__price small{font-weight:500;font-size:var(--fs-xs);color:var(--wattenmeer-90);display:block;margin-top:1px}
.card .btn--add{position:relative;z-index:2;width:100%;justify-content:center;padding:.82em 1.1em;font-size:var(--fs-base)}
.card .btn--add svg{width:16px;height:16px}

/* ===================== STORY / HERITAGE ===================== */
.story{background:linear-gradient(180deg,var(--salz),var(--salz-2))}
.story__top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,72px);align-items:center;margin-bottom:clamp(48px,7vw,90px)}
.story__img{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-lg);aspect-ratio:4/3}
.story__img img{width:100%;height:100%;object-fit:cover}
.story__img figcaption{position:absolute;bottom:0;left:0;right:0;padding:var(--sp-8) var(--sp-5) var(--sp-4);color:#fff;font-size:var(--fs-base);background:linear-gradient(transparent,rgba(18,59,64,.78))}
.story h2{font-size:var(--fs-h1);margin:1rem 0 1.3rem}
.story p{color:var(--wattenmeer-90);margin-bottom:1rem}
.story p strong{color:var(--wattenmeer);font-weight:600}

.timeline{display:grid;grid-template-columns:repeat(5,1fr);gap:0;position:relative;margin-top:var(--sp-8)}
.timeline::before{content:"";position:absolute;top:14px;left:8%;right:8%;height:2px;background:var(--line)}
.tl{position:relative;padding:0 12px;text-align:center}
.tl__dot{width:14px;height:14px;border-radius:50%;background:var(--bernstein);margin:8px auto var(--sp-4);border:3px solid var(--salz);box-shadow:0 0 0 2px var(--bernstein);position:relative;z-index:2}
.tl__year{font-family:"Fraunces";font-size:var(--fs-3xl);font-weight:600;color:var(--liebstoeckel)}
.tl__txt{font-size:var(--fs-base);color:var(--wattenmeer-90);margin-top:6px;max-width:22ch;margin-inline:auto}

.quote{
  margin-top:clamp(48px,7vw,84px);text-align:center;max-width:760px;margin-inline:auto;
}
.quote p{font-family:"Fraunces";font-style:italic;font-size:var(--fs-h3);font-weight:400;line-height:var(--lh-snug);color:var(--wattenmeer)}
.quote cite{display:block;margin-top:1.3rem;font-style:normal;font-size:var(--fs-base);letter-spacing:var(--ls-wide);text-transform:uppercase;font-weight:600;color:var(--liebstoeckel)}
.quote .qmark{font-family:"Fraunces";font-size:3.4rem;color:var(--himmel);line-height:.5;display:block;margin-bottom:.4rem}

/* ===================== RECIPES ===================== */
.recipes{background:var(--wattenmeer);color:var(--salz)}
.recipes .eyebrow{color:var(--himmel)}
.recipes .eyebrow::before{background:var(--bernstein)}
.recipes h2{font-size:var(--fs-h1);color:#fff;max-width:18ch;margin:1rem 0}
.recipes__lead{color:var(--himmel-soft);max-width:48ch;margin-bottom:clamp(34px,5vw,56px)}
.recipe-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,26px)}
.recipe{position:relative;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:var(--sp-8) var(--sp-6);transition:background .3s,transform .3s}
.recipe:hover{background:rgba(255,255,255,.09);transform:translateY(-4px)}
.recipe:focus-within{outline:3px solid var(--himmel);outline-offset:3px}
.recipe__num{font-family:"Fraunces";font-size:var(--fs-lg);color:var(--bernstein-bright);font-weight:600;letter-spacing:.1em}
.recipe h3{font-size:var(--fs-2xl);color:#fff;margin:.8rem 0 .7rem}
.recipe__open{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left}
.recipe__open::after{content:"";position:absolute;inset:0;z-index:1}
.recipe__open:focus-visible{outline:none}
.recipe:has(.recipe__open:focus-visible){outline:3px solid var(--himmel);outline-offset:2px}
.recipe p{font-size:var(--fs-md);color:var(--himmel-soft)}

/* ===================== NUTRITION ===================== */
.nutri__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,5vw,68px);align-items:start}
.nutri h2{font-size:var(--fs-h2);margin:1rem 0 1.2rem}
.nutri__lead{color:var(--wattenmeer-90);margin-bottom:1.6rem}
.badges{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:1.8rem}
.badge{display:inline-flex;align-items:center;gap:.5em;padding:.55em 1em;border-radius:100px;background:var(--himmel-soft);font-weight:600;font-size:var(--fs-base)}
.badge svg{width:15px;height:15px;color:var(--liebstoeckel)}
.allergen{background:var(--duene);border-radius:var(--r-sm);padding:16px var(--sp-4);font-size:var(--fs-base);display:flex;gap:.7em;align-items:flex-start}
.allergen svg{width:18px;height:18px;color:var(--bernstein);flex:none;margin-top:2px}
.allergen strong{font-weight:700}
.ntable{width:100%;border-collapse:collapse;background:var(--salz-2);border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--line-soft)}
.ntable caption{text-align:left;font-family:"Fraunces";font-size:var(--fs-xl);font-weight:600;padding:20px var(--sp-5) 4px}
.ntable .cap-sub{font-family:"Hanken Grotesk";font-size:var(--fs-sm);color:var(--wattenmeer-90);font-weight:400;padding:0 var(--sp-5) 14px;display:block}
.ntable th,.ntable td{padding:13px var(--sp-5);text-align:left;font-size:var(--fs-md);border-top:1px solid var(--line-soft)}
.ntable td:last-child{text-align:right;font-weight:600;font-variant-numeric:tabular-nums}
.ntable tr.sub td{padding-left:40px;color:var(--wattenmeer-90);font-size:var(--fs-base)}
.ingredients{margin-top:1.6rem;font-size:var(--fs-md);color:var(--wattenmeer-90);line-height:var(--lh-relaxed)}
.ingredients strong{color:var(--wattenmeer)}
.nutri__storage{margin-top:1rem;font-size:var(--fs-base);color:var(--wattenmeer-90);display:flex;gap:.5em;align-items:center}
.nutri__storage::before{content:"❄";color:var(--himmel);font-size:.95em}

/* ===================== REVIEWS ===================== */
.reviews{background:linear-gradient(180deg,var(--himmel-soft),var(--salz))}
.reviews__head{text-align:center;max-width:680px;margin:0 auto clamp(38px,5vw,58px)}
.reviews__head h2{font-size:var(--fs-h1);margin:1rem 0 .8rem}
.rating{display:inline-flex;flex-direction:column;align-items:center;gap:6px;margin-top:8px}
.stars{color:var(--bernstein-deep);font-size:var(--fs-2xl);letter-spacing:.1em}
.rating small{color:var(--wattenmeer-90);font-size:var(--fs-base)}
.review-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
/* § 5b Abs. 3 UWG: state whether and how reviews are checked. */
.reviews__policy{max-width:680px;margin:clamp(22px,3vw,32px) auto 0;text-align:center;font-size:var(--fs-sm);line-height:var(--lh-relaxed);color:var(--wattenmeer-90)}
.review{background:#fff;border-radius:var(--r);padding:28px var(--sp-6);box-shadow:var(--shadow-sm);border:1px solid var(--line-soft);display:flex;flex-direction:column}
.review .stars{font-size:var(--fs-lg);margin-bottom:14px}
.review p{font-size:var(--fs-md);color:var(--wattenmeer-90);flex:1}
.review .who{display:flex;align-items:center;gap:12px;margin-top:20px}
.review .avatar{width:40px;height:40px;border-radius:50%;background:var(--liebstoeckel);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-family:"Fraunces"}
.review .who b{font-weight:600;font-size:var(--fs-md);display:block}
.review .who small{color:var(--wattenmeer-90);font-size:var(--fs-sm)}

/* ===================== KONSTANZE ===================== */
.maker{background:var(--liebstoeckel-dk);color:var(--salz);overflow:hidden;position:relative}
.maker__grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,5vw,72px);align-items:center}
.maker__photo{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:4/5;background:rgba(255,255,255,.08);box-shadow:var(--shadow-lg)}
.maker__photo img{width:100%;height:100%;object-fit:cover}
.maker__placeholder{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:14px;color:var(--himmel-soft);padding:24px}
.maker__placeholder svg{width:54px;height:54px;opacity:.7}
.maker__placeholder span{font-size:var(--fs-base);max-width:24ch;line-height:var(--lh-normal)}
.maker .eyebrow{color:var(--himmel)}
.maker .eyebrow::before{background:var(--bernstein)}
.maker h2{font-size:var(--fs-h1);color:#fff;margin:1rem 0 1.3rem}
.maker p{color:var(--himmel-soft);margin-bottom:1.1rem;font-size:var(--fs-lg)}
.maker .sig{font-family:"Fraunces";font-style:italic;font-size:var(--fs-2xl);color:#fff;margin-top:1.4rem}
/* ----- Ueber uns ----- */
.maker__deco{position:absolute;left:0;right:0;top:0;height:2px;background:linear-gradient(90deg,transparent,var(--bernstein),transparent);opacity:.55}
.ueber__head{max-width:760px;margin:0 auto clamp(2rem,4vw,3.4rem);text-align:center}
.ueber__head .eyebrow{justify-content:center;display:inline-flex}
.ueber__lead{font-family:"Fraunces";font-style:italic;font-size:clamp(1.2rem,2.4vw,1.6rem);color:#fff;line-height:var(--lh-normal)}
.ueber__grid{display:grid;grid-template-columns:.82fr 1.18fr;gap:clamp(28px,5vw,72px);align-items:start}
.ueber__photo{margin:0}
.ueber__cap{position:absolute;left:0;right:0;bottom:0;padding:var(--sp-8) var(--sp-4) 16px;font-size:var(--fs-sm);letter-spacing:.05em;color:#fff;background:linear-gradient(transparent,rgba(18,59,64,.88));font-family:"Hanken Grotesk";font-weight:600}
.ueber__body p{color:var(--himmel-soft);margin-bottom:1.15rem;font-size:var(--fs-lg);line-height:var(--lh-loose)}
/* .pullquote steht in .maker (dunkles Liebstöckel). Dort ist --bernstein mit
   2,5:1 zu dunkel — die helle Amber-Variante schafft 4,31:1. */
.pullquote{border-left:3px solid var(--bernstein-bright);padding:.1rem 0 .1rem 1.4rem;margin:1.9rem 0}
.pullquote span{font-family:"Fraunces";font-style:italic;font-size:var(--fs-2xl);color:#fff;display:block;line-height:var(--lh-normal)}
.pullquote cite{display:block;margin-top:.75rem;font-style:normal;font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--himmel)}
.pullquote--center{border:0;text-align:center;max-width:820px;margin:clamp(2.4rem,5vw,3.6rem) auto;padding:0}
.pullquote--center span{font-size:var(--fs-h3);line-height:var(--lh-snug)}
/* wie .pullquote cite darüber — --himmel (5,11:1) statt --bernstein (2,5:1) */
.pullquote--center cite{color:var(--himmel)}
.ueber__today{max-width:680px;margin:0 auto clamp(2.4rem,5vw,3.4rem);text-align:center;color:var(--himmel-soft);font-size:var(--fs-lg);line-height:var(--lh-loose)}
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(22px,3vw,44px);border-top:1px solid rgba(255,255,255,.14);padding-top:clamp(2.2rem,4vw,3rem)}
.value{text-align:center}
.value__ic{display:inline-flex;width:56px;height:56px;align-items:center;justify-content:center;border-radius:50%;background:rgba(255,255,255,.08);color:var(--himmel);margin-bottom:1rem;border:1px solid rgba(255,255,255,.14)}
.value__ic svg{width:26px;height:26px}
.value h4{font-family:"Fraunces";font-size:var(--fs-xl);color:#fff;margin-bottom:.55rem}
.value p{color:var(--himmel-soft);font-size:var(--fs-md);line-height:var(--lh-relaxed)}
.ueber__sign{text-align:center;margin-top:clamp(2.2rem,4vw,3rem)}
.ueber__close{font-family:"Fraunces";font-style:italic;color:#fff;font-size:var(--fs-xl);margin-bottom:.2rem}
.ueber__sign .sig{margin-top:.3rem}

/* ===================== VISIT / STORE ===================== */
.visit__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(28px,4vw,56px);align-items:stretch}
.visit__info h2{font-size:var(--fs-h2);margin:1rem 0 1.4rem}
.info-block{margin-bottom:1.7rem}
.info-block h4{font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--liebstoeckel);font-family:"Hanken Grotesk";font-weight:700;margin-bottom:.7rem}
.info-block p,.info-block a{font-size:var(--fs-lg);color:var(--wattenmeer);line-height:var(--lh-relaxed)}
.info-block a:hover{color:var(--liebstoeckel)}
.hours{display:grid;gap:6px}
.hours .row{display:flex;justify-content:space-between;gap:1rem;padding:7px 0;border-bottom:1px dashed var(--line-soft);font-size:var(--fs-md)}
.hours .row.closed{color:var(--wattenmeer-90)}
.hours .row b{font-weight:600}
.map{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow);min-height:420px;border:1px solid var(--line);background:var(--himmel-soft)}
.map__nav{position:absolute;right:14px;top:14px;z-index:2;background:var(--liebstoeckel);color:#fff;border-radius:999px;padding:9px 16px;font-size:var(--fs-sm);font-weight:600;display:inline-flex;align-items:center;gap:7px;box-shadow:var(--shadow);text-decoration:none;transition:background .2s var(--ease),transform .2s var(--ease)}
.map__nav svg{width:15px;height:15px}
.map__nav:hover{background:var(--liebstoeckel-dk);transform:translateY(-1px)}
.map__nav:focus-visible{outline:3px solid var(--himmel);outline-offset:2px}
.map__frame{width:100%;height:100%;min-height:420px;border:0;display:block;filter:saturate(.92)}
/* Two-click map: placeholder until the visitor consents (see features/map.js). */
.map__embed{width:100%;height:100%;min-height:420px;display:block}
.map__consent{width:100%;min-height:420px;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:.7rem;padding:32px 28px;background:var(--salz-2);border:1px dashed var(--line)}
.map__consent svg{width:38px;height:38px;color:var(--liebstoeckel)}
.map__consent-title{font-family:"Fraunces",Georgia,serif;font-size:var(--fs-xl);color:var(--wattenmeer)}
.map__consent-text{max-width:44ch;font-size:var(--fs-base);line-height:var(--lh-relaxed);color:var(--wattenmeer-90)}
.map__chip{position:absolute;left:14px;bottom:34px;z-index:2;background:#fff;border-radius:12px;padding:10px 14px;font-size:var(--fs-base);line-height:var(--lh-normal);box-shadow:var(--shadow);color:var(--wattenmeer)}
.map__chip b{font-family:"Fraunces";font-size:var(--fs-md)}

/* ===================== B2B ===================== */
.b2b{position:relative;overflow:hidden;background:
  linear-gradient(95deg, rgba(18,59,64,.93) 0%, rgba(18,59,64,.75) 42%, rgba(18,59,64,.36) 74%, rgba(18,59,64,.14) 100%),
  var(--bg-b2b) center/cover no-repeat;color:var(--salz)}
.b2b__inner{display:grid;grid-template-columns:1.3fr .7fr;gap:clamp(24px,4vw,52px);align-items:center}
.b2b .eyebrow{color:var(--himmel)}
.b2b .eyebrow::before{background:var(--bernstein)}
.b2b h2{font-size:var(--fs-h1);color:#fff;margin:1rem 0 1rem;max-width:20ch}
.b2b p{color:var(--himmel-soft);max-width:52ch}
.b2b__cta{display:flex;justify-content:flex-end}

/* ===================== NEWSLETTER ===================== */
.news{background:var(--duene);text-align:center}
.news__inner{max-width:600px;margin:0 auto}
.news h2{font-size:var(--fs-h2);margin:1rem 0 .8rem}
.news p{color:var(--wattenmeer-90);margin-bottom:1.8rem}
.news__form{display:flex;gap:10px;max-width:460px;margin:0 auto}
.news__form input{flex:1;padding:.95em 1.2em;border-radius:100px;border:1.5px solid var(--line);background:#fff;font-family:inherit;font-size:var(--fs-md)}
.news__form input:focus{outline:none;border-color:var(--liebstoeckel);box-shadow:0 0 0 3px rgba(174,212,220,.9)}
.news__note{font-size:var(--fs-xs);color:var(--wattenmeer-90);margin-top:1rem}
.news__note a{color:var(--liebstoeckel);font-weight:600;text-decoration:underline;text-underline-offset:2px}


/* ===================== shop-cart.css ===================== */
/* ============================================================
   VOIGT HAUSGEMACHTES — Cart drawer + checkout modal
   ============================================================ */

/* ===================== CART DRAWER ===================== */
.overlay{position:fixed;inset:0;background:rgba(18,59,64,.5);opacity:0;visibility:hidden;transition:.35s var(--ease);z-index:var(--z-overlay);backdrop-filter:blur(2px)}
.overlay.show{opacity:1;visibility:visible}
.drawer{
  position:fixed;top:0;right:0;height:100%;width:min(440px,100%);background:var(--salz);z-index:var(--z-drawer);
  display:flex;flex-direction:column;transform:translateX(100%);transition:transform .4s var(--ease);box-shadow:var(--shadow-lg);
}
.drawer.show{transform:translateX(0)}
.drawer__head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-5) 24px;border-bottom:1px solid var(--line-soft)}
.drawer__head h3{font-size:var(--fs-2xl)}
.drawer__close{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s}
.drawer__close:hover{background:rgba(18,59,64,.07)}
.drawer__close svg{width:18px;height:18px}
.drawer__body{flex:1;overflow-y:auto;padding:var(--sp-4) 24px}
.cart-empty{text-align:center;padding:60px 20px;color:var(--wattenmeer-90)}
.cart-empty svg{width:54px;height:54px;color:var(--himmel);margin:0 auto var(--sp-4)}
.cart-empty p{margin-bottom:20px}
.cart-item{display:flex;gap:14px;padding:16px 0;border-bottom:1px solid var(--line-soft)}
.cart-item__img{width:64px;height:80px;border-radius:10px;background:linear-gradient(160deg,var(--himmel-soft),#fff);display:flex;align-items:center;justify-content:center;flex:none;padding:6px}
.cart-item__img img{height:100%;width:auto;object-fit:contain}
.cart-item__info{flex:1;min-width:0}
.cart-item__info h4{font-family:"Hanken Grotesk";font-weight:600;font-size:var(--fs-md);line-height:var(--lh-snug)}
.cart-item__info .sub{font-size:var(--fs-sm);color:var(--wattenmeer-90);margin-top:2px}
.cart-item__bottom{display:flex;align-items:center;justify-content:space-between;margin-top:10px}
.qty{display:flex;align-items:center;border:1px solid var(--line);border-radius:100px;overflow:hidden}
.qty button{width:30px;height:30px;display:flex;align-items:center;justify-content:center;font-size:var(--fs-xl);transition:background .15s}
.qty button:hover{background:rgba(18,59,64,.07)}
.qty span{min-width:30px;text-align:center;font-weight:600;font-size:var(--fs-md);font-variant-numeric:tabular-nums}
.cart-item__price{font-weight:700;font-size:var(--fs-lg);text-align:right}
/* PAngV § 4/§ 6: unit price + VAT note per line item. */
.cart-item__unit{display:block;font-weight:500;font-size:var(--fs-2xs);line-height:var(--lh-normal);color:var(--wattenmeer-90);margin-top:2px}
.cart-item__remove{font-size:var(--fs-xs);color:var(--wattenmeer-90);text-decoration:underline;margin-top:6px}
.cart-item__remove:hover{color:var(--bernstein-deep)}
.drawer__foot{padding:20px 24px;border-top:1px solid var(--line-soft);background:var(--salz-2)}
.cart-line{display:flex;justify-content:space-between;font-size:var(--fs-md);margin-bottom:8px;color:var(--wattenmeer-90)}
.cart-total{display:flex;justify-content:space-between;font-size:var(--fs-xl);font-weight:700;margin:12px 0 4px;color:var(--wattenmeer)}
.cart-note{font-size:var(--fs-xs);color:var(--wattenmeer-90);margin:6px 0 16px}
.cart-note a{color:var(--liebstoeckel);font-weight:600;text-decoration:underline;text-underline-offset:2px}
/* Mandatory pre-contract links (Art. 246a EGBGB), directly under the CTA. */
.cart-legal{display:flex;flex-wrap:wrap;gap:.3rem .9rem;justify-content:center;margin-top:10px}
.cart-legal a{font-size:var(--fs-xs);color:var(--wattenmeer-90);text-decoration:underline;text-underline-offset:2px}
.cart-legal a:hover{color:var(--liebstoeckel)}

/* ===================== CHECKOUT MODAL ===================== */
.modal{position:fixed;inset:0;z-index:var(--z-modal);display:flex;align-items:center;justify-content:center;padding:20px;opacity:0;visibility:hidden;transition:.3s var(--ease)}
.modal.show{opacity:1;visibility:visible}
.modal__card{background:var(--salz);border-radius:22px;width:min(560px,100%);max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);transform:translateY(20px) scale(.98);transition:.35s var(--ease)}
.modal.show .modal__card{transform:translateY(0) scale(1)}
.modal__head{padding:var(--sp-6) 28px 0;display:flex;justify-content:space-between;align-items:flex-start}
.modal__head h3{font-size:var(--fs-3xl)}
.modal__head p{font-size:var(--fs-base);color:var(--wattenmeer-90);margin-top:4px}
.modal__body{padding:var(--sp-5) 28px 28px}
.field{margin-bottom:14px}
.field label{display:block;font-size:var(--fs-sm);font-weight:600;margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;padding:.8em 1em;border:1.5px solid var(--line);border-radius:11px;font-family:inherit;font-size:var(--fs-md);background:#fff;transition:border-color .2s}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--liebstoeckel);box-shadow:0 0 0 3px rgba(174,212,220,.9)}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
/* NOTE: the .checkout-summary / .honest-note / .confirm rules that used to live
   here belonged to the retired e-mail checkout modal. Checkout now happens in
   the Shopify store (see src/features/checkout.js) — rules removed. */


/* ===================== components.css ===================== */
/* ============================================================
   VOIGT HAUSGEMACHTES — Expanded components
   Product detail · recipe meta & detail · FAQ · Das Original · Nachhaltigkeit
   ============================================================ */

/* ----- gallery lightbox ----- */
.lb{position:fixed;inset:0;z-index:var(--z-lightbox);display:flex;align-items:center;justify-content:center;background:rgba(18,59,64,.93);backdrop-filter:blur(6px);padding:clamp(16px,4vw,52px);animation:lbIn .25s var(--ease)}
.lb[hidden]{display:none}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
.lb__stage{margin:0;max-width:min(1100px,92vw);display:flex;flex-direction:column;align-items:center;gap:14px}
.lb__img{max-width:100%;max-height:80vh;width:auto;height:auto;object-fit:contain;border-radius:8px;box-shadow:0 30px 80px -20px rgba(0,0,0,.6)}
.lb__cap{color:rgba(255,255,255,.9);font-size:var(--fs-md);text-align:center;max-width:60ch}
.lb__close{position:absolute;top:clamp(12px,2.5vw,28px);right:clamp(12px,2.5vw,28px);width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;transition:background .2s}
.lb__close:hover{background:rgba(255,255,255,.24)}
.lb__close svg{width:22px;height:22px}
.lb__nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;background:rgba(255,255,255,.12);color:#fff;display:flex;align-items:center;justify-content:center;border:0;cursor:pointer;transition:background .2s}
.lb__nav:hover{background:rgba(255,255,255,.24)}
.lb__nav svg{width:26px;height:26px}
.lb__prev{left:clamp(8px,2vw,28px)}
.lb__next{right:clamp(8px,2vw,28px)}
.lb__count{position:absolute;bottom:clamp(14px,3vw,30px);left:50%;transform:translateX(-50%);color:rgba(255,255,255,.7);font-size:var(--fs-base);letter-spacing:.05em}
.lb :focus-visible{outline:3px solid var(--himmel);outline-offset:2px}
@media(max-width:600px){.lb__nav{width:44px;height:44px}.lb__cap{font-size:var(--fs-base)}}

/* ----- shared: wide modal + clickable card affordance ----- */
.modal__card--wide{width:min(820px,100%)}
.card{cursor:pointer}
.card:focus-visible,.recipe:focus-visible{outline:3px solid var(--himmel);outline-offset:3px}
.pd__close{position:absolute;top:14px;right:14px;z-index:3;background:rgba(255,255,255,.85);backdrop-filter:blur(4px)}

/* ----- product detail modal ----- */
.pd{display:grid;grid-template-columns:.9fr 1.1fr;gap:0}
.pd__media{background:radial-gradient(120% 82% at 50% 16%,#fff,transparent 62%),linear-gradient(165deg,var(--himmel-soft),#fff);display:flex;align-items:center;justify-content:center;padding:var(--sp-8);min-height:320px}
.pd__media img{height:100%;max-height:380px;width:auto;object-fit:contain;filter:drop-shadow(0 22px 24px rgba(18,59,64,.24))}
.pd__media--scene{padding:0;background:none;min-height:360px;align-items:stretch}
.pd__media--scene img{width:100%;height:100%;max-height:none;object-fit:cover;filter:none}
.pd__body{padding:var(--sp-8) 36px 36px}
.pd__title{font-family:"Fraunces",Georgia,serif;font-size:var(--fs-4xl);margin:.5rem 0 .2rem}
.pd__sub{color:var(--wattenmeer-90);font-size:var(--fs-md)}
.pd__price{font-weight:700;font-size:var(--fs-3xl);margin:1rem 0 .2rem}
.pd__price small{display:block;font-weight:500;font-size:var(--fs-xs);color:var(--wattenmeer-90);margin-top:2px}
.pd__desc{color:var(--wattenmeer-90);font-size:var(--fs-md);line-height:var(--lh-relaxed);margin:1rem 0 1.2rem}
.pd__list{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1.6rem}
.pd__list li{display:flex;gap:.6em;align-items:flex-start;font-size:var(--fs-md);color:var(--wattenmeer)}
.pd__list svg{flex:none;width:18px;height:18px;color:var(--liebstoeckel);margin-top:2px}
.pd__nutri{display:inline-block;margin-top:1rem;font-size:var(--fs-base);font-weight:600;color:var(--liebstoeckel);text-decoration:underline;text-underline-offset:3px}
.pd__nutri:hover{color:var(--liebstoeckel-dk)}

/* Sales denomination (Art. 17 LMIV) under the brand name. */
.pd__legal-name{font-size:var(--fs-base);font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--wattenmeer-90);margin-top:.2rem}

/* Mandatory food information (Art. 14 LMIV), collapsed but present before the
   item can be bought. */
.pd__food{margin-top:1.2rem;border-top:1px solid var(--line);padding-top:.9rem}
.pd__food summary{cursor:pointer;font-size:var(--fs-base);font-weight:600;color:var(--liebstoeckel);list-style:none}
.pd__food summary::-webkit-details-marker{display:none}
.pd__food summary::before{content:"+ ";font-weight:700}
.pd__food[open] summary::before{content:"– "}
.pd__food dl{margin:.9rem 0 0}
.pd__food-row{display:grid;grid-template-columns:minmax(90px,28%) 1fr;gap:.4rem .8rem;padding:.45rem 0;border-bottom:1px solid var(--line-soft);font-size:var(--fs-sm);line-height:var(--lh-normal)}
.pd__food-row dt{font-weight:600;color:var(--wattenmeer)}
.pd__food-row dd{color:var(--wattenmeer-90)}
.pd__allergen{margin-top:.8rem;background:var(--himmel-soft);border-radius:10px;padding:10px 12px;font-size:var(--fs-sm);line-height:var(--lh-normal);color:var(--wattenmeer)}
.pd__ntable{width:100%;margin-top:.9rem;font-size:var(--fs-sm)}
.pd__ntable caption{text-align:left;font-size:var(--fs-xs);color:var(--wattenmeer-90);padding-bottom:.4rem}
.pd__storage{margin-top:.7rem;font-size:var(--fs-xs);color:var(--wattenmeer-90)}
@media(max-width:600px){.pd__food-row{grid-template-columns:1fr;gap:.15rem}}
@media(max-width:760px){.pd{grid-template-columns:1fr}.pd__media{min-height:220px;padding:24px}.pd__media img{max-height:240px}.pd__media--scene{min-height:240px;padding:0}.pd__media--scene img{max-height:none}.pd__body{padding:24px}}

/* ----- recipe meta on cards (light overlay on dark recipes section) ----- */
.recipe__meta{display:flex;flex-wrap:wrap;gap:.6rem 1.1rem;margin-top:1rem;font-size:var(--fs-sm);color:var(--himmel-soft)}
.recipe__meta span{display:inline-flex;align-items:center;gap:.4em;text-transform:capitalize}
.recipe__meta svg{width:14px;height:14px;color:var(--bernstein-bright)}
.recipe__more{display:inline-block;margin-top:1rem;font-size:var(--fs-base);font-weight:700;letter-spacing:.04em;color:var(--bernstein-bright);transition:transform .25s var(--ease)}
.recipe:hover .recipe__more{transform:translateX(4px)}
.recipe{cursor:pointer}

/* ----- recipe detail modal (light) ----- */
.recipe-detail{padding-top:var(--sp-8)}
.recipe-detail__title{font-family:"Fraunces",Georgia,serif;font-size:var(--fs-4xl);margin:.4rem 0 .6rem}
.recipe-detail__meta{display:flex;gap:1rem;flex-wrap:wrap;font-size:var(--fs-base);color:var(--wattenmeer-90);margin-bottom:1.2rem}
.recipe-detail__meta span{background:var(--salz-2);border:1px solid var(--line-soft);border-radius:100px;padding:.35em .9em;text-transform:capitalize}
.recipe-detail__intro{color:var(--wattenmeer-90);line-height:var(--lh-loose);margin-bottom:1.6rem}
.recipe-detail__cols{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(20px,3vw,40px);margin-bottom:1.6rem}
.recipe-detail__cols h4{font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--liebstoeckel);font-family:"Hanken Grotesk";font-weight:700;margin-bottom:.9rem}
.recipe-detail__ing{display:flex;flex-direction:column;gap:.55rem}
.recipe-detail__ing li{font-size:var(--fs-md);color:var(--wattenmeer);padding-left:1.1em;position:relative}
.recipe-detail__ing li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--bernstein)}
.recipe-detail__steps{display:flex;flex-direction:column;gap:.9rem;counter-reset:step}
.recipe-detail__steps li{font-size:var(--fs-md);color:var(--wattenmeer);line-height:var(--lh-relaxed);padding-left:2.4em;position:relative;counter-increment:step}
.recipe-detail__steps li::before{content:counter(step);position:absolute;left:0;top:0;width:1.7em;height:1.7em;border-radius:50%;background:var(--liebstoeckel);color:#fff;font-family:"Fraunces";font-size:var(--fs-base);font-weight:600;display:flex;align-items:center;justify-content:center}
.recipe-detail__tip{display:flex;gap:.7em;align-items:flex-start;background:var(--himmel-soft);border-radius:var(--r-sm);padding:14px 16px;font-size:var(--fs-base);color:var(--wattenmeer);margin-bottom:1.6rem}
.recipe-detail__tip svg{flex:none;width:20px;height:20px;color:var(--bernstein-deep);margin-top:1px}
@media(max-width:760px){.recipe-detail__cols{grid-template-columns:1fr}}

/* ----- FAQ accordion ----- */
.faq{background:var(--salz-2)}
.faq__head{max-width:680px;margin:0 auto clamp(34px,5vw,52px);text-align:center}
.faq__head .eyebrow{justify-content:center;display:inline-flex}
.faq__head h2{font-size:var(--fs-h1);margin:1rem 0 .8rem}
.faq__head p{color:var(--wattenmeer-90)}
.faq__list{max-width:780px;margin:0 auto;display:flex;flex-direction:column;gap:12px}
.faq-item{background:#fff;border:1px solid var(--line-soft);border-radius:var(--r-sm);overflow:hidden;transition:border-color .25s,box-shadow .25s}
.faq-item.open{border-color:var(--himmel);box-shadow:var(--shadow-sm)}
.faq-item__q{display:flex;align-items:center;justify-content:space-between;gap:1rem;width:100%;padding:20px var(--sp-5);text-align:left;font-family:"Fraunces",Georgia,serif;font-size:var(--fs-lg);font-weight:500;color:var(--wattenmeer)}
.faq-item__q svg{flex:none;width:20px;height:20px;color:var(--liebstoeckel);transition:transform .3s var(--ease)}
.faq-item.open .faq-item__q svg{transform:rotate(180deg)}
.faq-item__a{max-height:0;overflow:hidden;transition:max-height .35s var(--ease)}
.faq-item__a p{padding:0 var(--sp-5) var(--sp-5);color:var(--wattenmeer-90);font-size:var(--fs-md);line-height:var(--lh-relaxed)}

/* ----- "Das Original" — premium packaging ----- */
.original{background:linear-gradient(180deg,var(--salz),var(--duene))}
.original__head{max-width:760px;margin:0 auto clamp(34px,5vw,56px);text-align:center}
.original__head .eyebrow{justify-content:center;display:inline-flex}
.original__head h2{font-size:var(--fs-h1);margin:1rem 0 .9rem}
.original__head p{color:var(--wattenmeer-90);font-size:var(--fs-lg)}
.original__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px)}
.original__item{background:var(--salz-2);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.4vw,30px);transition:transform .35s var(--ease),box-shadow .35s}
.original__item:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.original__num{font-family:"Fraunces";font-size:var(--fs-lg);color:var(--bernstein-deep);font-weight:600;letter-spacing:.1em;margin-bottom:.6rem}
.original__item h4{font-family:"Fraunces",Georgia,serif;font-size:var(--fs-xl);margin-bottom:.4rem}
.original__item p{font-size:var(--fs-md);color:var(--wattenmeer-90);line-height:var(--lh-normal)}
.original__note{display:flex;gap:.7em;align-items:center;justify-content:center;margin-top:clamp(28px,4vw,44px);font-size:var(--fs-md);color:var(--wattenmeer);background:var(--salz-2);border:1px dashed var(--bernstein);border-radius:100px;padding:.8em 1.4em;max-width:max-content;margin-inline:auto}
.original__note svg{flex:none;width:18px;height:18px;color:var(--bernstein)}
@media(max-width:960px){.original__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.original__grid{grid-template-columns:1fr}}

/* ----- Sustainability ----- */
.sustain{background:var(--liebstoeckel-dk);color:var(--salz)}
.sustain__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center}
.sustain .eyebrow{color:var(--himmel)}
.sustain .eyebrow::before{background:var(--bernstein)}
.sustain h2{font-size:var(--fs-h2);color:#fff;margin:1rem 0 1rem;max-width:18ch}
.sustain p{color:var(--himmel-soft);max-width:50ch}
.sustain__list{display:flex;flex-direction:column;gap:1rem}
.sustain__list li{display:flex;gap:.7rem;align-items:flex-start;font-size:var(--fs-lg);color:var(--salz)}
/* .sustain hat dunklen Grund — helle Amber-Variante (4,31:1 statt 2,5:1) */
.sustain__list svg{flex:0 0 auto;width:22px;height:22px;color:var(--bernstein-bright);margin-top:2px}
@media(max-width:860px){.sustain__inner{grid-template-columns:1fr}}

/* ----- active nav (scrollspy) ----- */
.nav__link.is-current{color:var(--liebstoeckel)}
.nav__link.is-current::after{content:"";position:absolute;left:.95em;right:.95em;bottom:.28em;height:2px;border-radius:2px;background:var(--bernstein)}

/* anchor offset so sticky header doesn't cover section tops */
main section[id]{scroll-margin-top:calc(var(--header-h) + 14px)}

/* ----- premium product media: real freigestellt product photo ----- */
.card__photo{display:flex;align-items:center;justify-content:center;width:100%;height:100%;position:relative;z-index:1}
.card__bottle{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 10px 12px rgba(18,59,64,.14)) drop-shadow(0 2px 3px rgba(18,59,64,.10));transition:transform .55s var(--ease),filter .55s var(--ease)}
.card:hover .card__bottle{transform:translateY(-6px) scale(1.025);filter:drop-shadow(0 18px 20px rgba(18,59,64,.18)) drop-shadow(0 3px 5px rgba(18,59,64,.12))}

/* ----- product film section ----- */
.filmstrip{background:var(--salz-2)}
.film__inner{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(28px,4vw,60px);align-items:center}
/* Premium framing: cinematic grade on the (blue studio) footage + coloured
   ambient glow, top studio-light sheen and bottom depth vignette. All via CSS
   so it applies identically to the poster still and the playing video. */
.film__media{position:relative;isolation:isolate;margin:0;border-radius:22px;overflow:hidden;background:var(--himmel-soft);aspect-ratio:16/10;
  box-shadow:0 44px 78px -34px rgba(9,72,102,.62), 0 18px 40px -22px rgba(9,72,102,.46), inset 0 0 0 1px rgba(255,255,255,.16)}
.film__media video{position:relative;z-index:0;width:100%;height:100%;display:block;object-fit:cover;filter:contrast(1.11) saturate(1.22) brightness(1.02)}
/* top studio-light sheen (lighten) */
.film__media::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;
  background:radial-gradient(125% 82% at 50% -8%,rgba(139,196,220,.32),rgba(139,196,220,0) 48%)}
/* deepen edges → cinematic teal vignette (darken) */
.film__media::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;mix-blend-mode:multiply;
  background:radial-gradient(145% 125% at 50% 122%,rgba(6,45,64,0) 50%,rgba(6,45,64,.62) 100%),linear-gradient(180deg,rgba(8,54,76,.20),rgba(8,54,76,0) 30%)}
.film__text .eyebrow{justify-content:flex-start;display:inline-flex}
.film__text h2{font-size:var(--fs-h1);margin:1rem 0 1rem}
.film__text p{color:var(--wattenmeer-90);max-width:46ch;margin-bottom:1.7rem;font-size:var(--fs-lg)}
@media(max-width:860px){.film__inner{grid-template-columns:1fr}.film__media{order:-1;max-width:540px;margin:0 auto}}

/* ----- clickable gift tiles + gift detail modal ----- */
.gift-card{cursor:pointer}
.gift-card:focus-visible{outline:3px solid var(--himmel);outline-offset:3px}
.gift-card__more{display:inline-block;margin-top:1.1rem;font-size:var(--fs-sm);font-weight:700;letter-spacing:.04em;color:var(--bernstein-deep);transition:transform .25s var(--ease)}
.gift-card__more::after{content:" →"}
.gift-card:hover .gift-card__more{transform:translateX(4px)}

.gd{padding-top:var(--sp-8)}
.gd__ic{display:inline-flex;width:54px;height:54px;align-items:center;justify-content:center;border-radius:16px;background:var(--himmel-soft);color:var(--liebstoeckel);margin-bottom:1rem}
.gd__ic svg{width:26px;height:26px}
.gd__title{font-family:"Fraunces",Georgia,serif;font-size:clamp(1.7rem,3.4vw,2.1rem);margin:.4rem 0 .4rem}
.gd__tag{color:var(--bernstein-deep);font-weight:700;font-size:var(--fs-md);margin-bottom:1.2rem}
.gd__intro p{color:var(--wattenmeer-90);line-height:var(--lh-loose);margin-bottom:1rem}
.gd__cols{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,3vw,40px);margin:1.5rem 0}
.gd__cols h4{font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--liebstoeckel);font-family:"Hanken Grotesk";font-weight:700;margin-bottom:.9rem}
.gd__list{display:flex;flex-direction:column;gap:.6rem}
.gd__list li{display:flex;gap:.6em;align-items:flex-start;font-size:var(--fs-md);color:var(--wattenmeer)}
.gd__list svg{flex:none;width:18px;height:18px;color:var(--liebstoeckel);margin-top:2px}
.gd__chips{display:flex;flex-wrap:wrap;gap:8px}
.gd__chip{background:var(--salz-2);border:1px solid var(--line);border-radius:100px;padding:.45em 1em;font-size:var(--fs-base);font-weight:600;color:var(--wattenmeer)}
.gd__detail{color:var(--wattenmeer-90);line-height:var(--lh-loose);margin-bottom:1.4rem}
.gd__tip{display:flex;gap:.7em;align-items:flex-start;background:var(--himmel-soft);border-radius:var(--r-sm);padding:14px 16px;font-size:var(--fs-md);color:var(--wattenmeer);margin-bottom:1.6rem}
.gd__tip svg{flex:none;width:20px;height:20px;color:var(--bernstein-deep);margin-top:1px}
.gd__cta{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:760px){.gd__cols{grid-template-columns:1fr}}

/* ----- clickable original/market tiles + their detail modals ----- */
.original__item[data-market],.original__item[data-original]{cursor:pointer}
.original__item[data-market]:focus-visible,.original__item[data-original]:focus-visible{outline:3px solid var(--himmel);outline-offset:3px}
.original__more{display:inline-block;margin-top:1rem;font-size:var(--fs-sm);font-weight:700;letter-spacing:.04em;color:var(--bernstein-deep);transition:transform .25s var(--ease)}
.original__more::after{content:" →"}
.original__item:hover .original__more{transform:translateX(4px)}
.promise__item[data-promise]{cursor:pointer;transition:transform .35s var(--ease)}
.promise__item[data-promise]:hover{transform:translateY(-4px)}
.promise__item[data-promise]:focus-visible{outline:3px solid var(--himmel);outline-offset:5px;border-radius:14px}
.promise__item .original__more{margin-top:.8rem}
.promise__item:hover .original__more{transform:translateX(4px)}
.gd__pointsh{font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--liebstoeckel);font-family:"Hanken Grotesk";font-weight:700;margin:1.5rem 0 .9rem}
.gd__list--wide{display:grid;grid-template-columns:1fr 1fr;gap:.6rem 1.5rem;margin-bottom:1.4rem}
@media(max-width:600px){.gd__list--wide{grid-template-columns:1fr}}
.mk__flags{display:flex;gap:8px;margin-bottom:1rem}
.mk__flag{width:36px;height:24px;border-radius:5px;overflow:hidden;box-shadow:0 2px 6px -1px rgba(18,59,64,.28);border:1px solid var(--line-soft)}
.mk__flag svg{width:100%;height:100%;display:block}
.mk__num{color:var(--bernstein-deep);font-weight:600;margin-right:.15em}
.mk__status{display:inline-block;background:var(--himmel-soft);color:var(--liebstoeckel-dk);font-size:var(--fs-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.42em 1em;border-radius:100px;margin-bottom:1.1rem}
.mk__steps{display:flex;flex-direction:column;gap:.7rem;counter-reset:mstep;margin:0}
.mk__steps li{position:relative;padding-left:2em;font-size:var(--fs-md);color:var(--wattenmeer);line-height:var(--lh-normal);counter-increment:mstep}
.mk__steps li::before{content:counter(mstep);position:absolute;left:0;top:.05em;width:1.4em;height:1.4em;border-radius:50%;background:var(--bernstein);color:#fff;font-size:var(--fs-xs);font-weight:700;display:flex;align-items:center;justify-content:center}

/* ----- trust / shipping bar ----- */
.trust{background:var(--salz-2)}
.trust__head{text-align:center;max-width:640px;margin:0 auto clamp(34px,5vw,54px)}
.trust__head .eyebrow{justify-content:center;display:inline-flex}
.trust__head h2{font-size:var(--fs-h2);margin-top:1rem}
.trust__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(20px,3vw,40px)}
.trust__item{text-align:center}
.trust__ic{display:inline-flex;width:58px;height:58px;align-items:center;justify-content:center;border-radius:50%;border:1.5px solid var(--bernstein-deep);color:var(--bernstein-deep);margin-bottom:1.1rem}
.trust__ic svg{width:26px;height:26px}
.trust__item h4{font-family:"Fraunces",Georgia,serif;font-size:var(--fs-xl);margin-bottom:.35rem;color:var(--wattenmeer)}
.trust__item p{font-size:var(--fs-base);color:var(--wattenmeer-90);line-height:var(--lh-normal)}
@media(max-width:860px){.trust__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.trust__grid{grid-template-columns:1fr}}

/* ----- newsletter inline status ----- */
.news__status{min-height:1.1em;margin-top:.9rem;font-size:var(--fs-md);font-weight:600}
.news__status[data-state="ok"]{color:var(--liebstoeckel-dk)}
.news__status[data-state="error"]{color:#b3520f}

/* ----- cookie / consent banner ----- */
/* Slim, premium consent bar — stays out of the hero's way */
.consent{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-consent);padding:clamp(10px,1.4vw,16px);transform:translateY(130%);transition:transform .45s var(--ease);pointer-events:none}
.consent.show{transform:none;pointer-events:auto}
.consent__inner{max-width:980px;margin:0 auto;background:rgba(18,59,64,.94);backdrop-filter:blur(10px);color:var(--salz);border-radius:100px;box-shadow:0 16px 40px -12px rgba(18,59,64,.55);padding:8px 10px 8px 24px;display:flex;gap:var(--sp-4);align-items:center;justify-content:space-between}
.consent__text{color:var(--himmel-soft);font-size:var(--fs-base);line-height:var(--lh-normal);margin:0}
.consent__text a{color:#fff;text-decoration:underline;text-underline-offset:2px}
.consent__actions{display:flex;gap:8px;flex:none}
.consent__btn{border:1px solid rgba(255,255,255,.4);background:transparent;color:#fff;font-weight:600;font-size:var(--fs-base);letter-spacing:.01em;padding:.6em 1.25em;border-radius:100px;cursor:pointer;white-space:nowrap;transition:background .2s,border-color .2s,transform .2s}
.consent__btn:hover{background:rgba(255,255,255,.12);border-color:#fff}
/* NOTE: the former .consent__btn--accent modifier highlighted "accept all" over
   "necessary only". That nudge makes the consent involuntary (Art. 4 Nr. 11
   DSGVO), so it was removed — keep both consent buttons visually equal. */
@media(max-width:760px){.consent__inner{flex-direction:column;align-items:stretch;border-radius:20px;padding:14px 16px;gap:12px}.consent__text{text-align:center}.consent__actions{justify-content:stretch}.consent__btn{flex:1;text-align:center}}

/* ----- back-to-top button ----- */
.to-top{position:fixed;right:clamp(16px,3vw,28px);bottom:clamp(16px,3vw,28px);z-index:var(--z-totop);width:46px;height:46px;border-radius:50%;background:var(--wattenmeer);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s var(--ease),transform .3s var(--ease),background .2s}
.to-top.show{opacity:1;visibility:visible;transform:none}
.to-top:hover{background:var(--liebstoeckel)}
.to-top svg{width:20px;height:20px}


/* ===================== journal.css ===================== */
/* ============================================================
   VOIGT HAUSGEMACHTES — Journal "Aus der Backstube"
   ============================================================ */
.journal__head{max-width:760px;margin:0 auto clamp(34px,5vw,52px);text-align:center}
.journal__head .eyebrow{justify-content:center;display:inline-flex}
.journal__head h2{font-size:var(--fs-h1);margin:1rem 0 .8rem}
.journal__head p{color:var(--wattenmeer-90)}
.journal__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,2vw,24px)}
.jcard{position:relative;background:var(--salz-2);border:1px solid var(--line-soft);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s var(--ease),box-shadow .35s,border-color .3s}
.jcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-lg);border-color:var(--himmel)}
.jcard:focus-within{outline:3px solid var(--himmel);outline-offset:3px}
.jcard__open{font:inherit;color:inherit;background:none;border:0;padding:0;margin:0;cursor:pointer;text-align:left}
.jcard__open::after{content:"";position:absolute;inset:0;z-index:1}
.jcard__open:focus-visible{outline:none}
.jcard:has(.jcard__open:focus-visible){outline:3px solid var(--himmel);outline-offset:2px}
.jcard__media{position:relative;aspect-ratio:3/2;overflow:hidden}
.jcard__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.jcard:hover .jcard__media img{transform:scale(1.06)}
.jcard__cat{position:absolute;top:12px;left:12px;background:var(--salz);color:var(--liebstoeckel);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.4em .8em;border-radius:100px;box-shadow:var(--shadow-sm)}
.jcard__body{padding:var(--sp-4) 20px var(--sp-5);display:flex;flex-direction:column;flex:1}
.jcard__meta{font-size:var(--fs-xs);color:var(--wattenmeer-90);text-transform:uppercase;letter-spacing:.04em}
.jcard__body h3{font-family:"Fraunces",Georgia,serif;font-size:var(--fs-xl);line-height:var(--lh-snug);margin:.5rem 0 .5rem}
.jcard__body p{font-size:var(--fs-base);color:var(--wattenmeer-90);line-height:var(--lh-normal);flex:1}
.jcard__more{margin-top:1rem;font-size:var(--fs-sm);font-weight:700;letter-spacing:.04em;color:var(--bernstein-deep);transition:transform .25s var(--ease)}
.jcard:hover .jcard__more{transform:translateX(4px)}
@media(max-width:1100px){.journal__grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:600px){.journal__grid{grid-template-columns:1fr}}

/* article detail modal */
/* Article detail modal — professional two-column (image | text) layout that
   fits the viewport without page scroll; the text column scrolls if needed. */
.modal__card--article{position:relative;width:min(960px,100%);max-height:86vh;overflow:hidden}
.article-modal{display:grid;grid-template-columns:minmax(0,0.92fr) minmax(0,1fr);max-height:86vh}
.article-modal__media{position:relative;background:#0d2a2a;min-height:360px}
.article-modal__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.article-modal__content{display:flex;flex-direction:column;padding:clamp(28px,3vw,46px);overflow-y:auto}
.modal__close{position:absolute;z-index:3;top:16px;right:16px;width:42px;height:42px;border-radius:50%;border:0;cursor:pointer;background:var(--wattenmeer);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:0 6px 18px -6px rgba(0,0,0,.5);transition:background .2s,transform .3s var(--ease)}
.modal__close:hover{background:var(--wattenmeer-90);transform:rotate(90deg)}
.modal__close svg{width:20px;height:20px}
.article__meta{display:flex;flex-wrap:wrap;gap:.6rem 1rem;align-items:center;font-size:var(--fs-sm);color:var(--wattenmeer-90);text-transform:uppercase;letter-spacing:.04em;margin-bottom:.8rem}
.article__cat{background:var(--himmel-soft);color:var(--liebstoeckel);font-weight:700;padding:.35em .9em;border-radius:100px}
.article__title{font-family:"Fraunces",Georgia,serif;font-size:clamp(1.5rem,3vw,2.1rem);line-height:var(--lh-snug);margin-bottom:1.1rem}
.article__body{flex:1}
.article__body p{color:var(--wattenmeer-90);line-height:var(--lh-loose);margin-bottom:1rem}
.article__body p:first-of-type::first-letter{font-family:"Fraunces",Georgia,serif;font-size:3.2rem;line-height:.8;float:left;margin:.05em .12em 0 0;color:var(--liebstoeckel);font-weight:600}
.article-modal__content .btn{margin-top:1.4rem;align-self:flex-start}
@media(max-width:760px){
  .modal__card--article{max-height:90vh;overflow-y:auto}
  .article-modal{grid-template-columns:1fr;max-height:none}
  .article-modal__media{min-height:0;aspect-ratio:16/10}
  .article-modal__media img{position:relative}
  .article-modal__content{overflow:visible}
}


/* ===================== content.css ===================== */
/* ============================================================
   VOIGT HAUSGEMACHTES — Inhaltsseiten & GEO-Bausteine
   Neu mit der SEO/GEO-Umstellung: eigene URLs für Rezepte und
   Journal-Artikel brauchen ein Seitenlayout, das es vorher nur als
   Modal gab. Die Detail-Innereien (.recipe-detail__*, .article__*)
   werden aus components.css und journal.css weiterverwendet — hier
   steht nur der Rahmen drumherum.
   ============================================================ */

/* ===== Mega-Menü: Navigationslabels ohne Überschriftenrang =====
   Waren <h4>/<h5> und standen im Dokument vor der <h1>. Sobald der
   Prerender sie mit Text füllt, wäre die Gliederung kaputt (h4 vor h1).
   Optik unverändert — die Regeln spiegeln header.css. */
.mega__heading{margin:0}
.mega__col .mega__heading.h4-look{font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;
  color:var(--liebstoeckel);font-family:"Hanken Grotesk";font-weight:700;margin-bottom:1.2rem}
.mega__feature .mega__heading.h5-look{font-family:"Fraunces",Georgia,serif;font-size:var(--fs-2xl);
  margin:.5rem 0 .4rem;color:#fff;font-weight:500}

/* ===== Faktenblock (GEO) =====
   Eine Definitionsliste, aus der generative Systeme Fakten verlässlich
   extrahieren — deutlich zuverlässiger als aus Fließtext. */
.facts{background:var(--salz-2);border-top:1px solid var(--line-soft)}
.facts h2{font-family:"Fraunces",Georgia,serif;font-size:var(--fs-h3);
  color:var(--wattenmeer);margin:.4rem 0 clamp(20px,3vw,34px);max-width:24ch}
/* Vier Spalten = zwei Faktenpaare je Grid-Zeile. dt/dd liegen direkt im Grid
   (kein Wrapper), damit beide Paare dieselbe Zeilenhöhe teilen und die
   Trennlinien durchlaufen — sonst driften sie auseinander, sobald ein Wert
   umbricht. */
.facts__list{display:grid;grid-template-columns:auto minmax(0,1fr) auto minmax(0,1fr);
  gap:0 clamp(20px,3vw,44px);border-top:1px solid var(--line);margin:0}
.facts__list dt,.facts__list dd{padding:.8rem 0;border-bottom:1px solid var(--line-soft);
  align-self:stretch;margin:0}
.facts__list dt{font-size:var(--fs-base);letter-spacing:.06em;text-transform:uppercase;
  color:var(--liebstoeckel);font-weight:700;white-space:nowrap}
.facts__list dd{font-size:var(--fs-md);color:var(--wattenmeer);line-height:var(--lh-normal)}
@media(max-width:960px){
  .facts__list{grid-template-columns:auto minmax(0,1fr)}
  .facts__list dt{white-space:normal}
}
@media(max-width:600px){
  .facts__list{grid-template-columns:1fr}
  .facts__list dt{padding-bottom:.1rem;border-bottom:0}
  .facts__list dd{padding-top:0}
}

/* ===== Link von der Startseite auf die Inhalts-Hubs ===== */
.hub-link{margin-top:clamp(26px,3.4vw,44px)}
.recipes .hub-link .btn--ghost{color:#fff;border-color:rgba(255,255,255,.45)}
.recipes .hub-link .btn--ghost:hover{background:rgba(255,255,255,.1)}

/* ===== Rahmen der Unterseiten ===== */
.subpage{padding:clamp(40px,6vw,86px) 0 clamp(60px,8vw,110px);background:var(--salz)}
.subpage__inner{max-width:820px;margin:0 auto;padding:0 clamp(18px,4vw,32px)}
.subpage--wide .subpage__inner{max-width:var(--container)}

.crumbs{font-size:var(--fs-sm);color:var(--wattenmeer-90);margin-bottom:clamp(18px,2.4vw,30px)}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5em;padding:0;margin:0}
.crumbs li{display:flex;align-items:center;gap:.5em}
.crumbs li+li::before{content:"›";opacity:.5}
.crumbs a{color:var(--wattenmeer-90);text-decoration:none;border-bottom:1px solid var(--line)}
.crumbs a:hover{color:var(--liebstoeckel)}
.crumbs [aria-current]{font-weight:700;color:var(--wattenmeer)}

.subpage h1{font-family:"Fraunces",Georgia,serif;font-size:var(--fs-h1);line-height:var(--lh-snug);
  color:var(--wattenmeer);margin:.3rem 0 .8rem}
.subpage__lead{font-size:clamp(1.02rem,1.6vw,1.18rem);color:var(--wattenmeer-90);line-height:var(--lh-relaxed);
  max-width:60ch;margin-bottom:clamp(24px,3.4vw,40px)}

/* Überschriften der Detailspalten. Auf einer echten Seite müssen das <h2>
   sein (Gliederung), nicht <h4> wie im Modal — Optik bleibt gleich. */
.subpage .recipe-detail__cols h2{font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;
  color:var(--liebstoeckel);font-family:"Hanken Grotesk",system-ui,sans-serif;font-weight:700;
  margin-bottom:1rem}

.subpage__cta{margin-top:clamp(30px,4vw,50px);display:flex;gap:.8rem;flex-wrap:wrap}

/* ===== Hub-Seiten ===== */
.hub__head{max-width:60ch;margin-bottom:clamp(28px,4vw,48px)}
.hub__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:clamp(18px,2.4vw,28px)}
.hub-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,2.4vw,30px);
  display:flex;flex-direction:column;gap:.6rem;text-decoration:none;
  transition:transform .35s var(--ease),box-shadow .35s,border-color .35s}
.hub-card:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:transparent}
.hub-card__num{font-family:"Fraunces",Georgia,serif;font-size:var(--fs-2xl);color:var(--bernstein);line-height:1}
.hub-card h2{font-family:"Fraunces",Georgia,serif;font-size:var(--fs-xl);color:var(--wattenmeer);margin:0}
.hub-card p{font-size:var(--fs-md);color:var(--wattenmeer-90);line-height:var(--lh-relaxed);margin:0}
.hub-card__meta{margin-top:auto;font-size:var(--fs-sm);letter-spacing:.08em;text-transform:uppercase;
  color:var(--liebstoeckel);font-weight:700}
.hub-card__media{margin:-clamp(22px,2.4vw,30px) -clamp(22px,2.4vw,30px) 0;border-radius:var(--r) var(--r) 0 0;
  overflow:hidden;aspect-ratio:16/10}
.hub-card__media img{width:100%;height:100%;object-fit:cover;display:block}

/* ===== Artikel-Fließtext auf eigener Seite ===== */
.subpage .article__body p{font-size:var(--fs-lg);line-height:var(--lh-loose);color:var(--wattenmeer);margin-bottom:1.1rem}
.subpage__figure{margin:0 0 clamp(24px,3vw,38px);border-radius:var(--r);overflow:hidden}
.subpage__figure img{width:100%;height:auto;display:block}

/* ===== Weiterlesen ===== */
.more{margin-top:clamp(48px,6vw,80px);border-top:1px solid var(--line);padding-top:clamp(26px,3vw,40px)}
.more h2{font-family:"Fraunces",Georgia,serif;font-size:var(--fs-2xl);color:var(--wattenmeer);margin-bottom:1.1rem}
.more ul{list-style:none;padding:0;margin:0;display:grid;gap:.6rem}
.more a{color:var(--wattenmeer);text-decoration:none;border-bottom:1px solid var(--line);
  font-size:var(--fs-md);display:inline-block}
.more a:hover{color:var(--liebstoeckel);border-color:var(--liebstoeckel)}


/* ===================== gift-config.css ===================== */
/* ============================================================
   VOIGT HAUSGEMACHTES — Gift configurator + contact form
   ============================================================ */
.gc{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(20px,3vw,40px);background:var(--salz-2);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,36px);margin-top:clamp(28px,4vw,44px)}
.gc__field{margin-bottom:1.3rem}
.gc__field>label{display:block;font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;color:var(--liebstoeckel);font-weight:700;margin-bottom:.7rem}
.gc__variants{display:flex;flex-wrap:wrap;gap:10px}
.gc__chip{border:1.5px solid var(--line);background:#fff;border-radius:100px;padding:.6em 1.1em;font-weight:600;font-size:var(--fs-md);color:var(--wattenmeer);transition:border-color .2s,background .2s}
.gc__chip:hover{border-color:var(--himmel)}
.gc__chip.is-active{background:var(--liebstoeckel);color:#fff;border-color:var(--liebstoeckel)}
.gc__qty{display:inline-flex;align-items:center;border:1.5px solid var(--line);border-radius:100px;overflow:hidden;background:#fff}
.gc__qty button{width:40px;height:40px;font-size:var(--fs-xl);transition:background .15s}
.gc__qty button:hover{background:rgba(18,59,64,.06)}
.gc__qty span{min-width:44px;text-align:center;font-weight:700;font-variant-numeric:tabular-nums}
.gc__field>label.gc__switch{display:inline-flex;align-items:center;gap:.6em;cursor:pointer;font-weight:500;color:var(--wattenmeer);text-transform:none;letter-spacing:normal;font-size:var(--fs-md);margin-bottom:0}
.gc__switch input{width:20px;height:20px;accent-color:var(--liebstoeckel)}
.gc textarea{width:100%;padding:.8em 1em;border:1.5px solid var(--line);border-radius:11px;font-family:inherit;font-size:var(--fs-md);background:#fff;resize:vertical}
.gc textarea:focus{outline:none;border-color:var(--liebstoeckel);box-shadow:0 0 0 3px rgba(174,212,220,.9)}
.gc__summary{background:var(--wattenmeer);color:var(--salz);border-radius:var(--r);padding:clamp(20px,2.4vw,28px);align-self:start;position:sticky;top:90px}
.gc__summary h4{color:#fff;font-family:"Fraunces",Georgia,serif;font-size:var(--fs-xl);margin-bottom:1rem}
.gc__summary ul{display:flex;flex-direction:column;gap:.6rem;margin-bottom:1rem}
.gc__summary li{display:flex;justify-content:space-between;gap:1rem;font-size:var(--fs-md);color:var(--himmel-soft)}
.gc__summary li span:last-child{white-space:nowrap;font-variant-numeric:tabular-nums}
.gc__total{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.18);padding-top:.9rem;margin-bottom:1.2rem;font-weight:700;font-size:var(--fs-xl);color:#fff}
.gc__summary .btn{margin-bottom:.8rem}
.gc__note{font-size:var(--fs-xs);color:var(--himmel);opacity:.85;line-height:var(--lh-normal)}
@media(max-width:760px){.gc{grid-template-columns:1fr}.gc__summary{position:static}}

/* ----- Contact form ----- */
.contact__inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(28px,4vw,56px);align-items:start}
.contact__intro h2{font-size:var(--fs-h2);margin:1rem 0 1rem}
.contact__intro p{color:var(--wattenmeer-90);margin-bottom:1.4rem}
.contact__channels{display:flex;flex-direction:column;gap:.8rem}
.contact__channels a{display:inline-flex;align-items:center;gap:.7em;font-weight:600;color:var(--wattenmeer)}
.contact__channels svg{width:20px;height:20px;color:var(--liebstoeckel);flex:none}
.contact__channels a:hover{color:var(--liebstoeckel)}
.contact__form{background:var(--salz-2);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,3vw,34px)}
.contact__form .field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.contact__ok{display:flex;gap:.7em;align-items:flex-start;background:var(--himmel-soft);border-radius:var(--r-sm);padding:14px 16px;font-size:var(--fs-md);margin-top:1rem;color:var(--wattenmeer)}
.contact__ok svg{flex:none;width:20px;height:20px;color:var(--liebstoeckel);margin-top:1px}
@media(max-width:860px){.contact__inner{grid-template-columns:1fr}.contact__form .field-row{grid-template-columns:1fr}}


/* ===================== footer.css ===================== */
/* ============================================================
   VOIGT HAUSGEMACHTES — Footer
   ============================================================ */

/* ===================== FOOTER ===================== */
.footer{background:var(--wattenmeer);color:var(--himmel-soft);padding-top:clamp(56px,7vw,84px)}
.footer__grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:clamp(24px,3vw,48px);padding-bottom:var(--sp-12)}
.footer__mark{width:64px;height:64px;display:block;margin-bottom:14px;opacity:.95}
.footer__tagline{font-family:"Fraunces",Georgia,serif;font-style:italic;font-size:var(--fs-2xl);color:var(--himmel);margin:.5rem 0 .7rem;line-height:var(--lh-snug)}
.footer__brand .fname{font-family:"Fraunces";font-size:var(--fs-3xl);color:#fff;font-weight:600}
.footer__brand .fsub{font-size:var(--fs-2xs);letter-spacing:.3em;text-transform:uppercase;color:var(--himmel);margin-top:4px}
.footer__brand p{font-size:var(--fs-md);margin:1.2rem 0 1.4rem;max-width:34ch}
.socials{display:flex;gap:10px}
.socials a{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.18);display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s}
.socials a:hover{background:rgba(255,255,255,.1);border-color:var(--himmel)}
.socials svg{width:18px;height:18px}
.footer h4{color:#fff;font-size:var(--fs-xs);letter-spacing:var(--ls-wide);text-transform:uppercase;font-family:"Hanken Grotesk";font-weight:700;margin-bottom:1.1rem}
.footer ul li{margin-bottom:.6rem}
.footer ul li a{font-size:var(--fs-md);transition:color .2s}
.footer ul li a:hover{color:#fff}
.footer__contact p{font-size:var(--fs-md);margin-bottom:.55rem;line-height:var(--lh-relaxed)}
.footer__contact a:hover{color:#fff}
.footer__bottom{border-top:1px solid rgba(255,255,255,.12);padding:var(--sp-5) 0;display:flex;flex-wrap:wrap;justify-content:space-between;gap:1rem;font-size:var(--fs-base)}
.footer__bottom a{margin-left:1.2rem}
.footer__bottom a:first-child{margin-left:0}
.footer__credits{margin:10px 0 0;font-size:var(--fs-xs);opacity:.6;line-height:var(--lh-normal)}
.footer__credits a{text-decoration:underline}


/* ===================== responsive.css ===================== */
/* ============================================================
   VOIGT HAUSGEMACHTES — Reveal animation + responsive breakpoints
   ============================================================ */

/* ===================== REVEAL ANIM ===================== */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .85s var(--ease),transform .85s var(--ease);transition-delay:var(--rd,0ms)}
.reveal.in{opacity:1;transform:none}

/* ===================== RESPONSIVE ===================== */
@media(max-width:1100px){
  .mega__grid{grid-template-columns:1fr 1fr}
  .mega__feature{display:none}
}
@media(max-width:960px){
  .nav,.has-mega .mega{display:none}
  .burger{display:flex}
  .cart-btn span.cart-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .cart-btn{padding:.65em .75em}
  .hero__inner{grid-template-columns:1fr;gap:36px}
  .hero__visual{order:-1;min-height:300px}
  .products{grid-template-columns:repeat(2,1fr)}
  .story__top,.nutri__grid,.maker__grid,.ueber__grid,.values,.visit__grid,.b2b__inner{grid-template-columns:1fr}
  .ueber__photo{max-width:440px;margin:0 auto}
  .recipe-grid,.review-grid{grid-template-columns:1fr}
  .b2b__cta{justify-content:flex-start}
  .footer__grid{grid-template-columns:1fr 1fr}
  .timeline{grid-template-columns:1fr;gap:24px}
  .timeline::before{display:none}
  .tl{text-align:left;display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center}
  .tl__dot{margin:0}
  .tl__txt{max-width:none}
}
@media(max-width:600px){
  .lang__btn .lang-name{display:none}
  .products{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .news__form{flex-direction:column}
  .field-row{grid-template-columns:1fr}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;transition-duration:.001ms!important}
  .reveal{opacity:1;transform:none}
  .hero__bgimg,.hero__scroll{animation:none}
  /* Die Regel oben neutralisiert nur Animation und Transition — das
     Smooth-Scrolling aus base.css läuft davon unberührt weiter. */
  html{scroll-behavior:auto}
}