/* ========== Basis ========== */
* { box-sizing: border-box; }
.hidden { display: none !important; }
.sr-only{ position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0 0 0 0)!important; white-space:nowrap!important; border:0!important; }
.sls-toolbar { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin:12px 0 16px; border-right: 1px solid #eee; margin-right: 10px; }
.sls-btn { padding:6px 10px; border:1px solid #cfd6df; background:#f7f9fc; border-radius:4px; cursor:pointer; }
.sls-btn:hover { background:#eef3fa; }

/* Suche */
.sls-search { padding:6px 10px; border:1px solid #cfd6df; border-radius:4px; min-width:220px; background:#fff; outline:none; }
.sls-search:focus { border-color:#7aa7ff; box-shadow:0 0 0 3px rgba(122,167,255,.2); }

/* ========== Custom Dropdown ========== */
.sls-dropdown { position:relative; display:inline-block; }
.sls-toggle { padding:6px 10px 6px 3px; border:1px solid #cfd6df; background:#fff; border-radius:4px; cursor:pointer; min-width:130px;}
.sls-toggle:hover { background:#f7f9fc; }
.sls-menu {
  position:absolute; z-index:30; min-width:220px; display:none; margin-top:6px;
  background:#fff; border:1px solid #cfd6df; border-radius:6px; padding:6px; box-shadow:0 10px 24px rgba(0,0,0,.08);
}
.sls-dropdown.open .sls-menu { display:block; }
.sls-count {border-radius: 50%;background: #4b6bff;width: 16px;display: inline-block;height: 16px;color: #fff;}

.sls-toggle:after {
    content: '';
    width: 15px;
	height:15px;
    display: inline-block;
	margin-left:5px;
	margin-bottom:-3px;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="%23000000"><path d="M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z" fill="%23000000"/></svg>');
	background-size:11px;
	background-repeat:no-repeat;
	background-position:center center;
	float: right;
}
.sls-toggle.active:after {
    content: '';
	background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512" fill="%230077b6"><path d="M201.4 137.4c12.5-12.5 32.8-12.5 45.3 0l160 160c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L224 205.3 86.6 342.6c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3l160-160z" fill="%230077b6"/></svg>');
	background-size:11px;
	background-repeat:no-repeat;
	background-position:center center;
}



/* Items: ganze Zeile klickbar */
.sls-item{ padding:6px 8px; border-radius:4px; cursor:pointer; display:flex; align-items:center; }
.sls-item:hover { background:#f2f6ff; }
.sls-item.is-selected { background:#e7f0ff; border:1px solid #8bb4ff; }

/* ========== Custom Checkbox (Kästchen mit SVG-Häkchen) ========== */
:root{
  --cb-size: 18px; --cb-radius: 4px;
  --cb-border:#9aa4b2; --cb-bg:#fff;
  --cb-checked-bg:#4b6bff; --cb-check:#fff; --cb-focus:#4b6bff; --cb-disabled:#cbd5e1;
}
.cb{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.cb input[type="checkbox"]{ /* ECHT verstecken, aber zugänglich */
  position:absolute !important; width:1px !important; height:1px !important;
  padding:0 !important; margin:-1px !important; overflow:hidden !important;
  clip:rect(0 0 0 0) !important; white-space:nowrap !important; border:0 !important;
}
.cb .cb-box{
  position:relative; width:var(--cb-size); height:var(--cb-size);
  border:1.5px solid var(--cb-border); border-radius:var(--cb-radius);
  background:var(--cb-bg);
  transition:background .15s, border-color .15s, box-shadow .15s; flex:0 0 auto;
}
.cb .cb-box::after{
  content:""; position:absolute; inset:0; background:var(--cb-check);
  opacity:0; transform:scale(.6); transition:opacity .15s;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12"><path d="M6.2 11.3L1 6.1l1.6-1.6 3.6 3.5L13.4 0.8l1.6 1.6z" fill="%23000"/></svg>') center/80% 80% no-repeat;
          mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 12"><path d="M6.2 11.3L1 6.1l1.6-1.6 3.6 3.5L13.4 0.8l1.6 1.6z" fill="%23000"/></svg>') center/80% 80% no-repeat;
}
.cb input[type="checkbox"]:checked + .cb-box{ background:var(--cb-checked-bg); border-color:var(--cb-checked-bg); }
.cb input[type="checkbox"]:checked + .cb-box::after{ opacity:1; }
.cb input[type="checkbox"]:focus-visible + .cb-box{ box-shadow:0 0 0 3px rgba(91,141,255,.25); border-color:var(--cb-focus); }

/* ========== Checkbox-Gruppen als Switch (Alternative) ========== */
:root{
  --sls-toggle-track:#e3e7ee; --sls-toggle-active:#5b8dff; --sls-toggle-knob:#ffffff; --sls-toggle-check:#ffffff; --sls-toggle-shadow:0 1px 3px rgba(0,0,0,.18);
}
.sls-checkgroup { display:flex; flex-wrap:wrap; gap:12px; align-items:center; }
.sls-switch{ display:inline-flex; align-items:center; gap:8px; cursor:pointer; user-select:none; }
.sls-switch input{ position:absolute; opacity:0; width:0; height:0; }
.sls-switch-ui{
  position:relative; width:48px; height:26px; border-radius:999px; background:var(--sls-toggle-track);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); transition:background .2s ease;
}
.sls-switch-knob{
  position:absolute; top:3px; left:3px; width:20px; height:20px; border-radius:50%;
  background:var(--sls-toggle-knob); box-shadow:var(--sls-toggle-shadow);
  display:flex; align-items:center; justify-content:center; transition:left .22s cubic-bezier(.2,.8,.2,1), transform .22s;
}
.sls-switch-knob .sls-check{ width:12px; height:12px; fill:var(--sls-toggle-check); opacity:0; transition:opacity .18s; }
.sls-switch input:checked + .sls-switch-ui{ background:var(--sls-toggle-active); }
.sls-switch input:checked + .sls-switch-ui .sls-switch-knob{ left:25px; }
.sls-switch input:checked + .sls-switch-ui .sls-switch-knob .sls-check{ opacity:1; }
.sls-switch input:focus-visible + .sls-switch-ui{ outline:2px solid var(--sls-toggle-active); outline-offset:2px; }

/* ========== Ranges ========== */
.sls-slider-range{
  margin-left:5px;
  margin-right:5px;
}
.sls-range { display:flex; gap:8px; align-items:center; }
.sls-range input[type="number"] { width:90px; padding:4px 6px; border:1px solid #cfd6df; border-radius:4px; }

/* Doppel-Range */
.sls-drange { position:relative; width:260px; height:24px; margin:4px 0; }
.sls-drange .dr-track{ position:absolute; left:0; right:0; top:50%; height:4px; transform:translateY(-50%); background:#d0d7e5; border-radius:2px; }
.sls-drange .dr-range{ position:absolute; top:50%; height:6px; transform:translateY(-50%); background:#5b8dff; border-radius:3px; }
.sls-drange .dr-thumb{
  position:absolute; top:50%; width:16px; height:16px; transform:translate(-50%,-50%);
  border-radius:50%; background:#fff; border:2px solid #5b8dff; cursor:pointer; box-shadow:0 1px 4px rgba(0,0,0,.12);
}
.sls-drange .dr-thumb:focus { outline:none; box-shadow:0 0 0 3px rgba(91,141,255,.25); }

/* Demo layout */
.demo-cards { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:10px; }
.demo-card { border:1px solid #e5eaf0; border-radius:6px; padding:10px; background:#fff; }