/* seiten/mitarbeiter.css – G2 Mitarbeiter – mitarbeiter.html (+ mitarbeiter.js)
   Wird von base.html auf JEDER Seite nach app.css geladen (?v=STATIC_VERSION).
   Nur Selektoren dieser Gruppe. Tokens (var(--…)) nur aus app.css, keine neuen Farbwerte hier. */

/* Mitarbeiterinnen: farbige Flächen helfen beim Wiedererkennen */
body.arbeit .tile.abreise { background: var(--abreise-bg); }
body.arbeit .tile.bleiber { background: var(--bleiber-bg); }
body.arbeit .tile.zeit { background: var(--zeit-bg); }
body.arbeit .tile:not(.gross) { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 14px 8px 12px; }
body.arbeit .tile:not(.gross) .ic { width: 20px; height: 20px; }
body.arbeit .tile:not(.gross) b { order: 2; font-size: var(--fs-2xl); }
body.arbeit .tile:not(.gross) span { order: 3; }
.tile.gross { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 6px; padding: 26px 16px 22px; }
.tile.gross .ic { width: 26px; height: 26px; }
.tile.gross b { font-size: var(--fs-display); }
.tile.gross span { font-size: var(--fs-md); }
/* ===== Mitarbeiter-Ansicht ===== */
body.arbeit main { padding-top: var(--s5); padding-bottom: 104px; }
/* Netz-Hinweis schwebt unten: schiebt die Zähler nie unter dem Daumen weg */
.netz { position: fixed; left: 12px; right: 12px; bottom: calc(12px + env(safe-area-inset-bottom)); z-index: 25; margin: 0 auto; max-width: 560px;
  padding: 12px 16px 12px 46px; border-radius: var(--r-m); font-weight: 600; font-size: var(--fs-md); line-height: 1.35;
  background: var(--warn-bg); color: var(--warn-ink); border: 1px solid oklch(0.78 0.12 80 / 0.55); box-shadow: var(--shadow-3); }
.netz::before { content: ""; position: absolute; left: 16px; top: 50%; width: 20px; height: 20px; margin-top: -10px; background: currentColor;
  -webkit-mask: var(--m-sync) center / contain no-repeat; mask: var(--m-sync) center / contain no-repeat; }
.netz a { color: inherit; font-weight: 700; }
.netz.ok { background: var(--ok-bg); color: var(--ok-ink); }
.netz.offline::before { -webkit-mask-image: var(--m-wifi-off); mask-image: var(--m-wifi-off); }
.begruessung { display: flex; align-items: center; gap: 14px; margin-bottom: var(--s5); }
.gruss-ic { width: 46px; height: 46px; flex: none; border-radius: var(--r-m); display: grid; place-items: center; background: var(--brand-tint); color: var(--brand-text); }
.gruss-ic .ic { width: 24px; height: 24px; }
.begruessung > div { min-width: 0; }
.begruessung .gruss, .begruessung b { font-family: var(--f-titel); font-size: var(--fs-xl); font-weight: 700; display: block; line-height: 1.2; margin: 0 0 2px; letter-spacing: -.01em; }
.gruss-zeile { color: var(--ink-2); font-size: var(--fs-md); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.gruss-zeile .ic { width: 16px; height: 16px; color: var(--ink-3); }
.riesig { width: 100%; min-height: 96px; padding: 0 24px; border: 0; border-radius: var(--r-xl); font: inherit; font-family: var(--f-titel); font-size: var(--fs-xl); font-weight: 700;
  line-height: 1.15; letter-spacing: -.01em; display: flex; align-items: center; justify-content: center; gap: 16px; cursor: pointer; touch-action: manipulation; text-wrap: balance;
  transition: transform .12s var(--ease), background-color .15s var(--ease); }
.riesig .ic { width: 28px; height: 28px; }
.riesig.start { min-height: 148px; background: var(--start-bg); color: var(--on-brand); font-size: clamp(1.45rem, 6.4vw, 1.75rem);
  box-shadow: 0 1px 2px oklch(0.314 0.068 153.2 / 0.3), 0 20px 36px -24px oklch(0.314 0.068 153.2 / 0.8); }
.riesig.start .start-kreis { width: 60px; height: 60px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); }
.riesig.start .start-kreis .ic { width: 26px; height: 26px; margin-left: 3px; }
.riesig.start.nochmal { min-height: 76px; margin-top: var(--s2); background: var(--card); color: var(--brand-text); font-size: var(--fs-lg);
  box-shadow: inset 0 0 0 1.5px var(--brand-text); }
