:root {
  --brand: #2f6b43;
  --brand-dark: #234f31;
  --dark: #23201d;
  --bg: #f6f4f1;
  --green: #3c9a5f;
  --yellow: #d6a92c;
  --red: #c94f4f;
  --border: #e0dcd4;
}

* { box-sizing: border-box; }

/* Der Platz für den vertikalen Scrollbalken wird IMMER reserviert (auch wenn
   die Seite kurz genug ist, keinen zu brauchen) - sonst verschiebt sich das
   (zentrierte) Layout jedes Mal leicht, wenn der Balken je nach Tab-Inhalt
   ein- oder ausgeblendet wird. scrollbar-gutter ist die moderne Lösung,
   overflow-y: scroll das Fallback für ältere Browser ohne Unterstützung dafür.
*/
html {
  overflow-y: scroll;
  scrollbar-gutter: stable;
}

body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--dark);
  margin: 0;
  padding-top: 118px;
  padding-bottom: 64px;
}

header {
  background: var(--dark);
  color: var(--brand);
  padding: 14px 28px;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: 20px;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 70px;
  box-sizing: border-box;
  z-index: 100;
}
.header-left { grid-column: 2; justify-self: center; display: flex; align-items: center; gap: 14px; cursor: pointer; }
.header-left:hover h1 { opacity: 0.85; }
.header-logo { height: 42px; width: 42px; border-radius: 8px; object-fit: cover; }
header h1 {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
}
.header-right {
  grid-column: 3;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.05rem;
  color: #ffffff;
}
.header-separator { color: #ffffff; opacity: 0.6; }
.link-btn-light { color: #ffffff; text-decoration: none; }
.link-btn-light:hover { text-decoration: underline; }

/* --- Navigation / Tabs --- */
.tabs {
  /* Drei Spalten: "Rechnung offen" steht exakt mittig (unter Logo und Titel),
     links davon "Projekte", rechts alles Uebrige. */
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid var(--border);
  background: white;
  padding: 0 20px;
  position: fixed;
  top: 70px;
  left: 0;
  right: 0;
  height: 48px;
  box-sizing: border-box;
  z-index: 90;
}
.tab-btn {
  border: none;
  background: none;
  padding: 14px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  color: #777;
  border-bottom: 3px solid transparent;
}
.tab-btn.active {
  color: var(--dark);
  border-bottom-color: var(--brand);
}

.tab-item-with-badge { position: relative; }
.nav-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--red);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  vertical-align: 2px;
}
/* "Rechnung offen": solange Projekte enthalten sind, steht die Schrift
   zusätzlich in einem roten Kasten (nicht rund), um es deutlicher
   hervorzuheben als die normale Projekte-Zählung. */
.tab-btn-urgent {
  background: var(--red) !important;
  color: white !important;
  border-radius: 6px;
  padding-left: 12px !important;
  padding-right: 12px !important;
}
.tab-btn-urgent .nav-badge {
  background: white;
  color: var(--red);
}
.tabs-left { display: flex; justify-content: flex-end; align-items: center; }
.tabs-right { display: flex; justify-content: flex-start; align-items: center; }
.tabs-center { display: flex; justify-content: center; align-items: center; }
.nav-search {
  /* Gleiche Breite wie Logo + Titel im Kopfbereich */
  width: 260px;
  max-width: 100%;
  padding: 7px 14px;
  margin: 0 16px;
  border: 1px solid var(--border);
  border-radius: 16px;
  font-size: 0.85rem;
}

/* "Neues Projekt anlegen" mittig ueber der Projektkarte (gleiche Begrenzung
   wie das Master-Detail-Layout darunter). */
.collapsible-form-toggle {
  max-width: 1400px;
  margin-left: auto;
  margin-right: auto;
}

main { max-width: 1800px; margin: 0 auto; padding: 24px 32px 60px; }

.tab-panel { display: none; }
.tab-panel.active { display: block; }

h2 { font-weight: 600; }
.section-title { margin-top: 34px; }
.hint { color: #888; font-size: 0.85rem; margin: -6px 0 16px; }

/* --- Formulare / Tabellen (Mitarbeiter, Katalog) --- */
.inline-form {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
/* Checkboxen ausdruecklich ausnehmen - sonst werden sie auf 140px gedehnt
   und das Formular bricht unschoen um. */
.inline-form input:not([type="checkbox"]) {
  flex: 1;
  min-width: 140px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
}
.inline-form button, .btn {
  background: var(--brand);
  color: white;
  border: none;
  padding: 9px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
}
.inline-form button:hover, .btn:hover { opacity: 0.9; }
.btn-small { padding: 7px 12px; font-size: 0.83rem; }
.btn-secondary { background: #8a8477; }

table {
  width: 100%;
  /* Bewusst "separate" statt "collapse" und KEIN overflow:
     - overflow (auch hidden) erzeugt einen eigenen Scroll-Bereich und macht
       position:sticky bei den Kopfzellen wirkungslos - genau deshalb blieb die
       Kopfzeile bisher nicht stehen.
     - bei border-collapse:collapse verschwinden die Rahmen fixierter Zellen. */
  border-collapse: separate;
  border-spacing: 0;
  background: white;
  border-radius: 8px;
}
/* Runde Ecken ohne overflow: über die äußeren Zellen */
table thead tr:first-child th:first-child { border-top-left-radius: 8px; }
table thead tr:first-child th:last-child { border-top-right-radius: 8px; }
table tbody tr:last-child td:first-child { border-bottom-left-radius: 8px; }
table tbody tr:last-child td:last-child { border-bottom-right-radius: 8px; }
table tbody tr:last-child td { border-bottom: none; }
th, td {
  text-align: left;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
th { background: #fafaf8; font-weight: 600; }

.link-btn {
  background: none;
  border: none;
  color: var(--red);
  cursor: pointer;
  font-size: 0.85rem;
}

.badge-ok {
  background: #e7f6ec;
  color: var(--green);
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.78rem;
  margin-right: 6px;
}
.badge-muted {
  background: #f0f0ee;
  color: #999;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.78rem;
  margin-right: 6px;
}

/* --- Login-Seite --- */
.login-body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding-top: 0;
  padding-bottom: 0;
  background: var(--dark);
}
.login-box {
  background: white;
  padding: 36px 32px;
  border-radius: 10px;
  width: 100%;
  max-width: 360px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.25);
}
.login-box h1 { font-size: 1.15rem; margin: 0 0 2px; }
.login-logo { display: block; height: 72px; width: 72px; margin: 0 auto 14px; border-radius: 12px; object-fit: cover; }
.login-box .subtitle { color: #888; font-size: 0.85rem; margin: 0 0 18px; }
.login-box input {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  box-sizing: border-box;
  font-size: 0.9rem;
}
.login-box button {
  width: 100%;
  background: var(--brand);
  color: white;
  border: none;
  padding: 11px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.95rem;
}
.login-box .msg {
  background: #fdecec;
  color: #a33;
  padding: 9px 12px;
  border-radius: 6px;
  margin-bottom: 14px;
  font-size: 0.85rem;
}

/* --- Fehleranzeige --- */
.error-banner {
  display: none;
  background: #fdecec;
  border: 1px solid #e3a3a3;
  color: #a33;
  padding: 12px 16px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-size: 0.88rem;
}
.error-banner div { margin-bottom: 4px; }
.error-banner div:last-child { margin-bottom: 0; }

/* --- Neues-Projekt-Formular (einklappbar) --- */
.collapsible-form-toggle { text-align: center; margin-bottom: 20px; }
.collapsible-form-toggle .btn { font-size: 1rem; padding: 12px 28px; }

.project-form-box {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 20px;
  margin-bottom: 28px;
}
.project-form-box.hidden { display: none; }
.inline-form.hidden { display: none; }
.project-form-box .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  align-items: end;
  margin-bottom: 16px;
}
.project-form-box .form-row input,
.project-form-box .form-row select {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
}
.project-form-box .form-row textarea,
.project-edit-form .form-row textarea {
  grid-column: 1 / -1;
  width: 100%;
  box-sizing: border-box;
  min-width: 140px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
  resize: vertical;
}
.project-form-box .form-col { margin-bottom: 16px; }
.project-form-box .form-col > strong { display: block; margin-bottom: 8px; font-size: 0.9rem; }

.date-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: #666;
}
.date-label input[type="date"] {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.88rem;
}

/* =========================================================
   Dropdown-Mehrfachauswahl (ms-dropdown)
   ========================================================= */
.ms-dropdown { position: relative; display: inline-block; }
.ms-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 200px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--dark);
}
.ms-toggle:hover { border-color: var(--brand); }
.ms-caret { color: #999; font-size: 0.75rem; }
.ms-panel {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  padding: 8px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 45;
  min-width: 220px;
}
.ms-panel.open { display: block; }
.ms-dropdown.align-right .ms-panel { left: auto; right: 0; }
.ms-dropdown.align-right .ms-toggle { margin-left: auto; }
.ms-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  font-size: 0.85rem;
  border-radius: 5px;
  white-space: nowrap;
  cursor: pointer;
}
.ms-option:hover { background: var(--bg); }

