/*** POPUP ***/
.boows-popup-bg {
  display:none;
  position: fixed;
  z-index: 9999;
  width: 100%;
  height: 100%;
  left:0;
  top:0;
  right:0;
  bottom:0;
  background-color: rgba(0,0,0,0.4);
}

.boows-popup {
  display:none;
  background-color: #fff;
  border-radius: var(--boows-border-radius);
  margin:auto;
  position: fixed;
  max-width: 800px;
  width: 90%;
  top:50%;
  left:50%;
  transform: translate(-50%, -50%);
  z-index: 10000;
  box-shadow: 0 9px 46px 8px rgba(0, 0, 0, 0.14), 0 11px 15px -7px rgba(0, 0, 0, 0.12), 0 24px 38px 3px rgba(0, 0, 0, 0.2);
  min-height: 200px;

  /* BOOWS spacing */
  padding: var(--boows-whitespace-l5);
  padding-bottom: 0;

  max-height: 86vh;
  overflow-y: auto;
  overflow-x: hidden;
  box-sizing: border-box;

  --boows-popup-control-size: 40px;
  --boows-popup-control-gap: var(--boows-whitespace-l1);
  --boows-popup-control-inset: var(--boows-whitespace-l3);
}

/* basic fullscreen class (wird unten erweitert) */
.boows-popup.fullscreen {
  max-width: 100% !important;
  width: 100%;
  height: 100vh;
  max-height: 100vh;
  z-index:1000000;
}

.boows-popup-close,.boows-popup-top-button {
  position: absolute;
  height: 40px;
  width: 40px;
  border-radius: 50%;
  color: #fff;
  background-color: var(--boows-col-text);
  transition: var(--boows-transition);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  top: var(--boows-popup-control-inset);
  right: var(--boows-popup-control-inset);
  user-select: none;
  /* must stay above .boows-popup-header (z=4) and sticky bottom bar (z=5) */
  z-index: 6;
}
.boows-popup > .boows-popup-close + .boows-popup-top-button {
  right: calc(var(--boows-popup-control-inset) + var(--boows-popup-control-size) + var(--boows-popup-control-gap));
}
.boows-popup > .boows-popup-close + .boows-popup-top-button + .boows-popup-top-button {
  right: calc(var(--boows-popup-control-inset) + (2 * (var(--boows-popup-control-size) + var(--boows-popup-control-gap))));
}
.boows-popup > .boows-popup-top-button:first-child + .boows-popup-top-button {
  right: calc(var(--boows-popup-control-inset) + var(--boows-popup-control-size) + var(--boows-popup-control-gap));
}

.boows-popup.fullscreen,
.boows-popup.fullscreen_mobile {
  --boows-popup-control-inset: var(--boows-whitespace-l3);
}

.boows-popup-close:hover,.boows-popup-top-button:hover {
  background-color: var(--boows-col-secondary);
  opacity: 0.8;
}

.boows-action-bar-button {
  background: var(--boows-col-secondary);
  padding: var(--boows-whitespace-l2) var(--boows-whitespace-l2);
  margin-right: var(--boows-whitespace-l1);
}

.boows-popup-content > .boows-form > *:nth-last-child(2) {
  margin-bottom: var(--boows-whitespace-l6) !important;
}

.boows-popup-content .boows-form {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: inherit;
  position: relative;
  width: 100%;
}

/* WICHTIG: globales .boows-form {max-width:700px} überschreiben */
.boows-popup .boows-form,
.boows-popup-content .boows-form,
.boows-form.full-width {
  max-width: none !important;
  width: 100% !important;
}

.boows-popup-content .boows-form h1,
.boows-popup-content .boows-form h2,
.boows-popup-content .boows-form h3,
.boows-popup-content .boows-form h4,
.boows-popup-content .boows-form h5,
.boows-popup-content .boows-form h6,
.boows-popup-content .boows-form > div  {
  width: 100%;
  height: min-content;
}

.boows-popup-content .boows-submit {
  margin-top: var(--boows-whitespace-l1);
  margin-right: var(--boows-whitespace-l1);
}

