/* ============================================================
   /fmly/ — Loyalty-Unterseite, zweite Fassung.
   Laedt nach dem v12-Stapel (v1 … v12) und benutzt dessen Bausteine:
   .statement, .marquee, .postermarquee, .rule-row, .eyebrow, .btn.
   Eigene Flaechen sind eckig -- wie die Homepage, keine Kaertchen.
   ============================================================ */

.fmly-page { background: var(--blush); }

/* Die Kopfleiste der Unterseiten ist statisch: es gibt keine wandernde
   Marke, die in den Platzhalter fliegt. v1.css blendet .nav__logo aber
   grundsaetzlich aus, weil er dort nur Landepunkt ist -- hier muss er
   selbst sichtbar sein. */
.fmly-page .nav__logo { opacity: 1; pointer-events: auto; }

/* Ohne wandernde Marke steigt v1.js frueh aus und setzt --nav-progress nie.
   Der Hintergrund der Leiste haengt aber daran -- er blieb durchsichtig, und
   beim Scrollen lief der Text unter Logo und Knoepfen durch (auf dem iPhone
   gemessen). Wie auf der Catering-Seite: fest auf 1. */
.fmly-page { --nav-progress: 1; }
.fmly-page .nav { pointer-events: auto; }

/* Einblenden fuer alle eigenen Bausteine; die geteilten (.statement) bringen
   ihre Regeln aus v1.css mit. */
