/* Unterschriftsfeld (lib/sigpad-ui.js) – CRM und Unterschriftsseite. Das Feld bleibt immer „Papier“ (weiß), auch im Dunkelmodus. */
.sp { display: flex; flex-direction: column; gap: 8px; }
.sp-area { position: relative; height: clamp(180px, 36vh, 280px); border-radius: 14px; background: #fff; border: 1.5px solid #cfd5e3;
  box-shadow: inset 0 1px 3px rgba(20, 33, 58, .06); overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.sp-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: crosshair; z-index: 2; touch-action: none; }
.sp-line { position: absolute; left: 22px; right: 22px; bottom: 27%; border-bottom: 1.5px solid #c6ccda; z-index: 1; pointer-events: none; }
.sp-line span { position: absolute; left: -4px; bottom: 3px; font: 400 24px/1 Georgia, serif; color: #9aa3b8; }
.sp-line em { position: absolute; right: 0; top: 7px; font: normal 12.5px/1 system-ui, sans-serif; color: #9aa3b8; }
.sp-hint { position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: 18%; color: #a3abbe; font: 15px/1.3 system-ui, sans-serif; pointer-events: none; z-index: 1; text-align: center; }
.sp-tools { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.sp-btn { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 10px; border: 1px solid #d6dbe6; background: #fff; color: #1d2230;
  font: inherit; font-size: 14px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.sp-btn:disabled { opacity: .45; cursor: default; }
.sp-btn:not(:disabled):active { transform: translateY(1px); }
.sp-done { background: #2457C5; color: #fff; border-color: #2457C5; font-weight: 600; }
.sp-sp { flex: 1; }
.sp-full { position: fixed; inset: 0; z-index: 1000; background: #eef1f6; color: #16202C;
  padding: calc(10px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left)); }
.sp-full .sp-area { flex: 1; height: auto; }
.sp-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 0 2px; }
.sp-rot { font-size: 12.5px; color: #69708a; }
@media (orientation: landscape) { .sp-rot { display: none; } }
@media (max-width: 420px) { .sp-btn span { font-size: 13.5px; } .sp-btn { padding: 0 10px; } }
html.sp-lock, html.sp-lock body { overflow: hidden; overscroll-behavior: none; }