/* =====================================================================
   Lowlight — Oberfläche
   =====================================================================

   Dunkles Anthrazit, gebrochenes Weiß, ein einziges Signalorange.
   Kanten fast eckig, feine Linien statt Schatten und Leuchten. Schrift:
   Barlow Condensed für alles, was man im Augenwinkel lesen muss, Barlow
   für Fließtext.
   ===================================================================== */

:root{
  --grund:#151412;
  --grund-2:#1c1b18;
  --tief:#0f0e0d;
  --papier:#f4f1ea;
  --matt:#a39e93;
  --linie:rgba(244,241,234,.14);
  --linie-stark:rgba(244,241,234,.32);
  --signal:#e4572e;
  --signal-hell:#f06a43;
  --ocker:#d8a71c;
  --eng:"Barlow Condensed","Arial Narrow",sans-serif;
  --text:"Barlow",system-ui,sans-serif;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{height:100%;overflow:hidden}
body{margin:0;background:var(--grund);color:var(--papier);font-family:var(--text);font-size:15px;line-height:1.45;
  -webkit-tap-highlight-color:transparent;-webkit-font-smoothing:antialiased}
[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}
body.im-spiel #cv{cursor:none}
body.im-spiel{user-select:none;-webkit-user-select:none}

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

.kicker{margin:0;font:600 12px/1.2 var(--eng);letter-spacing:.18em;text-transform:uppercase;color:var(--matt)}
.notiz{margin:0;color:var(--matt);font-size:13.5px}

.knopf{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 18px;
  border:1px solid var(--linie-stark);border-radius:2px;background:transparent;
  font:600 15px/1 var(--eng);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  transition:background-color .12s,border-color .12s,color .12s}
.knopf:hover{border-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(--signal);outline-offset:2px}
.knopf:disabled{opacity:.4;cursor:default;border-color:var(--linie-stark)}
.knopf svg{width:18px;height:18px}
.knopf.primaer{background:var(--signal);border-color:var(--signal);color:#16110e}
.knopf.primaer:hover{background:var(--signal-hell);border-color:var(--signal-hell)}
.knopf.gross{height:56px;font-size:18px;justify-content:space-between;padding:0 20px}
.knopf.klein{height:34px;padding:0 12px;font-size:13px}
.knopf.leise{border-color:transparent;color:var(--matt)}
.knopf.leise:hover{color:var(--papier);border-color:var(--linie)}

.symbol{display:inline-grid;place-items:center;width:40px;height:40px;border:1px solid var(--linie);border-radius:2px;background:rgba(15,14,13,.55)}
.symbol:hover{border-color:var(--linie-stark)}
.symbol svg{width:20px;height:20px}
[data-ton] .aus{display:none}
body.stumm [data-ton] .an{display:none}
body.stumm [data-ton] .aus{display:inline}

/* --- Ebenen (Start, Lobby) -------------------------------------------- */

.ebene{position:fixed;inset:0;z-index:5;display:flex;flex-direction:column;overflow:auto;
  padding:0 clamp(16px,4vw,56px) calc(env(safe-area-inset-bottom,0px) + 20px)}
.ebene::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(90deg,rgba(21,20,18,.93) 0%,rgba(21,20,18,.78) 42%,rgba(21,20,18,.42) 100%)}
.lobby::before{background:rgba(21,20,18,.9)}

.leiste-oben{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 16px) 0 12px}
.luecke{flex:1}
.zurueck{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 14px 0 8px;border:1px solid var(--linie);border-radius:2px;
  background:rgba(15,14,13,.55);color:var(--papier);text-decoration:none;font:600 14px/1 var(--eng);letter-spacing:.08em;text-transform:uppercase}
.zurueck:hover{border-color:var(--linie-stark)}
.zurueck svg{width:18px;height:18px}

/* Start */
.start-raster{flex:1;display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,380px);gap:clamp(28px,6vw,96px);align-items:center;
  max-width:1180px;width:100%;margin:0 auto;padding:24px 0}
