/**
 * BBF Web-App - Styling fuer Handy und Tablet.
 *
 * Grundsaetze:
 *  - Kein Footer (maximaler Platz fuer die Inhalte)
 *  - Header einzeilig: Logo, Titel, Benutzer und Abmelden nebeneinander
 *  - Inhalte nutzen die volle Breite, sind aber auf grossen Schirmen zentriert
 *  - Sichere Bereiche (Notch) via env(safe-area-inset-*) beruecksichtigt
 */

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

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  overscroll-behavior-y: contain;
  /* iOS vergroessert Schriften sonst eigenmaechtig - dadurch wirkte die
     Fusszeile groesser als im Backend, obwohl derselbe Wert eingestellt war. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Die Reservierung von Platz fuer den Scrollbalken wird per JavaScript
   gemacht (siehe "gleichmaessigerScrollraum" in app.js) - scrollbar-gutter
   wird nicht von jedem Browser unterstuetzt (u.a. Safari nicht) und haette
   dort weiterhin zu einer einseitig verschobenen Mitte gefuehrt. Die
   JavaScript-Loesung misst die tatsaechliche Breite in JEDEM Browser und
   funktioniert deshalb zuverlaessig ueberall. */

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--bg);
  color: var(--dark);
  font-size: 16px;
}

