/* ============================================================
   Firefly – Oberfläche im CertoControl Corporate Design
   Markenrot #D41118 · Anthrazit #404044 · Hellgrau #E8E6E8 ·
   Mittelgrau #A7A4A7 · Hausschrift Nexa Text · reduziert & technisch
   ============================================================ */
@font-face { font-family: 'Nexa Text'; src: url('/cd/NexaText-Light.otf') format('opentype'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nexa Text'; src: url('/cd/NexaText-LightItalic.otf') format('opentype'); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: 'Nexa Text'; src: url('/cd/NexaText-Regular.otf') format('opentype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nexa Text'; src: url('/cd/NexaText-Book.otf') format('opentype'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nexa Text'; src: url('/cd/NexaText-Bold.otf') format('opentype'); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Nexa Text'; src: url('/cd/NexaText-ExtraBold.otf') format('opentype'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  --red: #D41118;          /* Markenrot – einziger Akzent */
  --red-dark: #A80D13;
  --red-light: #FBE7E8;
  --ink: #404044;          /* Anthrazit */
  --anthrazit: #414042;
  --muted: #807d82;        /* lesbares Grau (angelehnt an Mittelgrau) */
  --grey-mid: #A7A4A7;     /* CD-Mittelgrau (Linien, Kleintext) */
  --line: #E0DEE0;
  --grey-bg: #E8E6E8;      /* CD-Hellgrau */
  --bg: #F5F4F5;
  --card: #ffffff;
  --green: #3FA535;        /* CD-Statusfarben */
  --green-bg: #e7f4e4;
  --amber: #a97f00;
  --amber-bg: #faf0d2;
  --blue: #2C6FB5;
  --blue-bg: #e3edf7;
  --radius: 6px;
  --shadow: 0 1px 3px rgba(64,64,68,.08), 0 1px 2px rgba(64,64,68,.05);
}
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Nexa Text', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-text-size-adjust: 100%;
}

/* Topbar – weiß, Logo links, rote Akzentlinie unten */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #fff; color: var(--ink);
  padding: 8px 18px; padding-top: max(8px, env(safe-area-inset-top));
  border-bottom: 2px solid var(--red);
  box-shadow: var(--shadow);
}
.brand { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.brand-logo { height: 34px; width: auto; display: block; }
.brand-name { font-weight: 800; font-size: 18px; letter-spacing: .3px; color: var(--ink); }
.topnav { display: flex; gap: 2px; flex-wrap: wrap; }
.topnav a {
  color: var(--ink); text-decoration: none; padding: 8px 12px; border-radius: 5px;
  font-size: 14px; font-weight: 700; opacity: .85;
}
.topnav a.active, .topnav a:hover { background: var(--red-light); color: var(--red); opacity: 1; }
.userbox { display: flex; align-items: center; gap: 8px; color: var(--ink); font-size: 13px; }
.userbox .uname { font-weight: 700; }
.userbox a, .userbox button {
  color: var(--ink); background: var(--grey-bg); border: none; border-radius: 5px;
  padding: 7px 12px; font-size: 13px; font-weight: 700; cursor: pointer; text-decoration: none;
  font-family: inherit;
}
.userbox a:hover, .userbox button:hover { background: var(--red-light); color: var(--red); }

/* Login-Bildschirm */
.login-wrap { max-width: 400px; margin: 8vh auto; padding: 0 18px; }
.login-card { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: 8px; box-shadow: var(--shadow); padding: 30px 28px; }
.login-card h1 { text-align: center; margin: 12px 0 4px; font-weight: 800; }
.login-logo { display: block; height: 44px; width: auto; margin: 0 auto; }
.login-sub { text-align: center; color: var(--muted); margin: 0 0 20px; font-size: 14px; }

/* Breadcrumb */
.breadcrumb {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 9px 18px; font-size: 13px; color: var(--muted);
  background: #fff; border-bottom: 1px solid var(--line);
}
.breadcrumb a { color: var(--red); text-decoration: none; font-weight: 700; }
.breadcrumb span.sep { opacity: .5; }

.container { max-width: 1100px; margin: 0 auto; padding: 22px 18px 80px; }

h1 { font-size: 22px; font-weight: 800; margin: 0 0 4px; }
h2 { font-size: 16px; font-weight: 700; color: var(--red); margin: 26px 0 10px; padding-bottom: 4px; border-bottom: 1px solid var(--red); }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.page-head h2 { border-bottom: none; padding-bottom: 0; }
.subtle { color: var(--muted); font-size: 14px; margin: 0; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px; cursor: pointer;
  border: 1px solid var(--grey-mid); background: #fff; color: var(--ink);
  padding: 9px 15px; border-radius: 5px; font-size: 14px; font-weight: 700;
  text-decoration: none; transition: .12s; line-height: 1.15; min-height: 40px;
  font-family: inherit;
  -webkit-tap-highlight-color: rgba(212,17,24,.12);
}
.btn:hover { border-color: var(--ink); }
.btn:active { transform: scale(.97); }
.btn:focus-visible { outline: 3px solid var(--red-light); outline-offset: 1px; }
.btn-primary { background: var(--red); border-color: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-dark); border-color: var(--red-dark); }
.btn-ghost { background: transparent; border-color: transparent; color: var(--muted); }
.btn-danger { color: var(--red); border-color: #eebcbe; }
.btn-sm { padding: 7px 11px; font-size: 13px; min-height: 36px; }
.btn-block { width: 100%; justify-content: center; }
/* Touch-Geräte (iPad): größere Trefferflächen nach Apple-/WCAG-Empfehlung */
@media (pointer: coarse) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 40px; padding: 9px 13px; }
  .seg-btn { min-height: 44px; }
  /* verhindert das automatische Hineinzoomen von iOS beim Antippen kleiner Felder */
  input, select, textarea { font-size: 16px !important; }
}

/* Cards & grid */
.grid { display: grid; gap: 14px; }
.grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid.cols-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; box-shadow: var(--shadow);
}
.card.clickable { cursor: pointer; transition: .12s; }
.card.clickable:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(64,64,68,.12); border-color: var(--red); }
.card-title { font-weight: 700; font-size: 15px; margin: 0 0 3px; }
.card-meta { color: var(--muted); font-size: 13px; }

.stat { text-align: center; padding: 18px 12px; border-top: 3px solid var(--red); }
.stat .num { font-size: 30px; font-weight: 800; color: var(--red); }
.stat .lbl { color: var(--muted); font-size: 13px; margin-top: 2px; }

/* List rows */
.list { display: flex; flex-direction: column; gap: 8px; }
.row {
  display: flex; align-items: center; gap: 12px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; cursor: pointer;
  transition: .12s;
}
.row:hover { border-color: var(--red); box-shadow: var(--shadow); }
.row .main { flex: 1; min-width: 0; }
.row .main .t { font-weight: 700; }
.row .main .s { color: var(--muted); font-size: 13px; }
.row .icon { width: 38px; height: 38px; border-radius: 6px; display: grid; place-items: center; font-size: 18px; background: var(--grey-bg); flex-shrink: 0; }

