:root { color-scheme: dark; --grund: #0d1226; --karte: #1a2147; --text: #e6e8f2; --leise: #a3a9c9; --rot: #d33a2c; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--grund); color: var(--text);
  font: 17px/1.5 system-ui, -apple-system, "Segoe UI", sans-serif; }
#kopf { max-width: 42rem; margin: 0 auto; padding: 1rem 1rem 0; }
#kopf a { display: inline-flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none;
  font: 800 22px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; letter-spacing: -.02em; }
#kopf img { border-radius: 8px; }
#kopf b { color: #ff7a52; }   /* wie .logo auf nullos.de (dunkles Thema) */
main { max-width: 42rem; margin: 0 auto; padding: 1rem 1rem 2rem; }
h1 { font-size: 1.8rem; margin: 0 0 1rem; }
li { margin: .4rem 0; }
kbd { border: 1px solid var(--leise); border-radius: 4px; padding: 0 .3em; font-size: .9em; }
button { font: inherit; color: var(--text); background: var(--karte); border: 1px solid #3a447a;
  border-radius: 8px; padding: .5rem 1rem; cursor: pointer; }
button:hover { border-color: var(--leise); }
#einreihen { background: var(--rot); border-color: var(--rot); font-weight: 600; }
#meldung { min-height: 1.5em; color: var(--leise); }
#lage h2 { font-size: 1rem; color: var(--leise); font-weight: 600; margin: 1.5rem 0 .5rem; }
#plaetze { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: .6rem; }
.platz { background: var(--karte); border: 1px solid #3a447a; border-radius: 10px; padding: .6rem .7rem; }

.platz b { display: block; font-size: .85rem; color: var(--leise); font-weight: 600; }
.platz .cpu { font: 700 1.4rem/1.2 ui-monospace, Menlo, monospace; }
.platz canvas { display: block; width: 100%; height: 40px; margin: .3rem 0; }
.platz small { color: var(--leise); }
#server { color: var(--leise); font-size: .9rem; margin: .5rem 0 0; }
#buehne { position: fixed; inset: 0; display: flex; flex-direction: column; }
#buehne[hidden] { display: none; }
#leiste { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; padding: .4rem .6rem; background: var(--karte); }
#rest { margin-right: auto; color: var(--leise); }
#bild { flex: 1; min-height: 0; }
/* Kompakt im iframe auf nullos.de (demo.js setzt .klein) */
.klein body { font-size: 15px; }
.klein #kopf, .klein #vorn > h1, .klein #vorn > p:first-of-type, .klein #vorn > ul, .klein #lage h2 { display: none; }
.klein main { padding: .5rem; max-width: none; }
.klein #plaetze { grid-template-columns: repeat(auto-fit, minmax(12rem, 15rem)); gap: .4rem; }
.klein .platz canvas { height: 28px; }
.klein #meldung { margin: .4rem 0; }
.klein #leiste { padding: .25rem .4rem; gap: .3rem; }
.klein #leiste button { padding: .25rem .6rem; font-size: .85rem; }
#plaetze[hidden] { display: none; }
.platz { border-color: #2fa66a; }
.platz b { display: flex; justify-content: space-between; align-items: baseline; }
.platz .online { color: #3ccf82; font-size: .8rem; font-weight: 700; }
#kurz { display: none; }
.klein main { min-height: 100vh; display: flex; flex-direction: column; justify-content: center; align-items: center;
  text-align: center; }
.klein #kurz { display: flex; flex-direction: column; align-items: center; gap: .6rem; max-width: 30rem; margin: 0 0 .8rem; }
.klein #kurz img { border-radius: 12px; }
.klein #lage { width: 100%; }
.klein #plaetze { justify-content: center; }
.klein #einreihen { font-size: 1.1rem; padding: .7rem 1.6rem; }
/* Handy: schmaler Rahmen auf nullos.de nur Logo, Stand und „Demo öffnen“ (öffnet eigenen Tab) */
@media (max-width: 599px) {
  .klein #kurz span, .klein #plaetze { display: none; }
  .klein #kurz { margin: 0 0 .3rem; }
  .klein #kurz img { width: 40px; height: 40px; }
  .klein #server { font-size: .8rem; margin: 0 0 .4rem; }
  .klein main { padding: .3rem; }
  .klein #vorn p { margin: .2rem 0; }
  .klein #meldung:empty { display: none; }
  .klein #einreihen { padding: .45rem 1.2rem; font-size: 1rem; }
  .klein #server { font-size: .75rem; }
  #leiste { gap: .3rem; padding: .3rem .4rem; }
  #leiste button { padding: .3rem .55rem; font-size: .85rem; }
  #rest { font-size: .8rem; flex-basis: 100%; }
}
#quer { display: none; margin: 0; padding: .3rem .6rem; font-size: .85rem; color: var(--leise); background: var(--karte); }
@media (orientation: portrait) and (max-width: 599px) { html:not(.klein) #quer { display: block; } }
/* Handy quer (niedriger Bildschirm): Leiste als kleine Lasche über dem Bild, Bild nutzt die ganze Höhe (Max) */
#menue { display: none; }
@media (max-height: 500px) {
  #buehne { position: fixed; }
  #leiste { position: absolute; top: 0; left: 0; z-index: 5; flex-wrap: nowrap; gap: .25rem; padding: .1rem .3rem;
    background: rgba(26, 33, 71, .8); border-bottom-right-radius: 8px; }
  #leiste button { padding: .15rem .5rem; font-size: .8rem; border-radius: 6px; }
  #leiste:not(.auf) button:not(#menue) { display: none; }
  #menue { display: inline-block; padding: .1rem .45rem !important; }
  #rest { font-size: .75rem; flex-basis: auto; white-space: nowrap; margin-right: .2rem; }
  #rest .lang, #quer { display: none !important; }
  #bild { height: 100%; }
}