@import url("tokens.css");
@import url("fonts.css");

/* ====================== BASIS ====================== */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.lenis-on{scroll-behavior:auto}  /* Lenis uebernimmt, sonst kollidieren beide */
body{
  margin:0;background:var(--field);color:var(--ink);
  font-family:var(--font-body);font-size:var(--step-body);line-height:1.62;
  font-weight:400;-webkit-font-smoothing:antialiased;overflow-x:hidden;
}
img,video,canvas{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{font-family:var(--font-display);font-weight:700;margin:0;text-wrap:balance}
h1{font-size:var(--step-display);line-height:1.02;letter-spacing:-.025em}
h2{font-size:var(--step-h2);line-height:1.08;letter-spacing:-.015em;font-weight:600}
h3{font-size:var(--step-h3);line-height:1.25;font-weight:600}
p{margin:0 0 1.1em;max-width:62ch}
:focus-visible{outline:3px solid var(--action);outline-offset:3px;border-radius:4px}

.wrap{width:100%;max-width:var(--max-width);margin-inline:auto;padding-inline:var(--space-gutter)}
.section{padding-block:var(--space-section)}
.label{
  font-size:var(--step-label);text-transform:uppercase;letter-spacing:var(--track-label);
  font-weight:600;color:var(--ink-muted);margin:0 0 1rem;display:block;
}
.lead{font-size:clamp(1.1rem,1.7vw,1.3rem);line-height:1.5;color:var(--ink-muted)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:1rem;top:1rem;z-index:100;background:var(--action);color:var(--action-ink);
  padding:.7rem 1.1rem;border-radius:8px;font-weight:600}

/* Grain: eine Schicht über der ganzen Seite, vereint Foto, Video und Fläche */
body::after{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:60;opacity:.055;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ====================== KNÖPFE ====================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:52px;padding:.85rem 1.6rem;border-radius:999px;border:1.5px solid transparent;
  font-family:var(--font-body);font-size:1rem;font-weight:600;text-decoration:none;cursor:pointer;
  transition:transform var(--dur-press) var(--ease-out),
             background-color var(--dur-ui) var(--ease-out),
             border-color var(--dur-ui) var(--ease-out);
}
.btn:active{transform:scale(.97)}
.btn--primary{background:var(--action);color:var(--action-ink)}
.btn--primary:hover{background:#eb7c96}
.btn--ghost{border-color:var(--line);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink)}
.on-dark .btn--ghost{border-color:var(--line-invert);color:var(--ink-invert)}
.on-dark .btn--ghost:hover{border-color:var(--ink-invert)}
/* Der pinke Knopf traegt IMMER schokobraune Schrift. Ohne diese Zeile
   ueberschreibt .on-dark a die Farbe auf Creme und der Kontrast faellt
   von 5,90 auf 2,10 — genau der Fehler, den das Farbsystem vermeiden soll. */
.on-dark .btn--primary,.issue .btn--primary{color:var(--action-ink)}

.txtlink{
  text-decoration:none;font-weight:600;background-image:linear-gradient(currentColor,currentColor);
  background-size:0% 1.5px;background-repeat:no-repeat;background-position:0 100%;
  transition:background-size var(--dur-ui) var(--ease-out);padding-bottom:2px;
}
.txtlink:hover{background-size:100% 1.5px}

/* ====================== HEADER ====================== */
.hdr{
  position:fixed;inset:0 0 auto;z-index:50;
  transition:background-color var(--dur-ui) var(--ease-out),
             box-shadow var(--dur-ui) var(--ease-out);
}
.hdr.is-stuck{background:var(--field);box-shadow:0 1px 0 var(--line)}
.hdr__in{display:flex;align-items:center;gap:1.5rem;min-height:74px}
.hdr__logo{display:flex;align-items:center;margin-right:auto;min-height:44px}  /* Tap-Target */
.hdr__logo img{width:132px;height:auto}
.nav{display:flex;align-items:center;gap:1.6rem}
.nav a{text-decoration:none;font-size:.95rem;font-weight:500;
  display:inline-flex;align-items:center;min-height:44px}   /* Tap-Target */
.nav a[aria-current="page"]{font-weight:700}
.burger{display:none;width:48px;height:48px;border:0;background:none;cursor:pointer;
  align-items:center;justify-content:center;border-radius:10px}
.burger svg{width:24px;height:24px}

@media (max-width:860px){
  .nav{
    position:fixed;inset:74px 0 auto;background:var(--field);flex-direction:column;
    align-items:flex-start;gap:0;padding:.5rem var(--space-gutter) 1.5rem;
    box-shadow:0 12px 24px rgba(75,32,23,.08);
    transform:translateY(-8px);opacity:0;visibility:hidden;
    transition:transform var(--dur-drawer) var(--ease-drawer),
               opacity var(--dur-drawer) var(--ease-drawer),visibility var(--dur-drawer);
  }
  .nav.is-open{transform:translateY(0);opacity:1;visibility:visible}
  .nav a{width:100%;padding:.85rem 0;border-bottom:1px solid var(--line);font-size:1.05rem}
  .nav .btn{margin-top:1rem;width:100%}
  .burger{display:inline-flex}
  .hdr__logo img{width:112px}
}

/* ====================== HERO ====================== */
.hero{position:relative;min-height:min(92svh,860px);display:flex;align-items:center}
.hero__plate{
  position:absolute;inset:0;z-index:-1;overflow:hidden;
}
.hero__plate picture{display:contents}
.hero__plate img{
  width:100%;height:100%;object-fit:cover;object-position:18% center;
  animation:plate 1200ms var(--ease-out) both;
}
@keyframes plate{from{transform:scale(1.03)}to{transform:scale(1)}}
.hero__in{width:100%;padding-block:8rem 4rem}
.hero__copy{margin-left:auto;width:min(30rem,56%)}
.hero__badge{
  display:inline-block;font-size:var(--step-label);text-transform:uppercase;
  letter-spacing:var(--track-label);font-weight:600;color:var(--ink-muted);
  border:1px solid var(--line);border-radius:999px;padding:.4rem .9rem;margin-bottom:1.4rem;
}
.hero h1{font-size:clamp(2.2rem,4.1vw,4.25rem);margin-bottom:1rem}
.hero__sub{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--ink-muted);margin-bottom:2rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.75rem}

