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

/* Seiten ohne eigene Vorlage (Leads, Mail, Anfragen, Tools, Entwicklung, Einstellungen, Admin):
   dieselbe Formensprache wie die Vorlage — Kennzahlen als Label + große Zahl, dunkle aktive
   Auswahl, Warnfarbe statt Bronze. */

/* Kennzahl-Kacheln (Leads, Admin): Label klein grau, Zahl 30/700, kein Symbolfeld */
html.wb .dash-kpis,html.wb .pk-grid{gap:0;background:var(--surface)}
html.wb .dash-kpi,html.wb .pk-card{padding:22px 24px;border-right:1px solid var(--line)!important}
html.wb .dash-kpi:last-child,html.wb .pk-card:last-child{border-right:0!important}
html.wb .dash-kpi-ic,html.wb .pk-ic{display:none}
html.wb .dash-kpi-top,html.wb .pk-top{margin-bottom:6px}
html.wb .dash-kpi-lbl,html.wb .pk-label{font-size:13.5px;font-weight:400;color:var(--ink-soft)}
html.wb .dash-kpi-val,html.wb .pk-val{font-family:var(--font-body);font-size:30px;font-weight:700;letter-spacing:-.02em;line-height:1.1}
html.wb .dash-kpi-sub{font-size:13.5px;color:var(--ink-soft);margin-top:6px}

/* Hinweisleiste über den Seiten: ruhige weiße Karte, Etikett in Warnfarbe */
html.wb .ib-todo{padding:16px 20px;margin-bottom:22px}
html.wb .ib-todo-item{background:var(--surface)!important;border:1px solid var(--line)!important}
html.wb .ib-todo-item:hover{background:var(--wb-soft)!important}
html.wb .ib-todo-ic{color:var(--wb-warn)!important}
html.wb .ib-todo [class*="tag"],html.wb .ib-todo [class*="typ"]{background:var(--wb-warn-bg)!important;color:var(--wb-warn)!important;border:0!important;font-weight:700}
html.wb .ib-todo-x{background:var(--surface)!important;border:1px solid var(--line)!important;color:var(--ink-faint)!important}

/* Einstellungen: aktive Auswahl wie die Navigation (grau + dunkel statt grün) */
html.wb .acc-nav-item.active{background:var(--wb-hover)!important;color:var(--ink)!important;border-color:transparent!important;font-weight:600}
html.wb .acc-nav-item.active svg{color:var(--ink)!important}
html.wb .acc-nav-item:hover{background:var(--wb-hover)!important}

/* Tools-Kacheln und Leerzustände: kein getöntes Symbolfeld */
html.wb .es-ico,html.wb [class*="-leer"] svg{color:var(--ink-faint)}
html.wb .es-ico{background:var(--wb-work)!important}

/* ---------- Einstellungen › Oberfläche (04.10.2026) ----------
   Erscheinungsbild als Segmentleiste, Seitenleiste als Schalter, Akzentfarbe mit Hex-Feld,
   Farbwähler, runden Farbtupfern (wie Kürzel-Avatare: rund ist hier die Ausnahme) und einer
   Vorschau, die NUR in sich die Entwurfsfarbe trägt (Variablen am Element, account.js). */
html.wb .acc-ui-block h3{margin:0 0 6px;font-size:17px!important;font-weight:600}
html.wb .acc-ui-hilfe{margin:0 0 14px;font-size:14px;line-height:1.5;color:var(--ink-soft);max-width:640px}
html.wb .acc-ui-block .acc-ui-seg + .acc-ui-hilfe{margin:12px 0 0}
/* Tönung des Hintergrunds: Schieber über den Farbkreis, daneben drei Musterflächen in der aktuellen Tönung. */
html.wb .acc-ui-tint{display:grid;grid-template-columns:auto minmax(160px,360px) auto auto;align-items:center;gap:10px 16px;margin-top:16px}
html.wb .acc-ui-tint[hidden]{display:none}
html.wb .acc-ui-tint-l{font-size:14.5px;font-weight:600;color:var(--ink)}
html.wb .acc-ui-tint-r{-webkit-appearance:none;appearance:none;width:100%;height:14px;margin:0;border:1px solid var(--field-line);cursor:pointer;
  background:linear-gradient(to right,hsl(0 67% 29%),hsl(45 67% 29%),hsl(90 67% 29%),hsl(135 67% 29%),hsl(180 67% 29%),hsl(225 67% 29%),hsl(270 67% 29%),hsl(315 67% 29%),hsl(359 67% 29%))}
