/* =========================================================================
   GiroFood — marketing site
   Translated from the Claude Design prototype (Girofood.dc.html) into
   standards-based HTML/CSS/JS.

   Conventions:
   - Design tokens live in :root.
   - Structural & repeated elements use semantic classes (below).
   - One-off decorative "food art" (pure-CSS pizzas/snacks) stays as inline
     styles in index.html — translating those single-use blocks to classes
     would only bloat this file and risk transcription drift.
   ========================================================================= */

:root {
  --paper: #FBF7EF;
  --ink: #1C1A17;
  --gray: #5C574F;
  --brand: #C8201E;
  --brand-deep: #9E1610;
  --amber: #E2922B;

  --font-display: 'Bricolage Grotesque', sans-serif;
  --font-body: 'Hanken Grotesk', system-ui, sans-serif;

  --maxw: 1280px;
  --gutter: clamp(20px, 5vw, 56px);
}

/* ---------- Reset / base ------------------------------------------------- */
* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  overflow-x: hidden;
  position: relative;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--brand); color: #fff; }

img { display: block; max-width: 100%; }

@keyframes bob {
  0%, 100% { transform: translateY(0); opacity: .4; }
  50%      { transform: translateY(10px); opacity: 1; }
}

/* Respect users who prefer less motion: kill the looping scroll hint. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-hint__line { animation: none; }
  .hero__photo,
  .hero__inner > * { animation: none; }
  .mrow__num,
  .reel__media img,
  .ueber__frame { transition: none; }
}

/* ---------- Layout helpers ---------------------------------------------- */
.container        { max-width: var(--maxw); margin: 0 auto; }
.container--narrow { max-width: 1180px; margin: 0 auto; }
.container--tight  { max-width: 1100px; margin: 0 auto; }

.section { position: relative; overflow: hidden; }
.section--pad   { padding: clamp(70px, 9vw, 120px) var(--gutter); }
.section--pad-l { padding: clamp(70px, 9vw, 130px) var(--gutter); }

.two   { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 2.4vw, 32px); }

/* ---------- Typography primitives --------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: 1;
  margin: 0;
}
.brand-text { color: var(--brand); }

.eyebrow {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--brand);
}
.eyebrow--amber { color: var(--amber); }
.eyebrow--inline { display: inline-block; }
.eyebrow--hero {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 26px;
  font-weight: 600;
  font-size: clamp(11px, .9vw, 13px);
  letter-spacing: .24em;
  text-transform: uppercase;
  color: var(--brand);
}
.eyebrow__line { width: 24px; height: 2px; background: var(--brand); }
.eyebrow--hero .eyebrow__line { width: 34px; }

.lead {
  font-size: clamp(16px, 1.3vw, 19px);
  line-height: 1.6;
  color: var(--gray);
  margin: 0;
}

/* ---------- Buttons ------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 16px;
  padding: 15px 30px;
  border-radius: 999px;
  text-decoration: none;
  cursor: pointer;
  transition: transform .25s ease, background .25s ease, border-color .25s ease;
}
.btn--solid { background: var(--brand); color: #fff; }
.btn--solid:hover { transform: translateY(-3px); background: var(--brand-deep); }
.btn--outline {
  background: transparent;
  color: var(--ink);
  border: 2px solid rgba(28, 26, 23, .18);
}
.btn--outline:hover { border-color: var(--ink); }

/* ---------- Scroll progress bar ----------------------------------------- */
.progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: var(--brand);
  z-index: 1200;
  transition: width .1s linear;
}

