.iusbote-wizard { max-width: 1000px; }

.iusbote-wizard label { display:block; margin-top: 12px; font-weight: 600; }

.iusbote-wizard input,
.iusbote-wizard select,
.iusbote-wizard textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 6px;
}

/* Select separat, weil es sonst gerne “abschneidet” */
.iusbote-wizard select{
  height: 44px;
  line-height: 44px;
  padding-top: 0;
  padding-bottom: 0;
}

.iusbote-nav { display:flex; gap: 10px; margin-top: 18px; }

.iusbote-summary pre {
  background: #f6f6f6;
  padding: 12px;
  border-radius: 8px;
  overflow:auto;
}

.iusbote-intro { margin-top: 60px; }


/* Intro styles */
.iusbote-center { text-align: center; }
.iusbote-lead { margin-top: 10px; }

.iusbote-token-wrap {
  max-width: 420px;
  margin: 0 auto;
}

.iusbote-token-error {
  text-align: center;
  margin-top: 10px;
  min-height: 1.2em;
}

/* Nav immer klickbar nach vorne holen */
.iusbote-nav{
  position: relative;
  z-index: 9999;
}

/* Buttons sicher klickbar machen */
.iusbote-nav .elementor-button,
.iusbote-nav button{
  pointer-events: auto;
}

/* Steps dürfen nicht über die Nav drüberliegen */
.iusbote-steps{
  position: relative;
  z-index: 1;
}

.iusbote-dynamic-actions { display:flex; gap:10px; margin-top:10px; }

/* =========================
   MODAL (Popup) – komplette Konfiguration
   ========================= */

/* Overlay-Container: immer über allem */
#iusbote-wizard .iusbote-modal{
  position: fixed;
  inset: 0;
  z-index: 2147483647 !important; /* über Header/Sticky Menüs */
}

/* Abdunklung */
#iusbote-wizard .iusbote-modal-backdrop{
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 2147483646 !important;
}

/* Dialog-Box: zentriert im Viewport */
#iusbote-wizard .iusbote-modal-box{
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);

  width: min(520px, calc(100vw - 32px));
  background: #fff;
  border-radius: 10px;

  /* Innenraum */
  padding: 18px 18px 22px 18px; /* extra Platz unten gegen Abschneiden */

  /* Höhe begrenzen */
  max-height: 70vh;

  /* Box selbst nicht scrollen – Content scrollt */
  overflow: hidden;

  z-index: 2147483647 !important;
}

/* Scrollbereich (Text/Liste) */
#iusbote-wizard .iusbote-modal-content{
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* Platz für Footer/Close-Button freihalten */
  max-height: calc(70vh - 110px);
}

/* Listenformat */
#iusbote-wizard .iusbote-modal-content ul{
  margin: 10px 0 0 18px;
}

/* Footer/Close-Button Bereich: mittig + Luft unten */
#iusbote-wizard .iusbote-modal-actions{
  display: flex;
  justify-content: center;
  margin-top: 16px;
  padding-bottom: 6px;
}

/* Close Button (optional hübscher) */
#iusbote-wizard .iusbote-modal-close{
  min-width: 140px;
}


/* =========================
   Gruppen + Buttons
   ========================= */
/* Row-Layout: Gruppen + Datenkategorien gleich */
#iusbote-wizard .iusbote-group-row,
#iusbote-wizard .iusbote-cat-node{
  display:flex;
  align-items:center;
  gap:10px;
  margin:6px 0;
}

/* Label/Title-Layout: Gruppen + Datenkategorien gleich */
#iusbote-wizard .iusbote-group-label,
#iusbote-wizard .iusbote-cat-title{
  display:flex;
  align-items:center;
  gap:8px;
  margin:0;
  font-weight:600;
}

.iusbote-group-help{
  width:26px;
  height:26px;
  line-height:24px;
  border-radius:50%;
  border:1px solid #ccc;
  background:#fff;
  cursor:pointer;
  padding:0;
  flex:0 0 auto;
}

.iusbote-group-help:hover{
  border-color:#999;
}

.iusbote-toggle-spacer{
  width:26px;
  height:26px;
  display:inline-block;
}

/* Children-Block soll wie „untereinander gelistete Rows“ wirken */
#iusbote-wizard .iusbote-cat-children{
  margin: 6px 0 10px 0;
}

