/* Dieselbe Hausschrift wie die Verwaltungsoberflaeche, aus derselben Datei - die
   Seite laedt app.css bewusst nicht, braucht die Schnitte aber selbst deklariert.
   400, 600 und 700 - 500 kommt auf diesem Vordruck nicht vor, und jede ungenutzte
   Datei waere ein Kilobyte auf dem Handy des Bewerbers. */
@font-face{font-family:Inter;font-style:normal;font-weight:400;font-display:swap;
  src:url("/static/fonts/inter-latin-400.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:600;font-display:swap;
  src:url("/static/fonts/inter-latin-600.woff2") format("woff2")}
@font-face{font-family:Inter;font-style:normal;font-weight:700;font-display:swap;
  src:url("/static/fonts/inter-latin-700.woff2") format("woff2")}

/* Bewerbungsportal - oeffentlich, vom Handy aus, in zehn Sprachen.
 *
 * Bewusst eine eigene Datei statt app.css: Das hier ist die einzige Seite, die
 * Fremde sehen. Sie soll nicht 550 Zeilen Verwaltungsoberflaeche laden, und sie
 * ist fuer den Daumen gebaut, nicht fuer die Maus - Tippflaechen ab 48 Pixel,
 * eine Spalte, grosse Schrift.
 */

:root{
  /* Hausfarben wie im Buero und in der App - abgegriffen am Logo. */
  --navy:#11385b;--navy2:#1b4a72;--blue:#1b5c93;--gold:#f0ba37;
  --bg:#f4f7fb;--card:#fff;--text:#10233d;--muted:#5d6c7e;--line:#dce5ef;
  --green:#12a36d;--red:#c62b36;
  --radius:14px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}

body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:Inter,"Segoe UI",system-ui,Arial,sans-serif;
  font-size:16px;line-height:1.55;
  -webkit-text-size-adjust:100%;
}

/* ---------------------------------------------------------------- Rahmen */

.bw-kopf{background:linear-gradient(180deg,var(--navy),var(--navy2));color:#fff;padding:16px 20px;
  border-bottom:3px solid var(--gold)}
.bw-kopf-innen{max-width:640px;margin:0 auto;display:flex;align-items:center;gap:14px}
/* Der goldene Schriftzug steht direkt auf dem dunklen Grund - derselbe wie in der
   Verwaltung und in der Mitarbeiter-App. Ein weisser Kasten darunter saehe aus wie
   ein aufgeklebter Zettel. */
