/* ============================================================
   ZETTELWERK — Werkstatt-Design
   Asphalt-Dunkel, Sicherheits-Orange, DIN-Typo (Saira)
   ============================================================ */

:root {
  --bg: #131619;
  --bg-2: #1a1e23;
  --panel: #1e2329;
  --panel-2: #252b33;
  --line: #313943;
  --text: #f2efe9;
  --muted: #9aa3ad;
  --accent: #ff6a00;
  --accent-hi: #ff8a33;
  --accent-dim: #8a3d05;
  --tape: #ffc400;
  --ok: #3ddc84;
  --warn: #ffc400;
  --danger: #ff4d4f;
  --radius: 10px;
  --display: "Saira Condensed", "Arial Narrow", sans-serif;
  --body: "Saira", "Segoe UI", sans-serif;
  --shadow: 0 6px 24px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(255, 106, 0, .07), transparent 60%),
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .012) 0 2px, transparent 2px 6px),
    var(--bg);
  color: var(--text);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.45;
  min-height: 100dvh;
  padding-bottom: calc(72px + env(safe-area-inset-bottom));
}

/* ---------- Topbar ---------- */

#topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px 10px;
  background: linear-gradient(180deg, #101317, #131619);
}

.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); }

.brand-mark {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  background: var(--accent);
  color: #131619;
  font-family: var(--display);
  font-weight: 800; font-size: 24px;
  border-radius: 7px;
  transform: skewX(-6deg);
}

.brand-name {
  font-family: var(--display);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: .06em;
}
.brand-name em { font-style: normal; color: var(--accent); }

.top-right { display: flex; align-items: center; gap: 10px; }
.userchip {
  font-family: var(--display); font-weight: 600; font-size: 15px;
  letter-spacing: .04em; color: var(--muted); text-transform: uppercase;
}
.userchip b { color: var(--text); }

.btn-logout {
  background: none; border: 1px solid var(--line); color: var(--muted);
  border-radius: 8px; padding: 6px 10px; font-family: var(--body); font-size: 13px;
  cursor: pointer;
}
.btn-logout:hover { color: var(--text); border-color: var(--muted); }

/* Warnband */
.tape {
  height: 5px;
  background: repeating-linear-gradient(135deg, var(--accent) 0 14px, #23180e 14px 28px);
  opacity: .9;
}

/* ---------- Layout ---------- */

#view { max-width: 860px; margin: 0 auto; padding: 18px 14px 30px; }

.page-title {
  font-family: var(--display);
  font-weight: 700;
  font-size: 28px;
  text-transform: uppercase;
  letter-spacing: .05em;
  margin: 4px 0 16px;
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
}
.page-title small { font-size: 15px; color: var(--muted); letter-spacing: .03em; font-weight: 600; }

/* ---------- Tabs (unten, Daumen) ---------- */

#tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex;
  background: #101317ee;
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  padding-bottom: env(safe-area-inset-bottom);
}
#tabs a {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 10px 4px 8px;
  color: var(--muted); text-decoration: none;
  font-family: var(--display); font-weight: 600; font-size: 13px;
  letter-spacing: .06em; text-transform: uppercase;
  border-top: 3px solid transparent;
  margin-top: -1px;
}
#tabs a.active { color: var(--accent-hi); border-top-color: var(--accent); }
#tabs a svg { width: 22px; height: 22px; }

/* ---------- Cards / Listen ---------- */

.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  margin-bottom: 14px;
}

.zettel-card {
  display: block;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
  margin-bottom: 10px;
  color: var(--text); text-decoration: none;
  transition: transform .08s ease, border-color .12s ease;
}
.zettel-card:active { transform: scale(.985); }
.zettel-card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.zettel-card .zc-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.zettel-card .zc-kunde { font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: .02em; }
.zettel-card .zc-meta { color: var(--muted); font-size: 14px; margin-top: 2px; display: flex; gap: 10px; flex-wrap: wrap; }
.zettel-card .zc-std { font-family: var(--display); font-weight: 800; font-size: 20px; color: var(--accent-hi); font-variant-numeric: tabular-nums; white-space: nowrap; }

