/* Spurenlage – Aussehen von Spielbildschirm und Rollenansicht.
   Der Abend: dieselbe Akte wie auf der Website, nur im abgedunkelten Raum unter
   einer Lampe. Warmes Dunkel, kein Marineblau. Stempelrot ist der Akzent, das
   frühere Gelb ist zum Textmarker geworden — so wie in einer echten Akte.
   Läuft auf einem Beamer: große Typo, hohe Kontraste, nichts Grelles. */

/* Selbst gehostet, SIL Open Font License 1.1. Die Lizenztexte liegen daneben.
   Bezogen über die fontsource-Pakete von npm. Es geht keine Anfrage an Google. */
@font-face{font-family:"Inter";src:url(schriften/inter-latin-var.woff2) format("woff2");
  font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(schriften/courier-prime-400.woff2) format("woff2");
  font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Courier Prime";src:url(schriften/courier-prime-700.woff2) format("woff2");
  font-weight:700;font-style:normal;font-display:swap}

:root{
  /* Der Raum. Warmes Schwarz, wie Schatten auf Holz - nie blau. */
  --ground:#13100C; --surface:#1E1913; --surface-hoch:#262019;
  /* Papier und Schrift */
  --ink:#EFE8DB; --muted:#A1927D;
  --rule:#312820; --rule-strong:#5A4B3C;
  /* Stempelrot: die Marke. Fuer Stempel, Kanten, Marken - nicht fuer Flaechentext. */
  --stempel:#C0392F; --stempel-hell:#E0645A; --stempel-soft:#2E1714;
  /* Lampenlicht: das ist der interaktive Akzent. Ersetzt das alte Blau. */
  --accent:#E9B872; --accent-soft:#2B2113;
  /* Textmarker in der Akte. Sparsam - nur angestrichene Woerter und die knappe Uhr. */
  --evidence:#D9A441; --evidence-ink:#13100C; --evidence-soft:#2A2114;
  --good:#8FBF7A; --good-soft:#1C2616; --bad:#E0645A; --bad-soft:#2E1714;
  /* Same type system as the website: Inter for reading and UI, Courier Prime only
     for metadata, labels and stamps. The game used to be set in a typewriter face
     with serif body text and looked like a different product than the site. */
  --display:"Inter",Arial,Helvetica,sans-serif;
  --body:"Inter",Arial,Helvetica,sans-serif;
  --mono:"Courier Prime","Courier New",ui-monospace,monospace;
  --kante:0 1px 0 rgba(255,255,255,.04), 0 18px 40px -24px rgba(0,0,0,.9);

  /* Bewegung: drei Dauern, zwei Kurven. Nirgends sonst steht eine Zahl. */
  --schnell:140ms; --normal:260ms; --langsam:440ms;
  --kurve:cubic-bezier(.22,.68,.28,1);        /* kommt herein, bremst sanft aus */
  --kurve-raus:cubic-bezier(.45,0,.9,.6);     /* geht heraus, zieht an */
  --versatz:70ms;                             /* Abstand gestaffelter Elemente */

  /* Raum: geometrisch, nicht linear. Gleichmaessige Abstaende lassen jede
     Seite flach wirken - der Sprung zwischen den Stufen macht die Ordnung. */
  --r1:6px; --r2:12px; --r3:20px; --r4:34px; --r5:56px; --r6:92px;

  color-scheme:dark;
}

/* Heller Zustand: exakt die Aktenfarben der Verkaufsseite, damit Kauf und Abend
   erkennbar dasselbe Produkt sind. */
:root[data-theme="hell"]{
  --ground:#E4E0D6; --surface:#F7F5F0; --surface-hoch:#FFFFFF;
  --ink:#191B1F; --muted:#6E675C;
  --rule:#CBC4B6; --rule-strong:#9C9384;
  --stempel:#A8232C; --stempel-hell:#8E1C24; --stempel-soft:#F2E2E0;
  --accent:#8A5A12; --accent-soft:#F3E7D2;
  --evidence:#E7C766; --evidence-ink:#191B1F; --evidence-soft:#F6EDD2;
  --good:#2C7A4B; --good-soft:#DCEFE3; --bad:#A8362C; --bad-soft:#F6E0DD;
  --kante:0 1px 2px rgba(25,27,31,.08), 0 14px 30px -22px rgba(25,27,31,.5);
  color-scheme:light;
}

*{box-sizing:border-box}
/* Das hidden-Attribut muss staerker sein als jedes display aus einer Komponente.
   Ohne diese Zeile hat .lnk{display:block} die versteckten Rollenlinks wieder auf
   den Beamer geholt - genau das, was der Kommentar in spiel.js verhindern wollte. */
[hidden]{display:none !important}