.fmly [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.fmly [data-reveal].is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .fmly [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* --- Hero = Line-Up der Homepage --------------------------------------
   Geometrie und Sequenz kommen unveraendert aus v8.css und v10.css. Hier
   nur das, was die Unterseite anders braucht: Blush statt Creme, weil der
   Hero der erste Eindruck ist (wie auf der Homepage), und eine Fusszeile mit
   Knoepfen statt der Beschriftungsleiste. */
.fmly-page .lineup { background: var(--blush); }
/* Kein Schein hinter dem Mittelbecher -- wie im Hero der Homepage (v13). */
.fmly-page .lineup__stage::before { display: none; }
/* Die Fusszeile ist hier hoeher als die duenne Leiste der Homepage (sie
   traegt Knoepfe), und im Kopf steht zusaetzlich ein Satz. Mit der
   Becherhoehe aus v8.css (54vh) ragte der Mittelbecher gemessen 40 px in die
   Knopfzeile; 38vh lassen bei 1440x900 oben und unten Luft. */
.fmly-lineup { --fmly-cup-max: clamp(15rem, 40vh, 27rem); }

/* Nicht nur nach Fensterhoehe, sondern nach dem Platz, der zwischen Kopf und
   Knopfzeile tatsaechlich bleibt: .lineup__cups wird zum Groessen-Container,
   die Becherhoehe darf 86 % seiner Hoehe nicht ueberschreiten. Bei 1280x720
   und auf dem iPhone SE stiessen die Becher sonst oben bzw. unten an. */
.fmly-lineup .lineup__cups { container-type: size; }
.fmly-lineup .lineup__cup {
  --cup-h: min(var(--fmly-cup-max), 86cqh);
  /* Abstand und Bogen an die Becherhoehe gekoppelt, im selben Verhaeltnis wie
     auf der Homepage (dort 128 px Schritt auf 486 px Becher). v8.css rechnet
     den Schritt nach Fensterbreite -- mit den hier kleineren Bechern standen
     sie dadurch zu weit auseinander. */
  --spread: calc(var(--cup-h) * .263);
  --lift: calc(var(--cup-h) * .041);
}

.fmly-lineup .lineup__title {
  font-size: clamp(2.8rem, min(7.5vw, 12vh), 6.8rem);
  line-height: .88;
}

/* Die Fusszeile erbt Rahmen, Position und das Einblenden am Ende der Sequenz
   (--settle) aus .lineup__rule -- aber ohne deren 75 % Deckkraft und ohne
   Versalien, sie traegt jetzt Satz und Knoepfe. */
/* .v12 vorne dran, weil v12.css .lineup__rule mit derselben Spezifitaet auf
   Label-Groesse und 0.2em Sperrung setzt -- ohne das stand der Satz auf dem
   iPhone buchstabenweise auseinandergezogen da. */
.v12 .fmly-lineup__foot {
  justify-content: center;
  align-items: center;
  padding-top: 0;
  border-top: 0;
  opacity: var(--settle);
  text-transform: none;
  letter-spacing: 0;
  font-size: inherit;
}
.fmly-lineup__sub {
  margin: clamp(.8rem, 2vh, 1.2rem) auto 0;
  max-width: 34rem;
  font-size: clamp(1rem, 1.25vw, 1.2rem);
  line-height: 1.4;
  color: var(--plum);
  text-wrap: balance;   /* sonst stand "up." allein in der zweiten Zeile */
}
.fmly-lineup__sub strong { font-weight: 700; }
.fmly-lineup__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .8rem 1.5rem;
}

.fh__wallet {
  font-family: var(--display);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: clamp(0.95rem, 1.2vw, 1.1rem);
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.fh__wallet:hover { color: var(--coral); }

/* --- Laufband ---------------------------------------------------------
   Groesse wie der mobile Ticker der Homepage (v9.css). Die Plum-Linien
   oben und unten trennen es von Hero und Statement. */
.fmly-marquee {
  border-block: 2px solid var(--plum);
  padding-block: 0.9rem;
}
.fmly-marquee .marquee__item {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  letter-spacing: 0;
  line-height: 1;
}
.fmly-marquee .marquee__dot { color: var(--coral); margin: 0 1.1rem; font-size: 1.4rem; }

/* --- So geht's (Statement) -------------------------------------------- */
.fmly-how .statement__pair { font-size: clamp(2.8rem, 8.5vw, 8.5rem); }
.fmly-how__copy {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-top: clamp(2.5rem, 6vw, 4.5rem);
  padding-top: 1.2rem;
  border-top: 2px solid rgba(238, 182, 160, 0.35);
}
.fmly-how__copy p {
  margin: 0;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.55;
  color: var(--blush);
}
.fmly-how__copy strong {
  display: block;
  margin-bottom: 0.35rem;
  font-family: var(--display);
  font-weight: 400;
  text-transform: uppercase;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  color: var(--white);
}

/* --- Stempelkarten ----------------------------------------------------
   Zwei Karten wie das Plakat im Laden: 12 Kreise fuer Smoothies und Shakes,
   10 fuer Coffee und Matcha. Vor dem Ausloesen stehen die Kreise blass da;
   fmly.js setzt .is-stamped je Karte, und jeder Kreis wird im Abstand von
   --stamp-step aufgestempelt: anheben, aufdruecken, Rand und Bild werden
   satt, der Haken springt nach. Nach dem letzten (--stamp-count) kommt das
   On-us-Siegel. */
.fs {
  padding: var(--section-y) var(--pad-x);
  background: var(--blush);
  color: var(--plum);
}
.fs__eyebrow { display: block; margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.fs__card {
  --stamp-step: 210ms;
  --stamp-count: 12;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
}
.fs__card + .fs__card {
  margin-top: clamp(3rem, 6vw, 5rem);
  padding-top: clamp(3rem, 6vw, 5rem);
  border-top: 2px solid rgba(81, 28, 53, .22);
}
/* Zweite Karte spiegelverkehrt: Kreise links, Text rechts. */
.fs__card--flip { grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); }
.fs__card--flip .fs__head { order: 2; }
.fs__card--flip .fs__grid { order: 1; }
.fs__label {
  display: block;
  margin-bottom: .7rem;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  color: var(--coral);
}
.fs__title {
  margin: 0;
  font-size: var(--fs-display-lg);
  line-height: 0.92;
}
.fs__title em { font-style: normal; color: var(--coral); }
.fs__lead {
  max-width: 30rem;
  margin: 1.2rem 0 0;
  font-size: var(--fs-lead);
  line-height: 1.45;
}

.fs__onus {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-top: clamp(1.5rem, 3vw, 2.4rem);
}
.fs__seal {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: clamp(5.2rem, 8vw, 7rem);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--plum);
  color: var(--blush);
  text-align: center;
  text-transform: uppercase;
  line-height: .9;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  transform: scale(.4) rotate(-14deg);
  opacity: 0;
}
.fs__onus-text {
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(1.1rem, 1.6vw, 1.45rem);
  line-height: 1.05;
  max-width: 14rem;
}

.fs__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(.7rem, 1.8vw, 1.6rem);
}

