/* ============================================================
   Presspage KI-Deepfake-Krisensimulator
   Mobile-portrait first. Desktop just centres the column.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--pp-navy-abyss);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
}

body { min-height: 100dvh; display: flex; justify-content: center; }

#phone {
  position: relative;
  width: 100%;
  max-width: 430px;
  min-height: 100dvh;
  background: var(--page-bg);
  overflow-x: clip;
  isolation: isolate;
}

@media (min-width: 480px) {
  body { background: #04101c; }
  #phone { box-shadow: 0 0 120px rgba(0, 0, 0, 0.8); }
}

img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
h1, h2, h3, p, figure, blockquote { margin: 0; }
:focus-visible { outline: 2px solid var(--pp-green-bright); outline-offset: 3px; border-radius: 8px; }

/* ============================================================
   Typography
   ============================================================ */
.h1 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-h1);
  line-height: 1.15;
  letter-spacing: -0.01em;
  color: var(--text);
  text-wrap: balance;
}
.h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text);
}
.body { font-size: var(--fs-body); line-height: 1.55; color: var(--text-body); }
.muted { font-size: var(--fs-body); color: var(--text-muted); }
.label { font-size: var(--fs-label); font-weight: 500; color: var(--text-muted); }

.stack-20 > * + * { margin-top: 20px; }

/* Green underline rule between a headline and its body copy. */
.rule {
  width: 72px;
  height: 4px;
  border-radius: 2px;
  background: var(--pp-green);
  margin: 20px 0;
}

/* ============================================================
   Background texture
   ============================================================ */

/* Oversized Presspage "P" watermark, upper right, ~3% white. */
.watermark {
  position: absolute;
  top: -6vw;
  right: -18vw;
  width: 70vw;
  max-width: 300px;
  color: #fff;
  opacity: 0.03;
  pointer-events: none;
  z-index: 0;
}

/* Faint concentric rings bleeding off the edges. */
.rings {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.rings::before, .rings::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.04);
}
.rings::before {
  width: 150vw; height: 150vw;
  top: 8%; left: 50%;
  transform: translateX(-50%);
  box-shadow:
    0 0 0 1px transparent,
    inset 0 0 0 22vw rgba(0, 0, 0, 0);
}
.rings::after {
  width: 108vw; height: 108vw;
  top: 22%; left: 50%;
  transform: translateX(-50%);
}
.rings i {
  position: absolute;
  left: 50%;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.04);
  transform: translateX(-50%);
  transition: border-color 400ms ease, box-shadow 400ms ease;
}
.rings.is-bloom i,
.rings.is-bloom::before,
.rings.is-bloom::after {
  border-color: rgba(78, 216, 159, 0.30);
}

/* ============================================================
   Liquid glass
   ============================================================ */
.glass {
  position: relative;
  background: var(--glass-bg);
  border: var(--glass-border);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  border-radius: var(--radius-card);
}
.glass--green {
  border-color: var(--glass-border-green);
  box-shadow: var(--glass-shadow-green);
}

/* ============================================================
   Buttons
   ============================================================ */
.btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 56px;
  padding: 0 22px;
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 17px;
  font-weight: 600;
  transition: transform 120ms ease, filter 160ms ease, opacity 160ms ease;
}
.btn:active { transform: scale(0.97); }
.btn[disabled] { opacity: 0.5; pointer-events: none; }

.btn--primary {
  background: linear-gradient(180deg, #48C79B 0%, #33A07E 100%);
  color: #fff;
  box-shadow: 0 8px 26px rgba(61, 178, 140, 0.38), 0 0 34px rgba(61, 178, 140, 0.22);
}
.btn--primary.is-glowy {
  box-shadow: 0 8px 30px rgba(61, 178, 140, 0.55), 0 0 54px rgba(61, 178, 140, 0.40);
}
.btn--secondary {
  background: transparent;
  border: 1px solid var(--pp-green);
  color: var(--pp-green-bright);
}

/* Narrative/video CTA: label centred, chevron pinned right. */
.btn--nav { position: relative; }
.btn--nav .btn__end {
  position: absolute;
  right: 20px;
  display: flex;
  width: 22px;
}
.btn--nav .btn__start {
  position: absolute;
  left: 18px;
  display: flex;
  width: 26px;
}
.btn svg { width: 22px; height: 22px; flex: none; }

/* ============================================================
   Screen shell + transitions
   ============================================================ */
.screen {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
  animation: screen-in var(--dur-screen) var(--ease-spring) both;
}
@keyframes screen-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
.screen__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 0 var(--pad-page) calc(24px + var(--safe-bottom));
}
.stagger > * { animation: screen-in var(--dur-screen) var(--ease-spring) both; }
.stagger > *:nth-child(2) { animation-delay: 60ms; }
.stagger > *:nth-child(3) { animation-delay: 120ms; }
.stagger > *:nth-child(4) { animation-delay: 180ms; }

