/* ======================================================= */
/* Passwortprüfung                                         */
/* ======================================================= */
*, *::before, *::after {
  box-sizing: border-box;
}

/* 1. BEIDE HAUPT-BUTTONS (Weiter & Registrieren) auf 100% zwingen */
a.cbTabsStepByStepNext,
input[type="submit"].cbTabsStepByStepNext,
button.cbTabsStepByStepNext,
div.cbStepByStepRight a,
div.cbStepByStepRight input,
div.cbStepByStepRight button,
#cbSubForm input[type="submit"] {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
    float: none !important;
    clear: both !important;
    position: relative !important;
    z-index: 1 !important; /* Niedrigerer Index als der Zurück-Button */
}

/* 2. DEN ZURÜCK-BUTTON auf 100% zwingen & Klick-Ebene für Mobilgeräte retten */
a.cbTabsStepByStepPrevious,
div.cbStepByStepLeft a {
    display: block !important;
    width: 100% !important;
    min-width: 100% !important;
    text-align: center !important;
    box-sizing: border-box !important;
    margin-bottom: 15px !important;
    margin-top: -35px !important; /* Behält Ihre gewünschte optische Position bei */
    position: relative !important; /* Ermöglicht die Nutzung von z-index */
    z-index: 999 !important;       /* Holt den Button nach ganz oben, damit er mobil klickbar ist */
    pointer-events: auto !important; /* Erzwingt, dass Touch-Gesten registriert werden */
}

/* 3. DIE CONTAINER ALS NEUE ZEILEN DEFINIEREN */
div.cbStepByStepRight, 
div.cbStepByStepLeft,
div[class*="cbStepByStep"] {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    clear: both !important; 
    padding: 0 !important;
    margin: 0 !important;
}

/* 4. REIHENFOLGE FESTLEGEN (Haupt-Button oben, Zurück-Button direkt darunter) */
div.row:has(> .cbStepByStepRight),
div.row:has(> .cbStepByStepLeft),
form:has(.cbStepByStepRight) {
    display: flex !important;
    flex-direction: column !important; 
}

/* Rechter Container (Haupt-Button) nach oben */
div.cbStepByStepRight {
    order: 1 !important;
    margin-bottom: 10px !important; 
}

/* Linker Container (ZURÜCK) nach unten */
div.cbStepByStepLeft {
    order: 2 !important;
    margin-top: 0 !important;
}

/* ======================================================= */
/* 1. GLOBALE STRUKTUR & FORMULARFELDER                    */
/* ======================================================= */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="password"],
input[type="number"],
input[type="url"],
input[type="search"],
input:not([type]),
select,
textarea {
    height: 45px !important;              /* Zwingt das Feld auf eine feste, saubere Höhe */
    padding-top: 10px !important;         /* Passt den inneren Abstand oben an */
    padding-bottom: 10px !important;      /* Passt den inneren Abstand unten an */
    box-sizing: border-box !important;    /* Verhindert, dass Rahmen das Feld vergrößern */
    font-size: 16px !important;           /* Gleicht die Schriftgröße an */
    line-height: normal !important;       /* Normalisiert die Texthöhe */
  width: 100% !important;
  max-width: 100% !important;
  display: block !important;
  background-color: #f5f5f5;
  border: 1px solid #ccc;
  transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}

input:focus,
select:focus,
textarea:focus {
  background-color: #ffffff;
  border-color: #007bff;
  outline: none;
}

