/* Wohnungsroboter-Werkstatt: Farben, Schrift, Aufteilung */
:root{
  color-scheme: light;
  --ground:#e8ebe5; --panel:#f6f7f3; --panel-2:#edf0ea; --ink:#1b2427; --ink-2:#55615e; --ink-3:#7c8784; --line:#d2d7cf;
  --accent:#d59a13; --accent-ink:#241a03; --accent-soft:#f4e5bf;
  --measure:#1b6c76; --measure-soft:#d7eaec;
  --ok:#2e7a4d; --ok-soft:#dcefe2; --warn:#a9620f; --warn-soft:#f6e6cf; --bad:#b33a31; --bad-soft:#f6dcd8;
  --m-bg:#dde2da; --m-base:#cfd5cb; --m-floor:#f1f0ea; --m-wall:#fbfbf9; --m-poche:#2a3134; --m-furn:#c2c9bd; --m-soft:#b6c0c9; --m-wood:#ccbb97;
  --m-heat:#e8d4cb; --m-assumed:#c7d6df; --m-glass:#b9d7e6;
  --tint-wohn:#eef2f8; --tint-kueche:#e8f3f1; --tint-bad:#f7ece6; --tint-flur:#f5f0e3;
  --font-ui:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-cond:'IBM Plex Sans Condensed','Arial Narrow',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --ground:#121618; --panel:#191e21; --panel-2:#20262a; --ink:#e2e7e4; --ink-2:#a1aba8; --ink-3:#768280; --line:#2d3538;
    --accent:#e4ab2c; --accent-ink:#1c1402; --accent-soft:#3a2f14;
    --measure:#5bb8c4; --measure-soft:#16343a;
    --ok:#62c38a; --ok-soft:#173424; --warn:#e39c47; --warn-soft:#3a2a16; --bad:#e8766b; --bad-soft:#3d1e1b;
    --m-bg:#0f1315; --m-base:#171c1e; --m-floor:#2b3134; --m-wall:#c9d0ce; --m-poche:#0b0e0f; --m-furn:#56605f; --m-soft:#4d5a63; --m-wood:#6e6350;
    --m-heat:#6b5750; --m-assumed:#48606c; --m-glass:#4f7486;
    --tint-wohn:#2c3238; --tint-kueche:#28332f; --tint-bad:#35302d; --tint-flur:#343229;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --ground:#121618; --panel:#191e21; --panel-2:#20262a; --ink:#e2e7e4; --ink-2:#a1aba8; --ink-3:#768280; --line:#2d3538;
  --accent:#e4ab2c; --accent-ink:#1c1402; --accent-soft:#3a2f14;
  --measure:#5bb8c4; --measure-soft:#16343a;
  --ok:#62c38a; --ok-soft:#173424; --warn:#e39c47; --warn-soft:#3a2a16; --bad:#e8766b; --bad-soft:#3d1e1b;
  --m-bg:#0f1315; --m-base:#171c1e; --m-floor:#2b3134; --m-wall:#c9d0ce; --m-poche:#0b0e0f; --m-furn:#56605f; --m-soft:#4d5a63; --m-wood:#6e6350;
  --m-heat:#6b5750; --m-assumed:#48606c; --m-glass:#4f7486;
  --tint-wohn:#2c3238; --tint-kueche:#28332f; --tint-bad:#35302d; --tint-flur:#343229;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:14px/1.45 var(--font-ui);-webkit-font-smoothing:antialiased}
button,select,input{font:inherit;color:inherit}
.app{height:100%;display:grid;grid-template-columns:292px minmax(0,1fr) 336px;grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"bar bar bar" "left stage right"}
.bar{grid-area:bar;display:flex;align-items:center;gap:18px;flex-wrap:wrap;padding:10px 16px;background:var(--panel);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;min-width:0}
.brand h1{margin:0;font:700 19px/1.1 var(--font-cond);letter-spacing:.01em;text-wrap:balance}
.brand .sub{font:12px/1.3 var(--font-mono);color:var(--ink-3)}
.bar .spacer{flex:1}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:7px;overflow:hidden;background:var(--panel-2)}
.seg button{border:0;background:transparent;padding:6px 11px;cursor:pointer;font:600 12.5px/1 var(--font-cond);letter-spacing:.03em;color:var(--ink-2)}
.seg button+button{border-left:1px solid var(--line)}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--panel)}
.seg button:focus-visible,.btn:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid var(--measure);outline-offset:2px}