/* Hero-Eintritt: bewusst in CSS und nicht in GSAP. Ein per JS gesetztes
   opacity:0 laesst den Hero leer, sobald das Skript stockt oder ausfaellt.
   Die Platte selbst animiert nicht mit, sie ist das LCP-Element. */
@keyframes heroIn{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.hero__badge,.hero h1,.hero__sub,.hero__cta>*{animation:heroIn var(--dur-section) var(--ease-out) both}
.hero__badge{animation-delay:.10s}
.hero h1{animation-delay:.16s}
.hero__sub{animation-delay:.22s}
.hero__cta>*:nth-child(1){animation-delay:.28s}
.hero__cta>*:nth-child(2){animation-delay:.34s}

@media (max-width:860px){
  /* Header traegt am Handy immer Creme: die pinke Wortmarke waere sonst
     direkt auf der violetten Kugel kaum lesbar. */
  .hdr{background:var(--field);box-shadow:0 1px 0 var(--line)}
  .hero{min-height:0;display:block;padding-top:74px}
  /* Quadratischer Anschnitt: laesst die Kugel oben stehen und haelt
     den primaeren CTA in Reichweite. max-height mit aspect-ratio zu
     kombinieren schneidet das Bild quer statt hoch. */
  .hero__plate{position:relative;inset:auto;aspect-ratio:1/.74}
  .hero__plate img{object-position:center top}
  .hero__in{padding-block:1.25rem 0}
  .hero__copy{width:100%;margin-left:0}
}

/* ====================== TRUST-STRIP ====================== */
.trust{border-block:1px solid var(--line)}
.trust ul{
  list-style:none;margin:0;padding:1.4rem 0;display:grid;gap:.9rem 2rem;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.trust li{display:flex;align-items:center;gap:.6rem;font-size:.95rem;color:var(--ink-muted)}
.trust svg{width:18px;height:18px;flex:none;color:var(--action)}

/* ====================== BEWEIS ====================== */
.proof__grid{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:2.5rem}
.clip{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--field-deep)}
.clip video{width:100%;aspect-ratio:9/16;object-fit:cover}
.clip figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2.5rem 1rem .9rem;
  font-size:.85rem;color:var(--ink-invert);
  background:linear-gradient(transparent,rgba(43,18,13,.82));
}
.clip__play{
  position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  border:0;background:rgba(75,32,23,.35);cursor:pointer;color:var(--ink-invert);
}
.clip__play svg{width:56px;height:56px}