/* =========================================================
   Projekt-Karteikarten
   ========================================================= */
.project-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.project-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 22px 26px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  scroll-margin-top: 134px;
}

/* Umrandung je nach Typ des Auftraggebers */
.project-card.client-type-private { border: 3px solid #6b6b6b; }
.project-card.client-type-property-mgmt { border: 3px solid #1f5c3a; }
.project-card.client-type-business { border: 3px solid #7a4fa0; }
.project-card.client-type-gewoge { border: 3px solid #7ec8e3; }

.project-card-top {
  text-align: center;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
  position: relative;
}
.project-card-top-header { }
.project-customer { font-weight: 700; font-size: 1.7rem; }
.project-address { font-weight: 400; color: #777; font-size: 1.1rem; margin-top: 4px; }
.edit-toggle-btn {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 0.8rem;
  color: var(--brand);
}

.project-edit-form {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.project-edit-form.hidden { display: none; }
.project-edit-form .form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  align-items: end;
}
.project-edit-form .form-row input[type="text"],
.project-edit-form .form-row input[type="tel"],
.project-edit-form .form-row input[type="email"],
.project-edit-form .form-row input[type="date"],
.project-edit-form .form-row select {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
}
.edit-form-actions { display: flex; gap: 8px; }

.project-card-main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 320px);
  gap: 32px;
  align-items: start;
}
.project-tasks-col { min-width: 0; }
.project-info-col {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-align: left;
  background: var(--bg);
  border-radius: 10px;
  padding: 18px 20px;
}
.info-line { font-size: 0.85rem; color: #555; }
.info-description-label { margin-top: 6px; }
.info-description-label strong { font-size: 0.88rem; color: var(--dark); }
.info-description {
  white-space: pre-wrap;
  text-align: left;
  background: white;
  border-radius: 6px;
  padding: 12px 14px;
  max-width: 260px;
  min-width: 200px;
  font-size: 0.92rem;
  line-height: 1.5;
  box-sizing: border-box;
}

.info-section {
  padding-top: 10px;
  margin-top: 10px;
  border-top: 1px solid var(--border);
}
.info-section:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: none;
}
.info-progress { font-weight: 700; color: var(--dark); font-size: 1rem; margin-bottom: 4px; }
.info-employees-label { margin: 4px 0 -2px; }
.info-employees-names { font-weight: 500; color: var(--dark); max-width: 220px; }
.project-info-col .ms-toggle { min-width: 160px; padding: 6px 10px; font-size: 0.8rem; }

.project-countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  background: #fdf6e8;
  border: 1px solid #ecd8a0;
  border-radius: 8px;
  padding: 10px 16px;
  font-size: 0.85rem;
  text-align: center;
  color: #7a5f1a;
}
.project-countdown .countdown-seconds { font-weight: 700; }
.project-countdown .link-btn { color: var(--red); }

.task-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.task-row {
  display: flex;
  gap: 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fdfcfb;
}

.task-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.task-row-main { display: flex; align-items: center; gap: 10px; }
.task-title-heading {
  flex: 1;
  margin: 0;
  text-align: left;
  font-weight: 700;
  font-size: 1rem;
  color: var(--dark);
}
.task-row-main select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 5px; font-size: 0.85rem; }

.task-remarks-input {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 0.82rem;
  font-style: italic;
  color: #777;
}
.task-remarks-input:focus, .task-remarks-input:hover {
  border-color: var(--border);
  background: white;
  font-style: normal;
}
.task-remarks-input::placeholder { font-style: italic; }

.task-completed-by-row { display: flex; align-items: center; gap: 10px; }
.task-completed-by-row .hint { margin: 0; white-space: nowrap; }
.task-completed-by-row .ms-toggle { min-width: 160px; padding: 5px 10px; font-size: 0.8rem; }

.task-not-executed-row { display: flex; align-items: flex-start; gap: 10px; }
.task-not-executed-row .hint { margin: 4px 0 0; white-space: nowrap; }
.task-not-executed-reason {
  flex: 1;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 0.83rem;
  font-family: inherit;
  resize: vertical;
}

.task-done-info { font-size: 0.78rem; color: #888; }

.status-dot { width: 12px; height: 12px; border-radius: 50%; flex-shrink: 0; }
.status-OPEN { background: var(--red); }
.status-PARTIAL { background: var(--yellow); }
.status-DONE { background: var(--green); }
.status-NOT_EXECUTED { background: #8a6fb0; }

.task-add-section {
  margin-top: 12px;
  padding-top: 14px;
  border-top: 1px dashed var(--border);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.task-add-catalog { display: flex; flex-direction: column; gap: 6px; }
.catalog-add-row { display: flex; gap: 8px; align-items: center; }
.add-task-form { display: flex; gap: 8px; }
.add-task-form input { flex: 1; padding: 7px 10px; border: 1px solid var(--border); border-radius: 5px; }

.project-card-footer-center {
  display: flex;
  justify-content: center;
  margin-top: 18px;
}

.project-card-bottom {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.project-button-row {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 20px 32px;
}
.btn-action {
  flex: 0 1 180px;
  text-align: center;
  padding: 10px 0;
  font-size: 0.9rem;
  font-weight: 600;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: white;
}
.btn-edit { background: #d6a92c; }
.btn-edit:hover { background: #c49a24; }
.btn-delete { background: var(--red); }
.btn-delete:hover { background: #b23e3e; }
.btn-complete { background: var(--green); }
.btn-complete:hover { background: #328a54; }
.btn-reactivate { background: #2f6fb0; }
.btn-reactivate:hover { background: #275c92; }
.btn-duplicate { background: #7a4fa0; }
.btn-duplicate:hover { background: #653f87; }
.btn-action:disabled {
  background: #cfcac2;
  cursor: not-allowed;
  opacity: 0.85;
}

@keyframes project-card-flash {
  0%, 100% { box-shadow: 0 1px 4px rgba(0,0,0,0.04); }
  30% { box-shadow: 0 0 0 3px var(--brand); }
}
.project-card-highlight { animation: project-card-flash 1.5s ease; }

@media (max-width: 720px) {
  .project-card-main { grid-template-columns: 1fr; }
  .project-info-col { width: 100%; align-items: flex-start; text-align: left; }
  .ms-dropdown.align-right .ms-panel { left: 0; right: auto; }
  .ms-dropdown.align-right .ms-toggle { margin-left: 0; }
}

/* --- Fester Footer mit Statistik und Migrate-Link --- */
.app-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 48px;
  background: var(--dark);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24px;
  font-size: 13px;
  z-index: 100;
  box-sizing: border-box;
}
.footer-stats { display: flex; gap: 18px; color: #ffffff; }
.footer-stats .stat-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; }
.footer-stats .stat-dot.active { background: var(--brand); }
.footer-stats .stat-dot.completed { background: #8a8477; }
.footer-stats .stat-dot.invoice { background: var(--red); }
.footer-link { color: #ffffff; text-decoration: none; }
.footer-link:hover { text-decoration: underline; }

/* --- Aufgaben-Positionskreis --- */
/* Nummer schlicht wie in der Materialliste - kein farbiger Kreis */
.task-position {
  width: 44px;
  flex-shrink: 0;
  text-align: center;
  color: #777;
  font-size: 0.85rem;
  font-variant-numeric: tabular-nums;
  padding-top: 2px;
}

/* --- Bestätigungs-Dialog (z.B. Statuswechsel auf "Offen") --- */
.modal-overlay {
  position: fixed;
  /* Bewusst einzeln statt "inset: 0" - aeltere Safari-Versionen (iOS < 14.5)
     kennen die Kurzform nicht; der Dialog haette dort keine Groesse und
     erschiene nicht bzw. blockierte Klicks. */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
}
.modal-box {
  background: white;
  border-radius: 10px;
  padding: 24px 26px;
  max-width: 420px;
  width: 90%;
  box-shadow: 0 12px 40px rgba(0,0,0,0.25);
}
.modal-box p { margin: 0 0 14px; font-size: 0.92rem; line-height: 1.5; }
.modal-countdown { font-size: 0.8rem; color: #888; margin-bottom: 18px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* --- Zweispaltiges "Neues Projekt anlegen"-Formular mit Live-Zusammenfassung --- */
.project-form-columns {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  margin-top: 6px;
}
.project-form-left { flex: 1.3; min-width: 0; }
.project-form-right {
  flex: 1;
  min-width: 0;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
}
.project-form-right > strong { display: block; margin-bottom: 8px; font-size: 0.9rem; }
.project-form-summary { font-size: 0.87rem; }
.summary-line { padding: 2px 0; color: var(--dark); }
.summary-line.hint { padding: 2px 0; }
.summary-header { font-weight: 600; font-size: 0.8rem; color: #888; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 2px; }
.summary-blank { height: 14px; }

@media (max-width: 720px) {
  .project-form-columns { flex-direction: column; }
}

/* --- Footer-Aktionen (Backup, Wiederherstellung) --- */
.footer-actions { display: flex; align-items: center; gap: 18px; }
.footer-link-btn {
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
}

/* --- Gefahren-Bestätigung (z.B. Datenbank vollständig löschen) --- */
.modal-danger .modal-countdown { color: #a33; font-weight: 600; }
.btn-danger {
  background: var(--red);
  color: white;
}
.btn-danger:disabled {
  background: #e0b8b8;
  cursor: not-allowed;
  opacity: 0.8;
}

/* --- Restore-Formular im Modal --- */
#restore-form { display: flex; flex-direction: column; gap: 14px; }
#restore-form input[type="file"] {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px;
  font-size: 0.85rem;
}
.restore-mode-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 0.87rem;
  background: var(--bg);
  border-radius: 8px;
  padding: 10px 12px;
}
.restore-mode-options label { display: flex; align-items: center; gap: 8px; }

/* --- Prioritäts-Auswahl je Aufgabe --- */
.priority-select { width: 58px; padding: 6px 4px; border: 1px solid var(--border); border-radius: 5px; font-size: 0.8rem; }

/* --- Priorität (nur Anzeige, wird im Katalog vergeben) --- */
.priority-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--bg);
  border: 1px solid var(--border);
  color: #777;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  flex-shrink: 0;
}
.quantity-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #eef4fb;
  border: 1px solid #bcd6ec;
  color: #2f6fb0;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 10px;
  flex-shrink: 0;
  white-space: nowrap;
}
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #555;
  white-space: nowrap;
}

/* --- E-Mail-Link im Infofeld --- */
.info-email-link { color: var(--brand); text-decoration: none; }
.info-email-link:hover { text-decoration: underline; }

/* --- Mitarbeiterliste im Infofeld: untereinander --- */
.info-employee-name { }

/* --- Nur-Lese-Anzeige bei erledigten Projekten --- */
.status-badge-text {
  font-size: 0.8rem;
  color: #888;
  background: var(--bg);
  padding: 4px 10px;
  border-radius: 6px;
}

/* --- Priorität im Aufgaben-Katalog editierbar --- */
.template-priority-field { width: 56px; padding: 6px 4px; border: 1px solid var(--border); border-radius: 5px; font-size: 0.8rem; }
.template-priority-letter-field { width: 52px; padding: 6px 4px; border: 1px solid var(--border); border-radius: 5px; font-size: 0.8rem; margin-left: 4px; }

/* --- Mitarbeiter-Liste (reduzierte Zeile + aufklappbare Bereiche) --- */
.employee-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.employee-row-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 18px;
}
.employee-row-main {
  display: flex;
  align-items: center;
  gap: 12px;
}
.employee-name { font-weight: 600; font-size: 1rem; min-width: 160px; }
.employee-role-badge, .employee-number-badge {
  font-size: 0.78rem;
  color: #666;
  background: var(--bg);
  border: 1px solid var(--border);
  padding: 3px 9px;
  border-radius: 10px;
}
.employee-exit-date-badge {
  font-size: 0.78rem;
  color: #a33;
  background: #fbeaea;
  border: 1px solid #f0c9c9;
  padding: 3px 9px;
  border-radius: 10px;
}
.employee-invoice-badge {
  font-size: 0.78rem;
  color: #2f6fb0;
  background: #eef4fb;
  border: 1px solid #bcd6ec;
  padding: 3px 9px;
  border-radius: 10px;
}
.employee-row-buttons { margin-left: auto; display: flex; gap: 10px; }

.employee-projects-panel,
.employee-edit-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.employee-projects-panel.hidden,
.employee-edit-panel.hidden {
  display: none;
}
.employee-project-list { margin: 0; padding-left: 20px; }
.employee-project-list li { margin-bottom: 4px; }
.employee-project-list a { color: var(--brand); text-decoration: none; }
.employee-project-list a:hover { text-decoration: underline; }

.employee-edit-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}
.employee-edit-grid label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: #666;
}
.employee-edit-grid select,
.employee-edit-grid input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.88rem;
}
.employee-username-label { min-width: 220px; }
.employee-login-status { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.employee-edit-footer {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  text-align: right;
}

/* =========================================================
   RESPONSIVE / MOBILGERÄTE
   ========================================================= */
@media (max-width: 720px) {
  /* Header: alles in EINER Zeile (Logo, Titel, Benutzer, Abmelden), damit
     moeglichst viel Platz fuer die Projektkarte selbst bleibt. */
  header {
    height: 52px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    gap: 8px;
    row-gap: 0;
  }
  .header-left { justify-self: start; gap: 8px; min-width: 0; }
  .header-right {
    margin-left: auto;
    justify-self: end;
    font-size: 0.78rem;
    gap: 6px;
    min-width: 0;
    white-space: nowrap;
  }
  .header-logo { height: 26px; width: 26px; }
  header h1 {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .header-right span:first-child {
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 26vw;
  }

  /* Navigation: horizontal scrollbar statt Umbruch/Abschneiden */
  .tabs {
    top: 52px;
    height: 44px;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }
  .tab-btn { padding: 10px 12px; font-size: 0.85rem; flex-shrink: 0; }
  /* Auf dem Handy untereinander: Suchfeld unter den Reitern, volle Breite */
  .tabs { display: flex; flex-wrap: nowrap; }
  .tabs-left, .tabs-right { display: flex; }
  .tabs-center { flex-shrink: 0; }
  .nav-search { width: 150px; }

  /* Footer: zwei Zeilen (Statistik oben, Aktionen unten) */
  .app-footer {
    /* Auf schmalen Bildschirmen bewusst NICHT mehr fest positioniert: Bei
       ein-/ausblendender Adressleiste (typisch bei iOS Safari) kann ein
       "position: fixed"-Element durch die Browser-eigene Umrechnung des
       sichtbaren Bereichs zeitweise ausserhalb des tatsaechlich nutzbaren
       Fensters landen - dann ist es zwar im Quelltext vorhanden, aber ohne
       Scrollen nicht erreichbar. Im normalen Seitenfluss ist die Fusszeile
       stattdessen immer erreichbar, einfach durch Herunterscrollen. */
    position: static;
    height: auto;
    margin-top: 24px;
    padding: 14px 12px calc(14px + env(safe-area-inset-bottom));
    flex-direction: column;
    justify-content: center;
    gap: 6px;
  }
  .footer-stats { gap: 12px; font-size: 0.75rem; }
  .footer-actions { gap: 12px; font-size: 0.75rem; flex-wrap: wrap; justify-content: center; }

  /* Fixe Höhen von Header/Navigation/Footer haben sich geändert - Platz anpassen */
  body { padding-top: 96px; padding-bottom: 0; }
  .project-card { scroll-margin-top: 150px; }

  main { padding: 16px 12px 40px; }

  /* Formulare: Felder untereinander statt nebeneinander */
  .project-form-box .form-row { flex-direction: column; }
  .project-form-columns { flex-direction: column; }
  .catalog-add-row { flex-direction: column; align-items: stretch; }
  .inline-form { flex-direction: column; align-items: stretch; }
  .inline-form input, .inline-form select { min-width: 0; }

  /* Projekt-Karte */
  .project-card { padding: 16px 14px; }
  .project-customer { font-size: 1.3rem; }
  .project-address { font-size: 0.95rem; }
  .edit-toggle-btn { position: static; display: block; margin: 10px auto 0; }

  /* Buttons unten: untereinander, volle Breite */
  .project-button-row { flex-direction: column; align-items: stretch; gap: 12px; }
  .btn-action { flex: none; width: 100%; }

  /* Aufgabenzeile: darf umbrechen statt Inhalt abzuschneiden */
  .task-row { flex-wrap: wrap; }
  .task-row-main { flex-wrap: wrap; row-gap: 8px; }
  .task-row-main .task-title-heading { flex-basis: 100%; }

  /* Mitarbeiterzeile: Buttons untereinander */
  .employee-row-main { flex-wrap: wrap; }
  .employee-row-buttons { margin-left: 0; width: 100%; flex-direction: column; }
  .employee-row-buttons .btn { width: 100%; }
  .employee-edit-grid { flex-direction: column; align-items: stretch; }
  .employee-username-label { min-width: 0; }

  /* Dropdowns nicht breiter als der Bildschirm */
  .ms-toggle { min-width: 0; width: 100%; }
  .ms-panel { min-width: 0; width: 100%; max-width: 90vw; }
  .project-info-col .ms-toggle { width: auto; }

  /* Dialoge */
  .modal-box { width: 92%; padding: 18px 16px; }
  .modal-actions { flex-direction: column-reverse; }
  .modal-actions .btn { width: 100%; }

  #restore-form .restore-mode-options { font-size: 0.85rem; }
}

/* --- Rechnung-erfassen-Dialog --- */
#invoice-form { display: flex; flex-direction: column; gap: 14px; }
.invoice-form-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  color: #666;
}
.invoice-form-label input {
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
}

.employee-picker-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
  margin: 10px 0;
  padding: 4px 2px;
}
.employee-picker-option {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

/* =========================================================
   MASTER-DETAIL-LAYOUT (Rechnung offen / Projekte / Archiv)
   ========================================================= */
/* Drei Spalten: die Projektkarte steht mittig auf der Seite, die Projektliste
   links daneben. Die dritte Spalte ist ein Platzhalter gleicher Breite - nur
   dadurch liegt die Karte wirklich in der Seitenmitte und nicht rechts davon. */
.master-detail-layout {
  display: grid;
  /* Mitte: die Projektkarte, so breit wie moeglich. Links die Projektliste,
     rechts ein gleich breiter Platzhalter - nur so steht die Karte wirklich
     in der Seitenmitte und nicht rechts davon. */
  grid-template-columns: 260px minmax(0, 1fr) 260px;
  gap: 24px;
  align-items: start;
  justify-content: center;
  margin: 0 auto;
}
.master-detail-layout::after {
  content: '';
}
.master-list-col {
  position: sticky;
  top: 134px;
}
.master-list {
  max-height: calc(100vh - 220px);
  overflow-y: auto;
  scrollbar-gutter: stable;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: white;
  display: flex;
  flex-direction: column;
  /* Innenabstand, damit die Rahmen der Eintraege (Hover/Auswahl) nicht von
     den abgerundeten Ecken der Liste angeschnitten werden. */
  padding: 6px;
  gap: 4px;
}
.master-list-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  width: 100%;
  padding: 10px 12px;
  background: none;
  /* Immer 2px transparenter Rahmen: so springt beim Hover/Auswaehlen nichts,
     weil sich nur die Farbe aendert, nicht die Groesse. */
  border: 2px solid transparent;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  flex-shrink: 0;
}
/* Feine Trennlinie zwischen den Eintraegen (ausser vor dem ersten) */
.master-list-item + .master-list-item { box-shadow: 0 -1px 0 var(--border) inset; }
.master-list-item:hover { background: var(--bg); }
.master-list-item.active {
  background: var(--bg);
  border-color: var(--brand-dark);
}

/* Mouseover: leichte Einfärbung in der Farbe des Auftraggeber-Typs.
   Ausgewähltes Projekt: umlaufender Rahmen in derselben Farbe, aber
   2 Töne dunkler (ersetzt den vorherigen grünen Markierungsbalken). */
.master-list-item.client-type-private:hover { background: rgba(107,107,107,0.12); }
.master-list-item.client-type-private.active { border-color: #4d4d4d; }
.master-list-item.client-type-property-mgmt:hover { background: rgba(31,92,58,0.12); }
.master-list-item.client-type-property-mgmt.active { border-color: #123d26; }
.master-list-item.client-type-business:hover { background: rgba(122,79,160,0.12); }
.master-list-item.client-type-business.active { border-color: #5c3878; }
.master-list-item.client-type-gewoge:hover { background: rgba(126,200,227,0.18); }
.master-list-item.client-type-gewoge.active { border-color: #4fa8c9; }
.master-list-customer { font-weight: 600; font-size: 0.88rem; color: var(--dark); }
.master-list-address { font-size: 0.78rem; color: #777; }
.master-list-deadline { font-size: 0.75rem; color: #a3701f; margin-top: 2px; }

.task-summary-list { display: flex; flex-direction: column; gap: 8px; }
.task-summary-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: #fdfcfb;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.task-summary-main { display: flex; align-items: center; gap: 10px; }
.task-summary-title { font-weight: 600; font-size: 0.88rem; flex: 1; }
.task-summary-meta { font-size: 0.78rem; color: #777; padding-left: 21px; }
.task-summary-status { font-size: 0.82rem; color: #666; }

.detail-col { min-width: 0; }

@media (max-width: 900px) {
  .master-detail-layout { grid-template-columns: 1fr; }
  .master-detail-layout::after { display: none; }
  .master-list-col { width: 100%; position: static; }
  .master-list { max-height: 240px; }
}

/* Ansprechpartner: Felder erst nach Klick auf "Bearbeiten" beschreibbar */
.contact-field[readonly] {
  background: transparent;
  border-color: transparent;
  cursor: default;
  color: var(--dark);
}
.contact-row-editing .contact-field {
  background: white;
  border-color: var(--brand);
}
.contact-actions { display: flex; gap: 8px; align-items: center; white-space: nowrap; }


/* Katalog-Formular: Checkbox steht direkt bei dem Feld, auf das sie sich
   bezieht (statt in einer eigenen Zeile weiter unten). */
.form-row-inline {
  display: flex !important;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.form-row-inline .checkbox-label { flex: 0 0 auto; }
.form-row-inline input[type="text"] { flex: 0 1 260px; }

/* Konto-Menü (Name, Web-App, Abmelden) mittig in der Fußzeile - gleiche
   Gestaltung wie in der Web-App, damit beide Oberflächen gleich wirken. */
.footer-account {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  white-space: nowrap;
}
.footer-account span { color: #ffffff; }
footer { position: fixed; }

@media (max-width: 720px) {
  .footer-account {
    position: static;
    transform: none;
    justify-content: center;
    /* Umbruch zulassen - sonst wird alles links und rechts abgeschnitten. */
    white-space: normal;
    flex-wrap: wrap;
    gap: 4px 10px;
    max-width: 100%;
    text-align: center;
  }
}

/* Allgemeine Ausblend-Regel. Bisher gab es sie nur für einzelne Elementarten -
   dadurch blieb z.B. der Materialbereich der Projektkarte sichtbar, obwohl die
   Klasse gesetzt wurde. */
.hidden { display: none !important; }

.project-material-section { margin-top: 18px; }
.project-material-panel {
  margin-top: 12px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.project-material-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.project-material-table th {
  text-align: left;
  font-size: 0.78rem;
  color: #888;
  font-weight: 600;
  padding: 4px 8px 6px 0;
}
.project-material-table td { padding: 5px 8px 5px 0; font-size: 0.88rem; vertical-align: middle; }
.project-material-table input[type="text"] {
  width: 90px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.88rem;
}
.pm-unit { color: #777; font-size: 0.85rem; margin-left: 6px; }
/* Zwei gleich aufgebaute Zeilen untereinander: Auswahl und Schaltflaeche
   jeweils gleich breit, damit beide Bereiche identisch wirken. */
.project-material-add {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.pm-add-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 200px;
  gap: 10px;
  align-items: center;
}
.project-material-add select {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.88rem;
  background: white;
}
.pm-add-row .btn { width: 100%; justify-content: center; }

@media (max-width: 720px) {
  .pm-add-row { grid-template-columns: 1fr; }
}

/* Materialliste in der Projektkarte: Bezeichnung mit Luft zum Rand,
   Menge rechtsbündig (damit die Zahlen untereinander stehen), Farbe mittig. */
.project-material-table th.pm-col-name,
.project-material-table td.pm-col-name {
  padding-left: 10px;
  /* Die Bezeichnung nimmt den restlichen Platz - dadurch ruecken Menge,
     Farbe und Status nach rechts, jeweils mit Abstand dazwischen. */
  width: auto;
}
.project-material-table th.pm-col-qty,
.project-material-table td.pm-col-qty {
  white-space: nowrap;
  width: 1%;
  padding-left: 28px;
  padding-right: 0;
}
/* Eingabefelder stehen exakt untereinander, die Einheit linksbuendig daneben. */
.pm-qty-wrap { display: inline-flex; align-items: center; gap: 8px; }
.project-material-table td.pm-col-qty input {
  width: 80px;
  text-align: right;
  flex: 0 0 80px;
}
.pm-unit {
  display: inline-block;
  width: 44px;
  text-align: left;
  color: #777;
  font-size: 0.85rem;
  margin-left: 0;
}
.project-material-table th.pm-col-color,
.project-material-table td.pm-col-color {
  text-align: center;
  width: 1%;
  white-space: nowrap;
  padding-left: 28px;
}
/* Etwas mehr Platz; längere Angaben werden abgeschnitten, sind aber per
   Mouseover (title-Attribut) vollständig lesbar. */
.project-material-table td.pm-col-color input {
  width: 150px;
  text-overflow: ellipsis;
}
.project-material-table td.pm-col-color input { text-align: center; }


/* Checkboxen im Formular behalten ihre natuerliche Groesse */
.inline-form .checkbox-label { flex: 0 0 auto; white-space: nowrap; }
.inline-form .checkbox-label input[type="checkbox"] { flex: 0 0 auto; min-width: 0; width: 16px; height: 16px; }
/* Versionsnummer in der Fußzeile: gleiche Schriftfarbe wie die übrigen Links */
.footer-version { color: #ffffff; }

/* Aufgabenliste und Materialliste als getrennte Kästen in der Projektkarte */
.card-section {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.card-section-title {
  margin: 0 0 12px;
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.project-material-section { margin-top: 0; }
.project-material-panel {
  margin-top: 0;
  background: transparent;
  border: none;
  border-radius: 0;
  padding: 0;
}

/* Materialliste: Statusspalte bekommt Platz, Entfernen als rotes X */
.project-material-table th.pm-col-status,
.project-material-table td.pm-col-status {
  /* Nicht mehr breiter als noetig, dafuer klarer Abstand nach links. */
  width: 1%;
  white-space: nowrap;
  line-height: 1.35;
  padding-left: 28px;
}
.project-material-table th.pm-col-del,
.project-material-table td.pm-col-del {
  width: 34px;
  text-align: center;
  padding-right: 0;
}
.link-btn-danger {
  color: var(--red);
  font-size: 1rem;
  line-height: 1;
  padding: 2px 6px;
}
.link-btn-danger:hover { color: #a63c3c; }

/* Klassifizierungsnummer der Materialien */
.project-material-table th.pm-col-nr,
.project-material-table td.pm-col-nr {
  width: 52px;
  text-align: center;
  color: #777;
  font-variant-numeric: tabular-nums;
  padding-left: 6px;
}

#material-classification { flex: 0 0 90px !important; min-width: 90px !important; text-align: center; }


/* Tabellenköpfe in den Katalogen bleiben beim Scrollen stehen */
/* Kopfzeile bleibt beim Scrollen unterhalb des Hauptmenüs stehen.
   118px = Kopfbereich (70px) + Navigation (48px) */
#template-table thead th,
#material-table thead th,
#contact-table thead th {
  position: sticky;
  top: 118px;
  z-index: 5;
  /* Deckend, damit durchscrollende Zeilen nicht durchscheinen */
  background: #efece7;
  box-shadow: 0 1px 0 var(--border);
}

@media (max-width: 720px) {
  /* Auf dem Handy sind Kopfbereich und Navigation flacher (52px + 44px) */
  #template-table thead th,
  #material-table thead th,
  #contact-table thead th { top: 96px; }
}

/* Prioritätsnummer im Aufgaben-Katalog */
#template-priority-number { max-width: 200px; }

/* =========================================================
   MATERIAL-KOMBIS - übersichtliche Kartendarstellung
   ========================================================= */
#combo-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 14px;
  margin-top: 14px;
}
.combo-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}
.combo-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  /* Feste Höhe, damit die Titelzeilen aller Karten auf einer Linie liegen -
     auch wenn ein Name umbricht. */
  height: 46px;
}
.combo-name {
  font-weight: 700;
  font-size: 0.95rem;
  flex: 1;
  min-width: 0;
  /* Lange Namen abschneiden statt umbrechen, damit die Höhe stabil bleibt */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.combo-count {
  font-size: 0.75rem;
  color: #777;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px 9px;
  white-space: nowrap;
}
.combo-items { list-style: none; margin: 0; padding: 0; }
.combo-item {
  display: grid;
  grid-template-columns: 46px 1fr auto;
  align-items: center;
  gap: 10px;
  padding: 9px 14px;
  font-size: 0.88rem;
  border-bottom: 1px solid var(--border);
}
.combo-item:last-child { border-bottom: none; }
.combo-item-nr {
  color: #888;
  font-variant-numeric: tabular-nums;
  text-align: center;
  font-size: 0.82rem;
}
.combo-item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.combo-item-unit { color: #888; font-size: 0.82rem; white-space: nowrap; }
.combo-empty { margin: 0; padding: 14px; }

/* Nummer vorn in der Aufgabenliste - gleiche Optik wie in der Materialliste */
.task-position { font-variant-numeric: tabular-nums; }


/* Titel und Anlege-Button über der Auswahlliste */
.master-list-title {
  margin: 0 0 12px;
  font-size: 1.05rem;
  font-weight: 700;
}
.master-list-toggle { margin-bottom: 12px; }
.master-list-toggle .btn { width: 100%; }

/* Bereichs-Überschrift mittig (Mitarbeiter) */
.section-title-center { text-align: center; }

/* Anlege-Formular steht jetzt in der Detailspalte und wirkt wie eine Karte */
.detail-col > .project-form-box { margin-bottom: 20px; }

/* =========================================================
   KONFIGURATIONSBEREICH - Menü links, Inhalt rechts
   ========================================================= */
.konfig-bereichstitel {
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: 0.02em;
}
.konfig-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}
.konfig-menue-liste { display: flex; flex-direction: column; gap: 4px; }
.konfig-menue-punkt {
  display: block;
  padding: 10px 14px;
  border-radius: 8px;
  color: var(--dark);
  text-decoration: none;
  font-size: 0.92rem;
  border: 1px solid transparent;
}
.konfig-menue-punkt:hover { background: #fff; border-color: var(--border); }
.konfig-menue-punkt.aktiv {
  background: #fff;
  border-color: var(--border);
  font-weight: 700;
}
.konfig-inhalt .card-section { margin-bottom: 0; }
.konfig-inhalt .update-meldung {
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 10px;
  font-size: 0.92rem;
  line-height: 1.5;
}
.konfig-inhalt .update-ok { background: #e8f4ec; border: 1px solid var(--green); }
.konfig-inhalt .update-fehler { background: #fbeaea; border: 1px solid var(--red); }
.konfig-inhalt .update-warnung { background: #fff8e6; border: 1px solid var(--yellow); }
.konfig-inhalt .update-hinweis { color: #777; font-size: 0.85rem; line-height: 1.55; margin: 0 0 14px; }
/* Ergebnis der Datenbank-Aktualisierung: wird direkt in den Meldungs-Kasten
   geschrieben - kein eigenes Fenster, keine feste Höhe, die Größe richtet
   sich einfach nach dem Inhalt. */
.migrate-inhalt { margin-top: 10px; }
.migrate-inhalt:empty { margin-top: 0; }
.migrate-abschnitt-titel { font-weight: 600; margin-bottom: 4px; }
.migrate-abschnitt-abstand { margin-top: 14px; }
.migrate-liste { margin: 0 0 4px; padding-left: 20px; }
.migrate-liste li { margin-bottom: 3px; }

@media (max-width: 900px) {
  .konfig-layout { grid-template-columns: 1fr; gap: 18px; }
}
/* Etage/Wohnung in der Projektliste - eigene Zeile, damit sie nicht
   in der Adresszeile untergeht. */
.master-list-floor { font-size: 0.78rem; color: #555; font-weight: 600; }


/* Drucken-Schaltfläche - gleiche Form wie die übrigen, rosa hinterlegt */
.btn-druck {
  background: #e8a2bb;
  color: #23201d;
  border: 1px solid #d885a5;
  font-weight: 700;
}
.btn-druck:hover { background: #e18fac; }

/* Titel über den Projektlisten mittig */
.master-list-title { text-align: center; }


/* =========================================================
   AUFKLAPPMENÜ IN DER NAVIGATION (Kataloge)
   ========================================================= */
.tab-dropdown { position: relative; display: inline-flex; }
.tab-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 170px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 0 0 8px 8px;
  border-top: none;
  box-shadow: 0 6px 16px rgba(0,0,0,.10);
  display: none;
  flex-direction: column;
  z-index: 60;
  overflow: hidden;
}
/* Geöffnet wird ueber die Klasse "offen" - dadurch laesst sich sicherstellen,
   dass immer nur EIN Menue gleichzeitig offen ist. Ohne diese Steuerung blieb
   ein per Tastatur fokussiertes Menue offen, waehrend das andere aufklappte,
   und beide ueberlagerten sich. */
.tab-dropdown.offen .tab-dropdown-menu { display: flex; }
.tab-dropdown-menu .tab-btn {
  width: 100%;
  text-align: left;
  border-radius: 0;
  padding: 11px 14px;
  border-bottom: 1px solid var(--border);
}
.tab-dropdown-menu .tab-btn:last-child { border-bottom: none; }
.tab-dropdown-menu .tab-btn:hover { background: var(--bg); }
/* Der Hauptknopf zeigt deutlich, welcher Unterpunkt gerade gewählt ist:
   dunkel hinterlegt und mit dem Namen des Unterpunkts als Zusatz. */
.tab-dropdown.hat-aktiven .tab-dropdown-btn {
  background: var(--green);
  color: #fff;
}
/* Der gewählte Punkt im geöffneten Menü */
.tab-dropdown-menu .tab-btn.active {
  background: var(--green);
  color: #fff;
  font-weight: 700;
}
/* Der Platz für das Häkchen wird IMMER freigehalten - sonst würden die
   Einträge beim Wechsel der Seite seitlich verspringen. */
.tab-dropdown-menu .tab-btn::before {
  content: '\2713';
  display: inline-block;
  width: 1.1em;
  visibility: hidden;
}
.tab-dropdown-menu .tab-btn.active::before { visibility: visible; }
.info-projektnummer { font-weight: 700; font-variant-numeric: tabular-nums; }

/* =========================================================
   KATALOGE - beide Tabellen gleich aufgebaut
   Nr. | Bezeichnung | Einheit | (eigene Optionen) | Aktiv | Löschen
   ========================================================= */
#template-table th.kat-nr,      #material-table th.kat-nr,
#template-table td.kat-nr,      #material-table td.kat-nr      { width: 96px; }
#template-table th.kat-einheit, #material-table th.kat-einheit,
#template-table td.kat-einheit, #material-table td.kat-einheit { width: 140px; }
#template-table th.kat-opt,     #material-table th.kat-opt,
#template-table td.kat-opt,     #material-table td.kat-opt     { width: 116px; text-align: center; }
#template-table th.kat-aktiv,   #material-table th.kat-aktiv,
#template-table td.kat-aktiv,   #material-table td.kat-aktiv   { width: 64px; text-align: center; }
#template-table th.kat-loeschen, #material-table th.kat-loeschen,
#template-table td.kat-loeschen, #material-table td.kat-loeschen { width: 48px; text-align: center; }
/* Bezeichnung und Einheit haben in beiden Katalogen dieselbe feste Breite.
   Die Füllspalte dahinter nimmt den restlichen Platz auf - dadurch stehen
   Optionen, Aktiv und Löschen in beiden Tabellen bündig am rechten Rand. */
#template-table th.kat-name,    #material-table th.kat-name,
#template-table td.kat-name,    #material-table td.kat-name    { width: 420px; }
#template-table th.kat-fueller, #material-table th.kat-fueller,
#template-table td.kat-fueller, #material-table td.kat-fueller { width: auto; }
/* Alle Textfelder in beiden Katalogen sehen gleich aus und sind gleich hoch -
   vorher hatte das Aufgaben-Titelfeld eine eigene, flachere Formatierung,
   wodurch die Zeilen unterschiedlich hoch waren. */
#template-table tbody input[type="text"],
#material-table tbody input[type="text"] {
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: white;
  font-family: inherit;
  font-size: 0.88rem;
  box-sizing: border-box;
}
#template-table tbody input[type="text"]:focus,
#material-table tbody input[type="text"]:focus {
  outline: none;
  border-color: var(--brand);
}
#template-table tbody td.kat-nr input, #material-table tbody td.kat-nr input {
  width: 74px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
/* Löschen: rotes, fettes X */
#template-table .link-btn-danger, #material-table .link-btn-danger {
  font-size: 1.05rem;
  font-weight: 700;
}


/* =========================================================
   HAUPTNAVIGATION - Stoßkante genau in der Seitenmitte
   ========================================================= */
.tabs-left   { justify-content: flex-end; }
.tabs-center { display: flex; align-items: center; }
.tabs-right  { justify-content: flex-start; }

/* Alle Navigationspunkte einzeilig */

/* =========================================================
   ÄNDERUNGSVERLAUF
   ========================================================= */
.footer-version-link { color: #ffffff; text-decoration: none; }
.footer-version-link:hover { text-decoration: underline; }

.changelog-seite { max-width: 820px; margin: 0 auto; padding-bottom: 40px; }
.changelog-einleitung { color: #666; font-size: 0.92rem; margin: 0 0 20px; }
.changelog-eintrag {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 14px;
}
.changelog-eintrag.ist-aktuell { border-color: var(--green); border-width: 2px; }
.changelog-kopf {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.changelog-version {
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
  background: var(--dark);
  border-radius: 6px;
  padding: 3px 10px;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.changelog-eintrag.ist-aktuell .changelog-version { background: var(--green); }
.changelog-titel { margin: 0; font-size: 1rem; font-weight: 600; flex: 1; }
.changelog-marke {
  font-size: 0.75rem;
  color: var(--green);
  border: 1px solid var(--green);
  border-radius: 10px;
  padding: 2px 9px;
  white-space: nowrap;
}
.changelog-punkte { margin: 0; padding-left: 20px; }
.changelog-punkte li { font-size: 0.92rem; line-height: 1.55; margin-bottom: 5px; }
.changelog-punkte li:last-child { margin-bottom: 0; }
.changelog-fuss { margin-top: 24px; }


/* =========================================================
   HAUPTNAVIGATION - abgerundete Flächen mit Luft zum Rand
   ========================================================= */
/* Alle Punkte bekommen dieselbe Form; der Abstand außen sorgt dafür,
   dass rund um die farbige Fläche ein Streifen Hintergrund sichtbar bleibt. */
.tabs .tab-btn {
  border-radius: 8px;
  /* Der Aussenabstand laesst rund um die farbige Flaeche einen Streifen
     Hintergrund stehen - dadurch wirkt sie nicht randlos angeklebt. */
  margin: 6px 3px;
  padding: 9px 14px;
  border-bottom: none;
  white-space: nowrap;
  transition: background-color .12s ease, color .12s ease;
}
.tabs .tab-btn:hover { background: #eef4f0; color: var(--dark); }
.tabs .tab-btn.active,
.tabs .tab-btn.active:hover {
  background: var(--green);
  color: #fff;
  border-bottom: none;
}
/* Der Hauptknopf eines Aufklappmenüs verhält sich genauso */
.tab-dropdown.hat-aktiven .tab-dropdown-btn { border-radius: 8px; }
.tab-dropdown-btn:hover { background: #eef4f0; }
.tab-dropdown.hat-aktiven .tab-dropdown-btn:hover { background: var(--green); }

/* Einträge im aufgeklappten Menü: ebenfalls abgerundet und mit Rand */
.tab-dropdown-menu { padding: 6px; border-radius: 10px; }
.tab-dropdown-menu .tab-btn {
  border-radius: 6px;
  margin: 2px 0;
  border-bottom: none;
  white-space: nowrap;
  text-align: left;
  justify-content: flex-start;
}
.tab-dropdown-menu .tab-btn:hover { background: #eef4f0; }
.tab-dropdown-menu .tab-btn.active,
.tab-dropdown-menu .tab-btn.active:hover { background: var(--green); color: #fff; }

/* Zusatzaufgaben in der Projektkarte */
.extra-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.extra-table th { font-size: 0.8rem; }
.extra-table td { font-size: 0.9rem; }
.extra-table th.extra-std, .extra-table td.extra-std { width: 90px; white-space: nowrap; }
.extra-table th.extra-wer, .extra-table td.extra-wer { width: 190px; }
.extra-notiz-block { margin-top: 12px; }
.extra-notiz-text { white-space: pre-wrap; font-size: 0.92rem; margin-top: 4px; }

/* Werkzeug-Katalog: gleiche Spaltenbreiten wie die übrigen Kataloge */
#tool-table th.kat-nr, #tool-table td.kat-nr { width: 96px; }
#tool-table th.kat-name, #tool-table td.kat-name { width: 420px; }
#tool-table th.kat-fueller, #tool-table td.kat-fueller { width: auto; }
#tool-table th.kat-aktiv, #tool-table td.kat-aktiv { width: 64px; text-align: center; }
#tool-table th.kat-loeschen, #tool-table td.kat-loeschen { width: 48px; text-align: center; }
#tool-table tbody input[type="text"] {
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: white;
  font-family: inherit;
  font-size: 0.88rem;
  box-sizing: border-box;
}
#tool-table tbody input[type="text"]:focus { outline: none; border-color: var(--brand); }
#tool-table tbody td.kat-nr input { width: 74px; text-align: center; font-variant-numeric: tabular-nums; }
#tool-table .link-btn-danger { font-size: 1.05rem; font-weight: 700; }
#tool-table thead th {
  position: sticky;
  top: 118px;
  z-index: 5;
  background: #efece7;
  box-shadow: 0 1px 0 var(--border);
}
@media (max-width: 720px) { #tool-table thead th { top: 96px; } }
#tool-classification { flex: 0 0 120px !important; min-width: 120px !important; text-align: center; }

/* =========================================================
   ÜBERSCHRITTENE DEADLINE
   ========================================================= */
/* Im Infokasten: fett und rot unterlegt */
.info-line.info-deadline-ueberschritten {
  font-weight: 700;
  color: #8a2a2a;
  background: #fbeaea;
  border: 1px solid var(--red);
  border-radius: 6px;
  padding: 4px 8px;
  margin: 2px 0;
}
/* In der Projektauswahl links: dauerhaft rot umrandet - in jedem Zustand.
   Die Regeln fuer den Auftraggeber-Typ setzen bei ausgewaehlten Eintraegen
   ebenfalls eine Rahmenfarbe und sind gleich genau gefasst; deshalb werden
   hier alle Zustaende ausdruecklich aufgefuehrt, damit Rot immer gewinnt. */
.master-list-item.deadline-ueberschritten,
.master-list-item.deadline-ueberschritten:hover,
.master-list-item.deadline-ueberschritten.active,
.master-list-item.deadline-ueberschritten.active:hover,
.master-list-item.client-type-private.deadline-ueberschritten.active,
.master-list-item.client-type-property-mgmt.deadline-ueberschritten.active,
.master-list-item.client-type-business.deadline-ueberschritten.active,
.master-list-item.client-type-gewoge.deadline-ueberschritten.active {
  border-color: var(--red);
}
.master-list-item.deadline-ueberschritten .master-list-deadline {
  color: var(--red);
  font-weight: 700;
}

/* Formular "Name der Anwendung" in der Konfiguration */
.konfig-name-form { display: flex; gap: 12px; align-items: flex-end; margin-top: 6px; }
.konfig-name-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  color: #666;
  flex: 1;
  max-width: 360px;
}
.konfig-name-form input[type="text"] {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
}

/* =========================================================
   PROJEKTFOTOS
   ========================================================= */
.photo-upload-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.photo-upload-label { cursor: pointer; }
.photo-upload-status { font-size: 0.85rem; }
.photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 14px;
}
.photo-item {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  background: white;
}
.photo-item a { display: block; background: #efece7; }
.photo-item img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.photo-comment-field {
  display: block;
  width: 100%;
  box-sizing: border-box;
  border: none;
  border-top: 1px solid var(--border);
  padding: 8px 10px;
  font-size: 0.85rem;
  font-family: inherit;
}
.photo-comment-field:focus { outline: none; background: var(--bg); }
.photo-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 10px 8px;
  font-size: 0.78rem;
  color: #777;
}

/* Trennlinie im Konfigurationsbereich, z.B. vor "Nur Migration durchführen" */
.konfig-trenner { border: none; border-top: 1px solid var(--border); margin: 22px 0; }

/* =========================================================
   FOTO-LIGHTBOX (Großansicht statt neuem Tab)
   ========================================================= */
.photo-open-btn {
  display: block;
  width: 100%;
  padding: 0;
  border: none;
  background: #efece7;
  cursor: zoom-in;
}
.photo-open-btn img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.photo-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 13, 11, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 40px 70px;
  box-sizing: border-box;
}
.photo-lightbox-img {
  max-width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: 4px;
}
.photo-lightbox-close {
  position: absolute;
  top: 16px;
  right: 20px;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  padding: 8px;
}
.photo-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.12);
  border: none;
  color: #fff;
  font-size: 2.4rem;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
}
.photo-lightbox-nav:hover { background: rgba(255, 255, 255, 0.22); }
.photo-lightbox-prev { left: 16px; }
.photo-lightbox-next { right: 16px; }
.photo-lightbox-caption {
  margin-top: 16px;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 0.95rem;
  max-width: 70%;
  text-align: center;
}
@media (max-width: 720px) {
  .photo-lightbox-overlay { padding: 20px; }
  .photo-lightbox-nav { width: 42px; height: 42px; font-size: 1.9rem; }
}
.info-werktage { color: #777; font-weight: normal; font-size: 0.85rem; }

/* =========================================================
   STATISTIK
   ========================================================= */
.statistik-kachel-reihe {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 24px;
}
.statistik-kachel {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px;
  text-align: center;
}
.statistik-zahl { font-size: 1.9rem; font-weight: 700; color: var(--brand); }
/* Beschriftung steht ueber der Zahl und ist bewusst kraeftig gesetzt -
   vorher war sie klein und blass und dadurch schwer zu lesen. */
.statistik-label {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 6px;
  line-height: 1.25;
}
.statistik-abschnitt { margin: 22px 0 8px; font-size: 0.95rem; }
.statistik-liste { margin: 0 0 4px; padding-left: 22px; }
.statistik-liste li { margin-bottom: 5px; display: flex; justify-content: space-between; gap: 12px; max-width: 480px; }
.statistik-liste-flach { list-style: none; padding-left: 0; }
.statistik-liste-flach li { display: block; max-width: none; }
.statistik-anzahl { color: #777; white-space: nowrap; }

/* Logo-Vorschau in der Konfiguration */
.konfig-logo-vorschau {
  background: repeating-conic-gradient(#eee 0% 25%, #fff 0% 50%) 0 0 / 16px 16px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
  display: inline-block;
  margin: 6px 0 14px;
}
.konfig-logo-bild { display: block; max-height: 80px; max-width: 260px; }

/* =========================================================
   KONTO-LINKS NEBEN "PROJEKTE" (frueher in der Fusszeile)
   ========================================================= */
.nav-account {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  color: #666;
  white-space: nowrap;
}
.nav-account .header-separator { color: var(--border); opacity: 1; }
.nav-account .link-btn-light { color: var(--brand); }
.nav-account .link-btn-light:hover { text-decoration: underline; }

/* Kleinere Schrift auf schmalen Bildschirmen, damit die Kontozeile neben
   "Projekte" nicht zu breit wird. Ein vollstaendiger Umbau der Navigation
   fuers Handy ist ein eigenes, groesseres Vorhaben (siehe README). */
@media (max-width: 900px) {
  .nav-account { font-size: 0.72rem; gap: 5px; }
}

/* =========================================================
   AUFMASS
   ========================================================= */
.aufmass-kopf { margin-bottom: 18px; }
.aufmass-kopf h2 { margin: 0 0 4px; }
.master-list-nr { color: #888; font-weight: 600; margin-right: 4px; }

.aufmass-zimmer-karte {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 16px 18px;
  margin-bottom: 16px;
}
.aufmass-zimmer-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.aufmass-zimmer-kopf h3 { margin: 0; }

.aufmass-aufgaben-reihe {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}
.aufmass-aufgabe {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 12px;
}
.aufmass-aufgabe-menge {
  width: 80px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  margin-left: auto;
}

.aufmass-altbelag-label {
  display: block;
  font-size: 0.82rem;
  color: #666;
  margin-bottom: 14px;
}
.aufmass-altbelag-select {
  display: block;
  width: 100%;
  max-width: 360px;
  margin-top: 6px;
  padding: 6px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  min-height: 140px;
}

.aufmass-masse-block { margin-top: 4px; }
.aufmass-masse-titel { font-size: 0.82rem; color: #666; margin-bottom: 6px; }
.aufmass-masse-liste { display: flex; flex-direction: column; gap: 6px; }
.aufmass-mass-zeile { display: flex; align-items: center; gap: 8px; }
.aufmass-mass-feld {
  width: 110px;
  padding: 7px 9px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
}
.aufmass-mass-trenner { font-weight: 700; color: #999; }

.aufmass-neues-zimmer-form { display: flex; gap: 10px; margin: 10px 0 20px; max-width: 480px; }
.aufmass-neues-zimmer-form input {
  flex: 1;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
}
.aufmass-abschluss-zeile { text-align: center; margin-top: 10px; }

.aufmass-flaechen-liste { list-style: none; margin: 0 0 10px; padding: 0; }
.aufmass-flaechen-liste li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.aufmass-flaechen-summe { font-size: 0.95rem; padding-top: 6px; border-top: 2px solid var(--border); }

/* =========================================================
   DREISTRICH-MENÜ IN DER NAVIGATION (ersetzt die Fußzeile)
   ========================================================= */
.nav-burger-wrapper { position: relative; display: flex; align-items: center; }
.nav-burger-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 34px;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  cursor: pointer;
  padding: 0;
}
.nav-burger-btn span { display: block; width: 18px; height: 2px; background: var(--dark); border-radius: 1px; }
.nav-burger-btn:hover { background: var(--bg); }

.nav-burger-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 240px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.14);
  padding: 8px;
  z-index: 300;
}
.nav-burger-menu.offen { display: block; }
.nav-burger-benutzer {
  font-weight: 700;
  font-size: 0.9rem;
  padding: 6px 10px 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.nav-burger-stats {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  color: #666;
  padding: 4px 10px 10px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 6px;
}
.nav-burger-menu a,
.nav-burger-menu button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  border: none;
  background: none;
  border-radius: 6px;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--dark);
  text-decoration: none;
  cursor: pointer;
}
.nav-burger-menu a:hover,
.nav-burger-menu button:hover { background: var(--bg); }
.nav-burger-abmelden { color: var(--red) !important; }

/* Ohne Fußzeile braucht der Seiteninhalt unten keinen reservierten Platz mehr. */
body { padding-bottom: 24px; }
.aufmass-mengen-untertitel { font-size: 0.85rem; font-weight: 700; margin: 14px 0 4px; }

/* Rücklink zur Verwaltung ganz oben im Einstellungsmenü */
.konfig-menue-zurueck { font-weight: 600; }
.konfig-menue-trenner { border: none; border-top: 1px solid var(--border); margin: 8px 0; }
.konfig-backup-form { display: flex; flex-direction: column; gap: 12px; max-width: 460px; }
.konfig-backup-form label { font-size: 0.85rem; color: #666; }
.konfig-backup-form input[type="file"] { display: block; margin-top: 6px; }
.restore-mode-options { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; }
.konfig-backup-form .btn { align-self: flex-start; }
.nav-burger-trenner { border: none; border-top: 1px solid var(--border); margin: 6px 4px; }

/* Statushinweis "Aufmaß geöffnet/abgeschlossen" - immer an derselben Stelle,
   nur Farbe und Text wechseln, damit sich beim Auf-/Abschließen nichts im
   Layout verschiebt. */
.aufmass-status-hinweis,
.aufmass-gesperrt-hinweis {
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 auto 16px;
  max-width: 560px;
  font-weight: 600;
  text-align: center;
  border: 1px solid;
  border-left-width: 5px;
}
.aufmass-status-gesperrt,
.aufmass-gesperrt-hinweis {
  background: #fdf6e3;
  border-color: #e0c97a;
  border-left-color: #d9a441;
  color: #6b5312;
}
.aufmass-status-offen {
  background: #eaf6ec;
  border-color: #a8d9b0;
  border-left-color: #4caf6a;
  color: #285c37;
}

/* Auf schmalen Bildschirmen darf die Navigation waagerecht gescrollt werden -
   sonst rutschen Punkte aus dem Bild und sind gar nicht mehr antippbar. */
@media (max-width: 900px) {
  /* Auf schmalen Bildschirmen bricht die Navigation um, statt zu scrollen.
     Waagerechtes Scrollen hatte einen unangenehmen Nebeneffekt: Der dafür
     nötige Überlauf schnitt die Aufklappmenüs ab, sodass die Unterpunkte
     zwar geöffnet, aber nicht sichtbar waren. Umbrechen vermeidet das
     ganz ohne Sonderpositionierung. */
  .tabs {
    grid-template-columns: auto;
    height: auto;
    padding: 6px 10px;
  }
  /* Alle drei Gruppen bleiben sichtbar und fliessen in EINE umbrechende
     Zeile - nichts wird ausgeblendet, sonst waeren "Rechnung offen" und
     "Kataloge" auf dem Handy gar nicht mehr erreichbar. */
  .tabs-left, .tabs-center, .tabs-right {
    display: contents;
  }
  .tabs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
  }
  .tabs .tab-btn { padding: 8px 10px; font-size: 0.85rem; }
  /* Der Seiteninhalt beginnt tiefer, weil die Navigation nun höher sein kann. */
  body { padding-top: 150px; }
}

/* Eigenständiges Aufmaß: Kopfmaske und Liste */
.aufmass-neu-btn { width: 100%; margin-bottom: 12px; }
.aufmass-kopfmaske { margin-bottom: 18px; }
.aufmass-kopf-felder {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 12px;
  margin-bottom: 12px;
}
.aufmass-kopf-felder label,
.aufmass-bemerkung-label { display: block; font-size: 0.82rem; color: #666; }
.aufmass-kopf-felder input,
.aufmass-bemerkung-label textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 9px 11px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
}
.aufmass-bemerkung-label textarea { resize: vertical; }
/* Angemeldeter Name im Titel - etwas zurückhaltender als der Name der Anwendung */
.titel-benutzer { font-weight: 400; opacity: 0.75; }

/* =========================================================
   KATALOG-TABELLEN AUF DEM HANDY
   =========================================================
   Die Tabellen haben feste Spaltenbreiten (u.a. 420px für die Bezeichnung).
   Auf einem schmalen Bildschirm wurde dadurch besonders die zweite Spalte
   unleserlich zusammengequetscht. Statt die Spalten zu verkleinern, darf
   die ganze Tabelle jetzt seitlich gescrollt werden - so bleibt jeder Wert
   in voller Breite lesbar. */
@media (max-width: 900px) {
  /* WICHTIG: Die Tabelle bleibt eine Tabelle. Setzt man sie auf "display:
     block", verliert sie ihr Spaltenlayout und die Spalten fallen erst recht
     zusammen. Stattdessen wird der umgebende Bereich seitlich scrollbar und
     die Tabelle bekommt eine Mindestbreite. */
  #templates, #materials, #tools {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  #template-table,
  #material-table,
  #tools-table {
    min-width: 820px;
  }
  #template-table tbody input[type="text"],
  #material-table tbody input[type="text"],
  #tools-table tbody input[type="text"] {
    font-size: 0.9rem;
  }
}

/* Zwei Backup-Download-Optionen nebeneinander */
.backup-download-optionen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 10px;
}
.backup-download-karte {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  background: var(--bg);
}
.backup-download-karte h4 { margin: 0 0 6px; font-size: 0.95rem; }
.backup-download-karte .hint { margin-bottom: 10px; }

/* Rollenrechte-Tabelle */
.rollen-tabelle-wrapper { overflow-x: auto; margin-top: 10px; }
.rollen-tabelle { width: 100%; border-collapse: collapse; min-width: 640px; }
.rollen-tabelle th, .rollen-tabelle td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: left; }
.rollen-tabelle th { font-size: 0.8rem; color: #666; font-weight: 600; }
.rollen-checkbox-zelle { text-align: center; }
.rollen-name-feld {
  width: 100%;
  min-width: 120px;
  padding: 6px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  box-sizing: border-box;
}
.rollen-neu-titel { margin: 22px 0 6px; font-size: 0.95rem; }
.rollen-neu-form {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}
.rollen-neu-form input[type="text"] {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  min-width: 200px;
}
.rollen-neu-form label { display: flex; align-items: center; gap: 6px; font-size: 0.85rem; white-space: nowrap; }