: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 h1 {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
}





/* --- 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.active {
  color: var(--dark);
  border-bottom-color: var(--brand);
}



/* "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. */







/* "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: 14px 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;
  /* Ohne diese Zeile streckt die Flexbox ALLE Felder auf die Hoehe des
     hoechsten Elements - die einfachen Eingabefelder wurden dadurch
     unnatuerlich hoch (95px statt 34px), sobald ein mehrzeiliges Feld
     (z.B. ein Datumsfeld mit Beschriftung) danebenstand. */
  align-items: flex-end;
  margin-bottom: 20px;
}
/* Checkboxen ausdruecklich ausnehmen - sonst werden sie auf 140px gedehnt
   und das Formular bricht unschoen um. */
.inline-form select,
.inline-form input:not([type="checkbox"]) {
  flex: 1;
  min-width: 140px;
  /* Feste Hoehe fuer ALLE Felder der Zeile: Auswahlfelder sind sonst je nach
     Browser ein paar Pixel hoeher als Eingabefelder. */
  height: 38px;
  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;
}
/* Höhe begrenzen und eigener Bildlauf: Ein wachsendes Banner schob den
   Inhalt nach unten aus dem Bild - das Seitenende war nicht mehr erreichbar. */
.error-banner {
  position: relative;
  max-height: 30vh;
  overflow-y: auto;
  padding-right: 40px;
}
.error-banner .error-zeile { margin-bottom: 4px; }
.error-banner .error-zeile:last-child { margin-bottom: 0; }
.error-schliessen {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: #a33;
  font-size: 1rem;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}

/* --- 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
   ========================================================= */




/* Umrandung je nach Typ des Auftraggebers */












.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;
}















.project-info-col .ms-toggle { min-width: 160px; padding: 6px 10px; font-size: 0.8rem; }



.project-countdown .link-btn { color: var(--red); }















.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 .hint { margin: 4px 0 0; white-space: nowrap; }

































@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); }
}


@media (max-width: 720px) {
  
  
  .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 --- */



.footer-stats .stat-dot.active { background: var(--brand); }





/* --- Aufgaben-Positionskreis --- */
/* Nummer schlicht wie in der Materialliste - kein farbiger Kreis */


/* --- 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 --- */






.summary-line.hint { padding: 2px 0; }





/* --- Footer-Aktionen (Backup, Wiederherstellung) --- */



/* --- 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 --- */


/* --- Priorität (nur Anzeige, wird im Katalog vergeben) --- */


.checkbox-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.85rem;
  color: #555;
  white-space: nowrap;
}

/* --- E-Mail-Link im Infofeld --- */



/* --- Mitarbeiterliste im Infofeld: untereinander --- */


/* --- Nur-Lese-Anzeige bei erledigten Projekten --- */


/* --- Priorität im Aufgaben-Katalog editierbar --- */



/* --- 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-hire-date-badge, .employee-tenure-badge {
  font-size: 0.78rem;
  color: #2f6b43;
  background: #eaf3ec;
  border: 1px solid #cfe4d4;
  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-edit-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.employee-projects-panel.hidden,
.employee-edit-panel.hidden,
.employee-password-panel.hidden {
  display: none;
}
.employee-password-panel {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
}
.employee-password-form {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  align-items: flex-end;
}
.employee-password-form label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.82rem;
  color: #666;
}
.employee-password-form input {
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.88rem;
}
.employee-password-error { color: #a33; }












/* =========================================================
   RESPONSIVE / MOBILGERÄTE
   ========================================================= */