.badge {
  display: inline-block;
  font-family: var(--display); font-weight: 700; font-size: 12px;
  letter-spacing: .09em; text-transform: uppercase;
  border-radius: 5px; padding: 2px 8px 1px;
}
.badge.offen { color: var(--warn); border: 1px solid color-mix(in srgb, var(--warn) 55%, transparent); }
.badge.fertig, .badge.abgeschlossen { color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 55%, transparent); }

.empty {
  text-align: center; color: var(--muted); padding: 44px 16px;
  border: 1px dashed var(--line); border-radius: var(--radius);
  font-size: 15px;
}

/* ---------- Formulare ---------- */

.form-section { margin-bottom: 18px; }
.form-section > h3 {
  font-family: var(--display); font-weight: 700; font-size: 15px;
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent-hi);
  margin: 0 0 10px; padding-bottom: 6px;
  border-bottom: 1px solid var(--line);
}

label.field { display: block; margin-bottom: 12px; }
label.field span {
  display: block; font-size: 13px; color: var(--muted);
  margin-bottom: 4px; letter-spacing: .02em;
}

input, select, textarea, button { font-family: var(--body); font-size: 16px; }

input[type=text], input[type=password], input[type=date], input[type=time],
input[type=number], select, textarea {
  width: 100%;
  background: var(--bg-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  min-height: 48px;
  outline: none;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255, 106, 0, .18); }
input:disabled, select:disabled, textarea:disabled { opacity: .55; }
textarea { resize: vertical; min-height: 84px; }

.row { display: grid; gap: 10px; }
.row.c2 { grid-template-columns: 1fr 1fr; }
.row.c3 { grid-template-columns: 1fr 1fr 1fr; }

.stunden-live {
  font-family: var(--display); font-weight: 800; font-size: 34px;
  color: var(--accent-hi); font-variant-numeric: tabular-nums;
  text-align: right;
}
.stunden-live small { font-size: 15px; color: var(--muted); font-weight: 600; margin-left: 6px; }

/* Material-Zeilen */
.mat-row { display: grid; grid-template-columns: 1fr 76px 84px 44px; gap: 8px; margin-bottom: 8px; }
.mat-row button { min-height: 48px; }

/* Mitarbeiter-Zeilen */
.ma-hint { color: var(--muted); font-size: 13.5px; margin: 0 0 12px; }
.ma-row { display: grid; grid-template-columns: 1fr 84px 44px; gap: 8px; margin-bottom: 8px; }
.ma-row button { min-height: 48px; }
.ma-row select { min-height: 48px; }
.ma-row [data-ma=name] { grid-column: 1 / -1; }  /* Freitext volle Breite, eigene Zeile */

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--panel-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 9px;
  padding: 13px 18px;
  min-height: 50px;
  font-family: var(--display); font-weight: 700; font-size: 16px;
  letter-spacing: .05em; text-transform: uppercase;
  cursor: pointer;
  transition: transform .07s ease, filter .12s ease;
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--accent); border-color: var(--accent); color: #17110b; }
.btn.primary:hover { filter: brightness(1.08); }
.btn.ok { background: var(--ok); border-color: var(--ok); color: #0c2417; }
.btn.danger { background: none; border-color: color-mix(in srgb, var(--danger) 60%, transparent); color: var(--danger); }
.btn.ghost { background: none; }
.btn.small { min-height: 40px; padding: 8px 12px; font-size: 14px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; }

.btn-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 16px; }
.btn-bar .spacer { flex: 1; }

/* FAB */
.fab {
  position: fixed; right: 18px; bottom: calc(84px + env(safe-area-inset-bottom)); z-index: 41;
  width: 62px; height: 62px; border-radius: 16px;
  background: var(--accent); color: #17110b;
  border: none; cursor: pointer;
  font-size: 34px; line-height: 1;
  font-family: var(--display); font-weight: 800;
  box-shadow: 0 8px 24px rgba(255, 106, 0, .35);
  transition: transform .1s ease;
}
.fab:active { transform: scale(.92); }

/* ---------- Fotos ---------- */

.foto-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.foto-grid .foto {
  position: relative; aspect-ratio: 1; border-radius: 8px; overflow: hidden;
  border: 1px solid var(--line);
}
.foto-grid img { width: 100%; height: 100%; object-fit: cover; display: block; }
.foto-grid .del {
  position: absolute; top: 4px; right: 4px;
  width: 26px; height: 26px; border-radius: 6px; border: none;
  background: #000a; color: #fff; cursor: pointer; font-size: 14px;
}

