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

/* 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;
  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 */
.project-list,
#task-view,
#material-view,
#delivery-view,
#recent-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; }
.photo-upload-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  flex-wrap: wrap;
  justify-content: center;
}
.photo-upload-label { cursor: pointer; }
.photo-upload-status { font-size: 0.85rem; }
.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;
  margin: 0 auto 10px;
  max-width: 480px;
}
.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; }