@media (prefers-reduced-motion: reduce) {
  .screen, .stagger > * { animation: fade-in 140ms linear both; }
  @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
  * { scroll-behavior: auto !important; }
}

/* ============================================================
   Logo lockup
   ============================================================ */
.lockup {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: calc(18px + var(--safe-top)) var(--pad-page) 0;
  position: relative;
  z-index: 2;
}
.lockup__img {
  height: 44px;
  width: auto;
  flex: none;
}
/* Only used if the artwork fails to load. */
.lockup .pp-tile {
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 11px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.38);
}
.lockup__word {
  font-size: 20px;
  font-weight: 300;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

/* ============================================================
   Simulator top chrome
   ============================================================ */
.chrome {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: calc(14px + var(--safe-top)) var(--pad-page) 14px;
  background: linear-gradient(180deg, rgba(11, 32, 56, 0.92) 55%, rgba(11, 32, 56, 0));
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.chrome__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -10px;
  color: #fff;
}
.chrome__btn svg { width: 24px; height: 24px; }
.chrome__right { display: flex; align-items: center; gap: 20px; margin-left: 6px; }
.chrome__right svg { width: 22px; height: 22px; }

/* Which question this is, out of six. Only on the scored screens. */
.chrome__count {
  flex: none;
  font-size: 15px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--pp-green-bright);
}

.progress {
  flex: 1;
  height: 10px;
  border-radius: 999px;
  background: #fff;
  overflow: hidden;
}
.progress__fill {
  height: 100%;
  border-radius: 999px;
  background: #2FA97F;
  transition: width 400ms ease;
}

/* ============================================================
   Countdown ring
   ============================================================ */
.countdown {
  position: relative;
  width: 60px;
  height: 60px;
  flex: none;
  color: var(--pp-green);
}
.countdown svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.countdown__track { fill: none; stroke: rgba(255, 255, 255, 0.18); stroke-width: 3; }
.countdown__fill {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  transition: stroke 300ms ease;
}
.countdown__inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.countdown__num {
  font-family: var(--font-head);
  font-size: 23px;
  font-weight: 700;
  color: var(--pp-green-bright);
  transition: color 300ms ease;
}
.countdown__unit { font-size: 10px; font-weight: 500; color: var(--pp-green); margin-top: 1px; }
.countdown.is-warning { color: var(--pp-amber); }
.countdown.is-warning .countdown__num,
.countdown.is-warning .countdown__unit { color: var(--pp-amber); }
.countdown.is-critical { color: var(--pp-red); }
.countdown.is-critical .countdown__num,
.countdown.is-critical .countdown__unit { color: var(--pp-red); }

.countdown-row { display: flex; justify-content: flex-end; padding: 4px var(--pad-page) 0; }

/* ============================================================
   Template A — narrative
   ============================================================ */
/* The photo keeps its natural aspect so the sticker/annotation art in each
   frame stays fully visible, exactly as composed in the mockups. */