html.wb .acc-ui-tint-r::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:26px;background:var(--surface);border:2px solid var(--ink);cursor:pointer}
html.wb .acc-ui-tint-r::-moz-range-thumb{width:14px;height:22px;border-radius:0;background:var(--surface);border:2px solid var(--ink);cursor:pointer}
html.wb .acc-ui-tint-r:focus-visible{outline:2px solid var(--accent-dark);outline-offset:3px}
html.wb .acc-ui-tint-w{font-size:14px;color:var(--ink-soft);font-variant-numeric:tabular-nums;min-width:110px}
html.wb .acc-ui-tint-m{display:inline-flex;justify-self:start;border:1px solid var(--field-line)}
html.wb .acc-ui-tint-m i{display:block;width:34px;height:26px}
html.wb .acc-ui-tint-m i:nth-child(1){background:var(--wb-page)}
html.wb .acc-ui-tint-m i:nth-child(2){background:var(--wb-work)}
html.wb .acc-ui-tint-m i:nth-child(3){background:var(--wb-seg)}
@media (max-width:720px){html.wb .acc-ui-tint{grid-template-columns:1fr}}
html.wb .acc-ui-seg{display:inline-grid;grid-auto-flow:column;grid-auto-columns:minmax(118px,auto);gap:2px;padding:4px;background:var(--wb-seg);max-width:100%}
html.wb .acc-ui-seg button{height:40px;padding:0 16px;border:0;background:transparent;color:var(--ink-soft);font:inherit;font-size:14.5px;font-weight:600;cursor:pointer;white-space:nowrap}
html.wb .acc-ui-seg button:hover{color:var(--ink)}
html.wb .acc-ui-seg button.on{background:var(--surface);color:var(--ink);box-shadow:var(--wb-tab-on)!important}
html.wb .acc-ui-zeile{padding:0;border:0}
html.wb .acc-ui-farbe{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,280px);gap:28px;align-items:start}
html.wb .acc-ui-wahl{display:flex;flex-direction:column;gap:14px;align-items:flex-start;min-width:0}
html.wb .acc-ui-eingabe{display:flex;align-items:flex-end;gap:10px}
html.wb .acc-ui-eingabe input[type=color]{width:52px;height:46px;padding:3px;border:1px solid var(--field-line);background:var(--surface);cursor:pointer;flex:none}
html.wb .acc-ui-eingabe input[type=color]::-webkit-color-swatch-wrapper{padding:0}
html.wb .acc-ui-eingabe input[type=color]::-webkit-color-swatch{border:0;border-radius:0}
html.wb .acc-ui-eingabe input[type=color]::-moz-color-swatch{border:0;border-radius:0}
html.wb .acc-ui-hex{display:flex;flex-direction:column;gap:5px}
html.wb .acc-ui-hex span{font-size:13px;font-weight:600;color:var(--ink-mid)}
html.wb .acc-ui-hex input{width:132px;height:46px;padding:0 12px;border:1px solid var(--field-line);background:var(--surface);color:var(--ink);font:inherit;font-size:16px;font-weight:600;letter-spacing:.02em}
html.wb .acc-ui-hex input:focus{outline:none;border-color:var(--accent-dark);box-shadow:0 0 0 1px var(--accent-dark)}
html.wb .acc-ui-fehler{margin:-6px 0 0;font-size:13px;font-weight:600;color:var(--wb-warn)}
html.wb .acc-ui-fehler:empty{display:none}
html.wb .acc-ui-tupfen{display:flex;flex-wrap:wrap;gap:10px}
html.wb .acc-ui-tupfer{width:34px;height:34px;border-radius:50%!important;border:0;padding:0;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(22,32,27,.14)!important}
html.wb .acc-ui-tupfer.on{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink)!important}
html.wb .acc-ui-tupfer:focus-visible{outline:2px solid var(--ink);outline-offset:4px}
html.wb .acc-ui-kontrast{margin:0;font-size:13px;line-height:1.5;color:var(--ink-faint)}
html.wb #accUiStd:disabled{opacity:.5;cursor:default}
/* Vorschau: ausdrücklich ein MUSTER — Beschriftung „Vorschau“, schraffierter Rahmen (−45°, das
   einzige Schmuckmittel), verkleinert, nicht bedienbar. Die Oberfläche selbst ändert sich ohnehin live. */