.hint { color: #777; font-size: 0.9rem; padding: 16px; text-align: center; }

/* =============================== ANMELDUNG =============================== */
.login-screen {
  display: none;
  min-height: 100%;
  align-items: center;
  justify-content: center;
  background: var(--dark);
  padding: 24px;
}
.login-box {
  width: 100%;
  max-width: 340px;
  background: white;
  border-radius: 14px;
  padding: 28px 24px;
  text-align: center;
}
.login-logo { width: 72px; height: auto; margin-bottom: 10px; }
.login-box h1 { font-size: 1.15rem; margin: 0 0 20px; }
.login-box input {
  width: 100%;
  padding: 13px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
}
.btn {
  border: none;
  border-radius: 8px;
  padding: 13px 18px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.btn-primary { width: 100%; background: var(--brand); color: white; }
.login-error {
  margin-top: 12px;
  color: var(--red);
  font-size: 0.88rem;
}

/* ================================= APP ================================== */
/* Kopfbereich und Reiter sind "sticky" statt in einem eigenen, inneren
   Scroll-Container zu stecken - die ganze Seite scrollt jetzt ganz normal.
   Das ist die zuverlässigste Lösung gegen einseitig verschobene Mitte durch
   Scrollleisten: Ein eigener innerer Scroll-Bereich behandelt Scrollleisten
   in jedem Browser (und sogar in jeder Situation) leicht unterschiedlich -
   die normale Seiten-Scrollleiste tut das nicht. */
.app-screen {
  display: none;
  flex-direction: column;
  /* Mindestens bildschirmhoch, damit der Inhaltsbereich darunter den
     restlichen Platz ausfuellt. Sonst war er nur so hoch wie sein Inhalt -
     und seitliches Wischen wurde ausserhalb gar nicht erkannt. */
  min-height: 100vh;
}

/* Header: alles in EINER Zeile, damit maximal viel Platz fuer Inhalte bleibt */
.app-sticky-kopf {
  position: sticky;
  top: 0;
  z-index: 20;
  flex-shrink: 0;
}
.app-header {
  display: flex;
  align-items: center;
  gap: 8px;
  background: var(--brand);
  color: white;
  padding: 8px 12px;
  padding-top: calc(8px + env(safe-area-inset-top));
  flex-shrink: 0;
}
.app-brand { display: flex; align-items: center; gap: 8px; }
.app-logo { width: 26px; height: 26px; flex-shrink: 0; border-radius: 4px; }
.app-title {
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}
/* Der Burgerknopf sitzt inzwischen in der Reiterleiste (".app-tabs
   .app-menu-btn" weiter unten) statt im Kopfbereich - hier war frueher eine
   erste, inzwischen ungenutzte Fassung samt Menue-Panel und Benutzername. */

.app-tabs {
  display: flex;
  background: white;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.app-tab {
  flex: 1;
  padding: 12px 6px;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-size: 0.9rem;
  font-weight: 600;
  color: #888;
  cursor: pointer;
  font-family: inherit;
}
.app-tab.active { color: var(--brand); border-bottom-color: var(--brand); }

.offline-banner {
  background: var(--yellow);
  color: var(--dark);
  font-size: 0.82rem;
  text-align: center;
  padding: 7px 12px;
  flex-shrink: 0;
}

.app-main {
  flex: 1;
  /* Fuellt den restlichen Platz - dadurch laesst sich auf der ganzen
     Flaeche wischen, nicht nur dort, wo zufaellig Inhalt steht. */
  min-height: 0;
  padding-bottom: env(safe-area-inset-bottom);
}
.app-panel { display: none; }
.app-panel.active { display: block; }

/* Inhalte: volle Breite auf dem Handy, zentriert und begrenzt auf grossen Schirmen.
   Die Aufmaß-Ansicht fehlte hier - ihre Eingabefelder klebten dadurch ohne
   jeden Abstand direkt am Bildschirmrand. */
.project-list,
#task-view,
#material-view,
#delivery-view,
#recent-view,
#aufmass-view {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 12px;
}

/* ---------------------------- Projektliste ---------------------------- */
.project-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  text-align: left;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  cursor: pointer;
  font-family: inherit;
}
.project-item.active { border: 2px solid var(--brand-dark); padding: 13px 15px; }
.project-item-customer { font-weight: 400; font-size: 1rem; color: var(--dark); }
.project-item-address { font-size: 1.05rem; font-weight: 700; color: var(--dark); }
.project-item-deadline { font-size: 0.8rem; color: #a3701f; margin-top: 2px; }

/* Überschrittene Deadline: dauerhaft rot umrandet MIT rotem Hintergrund -
   in jedem Zustand (auch ausgewählt/aktiv), Rot gewinnt immer. */
.project-item.deadline-ueberschritten,
.project-item.deadline-ueberschritten.active {
  border-color: var(--red);
  background: #fbeaea;
}
.project-item.deadline-ueberschritten .project-item-deadline {
  color: var(--red);
  font-weight: 700;
}

/* ------------------------------ Aufgaben ------------------------------ */
.detail-head {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 12px;
}
.detail-title {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 400;
  line-height: 1.35;
}
.detail-title strong { font-weight: 700; }
.detail-title-address { font-weight: 400; }

.task-item {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.task-item-head { display: flex; align-items: center; gap: 9px; }
.task-item-title { font-weight: 600; font-size: 0.95rem; }
.task-item-qty { font-size: 0.85rem; color: #2f6fb0; margin-top: 6px; }

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

/* Status-Buttons: gross genug fuer Bedienung mit Handschuhen auf der Baustelle */
.task-item-actions {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.status-btn {
  padding: 11px 8px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: white;
  font-size: 0.85rem;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  font-family: inherit;
}
.status-btn.active { background: var(--brand); border-color: var(--brand); color: white; }

/* ------------------------------ Material ------------------------------ */
.material-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 13px 16px;
  margin-bottom: 8px;
}
.material-title { font-weight: 600; font-size: 0.92rem; }
.material-qty {
  font-weight: 700;
  font-size: 0.92rem;
  color: #2f6fb0;
  white-space: nowrap;
}

/* --------------------------- Tablet / Desktop --------------------------- */
@media (min-width: 700px) {
  .app-tab { font-size: 0.95rem; padding: 14px 8px; }
  .task-item-actions { grid-template-columns: repeat(4, 1fr); }
  .app-title { font-size: 1.05rem; }
}

/* =========================================================
   ANGLEICHUNG AN DAS BACKEND-DESIGN
   Gleiche Kartenoptik (Radius 12px, feiner Schatten), gleiche
   Reiter-Optik und gleiche Farbwerte wie im Verwaltungsbereich.
   ========================================================= */
.login-logo { background: transparent; }

.project-item,
.task-item,
.material-item,
.detail-head,
.recent-item {
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}

.app-tabs {
  z-index: 5;
}
.app-tab {
  font-weight: 600;
  letter-spacing: 0.01em;
}

/* Auswahl nach dem Login (Rolle Chef) */
.choice-buttons {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-top: 6px;
}
.choice-btn {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 20px 18px;
  border: 2px solid var(--brand);
  border-radius: 12px;
  background: white;
  color: var(--dark);
  text-decoration: none;
  cursor: pointer;
  font-family: inherit;
  text-align: center;
}
.choice-btn:active { background: var(--bg); }
.choice-btn-title { font-size: 1.1rem; font-weight: 700; color: var(--brand); }
.choice-btn-sub { font-size: 0.82rem; color: #777; }

/* Reiter "Kürzlich erledigt" */
.recent-item {
  background: white;
  border: 1px solid var(--border);
  padding: 14px 16px;
  margin-bottom: 10px;
}
.recent-item-customer { font-weight: 700; font-size: 1rem; }
.recent-item-address { font-size: 0.85rem; color: #777; }
.recent-item-time { font-size: 0.8rem; color: #a3701f; margin: 6px 0 12px; }
.reactivate-btn { width: 100%; }

/* Mengen-Dialog */
.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;
  padding: 20px;
  z-index: 100;
}
.modal-box {
  background: white;
  border-radius: 12px;
  padding: 22px 20px;
  width: 100%;
  max-width: 360px;
}
.modal-box p { margin: 0 0 14px; font-size: 0.92rem; }
#quantity-input {
  width: 100%;
  padding: 13px 14px;
  border: 2px solid var(--brand);
  border-radius: 8px;
  font-size: 1.05rem;
  margin-bottom: 14px;
}
.modal-actions { display: flex; gap: 10px; }
.modal-actions .btn { flex: 1; }
.btn-secondary { background: var(--bg); color: var(--dark); border: 1px solid var(--border); }

/* =========================================================
   KOPFBEREICH SCHWARZ, TITEL MITTIG - FUSSZEILE MIT KONTO
   ========================================================= */
.app-header {
  background: var(--dark);
  /* Titel wieder mittig - das Burgermenü sitzt jetzt in der Reiterleiste. */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 12px;
  padding-top: calc(10px + env(safe-area-inset-top));
}
.app-logo { width: 30px; height: 30px; border-radius: 0; }
.app-title { font-size: 1.05rem; }

/* =========================================================
   PROJEKT-INFOFELD (unter dem Titel, vor den Aufgaben)
   ========================================================= */
.project-info-toggle {
  display: block;
  width: 100%;
  max-width: 480px;
  margin: 0 auto 10px;
  padding: 9px 14px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--brand-dark);
  font-family: inherit;
  cursor: pointer;
}
.project-info-eingeklappt { display: none; }
.project-info {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
  padding: 14px 16px;
  margin-bottom: 12px;
}
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}
.info-row:last-of-type { border-bottom: none; }
.info-label { color: #777; font-size: 0.8rem; white-space: nowrap; }
/* Telefon/E-Mail: als Schaltflaeche erkennbar, oeffnet Telefon- bzw. Mail-App */
.info-link {
  color: var(--brand);
  font-weight: 600;
  text-decoration: none;
  padding: 4px 2px;
}
.info-note {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  font-size: 0.9rem;
  line-height: 1.45;
  white-space: pre-wrap;
}
.info-note strong { display: block; margin-bottom: 4px; font-size: 0.85rem; }

.section-heading {
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #888;
  margin: 18px 0 8px;
}

/* =========================================================
   STATUS-SCHALTFLAECHEN - je Status eine eigene Farbe
   ========================================================= */
.task-item-qty-hint { font-size: 0.82rem; color: #a3701f; margin-top: 6px; }
.task-item-reason { font-size: 0.85rem; color: #7a4fa0; margin-top: 6px; }

.status-btn-OPEN.active { background: #2f6fb0; border-color: #2f6fb0; color: white; }
.status-btn-PARTIAL.active { background: var(--yellow); border-color: var(--yellow); color: var(--dark); }
.status-btn-DONE.active { background: var(--green); border-color: var(--green); color: white; }
.status-btn-NOT_EXECUTED.active { background: var(--purple); border-color: var(--purple); color: white; }

/* Auch im nicht gewaehlten Zustand die Farbe andeuten */
.status-btn-OPEN { color: #2f6fb0; }
.status-btn-PARTIAL { color: #96751a; }
.status-btn-DONE { color: var(--green); }
.status-btn-NOT_EXECUTED { color: var(--purple); }

/* Countdown und Projekt-Abschluss in der Web-App */
.app-countdown {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #fff8e6;
  border: 1px solid var(--yellow);
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 14px;
  font-size: 0.88rem;
}
.link-btn {
  background: none;
  border: none;
  color: var(--brand);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.88rem;
}
.complete-project-btn { width: 100%; margin: 14px 0 24px; }
.complete-project-btn:disabled {
  background: #cfcac2;
  cursor: not-allowed;
}

.material-status {
  display: block;
  font-size: 0.75rem;
  color: #888;
  font-weight: 400;
  margin-top: 2px;
}

/* Lieferschein: Materialzeilen mit Haken */
.delivery-checkbox { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }
.employee-pick-list { display: flex; flex-direction: column; gap: 10px; margin: 12px 0; max-height: 220px; overflow-y: auto; }
.employee-pick { display: flex; align-items: center; gap: 10px; font-size: 0.95rem; }
.employee-pick input { width: 20px; height: 20px; }

.task-item-by { font-size: 0.85rem; color: var(--green); margin-top: 4px; }


.material-color {
  display: block;
  font-size: 0.8rem;
  color: #2f6fb0;
  font-weight: 600;
  margin-top: 2px;
}

/* Lieferschein: drei Haken je Material (gepackt / ausgeliefert / entfällt) */
.detail-title-sep { color: #999; font-weight: 400; }
.delivery-item { flex-direction: row; align-items: stretch; gap: 0; padding: 0; }
/* Feste Breiten, damit sich beim Anhaken nichts verschiebt. Die mittlere
   Spalte (Materialbezeichnung) bekommt bewusst mehr Platz als die beiden
   aeusseren. */
.delivery-item > * { min-width: 0; }
.delivery-item > .delivery-check { width: 27%; flex: 0 0 27%; }
.delivery-item > .delivery-name  { width: 46%; flex: 0 0 46%; }
.delivery-item > .delivery-menge { width: 27%; flex: 0 0 27%; }
/* Spalte 1: Haken, Beschriftung und - nach dem Anhaken - das Datum darunter */
.delivery-check {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  padding: 12px 10px;
  /* Alle drei Bereiche gleich breit */
  flex: 1 1 0;
  min-width: 0;
  border-right: 1px solid var(--border);
}
.delivery-label { font-size: 0.85rem; font-weight: 600; text-align: center; }
/* Der Platz fuer das Datum wird immer freigehalten - sonst wuerde die Zeile
   beim Anhaken hoeher und das ganze Layout wuerde springen. */
.delivery-date {
  /* WICHTIG: als Block darstellen - bei einem inline-Element (span) haette
     min-height keine Wirkung, und genau deshalb sprang das Layout bisher. */
  display: block;
  color: #777;
  font-size: 0.78rem;
  min-height: 1.1em;
  line-height: 1.1;
  text-align: center;
}

/* Spalte 2: Materialbezeichnung und Farbkennung */
.delivery-name {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 3px;
  padding: 12px 10px;
  border-right: 1px solid var(--border);
}

/* Spalte 3: geforderte Packmenge - deutlich hervorgehoben */
.delivery-menge {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 10px;
  text-align: center;
}
.delivery-menge .material-qty {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.25;
}
/* Versionsangabe wie im Backend: weiß, ohne Abschwächung */
.footer-version { color: #ffffff; }


/* Bereits gepacktes Material: komplette Zeile grün hinterlegt */
.delivery-item-gepackt {
  background: #e8f4ec;
  border-color: var(--green);
}
.delivery-item-gepackt .delivery-check,
.delivery-item-gepackt .delivery-name {
  border-right-color: #bcd9c6;
}
.task-item-note { font-size: 0.85rem; color: #96751a; margin-top: 4px; }
.material-nr { font-size: 0.75rem; color: #999; font-variant-numeric: tabular-nums; }

/* Überschrift im Lieferschein: mittig und mit mehr Luft zur Infobox darüber */
.section-heading-center {
  text-align: center;
  margin-top: 32px;
}

/* =========================================================
   FARBEN NACH AUFTRAGGEBER-TYP - bewusst sehr gedämpft,
   damit Texte gut lesbar bleiben.
   ========================================================= */
.ktyp-privat        { background: #f2f2f1; }
.ktyp-hausverwaltung{ background: #eaf1ec; }
.ktyp-geschaeft     { background: #f0ecf4; }
.ktyp-gewoge        { background: #e9f1f5; }

/* Projektliste: Karte in der Typ-Farbe */
.project-item.ktyp-privat.active,
.project-item.ktyp-hausverwaltung.active,
.project-item.ktyp-geschaeft.active,
.project-item.ktyp-gewoge.active { border-color: var(--brand-dark); }

/* Titelzeile der Reiter: gleiche Farbe, anklickbar */
.detail-head { cursor: pointer; }
.detail-head:hover { filter: brightness(0.97); }

/* Logo mit abgerundeten Ecken wie im Backend */
.app-logo { border-radius: 6px; }

/* Adresse im Titel verlinkt zur Kartenansicht */
.detail-title-address { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.detail-title-address:hover { text-decoration-thickness: 2px; }
.detail-title-floor { font-weight: 400; }
.project-item-floor { font-size: 0.85rem; color: #555; font-weight: 600; }
.info-mieter { font-weight: 700; }

/* Projektnummer im Titel - dezent vorangestellt */
.detail-title-nr {
  font-weight: 700;
  color: #666;
  font-variant-numeric: tabular-nums;
}

/* =========================================================
   NICHT GEPLANTE AUFGABEN - Stunden und Zusatzarbeiten
   ========================================================= */
.extra-block {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  max-width: 720px;
  margin: 0 auto;
}
.extra-kopf {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 120px;
  gap: 10px;
  font-size: 0.78rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 10px;
}
.extra-zeile {
  display: grid;
  grid-template-columns: 78px minmax(0, 1fr) 120px;
  gap: 10px;
  align-items: center;
  margin-bottom: 8px;
}
.extra-zeile input.extra-stunden {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  text-align: right;
}
.extra-namen-btn {
  width: 100%;
  min-height: 42px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  font-family: inherit;
  font-size: 0.92rem;
  text-align: left;
  cursor: pointer;
}
.extra-namen-btn:hover { background: #eeeae4; }
.extra-zeile-anzeige { font-size: 0.92rem; }
.extra-stunden-wert { font-weight: 700; text-align: right; }
.extra-namen { color: #555; }
.extra-notiz-label {
  display: block;
  margin-top: 14px;
  font-size: 0.82rem;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.extra-notiz {
  width: 100%;
  margin-top: 6px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  text-transform: none;
  letter-spacing: normal;
  color: var(--dark);
  resize: vertical;
}
.extra-notiz-anzeige {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  white-space: pre-wrap;
  font-size: 0.92rem;
}


/* Bestätigung der nicht geplanten Aufgaben */
.extra-erledigt {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border);
  font-size: 0.92rem;
  cursor: pointer;
}
.extra-erledigt input { width: 22px; height: 22px; flex-shrink: 0; margin-top: 1px; }
.extra-erledigt-hinweis { color: #777; font-size: 0.8rem; }
.complete-hinweis {
  max-width: 720px;
  margin: 18px auto 10px;
  text-align: center;
  font-size: 0.92rem;
  line-height: 1.45;
}
/* Solange noch etwas offen ist: deutlich hervorgehoben im gelben Kasten */
.complete-hinweis-offen {
  font-weight: 700;
  color: #7a5e10;
  background: #fff8e6;
  border: 1px solid var(--yellow);
  border-radius: 8px;
  padding: 12px 14px;
}
/* Wenn alles erfasst ist, genügt ein ruhiger Hinweis */
.complete-hinweis-ok { color: #777; font-size: 0.85rem; }


/* "Wofür wurden die Stunden geleistet?" */
.extra-zweck {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
}
.extra-zweck-wert { color: #333; }

@media (max-width: 520px) {
  /* Auf schmalen Geräten untereinander, sonst wird es zu eng */
  .extra-kopf { display: none; }
  .extra-zeile {
    grid-template-columns: 1fr;
    gap: 6px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid var(--border);
  }
  .extra-zeile input.extra-stunden { text-align: left; }
  .extra-zeile-anzeige { grid-template-columns: 1fr; }
}

/* =========================================================
   FOTOS
   ========================================================= */
.foto-bereich { max-width: 720px; margin: 0 auto; }
/* Der Knopf steht ALLEIN in seiner Zeile und ist dadurch wirklich mittig.
   Vorher teilte er sich die Zeile mit der Statusanzeige - zentriert wurde
   dann beide zusammen, wodurch der Knopf selbst sichtbar nach links
   verschoben war (um die Breite der Statusanzeige plus Abstand). */
.photo-upload-row {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}
.photo-upload-label { cursor: pointer; }
.photo-upload-status {
  display: block;
  text-align: center;
  font-size: 0.85rem;
  margin-bottom: 14px;
  min-height: 1em;
}
.foto-galerie {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 10px;
}
.foto-kachel {
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: #efece7;
  cursor: zoom-in;
}
.foto-kachel img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
.foto-kachel-wrapper { position: relative; }
.foto-loeschen-btn {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.foto-loeschen-btn:hover { background: rgba(163, 51, 51, 0.85); }

/* Lightbox (Großansicht) - dasselbe Muster wie im Backend */
.photo-lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 13, 11, 0.94);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 500;
  padding: 20px 60px;
  box-sizing: border-box;
}
.photo-lightbox-img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 4px; }
.photo-lightbox-close {
  position: absolute;
  top: max(16px, env(safe-area-inset-top));
  right: 16px;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.6rem;
  font-weight: 700;
  cursor: pointer;
  padding: 10px;
}
.photo-lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: #fff;
  font-size: 2.2rem;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  cursor: pointer;
}
.photo-lightbox-prev { left: 10px; }
.photo-lightbox-next { right: 10px; }
.photo-lightbox-caption {
  margin-top: 14px;
  color: #fff;
  background: rgba(0, 0, 0, 0.4);
  padding: 8px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  max-width: 90%;
  text-align: center;
}

/* =========================================================
   AUFMASS (Web-App)
   ========================================================= */
.aufmass-zimmer-karte {
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin: 0 auto 14px;
  max-width: 520px;
}
.aufmass-zimmer-kopf {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}
.aufmass-zimmer-kopf h3 { margin: 0; font-size: 1rem; }

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

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

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

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

.aufmass-flaechen-kasten {
  max-width: 520px;
  margin: 0 auto 18px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
}
.aufmass-flaechen-liste { list-style: none; margin: 8px 0; padding: 0; }
.aufmass-flaechen-liste li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}
.aufmass-flaechen-summe { font-size: 0.92rem; padding-top: 6px; border-top: 2px solid var(--border); }
.aufmass-mengen-untertitel { font-size: 0.85rem; font-weight: 700; margin: 14px 0 4px; }

/* Bemerkungen stehen immer sichtbar über dem Ausklappbereich */
.info-note-immer {
  background: #fff8e6;
  border: 1px solid #e8d9a8;
  border-radius: 10px;
  padding: 12px 14px;
  /* So breit wie Projekttitel, Material und Aufgaben darunter: Die frühere
     Begrenzung auf 480 Pixel ließ die Bemerkung schmaler stehen als alles
     andere - gerade sie wird aber oft am längsten. */
  margin: 0 0 10px;
  width: 100%;
  box-sizing: border-box;
}
.info-note-immer strong { display: block; margin-bottom: 4px; font-size: 0.82rem; }
/* Überschrittene Deadline im Infokasten deutlich hervorheben */
.info-row-ueberfaellig { color: var(--red); font-weight: 700; }

/* Bereiche im Burgermenü (Aufgaben, Erledigte Aufgaben, …) */
.app-menu-benutzer { font-weight: 700; width: 100%; padding-bottom: 4px; }
.app-menu-bereiche { display: flex; flex-direction: column; gap: 4px; width: 100%; }
.app-menu-bereich {
  display: block;
  width: 100%;
  text-align: left;
  padding: 11px 12px;
  border: none;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
  color: #ffffff;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.app-menu-bereich.active { background: var(--brand); }
.app-menu-trenner { width: 100%; border: none; border-top: 1px solid rgba(255,255,255,0.25); margin: 8px 0 4px; }

/* =========================================================
   BURGERMENÜ IN DER REITERLEISTE (ganz links, vor "Projekte")
   ========================================================= */
.app-tabs { position: relative; }
.app-tabs .app-menu-btn {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 4px;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
  /* Abstand zum linken Rand: Direkt am Bildschirmrand trifft man mit dem
     Daumen schlecht - und auf Geraeten mit gebogenem Display liegt der Rand
     teils gar nicht mehr sauber im Zugriff. */
  margin-left: 10px;
  margin-right: 6px;
}
/* Striche bewusst in der dunklen Schriftfarbe der Reiterleiste - Schaltflächen
   erben die Textfarbe nicht von selbst, deshalb hier ausdrücklich gesetzt. */
.app-tabs .app-menu-btn span {
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--dark);
  border-radius: 2px;
}

.app-menu-panel {
  position: absolute;
  top: 100%;
  left: 4px;
  z-index: 200;
  display: none;
  flex-direction: column;
  gap: 4px;
  min-width: 200px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.16);
  padding: 8px;
}
.app-menu-panel.offen { display: flex; }
.app-menu-benutzer {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--dark);
  padding: 6px 10px 8px;
  border-bottom: 1px solid var(--border);
}
.app-menu-eintrag {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px;
  border: none;
  background: none;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--dark);
  text-decoration: none;
  cursor: pointer;
}
.app-menu-eintrag:hover { background: var(--bg); }
.app-menu-abmelden { color: var(--red); }

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

/* Eigenständiges Aufmaß in der Web-App */
.aufmass-app-kopf { display: flex; gap: 8px; justify-content: center; margin-bottom: 14px; flex-wrap: wrap; }
.aufmass-liste { display: flex; flex-direction: column; gap: 8px; max-width: 520px; margin: 0 auto; }
.aufmass-listen-eintrag {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: inherit;
  cursor: pointer;
}
.aufmass-listen-name { font-weight: 700; font-size: 1rem; }
.aufmass-kopfmaske { max-width: 520px; margin: 0 auto 16px; display: flex; flex-direction: column; gap: 10px; }
.aufmass-kopfmaske label { font-size: 0.82rem; color: #666; }
.aufmass-kopfmaske input,
.aufmass-kopfmaske textarea {
  display: block;
  width: 100%;
  box-sizing: border-box;
  margin-top: 4px;
  padding: 10px 11px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
}
.aufmass-kopfmaske textarea { resize: vertical; }
/* Angemeldeter Name im Titel - etwas zurückhaltender als der Name der Anwendung */
.titel-benutzer { font-weight: 400; opacity: 0.75; }
.app-menu-version { font-size: 0.78rem; color: #888; padding: 8px 10px 4px; border-top: 1px solid var(--border); margin-top: 4px; }

/* Kopfleiste der eigenständigen Aufmaß-App: Burger links, Hauptknopf daneben */
.aufmass-app-hauptknopf { flex: 1; margin: 4px 8px; }

/* Hinweis oben im Reiter "Kürzlich erledigt" */
.recent-hinweis {
  background: #fdf6e3;
  border: 1px solid #e0c97a;
  border-left: 5px solid #d9a441;
  border-radius: 8px;
  padding: 12px 16px;
  margin: 0 auto 14px;
  max-width: 480px;
  font-size: 0.85rem;
  color: #6b5312;
}

/* Begrüßung mit Namen über der Startauswahl */
.choice-begruessung { text-align: center; font-size: 0.95rem; color: #666; margin: 4px 0 0; }

/* Aufmaß einem Projekt zuordnen */
.aufmass-projekt-auswahl {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
}
.aufmass-projekt-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.85rem;
  color: #666;
  width: 100%;
  max-width: 460px;
}
.aufmass-projekt-label select {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-size: 0.95rem;
  font-family: inherit;
  background: #fff;
}
.aufmass-projekt-zuordnung {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin: 10px 0;
}
.aufmass-projekt-marke {
  background: #eaf3ec;
  border: 1px solid #cfe4d4;
  color: #2f6b43;
  padding: 6px 12px;
  border-radius: 10px;
  font-size: 0.88rem;
  font-weight: 600;
}

/* Altbelag: Ankreuzfelder statt Mehrfach-Auswahlliste */
.aufmass-altbelag-liste {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 6px;
}
.aufmass-altbelag-option {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.9rem;
  color: var(--dark);
  cursor: pointer;
  padding: 4px 0;
}
.aufmass-altbelag-option input { width: 18px; height: 18px; flex-shrink: 0; }

/* Überschrift der Abschnitte im Aufmaß (z.B. „Fotos") */
.aufmass-abschnitt-titel {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dark);
  margin: 18px 0 8px;
  text-align: center;
}

/* Altbelag: gewählte Arten als Marken + Auswahl zum Hinzufügen */
.aufmass-altbelag-gewaehlt {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 6px 0;
}
.aufmass-altbelag-marke {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: #eaf3ec;
  border: 1px solid #cfe4d4;
  color: #2f6b43;
  padding: 4px 6px 4px 10px;
  border-radius: 12px;
  font-size: 0.85rem;
  font-weight: 600;
}
.aufmass-altbelag-weg {
  border: none;
  background: none;
  color: #2f6b43;
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  padding: 2px 4px;
}
.aufmass-altbelag-leer { margin: 6px 0; }
.aufmass-altbelag-hinzu {
  width: 100%;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.92rem;
  background: #fff;
}
/* Bemerkung je Zimmer */
.aufmass-zimmer-bemerkung {
  display: block;
  margin-top: 12px;
  font-size: 0.8rem;
  color: #666;
}
.aufmass-zimmer-bemerkung textarea {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.92rem;
  resize: vertical;
}

/* Seitliches Wischen der Anwendung überlassen.
   Auf echten Geräten fängt der Browser waagerechte Wischgesten selbst ab und
   nutzt sie für "Zurück"/"Vorwärts" - die Anwendung bekam sie dann gar nicht
   erst zu sehen. Besonders am linken Bildschirmrand. Mit diesen beiden
   Angaben bleibt senkrechtes Scrollen erhalten, waagerechte Gesten gehen
   aber an die Anwendung. */
html, body {
  overscroll-behavior-x: contain;
}
.app-main {
  touch-action: pan-y;
}

/* Bild antippen schaltet zwischen "eingepasst" und "vergrößert" um. */
.photo-lightbox-img { cursor: zoom-in; }
.photo-lightbox-img.vergroessert {
  max-width: none;
  max-height: none;
  width: auto;
  height: auto;
  cursor: zoom-out;
}
.photo-lightbox-overlay { overflow: auto; }

/* Auswahlkästchen auf den Fotokacheln */
.foto-auswahl {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(255,255,255,0.92);
  border-radius: 6px;
  padding: 3px;
  line-height: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
}
.foto-auswahl input { width: 20px; height: 20px; margin: 0; cursor: pointer; }

/* Sammel-Löschen unter der Galerie */
.foto-loeschen-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 10px 0;
}

/* Fortschritt beim Hochladen */
.foto-fortschritt { margin: 10px 0; }
.foto-fortschritt-balken {
  height: 10px;
  background: var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.foto-fortschritt-balken span {
  display: block;
  height: 100%;
  width: 0;
  background: var(--brand);
  transition: width 0.15s linear;
}
.foto-fortschritt-text {
  font-size: 0.82rem;
  color: #666;
  margin-top: 4px;
  text-align: center;
}

/* Hinweis, wenn das Recht zum Löschen fehlt */
.foto-kein-recht {
  margin: 10px 0;
  padding: 8px 10px;
  background: #fdf6e3;
  border: 1px solid #e8d9a8;
  border-radius: 8px;
  color: #6b5a20;
}

/* Verweis vom Projekt zum zugeordneten Aufmaß */
.aufmass-verweis { color: var(--brand); font-weight: 600; text-decoration: underline; }

/* Aufklappbare Altbelag-Auswahl */
.aufmass-altbelag-auf { display: block; width: 100%; margin-top: 6px; }
.aufmass-altbelag-panel {
  margin-top: 6px;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
  max-height: 260px;
  overflow-y: auto;
}

/* Etage in der Aufmaß-Übersicht - bewusst hervorgehoben, weil sie auf der
   Baustelle über das richtige Stockwerk entscheidet. */
.aufmass-listen-etage {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brand);
}
/* Ankreuzfeld ohne Mengenangabe (z. B. WC ab- und Aufbau) */
.aufmass-aufgabe-ohne-menge { align-items: center; }

/* Aufmaß-Übersicht: ALLE Zeilen linksbündig und ohne den zusätzlichen
   Innenabstand der allgemeinen Hinweis-Klasse. Die ist eigentlich für
   zentrierte Hinweistexte gedacht ("Noch kein Aufmaß vorhanden") - in den
   Listeneinträgen führte sie dazu, dass Kunde links stand, Straße und
   Zimmerzahl aber mittig. */
.aufmass-listen-eintrag > * {
  text-align: left;
  padding: 0;
  width: 100%;
}
.aufmass-listen-eintrag .hint {
  font-size: 0.85rem;
  line-height: 1.35;
}

/* =========================================================
   KNÖPFE DEUTLICH SICHTBAR
   "btn-secondary" hatte exakt die Hintergrundfarbe der Seite und einen
   hellen Rahmen - dadurch war er auf dem Untergrund kaum als Knopf zu
   erkennen. Alle Knöpfe haben jetzt klaren Kontrast, einen kräftigen
   Rahmen und einen leichten Schatten, damit sie sich abheben.
   ========================================================= */
.btn {
  border: 1px solid transparent;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.btn-secondary {
  background: #ffffff;
  color: var(--dark);
  border: 2px solid var(--dark);
  font-weight: 700;
}
.btn-secondary:active { background: #ececec; }
.btn-primary { border: 2px solid var(--brand); font-weight: 700; }
.btn-danger { font-weight: 700; border: 2px solid var(--red); }
.btn:disabled { opacity: 0.5; box-shadow: none; }

/* Aufmaß öffnen / abschließen: die wichtigsten Knöpfe im Aufmaß -
   bewusst breit, mittig und farblich eindeutig. */
.aufmass-abschluss-zeile { text-align: center; margin: 16px 0; }
.aufmass-abschluss-zeile .btn {
  min-width: 240px;
  max-width: 100%;
  padding: 15px 20px;
  font-size: 1.02rem;
}
/* (Die frueher hier stehende Regel machte den grünen Knopf "Neues Aufmaß"
   weiß und damit unsichtbar - die Farben stehen jetzt weiter unten.) */

/* =========================================================
   FARBSYSTEM FÜR KNÖPFE
   Gedämpfte Töne, jede Farbe mit fester Bedeutung:
     Grün   = etwas Neues anlegen / bestätigen / speichern
     Blau   = navigieren, öffnen, zurück (verändert nichts)
     Gelb   = Zustand ändern, aufpassen (abschließen, fortsetzen)
     Rot    = löschen, entfernen
     Lila   = Zusatzfunktionen (Fotos, Verknüpfungen)
   ========================================================= */
: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.2);
  font-weight: 600;
}
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: 0.45; box-shadow: none; }

.btn-primary,
#app-aufmass-neu-btn,
#app-aufmass-zimmer-form button[type="submit"],
#app-aufmass-neu-form button[type="submit"] {
  background: var(--knopf-gruen);
  border-color: var(--knopf-gruen-rand);
  color: #fff;
}
.btn-secondary,
#app-aufmass-zurueck-btn {
  background: var(--knopf-blau);
  border-color: var(--knopf-blau-rand);
  color: #fff;
}
#app-aufmass-abschluss-btn {
  background: var(--knopf-gelb);
  border-color: var(--knopf-gelb-rand);
  color: #fff;
}
/* Der Foto-Löschknopf wird bewusst NICHT pauschal rot: Er bekommt seine
   Warnfarbe erst, wenn wirklich Fotos ausgewählt sind (Klasse btn-danger
   wird dann gesetzt). */
.btn-danger {
  background: var(--knopf-rot);
  border-color: var(--knopf-rot-rand);
  color: #fff;
}
.photo-upload-label,
.aufmass-altbelag-auf,
#app-aufmass-projekt-btn {
  background: var(--knopf-lila);
  border-color: var(--knopf-lila-rand);
  color: #fff;
}

/* 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. */
.btn-edit,
#aufmass-abschluss-btn,
#aufmass-ins-archiv-btn,
#aufmass-archiv-zurueckholen-btn,
#app-aufmass-abschluss-btn {
  color: #2a2118;
}

/* Gesperrte Knöpfe: erkennbar gesperrt, aber lesbar. Vorher hellgrau mit
   weißer Schrift - praktisch unlesbar. */
.btn:disabled {
  background: #d3cfc9;
  border-color: #bdb9b2;
  color: #4f4b46;
  opacity: 1;
}

/* Gruppenüberschriften bei den Positionen (Schienen, Leisten, …) */
.aufmass-gruppe-titel {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #8a857d;
  margin: 12px 0 2px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.aufmass-zimmer-karte .aufmass-gruppe-titel:first-of-type { border-top: none; padding-top: 0; }
/* Die drei Auswahlblöcke deutlich voneinander abgesetzt */
.aufmass-altbelag-label {
  display: block;
  font-size: 0.8rem;
  color: #666;
  margin: 12px 0;
}

/* Gelb heller und freundlicher statt ockerfarben. */
:root {
  --knopf-gelb: #e0b83c;
  --knopf-gelb-rand: #c39c28;
}

/* Aufmaß: "Zuordnung aufheben" und "Aufmaß löschen" nebeneinander */
.aufmass-aktionen-zeile {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 12px 0;
}
.aufmass-aktionen-trenner { color: #b6b1a9; font-weight: 700; }
.btn-klein { padding: 8px 14px; font-size: 0.88rem; }
.btn-gelb {
  background: var(--knopf-gelb);
  border-color: var(--knopf-gelb-rand);
  color: #2a2118;
}

/* Verweis, der wie ein Knopf aussieht */
.btn-blau { background: var(--knopf-blau); border-color: var(--knopf-blau-rand); color: #fff; }
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 */
.photo-lightbox-save {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
}
.photo-lightbox-save:hover { background: rgba(0, 0, 0, 0.82); }

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

/* Übersicht je Zimmer in der Zusammenfassung */
.aufmass-zimmer-uebersicht {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  background: #fff;
}
.aufmass-zimmer-uebersicht-kopf {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-weight: 700;
  border-bottom: 1px solid var(--border);
  padding-bottom: 4px;
  margin-bottom: 4px;
}

/* Lupe in der Bildansicht */
.photo-lightbox-lupe {
  position: absolute;
  top: 14px;
  left: 150px;
  z-index: 3;
  background: rgba(0, 0, 0, 0.62);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}
.photo-lightbox-lupe:hover { background: rgba(0, 0, 0, 0.82); }
/* Bei aktivem Zoom das Bild nicht mehr einpassen - Groesse kommt vom Zoom. */
.photo-lightbox-img.vergroessert {
  max-width: none;
  max-height: none;
  cursor: grab;
}

/* Bemerkungsfelder wachsen mit dem Inhalt - keine feste Zeilenzahl */
textarea.aufmass-zimmer-note {
  overflow-y: hidden;
  resize: vertical;
  min-height: 2.6em;
}

/* Knopfreihe unter der Kopfleiste (Fotos, Verknüpfen, Raumübersicht) */
.aufmass-knopfreihe {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin: 10px 0 14px;
}
.aufmass-knopfreihe .btn { flex: 1 1 auto; min-width: 140px; }
.btn-lila { background: var(--knopf-lila); border-color: var(--knopf-lila-rand); color: #fff; }
.btn-gruen { background: var(--knopf-gruen); border-color: var(--knopf-gruen-rand); color: #fff; }
/* Fotos löschen mittig */
/* Löschzeile mittig - die vorhandene Flex-Regel weiter oben zentriert
   nicht von sich aus. */
.foto-loeschen-zeile { justify-content: center; text-align: center; margin: 10px 0; }
.foto-loeschen-knopf { min-width: 180px; }
/* Aufmaß löschen ganz unten, mittig */
#app-aufmass-loeschen-bereich { text-align: center; margin: 22px 0 30px; }
#app-aufmass-loeschen-bereich .aufmass-aktionen-zeile { justify-content: center; }
#app-aufmass-loeschen-start-btn { min-width: 200px; }
/* Öffnen/Schließen in der Kopfleiste */
#app-aufmass-abschluss-btn { white-space: nowrap; }

/* Bemerkung zu einer Aufgabe - Vorgabe aus der Verwaltung, nur lesbar */
.task-item-bemerkung {
  margin-top: 5px;
  padding: 7px 10px;
  border-left: 3px solid var(--knopf-gelb);
  background: #fdf6e6;
  border-radius: 0 6px 6px 0;
  font-size: 0.9rem;
  color: #4a4034;
  white-space: pre-wrap;
}

/* =========================================================
   TREPPEN-AUFMASS
   ========================================================= */
.treppe-block {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
}
.treppe-zeile {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.treppe-feld {
  flex: 1 1 0;
  min-width: 0;
  padding: 9px 8px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
  text-align: center;
}
.treppe-feld.treppe-klein { flex: 0 0 62px; }
.treppe-feld.treppe-breit { flex: 2 1 0; text-align: left; }
.treppe-anzahl { flex: 0 0 56px; }
/* Fortlaufende Stufennummer vor der Zeile */
.treppe-nr {
  flex: 0 0 46px;
  font-weight: 700;
  font-size: 0.85rem;
  color: #6b665e;
  text-align: right;
}
.treppe-kuerzel {
  flex: 0 0 auto;
  font-weight: 700;
  color: #6b665e;
}
.treppe-podest { border-bottom: 1px solid var(--border); padding-bottom: 8px; margin-bottom: 8px; }
.treppe-podest:last-of-type { border-bottom: none; }
.treppe-podest-nr { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: #666; }
.treppe-podest-text {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.92rem;
  overflow-y: hidden;
  resize: vertical;
}
.treppe-stosshoehe {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 0.85rem;
  color: #666;
}

/* Optionen einer Aufgabe (nur Anzeige) */
.task-item-optionen { margin-top: 5px; }
.task-item-option {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.88rem;
  padding: 3px 0;
  border-bottom: 1px dashed var(--border);
}
.task-item-option:last-child { border-bottom: none; }
.task-item-option-mengen { color: #666; white-space: nowrap; }

/* Vergrößerte Bilder werden gezogen statt gescrollt - keine Bildlaufleisten */
.photo-lightbox-overlay {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.photo-lightbox-overlay::-webkit-scrollbar { width: 0; height: 0; display: none; }
.photo-lightbox-img.vergroessert { cursor: grab; touch-action: none; user-select: none; }
.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. */
.photo-lightbox-overlay.gezoomt {
  overflow: auto;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 20px;
}

/* =========================================================
   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.
   ========================================================= */
.photo-lightbox-close,
.photo-lightbox-save,
.photo-lightbox-lupe,
.photo-lightbox-prev,
.photo-lightbox-next,
.photo-lightbox-zaehler,
.photo-lightbox-comment {
  position: fixed;
}
.photo-lightbox-save { top: max(14px, env(safe-area-inset-top)); left: 14px; }
.photo-lightbox-lupe { top: max(14px, env(safe-area-inset-top)); left: 150px; }
.photo-lightbox-close { top: max(16px, env(safe-area-inset-top)); right: 16px; }

/* Die Pfeile behalten ihre vertikale Mitte, jetzt bezogen auf den Bildschirm. */
.photo-lightbox-prev,
.photo-lightbox-next { top: 50%; transform: translateY(-50%); }
/* Bildunterschrift ebenfalls stehend, damit sie nicht wegwandert. */
.photo-lightbox-caption { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); max-width: 90vw; }

/* =========================================================
   ZWEITE FESTE KNOPFREIHE IM AUFMASS
   Höchstens drei Knöpfe je Reihe - mehr bricht auf dem Handy um und macht
   die Leiste unruhig. Sie steht fest unter der Kopfleiste; nur der Inhalt
   darunter scrollt.
   ========================================================= */
.aufmass-knopfleiste-fest {
  display: flex;
  gap: 6px;
  padding: 8px 10px;
  background: #fff;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.aufmass-knopfleiste-fest .btn {
  flex: 1 1 0;
  min-width: 0;
  padding: 11px 6px;
  font-size: 0.92rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
/* Erste Reihe ebenfalls auf drei Knöpfe begrenzen */
.app-tabs-aufmass .aufmass-app-hauptknopf {
  flex: 1 1 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Beide Knopfreihen: gleiche Höhe und mittig ausgerichtet. Der Foto-Knopf
   ist ein Beschriftungsfeld, die anderen sind Schaltflächen - ohne diese
   Angleichung standen sie unterschiedlich hoch. */
.app-tabs-aufmass,
.aufmass-knopfleiste-fest {
  align-items: stretch;
}
.app-tabs-aufmass .aufmass-app-hauptknopf,
.aufmass-knopfleiste-fest .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  line-height: 1.15;
}
.aufmass-knopfleiste-fest .photo-upload-label { margin: 0; }

/* Beschriftungen sollen vollständig lesbar bleiben - auf schmalen Geräten
   lieber etwas kleiner setzen als abschneiden. */
.app-tabs-aufmass .aufmass-app-hauptknopf,
.aufmass-knopfleiste-fest .btn { font-size: 0.9rem; padding-left: 4px; padding-right: 4px; }
@media (max-width: 400px) {
  .app-tabs-aufmass .aufmass-app-hauptknopf,
  .aufmass-knopfleiste-fest .btn { font-size: 0.82rem; }
}

/* =========================================================
   AUFGABENZEILEN IM AUFMASS
   Das Mengenfeld ist immer vorhanden und wird nur unsichtbar geschaltet -
   sein Platz bleibt dadurch reserviert und die Zeile springt beim Anhaken
   nicht mehr um.
   ========================================================= */
.aufmass-aufgabe-name { flex: 1 1 auto; min-width: 0; }
.aufmass-aufgabe-menge.feld-verborgen {
  visibility: hidden;
  pointer-events: none;
}
/* Auch Positionen OHNE Mengenfeld sollen gleich hoch bleiben. */
.aufmass-aufgabe { min-height: 42px; }

/* Ausgewählte Aufgaben hellblau hinterlegen - auf einen Blick erkennbar,
   was in diesem Zimmer anfällt. */
.aufmass-aufgabe.ist-gewaehlt {
  background: #e3eef7;
  border-color: #a9c6dd;
}
.aufmass-aufgabe.ist-gewaehlt .aufmass-aufgabe-name { font-weight: 600; }

/* =========================================================
   BEIDE KNOPFREIHEN AUF EINEM RASTER
   Die obere Reihe beginnt hinter dem Menü-Knopf, die untere am Rand -
   dadurch standen die Knöpfe versetzt. Beide Reihen bekommen jetzt
   denselben Innenabstand, denselben Zwischenraum und eine gleich breite
   erste Spalte (Menü bzw. Platzhalter).
   ========================================================= */
.app-tabs-aufmass,
.aufmass-knopfleiste-fest {
  padding: 8px 10px;
  gap: 10px;
}
.app-menu-btn,
.knopfleiste-platzhalter {
  flex: 0 0 44px;
  width: 44px;
}
.knopfleiste-platzhalter { display: block; }
.app-tabs-aufmass .aufmass-app-hauptknopf,
.aufmass-knopfleiste-fest .btn { flex: 1 1 0; min-width: 0; }

/* Eigene Ränder der einzelnen Knöpfe aufheben - der Abstand kommt
   ausschließlich aus dem "gap" der Reihe. Sonst verschieben unterschiedliche
   Ränder (Menü-Knopf 10/6, Knöpfe 8/8) die Spalten gegeneinander. */
.app-tabs > *,
.aufmass-knopfleiste-fest > * { margin: 0; }

/* Menü-Knopf und Platzhalter exakt gleich breit - inklusive Innenabstand,
   sonst rutscht die obere Reihe gegenüber der unteren nach rechts. */
.app-menu-btn,
.knopfleiste-platzhalter {
  box-sizing: border-box;
  flex: 0 0 44px;
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  padding: 0;
}

/* =========================================================
   BEIDE KNOPFREIHEN AUF EIN FESTES SPALTENRASTER
   Der Versatz kam von Rändern einzelner Knöpfe, die sich gegen die
   Reihen-Einstellung durchsetzten. Ein Raster mit vier festen Spalten
   (Menü + drei Knöpfe) macht die Ausrichtung unabhängig davon.
   ========================================================= */
.app-tabs-aufmass,
.aufmass-knopfleiste-fest {
  display: grid;
  grid-template-columns: 44px repeat(3, 1fr);
  gap: 10px;
  padding: 8px 10px;
  align-items: stretch;
}
.app-tabs-aufmass > *,
.aufmass-knopfleiste-fest > * { margin: 0 !important; }
/* Das Menü-Klappfeld hängt frei und belegt keine Rasterzelle. */
.app-menu-panel { position: absolute; }

/* Auf sehr schmalen Geräten (iPhone SE) reicht der Platz sonst nicht -
   lieber etwas kleiner setzen als Beschriftungen abschneiden. */
@media (max-width: 385px) {
  .app-tabs-aufmass,
  .aufmass-knopfleiste-fest { gap: 6px; padding-left: 8px; padding-right: 8px; }
  .app-tabs-aufmass .aufmass-app-hauptknopf,
  .aufmass-knopfleiste-fest .btn { font-size: 0.76rem; padding-left: 2px; padding-right: 2px; }
  .app-tabs-aufmass,
  .aufmass-knopfleiste-fest { grid-template-columns: 38px repeat(3, 1fr); }
  .app-menu-btn,
  .knopfleiste-platzhalter { flex-basis: 38px; width: 38px; min-width: 38px; max-width: 38px; }
}

/* Optionen einer Position: eingerückt und etwas kleiner, damit die
   Zugehörigkeit sichtbar ist. */
.aufmass-aufgabe.ist-option {
  margin-left: 18px;
  font-size: 0.84rem;
  background: #fbfaf8;
}
.aufmass-aufgabe.ist-option.ist-gewaehlt { background: #e3eef7; }

/* =========================================================
   REITER ALS FARBIGE KNÖPFE
   Vorher hoben sie sich kaum vom Hintergrund ab. Jede Gruppe bekommt eine
   eigene Farbe: Projekte hellblau, Lieferschein und Aufgaben lila,
   Kürzlich orange.
   ========================================================= */
.app-tabs .app-tab {
  border-radius: 8px;
  margin: 6px 3px;
  padding: 10px 6px;
  font-weight: 600;
  font-size: 0.92rem;
  border: 1px solid transparent;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  color: #fff;
}
.app-tabs .app-tab[data-tab="projects"] { background: #6b93b8; border-color: #56789a; }
.app-tabs .app-tab[data-tab="delivery"],
.app-tabs .app-tab[data-tab="tasks"] { background: #8873a8; border-color: #6f5b8e; }
.app-tabs .app-tab[data-tab="recent"] { background: #cf8a3c; border-color: #ad7130; }
/* Der aktive Reiter wird kräftiger und bekommt eine Fußlinie. Bewusst über
   einen inneren Schatten statt über einen Helligkeitsfilter: Der Filter
   haette auch die Schrift mit abgedunkelt und den Text schlechter lesbar
   gemacht. */
.app-tabs .app-tab.active {
  box-shadow: inset 0 0 0 999px rgba(0, 0, 0, 0.2),
              inset 0 -3px 0 rgba(0, 0, 0, 0.38);
  color: #fff;
}

/* Die Reiterleiste der Projekte-Ansicht bleibt eine einfache Reihe -
   das Spaltenraster gilt ausschliesslich für die Aufmaß-Leiste. */
.app-tabs:not(.app-tabs-aufmass) {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0 6px;
  position: relative;
}
.app-tabs:not(.app-tabs-aufmass) .app-tab { flex: 1 1 0; min-width: 0; }

/* =========================================================
   PLATZ FÜR DEN SCROLLBALKEN DAUERHAFT RESERVIEREN
   Auf einzelnen Reitern wird die Seite länger als das Fenster. Am PC
   erschien dadurch ein Scrollbalken, der den gesamten Inhalt um dessen
   Breite nach links schob - beim Umschalten sah es aus, als verrutsche
   das Layout.
   ========================================================= */
html { scrollbar-gutter: stable; }

/* Optionen einer Aufgabe: Bezeichnung | Vorgabemenge | verarbeitet */
.task-item-option {
  display: grid;
  /* Bezeichnung | Einheit | Vorgabemenge | verarbeitet */
  grid-template-columns: 1fr 56px 56px 84px;
  gap: 6px;
  align-items: center;
}
.task-item-option-einheit {
  font-size: 0.8rem;
  color: #6b665e;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.task-item-option-kopf {
  font-size: 0.72rem;
  color: #8a8378;
  border-bottom: none;
  padding-bottom: 1px;
}
.task-item-option-kopf span:not(:first-child) { text-align: center; }
.task-item-option-name { min-width: 0; overflow-wrap: anywhere; }
.task-item-option-soll { text-align: center; font-weight: 600; }
/* Verarbeitete Menge: nur Anzeige - eingetragen wird sie beim Abschließen. */
.task-item-option-ist {
  text-align: center;
  font-weight: 700;
  color: #2f5c3c;
}

/* Werte zu Aufgaben, die es im Katalog nicht mehr gibt - nur noch Anzeige */
.aufmass-entfallen {
  margin-top: 10px;
  padding: 9px 11px;
  border: 1px dashed #c9a86a;
  border-radius: 8px;
  background: #fdf8ee;
}
.aufmass-entfallen-titel {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #8a6d2f;
  margin-bottom: 5px;
}
.aufmass-entfallen-zeile {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 3px 0;
  font-size: 0.88rem;
}
.aufmass-entfallen-name { min-width: 0; overflow-wrap: anywhere; }
.aufmass-entfallen-wert { font-weight: 700; white-space: nowrap; }
.aufmass-entfallen .hint { margin: 5px 0 0; font-size: 0.76rem; }

/* Untergrund und neuer Bodenbelag zum Anhaken (Abschnitt E1) */
.aufmass-auswahl-block { margin-bottom: 12px; }
.aufmass-auswahl-titel {
  font-size: 0.8rem;
  font-weight: 600;
  color: #6b665e;
  margin: 8px 0 4px;
}
.aufmass-auswahl-teil:first-child .aufmass-auswahl-titel { margin-top: 2px; }

/* Schnittmaße und Paketangaben unter den Raummaßen */
.aufmass-schnitt-block { border-left: 3px solid #a9c6dd; padding-left: 10px; }
.aufmass-schnitt-block .hint { font-weight: 400; margin-left: 6px; font-size: 0.78rem; }
.aufmass-schnitt-summe { margin-top: 6px; font-size: 0.9rem; color: #2c4a63; }
.aufmass-paket-block { border-left: 3px solid #c9a86a; padding-left: 10px; }
.aufmass-paket-felder { display: flex; gap: 8px; flex-wrap: wrap; }
.aufmass-paket-feld {
  flex: 1 1 140px;
  min-width: 0;
  padding: 9px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.95rem;
}

/* Zimmername als Eingabefeld - Zimmer lassen sich jederzeit umbenennen. */
.aufmass-zimmer-name {
  flex: 1 1 auto;
  min-width: 0;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--dark);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 3px 6px;
}
.aufmass-zimmer-name:hover { border-color: var(--border); }
.aufmass-zimmer-name:focus { border-color: #a9c6dd; background: #fff; outline: none; }

/* =========================================================
   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;
}
.zimmer-wahl-knopf {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
  border: none;
  border-radius: 999px;
  background: #4a6f8a;
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.zimmer-wahl-knopf:hover { background: #3d5d75; }
.zimmer-wahl-symbol { font-size: 1.1rem; line-height: 1; }
.zimmer-wahl-zahl {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  padding: 1px 8px;
  font-size: 0.85rem;
}
/* Die Liste ist zunächst verborgen - erst der Knopf klappt sie auf. */
.zimmer-wahl-liste { display: none; }
#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;
}
.zimmer-wahl-eintrag {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  border: none;
  border-radius: 7px;
  background: var(--bg);
  font-family: inherit;
  font-size: 0.95rem;
  text-align: left;
  cursor: pointer;
}
.zimmer-wahl-eintrag:hover { background: #e3eef7; }
.zimmer-wahl-nr {
  flex: 0 0 auto;
  min-width: 22px;
  text-align: center;
  font-weight: 700;
  color: #4a6f8a;
}
/* Kurzes Aufleuchten der angesprungenen Karte */
.aufmass-zimmer-karte.ist-angesprungen {
  box-shadow: 0 0 0 3px #a9c6dd;
  transition: box-shadow 0.3s;
}

/* Ablagefläche für Bilder (Ziehen und Fallenlassen am Rechner) */
.ablage-aktiv {
  outline: 3px dashed #4a6f8a;
  outline-offset: 3px;
  background: #eef4f9;
}

.zimmer-wahl-trenner { border: none; border-top: 1px solid var(--border); margin: 4px 0; }
.zimmer-wahl-zusatz { background: #eef2f6; font-weight: 600; }
.zimmer-wahl-zusatz:hover { background: #e3eef7; }
/* Beide Fotoknöpfe nebeneinander und mittig unter den Bildern. */
.foto-knopfreihe {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 10px;
  /* KEIN Umbruch: Auf dem Handy rutschte der zweite Knopf sonst in die
     nächste Zeile. Stattdessen dürfen beide schmaler werden. */
  flex-wrap: nowrap;
  margin-top: 12px;
}
.foto-knopfreihe .btn {
  flex: 1 1 0;
  min-width: 0;
  max-width: 220px;
  padding-left: 10px;
  padding-right: 10px;
}
.foto-knopf-hinweis {
  text-align: center;
  margin-top: 6px;
}
.foto-knopf-hinweis:empty { display: none; }
.app-foto-ziehen-hinweis { font-size: 0.8rem; display: block; }
/* Auf Geräten ohne Maus gibt es kein Ziehen - der Hinweis entfällt. */
@media (hover: none) { .app-foto-ziehen-hinweis { display: none; } }

/* --- Schwebende Hauptauswahl (grün) und Zimmerwahl (gelb) --- */
#haupt-wahl {
  position: fixed;
  right: 16px;
  /* Vorgabewerte; die genaue Lage berechnet appSchwebendeAusrichten(). */
  /* Lage wird beim Zeichnen berechnet (appSchwebendeAusrichten): Der grüne
     Knopf steht UNTEN, die gelbe Zimmerwahl darüber. Ist nur einer da,
     rutscht er nach ganz unten. */
  bottom: 16px;
  z-index: 2500;
  display: flex;
  /* Die Auswahl klappt NEBEN dem Knopf auf, nach links - sonst verdeckte der
     obere Knopf die Auswahl des unteren. */
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
}

#haupt-wahl .zimmer-wahl-liste { display: none; }
#haupt-wahl.offen .zimmer-wahl-liste {
  display: flex;
  flex-direction: column;
  gap: 4px;
  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;
}
.haupt-wahl-eintrag .zimmer-wahl-nr { color: #4b8b5a; }
/* Die Zimmerwahl ist gelb - sie betrifft den Inhalt, die grüne das Aufmaß. */
.zimmer-wahl-knopf { background: #d9a520; color: #2f2a20; }
.zimmer-wahl-knopf:hover { background: #c3931b; }
.zimmer-wahl-nr { color: #a87c2f; }
/* Nach der gelben Grundregel notiert, sonst gewänne diese - beide sind
   gleich stark, und die spätere Regel setzt sich durch. */
#haupt-wahl .haupt-wahl-knopf { background: #4b8b5a; color: #fff; }
#haupt-wahl .haupt-wahl-knopf:hover { background: #3f7a4d; }

/* Schwebendes Menü oben links */
.app-menu-btn-schwebend {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 2600;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
/* Die Streifen hingen bisher an der Regel für die Reiterleiste - die gibt es
   in der Aufmaß-App nicht mehr, dadurch war der Knopf leer. */
.app-menu-btn-schwebend span {
  display: block;
  width: 22px;
  height: 2.5px;
  background: var(--dark);
  border-radius: 2px;
}
.app-menu-panel-schwebend {
  position: fixed;
  top: 58px;
  left: 12px;
  z-index: 2600;
}
/* Ohne Kopfleiste braucht der Inhalt oben Luft, damit er nicht unter dem
   schwebenden Menü beginnt. */
.app-main { padding-top: 56px; }

.app-menu-trenner { border: none; border-top: 1px solid var(--border); margin: 4px 0; }

/* Siehe Verwaltung: Das Haus-Zeichen etwas größer setzen. */
#zimmer-wahl .zimmer-wahl-symbol { font-size: 1.35rem; line-height: 1; }

/* Schwebender Titel oben, rechts neben dem Menüknopf */
.app-schwebe-titel {
  position: fixed;
  top: 12px;
  left: 66px;
  right: 12px;
  z-index: 2550;
  padding: 11px 14px;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.14);
  font-weight: 700;
  font-size: 1rem;
  /* Lange Adressen sollen den Balken nicht sprengen. */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   BILDANSICHT: BILD ÜBER DIE VOLLE BREITE, PFEILE IM BILD

   Bisher blieben links und rechts 60 Bildpunkte für die Pfeile frei - auf dem
   Handy fehlte diese Breite dem Bild. Die Pfeile liegen jetzt ÜBER dem Bild
   am Rand; das Bild darf die ganze Breite nutzen.
   ========================================================= */
.photo-lightbox-overlay { padding: 20px 8px; }
.photo-lightbox-img {
  max-width: 100%;
  width: 100%;
  max-height: 78vh;
  object-fit: contain;
}
.photo-lightbox-prev { left: 10px; }
.photo-lightbox-next { right: 10px; }
/* Etwas kräftiger hinterlegt, damit die Pfeile auf hellen Bildern erkennbar
   bleiben - sie liegen jetzt ja auf dem Motiv. */
.photo-lightbox-nav {
  background: rgba(20, 18, 16, 0.55);
  backdrop-filter: blur(2px);
}
.photo-lightbox-nav:hover { background: rgba(20, 18, 16, 0.75); }

/* Bei geöffneter Bildansicht stören die schwebenden Knöpfe - sie liegen sonst
   über dem Bild und lassen sich versehentlich treffen. */
body.bild-offen #zimmer-wahl,
body.bild-offen #haupt-wahl,
body.bild-offen .app-menu-btn-schwebend,
body.bild-offen .app-schwebe-titel { display: none; }

/* Burgermenü der App: bei vielen Einträgen scrollbar statt abgeschnitten. */
.app-menu-panel {
  max-height: calc(100vh - 90px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* =========================================================
   SCHWEBENDER SCHLOSS-KNOPF (Aufmaß ab- und aufschließen)
   Steht oben rechts, gegenüber dem Menü - der häufigste Griff gehört
   dauerhaft sichtbar auf den Bildschirm, nicht hinter eine Auswahl.
   ========================================================= */
.app-schloss {
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 2600;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  background: var(--green, #2f6b46);
  color: #fff;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.22);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
}
/* Geschlossen: rot, damit auf einen Blick klar ist, dass nichts mehr
   geändert werden kann. */
.app-schloss.ist-gesperrt { background: #a33; }
.app-schloss-zeichen { font-size: 1.25rem; line-height: 1; }
.app-schloss:active { transform: scale(0.94); }
/* Der Titel darf nicht unter den Knopf laufen. */
.app-schwebe-titel { right: 68px; }

/* Freigabelink zur Bildergalerie im Frontend */
.galerie-freigabe { margin-top: 14px; }
.galerie-freigabe .galerie-adresse {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: monospace;
  font-size: 0.78rem;
  background: #fff;
  box-sizing: border-box;
}
.galerie-freigabe .galerie-zeile {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
  justify-content: center;
}

/* Bereichswahl auf der Startseite */
.wahl-ziele {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 4px 0 16px;
}
.wahl-ziel { text-decoration: none; text-align: center; }

/* Verweise im Short-Info-Menü: fett wie die Wege aus den Einstellungen. */
.app-menu-zurueck { font-weight: 700; }

/* Zusatzangaben und Export beim Treppen-Aufmaß */
.app-treppe-zusatz { margin-top: 14px; }
.app-treppe-feld {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 12px;
}
.app-treppe-feld > span {
  font-size: 0.8rem;
  font-weight: 700;
  color: #6b645d;
}
.app-treppe-feld input,
.app-treppe-feld select {
  width: 100%;
  box-sizing: border-box;
  height: 42px;
  padding: 0 12px;
  font-size: 1rem;
  font-family: inherit;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: #fff;
}
.app-treppe-export { margin: 16px 0 8px; }
.app-treppe-export .btn { width: 100%; }

/* Vollbildansicht eines Fotos: Das Schloss der Bildschirmsperre liegt oben
   rechts auf einer höheren Ebene als das Vollbild und verdeckte dort das
   Schließen-Kreuz - das Bild ließ sich nicht mehr zumachen. Solange ein Foto
   groß angezeigt wird, ist die Sperre ohnehin nicht bedienbar. */
body.bild-offen .app-schloss { display: none; }

/* Sanfter Bildwechsel in der Foto-Großansicht - siehe fotogalerie/. */
.photo-lightbox-img { transition: transform 180ms ease, opacity 180ms ease; }
.photo-lightbox-img.raus-links { transform: translateX(-60%); opacity: 0; }
.photo-lightbox-img.raus-rechts { transform: translateX(60%); opacity: 0; }
.photo-lightbox-img.wartet-rechts,
.photo-lightbox-img.wartet-links { transition: none; opacity: 0; }
.photo-lightbox-img.wartet-rechts { transform: translateX(60%); }
.photo-lightbox-img.wartet-links { transform: translateX(-60%); }
/* Beim Vergrößern übernimmt die Verschiebung im Bild - dort darf der
   Übergang nicht mitreden. */
.photo-lightbox-img.vergroessert { transition: none; }

@media (prefers-reduced-motion: reduce) {
  .photo-lightbox-img { transition: none; }
}

/* Offene und abgeschlossene Aufmaße in der Liste.
   Sehr zurückhaltend eingefärbt: Die Zeile soll lesbar bleiben, die Farbe
   nur beim Überfliegen die Zuordnung erleichtern. */
.aufmass-listen-eintrag.ist-offen {
  background: #f4faf5;
  border-left: 3px solid #9ec9a8;
}
.aufmass-listen-eintrag.ist-abgeschlossen {
  background: #fdf5f4;
  border-left: 3px solid #d8a9a4;
}

/* Die Straße in Aufmaßlisten: fett und eigens eingerahmt.
   Auf der Baustelle sucht man zuerst danach, nicht nach dem Kundennamen. */
.listen-strasse {
  display: inline-block;
  align-self: flex-start;
  margin: 3px 0;
  padding: 3px 9px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #23201d;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(0, 0, 0, 0.12);
  border-radius: 7px;
}

/* Zwei Knöpfe über der Aufmaßliste */
.aufmass-neu-zeile { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.aufmass-neu-zeile .btn { flex: 1 1 160px; }

/* Kennzeichnung eines duplizierten Aufmaßes */
.duplikat-marke {
  display: inline-block;
  padding: 1px 8px;
  border-radius: 999px;
  background: #fdf2dd;
  border: 1px solid #ddc98a;
  color: #8a6516;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  vertical-align: middle;
}
button.duplikat-marke { cursor: pointer; font-family: inherit; }