.troi-demo-form {
    max-width: 800px;
    margin: 50px auto;
    color: white;
    padding: 10px;
}

.troi-demo-form > div {
    margin-bottom: 10px;
}

.troi-demo-form input {
    border-color: white !important;
}

.troi-demo-form #domain {
    max-width: 190px;
}

.troi-demo-form label {
    min-width: 200px;
}

.troi-demo-form.black {
    color: #000000;
}

.troi-demo-form.black input[type="text"],
.troi-demo-form.black input[type="email"]
{
    color: #000000;
    background: #FFFFFF;
    transition: all 0.3s ease-in-out;
    border: 1px solid #b1b1b1 !important;
    max-width: 419px;
}
.troi-demo-form.black input[type="email"]:hover,
.troi-demo-form.black input[type="email"]:focus,
.troi-demo-form.black input[type="text"]:hover,
.troi-demo-form.black input[type="text"]:focus
{
    color: #000000;
    background: #FFFFFF;
    border-color: grey;
}

.preinput {
    border-left: 1px solid #b1b1b1 !important;
    border-top: 1px solid #b1b1b1 !important;
    border-bottom: 1px solid #b1b1b1 !important;
	padding: 7px 11px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    margin-right: -13px;
    color: #4d4d4d;
}
.postinput {
    border-right: 1px solid #b1b1b1 !important;
    border-top: 1px solid #b1b1b1 !important;
    border-bottom: 1px solid #b1b1b1 !important;
	padding: 7px 11px;
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px;
    margin-right: -13px;
    color: #4d4d4d;
}

#userLanguageCode,
#userGender {
    padding: 8px 20px;

}

#userSubdomain {
    max-width: 160px;
}

#success-message {
    display: none;
    text-align: left;
    padding: 15px;
    color: #237a3b;
    border: 1px solid #9fd3ad;
    border-radius: 8px;
    background: transparent;
    max-width: 560px;
    margin: 24px auto;
    white-space: pre-line;
}

#error-message {
    display: none;
    text-align: left;
    padding: 15px;
    color: #bd2727;
    border: 1px solid #e6a2a2;
    border-radius: 8px;
    background: transparent;
}

#troi-demo-form #error-message:empty {
    display: none !important;
}

@media only screen and (max-width: 575px) {


    .troi-demo-form label {
        min-width: 200px;
        width: 100%;
    }

    .preinput {
        font-size: 10px;
        padding: 16px 11px 12px;
        line-height: 1;
    }
    .postinput {
        font-size: 10px;
        padding: 16px 11px 12px;
        line-height: 1;
    }

}

/* --- NEU - Feldzeilen im Formular sauber ausrichten --- */
.troi-demo-form > div {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

/* Spaltenbreite für Labels (Desktop) */
.troi-demo-form > div > label {
  display: inline-block;
  width: 180px;
  min-width: 180px;
  margin: 0;
  font-weight: 500;
  color: #333;
}

/* Inputs/Selects füllen den restlichen Platz */
.troi-demo-form input,
.troi-demo-form select {
  flex: 1 1 auto;
  box-sizing: border-box;
}

.troi-demo-form select {
    border-color: #b1b1b1;
    border-radius: 5px;
    padding: 11px 10px !important;
}

/* Domain-Zeile: Prefix/Suffix bleiben kompakt */
.troi-demo-form .preinput,
.troi-demo-form .postinput {
  flex: 0 0 auto;
}

/* Subdomain-Feld darf wachsen */
#userSubdomain { 
  flex: 1 1 auto; 
  max-width: none;
}

.troi-demo-form--simple,
.troi-demo-form--extended {
  width: min(100%, 484px);
  max-width: 484px;
  margin: 34px auto;
  padding: 40px 37px 42px;
  box-sizing: border-box;
  color: #22303c;
  background: #ffffff;
  border: 1px solid #e6edf3;
  border-radius: 16px;
  box-shadow: 0 18px 40px rgba(35, 49, 63, 0.14);
}

.troi-demo-form--extended {
  width: min(100%, 560px);
  max-width: 560px;
}

.troi-demo-form--simple > div:not(#error-message),
.troi-demo-form--extended > div:not(#error-message) {
  display: block !important;
  clear: both;
  margin-bottom: 18px;
}

#troi-demo-form.troi-demo-form--simple > div:not(#error-message),
#troi-demo-form.troi-demo-form--extended > div:not(#error-message) {
  display: block !important;
}