.fs__circle { position: relative; aspect-ratio: 1; }

/* Die Scheibe beschneidet den Becher; der Haken liegt ausserhalb von ihr,
   damit er ueber den Rand ragen darf wie auf dem Plakat. */
.fs__disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  background: #f8e2d8;
  border: clamp(3px, .42vw, 6px) solid rgba(81, 28, 53, .28);
  opacity: .42;
  transition:
    opacity .25s var(--ease),
    border-color .25s var(--ease);
}
.fs__disc img {
  position: absolute;
  left: 50%;
  top: 9%;
  width: 60%;
  height: auto;
  translate: -50% 0;
  rotate: -7deg;
}
.fs__circle:nth-child(even) .fs__disc img { rotate: 6deg; }
/* Zehn Kreise in zwei Fuenferreihen. */
.fs__grid--ten { grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* Kaffee und Matcha sind Shooting-Fotos auf hellem Grund, keine Freisteller:
   das Bild fuellt die Scheibe, der Ausschnitt sitzt auf dem Becher. */
.fs__disc--photo { background: #efe6df; }
.fs .fs__disc--photo img,
.fs .fs__circle:nth-child(even) .fs__disc--photo img {
  inset: 0;
  width: 100%;
  height: 100%;
  translate: none;
  rotate: none;
  object-fit: cover;
  object-position: 50% 62%;
  scale: 1.18;
}

.fs__check {
  position: absolute;
  top: -4%;
  right: -4%;
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--plum);
  transform: scale(0);
}
/* Haken als zwei Linien statt Schriftzeichen -- sitzt in jeder Schrift gleich. */
.fs__check::after {
  content: "";
  position: absolute;
  left: 34%;
  top: 22%;
  width: 24%;
  height: 44%;
  border: solid var(--cream);
  border-width: 0 max(2px, .25vw) max(2px, .25vw) 0;
  rotate: 42deg;
}

/* ---- Die Abfolge ---- */
.fs__card.is-stamped .fs__circle {
  animation: fs-stamp .62s cubic-bezier(.3, .7, .3, 1) both;
  animation-delay: calc(var(--i) * var(--stamp-step));
}
.fs__card.is-stamped .fs__disc {
  opacity: 1;
  border-color: var(--plum);
  /* Satt wird der Kreis im Moment des Aufdrueckens, nicht beim Anheben. */
  transition-delay: calc(var(--i) * var(--stamp-step) + .3s);
}
.fs__card.is-stamped .fs__check {
  animation: fs-pop .38s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: calc(var(--i) * var(--stamp-step) + .42s);
}
.fs__card.is-stamped .fs__seal {
  animation: fs-seal .55s cubic-bezier(.34, 1.56, .64, 1) both;
  animation-delay: calc(var(--stamp-count) * var(--stamp-step) + .45s);
}

@keyframes fs-stamp {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.22) rotate(-5deg); }
  62%  { transform: scale(.9) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}
@keyframes fs-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}
@keyframes fs-seal {
  from { transform: scale(.4) rotate(-14deg); opacity: 0; }
  to   { transform: scale(1) rotate(-8deg); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .fs__card.is-stamped .fs__circle,
  .fs__card.is-stamped .fs__check,
  .fs__card.is-stamped .fs__seal { animation: none; }
  .fs__card.is-stamped .fs__check { transform: scale(1); }
  .fs__card.is-stamped .fs__seal { transform: rotate(-8deg); opacity: 1; }
  .fs__card.is-stamped .fs__disc { transition: none; }
}

/* --- Stufen -------------------------------------------------------------
   Kreise wie die Stempelkarte, je Stufe ein Becher mehr. Nur Hauspalette:
   Creme, Plum -- Rot ausschliesslich als Textakzent wie auf der Homepage,
   nie als Flaeche. */
.ft {
  padding: var(--section-y) var(--pad-x);
  background: var(--blush);
  /* Stempelkarten und Stufen sind beide Blush -- die Linie trennt sie. */
  border-top: 2px solid var(--plum);
  color: var(--plum);
  text-align: center;
}
.ft__head { margin-bottom: clamp(2rem, 4vw, 3rem); text-align: left; }
/* Am Desktop passt die Section in eine Fensterhoehe: Zeile kleiner als die
   anderen Section-Titel, Kreise und Namen ebenso. Das Eyebrow darueber
   bekommt Gewicht, sonst verschwindet es neben dem Titel. */
.ft__head .eyebrow { font-size: clamp(1.1rem, 1.5vw, 1.45rem); }
.ft__title { margin: .5rem 0 0; font-size: clamp(2.2rem, 3.6vw, 3.6rem); line-height: .92; }
.ft__title em { font-style: normal; color: var(--coral); }

.ft__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(1.5rem, 4vw, 4rem);
}

