/* 3D-Baukasten – Farben und Leisten wie im 3D-Präsentationseditor,
   aber alles für den Finger: Bedienelemente mindestens 44 px. */
:root{
  --bg:#131420; --bg2:#1a1c2c; --bg3:#232640; --fg:#e8e9f2; --mut:#9a9eb8;
  --acc:#5aa2ff; --accd:#3d7be0; --line:#2e3150; --danger:#ff6470; --ok:#57d98f;
  --x:#e5534b; --y:#57b85c; --z:#4c8fe0; --sel:#ffb83d;
  --tap:44px;
}
*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{margin:0;height:100%;background:var(--bg);color:var(--fg);
  font:15px/1.4 "Segoe UI",system-ui,sans-serif;overflow:hidden;
  touch-action:manipulation;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:var(--fg);background:var(--bg3);border:1px solid var(--line);
  border-radius:8px;padding:0 12px;min-height:var(--tap);min-width:var(--tap);cursor:pointer;
  white-space:nowrap;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  user-select:none;-webkit-user-select:none}
button:hover{border-color:var(--acc)}
button:disabled{opacity:.4;cursor:default;border-color:var(--line)}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--acc);outline-offset:1px}
button.haupt{background:var(--accd);border-color:var(--accd);color:#fff}
button.gefahr{color:var(--danger)}
button.gefahr:hover{border-color:var(--danger)}
button.klein{min-height:36px;padding:0 10px;font-size:13px}
button[aria-pressed="true"]{background:var(--acc);border-color:var(--acc);color:#fff}
button svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
input[type=text],select{font:inherit;color:var(--fg);background:var(--bg);
  border:1px solid var(--line);border-radius:8px;padding:0 10px;min-height:var(--tap)}
input.zahl{width:100%;min-width:0;text-align:right;padding:0 8px}
input[type=color]{width:var(--tap);height:var(--tap);padding:2px;border:1px solid var(--line);
  border-radius:8px;background:var(--bg);cursor:pointer}
label{color:var(--mut);user-select:none}

#app{display:grid;grid-template-rows:auto auto 1fr;height:100%}

/* ---------------------------- Kopfleiste ---------------------------- */
#kopf{display:flex;align-items:center;gap:6px;padding:6px 8px;background:var(--bg2);
  border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:thin}
#kopf .trenner{width:1px;height:28px;background:var(--line);flex:none;margin:0 2px}
#kopf .luecke{flex:1}
#inName{width:160px;flex:0 1 160px;min-width:90px}
#kopf .raster{display:flex;align-items:center;gap:6px;font-size:13px}

/* --------------------------- Einfügeleiste -------------------------- */
#einfuegen{display:flex;gap:6px;padding:6px 8px;background:var(--bg2);
  border-bottom:1px solid var(--line);overflow-x:auto;scrollbar-width:thin}
#einfuegen button{flex-direction:column;gap:2px;min-width:74px;min-height:58px;padding:4px 8px;font-size:13px}
#einfuegen button svg{width:28px;height:28px;stroke-width:1.6}

/* ------------------------------- Bühne ------------------------------ */
#haupt{display:grid;grid-template-columns:1fr 330px;min-height:0}
#buehne{position:relative;min-width:0;min-height:0;background:#161826}
#leinwand{position:absolute;inset:0;width:100%;height:100%;outline:none;touch-action:none;display:block}
#werkzeuge{position:absolute;left:10px;top:10px;display:flex;flex-direction:column;gap:8px;z-index:5}
#werkzeuge button,#btnAlles{flex-direction:column;gap:1px;width:68px;min-height:58px;padding:4px;
  font-size:12px;background:rgba(35,38,64,.92)}
#werkzeuge button.aktiv{background:var(--acc);border-color:var(--acc);color:#fff}
#btnAlles{position:absolute;right:10px;bottom:10px;z-index:5;width:auto;padding:4px 10px}
#leer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  pointer-events:none;color:var(--mut);text-align:center;padding:24px;white-space:pre-line;z-index:1}
#meldung{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:6;
  background:rgba(24,26,40,.96);border:1px solid var(--acc);border-radius:20px;
  padding:8px 18px;display:none;pointer-events:none;max-width:80%;text-align:center}

/* ---------------------------- Seitenleiste -------------------------- */
#seite{background:var(--bg2);border-left:1px solid var(--line);overflow-y:auto;
  padding:10px;display:flex;flex-direction:column;gap:14px;min-height:0}
#seite h2,#eigenschaften h3{margin:0 0 8px;font-size:12px;font-weight:600;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:8px}
#seite h2 button{margin-left:auto;text-transform:none;letter-spacing:0}
#liste{display:flex;flex-direction:column;gap:3px;max-height:34vh;overflow-y:auto}
.teil{display:flex;align-items:center;gap:8px;min-height:var(--tap);padding:0 8px;border-radius:8px;
  border:1px solid transparent;cursor:pointer;user-select:none;background:transparent;
  color:var(--fg);width:100%;justify-content:flex-start;font-size:14px}
