@font-face {
  font-family: "Archivo";
  src: url("fonts/archivo.woff2") format("woff2");
  font-weight: 400 900;
  font-stretch: 62% 100%;
  font-display: optional;
}
@font-face {
  font-family: "Caveat";
  src: url("fonts/caveat.woff2") format("woff2");
  font-weight: 600;
  font-display: optional;
}

/* Palette Anstoß: anthracite, pitch green for results, Telegram blue for the one action. */
:root {
  --green: #121614;
  --green-deep: #0B0E0C;
  --green-line: rgba(247, 247, 242, 0.12);
  --chalk: #F7F7F2;
  --chalk-dim: #C9CCC6;
  --chalk-faint: #A9AEA8;
  --accent: #FFD60A;
  --win-ink: #126E51;
  --loss-ink: #B3261E;
  --slate: #0B0E0C;
  --ink: #121614;
  --ink-dim: #4A514D;
  --paper: #F3F4EF;
  --paper-card: #FFFFFF;
  --paper-line: rgba(18, 22, 20, 0.12);
  --ink-accent: #126E51;
  --tg: #2AABEE;
  --tg-mid: #229ED9;
  --tg-deep: #1C8ACB;

  --font: "Archivo", "Arial Narrow", system-ui, sans-serif;
  --hand: "Caveat", "Segoe Print", "Bradley Hand", cursive;

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px;
  --r-sm: 6px; --r-md: 10px; --r-lg: 16px;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.55;
  color: var(--chalk);
  background: var(--green);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
h1, h2, h3, p, ol, ul, dl, dd, figure { margin: 0; }
a { color: inherit; }
:focus-visible { outline: 3px solid var(--tg-mid); outline-offset: 3px; border-radius: 4px; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.ph { padding: 0 4px; border: 1px dashed currentColor; border-radius: 4px; font-size: 0.92em; white-space: nowrap; }

.wrap { width: 100%; max-width: 1152px; margin: 0 auto; padding: 0 var(--s-5); }

/* Header: brand only, the page has one action and it lives in the hero */
.top { border-bottom: 1px solid var(--green-line); }
.top__inner { display: flex; align-items: center; height: 60px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand__mark { width: 34px; height: 34px; flex: none; }
.mark-board { fill: var(--green-deep); stroke: var(--chalk-faint); stroke-width: 1.5; }
.mark-chalk { fill: none; stroke: var(--chalk); stroke-width: 2.4; stroke-linecap: round; }
.mark-dash { stroke-dasharray: 3 3; }
.mark-arrow { fill: none; stroke: var(--accent); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.brand__word { font-weight: 900; font-stretch: 70%; font-size: 22px; letter-spacing: 0.02em; text-transform: uppercase; line-height: 1; }

/* Button: the Telegram action. White 20px/800 is WCAG large text, >= 3:1 on the mid blue (white on #2AABEE alone is 2.6:1). */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 0 var(--s-5);
  border-radius: 12px; border: 0;
  font: inherit; font-weight: 800; font-size: 20px; letter-spacing: 0.01em; text-decoration: none; text-align: center; line-height: 1.15;
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
  transition: transform 140ms var(--ease-out), background-color 160ms ease;
}
.btn:active { transform: scale(0.97); }
.btn--primary {
  background: linear-gradient(180deg, var(--tg) 0%, var(--tg-mid) 45%, var(--tg-deep) 100%); color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.18);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.3) inset, 0 12px 30px -12px rgba(34, 158, 217, 0.75);
}
.btn--block { width: 100%; }
.btn__icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform 160ms var(--ease-out); }
.tg-badge { width: 30px; height: 30px; flex: none; order: -1; stroke: none; clip-path: circle(50%); }
.tg-badge circle { fill: #fff; }
.tg-plane { fill: var(--tg-mid); }
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { background: linear-gradient(180deg, var(--tg-mid), var(--tg-deep)); }
  .link-public:hover { text-decoration-color: currentColor; }
  .qr-card__link:hover { color: var(--chalk); }
}