/* Badges */
.badge { display: inline-block; padding: 3px 9px; border-radius: 3px; font-size: 12px; font-weight: 700; }
.badge.offen { background: var(--amber-bg); color: var(--amber); }
.badge.in_arbeit { background: var(--blue-bg); color: var(--blue); }
.badge.abgeschlossen, .badge.ok, .badge.behoben { background: var(--green-bg); color: var(--green); }
.badge.mangel, .badge.kritisch, .badge.hoch { background: var(--red-light); color: var(--red); }
.badge.nicht_pruefbar, .badge.grey { background: var(--grey-bg); color: var(--muted); }
.badge.mittel { background: var(--amber-bg); color: var(--amber); }
.badge.gering { background: var(--green-bg); color: var(--green); }
.badge.info { background: var(--blue-bg); color: var(--blue); }
/* Bewertung nach CD-Farbpunkten */
.badge.sev-gruen { background: var(--green-bg); color: var(--green); }
.badge.sev-gelb { background: var(--amber-bg); color: var(--amber); }
.badge.sev-rot { background: var(--red-light); color: var(--red); }
.badge.sev-blau { background: var(--blue-bg); color: var(--blue); }
.chip-type { background: var(--grey-bg); color: var(--ink); }

/* Forms */
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 5px; color: var(--ink); }
.field input, .field select, .field textarea, input.inline-search {
  width: 100%; padding: 11px 12px; border: 1px solid var(--grey-mid); border-radius: 5px;
  font-size: 16px; font-family: inherit; background: #fff; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus, input.inline-search:focus { outline: 2px solid var(--red-light); border-color: var(--red); }
.field input:disabled, .field select:disabled, .field textarea:disabled { background: var(--grey-bg); color: var(--muted); }
.field textarea { min-height: 80px; resize: vertical; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* Modal */
.modal-backdrop {
  display: none; position: fixed; inset: 0; background: rgba(64,64,68,.55);
  z-index: 100; align-items: flex-start; justify-content: center; padding: 24px 14px;
  overflow-y: auto;
}
.modal-backdrop.open { display: flex; }
.modal {
  background: #fff; border-radius: 8px; border-top: 3px solid var(--red); width: 100%; max-width: 560px;
  padding: 22px; box-shadow: 0 20px 60px rgba(0,0,0,.3); margin: auto 0;
}
.modal { position: relative; }
.modal h3 { margin: 0 0 16px; font-size: 18px; font-weight: 800; padding-right: 40px; }
.modal-x { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: #fff; color: var(--anthrazit); font-size: 18px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; }
.modal-x:hover { background: var(--bg); border-color: var(--grey-mid); }
.modal.modal-nudge { animation: modalNudge .35s ease; }
.modal.modal-nudge .modal-x { animation: modalXPulse .9s ease; }
@keyframes modalNudge { 0%,100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 50% { transform: translateX(5px); } 75% { transform: translateX(-3px); } }
@keyframes modalXPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(212,17,24,0); } 40% { box-shadow: 0 0 0 6px rgba(212,17,24,.35); border-color: var(--red); } }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; flex-wrap: wrap; }

/* Skizzen-Overlay (in den Grundriss zeichnen) */
#sketch-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(20,20,22,.94);
  display: flex; align-items: center; justify-content: center; padding: 12px;
}
#sketch-overlay .sk-box { width: 100%; max-width: 900px; }
#sketch-overlay .sk-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
#sketch-overlay canvas { display: block; max-width: 100%; max-height: 68vh; margin: 0 auto; background: #fff; border-radius: 6px; touch-action: none; cursor: crosshair; }
#sketch-overlay .sk-col { width: 34px; min-height: 34px; padding: 0; border-radius: 50%; }

/* Auf-/zuklappbare Anlagen-Gruppen */
details.grp { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 8px; box-shadow: var(--shadow); }
details.grp > summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; font-weight: 700; user-select: none;
}
details.grp > summary::-webkit-details-marker { display: none; }
details.grp > summary .grp-arrow { margin-left: auto; color: var(--muted); transition: .15s; }
details.grp[open] > summary .grp-arrow { transform: rotate(90deg); }
details.grp .grp-body { padding: 0 12px 12px; }
details.grp .grp-body .list { gap: 6px; }

/* Kamera-Overlay (Fotoaufnahme in der App) */
#cam-overlay {
  position: fixed; inset: 0; z-index: 300; background: rgba(20,20,22,.92);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
#cam-overlay .cam-box { width: 100%; max-width: 640px; text-align: center; }
#cam-overlay video { width: 100%; max-height: 68vh; border-radius: 8px; background: #000; }
#cam-overlay .cam-actions { display: flex; gap: 10px; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
#cam-overlay #cam-err { color: #fff; font-size: 14px; margin-top: 10px; }

/* Type picker (project type tiles) */
.type-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.type-tile {
  border: 2px solid var(--line); border-radius: 8px; padding: 16px; cursor: pointer;
  text-align: center; transition: .12s; background: #fff;
}
.type-tile:hover { border-color: var(--red); }
.type-tile.sel { border-color: var(--red); background: var(--red-light); }
.type-tile .ti { font-size: 26px; }
.type-tile .tt { font-weight: 700; margin-top: 6px; }
.type-tile .td { font-size: 12px; color: var(--muted); margin-top: 2px; }

