/* ============================================================================
   Bussola — Kontaktformular "Pflegeeltern werden"

   ACHTUNG rem-Basis: das Theme setzt in academia/css/bootstrap.css
   `html { font-size: 10px }`. In dieser Datei ist 1rem also 10px, und die
   normale Textgroesse ist 1.6rem. Wer hier Werte anpasst und von 16px
   ausgeht, macht das Formular um 37 Prozent zu klein.

   Floating Labels nach dem Muster der .miniplaceholder-Klasse des
   productus-Themes, in reinem CSS ohne Tailwind: das Academia-Theme hat
   keine Design-Tokens, die Farben stehen darum als Variablen hier oben.

   Der Kern des Musters: im Ruhezustand liegt das <label> deckungsgleich
   ueber dem Eingabetext — gleiches Padding, gleiche Schriftgroesse, oben
   und links buendig auf dem Rahmen (top/left 1px). Das Feld hat darum
   gleichmaessiges Padding und keinen aufgeblaehten Kopf. Aktiv wandert das
   Label auf die obere Kante, wird kleiner und bekommt einen weissen
   Hintergrund, der den Rahmen an dieser Stelle freischneidet.

   Drei Punkte, die beim Anpassen leicht kippen:
   1. Das <label> steht im DOM NACH dem Feld (Selektor ~). Wird es davor
      gestellt, wandert es nie hoch.
   2. Jedes Feld braucht placeholder=" " (ein Leerzeichen, nicht leer) —
      daran haengt :placeholder-shown und damit die ganze Mechanik.
   3. Das Label bekommt KEIN right und keine Breite: es soll nur so breit
      sein wie sein Text. Sonst deckt der weisse Hintergrund den ganzen
      oberen Rahmen ab, statt ihn an einer Stelle zu unterbrechen.

   Der Fokus-Ring liegt aussen (box-shadow ohne inset), damit er nicht mit
   dem aufsitzenden Label kollidiert.
   ============================================================================ */

.bussola-contact-form {
  --bussola-primary: #e08900;
  --bussola-ring: rgba(224, 137, 0, 0.4);
  --bussola-text: #2d2d2d;
  --bussola-muted: #767676;
  --bussola-outline: #d0d0d0;
  --bussola-surface: #ffffff;
  --bussola-error: #c62828;

  margin-top: 1.6rem;
  /* Der Textblock unter dem Formular ist ein eigener WPBakery-Block ohne
     eigenen Abstand nach oben — der Abstand muss hier entstehen. */
  margin-bottom: 3.2rem;
  /* Das aufsitzende Label ragt 8.6px ueber die Oberkante seines Feldes.
     1.2rem statt exakt 0.9rem: bei buendigem Abschluss schneidet das
     Antialiasing die Oberkante des ersten Labels an. */
  padding-top: 1.2rem;
}

.bussola-contact-form *,
.bussola-contact-form *::before,
.bussola-contact-form *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- Feld */

.bussola-field {
  position: relative;
  margin: 0 0 1.6rem;
}

.bussola-field input,
.bussola-field textarea {
  display: block;
  width: 100%;
  height: auto;
  margin: 0;
  font-family: inherit;
  font-size: 1.6rem;
  line-height: 1.5;
  color: var(--bussola-text);
  background-color: var(--bussola-surface);
  background-image: none;
  border: 1px solid var(--bussola-outline);
  border-radius: 0;
  box-shadow: none;
  appearance: none;
  -webkit-appearance: none;
  /* gleichmaessig — das Label im Ruhezustand liegt genau darueber */
  padding: 1rem 1.4rem;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.bussola-field textarea {
  resize: vertical;
  min-height: 12.8rem;
  line-height: 1.5;
}

.bussola-field input:focus,
.bussola-field textarea:focus {
  outline: none;
  border-color: var(--bussola-primary);
  box-shadow: 0 0 0 2px var(--bussola-ring);
}

/* Chrome faerbt automatisch ausgefuellte Felder sonst hellgelb ein. */
.bussola-field input:-webkit-autofill,
.bussola-field input:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--bussola-text);
  box-shadow: 0 0 0 100px var(--bussola-surface) inset;
}
.bussola-field input:-webkit-autofill:focus {
  box-shadow: 0 0 0 100px var(--bussola-surface) inset, 0 0 0 2px var(--bussola-ring);
}