/* ====================== AUSGABE / UBE ====================== */
.issue{background:var(--guest-ube);color:var(--ink-invert);position:relative;overflow:hidden}
.issue .label,.issue .lead{color:var(--ink-invert)}       /* voll: 7,79 */
.issue__grid{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.issue__grid{grid-template-columns:1.05fr .95fr}}
.issue__no{
  font-family:var(--font-display);font-size:var(--step-issue);font-weight:700;line-height:.8;
  letter-spacing:-.04em;color:rgba(254,239,236,.16);margin-bottom:.4rem;
}
.spec{list-style:none;margin:2rem 0 0;padding:1.25rem 0 0;border-top:1px solid var(--line-invert)}
.spec li{display:flex;justify-content:space-between;gap:1.5rem;padding:.5rem 0;font-size:.95rem}
.spec dt,.spec b{font-weight:600}
.spec span:first-child{color:rgba(254,239,236,.78)}  /* .60 lag auf dem Ube-Feld bei 3,95 */
.turntable{position:relative;border-radius:var(--radius);overflow:hidden;background:rgba(0,0,0,.12)}
.turntable img,.turntable canvas{width:100%;aspect-ratio:1/1;object-fit:cover}

/* ====================== STORY ====================== */
.story__grid{display:grid;gap:clamp(2rem,5vw,4rem);grid-template-columns:1fr;align-items:center}
@media (min-width:900px){.story__grid{grid-template-columns:.95fr 1.05fr}}
.story figure{margin:0}
.story img{border-radius:var(--radius)}
.story figcaption{font-size:.85rem;color:var(--ink-muted);margin-top:.7rem}

/* ====================== SORTEN ====================== */
.flavours{display:grid;gap:1.25rem;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));margin-top:2.5rem}
.flavour{
  border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem 1.5rem 1.4rem;
  background:var(--field);transition:transform var(--dur-ui) var(--ease-out),
             box-shadow var(--dur-ui) var(--ease-out),border-color var(--dur-ui) var(--ease-out);
}
.flavour:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(75,32,23,.09);border-color:rgba(75,32,23,.24)}
.flavour__no{font-family:var(--font-display);font-size:.8rem;font-weight:700;letter-spacing:var(--track-label);
  text-transform:uppercase;color:var(--ink-muted);display:block;margin-bottom:.5rem}
.flavour__dot{width:14px;height:14px;border-radius:50%;display:inline-block;margin-right:.5rem;vertical-align:-1px}
.flavour p{font-size:.98rem;color:var(--ink-muted);margin:.6rem 0 0}

/* ====================== STANDORT ====================== */
.where__grid{display:grid;gap:2rem;grid-template-columns:1fr}
@media (min-width:820px){.where__grid{grid-template-columns:1fr 1fr}}
.slot{border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem}
.slot h3{margin-bottom:.35rem}
.slot p{margin:0;color:var(--ink-muted);font-size:.97rem}
.dates{list-style:none;margin:1rem 0 0;padding:0}
.dates li{display:flex;gap:1rem;padding:.7rem 0;border-top:1px solid var(--line);font-size:.97rem}
.dates time{font-weight:600;flex:none;min-width:7.5rem}

/* ====================== DUNKLES SCHLUSSFELD ====================== */
.on-dark{background:var(--field-deep);color:var(--ink-invert)}
.on-dark .label,.on-dark .lead{color:rgba(254,239,236,.7)}
.on-dark a{color:var(--ink-invert)}
.cta-final{text-align:left}
.cta-final .hero__cta{margin-top:2rem}

/* ====================== FORMULAR ====================== */
.form{display:grid;gap:1.1rem;grid-template-columns:1fr;max-width:46rem;margin-top:2.5rem}
@media (min-width:700px){.form{grid-template-columns:1fr 1fr}.form .full{grid-column:1/-1}}
.field label{display:block;font-size:.88rem;font-weight:600;margin-bottom:.35rem}
.field input,.field select,.field textarea{
  width:100%;min-height:50px;padding:.7rem .9rem;border:1px solid var(--line);border-radius:10px;
  background:var(--field);color:var(--ink);font:inherit;font-size:1rem;
}
.field textarea{min-height:130px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--action);outline-offset:1px;border-color:transparent}
.hp{position:absolute;left:-9999px}
.form__note{font-size:.85rem;color:var(--ink-muted);grid-column:1/-1;margin:0}

