/* ============================================================================
   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}}

/* Mobiler Kauf-Knopf (VA-13511): auf 390 px steht das Demo-Band rund 1000 px unter
   dem Falz — der einzige Kaufaufruf im Schaufenster war damit unsichtbar, bis jemand
   lange scrollt. Deshalb auf schmalen Schirmen zusaetzlich ein flacher Knopf am
   unteren Rand. Rechts bleiben 92 px frei, dort sitzt der Coach-Knopf (#johnFab);
   z-index 69 haelt ihn unter Coach, Toast und Dialogen. */
#demoCta{display:none}
@media(max-width:700px){
  #demoCta{display:flex;position:fixed;left:12px;right:92px;bottom:20px;z-index:69;
    align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);
    border-radius:999px;padding:7px 8px 7px 15px;box-shadow:0 6px 22px rgba(0,0,0,.18)}
  #demoCta .dcx{font-size:12px;color:var(--sub);line-height:1.25;flex:1;min-width:0}
  #demoCta .btn{white-space:nowrap;flex:none}
}

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