/* Leaf-Items brauchen die gleiche 26px "Toggle-Spalte" wie die Group-Rows */
#iusbote-wizard .iusbote-cat-item{
  display:flex;
  align-items:center;
  gap:10px;              /* wie group-row */
  margin:6px 0;
  font-weight:600;
}

/* 26px Spacer vorne, damit Ebene 2/3 optisch gleich eingerückt ist wie Step 3 */
#iusbote-wizard .iusbote-cat-item::before{
  content:"";
  width:26px;
  height:26px;
  flex:0 0 26px;
}


/* =========================================================
   Toggle: Hintergrund transparent, Pfeil #12207D (CSS Chevron)
   ========================================================= */
#iusbote-wizard .iusbote-toggle,
#iusbote-wizard .iusbote-cat-toggle,
#iusbote-wizard .iusbote-toggle:hover,
#iusbote-wizard .iusbote-cat-toggle:hover,
#iusbote-wizard .iusbote-toggle:active,
#iusbote-wizard .iusbote-cat-toggle:active,
#iusbote-wizard .iusbote-toggle:focus,
#iusbote-wizard .iusbote-cat-toggle:focus,
#iusbote-wizard .iusbote-toggle:focus-visible,
#iusbote-wizard .iusbote-cat-toggle:focus-visible{
  width:26px;
  height:26px;
  border-radius:6px;

  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;

  border: none !important;
  box-shadow: none !important;
  outline: none !important;

  cursor:pointer;
  padding:0;

  /* Unicode-Zeichen unsichtbar machen */
  font-size:0 !important;
  line-height:0 !important;

  position:relative !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;

  -webkit-appearance:none !important;
  appearance:none !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* Pfeil (Chevron) in #12207D */
#iusbote-wizard .iusbote-toggle::before,
#iusbote-wizard .iusbote-cat-toggle::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:9px;
  height:9px;

  border-right:2px solid #12207D;
  border-bottom:2px solid #12207D;

  transform: translate(-50%,-50%) rotate(-45deg); /* collapsed: rechts */
}

/* Expanded: Pfeil nach unten */
#iusbote-wizard .iusbote-toggle[data-state="expanded"]::before,
#iusbote-wizard .iusbote-cat-toggle[data-state="expanded"]::before{
  transform: translate(-50%,-50%) rotate(45deg);
}


/* Zeilenabstand, sodass Zeilen optische nicht zusammenkleben */
/* Abstand zwischen dynamischen Input-Zeilen (Theme-sicher) */
#iusbote-wizard .iusbote-dynamic-list input{
  display:block;
  margin: 10px 0 0 0 !important;
}

#iusbote-wizard .iusbote-dynamic-list input:first-child{
  margin-top: 0 !important;
}

/* =========================
   Kategorien (Step 2) Tree
   ========================= */
#iusbote-wizard .iusbote-cats{
  margin-top: 8px;
}

#iusbote-wizard .iusbote-cat-node{
  display:flex;
  align-items:center;
  gap:10px;
  margin:8px 0;
}

#iusbote-wizard .iusbote-cat-title{
  flex: 1 1 auto;
}

#iusbote-wizard .iusbote-cat-children{
  margin: 6px 0 10px 0;
}

/* =========================
   Kategorien: Einrückung robust über Container-Nesting
   ========================= */

/* 1. Ebene unter Root */
#iusbote-wizard .iusbote-cats > .iusbote-cat-children{
  padding-left: 18px;
}

/* jede weitere Ebene addiert nochmals 18px */
#iusbote-wizard .iusbote-cats .iusbote-cat-children .iusbote-cat-children{
  padding-left: 18px;
}


/* =========================
   Stepper (oben auf jeder Seite)
   ========================= */
#iusbote-wizard .iusbote-stepper{
  margin: 0 0 80px 0;
}

#iusbote-wizard .iusbote-stepper-track{
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  align-items: start;
}

#iusbote-wizard .iusbote-stepper-line{
  position: absolute;
  left: 10%;
  right: 10%;
  top: 13px;            /* vertikal mittig zu circle */
  height: 2px;
  background: #d9d9d9;
  z-index: 0;
}

#iusbote-wizard .iusbote-stepper-step{
  position: relative;
  z-index: 1;
  text-align: center;
}

#iusbote-wizard .iusbote-stepper-circle{
  width: 28px;
  height: 28px;
  border-radius: 999px;
  border: 2px solid #d9d9d9;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  line-height: 1;
}

#iusbote-wizard .iusbote-stepper-label{
  margin-top: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  padding: 0 6px;
}

