/* ═══════════════════════════════════════════════════════════════════════════
   FELD-APP: Übergabe/Abnahme vor Ort (#hof-app) — mobil-first, große Touch-Ziele.
   Eigene, fokussierte Oberfläche (NICHT die Desktop-Maske). Namespace: .hof / #hof-
   ═══════════════════════════════════════════════════════════════════════════ */
#hof-app { position: fixed; inset: 0; z-index: 1100; display: none; flex-direction: column;
  background: var(--bg-secondary, #F6F5F1); color: var(--text-primary, #23201B);
  font-family: var(--font-body, Inter, system-ui, sans-serif);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
#hof-app.is-open { display: flex; }
body.hof-lock { overflow: hidden; }
.hof-loading, .hof-err { padding: 40px 20px; text-align: center; color: var(--text-muted, #5F6B66); }
.hof-err .hof-btn { margin-top: 16px; }

/* Kompakter Kopf (KEIN großer Header) + Fortschrittsbalken */
.hof-top { position: relative; display: flex; align-items: center; gap: 10px; padding: calc(env(safe-area-inset-top, 0) + 10px) 12px 12px;
  background: #14261C; color: var(--color-surface); }
.hof-top-t { flex: 1 1 auto; min-width: 0; }
.hof-top-title { font-weight: 700; font-size: var(--text-base); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hof-top-sub { font-size: var(--text-xs); opacity: .72; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hof-top-pct { font-weight: 700; font-size: var(--text-sm); opacity: .9; }

.hof-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 14px 12px 20px; }
.hof-navbtn.active { color: var(--color-success-ink); font-weight: 600; }

/* Übersicht */
.hof-hero { text-align: center; padding: 14px 0 6px; }
.hof-ring { --p: 0; width: 132px; height: 132px; margin: 0 auto; border-radius: 50%;
  background: conic-gradient(#57C08A calc(var(--p) * 1%), var(--gray-200) 0); display: grid; place-items: center; }
.hof-ring-in { width: 106px; height: 106px; border-radius: 50%; background: var(--bg-secondary, #F6F5F1); display: grid; place-items: center; }
.hof-ring-big { font-size: 26px; font-weight: 800; letter-spacing: -.02em; }
.hof-ring-sub { font-size: var(--text-xs); color: var(--text-muted, #5F6B66); }
.hof-hero-line { margin-top: 8px; font-size: var(--text-sm); color: var(--text-secondary, #6B6558); }
.hof-cta { display: block; width: 100%; border: 0; border-radius: var(--radius-xl); background: var(--color-success-ink); color: var(--color-surface); padding: 16px; font-size: var(--text-base); font-weight: 700; cursor: pointer; margin: 12px 0; }
.hof-cta.ok { background: var(--color-success-ink); }
.hof-cta-sub { display: block; font-size: var(--text-sm); font-weight: 400; opacity: .85; margin-top: 2px; }
.hof-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin-top: 12px; }
.hof-stat { background: var(--color-surface); border: 1px solid var(--border-light, #E7E3DA); border-radius: var(--radius-lg); padding: 12px 8px; text-align: center; }
.hof-stat.is-bad { border-color: #EBC3BC; background: #FCF3F1; }
.hof-stat-n { font-size: var(--text-xl); font-weight: 800; }
.hof-stat-l { font-size: var(--text-xxs); color: var(--text-muted, #5F6B66); }

/* Räume-Liste */
.hof-roomlist { display: flex; flex-direction: column; gap: 8px; }
.hof-room { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; border: 1px solid var(--border-light, #E7E3DA); background: var(--color-surface); border-radius: var(--radius-lg); padding: 14px 14px; cursor: pointer; }
.hof-room:active { transform: scale(.99); }
.hof-dot { flex: 0 0 auto; width: 12px; height: 12px; border-radius: 50%; }
.hof-room-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.hof-room-t { font-weight: 600; font-size: var(--text-base); }
.hof-room-sub { font-size: var(--text-xs); color: var(--text-muted, #5F6B66); }
.st-open { background: #C9C3B6; } .st-part { background: #E0A83B; } .st-ok { background: #57C08A; } .st-bad { background: #DA5B4A; }
.hof-pill { flex: 0 0 auto; font-size: var(--text-xxs); font-weight: 700; padding: 4px 9px; border-radius: var(--radius-pill); color: var(--color-surface); }
.hof-pill.st-open { background: #A9A392; } .hof-pill.st-part { background: #C68A1E; } .hof-pill.st-ok { background: var(--color-success-ink); } .hof-pill.st-bad { background: #C6432F; }

/* Raum-Detail */
.hof-roomhead { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.hof-navmini { flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--radius-lg); border: 1px solid var(--border-light, #E7E3DA); background: var(--color-surface); font-size: var(--text-lg); cursor: pointer; }
.hof-navmini.close { font-size: var(--text-base); }
.hof-roomhead-t { flex: 1 1 auto; min-width: 0; text-align: center; }
.hof-roomhead-title { font-weight: 800; font-size: var(--text-lg); }
.hof-roomhead-sub { font-size: var(--text-xxs); color: var(--text-muted, #5F6B66); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hof-roomact { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.hof-act { display: flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--border-light, #E7E3DA); background: var(--color-surface); border-radius: var(--radius-lg); padding: 13px 6px; font-size: var(--text-sm); font-weight: 600; cursor: pointer; color: var(--text-primary, #23201B);
  /* Seit 23.08.2026 sind die Foto-Aktionen echte <button> (zentraler Auswahldialog
     statt <input capture>). Buttons erben Schrift und Breite nicht von selbst. */
  font-family: inherit; width: 100%; text-align: center; -webkit-appearance: none; appearance: none; }
.hof-act.primary { background: #EAF6EF; border-color: #B9E1CB; color: var(--color-success-ink); }
.hof-act.cam { background: #EEF2FB; border-color: #C6D3EC; color: #33487A; }
.hof-strip { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 10px; }
.hof-thumb { position: relative; flex: 0 0 auto; width: 76px; height: 76px; border-radius: var(--radius-lg); overflow: hidden; background: #eee; }
.hof-thumb img { width: 100%; height: 100%; object-fit: cover; }
.hof-thumb-x { position: absolute; top: 3px; right: 3px; width: 20px; height: 20px; border-radius: 50%; border: 0; background: rgba(0,0,0,.55); color: var(--color-surface); font-size: var(--text-xxs); cursor: pointer; }
.hof-checks { display: flex; flex-direction: column; }
.hof-check { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-top: 1px solid var(--border-light, #EFEBE2); }
.hof-check:first-child { border-top: 0; }
.hof-check-t { flex: 1 1 auto; font-size: var(--text-md); }
.hof-check.is-bad { background: #FDF3F1; } .hof-check.is-ok .hof-check-t { color: var(--color-success-ink); }
.hof-cstag { font-size: 10px; color: var(--text-muted,#5F6B66); margin-left: 6px; }
.hof-cseg-wrap { flex: 0 0 auto; display: flex; gap: 6px; }
.hof-cseg { min-width: 58px; border: 1.5px solid var(--border-light, #E7E3DA); background: var(--color-surface); border-radius: var(--radius-lg); padding: 9px 8px; font-size: var(--text-sm); font-weight: 700; cursor: pointer; color: var(--text-muted, #8A8375); }
.hof-cseg.on.ok { background: var(--color-success-ink); border-color: var(--color-success-ink); color: var(--color-surface); }
.hof-cseg.on.mangel { background: #C6432F; border-color: #C6432F; color: var(--color-surface); }
.hof-sec-h { font-size: var(--text-xs); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted, #5F6B66); margin: 16px 0 8px; }
.hof-finds, .hof-list { display: flex; flex-direction: column; gap: 6px; }
.hof-find { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: #FDF3F1; border: 1px solid #EBC3BC; border-radius: var(--radius-lg); padding: 10px 12px; font-size: var(--text-sm); }
.hof-finish { display: block; width: 100%; border: 0; border-radius: var(--radius-lg); background: var(--color-success-ink); color: var(--color-surface); padding: 15px; font-size: var(--text-base); font-weight: 700; cursor: pointer; margin-top: 16px; }
.hof-finish.big { margin-top: 18px; padding: 17px; font-size: var(--text-base); }
.hof-finish.disabled { background: #C9C3B6; }

/* Erfassung / Zeilen */
.hof-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--color-surface); border: 1px solid var(--border-light, #E7E3DA); border-radius: var(--radius-lg); padding: 12px 14px; }
.hof-line.is-bad { border-color: #EBC3BC; }
.hof-line.is-ok { border-color: #B9E1CB; }
.hof-line-t { flex: 1 1 auto; min-width: 0; font-size: var(--text-md); font-weight: 600; }
.hof-line-s { display: block; font-size: var(--text-xs); font-weight: 400; color: var(--text-muted, #5F6B66); }
.hof-stepper { display: flex; align-items: center; gap: 4px; }
.hof-step { width: 40px; height: 40px; border-radius: var(--radius-lg); border: 1px solid var(--border-light, #E7E3DA); background: var(--color-surface); font-size: 20px; cursor: pointer; }
.hof-qty { min-width: 32px; text-align: center; font-size: var(--text-lg); font-weight: 700; }
.hof-meterin { width: 108px; border: 1.5px solid var(--border-light, #E7E3DA); border-radius: var(--radius-lg); padding: 10px; font-size: var(--text-base); text-align: right; }
.hof-empty, .hof-empty-s { color: var(--text-muted, #5F6B66); font-size: var(--text-sm); padding: 14px; text-align: center; }

/* Notizen / Abschluss */
.hof-note { border-radius: var(--radius-lg); padding: 12px 14px; font-size: var(--text-sm); margin: 4px 0 10px; background: var(--color-surface); border: 1px solid var(--border-light, #E7E3DA); }
.hof-note.ok { background: #EAF6EF; border-color: #B9E1CB; color: #1E6B41; }
.hof-note.bad { background: #FDF3F1; border-color: #EBC3BC; color: var(--color-danger-ink); }
.hof-note.warn { background: var(--color-warning-soft); border-color: var(--color-warning-soft); color: var(--color-warning-ink); }
.hof-note ul { margin: 6px 0 0; padding-left: 18px; }
/* ── Abschluss: Vorschau/Sprung/Vorbehalt (mobil) ── */
.hof-jump { background: none; border: 0; padding: 0; color: #b23b2e; font: inherit; text-align: left; text-decoration: underline; cursor: pointer; }
.hof-row2 { display: flex; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.hof-row2 .hof-btn { flex: 1; min-width: 120px; }
.hof-fld { display: block; margin: 10px 0; }
.hof-fld span { display: block; font-size: var(--text-xs); color: var(--gray-500); margin-bottom: 4px; }
.hof-fld input { width: 100%; box-sizing: border-box; padding: 11px 12px; border: 1px solid var(--vi-border); border-radius: var(--radius-lg); font: inherit; }
.hof-decs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.hof-dec { border: 1.5px solid var(--border-light, #E7E3DA); background: var(--color-surface); border-radius: var(--radius-lg); padding: 13px 8px; font-size: var(--text-sm); font-weight: 600; cursor: pointer; }
.hof-dec.on { border-color: var(--color-success-ink); background: #EAF6EF; color: var(--color-success-ink); }
.hof-done { text-align: center; padding: 40px 20px; }
.hof-done-ic { width: 72px; height: 72px; margin: 0 auto 14px; border-radius: 50%; background: var(--color-success-ink); color: var(--color-surface); font-size: 38px; display: grid; place-items: center; }
.hof-done-t { font-size: 20px; font-weight: 800; }
.hof-done-s { font-size: var(--text-sm); color: var(--text-muted, #5F6B66); margin-bottom: 18px; }
.hof-btn { display: block; width: 100%; border: 0; border-radius: var(--radius-lg); background: var(--color-success-ink); color: var(--color-surface); padding: 14px; font-size: var(--text-base); font-weight: 700; cursor: pointer; margin-top: 8px; }
.hof-btn.ghost { background: var(--color-surface); border: 1px solid var(--border-light, #E7E3DA); color: var(--text-primary, #23201B); }
.hof-link { background: none; border: 0; color: var(--color-success-ink); font-weight: 600; text-decoration: underline; cursor: pointer; font-size: var(--text-sm); padding: 0; }

/* Bottom-Sheet (Mangel / Unterschrift / Zähler) */
.hof-sheet-ov { position: fixed; inset: 0; z-index: 1150; background: rgba(20,15,10,.45); display: flex; align-items: flex-end; }
.hof-sheet { width: 100%; max-height: 92vh; overflow-y: auto; background: var(--bg-secondary, #F6F5F1); border-radius: 18px 18px 0 0; padding: 8px 14px calc(env(safe-area-inset-bottom,0) + 14px); animation: hofUp .2s ease; }
@keyframes hofUp { from { transform: translateY(30px); opacity: .6; } to { transform: none; opacity: 1; } }
.hof-sheet-h { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: var(--text-base); padding: 8px 2px 12px; }
.hof-sheet-b { display: flex; flex-direction: column; gap: 10px; }
.hof-sheet-f { display: flex; gap: 10px; margin-top: 14px; }
.hof-sheet-f .hof-btn { margin: 0; }
.hof-in { width: 100%; max-width: 100%; box-sizing: border-box; border: 1.5px solid var(--border-light, #E7E3DA); border-radius: var(--radius-lg); padding: 13px; font-size: var(--text-base); background: var(--color-surface); }
/* Sicherheitsnetz gegen abgeschnittene Felder: KEIN Eingabe-/Auswahlfeld ragt je über seinen Container. */
#hof-app input, #hof-app select, #hof-app textarea, #hof-app button { box-sizing: border-box; max-width: 100%; }
#hof-app select { -webkit-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--gray-500) 50%), linear-gradient(135deg, var(--gray-500) 50%, transparent 50%); background-position: calc(100% - 16px) 50%, calc(100% - 11px) 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; }
.hof-mini { width: 30px; height: 30px; border-radius: var(--radius-md); border: 1px solid var(--border-light, #E7E3DA); background: var(--color-surface); cursor: pointer; font-size: var(--text-sm); }
.hof-sigwrap { background: var(--color-surface); border: 1.5px dashed var(--border-strong, #C9C3B6); border-radius: var(--radius-lg); padding: 8px; }
.hof-sig { width: 100%; height: 180px; touch-action: none; display: block; }

/* Speichern-Status im Kopf */
.hof-top-right { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; }
.hof-save { font-size: var(--text-xxs); font-weight: 600; padding: 3px 8px; border-radius: var(--radius-pill); }
.hof-save.saving { background: rgba(255,255,255,.18); color: var(--color-surface); }
.hof-save.ok { background: rgba(87,192,138,.28); color: #DFF6E9; }
.hof-save.err { background: rgba(218,91,74,.35); color: #FFE1DB; }

/* Übersicht: Stat-Tiles klickbar + Schnellaktionen */
.hof-stat { display: block; width: 100%; cursor: pointer; }
.hof-quick { display: flex; flex-wrap: wrap; gap: 8px; }
.hof-qbtn { border: 1px solid var(--border-light, #E7E3DA); background: var(--color-surface); border-radius: var(--radius-pill); padding: 10px 14px; font-size: var(--text-sm); font-weight: 600; cursor: pointer; color: var(--color-success-ink); }

/* Stammdaten: Kontextkarte + Beteiligte */
.hof-card { background: var(--color-surface); border: 1px solid var(--border-light, #E7E3DA); border-radius: var(--radius-xl); padding: 4px 14px 12px; margin-bottom: 12px; }
.hof-card .hof-sec-h { margin-top: 12px; }
.hof-kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-top: 1px solid var(--border-light, #EFEBE2); font-size: var(--text-md); }
.hof-kv:first-of-type { border-top: 0; }
.hof-kv-k { color: var(--text-muted, #5F6B66); flex: 0 0 auto; }
.hof-kv-v { text-align: right; font-weight: 600; min-width: 0; overflow-wrap: anywhere; }
.hof-src { display: block; font-size: var(--text-xxs); font-weight: 400; color: #8A8375; }
.hof-part { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; background: var(--color-surface); border: 1px solid var(--border-light, #E7E3DA); border-radius: var(--radius-lg); padding: 12px 14px; }
.hof-part-main { min-width: 0; flex: 1; }
.hof-part-t { font-weight: 700; font-size: var(--text-base); }
.hof-part-s { font-size: var(--text-xs); color: var(--text-muted, #5F6B66); overflow-wrap: anywhere; }
.hof-part-acts { display: flex; gap: 6px; flex: 0 0 auto; }
.hof-cbadges { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.hof-cbadge { font-size: var(--text-xxs); font-weight: 700; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--bg-tertiary, #EFEBE2); color: #6B6558; }
.hof-cbadge.ok { background: var(--color-success-soft); color: var(--color-success-ink); }
.hof-cbadge.sig { background: #E7ECFA; color: #33487A; }
.hof-add { display: block; width: 100%; border: 1.5px dashed var(--border-strong, #C9C3B6); background: var(--color-surface); border-radius: var(--radius-lg); padding: 14px; font-size: var(--text-base); font-weight: 700; color: var(--color-success-ink); cursor: pointer; margin-top: 12px; }
.hof-add.sm { padding: 11px; font-size: var(--text-sm); margin-top: 8px; }

/* Räume: Suche + Filterchips */
.hof-search { margin-bottom: 10px; }
.hof-fchips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 10px; }
.hof-fchip { flex: 0 0 auto; border: 1px solid var(--border-light, #E7E3DA); background: var(--color-surface); border-radius: var(--radius-pill); padding: 8px 12px; font-size: var(--text-xs); font-weight: 600; color: var(--text-secondary, #6B6558); cursor: pointer; white-space: nowrap; }
.hof-fchip.on { background: var(--color-success-ink); border-color: var(--color-success-ink); color: var(--color-surface); }

/* Raum: Prüfgruppen */
.hof-cgrp { margin: 4px 0 10px; }
.hof-cgrp-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: var(--text-xxs); font-weight: 800; text-transform: uppercase; letter-spacing: .03em; color: var(--text-muted, #5F6B66); padding: 6px 2px; border-bottom: 1px solid var(--border-light, #E7E3DA); }
.hof-gok { border: 1px solid var(--color-success-soft); background: #E2F0DE; color: var(--color-success-ink); border-radius: var(--radius-pill); padding: 4px 10px; font-size: var(--text-xxs); font-weight: 700; cursor: pointer; }
.hof-roomfoot { display: flex; flex-direction: column; gap: 8px; }
.hof-roomact { grid-template-columns: 1fr 1fr; }

/* Übergabewerte: Sub-Navigation + Zählerkarten */
.hof-subnav { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 12px; }
.hof-subtab { flex: 1 1 auto; border: 1px solid var(--border-light, #E7E3DA); background: var(--color-surface); border-radius: var(--radius-lg); padding: 11px 8px; font-size: var(--text-sm); font-weight: 700; color: var(--text-secondary, #6B6558); cursor: pointer; white-space: nowrap; }
.hof-subtab.on { background: #14261C; border-color: #14261C; color: var(--color-surface); }
.hof-wact { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.hof-mcard { background: var(--color-surface); border: 1px solid var(--border-light, #E7E3DA); border-radius: var(--radius-lg); padding: 12px 14px; }
.hof-mcard-h { display: flex; align-items: center; gap: 8px; }
.hof-mcard-t { flex: 1 1 auto; font-weight: 700; font-size: var(--text-base); min-width: 0; overflow-wrap: anywhere; }
.hof-mcard-s { font-size: var(--text-xs); color: var(--text-muted, #5F6B66); margin-top: 3px; overflow-wrap: anywhere; }
.hof-mcard-note { font-size: var(--text-sm); color: var(--text-secondary, #3A4441); margin-top: 5px; overflow-wrap: anywhere; white-space: normal; }
.hof-mcard-b { display: flex; align-items: center; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.hof-unit { font-size: var(--text-xs); color: var(--text-muted, #5F6B66); }
.hof-msel, .hof-in select { border: 1.5px solid var(--border-light, #E7E3DA); border-radius: var(--radius-lg); padding: 9px; font-size: var(--text-md); background: var(--color-surface); }
.hof-msel { flex: 1 1 auto; min-width: 120px; }

/* Sheet-Formulare: Vorschläge, Adress-Suche, Baum, Zeilen */
.hof-frow { display: flex; gap: 8px; }
.hof-frow > * { flex: 1 1 0; min-width: 0; }
.hof-chk { display: flex; align-items: center; gap: 8px; font-size: var(--text-md); padding: 4px 2px; }
.hof-sugg { display: flex; flex-direction: column; gap: 4px; }
.hof-sugg .hof-line-s { margin-top: 2px; }
.hof-chip { display: inline-block; border: 1px solid var(--border-light, #E7E3DA); background: var(--color-surface); border-radius: var(--radius-pill); padding: 8px 12px; font-size: var(--text-sm); font-weight: 600; cursor: pointer; margin: 0 6px 6px 0; text-align: left; }
.hof-adr-res { display: flex; flex-direction: column; }
.hof-adr-item { text-align: left; border: 1px solid var(--border-light, #E7E3DA); border-top: 0; background: var(--color-surface); padding: 11px 12px; font-size: var(--text-md); cursor: pointer; }
.hof-adr-item:first-child { border-top: 1px solid var(--border-light, #E7E3DA); border-radius: 8px 8px 0 0; }
.hof-adr-item:last-child { border-radius: 0 0 8px 8px; }
.hof-tree, .hof-adopt { max-height: 46vh; overflow-y: auto; border: 1px solid var(--border-light, #E7E3DA); border-radius: var(--radius-lg); background: var(--color-surface); }
.hof-tree-node, .hof-adopt-row { display: flex; align-items: center; gap: 9px; padding: 11px 10px; border-top: 1px solid var(--border-light, #EFEBE2); font-size: var(--text-md); cursor: pointer; }
.hof-tree-node:first-child, .hof-adopt-row:first-child { border-top: 0; }
.hof-tree-node.done, .hof-adopt-row.done { opacity: .55; cursor: default; }
.hof-tree-node.sel, .hof-adopt-row.sel { background: #EAF6EF; }
.hof-tree-cb { flex: 0 0 auto; font-size: var(--text-base); }
.hof-tree-t { flex: 1 1 auto; min-width: 0; }
.hof-tree-ty { flex: 0 0 auto; font-size: var(--text-xxs); color: var(--text-muted, #5F6B66); }

/* Tablet: breiter, mehr Weißraum */
@media (min-width: 820px) {
  #hof-app { max-width: none; }
  .hof-body { padding: 18px 22px 26px; max-width: 760px; margin: 0 auto; width: 100%; }
  .hof-roomact { grid-template-columns: repeat(4, 1fr); }
}

/* ═══ 10-Schritt-Prozess: Prozessleiste · Bottom-Bar · neue Step-Views ═══ */
.hof-top-nr { font-weight: 500; color: var(--gray-500); font-size: var(--text-xs); }
.hof-stepdot { flex: 1 1 0; min-width: 0; max-width: 44px; display: inline-flex; align-items: center; justify-content: center;
  padding: 6px 0; background: none; border: 0; cursor: pointer; }
.hof-stepdot.st-ok .hof-stepdot-n { background: #D6ECDC; color: var(--color-success-ink); }
.hof-stepdot.st-part .hof-stepdot-n { background: #F3E6C2; color: var(--color-warning-ink); }
.hof-stepdot.st-warn .hof-stepdot-n { background: #F6DDD4; color: var(--color-warning-ink); }
.hof-stepdot.st-bad .hof-stepdot-n { background: #F3C9C2; color: var(--color-danger-ink); }
.hof-stepdot.st-na .hof-stepdot-n { opacity: .5; }
.hof-stepdot.active .hof-stepdot-n { width: 32px; height: 32px; background: var(--color-success-ink); color: var(--color-surface); box-shadow: 0 0 0 3px rgba(23,102,60,.16); }
/* Schmale Geräte: Kreise verkleinern, damit alle 10 sicher ohne Überlappung passen (bis 320 px). */
@media (max-width: 360px) {
  .hof-stepdot.active .hof-stepdot-n { width: 25px; height: 25px; box-shadow: 0 0 0 2px rgba(23,102,60,.16); }
}
/* Bereichs-Menü (Bottom-Sheet) — EIGENE Klasse `hof-menu*` (nicht `hof-sheet*` = Formular-Modal-Helfer) */
.hof-menu { position: fixed; inset: 0; z-index: 70; }
.hof-menu-back { position: absolute; inset: 0; background: rgba(28,26,22,.42); }
.hof-menu-panel { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; overflow-y: auto;
  background: var(--color-surface); border-radius: 18px 18px 0 0; box-shadow: 0 -8px 28px rgba(0,0,0,.22);
  padding-bottom: calc(env(safe-area-inset-bottom, 0) + 8px); animation: hofMenuUp .18s ease; }
@keyframes hofMenuUp { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }
.hof-menu-h { position: sticky; top: 0; display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 12px; font-size: var(--text-base); font-weight: 800; color: var(--gray-800); background: var(--color-surface); border-bottom: 1px solid #EDEAE2; }
.hof-menu-x { width: 40px; height: 40px; border-radius: var(--radius-lg); border: 0; background: var(--gray-100); color: var(--gray-800); font-size: var(--text-base); cursor: pointer; }
.hof-menu-list { display: flex; flex-direction: column; padding: 6px; gap: 2px; }
.hof-menu-item { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; min-height: 52px;
  padding: 10px 12px; border: 0; border-radius: var(--radius-lg); background: none; cursor: pointer; font: inherit; color: var(--gray-800); }
.hof-menu-item:active { background: #F4F2EC; }
.hof-menu-item.active { background: #EAF4EE; }
.hof-menu-n { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px;
  border-radius: 50%; background: #EDEAE2; color: #6C665B; font-size: var(--text-sm); font-weight: 800; }
.hof-menu-item.st-ok .hof-menu-n { background: #D6ECDC; color: var(--color-success-ink); }
.hof-menu-item.st-part .hof-menu-n { background: #F3E6C2; color: var(--color-warning-ink); }
.hof-menu-item.st-warn .hof-menu-n { background: #F6DDD4; color: var(--color-warning-ink); }
.hof-menu-item.st-bad .hof-menu-n { background: #F3C9C2; color: var(--color-danger-ink); }
.hof-menu-item.st-na .hof-menu-n { opacity: .5; }
.hof-menu-item.active .hof-menu-n { background: var(--color-success-ink); color: var(--color-surface); }
.hof-menu-ico { flex: 0 0 auto; font-size: var(--text-lg); width: 22px; text-align: center; }
.hof-menu-lbl { flex: 1 1 auto; min-width: 0; font-size: var(--text-base); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hof-menu-badge { flex: 0 0 auto; background: var(--gray-800); color: var(--color-surface); border-radius: var(--radius-pill); padding: 2px 9px; font-size: var(--text-xs); font-weight: 700; }
.hof-menu-here { flex: 0 0 auto; font-size: var(--text-xxs); font-weight: 800; color: var(--color-success-ink); text-transform: uppercase; letter-spacing: .04em; }
/* Bereichsübersicht: Label + verständlicher Klartext-Status je Zeile + Ampelfarben */
.hof-menu-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.hof-menu-body .hof-menu-lbl { flex: 0 0 auto; }
.hof-menu-stat { font-size: var(--text-xs); color: #6C665B; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hof-menu-item.st-open .hof-menu-n { background: #ECEAE4; color: #8A8478; }
.hof-menu-item.st-locked .hof-menu-n { background: var(--gray-200); color: var(--gray-700); }
.hof-menu-item.st-ok .hof-menu-stat { color: var(--color-success-ink); }
.hof-menu-item.st-part .hof-menu-stat, .hof-menu-item.st-warn .hof-menu-stat { color: var(--color-warning-ink); }
.hof-menu-item.st-bad .hof-menu-stat { color: var(--color-danger-ink); }

/* Kopfzeile: Zurück-Pfeil + Autosave + Überlaufmenü (kein dominantes ✕ mehr) */
.hof-back { flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--radius-lg); border: 0; background: rgba(255,255,255,.14); color: var(--color-surface); font-size: 26px; line-height: 1; cursor: pointer; }
.hof-more { flex: 0 0 auto; width: 38px; height: 38px; border-radius: var(--radius-lg); border: 0; background: rgba(255,255,255,.14); color: var(--color-surface); font-size: 20px; line-height: 1; cursor: pointer; }
.hof-savewrap { display: inline-flex; align-items: center; }
.hof-save.idle { background: rgba(255,255,255,.14); color: #EDEBE4; }
.hof-topmenu .hof-menu-panel { z-index: 71; }

/* Bereichs-Kopf: Schritt X von 10 · voller Name · fachlicher Fortschritt · „Alle Bereiche" */
.hof-stephead { flex: 0 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: var(--color-surface); border-bottom: 1px solid var(--gray-200); }
.hof-stephead-main { flex: 1 1 auto; min-width: 0; }
.hof-stephead-count { font-size: var(--text-xxs); font-weight: 700; color: var(--gray-500); text-transform: uppercase; letter-spacing: .05em; }
.hof-stephead-name { font-size: var(--text-lg); font-weight: 800; color: var(--gray-800); display: flex; align-items: center; gap: 7px; margin: 1px 0; overflow-wrap: anywhere; }
.hof-stephead-ico { font-size: var(--text-base); flex: 0 0 auto; }
.hof-stephead-prog { font-size: var(--text-sm); color: #6C665B; }
.hof-stephead.st-ok .hof-stephead-prog { color: var(--color-success-ink); }
.hof-stephead.st-part .hof-stephead-prog, .hof-stephead.st-warn .hof-stephead-prog { color: var(--color-warning-ink); }
.hof-stephead.st-bad .hof-stephead-prog { color: var(--color-danger-ink); }
.hof-allbtn { flex: 0 0 auto; border: 1px solid #CFE3D6; background: var(--green-50); color: var(--color-success-ink); font-weight: 700; font-size: var(--text-sm); border-radius: var(--radius-lg); padding: 9px 12px; min-height: 42px; cursor: pointer; white-space: nowrap; }
.hof-allbtn:active { background: #E2EFE7; }

/* „Nicht unterschrieben"-Zustand (gesperrt, aber ohne Signatur) */
.hof-done.warn .hof-done-ic { background: #B8862B; }
.hof-done.warn .hof-done-t { color: var(--color-warning-ink); }

/* Beteiligte: Anschrift/Kontakt sichtbar (erscheint auch im Protokoll) */
.hof-part-c { font-size: var(--text-xs); color: var(--gray-700); margin-top: 3px; overflow-wrap: anywhere; }
.hof-part-c.missing { color: var(--color-warning-ink); font-style: italic; }

/* Technik/Brandschutz: ZWEI klar getrennte Teilbereiche */
.hof-tgroup { border: 1px solid var(--gray-200); border-radius: var(--radius-xl); background: var(--color-surface); padding: 12px; margin-bottom: 14px; }
.hof-tgroup-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.hof-tgroup-t { font-size: var(--text-base); font-weight: 800; color: var(--gray-800); }
.hof-tgroup-sum { font-size: var(--text-xs); color: #6C665B; }
.hof-tgroup-mangel { color: var(--color-danger-ink); font-weight: 700; }
.hof-gseg { display: flex; gap: 6px; margin-bottom: 10px; }
.hof-gseg-b { flex: 1 1 0; min-width: 0; border: 1.5px solid var(--vi-border); background: var(--gray-50); color: var(--gray-700); font: inherit; font-size: var(--text-sm); font-weight: 700; border-radius: var(--radius-lg); padding: 10px 6px; min-height: 44px; cursor: pointer; }
.hof-gseg-b.on.is-rel { background: var(--green-50); border-color: var(--color-success-ink); color: var(--color-success-ink); }
.hof-gseg-b.on.is-na { background: #ECEAE4; border-color: var(--gray-500); color: var(--gray-800); }
.hof-gactions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.hof-gact { flex: 1 1 auto; border: 1px solid #CFE3D6; background: var(--green-50); color: var(--color-success-ink); font: inherit; font-size: var(--text-sm); font-weight: 700; border-radius: var(--radius-lg); padding: 10px 8px; min-height: 44px; cursor: pointer; }
.hof-gact.ghost { border-color: var(--vi-border); background: var(--gray-50); color: var(--gray-700); }
/* Prüfpunkt-Karte: i. O. / Mangel gut sichtbar, „Weitere" ausgeschrieben, Felder nie abgeschnitten */
.hof-tcheck.is-bad { border-color: #E3A99F; }
.hof-tcheck.is-ok { border-color: #B9E1CB; }
.hof-tcur { font-size: var(--text-xxs); font-weight: 700; color: var(--color-warning-ink); background: #F3E6C2; border-radius: var(--radius-pill); padding: 1px 8px; margin-left: 4px; white-space: nowrap; }
.hof-tbtns { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.hof-tbtn2 { flex: 1 1 0; min-width: 84px; border: 1.5px solid var(--vi-border); background: var(--gray-50); color: var(--gray-700); font: inherit; font-size: var(--text-md); font-weight: 700; border-radius: var(--radius-lg); padding: 11px 8px; min-height: 46px; cursor: pointer; }
.hof-tbtn2.ok.on { background: var(--green-50); border-color: var(--color-success-ink); color: var(--color-success-ink); }
.hof-tbtn2.bad.on { background: #FBF1EE; border-color: var(--color-danger-ink); color: var(--color-danger-ink); }
.hof-tmore { flex: 1 1 100%; margin-top: 2px; }
.hof-tmore.on { border-color: var(--gray-500); background: #F4F2EC; font-weight: 700; }
.hof-tfields { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.hof-tfield { display: block; }
.hof-tfield > span { display: block; font-size: var(--text-xs); color: var(--gray-500); margin-bottom: 4px; }
/* Untere Prozess-Bar — Zurück · Sync · Weiter */
.hof-botbar { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; background: var(--color-surface); border-top: 1px solid var(--gray-200);
  padding: 10px 12px calc(env(safe-area-inset-bottom, 0) + 10px); }
.hof-bb { border: 0; border-radius: var(--radius-lg); padding: 13px 16px; font: inherit; font-size: var(--text-base); font-weight: 700; cursor: pointer; min-height: 46px; }
.hof-bb.prev { background: var(--gray-100); color: var(--gray-800); }
.hof-bb.next { background: var(--color-success-ink); color: var(--color-surface); margin-left: auto; }
.hof-bb.next[disabled] { background: var(--gray-300); color: #A9A399; }
.hof-bb-sp { flex: 0 0 auto; width: 1px; }
.hof-bb-sync { flex: 1 1 auto; text-align: center; font-size: var(--text-xs); color: #6C8B79; }
.hof-bb-sync.saving { color: var(--color-warning-ink); } .hof-bb-sync.err { color: var(--color-danger-ink); font-weight: 700; }
/* Gesamtzustand — große Auswahlkarten (keine Checkbox-Liste) */
.hof-oclist { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 12px; }
.hof-oc { text-align: left; border: 1.5px solid var(--vi-border); background: var(--color-surface); border-radius: var(--radius-lg); padding: 12px 14px; cursor: pointer; font: inherit; display: block; }
.hof-oc-t { display: block; font-weight: 700; color: var(--gray-800); font-size: var(--text-base); }
.hof-oc-h { display: block; font-size: var(--text-xs); color: var(--gray-500); margin-top: 2px; }
.hof-oc.on { border-color: var(--color-success-ink); background: var(--green-50); }
.hof-oc.on .hof-oc-t { color: var(--color-success-ink); }
.hof-tcheck { border: 1px solid #EEEAE0; border-radius: var(--radius-lg); padding: 10px 12px; margin-bottom: 8px; background: var(--color-surface); }
.hof-tcheck-t { font-weight: 600; color: var(--gray-800); margin-bottom: 8px; }
.hof-tbtns { display: flex; gap: 6px; flex-wrap: wrap; }
.hof-tbtn.on.st-ok { background: var(--green-50); border-color: var(--color-success-ink); color: var(--color-success-ink); }
.hof-tbtn.on.st-bad { background: #FBF1EE; border-color: var(--color-danger-ink); color: var(--color-danger-ink); }
.hof-tbtn.on.st-open, .hof-tbtn.on.st-na { background: #ECEAE4; border-color: var(--gray-500); color: var(--gray-800); }
/* In-App-PDF-Viewer */
.hof-pdfwrap { border: 1px solid var(--vi-border); border-radius: var(--radius-lg); overflow: hidden; background: #f5f3ee; margin: 6px 0 10px; }
.hof-pdf { width: 100%; height: 62vh; min-height: 320px; border: 0; display: block; }
.hof-ta-big { min-height: 120px; resize: vertical; }
.hof-mangelresp { margin-top: 6px; font-size: var(--text-xs); color: var(--gray-500); }
.hof-mangelresp select { margin-top: 3px; }

/* Querformat Smartphone: Formulare 2-spaltig, PDF höher, Prozessleiste bleibt */
@media (max-width: 900px) and (orientation: landscape) {
  .hof-oclist { display: grid; grid-template-columns: 1fr 1fr; }
  .hof-pdf { height: 78vh; }
}
/* Tablet: größere Karten, Zustand/Mängel/Vorschau als Master-Detail-freundliches Layout */
@media (min-width: 820px) {
  .hof-oclist { display: grid; grid-template-columns: 1fr 1fr; }
  .hof-pdf { height: 72vh; }
}
@media (min-width: 1100px) and (orientation: landscape) {
  .hof-pdf { height: 80vh; }
}

/* Ansprechpartner einer Firma — eingerückt mit Führungslinie, gleiche Sprache wie
   am Schreibtisch (VIPartyPick). Die Trefferhöhe bleibt daumentauglich. */
.hof-adr-item--sub {
  padding-left: 26px;
  box-shadow: inset 3px 0 0 var(--border-light, #E7E3DA);
  color: var(--text-secondary, #4A5551);
}