:root{
  --bg:#F1F4F8;
  --navy:#000050;
  --ink:#141433;
  --red:#E30512;
  --red-dark:#D9112A;
  --line:rgba(0,0,80,.14);
  --sort-ms:1900ms;          /* muss zu SORT_MS in crowd.js passen */
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Segoe UI","Helvetica Neue",-apple-system,system-ui,Arial,sans-serif;
  font-size:clamp(15px,1.05vw,17px); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
body.playing{height:100%; overflow:hidden}
img{max-width:100%}

/* Ziergrafiken aus der Vorlage */
.deco{position:absolute; pointer-events:none; user-select:none; z-index:0}
.deco-corner{top:0; left:0; width:min(19vw,230px)}
.deco-transit{top:0; right:0; width:min(26vw,300px)}
.deco-skyline{left:22%; bottom:0; width:min(46vw,520px); opacity:.9}
.deco-tram{right:0; bottom:0; width:min(44vw,560px); opacity:.85}
body.playing .deco-skyline, body.playing .deco-tram{display:none}
body.playing .deco-corner{display:none}
body.playing .deco-transit{position:fixed; opacity:.4}

/* ---------- Startseite ---------- */
#landing{position:relative; z-index:2; max-width:1180px; margin:0 auto;
  padding:clamp(3rem,7vw,6rem) clamp(1.2rem,4vw,3rem) 0}
body.playing #landing{display:none}

.start-head{text-align:center; margin:0 0 clamp(2rem,5vw,3.5rem)}
.hello{margin:0; font-size:clamp(1.5rem,3.4vw,2.4rem); font-weight:700;
  color:#0B0B14; letter-spacing:-.01em}
.brand{margin:.1em 0 0; font-size:clamp(1.6rem,3.8vw,2.6rem); font-weight:700;
  color:var(--red); letter-spacing:-.01em; line-height:1.15}

.start-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.62fr);
  gap:clamp(1.5rem,4vw,3.5rem); align-items:start}
.start-text{max-width:44rem}
.start-text p{margin:0 0 1.15em}
.lead-in{font-weight:700; margin-bottom:.5em !important}
.frage-gross{font-weight:700; font-size:1.1em; color:var(--navy)}
.schluss{font-weight:700}

.werte{list-style:none; margin:.2rem 0 1.6rem; padding:0;
  display:grid; gap:.9rem}
.werte li{display:flex; align-items:center; gap:1.1rem;
  font-size:clamp(1.1rem,1.9vw,1.5rem); color:var(--ink)}
.werte img{width:2.6rem; height:2.2rem; object-fit:contain; object-position:center}

.punkte{margin:0 0 1.3em; padding-left:1.3em}
.punkte li{margin:.25em 0}

/* Die Belegschaft auf der Startseite: dieselben Teilbilder wie im Spiel,
   nur ruhig stehend und locker verteilt. */
.start-cast{position:relative; min-height:38rem; margin-top:-1rem}
.start-cast .slot{position:absolute; width:var(--w)}
.start-cast .fig{pointer-events:auto}
@media (max-width:820px){
  .start-grid{grid-template-columns:1fr}
  .start-cast{min-height:16rem; overflow:hidden}
}

.start-foot{position:relative; z-index:2; text-align:center;
  padding:clamp(2rem,6vw,4rem) 0 clamp(6rem,16vw,11rem)}

/* ---------- Menge ---------- */
#crowd{position:fixed; inset:0; pointer-events:none; z-index:1; display:none}
body.playing #crowd{display:block}

.slot{
  position:absolute; left:0; top:0;
  width:var(--w); z-index:var(--z,0);
  pointer-events:none;
  transition:transform var(--sort-ms) cubic-bezier(.34,.52,.28,1) var(--delay,0ms);
  will-change:transform;
}
.scaler{transform-origin:50% 100%}

/* Die Figur besteht aus Teilbildern; alle Masse in Prozent ihres Kastens,
   damit ein einziger Satz Keyframes fuer jede Groesse reicht. */
.fig{position:relative; width:100%; transform-origin:50% 100%;
  transition:filter 520ms ease var(--delay,0ms), opacity 520ms ease var(--delay,0ms)}
/* Nur die Figur selbst reagiert auf die Maus, nicht ihr ganzer Platz. */
body.playing .fig{pointer-events:auto}
.fig .leg, .fig .shin, .fig .foot, .fig .torso{position:absolute; inset:0}
.fig img{position:absolute; display:block; user-select:none}

.slot.others .fig{filter:grayscale(1) brightness(1.1) contrast(.9); opacity:.45}

/* Frontalansicht: einen Schritt liest man am angehobenen Fuss, nicht am
   seitlich ausgestellten Bein -- deshalb viel translateY und wenig rotate.
   Die Zyklen sind ganzzahlig, darum endet der Gang von selbst gerade. */