.teil:hover{background:var(--bg3)}
.teil.sel{border-color:var(--sel);background:var(--bg3)}
.teil .punkt{width:14px;height:14px;border-radius:4px;flex:none;border:1px solid var(--line)}
.teil .name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left}
.teil .art{color:var(--mut);font-size:12px}
.leer{color:var(--mut);font-size:14px;padding:4px 2px}

#eigenschaften{border-top:1px solid var(--line);padding-top:12px;display:flex;
  flex-direction:column;gap:12px}
#eigenschaften .gruppe{display:flex;flex-direction:column;gap:6px}
#eigenschaften .zeile{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
#eigenschaften .drei{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#eigenschaften .drei label,#eigenschaften .masse label{display:flex;flex-direction:column;gap:2px;font-size:12px}
#eigenschaften .masse{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
#eigenschaften .ax-x{color:var(--x)} #eigenschaften .ax-y{color:var(--y)} #eigenschaften .ax-z{color:var(--z)}
#eigenschaften .knoepfe{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#eigenschaften .knoepfe button{padding:0 8px}
#eigenschaften .hinweis{color:var(--mut);font-size:13px}
#inTeilName{width:100%}
.farben{display:flex;flex-wrap:wrap;gap:6px}
.farbe{width:var(--tap);height:var(--tap);min-width:0;padding:0;border-radius:8px;border:2px solid transparent}
.farbe.sel{border-color:#fff}
.mat{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.mat button{padding:0 4px;font-size:13px}

/* ------------------------------ Profilfeld -------------------------- */
.profil-svg{width:100%;max-width:340px;margin:0 auto;aspect-ratio:1;display:block;background:#10111b;border:1px solid var(--line);
  border-radius:8px;touch-action:none;cursor:crosshair}
.pg-linie{stroke:#262a44} .pg-boden{stroke:#4a5070} .pg-achse{stroke:#8d91ab}
.pg-umriss{fill:rgba(90,162,255,.18);stroke:var(--acc);stroke-linejoin:round}
.pg-spiegel{fill:rgba(90,162,255,.07);stroke:rgba(90,162,255,.35);stroke-linejoin:round}
.pg-punkt{fill:#fff;stroke:var(--accd);stroke-width:.05;pointer-events:none}
.pg-punkt.sel{fill:var(--sel)}
.pg-treffer{fill:transparent;cursor:grab}
.profil-leiste{display:grid;grid-template-columns:1fr 1fr auto;gap:6px;align-items:end;margin-top:6px}
.profil-leiste label{display:flex;flex-direction:column;gap:2px;font-size:12px}

/* ------------------------------- Dialoge ---------------------------- */
dialog{background:var(--bg2);color:var(--fg);border:1px solid var(--line);border-radius:12px;
  padding:18px;max-width:min(560px,94vw)}
dialog::backdrop{background:rgba(0,0,0,.55)}
dialog h2{margin:0 0 6px;font-size:18px}
dialog p{margin:0 0 12px;color:var(--mut)}
dialog ul{padding-left:20px;margin:0 0 14px} dialog li{margin-bottom:6px}
dialog form{display:flex;justify-content:flex-end;margin-top:12px}
#auswahl{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:62vh;overflow-y:auto}
#auswahl button{flex-direction:column;min-height:96px;padding:8px;font-size:13px;white-space:normal;gap:4px}
#auswahl button small{color:var(--mut);font-size:12px}
#auswahl .auswahl-kopf{grid-column:1/-1;margin:6px 0 0;font-size:12px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--mut)}
.vorlage-bild{width:64px;height:64px}
.vb-flaeche{fill:rgba(90,162,255,.25);stroke:var(--acc)}

/* --------------------------- Körper oder Loch ----------------------- */
#eigenschaften .zwei{display:grid;grid-template-columns:1fr 1fr;gap:6px}
#eigenschaften .lochknopf[aria-pressed="true"]{background:var(--danger);border-color:var(--danger)}
#eigenschaften .hinweis.fehler{color:var(--danger)}
.teil.loch .name{color:#ff9aa2}

/* ----------------------------- Code-Ansicht ------------------------- */
#code{display:none;flex-direction:column;min-width:0;min-height:0;background:var(--bg2);
  border-right:1px solid var(--line)}
body.code-offen #code{display:flex}
body.code-offen #seite{display:none}
body.code-offen #haupt{grid-template-columns:minmax(360px,52%) 1fr}
body.code-offen #code{grid-column:1;grid-row:1}
body.code-offen #buehne{grid-column:2;grid-row:1}
#codeKopf{display:flex;align-items:center;gap:6px;padding:6px 8px;border-bottom:1px solid var(--line);flex-wrap:wrap}
#codeKopf .luecke{flex:1}
#codeKopf .sofort{display:flex;align-items:center;gap:4px;font-size:13px;min-height:var(--tap)}
#codeKopf .sofort input{width:22px;height:22px}
.reiter{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.reiter button{border:0;border-radius:0;background:transparent}
.reiter button[aria-selected="true"]{background:var(--acc);color:#fff}
#codeInfo{padding:6px 10px;font-size:13px;color:var(--mut);display:flex;flex-wrap:wrap;gap:6px;align-items:center}
#codeInfo strong{color:var(--fg)}
#blockFlaeche{flex:1;min-height:0;position:relative}
#textFlaeche{flex:1;min-height:0;display:flex;flex-direction:column}
#textFlaeche[hidden],#blockFlaeche[hidden]{display:none}
.editor{flex:1;min-height:0;display:flex;background:#10111b;border-top:1px solid var(--line);
  font:14px/1.5 ui-monospace,"Cascadia Mono",Consolas,monospace;overflow:hidden}
.editor .nr{flex:none;width:44px;overflow:hidden;background:#141522;color:#5a5e7a;text-align:right}
.editor .nr pre{margin:0;padding:10px 8px 10px 0;font:inherit}
.editor .nr .fz{color:#fff;background:var(--danger);border-radius:3px;padding:0 3px}
.editor .ed{position:relative;flex:1;min-width:0;overflow:hidden}
.editor .ed pre,.editor textarea{position:absolute;inset:0;margin:0;padding:10px;font:inherit;
  white-space:pre;tab-size:2;border:0;letter-spacing:0;word-spacing:0}
.editor .ed pre{pointer-events:none;color:#d6d8e8;overflow:visible;transform-origin:0 0}
.editor textarea{width:100%;height:100%;resize:none;background:transparent;color:transparent;
  caret-color:#fff;outline:none;overflow:auto;-webkit-text-fill-color:transparent}
.editor textarea::selection{background:rgba(90,162,255,.35)}
.editor textarea[readonly]{caret-color:transparent}
.h-k{color:#6f8f6f;font-style:italic} .h-t{color:#e6c07b} .h-z{color:#f0a868}
.h-s{color:#c792ea} .h-e{color:#5aa2ff} .h-d{color:#57d98f} .h-o{color:#9aa0c0}
#schnipsel{display:flex;gap:4px;padding:6px;overflow-x:auto;border-top:1px solid var(--line);flex:none;scrollbar-width:thin}
#schnipsel[hidden]{display:none}
#schnipsel button{min-height:40px;min-width:44px;padding:0 10px;font:13px ui-monospace,Consolas,monospace;flex:none}
#konsole{flex:none;max-height:28%;min-height:64px;overflow-y:auto;border-top:1px solid var(--line);
  padding:6px 8px;display:flex;flex-direction:column;gap:3px;font:13px/1.4 ui-monospace,Consolas,monospace}
#konsole .kz{text-align:left;justify-content:flex-start;white-space:pre-wrap;min-height:0;padding:3px 6px;
  border-radius:6px;font:inherit;background:transparent;border:0;color:var(--fg)}
#konsole button.kz{cursor:pointer;text-decoration:underline dotted}
#konsole .fehler{color:#ff8a93;background:rgba(255,100,112,.1)}
#konsole .warn{color:#ffc46b}
#konsole .echo{color:#9ad1ff}
#konsole .gut{color:var(--ok)}
#konsole .info{color:var(--mut)}
/* Blockly: dunkle Kategorienliste, größere Einträge für den Finger */
.blocklyToolboxCategory{min-height:40px;display:flex;align-items:center}
.blocklyTreeLabel{font-size:15px}

/* --------------------------- Tablet hochkant ------------------------ */
@media (max-width:900px){
  #haupt{grid-template-columns:1fr;grid-template-rows:1fr minmax(0,44%)}
  #seite{border-left:0;border-top:1px solid var(--line)}
  #liste{max-height:none}
  #seite{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);align-items:start;gap:12px}
  #eigenschaften{border-top:0;padding-top:0}
  body.code-offen #haupt{grid-template-columns:1fr;grid-template-rows:minmax(0,38%) 1fr}
  body.code-offen #buehne{grid-column:1;grid-row:1}
  body.code-offen #code{grid-column:1;grid-row:2;border-right:0;border-top:1px solid var(--line)}
  #auswahl{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  #kopf .lbl{display:none}
  #kopf button{padding:0 8px}
}
@media (max-width:560px){
  #seite{display:flex}
}