/* ============================================================
   mahnbescheid - Bewerbungsformular

   Unter jeder Stelle und auf /karriere/ (Initiativbewerbung), Markup aus
   inc/bewerbung.php. Die Felder übernehmen das Formular von /bewerten/
   (.kz-input in kundenzufriedenheit.css): 1 px Rahmen, beim Fokus Rahmen
   in --c-primary mit Ring in --c-primary-100, 16 px gegen das Zoomen auf
   iOS. Radius --r-sm wie jedes Eingabefeld (doku/DESIGN.md).
   ============================================================ */

/* Eine Spalte, jedes Feld unter dem vorigen (seit 29.09.2026). Vorher
   standen Name und E-Mail, Lebenslauf und Unterlagen nebeneinander: Der
   Blick sprang im Zickzack, und eine längere Dateiliste schob die
   Nachbarspalte aus der Flucht. .bw-reihe bleibt im Markup, ordnet aber
   nichts mehr nebeneinander. */
/* Das Formular ist eine Karte - weiß, 1 px Rahmen, kantig wie die Karten
   von /karriere/ -, die Betreffzeile ihr Kopf. Dieselbe Karte auf jeder
   Stelle und für die Initiativbewerbung (seit 30.09.2026; vorher stand das
   Formular ohne Rahmen im Band, und der Betreff sah aus wie ein Feld). */
.bw-form{
  max-width: 680px; box-sizing: border-box;
  background: white; border: 1px solid var(--c-line);
  padding: 0 32px 32px;
}
.bw-reihe{ display: block; }
.bw-feld{ margin: 0 0 20px; min-width: 0; }
.bw-feld > label,
.bw-feld > legend{
  display: block; margin: 0 0 6px; padding: 0;
  font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--c-ink);
}
.bw-optional{ font-weight: 400; color: var(--c-muted); }

/* Worauf die Bewerbung geht, als Kopf der Karte: Etikett in Versalien,
   darunter die Stelle, eine Linie trennt ihn von den Feldern. Die Kante
   oben in der Hausfarbe ist die der hervorgehobenen Karte (doku/DESIGN.md). */
.bw-betreff{
  display: flex; flex-direction: column; gap: 3px;
  margin: 0 -32px 28px; padding: 18px 32px 16px;
  border-top: 4px solid var(--c-primary); border-bottom: 1px solid var(--c-line);
}
.bw-betreff-etikett{
  font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--c-muted);
}
.bw-betreff-wert{ font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--c-ink); }

/* Die Fragen einer Stelle als eigener Block zwischen den gemeinsamen
   Feldern: Linie oben, Etikett wie die Betreffzeile. */
.bw-gruppe{ border: 0; margin: 4px 0 0; padding: 16px 0 0; border-top: 1px solid var(--c-line); min-width: 0; }
.bw-gruppe > legend{
  float: left; width: 100%; margin: 0 0 14px; padding: 0;
  font-size: 11.5px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase;
  color: var(--c-muted);
}
.bw-gruppe > legend + *{ clear: both; }

/* Satz unter einer Beschriftung, vor dem Feld. */
.bw-feldhinweis{ margin: -2px 0 8px; font-size: 14px; line-height: 1.5; color: var(--c-ink-soft); }

.bw-input{
  width: 100%; box-sizing: border-box;
  padding: 11px 13px;
  border: 1px solid var(--c-line); border-radius: var(--r-sm);
  background: var(--rg-paper, white); color: var(--c-ink);
  font: inherit; font-size: 16px;
  transition: border-color 120ms, box-shadow 120ms;
}
.bw-input:focus{ outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--c-primary-100); }
.bw-textarea{ resize: vertical; min-height: 130px; }

/* Datei: das Feld des Browsers, der Knopf darin wie ein Ghost-Button. */
.bw-datei{ width: 100%; font: inherit; font-size: 14.5px; color: var(--c-ink-soft); }
.bw-datei::file-selector-button{
  margin-right: 12px; padding: 9px 14px;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--rg-paper, white); color: var(--c-primary-700);
  font: inherit; font-weight: 600; cursor: pointer;
  transition: background 120ms;
}
.bw-datei::file-selector-button:hover{ background: var(--c-primary-050); }
.bw-datei:focus-visible{ outline: 2px solid var(--c-primary); outline-offset: 3px; }

/* Mit Skript (bewerbung.js): das Feld des Browsers unsichtbar, aber im
   Formular; an seiner Stelle ein eigener Knopf in derselben Gestalt und die
   Liste mit „Entfernen" darunter. */
