/* Übernommen aus dem Mockup „Zwei Geräte, zwei Rollen".
   Schriften bewusst aus dem System: Ein Playtest darf nicht daran scheitern,
   dass eine Schrift nicht lädt, während acht Leute am Tisch sitzen. */
:root{
  --tinte:#080A11; --buehne:#10131D; --erhoben:#171B28; --linie:#252A3A;
  --messing:#C9A227; --messing-tief:#8A7222; --ochsenblut:#7A2027;
  --papier:#E9E3D5; --papier-schatten:#D9D1BE; --papier-tinte:#221F1A;
  --stumm:#7C8398;
  --anzeige:Georgia,'Times New Roman',serif;
  --text:system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--tinte);color:#DDE1EA;font-family:var(--text);
  -webkit-font-smoothing:antialiased}

.marke{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;
  text-transform:uppercase;color:var(--stumm)}
.marke b{color:var(--messing);font-weight:500}

/* ─────────────────────────── Regie-Gerät ─────────────────────────── */
.regie{max-width:1180px;margin:0 auto;padding:28px 20px 60px}
.kopf{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
  border-bottom:1px solid var(--linie);padding-bottom:18px;flex-wrap:wrap}
.kopf h1{font-family:var(--anzeige);font-weight:400;font-size:clamp(24px,3.4vw,38px);margin:0}

.reiter{display:flex;flex-wrap:wrap;border:1px solid var(--linie);border-radius:2px;
  overflow:hidden;margin:26px 0}
.reiter button{flex:1 1 130px;background:transparent;border:0;border-right:1px solid var(--linie);
  color:var(--stumm);font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  text-transform:uppercase;padding:14px 8px;cursor:pointer}