/* ====================== FAQ ====================== */
.faq{margin-top:2.5rem;max-width:52rem}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{
  cursor:pointer;list-style:none;padding:1.15rem 2.5rem 1.15rem 0;position:relative;
  font-family:var(--font-display);font-weight:600;font-size:1.08rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{
  content:"";position:absolute;right:.4rem;top:50%;width:11px;height:11px;
  border-right:2px solid var(--ink-muted);border-bottom:2px solid var(--ink-muted);
  transform:translateY(-70%) rotate(45deg);transition:transform var(--dur-ui) var(--ease-out);
}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq .faq__a{padding:0 0 1.2rem;color:var(--ink-muted)}
.faq .faq__a p{margin:0}

/* ====================== ANTWORTBLOCK (GEO) ====================== */
.answer{
  border-left:3px solid var(--action);padding:.2rem 0 .2rem 1.25rem;margin:0 0 2rem;
  max-width:62ch;font-size:1.08rem;
}
.answer p:last-child{margin-bottom:0}

/* ====================== B2B ====================== */
.b2b{border:1px dashed var(--line);border-radius:var(--radius);padding:clamp(1.5rem,4vw,2.5rem)}

/* ====================== FOOTER ====================== */
.ft{background:var(--field-deep);color:var(--ink-invert);padding-block:clamp(3rem,6vw,4.5rem) 2rem}
.ft__grid{display:grid;gap:2rem;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.ft img{width:124px}
.ft h4{font-family:var(--font-display);font-size:.78rem;text-transform:uppercase;
  letter-spacing:var(--track-label);margin:0 0 .9rem;color:rgba(254,239,236,.6);font-weight:600}
.ft ul{list-style:none;margin:0;padding:0}
.ft li{font-size:.95rem}
/* Tap-Target: Footer-Links brauchen 44 px Hoehe, 20 px reichen am Handy nicht */
.ft li a{display:inline-flex;align-items:center;min-height:44px;text-decoration:none}
.ft a:hover{text-decoration:underline;text-underline-offset:3px}
.ft__base{
  margin-top:2.75rem;padding-top:.6rem;border-top:1px solid var(--line-invert);
  display:flex;flex-wrap:wrap;align-items:center;gap:0 1.5rem;
  font-size:.85rem;color:rgba(254,239,236,.62);
}
.ft__base a{display:inline-flex;align-items:center;min-height:44px}
.ft__base>span{display:inline-flex;align-items:center;min-height:44px}
.ft__credit{margin-left:auto}

/* ====================== EINTRITTE ====================== */
.reveal{opacity:1;transform:none}
.js-anim .reveal{
  opacity:0;transform:translateY(28px);
  transition:opacity var(--dur-section) var(--ease-out),transform var(--dur-section) var(--ease-out);
}
.js-anim .reveal.is-in{opacity:1;transform:none}

/* ====================== 404 ====================== */
.nf{min-height:80svh;display:grid;place-items:center;text-align:center}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .hero__plate img{animation:none}
  .hero__badge,.hero h1,.hero__sub,.hero__cta>*{animation:none;opacity:1;transform:none}
  .js-anim .reveal{opacity:1;transform:none;transition:none}
}


/* ==================================================================
   VERSPIELTE SCHICHT (Nachtrag 19.09.)
   Muster von 21st.dev adaptiert, nicht importiert: Marquee, Spotlight-
   Karten mit Tilt, Wave-Divider, Sticker-Badges. Der Divider ist ein
   Drip, weil der Truck selbst einen traegt.
   ================================================================== */

/* ---------- Marquee ---------- */
.marquee{
  background:var(--field-deep);color:var(--ink-invert);overflow:hidden;
  padding-block:.85rem;display:flex;user-select:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee__track{display:flex;flex:none;gap:0;animation:slide 34s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__group{display:flex;align-items:center;gap:2.25rem;padding-right:2.25rem;flex:none}
.marquee__group span{
  font-family:var(--font-display);font-weight:600;font-size:1.05rem;
  letter-spacing:.01em;white-space:nowrap;
}
.marquee__dot{width:9px;height:9px;border-radius:50%;flex:none}
@keyframes slide{to{transform:translateX(-50%)}}

/* ---------- Melt-Kante ----------
   Physik: was oben liegt, laeuft nach unten. Deshalb sitzt die Kante IM
   unteren Abschnitt, ganz oben, und traegt die Farbe des Abschnitts
   DARUEBER. So haengen echte Tropfen herein statt Blasen aufzusteigen. */
.melts{position:relative}
.melt{
  position:absolute;top:-1px;left:0;right:0;z-index:1;pointer-events:none;line-height:0;
  height:clamp(42px,6vw,86px);
}
.melt svg{display:block;width:100%;height:100%}
.melt--wall{color:var(--wall);transition:color 520ms var(--ease-in-out)}
.melt--field{color:var(--field)}
.melt--deep{color:var(--field-deep)}
.melt--action{color:var(--action)}
.melts>*:not(.melt){position:relative;z-index:2}

/* ---------- Sticker ---------- */
.sticker{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--action);color:var(--action-ink);
  font-family:var(--font-display);font-weight:700;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.09em;
  padding:.45rem .85rem;border-radius:999px;transform:rotate(-4deg);
}
.sticker--ghost{background:transparent;border:1.5px dashed currentColor;color:inherit}

/* ---------- Sortenwand ---------- */
.wall{
  background:var(--wall);color:var(--wall-ink);
  transition:background-color 520ms var(--ease-in-out),color 520ms var(--ease-in-out);
  padding-block:clamp(3rem,7vw,5.5rem) clamp(2rem,4vw,3rem);overflow:hidden;
}
/* Keine Deckungs-Tricks auf den Sortenfeldern: bei Erdbeere, Blau und Pistazie
   faellt gedaempfter Text durch den Kontrast. Hierarchie macht die Groesse. */
.wall .label{color:currentColor}
.wall__in{display:grid;gap:clamp(1.5rem,4vw,3.5rem);grid-template-columns:1fr;align-items:center}
@media (min-width:820px){.wall__in{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}}
.wall__stage{position:relative;aspect-ratio:1/1;max-width:500px;margin-inline:auto;width:100%}
.wall__stage img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:contain;
  opacity:0;transform:scale(.88) rotate(-6deg);
  transition:opacity 420ms var(--ease-out),transform 520ms var(--ease-out);
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.28));
}
.wall__stage img.is-active{opacity:1;transform:none}
.wall__name{font-size:clamp(2.6rem,7vw,5rem);line-height:.95;margin:.2rem 0 .8rem}
.wall__desc{font-size:clamp(1.05rem,1.6vw,1.22rem);max-width:44ch;min-height:3.2em}

