/* One Short Mysteries — Noir-Aktenlook: Tinte als Grund, Papier fuer das Brett, Blutrot sparsam. */
:root{
  --tinte:#16171b; --tinte2:#1f2026; --kante:#30323a; --text:#ece8df; --leise:#9a978f;
  --papier:#f4efe4; --papier-kante:#3a3530; --rot:#c23b2e; --rot-hell:#e0574a; --gold:#c9a45c;
  --blau:#5b8fb9; --gruen:#5f9e6e;
  /* Systemleisten (Pixel: Gestenleiste unten). Capacitor 8 liefert --safe-area-inset-*, Browser env() */
  --oben:max(env(safe-area-inset-top,0px),var(--safe-area-inset-top,0px));
  --unten:max(env(safe-area-inset-bottom,0px),var(--safe-area-inset-bottom,0px));
  --r0:#eadfca; --r1:#dce7de; --r2:#e2e0ee; --r3:#f0dcd6; --r4:#dae5ef; --r5:#ece6cf; --r6:#e8dccf; --r7:#d8e6e5; --r8:#efe0e8;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;background:var(--tinte);color:var(--text);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;line-height:1.45}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:2px solid var(--gold);outline-offset:2px}

.kopf{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:10px;
  padding:10px 16px;padding-top:calc(10px + var(--oben));
  background:rgba(22,23,27,.96);border-bottom:1px solid var(--kante)}
.marke{flex:1;font-family:"Bodoni Moda",Georgia,serif;font-size:1.15rem;letter-spacing:.02em}
.marke span{color:var(--rot-hell);font-style:italic}
.zurueck,.regeln-knopf{width:36px;height:36px;border-radius:50%;border:1px solid var(--kante);
  background:var(--tinte2);font-size:1.05rem;display:grid;place-items:center;padding:0;line-height:0}
.zurueck svg,.regeln-knopf svg{display:block}
main{max-width:640px;margin:0 auto;padding:14px 16px calc(90px + var(--unten))}

/* Startseite */
.titel-gross{font-family:"Bodoni Moda",Georgia,serif;font-size:1.9rem;line-height:1.1;margin:10px 0 4px;text-wrap:balance}
.unter{color:var(--leise);margin:0 0 18px}
.band-reiter{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:12px}
.band-reiter button{flex:none;border:1px solid var(--kante);background:var(--tinte2);border-radius:20px;
  padding:6px 13px;font-size:.86rem;color:var(--leise)}
.band-reiter button.an{border-color:var(--gold);color:var(--gold)}
.faelle{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.fall-karte{text-align:left;border:1px solid var(--kante);background:var(--tinte2);border-radius:10px;
  padding:11px 12px;display:flex;flex-direction:column;gap:4px;min-height:96px}
.fall-karte .nr{font-size:.74rem;letter-spacing:.12em;color:var(--leise);text-transform:uppercase}
.fall-karte .t{font-family:Georgia,serif;font-size:1rem;line-height:1.2}
.fall-karte .stufe{margin-top:auto;font-size:.78rem;color:var(--gold);letter-spacing:.1em}
.fall-karte.geloest{border-color:#3d5a45}
.fall-karte .nr b{color:var(--gruen);letter-spacing:.04em;text-transform:none;font-weight:600}

/* Fallseite */
.fall-kopf .nr{font-size:.74rem;letter-spacing:.14em;color:var(--leise);text-transform:uppercase}
.fall-kopf h1{font-family:"Bodoni Moda",Georgia,serif;font-size:1.5rem;line-height:1.15;margin:2px 0;text-wrap:balance}
.fall-kopf p{margin:0 0 12px;color:var(--leise);font-style:italic}

.brett-huelle{background:var(--papier);border-radius:10px;padding:8px 8px 8px 4px;color:#2b2723;
  box-shadow:0 6px 24px rgba(0,0,0,.35)}
.brett{display:grid;gap:0;width:100%}
.lab{display:grid;place-items:center;font-size:.72rem;font-weight:700;color:#7a7168;aspect-ratio:auto}
.zelle{position:relative;aspect-ratio:1;border:1px solid rgba(58,53,48,.18);display:grid;place-items:center;
  padding:0;background:var(--r0);overflow:hidden}
.zelle.bt{border-top:3px solid var(--papier-kante)} .zelle.bb{border-bottom:3px solid var(--papier-kante)}
.zelle.bl{border-left:3px solid var(--papier-kante)} .zelle.br{border-right:3px solid var(--papier-kante)}
.zelle .moebel{position:absolute;inset:8%;width:84%;height:84%;object-fit:contain;opacity:.9;pointer-events:none}
.zelle .raumname{position:absolute;top:1px;left:1px;max-width:calc(100% - 2px);font-size:.4rem;font-weight:800;
  letter-spacing:0;text-transform:uppercase;color:#4a423b;background:rgba(244,239,228,.9);padding:1px 2px;
  border-radius:2px;pointer-events:none;line-height:1.05;z-index:1;text-align:left}
.zelle .fenster{position:absolute;background:var(--blau);pointer-events:none}
.fenster.oben{top:0;left:22%;right:22%;height:4px} .fenster.unten{bottom:0;left:22%;right:22%;height:4px}
.fenster.links{left:0;top:22%;bottom:22%;width:4px} .fenster.rechts{right:0;top:22%;bottom:22%;width:4px}
.zelle .kreuz{position:absolute;inset:0;display:grid;place-items:center;font-size:1.5rem;color:rgba(80,70,62,.55);
  pointer-events:none;font-weight:300}
.zelle .figur{position:absolute;inset:6%;border-radius:50%;overflow:hidden;border:2px solid #2b2723;background:#fff;
  pointer-events:none;box-shadow:0 2px 6px rgba(0,0,0,.25);z-index:2}
.zelle .figur img{width:100%;height:100%;object-fit:cover}
.zelle .figur .buchst{position:absolute;right:-1px;bottom:-1px;background:#2b2723;color:#fff;font-size:.6rem;
  font-weight:800;width:40%;height:40%;border-radius:50%;display:grid;place-items:center}
.zelle .figur.opfer{border-color:var(--rot)}
.zelle.konflikt{box-shadow:inset 0 0 0 3px var(--rot)}
.zelle.ziel:hover{filter:brightness(.97)}

.werkzeug{display:flex;gap:8px;margin:12px 0 4px;flex-wrap:wrap}
.werkzeug button{border:1px solid var(--kante);background:var(--tinte2);border-radius:8px;padding:8px 12px;font-size:.88rem}
.werkzeug button.an{border-color:var(--gold);color:var(--gold)}
.werkzeug .haupt{background:var(--rot);border-color:var(--rot);color:#fff;font-weight:700;margin-left:auto}
.werkzeug .haupt:disabled{opacity:.4;cursor:not-allowed}
.status{min-height:1.3em;font-size:.86rem;color:var(--leise);margin:4px 0 10px}

.allgemein{border-left:3px solid var(--gold);padding:6px 10px;margin:8px 0 10px;background:var(--tinte2);border-radius:0 6px 6px 0;font-size:.9rem}
.personen{display:flex;flex-direction:column;gap:8px}
.person{display:flex;gap:10px;align-items:flex-start;text-align:left;border:1px solid var(--kante);
  background:var(--tinte2);border-radius:10px;padding:8px 10px}
.person.aktiv{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold)}
.person.gesetzt{opacity:.62}
.person .bild{position:relative;flex:none;width:46px;height:46px;border-radius:50%;overflow:hidden;background:#fff}
.person .bild img{width:100%;height:100%;object-fit:cover}
.person .buchst{position:absolute;right:-2px;bottom:-2px;background:var(--tinte);color:#fff;font-size:.62rem;font-weight:800;
  width:18px;height:18px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--kante)}
.person .name{font-weight:700;font-size:.95rem}
.person .hint{font-size:.88rem;color:#cfcac0}
.person.opfer .name{color:var(--rot-hell)}

/* Dialoge */
.schleier{position:fixed;inset:0;background:rgba(0,0,0,.6);z-index:20;display:grid;place-items:center;padding:16px 16px calc(16px + var(--unten))}
/* Anklage als Leiste unten: kein Abdunkeln, Brett darueber bleibt sichtbar und scrollbar */
.schleier.leiste{background:none;pointer-events:none;align-items:end;padding:0 8px calc(8px + var(--unten))}
.schleier.leiste .dialog{pointer-events:auto;max-height:46vh;overflow:auto;box-shadow:0 -10px 40px rgba(0,0,0,.6);border-color:#4a4c55}
.schleier.leiste .dialog h2{font-size:1.1rem;margin-bottom:4px}
.schleier.leiste .wahl{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:8px 0}
.schleier.leiste .wahl button{padding:6px 8px;font-size:.9rem}
.schleier.leiste .wahl img{width:30px;height:30px}
.dialog .leise{color:var(--gold);font-size:.85rem}
.zelle.tatort::after{content:"";position:absolute;inset:0;background:rgba(201,164,92,.26);box-shadow:inset 0 0 0 2px rgba(201,164,92,.9);pointer-events:none;z-index:1}
.werkzeug button:disabled{opacity:.4;cursor:default}
/* Moebel-Legende */
.moebel-liste{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:6px 0 12px;max-height:52vh;overflow:auto}
.ml{display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;border:1px solid var(--kante);border-radius:8px;padding:6px;background:var(--tinte)}
.ml-bild{grid-row:span 2;position:relative;width:44px;height:44px;border-radius:6px;background:var(--papier);display:grid;place-items:center}
.ml-bild img{width:36px;height:36px;object-fit:contain}
.ml.sperre .ml-bild{background:var(--papier) repeating-linear-gradient(135deg,rgba(43,39,35,.22) 0 2px,transparent 2px 7px)}
.ml.sperre .ml-bild img{filter:grayscale(1);opacity:.78}
.ml-bild .tritt-mark{position:absolute;left:-4px;bottom:-4px;width:18px;height:18px;border-radius:50%;box-shadow:0 0 0 1.5px var(--tinte);
  background:var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat}
.ml{min-width:0} .ml-name{overflow-wrap:anywhere;hyphens:auto}
.ml-name{font-weight:700;font-size:.9rem;line-height:1.2}
.ml-status{font-size:.75rem;color:var(--leise)}
.ml.tritt .ml-status{color:#8fc49c}
.dialog{background:var(--tinte2);border:1px solid var(--kante);border-radius:14px;max-width:440px;width:100%;padding:18px}
.dialog h2{font-family:"Bodoni Moda",Georgia,serif;margin:0 0 8px;font-size:1.35rem}
.dialog p{margin:0 0 12px;color:#d6d1c7}
.dialog .wahl{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.dialog .wahl button{display:flex;gap:10px;align-items:center;border:1px solid var(--kante);background:var(--tinte);
  border-radius:10px;padding:8px 10px;text-align:left}
.dialog .wahl img{width:38px;height:38px;border-radius:50%;object-fit:cover;background:#fff}
.dialog .knoepfe{display:flex;gap:8px;justify-content:flex-end;margin-top:6px}
.dialog .knoepfe button{border:1px solid var(--kante);background:var(--tinte);border-radius:8px;padding:8px 14px}
.dialog .knoepfe .haupt{background:var(--rot);border-color:var(--rot);color:#fff;font-weight:700}
/* Moebel auf einen Blick (Rene 23.09.: „sofort erkennen welche Moebel er benutzen kann"):
   gesperrt = schraffiert + grau, betretbar = gruener Tritt-Punkt. Beim Setzen treten die
   gesperrten Felder noch weiter zurueck. */
.zelle.sperre{background-image:repeating-linear-gradient(135deg,rgba(43,39,35,.22) 0 2px,transparent 2px 7px)!important}
.zelle.sperre .moebel{filter:grayscale(1);opacity:.78}
.brett-huelle.setzen .zelle.sperre .moebel{opacity:.6}
.brett-huelle.setzen .zelle.sperre{cursor:not-allowed}
.zelle .tritt-mark{position:absolute;left:5%;bottom:5%;width:30%;height:30%;max-width:16px;max-height:16px;border-radius:50%;
  background:var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat;
  box-shadow:0 0 0 1.5px var(--papier);pointer-events:none;z-index:1}
.brett-huelle.setzen .zelle.tritt .tritt-mark{animation:tritt 1.2s ease-in-out infinite}
@keyframes tritt{50%{transform:scale(1.25)}}
.legende{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;padding:8px 4px 0;font-size:.74rem;color:#5a524a}
.legende span{display:flex;align-items:center;gap:6px}
.legende i{width:14px;height:14px;border-radius:3px;display:inline-block}
.lg-tritt{background:var(--gruen) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.5l2.6 2.6L12 5.6' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/80% no-repeat;border-radius:50%!important}
.lg-sperre{background:var(--r0) repeating-linear-gradient(135deg,rgba(43,39,35,.35) 0 2px,transparent 2px 5px);border:1px solid #b9ae9c}

/* Belohnung */
.sterne{letter-spacing:1px;white-space:nowrap}
.sterne i{font-style:normal;color:#4a4c55}
.sterne i.voll{color:var(--gold)}
.fall-karte .sterne{margin-left:6px;font-size:.9rem}
.start-rang{all:unset;cursor:pointer;display:block;width:min(100%,340px);box-sizing:border-box}
.start-rang.breit{width:100%;margin:0 0 14px}
.start-rang:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:12px}
.rang{border:1px solid var(--kante);background:var(--tinte2);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:8px;text-align:left}
.rang-kopf{display:flex;gap:12px;align-items:center}
.rang-abz{flex:none;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:"Bodoni Moda",Georgia,serif;
  font-weight:700;font-size:1.2rem;color:var(--tinte);background:radial-gradient(circle at 35% 30%,#f0d99b,var(--gold) 60%,#8e6f33);
  box-shadow:inset 0 0 0 3px rgba(22,23,27,.25)}
.rang-name{font-family:"Bodoni Moda",Georgia,serif;font-size:1.1rem;font-weight:700}
.rang-zahl{font-size:.82rem;color:var(--gold);font-variant-numeric:tabular-nums}
.serie{color:#e8b06a}
.balken-rang{height:6px;border-radius:3px;background:var(--kante);overflow:hidden}
.balken-rang span{display:block;height:100%;background:linear-gradient(90deg,#8e6f33,var(--gold));border-radius:3px;transition:width 1.1s cubic-bezier(.2,.8,.2,1)}
.rang-naechster{font-size:.78rem;color:var(--leise)}
.rang.kompakt{padding:10px 12px}
.zwischen{font-family:"Bodoni Moda",Georgia,serif;font-size:1.2rem;margin:22px 0 10px}
.abzeichen{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px}
.abz{display:flex;gap:10px;align-items:center;border:1px solid var(--kante);border-radius:10px;padding:10px;background:var(--tinte2);opacity:.55}
.abz.hat{opacity:1;border-color:#6b5a33}
.abz b{display:block;font-size:.92rem}
.abz span{font-size:.8rem;color:var(--leise)}
.abz-siegel{flex:none;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;border:2px dashed var(--kante);color:var(--leise)}
.abz.hat .abz-siegel{border:2px solid var(--gold);color:var(--gold);background:rgba(201,164,92,.12)}
.unter.klein{font-size:.8rem;margin-top:14px}
.ton{display:flex;gap:6px;justify-content:center;margin-top:6px}
.ton button{border:1px solid var(--kante);background:none;border-radius:14px;padding:4px 11px;font-size:.8rem;color:var(--leise);text-decoration:line-through}
.ton button.an{color:var(--text);background:var(--tinte2);text-decoration:none}
.feier{display:flex;align-items:center;gap:10px;margin:2px 0 12px;font-size:1.7rem}
.feier .sterne i{display:inline-block;animation:stern .5s cubic-bezier(.3,1.7,.5,1) both}
.feier .sterne i:nth-child(2){animation-delay:.18s} .feier .sterne i:nth-child(3){animation-delay:.36s}
@keyframes stern{from{transform:scale(0) rotate(-40deg);opacity:0}to{transform:none;opacity:1}}
.feier .dazu{font-size:.9rem;color:var(--gold);font-weight:700}
.feier-rang{display:flex;flex-direction:column;gap:6px;border-top:1px solid var(--kante);padding-top:10px;margin-bottom:8px}
.feier-rang .rang-name{font-size:1rem}
.toast-abz{margin:8px 0 0;padding:8px 10px;border-radius:8px;background:rgba(201,164,92,.14);border:1px solid #6b5a33;color:var(--gold);font-size:.88rem;
  animation:stern .5s .6s both}
.befoerdert{display:grid;place-items:center;margin:4px 0 12px}
.befoerdert span{width:84px;height:84px;border-radius:50%;display:grid;place-items:center;font-family:"Bodoni Moda",Georgia,serif;font-size:2.2rem;
  font-weight:700;color:var(--tinte);background:radial-gradient(circle at 35% 30%,#f7e6b5,var(--gold) 60%,#8e6f33);
  box-shadow:0 0 0 6px rgba(201,164,92,.18),0 0 40px rgba(201,164,92,.45);animation:plopp .6s cubic-bezier(.3,1.6,.5,1) both}
@media (prefers-reduced-motion:reduce){.anleitung.von-rechts,.anleitung.von-links{animation:none} .feier .sterne i,.toast-abz,.befoerdert span,.brett-huelle.setzen .zelle.tritt .tritt-mark{animation:none}}
.zelle .figur.hervor{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold)}
.dialog .geloest-siegel{width:54px;height:54px;border-radius:50%;border:2px solid var(--gold);color:var(--gold);
  display:grid;place-items:center;font-size:1.6rem;margin:0 0 10px;transform:rotate(-8deg)}

/* ---------------- Startbildschirm ---------------- */
body.auf-start .kopf{display:none}
body.auf-start main{max-width:none;padding:0}
.start{position:relative;min-height:100svh;overflow:hidden;display:flex;flex-direction:column;align-items:center;
  justify-content:safe center;gap:10px;padding:calc(28px + var(--oben)) 20px calc(28px + var(--unten));
  background:radial-gradient(120% 70% at 50% 18%,#262833 0%,var(--tinte) 62%)}
.regen{position:absolute;inset:0;pointer-events:none;opacity:.35}
.regen i{position:absolute;top:-20%;width:1px;height:18%;background:linear-gradient(transparent,rgba(236,232,223,.5));
  animation:regen linear infinite}
@keyframes regen{to{transform:translateY(700%)}}
.start-buehne{position:relative;width:min(62vw,260px);filter:drop-shadow(0 14px 30px rgba(0,0,0,.55))}
.szene{width:100%;height:auto;display:block;transform:rotate(-4deg)}
.sz-feld{fill:var(--papier);stroke:#d8cfbf;stroke-width:1;opacity:0;animation:auf .4s ease-out forwards}
.sz-wand{fill:none;stroke:#2b2723;stroke-width:4;stroke-linecap:square;stroke-dasharray:900;stroke-dashoffset:900;
  animation:zeichnen 1.1s ease-in-out forwards}
.sz-fenster{fill:var(--blau);opacity:0;animation:auf .3s 1.4s forwards}
.sz-ring{fill:#fff;stroke:#2b2723;stroke-width:2}
.sz-person{opacity:0;transform-box:fill-box;transform-origin:center;animation:plopp .45s cubic-bezier(.3,1.6,.5,1) forwards}
.sz-opfer{opacity:0;transform-box:fill-box;transform-origin:center;animation:plopp .45s cubic-bezier(.3,1.6,.5,1) forwards,
  puls 1.6s 3.7s ease-in-out infinite}
.sz-opfer circle{fill:var(--rot);stroke:#fff;stroke-width:2}
.sz-opfer path{stroke:#fff;stroke-width:3;stroke-linecap:round}
@keyframes auf{to{opacity:1}}
@keyframes zeichnen{to{stroke-dashoffset:0}}
@keyframes plopp{from{opacity:0;transform:scale(.3)}to{opacity:1;transform:scale(1)}}
@keyframes puls{50%{transform:scale(1.12)}}
.start-text{position:relative;text-align:center;max-width:420px;display:flex;flex-direction:column;align-items:center;gap:10px}
.start-ueber{margin:14px 0 0;font-size:.74rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold)}
.start-titel{margin:0;font-family:"Bodoni Moda",Georgia,serif;font-weight:700;line-height:.9;display:flex;flex-direction:column}
.start-titel span{font-size:1.25rem;letter-spacing:.34em;text-transform:uppercase;font-weight:500;margin-bottom:6px}
.start-titel em{font-size:clamp(3rem,15vw,4.4rem);color:var(--rot-hell);font-style:italic;letter-spacing:-.01em}
.start-intro{margin:4px 0 6px;color:var(--leise);font-size:.95rem;text-wrap:balance}
.start-knoepfe{display:flex;flex-direction:column;gap:8px;width:min(100%,340px)}
.start-knoepfe button{border:1px solid var(--kante);background:var(--tinte2);border-radius:10px;padding:11px 14px;font-size:.95rem}
.start-knoepfe .gross{background:var(--rot);border-color:var(--rot);color:#fff;font-weight:700;font-size:1.05rem;padding:14px;
  box-shadow:0 8px 24px rgba(194,59,46,.35);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.start-zeile{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.start-stand{margin:0;font-size:.82rem;color:var(--gold)}
.sprachen{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin-top:8px}
.sprachen button{border:1px solid transparent;background:none;border-radius:14px;padding:4px 10px;font-size:.8rem;color:var(--leise)}
.sprachen button.an{border-color:var(--kante);color:var(--text);background:var(--tinte2)}
@media (prefers-reduced-motion:reduce){
  .regen{display:none}
  .sz-feld,.sz-wand,.sz-fenster,.sz-person,.sz-opfer{animation:none;opacity:1;stroke-dashoffset:0}
}

/* ---------------- Anleitung ---------------- */
.anleitung{display:flex;flex-direction:column;gap:12px;min-height:calc(100svh - 70px - var(--oben))}
.anleitung.von-rechts{animation:vonRechts .28s ease-out} .anleitung.von-links{animation:vonLinks .28s ease-out}
@keyframes vonRechts{from{transform:translateX(40px);opacity:0}} @keyframes vonLinks{from{transform:translateX(-40px);opacity:0}}
body.in-anleitung main{padding-bottom:0}
.anleitung h1{font-family:"Bodoni Moda",Georgia,serif;font-size:1.7rem;line-height:1.1;margin:4px 0 0;text-wrap:balance}
.anleitung p{margin:0;color:#d6d1c7;max-width:62ch}
.punkte{display:flex;gap:6px;justify-content:center;padding-top:4px}
.punkte button{width:8px;height:8px;border-radius:50%;border:0;padding:0;background:var(--kante)}
.punkte button.an{background:var(--gold);width:22px;border-radius:4px}
.demo{max-width:300px;width:100%;align-self:center}
.demo .brett-huelle{padding:6px 6px 6px 2px}
.demo .raumname{font-size:.46rem}
.glossar{margin:0;display:flex;flex-direction:column;gap:2px}
.glossar div{display:grid;grid-template-columns:minmax(110px,38%) 1fr;gap:10px;padding:8px 0;border-bottom:1px solid var(--kante)}
.glossar dt{font-weight:700;color:var(--gold);font-size:.9rem}
.glossar dd{margin:0;font-size:.9rem;color:#d6d1c7}
/* Knoepfe ueber der Gestenleiste (Rene 23.09.: lagen genau auf dem unteren Bildschirmrand) */
.anleitung-knoepfe{position:sticky;bottom:0;display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:auto;
  padding:14px 0 calc(28px + var(--unten));background:linear-gradient(transparent,var(--tinte) 30%)}
.wisch-hinweis{flex:1;text-align:center;font-size:.75rem;color:var(--leise)}
.anleitung-knoepfe button{border:1px solid var(--kante);background:var(--tinte2);border-radius:8px;padding:10px 16px}
.anleitung-knoepfe .haupt{background:var(--rot);border-color:var(--rot);color:#fff;font-weight:700;min-width:120px}

/* Werbung: Platz fuer das AdMob-Banner (ca. 60 px) unten auf der Fallliste */
body.mit-banner main{padding-bottom:calc(90px + 60px)}
.werbung-attrappe .nr{font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.werbung-attrappe .balken{height:4px;background:var(--kante);border-radius:2px;overflow:hidden}
.werbung-attrappe .balken span{display:block;height:100%;width:0;background:var(--gold);animation:laden linear forwards}
@keyframes laden{to{width:100%}}
.regeln ol{padding-left:20px;margin:0 0 10px}
.regeln li{margin-bottom:6px}
@media (prefers-reduced-motion:no-preference){.dialog{animation:rein .18s ease-out}
  @keyframes rein{from{transform:translateY(8px);opacity:0}to{transform:none;opacity:1}}}

/* Schwierigkeit mit Namen und Farbe (Rene 23.09.) — oben in der Leiste bleibt sie beim Scrollen sichtbar */
.stufe-chip{display:inline-flex;align-items:center;gap:5px;border-radius:12px;padding:2px 9px 2px 7px;font-size:.74rem;font-weight:700;
  letter-spacing:.02em;text-transform:none;border:1px solid currentColor;white-space:nowrap;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.stufe-chip b{font-weight:400;letter-spacing:1px;font-size:.62rem}
.stufe-chip.s1{color:#7fc08f} .stufe-chip.s2{color:#d9b56a} .stufe-chip.s3{color:#e8925a} .stufe-chip.s4{color:#ec6b5e}
.marke.im-fall{display:flex;align-items:center;gap:10px;font-size:1.05rem}
.kopf-fall{font-family:"Bodoni Moda",Georgia,serif;font-weight:700}
.fall-kopf .nr{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.fall-karte .stufe{display:flex;align-items:center;gap:6px;flex-wrap:wrap;letter-spacing:0}
.fall-karte .stufe .stufe-chip{font-size:.68rem;padding:1px 7px 1px 6px}
.fall-karte .groesse{color:var(--leise);font-size:.74rem}
.marke.im-fall .kopf-fall{color:var(--text);font-style:normal}
.marke.im-fall .stufe-chip{font-style:normal}

/* Web-Demo (colorbynumberdots.com/mysteries/): Buchknopf gold, gesperrte Faelle gedimmt mit Schloss */
.demo-schild{margin:10px 0 0;padding:3px 12px;border:1px solid var(--gold);border-radius:14px;color:var(--gold);font-size:.74rem;letter-spacing:.12em;text-transform:uppercase}
.buch-link{display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #6b5a33;background:rgba(201,164,92,.12);color:var(--gold);
  border-radius:10px;padding:11px 14px;font-weight:700;text-decoration:none;text-align:center}
.buch-link:hover{background:rgba(201,164,92,.2)}
.buch-link.gross{margin:6px 0 10px;padding:13px 14px}
.demo-hinweis{color:var(--leise);font-size:.88rem;margin:0 0 12px}
.demo-hinweis .buch-link{margin-top:8px}
.zur-seite{color:var(--leise);font-size:.8rem;text-decoration:none;margin-top:10px}
.zur-seite:hover{color:var(--text)}
.fall-karte.zu{opacity:.55}
.fall-karte.zu .t{color:var(--leise)}
.schloss{font-style:normal;margin-left:4px}
.nurlese{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}