.narr__photo { position: relative; }
.narr__photo img { width: 100%; height: auto; }
.narr__photo::after {          /* lower edge fades into the background */
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 70px;
  background: linear-gradient(180deg, rgba(11, 32, 56, 0), #0B2038);
  pointer-events: none;
}
.narr__card {
  position: relative;
  z-index: 2;
  margin: -20px var(--pad-page) 0;
  padding: 28px 24px calc(34px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  flex: 1;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}
.narr__card .btn { margin-top: auto; }
.narr__card .rule { margin-bottom: 22px; }
/* One narrative screen has no rule — keep the headline off the body copy anyway. */
.narr__card .h1 + .narr__body { margin-top: 18px; }
.narr__body > * + * { margin-top: 20px; }
/* Guaranteed breathing room above the CTA. `margin-top: auto` on the button
   collapses to zero once the content is taller than the card, which was
   leaving the last line of copy sitting right on top of Weiter. */
.narr__body { margin-bottom: 32px; }

/* Quote panel */
.quote {
  position: relative;
  margin-top: 20px;
  padding: 20px 20px 20px 26px;
  border-radius: var(--radius-row);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-left: 3px solid var(--pp-green);
}
.quote__glyph {
  font-family: var(--font-head);
  font-size: 44px;
  line-height: 0.7;
  color: var(--pp-green);
  display: block;
  margin-bottom: 6px;
}
.quote p { font-style: italic; font-size: 17px; line-height: 1.5; color: #fff; }

/* Small circled ! note row */
.note-row { display: flex; gap: 14px; align-items: flex-start; margin-top: 22px; }
.note-row svg { width: 26px; height: 26px; flex: none; color: var(--pp-green); margin-top: 1px; }
.note-row p { font-size: 17px; line-height: 1.45; color: var(--text-body); }

/* ============================================================
   Template B — question
   ============================================================ */
.q__head { padding: 8px var(--pad-page) 0; }
.q__options {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px var(--pad-page) 0;
}
.option {
  display: flex;
  align-items: center;
  gap: 20px;
  width: 100%;
  padding: 24px;
  text-align: left;
  border-radius: var(--radius-option);
  background: var(--glass-bg);
  border: 1px solid rgba(78, 216, 159, 0.18);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 18px 40px rgba(0, 0, 0, 0.35);
  transition: opacity 260ms ease, border-color 260ms ease, box-shadow 260ms ease, transform 120ms ease;
}
.option:active { transform: scale(0.985); }
.option__badge {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  flex: none;
  border: 1.5px solid var(--pp-green);
  background: transparent;
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 600;
  color: var(--pp-green-bright);
}
.option__badge--circle { border-radius: 50%; }
.option__badge--square { border-radius: 18px; }
.option__text { font-size: var(--fs-option); font-weight: 500; line-height: 1.35; color: #fff; }

.q__options.is-locked .option { pointer-events: none; }
.option.is-dimmed { opacity: 0.4; }
.option.is-chosen {
  border-color: var(--glass-border-green);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    0 0 0 1px rgba(78, 216, 159, 0.22),
    0 0 44px rgba(61, 178, 140, 0.30),
    0 18px 40px rgba(0, 0, 0, 0.35);
}

.feedback {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
  font-size: 18px;
  font-weight: 600;
  animation: screen-in 260ms var(--ease-spring) both;
}
.feedback svg { width: 22px; height: 22px; flex: none; }
.feedback--correct { color: var(--pp-green-bright); }
.feedback--partial { color: var(--pp-amber); }
.feedback--wrong   { color: var(--pp-red); }

/* Explicit way forward once a question is resolved. */
.q__next {
  padding: 26px var(--pad-page) calc(28px + var(--safe-bottom));
  animation: screen-in 280ms var(--ease-spring) both;
}
.q__next[hidden] { display: none; }

/* ============================================================
   Template D — video
   ============================================================ */
.video__wrap {
  padding: 4px var(--pad-page) calc(24px + var(--safe-bottom));
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* The frame takes the clip's own aspect ratio (set from videoWidth/videoHeight
   once metadata loads), so nothing is letterboxed or stretched. 9:16 until then. */
.video__frame {
  --vid-ratio: 0.5625;          /* 9:16 until the clip reports its own */
  position: relative;
  flex: none;
  width: min(100%, calc(min(66dvh, 620px) * var(--vid-ratio)));
  aspect-ratio: var(--vid-ratio);
  margin: 0 auto;
  border-radius: var(--radius-card-sm);
  overflow: hidden;
  background: radial-gradient(120% 90% at 30% 20%, #16405f 0%, #0c2338 55%, #071626 100%);
}
.video__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #04101c; }
.video__brackets { position: absolute; inset: 24px; pointer-events: none; }
.video__brackets span {
  position: absolute;
  width: 34px;
  height: 34px;
  border: 1.5px solid rgba(255, 255, 255, 0.4);
}
.video__brackets span:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.video__brackets span:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.video__brackets span:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.video__brackets span:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }

.video__play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  transition: opacity 260ms ease;
}
.video__play span {
  display: grid;
  place-items: center;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.25);
  color: rgba(255, 255, 255, 0.7);
}
.video__play span svg { width: 62px; height: 62px; }
.video__play.is-hidden { opacity: 0; pointer-events: none; }

.video__bar {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 26px 18px 16px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  /* Needs to stay legible over a bright frame. */
  background: linear-gradient(180deg, rgba(4, 16, 28, 0), rgba(4, 16, 28, 0.62) 45%, rgba(4, 16, 28, 0.92));
}
.video__bar-row { display: flex; align-items: center; gap: 12px; }
.video__bar-gap { flex: 1; }

/* Visually small controls, but each keeps a 44px hit area. */
.video__bar button {
  display: grid;
  place-items: center;
  min-width: 44px;
  min-height: 44px;
  margin: -11px -11px;
  color: inherit;
}
.video__bar button svg { width: 22px; height: 22px; }
.video__scrub {
  position: relative;
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  touch-action: none;
}
.video__scrub::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  height: 2px;
  background: rgba(255, 255, 255, 0.25);
  border-radius: 2px;
}
.video__scrub i {
  position: absolute;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--pp-green);
  transform: translateX(-50%);
}
.video__wrap .btn { width: 60%; margin: 22px auto 0; }