/* ---------- Navigation --------------------------------------------------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  background: rgba(251, 247, 239, .92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: box-shadow .4s ease, padding .4s ease;
  padding: 16px var(--gutter);
}
.nav.is-scrolled {
  box-shadow: 0 6px 24px rgba(0, 0, 0, .07);
  padding: 11px var(--gutter);
}
.nav__inner {
  max-width: var(--maxw);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav__logo { display: inline-flex; align-items: center; }
.nav__logo img { height: 46px; width: auto; }
.nav__right { display: flex; align-items: center; gap: 30px; }
.nav__links { display: flex; gap: 30px; }
.nav__link {
  font-weight: 600;
  font-size: 14px;
  color: var(--ink);
  text-decoration: none;
}
.nav__link:hover { color: var(--brand); }
.nav__cta {
  font-weight: 600;
  font-size: 14px;
  color: #fff;
  text-decoration: none;
  background: var(--brand);
  padding: 11px 22px;
  border-radius: 999px;
  transition: background .25s ease;
}
.nav__cta:hover { background: var(--brand-deep); }

/* ---------- Language switcher ----------------------------------------- */
.lang { position: relative; display: inline-flex; }
.lang__btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 13px/1 var(--font-body);
  letter-spacing: .02em;
  color: var(--ink);
  background: transparent;
  border: 1px solid rgba(28, 26, 23, .2);
  border-radius: 999px;
  padding: 8px 11px;
  cursor: pointer;
  transition: border-color .25s ease, color .25s ease, background .25s ease;
}
.lang__btn:hover { border-color: var(--brand); color: var(--brand); }
.lang__globe { opacity: .85; }
.lang__chev { transition: transform .25s ease; opacity: .65; }
.lang.is-open .lang__chev { transform: rotate(180deg); }
.lang__menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 170px;
  background: var(--paper);
  border: 1px solid rgba(28, 26, 23, .1);
  border-radius: 14px;
  box-shadow: 0 20px 44px -20px rgba(0, 0, 0, .32);
  padding: 6px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition: opacity .2s ease, transform .2s ease, visibility .2s;
  z-index: 60;
}
.lang.is-open .lang__menu { opacity: 1; visibility: visible; transform: translateY(0); }
.lang__opt {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 9px;
  padding: 9px 11px;
  cursor: pointer;
  color: var(--ink);
  transition: background .18s ease;
}
.lang__opt:hover { background: rgba(28, 26, 23, .06); }
.lang__opt[aria-current="true"] { color: var(--brand); }
.lang__opt[aria-current="true"] .lang__code { background: var(--brand); color: #fff; border-color: var(--brand); }
.lang__code {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  padding: 3px 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  border: 1px solid rgba(28, 26, 23, .2);
  border-radius: 6px;
  color: var(--gray);
}
.lang__name { font-size: 14px; font-weight: 500; }

/* inline language pills — desktop hidden; shown inside the mobile menu */
.lang-inline { display: none; }

/* mobile menu (hamburger) — only shown < 920px */
.nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  margin: 0 auto;
  background: var(--ink);
  border-radius: 2px;
  transition: transform .3s ease, opacity .2s ease;
}
.nav.is-open .nav__toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav.is-open .nav__toggle span:nth-child(2) { opacity: 0; }
.nav.is-open .nav__toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
.nav__mobile {
  display: none;
  flex-direction: column;
  max-width: var(--maxw);
  margin: 0 auto;
  max-height: calc(100svh - 80px);
  overflow-y: auto;
}
.nav__mobile a {
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  text-decoration: none;
  padding: 13px 4px;
  border-bottom: 1px solid rgba(28, 26, 23, .08);
}
.nav__mobile a.nav__cta {
  color: #fff;
  text-align: center;
  border-bottom: none;
  border-radius: 999px;
  margin-top: 10px;
  padding: 13px 22px;
}

/* ---------- Hero (full-bleed, immersive) -------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background: var(--paper);
  overflow: hidden;
}
/* oversized so the scroll parallax (data-parallax in main.js) never reveals a gap */
.hero__media { position: absolute; left: 0; right: 0; top: -16%; height: 132%; z-index: 0; }
.hero__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% center;
  animation: heroZoom 20s ease-out both;        /* slow Ken-Burns drift */
}
/* cream scrim: keeps the left-side copy legible while the food bleeds right */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(100deg,
      var(--paper) 0%,
      rgba(251, 247, 239, .97) 30%,
      rgba(251, 247, 239, .82) 46%,
      rgba(251, 247, 239, .34) 60%,
      rgba(251, 247, 239, 0) 70%),
    linear-gradient(to top, rgba(251, 247, 239, .55), transparent 24%);
}
.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 96px var(--gutter) 80px;
}
.hero__inner { max-width: 640px; }
/* one orchestrated page-load: staggered rise of each line */
.hero__inner > * { animation: heroRise .9s cubic-bezier(.16, .84, .3, 1) both; }
.hero__inner > .eyebrow--hero { animation-delay: .05s; }
.hero__inner > h1             { animation-delay: .14s; }
.hero__inner > .hero__lead    { animation-delay: .26s; }
.hero__inner > .hero__cta     { animation-delay: .38s; }
.hero__inner > .hero__stats   { animation-delay: .50s; }

