/* IntroForge — dunkles MZAI-Theme (Feuer/Gold) */
:root{
  --bg:#0a0a0f; --card:#141824; --line:#242c3c; --ink:#e8ecf4; --dim:#8b94a8;
  --fire:#ff6b2b; --fire-deep:#e8430a; --gold:#ffd700; --gold-deep:#d4a017;
  --ok:#4ade80; --warn:#fbbf24; --err:#f87171;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(130% 90% at 50% 0%,#191026 0%,var(--bg) 55%);color:var(--ink);
     font:15px/1.55 -apple-system,'Segoe UI',Roboto,sans-serif;min-height:100vh}
.view.center{display:flex;align-items:center;justify-content:center;min-height:100vh;padding:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:22px 24px}
.login-card{max-width:430px;width:100%;text-align:center}
.logo{font-size:26px;margin-bottom:6px}
.logo b{color:var(--fire)}
.lead{color:var(--ink);margin:6px 0 18px}
h2{font-size:18px;margin:0 0 8px}
.dim{color:var(--dim)} .small{font-size:12.5px} .hidden{display:none !important}
a{color:var(--fire)}
.btn{background:linear-gradient(180deg,#ff7a3d,#e8430a);border:0;border-radius:9px;color:#fff;
     font:600 14px inherit;padding:10px 18px;cursor:pointer;text-decoration:none;display:inline-block}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:#1b2130;border:1px solid var(--line);color:var(--ink)}
.btn.small{padding:6px 11px;font-size:12.5px}
.btn.big{padding:13px 24px;font-size:15px;margin:6px 0}
.badge{font-size:11px;padding:2px 8px;border-radius:99px;margin-left:6px}
.badge.admin{background:#3a2515;color:#f0b26b}
.msg{margin-top:12px;font-size:13px;min-height:18px}
.msg.err{color:var(--err)} .msg.ok{color:var(--ok)}

/* App-Layout */
.topbar{display:flex;align-items:center;gap:18px;padding:14px 22px;border-bottom:1px solid var(--line);
        background:rgba(20,24,36,.7);backdrop-filter:blur(6px);position:sticky;top:0;z-index:10;flex-wrap:wrap}
.brand{font-size:18px}.brand b{color:var(--fire)}
.tabs{display:flex;gap:6px;flex:1}
.tab{background:transparent;border:1px solid transparent;color:var(--dim);padding:8px 13px;border-radius:8px;
     cursor:pointer;font:600 13.5px inherit}
.tab:hover{color:var(--ink)}
.tab.active{background:#1d2434;border-color:var(--line);color:var(--ink)}
.userbox{display:flex;align-items:center;gap:10px}
main{max-width:960px;margin:0 auto;padding:24px 20px 60px}
.placeholder h2{margin-bottom:6px}
.hint{background:#151b28;border:1px solid var(--line);border-left:3px solid var(--fire);border-radius:8px;
      padding:10px 14px;color:var(--dim);font-size:12.5px;margin-top:14px}

/* Admin-Tabelle */
table.kunden{width:100%;border-collapse:collapse;margin-top:12px;font-size:13.5px}
table.kunden th,table.kunden td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--line)}
table.kunden th{color:var(--dim);font-size:11.5px;text-transform:uppercase;letter-spacing:.06em}
.pill{font-size:11px;padding:2px 8px;border-radius:99px}
.pill.on{background:#153a22;color:#7ee2a0}.pill.off{background:#3a1a1a;color:#f0a0a0}

/* ── Builder (F02) ── */
.builder{display:grid;grid-template-columns:1fr 360px;gap:20px;align-items:start}
@media(max-width:860px){.builder{grid-template-columns:1fr}}
.lbl{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--dim);margin:16px 0 6px}
.lbl .opt{text-transform:none;letter-spacing:0;color:#5f6b82;font-weight:400}
.builder input[type=text],.builder input:not([type]),.builder textarea,.builder input#in-brand{width:100%;background:#0f1420;border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:9px 11px;font:14px inherit}
.builder input:focus,.builder textarea:focus{outline:none;border-color:var(--fire)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.presets{display:flex;gap:8px;flex-wrap:wrap}
.preset-btn{background:#0f1420;border:1px solid var(--line);border-radius:8px;color:var(--ink);padding:7px 11px;cursor:pointer;font:13px inherit;display:flex;align-items:center;gap:7px}
.preset-btn:hover{border-color:var(--fire)}
.preset-btn.active{border-color:var(--fire);background:#1a1218}
.preset-dot{width:14px;height:14px;border-radius:50%;display:inline-block;border:1px solid rgba(255,255,255,.15)}
.palette{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.sw{display:flex;flex-direction:column;gap:4px}
.sw label{font-size:10.5px;color:var(--dim)}
.sw input[type=color]{width:100%;height:34px;background:#0f1420;border:1px solid var(--line);border-radius:7px;padding:2px;cursor:pointer}
.screens{display:grid;gap:12px}
.screen-box{background:#0f1420;border:1px solid var(--line);border-radius:9px;padding:12px}
.screen-box h4{margin:0 0 8px;font-size:12.5px;color:var(--fire)}
.screen-box input{width:100%;margin-bottom:7px}
.screen-box.locked{opacity:.6}
.screen-box.locked input{pointer-events:none;background:#0b0f18}
.actions{display:flex;align-items:center;gap:14px;margin-top:22px;flex-wrap:wrap}
.preview{position:sticky;top:82px}
.stage{aspect-ratio:16/9;border-radius:12px;position:relative;overflow:hidden;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:16px;
  background:radial-gradient(120% 90% at 50% 115%, var(--p-fire) 0%, transparent 55%), var(--p-deep);
  border:1px solid var(--line)}
.stage-brand{font:800 clamp(20px,4vw,34px)/1 'Bebas Neue',Impact,sans-serif;letter-spacing:.04em;
  color:var(--p-goldLight);text-shadow:0 0 22px var(--p-fire),0 2px 0 rgba(0,0,0,.5)}
.stage-tag{margin-top:8px;font-size:12.5px;color:var(--p-text);max-width:90%}
.stage-handles{margin-top:12px;font-size:11px;color:var(--p-textDim);line-height:1.6}
.preview .dim{margin-top:10px}