/* KoKo · Koster AG Kompass – Hübi und Schmidii
   Farben angelehnt an referenzen.holzwelten.ch
*/

:root {
  --navy: #2c3e50;
  --navy-dark: #1f2c3a;
  --orange: #e67e22;
  --orange-light: #fff3e0;
  --orange-dark: #c46615;
  --green: #27ae60;
  --green-light: #d8f0e3;
  --red: #c0392b;
  --red-light: #fbe9e7;
  --gray-100: #f8f8f5;
  --gray-200: #f0f0ec;
  --gray-300: #ddd;
  --gray-400: #ccc;
  --gray-500: #999;
  --gray-600: #888;
  --gray-700: #555;
  --bg: #f5f5f0;
  --white: #ffffff;
  --text: #2c3e50;
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.06);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1 0 auto; }

a { color: var(--orange); text-decoration: none; }
a:hover { text-decoration: underline; }

button {
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  border: none;
}

/* ========================== HEADER ========================== */
.topbar {
  background: #3d5a80;
  color: var(--white);
  padding: 10px 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  /* PWA mit window-controls-overlay: Header darf nicht unter Fenster-Buttons rechts liegen */
  padding-right: max(24px, env(titlebar-area-x, 0px) + env(titlebar-area-width, 0px) - 100%);
  /* Der ganze Header ist ziehbar (Fenster verschieben), aber Links/Buttons müssen no-drag sein */
  -webkit-app-region: drag;
  app-region: drag;
}
/* Interaktive Elemente im Header müssen no-drag sein, sonst kann man sie nicht klicken */
.topbar a, .topbar button, .topbar select, .topbar input, .topbar .user-avatar {
  -webkit-app-region: no-drag;
  app-region: no-drag;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 15px;
  color: var(--white);
  text-decoration: none;
  flex: 0 0 auto;
}
.logo:hover { opacity: .85; }

