/* ═══════════════════════════════════════════════════════════════════════════
   WS MANAGER · Designsprache "pro3 Trocknungstechnik – kühl & technisch"
   Marken-Palette der pro3-Website (Variante B): Navy/Sturm-Blau/pro3-Blau/Cyan
   Display + Body: Inter · Werte: IBM Plex Mono
   ═══════════════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0}

:root{
  --ink:#0E2236; --ink-2:#46596B; --ink-3:#7E92A4;
  --navy:#0A1B2E;                                          /* Tiefsee-Navy (Sidebar/Gewitter) */
  --hydro:#1E5183; --hydro-dark:#13345A; --hydro-soft:#E2ECF6;  /* pro3-Blau / Sturm-Blau */
  --accent:#2FC6E0; --accent-ink:#06222B;                  /* Cyan-Akzent (CTA der Website) */
  --bg:#E9EEF3; --surface:#FFFFFF; --surface-2:#F6F8FA; --surface-3:#EEF2F6;
  --line:#D4DEE8; --line-strong:#B9C7D4;
  --ok:#1F8A4C; --ok-bg:#E6F3EB;
  --warn:#C07A00; --warn-bg:#FBEFDA;
  --danger:#C0392B; --danger-bg:#FBE7E4;
  --font-display:'Inter',system-ui,sans-serif;
  --font-body:'Inter',system-ui,sans-serif;
  --font-mono:'IBM Plex Mono',ui-monospace,monospace;
  --r:6px; --r-lg:10px;
  --sb-w:228px;
  --shadow:0 1px 2px rgba(10,27,46,.04);
  --shadow-pop:0 8px 30px rgba(10,27,46,.16);
}

