/* =====================================================================
   MAX – Konfiguration (/max/config/) · interne Test-Oberfläche
   Übernimmt die bisherige Testoberfläche (Emotionen, Bewegungen) und
   ergänzt Textanimation- und Sound-Tests. Namespace: .cfg / cfg-*.
   ===================================================================== */
:root{
  --bg:      #07080b;
  --fg:      rgba(255,255,255,.92);
  --muted:   rgba(255,255,255,.72);
  --faint:   rgba(255,255,255,.50);
  --teal:    #12c5bc;
  --amber:   #c99240;
  --border:  rgba(255,255,255,.10);
}

*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html,body{ height:100%; }
body.cfg{
  background:
    radial-gradient(900px 620px at 50% 20%, rgba(18,197,188,.07), transparent 60%),
    var(--bg);
  color:var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  min-height:100vh; overflow-x:hidden;
}

.cfg-wrap{ max-width:900px; margin:0 auto; padding:24px 24px 80px; }

/* ── Kopf ───────────────────────────────────────────────────── */
.cfg-topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-bottom:26px; }
.cfg-badge{
  display:inline-flex; align-items:center; gap:8px;
  font-family:'Courier New', monospace; font-size:10px; letter-spacing:.28em;
  text-transform:uppercase; color:var(--amber);
  background:rgba(201,146,64,.08); border:1px solid rgba(201,146,64,.28);
  border-radius:100px; padding:6px 14px;
}
.cfg-back{ color:var(--muted); text-decoration:none; font-size:13px;
  border:1px solid var(--border); border-radius:100px; padding:7px 14px; transition:.2s; }
.cfg-back:hover{ color:var(--fg); border-color:rgba(18,197,188,.5); }
.cfg-back:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }

.cfg-head h1{ font-size:clamp(22px,3vw,30px); font-weight:800; letter-spacing:-.02em; }
.cfg-head p{ color:var(--muted); font-size:14px; margin-top:6px; }
.cfg-noindex{
  margin-top:12px; font-family:'Courier New', monospace; font-size:11px;
  color:var(--faint); letter-spacing:.04em;
  border:1px dashed var(--border); border-radius:10px; padding:8px 12px; display:inline-block;
}

/* ── Layout: Vorschau + Steuerung ───────────────────────────── */
.cfg-grid{ display:grid; grid-template-columns:minmax(240px,320px) 1fr; gap:28px; margin-top:28px; align-items:start; }
@media (max-width:720px){ .cfg-grid{ grid-template-columns:1fr; } }

.cfg-preview{
  position:sticky; top:20px;
  background:linear-gradient(135deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
  border:1px solid var(--border); border-radius:22px; padding:22px 22px 18px;
  text-align:center;
}
.cfg-stage-mount{ width:min(56vmin, 260px); margin:0 auto; }

/* Terminal-Textzeile (identisch zur öffentlichen Seite) */
.cfg-line{
  display:inline-flex; align-items:baseline; gap:7px; justify-content:center;
  font-family:'Courier New', Courier, monospace; font-size:16px; letter-spacing:.03em;
  color:var(--teal); min-height:1.6em; margin-top:16px; max-width:100%;
  word-break:break-word;
}
.cfg-line-symbol{ display:inline-block; min-width:12px; text-align:center; flex-shrink:0; }
.cfg-line-cursor{ display:inline-block; line-height:1; flex-shrink:0; animation:cfgCur .7s step-end infinite; }
@keyframes cfgCur{ 0%,100%{opacity:1} 50%{opacity:0} }

.cfg-status{
  margin-top:16px; font-family:'Courier New', monospace; font-size:11px;
  letter-spacing:.06em; color:var(--faint); text-transform:uppercase;
}
.cfg-status b{ color:var(--teal); font-weight:700; }

/* ── Panels ─────────────────────────────────────────────────── */
.cfg-panel{ margin-bottom:26px; }
.cfg-panel h2{ font-size:11px; letter-spacing:.25em; text-transform:uppercase;
  color:var(--faint); margin:0 0 10px; font-weight:600; }

.cfg-chips{ display:flex; flex-wrap:wrap; gap:8px; }
.cfg-chip{
  font:inherit; font-size:12px; color:var(--muted);
  background:rgba(255,255,255,.04); border:1px solid var(--border);
  border-radius:100px; padding:7px 13px; cursor:pointer; transition:.15s;
}
.cfg-chip:hover{ color:var(--fg); border-color:rgba(18,197,188,.5); background:rgba(18,197,188,.08); transform:translateY(-1px); }
.cfg-chip:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.cfg-chip.is-active{ color:var(--teal); border-color:rgba(18,197,188,.6); background:rgba(18,197,188,.1); }
.cfg-chip.motion{ border-color:rgba(18,197,188,.28); color:var(--teal); }

/* ── Textanimation-Test ─────────────────────────────────────── */
.cfg-textrow{ display:flex; gap:10px; flex-wrap:wrap; }
.cfg-textinput{
  flex:1; min-width:200px;
  background:rgba(255,255,255,.05); border:1px solid var(--border); border-radius:12px;
  color:var(--fg); font-family:inherit; font-size:14px; padding:11px 14px; outline:none;
  transition:border-color .2s, box-shadow .2s;
}
.cfg-textinput:focus{ border-color:rgba(18,197,188,.55); box-shadow:0 0 0 3px rgba(18,197,188,.1); }

.cfg-btn{
  font:inherit; font-size:12px; font-weight:600; letter-spacing:.06em;
  color:var(--teal); background:rgba(18,197,188,.1);
  border:1px solid rgba(18,197,188,.3); border-radius:12px;
  padding:11px 18px; cursor:pointer; transition:.2s; white-space:nowrap;
}
.cfg-btn:hover{ background:rgba(18,197,188,.18); border-color:rgba(18,197,188,.55); }
.cfg-btn:focus-visible{ outline:2px solid var(--teal); outline-offset:2px; }
.cfg-btn.ghost{ color:var(--muted); background:transparent; border-color:var(--border); }
.cfg-btn.ghost:hover{ color:var(--fg); border-color:rgba(255,255,255,.28); background:rgba(255,255,255,.04); }

.cfg-hint{ color:var(--faint); font-size:12px; margin-top:12px; }
.cfg-hint code{ font-family:'Courier New', monospace; color:var(--teal);
  background:rgba(18,197,188,.08); padding:1px 6px; border-radius:6px; }

@media (prefers-reduced-motion: reduce){
  .cfg-line-cursor{ animation:none; }
}