.slot.walking .leg, .slot.walking .shin, .slot.walking .foot,
.slot.walking .arm, .slot.walking .torso, .slot.walking .head{
  animation-duration:var(--gait,600ms); animation-delay:var(--phase,0ms);
  animation-iteration-count:infinite; animation-timing-function:ease-in-out;
}
.slot.walking .legL{animation-name:stepA}
.slot.walking .legR{animation-name:stepB}
.slot.walking .shinL{animation-name:kneeA}
.slot.walking .shinR{animation-name:kneeB}
.slot.walking .footL{animation-name:ankleA}
.slot.walking .footR{animation-name:ankleB}
.slot.walking .torso{animation-name:bob}
/* Arme und Kopf hinken dem Rumpf nach -- ohne diesen Versatz wirkt die
   ganze Figur wie aus einem Stueck. */
.slot.walking .armL{animation-name:swingB; animation-delay:calc(var(--phase,0ms) - var(--gait,600ms) * .07)}
.slot.walking .armR{animation-name:swingA; animation-delay:calc(var(--phase,0ms) - var(--gait,600ms) * .07)}
.slot.walking .head{animation-name:nod; animation-delay:calc(var(--phase,0ms) - var(--gait,600ms) * .1)}

@keyframes stepA{0%,50%,100%{transform:translateY(0) rotate(0)}
  25%{transform:translateY(-3.2%) rotate(-2.5deg)} 75%{transform:translateY(0) rotate(2deg)}}
@keyframes stepB{0%,50%,100%{transform:translateY(0) rotate(0)}
  25%{transform:translateY(0) rotate(-2deg)} 75%{transform:translateY(-3.2%) rotate(2.5deg)}}
@keyframes kneeA{0%,50%,100%{transform:rotate(0)} 25%{transform:rotate(8deg)}}
@keyframes kneeB{0%,50%,100%{transform:rotate(0)} 75%{transform:rotate(-8deg)}}
/* Der Fuss haengt beim Anheben nach und setzt flach wieder auf. */
@keyframes ankleA{0%,50%,100%{transform:rotate(0)} 18%{transform:rotate(-7deg)} 34%{transform:rotate(4deg)}}
@keyframes ankleB{0%,50%,100%{transform:rotate(0)} 68%{transform:rotate(7deg)} 84%{transform:rotate(-4deg)}}
/* Unter jedem Arm liegt seine Kopie im Rumpf. Sie deckt den Spalt zu, wird
   aber bei jeder Drehung an der Gegenkante selbst sichtbar -- nach innen
   genauso wie nach aussen. Deshalb schwingt der Arm nur so weit, wie der
   freigelegte Streifen schmaler bleibt als eine Armbreite. */
@keyframes swingA{0%,50%,100%{transform:rotate(0)}
  25%{transform:rotate(2.5deg)} 75%{transform:rotate(-2.5deg)}}
@keyframes swingB{0%,50%,100%{transform:rotate(0)}
  25%{transform:rotate(-2.5deg)} 75%{transform:rotate(2.5deg)}}
@keyframes bob{0%,50%,100%{transform:translate(0,0)}
  25%{transform:translate(.4%,-1%)} 75%{transform:translate(-.4%,-1%)}}
@keyframes nod{0%,50%,100%{transform:translateY(0) rotate(0)}
  25%{transform:translateY(.35%) rotate(.8deg)} 75%{transform:translateY(.35%) rotate(-.8deg)}}

/* Ein Gruss im Vorbeigehen: wer ueberfahren wird, huepft einmal. Die Figur
   behaelt dabei ihre Tiefe -- nach vorn geholt wuerde sie aus der Menge
   herausspringen. Die Arme bleiben ruhig, sonst zeigt sich ihre Unterlage
   im Rumpf als zweites Armpaar. */
.slot.hop .fig{animation:hop 720ms cubic-bezier(.32,.72,.38,1)}
.slot.hop .head{animation:hopHead 720ms cubic-bezier(.32,.72,.38,1)}

@keyframes hop{
  0%  {transform:translateY(0) scale(1,1)}
  12% {transform:translateY(0) scale(1.07,.93)}
  42% {transform:translateY(-17%) scale(.97,1.04)}
  70% {transform:translateY(0) scale(1.08,.92)}
  86% {transform:translateY(-4%) scale(.99,1.01)}
  100%{transform:translateY(0) scale(1,1)}
}
@keyframes hopHead{
  0%,100%{transform:translateY(0) rotate(0)}
  45%{transform:translateY(-1.5%) rotate(0)}
  78%{transform:translateY(.8%) rotate(0)}
}

/* Wer laeuft, lehnt sich leicht in die Richtung. */
.scaler{transition:transform var(--sort-ms) cubic-bezier(.34,.52,.28,1) var(--delay,0ms)}
.lean{transform-origin:50% 100%; transition:transform 520ms ease}
.slot.walking .lean{transform:rotate(var(--lean,0deg))}

/* ---------- Spielansicht ---------- */
#stage{position:fixed; inset:0; z-index:3; display:none;
  place-items:center; padding:0 6vw; text-align:center; pointer-events:none}