.hero h1 {
  font-family: 'Anton', var(--font-display);
  font-weight: 400;                 /* Anton ships a single (heavy) weight */
  font-style: normal;
  font-size: clamp(46px, 8.2vw, 128px);
  line-height: .86;
  letter-spacing: .005em;
  text-transform: uppercase;
  margin: 0;
  color: var(--ink);
  text-wrap: balance;
}
.hero h1 .brand-text { color: var(--brand); }
/* thin brand baseline rule under the headline — a second red touchpoint */
.hero h1::after {
  content: "";
  display: block;
  width: clamp(56px, 7vw, 104px);
  height: 3px;
  margin-top: clamp(18px, 1.8vw, 28px);
  background: var(--brand);
  border-radius: 2px;
}
.hero__lead {
  font-size: clamp(16px, 1.4vw, 20px);
  line-height: 1.6;
  max-width: 44ch;
  margin: 26px 0 0;
  color: var(--gray);
}
.hero__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}
.hero__stats {
  display: flex;
  gap: 28px;
  margin-top: 46px;
  flex-wrap: wrap;
}
.stat__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 34px;
  line-height: 1;
  color: var(--ink);
}
.stat__label { font-size: 13px; color: var(--gray); margin-top: 4px; }
.stat__divider { width: 1px; background: rgba(28, 26, 23, .18); }
/* Text-only stat (no number): vertically centred, a touch more presence. */
.stat--note {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.stat--note .stat__label {
  margin-top: 0;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  max-width: 13ch;
}

@keyframes heroRise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroZoom {
  from { transform: scale(1.08); }
  to   { transform: scale(1); }
}

/* scroll hint */
.scroll-hint {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.scroll-hint__label {
  font-size: 11px;
  letter-spacing: .3em;
  font-weight: 600;
  color: var(--gray);
  opacity: .6;
}
.scroll-hint__line {
  width: 1px;
  height: 28px;
  background: var(--ink);
  display: block;
  animation: bob 1.9s ease-in-out infinite;
  transform-origin: top;
}

/* ---------- Section header (two-col intro) ------------------------------ */
.sec-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: end;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.sec-head--lg { margin-bottom: clamp(40px, 5vw, 64px); }
.sec-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 4.8vw, 72px);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0;
}

/* ---------- Produkte: horizontal scroll reel -------------------------- */
/* The four favourites slide horizontally as you scroll a tall pinned section
   (main.js hreels). On phones it falls back to a native swipeable snap
   carousel — see the @media block. */
.reel { position: relative; height: 260vh; background: var(--paper); }
.reel__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(56px, 7vh, 84px) 0 clamp(16px, 2.2vh, 28px);
}
.reel__head {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto clamp(12px, 1.8vh, 22px);
  padding: 0 var(--gutter);
}
/* keep the reel headline compact so the full card + foot fit in the pin */
.reel .sec-title { font-size: clamp(24px, 3vw, 44px); }
/* The scrub window is capped to the content width and centred, so the card
   track ALWAYS overflows it (and the glide has room) no matter how wide the
   browser is — otherwise on a wide monitor 4 cards fit side-by-side, the
   track doesn't overflow and the scroll-scrub has nothing to travel.
   flex-shrink:0 keeps it from shrinking (its overflow:hidden would clip the
   card's label + description). */
.reel__viewport {
  width: 100%;
  max-width: var(--maxw);
  margin: 0 auto;
  overflow: hidden;
  flex-shrink: 0;
}
.reel__track {
  display: flex;
  gap: clamp(20px, 2.4vw, 40px);
  padding: 0 var(--gutter);
  will-change: transform;
}
/* Card width: as wide as the pin height allows (so nothing is clipped),
   capped at 470px and floored at 300px. Combined with the capped viewport
   above, four of these always overflow the scrub window. */
.reel__item { flex: 0 0 clamp(300px, calc((100vh - 290px) * 0.75), 470px); }
.reel__media {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: 18px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 30px 60px -34px rgba(0, 0, 0, .42);
}
.reel__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .7s cubic-bezier(.16, .84, .3, 1);
}
.reel__item:hover .reel__media img { transform: scale(1.045); }
.reel__num {
  position: absolute;
  top: 16px;
  left: 18px;
  z-index: 2;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--brand);
  background: rgba(251, 247, 239, .92);
  padding: 5px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}