/* ------------------------------------------------------- Floating Label */

.bussola-field label {
  position: absolute;
  top: 1px;
  left: 1px;
  margin: 0;
  /* identisch zum Feld-Padding: so deckt das Label den Eingabetext exakt */
  padding: 1rem 1.4rem;
  font-size: 1.6rem;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  color: var(--bussola-muted);
  background-color: transparent;
  pointer-events: none;
  transform-origin: left center;
  transition: transform 0.3s ease-out, color 0.15s ease, background-color 0.3s ease-out;
}

.bussola-field input:focus ~ label,
.bussola-field input:not(:placeholder-shown) ~ label,
.bussola-field textarea:focus ~ label,
.bussola-field textarea:not(:placeholder-shown) ~ label {
  /* Padding und Rand springen mit (nicht animierbar ohne Ruckeln), nur
     Transform und Farbe laufen weich. -1.2rem setzt die Mitte des
     geschrumpften Labels genau auf die obere Rahmenkante. */
  padding: 0 0.4rem;
  margin-left: 0.8rem;
  /* dunkler als im Ruhezustand: bei 12.8px traegt das Grau nicht mehr */
  color: var(--bussola-text);
  background-color: var(--bussola-surface);
  transform: translateY(-1.2rem) scale(0.8);
}

.bussola-field input:focus ~ label,
.bussola-field textarea:focus ~ label {
  color: var(--bussola-primary);
}

/* --------------------------------------------------------- Fehlerzustand
   .is-invalid setzt die Server-Antwort; das JS nimmt sie wieder weg,
   sobald das Feld fokussiert wird. */

.bussola-field.is-invalid input,
.bussola-field.is-invalid textarea { border-color: var(--bussola-error); }

.bussola-field.is-invalid input:focus,
.bussola-field.is-invalid textarea:focus { box-shadow: 0 0 0 2px var(--bussola-error); }

.bussola-field.is-invalid label { color: var(--bussola-error); }

/* Honeypot: visuell weg, aber nicht display:none — Bots fuellen es sonst nicht. */
.bussola-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ------------------------------------------------------------ Submit
   Feste Hoehe, damit der Wechsel zwischen Countdown-Ring und Beschriftung
   keinen Layout-Sprung ausloest. */

.bussola-contact-form .bussola-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 4.8rem;
  margin-top: 1.2rem;
  padding: 0 2.4rem;
  border: 0;
  border-radius: 0;
  background: var(--bussola-primary);
  color: #ffffff;
  font-family: inherit;
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.bussola-contact-form .bussola-submit:hover,
.bussola-contact-form .bussola-submit:focus { background: #bf4d01; color: #ffffff; }

.bussola-contact-form .bussola-submit:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--bussola-ring);
}

.bussola-contact-form .bussola-submit[disabled] { opacity: 0.55; cursor: not-allowed; }

/* ------------------------------------------------------- Countdown-Ring */

.bussola-submit__timer {
  display: none;
  position: relative;
  width: 2.6rem;
  height: 2.6rem;
}
.bussola-submit.is-waiting .bussola-submit__timer { display: block; }
.bussola-submit.is-waiting .bussola-submit__label { display: none; }

.bussola-submit__timer svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.bussola-submit__track { fill: none; stroke: currentColor; stroke-width: 3; opacity: 0.25; }
.bussola-submit__bar {
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;   /* leer; JS zaehlt auf 0 herunter */
}
.bussola-submit__num {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}

/* ------------------------------------------------------ Status-Meldungen */

/* Zwei Einsatzorte: nach erfolgreichem Versand steht die Meldung ANSTELLE
   des Formulars und braucht darum dessen Abstand zum Folgeblock. Im
   Fehlerfall sitzt sie zwischen Feldern und Button — dort wuerde der
   untere Rand das Formular aufreissen. */
.bussola-notice {
  margin: 1.6rem 0 3.2rem;
  padding: 1.4rem 1.6rem;
  border-left: 3px solid var(--bussola-primary, #e08900);
  background-color: #f6f6f6;
}
.bussola-notice p { margin: 0; font-size: 1.6rem; color: #2d2d2d; }

.bussola-contact-form .bussola-notice { margin-bottom: 0; }

.bussola-notice--err { border-left-color: #c62828; background-color: #fdeded; }
.bussola-notice--err p { color: #8c1d1d; }