.asset-missing {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  text-align: center;
  color: var(--text-muted);
  font-size: 15px;
}

/* ============================================================
   Template D — swipe
   ============================================================ */
.swipe__stage {
  position: relative;
  flex: 1;
  display: grid;
  place-items: center;
  padding: 12px var(--pad-page) 0;
}
.swipe__card {
  position: relative;
  z-index: 2;
  width: 78vw;
  max-width: 330px;
  aspect-ratio: 0.72;
  /* Cap the height so the card cannot push Weiter under the fold on a short
     viewport (an iPhone in Safari with its bars showing is ~645px tall). */
  max-height: 52dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 30px 26px;
  text-align: center;
  border-radius: 32px;
  background: linear-gradient(150deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.16);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  box-shadow:
    inset 1.5px 1.5px 0 rgba(255, 255, 255, 0.5),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 30px 70px rgba(0, 0, 0, 0.5);
  touch-action: pan-y;
  cursor: grab;
  will-change: transform;
}
.swipe__card:active { cursor: grabbing; }
.swipe__card.is-settling { transition: transform 420ms var(--ease-spring); }
.swipe__card.is-answered {
  border-color: rgba(78, 216, 159, 0.75);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 0 0 1.5px rgba(78, 216, 159, 0.55),
    0 0 60px rgba(61, 178, 140, 0.45),
    0 30px 70px rgba(0, 0, 0, 0.5);
  transition: transform 420ms var(--ease-spring), box-shadow 400ms ease, border-color 400ms ease;
}
.swipe__q {
  font-family: var(--font-head);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  transition: font-size 300ms ease;
}
.swipe__card.is-answered .swipe__q { font-size: 22px; }
.swipe__hint { font-size: 17px; color: var(--text-muted); }

.swipe__verdict {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  animation: screen-in 300ms var(--ease-spring) both;
}
.swipe__verdict.is-correct { color: var(--pp-green-bright); }
.swipe__verdict.is-wrong   { color: var(--pp-red); }
.verdict-badge { width: 32px; height: 32px; flex: none; }
.verdict-badge.is-ok circle  { fill: var(--pp-green); }
.verdict-badge.is-bad circle { fill: rgba(228, 72, 63, 0.85); }

.swipe__pill {
  margin-top: 4px;
  padding: 10px 30px;
  border-radius: 999px;
  border: 1px solid var(--pp-green);
  color: var(--pp-green-bright);
  font-size: 18px;
  font-weight: 600;
  animation: screen-in 300ms 80ms var(--ease-spring) both;
}

