/* ============================================================================
   compass-produkt.css — nur was die Produktschicht zusätzlich braucht:
   Einrichtungs-Assistent, Demo-Banner, Kopf-Knopf ⚙️.
   Alle Farben kommen aus den Variablen des Compass, damit Tagesphase und
   Farbschema auch hier greifen.
   ============================================================================ */

/* ---- Einrichtungs-Assistent ---------------------------------------------- */
.setup{background:var(--panel);border:1px solid var(--line);border-radius:22px;width:100%;max-width:660px;
  box-shadow:var(--shadow);max-height:94vh;display:flex;flex-direction:column;overflow:hidden}
.setup .suh{padding:20px 24px 12px;display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--line)}
.setup .sut{font-family:var(--serif);font-size:22px;line-height:1.1}
.setup .sup{display:flex;gap:6px;margin-left:auto}
.setup .sup span{width:22px;height:4px;border-radius:2px;background:var(--panel2)}
.setup .sup span.ok{background:var(--vk)}
.setup .sup span.on{background:var(--va)}
.setup .sux{background:none;border:none;color:var(--dim);font-size:16px;cursor:pointer;padding:0 2px}
.setup .sux:hover{color:var(--ink)}
.setup .subody{padding:18px 24px 8px;overflow:auto}
.setup .suf{padding:14px 24px 20px;border-top:1px solid var(--line);display:flex;gap:8px;align-items:center}
.setup p.sub{color:var(--sub);font-size:13.5px;line-height:1.65;margin:0 0 12px}
.setup p.shint{color:var(--dim);font-size:12px;line-height:1.6;margin:14px 0 4px;
  border-left:2px solid var(--line2);padding-left:10px}
.setup ul.sul{margin:6px 0 4px;padding-left:18px;color:var(--sub);font-size:13px;line-height:1.9}
.setup label.sf{display:block;margin:0 0 12px}
.setup label.sf>span{display:block;font-size:12px;font-weight:700;color:var(--sub);margin-bottom:5px}
.setup label.sf>span em{font-weight:400;color:var(--dim);font-style:normal}
.setup label.sf.sfc{display:flex;align-items:center;gap:9px}
.setup label.sf.sfc>span{margin:0;font-weight:700;color:var(--ink)}
.setup input{width:100%;background:var(--panel2);border:1px solid var(--line);border-radius:11px;
  color:var(--ink);padding:9px 12px;font-family:inherit;font-size:13.5px}
.setup input:focus{outline:none;border-color:var(--va)}
.setup input[type=checkbox]{width:auto;accent-color:var(--vk)}
.setup input[type=color]{padding:2px;height:36px;cursor:pointer}
.setup .skxh,.setup .skx{display:grid;grid-template-columns:52px 1fr 52px 1.5fr;gap:8px;align-items:center;margin-bottom:8px}
.setup .skxh span{font-size:11px;font-weight:700;color:var(--dim);padding-left:3px}
.setup .skx .sicon{text-align:center}
@media(max-width:640px){
  .setup .skxh{display:none}
  .setup .skx{grid-template-columns:52px 1fr 52px;grid-template-areas:'i n f' 'w w w'}
  .setup .skx .sworte{grid-area:w}
}

/* ---- Demo-Banner --------------------------------------------------------- */
.demobar{margin:14px 32px 0;background:linear-gradient(135deg,var(--va-soft),var(--panel) 55%,var(--vk-soft));
  border:1px solid var(--line);border-radius:var(--radius);padding:14px 18px;display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.demobar .dbt{font-family:var(--serif);font-size:19px;line-height:1.15}
.demobar .dbm{color:var(--sub);font-size:12.5px;line-height:1.55;flex:1;min-width:240px}
.demobar .dbb{display:flex;gap:8px;flex-wrap:wrap}
@media(max-width:900px){.demobar{margin:12px 16px 0}}

/* ---- Kopf: Einrichtungs-Knopf -------------------------------------------- */
#btnSetup{cursor:pointer}