.titel{margin:14px 0 18px;font:800 clamp(64px,11vw,148px)/.82 var(--eng);letter-spacing:-.01em;text-transform:uppercase}
.titel::after{content:"";display:block;width:72px;height:4px;margin-top:22px;background:var(--signal)}
.unterzeile{margin:0;max-width:440px;font-size:17px;line-height:1.5;color:#d9d4c9}
.steuerung{display:flex;flex-wrap:wrap;gap:8px 22px;margin:32px 0 0;padding:0}
.steuerung div{display:flex;align-items:center;gap:8px}
.steuerung dt{min-width:26px;height:24px;padding:0 6px;display:inline-grid;place-items:center;border:1px solid var(--linie-stark);border-radius:2px;
  font:600 12px/1 var(--eng);letter-spacing:.06em;text-transform:uppercase}
.steuerung dd{margin:0;font-size:13.5px;color:var(--matt)}

.tafel{position:relative;display:flex;flex-direction:column;gap:16px;padding:26px 24px 22px;background:rgba(15,14,13,.88);border:1px solid var(--linie)}
.tafel::before{content:"";position:absolute;left:-1px;top:-1px;width:28px;height:3px;background:var(--signal)}
.feld{display:flex;flex-direction:column;gap:7px}
.feld-titel{font:600 12px/1 var(--eng);letter-spacing:.16em;text-transform:uppercase;color:var(--matt)}
.feld input{height:46px;padding:0 14px;border:1px solid var(--linie-stark);border-radius:2px;background:var(--tief);font-size:16px}
.feld input:focus{border-color:var(--papier);outline:none}

.trenner{display:flex;align-items:center;gap:12px;margin:4px 0 -2px;font:600 12px/1 var(--eng);letter-spacing:.16em;text-transform:uppercase;color:var(--matt)}
.trenner::before,.trenner::after{content:"";flex:1;height:1px;background:var(--linie)}

.beitreten{display:flex;flex-direction:column;gap:12px}
.code-felder{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.code-felder input{width:100%;height:60px;padding:0;text-align:center;border:1px solid var(--linie-stark);border-radius:2px;background:var(--tief);
  font:700 30px/1 var(--eng);text-transform:uppercase;caret-color:var(--signal)}
.code-felder input:focus{border-color:var(--signal);outline:none}
.code-felder.falsch input{border-color:var(--signal);animation:wackeln .3s}
@keyframes wackeln{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

.fehler{margin:0;color:#ff8b6a;font-size:14px}
.fehler:empty{display:none}

.fuss{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;max-width:1180px;width:100%;margin:0 auto;padding-top:12px;border-top:1px solid var(--linie);
  font:600 12px/1.6 var(--eng);letter-spacing:.12em;text-transform:uppercase;color:var(--matt)}
.fuss a{color:inherit;text-decoration:none}
.fuss a:hover{color:var(--papier)}
.fuss-notiz{margin-left:auto;letter-spacing:.04em;text-transform:none;font:400 12.5px/1.5 var(--text)}

/* --- Anleitung als Text unter dem Startmenü ------------------------------------
   .start-buehne füllt den Bildschirm bis auf einen Streifen von 56px, in dem der
   Kopf der Anleitung hervorschaut — Kopfleiste und Startmenü stehen also wie
   vorher, und man sieht, dass es darunter weitergeht. Ist das Menü höher als der
   Bildschirm (Handy), wächst die Bühne mit, und die Anleitung folgt darunter.
   Die Anleitung steht bündig mit der linken Kante des Startrasters (max. 1180px).
   Text, den das SEO-Werkzeug an der Markierung einsetzt (section.seo-text),
   sieht genauso aus. */

#menue{gap:16px}
.start-buehne{flex:none;width:100%;min-height:calc(100% - 56px);display:flex;flex-direction:column}
.info-text{flex:none;position:relative;align-self:flex-start;width:min(760px,100%);margin-left:max(0px,calc((100% - 1180px) / 2));
  padding:24px 26px 26px;display:grid;gap:12px;background:rgba(15,14,13,.9);border:1px solid var(--linie);
  user-select:text;-webkit-user-select:text}
.info-text::before{content:"";position:absolute;left:-1px;top:-1px;width:28px;height:3px;background:var(--signal)}
.info-text h2{margin:0;font:800 clamp(28px,3.6vw,38px)/.95 var(--eng);letter-spacing:.01em;text-transform:uppercase;color:var(--papier)}
.info-text h3{margin:6px 0 0;font:700 17px/1.15 var(--eng);letter-spacing:.14em;text-transform:uppercase;color:var(--papier)}
.info-text p{margin:0;max-width:68ch;font-size:15.5px;line-height:1.6;color:#d9d4c9}
.info-text a{color:var(--signal-hell);font-weight:500;text-underline-offset:3px}
.info-text a:hover{color:var(--papier)}
.info-text :is(ul,ol){margin:0;padding-left:22px;display:grid;gap:6px;max-width:68ch;font-size:15.5px;line-height:1.55;color:#d9d4c9}
.info-text li::marker{color:var(--signal)}
.info-text .seo-text{display:grid;gap:12px;margin-top:6px}
.info-tasten{margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px 22px}
.info-tasten div{display:flex;align-items:center;gap:10px}
.info-tasten dt{min-width:30px;height:26px;padding:0 7px;display:inline-grid;place-items:center;border:1px solid var(--linie-stark);border-radius:2px;
  font:600 13px/1 var(--eng);letter-spacing:.06em;text-transform:uppercase;color:var(--papier)}
.info-tasten dd{margin:0;font-size:15px;color:#d9d4c9}

/* Lobby */
.lobby-raster{flex:1;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);grid-template-areas:"einladung spieler" "einst spieler" "fuss fuss";
  gap:20px 40px;max-width:1100px;width:100%;margin:0 auto;padding:20px 0 0;align-content:start}
.einladung{grid-area:einladung;display:flex;flex-direction:column;gap:14px;padding-bottom:26px;border-bottom:1px solid var(--linie)}
.code-gross{display:flex;gap:10px;min-height:86px}
.code-gross span{display:grid;place-items:center;width:clamp(48px,7vw,72px);height:clamp(64px,9vw,88px);border:1px solid var(--linie-stark);border-radius:2px;
  background:var(--tief);font:800 clamp(38px,5.4vw,58px)/1 var(--eng)}
.code-gross.lokal span{width:auto;padding:0 20px;font-size:30px;letter-spacing:.08em;text-transform:uppercase}
.code-gross.wartet span{color:var(--matt);animation:atmen 1.2s ease-in-out infinite}
@keyframes atmen{50%{opacity:.35}}
.einladung-knoepfe{display:flex;flex-wrap:wrap;gap:8px}

.spielerliste{grid-area:spieler;display:flex;flex-direction:column;gap:10px}
.spielerliste h2,.einstellungen h2{margin:0;font:700 14px/1 var(--eng);letter-spacing:.16em;text-transform:uppercase}
.zahl{color:var(--matt);font-weight:600;margin-left:6px}
#liste{list-style:none;margin:0;padding:0;border-top:1px solid var(--linie)}
#liste li{display:flex;align-items:center;gap:12px;min-height:50px;padding:6px 0;border-bottom:1px solid var(--linie)}
.farbfeld{width:12px;height:22px;flex:0 0 auto}
.spieler-name{font:600 18px/1.1 var(--eng);letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.marken{display:flex;gap:6px;flex-wrap:wrap}
.marke-klein{padding:3px 6px;border:1px solid var(--linie-stark);border-radius:2px;font:600 10.5px/1 var(--eng);letter-spacing:.14em;text-transform:uppercase;color:var(--matt)}
.marke-klein.du{border-color:var(--signal);color:var(--signal)}
.ping{margin-left:auto;font:500 13px/1 var(--eng);letter-spacing:.06em;color:var(--matt);font-variant-numeric:tabular-nums}
.zeile-knopf{width:30px;height:30px;display:grid;place-items:center;border:1px solid transparent;border-radius:2px;background:none;color:var(--matt)}
.zeile-knopf:hover{border-color:var(--linie-stark);color:var(--papier)}
.zeile-knopf svg{width:16px;height:16px}
#btnBot{align-self:flex-start}

.einstellungen{grid-area:einst;display:flex;flex-direction:column;gap:14px}
.einstellung{display:grid;grid-template-columns:72px 1fr;align-items:center;gap:12px}
.einstellung > span{font:600 12px/1 var(--eng);letter-spacing:.16em;text-transform:uppercase;color:var(--matt)}
.wahl{display:flex;flex-wrap:wrap}
.wahl button{height:38px;padding:0 14px;border:1px solid var(--linie-stark);margin-left:-1px;background:transparent;
  font:600 14px/1 var(--eng);letter-spacing:.06em;text-transform:uppercase;color:var(--matt)}
.wahl button:first-child{margin-left:0;border-radius:2px 0 0 2px}
.wahl button:last-child{border-radius:0 2px 2px 0}
.wahl button:hover{color:var(--papier)}
.wahl button[aria-pressed="true"]{position:relative;z-index:1;background:var(--papier);border-color:var(--papier);color:#16110e}
.gast .wahl button{pointer-events:none}
.gast .wahl button:not([aria-pressed="true"]){opacity:.45}

.lobby-fuss{grid-area:fuss;display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:22px 0 8px;border-top:1px solid var(--linie)}
.lobby-fuss .knopf.gross{min-width:240px}
.warten{margin:0 auto 0 0;color:var(--matt);font-size:14px}
.gastgeber .warten{display:none}
.gast [data-nur-gastgeber]{display:none!important}

/* --- Im Spiel ------------------------------------------------------------- */

.hud{position:fixed;inset:0;z-index:3;pointer-events:none;font-family:var(--eng);text-transform:uppercase}
.hud-oben{position:absolute;top:calc(env(safe-area-inset-top,0px) + 12px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:4px}
.uhr{font:700 26px/1 var(--eng);letter-spacing:.04em;font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(0,0,0,.6)}
.ziel-anzeige{display:flex;align-items:center;gap:10px;font:600 13px/1 var(--eng);letter-spacing:.12em;color:var(--papier);text-shadow:0 1px 0 rgba(0,0,0,.6)}
.ziel-anzeige b{font-size:16px}
.team-balken{display:flex;align-items:center;gap:8px}
.team-balken i{display:block;width:10px;height:14px}

.abschuesse{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;margin:0;padding:0;list-style:none;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.abschuesse li{display:flex;align-items:center;gap:8px;padding:5px 9px;background:rgba(15,14,13,.72);font:600 13px/1 var(--eng);letter-spacing:.06em;
  animation:rein .18s ease-out}
.abschuesse li.ich{box-shadow:inset 2px 0 0 var(--signal)}
.abschuesse li.weg{opacity:0;transition:opacity .4s}
.abschuesse .wsym{width:30px;height:12px;color:var(--matt)}
@keyframes rein{from{opacity:0;transform:translateX(10px)}}

.hud-unten-links{position:absolute;left:clamp(14px,2.5vw,28px);bottom:calc(env(safe-area-inset-bottom,0px) + 18px)}
.leben{display:flex;flex-direction:column;gap:6px}
.leben b{font:700 44px/.9 var(--eng);font-variant-numeric:tabular-nums;text-shadow:0 1px 0 rgba(0,0,0,.6)}
.leben-balken{display:block;width:160px;height:5px;background:rgba(15,14,13,.7)}
.leben-balken i{display:block;height:100%;width:100%;background:var(--papier);transition:width .12s}
.leben.wenig b{color:var(--signal)}
.leben.wenig .leben-balken i{background:var(--signal)}

.hud-unten-rechts{position:absolute;right:clamp(14px,2.5vw,28px);bottom:calc(env(safe-area-inset-bottom,0px) + 18px);display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.waffe{display:flex;flex-direction:column;align-items:flex-end;gap:2px;text-shadow:0 1px 0 rgba(0,0,0,.6)}
.waffe-name{font:600 13px/1 var(--eng);letter-spacing:.16em;color:#d9d4c9}
.munition{display:flex;align-items:baseline;gap:6px;font-variant-numeric:tabular-nums}
.munition b{font:700 44px/.9 var(--eng)}
.munition span{font:600 16px/1 var(--eng);color:var(--matt)}
.munition.leer b{color:var(--signal)}
.sprung{display:flex;align-items:center;gap:8px;font:600 11px/1 var(--eng);letter-spacing:.16em;color:var(--matt)}
.sprung i{position:relative;display:block;width:60px;height:4px;background:rgba(15,14,13,.7);overflow:hidden}
.sprung i::after{content:"";position:absolute;inset:0;background:var(--papier);transform-origin:left;transform:scaleX(var(--bereit,1))}
.sprung.bereit{color:var(--papier)}

.meldung{position:absolute;left:50%;top:26%;transform:translateX(-50%);font:700 18px/1.2 var(--eng);letter-spacing:.14em;text-align:center;
  text-shadow:0 1px 0 rgba(0,0,0,.7);opacity:0;transition:opacity .25s;white-space:nowrap}
.meldung.an{opacity:1}
.meldung small{display:block;margin-top:4px;font-size:13px;letter-spacing:.2em;color:var(--matt)}

.tot{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;background:rgba(15,14,13,.28)}
.tot-titel{margin:0;font:700 30px/1 var(--eng);letter-spacing:.12em;text-shadow:0 1px 0 rgba(0,0,0,.7)}
.tot-titel b{color:var(--signal)}
.tot-zeit{margin:0;font:600 14px/1 var(--eng);letter-spacing:.2em;color:#d9d4c9}

.hud-menue{position:absolute;left:clamp(14px,2.5vw,28px);top:calc(env(safe-area-inset-top,0px) + 12px);pointer-events:auto}

/* Touch */
.touch{position:fixed;inset:0;z-index:2;touch-action:none}
.stick{position:absolute;left:-56px;top:-56px;width:112px;height:112px;border:1px solid var(--linie-stark);border-radius:50%;background:rgba(15,14,13,.25);pointer-events:none}
.stick i{position:absolute;left:34px;top:34px;width:44px;height:44px;border-radius:50%;background:rgba(244,241,234,.75)}
.touch-hinweis{position:absolute;top:60%;padding:8px 14px;border:1px dashed var(--linie-stark);border-radius:999px;
  background:rgba(15,14,13,.35);color:var(--matt);font:700 13px/1 var(--eng);letter-spacing:.12em;text-transform:uppercase;pointer-events:none}
.touch-hinweis.links{left:calc(env(safe-area-inset-left,0px) + 24px)}
.touch-hinweis.rechts{right:calc(env(safe-area-inset-right,0px) + 24px)}
.touch.benutzt-links .touch-hinweis.links,.touch.benutzt-rechts .touch-hinweis.rechts{display:none}
.touch-knopf{position:absolute;display:grid;place-items:center;width:52px;height:52px;border:1px solid var(--linie-stark);border-radius:50%;
  background:rgba(15,14,13,.55);font:700 18px/1 var(--eng);touch-action:none}
.touch-knopf svg{width:26px;height:26px}
.touch-knopf.gross{width:68px;height:68px;right:calc(env(safe-area-inset-right,0px) + 22px);bottom:calc(env(safe-area-inset-bottom,0px) + 120px)}
.touch-knopf[data-knopf="nachladen"]{right:calc(env(safe-area-inset-right,0px) + 100px);bottom:calc(env(safe-area-inset-bottom,0px) + 150px)}
.touch-knopf.punkte{width:40px;height:40px;right:16px;top:calc(env(safe-area-inset-top,0px) + 60px);border-radius:2px}
body.touch-an .hud-unten-rechts{bottom:calc(env(safe-area-inset-bottom,0px) + 18px)}
body.touch-an .abschuesse{top:calc(env(safe-area-inset-top,0px) + 108px)}

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

.schirm{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:rgba(10,9,8,.6)}
#tafel.nur-ansehen{pointer-events:none;background:rgba(10,9,8,.35)}
.karte-tafel,.karte-klein{position:relative;width:min(600px,100%);max-height:calc(100% - 8px);overflow:auto;padding:24px;background:rgba(15,14,13,.96);border:1px solid var(--linie)}
.karte-tafel::before,.karte-klein::before{content:"";position:absolute;left:-1px;top:-1px;width:28px;height:3px;background:var(--signal)}
.karte-klein{width:min(380px,100%);display:flex;flex-direction:column;gap:12px}
.karte-klein h2,.tafel-kopf h2{margin:0;font:700 26px/1 var(--eng);letter-spacing:.06em;text-transform:uppercase}
.spalte{display:flex;flex-direction:column;gap:8px;margin-top:6px}
.tafel-kopf{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:16px}
.tafel-unter{margin:0;font:600 13px/1 var(--eng);letter-spacing:.14em;text-transform:uppercase;color:var(--matt)}

.team-stand{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.team-stand div{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border:1px solid var(--linie);border-left-width:4px;
  font:700 15px/1 var(--eng);letter-spacing:.12em;text-transform:uppercase}
.team-stand b{font-size:28px}

.tabelle{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
.tabelle th{padding:0 8px 8px;text-align:right;font:600 11px/1 var(--eng);letter-spacing:.16em;text-transform:uppercase;color:var(--matt);border-bottom:1px solid var(--linie)}
.tabelle th:nth-child(2){text-align:left}
.tabelle td{padding:10px 8px;text-align:right;border-bottom:1px solid var(--linie);font:600 17px/1 var(--eng)}
.tabelle td:first-child{width:22px;padding-right:0;color:var(--matt);font-size:14px}
.tabelle td:nth-child(2){text-align:left}
.tabelle td:last-child{color:var(--matt);font-size:14px;font-weight:500}
.tabelle .wer{display:flex;align-items:center;gap:10px}
.tabelle .wer i{width:8px;height:18px;flex:0 0 auto}
.tabelle tr.ich td{background:rgba(244,241,234,.05)}
.tabelle tr.ich .wer::after{content:"•";color:var(--signal)}

.tafel-fuss{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:8px;margin-top:20px}
.tafel-fuss .warten{flex:1 1 100%;order:-1;margin-bottom:4px}
.gastgeber .tafel-fuss .warten{display:none}

.laden{display:flex;gap:6px;height:14px}
.laden i{width:14px;height:4px;background:var(--signal);animation:laufen 1s infinite ease-in-out}
.laden i:nth-child(2){animation-delay:.15s}
.laden i:nth-child(3){animation-delay:.3s}
@keyframes laufen{0%,100%{opacity:.25}50%{opacity:1}}

.toast{position:fixed;z-index:30;left:50%;top:calc(env(safe-area-inset-top,0px) + 18px);transform:translate(-50%,-8px);max-width:calc(100% - 32px);
  padding:10px 16px;background:var(--papier);color:#16110e;font:600 14px/1.3 var(--eng);letter-spacing:.06em;text-transform:uppercase;
  opacity:0;pointer-events:none;transition:opacity .18s,transform .18s;text-align:center}
.toast.an{opacity:1;transform:translate(-50%,0)}

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

@media (max-width:820px){
  .start-raster{grid-template-columns:1fr;gap:22px;align-items:start;padding-top:4px}
  .titel{margin:10px 0 12px}
  .titel::after{margin-top:14px}
  .unterzeile{font-size:15.5px}
  .steuerung{display:none}
  .lobby-raster{grid-template-columns:1fr;grid-template-areas:"einladung" "spieler" "einst" "fuss";gap:22px}
  /* Der Boden der Ebene hat 20px Polster; sticky hält sonst davor an und lässt Inhalt darunter durchscheinen. */
  .lobby-fuss{position:sticky;bottom:calc(-1 * (env(safe-area-inset-bottom,0px) + 20px));z-index:5;background:var(--grund);flex-wrap:wrap;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 28px)}
  .lobby-fuss .knopf.gross{flex:1}
  .fuss-notiz{margin-left:0}
  .leben b,.munition b{font-size:34px}
  .leben-balken{width:110px}
}
@media (max-height:520px) and (orientation:landscape){
  .titel{font-size:64px}
  .start-raster{grid-template-columns:minmax(0,1fr) minmax(280px,340px);align-items:start}
  .unterzeile{font-size:14px}
  .steuerung{display:none}
}
@media (max-width:480px){
  .info-text{padding:18px 14px 20px}
  .info-text h2{font-size:26px}
  .info-tasten{grid-template-columns:1fr}
}