.reiter button:last-child{border-right:0}
.reiter button[aria-selected="true"]{background:var(--messing);color:var(--tinte);font-weight:600}
.reiter button:hover:not([aria-selected="true"]){background:#12162170;color:#fff}

.kaptitel h2{font-family:var(--anzeige);font-weight:400;font-size:clamp(26px,3.6vw,34px);
  margin:8px 0 0;line-height:1.12}

.anzeigen{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin:22px 0 0}
.anzeige{background:var(--erhoben);border:1px solid var(--linie);border-radius:3px;padding:14px 16px}
.anzeige .k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--stumm)}
.anzeige .v{font-family:var(--mono);font-size:24px;margin-top:6px;color:#fff}
.anzeige.kueche{border-color:var(--messing-tief);background:#1C1A10}
.anzeige.kueche .v{color:var(--messing);font-size:15px;line-height:1.4;font-family:var(--text);font-weight:500}
.anzeige.warnung .v{color:#FF8A7A}

.ansage{margin:24px 0 0;border-left:2px solid var(--ochsenblut);padding:2px 0 2px 18px}
.ansage p{font-family:var(--anzeige);font-size:clamp(17px,2.2vw,20px);line-height:1.55;margin:8px 0 0;color:#EDEFF4}

.gaeste{margin:26px 0 0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.pip{min-width:34px;height:34px;padding:0 8px;border-radius:17px;border:1px solid var(--linie);
  display:grid;place-items:center;font-family:var(--mono);font-size:11px;color:var(--stumm)}
.pip.gelesen{border-color:var(--messing-tief);color:var(--messing);background:#1A180F}
.gaeste .hinweis{font-size:12.5px;color:var(--stumm);margin-left:6px}

.knopfzeile{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}
.knopf{background:var(--messing);color:var(--tinte);border:0;border-radius:2px;
  font-family:var(--text);font-weight:600;font-size:15px;padding:15px 26px;cursor:pointer}
.knopf:hover{background:#E0B838}
.knopf[disabled]{opacity:.4;cursor:default}
.knopf.geist{background:transparent;color:var(--stumm);border:1px solid var(--linie)}

/* ─────────────────────────── Gästehandy ─────────────────────────── */
.gast{max-width:460px;margin:0 auto;padding:14px}
.karte{background:var(--papier);color:var(--papier-tinte);border-radius:16px;padding:24px 20px;
  min-height:calc(100vh - 28px);display:flex;flex-direction:column}
.rolle{border-bottom:1px solid var(--papier-schatten);padding-bottom:15px}
.rolle .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:#8A8578}
.rolle h1{font-family:var(--anzeige);font-weight:400;font-size:27px;margin:7px 0 4px;line-height:1.1}
.rolle .fn{font-size:13px;color:#6E6A5E}
.rolle .txt{font-size:14px;line-height:1.55;margin:12px 0 0}

.block{margin-top:22px}
.block .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:#8A8578;margin-bottom:10px;display:flex;justify-content:space-between;gap:8px}
.block ul{margin:0;padding:0;list-style:none}
.block li{font-size:14.5px;line-height:1.5;padding:10px 0 10px 16px;
  border-top:1px solid var(--papier-schatten);position:relative}
.block li:before{content:"";position:absolute;left:0;top:17px;width:5px;height:5px;
  background:var(--papier-tinte);border-radius:50%}
.block li.neu{font-weight:600}
.block li.neu:before{background:var(--ochsenblut)}
.block li em{font-style:normal;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  color:var(--ochsenblut);text-transform:uppercase;display:block;margin-bottom:4px}

.geheim{background:#DED6C2;border:1px solid var(--papier-schatten);border-radius:3px;
  padding:15px;margin-top:22px}
.geheim .k{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--ochsenblut);margin-bottom:8px}
.geheim p{margin:0;font-size:13.5px;line-height:1.5}

.versiegelt{margin-top:16px;border:1px dashed #B9B09A;border-radius:3px;padding:13px 14px;
  display:flex;gap:11px;align-items:center;color:#7E7869;font-size:12.5px;line-height:1.4}
.wachs{width:20px;height:20px;border-radius:50%;background:var(--ochsenblut);flex:0 0 auto}

.weglegen{margin-top:auto;padding-top:22px;border-top:1px solid var(--papier-schatten)}
.weglegen p{font-family:var(--anzeige);font-size:16px;line-height:1.45;color:#4A463D;margin:0 0 14px}
.weglegen small{display:block;font-family:var(--text);font-size:12px;color:#8A8578;margin-top:8px}
.gknopf{width:100%;background:var(--ochsenblut);color:#fff;border:0;border-radius:3px;
  font-family:var(--text);font-weight:600;font-size:16px;padding:16px;cursor:pointer}
.gknopf.ruhe{background:transparent;color:#8A8578;border:1px solid var(--papier-schatten)}

/* Der stille Bildschirm zwischen den Kapiteln — das Gegenteil einer App,
   die Aufmerksamkeit will. */
.ruhezustand{min-height:calc(100vh - 28px);display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:18px;padding:40px 24px}
.ruhezustand .siegel{width:54px;height:54px;border-radius:50%;background:var(--ochsenblut);opacity:.85}
.ruhezustand h2{font-family:var(--anzeige);font-weight:400;font-size:23px;margin:0;color:#DDE1EA}
.ruhezustand p{color:var(--stumm);font-size:14.5px;line-height:1.6;max-width:30ch;margin:0}

.formular{display:flex;flex-direction:column;gap:12px;margin-top:20px}
.formular input{background:#fff;border:1px solid var(--papier-schatten);border-radius:3px;
  padding:15px;font-size:16px;font-family:var(--text);color:var(--papier-tinte)}
.fehler{color:#B4342F;font-size:13.5px;margin:0}

/* ─────────────────────────── Einladen (QR) ───────────────────────────
   Der Bildschirm, den der Gastgeber in die Runde dreht. Bewusst hell und
   randvoll: Ein QR-Code auf dunklem Grund wird von vielen Kameras bei
   Kerzenlicht nicht erkannt. */
.einladen{position:fixed;inset:0;background:var(--tinte);z-index:50;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;
  /* Oben Platz für den Schließen-Knopf: Auf einem Handy lag er sonst quer über
     der Überschrift. Und scrollbar, weil die Requisitenliste länger ist als
     jedes Telefon. */
  padding:76px 24px 32px;overflow-y:auto}
.einladen[hidden]{display:none}
.einladen h2{font-family:var(--anzeige);font-weight:400;font-size:clamp(24px,3.4vw,34px);margin:0;text-align:center}
.qrfeld{background:#fff;border-radius:14px;padding:18px;line-height:0}
.qrfeld svg{width:min(58vh,58vw,440px);height:auto;display:block}
.raumcode{font-family:var(--mono);font-size:clamp(28px,5vw,46px);letter-spacing:.22em;
  color:var(--messing);margin:0}
.einladen .weg{color:var(--stumm);font-size:14.5px;text-align:center;max-width:46ch;margin:0;line-height:1.6}
.einladen .weg b{color:#DDE1EA;font-weight:600}
.einladen .zu{position:fixed;top:20px;right:22px;z-index:1}
.zweitqr{display:flex;align-items:center;gap:14px;margin-top:6px;color:var(--stumm);font-size:12.5px}
.zweitqr .qrfeld{padding:8px;border-radius:8px}
.zweitqr .qrfeld svg{width:96px}

/* ───────────────────────── Rollenwahl ─────────────────────────
   Der Gast sucht sich seine Figur selbst aus. Eine Zuteilung nach
   Beitrittsreihenfolge kann nicht wissen, wer welche Rolle spielen möchte —
   und das am Tisch zu tauschen, kostet mehr Zeit als die Wahl. */
.wahl{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.wahl button{width:100%;text-align:left;background:#fff;border:1px solid var(--papier-schatten);
  border-radius:6px;padding:14px 16px;cursor:pointer;font-family:var(--text);color:var(--papier-tinte)}
.wahl button:hover{border-color:var(--ochsenblut)}
.wahl .nam{font-family:var(--anzeige);font-size:19px;line-height:1.2;display:block}
.wahl .fun{font-size:12.5px;color:#6E6A5E;display:block;margin-top:3px}
.wahl .anr{font-size:12.5px;color:#8A8578;display:block;margin-top:6px;line-height:1.45}
.wahl .red{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ochsenblut);display:block;margin-top:6px}

/* Beweisstücke: kein Wissen, sondern eine Handlungsaufforderung — deshalb
   optisch abgesetzt vom Block „Was Sie wissen". */
.beweise{border-left:2px solid var(--ochsenblut);padding-left:13px}
.beweise li:before{border-radius:0;width:6px;height:2px;top:19px;background:var(--ochsenblut)}
.beweise .hinw{margin:11px 0 0;font-size:12px;line-height:1.45;color:#7E7869;
  border-top:1px solid var(--papier-schatten);padding-top:10px}

/* Auflösung — nur auf dem Regie-Gerät, am Ende des Abends. */
.aufl{margin-top:18px}
.aufl .kopf{background:var(--ochsenblut);color:#F3EEE0;border-radius:4px;padding:16px 17px}
.aufl .kopf h3{margin:0 0 3px;font-family:var(--anzeige);font-weight:400;font-size:24px;line-height:1.1}
.aufl .kopf p{margin:0;font-size:13px;line-height:1.5;opacity:.86}
.aufl ol{margin:14px 0 0;padding:0;list-style:none;counter-reset:kette}
.aufl li{counter-increment:kette;position:relative;padding:12px 0 12px 30px;
  border-top:1px solid rgba(255,255,255,.09);font-size:13.5px;line-height:1.5}
.aufl li:before{content:counter(kette);position:absolute;left:0;top:12px;width:19px;height:19px;
  border:1px solid var(--ochsenblut);border-radius:50%;font-family:var(--mono);font-size:10px;
  display:flex;align-items:center;justify-content:center;color:var(--ochsenblut)}
.aufl li .fiel{display:block;margin-top:5px;font-size:12.5px;color:#9A9384}

/* Gefundene Requisiten gehören allen — anderer Rand als das eigene Material. */
.funde{border-left:2px solid #8A8578;padding-left:13px}
.funde li:before{border-radius:0;width:6px;height:6px;transform:rotate(45deg);top:16px;background:#8A8578}

/* Vorbereitung: was der Gastgeber vorher in die Wohnung legt. */
.vorbereitung{display:grid;gap:14px}
.requisit{border:1px solid rgba(255,255,255,.1);border-radius:4px;padding:14px;display:grid;
  grid-template-columns:1fr auto;gap:12px;align-items:center;text-align:left}
/* Der Freigabeknopf ist der Notausgang, nicht der Hauptweg — er darf die Karte
   nicht beherrschen. Auf dem Handy nahm er zuvor die halbe Höhe ein. */
.requisit .knopf{margin-top:10px;padding:7px 12px;font-size:12px;width:auto;display:inline-block}
.requisit.fertig{border-color:var(--ochsenblut)}
.requisit .was{font-size:15px;line-height:1.35}
.requisit .wo{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:#9A9384;margin-top:5px;display:block}
.requisit .code{width:96px;height:96px;background:#fff;border-radius:3px;padding:5px}
.requisit .code svg{width:100%;height:100%;display:block}

/* ── Einrichten: der Bildschirm vor dem Abend ────────────────────────────
   Ein Formular, kein Spielbrett. Deshalb ruhiger als die Regie: eine Spalte,
   große Felder, und der einzige Knopf ganz unten. */
.einrichten-seite{max-width:720px}
.ein-vor{color:var(--stumm);font-size:15px;line-height:1.65;margin:0 0 22px;max-width:60ch}
.ein-raster{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  margin-bottom:20px}
.ein-feld{display:block;margin-bottom:18px}
.ein-was{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--messing);margin-bottom:6px}
.ein-dazu{display:block;font-size:12px;color:var(--stumm);line-height:1.5;margin-bottom:6px}
.ein-feld input[type=text]{width:100%;background:#0F1218;color:#E7EAF0;
  border:1px solid rgba(255,255,255,.13);border-radius:5px;padding:12px 13px;font:inherit;font-size:15px}
.ein-feld input[type=text]:focus{outline:none;border-color:var(--messing)}
.ein-rollen{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.ein-rolle{display:flex;align-items:center;gap:8px;border:1px solid rgba(255,255,255,.13);
  border-radius:999px;padding:8px 15px 8px 12px;font-size:13.5px;color:var(--stumm);cursor:pointer}
.ein-rolle input{accent-color:var(--ochsenblut)}
.ein-fehler{background:rgba(122,46,46,.22);border:1px solid var(--ochsenblut);border-radius:5px;
  padding:13px 15px;color:#F0D9D9;font-size:14px;line-height:1.5;margin:0 0 18px}

.ein-lauf{text-align:center;padding:30px 0}
.ein-balken{height:5px;background:rgba(255,255,255,.09);border-radius:3px;overflow:hidden;
  margin:16px auto 14px;max-width:420px}
.ein-balken span{display:block;height:100%;width:5%;background:var(--messing);
  transition:width .6s ease}
.ein-schritt{font-size:15px;color:#DDE1EA;margin:0 0 8px;min-height:1.4em}
.ein-lauf .ein-dazu{max-width:46ch;margin:0 auto}
.ein-bedarf{border:1px dashed rgba(255,255,255,.16);border-radius:5px;padding:14px 16px;
  margin:0 0 24px;color:var(--stumm);font-size:13.5px;line-height:1.6}
.ein-bedarf p{margin:0 0 .5em}
.ein-bedarf p:last-child,.ein-bedarf ul:last-child{margin-bottom:0}
.ein-bedarf strong{color:#DDE1EA}
.ein-bedarf ul{margin:0;padding-left:1.1em}

/* Fallauswahl: zwei Karten, keine Liste — die Wahl hängt an drei Zahlen. */
/* ⚠ minmax(220px,…) zwingt die Spalte auf 220px, auch wenn das Fenster
   schmaler ist — die Karten schoben sich rechts aus dem Bild und die Seite
   ließ sich quer scrollen. min() lässt sie unter 220px schrumpfen. */
.ein-faelle{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(220px,100%),1fr));
  margin:0 0 20px}
.ein-fall{text-align:left;background:#0F1218;border:1px solid rgba(255,255,255,.13);
  border-radius:6px;padding:14px 16px;color:var(--stumm);cursor:pointer;font:inherit;display:block}
.ein-fall:hover{border-color:rgba(255,255,255,.28)}
.ein-fall.an{border-color:var(--messing);background:#141821}
.ein-fall-titel{display:block;font-family:var(--anzeige);font-size:19px;color:#E7EAF0;
  margin-bottom:5px}
.ein-fall-zeile{display:block;font-size:12.5px;line-height:1.5}
.ein-fall.an .ein-fall-zeile{color:#B9BECB}
.ein-feld input[type=time]{background:#0F1218;color:#E7EAF0;border:1px solid rgba(255,255,255,.13);
  border-radius:5px;padding:11px 13px;font:inherit;font-size:15px;color-scheme:dark}
.ein-feld input[type=time]:focus{outline:none;border-color:var(--messing)}

/* Rechtliches: eine Leseseite, kein Spielbrett. */
.recht{max-width:680px}
.recht h2{font-family:var(--anzeige);font-weight:400;font-size:24px;margin:34px 0 10px;
  color:#E7EAF0;border-top:1px solid rgba(255,255,255,.1);padding-top:22px}
.recht h3{font-family:var(--mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--messing);margin:24px 0 8px;font-weight:400}
.recht p{color:var(--stumm);line-height:1.7;font-size:15px;margin:0 0 12px}
.recht b{color:#DDE1EA;font-weight:600}
.recht a{color:var(--messing)}
.recht-liste{margin:0 0 14px;padding-left:1.1em;color:var(--stumm);line-height:1.7;font-size:15px}
.recht-liste li{margin-bottom:8px}
.recht-hinweis{border:1px dashed rgba(255,255,255,.18);border-radius:5px;padding:14px 16px;
  margin-top:28px !important}
.fusszeile{margin-top:26px;padding-top:14px;border-top:1px solid rgba(255,255,255,.08);
  text-align:center;font-size:12px}
.fusszeile a{color:var(--stumm)}

/* Ohne Verbindung: kein Alarm, aber auch keine Beschwichtigung. */
.ohneNetz{margin:14px 0 0;padding:11px 13px;border:1px dashed #B9B09A;border-radius:4px;
  font-size:12.5px;line-height:1.5;color:#7E7869;background:rgba(0,0,0,.03)}
.karte > .ohneNetz{margin:0 0 18px}

/* Ein Hinweis, keine Warnung: Der Abend läuft, aber eine Stelle könnte haken. */
.schwach{margin:18px 0;border:1px dashed rgba(255,255,255,.2);border-radius:5px;padding:15px 17px}
.schwach-marke{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--messing);margin:0 0 8px}
.schwach p{margin:0 0 10px;font-size:13.5px;line-height:1.55;color:var(--stumm)}
.schwach ul{margin:0;padding-left:1.1em;color:#B9BECB;font-size:13px;line-height:1.55}
.schwach li{margin-bottom:6px}

/* ─────────────────────────── Kasse ───────────────────────────
   Bewusst schmal und ohne Ablenkung: Wer hier ist, hat sich entschieden.
   Jeder zusätzliche Weg nach draußen ist ein Weg aus dem Kauf heraus. */
.kauf{max-width:620px}
.kauf-vor{color:var(--stumm);line-height:1.6;font-size:15px;margin:24px 0 8px}
.kauf-summe[hidden]{display:none}
.kauf-summe{display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;
  border-top:1px solid var(--linie);border-bottom:1px solid var(--linie);
  padding:16px 0;margin:22px 0 20px}
.kauf-summe-was{font-family:var(--anzeige);font-size:17px;color:#E7EAF0}
.kauf-summe-preis{font-family:var(--anzeige);font-size:26px;color:var(--messing);text-align:right}
.kauf-summe-steuer{grid-column:1/-1;font-size:12px;color:var(--stumm)}
.kauf-haken{display:flex;gap:11px;align-items:flex-start;margin:0 0 14px;
  font-size:13.5px;line-height:1.5;color:var(--stumm);cursor:pointer}
.kauf-haken input{margin-top:2px;accent-color:var(--ochsenblut);flex:0 0 auto}
.kauf-haken a{color:var(--messing)}
.kauf-fuss{font-size:12.5px;color:var(--stumm);line-height:1.6;margin-top:26px}
.kauf-fuss a{color:var(--stumm)}
.kauf-zugang{border:1px solid var(--messing-tief);border-radius:4px;padding:20px;margin:22px 0}
.kauf-zugang-was{font-family:var(--mono);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--messing);margin:0 0 12px}
.kauf-zugang .knopf{display:inline-block;text-decoration:none}
.kauf-zugang-dazu{font-size:12.5px;color:var(--stumm);line-height:1.6;margin:14px 0 0}
.kauf-code{display:block;font-family:var(--mono);font-size:11.5px;color:#E7EAF0;
  background:#0F1218;border-radius:3px;padding:9px 11px;margin-top:7px;word-break:break-all}

/* Der gekaufte Fall — eine Feststellung, keine Auswahl. Deshalb ohne Rahmen,
   der zum Antippen einlädt, und ohne Schwebezustand. */
.ein-fall-fest{background:#0F1218;border-left:3px solid var(--messing);border-radius:0 6px 6px 0;
  padding:16px 18px;margin:0 0 20px}
.ein-fall-fest .ein-was{margin-bottom:8px}
.ein-fall-fest .ein-fall-titel{display:block;font-family:var(--anzeige);font-size:20px;color:#E7EAF0}
.ein-fall-fest .ein-fall-zeile{display:block;font-size:13px;color:var(--stumm);line-height:1.6;margin-top:5px}

/* ─────────────────────────── Betrieb ───────────────────────────
   Kais eigene Seite. Bewusst nüchtern: Hier wird nichts verkauft und nichts
   inszeniert, hier wird nachgesehen und aufgeräumt. */
.betrieb{max-width:920px}
.bet-ueber{font-family:var(--anzeige);font-weight:400;font-size:19px;color:#E7EAF0;
  margin:34px 0 14px;border-bottom:1px solid var(--linie);padding-bottom:8px}
.bet-ueber span{color:var(--stumm);font-size:15px}
.bet-stand{display:flex;flex-wrap:wrap;gap:6px}
.bet-ampel{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;
  padding:5px 9px;border-radius:3px;border:1px solid}
.bet-ampel.gut{color:#8FBF8F;border-color:rgba(143,191,143,.35);background:rgba(143,191,143,.08)}
.bet-ampel.schlecht{color:#E0A0A0;border-color:var(--ochsenblut);background:rgba(122,32,39,.18)}

.bet-raum{border:1px solid var(--linie);border-radius:6px;background:#0F1218;
  padding:16px 18px;margin:0 0 12px}
.bet-raum-kopf{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;margin-bottom:14px}
.bet-code{font-family:var(--mono);font-size:17px;letter-spacing:.1em;color:var(--messing)}
.bet-raum-was{font-size:13px;color:var(--stumm)}
.bet-marke{font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 8px;border-radius:3px;margin-left:auto}
.bet-marke.kauf{color:#E7EAF0;background:rgba(201,162,39,.16);border:1px solid var(--messing-tief)}
.bet-marke.probe{color:var(--stumm);border:1px solid var(--linie)}
.bet-raum-links{display:flex;flex-wrap:wrap;gap:8px}
.bet-raum-links .knopf{font-size:13px;padding:9px 15px;text-decoration:none}
.bet-weg{color:#E0A0A0 !important;border-color:var(--ochsenblut) !important}

/* ⚠ Über den Vorbereitungsschirm, nicht darunter. Beide sind `.einladen` mit
   z-index 50; der große Code steht im Markup davor und lag deshalb dahinter —
   er war offen und gefüllt und trotzdem unsichtbar. */
#grossschirm{z-index:70}

/* Der Code groß genug, dass eine Kamera ihn vom Bildschirm liest — bei
   Kerzenlicht braucht sie jeden Millimeter. Weiß hinterlegt: Ein QR-Code auf
   dunklem Grund wird von vielen Kameras gar nicht erkannt. */
.grosscode{background:#fff;border-radius:8px;padding:18px;margin:22px auto;
  width:min(74vw,340px);height:min(74vw,340px);display:flex;align-items:center;justify-content:center}
.grosscode svg{width:100%;height:100%}
.vorbereitung .code{background:transparent;border:0;padding:0;cursor:pointer}
.weg.klein{font-size:12.5px;opacity:.75}

/* Das Suchfeld auf dem Gästehandy — heller Grund wie die Rollenkarte. */
.karte #suchfeld{background:#fff;color:var(--papier-tinte);border:1px solid var(--papier-schatten);
  border-radius:8px;padding:13px 14px;font:inherit;font-size:16px}
.karte #suchfeld:focus{outline:none;border-color:var(--messing-tief)}
.gknopf.geist{background:transparent;color:#6E6A5E;border:1px solid var(--papier-schatten)}