/* WS-Form-Formulare (Kontakt und Newsletter) an die Seite angeglichen.
   Vorgefunden am 24.08.2026:
     - Absendeknopf in #ad3f68, dem Weinrot der Schwesterseite
       bayern-pflege-wohnen.de. Auf dieser Seite ist die Hausfarbe Ocker.
     - Felder und Knopf nur 41px hoch, also unter der Zielgroesse von 44px.
     - Felder mit 1px schwarzem Rahmen und 4px Radius, waehrend alles
       andere auf der Seite 2px in der Hausfarbe und 8px Radius nutzt.
     - Kein sichtbarer Fokusring auf den Feldern. */

/* ---------- Hausfarben in die Variablen von WS Form ---------- */
/* WS Form ist variablengesteuert und laedt seine eigenen Regeln NACH
   diesem Stylesheet. Gegen Selektoren anzukaempfen ist der falsche Weg,
   die Variablen sind der vorgesehene Anpassungspunkt. Alle #ad3f68-Werte
   stammen aus der Schwesterseite bayern-pflege-wohnen.de. */
.wsf-form {
  --wsf-field-border-color: #d9d9d9;
  --wsf-field-border-color-hover: #a6a6a6;
  --wsf-field-border-color-focus: var(--primary, #906111);
  --wsf-field-border-color-invalid: #a32e27;
  --wsf-field-border-width: 2px;
  --wsf-field-border-radius: 8px;

  --wsf-field-button-border-radius: 8px;
  --wsf-field-button-border-width: 2px;

  --wsf-field-button-primary-color-background: var(--primary, #906111);
  --wsf-field-button-primary-color-background-hover: var(--primary-dark, #6d4a0d);
  --wsf-field-button-primary-color-background-focus: var(--primary-dark, #6d4a0d);
  --wsf-field-button-primary-border-color: var(--primary, #906111);
  --wsf-field-button-primary-border-color-hover: var(--primary-dark, #6d4a0d);
  --wsf-field-button-primary-border-color-focus: var(--primary-dark, #6d4a0d);

  --wsf-field-button-danger-color-background: #a32e27;
  --wsf-field-button-danger-border-color: #a32e27;
}

/* ---------- Breite ---------- */
/* Das Formular lief ueber die vollen 1280px des Containers. Eingabefelder
   in dieser Breite sind unangenehm zu treffen und sehen nach Fehler aus.
   700px entspricht der Zeilenlaenge, die auch der Fliesstext haelt. */
.wsf-form.wsf-form-canvas {
  max-inline-size: 700px;
}

/* ---------- Felder ---------- */
.wsf-form input.wsf-field,
.wsf-form select.wsf-field,
.wsf-form textarea.wsf-field {
  min-block-size: 46px;
  padding: 11px 14px;
  color: var(--base-dark, #404040);
  /* 16px verhindert, dass iOS beim Antippen hineinzoomt. */
  font-size: var(--text-m, 1.6rem);
  font-family: inherit;
}

.wsf-form textarea.wsf-field {
  min-block-size: 132px;
  line-height: 1.6;
}

/* Fokus deutlich sichtbar, zusaetzlich zum Rahmen (BITV 9.2.4.7). */
.wsf-form input.wsf-field:focus-visible,
.wsf-form select.wsf-field:focus-visible,
.wsf-form textarea.wsf-field:focus-visible {
  outline: 3px solid var(--base-ultra-dark, #1a1a1a);
  outline-offset: 2px;
}

/* ---------- Beschriftungen ---------- */
.wsf-form label.wsf-label {
  margin-block-end: 6px;
  font-weight: 600;
  color: var(--base-dark, #404040);
}

/* Verweise im Formular in der Hausfarbe, unterstrichen.
   Element plus zwei Klassen, sonst gewinnt die spaeter geladene Regel
   von WS Form mit dem Weinrot der Schwesterseite. */
.wsf-form.wsf-form-canvas label.wsf-label a,
.wsf-form.wsf-form-canvas .wsf-field-wrapper a {
  color: var(--primary-semi-dark, #976612);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.wsf-form.wsf-form-canvas label.wsf-label a:hover,
.wsf-form.wsf-form-canvas label.wsf-label a:focus-visible {
  color: var(--primary-dark, #6d4a0d);
}

/* ---------- Ankreuzfelder ---------- */
/* WS Form legt das echte Kaestchen absolut an den linken Rand der Zeile
   und stellt die Beschriftung daneben. Weil das Kaestchen damit aus dem
   Textfluss ist, begann der Text an derselben Stelle und lag auf dem
   Kaestchen. Der Freiraum muss deshalb als Innenabstand an der
   Beschriftung stehen: 22px Kaestchen plus 12px Abstand. */
.wsf-form input[type="checkbox"] + label.wsf-label,
.wsf-form input[type="radio"] + label.wsf-label {
  /* !important: WS Form setzt die Innenabstaende der Beschriftung in
     einer spaeter geladenen Regel zurueck. */
  padding-inline-start: 34px !important;
  margin-block-end: 0;
  font-weight: 400;
  /* Klickflaeche auf Zielgroesse bringen */
  display: inline-flex;
  align-items: center;
  min-block-size: 44px;
}

.wsf-form input[type="checkbox"],
.wsf-form input[type="radio"] {
  inline-size: 22px;
  block-size: 22px;
  min-block-size: 0;
  accent-color: var(--primary, #906111);
}

/* ---------- Absendeknopf ---------- */
.wsf-form.wsf-form-canvas button.wsf-button,
.wsf-form.wsf-form-canvas input.wsf-button {
  min-block-size: 48px;
  padding: 12px 28px;
  font-family: inherit;
  font-size: var(--text-m, 1.6rem);
  font-weight: 600;
  cursor: pointer;
}

.wsf-form.wsf-form-canvas button.wsf-button:focus-visible,
.wsf-form.wsf-form-canvas input.wsf-button:focus-visible {
  outline: 3px solid var(--base-ultra-dark, #1a1a1a);
  outline-offset: 2px;
}

/* ---------- Meldungen ---------- */
.wsf-form .wsf-field-message,
.wsf-form .wsf-message-error {
  color: #a32e27;
  font-weight: 600;
}

.wsf-form input.wsf-field[aria-invalid="true"],
.wsf-form textarea.wsf-field[aria-invalid="true"],
.wsf-form select.wsf-field[aria-invalid="true"] {
  /* Fehler nicht nur ueber Farbe: der Rahmen wird zusaetzlich dicker. */
  border-width: 3px;
}

/* ---------- Kontaktangaben mit Symbol ---------- */
.kontakt-icon-box {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.kontakt-icon-box i {
  color: var(--primary, #906111);
  flex: 0 0 auto;
}

.kontakt-icon-box a {
  color: var(--base-dark, #404040);
  text-decoration: underline;
  text-underline-offset: 0.15em;
}

.kontakt-icon-box a:hover,
.kontakt-icon-box a:focus-visible {
  color: var(--primary, #906111);
}