/* =====================================================================
   ServiceDesk — Design System v2 (Premium, Sidebar-App, Light + Dark)
   Akzent pro Firma via --sd-primary.
   ===================================================================== */

*,*::before,*::after{box-sizing:border-box}

:root{
  --sd-primary:#4f46e5;
  --sd-primary-2:#7c3aed;
  --sd-on-primary:#fff;

  --sd-bg:#eef1f6;
  --sd-bg-2:#e7ebf2;
  --sd-surface:#ffffff;
  --sd-surface-2:#f7f9fc;
  --sd-surface-3:#eef2f7;
  --sd-side:#0f1729;         /* dunkle Sidebar auch im Light-Mode = premium */
  --sd-side-ink:#c7d2e4;
  --sd-side-ink-2:#8797b3;
  --sd-ink:#0b1220;
  --sd-ink-2:#3a4658;
  --sd-muted:#6b7688;
  --sd-border:#e6ebf2;
  --sd-border-2:#dbe2ec;

  --sd-ok:#059669;--sd-ok-bg:#ecfdf5;--sd-ok-bd:#a7f3d0;
  --sd-err:#e11d48;--sd-err-bg:#fff1f2;--sd-err-bd:#fecdd3;
  --sd-warn:#b45309;--sd-warn-bg:#fffbeb;--sd-warn-bd:#fde68a;

  --sd-ring:color-mix(in srgb,var(--sd-primary) 35%,transparent);
  --r-sm:10px;--r-md:14px;--r-lg:18px;--r-xl:24px;
  --sh-1:0 1px 2px rgba(15,23,42,.05),0 1px 3px rgba(15,23,42,.05);
  --sh-2:0 4px 14px -6px rgba(15,23,42,.16),0 2px 6px -3px rgba(15,23,42,.08);
  --sh-3:0 24px 50px -22px rgba(15,23,42,.4),0 8px 22px -12px rgba(15,23,42,.2);
  --sh-glow:0 8px 24px -8px color-mix(in srgb,var(--sd-primary) 60%,transparent);
  --grad:linear-gradient(135deg,var(--sd-primary),var(--sd-primary-2));
  --sidew:250px;
}

@media (prefers-color-scheme: dark){
  :root{
    --sd-bg:#080c17;--sd-bg-2:#0b1120;
    --sd-surface:#0f1626;--sd-surface-2:#141d30;--sd-surface-3:#1b2740;
    --sd-side:#0b1120;--sd-side-ink:#c2cee2;--sd-side-ink-2:#7688a4;
    --sd-ink:#e8eefb;--sd-ink-2:#c2cee2;--sd-muted:#8695ad;
    --sd-border:#1e2a41;--sd-border-2:#28374f;
    --sd-ok-bg:#052e22;--sd-ok-bd:#0f5137;
    --sd-err-bg:#3a1220;--sd-err-bd:#7f1d33;
    --sd-warn-bg:#3a2a08;--sd-warn-bd:#78500f;
    --sh-1:0 1px 2px rgba(0,0,0,.5);
    --sh-2:0 8px 22px -10px rgba(0,0,0,.65);
    --sh-3:0 28px 60px -26px rgba(0,0,0,.8);
  }
}