body{
  margin:0;color:var(--ink);font-family:var(--body);
  font-size:17px;line-height:1.6;-webkit-text-size-adjust:100%;
  background-color:var(--ground);
  /* Der Lichtkegel. Die Akte liegt oben in der Mitte unter der Lampe. */
  background-image:
    radial-gradient(120% 80% at 50% -10%, rgba(233,184,114,.10) 0%, rgba(233,184,114,.03) 38%, transparent 68%),
    radial-gradient(90% 60% at 50% 110%, rgba(0,0,0,.45) 0%, transparent 60%);
  background-attachment:fixed;
  min-height:100vh;
}
/* Papierkorn. Rein rechnerisch, kein Bild, keine zusaetzliche Anfrage. */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:
    repeating-linear-gradient(0deg, rgba(255,255,255,.012) 0 1px, transparent 1px 3px),
    repeating-linear-gradient(90deg, rgba(0,0,0,.02) 0 1px, transparent 1px 4px);
}
.sprung{position:fixed;z-index:99;left:16px;top:8px;padding:8px 14px;background:var(--surface-hoch);
  color:var(--ink);transform:translateY(-160%)}
.sprung:focus{transform:none}
.spiel-nav{max-width:1180px;margin:0 auto;padding:18px 20px 0;display:flex;justify-content:space-between;
  position:relative;z-index:2;font-family:var(--mono);font-size:12px;text-transform:uppercase;letter-spacing:.08em}
.spiel-nav a{text-decoration:none;color:var(--muted)}
.spiel-nav a:first-child{font-weight:700;color:var(--ink)}
.check{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:start;gap:8px;text-transform:none;
  letter-spacing:0;font-family:var(--body);font-weight:400;line-height:1.45;color:var(--muted)}
.check input{width:18px;height:18px;margin:3px 0 0;accent-color:var(--stempel)}
textarea{width:100%;min-height:76px;margin-top:10px;background:var(--surface-hoch);color:var(--ink);
  border:1px solid var(--rule-strong);font:12px/1.4 var(--mono);padding:8px}

h1,h2,h3{font-family:var(--display);font-weight:500;margin:0 0 .35em}
/* Courier Prime ist eine Schreibmaschine. Gross gesetzt traegt sie nur, wenn die
   Laufweite eng und die Zeilen dicht stehen - sonst wirkt sie nach Terminal. */
h1{font-size:clamp(34px,5.6vw,68px);line-height:1.02;letter-spacing:-.045em}
h2{font-size:clamp(26px,3.8vw,44px);line-height:1.08;letter-spacing:-.04em}
h3{font-size:19px;font-weight:600;line-height:1.25;letter-spacing:-.015em}
/* Lesezeile: 62 Zeichen war zu breit fuer 17px auf einer Leinwand. */
p{margin:0 0 var(--r2);max-width:54ch}
a{color:var(--accent);text-underline-offset:3px}
a:hover{color:var(--ink)}

/* Die Wortmarke - identisch zur Verkaufsseite: roter Strich statt gelbem Block.
   Der Beschluss "Stempelrot statt Gelb" galt bisher nur auf der Website. */
.wortmarke{display:inline-block;border-bottom:5px solid var(--stempel);padding-bottom:4px}

/* Registerzeile wie im Aktendeckel. */
.register{display:grid;grid-template-columns:150px minmax(0,1fr);gap:0 20px;
  font-family:var(--mono);font-size:14px;line-height:1.85;margin:30px 0 0;
  border-top:1px solid var(--rule);border-bottom:1px solid var(--rule);padding:14px 0}
.register dt{text-transform:uppercase;letter-spacing:.1em;color:var(--muted);font-size:12.5px}
.register dd{margin:0;color:var(--ink)}
@media (max-width:640px){
  .register{grid-template-columns:minmax(0,1fr);gap:0}
  .register dd{margin:0 0 10px}
}

/* Der Aufschlag: links die Akte, rechts das Einrichten. Sonst steht der
   Beamer-Bildschirm zu zwei Dritteln leer. */
.aufschlag{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);
  gap:48px;align-items:start}
.aufschlag-rechts > .karte:first-child{margin-top:6px}
@media (max-width:900px){.aufschlag{grid-template-columns:minmax(0,1fr);gap:28px}}

/* Angestrichenes Wort: wie mit dem Textmarker durchgezogen. */
.wort{background:var(--evidence);color:var(--evidence-ink);padding:0 .14em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.mono{font-family:var(--mono)}
.leise{color:var(--muted);font-size:.9em}

.huelle{max-width:1180px;margin:0 auto;padding:var(--r4) var(--r3) var(--r6);
  position:relative;z-index:1}

/* Ein Blatt in der Akte. Oben die rote Kante wie ein Registerstreifen. */
.karte{background:var(--surface);border:1px solid var(--rule);padding:var(--r3) var(--r3) var(--r3);margin:0 0 var(--r3);
  box-shadow:var(--kante);position:relative}
.karte::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:2px;
  background:linear-gradient(90deg,var(--stempel) 0 34%, var(--rule) 34%)}
.karte h3{margin-top:0;letter-spacing:.02em}
/* Hervorgehobene Karte: eine Kante in Textmarkerfarbe, und der Registerstreifen
   zieht mit. Zwei konkurrierende Rahmenfarben sahen nach Versehen aus. */
.karte.hervor{border-left:4px solid var(--evidence)}
.karte.hervor::before{background:linear-gradient(90deg,var(--evidence) 0 34%, var(--rule) 34%)}

.reihe{display:flex;gap:12px;flex-wrap:wrap;align-items:center}