.ft__from {
  display: block;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(1rem, 1.3vw, 1.25rem);
  color: var(--coral);
}
.ft__name {
  margin: .2rem 0 .8rem;
  font-size: clamp(2.4rem, 3.6vw, 3.8rem);
  line-height: .88;
}
.ft__perks {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: clamp(1.02rem, 1.25vw, 1.2rem);
  line-height: 1.5;
}
.ft__gift {
  margin: 1rem 0 0;
  font-family: var(--display);
  text-transform: uppercase;
  font-size: clamp(1.1rem, 1.5vw, 1.4rem);
  line-height: 1.05;
}
.ft__gift span {
  display: block;
  font-family: var(--body);
  font-size: .78rem;
  letter-spacing: .16em;
  opacity: .7;
  margin-bottom: .15rem;
}

.ft__circle {
  position: relative;
  display: block;
  width: min(12rem, 26vh, 80%);
  aspect-ratio: 1;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  overflow: hidden;
  background: #f8e2d8;
  border: 6px solid var(--plum);
}
.ft__circle img { position: absolute; top: 12%; width: 46%; height: auto; left: 50%; translate: -50% 0; }
.ft__circle--2 img:nth-child(1) { left: 36%; rotate: -8deg; }
.ft__circle--2 img:nth-child(2) { left: 64%; rotate: 8deg; }
.ft__circle--3 img { width: 40%; }
.ft__circle--3 img:nth-child(1) { left: 26%; rotate: -12deg; top: 18%; }
.ft__circle--3 img:nth-child(2) { left: 50%; top: 24%; z-index: 2; }   /* tiefer als die Seitenbecher */
.ft__circle--3 img:nth-child(3) { left: 74%; rotate: 12deg; top: 18%; }

/* Die Kreise werden aufgestempelt wie auf der Stempelkarte: blass, dann
   nacheinander angehoben und satt. fmly.js setzt .is-stamped je Spalte; am
   Desktop kommen alle drei gleichzeitig ins Bild, --i staffelt sie. Mobil
   stehen sie untereinander und loesen einzeln aus -- dort ohne Staffelung. */
.ft__col { --tier-step: 320ms; }
.ft__circle {
  opacity: .42;
  border-color: rgba(81, 28, 53, .28);
  transition: opacity .25s var(--ease), border-color .25s var(--ease);
}
.ft__col.is-stamped .ft__circle {
  opacity: 1;
  border-color: var(--plum);
  animation: fs-stamp .62s cubic-bezier(.3, .7, .3, 1) both;
  animation-delay: calc(.35s + var(--i) * var(--tier-step));
  transition-delay: calc(.65s + var(--i) * var(--tier-step));
}
@media (prefers-reduced-motion: reduce) {
  .ft__col.is-stamped .ft__circle { animation: none; transition: none; }
}

/* Plakatband ebenfalls Blush statt Creme (Grundfarbe aus v11.css). */
.fmly-page .postermarquee { background: var(--blush); }