.chips{
  display:flex;gap:.5rem;overflow-x:auto;padding:.4rem .25rem 1rem;margin-top:clamp(1.5rem,3vw,2.5rem);
  scrollbar-width:none;-webkit-overflow-scrolling:touch;
}
.chips::-webkit-scrollbar{display:none}
/* Chips ohne Fuellung: ein weisser Schleier zieht den Hintergrund zur
   Textfarbe hin und kippt den Kontrast auf dunklen Feldern (Amarena 3,68).
   Ohne Fuellung steht der Text direkt auf der Sortenfarbe, immer ueber 5,65.
   Hover hebt die Kugel, Auswahl zeichnet den Ring. */
.chip{
  flex:none;display:flex;flex-direction:column;align-items:center;gap:.4rem;
  min-width:90px;min-height:108px;padding:.6rem .5rem;border-radius:18px;
  background:transparent;border:1.5px solid transparent;color:inherit;cursor:pointer;font:inherit;
  transition:border-color var(--dur-ui) var(--ease-out),transform var(--dur-ui) var(--ease-out);
}
.chip img{width:52px;height:52px;object-fit:contain;transition:transform var(--dur-ui) var(--ease-out)}
.chip span{font-size:.75rem;font-weight:600;letter-spacing:.02em;white-space:nowrap}
.chip:hover img{transform:translateY(-4px) rotate(-8deg) scale(1.1)}
.chip:active{transform:scale(.97)}
.chip[aria-pressed="true"]{border-color:currentColor}
.chip[aria-pressed="true"] img{transform:translateY(-2px) scale(1.06)}