/* ---------- Unterschrift ---------- */

.sig-block { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sig-block img { background: #fff; border-radius: 8px; max-width: 260px; max-height: 110px; }
.sig-name { color: var(--muted); font-size: 14px; }

/* Modal */
.modal-back {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(8, 10, 12, .78);
  display: grid; place-items: center;
  padding: 16px;
  animation: fade .15s ease;
}
@keyframes fade { from { opacity: 0; } }
.modal {
  width: 100%; max-width: 560px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 18px;
  animation: pop .18s ease;
}
@keyframes pop { from { transform: translateY(14px) scale(.98); opacity: 0; } }
.modal h3 {
  margin: 0 0 12px;
  font-family: var(--display); font-weight: 700; font-size: 20px;
  letter-spacing: .05em; text-transform: uppercase;
}
.sig-canvas {
  width: 100%; height: 190px;
  background: #fdfdfb;
  border-radius: 10px;
  touch-action: none;
  cursor: crosshair;
  display: block;
}
.sig-hint { color: var(--muted); font-size: 13px; margin: 8px 0 0; text-align: center; }

/* ---------- KI-Sprachaufnahme ---------- */

.hidden { display: none !important; }

.voice-card { border-color: color-mix(in srgb, var(--accent) 35%, var(--line)); }

.voice-hint { color: var(--muted); font-size: 14px; margin: 0 0 12px; }

.voice-row { display: flex; align-items: center; gap: 10px; }
.voice-btn { flex: 1; }
.voice-btn.recording {
  background: var(--danger); border-color: var(--danger); color: #fff;
  animation: rec-pulse 1.6s ease-in-out infinite;
}
.voice-btn.paused { background: var(--panel-2); border-color: var(--warn); color: var(--warn); }
@keyframes rec-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 77, 79, .45); }
  50% { box-shadow: 0 0 0 10px rgba(255, 77, 79, 0); }
}

.voice-timer {
  font-family: var(--display); font-weight: 800; font-size: 22px;
  font-variant-numeric: tabular-nums; color: var(--accent-hi); min-width: 52px; text-align: right;
}

.voice-status { color: var(--tape); font-size: 14px; margin-top: 10px; }

.voice-card details, #v-box { margin-top: 10px; }
.voice-card summary { color: var(--muted); font-size: 13.5px; cursor: pointer; }
.transcript {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; font-size: 14px; color: var(--muted);
  white-space: pre-wrap; margin: 8px 0 0;
}

.ki-status { font-size: 14.5px; }

/* ---------- Woche ---------- */

.kw-nav {
  display: grid; grid-template-columns: 56px 1fr 56px; gap: 10px;
  align-items: stretch; margin-bottom: 14px;
}
.kw-nav button {
  background: var(--panel-2); border: 1px solid var(--line); color: var(--text);
  border-radius: 9px; font-size: 22px; cursor: pointer; min-height: 56px;
}
.kw-label {
  display: grid; place-items: center; text-align: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: 9px;
  font-family: var(--display); font-weight: 700; font-size: 19px; letter-spacing: .04em;
}
.kw-label small { display: block; color: var(--muted); font-size: 13px; font-weight: 600; }