/* =========================
   HEADER CONTAINER (sticky top)
   -> Flex-Layout: Titel links, Top-Buttons rechts, vertikal mittig
   -> sitzt FLUSH am oberen Popup-Rand: das Eltern-Padding wird in den
      unten stehenden :has()-Regeln auf 0 gesetzt. Dadurch entspricht
      die optische Hoehe genau header.padding * 2 + content.
   -> bleibt beim Scrollen am oberen Rand
========================= */
.boows-popup-header {
  background: #fff;
  position: sticky;
  top: 0;

  /* full-bleed: brechen aus dem (ggf. vorhandenen) horizontalen
     Eltern-Padding aus. Standardfall = .boows-popup mit Padding l5. */
  width: calc(100% + (2 * var(--boows-whitespace-l5))) !important;
  margin-left: calc(-1 * var(--boows-whitespace-l5));
  margin-right: calc(-1 * var(--boows-whitespace-l5));
  margin-top: 0;
  margin-bottom: var(--boows-whitespace-l3);

  padding: var(--boows-whitespace-l3) var(--boows-whitespace-l5);
  box-sizing: border-box;

  border-bottom: 1px solid rgba(0,0,0,0.08);

  /* Title links / Actions rechts, beide vertikal mittig */
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--boows-whitespace-l3);
  min-height: calc(var(--boows-popup-control-size) + (2 * var(--boows-whitespace-l3)));

  z-index: 4;
}

/* Wenn ein Header existiert, MUSS das Eltern-Padding-Top weg, damit der
   Header buendig oben sitzt. Sonst entsteht eine optische Leerflaeche
   ueber dem Header (popup.padding-top kommt sonst on top). */
.boows-popup:has(> .boows-popup-content > .boows-popup-header) {
  padding-top: 0;
}
.boows-popup.layout-sidebar:has(.boows-popup-content > .boows-popup-header) .boows-popup-content,
.boows-popup.fullscreen:has(.boows-popup-content > .boows-popup-header) .boows-popup-content,
.boows-popup.fullscreen_mobile:has(.boows-popup-content > .boows-popup-header) .boows-popup-content {
  padding-top: 0;
}

/* Legacy-Fallback: Header ohne .boows-popup-header-title (z.B. direkter
   <h2>-Inhalt). Platz rechts für absolut positionierte Top-Buttons
   reservieren, damit nichts überlappt. */
.boows-popup-header:not(:has(.boows-popup-header-title)) {
  padding-right: calc(var(--boows-whitespace-l5) + ((var(--boows-popup-control-size) + var(--boows-popup-control-gap)) * 3));
}
.boows-popup.no-top-buttons .boows-popup-header:not(:has(.boows-popup-header-title)) {
  padding-right: var(--boows-whitespace-l5);
}

/* Titel-Bereich */
.boows-popup-header-title {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--boows-whitespace-l0);
}

.boows-popup-header-title > :first-child { margin-top: 0; }
.boows-popup-header-title > :last-child  { margin-bottom: 0; }

.boows-popup-header-title h1,
.boows-popup-header-title h2,
.boows-popup-header-title h3,
.boows-popup-header-title h4 {
  margin: 0;
  font-size: 1.25em;
  line-height: 1.25;
  font-weight: 600;
}
.boows-popup-header-title > p {
  margin: 0;
  font-size: 0.9em;
  color: var(--boows-col-text-60);
  line-height: 1.3;
}

/* Actions-Slot rechts (Close, Drag, Fullscreen wenn im Header eingebettet) */
.boows-popup-header-actions {
  display: flex;
  align-items: center;
  gap: var(--boows-popup-control-gap);
  flex-shrink: 0;
}

/* Top-Buttons im Header: KEINE absolute Position, sondern Flex-Kind */
.boows-popup-header-actions .boows-popup-close,
.boows-popup-header-actions .boows-popup-top-button {
  position: static;
  top: auto;
  right: auto;
}

/* Close button must always sit at the far right of the actions group,
   even though the markup order (close, drag, fullscreen) places it first. */
.boows-popup-header-actions .boows-popup-close {
  order: 99;
}

