/* MorphWerk 1v0 - created by AnnoBoy 2026 */
body.dunkel { --bg:#14111f; --panel:#1d1930; --panel2:#262140; --rand:#3a3358; --text:#eeeaff; --leise:#a69fc4; --knopf:#2e2850; --knopfh:#3d3568; --link:#c4b5fd; }
body.hell   { --bg:#f4f1ff; --panel:#ffffff; --panel2:#ece7ff; --rand:#d6cdf5; --text:#1d1830; --leise:#6b6290; --knopf:#ede8ff; --knopfh:#ddd3ff; --link:#6d28d9; }
* { box-sizing:border-box; }
html, body { margin:0; height:100%; }
body { background:var(--bg); color:var(--text); font:14px/1.4 "Segoe UI", Inter, system-ui, sans-serif; -webkit-tap-highlight-color:transparent; }
#app { display:flex; flex-direction:column; gap:10px; padding:12px 14px 8px; min-height:100%; max-width:1800px; margin:0 auto; }
h1, h2 { margin:0; }
h2 { font-size:15px; font-weight:700; }
.leise { color:var(--leise); font-size:12.5px; margin:4px 0; }
.klein { font-size:11.5px; }
.luecke { flex:1; }
hr { border:none; border-top:1px solid var(--rand); margin:8px 0; width:100%; }

/* Kopf */
.kopf { display:flex; align-items:center; gap:16px; height:64px; border-radius:16px; padding:0 18px;
  background:linear-gradient(90deg,#5b21b6,#7c3aed 55%,#0891b2); color:#fff; flex:none; }
.kopf h1 { font-size:24px; letter-spacing:.2px; }
.kopf p { margin:0; font-size:13px; opacity:.9; }
.logo { position:relative; width:58px; height:44px; flex:none; }
.logo span { position:absolute; top:2px; width:34px; height:40px; border-radius:50%; opacity:.85; }
.logo .k1 { left:0; background:#f0abfc; }
.logo .k2 { left:22px; background:#67e8f9; }
.logo.gross { margin:0 auto 6px; }

/* Knoepfe */
button, .knopf { font:inherit; font-weight:600; color:var(--text); background:var(--knopf); border:1px solid var(--rand);
  border-radius:10px; padding:7px 12px; cursor:pointer; text-decoration:none; display:inline-flex; align-items:center; gap:6px;
  justify-content:center; min-height:34px; touch-action:manipulation; }
button:hover, .knopf:hover { background:var(--knopfh); }
button:disabled { color:var(--leise); background:var(--panel2); border-color:var(--panel2); cursor:default; }
button.haupt { color:#fff; border:none; background:linear-gradient(90deg,#7c3aed,#06b6d4); }
button.haupt:hover { background:linear-gradient(90deg,#8b5cf6,#22d3ee); }
button.haupt:disabled { background:var(--panel2); color:var(--leise); }
button.stopp { background:#ef4444; color:#fff; border:none; }
button.stopp:disabled { background:var(--panel2); color:var(--leise); }
button.an { background:#7c3aed !important; color:#fff !important; border-color:#7c3aed !important; }
.breit { width:100%; }
.leiste { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }

.fortschritt { display:flex; gap:12px; align-items:center; }
.balken { flex:2; height:14px; background:var(--panel2); border-radius:7px; overflow:hidden; }
#balken { height:100%; width:0; background:linear-gradient(90deg,#7c3aed,#06b6d4); border-radius:7px; transition:width .2s; }
#statustext { flex:3; color:var(--leise); font-size:13px; }

/* Mitte */
.mitte { display:grid; grid-template-columns:270px 1fr 290px; gap:10px; flex:1; min-height:440px; }
.panel { background:var(--panel); border:1px solid var(--rand); border-radius:14px; padding:10px 12px; display:flex; flex-direction:column; min-width:0; }
.liste { list-style:none; margin:6px 0 0; padding:0; overflow:auto; flex:1; min-height:120px; }
.liste li { display:flex; align-items:center; gap:10px; padding:4px; border-radius:8px; cursor:pointer; border:1px solid transparent; }
.liste li:hover { background:var(--panel2); }
.liste li.gewaehlt { background:var(--panel2); border-color:#7c3aed; }
.liste li.zieh { opacity:.4; }
.liste li.ueber { border-top:3px solid #06b6d4; }
.liste .tx { flex:1; min-width:0; font-size:13px; }
.liste .tx b { display:block; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.liste .tx span { color:var(--leise); font-size:12px; }
.liste .weg { background:none; border:none; color:var(--leise); padding:2px 6px; min-height:0; font-size:15px; }
.liste .weg:hover { color:#ef4444; background:none; }
.mini { position:relative; width:54px; height:54px; flex:none; border-radius:9px; border:3px solid var(--f,#9ca3af); overflow:hidden; background:#4b4470 center/cover no-repeat; }
.mini::after { content:attr(data-z); position:absolute; right:2px; top:2px; width:15px; height:15px; border-radius:50%; background:var(--f);
  border:1.5px solid #fff; color:#fff; font:700 10px/12px sans-serif; text-align:center; }
.mini .nr { position:absolute; left:3px; bottom:3px; background:rgba(0,0,0,.6); color:#fff; font:700 10px/14px sans-serif; padding:0 5px; border-radius:5px; }

.bildpanel { gap:4px; }
.bildkopf { display:flex; gap:8px; align-items:center; }
.bildstatus { font-size:13px; min-height:20px; }
.bildstatus i, .legende i { display:inline-block; width:10px; height:10px; border-radius:50%; background:var(--f); margin:0 5px 0 4px; }
.flaeche { position:relative; flex:1; min-height:300px; background:var(--panel2); border-radius:12px; overflow:hidden; touch-action:none; }
.flaeche canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }
.flaeche.ziel canvas { cursor:crosshair; }
.leer { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; color:#8b84b0;
  font-size:20px; font-weight:600; pointer-events:none; }
.hilfe { margin-bottom:0; }

.rechts { gap:6px; overflow:auto; }
.teile { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.teile button { justify-content:flex-start; border-left:5px solid var(--f); font-size:12.5px; padding:6px 8px; white-space:nowrap; }
.zeile2 { display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.hinweis { min-height:18px; margin:2px 0; font-size:12.5px; color:#22d3ee; }
.legende { font-size:12.5px; margin:6px 0 0; }

/* Zeitleiste */
.zeitpanel { padding:6px 10px 8px; }
.zeitkopf { display:flex; gap:12px; align-items:baseline; flex-wrap:wrap; }
.zeitleiste { display:flex; gap:6px; overflow-x:auto; padding:6px 2px 4px; min-height:92px; }
.zeitleiste .mini { width:78px; height:78px; cursor:pointer; border-width:4px; border-radius:11px; }
.zeitleiste .mini.gewaehlt { outline:2px solid #7c3aed; outline-offset:2px; }

/* Fuss */
.fuss { display:flex; gap:14px; align-items:center; flex-wrap:wrap; font-size:13px; }
.werbung { color:var(--link); text-decoration:none; }
.werbung:hover { text-decoration:underline; }

.ablage { position:fixed; inset:0; display:none; align-items:center; justify-content:center; font-size:28px; font-weight:700; color:#fff;
  background:rgba(124,58,237,.55); border:4px dashed #fff; z-index:50; pointer-events:none; }
.ablage.an { display:flex; }
.toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%) translateY(30px); background:#1d1930; color:#fff; border:1px solid #7c3aed;
  padding:10px 16px; border-radius:12px; opacity:0; transition:.25s; z-index:60; pointer-events:none; max-width:90vw; text-align:center; }
.toast.an { opacity:1; transform:translateX(-50%); }

.fenster { position:fixed; inset:0; background:rgba(10,8,20,.7); display:flex; align-items:center; justify-content:center; z-index:70; padding:16px; }
.fenster[hidden] { display:none; }
.karte { background:var(--panel); border:1px solid var(--rand); border-radius:18px; padding:22px; width:min(380px,100%); text-align:center;
  display:flex; flex-direction:column; gap:10px; }
.karte input { font:inherit; padding:10px 12px; border-radius:10px; border:1px solid var(--rand); background:var(--panel2); color:var(--text); width:100%; margin-bottom:8px; }
.karte #lzSchritt1, .karte #lzSchritt2 { display:flex; flex-direction:column; gap:6px; }
.karte [hidden] { display:none !important; }
.fehler { color:#ef4444; min-height:16px; margin:0; font-size:13px; }

@media (min-width: 1101px) and (min-height: 700px) {
  html, body { height:100%; overflow:hidden; }
  #app { height:100vh; }
  .mitte { min-height:0; }
  .panel.links, .panel.rechts, .bildpanel { min-height:0; }
}
/* Handy / Tablet */
@media (max-width: 1100px) {
  .mitte { grid-template-columns:220px 1fr; }
  .rechts { grid-column:1 / -1; }
  .teile { grid-template-columns:repeat(3,1fr); }
}
@media (max-width: 720px) {
  #app { padding:8px; gap:8px; }
  .kopf { height:54px; }
  .kopf h1 { font-size:19px; }
  .kopf p { font-size:11.5px; }
  .leiste button, .leiste .knopf { padding:6px 9px; font-size:12.5px; }
  .fortschritt { flex-direction:column; align-items:stretch; gap:4px; }
  .mitte { grid-template-columns:1fr; }
  .links { order:3; max-height:240px; }
  .bildpanel { order:1; }
  .rechts { order:2; }
  .flaeche { min-height:56vh; }
  .teile { grid-template-columns:1fr 1fr; }
  .hilfe { display:none; }
}