.bw-datei-versteckt{
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.bw-datei-knopf{
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px;
  border: 1px solid var(--c-line); border-radius: var(--r-md);
  background: var(--rg-paper, white); color: var(--c-primary-700);
  font: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
  transition: background 120ms;
}
.bw-datei-knopf::before{ content: "+"; font-weight: 600; }
.bw-datei-knopf:hover{ background: var(--c-primary-050); }
.bw-datei-knopf:focus-visible{ outline: 2px solid var(--c-primary); outline-offset: 2px; }
.bw-hinweis{ margin: -10px 0 20px; font-size: 13.5px; color: var(--c-muted); }

/* Ja/Nein nebeneinander. */
.bw-janein{ border: 0; margin: 0 0 20px; padding: 0; }
.bw-janein label{ display: inline-flex; align-items: center; gap: 8px; margin: 0 24px 0 0; font-size: 15.5px; color: var(--c-ink); cursor: pointer; }
.bw-janein input{ width: 18px; height: 18px; margin: 0; accent-color: var(--c-primary); flex: none; }
.bw-janein input:focus-visible{ outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* Knopf und Datenschutzhinweis nebeneinander, wie im Impressum. */
.bw-absenden{ display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 4px; }
.bw-absenden p{ flex: 1 1 240px; margin: 0; font-size: 14px; line-height: 1.5; color: var(--c-muted); }
.bw-absenden a{ color: var(--c-primary-700); }

/* Die gewählten Unterlagen unter dem Feld (bewerbung.js): Der Browser zeigt
   bei mehreren nur „3 Dateien". Eine, die nicht passt, in der Fehlerfarbe -
   der Satz darunter sagt, warum. */
.bw-dateiliste{ list-style: none; margin: 10px 0 0; padding: 0; font-size: 14.5px; line-height: 1.5; color: var(--c-ink-soft); }
.bw-dateiliste li{
  display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
  padding: 7px 0; border-top: 1px solid var(--c-line-soft);
}
.bw-dateiliste li:last-child{ border-bottom: 1px solid var(--c-line-soft); }
.bw-dateiname{ min-width: 0; overflow-wrap: anywhere; }
.bw-dateiliste li.is-fehler .bw-dateiname{ color: var(--c-accent); }
.bw-dateiliste li.bw-dateiliste-leer{ color: var(--c-muted); border: 0; padding: 0; }
/* „Entfernen" als Textknopf, nicht als zweiter Rahmenknopf je Zeile. */
.bw-datei-weg{
  flex: none; padding: 2px 0; border: 0; background: none;
  font: inherit; font-size: 14px; color: var(--c-primary-700); cursor: pointer;
  text-decoration: underline; text-underline-offset: 2px;
}
.bw-datei-weg:hover{ color: var(--c-ink); }
.bw-datei-weg:focus-visible{ outline: 2px solid var(--c-primary); outline-offset: 2px; }

/* Turnstile: 65 px hoch, wenn es sichtbar prüft. Die Höhe vorab, damit der
   Knopf nicht springt, wenn das Widget lädt. */
.bw-turnstile{ min-height: 65px; }
/* Mit dem unsichtbaren Testschlüssel (Klon, Vorschau) zeigt Cloudflare nichts. */
.bw-turnstile.is-test{ min-height: 0; margin-bottom: 0; }

/* Honigtopf: aus dem Blick, nicht display:none - manche Maschinen
   überspringen versteckte Felder. */
.bw-hp{ position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Meldung nach dem Absenden. Status mit Wort, nie mit Farbe allein. */
.bw-meldung{
  max-width: 680px; box-sizing: border-box; margin: 0 0 24px; padding: 16px 18px;
  border: 1px solid var(--c-line); background: var(--c-surface);
  font-size: 15.5px; line-height: 1.55; color: var(--c-ink);
}
.bw-meldung p{ margin: 0; }
.bw-meldung p + p{ margin-top: 8px; }
.bw-meldung.is-ok{ border-color: var(--c-ok); }
.bw-meldung.is-fehler{ border-color: var(--c-accent); background: var(--c-accent-050); }
.bw-meldung:focus{ outline: none; }

/* Fehler am Feld (bewerbung.js), wie auf /bewerten/: Rahmen in der
   Fehlerfarbe, ein Satz darunter. Die Beschriftung bleibt in Tinte - die
   Farbe allein trägt keinen Status, der Satz tut es. */
.is-invalid > .bw-input,
.is-invalid .bw-input{ border-color: var(--c-accent); }
.is-invalid .bw-input:focus{ border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-050); }
.is-invalid .bw-datei::file-selector-button,
.is-invalid .bw-datei-knopf{ border-color: var(--c-accent); }
/* Bei Ja/Nein kein Rahmen um die runden Knöpfe - ein eckiger Kasten um
   einen Kreis sah falsch aus. Dort trägt der Satz darunter den Fehler. */
.bw-fehler{ flex-basis: 100%; margin: 6px 0 0; font-size: 14.5px; line-height: 1.45; color: var(--c-accent); }

/* Beim Senden: gesperrt, ohne Pfeil, Zeiger „wartet". */
.bw-senden.is-senden,
.bw-senden:disabled{ opacity: .75; cursor: progress; }
.bw-senden.is-senden::after{ display: none; }

@media (max-width: 768px){
  .bw-form{ padding: 0 18px 22px; }
  .bw-betreff{ margin: 0 -18px 22px; padding: 14px 18px 12px; }
  .bw-senden{ width: 100%; justify-content: center; }
}