.is-invalid-field { border-color: #dc3545 !important; }
.is-valid-field { border-color: #198754 !important; }

/* ======================================================= */
/* 1b. DINAMISCHE PASSWORT-WRAPPER (Auge & Stärkemessung)   */
/* ======================================================= */
.password-wrapper {
  position: relative;
  width: 100%;
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important; 
  margin-bottom: 5px !important; /* Knackiger Standardabstand */
}

/* Zieht das nachfolgende Feld aktiv hoch, um CB-Leerräume auszuhebeln */
.password-wrapper.has-strength {
  margin-bottom: -5px !important; 
}

.password-wrapper input {
  flex: 1 1 auto;
  width: calc(100% - 40px) !important;
  padding-right: 40px !important; 
  height: 50px !important; 
}

/* Das Auge absolut und unabhängig von der Containerhöhe zentrieren */
.password-wrapper .password-toggle-icon {
  position: absolute;
  right: 12px;
  top: 0;
  bottom: 0;
  height: 20px; 
  max-height: 20px;
  margin-top: 15px; 
  margin-bottom: auto;
  cursor: pointer;
  z-index: 10;
  display: flex;
  align-items: center;
  transition: right 0.2s ease;
}

/* Schiebt das Auge nach links, falls die rote CB-Fehlermeldung erscheint */
.password-wrapper input.is-invalid ~ .password-toggle-icon,
.password-wrapper input.invalid ~ .password-toggle-icon,
.password-wrapper .cb-error ~ .password-toggle-icon,
.password-wrapper :not(input):not(.password-toggle-icon):not([id*="strength"]):not([class*="strength"]) ~ .password-toggle-icon {
  right: 38px !important; 
}

/* Die Joomla-Stärkemessung bricht sauber innerhalb des Containers um */
.password-wrapper [id*="strength"],
.password-wrapper [class*="strength"],
.password-wrapper .cb-password-strength {
  flex: 0 0 100% !important;
  width: 100% !important;
  margin-top: 4px !important;
  margin-bottom: 0px !important;
  order: 3;
}

.password-wrapper .eye-icon {
  width: 20px;
  height: 20px;
  color: #6c757d;
  transition: color 0.2s ease;
}

.password-wrapper .password-toggle-icon:hover .eye-icon {
  color: #333333;
}

.password-wrapper .d-none {
  display: none !important;
}

/* ======================================================= */
/* 2. INFODATEI & LISTENELEMENTE (COLLAPSE-FIX)            */
/* ======================================================= */
#password-requirements,
#req-success-message {
  font-size: 0.85rem;
  width: 100% !important;
  max-width: 100% !important;
  background-color: #f8f9fa;
  overflow: hidden;
  
  /* Absoluter Kollaps ohne Reste von Padding oder Border */
  opacity: 0;
  visibility: hidden;
  max-height: 0 !important;
  padding: 0 0.5rem !important;
  margin-top: 0px !important;
  margin-bottom: 0px !important;
  border: 0px solid transparent !important;
  
  transition: opacity 0.25s ease, max-height 0.25s ease, padding 0.25s ease, margin 0.25s ease, visibility 0.25s step-end;
}

/* Schaltet Sichtbarkeit, Abstände und Rahmen erst bei .show wieder ein */
#password-requirements.show,
#req-success-message.show {
  opacity: 1;
  visibility: visible;
  padding: 0.5rem !important;
  margin-top: 15px !important;
  border: 1px solid #dee2e6 !important;
  border-radius: 0.25rem;
  transition: opacity 0.25s ease, max-height 0.25s ease, padding 0.25s ease, margin 0.25s ease, visibility 0s;
}

#password-requirements.show { 
  max-height: 500px !important; 
  margin-bottom: 15px !important;
}

#req-success-message.show { 
  max-height: 60px !important; 
  margin-bottom: 5px !important;
}

#password-requirements .req-title {
  margin-bottom: 5px;
}

#password-requirements ul {
  width: 100% !important;
  max-width: 100% !important;
  list-style: none;
  padding-left: 0;
  margin: 0;
}

#password-requirements ul li {
  font-variant-emoji: text !important; /* Moderner Standard, um Emojis als Text zu erzwingen */
}

/* Erzwingt die exakten Farbtöne plattformübergreifend */
.req-invalid { 
  color: #dc3545 !important; 
}
.req-valid { 
  color: #198754 !important; 
}

#req-success-message {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  min-height: 0;
  color: #198754;
  font-weight: normal;
}

#req-success-message.show {
  min-height: 40px;
}

/* ======================================================= */
/* 3. BUTTONS & DESKTOP LAYOUT                             */
/* ======================================================= */
.btn-group.mt-1.mb-2 {
  display: flex;
  width: 100%;
  gap: 4px;
}

.btn-group.mt-1.mb-2 .btn {
  flex: 1 1 auto;
  text-align: center;
  white-space: nowrap;
}

button.cbRegistrationSubmit {
  display: block;
  width: 65%;
  max-width: 65%;
  padding: 14px 20px;
  font-size: 16px;
  height: 50px;
  max-height: 50px;
  box-sizing: border-box;
  text-align: center;
  margin: 15px auto 40px 0 !important; 
  transition: margin-top 0.2s ease, padding-top 0.2s ease;
}

.cbFormRow:has(button.cbRegistrationSubmit),
div:has(> button.cbRegistrationSubmit) {
  transition: margin-top 0.2s ease, padding-top 0.2s ease;
}

/* ======================================================= */
/* 4. REINE MOBILE VERSION (Smartphones)                   */
/* ======================================================= */
@media (max-width: 767px) {
  .btn-group.mt-1.mb-2 {
    flex-direction: column;
    gap: 8px;
  }

  .btn-group.mt-1.mb-2 .btn {
    width: 100%;
    white-space: normal;
    padding: 10px 15px;
    border-radius: 4px;
  }

  button.cbRegistrationSubmit {
    width: 100%;
    max-width: 100%;
    margin-bottom: 40px;
    margin-top: 15px !important; 
  }
}

/* ======================================================= */
/* 5. REITER GANZ OBEN (AKTIV GRÜN VS. HELLGRAU GESPERRT)   */
/* ======================================================= */
.nav-tabs .nav-item .nav-link.active,
.nav-tabs .nav-link.active,
ul.nav-tabs a.active,
.cb-tabs-nav a.active { 
  background-color: #79A34C !important; 
  color: #ffffff !important;            
  border-bottom: 3px solid #5d8237 !important; 
  font-weight: normal !important;       
  pointer-events: auto !important;
  cursor: pointer !important;
}