/* ==========================================================================
   Tandour — Hero-Slider v3
   Nachbau der Referenz (Ice-Cream-Slider, designgemstudio) auf Rollos gemünzt:
   vollflächige Sortenfarbe · riesiges Outline-Wort · Produkt mittig ·
   schwebende Zutaten · Textblock links · Vorschau rechts · Punkte unten.
   Übergang: Farbe blendet über ein helles Aufblitzen, das neue Rollo fährt
   von unten hoch, Wort und Text kommen versetzt nach.
   ========================================================================== */

@font-face {
  font-family: "Montserrat";
  src: url("fonts/montserrat-wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Fraunces";
  src: url("fonts/fraunces-italic-wght.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* Farbwechsel: zwei Grundflächen. Die obere („Blende") bekommt die neue Farbe und blendet per
   Deckkraft ein — nur eine Compositor-Animation, kein Neuzeichnen des Verlaufs pro Bild. */
.hero {
  --hero-farbe: #2F7A45;
  --hero-tief: #143D22;
  --hero-tinte: #FFF6EC;
  --hero-links: 6.5vw;
  --t-folie: 900ms;
  --ease-hero: cubic-bezier(.22, .68, .24, 1);
  --ease-weich: cubic-bezier(.4, 0, .2, 1);   /* symmetrisch: nichts startet oder endet abrupt */

  position: relative;
  height: 100svh;
  min-height: 640px;
  overflow: hidden;
  isolation: isolate;
  color: var(--hero-tinte);
  font-family: var(--schrift-text);
}

/* 1 ── Grundfläche + Aufblitzen ------------------------------------------ */
.hero__grund {
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    radial-gradient(120% 96% at 38% 44%,
      color-mix(in srgb, var(--hero-farbe) 88%, #fff) 0%,
      var(--hero-farbe) 46%,
      color-mix(in srgb, var(--hero-farbe) 72%, var(--hero-tief)) 100%);
}
.hero__grund--blende {
  opacity: 0;
  transition: opacity var(--t-folie) var(--ease-weich);
}
.hero__grund--blende[data-an="ja"] { opacity: 1; }
.hero__grund--blende[data-sofort="ja"] { transition: none; }

.hero__blitz {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: #FFF8F0;
  opacity: 0;
}
.hero[data-wechsel="ja"] .hero__blitz { animation: hero-blitz var(--t-folie) var(--ease-hero); }
@keyframes hero-blitz {
  0%   { opacity: 0; }
  30%  { opacity: .14; }
  100% { opacity: 0; }
}

.hero__korn {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .38;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.2'/%3E%3C/svg%3E");
}

/* 2 ── Kennung ---------------------------------------------------------- */
.hero__kennung {
  position: absolute;
  z-index: 6;
  bottom: 3.2%;
  left: var(--hero-links);
  margin: 0;
  font-family: "Montserrat", var(--schrift-text);
  font-weight: 500;
  font-size: .58rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  opacity: .7;
}

/* 3 ── Riesiges Outline-Wort --------------------------------------------- */
.hero__woerter {
  position: absolute;
  inset: var(--wort-oben, 11%) 0 auto 0;   /* Wort steht hinter dem Rollo, aber über den Zutaten */
  z-index: 1;
  pointer-events: none;
  display: grid;
  place-items: center;
}
.hero__wort {
  grid-area: 1 / 1;
  margin: 0;
  font-family: var(--schrift-display);
  font-size: clamp(3.4rem, var(--wortgroesse, 15.4vw), 15.5rem);
  line-height: .86;
  letter-spacing: .012em;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: clamp(1.2px, .18vw, 2.8px) color-mix(in srgb, var(--hero-tinte) 86%, transparent);
  opacity: 0;
  transform: translate3d(0, 2%, 0) scale(1.02);
  transition: opacity var(--t-folie) var(--ease-weich), transform var(--t-folie) var(--ease-weich);
}
.folie3[data-zustand="aktiv"] .hero__wort {
  opacity: .92;
  transform: translate3d(0, 0, 0) scale(1);
}

/* 4 ── Folien: Produkt, Zutaten, Text ------------------------------------ */
/* Folien werden nicht mehr über visibility geschaltet — nur über die Deckkraft ihrer Teile.
   So hängt keine Einblendung an einem Sichtbarkeitswechsel (Safari), und nichts ploppt.
   Nicht aktive Folien sind per JS inert + aria-hidden. */
.folie3 {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.folie3[data-zustand="aktiv"] { pointer-events: auto; }
/* Nicht aktive Folien: alle Teile unsichtbar — schlägt Einzelregeln wie .hero__zeile { opacity: .8 }
   und .hero__satz { opacity: .88 }, die sonst durchscheinen würden. */
.folie3:not([data-zustand="aktiv"]) .hero__wort,
.folie3:not([data-zustand="aktiv"]) .hero__produkt,
.folie3:not([data-zustand="aktiv"]) .hero__text > *,
.folie3:not([data-zustand="aktiv"]) .hero__zutat { opacity: 0; }

/* Einstieg: bis der Hero bereit ist (Schriften geladen), stehen die Teile der Startfolie unsichtbar
   in ihrer Ausgangslage — danach blenden sie wie bei einem Folienwechsel ein. */
html[data-js="ja"] .hero:not([data-bereit="ja"]) .folie3 .hero__wort { opacity: 0 !important; transform: translate3d(0, 2%, 0) scale(1.02) !important; transition: none !important; }
html[data-js="ja"] .hero:not([data-bereit="ja"]) .folie3 .hero__produkt { opacity: 0 !important; transform: translate3d(-50%, 6%, 0) scale(.97) !important; transition: none !important; }
html[data-js="ja"] .hero:not([data-bereit="ja"]) .folie3 .hero__text > * { opacity: 0 !important; transform: translate3d(0, 10px, 0) !important; transition: none !important; }
html[data-js="ja"] .hero:not([data-bereit="ja"]) .folie3 .hero__zutat { opacity: 0 !important; transition: none !important; }

/* Vorab komponieren: die Ebene entsteht nicht erst beim Start der Animation (Safari-Ploppen). */
.hero__wort,
.hero__produkt,
.hero__text > * { will-change: opacity, transform; }

/* 4.1 Produkt */
.hero__produkt {
  position: absolute;
  z-index: 2;            /* deckt Wort und Zutaten ab */
  left: 50%;
  bottom: -18%;
  height: 100%;
  width: auto;
  transform: translate3d(-50%, 6%, 0) scale(.97);
  opacity: 0;
  filter: drop-shadow(0 42px 60px rgba(60, 12, 4, .34));
  transition: opacity var(--t-folie) var(--ease-weich), transform var(--t-folie) var(--ease-weich);
}
.folie3[data-zustand="aktiv"] .hero__produkt {
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1);
}
.folie3[data-zustand="geht"] .hero__produkt {
  opacity: 0;
  transform: translate3d(-50%, 3%, 0) scale(.985);
  transition-duration: 640ms, var(--t-folie);
  transition-timing-function: var(--ease-weich);
}

/* Die abfahrende Folie blendet weich aus, leicht nach oben, und ist nach 700 ms weg. */
.folie3[data-zustand="geht"] .hero__wort {
  opacity: 0;
  transform: translate3d(0, -1.5%, 0) scale(1.01);
  transition-duration: 640ms, var(--t-folie);
  transition-delay: 0ms;
  transition-timing-function: var(--ease-weich);
}
.folie3[data-zustand="geht"] .hero__text > * {
  opacity: 0;
  transform: translate3d(0, -6px, 0);
  transition-duration: 520ms;
  transition-delay: 0ms;
  transition-timing-function: var(--ease-weich);
}
.folie3[data-zustand="geht"] .hero__zutat {
  opacity: 0;
  transition-duration: 520ms;
  transition-delay: 0ms;
  transition-timing-function: var(--ease-weich);
  animation: none;
}

/* 4.2 Schwebende Zutaten — wie in der Vorlage über die ganze Bühne gestreut.
   Äußere Hülle macht Ein- und Austritt, das Bild darin schwebt dauerhaft. */
.hero__zutat {
  position: absolute;
  z-index: 0;
  left: var(--x);
  top: var(--y);
  width: var(--gr, 6.5%);
  opacity: 0;
  transform: translate3d(var(--ex, 0), var(--ey, 0), 0) scale(.93);
  transition: opacity 700ms var(--ease-weich), transform 900ms var(--ease-weich);
}
.folie3[data-zustand="aktiv"] .hero__zutat {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition-delay: calc(var(--reihe, 0) * 40ms);
}
.folie3[data-zustand="geht"] .hero__zutat {
  opacity: 0;
  transform: translate3d(calc(var(--ex, 0px) * 1.6), calc(var(--ey, 0px) * 1.6), 0) scale(.96);
  transition-duration: 300ms;
  transition-delay: 0ms;
}
.hero__zutat img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 18px 26px rgba(60, 12, 4, .3));
  animation: hero-schweben var(--dauer, 9s) ease-in-out var(--verzoegerung, 0s) infinite alternate;
  animation-play-state: paused;
}
.folie3[data-zustand="aktiv"] .hero__zutat img { animation-play-state: running; }
.hero__zutat[data-tiefe="fern"] img {
  filter: blur(1.6px) drop-shadow(0 16px 24px rgba(60, 12, 4, .22));
  opacity: .88;
}
@keyframes hero-schweben {
  from { transform: translate3d(0, -3%, 0) rotate(var(--dreh, 0deg)); }
  to   { transform: translate3d(0, 3.4%, 0) rotate(calc(var(--dreh, 0deg) + 8deg)); }
}

/* 4.3 Textblock links */
.hero__text {
  position: absolute;
  left: var(--hero-links);
  top: 63%;
  z-index: 5;
  width: min(30rem, 34vw);
  transform: translateY(-50%);
}
.hero__text > * {
  opacity: 0;
  transform: translate3d(0, 10px, 0);
  transition: opacity 760ms var(--ease-weich), transform 900ms var(--ease-weich);
}
.folie3[data-zustand="aktiv"] .hero__text > * { opacity: 1; transform: none; }
/* leicht gestaffelt, aber parallel zur Farb- und Wortblende */
.folie3[data-zustand="aktiv"] .hero__text > :nth-child(1) { transition-delay: 60ms; }
.folie3[data-zustand="aktiv"] .hero__text > :nth-child(2) { transition-delay: 120ms; }
.folie3[data-zustand="aktiv"] .hero__text > :nth-child(3) { transition-delay: 180ms; }
.folie3[data-zustand="aktiv"] .hero__text > :nth-child(4) { transition-delay: 240ms; }

.hero__sorte {
  margin: 0 0 .12em;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(2rem, 3.7vw, 3.5rem);
  line-height: .98;
  letter-spacing: -.018em;
}
.hero__sorte b {
  display: block;
  margin-left: -.03em;
  font-weight: 600;
  font-style: italic;
}
.hero__zeile {
  margin: 0 0 1.15em;
  font-family: "Montserrat", var(--schrift-text);
  font-weight: 600;
  font-size: .66rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .8;
}
.hero__satz {
  margin: 0 0 1.7em;
  max-width: 25em;
  font-size: clamp(.92rem, 1.05vw, 1.02rem);
  line-height: 1.68;
  opacity: .88;
}
.hero__pille {
  display: inline-flex;
  align-items: center;
  gap: .7em;
  padding: .82em 1.6em;
  border: 1px solid color-mix(in srgb, var(--hero-tinte) 62%, transparent);
  border-radius: 999px;
  font-family: "Montserrat", var(--schrift-text);
  font-weight: 600;
  font-size: .68rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 320ms var(--ease-hero), border-color 320ms var(--ease-hero), transform 320ms var(--ease-hero);
}
.hero__pille:hover {
  background: color-mix(in srgb, var(--hero-tinte) 16%, transparent);
  border-color: var(--hero-tinte);
  transform: translateY(-2px);
}
.hero__pille::after { content: "→"; font-size: .95em; }

/* 5 ── Sortenspalte rechts: alle Rollos auf einen Blick --------------------- */
.hero__auswahl {
  position: absolute;
  right: calc(var(--hero-links) - 1rem);
  top: 50%;
  z-index: 6;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.hero__wahl {
  display: flex;
  align-items: center;
  gap: .85rem;
  padding: .45rem 1.1rem .45rem .7rem;
  border: 1px solid transparent;
  border-radius: 1.6rem;
  background: transparent;
  color: inherit;
  cursor: pointer;
  transition: border-color 320ms var(--ease-hero), background 320ms var(--ease-hero), transform 320ms var(--ease-hero);
}
.hero__wahl img {
  width: 1.7rem;
  height: 5.6rem;
  object-fit: contain;
  object-position: 50% 50%;
  opacity: .72;
  filter: drop-shadow(0 6px 10px rgba(60, 12, 4, .3));
  transition: opacity 320ms var(--ease-hero), transform 420ms var(--ease-hero);
}
.hero__wahl span {
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: .92rem;
  letter-spacing: -.01em;
  white-space: nowrap;
  opacity: .62;
  transition: opacity 320ms var(--ease-hero);
}
.hero__wahl:hover img,
.hero__wahl:focus-visible img { opacity: .85; transform: translateY(-2px); }
.hero__wahl:hover span { opacity: .9; }
.hero__wahl[aria-current="true"] {
  border-color: color-mix(in srgb, var(--hero-tinte) 38%, transparent);
  background: color-mix(in srgb, #2A0A05 12%, transparent);
}
.hero__wahl[aria-current="true"] img { opacity: 1; transform: scale(1.06); }
.hero__wahl[aria-current="true"] span { opacity: 1; }

/* 6 ── Punkte + Hinweis --------------------------------------------------- */
.hero__punkte {
  position: absolute;
  left: var(--hero-links);
  bottom: 8.6%;
  z-index: 6;
  display: flex;
  gap: .8rem;
}
.hero__punkt {
  width: 2.4rem;
  height: 2px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: color-mix(in srgb, var(--hero-tinte) 34%, transparent);
  cursor: pointer;
  transition: background 320ms var(--ease-hero), transform 320ms var(--ease-hero);
}
.hero__punkt[aria-current="true"] { background: var(--hero-tinte); transform: scaleY(2); }

.hero__hinweis {
  position: absolute;
  right: calc(var(--hero-links) + 4.4rem);
  bottom: 4.4%;
  z-index: 6;
  margin: 0;
  font-family: "Montserrat", var(--schrift-text);
  font-weight: 500;
  font-size: .58rem;
  letter-spacing: .26em;
  text-transform: uppercase;
  opacity: .6;
}

.hero__pfeil {
  position: absolute;
  right: var(--hero-links);
  bottom: 3.2%;
  z-index: 6;
  width: 3.2rem;
  height: 3.2rem;
  border: 1px solid color-mix(in srgb, var(--hero-tinte) 46%, transparent);
  border-radius: 50%;
  background: transparent;
  color: inherit;
  cursor: pointer;
  font-size: .95rem;
  transition: background 320ms var(--ease-hero), transform 320ms var(--ease-hero);
}
.hero__pfeil:hover { background: color-mix(in srgb, var(--hero-tinte) 16%, transparent); transform: translateY(-2px); }

/* 7 ── Responsive --------------------------------------------------------- */
@media (max-width: 1100px) {
  .hero__text { width: min(24rem, 42vw); }
  .hero__produkt { left: 62%; height: 66%; }
  .hero__auswahl { display: none; }
}

@media (max-width: 760px) {
  /* Handy wie am Rechner (22.09.2026): Das Rollo steht unten auf dem roten Balken, wird von der Kante
     angeschnitten und füllt mehr als die Hälfte des Bildschirms. Darüber nur ein kompakter Block:
     Preiszeile, Name in EINER Zeile, darunter „Zur Karte" links und Punkte + Pfeil rechts.
     Das Sortenwort liegt hinter dem oberen Teil des Rollos. Alle Lagen hängen am Ende dieses Blocks
     (rem-Werte), nicht an der Bildschirmhöhe — so bleibt der Abstand auf jedem Handy gleich. */
  .hero {
    --hero-links: 7vw;
    --text-oben-m: calc(5.6rem + env(safe-area-inset-top, 0px));     /* unter der Kopfzeile (78–90 px) */
    --sorte-m: clamp(1.6rem, 7.4vw, 2.2rem);                          /* „Rollo Arabic" */
    --pille-oben-m: calc(var(--text-oben-m) + 1.55rem + var(--sorte-m) * 1.1 + .8rem);
    --block-ende-m: calc(var(--pille-oben-m) + 2.47rem);
    --rollo-oben-m: calc(var(--block-ende-m) + 3rem);
    min-height: 600px;
  }
  /* Alle Wörter gleich hoch ansetzen (der alte Handy-Versatz für Dul Kebab schob es hier ganz hinter das Rollo) */
  .hero__woerter { inset: calc(var(--block-ende-m) + .6rem) 0 auto 0; }
  .hero__wort { font-size: clamp(3rem, 20vw, 6.4rem); -webkit-text-stroke-width: 1.2px; }
  .hero__produkt { left: 50%; top: auto; bottom: -11%; height: calc(111% - var(--rollo-oben-m)); }

  .hero__text { top: var(--text-oben-m); bottom: auto; width: calc(100% - 2 * var(--hero-links)); transform: none; }
  .hero__zeile { margin-bottom: .7em; }
  /* Name in einer Zeile mit fester Höhe: die Sortenschriften haben unterschiedliche Ober-/Unterlängen und
     würden die Zeile sonst je Folie verschieden hoch machen — „Zur Karte" säße dann nicht auf einer Linie mit dem Pfeil. */
  .hero__sorte { font-size: var(--sorte-m); line-height: 1.1; height: calc(var(--sorte-m) * 1.1); margin: 0; white-space: nowrap; }
  .hero__sorte b { display: inline; margin-left: .16em; }
  .hero__sorte b .wortmarke { display: inline-block; height: 1em; vertical-align: -.1em; }
  .hero__pille { margin-top: .8rem; padding: .7em 1.3em; }
  .hero__satz { display: none; }
  .hero__hinweis { display: none; }
  .hero__kennung { display: none; }

  /* Bedienzeile: Pfeil rechts, Punkte davor — beide mittig auf Höhe von „Zur Karte" (Pille 2,15 rem hoch) */
  .hero__pfeil { width: 2.8rem; height: 2.8rem; right: var(--hero-links); top: calc(var(--pille-oben-m) - .33rem); bottom: auto; }
  .hero__punkte { left: auto; right: calc(var(--hero-links) + 3.6rem); top: calc(var(--pille-oben-m) + 1.07rem - 12px); bottom: auto; gap: .45rem; }
  .hero__punkt { width: 1.15rem; height: 24px; padding: 11px 0; background-clip: content-box; }   /* Strich 2 px, Tippfläche 24 px */
  .hero__punkt[aria-current="true"] { padding: 10px 0; background-clip: content-box; transform: none; }   /* aktiv: 4 px */

  .hero__zutat[data-mobil="aus"] { display: none; }
  /* die drei verbleibenden Zutaten: an den Rändern neben dem Rollo */
  .hero__zutat { left: var(--mx2, var(--mx, var(--x))); top: var(--my2, var(--my, var(--y))); width: var(--mgr, var(--gr)); }
  .folie3 > .hero__zutat:nth-child(4)  { --mx2: -2%; --my2: 52%; }
  .folie3 > .hero__zutat:nth-child(7)  { --mx2: 84%; --my2: 46%; }
  .folie3 > .hero__zutat:nth-child(10) { --mx2: 84%; --my2: 74%; }
}

/* 8 ── Motion sparsam ----------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .hero__produkt,
  .hero__wort,
  .hero__zutat,
  .hero__text > * { transition-duration: 1ms !important; }
  .folie3[data-zustand="aktiv"] .hero__zutat { animation: none; }
  .hero[data-wechsel="ja"] .hero__blitz { animation: none; }
}