/* Der Hauptknopf ist ein Stempel: Stempelrot mit Papierweiss. */
button,.knopf{font-family:var(--body);font-weight:600;font-size:17px;letter-spacing:-.005em;
  background:var(--stempel);color:#F7F5F0;border:1px solid var(--stempel);padding:11px 22px;
  cursor:pointer;text-decoration:none;display:inline-block;
  transition:transform var(--schnell) var(--kurve), background var(--schnell) var(--kurve),
    border-color var(--schnell) var(--kurve)}
button:hover,.knopf:hover{background:var(--stempel-hell);border-color:var(--stempel-hell);color:#14100C}
button:active,.knopf:active{transform:translateY(1px)}
button.still{background:transparent;color:var(--ink);border:1px solid var(--rule-strong)}
button.still:hover{background:var(--surface-hoch);color:var(--ink);border-color:var(--ink)}
button:disabled,button:disabled:hover{background:transparent;border:1px dashed var(--rule-strong);
  color:var(--muted);cursor:not-allowed;transform:none;opacity:1}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{
  outline:3px solid var(--accent);outline-offset:2px}

input,select{font-family:var(--body);font-size:17px;padding:10px 12px;background:var(--surface-hoch);
  color:var(--ink);border:1px solid var(--rule-strong);width:100%;max-width:420px}
input::placeholder{color:var(--muted);opacity:.8}
label{display:block;font-family:var(--mono);font-weight:700;font-size:13px;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:14px 0 6px}

/* Kopfzeile der Akte: Titel links, Runde und Uhr rechts, darunter die rote Linie. */
.band{display:flex;justify-content:space-between;align-items:baseline;gap:var(--r3);
  border-bottom:2px solid var(--stempel);padding-bottom:var(--r1);margin-bottom:var(--r4);flex-wrap:wrap}
.band .mono{font-size:15px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase}

.uhr{font-family:var(--mono);font-weight:700;font-size:clamp(30px,5vw,54px);
  font-variant-numeric:tabular-nums;letter-spacing:.02em}
.uhr.knapp{color:var(--evidence);animation:puls 1.6s ease-in-out infinite}
.uhr.aus{color:var(--bad)}
@keyframes puls{0%,100%{opacity:1}50%{opacity:.55}}

.gitter{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(210px,1fr))}

/* Rollenkachel: ein Personalblatt mit aufgeklebtem Code. */
.rolle-kachel{background:var(--surface);border:1px solid var(--rule);padding:14px;text-align:center;
  box-shadow:var(--kante);transition:transform var(--normal) var(--kurve), border-color var(--normal) var(--kurve)}
.rolle-kachel:hover{transform:translateY(-2px);border-color:var(--rule-strong)}
.rolle-kachel img,.rolle-kachel canvas,.rolle-kachel svg{width:100%;height:auto;background:#F7F5F0;padding:8px}
.rolle-kachel .name{font-family:var(--display);font-weight:600;font-size:19px;margin-top:8px}
.rolle-kachel .fn{color:var(--muted);font-size:14px}
.rolle-kachel .lnk{font-family:var(--mono);font-size:11px;color:var(--muted);
  word-break:break-all;margin-top:6px;display:block}

/* Eine Spur ist ein eingelegtes Beweisblatt. Es kommt herein, es steht nicht einfach da. */
.spur{border:1px solid var(--rule);border-left:4px solid var(--evidence);
  background:linear-gradient(180deg,#3B3022,#2C2419 62%);
  padding:22px 20px 18px;margin:0 0 14px;box-shadow:var(--kante);
  position:relative;transform:rotate(var(--dreh,0deg));transform-origin:50% 0;
  animation:einlegen var(--langsam) var(--kurve) both}
.spur h3{color:var(--evidence);letter-spacing:.02em;margin-bottom:.3em}
.spur .quelle{font-family:var(--mono);font-size:13px;color:var(--muted);
  letter-spacing:.06em;text-transform:uppercase}
@keyframes einlegen{
  from{opacity:0;transform:translateY(-18px) rotate(calc(var(--dreh,0deg) - 3deg)) scale(.97)}
  60%{opacity:1}
  to{opacity:1;transform:rotate(var(--dreh,0deg))}
}

.schritt{border-left:3px solid var(--rule-strong);padding:10px 0 10px 18px;margin-bottom:10px;
  animation:einlegen var(--normal) var(--kurve) both}

.wahl{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));margin:12px 0}
.wahl button{width:100%;background:var(--surface);color:var(--ink);border:1px solid var(--rule-strong);
  text-transform:none;font-family:var(--body);font-size:17px;padding:14px;letter-spacing:0}