/* dezent name caption sitting on the image (an <h3> kept for heading semantics) */
.reel__label {
  position: absolute;
  left: 16px;
  bottom: 16px;
  z-index: 2;
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(15px, 1.5vw, 18px);
  letter-spacing: -.005em;
  color: var(--ink);
  background: rgba(251, 247, 239, .82);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  padding: 8px 15px;
  border-radius: 999px;
  box-shadow: 0 8px 20px -10px rgba(0, 0, 0, .3);
}
.reel__body { padding: 12px 4px 0; }
.reel__body p { font-size: 15px; line-height: 1.5; color: var(--gray); margin: 0; max-width: 38ch; }
.reel__foot {
  width: 100%;
  max-width: var(--maxw);
  margin: clamp(10px, 1.4vh, 20px) auto 0;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
  gap: 20px;
}
.reel__progress {
  flex: 1;
  height: 3px;
  background: rgba(28, 26, 23, .1);
  border-radius: 999px;
  overflow: hidden;
}
.reel__bar {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--brand), var(--amber));
  transform: scaleX(0);
  transform-origin: left;
}
.reel__hint {
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gray);
  font-weight: 600;
  white-space: nowrap;
}

/* ---------- Showcase (scroll-scrubbed cinematic) ----------------------- */
/* Tall section whose inner stays pinned while you scroll; the scroll progress
   drives the assembly video's timeline (see main.js scrubbers) — the
   ingredients land on the hot dog as you scroll. The HTML copy is overlaid on
   the dark left so it stays editable. */
.showcase {
  position: relative;
  height: 280vh;
  background: #000;          /* matches the video's pure-black void → no border */
  color: var(--paper);
}
.showcase__pin {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
/* the video keeps its own 2:3 portrait aspect (full hot dog, no zoom crop) and
   sits on the right. Its background is pure black (the source frame was darkened
   before generation) so it melts into the #000 section — no rectangle; the edges
   still feather as insurance. */
.showcase__media {
  position: absolute;
  top: 50%;
  right: clamp(8px, 5vw, 90px);
  transform: translateY(-50%);
  height: 96%;
  aspect-ratio: 2 / 3;
  z-index: 0;
  -webkit-mask-image:
    linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 97%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(90deg, transparent 0, #000 11%, #000 89%, transparent 100%),
    linear-gradient(to bottom, transparent 0, #000 6%, #000 97%, transparent 100%);
  mask-composite: intersect;
}
.showcase__video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* dark left so the copy stays legible + a right-edge/corner vignette that
   tames the video's bright studio rim and keeps it a cohesive dark scene */
.showcase__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(90deg,
    #0B0807 0%, rgba(11, 8, 7, .85) 24%, rgba(11, 8, 7, .35) 42%, rgba(11, 8, 7, 0) 56%);
}
.showcase__inner {
  position: relative;
  z-index: 2;
  height: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: flex;
  align-items: center;
}
.showcase__copy {
  position: relative;
  max-width: 440px;
}
.showcase__copy h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(32px, 4.4vw, 68px);
  line-height: 1;
  letter-spacing: -.02em;
  margin: 0 0 22px;
}
.showcase__copy p {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.65;
  opacity: .82;
  max-width: 42ch;
  margin: 0;
}

/* ---------- Darum GiroFood (editorial numbered manifesto) -------------- */
/* Three values as oversized numbered rows; the outline number fills solid
   brand-red on hover. No icons, no boxed cards — purely typographic. */
#qualitaet > .container--narrow { width: 100%; }
.manifesto__list {
  list-style: none;
  margin: clamp(36px, 5vh, 64px) 0 0;
  padding: 0;
}
.mrow {
  position: relative;
  display: grid;
  grid-template-columns: clamp(84px, 11vw, 150px) 1fr;
  align-items: center;
  gap: clamp(18px, 4vw, 56px);
  padding: clamp(26px, 3.6vh, 42px) clamp(8px, 1.4vw, 22px);
  border-top: 1px solid rgba(28, 26, 23, .12);
  border-radius: 16px;
  transition: background .45s ease;
}
.mrow:last-child { border-bottom: 1px solid rgba(28, 26, 23, .12); }
.mrow:hover { background: rgba(255, 255, 255, .55); }
.mrow__num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(52px, 8vw, 104px);
  line-height: .82;
  letter-spacing: -.04em;
  color: transparent;
  -webkit-text-stroke: 1.4px rgba(200, 32, 30, .5);
  transition: color .45s cubic-bezier(.16, .84, .3, 1),
              -webkit-text-stroke-color .45s ease,
              transform .45s cubic-bezier(.16, .84, .3, 1);
}
.mrow:hover .mrow__num {
  color: var(--brand);
  -webkit-text-stroke-color: transparent;
  transform: translateY(-3px);
}
.mrow__tag {
  display: inline-block;
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 12px;
}
.mrow__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(23px, 2.8vw, 36px);
  letter-spacing: -.015em;
  line-height: 1.05;
  margin: 0 0 12px;
}
.mrow__text {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.62;
  color: var(--gray);
  margin: 0;
  max-width: 54ch;
}