.riesig.start.nochmal .start-kreis { width: 40px; height: 40px; }
.riesig.start.nochmal .start-kreis .ic { width: 18px; height: 18px; margin-left: 2px; }
.riesig.ende { min-height: 64px; margin-top: var(--s6); background: transparent; color: var(--err-ink); border: 2px solid var(--err-ink); font-size: var(--fs-lg); }
.riesig.ende .ic { width: 22px; height: 22px; }
@media (hover: hover) { .riesig.start:hover { background: var(--brand-2); } .riesig.start.nochmal:hover { background: var(--brand-tint); } .riesig.ende:hover { background: var(--err-bg); } }
.tagesstand { margin: 0 0 var(--s5); }
.tagesstand h2 { color: var(--ok-ink); }
.tagesstand h2 .ic { color: var(--ok-ink); }
.tagesstand h2 { margin-bottom: 4px; }
.tagesstand .lob { margin: 0 0 var(--s3); color: var(--ink-2); }
.tagesstand .zeilen { display: flex; gap: 8px; flex-wrap: wrap; color: var(--ink-2); margin-bottom: var(--s3); }
.tagesstand .zeilen span { padding: 3px 10px; border-radius: var(--r-pill); background: var(--sunken); box-shadow: inset 0 0 0 1px var(--line-soft); font-size: var(--fs-md); font-weight: 600; }
.tagesstand .kacheln { margin-bottom: 0; }
.laeuft-seit { display: flex; align-items: center; gap: 12px; margin-bottom: var(--s5); padding: 12px 16px; border-radius: var(--r-m); font-weight: 600;
  background: var(--ok-bg); color: var(--ok-ink); }
.laeuft-satz { flex: 1; min-width: 0; text-wrap: balance; }
.laeuft-dauer { flex: none; white-space: nowrap; font-size: var(--fs-sm); }
.laeuft-dauer b { font: 750 var(--fs-xl)/1 var(--f-titel); margin-right: 3px; }
body.rolle-public .laeuft-dauer { display: none; }
.punkt { position: relative; width: 10px; height: 10px; flex: none; border-radius: 50%; background: var(--live); }
.punkt::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--live); animation: puls-ring 2.4s var(--ease) 3; }
.nr-label { font-size: var(--fs-md); font-weight: 600; color: var(--ink-2); }
input.nr { text-align: center; font-family: var(--f-titel); font-size: 1.5rem; font-weight: 700; letter-spacing: .06em; text-indent: .06em; min-height: 60px;
  margin-bottom: var(--s3); border-width: 2px; }
