* { box-sizing: border-box; }
body { font-family: Arial, Helvetica, sans-serif; margin: 0; color: #1c2733; background: #f3f5f8; }
a { color: #005aa0; }
.nav { background: #0b2440; color: #fff; padding: 10px 16px; display: flex; align-items: center; gap: 14px; }
.nav a { color: #cfe0f2; text-decoration: none; }
.nav a:hover { color: #fff; text-decoration: underline; }
.nav .sp { flex: 1; }
main { max-width: 980px; margin: 22px auto; padding: 0 16px; }
h1 { font-size: 22px; }
.card { background: #fff; padding: 18px; border-radius: 8px; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
label { display: block; margin: 8px 0; font-size: 13px; color: #44525f; }
label input, label select { display: block; width: 100%; padding: 7px 8px; font-size: 14px; border: 1px solid #c4cdd6; border-radius: 5px; margin-top: 3px; }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
button, .btn { background: #005aa0; color: #fff; border: 0; padding: 8px 14px; border-radius: 5px; cursor: pointer; font-size: 14px; text-decoration: none; display: inline-block; }
button:hover, .btn:hover { background: #00467d; }
.btn.green { background: #008c46; } .btn.green:hover { background: #006e37; }
table { width: 100%; border-collapse: collapse; background: #fff; }
table.list, table.pos { border-radius: 8px; overflow: hidden; box-shadow: 0 1px 4px rgba(0,0,0,.08); }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid #e6eaef; font-size: 14px; }
th { background: #eef2f6; }
td.r, .r { text-align: right; }
.paid { color: #008c46; font-weight: bold; } .open { color: #b06a00; }
.total { font-weight: bold; font-size: 16px; }
.filter { margin: 14px 0; background:#fff; padding:12px; border-radius:8px; }
.inline { display: flex; gap: 4px; }
.inline input { padding: 4px; }
.login { max-width: 320px; margin: 80px auto; background: #fff; padding: 26px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,.12); }
.err { color: #c0392b; } .ok { color: #008c46; }
.pos input { width: 100%; padding: 5px; border: 1px solid #c4cdd6; border-radius: 4px; }
.del { background: #c0392b; padding: 4px 9px; }
#addrow { margin-top: 8px; background:#4a5a6a; }
.posbel { border:1px solid #e0e6ec; border-radius:6px; padding:10px 12px; margin:10px 0; }
.posbel h4 { margin:0 0 6px; }
ul.bel { list-style:none; padding:0; margin:0 0 8px; }
ul.bel li { display:flex; align-items:center; gap:8px; padding:3px 0; }
.muted { color:#8893a0; font-size:13px; }
h2 { font-size:18px; }
.gallery { display:flex; flex-wrap:wrap; gap:10px; margin:6px 0 10px; }
.thumb { width:120px; border:1px solid #dce2e8; border-radius:6px; padding:6px; text-align:center; background:#fafbfc; }
.thumb img { max-width:108px; max-height:130px; border:1px solid #e3e8ee; }
.thumb .pdfico { display:inline-block; width:108px; height:130px; line-height:130px; background:#eef2f6; color:#b04; font-weight:bold; border:1px solid #e3e8ee; }
.thumb .fn { font-size:11px; color:#556; margin:4px 0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thumb .del { background:#c0392b; padding:3px 8px; font-size:12px; }
.upl { margin-top:6px; }
.dropzone { display:block; border:2px dashed #9fb3c6; border-radius:8px; padding:18px; text-align:center; color:#5a6b7b; cursor:pointer; background:#f7fafc; }
.dropzone.drag { border-color:#005aa0; background:#e8f1fb; color:#005aa0; }
.hochladen { margin-top:6px; }
.help h2 { font-size:16px; margin:16px 0 4px; color:#0b2440; }
.help li { margin:3px 0; }
.help p, .help li { line-height:1.5; }