:root{
  --dunkelbraun:#4A2E1A; --waldbraun:#7A4F35; --hellbraun:#B08060;
  --beige-warm:#C8B49A; --beige-hell:#E2D5C3; --creme:#F5EFE6;
  --salbei-dunkel:#5A6E52; --salbei:#7D9470; --salbei-hell:#A8BBA0;
  --weiss:#FFFFFF; --schwarz:#000000;
  --radius:14px; --shadow:0 2px 14px rgba(74,46,26,.12);
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--creme); color:var(--dunkelbraun);
  display:flex; flex-direction:column; min-height:100vh; line-height:1.5;
}
body.no-overscroll{overscroll-behavior:none}

/* Kopf / Navigation */
.topbar{
  background:var(--salbei-dunkel); color:var(--creme);
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:12px 16px; padding-top:max(12px,env(safe-area-inset-top));
}
.logo{height:40px; width:auto; background:var(--creme); border-radius:8px; padding:4px}
.topbar-empty{min-height:64px}
.navlink{margin-left:auto; color:var(--creme); text-decoration:none; font-weight:600; padding:6px 10px; border-radius:8px}
.navlink + .navlink{margin-left:8px}
.navlink:hover{background:rgba(255,255,255,.15)}

/* Layout */
.wrap{width:100%; max-width:860px; margin:0 auto; padding:16px; flex:1}
.card{background:var(--weiss); border-radius:var(--radius); box-shadow:var(--shadow); padding:20px; margin-bottom:18px}
.login{max-width:420px; margin:0 auto}
.login-logo{display:block; width:min(320px,72%); height:auto; margin:3.5vh auto}
@media (max-width:620px){ .login-logo{margin:2.5vh auto; width:min(260px,80%)} }
h1{font-size:1.4rem; margin:.2em 0 .4em} h2{font-size:1.15rem; margin:.2em 0 .4em}
.muted{color:var(--waldbraun); font-size:.92rem}
.muted.inset{padding:12px 16px}
.hint{color:var(--salbei-dunkel); font-size:.85rem; margin:.5em 0 0}
.head-row{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}

/* Formularfelder */
label{display:block; font-weight:600; margin:14px 0 6px}
input[type=text],input[type=password]{
  width:100%; padding:13px 14px; font-size:1rem; border:1.5px solid var(--beige-warm);
  border-radius:10px; background:var(--creme); color:var(--dunkelbraun);
}
input:focus{outline:none; border-color:var(--salbei); box-shadow:0 0 0 3px var(--salbei-hell)}
.row{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end}
.col{flex:1; min-width:140px}
.row .btn.primary{width:auto; margin-top:0; padding:13px 18px}