.zaehler { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.zaehl { --fill: var(--abreise-fill); position: relative; min-height: 210px; padding: 18px 10px; border: 0; border-radius: var(--r-xl); cursor: pointer; font: inherit;
  touch-action: manipulation; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; user-select: none; -webkit-user-select: none;
  background: var(--fill); color: var(--on-fill); transition: transform .12s var(--ease); }
.zaehl.abreise { --fill: var(--abreise-fill); }
.zaehl.bleiber { --fill: var(--bleiber-fill); }
.zaehl .zahl { font-family: var(--f-titel); font-size: var(--fs-counter); font-weight: 750; line-height: 1; letter-spacing: -.02em; }
.zaehl .wort { display: flex; align-items: center; gap: 6px; font-size: var(--fs-lg); font-weight: 700; }
.zaehl .wort .ic { width: 22px; height: 22px; }
.zaehl .plus { margin-top: 6px; display: inline-flex; align-items: center; gap: 2px; padding: 7px 20px 7px 14px; border-radius: var(--r-pill);
  background: var(--on-fill); color: var(--fill); font: 800 var(--fs-xl)/1.1 var(--f-titel); }
.zaehl .plus .ic { width: 20px; height: 20px; }
.zaehl:active { transform: scale(.96); }
/* Tipp: weisser Ring blitzt auf, Ziffer springt – Rueckmeldung genau unter dem Daumen */
.zaehl::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; box-shadow: inset 0 0 0 5px oklch(1 0 0 / .85); }
.zaehl.blitz::before { animation: zaehl-ring .5s var(--ease); }
.zaehl.blitz .zahl { animation: zahl-hoch .24s var(--ease); }
@keyframes zaehl-ring { from { opacity: 1; } to { opacity: 0; } }
@keyframes zahl-hoch { from { transform: translateY(8px) scale(.92); opacity: .35; } to { transform: none; opacity: 1; } }
/* Tagesstand zwischen +1 und −1: ermutigt und trennt die Gegen-Aktionen (≥ 24px Abstand) */
.geschafft { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 28px; margin: var(--s4) 0 var(--s3); color: var(--ink-2); font-weight: 600; }
.geschafft .ic { width: 22px; height: 22px; color: var(--accent-line); }
.geschafft b { font: 750 var(--fs-xl)/1 var(--f-titel); color: var(--ink); }
.zurueck-reihe { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 0; }
.zurueck-reihe .knopf { min-height: 46px; padding: 0 10px; gap: 6px; font-size: var(--fs-md); font-weight: 600; color: var(--ink-2); white-space: nowrap; }
.zurueck-reihe .knopf .ic { width: 18px; height: 18px; }
@media (max-width: 380px) { .zurueck-reihe .ic { display: none; } }
.klein-titel:has(+ .letzte:empty) { display: none; }
.letzte { list-style: none; padding: 0; margin: 0; }
.letzte li { display: grid; grid-template-columns: 26px minmax(0, 1fr) 6ch 5.5ch 18px; gap: 12px; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.letzte li:last-child { border-bottom: 0; }
.letzte li::before { content: ""; width: 20px; height: 20px; justify-self: center; background: var(--abreise);
  -webkit-mask: var(--m-abreise) center / contain no-repeat; mask: var(--m-abreise) center / contain no-repeat; }
.letzte li.bleiber::before { background: var(--bleiber); -webkit-mask-image: var(--m-bleiber); mask-image: var(--m-bleiber); }
.letzte li span { font-weight: 600; }
.letzte li.abreise span { color: var(--abreise); }
.letzte li.bleiber span { color: var(--bleiber); }
.letzte b, .letzte time { text-align: end; }
.letzte time { color: var(--ink-3); font-size: var(--fs-md); }
/* Gesendet = Haken; noch auf dem Handy = Bernstein-Zeile mit Pfeilen (statt ausgegraut) */
.letzte li::after { content: ""; width: 18px; height: 18px; background: var(--ok-ink);
  -webkit-mask: var(--m-check) center / contain no-repeat; mask: var(--m-check) center / contain no-repeat; }
.letzte li.wartet { margin-inline: -10px; padding-inline: 10px; border-radius: var(--r-s); background: var(--warn-bg); border-bottom-color: transparent; }
.letzte li.wartet::after { background: var(--warn-ink); -webkit-mask-image: var(--m-sync); mask-image: var(--m-sync); }
.letzte li.wartet time { color: var(--warn-ink); font-weight: 700; }
/* Arbeit: Rückmeldung oben, weit weg von „Schicht beenden" */
body.arbeit .toast { bottom: auto; top: calc(73px + env(safe-area-inset-top)); transform: translateY(-12px); }
body.arbeit.mit-testleiste .toast { top: calc(102px + env(safe-area-inset-top)); }
body.arbeit .toast.zeigen { transform: none; }
@media (forced-colors: active) {
  .zaehl, .riesig { border: 2px solid ButtonText; }
  .letzte li::before, .letzte li::after, .netz::before { forced-color-adjust: none; background: CanvasText; }
}