/* Kontaktformular – angepasst an dein Cassiopeia-Design (#010156 Primärfarbe) */
div.fc_outer {
  border: 1px solid var(--border-color); /* #dfe3e7 */
  padding: 20px;
  background-color: #fff; /* heller Hintergrund für guten Kontrast */
  border-radius: var(--border-radius);
  box-shadow: var(--box-shadow-sm);
  margin-bottom: 2rem;
}

div.fc_line {
  box-sizing: border-box;
  margin-top: 12px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
}

div.fc_line label {
  box-sizing: border-box;
  display: inline-block;
  min-height: 38px;
  padding: 0;
  margin: 0 1% 0 0;
  vertical-align: top;
  font-family: var(--body-font-family);
  font-size: 1rem;
  font-weight: 500;
  line-height: 38px;
  color: var(--body-color);
}

div.fc_line label.fc_left {
  text-align: right;
  width: 20%;
}

/* Eingabefelder */
div.fc_line input.fc_input,
div.fc_line textarea.fc_input,
div.fc_line select.fc_input {
  box-sizing: border-box;
  display: inline-block;
  width: 75%;
  max-width: 100%;
  height: 38px !important;
  padding: .6rem 1rem;
  margin: 0;
  vertical-align: top;
  font-family: var(--body-font-family);
  font-size: 1rem;
  background-color: var(--body-bg);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--border-radius);
  transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
}

div.fc_line textarea.fc_input {
  height: auto !important;
  min-height: 100px;
  resize: vertical;
}

div.fc_line select.fc_input {
  padding: .6rem 2.5rem .6rem 1rem;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23353b41' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 16px;
}

/* Hover & Focus */
div.fc_line input.fc_input:hover,
div.fc_line textarea.fc_input:hover,
div.fc_line select.fc_input:hover {
  border-color: #adb5bd;
}

div.fc_line input.fc_input:focus,
div.fc_line textarea.fc_input:focus,
div.fc_line select.fc_input:focus {
  border-color: #010156;
  outline: 0;
  box-shadow: 0 0 0 .25rem #01015640;
}

/* Pflichtfelder */
div.fc_line.fc_req label:after {
  content: "*";
  color: #a51f18; /* danger-Farbe aus deinem Template */
  padding-left: 4px;
  font-weight: bold;
}

/* Fehlerzustand */
div.fc_line.fc_err .fc_input {
  border-color: #a51f18;
}

div.fc_line.fc_err .fc_input:focus {
  border-color: #a51f18;
  box-shadow: 0 0 0 .25rem rgba(165, 31, 24, 0.25);
}

.fc_error {
  display: block;
  font-size: .875rem;
  color: #a51f18;
  margin-left: 21%; /* passt zu label.fc_left */
  margin-top: 4px;
}

.fc_top_error {
  margin-bottom: 15px;
  padding: 10px;
  background-color: #edd2d1;
  border-radius: var(--border-radius);
  color: #a51f18;
}

/* Send-Button */
div.fc_send {
  margin-top: 20px;
  text-align: right;
}

div.fc_send input.fc_button {
  display: inline-block;
  box-sizing: border-box;
  background-color: #010156; /* deine Primärfarbe */
  border: none;
  color: #fff !important;
  padding: .6rem 1.5rem;
  font-size: 1rem;
  font-weight: 500;
  border-radius: var(--border-radius);
  cursor: pointer;
  transition: background-color .15s ease-in-out;
}

div.fc_send input.fc_button:hover {
  background-color: #002; /* dunkler Hover */
}

div.fc_send input.fc_button:focus {
  box-shadow: 0 0 0 .25rem #01015640;
}

div.fc_send input.fc_button:disabled {
  opacity: .65;
  cursor: not-allowed;
}

/* Checkboxen */
div.fc_line input[type="checkbox"],
div.fc_line input[type="radio"] {
  margin-right: 8px;
  margin-top: 10px;
  width: auto;
  height: auto;
}

/* Terms & Conditions */
.fc_toggle_terms {
  color: #224faa;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  margin: 0;
  text-decoration: underline;
}

.terms-frame {
  width: 100%;
  height: 400px;
  background-color: white;
  border: 1px solid var(--border-color);
  border-radius: var(--border-radius);
  margin-top: 10px;
}

/* Responsive Anpassungen */
@media screen and (max-width: 800px) {
  div.fc_line label.fc_left {
    display: block;
    text-align: left;
    width: 100%;
    min-height: auto;
    margin-bottom: 6px;
  }

  div.fc_line input.fc_input,
  div.fc_line textarea.fc_input,
  div.fc_line select.fc_input {
    width: 100%;
  }

  .fc_error {
    margin-left: 0;
  }

  div.fc_send {
    text-align: center;
  }

  div.fc_send input.fc_button {
    width: 100%;
    max-width: 300px;
  }
}

@media screen and (max-width: 600px) {
  div.fc_outer {
    padding: 15px;
  }
}