body.playing #stage{display:grid}
#stage > *{pointer-events:auto}

.panel{position:relative; grid-area:1/1; max-width:min(36rem,84vw);
  opacity:0; visibility:hidden; transition:opacity 380ms ease, visibility 380ms}
.panel.on{opacity:1; visibility:visible}
.panel.wide{max-width:min(48rem,90vw)}

/* Freistellung hinter dem Text. Endfarbe mit Alpha 0 statt "transparent",
   das mischt sonst ueber Schwarz und legt einen grauen Saum um den Text. */
.panel::before{
  content:""; position:absolute; inset:-3.5rem -4.5rem; z-index:-1;
  background:radial-gradient(ellipse at center,
    rgba(241,244,248,1) 0%, rgba(241,244,248,1) 54%,
    rgba(241,244,248,.92) 72%, rgba(241,244,248,0) 100%);
}

.wert{display:flex; align-items:center; justify-content:center; gap:.7rem;
  margin:0 0 1.6rem; font-size:.82rem; font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:var(--navy); opacity:.75}
.wert img{width:2rem; height:1.7rem; object-fit:contain}

.ask{margin:0 0 2.4rem; font-size:clamp(1.5rem,3.4vw,2.4rem); font-weight:700;
  line-height:1.2; letter-spacing:-.01em; color:#0B0B14}
.ask.small{font-size:clamp(1.2rem,2.4vw,1.7rem); margin-bottom:1.6rem}
.said{margin:0 0 1rem; font-size:clamp(1.15rem,2.4vw,1.6rem); font-weight:600;
  line-height:1.35; color:#0B0B14}
.tally{display:block; font-size:clamp(4rem,13vw,8rem); font-weight:700;
  line-height:.9; letter-spacing:-.04em; color:var(--red); margin:0 0 .5rem}
.lede{margin:0 0 1.6rem}
.hinweis{margin:1.4rem 0 0; font-size:.8rem; letter-spacing:.04em; opacity:.55}
#p-result .hinweis{margin:.2rem 0 1.9rem}

/* ---------- Bedienelemente ---------- */
button{font:inherit; cursor:pointer}
.pill{
  background:#fff; color:var(--navy); border:2px solid var(--navy);
  border-radius:999px; padding:.7em 2.4em;
  font-size:clamp(1rem,1.7vw,1.35rem); font-weight:700; letter-spacing:.01em;
  transition:background 160ms ease, color 160ms ease, transform 120ms ease;
}
.pill:hover{background:var(--navy); color:#fff}
.pill:active{transform:translateY(1px)}
.pill:focus-visible{outline:3px solid var(--red); outline-offset:3px}
.pill[disabled]{opacity:.45; cursor:default}
.choices{display:flex; gap:1rem; justify-content:center; flex-wrap:wrap}
.choices .pill{min-width:12rem; font-size:clamp(.95rem,1.4vw,1.1rem); padding:.65em 1.6em}

.ghost{background:none; border:0; color:var(--navy); font-weight:600;
  font-size:.8rem; letter-spacing:.06em; padding:.4em .2em; opacity:.65}
.ghost:hover{opacity:1; text-decoration:underline}

/* ---------- Ergebnisliste ---------- */
.results{list-style:none; margin:0 0 2rem; padding:0; text-align:left;
  max-height:58vh; overflow-y:auto}
.results.has-more{mask-image:linear-gradient(#000 84%, transparent)}
.results li{display:flex; align-items:center; gap:.9rem; flex-wrap:wrap;
  padding:.85rem .2rem; border-bottom:1px solid var(--line)}
.results li.hint{opacity:.5; border:0}
.results .ico{width:1.9rem; height:1.6rem; object-fit:contain; flex:none}
.r-pct{font-size:1.5rem; font-weight:700; color:var(--red); letter-spacing:-.02em;
  min-width:3.6rem; text-align:right}
.r-text{flex:1 1 14rem}
.r-text em{font-style:normal; font-weight:700}
.r-n{font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; opacity:.4}

/* ---------- Kopfzeile im Spiel ---------- */
#chrome{position:fixed; inset:1.4rem 2rem auto; z-index:60;
  display:flex; justify-content:space-between; align-items:center}
#chrome[hidden]{display:none}
#chrome::before{
  content:""; position:fixed; inset:0 0 auto; height:6rem; z-index:-1;
  background:linear-gradient(rgba(241,244,248,.97) 40%, rgba(241,244,248,0));
  pointer-events:none;
}
.mark{font-weight:700; color:var(--red); font-size:.9rem; white-space:nowrap}

@media (max-width:640px){
  #chrome{inset:.9rem 1rem auto}
  .mark{display:none}
  .deco-corner{width:34vw}
  .deco-transit{width:44vw}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .slot,.scaler{transition-duration:1ms; --delay:0ms !important}
  .fig{transition-duration:1ms}
  .slot.walking *, .slot.hop *, .slot.hop .fig{animation:none !important}
  .panel{transition-duration:1ms}
}