.swipe__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 22px var(--pad-page) calc(22px + var(--safe-bottom));
}
.swipe__side {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(78, 216, 159, 0.40);
  background: rgba(61, 178, 140, 0.10);
  color: #fff;
  font-size: 18px;
  font-weight: 700;
  opacity: 0.72;
  transition: opacity 180ms ease, transform 180ms ease, background 180ms ease, border-color 180ms ease;
}
.swipe__side svg { width: 24px; height: 24px; color: var(--pp-green-bright); }
.swipe__side.is-previewed {
  opacity: 1;
  transform: scale(1.08);
  background: rgba(61, 178, 140, 0.26);
  border-color: var(--pp-green-bright);
}
.swipe__side[disabled] { opacity: 0.32; }
.swipe__side--left, .swipe__side--right { flex: 1; justify-content: center; }

.swipe__next {
  padding: 0 var(--pad-page) calc(26px + var(--safe-bottom));
  animation: screen-in 280ms var(--ease-spring) both;
}
.swipe__next[hidden] { display: none; }
.swipe__card.is-timedout { opacity: 0.55; }

/* ============================================================
   Homepage
   ============================================================ */
.home { position: relative; z-index: 1; padding-bottom: calc(48px + var(--safe-bottom)); }
.home section { padding: 0 var(--pad-page); }
.home__hero { position: relative; padding-top: 26px; }
/* The strip above the image — the logo lockup — used to be page-navy while the
   image itself is a slightly lighter navy, which drew a hard line across the
   top. This carries the image's own colour up past the top of the page. It
   overlaps the first few pixels of the image, which is harmless: same colour,
   and the image paints over it. It must not reach the image's faded bottom. */
.home__hero::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: calc(-1 * var(--pad-page));
  right: calc(-1 * var(--pad-page));
  top: -300px;
  height: 334px;
  background: var(--hero-navy);
}

/* Hero animation.
   The source GIF is 1200x700 with a lot of empty navy on the left, so the box
   takes the aspect ratio of the content region (post + green caption) and the
   image is anchored right. Cropping here rather than re-encoding keeps it animating. */
.hero__gif {
  position: relative;
  /* Full-bleed so its navy meets the page edge to edge, with the cut-off
     bottom of the post fading into the background rather than ending on a line. */
  width: calc(100% + 2 * var(--pad-page));
  margin: -8px calc(-1 * var(--pad-page)) 0;
  aspect-ratio: 750 / 665;
  overflow: hidden;
  mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 82%, transparent 100%);
}
.hero__gif img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 100% 50%;
}

