@font-face {
  font-family: "Bricolage";
  src: url("/assets/bricolage.woff2") format("woff2-variations");
  font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Bricolage";
  src: url("/assets/bricolage-ext.woff2") format("woff2-variations");
  font-weight: 200 800; font-stretch: 75% 100%; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1E00-1E9F, U+20A0-20AB, U+20AD-20C0, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* Reif: kalter Wintermorgen */
  --frost: #E9EEF1;
  --frost-2: #D9E1E6;
  /* Winternacht: tiefes Indigo, kein Schwarz */
  --night: #141A2B;
  --night-2: #1C2438;
  --night-line: rgba(233, 238, 241, .12);
  /* Schiefer: Glutlings Körper, Tinte am Tag */
  --slate: #2A2F38;
  --slate-soft: #5B6472;
  /* Glut: nur was wirklich leuchtet */
  --ember: #FF9A3C;
  --ember-deep: #E86A17;
  /* Mütze */
  --cap: #C42A1F;
  --paper: #F6F4F0;

  --bg: var(--frost);
  --ink: var(--slate);
  --muted: var(--slate-soft);

  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --radius-l: 28px;
  --radius-m: 18px;
  --wrap: min(1160px, 100% - 40px);
  font-synthesis: none;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Bricolage", ui-sans-serif, system-ui, sans-serif;
  font-size: 18px; line-height: 1.55;
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  transition: background-color .2s linear;
}
img, canvas { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--ember); outline-offset: 3px; border-radius: 6px; }
.skip { position: absolute; left: -999px; top: 8px; background: var(--ink); color: var(--frost); padding: 8px 14px; border-radius: 99px; z-index: 50; }
.skip:focus { left: 12px; }
.wrap { width: var(--wrap); margin-inline: auto; }
.wrap--narrow { width: min(720px, 100% - 40px); }

/* ---------- Typo ---------- */
h1, h2, h3, .beat__big, .drop__title, .price > span {
  font-variation-settings: "opsz" 96;
  letter-spacing: -0.035em; line-height: 1.0; margin: 0; font-weight: 700;
}
.h2 { font-size: clamp(34px, 5vw, 60px); margin-bottom: 18px; }
h3 { font-size: 22px; letter-spacing: -0.01em; margin: 18px 0 6px; font-weight: 640; }
.lede { font-size: 19px; color: var(--muted); max-width: 46ch; margin: 0; }
.fine { font-size: 14px; color: var(--muted); margin: 10px 0 0; }

/* ---------- Buttons ---------- */
.btn {
  --b: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 22px; border-radius: 99px; border: 0;
  font: 600 16px/1 "Bricolage", sans-serif; text-decoration: none; cursor: pointer;
  background: var(--b); color: var(--frost);
  transition: transform .45s var(--spring), box-shadow .3s var(--ease), background-color .3s;
}
.btn:hover { transform: translateY(-2px) scale(1.02); }
.btn:active { transform: scale(.97); }
.btn--small { height: 38px; padding: 0 16px; font-size: 14px; }
.btn--big { height: 60px; padding: 0 34px; font-size: 18px; width: 100%; }
.btn--glow { background: var(--ember); color: #2A1404; box-shadow: 0 0 0 0 rgba(255, 154, 60, 0); }
.btn--glow:hover { box-shadow: 0 10px 40px -6px rgba(255, 154, 60, .65); }
.btn--ghost { background: transparent; color: currentColor; box-shadow: inset 0 0 0 1.5px currentColor; }
.btn[disabled] { cursor: default; background: var(--night-2); color: rgba(233, 238, 241, .55); box-shadow: inset 0 0 0 1px var(--night-line); transform: none; }

/* ---------- Nav (schwebende Pille) ---------- */
.nav {
  position: fixed; z-index: 20; top: 14px; left: 50%; translate: -50% 0;
  display: flex; align-items: center; gap: 14px;
  padding: 6px 6px 6px 16px; border-radius: 99px;
  width: min(640px, 100% - 24px);
  background: rgba(233, 238, 241, .72); color: var(--slate);
  backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4);
  box-shadow: inset 0 0 0 1px rgba(42, 47, 56, .08), 0 8px 30px -12px rgba(20, 26, 43, .25);
  transition: width .6s var(--spring), background-color .5s, color .5s;
}
.nav.is-night { background: rgba(28, 36, 56, .66); color: var(--frost); box-shadow: inset 0 0 0 1px var(--night-line); }
.nav.is-compact { width: min(460px, 100% - 24px); }
.nav__brand { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; letter-spacing: -0.02em; font-size: 19px; }
.nav__mark { width: 26px; height: 26px; }
.nav__mark rect { fill: currentColor; }
.nav__mark .ember { fill: var(--ember); }
.nav__mark .cap { fill: none; stroke: var(--cap); stroke-width: 3.2; stroke-linecap: round; }
.nav__status { margin-left: auto; display: flex; align-items: center; gap: 8px; font-size: 14px; opacity: .8; white-space: nowrap; }
.nav__status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ember); box-shadow: 0 0 10px var(--ember); animation: breathe 2.6s ease-in-out infinite; }
.nav .btn { --b: var(--slate); }
.nav.is-night .btn { --b: var(--frost); color: var(--slate); }
@keyframes breathe { 50% { opacity: .35; box-shadow: 0 0 2px var(--ember); } }

