/* =====================================================================
   Meridian — Oberfläche
   =====================================================================

   Wie Beschilderung an einem Betonbau: helles Papier, schwarze Schrift,
   ein Kobaltblau als einzige Signalfarbe, Gelb für das zweite Team.
   Eckig, feine Linien, keine Schatten außer dort, wo Text über dem
   Spielbild stehen muss. Schrift: Archivo in drei Breiten — gestreckt
   für Titel, normal für Text, schmal für Zahlen im HUD.
   ===================================================================== */

:root{
  --papier:#f1efe9;
  --papier-2:#e7e4dc;
  --tinte:#141516;
  --grau:#6c6a64;
  --grau-hell:#a19e96;
  --linie:rgba(20,21,22,.13);
  --linie-stark:rgba(20,21,22,.32);
  --kobalt:#2f5bd8;
  --kobalt-tief:#2249b9;
  --gelb:#e2a313;
  --rot:#d4462f;
  --gruen:#1f8a4c;
  --hud:#fbfaf7;
  --hud-schatten:0 1px 2px rgba(0,0,0,.55),0 0 12px rgba(0,0,0,.25);
  --schrift:"Archivo","Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{margin:0;background:#c7d6e1;color:var(--tinte);font-family:var(--schrift);font-size:15px;line-height:1.45;
  -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased;font-variation-settings:"wdth" 100}
[hidden]{display:none!important}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

#cv{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none;background:#c7d6e1}
body.im-spiel{user-select:none;-webkit-user-select:none}
body.gesperrt #cv{cursor:none}

.breit{font-variation-settings:"wdth" 125}
.schmal{font-variation-settings:"wdth" 70}

/* --- Ladeschirm ---------------------------------------------------------- */

.laden-schirm{position:fixed;inset:0;z-index:50;display:grid;place-content:center;justify-items:center;gap:14px;
  background:var(--papier);color:var(--grau);font-size:13px;letter-spacing:.06em;transition:opacity .5s}
.laden-schirm .marke-zeichen{width:44px;height:44px;color:var(--tinte);animation:drehen 2.4s linear infinite}
.laden-schirm p{margin:0}
body:not(.laedt) .laden-schirm{opacity:0;pointer-events:none}
@keyframes drehen{to{transform:rotateY(360deg)}}

.marke-zeichen{stroke-width:2.6}

/* --- Bausteine ------------------------------------------------------------ */

.kicker{margin:0;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-weight:600;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--grau)}
.kicker i{width:4px;height:4px;background:var(--kobalt);display:inline-block}
.notiz{margin:0;color:var(--grau);font-size:13.5px}

.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 18px;
  border:1.5px solid var(--tinte);border-radius:0;background:transparent;
  font-weight:700;font-size:13px;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;
  font-variation-settings:"wdth" 112;transition:background-color .12s,color .12s,border-color .12s}