/* Surfaces and type */
.board { position: relative; background: var(--green); overflow: clip; }
.board--deep { background: var(--green-deep); }
.paper { background: var(--paper); color: var(--ink); }
.display { font-weight: 900; font-stretch: 64%; text-transform: uppercase; font-size: clamp(42px, 11.4vw, 100px); line-height: 0.9; letter-spacing: -0.005em; text-wrap: balance; overflow-wrap: anywhere; }
.display--md { font-size: clamp(40px, 10vw, 72px); }
.h2 { font-weight: 900; font-stretch: 68%; text-transform: uppercase; font-size: clamp(34px, 8.6vw, 56px); line-height: 0.95; text-wrap: balance; }
.lead { font-size: 18px; line-height: 1.5; color: var(--chalk-dim); max-width: 32em; text-wrap: pretty; }
.chalk { font-family: var(--hand); font-weight: 600; line-height: 1.1; }
.chalk--kicker { color: var(--accent); font-size: 28px; transform: rotate(-2.5deg); transform-origin: left center; margin-bottom: var(--s-3); display: inline-block; }
.chalk--ink { color: var(--ink-accent); font-size: 28px; transform: rotate(-2deg); transform-origin: left center; display: inline-block; margin-bottom: var(--s-2); }
.hand { font-family: var(--hand); font-weight: 600; font-size: 34px; line-height: 1; transform: rotate(-2deg); transform-origin: left center; }

/* Hero */
.hero { padding: var(--s-5) 0 var(--s-6); }
.hero__grid { position: relative; display: grid; gap: var(--s-6); }
.hero__grid > * { min-width: 0; }
.hero .display { margin-bottom: var(--s-3); }
.cta { margin-top: var(--s-4); }
.cta .btn { width: 100%; }
.cta__sub { margin-top: var(--s-3); display: flex; flex-wrap: wrap; gap: 0 var(--s-4); align-items: baseline; font-size: 15px; font-weight: 600; color: var(--chalk); }
.cta__tg { color: var(--chalk-dim); font-weight: 600; }
.final .cta__sub { justify-content: center; }
.hero__scene { position: relative; }

/* Zeugwart: the hero background art (picture in index.html). The stage keeps the picture's own 1672:941 ratio and is placed like
   object-fit: cover (container query units), so the lamp halo and the rain stay registered with the art at every size.
   Phones show the right side (hooded figure and lamp), the left side behind the text stays near black. */
.zw { position: absolute; inset: 0 0 auto 0; height: min(100%, 760px); overflow: hidden; container-type: size; pointer-events: none; background: var(--green-deep); --ox: 0.92; --oy: 0.5; }
.zw__stage { position: absolute; top: 0; left: 0; width: 100%; aspect-ratio: 1672 / 941; transform-origin: 86% 34%; }
@supports (width: 1cqw) {
  .zw__stage { width: max(100cqw, 177.68cqh); left: calc((100cqw - max(100cqw, 177.68cqh)) * var(--ox)); top: calc((100cqh - max(100cqw, 177.68cqh) / 1.7768) * var(--oy)); }
}
.zw__img { display: block; width: 100%; height: 100%; }
/* Resting state: no glow, no rain. motion/zeugwart.css switches them on. */
.zw__halo { position: absolute; left: 91%; top: 13.2%; width: 30%; aspect-ratio: 1; translate: -50% -50%; border-radius: 50%; opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle, rgba(245, 196, 0, 0.62) 0%, rgba(245, 196, 0, 0.22) 30%, rgba(245, 196, 0, 0) 66%); }
.zw__rain { display: none; position: absolute; inset: 0; }
.zw::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(11, 14, 12, 0.92) 0%, rgba(11, 14, 12, 0.82) 50%, rgba(11, 14, 12, 0.6) 100%), linear-gradient(0deg, var(--green) 0%, rgba(18, 22, 20, 0) 30%); }
.hero__grid { z-index: 1; }

