/* Оболочка приложения. Крупные цели касания: планшет, перчатки, стройка. */
:root {
  --grund: #0f3d5c;
  --grund-hell: #1b5c86;
  --papier: #ffffff;
  --flaeche: #f4f6f8;
  --text: #16202a;
  --gedaempft: #5b6b7a;
  --rand: #d4dbe2;
  --warnung: #8a4b00;
  --warnung-flaeche: #fff4e0;
  --fehler: #9b1c1c;
  --fehler-flaeche: #fdeaea;
  --gut: #1e6b3a;
  font-size: 17px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--flaeche);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}

.kopfleiste {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
  padding-top: calc(0.75rem + env(safe-area-inset-top));
  background: var(--grund);
  color: #fff;
}

.kopfleiste h1 { font-size: 1.1rem; margin: 0; font-weight: 600; }

.anzeige { font-size: 0.8rem; opacity: 0.9; }
.anzeige[data-zustand="bereit"]::before { content: "● "; color: #7fe0a0; }
.anzeige[data-zustand="pruefen"]::before { content: "○ "; }
.anzeige[data-zustand="unvollstaendig"]::before { content: "○ "; color: #ffd27f; }

.inhalt { max-width: 44rem; margin: 0 auto; padding: 1.25rem 1rem 3rem; }

.karte {
  background: var(--papier);
  border: 1px solid var(--rand);
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.karte h2 { margin-top: 0; font-size: 1.05rem; }

.hinweis { color: var(--gedaempft); font-size: 0.92rem; }

button, .knopf {
  font: inherit;
  min-height: 3rem;
  padding: 0.75rem 1.25rem;
  border-radius: 8px;
  border: 1px solid var(--grund);
  background: var(--grund);
  color: #fff;
  cursor: pointer;
}

button.zweit { background: var(--papier); color: var(--grund); }
button:disabled { opacity: 0.5; cursor: default; }

.knopfreihe { display: flex; flex-wrap: wrap; gap: 0.75rem; }

.meldung {
  border-radius: 8px;
  padding: 0.85rem 1rem;
  margin-bottom: 1rem;
  border: 1px solid transparent;
}
.meldung[data-art="fehler"] { background: var(--fehler-flaeche); border-color: #f0b4b4; color: var(--fehler); }
.meldung[data-art="warnung"] { background: var(--warnung-flaeche); border-color: #f0d6a8; color: var(--warnung); }
.meldung[data-art="gut"] { background: #eaf6ee; border-color: #b8dcc4; color: var(--gut); }

/* Полоса сообщений стоит над точкой монтирования и переживает смену экрана. */
.meldungen { padding-bottom: 0; }
.meldungen:empty { display: none; }
.meldungen .meldung > button { display: block; margin-top: 0.6rem; padding: 0.4rem 0.9rem; font-size: 0.9rem; }

.balken { height: 8px; background: var(--rand); border-radius: 4px; overflow: hidden; margin: 0.5rem 0; }
.balken > i { display: block; height: 100%; background: var(--grund-hell); }

.datei-eingabe { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* --- Мастер секций и разметка формы (таск 02) ------------------------------- */

.schrittanzeige { margin: 0 0 0.35rem; color: var(--gedaempft); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.04em; }
.sektion-titel { margin: 0 0 0.5rem; font-size: 1.1rem; }
.knoten-titel { margin: 1.25rem 0 0.5rem; font-size: 1rem; }
.vortext { margin: 0 0 0.6rem; }
.nachtext { margin-top: 0.75rem; }
.platzhalter { color: var(--gedaempft); font-style: italic; }
.abschnitt-stand { margin: 0.75rem 0; }

/* Поля ввода — крупные: планшет, перчатки, стройка. */
.feld {
  font: inherit;
  width: 100%;
  min-height: 2.75rem;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--rand);
  border-radius: 6px;
  background: var(--papier);
  color: var(--text);
}
.feld:focus { outline: 2px solid var(--grund-hell); outline-offset: 1px; }
textarea.feld { min-height: 3.5rem; resize: vertical; }

input.kasten { width: 1.6rem; height: 1.6rem; margin: 0; accent-color: var(--grund); }

/* Ankreuz */
.gruppe { border: 0; margin: 0 0 1rem; padding: 0; }
.gruppe-titel { padding: 0; margin-bottom: 0.35rem; color: var(--gedaempft); }
.gruppe-titel.fett { color: var(--text); font-weight: 600; }
.option { display: flex; align-items: center; gap: 0.75rem; min-height: 3rem; padding: 0.25rem 0.35rem; border-bottom: 1px solid var(--rand); cursor: pointer; }
.option:last-child { border-bottom: 0; }

/* Таблицы. Узкая прокручивается вбок; широкая по умолчанию идёт карточками (таск 04). */
.tabelle-rolle { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -0.25rem 1rem; padding: 0 0.25rem; }
table.tabelle { width: 100%; min-width: 22rem; border-collapse: collapse; font-size: 0.95rem; }
table.tabelle th, table.tabelle td { border: 1px solid var(--rand); padding: 0.4rem 0.5rem; text-align: left; vertical-align: top; }
table.tabelle th { background: var(--flaeche); font-weight: 600; font-size: 0.85rem; }
table.tabelle th.eng, table.tabelle td.eng { text-align: center; white-space: nowrap; }
table.tabelle td.eng { vertical-align: middle; }

/* Feldtabelle: подпись над полем — на узком экране это единственная читаемая форма. */
.felderliste { display: grid; gap: 0.75rem; }
.feldzeile { display: grid; gap: 0.25rem; }
.feldname { color: var(--gedaempft); font-size: 0.9rem; }

/* Оглавление с остатком по каждой секции. */
.inhaltsverzeichnis { list-style: none; margin: 1rem 0; padding: 0; }
.inhaltsverzeichnis li { margin-bottom: 0.5rem; }
button.eintrag { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 0.75rem; text-align: left; }
button.eintrag[data-zustand="fertig"] { border-color: var(--gut); color: var(--gut); }
.eintrag-titel { font-weight: 600; }
.eintrag-rest { color: var(--gedaempft); font-size: 0.85rem; white-space: nowrap; }
button.eintrag[data-zustand="fertig"] .eintrag-rest { color: var(--gut); }

/* Просмотр PDF (таск 06). Высота задаётся снаружи через --betrachter-hoehe:
   без ограниченной высоты прокручиваться нечему. */
.betrachter {
  display: flex;
  flex-direction: column;
  height: var(--betrachter-hoehe, 70vh);
  min-height: 16rem;
  border: 1px solid var(--rand);
  border-radius: 8px;
  overflow: hidden;
  background: var(--flaeche);
}
.betrachter-blatt {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  /* Инерция и захват прокрутки: жест на планшете не должен уводить страницу целиком. */
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 8px;
  scroll-behavior: auto;
}
.betrachter-blatt:focus-visible { outline: 2px solid var(--grund-hell); outline-offset: -2px; }
.betrachter-seite {
  margin: 0 auto 8px;
  background: var(--papier);
  border: 1px solid var(--rand);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
  /* Пока страница не отрисована, место под неё уже занято — полоса прокрутки не прыгает. */
  content-visibility: auto;
}
.betrachter-seite canvas { display: block; width: 100%; height: 100%; }
.betrachter-meldung { margin: 2rem 0; text-align: center; color: var(--gedaempft); }
.betrachter-leiste {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--rand);
  background: var(--papier);
  font-size: 0.9rem;
}
.betrachter-zaehler { font-weight: 600; white-space: nowrap; }
.betrachter-hinweis { color: var(--gedaempft); font-size: 0.85rem; text-align: right; }
.betrachter[data-gelesen="ja"] .betrachter-hinweis { color: var(--gut); }

/* --- Widerbreite Tabellen: «Zimmer für Zimmer» (таск 04) -------------------- */
/* Карточки нужны там, где таблица шире экрана: 13 колонок секции D на планшете
   стоя не заполняются. Горизонтальной прокрутки в этом виде нет вовсе —
   всё складывается в один столбец. */

.ansicht-umschalter { display: flex; gap: 0; margin: 0 0 0.75rem; }
button.ansicht-knopf {
  flex: 1 1 0;
  padding: 0.7rem 0.5rem;
  font-size: 0.95rem;
  background: var(--papier);
  color: var(--grund);
  border: 1px solid var(--grund);
  border-radius: 0;
}
button.ansicht-knopf:first-child { border-radius: 6px 0 0 6px; }
button.ansicht-knopf:last-child { border-radius: 0 6px 6px 0; border-left: 0; }
button.ansicht-knopf.aktiv { background: var(--grund); color: var(--papier); }

.zimmerkarten { display: grid; gap: 1rem; margin-bottom: 1rem; }
.zimmerkarte {
  background: var(--papier);
  border: 1px solid var(--rand);
  border-radius: 8px;
  padding: 0.85rem 0.9rem 0.35rem;
  max-width: 100%;
  overflow-wrap: anywhere;
}
.zimmerkarte-titel { margin: 0 0 0.6rem; font-size: 1rem; }
button.zimmer-uebernehmen {
  width: 100%;
  margin-bottom: 0.6rem;
  padding: 0.7rem 0.75rem;
  font-size: 0.95rem;
  background: var(--papier);
  color: var(--grund);
  border: 1px solid var(--grund);
}
button.zimmer-uebernehmen[disabled] { border-color: var(--rand); color: var(--gedaempft); cursor: default; }
.zimmer-grund { margin: -0.35rem 0 0.6rem; font-size: 0.85rem; }

/* Крупная цель нажатия: строка признака целиком — это label. */
.zimmer-feld {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.25rem 0;
  border-top: 1px solid var(--rand);
  cursor: pointer;
}
.zimmer-name { flex: 1 1 auto; font-size: 0.95rem; }
.zimmer-feld > .feld { flex: 0 1 9rem; }
.zimmer-feld > input.kasten { flex: 0 0 auto; width: 1.9rem; height: 1.9rem; }

/* Секция H: реестр дефектов. Номер и происхождение стоят в шапке карточки —
   при обходе номер называют вслух, и он должен читаться без вглядывания. */
.mangelliste { list-style: none; margin: 0.5rem 0 1rem; padding: 0; display: grid; gap: 0.75rem; }
.mangel { border: 1px solid var(--rand); border-radius: 8px; padding: 0.75rem; background: var(--flaeche); }
.mangel-kopf { display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; margin-bottom: 0.5rem; }
.mangel-nr { font-weight: 700; font-size: 1.05rem; }
.mangel-quelle { color: var(--gedaempft); font-size: 0.85rem; text-align: right; }
.mangel .felderliste { margin-bottom: 0.75rem; }
.mangel select.feld { min-height: 3rem; }

/* Снимки: ряд прокручивается вбок, кнопка удаления лежит поверх кадра. */
.mangel-fotos { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.75rem; }
.mangel-foto { position: relative; width: 5.5rem; height: 5.5rem; border: 1px solid var(--rand); border-radius: 6px; overflow: hidden; background: #fff; }
.mangel-foto img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mangel-foto-ersatz { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; color: var(--gedaempft); font-size: 0.8rem; }
button.foto-weg { position: absolute; top: 0.15rem; right: 0.15rem; min-height: 2rem; width: 2rem; padding: 0; line-height: 1; border-radius: 50%; }
button.gefahr { border-color: #d9b0b0; color: #8a1f1f; }
button.gefahr[data-bestaetigt="ja"] { background: #8a1f1f; border-color: #8a1f1f; color: #fff; }

/* Поле выбора файла живёт вне видимой раскладки: камеру открывает кнопка. */
.nur-fuer-lesegeraet { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Экран отправки (таск 08). Кнопка «поделиться» одна и крупная: её нажимают
   стоя, последней в приёмке, и промах здесь стоит повторного объяснения. */
.versand { padding: 0.5rem 0 1.5rem; }
.versand-titel { margin: 0 0 0.5rem; font-size: 1.15rem; }
.versand-untertitel { margin: 1.25rem 0 0.35rem; font-size: 1rem; }
.versand-hinweis { margin: 0 0 0.75rem; color: var(--gedaempft); }
.versand-hinweis.klein { font-size: 0.85rem; margin-top: 0.35rem; }
.versand-teilnehmer { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.versand-teilnehmer-zeile {
  display: flex; flex-wrap: wrap; gap: 0.25rem 0.75rem; align-items: baseline;
  border: 1px solid var(--rand); border-radius: 8px; padding: 0.5rem 0.75rem; background: var(--papier);
}
.versand-teilnehmer-zeile.ohne-name { border-style: dashed; }
.versand-name { font-weight: 600; }
.versand-teilnehmer-zeile.ohne-name .versand-name { font-weight: 400; color: var(--gedaempft); }
.versand-rolle { color: var(--gedaempft); font-size: 0.9rem; }
.versand-text {
  width: 100%; min-height: 11rem; padding: 0.6rem; border: 1px solid var(--rand); border-radius: 8px;
  background: var(--papier); color: var(--text); font-family: inherit; font-size: 0.95rem; line-height: 1.45;
}
.versand-knoepfe { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1rem; }
.versand-knopf { min-height: 3rem; padding: 0 1.1rem; }
.versand-knopf.haupt { background: var(--grund); border-color: var(--grund); color: #fff; font-weight: 600; }
.versand-knopf.haupt:disabled { background: var(--gedaempft); border-color: var(--gedaempft); }
.versand-stand { margin: 0.85rem 0 0; min-height: 1.5rem; color: var(--grund-hell); }

/* Подпись и Signaturprotokoll (таск 07). Холст крупный: подписывают стилусом
   стоя, планшет держат в руках. Ниже 900 px карточки идут в один столбец. */
.signatur-meldungen:empty { display: none; }
.betrachter-halter { margin: 0.75rem 0; --betrachter-hoehe: 60vh; }
.hash-zeile { margin: 0 0 0.15rem; font-weight: 600; }
.hash-voll {
  margin: 0 0 0.75rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.72rem;
  color: var(--gedaempft);
  overflow-wrap: anywhere;
}
textarea.einwilligung-text { width: 100%; min-height: 7rem; resize: vertical; }

.signaturliste { display: grid; gap: 1rem; margin: 0.5rem 0 1rem; }
.signaturfeld, .signatur-fertig {
  border: 1px solid var(--rand);
  border-radius: 8px;
  padding: 0.75rem;
  background: var(--papier);
}
.signaturfeld[data-unterschrieben="ja"] { border-color: var(--gut); }
.signatur-rolle { margin: 0 0 0.5rem; font-weight: 600; }
.signatur-name { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 0.5rem; }
.signatur-name > span { font-size: 0.85rem; color: var(--gedaempft); }
/* touch-action: none — иначе движение стилуса прокручивает страницу вместо линии. */
.signatur-leinwand {
  display: block;
  width: 100%;
  border: 1px dashed var(--rand);
  border-radius: 6px;
  background: #fff;
  touch-action: none;
}
.signatur-bild { display: block; max-width: 100%; height: 3.5rem; object-fit: contain; background: #fff; }
.signatur-beleg { margin: 0.15rem 0; font-size: 0.8rem; color: var(--gedaempft); overflow-wrap: anywhere; }
.signatur-abschluss { margin-top: 0.5rem; }