/* =========================================================================
   BMS BauDoku – Prototyp
   Design streng nach BMS-CI: nur sehr dunkles Grau + sehr helles Weiß.
   Fonts: Anton (Display), Inter (Body), IBM Plex Mono (Meta).
   ========================================================================= */

:root{
  --ink:#141413;
  --ink-rgb:20,20,19;
  --paper:#f7f6f2;
  --paper-rgb:247,246,242;
  --dark:#121110;
  --line:#e2ded4;
  --line-2:#d8d5cd;
  --line-dark:rgba(247,246,242,.14);
  --muted:#6b675e;
  --muted-2:#8b8578;
  --ok:#1f7a45;
  --warn:#8a6d1f;
  --danger:#7a2626;
  --font-body:'Inter','Helvetica Neue',sans-serif;
  --font-display:'Anton','Arial Narrow',sans-serif;
  --font-mono:'IBM Plex Mono','Courier New',monospace;
  --ease:cubic-bezier(.22,.8,.24,1);
  --r:14px;
  --r-lg:20px;
  --shadow:0 1px 2px rgba(var(--ink-rgb),.04),0 8px 30px rgba(var(--ink-rgb),.06);
  --shadow-lg:0 20px 60px rgba(var(--ink-rgb),.16);
  --header-h:64px;
  --nav-h:76px;
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--font-body);
  background:#2a2824;
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow:hidden;
  overscroll-behavior:none;
}
button{font:inherit;color:inherit;cursor:pointer;border:none;background:none}
input,textarea,select{font:inherit;color:inherit}
img{max-width:100%;display:block}
::selection{background:var(--ink);color:var(--paper)}