/* Tipster: face, first name and one line of credibility, each only with its config value. Nobody is invented. */
.tipster { display: flex; align-items: center; gap: var(--s-3); margin-top: var(--s-4); font-size: 15px; color: var(--chalk); }
.tipster p { display: grid; }
.tipster__name { font-weight: 700; }
.tipster__cred { font-size: 14px; color: var(--chalk-dim); }
.tipster__ava { width: 44px; height: 44px; flex: none; border-radius: 50%; object-fit: cover; background: var(--green-deep); border: 1px solid var(--green-line); }
.slot { display: inline-block; border: 1px dashed var(--chalk-faint); }

/* QR code to the bot, desktop only. Drawn at build time as inline SVG. */
.qr-card { display: none; }
.qr { width: 120px; height: 120px; flex: none; background: #fff; border-radius: 8px; line-height: 0; overflow: hidden; }
.qr__svg { display: block; width: 100%; height: 100%; fill: #121614; }
.qr-card__title { font-weight: 800; }
.qr-card__hint { font-size: 14px; color: var(--chalk-dim); }
.qr-card__link { display: inline-block; margin-top: var(--s-1); font-size: 13px; color: var(--chalk-dim); overflow-wrap: anywhere; }

/* Bilanz under the hero CTA: three numbers, the last tips with their result, the rule and the archive. Only with real values. */
.mk-stats { margin-top: var(--s-5); padding: var(--s-3) var(--s-4); border: 1px solid var(--green-line); border-radius: var(--r-md); background: rgba(247, 247, 242, 0.04); }
.mk-stats__title { font-size: 13px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); }
.mk-stats__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); margin-top: var(--s-2); }
.mk-stats__row div { display: flex; flex-direction: column-reverse; }
.mk-stats__row dd { font-weight: 900; font-stretch: 70%; font-size: 30px; line-height: 1.05; overflow-wrap: anywhere; }
.mk-stats__row dt { font-size: 13px; font-weight: 700; color: var(--chalk-dim); }
.mk-stats__row .is-units dd { color: #3DDC97; }
.tipline { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--green-line); font-size: 14px; line-height: 1.35; }
.tipline__body { min-width: 0; }
.tipline__match { font-weight: 800; overflow-wrap: anywhere; }
.tipline__line { color: var(--chalk-dim); overflow-wrap: anywhere; }
.tipline__meta { font-size: 12px; color: var(--chalk-faint); }
.res { flex: none; display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px 2px 7px; border-radius: 999px; font-weight: 900; font-size: 13px; text-transform: uppercase; font-stretch: 80%; }
.res .ico { width: 13px; height: 13px; }
.res--win { background: rgba(61, 220, 151, 0.16); color: #3DDC97; }
.res--loss { background: rgba(255, 107, 94, 0.16); color: #FF8A80; }
.mk-stats__rule { margin-top: var(--s-3); font-size: 14px; color: var(--chalk-dim); }
.mk-stats__all { display: inline-flex; align-items: center; min-height: 44px; font-size: 15px; font-weight: 700; color: var(--chalk); text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: var(--chalk-faint); text-underline-offset: 3px; }
.mk-stats .ph { font-size: 15px; vertical-align: middle; white-space: normal; overflow-wrap: anywhere; }

/* Phone: the Kabine, the private group the CTA leads to, with one example tip in the format of the ticket */
.phone { margin: 0 auto; max-width: 340px; border-radius: 34px; padding: 10px; background: #050605; border: 1px solid rgba(247, 247, 242, 0.14);
  box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9), 0 0 0 6px rgba(247, 247, 242, 0.03); }
.phone__bar { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 26px 26px 0 0; background: #17212B; color: #fff; }
.phone__ava { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--accent); color: #121614; font-weight: 900; font-size: 15px; }
.phone__name { font-weight: 800; font-size: 15px; line-height: 1.2; }
.phone__sub { font-size: 12px; color: #8FA3B6; }
.phone__feed { padding: 14px 10px 16px; background: #0E1621; border-radius: 0 0 26px 26px; }
.post { max-width: 94%; padding: 10px 12px 9px; border-radius: 14px 14px 14px 4px; background: #182533; color: #F1F5F9; font-size: 13.5px; line-height: 1.4; }
.post__meta { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: #8FA3B6; }
.post__match { font-weight: 800; font-size: 16px; padding-bottom: 6px; border-bottom: 1px dashed rgba(241, 245, 249, 0.16); }
.post__rows { display: grid; padding: 4px 0; }
.post__rows > div { display: grid; grid-template-columns: 70px 1fr; align-items: center; min-height: 28px; }
.post__rows dt { font-weight: 700; color: #8FA3B6; }
.post__rows dd { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; color: #D5DEE7; }
.post__rows small { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; }
.post .bar { border-bottom-color: rgba(241, 245, 249, 0.4); }
.post__result { margin-top: 4px; padding: 6px 9px; border-radius: 8px; background: rgba(143, 163, 182, 0.12); font-size: 12.5px; font-weight: 700; color: #D5DEE7; }
.scene__note { width: fit-content; max-width: 100%; margin: var(--s-2) auto 0; padding: 2px 12px; border-radius: 999px; background: rgba(11, 14, 12, 0.72); font-size: 13px; color: var(--chalk-dim); text-align: center; }

/* Dotted fields of the example ticket: nothing is filled in, nothing is invented */
.bar { display: inline-block; height: 0; border-bottom: 2px dotted rgba(18, 22, 20, 0.35); }
.bar--w12 { width: 36px; } .bar--w20 { width: 52px; } .bar--w60 { width: 60%; } .bar--w70 { width: 70%; } .bar--w90 { width: 90%; }
.ico { flex: none; width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* Was du bekommst: the Kabine card dominant, the public channel a quiet line, the full ticket as the answer to "what does a tip look like" */
.get { padding: var(--s-8) 0; }
.get__grid { display: grid; gap: var(--s-7); align-items: start; }
.way h3 { font-size: 21px; font-weight: 800; line-height: 1.2; }
.way p { margin-top: var(--s-1); }
.ticks { list-style: none; padding: 0; display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.ticks li { display: flex; gap: 12px; align-items: center; font-weight: 600; }
.ticks li::before { content: ""; flex: none; width: 14px; height: 8px; border-left: 2.5px solid var(--ink-accent); border-bottom: 2.5px solid var(--ink-accent); transform: rotate(-45deg) translate(1px, -2px); }
.way--vip { margin-top: var(--s-5); padding: var(--s-5); border-radius: var(--r-lg); background: var(--green); color: var(--chalk); }
.way--vip p { color: var(--chalk-dim); }
.way--vip .ticks li::before { border-color: var(--accent); }
.way--vip .btn { margin-top: var(--s-5); }
.way--public { margin-top: var(--s-4); font-size: 15px; color: var(--ink-dim); }
.way--public b { color: var(--ink); }
.get__card { max-width: 440px; }
.get__card .hand { color: var(--ink); margin: 0 0 var(--s-4) var(--s-2); }
.get__card .ticket__note { color: var(--ink-dim); }

/* FAQ: native details, first question open */
.wrap--narrow { max-width: 760px; }
.faq { padding: var(--s-8) 0; border-top: 1px solid var(--paper-line); }
.faq .h2 { margin-bottom: var(--s-5); }
.faq details { border-bottom: 1px solid var(--paper-line); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 60px; padding: var(--s-3) 0; cursor: pointer; font-weight: 800; font-size: 18px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); transform: rotate(45deg) translateY(-3px); transition: transform 200ms var(--ease-out); }
.faq details[open] summary::after { transform: rotate(-135deg) translateY(-3px); }
.faq details p { padding: 0 0 var(--s-5); color: var(--ink-dim); max-width: 40em; text-wrap: pretty; }

/* Full ticket */
.ticket { position: relative; background: var(--paper-card); color: var(--ink); border-radius: var(--r-md); padding: var(--s-5) var(--s-5) var(--s-4); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, 0.45); border: 1px solid var(--paper-line); }
.ticket__meta { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-dim); }
.ticket__match { font-weight: 900; font-stretch: 72%; font-size: 30px; text-transform: uppercase; line-height: 1.05; padding-bottom: var(--s-4); border-bottom: 2px dashed var(--paper-line); }
.ticket__rows { display: grid; gap: 2px; padding: var(--s-3) 0; }
.ticket__rows > div { display: grid; grid-template-columns: 88px 1fr; align-items: center; min-height: 34px; }
.ticket__rows dt { font-size: 14px; font-weight: 700; color: var(--ink-dim); }
.ticket__rows dd { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-dim); flex-wrap: wrap; }
.ticket__rows small { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ticket__why { align-items: start !important; padding-top: 6px; }
.ticket__why dd { flex-direction: column; align-items: flex-start; gap: 10px; padding-top: 8px; }
.ticket__result { margin-top: var(--s-2); padding: 10px 12px; border-radius: var(--r-sm); background: rgba(18, 22, 20, 0.07); font-size: 14px; font-weight: 700; }
.outcomes { list-style: none; padding: 0; margin-top: var(--s-2); display: grid; gap: 6px; }
.outcome { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.outcome--win { color: var(--win-ink); }
.outcome--loss { color: var(--loss-ink); }
.outcome .bar { border-bottom-color: currentColor; opacity: 0.55; }
.outcome__units { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-weight: 700; }
.ticket__note { margin-top: var(--s-3); font-size: 13px; text-align: right; }

/* Steps: a real sequence, so numbered */
.how { padding: var(--s-8) 0; }
.how .h2 { margin-bottom: var(--s-6); }
.steps { list-style: none; padding: 0; display: grid; gap: 0; position: relative; }
.step { position: relative; display: grid; grid-template-columns: 48px 1fr; gap: var(--s-4); padding-bottom: var(--s-6); }
.step:not(:last-child)::before { content: ""; position: absolute; left: 23px; top: 52px; bottom: 6px; border-left: 2px dashed rgba(247, 247, 242, 0.22); }
.step__num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 2px solid var(--chalk-faint); font-family: var(--hand); font-weight: 600; font-size: 30px; line-height: 1; color: var(--accent); }
.step__head { display: flex; align-items: center; gap: var(--s-3); margin: 10px 0 var(--s-2); }
.step h3 { font-size: 21px; font-weight: 800; line-height: 1.2; }
.step p { color: var(--chalk-dim); max-width: 30em; text-wrap: pretty; }
.step .step__note, .step .step__alt, .step .step__bonus, .step .step__terms { margin-top: var(--s-2); font-size: 15px; font-weight: 700; color: var(--chalk); }
.step .step__terms { font-weight: 600; color: var(--chalk-dim); }
.step__logo { width: 96px; height: 32px; flex: none; object-fit: contain; background: #fff; border-radius: var(--r-sm); padding: 4px 8px; }
.step__pay { margin-top: var(--s-3); }
.step__pay p { font-size: 14px; font-weight: 700; color: var(--chalk-dim); }
.pills { list-style: none; padding: 0; margin: var(--s-2) 0 0; display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pill { padding: 4px 12px; border: 1px solid var(--chalk-faint); border-radius: 999px; font-size: 14px; font-weight: 700; line-height: 1.4; color: var(--chalk); }
.how__cta { margin-top: var(--s-6); }
.how__cta .btn { width: 100%; }

/* Final */
.final { padding: var(--s-9) 0; text-align: center; }
.final__inner { position: relative; display: flex; flex-direction: column; align-items: center; }
.final .display { margin-bottom: var(--s-3); }
.final .lead { margin-bottom: var(--s-6); }
.final .btn { width: 100%; max-width: 420px; }
.final__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 var(--s-5); margin-top: var(--s-1); }
.link-public { display: inline-flex; align-items: center; min-height: 44px; color: var(--chalk-dim); font-size: 15px; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-decoration-color: var(--chalk-faint); text-underline-offset: 3px; transition: text-decoration-color 160ms ease; }
.doodles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
/* On a phone the drawing is cropped to the sides: the doodles would show as half circles at the edges, so they stay on wider screens only. */
@media (max-width: 719px) { .doodles { display: none; } }
.doodles path, .doodles circle { vector-effect: non-scaling-stroke; fill: none; stroke: var(--chalk); stroke-opacity: 0.1; stroke-width: 2.2; stroke-linecap: round; }

/* Footer (text unchanged from v1) */
.foot { background: var(--slate); color: rgba(255, 255, 255, 0.74); padding: var(--s-7) 0 var(--s-8); font-size: 13px; line-height: 1.6; }
.foot a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.foot__legal { max-width: 62em; }
.foot__nav { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); margin-top: var(--s-5); font-size: 14px; font-weight: 700; }
.foot__nav a { display: inline-flex; align-items: center; min-height: 44px; }

/* Legal pages */
.legalpage__body { padding: var(--s-8) 0 var(--s-9); min-height: 60vh; }
.legalpage__body .h2 { margin-bottom: var(--s-5); }
.placeholder-box { padding: var(--s-5); border: 2px dashed #B4470A; border-radius: var(--r-md); background: var(--paper-card); margin-bottom: var(--s-5); font-weight: 600; }

/* Sticky CTA, phones only: appears once the hero button has scrolled away */
.sticky { display: none; }
@media (max-width: 719px) {
  .sticky {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 10px max(var(--s-4), env(safe-area-inset-right, 0px)) calc(10px + env(safe-area-inset-bottom, 0px)) max(var(--s-4), env(safe-area-inset-left, 0px));
    background: rgba(11, 14, 12, 0.94); border-top: 1px solid var(--green-line);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    transform: translateY(110%);
    transition: transform 180ms var(--ease-out);
  }
  .sticky.is-on { transform: translateY(0); transition-duration: 240ms; }
  .final { padding-bottom: var(--s-7); }
  /* Keyboard focus and anchor jumps stop above the bar, so it never hides what they bring into view. */
  html { scroll-padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 400px) {
  .top .wrap { padding: 0 var(--s-4); }
  .brand__word { font-size: 19px; }
}
@media (min-width: 720px) {
  .cta .btn { width: auto; }
  .steps { grid-template-columns: repeat(3, 1fr); gap: var(--s-5); }
  .step { grid-template-columns: 1fr; align-content: start; padding-bottom: 0; }
  .step:not(:last-child)::before { left: 60px; right: calc(-1 * var(--s-5) + 8px); top: 23px; bottom: auto; border-left: 0; border-top: 2px dashed rgba(247, 247, 242, 0.22); }
  .step__head { margin-top: var(--s-2); }
  .get__grid { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
  .how__cta { text-align: center; }
  .how__cta .btn { width: auto; min-width: 360px; }
  .how__cta .cta__sub { justify-content: center; }
}
@media (min-width: 1024px) {
  body { font-size: 18px; }
  .wrap { padding: 0 var(--s-6); }
  .top__inner { height: 72px; }
  .hero { padding: var(--s-6) 0 var(--s-7); }
  .zw { height: 100%; --ox: 0.78; }
  .zw::after { background: linear-gradient(90deg, rgba(11, 14, 12, 0.94) 0%, rgba(11, 14, 12, 0.86) 32%, rgba(11, 14, 12, 0.5) 52%, rgba(11, 14, 12, 0) 74%), linear-gradient(0deg, var(--green) 0%, rgba(18, 22, 20, 0) 14%); }
  .hero__grid { grid-template-columns: 1.25fr 1fr; align-items: center; gap: var(--s-7); }
  .hero .display { font-size: 80px; }
  .chalk--kicker { font-size: 34px; }
  .lead { font-size: 20px; }
  .how { padding: var(--s-9) 0; }
  .get, .faq { padding: var(--s-9) 0; }
  .phone { max-width: 360px; }
  .qr-card { display: flex; align-items: center; gap: var(--s-4); margin-top: var(--s-5); padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3); border: 1px solid var(--green-line); border-radius: var(--r-md); background: rgba(247, 247, 242, 0.04); max-width: 360px; }
}

@media (prefers-reduced-motion: reduce) {
  .btn, .btn__icon, .sticky, .link-public, .faq summary::after { transition: none; }
  .sticky.is-on { transition: none; }
}

/* motion/abflug.css */
/* Moment: Abflug (every Telegram button). The flight itself is WAAPI (motion/abflug.js); the pointer hover is the only CSS part. */
@media (prefers-reduced-motion: no-preference) and (hover: hover) and (pointer: fine) {
  .tg-plane { transition: transform 160ms var(--ease-out); }
  .btn--primary:hover .tg-plane { transform: translate(1.5px, -1.5px); }
}

/* motion/faq-open.css */
/* Moment: FAQ answer. Occasional, state indication: the answer settles in (200 ms ease-out) instead of popping.
   With reduced motion it simply opens, without any transition. */
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] p { transition: opacity 200ms var(--ease-out), transform 200ms var(--ease-out); }
  @starting-style { .faq details[open] p { opacity: 0; transform: translateY(-4px); } }
}

/* motion/zeugwart.css */
/* Moment: Zeugwart (hero background). Three quiet loops on top of the still art: a slow push-in, a thin rain, a breathing lamp.
   transform and opacity only, three layers with will-change, paused by motion/zeugwart.js when the hero is off screen or the tab hidden.
   Everything is gated by reduced motion and by `.js` (set by site.js): without JavaScript or with reduced motion the art stays still and the rain and glow are off. */
@media (prefers-reduced-motion: no-preference) {
  .js .zw__stage { animation: zw-drift 26s ease-in-out infinite alternate; will-change: transform; }
  .js .zw__halo { animation: zw-lamp 7.3s linear infinite; }
  .js .zw__rain { display: block; will-change: transform; }
  .js .zw__rain--a { inset: -300px 0 0 0; background: url("/img/rain-a.svg") 0 0 / 300px 300px; opacity: 0.4; animation: zw-rain-a 0.85s linear infinite; }
  .js .zw__rain--b { inset: -460px 0 0 0; background: url("/img/rain-b.svg") 0 0 / 460px 460px; opacity: 0.26; animation: zw-rain-b 1.6s linear infinite; }
  .js .zw.is-paused :is(.zw__stage, .zw__halo, .zw__rain) { animation-play-state: paused; }
  @keyframes zw-drift { from { transform: scale(1); } to { transform: scale(1.06); } }
  @keyframes zw-rain-a { to { transform: translate3d(0, 300px, 0); } }
  @keyframes zw-rain-b { to { transform: translate3d(0, 460px, 0); } }
  /* Irregular on purpose: a failing floodlight, not a pulse. */
  @keyframes zw-lamp { 0%, 100% { opacity: 0.5; } 9% { opacity: 0.34; } 12% { opacity: 0.66; } 27% { opacity: 0.46; } 30% { opacity: 0.28; } 32% { opacity: 0.6; } 51% { opacity: 0.52; } 64% { opacity: 0.4; } 67% { opacity: 0.68; } 70% { opacity: 0.44; } 84% { opacity: 0.56; } }
}