/* ---------- 1 · Ignite (gepinnte Szene) ---------- */
.ignite { position: relative; height: 460vh; }
.ignite__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4vw;
  padding: 90px max(20px, calc((100% - 1160px) / 2)) 40px;
}
.ignite__copy { position: relative; align-self: center; min-height: 52vh; }
.beat { position: absolute; inset: 0 0 auto 0; margin: 0; opacity: 0; will-change: opacity, transform; }
h1.beat, .beat__big { font-size: clamp(48px, 7.6vw, 112px); max-width: 9.5ch; }
.beat--1 { opacity: 1; }
.beat--3 .beat__big { margin-bottom: 22px; }
.beat--3 .lede { color: rgba(233, 238, 241, .72); }
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.ignite__media {
  margin: 0; position: relative;
  height: min(84vh, 900px); aspect-ratio: 9 / 16;
  border-radius: var(--radius-l); overflow: hidden;
  background: #0d0f15;
  box-shadow: 0 40px 80px -30px rgba(20, 26, 43, .55);
  transform: translateZ(0);
}
.ignite__media canvas, .ignite__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ignite__poster { z-index: 0; }
.ignite__media canvas { z-index: 1; }
/* Ränder lösen sich in die Nacht auf */
.ignite__media::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  box-shadow: inset 0 0 50px 18px var(--night);
  opacity: var(--dissolve, 0); border-radius: inherit;
}
.scroll-hint {
  position: absolute; left: 50%; bottom: 22px; translate: -50% 0; margin: 0;
  font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 10px;
  transition: opacity .4s;
}
.scroll-hint::before { content: ""; width: 1.5px; height: 26px; background: currentColor; animation: hint 1.8s var(--ease) infinite; transform-origin: top; }
@keyframes hint { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

/* ---------- Ab hier ist Nacht ---------- */
.steps, .deck-section, .specs, .drop, .faq { color: var(--frost); }
.steps .lede, .deck-section .lede, .specs .lede { color: rgba(233, 238, 241, .7); }

/* ---------- 2 · Schritte ---------- */
.steps { padding: 18vh 0 12vh; }
.steps__list { list-style: none; padding: 0; margin: 48px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; counter-reset: s; }
.step { counter-increment: s; }
.step img { border-radius: var(--radius-m); aspect-ratio: 4 / 5; object-fit: cover; width: 100%; background: var(--night-2); }
.step h3::before { content: counter(s); display: inline-grid; place-items: center; width: 28px; height: 28px; margin-right: 10px; border-radius: 50%; background: var(--ember); color: #2A1404; font-size: 15px; vertical-align: 3px; }
.step p { margin: 0; color: rgba(233, 238, 241, .7); max-width: 36ch; }

/* ---------- 3 · Fächer ---------- */
.deck-section { padding: 10vh 0 14vh; text-align: center; overflow: hidden; }
.deck-section .lede { margin-inline: auto; }
.deck { position: relative; height: 470px; margin-top: 56px; }
.card {
  --spread: 1;
  --off: calc(var(--i) - 2);
  position: absolute; left: 50%; top: 30px;
  width: 260px; aspect-ratio: 4 / 5.4; margin-left: -130px;
  border-radius: 24px; overflow: hidden; background: var(--night-2);
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .6), inset 0 0 0 1px var(--night-line);
  transform: translate(calc(var(--off) * 150px * var(--spread)), calc(abs(var(--off)) * 22px * var(--spread))) rotate(calc(var(--off) * 7deg * var(--spread)));
  transition: transform .55s var(--spring), box-shadow .3s;
  z-index: calc(10 - abs(var(--off)));
}
@supports not (top: calc(abs(-1px))) {
  .card { transform: translateX(calc(var(--off) * 150px)) rotate(calc(var(--off) * 7deg)); }
}
.card img { width: 100%; height: 100%; object-fit: cover; }
.deck:hover .card { --spread: 1.18; }
.card:hover { transform: translate(calc(var(--off) * 150px * var(--spread)), -22px) rotate(0deg) scale(1.04); z-index: 20; box-shadow: 0 40px 80px -20px rgba(255, 154, 60, .35), inset 0 0 0 1px var(--night-line); }
.deck.is-closed .card { --spread: 0.06; }

.card--cert { background: var(--paper); color: var(--slate); text-align: left; }
.cert { height: 100%; padding: 26px 24px; display: flex; flex-direction: column; position: relative;
  background: radial-gradient(120% 70% at 100% 0%, rgba(255, 154, 60, .14), transparent 60%), var(--paper); }
.cert__title { margin: 0; font-size: 15px; font-weight: 600; color: var(--slate-soft); }
.cert__no { margin: 6px 0 0; font-size: 76px; font-weight: 750; letter-spacing: -0.05em; line-height: .9; font-variation-settings: "opsz" 96; }
.cert__no span { font-size: 18px; letter-spacing: 0; font-weight: 600; margin-right: 4px; vertical-align: 40px; }
.cert__no small { font-size: 22px; letter-spacing: -0.02em; color: var(--slate-soft); }
.cert__meta { margin: auto 0 0; display: grid; gap: 8px; font-size: 14px; }
.cert__meta div { display: flex; justify-content: space-between; gap: 10px; border-top: 1px dashed rgba(42, 47, 56, .22); padding-top: 8px; }
.cert__meta dt { color: var(--slate-soft); }
.cert__meta dd { margin: 0; font-weight: 600; text-align: right; }
.cert__stamp { position: absolute; right: 18px; top: 92px; width: 74px; height: 74px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid var(--ember-deep); color: var(--ember-deep); font-weight: 700; font-size: 15px; rotate: -14deg; opacity: .85; }

/* ---------- 4 · Details ---------- */
.specs { padding: 10vh 0; }
.specs__grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px; align-items: start; }
.specs__list { margin: 0; }
.specs__list div { display: grid; grid-template-columns: 9.5em 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--night-line); }
.specs__list div:last-child { border-bottom: 1px solid var(--night-line); }
.specs__list dt { color: rgba(233, 238, 241, .55); }
.specs__list dd { margin: 0; }