/* ---------- Unsere Idee (layered editorial story) --------------------- */
.ueber { background: #F2E9D8; }
.ueber__grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}
.ueber__media { position: relative; }
.ueber__frame {
  position: relative;
  border-radius: 22px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: 0 40px 80px -40px rgba(40, 26, 14, .5);
}
.ueber__frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* a small white card overhangs the photo's lower-right → magazine depth */
.ueber__quote {
  position: absolute;
  right: clamp(-20px, -1.4vw, -10px);
  bottom: clamp(-34px, -3vw, -22px);
  width: min(76%, 350px);
  margin: 0;
  background: var(--paper);
  border-radius: 16px;
  padding: clamp(18px, 2vw, 26px) clamp(20px, 2.2vw, 30px);
  box-shadow: 0 26px 50px -26px rgba(40, 26, 14, .45);
}
.ueber__mark {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 50px;
  line-height: .5;
  color: var(--brand);
  margin-bottom: 10px;
}
.ueber__quote blockquote {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(16px, 1.5vw, 21px);
  line-height: 1.22;
  letter-spacing: -.01em;
  color: var(--ink);
}
.ueber__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 3.8vw, 52px);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 16px 0 22px;
}
.prose {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.7;
  color: var(--gray);
  margin: 0 0 16px;
}
.ueber__copy .prose:last-of-type { margin-bottom: 0; }
.ueber__lineage {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: clamp(28px, 3.5vh, 40px);
  padding: 16px 20px;
  background: rgba(255, 255, 255, .5);
  border-radius: 14px;
}
.ueber__lineage-bar {
  flex: 0 0 auto;
  width: 4px;
  height: 40px;
  border-radius: 999px;
  background: linear-gradient(var(--brand), var(--amber));
}
.ueber__lineage-label {
  display: block;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 3px;
}
.ueber__lineage-text { display: block; font-size: 14px; color: var(--ink); font-weight: 500; }
/* ---------- Prozess-Journey "Von der Idee bis ins Kühlregal" -----------
   A pinned scroll-cinematic: the four-step timeline fills number-by-number,
   then the whole pinned stage cross-fades into a supermarket chilled-shelf
   scene (main.js journeyScenes). The timeline is visible by default; the
   shelf stage is revealed by scroll. On phones it falls back to a normal
   stacked block (see the @media override). ----------------------------- */