html,body{margin:0;padding:0}
.sd-body{
  min-height:100vh;color:var(--sd-ink);background:var(--sd-bg);
  font-family:"Inter","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.55;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
a{color:inherit}
::selection{background:color-mix(in srgb,var(--sd-primary) 26%,transparent)}
img{max-width:100%}

/* ── Shell ──────────────────────────────────────────────── */
.sd-has-shell{display:flex}
.sd-sidebar{
  position:sticky;top:0;flex:0 0 var(--sidew);width:var(--sidew);height:100vh;
  background:var(--sd-side);color:var(--sd-side-ink);display:flex;flex-direction:column;
  padding:1.1rem .8rem;z-index:60;border-right:1px solid rgba(255,255,255,.05);
}
.sd-app{flex:1;min-width:0;display:flex;flex-direction:column;min-height:100vh}
.sd-main{flex:1;width:100%;max-width:1080px;margin:0 auto;padding:clamp(1.2rem,3vw,2.2rem) clamp(1rem,3vw,2rem) 4rem}
.sd-main--full{max-width:none;padding:0}
.sd-footer{text-align:center;color:var(--sd-muted);font-size:.75rem;padding:1.4rem;opacity:.8}

/* Brand */
.sd-brand{display:flex;align-items:center;gap:.65rem;text-decoration:none;color:#fff;font-weight:800;letter-spacing:-.02em;font-size:1.08rem;padding:.4rem .5rem 1.1rem}
.sd-brand-mark{display:inline-grid;place-items:center;width:34px;height:34px;border-radius:10px;background:var(--grad);color:#fff;font-size:.82rem;font-weight:900;box-shadow:var(--sh-glow);flex:none}
.sd-brand-txt{white-space:nowrap}

/* Sidebar nav */
.sd-side-nav{display:flex;flex-direction:column;gap:.15rem;flex:1;overflow-y:auto}
.sd-nav-item{display:flex;align-items:center;gap:.7rem;padding:.62rem .7rem;border-radius:11px;color:var(--sd-side-ink);text-decoration:none;font-weight:600;font-size:.92rem;position:relative;transition:background .15s,color .15s}
.sd-nav-item:hover{background:rgba(255,255,255,.06);color:#fff}
.sd-nav-item.active{background:color-mix(in srgb,var(--sd-primary) 26%,transparent);color:#fff}
.sd-nav-item.active::before{content:"";position:absolute;left:-.8rem;top:22%;bottom:22%;width:3px;border-radius:3px;background:var(--grad)}
.sd-nav-ic{display:inline-grid;place-items:center;width:20px;height:20px;flex:none}
.sd-nav-ic svg{width:19px;height:19px}
.sd-side-foot{border-top:1px solid rgba(255,255,255,.07);padding-top:.7rem;margin-top:.5rem;display:flex;align-items:center;gap:.5rem}
.sd-side-user{display:flex;align-items:center;gap:.55rem;flex:1;min-width:0}
.sd-side-who{font-size:.84rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sd-logout{display:inline-grid;place-items:center;width:36px;height:36px;border-radius:10px;color:var(--sd-side-ink-2);background:rgba(255,255,255,.05);text-decoration:none;flex:none;transition:.15s}
.sd-logout:hover{background:rgba(255,255,255,.12);color:#fff}

/* App bar (mobile) */
.sd-appbar{display:none;align-items:center;gap:.6rem;padding:.6rem 1rem;background:color-mix(in srgb,var(--sd-surface) 88%,transparent);backdrop-filter:blur(12px);position:sticky;top:0;z-index:40;border-bottom:1px solid var(--sd-border)}
.sd-appbar .sd-brand{color:var(--sd-ink);padding:0;font-size:1rem}
.sd-appbar .sd-brand-txt{color:var(--sd-ink)}
.sd-burger{display:grid;place-items:center;width:40px;height:40px;border:1px solid var(--sd-border);background:var(--sd-surface);border-radius:11px;color:var(--sd-ink);cursor:pointer}
.sd-scrim{display:none;position:fixed;inset:0;background:rgba(8,12,22,.5);backdrop-filter:blur(2px);z-index:55;border:none}

/* ── Headings / page ────────────────────────────────────── */
.sd-page{animation:sd-fade .35s ease both}
.sd-h1{font-size:clamp(1.5rem,3vw,1.9rem);font-weight:820;letter-spacing:-.03em;margin:.1rem 0 .15rem}
.sd-h2{font-size:1.08rem;font-weight:760;letter-spacing:-.015em;margin:0 0 .7rem}
.sd-muted{color:var(--sd-muted);font-size:.92rem;margin:.15rem 0 0}
.sd-page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-bottom:1.3rem}
.sd-count{font-size:.76rem;background:color-mix(in srgb,var(--sd-primary) 13%,transparent);color:var(--sd-primary);border-radius:999px;padding:.14rem .6rem;font-weight:800;vertical-align:middle;margin-left:.35rem}

.sd-section{margin-top:1.5rem;background:var(--sd-surface);border:1px solid var(--sd-border);border-radius:var(--r-lg);padding:1.25rem;box-shadow:var(--sh-1)}
.sd-section:first-of-type{margin-top:0}
.sd-soon{font-size:.66rem;font-weight:800;letter-spacing:.03em;text-transform:uppercase;color:var(--sd-muted);background:var(--sd-surface-3);border-radius:999px;padding:.14rem .5rem;margin-right:.4rem}
.sd-steps{margin:0;padding:0;list-style:none}
.sd-steps li{padding:.62rem .1rem;border-bottom:1px solid var(--sd-border);font-size:.93rem}
.sd-steps li:last-child{border-bottom:none}
.sd-steps a{color:var(--sd-primary);font-weight:700;text-decoration:none}
.sd-steps a:hover{text-decoration:underline}

/* ── Stat cards ─────────────────────────────────────────── */
.sd-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:1rem;margin-top:1.1rem}
.sd-card{position:relative;overflow:hidden;background:var(--sd-surface);border:1px solid var(--sd-border);border-radius:var(--r-lg);padding:1.2rem;text-decoration:none;color:inherit;box-shadow:var(--sh-1);transition:transform .16s,box-shadow .16s,border-color .16s}
.sd-card::after{content:"";position:absolute;top:-30px;right:-30px;width:110px;height:110px;border-radius:50%;background:var(--grad);opacity:.1}
a.sd-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:color-mix(in srgb,var(--sd-primary) 32%,var(--sd-border))}
.sd-card-ic{position:relative;display:inline-grid;place-items:center;width:40px;height:40px;border-radius:12px;background:color-mix(in srgb,var(--sd-primary) 13%,transparent);color:var(--sd-primary);margin-bottom:.75rem}
.sd-card-ic svg{width:21px;height:21px}
.sd-card-num{font-size:2.1rem;font-weight:850;letter-spacing:-.03em;line-height:1}
.sd-card-lbl{color:var(--sd-muted);font-weight:650;font-size:.85rem;margin-top:.35rem}

/* ── Auth ───────────────────────────────────────────────── */
.sd-auth{position:relative;min-height:100vh;display:grid;place-items:center;padding:1.2rem;overflow:hidden;background:var(--sd-bg)}
.sd-auth::before,.sd-auth::after{content:"";position:absolute;border-radius:50%;filter:blur(80px);opacity:.45;z-index:0}
.sd-auth::before{width:480px;height:480px;background:var(--sd-primary);top:-150px;left:-120px}
.sd-auth::after{width:440px;height:440px;background:var(--sd-primary-2);bottom:-160px;right:-110px}
.sd-auth-card{position:relative;z-index:1;width:100%;max-width:420px;background:color-mix(in srgb,var(--sd-surface) 92%,transparent);backdrop-filter:blur(18px);border:1px solid color-mix(in srgb,var(--sd-border) 70%,transparent);border-radius:var(--r-xl);box-shadow:var(--sh-3);padding:2.1rem 1.9rem;animation:sd-pop .45s cubic-bezier(.2,.8,.2,1) both}
.sd-auth-brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.05rem;margin-bottom:1.2rem}
.sd-auth-title{font-size:1.55rem;font-weight:840;letter-spacing:-.03em;margin:.2rem 0 .3rem}
.sd-auth-sub{color:var(--sd-muted);font-size:.92rem;margin:0 0 1.1rem}
.sd-auth-switch{text-align:center;font-size:.9rem;color:var(--sd-muted);margin-top:1.1rem}
.sd-auth-switch a{color:var(--sd-primary);font-weight:750;text-decoration:none}

/* ── Forms ──────────────────────────────────────────────── */
.sd-form{display:flex;flex-direction:column;gap:.25rem}
label{display:block;font-size:.8rem;font-weight:700;color:var(--sd-ink-2);margin:.55rem 0 .12rem}
.sd-input,.sd-form input,.sd-form select,.sd-form textarea{width:100%;padding:.72rem .85rem;border:1.5px solid var(--sd-border-2);border-radius:var(--r-sm);font-size:.95rem;font-family:inherit;background:var(--sd-surface);color:var(--sd-ink);transition:.15s}
.sd-input::placeholder{color:color-mix(in srgb,var(--sd-muted) 75%,transparent)}
.sd-input:focus,.sd-form input:focus,.sd-form select:focus,.sd-form textarea:focus{outline:none;border-color:var(--sd-primary);box-shadow:0 0 0 4px var(--sd-ring)}
textarea.sd-input{resize:vertical;min-height:64px}
select.sd-input{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7688' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .85rem center;padding-right:2.1rem}
.sd-grid2{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}

/* ── Buttons ────────────────────────────────────────────── */
.sd-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;padding:.66rem 1.1rem;border-radius:var(--r-sm);border:1px solid transparent;font-weight:750;font-size:.92rem;cursor:pointer;font-family:inherit;text-decoration:none;transition:transform .12s,box-shadow .16s,filter .16s,background .16s;white-space:nowrap}
.sd-btn:active{transform:translateY(1px)}
.sd-btn svg{width:17px;height:17px}
.sd-btn-primary{background:var(--grad);color:var(--sd-on-primary);box-shadow:var(--sh-glow)}
.sd-btn-primary:hover{filter:brightness(1.08)}
.sd-btn-ghost{background:var(--sd-surface);color:var(--sd-ink-2);border-color:var(--sd-border-2)}
.sd-btn-ghost:hover{background:var(--sd-surface-2);border-color:var(--sd-border)}
.sd-btn:disabled{opacity:.55;cursor:default;transform:none}
.sd-btn-block{width:100%;margin-top:1rem;padding:.82rem}
.sd-form .sd-btn-primary{margin-top:.9rem}

/* ── Alerts ─────────────────────────────────────────────── */
.sd-alert{position:relative;border-radius:var(--r-md);padding:.82rem .95rem .82rem 1.1rem;font-size:.9rem;margin-bottom:1rem;border:1px solid transparent}
.sd-alert::before{content:"";position:absolute;left:0;top:.55rem;bottom:.55rem;width:4px;border-radius:4px}
.sd-alert-err{background:var(--sd-err-bg);border-color:var(--sd-err-bd);color:#be123c}
.sd-alert-err::before{background:var(--sd-err)}
.sd-alert-ok{background:var(--sd-ok-bg);border-color:var(--sd-ok-bd);color:#047857}
.sd-alert-ok::before{background:var(--sd-ok)}
@media (prefers-color-scheme: dark){.sd-alert-err{color:#fda4af}.sd-alert-ok{color:#6ee7b7}}
.sd-msg{font-size:.82rem;align-self:center}

/* ── Toolbar / Editor ───────────────────────────────────── */
.sd-toolbar{margin-bottom:1rem}
.sd-editor{background:var(--sd-surface-2);border:1px solid var(--sd-border);border-radius:var(--r-md);padding:1.1rem;margin-bottom:1.1rem;animation:sd-fade .25s ease both}
.sd-editor-actions{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;margin-top:.9rem}

/* ── Lists ──────────────────────────────────────────────── */
.sd-list{background:var(--sd-surface);border:1px solid var(--sd-border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-1)}
.sd-row{display:flex;align-items:center;gap:.85rem;padding:.85rem 1rem;border-bottom:1px solid var(--sd-border);transition:background .14s;animation:sd-fade .3s ease both}
.sd-row:last-child{border-bottom:none}
.sd-row:hover{background:var(--sd-surface-2)}
.sd-ava{flex:none;width:42px;height:42px;border-radius:13px;display:grid;place-items:center;font-weight:800;font-size:.86rem;color:#fff;letter-spacing:-.02em;box-shadow:var(--sh-1)}
.sd-ava--sm{width:32px;height:32px;border-radius:9px;font-size:.72rem;background:var(--grad)}
.sd-row-main{flex:1;min-width:0}
.sd-row-name{font-weight:750;font-size:.96rem;letter-spacing:-.01em;display:flex;align-items:center;gap:.45rem;flex-wrap:wrap}
.sd-row-sub{font-size:.8rem;color:var(--sd-muted);margin-top:.12rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sd-row-meta{font-size:.74rem;color:var(--sd-muted);display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.2rem}
.sd-row-actions{display:flex;gap:.4rem;white-space:nowrap;align-items:center}
.sd-chip{border:none;cursor:pointer;border-radius:999px;padding:.34rem .72rem;font-size:.78rem;font-weight:750;transition:.14s;font-family:inherit;line-height:1}
.sd-chip:hover{filter:brightness(.97)}
.sd-chip-edit{background:color-mix(in srgb,var(--sd-primary) 12%,transparent);color:var(--sd-primary)}
.sd-chip-del{background:var(--sd-err-bg);color:var(--sd-err);border:1px solid var(--sd-err-bd)}
.sd-chip-tenant{background:color-mix(in srgb,var(--sd-primary) 12%,transparent);color:var(--sd-primary)}
.sd-chip-users{background:var(--sd-warn-bg);color:var(--sd-warn);border:1px solid var(--sd-warn-bd)}
.sd-empty{padding:2.6rem 1.2rem;text-align:center;color:var(--sd-muted);font-size:.92rem}

/* ── Badges / subtabs ───────────────────────────────────── */
.sd-subtabs{display:flex;gap:.2rem;border-bottom:1px solid var(--sd-border);margin-bottom:.5rem}
.sd-subtab{background:none;border:none;padding:.55rem .95rem;font-weight:750;color:var(--sd-muted);cursor:pointer;border-bottom:2px solid transparent;font-family:inherit;font-size:.9rem;transition:.14s}
.sd-subtab:hover{color:var(--sd-ink)}
.sd-subtab.active{color:var(--sd-primary);border-bottom-color:var(--sd-primary)}
.sd-badge{font-size:.72rem;font-weight:800;border-radius:999px;padding:.2rem .6rem;cursor:pointer;border:1px solid transparent;font-family:inherit;transition:.14s}
.sd-badge-on{background:var(--sd-ok-bg);color:#047857;border-color:var(--sd-ok-bd)}
.sd-badge-off{background:var(--sd-err-bg);color:#be123c;border-color:var(--sd-err-bd)}
@media (prefers-color-scheme: dark){.sd-badge-on{color:#6ee7b7}.sd-badge-off{color:#fda4af}}
.sd-role-select{padding:.35rem 1.7rem .35rem .6rem;border:1px solid var(--sd-border-2);border-radius:999px;font-size:.8rem;font-family:inherit;background:var(--sd-surface);color:var(--sd-ink);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7688' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right .6rem center}
.sd-admintag{font-size:.66rem;font-weight:800;background:var(--sd-ink);color:var(--sd-surface);border-radius:999px;padding:.1rem .5rem}

/* ── Wizard ─────────────────────────────────────────────── */
.sd-stepper{display:flex;gap:.4rem;margin:0 0 1.3rem;flex-wrap:wrap}
.sd-step{display:flex;align-items:center;gap:.5rem;padding:.42rem .85rem .42rem .45rem;border-radius:999px;background:var(--sd-surface);border:1px solid var(--sd-border);color:var(--sd-muted);font-weight:700;font-size:.84rem;box-shadow:var(--sh-1)}
.sd-step-num{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--sd-surface-3);color:var(--sd-muted);font-size:.78rem;font-weight:800;transition:.2s}
.sd-step.active{color:var(--sd-primary);border-color:color-mix(in srgb,var(--sd-primary) 40%,var(--sd-border))}
.sd-step.active .sd-step-num{background:var(--grad);color:#fff;box-shadow:var(--sh-glow)}
.sd-step.done .sd-step-num{background:var(--sd-ok);color:#fff;font-size:0}
.sd-step.done .sd-step-num::after{content:"✓";font-size:.8rem}
.sd-wz-step{display:none}
.sd-wz-step.active{display:block;animation:sd-fade .3s ease both}
.sd-wz-nav{display:flex;justify-content:space-between;align-items:center;gap:.6rem;margin-top:1.1rem;flex-wrap:wrap}
.sd-seg{display:inline-flex;background:var(--sd-surface-3);border-radius:999px;padding:.25rem;gap:.2rem}
.sd-seg-btn{border:none;background:none;padding:.5rem 1rem;border-radius:999px;font-weight:700;font-size:.86rem;color:var(--sd-muted);cursor:pointer;font-family:inherit;transition:.16s}
.sd-seg-btn.active{background:var(--sd-surface);color:var(--sd-primary);box-shadow:var(--sh-1)}
.sd-line{display:flex;gap:.5rem;margin-top:.5rem;align-items:center;flex-wrap:wrap}
.sd-line .sd-input{flex:1;min-width:90px}
.sd-line-x{flex:none;width:36px;height:40px;border:1px solid var(--sd-border-2);background:var(--sd-surface);color:var(--sd-muted);border-radius:10px;cursor:pointer;font-size:.9rem}
.sd-line-x:hover{background:var(--sd-err-bg);color:var(--sd-err);border-color:var(--sd-err-bd)}
.sd-pos-row .sd-pos-date{max-width:150px;flex:none}
.sd-pos-row .sd-pos-from,.sd-pos-row .sd-pos-to{max-width:112px;flex:none}
.sd-total-bar{display:flex;justify-content:space-between;align-items:center;margin-top:1.1rem;padding:1rem 1.25rem;border-radius:var(--r-lg);background:var(--grad);color:#fff;box-shadow:var(--sh-glow);font-weight:700}
.sd-total-bar strong{font-size:1.45rem;letter-spacing:-.02em}
.sd-sig-block{border:1px solid var(--sd-border);border-radius:var(--r-md);overflow:hidden;background:var(--sd-surface)}
.sd-sig-head{display:flex;justify-content:space-between;align-items:center;padding:.55rem .85rem;background:var(--sd-surface-2);font-weight:700;font-size:.88rem;border-bottom:1px solid var(--sd-border)}
.sd-sig-pad{display:block;width:100%;height:170px;background:#fff;touch-action:none;cursor:crosshair}
.sd-summary{display:flex;flex-direction:column}
.sd-sum-row{display:flex;justify-content:space-between;padding:.6rem .1rem;border-bottom:1px solid var(--sd-border);font-size:.92rem}
.sd-sum-row:last-child{border-bottom:none}

/* Autocomplete */
.sd-suggest{position:absolute;left:0;right:0;top:100%;z-index:70;background:var(--sd-surface);border:1.5px solid var(--sd-border-2);border-radius:12px;box-shadow:var(--sh-3);margin-top:5px;max-height:280px;overflow:auto}
.sd-suggest-item{padding:.62rem .85rem;cursor:pointer;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--sd-border)}
.sd-suggest-item:last-child{border-bottom:none}
.sd-suggest-item:hover{background:var(--sd-surface-2)}
.sd-suggest-name{font-weight:700;font-size:.92rem}
.sd-suggest-sub{font-size:.77rem;color:var(--sd-muted)}

/* ── Modal + Dokument ───────────────────────────────────── */
.sd-modal{position:fixed;inset:0;z-index:100;background:rgba(8,12,22,.55);backdrop-filter:blur(4px);display:flex;align-items:flex-start;justify-content:center;padding:2rem 1rem;overflow:auto}
.sd-modal-card{position:relative;width:100%;max-width:740px;background:var(--sd-surface);border-radius:var(--r-lg);box-shadow:var(--sh-3);padding:1.7rem;animation:sd-pop .35s cubic-bezier(.2,.8,.2,1) both}
.sd-modal-x{position:absolute;top:.8rem;right:.8rem;width:34px;height:34px;border-radius:50%;border:1px solid var(--sd-border);background:var(--sd-surface-2);color:var(--sd-muted);cursor:pointer;font-size:.9rem}
.sd-doc-head{display:flex;justify-content:space-between;align-items:flex-start;border-bottom:2px solid var(--sd-border);padding-bottom:.85rem;margin-bottom:1rem}
.sd-doc-title{font-size:1.35rem;font-weight:820;letter-spacing:-.02em}
.sd-doc-num{color:var(--sd-muted);font-weight:700;font-size:.9rem}
.sd-doc-status{font-size:.74rem;font-weight:800;background:color-mix(in srgb,var(--sd-primary) 13%,transparent);color:var(--sd-primary);border-radius:999px;padding:.28rem .75rem}
.sd-doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1rem;font-size:.9rem}
.sd-doc-lbl{font-size:.7rem;text-transform:uppercase;letter-spacing:.05em;color:var(--sd-muted);font-weight:800;margin-bottom:.18rem}
.sd-doc-tbl{width:100%;border-collapse:collapse;font-size:.86rem;margin-top:.2rem}
.sd-doc-tbl th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.04em;color:var(--sd-muted);padding:.35rem .45rem;border-bottom:1px solid var(--sd-border)}
.sd-doc-tbl td{padding:.42rem .45rem;border-bottom:1px solid var(--sd-border)}
.sd-doc-totals{margin-top:1rem;margin-left:auto;width:min(280px,100%)}
.sd-doc-trow{display:flex;justify-content:space-between;padding:.35rem .2rem;font-size:.9rem}
.sd-doc-trow.grand{border-top:2px solid var(--sd-border);margin-top:.2rem;padding-top:.6rem;font-weight:800;font-size:1.05rem}
.sd-doc-trow.grand strong{color:var(--sd-primary)}
.sd-doc-sigs{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.3rem}
.sd-doc-sigs img{width:100%;height:88px;object-fit:contain;background:#fff;border:1px solid var(--sd-border);border-radius:10px}
.sd-doc-sigempty{height:88px;display:grid;place-items:center;color:var(--sd-muted);border:1px dashed var(--sd-border);border-radius:10px}
.sd-doc-note{margin-top:1rem;padding:.7rem .9rem;background:var(--sd-warn-bg);border:1px solid var(--sd-warn-bd);border-radius:10px;font-size:.85rem;color:var(--sd-warn)}
.sd-doc-actions{display:flex;justify-content:flex-end;gap:.55rem;margin-top:1.3rem;flex-wrap:wrap}

/* ── Öffentliche Seite ──────────────────────────────────── */
.sd-public{max-width:600px;margin:0 auto;padding:1.5rem 1rem 3rem}
.sd-public-head{display:flex;align-items:center;gap:.9rem;padding:.5rem 0 1.3rem}
.sd-public-logo{height:48px;width:auto;max-width:180px;object-fit:contain}
.sd-public-firma{font-size:1.35rem;font-weight:820;letter-spacing:-.02em}
.sd-public-sub{color:var(--sd-muted);font-size:.88rem}
.sd-public-foot{text-align:center;color:var(--sd-muted);font-size:.75rem;padding:1.4rem 0}

/* ── Animations ─────────────────────────────────────────── */
@keyframes sd-fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@keyframes sd-pop{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion: reduce){*{animation:none!important;transition:none!important}}

/* ── Responsive ─────────────────────────────────────────── */
@media(max-width:900px){
  .sd-sidebar{position:fixed;left:0;top:0;transform:translateX(-100%);transition:transform .25s ease;box-shadow:var(--sh-3)}
  .sd-nav-open .sd-sidebar{transform:none}
  .sd-nav-open .sd-scrim{display:block}
  .sd-appbar{display:flex}
}
@media(max-width:620px){
  .sd-grid2{grid-template-columns:1fr}
  .sd-doc-grid,.sd-doc-sigs{grid-template-columns:1fr}
  .sd-step-lbl{display:none}
  .sd-step{padding:.42rem}
  .sd-row{padding:.75rem .8rem;gap:.65rem}
  .sd-ava{width:38px;height:38px}
  .sd-main{padding:1rem .9rem 3rem}
}

/* ── Print ──────────────────────────────────────────────── */
@media print{
  .sd-sidebar,.sd-appbar,.sd-footer,.sd-noprint{display:none!important}
  .sd-app{min-height:0}
  body,.sd-body{background:#fff!important}
  .sd-modal{position:static;background:none;backdrop-filter:none;padding:0;display:block!important}
  .sd-modal-card{box-shadow:none;max-width:none;padding:0;animation:none}
}