/* Styling für das per Mautic generate.js zur Laufzeit injizierte Kontaktformular
   (#mauticform-kontakt auf /kontakt/). Mautic liefert die Feld-Markup-Struktur
   selbst aus (mauticform-row/-label/-input/...), wir überschreiben hier nur das
   Aussehen, damit es zum restlichen Bootstrap-Look der Seite passt. */

.mauticform-innerform {
  max-width: 100%;
}

/* ID-Scope + !important: Mauticform generate.js lädt sein eigenes Standard-
   Stylesheet erst zur Laufzeit nach unserem <link>, mit eigenen Regeln für
   .mauticform-row/.half-row (u.a. float-basierte Breitenaufteilung). Ohne
   diese Absicherung wird unser Grid von Mautics Nachlade-CSS überschrieben
   (beobachtet: Felder fallen auf volle Breite zurück, kein 2-Spalten-Grid). */
#mauticform_wrapper_kontaktsafeserverde .mauticform-page-wrapper {
  display: grid !important;
  grid-template-columns: repeat(12, 1fr) !important;
  column-gap: 1.5rem;
  row-gap: 0;
}

#mauticform_wrapper_kontaktsafeserverde .mauticform-row {
  float: none !important;
  width: auto !important;
  grid-column: span 12 !important;
  margin-bottom: 1rem;
}

#mauticform_wrapper_kontaktsafeserverde .half-row {
  grid-column: span 6 !important;
}

@media (max-width: 47.9375rem) {
  #mauticform_wrapper_kontaktsafeserverde .half-row {
    grid-column: span 12 !important;
  }
}

.mauticform-label {
  display: inline-block;
  margin-bottom: 0.5rem;
  font-weight: 700;
}

.mauticform-required .mauticform-label::after,
.mauticform-required .mauticform-checkboxgrp-label::after {
  content: " *";
  color: #AB2E4C;
}

.mauticform-input,
.mauticform-textarea {
  display: block;
  width: 100%;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: #212529;
  background-color: #FFFFFF;
  background-clip: padding-box;
  border: 1px solid #CED4DA;
  border-radius: 0.25rem;
  transition: border-color 0.05s ease-in-out, box-shadow 0.05s ease-in-out;
}

.mauticform-textarea {
  min-height: 6rem;
  resize: vertical;
}

.mauticform-input:focus,
.mauticform-textarea:focus {
  color: #212529;
  background-color: #FFFFFF;
  border-color: #0A6A44;
  outline: 0;
  box-shadow: 0 0 0 0.25rem rgba(10, 106, 68, 0.25);
}

.mauticform-freehtml p {
  margin-bottom: 1rem;
}

.mauticform-freehtml a {
  color: #AB2E4C;
}

.mauticform-checkboxgrp-row {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

.mauticform-checkboxgrp-checkbox {
  margin-top: 0.25rem;
  width: 1rem;
  height: 1rem;
  accent-color: #0A6A44;
  flex-shrink: 0;
}

.mauticform-checkboxgrp-label {
  font-weight: 400;
  margin-bottom: 0;
}

.mauticform-button-wrapper {
  margin-top: 0.5rem;
}

/* ID-Scope + !important aus demselben Grund wie beim Grid oben: Mautics
   eigenes .btn-ghost-Hover (aus dem Nachlade-CSS von generate.js) überschreibt
   sonst dieses Hover wieder. Werte 1:1 aus .btn-primary:hover im
   web.assets_frontend.min.css-Bundle übernommen. */
#mauticform_wrapper_kontaktsafeserverde .mauticform-button {
  display: inline-block;
  padding: 0.5rem 1.5rem;
  font-size: 1.125rem;
  line-height: 1.5;
  color: #FFFFFF;
  background-color: #0A6A44;
  border: 1px solid #0A6A44;
  border-radius: 0.25rem;
  cursor: pointer;
}

#mauticform_wrapper_kontaktsafeserverde .mauticform-button:hover {
  color: #FFFFFF !important;
  background-color: #095a3a !important;
  border-color: #085536 !important;
}

.mauticform-errormsg {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: #842029;
}

.mauticform-error {
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid #F5C2C7;
  border-radius: 0.25rem;
  color: #842029;
  background-color: #F8D7DA;
}

.mauticform-error:empty {
  display: none;
}

.mauticform-message {
  padding: 0.75rem 1.25rem;
  margin-bottom: 1rem;
  border: 1px solid #BFE5C7;
  border-radius: 0.25rem;
  color: #186429;
  background-color: #D4EDDA;
}

.mauticform-message:empty {
  display: none;
}