.bw-logo{display:block;height:30px;width:auto;flex:none}
.bw-kopf-linie{font-size:11.5px;font-weight:600;letter-spacing:.9px;text-transform:uppercase;
  color:#9db8d6;padding-left:14px;border-left:1px solid rgba(255,255,255,.22);white-space:nowrap}
@media(max-width:480px){
  .bw-logo{height:24px}
  .bw-kopf-linie{font-size:10px;letter-spacing:.6px;padding-left:10px}
}

main{max-width:640px;margin:0 auto;padding:22px 16px 40px}

h1{font-size:26px;line-height:1.25;margin:0 0 6px;text-wrap:balance}
.bw-vorspann{color:var(--muted);margin:0 0 22px;font-size:15px}

/* ---------------------------------------------------------------- Abschnitte */

.bw-block{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px 18px 20px;margin-bottom:14px}
.bw-block > h2{
  font-size:12px;text-transform:uppercase;letter-spacing:.8px;color:var(--navy);
  margin:0 0 14px;font-weight:700;display:flex;align-items:center;gap:9px;
}
/* Goldener Strich vor der Ueberschrift - dasselbe Zeichen wie im Logo, in der
   Verwaltung und in der Mitarbeiter-App. */
.bw-block > h2::before{content:"";flex:none;width:16px;height:3px;border-radius:2px;background:var(--gold)}

label{display:block;font-size:13.5px;font-weight:700;margin:14px 0 6px;color:#38485c}
.bw-block > label:first-of-type{margin-top:0}
.bw-frei{font-weight:600;color:var(--muted)}

input[type=text],input[type=tel],input[type=email],input[type=date],input[type=number],textarea,select{
  width:100%;padding:13px 14px;font:inherit;font-size:16px;   /* 16px: iOS zoomt sonst beim Tippen hinein */
  border:1px solid #c4d2e2;border-radius:11px;background:#fff;color:var(--text);min-height:50px;
}
textarea{min-height:110px;resize:vertical;line-height:1.5}
input:focus-visible,textarea:focus-visible,select:focus-visible,button:focus-visible,.bw-wahl label:focus-within{
  outline:3px solid #9cc2f0;outline-offset:1px;border-color:var(--blue);
}
.bw-zeile{display:flex;gap:12px;flex-wrap:wrap}
.bw-zeile > div{flex:1;min-width:150px}

/* Auswahlkacheln statt Klappliste: ein Daumen trifft eine Kachel, eine
   Klappliste auf dem Handy ist ein Systemdialog mit Scrollrad. */
.bw-wahl{display:grid;grid-template-columns:repeat(auto-fit,minmax(138px,1fr));gap:8px}
.bw-wahl.schmal{grid-template-columns:repeat(auto-fit,minmax(112px,1fr))}
/* Die Beschriftung muss in die Kachel passen - "Muttersprache" stand bisher bis an
   den Rand und wurde auf schmalen Schirmen abgeschnitten. Etwas kleinere Schrift,
   weniger Innenabstand, und lange Woerter duerfen umbrechen. */
.bw-wahl label{
  margin:0;display:flex;align-items:center;gap:9px;min-height:50px;padding:10px 12px;
  border:1.5px solid var(--line);border-radius:11px;background:#fff;cursor:pointer;
  font-size:14px;font-weight:600;line-height:1.25;color:var(--text);overflow-wrap:anywhere;
  transition:border-color .12s,background .12s;
}
.bw-wahl input{appearance:none;margin:0;width:20px;height:20px;flex:none;border:2px solid #b3c3d6;border-radius:50%;position:relative}
.bw-wahl input[type=checkbox]{border-radius:6px}
.bw-wahl label:has(input:checked){border-color:var(--blue);background:#eef5ff;color:#123a6b}
.bw-wahl label:has(input:checked) input{border-color:var(--blue);background:var(--blue)}
.bw-wahl label:has(input:checked) input::after{
  content:"";position:absolute;inset:3px;border-radius:inherit;background:#fff;
}
.bw-wahl input[type=checkbox]:checked::after{
  inset:0;background:none;border:solid #fff;border-width:0 2.5px 2.5px 0;
  width:5px;height:10px;margin:3px auto;transform:rotate(45deg);border-radius:0;
}

/* ---------------------------------------------------------------- Unterlagen */

.bw-dateiwahl{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:560px){.bw-dateiwahl{grid-template-columns:1fr}}
.bw-dateien{
  display:block;border:2px dashed #b8c9dc;border-radius:12px;background:#f8fbff;
  padding:22px 16px;text-align:center;cursor:pointer;
}
.bw-dateien:hover{border-color:var(--blue);background:#eef5ff}
.bw-dateien input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.bw-dateien-symbol{font-size:30px;line-height:1}
.bw-dateien strong{display:block;margin-top:8px;font-size:15.5px}
.bw-dateien span{display:block;color:var(--muted);font-size:13px;margin-top:3px}
.bw-dateiliste{margin:12px 0 0;padding:0;list-style:none;font-size:14px}
.bw-dateiliste li{display:flex;gap:9px;align-items:center;padding:9px 0;border-top:1px solid var(--line)}
.bw-dateiliste li::before{content:"📄";flex:none}
.bw-dateiliste .bw-groesse{margin-left:auto;color:var(--muted);font-size:12.5px;white-space:nowrap}

/* ---------------------------------------------------------------- Einwilligung, Knopf */

.bw-einwilligung{display:flex;gap:13px;align-items:flex-start;font-size:14px;line-height:1.5;font-weight:600;color:#38485c;margin:0}
.bw-einwilligung input{flex:none;width:24px;height:24px;margin:1px 0 0;accent-color:var(--blue)}
.bw-einwilligung a{color:var(--blue)}

.bw-knopf{
  display:block;width:100%;min-height:56px;margin-top:6px;padding:15px 20px;
  background:var(--navy2);color:#fff;border:0;border-radius:12px;
  font:inherit;font-size:17px;font-weight:700;cursor:pointer;
}
.bw-knopf:hover{background:var(--blue)}
.bw-knopf.grau{background:#fff;color:var(--navy2);border:1.5px solid var(--line);font-size:15.5px;min-height:50px}
.bw-knopf.grau:hover{background:#eef5ff;border-color:var(--blue)}

.bw-fuss{max-width:640px;margin:0 auto;padding:6px 16px 30px;color:var(--muted);font-size:12.5px;text-align:center}
.bw-fuss a{color:var(--muted)}

/* ---------------------------------------------------------------- Meldungen, Bestaetigung */

.bw-meldung{padding:13px 16px;border-radius:12px;margin-bottom:16px;font-size:14.5px;font-weight:600}
.bw-meldung.fehler{background:#fdebed;border:1px solid #f3c2c7;color:#8f1d26}
.bw-meldung.gut{background:#e6f7f0;border:1px solid #a9e2c8;color:#0a6e4b}

.bw-haken{
  width:62px;height:62px;border-radius:50%;background:#e6f7f0;color:var(--green);
  display:flex;align-items:center;justify-content:center;font-size:32px;margin:0 auto 16px;
}
.bw-danke{text-align:center}
.bw-danke h1{font-size:24px}
.bw-schritte{margin:20px 0 0;padding:0;list-style:none;text-align:left}
.bw-schritte li{display:flex;gap:13px;padding:12px 0;border-top:1px solid var(--line);font-size:14.5px}
.bw-schritte li:first-child{border-top:0}
.bw-schritte b{display:block}
.bw-nummer{
  flex:none;width:27px;height:27px;border-radius:50%;background:var(--navy2);color:#fff;
  display:flex;align-items:center;justify-content:center;font-size:13.5px;font-weight:700;
}
.bw-merken{
  margin-top:18px;padding:14px 16px;border-radius:12px;background:#fffaed;border:1px solid #f0dda8;
  font-size:13.5px;color:#7a5800;text-align:left;
}
.bw-merken code{display:block;margin-top:7px;font-size:12px;word-break:break-all;color:#4a3600}

/* Arabisch laeuft von rechts nach links - das betrifft das Geruest, nicht nur den Text. */
[dir=rtl] .bw-dateiliste .bw-groesse{margin-left:0;margin-right:auto}
[dir=rtl] .bw-schritte li,[dir=rtl] .bw-einwilligung{text-align:right}

/* ---------------------------------------------------------------- Handy

   Der Fragebogen wird zu zwei Dritteln auf dem Telefon ausgefuellt - in der Bahn, in
   der Pause, am Tresen auf dem Diensthandy. Deshalb hier keine Verkleinerung des
   Desktop-Bildes, sondern eigene Regeln: ein Feld je Zeile statt zwei halber,
   Auswahlkacheln untereinander, und der Speichern-Knopf bleibt sichtbar, damit
   Eingaben nicht verloren gehen, wenn jemand mitten im Bogen aufhoert. */
@media (max-width:560px){
  main{padding:16px 12px 88px}
  .bw-zeile{flex-direction:column;gap:0}
  .bw-zeile > div{min-width:0;width:100%}
  .bw-wahl{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:7px}
  .bw-block{padding:15px 14px 17px;margin-bottom:11px}
  .bw-block > h2{position:sticky;top:0;z-index:2;background:var(--card);padding:4px 0;margin:-4px 0 10px}
  /* Der Knopf steht ueber dem Inhalt am unteren Rand - mit Abstand fuer die
     Gestenleiste des Telefons (safe-area). */
  form .bw-knopf[type=submit]{
    position:sticky;bottom:0;z-index:3;margin:14px 0 0;border-radius:12px;
    box-shadow:0 -6px 18px rgba(16,35,61,.14);
    padding-bottom:calc(15px + env(safe-area-inset-bottom,0px));
  }
}
@media (max-width:420px){
  h1{font-size:22px}
  .bw-vorspann{font-size:14.5px}
  .bw-block{padding:14px 12px 16px}
  .bw-wahl{grid-template-columns:1fr}
  .bw-kopf-innen{gap:10px}
  .bw-dateien{padding:16px 12px}
}

/* Fehlende Pflichtangaben: rot und pulsierend - dasselbe Signal wie die offenen Dienste in der Planung.
   Wer Bewegung abgestellt hat (prefers-reduced-motion), bekommt die Farbe ohne Blinken. */
.bw-offen{color:#b3261e}
.bw-pflicht{display:inline-block;margin-left:6px;padding:1px 8px;border-radius:999px;background:#fbe6e5;
  color:#8f1d26;font-size:11.5px;font-weight:700;letter-spacing:.2px;animation:bw-pulsieren 1.2s ease-in-out infinite}
input.bw-fehlt,textarea.bw-fehlt{border-color:#e2827c;background:#fffafa;box-shadow:0 0 0 3px rgba(179,38,30,.10)}
input.bw-fehlt:focus-visible{border-color:#b3261e}
.bw-wahl.bw-fehlt{border:1px dashed #e2827c;border-radius:12px;padding:6px;background:#fffafa}
.bw-block-offen{border-color:#e2827c;box-shadow:0 0 0 3px rgba(179,38,30,.08)}
.bw-block-offen > h2{color:#8f1d26}
.bw-meldung-offen{background:#fbe6e5;border:1px solid #f3c2c7;color:#8f1d26;animation:bw-pulsieren 1.6s ease-in-out infinite}
.bw-sprungliste{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.bw-sprungliste a{display:inline-block;padding:3px 10px;border-radius:999px;background:#fff;border:1px solid #f3c2c7;
  color:#8f1d26;font-size:12.5px;font-weight:700;text-decoration:none}
.bw-sprungliste a:hover{background:#fff4f4}
@keyframes bw-pulsieren{50%{opacity:.45}}
@media (prefers-reduced-motion:reduce){.bw-pflicht,.bw-meldung-offen{animation:none}}



/* ---------------------------------------------------------------- Fehlende Angaben
   Rot allein reicht nicht: Wer rot-gruen-schwach ist, sieht den Rahmen kaum. Deshalb
   steht zusaetzlich der Klartext am Feld und die Liste oben. */
.bw-fehlerkopf{border:2px solid #b3261e;background:#fdf1f0;border-radius:14px;
  padding:14px 16px;margin-bottom:20px;color:#7d1a13}
.bw-fehlerkopf strong{display:block;font-size:17px;margin-bottom:6px}
.bw-fehlerkopf ul{margin:0 0 8px;padding-left:20px}
.bw-fehlerkopf li{margin:3px 0}
.bw-fehlerkopf a{color:#7d1a13}
.bw-fehlerkopf p{margin:0;font-size:14px}
input.fehlt,select.fehlt,textarea.fehlt{border-color:#b3261e!important;background:#fdf1f0}
.bw-wahl.fehlt,.bw-einwilligung.fehlt{outline:2px solid #b3261e;outline-offset:3px;border-radius:12px}
.bw-feldfehler{margin:5px 0 14px;color:#b3261e;font-size:14px;font-weight:600}

/* ---------------------------------------------------------------- Bestaetigung
   Gruen und mit Haken: Wer nicht sicher ist, ob das Abschicken geklappt hat,
   schickt ein zweites Mal - und im Buero liegen zwei Bewerbungen. */
.bw-erfolg{display:flex;gap:12px;align-items:flex-start;border:2px solid #1a7f4b;
  background:#eefaf3;border-radius:14px;padding:14px 16px;margin-bottom:6px}
.bw-erfolg-haken{flex:none;width:30px;height:30px;border-radius:50%;background:#1a7f4b;
  color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:17px}
.bw-erfolg strong{display:block;color:#14603a;font-size:19px}
.bw-erfolg span{color:#1c5740;font-size:15px}