html.wb .acc-ui-vorschau{margin:0;padding:22px 14px 14px;position:relative;pointer-events:none;user-select:none;
  background:repeating-linear-gradient(-45deg,var(--wb-work) 0 5px,color-mix(in srgb,var(--line) 70%,var(--wb-work)) 5px 10px)}
html.wb .acc-ui-vorschau figcaption{position:absolute;top:4px;left:14px;font-size:11.5px;font-weight:700;color:var(--ink-faint)}
html.wb .acc-ui-muster{background:var(--surface);font-size:12px;box-shadow:0 0 0 1px var(--line)!important}
html.wb .acc-ui-m-kopf{padding:9px 12px;font-size:13px;font-weight:700;color:var(--ink);background:color-mix(in srgb,var(--accent) 9%,var(--surface));border-bottom:1px solid var(--line)}
html.wb[data-theme="dark"] .acc-ui-m-kopf{background:color-mix(in srgb,var(--accent) 16%,var(--surface))}
html.wb .acc-ui-m-rumpf{display:flex;flex-direction:column;gap:9px;padding:11px 12px}
html.wb .acc-ui-m-zeile{display:flex;align-items:center;gap:7px;color:var(--ink)}
html.wb .acc-ui-m-haken{width:17px;height:17px;flex:none;display:flex;align-items:center;justify-content:center;background:var(--accent);color:var(--accent-ink)}
html.wb .acc-ui-m-link{margin-left:auto;color:var(--accent-dark);font-weight:600;white-space:nowrap}
html.wb .acc-ui-m-fort{height:6px;background:var(--wb-st-frei)}
html.wb .acc-ui-m-fort i{display:block;width:62%;height:100%;background:repeating-linear-gradient(-45deg,var(--accent) 0 4px,color-mix(in srgb,var(--accent) 92%,#fff) 4px 8px)}
html.wb .acc-ui-m-hinweis{padding:7px 9px;background:var(--accent-soft);color:var(--ink)}
html.wb .acc-ui-m-hinweis b{color:var(--accent-dark)}
html.wb .acc-ui-m-fuss{display:flex;gap:8px;align-items:center}
html.wb .acc-ui-m-feld{flex:1;height:30px;display:flex;align-items:center;padding:0 9px;border:1.5px solid var(--accent-dark);box-shadow:0 0 0 1px var(--accent-dark)!important;color:var(--ink-soft)}
html.wb .acc-ui-m-knopf{height:30px;display:inline-flex;align-items:center;padding:0 12px;background:var(--accent);color:var(--accent-ink);font-weight:600}
html.wb .acc-ui .acc-prof-head{justify-content:space-between}
html.wb .acc-ui-stand{font-size:13.5px;font-weight:600;color:var(--ink-soft);white-space:nowrap}
html.wb .acc-ui-imp{margin:12px 0 0;padding:9px 12px;font-size:13.5px;background:var(--bronze-100);color:var(--ink)}
@media (max-width:900px){
  html.wb .acc-ui-farbe{grid-template-columns:minmax(0,1fr);gap:20px}
  html.wb .acc-ui-seg{display:grid;width:100%;grid-auto-columns:1fr}
  html.wb .acc-ui-seg button{height:44px;padding:0 6px;font-size:14px}
  html.wb .acc-ui-tupfer{width:42px;height:42px}
  html.wb .acc-ui-hex input{height:46px}
  html.wb #accUiStd{min-height:44px}
  html.wb .acc-ui-eingabe{flex-wrap:wrap}
  html.wb .acc-ui-vorschau{max-width:360px}
}