.wahl button:hover{background:var(--surface-hoch);border-color:var(--accent);color:var(--ink)}
.wahl button[aria-pressed="true"]{background:var(--stempel);color:#F7F5F0;border-color:var(--stempel)}
.wahl button[aria-pressed="true"]:hover{background:var(--stempel-hell);color:#14100C}

table{width:100%;border-collapse:collapse;font-size:16px}
th{font-family:var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
  text-align:left;border-bottom:1px solid var(--rule-strong);padding:6px 10px 6px 0}
td{padding:10px 10px 10px 0;border-bottom:1px solid var(--rule)}
.treffer{color:var(--good);font-weight:700}
.daneben{color:var(--bad);font-weight:700}
.verdeckt{filter:blur(7px);user-select:none}

/* Abschnittswechsel: die Seite wird umgeblättert, nicht ausgetauscht. */
section{animation:blatt var(--normal) var(--kurve) both}
@keyframes blatt{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

@media print{
  body{background:#fff;color:#000}
  body::before{display:none}
}

/* Wer Bewegung abgestellt hat, bekommt keine. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important}
}

/* Der Abschluss: der einzige Moment, in dem die Runde zusammen auf den Bildschirm
   schaut und gerade etwas Gutes erlebt hat. Vorher verkauft hier nichts. */
.abschluss { border:1px solid var(--rule-strong); background:var(--surface);
             padding:22px 24px; box-shadow:var(--kante); }
.abschluss h3 { font-family:var(--mono); font-size:15px; letter-spacing:.14em;
                text-transform:uppercase; color:var(--muted); margin:0 0 12px; }
.abschluss p { margin:0 0 12px; line-height:1.6; }
.abschluss .tarif { font-family:var(--mono); font-size:14px; line-height:1.95;
                    border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
                    padding:10px 0; margin:16px 0; color:var(--ink); }
.abschluss .tarif span { display:inline-block; min-width:190px; color:var(--muted); }
.abschluss .reihe { margin-top:18px; }
.abschluss a.knopf { display:inline-block; font-family:var(--body); font-size:14px;
                     letter-spacing:.08em; text-transform:uppercase; text-decoration:none;
                     padding:11px 20px; border:1px solid var(--stempel);
                     background:var(--stempel); color:#F7F5F0; }
.abschluss a.knopf:hover { background:var(--stempel-hell); color:#14100C; }
.abschluss a.still { background:none; border-color:var(--rule-strong); color:var(--muted); }
.abschluss a.still:hover { color:var(--ink); border-color:var(--ink); background:none; }


/* ---------------------------------------------------------------------------
   Die Ermittlungswand. Runde 3 ist der Moment, in dem die Runde gemeinsam auf
   den Bildschirm schaut und anfaengt zu kombinieren. Bis hierher war das eine
   Liste von Kaesten. Jetzt haengen die Beweise an einer Wand, angepinnt, leicht
   schief, und ein roter Faden verbindet sie in der Reihenfolge des Auftauchens.
   Genau das heisst "Spurenlage".
   --------------------------------------------------------------------------- */
.wand{
  position:relative;margin:10px 0 0;padding:52px 26px 30px;
  border:1px solid var(--rule);
  background:
    radial-gradient(90% 70% at 50% 0%, rgba(233,184,114,.07), transparent 70%),
    repeating-linear-gradient(135deg, rgba(0,0,0,.18) 0 3px, transparent 3px 7px),
    var(--ground);
  box-shadow:inset 0 0 90px rgba(0,0,0,.55), var(--kante);
}
.wand .blaetter{
  display:grid;gap:46px 26px;
  grid-template-columns:repeat(auto-fit,minmax(310px,1fr));
  align-items:start;
}
/* Der Faden liegt ueber den Blaettern, wie eine echte Schnur ueber der Pinnwand. */
.wand .faden{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;
  overflow:visible;z-index:0}
.wand .spur{margin:0;z-index:1}

/* Die Pinnadel. */
.spur .pin{position:absolute;top:-9px;left:50%;width:16px;height:16px;margin-left:-8px;
  border-radius:50%;background:radial-gradient(circle at 34% 30%, #F0857C, var(--stempel) 58%, #6E1A14);
  box-shadow:0 3px 7px rgba(0,0,0,.65);z-index:3}
.spur .asservat{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted);margin-bottom:6px}

@media (max-width:760px){
  .wand{padding:26px 16px 22px}
  .wand .blaetter{grid-template-columns:minmax(0,1fr);gap:30px}
  .wand .spur{--dreh:0deg !important}
}

/* ---------------------------------------------------------------------------
   Die Gegenueberstellung. Runde 4: nicht eine Reihe Knoepfe, sondern die
   Verdaechtigen nebeneinander, wie Personalakten auf dem Tisch. Wer angeklagt
   wird, bekommt den Stempel.
   --------------------------------------------------------------------------- */
.wahl{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.wahl button.verdaechtiger{
  display:grid;grid-template-rows:auto auto auto;gap:2px;justify-items:start;
  /* Rechts bleibt fest Platz fuer den Stempel frei - sonst deckt er auf schmalen
     Karten den Namen zu, und ein Innenabstand erst beim Anklicken wuerde springen. */
  text-align:left;padding:16px 108px 18px 18px;position:relative;overflow:hidden;
  background:var(--surface-hoch);border:1px solid var(--rule-strong);color:var(--ink);
  transition:transform var(--normal) var(--kurve), border-color var(--normal) var(--kurve),
    background var(--normal) var(--kurve)}
.verdaechtiger .nr{font-family:var(--mono);font-size:12px;letter-spacing:.22em;
  color:var(--muted)}
.verdaechtiger .wer{font-family:var(--display);font-weight:600;font-size:19px;
  line-height:1.15;letter-spacing:0;text-transform:none}
.verdaechtiger .funk{font-size:14px;color:var(--muted);text-transform:none;
  font-family:var(--body);letter-spacing:0}
.wahl button.verdaechtiger:hover{transform:translateY(-2px);border-color:var(--accent);
  background:var(--surface-hoch)}
.wahl button.verdaechtiger[aria-pressed="true"]{
  background:var(--stempel-soft);border-color:var(--stempel);color:var(--ink)}
.wahl button.verdaechtiger[aria-pressed="true"] .nr{color:var(--stempel-hell)}
/* Der Stempel schlaegt auf. */
.wahl button.verdaechtiger[aria-pressed="true"]::after{
  content:"ANGEKLAGT";position:absolute;right:-22px;top:50%;
  font-family:var(--mono);font-weight:700;font-size:11px;letter-spacing:.2em;
  color:var(--stempel-hell);border:2px solid var(--stempel-hell);padding:4px 20px;
  transform:translateY(-50%) rotate(-14deg);opacity:.95;
  animation:stempeln var(--normal) cubic-bezier(.2,1.5,.4,1) both}
@keyframes stempeln{
  from{opacity:0;transform:translateY(-50%) rotate(-14deg) scale(2.4)}
  to{opacity:.95;transform:translateY(-50%) rotate(-14deg) scale(1)}
}

/* ---------------------------------------------------------------------------
   Die Auflösung. Der Taeter bekommt den grossen Stempel quer ueber die Akte.
   --------------------------------------------------------------------------- */
.karte.ueberfuehrt{border:1px solid var(--stempel);position:relative;overflow:hidden;
  background:linear-gradient(180deg,var(--stempel-soft),var(--surface) 70%)}
.karte.ueberfuehrt::before{background:var(--stempel)}
.karte.ueberfuehrt h2{color:var(--ink)}
.karte.ueberfuehrt::after{
  content:"ÜBERFÜHRT";position:absolute;right:clamp(10px,2.4vw,28px);top:22px;
  font-family:var(--mono);font-weight:700;
  font-size:clamp(20px,3.4vw,34px);letter-spacing:.2em;
  color:var(--stempel-hell);border:4px double var(--stempel-hell);
  padding:8px 26px;transform:rotate(-12deg);opacity:.9;pointer-events:none;
  animation:aufschlag var(--langsam) cubic-bezier(.2,1.4,.35,1) both}
@keyframes aufschlag{
  from{opacity:0;transform:rotate(-12deg) scale(3)}
  70%{opacity:.95}
  to{opacity:.9;transform:rotate(-12deg) scale(1)}
}
@media (max-width:620px){
  .karte.ueberfuehrt::after{position:static;display:inline-block;transform:rotate(-3deg);
    margin:0 0 12px;font-size:20px;animation:none}
}


/* Gestaffelter Auftritt. Rollenkacheln und Verdaechtige erscheinen als Gruppe -
   gleichzeitig wirkt das wie ein Bildwechsel, nacheinander wie ein Austeilen.
   motion-patterns setzt 50 bis 100 ms je Element an, 70 liegt mittig. */
.gitter > .rolle-kachel,
.wahl > .verdaechtiger{animation:austeilen var(--normal) var(--kurve) both}
.gitter > *:nth-child(1),.wahl > *:nth-child(1){animation-delay:calc(0 * var(--versatz))}
.gitter > *:nth-child(2),.wahl > *:nth-child(2){animation-delay:calc(1 * var(--versatz))}
.gitter > *:nth-child(3),.wahl > *:nth-child(3){animation-delay:calc(2 * var(--versatz))}
.gitter > *:nth-child(4),.wahl > *:nth-child(4){animation-delay:calc(3 * var(--versatz))}
.gitter > *:nth-child(5),.wahl > *:nth-child(5){animation-delay:calc(4 * var(--versatz))}
.gitter > *:nth-child(6),.wahl > *:nth-child(6){animation-delay:calc(5 * var(--versatz))}
.gitter > *:nth-child(7),.wahl > *:nth-child(7){animation-delay:calc(6 * var(--versatz))}
.gitter > *:nth-child(8),.wahl > *:nth-child(8){animation-delay:calc(7 * var(--versatz))}
@keyframes austeilen{
  from{opacity:0;transform:translateY(10px) scale(.985)}
  to{opacity:1;transform:none}
}

/* Die Auflösungsschritte kommen einer nach dem anderen - das ist der Moment,
   in dem der Fall zusammenklappt. Er darf nicht als Absatzblock erscheinen. */
#e-schritte > .schritt:nth-child(1){animation-delay:calc(0 * var(--versatz))}
#e-schritte > .schritt:nth-child(2){animation-delay:calc(1 * var(--versatz))}
#e-schritte > .schritt:nth-child(3){animation-delay:calc(2 * var(--versatz))}
#e-schritte > .schritt:nth-child(4){animation-delay:calc(3 * var(--versatz))}
#e-schritte > .schritt:nth-child(5){animation-delay:calc(4 * var(--versatz))}
#e-schritte > .schritt:nth-child(6){animation-delay:calc(5 * var(--versatz))}

/* Wortmarke wie auf der Website: klein geschrieben, rotes Quadrat. */
.wordmark{font-family:var(--display);font-size:1.6rem;font-weight:750;letter-spacing:-.065em;
  display:inline-flex;align-items:baseline;gap:3px;line-height:1.2;color:var(--ink);text-transform:none}
.wordmark .brand-square{display:inline-block;width:6px;height:6px;background:var(--stempel)}
h1 .wordmark{font-size:clamp(40px,6.4vw,76px);gap:6px}
h1 .wordmark .brand-square{width:.14em;height:.14em}
.spiel-fuss{max-width:1180px;margin:0 auto;padding:0 20px 28px;display:flex;flex-wrap:wrap;gap:6px 18px;
  font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;position:relative;z-index:1}
.spiel-fuss a{color:var(--muted);text-decoration:none}
.spiel-fuss a:hover{color:var(--ink)}

/* Polish pass: smoothing, balanced headings, tactile buttons, usable hit areas. */
html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3{text-wrap:balance}
.spur p,.schritt,.leise{text-wrap:pretty}
button:not(:disabled):active,.knopf:active{transform:scale(.98)}
.spiel-nav a,.spiel-fuss a{display:inline-flex;align-items:center;min-height:36px}
.rolle-kachel .fn,.verdaechtiger .funk{text-wrap:pretty}

/* Long German compounds may break, short words not (12+ letters, 5 on each side):
   "ha-ben" in narrow evidence cards was hard to read on a projector. */
body{overflow-wrap:break-word;hyphens:auto;-webkit-hyphens:auto;hyphenate-limit-chars:12 5 5}
.spiel-nav .wordmark{font-size:1.25rem;letter-spacing:-.06em}

/* ===========================================================================
   DIE FALLTAFEL (2026-09-24)
   Das Spiel ist die Wand der Sonderkommission: dunkelgrüner Filz aus dem Grün
   der Website, darauf Papier, Nadeln, Klebeband und rote Fäden. Karten sind
   helles Papier mit dunkler Tinte, die Wand selbst trägt helle Schrift.
   Handschrift (Caveat) nur für Notizen und Namen, nie für Fließtext.
   =========================================================================== */
@font-face{font-family:"Caveat";src:url(schriften/caveat-700.woff2) format("woff2");
  font-weight:400 700;font-style:normal;font-display:swap}

:root{
  --ground:#1d221e; --surface:#262c26; --surface-hoch:#2e352e;
  --ink:#f1f1e9; --muted:#b3bbab;
  --rule:#394238; --rule-strong:#59634f;
  --stempel:#962c2c; --stempel-hell:#e8877c; --stempel-soft:#3a2522;
  --accent:#e9dcc0; --accent-soft:#2e352e;
  --evidence:#e9dcc0; --evidence-ink:#20211f; --evidence-soft:#2e352e;
  --good:#9fd08a; --bad:#f09a8f;
  /* Papier auf der Wand */
  --papier:#f4f1ea; --papier-hoch:#ffffff; --manila:#e9dcc0; --manila-dunkel:#d9cba8;
  --tinte:#20211f; --tinte-leise:#595b54; --papier-linie:#d9d5cc;
  --nadel:radial-gradient(circle at 34% 30%, #f0857c, #c0352c 58%, #6e1a14);
  --schatten-blatt:0 12px 22px -8px rgba(0,0,0,.55), 0 2px 4px rgba(0,0,0,.25);
  --hand:"Caveat","Segoe Print","Bradley Hand",cursive;
}

body{
  background-color:var(--ground);
  background-image:
    radial-gradient(110% 80% at 50% 0%, rgba(255,255,255,.05) 0%, transparent 60%),
    radial-gradient(90% 60% at 50% 110%, rgba(0,0,0,.45) 0%, transparent 60%);
}
/* Filzstruktur statt Papierkorn */
body::before{opacity:.9;background-image:
  radial-gradient(rgba(255,255,255,.035) 1px, transparent 1.2px),
  radial-gradient(rgba(0,0,0,.18) 1px, transparent 1.2px);
  background-size:5px 5px,7px 7px;background-position:0 0,2px 3px}

a{color:var(--manila)}

/* --- Kopf der Tafel: Titel als Aktenstreifen, Runde, Stoppuhr ------------- */
.band{border-bottom:0;align-items:center;margin-bottom:var(--r4)}
.band h2#kopf-titel{display:inline-block;background:var(--papier);color:var(--tinte);
  font-size:clamp(22px,3vw,34px);padding:8px 18px 9px;transform:rotate(-1deg);
  box-shadow:var(--schatten-blatt);position:relative}
.band h2#kopf-titel::after{content:"";position:absolute;left:-12px;top:-8px;width:52px;height:18px;
  background:rgba(244,241,234,.55);transform:rotate(-22deg)}
.band .mono{color:var(--muted)}
.uhr{display:inline-grid;place-items:center;width:128px;height:128px;border-radius:50%;
  background:var(--papier);color:var(--tinte);border:6px solid var(--stempel);
  font-size:34px;box-shadow:0 12px 22px rgba(0,0,0,.5);transform:rotate(4deg)}
.uhr.knapp{color:var(--stempel);border-color:#c0352c}
.uhr.aus{color:var(--stempel);background:#f6e0dd}
@media (max-width:640px){.uhr{width:96px;height:96px;font-size:26px;border-width:5px}}

/* --- Karten: Papier mit Nadel ------------------------------------------- */
.karte{background:var(--papier);color:var(--tinte);border:0;box-shadow:var(--schatten-blatt);
  padding:var(--r4) var(--r3) var(--r3)}
.karte::before{left:50%;right:auto;top:-9px;width:18px;height:18px;margin-left:-9px;border-radius:50%;
  background:var(--nadel);box-shadow:0 3px 6px rgba(0,0,0,.5)}
.karte h2,.karte h3,.karte p,.karte td,.karte th{color:inherit}
.karte h3{font-family:var(--mono);font-size:14px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--stempel)}
.karte .leise,.karte label{color:var(--tinte-leise)}
.karte input,.karte select,.karte textarea{background:var(--papier-hoch);color:var(--tinte);border:1px solid #bdb8ad}
.karte input::placeholder{color:#8b8d85}
.karte button.still{color:var(--tinte);border-color:#9a9588}
.karte button.still:hover{background:var(--manila);color:var(--tinte);border-color:var(--tinte)}
.karte .check{color:var(--tinte-leise)}
.karte a{color:var(--stempel)}
/* Hervorgehoben: ein Notizzettel mit Klebeband statt Nadel */
.karte.hervor{background:var(--manila);border-left:0;transform:rotate(-.6deg)}
.karte.hervor::before{top:-11px;width:92px;height:22px;margin-left:-46px;border-radius:0;
  background:rgba(244,241,234,.7);box-shadow:none;transform:rotate(-3deg)}

/* Registerzeile auf dem Filz */
.register{border-color:var(--rule)}

/* --- Rollen: Aktenmappen mit Reiter und aufgeklebtem Code --------------- */
.gitter{counter-reset:akte;gap:38px 22px;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));padding-top:30px}
.rolle-kachel{counter-increment:akte;position:relative;background:var(--manila);color:var(--tinte);border:0;
  padding:26px 18px 18px;box-shadow:var(--schatten-blatt)}
.rolle-kachel:nth-child(odd){transform:rotate(-1.2deg)}
.rolle-kachel:nth-child(even){transform:rotate(1deg)}
.rolle-kachel:hover{transform:rotate(0) translateY(-3px)}
.rolle-kachel::before{content:"AKTE " counter(akte,decimal-leading-zero);position:absolute;left:14px;top:-26px;
  height:26px;padding:0 12px;display:flex;align-items:center;background:var(--manila);border-radius:6px 6px 0 0;
  font-family:var(--mono);font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--stempel)}
.rolle-kachel::after{content:"";position:absolute;left:50%;top:14px;width:80px;height:20px;margin-left:-40px;
  background:rgba(244,241,234,.75);transform:rotate(3deg)}
.rolle-kachel img,.rolle-kachel canvas,.rolle-kachel svg{background:#fff;padding:10px;box-shadow:0 3px 8px rgba(0,0,0,.18)}
.rolle-kachel .name{font-family:var(--hand);font-weight:700;font-size:30px;line-height:1;margin-top:12px;color:var(--tinte)}
.rolle-kachel .fn{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-leise)}
.rolle-kachel button.still{color:var(--tinte);border-color:var(--tinte)}
.rolle-kachel button.still:hover{background:var(--papier);color:var(--tinte)}

/* --- Spuren: Beweisblätter mit Asservatenschild ------------------------- */
.spur{background:var(--papier-hoch);color:var(--tinte);border:0;box-shadow:var(--schatten-blatt);padding:26px 22px 20px}
.spur h3{color:var(--tinte);font-size:22px;letter-spacing:-.01em}
.spur p{color:#3d3e39}
.spur .quelle{color:var(--tinte-leise)}
.spur .asservat{display:inline-block;background:var(--manila);color:var(--stempel);padding:4px 10px;
  font-size:12px;font-weight:700;letter-spacing:.16em;margin-bottom:10px}
.spur .pin{background:var(--nadel)}
.wand{background:
    radial-gradient(90% 70% at 50% 0%, rgba(255,255,255,.05), transparent 70%),
    radial-gradient(rgba(255,255,255,.035) 1px, transparent 1.2px) 0 0/5px 5px,
    #242a25;
  border:1px solid #333b33;box-shadow:inset 0 0 70px rgba(0,0,0,.5)}

/* --- Auflösungsschritte: Karteikarten ---------------------------------- */
.schritt{background:var(--papier);color:var(--tinte);border-left:0;border-top:4px solid var(--stempel);
  padding:14px 18px;box-shadow:var(--schatten-blatt);max-width:760px}
.schritt:nth-child(odd){transform:rotate(-.4deg)}
.schritt:nth-child(even){transform:rotate(.4deg)}

/* --- Gegenüberstellung: Polizeifoto vor der Messlatte -------------------- */
.wahl{gap:22px}
.wahl button.verdaechtiger{background-color:var(--papier);color:var(--tinte);border:0;
  padding:128px 16px 16px;box-shadow:var(--schatten-blatt);justify-items:center;text-align:center;
  background-image:
    radial-gradient(circle at 50% 44px, #3b403a 25px, transparent 26px),
    radial-gradient(ellipse 58px 46px at 50% 116px, #3b403a 98%, transparent 100%),
    repeating-linear-gradient(to bottom, #cfcac0 0 1px, transparent 1px 16px),
    linear-gradient(#ece9df,#ece9df);
  background-size:100% 112px,100% 112px,100% 112px,100% 112px;background-repeat:no-repeat}
.verdaechtiger .nr{order:-1;display:inline-block;background:var(--tinte);color:var(--papier);padding:3px 10px;
  font-weight:700;letter-spacing:.18em;margin-bottom:6px}
.verdaechtiger .wer{font-family:var(--hand);font-weight:700;font-size:28px;line-height:1}
.verdaechtiger .funk{font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--tinte-leise)}
.wahl button.verdaechtiger:hover{background-color:#fff;transform:translateY(-3px) rotate(-.6deg)}
.wahl button.verdaechtiger[aria-pressed="true"]{background-color:#f6e0dd;outline:4px solid #c0352c;outline-offset:3px}
.wahl button.verdaechtiger[aria-pressed="true"] .nr{background:var(--stempel);color:#fff}
.wahl button.verdaechtiger[aria-pressed="true"]::after{color:#962c2c;border-color:#962c2c;right:auto;left:50%;top:58px;
  transform:translate(-50%,-50%) rotate(-12deg);background:rgba(246,224,221,.9);padding:4px 14px}
@keyframes stempeln{
  from{opacity:0;transform:translate(-50%,-50%) rotate(-12deg) scale(2.4)}
  to{opacity:.95;transform:translate(-50%,-50%) rotate(-12deg) scale(1)}
}

/* --- Überführt: der große Stempel auf Papier ---------------------------- */
.karte.ueberfuehrt{background:var(--papier);border:0;outline:3px solid #c0352c;outline-offset:6px}
.karte.ueberfuehrt::after{color:#962c2c;border-color:#962c2c}
.treffer{color:#2f6b3a}
.daneben{color:#962c2c}
#e-wertung table{background:var(--papier);color:var(--tinte);box-shadow:var(--schatten-blatt)}
#e-wertung th{color:var(--tinte-leise);border-color:var(--papier-linie);padding-left:14px}
#e-wertung td{border-color:var(--papier-linie);padding-left:14px}

/* --- Abschluss: Notizzettel -------------------------------------------- */
.abschluss{background:var(--manila);color:var(--tinte);border:0;box-shadow:var(--schatten-blatt);transform:rotate(-.5deg)}
.abschluss h3{font-family:var(--hand);font-size:30px;letter-spacing:0;text-transform:none;color:var(--tinte)}
.abschluss .tarif{color:var(--tinte);border-color:#cdbf9c}
.abschluss .tarif span,.abschluss .leise{color:var(--tinte-leise)}
.abschluss a.still{color:var(--tinte);border-color:var(--tinte)}
.abschluss a.still:hover{color:var(--tinte);background:var(--papier)}

/* Hinweiszeile unter dem Spiel als Handschrift */
#spiel-hinweis{font-family:var(--hand);font-size:24px;color:var(--manila)}

button.still{color:var(--ink);border-color:var(--rule-strong)}
button:hover,.knopf:hover{color:#fff;background:#772222;border-color:#772222}
button.still:hover{color:var(--ink);background:var(--surface-hoch)}
button:disabled,button:disabled:hover{color:var(--muted);border-color:var(--rule-strong)}
@media (prefers-reduced-motion:reduce){.rolle-kachel,.schritt,.karte.hervor,.abschluss{transform:none!important}}
.wahl button.verdaechtiger:hover{color:var(--tinte)}
.band h2#kopf-titel:empty{display:none}
.uhr{font-size:29px;width:134px;height:134px;letter-spacing:0}
@media (max-width:640px){.uhr{width:98px;height:98px;font-size:22px}}
.wahl button.verdaechtiger[aria-pressed="true"]{color:var(--tinte);
  background-image:
    radial-gradient(circle at 50% 44px, #3b403a 25px, transparent 26px),
    radial-gradient(ellipse 58px 46px at 50% 116px, #3b403a 98%, transparent 100%),
    repeating-linear-gradient(to bottom, #d9b9b3 0 1px, transparent 1px 16px),
    linear-gradient(#f1d9d5,#f1d9d5);
  background-size:100% 112px,100% 112px,100% 112px,100% 112px;background-repeat:no-repeat}
.karte.ueberfuehrt{margin-top:34px}
.karte.ueberfuehrt h2{color:var(--tinte)}
.karte.ueberfuehrt p{color:#3d3e39}
@media (max-width:640px){
  .wahl{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .wahl button.verdaechtiger{padding:120px 10px 12px}
  .verdaechtiger .wer{font-size:23px}
  .verdaechtiger .funk{font-size:10px}
}