/* ---------- Geräte-Rahmen (Pitch-Modus) ---------- */
.device{position:fixed;inset:0;background:var(--paper);overflow:hidden}
body.framed{background:#1a1917;display:grid;place-items:center;padding:24px}
body.framed .device{
  position:relative;inset:auto;width:min(1180px,96vw);height:min(834px,92vh);
  border-radius:34px;border:14px solid #0a0a09;
  box-shadow:0 0 0 2px #2a2824,var(--shadow-lg);
}
.frame-toggle{
  display:none; /* nur mit ?frame=1 / ?dev=1 sichtbar (per JS eingeblendet) */
  position:fixed;bottom:14px;left:50%;transform:translateX(-50%);z-index:100;
  font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;
  color:rgba(var(--paper-rgb),.55);background:rgba(0,0,0,.4);
  padding:7px 14px;border-radius:100px;backdrop-filter:blur(8px);
  transition:color .2s var(--ease),background .2s var(--ease);
}
.frame-toggle:hover{color:var(--paper);background:rgba(0,0,0,.65)}
body.framed .frame-toggle{bottom:6px}

/* Desktop-Ansicht: an Computern (Maus) füllt die App die volle Höhe und wird als
   zentrierte Spalte dargestellt (gleicher Aufbau wie am iPad, nur mittig statt breit-
   gestreckt). Erkennung automatisch über Zeigergerät + Breite: Touch-Geräte (iPad)
   behalten den Vollbild-Aufbau, Rechner mit Maus bekommen die zentrierte Spalte. */
@media (min-width:1120px) and (pointer:fine){
  body:not(.framed){background:#0e0d0c}
  body:not(.framed) .device{
    top:0;bottom:0;left:50%;right:auto;transform:translateX(-50%);
    width:min(1180px,100vw);height:100vh;
    box-shadow:0 0 100px rgba(0,0,0,.6);
  }
}

.app{position:absolute;inset:0;overflow:hidden;background:var(--paper)}

/* ---------- Screens & Transitions ---------- */
.screen{position:absolute;inset:0;display:flex;flex-direction:column;overflow:hidden;background:var(--paper)}
.screen[hidden]{display:none}
.screen-enter{animation:screenIn .42s var(--ease) both}
@keyframes screenIn{from{opacity:0;transform:translateY(10px) scale(.995)}to{opacity:1;transform:none}}
.fade-in{animation:fadeIn .5s var(--ease) both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.up{animation:up .5s var(--ease) both}
@keyframes up{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* scrollbereich */
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}
.scroll::-webkit-scrollbar{width:0}

/* =========================================================================
   LOGIN
   ========================================================================= */
.login{background:var(--dark);color:var(--paper);align-items:stretch;flex:1;display:flex;flex-direction:column;min-height:0}
.login-grid{flex:1;display:grid;grid-template-columns:1.05fr .95fr;min-height:0}
@media (max-width:820px){.login-grid{grid-template-columns:1fr}}

.login-brand{
  position:relative;padding:clamp(28px,5vw,64px);display:flex;flex-direction:column;
  justify-content:space-between;overflow:hidden;border-right:1px solid var(--line-dark);
}
@media (max-width:820px){.login-brand{display:none}}
.login-brand .ghost{
  position:absolute;font-family:var(--font-display);line-height:.82;
  font-size:clamp(120px,26vw,320px);color:rgba(var(--paper-rgb),.035);
  bottom:-.12em;left:-.04em;letter-spacing:-.01em;pointer-events:none;user-select:none;white-space:nowrap;
}
.login-logo{width:118px;filter:brightness(0) invert(1);position:relative}
.login-brand h1{
  font-family:var(--font-display);font-weight:400;position:relative;
  font-size:clamp(38px,5vw,64px);line-height:.96;letter-spacing:.005em;margin-top:auto;
}
.login-brand h1 .out{-webkit-text-stroke:1.4px var(--paper);color:transparent}
.login-brand .sub{position:relative;margin-top:18px;max-width:34ch;color:rgba(var(--paper-rgb),.6);font-size:15px;line-height:1.6}
.login-brand .foot{position:relative;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(var(--paper-rgb),.4);margin-top:26px}

.login-panel{padding:clamp(24px,4vw,52px);padding-top:calc(clamp(24px,4vw,52px) + env(safe-area-inset-top));display:flex;flex-direction:column;justify-content:center;overflow-y:auto}
.login-panel .eyebrow{font-family:var(--font-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(var(--paper-rgb),.45);margin-bottom:22px}

/* Mitarbeiter-Auswahl */
.people{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.person{
  display:flex;align-items:center;gap:16px;padding:12px 14px;border-radius:var(--r);
  border:1px solid var(--line-dark);background:rgba(var(--paper-rgb),.02);
  transition:border-color .2s var(--ease),background .2s var(--ease),transform .2s var(--ease);
  text-align:left;width:100%;
}
.person:hover{border-color:rgba(var(--paper-rgb),.3);background:rgba(var(--paper-rgb),.05)}
.person:active{transform:scale(.99)}
.person.sel{border-color:var(--paper);background:rgba(var(--paper-rgb),.08)}
.ava{
  width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:var(--font-display);font-size:19px;background:var(--paper);color:var(--ink);
}
.person .who{flex:1;min-width:0}
.person .who b{display:block;font-weight:600;font-size:16px}
.person .who span{display:block;font-size:12.5px;color:rgba(var(--paper-rgb),.5);margin-top:1px}
.person .role-chip{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;padding:4px 8px;border-radius:100px;border:1px solid var(--line-dark);color:rgba(var(--paper-rgb),.6)}
.person.admin .role-chip{background:var(--paper);color:var(--ink);border-color:var(--paper)}

/* PIN */
.pinwrap{max-width:340px;margin:0 auto;width:100%;text-align:center;animation:fadeIn .4s var(--ease)}
.pin-back{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(var(--paper-rgb),.5);margin-bottom:24px}
.pin-back:hover{color:var(--paper)}
.pin-person{display:flex;flex-direction:column;align-items:center;gap:12px;margin-bottom:26px}
.pin-person .ava{width:66px;height:66px;font-size:26px}
.pin-person b{font-size:19px;font-weight:600}
.pin-person .pin-instr{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:rgba(var(--paper-rgb),.5);margin-top:2px}
.pin-dots{display:flex;gap:16px;justify-content:center;margin-bottom:30px}
.pin-dot{width:15px;height:15px;border-radius:50%;border:1.5px solid rgba(var(--paper-rgb),.4);transition:all .2s var(--ease)}
.pin-dot.on{background:var(--paper);border-color:var(--paper);transform:scale(1.05)}
.pin-dots.err{animation:shake .4s}
@keyframes shake{0%,100%{transform:none}20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.keypad{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;max-width:280px;margin:0 auto}
.key{
  height:66px;border-radius:var(--r);font-family:var(--font-display);font-size:26px;
  background:rgba(var(--paper-rgb),.05);border:1px solid var(--line-dark);color:var(--paper);
  transition:background .15s var(--ease),transform .1s var(--ease);
  display:grid;place-items:center;
}
.key:hover{background:rgba(var(--paper-rgb),.1)}
.key:active{transform:scale(.94);background:rgba(var(--paper-rgb),.16)}
.key.ghost{background:none;border:none;font-family:var(--font-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:rgba(var(--paper-rgb),.5)}
.key.ghost:hover{background:rgba(var(--paper-rgb),.05)}
.pin-hint{font-family:var(--font-mono);font-size:11px;color:rgba(var(--paper-rgb),.35);margin-top:22px;letter-spacing:.04em}

/* =========================================================================
   APP-CHROME: Header + Bottom-Nav
   ========================================================================= */
.appbar{
  height:calc(var(--header-h) + env(safe-area-inset-top));flex:none;display:flex;align-items:center;gap:14px;
  padding:env(safe-area-inset-top) max(20px,env(safe-area-inset-right)) 0 max(20px,env(safe-area-inset-left));
  background:var(--dark);color:var(--paper);position:relative;z-index:20;
}
.appbar .logo{height:26px;filter:brightness(0) invert(1)}
.appbar .bar-title{font-family:var(--font-display);font-weight:400;font-size:19px;letter-spacing:.01em;line-height:1}
.appbar .spacer{flex:1}
.appbar .icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;transition:background .2s var(--ease)}
.appbar .icon-btn:hover{background:rgba(var(--paper-rgb),.1)}
.appbar .icon-btn svg{width:21px;height:21px}
.appbar .me{display:flex;align-items:center;gap:10px;padding-left:6px}
.appbar .me .ava{width:36px;height:36px;font-size:15px}

/* Sync/offline Pille */
.netpill{
  display:inline-flex;align-items:center;gap:7px;font-family:var(--font-mono);
  font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;
  padding:6px 11px;border-radius:100px;border:1px solid var(--line-dark);color:rgba(var(--paper-rgb),.7);
  transition:all .25s var(--ease);cursor:pointer;
}
.netpill .dot{width:7px;height:7px;border-radius:50%;background:#4ea373;box-shadow:0 0 0 0 rgba(78,163,115,.5);animation:pulse 2.4s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(78,163,115,.45)}70%{box-shadow:0 0 0 7px rgba(78,163,115,0)}100%{box-shadow:0 0 0 0 rgba(78,163,115,0)}}
.netpill.offline{color:#e9c46a;border-color:rgba(233,196,106,.4)}
.netpill.offline .dot{background:#e9c46a;animation:none;box-shadow:none}
.netpill.syncing .dot{background:#e9c46a;animation:spin 1s linear infinite;border-radius:2px}
@keyframes spin{to{transform:rotate(360deg)}}

/* Bottom-Nav – schwebende Dock-Box */
.tabbar{
  height:64px;flex:none;display:flex;background:var(--dark);
  border-radius:22px;box-shadow:var(--shadow-lg);z-index:30;
  margin:6px 16px calc(14px + env(safe-area-inset-bottom));
}
.tab{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  color:rgba(var(--paper-rgb),.5);transition:color .2s var(--ease);position:relative;border-radius:22px;
}
.tab svg{width:22px;height:22px}
.tab span{font-family:var(--font-mono);font-size:9px;letter-spacing:.04em;text-transform:uppercase}
.tab.active{color:var(--paper)}
.tab.active::before{content:"";position:absolute;top:9px;width:30px;height:2.5px;background:var(--paper);border-radius:3px}
.tab.fab{flex:0 0 auto;width:84px}
.tab.fab .plus{
  width:54px;height:54px;border-radius:50%;background:var(--paper);color:var(--ink);
  display:grid;place-items:center;margin-top:-30px;box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform .2s var(--ease);border:4px solid var(--dark);
}
.tab.fab:hover .plus{transform:translateY(-2px) scale(1.04)}
.tab.fab .plus svg{width:26px;height:26px}
.tab.fab span{color:var(--paper);margin-top:-2px}

/* =========================================================================
   INHALTS-BAUSTEINE
   ========================================================================= */
.pad{padding:22px 20px}
.page-head{padding:26px 20px 10px}
.page-head .kick{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted-2)}
.page-head h2{font-family:var(--font-display);font-weight:400;font-size:clamp(30px,6vw,42px);line-height:.98;margin-top:8px;letter-spacing:.005em}
.page-head h2 .out{-webkit-text-stroke:1.4px var(--ink);color:transparent}
.page-head p{color:var(--muted);font-size:14px;margin-top:8px;max-width:52ch;line-height:1.55}

.section-label{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);display:flex;align-items:center;gap:10px;margin:6px 0 14px}
.section-label::after{content:"";flex:1;height:1px;background:var(--line)}

/* Dashboard-Kacheln (Index-Stil, keine "Boxen") */
.stat-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border-radius:var(--r);overflow:hidden;border:1px solid var(--line)}
.stat{background:var(--paper);padding:18px 16px}
.stat .n{font-family:var(--font-display);font-weight:400;font-size:34px;line-height:1;letter-spacing:.01em}
.stat .l{font-family:var(--font-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2);margin-top:8px}

/* Große Aktions-Karte – schwebend mit Abstand */
.hero-action{
  position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--dark);color:var(--paper);
  padding:28px 26px;margin:18px 16px 8px;display:flex;flex-direction:column;gap:16px;isolation:isolate;
}
.hero-action .ghost{position:absolute;right:-.06em;bottom:-.28em;font-family:var(--font-display);font-size:150px;line-height:.7;color:rgba(var(--paper-rgb),.05);z-index:-1;pointer-events:none}
.hero-action .greet{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(var(--paper-rgb),.5)}
.hero-action h3{font-family:var(--font-display);font-weight:400;font-size:30px;line-height:1;letter-spacing:.01em}
.hero-action .cta{align-self:flex-start;display:inline-flex;align-items:center;gap:10px;background:var(--paper);color:var(--ink);padding:14px 22px;border-radius:100px;font-weight:600;font-size:15px;transition:transform .2s var(--ease)}
.hero-action .cta:hover{transform:translateX(3px)}
.hero-action .cta svg{width:18px;height:18px}

/* Dokument-Zeilen (Index-Liste statt Karten-Grid) */
.doc-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.doc-row{
  display:flex;align-items:center;gap:14px;padding:16px 6px;border-bottom:1px solid var(--line);
  text-align:left;width:100%;transition:background .18s var(--ease),padding .18s var(--ease);
  cursor:pointer;
}
.row-del{flex:none;width:40px;height:40px;border-radius:10px;display:grid;place-items:center;color:var(--danger);border:1px solid transparent;transition:background .18s,border-color .18s}
.row-del svg{width:17px;height:17px}
.row-del:hover{background:rgba(122,38,38,.07);border-color:rgba(122,38,38,.25)}
.doc-row:hover{background:#fff;padding-left:12px;padding-right:12px}
.doc-row:active{background:#f0efe9}
.doc-badge{
  width:46px;height:46px;flex:none;border-radius:11px;display:grid;place-items:center;
  font-family:var(--font-display);font-size:13px;background:var(--ink);color:var(--paper);letter-spacing:.02em;
}
.doc-badge.am{background:#3a3833}
.doc-badge.bt{background:#2a2824}
.doc-main{flex:1;min-width:0}
.doc-main b{display:block;font-weight:600;font-size:15.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-main .meta{display:flex;align-items:center;gap:8px;margin-top:3px;font-size:12.5px;color:var(--muted)}
.doc-main .meta .num{font-family:var(--font-mono);font-size:11.5px;color:var(--muted-2)}
.doc-right{display:flex;flex-direction:column;align-items:flex-end;gap:6px;flex:none}
.doc-right .when{font-family:var(--font-mono);font-size:11px;color:var(--muted-2)}

.status{
  display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);
  font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:100px;border:1px solid transparent;white-space:nowrap;
}
.status .s-dot{width:6px;height:6px;border-radius:50%}
.status.draft{color:var(--warn);border-color:rgba(138,109,31,.3);background:rgba(138,109,31,.06)}
.status.draft .s-dot{background:var(--warn)}
.status.signed{color:var(--ok);border-color:rgba(31,122,69,.3);background:rgba(31,122,69,.06)}
.status.signed .s-dot{background:var(--ok)}
.status.void{color:var(--danger);border-color:rgba(122,38,38,.28);background:rgba(122,38,38,.05)}
.status.void .s-dot{background:var(--danger)}
.status.ready{color:#1d5b8a;border-color:rgba(29,91,138,.3);background:rgba(29,91,138,.06)}
.status.ready .s-dot{background:#1d5b8a}
.status.pending{color:var(--muted-2);border-color:var(--line-2);background:#efeee8}
.status.pending .s-dot{background:var(--muted-2)}

/* Suchleiste */
.searchbar{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line-2);border-radius:12px;padding:0 14px;min-height:48px;margin-bottom:16px;transition:border-color .18s}
.searchbar:focus-within{border-color:var(--ink);box-shadow:0 0 0 3px rgba(var(--ink-rgb),.07)}
.searchbar svg{width:19px;height:19px;color:var(--muted-2);flex:none}
.searchbar input{flex:1;border:none;background:none;font-size:16px;min-height:46px}
.searchbar input:focus{outline:none}
.search-empty{display:none;padding:30px;text-align:center;color:var(--muted-2);font-size:13.5px}

/* Projekt-Liste (kompakt) */
.proj-list{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.proj-row{display:flex;align-items:center;gap:14px;padding:12px 14px;background:#fff;border-bottom:1px solid var(--line);text-align:left;width:100%;transition:background .16s var(--ease)}
.proj-row:last-child{border-bottom:none}
.proj-row:hover{background:#faf9f5}
.proj-row .thumb{width:52px;height:52px;flex:none;border-radius:10px;background-color:#e8e6df;background-size:cover;background-position:center;filter:grayscale(1) contrast(1.02)}
.proj-row .thumb.new{display:grid;place-items:center;background:#f0efe9;filter:none;color:var(--muted)}
.proj-row .thumb.new svg{width:22px;height:22px}
.proj-row .pr-main{flex:1;min-width:0}
.proj-row .pr-main b{display:block;font-weight:600;font-size:15.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-row .pr-main span{display:block;font-size:12.5px;color:var(--muted);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.proj-row .pr-cnt{font-family:var(--font-mono);font-size:11px;color:var(--muted-2);display:flex;align-items:center;gap:6px;flex:none}
.proj-row .pr-cnt svg{width:15px;height:15px}
.proj-row .chev{color:var(--muted-2);flex:none}
.proj-row .chev svg{width:18px;height:18px}

/* =========================================================================
   NEUES DOKUMENT – Typ-Auswahl
   ========================================================================= */
.type-list{display:flex;flex-direction:column;gap:14px}
.type-card{
  position:relative;overflow:hidden;border-radius:var(--r-lg);border:1px solid var(--line);background:#fff;
  padding:22px;display:flex;align-items:center;gap:20px;text-align:left;width:100%;
  transition:transform .22s var(--ease),box-shadow .22s var(--ease),border-color .22s var(--ease);
}
.type-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--ink)}
.type-card .tc-badge{width:64px;height:80px;flex:none;border-radius:10px;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;position:relative}
.type-card .tc-badge .abbr{font-family:var(--font-display);font-size:22px}
.type-card .tc-badge .lines{position:absolute;bottom:10px;left:10px;right:10px;display:flex;flex-direction:column;gap:3px}
.type-card .tc-badge .lines i{height:2px;background:rgba(var(--paper-rgb),.3);border-radius:2px}
.type-card .tc-badge .lines i:nth-child(2){width:70%}
.type-card .tc-main{flex:1;min-width:0}
.type-card .tc-main b{font-family:var(--font-display);font-weight:400;font-size:23px;letter-spacing:.01em;line-height:1}
.type-card .tc-main p{color:var(--muted);font-size:13.5px;margin-top:8px;line-height:1.5}
.type-card .tc-arrow{flex:none;width:40px;height:40px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;transition:background .2s var(--ease),color .2s var(--ease),border-color .2s}
.type-card:hover .tc-arrow{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.type-card .tc-arrow svg{width:18px;height:18px}

/* =========================================================================
   FORMULAR
   ========================================================================= */
.form-top{flex:none;background:var(--paper);border-bottom:1px solid var(--line);padding:calc(14px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 14px max(18px,env(safe-area-inset-left));display:flex;align-items:center;gap:14px;z-index:10}
.form-top .back{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);transition:background .2s}
.form-top .back:hover{background:#efeee8}
.form-top .ft-title{flex:1;min-width:0}
.form-top .ft-title b{display:block;font-weight:600;font-size:16px}
.form-top .ft-title .num{font-family:var(--font-mono);font-size:11px;color:var(--muted-2);margin-top:1px}
.autosave{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;color:var(--muted-2);display:flex;align-items:center;gap:6px;transition:opacity .3s}
.autosave .sv{width:6px;height:6px;border-radius:50%;background:var(--ok)}

.form-body{padding:20px 18px 40px;max-width:760px;margin:0 auto;width:100%}
.fgroup{margin-bottom:26px}
.fgroup > .glab{font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted-2);display:flex;align-items:center;gap:10px;margin-bottom:14px}
.fgroup > .glab::after{content:"";flex:1;height:1px;background:var(--line)}
.fgroup > .glab .cnt{font-size:10px;color:var(--muted-2);letter-spacing:.05em}

.field{margin-bottom:14px}
.field label{display:block;font-size:12.5px;font-weight:600;color:var(--ink);margin-bottom:7px;letter-spacing:.01em}
.field label .opt{font-weight:400;color:var(--muted-2);font-size:11px}
.control{
  width:100%;min-height:50px;background:#fff;border:1px solid var(--line-2);border-radius:12px;
  padding:13px 15px;font-size:16px;transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.control:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(var(--ink-rgb),.08)}
.control::placeholder{color:#b3ada1}
textarea.control{resize:vertical;min-height:110px;line-height:1.55}
.row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:520px){.row-2{grid-template-columns:1fr}}

/* Witterungs-Chips (Toggle statt Checkbox) */
.chips{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  display:inline-flex;align-items:center;gap:8px;padding:11px 15px;border-radius:100px;
  border:1px solid var(--line-2);background:#fff;font-size:14px;font-weight:500;min-height:44px;
  transition:all .18s var(--ease);
}
.chip svg{width:17px;height:17px;opacity:.6}
.chip:hover{border-color:var(--muted-2)}
.chip.on{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.chip.on svg{opacity:1}

/* Stepper (Maschinen) */
.stepper-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media (max-width:520px){.stepper-grid{grid-template-columns:1fr}}
.stepper{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 12px 9px 16px;border:1px solid var(--line-2);border-radius:12px;background:#fff;transition:border-color .18s}
.stepper.active{border-color:var(--ink)}
.stepper .sl{font-size:14px;font-weight:600}
.stepper .sl-input{flex:1;min-width:0;border:none;background:none;font-size:14px;font-weight:600;padding:6px 0;min-height:36px}
.stepper .sl-input:focus{outline:none}
.stepper .sl-input::placeholder{font-weight:400;color:#b3ada1}
.stepper .sctl{display:flex;align-items:center;gap:4px}
.stepper .sbtn{width:40px;height:40px;border-radius:9px;background:#f0efe9;display:grid;place-items:center;font-size:20px;transition:background .15s,transform .1s}
.stepper .sbtn:hover{background:#e6e4dc}
.stepper .sbtn:active{transform:scale(.9)}
.stepper .sval{min-width:30px;text-align:center;font-family:var(--font-display);font-size:22px}
.stepper .sval.zero{color:#c4bfb3}

/* Positions-Tabellen */
.postable{border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#fff}
.pt-row{display:grid;gap:0;border-bottom:1px solid var(--line);position:relative}
.pt-row:last-child{border-bottom:none}
.pt-head{background:#f0efe9}
.pt-head .pt-cell{font-family:var(--font-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);padding:10px 12px;font-weight:500}
.pt-cell{padding:0;border-right:1px solid var(--line)}
.pt-cell:last-child{border-right:none}
.pt-cell input{width:100%;border:none;background:none;padding:13px 12px;font-size:15px;min-height:48px}
.pt-cell input:focus{outline:none;background:#faf9f5;box-shadow:inset 0 0 0 2px rgba(var(--ink-rgb),.1)}
.pt-del{position:absolute;right:-1px;top:50%;transform:translateY(-50%);width:30px;height:30px;border-radius:50%;background:var(--paper);border:1px solid var(--line);display:none;place-items:center;z-index:3}
.pt-row:hover .pt-del{display:grid}
.pt-del svg{width:14px;height:14px;color:var(--danger)}
.pt-add{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;padding:13px;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);background:#faf9f5;transition:background .18s,color .18s}
.pt-add:hover{background:#f0efe9;color:var(--ink)}
.pt-add svg{width:15px;height:15px}

/* Foto-Upload (Aufmaß) */
.photo-strip{display:flex;flex-wrap:wrap;gap:10px}
.photo-thumb{position:relative;width:96px;height:96px;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:#e8e6df center/cover;filter:grayscale(.15)}
.photo-thumb .rm{position:absolute;top:5px;right:5px;width:24px;height:24px;border-radius:50%;background:rgba(18,17,16,.75);color:var(--paper);display:grid;place-items:center}
.photo-thumb .rm svg{width:13px;height:13px}
.photo-add{width:96px;height:96px;border-radius:12px;border:1.5px dashed var(--line-2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--muted);background:#fff;transition:border-color .2s,color .2s}
.photo-add:hover{border-color:var(--ink);color:var(--ink)}
.photo-add svg{width:22px;height:22px}
.photo-add span{font-family:var(--font-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase}

/* Sticky-Aktionsleiste */
.form-actions{
  flex:none;padding:14px 18px;padding-bottom:calc(14px + env(safe-area-inset-bottom));
  background:var(--paper);border-top:1px solid var(--line);display:flex;gap:12px;z-index:10;
}
.btn{
  flex:1;min-height:54px;border-radius:14px;font-weight:600;font-size:16px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  transition:transform .15s var(--ease),background .2s,opacity .2s;letter-spacing:.01em;
}
.btn svg{width:19px;height:19px}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--ink);color:var(--paper)}
.btn-primary:hover{background:#000}
.btn-ghost{background:none;border:1px solid var(--line-2);flex:0 0 auto;padding:0 22px}
.btn-ghost:hover{background:#efeee8}
.btn[disabled]{opacity:.45;pointer-events:none}

/* =========================================================================
   SIGNATUR (Vollbild)
   ========================================================================= */
.sign-screen{background:var(--dark);color:var(--paper);z-index:60}
.sign-top{flex:none;padding:calc(16px + env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) 16px max(20px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between}
.sign-top .st-x{width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-dark)}
.sign-top .st-x:hover{background:rgba(var(--paper-rgb),.08)}
.sign-top .st-mid{text-align:center}
.sign-top .st-mid .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:rgba(var(--paper-rgb),.5)}
.sign-top .st-mid b{font-size:16px;font-weight:600}
.sign-who{padding:0 20px 8px;text-align:center}
.sign-who .swho-role{display:inline-flex;gap:8px;align-items:center;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(var(--paper-rgb),.6);border:1px solid var(--line-dark);padding:7px 14px;border-radius:100px}
.sign-who .swho-role svg{width:14px;height:14px;flex:none}
.sign-stage{flex:1;margin:8px 20px 12px;position:relative;border-radius:var(--r-lg);background:var(--paper);overflow:hidden;box-shadow:var(--shadow-lg)}
.sign-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair}
.sign-baseline{position:absolute;left:8%;right:8%;bottom:26%;border-bottom:1.5px dashed #c9c4b8;pointer-events:none}
.sign-baseline::after{content:"× hier unterschreiben";position:absolute;left:0;bottom:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.06em;color:#b0a99c;text-transform:uppercase}
.sign-hint-empty{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;transition:opacity .3s}
.sign-hint-empty svg{width:40px;height:40px;color:#e6e2d8}
.sign-bottom{flex:none;padding:14px 20px;padding-bottom:calc(16px + env(safe-area-inset-bottom));display:flex;gap:12px;align-items:center}
.sign-clear{flex:0 0 auto;padding:0 22px;min-height:54px;border-radius:14px;border:1px solid var(--line-dark);color:var(--paper);font-weight:600;display:inline-flex;align-items:center;gap:9px}
.sign-clear:hover{background:rgba(var(--paper-rgb),.08)}
.sign-clear svg{width:18px;height:18px}
.sign-confirm{flex:1;min-height:54px;border-radius:14px;background:var(--paper);color:var(--ink);font-weight:700;font-size:16px;display:inline-flex;align-items:center;justify-content:center;gap:10px;transition:opacity .2s,transform .15s}
.sign-confirm[disabled]{opacity:.4;pointer-events:none}
.sign-confirm:active{transform:scale(.98)}
.sign-confirm svg{width:19px;height:19px}
.sign-meta{text-align:center;font-family:var(--font-mono);font-size:10px;letter-spacing:.05em;color:rgba(var(--paper-rgb),.4);padding-bottom:6px}

/* =========================================================================
   DOKUMENT-DETAIL / PDF-VORSCHAU
   ========================================================================= */
.detail-top{flex:none;background:var(--dark);color:var(--paper);padding:calc(14px + env(safe-area-inset-top)) max(18px,env(safe-area-inset-right)) 18px max(18px,env(safe-area-inset-left))}
.detail-top .dt-nav{display:flex;align-items:center;gap:14px;margin-bottom:16px}
.detail-top .dt-nav .back{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-dark)}
.detail-top .dt-nav .back:hover{background:rgba(var(--paper-rgb),.08)}
.detail-top .dt-nav .spacer{flex:1}
.detail-top .dt-nav .icon-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-dark)}
.detail-top .dt-nav .icon-btn:hover{background:rgba(var(--paper-rgb),.08)}
.detail-top .dt-nav .icon-btn svg{width:19px;height:19px}
.detail-top .num{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(var(--paper-rgb),.55);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.detail-top .num svg{width:14px;height:14px;flex:none}
.detail-top h2{font-family:var(--font-display);font-weight:400;font-size:28px;line-height:1;margin:8px 0 12px}
.detail-top .dt-meta{display:flex;flex-wrap:wrap;gap:8px 16px;font-size:12.5px;color:rgba(var(--paper-rgb),.6)}
.detail-top .dt-meta b{color:var(--paper);font-weight:500}

/* PDF-Bühne */
.pdf-stage{flex:1;overflow-y:auto;background:#413e39;padding:20px 16px 30px;display:flex;flex-direction:column;align-items:center;gap:16px}
/* DIN-A4-Blatt (Verhältnis 1:1,414) */
.pdf-paper{width:100%;max-width:595px;min-height:842px;background:#fff;box-shadow:var(--shadow-lg);border-radius:3px;overflow:hidden;flex:none;display:flex;flex-direction:column}
.pdf-paper .pdfdoc{flex:1}

/* Aktionsleiste Detail */
.detail-actions{flex:none;padding:14px 18px;padding-bottom:calc(14px + env(safe-area-inset-bottom));background:var(--paper);border-top:1px solid var(--line);display:flex;gap:10px;flex-wrap:wrap}
.detail-actions .btn{font-size:15px;min-height:52px}
.mini-actions{display:flex;gap:8px;width:100%}
.mini-btn{flex:1;min-height:46px;border-radius:12px;border:1px solid var(--line-2);display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:600;font-size:13.5px;transition:background .2s}
.mini-btn:hover{background:#efeee8}
.mini-btn svg{width:16px;height:16px}
.mini-btn.danger{color:var(--danger);border-color:rgba(122,38,38,.25)}
.mini-btn.danger:hover{background:rgba(122,38,38,.05)}

/* =========================================================================
   ADMIN
   ========================================================================= */
.admin-emp{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.emp-row{display:flex;align-items:center;gap:14px;padding:15px 16px;background:#fff;text-align:left;width:100%;transition:background .18s}
.emp-row:hover{background:#faf9f5}
.emp-row .ava{width:42px;height:42px;font-size:16px;background:var(--ink);color:var(--paper)}
.emp-row .em{flex:1;min-width:0}
.emp-row .em b{font-weight:600;font-size:15px;display:block}
.emp-row .em span{font-size:12.5px;color:var(--muted)}
.emp-row .perm-count{font-family:var(--font-mono);font-size:10.5px;color:var(--muted-2);letter-spacing:.04em;text-align:right}
.emp-row .chev{color:var(--muted-2)}
.emp-row .chev svg{width:18px;height:18px}

/* Rechte-Toggles */
.perm-list{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.perm-item{display:flex;align-items:center;gap:14px;padding:15px 16px;border:1px solid var(--line);border-radius:12px;background:#fff}
.perm-item .pi-badge{width:40px;height:40px;border-radius:9px;background:var(--ink);color:var(--paper);display:grid;place-items:center;font-family:var(--font-display);font-size:13px;flex:none}
.perm-item .pi-main{flex:1}
.perm-item .pi-main b{display:block;font-weight:600;font-size:14.5px}
.perm-item .pi-main span{font-size:12px;color:var(--muted)}

/* Switch */
.switch{width:52px;height:31px;border-radius:100px;background:#d8d5cd;position:relative;flex:none;transition:background .22s var(--ease);cursor:pointer}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:25px;height:25px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.2);transition:transform .22s var(--ease)}
.switch.on{background:var(--ink)}
.switch.on::after{transform:translateX(21px)}

/* =========================================================================
   MODAL / SHEET
   ========================================================================= */
.scrim{position:absolute;inset:0;background:rgba(10,10,9,.5);backdrop-filter:blur(3px);z-index:80;opacity:0;animation:fadeIn .25s var(--ease) forwards;display:flex;align-items:flex-end;justify-content:center}
.sheet{
  width:100%;max-width:560px;background:var(--paper);border-radius:24px 24px 0 0;
  padding:10px 22px calc(24px + env(safe-area-inset-bottom));max-height:88%;overflow-y:auto;
  animation:sheetUp .38s var(--ease);box-shadow:var(--shadow-lg);
}
@keyframes sheetUp{from{transform:translateY(100%)}to{transform:none}}
.sheet-grab{width:40px;height:4px;border-radius:100px;background:var(--line-2);margin:6px auto 18px}
.sheet h3{font-family:var(--font-display);font-weight:400;font-size:26px;line-height:1;letter-spacing:.01em}
.sheet .sub{color:var(--muted);font-size:13.5px;margin-top:8px;line-height:1.55}
.sheet-body{margin-top:20px}
.sheet-actions{display:flex;gap:12px;margin-top:24px}

.center-modal{align-items:center}
.center-modal .sheet{border-radius:24px;margin:0 18px}

/* Warnbox */
.warnbox{display:flex;gap:13px;padding:15px;border-radius:12px;background:rgba(138,109,31,.07);border:1px solid rgba(138,109,31,.2);margin-top:4px}
.warnbox svg{width:20px;height:20px;flex:none;color:var(--warn);margin-top:1px}
.warnbox p{font-size:13px;line-height:1.55;color:#6a541a}
.warnbox.legal{background:rgba(31,122,69,.06);border-color:rgba(31,122,69,.2)}
.warnbox.legal svg{color:var(--ok)}
.warnbox.legal p{color:#155c33}

/* Empty state */
.empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:50px 30px;color:var(--muted)}
.empty svg{width:52px;height:52px;color:var(--line-2);margin-bottom:16px}
.empty b{font-size:16px;color:var(--ink);font-weight:600}
.empty p{font-size:13.5px;margin-top:6px;max-width:32ch;line-height:1.55}

/* Datei-Betrachter (Vollbild) */
.fileviewer{position:absolute;inset:0;z-index:110;background:var(--dark);display:flex;flex-direction:column;animation:fadeIn .2s var(--ease)}
.fv-top{flex:none;display:flex;align-items:center;gap:12px;padding:calc(12px + env(safe-area-inset-top)) 16px 12px;color:var(--paper);border-bottom:1px solid var(--line-dark)}
.fv-x{width:42px;height:42px;flex:none;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-dark)}
.fv-x:hover{background:rgba(var(--paper-rgb),.1)}
.fv-x svg{width:19px;height:19px}
.fv-name{flex:1;min-width:0;font-weight:600;font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fv-actions{display:flex;gap:8px;flex:none}
.fv-btn{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line-dark);color:var(--paper)}
.fv-btn:hover{background:rgba(var(--paper-rgb),.1)}
.fv-btn svg{width:19px;height:19px}
.fv-body{flex:1;min-height:0;background:#413e39;display:flex;align-items:center;justify-content:center;overflow:auto;padding:12px}
.fv-body img{max-width:100%;max-height:100%;object-fit:contain;border-radius:4px}
.fv-body iframe{width:100%;height:100%;border:0;background:#fff;border-radius:4px}
.fv-empty{text-align:center;color:rgba(var(--paper-rgb),.7);padding:40px 24px;max-width:38ch}
.fv-empty svg{width:46px;height:46px;color:rgba(var(--paper-rgb),.3);margin-bottom:14px}
.fv-empty b{display:block;color:var(--paper);font-size:16px}
.fv-empty p{font-size:13.5px;margin-top:6px;line-height:1.55}

/* Toast */
.toast{
  position:absolute;left:50%;bottom:calc(var(--nav-h) + 18px);transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--paper);padding:13px 20px;border-radius:100px;
  font-size:14px;font-weight:500;z-index:120;opacity:0;pointer-events:none;
  transition:opacity .3s var(--ease),transform .3s var(--ease);
  display:flex;align-items:center;gap:10px;box-shadow:var(--shadow-lg);white-space:nowrap;max-width:90%;
}
.toast svg{width:18px;height:18px;flex:none}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* Sync-Banner */
.sync-banner{
  position:absolute;left:16px;right:16px;top:calc(var(--header-h) + 12px);z-index:40;
  background:var(--ink);color:var(--paper);border-radius:14px;padding:14px 16px;
  display:flex;align-items:center;gap:13px;box-shadow:var(--shadow-lg);
  animation:up .4s var(--ease);
}
.sync-banner .sb-ic{width:38px;height:38px;border-radius:10px;background:rgba(var(--paper-rgb),.1);display:grid;place-items:center;flex:none}
.sync-banner .sb-ic svg{width:20px;height:20px}
.sync-banner .sb-main{flex:1;min-width:0}
.sync-banner .sb-main b{display:block;font-size:14px;font-weight:600}
.sync-banner .sb-main span{font-size:12px;color:rgba(var(--paper-rgb),.6)}
.sync-banner .sb-prog{width:100%;height:3px;border-radius:3px;background:rgba(var(--paper-rgb),.15);margin-top:8px;overflow:hidden}
.sync-banner .sb-prog i{display:block;height:100%;background:var(--paper);width:0;transition:width .4s linear}

/* Helfer */
.hr{height:1px;background:var(--line);margin:22px 0;border:none}
.mt8{margin-top:8px}.mt16{margin-top:16px}.mt24{margin-top:24px}
.center{text-align:center}