.panel{background:var(--panel);overflow-y:auto;padding-block:12px 28px;padding-inline:16px;display:flex;flex-direction:column;gap:18px}
.left{grid-area:left;border-right:1px solid var(--line)}
.right{grid-area:right;border-left:1px solid var(--line)}
.sec{display:flex;flex-direction:column;gap:9px}
.sec>h2{margin:0;font:600 12px/1.2 var(--font-cond);letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);display:flex;align-items:center;gap:8px}
.sec>h2::after{content:"";flex:1;height:1px;background:var(--line)}
.hint{margin:0;font-size:12.5px;color:var(--ink-2)}
.ctl{display:grid;grid-template-columns:1fr auto;align-items:baseline;gap:2px 8px}
.ctl .nm{font-size:13px;color:var(--ink-2)}
.ctl output{font:500 12.5px/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--ink)}
.ctl input[type=range]{grid-column:1/-1;width:100%;margin:2px 0 0;accent-color:var(--accent);height:18px}
.ctl.dim output{color:var(--measure)}
.btns{display:flex;flex-wrap:wrap;gap:6px}
.btn{border:1px solid var(--line);background:var(--panel-2);border-radius:7px;padding:7px 10px;cursor:pointer;font:500 13px/1.15 var(--font-ui);text-align:left}
.btn:hover{border-color:var(--ink-3)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-ink);font-weight:600}
.btn.stop{background:var(--ink);border-color:var(--ink);color:var(--panel);font-weight:600}
.btn[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent)}
.btn:disabled{opacity:.5;cursor:default}
.demo{display:grid;grid-template-columns:22px 1fr;gap:2px 8px;align-items:start;width:100%}
.demo .no{font:600 12px/1.6 var(--font-mono);color:var(--accent)}
.demo .t{font-weight:600}
.demo .d{grid-column:2;font-size:12px;color:var(--ink-2)}
.row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
select{border:1px solid var(--line);background:var(--panel-2);border-radius:7px;padding:6px 8px}
.toggles{display:grid;grid-template-columns:1fr 1fr;gap:6px 10px}
.toggles label{display:flex;gap:7px;align-items:center;font-size:13px;color:var(--ink-2);cursor:pointer}
.toggles input{accent-color:var(--accent)}