/* ---------- 5 · Drop ---------- */
.drop { padding: 16vh 0 14vh; position: relative; isolation: isolate; }
.drop::before { content: ""; position: absolute; inset: 10% 0 0; z-index: -1;
  background: radial-gradient(50% 45% at 50% 40%, rgba(255, 154, 60, .16), transparent 70%); }
.drop__inner { text-align: center; max-width: 620px; }
.drop__title { font-size: clamp(96px, 18vw, 220px); letter-spacing: -0.06em; line-height: .85; color: var(--frost);
  text-shadow: 0 0 60px rgba(255, 154, 60, .25); }
.drop__sub { margin: 14px 0 34px; font-size: 22px; color: rgba(233, 238, 241, .75); }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 0 auto 40px; max-width: 460px; }
.countdown div { background: var(--night-2); border-radius: var(--radius-m); padding: 16px 6px 12px; box-shadow: inset 0 0 0 1px var(--night-line); }
.countdown span { display: block; font-size: 40px; font-weight: 700; letter-spacing: -0.04em; font-variant-numeric: tabular-nums; line-height: 1; }
.countdown small { display: block; margin-top: 6px; font-size: 13px; color: rgba(233, 238, 241, .55); }
.drop__offer { background: rgba(28, 36, 56, .6); border-radius: var(--radius-l); padding: 30px; box-shadow: inset 0 0 0 1px var(--night-line); text-align: left; }
.price { margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; }
.price > span { font-size: 48px; }
.price small { color: rgba(233, 238, 241, .6); font-size: 15px; }
.stock { margin: 0 0 22px; color: var(--ember); font-weight: 600; }
.drop__msg { margin: 10px 0 0; min-height: 1.4em; color: var(--ember); font-size: 15px; }
.drop__follow { margin-top: 30px; color: rgba(233, 238, 241, .65); }