/* =========================
   BUTTON CONTAINER (NORMAL)
   -> full-bleed trotz Popup-Padding
   -> dezenter Default: weisser Hintergrund mit feiner Top-Border
   -> Varianten via Modifier-Klassen am Container:
        .footer-bordered   (default, weiss + Border)
        .footer-flat       (weiss, ohne Border)
        .footer-tinted     (sehr leichter Grau-Ton)
        .footer-brand      (Primary-tinted, Legacy-Look)
========================= */
.boows-popup-button-container {
  background: #fff;
  position: sticky;
  bottom: 0;

  /* full-bleed über die komplette Popup-Breite */
  width: calc(100% + (2 * var(--boows-whitespace-l5))) !important;
  margin-left: calc(-1 * var(--boows-whitespace-l5));
  margin-right: calc(-1 * var(--boows-whitespace-l5));

  /* bleibt am Ende des flex-Forms und sticky am unteren Rand */
  margin-top: auto;

  /* Padding in BOOWS spacing */
  padding: var(--boows-whitespace-l4) var(--boows-whitespace-l5);
  box-sizing: border-box;

  /* dezente Trennung zum Content */
  border-top: 1px solid var(--boows-col-text-10, #e5e6e6);

  /* Buttons rechtsbündig per Default - aligned mit Referenz-Designs */
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--boows-whitespace-l2);

  z-index: 5;
}

/* Bei links-ausgerichtetem Layout (Legacy) opt-in via .align-start */
.boows-popup-button-container.align-start {
  justify-content: flex-start;
}
.boows-popup-button-container.align-between {
  justify-content: space-between;
}

