/* Bewusst eigenständig und ohne die CRM-Oberfläche: diese Seite ist öffentlich
   und soll nichts aus dem System nachladen.

   Farbwelt seit 15.09.2026 = Anmeldemaske des Mitarbeiterportals (interncrm):
   dunkler Grund #1d2a36→#101820, weiße Karte, Blau #2f7fc4, Rot #d8392b,
   Wortmarke „HCG" — dieselben Werte wie portal.css. ⚠ `style-src 'self'`:
   keine Web-Fonts, keine Inline-Stile. */
:root {
  --blau: #2f7fc4; --blau-dunkel: #2f6fa8; --blau-hell: #d6e6f5;
  --rot: #d8392b; --rot-dunkel: #b32e22; --rot-hell: #fbe6e3;
  --gruen: #2f7fc4; --gruen-hell: #d6e6f5;   /* erledigt-Haken in Blau - kein Gruen in der Palette */
  --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.5;
}
.kopf { color: #fff; padding: 34px 20px 22px; text-align: center; }
.wortmarke { display: inline-flex; align-items: baseline; gap: 1px; font-weight: 800; letter-spacing: .5px; font-size: 30px; line-height: 1; text-decoration: none; margin-bottom: 14px; }
.wortmarke-hc { color: var(--blau); }
.wortmarke-g { color: var(--rot); }
.kopf h1 { margin: 0 0 4px; font-size: 22px; font-weight: 600; }
.kopf p { margin: 0; color: #b9c4d3; font-size: 14px; }
main { max-width: 660px; margin: 0 auto; padding: 10px 18px 60px; }
.karte { background: #fff; border-radius: 6px; padding: 28px 28px 24px; box-shadow: 0 18px 50px rgba(0,0,0,.35); }
h2 { font-size: 19px; font-weight: 600; margin: 0 0 18px; }
label { display: block; font-size: 12.5px; font-weight: 600; color: var(--grau-500); margin-bottom: 5px; }
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); }
textarea { min-height: 110px; resize: vertical; }
.feld { margin-bottom: 16px; }
.zeile { display: flex; gap: 14px; flex-wrap: wrap; }
.zeile > .feld { flex: 1; min-width: 150px; }
.pflicht { color: var(--rot); }
.hinweis { font-size: 12.5px; color: var(--grau-500); margin-top: 5px; }
button {
  background: var(--rot); color: #fff; border: none; border-radius: 4px; padding: 13px 26px;
  font: inherit; font-weight: 500; cursor: pointer; width: 100%; font-size: 16px;
}
button:hover { background: var(--rot-dunkel); }
button:focus-visible { outline: 2px solid var(--blau); outline-offset: 2px; }
button:disabled { opacity: .6; cursor: default; background: var(--rot); }
.zustimmung { display: flex; gap: 10px; align-items: flex-start; background: var(--grau-100); padding: 14px 16px; border-radius: 4px; }
.zustimmung input { width: auto; margin-top: 3px; flex-shrink: 0; accent-color: var(--blau); }
.zustimmung span { font-size: 13px; color: var(--grau-700); }
.meldung { padding: 14px 16px; border-radius: 4px; margin-bottom: 18px; font-size: 14px; display: none; }
.meldung.fehler { background: var(--rot-hell); color: var(--rot-dunkel); display: block; }
.fertig { text-align: center; padding: 30px 10px; }
.fertig .haken { width: 58px; height: 58px; border-radius: 50%; background: var(--gruen-hell); color: var(--gruen); font-size: 30px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; }
.honig { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
footer { text-align: center; font-size: 12px; color: #b9c4d3; padding: 22px 20px 30px; }
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; }


/* ──────────────────────────────────────────────── 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; }