/* ---------- Spotlight-Karten ---------- */
.spot{position:relative;overflow:hidden}
.spot::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:0;
  background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,.55),transparent 62%);
  transition:opacity var(--dur-ui) var(--ease-out);
}
.spot:hover::before{opacity:1}

/* ---------- Pinkes Feld ----------
   Pink als Flaeche ist erlaubt und on-brand, der ganze Truck ist pink.
   Die Regel „Pink nur Aktion" galt Pink als Akzent AUF Creme. Auf der
   Flaeche traegt der Text Schokobraun (5,90), der Knopf dreht sich um. */
.on-pink{background:var(--action);color:var(--action-ink)}
.on-pink .label,.on-pink .lead{color:var(--action-ink)}   /* voll: 5,90 */
.btn--dark{background:var(--field-deep);color:var(--ink-invert)}
.btn--dark:hover{background:#3a1811}
.on-pink .btn--ghost{border-color:rgba(75,32,23,.3);color:var(--action-ink)}
.on-pink .btn--ghost:hover{border-color:var(--action-ink)}

/* ---------- Kugel-Cluster ----------
   Freigestellte Kugeln als Gruppe, leicht gedreht und angeschnitten.
   Rein dekorativ, deshalb aria-hidden und auf kleinen Schirmen reduziert. */
.cluster{position:relative;min-height:clamp(220px,32vw,330px)}
.cluster img{
  position:absolute;object-fit:contain;
  filter:drop-shadow(0 16px 22px rgba(75,32,23,.22));
  transition:transform 420ms var(--ease-out);
}
.cluster img:nth-child(1){width:52%;left:2%;top:6%;transform:rotate(-9deg)}
.cluster img:nth-child(2){width:40%;right:4%;top:0;transform:rotate(7deg)}
.cluster img:nth-child(3){width:44%;left:26%;bottom:0;transform:rotate(-3deg)}
.cluster img:nth-child(4){width:30%;right:0;bottom:8%;transform:rotate(14deg)}
.cluster:hover img:nth-child(1){transform:rotate(-13deg) translateY(-6px)}
.cluster:hover img:nth-child(2){transform:rotate(11deg) translateY(-9px)}
.cluster:hover img:nth-child(3){transform:rotate(-6deg) translateY(-4px)}
.cluster:hover img:nth-child(4){transform:rotate(19deg) translateY(-8px)}
@media (max-width:700px){.cluster img:nth-child(4){display:none}}
.pink-grid{display:grid;gap:clamp(1.5rem,4vw,3.5rem);grid-template-columns:1fr;align-items:center}
@media (min-width:860px){.pink-grid{grid-template-columns:1.05fr .95fr}}
@media (prefers-reduced-motion:reduce){.cluster img{transition:none}}

/* ---------- Truck-Szene ---------- */
.scene{position:relative;border-radius:var(--radius);overflow:hidden}
.scene img{width:100%;display:block}
.scene .sticker{position:absolute;left:clamp(1rem,3vw,2rem);top:clamp(1rem,3vw,2rem)}

@media (prefers-reduced-motion:reduce){
  .marquee__track{animation:none}
  .drip--wall{transition:none}
  .wall,.wall__stage img,.chip,.chip img{transition:none}
  .spot::before{display:none}
}


/* ==================================================================
   AUSBAU 20.09. — Riesentypo, Fullscreen, Bento
   ================================================================== */

/* ---------- Riesentypo ---------- */
.mega{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.6rem,6.4vw,7.5rem);line-height:.92;letter-spacing:-.035em;
  text-wrap:balance;margin:0;
}
.shout{
  font-family:var(--font-display);font-weight:700;
  font-size:clamp(2.2rem,7.5vw,7rem);line-height:.94;letter-spacing:-.03em;
  text-wrap:balance;margin:0;
}
.mega em,.shout em{font-style:normal;color:var(--accent-text)}
.on-dark .mega em,.on-dark .shout em,.on-pink .mega em,.on-pink .shout em,
.wall .mega em,.wall .shout em{color:inherit;opacity:.72}  /* auf Farbfeldern kein zweites Pink */

/* ---------- Fullscreen ---------- */
.full{min-height:100svh;display:flex;flex-direction:column;justify-content:center}
.full--tight{min-height:92svh}

