/* BASYMOD ID1 Entwickler-Testoverlay – nur Frontendanzeige, keine Layoutstruktur. */
.bm-dev-overlay{position:fixed;right:14px;bottom:14px;z-index:99990;width:min(390px,calc(100vw - 28px));font:12px/1.35 Arial,Helvetica,sans-serif;color:#f4f4f4;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}
.bm-dev-overlay>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:7px;padding:8px 10px;border:1px solid #666;border-radius:7px;background:#090909;color:#fff;font-weight:700;user-select:none}
.bm-dev-overlay>summary::-webkit-details-marker{display:none}
.bm-dev-overlay[open]>summary{border-radius:7px 7px 0 0;border-bottom-color:#333}
.bm-dev-overlay-dot{width:9px;height:9px;border-radius:50%;background:#8a3131;box-shadow:0 0 0 2px rgba(138,49,49,.18)}
.bm-dev-overlay-dot.is-on{background:#42b875;box-shadow:0 0 0 2px rgba(66,184,117,.18)}
.bm-dev-overlay-panel{max-height:min(72vh,620px);overflow:auto;border:1px solid #666;border-top:0;border-radius:0 0 7px 7px;background:#101010;padding:10px}
.bm-dev-overlay-head{display:flex;justify-content:space-between;gap:8px;align-items:center;padding-bottom:8px;margin-bottom:8px;border-bottom:1px solid #333}
.bm-dev-overlay-head strong{font-size:13px}.bm-dev-overlay-head span{font-size:10px;color:#aaa}
.bm-dev-overlay-form{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.bm-dev-overlay-form label{display:block;margin:0}.bm-dev-overlay-form label>span{display:block;margin:0 0 3px;color:#ddd;font-weight:700}
.bm-dev-overlay select{width:100%;min-height:31px;padding:5px 7px;background:#080808;color:#fff;border:1px solid #555;border-radius:4px}
.bm-dev-overlay button{width:100%;min-height:31px;padding:6px 8px;background:#202020;color:#fff;border:1px solid #666;border-radius:4px;cursor:pointer;font-size:11px;font-weight:700}
.bm-dev-overlay button:hover{border-color:#fff;background:#292929}
.bm-dev-overlay-form>button{grid-column:1/-1}
.bm-dev-overlay-switch{grid-column:1/-1;display:flex!important;align-items:center;gap:7px;padding:6px 8px;border:1px solid #414141;border-radius:4px;background:#171717}
.bm-dev-overlay-switch input{width:auto!important;margin:0}.bm-dev-overlay-switch span{margin:0!important}
.bm-dev-overlay-connections{display:grid;gap:5px;margin-top:10px;padding-top:9px;border-top:1px solid #333}
.bm-dev-overlay-connections>strong{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#aaa;margin-top:3px}
.bm-dev-overlay-connections>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 8px;padding:5px 7px;border:1px solid #303030;border-radius:4px;background:#0b0b0b}
.bm-dev-overlay-connections>div>b{color:#4dc181;font-size:9px}.bm-dev-overlay-connections>div small{grid-column:1/-1;color:#888;overflow-wrap:anywhere}
.bm-dev-overlay-connections>div.is-configured>b{color:#d8b85c}
.bm-dev-overlay-reset{margin-top:10px}.bm-dev-overlay-reset button{border-color:#8a4747;background:#301515}
@media(max-width:640px){.bm-dev-overlay{right:7px;bottom:7px;width:calc(100vw - 14px)}.bm-dev-overlay-form{grid-template-columns:1fr}}


/* BASYMOD Core 1.0.0.55: Overlay-Positionen direkt am echten Overlay-Element. */
.bm-dev-overlay[data-position="top-left"]{top:14px!important;left:14px!important;right:auto!important;bottom:auto!important}
.bm-dev-overlay[data-position="top-right"]{top:14px!important;right:14px!important;left:auto!important;bottom:auto!important}
.bm-dev-overlay[data-position="bottom-left"]{bottom:14px!important;left:14px!important;right:auto!important;top:auto!important}
.bm-dev-overlay[data-position="bottom-right"]{bottom:14px!important;right:14px!important;left:auto!important;top:auto!important}


/* BASYMOD Core 1.0.0.57: robuste Overlay-Positionierung + kompakte Positionsbuttons. */
.bm-dev-overlay-position{margin-top:10px;padding-top:9px;border-top:1px solid #333}
.bm-dev-overlay-position>strong{display:block;margin-bottom:6px;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:#aaa}
.bm-dev-overlay-position>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px}
.bm-dev-overlay-position button{width:auto!important;min-width:0!important;min-height:28px!important;padding:4px 6px!important;font-size:14px!important;line-height:1!important}
.bm-dev-overlay-position button.active{border-color:#b989ff!important;background:#4c2673!important;box-shadow:0 0 0 1px rgba(185,137,255,.25) inset}
.bm-dev-overlay[data-position="top-left"]{position:fixed!important;top:14px!important;left:14px!important;right:auto!important;bottom:auto!important}
.bm-dev-overlay[data-position="top-right"]{position:fixed!important;top:14px!important;right:14px!important;left:auto!important;bottom:auto!important}
.bm-dev-overlay[data-position="bottom-left"]{position:fixed!important;bottom:14px!important;left:14px!important;right:auto!important;top:auto!important}
.bm-dev-overlay[data-position="bottom-right"]{position:fixed!important;bottom:14px!important;right:14px!important;left:auto!important;top:auto!important}


/* BASYMOD 1.0.1.267: ID1 Live-Farbanpassung im Kundenportal. */
.bm-dev-color-open{margin-top:10px!important;border-color:#8650c7!important;background:#4c2673!important}
.bm-design-live-editor{position:fixed;z-index:99995;top:90px;left:90px;width:min(440px,calc(100vw - 24px));max-height:min(78vh,760px);overflow:hidden;border:1px solid #6c6c6c;border-radius:9px;background:#101010;color:#f5f5f5;box-shadow:0 18px 50px rgba(0,0,0,.55);font:12px/1.35 Arial,Helvetica,sans-serif}
.bm-design-live-editor[hidden]{display:none!important}
.bm-design-live-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 12px;background:#090909;border-bottom:1px solid #343434;cursor:move;user-select:none}
.bm-design-live-head small{color:#aaa;font-weight:400}
.bm-design-live-head button{width:28px;height:28px;border:1px solid #555;border-radius:5px;background:#1d1d1d;color:#fff;cursor:pointer}
.bm-design-live-body{padding:10px;overflow:auto;max-height:calc(min(78vh,760px) - 49px)}
.bm-design-live-body>p{margin:0 0 9px;color:#aaa}
.bm-design-live-tokens{display:grid;gap:6px}
.bm-design-live-tokens label{display:grid;grid-template-columns:minmax(0,1fr) 38px 82px;gap:7px;align-items:center;padding:6px 7px;border:1px solid #303030;border-radius:5px;background:#151515}
.bm-design-live-tokens label>span{font-weight:700}
.bm-design-live-tokens small{display:block;color:#858585;font-size:9px;font-weight:400}
.bm-design-live-tokens input[type=color]{width:38px;height:30px;padding:1px;border:1px solid #555;border-radius:4px;background:#090909}
.bm-design-live-tokens input[type=text]{width:82px;box-sizing:border-box;padding:6px;background:#090909;color:#fff;border:1px solid #555;border-radius:4px;font:11px monospace}
.bm-design-live-status{margin-top:9px;padding:7px;border:1px solid #383838;border-radius:5px;background:#0b0b0b;color:#aaa}
.bm-design-live-status.is-ok{color:#65d69a;border-color:#285a3f}
.bm-design-live-status.is-error{color:#ff8585;border-color:#6d3030}
.bm-design-live-actions{display:grid;grid-template-columns:1fr 1.4fr;gap:7px;margin-top:9px}
.bm-design-live-actions button{min-height:34px;border:1px solid #666;border-radius:5px;background:#242424;color:#fff;font-weight:700;cursor:pointer}
.bm-design-live-actions .is-primary{background:#4c2673;border-color:#8650c7}
@media(max-width:640px){.bm-design-live-editor{top:12px;left:12px;width:calc(100vw - 24px)}.bm-design-live-tokens label{grid-template-columns:minmax(0,1fr) 38px 78px}}


/* BASYMOD 1.0.1.273: Farbeditor in 3 Tabs + Pipette */
.bm-design-live-tabs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:5px;
  margin:0 0 9px;
}
.bm-design-live-tabs button{
  min-height:31px;
  border:1px solid #444;
  border-radius:5px;
  background:#171717;
  color:#aaa;
  font-weight:700;
  cursor:pointer;
}
.bm-design-live-tabs button:hover{
  background:#222;
  color:#fff;
}
.bm-design-live-tabs button.is-active{
  background:#4c2673;
  border-color:#8650c7;
  color:#fff;
}
.bm-design-live-tokens label{
  grid-template-columns:minmax(0,1fr) 38px 82px 32px!important;
}
.bm-design-live-tokens label[hidden]{
  display:none!important;
}
.bm-design-eyedropper{
  width:32px;
  height:30px;
  padding:0;
  border:1px solid #555;
  border-radius:4px;
  background:#0b0b0b;
  color:#fff;
  cursor:pointer;
  font-size:16px;
  line-height:1;
}
.bm-design-eyedropper:hover{
  border-color:#8650c7;
  background:#251533;
}
.bm-design-eyedropper:disabled{
  opacity:.35;
  cursor:not-allowed;
}
@media(max-width:640px){
  .bm-design-live-tokens label{
    grid-template-columns:minmax(0,1fr) 38px 76px 30px!important;
  }
}

/* BASYMOD 1.0.1.275: Änderungsstatus + Einzelreset */
.bm-design-live-tokens label{grid-template-columns:minmax(0,1fr) 38px 82px 32px 32px!important}
.bm-design-live-tokens label.is-changed{background:rgba(134,80,199,.12);outline:1px solid rgba(134,80,199,.28)}
.bm-design-live-tokens label.is-changed>span::after{content:" geändert";display:inline-block;margin-left:6px;color:#b98ee8;font-size:10px;font-weight:800}
.bm-design-token-reset{width:32px;height:30px;padding:0;border:1px solid #555;border-radius:4px;background:#0b0b0b;color:#fff;cursor:pointer;font-size:16px}
.bm-design-token-reset:hover:not(:disabled){border-color:#8650c7;background:#251533}
.bm-design-token-reset:disabled{opacity:.28;cursor:not-allowed}
.bm-design-live-changebar{margin:8px 0 3px;padding:7px 9px;border-radius:5px;background:#151515;border:1px solid #333;color:#aaa;font-size:11px}
.bm-design-live-changebar.has-changes{border-color:#7042a8;color:#d8b9f4}
.bm-design-live-actions [data-bm-design-live-save]:disabled{opacity:.35;cursor:not-allowed;filter:grayscale(.45)}
@media(max-width:640px){.bm-design-live-tokens label{grid-template-columns:minmax(0,1fr) 38px 72px 30px 30px!important}}

/* BASYMOD 1.0.1.290: Farbeditor ist auch im Entwicklerportal verfügbar. */
html[data-bm-portal="developer"] .bm-dev-color-open{
  background:var(--bm-portal-accent,#6f42a8)!important;
  border-color:var(--bm-portal-accent-hover,#553080)!important;
}
html[data-bm-portal="developer"] .bm-design-live-editor{
  border-color:var(--bm-portal-accent,#6f42a8);
}

/* BASYMOD 1.0.1.306: Seitenbezogener Farbeditor, 5 Reiter + Bereichsanzeige. */
.bm-design-live-scope{
  display:grid;
  grid-template-columns:auto 1fr 1fr;
  align-items:center;
  gap:5px;
  margin:0 0 8px;
  padding:6px;
  border:1px solid #333;
  border-radius:6px;
  background:#0b0b0b;
}
.bm-design-live-scope>span{padding:0 5px;color:#888;font-size:10px;font-weight:800;text-transform:uppercase;letter-spacing:.04em}
.bm-design-live-scope button{min-height:29px;border:1px solid #444;border-radius:5px;background:#171717;color:#777;font-size:11px;font-weight:800}
.bm-design-live-scope button.is-active{background:#4c2673;border-color:#8650c7;color:#fff}
.bm-design-live-scope button:disabled:not(.is-active){opacity:.35;cursor:not-allowed}
.bm-design-live-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
.bm-design-live-tabs button{padding:5px 4px;font-size:10px}
.bm-design-live-tabs button:disabled{opacity:.28;cursor:not-allowed}
.bm-design-live-tabs button:disabled:hover{background:#171717;color:#aaa;border-color:#444}
@media(max-width:640px){
  .bm-design-live-tabs{grid-template-columns:repeat(3,minmax(0,1fr))}
  .bm-design-live-scope{grid-template-columns:1fr 1fr}
  .bm-design-live-scope>span{grid-column:1/-1}
}

/* 1.0.1.323: Modulauswahl im Farbeditor. */
.bm-design-live-module-select{margin:8px 0 10px;padding:9px 10px;border:1px solid rgba(120,140,160,.24);border-radius:8px}
.bm-design-live-module-select label{display:flex;align-items:center;gap:10px}
.bm-design-live-module-select label>span{font-weight:700;min-width:58px}
.bm-design-live-module-select select{flex:1;min-width:0}

/* BASYMOD 1.0.1.344 – sichtbare Zielmarkierung des Farbeditor-Tokens. */
@keyframes bm-token-target-flash-keyframes{
  0%,100%{outline-color:transparent;box-shadow:0 0 0 0 rgba(255,193,7,0)}
  20%,60%{outline-color:#ffc107;box-shadow:0 0 0 5px rgba(255,193,7,.38)}
  40%,80%{outline-color:#ffffff;box-shadow:0 0 0 3px rgba(255,255,255,.9)}
}
.bm-token-target-flash{
  outline:3px solid #ffc107!important;
  outline-offset:3px!important;
  animation:bm-token-target-flash-keyframes .62s ease-in-out 2!important;
}

/* BASYMOD FIX: kompakter Live-Farbeditor, unabhängig von Frontdesign-CSS. */
.bm-design-live-editor{
  position:fixed!important;
  z-index:99995!important;
  top:18px!important;
  left:auto!important;
  right:18px!important;
  width:min(620px,calc(100vw - 36px))!important;
  max-width:620px!important;
  max-height:calc(100vh - 36px)!important;
  overflow:hidden!important;
  box-sizing:border-box!important;
  border:1px solid #555!important;
  border-radius:10px!important;
  background:#101010!important;
  color:#f5f5f5!important;
  box-shadow:0 18px 50px rgba(0,0,0,.58)!important;
  font:12px/1.35 Arial,Helvetica,sans-serif!important;
}
.bm-design-live-editor[hidden]{display:none!important}
.bm-design-live-head{box-sizing:border-box!important}
.bm-design-live-body{
  box-sizing:border-box!important;
  max-height:calc(100vh - 86px)!important;
  overflow:auto!important;
  overflow-x:hidden!important;
}
.bm-design-live-tokens{
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  gap:6px!important;
  width:100%!important;
  min-width:0!important;
}
.bm-design-live-tokens label{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 42px 86px 32px 32px!important;
  gap:7px!important;
  align-items:center!important;
  width:100%!important;
  max-width:100%!important;
  min-width:0!important;
  box-sizing:border-box!important;
  margin:0!important;
}
.bm-design-live-tokens label[hidden]{display:none!important}
.bm-design-live-tokens label>span{
  min-width:0!important;
  overflow:hidden!important;
  overflow-wrap:anywhere!important;
}
.bm-design-live-tokens label>span small{
  display:block!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
.bm-design-live-tokens input[type="color"]{
  width:42px!important;min-width:42px!important;max-width:42px!important;
  height:30px!important;box-sizing:border-box!important;
}
.bm-design-live-tokens input[type="text"]{
  width:86px!important;min-width:0!important;max-width:86px!important;
  box-sizing:border-box!important;
}
.bm-design-live-tokens .bm-design-eyedropper,
.bm-design-live-tokens .bm-design-token-reset{
  width:32px!important;min-width:32px!important;max-width:32px!important;
  height:30px!important;box-sizing:border-box!important;
}
.bm-design-live-tabs{width:100%!important;box-sizing:border-box!important}
.bm-design-live-actions{width:100%!important;box-sizing:border-box!important}
@media(max-width:700px){
  .bm-design-live-editor{
    top:8px!important;right:8px!important;left:8px!important;
    width:auto!important;max-width:none!important;
    max-height:calc(100vh - 16px)!important;
  }
  .bm-design-live-body{max-height:calc(100vh - 66px)!important}
  .bm-design-live-tokens label{
    grid-template-columns:minmax(0,1fr) 38px 76px 30px 30px!important;
    gap:5px!important;
  }
  .bm-design-live-tokens input[type="color"]{width:38px!important;min-width:38px!important}
  .bm-design-live-tokens input[type="text"]{width:76px!important;max-width:76px!important}
}