:root {
  --bg: #eef2f7;
  --bg-soft: #e7edf4;
  --panel: #ffffff;
  --line: #e6ebf2;
  --line-soft: #eff3f8;
  --ink: #1f2a37;
  --muted: #6b7787;
  --brand: #17557a;
  --brand-2: #1d6c98;
  --brand-d: #0f3e5a;
  --brand-tint: #eef5fa;   /* zarte Markenfläche (aktiv/hover) */
  --shadow: 0 1px 2px rgba(16,36,64,.05), 0 2px 8px rgba(16,36,64,.06);
  --shadow-lg: 0 6px 22px rgba(16,36,64,.12);
  --radius: 12px;
  --radius-sm: 8px;
  --a: #8a94a0;   /* intern vorgeplant  -> grau (Entwurf) */
  --b: #2f7fd1;   /* Vorschlag an Kunde -> blau */
  --c: #e0932a;   /* bestätigt, LS fehlt -> amber */
  --ok: #2f8f5b;  /* bestätigt          -> grün */
  --abs: #d15b5b; /* Abwesenheit / „nicht da" = ROT (Nutzerwunsch) */
  --urlaub: #d15b5b;
  --krank: #d15b5b;
  --fahrzeug: #c8862a; /* Fahrzeugtermin (Werkstatt/TÜV) */
  --privat: #7a5bb0;   /* Privattermin */
}
* { box-sizing: border-box; }
body {
  margin: 0; font-family: "Segoe UI", system-ui, Arial, sans-serif;
  background: var(--bg); color: var(--ink); font-size: 14.5px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

header.top {
  background: linear-gradient(135deg, var(--brand-2), var(--brand-d));
  color: #fff; padding: 0 22px;
  display: flex; align-items: center; gap: 22px; height: 58px;
  box-shadow: 0 2px 10px rgba(15,62,90,.22); position: sticky; top: 0; z-index: 20;
}
header.top .logo { font-weight: 700; font-size: 16px; letter-spacing: .3px; }
header.top nav { display: flex; gap: 2px; flex-wrap: wrap; }
header.top nav a {
  color: #d7e6f0; padding: 7px 13px; border-radius: 8px; font-weight: 500;
  transition: background .15s, color .15s;
}
header.top nav a:hover { background: rgba(255,255,255,.14); color:#fff; text-decoration: none; }
header.top nav a.active { background: rgba(255,255,255,.92); color: var(--brand-d); font-weight: 600; }

main { padding: 24px 22px; max-width: 1600px; margin: 0 auto; }

.toolbar {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
  flex-wrap: wrap;
}
.toolbar h1 { font-size: 22px; margin: 0; letter-spacing: -.2px; }
.spacer { flex: 1; }

.btn {
  display: inline-flex; align-items: center; gap: 6px; cursor: pointer;
  background: var(--brand); color: #fff; border: none; padding: 9px 15px;
  border-radius: 9px; font-size: 14px; font-weight: 600; line-height: 1.1;
  box-shadow: 0 1px 2px rgba(16,36,64,.12); transition: background .15s, transform .05s, box-shadow .15s;
}
.btn:hover { background: var(--brand-d); text-decoration: none; box-shadow: var(--shadow); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: #fff; color: var(--brand); border: 1px solid var(--line); box-shadow: none; }
.btn.ghost:hover { background: var(--brand-tint); border-color: #cfe0ec; }
.btn.danger { background: #c0392b; }
.btn.danger:hover { background: #a5321f; }
.btn.sm { padding: 5px 11px; font-size: 13px; border-radius: 8px; }

.pill { display:inline-block; padding: 2px 8px; border-radius: 20px; font-size: 12px; font-weight:600; }

select, input[type=text], input[type=date], input[type=email], input[type=time],
input[type=number], input[type=password], textarea {
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 9px;
  font-size: 14px; font-family: inherit; background: #fff; color: var(--ink);
  transition: border-color .15s, box-shadow .15s;
}
select:focus, input:focus, textarea:focus {
  outline: none; border-color: var(--brand-2);
  box-shadow: 0 0 0 3px rgba(29,108,152,.15);
}
textarea { width: 100%; resize: vertical; }
label { font-weight: 600; font-size: 13px; color: var(--muted); display:block; margin-bottom:4px;}

.panel {
  background: var(--panel); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}

/* Einheitliche Abschnitts-Überschriften mit dezentem Akzentbalken */
main h2, main h3 {
  letter-spacing: -.15px;
}
main h3 {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
main h3::before {
  content: ""; width: 4px; height: 1.05em; border-radius: 3px;
  background: currentColor; opacity: .85; flex: none;
}

/* ---------- Wochen-Raster ---------- */
.week { width: 100%; border-collapse: collapse; background: #fff;
  border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.week th, .week td { border: 1px solid var(--line); vertical-align: top; }
.week thead th {
  background: #eef3f7; padding: 8px 6px; font-size: 13px; position: sticky; top: 58px; z-index: 5;
}
.week thead th.today { background: #fde9c9; }
.week th.techname {
  text-align: left; padding: 8px 10px; background: #f7f9fb; width: 150px;
  position: sticky; left: 0; z-index: 6; font-size: 13px;
}
.week td.techname { position: sticky; left: 0; background: #f7f9fb; z-index: 4; }
.week td { padding: 3px; width: 13.2%; }
.week td.today { background: #fffaf0; }
.week td.weekend { background: #f2f4f7; }

.cell-add {
  display:block; text-align:center; color: var(--muted); font-size: 18px;
  padding: 6px; border-radius: 6px; opacity: 0;
}
.week td:hover .cell-add { opacity: .6; }
.cell-add:hover { background: #eef3f7; text-decoration:none; opacity:1 !important; }

.job {
  display: block; padding: 6px 8px; border-radius: 6px; margin-bottom: 3px;
  border-left: 4px solid var(--ok); background: #f0f7f2; color: var(--ink);
  font-size: 12.5px; line-height: 1.3; white-space: pre-line;
}
.job:hover { filter: brightness(.97); text-decoration: none; }
.job .loc { font-weight: 700; }
.job .time { color: var(--muted); font-size: 11.5px; }
.job.s-a { border-left-color: var(--a); background: #eef1f4; }
.job.s-b { border-left-color: var(--b); background: #e8f2fb; }
.job.s-c { border-left-color: var(--c); background: #fbf1de; }
.job.abs { border-left-color: var(--abs); background: #eef1f4; color: var(--muted); font-style: italic; }
.job.abs.urlaub { border-left-color: var(--urlaub); background:#fbecec; }
.job.abs.krank  { border-left-color: var(--krank);  background:#fbecec; }
.job.abs.fahrzeug { border-left-color: var(--fahrzeug); background:#f7efdd; color:#8a5a12; }
.job.abs.privat   { border-left-color: var(--privat);   background:#efeaf8; color:#5b3f8f; }
.job .hotel { font-size: 11px; color: var(--brand); }

/* ---------- Technikeransicht ---------- */
.tk-day { display:flex; gap:0; border-bottom:1px solid var(--line); }
.tk-date { width: 130px; padding: 12px 14px; background:#f7f9fb; border-right:1px solid var(--line);
  font-weight:600; flex-shrink:0; }
.tk-date .wd { color: var(--muted); font-weight:500; font-size:13px; }
.tk-date.we { color: var(--muted); }
.tk-date.today { background:#fde9c9; }
.tk-items { flex:1; padding: 8px 12px; display:flex; flex-direction:column; gap:6px; }
.tk-empty { color:#b3bcc7; padding:12px; font-style:italic; }
.tk-card { border:1px solid var(--line); border-left:4px solid var(--ok); border-radius:8px;
  padding:8px 12px; background:#fff; display:flex; gap:14px; align-items:flex-start; }
.tk-card.s-a{border-left-color:var(--a)} .tk-card.s-b{border-left-color:var(--b)} .tk-card.s-c{border-left-color:var(--c)}
.tk-card.abs{border-left-color:var(--abs); background:#f7f8fa; font-style:italic; color:var(--muted);}
.tk-card.abs.urlaub{border-left-color:var(--urlaub)} .tk-card.abs.krank{border-left-color:var(--krank)}
.tk-card.abs.fahrzeug{border-left-color:var(--fahrzeug); color:#8a5a12} .tk-card.abs.privat{border-left-color:var(--privat); color:#5b3f8f}
.tk-card .main { flex:1; }
.tk-card .loc { font-weight:700; font-size:15px; }
.tk-card .addr { color: var(--muted); font-size:13px; margin-top:2px; }
.tk-card .desc { font-size:13px; margin-top:4px; white-space:pre-line; }
.tk-card .meta { text-align:right; font-size:12px; color:var(--muted); min-width:90px; }

/* ---------- Tabellen ---------- */
table.data { width:100%; border-collapse: collapse; background:#fff; }
table.data th, table.data td { padding: 10px 14px; border-bottom:1px solid var(--line-soft); text-align:left; }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:nth-child(even) { background:#fafbfd; }
/* Tabellen liegen in eigenen Scroll-Containern (.panel) -> sticky ab deren Oberkante */
table.data thead th {
  background:#f3f6fa; font-size:11.5px; font-weight:700; letter-spacing:.4px;
  text-transform:uppercase; color:var(--muted);
  border-bottom:1px solid var(--line); position: sticky; top:0; z-index:2;
}
table.data tbody tr { transition: background .12s; }
table.data tbody tr:hover, table.data tbody tr:nth-child(even):hover { background: var(--brand-tint); }
.count { color: var(--muted); font-size: 12px; }

/* ---------- Formulare ---------- */
.form-grid { display:grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.field { margin-bottom: 4px; }
.field input, .field select { width:100%; }
.form-actions { display:flex; gap:10px; margin-top:18px; align-items:center; }

/* ---------- Wochen-Raster (getauschte Achsen) ---------- */
/* Auf der Wochenseite scrollt NUR das Raster – nie die Seite. So bleiben
   Technikernamen (oben) und Datum (links) beim Scrollen immer sichtbar. */
body.page-woche { overflow: hidden; }
body.page-woche main {
  display: flex; flex-direction: column;
  height: calc(100vh - 58px);
  max-width: none;            /* Wochenraster nutzt die volle Bildschirmbreite */
  padding: 12px 14px 6px; box-sizing: border-box;
}
body.page-woche .toolbar,
body.page-woche .legend,
body.page-woche .rw-drawer { flex: none; }
body.page-woche .grid-wrap { flex: 1 1 auto; min-height: 0; max-height: none; }
body.page-woche .rw-drawer .rw-cards { max-height: 22vh; overflow: auto; }

.grid-wrap {
  overflow: auto; max-height: calc(100vh - 165px);
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
}
/* overflow:visible überschreibt das overflow:hidden der alten .week-Regel —
   sonst klebt position:sticky an der Tabelle statt am Scroll-Container! */
.week-swap { border-collapse: separate; border-spacing: 0; width: max-content;
  min-width: 100%; overflow: visible; }
.week-swap th, .week-swap td { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.week-swap thead th {
  position: sticky; top: 0; z-index: 6; background: #eef3f7; padding: 0;
}
.week-swap th.corner {
  left: 0; z-index: 8; width: 74px; min-width: 74px;
  font-size: 12px; color: var(--muted); padding: 8px;
}
.week-swap th.techcol { height: 132px; width: 104px; min-width: 104px; vertical-align: bottom; }
.week-swap th.techcol a {
  display: flex; align-items: flex-end; justify-content: center;
  height: 100%; padding: 8px 0 10px; color: var(--ink); text-decoration: none;
}
.week-swap th.techcol a span {
  writing-mode: vertical-rl; transform: rotate(180deg);
  font-size: 12.5px; font-weight: 600; white-space: nowrap;
  max-height: 120px; overflow: hidden; text-overflow: ellipsis;
}
.week-swap th.techcol a:hover span { color: var(--brand); }

.week-swap td.daycol {
  position: sticky; left: 0; z-index: 4; background: #f7f9fb;
  width: 74px; min-width: 74px; text-align: center; padding: 8px 4px; vertical-align: top;
}
.week-swap td.daycol .wd { font-size: 12px; color: var(--muted); }
.week-swap td.daycol .dt { font-weight: 700; font-size: 14px; }
.week-swap td.daycol.today { background: #fde9c9; }

.week-swap td.drop {
  width: 104px; min-width: 104px; vertical-align: top; padding: 3px; position: relative;
}
.week-swap td.drop.weekend { background: #f4f6f9; }
.week-swap td.drop.today { background: #fffaf0; }

/* Abwesenheit / „nicht da" füllt die GANZE Zelle und ist IMMER ROT (Urlaub,
   Krank, Überstunden, Frei, Büro, Ferien …), damit es unmissverständlich ist. */
.week-swap td.drop.abs-cell.abs-urlaub,
.week-swap td.drop.abs-cell.abs-krank,
.week-swap td.drop.abs-cell.abs-sonst {
  background: #f2c6c6;                       /* BEWILLIGT = solide rot */
  box-shadow: inset 0 0 0 2px var(--krank);
}
/* BEANTRAGT (noch nicht genehmigt) = schraffiert */
.week-swap td.drop.abs-cell.abs-urlaub.beantragt,
.week-swap td.drop.abs-cell.abs-krank.beantragt,
.week-swap td.drop.abs-cell.abs-sonst.beantragt {
  background: repeating-linear-gradient(45deg, #fbdada, #fbdada 9px, #f0b4b4 9px, #f0b4b4 18px);
}
.week-swap td.drop.abs-cell.abs-fahrzeug {
  background: repeating-linear-gradient(45deg, #f6ecd6, #f6ecd6 10px, #eeddb4 10px, #eeddb4 20px);
  box-shadow: inset 0 0 0 2px var(--fahrzeug);
}
.week-swap td.drop.abs-cell.abs-privat {
  background: repeating-linear-gradient(45deg, #ece6f7, #ece6f7 10px, #ded2f0 10px, #ded2f0 20px);
  box-shadow: inset 0 0 0 2px var(--privat);
}
/* Abwesenheits-Kachel darin: groß, fett, zentriert */
.week-swap td.abs-cell .job.abs {
  background: transparent; border-left: none; font-style: normal;
  font-weight: 800; font-size: 13px; text-align: center; padding: 10px 4px;
}
.week-swap td.abs-cell.abs-urlaub .job.abs,
.week-swap td.abs-cell.abs-krank  .job.abs,
.week-swap td.abs-cell.abs-sonst  .job.abs { color: #a12626; }
.week-swap td.abs-cell.abs-fahrzeug .job.abs { color: #8a5a12; }
.week-swap td.abs-cell.abs-privat   .job.abs { color: #5b3f8f; }
/* Mehrwochen-Ansicht: Wochentrenner + KW-Marker */
.week-swap tr.week-start > td { border-top: 3px solid var(--brand); }
.week-swap .daycol .kw { font-size:10px; font-weight:700; color:var(--brand);
  letter-spacing:.03em; margin-bottom:1px; }
.week-swap td.drop.over { outline: 2px dashed var(--brand); outline-offset: -2px; background: #e8f2f8; }
.week-swap tr.today-row td.daycol { box-shadow: inset 3px 0 0 var(--brand); }

.week-swap .job {
  display: block; padding: 5px 7px; border-radius: 6px; margin-bottom: 4px;
  border-left: 4px solid var(--ok); background: #f0f7f2; color: var(--ink);
  font-size: 12px; line-height: 1.28; cursor: grab; word-break: break-word;
}
.week-swap .job:hover { filter: brightness(.97); }
.week-swap .job.dragging { opacity: .35; }
.week-swap .job .loc { font-weight: 700; display: block; }
.week-swap .job .time { color: var(--muted); font-size: 11px; display: block; }
.week-swap .job .span { display:block; font-size: 11px; color: var(--brand); font-weight:600; }
.week-swap .job.multiday { border-left-style: double; border-left-width: 6px; }
.week-swap .job.s-a { border-left-color: var(--a); background: #fbf3e6; }
.week-swap .job.s-b { border-left-color: var(--b); background: #f1eefb; }
.week-swap .job.s-c { border-left-color: var(--c); background: #fbf3e0; }
.week-swap .job.abs { border-left-color: var(--abs); background: #eef1f4; color: var(--muted); font-style: italic; }
.week-swap .job.abs.urlaub { border-left-color: var(--urlaub); background:#fbecec; }
.week-swap .job.abs.krank  { border-left-color: var(--krank);  background:#fbecec; }
.week-swap .job.abs.fahrzeug { border-left-color: var(--fahrzeug); background:#f7efdd; }
.week-swap .job.abs.privat   { border-left-color: var(--privat);   background:#efeaf8; }

/* Skill-Warnung im Formular */
.skill-warn { background:#fdecec; border:1px solid #f3b6b6; color:#a12626; font-weight:600;
  border-radius:8px; padding:10px 12px; font-size:13px; }
.conflict-warn { background:#fbe4e4; border:1px solid #e79a9a; color:#8f1d1d; font-weight:600;
  border-radius:8px; padding:10px 12px; font-size:13px; }
/* Marker auf der Kachel */
.week-swap .job .skill-flag { display:block; background:#c0392b; color:#fff; font-weight:700;
  font-size:10.5px; padding:1px 5px; border-radius:4px; margin-bottom:3px; }
.week-swap .job .conflict-flag { display:block; background:#7a1f1f; color:#fff; font-weight:700;
  font-size:10.5px; padding:1px 5px; border-radius:4px; margin-bottom:3px; }
.week-swap .job.skillwarn { box-shadow: inset 0 0 0 2px #e6a2a2; }
.week-swap .job.conflict { box-shadow: inset 0 0 0 2px #b34; }

/* Hotel-Pflichtfeld im Formular */
.hotel-field { background:#fff7ef; border:1px solid #ffd9a8; border-radius:10px; padding:14px 16px; }
.hotel-field > label { font-size:15px; color:var(--ink); font-weight:700; margin-bottom:10px; }
.hotel-field .pflicht { color:#d9730a; font-size:12px; font-weight:700; margin-left:6px;
  background:#ffe6c9; padding:2px 8px; border-radius:6px; }
.hotel-choice { display:flex; gap:12px; }
.hotel-choice label { flex:1; display:flex; align-items:center; gap:10px; cursor:pointer;
  border:2px solid var(--line); border-radius:10px; padding:14px 16px; font-size:15px;
  font-weight:600; background:#fff; margin:0; color:var(--ink); }
.hotel-choice input { width:20px; height:20px; accent-color:#ff8c1a; margin:0; }
.hotel-choice .hc-ja:has(input:checked)   { border-color:#ff8c1a; background:#fff1e0; box-shadow:0 0 0 3px rgba(255,140,26,.15); }
.hotel-choice .hc-nein:has(input:checked) { border-color:var(--brand); background:#eef4f8; box-shadow:0 0 0 3px rgba(23,85,122,.12); }
.hotel-choice label:hover { border-color:#c9d2dc; }

/* ✕-Löschbutton auf den Kacheln */
.week-swap .job { position: relative; }
.tile-del {
  position:absolute; top:2px; right:2px; width:18px; height:18px; padding:0;
  border:none; border-radius:5px; background:rgba(210,60,60,.12); color:#c0392b;
  font-size:12px; line-height:1; cursor:pointer; opacity:0; transition:opacity .1s;
  display:flex; align-items:center; justify-content:center; font-weight:700;
}
.week-swap .job:hover .tile-del { opacity:1; }
.tile-del:hover { background:#c0392b; color:#fff; }

/* Großes, auffälliges Hotel-Badge */
.hotel-badge {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 5px;
  background: #ff8c1a; color: #fff; font-weight: 800; font-size: 11.5px;
  padding: 3px 8px; border-radius: 6px; letter-spacing: .04em;
  box-shadow: 0 1px 3px rgba(214,110,0,.4);
}
/* Hotel gebucht: grün statt orange */
.hotel-badge.booked {
  background: #1d7a44; box-shadow: 0 1px 3px rgba(20,110,60,.4);
}

/* Buchungsstatus im Einsatz-Formular */
.hb-state { margin-top: 10px; padding: 8px 12px; border-radius: 8px;
  font-weight: 700; font-size: 13.5px; }
.hb-state.pending { background: #fff1e0; border: 1px solid #ffce97; color: #a35c00; }
.hb-state.booked  { background: #e6f5ec; border: 1px solid #a8d8bc; color: #1d7a44; }
.hb-warn { margin-top: 8px; padding: 10px 12px; border-radius: 8px; font-size: 13px;
  background: #fbe4e4; border: 1px solid #e79a9a; color: #8f1d1d;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

/* Abgeschlossener Einsatz: grün abgesetzt, gedämpft */
.week-swap .job.done {
  background: #eef8f1 !important; border-left-color: #1d7a44 !important;
  opacity: .85;
}
.week-swap .job.done .loc { text-decoration: line-through; text-decoration-color: #8fbfa2; }
.done-badge {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 5px;
  background: #1d7a44; color: #fff; font-weight: 800; font-size: 11.5px;
  padding: 3px 8px; border-radius: 6px; letter-spacing: .04em;
}
.legend .lg-done::before {
  content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 5px;
  border-radius: 3px; background: #1d7a44; vertical-align: -1px;
}

/* Kollegen-Badge (Gruppen-Einsatz mit mehreren Technikern) */
.week-swap .job .crew-badge {
  display: inline-block; margin-top: 4px; background: #e5edf5; color: var(--brand);
  font-weight: 700; font-size: 11px; padding: 2px 7px; border-radius: 6px;
}

/* Abschluss-Box im Einsatz-Formular (deutlicher Button + Hinweisfeld) */
.complete-box {
  border: 2px solid #cfe6d8; border-radius: 10px; padding: 14px 16px;
  background: #f3faf5;
}
.complete-box.is-done { border-color: #1d7a44; background: #e9f6ee; }
.complete-box .cb-head {
  font-weight: 800; font-size: 15px; color: #1d7a44; margin-bottom: 8px;
}
.complete-box label { font-size: 12px; color: var(--muted); }
.complete-box textarea { width: 100%; margin: 4px 0 10px; resize: vertical; }
.btn.done-btn {
  background: #1d7a44; font-size: 15px; font-weight: 700; padding: 11px 20px;
}
.btn.done-btn:hover { background: #17633a; }
.btn.reopen-btn { font-size: 13px; }

/* Partner-Techniker-Zeilen (weitere Techniker vor Ort) */
.partner-row {
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr auto; gap: 6px;
  align-items: center; margin-bottom: 6px;
}
.partner-row select, .partner-row input { width: 100%; }
@media (max-width: 720px) {
  .partner-row { grid-template-columns: 1fr 1fr; }
}

/* ✓-Knopf auf der Kachel (spiegelt den ✕-Löschknopf) */
.tile-done {
  position: absolute; top: 2px; right: 22px; width: 18px; height: 18px;
  border: none; border-radius: 4px; cursor: pointer; padding: 0; line-height: 1;
  background: #d4e8dc; color: #1d7a44; font-weight: 700; opacity: 0;
  display: flex; align-items: center; justify-content: center; font-size: 12px;
  transition: opacity .12s;
}
.week-swap .job:hover .tile-done { opacity: 1; }
.tile-done:hover { background: #1d7a44; color: #fff; }
.week-swap .job.done .tile-done { opacity: 1; background: #1d7a44; color: #fff; }
/* Bei erledigten Kacheln wandert das ✕ nach links, damit beide sichtbar bleiben */
.week-swap .job.done .tile-del { right: 44px; }

.span-badge { display:inline-block; background:#eaf0f6; color:var(--brand); font-weight:600;
  font-size:11.5px; padding:2px 7px; border-radius:6px; }
.route-btn { display:inline-block; margin-top:8px; background:var(--brand); color:#fff;
  font-size:12px; font-weight:600; padding:4px 10px; border-radius:7px; }
.route-btn:hover { background:var(--brand-d); text-decoration:none; }
.route-btn.plan { background:#2f8f5b; }
.route-btn.plan:hover { background:#226b43; }

/* ---------- Routenplaner ---------- */
.route-layout { display:grid; grid-template-columns: 1fr 400px; gap:16px;
  height: calc(100vh - 140px); }
#map { min-height: 400px; }
.route-list { padding:16px; overflow:auto; }
.route-list ol { margin:0; padding-left:22px; }
.route-list .stop { margin-bottom:10px; padding:8px 10px; border:1px solid var(--line);
  border-radius:8px; background:#fff; display:flex; flex-wrap:wrap; align-items:center; gap:8px; }
.route-list .stop.nogeo { border-color:#e6a2a2; background:#fdf4f4; }
.route-list .stop-main { flex:1; min-width:0; }
.route-list .leg { width:100%; font-size:12px; color:var(--brand); font-weight:600;
  border-top:1px dashed var(--line); margin:-2px 0 4px; padding-top:4px; }
.route-list .stop-btns { display:flex; flex-direction:column; gap:3px; }
.route-list .mini { border:1px solid var(--line); background:#f7f9fb; border-radius:5px;
  width:26px; height:22px; cursor:pointer; font-size:11px; padding:0; }
.route-list .mini:hover:not(:disabled) { background:#e8eef4; }
.route-list .mini:disabled { opacity:.3; cursor:default; }

/* ---------- Mengen (Soll/Ist) ---------- */
.item-row { display:flex; gap:6px; margin-bottom:6px; align-items:center; }
.item-row input[type=text], .item-row select { flex:2; min-width:140px; }
.item-row input[type=number] { width:84px; }
.item-del { border:1px solid var(--line); background:#fff; color:#c0392b; border-radius:6px;
  width:28px; height:32px; cursor:pointer; flex:none; }
.item-del:hover { background:#fdecec; }
.week-swap .job .qty { display:block; font-size:11px; color:#7a5b13; font-weight:600; }
.qty-line { margin-top:5px; display:flex; gap:6px; flex-wrap:wrap; }
.qty-badge { display:inline-block; background:#fdf6e4; border:1px solid #ecd9a0; color:#7a5b13;
  font-size:12px; font-weight:600; padding:2px 8px; border-radius:6px; }
.qty-badge.done { background:#e6f5ec; border-color:#a8d8bc; color:#1d7a44; }

/* Routen-Nummer + ⚡-Link im Raster */
.week-swap .job .ord { position:absolute; top:2px; right:22px; background:var(--brand);
  color:#fff; font-size:10px; font-weight:800; width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; }
.cell-route { display:block; text-align:center; font-size:11px; font-weight:700;
  color:#2f8f5b; padding:3px; border-radius:6px; margin-bottom:2px; opacity:0; }
.week-swap td:hover .cell-route { opacity:1; }
.cell-route:hover { background:#e6f5ec; text-decoration:none; }

/* Hotel-Buchungsworkflow */
.book-row { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.book-form { display:flex; gap:6px; align-items:center; margin:0; }
.book-form select { max-width:170px; padding:6px 8px; font-size:13px; }

/* ---------- Abschließen-Buttons + Restarbeiten-Reiter ---------- */
.nav-count { display:inline-flex; align-items:center; justify-content:center;
  background:#e11d48; color:#fff; font-size:11px; font-weight:800;
  min-width:18px; height:18px; padding:0 5px; border-radius:9px; margin-left:2px; }

.week-swap .job .tile-complete {
  display:block; width:100%; margin-top:6px; padding:6px 2px;
  background:#2f8f5b; color:#fff; border:none; border-radius:6px;
  font-size:11px; font-weight:800; cursor:pointer;
  white-space:nowrap; overflow:hidden;
}
.week-swap .job .tile-complete:hover { background:#226b43; }

.tk-complete, .tk-reopen {
  display:inline-block; margin-top:8px; padding:9px 16px; border-radius:8px;
  font-size:13.5px; font-weight:700; cursor:pointer; white-space:nowrap;
}
.tk-complete { background:#2f8f5b; color:#fff; }
.tk-complete:hover { background:#226b43; }
.tk-reopen { background:#fff; color:var(--muted); border:1px solid var(--rand, #dde2ea);
  border:1px solid var(--line); font-size:12px; padding:5px 10px; }
.tk-reopen:hover { color:var(--brand); border-color:var(--brand); }
.tk-done-info { display:inline-block; margin-top:6px; background:#e6f5ec; color:#1d7a44;
  font-weight:700; font-size:12.5px; padding:4px 10px; border-radius:7px; }
.tk-card.done { background:#f4faf6; border-left-color:#1d7a44 !important; }
.tk-card.done .loc { text-decoration: line-through; text-decoration-thickness:1.5px; color:#4c6d59; }

/* Restarbeiten-Leiste in der Wochenübersicht */
.rw-drawer { background:#fff; border:1px solid var(--line); border-radius:10px;
  padding:12px 16px; margin-bottom:12px; }
.rw-drawer-head { display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:10px; }
.rw-cards { display:flex; gap:10px; flex-wrap:wrap; }
.rw-card { display:flex; flex-direction:column; gap:2px; cursor:grab;
  border:1px solid var(--line); border-left:4px solid var(--abs);
  border-radius:8px; padding:8px 12px; background:#f7f9fb; font-size:12.5px;
  min-width:170px; }
.rw-card:active { cursor:grabbing; }
.rw-card.dragging { opacity:.4; }
.rw-card .rw-age { font-size:11px; color:var(--muted); }
.rw-card.age-warn { border-left-color:#ff8c1a; background:#fff5e9; }
.rw-card.age-warn .rw-age { color:#a35c00; font-weight:700; }
.rw-card.age-crit { border-left-color:var(--krank); background:#fdeeee; }
.rw-card.age-crit .rw-age { color:#a12626; font-weight:800; }
/* Alters-Färbung im Reiter */
tr.rw-warn td:first-child { box-shadow: inset 3px 0 0 #ff8c1a; }
tr.rw-crit td:first-child { box-shadow: inset 3px 0 0 var(--krank); }

/* Abschluss-Dialog */
.ch-head { font-size:15px; margin:0 0 10px; }
.ch-table td, .ch-table th { padding:8px 10px; }
.ch-hint { font-size:12px; font-weight:700; }
.ch-hint.ok { color:#1d7a44; }
.ch-hint.over { color:#1c6ea0; }
.ch-hint.under { color:#a35c00; }
/* Kollegen-Hinweis bei Restarbeiten */
.rw-note { margin-top:6px; background:#fdf6e4; border:1px solid #ecd9a0; color:#7a5b13;
  border-radius:7px; padding:6px 10px; font-size:13px; display:inline-block; }
.rw-card .rw-note-mini { font-size:11px; color:#7a5b13; background:#fdf6e4;
  border-radius:5px; padding:1px 6px; max-width:220px; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; }

.rw-auftrag { margin-bottom:16px; }
.rw-head { display:flex; align-items:center; justify-content:space-between;
  gap:12px; flex-wrap:wrap; padding:12px 16px; border-bottom:1px solid var(--line);
  background:#f7f9fb; border-radius:10px 10px 0 0; }

/* ---------- Dokumente an Einsätzen ---------- */
.doc-list { display:flex; flex-direction:column; gap:5px; margin-bottom:8px; }
.doc-row { display:flex; align-items:center; gap:10px; border:1px solid var(--line);
  border-radius:8px; padding:6px 10px; background:#f7f9fb; font-size:13px; }
.doc-row a { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.doc-upload { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.doc-upload select { max-width:170px; }
.doc-line { margin-top:5px; display:flex; gap:6px; flex-wrap:wrap; }
.doc-badge { display:inline-block; background:#eef3f7; border:1px solid var(--line);
  color:var(--brand); font-size:12px; font-weight:600; padding:2px 8px; border-radius:6px; }
.doc-badge:hover { background:#e0eaf2; text-decoration:none; }
.week-swap .job .doc-count { display:inline-block; font-size:11px; color:var(--brand);
  font-weight:700; }
.tk-crew { margin-top:5px; background:#f1eefb; border:1px solid #d6cdf2; color:#4d3f8f;
  font-size:12.5px; padding:4px 10px; border-radius:7px; display:inline-block; }
.tk-card.noedit .doc-badge { pointer-events:auto; }

/* ---------- Login + Zugänge + Portal ---------- */
body.login-page { display:flex; align-items:center; justify-content:center;
  min-height:100vh; background:var(--brand); }
.login-box { width:360px; padding:30px 34px; border-radius:14px; }
.login-box h1 { font-size:19px; margin:0 0 4px; color:var(--brand); }
.login-box .field { margin-top:12px; }
.login-box input { width:100%; }
.login-fehler { background:#fdecec; border:1px solid #f3b6b6; color:#a12626;
  font-weight:600; border-radius:8px; padding:8px 12px; margin-top:10px; font-size:13px; }
.nav-user { margin-left:auto; color:rgba(255,255,255,.85); font-size:13px; white-space:nowrap; }
.nav-logout { color:#dbe8f1; font-size:13px; padding:6px 10px; border-radius:7px;
  border:1px solid rgba(255,255,255,.25); white-space:nowrap; }
.nav-logout:hover { background:rgba(255,255,255,.12); text-decoration:none; }
/* Portal: Karten nicht bearbeitbar, aber Knöpfe bleiben klickbar */
.tk-card.noedit { pointer-events:none; }
.tk-card.noedit .tk-complete, .tk-card.noedit .tk-reopen,
.tk-card.noedit .maps-link { pointer-events:auto; }

/* ---------- Hilfe ---------- */
.hilfe { max-width: 860px; }
.hilfe .toc { padding: 14px 18px; display: flex; flex-wrap: wrap; gap: 6px 14px;
  align-items: center; margin-bottom: 16px; font-size: 13.5px; }
.hilfe section { padding: 18px 22px; margin-bottom: 16px; }
.hilfe h2 { margin: 0 0 10px; font-size: 17px; }
.hilfe ol, .hilfe ul { margin: 6px 0; padding-left: 24px; line-height: 1.75; }
.hilfe li { margin-bottom: 4px; }
.hilfe p { line-height: 1.65; }
.hilfe .tipp { background: #f2f8fb; border-left: 4px solid var(--urlaub);
  padding: 9px 13px; border-radius: 0 8px 8px 0; font-size: 13.5px; }

/* ---------- Prüfen / Wartungen ---------- */
.ok-row { color:#1d7a44; padding:14px !important; }
tr.overdue td { background:#fdf0f0; }
tr.overdue td:first-child { box-shadow: inset 3px 0 0 var(--krank); }
.plan-add { display:flex; gap:8px; padding:12px; border-top:1px solid var(--line);
  flex-wrap:wrap; align-items:center; }
.maps-link { cursor:pointer; margin-left:4px; }
.maps-link:hover { filter:brightness(1.1); }

/* ---------- Skilltabelle ---------- */
.skills-table td.skill-name { text-align: left; font-weight: 600; padding: 8px 10px; width: 170px; min-width: 170px; }
.skills-table th.techcol { height: 150px; width: 42px; min-width: 42px; }
.skills-table th.techcol span { max-height: 138px; }
.skills-table .skill-cell {
  width: 42px; min-width: 42px; text-align: center; cursor: pointer;
  background: #fff; user-select: none; font-size: 14px; color: var(--ok);
}
.skills-table .skill-cell:hover { background: #eef3f7; }
.skills-table .skill-cell.on { background: #e6f5ec; }
.skills-table .skill-cell.on .mark { color: var(--ok); font-weight: 800; }
.skills-table tr:hover .skill-name { color: var(--brand); }
.skills-table .sum-row td { background: #f7f9fb; font-weight: 700; color: var(--muted); }
.skills-table .skill-cell.sum { color: var(--brand); font-size: 13px; }

/* ---------- Merge-Leiste ---------- */
.merge-bar {
  position: sticky; bottom: 0; margin-top: 12px;
  display: flex; align-items: center; gap: 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 18px; box-shadow: 0 -3px 12px rgba(0,0,0,.06);
}
.merge-bar[hidden] { display: none; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(20,30,42,.45);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px; z-index: 100; overflow: auto;
}
.modal-backdrop[hidden] { display: none; }
.modal-box {
  background: #fff; border-radius: 16px; width: 100%; max-width: 800px;
  box-shadow: var(--shadow-lg); animation: pop .12s ease-out;
  display: flex; flex-direction: column; max-height: 90vh; overflow: hidden;
}
@keyframes pop { from { transform: translateY(-8px); opacity: .6; } to { transform: none; opacity: 1; } }
.modal-head {
  display: flex; align-items: center; justify-content: space-between; flex: none;
  padding: 15px 22px; border-bottom: 1px solid var(--line); font-weight: 700; font-size: 16px;
  background: var(--brand-tint); color: var(--brand-d);
}
.modal-close {
  border: none; background: rgba(15,62,90,.10); width: 32px; height: 32px; border-radius: 9px;
  cursor: pointer; font-size: 15px; color: var(--brand-d); transition: background .12s;
}
.modal-close:hover { background: rgba(15,62,90,.20); }
.modal-body { padding: 22px; overflow: auto; flex: 1 1 auto; }
.modal-loading { padding: 30px; text-align: center; color: var(--muted); }

.status-badge { padding:3px 9px; border-radius:6px; font-size:12px; font-weight:600; color:#fff;}
.legend { display:flex; gap:14px; flex-wrap:wrap; font-size:12px; color:var(--muted); margin-top:10px; }
.legend span::before { content:""; display:inline-block; width:11px; height:11px; border-radius:3px; margin-right:5px; vertical-align:-1px;}
.lg-ok::before{background:var(--ok)} .lg-a::before{background:var(--a)} .lg-b::before{background:var(--b)}
.lg-c::before{background:var(--c)} .lg-urlaub::before{background:var(--urlaub)} .lg-krank::before{background:var(--krank)}
.lg-fahrzeug::before{background:var(--fahrzeug)} .lg-privat::before{background:var(--privat)}

/* Zugänge-Verwaltung */
.zug-list { display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:14px; margin-bottom:22px; }
.zug-card { padding:12px 14px; }
.zug-head { display:flex; align-items:center; gap:10px; margin-bottom:8px; font-size:15px; }
.zug-badge { font-size:11px; font-weight:700; border-radius:6px; padding:2px 8px; }
.zug-badge.on { background:#e6f5ec; color:#1d7a44; }
.zug-badge.off { background:#eef1f4; color:#6b7787; }
.zug-fields { display:flex; flex-direction:column; gap:8px; margin-bottom:8px; }
.zug-fields label { display:flex; flex-direction:column; gap:3px; font-size:12px; color:var(--muted); }
.zug-fields input { padding:7px 9px; border:1px solid var(--line); border-radius:6px; font-size:13px; }
.zug-perms-h { display:block; font-size:12px; font-weight:700; margin:2px 0 6px; }
.perm-grid { display:grid; grid-template-columns:1fr 1fr; gap:4px 12px; }
.perm-chk { font-size:12.5px; display:flex; align-items:center; gap:6px; cursor:pointer; }
.zug-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:10px;
  padding-top:10px; border-top:1px solid var(--line); }

/* Termin-Hinweis (💡) */
.week-swap .job .hint-badge { display:block; font-size:10.5px; color:#8a5a12;
  background:#fdf6e3; border-radius:4px; padding:1px 5px; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tk-hinweis { margin-top:3px; font-size:12.5px; color:#8a5a12;
  background:#fdf6e3; border-left:3px solid var(--fahrzeug); border-radius:0 6px 6px 0;
  padding:3px 8px; display:inline-block; }
/* Foto-/Datei-Upload */
.doc-upload input[type=file] { max-width:100%; }
.doc-hint { font-size:12px; color:var(--muted); margin:4px 0 0; }

/* Kunden-Qualitätsfilter + Tags */
.kfilter { display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 2px; }
.kfilter a { text-decoration:none; font-size:13px; color:var(--muted);
  border:1px solid var(--line); border-radius:999px; padding:4px 12px; background:#fff; }
.kfilter a b { color:var(--ink); }
.kfilter a.on { background:var(--brand); border-color:var(--brand); color:#fff; }
.kfilter a.on b { color:#fff; }
.qtag { display:inline-block; font-size:11.5px; font-weight:600; border-radius:5px;
  padding:1px 7px; margin:1px 3px 1px 0; white-space:nowrap; }
.qtag.rausch { background:#fdecec; color:#b0392b; }
.qtag.addr { background:#f2eede; color:#8a6a12; }
.qtag.dup { background:#eee7f7; color:#5b3f8f; }

/* „Foto/Dokument anhängen"-Button in der Technikeransicht */
.tk-doc { display:inline-block; margin-top:6px; cursor:pointer; font-size:12.5px;
  font-weight:600; color:var(--brand); border:1px solid var(--line); border-radius:6px;
  padding:3px 9px; background:#fff; }
.tk-doc:hover { background:#eef3f7; }
.dok-form .ch-head { margin:0 0 8px; }
.dok-form .doc-upload { display:flex; gap:8px; flex-wrap:wrap; align-items:center; }

/* Teamleiter-Markierung */
.tl-badge { display:inline-block; font-size:10.5px; font-weight:700; color:#8a6a12;
  background:#fbf1d6; border:1px solid #ecd9a3; border-radius:5px; padding:0 6px; margin-top:2px; }
.tk-tl { display:inline-block; font-size:12px; font-weight:700; color:#8a6a12;
  background:#fbf1d6; border-radius:5px; padding:1px 8px; margin-left:6px; }

/* Techniker-Reiter „Meine Übernachtungen" */
.uebn-list { display:flex; flex-direction:column; gap:10px; }
.uebn-card { display:flex; gap:16px; align-items:flex-start; padding:14px 16px; }
.uebn-card.is-booked { border-left:4px solid var(--ok); }
.uebn-when { min-width:78px; text-align:center; }
.uebn-when .dt { font-size:19px; font-weight:800; color:var(--brand); font-variant-numeric:tabular-nums; }
.uebn-when .bis { font-size:12px; color:var(--muted); }
.uebn-main { flex:1; min-width:0; }
.uebn-main .loc { font-weight:700; font-size:16px; }
.uebn-main .addr, .uebn-main .kontakt, .uebn-main .zeit { font-size:13px; color:var(--muted); margin-top:3px; }
.uebn-main .maps { margin-left:6px; }
.uebn-hotel { min-width:210px; text-align:right; display:flex; flex-direction:column; gap:5px; align-items:flex-end; }
.uebn-hotel .hb { font-size:12.5px; font-weight:700; border-radius:6px; padding:2px 9px; }
.uebn-hotel .hb.ok { background:#e6f5ec; color:#1d7a44; }
.uebn-hotel .hb.offen { background:#fff3e0; color:#a35c00; }
.uebn-hotel .hname { font-size:13px; font-weight:600; }
.uebn-hotel .hint { font-size:11.5px; color:var(--muted); }
@media (max-width:640px){ .uebn-card{flex-wrap:wrap} .uebn-hotel{min-width:0;text-align:left;align-items:flex-start} }
.uebn-card.is-storno { border-left:4px solid var(--krank); }
.uebn-hotel .hb.storno { background:#fdecec; color:#b0392b; }
/* Storno-Badge (Wochenraster + Technikeransicht) */
.hotel-badge.storno { background:#fdecec !important; color:#b0392b !important; font-weight:700; }

/* Hotel-Auswertung */
tr.ha-neg td:first-child { box-shadow: inset 3px 0 0 var(--krank); }
tr.ha-pos td:first-child { box-shadow: inset 3px 0 0 var(--ok); }
.ha-ja { background:#e6f5ec; color:#1d7a44; font-weight:700; border-radius:5px; padding:1px 8px; }
.ha-nein { background:#fdecec; color:#b0392b; font-weight:700; border-radius:5px; padding:1px 8px; }
.ha-komm { font-size:12.5px; margin:2px 0; }
.ha-komm.neg { color:#a12626; } .ha-komm.pos { color:#1d7a44; }

/* Team-Gesamtabschluss */
.tk-team { display:inline-block; margin-top:6px; cursor:pointer; font-size:12.5px;
  font-weight:700; color:#fff; background:var(--brand); border-radius:6px; padding:3px 10px; }
.tk-team:hover { background:var(--brand-d); }
.tk-order-done { display:inline-block; margin-top:6px; font-size:12.5px; font-weight:700;
  color:#1d7a44; background:#e6f5ec; border-radius:6px; padding:3px 10px; }
.team-warn { background:#fdf0ec; border:1px solid #f1c4b4; border-radius:8px; padding:10px 12px;
  font-size:13.5px; color:#a1471f; margin-top:8px; }
.team-ok { background:#e6f5ec; border:1px solid #bfe3cc; border-radius:8px; padding:10px 12px;
  font-size:13.5px; color:#1d7a44; margin-top:8px; }

/* Dashboard „Übersicht" */
.dash-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.dash-card { display:block; text-decoration:none; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; padding:16px 18px; color:var(--ink); transition:.12s; }
.dash-card:hover { box-shadow:0 2px 10px rgba(0,0,0,.07); border-color:var(--brand); }
.dash-card.is-warn { border-left:4px solid var(--krank); }
.dash-card .dc-num { font-size:34px; font-weight:800; color:var(--brand); line-height:1; font-variant-numeric:tabular-nums; }
.dash-card .dc-lbl { font-weight:600; margin-top:6px; }
.dash-card .dc-sub { font-size:12.5px; color:var(--muted); margin-top:4px; }
.dash-card .dc-red { color:#b0392b; font-weight:700; }
td.dash-n { text-align:right; font-weight:800; font-variant-numeric:tabular-nums; width:70px; }
.dash-links { display:flex; gap:10px; flex-wrap:wrap; }

/* Ausklappbare „Mehr"-Bereiche im Einsatz-Formular (Entrümpelung) */
.einsatz-form details.more { grid-column:1 / -1; border:1px solid var(--line);
  border-radius:8px; background:#fafbfc; margin:2px 0; }
.einsatz-form details.more > summary { cursor:pointer; padding:9px 12px; font-weight:600;
  font-size:13.5px; color:var(--brand-d); list-style:none; display:flex; align-items:center; gap:8px; }
.einsatz-form details.more > summary::-webkit-details-marker { display:none; }
.einsatz-form details.more > summary::before { content:'▸'; font-size:12px; transition:transform .15s; color:var(--muted); }
.einsatz-form details.more[open] > summary::before { transform:rotate(90deg); }
.einsatz-form details.more > .field { padding:0 12px 12px; }

/* ---------- Ansichts-Umschalter (Tag/Woche/Monat) ---------- */
.viewsw { display:inline-flex; background:#fff; border:1px solid var(--line);
  border-radius:10px; padding:2px; box-shadow:var(--shadow); }
.viewsw.sub { box-shadow:none; background:var(--bg-soft); }
.viewsw a { padding:6px 13px; border-radius:8px; font-weight:600; font-size:13px;
  color:var(--muted); transition:background .12s,color .12s; }
.viewsw a:hover { color:var(--brand); text-decoration:none; }
.viewsw a.active { background:var(--brand); color:#fff; }
.viewsw.sub a.active { background:var(--brand-2); }

/* ---------- Ruhetag (Mo/So grau; Di–Sa Arbeitstage) ---------- */
.week-swap td.weekend { background:#eef1f5; }
.daycol.ruhetag { background:#e9edf2; }
.daycol.ruhetag .wd, .daycol.ruhetag .dt { color:#98a2af; }

/* ---------- Fortsetzung eines mehrtägigen Einsatzes (volle Statusfarbe) ---------- */
/* Kein grauer Sonderstil mehr: die Fortsetzung trägt dieselbe Farbe wie der
   1. Tag (grün = bestätigt), damit ein durchlaufender Einsatz klar erkennbar ist. */
.job.cont { padding:6px 8px; margin-bottom:3px; cursor:pointer; }
.job.cont .cont-note { display:block; font-size:11px; color:var(--muted); }
.job.cont.done { opacity:.62; }
.job.cont.nichtgearbeitet { background:#fbecec !important; border-left-color:var(--abs) !important;
  color:var(--muted); }
.job.cont.nichtgearbeitet .loc { text-decoration:line-through; }

/* ---------- Monats-Kalenderblatt ---------- */
.cal { flex:1 1 auto; min-height:0; display:flex; flex-direction:column;
  border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
  background:#fff; box-shadow:var(--shadow); }
.cal-head { display:grid; grid-template-columns:repeat(7,1fr); background:#f3f6fa;
  border-bottom:1px solid var(--line); }
.cal-hcell { padding:8px; font-size:11.5px; font-weight:700; text-transform:uppercase;
  letter-spacing:.4px; color:var(--muted); text-align:center; }
.cal-hcell.frei { color:#aab3bf; }
.cal-grid { flex:1 1 auto; min-height:0; overflow:auto;
  display:grid; grid-template-columns:repeat(7,1fr); grid-auto-rows:minmax(104px,auto); }
.cal-cell { border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  padding:4px 5px 6px; display:flex; flex-direction:column; gap:2px; }
.cal-cell.frei { background:#eef1f5; }
.cal-cell.outside { background:#f7f9fb; }
.cal-cell.outside .cal-date { opacity:.4; }
.cal-cell.today { background:#fffaf0; box-shadow:inset 0 0 0 2px #f5c877; }
.cal-date { font-weight:700; font-size:12.5px; text-align:right; margin-bottom:1px; }
.cal-date a { color:inherit; }
.cal-chip { display:block; font-size:11px; line-height:1.3; padding:2px 6px; border-radius:5px;
  border-left:3px solid var(--ok); background:#f0f7f2; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; cursor:pointer; }
.cal-chip.s-a{border-left-color:var(--a);background:#eef1f4}
.cal-chip.s-b{border-left-color:var(--b);background:#e8f2fb}
.cal-chip.s-c{border-left-color:var(--c);background:#fbf1de}
.cal-chip.abs{border-left-color:var(--abs);background:#fbecec;color:#9a3b3b}
.cal-chip.done{opacity:.55}
.cal-chip:hover{filter:brightness(.97);text-decoration:none}

/* ---------- Tag/Woche: Techniker als Zeilen, Tage als Spalten (ohne Querscrollen) ---------- */
.grid-wrap.fit { overflow:auto; }
.weekfit { border-collapse:separate; border-spacing:0; width:100%; table-layout:fixed; background:#fff; }
.weekfit th, .weekfit td { border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.weekfit thead th { position:sticky; top:0; z-index:6; background:#f3f6fa; padding:6px 4px;
  text-align:center; font-size:12px; }
.weekfit thead th.dayhead .wd { font-weight:700; }
.weekfit thead th.dayhead .dt { color:var(--muted); font-size:11px; }
.weekfit thead th.ruhetag { background:#e6eaef; color:#98a2af; }
.weekfit thead th.today { background:#fde9c9; }
.weekfit th.corner { position:sticky; left:0; top:0; z-index:7; background:#f3f6fa; width:150px; }
.weekfit th.techname { position:sticky; left:0; z-index:5; background:#f7f9fb; text-align:left;
  padding:4px 9px; font-size:12.5px; font-weight:600; width:150px; }
.weekfit th.techname a { color:var(--ink); }
.weekfit td.drop { vertical-align:top; padding:2px; position:relative; }
.weekfit td.weekend { background:#eef1f5; }
.weekfit td.today { background:#fffaf0; }
.weekfit td.drop.over { outline:2px dashed var(--brand); outline-offset:-2px; background:#e8f2f8; }
/* Abwesenheit füllt die ganze Zelle (rot); beantragt = schraffiert */
.weekfit td.drop.abs-cell.abs-urlaub, .weekfit td.drop.abs-cell.abs-krank,
.weekfit td.drop.abs-cell.abs-sonst { background:#f2c6c6; box-shadow:inset 0 0 0 2px var(--krank); }
.weekfit td.drop.abs-cell.abs-urlaub.beantragt, .weekfit td.drop.abs-cell.abs-krank.beantragt,
.weekfit td.drop.abs-cell.abs-sonst.beantragt {
  background:repeating-linear-gradient(45deg,#fbdada,#fbdada 9px,#f0b4b4 9px,#f0b4b4 18px); }
.weekfit td.drop.abs-cell.abs-fahrzeug {
  background:repeating-linear-gradient(45deg,#f6ecd6,#f6ecd6 10px,#eeddb4 10px,#eeddb4 20px);
  box-shadow:inset 0 0 0 2px var(--fahrzeug); }
.weekfit td.drop.abs-cell.abs-privat {
  background:repeating-linear-gradient(45deg,#ece6f7,#ece6f7 10px,#ded2f0 10px,#ded2f0 20px);
  box-shadow:inset 0 0 0 2px var(--privat); }
.weekfit td.abs-cell .job.abs { background:transparent; border-left:none; font-style:normal;
  font-weight:800; font-size:12.5px; text-align:center; padding:6px 4px; }
.weekfit td.abs-cell.abs-urlaub .job.abs, .weekfit td.abs-cell.abs-krank .job.abs,
.weekfit td.abs-cell.abs-sonst .job.abs { color:#a12626; }
.weekfit td.abs-cell.abs-fahrzeug .job.abs { color:#8a5a12; }
.weekfit td.abs-cell.abs-privat .job.abs { color:#5b3f8f; }
/* kompakte Kacheln, damit möglichst alle Techniker ohne Scrollen passen */
.weekfit .job { font-size:11.5px; padding:3px 6px; line-height:1.25; }
.weekfit .job .time, .weekfit .job .span, .weekfit .job .hint-badge,
.weekfit .job .hotel-badge, .weekfit .job .crew-badge, .weekfit .job .qty,
.weekfit .job .doc-count, .weekfit .job .tl-badge { font-size:10px; }
.weekfit .cell-add { font-size:15px; padding:2px; }

/* ---------- Tag/Woche als bildschirmfüllendes Raster (alles auf einen Blick) ---------- */
.grid-wrap.fit { overflow:hidden; }         /* kein Scrollen: Zeilen teilen sich die Höhe */
.wgrid { display:grid; height:100%; background:#fff; }
.wgrid .wg-head { position:sticky; top:0; z-index:6; background:#f3f6fa; padding:5px 6px;
  text-align:center; font-size:12px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); }
.wgrid .wg-corner { position:sticky; left:0; z-index:7; text-align:left; font-weight:700; }
.wg-dayhead .wd { font-weight:700; } .wg-dayhead .dt { color:var(--muted); }
.wg-dayhead .fr { color:#aab3bf; font-size:10px; }
.wg-dayhead.ruhetag { background:#e6eaef; color:#98a2af; }
.wg-dayhead.today { background:#fde9c9; }
.wg-tech { position:sticky; left:0; z-index:5; background:#f7f9fb; padding:2px 9px;
  font-size:12px; font-weight:600; display:flex; align-items:center;
  border-right:1px solid var(--line); border-bottom:1px solid var(--line-soft); overflow:hidden; }
.wg-tech a { color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wg-cell { border-right:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft);
  padding:2px; overflow:hidden; position:relative; min-height:0;
  display:flex; flex-direction:column; gap:2px; }
.wg-cell.weekend { background:#eef1f5; }
.wg-cell.today { background:#fffaf0; }
.wg-cell.over { outline:2px dashed var(--brand); outline-offset:-2px; background:#e8f2f8; }
.wg-cell.abs-cell.abs-urlaub, .wg-cell.abs-cell.abs-krank, .wg-cell.abs-cell.abs-sonst {
  background:#f2c6c6; box-shadow:inset 0 0 0 2px var(--krank); }
.wg-cell.abs-cell.abs-urlaub.beantragt, .wg-cell.abs-cell.abs-krank.beantragt,
.wg-cell.abs-cell.abs-sonst.beantragt {
  background:repeating-linear-gradient(45deg,#fbdada,#fbdada 8px,#f0b4b4 8px,#f0b4b4 16px); }
.wg-cell.abs-cell.abs-fahrzeug { background:#f6ecd6; box-shadow:inset 0 0 0 2px var(--fahrzeug); }
.wg-cell.abs-cell.abs-privat { background:#ece6f7; box-shadow:inset 0 0 0 2px var(--privat); }
.wg-cell.abs-cell .job.abs { background:transparent; border-left:none; font-style:normal;
  font-weight:800; font-size:10.5px; text-align:center; padding:1px; color:#a12626; }
.wg-cell.abs-cell.abs-fahrzeug .job.abs { color:#8a5a12; }
.wg-cell.abs-cell.abs-privat .job.abs { color:#5b3f8f; }
/* sehr kompakte Kacheln: nur Kundenname + Farbe; Details per Klick */
.wgrid .job { font-size:10.5px; padding:2px 5px; margin:0; line-height:1.25; border-left-width:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.wgrid .job .loc { font-weight:600; }
.wgrid .job .time, .wgrid .job .span, .wgrid .job .hint-badge, .wgrid .job .crew-badge,
.wgrid .job .qty, .wgrid .job .doc-count, .wgrid .job .tl-badge, .wgrid .job .skill-flag,
.wgrid .job .conflict-flag, .wgrid .job .done-badge, .wgrid .job .cont-note,
.wgrid .job .hotel-badge, .wgrid .job .tile-del, .wgrid .job .tile-done,
.wgrid .job .tile-complete, .wgrid .job .ord { display:none; }
.wgrid .job.done { opacity:.5; }
/* Hotel-Bedarf als kleiner Punkt oben rechts */
.wgrid .job.multiday .loc::before,
.wgrid .job[data-booked]::after { }
.wg-cell .cell-add { position:absolute; right:2px; bottom:0; padding:0 3px; font-size:13px;
  opacity:0; background:transparent; }
.wg-cell:hover .cell-add { opacity:.55; }
.wg-cell .cell-route { display:none; }

/* ---------- Team-Fortschritt (Kachel-Badge) ---------- */
.team-badge { display:inline-block; font-size:10.5px; font-weight:700; padding:1px 6px;
  border-radius:10px; margin-top:2px; }
.team-badge.partial { background:#fde3c0; color:#9a5a12; }
.team-badge.ready   { background:#d9ecff; color:#155a8a; }
.team-badge.done    { background:#dff2e6; color:#1a7a3c; }

/* ---------- Team-Übersicht ---------- */
.teamcard .tc-head { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; }
.tc-prog { display:flex; align-items:center; gap:8px; }
.progbar { width:120px; height:8px; background:#e6ebf2; border-radius:6px; overflow:hidden; }
.progfill { height:100%; background:var(--ok); border-radius:6px; }
.tc-body { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:12px 0; }
@media (max-width:700px){ .tc-body{ grid-template-columns:1fr; } }
.tc-lbl { font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); margin-bottom:5px; }
.tc-tech { font-size:13.5px; padding:2px 0; }
.tc-tech.ok { color:var(--ok); }
.tc-open { color:#b26a00; font-size:12px; }
.tc-pos { font-size:13.5px; padding:2px 0; }
.tc-foot { display:flex; align-items:center; gap:10px; flex-wrap:wrap; border-top:1px solid var(--line-soft); padding-top:10px; }

/* ---------- Überlast >5 Tage + Ausgleich ---------- */
.over-badge { display:inline-block; background:#fbe3c0; color:#9a5a12; border:none;
  cursor:pointer; font-size:11px; font-weight:700; padding:2px 7px; border-radius:8px; margin-top:2px; }
.over-badge:hover { background:#f7d29a; }
.wgrid .over-badge { display:none; }   /* im dichten Raster ausblenden (Detail per Klick) */
.ausgleich-hint { background:#fdf3e3; border-left:4px solid var(--c); padding:10px 12px;
  border-radius:8px; margin-bottom:12px; font-size:13.5px; }

/* ---------- Gearbeitete Tage bestätigen (Techniker-Portal) ---------- */
.wd-einsatz { padding:8px 0; border-top:1px solid var(--line-soft); }
.wd-einsatz:first-of-type { border-top:none; }
.wd-title { margin-bottom:6px; }
.wd-days { display:flex; flex-wrap:wrap; gap:8px; }
.wd-day { cursor:pointer; border:1px solid var(--line); background:#eef7f0; color:var(--ink);
  border-left:4px solid var(--ok); border-radius:9px; padding:6px 11px; font-size:13px;
  text-align:left; transition:filter .1s; }
.wd-day .wd-lbl { display:block; font-weight:600; }
.wd-day .wd-state { display:block; font-size:11px; color:var(--ok); }
.wd-day.off { background:#fbecec; border-left-color:var(--abs); }
.wd-day.off .wd-state { color:#b0392b; }
.wd-day.frei { opacity:.65; }
.wd-day:hover { filter:brightness(.97); }
.wd-day:disabled { opacity:.5; cursor:default; }
/* volle Kachel „nicht gearbeitet" im Plan */
.job.nichtgearbeitet { background:#fbecec !important; }
.job.nichtgearbeitet .loc { text-decoration:line-through; }
.nw-badge { display:inline-block; background:#f2c6c6; color:#a12626; font-weight:700;
  font-size:10.5px; padding:1px 6px; border-radius:8px; margin-top:2px; }
.wgrid .nw-badge { display:none; }

/* ---------- Team direkt im Einsatz verknüpfen ---------- */
.team-badge { border:none; cursor:pointer; }
.team-link { margin:14px 0 4px; padding:12px 14px; border:1px solid var(--line);
  border-radius:var(--radius); background:#f7fafd; }
.team-link.is-team { background:#f0f7f2; border-color:#cbe5d5; }
.tl-title { font-weight:700; margin-bottom:8px; }
.tl-list { margin:0 0 8px; padding-left:2px; list-style:none; display:flex; flex-direction:column; gap:3px; }
.tl-list li { font-size:13.5px; }
.tl-row { display:flex; align-items:center; gap:8px; padding:4px 0; font-size:13.5px; cursor:pointer; }
.tl-row.checked-fix { color:var(--muted); }

/* ---------- Hotelbuchungen (Büro/Bucher) als Karten ---------- */
.hb-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:12px; margin:8px 0 22px; }
.hbcard { background:var(--panel); border:1px solid var(--line); border-left:4px solid var(--muted);
  border-radius:var(--radius); box-shadow:var(--shadow); padding:12px 14px;
  display:flex; flex-direction:column; gap:5px; }
.hbcard.storno { border-left-color:var(--abs); background:#fdf2f2; }
.hbcard.tobook { border-left-color:var(--c); }
.hbcard.klaeren { border-left-color:#c9a24a; opacity:.92; }
.hbcard.booked { border-left-color:var(--ok); background:#f5faf6; }
.hb-top { display:flex; justify-content:space-between; align-items:baseline; gap:8px; }
.hb-date { font-weight:700; }
.hb-tech { color:var(--muted); font-size:13px; white-space:nowrap; }
.hb-cust b { font-size:15px; }
.hb-addr { font-size:12.5px; color:var(--muted); }
.hb-addr.warn { color:#b0392b; }
.hb-note { font-size:13px; color:#b0392b; }
.hb-hotel { font-size:13.5px; color:#1a7a3c; font-weight:600; }
.hb-book { display:flex; gap:8px; margin-top:4px; }
.hb-book select { flex:1; min-width:0; }
.hb-stamm summary { cursor:pointer; padding:8px 0; font-size:15px; }

/* ---------- Einsatz-Formular: gegliederte Blöcke ---------- */
.einsatz-form .einsatz-body { display:block; }
.einsatz-form .fsec { border:1px solid var(--line); border-radius:12px;
  padding:12px 14px; margin-bottom:12px; background:#fbfcfe; }
.einsatz-form .fsec-h { font-weight:700; font-size:12.5px; color:var(--brand-d);
  margin:0 0 10px; display:flex; align-items:center; gap:7px;
  text-transform:uppercase; letter-spacing:.4px; }
.einsatz-form .fsec .form-grid { gap:12px; margin:0; }
.einsatz-form .fsec .field { margin:0; }
.einsatz-form .fsec-h .pflicht { text-transform:none; letter-spacing:0; }
.einsatz-form details.more { margin-bottom:12px; background:#fbfcfe; }

/* Hotel-Empfehlungen aus Feedback */
.hb-recos { font-size:12px; margin-top:2px; line-height:1.35; }
.hb-recos .rec-gut { color:#1a7a3c; }
.hb-recos .rec-bad { color:#b0392b; }
.hb-actions { margin-top:8px; }

.uebn-reco { font-size:12px; margin:4px 0; }
.uebn-reco .rec-gut { color:#1a7a3c; }
.uebn-reco .rec-bad { color:#b0392b; }

.hb-actions { display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }

.hb-recos-empty { color:#9aa3ad; }

.rec-komm { color:#667; font-style:italic; font-size:12px; margin:1px 0 4px 16px; }
.hb-recos .rec-gut, .hb-recos .rec-bad { margin-bottom:3px; }

.rk-meta { color:#99a1ab; font-style:normal; }

/* ---- Auto-Dispo: Techniker-Vorschlag (Fähigkeit · frei · Nähe · Auslastung) ---- */
.dispo-panel { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-soft); padding: 8px; }
.dispo-head { font-size: 12.5px; color: var(--muted); margin: 2px 4px 8px; }
.dispo-empty { font-size: 13px; color: var(--muted); padding: 8px 6px; }
.dispo-list { display: flex; flex-direction: column; gap: 6px; }
.dispo-row { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  cursor: pointer; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); padding: 8px 10px; font: inherit; color: var(--ink);
  transition: border-color .12s, box-shadow .12s; }
.dispo-row:hover { border-color: var(--brand); box-shadow: var(--shadow); }
.dispo-row.is-best { border-color: var(--ok); background: #f2fbf6; }
.dispo-row.is-cur { outline: 2px solid var(--brand); outline-offset: -1px; }
.dr-rank { flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--brand);
  color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center;
  justify-content: center; }
.dr-name { font-weight: 600; flex: none; min-width: 130px; }
.dr-star { color: var(--ok); font-weight: 600; font-size: 11px; margin-left: 4px; }
.dr-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-left: auto; justify-content: flex-end; }
.db { font-size: 11px; padding: 1px 8px; border-radius: 20px; white-space: nowrap; line-height: 1.6; }
.db-ok   { background: #e6f5ec; color: #1d7a44; }
.db-warn { background: #fdf1dc; color: #96631a; }
.db-bad  { background: #fdecec; color: #a12626; }
.db-near { background: var(--brand-tint); color: var(--brand-d); }
.db-muted { background: #eef1f5; color: var(--muted); }
@media (max-width: 640px) {
  .dispo-row { flex-wrap: wrap; }
  .dr-badges { margin-left: 30px; justify-content: flex-start; }
}

/* ---- Kalkulation (Wirtschaftlichkeit im Einsatz) ---- */
.kalk-panel { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-soft); padding: 10px 12px; }
.kk-list { display: flex; flex-direction: column; }
.kk-row { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  padding: 6px 0; border-bottom: 1px solid var(--line-soft); }
.kk-row:last-child { border-bottom: none; }
.kk-l { display: flex; flex-direction: column; }
.kk-l small { color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.kk-b { font-variant-numeric: tabular-nums; white-space: nowrap; font-weight: 600; }
.kk-sum { border-top: 2px solid var(--line); margin-top: 2px; }
.kk-sum .kk-l { font-weight: 700; }
.kk-marge { display: flex; justify-content: space-between; align-items: center; gap: 12px;
  margin-top: 10px; padding: 9px 12px; border-radius: var(--radius-sm); font-size: 14px; }
.kk-marge b { font-variant-numeric: tabular-nums; }
.kk-gruen { background: #e6f5ec; color: #1d7a44; }
.kk-gelb  { background: #fdf1dc; color: #96631a; }
.kk-rot   { background: #fdecec; color: #a12626; }

/* ---- Aufträge (Lexware-Abgleich) ---- */
.okmsg { border-left: 4px solid var(--ok); background: #f2fbf6; padding: 12px 16px; margin-bottom: 14px; }
.warnmsg { border-left: 4px solid var(--c); background: #fdf1dc; padding: 12px 16px; margin-bottom: 14px; }
.auftrag-einlesen .field { margin-bottom: 12px; }
.auftrag-einlesen input[type=file] { display: block; margin-top: 4px; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.tablewrap { overflow-x: auto; }
.row-actions { display: flex; gap: 6px; align-items: center; white-space: nowrap; }
.row-actions form { margin: 0; }

/* ---- Aufgaben-Kürzel (aufgeteilte Lieferschein-Tätigkeiten) ---- */
.pill.aufgabe { background: var(--brand-tint); color: var(--brand-d); margin: 0 3px 3px 0;
  display: inline-block; font-size: 11.5px; }
.pill.aufgabe b { font-variant-numeric: tabular-nums; }

/* ---- Anschluss & Übernachtung ---- */
.anschluss-panel { margin-top: 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg-soft); padding: 8px 10px; }
.an-titel { font-size: 12px; font-weight: 700; color: var(--muted); text-transform: uppercase;
  letter-spacing: .04em; margin: 10px 0 4px; }
.an-titel:first-of-type { margin-top: 4px; }
.an-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 7px 10px; margin-bottom: 5px; }
.an-txt { display: flex; flex-direction: column; }
.an-txt small { margin-top: 1px; }
.an-rechts { display: flex; flex-direction: column; align-items: flex-end; white-space: nowrap; }
.an-ok { color: #1d7a44; font-weight: 600; font-size: 12.5px; }
.an-spar { color: var(--brand-d); font-weight: 700; font-size: 12.5px; }
@media (max-width: 640px) {
  .an-row { flex-direction: column; }
  .an-rechts { align-items: flex-start; }
}