:root{
  --navy:#10193a; --navy2:#1b2a6b; --gold:#f0b429; --gold-dark:#b8860b;
  --ink:#1a2233; --muted:#667085; --line:#e4e7ec; --bg:#f5f7fb; --card:#fff;
  --ok:#127a3a; --ok-bg:#e7f6ec; --err:#b42318; --err-bg:#fdeceb;
  --radius:14px; --shadow:0 1px 3px rgba(16,25,58,.08),0 8px 24px rgba(16,25,58,.06);
  --maxw:920px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  color:var(--ink);background:var(--bg);line-height:1.5;-webkit-font-smoothing:antialiased}
a{color:var(--navy2);text-decoration:none}
h1,h2,h3{line-height:1.2;color:var(--navy)}
h1{font-size:1.7rem;margin:.2em 0 .4em}
h2{font-size:1.25rem;margin:1.2em 0 .5em}
p{margin:.4em 0}
small,.muted{color:var(--muted)}
code{background:#eef1f7;padding:.1em .4em;border-radius:6px;font-size:.86em;word-break:break-all}

/* layout */
.wrap{max-width:var(--maxw);margin:0 auto;padding:22px 18px 60px}
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;
  gap:12px;padding:12px 18px;background:rgba(16,25,58,.96);backdrop-filter:blur(6px);color:#fff}
.brand{display:flex;align-items:center;gap:9px;color:#fff;font-weight:700;letter-spacing:.2px}
.brand .logo{filter:drop-shadow(0 1px 1px rgba(0,0,0,.3))}
.topnav{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.topnav a{color:#cdd6f0;font-size:.9rem;padding:6px 10px;border-radius:8px}
.topnav a:hover{background:rgba(255,255,255,.1);color:#fff}
.topnav a.cta{background:var(--gold);color:var(--navy);font-weight:700}

/* cards */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:20px;box-shadow:var(--shadow);margin:14px 0}
.card.pad-lg{padding:28px}
.grid{display:grid;gap:14px}
.grid.cols-2{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.grid.cols-3{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:8px;justify-content:center;cursor:pointer;
  border:1px solid transparent;border-radius:10px;padding:11px 16px;font-size:1rem;font-weight:600;
  background:var(--navy2);color:#fff;transition:.15s;text-decoration:none}
.btn:hover{filter:brightness(1.08)}
.btn:active{transform:translateY(1px)}
.btn.gold{background:var(--gold);color:var(--navy)}
.btn.ghost{background:#fff;color:var(--navy2);border-color:var(--line)}
.btn.danger{background:var(--err)}
.btn.block{width:100%}
.btn.sm{padding:7px 12px;font-size:.88rem}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.btn-row{display:flex;gap:10px;flex-wrap:wrap}

/* forms */
label{display:block;font-weight:600;font-size:.9rem;margin:12px 0 5px;color:var(--ink)}
input,select,textarea{width:100%;padding:11px 12px;border:1px solid var(--line);border-radius:10px;
  font-size:1rem;background:#fff;font-family:inherit}
input:focus,select:focus,textarea:focus{outline:2px solid var(--navy2);outline-offset:1px;border-color:var(--navy2)}
.field-row{display:grid;gap:10px;grid-template-columns:1fr 1fr}
.choice{display:flex;gap:10px;margin:6px 0}
.choice label{flex:1;border:1px solid var(--line);border-radius:10px;padding:12px;margin:0;cursor:pointer;
  display:flex;gap:8px;align-items:center;font-weight:500}
.choice input{width:auto}
.choice label:has(input:checked){border-color:var(--navy2);background:#eef2fd;box-shadow:0 0 0 1px var(--navy2)}

/* flash */
.flash{padding:11px 14px;border-radius:10px;margin:10px 0;font-weight:500}
.flash-error{background:var(--err-bg);color:var(--err)}
.flash-ok{background:var(--ok-bg);color:var(--ok)}

/* badges / pills */
.badge{display:inline-block;padding:3px 10px;border-radius:999px;font-size:.78rem;font-weight:700}
.b-eingegangen{background:#eef2fd;color:var(--navy2)}
.b-gedruckt{background:#fff5e0;color:var(--gold-dark)}
.b-zugestellt{background:var(--ok-bg);color:var(--ok)}
.b-streit{background:var(--err-bg);color:var(--err)}
.pill{display:inline-flex;align-items:center;gap:6px;background:#eef2fd;color:var(--navy2);
  padding:4px 10px;border-radius:999px;font-size:.8rem;font-weight:600}

/* tables / lists */
.list{display:flex;flex-direction:column;gap:10px}
.row-item{display:flex;align-items:center;justify-content:space-between;gap:12px;
  border:1px solid var(--line);border-radius:12px;padding:14px;background:#fff}
.row-item:hover{border-color:var(--navy2)}
.row-main{min-width:0}
.row-main .ttl{font-weight:700;color:var(--navy)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;font-size:.92rem;margin:8px 0}
.kv dt{color:var(--muted)}
.kv dd{margin:0;word-break:break-word}

/* hero */
.hero{background:linear-gradient(150deg,var(--navy),var(--navy2));color:#fff;border-radius:18px;
  padding:34px 28px;box-shadow:var(--shadow)}
.hero h1{color:#fff;font-size:2rem}
.hero .claim{color:var(--gold);font-weight:700;letter-spacing:.5px;text-transform:uppercase;font-size:.8rem}
.hero p{color:#dfe5f5;max-width:48ch}

/* proof chain */
.proof{border-left:3px solid var(--gold);padding-left:16px;margin:8px 0}
.proof .step{margin:12px 0}
.proof .step b{color:var(--navy)}
.hash{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;color:var(--muted);word-break:break-all}
.locked{filter:blur(5px);user-select:none;color:var(--muted)}

/* steps */
.steps{counter-reset:s;display:flex;flex-direction:column;gap:10px}
.step-card{display:flex;gap:12px;align-items:flex-start}
.step-card .num{flex:none;width:30px;height:30px;border-radius:50%;background:var(--navy2);color:#fff;
  display:grid;place-items:center;font-weight:700}

/* scan thumbs */
.thumbs{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.thumb{position:relative;width:104px;height:140px;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#fff}
.thumb img{width:100%;height:100%;object-fit:cover}
.thumb .x{position:absolute;top:4px;right:4px;background:rgba(0,0,0,.6);color:#fff;border:none;
  width:22px;height:22px;border-radius:50%;cursor:pointer;font-size:.8rem}
.thumb .n{position:absolute;bottom:0;left:0;right:0;background:rgba(16,25,58,.8);color:#fff;font-size:.72rem;text-align:center}

/* envelope (print) */
.envelope{width:220mm;max-width:100%;aspect-ratio:220/110;border:1px solid #ccc;border-radius:6px;
  padding:14mm;display:flex;flex-direction:column;justify-content:space-between;background:#fff;margin:auto}
.env-from{font-size:.8rem;color:#555}
.env-to{font-size:1.1rem;line-height:1.6}
.env-foot{display:flex;justify-content:space-between;align-items:flex-end}
.env-qr img{width:30mm;height:30mm}

/* signature pad */
.sigpad{border:2px dashed var(--line);border-radius:12px;background:#fff;touch-action:none;width:100%;height:170px}

/* phone frame (App-Ansicht) */
.is-app{background:#0a0f24}
.phone{max-width:412px;margin:18px auto;background:var(--bg);min-height:86vh;border-radius:34px;
  overflow:hidden;position:relative;box-shadow:0 0 0 10px #0a0f24,0 24px 60px rgba(0,0,0,.5);padding-bottom:64px}
.phone .topbar{border-radius:0}
.phone-notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:140px;height:22px;
  background:#0a0f24;border-radius:0 0 16px 16px;z-index:30}
.phone .wrap{padding:16px 14px 30px}
.tabbar{position:absolute;bottom:0;left:0;right:0;display:flex;justify-content:space-around;
  background:#fff;border-top:1px solid var(--line);padding:8px 0 12px}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;font-size:.7rem;color:var(--muted)}
.tabbar a.active{color:var(--navy2)}
.tabbar svg{width:22px;height:22px}

/* view switch banner */
.viewswitch{display:flex;gap:8px;align-items:center;justify-content:center;background:#0a0f24;color:#cdd6f0;
  font-size:.82rem;padding:7px}
.viewswitch a{color:var(--gold);font-weight:600}

.note{background:#fff8e6;border:1px solid #f3dca0;border-radius:10px;padding:12px 14px;font-size:.9rem;color:#6b5418}
.lock-tag{display:inline-flex;gap:6px;align-items:center;background:#eef2fd;color:var(--navy2);
  padding:5px 10px;border-radius:8px;font-size:.82rem;font-weight:600}

@media (max-width:540px){.field-row{grid-template-columns:1fr}.hero h1{font-size:1.6rem}}

@media print{
  .topbar,.topnav,.viewswitch,.tabbar,.no-print{display:none!important}
  body{background:#fff}.wrap{padding:0;max-width:none}.card{box-shadow:none;border:none}
}