/* Default-Modifier-Aliase */
.boows-popup-button-container.footer-bordered { /* identisch zum Default */
  background: #fff;
  border-top: 1px solid var(--boows-col-text-10, #e5e6e6);
}
.boows-popup-button-container.footer-flat {
  background: #fff;
  border-top: 0;
}
.boows-popup-button-container.footer-tinted {
  background: var(--boows-col-text-5, #f7f7f7);
  border-top: 1px solid var(--boows-col-text-10, #e5e6e6);
}
.boows-popup-button-container.footer-brand {
  background: var(--boows-col-primary-10, #e6f6f5);
  border-top: 1px solid var(--boows-col-primary-20, #ceeceb);
}

/* Buttons innerhalb des Containers brauchen keinen eigenen margin-top */
.boows-popup-button-container .boows-submit,
.boows-popup-button-container .boows-btn {
  margin-top: 0;
  margin-right: 0;
}

.boows-action-bar-button i,
.boows-action-bar-button img {
  margin-right: var(--boows-whitespace-l2);
}

.boows-action-bar-button img {
  height: 24px;
}

.boows-popup-content {
  height: 100%;
  min-height: inherit;
  position: relative;
  height: min-content;
  display: flex;
  flex-direction: column;
  width: 100%;
}

.boows-popup.fullscreen .boows-popup-content {
  height: 100vh;
}

.boows-popup-content h1:first-child {
  margin-top: 0px;
}

.boows-popup-content > :first-child {
  margin-top: 0;
}

.boows-popup-content h1,
.boows-popup-content h2,
.boows-popup-content h3 {
  line-height: 1.0em;
}

@media (max-width: 767px) {
  .boows-popup-top-button.popup-drag {
    display: none !important;
  }

  /* Wenn Drag auf Mobile ausgeblendet ist, darf kein "leerer Slot" bleiben */
  .boows-popup > .boows-popup-close + .boows-popup-top-button.popup-drag + .boows-popup-top-button {
    right: calc(var(--boows-popup-control-inset) + var(--boows-popup-control-size) + var(--boows-popup-control-gap));
  }

  .boows-popup.fullscreen_mobile {
    left: 0 !important;
    top: 0 !important;
    transform: none !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100dvh;
    max-height: 100dvh;
    z-index:1000000;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
    border-radius: 0 !important;
  }

  @supports not (height: 100dvh) {
    .boows-popup.fullscreen_mobile {
      height: 100vh;
      max-height: 100vh;
    }
  }

  .boows-popup.fullscreen_mobile .boows-popup-content {
    width: 100% !important;
    max-width: none !important;
    height: 100%;
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    padding: var(--boows-whitespace-l3);
    padding-top: calc(var(--boows-whitespace-l3) + env(safe-area-inset-top, 0px));
    padding-bottom: 0;
    padding-left: calc(var(--boows-whitespace-l3) + env(safe-area-inset-left, 0px));
    padding-right: calc(var(--boows-whitespace-l3) + env(safe-area-inset-right, 0px));
    position: absolute;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
  }

  .boows-popup.fullscreen_mobile .boows-popup-button-container {
    position: sticky;
    bottom: 0;
    width: calc(100% + (2 * var(--boows-whitespace-l5))) !important;
    margin-left: calc(-1 * var(--boows-whitespace-l5));
    margin-right: calc(-1 * var(--boows-whitespace-l5));
    margin-top: var(--boows-whitespace-l6);
    padding: var(--boows-whitespace-l5);
    padding-bottom: calc(var(--boows-whitespace-l5) + env(safe-area-inset-bottom, 0px));
    box-sizing: border-box;
    border-top: var(--boows-whitespace-l0) solid rgba(0,0,0,0.08);
    z-index: 5;
  }

  .boows-popup.fullscreen_mobile .boows-popup-content > .boows-form {
    padding-bottom: calc(var(--boows-whitespace-l8) + var(--boows-whitespace-l6));
  }
}

/* =========================================================
   Fullscreen: so breit wie möglich (Tablet) + safe-area
   -> Popup selbst ohne Scroll, Scroll ist im Content
   -> Buttonbar sticky bottom:0, full-bleed, korrekt im Viewport
========================================================= */
.boows-popup.fullscreen {
  left: 0;
  top: 0;
  transform: none;

  width: 100vw !important;
  max-width: 100vw !important;

  height: 100dvh;
  max-height: 100dvh;

  box-sizing: border-box;

  /* Popup bekommt KEIN Innenpadding mehr (sonst verschiebt sich sticky optisch) */
  padding: 0;

  overflow: hidden;
  border-radius: 0;
}

/* Fallback falls dvh nicht unterstützt */
@supports not (height: 100dvh) {
  .boows-popup.fullscreen {
    height: 100vh;
    max-height: 100vh;
  }
}

/* Content bekommt das Padding (damit Form nicht am Rand klebt) */
.boows-popup.fullscreen .boows-popup-content {
  width: 100% !important;
  max-width: none !important;

  height: 100%;
  max-height: 100%;

  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;

  /* BOOWS padding + safe-area */
  padding: var(--boows-whitespace-l3);
  padding-top: calc(var(--boows-whitespace-l3) + env(safe-area-inset-top, 0px));
  padding-bottom: 0;
  padding-left: calc(var(--boows-whitespace-l3) + env(safe-area-inset-left, 0px));
  padding-right: calc(var(--boows-whitespace-l3) + env(safe-area-inset-right, 0px));
  position: absolute;

  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* Form wirklich volle Breite */
.boows-popup.fullscreen .boows-popup-content .boows-form,
.boows-popup.fullscreen .boows-popup-content .boows-form.full-width {
  width: 100% !important;
  max-width: none !important;
}

/* Sticky Bottom Bar: full-bleed relativ zum Content-Padding */
.boows-popup.fullscreen .boows-popup-button-container {
  position: sticky;
  bottom: 0;

  width: calc(100% + (2 * var(--boows-whitespace-l5))) !important;
  margin-left: calc(-1 * var(--boows-whitespace-l5));
  margin-right: calc(-1 * var(--boows-whitespace-l5));
  margin-top: var(--boows-whitespace-l6);

  padding: var(--boows-whitespace-l5);
  padding-bottom: calc(var(--boows-whitespace-l5) + env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;

  border-top: var(--boows-whitespace-l0) solid rgba(0,0,0,0.08);
  z-index: 5;
}

/* Sticky Header: full-bleed im fullscreen Modus (Content ist Scroll-Container).
   Eltern-Padding (.boows-popup-content) wird durch die :has()-Regel oben
   auf padding-top:0 gesetzt. Header sitzt damit buendig am oberen Rand. */
.boows-popup.fullscreen .boows-popup-header,
.boows-popup.fullscreen_mobile .boows-popup-header {
  position: sticky;
  top: 0;

  width: calc(100% + (2 * var(--boows-whitespace-l3))) !important;
  margin-left: calc(-1 * var(--boows-whitespace-l3));
  margin-right: calc(-1 * var(--boows-whitespace-l3));
  margin-top: 0;
  margin-bottom: var(--boows-whitespace-l3);

  padding: var(--boows-whitespace-l3);
  padding-top: calc(var(--boows-whitespace-l3) + env(safe-area-inset-top, 0px));
  box-sizing: border-box;
}

/* Legacy: Header ohne Title-Wrapper -> Platz für absolute Top-Buttons */
.boows-popup.fullscreen .boows-popup-header:not(:has(.boows-popup-header-title)),
.boows-popup.fullscreen_mobile .boows-popup-header:not(:has(.boows-popup-header-title)) {
  padding-right: calc(var(--boows-whitespace-l3) + ((var(--boows-popup-control-size) + var(--boows-popup-control-gap)) * 3));
}
.boows-popup.fullscreen.no-top-buttons .boows-popup-header:not(:has(.boows-popup-header-title)),
.boows-popup.fullscreen_mobile.no-top-buttons .boows-popup-header:not(:has(.boows-popup-header-title)) {
  padding-right: var(--boows-whitespace-l3);
}

.boows-popup.fullscreen .boows-popup-button-container,
.boows-popup.fullscreen_mobile .boows-popup-button-container {
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* Platz, damit letzter Inhalt nicht hinter Buttonbar landet */
.boows-popup.fullscreen .boows-popup-content > .boows-form {
  padding-bottom: calc(var(--boows-whitespace-l8) + var(--boows-whitespace-l6));
}

.boows-select-mobile-popup .boows-popup {
  background: rgba(255,255,255,0.95);
}

/* =========================================================
   Popup Style Variants (Default / Rounded / Pill)
========================================================= */
body.boows-rounded .boows-popup:not(.fullscreen):not(.fullscreen_mobile) {
  border-radius: var(--boows-default-border-container);
}

body.boows-pill .boows-popup:not(.fullscreen):not(.fullscreen_mobile) {
  border-radius: var(--boows-default-border-pill);
}

/* Mobile select alternative must not use full pill radius in pill theme */
body.boows-pill .boows-select-mobile-popup .boows-popup:not(.fullscreen):not(.fullscreen_mobile) {
  border-radius: var(--boows-default-border-container);
}

body.boows-rounded .boows-popup-close,
body.boows-rounded .boows-popup-top-button {
  border-radius: var(--boows-border-radius-button);
}

body.boows-pill .boows-popup-close,
body.boows-pill .boows-popup-top-button {
  border-radius: var(--boows-default-border-pill);
}

body.boows-rounded .boows-popup-button-container {
  border-bottom-left-radius: var(--boows-default-border-container);
  border-bottom-right-radius: var(--boows-default-border-container);
}

body.boows-pill .boows-popup-button-container {
  border-bottom-left-radius: var(--boows-default-border-pill);
  border-bottom-right-radius: var(--boows-default-border-pill);
}

body.boows-pill .boows-select-mobile-popup .boows-popup-button-container {
  border-bottom-left-radius: var(--boows-default-border-container);
  border-bottom-right-radius: var(--boows-default-border-container);
}

/* =========================================================
   FLUSH-BOTTOM BUTTON BAR
   When the popup has a fixed full height (side-sheet, sidebar,
   fullscreen), the content column must fill the popup so that
   `margin-top: auto` on .boows-popup-button-container can push
   it to the actual bottom edge. Without this, short content
   leaves the bar floating mid-popup.
========================================================= */
.boows-popup.layout-side-sheet:not(.fullscreen):not(.fullscreen_mobile) .boows-popup-content,
.boows-popup.layout-sidebar .boows-popup-content,
.boows-popup.fullscreen .boows-popup-content,
.boows-popup.fullscreen_mobile .boows-popup-content {
  min-height: 100%;
  height: auto;
}

/* The form inside the popup is also a flex column; same trick. */
.boows-popup.layout-side-sheet:not(.fullscreen):not(.fullscreen_mobile) .boows-popup-content > .boows-form,
.boows-popup.fullscreen .boows-popup-content > .boows-form,
.boows-popup.fullscreen_mobile .boows-popup-content > .boows-form {
  flex: 1 1 auto;
  min-height: 100%;
}

/* =========================================================
   Drag & Drop
========================================================= */
.boows-popup-top-button.popup-drag {
  cursor: grab;
}
.boows-popup-top-button.popup-drag:active {
  cursor: grabbing;
}
.boows-popup.boows-popup-dragging {
  cursor: grabbing;
  user-select: none;
  transition: none;
}
.boows-popup.boows-popup-dragged {
  margin: 0;
}

/* =========================================================
   LAYOUT VARIANTS (size / position)
   - layout-compact: schmal (Confirm / Detail)
   - layout-wide:    breit (Wizards, Tables)
   - layout-side-sheet: rechts angedockt, volle Höhe
========================================================= */
.boows-popup.layout-compact:not(.fullscreen):not(.fullscreen_mobile) {
  max-width: 440px;
}

.boows-popup.layout-wide:not(.fullscreen):not(.fullscreen_mobile) {
  max-width: 1100px;
  width: 95%;
}

.boows-popup.layout-side-sheet:not(.fullscreen):not(.fullscreen_mobile) {
  top: 0;
  right: 0;
  left: auto;
  transform: none;
  max-width: 560px;
  width: 100%;
  height: 100dvh;
  max-height: 100dvh;
  border-radius: 0;
  margin: 0;
  border-top-left-radius: var(--boows-border-radius);
  border-bottom-left-radius: var(--boows-border-radius);
}

@supports not (height: 100dvh) {
  .boows-popup.layout-side-sheet:not(.fullscreen):not(.fullscreen_mobile) {
    height: 100vh;
    max-height: 100vh;
  }
}

body.boows-rounded .boows-popup.layout-side-sheet:not(.fullscreen):not(.fullscreen_mobile) {
  border-top-left-radius: var(--boows-default-border-container);
  border-bottom-left-radius: var(--boows-default-border-container);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

body.boows-pill .boows-popup.layout-side-sheet:not(.fullscreen):not(.fullscreen_mobile) {
  border-top-left-radius: var(--boows-default-border-container);
  border-bottom-left-radius: var(--boows-default-border-container);
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

/* Mobile: side-sheet wird zu fullscreen-ähnlich */
@media (max-width: 767px) {
  .boows-popup.layout-side-sheet:not(.fullscreen):not(.fullscreen_mobile) {
    max-width: 100vw;
    width: 100vw;
    border-radius: 0 !important;
  }
}

/* =========================================================
   SIDEBAR LAYOUT
   - linke Spalte: Branding / Schritte / Navigation
   - rechte Spalte: Hauptinhalt mit Form + sticky footer
========================================================= */
.boows-popup.layout-sidebar {
  padding: 0 !important;
  overflow: hidden;
}

.boows-popup.layout-sidebar:not(.fullscreen):not(.fullscreen_mobile) {
  max-width: 1000px;
  width: 92%;
  max-height: 86vh;
  display: flex;
  flex-direction: row;
}

.boows-popup.layout-sidebar.fullscreen,
.boows-popup.layout-sidebar.fullscreen_mobile {
  display: flex;
  flex-direction: row;
}

.boows-popup-sidebar {
  flex: 0 0 280px;
  /* Default: neutrales Grau. Per --boows-popup-sidebar-bg ueberschreibbar
     (z.B. fuer branded Wizards mit Farb-Sidebar). */
  background: var(--boows-popup-sidebar-bg, var(--boows-col-text-5, #f5f6f7));
  color: var(--boows-popup-sidebar-color, inherit);
  padding: var(--boows-whitespace-l5);
  box-sizing: border-box;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--boows-col-text-10, rgba(0,0,0,0.06));
}

/* Opt-in: Branded (farbiger) Sidebar.
   Matcht sowohl, wenn .sidebar-brand auf dem Popup ODER auf dem
   .boows-popup-bg (Klassen-Option in boows_new_popup) sitzt. */
.boows-popup.layout-sidebar.sidebar-brand .boows-popup-sidebar,
.boows-popup-bg.sidebar-brand .boows-popup.layout-sidebar .boows-popup-sidebar {
  --boows-popup-sidebar-bg: var(--boows-col-primary-60, #6bc7c2);
}

.boows-popup-sidebar > :first-child {
  margin-top: 0;
}
.boows-popup-sidebar > :last-child {
  margin-bottom: 0;
}

.boows-popup.layout-sidebar .boows-popup-content {
  flex: 1 1 auto;
  padding: var(--boows-whitespace-l5);
  padding-bottom: 0;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  height: auto;
  min-height: 0;
  position: relative;
  width: auto;
  display: flex;
  flex-direction: column;
}

/* Sidebar-Layout: button-container full-bleed nur über Content-Spalte */
.boows-popup.layout-sidebar .boows-popup-button-container {
  width: calc(100% + (2 * var(--boows-whitespace-l5))) !important;
}

/* Sticky Header im Sidebar-Layout: ebenfalls nur über Content-Spalte */
.boows-popup.layout-sidebar .boows-popup-header {
  width: calc(100% + (2 * var(--boows-whitespace-l5))) !important;
}

/* Top-Buttons (Close, Drag, Fullscreen) müssen rechts oben über dem Content
   bleiben, nicht über der Sidebar */
.boows-popup.layout-sidebar > .boows-popup-close,
.boows-popup.layout-sidebar > .boows-popup-top-button {
  z-index: 7;
}

/* Mobile: Sidebar wird zu Top-Strip */
@media (max-width: 767px) {
  .boows-popup.layout-sidebar:not(.fullscreen):not(.fullscreen_mobile),
  .boows-popup.layout-sidebar.fullscreen,
  .boows-popup.layout-sidebar.fullscreen_mobile {
    flex-direction: column;
  }

  .boows-popup-sidebar {
    flex: 0 0 auto;
    width: 100%;
    max-height: 38vh;
    border-right: none;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding: var(--boows-whitespace-l3);
  }

  .boows-popup.layout-sidebar .boows-popup-content {
    padding: var(--boows-whitespace-l3);
    padding-bottom: 0;
  }

  .boows-popup.layout-sidebar .boows-popup-button-container,
  .boows-popup.layout-sidebar .boows-popup-header {
    width: calc(100% + (2 * var(--boows-whitespace-l3))) !important;
    margin-left: calc(-1 * var(--boows-whitespace-l3));
    margin-right: calc(-1 * var(--boows-whitespace-l3));
  }
}

/* Optional: einfache Step-Liste in der Sidebar */
.boows-popup-sidebar-steps {
  list-style: none;
  padding: 0;
  margin: var(--boows-whitespace-l3) 0 0 0;
  display: flex;
  flex-direction: column;
  gap: var(--boows-whitespace-l2);
}

.boows-popup-sidebar-steps > li {
  display: flex;
  align-items: center;
  gap: var(--boows-whitespace-l2);
  color: var(--boows-col-text-soft, #777);
  font-weight: 500;
}

.boows-popup-sidebar-steps > li .step-marker {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid currentColor;
  font-size: 0.85em;
  flex-shrink: 0;
}

.boows-popup-sidebar-steps > li.is-done {
  color: var(--boows-col-secondary, #2aa198);
}
.boows-popup-sidebar-steps > li.is-done .step-marker {
  background: var(--boows-col-secondary, #2aa198);
  color: #fff;
  border-color: var(--boows-col-secondary, #2aa198);
}

.boows-popup-sidebar-steps > li.is-active {
  color: var(--boows-col-text, #222);
}
.boows-popup-sidebar-steps > li.is-active .step-marker {
  border-color: var(--boows-col-secondary, #2aa198);
  color: var(--boows-col-secondary, #2aa198);
}

/* Alternative Step-Variante: einzelne aktive Step-Karte (Highlight-Box)
   Geeignet fuer einseitige Wizards ohne lange Schritt-Liste. */
.boows-popup-sidebar-step-card {
  display: flex;
  align-items: center;
  gap: var(--boows-whitespace-l2);
  padding: var(--boows-whitespace-l2) var(--boows-whitespace-l3);
  border-radius: var(--boows-border-radius);
  background: var(--boows-col-primary-10, #e6f6f5);
  color: var(--boows-col-primary, #08a29a);
  font-weight: 600;
  border: 1px solid var(--boows-col-primary-20, #ceeceb);
  margin-top: var(--boows-whitespace-l3);
}

body.boows-rounded .boows-popup-sidebar-step-card {
  border-radius: var(--boows-default-border-container);
}

/* Untertitel-Helper (z.B. Mandant/Projekt unter dem Sidebar-Titel) */
.boows-popup-sidebar-subtitle {
  font-size: 0.85em;
  color: var(--boows-col-text-60);
  margin: 4px 0 0 0;
}

/* Footer-Hint im Sidebar-Bereich: dezent, Info-Icon + Text */
.boows-popup-sidebar-hint {
  display: flex;
  align-items: flex-start;
  gap: var(--boows-whitespace-l2);
  margin-top: auto; /* drueckt den Hinweis an die Unterkante */
  padding: var(--boows-whitespace-l2) var(--boows-whitespace-l3);
  background: rgba(0,0,0,0.03);
  border-radius: var(--boows-border-radius);
  color: var(--boows-col-text-60);
  font-size: 0.85em;
  line-height: 1.4;
}

.boows-popup-sidebar-hint .material-icons,
.boows-popup-sidebar-hint .material-symbols-outlined {
  font-size: 18px;
  line-height: 1.4;
  flex-shrink: 0;
  color: var(--boows-col-text-40);
}

body.boows-rounded .boows-popup-sidebar-hint {
  border-radius: var(--boows-default-border-container);
}