table.woche { width: 100%; border-collapse: collapse; }
table.woche th {
  text-align: left; font-family: var(--display); font-weight: 700; font-size: 13px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
  padding: 8px 6px; border-bottom: 1px solid var(--line);
}
table.woche td { padding: 8px 6px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
table.woche td.tag { font-family: var(--display); font-weight: 700; font-size: 17px; }
table.woche td.tag small { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }
table.woche td.auto { color: var(--muted); font-variant-numeric: tabular-nums; }
table.woche td.ovr input { max-width: 96px; text-align: right; min-height: 44px; padding: 8px; }
table.woche tr.we td.tag { color: var(--accent-hi); }
table.woche tfoot td {
  font-family: var(--display); font-weight: 800; font-size: 21px;
  color: var(--accent-hi); font-variant-numeric: tabular-nums;
  border-bottom: none; padding-top: 12px;
}

/* Wochen-Tageszeilen (Arbeit / Werkstatt / U-K-F) */
.wk-tag { padding: 10px 2px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.wk-tag:last-child { border-bottom: none; }
.wk-tag-kopf { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 6px; }
.wk-tag-name { font-family: var(--display); font-weight: 700; font-size: 17px; }
.wk-tag-name small { color: var(--muted); font-weight: 600; font-size: 12px; margin-left: 4px; }
.wk-tag.we .wk-tag-name { color: var(--accent-hi); }
.wk-tag-rechts { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; }
/* Tages-Gesamt: Zettel + manuelle Eintraege + U/K/F */
.wk-tag-summe {
  font-family: var(--display); font-weight: 800; font-size: 19px;
  color: var(--accent-hi); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.wk-tag-summe.leer { color: var(--muted); font-weight: 600; font-size: 15px; }
.wk-tag-auto { color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
/* Zettel-Einträge des Tages (Kunde/Arbeiten aus Arbeitszetteln) */
.wk-zettel { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; }
.wk-z {
  display: flex; justify-content: space-between; gap: 10px; align-items: baseline;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 7px;
  padding: 6px 10px; font-size: 13px; color: var(--muted); text-decoration: none;
}
.wk-z:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--line)); }
.wk-z b { color: var(--text); font-weight: 600; }
.wk-z span { color: var(--accent-hi); font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }

/* Manuelle Einträge pro Tag: Beschreibung + Stunden + Art */
.wk-pos { display: flex; flex-direction: column; gap: 6px; }
.wk-pos:not(:empty) { margin-bottom: 8px; }
.pos-row { display: grid; grid-template-columns: 1fr 72px 152px 40px; gap: 6px; align-items: stretch; }
.pos-row input { min-height: 42px; padding: 7px 9px; font-size: 14px; }
.pos-row [data-p=std] { text-align: right; }
.pos-row button { min-height: 42px; padding: 0; }
.pos-add { margin-bottom: 10px; }

/* Art-Umschalter: beide Optionen sichtbar, aktive farbig — ein Dropdown wurde uebersehen */
.art-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 2px; }
.art-toggle label { display: grid; place-items: center; border-radius: 6px; cursor: pointer; }
.art-toggle input { position: absolute; opacity: 0; pointer-events: none; }
.art-toggle span { font-size: 12.5px; font-weight: 600; color: var(--muted); padding: 0 4px; text-align: center; }
.art-toggle label:has(input:checked) { background: var(--accent); }
.art-toggle label:has(input:checked) span { color: #17110b; }
.art-toggle label.art-w:has(input:checked) { background: #4a9eff; }
.art-toggle label.art-w:has(input:checked) span { color: #08172b; }
.art-toggle label:has(input:disabled) { cursor: default; }

/* Handy: Beschreibung auf eigene Zeile — sonst bleibt vom Text nichts lesbar */
@media (max-width: 520px) {
  .pos-row { grid-template-columns: 1fr 152px 40px; row-gap: 5px; }
  .pos-row [data-p=txt] { grid-column: 1 / -1; }
}

.wk-tag-felder { display: grid; grid-template-columns: 1fr 1.6fr; gap: 8px; }
.wk-tag-felder label > span { display: block; font-size: 11.5px; color: var(--muted); margin-bottom: 3px; letter-spacing: .02em; }
.wk-tag-felder input, .wk-tag-felder select { min-height: 44px; padding: 8px; text-align: right; }
.wk-tag-felder select { text-align: left; font-size: 14px; }
.ukf-wrap { display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px; }

/* Summen + Soll */
.wk-summen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-bottom: 12px; }
.wk-sum { background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; text-align: center; }
.wk-sum b { display: block; font-family: var(--display); font-weight: 800; font-size: 20px; font-variant-numeric: tabular-nums; }
.wk-sum span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.wk-sum.gesamt b { color: var(--accent-hi); }

.soll-bar { background: var(--bg-2); border-radius: 6px; height: 14px; overflow: hidden; }
.soll-fill { height: 100%; border-radius: 6px; min-width: 2px; background: repeating-linear-gradient(135deg, var(--accent) 0 10px, var(--accent-hi) 10px 20px); }
.soll-fill.erfuellt { background: repeating-linear-gradient(135deg, var(--ok) 0 10px, #55e698 10px 20px); }
.soll-text { color: var(--muted); font-size: 13.5px; margin-top: 6px; font-variant-numeric: tabular-nums; }

.soll-row { padding: 9px 2px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.soll-row:last-child { border-bottom: none; }
.soll-row-kopf { display: flex; align-items: center; gap: 10px; margin-bottom: 5px; }
.soll-row-kopf .nm { flex: 1; font-family: var(--display); font-weight: 600; font-size: 15.5px; }
.soll-row-kopf .val { color: var(--muted); font-size: 13.5px; font-variant-numeric: tabular-nums; }
.soll-row-kopf .val.voll { color: var(--ok); }

/* ---------- Dashboard ---------- */

.kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 14px; }
.kpi-grid.kpi-4 { grid-template-columns: repeat(2, 1fr); }

/* ---------- Charts ---------- */

.dash-2col { display: grid; grid-template-columns: 1fr; gap: 0; }

.chart { width: 100%; height: auto; display: block; }
.chart .c-val { fill: var(--text); font-size: 10px; font-weight: 600; font-family: var(--display); }
.chart .c-ax { fill: var(--muted); font-size: 10px; font-family: var(--display); }

.donut-wrap { display: flex; align-items: center; gap: 16px; }
.donut { width: 120px; height: 120px; flex-shrink: 0; }
.donut-v { fill: var(--text); font-size: 22px; font-weight: 800; font-family: var(--display); }
.donut-l { fill: var(--muted); font-size: 11px; letter-spacing: .05em; text-transform: uppercase; font-family: var(--display); }
.donut-note { color: var(--text); font-size: 15px; font-weight: 600; }
.donut-note span { color: var(--muted); font-size: 13px; font-weight: 400; }

.stk { display: flex; height: 30px; border-radius: 7px; overflow: hidden; gap: 2px; background: var(--bg-2); }
.stk-seg { display: grid; place-items: center; min-width: 3px; transition: flex .4s ease; }
.stk-seg span { font-size: 11px; font-weight: 800; color: #10151b; font-family: var(--display); }
.stk-legende { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-top: 12px; }
.stk-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.stk-leg i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.hbar { display: grid; grid-template-columns: 96px 1fr 52px; gap: 10px; align-items: center; margin-bottom: 9px; }
.hbar-l { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hbar-track { background: var(--bg-2); border-radius: 6px; height: 16px; overflow: hidden; }
.hbar-fill { height: 100%; background: repeating-linear-gradient(135deg, var(--accent) 0 9px, var(--accent-hi) 9px 18px); border-radius: 6px; }
.hbar-v { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 13.5px; }
.kpi {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.kpi .v {
  font-family: var(--display); font-weight: 800; font-size: 34px;
  line-height: 1.05; font-variant-numeric: tabular-nums;
  color: var(--accent-hi);
}
.kpi .l { color: var(--muted); font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; margin-top: 2px; }
.kpi.k-ok .v { color: var(--ok); }
.kpi.k-warn .v { color: var(--tape); }

.bar-row { display: grid; grid-template-columns: 110px 1fr 56px; gap: 10px; align-items: center; margin-bottom: 9px; }
.bar-row .name { font-family: var(--display); font-weight: 600; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-row .track { background: var(--bg-2); border-radius: 6px; height: 18px; overflow: hidden; }
.bar-row .fill {
  height: 100%;
  background: repeating-linear-gradient(135deg, var(--accent) 0 10px, var(--accent-hi) 10px 20px);
  border-radius: 6px;
  min-width: 2px;
  transform-origin: left center;
  animation: grow .5s cubic-bezier(.2, .8, .2, 1);
}
@keyframes grow { from { transform: scaleX(0); } }
.bar-row .val { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px; }

.ampel { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 1px solid color-mix(in srgb, var(--line) 55%, transparent); }
.ampel:last-child { border-bottom: none; }
.ampel .dot { width: 12px; height: 12px; border-radius: 50%; background: var(--warn); box-shadow: 0 0 8px color-mix(in srgb, var(--warn) 60%, transparent); }
.ampel.done .dot { background: var(--ok); box-shadow: 0 0 8px color-mix(in srgb, var(--ok) 60%, transparent); }
.ampel .nm { flex: 1; }
.ampel .st { color: var(--muted); font-size: 13.5px; }

/* Filter */
.filterbar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 14px; }
.filterbar > * { min-height: 44px; }

/* ---------- Team ---------- */

.user-row {
  display: flex; align-items: center; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; margin-bottom: 9px;
}
.user-row.inaktiv { opacity: .55; }
.user-row .un { flex: 1; font-family: var(--display); font-weight: 700; font-size: 18px; }
.user-row .un small { display: block; font-family: var(--body); font-weight: 400; font-size: 12.5px; color: var(--muted); }
.role-chip {
  font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid var(--line); color: var(--muted);
  padding: 2px 7px; border-radius: 5px; font-family: var(--display); font-weight: 700;
}
.role-chip.admin { color: var(--tape); border-color: color-mix(in srgb, var(--tape) 50%, transparent); }

/* ---------- Login ---------- */

.login-wrap { max-width: 380px; margin: 8vh auto 0; }
.login-logo { text-align: center; margin-bottom: 22px; }
.login-logo .brand-mark { width: 64px; height: 64px; font-size: 44px; border-radius: 14px; margin: 0 auto 12px; }
.login-logo h1 { font-family: var(--display); font-weight: 800; font-size: 34px; letter-spacing: .06em; margin: 0; }
.login-logo h1 em { font-style: normal; color: var(--accent); }
.login-logo p { color: var(--muted); margin: 4px 0 0; font-size: 14.5px; }
.login-wrap .card { animation: rise .35s cubic-bezier(.2, .8, .2, 1); }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 52px; }
.pw-toggle {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  width: 42px; height: 42px; border: none; background: none; cursor: pointer;
  font-size: 20px; line-height: 1; border-radius: 8px;
}
.pw-toggle:active { background: var(--panel-2); }
@keyframes rise { from { transform: translateY(16px); opacity: 0; } }

/* ---------- Toast ---------- */

#toast {
  position: fixed; left: 50%; bottom: calc(92px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  z-index: 70;
  background: #0d0f11;
  border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--line));
  color: var(--text);
  border-radius: 10px;
  padding: 12px 18px;
  font-size: 15px;
  box-shadow: var(--shadow);
  max-width: min(90vw, 480px);
  animation: rise .25s ease;
}
#toast.error { border-color: color-mix(in srgb, var(--danger) 55%, var(--line)); }

/* ---------- Skeleton / Laden ---------- */

.loading { text-align: center; color: var(--muted); padding: 40px 0; font-family: var(--display); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- Desktop ---------- */

@media (min-width: 760px) {
  /* Nav bleibt auch auf Desktop unten fixiert und immer sichtbar (wie mobil),
     nur horizontal zentriert statt gestreckt. Aktiv-Markierung + FAB-Abstand
     kommen aus dem Basis-CSS (border-top / bottom 84px). */
  #tabs { justify-content: center; gap: 6px; }
  #tabs a { flex: 0 0 auto; padding: 12px 22px 10px; flex-direction: row; gap: 8px; }
  .filterbar { grid-template-columns: repeat(4, 1fr) auto; }
  .kpi .v { font-size: 42px; }
  .kpi-grid.kpi-4 { grid-template-columns: repeat(4, 1fr); }
  .dash-2col { grid-template-columns: 1fr 1fr; gap: 14px; }
  .dash-2col > .card { margin-bottom: 0; }
}

/* ============================================================
   DRUCK — nüchtern, A4, schwarz auf weiß
   ============================================================ */

.print-sheet {
  background: #fff; color: #111;
  border-radius: 4px;
  padding: 34px 38px;
  max-width: 800px; margin: 0 auto;
  font-family: var(--body);
  box-shadow: var(--shadow);
}
.print-sheet .ps-head {
  display: flex; justify-content: space-between; align-items: baseline;
  border-bottom: 3px solid #111;
  padding-bottom: 10px; margin-bottom: 18px;
}
.print-sheet .ps-head h2 {
  margin: 0; font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: .04em;
}
.print-sheet .ps-head .ps-sub { font-size: 12.5px; color: #555; }
.print-sheet h4 {
  font-family: var(--display); font-size: 13px; letter-spacing: .12em; text-transform: uppercase;
  margin: 20px 0 6px; color: #333;
  border-bottom: 1px solid #ccc; padding-bottom: 3px;
}
.print-sheet table { width: 100%; border-collapse: collapse; font-size: 14px; }
.print-sheet table th { text-align: left; padding: 5px 6px; border-bottom: 1.5px solid #111; font-size: 12.5px; text-transform: uppercase; letter-spacing: .05em; }
.print-sheet table td { padding: 5px 6px; border-bottom: 1px solid #ddd; vertical-align: top; }
.print-sheet .meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 24px; font-size: 14.5px; }
.print-sheet .meta-grid b { font-weight: 600; }
.print-sheet .ps-sig { margin-top: 30px; display: flex; gap: 40px; }
.print-sheet .ps-sig .box { flex: 1; }
.print-sheet .ps-sig img { max-height: 70px; display: block; margin-bottom: 4px; }
.print-sheet .ps-sig .line { border-top: 1px solid #111; padding-top: 4px; font-size: 12.5px; color: #444; }
.print-sheet .sum-line { text-align: right; font-size: 17px; font-weight: 600; margin-top: 8px; }
.print-actions { max-width: 800px; margin: 14px auto; display: flex; gap: 10px; }

/* ---------- Sievers-Originalformulare ---------- */

.print-sheet.sv { font-size: 13px; }
@media screen {
  .print-sheet.sv { overflow-x: auto; } /* breite Originaltabellen auf Handy scrollbar */
}
.sv-kopf {
  display: flex; justify-content: space-between; gap: 20px;
  border: 1.5px solid #111; padding: 10px 14px; margin-bottom: 10px;
}
.sv-kopf.sv-mitte { display: block; text-align: center; }
.sv-name { color: #127a1f; font-weight: 800; font-size: 24px; font-family: var(--display); letter-spacing: .02em; }
.sv-sub { font-size: 11px; color: #333; }
.sv-fett { font-weight: 600; color: #111; }
.sv-adr { font-size: 11.5px; text-align: left; line-height: 1.45; }
.sv-adr b { font-size: 16px; color: #127a1f; }  /* chr24.de im Firmengrün wie Original */

.sv-meta { width: 100%; border-collapse: collapse; margin-bottom: 0; }
.sv-meta td { border: 1px solid #111; padding: 5px 8px; font-size: 12.5px; vertical-align: top; }
.sv-kasten td { min-height: 40px; }

.print-sheet.sv h4 { margin: 12px 0 4px; }
.sv-text { border: 1px solid #111; padding: 8px; min-height: 70px; margin: 4px 0 0; white-space: pre-wrap; }

.sv-tab { width: 100%; border-collapse: collapse; }
.sv-tab th, .sv-tab td { border: 1px solid #111 !important; padding: 4px 6px; font-size: 12.5px; }
.sv-tab th { background: #f2f2f2; text-transform: none; letter-spacing: 0; }
.sv-menge { width: 90px; }
.sv-dat { width: 78px; white-space: nowrap; }
.sv-std { width: 64px; text-align: center !important; font-variant-numeric: tabular-nums; }
.sv-wz td { height: 26px; vertical-align: top; }

.sv-summen td { text-align: center; font-size: 12px; }
.sv-summen td b { font-size: 11px; }

.sv-fussnote { font-size: 10.5px; color: #333; margin: 6px 0; }
.sv-unterstrichen { text-decoration: underline; text-align: center; margin-top: 10px; }

@media print {
  body { background: #fff; padding: 0; }
  #topbar, .tape, #tabs, .fab, .print-actions, #toast { display: none !important; }
  #view { max-width: none; padding: 0; }
  .print-sheet { box-shadow: none; border-radius: 0; padding: 0; max-width: none; color: #000; }
  .sv-name, .sv-adr b { color: #127a1f !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  @page { size: A4; margin: 14mm; }
}

/* ---------- Abrechnung (Chef) ---------- */
.seg {
  display: inline-flex; gap: 2px; margin-bottom: 14px;
  background: var(--panel-2); border: 1px solid var(--line); border-radius: 8px; padding: 3px;
}
.seg-btn {
  font-family: var(--display); font-weight: 700; font-size: 14px;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--muted); background: transparent; border: 0; cursor: pointer;
  padding: 7px 18px; border-radius: 6px;
}
.seg-btn.active { color: var(--bg); background: var(--accent); }

.stat-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 14px; }
.stat-card {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 14px 16px;
}
.stat-label {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .08em;
  font-size: 12px; color: var(--muted); margin-bottom: 4px;
}
.stat-val { font-family: var(--display); font-weight: 700; font-size: 30px; line-height: 1; color: var(--text); }
.stat-val small { font-size: 14px; color: var(--muted); font-weight: 400; }

.tbl { width: 100%; border-collapse: collapse; }
.tbl th, .tbl td { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--line); }
.tbl th {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .06em;
  font-size: 12px; color: var(--muted); font-weight: 700;
}
.tbl .num { text-align: right; font-variant-numeric: tabular-nums; }

.abr-head { display: flex; align-items: center; justify-content: space-between; }
.abr-all { font-size: 14px; color: var(--muted); display: flex; align-items: center; gap: 6px; cursor: pointer; }
.abr-row {
  display: grid; grid-template-columns: auto 1fr auto auto auto auto;
  align-items: center; gap: 10px;
  padding: 9px 4px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.abr-row:last-of-type { border-bottom: 0; }
.abr-cb { width: 18px; height: 18px; accent-color: var(--accent); }
.abr-kunde { font-weight: 600; }
.abr-datum, .abr-user { color: var(--muted); font-size: 14px; }
.abr-std { font-variant-numeric: tabular-nums; font-weight: 600; }
.abr-link { color: var(--accent); text-decoration: none; font-size: 18px; padding: 0 4px; }

/* Abrechnungs-Umschalter im Zettel-Kopf */
.badge.abr-toggle { cursor: pointer; background: transparent; }
.badge.abr-ja { color: var(--ok); border: 1px solid color-mix(in srgb, var(--ok) 55%, transparent); }
.badge.abr-nein { color: var(--muted); border: 1px solid var(--line); }

@media (max-width: 560px) {
  .abr-row { grid-template-columns: auto 1fr auto; row-gap: 2px; }
  .abr-user { display: none; }
}

/* Abrechnung: aufklappbarer Zettel */
.abr-item { border-bottom: 1px solid var(--line); }
.abr-item:last-child { border-bottom: 0; }
.abr-row { display: flex; align-items: center; gap: 10px; padding: 4px; }
.abr-open {
  flex: 1; display: grid; grid-template-columns: auto 1fr auto auto auto;
  align-items: center; gap: 10px; text-align: left;
  background: transparent; border: 0; color: var(--text); cursor: pointer;
  padding: 6px 4px; font: inherit;
}
.abr-open:hover { background: var(--panel-2); border-radius: 6px; }
.abr-chev { color: var(--muted); transition: transform .12s; display: inline-block; }
.abr-item.open .abr-chev { transform: rotate(90deg); color: var(--accent); }

.abr-detail { padding: 4px 4px 14px 30px; }
.abr-detail-in h4 {
  font-family: var(--display); text-transform: uppercase; letter-spacing: .06em;
  font-size: 12px; color: var(--muted); margin: 12px 0 4px;
}
.abr-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px 16px; margin-bottom: 6px; }
.abr-grid b { font-family: var(--display); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); }
.abr-text { margin: 0; white-space: pre-wrap; }
.abr-dtab { width: 100%; border-collapse: collapse; }
.abr-dtab th, .abr-dtab td { text-align: left; padding: 5px 6px; border-bottom: 1px solid var(--line); }
.abr-dtab th { font-family: var(--display); font-size: 11px; text-transform: uppercase; color: var(--muted); }
.abr-dtab .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.abr-leer { color: var(--muted); margin: 0; }
.abr-detail-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 12px; }
.abr-sig { font-size: 13px; color: var(--ok); margin-left: auto; }
.abr-sig-no { color: var(--muted); }

/* ---------- Sprach-Umschalter (Kopfzeile) ---------- */
.top-right { display: flex; align-items: center; gap: 12px; }
.lang { display: inline-flex; gap: 2px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 7px; padding: 2px; }
.lang-btn {
  font-family: var(--display); font-weight: 700; font-size: 12px; letter-spacing: .06em;
  color: var(--muted); background: transparent; border: 0; cursor: pointer;
  padding: 4px 9px; border-radius: 5px;
}
.lang-btn.active { color: var(--bg); background: var(--accent); }