#troi-demo-form.troi-demo-form--simple .troi-demo-form__intro > *,
#troi-demo-form.troi-demo-form--extended .troi-demo-form__intro > *,
#troi-demo-form.troi-demo-form--simple > div > label:not(.troi-demo-form__privacy-label),
#troi-demo-form.troi-demo-form--extended > div > label:not(.troi-demo-form__privacy-label),
#troi-demo-form.troi-demo-form--simple input[type="email"],
#troi-demo-form.troi-demo-form--extended input[type="email"],
#troi-demo-form.troi-demo-form--extended input[type="text"],
#troi-demo-form.troi-demo-form--extended select {
  display: block !important;
  float: none !important;
  clear: both;
  width: 100%;
}

#troi-demo-form.troi-demo-form--extended .troi-demo-form__domain-input {
  display: flex !important;
  clear: both;
  width: 100%;
}

#troi-demo-form.troi-demo-form--extended .troi-demo-form__domain-input #userSubdomain {
  clear: none;
  width: auto;
}

.troi-demo-form--simple .troi-demo-form__intro,
.troi-demo-form--extended .troi-demo-form__intro {
  display: block !important;
  clear: both;
  margin-bottom: 29px;
}

.troi-demo-form--simple .troi-demo-form__intro h2,
.troi-demo-form--extended .troi-demo-form__intro h2 {
  display: block;
  float: none;
  clear: both;
  width: 100%;
  margin: 0 0 10px;
  color: #22303c;
  font-size: 24px;
  line-height: 1.18;
  font-weight: 800;
  letter-spacing: 0;
}

.troi-demo-form--simple .troi-demo-form__intro p,
.troi-demo-form--extended .troi-demo-form__intro p {
  display: block;
  float: none;
  clear: both;
  width: 100%;
  margin: 0;
  color: #8b97a3;
  font-size: 14px;
  line-height: 1.4;
  font-weight: 700;
}

.troi-demo-form--simple > div > label:not(.troi-demo-form__privacy-label),
.troi-demo-form--extended > div > label:not(.troi-demo-form__privacy-label) {
  display: block !important;
  float: none;
  clear: both;
  width: 100%;
  min-width: 0;
  margin: 0 0 10px;
  color: #5d6975;
  font-size: 14px;
  line-height: 1.35;
  font-weight: 700;
}

.troi-demo-form--simple input[type="email"],
.troi-demo-form--extended input[type="email"],
.troi-demo-form--extended input[type="text"],
.troi-demo-form--extended select {
  display: block !important;
  float: none;
  clear: both;
  width: 100%;
  max-width: none !important;
  height: 58px;
  padding: 0 16px;
  color: #22303c;
  background: #ffffff;
  border: 1px solid #d7e0e8 !important;
  border-radius: 8px;
  box-shadow: none;
  font-size: 16px;
  font-weight: 600;
  line-height: 58px;
}

.troi-demo-form--extended select {
  padding-right: 36px !important;
  line-height: normal;
}

.troi-demo-form--simple input[type="email"]::placeholder,
.troi-demo-form--extended input[type="email"]::placeholder,
.troi-demo-form--extended input[type="text"]::placeholder {
  color: #999999;
  opacity: 1;
}

.troi-demo-form--simple input[type="email"]:focus,
.troi-demo-form--extended input[type="email"]:focus,
.troi-demo-form--extended input[type="text"]:focus,
.troi-demo-form--extended select:focus {
  border-color: #58a2ff !important;
  outline: 2px solid rgba(88, 162, 255, 0.18);
  outline-offset: 0;
}

.troi-demo-form--extended .troi-demo-form__domain-input {
  display: flex;
  align-items: stretch;
  width: 100%;
}

.troi-demo-form--extended .troi-demo-form__domain-input .preinput,
.troi-demo-form--extended .troi-demo-form__domain-input .postinput {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 0 12px;
  color: #5d6975;
  background: #f6f8fa;
  border-color: #d7e0e8 !important;
  font-size: 14px;
  font-weight: 600;
  line-height: 58px;
  white-space: nowrap;
}

.troi-demo-form--extended .troi-demo-form__domain-input .preinput {
  border-right: 0 !important;
  border-radius: 8px 0 0 8px;
}

.troi-demo-form--extended .troi-demo-form__domain-input .postinput {
  border-left: 0 !important;
  border-radius: 0 8px 8px 0;
}

.troi-demo-form--extended .troi-demo-form__domain-input #userSubdomain {
  flex: 1 1 auto;
  min-width: 92px;
  border-radius: 0;
}

