* { 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; }
.belcell { white-space: nowrap; min-width: 96px; }
.filebtn { display: inline-flex; align-items: center; gap: 5px; background: #eef2f6; border: 1px solid #c4cdd6; border-radius: 5px; padding: 7px 10px; cursor: pointer; font-size: 13px; color: #1c2733; line-height: 1; }
.filebtn:hover { background: #e1e9f1; border-color: #9fb3c6; }
.filebtn input.rowfile { display: none !important; }
.fcount { display: block; font-size: 11px; color: #008c46; margin-top: 4px; }
.rowfiles { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 4px; }
.rowfiles .chip { font-size: 11px; background: #eef2f6; color: #44525f; border: 1px solid #dce2e8; border-radius: 10px; padding: 1px 8px; }
.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; }
/* Live-Vorschau */
.editor { display:flex; gap:18px; align-items:flex-start; }
.col-form { flex:1 1 0; min-width:0; }
.col-prev { flex:1 1 0; min-width:0; position:sticky; top:12px; }
.col-prev h3 { margin:0 0 8px; }
.invprev { background:#fff; border:1px solid #d7dde4; border-radius:6px; box-shadow:0 1px 6px rgba(0,0,0,.08); padding:20px; font-size:12px; color:#1c2733; min-height:300px; }
.invprev .pv-logo { text-align:center; font-weight:bold; font-size:16px; letter-spacing:1px; margin-bottom:8px; }
.invprev .pv-sender { border-bottom:1px solid #333; padding-bottom:3px; font-size:10px; margin-bottom:10px; }
.invprev .pv-row { display:flex; justify-content:space-between; gap:12px; margin-bottom:8px; }
.invprev .pv-meta { text-align:right; }
.invprev h4 { margin:10px 0 6px; }
.invprev table.pv-tab { width:100%; border-collapse:collapse; }
.invprev table.pv-tab th { background:#eef2f6; text-align:left; padding:4px 6px; border:0; font-size:11px; }
.invprev table.pv-tab td { padding:4px 6px; border:0; }
.invprev .r { text-align:right; } .invprev .c { text-align:center; }
.invprev .pv-tot { text-align:right; margin-top:8px; border-top:1px solid #333; padding-top:4px; }
.invprev .pv-pay { margin-top:10px; font-size:10px; color:#444; }
.invprev .pv-gruss { margin-top:8px; }
@media (max-width:900px){ .editor { flex-direction:column; } .col-prev { position:static; } }