/* Bewerbungstool: Ergänzungen zum Design «Zukunft» (zukunft-login.css) und zu den Admin-Bausteinen (admin.css). */

.bw-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---------- Öffentliches Formular ---------- */
.zl-card.bw-card { width: min(820px, 100%); padding: 32px clamp(20px, 4vw, 44px) 36px; }
.bw-card h1 { margin-bottom: .6rem; }
.bw-card p { color: var(--zl-lead); }
.bw-form { margin-top: 1.6rem; }
.bw-info { margin: 1.2rem 0 0; padding: 1rem 1.2rem .2rem; border-left: 3px solid var(--zl-cyan); border-radius: 0 12px 12px 0; background: rgba(105, 225, 245, .05); }
.bw-info p { margin: 0 0 .8rem; font-size: .95rem; }
.bw-gruppe { margin: 0 0 1.6rem; padding: 1.3rem clamp(14px, 3vw, 24px) .4rem; border: 1px solid var(--zl-line); border-radius: 16px; background: rgba(255, 255, 255, .02); min-width: 0; }
.bw-gruppe legend { padding: 0 .6rem; font-family: var(--zl-title); font-size: 1.25rem; font-weight: 700; letter-spacing: .02em; color: var(--zl-text); }
.bw-gruppe > .zl-hint { margin: 0 0 1.1rem; text-align: left; }
.bw-pflicht { color: var(--zl-cyan); font-weight: 700; }
.bw-optional { color: var(--zl-muted); font-weight: 400; }
.bw-fehler, .bw-card p.bw-fehler { margin: .45rem 0 0; color: var(--zl-err); font-size: .88rem; font-weight: 600; }
.bw-card p.bw-fehler::before { content: '\26A0\FE0E  '; }
.bw-dateiliste { margin: .4rem 0 0; font-size: .85rem; color: var(--zl-muted); overflow-wrap: anywhere; }
.bw-dateiliste:empty { display: none; }
.bw-fehlerliste { margin: .6rem 0 0; padding-left: 1.2rem; }
.bw-fehlerliste li { margin: .2rem 0; }
.zl-input[aria-invalid="true"] { border-color: var(--zl-err); }
.zl-field .zl-hint { margin: .45rem 0 0; text-align: left; }
select.zl-input { appearance: auto; }
select.zl-input option { background: #0d1524; color: var(--zl-text); }
.bw-sprache { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0 1rem; }
.bw-sprache[hidden], [data-andere-feld][hidden], .bw-mehr[hidden] { display: none; }
@media (max-width: 520px) { .bw-sprache { grid-template-columns: 1fr; padding-bottom: .4rem; margin-bottom: .8rem; border-bottom: 1px dashed var(--zl-line); } }
.bw-mehr { width: auto; min-height: 44px; margin: 0 0 1.1rem; padding: 6px 16px; font-size: .9rem; }
.bw-datei { height: auto; padding: 10px; line-height: 1.4; cursor: pointer; }
.bw-datei::file-selector-button { margin-right: .9rem; padding: .45rem .9rem; border: 1px solid var(--zl-cyan); border-radius: 8px; background: rgba(105, 225, 245, .1); color: var(--zl-text); font: inherit; font-size: .88rem; font-weight: 600; cursor: pointer; }
.bw-abschluss { margin-top: 1.8rem; }
.bw-abschluss .ad-check { align-items: flex-start; font-size: .95rem; }
.bw-abschluss .ad-check input { width: 1.2rem; height: 1.2rem; flex: none; }
.bw-abschluss .zl-btn { margin-top: .6rem; }

/* ---------- Adminbereich ---------- */
.bw-abmelden { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 0 auto; }
.bw-abmelden button { cursor: pointer; font-family: inherit; }
.bw-ampel { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.bw-ampel::before { content: ''; width: .95rem; height: .95rem; flex: none; border-radius: 50%; border: 2px solid var(--zl-field-border); background: transparent; }
.bw-ampel--gruen::before { border-color: #4fe0a0; background: #4fe0a0; box-shadow: 0 0 10px rgba(79, 224, 160, .55); }
.bw-ampel--gelb::before { border-color: #f4d28b; background: #f4d28b; box-shadow: 0 0 10px rgba(244, 210, 139, .5); }
.bw-ampel--rot::before { border-color: #ff7b7b; background: #ff7b7b; box-shadow: 0 0 10px rgba(255, 123, 123, .5); }
.bw-ampel-text { font-size: .9rem; }

/* Ampel-Wahl: drei grosse Knöpfe (Radio), der gewählte leuchtet */
.bw-ampelwahl { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 .8rem; padding: 0; border: 0; }
.bw-ampelwahl legend { padding: 0; margin-bottom: .5rem; font-size: .875rem; font-weight: 600; }
.bw-ampelwahl label, .bw-ampelwahl button { position: relative; display: inline-flex; align-items: center; gap: .5rem; min-height: 44px; padding: .4rem .9rem; border: 1px solid var(--zl-field-border); border-radius: 999px; background: none; color: var(--zl-text); font: inherit; font-size: .9rem; cursor: pointer; }
.bw-ampelwahl button:hover { border-color: var(--zl-cyan); }
.bw-ampelwahl button[aria-pressed="true"] { border-color: var(--zl-cyan); background: rgba(105, 225, 245, .14); font-weight: 600; }
.bw-ampelwahl button:focus-visible { outline: 2px solid var(--zl-focus); outline-offset: 2px; }
.bw-ampelwahl input { position: absolute; opacity: 0; pointer-events: none; }
.bw-ampelwahl label:has(input:checked) { border-color: var(--zl-cyan); background: rgba(105, 225, 245, .1); }
.bw-ampelwahl label:has(input:focus-visible) { outline: 2px solid var(--zl-focus); outline-offset: 2px; }

.bw-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin: 0 0 1.2rem; }
.bw-kopf h1 { margin: 0; }
.bw-daten { display: grid; grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr); gap: .45rem 1.2rem; margin: 0 0 1.4rem; }
.bw-daten dt { color: var(--zl-muted); font-size: .86rem; }
.bw-daten dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 520px) { .bw-daten { grid-template-columns: 1fr; gap: .1rem; } .bw-daten dd { margin-bottom: .6rem; } }
.bw-text { margin: 0 0 1.4rem; padding: .9rem 1.1rem; border: 1px solid var(--zl-line); border-radius: 12px; background: rgba(255, 255, 255, .025); white-space: pre-wrap; overflow-wrap: anywhere; }
.bw-dateien { margin: 0 0 1.4rem; padding: 0; list-style: none; }
.bw-dateien li { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem .8rem; padding: .55rem 0; border-bottom: 1px solid var(--zl-line); }
.bw-dateien li:last-child { border-bottom: 0; }
.bw-notiz { margin: 0 0 .9rem; padding: .7rem .9rem; border-left: 3px solid var(--zl-cyan); background: rgba(255, 255, 255, .025); border-radius: 0 10px 10px 0; }
.bw-notiz-kopf { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem .8rem; margin: 0 0 .3rem; font-size: .8rem; color: var(--zl-muted); }
.bw-notiz-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.bw-kasten { margin: 0 0 1.4rem; padding: 1rem 1.1rem; border: 1px solid var(--zl-line); border-radius: 14px; background: rgba(255, 255, 255, .025); }
.bw-kasten > :last-child { margin-bottom: 0; }
.bw-knoepfe { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1rem; }
.bw-knoepfe .zl-btn, .bw-knoepfe form .zl-btn { width: auto; min-width: 0; min-height: 44px; padding: 8px 16px; font-size: .92rem; }
.bw-knoepfe form { margin: 0; }
.bw-gefahr { border-color: rgba(255, 154, 154, .5); color: #ff9a9a; }
.bw-suche { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: 0 0 1rem; }
.bw-suche .zl-input { width: min(22rem, 100%); min-height: 42px; }
.bw-suche .zl-btn { width: auto; min-width: 0; min-height: 42px; padding: 8px 16px; }
.bw-mailtext { font-family: var(--zl-mono); font-size: .88rem; min-height: 22rem; }
.ad-tabelle a.bw-name { color: var(--zl-text); font-weight: 600; }
.zl-card--admin .ad-form.bw-breit { max-width: 780px; }
button.ad-nav-link { background: rgba(255, 255, 255, .03); }

/* Rückmeldungen bleiben beim Scrollen sichtbar (die Seite springt nach dem Speichern an die alte Stelle zurück). */
.bw-meldungen { position: sticky; top: 8px; z-index: 5; margin: 0 0 1.2rem; }
.bw-meldungen .zl-alert { margin: 0 0 .4rem; max-width: none; background-color: #0d1524; box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .9); }

/* Detailseite: links Angaben und Unterlagen, rechts die Arbeit (Ampel, Notizen, Termin, Mails). Am Handy: Angaben, Arbeit, Unterlagen. */
.bw-detail { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 2.2rem; align-items: start; }
.bw-aktionen { grid-column: 2; grid-row: 1 / span 2; }
.bw-unterlagen { grid-column: 1; }
@media (max-width: 840px) { .bw-detail { grid-template-columns: minmax(0, 1fr); } .bw-aktionen, .bw-unterlagen { grid-column: 1; grid-row: auto; } }
.bw-terminzeit { display: grid; grid-template-columns: minmax(9.5rem, 1.3fr) minmax(7rem, 1fr) minmax(5.5rem, .7fr); gap: 0 .6rem; }
@media (max-width: 460px) { .bw-terminzeit { grid-template-columns: 1fr 1fr; } }
.bw-rueckfrage { margin: .4rem 0 0; }
.bw-rueckfrage > summary { display: inline-flex; align-items: center; min-height: 44px; color: var(--zl-muted); font-size: .86rem; text-decoration: underline; cursor: pointer; }
.bw-rueckfrage[open] > summary { color: #ff9a9a; }
.bw-rueckfrage form { margin: .3rem 0 .6rem; }
.bw-rueckfrage .zl-btn { width: auto; min-height: 44px; padding: 8px 16px; font-size: .9rem; }
.zl-card--admin .ad-inline .zl-btn, .zl-card--admin .ad-inline .zl-input { min-height: 44px; }
@media (max-width: 520px) { .ad-kacheln { grid-template-columns: 1fr 1fr; gap: .6rem; } .ad-kachel { padding: .8rem; } .ad-kachel-wert { font-size: 1.8rem; } }

/* ---------- Kopfzeile: Rücklink zu ready4future.ch und Umschalter hell/dunkel (thema.js) ---------- */
.bw-kopfzeile { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; }
.bw-kopfzeile .zl-brand { min-width: 0; }
.bw-kopf-rechts { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-left: auto; }
.bw-zurueck, .bw-thema { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; border: 1px solid var(--zl-field-border); border-radius: 999px; background: rgba(13, 19, 34, .62); color: var(--zl-text); font: inherit; font-size: 1rem; font-weight: 600; text-decoration: none; cursor: pointer; transition: border-color .15s, color .15s, background .15s; }
.bw-zurueck { gap: 8px; padding: 6px 16px; white-space: nowrap; }
.bw-thema { width: 44px; padding: 0; flex: none; }
.bw-thema[hidden] { display: none; }
.bw-zurueck:hover, .bw-thema:hover { border-color: var(--zl-cyan); color: var(--zl-cyan); }
.bw-zurueck:focus-visible, .bw-thema:focus-visible { outline: 3px solid var(--zl-focus); outline-offset: 3px; }
.bw-thema svg { display: block; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* Gezeigt wird das Ziel: im dunklen Design die Sonne, im hellen der Mond */
.bw-thema .bw-thema-mond { display: none; }
:root[data-theme="light"] .bw-thema .bw-thema-sonne { display: none; }
:root[data-theme="light"] .bw-thema .bw-thema-mond { display: block; }
/* Handy: öffentlich stehen Rücklink (links) und Umschalter (rechts) in einer eigenen Zeile; im Adminbereich bleibt der Umschalter neben der Marke */
@media (max-width: 560px) {
  .bw-kopf-rechts { flex: 1 0 100%; justify-content: space-between; }
  .bw-admin .bw-kopfzeile { flex-wrap: nowrap; }
  .bw-admin .bw-kopf-rechts { flex: none; }
}
@media (prefers-reduced-motion: reduce) { .bw-zurueck, .bw-thema { transition: none; } }
@media print { .bw-kopf-rechts { display: none; } }