body{font-family:var(--font-body);background:var(--bg);color:var(--ink);font-size:13px;line-height:1.5;min-height:100vh;-webkit-font-smoothing:antialiased}
.mono{font-family:var(--font-mono);font-feature-settings:"tnum" 1;letter-spacing:-.01em}
a{color:var(--hydro);text-decoration:none}
::selection{background:var(--hydro);color:#fff}

/* ── LOGIN ──────────────────────────────────────────────────────────────── */
#login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(120% 120% at 70% 0%,#13345A 0%,#0A1B2E 60%)}
.login-box{background:var(--surface);border-radius:var(--r-lg);padding:40px 36px;width:100%;max-width:360px;
  box-shadow:0 24px 70px rgba(0,0,0,.4);position:relative;overflow:hidden}
.login-box::before{content:"";position:absolute;top:-50%;right:-30%;width:240px;height:240px;border-radius:50%;
  background:radial-gradient(circle,var(--hydro-soft) 0%,transparent 70%);opacity:.6}
.login-box .logo{margin:0 auto}
#login-err{color:var(--danger);font-size:11px;text-align:center;margin-top:8px}

/* ── LOGO ───────────────────────────────────────────────────────────────── */
.logo{width:30px;height:30px;background:linear-gradient(135deg,var(--hydro) 0%,#3E86C4 70%,var(--accent) 130%);
  border-radius:8px;display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:16px;flex-shrink:0}

/* ── SHELL / SIDEBAR ────────────────────────────────────────────────────── */
#app{display:flex;min-height:100vh}
.sidebar{width:var(--sb-w);background:var(--navy);color:#C4D2E0;display:flex;flex-direction:column;
  position:fixed;inset:0 auto 0 0;height:100vh;z-index:100;transition:width .18s}
.sidebar.collapsed{width:58px}
.sidebar.collapsed .sb-title,.sidebar.collapsed .nav-item span,.sidebar.collapsed .nav-section,
.sidebar.collapsed .sb-user>div:not(:first-child){display:none}
.sidebar.collapsed .sb-user{padding:10px;justify-content:center}
.sb-logo{padding:16px 16px;display:flex;align-items:center;gap:11px;height:56px;border-bottom:1px solid rgba(255,255,255,.07)}
.sb-title{font-family:var(--font-display);font-size:15px;font-weight:800;letter-spacing:-.02em;color:#fff;white-space:nowrap}
.sb-nav{flex:1;overflow-y:auto;padding:10px 10px}
.nav-section{font-family:var(--font-display);font-size:10px;font-weight:700;color:#64798F;
  text-transform:uppercase;letter-spacing:.12em;padding:16px 8px 6px;white-space:nowrap}
.nav-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:var(--r);cursor:pointer;
  font-size:12.5px;font-weight:500;color:#A7B8CA;margin-bottom:2px;white-space:nowrap;transition:.12s}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.nav-item.active{background:var(--hydro);color:#fff}
.nav-item i{font-size:17px;flex-shrink:0;width:18px;text-align:center}
.sb-user{padding:12px 14px;border-top:1px solid rgba(255,255,255,.07);display:flex;align-items:center;gap:9px}
.sb-user>div:first-child{width:32px;height:32px;border-radius:8px;background:var(--hydro);color:#fff;
  display:flex;align-items:center;justify-content:center;font-family:var(--font-mono);font-size:11px;font-weight:600;flex-shrink:0}
.main-content{margin-left:var(--sb-w);flex:1;min-width:0;transition:margin-left .18s}
.sidebar.collapsed~.main-content{margin-left:58px}

/* ── PAGE ───────────────────────────────────────────────────────────────── */
.page{display:none;padding:26px 30px;max-width:1180px}
/* WICHTIG: keine transform-Animation – sonst wird .page zum „containing block"
   für position:fixed-Descendants (Modals würden am Page-Element kleben statt
   am Viewport). Reines Opacity-Fade ist sicher. */
.page.active{display:block;animation:pageIn .32s ease both}
.page-full{max-width:none!important;padding:0!important}
@keyframes pageIn{from{opacity:0}to{opacity:1}}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:22px;gap:16px;flex-wrap:wrap}
.page-title{font-family:var(--font-display);font-size:24px;font-weight:800;letter-spacing:-.025em;color:var(--ink)}
.page-sub{font-size:12px;color:var(--ink-3);margin-top:3px}

/* ── BADGES / CHIPS ─────────────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:20px;font-size:10.5px;
  font-weight:600;font-family:var(--font-display);letter-spacing:.02em;text-transform:uppercase;white-space:nowrap}
.b-blue{background:var(--hydro-soft);color:var(--hydro-dark)}
.b-green{background:var(--ok-bg);color:var(--ok)}
.b-amber{background:var(--warn-bg);color:var(--warn)}
.b-red{background:var(--danger-bg);color:var(--danger)}
.b-gray{background:var(--surface-3);color:var(--ink-2)}
.b-purple{background:#ECEAF6;color:#5B4B9B}
.chip{display:inline-flex;align-items:center;padding:1px 7px;border-radius:5px;font-size:10px;font-weight:600;
  background:var(--surface-3);color:var(--ink-2);font-family:var(--font-mono)}
.chip-accent{background:var(--hydro-soft);color:var(--hydro-dark)}
.chip-warn{background:var(--danger-bg);color:var(--danger)}
/* Klickbarer Chip, der zu einem Projekt verlinkt (Cross-Navigation) */
.chip-link{background:var(--hydro-soft);color:var(--hydro-dark);cursor:pointer;text-decoration:none}
.chip-link:hover{background:var(--hydro);color:#fff}

/* Backup-Status-Banner */
.app-banner{display:flex;align-items:center;gap:10px;padding:10px 16px;background:var(--warn-bg);
  color:var(--warn);border-bottom:1px solid var(--line-strong);font-size:12.5px;font-weight:600}
.app-banner.is-danger{background:var(--danger-bg);color:var(--danger)}
.app-banner button{margin-left:auto;flex:0 0 auto}
/* Ohne min-width:0 schrumpft der Text nicht und schiebt den Knopf aus dem Bild.
   Lange Erinnerungstitel haben so die ganze App horizontal verschoben. */
.app-banner > span{min-width:0;overflow-wrap:anywhere}

/* ── BUTTONS ────────────────────────────────────────────────────────────── */
.btn{padding:7px 14px;border-radius:var(--r);font-size:12px;font-weight:600;cursor:pointer;
  display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--ink);white-space:nowrap;transition:.12s;font-family:var(--font-body)}
.btn:hover{background:var(--surface-2);border-color:var(--ink-3)}
.btn:active{transform:translateY(1px)}
.btn i{font-size:15px}
.btn-blue,.btn-accent{background:var(--hydro);color:#fff;border-color:var(--hydro)}
.btn-blue:hover,.btn-accent:hover{background:var(--hydro-dark);border-color:var(--hydro-dark)}
.btn-green{background:var(--ok);color:#fff;border-color:var(--ok)}
.btn-green:hover{background:#16713C;border-color:#16713C}
.btn-amber{background:var(--warn);color:#fff;border-color:var(--warn)}
.btn-amber:hover{background:#9F6500;border-color:#9F6500}
.btn-red,.btn-danger{background:var(--surface);color:var(--danger);border-color:var(--line-strong)}
.btn-red:hover,.btn-danger:hover{background:var(--danger-bg);border-color:var(--danger)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn-ghost:hover{background:var(--surface-3);color:var(--ink)}
.btn-sm{padding:5px 10px;font-size:11px}
.btn-xs{padding:3px 8px;font-size:10.5px}
.w-full{width:100%;justify-content:center}
.mt-2{margin-top:8px}.mb-2{margin-bottom:10px}.grow{flex:1}

/* ── STATS ──────────────────────────────────────────────────────────────── */
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:22px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px;
  position:relative;overflow:hidden;transition:.14s}
.stat::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--hydro);opacity:0;transition:.14s}
.stat:hover{border-color:var(--line-strong)}
.stat:hover::after{opacity:1}
.stat-label{font-family:var(--font-display);font-size:11px;font-weight:600;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.stat-val{font-family:var(--font-mono);font-size:30px;font-weight:600;letter-spacing:-.02em;line-height:1}
.stat-sub{font-size:11px;color:var(--ink-3);margin-top:6px}

/* ── CARDS ──────────────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  margin-bottom:18px;overflow:hidden;box-shadow:var(--shadow)}
.card-head{padding:13px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;
  justify-content:space-between;gap:10px;flex-wrap:wrap;background:var(--surface-2)}
.card-head span{font-family:var(--font-display);font-weight:700;font-size:13px;color:var(--ink)}
.card-body{padding:18px}

/* ── TABLE ──────────────────────────────────────────────────────────────── */
.tbl-wrap{overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line)}
table{width:100%;border-collapse:collapse}
th{font-family:var(--font-display);font-size:10.5px;font-weight:700;color:var(--ink-2);padding:11px 16px;
  text-align:left;border-bottom:1px solid var(--line);background:var(--surface-2);
  text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
td{font-size:12.5px;padding:12px 16px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr{transition:background .1s}
tbody tr:hover td{background:var(--surface-2)}
.tr-click{cursor:pointer}
td .mono,td.mono{font-size:12px}

/* ── FILTER TABS ────────────────────────────────────────────────────────── */
.filter-tabs{display:flex;gap:5px;flex-wrap:wrap}
.ftab{padding:5px 13px;border-radius:20px;font-size:11.5px;font-weight:600;cursor:pointer;
  border:1px solid var(--line);color:var(--ink-2);background:var(--surface);transition:.12s}
.ftab:hover{border-color:var(--ink-3)}
.ftab.active{background:var(--ink);color:#fff;border-color:var(--ink)}

/* ── FORMS ──────────────────────────────────────────────────────────────── */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.full{grid-column:1/-1}
.field{display:flex;flex-direction:column;gap:5px}
.field label,.fld span{font-size:11px;color:var(--ink-2);font-weight:600;font-family:var(--font-display);
  text-transform:uppercase;letter-spacing:.05em}
.field input,.field select,.field textarea,.fld input,.fld textarea,
input[type=text],input[type=number],input[type=date],input[type=tel],input[type=email],input[type=password],select,textarea{
  width:100%;padding:8px 11px;border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--surface);color:var(--ink);font-size:13px;font-family:var(--font-body);transition:.12s}
input[type=number],.field input[type=number]{font-family:var(--font-mono)}
.field input:focus,.field select:focus,.field textarea:focus,
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--hydro);box-shadow:0 0 0 3px var(--hydro-soft)}
.field input[readonly],input[readonly]{background:var(--surface-3);color:var(--ink-3)}
.field textarea,textarea{resize:vertical;min-height:62px}
.fld{display:flex;flex-direction:column;gap:5px;margin-bottom:12px}
.sec-divider{font-family:var(--font-display);font-size:11px;font-weight:700;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.08em;padding:14px 0 7px;border-bottom:1px solid var(--line);
  margin-bottom:12px;display:flex;align-items:center;gap:6px}

/* ── MODAL ──────────────────────────────────────────────────────────────── */
.overlay{display:none;position:fixed;inset:0;background:rgba(10,27,46,.55);backdrop-filter:blur(2px);
  z-index:200;align-items:flex-start;justify-content:center;padding:48px 16px;overflow-y:auto}
/* Confirm-Dialog liegt IMMER über allen anderen Overlays — er ist ein Sub-Modal
   eines bereits geöffneten Modals und darf nicht dahinter verschwinden. */
#overlay-confirm{z-index:400}
.overlay.open{display:flex;animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:var(--surface);border-radius:var(--r-lg);width:100%;max-width:620px;max-height:90vh;
  overflow-y:auto;flex-shrink:0;box-shadow:var(--shadow-pop);animation:modalIn .24s cubic-bezier(.2,.7,.3,1)}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
.modal-head{padding:16px 20px;border-bottom:1px solid var(--line);font-family:var(--font-display);
  font-size:15px;font-weight:700;display:flex;justify-content:space-between;align-items:center;
  position:sticky;top:0;background:var(--surface);z-index:5}
.modal-body{padding:20px}
.modal-foot{padding:14px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;
  gap:9px;position:sticky;bottom:0;background:var(--surface)}

/* ── TOAST ──────────────────────────────────────────────────────────────── */
.toast{position:fixed;bottom:22px;right:22px;background:var(--ink);color:#fff;padding:12px 18px;
  border-radius:var(--r);font-size:12.5px;font-weight:500;z-index:999;display:none;align-items:center;gap:8px;
  box-shadow:var(--shadow-pop);border-left:3px solid var(--ok)}
.toast.show{display:flex;animation:toastIn .3s cubic-bezier(.2,.7,.3,1)}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}}
.toast.err{border-left-color:var(--danger)}

/* ── INFO BOXES ─────────────────────────────────────────────────────────── */
.info-box{background:var(--hydro-soft);border:1px solid #C7D9EC;border-radius:var(--r);padding:10px 14px;
  font-size:12px;color:var(--hydro-dark);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.warn-box{background:var(--warn-bg);border:1px solid #EAD3A3;border-radius:var(--r);padding:10px 14px;
  font-size:12px;color:var(--warn);margin-bottom:12px;display:flex;align-items:center;gap:8px}
.warn-inline{background:var(--danger-bg);color:var(--danger);font-size:11px;font-weight:600;
  padding:7px 10px;border-radius:var(--r);margin-bottom:10px}

/* ── GERÄTE CARDS ───────────────────────────────────────────────────────── */
.geraete-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
.gc{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface);transition:.14s}
.gc:hover{border-color:var(--line-strong);box-shadow:var(--shadow)}
.gc-top{padding:12px 14px;display:flex;align-items:center;justify-content:space-between}
.gc-body{padding:12px 14px}
.gc-name{font-family:var(--font-display);font-size:13px;font-weight:700;margin-bottom:2px}
.gc-typ{font-size:11px;color:var(--ink-3)}
.gc-info{margin-top:10px;display:flex;flex-direction:column;gap:4px}
.gc-row{display:flex;justify-content:space-between;font-size:11.5px}
.gc-row .k{color:var(--ink-3)}.gc-row .v{font-weight:600;font-family:var(--font-mono)}
.s-verfuegbar{background:var(--ok-bg);color:var(--ok)}
.s-im-einsatz{background:var(--hydro-soft);color:var(--hydro-dark)}
.s-service{background:var(--warn-bg);color:var(--warn)}
.s-defekt{background:var(--danger-bg);color:var(--danger)}
.g-type-group{margin-bottom:22px}
.g-type-header{font-family:var(--font-display);font-size:12px;font-weight:700;color:var(--ink-2);
  margin-bottom:10px;padding-bottom:7px;border-bottom:1px solid var(--line);text-transform:uppercase;letter-spacing:.05em}

/* ── TIMELINE ───────────────────────────────────────────────────────────── */
.tl-row{display:flex;align-items:center;height:30px;margin-bottom:4px}
.tl-label{width:150px;font-size:11px;font-weight:500;flex-shrink:0;padding-right:8px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.tl-track{flex:1;background:var(--surface-3);border-radius:5px;height:22px;position:relative;overflow:hidden}
.tl-bar{position:absolute;height:100%;border-radius:4px;display:flex;align-items:center;padding:0 6px;
  font-size:9px;color:#fff;font-weight:600;font-family:var(--font-mono);white-space:nowrap;overflow:hidden}
.tl-today{position:absolute;top:0;bottom:0;width:2px;background:var(--danger);z-index:5}
.tl-head{display:flex;margin-bottom:6px}
.tl-head-label{width:150px;flex-shrink:0}
.tl-head-days{flex:1;display:flex}
.tl-day{flex:1;font-size:9px;color:var(--ink-3);text-align:center;border-left:.5px solid var(--line);font-family:var(--font-mono)}
.tl-day.today{color:var(--danger);font-weight:700}

/* ── PROJEKT-SEITE ──────────────────────────────────────────────────────── */
.proj-bar{background:var(--surface);border-bottom:1px solid var(--line);padding:14px 30px;
  display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;position:sticky;top:0;z-index:50}
.proj-bar-left{display:flex;align-items:center;gap:12px;min-width:0}
.proj-bar-id{font-family:var(--font-display);font-size:18px;font-weight:800;color:var(--hydro);letter-spacing:-.02em}
.proj-bar-sub{font-size:11px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-bar-tabs{display:flex;gap:4px;flex-wrap:wrap}
.ptab{padding:7px 14px;border-radius:var(--r);font-size:12px;font-weight:600;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  display:inline-flex;align-items:center;gap:6px;transition:.12s}
.ptab:hover{background:var(--surface-2);border-color:var(--ink-3)}
.ptab.active{background:var(--ink);color:#fff;border-color:var(--ink)}
.proj-body{padding:26px 30px;max-width:1180px}
.info-grid{display:flex;flex-direction:column}
.ig-row{display:flex;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--line);font-size:12.5px;gap:10px}
.ig-row:last-child{border-bottom:none}
.ig-k{color:var(--ink-3);font-size:11px;width:96px;flex-shrink:0;padding-top:1px;
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.ig-v{flex:1;font-weight:500;word-break:break-word}
.info-link{color:var(--hydro);display:inline-flex;align-items:center;gap:5px}
.info-link:hover{text-decoration:underline}
.wf-bar{display:flex;align-items:flex-start;gap:0;margin:14px 0}
.wf-step{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:10.5px;
  color:var(--ink-3);text-align:center;position:relative;min-width:64px;font-weight:600}
.wf-step.done,.wf-step.cur{color:var(--ink)}
.wf-step-dot{width:28px;height:28px;border-radius:50%;border:2px solid var(--line-strong);
  background:var(--surface);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700;color:var(--ink-3);z-index:2}
.wf-step.done .wf-step-dot{background:var(--ok);border-color:var(--ok);color:#fff}
.wf-step.cur .wf-step-dot{background:var(--hydro);border-color:var(--hydro);color:#fff;
  box-shadow:0 0 0 4px rgba(30,81,131,.16)}
.wf-bar-line{flex:1;height:3px;background:var(--line-strong);margin:13px -2px 0;
  border-radius:2px;min-width:20px}
.wf-bar-line.done{background:var(--ok)}
.module-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px;margin-top:6px}
.module-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:16px 14px;background:var(--surface);
  cursor:pointer;display:flex;flex-direction:column;align-items:flex-start;gap:8px;transition:.14s;color:var(--ink)}
.module-card:hover{border-color:var(--hydro);box-shadow:var(--shadow);transform:translateY(-1px)}
.module-card-icon{font-size:20px;width:40px;height:40px;border-radius:var(--r);display:flex;
  align-items:center;justify-content:center;background:var(--hydro-soft);color:var(--hydro-dark)}
.module-card-label{font-family:var(--font-display);font-size:13px;font-weight:700}
.module-card-sub{font-size:10.5px;color:var(--ink-3)}
.foto-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin-top:10px}
.foto-card{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--surface)}
.foto-card img{width:100%;height:130px;object-fit:cover;display:block}
.foto-caption{padding:8px 10px}
.foto-caption input{border:none;font-size:11.5px;padding:3px 0;border-bottom:1px solid transparent;background:transparent}
.foto-caption input:focus{box-shadow:none;border-bottom-color:var(--hydro)}
.foto-card-actions{display:flex;justify-content:flex-end;padding:0 10px 8px}
/* Fotos untereinander mit Kommentar daneben */
.foto-list{display:flex;flex-direction:column;gap:12px;margin-top:10px}
.foto-line{display:flex;gap:14px;align-items:flex-start;border:1px solid var(--line);border-radius:var(--r-lg);padding:12px;background:var(--surface)}
.foto-line img{width:200px;height:150px;object-fit:cover;border-radius:var(--r);cursor:pointer;flex-shrink:0;border:1px solid var(--line)}
.foto-line-cap{flex:1;display:flex;flex-direction:column;gap:6px}
.foto-line-cap .foto-titel{width:100%;font-size:13px;font-weight:600;padding:6px 9px;border:1px solid var(--line);
  border-radius:var(--r);color:var(--ink)}
.foto-line-cap .foto-titel:focus{border-color:var(--hydro);outline:none;box-shadow:0 0 0 3px var(--hydro-soft)}
.foto-line-cap textarea{width:100%;min-height:120px;resize:vertical;font-size:12.5px}
.foto-line>.btn{flex-shrink:0}
.hausfoto-drop{border:2px dashed var(--line-strong);border-radius:var(--r-lg);padding:28px;text-align:center;
  cursor:pointer;color:var(--ink-3);font-size:12px;margin-bottom:14px;transition:.14s}
.hausfoto-drop:hover{border-color:var(--hydro);color:var(--hydro)}
.hausfoto-drop img{max-width:100%;max-height:220px;border-radius:var(--r);margin-top:10px}

/* ── FOLGEGEWERKE / SETTINGS / DOC ──────────────────────────────────────── */
.fw-card{border:1px solid var(--line);border-radius:var(--r-lg);padding:14px 16px;margin-bottom:10px;
  background:var(--surface);display:flex;align-items:flex-start;gap:14px}
.fw-status-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:4px}
.settings-grid{display:grid;grid-template-columns:220px 1fr;gap:0;min-height:420px}
.settings-nav{border-right:1px solid var(--line);padding:10px}
.settings-nav-item{padding:9px 13px;border-radius:var(--r);cursor:pointer;font-size:12.5px;
  font-weight:600;color:var(--ink-2);margin-bottom:2px}
.settings-nav-item.active{background:var(--hydro-soft);color:var(--hydro-dark)}
.settings-nav-item:hover:not(.active){background:var(--surface-2)}
.settings-panel{display:none;padding:0 20px}
.settings-panel.active{display:block}
.doc-item{display:flex;align-items:center;padding:13px 16px;border-bottom:1px solid var(--line);cursor:pointer;gap:12px}
.doc-item:last-child{border-bottom:none}
.doc-item:hover{background:var(--surface-2)}
.doc-icon{width:38px;height:38px;border-radius:var(--r);display:flex;align-items:center;
  justify-content:center;font-size:17px;flex-shrink:0;background:var(--hydro-soft);color:var(--hydro-dark)}
.doc-info{flex:1;min-width:0}
.doc-title{font-family:var(--font-display);font-weight:700;font-size:12.5px}
.doc-sub{font-size:11px;color:var(--ink-3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ═══ MESSPROTOKOLL ═════════════════════════════════════════════════════════ */
.mess-shell{display:flex;height:100vh;overflow:hidden;background:var(--surface-3)}
.mess-aside{width:248px;background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;overflow-y:auto;flex-shrink:0}
.mess-aside-head{padding:12px 14px;border-bottom:1px solid var(--line);display:flex;
  align-items:center;justify-content:space-between;gap:8px}
.mess-aid{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--hydro)}
.mess-aside-sec{padding:14px;border-bottom:1px solid var(--line)}
.mess-aside-title{font-family:var(--font-display);font-size:10px;font-weight:700;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.1em;margin-bottom:9px}
.prot-list{display:flex;flex-direction:column;gap:3px;max-height:230px;overflow-y:auto}
.prot-empty{font-size:11px;color:var(--ink-3);padding:6px}
.prot-item{padding:9px 11px;border-radius:var(--r);cursor:pointer;border:1px solid transparent;transition:.12s}
.prot-item:hover{background:var(--surface-2)}
.prot-item.active{background:var(--hydro-soft);border-color:#C7D9EC}
.prot-row{display:flex;align-items:center;gap:6px}
.prot-row .mono{font-size:12px;font-weight:600;flex:1}
.prot-sub{font-size:10.5px;color:var(--ink-3);margin-top:2px}
.prot-del{background:transparent;border:none;color:var(--ink-3);font-size:13px;
  cursor:pointer;padding:3px 5px;border-radius:4px;opacity:.45;transition:.12s}
.prot-del:hover{background:var(--danger-bg);color:var(--danger);opacity:1}
.dirty-dot{display:inline-block;width:8px;height:8px;border-radius:50%;
  background:var(--warn);margin-left:7px;vertical-align:middle;
  animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.panel-hint{display:flex;align-items:flex-start;gap:6px;padding:8px 10px;background:var(--hydro-soft);
  color:var(--hydro-dark);border-radius:5px;font-size:11px;line-height:1.45;margin:8px 0}
.panel-hint i{flex-shrink:0;font-size:13px;margin-top:1px}
.umg-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.umg-grid label{display:flex;flex-direction:column;gap:3px;font-size:10px;color:var(--ink-3);
  font-family:var(--font-display);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.umg-grid input{padding:6px 8px;font-size:12px}
.tp-warn{display:none;font-size:10.5px;color:var(--danger);font-weight:600;margin-top:7px}
.tp-warn.show{display:block}
.mess-legend>div{display:flex;align-items:center;font-size:11px;color:var(--ink-2);padding:2px 0}
.ld{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:7px}
.mess-main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}
.mess-toolbar{display:flex;align-items:center;gap:8px;padding:10px 14px;background:var(--surface);
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.tool-group{display:flex;gap:4px}
.tool{padding:7px 12px;border-radius:var(--r);font-size:12px;font-weight:600;cursor:pointer;
  border:1px solid var(--line);background:var(--surface);color:var(--ink-2);
  display:inline-flex;align-items:center;gap:6px;transition:.12s}
.tool:hover{background:var(--surface-2);border-color:var(--ink-3)}
.tool.active{background:var(--hydro);color:#fff;border-color:var(--hydro)}
.tool i{font-size:15px}
.tool-sep{width:1px;background:var(--line);align-self:stretch;margin:2px 4px}
.mess-banner{padding:8px 16px;font-size:11.5px;font-weight:600;display:flex;align-items:center;gap:8px}
.mess-banner.is-erst{background:var(--hydro-soft);color:var(--hydro-dark)}
.mess-banner.is-folge{background:var(--warn-bg);color:var(--warn)}
.mess-canvas-wrap{flex:1;position:relative;overflow:hidden;background:var(--surface-3)}
#skizze-canvas{display:block;width:100%;height:100%;background:
  linear-gradient(0deg,transparent 0,transparent),var(--surface)}
.mess-hint{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:10.5px;
  color:var(--ink-3);background:rgba(255,255,255,.92);padding:5px 14px;border-radius:20px;
  pointer-events:none;border:1px solid var(--line)}
.mess-panel{width:288px;background:var(--surface);border-left:1px solid var(--line);
  overflow-y:auto;flex-shrink:0}
.mess-empty{padding:50px 24px;text-align:center;color:var(--ink-3);font-size:12px}
.mess-empty i{font-size:30px;display:block;margin-bottom:12px;opacity:.5}
.panel-pad{padding:18px}
.panel-title{font-family:var(--font-display);font-size:15px;font-weight:700;margin-bottom:14px;color:var(--ink)}
.panel-sub{font-family:var(--font-display);font-size:10px;font-weight:700;color:var(--ink-3);
  text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px}
.prev-box{margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.prev-grid{display:grid;grid-template-columns:auto 1fr auto;gap:5px 10px;align-items:center;font-size:12px}
.prev-grid>span:nth-child(3n+1){color:var(--ink-3)}
.trend{font-weight:700;font-family:var(--font-mono)}
.trend.up{color:var(--danger)}.trend.down{color:var(--ok)}

/* ── DOCUMENT PREVIEW (Buchhaltung – wird Phase 2 verfeinert) ───────────── */
.prev-doc{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;
  font-size:11px;line-height:1.7;color:#222;max-width:720px}
.prev-hdr{display:flex;justify-content:space-between;margin-bottom:18px;padding-bottom:16px;border-bottom:2px solid var(--hydro)}
.prev-firm{font-family:var(--font-display);font-size:16px;font-weight:800;color:var(--hydro)}
.prev-doctype{font-family:var(--font-display);font-size:22px;font-weight:800;text-align:right}
.prev-tbl{width:100%;border-collapse:collapse;margin:14px 0;font-size:11px}
.prev-tbl th{background:var(--hydro);color:#fff;padding:7px 10px;text-align:left;font-size:10px}
.prev-tbl td{padding:7px 10px;border-bottom:1px solid #eee}
.prev-totals{float:right;width:240px;border-collapse:collapse;font-size:11px;margin-top:6px}
.prev-totals td{padding:5px 9px}
.prev-totals .final{font-weight:700;border-top:2px solid #333;font-size:13px}
.mahn-banner{padding:9px 13px;border-radius:var(--r);margin-bottom:13px;font-size:12px;font-weight:600}

/* ── RESPONSIVE ─────────────────────────────────────────────────────────── */
/* Tabellen NIE über den Containerrand hinaus — immer scrollbar.
   Jede <table> erhält einen Wrapper-div mit class="table-wrap" oder steckt
   bereits in einer .card / div mit overflow:auto. Diese Regel ist die Absicherung. */
.card>table,.card-body>table,.card-body>div>table{min-width:600px}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.table-wrap::-webkit-scrollbar{height:8px}
.table-wrap::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:4px}

/* Sticky table header bei vertikalem Scroll auf langen Tabellen */
.table-wrap thead th{position:sticky;top:0;z-index:1}

/* Sortierbare Spalten-Headers */
.t-sort thead th[data-sort]{cursor:pointer;user-select:none;position:relative;padding-right:22px}
.t-sort thead th[data-sort]:hover{background:var(--surface-3)}
.t-sort thead th[data-sort]::after{content:"";position:absolute;right:8px;top:50%;
  width:0;height:0;border-left:4px solid transparent;border-right:4px solid transparent;
  opacity:.3;transform:translateY(-50%)}
.t-sort thead th[data-sort]::after{border-bottom:5px solid currentColor;margin-top:-3px}
.t-sort thead th.sorted-asc::after{opacity:1;border-bottom:5px solid var(--hydro)}
.t-sort thead th.sorted-desc::after{opacity:1;border-bottom:none;border-top:5px solid var(--hydro);margin-top:1px}

/* Erweiterter Filter */
.adv-filter{background:var(--surface-2);border-top:1px solid var(--line);padding:14px 16px;animation:advIn .15s ease both}
.adv-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px}
.adv-grid label.field{display:flex;flex-direction:column;gap:4px}
.adv-grid label.field>span{font-size:10px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em}
@keyframes advIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}

/* View-Switch (Kacheln / Liste) */
.view-switch{display:inline-flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.view-switch .vs{background:var(--surface);border:none;padding:6px 11px;cursor:pointer;color:var(--ink-3);font-size:14px;transition:.12s;border-right:1px solid var(--line)}
.view-switch .vs:last-child{border-right:none}
.view-switch .vs:hover{background:var(--surface-2);color:var(--ink-2)}
.view-switch .vs.active{background:var(--hydro);color:#fff}

/* Pagination-Footer (Mehr anzeigen / Alle) */
.pag-foot{display:flex;align-items:center;gap:10px;padding:8px 12px;border-top:1px solid var(--line);
  background:var(--surface-2);font-size:11.5px}
.pag-info{color:var(--ink-3);flex:1}

/* < 1100px: Sidebar bleibt sichtbar, aber kompakter; engere Page-Padding */
@media(max-width:1100px){
  .page{padding:20px 18px}
  .proj-body{padding:20px 18px}
}

/* ── MESSPROTOKOLL MOBILE (Bottom-Sheet + Drawer) ─────────────────────────── */
/* Nur auf dem Handy sichtbare Steuerelemente – Desktop bleibt unverändert. */
.mess-drawer-btn,.mess-backdrop,.sheet-head{display:none}
.mp-save-status{font-size:11px;font-weight:600;color:var(--ink-3);white-space:nowrap;transition:color .2s}
.mp-save-status.is-saving{color:var(--hydro)}
.mp-save-status.is-saved{color:var(--ok)}
.mp-save-status.is-error{color:var(--danger)}

/* < 980px: Sidebar wird einklappbar (mobile-open) */
@media(max-width:980px){
  .sidebar{transform:translateX(-100%);box-shadow:6px 0 20px rgba(10,27,46,.18)}
  .sidebar.mobile-open{transform:translateX(0)}
  .main-content{margin-left:0!important}
  .stats{grid-template-columns:1fr 1fr}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .page-head{flex-direction:column;align-items:flex-start;gap:10px}
  .page-head>div:last-child{width:100%;display:flex;flex-wrap:wrap;gap:6px}
  /* Mobile Menü-Button: schwebender Floating Button */
  .mobile-menu-btn{display:flex!important}

  /* Messprotokoll: linke Seitenleiste als Off-Canvas-Drawer statt ausblenden */
  .mess-shell{height:100dvh}
  .mess-aside{position:fixed;left:0;top:0;bottom:0;width:min(330px,88vw);z-index:260;
    transform:translateX(-100%);transition:transform .22s ease;
    box-shadow:6px 0 24px rgba(10,27,46,.30)}
  .mess-aside.open{transform:translateX(0)}

  /* Messpunkt-Panel als Bottom-Sheet, das bei Auswahl hochfährt */
  .mess-panel{position:fixed;left:0;right:0;bottom:0;width:auto;z-index:250;
    max-height:72dvh;border-left:none;border-top:1px solid var(--line);
    border-radius:16px 16px 0 0;transform:translateY(105%);
    transition:transform .24s cubic-bezier(.2,.7,.3,1);
    box-shadow:0 -8px 30px rgba(10,27,46,.22)}
  .mess-panel.open{transform:translateY(0)}

  /* Sheet-Kopf mit Zieh-Griff + Schliessen (nur mobil sichtbar) */
  .sheet-head{display:block;position:sticky;top:0;background:var(--surface);z-index:3;
    border-bottom:1px solid var(--line);padding:10px 12px 8px;text-align:center}
  .sheet-head .mess-panel-handle{display:inline-block;width:40px;height:4px;border-radius:3px;
    background:var(--line-strong)}
  .sheet-head .mess-panel-close{position:absolute;right:6px;top:4px;min-height:40px}

  /* Gemeinsamer Backdrop hinter Drawer/Sheet */
  .mess-backdrop{display:block;position:fixed;inset:0;background:rgba(10,27,46,.42);z-index:240;
    opacity:0;pointer-events:none;transition:opacity .2s}
  .mess-backdrop.show{opacity:1;pointer-events:auto}

  /* Drawer-Öffner in der Toolbar */
  .mess-drawer-btn{display:inline-flex!important}

  /* Toolbar horizontal scrollbar statt umbrechend */
  .mess-toolbar{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;
    -webkit-overflow-scrolling:touch;scrollbar-width:none}
  .mess-toolbar::-webkit-scrollbar{display:none}
  .mess-toolbar>.grow{display:none}

  /* Touch-Ziele ≥44px, Messwert-Felder gross + 16px (verhindert iOS-Auto-Zoom) */
  .mess-toolbar .tool,.mess-toolbar .btn,.mess-aside .btn{min-height:44px}
  .mess-toolbar .tool,.mess-toolbar .btn{min-width:44px}
  .mess-panel .fld input,.mess-panel .fld textarea{min-height:46px;font-size:16px;padding:11px 12px}
  .umg-grid input{min-height:44px;font-size:16px}
  .prot-item{padding:12px 11px}
  .prot-del{min-width:38px;min-height:38px}

  /* Desktop-Maushinweis am unteren Rand ausblenden (überdeckt Sheet) */
  .mess-hint{display:none}

  /* In der Vollbild-Messansicht den globalen App-Hamburger ausblenden –
     Navigation läuft über den Drawer-Button + „Projekt"-Zurück. */
  body.mess-fullscreen .mobile-menu-btn{display:none!important}
  /* App-Banner (Go-Live-Reminder, Backup) verdecken die Messfläche – im
     Vollbild-Messmodus ausblenden, damit der Canvas die volle Höhe hat. */
  body.mess-fullscreen #reminder-banner,
  body.mess-fullscreen #backup-banner{display:none!important}

  /* Projekt-Tabs (Schadenbericht etc.): mehrspaltige Inline-Grids einspaltig,
     damit rechte Karten (Auftraggeber, Hinweise) nicht abgeschnitten werden. */
  #proj-content [style*="grid-template-columns"]{grid-template-columns:1fr!important}
  /* Grid-Kinder haben min-width:auto und wachsen sonst auf ihre Inhaltsbreite.
     Ein breites Kind (z.B. die Stromtabelle) zieht damit die ganze Seite in die
     Breite, statt in seinem eigenen Container zu scrollen. */
  #proj-content [style*="grid-template-columns"] > *{min-width:0}
  #proj-content{padding:16px 14px!important}
  /* Foto-Zeilen im Schadenbericht mobil stapeln: Bild oben, Titel+Text darunter */
  .foto-line{flex-direction:column}
  .foto-line img{width:100%;height:auto;max-height:240px}
}
.mobile-menu-btn{display:none;position:fixed;top:14px;left:14px;z-index:200;
  width:42px;height:42px;border-radius:50%;background:var(--navy);color:#fff;
  align-items:center;justify-content:center;border:none;cursor:pointer;
  box-shadow:0 4px 12px rgba(10,27,46,.25);font-size:20px}

/* < 680px: Stats einspaltig, Page-Padding minimal */
@media(max-width:680px){
  .page,.proj-body{padding:14px 10px}
  .page-title{font-size:20px}
  .stats{grid-template-columns:1fr}
  .stat{padding:12px}
  .stat-val{font-size:24px}
  .card{padding:10px}
  .card-head{flex-direction:column;align-items:flex-start;gap:8px}
  /* max-width der einzelnen Modals (bis 920px) darf das Fenster nicht sprengen */
  .modal{margin:8px;max-height:calc(100vh - 16px);max-width:calc(100vw - 16px)}
  .bh-tabs{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px}
  .bh-tab{white-space:nowrap}
  /* Der Seitenkopf legte Titel und Aktionsknöpfe nebeneinander und schob die
     ganze Seite nach rechts aus dem Bild. flex-basis statt width — bei einem
     Flex-Kind bestimmt die Basis die Breite, nicht width. */
  .page-head{flex-wrap:wrap;gap:10px}
  .page-head > div:last-child{flex:1 1 100%}
  /* Auch der Titelblock muss schrumpfen dürfen — ein langer Seitentitel oder
     Untertitel schob sonst die ganze Seite aus dem Bild. */
  .page-head > div{min-width:0}
  .page-title,.page-sub{overflow-wrap:anywhere}
  /* Banner: Text umbrechen lassen, Knopf darunter */
  .app-banner{flex-wrap:wrap}
  .app-banner button{margin-left:0}
}

/* ── TERMINKALENDER ─────────────────────────────────────────────────────── */
/* Sidebar-Badge: kleiner roter Punkt rechts vom „Termine"-Eintrag */
.nav-badge{margin-left:auto;background:var(--danger);color:#fff;font-family:var(--font-mono);
  font-size:10px;font-weight:700;line-height:1;padding:2px 6px;border-radius:10px;min-width:18px;
  text-align:center;flex-shrink:0}

/* Filter-Tabs */
.t-tab{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border:1px solid var(--line);
  background:var(--surface);border-radius:var(--r);font-size:12px;font-weight:600;color:var(--ink-2);
  cursor:pointer;transition:.12s}
.t-tab:hover{border-color:var(--line-strong);color:var(--ink)}
.t-tab.active{background:var(--ink);border-color:var(--ink);color:#fff}
.t-tab-n{font-family:var(--font-mono);font-size:10px;background:rgba(255,255,255,.18);
  padding:1px 6px;border-radius:8px;color:inherit}
.t-tab:not(.active) .t-tab-n{background:var(--surface-3);color:var(--ink-3)}

/* Leerer Zustand */
.t-empty{padding:48px 20px;text-align:center;color:var(--ink-3)}
.t-empty i{font-size:32px;display:block;margin-bottom:8px;opacity:.5}

/* Termin-Zeile: linke Ampel + Inhalt + Aktionen */
.termin-row{display:grid;grid-template-columns:6px 1fr auto;gap:0;
  border-bottom:1px solid var(--line);background:var(--surface);cursor:pointer;transition:.12s}
.termin-row:hover{background:var(--surface-2)}
.termin-row:last-child{border-bottom:none}
.tr-ampel{align-self:stretch}
.tr-rot   .tr-ampel{background:var(--danger)}
.tr-gelb  .tr-ampel{background:var(--warn)}
.tr-gruen .tr-ampel{background:var(--ok)}
.tr-grau  .tr-ampel{background:var(--line-strong)}
.tr-body{padding:11px 14px;min-width:0}
.tr-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:3px}
.tr-date{font-size:13px;font-weight:700;color:var(--ink)}
.tr-when{font-size:11px;font-weight:600;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em}
.tr-rot   .tr-when{color:var(--danger)}
.tr-gelb  .tr-when{color:var(--warn)}
.tr-gruen .tr-when{color:var(--ok)}
.tr-chip{display:inline-flex;align-items:center;padding:1px 7px;border-radius:4px;font-size:10px;
  font-weight:700;font-family:var(--font-display);letter-spacing:.05em;text-transform:uppercase}
.tr-chip-fix{background:#3F3F8C;color:#fff}
.tr-auftrag{font-size:11.5px;color:var(--ink-2);margin-top:2px}
.tr-link{color:var(--hydro);font-weight:600;cursor:pointer;font-family:var(--font-mono)}
.tr-link:hover{text-decoration:underline}
.tr-kom{font-size:12.5px;color:var(--ink);margin-top:5px;white-space:pre-wrap;line-height:1.45}
.tr-tel{font-size:11px;color:var(--ink-3);margin-top:4px;display:inline-flex;align-items:center;gap:5px}
.tr-erl{font-size:11.5px;color:var(--ok);margin-top:5px;background:var(--ok-bg);
  padding:5px 8px;border-radius:4px;display:inline-flex;align-items:center;gap:6px}
.tr-done .tr-kom,.tr-done .tr-date{color:var(--ink-3);text-decoration:line-through}
.tr-actions{padding:11px 14px;display:flex;align-items:center;gap:6px;flex-shrink:0}
.btn-xs{padding:4px 8px;font-size:10.5px;border-radius:5px}

/* Modal-Komponenten (Typ-Auswahl, Schnellauswahl, Sektion) */
.tc-typ-row{display:flex;gap:8px;flex-wrap:wrap}
.tc-typ-btn{flex:1;min-width:140px;padding:9px 12px;border:1.5px solid var(--line);background:var(--surface);
  border-radius:var(--r);font-size:12.5px;font-weight:600;color:var(--ink-2);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;transition:.12s;font-family:var(--font-body)}
.tc-typ-btn:hover{border-color:var(--line-strong);color:var(--ink)}
.tc-typ-btn.active{border-color:var(--hydro);background:var(--hydro-soft);color:var(--hydro-dark)}
.tc-typ-btn i{font-size:15px}

.tc-quick{display:flex;gap:6px;flex-wrap:wrap}
.tq-btn{padding:6px 11px;border:1px solid var(--line);background:var(--surface);border-radius:5px;
  font-size:11.5px;font-weight:600;color:var(--ink-2);cursor:pointer;font-family:var(--font-body);transition:.12s}
.tq-btn:hover{border-color:var(--hydro);color:var(--hydro)}
.tq-btn:disabled{opacity:.4;cursor:not-allowed}

.tc-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tc-info{display:flex;align-items:flex-start;gap:8px;padding:9px 12px;background:var(--hydro-soft);
  color:var(--hydro-dark);border-radius:var(--r);font-size:12px;margin-bottom:12px;line-height:1.45}
.tc-info i{flex-shrink:0;font-size:15px;margin-top:1px}

/* Erledigen-Modal */
.te-head{font-size:12px;color:var(--ink-2);margin-bottom:9px;padding-bottom:9px;border-bottom:1px solid var(--line)}
.te-was-label{font-size:10px;font-weight:700;color:var(--ink-3);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px}
.te-was{font-size:12.5px;color:var(--ink);background:var(--surface-2);padding:8px 11px;border-radius:5px;
  border-left:3px solid var(--hydro);margin-bottom:14px;white-space:pre-wrap;line-height:1.45}
.te-sep{border:none;border-top:1px solid var(--line);margin:14px 0 12px}
.te-toggle{display:flex;align-items:center;gap:9px;cursor:pointer;font-size:12.5px;margin-bottom:10px}
.te-toggle input{width:16px;height:16px;cursor:pointer}
.te-erl-info{background:var(--ok-bg);color:var(--ok);padding:8px 11px;border-radius:5px;font-size:12px;margin-bottom:12px}

/* Dashboard-Karte „Heute & Überfällig" */
.t-dash-head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;
  border-bottom:1px solid var(--line)}
.t-dash-empty{padding:18px 14px;color:var(--ink-3);font-size:12px;text-align:center}

/* Stat-Box mit Warn-Hervorhebung */
.stat.stat-warn{border:1.5px solid var(--danger);background:var(--danger-bg)}

/* ── BUCHHALTUNG ────────────────────────────────────────────────────────── */
.bh-tabs{display:flex;gap:6px;margin-bottom:18px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:1px}
.bh-tab{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;
  background:transparent;border:none;border-bottom:2px solid transparent;
  font-size:12.5px;font-weight:600;color:var(--ink-3);cursor:pointer;
  font-family:var(--font-body);transition:.12s}
.bh-tab:hover{color:var(--ink-2)}
.bh-tab.active{color:var(--hydro);border-bottom-color:var(--hydro)}
.bh-tab i{font-size:14px}
/* Zähler-Chip: die Grundregel ist für dunkle Flächen gemacht (weisslicher
   Hintergrund). Auf dem hellen Reiter wäre sie unsichtbar. */
.bh-tab .t-tab-n{background:var(--surface-3);color:var(--ink-3)}
.bh-tab.active .t-tab-n{background:var(--hydro);color:#fff}

.bh-method-row{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (max-width: 900px){.bh-method-row{grid-template-columns:1fr}}
.bh-method-opt{display:flex;gap:10px;padding:11px 13px;border:1.5px solid var(--line);border-radius:var(--r);
  cursor:pointer;background:var(--surface);transition:.12s;align-items:flex-start}
.bh-method-opt:hover{border-color:var(--line-strong)}
.bh-method-opt.active{border-color:var(--hydro);background:var(--hydro-soft)}
.bh-method-opt input[type=radio]{margin-top:3px;flex-shrink:0}
.bh-method-t{font-weight:700;font-size:13px;color:var(--ink);margin-bottom:3px}
.bh-method-sub{font-size:11px;color:var(--ink-2);line-height:1.4}
.mw-wann-opt{display:flex;gap:9px;padding:9px 11px;border:1px solid var(--line);border-radius:var(--r);
  cursor:pointer;background:var(--surface);font-size:12.5px;line-height:1.45;align-items:flex-start}
.mw-wann-opt:hover{border-color:var(--line-strong)}
.mw-wann-opt input{margin-top:3px;flex-shrink:0}

/* MWST-Abrechnungs-Formular (Form-0550-Style) */
.mwst-form{padding:0}
.mwst-form-head{display:flex;justify-content:space-between;align-items:flex-start;padding:14px 18px;
  border-bottom:2px solid var(--hydro)}
.mwst-form-foot{padding:10px 18px;border-top:1px solid var(--line);font-size:10.5px;color:var(--ink-3);line-height:1.5}
.mwst-tbl{width:100%;border-collapse:collapse}
.mwst-tbl td{padding:8px 14px;border-bottom:1px solid var(--line);font-size:13px}
.mwst-tbl .mwst-zif{font-family:var(--font-mono);color:var(--hydro);font-weight:700;width:60px}
.mwst-tbl .mwst-sum td{border-top:1.5px solid var(--ink);border-bottom:1.5px solid var(--ink);
  font-size:14px;background:var(--surface-2)}

/* Eröffnungsbilanz-Tabelle */
.eb-input:focus{outline:1.5px solid var(--hydro)}

/* Postfach */
.pf-row{display:grid;grid-template-columns:46px 1fr;gap:0;padding:12px 14px;border-bottom:1px solid var(--line);cursor:pointer;transition:.12s;background:var(--surface)}
.pf-row:hover{background:var(--surface-2)}
.pf-row:last-child{border-bottom:none}
.pf-row-neu{background:var(--hydro-soft)}
.pf-row-neu:hover{background:#D7E5F2}
.pf-row-l{font-size:22px;display:flex;align-items:center;justify-content:center}
.pf-row-body{min-width:0}
.pf-row-head{display:flex;align-items:center;gap:9px;flex-wrap:wrap;font-size:11.5px;margin-bottom:3px}
.pf-typ{font-family:var(--font-display);font-size:10.5px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:var(--hydro)}
.pf-absender{font-weight:700;color:var(--ink);font-size:12.5px}
.pf-mail{color:var(--ink-3);font-family:var(--font-mono);font-size:11px}
.pf-time{margin-left:auto;color:var(--ink-3);font-size:10.5px;font-family:var(--font-mono)}
.pf-vorschau{font-size:12px;color:var(--ink-2);line-height:1.5;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pf-status{display:inline-flex;align-items:center;gap:4px;padding:1px 8px;border-radius:9px;
  font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;font-family:var(--font-display)}
.pf-status-neu{background:var(--danger);color:#fff}
.pf-status-unbestaetigt{background:var(--warn);color:#fff}
.pf-status-gelesen{background:var(--warn-bg);color:var(--warn)}
.pf-status-uebernommen{background:var(--ok-bg);color:var(--ok)}
.pf-status-verworfen{background:var(--surface-3);color:var(--ink-3)}

/* Anfrage-Modal */
.an-meta{display:grid;grid-template-columns:1fr 1fr;gap:4px 12px;font-size:11.5px;padding-bottom:10px;
  border-bottom:1px solid var(--line);margin-bottom:12px;color:var(--ink-2)}
.an-block{margin-bottom:14px}
.an-h{font-family:var(--font-display);font-size:10px;font-weight:700;color:var(--hydro);
  text-transform:uppercase;letter-spacing:.06em;border-bottom:1.5px solid var(--hydro);
  padding-bottom:3px;margin-bottom:7px}
.an-row{display:grid;grid-template-columns:130px 1fr;gap:6px;padding:3px 0;font-size:12.5px}
.an-row>span:first-child{color:var(--ink-3);font-weight:600;font-size:11px;text-transform:uppercase;letter-spacing:.04em}
.an-msg{background:var(--surface-2);border-left:3px solid var(--hydro);padding:9px 12px;border-radius:4px;
  font-size:12.5px;line-height:1.55;white-space:pre-wrap;color:var(--ink)}

/* Lohn-Vorschau im Lohnperiode-Modal */
.lohn-vorschau{font-size:11.5px;line-height:1.5}
.lv-row{display:flex;justify-content:space-between;gap:8px;padding:2px 0}
.lv-row.lv-abz{color:var(--danger)}
.lv-row.lv-netto{font-size:13px;color:var(--hydro)}
.lv-sep{border-top:1px solid var(--line);margin:4px 0}


.bh-konten-klasse{margin-bottom:14px}
.bh-konten-klasse-h{font-family:var(--font-display);font-size:11px;font-weight:700;color:var(--hydro);
  text-transform:uppercase;letter-spacing:.05em;padding:6px 0;border-bottom:1.5px solid var(--hydro);margin-bottom:6px}

.bh-bilanz{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:4px 0}
.bh-bilanz table{width:100%;font-size:11.5px}
.bh-bilanz td{padding:4px 6px}
.bh-bilanz .bh-sum td{border-top:1.5px solid var(--ink);padding-top:7px}
.bh-report-h{font-family:var(--font-display);font-size:10px;font-weight:700;color:var(--hydro-dark);
  text-transform:uppercase;letter-spacing:.06em;padding:4px 0;margin-bottom:4px}
.bh-report-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.bh-report-card{margin:0}

/* Saubere Finanztabelle – feste Spaltenbreiten, keine abgeschnittenen Zahlen */
.bh-fin-tbl{width:100%;border-collapse:collapse;font-size:11.5px;table-layout:fixed}
.bh-fin-tbl td,.bh-fin-tbl th{padding:4px 6px;vertical-align:top}
.bh-fin-tbl td.c-nr,.bh-fin-tbl th:first-child{width:48px;color:var(--ink-3);font-family:var(--font-mono);font-size:10.5px;white-space:nowrap}
.bh-fin-tbl td.c-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bh-fin-tbl td.c-val,.bh-fin-tbl th.c-val{width:108px;text-align:right;white-space:nowrap;font-family:var(--font-mono);font-feature-settings:"tnum" 1}
.bh-saldo-tbl td.c-val,.bh-saldo-tbl th.c-val{width:auto;min-width:96px;padding-right:8px}
.bh-fin-tbl thead th{background:var(--hydro);color:#fff;font-size:9.5px;text-transform:uppercase;letter-spacing:.03em}
.bh-fin-tbl .bh-sum td{border-top:1.5px solid var(--ink);padding-top:7px}
.bh-saldo-tbl{table-layout:auto}
.bh-empty{color:var(--ink-3);font-size:11.5px;padding:6px}

/* Perioden-/Geschäftsjahr-Label */
.bh-period{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--hydro-dark);
  background:var(--hydro-soft);border-radius:6px;padding:5px 11px;margin-bottom:14px}
.bh-period .ti{font-size:14px}

/* KPI-Zusammenfassung */
.bh-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px;margin-bottom:18px}
.bh-kpi{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:13px 15px;box-shadow:var(--shadow)}
.bh-kpi .k-lbl{font-size:10px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.05em;font-weight:700}
.bh-kpi .k-val{font-size:20px;font-weight:800;font-family:var(--font-mono);margin-top:4px;letter-spacing:-.02em;white-space:nowrap}
.bh-kpi .k-sub{font-size:10px;color:var(--ink-3);margin-top:2px}

/* Diagramm-Karten */
.bh-charts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:18px}
.bh-chart-card{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:14px 16px;box-shadow:var(--shadow)}
.bh-chart-card h4{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:10px;display:flex;align-items:center;gap:6px}
.bh-chart-card h4 .ti{color:var(--hydro)}
.chart-foot{margin-top:8px;font-size:11.5px;color:var(--ink-2);text-align:center}
.chart-foot.pos strong{color:var(--ok)}.chart-foot.neg strong{color:var(--danger)}
.chart-legend{display:flex;gap:16px;justify-content:center;margin-top:6px;font-size:10.5px;color:var(--ink-2)}
.chart-legend span{display:flex;align-items:center;gap:5px}
.chart-legend i{width:10px;height:10px;border-radius:2px;display:inline-block}
.hbars{display:flex;flex-direction:column;gap:7px;padding:2px 0}
.hbar{display:grid;grid-template-columns:1fr 2fr auto;gap:8px;align-items:center;font-size:11px}
.hbar-lbl{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink-2)}
.hbar-track{background:var(--surface-3);border-radius:4px;height:14px;overflow:hidden}
.hbar-fill{height:100%;background:linear-gradient(90deg,var(--hydro),var(--hydro-dark));border-radius:4px}
.hbar-val{font-size:11px;color:var(--ink);white-space:nowrap;text-align:right;min-width:60px}

@media (max-width: 1100px) {
  .bh-report-grid{grid-template-columns:1fr}
  .bh-bilanz{grid-template-columns:1fr}
  .bh-charts{grid-template-columns:1fr}
}

/* ── PRINT ──────────────────────────────────────────────────────────────── */
@media print{
  body{background:#fff}
  .sidebar,.proj-bar,.mess-toolbar,.mess-aside,.mess-panel,.mess-banner,.btn,button,.toast{display:none!important}
  .main-content{margin-left:0!important}
  .page{display:block!important;padding:0;max-width:none}
  .card{box-shadow:none;border:1px solid #ccc}
  @page{margin:14mm}
}

/* ── Berechtigungen (Benutzer-Modal + Liste) ─────────────────────────────── */
.perm-h{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:2px}
.perm-h .ti{color:var(--hydro);margin-right:4px}
.perm-sub{font-size:11px;color:var(--ink-3);margin-bottom:10px}
.perm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:8px}
.perm-opt{display:flex;flex-direction:column;padding:8px 10px;border:1px solid var(--line);border-radius:6px;cursor:pointer;background:var(--surface);transition:background .12s;position:relative}
.perm-opt:hover{background:var(--surface-3)}
.perm-opt input{position:absolute;opacity:0;pointer-events:none}
.perm-opt .po-lbl{font-size:12px;font-weight:600;color:var(--ink);padding-left:28px;position:relative;display:block;min-height:18px}
.perm-opt .po-lbl::before{content:"";position:absolute;left:0;top:0;width:18px;height:18px;border:2px solid var(--line-strong);border-radius:4px;background:#fff;box-sizing:border-box;display:block}
.perm-opt input:checked + .po-lbl::before{background:var(--hydro);border-color:var(--hydro)}
.perm-opt input:checked + .po-lbl::after{content:"\2713";position:absolute;left:3px;top:-3px;font-size:15px;color:#fff;font-weight:700;line-height:1}
.perm-opt .po-desc{font-size:10.5px;color:var(--ink-3);padding-left:28px;margin-top:3px;line-height:1.35;display:block}

.perm-block{margin-top:14px;padding:12px;border:1px solid var(--line);border-radius:7px;background:var(--surface-2)}

.benutzer-row{padding:10px;border:1px solid var(--line);border-radius:7px;margin-bottom:6px}
.perm-chips{display:flex;flex-wrap:wrap;gap:4px;padding-left:44px}
.perm-chip{font-size:9.5px;padding:2px 7px;border-radius:9px;font-weight:600;letter-spacing:.2px}
.perm-chip.pc-on{background:var(--hydro-soft);color:var(--hydro-dark);border:1px solid var(--hydro-soft)}
.perm-chip.pc-off{background:var(--surface-3);color:var(--ink-3);border:1px solid var(--line);text-decoration:line-through;opacity:.65}

/* ── Papierkorb ──────────────────────────────────────────────────────────── */
.pk-row{display:flex;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:6px;margin-bottom:6px;background:var(--surface-2)}
.pk-row .pk-icon{font-size:18px;color:var(--ink-3)}
.pk-row .pk-main{flex:1;min-width:0}
.pk-row .pk-label{font-size:12px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pk-row .pk-meta{font-size:10.5px;color:var(--ink-3);margin-top:2px}
.pk-row .pk-tab{font-size:10px;padding:2px 7px;background:var(--surface-3);border-radius:8px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.4px;font-weight:600}

/* ── Kontakte / Adressbuch ───────────────────────────────────────────────── */
.kont-row{display:flex;align-items:flex-start;gap:12px;padding:11px 14px;border-bottom:1px solid var(--line)}
.kont-row:last-child{border-bottom:none}
.kont-row:hover{background:var(--surface-2)}
.kont-ava{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.kont-main{flex:1;min-width:0}
.kont-name{font-size:13px;font-weight:600;color:var(--ink);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.kont-meta{font-size:11.5px;color:var(--ink-2);margin-top:3px;line-height:1.5}
.kont-notiz{font-size:11px;color:var(--ink-3);margin-top:4px}
.kont-act{display:flex;gap:4px;flex-shrink:0}
/* ── GLOBALE SUCHE (Strg+K) ──────────────────────────────────────────────── */
.gs-overlay{display:none;position:fixed;inset:0;background:rgba(10,27,46,.5);backdrop-filter:blur(2px);
  z-index:300;align-items:flex-start;justify-content:center;padding:11vh 16px 16px}
.gs-overlay.open{display:flex;animation:fade .15s}
.gs-box{background:var(--surface);border-radius:12px;width:100%;max-width:580px;
  box-shadow:var(--shadow-pop);overflow:hidden;animation:modalIn .18s cubic-bezier(.2,.7,.3,1)}
.gs-input-row{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.gs-input-row>i{font-size:18px;color:var(--hydro);flex-shrink:0}
.gs-input-row input{border:none!important;box-shadow:none!important;outline:none!important;
  font-size:15px;padding:0;background:transparent;font-family:var(--font-body)}
.gs-kbd{font-family:var(--font-mono);font-size:10px;color:var(--ink-3);border:1px solid var(--line-strong);
  border-radius:5px;padding:2px 7px;flex-shrink:0;background:var(--surface-2)}
.gs-results{max-height:56vh;overflow-y:auto;padding:6px}
.gs-group{font-size:10px;font-weight:700;color:var(--ink-3);text-transform:uppercase;
  letter-spacing:.08em;padding:10px 12px 4px}
.gs-item{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:7px;cursor:pointer}
.gs-item.active{background:var(--hydro-soft)}
.gs-item>i{font-size:17px;color:var(--hydro);flex-shrink:0;width:20px;text-align:center}
.gs-item-main{flex:1;min-width:0}
.gs-item-title{font-size:13px;font-weight:600;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-item-title .mono{color:var(--hydro)}
.gs-item-sub{font-size:11px;color:var(--ink-3);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gs-item .chip{flex-shrink:0}
.gs-empty{padding:26px 20px;text-align:center;color:var(--ink-3);font-size:12px;line-height:1.7}
/* Tastatur-Hinweis am Sidebar-Eintrag */
.gs-navkbd{margin-left:auto;font-family:var(--font-mono);font-size:9px;color:#64798F;
  border:1px solid rgba(255,255,255,.14);border-radius:4px;padding:1px 6px}
.sidebar.collapsed .gs-navkbd{display:none}
/* Zähler-Chip auch in .ftab-Filterleisten lesbar */
.ftab:not(.active) .t-tab-n{background:var(--surface-3);color:var(--ink-3)}
.ftab .t-tab-n{margin-left:4px}

/* ── DATENLOGGER / MESSBOXEN ──────────────────────────────────────────────── */
.mb-card{border:1px solid var(--line);border-radius:8px;padding:11px 13px;margin-bottom:8px;background:var(--surface)}
.mb-card-head{display:flex;align-items:center;gap:9px;margin-bottom:8px}
.mb-boxnr{font-family:var(--font-display);font-weight:700;font-size:12px;color:var(--hydro-dark);
  background:var(--hydro-soft);border-radius:6px;padding:3px 9px;white-space:nowrap}
.mb-name-inp{flex:1;min-width:0;border:1px solid var(--line);border-radius:6px;padding:6px 9px;font-size:12.5px}
.mb-online{font-size:10.5px;font-weight:600;white-space:nowrap;display:inline-flex;align-items:center;gap:2px}
.mb-online .ti{font-size:11px}
.mb-online.is-on{color:var(--ok)}
.mb-online.is-off{color:var(--ink-3)}
.mb-chips{display:flex;flex-wrap:wrap;gap:6px}
.mb-chip{display:inline-flex;align-items:baseline;gap:5px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:6px;padding:4px 9px}
.mb-chip-l{font-size:9.5px;color:var(--ink-3);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.mb-chip-v{font-family:var(--font-mono);font-size:12.5px;font-weight:600;color:var(--ink)}
/* Abschnitt „Automatische Messboxen": Tabelle + Verlaufsgraphen */
.mb-tbl{width:100%;border-collapse:collapse;font-size:11.5px}
.mb-tbl th{background:var(--surface-2);color:var(--ink-2);font-size:9.5px;text-transform:uppercase;
  letter-spacing:.05em;padding:7px 8px;text-align:center;border-bottom:1px solid var(--line)}
.mb-tbl th:first-child,.mb-tbl th:nth-child(2){text-align:left}
.mb-tbl td{padding:7px 8px;text-align:center;border-bottom:1px solid var(--line);
  font-family:var(--font-mono);white-space:nowrap}
.mb-tbl tr:last-child td{border-bottom:none}
.mb-t-box{font-family:var(--font-display)!important;font-weight:700;text-align:left!important;color:var(--hydro-dark)}
.mb-t-name{text-align:left!important;font-family:var(--font-body)!important}
.mb-t-log{color:var(--ink-3);font-size:10px}
.mb-t-time{color:var(--ink-3);font-size:10.5px}
.mb-charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:12px;margin-top:12px}
.mb-chart-card{border:1px solid var(--line);border-radius:8px;padding:10px 12px;background:var(--surface)}
.mb-chart-t{font-size:12px;font-weight:700;color:var(--ink);margin-bottom:6px;display:flex;
  justify-content:space-between;align-items:baseline;gap:8px}
.mb-chart-n{font-size:10px;font-weight:400;color:var(--ink-3)}
.mb-chart{margin-bottom:6px}
.mb-chart-svg{width:100%;height:auto;display:block}
.mb-legend{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:2px}
.mb-leg{display:inline-flex;align-items:center;gap:4px;font-size:10px;color:var(--ink-2)}
.mb-leg i{width:9px;height:3px;border-radius:2px;display:inline-block}

/* Datenlogger-Kopplung in der Messprotokoll-Seitenleiste */
.mb-aside-logger{border:1px solid var(--line);border-radius:6px;padding:8px 9px;margin-bottom:6px;background:var(--surface-2)}
.mb-aside-logger-h{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:11.5px;font-weight:600;margin-bottom:5px}
.mb-aside-box{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:11px;color:var(--ink-2);padding:2px 0}

/* Picker (Aus Datenbank) */
.dbpick-row{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--line);border-radius:7px;margin-bottom:6px;cursor:pointer;background:var(--surface)}
.dbpick-row:hover{background:var(--hydro-soft);border-color:var(--hydro)}
.dbpick-main{flex:1;min-width:0}
.dbpick-name{font-size:12.5px;font-weight:600;color:var(--ink)}
.dbpick-meta{font-size:11px;color:var(--ink-3);margin-top:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.field-with-btn{display:flex;align-items:flex-end;justify-content:space-between;gap:8px}

/* ── POSITIONSEDITOR (Offerte / Rechnung) ─────────────────────────────────── */
.pos-kopf,.pos-zeile{display:grid;grid-template-columns:88px 1fr 64px 84px 84px 54px 118px;gap:6px;align-items:center}
.pos-kopf{margin-bottom:4px;font-size:10px;color:var(--ink-3);font-weight:600;
  text-transform:uppercase;letter-spacing:.04em}
.pos-zeile{margin-bottom:6px}
.pos-zeile > input{min-width:0}
.pos-nr{font-size:11px}
.pos-leer{text-align:center;color:var(--ink-3)}
.pos-werkzeuge{display:flex;gap:2px;justify-content:flex-end}
.pos-langtext{grid-column:1/-1;margin:2px 0 6px}
.pos-langtext textarea{width:100%;font-size:11.5px;line-height:1.45}
.pos-marke{grid-column:1/-1;font-size:10.5px;color:var(--ink-3);margin:-2px 0 4px}

.pos-titel{grid-template-columns:26px 1fr 118px;background:var(--surface-3);
  border-radius:6px;padding:6px 8px;margin:10px 0 6px}
.pos-griff{color:var(--hydro);text-align:center}
.pos-titel input{font-weight:700;background:transparent;border-color:transparent}
.pos-titel input:focus{background:var(--surface);border-color:var(--hydro)}

.pos-ist-bedarf > input:not(.pos-nr){background:#FFFDF5}
.pos-ist-text > input{background:var(--surface-2)}
.pos-zwischensumme{display:flex;gap:10px;align-items:baseline;justify-content:flex-end;
  padding:4px 126px 10px 0;font-size:11.5px;color:var(--ink-2);border-bottom:1px solid var(--line);
  margin-bottom:10px}
.pos-zwischensumme .mono{font-weight:700;color:var(--ink)}
.pos-bedarf-hinweis{color:var(--ink-3);font-size:10.5px}

/* ── ZEITERFASSUNG ────────────────────────────────────────────────────────── */
.ze-schnell{display:flex;gap:10px;flex-wrap:wrap;align-items:end;padding:4px 0}
.ze-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ze-tbl{width:100%;border-collapse:collapse;min-width:600px}
.ze-tbl th{font-size:10.5px;color:var(--ink-3);text-align:left;font-weight:600;
  padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.ze-tbl th.r,.ze-tbl td.r{text-align:right}
.ze-tbl td{padding:7px 10px;border-bottom:1px solid var(--line);vertical-align:top;font-size:12px}
.ze-tbl tr:last-child td{border-bottom:0}
.ze-absenz td{background:var(--surface-2);color:var(--ink-2)}
.ze-laufend{border-color:var(--danger)}
.ze-tag .card-head{padding-bottom:6px}
.ze-we{opacity:.75}

@media(max-width:980px){
  .ze-tbl{min-width:520px}
  .ze-tbl th,.ze-tbl td{padding:8px}
  .ze-schnell .field input,.ze-schnell .field select{min-height:44px;font-size:16px}
  .ze-schnell .btn{min-height:44px}
  #ov-zeit .field input,#ov-zeit .field select{min-height:44px;font-size:16px}
  #page-zeit .page-head > div:last-child{flex:1 1 100%}
}

/* ── ZAHLUNGSEINGANG ──────────────────────────────────────────────────────── */
.za-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.za-tbl{width:100%;border-collapse:collapse;min-width:660px}
.za-tbl th{font-size:10.5px;color:var(--ink-3);text-align:left;font-weight:600;
  padding:7px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.za-tbl th.r,.za-tbl td.r{text-align:right}
.za-tbl td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top;font-size:12px}
.za-tbl tr:last-child td{border-bottom:0}
.za-verbucht{opacity:.62}
.za-ref{font-size:10px;color:var(--ink-3);margin-top:2px;word-break:break-all}
.za-mit{font-size:11px;color:var(--ink-2);margin-top:2px}
.za-wahl{width:100%;max-width:340px;font-size:11.5px;padding:5px 7px}
.za-grund{font-size:10.5px;color:var(--ink-3);margin-top:3px;line-height:1.4}
.za-grund.za-gut{color:var(--ok)}

@media(max-width:980px){
  .za-tbl{min-width:560px}
  .za-tbl th,.za-tbl td{padding:8px}
  .za-wahl{min-height:44px;font-size:16px;max-width:none}
  #bh-content .btn-xs{min-height:38px;min-width:38px}
  /* Knöpfe im Seitenkopf dürfen schrumpfen und ihre Beschriftung umbrechen —
     ein langes Label schob sonst die Seite aus dem Bild. */
  #bh-head-actions .btn{flex:1 1 auto;min-width:0;white-space:normal;text-align:center}
}

/* ── ZAHLENFELDER ─────────────────────────────────────────────────────────── */
/* Die Spinner-Pfeile machen die Eingabe umständlich: sie klauen Platz, fangen
   Klicks ab und verstellen bei Scrollen über dem Feld ungewollt den Wert. */
input[type=number]{-moz-appearance:textfield;appearance:textfield}
input[type=number]::-webkit-outer-spin-button,
input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

/* ── KATALOG-PICKER ───────────────────────────────────────────────────────── */
/* So gross wie der Bildschirm hergibt — ein Leistungsverzeichnis stellt man
   nicht in einem Guckloch zusammen. */
.kp-modal{width:min(1500px,96vw);max-width:none!important;height:94vh;max-height:94vh;
  display:flex;flex-direction:column}
.kp-filter{padding:12px 20px 0;display:flex;gap:10px;flex-wrap:wrap;align-items:end;
  border-bottom:1px solid var(--line);padding-bottom:10px}

.kp-kap{margin-bottom:6px;border:1px solid var(--line);border-radius:7px;overflow:hidden}
.kp-kap-head{display:flex;align-items:center;gap:9px;padding:9px 11px;background:var(--surface-2);
  cursor:pointer;user-select:none}
.kp-kap-head:hover{background:var(--hydro-soft)}
.kp-kap-head > i{color:var(--ink-3);font-size:15px;flex:0 0 auto}
.kp-kap-titel{font-weight:700;font-size:13px;flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.kp-zaehler{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);flex:0 0 auto}
.kp-zaehler strong{color:var(--hydro)}
.kp-box{width:17px;height:17px;flex:0 0 auto;cursor:pointer}

.kp-abs{border-top:1px solid var(--line)}
.kp-abs-head{display:flex;align-items:center;gap:9px;padding:7px 11px 7px 26px;
  cursor:pointer;user-select:none;background:var(--surface)}
.kp-abs-head:hover{background:var(--surface-3)}
.kp-abs-head > i{color:var(--ink-3);font-size:14px;flex:0 0 auto}
.kp-abs-nr{font-size:11px;color:var(--hydro);flex:0 0 auto}
.kp-abs-titel-t{font-weight:600;font-size:12px;color:var(--ink-2);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.kp-zeile{display:flex;gap:10px;align-items:flex-start;padding:7px 11px 7px 46px;cursor:pointer}
.kp-zeile:hover{background:var(--surface-2)}
.kp-zeile.kp-an{background:var(--hydro-soft)}
.kp-nr{font-size:11px;color:var(--hydro);flex:0 0 84px}
.kp-lang{display:block;font-size:11px;color:var(--ink-2);margin-top:2px;line-height:1.4;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.kp-felder{display:block;margin-top:4px}
.kp-einheit{flex:0 0 62px;font-size:11px;color:var(--ink-3);text-align:right}
.kp-preis{flex:0 0 92px;font-size:11.5px;text-align:right}

@media(max-width:980px){
  /* Der Positionseditor wird am Handy zweizeilig: Nr + Beschreibung oben,
     Menge/Einheit/Preis/Rabatt darunter. */
  .pos-kopf{display:none}
  .pos-zeile{grid-template-columns:1fr 1fr 1fr 1fr;gap:5px}
  .pos-zeile > input:nth-child(1){grid-column:1/3}
  .pos-zeile > input:nth-child(2){grid-column:3/5}
  .pos-zeile > input,.pos-zeile > span.pos-leer{min-height:42px;font-size:16px}
  .pos-werkzeuge{grid-column:1/-1;justify-content:flex-start}
  .pos-werkzeuge .btn{min-height:40px;flex:1}
  .pos-titel{grid-template-columns:26px 1fr}
  .pos-titel input{grid-column:2/3!important}
  .pos-zwischensumme{padding-right:0;flex-wrap:wrap}
  .kp-modal{width:100%;height:calc(100vh - 16px);max-height:calc(100vh - 16px)}
  .kp-zeile{flex-wrap:wrap;padding-left:30px}
  .kp-abs-head{padding-left:20px}
  .kp-nr{flex:0 0 auto}
  .kp-einheit,.kp-preis{flex:0 0 auto}
  .kp-box{width:22px;height:22px}
  .kp-kap-head,.kp-abs-head{min-height:46px}
  #ov-kp .field input,#ov-kp .field select{min-height:44px;font-size:16px}
  #ov-kpf .field input{min-height:44px;font-size:16px}
}

/* ── LEISTUNGSKATALOG ─────────────────────────────────────────────────────── */
.lk-kapitel{padding:0;overflow:hidden}
.lk-kap-head{display:flex;align-items:center;gap:10px;padding:12px 14px;cursor:pointer;
  background:var(--surface-2);border-bottom:1px solid var(--line);user-select:none}
.lk-kap-head:hover{background:var(--hydro-soft)}
.lk-kap-head > i{color:var(--ink-3);font-size:15px;flex:0 0 auto}
.lk-nr{font-family:var(--font-mono);font-size:12px;font-weight:600;color:var(--hydro);
  background:var(--hydro-soft);padding:2px 7px;border-radius:4px;flex:0 0 auto}
.lk-kap-titel{font-weight:700;font-size:13.5px;color:var(--ink);flex:1;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk-anz{font-family:var(--font-mono);font-size:11px;color:var(--ink-3);flex:0 0 auto}
.lk-vorbem{padding:10px 14px;font-size:11.5px;color:var(--ink-2);background:var(--surface-3);
  border-bottom:1px solid var(--line);line-height:1.5}

.lk-abschnitt{border-bottom:1px solid var(--line)}
.lk-abschnitt:last-child{border-bottom:0}
.lk-abs-head{display:flex;align-items:center;gap:9px;padding:9px 14px}
.lk-abs-titel{font-weight:600;font-size:12.5px;color:var(--ink-2);min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.lk-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.lk-tbl{width:100%;border-collapse:collapse;min-width:640px}
.lk-tbl th{font-size:10.5px;color:var(--ink-3);text-align:left;font-weight:600;
  padding:6px 14px;border-bottom:1px solid var(--line);white-space:nowrap}
.lk-tbl th.r,.lk-tbl td.r{text-align:right}
.lk-tbl td{padding:8px 14px;border-bottom:1px solid var(--line);vertical-align:top;font-size:12px}
.lk-tbl tr:last-child td{border-bottom:0}
.lk-pos-nr{font-size:11px;color:var(--hydro);white-space:nowrap;width:96px}
.lk-kurz{font-weight:600;color:var(--ink)}
.lk-lang{font-size:11px;color:var(--ink-2);margin-top:3px;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lk-felder{margin-top:4px;display:flex;gap:4px;flex-wrap:wrap}
.lk-inaktiv{opacity:.45}
.lk-preis{width:92px;text-align:right;padding:5px 8px;font-family:var(--font-mono);font-size:12px}
.lk-preis-leer{border-color:var(--line-strong);background:var(--surface-3)}

@media(max-width:980px){
  .lk-tbl{min-width:560px}
  .lk-tbl th,.lk-tbl td{padding:8px 10px}
  /* 16px verhindert, dass iOS beim Fokus in das Feld hineinzoomt */
  input.lk-preis{width:82px;min-height:44px;font-size:16px}
  #ov-lk .field input,#ov-lk .field select,#ov-lk .field textarea{min-height:44px;font-size:16px}
  #ov-lk .btn{min-height:44px}
}

/* ── KONTENRAHMEN + KONTOBLATT ────────────────────────────────────────────── */
/* Eine Tabelle statt einer pro Kontenklasse: nur so stehen Typ und Steuer-Code
   über alle Klassen hinweg wirklich untereinander. Feste Spaltenbreiten, damit
   ein langer Kontoname die Spalten nicht verschiebt. */
.bh-konten-tbl{width:100%;border-collapse:collapse;table-layout:fixed;min-width:560px}
.bh-konten-tbl th:nth-child(1),.bh-konten-tbl td:nth-child(1){width:72px}
.bh-konten-tbl th:nth-child(3),.bh-konten-tbl td:nth-child(3){width:110px}
.bh-konten-tbl th:nth-child(4),.bh-konten-tbl td:nth-child(4){width:130px}
.bh-konten-tbl th:nth-child(5),.bh-konten-tbl td:nth-child(5){width:34px}
.bh-konten-tbl td:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bh-kgruppe td{background:var(--surface-3);font-weight:600;font-size:11px;
  letter-spacing:.03em;text-transform:uppercase;color:var(--ink-2);
  padding:7px 10px!important;border-bottom:1px solid var(--line)}
.bh-krow{cursor:pointer}
.bh-krow:hover{background:var(--hydro-soft)}

.kb-tbl{width:100%;border-collapse:collapse;min-width:680px}
.kb-tbl th{font-size:11px;color:var(--ink-3);text-align:left;font-weight:600;
  padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.kb-tbl td{padding:7px 10px;border-bottom:1px solid var(--line);font-size:12px}
.kb-tbl tr:last-child td{border-bottom:0}

/* ── STROMVERBRAUCH ───────────────────────────────────────────────────────── */
.strom-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.strom-tbl{width:100%;min-width:540px;border-collapse:collapse}
.strom-tbl th{font-size:11px;color:var(--ink-3);text-align:left;font-weight:600;
  padding:8px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.strom-tbl td{padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:middle}
.strom-tbl tr:last-child td{border-bottom:0}
@media(max-width:980px){
  #modal-strom .field input,#modal-strom .field select{min-height:46px;font-size:16px}
  #modal-strom .btn{min-height:44px}
}

/* ── ZEITERFASSUNG: zwei getrennte Bücher ──────────────────────────────────── */
.ze-buecher{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.ze-buch{flex:1 1 180px;min-width:0;display:flex;align-items:center;justify-content:center;gap:8px;
  padding:12px 14px;border:1.5px solid var(--line);border-radius:8px;background:var(--surface);
  color:var(--ink-2);font-size:13.5px;font-weight:600;cursor:pointer;transition:.12s}
.ze-buch i{font-size:17px}
.ze-buch:hover{border-color:var(--hydro);color:var(--ink)}
.ze-buch.active{border-color:var(--hydro);background:var(--hydro);color:#fff}

/* Stempeluhr */
.az-uhr{border:1.5px solid var(--line)}
.az-uhr.laeuft{border-color:var(--danger)}
.az-uhr-inner{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.az-uhr-status{display:flex;align-items:center;gap:12px;flex:1;min-width:0}
.az-uhr-zeit{font-size:30px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.az-uhr-sub{font-size:12px;color:var(--ink-3)}
.az-uhr-knopf{font-size:15px;padding:12px 22px;flex:0 0 auto}
.az-uhr-fuss{margin-top:10px;padding-top:8px;border-top:1px solid var(--line);font-size:11.5px;color:var(--ink-3)}
.az-punkt{width:12px;height:12px;border-radius:50%;background:var(--danger);flex:0 0 auto;
  animation:az-blink 2s ease-in-out infinite}
@keyframes az-blink{0%,100%{opacity:1}50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.az-punkt{animation:none}}

/* Direkt editierbare Zellen in der Wochentabelle */
.az-zelle{width:100%;min-width:0;border:1px solid transparent;background:transparent;
  border-radius:4px;padding:3px 5px;font-family:var(--font-mono);font-size:12px;color:inherit}
.az-zelle:hover{border-color:var(--line)}
.az-zelle:focus{border-color:var(--hydro);background:var(--surface);outline:none}
.az-mini{max-width:64px;text-align:right}
.az-tbl td{vertical-align:middle}
.az-tbl input[type=number]{-moz-appearance:textfield}
.az-tbl input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}

@media (max-width:640px){
  .az-uhr-inner{flex-direction:column;align-items:stretch}
  .az-uhr-knopf{width:100%;justify-content:center}
  .az-uhr-zeit{font-size:26px}
  .ze-buch{flex:1 1 100%}
}