@media (max-width: 720px) {
  /* Die Regel für den Seitenkopf ist in Version 549 entfallen: Sie setzte
     ihn auf dem Handy auf 52 Pixel Höhe. assets/seitenmenue.css überschreibt
     das seit Längerem mit festen 70 Pixeln und "!important" - die Regel hier
     wirkte also nicht mehr, täuschte aber eine Höhe vor, auf die sich die
     Leiste darunter noch bezog. Genau daraus entstand die Überdeckung. */
  
  
  
  header h1 {
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  

  /* BEHOBEN in Version 549: Hier stand "top: 52px" - die Leiste begann
     also 52 Pixel unter dem Seitenrand. Das passte zur Regel darüber, die
     den Seitenkopf auf dem Handy auf 52 Pixel setzte. Diese Regel greift
     aber längst nicht mehr: assets/seitenmenue.css gibt jedem Kopf fest
     70 Pixel, mit "!important", damit alle Oberflächen gleich aussehen.
     Die Leiste rutschte dadurch 18 Pixel UNTER den Kopf und wurde oben
     angeschnitten - sichtbar nur in der Verwaltung, weil nur sie diese
     Datei lädt.

     Die Angaben zum waagerechten Blättern gehörten zur früheren
     Reiterleiste. Die gibt es seit Version 543 nicht mehr; in der Leiste
     steht jetzt nur noch das Titelmenü, das von sich aus in eine Zeile
     passt. Ohne "top" gilt wieder der Wert von oben: 70 Pixel, also genau
     die Höhe des Kopfes. */
  .tabs { display: flex; flex-wrap: nowrap; }
  
  
  

  /* Footer: zwei Zeilen (Statistik oben, Aktionen unten) */
  
  
  

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

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

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

  /* Projekt-Karte */
  
  
  
  

  /* Buttons unten: untereinander, volle Breite */
  
  

  /* Aufgabenzeile: darf umbrechen statt Inhalt abzuschneiden */
  
  
  

  /* 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%; }
  
  

  /* 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;
}




/* =========================================================
   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. */


/* Die Projektspalte steht vollstaendig fest und bewegt sich beim Scrollen
   gar nicht mehr - Titel und der Knopf "Neues Projekt anlegen" bleiben immer
   sichtbar, gescrollt wird nur INNERHALB der Projektliste.
   Der Wert setzt sich zusammen aus: Kopfbereich (70px) + Reiterleiste (48px)
   - beide liegen fest oben - plus dem Innenabstand des Inhaltsbereichs
   (24px). Genau dort steht die Spalte ohnehin schon, dadurch entsteht beim
   Scrollen kein Versatz mehr (vorher rutschte sie erst 8px nach oben). */



/* Feine Trennlinie zwischen den Eintraegen (ausser vor dem ersten) */


.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.active { border-color: #4d4d4d; }

.master-list-item.client-type-property-mgmt.active { border-color: #123d26; }

.master-list-item.client-type-business.active { border-color: #5c3878; }

.master-list-item.client-type-gewoge.active { border-color: #4fa8c9; }













/* Absichtlich ein niedrigerer Breakpoint als sonst im Backend üblich (900px):
   Ab hier wechseln Liste und Karte von nebeneinander zu untereinander -
   erst DANN ergibt eine feste (sticky) Liste keinen Sinn mehr. Bei einem
   höheren Wert verlor man das Stehenbleiben der Liste beim Scrollen schon
   auf ganz normal breiten, nur nicht maximierten Fenstern. */


/* 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-email-cell { display: flex; align-items: center; gap: 6px; }
.contact-email-cell .contact-field { flex: 1; }
.contact-email-link {
  flex-shrink: 0;
  text-decoration: none;
  font-size: 1rem;
  color: var(--brand);
  padding: 2px 4px;
  border-radius: 4px;
}
.contact-email-link:hover { background: var(--bg); }
.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 { position: fixed; }



/* 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; }








/* Zwei gleich aufgebaute Zeilen untereinander: Auswahl und Schaltflaeche
   jeweils gleich breit, damit beide Bereiche identisch wirken. */



.pm-add-row .btn { width: 100%; justify-content: center; }



/* Materialliste in der Projektkarte: Bezeichnung mit Luft zum Rand,
   Menge rechtsbündig (damit die Zahlen untereinander stehen), Farbe mittig. */


/* Eingabefelder stehen exakt untereinander, die Einheit linksbuendig daneben. */




/* Etwas mehr Platz; längere Angaben werden abgeschnitten, sind aber per
   Mouseover (title-Attribut) vollständig lesbar. */




/* 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 */


/* 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);
}



/* Materialliste: Statusspalte bekommt Platz, Entfernen als rotes X */


.link-btn-danger {
  color: var(--red);
  font-size: 1rem;
  line-height: 1;
  padding: 2px 6px;
}
.link-btn-danger:hover { color: #a63c3c; }

/* Klassifizierungsnummer der Materialien */


#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 */



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

.master-list-toggle .btn { width: 100%; }

/* Bereichs-Überschrift mittig (Mitarbeiter) */
/* Der Standardabstand über einer Überschrift kommt hier zum Innenabstand des
   Hauptbereichs hinzu - zusammen ergab das eine auffällige Lücke über dem
   Titel, bevor überhaupt Inhalt kam. */
.section-title-center { text-align: center; margin-top: 0; margin-bottom: 14px; }

/* 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-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-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) {
  /* "minmax(0, 1fr)", nicht "1fr".
     Ein nacktes 1fr bedeutet minmax(auto, 1fr): Die Spalte wird so breit
     wie ihr breitester Inhalt. Die Rechtetabelle mit 13 Spalten zog die
     Spalte damit auf 1067 Pixel - und weil Menue und Inhalt in DERSELBEN
     Spalte liegen, wurde das Seitenmenue gleich mitgezogen. Gemessen auf
     dem Handy: 689 Pixel lagen ausserhalb des Bildschirms, und weil "main"
     den Ueberlauf abschneidet (overflow-x: clip), waren sie nicht nur
     unsichtbar, sondern unerreichbar. Mit minmax(0, 1fr) darf die Spalte
     schrumpfen, und die Bildlaufleisten der Tabellen greifen wieder. */
  .konfig-layout { grid-template-columns: minmax(0, 1fr); gap: 18px; }
}
/* Etage/Wohnung in der Projektliste - eigene Zeile, damit sie nicht
   in der Adresszeile untergeht. */



/* Drucken-Schaltfläche - gleiche Form wie die übrigen, rosa hinterlegt */



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


/* =========================================================
   AUFKLAPPMENÜ IN DER NAVIGATION (Kataloge)
   ========================================================= */


/* 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; }



/* Der Hauptknopf zeigt deutlich, welcher Unterpunkt gerade gewählt ist:
   dunkel hinterlegt und mit dem Namen des Unterpunkts als Zusatz. */

/* 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.active::before { visibility: visible; }


/* =========================================================
   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
   ========================================================= */




/* Alle Navigationspunkte einzeilig */

/* =========================================================
   ÄNDERUNGSVERLAUF
   ========================================================= */




.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; }



/* =========================================================
   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 */




/* Einträge im aufgeklappten Menü: ebenfalls abgerundet und mit Rand */



.tab-dropdown-menu .tab-btn.active,
.tab-dropdown-menu .tab-btn.active:hover { background: var(--green); color: #fff; }

/* Zusatzaufgaben in der Projektkarte */








/* 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 */

/* 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.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);
}


/* 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"],
.konfig-name-form input[type="url"] {
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
}

/* =========================================================
   PROJEKTFOTOS
   ========================================================= */











/* 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)
   ========================================================= */













/* =========================================================
   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)
   ========================================================= */





/* 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). */


/* =========================================================
   AUFMASS
   ========================================================= */






























/* =========================================================
   DREISTRICH-MENÜ IN DER NAVIGATION (ersetzt die Fußzeile)
   ========================================================= */

.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-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); }


/* Ohne Fußzeile braucht der Seiteninhalt unten keinen reservierten Platz mehr. */
body { padding-bottom: 24px; }


/* Rücklink zur Verwaltung ganz oben im Einstellungsmenü */

.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; }


/* Statushinweis "Aufmaß geöffnet/abgeschlossen" - immer an derselben Stelle,
   nur Farbe und Text wechseln, damit sich beim Auf-/Abschließen nichts im
   Layout verschiebt. */




/* 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 {
    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 */






/* 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-checkbox-zelle.rollen-standard-markiert input[type="checkbox"] {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 50%;
}
.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; }
.konfig-menue-abmelden { color: var(--red); }


.migrate-zeile-fehler { color: var(--red); font-weight: 600; }

/* Ziffern-Datumseingabe (TT.MM.JJ) - ersetzt native Datumsauswahl */
/* Hoehere Spezifitaet noetig: Regeln wie ".date-label input[type=\"date\"]"
   setzen sonst Innenabstand und Rahmen wieder, wodurch das technisch
   versteckte Feld ~20px Hoehe beansprucht und die ganze Formularzeile
   aufblaeht. */
/* Das technisch versteckte Originalfeld darf NIRGENDS Platz beanspruchen.
   "!important" ist hier ausnahmsweise richtig: Bestehende Formularregeln
   sprechen Datumsfelder ueber ihren Typ an (z.B. .date-label
   input[type="date"]) und sind damit spezifischer als jede Klassenregel.
   Sie gaben dem unsichtbaren Feld wieder Innenabstand und Rahmen - es
   beanspruchte dadurch rund 34px Hoehe und blaehte ganze Formularzeilen auf.
   clip-path blendet es aus, ohne es aus dem Textfluss zu reissen (frueher
   sorgte position:absolute fuer ein unsichtbares Feld weit rechts samt
   waagerechtem Scrollbalken). */
.digit-date-original {
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  opacity: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
  clip-path: inset(50%) !important;
  display: inline-block !important;
  vertical-align: top !important;
}
/* Die Datumseingabe ist ein in sich geschlossener Block und wird NIE
   gedehnt. In Formularen, deren Beschriftungen als Spalte aufgebaut sind,
   wurde sie sonst auf die volle Spaltenbreite gezogen (gemessen 363 statt
   150 Pixel) und schob benachbarte Felder aus ihrer Reihe. */
.digit-date-eingabe {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: max-content;
  max-width: 100%;
  align-self: start;
  flex: 0 0 auto;
  flex-wrap: nowrap;
}
/* Die Ziffernfelder brauchen eine hoehere Spezifitaet als umgebende
   Formular-Regeln (z.B. ".employee-edit-grid input"): Deren groesserer
   Innenabstand liess bei der festen Feldbreite nur noch EINE Ziffer
   sichtbar - im Mitarbeiter-Formular standen dadurch scheinbar wirre
   einstellige Zahlen statt des Datums. */
/* Die Ziffernfelder sind ganz normale Textfelder - und wurden deshalb von
   allgemeinen Formularregeln wie ".project-edit-form input[type=text]
   { width: 100% }" auf die volle Spaltenbreite gezogen (gemessen 363 statt
   34 Pixel). Sie haben eine hoehere Spezifitaet als diese Klassenregel,
   deshalb ist "!important" hier die richtige Wahl. */
.digit-date-eingabe .digit-date-teil,
.digit-date-teil {
  width: 2.6em !important;
  min-width: 2.6em !important;
  max-width: 2.6em !important;
  flex: 0 0 auto !important;
  text-align: center;
  padding: 8px 2px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.9rem;
  font-family: inherit;
  -moz-appearance: textfield;
  box-sizing: border-box;
}
.digit-date-teil::-webkit-outer-spin-button,
.digit-date-teil::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.digit-date-punkt { color: #999; font-weight: 600; }
.digit-date-leeren {
  border: none;
  background: none;
  color: #999;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 4px;
  margin-left: 2px;
}
.digit-date-leeren:hover { color: var(--red); }
/* Neutraler Hinweis in der Sicherheitsprüfung (weder Fehler noch Entwarnung) */
.update-meldung.update-hinweis-neutral {
  background: #fdf6e3;
  border: 1px solid #e8d9a8;
  color: #6b5a20;
}
/* Warnung in der Sicherheitsprüfung - deutlicher als der neutrale Hinweis,
   weil hier etwas zu tun ist (z.B. ein Beispielwert in config.php). */
.update-meldung.update-hinweis-warnung {
  background: #fdecea;
  border: 1px solid #e0a9a2;
  color: #7a2318;
}
.update-meldung.update-hinweis-warnung code {
  background: rgba(0, 0, 0, 0.06);
  padding: 1px 5px;
  border-radius: 4px;
}

/* Zähler mit 0: dauerhaft sichtbar (reserviert den Platz), aber zurückhaltend
   dargestellt - so springt die Navigationsleiste beim Laden nicht mehr. */


/* =========================================================
   ABLAUFPROTOKOLL BEIM SYSTEMUPDATE ("Schreibmaschine")
   ========================================================= */
.update-verlauf {
  border-radius: 8px;
  padding: 12px 14px;
  margin: 12px 0;
  border: 1px solid;
  transition: background 0.4s ease, border-color 0.4s ease;
}
/* Läuft noch: gelb. Fertig: grün. Mit Fehlern: rot. */
.update-verlauf.laeuft        { background: #fdf6e3; border-color: #e8d9a8; }
.update-verlauf.erfolgreich   { background: #eaf3ec; border-color: #cfe4d4; }
.update-verlauf.fehlgeschlagen{ background: #fbeaea; border-color: #f0c9c9; }
.update-verlauf-kopf {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  font-size: 0.85rem;
  font-weight: 600;
}
.update-verlauf.laeuft .update-verlauf-status         { color: #8a6d1f; }
.update-verlauf.erfolgreich .update-verlauf-status    { color: #2f6b43; }
.update-verlauf.fehlgeschlagen .update-verlauf-status { color: #a33; }
.update-verlauf-zeilen {
  margin: 0;
  max-height: 320px;
  overflow-y: auto;
  font-family: ui-monospace, "Cascadia Mono", Consolas, "Courier New", monospace;
  font-size: 0.82rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.update-verlauf-zeile { animation: verlauf-einblenden 0.18s ease-out; }
.update-verlauf-zeile.ist-ok     { color: #2f6b43; }
.update-verlauf-zeile.ist-fehler { color: #a33; font-weight: 600; }
@keyframes verlauf-einblenden {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: none; }
}
/* Geburtstag/Alter in der Mitarbeiterübersicht */
.employee-birth-badge {
  font-size: 0.78rem;
  color: #6b4a7a;
  background: #f4eefa;
  border: 1px solid #e0d0ec;
  padding: 3px 9px;
  border-radius: 10px;
}

/* Kurze Rückmeldung nach dem Speichern (Mitarbeiter-Bearbeiten) */
.speicher-hinweis {
  /* Bewusst oben mittig statt unten in der Ecke: Dort schaut man beim
     Bearbeiten hin, unten rechts wurde die Rueckmeldung schlicht uebersehen. */
  position: fixed;
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  top: 128px;
  z-index: 60;
  background: var(--brand);
  color: #fff;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
  box-shadow: 0 3px 12px rgba(0,0,0,0.18);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s ease;
}
.speicher-hinweis.sichtbar { opacity: 1; transform: translateX(-50%); }

/* Einstellungen: Aufmaß-Auswahlmöglichkeiten */




/* Altbelag: Ankreuzfelder statt Mehrfach-Auswahlliste */




/* Aufmaß einem Projekt zuordnen (Verwaltung) */






/* Hinweis: Datenbank noch nicht auf dem Stand des Programms */
.db-rueckstand-hinweis {
  max-width: 1800px;
  margin: 12px auto 0;
  padding: 12px 18px;
  background: #fdf6e3;
  border: 1px solid #e8d9a8;
  border-radius: 8px;
  color: #6b5a20;
  font-size: 0.9rem;
}
.db-rueckstand-hinweis a { color: #6b5a20; font-weight: 600; }

/* Hinweis: Browser zeigt eine veraltete Fassung */
.veraltete-datei-hinweis {
  position: sticky;
  top: 0;
  z-index: 100;
  background: #fbeaea;
  border-bottom: 2px solid #e0a0a0;
  color: #8a2b2b;
  padding: 12px 20px;
  font-size: 0.9rem;
  text-align: center;
}
.veraltete-datei-hinweis .btn { margin-left: 10px; }

/* Mitarbeiter: Speichern-Knopf mit Rückmeldung */
.employee-speicher-zeile {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 14px 0 4px;
}
.employee-speicher-status { font-size: 0.85rem; font-weight: 600; }
.employee-speicher-status.laeuft { color: #8a6d1f; }
.employee-speicher-status.ok { color: var(--brand); }
.employee-speicher-status.fehler { color: var(--red); }

/* Live-Vorschau neben den Datumsfeldern */
/* Die Vorschau darf das Layout NICHT verschieben: Ohne Inhalt beansprucht
   sie keinen Platz (kein min-height), erst mit Text wird eine Zeile daraus. */
.datum-vorschau {
  display: block;
  font-size: 0.78rem;
  color: var(--brand);
  font-weight: 600;
  line-height: 1.3;
}
.datum-vorschau:empty { display: none; }

/* Mitarbeiter bearbeiten: alle Beschriftungen oben bündig ausrichten.
   Die Vorschauzeile unter den Datumsfeldern hatte die Felder sonst
   unterschiedlich hoch gemacht und die Reihe vertikal verschoben. */


.employee-edit-grid > label.checkbox-label {
  min-height: 0;
  align-self: center;
}

/* Vierstelliges Jahr braucht mehr Platz als Tag/Monat */
.digit-date-eingabe .digit-date-jahr-lang,
.digit-date-jahr-lang {
  width: 4.2em !important;
  min-width: 4.2em !important;
  max-width: 4.2em !important;
}

/* Ansichten mit fester Projektliste: Die SEITE scrollt nicht, nur die beiden
   Spalten für sich. Ohne das ließ sich die Seite ein Stück über das Ende
   hinaus schieben - und genau dabei rutschte die Liste wieder weg. */



/* Datumsfelder im Projekt-Bearbeiten-Formular auf eine Linie mit den
   übrigen Feldern bringen: gleiche Beschriftung, gleiche Höhe, gleicher
   Abstand - unabhängig davon, ob daneben ein normales Textfeld steht. */
.project-edit-form .form-row > label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  color: #666;
  min-width: 0;
}
.project-edit-form .form-row > label:has(.digit-date-eingabe) {
  align-self: end;
}

/* Überschrift der Abschnitte im Aufmaß-Bereich der Verwaltung */


/* Auf schmalen Bildschirmen stehen Liste und Karte untereinander - dort
   dürfen sie KEINE feste Höhe und keinen eigenen Scrollbereich haben,
   sonst ist der Inhalt darunter nicht erreichbar. */


/* Aufmaß-Fotos in der Verwaltung: Auswahl + Sammel-Löschen */




/* Berechtigungen im Mitarbeiter-Formular: nur zur Ansicht */
.employee-rechte-anzeige {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}
.employee-rechte-titel { font-size: 0.8rem; color: #666; font-weight: 600; }
.employee-recht {
  font-size: 0.8rem;
  padding: 3px 9px;
  border-radius: 10px;
  border: 1px solid var(--border);
}
.employee-recht.recht-ja { background: #eaf3ec; border-color: #cfe4d4; color: #2f6b43; }
.employee-recht.recht-nein { background: #f4f2ef; color: #8a857d; }


/* Verweis vom Projekt zum zugeordneten Aufmaß */


/* Fotos, die aus einem Aufmaß stammen, sind gekennzeichnet */


/* Etage in der Aufmaß-Übersicht */



/* (frühere Fassung ersetzt - siehe Farbsystem weiter unten) */

/* Einstellungen: Positionen je Zimmer */









/* =========================================================
   FARBSYSTEM FÜR KNÖPFE (gleiche Bedeutungen wie in der App)
     Grün = anlegen/speichern · Blau = navigieren/öffnen
     Gelb = Zustand ändern · Rot = löschen · Lila = Zusatzfunktionen
   ========================================================= */
:root {
  --knopf-gruen: #4a7c59;
  --knopf-gruen-rand: #3c6449;
  --knopf-blau: #4a6b8a;
  --knopf-blau-rand: #3b5670;
  --knopf-gelb: #b8894a;
  --knopf-gelb-rand: #966d39;
  --knopf-rot: #a85450;
  --knopf-rot-rand: #8a4340;
  --knopf-lila: #6f5b8e;
  --knopf-lila-rand: #5a4874;
}
.btn {
  color: #fff;
  border: 1px solid transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  font-weight: 600;
}
.btn:disabled { opacity: 0.45; box-shadow: none; }
.btn-primary { background: var(--knopf-gruen); border-color: var(--knopf-gruen-rand); color: #fff; }
.btn-primary:hover { background: var(--knopf-gruen-rand); }
.btn-secondary { background: var(--knopf-blau); border-color: var(--knopf-blau-rand); color: #fff; }
.btn-secondary:hover { background: var(--knopf-blau-rand); }
.btn-danger { background: var(--knopf-rot); border-color: var(--knopf-rot-rand); color: #fff; }
.btn-danger:hover { background: var(--knopf-rot-rand); }
#aufmass-abschluss-btn,
#aufmass-ins-archiv-btn,
#aufmass-archiv-zurueckholen-btn {
  background: var(--knopf-gelb);
  border-color: var(--knopf-gelb-rand);
  color: #fff;
}
#aufmass-projekt-btn {
  background: var(--knopf-lila);
  border-color: var(--knopf-lila-rand);
  color: #fff;
}
.aufmass-abschluss-zeile .btn { min-width: 220px; padding: 12px 20px; }

/* Knöpfe mit eigenen Farben ins System einordnen.
   "Drucken" war ein sehr helles Rosa mit weißer Schrift (Kontrast 2.0 -
   kaum lesbar), "Rechnung geschrieben" ein kräftiges Grün. Beide fügen sich
   jetzt in die gedämpfte Palette ein. */






/* Die restlichen Sonderfarben ins System holen.
   "Als erledigt markieren" war hellgrau mit weißer Schrift (Kontrast 1.6 -
   praktisch unlesbar), "Bearbeiten" ein grelles Gelb, "Löschen" ein
   kräftiges Rot. */




/* Ein gesperrter Knopf soll erkennbar gesperrt sein, aber lesbar bleiben. */
.btn:disabled { background: #d9d5cf; border-color: #c3bfb8; color: #5c5852; opacity: 1; }

/* Gelb trägt weiße Schrift nur schlecht (Kontrast 3.1 - unter dem
   empfohlenen Wert von 4.5). Auf den gelben Knöpfen steht deshalb dunkle
   Schrift; das ist bei Warnfarben ohnehin die übliche Kombination. */
#aufmass-abschluss-btn,
#aufmass-ins-archiv-btn,
#aufmass-archiv-zurueckholen-btn,
#app-aufmass-abschluss-btn {
  color: #2a2118;
}

/* Auch die rechte Spalte (Gesamtmengen) braucht einen eigenen Scrollbereich.
   Bei vielen Zimmern wurde ihre Liste sonst unten abgeschnitten - und weil
   die Seite in dieser Ansicht nicht scrollt, war der Rest unerreichbar. */



/* Gelb heller und freundlicher statt ockerfarben. */
:root {
  --knopf-gelb: #e0b83c;
  --knopf-gelb-rand: #c39c28;
}
/* "Drucken" deutlich von "Duplizieren" unterscheiden: Drucken bekommt Blau
   (öffnet nur eine Ansicht), Duplizieren bleibt Lila (legt etwas an). */



/* "Duplizieren" hell und mit dunkler Schrift: Blau und Lila waren zwar
   verschiedene Farbtöne, aber gleich hell (Helligkeitsunterschied nur 1,09)
   und dadurch auf einen Blick verwechselbar. Jetzt unterscheiden sie sich
   auch in der Helligkeit deutlich. */



/* Aufmaß: "Zuordnung aufheben" und "Aufmaß löschen" nebeneinander */





/* Suchfeld über den Projektlisten */




a.btn { display: inline-block; text-decoration: none; text-align: center; }

/* Foto auf dem Gerät speichern - in der Bildansicht neben dem Schließen-Kreuz */



/* Projektnummer im runden Kreis, immer VOR dem Kundennamen */
.projektnummer-kreis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2em;
  height: 2em;
  padding: 0 0.35em;
  margin-right: 0.5em;
  border: 2px solid var(--knopf-blau);
  border-radius: 999px;
  background: #fff;
  color: var(--knopf-blau);
  font-weight: 700;
  font-size: 0.85em;
  line-height: 1;
  vertical-align: middle;
  flex-shrink: 0;
}

/* Nummernkreis in den Einstellungen */
.nummernkreis-form { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; }
.nummernkreis-form label { display: flex; flex-direction: column; gap: 4px; font-size: 0.82rem; color: #666; }
.nummernkreis-form input {
  width: 120px;
  padding: 9px 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
}

/* Übersicht je Zimmer in der Zusammenfassung */



/* Lupe in der Bildansicht */


/* Bei aktivem Zoom das Bild nicht mehr einpassen - Groesse kommt vom Zoom. */


/* Bemerkungsfelder wachsen mit dem Inhalt - keine feste Zeilenzahl */


/* Kasten "Projekt terminiert" im Infobereich */




/* Grüner Haken hinter dem Kunden in der Übersicht */


/* Bemerkungsfeld unter einer Aufgabe (nur Verwaltung beschreibbar) */



/* Noch nicht terminiert: rotes Fragezeichen an derselben Stelle wie der Haken */


/* Optionen einer Aufgabe (Verwaltung) */


/* Einheit aus dem Aufgabenkatalog, direkt vor dem Eingabefeld */








.kat-optionen textarea {
  width: 100%;
  min-width: 120px;
  padding: 5px 7px;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-family: inherit;
  font-size: 0.82rem;
  resize: vertical;
}
.template-optionen-label { display: flex; flex-direction: column; gap: 3px; font-size: 0.8rem; color: #666; }
.template-optionen-label textarea {
  padding: 7px 9px; border: 1px solid var(--border); border-radius: 6px;
  font-family: inherit; font-size: 0.88rem;
}

/* Vergrößerte Bilder werden gezogen statt gescrollt - keine Bildlaufleisten */



.photo-lightbox-overlay.zieht .photo-lightbox-img.vergroessert { cursor: grabbing; }

/* Bei vergrößertem Bild muss der Bereich überhaupt erst verschiebbar sein -
   im eingepassten Zustand bleibt er zentriert und unbeweglich. */


/* =========================================================
   BEDIENELEMENTE DER BILDANSICHT BLEIBEN STEHEN
   Sie lagen bisher "absolut" IM scrollenden Bereich und wanderten deshalb
   mit dem verschobenen Bild aus dem Blick. Mit "fixed" beziehen sie sich
   auf den Bildschirm und bleiben immer erreichbar - besonders die Lupe
   oben links, ohne die man aus der Vergrößerung nicht mehr herauskäme.
   ========================================================= */





/* Die Pfeile behalten ihre vertikale Mitte, jetzt bezogen auf den Bildschirm. */

/* Bildunterschrift ebenfalls stehend, damit sie nicht wegwandert. */


/* Ausgewählte Aufgaben im Aufmaß hellblau hinterlegen */


/* =========================================================
   AUFMASS: MITTE UND RECHTE SPALTE GLEICH BREIT
   Die rechte Spalte trug bisher nur 260px und wurde bei vielen Zimmern
   sehr eng. Sie bekommt jetzt dieselbe Breite wie die Mitte; die
   Gesamtbreite des Bereichs bleibt unverändert, weil sich beide Spalten
   den vorhandenen Platz teilen.
   ========================================================= */

/* Mehr Luft in der rechten Spalte */






/* Übersicht je Zimmer: zwei Karten nebeneinander, wenn Platz da ist */



/* Optionen: Ankreuzfeld links, Mengenfelder erscheinen erst bei Auswahl.
   Sie sind immer vorhanden und nur unsichtbar - so verschiebt sich beim
   Anhaken nichts. */






/* =========================================================
   INFOSPALTE IM AUFMASS
   Die Knöpfe oben bleiben beim Scrollen stehen; darunter nutzen die
   Zimmerkarten die volle Breite der Spalte.
   ========================================================= */

/* Der erste Knopf bekommt oben etwas Luft, der letzte eine Trennlinie. */


/* Zimmerkarten füllen die Spaltenbreite aus - bei genug Platz nebeneinander. */

/* Eine Zimmerkarte je Zeile über die volle Spaltenbreite. Zwei nebeneinander
   waren zu schmal - lange Bezeichnungen und Werte liefen ineinander. */


/* Bezeichnung und Wert dürfen sich nie überlagern: Der Wert bleibt
   einzeilig, die Bezeichnung darf umbrechen und bekommt den Restplatz. */






/* =========================================================
   INFOSPALTE: FESTER KOPF, SCROLLENDER KÖRPER
   Ein "sticky" reichte nicht zuverlässig, weil je nach Fensterhöhe mal die
   Spalte und mal die Seite scrollt. Die Aufteilung in einen festen Kopf und
   einen eigenen Scrollbereich darunter ist unabhängig davon.
   ========================================================= */




/* Zwei Reihen zu je drei Knöpfen */

.info-knopfreihe .btn {
  padding: 10px 4px;
  font-size: 0.85rem;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}

/* Aufklappbarer Optionsbereich einer Aufgabe */



/* Eingeklappt stehen nur die gewählten Optionen da - ohne zusätzlichen Rahmen. */


/* =========================================================
   ZIMMERKARTE IM AUFMASS - AUFBAU WIE IN DER AUFMASS-APP
   ========================================================= */
/* --- Beläge: drei gleich breite Blöcke nebeneinander --- */









/* --- Positionen nach Abschnitten --- */













/* --- Bemerkung über die volle Breite --- */



/* Status einer Aufgabe: in der Verwaltung nur noch Anzeige, farblich
   abgesetzt, damit er trotzdem sofort ins Auge fällt. */





/* Werte zu Aufgaben, die es im Katalog nicht mehr gibt - nur noch Anzeige */





.aufmass-entfallen .hint { margin: 5px 0 0; font-size: 0.76rem; }

/* Untergrund und neuer Bodenbelag zum Anhaken (Abschnitt E1) */



/* =========================================================
   PROJEKTKARTE: KNÖPFE OBEN IN DER INFOSPALTE, FEST STEHEND
   Sie standen unter der Karte und waren bei langen Aufgabenlisten nur nach
   langem Scrollen erreichbar.
   ========================================================= */




.project-info-kopf .project-button-row .btn {
  width: 100%;
  padding: 9px 6px;
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}


/* Mitwachsende Textfelder: Die Höhe setzt das Skript nach dem Inhalt.
   Deshalb hier keine feste Höhe und keine eigene Bildlaufleiste - sonst
   bliebe ein Teil des Textes verborgen. */


/* Schnittmaße und Paketangaben unter den Raummaßen */

.aufmass-schnitt-block .hint { font-weight: 400; margin-left: 6px; font-size: 0.76rem; }





/* Zimmername als Eingabefeld - Zimmer lassen sich jederzeit umbenennen. */




/* Aufgeklapptes Auswahlfeld liegt ÜBER der Seite (siehe msPanelOeffnen).
   Nur so bleibt es im Infokasten des Projekts vollständig sichtbar - der
   Kasten hat einen eigenen Bildlauf und schnitt es sonst ab. */
.ms-panel.ms-panel-frei {
  position: fixed;
  z-index: 3000;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
}

/* =========================================================
   SCHWEBENDE ZIMMERWAHL
   Liegt über der Seite, damit sie überall erreichbar ist - auf dem Handy
   wie am Rechner.
   ========================================================= */
#zimmer-wahl {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 2500;
  /* Die Auswahl klappt NEBEN dem Knopf auf, nach links und nach oben.
     Öffnete sie über dem Knopf, verdeckte der obere Knopf die Auswahl des
     unteren. */
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
}




/* Die Liste ist zunächst verborgen - erst der Knopf klappt sie auf. */

#zimmer-wahl.offen .zimmer-wahl-liste {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 8px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  min-width: 200px;
}



/* Kurzes Aufleuchten der angesprungenen Karte */


/* Ablagefläche für Bilder (Ziehen und Fallenlassen am Rechner) */









/* Die Versionsnummer im Burgermenü ist kein Verweis mehr - der Verlauf steht
   in den Einstellungen. Sie soll aber weiterhin wie die Einträge aussehen. */


/* Das Haus-Zeichen ist zierlicher als das Listen-Zeichen des grünen Knopfes -
   etwas größer gesetzt, damit beide gleich kräftig wirken. */


/* SCHLANKE ANSICHT (?nurbereich=...): Wird ein einzelner Bereich in die
   Einstellungen eingebunden, entfallen Kopfleiste und Reiter - nur der Inhalt
   bleibt. Siehe admin/index.php. */
body.nur-bereich { background: transparent; }
/* Reiterleiste und feste Bereichshöhe entfallen - das "hidden" am Element
   allein reicht nicht, weil die Leiste per CSS auf "display: flex" steht
   und das die Vorgabe von "hidden" überstimmt. */
body.nur-bereich .tabs,
body.nur-bereich .db-rueckstand-hinweis { display: none !important; }
/* …mit einer Ausnahme: Seit Version 544 steht der Hinweis INNERHALB des
   Mitarbeiter-Bereichs, weil er genau dorthin gehört (es fehlt das Feld für
   den Geburtstag). Die Regel darüber blendete ihn bis dahin ausgerechnet
   dort aus, wo man ihn braucht - im eingebundenen Bereich. */
body.nur-bereich .db-rueckstand-hinweis.db-rueckstand-im-bereich {
  display: block !important;
  margin: 0 0 14px;
}
body.nur-bereich .tab-panel { display: none; }
body.nur-bereich .tab-panel.active { display: block; }
body.nur-bereich main { padding: 0; max-width: none; }

/* Eingebundener Verwaltungsbereich in den Einstellungen */
.konfig-rahmen {
  width: 100%;
  min-height: 600px;
  border: none;
  display: block;
}


/* =========================================================
   PROJEKTKARTE: FESTER KOPF, EIGENE BILDLÄUFE JE SPALTE

   Bisher scrollte die ganze Karte. Der Kopf klebte zwar oben, der obere Rand
   der Karte verschwand dabei aber unter ihm, und die rechte Infospalte wurde
   mitgezogen, obwohl sie oft ganz auf den Bildschirm passt.

   Jetzt scrollt die Karte selbst gar nicht mehr. Sie ist in drei Teile
   gegliedert: fester Kopf, darunter zwei Spalten, von denen JEDE ihren
   eigenen Bildlauf hat - und den nur, wenn ihr Inhalt zu hoch ist.
   ========================================================= */


/* Bildansicht: Bild über die volle Breite, Pfeile darüber am Rand.
   Bisher blieben links und rechts 60 Bildpunkte für die Pfeile frei. */







/* Bei geöffneter Bildansicht stört die schwebende Zimmerwahl. */


/* =========================================================
   CLOUD-SICHERUNG (Einstellungen → Backup)
   Eingabefelder in derselben Größe wie im übrigen Einstellungsbereich,
   Erläuterungen in abgesetzten Kästen statt als lose Absätze.
   ========================================================= */
.cloud-form {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 14px 0 6px;
  max-width: 760px;
}
.cloud-zeile {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.cloud-feld {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  color: #666;
  flex: 1 1 240px;
  min-width: 0;
}
.cloud-feld-breit { flex-basis: 100%; }
.cloud-feld-schmal { flex: 0 0 150px; }
/* Auch die Ankreuzfelder in den Schaltern behalten ihre eigene Größe -
   deshalb hier nur die eigentlichen Eingabefelder ansprechen. */
.cloud-feld input:not([type="checkbox"]),
.cloud-feld select {
  /* Feste Höhe: Auswahlfelder und Nur-Lese-Felder bringen sonst eigene Maße
     mit und stehen dann drei bis fünf Bildpunkte daneben. */
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-size: 0.95rem;
  font-family: inherit;
  line-height: normal;
  background: #fff;
  color: inherit;
  width: 100%;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}
/* Pfeil für das Auswahlfeld, der durch "appearance: none" entfällt. */
.cloud-feld select {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%23666' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 11px;
  padding-right: 32px;
}
.cloud-feld input[readonly] {
  font-family: monospace;
  font-size: 0.82rem;
  color: #444;
}
/* Der Schalter steht abgesetzt oben - er entscheidet über alles Weitere. */
.cloud-schalter {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 14px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}
.cloud-schalter input { width: 18px; height: 18px; margin: 0; }
.cloud-knopfreihe {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 2px;
}
.cloud-infokasten {
  max-width: 760px;
  margin: 16px 0;
  padding: 14px 16px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-left: 4px solid #4a6f8a;
  border-radius: 8px;
  font-size: 0.88rem;
  line-height: 1.5;
}
.cloud-infokasten h4 { margin: 0 0 8px; font-size: 0.95rem; }
.cloud-infokasten p { margin: 0 0 8px; }
.cloud-infokasten p:last-child { margin-bottom: 0; }
.cloud-infokasten code {
  display: block;
  margin: 8px 0;
  padding: 8px 10px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 5px;
  font-size: 0.82rem;
  overflow-wrap: anywhere;
}
/* Der Hinweis zu den nicht unterstützten Diensten ist Randwissen - er tritt
   deshalb zurück. */


/* =========================================================
   EINSTELLUNGEN: MENÜ LINKS BLEIBT STEHEN
   Beim Durchsehen langer Bereiche (Backup, Changelog) scrollte das Menü mit
   und war irgendwann nicht mehr erreichbar. Es klebt jetzt oben; bei sehr
   vielen Punkten bekommt es einen eigenen Bildlauf, damit "Abmelden" unten
   nicht abgeschnitten wird.
   ========================================================= */
@media (min-width: 900px) {
  .konfig-menue {
    position: sticky;
    /* UNTERHALB von Kopfzeile (70px) und Titelleiste (48px) stehen bleiben.
       Mit einem kleineren Wert schob sich das Menü beim Scrollen hinter den
       Titel "Einstellungsmenü" und war dort halb verdeckt. */
    top: 130px;
    align-self: start;
    max-height: calc(100vh - 146px);
    overflow-y: auto;
    scrollbar-gutter: stable;
  }
}

/* Die Meldungen der Cloud-Sicherung liegen im selben Bereich und nutzen
   dieselben drei Farbstufen wie die übrigen Einstellungen. Hier nur die
   Lesbarkeit der Schrift ergänzt - die Hintergründe stehen weiter oben. */
.konfig-inhalt .update-ok { color: #24603c; }
.konfig-inhalt .update-warnung { color: #6b5a20; }
.konfig-inhalt .update-fehler { color: #8c2b2b; }

/* Die Knopfreihe steht jetzt oben im Kasten, direkt unter der Erklärung -
   dort wird sie am häufigsten gebraucht. */
.cloud-knopfreihe-oben { margin: 14px 0 4px; }

/* Zuordnung im Aufmaß: als Knopf, weil sie zum Projekt führt */



/* Kurzer Hinweis, solange die Daten noch unterwegs sind - besser als eine
   leere Fläche, bei der man nicht weiß, ob etwas passiert. */


/* =========================================================
   AUFKLAPPMENÜS: HÖHE BEGRENZEN UND SCROLLBAR MACHEN
   Ohne Begrenzung laufen lange Menüs aus dem Bild und die unteren Einträge
   sind nicht mehr erreichbar - je nach Bildschirmhöhe und Anzahl der
   Einträge. Betrifft die Navigations- und Burgermenüs.
   ========================================================= */
.nav-burger-menu {
  max-height: calc(100vh - 140px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Nummerierte Schritte in den Hinweiskästen */
.wiederherstellen-schritte {
  margin: 6px 0 8px;
  padding-left: 22px;
}
.wiederherstellen-schritte li { margin-bottom: 5px; }

/* =========================================================
   KATALOGE: GRUPPEN UND VERSCHIEBEN
   ========================================================= */
tr.katalog-gruppe td {
  background: var(--bg);
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  color: #555;
  padding: 7px 10px;
  border-top: 2px solid var(--border);
}
tr[data-katalog-id] { cursor: default; }
tr[data-katalog-id].wird-gezogen { opacity: 0.45; }
/* Zeigt an, wo die Zeile landet. */
tr.ablage-oben td { box-shadow: inset 0 3px 0 0 var(--green); }
tr.ablage-unten td { box-shadow: inset 0 -3px 0 0 var(--green); }
.kat-griff {
  display: inline-block;
  margin-right: 5px;
  color: #b0aaa2;
  cursor: grab;
  font-size: 0.9rem;
  user-select: none;
}
.kat-griff:active { cursor: grabbing; }
tr[data-katalog-id]:hover .kat-griff { color: var(--green); }

/* =========================================================
   ÜBERSICHT: TERMINZEILE (Deadline, Terminierung, Bestellung)
   Alles Terminliche in einer Zeile am Fuß des Eintrags.
   ========================================================= */




/* In der hervorgehobenen Zeile bleibt die Schrift hell - die Zeichen dürfen
   dort nicht untergehen. */
.master-list-item.active .master-list-status { color: inherit; }
.master-list-item.active .ml-ja { color: #7fd6a2; }
.master-list-item.active .ml-nein { color: #ff9b9b; }

/* Freigabelink zur Bildergalerie in der Projektkarte */



.galerie-zeile .hint { margin-right: auto; }

/* Spalte "muss bestellt werden" in der Materialliste des Projekts */


/* Stornieren: zurückhaltend, aber erkennbar - es ist kein Alltagsknopf. */



/* Vermerk "storniert" in der Projektliste */


/* =========================================================
   AUFMASS-MENGEN: SCHWEBENDES FENSTER AM RECHTEN RAND
   Es liegt ÜBER der Seite, ohne sie umzubauen - der Inhalt darunter behält
   seine Breite. Ein Verschieben quetschte die Spalten der Projektkarte
   zusammen, und das war schlimmer als die Überdeckung.
   ========================================================= */





/* Eigener Bildlauf: Ein Aufmaß mit vielen Zimmern ist länger als der
   Bildschirm - ohne das wäre der untere Teil unerreichbar. */

.mengen-inhalt .card-section {
  border: none;
  padding: 0;
  margin-bottom: 14px;
  box-shadow: none;
}


/* Freigabelink zur Bildergalerie in der Projektkarte */



.galerie-zeile .hint { margin-right: auto; }

/* Spalte "muss bestellt werden" in der Materialliste des Projekts */


/* Stornieren: zurückhaltend, aber erkennbar - es ist kein Alltagsknopf. */



/* Vermerk "storniert" in der Projektliste */


/* Freigabelink zur Bildergalerie in der Projektkarte */



.galerie-zeile .hint { margin-right: auto; }

/* Spalte "muss bestellt werden" in der Materialliste des Projekts */


/* Stornieren: zurückhaltend, aber erkennbar - es ist kein Alltagsknopf. */



/* Vermerk "storniert" in der Projektliste */


/* =========================================================
   SCHWEBENDES FENSTER MIT DEN AUFMASS-MENGEN
   ========================================================= */







/* Im Fenster braucht der Kasten keinen eigenen Rahmen mehr. */
.mengen-inhalt .card-section { border: none; padding: 0; margin-bottom: 14px; }


/* Galeriecounter in der Statistik */
.galerie-tabelle {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.galerie-tabelle th {
  text-align: left;
  padding: 7px 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
  font-size: 0.8rem;
  color: #555;
}
.galerie-tabelle td { padding: 7px 10px; border-bottom: 1px solid #f0ece6; vertical-align: middle; }
.galerie-tabelle tr:last-child td { border-bottom: none; }
.galerie-projektlink {
  color: var(--dunkel);
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.galerie-projektlink:hover { color: var(--green); text-decoration: underline; }
/* Die Adresse ist lang - sie darf die Tabelle nicht sprengen. */
.galerie-linkfeld {
  font-family: monospace;
  font-size: 0.74rem;
  color: #5a6a7a;
  overflow-wrap: anywhere;
}
.galerie-loeschform { display: inline; margin: 0; }

/* Galerie- und Mengenknöpfe reihen sich in dieselbe Leiste ein wie
   Bearbeiten, Duplizieren und Co. */






/* "Drucken" trug bisher btn-small und war dadurch kleiner als die übrigen -
   in einer Reihe fällt das auf. */

/* Der Freigabelink unter den Mitarbeitern */




/* Fenster "Weitere Angaben" - dieselbe Machart wie die Aufmaß-Mengen. */



/* Der Knopf steht unter den Bemerkungen und füllt die Spalte. */


/* Zwischenüberschriften im Fenster "Weitere Angaben" */




/* Kennzeichnung externer und inaktiver Mitarbeiter */
.employee-kategorie-badge {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 10px;
  font-size: 0.72rem;
  font-weight: 700;
  margin-left: 6px;
}
.employee-kategorie-badge.kat-extern { background: #e3ecf5; color: #2b5578; }
.employee-kategorie-badge.kat-inaktiv { background: #eee9e3; color: #77706a; }

/* Überschriften der Mitarbeitergruppen */
/* Jede Zugehörigkeit in einem eigenen, farbig unterlegten Kasten - so ist
   auf einen Blick zu sehen, wo eine Gruppe endet und die nächste beginnt. */
.employee-gruppe {
  border-radius: 10px;
  padding: 12px 14px 6px;
  margin-bottom: 18px;
  border: 1px solid var(--border);
}
.gruppe-intern   { background: #f3f6f2; border-color: #dbe4d8; }
.gruppe-extern   { background: #eef2f7; border-color: #d6e0ea; }
.gruppe-sonstige { background: #f7f4ef; border-color: #e6ded2; }
.gruppe-inaktiv  { background: #f2f0ee; border-color: #e0dbd6; }

.employee-gruppe-titel {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #6b645d;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

/* Abstand zum letzten Mitarbeiter darüber - der Schalter klebte sonst an
   der Liste und wirkte wie ein Teil davon. */
.employee-inaktiv-schalter { margin-top: 22px; }

.employee-rechte-hinweis { display: block; margin-top: 6px; font-size: 0.78rem; }

/* Bereichswechsel im Backend-Burgermenü - wie in den Apps */


/* Eingebetteter Bereich (Einstellungen → Mitarbeiter und Co.): Dort gibt es
   weder Kopfleiste noch Reiter. Der Abstand, den der Rumpf für die feste
   Kopfleiste freihält, wäre hier eine reine Lücke - genau die stand über der
   Überschrift. */
body.nur-bereich {
  padding-top: 0;
  padding-bottom: 16px;
}
body.nur-bereich main { padding-top: 10px; }
/* Die Überschrift des Bereichs steht in den Einstellungen schon über dem
   eingebundenen Fenster - hier stünde sie ein zweites Mal, Wort für Wort. */
body.nur-bereich .tab-panel > h2 { display: none; }
/* Der Fließtext rückt dadurch an die erste Stelle. Sein negativer oberer
   Abstand von -6px war gedacht, um ihn an die Überschrift heranzuziehen -
   ohne sie ragt er über den oberen Rand des Bereichs hinaus. Und dieser Rand
   SCHNEIDET: Der Bereich trägt "overflow-x: auto" für die breiten Tabellen,
   und damit wird auch senkrecht beschnitten. Die erste Textzeile war oben
   halb abgeschnitten. */
body.nur-bereich .tab-panel > h2 + .hint { margin-top: 0; }

/* =========================================================
   MITARBEITER BEARBEITEN - zeilenweiser Aufbau
   Alle Felder gleich hoch und gleich breit; Beschriftung darüber,
   Hinweis darunter. Vorher sprangen sie je nach Inhalt in der Größe.
   ========================================================= */
.employee-edit-zeile {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 14px;
}
.employee-feld {
  flex: 1 1 200px;
  min-width: 170px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.employee-feld-leer { visibility: hidden; }
.employee-feld-titel {
  font-size: 0.78rem;
  font-weight: 700;
  color: #6b645d;
  letter-spacing: 0.02em;
}
.employee-feld > input,
.employee-feld > select {
  width: 100%;
  height: 38px;
  box-sizing: border-box;
  padding: 0 10px;
  font-size: 0.92rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  background: #fff;
}
/* Feste Höhe, damit die Felder in einer Reihe bleiben, auch wenn nur bei
   manchen ein Hinweis darunter steht. */
.employee-feld-info {
  min-height: 20px;
  font-size: 0.78rem;
  color: #7a736b;
  display: flex;
  align-items: center;
  gap: 8px;
}
.employee-speicher-zeile {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 6px;
}
.employee-loeschen { margin-left: auto; }

/* Kleiner Knopf für "EDIT" in der Mitarbeiterzeile */
.btn-mini {
  padding: 4px 12px;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 6px;
}

/* Datumsfelder im Mitarbeiter-Formular: Die Ziffernfelder ersetzen das
   eigentliche Feld. Damit die Zeile bündig bleibt, bekommen sie dieselbe
   Höhe wie die übrigen Eingaben. */
.employee-feld .digit-date-eingabe { height: 38px; }
.employee-feld .digit-date-teil { height: 38px; padding: 0 2px; }

/* Materialzuordnung: Mehrfachauswahl der Ansprechpartner */
.regel-auswahl {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  padding: 8px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fbfaf8;
}
.regel-auswahl-titel {
  width: 100%;
  font-size: 0.76rem;
  font-weight: 700;
  color: #6b645d;
}
.regel-auswahl-eintrag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.88rem;
}
/* Rangfolge der Regeln */
.regel-rang { white-space: nowrap; }
.regel-nummer {
  display: inline-block;
  min-width: 20px;
  font-weight: 700;
  color: #6b645d;
}
.regel-hoch, .regel-runter { padding: 0 3px; font-size: 0.8rem; }
.regel-hoch[disabled], .regel-runter[disabled] { opacity: 0.25; cursor: default; }




/* Hinweis auf einen neuen Eintrag im Short Verlauf.
   Auf die Spitze gestelltes Dreieck mit rotem Rand, leer - ohne Zeichen
   darin. Genauso hoch wie der Nummernkreis dahinter, damit beide auf einer

/* Überschrift je Aufmaß im Mengenfenster - nur bei mehreren nötig */



/* Rahmen um eine Fotokachel: Das Auswahlkästchen liegt absolut darin. Ohne
   diesen Bezugspunkt richtete es sich am ganzen Fenster aus und lag
   irgendwo - anwählen ließen sich die Bilder damit nicht. */



/* Treppen-Aufmaß im Backend: Tabellen mit fester Spaltenaufteilung, damit
   Kopfzeile und Werte untereinander stehen. */











/* Kalenderabgleich in den Einstellungen */
.kalender-zugang {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.kalender-zugang label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #6b645d;
}
.kalender-zugang input {
  height: 38px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 400;
  color: var(--dark);
  border: 1px solid var(--border);
  border-radius: 7px;
}
.kalender-knoepfe {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.kalender-zeile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 8px;
  background: #fff;
}
.kalender-name { font-weight: 700; }

/* Kalendertermine in der Projektkarte */





/* =========================================================
   KATALOGE: Knopfzeile und Tabellenkopf bleiben stehen,
   über die VOLLE Breite. Formular schwebt darüber.
   Betrifft Material, Aufgaben und Werkzeug.
   ========================================================= */

/* Die Knopfzeile bleibt stehen. Der Hintergrund reicht über die ganze
   Fensterbreite: Die negativen Außenabstände ziehen den Kasten bis an beide
   Ränder, die gleich großen Innenabstände schieben den Inhalt wieder an
   seinen Platz. Ohne das lief die Tabelle links und rechts sichtbar hinter
   der Zeile durch. */
#materials > .collapsible-form-toggle,
#templates > .collapsible-form-toggle,
#tools > .collapsible-form-toggle {
  position: sticky;
  top: 118px;
  z-index: 40;
  background: var(--bg);
  /* Die allgemeine Regel begrenzt diese Zeile auf 1400px - dadurch endete
     der Hintergrund vorzeitig und die Tabelle schien an den Rändern durch.
     Hier ausdrücklich aufheben. */
  max-width: none;
  width: auto;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: calc(50vw - 50%);
  padding-right: calc(50vw - 50%);
  padding-top: 10px;
  padding-bottom: 10px;
  margin-bottom: 0;
}

/* Der Tabellenkopf bleibt darunter stehen. Für die volle Breite sorgen hier
   Schlagschatten nach links und rechts - anders als Außenabstände erzeugen
   sie keinen waagerechten Bildlauf. */
#materials thead th,
#templates thead th,
#tools thead th {
  position: sticky;
  /* 118px Kopfleiste + 63px Knopfzeile (Knopf 43px + 2x10px Innenabstand).
     Als Rechnung notiert, damit beim Ändern der Knopfgröße klar ist, was
     angepasst werden muss. */
  top: calc(118px + 63px);
  z-index: 35;
  background: var(--bg);
}
#materials thead th:first-child,
#templates thead th:first-child,
#tools thead th:first-child { box-shadow: -100vw 0 0 var(--bg), inset 0 -1px 0 var(--border); }
#materials thead th:last-child,
#templates thead th:last-child,
#tools thead th:last-child { box-shadow: 100vw 0 0 var(--bg), inset 0 -1px 0 var(--border); }
#materials thead th:not(:first-child):not(:last-child),
#templates thead th:not(:first-child):not(:last-child),
#tools thead th:not(:first-child):not(:last-child) { box-shadow: inset 0 -1px 0 var(--border); }

/* Im eingebetteten Bereich der Einstellungen fehlt die Kopfleiste darüber. */
body.nur-bereich #materials > .collapsible-form-toggle,
body.nur-bereich #templates > .collapsible-form-toggle,
body.nur-bereich #tools > .collapsible-form-toggle { top: 0; }
body.nur-bereich #materials thead th,
body.nur-bereich #templates thead th,
body.nur-bereich #tools thead th { top: 63px; }

/* Das Formular schwebt über der Tabelle - ohne Abdunkelung, die Liste bleibt
   sichtbar. Die Tabelle darunter bewegt sich dabei nicht.
   Gilt für JEDE Formularart: Material und Werkzeug nutzen "inline-form",
   die Aufgaben "project-form-box" - deshalb hier ohne Zusatzklasse. */
.katalog-fenster {
  position: fixed;
  top: 190px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2500;
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 230px);
  overflow-y: auto;
  background: #fff;
  border: 1px solid #cfc7bd;
  border-radius: 12px;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.22);
  padding: 20px 22px;
  margin: 0;
}

/* Der randlose Hintergrund der Knopfzeile rechnet mit der Fensterbreite;
   diese schließt die Bildlaufleiste ein. Ohne diese Zeile entstünde dadurch
   ein waagerechter Bildlauf von wenigen Pixeln.

   VORSICHT: "clip" schneidet ab, ohne einen Bildlauf anzubieten. Was hier
   übersteht, ist nicht nur unsichtbar, sondern unerreichbar - auf dem Handy
   lagen so einmal 704 Pixel der Rechtetabelle dauerhaft ausserhalb. Alles,
   was breiter werden kann als der Bildschirm, braucht deshalb seinen
   EIGENEN Bildlauf (siehe .tabelle-rollbar weiter unten); diese Zeile ist
   kein Auffangnetz dafür. */
main { overflow-x: clip; }

/* Datum und Download an einer Fotokachel */




/* Protokoll */
.protokoll-filter { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 14px; }
.protokoll-tabelle { font-size: 0.86rem; }
.protokoll-zeit { white-space: nowrap; color: #6b645d; }
.protokoll-text { max-width: 640px; }
.protokoll-marke {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
}
.protokoll-marke-erfolg  { background: #e5f2e8; color: #2f6b43; }
.protokoll-marke-fehler  { background: #fbe6e4; color: #a4413c; }
.protokoll-marke-warnung { background: #fdf2dd; color: #8a6516; }
.protokoll-marke-info    { background: #e9eef2; color: #4a5a66; }
.protokoll-sicherung { font-size: 0.95rem; }
.protokoll-sicherung.protokoll-fehler { color: #a4413c; }
.protokoll-sicherung.protokoll-erfolg { color: #2f6b43; }

/* =========================================================
   PROJEKTFORTSCHRITT
   Links die Übersicht, rechts die Schritte - je zur Hälfte.
/* Die Auswahl schwebt über der Projektübersicht links. Dort ist Platz, und
   der Stand rechts bleibt sichtbar - man sieht beim Zuweisen also, was schon
/* Die frühere Regel steht nicht mehr hier - sie überschrieb weiter oben
   gesetzte Werte, weil sie später kommt. Alles zum Titel steht jetzt


/* Schritte des Projektfortschritts pflegen */







/* Kennzeichnung eines duplizierten Aufmaßes */



/* =========================================================
   ARBEITSNACHWEIS - Fenster zum Korrigieren der Zahlen
   ========================================================= */





















.titel-seite { font-weight: 400; opacity: 0.75; }

/* Der aktuelle Bereich neben dem Burger. */



/* =========================================================
   BURGERMENÜ DER VERWALTUNG (ul.bm-liste)
   Eigener Aufbau mit eigenem Präfix: Die früheren Reiterknöpfe
   brachten über dreißig Regeln mit (Abstände, grüne Gruppenköpfe,
   Handy-Umbrüche), die das Menü durcheinanderbrachten.
   ========================================================= */
.nav-burger-menu { max-height: none !important; overflow: visible !important; min-width: 250px; }



.bm-gruppe { position: relative; }

/* Jeder Punkt gleich - ob mit Unterpunkten oder ohne. */

.bm-gruppe.offen > .bm-kopf,
.bm-gruppe:hover > .bm-kopf { background: #f1ede7 !important; }
.bm-punkt.ist-aktiv { background: #e5f2e8 !important; color: #1f3f2b !important; }
.bm-gruppe.hat-aktiven > .bm-kopf { color: #1f3f2b !important; }
/* Pfeil: Hier klappt etwas seitlich auf. */
.bm-kopf::after { content: "›"; margin-left: auto; font-size: 1.25rem; line-height: 1; color: #8d867e; }



/* Seitliches Untermenü: direkt rechts neben dem Punkt, ohne Lücke - so
   verlässt die Maus beim Hinüberfahren nie den Bereich. */

/* Unsichtbare Brücke über die 6 px Abstand. */

.bm-gruppe.offen > .bm-unter { display: block; }
@media (hover: hover) { .bm-gruppe:hover > .bm-unter { display: block; } }


/* Handy: neben dem Menü ist kein Platz - dort klappt das Untermenü unter
   dem angetippten Punkt auf. */


/* Serverprüfung */
.pruefung-tabelle { font-size: 0.9rem; }
.pruefung-hinweis { color: #6b645d; font-family: ui-monospace, "Courier New", monospace; font-size: 0.82rem; }
.pruefung-marke {
  display: inline-block;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
}
.pruefung-marke-ja { background: #e5f2e8; color: #2f6b43; }
.pruefung-marke-nein { background: #fbe6e4; color: #a4413c; }
.pruefung-fazit {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 9px;
  font-size: 0.95rem;
  line-height: 1.45;
}
.pruefung-fazit-gut { background: #e5f2e8; border: 1px solid #a8ccb4; color: #1f3f2b; }
.pruefung-fazit-hinweis { background: #fdf2dd; border: 1px solid #ddc98a; color: #7a5a12; }

/* Papierkorb */
.pk-gitter { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 14px; }
.pk-eintrag {
  margin: 0;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
}
.pk-eintrag img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.pk-kein-bild {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  background: #f1ede7;
  color: #8d867e;
  font-size: 0.85rem;
}
.pk-eintrag figcaption { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px; }
.pk-art {
  align-self: flex-start;
  padding: 1px 8px;
  border-radius: 999px;
  background: #e9eef2;
  color: #4a5a66;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
}
.pk-name { font-size: 0.88rem; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Die verbleibende Frist deutlich - danach ist das Bild weg. */
.pk-frist { font-size: 0.82rem; font-weight: 700; color: #8a6516; }
.pk-knoepfe { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.pk-knoepfe form { margin: 0; }

/* Fotos aus einer Sicherung zurückholen */

.fz-zeile { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 0.9rem; }
.fz-zeile input { width: 17px; height: 17px; margin: 0; }

.fz-zuordnen { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 12px; }
.fz-zuordnen select {
  flex: 1 1 260px;
  padding: 9px 11px;
  font-family: inherit;
  font-size: 0.95rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}

/* Wissen: Kategorien pflegen */
.wi-kat-neu { display: flex; gap: 10px; flex-wrap: wrap; }
.wi-kat-neu input {
  flex: 1 1 240px;
  min-height: 44px;
  padding: 0 12px;
  font-family: inherit;
  font-size: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.wi-kat-zeile { display: flex; gap: 8px; align-items: center; margin: 0; }
.wi-kat-zeile input {
  flex: 1 1 180px;
  min-width: 0;
  min-height: 36px;
  padding: 0 10px;
  font-family: inherit;
  font-size: 0.95rem;
  border: 1px solid var(--border);
  border-radius: 7px;
}
.wi-kat-pfeile { display: flex; gap: 6px; }
.wi-kat-pfeile form { margin: 0; }

/* --- Farbwahl je Kategorie (Wissen und Fotogalerie) --- */
.kat-farbe { display: inline-flex; align-items: center; }
.kat-farbe input[type="color"] {
  width: 42px;
  height: 34px;
  padding: 2px;
  border: 1px solid #ddd6cd;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
}
.kat-farbe-weg {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  color: #6b645d;
  white-space: nowrap;
}
.kat-farbe-weg input[type="checkbox"] { width: 18px; height: 18px; }
/* Ohne gesetzte Farbe zeigt das Feld nur einen neutralen Grauton - dieser
   Zusatz sagt, dass das KEINE gewählte Farbe ist. */
.kat-farbe-keine { font-size: 0.78rem; color: #8a837b; margin-left: 5px; }


/* =========================================================
   HANDY: Die Verwaltung mit dem Daumen bedienen
   =========================================================

   Die Verwaltung ist für den Schreibtisch gebaut. Auf der Baustelle wird
   sie trotzdem benutzt, und dort gab es zwei Sorten Ärger: Tabellen, die
   über den Bildschirmrand hinausliefen und dort ABGESCHNITTEN wurden
   (siehe "main { overflow-x: clip }"), und Bedienelemente, die mit 13 bis
   20 Pixeln zu klein für einen Finger sind. Gemessen waren 607 von 613
   Elementen kleiner als die üblichen 44 Pixel.
   ========================================================= */

/* Ein Rahmen, der waagerecht rollt. Alles, was breiter werden kann als der
   Bildschirm, gehört hier hinein - dann bleibt es erreichbar, statt vom
   abschneidenden "main" verschluckt zu werden. */
.tabelle-rollbar {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 2px;
}
.tabelle-rollbar > table { margin-bottom: 0; }

@media (max-width: 900px) {
  /* Sicherung für Tabellen ohne eigenen Rahmen: Sie rollen dann selbst.
     "width: max-content" mit "min-width: 100%" behält die volle Breite,
     wenn die Tabelle schmal genug ist, und lässt sie sonst wachsen -
     ohne das bliebe von "width: 100%" bei display:block nichts übrig. */
  .card-section > table,
  .card-section > form > table {
    display: block;
    overflow-x: auto;
    width: max-content;
    min-width: 100%;
    max-width: 100%;
  }

  /* Fingergroesse. 44 Pixel sind das uebliche Mass fuer eine sichere
     Treffflaeche; mit Arbeitshandschuhen ist es eher das Minimum.
     Die Schrift waechst dabei NICHT mit - nur die Flaeche. */
  .konfig-inhalt .btn,
  .konfig-inhalt .btn-small,
  .konfig-inhalt button:not(.nav-burger-btn),
  .konfig-inhalt input[type="submit"],
  .konfig-inhalt input[type="button"],
  .konfig-inhalt a.btn {
    min-height: 44px;
  }
  /* Alle Eingabefelder AUSSER Kaestchen und Auswahlknoepfen - die haben
     ihre eigene Regel weiter unten. Als Ausschluss geschrieben, weil eine
     Aufzaehlung der Typen zwangslaeufig welche vergisst: Beim ersten
     Versuch fehlten "file", "url" und "color", und genau die waren dann
     21 bis 39 Pixel hoch. */
  .konfig-inhalt input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]),
  .konfig-inhalt select,
  .konfig-inhalt textarea {
    min-height: 44px;
    /* 16px verhindert, dass iOS beim Antippen hineinzoomt. */
    font-size: 16px;
  }

  /* Kontrollkaestchen und Auswahlknoepfe lassen sich nicht einfach
     vergroessern, ohne ploetzlich riesig zu wirken. 24 Pixel sichtbar,
     die Trefferflaeche wird ueber den Abstand auf 44 gebracht. */
  .konfig-inhalt input[type="checkbox"],
  .konfig-inhalt input[type="radio"] {
    width: 24px;
    height: 24px;
    margin: 10px;
  }

  /* Das Farbfeld hat eine eigene, spezifischere Regel (.kat-farbe
     input[type="color"], 34 Pixel hoch). Ohne diese Zeile bliebe es dabei -
     die allgemeine Regel oben kommt gegen sie nicht an. */
  .konfig-inhalt .kat-farbe input[type="color"] {
    height: 44px;
    width: 52px;
  }

  /* Die kleinen Zeichenknoepfe (Loeschen, Hoch, Runter) stehen oft dicht
     nebeneinander - ohne Mindestbreite trifft der Daumen den falschen. */
  .konfig-inhalt .link-btn,
  .konfig-inhalt .link-btn-danger {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Zeilen, die auf dem Schreibtisch nebeneinander passen, brechen hier um,
     statt die Seite breitzuziehen. */
  .konfig-name-form,
.inline-form {
    flex-wrap: wrap;
  }

  /* Ein Eingabefeld, das breiter ist als der Bildschirm, zieht alles mit. */
  .konfig-inhalt input[type="text"],
  .konfig-inhalt input[type="password"],
  .konfig-inhalt select {
    max-width: 100%;
  }

  /* Das Bereichsmenue wandert auf dem Handy in ein Aufklappfenster, das
     der schwebende Knopf unten rechts oeffnet (siehe .konfig-schwebe).
     Untereinander waeren es 18 Eintraege ueber dem Inhalt - man muesste
     erst an allen vorbeiscrollen. Eine seitlich rollende Leiste war der
     erste Versuch, taugte aber zum Suchen nicht: Man wischt, ohne zu
     wissen, wie weit es noch geht.
     Das Menue im Seitenfluss wird deshalb ausgeblendet; seine Eintraege
     stehen als Kopie im Aufklappfenster. */
  .konfig-menue { display: none; }
}


/* --- Grenzen beim Hochladen: Karten statt Tabelle ---
   Der WERT ist die Information, auf die es ankommt. In einer Tabelle mit
   vier Spalten stand er auf dem Handy hinter dem Bildschirmrand; hier
   steht er immer gleich neben dem Namen. */
.grenzen-liste { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 10px; }
.grenzen-punkt {
  border: 1px solid var(--border);
  border-left: 4px solid var(--green);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}
.grenzen-punkt-knapp { border-left-color: var(--yellow); background: #fffdf5; }
.grenzen-kopf {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.grenzen-name { font-size: 0.86rem; color: #5c554e; }
.grenzen-wert { font-size: 1.25rem; font-weight: 700; white-space: nowrap; }
.grenzen-bedeutung { font-weight: 600; font-size: 0.92rem; margin-top: 2px; }
.grenzen-erklaerung { font-size: 0.85rem; color: #6b645d; line-height: 1.5; margin-top: 4px; }


/* =========================================================
   Bereichsmenue als Aufklappfenster (nur Handy)
   ========================================================= */
.konfig-schwebe {
  /* Auf dem Schreibtisch unsichtbar - dort steht das Menue links. */
  display: none;
  position: fixed;
  right: 16px;
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  z-index: 900;
  width: 56px;
  height: 56px;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--dark);
  color: #fff;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
}
.konfig-schwebe:active { transform: translateY(1px); }

.konfig-menue-schicht {
  position: fixed;
  inset: 0;
  /* Ueber der Kopfleiste (2100) und der Reiterleiste (2090), aber unter
     den Fenstern des Fortschritts (2600) und des Arbeitsnachweises (3000).
     Mit dem ersten Wert 950 lag die Schicht UNTER der Kopfleiste: Ein
     Klick daneben ging durch sie hindurch auf einen Verweis in der
     Kopfzeile - statt das Menue zu schliessen, verliess man die Seite. */
  z-index: 2200;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.konfig-menue-schicht[hidden] { display: none; }

.konfig-menue-fenster {
  width: 100%;
  max-width: 520px;
  background: var(--bg);
  border-radius: 14px 14px 0 0;
  /* Nicht die ganze Hoehe: Der Rest zeigt, dass darunter die Seite liegt,
     und ein Tippen daneben schliesst. */
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.3);
}
.konfig-menue-fenster-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 10px;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
}
.konfig-menue-zu {
  min-width: 44px;
  min-height: 44px;
  border: none;
  background: none;
  font-size: 1.2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--dark);
}
.konfig-menue-fenster-inhalt {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 10px 12px calc(14px + env(safe-area-inset-bottom, 0px));
}
.konfig-menue-fenster-inhalt .konfig-menue-punkt {
  min-height: 48px;
  display: flex;
  align-items: center;
  background: #fff;
  border-color: var(--border);
}
.konfig-menue-fenster-inhalt .konfig-menue-punkt.aktiv {
  border-color: var(--brand);
  border-left: 4px solid var(--brand);
  font-weight: 700;
}
.konfig-menue-fenster-inhalt .konfig-menue-trenner {
  border: none;
  border-top: 1px solid var(--border);
  margin: 8px 4px;
}

@media (max-width: 900px) {
  .konfig-schwebe { display: flex; }
}