/* Startseite (/) und TV-Hilfe (/tv-hilfe): lange Seiten, dürfen (anders als TV und Handy) scrollen.
   Kurzes (Überschriften, Knöpfe, Hinweise) in der Pixelschrift und groß geschrieben, Fließtext in Space Grotesk. */
html, body { height: auto; min-height: 100%; overflow-x: hidden; overflow-y: auto; }
body { padding: 26px 16px 0; }
.page { max-width: 1080px; margin: 0 auto; }
a { color: var(--team-b); }
.px-text, .kicker, .btn-big, .code-form label, .code-form button, .scene-ctrl button, .need b, .tvway h3, .foot,
.top-nav a, .mobile-note, .step-no { font-family: var(--font-pixel); font-weight: 400; text-transform: uppercase; }

/* Kopf */
.top-nav { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 26px; }
.top-logo { display: block; line-height: 0; }
.top-logo img { display: block; height: clamp(30px, 4.5vw, 42px); width: auto; max-width: 70vw; }
.top-nav nav { display: flex; gap: 18px; flex-wrap: wrap; }
.top-nav nav a { font-size: 0.55rem; line-height: 1.8; color: var(--ink-dim); }

/* Hero */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 40px; align-items: center; }
.hero h1 {
  font-size: clamp(1.4rem, 3.3vw, 2.2rem); line-height: 1.45; color: var(--gold); margin-bottom: 18px;
  text-shadow: 4px 4px 0 var(--shadow), -2px -2px 0 var(--team-a);
}
.hero h1 span { display: block; color: var(--team-a); text-shadow: 4px 4px 0 var(--shadow), -2px -2px 0 var(--gold); }
.lead { font-size: 1.2rem; line-height: 1.5; margin: 0 0 26px; }
.cta { display: flex; flex-direction: column; gap: 22px; max-width: 420px; }
.btn-big {
  display: block; text-align: center; text-decoration: none; padding: 20px 18px; margin: 4px;
  background: var(--gold); color: var(--on-gold); font-size: 1.05rem; line-height: 1.5;
  box-shadow: var(--frame), 10px 10px 0 0 var(--shadow);
}
.btn-big:hover { filter: brightness(1.08); }
.btn-big:active { transform: translate(6px, 6px); box-shadow: var(--frame), 4px 4px 0 0 var(--shadow); }
.btn-big:focus-visible, .code-form button:focus-visible, .scene-ctrl button:focus-visible { outline: 4px dashed var(--team-b); outline-offset: 8px; }
.mobile-note { display: none; font-size: 0.5rem; line-height: 1.9; color: var(--ink-dim); margin: -8px 4px 0; text-align: center; }