.home__title { margin-top: 30px; }
.home__title .h1 { text-wrap: pretty; }
.home__sub { margin-top: 14px; font-size: 17px; line-height: 1.45; color: var(--text-body); }
.home__body { margin-top: 18px; }
.home__cta { margin-top: 24px; }
.home__cta .pp-mark { width: 26px; height: 26px; color: #fff; }

.home__cta-bottom { margin-top: 44px; }
.home__cta-bottom .pp-mark { width: 26px; height: 26px; color: #fff; }
.home__section-head { margin-top: 56px; }
.home__section-head .muted { margin-top: 6px; }

/* Bestenliste */
.lb { margin-top: 22px; padding: 12px; }
.lb__row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 76px;
  padding: 10px 14px 10px 8px;
  border-radius: var(--radius-row);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid transparent;
}
.lb__row + .lb__row { margin-top: 12px; }
.lb__rank {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  flex: none;
  border-radius: 50%;
  border: 1.5px solid var(--pp-green);
  font-family: var(--font-head);
  font-size: 26px;
  font-weight: 600;
  color: var(--pp-green-bright);
}
.lb__name {
  flex: 1;
  min-width: 0;
  font-size: clamp(15px, 4.3vw, 19px);
  font-weight: 500;
  color: #fff;
}
/* Usernames are single tokens — never let one break mid-word. */
.lb__name > span:first-child {
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.lb__score {
  flex: none;
  font-size: clamp(16px, 4.6vw, 20px);
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.lb__row--first {
  border-color: var(--pp-green);
  box-shadow: inset 0 0 30px rgba(61, 178, 140, 0.18), 0 0 26px rgba(61, 178, 140, 0.22);
}
.lb__row--first .lb__score { color: var(--pp-green-bright); }
.lb__row--you {
  border-color: var(--pp-green);
  box-shadow: inset 0 0 26px rgba(61, 178, 140, 0.16), 0 0 30px rgba(61, 178, 140, 0.35);
}
.lb__row--you .lb__name,
.lb__row--you .lb__score { color: var(--pp-green-bright); }
.lb__row--you .lb__name { font-weight: 600; }
.lb__sublabel { display: block; font-size: var(--fs-label); font-weight: 500; color: var(--pp-green); margin-top: 3px; }
.lb__skeleton { height: 76px; border-radius: var(--radius-row); background: rgba(255, 255, 255, 0.04); }
.lb__skeleton + .lb__skeleton { margin-top: 12px; }

/* Preise accordions */
.prizes { margin-top: 22px; display: flex; flex-direction: column; gap: 16px; }
.prize {
  position: relative;
  border-radius: var(--radius-card-sm);
  padding: 20px;
  text-align: left;
  width: 100%;
}
/* Chevron floats in the corner so long German compounds get the full width.
   `Kommunikationskongress` is the widest single word in the app and has to fit
   on one line at 375px — the padding, art size and tracking below are set by it. */
.prize__top { display: flex; align-items: center; gap: 14px; padding-right: 26px; }
.prize__art {
  width: 88px; height: 88px; flex: none;
  display: grid; place-items: center;
  position: relative;
}
.prize__art img,
.prize__art .prize__drawn { width: 100%; height: 100%; object-fit: contain; }
.prize__blob {
  position: absolute;
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--pp-green);
}
.prize__glyph { position: relative; color: var(--pp-purple); }
.prize__glyph svg { width: 46px; height: 46px; transform: translate(5px, -5px); }
.prize__text { flex: 1; min-width: 0; }
.prize__kicker { font-size: 17px; font-weight: 500; color: var(--pp-green); }
.prize__title {
  font-size: clamp(17px, 4.8vw, 20px);
  font-weight: 700;
  line-height: 1.25;
  color: #fff;
  margin-top: 3px;
  /* Long compounds break at the soft hyphens defined in HYPHENATION, so
     `Kommunikationskongress` splits after `Kommunikations-` rather than
     wherever it happens to run out of room. `anywhere` is the last-resort guard. */
  hyphens: manual;
  overflow-wrap: anywhere;
}
.prize__chev {
  position: absolute;
  top: 50%;
  right: 16px;
  margin-top: -13px;
  color: var(--pp-green);
  transition: transform 260ms ease;
}
.prize.is-open .prize__chev { top: 56px; margin-top: 0; }
.prize__chev svg { width: 26px; height: 26px; }
.prize.is-open .prize__chev { transform: rotate(180deg); }
.prize__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 300ms var(--ease-spring); }
.prize.is-open .prize__panel { grid-template-rows: 1fr; }
.prize__panel > div { overflow: hidden; }
.prize__body { padding-top: 18px; font-size: 17px; line-height: 1.55; color: var(--text-body); opacity: 0; transition: opacity 220ms ease; }
.prize.is-open .prize__body { opacity: 1; transition-delay: 90ms; }

/* ============================================================
   Bottom-sheet registration form
   ============================================================ */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: rgba(4, 14, 24, 0.66);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: fade 240ms ease both;
}
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

.sheet {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: 61;
  width: 100%;
  max-width: 430px;
  transform: translateX(-50%);
  max-height: 92dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 12px 22px calc(26px + var(--safe-bottom));
  border-radius: 28px 28px 0 0;
  border-bottom: 0;
  animation: sheet-up 380ms var(--ease-spring) both;
}
@keyframes sheet-up { from { transform: translate(-50%, 100%); } to { transform: translate(-50%, 0); } }
.sheet.is-dragging { animation: none; transition: none; }
.sheet.is-closing { animation: sheet-down 260ms ease both; }
@keyframes sheet-down { to { transform: translate(-50%, 100%); } }

