/* =====================================================================
   PRE-LAUNCH MODE — visual layer
   =====================================================================
   Everything in this file is scoped to  html[data-prelaunch="true"]
   (set inline by the server BEFORE first paint) so nothing here affects
   the normal shop mode.  When `PRELAUNCH_MODE=false` returns the site
   to full shop mode, none of these rules apply.

   Layers handled:
     1. Top sticky countdown banner (56 px desktop / 64 px mobile)
     2. Body offset so the nav doesn't collide with the banner
     3. Price hiding everywhere on the storefront
     4. Buy / cart-add / checkout button replacement
     5. Lead-capture modal
     6. After-launch "we're open" state styling
   ===================================================================== */

/* ---------- 1. Sticky promotional banner ---------- */
/* Designed to look like a campaign strip, not a system bar — bigger,
   richer, three-region layout: HEADLINE (left) · TIMER (centre) · CTA
   (right).  On mobile it stacks vertically and the gold CTA goes
   full-width.  An animated gold sheen sweeps the bar every 6 seconds
   so the eye is drawn back without screaming. */
.prelaunch-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 130;
  min-height: 84px;
  padding: 12px 28px;
  /* Three-stop gradient — black with a subtle gold sheen at the
     centre, then back to black — feels expensive, not flat. */
  background:
    linear-gradient(180deg, rgba(20, 16, 8, 0.55) 0%, rgba(20, 16, 8, 0) 100%),
    linear-gradient(135deg,
      #0d0a05 0%,
      #1a130a 30%,
      #2a1d09 55%,
      #1a130a 80%,
      #0d0a05 100%);
  color: #f4e3bf;
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
  border-bottom: 1px solid rgba(212, 171, 104, 0.45);
  box-shadow:
    0 10px 30px -12px rgba(0, 0, 0, 0.45),
    inset 0 -1px 0 rgba(212, 171, 104, 0.25);
  overflow: hidden;
}
.prelaunch-banner__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;   /* headline | timer | CTA, equal weight */
  align-items: center;
  gap: 22px;
  max-width: 1500px;
  margin: 0 auto;
  width: 100%;
  position: relative;
  z-index: 1;
}