/* "Ich hab einen Code" */
.code-form { padding: 16px 16px 18px; }
.code-form label { display: block; font-size: 0.65rem; line-height: 1.6; color: var(--ink-dim); margin-bottom: 12px; }
.code-row { display: flex; gap: 14px; }
.code-row input {
  flex: 1; min-width: 0; padding: 12px; border: none; border-radius: 0; background: var(--slot); color: var(--ink);
  font-family: var(--font-pixel); font-size: 1.3rem; letter-spacing: 0.3em; text-align: center; text-transform: uppercase;
  box-shadow: inset 0 0 0 4px var(--line);
}
.code-row input::placeholder { color: #7d77b8; }
.code-row input:focus { outline: none; background: #221f5c; }
.code-form button {
  flex: none; padding: 12px 16px; background: var(--team-b); color: var(--on-team-b); font-size: 0.8rem;
  box-shadow: inset 0 0 0 4px var(--line), 6px 6px 0 0 var(--shadow);
}
.code-form button:active { transform: translate(4px, 4px); box-shadow: inset 0 0 0 4px var(--line); }

/* Erklär-Szene */
.scene { padding: 12px; }
.scene-art { --box-bg: #1a1147; background: #1a1147; line-height: 0; }
.scene-svg { display: block; width: 100%; height: auto; }
.scene-cap { font-size: 1.02rem; line-height: 1.45; min-height: 3em; margin: 12px 4px 6px; }
.scene-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.scene-dots { display: flex; gap: 6px; }
.scene-dots i { width: 12px; height: 12px; background: var(--slot); box-shadow: inset 0 0 0 2px var(--ink-dim); }
.scene-dots i.on { background: var(--gold); box-shadow: inset 0 0 0 2px var(--gold); }
.scene-ctrl { display: flex; gap: 10px; flex-wrap: wrap; }
.scene-ctrl button { font-size: 0.55rem; line-height: 1.6; padding: 9px 11px; background: var(--stage-2); color: var(--ink); box-shadow: inset 0 0 0 3px var(--line); }
.scene-ctrl button:disabled { opacity: 0.6; cursor: default; }

/* Abschnitte */
section.block { margin-top: 70px; }
.kicker { color: var(--team-b); font-size: 0.6rem; line-height: 1.8; margin-bottom: 10px; }
section.block h2, .help-title { font-size: clamp(1rem, 2.6vw, 1.5rem); line-height: 1.5; color: var(--gold); text-shadow: 3px 3px 0 var(--shadow); margin-bottom: 22px; }
.needs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 26px; }
.need { padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; }
.need b { display: block; font-size: 0.7rem; line-height: 1.7; color: var(--gold); }
.need p, .tvway p, .tvway li { margin: 0; font-size: 1rem; line-height: 1.5; }
.ico { display: block; line-height: 0; min-height: 48px; }
.ico-svg { display: block; }

.hero-help { margin-bottom: 34px; max-width: 820px; }
.tvways { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px; }
.tvway { padding: 18px 18px 20px; }
.tvway-head { display: flex; align-items: center; gap: 16px; margin-bottom: 12px; }
.tvway h3 { font-size: 0.75rem; line-height: 1.6; color: var(--gold); }
.tvway ol { margin: 10px 0 0; padding-left: 22px; }
.tvway li { margin-bottom: 6px; }
.tvway kbd { font-family: var(--font-pixel); font-size: 0.65rem; text-transform: uppercase; background: var(--slot); padding: 2px 6px; border: 2px solid var(--ink-dim); }
.more-link { display: inline-block; margin-top: 22px; font-family: var(--font-pixel); font-size: 0.65rem; line-height: 1.8; text-transform: uppercase; }
.tip { margin-top: 26px; padding: 16px 18px; --box-bg: var(--slot); }
.tip p { margin: 0; line-height: 1.5; }
.tip b { font-family: var(--font-pixel); font-weight: 400; font-size: 0.65rem; text-transform: uppercase; color: var(--gold); margin-right: 8px; }

/* Fuß */
.foot { margin: 80px -16px 0; padding: 22px 16px 70px; font-size: 0.55rem; line-height: 2; color: var(--ink-dim); text-align: center; position: relative; }
.foot a { color: var(--ink-dim); margin: 0 6px; }
.foot .floor { position: absolute; height: 46px; z-index: -1; }

@media (max-width: 860px) {
  .hero { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .cta { max-width: none; }
  .needs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
  .tvways { grid-template-columns: minmax(0, 1fr); }
}
/* Handy: Code-Feld zuerst (wer die Adresse vom TV abtippt, will nur beitreten), Show starten mit Hinweis */
@media (max-width: 600px) {
  .code-form { order: -1; }
  .mobile-note { display: block; }
  .needs { grid-template-columns: minmax(0, 1fr); }
  .need { flex-direction: row; align-items: flex-start; }
  .need .ico { flex: none; width: 64px; }
  section.block { margin-top: 56px; }
}

/* ---- Szene: Bilder ein- und ausblenden, Animationen (Grundzustand = Endbild) ---- */
.scene-svg .frame { display: none; }
#scene[data-step="1"] .f1, #scene[data-step="2"] .f2, #scene[data-step="3"] .f3,
#scene[data-step="4"] .f4, #scene[data-step="5"] .f5, #scene[data-step="6"] .f6 { display: inline; }
.scene-svg .pop, .scene-svg .pulse, .scene-svg .hop, .scene-svg .hop-up { transform-box: fill-box; transform-origin: center; }
.scene-svg .d1 { animation-delay: 0.3s !important; } .scene-svg .d2 { animation-delay: 0.7s !important; }
.scene-svg .d3 { animation-delay: 1.1s !important; } .scene-svg .d4 { animation-delay: 1.5s !important; }
.frame .pop { animation: aPop 0.45s steps(6) both; }
/* Szene in SVG-Einheiten (1 = ein Pixel der Szene): eigene, kleine Wege statt aRise/aHop aus style.css */
@keyframes scRise { from { transform: translateY(6px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes scHop { 50% { transform: translateY(-2px); } }
.frame .rise { animation: scRise 0.4s steps(4) both; }
.frame .twinkle { animation: blink 1.2s steps(2) infinite; }
.frame .pulse { animation: pxPulse 0.8s steps(2) infinite; }
.frame .hop { animation: scHop 0.7s steps(2) infinite; }
@keyframes scSlideL { from { transform: translateX(-42px); } to { transform: none; } }
@keyframes scSlideR { from { transform: translateX(42px); } to { transform: none; } }
.frame .slide-l { animation: scSlideL 0.5s steps(5) both; }
.frame .slide-r { animation: scSlideR 0.5s steps(5) both; }
/* Handy scannt (Sucher blinkt), dann grün "OK" */
@keyframes scHideLate { 0%, 99% { opacity: 1; } 100% { opacity: 0; } }
@keyframes scShowLate { 0%, 99% { opacity: 0; } 100% { opacity: 1; } }
.frame .scan { opacity: 0; animation: scHideLate 1.6s both; }
.frame .joined { animation: scShowLate 1.6s both; }
/* Antwort antippen, dann richtige Antwort am TV grün */
.frame .tap { animation: scShowLate 2s both; }
.frame .reveal { animation: scShowLate 3.6s both; }
/* Punkte: alte Zahl weg, neue da, +4 steigt auf */
.frame .swap-out { opacity: 0; animation: scHideLate 1.4s both; }
.frame .swap-in { animation: scShowLate 1.4s both; }
@keyframes scHopUp { 0%, 30% { opacity: 0; transform: translateY(5px); } 60% { opacity: 1; transform: translateY(0); } 100% { opacity: 1; } }
.frame .hop-up { animation: scHopUp 1.4s steps(5) both; }
@keyframes scFall { from { transform: translateY(0); } to { transform: translateY(56px); } }
.frame .fall { animation: scFall 2.4s linear infinite; }
.frame .fall.d1 { animation-delay: -0.6s !important; } .frame .fall.d2 { animation-delay: -1.2s !important; } .frame .fall.d3 { animation-delay: -1.8s !important; }
@media (prefers-reduced-motion: reduce) {
  .scene-svg * { animation: none !important; }
  .frame .fall { display: none; }
}
/* Standbild (Teilen-Bild, tools/og-bild.js): ohne Animation */
.still .scene-svg * { animation: none !important; }
.still .frame .fall { transform: translateY(20px); }