.sheet__grab {
  width: 44px; height: 5px;
  margin: 4px auto 18px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.26);
}
.sheet__title { font-family: var(--font-head); font-size: 24px; font-weight: 700; margin-bottom: 4px; }
.sheet__fields { display: flex; flex-direction: column; gap: 16px; margin: 22px 0 24px; }

.field label { display: block; font-size: var(--fs-label); font-weight: 500; color: var(--text-muted); margin-bottom: 7px; }
.field input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border-radius: var(--radius-input);
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: #fff;
  font: 400 17px var(--font-body);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}
.field input::placeholder { color: rgba(255, 255, 255, 0.4); }
.field input:focus {
  outline: none;
  border-color: var(--pp-green);
  box-shadow: 0 0 0 1px var(--pp-green), 0 0 18px rgba(61, 178, 140, 0.35);
}
.field.has-error input { border-color: var(--pp-red); }
.field__helper { margin-top: 7px; font-size: var(--fs-label); color: var(--text-muted); }
.field__error { margin-top: 7px; font-size: var(--fs-label); font-weight: 500; color: var(--pp-red); }

/* Advisory line under a field — never an error, never blocks submitting. */
.field__note { margin-top: 7px; font-size: var(--fs-label); line-height: 1.45; }
.field__note--info { color: var(--text-muted); }
.field__note--ok { color: var(--pp-green-bright); font-weight: 500; }

/* ---- Data protection block in the registration sheet ---- */
.consent { margin-top: 22px; margin-bottom: 26px; }
.consent__notice {
  font-size: var(--fs-label);
  line-height: 1.5;
  color: var(--text-muted);
}

.consent__opt {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-top: 16px;
  /* 44px tap target without making the row look oversized */
  padding: 8px 0;
  font-size: var(--fs-label);
  line-height: 1.5;
  color: var(--text-body);
  cursor: pointer;
}
.consent__opt input[type="checkbox"] {
  flex: none;
  width: 24px;
  height: 24px;
  margin: 1px 0 0;
  /* The native control is nearly invisible on this navy; give it a real edge. */
  appearance: none;
  -webkit-appearance: none;
  border: 1.5px solid rgba(255, 255, 255, 0.45);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}
.consent__opt input[type="checkbox"]::after {
  content: "";
  width: 12px;
  height: 7px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
  opacity: 0;
  transition: opacity 120ms ease;
}
.consent__opt input[type="checkbox"]:checked {
  background: var(--pp-green);
  border-color: var(--pp-green-bright);
}
.consent__opt input[type="checkbox"]:checked::after { opacity: 1; }

/* ---- Closing block under the Rangliste ---- */
.result__closing { margin-top: 26px; }
.result__saved {
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 700;
  color: var(--pp-green-bright);
  margin-bottom: 14px;
}
.result__closing .body + .body { margin-top: 14px; }