/* --- Abschluss --------------------------------------------------------- */
.fc {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
  align-items: end;
  gap: 2rem clamp(2rem, 6vw, 6rem);
  padding: var(--section-y) var(--pad-x);
  background: var(--plum);
  color: var(--blush);
}
.fc__title {
  margin: 0;
  font-size: clamp(3.4rem, 10vw, 10rem);
  line-height: 0.86;
  color: var(--white);
}
.fc__title em { font-style: normal; color: var(--coral); }
.fc__side p {
  margin: 0;
  max-width: 28rem;
  font-size: var(--fs-lead);
  line-height: 1.45;
}
.fc__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.6rem;
  margin-top: 1.6rem;
}
.fc__btn { background: var(--blush); color: var(--plum); border-color: var(--blush); }
.fc__btn:hover { background: var(--coral); border-color: var(--coral); color: var(--white); }
.fc__wallet { color: var(--blush); }

/* Die Seite endet auf Plum, der Footer ist ebenfalls Plum -- eine feine Linie
   haelt beide auseinander. */
.fmly-page .footer { border-top: 1px solid rgba(238, 182, 160, 0.18); }

/* ======================================================================
   Tablet und Telefon
   ====================================================================== */

@media (max-width: 860px) {
  /* Mobil ist die Buehne 664 px hoch (iPhone 13); Kopf mit Satz und die
     Knopfzeile lassen dem Faecher rund 280 px -- die Becher muessen kleiner. */
  .fmly-lineup { --fmly-cup-max: clamp(12rem, 36vh, 19rem); }
  /* Mobil faechert die Homepage enger (43 px Schritt auf 279 px Becher). */
  .fmly-lineup .lineup__cup {
    --spread: calc(var(--cup-h) * .154);
    --lift: calc(var(--cup-h) * .034);
  }
  .fmly-lineup__sub { font-size: 1rem; max-width: 22rem; }
  .fmly-lineup__actions { justify-content: center; width: 100%; gap: .6rem 1.2rem; }
  .fmly-lineup__actions .btn { flex: 1 1 100%; text-align: center; }

  .fmly-how__copy { grid-template-columns: 1fr; gap: 1.4rem; }

  /* Mobil steht alles untereinander. Das On-us-Siegel springt erst nach dem
     zwoelften Stempel auf -- ueber der Karte stuende es dann laengst ausser
     Sicht. Deshalb loest sich der Kopf auf und das Siegel wandert unter die
     Karte. */
  .fs__card,
  .fs__card--flip { grid-template-columns: 1fr; gap: 0; }
  .fs__head { display: contents; }
  .fs__label { margin-bottom: .5rem; }
  .fs__label, .fs__title, .fs__lead { order: 0; }
  .fs__card .fs__grid { order: 1; margin-top: 1.8rem; }
  .fs__onus { order: 2; margin-top: 1.6rem; }
  .fs__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; }
  /* Zehn mobil: zwei Viererreihen, die letzten zwei mittig. */
  .fs__grid--ten { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .fs__grid--ten .fs__circle { grid-column: span 3; }
  .fs__grid--ten .fs__circle:nth-child(9) { grid-column: 4 / span 3; }

  /* Mobil steht auf den Stempelkarten alles auf der Mittelachse: Eyebrow,
     Label, Titel, Satz, und das Siegel ueber seinem Text. */
  .fs { text-align: center; }
  .fs__lead { margin-inline: auto; }
  .fs__onus { flex-direction: column; justify-content: center; gap: .9rem; }
  .fs__onus-text { max-width: 16rem; }

  .ft__grid { grid-template-columns: 1fr; gap: 2.4rem; }
  .ft__head { text-align: center; }
  /* --i steht inline an der Spalte, deshalb hier die Verzoegerung selbst. */
  .ft__col.is-stamped .ft__circle { animation-delay: .2s; transition-delay: .5s; }

  .fc { grid-template-columns: 1fr; text-align: center; }
  .fc__side p { margin-inline: auto; }
  .fc__actions { justify-content: center; }
  .fc__actions .btn { flex: 1 1 100%; text-align: center; }

  /* Footer mittig -- nur auf /fmly/, der Footer ist mit der Homepage geteilt. */
  .fmly-page .foot { text-align: center; }
  .fmly-page .foot__brand { width: fit-content; margin-inline: auto; }
  .fmly-page .foot__legal-links { justify-content: center; }
  .fmly-page .foot__legal { justify-content: center; }
}