.knopf:hover{background:var(--tinte);color:var(--papier)}
.knopf:focus-visible,.symbol:focus-visible,.wahl button:focus-visible,.code-felder input:focus-visible,.feld input:focus-visible{outline:2px solid var(--kobalt);outline-offset:2px}
.knopf:disabled{opacity:.35;cursor:default}
.knopf[aria-disabled="true"]{opacity:.35}
.knopf:disabled:hover{background:transparent;color:inherit}
.knopf svg{width:18px;height:18px}
.knopf.primaer{background:var(--kobalt);border-color:var(--kobalt);color:#fff}
.knopf.primaer:hover{background:var(--kobalt-tief);border-color:var(--kobalt-tief)}
.knopf.gross{height:58px;font-size:15px;justify-content:space-between;padding:0 20px}
.knopf.klein{height:34px;padding:0 12px;font-size:11.5px}
.knopf.leise{border-color:transparent;color:var(--grau);text-transform:none;letter-spacing:.01em;font-weight:500;font-size:14px;font-variation-settings:"wdth" 100}
.knopf.leise:hover{color:var(--tinte);background:transparent;text-decoration:underline;text-underline-offset:4px}

.symbol{display:inline-grid;place-items:center;width:40px;height:40px;border:1.5px solid var(--linie-stark);border-radius:0;background:transparent}
.symbol:hover{border-color:var(--tinte)}
.symbol svg{width:20px;height:20px}
.symbol .aus{display:none}
body.stumm .symbol .an{display:none}
body.stumm .symbol .aus{display:inline}
[data-ton] .aus{display:none}
body.stumm [data-ton] .an{display:none}
body.stumm [data-ton] .aus{display:inline}

.leiste-oben{display:flex;align-items:center;gap:10px}
.luecke{flex:1}
.zurueck{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px 0 6px;border:0;background:none;
  color:var(--tinte);text-decoration:none;font-weight:600;font-size:13px;letter-spacing:.04em}
.zurueck svg{width:18px;height:18px}
.zurueck:hover span{text-decoration:underline;text-underline-offset:4px}

.feld{display:grid;gap:6px}
.feld-titel{font-size:11.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.feld input{height:46px;padding:0 14px;border:1.5px solid var(--linie-stark);border-radius:0;background:#fff;font-size:16px;font-weight:600}
.feld input:focus{border-color:var(--tinte);outline:0}

.fehler{margin:0;min-height:1em;color:var(--rot);font-size:13.5px;font-weight:500}
.fehler:empty{display:none}

/* --- Start ------------------------------------------------------------------ */

.ebene{position:fixed;inset:0;z-index:10}
.start{pointer-events:none}
.tafel-seite{pointer-events:auto;position:absolute;left:0;top:0;bottom:0;width:min(460px,100%);
  background:var(--papier);display:flex;flex-direction:column;gap:26px;padding:18px 34px 22px;overflow-y:auto;
  border-right:1.5px solid var(--tinte)}
.marke{display:grid;gap:14px;margin-top:6vh;min-width:0}
.titel{margin:0;display:flex;align-items:center;gap:12px;font-weight:900;font-size:clamp(38px,11vw,50px);line-height:.9;
  letter-spacing:-.015em;text-transform:uppercase;font-variation-settings:"wdth" 112}
.titel .marke-zeichen{width:.78em;height:.78em;flex:none;color:var(--kobalt);stroke-width:3.2}
.unterzeile{margin:0;font-size:15.5px;color:#3a3936;max-width:36ch}

.formular{display:grid;gap:14px}
.trenner{display:flex;align-items:center;gap:12px;color:var(--grau);font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:600}
.trenner::before,.trenner::after{content:"";flex:1;height:1px;background:var(--linie-stark)}
.beitreten{display:flex;gap:10px}
.code-felder{display:flex;gap:6px;flex:1}
.code-felder input{width:100%;min-width:0;height:52px;text-align:center;border:1.5px solid var(--linie-stark);border-radius:0;background:#fff;
  font-size:24px;font-weight:800;text-transform:uppercase;font-variation-settings:"wdth" 80;caret-color:var(--kobalt)}
.code-felder input:focus{border-color:var(--tinte);outline:0}
.code-felder.falsch input{border-color:var(--rot);animation:wackeln .3s}
@keyframes wackeln{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.beitreten .knopf{height:52px}

.steuerung,.info-tasten{margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:1px;background:var(--linie);border:1px solid var(--linie)}
.steuerung div,.info-tasten div{background:var(--papier);padding:8px 10px;display:grid;gap:1px}
.steuerung dt,.info-tasten dt{font-weight:800;font-size:13px;font-variation-settings:"wdth" 85}
.steuerung dd,.info-tasten dd{margin:0;color:var(--grau);font-size:12.5px}

.fuss{margin-top:auto;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12px;color:var(--grau)}
.fuss a{color:var(--tinte)}
.fuss-notiz{flex-basis:100%}

.ort{position:absolute;right:22px;bottom:18px;margin:0;color:#fff;font-weight:800;font-size:12px;letter-spacing:.2em;text-transform:uppercase;
  text-shadow:var(--hud-schatten);font-variation-settings:"wdth" 120}

/* --- Anleitung als Text unter dem Menü ------------------------------------------
   Die Menüseite (.tafel-seite) scrollt schon von sich aus. .seite-buehne füllt sie
   bis auf einen Streifen von 56px, in dem der Kopf der Anleitung hervorschaut —
   das Menü sieht also aus wie vorher, und man sieht, dass es darunter weitergeht.
   Ist das Menü höher als der Bildschirm, wächst die Bühne mit, und die Anleitung
   folgt darunter. Die Tastenliste hat eine eigene Klasse, weil .steuerung auf
   Touch-Geräten und in niedrigen Fenstern ausgeblendet wird. Text, den das
   SEO-Werkzeug an der Markierung einsetzt (section.seo-text), sieht genauso aus. */

.seite-buehne{flex:none;min-height:calc(100% - 56px);display:flex;flex-direction:column;gap:26px}
.info-text{flex:none;display:grid;gap:12px;padding-top:18px;border-top:1.5px solid var(--tinte);
  user-select:text;-webkit-user-select:text}
.info-text h2{margin:0;font-weight:900;font-size:24px;line-height:1.1;letter-spacing:-.01em;text-transform:uppercase;
  font-variation-settings:"wdth" 112;color:var(--tinte)}
.info-text h3{margin:6px 0 0;font-weight:800;font-size:17px;line-height:1.2;color:var(--tinte)}
.info-text p{margin:0;color:#3a3936;font-size:15px;line-height:1.55}
.info-text a{color:var(--kobalt);font-weight:600;text-underline-offset:3px}
.info-text a:hover{color:var(--kobalt-tief)}
.info-text :is(ul,ol){margin:0;padding-left:20px;display:grid;gap:6px;color:#3a3936;font-size:15px;line-height:1.5}
.info-text .seo-text{display:grid;gap:12px;margin-top:6px}

/* --- Lobby ---------------------------------------------------------------- */

.lobby{display:grid;place-items:center;padding:18px;background:rgba(20,21,22,.18);overflow-y:auto}
.lobby-karte{width:min(1000px,100%);background:var(--papier);border:1.5px solid var(--tinte);padding:14px 22px 22px;display:grid;gap:14px}
.lobby-marke{display:inline-flex;align-items:center;gap:8px;font-weight:900;font-size:14px;letter-spacing:.14em;text-transform:uppercase;font-variation-settings:"wdth" 125}
.lobby-marke .marke-zeichen{width:18px;height:18px;color:var(--kobalt)}
.lobby-raster{display:grid;grid-template-columns:1.05fr 1fr;grid-template-areas:"einladung einstellungen" "spieler einstellungen" "fuss fuss";gap:0;border:1px solid var(--linie-stark)}
.lobby-raster>section{padding:18px 20px}
.einladung{grid-area:einladung;border-bottom:1px solid var(--linie-stark);display:grid;gap:12px}
.spielerliste{grid-area:spieler;display:grid;gap:10px;align-content:start}
.einstellungen{grid-area:einstellungen;border-left:1px solid var(--linie-stark);display:grid;gap:16px;align-content:start;background:var(--papier-2)}
.lobby-fuss{grid-area:fuss;border-top:1px solid var(--linie-stark);display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 20px}
.lobby h2{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--grau);display:flex;gap:8px}
.lobby h2 .zahl{color:var(--tinte)}

.code-gross{display:flex;gap:8px}
.code-gross span{flex:1;max-width:76px;height:84px;display:grid;place-items:center;background:var(--tinte);color:#fff;
  font-weight:800;font-size:46px;font-variation-settings:"wdth" 80}
.code-gross.wartet span{background:var(--papier-2);color:var(--grau-hell);animation:pulsen 1s ease-in-out infinite alternate}
.code-gross.wartet span:nth-child(2){animation-delay:.12s}.code-gross.wartet span:nth-child(3){animation-delay:.24s}
.code-gross.wartet span:nth-child(4){animation-delay:.36s}.code-gross.wartet span:nth-child(5){animation-delay:.48s}
@keyframes pulsen{to{opacity:.4}}
.code-gross.lokal span{max-width:none;font-size:28px;background:transparent;color:var(--tinte);justify-content:start;height:auto;
  font-variation-settings:"wdth" 120;font-weight:900;text-transform:uppercase;letter-spacing:-.01em}
.einladung-knoepfe{display:flex;gap:8px;flex-wrap:wrap}

#liste{list-style:none;margin:0;padding:0;display:grid;gap:0;border-top:1px solid var(--linie)}
#liste li{display:flex;align-items:center;gap:10px;min-height:42px;border-bottom:1px solid var(--linie);padding:0 2px}
.farbfeld{width:12px;height:12px;flex:none}
.spieler-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.marken{display:flex;gap:4px;flex:1}
.marke-klein{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border:1px solid var(--linie-stark);color:var(--grau)}
.marke-klein.du{background:var(--tinte);border-color:var(--tinte);color:#fff}
.ping{color:var(--grau);font-size:12px;font-variant-numeric:tabular-nums}
.zeile-knopf{width:30px;height:30px;display:grid;place-items:center;border:0;background:none;color:var(--grau)}
.zeile-knopf:hover{color:var(--tinte)}
.zeile-knopf svg{width:16px;height:16px}

.einstellung{display:grid;gap:7px}
.einstellung>span{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--grau)}
.wahl{display:flex;border:1.5px solid var(--tinte)}
.wahl button{flex:1;min-height:40px;border:0;border-left:1.5px solid var(--tinte);background:transparent;font-weight:600;font-size:13.5px;padding:6px 8px}
.wahl button:first-child{border-left:0}
.wahl button[aria-pressed="true"]{background:var(--tinte);color:#fff}
.wahl.karten button{display:grid;gap:1px;text-align:left;padding:9px 12px}
.wahl.karten b{font-size:15px;font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-variation-settings:"wdth" 115}
.wahl.karten small{font-size:11.5px;color:inherit;opacity:.7}
body.gast .wahl button{cursor:default}
body.gast .wahl button:not([aria-pressed="true"]){color:var(--grau-hell)}
body.gast [data-nur-gastgeber]{display:none!important}
.warten{margin:0;color:var(--grau);font-size:13.5px}
body.gastgeber .lobby-fuss .warten{display:none}

/* --- HUD ---------------------------------------------------------------------- */

.hud{position:fixed;inset:0;z-index:5;pointer-events:none;color:var(--hud);text-shadow:var(--hud-schatten)}
.blut{position:absolute;inset:0;opacity:0;background:radial-gradient(ellipse at center,transparent 45%,rgba(160,20,10,.55) 100%)}
.fernrohr{position:absolute;inset:0;background:radial-gradient(circle at center,transparent 0,transparent 32vmin,#050505 32.3vmin)}
.fernrohr i{position:absolute;left:50%;top:50%;width:64vmin;height:64vmin;transform:translate(-50%,-50%)}
.fernrohr i::before,.fernrohr i::after{content:"";position:absolute;background:#050505}
.fernrohr i::before{left:0;right:0;top:50%;height:1.5px;margin-top:-.75px;
  -webkit-mask:linear-gradient(90deg,#000 0 46%,transparent 46% 54%,#000 54%);mask:linear-gradient(90deg,#000 0 46%,transparent 46% 54%,#000 54%)}
.fernrohr i::after{top:0;bottom:0;left:50%;width:1.5px;margin-left:-.75px;
  -webkit-mask:linear-gradient(180deg,#000 0 46%,transparent 46% 54%,#000 54%);mask:linear-gradient(180deg,#000 0 46%,transparent 46% 54%,#000 54%)}

.fadenkreuz{position:absolute;left:50%;top:50%;width:0;height:0;--spalt:8px;transition:opacity .12s}
.fadenkreuz i{position:absolute;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.45)}
.fadenkreuz i:nth-child(1){width:2px;height:9px;left:-1px;bottom:var(--spalt)}
.fadenkreuz i:nth-child(2){width:2px;height:9px;left:-1px;top:var(--spalt)}
.fadenkreuz i:nth-child(3){height:2px;width:9px;top:-1px;right:var(--spalt)}
.fadenkreuz i:nth-child(4){height:2px;width:9px;top:-1px;left:var(--spalt)}
.fadenkreuz b{position:absolute;width:2px;height:2px;left:-1px;top:-1px;background:#fff;box-shadow:0 0 0 1px rgba(0,0,0,.45)}
.fadenkreuz.aus{opacity:0}

.treffer{position:absolute;left:50%;top:50%;width:0;height:0;opacity:0}
.treffer i{position:absolute;width:2.5px;height:10px;background:#fff;left:-1.25px;top:-5px;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.treffer i:nth-child(1){transform:rotate(45deg) translateY(-12px)}
.treffer i:nth-child(2){transform:rotate(135deg) translateY(-12px)}
.treffer i:nth-child(3){transform:rotate(225deg) translateY(-12px)}
.treffer i:nth-child(4){transform:rotate(315deg) translateY(-12px)}
.treffer.kopf i{background:var(--gelb)}
.treffer.kill i{background:var(--rot);height:14px;top:-7px}

.schaden{position:absolute;left:50%;top:50%;width:0;height:0}
.schaden i{position:absolute;left:-60px;top:-160px;width:120px;height:40px;transform-origin:60px 160px;
  background:radial-gradient(ellipse at 50% 100%,rgba(212,70,47,.85),rgba(212,70,47,0) 70%);
  -webkit-mask:radial-gradient(ellipse 60px 22px at 50% 100%,transparent 70%,#000 72%);
  clip-path:polygon(0 0,100% 0,72% 100%,28% 100%)}

.hud-oben{position:absolute;top:14px;left:50%;transform:translateX(-50%);display:grid;justify-items:center;gap:4px}
.uhr{font-weight:800;font-size:22px;letter-spacing:.04em;font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 80}
.ziel-anzeige{display:flex;align-items:center;gap:12px;font-size:12.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
.ziel-anzeige b{font-size:17px;font-weight:800;font-variation-settings:"wdth" 80}
.team-balken{display:inline-flex;align-items:center;gap:6px}
.team-balken i{width:10px;height:10px;display:inline-block;box-shadow:0 0 0 1px rgba(0,0,0,.3)}

.abschuesse{position:absolute;top:14px;right:16px;margin:0;padding:0;list-style:none;display:grid;gap:4px;justify-items:end}
.abschuesse li{display:flex;align-items:center;gap:8px;padding:4px 9px;background:rgba(14,15,16,.48);font-size:13px;font-weight:700;
  text-shadow:none;transition:opacity .5s}
.abschuesse li.ich{background:rgba(241,239,233,.9);color:var(--tinte)}
.abschuesse li.weg{opacity:0}
.abschuesse .wsym{width:30px;height:12px;stroke-width:1.6}
.abschuesse .kopf-sym{width:12px;height:12px;color:var(--gelb)}

.hud-unten-links{position:absolute;left:22px;bottom:20px}
.hud-unten-rechts{position:absolute;right:22px;bottom:20px;text-align:right}
.leben{display:grid;grid-template-columns:auto auto;align-items:end;gap:2px 10px}
.leben svg{width:20px;height:20px;fill:currentColor;stroke:none;margin-bottom:8px;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.leben b{font-weight:800;font-size:46px;line-height:.9;font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 75}
.leben-balken{grid-column:1/-1;width:200px;height:5px;background:rgba(20,21,22,.45);display:block}
.leben-balken i{display:block;height:100%;width:100%;background:#fff;transition:width .15s}
.leben.wenig b,.leben.wenig svg{color:#ff8a72}
.leben.wenig .leben-balken i{background:var(--rot)}
.waffe{display:grid;gap:2px;justify-items:end}
.waffe-name{font-weight:700;font-size:12px;letter-spacing:.16em;text-transform:uppercase}
.munition{display:flex;align-items:baseline;gap:6px}
.munition b{font-weight:800;font-size:46px;line-height:.9;font-variant-numeric:tabular-nums;font-variation-settings:"wdth" 75}
.munition span{font-size:16px;font-weight:600;opacity:.85}
.munition.leer b{color:#ff8a72}

.meldung{position:absolute;left:50%;top:62%;transform:translate(-50%,0);text-align:center;font-weight:800;font-size:19px;letter-spacing:.08em;
  text-transform:uppercase;opacity:0;transition:opacity .2s;font-variation-settings:"wdth" 110}
.meldung small{display:block;font-size:12px;font-weight:600;letter-spacing:.14em;opacity:.85;margin-top:4px}
.meldung.an{opacity:1}
.meldung .kopf{color:var(--gelb)}

.tot{position:absolute;inset:auto 0 22%;text-align:center}
.tot-titel{margin:0;font-weight:800;font-size:24px;text-transform:uppercase;letter-spacing:.04em;font-variation-settings:"wdth" 115}
.tot-zeit{margin:6px 0 0;font-weight:600;font-size:14px;letter-spacing:.12em;text-transform:uppercase;opacity:.9}

.hud-menue{position:absolute;top:12px;left:12px;pointer-events:auto;border-color:rgba(255,255,255,.5);color:#fff;background:rgba(14,15,16,.3)}
body:not(.touch-an) .hud-menue{display:none}

/* --- Schirme -------------------------------------------------------------- */

.schirm{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:rgba(14,15,16,.4)}
.karte-klein{width:min(420px,100%);background:var(--papier);border:1.5px solid var(--tinte);padding:24px;display:grid;gap:14px}
.karte-klein h2{margin:0;font-size:24px;font-weight:900;text-transform:uppercase;letter-spacing:-.005em;font-variation-settings:"wdth" 120}
.spalte{display:grid;gap:8px;margin-top:4px}
.klick{background:rgba(14,15,16,.22);cursor:pointer}
.klick .karte-klein{text-align:center;justify-items:center;pointer-events:none}

.regler{display:grid;gap:6px;font-size:13px;font-weight:600}
.regler>span{display:flex;justify-content:space-between}
.regler b{font-variant-numeric:tabular-nums}
.regler input{width:100%;accent-color:var(--kobalt)}

.laden-punkte{display:flex;gap:6px}
.laden-punkte i{width:10px;height:10px;background:var(--kobalt);animation:pulsen .6s ease-in-out infinite alternate}
.laden-punkte i:nth-child(2){animation-delay:.2s}.laden-punkte i:nth-child(3){animation-delay:.4s}

.karte-tafel{width:min(640px,100%);background:var(--papier);border:1.5px solid var(--tinte);padding:22px;display:grid;gap:14px;max-height:calc(100vh - 32px);overflow-y:auto}
.tafel-kopf{display:grid;gap:4px}
.tafel-kopf h2{margin:0;font-size:30px;font-weight:900;text-transform:uppercase;letter-spacing:-.01em;font-variation-settings:"wdth" 122}
.team-stand{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.team-stand div{border-left:6px solid;padding:6px 12px;background:var(--papier-2);display:flex;justify-content:space-between;align-items:baseline;font-weight:700;text-transform:uppercase;letter-spacing:.06em;font-size:13px}
.team-stand b{font-size:28px;font-variation-settings:"wdth" 75}
.tabelle{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tabelle th{text-align:left;font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--grau);font-weight:700;padding:6px 8px;border-bottom:1.5px solid var(--tinte)}
.tabelle td{padding:8px;border-bottom:1px solid var(--linie);font-weight:600}
.tabelle td:first-child{color:var(--grau);width:28px}
.tabelle th:nth-child(n+3),.tabelle td:nth-child(n+3){text-align:right}
.tabelle tr.ich td{background:rgba(47,91,216,.09)}
.wer{display:inline-flex;align-items:center;gap:8px}
.wer i{width:10px;height:10px;display:inline-block}
.tafel-fuss{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.tafel-fuss .warten{flex-basis:100%}
.tafel-fuss.gastgeber .warten{display:none}
.tafel-fuss:not(.gastgeber) [data-nur-gastgeber]{display:none}
#tafel.nur-ansehen{pointer-events:none;background:rgba(14,15,16,.2)}

.toast{position:fixed;left:50%;bottom:24px;transform:translate(-50%,20px);z-index:40;background:var(--tinte);color:#fff;padding:10px 16px;
  font-weight:600;font-size:13.5px;opacity:0;transition:opacity .2s,transform .2s;pointer-events:none}
.toast.an{opacity:1;transform:translate(-50%,0)}

.ohne-js{position:fixed;inset:0;display:grid;place-items:center;margin:0;background:var(--papier)}

/* --- Touch ------------------------------------------------------------------- */

.touch{position:fixed;inset:0;z-index:6;touch-action:none}
.stick{position:absolute;left:-52px;top:-52px;width:104px;height:104px;border:2px solid rgba(255,255,255,.55);border-radius:50%;pointer-events:none}
.stick i{position:absolute;left:50%;top:50%;width:44px;height:44px;margin:-22px;border-radius:50%;background:rgba(255,255,255,.7)}
.touch-knopf{position:absolute;width:58px;height:58px;border-radius:50%;border:2px solid rgba(255,255,255,.6);background:rgba(14,15,16,.28);
  color:#fff;display:grid;place-items:center;font-weight:800;font-size:18px;touch-action:none}
.touch-knopf svg{width:24px;height:24px}
.touch-knopf.an,.touch-knopf.fest{background:rgba(47,91,216,.75);border-color:#fff}
.touch-knopf.feuer{right:calc(28px + env(safe-area-inset-right));bottom:120px;width:84px;height:84px}
.touch-knopf.feuer svg{width:34px;height:34px}
.touch-knopf.ziel{right:calc(126px + env(safe-area-inset-right));bottom:160px}
.touch-knopf.sprung{right:calc(36px + env(safe-area-inset-right));bottom:34px}
.touch-knopf.nachladen{right:calc(120px + env(safe-area-inset-right));bottom:70px;width:48px;height:48px;font-size:15px}
.touch-knopf.punkte{right:calc(16px + env(safe-area-inset-right));top:16px;width:42px;height:42px}
.touch-knopf.punkte svg{width:18px;height:18px}
body.touch-an .hud-unten-rechts{bottom:auto;top:66px}
body.touch-an .abschuesse{top:auto;bottom:16px;right:auto;left:16px;justify-items:start}
body.touch-an .hud-unten-links{bottom:auto;top:62px;left:16px}
body.touch-an .leben b,body.touch-an .munition b{font-size:32px}
body.touch-an .leben-balken{width:130px}

/* --- Schmal -------------------------------------------------------------------- */

@media (max-width:760px){
  .tafel-seite{width:100%;border-right:0;padding:14px 18px 18px;gap:20px;background:rgba(241,239,233,.96)}
  .seite-buehne{gap:20px}
  .marke{margin-top:2vh}
  .lobby{padding:0;place-items:stretch}
  .lobby-karte{border:0;padding:10px 14px 16px;min-height:100%}
  .lobby-raster{grid-template-columns:1fr;grid-template-areas:"einladung" "spieler" "einstellungen" "fuss"}
  .einstellungen{border-left:0;border-top:1px solid var(--linie-stark)}
  .code-gross span{height:64px;font-size:36px}
  .lobby-fuss{flex-direction:column;align-items:stretch}
  .ort{display:none}
}
@media (max-width:480px){
  .info-text{padding-top:16px}
  .info-text h2{font-size:21px}
}
@media (max-height:520px) and (min-width:761px){
  .marke{margin-top:0}
  .steuerung{display:none}
}
@media (pointer:coarse){
  .steuerung{display:none}
}