/* Mitarbeiter-App (Handy) – wird nur von handy.html geladen, zuletzt (nach sachlich.css).
   Ruhig und sachlich: klare Linien, große Tippflächen (mind. 44 px), Hauptaktion je Bildschirm deutlich, Bottom-Sheets. */

:root { --h-nav: 64px; --h-rand: 14px; }
body { font-size: 16px; line-height: 1.45; background: var(--bg); }
main { max-width: 560px; margin: 0 auto; padding: 12px var(--h-rand) calc(var(--h-nav) + 32px + env(safe-area-inset-bottom)); }
h1 { font-size: 20px; margin: 0; }
h2 { font-size: 16px; }
.note { font-size: 13px; }
p.ok, p.error, p.warn { margin: 0 0 12px; }
p.ok { background: var(--ok-bg); color: var(--ok); border: 1px solid #a7f3d0; padding: 10px 12px; border-radius: 8px; }
p.error:not(:empty) { background: var(--err-bg); color: var(--err); border: 1px solid #fecaca; padding: 10px 12px; border-radius: 8px; }
p.warn { border-width: 1px; border-radius: 8px; }
.card { margin-bottom: 12px; padding: 16px; border: 1px solid var(--border); }
.card > h2:first-child { margin: -2px -16px 12px; padding: 0 16px 10px; }
.card.klein { padding: 0; }
.card.klein > summary { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 12px 16px; list-style: none; }
.card.klein > summary::-webkit-details-marker { display: none; }
.card.klein[open] > summary { margin: 0; border-bottom: 1px solid var(--line); }
details.aufklapp > summary { display: flex; align-items: center; min-height: 44px; margin: 4px 0; color: var(--marke-dunkel); font-size: 14px; }
.card.klein > :not(summary) { margin-left: 16px; margin-right: 16px; }
.card.klein > :not(summary):last-child { margin-bottom: 16px; }
.card.klein > :nth-child(2) { margin-top: 12px; }
.card.klein > .aufgaben, .card.klein > .cl-karte { margin-left: 12px; margin-right: 12px; }
details > summary { cursor: pointer; }
.mitte { text-align: center; }
.ds-tor { margin: 16px auto; }
.ds-tor ul li { padding-left: 12px; border-left: 3px solid var(--marke-hell); }

/* Kopfleiste: schlank */
header.top { min-height: 52px; padding: 6px var(--h-rand); box-shadow: inset 0 -3px 0 var(--akzent); }
header.top .brand { font-size: 20px; }
header.top .brand-logo img { width: 30px; height: 30px; }
.netz-weg { position: sticky; top: 52px; z-index: 25; margin: 0 calc(-1 * var(--h-rand)) 10px; padding: 8px var(--h-rand); background: var(--warn-bg); color: var(--warn); border-bottom: 1px solid #fde68a; font-weight: 600; font-size: 14px; }

/* Knöpfe: Fingergröße */
.btn { min-height: 44px; padding: 10px 16px; font-size: 16px; border-width: 1px; }
.btn.small { min-height: 44px; padding: 8px 14px; font-size: 14px; }
.btn.klein { min-height: 44px; padding: 6px 12px; font-size: 14px; }
.btn.link { min-height: 44px; padding: 0 6px; }
.btn.breit, .btn.voll { display: flex; width: 100%; }
.btn.primary { background: var(--marke); }
.btn.primary:hover:not(:disabled) { background: var(--marke-dunkel); filter: none; }
.btn.gefahr { background: var(--err); color: #fff; border-color: transparent; }
.btn.leise { background: var(--surface-2); border-color: var(--border); }
.btn .ico { flex: none; }
input, select, textarea { font-size: 16px; min-height: 44px; } /* 16 px: iPhone zoomt sonst beim Tippen */
textarea { min-height: 80px; }
input[type="checkbox"], input[type="radio"] { min-height: 0; width: 20px; height: 20px; }
label.f { font-size: 13px; color: var(--muted); font-weight: 600; margin: 10px 0; }
label.f input, label.f select, label.f textarea { font-size: 16px; }
label.check { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; margin: 10px 0; }
label.check input { flex: none; margin-top: 1px; }
.grid2 { gap: 0 12px; }
@media (max-width: 380px) { .grid2.immer { grid-template-columns: 1fr 1fr; } }

/* Abschnittsköpfe in den Reitern */
.kopf { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 4px 0 12px; }
.kopf h1 { margin: 0; }
.kopf .unter { display: block; font: 500 14px/1.3 var(--font); color: var(--muted); margin-top: 2px; }
.h-abschnitt { margin: 24px 0 8px; }
.h-titel { font-size: 16px; margin: 0 0 10px; }
.h-titel.blinkt { box-shadow: inset 3px 0 0 var(--err); padding-left: 10px; }
.leer-zustand { display: flex; gap: 10px; align-items: center; padding: 14px 16px; border: 1px dashed var(--border); border-radius: 8px; color: var(--muted); background: var(--surface); margin: 0 0 12px; }
.leer-zustand .ico { color: var(--ok); flex: none; }

/* Reiterleiste unten: Daumen-erreichbar */
.reiter.unten { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 30; margin: 0; display: flex; justify-content: center; gap: 0;
  padding: 4px 4px calc(4px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--border); border-radius: 0; box-shadow: 0 -2px 10px rgba(15, 23, 42, .06); }
.reiter.unten button { position: relative; flex: 1; max-width: 140px; min-height: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  padding: 6px 2px; border: 0; border-radius: 8px; background: none; color: #4b5563; font: 600 12px/1.1 var(--font); cursor: pointer; }
.reiter.unten button.aktiv { color: var(--marke); background: var(--marke-hell); }
.reiter.unten button.aktiv .r-ico { color: var(--marke); }
.reiter.unten .r-ico { display: inline-flex; color: #6b7280; }
.reiter.unten .badge { position: absolute; top: 3px; left: calc(50% + 6px); min-width: 20px; padding: 0 5px; border-radius: 10px; background: var(--err); color: #fff; font: 700 12px/18px var(--font); text-align: center; }
.toasts { bottom: calc(var(--h-nav) + 16px + env(safe-area-inset-bottom)); }
dialog .toasts { bottom: 90px; }
.toast { text-align: center; border-radius: 8px; font-size: 14px; }
.fehler-karte .btn { margin-top: 8px; }
.btn.laedt { opacity: .7; pointer-events: none; }

/* Untere Leiste in Plan: Segmente */
.segmente { display: flex; gap: 2px; padding: 3px; margin: 0 0 14px; background: #e7ebf1; border-radius: 8px; }
.segmente button { position: relative; flex: 1; min-height: 44px; border: 0; background: none; border-radius: 6px; font: 600 14px/1.1 var(--font); color: #4b5563; cursor: pointer; padding: 4px 2px; }
.segmente button.aktiv { background: #fff; color: var(--marke-dunkel); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.segmente .zahl { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px; background: var(--err); color: #fff; font: 700 12px/17px var(--font); }

/* ---------- Anmeldung ---------- */
.login { margin: 24px auto; max-width: 420px; padding: 24px 20px; }
.login-brand { margin: 0 0 14px; font-size: 26px; }
.login-brand img { width: 72px; height: 72px; }
.login h1 { font-size: 20px; margin: 4px 0 10px; }
.login .pin-feld { font-size: 26px; letter-spacing: .5em; text-align: center; font-weight: 700; padding-left: .5em; }
.login .mc-feld { text-transform: uppercase; letter-spacing: .15em; font-weight: 700; text-align: center; }
.login .btn.primary { min-height: 50px; font-size: 16px; }
.login .unten { text-align: center; margin: 18px 0 0; font-size: 14px; }
.login .app-hinweis { margin-top: 18px; }
.markt-zeile { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 0 0 4px; }

/* ---------- Heute: Stempeln ---------- */
.live { text-align: center; position: relative; overflow: hidden; padding: 18px 16px 16px; border-top: 4px solid var(--border); }
.live::before { display: none; }
.live.da { border-top-color: #059669; } .live.pause { border-top-color: #d97706; }
.live-status { display: inline-flex; align-items: center; gap: 8px; font-weight: 650; font-size: 16px; color: var(--text); }
.live-status .punkt { width: 10px; height: 10px; border-radius: 50%; background: #9ca3af; flex: none; }
.live.da .live-status .punkt { background: #059669; } .live.pause .live-status .punkt { background: #d97706; }
.live-status b { color: var(--marke-dunkel); }
.live-uhr { font: 700 48px/1.1 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 6px 0 2px; color: var(--marke-dunkel) !important; }
.live-soll { color: var(--muted); font-size: 14px; }
.live-infos { display: grid; gap: 2px; margin-top: 6px; font-size: 14px; color: var(--muted); }
.live-infos b { color: var(--text); }
.stempel { display: flex; gap: 10px; margin-top: 14px; }
.stempel button { flex: 1; min-height: 60px; font: 700 20px/1.1 var(--font); color: #fff; border: none; border-radius: 8px !important; padding: 12px 8px; box-shadow: none !important; cursor: pointer; }
.stempel button:active { transform: translateY(1px); }
.stempel button:disabled { opacity: .5; }
.stempel button.kommen { background: #047857 !important; }
.stempel button.gehen { background: #b91c1c !important; }
.stempel button.pause { background: #b45309 !important; }
.live .zweit { margin-top: 10px; display: flex; justify-content: center; }
.live .zweit .btn { color: var(--marke); }
.frage { background: var(--warn-bg); border: 1px solid #fde68a; border-radius: 8px; padding: 12px; margin-top: 12px; text-align: left; }
.frage p { margin: 0 0 10px; font-weight: 600; }
.frage .knoepfe { display: flex; gap: 8px; } .frage .knoepfe .btn { flex: 1; }
#meldung .ok, #meldung .warn, #meldung .error { margin: 12px 0 0; text-align: left; }
.kein-stempeln { margin: 12px 0 0; padding: 10px 12px; background: var(--surface-2); border-radius: 8px; font-size: 14px; color: var(--muted); }

/* Abteilung wählen (Sheet) */
.abt-liste { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0; }
.abt-liste button { min-height: 52px; border: 1px solid var(--border); border-left: 6px solid var(--abt, #6b7280); border-radius: 8px; background: #fff; font: 600 16px/1.2 var(--font); color: var(--text); text-align: left; padding: 8px 12px; cursor: pointer; }
.abt-liste button[aria-current] { background: var(--marke-hell); border-color: var(--marke); border-left-color: var(--abt, var(--marke)); }

/* Aufgaben & Checklisten */
.aufgaben { display: grid; grid-template-columns: 1fr; gap: 10px; margin-bottom: 12px; }
.aufgabe { padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; box-shadow: inset 4px 0 0 var(--abt, #6b7280); gap: 10px; }
.aufgabe-text p { font-size: 16px; margin: 6px 0 4px; }
.aufgabe-kopf { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.aufgabe-knoepfe { gap: 8px; margin-top: 10px; }
.aufgabe-knoepfe .btn { flex: 1; }
.aufgabe.erledigt .aufgabe-knoepfe .btn { flex: none; }
.abt-tag { font-size: 12px; padding: 3px 8px; border-radius: 4px; }
.tag { font-size: 12px; padding: 3px 8px; }
.cl-liste { display: grid; gap: 10px; margin-bottom: 12px; }
.cl-liste > .card, .aufgaben > .aufgabe, .card.klein > .cl-karte { margin-bottom: 0; }
.card.klein > .cl-karte + .cl-karte { margin-top: 10px; }
.cl-karte { padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; box-shadow: inset 4px 0 0 var(--abt, #6b7280); }
.cl-kopf { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.cl-kopf b { font-size: 16px; }
.cl-info { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cl-zeilen { list-style: none; margin: 8px 0 0; padding: 0; }
.cl-zeilen li { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 4px 0; border-top: 1px solid var(--line); }
.cl-zeilen li:first-child { border-top: 0; }
.cl-zeilen .wann { min-width: 72px; font-weight: 650; font-variant-numeric: tabular-nums; }
.cl-zeilen .stand { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.cl-zeilen .btn { flex: none; }
.cl-mehr { margin-top: 4px; }
.cl-mehr > summary { min-height: 44px; display: flex; align-items: center; color: var(--marke); font-weight: 600; font-size: 14px; }
.cl-form .cl-punkt { padding: 12px 0; }
.cl-form .cl-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.cl-form .cl-wahl label { justify-content: center; min-height: 48px; border: 1px solid var(--border); border-radius: 8px; padding: 6px 8px; cursor: pointer; background: #fff; }
.cl-form .cl-wahl label:has(input:checked) { border-color: var(--marke); background: var(--marke-hell); color: var(--marke-dunkel); }
.cl-form .cl-wahl label:has(input[value="nein"]:checked) { border-color: var(--err); background: var(--err-bg); color: var(--err); }
.cl-form label.f .cl-temp input { width: 130px; font-size: 20px; font-weight: 650; }
.cl-form .cl-temp { font-size: 16px; color: var(--text); }
.cl-form .cl-notiz { width: 100%; }
.cl-form .aufgabe-knoepfe { margin-top: 12px; }
.neu-form .foto-zeile { display: flex; gap: 10px; align-items: center; }
.neu-form .foto-knopf { width: 72px; height: 72px; flex: none; font-size: 13px; text-align: center; }
.neu-form #vorschau .afoto { width: 72px; height: 72px; }
.neu-form textarea { width: 100%; }

/* Unterweisungen */
.uw-karte { padding: 4px 16px; }
.uw-karte details.uw { padding: 0; border-top: 1px solid var(--line); }
.uw-karte details.uw > summary { min-height: 52px; padding: 10px 0; list-style: none; }
.uw-karte details.uw > summary::-webkit-details-marker { display: none; }
.uw-karte details.uw > summary > span:first-child { flex: 1; min-width: 0; }
.uw-karte details.uw[open] { padding-bottom: 12px; }
.uw-karte details.uw .btn { width: 100%; }
#uw-rest { padding: 0; }
#uw-rest details.uw { margin: 0 16px; }

/* Fuß von Heute */
.heute-fuss { margin-top: 28px; display: grid; gap: 0; }
.heute-fuss > .btn { margin-bottom: 12px; }
.team-kurz li { line-height: 1.6; }
.benachr-zeile .btn { flex: none; }
.app-hinweis { padding: 12px 40px 12px 12px; border: 1px solid var(--border); margin: 0 0 12px; }
.app-hinweis .app-weg { position: absolute; top: 4px; right: 4px; width: 40px; height: 40px; border: 0; background: none; font-size: 20px; color: var(--muted); cursor: pointer; border-radius: 6px; }
.app-zurueck { margin: 0 0 6px; }
.datenschutz-link { text-align: center; margin: 8px 0 0; }

/* ---------- Plan ---------- */
.woche { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.woche .btn { min-width: 48px; padding: 0; font-size: 20px; }
.woche-text { flex: 1; text-align: center; line-height: 1.25; }
.woche-text b { display: block; font-size: 16px; }
.woche-text span { font-size: 13px; color: var(--muted); }
.schicht-liste { list-style: none; margin: 0; padding: 0; }
.schicht-liste li { display: flex; gap: 12px; align-items: center; padding: 10px 0; border-top: 1px solid var(--line); min-height: 56px; }
.schicht-liste li:first-child { border-top: 0; padding-top: 2px; }
.schicht-liste .tag-datum { width: 52px; flex: none; text-align: center; line-height: 1.15; }
.schicht-liste .tag-datum b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.schicht-liste .tag-datum span { font-size: 12px; color: var(--muted); text-transform: uppercase; font-weight: 600; }
.schicht-liste .schicht-info { flex: 1; min-width: 0; }
.schicht-liste .schicht-info b { font-size: 16px; font-variant-numeric: tabular-nums; }
.schicht-liste .schicht-info .note { display: block; }
.schicht-liste li.heute .tag-datum b, .schicht-liste li.heute .tag-datum span { color: var(--marke); }
.schicht-liste li.heute { box-shadow: inset 3px 0 0 var(--marke); padding-left: 8px; margin-left: -8px; }
.schicht-liste li.vorbei { opacity: .6; }
.hinweis-zeile { display: flex; gap: 10px; align-items: center; width: 100%; padding: 12px 14px; margin: 0 0 12px; border: 1px solid #fde68a; background: var(--warn-bg); color: var(--warn); border-radius: 8px; font: 600 14px/1.3 var(--font); text-align: left; cursor: pointer; min-height: 52px; }
.hinweis-zeile .ico { flex: none; }
.tagzeile { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; }
.tagzeile summary { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 48px; padding: 8px 12px; color: var(--text); font-weight: 500; margin: 0; list-style: none; }
.tagzeile summary::-webkit-details-marker { display: none; }
.tagzeile[open] summary { border-bottom: 1px solid var(--divider); }
.tagzeile.heute summary { box-shadow: inset 3px 0 0 var(--marke); font-weight: 650; }
.buchungen { list-style: none; margin: 0; padding: 4px 12px 10px; }
.buchungen li { padding: 6px 0; border-bottom: 1px solid var(--divider); font-size: 14px; }
.buchungen li:last-child { border-bottom: none; }
.buchungen li > span:first-child { display: inline-block; min-width: 4.4rem; font-variant-numeric: tabular-nums; font-weight: 600; }
.buchungen i { color: var(--muted); font-style: normal; }
.team-art { display: block; margin: 2px 0 0 0; }
.boerse-liste { list-style: none; margin: 0; padding: 0; }
.boerse-liste li { padding: 12px 0; border-top: 1px solid var(--line); }
.boerse-liste li:first-child { border-top: 0; padding-top: 0; }
.boerse-liste .zeile1 { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; }
.boerse-liste .zeile1 b { font-size: 16px; }
.boerse-liste .aktion { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.boerse-liste .aktion .btn.primary { flex: 1; }
.card h3 { font-size: 14px; margin: 14px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.card h3:first-of-type { margin-top: 0; }
.fw-tage { grid-template-columns: 1fr 1fr; gap: 0 10px; }
.fw-tage label.f { margin: 6px 0; }
.fw-tage select { font-size: 16px; }
.wunsch-tage { display: grid; gap: 6px; }
.wunsch-tage .zeile { display: flex; align-items: center; gap: 10px; }
.wunsch-tage .zeile > span { width: 84px; flex: none; font-weight: 600; font-size: 14px; }
.wunsch-tage select { flex: 1; min-width: 0; }
.wunsch-ok { margin-left: 6px; }
.stunden-karte > summary { display: flex; flex-direction: column; gap: 2px; list-style: none; }
.stunden-kopf { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.stunden-kopf .btn { min-width: 48px; padding: 0; font-size: 20px; }
.stunden-kopf b { flex: 1; text-align: center; font-size: 16px; }
.stats { grid-template-columns: repeat(2, 1fr); gap: 8px; margin-bottom: 12px; }
.stat { padding: 10px 12px; border-width: 1px; }
.stat b { font-size: 20px; }
.bar { height: 10px; background: var(--surface-2); border-radius: 5px; overflow: hidden; margin: 8px 0 2px; }
.bar span { display: block; height: 100%; background: var(--marke); border-radius: 5px; }
.bar span.voll { background: var(--err); }

/* ---------- Ware ---------- */
.wa-abt { display: flex; gap: 6px; overflow-x: auto; flex-wrap: nowrap; margin: 0 calc(-1 * var(--h-rand)) 10px; padding: 2px var(--h-rand) 4px; scrollbar-width: none; justify-content: flex-start; }
.wa-abt::-webkit-scrollbar { display: none; }
.wa-abt .btn { flex: none; min-height: 44px; border-radius: 20px; }
.wa-abt .btn.primary { background: var(--marke); }
#wa-suche { min-height: 44px; }
.wa-modus { display: flex; }
.wa-karte { padding: 12px 14px; }
.wa-kopf b { font-size: 16px; }
.wa-kopf .note { font-weight: 400; }
.wa-bilanz { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0; font-size: 12px; color: var(--muted); }
.wa-bilanz > span { display: flex; flex-direction: column; align-items: flex-start; padding: 6px 8px; background: var(--surface-2); border-radius: 6px; line-height: 1.2; }
.wa-bilanz b { font-size: 16px; color: var(--text); }
.wa-bilanz .neg { color: var(--err); }
.wa-knoepfe { grid-template-columns: 1.4fr 1fr .8fr; gap: 8px; }
.wa-rest { grid-template-columns: 1fr auto auto; gap: 8px; }
.wa-speichern { bottom: calc(var(--h-nav) + env(safe-area-inset-bottom)); background: var(--bg); padding: 10px 0; }
.we-bereich { margin: 0 0 16px; }
.we-bereich > .btn { margin-bottom: 10px; }
.we-frage legend { color: var(--text); font: 600 14px/1.3 var(--font); margin-bottom: 2px; }
.we-temp .btn { min-height: 44px; font-size: 20px; }
.we-lieferschein > summary { min-height: 44px; display: flex; align-items: center; color: var(--marke-dunkel); }

/* ---------- Anträge ---------- */
.urlaub-zahlen { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 0 12px; text-align: center; }
.urlaub-zahlen div { background: var(--surface-2); border-radius: 6px; padding: 8px 4px; line-height: 1.2; }
.urlaub-zahlen b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; }
.urlaub-zahlen span { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .03em; font-weight: 600; }
.antrag-liste { list-style: none; margin: 0; padding: 0; }
.antrag-liste li { padding: 10px 0; border-top: 1px solid var(--line); }
.antrag-liste li:first-child { border-top: 0; padding-top: 0; }
.antrag-liste .zeile1 { display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.antrag-liste .btn { margin-top: 6px; }
.hinweis-krank { display: flex; gap: 10px; align-items: center; color: var(--muted); font-size: 14px; }

/* ---------- Bottom-Sheets (statt Popups) ---------- */
dialog.wa-blatt { width: 100%; max-width: 560px; min-width: 0; margin: auto auto 0; padding: 8px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: 14px 14px 0 0;
  max-height: 92vh; overflow-y: auto; overscroll-behavior: contain; }
dialog.wa-blatt::before { content: ''; display: block; width: 40px; height: 4px; border-radius: 2px; background: #d1d5db; margin: 0 auto 10px; }
dialog.wa-blatt[open] { animation: blatt-rein 180ms ease-out; }
@keyframes blatt-rein { from { transform: translateY(40px); opacity: .4; } }
@media (prefers-reduced-motion: reduce) { dialog.wa-blatt[open] { animation: none; } }
dialog.wa-blatt h2 { font-size: 20px; margin: 0 0 8px; }
dialog.wa-blatt .actions { position: sticky; bottom: 0; margin: 16px -18px calc(-18px - env(safe-area-inset-bottom)); padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); display: grid; grid-template-columns: 1fr 1.6fr; gap: 10px; }
dialog.wa-blatt .actions.einzeln { grid-template-columns: 1fr; }
dialog.wa-blatt .actions .btn { min-height: 50px; }
dialog.wa-blatt input:not([type=radio]):not([type=checkbox]), dialog.wa-blatt select, dialog.wa-blatt textarea { width: 100%; }
dialog.wa-blatt .wa-einheit span, dialog.wa-blatt .wa-gruende span { min-height: 44px; display: inline-flex; align-items: center; padding: 8px 14px; }
dialog.wa-blatt .wa-menge button { min-height: 56px; }
@media (min-width: 600px) { dialog.wa-blatt { margin: auto; border-radius: 12px; } }

/* Leitungs-Ansicht */
.l-da { display: grid; gap: 10px; }
.l-da .live-status .punkt { background: var(--muted, #94a3b8); }
.l-da.ist-da .live-status .punkt { background: var(--ok, #16a34a); }
.l-gross { min-height: 54px; font-size: 1.05rem; margin: 4px 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.l-warn { border-color: #fde68a; background: var(--warn-bg, #fffbeb); }
.l-liste { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 8px; }
.l-liste li { line-height: 1.45; }
.l-name.pause { color: var(--muted); }

/* Leitung · Heute: Ampel */
.l-da-knopf { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.l-da-knopf::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--muted, #94a3b8); }
.l-da-knopf.ist-da { border-color: var(--ok, #16a34a); color: var(--ok, #16a34a); }
.l-da-knopf.ist-da::before { background: var(--ok, #16a34a); }
.l-ampel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 4px 0 10px; }
@media (min-width: 560px) { .l-ampel { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.l-kachel { display: grid; gap: 2px; text-align: left; padding: 10px 10px 9px; border-radius: 14px; border: 2px solid transparent; font: inherit; cursor: pointer; color: var(--text); }
.l-kachel .l-titel { font-size: 12px; font-weight: 600; color: var(--muted); }
.l-kachel b { font-size: 16px; line-height: 1.15; }
.l-kachel .l-unter { font-size: 12px; color: var(--muted); }
.l-kachel.gruen { background: #ecfdf3; } .l-kachel.gruen b { color: var(--ok); }
.l-kachel.gelb { background: #fffbeb; } .l-kachel.gelb b { color: #b45309; }
.l-kachel.rot { background: #fef2f2; } .l-kachel.rot b { color: #b91c1c; }
.l-kachel.offen { border-color: currentColor; box-shadow: 0 2px 8px rgba(15, 23, 42, .08); }
.l-kachel.gruen.offen { border-color: #86efac; } .l-kachel.gelb.offen { border-color: #fcd34d; } .l-kachel.rot.offen { border-color: #fca5a5; }
.l-detail { padding: 10px 12px; }
.l-detail .l-liste { gap: 6px; margin: 0 0 6px; }
.l-detail .l-liste li.neg { color: #b91c1c; }
.l-zeile { margin: 4px 0; line-height: 1.4; }
.l-fuss { text-align: center; margin: 4px 0 0; }
/* Börse: eigene Bilanz */
.card.bilanz { padding: 10px 14px; }
.card.bilanz p { margin: 2px 0; }
.bilanz-zahlen b { color: var(--accent); }

/* Krankmeldung */
.krank-karte h2 { margin: 0 0 4px; }
.krank-form .segmente { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.krank-form .segmente label { flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); font-weight: 600; cursor: pointer; }
.krank-form .segmente label:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.krank-form .segmente input { accent-color: var(--accent); }
.krank-form .f-titel { margin: 6px 0 0; font-weight: 600; font-size: 14px; }
.krank-form [data-bis][hidden] { display: none; }
/* Tippflächen mindestens 44 × 44 px */
.btn.small { min-height: 44px; }
.app-weg { min-width: 44px; min-height: 44px; }
.login .mc-feld::placeholder { text-transform: none; letter-spacing: normal; font-weight: 400; }
/* Meine Schichten: Zeit bleibt in einer Zeile; der Knopf rutscht bei wenig Platz darunter */
.schicht-liste li { flex-wrap: wrap; }
.schicht-liste .schicht-info b { white-space: nowrap; }
.schicht-liste li > .btn { margin-left: auto; }
@media (max-width: 380px) { .schicht-liste li > .btn { margin-left: 64px; } }
.schicht-liste .schicht-info { flex: 1 1 150px; }
.wa-abt:not(:has(> .btn:nth-child(7))) { flex-wrap: wrap; overflow: visible; } /* bis 6 Abteilungen umbrechen statt seitlich schieben */

/* Leitungs-App: Anrufen-Knopf, unbesetzte Schichten mit Vorschlägen */
.l-mit-tel { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.l-mit-tel > span { min-width: 0; }
.btn.klein.l-tel { flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-decoration: none; }
.l-unter-titel { margin: 14px 0 6px; font-size: 14px; color: var(--muted); font-weight: 600; }
.l-luecke { padding: 8px 0; border-top: 1px solid var(--divider, #edf0f4); }
.l-luecke .l-liste { margin: 4px 0 0; }
/* Übergabe von Schicht zu Schicht */
.ueb-liste { list-style: none; margin: 0 0 10px; padding: 0; }
.ueb-liste li { padding: 8px 0; border-bottom: 1px solid var(--divider, #edf0f4); }
.ueb-liste li:last-child { border-bottom: 0; }
.ueb-liste p { margin: 0 0 2px; font-size: 16px; }
.uebergabe-karte { border-left: 4px solid var(--warn-c, #f59e0b); }
/* Leitungs-App: Entscheiden, Anlässe */
.ent-liste li { display: grid; gap: 8px; }
.ent-knoepfe { display: flex; flex-wrap: wrap; gap: 6px; }
.l-anlass { margin: 0 0 10px; }
/* Mitteilungen: Glocke oben rechts */
header.top { display: flex; align-items: center; justify-content: space-between; }
.glocke { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border: 0; border-radius: 12px; background: none; color: var(--text); cursor: pointer; }
.glocke:hover { background: var(--accent-soft); }
.glocke-zahl { position: absolute; top: 4px; right: 3px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--err); color: #fff; font: 700 12px/18px var(--font); text-align: center; }
.mt-liste { list-style: none; margin: 0 0 8px; padding: 0; max-height: 60vh; overflow-y: auto; }
.mt-liste li { border-bottom: 1px solid var(--divider, #edf0f4); }
.mt-liste li:last-child { border-bottom: 0; }
.mt-liste a { display: grid; gap: 2px; padding: 10px 2px; color: var(--text); text-decoration: none; }
.mt-liste li.neu a { box-shadow: inset 3px 0 0 var(--accent); padding-left: 10px; }
.mt-liste span { color: var(--text); }
.mt-liste small { color: var(--muted); }
/* Segmente mit Radio (z. B. Problem / Idee) */
.segmente label { position: relative; flex: 1; display: flex; align-items: center; justify-content: center; min-height: 44px; border-radius: 6px; font: 600 14px/1.1 var(--font); color: #4b5563; cursor: pointer; }
.segmente label input { position: absolute; opacity: 0; pointer-events: none; }
.segmente label:has(input:checked) { background: #fff; color: var(--marke-dunkel); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.segmente label:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 1px; }
.foto-wahl { justify-content: center; gap: 8px; }
.rm-vorschau img { max-width: 100%; border-radius: 10px; margin: 6px 0; }
/* Große Schrift, einfache Ansicht (gilt für dieses Gerät) */
body.gross #app, body.gross header.top, body.gross dialog.wa-blatt { zoom: 1.18; }
body.gross .andere-aufgaben, body.gross #team-details, body.gross #app-platz, body.gross #archiv-scan { display: none; }
.gross-schalter { align-items: flex-start; }
/* Erste Schritte */
.schritte { text-align: center; }
.schritte .schritt-bild { display: grid; place-items: center; width: 96px; height: 96px; margin: 8px auto 12px; border-radius: 28px; background: var(--accent-soft); color: var(--accent); }
.schritte p { font-size: 16px; line-height: 1.5; }
.schritt-punkte { display: flex; justify-content: center; gap: 8px; margin: 14px 0; }
.schritt-punkte i { width: 8px; height: 8px; border-radius: 50%; background: var(--border, #e2e7ee); }
.schritt-punkte i.an { background: var(--accent); width: 22px; border-radius: 4px; }

/* Leitungs-App: Fragen + Anrufen nebeneinander */
.l-knoepfe { display: inline-flex; gap: 6px; align-items: center; flex-shrink: 0; }
#l-alle-ok { margin-bottom: 10px; }


/* ---------- Jetzt: eine Frage, eine Hauptaktion ---------- */
.jetzt-kopf { margin-bottom: 8px; }
.jetzt-kopf h1 { font-size: 20px; }
.held { padding: 20px 16px 16px; border-top: 4px solid var(--border); text-align: left; }
.held.da { border-top-color: #059669; } .held.pause { border-top-color: #d97706; }
.held p { margin: 0; }
.held-klein { font-size: 14px; font-weight: 600; color: var(--muted); }
.held-gross { font: 750 42px/1.1 var(--font); letter-spacing: -.02em; font-variant-numeric: tabular-nums; margin: 4px 0 !important; color: var(--text); overflow-wrap: anywhere; }
.held-unter { font-size: 14px; color: var(--muted); }
.held-naechste { margin-top: 10px !important; font-size: 14px; color: var(--muted); }
.held-naechste b { color: var(--text); }
.held .stempel { flex-direction: column; gap: 8px; margin-top: 16px; }
.held .stempel button { flex: none; width: 100%; }
.held .stempel button.haupt { min-height: 68px; font-size: 26px; }
.held .stempel button.neben { min-height: 48px; font-size: 16px; font-weight: 600; background: #fff !important; color: var(--text); border: 1px solid var(--border); }
.stempel-ok { font-weight: 700; color: #047857; animation: stempel-ok .35s ease-out; }
@keyframes stempel-ok { from { transform: scale(.96); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .stempel-ok { animation: none; } }
.push-frage p { margin: 0 0 10px; }
.push-frage .knoepfe { display: flex; gap: 8px; }
.fuer-dich { margin: 18px 0 8px; }
.fertig-zeile { color: var(--muted); font-size: 14px; text-align: center; margin: 18px 0; }
.fd-mehr { margin-top: 8px; }
.fd-mehr > summary, .jetzt-mehr > summary { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 6px; font-weight: 600; color: var(--marke-dunkel); cursor: pointer; list-style: none; }
.fd-mehr > summary::-webkit-details-marker, .jetzt-mehr > summary::-webkit-details-marker { display: none; }
.fd-mehr > summary::after, .jetzt-mehr > summary::after { content: '▾'; transition: transform .15s; }
.fd-mehr[open] > summary::after, .jetzt-mehr[open] > summary::after { transform: rotate(180deg); }
.jetzt-mehr { margin-top: 8px; border-top: 1px solid var(--line); }
.jetzt-mehr > .btn { margin-bottom: 8px; }

/* ---------- Woche: je Tag eine Zeile ---------- */
.unterseite { justify-content: flex-start; flex-wrap: wrap; gap: 2px 8px; }
.unterseite h1 { width: 100%; }
.zurueck-knopf { padding-left: 0; min-height: 40px; }
.tag-liste { list-style: none; margin: 0 0 10px; padding: 0; overflow: hidden; }
.tag-liste li + li { border-top: 1px solid var(--line); }
.tag-zeile { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 14px; background: none; border: 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.tag-zeile:active { background: var(--surface-2); }
.tag-zeile .tag-datum { width: 52px; flex: none; text-align: center; line-height: 1.15; }
.tag-zeile .tag-datum b { display: block; font-size: 16px; font-variant-numeric: tabular-nums; }
.tag-zeile .tag-datum span { font-size: 12px; color: var(--muted); text-transform: uppercase; font-weight: 600; }
.tag-zeile .schicht-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }
.tag-zeile .schicht-info b { font-size: 16px; font-variant-numeric: tabular-nums; }
.tag-zeile .tag-pfeil { color: var(--muted); font-size: 20px; flex: none; }
.tag-zeile.heute { box-shadow: inset 3px 0 0 var(--marke); }
.tag-zeile.heute .tag-datum b, .tag-zeile.heute .tag-datum span { color: var(--marke); }
.tag-zeile.vorbei { opacity: .6; }
.woche-links { display: grid; gap: 8px; margin-top: 12px; }
.tag-blatt h3 { margin: 14px 0 6px; font-size: 14px; }
.tag-schicht { font-size: 16px; margin: 6px 0 10px; }
.tag-aktionen { display: grid; gap: 8px; margin-top: 14px; }
.wunsch-wahl { display: flex; flex-wrap: wrap; gap: 6px; }
.wunsch-wahl .btn { min-height: 44px; }

/* ---------- Ich ---------- */
.ich-zahlen { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.ich-zahl { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 14px; text-align: left; font: inherit; color: inherit; background: var(--surface); }
.ich-zahl > span:first-child { font-size: 13px; font-weight: 600; color: var(--muted); }
.ich-zahl b { font: 750 26px/1.15 var(--font); font-variant-numeric: tabular-nums; }
.ich-zahl.klickbar { cursor: pointer; }
.ich-liste { margin-top: 12px; }
.ich-liste .card.klein[open] { padding-bottom: 14px; }
.ich-zeile { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; min-height: 52px; padding: 12px 16px; text-align: left; font: inherit; color: inherit; background: var(--surface); cursor: pointer; }
.ich-ab { margin-top: 8px; }
.fd-mehr > summary::before, .jetzt-mehr > summary::before { content: none !important; }


/* ---------- Leitungs-App: ein Satz, dann nur was ansteht ---------- */
.l-satz { display: flex; flex-direction: column; gap: 2px; padding: 16px; border-top: 4px solid var(--border); }
.l-satz b { font: 750 26px/1.2 var(--font); letter-spacing: -.01em; }
.l-satz span { color: var(--muted); font-size: 14px; }
.l-satz.gruen { border-top-color: #059669; } .l-satz.gelb { border-top-color: #d97706; }
.l-bereich { padding: 0; }
.l-bereich > summary { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 10px 16px; cursor: pointer; list-style: none; }
.l-bereich > summary::-webkit-details-marker { display: none; }
.l-bereich > summary::before { content: none !important; }
.l-bereich > summary::after { content: '▾'; color: var(--muted); transition: transform .15s; }
.l-bereich[open] > summary::after { transform: rotate(180deg); }
.l-punkt { width: 12px; height: 12px; border-radius: 50%; background: #9ca3af; flex: none; }
.l-bereich.rot .l-punkt { background: #b91c1c; } .l-bereich.gelb .l-punkt { background: #d97706; } .l-bereich.gruen .l-punkt { background: #059669; }
.l-wert { margin-left: auto; font-weight: 600; color: var(--muted); }
.l-bereich.rot .l-wert { color: #b91c1c; } .l-bereich.gelb .l-wert { color: #92400e; }
.l-inhalt { padding: 0 16px 14px; }
.l-inhalt > :first-child { margin-top: 0; }
.l-inhalt > :last-child { margin-bottom: 0; }
.ich-liste details.card.klein > :not(summary) { margin-left: 16px; margin-right: 16px; }
.ich-liste button.card.klein { margin-bottom: 12px; }
.l-name { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.l-name small { font-size: 13px; color: var(--muted); }
body.gross #jetzt-mehr:not(:has(> .btn, > .held-naechste, > details:not(#team-details):not(.andere-aufgaben))) { display: none; }

/* Raster: Kacheln mit Zahl statt Ausklappen */
.raster { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0; }
.kachel { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-height: 104px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: #fff; text-align: left; font: inherit; color: inherit; cursor: pointer; box-shadow: 0 1px 2px rgba(0, 0, 0, .04); }
.kachel:active { transform: scale(.98); }
.kachel .k-ico { color: var(--accent, #1d4f91); }
.kachel .k-titel { font-size: 16px; line-height: 1.2; }
.kachel .k-unter { font-size: 13px; color: var(--muted); line-height: 1.3; }
.kachel .k-zahl { position: absolute; top: 10px; right: 10px; min-width: 30px; height: 30px; padding: 0 8px; border-radius: 999px; background: #f59e0b; color: #fff; font-weight: 700; font-size: 16px; display: grid; place-items: center; }
.kachel.rot .k-zahl { background: #dc2626; }
.kachel.offen, .kachel.rot { border-color: #f5c46b; }
.kachel.rot { border-color: #f1a3a3; }
.kachel.aktion { background: #f8fafc; }
.kachel.aktion .k-ico { color: var(--muted); }
.teil-kopf { display: flex; align-items: center; gap: 10px; margin: 4px 0 12px; }
.teil-kopf h1 { font-size: 20px; margin: 0; }
.l-seite { margin-bottom: 14px; }
.verteilen { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 12px 0; }
.verteilen .btn { min-height: 56px; font-size: 16px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.verteilen-foto { width: 64px; padding: 0; }
.foto-wahl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 4px 0 8px; }
.foto-wahl-k { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.foto-vorschau { display: flex; align-items: center; gap: 10px; }
.foto-vorschau:empty { display: none; }
.foto-vorschau .afoto { max-height: 120px; border-radius: 8px; }
.held-naechste.mitte { text-align: center; }

/* Blätter: höchstens so hoch wie der sicher sichtbare Bereich (iPhone/Chrome mit Leisten), der Inhalt scrollt im Formular,
   die Knöpfe stehen fest darunter – auch wenn das Telefon die Höhe anders rechnet */
dialog.wa-blatt { max-height: 88vh; max-height: 88svh; }
dialog.wa-blatt[open]:has(> form) { display: flex; flex-direction: column; overflow: hidden; padding-bottom: 0; }
dialog.wa-blatt:has(> form) > form { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; touch-action: pan-y; margin: 0 -18px; padding: 0 18px; }
dialog.wa-blatt:has(> form) .actions { margin-bottom: 0; padding-bottom: calc(12px + env(safe-area-inset-bottom)); }

.kopf-rechts { display: inline-flex; align-items: center; gap: 4px; }
.kopf-ab { min-height: 36px; padding: 0 12px; }

/* Leitung · Plan bearbeiten */
.l-tagwahl { display: grid; grid-template-columns: 52px 1fr 52px; align-items: center; gap: 8px; margin: 8px 0; text-align: center; }
.l-tagwahl .btn { min-height: 44px; }
.l-plan { list-style: none; padding: 0; }
.l-schicht { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; width: 100%; min-height: 44px; padding: 6px 4px; border: 0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.l-schicht:disabled { cursor: default; }
.l-schicht .l-pfeil { margin-left: auto; color: var(--muted); font-size: 20px; }
.l-aktionen { display: grid; gap: 8px; margin: 8px 0; }
.l-aktionen .btn.aktiv { border-color: var(--accent); background: var(--accent-soft, #eef4fb); }
.gefahr-text { color: var(--err, #b91c1c); }
.zeit-zwei { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.vorlagen-k { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.l-abt-wahl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
#l-s-teil { display: grid; gap: 8px; }
#l-s-teil:empty { display: none; }
.nb-extra { display: grid; gap: 6px; margin: 4px 0 8px; }
.nb-extra[hidden], .nb-anzahl[hidden] { display: none; }