.result__link {
  margin-top: 22px;
  padding: 18px;
  border-radius: var(--radius-card-sm);
  border: 1px solid rgba(78, 216, 159, 0.28);
  background: rgba(61, 178, 140, 0.08);
}
.result__linktitle {
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pp-green-bright);
}
.result__linkbody {
  margin-top: 6px;
  font-size: var(--fs-label);
  line-height: 1.5;
  color: var(--text-muted);
}
.result__linkurl {
  display: block;
  margin-top: 8px;
  /* it is an anchor, so give it a real tap target */
  min-height: 44px;
  padding: 8px 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--text-body);
  overflow-wrap: anywhere;
  text-decoration: none;
}
.result__copy {
  margin-top: 14px;
  min-height: 44px;
  width: 100%;
  border-radius: 999px;
  border: 1px solid var(--pp-green);
  color: var(--pp-green-bright);
  font-size: 15px;
  font-weight: 600;
  transition: background 200ms ease, color 200ms ease;
}
.result__copy.is-done { background: var(--pp-green); color: #fff; }

/* ============================================================
   Quit modal
   ============================================================ */
.modal {
  position: fixed;
  left: 50%;
  top: 50%;
  z-index: 61;
  width: calc(100% - 48px);
  max-width: 360px;
  transform: translate(-50%, -50%);
  padding: 26px 24px 22px;
  text-align: center;
  animation: modal-in 260ms var(--ease-spring) both;
}
@keyframes modal-in {
  from { opacity: 0; transform: translate(-50%, -46%) scale(0.96); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
.modal__title { font-family: var(--font-head); font-size: 21px; font-weight: 700; }
.modal__body { margin-top: 10px; font-size: 16px; color: var(--text-body); }
.modal__actions { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }

/* ============================================================
   Result screen
   ============================================================ */
.result { padding: 26px var(--pad-page) calc(28px + var(--safe-bottom)); }
.result .h1 { font-size: clamp(26px, 7.2vw, 33px); }
.result__sub { margin-top: 12px; }
.result__card { margin-top: 14px; padding: 12px; }
.result .btn { margin-top: 22px; }

.result__boardhead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-top: 26px;
}
.result__boardtitle {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  color: #fff;
}
.result__party { font-size: 24px; line-height: 1; }
/* The whole board, scrollable end to end, opening centred on the player. */
.result__scroller {
  max-height: min(58dvh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(78, 216, 159, 0.45) transparent;
  /* fade the list into the card at both ends */
  mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 18px), transparent 100%);
}
.result__scroller::-webkit-scrollbar { width: 5px; }
.result__scroller::-webkit-scrollbar-thumb {
  background: rgba(78, 216, 159, 0.45);
  border-radius: 999px;
}
.result__list { padding: 6px 4px; }

/* ============================================================
   Framework screen
   ============================================================ */
/* One uninterrupted column — no cards, the copy runs into the graphic. */
.fw { padding: 12px var(--pad-page) calc(28px + var(--safe-bottom)); }
.fw__badge {
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  border: 1px solid rgba(78, 216, 159, 0.55);
  background: rgba(61, 178, 140, 0.10);
  color: var(--pp-green);
}
.fw__badge svg { width: 38px; height: 38px; }
.fw .rule { margin: 20px 0 22px; }
.fw__title { font-size: clamp(22px, 6vw, 27px); }
.fw__body { margin-top: 22px; }
.fw__body > * + * { margin-top: 20px; }

.fw__scrollcue {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 48px;
  margin-top: 22px;
  color: var(--pp-green);
  animation: bob 1.8s ease-in-out infinite;
}
.fw__scrollcue svg { width: 34px; height: 34px; }
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(7px); } }
@media (prefers-reduced-motion: reduce) { .fw__scrollcue { animation: none; } }

.fw__wheel { width: 100%; height: auto; display: block; margin-top: 10px; }
/* The supplied framework artwork, 1200x1200 with its own navy background and
   white hub. That navy is lighter than the page behind it, so rather than
   fighting the mismatch the image is presented as a card. Comfortably
   oversampled at this width even on a 3x display. */
.fw__wheelimg {
  display: block;
  width: 100%;
  max-width: 420px;
  height: auto;
  margin: 10px auto 0;
  border-radius: var(--radius-card);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.34);
}
.fw__wheel .node-title { font: 700 15px var(--font-body); fill: #12303F; }
.fw__wheel .node-desc  { font: 400 12.5px var(--font-body); fill: #1B3A4E; }
.fw__wheel .node-desc tspan.b { font-weight: 700; }
.fw__wheel .ribbon-text { font: 700 12px var(--font-body); fill: #fff; letter-spacing: 0.005em; }
/* Quiet text link for the framework download — deliberately not a button, so
   the green CTA below it is the only thing competing for attention. */
.fw__download {
  display: block;
  margin-top: 24px;
  min-height: 44px;              /* keeps a comfortable tap target */
  padding: 11px 0;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  color: var(--pp-green-bright);
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
}
.fw__download:active { opacity: 0.7; }

.fw__actions { margin-top: 14px; display: flex; flex-direction: column; gap: 12px; }
.fw__actions .btn svg { width: 24px; height: 24px; }
/* Returning home is the quieter of the two buttons. */
.fw__actions .btn--secondary {
  min-height: 50px;
  font-size: 16px;
  border-color: rgba(78, 216, 159, 0.42);
  color: var(--text-body);
}
.fw__actions .btn--secondary svg { color: var(--pp-green); }

/* ============================================================
   Utilities
   ============================================================ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.center { text-align: center; }