/* Click menu (Anlagentypen / Schulung options) */
.click-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.click-item {
  display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 2px solid var(--line);
  border-radius: 6px; cursor: pointer; background: #fff; transition: .12s; user-select: none;
}
.click-item:hover { border-color: var(--grey-mid); }
.click-item.sel { border-color: var(--red); background: var(--red-light); }
.click-item.ro { cursor: default; opacity: .75; }
.click-item .ci-check { width: 22px; height: 22px; border-radius: 4px; border: 2px solid var(--grey-mid); display: grid; place-items: center; flex-shrink: 0; font-size: 14px; color: #fff; }
.click-item.sel .ci-check { background: var(--red); border-color: var(--red); }
.click-item .ci-sym { width: 28px; height: 28px; object-fit: contain; border-radius: 4px; flex-shrink: 0; }
.click-item .ci-label { font-weight: 700; font-size: 14px; }

/* Protocol items */
.proto-item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff; margin-bottom: 8px; }
.proto-item .pi-main { flex: 1; }
.proto-item .pi-title { font-weight: 700; }
.proto-seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg-btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--grey-mid); background: #fff; padding: 8px 13px; border-radius: 5px; font-size: 14px; font-weight: 700; cursor: pointer; color: var(--muted); font-family: inherit; -webkit-tap-highlight-color: rgba(212,17,24,.12); }
.seg-btn:active { transform: scale(.97); }
.seg-btn.on { background: var(--ink); color: #fff; border-color: var(--ink); }
.seg-btn.ok.on { background: var(--green-bg); color: var(--green); border-color: var(--green); }
.seg-btn.mangel.on { background: var(--red-light); color: var(--red); border-color: var(--red); }
.seg-btn.nicht_pruefbar.on, .seg-btn.na.on { background: var(--grey-bg); color: var(--ink); border-color: var(--grey-mid); }

/* Finding cards */
.finding { display: flex; gap: 12px; }
.finding .thumb { width: 64px; height: 64px; border-radius: 5px; object-fit: cover; background: var(--grey-bg); flex-shrink: 0; cursor: pointer; }
.finding .thumb-empty { display: grid; place-items: center; color: var(--muted); font-size: 22px; cursor: default; }

/* Plan */
.plan-wrap { position: relative; display: inline-block; max-width: 100%; border: 1px solid var(--line); border-radius: 6px; overflow: hidden; }
.plan-wrap img { display: block; max-width: 100%; cursor: crosshair; }
.plan-marker { position: absolute; transform: translate(-50%, -100%); font-size: 26px; cursor: pointer; filter: drop-shadow(0 1px 2px rgba(0,0,0,.4)); }
/* Anlagen-Pins auf dem Lageplan */
.anlage-pin { position: absolute; transform: translate(-50%, -100%); cursor: pointer; display: flex; flex-direction: column; align-items: center; z-index: 2; }
.anlage-pin .pin-lbl { font-size: 11px; font-weight: 700; background: rgba(255,255,255,.92); border: 1px solid var(--grey-mid); border-radius: 4px; padding: 1px 5px; white-space: nowrap; margin-bottom: 2px; max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
.anlage-pin .pin-dot { width: 18px; height: 18px; border-radius: 50% 50% 50% 0; transform: rotate(45deg); border: 2px solid #fff; box-shadow: 0 1px 3px rgba(0,0,0,.4); }
.anlage-pin.pin-ok .pin-dot { background: var(--green); }
.anlage-pin.pin-mangel .pin-dot { background: var(--red); }
.anlage-pin.pin-offen .pin-dot { background: var(--grey-mid); }
.anlage-pin .pin-sym { width: 30px; height: 30px; object-fit: contain; background: #fff; border-radius: 5px; border: 2px solid var(--grey-mid); box-shadow: 0 1px 3px rgba(0,0,0,.4); padding: 1px; }
.anlage-pin.pin-ok .pin-sym { border-color: var(--green); }
.anlage-pin.pin-mangel .pin-sym { border-color: var(--red); }
/* Mangel-Marker in der Begehung: Symbol mit Rahmen in der Bewertungsfarbe */
.anlage-pin.sev-gruen .pin-sym { border-color: var(--green); }
.anlage-pin.sev-gelb .pin-sym { border-color: #E8B100; }
.anlage-pin.sev-rot .pin-sym { border-color: var(--red); }
.anlage-pin.sev-blau .pin-sym { border-color: var(--blue); }
.anlage-pin.behoben { opacity: .45; }
.plan-switch { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; }

/* Bild-Cropper (Plan zuschneiden) */
.cropper { position: relative; display: inline-block; max-width: 100%; touch-action: none; user-select: none; -webkit-user-select: none; line-height: 0; overflow: hidden; border-radius: 6px; }
.cropper img { display: block; max-width: 100%; max-height: 52vh; }
#crop-box { position: absolute; border: 2px solid var(--red); box-shadow: 0 0 0 9999px rgba(0,0,0,.4); cursor: move; box-sizing: border-box; }
#crop-box .ch { position: absolute; width: 20px; height: 20px; background: #fff; border: 2px solid var(--red); border-radius: 50%; }
#crop-box .ch.tl { left: -11px; top: -11px; cursor: nwse-resize; }
#crop-box .ch.tr { right: -11px; top: -11px; cursor: nesw-resize; }
#crop-box .ch.bl { left: -11px; bottom: -11px; cursor: nesw-resize; }
#crop-box .ch.br { right: -11px; bottom: -11px; cursor: nwse-resize; }

/* Symbol-Schnellauswahl */
.sym-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.sym-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 9px 6px; border: 2px solid var(--line); border-radius: 6px; cursor: pointer; text-align: center; background: #fff; transition: .12s; }
.sym-item:hover { border-color: var(--grey-mid); }
.sym-item.sel { border-color: var(--red); background: var(--red-light); }
.sym-item .sym-lbl { font-size: 11px; line-height: 1.2; color: var(--muted); }
.sym-item.sel .sym-lbl { color: var(--red); font-weight: 700; }

.empty { text-align: center; padding: 40px 20px; color: var(--muted); }
.empty .ico { font-size: 40px; }
.muted { color: var(--muted); }
.right { text-align: right; }
hr.sep { border: none; border-top: 1px solid var(--line); margin: 18px 0; }
.tag-list { display: flex; flex-wrap: wrap; gap: 6px; }

/* Toast */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--anthrazit); color: #fff; padding: 12px 20px; border-radius: 6px;
  font-size: 14px; opacity: 0; pointer-events: none; transition: .25s; z-index: 400;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Globale Suche in der Topbar */
.gsearch { position: relative; flex: 1; max-width: 340px; min-width: 150px; }
.gsearch input {
  width: 100%; padding: 8px 12px; border: 1px solid var(--grey-mid); border-radius: 5px;
  font-size: 14px; font-family: inherit; background: var(--bg); color: var(--ink);
}
.gsearch input:focus { outline: 2px solid var(--red-light); border-color: var(--red); background: #fff; }
.gsearch-drop {
  display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 200;
  background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.18);
  max-height: 60vh; overflow-y: auto; padding: 4px;
}
.gsearch-drop.open { display: block; }
.gs-sec { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: 8px 10px 3px; }
.gs-row { padding: 8px 10px; border-radius: 5px; cursor: pointer; font-size: 14px; }
.gs-row:hover { background: var(--red-light); }
.gs-row .muted { font-size: 12px; }

/* Daten-Tabelle (Kundendatenbank) */
.table-wrap { overflow-x: auto; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th {
  text-align: left; background: var(--anthrazit); color: #fff; font-weight: 700; font-size: 13px;
  padding: 10px 12px; white-space: nowrap; position: sticky; top: 0;
}
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable:hover { background: var(--ink); }
.tbl th.sorted { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.tbl td { padding: 10px 12px; border-top: 1px solid var(--line); vertical-align: top; }
.tbl tbody tr { cursor: pointer; transition: .1s; }
.tbl tbody tr:hover { background: var(--red-light); }
.tbl tbody tr:nth-child(even) { background: #FAF9FA; }
.tbl tbody tr:nth-child(even):hover { background: var(--red-light); }

/* Symbol-Auswahl aus der THEMIS-Bibliothek */
.icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; max-height: 48vh; overflow-y: auto; padding: 2px; }
.icon-pick { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; border: 2px solid var(--line); border-radius: 6px; cursor: pointer; background: #fff; text-align: center; transition: .1s; }
.icon-pick:hover { border-color: var(--red); background: var(--red-light); }
.icon-pick img { width: 40px; height: 40px; object-fit: contain; }
.icon-pick span { font-size: 10px; line-height: 1.25; color: var(--muted); word-break: break-word; }

/* Katalog-Picker im Mangel-Formular */
.kat-drop { margin-top: 4px; }
.kat-hit { padding: 9px 11px; border: 1px solid var(--line); border-radius: 5px; margin-top: 5px; cursor: pointer; background: #fff; font-size: 14px; transition: .1s; }
.kat-hit:hover { border-color: var(--red); background: var(--red-light); }

/* ============================================================
   Navigation „Mehr"-Menü, Nutzerbox
   ============================================================ */
.userbox .uname { text-decoration: none; background: var(--grey-bg); border-radius: 5px; padding: 7px 12px; }
.nav-more { position: relative; }
.nav-more-btn { color: var(--ink); background: transparent; border: none; padding: 8px 12px; border-radius: 5px; font-size: 14px; font-weight: 700; opacity: .85; cursor: pointer; font-family: inherit; }
.nav-more-btn:hover, .nav-more.open .nav-more-btn { background: var(--red-light); color: var(--red); opacity: 1; }
.nav-more-list { display: none; position: absolute; top: calc(100% + 6px); right: 0; min-width: 210px; background: #fff; border: 1px solid var(--line); border-radius: 6px; box-shadow: 0 12px 32px rgba(0,0,0,.18); padding: 6px; z-index: 210; flex-direction: column; }
.nav-more.open .nav-more-list { display: flex; }
.nav-more-list a { display: block; padding: 10px 12px; border-radius: 5px; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 14px; }
.nav-more-list a:hover, .nav-more-list a.active { background: var(--red-light); color: var(--red); }
.toast.err { background: var(--red); }

/* Tabs (Kundenakte, Einstellungen) */
.tabs { display: flex; gap: 4px; border-bottom: 2px solid var(--line); margin: 14px 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tabs a { padding: 10px 14px; white-space: nowrap; color: var(--muted); text-decoration: none; font-weight: 700; font-size: 14px; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.tabs a.active { color: var(--red); border-bottom-color: var(--red); }
.tabs a:hover { color: var(--red); }
.tabs a .cnt { background: var(--grey-bg); color: var(--ink); border-radius: 10px; padding: 1px 7px; font-size: 12px; margin-left: 5px; }

/* Status-Leiste Kundenakte / Interessent */
.crm-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 4px 0 6px; }
.crm-bar .kpi { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 8px 12px; font-size: 13px; color: var(--muted); }
.crm-bar .kpi b { color: var(--ink); font-size: 15px; }
.badge.lead { background: #EEF2FF; color: #3730A3; }
.badge.stage { background: var(--grey-bg); color: var(--ink); }
.badge.stage-gewonnen { background: var(--green-bg); color: var(--green); }
.badge.stage-verloren { background: var(--red-light); color: var(--red); }
.badge.stage-angebot, .badge.stage-verhandlung { background: var(--amber-bg); color: var(--amber); }
.quick-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* Verlauf / Timeline */
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ''; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--line); }
.tl-item { position: relative; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; }
.tl-item::before { content: ''; position: absolute; left: -19px; top: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--grey-mid); border: 2px solid #fff; box-shadow: 0 0 0 1px var(--line); }
.tl-item.t-anruf::before { background: var(--blue); } .tl-item.t-email::before { background: var(--blue); }
.tl-item.t-statuswechsel::before { background: var(--red); } .tl-item.t-system::before { background: var(--grey-mid); }
.tl-item.t-notiz::before, .tl-item.t-besprechung::before { background: var(--amber); }
.tl-item.t-termin::before { background: var(--red); } .tl-item.t-aufgabe::before { background: var(--green); } .tl-item.t-dokument::before { background: var(--ink); }
.tl-head { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; flex-wrap: wrap; }
.tl-head .tl-title { font-weight: 700; }
.tl-head .tl-meta { color: var(--muted); font-size: 12px; white-space: nowrap; }
.tl-body { color: var(--ink); font-size: 14px; margin-top: 4px; white-space: pre-line; }
.tl-actions { margin-top: 6px; display: flex; gap: 6px; }

/* Aufgaben */
.task-row { display: flex; align-items: flex-start; gap: 12px; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; }
.task-row.done { opacity: .6; }
.task-row.done .task-title { text-decoration: line-through; }
.task-check { width: 26px; height: 26px; border-radius: 6px; border: 2px solid var(--grey-mid); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; font-size: 15px; color: #fff; background: #fff; margin-top: 1px; }
.task-check.on { background: var(--green); border-color: var(--green); }
.task-title { font-weight: 700; }
.task-meta { color: var(--muted); font-size: 13px; margin-top: 2px; }
.task-row.overdue .task-meta .due { color: var(--red); font-weight: 700; }
.prio-hoch { color: var(--red); font-weight: 700; }

/* Kalender */
.cal-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.cal-head h2 { margin: 0; border: none; padding: 0; font-size: 18px; color: var(--ink); min-width: 170px; text-align: center; }
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; background: transparent; }
.cal-dow { font-size: 12px; font-weight: 700; color: var(--muted); text-align: center; padding: 4px 0; }
.cal-day { background: #fff; border: 1px solid var(--line); border-radius: 5px; min-height: 92px; padding: 4px 5px; cursor: pointer; transition: .1s; overflow: hidden; }
.cal-day:hover { border-color: var(--red); }
.cal-day.other { background: #FAF9FA; color: var(--grey-mid); }
.cal-day.today { border-color: var(--red); box-shadow: inset 0 0 0 1px var(--red); }
.cal-day.sel { background: var(--red-light); }
.cal-day .dn { font-size: 12px; font-weight: 700; text-align: right; }
.cal-day.today .dn { color: var(--red); }
.cal-ev { font-size: 11px; line-height: 1.25; padding: 2px 5px; border-radius: 3px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; background: var(--grey-bg); color: var(--ink); border-left: 3px solid var(--grey-mid); }
.cal-ev.termin { background: var(--red-light); border-left-color: var(--red); }
.cal-ev.frist { background: var(--amber-bg); border-left-color: var(--amber); }
.cal-ev.aufgabe { background: var(--blue-bg); border-left-color: var(--blue); }
.cal-ev.wiedervorlage { background: #EEF2FF; border-left-color: #3730A3; }
.cal-ev.schulung { background: var(--green-bg); border-left-color: var(--green); }
.cal-ev.projekt { background: var(--grey-bg); border-left-color: var(--ink); }
.cal-more { font-size: 11px; color: var(--muted); padding-left: 5px; }
.ev-row { display: flex; gap: 10px; align-items: flex-start; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 6px; cursor: pointer; }
.ev-row:hover { border-color: var(--red); }
.ev-row .ev-time { min-width: 62px; font-weight: 700; font-size: 13px; color: var(--ink); }
.ev-row .ev-title { font-weight: 700; }
.ev-row .ev-sub { color: var(--muted); font-size: 13px; }
.ev-dot { width: 10px; height: 10px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--grey-mid); }
.ev-dot.termin { background: var(--red); } .ev-dot.frist { background: var(--amber); } .ev-dot.aufgabe { background: var(--blue); }
.ev-dot.wiedervorlage { background: #3730A3; } .ev-dot.schulung { background: var(--green); } .ev-dot.projekt { background: var(--ink); } .ev-dot.geburtstag { background: #DB2777; }
.legend-row { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 8px 0; }
.legend-row span { display: inline-flex; align-items: center; gap: 5px; }

/* Pipeline (Interessenten) */
.pipe-head { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-bottom: 14px; }
.pipe-col { background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--grey-mid); border-radius: var(--radius); padding: 10px 12px; cursor: pointer; }
.pipe-col.active { border-top-color: var(--red); background: var(--red-light); }
.pipe-col .pn { font-size: 22px; font-weight: 800; color: var(--ink); }
.pipe-col .pl { font-size: 12px; color: var(--muted); font-weight: 700; }
.pipe-col .pv { font-size: 12px; color: var(--muted); }

/* Startseite „Heute" */
.today-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 14px; }
.today-box { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); }
.today-box h3 { margin: 0 0 8px; font-size: 14px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--red); display: flex; justify-content: space-between; align-items: center; }
.today-box h3 a { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--muted); text-decoration: none; font-weight: 700; }
.mini-row { display: flex; gap: 8px; align-items: flex-start; padding: 7px 0; border-top: 1px solid var(--line); cursor: pointer; font-size: 14px; }
.mini-row:first-of-type { border-top: none; }
.mini-row .mr-time { min-width: 48px; font-weight: 700; font-size: 13px; }
.mini-row .mr-t { font-weight: 700; }
.mini-row .mr-s { color: var(--muted); font-size: 12px; }
.mini-row:hover .mr-t { color: var(--red); }
.stat.small { padding: 12px 8px; }
.stat.small .num { font-size: 24px; }

/* Dokumente */
.doc-row { display: flex; gap: 12px; align-items: center; background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; }
.doc-row .doc-ico { width: 40px; height: 40px; border-radius: 6px; background: var(--grey-bg); display: grid; place-items: center; font-size: 20px; flex-shrink: 0; }
.doc-row .doc-main { flex: 1; min-width: 0; }
.doc-row .doc-title { font-weight: 700; }
.doc-row .doc-meta { color: var(--muted); font-size: 13px; }
.badge.st-gesendet { background: var(--amber-bg); color: var(--amber); }
.badge.st-angenommen { background: var(--green-bg); color: var(--green); }
.badge.st-abgelehnt { background: var(--red-light); color: var(--red); }
.badge.st-entwurf { background: var(--grey-bg); color: var(--muted); }

/* Claude-Assistent */
.ai-fab { position: fixed; right: 18px; bottom: 18px; z-index: 90; border: none; background: var(--anthrazit); color: #fff; font-weight: 800; font-family: inherit; font-size: 14px; padding: 12px 18px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0,0,0,.28); cursor: pointer; min-height: 46px; }
.ai-fab:hover { background: var(--red); }
.ai-panel { display: none; position: fixed; right: 18px; bottom: 76px; width: 420px; max-width: calc(100vw - 24px); height: 620px; max-height: calc(100vh - 100px); background: #fff; border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.28); z-index: 95; flex-direction: column; overflow: hidden; }
.ai-panel.open { display: flex; }
.ai-head { display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.ai-head .ai-title { font-weight: 800; flex: 1; }
.ai-head select { font-family: inherit; font-size: 12px; padding: 5px 6px; border: 1px solid var(--line); border-radius: 5px; max-width: 150px; }
.ai-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; background: var(--bg); }
.ai-msg { max-width: 92%; padding: 9px 12px; border-radius: 10px; font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.ai-msg.user { align-self: flex-end; background: var(--anthrazit); color: #fff; border-bottom-right-radius: 3px; }
.ai-msg.bot { align-self: flex-start; background: #fff; border: 1px solid var(--line); border-bottom-left-radius: 3px; }
.ai-msg.bot ul { margin: 4px 0 4px 18px; padding: 0; } .ai-msg.bot li { margin: 2px 0; }
.ai-msg.bot p { margin: 0 0 6px; } .ai-msg.bot p:last-child { margin: 0; }
.ai-tools { font-size: 11px; color: var(--muted); align-self: flex-start; margin: -6px 0 0 4px; }
.ai-typing { align-self: flex-start; color: var(--muted); font-size: 13px; padding: 4px 8px; }
.ai-chips { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 12px 0; }
.ai-chip { border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 6px 10px; font-size: 12px; cursor: pointer; font-family: inherit; color: var(--ink); }
.ai-chip:hover { border-color: var(--red); color: var(--red); }
.ai-input { display: flex; gap: 8px; padding: 10px 12px; border-top: 1px solid var(--line); align-items: flex-end; }
.ai-input textarea { flex: 1; resize: none; min-height: 42px; max-height: 120px; padding: 9px 10px; border: 1px solid var(--grey-mid); border-radius: 6px; font-family: inherit; font-size: 15px; }
.ai-note { font-size: 11px; color: var(--muted); padding: 0 12px 8px; }

/* Einstellungen: Tabellen für Intervalle */
.kv-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.kv-table td { padding: 6px 8px; border-top: 1px solid var(--line); }
.kv-table td:first-child { width: 60%; }
.kv-table input { width: 90px; padding: 6px 8px; border: 1px solid var(--grey-mid); border-radius: 5px; font-family: inherit; font-size: 14px; }
code.path { background: var(--grey-bg); padding: 2px 6px; border-radius: 4px; font-size: 13px; word-break: break-all; }

/* Tablet / phone */
@media (max-width: 1100px) {
  .topnav { overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; }
  .topnav::-webkit-scrollbar { display: none; }
  .topnav a { white-space: nowrap; }
}
@media (max-width: 860px) {
  .topbar { flex-wrap: wrap; }
  .brand-logo { height: 28px; }
  .gsearch { order: 3; max-width: none; flex-basis: 100%; }
  .topnav { order: 4; flex-basis: 100%; }
  .nav-more-list { right: auto; left: 0; }
  .ai-panel { right: 8px; bottom: 70px; width: calc(100vw - 16px); height: 70vh; }
  .cal-day { min-height: 64px; }
  .cal-ev { font-size: 10px; }
}
@media (max-width: 760px) {
  .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
  .form-row, .form-row-3 { grid-template-columns: 1fr; }
  .type-tiles, .click-grid { grid-template-columns: 1fr; }
  .container { padding: 16px 12px 90px; }
  .topnav { gap: 0; }
  .topnav a { padding: 8px 8px; font-size: 13px; }
  .page-head { gap: 8px; }
  .cal-day { min-height: 48px; padding: 2px 3px; }
  .cal-ev { display: none; }
  .cal-day .dots { display: flex; gap: 2px; flex-wrap: wrap; margin-top: 2px; }
  .cal-day .dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--grey-mid); display: block; }
  .cal-day .dots i.termin { background: var(--red); } .cal-day .dots i.frist { background: var(--amber); } .cal-day .dots i.aufgabe { background: var(--blue); }
  .cal-day .dots i.wiedervorlage { background: #3730A3; } .cal-day .dots i.schulung { background: var(--green); } .cal-day .dots i.geburtstag { background: #DB2777; }
}
@media (min-width: 761px) { .cal-day .dots { display: none; } }

/* Auswahl-Chips (Detail/Typ im Mangel-Formular) */
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip { border: 1px solid var(--grey-mid); background: #fff; color: var(--ink); border-radius: 999px; padding: 5px 11px; font-size: 13px; font-family: inherit; cursor: pointer; min-height: 32px; }
.chip.sel { background: var(--red); border-color: var(--red); color: #fff; }
.chip:active { transform: scale(.97); }

/* Dokumentenablage: Ordner, Pfad, Ablagefläche */
.doc-crumbs { font-size: 14px; margin: 4px 0 10px; }
.doc-crumbs a { color: var(--ink); font-weight: 700; text-decoration: none; }
.doc-row.folder-row { cursor: pointer; background: #fffdf5; }
.doc-row.folder-row:hover { border-color: var(--grey-mid); }
.drop-zone { border: 2px dashed var(--grey-mid); border-radius: var(--radius); padding: 12px; text-align: center; color: var(--muted); font-size: 14px; margin-bottom: 10px; transition: .15s; }
.drop-zone.over { border-color: var(--red); background: var(--red-light); color: var(--red); }
@media (pointer: coarse) { .drop-zone { display: none; } }

/* Kontakt-Auswahl */
.pick-row.sel { border-color: var(--red); background: var(--red-light); }
.pick-row { cursor: pointer; }

/* ============================================================
   Prüfformular vor Ort (Anlage → Prüfen → Protokoll) – 11/2026
   ============================================================ */
.pf-head h1 { display: flex; align-items: center; gap: 10px; }
.pf-hsym { width: 34px; height: 34px; object-fit: contain; border-radius: 4px; background: #fff; border: 1px solid var(--line); }
.pf-headbtns { display: flex; gap: 8px; flex-wrap: wrap; }
.pf-bigbtn { font-size: 16px; padding: 10px 22px; }
.pf-rowbtn { margin-left: 8px; white-space: nowrap; }
.pf-note-warn { background: #fff7ed; border-color: #fed7aa; margin-bottom: 14px; }
.pf-sticky { position: sticky; top: 0; z-index: 20; background: var(--bg); padding: 8px 0 10px; margin-bottom: 6px; }
.pf-prog-txt { display: flex; gap: 8px; align-items: baseline; font-size: 14px; flex-wrap: wrap; }
.pf-save { margin-left: auto; font-size: 12px; color: var(--muted); }
.pf-bar { height: 6px; background: var(--grey-bg); border-radius: 3px; overflow: hidden; margin-top: 6px; }
.pf-bar > div { height: 100%; background: var(--red); transition: width .25s; }
.pf-grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 14px; }
@media (max-width: 760px) { .pf-grid3 { grid-template-columns: 1fr; } }
.pf-static { padding: 9px 0; font-size: 14px; }
.pf-prev { margin-top: 8px; font-size: 13px; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 5px; padding: 7px 10px; }
.pf-prevtag { display: inline-block; font-size: 11px; font-weight: 700; color: var(--amber); background: var(--amber-bg); border-radius: 3px; padding: 1px 6px; margin-left: 4px; vertical-align: 1px; }
.pf-meta summary { cursor: pointer; font-size: 15px; }
.pf-mainphoto { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 6px; font-size: 14px; }
.pf-mainphoto img { max-height: 90px; max-width: 140px; border-radius: 6px; cursor: zoom-in; }
.pf-sec { padding-top: 6px; }
.pf-sec-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--red); padding-bottom: 6px; margin-bottom: 2px; }
.pf-sec-head h3 { margin: 6px 0; font-size: 15px; color: var(--red); }
.pf-item { padding: 10px 0; border-top: 1px solid var(--line); }
.pf-item:first-of-type { border-top: none; }
.pf-item.pf-missing { background: var(--red-light); box-shadow: inset 3px 0 0 var(--red); padding-left: 8px; }
.pf-item-row { display: flex; gap: 12px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; }
.pf-item-t { flex: 1; min-width: 220px; font-size: 14.5px; line-height: 1.45; }
.pf-nr { display: inline-block; min-width: 24px; font-weight: 800; color: var(--muted); }
.pf-hint { font-size: 12.5px; color: var(--muted); margin: 3px 0 0 24px; }
.pf-seg .seg-btn { min-width: 74px; }
.pf-seg .seg-btn:disabled { cursor: default; opacity: .85; }
.pf-item.ans-mangel .pf-item-t { color: var(--red); font-weight: 600; }
.pf-note { margin: 8px 0 0 24px; width: calc(100% - 24px); padding: 7px 9px; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; font-family: inherit; }
.pf-notelink { margin: 4px 0 0 24px; background: none; border: none; color: var(--muted); font-size: 12.5px; cursor: pointer; padding: 2px 0; font-family: inherit; }
.pf-mangel { margin: 10px 0 2px 24px; padding: 10px 12px; background: #fff8f8; border: 1px solid #f3c6c8; border-radius: 6px; }
.pf-sevrow { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; font-size: 13px; }
.pf-sev { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--grey-mid); background: #fff; border-radius: 5px; padding: 6px 11px; font-size: 13px; font-weight: 700; cursor: pointer; color: var(--muted); font-family: inherit; }
.pf-sev.on { border-color: var(--ink); color: var(--ink); background: var(--grey-bg); }
.pf-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
.pf-dot-gruen { background: #3FA535; } .pf-dot-gelb { background: #E8B100; } .pf-dot-rot { background: #D41118; } .pf-dot-blau { background: #2C6FB5; }
.pf-photos { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 4px 0 6px; }
.pf-thumb { position: relative; display: inline-block; }
.pf-thumb img { width: 76px; height: 76px; object-fit: cover; border-radius: 5px; border: 1px solid var(--line); cursor: zoom-in; display: block; }
.pf-thumb button { position: absolute; top: -7px; right: -7px; width: 22px; height: 22px; border-radius: 50%; border: none; background: var(--ink); color: #fff; font-size: 14px; line-height: 20px; cursor: pointer; padding: 0; }
.pf-fixed { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 400; margin-top: 4px; }
.pf-fixed input { width: auto; }
@media (pointer: coarse) { .pf-sev { min-height: 40px; } .pf-seg .seg-btn { min-width: 84px; } }
.pf-final h3 { color: var(--red); }
.pf-verdict { border-left: 4px solid var(--ink); background: #fafafa; padding: 10px 12px; border-radius: 4px; margin-bottom: 14px; }
.pf-verdict.pf-v-gering { border-left-color: #3FA535; } .pf-verdict.pf-v-maengel { border-left-color: #E8B100; } .pf-verdict.pf-v-erheblich { border-left-color: var(--red); }
.pf-v-lbl { font-size: 17px; font-weight: 800; display: flex; align-items: center; gap: 8px; }
.pf-grundl { margin: 4px 0 12px; } .pf-grundl summary { cursor: pointer; } .pf-grundl textarea { width: 100%; margin-top: 6px; font-family: inherit; font-size: 13px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; }
.pf-signs { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 6px 0 4px; }
@media (max-width: 760px) { .pf-signs { grid-template-columns: 1fr; } }
.pf-signcol { border: 1px solid var(--line); border-radius: 6px; padding: 10px 12px; background: #fff; }
.pf-signlbl { font-weight: 700; font-size: 13px; margin-bottom: 6px; }
.pf-digisig { font-size: 14px; line-height: 1.5; }
.pf-sig { display: block; max-width: 100%; height: 80px; object-fit: contain; border-bottom: 1px solid var(--ink); margin-bottom: 6px; background: #fff; }
.pf-done { background: #ecfdf5; border-color: #a7f3d0; margin-bottom: 14px; }
.pf-done-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; align-items: center; }
.pf-nextsel { padding: 8px; border-radius: 6px; border: 1px solid var(--line); font-family: inherit; max-width: 260px; }

/* Stammdaten & Sammelprotokoll (11/2026) */
.pf-stammgrp { margin-bottom: 6px; }
.pf-stammtitle { font-weight: 700; font-size: 13px; color: var(--red); margin: 8px 0 4px; text-transform: none; }
.pf-scanrow { display: flex; gap: 6px; } .pf-scanrow input { flex: 1; min-width: 0; }
.pf-mw { display: flex; align-items: center; gap: 8px; margin: 6px 0 0 24px; font-size: 13px; }
.pf-mw label { color: var(--muted); } .pf-mw input { width: 90px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; font-family: inherit; }
.pf-sammel { border-top: 3px solid var(--red); }
.pf-sammel-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 10px; }
.pf-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
@media (max-width: 760px) { .pf-grid2 { grid-template-columns: 1fr; } }
.pf-dlg-stamm { margin: 4px 0 12px; } .pf-dlg-stamm summary { cursor: pointer; padding: 6px 0; }
.pf-dlg-grid .field { margin-bottom: 8px; }
.pf-st-wrap { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.pf-st-groups { flex: 1; min-width: 260px; }
.pf-st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 6px 14px; font-size: 14px; }
.pf-st-cell .subtle { font-size: 12px; }
.pf-st-bc { text-align: center; font-size: 13px; letter-spacing: .08em; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.pf-sev.on { border-color: var(--red); color: var(--red); background: var(--red-light); }
/* v0.8 – Versiegelt / Ablage / Echtheitsprüfung */
.pf-sammel.pf-sealed { border-top-color: var(--green); }
.pf-sealinfo { background: var(--green-bg); border: 1px solid #c6e3c0; border-radius: 6px; padding: 10px 12px; margin: 4px 0 10px; line-height: 1.55; }
.pf-sealinfo .pf-sig { display: block; margin-top: 6px; background: #fff; border: 1px solid var(--line); border-radius: 4px; padding: 2px 6px; max-width: 240px; }
.pf-sealbtns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.pf-ablage { display: grid; gap: 4px; font-size: 13px; }
.pf-ablage > div { padding: 3px 0; border-bottom: 1px dashed var(--line); }
.pf-ablage > div:last-child { border-bottom: none; }
.pf-ablage .btn-sm { margin-left: 6px; }
.pf-path { font-family: ui-monospace, Consolas, monospace; font-size: 12px; word-break: break-all; }
.pf-vline { padding: 8px 10px; border-radius: 6px; margin: 6px 0; font-weight: 600; }
.pf-vline.ok { background: var(--green-bg); color: #1f6b18; }
.pf-vline.bad { background: #fde8e8; color: var(--red); }
.pf-flash { animation: pfFlash 1.6s ease-out; }
@keyframes pfFlash { 0%, 40% { box-shadow: 0 0 0 4px rgba(212, 17, 24, .35); } 100% { box-shadow: 0 0 0 0 rgba(212, 17, 24, 0); } }
/* v0.9 – Zwei-Faktor-Anmeldung */
.totp-steps { padding-left: 20px; margin: 8px 0; line-height: 1.55; }
.totp-steps li { margin-bottom: 12px; }
.totp-qr { margin: 8px 0; }
.totp-qr img { border: 1px solid var(--line); border-radius: 6px; padding: 6px; background: #fff; }
.totp-codes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 12px; margin: 10px 0 4px; }
.totp-codes code { font-size: 16px; letter-spacing: 1px; padding: 6px 10px; background: #f6f6f6; border: 1px solid var(--line); border-radius: 4px; text-align: center; }
/* v0.9 – Vor-Ort-Modus (iPad): große Bedienflächen, nur Prüfen/Begehen */
body.vorort #ai-fab, body.vorort #ai-panel { display: none !important; }
body.vorort .topnav a, body.vorort .nav-more-btn { font-size: 16px; padding: 10px 14px; }
.vo-head { margin: 4px 0 14px; }
.vo-head h1 { margin: 0 0 2px; }
.vo-search { display: flex; gap: 10px; margin: 0 0 12px; }
.vo-search input { flex: 1; min-height: 52px; font-size: 18px; padding: 10px 14px; border: 1.5px solid var(--grey-mid); border-radius: 8px; font-family: inherit; }
.vo-search input:focus { border-color: var(--red); outline: none; }
.vo-scanbtn { min-height: 52px; font-size: 16px; padding: 0 18px; white-space: nowrap; }
.vo-h { font-size: 18px; margin: 22px 0 8px; }
.vo-sub { font-weight: 700; font-size: 14px; margin: 14px 0 6px; display: flex; align-items: center; gap: 6px; }
.vo-row { min-height: 62px; }
.vo-row .t { font-size: 16px; }
.vo-go { font-size: 26px; color: var(--muted); padding: 0 4px; }
.vo-empty { padding: 18px; }
.vo-results { padding: 8px 12px; margin-bottom: 8px; }
.vo-note { margin-bottom: 12px; }
.vo-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 6px 0 8px; }
@media (max-width: 760px) { .vo-actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.vo-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 96px; padding: 12px 8px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff;
  font: inherit; font-weight: 700; font-size: 15px; color: var(--text, #404044); cursor: pointer; text-align: center; hyphens: manual; }
.vo-tile span { font-size: 30px; line-height: 1; color: var(--red); }
.vo-tile:active { background: var(--red-light); border-color: var(--red); }
.vo-anlhead { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 22px 0 6px; }
.vo-anlhead input { min-height: 44px; font-size: 16px; padding: 8px 12px; border: 1.5px solid var(--grey-mid); border-radius: 8px; flex: 1; max-width: 360px; font-family: inherit; }
.vo-prbtn { min-height: 44px; min-width: 104px; font-size: 15px; }
.vo-due { white-space: nowrap; }
@media (max-width: 760px) { .vo-due { display: none; } }
.vo-plan { margin-top: 22px; }

/* ===== v0.9.1: Scanner-Ebene (QR zuerst, Barcode hilfsweise) ===== */
body.scan-open, body.pp-open { overflow: hidden; }
.scan-layer { position: fixed; inset: 0; z-index: 350; background: #141416; color: #fff; display: flex; flex-direction: column; }
.scan-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: max(12px, env(safe-area-inset-top)) 16px 10px; }
.scan-bar b { font-size: 18px; }
.scan-sub { font-size: 13px; color: #c9c7ca; margin-top: 2px; }
.scan-x, .pp-x { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5); background: rgba(255,255,255,.1); color: #fff; font-size: 21px; cursor: pointer; }
.scan-view { position: relative; flex: 1 1 auto; min-height: 200px; overflow: hidden; background: #000; }
.scan-view video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scan-frame { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); box-shadow: 0 0 0 9999px rgba(0,0,0,.42); border-radius: 14px; transition: all .2s; }
.scan-frame.qr { width: min(64vw, 52vh, 420px); height: min(64vw, 52vh, 420px); }
.scan-frame.barcode { width: min(88vw, 640px); height: min(30vw, 22vh, 200px); }
.scan-frame i { position: absolute; width: 34px; height: 34px; border: 4px solid #fff; }
.scan-frame i:nth-child(1) { left: -2px; top: -2px; border-right: 0; border-bottom: 0; border-radius: 14px 0 0 0; }
.scan-frame i:nth-child(2) { right: -2px; top: -2px; border-left: 0; border-bottom: 0; border-radius: 0 14px 0 0; }
.scan-frame i:nth-child(3) { left: -2px; bottom: -2px; border-right: 0; border-top: 0; border-radius: 0 0 0 14px; }
.scan-frame i:nth-child(4) { right: -2px; bottom: -2px; border-left: 0; border-top: 0; border-radius: 0 0 14px 0; }
.scan-frame.hit i { border-color: #3FA535; }
.scan-panel { padding: 12px 16px max(14px, env(safe-area-inset-bottom)); background: #1d1d20; max-height: 55vh; overflow-y: auto; }
.scan-msg { font-size: 15px; line-height: 1.4; min-height: 22px; }
.scan-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.scan-tools .btn { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.35); }
.scan-manual { display: flex; gap: 8px; flex: 1; min-width: 220px; }
.scan-manual input { flex: 1; min-height: 40px; font-size: 16px; padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,.35); background: rgba(255,255,255,.95); font-family: inherit; }
.scan-choices { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.scan-choices .btn { min-height: 46px; justify-content: center; font-size: 15px; }
.scan-choices .btn-ghost { color: #fff; }
#scan-assign input { width: 100%; min-height: 44px; font-size: 16px; padding: 8px 12px; border-radius: 8px; border: 0; margin-top: 10px; font-family: inherit; }
.scan-hits { margin-top: 8px; background: #fff; color: var(--ink); border-radius: 8px; overflow: hidden; }
.scan-hits:empty { display: none; }
.scan-hits .vo-sub { padding: 8px 12px 2px; }
.scan-page { text-align: center; padding: 26px 18px; }
.scan-big { font-size: 20px; min-height: 64px; padding: 14px 34px; }
.scan-pref { margin: 18px auto 0; display: inline-flex; flex-direction: column; gap: 8px; text-align: left; }
.scan-pref label { display: flex; gap: 8px; align-items: center; font-size: 15px; cursor: pointer; }

/* Scan-Knopf im Vor-Ort-Modus (immer erreichbar) */
.vo-scanfab { position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 95; display: flex; align-items: center; gap: 8px;
  border: none; border-radius: 999px; background: var(--red); color: #fff; font: inherit; font-weight: 800; font-size: 16px; padding: 14px 22px 14px 18px; min-height: 58px;
  box-shadow: 0 8px 24px rgba(212,17,24,.35), 0 2px 6px rgba(0,0,0,.2); cursor: pointer; }
.vo-scanfab .ic { font-size: 24px; line-height: 1; }
.vo-scanfab:active { background: var(--red-dark); }
body.vorort main#app, body.vorort #app { padding-bottom: 96px; }
body.scan-open .vo-scanfab, body.pp-open .vo-scanfab, body.modal-open .vo-scanfab { display: none !important; }
.vo-tile small { display: block; font-size: 12px; font-weight: 500; color: var(--muted); margin-top: -2px; }
.vo-tile-scan { border-color: var(--red); background: var(--red-light); }
.vo-locbtn { min-height: 44px; min-width: 46px; font-size: 18px; padding: 6px 8px; }

/* ===== v0.9.1: Grundriss-Ebene (Standort setzen / anzeigen / Übersicht) ===== */
.pp-layer { position: fixed; inset: 0; z-index: 340; background: #f2f1f2; display: flex; flex-direction: column; }
.pp-bar { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: max(10px, env(safe-area-inset-top)) 14px 8px; background: var(--anthrazit); color: #fff; }
.pp-bar b { font-size: 17px; }
.pp-sub { font-size: 13px; color: #d6d4d7; margin-top: 2px; }
.pp-tools { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.pp-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.pp-pname { font-weight: 700; }
.pp-zoom { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.pp-zoom button { width: 44px; height: 40px; font-size: 22px; font-weight: 700; border: 1.5px solid var(--grey-mid); border-radius: 8px; background: #fff; cursor: pointer; color: var(--ink); }
.pp-zoom span { min-width: 56px; text-align: center; font-size: 14px; font-variant-numeric: tabular-nums; }
.pp-scroll { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; padding: 4px; }
.pp-canvas { position: relative; margin: 0 auto; background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
.pp-canvas > img { display: block; width: 100%; height: auto; cursor: crosshair; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.pp-pins { position: absolute; inset: 0; pointer-events: none; }
.pp-pins .anlage-pin { pointer-events: auto; }
.pp-pins .anlage-pin.pp-nopoint { pointer-events: none; }   /* beim Setzen: Tipp geht durch den Pin auf den Plan */
.pp-pin.pp-me .pin-sym { border-color: var(--red); border-width: 3px; box-shadow: 0 0 0 4px rgba(212,17,24,.25), 0 1px 3px rgba(0,0,0,.4); }
.pp-pin.pp-me .pin-dot { background: var(--red); }
.pp-pin.pp-me .pin-lbl { border-color: var(--red); color: var(--red); }
.pp-pin.pp-new .pin-sym { animation: ppPulse 1.2s ease-in-out infinite; }
@keyframes ppPulse { 50% { box-shadow: 0 0 0 9px rgba(212,17,24,.15), 0 1px 3px rgba(0,0,0,.4); } }
.pp-pin.pp-sel .pin-sym { box-shadow: 0 0 0 5px rgba(65,64,66,.35); transform: scale(1.15); }
.pp-dot { position: absolute; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: var(--grey-mid); border: 1.5px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.25); }
.pp-dot span { display: none; }
.pp-empty { padding: 40px 20px; text-align: center; font-size: 34px; }
.pp-empty div { font-size: 16px; margin-top: 8px; }
.pp-empty-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }
.pp-foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; padding: 10px 14px max(12px, env(safe-area-inset-bottom)); background: #fff; border-top: 1px solid var(--line); }
.pp-foot .btn { min-height: 46px; font-size: 15px; }
.pp-hint { margin-right: auto; font-size: 14px; color: var(--muted); }
.pp-popinfo { margin-right: auto; display: flex; flex-direction: column; min-width: 0; }
.pp-popinfo b { font-size: 16px; }
.pp-lg { display: inline-block; width: 10px; height: 10px; border-radius: 50%; vertical-align: middle; }
.pp-lg.ok { background: var(--green); } .pp-lg.offen { background: var(--grey-mid); } .pp-lg.mangel { background: var(--red); }

/* Standort-Karte (Prüfformular, Anlagenseite) */
.lp-card { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.lp-head { flex: 1 1 100%; font-weight: 800; font-size: 15px; }
.lp-row { display: flex; align-items: center; gap: 14px; cursor: pointer; }
.lp-mini { position: relative; overflow: hidden; border: 1px solid var(--grey-mid); border-radius: 6px; background: #fff; flex: 0 0 auto; }
.lp-mini > img:first-child { position: absolute; left: 50%; top: 50%; max-width: none; }
.lp-sym { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 26px; height: 26px; object-fit: contain; background: #fff; border: 2px solid var(--red); border-radius: 4px; box-shadow: 0 0 0 3px rgba(212,17,24,.25); }
.lp-dot { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 14px; height: 14px; background: var(--red); border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 2px rgba(212,17,24,.5); }
.lp-txt { line-height: 1.4; }
.lp-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.lp-btns .btn { min-height: 42px; }
.lp-none { color: var(--muted); }
.a-pos { min-height: 42px; display: flex; align-items: center; }
.a-posrow { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
@media (max-width: 640px) { .lp-btns { margin-left: 0; } .vo-scanfab .tx { display: none; } .vo-scanfab { padding: 14px 18px; } }

.a-coderow input { font-size: 16px; }
.a-coderow .btn { white-space: nowrap; min-height: 44px; }
.pf-st-bc .num { word-break: break-all; }

/* ===== v0.9.2: Druckvorschau in der App (statt Pop-up-Fenster) ===== */
body.pv-open { overflow: hidden; }
body.pv-open .vo-scanfab { display: none !important; }
.pv-layer { position: fixed; inset: 0; z-index: 360; background: #e9e8e9; display: flex; flex-direction: column; }
.pv-bar { display: flex; align-items: center; gap: 12px; padding: max(10px, env(safe-area-inset-top)) 14px 10px; background: var(--anthrazit); color: #fff; }
.pv-title { flex: 1; min-width: 0; }
.pv-title b { display: block; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-sub { font-size: 13px; color: #d6d4d7; }
.pv-print { min-height: 46px; font-size: 16px; white-space: nowrap; }
.pv-x { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.5); background: rgba(255,255,255,.1); color: #fff; font-size: 21px; cursor: pointer; }
.pv-body { flex: 1 1 auto; overflow: auto; -webkit-overflow-scrolling: touch; padding: 12px; text-align: center; }
.pv-body iframe { display: block; margin: 0 auto; border: 0; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); max-width: none; }
@media (max-width: 640px) { .pv-sub { display: none; } .pv-print { padding: 10px 12px; font-size: 15px; } }
@media print { body.pv-open > *:not(#pv-layer) { display: none !important; } .pv-layer { position: static; background: #fff; } .pv-bar { display: none; } .pv-body { overflow: visible; padding: 0; } .pv-body iframe { box-shadow: none; } }