.journey {
  position: relative;
  height: 340vh;
  background: var(--paper);
  border-top: 1px solid rgba(28, 26, 23, .1);
}
.journey__pin { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.journey__stage {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  will-change: opacity, transform;
}
.journey__steps-stage { padding: clamp(80px, 12vh, 120px) var(--gutter); }
.journey__steps-stage .container--tight { width: 100%; }
/* shelf scene — hidden until the second half of the scroll */
.journey__shelf-stage { opacity: 0; }
.journey__shelf-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  will-change: transform;
}
.journey__shelf-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(58% 46% at 50% 50%, rgba(18, 12, 8, .5), transparent 76%),
    linear-gradient(to top, rgba(18, 12, 8, .82), rgba(18, 12, 8, .12) 42%, rgba(18, 12, 8, .42));
}
.journey__shelf-copy {
  position: relative;
  z-index: 2;
  text-align: center;
  color: #fff;
  padding: 0 var(--gutter);
  max-width: 820px;
}
.journey__shelf-copy .eyebrow { text-shadow: 0 1px 16px rgba(0, 0, 0, .5); }
.journey__shelf-title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 5vw, 68px);
  line-height: 1.02;
  letter-spacing: -.02em;
  color: #fff;
  margin: 14px 0 0;
  text-shadow: 0 2px 30px rgba(0, 0, 0, .5);
}
.journey__head { text-align: center; max-width: 680px; margin: 0 auto clamp(40px, 5vw, 64px); }
.journey__head .eyebrow { margin-bottom: 16px; }
.journey__title {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(30px, 4.4vw, 60px);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0 0 18px;
}
.journey__lead {
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: var(--gray);
  margin: 0 auto;
  max-width: 52ch;
}
.journey__steps { position: relative; }
/* connecting line through the centre of the number dots (12.5%→87.5% =
   the centre of the first and last of four equal columns) */
.journey__track {
  position: absolute;
  top: 31px;
  left: 12.5%;
  right: 12.5%;
  height: 3px;
  background: rgba(28, 26, 23, .13);
  border-radius: 999px;
  overflow: hidden;
}
.journey__fill {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--brand), var(--amber));
  transform: scaleX(0);
  transform-origin: left;
}
.journey__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.5vw, 36px);
}
.jstep { text-align: center; padding: 0 clamp(4px, 1vw, 14px); }
.jstep__num {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 62px;
  height: 62px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--paper);
  border: 2px solid var(--brand);
  color: var(--brand);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: .02em;
  transition: background .45s ease, color .45s ease, border-color .45s ease, transform .45s cubic-bezier(.16, .84, .3, 1);
}
/* number lights up solid as the filling line reaches it */
.jstep__num.is-active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  transform: scale(1.06);
}
.jstep__title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(19px, 1.9vw, 24px);
  letter-spacing: -.01em;
  margin: 0 0 10px;
}
.jstep__text { font-size: 15px; line-height: 1.55; color: var(--gray); margin: 0 auto; max-width: 28ch; }