/* ---------- Hero, typgetrieben ---------- */
.hero-t{position:relative;overflow:hidden;padding-block:clamp(6rem,12vh,9rem) clamp(2rem,6vh,4rem)}
.hero-t__in{position:relative;z-index:2;width:100%;display:grid;align-items:center;
  grid-template-columns:minmax(0,1fr)}
@media (min-width:900px){
  /* Zwei Spalten: die Typo bleibt links, die Kugel bekommt die rechte Haelfte
     fuer sich. Sonst laeuft schokobrauner Text ueber die Kugel und landet
     bei Kontrast 2,37. */
  .hero-t__in{grid-template-columns:minmax(0,1fr) minmax(0,.8fr)}
  .hero-t__col{grid-column:1}
}
.hero-t__top{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem;margin-bottom:clamp(1.2rem,3vh,2.2rem)}
.hero-t__sub{
  font-size:clamp(1.05rem,1.5vw,1.3rem);color:var(--ink-muted);
  max-width:40ch;margin:clamp(1.4rem,3vh,2.4rem) 0 clamp(1.4rem,3vh,2.2rem);
}
.hero-t__scoop{
  position:absolute;z-index:1;right:-6%;bottom:-8%;width:min(52vw,640px);
  pointer-events:none;filter:drop-shadow(0 26px 40px rgba(75,32,23,.24));
  animation:floatIn 1100ms var(--ease-out) both;
}
@keyframes floatIn{from{opacity:0;transform:translateY(26px) rotate(-6deg)}to{opacity:1;transform:none}}
@media (max-width:860px){
  .hero-t{padding-block:calc(74px + 2rem) 0}
  .hero-t__scoop{position:relative;right:auto;bottom:auto;width:74%;margin:1.5rem auto -14% auto;display:block}
}

/* ---------- Bento ---------- */
.bento{
  display:grid;gap:clamp(.6rem,1.1vw,1rem);margin-top:clamp(2rem,4vw,3.5rem);
  grid-template-columns:repeat(2,1fr);grid-auto-rows:minmax(130px,auto);
}
@media (min-width:760px){.bento{grid-template-columns:repeat(4,1fr);grid-auto-rows:minmax(170px,auto)}}
.tile{
  position:relative;overflow:hidden;border-radius:var(--radius);
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:clamp(.9rem,1.6vw,1.4rem);
}
.tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;
  transition:transform 620ms var(--ease-out)}
.tile:hover img{transform:scale(1.045)}
.tile>*{position:relative;z-index:1}
.tile--text{justify-content:center}
.tile__word{
  font-family:var(--font-display);font-weight:700;line-height:.94;letter-spacing:-.03em;
  font-size:clamp(1.5rem,3.2vw,2.6rem);margin:0;
}
.tile__note{font-size:.88rem;margin:.5rem 0 0;opacity:.9}
.tile__cap{
  font-size:.8rem;color:var(--ink-invert);text-shadow:0 1px 10px rgba(43,18,13,.75);margin:0;
}
.tile--photo::after{content:"";position:absolute;inset:0;z-index:0;
  background:linear-gradient(transparent 45%,rgba(43,18,13,.55))}
.t-2x{grid-column:span 2}
.t-2y{grid-row:span 2}
@media (min-width:760px){.t-lg{grid-column:span 2;grid-row:span 2}}
.tile--scoop{display:grid;place-items:center;padding:1rem}
.tile--scoop img{position:static;width:78%;height:auto;object-fit:contain;
  filter:drop-shadow(0 14px 20px rgba(0,0,0,.25))}

/* ---------- Experience ---------- */
.exp__grid{display:grid;gap:clamp(.7rem,1.4vw,1.2rem);grid-template-columns:repeat(2,1fr);margin-top:clamp(2rem,4vw,3rem)}
@media (min-width:860px){.exp__grid{grid-template-columns:repeat(3,1fr)}}
.exp figure{margin:0;position:relative;border-radius:var(--radius);overflow:hidden}
/* kein height:100% — das schlaegt das aspect-ratio und die Figur faellt zusammen */
.exp img{width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;display:block;
  transition:transform 620ms var(--ease-out)}
.exp figure:hover img{transform:scale(1.04)}
.exp figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:2.2rem .9rem .8rem;
  font-size:.82rem;color:var(--ink-invert);
  background:linear-gradient(transparent,rgba(43,18,13,.8));
}