/* LEFT — eyebrow + bold gold headline + small subline. */
.prelaunch-banner__left {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  justify-self: start;
}
.prelaunch-banner__eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  color: #d4ab68;
  padding: 3px 9px;
  border: 1px solid rgba(212, 171, 104, 0.6);
  border-radius: 999px;
  background: rgba(212, 171, 104, 0.08);
  align-self: flex-start;
  margin-bottom: 4px;
}
.prelaunch-banner__headline {
  margin: 0;
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 500;
  line-height: 1.1;
  letter-spacing: 0.4px;
  background: linear-gradient(120deg, #f4e3bf 0%, #ead4a6 35%, #d4ab68 55%, #ead4a6 75%, #f4e3bf 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: prelaunchHeadlineSheen 6s ease-in-out infinite;
}
@keyframes prelaunchHeadlineSheen {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
.prelaunch-banner__sub {
  margin: 0;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: rgba(244, 227, 191, 0.65);
}

/* CENTRE — countdown text + social-proof badge. */
.prelaunch-banner__middle {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.prelaunch-banner__text {
  margin: 0;
  font-size: 14px;
  letter-spacing: 0.4px;
  color: #f4e3bf;
}
.prelaunch-banner__text strong {
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 19px;
  font-weight: 600;
  color: #fff5da;
  letter-spacing: 0.8px;
  font-variant-numeric: tabular-nums;
}
.prelaunch-banner__secs {
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}

/* RIGHT — gold pill CTA, bigger than before so it carries more weight. */
.prelaunch-banner__cta {
  justify-self: end;
  appearance: none;
  border: 1px solid rgba(244, 227, 191, 0.65);
  background: linear-gradient(135deg, #d4ab68 0%, #b58e4c 60%, #8a6a2a 100%);
  color: #fff5da;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  padding: 12px 24px;
  border-radius: 999px;
  cursor: pointer;
  transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease;
  box-shadow:
    0 8px 22px -8px rgba(180, 140, 74, 0.55),
    inset 0 1px 0 rgba(255, 248, 220, 0.35);
  white-space: nowrap;
}
.prelaunch-banner__cta:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow:
    0 14px 30px -10px rgba(180, 140, 74, 0.75),
    inset 0 1px 0 rgba(255, 248, 220, 0.5);
}

/* Animated gold sheen sweeping across the banner — restrained, every 6 s. */
.prelaunch-banner__sheen {
  position: absolute;
  top: 0; bottom: 0; left: -40%;
  width: 60%;
  background: linear-gradient(120deg,
    transparent 0%,
    rgba(244, 227, 191, 0.08) 45%,
    rgba(244, 227, 191, 0.18) 50%,
    rgba(244, 227, 191, 0.08) 55%,
    transparent 100%);
  pointer-events: none;
  z-index: 0;
  animation: prelaunchBannerSheen 6s ease-in-out infinite;
}
@keyframes prelaunchBannerSheen {
  0%   { transform: translateX(0); }
  100% { transform: translateX(280%); }
}

/* ===== Tablet (max 1000) — pull padding tighter ===== */
@media (max-width: 1000px) {
  .prelaunch-banner { padding: 10px 18px; }
  .prelaunch-banner__inner { gap: 14px; }
  .prelaunch-banner__cta { padding: 10px 18px; font-size: 12px; letter-spacing: 1.8px; }
  .prelaunch-banner__sub { font-size: 10px; letter-spacing: 1.5px; }
}

/* ===== Mobile (max 700) — compact 2-row promo strip ===== */
@media (max-width: 700px) {
  .prelaunch-banner {
    min-height: 0;
    /* Tightened — the banner was eating too much of the viewport top
       and pushing the first card down.  Smaller padding keeps it
       present without crowding the hero. */
    padding: 7px 12px 8px;
  }
  .prelaunch-banner__inner {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 3px;
    text-align: center;
  }
  .prelaunch-banner__left {
    align-items: center;
    text-align: center;
    justify-self: stretch;
    gap: 0;
  }
  .prelaunch-banner__eyebrow {
    font-size: 8.5px;
    padding: 1.5px 7px;
    letter-spacing: 1.6px;
    margin-bottom: 1px;
    align-self: center;
  }
  .prelaunch-banner__headline { font-size: 17px; line-height: 1; margin: 0; }
  /* Sub-line ("Verlosung zur Eröffnung · Ein Original kostenlos") hidden
     on mobile per user request — it was taking a whole row and the value
     prop is already implicit in the eyebrow "Gewinnspiel" + the CTA.
     Stays visible on desktop where there's horizontal room. */
  .prelaunch-banner__sub      { display: none !important; }
  .prelaunch-banner__middle   { gap: 1px; }
  .prelaunch-banner__text     { font-size: 11.5px; line-height: 1.15; }
  .prelaunch-banner__text strong { font-size: 14px; }
  .prelaunch-banner__cta {
    justify-self: stretch;
    padding: 8px 14px;
    font-size: 10.5px;
    letter-spacing: 1.3px;
    margin-top: 3px;
  }
}

/* "We are open" post-launch state — softer celebratory styling. */
.prelaunch-banner[data-state="open"] {
  background: linear-gradient(135deg, #ead4a6 0%, #d4ab68 100%);
  color: #2a1d09;
  border-bottom-color: rgba(120, 90, 38, 0.35);
}
.prelaunch-banner[data-state="open"] .prelaunch-banner__cta {
  background: rgba(42, 29, 9, 0.18);
  border-color: rgba(42, 29, 9, 0.45);
  color: #2a1d09;
}

/* ---------- 2. Push EVERY fixed-position element below the banner ---------- */
/* The nav, brand-tagline, and layout-switch are all position:fixed at
   small `top` values (16 / 96 / 96).  When the 56-px banner is at top:0
   they all hide behind it.  Shift each one down by the banner height so
   they sit in the visible area.  We rely on !important to beat the
   per-element rules; the storefront never sets `top` inline so this
   never causes a layout shift in normal mode. */
/* Banner height is MEASURED at runtime by prelaunch.js and published
   as --prelaunch-banner-h.  Every fixed-position element below the
   banner uses that variable + a breathing-room margin.  This way the
   nav and the logo never end up under the banner, regardless of
   whether the banner stacks to 2 or 3 rows on a given viewport. */
html[data-prelaunch="true"] body { padding-top: 0; }
html[data-prelaunch="true"] .nav {
  top: calc(var(--prelaunch-banner-h, 84px) + 12px) !important;
}
html[data-prelaunch="true"] .brand-tagline {
  top: calc(var(--prelaunch-banner-h, 84px) + 92px) !important;
}
/* Layout-switch (Galerie/Vollbild pill) follows the tagline downward
   on desktop, and the nav downward on mobile (where the tagline is
   hidden). */
html[data-prelaunch="true"] .layout-switch {
  top: calc(var(--prelaunch-banner-h, 84px) + 240px) !important;   /* below banner+tagline */
}
@media (max-width: 900px) {
  html[data-prelaunch="true"] .layout-switch {
    top: calc(var(--prelaunch-banner-h, 96px) + 80px) !important;  /* just under the offset nav */
  }
}
@media (max-width: 600px) {
  html[data-prelaunch="true"] .layout-switch {
    top: calc(var(--prelaunch-banner-h, 96px) + 72px) !important;
  }
}
html[data-prelaunch="true"] main#cards {
  scroll-margin-top: calc(var(--prelaunch-banner-h, 84px) + 80px);
}
html[data-prelaunch="true"] body[data-layout="grid"] main#cards {
  padding-top: calc(var(--prelaunch-banner-h, 84px) + 140px) !important;
}

/* ---------- 3. Intriguing price replacement ---------- */
/* Goal: the visitor sees something that PROMISES a real price exists
   ("Preis auf Anfrage" — a classic luxury cue) and a clear path to
   reveal it — leaving their contact.

   IMPORTANT: the templates render prices as TEXT NODES directly
   inside the element (e.g. `<div class="panel__price">350 €</div>`),
   not wrapped in a child element.  So `> *` doesn't hide them — the
   number stays visible and overlaps the replacement.  Fix: collapse
   the host element's text by setting font-size:0 + transparent
   colour, then re-introduce visible content via ::before with
   explicit styles.  Text nodes vanish, child elements (which would
   carry the "inkl. MwSt." badge etc.) also disappear for safety. */

/* Hide DIRECT child elements too, in case any template wraps the
   number in <span> or <small>. */
html[data-prelaunch="true"] .panel__price > *,
html[data-prelaunch="true"] .grid-detail__price > *,
html[data-prelaunch="true"] .auctions-card__price-value > *,
html[data-prelaunch="true"] .auctions-modal__stat-value > *,
html[data-prelaunch="true"] .cart-summary__row > *,
html[data-prelaunch="true"] .checkout-totals__row > *,
html[data-prelaunch="true"] .checkout-product__price > *,
html[data-prelaunch="true"] .cart-item__price > *,
html[data-prelaunch="true"] .cart-item__subtotal > * { display: none !important; }

/* Hide the compact "380 € · Sommer" line in the panel HEADER too —
   this is a separate element from .panel__price and was leaking the
   real number above the big italic price block. */
html[data-prelaunch="true"] .panel__tab-meta {
  font-size: 0 !important;
  color: transparent !important;
  position: relative;
}
html[data-prelaunch="true"] .panel__tab-meta::before {
  content: var(--prelaunch-price-text, 'Preis auf Anfrage');
  font-size: 12px;
  font-family: var(--font-sans, Inter, sans-serif);
  font-style: italic;
  color: rgba(74, 57, 32, 0.75);
  letter-spacing: 0.4px;
}

/* Collapse the direct text content (the raw price string).  The main
   price slot becomes a two-line teaser via ::before + ::after below. */
html[data-prelaunch="true"] .cart-summary__row,
html[data-prelaunch="true"] .checkout-totals__row,
html[data-prelaunch="true"] .checkout-product__price,
html[data-prelaunch="true"] .cart-item__price,
html[data-prelaunch="true"] .cart-item__subtotal {
  font-size: 0 !important;
  color: transparent !important;
  text-shadow: none !important;
  line-height: 0;
}
/* For the BIG price slots inside product panels / detail rows we
   keep the box but kill its inline text content — ::before / ::after
   below will paint the new visible content. */
html[data-prelaunch="true"] .panel__price,
html[data-prelaunch="true"] .grid-detail__price,
html[data-prelaunch="true"] .auctions-card__price-value,
html[data-prelaunch="true"] .auctions-modal__stat-value {
  font-size: 0 !important;
  color: transparent !important;
  text-shadow: none !important;
}

/* "Inkl. MwSt." and similar auto-pseudo-elements should also vanish
   — no tax when no price. */
html[data-prelaunch="true"] .panel__price::after,
html[data-prelaunch="true"] .grid-detail__price::after,
html[data-prelaunch="true"] .checkout-totals__row--total::after,
html[data-prelaunch="true"] .cart-summary__row--total::after,
html[data-prelaunch="true"] body[data-layout="grid"] .card-frame::before {
  content: '' !important;
  display: none !important;
}

/* Two-line teaser (the variant the brand wanted back).  Line 1 is
   the big italic "Preis auf Anfrage", line 2 is a shimmering gold
   pill that visually shouts "click here to unlock the price".  The
   whole block is data-prelaunch-trigger so a tap anywhere opens the
   lead-capture modal.

   The card already has a primary "Vorabzugang sichern" button below,
   so this gives TWO entry points: the curious teaser and the firm
   action.  Two doors, same room. */
html[data-prelaunch="true"] .panel__price,
html[data-prelaunch="true"] .grid-detail__price,
html[data-prelaunch="true"] .auctions-card__price-value,
html[data-prelaunch="true"] .auctions-modal__stat-value {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  font-family: var(--font-serif, "Cormorant Garamond", serif) !important;
  font-style: italic;
  font-variant-numeric: normal !important;
  letter-spacing: 0.2px !important;
  cursor: pointer;
  position: relative;
  padding: 14px 0 4px;
}
/* HEADLINE — large italic "Preis auf Anfrage". */
html[data-prelaunch="true"] .panel__price::before,
html[data-prelaunch="true"] .grid-detail__price::before,
html[data-prelaunch="true"] .auctions-card__price-value::before,
html[data-prelaunch="true"] .auctions-modal__stat-value::before {
  content: var(--prelaunch-price-text, 'Preis auf Anfrage');
  font-size: 26px;
  font-weight: 500;
  line-height: 1.1;
  color: var(--color-text, #1a1a1a);
  letter-spacing: 0.4px;
  /* Subtle gradient shimmer on the words themselves.  Loop on the
     same 6 s rhythm as the banner so the page feels coordinated. */
  background: linear-gradient(120deg, #1a1a1a 0%, #8a6a2a 50%, #1a1a1a 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: prelaunchPriceShimmer 6s ease-in-out infinite;
}
@keyframes prelaunchPriceShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
/* CTA PILL — shimmering gold pill underneath, the brand's "open
   door".  Same gradient family as the top banner CTA so the visual
   language is consistent across the page. */
html[data-prelaunch="true"] .panel__price::after,
html[data-prelaunch="true"] .grid-detail__price::after {
  content: var(--prelaunch-price-cta, 'Vorabzugang sichern  →') !important;
  display: inline-flex !important;
  align-items: center;
  font-family: var(--font-sans, Inter, sans-serif) !important;
  font-style: normal;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 2.3px;
  text-transform: uppercase;
  padding: 10px 18px;
  border-radius: 999px;
  background: linear-gradient(135deg, #f4e0b4 0%, #d4ab68 55%, #b58e4c 100%);
  background-size: 220% auto;
  color: #2a1d09;
  border: 1px solid rgba(180, 140, 74, 0.45);
  box-shadow:
    0 8px 22px -10px rgba(180, 140, 74, 0.55),
    inset 0 1px 0 rgba(255, 248, 220, 0.5);
  transition: transform 200ms ease, box-shadow 200ms ease, filter 200ms ease, background-position 200ms ease;
  cursor: pointer;
  white-space: nowrap;
  animation: prelaunchPillShimmer 5s ease-in-out infinite;
}
@keyframes prelaunchPillShimmer {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}
html[data-prelaunch="true"] .panel__price:hover::after,
html[data-prelaunch="true"] .grid-detail__price:hover::after {
  transform: translateY(-2px);
  filter: brightness(1.06);
  box-shadow:
    0 14px 30px -10px rgba(180, 140, 74, 0.75),
    inset 0 1px 0 rgba(255, 248, 220, 0.65);
}

/* Mobile — slightly tighter sizing so the two lines fit nicely. */
@media (max-width: 700px) {
  html[data-prelaunch="true"] .panel__price,
  html[data-prelaunch="true"] .grid-detail__price {
    gap: 8px;
    padding: 10px 0 4px;
  }
  html[data-prelaunch="true"] .panel__price::before,
  html[data-prelaunch="true"] .grid-detail__price::before {
    font-size: 22px;
  }
  html[data-prelaunch="true"] .panel__price::after,
  html[data-prelaunch="true"] .grid-detail__price::after {
    font-size: 11px;
    padding: 9px 14px;
    letter-spacing: 2px;
  }
}

/* Cart / checkout — single line, more compact (no gold pill there;
   the page already has a big lead button somewhere else). */
html[data-prelaunch="true"] .cart-summary__row,
html[data-prelaunch="true"] .checkout-totals__row,
html[data-prelaunch="true"] .checkout-product__price,
html[data-prelaunch="true"] .cart-item__price,
html[data-prelaunch="true"] .cart-item__subtotal {
  font-family: var(--font-serif, serif) !important;
  font-style: italic;
  color: rgba(74, 57, 32, 0.75) !important;
  font-size: 14px !important;
  font-weight: 400 !important;
  letter-spacing: 0.2px !important;
}
html[data-prelaunch="true"] .cart-summary__row::before,
html[data-prelaunch="true"] .checkout-totals__row::before,
html[data-prelaunch="true"] .cart-item__price::before,
html[data-prelaunch="true"] .cart-item__subtotal::before,
html[data-prelaunch="true"] .checkout-product__price::before {
  content: var(--prelaunch-price-text, 'Preis auf Anfrage');
  white-space: nowrap;
}

/* Cards in GRID mode show "Name · Price" via a pseudo-element using
   attr(data-price).  Swap to a tasteful gold cue that hints at
   exclusivity without revealing anything. */
html[data-prelaunch="true"] body[data-layout="grid"] .card-frame::after {
  content: attr(data-name) ' · ' var(--prelaunch-card-suffix, '✦ Preis auf Anfrage') !important;
  font-style: italic;
}

/* Make the cinema-mode .panel__price slot clickable via JS — we tag
   it with [data-prelaunch-trigger] so prelaunch.js can intercept.
   This is done lazily in JS after render; the CSS above just makes
   it LOOK clickable. */

/* ---------- 4. Replace buy / checkout buttons ---------- */
/* Original CTAs become lead-capture triggers via JS (intercepted in
   prelaunch.js).  Because the templates put the button label as a
   direct text node ("Bezahlen") instead of wrapping it, we collapse
   the host's text (font-size:0 + transparent colour) and paint the
   replacement label through ::before with explicit typography. */
html[data-prelaunch="true"] [data-buy],
html[data-prelaunch="true"] [data-grid-buy],
html[data-prelaunch="true"] .panel__buy {
  position: relative;
  font-size: 0 !important;
  color: transparent !important;
  text-shadow: none !important;
  /* Pad the button to a visible height — the original padding usually
     drives the size, but with font-size:0 some shells shrink to zero. */
  min-height: 48px;
}
/* Any wrapping <span>/<small> from older templates: hide too. */
html[data-prelaunch="true"] [data-buy] > *,
html[data-prelaunch="true"] [data-grid-buy] > *,
html[data-prelaunch="true"] .panel__buy > * { display: none !important; }
html[data-prelaunch="true"] [data-buy]::before,
html[data-prelaunch="true"] [data-grid-buy]::before,
html[data-prelaunch="true"] .panel__buy::before {
  content: var(--prelaunch-buy, 'Platz sichern');
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.4px;
  text-transform: uppercase;
  /* Jet-black text on the new white-fill + gold-outline button —
     matches the minimalist visual the user asked for. */
  color: #161616;
  font-family: var(--font-sans, Inter, sans-serif);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* The pseudo-element inherits NOTHING from its host's :hover state
     by default — so we set the hover colour explicitly below. */
}
html[data-prelaunch="true"] [data-grid-buy]:hover::before,
html[data-prelaunch="true"] [data-buy]:hover::before,
html[data-prelaunch="true"] .panel__buy:hover::before {
  color: #ffffff;          /* white on the gold hover fill */
}

/* Cart-add (icon only on cinema, label on grid).  Cinema's icon button
   stays visible — only label-bearing buttons need the swap. */
html[data-prelaunch="true"] [data-grid-cart] {
  position: relative;
  font-size: 0 !important;
  color: transparent !important;
  min-height: 44px;
}
html[data-prelaunch="true"] [data-grid-cart] > * { display: none !important; }
html[data-prelaunch="true"] [data-grid-cart]::before {
  content: var(--prelaunch-cart, 'Bei Eröffnung benachrichtigen');
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: #161616;          /* matches the new white-fill ghost button */
  font-family: var(--font-sans, Inter, sans-serif);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Ghost hover now picks up a soft cream wash (#f8f2ea) — text stays
   dark, so no recolour needed on hover. */

/* Cart drawer "Zur Kasse" button — different anchor, swap text. */
html[data-prelaunch="true"] .cart__checkout {
  position: relative;
  font-size: 0 !important;
  color: transparent !important;
  min-height: 48px;
}
html[data-prelaunch="true"] .cart__checkout > * { display: none !important; }
html[data-prelaunch="true"] .cart__checkout::before {
  content: var(--prelaunch-checkout, 'Für die Eröffnung vormerken');
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 2.2px;
  text-transform: uppercase;
  color: #fff;
  font-family: var(--font-sans, Inter, sans-serif);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------- 5. Lead-capture modal ---------- */
.prelaunch-modal {
  position: fixed;
  inset: 0;
  z-index: 400;
  display: none;
}
.prelaunch-modal[data-open="true"] {
  display: block;
  animation: prelaunchIn 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes prelaunchIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.prelaunch-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 16, 8, 0.7);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
.prelaunch-modal__sheet {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(560px, calc(100% - 24px));
  /* Dynamic viewport unit so iOS Safari's URL bar showing/hiding
     doesn't change the modal's max height mid-interaction. */
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  /* Lock vertical scroll INSIDE the sheet — without this, scrolling
     to the bottom of the modal bleeds into the page underneath
     (rubber-band).  Required on iOS for a clean modal feel. */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 22px;
  padding: 36px 30px 28px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow:
    0 36px 80px -28px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(212, 171, 104, 0.18);
  -webkit-backdrop-filter: blur(28px);
  backdrop-filter: blur(28px);
  font-family: var(--font-sans, Inter, system-ui, sans-serif);
}
.prelaunch-modal__close {
  position: absolute;
  /* z-index high so it survives any future stacking-context tweaks
     inside the sheet — close must ALWAYS be reachable. */
  z-index: 10;
  top: 10px;
  right: 10px;
  /* 44 × 44 minimum per Apple HIG / WCAG AAA tap targets.  Was 36×36 —
     too small to hit reliably with a thumb on iPhone. */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(22, 22, 22, 0.10);
  background: rgba(255, 255, 255, 0.95);
  cursor: pointer;
  display: grid;
  place-items: center;
  color: var(--color-text, #1a1a1a);
  -webkit-tap-highlight-color: transparent;
  transition: background .15s ease, transform .12s ease;
}
.prelaunch-modal__close:hover { background: #fff; transform: scale(1.05); }
.prelaunch-modal__close:active { transform: scale(0.96); }
.prelaunch-modal__eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #8a6a2a;
  margin: 0;
}
.prelaunch-modal__title {
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-size: 30px;
  font-weight: 500;
  margin: 0;
  line-height: 1.15;
  color: var(--color-text, #1a1a1a);
}
.prelaunch-modal__intro {
  font-size: 14px;
  line-height: 1.55;
  color: rgba(74, 57, 32, 0.85);
  margin: 0 0 6px;
}
.prelaunch-modal__product {
  font-family: var(--font-serif, serif);
  font-style: italic;
  font-size: 15px;
  color: #4a3920;
  padding: 10px 14px;
  background: rgba(212, 171, 104, 0.10);
  border-radius: 10px;
  border: 1px solid rgba(212, 171, 104, 0.22);
}

/* ============================================================
   PRIZE BLOCK — the raffle reward shown at the top of the modal
   ============================================================
   Two-column on desktop (image left, copy right), stacks on phone.
   The image is the hero — gold ring, soft inner shadow, "Gewinnspiel"
   chip floating top-left.  Description is short serif italic to hint
   at the editorial brand voice. */
.prelaunch-prize {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 18px;
  align-items: stretch;
  padding: 16px;
  border-radius: 18px;
  background: linear-gradient(160deg,
    rgba(244, 224, 180, 0.18) 0%,
    rgba(255, 252, 244, 0.92) 100%);
  border: 1px solid rgba(180, 140, 74, 0.28);
  box-shadow:
    0 12px 28px -14px rgba(180, 140, 74, 0.28),
    inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.prelaunch-prize__media {
  /* Now a <button> — strip default browser styling so it looks
     identical to the previous <div> version, then layer in cues
     that signal "clickable to enlarge". */
  appearance: none;
  border: none;
  padding: 0;
  cursor: zoom-in;
  font: inherit;
  display: block;
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(180, 140, 74, 0.4),
    0 8px 20px -8px rgba(22, 22, 22, 0.22);
  aspect-ratio: 4 / 5;
  background: #f5efe5;
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.prelaunch-prize__media:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(180, 140, 74, 0.7),
    0 14px 28px -10px rgba(22, 22, 22, 0.3);
}
.prelaunch-prize__media:hover img { transform: scale(1.04); }
.prelaunch-prize__media img {
  transition: transform 320ms ease;
}
.prelaunch-prize__zoom {
  /* Small magnifier badge in the bottom-right — subtle "click me" cue. */
  position: absolute;
  bottom: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(20, 16, 8, 0.78);
  color: #f4e3bf;
  border: 1px solid rgba(244, 227, 191, 0.45);
  box-shadow: 0 3px 8px -2px rgba(0, 0, 0, 0.35);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.prelaunch-prize__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.prelaunch-prize__chip {
  position: absolute;
  top: 8px;
  left: 8px;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #2a1d09;
  background: linear-gradient(135deg, #f4e0b4 0%, #d4ab68 100%);
  border: 1px solid rgba(180, 140, 74, 0.5);
  padding: 3px 8px;
  border-radius: 999px;
  box-shadow: 0 3px 8px -3px rgba(180, 140, 74, 0.55);
}
.prelaunch-prize__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
  min-width: 0;
}
.prelaunch-prize__season {
  margin: 0;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2.5px;
  text-transform: uppercase;
  color: #8a6a2a;
}
.prelaunch-prize__name {
  margin: 0;
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-size: 32px;
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: 0.5px;
  color: var(--color-text, #1a1a1a);
  background: linear-gradient(120deg, #1a1a1a 0%, #8a6a2a 50%, #1a1a1a 100%);
  background-size: 220% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: prelaunchPriceShimmer 6s ease-in-out infinite;
}
.prelaunch-prize__desc {
  margin: 0;
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: 12.5px;
  line-height: 1.5;
  color: rgba(74, 57, 32, 0.78);
}
.prelaunch-prize__value {
  margin: 4px 0 0;
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
}
.prelaunch-prize__value-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(74, 57, 32, 0.55);
}
.prelaunch-prize__value-amount {
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-size: 22px;
  font-weight: 500;
  color: #8a6a2a;
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
  text-decoration-color: rgba(138, 106, 42, 0.45);
}
.prelaunch-prize__value-free {
  font-size: 11.5px;
  font-style: italic;
  color: #2a7048;
  font-weight: 500;
}

/* ===== Rules (I · II · III) ===== */
.prelaunch-rules {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.prelaunch-rules li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: center;
  font-size: 12.5px;
  line-height: 1.45;
  color: rgba(74, 57, 32, 0.85);
}
.prelaunch-rules__num {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, #f4e0b4 0%, #d4ab68 100%);
  color: #2a1d09;
  font-family: var(--font-serif, "Cormorant Garamond", serif);
  font-style: italic;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.2px;
  box-shadow: 0 3px 8px -3px rgba(180, 140, 74, 0.45);
  font-variant: small-caps;
}

@media (max-width: 600px) {
  .prelaunch-prize {
    grid-template-columns: 100px 1fr;
    gap: 12px;
    padding: 12px;
  }
  .prelaunch-prize__name { font-size: 24px; }
  .prelaunch-prize__desc { font-size: 12px; line-height: 1.45; }
  .prelaunch-prize__value-amount { font-size: 18px; }
  .prelaunch-prize__value-free { font-size: 11px; }
  .prelaunch-rules li { font-size: 12px; gap: 10px; grid-template-columns: 24px 1fr; }
  .prelaunch-rules__num { width: 24px; height: 24px; font-size: 12px; }
  .prelaunch-prize__zoom { width: 24px; height: 24px; bottom: 6px; right: 6px; }
}

/* ============================================================
   ZOOM lightbox — fullscreen view of the prize image
   ============================================================
   Sits above the lead-modal (z-index 500 vs modal's 400) so clicking
   the prize image overlays cleanly without closing the modal.
   Single instance, reused for every click; ESC and tap-anywhere
   collapse it. */
.prelaunch-zoom {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(8, 6, 2, 0.92);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  cursor: zoom-out;
}
.prelaunch-zoom[data-open="true"] {
  display: flex;
  animation: prelaunchZoomIn 280ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes prelaunchZoomIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.prelaunch-zoom img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 14px;
  box-shadow:
    0 32px 60px -20px rgba(0, 0, 0, 0.55),
    inset 0 0 0 1px rgba(212, 171, 104, 0.4);
  user-select: none;
  -webkit-user-drag: none;
  animation: prelaunchZoomImgIn 320ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes prelaunchZoomImgIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}
.prelaunch-zoom__close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(244, 227, 191, 0.45);
  background: rgba(20, 16, 8, 0.7);
  color: #f4e3bf;
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 180ms ease, transform 180ms ease;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
.prelaunch-zoom__close:hover { background: rgba(244, 227, 191, 0.18); transform: scale(1.05); }
@media (max-width: 700px) {
  .prelaunch-zoom { padding: 18px; }
  .prelaunch-zoom__close { top: 12px; right: 12px; width: 38px; height: 38px; }
}

.prelaunch-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.prelaunch-field > span {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: rgba(74, 57, 32, 0.7);
}
.prelaunch-field > span em {
  font-style: normal;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: rgba(74, 57, 32, 0.5);
  margin-left: 4px;
}
.prelaunch-field input,
.prelaunch-field select {
  height: 44px;
  padding: 0 14px;
  border-radius: 10px;
  border: 1.5px solid rgba(22, 22, 22, 0.12);
  background: #fff;
  font-family: inherit;
  /* 16 px minimum on mobile — anything smaller triggers iOS Safari's
     auto-zoom-on-focus behaviour, which yanks the modal off-screen
     when the user taps an input.  Desktop can use the original 15 px
     since auto-zoom doesn't apply there. */
  font-size: 16px;
  color: var(--color-text, #1a1a1a);
  outline: none;
  transition: border-color 200ms ease;
}
@media (min-width: 901px) {
  .prelaunch-field input,
  .prelaunch-field select { font-size: 15px; }
}
.prelaunch-field input:focus,
.prelaunch-field select:focus { border-color: #b58e4c; }

.prelaunch-phone {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
}
.prelaunch-phone__cc {
  height: 44px;
  padding: 0 8px;
  border-radius: 10px;
  border: 1.5px solid rgba(22, 22, 22, 0.12);
  background: #fff;
  /* 16 px on mobile so iOS Safari doesn't auto-zoom on focus. */
  font-size: 16px;
  font-family: inherit;
}
@media (min-width: 901px) {
  .prelaunch-phone__cc { font-size: 14px; }
}

.prelaunch-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(74, 57, 32, 0.85);
  cursor: pointer;
  user-select: none;
}
.prelaunch-check input { width: 18px; height: 18px; accent-color: #b58e4c; }

.prelaunch-modal__submit {
  margin-top: 4px;
  /* Larger primary CTA — the single most important conversion control,
     so it gets the most weight: taller, full-width, heavier type. */
  height: 58px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #d4ab68 0%, #b58e4c 50%, #8a6a2a 100%);
  background-size: 180% auto;          /* room for the hover background-position shift */
  color: #fff;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 14px 30px -10px rgba(138, 106, 42, 0.6);
  transition: transform 180ms ease, box-shadow 220ms ease,
              background-position 450ms ease, opacity 180ms ease;
  -webkit-tap-highlight-color: transparent;
}
/* Hover micro-animation: the pill lifts, the gold gradient slides warm,
   and the arrow nudges right — a small "go" cue without being loud. */
.prelaunch-modal__submit:hover {
  transform: translateY(-2px);
  background-position: right center;
  box-shadow: 0 18px 40px -10px rgba(138, 106, 42, 0.72);
}
.prelaunch-modal__submit:hover .prelaunch-modal__submit-arrow { transform: translateX(4px); }
.prelaunch-modal__submit:active { transform: translateY(0); }
.prelaunch-modal__submit:disabled { opacity: 0.6; cursor: wait; transform: none; }
.prelaunch-modal__submit-label { line-height: 1; }
.prelaunch-modal__submit-arrow { flex: 0 0 auto; transition: transform 200ms ease; }
/* On very narrow phones the uppercase + wide letter-spacing combination
   eats too much horizontal space — collapse the spacing so the label
   never crashes against the rounded edges of the pill. */
@media (max-width: 380px) {
  .prelaunch-modal__submit {
    font-size: 13px;
    letter-spacing: 1px;
    height: 56px;
  }
}

/* ===== Founder's Circle seats meter (under the modal title) ===== */
.prelaunch-seats {
  margin: 2px 0 4px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.prelaunch-seats__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}
.prelaunch-seats__label {
  font-size: 13px;
  font-weight: 600;
  color: #8a6a2a;
  letter-spacing: 0.2px;
}
.prelaunch-seats__pct {
  font-size: 11px;
  font-weight: 700;
  color: rgba(74, 57, 32, 0.55);
  font-variant-numeric: tabular-nums;
}
.prelaunch-seats__bar {
  position: relative;
  height: 8px;
  border-radius: 999px;
  background: rgba(138, 106, 42, 0.14);
  overflow: hidden;
}
.prelaunch-seats__bar > span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, #d4ab68 0%, #b58e4c 60%, #8a6a2a 100%);
  box-shadow: 0 0 10px -2px rgba(180, 140, 74, 0.5);
  /* Animate the fill so it visibly "fills toward full" on open — drives
     the scarcity feeling.  Width is set inline by JS. */
  transition: width 800ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ===== Field hierarchy: primary (email) vs optional (WhatsApp/name) ===== */
.prelaunch-field--primary > span { color: #6b5226; }
.prelaunch-field--primary input {
  /* The required e-mail field is the visual anchor of the form — give
     it a slightly taller box + a warm focus ring. */
  height: 50px;
  border-width: 2px;
}
.prelaunch-field--optional > span { color: rgba(74, 57, 32, 0.55); }
.prelaunch-field__hint {
  margin: 0 0 2px;
  font-size: 11.5px;
  line-height: 1.4;
  color: rgba(74, 57, 32, 0.62);
}

/* ===== Urgency line directly above the CTA ===== */
.prelaunch-modal__urgency {
  margin: 6px 0 0;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: #a8431f;                      /* warm terracotta — urgent but on-palette, not alarm-red */
  min-height: 16px;
}
.prelaunch-modal__urgency:empty { display: none; }

/* ===== Trust line under the CTA (promoted from tiny grey print) ===== */
.prelaunch-modal__trust {
  margin: 8px 0 0;
  text-align: center;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  color: rgba(74, 57, 32, 0.82);
  letter-spacing: 0.2px;
}

.prelaunch-modal__small {
  font-size: 11px;
  color: rgba(74, 57, 32, 0.6);
  line-height: 1.55;
  text-align: center;
  margin: 4px 0 0;
}
.prelaunch-modal__feedback {
  font-size: 13.5px;
  text-align: center;
  margin: 0;
  min-height: 18px;
  line-height: 1.5;
  font-weight: 500;
  border-radius: 10px;
  transition: background .15s, padding .15s;
}
/* When a state is set (error/success), the message becomes a banner —
   panel-style with a colored background so the user CANNOT miss it
   between the form fields and the disclaimer text below. */
.prelaunch-modal__feedback[data-kind="error"] {
  color: #b32a1f;
  background: rgba(192, 57, 43, 0.08);
  border: 1px solid rgba(192, 57, 43, 0.35);
  padding: 12px 14px;
  font-weight: 600;
  animation: prelaunchFeedbackShake 320ms cubic-bezier(.36,.07,.19,.97);
}
.prelaunch-modal__feedback[data-kind="success"] {
  color: #1e5d3a;
  background: rgba(42, 112, 72, 0.08);
  border: 1px solid rgba(42, 112, 72, 0.3);
  padding: 12px 14px;
  font-weight: 600;
}
@keyframes prelaunchFeedbackShake {
  0%, 100% { transform: translateX(0); }
  25%      { transform: translateX(-4px); }
  75%      { transform: translateX(4px); }
}

.prelaunch-honeypot {
  position: absolute;
  left: -10000px;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.prelaunch-body-locked {
  overflow: hidden;
}

@media (max-width: 600px) {
  .prelaunch-modal__sheet { padding: 26px 16px 20px; gap: 10px; }
  .prelaunch-modal__title { font-size: 22px; line-height: 1.18; }
  .prelaunch-phone { grid-template-columns: 96px 1fr; }

  /* ---- Mobile is the priority traffic (TikTok / Instagram) ----
     Reorder the modal so the FORM is reachable with almost no scroll:
     a compact hero + the scarcity meter + the fields + the button sit
     up top, and the 3 benefit bullets drop BELOW the CTA as
     reinforcement.  The sheet is a flex column, so `order` reflows the
     children without touching the DOM / JS. */
  .prelaunch-modal__sheet { display: flex; flex-direction: column; }
  .prelaunch-prize            { order: 1; }
  .prelaunch-modal__eyebrow   { order: 2; }
  .prelaunch-modal__title     { order: 3; }
  .prelaunch-seats            { order: 4; }
  .prelaunch-field--primary   { order: 5; }   /* e-mail (required) */
  .prelaunch-field--phone     { order: 6; }   /* WhatsApp (optional) */
  .prelaunch-field--optional:not(.prelaunch-field--phone) { order: 7; } /* first name */
  .prelaunch-field--product   { order: 8; }
  .prelaunch-modal__urgency   { order: 9; }
  .prelaunch-modal__submit    { order: 10; }
  .prelaunch-modal__trust     { order: 11; }
  .prelaunch-modal__feedback  { order: 12; }
  .prelaunch-rules            { order: 13; margin-top: 4px; }

  /* Compact hero so the meter + email field land near the top of the
     viewport on a 380 px phone. */
  .prelaunch-prize {
    grid-template-columns: 84px 1fr;
    gap: 12px;
    padding: 10px;
  }
  .prelaunch-prize__name { font-size: 22px; }
  .prelaunch-prize__desc { font-size: 11.5px; line-height: 1.4; }

  /* Bigger, thumb-friendly inputs. */
  .prelaunch-field input,
  .prelaunch-field select,
  .prelaunch-phone__cc { height: 48px; }
  .prelaunch-field--primary input { height: 52px; }
  .prelaunch-field__hint { font-size: 11px; }
}

/* Extra-small phones (≤380 px) — squeeze hero + spacing further so the
   email field + button are visible with a single short scroll. */
@media (max-width: 380px) {
  .prelaunch-modal__sheet { padding: 24px 13px 18px; gap: 9px; }
  .prelaunch-prize { grid-template-columns: 72px 1fr; gap: 10px; }
  .prelaunch-prize__name { font-size: 20px; }
  .prelaunch-modal__title { font-size: 20px; }
  .prelaunch-seats__label { font-size: 12.5px; }
}

/* ============================================================
   MOTIVATION BLOCKS — extra nudges to leave a contact
   ============================================================ */

/* Floating "Vorabzugang sichern" FAB — fully removed.
   The .prelaunch-fab element is still created by prelaunch.js for
   code-level back-compat with hooks that reference it (e.g. legacy
   click delegates), but it is hidden unconditionally — the per-card
   .card-cta below covers the mobile-CTA need much more visibly.
   ~60 lines of FAB styling (gold pill, fade-in animation, arrow
   pseudo-element) were removed because they were never rendered. */
.prelaunch-fab,
html[data-prelaunch="true"] .prelaunch-fab { display: none !important; }

/* ============================================================
   Mobile per-card CTA — "Vorabzugang sichern" button pinned to the
   bottom of every snapped card.  Different from the global FAB:
   this one is INSIDE the card's stacking context, scrolls with the
   card (snaps with it), and gives every product its own immediate
   call-to-action without requiring the user to tap the chip and
   expand the description first.
   ============================================================ */
/* `.card-cta` (gold "Reserve" pill that used to sit pinned above the
   panel chip on mobile) was REMOVED per user feedback — it overlapped
   the social-rail icons, the pagination dots and the panel chip name
   simultaneously, making the card feel cluttered.  Buy intent is now
   surfaced exclusively through the centred story modal (open via tap
   on the panel chip) which has its own sticky "Reserve" button at the
   bottom.  All `.card-cta` rules removed; the JS no longer renders
   the element either. */
.card-cta { display: none !important; }

/* DEDUPE: on mobile in prelaunch mode hide the panel's own buy
   button so the user only sees ONE "Vorabzugang sichern" — the new
   `.card-cta` floating pill above the panel.  The panel's
   .panel__buy stays in DOM (preserves existing click handlers and
   the post-launch shop flow), it's just visually hidden during
   the pre-launch period.  When PRELAUNCH_MODE=false the rule
   stops applying (no html[data-prelaunch="true"] match) and the
   panel's own button returns to view. */
@media (max-width: 900px) {
  html[data-prelaunch="true"] .panel__buy,
  html[data-prelaunch="true"] .panel__cart-link,
  html[data-prelaunch="true"] .panel__actions { display: none !important; }
}
/* (FAB tiny-phone media query removed — `.prelaunch-fab` is now
   permanently `display: none`, so its per-breakpoint sizing rules
   never applied.  Saved ~10 lines of dead CSS.) */

/* (b) Social-proof badge inside the banner — sits under the countdown
   text in the centre column, soft gold pill so the digit doesn't
   compete with the headline. */
.prelaunch-banner__proof {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 5px 10px;
  color: rgba(244, 227, 191, 0.95);
  background: linear-gradient(180deg,
    rgba(244, 227, 191, 0.14) 0%,
    rgba(244, 227, 191, 0.04) 100%);
  border: 1px solid rgba(244, 227, 191, 0.28);
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  position: relative;
  /* Tiny live-pulse dot anchored at the leading edge — signals the
     number is real-time without being noisy. */
}
.prelaunch-banner__proof::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55);
  animation: prelaunchProofPulse 2s ease-in-out infinite;
  flex: 0 0 auto;
}
@keyframes prelaunchProofPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.55); }
  50%      { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
}
.prelaunch-banner__proof-num {
  font: 700 16px/1 var(--la-font-sans, 'Inter', sans-serif);
  color: #fbeac0;
  letter-spacing: -0.01em;
}
.prelaunch-banner__proof-label {
  font: 600 10px/1 var(--la-font-sans, 'Inter', sans-serif);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(244, 227, 191, 0.78);
}
.prelaunch-banner__proof[data-count="0"],
.prelaunch-banner__proof:empty { display: none; }
/* Button reset — chip is a real <button> for accessibility but should
   render exactly like the old <span> chip did. */
.prelaunch-banner__proof {
  cursor: pointer;
  font-family: inherit;
  transition: transform .15s ease, border-color .15s ease, background .2s ease;
  -webkit-tap-highlight-color: transparent;
}
.prelaunch-banner__proof:hover {
  transform: translateY(-1px);
  border-color: rgba(244, 227, 191, 0.42);
  background: linear-gradient(180deg, rgba(244,227,191,.18) 0%, rgba(244,227,191,.06) 100%);
}
.prelaunch-banner__proof:active { transform: translateY(0); }
.prelaunch-banner__proof:focus-visible {
  outline: 2px solid rgba(244, 227, 191, 0.6);
  outline-offset: 2px;
}
.prelaunch-banner__proof-caret {
  display: inline-block;
  margin-left: 1px;
  font-size: 10px;
  color: rgba(244, 227, 191, 0.6);
  transition: transform .2s ease;
}
.prelaunch-banner__proof[aria-expanded="true"] .prelaunch-banner__proof-caret {
  transform: rotate(180deg);
}
@media (max-width: 700px) {
  /* On mobile the banner is already tall with three text rows + CTA;
     the participant-count chip pushed total banner height past 90 px
     and made the top of the storefront feel cramped.  Hide it on
     mobile entirely — the chip remains on tablet/desktop where there's
     horizontal room next to the countdown. */
  .prelaunch-banner__proof,
  .prelaunch-proof-pop { display: none !important; }
}

/* ---------- Breakdown popover ---------- */
/* Dropdown panel anchored under the proof chip.  Glass + gold-rim
   aesthetic so it reads as the same surface as the banner.  Closes
   on backdrop / ESC / scroll.
   Width 348 px so the longest Bundesland label
   ("Nordrhein-Westfalen") fits on one line without ellipsis. */
.prelaunch-proof-pop {
  position: fixed;
  z-index: 200;
  width: 348px;
  max-width: calc(100vw - 24px);
  padding: 18px 20px 16px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(20, 16, 8, 0.96) 0%, rgba(28, 22, 12, 0.96) 100%);
  border: 1px solid rgba(244, 227, 191, 0.22);
  box-shadow:
    0 24px 48px -16px rgba(0, 0, 0, 0.55),
    0 6px 12px -4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(244, 227, 191, 0.08);
  color: rgba(244, 227, 191, 0.92);
  font-family: var(--la-font-sans, 'Inter', sans-serif);
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px) scale(.98);
  transform-origin: top center;
  transition: opacity .2s cubic-bezier(.2,.7,.2,1),
              transform .2s cubic-bezier(.2,.7,.2,1);
}
.prelaunch-proof-pop[data-open="true"] {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0) scale(1);
}
/* Mobile variant: centered horizontally via translateX(-50%) set
   inline.  The transform above conflicts; we override here when the
   popover is centred. */
@media (max-width: 700px) {
  .prelaunch-proof-pop {
    transform: translateX(-50%) translateY(-6px) scale(.98);
  }
  .prelaunch-proof-pop[data-open="true"] {
    transform: translateX(-50%) translateY(0) scale(1);
  }
}
/* Tiny gold arrow pointing at the chip — purely visual, not interactive. */
.prelaunch-proof-pop::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, rgba(20, 16, 8, 0.96), rgba(28, 22, 12, 0.96));
  border-left: 1px solid rgba(244, 227, 191, 0.22);
  border-top: 1px solid rgba(244, 227, 191, 0.22);
}

.prelaunch-proof-pop__head {
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(244, 227, 191, 0.1);
  text-align: center;
}
.prelaunch-proof-pop__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 9.5px/1 var(--la-font-sans, 'Inter', sans-serif);
  text-transform: uppercase;
  letter-spacing: 1.6px;
  color: #fbeac0;
  background: rgba(244, 227, 191, 0.08);
  border: 1px solid rgba(244, 227, 191, 0.2);
  padding: 4px 10px;
  border-radius: 999px;
  margin-bottom: 8px;
}
.prelaunch-proof-pop__eyebrow::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #4ade80;
  box-shadow: 0 0 0 0 rgba(74, 222, 128, .5);
  animation: prelaunchProofPulse 2s ease-in-out infinite;
}
.prelaunch-proof-pop__title {
  margin: 0;
  font: 600 15px/1.25 var(--la-font-serif, 'Cormorant Garamond', Georgia, serif);
  color: #fbeac0;
  letter-spacing: 0;
}
.prelaunch-proof-pop__sub {
  margin: 4px 0 0;
  font: 500 11.5px/1.4 var(--la-font-sans, 'Inter', sans-serif);
  color: rgba(244, 227, 191, 0.55);
  font-variant-numeric: tabular-nums;
}

.prelaunch-proof-pop__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.prelaunch-proof-pop__row {
  display: grid;
  /* Name column gets slightly more weight than the bar so longer
     Bundesland names ("Nordrhein-Westfalen") don't truncate.  `minmax(0,...)`
     allows the columns to shrink below their content size if the
     viewport demands, instead of forcing the popover to overflow. */
  grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
}
.prelaunch-proof-pop__city {
  font: 600 13px/1.2 var(--la-font-sans, 'Inter', sans-serif);
  color: #fbeac0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.prelaunch-proof-pop__bar {
  position: relative;
  height: 5px;
  border-radius: 999px;
  background: rgba(244, 227, 191, 0.08);
  overflow: hidden;
}
.prelaunch-proof-pop__bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #d4ab68 0%, #fbeac0 100%);
  transition: width .5s cubic-bezier(.2,.7,.2,1);
}
.prelaunch-proof-pop__count {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.prelaunch-proof-pop__count strong {
  font: 700 13px/1 var(--la-font-sans, 'Inter', sans-serif);
  color: #fbeac0;
  display: inline-block;
}
.prelaunch-proof-pop__count small {
  font: 500 10.5px/1 var(--la-font-sans, 'Inter', sans-serif);
  color: rgba(244, 227, 191, 0.5);
  margin-left: 4px;
}
.prelaunch-proof-pop__foot {
  margin: 14px 0 0;
  padding-top: 10px;
  border-top: 1px solid rgba(244, 227, 191, 0.08);
  font: 400 10.5px/1.4 var(--la-font-sans, 'Inter', sans-serif);
  color: rgba(244, 227, 191, 0.45);
  text-align: center;
}

/* (c) "Reveal price" CTA chip inserted into each card panel — appears
   ONCE per card, gold-shimmer animation to draw the eye. */
.prelaunch-reveal {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(180, 140, 74, 0.4);
  background:
    linear-gradient(135deg, rgba(244, 224, 180, 0.9) 0%, rgba(212, 171, 104, 0.9) 100%);
  color: #2a1d09;
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 2px;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 6px 14px -6px rgba(180, 140, 74, 0.45);
  overflow: hidden;
  position: relative;
  transition: transform 200ms ease, box-shadow 200ms ease;
}
.prelaunch-reveal::before {
  /* Diagonal shimmer that sweeps every 4s — restrained, not gaudy. */
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg,
    transparent 30%,
    rgba(255, 248, 220, 0.7) 50%,
    transparent 70%);
  transform: translateX(-100%);
  animation: prelaunchShimmer 4s ease-in-out infinite;
}
@keyframes prelaunchShimmer {
  0%, 60% { transform: translateX(-100%); }
  100%    { transform: translateX(100%); }
}
.prelaunch-reveal:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 22px -8px rgba(180, 140, 74, 0.6);
}

/* (d) The previous build added a "Nur 10 Exemplare" line under each
   price — REMOVED per brand pivot: every La Tasí composition is
   a true one-of-a-kind (Unikat), not a 10-piece edition.  We never
   reintroduce that copy.  Brand voice = exclusive, not counted. */

/* =====================================================================
   7. SUCCESS SCREEN — post-submit referral + calendar layer
   =====================================================================
   Replaces the form sheet entirely after a successful POST /api/leads.
   Goal: monetise the moment of commitment.  The visitor's emotional
   peak is RIGHT after they enrolled — that's when they're most likely
   to share with friends.  We want this screen to feel celebratory but
   compact (no scrolling on mobile), with one clear primary action:
   "Verdopple deine Chance" via share.
   ===================================================================== */

/* Confetti-free check-mark — single SVG that draws itself once mounted.
   The animation is opt-in via [data-success-anim="1"] so we don't
   trigger it before the sheet is on screen. */
.prelaunch-modal__sheet--success {
  /* Tighten the sheet so the success screen fits without scroll on
     most viewports.  Form-sheet padding stays wider; success doesn't
     need the same vertical breathing room. */
  padding: 32px 28px 28px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  /* Pure opacity fade — DO NOT animate `transform` here.  The base
     .prelaunch-modal__sheet rule sets `transform: translate(-50%, -50%)`
     for viewport centring; if we override that with a translateY()
     keyframe, the sheet jumps to the bottom-right quadrant during the
     animation, then snaps back to centre when the animation finishes.
     That was the "block flies away and returns" bug the user reported.
     Fade-in alone gives a soft entrance without disturbing position. */
  animation: prelaunchSuccessFade 240ms ease-out;
}
@keyframes prelaunchSuccessFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.prelaunch-success {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.prelaunch-success__check {
  width: 64px;
  height: 64px;
  position: relative;
  filter: drop-shadow(0 4px 10px rgba(180, 140, 74, .35));
}
.prelaunch-success__check svg {
  display: block;
  overflow: visible;
}
.prelaunch-success__check-circle {
  stroke: var(--la-gold, #b48c4a);
  stroke-dasharray: 160;
  stroke-dashoffset: 160;
  transform-origin: center;
}
.prelaunch-success__check-tick {
  stroke: var(--la-gold, #b48c4a);
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
}
.prelaunch-modal__sheet--success[data-success-anim="1"] .prelaunch-success__check-circle {
  animation: prelaunchTickCircle 520ms cubic-bezier(.65,0,.45,1) forwards;
}
.prelaunch-modal__sheet--success[data-success-anim="1"] .prelaunch-success__check-tick {
  animation: prelaunchTickPath 400ms cubic-bezier(.65,0,.45,1) 320ms forwards;
}
@keyframes prelaunchTickCircle {
  to { stroke-dashoffset: 0; }
}
@keyframes prelaunchTickPath {
  to { stroke-dashoffset: 0; }
}

.prelaunch-success__headline {
  margin: 4px 0 0;
  font: 600 26px/1.15 var(--la-font-serif, 'Cormorant Garamond', Georgia, serif);
  color: var(--color-fg, #1c1813);
  letter-spacing: .005em;
  text-align: center;
}
.prelaunch-success__sub {
  margin: 0 0 6px;
  font: 400 14.5px/1.5 var(--la-font-sans, 'Inter', system-ui, sans-serif);
  color: rgba(28, 24, 19, .72);
  text-align: center;
  max-width: 36ch;
}
/* Personal seat badge — "Du bist Platz Nr. 84 von 100".  Gold pill so
   it reads as a small certificate of membership. */
.prelaunch-success__seat {
  margin: 8px 0 2px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 16px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(244, 224, 180, 0.45) 0%, rgba(212, 171, 104, 0.30) 100%);
  border: 1px solid rgba(180, 140, 74, 0.45);
  color: #6b5226;
  font: 700 13px/1 var(--la-font-sans, 'Inter', system-ui, sans-serif);
  letter-spacing: 0.6px;
  text-align: center;
  box-shadow: 0 4px 12px -6px rgba(180, 140, 74, 0.4);
}

/* ---------- Referral multiplier block ---------- */
.prelaunch-success__multiplier {
  width: 100%;
  margin-top: 6px;
  padding: 18px 18px 16px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(180, 140, 74, .07) 0%, rgba(180, 140, 74, .02) 100%);
  border: 1px solid rgba(180, 140, 74, .22);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prelaunch-success__multiplier-eyebrow {
  margin: 0;
  text-transform: uppercase;
  letter-spacing: .14em;
  font: 600 10.5px/1 var(--la-font-sans, 'Inter', sans-serif);
  color: var(--la-gold, #b48c4a);
}
.prelaunch-success__multiplier-title {
  margin: 0;
  font: 600 20px/1.2 var(--la-font-serif, 'Cormorant Garamond', Georgia, serif);
  color: var(--color-fg, #1c1813);
}
.prelaunch-success__multiplier-body {
  margin: 0 0 4px;
  font: 400 13.5px/1.5 var(--la-font-sans, 'Inter', sans-serif);
  color: rgba(28, 24, 19, .75);
}

/* The shareable link row — capsule with the URL + a copy chip on the
   right.  Tap-target is comfortable (44 px) for mobile thumbs. */
.prelaunch-share {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.prelaunch-share__link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 8px 8px 14px;
  background: rgba(255, 255, 255, .65);
  border: 1px solid rgba(28, 24, 19, .12);
  border-radius: 12px;
  min-height: 44px;
}
.prelaunch-share__url {
  flex: 1;
  font: 500 12.5px/1.3 ui-monospace, 'SF Mono', Menlo, monospace;
  color: rgba(28, 24, 19, .82);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  letter-spacing: -.01em;
}
.prelaunch-share__copy {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 12px;
  border-radius: 9px;
  border: 1px solid var(--la-gold, #b48c4a);
  background: var(--la-gold, #b48c4a);
  color: #fff;
  font: 600 12px/1 var(--la-font-sans, 'Inter', sans-serif);
  cursor: pointer;
  transition: background .15s, transform .12s;
  white-space: nowrap;
}
.prelaunch-share__copy:hover { background: #9d7937; }
.prelaunch-share__copy:active { transform: scale(.97); }
.prelaunch-share__copy[data-copied="1"] {
  background: #2c8a53;
  border-color: #2c8a53;
}

/* Messenger button row — wraps freely; each pill is a flex 1 baseline,
   minimum 110px so labels never truncate.  Wider gap (12px) so
   adjacent buttons don't share a tap-area that confuses fat fingers
   on small phones. */
.prelaunch-share__row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.prelaunch-share__btn {
  flex: 1 1 calc(50% - 6px);
  min-width: 110px;
  min-height: 48px;                  /* Apple HIG / Material tap target */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 13px 14px;
  border-radius: 12px;
  border: 1px solid rgba(28, 24, 19, .14);
  background: #fff;
  color: var(--color-fg, #1c1813);
  font: 600 13.5px/1 var(--la-font-sans, 'Inter', sans-serif);
  text-decoration: none;
  cursor: pointer;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: transform .12s, box-shadow .15s, border-color .15s, background .15s;
  /* Force the whole pill into a single click-target — without this,
     each child (svg, span) can become its own event target on iOS
     Safari which sometimes loses the href dispatch. */
  touch-action: manipulation;
}
.prelaunch-share__btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .22);
  border-color: rgba(28, 24, 19, .28);
}
.prelaunch-share__btn:active {
  transform: translateY(0);
  background: rgba(28, 24, 19, .04);
}
.prelaunch-share__btn--wa { color: #1f9c44; }
.prelaunch-share__btn--tg { color: #0088cc; }
.prelaunch-share__btn--em,
.prelaunch-share__btn--sms { color: #5d4a2a; }
.prelaunch-share__btn--more { color: var(--la-gold, #b48c4a); }
.prelaunch-share__btn svg,
.prelaunch-share__btn span {
  /* Pointer-events: none on children means every tap inside the pill
     resolves to the pill itself.  Critical on iOS Safari where SVG
     <path> elements can hijack tap targets and break href dispatch. */
  pointer-events: none;
  flex: 0 0 auto;
}

/* ---------- Friends progress ---------- */
.prelaunch-friends {
  margin-top: 4px;
  padding: 12px 14px;
  border-radius: 12px;
  background: rgba(28, 24, 19, .04);
}
.prelaunch-friends__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 8px;
}
.prelaunch-friends__label {
  font: 600 11px/1 var(--la-font-sans, 'Inter', sans-serif);
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(28, 24, 19, .65);
}
.prelaunch-friends__count {
  font: 500 13px/1 var(--la-font-sans, 'Inter', sans-serif);
  color: rgba(28, 24, 19, .85);
}
.prelaunch-friends__count strong {
  font-weight: 700;
  color: var(--la-gold, #b48c4a);
  font-size: 18px;
  transition: color .3s, transform .3s;
  display: inline-block;
}
.prelaunch-friends__bar {
  --friends-pct: 0%;
  position: relative;
  height: 6px;
  border-radius: 99px;
  background: rgba(28, 24, 19, .1);
  overflow: hidden;
}
.prelaunch-friends__bar > span {
  display: block;
  height: 100%;
  width: var(--friends-pct);
  border-radius: 99px;
  background: linear-gradient(90deg, var(--la-gold, #b48c4a) 0%, #d8b876 100%);
  transition: width .8s cubic-bezier(.2,.7,.2,1);
}
.prelaunch-friends__hint {
  margin: 8px 0 0;
  font: 400 11.5px/1.45 var(--la-font-sans, 'Inter', sans-serif);
  color: rgba(28, 24, 19, .58);
}
.prelaunch-friends[data-unlocked="1"] .prelaunch-friends__count strong {
  color: #2c8a53;
}
.prelaunch-friends[data-unlocked="1"]::after {
  content: '✓ ' attr(data-unlocked-label, 'Verdoppelte Chance freigeschaltet');
  display: block;
  margin-top: 6px;
  font: 600 12px/1.3 var(--la-font-sans, 'Inter', sans-serif);
  color: #2c8a53;
}

/* ---------- Mobile-only calendar button ---------- */
.prelaunch-success__calendar {
  width: 100%;
  margin-top: 8px;
  padding: 14px 16px;
  display: inline-flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  border-radius: 14px;
  border: 1px solid rgba(28, 24, 19, .12);
  background: linear-gradient(180deg, #ffffff 0%, #fbf6ee 100%);
  color: var(--color-fg, #1c1813);
  font-family: var(--la-font-sans, 'Inter', sans-serif);
  cursor: pointer;
  transition: transform .12s, box-shadow .15s, border-color .15s;
}
.prelaunch-success__calendar:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 16px -10px rgba(0,0,0,.25);
  border-color: rgba(180, 140, 74, .55);
}
.prelaunch-success__calendar:active { transform: translateY(0); }
.prelaunch-success__calendar-emoji {
  font-size: 26px;
  line-height: 1;
}
.prelaunch-success__calendar-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.prelaunch-success__calendar-text strong {
  font: 600 14px/1.2 var(--la-font-sans, 'Inter', sans-serif);
}
.prelaunch-success__calendar-text small {
  font: 400 12px/1.2 var(--la-font-sans, 'Inter', sans-serif);
  color: rgba(28, 24, 19, .6);
}
.prelaunch-success__calendar[data-added="1"] {
  background: linear-gradient(180deg, #f0f8f2 0%, #e3f0e8 100%);
  border-color: #2c8a53;
}
.prelaunch-success__calendar[data-added="1"] .prelaunch-success__calendar-text strong {
  color: #2c8a53;
}

/* ---------- Done button (close) ---------- */
.prelaunch-success__done {
  width: 100%;
  margin-top: 4px;
  padding: 12px 16px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: rgba(28, 24, 19, .55);
  font: 500 13px/1 var(--la-font-sans, 'Inter', sans-serif);
  cursor: pointer;
  transition: color .15s;
}
.prelaunch-success__done:hover { color: var(--color-fg, #1c1813); }

/* ---------- Mobile tweaks ---------- */
@media (max-width: 600px) {
  .prelaunch-modal__sheet--success { padding: 26px 20px 22px; }
  .prelaunch-success__headline { font-size: 23px; }
  .prelaunch-success__multiplier-title { font-size: 18px; }
  .prelaunch-share__btn { flex-basis: calc(50% - 4px); }
  .prelaunch-share__url { font-size: 11.5px; }
}

/* ---------- "You were invited" chip ----------
   Tiny golden pill at the top-right of the viewport when the visitor
   arrived via a friend's link.  Acknowledges the invite without being
   intrusive — increases trust + reinforces the social moment. */
html[data-referred="1"] body::after {
  content: '🎁 ' var(--prelaunch-referred-text, 'Du wurdest eingeladen');
  position: fixed;
  top: calc(var(--prelaunch-banner-h, 84px) + 12px);
  right: 16px;
  z-index: 120;
  padding: 7px 13px;
  border-radius: 99px;
  background: linear-gradient(135deg, #b48c4a 0%, #d8b876 100%);
  color: #fff;
  font: 600 11.5px/1 var(--la-font-sans, 'Inter', sans-serif);
  letter-spacing: .02em;
  box-shadow: 0 6px 16px -6px rgba(180, 140, 74, .55);
  animation: prelaunchInvitedPop 420ms cubic-bezier(.2,.7,.2,1) 600ms backwards;
  pointer-events: none;
}
@keyframes prelaunchInvitedPop {
  0%   { opacity: 0; transform: translateY(-8px) scale(.92); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}
@media (max-width: 600px) {
  html[data-referred="1"] body::after {
    top: calc(var(--prelaunch-banner-h, 84px) + 8px);
    right: 10px;
    font-size: 10.5px;
    padding: 6px 11px;
  }
}