/* ------------------------------------------------------------------ *
 * Ausverkauft-Zustand und Warteliste. Wird von index.html und
 * order.html eingebunden; die Umschaltung macht stock.js über
 * data-stock="in|low|out" am <html>-Element.
 * ------------------------------------------------------------------ */

/* Solange der Lagerstand unbekannt ist, zeigen wir den normalen Kauf. */
.soldout-box { display: none; }
html[data-stock="out"] .soldout-box { display: block; }
html[data-stock="out"] .buy-gate,
html[data-stock="out"] .buy-actions,
html[data-stock="out"] .addon,
/* Bestellseite */
html[data-stock="out"] .gate,
html[data-stock="out"] #continue,
html[data-stock="out"] .stepper,
html[data-stock="out"] .promo,
html[data-stock="out"] #cart-locked,
html[data-stock="out"] .totals,
/* Schritt 2 der Bestellseite (Stripe-Formular) — ohne Kauf sinnlos */
html[data-stock="out"] .form-wrap { display: none !important; }

/* Ohne Stripe-Formular hat die Bestellseite nur noch eine Spalte —
   sonst klafft rechts die halbe Seite leer. */
html[data-stock="out"] .checkout { grid-template-columns: minmax(0, 1fr); }

/* Kaufknopf im Aufmacher: raus. „See it in action" bleibt — die
   Verkaufsseite soll vollständig lesbar bleiben, nur nicht kaufbar. */
html[data-stock="out"] .hero-cta .btn:not(.btn-ghost) { display: none; }

/* --------------------------------------------- Großes „Sold out" *
 * Steht genau dort, wo sonst ein Kaufknopf steht (Maik, 01.10.2026):
 * nicht klickbar, nicht zu übersehen, und es verschiebt nichts.
 * ------------------------------------------------------------------ */
.soldout-badge { display: none; }
html[data-stock="out"] .soldout-badge {
  display: inline-flex; align-items: center; gap: 13px;
  padding: 17px 28px; border: 2px solid var(--red);
  border-radius: var(--r-btn, 4px); background: rgba(255, 97, 33, .12);
  color: var(--red);
  font-family: var(--display); font-weight: 900; font-stretch: 112%;
  font-size: clamp(19px, 2.3vw, 26px); line-height: 1;
  letter-spacing: .03em; text-transform: uppercase;
}
.soldout-badge::before {
  content: ""; flex: 0 0 auto; width: 10px; height: 10px;
  border-radius: 50%; background: var(--red);
}
.soldout-badge small {
  font-family: var(--mono); font-size: 11px; font-weight: 500;
  letter-spacing: .16em; color: var(--text-mid);
}

.stock-left { display: none; }
html[data-stock="low"] .stock-left { display: flex; }

.stock-left {
  align-items: center; gap: 9px; margin: 18px 0 0;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--red);
}
.stock-left::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--red);
  animation: stockpulse 1.8s ease-in-out infinite;
}
@keyframes stockpulse { 0%, 100% { opacity: 1 } 50% { opacity: .3 } }

.soldout-box { margin-top: 26px; padding-top: 26px; border-top: 1px solid var(--rule); }
/* Das Wort selbst, so groß wie die Überschrift des Aufmachers. */
.soldout-box .word {
  margin: 0; font-family: var(--display); font-weight: 900; font-stretch: 125%;
  font-size: clamp(44px, 8vw, 86px); line-height: .92; letter-spacing: -.03em;
  text-transform: uppercase; color: var(--red);
}
.soldout-box h3 {
  margin: 12px 0 0; font-family: var(--display); font-weight: 900; font-stretch: 112%;
  font-size: clamp(22px, 3vw, 30px); line-height: 1.1; letter-spacing: -.02em; color: var(--text);
}
.soldout-box .why { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--text-mid); max-width: 42em; }

.wl-form { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.wl-form input[type="email"] {
  flex: 1 1 240px; min-width: 0; padding: 15px 16px;
  border: 1px solid var(--ink-300); border-radius: var(--r-btn-sm, 3px);
  background: var(--surface-2); color: var(--text);
  font-family: var(--body); font-size: 16px;
}
.wl-form input[type="email"]::placeholder { color: var(--text-low); }
.wl-form input[type="email"]:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.wl-form button {
  flex: 0 0 auto; padding: 15px 28px; border: 0; border-radius: var(--r-btn-sm, 3px);
  background: var(--amber); color: var(--on-amber);
  font-family: var(--body); font-size: 16px; font-weight: 600; cursor: pointer;
}
.wl-form button:disabled { opacity: .55; cursor: default; }
/* Honigtopf gegen Bots — für Menschen unsichtbar */
.wl-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.wl-msg { margin: 12px 0 0; font-size: 15px; line-height: 1.5; }
.wl-msg[hidden] { display: none; }
.wl-msg.ok  { color: var(--green); }
.wl-msg.bad { color: var(--red); }
.wl-note { margin: 12px 0 0; font-size: 13.5px; line-height: 1.5; color: var(--text-low); }
.wl-note a { color: var(--amber-ink); text-decoration: none; }

.wl-perks { list-style: none; margin: 20px 0 0; padding: 0; display: grid; gap: 9px; }
.wl-perks li { position: relative; padding-left: 26px; font-size: 15px; color: var(--text-mid); }
.wl-perks li::before {
  content: ""; position: absolute; left: 0; top: .45em; width: 13px; height: 8px;
  border-left: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(-45deg);
}

/* Kopfknopf: auf schmalen Geräten die kurze Fassung, nie umbrechen */
.topnav a.btn { white-space: nowrap; }
.topnav a.btn .short { display: none; }
@media (max-width: 560px) {
  .topnav a.btn .long  { display: none; }
  .topnav a.btn .short { display: inline; }
}