/* PlatinenWerk Online (platine_1v1) – Farben wie im PC-Programm PlatinenWerk. created by AnnoBoy 2026 */
:root{
  color-scheme:dark;forced-color-adjust:none;
  --bg1:#1d0f3a;--bg2:#0b2c4d;--lila:#5b3cc4;--lila2:#3a1f8f;--rand:#8f73ff;--rand2:#6c4bd6;
  --gold:#ffd166;--orange1:#ffbf3c;--orange2:#ff8a1c;--feld:#140a30;--text:#f0f0ff;--hell:#9fd8ff;--tuerkis:#7dfcff;
  --gruen1:#2ec27e;--gruen2:#12855a;--rot:#ff5f6d;
  --kopfH:46px;--wbH:30px;--stH:26px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--text:#f0f0ff}}
:root[data-theme="dark"]{--text:#f0f0ff}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0}
body{background:linear-gradient(135deg,var(--bg1),var(--bg2));color:var(--text);font:14px/1.35 "Segoe UI",system-ui,-apple-system,Roboto,sans-serif;
  overflow:hidden;display:flex;flex-direction:column;-webkit-tap-highlight-color:transparent;
  padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)}
button,input,select{font:inherit;color:inherit}
button{background:linear-gradient(#5b3cc4,#3a1f8f);border:1px solid var(--rand);border-radius:9px;padding:7px 10px;color:#fff;font-weight:700;cursor:pointer;
  white-space:nowrap;touch-action:manipulation}
button:hover:not(:disabled){background:linear-gradient(#7b5cf0,#4f2fb8)}
button.an,button[aria-pressed="true"]{background:linear-gradient(var(--orange1),var(--orange2));color:#1d0f3a;border-color:#ffe08a}
button:disabled{opacity:.45;cursor:default}
button:focus-visible,input:focus-visible,select:focus-visible,canvas:focus-visible{outline:2px solid var(--orange1);outline-offset:1px}
button.gruen{background:linear-gradient(var(--gruen1),var(--gruen2));border-color:#9af0c4}
button.gruen:hover:not(:disabled){background:#3ad891}
button.gold{background:linear-gradient(var(--orange1),var(--orange2));color:#1d0f3a;border-color:#ffe08a}
button.lila{background:linear-gradient(#8e44ff,#4b1fa8);border-color:#d3b6ff}
button.blau{background:linear-gradient(#1fb6ff,#0b5fa8);border-color:#a8e2ff}
button.feuer{background:linear-gradient(var(--rot),#ff9f1c);border-color:#ffe08a}
button.rot{background:linear-gradient(#e2435b,#9b1830);border-color:#ffb0bd}
button.klein{padding:5px 9px;font-size:13px}
input,select{background:var(--feld);border:1px solid var(--rand2);border-radius:6px;padding:4px 7px;color:#fff;min-width:0}
select option{background:var(--feld);color:#fff}
input[type=checkbox],input[type=radio]{accent-color:var(--orange1);width:16px;height:16px;margin:0}

/* Kopf mit Menü (wie die Menüleiste im PC-Programm) */
#kopf{height:var(--kopfH);flex:none;display:flex;align-items:center;gap:8px;padding:0 8px;background:linear-gradient(90deg,#3a1670,#0d4b7a);border-bottom:1px solid #6c4bd6}
#marke{display:flex;align-items:center;gap:6px;flex:none}
#marke img{width:28px;height:28px;border-radius:7px}
#marke b{font-size:16px;color:#fff}#marke i{font-style:normal;color:var(--gold);font-weight:700;font-size:12px;margin-top:4px}
#menue{display:flex;gap:2px;overflow-x:auto;scrollbar-width:none;flex:1 1 auto;min-width:0}
#menue::-webkit-scrollbar{display:none}
#menue button{background:none;border:0;border-radius:5px;padding:6px 10px;font-weight:600}
#menue button:hover,#menue button.offen{background:#ff9f1c;color:#1d0f3a}
#kopfRechts{display:flex;align-items:center;gap:6px;flex:none;min-width:0}
#projektName{max-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--gold);font-weight:700;cursor:pointer;padding:3px 6px;border-radius:6px}
#projektName:hover{background:#ffffff14}
.stand{font-size:12px;color:var(--hell);white-space:nowrap}
.stand.offen{color:var(--orange1)}
#bRechts{display:none}
.nurHandy{display:none}
#menuePop{position:fixed;z-index:40;background:#22124a;border:1px solid #6c4bd6;border-radius:8px;padding:4px;min-width:250px;box-shadow:0 10px 30px #0008;max-height:calc(100vh - 60px);overflow:auto}
#menuePop button{display:flex;justify-content:space-between;gap:18px;width:100%;background:none;border:0;border-radius:5px;padding:7px 10px;font-weight:500;text-align:left}
#menuePop button:hover:not(:disabled){background:#ff9f1c;color:#1d0f3a}
#menuePop button kbd{font:12px "Segoe UI",sans-serif;opacity:.7}
#menuePop hr{border:0;border-top:1px solid #6c4bd6;margin:4px 2px}

/* Drei Spalten: Werkzeuge · Zeichenfläche · Einstellungen */
#reihe{flex:1 1 auto;min-height:0;display:flex;gap:8px;padding:8px}
#werkzeuge{flex:none;width:150px;display:flex;flex-direction:column;gap:6px;overflow-y:auto;scrollbar-width:thin}
#werkzeuge .wz,#werkzeuge .akt,#werkzeuge .extra,#werkzeuge .bald{display:flex;flex-direction:column;gap:6px}
#werkzeuge .wz button{min-height:42px;text-align:left}
#werkzeuge button{text-align:left}
#werkzeuge .trenn{height:6px;flex:none}
.baldtext{margin:0;font-size:11px;color:var(--hell);text-align:center}
#rahmen{position:relative;flex:1 1 auto;min-width:0;border:2px solid var(--orange1);border-radius:6px;background:#08080c;overflow:hidden}
#flaeche{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair;outline:none}
.schwebe{position:absolute;bottom:44px;right:12px;z-index:5;box-shadow:0 4px 14px #0009;font-size:15px;padding:10px 14px}
.schwebe.links{right:auto;left:12px}
#bFertig{background:linear-gradient(var(--gruen1),var(--gruen2));border-color:#9af0c4}

#rechts{flex:none;width:268px;overflow-y:auto;padding-right:4px;scrollbar-width:thin}
.gruppe{border:1px solid var(--rand2);border-radius:10px;margin:0 0 6px;padding:6px 8px 8px;background:rgba(40,20,90,.47);display:flex;flex-direction:column;gap:5px;min-width:0}
.gruppe legend{color:var(--gold);font-weight:700;padding:0 4px}
.gruppe button{background:#4a2fb0;border-radius:8px;padding:5px 4px}
.gruppe button:hover:not(:disabled){background:#6a4fe0}
.gruppe button.an{background:#ffa62b;color:#1d0f3a;border-color:#ffe08a}
.zeile{display:flex;align-items:center;justify-content:space-between;gap:6px}
.zeile input,.zeile select{width:120px}
.haken{display:flex;align-items:center;gap:7px;cursor:pointer}
.zwei{display:grid;grid-template-columns:1fr 1fr;gap:4px}
.hinweis{margin:0;color:var(--hell);font-size:11.5px}
.gelb{margin:0;color:var(--gold);font-weight:700;font-size:13px}
#ebenenRaster{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
#ebenenRaster button{height:26px;padding:0;font-size:12px;border-width:2px;position:relative}
#ebenenRaster button.aus{opacity:.38;text-decoration:line-through}
#ebenenRaster button.an{outline:2px solid #fff;outline-offset:1px}
#bTeil{width:100%;font-size:13px}
#bTeil option{padding:2px 4px}
#auswahlInfo{color:var(--tuerkis);padding:4px;margin:0;font-size:13px}

/* Werbung und Statuszeile (wie unten im PC-Programm) */
#werbung{flex:none;height:var(--wbH);display:block;line-height:var(--wbH);text-align:center;padding:0 10px;text-decoration:none;color:#fff;font-weight:700;
  background:linear-gradient(90deg,#ff4fa3,#7b3cff 50%,#19b6ff);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .4s}
#werbung.weg{display:none}
#statusleiste{flex:none;height:var(--stH);display:flex;align-items:center;justify-content:space-between;gap:10px;padding:0 8px;background:#0a1630;color:var(--hell);font-size:12.5px}
#status{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
#signatur{color:var(--gold);font-weight:700;white-space:nowrap;flex:none}

/* Fenster (Dialoge) */
#schleier{position:fixed;inset:0;z-index:50;background:#05021499;display:flex;align-items:center;justify-content:center;padding:16px}
#karte{background:linear-gradient(135deg,#1a0b3d,#0b2a4a);border:1px solid var(--rand);border-radius:14px;padding:16px 18px;width:min(460px,100%);max-height:calc(100vh - 32px);overflow:auto;box-shadow:0 18px 50px #000a}
#karte h2{margin:0 0 10px;color:var(--gold);font-size:19px}
#karte p{margin:6px 0}
#karte .knoepfe{display:flex;flex-wrap:wrap;gap:8px;justify-content:flex-end;margin-top:14px}
#karte .feld{width:100%;font-size:16px;padding:9px 10px;margin:4px 0}
#karte label.zeile{margin:6px 0}
#karte label.zeile input,#karte label.zeile select{width:170px}
#karte .codebox{font:700 26px/1.2 ui-monospace,Consolas,monospace;letter-spacing:3px;text-align:center;color:var(--gold);background:#0006;border:1px dashed var(--orange1);border-radius:10px;padding:10px;margin:8px 0;user-select:all}
#karte .liste{display:flex;flex-direction:column;gap:6px;margin:8px 0;max-height:52vh;overflow:auto}
#karte .proj{display:flex;align-items:center;gap:8px;background:#ffffff0d;border:1px solid #6c4bd655;border-radius:9px;padding:7px 8px}
#karte .proj .pinfo{flex:1;min-width:0;cursor:pointer}
#karte .proj .pinfo b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#karte .proj .pinfo small{color:var(--hell)}
#karte .proj.aktiv{border-color:var(--orange1)}
#karte .leise{color:var(--hell);font-size:13px}
#karte .start{display:flex;flex-direction:column;gap:8px;margin-top:10px}
#karte .start button{padding:11px 12px;font-size:15px}
#karte ul{margin:6px 0;padding-left:20px}#karte li{margin:3px 0}
#karte kbd{background:#0006;border:1px solid #6c4bd6;border-radius:4px;padding:0 4px;font-size:12px}
#karte.breit{width:min(1000px,100%)}
#karte h3{margin:0 0 6px;color:var(--gold);font-size:17px}
.schalt{display:grid;grid-template-columns:minmax(220px,340px) 1fr;gap:12px;min-height:0}
.sliste{display:flex;flex-direction:column;gap:2px;max-height:60vh;overflow:auto;background:#120830;border:1px solid #6a3fd0;border-radius:8px;padding:6px}
.skat{font-weight:700;font-size:12px;padding:8px 6px 3px;letter-spacing:.5px}
.sliste .sitem{background:none;border:0;border-radius:6px;text-align:left;font-weight:500;padding:6px 8px 6px 16px;white-space:normal}
.sliste .sitem:hover{background:#ffffff14}
.sliste .sitem.an{background:#ff7a3c;color:#fff}
.sdetail{min-width:0;max-height:60vh;overflow:auto}
.stext{color:#e8f4ff;font-size:14px}
.sinfo{color:#7ef0c0;font-weight:700;font-size:13px}
.tabelle{overflow:auto;max-height:50vh;border:1px solid #3a2a70;border-radius:8px;margin:8px 0}
.tabelle table{border-collapse:collapse;width:100%;font-size:13px}
.tabelle th{background:#3a1670;color:var(--gold);text-align:left;padding:5px 7px;position:sticky;top:0}
.tabelle td{padding:4px 7px;border-top:1px solid #3a2a70;background:#140a30}
.tabelle td input{width:100px;padding:3px 6px}
@media (max-width:700px){.schalt{grid-template-columns:1fr}.sliste{max-height:28vh}.sdetail{max-height:none}}
.farbwahl{display:flex;align-items:center;gap:8px}
.farbwahl input[type=color]{width:44px;height:30px;padding:0;border:1px solid var(--rand2);background:none}

/* Fortschritt mit Abbrechen */
#fortschritt{position:fixed;inset:0;z-index:60;background:#05021488;display:flex;align-items:center;justify-content:center;padding:16px}
.fkarte{background:linear-gradient(135deg,#1a0b3d,#0b2a4a);border:1px solid var(--rand);border-radius:14px;padding:16px 18px;width:min(380px,100%);text-align:center}
.fkarte h3{margin:0 0 10px;color:var(--gold);font-size:16px}
.fkarte p{margin:8px 0;color:var(--hell);font-size:13px;min-height:1em}
.balken{height:14px;border-radius:7px;background:#0007;border:1px solid var(--rand2);overflow:hidden}
.balken i{display:block;height:100%;width:0;background:linear-gradient(90deg,#ff5f6d,#ffbf3c);border-radius:6px;transition:width .15s}
.balken.lauf i{width:35%!important;animation:lauf 1.1s ease-in-out infinite}
@keyframes lauf{0%{transform:translateX(-100%)}100%{transform:translateX(290%)}}
#ablage{position:fixed;inset:0;z-index:70;background:#1d0f3acc;display:flex;align-items:center;justify-content:center;pointer-events:none}
#ablage div{border:3px dashed var(--orange1);border-radius:20px;padding:40px 50px;font-size:22px;font-weight:700;color:var(--gold);background:#0006}
#hinweis{position:fixed;left:50%;bottom:70px;transform:translateX(-50%);z-index:80;background:linear-gradient(90deg,#7828c8,#1e78dc);color:#fff;font-weight:700;padding:9px 16px;border-radius:20px;box-shadow:0 6px 20px #0008;max-width:calc(100vw - 32px);text-align:center}
#hinweis.fehler{background:linear-gradient(90deg,#c0283c,#e2435b)}

/* Schmaler Bildschirm (Handy, Tablet hochkant) */
@media (max-width:1000px){
  :root{--kopfH:44px}
  #marke b,#marke i{display:none}
  #kopfRechts #bSpeichern span,#kopfRechts #bInstall span{display:none}
  #kontoName{display:inline-block;max-width:70px;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom}
  #projektName{max-width:90px;font-size:13px}
  .stand{display:none}
  #bRechts{display:inline-block}
  #reihe{flex-direction:column;padding:4px;gap:4px}
  #werkzeuge{width:auto;flex-direction:row;overflow-x:auto;overflow-y:hidden;gap:4px;padding-bottom:2px}
  #werkzeuge .wz,#werkzeuge .akt,#werkzeuge .extra,#werkzeuge .bald{flex-direction:row;gap:4px}
  #werkzeuge .wz button{min-height:38px}
  #werkzeuge button{padding:6px 8px}
  #werkzeuge .akt button span,#werkzeuge .extra button span,#werkzeuge .bald{display:none}
  #werkzeuge .trenn{width:4px;height:auto}
  #rechts{position:fixed;top:calc(var(--kopfH) + env(safe-area-inset-top,0px));right:0;bottom:calc(var(--wbH) + var(--stH) + env(safe-area-inset-bottom,0px));z-index:30;width:min(300px,88vw);
    background:linear-gradient(135deg,#1d0f3a,#0b2c4d);border-left:2px solid var(--orange1);padding:8px;transform:translateX(105%);transition:transform .2s;box-shadow:-10px 0 30px #0008}
  body.rechtsOffen #rechts{transform:none}
  #signatur{font-size:11px}
}
@media (max-width:560px){
  #menue button{display:none}#menue button.nurHandy{display:inline-block}
  #projektName,#kontoName{display:none!important}
  #werkzeuge .wz button span{display:none}
  #werkzeuge .wz button{font-size:17px;min-width:44px;text-align:center}
  #werkzeuge .akt button{min-width:40px;text-align:center}
  #werbung{font-size:12px}
  #status{font-size:11.5px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}