.stage{grid-area:stage;position:relative;min-height:0;background:var(--m-bg);overflow:hidden;container-type:size}
#view{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:none}
.stage-note{position:absolute;left:12px;bottom:10px;font:12px/1.35 var(--font-mono);color:var(--ink-2);background:color-mix(in srgb,var(--panel) 82%,transparent);padding:5px 8px;border-radius:6px;pointer-events:none;max-width:calc(100% - 24px)}
.mode-pill{position:absolute;left:12px;top:12px;display:flex;gap:8px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:999px;padding:5px 12px 5px 9px;font:600 12.5px/1 var(--font-cond);letter-spacing:.03em}
.mode-pill i{width:9px;height:9px;border-radius:50%;background:var(--ok)}
.mode-pill.busy i{background:var(--accent);animation:pulse 1s ease-in-out infinite}
.mode-pill.alert i{background:var(--bad)}
@keyframes pulse{50%{opacity:.35}}
#bubble{position:absolute;left:0;top:0;transform:translate(-50%,calc(-100% - 14px));background:var(--panel);color:var(--ink);border:1.5px solid var(--ink);border-radius:12px;padding:7px 11px;font:500 13.5px/1.3 var(--font-ui);max-width:240px;pointer-events:none;box-shadow:0 3px 0 color-mix(in srgb,var(--ink) 18%,transparent);transition:opacity .25s}
#bubble::after{content:"";position:absolute;left:50%;bottom:-8px;width:12px;height:12px;background:var(--panel);border-right:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);transform:translateX(-50%) rotate(45deg)}
#bubble[hidden]{display:none!important}
.flash{position:absolute;right:12px;top:12px;background:var(--bad);color:#fff;border-radius:7px;padding:6px 10px;font:600 12.5px/1.2 var(--font-cond);letter-spacing:.02em;opacity:0;transition:opacity .2s;pointer-events:none}
.flash.on{opacity:1}

.cam{position:relative;border-radius:9px;overflow:hidden;background:#0d1417;aspect-ratio:16/10;max-width:100%}
.cam canvas{display:block;width:100%;height:100%}
.cam .lbl{position:absolute;left:8px;top:7px;font:500 11px/1 var(--font-mono);color:#cfe3e8;letter-spacing:.04em;text-shadow:0 1px 2px #000}
.cam .rec{position:absolute;right:8px;top:7px;width:8px;height:8px;border-radius:50%;background:#e2574c}
.cam .det{position:absolute;border:2px solid #ffd35a;border-radius:4px;pointer-events:none}
.cam .det span{position:absolute;left:-2px;top:-19px;background:#ffd35a;color:#1b1400;font:600 11px/1 var(--font-mono);padding:3px 5px;border-radius:3px 3px 3px 0;white-space:nowrap}
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:9px;overflow:hidden}
.stat{background:var(--panel);padding:7px 9px;display:flex;flex-direction:column;gap:1px;min-width:0}
.stat .k{font:500 11px/1.2 var(--font-cond);letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)}
.stat .v{font:500 14px/1.3 var(--font-mono);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.batt{height:5px;border-radius:3px;background:var(--panel-2);overflow:hidden;margin-top:3px}
.batt i{display:block;height:100%;background:var(--ok);width:100%;transition:width .3s}
.checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;border:1px solid var(--line);border-radius:9px;overflow:hidden}
.checks li{display:grid;grid-template-columns:26px 1fr;gap:1px 8px;padding:7px 9px;background:var(--panel);border-top:1px solid var(--line)}
.checks li:first-child{border-top:0}
.checks .mk{grid-row:1/3;align-self:start;width:22px;height:22px;border-radius:6px;display:grid;place-items:center;font:700 13px/1 var(--font-mono)}
.checks li.ok .mk{background:var(--ok-soft);color:var(--ok)}
.checks li.warn .mk{background:var(--warn-soft);color:var(--warn)}
.checks li.bad .mk{background:var(--bad-soft);color:var(--bad)}
.checks li.info .mk{background:var(--measure-soft);color:var(--measure)}
.checks .lb{font-size:13px;font-weight:500}
.checks .nt{font:12px/1.35 var(--font-mono);color:var(--ink-2)}
.log{list-style:none;margin:0;padding:0;font:12px/1.4 var(--font-mono);display:flex;flex-direction:column;gap:3px;max-height:230px;overflow-y:auto}
.log li{display:grid;grid-template-columns:64px 1fr;gap:6px;color:var(--ink-2)}
.log li time{color:var(--ink-3)}
.log li.say{color:var(--ink)}
.log li.warn{color:var(--warn)}
.log li.bad{color:var(--bad)}
details.assume{border:1px solid var(--line);border-radius:9px;padding:8px 10px;background:var(--panel-2)}
details.assume summary{cursor:pointer;font:600 12.5px/1.3 var(--font-cond);letter-spacing:.04em;color:var(--ink-2)}
details.assume ul{margin:8px 0 2px;padding-left:18px;font-size:12.5px;color:var(--ink-2);display:flex;flex-direction:column;gap:3px}
kbd{font:500 11.5px/1 var(--font-mono);border:1px solid var(--line);border-bottom-width:2px;border-radius:4px;padding:1px 4px;background:var(--panel)}

/* ---------- Stufe B1: Eigenständig-Betrieb ---------- */
body.autonom .nur-vorfuehrung{display:none!important}
body:not(.autonom) .nur-autonom{display:none!important}
.betrieb{display:flex;align-items:center;gap:8px}
.dot{width:10px;height:10px;border-radius:50%;background:var(--ink-3);opacity:.5}
.dot.an{background:var(--ok);opacity:1}
.check{display:flex;gap:7px;align-items:center;font-size:13px;color:var(--ink-2);cursor:pointer}
.check input{accent-color:var(--accent)}
.jetzt{margin:0;font-size:13px;font-weight:500;line-height:1.35}
.naechstes{margin:0;padding-left:16px;font-size:12px;color:var(--ink-2)}
.naechstes:empty{display:none}
.beduerfnisse{display:flex;flex-direction:column;gap:6px}
.bed{display:grid;grid-template-columns:104px 1fr 38px;gap:8px;align-items:center;font-size:12.5px}
.bed .lb{color:var(--ink-2)}
.bed .balken{position:relative;height:9px;border-radius:5px;background:var(--panel-2);border:1px solid var(--line);overflow:hidden}
.bed .band{position:absolute;top:0;bottom:0;background:var(--ok-soft)}
.bed .ist{position:absolute;top:0;bottom:0;left:0;background:var(--ok);border-radius:5px 0 0 5px;transition:width .3s}
.bed.drang .ist{background:var(--warn)}
.bed.stark .ist{background:var(--bad)}
.bed .v{font:500 11.5px/1 var(--font-mono);text-align:right;color:var(--ink-2)}
.stellgroessen{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sg{background:var(--panel-2);border:1px solid var(--line);border-radius:8px;padding:6px 8px;display:flex;flex-direction:column;gap:3px}
.sg .k{font:600 11px/1.2 var(--font-cond);letter-spacing:.04em;color:var(--ink-2)}
.sg .k small{font-weight:400;color:var(--ink-3)}
.sg .mini{height:5px;border-radius:3px;background:var(--line);overflow:hidden}
.sg .mini i{display:block;height:100%;background:var(--measure);transition:width .3s}
.kosten{margin:0;font:12px/1.35 var(--font-mono);color:var(--ink-2)}
.log li details summary{cursor:pointer;list-style:none}
.log li details summary::-webkit-details-marker{display:none}
.log li details pre{white-space:pre-wrap;word-break:break-word;font:11px/1.35 var(--font-mono);background:var(--panel-2);border:1px solid var(--line);border-radius:6px;padding:6px;margin:4px 0 2px;max-height:260px;overflow:auto;color:var(--ink)}
.log li.modell{color:var(--measure)}
.log li.absicht,.log li.plan{color:var(--ink)}
.log li.gut{color:var(--ok)}
.log li.steffen{color:var(--accent)}
.chat{position:absolute;left:12px;right:12px;bottom:10px;display:flex;flex-direction:column;gap:6px;pointer-events:none}
/* höchstens ein Viertel der Bildhöhe, ältere Nachrichten scrollen nach oben weg (Steffen 27.09.) */
.chat-log{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;max-height:25vh;max-height:25cqh;overflow-y:auto;pointer-events:auto;align-self:stretch}
.chat-log:empty{display:none}
.chat-titel{align-self:flex-start;margin:0;padding:3px 10px;border-radius:8px;font-size:12px;font-weight:600;background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);pointer-events:auto}
.chat-log li{max-width:78%;padding:6px 10px;border-radius:10px;font-size:13px;line-height:1.35;background:var(--panel);border:1px solid var(--line)}
.chat-log li.du{align-self:flex-end;background:var(--accent-soft);border-color:var(--accent)}
.chat-log li.hinweis{align-self:center;background:none;border-style:dashed;color:var(--ink-2);font-style:italic}
.chat-log li.frage{border-color:var(--measure);border-width:1.5px}
.chat-form{display:flex;flex-wrap:wrap;gap:6px;pointer-events:auto;background:color-mix(in srgb,var(--panel) 92%,transparent);border:1px solid var(--line);border-radius:10px;padding:6px}
.chat-form input{flex:1 1 200px;min-width:0;border:1px solid var(--line);border-radius:7px;padding:7px 9px;background:var(--panel-2)}
table.ergebnis{border-collapse:collapse;font-size:12.5px;width:100%}
table.ergebnis td{border-top:1px solid var(--line);padding:5px 4px;vertical-align:top}
table.ergebnis td:last-child{text-align:right;font-family:var(--font-mono);white-space:nowrap}
table.ergebnis tr.ok td:last-child{color:var(--ok)}
table.ergebnis tr.bad td:last-child{color:var(--bad)}
table.ergebnis tr.gesamt td{font-weight:600}

/* Stufe C3: Spielbrett oben rechts über der Wohnung; unten bleibt der Chat frei */
.brett{position:absolute;top:12px;right:12px;width:min(380px,calc(100% - 24px));max-height:calc(100% - 140px);display:flex;flex-direction:column;gap:8px;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px;box-shadow:0 8px 28px rgba(0,0,0,.2);z-index:5}
.brett[hidden]{display:none}
.brett-kopf{display:flex;justify-content:space-between;align-items:baseline;gap:4px 10px;flex-wrap:wrap;font:600 14px/1.2 var(--font-cond)}
.brett-kopf span{font:12px/1.2 var(--font-mono);color:var(--ink-2)}
.brett-feld{aspect-ratio:1/1;flex:0 1 auto;min-height:90px}
#brett-svg{display:block;width:100%;height:100%}
.brett-status{margin:0;min-height:2.9em;font-size:13.5px}
.b-grund{fill:#f3e7c4;stroke:#c9b47e;stroke-width:.6}
.b-feld{stroke:#6b5b33;stroke-width:.5}
.b-bahn:not([fill]){fill:#fbf7ea}
.b-wuerfel{fill:#fff;stroke-width:.9}
.b-auge{fill:#1b2427}
.b-figur{transition:transform .35s ease}
.b-stein{stroke:#1b2427;stroke-width:.7}
.b-licht{fill:#fff;opacity:.55;pointer-events:none}
.b-ring{fill:transparent;stroke:none}
.b-figur.kann{cursor:pointer}
.b-figur.kann .b-ring{stroke:var(--measure);stroke-width:1.1;stroke-dasharray:2 1.4;animation:b-kreis 1.6s linear infinite}
@keyframes b-kreis{to{stroke-dashoffset:-6.8}}

@media (max-width: 1080px){
  .brett{max-height:calc(100% - 24px)}
  .app{height:auto;min-height:100%;display:flex;flex-direction:column}
  .bar{order:0}
  .stage{order:1;height:62svh;min-height:340px;margin-inline:16px;margin-block:12px 0;border-radius:12px;border:1px solid var(--line)}
  .left{order:2;border:0}
  .right{order:3;border:0}
  .panel{overflow:visible}
}
@media (prefers-reduced-motion: reduce){ .mode-pill.busy i{animation:none} #bubble{transition:none} .b-figur{transition:none} .b-figur.kann .b-ring{animation:none} }

/* Online-Demo: Zähler und Hinweis am Chat, Kasten für nicht angemeldete Besucher */
.chat-rest{margin:0;font-size:12px;color:var(--ink-2);pointer-events:auto}
.chat-rest:empty{display:none}
.anmelde-kasten{display:none;margin:0;padding:10px 12px;border:1px solid var(--accent);border-radius:8px;background:var(--accent-soft);font-size:13px;line-height:1.5}
body.gast .anmelde-kasten{display:block}
body.gast #jetzt,body.gast #naechstes,body.gast #beduerfnisse,body.gast #stellgroessen,body.gast #chat,body.gast .nur-autonom:not(.sec:has(#anmelde-kasten)):not(label):not(option){display:none}

/* Stufe B: Selbstbild im Innenleben */
.unter{margin:12px 0 4px;font-size:12px;font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
.selbstbild{width:100%;border-collapse:collapse;font-size:12px}
.selbstbild th{text-align:left;font-weight:500;color:var(--ink-2);padding:2px 4px;border-bottom:1px solid var(--line)}
.selbstbild td{padding:3px 4px;border-bottom:1px solid var(--line);vertical-align:top}
.selbstbild td:nth-child(2),.selbstbild th:nth-child(2){text-align:right}
.selbstbild[hidden]{display:none}
.selbstbild td:nth-child(5),.selbstbild th:nth-child(5){padding-left:2px;padding-right:0}
.selbstbild .reiz{display:inline-block;width:26px;height:6px;border-radius:3px;background:var(--line);overflow:hidden;vertical-align:middle}
.selbstbild .reiz i{display:block;height:100%;background:var(--accent)}
.entdeckt{margin:0;padding:0 0 0 16px;font-size:12px;line-height:1.5}
#entdeckt-box[hidden]{display:none}
body.gast .unter,body.gast .selbstbild,body.gast #selbstbild-leer,body.gast #sb-vergessen,body.gast #entdeckt-box{display:none}

/* ---------- Handy (Steffen 01.10.): Wohnung fest oben, darunter Reiter, nur der Reiter scrollt (js/handy.js) ---------- */
.sec[hidden]{display:none}
.unten{display:contents}
.reiter,.handy-chat,.handy-mehr,.finger{display:none}
@media (hover:none) and (pointer:coarse){ .maus{display:none} .finger{display:inline} }
@media (max-width: 760px), (max-height: 500px) and (orientation: landscape) and (max-width: 1080px){
  html,body{height:100%;overflow:hidden}
  .app{height:100dvh;min-height:0;display:flex;flex-direction:column}
  .bar{flex:none;gap:10px;padding:6px 12px;padding-top:max(6px,env(safe-area-inset-top))}
  .brand h1{font-size:18px}
  .brand .lang,.brand .sub{display:none}
  .stage{flex:0 0 45%;height:auto;min-height:0;margin:0;border:0;border-radius:0;border-bottom:1px solid var(--line)}
  .stage-note{font-size:11px;left:8px;bottom:6px;max-width:calc(100% - 16px)}
  .reiter{display:flex;flex:none;order:2;background:var(--panel);border-bottom:1px solid var(--line)}
  .reiter button{flex:1;border:0;border-bottom:2px solid transparent;background:none;padding:10px 4px 8px;cursor:pointer;
    font:600 13.5px/1 var(--font-cond);letter-spacing:.03em;color:var(--ink-2);position:relative}
  .reiter button[aria-pressed="true"]{color:var(--ink);border-bottom-color:var(--accent)}
  .reiter button.neu::after{content:"";display:inline-block;width:7px;height:7px;margin-left:4px;vertical-align:top;border-radius:50%;background:var(--accent)}
  body.autonom .reiter [data-r=vorfuehren],body.autonom .reiter [data-r=steuern],
  body:not(.autonom) .reiter [data-r=chat],body:not(.autonom) .reiter [data-r=spielen]{display:none}
  .unten{display:flex;flex-direction:column;flex:1 1 0;order:3;min-height:0;overflow-y:auto;overscroll-behavior:contain;background:var(--panel);padding-bottom:env(safe-area-inset-bottom)}
  .panel{overflow:visible;border:0;padding-block:12px 20px;flex:none}
  .handy-chat,.handy-mehr{display:flex;padding:12px 16px 0}
  .handy-chat{flex:1 1 auto;min-height:0;padding-bottom:10px}
  .handy-chat .chat{position:static;flex:1;min-height:0;justify-content:flex-end;pointer-events:auto}
  .handy-chat .chat-titel{display:none}
  .handy-chat .chat-log{max-height:none;flex:1 1 auto;min-height:0}
  .handy-chat .chat-form{background:var(--panel-2)}
  .left [aria-label="Spielen"]{order:-2} .left [aria-label="Dinge in der Wohnung"]{order:-1} .right .innen{order:-1}
  .brett{max-height:calc(100% - 24px)}
  .app[data-reiter=vorfuehren] [data-reiter]:not([data-reiter~=vorfuehren]),
  .app[data-reiter=steuern] [data-reiter]:not([data-reiter~=steuern]),
  .app[data-reiter=chat] [data-reiter]:not([data-reiter~=chat]),
  .app[data-reiter=spielen] [data-reiter]:not([data-reiter~=spielen]),
  .app[data-reiter=emil] [data-reiter]:not([data-reiter~=emil]),
  .app[data-reiter=mehr] [data-reiter]:not([data-reiter~=mehr]),
  body:not(.autonom) .app[data-reiter=mehr] [data-reiter="vorfuehren mehr"]{display:none!important}
}
/* Handy quer: Wohnung links, Reiter rechts */
@media (max-height: 500px) and (orientation: landscape) and (max-width: 1080px){
  .app{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);
    grid-template-areas:"bar bar" "stage reiter" "stage unten"}
  .stage{border-bottom:0;border-right:1px solid var(--line)}
  .reiter{grid-area:reiter} .unten{grid-area:unten}
}