.troi-demo-form--simple input[type="submit"],
.troi-demo-form--extended input[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: none !important;
  height: 62px;
  margin: 0;
  padding: 0 16px !important;
  color: #ffffff;
  background: #5a9df3;
  border: 0 !important;
  border-radius: 8px;
  box-shadow: 0 8px 16px rgba(67, 144, 240, 0.26);
  font-size: 16px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

#troi-demo-form.troi-demo-form--simple input[type="submit"],
#troi-demo-form.troi-demo-form--extended input[type="submit"] {
  display: flex !important;
  align-items: center;
  justify-content: center;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 1.2 !important;
  box-sizing: border-box;
}

.troi-demo-form--simple input[type="submit"]:hover,
.troi-demo-form--simple input[type="submit"]:focus,
.troi-demo-form--extended input[type="submit"]:hover,
.troi-demo-form--extended input[type="submit"]:focus {
  background: #4f93eb;
  box-shadow: 0 9px 18px rgba(67, 144, 240, 0.32);
}

.troi-demo-form--simple input[type="submit"]:active,
.troi-demo-form--extended input[type="submit"]:active {
  transform: translateY(1px);
}

.troi-demo-form .troi-demo-form__privacy > label,
.troi-demo-form .troi-demo-form__privacy-label {
  width: 100%;
  min-width: 0;
}

.troi-demo-form--simple .troi-demo-form__privacy,
.troi-demo-form--extended .troi-demo-form__privacy {
  display: block;
  margin: 20px 0 0;
}

.troi-demo-form--simple .troi-demo-form__privacy-label,
.troi-demo-form--extended .troi-demo-form__privacy-label {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 0;
  color: #8b97a3;
  font-size: 13px;
  line-height: 1.45;
  font-weight: 700;
  cursor: pointer;
}

.troi-demo-form--simple .troi-demo-form__privacy-label input[type="checkbox"],
.troi-demo-form--extended .troi-demo-form__privacy-label input[type="checkbox"] {
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 1px 0 0;
  border: 1px solid #a9b2bb !important;
  border-radius: 2px;
  cursor: pointer;
}

.troi-demo-form--simple .troi-demo-form__privacy-label span,
.troi-demo-form--extended .troi-demo-form__privacy-label span {
  display: block;
  width: 100%;
}

.troi-demo-form--simple .troi-demo-form__privacy-label a,
.troi-demo-form--extended .troi-demo-form__privacy-label a {
  color: #5a9df3;
  font-weight: 800;
  text-decoration: none;
}

.troi-demo-form--simple .troi-demo-form__privacy-label a:hover,
.troi-demo-form--simple .troi-demo-form__privacy-label a:focus,
.troi-demo-form--extended .troi-demo-form__privacy-label a:hover,
.troi-demo-form--extended .troi-demo-form__privacy-label a:focus {
  text-decoration: underline;
}

@media only screen and (max-width: 575px) {

  .troi-demo-form > div {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
  }

  .troi-demo-form > div > label {
    width: 100% !important;
    min-width: 0 !important;
  }

  .troi-demo-form > div > input,
  .troi-demo-form > div > select,
  .troi-demo-form > div > textarea {
    flex: 1 1 100% !important;
    max-width: none !important;
    min-width: 0 !important;
  }

  .troi-demo-form .preinput,
  .troi-demo-form .postinput {
    font-size: 10px;
    line-height: 1;
  }

  .troi-demo-form--simple,
  .troi-demo-form--extended {
    width: calc(100% - 28px);
    padding: 32px 28px 34px;
  }

  .troi-demo-form--simple .troi-demo-form__intro h2,
  .troi-demo-form--extended .troi-demo-form__intro h2 {
    font-size: 22px;
  }

  .troi-demo-form--simple input[type="submit"],
  .troi-demo-form--extended input[type="submit"] {
    white-space: normal;
    line-height: 1.25;
  }

  .troi-demo-form--extended .troi-demo-form__domain-input {
    flex-wrap: wrap;
  }

  .troi-demo-form--extended .troi-demo-form__domain-input .preinput,
  .troi-demo-form--extended .troi-demo-form__domain-input .postinput,
  .troi-demo-form--extended .troi-demo-form__domain-input #userSubdomain {
    flex: 1 1 100%;
    border: 1px solid #d7e0e8 !important;
    border-radius: 8px;
  }

  .troi-demo-form--extended .troi-demo-form__domain-input .preinput,
  .troi-demo-form--extended .troi-demo-form__domain-input .postinput {
    line-height: 42px;
  }
}