/* Buttons */
.btn{
  display:inline-block; border:none; cursor:pointer; text-decoration:none; text-align:center;
  background:var(--beige-hell); color:var(--dunkelbraun); font-weight:600;
  padding:11px 16px; border-radius:10px; font-size:.95rem;
}
.btn:hover{filter:brightness(.97)}
.btn.primary{background:var(--salbei-dunkel); color:var(--creme); width:100%; margin-top:20px; padding:14px}
.btn.primary:disabled{background:var(--beige-warm); color:var(--waldbraun); cursor:not-allowed}
.btn:disabled{opacity:.55; cursor:not-allowed}
.btn.small{padding:8px 12px; font-size:.85rem}
.btn.danger{background:#9b3b2f; color:#fff}
.btn.danger:hover{background:#84301f}

/* Flash */
.flash{padding:12px 14px; border-radius:10px; margin-bottom:14px; font-weight:500}
.flash.success{background:var(--salbei-hell); color:var(--salbei-dunkel)}
.flash.error{background:#f3d9d4; color:#84301f}

/* Kunden / Unterschriften (Backend) */
details.person{border:1.5px solid var(--beige-hell); border-radius:12px; margin-top:12px; overflow:hidden}
details.person summary{
  list-style:none; cursor:pointer; padding:14px 16px; background:var(--beige-hell);
  display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap;
}
details.person summary::-webkit-details-marker{display:none}
.pname{font-weight:700} .pmeta{color:var(--waldbraun); font-size:.85rem}
.person-actions{display:flex; gap:10px; flex-wrap:wrap; padding:12px 16px 0}
.person-actions form{margin:0}

.linkrow{display:flex; gap:8px; padding:12px 16px 0; align-items:center}
.linkrow input{flex:1; min-width:0; font-size:.85rem; padding:10px 12px}
.linkrow .btn{flex:none; white-space:nowrap}

table.files{width:100%; border-collapse:collapse; margin-top:10px}
table.files th{text-align:left; font-size:.78rem; text-transform:uppercase; color:var(--waldbraun); padding:8px 16px; border-bottom:1px solid var(--beige-hell)}
table.files td{padding:10px 16px; border-bottom:1px solid var(--beige-hell); vertical-align:middle}
td.actions{display:flex; gap:8px; flex-wrap:wrap} td.actions form{margin:0}
.sig-mini{display:block; max-height:48px; max-width:160px; width:auto; background:var(--creme); border:1px solid var(--beige-hell); border-radius:8px; padding:4px}

.foot{text-align:center; color:var(--waldbraun); font-size:.8rem; padding:16px; padding-bottom:max(16px,env(safe-area-inset-bottom))}

/* Kundenseite: Unterschriften-Galerie */
.sig-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:14px; margin-bottom:18px}
.sig-card{background:var(--weiss); border-radius:12px; box-shadow:var(--shadow); padding:10px; display:flex; flex-direction:column; gap:8px}
.sig-thumb{background:var(--creme); border:1px solid var(--beige-hell); border-radius:8px; height:96px; display:flex; align-items:center; justify-content:center; overflow:hidden}
.sig-thumb img{max-width:92%; max-height:88%; object-fit:contain}
.sig-row{display:flex; align-items:center; justify-content:space-between; gap:8px}
.sig-row form{margin:0}
.sig-name{font-weight:600; font-size:.9rem; overflow-wrap:anywhere}
.empty-state{text-align:center; padding:34px 20px}
.empty-state p:first-child{font-weight:600; font-size:1.05rem; margin:0 0 .3em}

/* Floating-Action-Button "+" */
.fab{
  position:fixed; right:20px; bottom:max(20px,env(safe-area-inset-bottom));
  width:62px; height:62px; border-radius:50%;
  background:var(--salbei-dunkel); color:var(--creme);
  font-size:2.2rem; line-height:60px; text-align:center; text-decoration:none;
  box-shadow:0 4px 16px rgba(74,46,26,.35); font-weight:600;
}
.fab:hover{background:var(--salbei)}

/* Zeichenseite */
.pen-bar{display:flex; gap:8px; margin-top:16px; overflow-x:auto; padding-bottom:4px; -webkit-overflow-scrolling:touch}
.pen-btn{
  flex:1 0 auto; min-width:84px; min-height:56px; border:1.5px solid var(--beige-warm);
  background:var(--creme); color:var(--dunkelbraun); border-radius:10px; cursor:pointer;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  font-size:.78rem; font-weight:600; padding:6px 8px;
  touch-action:manipulation; -webkit-tap-highlight-color:transparent;
}
.pen-btn .pen-sample{display:block; pointer-events:none}
.pen-btn.active{background:var(--salbei-dunkel); border-color:var(--salbei-dunkel); color:var(--creme)}

.canvas-wrap{
  position:relative; margin:14px 28px 0; background:var(--weiss);
  border:1.5px solid var(--beige-warm); border-radius:10px; overflow:hidden;
  aspect-ratio:16/9; max-height:440px; min-height:190px;
  background-image:linear-gradient(to top, transparent 24%, var(--beige-hell) 24%, var(--beige-hell) calc(24% + 1.5px), transparent calc(24% + 1.5px));
}
.canvas-wrap canvas{
  position:absolute; inset:0; width:100%; height:100%;
  touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none;
  cursor:crosshair;
}

.toolbar{display:flex; gap:10px; margin-top:16px}
.toolbar .btn{flex:0 0 auto}
.toolbar .btn.primary.save{flex:1; width:auto; margin-top:0; padding:12px}

/* Mobile: Tabelle als Karten */
@media (max-width:620px){
  table.files,table.files tbody,table.files tr,table.files td{display:block; width:100%}
  table.files thead{display:none}
  table.files tr{border:1px solid var(--beige-hell); border-radius:10px; margin:10px 16px; padding:6px 0}
  table.files td{border:none; padding:6px 14px}
  table.files td[data-l]::before{content:attr(data-l) ": "; font-weight:700; color:var(--waldbraun)}
  table.files td.preview::before{content:""}
  td.actions{padding-top:10px}
  .sig-mini{max-width:100%}
  .canvas-wrap{aspect-ratio:auto; height:52vh; max-height:none}
}