/* Active Step */
#iusbote-wizard .iusbote-stepper-step.is-active .iusbote-stepper-circle{
  border-color: #12207D;
  background: #12207D;
  color: #fff;
}

#iusbote-wizard .iusbote-stepper-step.is-active .iusbote-stepper-label{
  color: #12207D;
}

/* Done Steps */
#iusbote-wizard .iusbote-stepper-step.is-done .iusbote-stepper-circle{
  border-color: #12207D;
  color: #12207D;
  background: #fff;
}

#iusbote-wizard .iusbote-stepper-step.is-done .iusbote-stepper-label{
  color: #444;
}

/* Mobil: Labels umbrechen lassen */
@media (max-width: 560px){
  #iusbote-wizard .iusbote-stepper-label{
    font-size: 11px;
    line-height: 1.2;
  }
}


#iusbote-wizard .iusbote-summary-section h3{
  margin: 18px 0 8px;
}

#iusbote-wizard .iusbote-summary-section h4{
  margin: 12px 0 6px;
  font-size: 14px;
}

#iusbote-wizard .iusbote-summary-section ul{
  margin: 0 0 10px 18px;
}

#iusbote-wizard .iusbote-summary-section li{
  margin: 4px 0;
}

#iusbote-wizard .iusbote-empty{
  color: #666;
  font-style: italic;
}

#iusbote-wizard .iusbote-notes{
  background: #f6f6f6;
  padding: 12px;
  border-radius: 8px;
}


#iusbote-wizard .iusbote-judikatur-groups{
  margin-top: 10px;
}

#iusbote-wizard .iusbote-judikatur-group{
  padding: 8px 0;
  border-top: 1px solid #eee;
}

#iusbote-wizard .iusbote-judikatur-group:first-child{
  border-top: none;
}

#iusbote-wizard .iusbote-judikatur-court{
  font-weight: 700;
  margin-bottom: 6px;
}

#iusbote-wizard .iusbote-judikatur-items{
  margin: 0 0 0 18px;
}


#iusbote-wizard .iusbote-summary-section ul{
  margin: 8px 0 0 18px;
}

#iusbote-wizard .iusbote-summary-section li{
  margin: 4px 0;
}


/* NUR Token-Checkbox (andere Labels bleiben wie vorher fett) */
.iusbote-wizard .iusbote-token-renew{
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 400;     /* überschreibt label{font-weight:600} nur hier */
  margin: 16px 0 20px;  /* Abstand zum Button */
}

.iusbote-wizard .iusbote-token-renew-cb{
  width: auto !important;  /* überschreibt input{width:100%} nur hier */
  padding: 0;
  flex: 0 0 auto;
}

.iusbote-wizard .iusbote-token-renew span{
  font-weight: 400;
}


/* ============================================================
   RADIO-BUTTONS
   ============================================================ */

/* Radio-Button selbst (der Kreis) */
.iusbote-wizard input[type="radio"] {
    width: auto !important; 
    height: auto !important;      /* Verhindert Verzerrung */
    min-width: 16px;              /* Mindestgröße für Klickbarkeit */
    min-height: 16px;
    
    margin: 0 !important;         /* Reset der Ränder */
    padding: 0 !important;        /* Reset des Paddings */
    border: none !important;
    border-radius: 50%;           /* Sicherstellen, dass es rund bleibt */
    
    flex: 0 0 auto;               /* Verhindert, dass der Kreis eingequetscht wird */
    cursor: pointer;
    

    -webkit-appearance: radio;
    appearance: radio;
}

/* Label, wenn ein Radiobutton drin steckt */
.iusbote-wizard label:has(input[type="radio"]) {
    display: flex !important;
    align-items: center;          /* Vertikale Zentrierung von Punkt und Text */
    justify-content: flex-start;
    gap: 10px;                    /* Abstand zwischen Punkt und Text */
    
    width: fit-content;           /* Label nimmt nur so viel Platz wie nötig */
    font-weight: 400;
    margin-top: 6px;              /* Kleiner Abstand zwischen den Optionen */
    cursor: pointer;
    line-height: 1.4;
}

/* Speziell für Listen von Radiobuttons untereinander */
.iusbote-wizard label:has(input[type="radio"]) + label:has(input[type="radio"]) {
    margin-top: 8px;
}

/* Fix für das span-Element im Label (Text) */
.iusbote-wizard label:has(input[type="radio"]) span {
    display: inline-block;
    font-weight: normal; 
}