/* Bewerbungstool · helle Fassung des Designs «Zukunft» (11.11.2026)
 *
 * Dunkel ist der Standard (zukunft-login.css, admin.css, bewerbung.css) und bleibt unverändert.
 * Diese Datei wird als letzte geladen. WANN sie gilt, steht nicht hier, sondern am <link> im Seitenkopf
 * (app/layout.php): media="(prefers-color-scheme: light)" = Systemeinstellung. Wählt jemand mit dem Knopf
 * in der Kopfzeile von Hand, stellt thema.js dieses media-Attribut um («all» = hell, «not all» = dunkel).
 * So stehen die hellen Werte nur einmal, ohne Skript gilt einfach das System.
 * Farbwerte wie ready4future.ch im Tageslicht (zukunft-tokens.css, :root[data-theme="light"]).
 * Aufbau: zuerst die Variablen --zl-*, danach nur noch die Stellen, die im dunklen Stil feste
 * dunkle oder weiss-transparente Werte nutzen. Das Punktenetz liest --zl-c-* (zukunft-login.js). */


:root {
  color-scheme: light;
  --zl-violet: #43279f;
  --zl-cyan: #004f63;
  --zl-mint: #0b5133;
  --zl-grad: linear-gradient(105deg, #4a2ac8, #006a88 58%, #0f7a50);
  --zl-grad-btn: linear-gradient(105deg, #4a2ad0, #08698f 58%, #0c6e47);
  --zl-ink: #ffffff;
  --zl-bg: #dfe5fb;
  --zl-text: #0d1330;
  --zl-lead: #1b2544;
  --zl-muted: #303c5a;
  --zl-line: rgba(30, 36, 90, .22);
  --zl-field: #ffffff;
  --zl-field-border: #6a7a98;
  --zl-focus: #00758b;
  --zl-err: #8f1d1d;
  --zl-window: #0d2f52;
  /* Nur hell: Flächen, Zustandsfarben, Netzfarben */
  --zl-soft: rgba(85, 64, 173, .045);
  --zl-soft-cyan: rgba(0, 117, 139, .07);
  --zl-ring: rgba(0, 117, 139, .18);
  --zl-warn: #6b4a00;
  --zl-warn-line: #b07d00;
  --zl-c-star: #24336b;
  --zl-c-a: #00607a;
  --zl-c-b: #4527b8;
  --zl-c-line: #2f48a0;
  --zl-c-k: 1.25;
}
::selection { background: rgba(0, 117, 139, .22); }

/* ---------- Himmel, Planet ---------- */
.zl-sky {
  background-image:
    radial-gradient(ellipse 58% 78% at 84% 6%, rgba(110, 80, 240, .34), transparent 62%),
    radial-gradient(ellipse 46% 60% at 4% 100%, rgba(0, 170, 200, .26), transparent 66%);
}
.zl-sky::before {
  background-image:
    radial-gradient(1.3px 1.3px at 23px 41px, rgba(36, 51, 107, .55) 60%, transparent 62%),
    radial-gradient(1px 1px at 131px 97px, rgba(36, 51, 107, .55) 60%, transparent 62%),
    radial-gradient(1.6px 1.6px at 77px 173px, rgba(0, 96, 122, .5) 60%, transparent 62%),
    radial-gradient(1px 1px at 190px 22px, rgba(36, 51, 107, .55) 60%, transparent 62%),
    radial-gradient(1.2px 1.2px at 59px 121px, rgba(36, 51, 107, .55) 60%, transparent 62%);
}
.zl-sky::after {
  background:
    linear-gradient(90deg, transparent, #4a2ad0 22%, #08698f 55%, #0c6e47 78%, transparent) left bottom / 100% 1px no-repeat,
    repeating-linear-gradient(0deg, transparent 0 3px, rgba(231, 237, 249, .5) 3px 4px);
  opacity: .22;
}
.zl-planet {
  border-top-color: rgba(0, 117, 139, .45);
  background: radial-gradient(circle at 50% 0, rgba(0, 117, 139, .16), rgba(223, 230, 244, .9) 4%, #eef1fc 12%);
  box-shadow: 0 -8px 60px -10px rgba(0, 117, 139, .18);
}

/* ---------- Kopf, Fuss ---------- */
.zl-brand-mark { box-shadow: 0 0 0 1px var(--zl-line); }
.bw-zurueck, .bw-thema { background: rgba(255, 255, 255, .8); }
.bw-zurueck:hover, .bw-thema:hover { background: #ffffff; }
.zl-footer { background: rgba(255, 255, 255, .78); }
.zl-motion-toggle { background: rgba(255, 255, 255, .8); border-color: var(--zl-field-border); }

/* ---------- Karte ---------- */
.zl-card {
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 24px 70px rgba(50, 40, 140, .18), 0 0 70px -30px rgba(85, 64, 173, .3), inset 0 1px 0 #fff;
}
@supports ((-webkit-backdrop-filter: blur(16px)) or (backdrop-filter: blur(16px))) {
  .zl-card { background: rgba(255, 255, 255, .9); }
}
.zl-card::before {
  background: conic-gradient(from var(--zl-edge), rgba(30, 36, 90, .16), #4a2ad0 8%, #08698f 16%, #0c6e47 21%, rgba(30, 36, 90, .16) 34%, rgba(30, 36, 90, .12) 70%, rgba(85, 64, 173, .35) 88%, rgba(30, 36, 90, .16));
}
.zl-card::after { background: linear-gradient(90deg, transparent, rgba(0, 117, 139, .6), transparent); }
.zl-fx { --zl-corner: rgba(0, 96, 122, .6); }
.zl-card:focus-within { box-shadow: 0 24px 70px rgba(50, 40, 140, .18), 0 0 80px -26px rgba(0, 117, 139, .45), inset 0 1px 0 #fff; }
.zl-scan { background: linear-gradient(90deg, transparent, #08698f, #0c6e47, transparent); box-shadow: 0 0 14px rgba(0, 117, 139, .5); }
.zl-rakete { filter: drop-shadow(0 4px 10px rgba(30, 49, 88, .28)); }

/* Rakete: Flamme, Flossen und Fenster behalten ihre leuchtenden Farben (nicht die dunklen Textfarben) */
.zl-stop-violet { stop-color: #7a5cf0; }
.zl-stop-cyan { stop-color: #2bb8d6; }
.zl-stop-fade { stop-color: #7a5cf0; }
.zl-r-glint { opacity: .8; }

/* ---------- Formular ---------- */
.zl-input::placeholder { color: #5d6b84; }
.zl-input:autofill { box-shadow: inset 0 0 0 1000px #eef1fc; }
.zl-input:hover { border-color: #46536e; }
.zl-input:focus, .zl-input:focus-visible { box-shadow: 0 0 0 5px var(--zl-ring); }
.zl-input[aria-invalid="true"] { border-color: #b3261e; }
select.zl-input option { background: #ffffff; }
.zl-btn { background: var(--zl-grad-btn); box-shadow: 0 10px 30px rgba(0, 117, 139, .18); }
.zl-btn:hover { box-shadow: 0 12px 32px -6px rgba(0, 117, 139, .4); }
.zl-btn:focus-visible { box-shadow: 0 0 0 6px var(--zl-ring), 0 12px 32px -6px rgba(0, 117, 139, .4); }
.zl-btn--ghost { color: var(--zl-text); background: rgba(85, 64, 173, .06); border-color: var(--zl-focus); box-shadow: none; }
.zl-btn--ghost:hover { background: rgba(0, 117, 139, .1); border-color: var(--zl-cyan); box-shadow: none; }
.bw-datei::file-selector-button { background: var(--zl-soft-cyan); border-color: var(--zl-focus); }

/* ---------- Meldungen ---------- */
.zl-alert--error { color: var(--zl-err); background: #fdecec; border-color: #d98a83; }
.zl-alert--ok { color: var(--zl-mint); background: #e8f7f0; border-color: #7cc4a4; }
.zl-alert--info { color: var(--zl-lead); background: #edf4fa; border-color: #8dbccb; }
.bw-meldungen .zl-alert { box-shadow: 0 10px 26px -14px rgba(30, 36, 90, .45); }
.bw-meldungen .zl-alert--error { background-color: #fdecec; }
.bw-meldungen .zl-alert--ok { background-color: #e8f7f0; }
.bw-meldungen .zl-alert--info { background-color: #edf4fa; }

/* ---------- Flächen (statt weiss-transparent) ---------- */
.bw-info { background: var(--zl-soft-cyan); }
.bw-gruppe, .bw-text, .bw-notiz, .bw-kasten, .ad-aufklappen, .ad-settings-bereich, .ad-status-bereich, .ad-status-protokoll, .ad-risiko { background: var(--zl-soft); }
.ad-settings-speichern { background: rgba(255, 255, 255, .97); border-color: var(--zl-focus); box-shadow: 0 -8px 24px rgba(30, 36, 90, .16); }

/* ---------- Navigation, Kacheln, Tabelle ---------- */
.ad-nav-link, button.ad-nav-link, .ad-menue-kopf { background: #ffffff; border-color: var(--zl-field-border); }
.ad-nav-link:hover { border-color: var(--zl-cyan); }
.ad-nav-link.ist-aktiv { background: rgba(0, 117, 139, .1); border-color: var(--zl-focus); }
.ad-zahl, .ad-nav-link.ist-aktiv .ad-zahl { background: rgba(0, 117, 139, .14); }
.ad-zahl--warn { background: #fdecec; color: var(--zl-err); }
.ad-kachel { background: linear-gradient(150deg, #ffffff, #f1f3fd); box-shadow: 0 8px 22px -16px rgba(50, 40, 140, .5); }
a.ad-kachel:hover { background: #eaf4f8; }
.ad-kachel--warn { border-left-color: var(--zl-warn-line); }
.ad-kachel--err { border-left-color: #b3261e; }
.ad-tabelle th { background: rgba(0, 117, 139, .06); }
.ad-tabelle tbody tr:nth-child(even) { background: rgba(85, 64, 173, .035); }
.ad-tabelle tbody tr:hover { background: rgba(0, 117, 139, .07); }

/* ---------- Badges, Hinweise, Ampel ---------- */
.ad-badge--ok { border-color: #7cc4a4; background: #e8f7f0; }
.ad-badge--warn { border-color: #d6ad55; background: #fdf3d7; color: var(--zl-warn); }
.ad-badge--err { border-color: #d98a83; background: #fdecec; color: var(--zl-err); }
.ad-badge--info { border-color: #8dbccb; background: #e6f4f8; }
.ad-warn { color: var(--zl-warn); }
.ad-fehlt { color: var(--zl-err); }
.ad-notiz { border-left-color: var(--zl-warn-line); }
.bw-gefahr { border-color: #b3261e; color: var(--zl-err); }
.bw-rueckfrage[open] > summary { color: var(--zl-err); }
.bw-ampel--gruen::before { border-color: #0b6a3f; background: #22a468; box-shadow: none; }
.bw-ampel--gelb::before { border-color: #8a6200; background: #f2b705; box-shadow: none; }
.bw-ampel--rot::before { border-color: #a01c1c; background: #dc3a3a; box-shadow: none; }
.bw-ampelwahl button[aria-pressed="true"] { background: rgba(0, 117, 139, .12); box-shadow: inset 0 0 0 1px var(--zl-cyan); }
.bw-ampelwahl label:has(input:checked) { background: rgba(0, 117, 139, .1); }