.logo-icon {
  width: 32px;
  height: 32px;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 2px;
}
.logo-icon span {
  border-radius: 3px;
  display: block;
}
.logo-icon span:nth-child(1) { background: #e74c3c; }
.logo-icon span:nth-child(2) { background: #f1c40f; }
.logo-icon span:nth-child(3) { background: #3498db; }
.logo-icon span:nth-child(4) { background: var(--green); }

/* Wortmarke in der Kopfleiste. Etwas hoeher als das alte Wuerfel-Logo, weil
 * sie den Produktnamen mittraegt — daneben steht kein Text mehr. */
.logo-img {
  height: 26px;
  width: auto;
  display: block;
}

/* Release-Notes-Liste + Popup
 * Kompakt gehalten: die Liste wird schnell lang, deshalb enge Abstände und
 * eine durchgehende Zeitleiste statt einzelner "Karten" mit viel Luft.
 * WICHTIG: .release-inhalt hat white-space:pre-wrap — im PHP daher KEIN
 * nl2br() verwenden, sonst wird jeder Umbruch doppelt gerendert. */
.release-list {
  display: flex; flex-direction: column;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  overflow: hidden;
}
.release-item {
  border-left: 3px solid #3d5a80;
  padding: 9px 14px;
}
.release-item + .release-item { border-top: 1px solid var(--gray-200, #e8ebee); }
.release-item:nth-child(even) { background: #fafbfc; }
.release-head {
  display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap;
  margin-bottom: 2px;
}
.release-version {
  display: inline-block;
  background: #3d5a80; color: #fff;
  padding: 1px 8px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .3px;
  white-space: nowrap;
}
.release-titel { margin: 0; font-size: 14px; line-height: 1.3; color: var(--navy); }
.release-meta { font-size: 11px; color: var(--gray-600); margin-left: auto; white-space: nowrap; }
.release-inhalt {
  font-size: 13px; line-height: 1.45; color: var(--gray-800);
  white-space: pre-wrap;
  margin: 0;
}
/* Leerzeilen im Text nicht als volle Zeilenhöhe durchschlagen lassen */
.release-inhalt:empty { display: none; }

/* Admin-Werkzeuge pro Eintrag: unauffällig, bis man hovert */
.release-item .release-admin { margin-top: 4px; opacity: .55; transition: opacity .12s; }
.release-item:hover .release-admin { opacity: 1; }
.release-item .release-admin summary { font-size: 12px; }
.release-item .release-admin .btn { font-size: 12px; padding: 2px 6px; }

.release-popup-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000; padding: 20px;
}
.release-popup-overlay[hidden] { display: none; }
.release-popup-inner {
  background: var(--white); border-radius: 10px;
  max-width: 560px; width: 100%;
  padding: 24px 28px; box-shadow: 0 8px 30px rgba(0,0,0,.35);
  animation: releaseIn .18s ease-out;
}
@keyframes releaseIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.release-popup-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.release-popup-head h3 { margin: 0; font-size: 18px; color: var(--navy); }
.release-popup-meta {
  font-size: 12px; color: var(--gray-600); margin: 8px 0 12px;
}
.release-popup-inhalt {
  font-size: 14px; color: var(--gray-800); white-space: pre-wrap;
  max-height: 40vh; overflow-y: auto;
  background: var(--gray-100); padding: 10px 14px; border-radius: 6px;
}
.release-popup-actions {
  display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px;
}
.btn-danger-link { color: var(--red); }
.btn-danger-link:hover { text-decoration: underline; }

/* Version-Button im Footer: sieht aus wie Text, aber klickbar */
.version-btn {
  background: none; border: none; padding: 0;
  color: inherit; font: inherit; cursor: pointer;
  text-decoration: none;
}
.version-btn:hover { text-decoration: underline; }

.nav {
  display: flex;
  gap: 4px;
  margin-left: 16px;
  flex: 1;
}
.nav a {
  color: rgba(255,255,255,0.85);
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
}
.nav a:hover { background: rgba(255,255,255,0.08); color: var(--white); text-decoration: none; }
.nav a.active { background: var(--navy-dark); color: var(--white); }

.user-menu {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 13px;
  color: rgba(255,255,255,0.85);
}
.user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 13px;
}

/* ========================== LAYOUT ========================== */
.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 24px;
}
.container-wide {
  max-width: 100%;
  padding: 24px;
}
.page-title {
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--navy);
}
.page-subtitle {
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 20px;
}

/* ========================== STATS CARDS ========================== */
.stats {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.stat-card {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  padding: 14px 20px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 140px;
  box-shadow: var(--shadow-sm);
}
.stat-card.highlight {
  background: var(--orange-light);
  border-color: var(--orange);
}
.stat-card .num {
  font-size: 26px;
  font-weight: 700;
  color: var(--navy);
}
.stat-card.highlight .num { color: var(--orange); }
.stat-card .label {
  font-size: 13px;
  color: var(--gray-600);
}

/* ========================== CARD GRID ========================== */
.section-title {
  font-size: 15px;
  font-weight: 600;
  margin: 24px 0 12px;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 8px;
}
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.module-card {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  padding: 16px;
  text-decoration: none;
  color: var(--text);
  display: block;
  transition: all 0.15s;
  box-shadow: var(--shadow-sm);
}
.module-card:hover {
  border-color: var(--orange);
  box-shadow: var(--shadow-md);
  text-decoration: none;
}
.module-card .icon {
  font-size: 24px;
  margin-bottom: 8px;
  display: block;
}
.module-card .title {
  font-weight: 600;
  font-size: 14px;
  margin-bottom: 4px;
  color: var(--navy);
}
.module-card .desc {
  font-size: 12px;
  color: var(--gray-600);
}

/* ========================== SEARCH BAR ========================== */
.search-bar {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
  align-items: center;
  flex-wrap: wrap;
}
.search-bar input[type="text"], .search-bar input[type="search"], .search-bar select {
  padding: 8px 14px;
  border: 1px solid var(--gray-300);
  border-radius: 20px;
  font-size: 13px;
  background: var(--white);
  font-family: inherit;
  color: var(--text);
  min-width: 200px;
}
.search-bar input:focus, .search-bar select:focus {
  outline: none;
  border-color: var(--orange);
}
.search-bar .filter {
  min-width: 140px;
}

/* ========================== BUTTONS ========================== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
}
.btn-primary { background: var(--orange); color: var(--white); }
.btn-primary:hover { background: var(--orange-dark); text-decoration: none; }
.btn-outline { background: var(--white); color: var(--navy); border-color: var(--gray-300); }
.btn-outline:hover { border-color: var(--orange); color: var(--orange); text-decoration: none; }
.btn-ghost { background: transparent; color: var(--gray-700); }
.btn-ghost:hover { background: var(--gray-200); }

/* ========================== TABLE ========================== */
.table-wrap {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.data-table th {
  background: var(--gray-100);
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border-bottom: 2px solid var(--gray-300);
  color: var(--navy);
  white-space: nowrap;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.data-table th .sort {
  color: var(--gray-500);
  font-size: 10px;
  margin-left: 4px;
}
.data-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--gray-200);
  vertical-align: middle;
}
.data-table tbody tr:hover { background: var(--gray-100); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table .col-num {
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--gray-700);
}
.data-table a { font-weight: 500; }

/* status pills */
.pill {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.pill-green { background: var(--green-light); color: var(--green); }
.pill-orange { background: var(--orange-light); color: var(--orange-dark); }
.pill-red { background: var(--red-light); color: var(--red); }
.pill-gray { background: var(--gray-200); color: var(--gray-700); }

/* status step indicator */
.step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
}
.step-todo   { background: var(--gray-200); color: var(--gray-500); }
.step-doing  { background: var(--orange-light); color: var(--orange-dark); border: 1px solid var(--orange); }
.step-done   { background: var(--green-light); color: var(--green); }
.step-block  { background: var(--red-light); color: var(--red); }

/* PL-Kürzel badge */
.pl-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  background: var(--navy);
  color: var(--white);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

/* ========================== TAGESPLANUNG GRID ========================== */
.plan-wrap {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  overflow: auto;
  box-shadow: var(--shadow-sm);
}
.plan-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  min-width: 1400px;
}
.plan-grid th, .plan-grid td {
  border: 1px solid var(--gray-200);
  padding: 0;
  vertical-align: top;
}
.plan-grid thead th {
  background: var(--navy);
  color: var(--white);
  font-weight: 600;
  font-size: 12px;
  padding: 8px 6px;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 5;
}
.plan-grid thead th.col-day { background: var(--navy-dark); width: 90px; min-width: 90px; }
.plan-grid tbody td.col-day {
  background: var(--gray-100);
  font-weight: 600;
  text-align: center;
  padding: 6px;
  vertical-align: middle;
  position: sticky;
  left: 0;
  z-index: 4;
  font-size: 11px;
}
.plan-grid .day-name { font-size: 13px; color: var(--navy); }
.plan-grid .day-date { font-size: 11px; color: var(--gray-600); margin-top: 2px; }

.cell-half {
  height: 60px;
  padding: 4px 6px;
  font-size: 11px;
  position: relative;
}
.cell-half.am { border-bottom: 1px dashed var(--gray-300); }
.cell-block {
  background: var(--orange-light);
  border-left: 3px solid var(--orange);
  padding: 4px 6px;
  border-radius: 3px;
  height: 100%;
  cursor: grab;
  font-size: 11px;
  line-height: 1.3;
}
.cell-block.green { background: var(--green-light); border-color: var(--green); }
.cell-block.blue  { background: #e6f3fa; border-color: #3498db; }
.cell-block.purple { background: #f0e6f7; border-color: #9b59b6; }
.cell-block.gray   { background: var(--gray-200); border-color: var(--gray-500); color: var(--gray-700); font-style: italic; }
.cell-block.absence { background: var(--gray-200); border-color: var(--red); color: var(--red); font-weight: 600; text-align: center; }
.cell-block strong { color: var(--navy); display: block; font-weight: 600; }
.cell-block.gray strong { color: var(--gray-700); }

/* CNC list */
.cnc-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.cnc-col {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.cnc-col-head {
  background: var(--navy);
  color: var(--white);
  padding: 12px 16px;
  font-weight: 600;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cnc-col-head .sub { font-size: 12px; opacity: 0.8; font-weight: 400; }

/* ========================== ERFASSUNGSMASKE ========================== */
.form-card {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.form-card h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--orange);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Aufklappbare Form-Karten (Karten 4–7) — standardmässig zugeklappt */
details.form-card > summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
}
details.form-card > summary::-webkit-details-marker { display: none; }
details.form-card > summary h3 {
  margin-bottom: 0;
  flex: 1;
}
details.form-card > summary::before {
  content: '▸';
  color: var(--gray-500);
  font-size: 12px;
  transition: transform 0.15s ease;
  flex-shrink: 0;
}
details.form-card[open] > summary { margin-bottom: 16px; }
details.form-card[open] > summary::before { transform: rotate(90deg); }

/* Aufklappbare Positions-Blöcke im Erfassungs-/Bearbeiten-Formular */
.position-block {
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  margin-bottom: 14px;
  background: var(--white);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.position-block:target { box-shadow: 0 0 0 2px var(--orange); }
.position-block-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  cursor: pointer;
  background: var(--gray-100);
  font-weight: 600;
  color: var(--navy);
  list-style: none;
}
.position-block-head::-webkit-details-marker { display: none; }
.position-block-toggle {
  color: var(--gray-500);
  font-size: 12px;
  transition: transform .15s ease;
}
.position-block[open] > .position-block-head .position-block-toggle { transform: rotate(90deg); }
.position-block-bez { font-weight: 400; color: var(--gray-600); }
.position-block .form-card {
  border: none;
  border-radius: 0;
  margin: 0;
  box-shadow: none;
}
.position-block .form-card + .form-card { border-top: 1px solid var(--gray-200); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 12px; }
.form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
/* Vier Felder in einer Zeile — fuer Positions-Nr. · Bezeichnung · Gruppe · Fertigstellung.
   Ohne diese Regel landete das vierte Feld in einer eigenen Zeile unter dem ersten. */
.form-row.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.form-row.cols-1 { grid-template-columns: 1fr; }
.form-field label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.form-field input[type="text"], .form-field input[type="date"], .form-field select, .form-field textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--orange);
}
.form-field textarea { min-height: 80px; resize: vertical; }
.form-field .hint { font-size: 11px; color: var(--gray-500); margin-top: 4px; }
.checkbox-row { display: flex; flex-wrap: wrap; gap: 12px; }
.checkbox-row label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  text-transform: none;
  letter-spacing: normal;
  background: var(--gray-100);
  padding: 6px 12px;
  border-radius: 16px;
  cursor: pointer;
}
.chip-group { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  display: inline-block;
  padding: 4px 12px;
  background: var(--orange-light);
  color: var(--orange-dark);
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
}
.chip:hover { background: var(--orange); color: var(--white); }
.chip.selected { background: var(--orange); color: var(--white); }

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 0;
}

/* ========================== MOBILE ========================== */
.mobile-frame {
  width: 380px;
  margin: 24px auto;
  background: #1a1a1a;
  border-radius: 32px;
  padding: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.mobile-screen {
  background: var(--bg);
  border-radius: 22px;
  overflow: hidden;
  height: 720px;
  display: flex;
  flex-direction: column;
}
.mobile-header {
  background: var(--navy);
  color: var(--white);
  padding: 14px 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.mobile-header h1 { font-size: 16px; font-weight: 600; }
.mobile-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.mobile-day-section { margin-bottom: 20px; }
.mobile-day-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--gray-600);
  margin-bottom: 8px;
}
.mobile-job-card {
  background: var(--white);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
  border-left: 4px solid var(--orange);
}
.mobile-job-card.green { border-left-color: var(--green); }
.mobile-job-card.gray  { border-left-color: var(--gray-500); }
.mobile-job-card .ref { font-family: ui-monospace, monospace; font-size: 11px; color: var(--gray-600); }
.mobile-job-card h3 { font-size: 14px; font-weight: 600; margin: 4px 0; color: var(--navy); }
.mobile-job-card .addr { font-size: 12px; color: var(--gray-700); margin-bottom: 8px; }
.mobile-job-card .task { font-size: 13px; color: var(--text); }
.mobile-job-card .meta {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.mobile-job-card .meta-pill {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: var(--gray-100);
  color: var(--gray-700);
}
.mobile-team {
  background: var(--white);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
  box-shadow: var(--shadow-sm);
}
.mobile-team h4 { font-size: 12px; font-weight: 600; margin-bottom: 8px; color: var(--gray-700); }
.team-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-bottom: 1px solid var(--gray-200);
  font-size: 13px;
}
.team-link:last-child { border-bottom: none; }
.team-link .phone { color: var(--orange); font-weight: 500; }

/* Auf echten Handys (≤ 600 px viewport) den Handy-Simulator-Rahmen abwerfen:
   Full-width, kein dunkler Frame, kein Border-Radius, keine feste Höhe. */
@media (max-width: 600px) {
  .mobile-frame {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
  }
  .mobile-screen {
    border-radius: 0;
    height: auto;
    min-height: 100vh;
  }
  .mobile-header {
    padding: 12px 16px;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
  .mobile-content {
    padding: 14px;
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    padding-bottom: max(14px, env(safe-area-inset-bottom));
  }
  .mobile-header h1 { font-size: 18px; }
  .mobile-day-title { font-size: 12px; }
  .mobile-job-card h3 { font-size: 15px; }
  .mobile-job-card .task { font-size: 14px; }
}

/* ========================== KIOSK / AUSHANG ========================== */
.kiosk-banner {
  background: var(--green-light);
  border: 1px solid var(--green);
  color: var(--green);
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}
.kiosk-banner .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ========================== INFO BANNER ========================== */
.info-banner {
  background: #fff8e1;
  border-left: 4px solid var(--orange);
  padding: 12px 16px;
  border-radius: 4px;
  font-size: 13px;
  color: var(--gray-700);
  margin-bottom: 16px;
}
.info-banner strong { color: var(--navy); }

/* ========================== UTILS ========================== */
.flex { display: flex; }
.flex-between { display: flex; justify-content: space-between; align-items: center; }
.gap-8 { gap: 8px; }
.mt-8 { margin-top: 8px; }
.text-muted { color: var(--gray-600); }
.text-mono { font-family: ui-monospace, monospace; }
.nowrap { white-space: nowrap; }

/* ===== Mitarbeiter-Rollen-Farben (Tagesplanung Header) ===== */
.role-buero       { background: #e0e0e0 !important; color: #333 !important; }   /* Büro / Avor / Endmontage */
.role-cnc         { background: #b2dfdb !important; color: #00695c !important; }/* CNC-Bereich Türkis */
.role-bank        { background: #c8e6c9 !important; color: #1b5e20 !important; }/* Bank / Maschinieren Grün */
.role-oberflaeche { background: #ffe0b2 !important; color: #e65100 !important; }/* Oberfläche Orange */
.role-lernende    { background: #fff59d !important; color: #6d4c00 !important; }/* Lernende Gelb */
.plan-grid thead th[class^="role-"], .plan-grid thead th[class*=" role-"] { font-weight: 600; }
.role-tag {
  display: inline-block;
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 2px;
  margin-top: 2px;
  font-weight: 500;
  letter-spacing: 0.3px;
  background: rgba(0,0,0,0.08);
}
.col-drag-handle {
  font-size: 10px;
  opacity: 0.5;
  cursor: grab;
  user-select: none;
}

/* ===== Versions-Badge im Header (neben Logo) ===== */
.version-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.1);
  color: var(--orange);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-decoration: none;
}
.version-badge:hover { background: rgba(230,126,34,0.2); text-decoration: none; }

/* ===== Footer (dark, sticky to bottom) ===== */
.app-footer {
  flex-shrink: 0;
  margin-top: 48px;
  padding: 14px 24px;
  background: var(--navy);
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.app-footer a { color: rgba(255,255,255,0.85); text-decoration: none; }
.app-footer a:hover { color: var(--orange); text-decoration: none; }
.app-footer .footer-left { font-weight: 500; }
.app-footer .footer-right { font-weight: 500; }
.app-footer .footer-right .version { color: var(--orange); font-weight: 700; margin-left: 4px; }

/* Tablet & kleiner: Footer fest am unteren Bildschirmrand kleben,
   damit er nicht mehr scheinbar "in der Luft" hängt, wenn wenig Content da ist. */
@media (max-width: 1024px) {
  .app-footer {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    margin-top: 0;
    padding-top: 10px;
    padding-bottom: 10px;
    z-index: 90;
    box-shadow: 0 -2px 6px rgba(0,0,0,0.15);
  }
  /* Platz freihalten, damit der letzte Content nicht unter dem Footer verschwindet */
  body { padding-bottom: 60px; }
}

/* ===== Versionshistorie ===== */
.version-list { max-width: 800px; }
.version-entry {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  padding: 16px 20px;
  margin-bottom: 12px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: var(--shadow-sm);
}
.version-entry .version-tag {
  font-weight: 700;
  color: var(--orange);
  font-size: 16px;
  white-space: nowrap;
  min-width: 60px;
}
.version-entry .version-date {
  color: var(--gray-600);
  font-size: 13px;
  white-space: nowrap;
  min-width: 90px;
}
.version-entry .version-text { flex: 1; font-size: 13px; line-height: 1.5; color: var(--text); }
.version-entry .version-text div { margin-bottom: 2px; }
.version-entry .version-actions { display: flex; gap: 6px; }
.btn-danger { background: #e74c3c; color: var(--white); }
.btn-danger:hover { background: #c0392b; text-decoration: none; }

/* ===== Mobile Nachrichten ===== */
.mobile-notify {
  background: #fff8e1;
  border-left: 4px solid var(--orange);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  font-size: 13px;
}
.mobile-notify .notify-from {
  font-size: 11px;
  font-weight: 600;
  color: var(--orange-dark);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.mobile-notify .notify-time {
  font-size: 10px;
  color: var(--gray-600);
  float: right;
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
}

/* ===== Erfassen: Hauptgruppen-Auswahl-First ===== */
.bigchoice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
.bigchoice {
  background: var(--white);
  border: 2px solid var(--gray-300);
  border-radius: 8px;
  padding: 18px 16px;
  cursor: pointer;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
}
.bigchoice:hover { border-color: var(--orange); }
.bigchoice.selected {
  border-color: var(--orange);
  background: var(--orange-light);
  color: var(--orange-dark);
}
.bigchoice .icon { font-size: 22px; display: block; margin-bottom: 6px; }


/* ===== Star-Badge in Mobile-Cards ===== */
.star-badge {
  display: inline-block;
  cursor: pointer;
  font-size: 14px;
  margin-left: 6px;
  vertical-align: middle;
  filter: drop-shadow(0 0 1px rgba(0,0,0,0.2));
}
.mobile-job-card .star-message {
  margin-top: 8px;
  background: #fff8e1;
  border-left: 3px solid var(--orange);
  padding: 8px 10px;
  border-radius: 4px;
  font-size: 12px;
  color: var(--gray-700);
}
.mobile-job-card .star-message .from {
  font-weight: 600;
  color: var(--orange-dark);
  font-size: 11px;
  margin-bottom: 2px;
}

/* ===== Collapsible details (Baustellen-Legende) ===== */
details.collapsible {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  margin-top: 16px;
  box-shadow: var(--shadow-sm);
}
details.collapsible > summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 18px;
  font-weight: 600;
  color: var(--navy);
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
details.collapsible > summary::-webkit-details-marker { display: none; }
details.collapsible > summary::before {
  content: "▶";
  font-size: 10px;
  color: var(--orange);
  transition: transform 0.15s;
}
details.collapsible[open] > summary::before { transform: rotate(90deg); }
details.collapsible > div { padding: 4px 18px 18px; }

/* ===== Login-Seite (standalone) ===== */
body.standalone {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: var(--navy);
}
.login-wrap { width: 100%; max-width: 380px; padding: 24px; }
.login-card {
  background: var(--white);
  border-radius: 12px;
  padding: 36px 32px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.2);
}
.login-logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.login-logo h1 { font-size: 22px; font-weight: 700; color: var(--navy); }
/* Volle Sperrschrift auf der Anmeldekarte. max-width statt fester Breite,
   damit sie auf dem Handy nicht ueber den Kartenrand laeuft. */
.login-logo-img { width: 100%; max-width: 260px; height: auto; display: block; }
.login-sub {
  font-size: 13px; color: var(--gray-600); margin-bottom: 24px;
}
.login-error {
  background: var(--red-light); color: var(--red);
  padding: 10px 14px; border-radius: 6px; margin-bottom: 16px;
  font-size: 13px;
}
.login-card .form-field { margin-bottom: 16px; }
.login-card .form-field input {
  width: 100%; padding: 10px 12px;
  border: 1px solid var(--gray-300); border-radius: 6px;
  font-size: 14px; font-family: inherit;
}
.login-card .form-field input:focus {
  outline: none; border-color: var(--orange);
}

/* ====================================================================
   Auftrags-Modul (Session B)
   ==================================================================== */

.page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.page-header-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.alert {
  padding: 12px 16px;
  border-radius: 6px;
  margin-bottom: 16px;
  border-left: 4px solid;
}
.alert-success { background: var(--green-light); border-color: var(--green); color: #1e6e3f; }
.alert-error   { background: var(--red-light);   border-color: var(--red);   color: #8a2520; }

.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  background: var(--white);
  padding: 12px 16px;
  border-radius: 8px;
  border: 1px solid var(--gray-300);
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.filter-input, .filter-select {
  padding: 8px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 14px;
  background: var(--white);
}
.filter-input { flex: 1 1 240px; min-width: 200px; max-width: 480px; }

/* KW+Wochentag-Hinweis rechts neben Datumsfeldern im Auftrags-Formular */
.kw-hint {
  display: block;
  font-size: 11px;
  color: var(--gray-600, #6a6a6a);
  margin-top: 3px;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.2px;
}
.kw-hint-inline {
  display: inline-block;
  margin-left: 8px;
  margin-top: 0;
  vertical-align: middle;
  padding: 2px 8px;
  background: var(--gray-100, #f2f2ef);
  border-radius: 4px;
  color: var(--navy, #2c3e50);
  font-weight: 600;
  min-width: 60px;
  text-align: center;
}
.kw-hint-inline:empty { visibility: hidden; }

/* 🚚 in der Aufträge-Liste. Zeigt die BERECHNETE Werkstatt-Bereitschaft
 * (alle aktivierten Stationen erledigt). Ein Klick setzt nur die Ausnahme —
 * früher melden oder trotz ✓ zurückhalten; .is-uebersteuert markiert das. */
.montage-toggle-btn {
  filter: grayscale(1);
  opacity: 0.4;
  transition: filter .15s, opacity .15s, transform .1s;
  cursor: pointer;
}
.montage-toggle-btn:hover { opacity: 0.7; transform: scale(1.1); }
.montage-toggle-btn.is-freigegeben {
  filter: none;
  opacity: 1;
  background: #eaf7ee;
  border-radius: 4px;
}
.montage-toggle-btn.is-freigegeben:hover { background: #d5efdb; }

/* Von Hand übersteuert statt berechnet — kleine Ecke oben rechts als Hinweis,
 * dass hier jemand bewusst von der Automatik abgewichen ist. */
.montage-toggle-btn.is-uebersteuert {
  position: relative;
  outline: 1px dashed var(--orange, #e67e22);
  outline-offset: 1px;
  border-radius: 4px;
}

/* .is-ready gibt es nicht mehr: der Knopf leuchtet jetzt von selbst grün,
 * sobald alle Stationen erledigt sind — es gibt nichts mehr zu erinnern.
 * Keyframes bleiben, falls andere Stellen sie noch nutzen. */
@keyframes montage-ready-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(230, 126, 34, 0); }
}

/* Grundiert-Toggle in Oberflaechen-Liste (kein Modal, ein Klick) */
/* Grundiert-Toggle — Text-Pill (Aus: grau "· grundieren" / An: grün "✓ grundiert") */
.grundiert-toggle-btn {
  display: inline-block;
  background: #f0f1f2;
  color: #6c757d;
  border: 1px solid #d8dade;
  cursor: pointer;
  font-size: 10.5px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 999px;
  white-space: nowrap;
  transition: background .12s, color .12s, border-color .12s, transform .1s;
  font-family: inherit;
  letter-spacing: 0.1px;
}
.grundiert-toggle-btn:hover {
  background: #e4e6e9;
  color: #495057;
  transform: translateY(-1px);
}
.grundiert-toggle-btn.is-on {
  background: #d7f0dd;
  color: #1e6b1e;
  border-color: #a3d9b0;
}
.grundiert-toggle-btn.is-on:hover {
  background: #c2e6cb;
  color: #145214;
}

/* Lackierer-Kürzel-Badge (Wer hat die Position abgeschlossen — Nachverfolgung) */
.lackierer-kuerzel-badge {
  display: inline-block;
  font-family: ui-monospace, monospace;
  font-weight: 700;
  font-size: 12px;
  color: var(--navy, #2c3e50);
  background: #eaf7ee;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.5px;
}

/* Auftrag-Detail: Sektionen pro Position */
.detail-section {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--gray-200, #eee);
}
.detail-section:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.detail-section h4 {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy, #2c3e50);
  letter-spacing: 0.3px;
}
.dl-grid-compact {
  display: grid;
  grid-template-columns: minmax(140px, auto) 1fr;
  gap: 4px 12px;
  margin: 0;
  font-size: 13px;
}
.dl-grid-compact dt { color: var(--gray-600, #666); font-weight: 500; }
.dl-grid-compact dd { margin: 0; color: var(--navy, #2c3e50); }
.stations-line {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 6px;
}
.station-chip {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
.mini-cal-table {
  border-collapse: collapse;
}
.mini-cal-table th {
  border-bottom: 1px solid var(--gray-300, #ccc);
  font-weight: 600;
}
.mini-cal-table td {
  border-bottom: 1px solid var(--gray-200, #eee);
}

/* 4-Punkt-Ampel für Montage-Aufträge-Übersicht */
.ampel {
  display: inline-flex;
  gap: 3px;
  align-items: center;
}
.ampel-punkt {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1px solid rgba(0,0,0,0.15);
}

/* Montage-Vorschlag-Button (💡) in Aufträge-Liste + Montage-Übersicht */
.vorschlag-btn {
  filter: grayscale(1);
  opacity: 0.4;
  transition: filter .15s, opacity .15s, transform .1s;
}
.vorschlag-btn:hover { opacity: 0.85; transform: scale(1.1); }
.vorschlag-btn.has-offen {
  filter: none; opacity: 1;
  background: #fff3e0;
  border-radius: 4px;
  animation: vorschlag-pulse 2s ease-in-out infinite;
}
.vorschlag-btn.st-bestaetigt { filter: none; opacity: 1; background: #eaf7ee; border-radius: 4px; }
.vorschlag-btn.st-geaendert  { filter: none; opacity: 1; background: #eaf3fc; border-radius: 4px; }
.vorschlag-btn.st-abgelehnt  { filter: none; opacity: 1; background: #fef1f0; border-radius: 4px; }
@keyframes vorschlag-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(230, 126, 34, 0.5); }
  50%      { box-shadow: 0 0 0 6px rgba(230, 126, 34, 0); }
}

/* Zahl-Badge im Nav-Menü (z.B. offene Vorschläge) */
.nav-badge {
  display: inline-block;
  min-width: 18px;
  padding: 1px 6px;
  margin-left: 6px;
  background: var(--orange, #e67e22);
  color: #fff;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  line-height: 16px;
  vertical-align: middle;
  animation: nav-badge-pulse 2.5s ease-in-out infinite;
}
@keyframes nav-badge-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.12); }
}

/* Zeile mit offenem Vorschlag: dezent rosé hinterlegt (statt großer Sektion) */
.row-vorschlag-offen td {
  background: #fef2ec !important;   /* dezenter rosé Ton */
}
.row-vorschlag-offen:hover td {
  background: #fce5d8 !important;
}
.row-vorschlag-offen td:first-child {
  border-left: 3px solid var(--orange, #e67e22);
}

/* ---------------------------------------------------------------- Transporte */
.transport-table td { vertical-align: top; }
/* Transporte von heute hervorheben — das ist die Zeile, die am Morgen zählt */
.transport-heute td { background: #eef7ee !important; }
.transport-heute td:first-child { border-left: 3px solid var(--green, #27ae60); }
.transport-heute-badge {
  display: inline-block; margin-left: 5px;
  padding: 0 6px; border-radius: 999px;
  background: var(--green, #27ae60); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .3px;
}
/* Stornierte Fahrten bleiben sichtbar, treten aber zurück */
.transport-storniert td { opacity: .55; }
.transport-storniert td:nth-child(3) { text-decoration: line-through; }
.transport-status-select {
  border: none; padding: 3px 8px; border-radius: 12px;
  font-size: 12px; font-weight: 600; cursor: pointer;
}

/* Risiko-Zeile in der Montage-Übersicht: Montagetermin steht bevor, die
 * Werkstatt ist aber noch nicht bereit. Sticht bewusst stärker heraus als der
 * offene Vorschlag — hier droht ein verpasster Termin. */
.row-montage-risiko td {
  background: #fdecea !important;
}
.row-montage-risiko:hover td {
  background: #fadbd8 !important;
}
.row-montage-risiko td:first-child {
  border-left: 3px solid var(--red, #c0392b);
}
.montage-risiko-hinweis {
  margin-top: 3px;
  font-size: 11px;
  font-weight: 600;
  color: #c0392b;
  white-space: nowrap;
}
/* Hinweis, dass die Bereitschaft von Hand gesetzt wurde statt berechnet */
.ws-override {
  margin-left: 3px;
  font-size: 11px;
  cursor: help;
  opacity: .75;
}

.btn {
  display: inline-block;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none !important;
  transition: background .15s;
}
.btn-primary   { background: var(--orange); color: white; }
.btn-primary:hover { background: var(--orange-dark); }
.btn-secondary { background: var(--white); color: var(--navy); border-color: var(--gray-300); }
.btn-secondary:hover { background: var(--gray-100); }
.btn-link      { background: transparent; color: var(--navy); border: none; padding: 8px 12px; }
.btn-link:hover { color: var(--orange); }
.btn-danger    { background: var(--red); color: white; }
.btn-danger:hover { background: #8a2520; }

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px; height: 32px;
  border-radius: 4px;
  background: transparent;
  color: var(--gray-600);
  text-decoration: none !important;
  border: 1px solid transparent;
}
.btn-icon:hover { background: var(--gray-200); color: var(--navy); }
.btn-icon-danger:hover { background: var(--red-light); color: var(--red); }

.status-badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.empty-row {
  text-align: center;
  padding: 32px;
  color: var(--gray-600);
}
.text-center { text-align: center; }
.text-right  { text-align: right; }
.text-mono   { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; }

/* Form-Karten */
.auftrag-form .form-card {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  padding: 20px 24px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}
.auftrag-form legend {
  font-weight: 600;
  font-size: 16px;
  color: var(--navy);
  padding: 0 8px;
}
.form-hint {
  color: var(--gray-600);
  font-size: 13px;
  margin: 4px 0 16px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 12px;
}
.form-field { display: flex; flex-direction: column; gap: 4px; }
.form-field label { font-size: 13px; font-weight: 500; color: var(--gray-700); }
.form-field input, .form-field select, .form-field textarea {
  padding: 8px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  background: var(--white);
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.15);
}
.form-field input[readonly] { background: var(--gray-100); color: var(--gray-600); }
.form-field-wide { grid-column: span 2; }
.form-field-full { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-field-wide, .form-field-full { grid-column: 1 / -1; }
}

/* Positionen-Rows */
.positions-row {
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.positions-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.positions-row-head strong { color: var(--navy); font-size: 14px; }
.positions-row-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.positions-row-grid .form-field-wide { grid-column: span 2; }
.positions-row-grid .form-field-full { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .positions-row-grid { grid-template-columns: 1fr 1fr; }
  .positions-row-grid .form-field-wide, .positions-row-grid .form-field-full { grid-column: 1 / -1; }
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 0;
}

/* Detail-Ansicht */
.detail-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 900px) {
  .detail-grid { grid-template-columns: 1fr; }
}
.detail-card {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}
.detail-card h3 {
  font-size: 16px;
  color: var(--navy);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.detail-card .counter { color: var(--gray-500); font-weight: normal; font-size: 14px; }

.dl-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 6px 12px;
  font-size: 14px;
}
.dl-grid dt { color: var(--gray-600); }
.dl-grid dd { color: var(--navy); font-weight: 500; }
.bemerkung-text { color: var(--gray-700); white-space: pre-wrap; padding: 8px 12px; background: var(--gray-100); border-radius: 6px; }

.positions-list { list-style: none; padding: 0; }
.positions-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.positions-toolbar { display: flex; gap: 4px; }
.btn-sm { font-size: 12px; padding: 2px 6px; }

.positions-accordion { margin-top: 6px; }
.position-item {
  border-bottom: 1px solid var(--gray-200);
  scroll-margin-top: 20px;
}
.position-item:last-child { border-bottom: none; }
.position-item:target {
  background: #fff3e0;
  border-radius: 6px;
  box-shadow: 0 0 0 2px var(--orange);
  animation: position-target-flash 1.6s ease-out 1;
}
@keyframes position-target-flash {
  0% { background: #ffe2bd; }
  100% { background: #fff3e0; }
}
summary.position-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  cursor: pointer;
  padding: 10px 8px;
  list-style: none;
}
summary.position-head::-webkit-details-marker { display: none; }
.pos-toggle {
  color: var(--gray-500);
  font-size: 12px;
  transition: transform .15s ease;
}
.position-item[open] > summary .pos-toggle { transform: rotate(90deg); }
.position-num { color: var(--gray-500); font-family: ui-monospace, monospace; font-size: 13px; }
.position-title { color: var(--navy); }
.kategorie-pill {
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
}
.position-body { padding: 0 8px 12px 30px; }
.position-meta {
  display: flex;
  gap: 16px;
  color: var(--gray-600);
  font-size: 13px;
  margin: 4px 0;
}
.position-desc { color: var(--gray-700); font-size: 13px; margin-top: 4px; }

.danger-zone {
  margin-top: 24px;
  padding: 16px 24px;
  background: var(--red-light);
  border: 1px solid var(--red);
  border-radius: 8px;
}
.danger-zone h3 { color: var(--red); margin-bottom: 6px; }
.danger-zone p { color: var(--gray-700); margin-bottom: 12px; font-size: 13px; }

/* ====================================================================
   Stammdaten-Hub + Tagesplanung (Session C)
   ==================================================================== */

.stammdaten-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.stammdaten-card {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  padding: 20px 22px;
  text-decoration: none !important;
  color: var(--navy);
  transition: all .15s;
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.stammdaten-card:hover {
  border-color: var(--orange);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.stammdaten-card.disabled {
  opacity: .55;
  pointer-events: none;
}
.stammdaten-icon { font-size: 28px; line-height: 1; margin-bottom: 4px; }
.stammdaten-card h3 { font-size: 16px; color: var(--navy); }
.stammdaten-card p { color: var(--gray-600); font-size: 13px; }
.stammdaten-card .stammdaten-count {
  margin-top: 8px;
  display: inline-block;
  padding: 2px 10px;
  background: var(--orange-light);
  color: var(--orange-dark);
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  align-self: flex-start;
}
.stammdaten-card small { color: var(--gray-500); font-size: 11px; margin-top: 4px; }

.form-hint-inline { color: var(--gray-500); font-weight: normal; font-size: 12px; }

/* Tagesplan-Raster */
.tagesplan-wrap {
  overflow-x: auto;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}
.tagesplan-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tagesplan-grid th, .tagesplan-grid td {
  border: 1px solid var(--gray-300);
  padding: 6px 8px;
  text-align: center;
  vertical-align: middle;
}
.tagesplan-grid thead th {
  background: var(--navy);
  color: white;
  font-weight: 600;
}
.tp-th-name { background: var(--navy-dark) !important; min-width: 120px; text-align: left !important; padding-left: 12px !important; }
.tp-th-tag  { border-bottom: 1px solid var(--gray-400); }
.tp-th-datum { display: block; font-weight: normal; opacity: .7; font-size: 11px; }
.tp-th-halb { background: #3d566e !important; font-size: 11px; font-weight: normal; min-width: 70px; }
.tp-today { background: var(--orange) !important; }

.tp-td-name {
  background: var(--gray-100);
  text-align: left !important;
  padding-left: 12px !important;
  font-weight: 600;
}
.tp-td-pensum {
  display: block;
  font-size: 11px;
  font-weight: normal;
  color: var(--gray-600);
}

.tp-cell {
  cursor: pointer;
  min-height: 32px;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.3px;
  transition: opacity .15s;
}
.tp-cell:hover {
  opacity: 0.7;
  outline: 2px solid var(--orange);
  outline-offset: -2px;
}
.tp-cell-empty {
  background: #fafaf7;
  color: var(--gray-400);
}
.tp-cell-empty:hover::before {
  content: '+';
  color: var(--orange);
  font-size: 16px;
}
.tp-cell-filled { color: var(--navy); }

.tagesplan-legende {
  margin-top: 8px;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  padding: 8px 16px;
}
.tagesplan-legende summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
  padding: 6px 0;
}
.legende-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  padding: 12px 0 8px;
}
.legende-grid h4 { color: var(--navy); font-size: 13px; margin-bottom: 6px; }
.legende-grid ul { list-style: none; padding: 0; font-size: 13px; }
.legende-grid li { padding: 3px 0; }
@media (max-width: 800px) { .legende-grid { grid-template-columns: 1fr; } }

.tp-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
  color: var(--navy);
  margin-right: 6px;
}

/* Tagesplan-Modal */
.tp-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(44, 62, 80, 0.5);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.tp-modal.open { display: flex; }
.tp-modal-inner {
  background: var(--white);
  border-radius: 10px;
  padding: 24px 28px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.2);
}
.tp-modal-inner h3 { color: var(--navy); margin-bottom: 4px; }
.tp-modal-sub { color: var(--gray-600); margin-bottom: 16px; font-size: 14px; }
.tp-modal-inner label {
  display: block;
  font-weight: 500;
  color: var(--gray-700);
  margin-top: 12px;
  margin-bottom: 4px;
  font-size: 13px;
}
.tp-modal-inner select, .tp-modal-inner input[type=text] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}
.tp-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

/* ====================================================================
   Session D: Auftragsfarbe-Picker + Pills
   ==================================================================== */

.farbe-palette {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 8px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  background: var(--white);
}
.farbe-swatch {
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform .1s;
}
.farbe-swatch:hover { transform: scale(1.1); }
.farbe-swatch.active {
  border-color: var(--navy);
  box-shadow: 0 0 0 2px rgba(44, 62, 80, 0.15);
}
.farbe-preview-pill {
  margin-left: 8px;
  padding: 4px 14px;
  border-radius: 14px;
  color: white;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.5px;
  font-family: ui-monospace, monospace;
  text-shadow: 0 1px 1px rgba(0,0,0,0.15);
}

.auftrag-farb-pill {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  margin-right: 6px;
  vertical-align: middle;
  border: 1px solid rgba(0,0,0,0.1);
}

/* ====================================================================
   Session E: Mobile, Versionen-Timeline, Sterne, User-Header
   ==================================================================== */

/* Header-User-Link */
.user-name-link {
  color: inherit !important;
  text-decoration: none !important;
  padding: 6px 10px;
  border-radius: 6px;
  transition: background .15s;
}
.user-name-link:hover { background: rgba(255,255,255,0.1); }
.user-role { opacity: 0.7; }

/* Tagesplan-Stern */
.tp-stern {
  position: absolute;
  top: 1px;
  right: 2px;
  font-size: 11px;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
}
.tp-cell { position: relative; }

/* Versions-Timeline */
.version-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
  position: relative;
}
.version-entry {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-left: 4px solid var(--orange);
  border-radius: 8px;
  padding: 14px 18px;
  box-shadow: var(--shadow-sm);
}
.version-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.version-tag {
  background: var(--navy);
  color: white;
  padding: 3px 10px;
  border-radius: 12px;
  font-family: ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
}
.version-date {
  color: var(--gray-600);
  font-size: 13px;
}
.version-autor {
  color: var(--gray-500);
  font-size: 12px;
}
.version-actions { margin-left: auto; }
.version-notes {
  color: var(--gray-700);
  font-size: 14px;
  white-space: pre-wrap;
  padding-left: 4px;
}

/* Mobile-Ansicht */
.mob-page {
  max-width: 560px;
  margin: 0 auto;
}
.mob-header h1 {
  font-size: 24px;
  color: var(--navy);
  margin-bottom: 4px;
}
.mob-header p {
  color: var(--gray-600);
  margin-bottom: 16px;
}

.mob-nachrichten {
  background: #fff8e1;
  border: 1px solid #ffd54f;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.mob-nachrichten h2 {
  font-size: 16px;
  color: var(--navy);
  margin-bottom: 10px;
}
.mob-counter {
  background: var(--orange);
  color: white;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  margin-left: 6px;
}
.mob-msg {
  background: var(--white);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 8px;
  position: relative;
}
.mob-msg-neu { border-left: 3px solid var(--orange); }
.mob-msg-dot {
  position: absolute;
  top: 14px;
  left: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--orange);
}
.mob-msg-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
  flex-wrap: wrap;
  gap: 6px;
}
.mob-msg-meta { color: var(--gray-600); font-size: 12px; }
.mob-msg-text { color: var(--gray-700); white-space: pre-wrap; font-size: 14px; }
.mob-msg-action { margin-top: 8px; text-align: right; }
.mob-btn-small {
  background: var(--white);
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
  padding: 4px 10px;
  border-radius: 14px;
  font-size: 12px;
  cursor: pointer;
}
.mob-btn-small:hover { background: var(--gray-100); }

.mob-week-head {
  font-size: 13px;
  color: var(--gray-500);
  text-transform: uppercase;
  letter-spacing: 1px;
  margin: 20px 0 8px;
  padding-left: 4px;
}

.mob-day {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 8px;
  box-shadow: var(--shadow-sm);
}
.mob-day.mob-today {
  border-color: var(--orange);
  box-shadow: 0 0 0 2px rgba(230, 126, 34, 0.15), var(--shadow-md);
}
.mob-day.mob-past { opacity: 0.55; }
.mob-day.mob-weekend { background: var(--gray-100); }
.mob-day-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}
.mob-day-name {
  font-weight: 700;
  color: var(--navy);
  font-size: 16px;
  min-width: 28px;
}
.mob-day-date {
  color: var(--gray-600);
  font-family: ui-monospace, monospace;
  font-size: 14px;
}
.mob-day-badge {
  background: var(--orange);
  color: white;
  padding: 2px 10px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  margin-left: auto;
}
.mob-day-empty {
  color: var(--gray-500);
  font-style: italic;
  font-size: 13px;
  padding: 4px 0;
}

.mob-halbtag {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 6px;
  min-height: 50px;
}
.mob-halbtag:last-child { margin-bottom: 0; }
.mob-halbtag-leer {
  background: #fafaf7;
  color: var(--gray-500);
}
.mob-halbtag-voll { font-weight: 600; }
.mob-halb-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  padding: 3px 8px;
  border-radius: 10px;
  background: rgba(0,0,0,0.1);
  flex-shrink: 0;
}
.mob-halbtag-leer .mob-halb-label { background: var(--gray-200); }
.mob-halb-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.mob-halb-content strong {
  font-size: 16px;
  font-family: ui-monospace, monospace;
  letter-spacing: 0.5px;
}
.mob-halb-name {
  font-size: 13px;
  font-weight: 500;
  opacity: 0.95;
}
.mob-halb-detail {
  font-size: 12px;
  opacity: 0.8;
  font-weight: 400;
}
.mob-halb-bemerkung {
  font-size: 13px;
  font-weight: 600;
  font-style: italic;
  margin-top: 4px;
  padding: 4px 8px;
  background: rgba(255,255,255,0.35);
  border-radius: 5px;
  line-height: 1.3;
}
.mob-halb-bemerkung::before { content: '✎ '; font-style: normal; }

@media (max-width: 600px) {
  .mob-page { padding: 0 4px; }
}

/* ===== Mobile-Ansicht „Meine Einsätze" ===== */
.mob-body { margin: 0; background: #ece9e1; -webkit-text-size-adjust: 100%; }
.mob-topbar {
  position: sticky; top: 0; z-index: 10;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--navy, #2c3e50); color: #fff;
  padding: 14px 16px;
}
.mob-topbar-title { margin: 0; font-size: 19px; font-weight: 700; }
.mob-topbar-right { display: flex; align-items: center; gap: 12px; }
.mob-logout { color: rgba(255,255,255,0.7); font-size: 13px; text-decoration: none; }
.mob-avatar {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--orange, #e67e22); color: #fff;
  font-weight: 700; font-size: 14px;
}
.mob-main {
  padding: 14px 12px 40px;
  width: 100%;                    /* body ist flex-column → main sonst nur intrinsische Breite */
  max-width: 560px;
  margin: 0 auto;
  box-sizing: border-box;
  align-self: center;
}
.mob-stream { display: flex; flex-direction: column; gap: 20px; }

/* ===== Mobile Tab-Umschalter (Mein Plan / Team-Plan) ===== */
.mob-tabs {
  display: flex;
  gap: 4px;
  background: #dfd9c8;
  padding: 4px;
  border-radius: 10px;
  margin: 0 0 16px;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.08);
}
.mob-tab {
  flex: 1;
  text-align: center;
  padding: 10px 14px;
  border-radius: 7px;
  font-weight: 700;
  font-size: 14px;
  color: var(--navy, #2c3e50);
  text-decoration: none !important;
  transition: background 0.15s;
}
.mob-tab.is-active {
  background: #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}
.mob-tab:not(.is-active):hover {
  background: rgba(255,255,255,0.5);
}

/* ===== Team-Plan (Wochen-Uebersicht aller Monteure) — Grid-Stil ===== */
.mob-team-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0 8px;
  font-size: 13px;
}
.mob-team-navbtn {
  padding: 6px 14px;
  background: var(--navy, #2c3e50);
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 6px;
  font-weight: 700;
  font-size: 16px;
  line-height: 1;
  display: inline-block;
}
.mob-team-navbtn.is-disabled {
  background: #cfd2d6;
  color: #8f9296 !important;
  cursor: not-allowed;
}
.mob-team-navlabel {
  font-weight: 700;
  color: var(--navy, #2c3e50);
  flex: 1;
  text-align: center;
  line-height: 1.2;
}
.mob-team-navsub {
  display: block;
  font-size: 11px;
  font-weight: 500;
  color: #666;
  font-family: ui-monospace, monospace;
}
.mob-team-zoom {
  display: flex;
  gap: 6px;
  padding: 0 0 10px;
  justify-content: center;
  align-items: center;
}
.mob-team-zoomlink {
  padding: 3px 10px;
  border-radius: 999px;
  background: #f0f1f2;
  color: var(--navy, #2c3e50) !important;
  text-decoration: none !important;
  font-size: 12px;
  font-weight: 600;
  border: 1px solid transparent;
}
.mob-team-zoomlink.is-active {
  background: var(--navy, #2c3e50);
  color: #fff !important;
}
.mob-team-heute {
  background: #fff3e0;
  color: var(--orange-dark, #8a5a1a) !important;
  border-color: var(--orange, #e67e22);
}
.mob-team-empty {
  padding: 30px;
  text-align: center;
  color: #888;
  background: #fff;
  border-radius: 8px;
}

/* --- Grid --- */
.mob-teamgrid-wrap {
  overflow-x: auto;
  overflow-y: visible;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  -webkit-overflow-scrolling: touch;
}
.mob-teamgrid {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
  min-width: 100%;
}
.mob-teamgrid th, .mob-teamgrid td {
  border-right: 1px solid #e6e6e6;
  border-bottom: 1px solid #e6e6e6;
  padding: 2px 4px;
  vertical-align: top;
}
/* Header (Monteur-Namen) — sticky oben, scrollt horizontal mit */
.mob-teamgrid-name {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--navy, #2c3e50);
  color: #fff;
  font-size: 12px;
  padding: 8px 4px;
  text-align: center;
  min-width: 96px;
  font-weight: 700;
}
/* Eigene Spalte nicht mehr farblich hervorgehoben — gelb ist reserviert fuer provisorisch */
/* Corner-Zellen im Header (Tag/Datum/½) — sticky top UND left, hoechster z-index */
.mob-teamgrid-corner {
  position: sticky;
  top: 0;
  z-index: 7 !important;
  background: var(--navy, #2c3e50) !important;
  color: #fff;
  font-size: 10px;
  padding: 8px 3px !important;
  text-align: center;
}
.mob-teamgrid-corner:nth-child(1) { left: 0;    min-width: 30px; }
.mob-teamgrid-corner:nth-child(2) { left: 30px; min-width: 42px; }
.mob-teamgrid-corner:nth-child(3) { left: 72px; min-width: 24px; }

/* Linke Body-Sticky-Spalten */
.mob-teamgrid-tag,
.mob-teamgrid-datum,
.mob-teamgrid-halb {
  position: sticky;
  z-index: 4;
  font-weight: 600;
  color: var(--navy, #2c3e50);
  text-align: center;
  background: #eef1f4;   /* opaque, damit scrollende Zellen dahinter nicht durchscheinen */
}
.mob-teamgrid-tag   { left: 0;    min-width: 30px; font-size: 11px; }
.mob-teamgrid-datum { left: 30px; min-width: 42px; font-size: 10px; font-family: ui-monospace, monospace; }
.mob-teamgrid-halb  { left: 72px; min-width: 24px; font-size: 9.5px; color: #888; }
.mob-teamgrid-today-mark { background: var(--orange, #e67e22) !important; color: #fff; }
.mob-teamgrid-today .mob-teamgrid-datum { background: #ffe3c2 !important; color: var(--orange-dark, #8a5a1a); }
.mob-teamgrid-today .mob-teamgrid-halb  { background: #ffe3c2 !important; }
.mob-teamgrid-sa td { background: #f0f0f0; }
.mob-teamgrid-sa .mob-teamgrid-tag,
.mob-teamgrid-sa .mob-teamgrid-datum,
.mob-teamgrid-sa .mob-teamgrid-halb { background: #e4e6e8; }

/* KW-Trennzeile */
.mob-teamgrid-weeksep td {
  background: var(--navy, #2c3e50) !important;
  color: #fff;
  text-align: left !important;
  padding: 5px 10px !important;
  font-weight: 700;
  font-size: 12px;
  position: sticky;
  left: 0;
  z-index: 4;
}

/* Datenzellen */
.mob-teamgrid-cell {
  min-width: 96px;
  padding: 3px 4px !important;
  line-height: 1.2;
  overflow: hidden;
  background: #fff;
}
.mob-teamgrid-cell.is-empty { background: #fafafa; }
.mob-teamgrid-code {
  font-family: ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.85;
}
.mob-teamgrid-strasse {
  font-weight: 600;
  font-size: 11.5px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 1px;
}

@media (max-width: 500px) {
  .mob-teamgrid-cell,
  .mob-teamgrid-name { min-width: 84px; }
  .mob-teamgrid-strasse { font-size: 11px; }
}

/* Klickbare Zellen — Feedback beim Tap */
.mob-teamgrid-cell.has-eintrag { cursor: pointer; }
.mob-teamgrid-cell.has-eintrag:active { opacity: 0.75; }

/* Provisorisch/unbestätigt: gelb hinterlegt + Warn-Icon oben rechts */
.mob-teamgrid-cell.is-unbest {
  background: #f9d641 !important;
  color: #4a3800 !important;
  position: relative;
}
.mob-teamgrid-warn {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 11px;
  color: #8e6c00;
  font-weight: bold;
  pointer-events: none;
}

/* "Mein Plan" — provisorische Einsatz-Karten: gelb hinterlegt, wie im Kalender */
.mob-einsatz.is-unbest {
  background: #f9d641 !important;
  border-left-color: #f1c40f !important;
  color: #4a3800;
}
.mob-einsatz.is-unbest .mob-einsatz-adresse,
.mob-einsatz.is-unbest .mob-einsatz-ort,
.mob-einsatz.is-unbest .mob-einsatz-beschr,
.mob-einsatz.is-unbest .mob-einsatz-code { color: #4a3800; }
.mob-einsatz-warn {
  font-size: 13px;
  margin-left: 4px;
  color: #8e6c00;
}

/* Detail-Modal — Warnbanner */
.mob-modal-unbest {
  background: #fff9e6;
  color: #8a5a1a;
  padding: 8px 12px;
  border-radius: 6px;
  border-left: 3px solid #f1c40f;
  font-size: 13px;
  margin-bottom: 4px;
}

/* ===== Mobile Detail-Modal ===== */
.mob-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.mob-modal[hidden] { display: none; }
.mob-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.55);
}
.mob-modal-box {
  position: relative;
  background: #fff;
  width: 100%;
  max-width: 500px;
  border-radius: 16px 16px 0 0;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.25);
  max-height: 85vh;
  overflow-y: auto;
  animation: mob-modal-slide 0.22s ease-out;
}
@keyframes mob-modal-slide {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.mob-modal-header {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  background: #2c3e50;
  color: #fff;
  border-radius: 16px 16px 0 0;
  z-index: 2;
}
.mob-modal-code {
  font-family: ui-monospace, monospace;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
}
.mob-modal-close {
  background: none;
  border: 0;
  color: #fff;
  font-size: 28px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.mob-modal-body {
  padding: 14px 18px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mob-modal-name {
  font-size: 18px;
  font-weight: 700;
  color: #2c3e50;
  line-height: 1.3;
  word-wrap: break-word;
}
.mob-modal-posbez {
  font-size: 14px;
  color: #555;
  font-style: italic;
}
.mob-modal-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 0;
  border-top: 1px solid #eee;
  font-size: 14px;
  line-height: 1.35;
}
.mob-modal-row:first-of-type { border-top: 0; padding-top: 4px; }
.mob-modal-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: #999;
  font-weight: 600;
}
.mob-modal-tel {
  display: inline-block;
  margin-top: 6px;
  padding: 8px 14px;
  background: #27ae60;
  color: #fff !important;
  text-decoration: none !important;
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  width: fit-content;
}
.mob-modal-tel:active { background: #229954; }
.mob-modal-bem span:not(.mob-modal-label) {
  padding: 8px 10px;
  background: #fff9e6;
  border-left: 3px solid #e67e22;
  border-radius: 4px;
  color: #555;
  font-style: italic;
}

.mob-day-group { display: flex; flex-direction: column; gap: 10px; }
.mob-day-label {
  margin: 6px 0 0; font-size: 12px; font-weight: 700;
  letter-spacing: 0.6px; text-transform: uppercase; color: #8a8578;
}
.mob-day-heute { color: var(--orange, #e67e22); }
.mob-frei {
  color: #8f8a7d;
  font-size: 13px;
  font-style: italic;
  padding: 10px 14px;
  background: rgba(255,255,255,0.5);
  border: 1px dashed #cfc8b8;
  border-radius: 10px;
  text-align: center;
  letter-spacing: 0.2px;
}

.mob-einsatz {
  background: #fff; border-radius: 12px;
  border-left: 5px solid #e67e22;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
  display: flex; flex-direction: column; gap: 3px;
}
.mob-einsatz-code {
  font-family: ui-monospace, monospace; font-size: 13px;
  color: #9a9486; letter-spacing: 0.3px;
}
.mob-einsatz-adresse { font-size: 18px; font-weight: 700; color: var(--navy, #2c3e50); }
.mob-einsatz-ort { font-size: 13px; color: #6b6658; }
.mob-einsatz-beschr { font-size: 14px; color: #3a362e; margin-top: 5px; line-height: 1.35; }
/* Bemerkung steht unter der Bezeichnung, nicht an ihrer Stelle. Etwas blasser
   und mit Dreieck — dieselbe Auszeichnung wie in den Werkstattlisten. */
.mob-einsatz-bem {
  font-size: 13px;
  color: #8a6d3b;
  margin-top: 4px;
  line-height: 1.35;
  font-style: italic;
}
.mob-einsatz-pills { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.mob-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: #f1efe8; color: #5a5547;
  font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 14px;
}
.mob-pill-call { background: #e3f3e8; color: #1e7e34; text-decoration: none; }
.mob-maps { text-decoration: none; }
.mob-maps::after { content: " \1F4CD"; font-size: 14px; }

.mob-msg-section { display: flex; flex-direction: column; gap: 10px; }
.mob-msg {
  background: #fff7e6; border-left: 4px solid var(--orange, #e67e22);
  border-radius: 8px; padding: 12px 14px;
}
.mob-msg-head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 4px; }
.mob-msg-from { font-weight: 700; color: #b9760f; }
.mob-msg-when { color: #9a9486; }
.mob-msg-text { margin: 4px 0 8px; font-size: 14px; color: #3a362e; line-height: 1.35; }
.mob-msg-btn {
  background: var(--orange, #e67e22); color: #fff; border: none;
  padding: 6px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; cursor: pointer;
}

/* ====================================================================
   Polish: Gedrehtes Tagesplan-Grid (Tage als Zeilen, Mitarbeiter als Spalten)
   wie in der Werkstatt-Excel — großzügig dimensioniert, lesbar
   ==================================================================== */

.tp-wrap {
  overflow: auto;
  max-height: 78vh;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  box-shadow: var(--shadow-sm);
  margin-bottom: 16px;
}

/* Samstag als dezente 6. Zeile — grau abgesetzt, kompakt.
   Selten belegt, aber planbar wie werktags (VM+NM). */
.tp-row-sa td { background: #d8dde3 !important; font-size: 10px; }
.tp-row-sa td.tp-cell-tag,
.tp-row-sa td.tp-cell-datum,
.tp-row-sa td.tp-cell-halb { background: #c9d0d8 !important; color: #4a5560 !important; }
.tp-row-sa .tp-cell-code { font-size: 9px; }
.tp-row-sa .tp-cell-sub,
.tp-row-sa .tp-cell-adr,
.tp-row-sa .tp-cell-bem { font-size: 8px; opacity: 0.7; }
.kiosk-row-sa td { background: #d8dde3 !important; }

/* Schlanke Header-Zeile für Montage/Tagesplan — spart eine ganze Zeile Höhe */
.tp-slim-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0 8px;
  flex-wrap: wrap;
}
.tp-slim-label {
  font-size: 14px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.3px;
}
.tp-slim-range {
  font-weight: 400;
  color: var(--gray-600);
  font-family: ui-monospace, monospace;
  font-size: 12px;
  margin-left: 6px;
}
.tp-slim-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.tp-slim-actions .btn-sm {
  font-size: 12px;
  padding: 3px 10px;
}
.tp-kw-picker {
  font-size: 12px;
  padding: 3px 6px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  background: white;
  margin-left: 6px;
  cursor: pointer;
  font-family: inherit;
}
.tp-kw-picker:hover { border-color: var(--gray-500); }
.tp-kw-picker:focus { outline: 2px solid var(--blue, #3b82f6); outline-offset: -1px; }

.tp-grid {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 11px;
  /* Volle Breite nutzen — bei wenigen Monteuren verbreitern sich die Spalten,
     bei vielen wird horizontal gescrollt (weil .tp-wrap overflow: auto ist) */
  width: 100%;
  min-width: max-content;
}

.tp-grid th, .tp-grid td {
  border: 1px solid var(--gray-300);
  padding: 1px 2px;
  text-align: center;
  vertical-align: middle;
  background: var(--white);
}

/* Sticky Spaltenkopf */
.tp-grid thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--navy);
  color: white;
  font-weight: 600;
  height: 42px;
}

/* Mitarbeiter-Spalten-Köpfe — schmales Minimum, aber wachsen wenn Platz da ist */
.tp-name-col {
  font-size: 9px;
  line-height: 1.1;
  font-weight: 600;
  min-width: 68px;
  /* max-width entfernt — Spalten dürfen wachsen wenn Bildschirm gross genug ist */
  padding: 3px 2px !important;
}
.tp-name-vor { font-weight: 400; opacity: 0.85; font-size: 9px; }
.tp-name-nach { font-weight: 700; font-size: 10px; }
/* Handynummer im Kalender-Header, tippbar (tel:-Link) */
.tp-name-tel {
  display: block;
  font-family: ui-monospace, monospace;
  font-size: 9px;
  font-weight: 400;
  /* Der Spaltenkopf hat dunklen Hintergrund — helle, neutrale Schrift statt
     Orange: die Nummer soll lesbar sein, nicht die Aufmerksamkeit ziehen. */
  color: rgba(255,255,255,0.82);
  text-decoration: none;
  margin-top: 2px;
  letter-spacing: 0.2px;
}
.tp-name-tel:hover { text-decoration: underline; }
/* Handynummer im TV-Kiosk-Header */
.kiosk-name-tel {
  font-family: ui-monospace, monospace;
  font-size: 12px;
  font-weight: 400;
  color: rgba(255,255,255,0.75);
  margin-top: 3px;
  letter-spacing: 0.3px;
}

/* Sticky Ecken (oben links) */
.tp-corner {
  background: var(--navy-dark) !important;
  z-index: 20 !important;
}
.tp-corner-tag    { left: 0;    position: sticky; min-width: 40px; max-width: 40px; font-size: 11px; }
.tp-corner-datum  { left: 40px; position: sticky; min-width: 58px; max-width: 58px; font-size: 11px; }
.tp-corner-halb   { left: 98px; position: sticky; min-width: 34px; max-width: 34px; font-size: 11px; }

/* Sticky linke Spalten in tbody */
.tp-grid tbody td.tp-cell-tag,
.tp-grid tbody td.tp-cell-datum,
.tp-grid tbody td.tp-cell-halb {
  position: sticky;
  z-index: 5;
  background: var(--gray-100);
  font-weight: 600;
  color: var(--navy);
}
.tp-cell-tag {
  left: 0;
  min-width: 40px;
  max-width: 40px;
  font-size: 12px;
}
.tp-cell-datum {
  left: 40px;
  min-width: 58px;
  max-width: 58px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 400;
  color: var(--gray-600);
}
.tp-cell-halb {
  left: 98px;
  min-width: 34px;
  max-width: 34px;
  font-size: 10px;
  color: var(--gray-600);
  font-weight: 600;
  letter-spacing: 0.5px;
}

/* Heutige Tageszeile */
.tp-today-mark {
  background: var(--orange) !important;
  color: white !important;
}
.tp-today-row .tp-cell-empty {
  background: #fffaf2;
}

/* NM-Zeile mit dezenter Trennung */
.tp-row-nm td {
  border-top: 1px dashed var(--gray-300);
}
.tp-row-nm .tp-cell-empty {
  background: #fcfcfa;
}
/* Tag-Trenner (zwischen verschiedenen Tagen kräftigere Linie) */
.tp-row-vm td {
  border-top: 2px solid var(--gray-300);
}

/* Eintragszellen */
.tp-grid tbody td.tp-cell {
  cursor: pointer;
  min-width: 130px;
  max-width: 160px;        /* obere Grenze — lange Titel sprengen sonst die Spalten */
  min-height: 58px;
  padding: 6px 10px;
  transition: outline-color 0.15s;
  position: relative;
  overflow: hidden;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.tp-grid tbody td.tp-cell:hover {
  outline: 2px solid var(--orange);
  outline-offset: -2px;
  filter: brightness(0.95);
}
.tp-grid tbody td.tp-cell-empty {
  color: var(--gray-400);
  min-height: 44px;
}
.tp-grid tbody td.tp-cell-empty:hover::before {
  content: '+';
  color: var(--orange);
  font-size: 18px;
  font-weight: 600;
}

/* Zwei-Zeilen-Inhalt: Code oben, Bezeichnung darunter */
.tp-cell-code {
  /* Bewusst normal: PL-Kürzel und Auftragsnummer sind Nachschlage-Infos.
     Hervorgehoben wird die Bezeichnung darunter (siehe .tp-cell-sub-pos). */
  font-weight: 400;
  font-family: ui-monospace, monospace;
  font-size: 9.5px;
  letter-spacing: 0;
  line-height: 1.05;
  overflow: hidden;
  word-break: break-word;   /* Falls Bezeichnung als Code steht (Schnellauftrag) */
}
.tp-cell-sub {
  font-size: 8.5px;
  font-weight: 500;
  opacity: 0.85;
  margin-top: 1px;
  line-height: 1.15;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  overflow-wrap: break-word;
}
/* Baustelle: Strasse + PLZ/Ort (wie in der Excel) */
.tp-cell-adr {
  font-size: 8px;
  font-weight: 400;
  opacity: 0.75;
  line-height: 1;
  margin-top: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Notiz/Bemerkung pro Zelle (z.B. "Decke demontieren") */
.tp-cell-bem {
  font-size: 8.5px;
  font-weight: 600;
  font-style: italic;
  margin-top: 1px;
  line-height: 1.05;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.tp-cell-bem::before {
  content: '\270E\00A0';
  font-style: normal;
}

/* Stern bleibt oben rechts */
.tp-grid .tp-stern {
  position: absolute;
  top: 2px;
  right: 3px;
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.3));
}

/* ====================================================================
   Drag-Reorder + Multi-Week-Separator
   ==================================================================== */

.tp-hint {
  color: var(--gray-600);
  font-size: 13px;
  margin: 8px 0 12px;
  padding: 8px 14px;
  background: #f5f9fc;
  border-left: 3px solid #3498db;
  border-radius: 4px;
}

/* Drag-Handle in Spaltenkopf */
.tp-name-col {
  cursor: grab;
  position: relative;
  user-select: none;
}
.tp-name-col:active { cursor: grabbing; }
.tp-drag-handle {
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 10px;
  opacity: 0.4;
  letter-spacing: -1px;
  pointer-events: none;
}
.tp-name-col:hover .tp-drag-handle { opacity: 0.8; }

/* Drag-States */
.tp-name-col.tp-dragging {
  opacity: 0.4;
}
.tp-name-col.tp-drag-over {
  background: var(--orange) !important;
  outline: 2px solid white;
  outline-offset: -4px;
}

/* Wochen-Separator: bleibt beim vertikalen Scrollen direkt unter dem Header kleben */
.tp-week-sep td {
  background: var(--gray-200) !important;
  text-align: left !important;
  padding: 10px 14px !important;
  border-top: 3px solid var(--navy) !important;
  position: sticky !important;
  top: 42px;    /* genau unter dem Thead (Spaltenköpfe sind 42px hoch, siehe .tp-grid thead th) */
  left: 0;
  z-index: 8;
  box-shadow: 0 2px 4px rgba(0,0,0,0.06);
}
.tp-week-label {
  font-weight: 700;
  color: var(--navy);
  font-size: 14px;
  letter-spacing: 0.5px;
}
.tp-week-range {
  margin-left: 12px;
  color: var(--gray-600);
  font-size: 12px;
  font-family: ui-monospace, monospace;
}

/* ====================================================================
   Bereichs-Extras: zusätzliche MAs in Bereichs-Ansicht
   ==================================================================== */

/* Extra-Spaltenkopf — kleiner Akzent damit man sieht "gehört nicht regulär hierher" */
.tp-name-col-extra {
  background: #2c4a5e !important;
  position: relative;
}
.tp-name-col-extra .tp-name-vor,
.tp-name-col-extra .tp-name-nach {
  font-style: italic;
}
.tp-extra-badge {
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 1px;
  background: var(--orange);
  color: white;
  padding: 1px 6px;
  border-radius: 6px;
}

/* × in Extra-Spaltenkopf zum Entfernen */
.tp-extra-remove-form {
  display: inline;
  margin: 0;
  padding: 0;
}
.tp-extra-remove-btn {
  position: absolute;
  top: 3px;
  left: 3px;
  background: rgba(0,0,0,0.35);
  color: white;
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  cursor: pointer;
  font-size: 17px;
  line-height: 1;
  padding: 0;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: background 0.15s, transform 0.1s;
}
.tp-extra-remove-btn:hover {
  background: var(--red);
  transform: scale(1.1);
}
.tp-extra-remove-btn:active {
  transform: scale(0.95);
}

/* Mitarbeiter-Hinzufügen-Formular unter dem Grid */
.tp-add-extra {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 0 0 16px;
  padding: 10px 14px;
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
}
.tp-add-extra-label {
  font-weight: 600;
  color: var(--navy);
  font-size: 13px;
}
.tp-add-extra select {
  flex: 0 1 320px;
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  background: var(--white);
}
.tp-add-extra-hint {
  color: var(--gray-600);
  font-size: 12px;
  font-style: italic;
}

/* ====================================================================
   Zoom-Buttons (1 / 4 / 12 / Jahr) in Header der Tagesplan-Views
   ==================================================================== */

.tp-zoom-group {
  display: inline-flex;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  overflow: hidden;
  margin-left: 4px;
}
.btn-zoom {
  display: inline-block;
  padding: 6px 12px;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  background: var(--white);
  text-decoration: none !important;
  border-right: 1px solid var(--gray-300);
}
.btn-zoom:last-child { border-right: none; }
.btn-zoom:hover { background: var(--gray-100); }
.btn-zoom.active {
  background: var(--orange);
  color: white;
}

/* ====================================================================
   Kiosk-Mode für Werkstatt-Bildschirme (TV) — dunkel, große Schrift,
   read-only, ohne Topbar/Footer
   ==================================================================== */

body.kiosk-mode {
  background: #f5f5f0;
  color: #2c3e50;
  font-size: 17px;
  display: block;
  min-height: 100vh;
  padding: 0;
  margin: 0;
}
body.kiosk-mode main { display: none; }

/* Kiosk-Header — schlank; Titel + Uhrzeit sind bewusst raus (Platz sparen). */
.kiosk-header {
  display: flex;
  align-items: center;
  padding: 6px 16px;
  background: #3d5a80;
  color: #fff;
  border-bottom: 2px solid #2c3e50;
}
.kiosk-subtitle-inline {
  font-size: 14px;
  color: rgba(255,255,255,.9);
  letter-spacing: .3px;
}

/* Kiosk-Grid — helle Version analog zum normalen Tagesplan/Montage-Kalender */
.kiosk-wrap {
  overflow: auto;
  max-height: calc(100vh - 60px);
  background: #fff;
}
.kiosk-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  table-layout: fixed;
  background: #fff;
}
.kiosk-grid th, .kiosk-grid td {
  border: 1px solid var(--gray-300, #d0d0d0);
  padding: 8px 10px;
  text-align: center;
  vertical-align: middle;
}
.kiosk-grid thead th {
  background: var(--navy, #2c3e50);
  color: #fff;
  font-weight: 700;
  height: 48px;
  padding: 4px 6px;
  position: sticky;
  top: 0;
  z-index: 10;
}
.kiosk-corner {
  background: #eef1f4 !important;
  color: var(--navy, #2c3e50) !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .5px;
  width: 52px;
}
.kiosk-name-col {
  font-size: 14px;
  line-height: 1.25;
}
.kiosk-name-vor { font-weight: 400; opacity: 0.85; font-size: 13px; color: #fff; }
.kiosk-name-nach { font-weight: 700; font-size: 16px; margin-top: 2px; color: #fff; }
/* Traegt der Kopf eine Funktionsfarbe, bestimmt PHP die Schriftfarbe passend
   zum Untergrund. Das feste Weiss oben wuerde sonst auf einer hellen Farbe
   verschwinden — deshalb hier zurueck auf 'erben'. */
.kiosk-name-col-funktion .kiosk-name-vor,
.kiosk-name-col-funktion .kiosk-name-nach,
.kiosk-name-col-funktion .kiosk-name-tel { color: inherit; }
.kiosk-name-col-funktion .kiosk-name-tel { opacity: .8; }

/* Badge im Menue: die Zahl erklaert sich per Tooltip, das darf man sehen. */
.nav-badge[title] { cursor: help; }

/* --- Spalte am Wandbildschirm aus-/einblenden --------------------------- */
/* Sitzt im Spaltenkopf des Kalenders. Zurueckhaltend, solange alles normal
   ist — auffaellig nur dort, wo jemand bewusst etwas ausgeblendet hat. */
.tp-tv-btn {
  position: absolute;
  top: 2px;
  /* rechts, nicht links: links sitzt bereits der ✕-Knopf fuer Extras und
     externe Personen — die beiden wuerden sich sonst ueberlagern. */
  right: 3px;
  background: none;
  border: 0;
  padding: 0 2px;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  opacity: .35;
  filter: grayscale(1);
  transition: opacity .15s;
}
.tp-name-col:hover .tp-tv-btn { opacity: .8; }
.tp-tv-btn:hover { opacity: 1 !important; filter: none; }
/* Ausgeblendet: durchgestrichen und dauerhaft sichtbar — sonst faellt beim
   Draufschauen nicht auf, dass diese Spalte am TV fehlt. */
.tp-tv-btn.is-aus {
  opacity: .95;
  filter: none;
}
.tp-tv-btn.is-aus::after {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 50%;
  border-top: 2px solid #c0392b;
  transform: rotate(-20deg);
}
.tp-tv-btn:disabled { cursor: wait; }

/* --- Zusammengeklappte Spalte ------------------------------------------- */
/* Wer am TV ausgeblendet ist, kostet auch im Bearbeitungs-Kalender keine
   Breite mehr. Die Spalte bleibt stehen (sonst waere unklar, WAS da fehlt und
   wie man es zurueckholt) — sie schrumpft nur auf einen Streifen, auf dem noch
   das 📺 und das Kuerzel Platz haben. */
.tp-grid th.tp-col-schmal,
.tp-grid td.tp-col-schmal {
  width: 26px !important;
  min-width: 26px !important;
  max-width: 26px !important;
  padding: 2px 0 !important;
  overflow: hidden;
}
/* Im Kopf bleibt nur das Kuerzel, senkrecht gestellt. Vor- und Nachname und
   die Telefonnummer brauchen zu viel Platz. */
.tp-name-col.tp-col-schmal .tp-name-vor,
.tp-name-col.tp-col-schmal .tp-name-tel,
.tp-name-col.tp-col-schmal .tp-drag-handle,
.tp-name-col.tp-col-schmal .tp-extra-remove-form { display: none; }
.tp-name-col.tp-col-schmal .tp-name-nach {
  writing-mode: vertical-rl;
  margin: 16px auto 2px;
  font-size: 9px;
  letter-spacing: .3px;
  max-height: 74px;
  overflow: hidden;
  white-space: nowrap;
}
/* Der Knopf rutscht in die Mitte des Streifens — rechts waere er halb weg. */
.tp-name-col.tp-col-schmal .tp-tv-btn {
  right: auto;
  left: 50%;
  transform: translateX(-50%);
}
/* Zellinhalt verschwindet, die Farbe bleibt: so sieht man weiterhin, an
   welchen Halbtagen die Person belegt ist, ohne den Text zu lesen. */
.tp-cell.tp-col-schmal > * { display: none; }
.tp-cell.tp-col-schmal { font-size: 0; }

.kiosk-grid tbody td.kiosk-tag,
.kiosk-grid tbody td.kiosk-datum,
.kiosk-grid tbody td.kiosk-halb {
  background: #eef1f4;
  font-weight: 600;
  color: var(--navy, #2c3e50);
}
.kiosk-tag { font-size: 17px; }
.kiosk-datum { font-family: ui-monospace, monospace; font-size: 14px; color: var(--gray-600, #666); font-weight: 400; }
.kiosk-halb { font-size: 13px; color: var(--gray-600, #666); letter-spacing: 1px; }
.kiosk-today-mark {
  background: var(--orange) !important;
  color: white !important;
}

.kiosk-cell {
  min-height: 60px;
  position: relative;
  background: #fff;
}
.kiosk-cell-empty { color: var(--gray-300, #d0d0d0); }
.kiosk-cell-filled { font-weight: 600; }
/* Ganztages-Zelle (VM+NM verschmolzen): Inhalt vertikal zentriert */
.kiosk-cell-ganztag { vertical-align: middle; }
.kiosk-cell-code {
  font-family: ui-monospace, monospace;
  font-size: 13px;
  /* Bewusst normal — wie im Kalender (.tp-cell-code). PJ-Kuerzel und
     Auftragsnummer sind Nachschlage-Infos; hervorgehoben wird die
     Bezeichnung darunter. Auf dem TV zaehlt das doppelt: aus fuenf Metern
     liest man ein Wort, keine Nummer. */
  font-weight: 400;
  line-height: 1.2;
}
.kiosk-cell-sub {
  font-size: 11px;
  /* 500 statt 600: erst dadurch ist der Sprung auf .kiosk-cell-sub-pos aus
     Distanz ueberhaupt sichtbar. Mit 600 als Basis sahen hervorgehobene und
     normale Bezeichnungen auf dem Bildschirm praktisch gleich aus. */
  font-weight: 500;
  opacity: 0.95;
  margin-top: 2px;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
/* Ist eine Unterposition gewaehlt, ist deren Bezeichnung die wichtigste
   Information in der Zelle. Auf dem TV etwas kraeftiger als im Kalender
   (800 statt 700), weil der Sprung von 600 aus Distanz sonst untergeht. */
.kiosk-cell-sub-pos {
  font-weight: 800;
  opacity: 1;
}
/* Strasse / PLZ Ort — kleiner, damit für Monteure die Adresse gut lesbar ist */
.kiosk-cell-adr {
  font-size: 11px;
  font-weight: 500;
  line-height: 1.2;
  opacity: 0.9;
}
/* Notiz/Bemerkung pro Zelle im TV-Modus */
.kiosk-cell-bem {
  font-size: 12px;
  font-weight: 700;
  font-style: italic;
  margin-top: 3px;
  line-height: 1.2;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.kiosk-cell-bem::before {
  content: '\270E\00A0';
  font-style: normal;
}
.kiosk-stern {
  position: absolute;
  top: 3px;
  right: 4px;
  font-size: 14px;
}

.kiosk-week-sep td {
  background: var(--navy, #2c3e50) !important;
  text-align: left !important;
  padding: 12px 20px !important;
  font-weight: 700;
  font-size: 16px;
  color: var(--orange);
  letter-spacing: 1px;
  border-top: 3px solid var(--orange) !important;
}

.kiosk-empty {
  padding: 60px;
  text-align: center;
  font-size: 22px;
  color: var(--gray-600, #666);
}

.kiosk-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 16px;
  background: rgba(61, 90, 128, 0.9);
  color: #fff;
  font-size: 11px;
}
.kiosk-footer-link {
  color: rgba(255,255,255,.85) !important;
  text-decoration: none !important;
  padding: 4px 10px;
  border-radius: 4px;
}
.kiosk-footer-link:hover { background: rgba(255,255,255,0.15); color: #fff !important; }
.kiosk-refresh-info { opacity: 0.85; }

.kiosk-index-back {
  text-align: center;
  margin-top: 24px;
  font-size: 13px;
}
.kiosk-index-back a {
  color: #95a5a6 !important;
  text-decoration: none !important;
}
.kiosk-index-back a:hover { color: white !important; }

/* Kiosk-Index (Auswahlseite) */
.kiosk-index {
  max-width: 980px;
  margin: 0 auto;
  padding: 40px 24px;
}
.kiosk-index-title {
  font-size: 42px;
  font-weight: 800;
  color: white;
  text-align: center;
  margin-bottom: 8px;
}
.kiosk-index-sub {
  font-size: 16px;
  color: #95a5a6;
  text-align: center;
  margin-bottom: 32px;
}
.kiosk-index-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.kiosk-index-card {
  background: #1a1a1a;
  border: 2px solid var(--c, #2c3e50);
  border-radius: 12px;
  padding: 28px;
  text-decoration: none !important;
  color: white;
  text-align: center;
  transition: transform .15s, box-shadow .15s;
}
.kiosk-index-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.kiosk-index-icon {
  font-size: 56px;
  display: block;
  margin-bottom: 12px;
}
.kiosk-index-card h2 {
  font-size: 20px;
  color: white;
  margin: 0 0 4px;
}
.kiosk-index-card p {
  font-size: 13px;
  color: #95a5a6;
  margin: 0;
}
.kiosk-index-tip {
  margin-top: 36px;
  text-align: center;
  font-size: 13px;
  color: #7f8c8d;
  font-style: italic;
}

/* ====================================================================
   Modal: "Bis Datum" / Erweitern-Block für Bulk-Zuweisung
   ==================================================================== */

.tp-extend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  margin-top: 4px;
}
.tp-extend input[type="date"] {
  flex: 0 1 160px;
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
}
.tp-extend-btn {
  background: var(--gray-100);
  color: var(--navy);
  border: 1px solid var(--gray-300);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
  font-family: inherit;
}
.tp-extend-btn:hover {
  background: var(--orange);
  color: white;
  border-color: var(--orange);
}
.tp-extend-clear {
  background: var(--red-light);
  color: var(--red);
  border-color: transparent;
  width: 28px;
  height: 28px;
  padding: 0;
  font-size: 16px;
  line-height: 1;
}
.tp-extend-clear:hover {
  background: var(--red);
  color: white;
}

/* ====================================================================
   Fill-Handle: Excel-Style "Anfass-Punkt" rechte untere Ecke der Zelle
   ==================================================================== */

.tp-fill-handle {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 10px;
  height: 10px;
  background: var(--orange);
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  cursor: crosshair;
  opacity: 0.55;
  transition: opacity .12s, transform .12s, width .12s, height .12s;
  z-index: 20;
  pointer-events: auto;
}
.tp-cell:hover .tp-fill-handle {
  opacity: 1;
}
.tp-fill-handle:hover {
  width: 14px;
  height: 14px;
  opacity: 1;
  background: var(--orange-dark);
}

/* Quell-Zelle (während Drag) */
.tp-fill-source {
  outline: 2px solid var(--orange) !important;
  outline-offset: -2px;
  filter: brightness(1.05);
}

/* Zellen im Preview-Bereich (werden mit Quell-Wert gefüllt) */
.tp-fill-preview {
  outline: 2px dashed var(--orange) !important;
  outline-offset: -2px;
  position: relative;
}
.tp-fill-preview::after {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(230, 126, 34, 0.12);
  pointer-events: none;
}

/* Globaler Drag-State während Fill-Operation */
body.tp-fill-dragging,
body.tp-fill-dragging * {
  cursor: crosshair !important;
  user-select: none;
  -webkit-user-select: none;
}

/* Delete-Handle: rotes × in linker oberer Ecke gefüllter Zellen */
.tp-delete-handle {
  position: absolute;
  top: 0;
  left: 0;
  width: 14px;
  height: 14px;
  background: rgba(192, 57, 43, 0.65);
  clip-path: polygon(0 0, 100% 0, 0 100%);
  color: white;
  font-size: 11px;
  font-weight: 700;
  line-height: 10px;
  padding: 0 0 0 1px;
  cursor: pointer;
  opacity: 0;
  transition: opacity .12s, background .12s, width .12s, height .12s;
  z-index: 21;
  user-select: none;
  font-family: ui-monospace, sans-serif;
  text-align: left;
}
.tp-cell:hover .tp-delete-handle {
  opacity: 0.85;
}
.tp-delete-handle:hover {
  width: 18px;
  height: 18px;
  opacity: 1;
  background: var(--red);
}

/* Cell-Move/Copy via Drag: die ganze gefüllte Zelle ist ziehbar */
td.tp-cell-filled[draggable="true"] {
  cursor: grab;
}
td.tp-cell-filled[draggable="true"]:active {
  cursor: grabbing;
}
/* Feedback während der Server speichert (bis zum Reload) */
.tp-cell-saving {
  opacity: 0.45;
  transition: opacity .15s;
}
.tp-cell-copy-source {
  outline: 2px dashed var(--green) !important;
  outline-offset: -2px;
}
.tp-cell-drop-target {
  outline: 3px solid var(--green) !important;
  outline-offset: -3px;
  background-image: linear-gradient(45deg, rgba(39, 174, 96, 0.15), rgba(39, 174, 96, 0.15)) !important;
}

/* Quick-Auftrag-Formular im Tagesplan-Modal */
.tp-qa-toggle {
  font-size: 12px;
  color: var(--orange) !important;
  text-decoration: none !important;
  font-weight: 600;
  white-space: nowrap;
}
.tp-qa-toggle:hover { text-decoration: underline !important; }

.tp-qa-form {
  background: #fff7ed;
  border: 1px solid var(--orange);
  border-radius: 6px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.tp-qa-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 8px;
}
.tp-qa-row input {
  padding: 7px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}
.tp-qa-actions {
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}
.tp-qa-actions .btn {
  padding: 6px 14px;
  font-size: 13px;
}

/* Such-Combo im Tagesplan-Modal (mit Filter und Vorschlagsliste) */
.tp-combo {
  position: relative;
  margin-bottom: 6px;
}
.tp-combo-input-wrap {
  position: relative;
}
.tp-combo-input {
  width: 100%;
  padding: 8px 30px 8px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}
.tp-combo-input:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.15);
}
.tp-combo-clear-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  font-size: 18px;
  color: var(--gray-500);
  cursor: pointer;
  width: 22px;
  height: 22px;
  line-height: 1;
  padding: 0;
  border-radius: 50%;
}
.tp-combo-clear-btn:hover {
  color: white;
  background: var(--red);
}

.tp-combo-list {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  margin-top: 3px;
  background: white;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
  max-height: 280px;
  overflow-y: auto;
  z-index: 1100;
}
.tp-combo-list.open {
  display: block;
}
.tp-combo-group {
  padding: 4px 10px;
  background: var(--gray-100);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--gray-600);
  position: sticky;
  top: 0;
  z-index: 2;
}
.tp-combo-item {
  padding: 7px 10px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid var(--gray-100);
  font-size: 14px;
}
.tp-combo-item:last-child {
  border-bottom: none;
}
.tp-combo-item:hover,
.tp-combo-item-active {
  background: var(--orange-light);
}
.tp-combo-item-code {
  background: var(--gray-200);
  padding: 2px 8px;
  border-radius: 12px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  color: var(--navy);
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 80px;
  text-align: center;
}
.tp-combo-item-label {
  flex: 1;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-combo-item-sub {
  color: var(--gray-600);
  font-size: 12px;
  font-style: italic;
  flex-shrink: 0;
}
.tp-combo-empty {
  padding: 16px;
  text-align: center;
  color: var(--gray-500);
  font-style: italic;
}

/* Farbpicker im Tagesplan-Modal — Auftragsfarbe direkt ändern */
.tp-farbpick {
  margin: 10px 0 12px;
  padding: 10px 12px;
  background: #fff9e6;
  border-radius: 6px;
  border: 2px solid var(--orange);
}
.tp-farbpick label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}
.tp-farbpick label::before {
  content: '🎨 ';
}
.tp-farbpick-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.tp-farbpick-swatch {
  width: 28px;
  height: 28px;
  border-radius: 5px;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  transition: transform .1s, box-shadow .12s;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.tp-farbpick-swatch:hover {
  transform: scale(1.15);
}
.tp-farbpick-swatch.active {
  border-color: var(--navy);
  box-shadow: inset 0 0 0 2px white, 0 0 0 1px var(--navy);
}
.tp-farbpick-custom {
  width: 30px;
  height: 24px;
  padding: 0;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  cursor: pointer;
  margin-left: 4px;
}

/* ====================================================================
   CNC-Planung: Übersichtskarten + Queue-Tabelle
   ==================================================================== */

.cnc-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 840px;
  margin-top: 12px;
}
@media (max-width: 700px) { .cnc-cards { grid-template-columns: 1fr; } }

.cnc-card {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  padding: 24px 28px;
  text-decoration: none !important;
  color: var(--navy);
  transition: border-color .15s, transform .15s, box-shadow .15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cnc-card:hover {
  border-color: var(--orange);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.cnc-card-icon { font-size: 36px; line-height: 1; }
.cnc-card-titel {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
}
.cnc-card-untertitel {
  font-size: 14px;
  font-weight: 400;
  color: var(--gray-600);
}
.cnc-card-meta {
  font-size: 14px;
  color: var(--gray-700);
}
.cnc-card-meta strong { color: var(--orange); font-size: 17px; }
.cnc-card-naechster {
  margin-top: 8px;
  padding-top: 10px;
  border-top: 1px solid var(--gray-200);
  font-size: 13px;
  color: var(--gray-700);
}
.cnc-card-label {
  color: var(--gray-500);
  font-size: 12px;
}

/* Unassigned-Sektion */
.cnc-unassigned {
  background: #fff8e8;
  border: 1px solid #f1c40f;
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 16px;
}
.cnc-unassigned summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
  padding: 4px 0;
}
.cnc-unassigned-list {
  list-style: none;
  padding: 8px 0 0;
  margin: 0;
}
.cnc-unassigned-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  border-top: 1px solid #f1c40f30;
  gap: 12px;
}
.cnc-un-info { flex: 1; font-size: 13px; }
.cnc-un-actions { display: flex; gap: 4px; flex-shrink: 0; }
.btn-small { padding: 4px 10px !important; font-size: 12px !important; }

/* Erledigt-Sektion (eingeklappt unter der aktiven Queue) */
.cnc-erledigt {
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  padding: 10px 14px;
}
.cnc-erledigt summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--gray-600);
  padding: 4px 0;
}
.cnc-erledigt[open] summary { color: #27ae60; }
.cnc-table-erledigt {
  margin-top: 8px;
  opacity: .82;
}
.cnc-table-erledigt td { color: var(--gray-700); }

/* Placeholder-Text in allen Eingabefeldern dezenter machen
 *  — die hellgrauen Beispiele wirken sonst wie schon ausgefuellte Werte. */
input::placeholder,
textarea::placeholder,
select::placeholder {
  color: #c4ccd4;
  opacity: 1;
  font-style: italic;
  font-weight: 400;
}
/* Vendor-prefixed Variante, fuer aeltere WebKit-Browser */
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
  color: #c4ccd4;
  font-style: italic;
}
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
  color: #c4ccd4;
  font-style: italic;
}

/* Unbestätigte Termine (gelber Rand + Warn-Icon).
 *  Wird gesetzt sowohl auf Tagesplan-Zellen (tp-cell-unbestaetigt) als auch im
 *  Kiosk-View / Mobile-View, sobald wir das dort gleich nennen. */
.tp-cell-unbestaetigt {
  /* Ganze Zelle gelb hinterlegt (statt Rand) — überschreibt die Auftragsfarbe */
  background: #f9d641 !important;
  color: #4a3800 !important;
  position: relative;
}
.tp-cell-warn {
  position: absolute;
  top: 2px; right: 4px;
  font-size: 13px;
  color: #8e6c00;
  font-weight: bold;
  pointer-events: none;
}
/* Klickbar für Montageleiter/Admin — Ein-Klick-Bestätigen */
.tp-cell-warn-clickable {
  pointer-events: auto;
  cursor: pointer;
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.7);
  transition: background 0.12s, transform 0.1s;
  z-index: 3;
}
.tp-cell-warn-clickable:hover {
  background: #27ae60;
  color: #fff;
  transform: scale(1.15);
}
.tp-cell-warn-clickable:active { transform: scale(0.95); }

/* Rueckweg: bestaetigt → wieder auf provisorisch (nur beim Hover sichtbar) */
.tp-cell-unwarn-clickable {
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  padding: 0 5px;
  border-radius: 4px;
  background: rgba(255,255,255,0.85);
  color: #8e6c00;
  transition: opacity 0.15s, background 0.12s, transform 0.1s;
  z-index: 3;
}
.tp-cell:hover .tp-cell-unwarn-clickable { opacity: 0.7; }
.tp-cell-unwarn-clickable:hover {
  opacity: 1 !important;
  background: #f1c40f;
  color: #4a3800;
  transform: scale(1.15);
}
.tp-cell-unwarn-clickable:active { transform: scale(0.95); }

/* KW-Trennzeile innerhalb der konsolidierten Oberflaeche-Tabelle */
.oberfl-kw-sep td {
  background: var(--gray-100);
  font-weight: 600;
  color: var(--navy);
  font-size: 12px;
  padding: 6px 10px;
  border-top: 2px solid var(--gray-300);
  border-bottom: 1px solid var(--gray-300);
}

/* Fremdmonteur-Kennzeichnung im Tagesplan-Spaltenkopf */
.tp-name-nach.tp-name-fremd {
  font-style: italic;
  opacity: .85;
  font-size: 12px;
}

/* Rezept-Schichten (Form: Reihen) */
.schicht-row {
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: #fcfbf7;
}
.schicht-row-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}
.schicht-row-nr {
  font-weight: 700;
  color: var(--navy);
  font-size: 13px;
}

/* Rezept-Schichten (Detail-Ansicht: gestaffelt) */
.rezept-schichten {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 10px;
}
.rezept-schicht {
  display: flex;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-left: 4px solid var(--orange, #e67e22);
  border-radius: 6px;
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
}
.rezept-schicht-nr {
  font-size: 22px;
  font-weight: 700;
  color: var(--orange, #e67e22);
  min-width: 32px;
  text-align: center;
  align-self: center;
}
.rezept-schicht-body { flex: 1; }
.rezept-schicht-titel {
  font-weight: 600;
  color: var(--navy);
  font-size: 15px;
}
.rezept-schicht-farbe {
  color: var(--gray-700);
  font-weight: 400;
  font-size: 13px;
  margin-left: 4px;
}
.rezept-schicht-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 6px;
  font-size: 12px;
  color: var(--gray-700);
}
.rezept-schicht-bem {
  margin-top: 8px;
  font-size: 13px;
  color: var(--gray-800);
  background: var(--gray-100);
  padding: 6px 10px;
  border-radius: 4px;
  white-space: pre-wrap;
}

.filter-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--gray-700);
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  background: var(--white);
}

/* Material-Liefertermine: 2 Spalten Materialien, jede Zeile ein Mini-Grid */
.material-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 28px;
}
.material-row {
  display: grid;
  grid-template-columns: 100px 1fr 150px;
  gap: 10px;
  align-items: center;
}
.material-label {
  font-weight: 600;
  color: var(--navy);
  font-size: 14px;
}
.material-status {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  background: var(--white);
  font-size: 13px;
  min-width: 0;
  width: 100%;
}
.material-status.status-lager    { background: #e8f8ec; color: #27ae60; border-color: #27ae60; font-weight: 600; }
.material-status.status-bestellt { background: #fff3e0; color: #c46615; border-color: #e67e22; font-weight: 600; }
.material-status.status-offen    { background: var(--gray-100); color: var(--gray-600); }
.material-date {
  padding: 6px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
  width: 100%;
  box-sizing: border-box;
}
.material-date[hidden] { visibility: hidden; }   /* Platz reservieren, Zeile bleibt stabil */
@media (max-width: 900px) {
  .material-grid { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .material-row { grid-template-columns: 90px 1fr; row-gap: 4px; }
  .material-date { grid-column: 2 / 3; }
  .material-date[hidden] { display: none; visibility: visible; }
}

/* Queue-Tabelle */
.cnc-table-wrap {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 8px;
  overflow: auto;
  box-shadow: var(--shadow-sm);
}
.cnc-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.cnc-table th, .cnc-table td {
  padding: 8px 10px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--gray-200);
}
.cnc-table thead th {
  background: var(--gray-100);
  color: var(--navy);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  font-weight: 700;
  position: sticky;
  top: 0;
  z-index: 5;
}
.cnc-table tbody tr {
  transition: background .12s;
}
.cnc-table tbody tr:hover { background: var(--gray-100); }

.cnc-th-drag { width: 24px; }
.cnc-td-drag {
  cursor: grab;
  color: var(--gray-400);
  font-size: 16px;
  text-align: center;
  user-select: none;
}
.cnc-td-drag:hover { color: var(--orange); }
.cnc-row-dragging { opacity: 0.5; }
.cnc-row-over { background: var(--orange-light) !important; }

.cnc-farb-pill {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
  border: 1px solid rgba(0,0,0,0.1);
}

.pl-badge {
  display: inline-block;
  background: var(--navy);
  color: white;
  padding: 2px 8px;
  border-radius: 10px;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
}

.cnc-td-art    { min-width: 200px; }
.cnc-td-naechster { min-width: 150px; }

.cnc-inline-form { margin: 0; padding: 0; }
.cnc-inline-input {
  width: 100%;
  padding: 4px 6px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 4px;
  font-size: 13px;
  font-family: inherit;
  color: inherit;
}
.cnc-inline-input:hover { background: var(--white); border-color: var(--gray-200); }
.cnc-inline-input:focus {
  outline: none;
  background: var(--white);
  border-color: var(--orange);
  box-shadow: 0 0 0 2px rgba(230,126,34,0.15);
}
.cnc-inline-date { font-family: ui-monospace, monospace; min-width: 120px; }

/* Endtermin-Spalte — identisch in CNC-Queue und Oberflächen-Liste.
 * Die frühere separate KW-Spalte ist weg: die Kalenderwoche wurde ohnehin aus
 * genau diesem Datum berechnet.
 *
 * Angezeigt wird nur "Mo · KW 21". Das Datum selbst ist ausgeblendet — das
 * Eingabefeld klappt erst beim Klick auf. Soll das Datum wieder dauerhaft
 * sichtbar sein: die Regel .endtermin-cell.is-open unten so ändern, dass sie
 * ohne .is-open gilt (bzw. .endtermin-edit[hidden] anzeigen). */
.th-endtermin { white-space: nowrap; }
.td-endtermin { white-space: nowrap; }

.endtermin-cell { position: relative; }

.endtermin-anzeige {
  background: none; border: 1px solid transparent; border-radius: 4px;
  padding: 2px 6px; margin: -2px -6px;
  font: inherit; font-size: 12px; color: var(--gray-700);
  cursor: pointer; white-space: nowrap; text-align: left;
}
.endtermin-anzeige:hover {
  border-color: var(--gray-300);
  background: var(--white);
  color: var(--navy);
}
/* Ohne Termin dezenter darstellen */
.endtermin-anzeige:empty::after { content: '—'; }

/* Datumsfeld: nur sichtbar, solange die Zelle offen ist */
.endtermin-cell .endtermin-edit { display: none; }
.endtermin-cell.is-open .endtermin-anzeige { display: none; }
.endtermin-cell.is-open .endtermin-edit { display: block; }
/* .cnc-inline-status: die Status-Pille. Es gibt sie weder in der CNC-Queue
 * noch in der Oberflächen-Liste noch — in beiden ersetzt "✓ Fertig" das
 * Dropdown. Die Regel bleibt nur, weil das Polling-JS der Oberfläche noch
 * defensiv danach sucht; sie greift auf nichts mehr. Kann weg, sobald das
 * Polling umgebaut wird. */
.cnc-inline-status {
  border: none;
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* Aktions-Spalte der CNC-Queue. Zwei Knöpfe, bewusst unterschiedlich gewichtet:
 *   ✓ Fertig  = Abschluss (grün, gefüllt) — der übliche Klick
 *   → <Name>  = auf die andere Maschine umhängen (umrandet)
 * Früher standen hier ✓ und ✕ nebeneinander, was wie "annehmen / ablehnen"
 * aussah — das ✕ war aber die Maschinen-Zuteilung, kein Status.
 * .btn-cnc-unassign lebt weiter für die Erledigt-Liste. */
.cnc-th-aktionen { width: 1%; white-space: nowrap; text-align: right; }
.cnc-td-aktionen {
  white-space: nowrap; text-align: right;
  display: flex; gap: 6px; justify-content: flex-end; align-items: center;
}
.cnc-unassign-form { display: inline; margin: 0; }

.btn-cnc-fertig {
  background: var(--green, #27ae60); color: #fff;
  border: 1px solid transparent; border-radius: 5px;
  padding: 4px 10px; font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.btn-cnc-fertig:hover { filter: brightness(1.08); }

/* Umhängen auf die andere Maschine — der häufigste Korrekturfall,
 * deshalb etwas präsenter als "Unzugewiesen". */
.btn-cnc-move {
  background: var(--white); color: var(--navy);
  border: 1px solid var(--navy); border-radius: 5px;
  padding: 4px 9px; font: inherit; font-size: 12px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
}
.btn-cnc-move:hover { background: var(--navy); color: #fff; }

.btn-cnc-unassign {
  background: transparent; color: var(--gray-600);
  border: 1px solid var(--gray-300); border-radius: 5px;
  padding: 4px 9px; font: inherit; font-size: 12px;
  cursor: pointer; white-space: nowrap;
}
.btn-cnc-unassign:hover {
  border-color: var(--gray-500, #8a949e);
  background: var(--gray-100);
  color: var(--gray-800);
}

/* CNC-Tab-Bar (Wechsel zwischen den beiden Maschinen, Namen: Cnc\Model::MASCHINEN) */
.cnc-tabs {
  display: flex;
  gap: 4px;
  border-bottom: 2px solid var(--gray-300);
  margin-bottom: 0;
}
.cnc-tab {
  background: transparent;
  border: none;
  padding: 12px 24px 14px;
  cursor: pointer;
  font-family: inherit;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  display: flex;
  align-items: baseline;
  gap: 10px;
  color: var(--gray-700);
  transition: color .15s, border-color .15s;
}
.cnc-tab:hover { color: var(--navy); }
.cnc-tab.active {
  color: var(--orange);
  border-bottom-color: var(--orange);
}
.cnc-tab-titel {
  font-size: 18px;
  font-weight: 700;
}
.cnc-tab-untertitel {
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 400;
}
.cnc-tab-count {
  background: var(--gray-200);
  color: var(--gray-700);
  padding: 2px 9px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 700;
  font-family: ui-monospace, monospace;
}
.cnc-tab.active .cnc-tab-count {
  background: var(--orange);
  color: white;
}

.cnc-tab-content {
  margin-top: 0;
}
.cnc-tab-content[hidden] { display: none; }
.cnc-tab-content .cnc-table-wrap {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

/* ====================================================================
   Auftrags-Liste: 8 Werkstatt-Status-Spalten mit Icon-Pillen
   ==================================================================== */

.auftrag-list-wrap {
  overflow-x: auto;
  max-width: 100%;
}
.auftrag-list-table {
  font-size: 12px;
  min-width: 1400px;
}
.auftrag-list-table th, .auftrag-list-table td {
  padding: 6px 8px;
  white-space: nowrap;
}
.auftrag-list-table .auftrag-th-step {
  width: 34px;
  height: 150px;
  padding: 6px 0;
  vertical-align: bottom;
  text-align: center;
}
.auftrag-list-table .th-step-label {
  display: inline-block;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  white-space: nowrap;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .2px;
}
.auftrag-list-table .auftrag-td-step {
  text-align: center;
  padding: 2px 0;
}
.auftrag-list-table .auftrag-td-nr { font-weight: 600; }
/* PL- und Nr-Spalte schmaler halten, damit rechts Platz für die Bemerkung bleibt */
.auftrag-list-table th:nth-child(1), .auftrag-list-table td:nth-child(1) { width: 36px; padding-left: 6px; padding-right: 6px; }
.auftrag-list-table th:nth-child(2), .auftrag-list-table td:nth-child(2) { width: 78px; padding-left: 6px; padding-right: 6px; }
.auftrag-list-table tr.auftrag-row-ohne-pos td { background: #faf8f3; color: var(--gray-600); }
th.sortable { cursor: pointer; user-select: none; }
th.sortable:hover { background: rgba(0,0,0,.05); }
th.sort-active { color: var(--orange); }
.th-arrow { font-size: 9px; opacity: .4; margin-left: 3px; }
th.sort-active .th-arrow { opacity: 1; }
.auftrag-list-table .auftrag-td-art {
  white-space: normal;
  max-width: 280px;
  font-size: 12px;
  line-height: 1.3;
}
.auftrag-list-table .auftrag-td-oberfl {
  font-size: 11px;
  text-transform: uppercase;
}
.auftrag-list-table .auftrag-td-bem {
  font-size: 11px;
  white-space: pre-wrap;
  line-height: 1.35;
  color: var(--gray-800);
  font-style: italic;
  min-width: 160px;
  max-width: 260px;
}

/* Werkstatt-Schritt-Icon */
.step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 14px;
  font-family: ui-monospace, monospace;
  line-height: 1;
  user-select: none;
}
.step-todo  { background: var(--gray-200);    color: var(--gray-500); }
.step-doing { background: #fff3e0;            color: var(--orange-dark); border: 1.5px solid var(--orange); }
.step-done  { background: var(--green-light); color: var(--green); }
.step-block { background: var(--red-light);   color: var(--red); border: 1.5px solid var(--red); }
/* Stations-Status: Farbe = Information (grau / rot / orange / grün) */
.step-grau   { background: var(--gray-100);    color: var(--gray-400); }
.step-rot    { background: #fdecea;            color: #c0392b; border: 1.5px solid #e74c3c; }
.step-blau   { background: #e8f1fb;            color: #2471a3; border: 1.5px solid #3498db; }
.step-gelb   { background: #fef5d7;            color: #8e6c00; border: 1.5px solid #f1c40f; }
.step-gruen  { background: var(--green-light); color: var(--green); border: 1.5px solid #27ae60; }

.step-clickable {
  cursor: pointer;
  transition: transform .1s;
}
.step-clickable:hover {
  transform: scale(1.18);
}

/* Mini-Avatar für Verantwortlich-Spalte */
.user-avatar-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: var(--gray-500);
  color: white;
  border-radius: 50%;
  font-family: ui-monospace, monospace;
  font-size: 10px;
  font-weight: 700;
}

/* ====================================================================
   Strukturierte Auftragserfassung (6-Card-Wizard im Mockup-Stil)
   ==================================================================== */

.erfassen-form { display: flex; flex-direction: column; gap: 18px; }

.erfassen-card {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-radius: 10px;
  padding: 20px 24px;
  box-shadow: var(--shadow-sm);
}
.erfassen-h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.erfassen-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: var(--orange);
  color: white;
  border-radius: 50%;
  font-family: ui-monospace, monospace;
  font-size: 14px;
  font-weight: 700;
}
.erfassen-h4 {
  font-size: 14px;
  color: var(--navy);
  margin: 18px 0 8px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.erfassen-num-sm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  background: var(--navy);
  color: white;
  border-radius: 50%;
  font-family: ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
}
.erfassen-hint {
  font-size: 13px;
  color: var(--gray-600);
  margin-bottom: 10px;
}
.erfassen-hint-inline {
  font-size: 12px;
  color: var(--gray-500);
  font-weight: 400;
}

.erfassen-grid {
  display: grid;
  gap: 14px;
}
.erfassen-grid.cols-2 { grid-template-columns: 1fr 1fr; }
.erfassen-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.erfassen-grid.cols-4 { grid-template-columns: 1fr 1fr 1fr 1fr; }
.erfassen-grid .form-field.cols-2     { grid-column: span 2; }
.erfassen-grid .form-field.cols-full  { grid-column: 1 / -1; }

@media (max-width: 900px) {
  .erfassen-grid.cols-3, .erfassen-grid.cols-4 { grid-template-columns: 1fr 1fr; }
  .erfassen-grid .form-field.cols-2 { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .erfassen-grid.cols-2, .erfassen-grid.cols-3, .erfassen-grid.cols-4 { grid-template-columns: 1fr; }
}

.erfassen-grid .form-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.erfassen-grid .form-field label {
  font-size: 13px;
  font-weight: 600;
  color: var(--gray-700);
}
.erfassen-grid input, .erfassen-grid select, .erfassen-grid textarea {
  padding: 8px 10px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}
.erfassen-grid input:focus, .erfassen-grid select:focus, .erfassen-grid textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.15);
}
.erfassen-grid .hint {
  font-size: 12px;
  color: var(--gray-500);
  margin-top: 2px;
}

/* Position-Block (Subcard) */
.erfassen-position { position: relative; }
.erfassen-pos-remove {
  position: absolute;
  top: 18px;
  right: 18px;
  background: transparent;
  border: 1px solid var(--gray-300);
  color: var(--gray-600);
  cursor: pointer;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  font-size: 14px;
  line-height: 1;
}
.erfassen-pos-remove:hover {
  background: var(--red-light);
  color: var(--red);
  border-color: var(--red);
}
.erfassen-add-pos { text-align: center; margin: -8px 0 6px; }

/* Big-Choice-Kacheln für Hauptgruppe */
.bigchoice-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.bigchoice {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 16px 12px;
  background: var(--white);
  border: 2px solid var(--gray-300);
  border-radius: 10px;
  cursor: pointer;
  transition: all .12s;
  user-select: none;
}
.bigchoice:hover {
  border-color: var(--orange);
  transform: translateY(-1px);
}
.bigchoice.selected {
  border-color: var(--orange);
  background: #fff7ee;
  box-shadow: inset 0 0 0 1px var(--orange);
}
.bigchoice-radio { display: none; }
.bigchoice-icon {
  font-size: 32px;
  line-height: 1;
  margin-bottom: 6px;
}
.bigchoice-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
}

/* Chips für Untergruppen (Mehrfach-Checkboxen) */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 14px;
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  border-radius: 18px;
  font-size: 13px;
  color: var(--gray-700);
  cursor: pointer;
  transition: all .1s;
  user-select: none;
}
.chip:hover {
  background: var(--gray-200);
  border-color: var(--gray-400);
}
.chip.selected {
  background: var(--orange);
  color: white;
  border-color: var(--orange);
  font-weight: 600;
}
.chip input[type="checkbox"] { display: none; }

/* Checkbox-Karten für Mäppli */
.checkbox-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px;
}
.checkbox-card {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--white);
  border: 1.5px solid var(--gray-300);
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--navy);
  font-weight: 500;
  transition: border-color .1s;
}
.checkbox-card input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: var(--orange);
  cursor: pointer;
}
.checkbox-card:has(input:checked) {
  border-color: var(--orange);
  background: #fff7ee;
}

/* Aktionen unten */
.erfassen-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  padding: 8px 0 20px;
}

/* ====================================================================
   Mockup-konforme Form-Klassen (form-card, form-row, chip, bigchoice)
   ==================================================================== */

/* Mockup-Style form-card h3 (orange, uppercase, klein) — wirkt überall ausser
   wenn parent .auftrag-form das Style überschreibt */
.form-card > h3 {
  font-size: 14px;
  font-weight: 700;
  color: var(--orange);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 12px;
}
.form-row.cols-3 { grid-template-columns: 1fr 1fr 1fr; }
.form-row.cols-1 { grid-template-columns: 1fr; }
@media (max-width: 900px) {
  .form-row.cols-3, .form-row.cols-4 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .form-row, .form-row.cols-3, .form-row.cols-4 { grid-template-columns: 1fr; }
}

.form-row .form-field {
  display: block;
}
.form-row .form-field label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--gray-700);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.form-row .form-field input[type="text"],
.form-row .form-field input[type="date"],
.form-row .form-field input[type="number"],
.form-row .form-field select,
.form-row .form-field textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
}
.form-row .form-field input:focus,
.form-row .form-field select:focus,
.form-row .form-field textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(230, 126, 34, 0.15);
}
.form-row .form-field textarea { min-height: 80px; resize: vertical; }
.form-row .form-field .hint {
  font-size: 11px;
  color: var(--gray-500);
  margin-top: 4px;
}

/* Mockup-Style Chip-Pillen (orange Hintergrund wenn ausgewählt) */
.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.chip {
  display: inline-block;
  padding: 6px 14px;
  background: var(--orange-light);
  color: var(--orange-dark);
  border-radius: 14px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  transition: background .12s, color .12s;
}
.chip:hover {
  background: var(--orange);
  color: var(--white);
}
.chip.selected {
  background: var(--orange);
  color: var(--white);
  font-weight: 600;
}

/* Mockup-Style Bigchoice-Kacheln */
.bigchoice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 700px) {
  .bigchoice-grid { grid-template-columns: 1fr; }
}
.bigchoice {
  background: var(--white);
  border: 2px solid var(--gray-300);
  border-radius: 8px;
  padding: 18px 16px;
  cursor: pointer;
  text-align: center;
  font-weight: 600;
  font-size: 14px;
  color: var(--navy);
  transition: border-color .12s, background .12s, color .12s;
}
.bigchoice:hover { border-color: var(--orange); }
.bigchoice.selected {
  border-color: var(--orange);
  background: var(--orange-light);
  color: var(--orange-dark);
}
.bigchoice .icon {
  font-size: 28px;
  display: block;
  margin-bottom: 8px;
}

/* Mockup-Style Checkbox-Row für Mäppli */
.checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.checkbox-row label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  padding: 8px 14px;
  border: 1px solid var(--gray-300);
  border-radius: 6px;
  background: var(--white);
}
.checkbox-row label:hover {
  border-color: var(--orange);
}
.checkbox-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--orange);
  cursor: pointer;
}

/* Position-Card "X"-Button */
.pos-remove-btn {
  background: transparent;
  border: 1px solid var(--gray-300);
  color: var(--gray-600);
  cursor: pointer;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
}
.pos-remove-btn:hover {
  background: var(--red-light);
  color: var(--red);
  border-color: var(--red);
}

/* Flex-Between (Mockup-Helper) */
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}

/* ====================================================================
   Oberflaeche/Spritzraum (Lackierer-Liste mit Pakete-Expand)
   ==================================================================== */

.kw-section { margin-bottom: 22px; }
.kw-header {
  background: var(--navy);
  color: white;
  padding: 10px 16px;
  border-radius: 6px 6px 0 0;
  font-weight: 600;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.kw-header .kw-count {
  font-size: 12px;
  font-weight: 400;
  opacity: 0.85;
}
.oberfl-wrap {
  background: var(--white);
  border: 1px solid var(--gray-300);
  border-top: none;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
  overflow: auto;
  box-shadow: var(--shadow-sm);
}
.oberfl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.oberfl-table th, .oberfl-table td {
  padding: 8px 10px;
  border-bottom: 1px solid var(--gray-200);
  vertical-align: top;
}
.oberfl-table thead th {
  background: var(--gray-100);
  color: var(--navy);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  font-weight: 700;
  text-align: left;
  white-space: nowrap;
}
.oberfl-table tbody tr:hover { background: var(--gray-100); }

.ausgef-pill {
  display: inline-block;
  font-size: 12px;
  padding: 3px 10px;
  border-radius: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.ausgef-offen   { background: var(--gray-200);    color: var(--gray-700); }
.ausgef-fertig  { background: var(--green-light); color: var(--green); }
.ausgef-doing   { background: var(--orange-light);color: var(--orange-dark); }
.ausgef-waiting { background: #fff8e1;            color: #8a6d00; }

.lagermat-cell { font-size: 12px; white-space: nowrap; }
.lagermat-ok        { color: var(--green); font-weight: 600; }
.lagermat-bestellt  { color: var(--orange-dark); }
.lagermat-fehlt     { color: var(--red); font-weight: 600; }
.lagermat-lackierer { color: #8e44ad; font-weight: 600; }
.lagermat-na        { color: var(--gray-500); }

.btn-paket-toggle {
  background: var(--gray-100);
  border: 1px solid var(--gray-300);
  color: var(--navy);
  padding: 3px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  font-family: ui-monospace, monospace;
}
.btn-paket-toggle:hover {
  background: var(--orange-light);
  border-color: var(--orange);
}

.pakete-row .pakete-cell-content {
  padding: 0 !important;
  background: #fff7ee;
}
.pakete-loader { padding: 12px; color: var(--gray-600); font-style: italic; }
.pakete-block { padding: 12px 16px; }

.pakete-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: white;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.pakete-table th, .pakete-table td {
  padding: 5px 8px;
  border-bottom: 1px solid var(--gray-200);
  text-align: left;
  vertical-align: middle;
}
.pakete-table thead th {
  background: var(--gray-100);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: var(--gray-600);
}

/* Farb-Code je Arbeitspaket — direkt in der Zeile editierbar. */
.paket-td-farbe { width: 150px; }
.paket-td-farbe .paket-farbe-input {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}

/* ==========================================================================
   Mehrere Oberflaechen-Auftraege pro Position (Migration 070)
   ========================================================================== */

/* Kurze Marke des Teil-Auftrags („Tuere", „Rahmen") neben der Position. */
.ob-marke {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 8px;
  border-radius: 10px;
  background: #eef3f7;
  border: 1px solid #d5e0e9;
  color: var(--navy, #2c3e50);
  font-size: 11px;
  font-weight: 700;
  vertical-align: middle;
}
/* Einziger Auftrag der Position: die Marke ist dann Zusatzinfo, kein Wegweiser. */
.ob-marke-solo { background: transparent; border-color: transparent; color: var(--gray-600, #777); font-weight: 600; }

/* Farb-Code der Zeile, direkt editierbar. */
.ob-td-farbe { min-width: 130px; }
.ob-td-farbe .ob-farbe-input {
  width: 100%;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
}
/* Kein eigener Code am Auftrag: der geerbte steht als Platzhalter da und soll
   sich sichtbar von einem selbst gesetzten unterscheiden. */
.ob-farbe-input.ob-farbe-geerbt::placeholder { color: #9aa7b2; font-style: italic; }

/* Zwei Zeilen derselben Position sollen als zusammengehoerig lesbar sein. */
.cnc-table tr[data-oa] .ob-marke { white-space: nowrap; }
.paket-th-drag { width: 24px; }
.paket-drag-handle {
  cursor: grab;
  color: var(--gray-400);
  text-align: center;
  width: 24px;
  font-size: 14px;
  user-select: none;
}
.paket-drag-handle:hover { color: var(--orange); }
.paket-dragging { opacity: 0.5; }
.paket-over { background: var(--orange-light) !important; }

.paket-status-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-weight: 700;
  font-size: 13px;
  border: 1.5px solid transparent;
  cursor: pointer;
  font-family: ui-monospace, monospace;
  vertical-align: middle;
}
.paket-status-btn.paket-todo  { background: var(--gray-200);    color: var(--gray-500); }
.paket-status-btn.paket-doing { background: #fff3e0;            color: var(--orange-dark); border-color: var(--orange); }
.paket-status-btn.paket-wait  { background: #fff8e1;            color: #8a6d00;            border-color: #f1c40f; }
.paket-status-btn.paket-done  { background: var(--green-light); color: var(--green); }
.paket-status-btn.paket-block { background: var(--red-light);   color: var(--red);         border-color: var(--red); }
.paket-status-btn:hover { transform: scale(1.1); transition: transform .12s; }
.paket-status-label {
  margin-left: 6px;
  font-size: 11px;
  color: var(--gray-600);
}

.paket-add-form {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-top: 10px;
  padding: 8px;
  background: white;
  border-radius: 6px;
  border: 1px dashed var(--gray-400);
}
.paket-add-form input[type="text"] {
  flex: 1;
  padding: 5px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  font-size: 12px;
}
.paket-add-form input[type="number"] {
  padding: 5px 8px;
  border: 1px solid var(--gray-300);
  border-radius: 4px;
  font-size: 12px;
}

/* Station-Toggle in Erfassungsmaske: CNC + Oberflaeche per Checkbox aufklappen */
.station-toggle-row {
  margin-top: 14px !important;
  margin-bottom: 6px !important;
}
.station-toggle {
  display: inline-flex !important;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: var(--gray-100);
  border: 1.5px solid var(--gray-300);
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  color: var(--navy);
  transition: all .12s;
  font-size: 14px !important;
  text-transform: none !important;
  letter-spacing: 0 !important;
}
.station-toggle:hover {
  border-color: var(--orange);
}
.station-toggle:has(input:checked) {
  border-color: var(--orange);
  background: #fff7ee;
  color: var(--orange-dark);
}
.station-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--orange);
  cursor: pointer;
}
.station-toggle-icon {
  font-size: 18px;
}
.station-toggle-label {
  font-size: 14px;
}
.station-fields {
  padding: 12px 14px;
  background: #fff7ee;
  border: 1px solid var(--orange-light);
  border-radius: 6px;
  margin-bottom: 10px;
  margin-top: -4px;
}
.station-fields[hidden] { display: none; }

/* Triviso-Duplikat-Banner in der Erfassungsmaske */
.triviso-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #fff3e0;
  border: 1px solid var(--orange);
  border-left: 4px solid var(--orange);
  border-radius: 6px;
  padding: 12px 16px;
  margin-bottom: 16px;
}
.triviso-banner[hidden] { display: none; }
.triviso-banner-icon {
  font-size: 20px;
  flex-shrink: 0;
}
.triviso-banner-text {
  flex: 1;
  font-size: 13px;
  color: var(--orange-dark);
  font-weight: 500;
}
.triviso-banner-reset {
  background: var(--white);
  border: 1px solid var(--gray-300);
  color: var(--gray-700);
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.triviso-banner-reset:hover {
  background: var(--gray-100);
  border-color: var(--gray-400);
}


/* ==========================================================================
   Such-Combo (assets/js/combo.js)
   Verwandelt ein <select data-combo> in ein Suchfeld mit Vorschlagsliste.
   Bewusst nah am Aussehen der normalen Formularfelder gehalten.
   ========================================================================== */
.combo {
  position: relative;
  width: 100%;
}
/* Das echte <select> bleibt im Formular, wird aber nicht angezeigt.
   Kein display:none per Klasse auf dem Element selbst — so bleibt es
   fokussierbar, falls die Combo mal nicht initialisiert wurde. */
select.combo-native {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.combo-input {
  width: 100%;
  padding-right: 28px;   /* Platz für das ×  */
}
.combo-clear {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  line-height: 1;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--gray-600, #666);
  font-size: 16px;
  cursor: pointer;
}
.combo-clear:hover {
  background: var(--gray-200, #e4e4e4);
  color: var(--navy, #2c3e50);
}
.combo-list {
  display: none;
  position: absolute;
  z-index: 60;
  top: calc(100% + 2px);
  left: 0;
  right: 0;
  max-height: 260px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid var(--gray-300, #d0d0d0);
  border-radius: 6px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.13);
}
.combo-list.open { display: block; }
.combo-item {
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.combo-item:hover,
.combo-item-markiert {
  background: var(--gray-100, #f2f2f2);
}
.combo-item-aktiv {
  font-weight: 600;
  color: var(--navy, #2c3e50);
}
.combo-item-aktiv::after {
  content: ' ✓';
  color: var(--green, #27ae60);
}
.combo-empty {
  padding: 10px 12px;
  font-size: 13px;
  color: var(--gray-600, #666);
  font-style: italic;
}

/* ==========================================================================
   Lagermaterial Oberfläche: Liefertermin + Rückmelde-Knöpfe des Lackierers
   ========================================================================== */
.lagermat-cell {
  white-space: normal;      /* darf jetzt umbrechen — Termin und Knöpfe brauchen Platz */
  line-height: 1.5;
}
.lagermat-haupt { display: inline-block; }
.lagermat-termin {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--gray-100, #f2f2f2);
  color: var(--gray-700, #444);
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
}
.lagermat-rueck {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.lagermat-rueck-btn {
  padding: 2px 8px;
  border: 1px solid var(--gray-300, #d0d0d0);
  border-radius: 4px;
  background: #fff;
  color: var(--gray-700, #444);
  font-size: 11px;
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
  white-space: nowrap;
}
.lagermat-rueck-btn:hover {
  border-color: var(--navy, #2c3e50);
  background: var(--gray-100, #f2f2f2);
}
.lagermat-rueck-btn.is-da:hover {
  border-color: var(--green, #27ae60);
  background: var(--green-light, #e8f6ee);
  color: var(--green, #27ae60);
}
.lagermat-rueck-btn:disabled { opacity: .5; cursor: default; }

/* Ausgeblendete Formularfelder wirklich verstecken.
   `.form-row .form-field { display:block }` gewinnt sonst gegen das
   Browser-Standardverhalten von [hidden] — das Feld bliebe sichtbar. */
.form-row .form-field[hidden] { display: none; }

/* Ganze Formularzeile ausblenden (`display:grid` gewinnt sonst gegen [hidden]) */
.form-row[hidden] { display: none; }

/* Der Liefertermin des Lacks sitzt in Spalte 2 — also direkt unter der
   Lack-Auswahl, auf die er sich bezieht. */
.lagermat-termin-row .lagermat-termin-field { grid-column: 2; }
@media (max-width: 600px) {
  .lagermat-termin-row .lagermat-termin-field { grid-column: auto; }
}

/* ==========================================================================
   Meine Vorschläge: noch nicht gesehene Antwort des Montageleiters
   ========================================================================== */
tr.vorschlag-neu > td { background: #fff8e6; }
tr.vorschlag-neu > td:first-child { box-shadow: inset 3px 0 0 var(--orange, #e67e22); }
.neu-punkt {
  color: var(--orange, #e67e22);
  font-size: 15px;
  line-height: 1;
  margin-right: 4px;
  vertical-align: middle;
}

/* ==========================================================================
   Einplan-Modus im Montage-Kalender (Phase 2)
   ========================================================================== */

/* --- Zwei-Spalten-Layout: Anfragen-Panel + Kalender --------------------- */
.tp-layout { display: block; }
.tp-layout.has-panel {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
}
.tp-layout.has-panel.panel-zu { grid-template-columns: 30px minmax(0, 1fr); }
@media (max-width: 1100px) {
  .tp-layout.has-panel,
  .tp-layout.has-panel.panel-zu { grid-template-columns: 1fr; }
}

/* --- Panel mit den offenen Anfragen ------------------------------------- */
.tp-panel {
  background: #fff;
  border: 1px solid var(--gray-300, #d0d0d0);
  border-radius: 8px;
  overflow: hidden;
  position: sticky;
  top: 60px;
  max-height: 78vh;
  display: flex;
  flex-direction: column;
}
/* Zugeklappt bleibt nur ein schmaler Streifen stehen — der Kalender bekommt
   die Breite. Die Spaltenbreite steuert .tp-layout.panel-zu (siehe oben). */
.tp-panel.is-zu { max-height: none; }
.tp-panel.is-zu .tp-panel-body,
.tp-panel.is-zu .tp-panel-fuss { display: none; }
.tp-panel.is-zu .tp-panel-kopf {
  flex-direction: column-reverse;
  gap: 10px;
  padding: 8px 2px;
  height: 100%;
}
.tp-panel.is-zu .tp-panel-titel {
  font-size: 11px;
  writing-mode: vertical-rl;
  letter-spacing: .5px;
  white-space: nowrap;
}
.tp-panel-total { display: none; }
.tp-panel.is-zu .tp-panel-total { display: inline-block; padding: 1px 5px; font-size: 10px; }

/* --- Kategorien im Panel ------------------------------------------------ */
.tp-panel-body { overflow-y: auto; flex: 1; }
.tp-kat + .tp-kat { border-top: 1px solid var(--gray-300, #d0d0d0); }
.tp-kat-kopf {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 7px 10px;
  background: #f2f5f8;
  border: 0;
  border-bottom: 1px solid #e3e9ef;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy, #2c3e50);
  text-align: left;
  cursor: pointer;
}
.tp-kat-kopf:hover { background: #e8eef4; }
.tp-kat-titel { flex: 1; }
.tp-kat-pfeil { font-size: 10px; width: 10px; color: #7a8a99; }
/* Eigene Hoehe pro Kategorie: sonst schiebt eine lange Liste die andere
   aus dem Blick, und genau das Nebeneinander ist ja der Zweck. */
.tp-kat-liste { max-height: 34vh; overflow-y: auto; }
.tp-kat.is-zu .tp-kat-liste { display: none; }
.tp-kat.is-zu .tp-kat-kopf { border-bottom: 0; }
.tp-kat-leer { padding: 10px; font-size: 12px; color: #9aa7b2; font-style: italic; }

/* „Termin zugesagt, aber niemand eingeteilt" — der stille Ausfall. */
.tp-anfrage.is-zusage-offen { background: #fdf6ec; }
.tp-op-warn { color: #c0392b; }
.tp-op-bereit { color: #27ae60; font-weight: 700; }

.tp-panel-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: var(--navy, #2c3e50);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}
.tp-panel-zahl {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 10px;
  background: var(--orange, #e67e22);
  color: #fff;
  font-size: 11px;
  text-align: center;
}
.tp-panel-toggle {
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
}
.tp-panel-fuss {
  padding: 7px 10px;
  border-top: 1px solid var(--gray-200, #e4e4e4);
  font-size: 11px;
  color: var(--gray-600, #666);
  background: var(--gray-100, #f7f7f5);
}

.tp-anfrage {
  display: grid;
  grid-template-columns: 4px auto 1fr;
  grid-template-areas: "farbe nr bez" "farbe meta meta";
  gap: 2px 7px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--gray-200, #e8e8e8);
  text-decoration: none !important;
  color: inherit !important;
  cursor: pointer;
}
.tp-anfrage:hover { background: var(--gray-100, #f5f5f3); }
.tp-anfrage.is-aktiv {
  background: #fff4e0;
  box-shadow: inset 3px 0 0 var(--orange, #e67e22);
}
.tp-anfrage-farbe { grid-area: farbe; border-radius: 2px; }
.tp-anfrage-nr {
  grid-area: nr;
  font-family: ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--navy, #2c3e50);
  white-space: nowrap;
}
.tp-anfrage-bez {
  grid-area: bez;
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tp-anfrage-meta { grid-area: meta; font-size: 11px; color: var(--gray-600, #666); }

/* --- Kopfleiste im Einplan-Modus ---------------------------------------- */
.tp-einplan-leiste {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  margin-bottom: 10px;
  background: #fff4e0;
  border: 1px solid var(--orange, #e67e22);
  border-left-width: 4px;
  border-radius: 6px;
  position: sticky;
  top: 52px;
  z-index: 40;
}
.tp-einplan-icon { font-size: 19px; line-height: 1.2; }
.tp-einplan-text { flex: 1; min-width: 0; }
.tp-einplan-titel { font-size: 14px; color: var(--navy, #2c3e50); }
.tp-einplan-sub { font-size: 12px; color: var(--gray-700, #444); margin-top: 2px; }
.tp-einplan-slots {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}
.tp-einplan-slots-label { font-size: 11px; font-weight: 700; color: var(--gray-700, #444); }
.tp-slot-btn {
  padding: 3px 9px;
  border: 1px solid var(--orange, #e67e22);
  border-radius: 12px;
  background: #fff;
  color: var(--orange-dark, #b8621b);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.tp-slot-btn:hover { background: var(--orange, #e67e22); color: #fff; }
.tp-slot-btn.is-top { background: var(--orange, #e67e22); color: #fff; }
.tp-slot-btn.is-top:hover { filter: brightness(1.08); }
.tp-slot-warn { opacity: .75; margin-left: 2px; }
.tp-einplan-aktionen {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  white-space: nowrap;
}
.tp-einplan-hint { font-size: 11px; color: var(--gray-600, #666); }

/* --- Zellen im Einplan-Modus -------------------------------------------- */
/* Freie Halbtage treten hervor, alles andere tritt zurück. Die Auftrags-
   farben bleiben erhalten — sie werden nur gedämpft. */
.tp-grid.tp-einplan-modus td.tp-cell { transition: opacity .12s, box-shadow .12s; }
.tp-grid.tp-einplan-modus td.tp-slot-belegt,
.tp-grid.tp-einplan-modus td.tp-slot-prov { opacity: .38; }
.tp-grid.tp-einplan-modus td.tp-slot-abwesend { opacity: .3; }
.tp-grid.tp-einplan-modus td.tp-slot-frei {
  background: #eafaf0 !important;
  box-shadow: inset 0 0 0 1px #a8ddb9;
  cursor: pointer;
}
.tp-grid.tp-einplan-modus td.tp-slot-frei:hover {
  background: #d3f3e0 !important;
  box-shadow: inset 0 0 0 2px var(--green, #27ae60);
}
.tp-grid.tp-einplan-modus td.tp-slot-gewaehlt,
.tp-grid.tp-einplan-modus td.tp-slot-gewaehlt:hover {
  background: var(--green, #27ae60) !important;
  box-shadow: inset 0 0 0 2px #1e8449;
}
.tp-grid.tp-einplan-modus td.tp-slot-gewaehlt::after {
  content: '✓';
  color: #fff;
  font-weight: 700;
  font-size: 15px;
}
/* Während des Ziehens keine Textauswahl */
.tp-grid.tp-einplan-modus { user-select: none; }

/* ==========================================================================
   Fill-Handle auf Touch-Geräten
   Der sichtbare Anfasser ist bewusst klein (10 px), damit er die Zelle nicht
   zustellt. Mit dem Finger ist das nicht treffbar — Richtwert sind ~44 px.
   Auf Touch-Geräten legen wir deshalb eine unsichtbare, grössere Trefferfläche
   darüber. Optisch ändert sich nichts.
   ========================================================================== */
@media (pointer: coarse) {
  .tp-fill-handle {
    width: 14px;
    height: 14px;
    opacity: 0.85;          /* kein :hover auf Touch — dauerhaft sichtbar */
  }
  .tp-fill-handle::before {
    content: '';
    position: absolute;
    /* nach aussen vergrösserte Fangfläche, bleibt unsichtbar */
    top: -14px;
    left: -14px;
    right: -6px;
    bottom: -6px;
  }
  /* Löschen-Kreuz ebenfalls besser treffbar machen */
  .tp-delete-handle::before {
    content: '';
    position: absolute;
    inset: -12px;
  }
}

/* ==========================================================================
   Verschieben ohne Ziehen (Tablet-tauglich)
   Zelle antippen → „Verschieben" → Zielzelle antippen.
   ========================================================================== */
.tp-move-quelle {
  outline: 3px dashed var(--orange, #e67e22) !important;
  outline-offset: -3px;
  animation: tpMovePuls 1.4s ease-in-out infinite;
}
@keyframes tpMovePuls {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.12); }
}
/* Während des Verschiebens sind alle Zellen mögliche Ziele */
body.tp-move-modus td.tp-cell { cursor: copy; }
body.tp-move-modus td.tp-cell:hover {
  outline: 2px solid var(--green, #27ae60);
  outline-offset: -2px;
}
/* Ziehen-Anfasser währenddessen ausblenden — sie würden nur stören */
body.tp-move-modus .tp-fill-handle,
body.tp-move-modus .tp-delete-handle { display: none; }

.tp-move-leiste {
  display: none;
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-radius: 24px;
  background: var(--navy, #2c3e50);
  color: #fff;
  box-shadow: 0 6px 22px rgba(0,0,0,0.28);
  z-index: 1200;
  font-size: 14px;
}
.tp-move-leiste.is-offen { display: flex; }
.tp-move-icon { font-size: 17px; }
.tp-move-text { white-space: nowrap; }
.tp-move-abbruch {
  border: 1px solid rgba(255,255,255,0.5);
  background: transparent;
  color: #fff;
  border-radius: 14px;
  padding: 4px 12px;
  font-size: 13px;
  cursor: pointer;
}
.tp-move-abbruch:hover { background: rgba(255,255,255,0.16); }

/* Auf Touch-Geräten die Leiste etwas grösser — sie wird mit dem Finger bedient */
@media (pointer: coarse) {
  .tp-move-leiste { font-size: 15px; padding: 12px 18px; bottom: 16px; }
  .tp-move-abbruch { padding: 7px 15px; font-size: 14px; }
}

/* ==========================================================================
   Kalenderzelle: Gewichtung der Angaben
   Wunsch des Montageleiters — beim Blick auf den Plan zählt, WAS montiert
   wird. Die Nummer schlägt man nach, die Bezeichnung liest man.
   ========================================================================== */
/* Bezeichnung einer Unterposition hervorheben */
.tp-cell-sub-pos {
  font-weight: 700;
  opacity: 1;
}

/* ---------------------------------------------------------------------------
   Funktions-Farben im Tagesplan (Migration 054)
   Spaltenkopf: kräftiger Balken + zarter Grundton. Leere Zellen: nur ein Hauch,
   damit belegte Zellen mit ihrer Auftragsfarbe weiterhin dominieren.
   --------------------------------------------------------------------------- */
.tp-grid th.tp-name-col-funktion {
  /* Hintergrund + Schriftfarbe kommen inline aus der Funktionsfarbe.
     Hier nur die Kinder, die sonst eine feste helle Farbe mitbringen. */
  border-top-left-radius: 3px;
  border-top-right-radius: 3px;
}
.tp-grid th.tp-name-col-funktion .tp-name-tel { color: inherit; opacity: .8; }
.tp-grid th.tp-name-col-funktion .tp-name-funktion { color: inherit; opacity: .72; }
.tp-grid th.tp-name-col-funktion .tp-drag-handle { color: inherit; }
.tp-name-funktion {
  font-size: 10px;
  line-height: 1.2;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--gray-700, #5a6672);
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tp-sort-btn.is-active {
  background: var(--navy, #1f3a5f);
  border-color: var(--navy, #1f3a5f);
  color: #fff;
}
/* Ohne Drag-Handle rückt der Name in der gruppierten Ansicht nicht mehr ein */
.tp-grid th.tp-name-col:not(:has(.tp-drag-handle)) { cursor: default; }
/* Farbpunkt vor dem Funktionsnamen (Mitarbeiter- und Funktions-Liste) */
.funktion-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: -1px;
  border: 1px solid rgba(0,0,0,.15);
}

/* Gruppen-Marke in der Auftragsliste — klammert Etappen derselben Sache (Migration 060) */
.pos-gruppe {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 9px;
  background: #2e86c118;
  color: #21618c;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .2px;
  vertical-align: 1px;
  white-space: nowrap;
}

/* ==========================================================================
   Oberflächen-Liste: Lack fehlt
   Statt eines eigenen Blocks über der Tabelle (der bei vielen Aufträgen eine
   zweite Liste zum Durchsuchen gewesen wäre) wird die betroffene Zeile selbst
   markiert. Zwei Stufen: gelb = wird bald gebraucht, rot = Termin bzw. die
   zugesagte Lieferung ist verstrichen.
   ========================================================================== */
tr.lack-fehlt > td { background: #fffaf0; }
tr.lack-fehlt.lack-akut > td { background: #fdf0ec; }
/* Linker Balken nur auf der ersten Zelle — sonst zieht sich der Rand durch
   die ganze Zeile und die Tabelle wirkt zerschnitten. */
tr.lack-fehlt > td:first-child { box-shadow: inset 3px 0 0 #e67e22; }
tr.lack-fehlt.lack-akut > td:first-child { box-shadow: inset 3px 0 0 #c0392b; }
.lack-warnung {
  display: inline-block;
  margin-right: 4px;
  color: #e67e22;
  font-size: 14px;
  line-height: 1;
  font-weight: 700;
  cursor: help;
}
tr.lack-akut .lack-warnung { color: #c0392b; }
/* „kein Liefertermin" ist eine Aussage über eine Lücke, kein Datum —
   deshalb blass und ohne Pillen-Hintergrund. */
.lagermat-termin.lagermat-termin-fehlt {
  background: transparent;
  color: #9aa7b2;
  font-weight: 500;
  font-style: italic;
}
.lagermat-termin.lagermat-termin-verstrichen {
  background: #fdecea;
  color: #c0392b;
}


/* ==========================================================================
   Mehrere CNC-Auftraege pro Position (Migration 069)
   Jeder Auftrag bekommt einen eigenen, leicht abgesetzten Block — sonst
   verschwimmen zwei Saetze gleicher Felder untereinander zu einer Wand.
   ========================================================================== */
.cnc-auftrag-liste { display: flex; flex-direction: column; gap: 10px; }
.cnc-auftrag-block {
  border: 1px solid #dbe3ea;
  border-left: 3px solid #7a8a99;
  border-radius: 6px;
  padding: 8px 10px 2px;
  background: #fbfcfd;
}
.cnc-auftrag-kopf {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.cnc-auftrag-titel { font-size: 12px; font-weight: 700; color: var(--navy, #2c3e50); flex: 1; }
.cnc-auftrag-fertig {
  font-size: 11px;
  font-weight: 700;
  color: #27ae60;
  background: #e7f6ee;
  border-radius: 10px;
  padding: 1px 8px;
}
.cnc-auftrag-weg {
  background: none;
  border: 0;
  font-size: 18px;
  line-height: 1;
  color: #b0bcc7;
  cursor: pointer;
  padding: 0 4px;
}
.cnc-auftrag-weg:hover { color: #c0392b; }
.cnc-add-btn { margin-top: 10px; }
/* Spalte fuer die kurze Marke in der CNC-Queue */
.cnc-td-marke { min-width: 90px; }

/* Mehrere Oberflaechen-Auftraege pro Position (Migration 070) — gleiche
   Darstellung wie bei der CNC, nur in der Farbe der Station. */
.ob-auftrag-liste { display: flex; flex-direction: column; gap: 10px; }
.ob-auftrag-block {
  border: 1px solid #e6dcea;
  border-left: 3px solid #9b7aa8;
  border-radius: 6px;
  padding: 8px 10px 2px;
  background: #fdfbfe;
}
.ob-auftrag-kopf { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ob-auftrag-titel { font-size: 12px; font-weight: 700; color: var(--navy, #2c3e50); flex: 1; }
.ob-auftrag-fertig {
  font-size: 11px;
  font-weight: 700;
  color: #27ae60;
  background: #e7f6ee;
  border-radius: 10px;
  padding: 1px 8px;
}
.ob-auftrag-weg {
  background: none;
  border: 0;
  font-size: 18px;
  line-height: 1;
  color: #c3b5c9;
  cursor: pointer;
  padding: 0 4px;
}
.ob-auftrag-weg:hover { color: #c0392b; }
.ob-add-btn { margin-top: 10px; }

/* Was fuer die ganze Position gilt (Lack, Lieferant) — abgesetzt, damit nicht
   der Eindruck entsteht, es liesse sich je Teil-Auftrag unterschiedlich setzen. */
.ob-position-teil {
  margin-top: 14px;
  padding-top: 10px;
  border-top: 1px dashed var(--gray-300, #d0d7de);
}
.ob-position-titel {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--gray-600, #777);
  font-weight: 700;
  margin-bottom: 8px;
}

/* Stations-Kaestchen, dessen Zustand berechnet wird (CNC mit eigenen
   CNC-Auftraegen). Nicht klickbar — ein feiner Punkt zeigt, dass es
   von woanders gesteuert wird. */
.step.step-berechnet { cursor: help; position: relative; }
.step.step-berechnet::after {
  content: "";
  position: absolute;
  right: 1px; bottom: 1px;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
}


/* ==========================================================================
   Fahrzeug-Kalender (Migration 071)
   Spalten = Poolfahrzeuge, Zeilen = Tage. Bewusst tageweise: die Ladezeiten
   der Transporte sind Freitext, ein Stundenraster haette nichts, woran es
   sich ausrichten koennte.
   ========================================================================== */
/* KEIN overflow auf dem Rahmen: sobald hier overflow-x steht, wird der Rahmen
   zum Scroll-Container und der klebende Tabellenkopf klebt an IHM statt am
   Fenster — beim Scrollen durch 50 Wochen waeren die Fahrzeugnamen dann weg.
   Auf schmalen Bildschirmen ist das seitliche Scrollen wichtiger als der
   klebende Kopf, dort schalten wir es wieder ein. */
.fz-wrap { overflow: visible; }
@media (max-width: 900px) {
  .fz-wrap { overflow-x: auto; }
}
.fz-kalender {
  width: 100%;
  border-collapse: collapse;
  background: var(--white, #fff);
  box-shadow: var(--shadow-sm);
  table-layout: fixed;
  /* Kein overflow und keine abgerundeten Ecken: overflow macht die Tabelle zum
     Scroll-Container, und dann klebt der Tabellenkopf an ihr statt am Fenster.
     Beim Scrollen durch 50 Wochen waeren die Fahrzeugnamen weg — das wiegt
     schwerer als runde Ecken. */
}
.fz-kalender th, .fz-kalender td {
  border: 1px solid var(--gray-200, #e4e8ec);
  vertical-align: top;
  padding: 6px 8px;
}
.fz-kopf { text-align: left; }
.fz-kopf-name { font-size: 13px; font-weight: 700; line-height: 1.2; }
.fz-kopf-nr { font-size: 11px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.fz-tag-col { width: 110px; background: var(--gray-100, #f4f6f8); }
.fz-tag-name  { font-size: 12px; font-weight: 700; color: var(--navy, #2c3e50); }
.fz-tag-datum { font-size: 12px; color: var(--gray-600, #777); font-family: ui-monospace, monospace; }
.fz-tag-heute {
  display: inline-block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #c0392b;
}
.fz-kalender tr.fz-heute td { background: #fffdf4; }
.fz-kalender tr.fz-wochenende .fz-tag-col { background: #eef1f4; }

.fz-zelle { min-height: 54px; height: 54px; cursor: pointer; }
.fz-zelle:hover { background: #f7fafc; }
/* Mehr als ein Eintrag am selben Tag. Wird markiert, nicht verboten: zwei
   kurze Fahrten am selben Tag sind normal. */
.fz-doppelt { background: #fff6ef !important; box-shadow: inset 3px 0 0 #e67e22; }
.fz-frei { font-size: 11px; color: #b6c0c9; }

.fz-eintrag {
  display: block;
  margin-bottom: 4px;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.3;
  text-decoration: none;
  color: inherit;
}
.fz-eintrag:last-child { margin-bottom: 0; }
.fz-eintrag-kopf { display: block; font-weight: 700; }
.fz-eintrag-zeile { display: block; font-size: 11px; color: var(--gray-600, #777); }
.fz-zeit { font-family: ui-monospace, monospace; }

.fz-eintrag-transport { background: #eaf1f7; border-left: 3px solid #4a6d8c; }
.fz-eintrag-transport:hover { background: #dfe9f2; }
.fz-eintrag-buchung   { background: #eef5ec; border-left: 3px solid #5b7f6b; cursor: pointer; }
.fz-eintrag-buchung[data-buchung]:hover { background: #e3eee0; }
.fz-mehrtaegig { border-left-style: double; border-left-width: 5px; }
.fz-mehrtag-hinweis {
  font-size: 10px;
  font-weight: 600;
  color: var(--gray-600, #777);
  background: #ffffffaa;
  border-radius: 8px;
  padding: 0 5px;
}
.fz-status { font-size: 11px; }

.fz-legende {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: center;
  font-size: 12px;
  color: var(--gray-600, #777);
  margin-bottom: 10px;
}
.fz-punkt {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 3px;
  vertical-align: middle;
  margin-right: 4px;
}
.fz-punkt-transport { background: #4a6d8c; }
.fz-punkt-buchung   { background: #5b7f6b; }

/* Stammdaten-Liste */
.fz-inaktiv { opacity: .55; }
.fz-inaktiv input, .fz-inaktiv select { font-style: italic; }
.fz-neu { background: var(--gray-100, #f4f6f8); }
.fz-farbwahl {
  width: 44px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--gray-300, #d0d7de);
  border-radius: 4px;
  background: none;
  cursor: pointer;
}

/* Warnung: zwischen Erfolg und Fehler — „gespeichert, aber schau nochmal hin". */
.alert-warning {
  background: #fff6e5;
  border: 1px solid #f0c987;
  color: #8a5a00;
}

/* Zuordnung zum eigenen Fahrzeug in der Transportliste */
.fz-listen-badge {
  font-size: 11px;
  color: var(--navy, #2c3e50);
  margin-top: 2px;
  white-space: nowrap;
}

/* --- Zeitfenster im Fahrzeug-Kalender (Migration 072) ------------------- */
/* Tagesleiste unter jedem Eintrag: zeigt, WANN am Tag das Fahrzeug weg ist.
   Ohne sie sieht eine Mittagsfahrt aus wie ein ganzer Tag. */
.fz-leiste {
  display: block;
  position: relative;
  height: 4px;
  margin-top: 3px;
  border-radius: 2px;
  background: #00000012;
}
.fz-balken {
  position: absolute;
  top: 0;
  height: 100%;
  border-radius: 2px;
}
.fz-balken-transport { background: #4a6d8c; }
.fz-balken-buchung   { background: #5b7f6b; }
.fz-balken-konflikt  { background: #e67e22; }
.fz-punkt-konflikt   { background: #e67e22; }

/* Zeit von–bis im Buchungsformular */
.fz-zeitwahl { display: flex; align-items: center; gap: 8px; }
.fz-zeitwahl input[type="time"] {
  /* Etwas breiter als noetig: Browser mit englischer Spracheinstellung haengen
     ein AM/PM an, das sonst abgeschnitten wird. */
  width: 132px;
  padding: 8px;
  border: 1px solid var(--gray-300, #d0d7de);
  border-radius: 6px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.fz-bis { font-size: 13px; color: var(--gray-600, #777); }
.fz-loeschzeit {
  background: none;
  border: 0;
  font-size: 18px;
  line-height: 1;
  color: #b0bcc7;
  cursor: pointer;
  padding: 0 4px;
}
.fz-loeschzeit:hover { color: #c0392b; }

.fz-schnellwahl { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.fz-schnellwahl button {
  background: var(--gray-100, #f4f6f8);
  border: 1px solid var(--gray-300, #d0d7de);
  border-radius: 12px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  color: var(--navy, #2c3e50);
}
.fz-schnellwahl button:hover { background: var(--orange-light, #fdf0e3); border-color: var(--orange, #e67e22); }

/* Stammdaten: der Speichern-Knopf lag bei neun Spalten rechts ausserhalb des
   Bildes. Die Aktions-Spalte bleibt jetzt beim seitlichen Scrollen stehen. */
.fz-sd-aktion {
  position: sticky;
  right: 0;
  background: var(--white, #fff);
  box-shadow: -6px 0 6px -6px #0000002e;
  z-index: 2;
}
thead .fz-sd-aktion { background: var(--gray-100, #f4f6f8); }
.fz-neu .fz-sd-aktion { background: var(--gray-100, #f4f6f8); }
.fz-inaktiv .fz-sd-aktion { background: var(--white, #fff); }

/* Kein Zeitfenster erfasst: der Eintrag belegt formal den ganzen Tag, aber das
   ist eine Annahme und kein Wissen. Schraffiert statt satt — damit man sieht,
   dass hier eine Zeit fehlt und nicht, dass das Fahrzeug wirklich zwölf
   Stunden unterwegs ist. */
.fz-balken-offen {
  background-image: repeating-linear-gradient(
    -45deg, #ffffff00 0 4px, #ffffff88 4px 8px);
  opacity: .75;
}
.fz-punkt-offen {
  background: #6b7a89;
  background-image: repeating-linear-gradient(
    -45deg, #ffffff00 0 2px, #ffffffaa 2px 4px);
}
.fz-offen-hinweis {
  font-size: 10px;
  font-weight: 600;
  color: var(--gray-600, #777);
  background: #00000010;
  border-radius: 8px;
  padding: 0 5px;
  margin-left: 4px;
}

/* --- Schnelle Erfassungsmaske + Sortieren (Fahrzeuge) ------------------- */
.fz-modal-kopf {
  font-size: 13px;
  font-weight: 700;
  color: var(--navy, #2c3e50);
  background: var(--gray-100, #f4f6f8);
  border-radius: 6px;
  padding: 6px 10px;
  margin: 0 0 12px;
}
/* Die Zeitvorgaben sind der Hauptweg — entsprechend gross und mit sichtbarer
   Auswahl. Wer eine krumme Zeit braucht, tippt sie darunter. */
.fz-schnellwahl-gross button { padding: 6px 14px; font-size: 13px; }
.fz-schnellwahl button.is-gewaehlt {
  background: var(--navy, #2c3e50);
  border-color: var(--navy, #2c3e50);
  color: #fff;
}
.fz-wer-zeile {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 13px;
  color: var(--gray-600, #777);
  margin: 12px 0 4px;
}
.fz-wer-zeile strong { color: var(--navy, #2c3e50); }
.fz-link {
  background: none;
  border: 0;
  padding: 0;
  font-size: 12px;
  color: var(--navy, #2c3e50);
  text-decoration: underline;
  cursor: pointer;
}
.fz-mehr > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--gray-600, #777);
  padding: 4px 0;
  list-style: none;
}
.fz-mehr > summary::before { content: '▸ '; }
.fz-mehr[open] > summary::before { content: '▾ '; }
.fz-mehr > summary::-webkit-details-marker { display: none; }

/* Sortieren der Fahrzeuge in den Stammdaten */
.fz-griff {
  cursor: grab;
  color: var(--gray-500, #98a4ae);
  text-align: center;
  user-select: none;
}
.fz-griff:active { cursor: grabbing; }
.fz-sd-zieht { opacity: .45; }
.fz-sd-ueber td { box-shadow: inset 0 2px 0 var(--orange, #e67e22); }

/* --- Stundenraster und lange Wochenansicht (Fahrzeuge) ----------------- */
/* Die Tabelle traegt --fz-stunden (Anzahl Stunden im Arbeitstag) und
   --fz-mittag (Position von 12 Uhr in Prozent). Beides kommt aus dem Model,
   damit das Raster mitwaechst, falls TAG_VON/TAG_BIS je anders gesetzt
   werden. */

/* Stundenskala im Spaltenkopf */
.fz-skala {
  position: relative;
  height: 14px;
  margin-top: 6px;
  border-top: 1px solid #ffffff59;
}
.fz-skala-strich {
  position: absolute;
  top: 0;
  width: 1px;
  height: 4px;
  background: #ffffff70;
}
.fz-skala-strich.ist-beschriftet { height: 6px; background: #ffffffb0; }
.fz-skala-strich.ist-mittag { height: 8px; width: 2px; background: #ffffffe0; }
.fz-skala-strich > i {
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  font-style: normal;
  font-size: 9px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  opacity: .8;
}

/* Die Leiste unter jedem Eintrag bekommt dieselben Stundenlinien wie die
   Skala oben — erst dadurch liest man ab, WANN das Fahrzeug weg ist. */
.fz-leiste {
  /* Die Leiste muss GENAU unter der Stundenskala im Spaltenkopf liegen, sonst
     zeigt die Skala auf die falsche Stunde. Der Eintrag hat links 3px Rand und
     6px Polsterung, rechts 6px — die holt sich die Leiste mit negativen
     Aussenabstaenden zurueck und ist damit so breit wie die Zelle. */
  margin-left: -9px;
  margin-right: -6px;
  height: 8px;
  background:
    /* Mittagslinie */
    linear-gradient(to right, #00000000 calc(var(--fz-mittag) - 1px),
                              #0000002e calc(var(--fz-mittag) - 1px),
                              #0000002e var(--fz-mittag),
                              #00000000 var(--fz-mittag)),
    /* Stundenlinien */
    repeating-linear-gradient(to right,
      #00000000 0,
      #00000000 calc(100% / var(--fz-stunden) - 1px),
      #00000016 calc(100% / var(--fz-stunden) - 1px),
      #00000016 calc(100% / var(--fz-stunden))),
    #00000010;
}
.fz-balken { border-radius: 3px; box-shadow: 0 0 0 1px #ffffff80 inset; }

/* Wochenzeile: Trenner und Schalter zugleich */
.fz-wochenzeile > td {
  background: var(--gray-100, #f4f6f8);
  border-top: 2px solid var(--gray-300, #d0d7de);
  padding: 5px 10px;
  font-size: 12px;
  color: var(--gray-600, #777);
  cursor: pointer;
  user-select: none;
}
/* Bewusst NICHT sticky: der Tabellenkopf klebt schon oben, und zwei
   uebereinander klebende Zeilen verdecken sich je nach Kopfhoehe gegenseitig.
   Die Wochenzeile kommt alle acht Zeilen — man sieht immer eine. */
.fz-wochenzeile:hover > td { background: #eef2f6; }
.fz-wochenzeile strong { color: var(--navy, #2c3e50); margin-right: 6px; }
.fz-wochen-pfeil { display: inline-block; width: 12px; color: var(--gray-500, #98a4ae); }
.fz-wochen-datum { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.fz-wochen-jetzt {
  margin-left: 10px;
  font-weight: 700;
  color: #c0392b;
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: .4px;
}
.fz-wochen-frei { margin-left: 10px; font-style: italic; color: var(--gray-500, #98a4ae); }
.fz-wochenzeile.ist-heute > td { background: #fff6e5; border-top-color: var(--orange, #e67e22); }

/* Beim Scrollen durch 50 Wochen müssen die Fahrzeugnamen stehen bleiben. */
.fz-kalender thead th { position: sticky; top: 0; z-index: 4; }
.fz-kalender thead th.fz-tag-col { z-index: 5; }

/* Zweite Reservation am selben Tag: sichtbarer Weg dorthin. Der leere Rand
   einer belegten Zelle ist nur ein paar Pixel hoch — den trifft niemand. */
.fz-plus {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 2px 0;
  border: 1px dashed var(--gray-300, #d0d7de);
  border-radius: 4px;
  background: none;
  color: var(--gray-500, #98a4ae);
  font-size: 11px;
  cursor: pointer;
}
.fz-plus:hover {
  border-color: var(--orange, #e67e22);
  border-style: solid;
  color: var(--orange, #e67e22);
  background: var(--orange-light, #fdf0e3);
}
/* In der freien Zelle genügt der Text — dort ist die ganze Fläche klickbar. */
.fz-zelle:hover .fz-frei { color: var(--orange, #e67e22); }

/* Nur-Ansicht: wer den Fahrzeug-Kalender sehen, aber nicht buchen darf, soll
   auch keinen Klickreiz bekommen. Die Zelle bleibt lesbar, verhaelt sich aber
   nicht wie ein Knopf. */
.fz-zelle.fz-nurlesen { cursor: default; }
.fz-zelle.fz-nurlesen:hover { background: transparent; }
.fz-zelle.fz-nurlesen:hover .fz-frei { color: #b6c0c9; }