/* Eigenständig und ohne die CRM-Oberfläche: diese Seite ist für Bewerber und
   soll nichts aus dem internen System nachladen.

   Farbwelt seit 15.09.2026 = Anmeldemaske des Mitarbeiterportals (interncrm):
   dunkler Grund #1d2a36→#101820, weiße Karten, Blau #2f7fc4, Rot #d8392b,
   Wortmarke „HCG". Sajad: „diese Farben sind schön, nimm sie für den Design".
   ⚠ Der nginx-vhost setzt `style-src 'self'` und `default-src 'self'`:
   keine Web-Fonts, keine Inline-Stile — alles hier, Systemschrift. */
:root {
  --blau: #2f7fc4; --blau-dunkel: #2f6fa8; --blau-hell: #d6e6f5;
  --rot: #d8392b; --rot-dunkel: #b32e22; --rot-hell: #fbe6e3;
  /* Zustandsfarben in der Portal-Palette (Vorgabe 16.09.: nur Blaugrau/Weiss/Blau/Rot/Grau):
     gut = Blau, wartet = Grau. Namen bleiben, damit die Regeln unten lesbar bleiben. */
  --gruen: #2f7fc4; --gruen-hell: #d6e6f5; --gelb: #6b6b6b; --gelb-hell: #f0f0f0;
  --primaer: var(--blau); --primaer-dunkel: var(--blau-dunkel); --primaer-hell: var(--blau-hell);
  --grund-oben: #1d2a36; --grund-unten: #101820;
  --grau-900: #1f1f1f; --grau-700: #4a4a4a; --grau-500: #6b6b6b; --grau-400: #9a9a9a;
  --grau-300: #cdcdcd; --grau-100: #f0f0f0; --rahmen: #e2e2e2;
}
* { box-sizing: border-box; }
body {
  margin: 0; color: var(--grau-900);
  background: var(--grund-unten);
  background-image: linear-gradient(160deg, var(--grund-oben), var(--grund-unten));
  background-attachment: fixed; min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  font-size: 15px; line-height: 1.55;
}
.kopf { color: #fff; padding: 22px 20px 18px; }
.kopf .innen { max-width: 860px; margin: 0 auto; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.wortmarke { display: inline-flex; align-items: baseline; gap: 1px; font-weight: 800; letter-spacing: .5px; font-size: 26px; line-height: 1; text-decoration: none; }
.wortmarke-hc { color: var(--blau); }
.wortmarke-g { color: var(--rot); }
.kopf h1 { margin: 0; font-size: 19px; font-weight: 600; }
.kopf .wer { color: #b9c4d3; font-size: 13.5px; margin-left: auto; }
.kopf button { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 4px; padding: 7px 13px; font: inherit; font-size: 13px; cursor: pointer; }
.kopf button:hover { background: rgba(255,255,255,.22); }

main { max-width: 860px; margin: 0 auto; padding: 10px 16px 70px; }
.karte { background: #fff; border-radius: 6px; padding: 22px 24px; margin-bottom: 16px; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.karte > h2 { font-size: 17px; font-weight: 600; margin: 0 0 4px; }
.karte > .unter { color: var(--grau-500); font-size: 13.5px; margin: 0 0 16px; }

/* Abschnitte + Kennzahl-Kacheln (seit 16.09.2026, wie CRM und Mitarbeiterportal) */
h2.abschnitt { font-size: 11.5px; letter-spacing: .09em; text-transform: uppercase; color: #b9c4d3; font-weight: 700; margin: 4px 0 10px; }
.kennzahlen { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 18px; }
.kennzahl { background: #fff; border: 0; border-radius: 6px; padding: 16px 18px 14px; cursor: pointer; text-align: left; font: inherit; color: inherit; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
.kennzahl:hover { outline: 2px solid var(--blau); outline-offset: -2px; }
.kennzahl .kz-icon { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 6px; background: var(--grau-100); color: var(--grau-700); font-size: 15px; margin-bottom: 12px; }
.kennzahl.warnung .kz-icon { background: var(--rot-hell); color: var(--rot); }
.kennzahl.gut .kz-icon { background: var(--blau-hell); color: var(--blau); }
.kennzahl .kz-name { font-size: 12.5px; color: var(--grau-500); }
.kennzahl .kz-wert { font-size: 21px; font-weight: 600; margin-top: 2px; line-height: 1.2; }
.kennzahl.warnung .kz-wert { color: var(--rot); }
.kennzahl .kz-unten { font-size: 12px; color: var(--grau-400); margin-top: 3px; }
@media (max-width: 560px) { .kennzahlen { grid-template-columns: 1fr 1fr; gap: 10px; } .kennzahl { padding: 12px 14px; } .kennzahl .kz-wert { font-size: 18px; } }

.reiter { display: flex; gap: 6px; margin-bottom: 16px; flex-wrap: wrap; }
.reiter button {
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.22); border-radius: 4px; padding: 9px 15px;
  font: inherit; font-size: 14px; cursor: pointer; color: #fff; display: flex; align-items: center; gap: 7px;
}
.reiter button:hover { background: rgba(255,255,255,.18); }
.reiter button[aria-selected="true"] { background: #fff; border-color: #fff; color: var(--grau-900); font-weight: 600; }
.reiter .zahl { background: var(--rot); color: #fff; border-radius: 99px; font-size: 11.5px; font-weight: 700; padding: 1px 7px; }

.zeile { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--rahmen); }
.zeile:first-of-type { border-top: 0; }
.zeile .haupt { flex: 1; min-width: 0; }
.zeile .titel { font-weight: 600; }
.zeile .hinweis { color: var(--grau-500); font-size: 13.5px; margin-top: 2px; }
.zeile .hinweis a { color: var(--blau); }
.zeile .tat { flex-shrink: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

.marke { display: inline-block; border-radius: 99px; font-size: 12px; font-weight: 600; padding: 3px 10px; white-space: nowrap; }
.m-offen { background: var(--grau-100); color: var(--grau-700); }
.m-warte { background: var(--gelb-hell); color: var(--gelb); }
.m-gut { background: var(--gruen-hell); color: var(--gruen); }
.m-rot { background: var(--rot-hell); color: var(--rot); }
.pflichtzeichen { color: var(--rot); font-weight: 700; }

button.knopf { background: var(--rot); color: #fff; border: 0; border-radius: 4px; padding: 9px 16px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
button.knopf:hover { background: var(--rot-dunkel); }
button.knopf:disabled { opacity: .55; cursor: default; background: var(--rot); }
button.still { background: #fff; color: var(--grau-700); border: 1px solid var(--grau-300); }
button.still:hover { background: var(--grau-100); }
button.gefahr { background: #fff; color: var(--rot); border: 1px solid #f0b8b1; }
button.gefahr:hover { background: var(--rot-hell); }

input[type=file] { display: none; }
input, select, textarea {
  width: 100%; padding: 10px 11px; border: 1px solid var(--grau-300); border-radius: 4px;
  font: inherit; font-size: 14px; background: #fff; color: inherit;
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--blau); outline-offset: -1px; border-color: var(--blau); }
button:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
textarea { min-height: 96px; resize: vertical; }
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--grau-500); margin-bottom: 5px; }
.feld { margin-bottom: 14px; }

.meldung { padding: 12px 15px; border-radius: 4px; margin-bottom: 14px; font-size: 14px; }
.meldung.fehler { background: var(--rot-hell); color: var(--rot-dunkel); }
.meldung.ok { background: var(--gruen-hell); color: var(--gruen); }
.meldung.info { background: var(--blau-hell); color: var(--blau-dunkel); }

/* Test */
.uhr { position: sticky; top: 0; z-index: 5; background: #fff; border-radius: 6px; padding: 12px 18px; margin-bottom: 14px; display: flex; align-items: center; gap: 14px; box-shadow: 0 8px 24px rgba(0,0,0,.3); }
.uhr .zeit { font-size: 22px; font-weight: 700; font-variant-numeric: tabular-nums; }
.uhr .zeit.knapp { color: var(--rot); }
.uhr .fort { flex: 1; height: 7px; background: var(--grau-100); border-radius: 99px; overflow: hidden; }
.uhr .fort i { display: block; height: 100%; background: var(--blau); border-radius: 99px; transition: width .3s; }
.frage { border-top: 1px solid var(--rahmen); padding: 18px 0; }
.frage:first-of-type { border-top: 0; }
.frage .nr { font-size: 12.5px; color: var(--blau); font-weight: 600; }
.frage .text { font-weight: 600; margin: 3px 0 12px; }
.wahl { display: flex; gap: 10px; align-items: flex-start; padding: 9px 12px; border: 1px solid var(--rahmen); border-radius: 4px; margin-bottom: 7px; cursor: pointer; }
.wahl:hover { border-color: var(--grau-300); background: var(--grau-100); }
.wahl input { width: auto; margin: 3px 0 0; flex-shrink: 0; accent-color: var(--blau); }
.wahl.gewaehlt { border-color: var(--blau); background: var(--blau-hell); }

/* Termine */
.fenster { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin-top: 12px; }
.fenster button { text-align: left; background: #fff; color: inherit; border: 1px solid var(--rahmen); border-radius: 4px; padding: 13px 15px; font: inherit; cursor: pointer; }
.fenster button:hover { border-color: var(--blau); }
.fenster button.gewaehlt { border-color: var(--blau); background: var(--blau-hell); }
.fenster button:disabled { opacity: .45; cursor: default; }
.fenster .tag { font-weight: 600; }
.fenster .std { color: var(--grau-500); font-size: 13.5px; }

.verlauf li { margin-bottom: 9px; font-size: 13.5px; color: var(--grau-700); }
.verlauf .wann { color: var(--grau-500); font-size: 12.5px; }
.leer { text-align: center; color: var(--grau-500); padding: 26px 10px; }
footer { text-align: center; font-size: 12.5px; color: #b9c4d3; padding: 0 20px 40px; }
footer a { color: #fff; }
footer .marken-zeile { margin: 0 0 8px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; font-size: 11.5px; color: #fff; }
@media (max-width: 560px) {
  .zeile { flex-direction: column; }
  .zeile .tat { width: 100%; }
}


/* ──────────────────────────────────────────────── Abstands- und Feldhelfer
 * ⚠ Ersetzen style="…"-Attribute: Der nginx-vhost setzt `style-src 'self'`,
 * ein Inline-Stil wird auf der Produktion stumm verworfen und wirkt nur in
 * der lokalen Entwicklung.
 */
.abstand-oben { margin-top: 12px; }
.abstand-oben-klein { margin-top: 8px; }
.abstand-oben-gross { margin-top: 16px; }
.abstand-unten-klein { margin-bottom: 8px; }
.text-rot { color: var(--rot); }
.flex-voll { flex: 1; }
.feld-zahl { max-width: 220px; }
.feld-plz { max-width: 120px; }
.feld-anrede { max-width: 130px; }
.liste-punkte { margin: 0; padding-left: 18px; }
.reihe { display: flex; gap: 12px; }
.meldung-oben { margin: 14px 0 0; }
.fuss-text { color: var(--grau-700); margin: 0; }

/* Sprachwahl + Anmeldung mit Konto (16.09.2026) */
.sprachwahl { background: rgba(255,255,255,.12); color: #fff; border: 1px solid rgba(255,255,255,.22); border-radius: 4px; padding: 6px 9px; font: inherit; font-size: 13px; }
.sprachwahl option { color: #1f1f1f; }
.login-form { display: grid; gap: 12px; max-width: 420px; }
.login-form .feld { display: flex; flex-direction: column; gap: 5px; }
.login-form input { padding: 10px 11px; border: 1px solid #cdcdcd; border-radius: 4px; font: inherit; }
.login-form input:focus { outline: 2px solid var(--blau, #2f7fc4); outline-offset: -1px; }
.login-form .knopf { justify-self: start; }
[dir="rtl"] .wortmarke { direction: ltr; }
[dir="rtl"] .kopf .wer { margin-left: 0; margin-right: auto; }
.kopf .innen select.sprachwahl { width: auto; flex: none; margin: 0; }