/* Werkbank — Bereich sales (Vorlage docs/werkbank-vorlage/). Nur html.wb. */

/* ---------- Farben der Kaufstrecke (cockpitVals der Vorlage): 0 Frei … 9 Beurkundet ----------
   Stand-Vokabular: bleibt fest und folgt der Akzentfarbe des Kontos bewusst NICHT (DESIGN.md). */
html.wb{
  --sc-f0:#EEF0EB; --sc-f1:#DCE3E8; --sc-f2:#B9C7D3; --sc-f3:#E8D2A6; --sc-f4:#D1A85E;
  --sc-f5:#A9CDB8; --sc-f6:#7FB592; --sc-f7:#3E8A66; --sc-f8:#1F6B4A; --sc-f9:#0F4D33;
  /* Schraffur −45°, 5 px: zweite Farbe leicht aufgehellt. Frei und Beurkundet bleiben flächig. */
  --sc-h1:repeating-linear-gradient(-45deg,var(--sc-f1) 0 5px,color-mix(in srgb,var(--sc-f1) 78%,#fff) 5px 10px);
  --sc-h2:repeating-linear-gradient(-45deg,var(--sc-f2) 0 5px,color-mix(in srgb,var(--sc-f2) 86%,#fff) 5px 10px);
  --sc-h3:repeating-linear-gradient(-45deg,var(--sc-f3) 0 5px,color-mix(in srgb,var(--sc-f3) 86%,#B98F45) 5px 10px);
  --sc-h4:repeating-linear-gradient(-45deg,var(--sc-f4) 0 5px,color-mix(in srgb,var(--sc-f4) 88%,#fff) 5px 10px);
  --sc-h5:repeating-linear-gradient(-45deg,var(--sc-f5) 0 5px,color-mix(in srgb,var(--sc-f5) 86%,#fff) 5px 10px);
  --sc-h6:repeating-linear-gradient(-45deg,var(--sc-f6) 0 5px,color-mix(in srgb,var(--sc-f6) 90%,#fff) 5px 10px);
  --sc-h7:repeating-linear-gradient(-45deg,var(--sc-f7) 0 5px,color-mix(in srgb,var(--sc-f7) 93%,#fff) 5px 10px);
  --sc-h8:repeating-linear-gradient(-45deg,var(--sc-f8) 0 5px,color-mix(in srgb,var(--sc-f8) 94%,#fff) 5px 10px);
  --sc-frei:var(--sc-f0);
  --sc-rot:#C2412B; --sc-amber:#D9A040;
  --sc-gelb:#8A5A12; --sc-gelb-soft:var(--wb-pill-res-bg); --sc-rot-soft:var(--wb-warn-bg);
  --sc-fuge:#E9EAE5; --sc-gold:#E2B776;
}
/* Dunkel: dieselbe Reihenfolge, aber gedämpft — helle Pastelltöne würden auf Dunkel am lautesten sein. */
html.wb[data-theme="dark"]{
  --sc-f0:#242C26; --sc-f1:#3D4850; --sc-f2:#5B6E80; --sc-f3:#75623A; --sc-f4:#B58A44;
  --sc-f5:#35544A; --sc-f6:#3F7359; --sc-f7:#348A62; --sc-f8:#35A070; --sc-f9:#5CC593;
  --sc-gelb:#E3B878; --sc-fuge:#0F1411;
}

/* ---------- Gerüst ---------- */
html.wb .sc{gap:22px;padding-bottom:10px}
html.wb .sc-kopf{align-items:flex-end;gap:10px}
html.wb .sc-kopf>div:first-child{flex:1 1 260px;min-width:0}
html.wb .sc-h1{font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1.1}
html.wb .sc-h{font-size:22px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
html.wb .sc-sub{font-size:15px;color:var(--ink-faint);margin:8px 0 0}
html.wb .sc-kopf-r{gap:10px}

/* Filter: weißes Feld, Beschriftung grau im Feld */
html.wb .sc-sel{height:44px;padding:0 6px 0 14px;gap:8px;background:var(--surface);font-size:13px;color:var(--ink-faint);max-width:100%;min-width:0;cursor:pointer}
html.wb .sc-sel span{flex:none}
html.wb .sc-sel select{border:0;background-color:transparent;font-size:14px;font-weight:600;color:var(--ink);height:44px;padding:0 26px 0 0;min-width:0;max-width:260px;flex:1 1 auto;cursor:pointer;text-overflow:ellipsis}
html.wb .sc-sel:focus-within{outline:2px solid var(--accent-dark);outline-offset:-2px}
html.wb .sc-sel select:focus-visible{outline:0}

/* Hauptaktion im Seitenkopf: dunkel */
html.wb .btn.btn-ghost.sc-pdf{display:inline-flex;align-items:center;height:44px;padding:0 15px!important;border:0!important;background:var(--wb-dark)!important;color:var(--wb-frame)!important;font-size:14px!important;font-weight:600!important;white-space:nowrap}
html.wb .btn.btn-ghost.sc-pdf:hover{background:var(--wb-dark-hover)!important;color:var(--wb-frame)!important}

/* ---------- Kennzahlen: bündige Kacheln, erste dunkel ---------- */
html.wb .sc-kpis{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px;background:var(--sc-fuge)}
html.wb .sc-kpi{border:0;padding:22px 24px;gap:6px;background:var(--surface)}
html.wb .sc-kpi small{font-size:13.5px;font-weight:400;color:var(--ink-faint)}
html.wb .sc-kpi b{font-size:44px;font-weight:700;letter-spacing:-.02em;line-height:1;color:var(--ink)}
html.wb .sc-kpi b i{font-size:16px;font-weight:400;letter-spacing:0;color:var(--ink-faint);margin-left:4px}
html.wb .sc-kpi span{font-size:13.5px;color:var(--ink-faint);line-height:1.45}
html.wb .sc-kpi b+span{margin-top:6px}
html.wb .sc-kpi b.is-rot{color:var(--gold)}
html.wb .sc-kpi.is-dunkel{background:#16201B}
html.wb .sc-kpi.is-dunkel small,html.wb .sc-kpi.is-dunkel b i{color:#C3CCC6}
html.wb .sc-kpi.is-dunkel b{color:#fff}
html.wb .sc-kpi.is-dunkel span{color:#DCE3DE}
html.wb .sc-kpi.is-dunkel em{color:var(--sc-gold);font-weight:700}
html.wb[data-theme="dark"] .sc-kpi.is-dunkel{background:#232D27}

/* ---------- Karten ---------- */
html.wb .sc-karte{padding:22px 24px}
html.wb .sc-kt{margin-bottom:16px;gap:6px 10px}
html.wb .sc-kt h3{flex:1 1 auto;margin:0}
html.wb .sc-kt small{font-size:13px;color:var(--ink-faint)}
html.wb .sc-leer{font-size:14px;color:var(--ink-soft);background:var(--wb-soft);padding:14px 16px}
html.wb .sc-mehr{font-size:13px;color:var(--ink-faint);margin:0;padding:12px 0 6px;border-top:1px solid var(--line)}
html.wb .sc-zwei{display:flex;flex-wrap:wrap;gap:22px;align-items:flex-start}
html.wb .sc-zwei>.sc-karte{min-width:0;flex:1 1 380px}
html.wb .sc-zwei>.sc-karte:first-child{flex:1 1 520px}

/* ---------- Wohnanlagen: Zeile je Anlage ---------- */
html.wb .sc-pjs{display:flex;flex-direction:column;border-bottom:1px solid var(--line)}
html.wb .sc-pj{display:flex;flex-wrap:wrap;gap:14px 24px;align-items:center;padding:14px 0;border-top:1px solid var(--line);cursor:pointer}
html.wb .sc-pj:hover{background:var(--wb-soft)}
html.wb .sc-pj:focus-visible{outline:2px solid var(--accent-dark);outline-offset:2px}
html.wb .sc-pj-n{flex:1 1 200px;min-width:0}
html.wb .sc-pj-n b{display:block;font-size:15px;font-weight:600;color:var(--ink)}
html.wb .sc-pj small{display:block;font-size:12.5px;color:var(--ink-faint)}
html.wb .sc-pj-n small{margin-top:3px}
html.wb .sc-pj-b{flex:2 1 280px;min-width:0}
html.wb .sc-pj-q,html.wb .sc-pj-t{flex:none}
html.wb .sc-pj-q b{display:block;font-size:16px;font-weight:700;color:var(--ink)}
html.wb .sc-pj-q small{margin-top:2px;white-space:nowrap}
html.wb .sc-pj-t small{font-size:12px;white-space:nowrap}
html.wb .sc-pj-t b{display:block;font-size:15px;font-weight:600;color:var(--ink);margin-top:2px}
html.wb .sc-pj .sc-pfeil{flex:none;color:var(--ink-faint)}
html.wb .sc-pj-a b{font-size:16px;font-weight:700}
html.wb .sc-pj-a small{font-size:12.5px;margin-top:2px}

/* Verkauft, reserviert, frei */
html.wb .sc-ant .sc-bar.is-hoch{height:22px;margin-bottom:18px}
html.wb .sc-ant-w{gap:14px 24px}
html.wb .sc-ant-t small{font-size:13.5px;font-weight:400;color:var(--ink-faint)}
html.wb .sc-ant-t b{font-size:34px;font-weight:700;letter-spacing:-.02em;line-height:1.1;margin-top:4px}
html.wb .sc-ant-t span{font-size:13px}
html.wb .sc-ant-t.is-leise b{font-size:24px;color:var(--ink-soft);margin-top:10px}

/* Gestapelter Phasenbalken */
html.wb .sc-bar{height:22px;gap:2px;background:transparent;min-width:0}
html.wb .sc-bar span{min-width:3px}

/* Legende: quadratische Farbfelder */
html.wb .sc-leg{gap:6px 16px;font-size:12.5px;color:var(--ink-soft);margin-top:0}
html.wb .sc-karte>.sc-leg{margin-top:16px}
html.wb .sc-leg span{gap:6px;white-space:nowrap}
html.wb .sc-prog .sc-leg span{white-space:normal}
html.wb .sc-leg i{width:10px;height:10px;flex:none}
html.wb .sc-leg b{color:var(--ink);font-weight:700}

/* Pillen */
html.wb .sc-chip{font-size:12px;font-weight:700;padding:4px 9px;background:var(--wb-pill-neu-bg);color:var(--wb-pill-neu-fg)}
html.wb .sc-chip.is-rot{background:var(--wb-warn-bg);color:var(--wb-warn)}
html.wb .sc-chip.is-gruen{background:var(--wb-pill-frei-bg);color:var(--wb-pill-frei-fg)}

/* ---------- Braucht Aufmerksamkeit ---------- */
html.wb .sc-zwei>.sc-karte:first-child{padding-bottom:8px}
html.wb .sc-zwei>.sc-karte:first-child .sc-kt{margin-bottom:8px}
html.wb .sc-zwei>.sc-karte:first-child .sc-leer{margin-bottom:14px}
html.wb .sc-az{grid-template-columns:9px minmax(0,1fr) auto;gap:12px;align-items:start;padding:14px 0;border-top:1px solid var(--line)}
html.wb .sc-az:first-of-type{border-top:1px solid var(--line);padding-top:14px}
html.wb .sc-ampel{width:9px;height:9px;margin-top:6px;background:var(--sc-amber)}
html.wb .sc-ampel.is-rot{background:var(--sc-rot)}
html.wb .sc-az b{font-size:15px;font-weight:700}
html.wb .sc-az b small{font-size:13px;font-weight:400;color:var(--ink-faint);margin-left:8px}
html.wb .sc-az div span{font-size:13.5px;color:var(--ink-mid);line-height:1.45;margin-top:3px;text-wrap:pretty}
html.wb .sc-auf{font-size:13px;font-weight:600;color:var(--accent-dark);padding:2px 0;margin-top:1px}
html.wb .sc-auf:hover{color:color-mix(in srgb,var(--accent-dark) 75%,var(--ink))}
html.wb[data-theme="dark"] .sc-auf:hover{color:var(--ink)}

/* ---------- Prognose ---------- */
html.wb .sc-prog{gap:16px}
html.wb .sc-pz{grid-template-columns:76px minmax(0,1fr) 24px;gap:14px;font-size:13.5px;color:var(--ink-mid)}
html.wb .sc-pz b{font-size:17px;font-weight:700}
html.wb .sc-pb{height:14px;background:var(--wb-hover)}
html.wb .sc-aussage{font-size:14px;line-height:1.5;color:var(--ink-mid);margin:0;padding-top:14px;text-wrap:pretty}

/* ---------- Tabellen (Vertriebspartner, Einheiten) ---------- */
html.wb .sc-tab table{font-size:14px}
html.wb .sc-tab th{font-size:12.5px;font-weight:400;color:var(--ink-faint);padding:10px 6px}
html.wb .sc-tab td{padding:13px 6px;border-bottom:1px solid var(--line)}
html.wb .sc-tab th:first-child,html.wb .sc-tab td:first-child{padding-left:0}
html.wb .sc-tab th:last-child,html.wb .sc-tab td:last-child{padding-right:0}
html.wb .sc-tab td b{font-size:14.5px;font-weight:600}
html.wb .sc-tab td small{font-size:12.5px;margin-top:2px}
html.wb .sc-tab th.sc-r{text-align:right}
html.wb .sc-tab th abbr{text-decoration:none;cursor:help}
html.wb .sc-partner{padding-bottom:10px}
html.wb .sc-partner table{min-width:760px}
html.wb .sc-partner th.sc-r,html.wb .sc-partner td.sc-r{width:70px}
html.wb .sc-vt-z{width:30%;min-width:160px}
html.wb .sc-vt{display:flex;gap:2px;height:10px}
html.wb .sc-vt:empty{background:var(--sc-f0)}
html.wb .sc-tab td.sc-fett{font-weight:700}
html.wb .sc-tab td.sc-leise{color:var(--ink-faint)}
html.wb .sc-zeile:hover td{background:var(--wb-soft)}
html.wb .sc-zeile.is-achtung td:first-child b::after{background:var(--sc-rot)}
html.wb .sc-tab td small.sc-luecke{color:var(--sc-gelb)}

/* Punkte der Kaufstrecke */
html.wb .sc-dots{gap:2px}
html.wb .sc-dots i{width:10px;height:10px;background:var(--sc-f0)}
html.wb .sc-dots i.v{background:var(--sc-f8)}
html.wb .sc-dots i.j{background:var(--sc-f3)}
html.wb .sc-dots i.s{background:var(--sc-rot)}
html.wb .sc-dots i.l{background:transparent;border:1.5px solid var(--sc-amber)}

/* ---------- Pipeline im Reiter der Wohnanlage: bündige Stufen ---------- */
html.wb .sc-pipe{gap:2px;background:var(--sc-fuge)}
html.wb .sc-stufe{background:var(--wb-soft);border:0;padding:14px 12px 12px;gap:2px}
html.wb .sc-stufe::before{width:100%;height:8px;margin-bottom:10px}
html.wb .sc-stufe small{font-size:12.5px;font-weight:500;color:var(--ink-soft)}
html.wb .sc-stufe b{font-size:26px;font-weight:700;letter-spacing:-.02em;margin-top:4px}
html.wb .sc-stufe span{font-size:12.5px;color:var(--ink-soft)}
html.wb .sc-stufe em{font-size:12px;color:var(--ink-faint)}
html.wb .sc-stufe strong{font-size:12px;font-weight:700;color:var(--wb-warn)}
html.wb .sc-stufe:hover{background:var(--surface)}
html.wb .sc-stufe.on{background:var(--surface);outline:2px solid var(--ink);outline-offset:-2px}
html.wb .sc-filter-weg{background:var(--wb-dark);color:var(--wb-frame);font-size:12.5px;font-weight:600;padding:5px 10px}
html.wb[data-theme="dark"] .sc-filter-weg{background:var(--wb-dark);color:var(--wb-frame)}

/* ---------- Dialog „Kaufstrecke“ ---------- */
html.wb .sc-dk{background:var(--wb-soft);padding:16px 18px;gap:12px 20px;margin-bottom:14px}
html.wb .sc-dk small{font-size:12.5px;font-weight:400;color:var(--ink-faint)}
html.wb .sc-dk b{font-size:15px;font-weight:600;display:block;margin-top:2px}
html.wb .sc-dh span{font-size:13.5px;padding:10px 14px;background:var(--wb-pill-res-bg);color:var(--wb-pill-res-fg)}
html.wb .sc-dh span.is-rot{background:var(--wb-warn-bg);color:var(--wb-warn)}
html.wb .sc-dn{font-size:14px;margin:0 0 12px}
html.wb .sc-ds{padding:12px 0;min-height:52px}
html.wb .sc-ds-p{width:26px;height:26px;font-size:12.5px;background:var(--wb-soft);border:0;color:var(--ink-faint)}
html.wb .sc-ds.is-da .sc-ds-p{background:var(--accent);color:var(--accent-ink)}
html.wb .sc-ds.is-jetzt .sc-ds-p{outline:2px solid var(--ink);outline-offset:2px}
html.wb .sc-ds.is-stockt .sc-ds-p{background:var(--sc-rot);color:#fff}
html.wb[data-theme="dark"] .sc-ds.is-stockt .sc-ds-p{color:#fff}
html.wb .sc-ds.is-fehlt .sc-ds-p{background:transparent;border:1.5px dashed var(--sc-gelb);color:var(--sc-gelb)}
html.wb .sc-ds-l b{font-size:14.5px}
html.wb .sc-ds-l small{font-size:12.5px}
html.wb .sc-beleg{font-size:13.5px}
html.wb .sc-weg:hover,html.wb .sc-dok-weg:hover{background:var(--wb-hover);color:var(--wb-warn)}
html.wb .sc-form,html.wb .sc-fb,html.wb .sc-st,html.wb .sc-pbk{background:var(--wb-soft);padding:14px 16px}
html.wb .sc-form>b,html.wb .sc-fb-t b,html.wb .sc-fb-form>b,html.wb .sc-st b,html.wb .sc-fin-k b{font-size:14.5px}
html.wb .sc-fb p,html.wb #modalBody .sc-fb p,html.wb .sc-st span,html.wb .sc-fin p,html.wb #modalBody .sc-fin p,html.wb .sc-pbk p,html.wb #modalBody .sc-pbk p{font-size:13.5px}
html.wb .sc-st.is-offen,html.wb .sc-st.is-frage,html.wb .sc-pbk.is-frage{background:var(--wb-pill-res-bg)}
html.wb .sc-st.is-offen b,html.wb .sc-st.is-frage b,html.wb .sc-st.is-offen span,html.wb .sc-st.is-frage>span,html.wb .sc-pbk.is-frage p,html.wb .sc-pbk.is-frage .sc-pbk-frage b{color:var(--wb-pill-res-fg)}
html.wb .sc-st-wahl .btn.on{border-color:var(--ink)!important;background:var(--wb-dark)!important;color:var(--wb-frame)!important}
html.wb .sc-st-form small{color:var(--wb-warn)}
html.wb .sc-fin{border:1px solid var(--line)!important;padding:14px 16px}
html.wb .sc-fin-offen,html.wb #modalBody .sc-fin p.sc-fin-offen{color:var(--sc-gelb)}
html.wb .sc-fl span{font-size:12.5px}
html.wb .sc-form-z input,html.wb .sc-form-z select,html.wb .sc-fb-form textarea,html.wb .sc-fb-form input,html.wb .sc-st-form input,html.wb .sc-st-form select{font-size:14px;padding:9px 12px;border:1px solid var(--field-line);background:var(--surface)}
/* Gefahr bleibt Warnfarbe — das Fundament färbt sonst jeden Hauptknopf grün und jeden Nebenknopf dunkel. */
html.wb .btn.btn-ghost.sc-gefahr{color:var(--wb-warn)!important}
html.wb .btn.btn-primary.sc-gefahr-voll,html.wb #modal .btn.btn-primary.sc-gefahr-voll{background:#A4461A!important;border-color:#A4461A!important;color:#fff!important}
html.wb .btn.btn-primary.sc-gefahr-voll:hover{background:#8A3912!important;border-color:#8A3912!important}
html.wb .sc-zurueck-btn{font-size:13px;color:var(--wb-warn)}
html.wb[data-theme="dark"] .sc-zurueck-btn{color:var(--wb-warn)}
/* Dokumente je Schritt */
html.wb .sc-dok{font-size:13px;padding:4px 4px 4px 9px;border:1px solid var(--field-line)}
html.wb .sc-dok-k{font-size:12px}
html.wb .sc-dok-k.an{color:var(--accent-dark)}
html.wb .sc-dok-k:hover{background:var(--wb-hover)}
html.wb .sc-dok-plus{font-size:12.5px;padding:5px 10px;border:1px dashed var(--field-line);color:var(--ink-soft)}
html.wb .sc-dok-plus:hover{border-color:var(--ink);color:var(--ink)}
html.wb .sc-dok-feld label{font-size:13px}
html.wb .sc-dok-feld small{font-size:12.5px}
html.wb .sc-pbk-k{font-size:14px}
html.wb .vl-ks .vg-ks{border-bottom:1px solid var(--line)}

/* ---------- Schmal ---------- */
@container sc (max-width:1180px){
  html.wb .sc-pipe{grid-template-columns:repeat(5,minmax(0,1fr))}
}
@container sc (max-width:720px){
  html.wb .sc-kpis{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
}
@container sc (max-width:560px){
  html.wb .sc-karte{padding:18px 16px}
  html.wb .sc-kpi{padding:18px 16px}
  html.wb .sc-pipe{grid-template-columns:repeat(2,minmax(0,1fr))}
  html.wb .sc-sel{flex:1 1 100%}
  html.wb .sc-sel select{max-width:none}
  html.wb .btn.btn-ghost.sc-pdf{flex:1 1 100%;justify-content:center}
  html.wb .sc-pj-q small{white-space:normal}
  html.wb .sc-az{grid-template-columns:9px minmax(0,1fr)}
  html.wb .sc-az .sc-auf{grid-column:2;justify-self:start;margin-top:-4px}
}
@container sc (max-width:560px){
  html.wb .sc-pj .sc-pfeil{display:none}   /* die ganze Zeile ist der Link; der Pfeil bräche sonst allein um */
}
/* In der Wohnanlage erbt die Tabelle sonst „nowrap“ — lange Hinweise („ohne Angabe: …“) schöben den Kaufpreis aus dem Bild. */
html.wb .sc .sc-tab td{white-space:normal}
html.wb .sc .sc-tab td.sc-num,html.wb .sc .sc-tab td:first-child{white-space:nowrap}
html.wb .sc .sc-tab td:nth-child(2) small{white-space:nowrap}
/* Schmal: Tabelle seitlich schieben statt Spalten zu zerquetschen. */
html.wb .sc .sc-tab table{min-width:680px}
html.wb .sc .sc-partner table{min-width:760px}