/* ---------- Footer / Kontakt -------------------------------------------- */
.footer {
  position: relative;
  background: var(--ink);
  color: var(--paper);
  padding: clamp(80px, 11vw, 140px) var(--gutter) 40px;
  overflow: hidden;
}
.footer__glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(70% 60% at 80% 10%, rgba(200, 32, 30, .16), transparent 60%);
  pointer-events: none;
}
.footer__inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
.footer h2 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(40px, 7vw, 100px);
  line-height: .98;
  letter-spacing: -.02em;
  margin: 0 0 34px;
}
.footer__mail {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(22px, 3vw, 40px);
  color: var(--paper);
  text-decoration: none;
  border-bottom: 3px solid var(--brand);
  padding-bottom: 4px;
  transition: color .25s ease;
}
.footer__mail:hover { color: var(--brand); }
.footer__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-top: clamp(56px, 9vw, 100px);
  padding-top: 28px;
  border-top: 1px solid rgba(251, 247, 239, .16);
}
.footer__bar img { height: 42px; width: auto; }
.footer__links { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; font-size: 14px; opacity: .7; }
.footer__links a { color: var(--paper); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.footer__links a:hover { text-decoration: underline; }

/* ---------- Reveal-on-scroll (JS adds the initial hidden state) --------- */
/* Elements stay fully visible if JS is disabled — progressive enhancement. */
.reveal-ready[data-reveal] {
  opacity: 0;
  transition: opacity .9s cubic-bezier(.16, .84, .3, 1),
              transform .9s cubic-bezier(.16, .84, .3, 1);
  will-change: opacity, transform;
}
.reveal-ready[data-reveal="up"]    { transform: translateY(40px); }
.reveal-ready[data-reveal="left"]  { transform: translateX(-52px); }
.reveal-ready[data-reveal="right"] { transform: translateX(52px); }
.reveal-ready[data-reveal="scale"] { transform: scale(.94); }
[data-reveal].is-visible { opacity: 1 !important; transform: none !important; }

/* ---------- Responsive --------------------------------------------------- */
@media (max-width: 920px) {
  .nav__links { display: none !important; }
  .nav__toggle { display: flex; }
  .nav__right > .nav__cta { display: none; }      /* lives in the panel instead */
  .nav__right .lang { display: none; }            /* dropdown → moves into the menu */
  .nav.is-open .nav__mobile { display: flex; }

  /* language pills sit at the bottom of the open menu, not beside the logo */
  .lang-inline {
    display: flex;
    gap: 8px;
    width: 100%;
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid rgba(28, 26, 23, .1);
  }
  .lang-inline__opt {
    flex: 1;
    padding: 12px 0;
    font: 700 13px/1 var(--font-body);
    letter-spacing: .05em;
    color: var(--gray);
    background: rgba(28, 26, 23, .05);
    border: 1px solid transparent;
    border-radius: 11px;
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
  }
  .lang-inline__opt[aria-current="true"] { background: var(--brand); color: #fff; }
  .two,
  .grid3,
  .sec-head,
  .ueber__grid { grid-template-columns: 1fr !important; }

  /* journey on phones: SAME pinned scroll-cinematic as desktop (the pin +
     stage rules from above stay in force), only a compact horizontal
     timeline — small numbers + short titles, the long step copy dropped —
     so it fits the pinned viewport before morphing into the shelf scene. */
  .journey { height: 230vh; }
  .journey__steps-stage { padding: 0 var(--gutter); }
  .journey__head { margin: 0 auto clamp(26px, 8vw, 42px); }
  .journey__lead { display: none; }            /* keep the timeline area compact */
  .journey__list { gap: 8px; position: relative; }
  .journey__track { top: 19px; left: 12.5%; right: 12.5%; }
  .jstep { padding: 0 2px; }
  .jstep__num {
    width: 38px;
    height: 38px;
    font-size: 14px;
    border-width: 2px;
    margin: 0 auto 10px;
  }
  .jstep__title { font-size: clamp(11px, 3.4vw, 14px); margin: 0; }
  /* the four descriptions share one spot under the timeline; only the
     just-reached step's text fades in as you scroll through phase 1. */
  .jstep__text {
    display: block;
    position: absolute;
    top: calc(100% + 22px);
    left: 50%;
    transform: translateX(-50%);
    width: min(86vw, 430px);
    max-width: none;
    margin: 0;
    text-align: center;
    font-size: 15px;
    line-height: 1.55;
    opacity: 0;
    transition: opacity .4s ease;
    pointer-events: none;
  }
  .jstep.is-current .jstep__text { opacity: 1; }
  /* the landscape shelf in a tall portrait viewport: centre the crop so it
     shows the middle of the fridge. */
  .journey__shelf-img { object-position: 50% center; }
  .journey__shelf-title { font-size: clamp(26px, 8vw, 42px); }

  /* unsere idee: image + quote stack; the card tucks under the photo */
  .ueber__grid { gap: clamp(48px, 12vw, 72px) !important; }
  .ueber__quote {
    position: static;
    width: auto;
    margin: -28px 12px 0;
  }
  .ueber__title { margin-top: 12px; }

  /* hero: copy drops to the bottom over a near-opaque vertical wash */
  .hero { align-items: flex-end; min-height: 92vh; }
  .hero__photo { object-position: 64% top; }
  .hero__scrim {
    background: linear-gradient(to top,
      var(--paper) 16%,
      rgba(251, 247, 239, .9) 46%,
      rgba(251, 247, 239, .4) 70%,
      rgba(251, 247, 239, 0) 90%);
  }
  .hero__content { padding-bottom: 64px; }
  .hero__inner { max-width: none; }
  .eyebrow--hero { margin-bottom: 16px; letter-spacing: .2em; }
  .hero h1 { font-size: clamp(40px, 13vw, 76px); line-height: .9; letter-spacing: .01em; }
  .hero h1::after { width: 52px; height: 3px; margin-top: 16px; }

  /* showcase on phones: scroll-scrub is unreliable, so the section becomes a
     normal block; the video fills it (poster / first frame), copy on top */
  .showcase { height: auto; }
  .showcase__pin { position: static; height: auto; min-height: 90vh; }
  .showcase__media {
    position: absolute;
    inset: 0;
    transform: none;
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .showcase__media::after { display: none; }
  .showcase__video { object-fit: cover; object-position: 70% center; }
  .showcase__scrim {
    background: linear-gradient(to bottom,
      #0B0807 12%, rgba(11, 8, 7, .82) 40%, rgba(11, 8, 7, .2) 64%, transparent 82%);
  }
  .showcase__inner { align-items: flex-start; padding-top: 72px; padding-bottom: 56px; }
  .showcase__copy { max-width: none; }
  .showcase__copy h2 { font-size: clamp(26px, 7vw, 40px); margin-bottom: 12px; }
  .showcase__copy p { font-size: 15px; }

  /* produkte reel on phones: the scroll-pin slide is replaced by a native,
     thumb-driven snap carousel — no pinning, no JS transform. */
  .reel { height: auto; background: var(--paper); }
  .reel__pin {
    position: static;
    height: auto;
    display: block;
    overflow: visible;
    padding: clamp(64px, 12vw, 88px) 0 clamp(40px, 9vw, 64px);
  }
  .reel__viewport {
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .reel__viewport::-webkit-scrollbar { display: none; }
  .reel__track {
    transform: none !important;
    gap: 16px;
    padding: 4px var(--gutter) 0;
  }
  .reel__item { flex: 0 0 78vw; scroll-snap-align: center; }
  .reel__foot { display: none; }

  /* manifesto rows stack the number above the text on phones */
  .mrow {
    grid-template-columns: 1fr;
    gap: 6px;
    padding: clamp(22px, 6vw, 30px) 4px;
    align-items: start;
  }
  .mrow__num { font-size: clamp(46px, 16vw, 72px); }
  .mrow:hover { background: transparent; }

  /* nav: centre the logo, hamburger stays on the right */
  .nav__inner { position: relative; justify-content: flex-end; }
  .nav__logo { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }

  /* hero stats: a balanced, centred 3-up row (dividers would dangle → hidden) */
  .hero__stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px 10px; text-align: center; }
  .hero__stats .stat__divider { display: none; }

  /* footer: logo + links stack centred; legal links + copyright stay on one line */
  .footer__bar { flex-direction: column; align-items: center; gap: 18px; }
  .footer__links { flex-wrap: nowrap; gap: 16px; justify-content: center; font-size: 13px; }

  /* the bottom-aligned hero content reaches the bottom on phones → the scroll
     hint would overlap the stats. Hide it; touch users scroll naturally. */
  .scroll-hint { display: none; }
}

/* ---------- Legal subpages (Impressum / Datenschutz) -------------------- */
.subpage { padding: clamp(120px, 16vw, 160px) var(--gutter) clamp(56px, 8vw, 96px); }
.legal { max-width: 820px; margin: 0 auto; }
.legal__back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 14px;
  color: var(--brand);
  text-decoration: none;
  min-height: 44px;
  margin-bottom: 20px;
}
.legal__back:hover { color: var(--brand-deep); }
.legal h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(34px, 6vw, 64px);
  line-height: 1.02;
  letter-spacing: -.02em;
  margin: 0 0 10px;
}
.legal__intro { font-size: clamp(15px, 1.3vw, 18px); color: var(--gray); margin: 0 0 36px; max-width: 60ch; }
.legal h2 {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 28px);
  letter-spacing: -.01em;
  margin: 40px 0 12px;
}
.legal h3 { font-weight: 700; font-size: 16px; margin: 24px 0 6px; }
.legal p, .legal li { font-size: 15px; line-height: 1.75; color: var(--ink); }
.legal p { margin: 0 0 14px; }
.legal ul { padding-left: 1.15em; margin: 0 0 14px; }
.legal li { margin-bottom: 6px; }
.legal a { color: var(--brand); }
.legal a:hover { color: var(--brand-deep); }
.legal address { font-style: normal; line-height: 1.7; }
.legal__meta { font-size: 13px; color: var(--gray); margin-top: 10px; }
.legal__card {
  background: #fff;
  border-radius: 16px;
  padding: clamp(20px, 3vw, 32px);
  box-shadow: 0 20px 44px -30px rgba(0, 0, 0, .26);
  margin: 0 0 30px;
}
.legal__updated { margin-top: 40px; font-size: 13px; color: var(--gray); }

/* slim footer used on legal subpages */
.footer--slim { padding: clamp(40px, 6vw, 64px) var(--gutter); }
.footer--slim .footer__bar { margin-top: 0; padding-top: 0; border-top: none; }