/* ---------- 6 · FAQ ---------- */
.faq { padding: 6vh 0 14vh; }
.faq details { border-top: 1px solid var(--night-line); }
.faq details:last-of-type { border-bottom: 1px solid var(--night-line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 40px 20px 0; font-size: 20px; font-weight: 600; position: relative; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; position: absolute; right: 6px; top: 50%; width: 12px; height: 12px; margin-top: -8px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; rotate: 45deg; transition: rotate .45s var(--spring); }
.faq details[open] summary::after { rotate: 225deg; margin-top: -2px; }
.faq details p { margin: 0 0 22px; color: rgba(233, 238, 241, .72); max-width: 60ch; }

/* ---------- Footer ---------- */
.foot { background: var(--frost); color: var(--slate); padding: 48px 0 40px; }
.foot__inner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 32px; }
.foot__brand { margin: 0; font-weight: 700; font-size: 22px; letter-spacing: -0.02em; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 20px; font-size: 15px; }
.foot__small { margin: 0 0 0 auto; font-size: 14px; color: var(--muted); }

/* ---------- Mobil ---------- */
@media (max-width: 860px) {
  body { font-size: 17px; }
  .nav__status { display: none; }
  .nav .btn { margin-left: auto; }
  .ignite__stage { grid-template-columns: 1fr; grid-template-rows: 1fr; padding: 0; }
  .ignite__media { grid-area: 1 / 1; height: 100%; width: 100%; aspect-ratio: auto; border-radius: 0; }
  .ignite__copy { grid-area: 1 / 1; z-index: 3; align-self: end; min-height: 46vh; padding: 0 20px 64px; color: var(--frost); }
  .ignite__copy::before { content: ""; position: absolute; inset: -30vh -20px 0; z-index: -1; background: linear-gradient(transparent, rgba(13, 15, 21, .85) 55%); pointer-events: none; }
  .beat { inset: auto 20px 64px 20px; }
  h1.beat, .beat__big { font-size: clamp(40px, 11vw, 64px); }
  .scroll-hint { color: rgba(233, 238, 241, .7); }
  .steps__list { grid-template-columns: 1fr; }
  .deck { height: auto; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 20px 30px; margin-top: 32px; }
  .card, .deck:hover .card, .deck.is-closed .card { position: relative; left: auto; top: auto; margin: 0; flex: 0 0 72%; transform: none; scroll-snap-align: center; }
  .card:hover { transform: none; }
  .specs__grid { grid-template-columns: 1fr; gap: 10px; }
  .specs__list div { grid-template-columns: 1fr; gap: 2px; }
  .foot__small { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  html { scroll-behavior: auto; }
}