/* Gemeinsames Designsystem: lokal, kompakt, tastaturbedienbar. */
/* Belegfoto-Editor: eigene Selektoren, auch oberhalb des Buchungsdialogs. */
.document-scan { width:min(850px,calc(100vw - 20px)); max-height:94dvh; padding:0; border:1px solid var(--line); border-radius:11px; overflow:auto; }
.document-scan::backdrop { background:#13271dcc; }
.scan-body { padding:16px 24px; position:relative; }
.scan-body>p { font-size:12px; margin-bottom:12px; }
.scan-viewport { max-height:52dvh; overflow:auto; padding:24px; background:#eef1ee; border-radius:7px; }
.scan-stage { position:relative; margin:0 auto; }
.scan-stage>canvas { display:block; width:100%; height:auto; }
.scan-stage>svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.scan-stage path { fill:#0008; stroke:#58d8a3; stroke-width:2; vector-effect:non-scaling-stroke; }
.scan-invalid path { stroke:#b02a37; }
.scan-stage [data-scan-point] { position:absolute; width:44px; height:44px; padding:0; border:0; border-radius:50%; background:transparent; transform:translate(-50%,-50%); touch-action:none; cursor:move; }
.scan-stage [data-scan-point]::after { content:""; position:absolute; inset:12px; border:3px solid white; border-radius:50%; background:var(--green); box-shadow:0 0 3px #000; }
.scan-tools { display:flex; gap:10px; align-items:center; flex-wrap:wrap; margin-top:14px; }
.scan-tools label { margin:0; }
.scan-tools input { margin:0 4px 0 0; }
[data-scan-loupe] { position:absolute; right:24px; top:4px; border:2px solid var(--green); border-radius:50%; box-shadow:0 2px 10px #0005; pointer-events:none; }
.scan-result { text-align:center; }
.scan-result canvas { max-width:100%; max-height:52dvh; width:auto; height:auto; }
@media(max-width:600px) { .scan-body { padding:12px; } .scan-tools button { padding:8px; } }
:root { font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:14px; line-height:1.5; color:#25332e; color-scheme:light; --line:#e3e9e5; --muted:#748078; --green:#17664d; }
* { box-sizing:border-box; }
a { color:var(--green); text-underline-offset:3px; }
a:hover { color:#10533e; }
button,input,select,textarea { font:inherit; }
button,[role=button] { display:inline-block; cursor:pointer; border:1px solid var(--green); background:var(--green); color:white; border-radius:7px; padding:10px 15px; font-weight:550; text-decoration:none; line-height:1.5; }
button:hover,[role=button]:hover { background:#10533e; color:white; }
button:disabled { opacity:.6; cursor:wait; }
.outline { border-color:#dce4df; background:white; color:#34463c; }
.outline:hover { background:#f1f6f3; color:#34463c; }
button:focus-visible,a:focus-visible { outline:2px solid #58a884; outline-offset:3px; }
input,select,textarea { width:100%; min-width:0; border:1px solid #dae2dc; border-radius:6px; padding:11px 12px; background:white; color:#34463c; margin:0 0 18px; }
input:focus,select:focus,textarea:focus { outline:2px solid #85bda4; border-color:var(--green); }
input[type=checkbox],input[type=radio] { width:auto; accent-color:var(--green); }
input[aria-invalid=true],select[aria-invalid=true] { border-color:#b02a37; }
label { display:block; font-size:12px; font-weight:600; margin-bottom:8px; }
small { font-size:12px; color:var(--muted); }
h1 { font-size:29px; font-weight:650; letter-spacing:-1px; margin:0 0 24px; line-height:1.2; }
h2 { font-size:19px; font-weight:600; margin:28px 0 16px; }
h3 { font-size:16px; margin:20px 0 12px; }
p { margin:0 0 16px; line-height:1.6; }
article { background:white; border:1px solid var(--line); border-radius:11px; padding:28px; margin-bottom:24px; }
article>h1 { margin-bottom:24px; }
table { border-collapse:collapse; width:100%; text-align:left; margin-bottom:20px; font-variant-numeric:tabular-nums; }
th { font-size:11px; font-weight:550; color:#7b877f; background:#fafcfb; padding:14px 20px; border-bottom:1px solid var(--line); }
td { padding:16px 20px; border-bottom:1px solid #eef1ee; font-size:12px; }
td form,td button { margin:0; }
td button { padding:6px 10px; font-size:11px; }
td a+a { margin-left:12px; }
tfoot th,tfoot td { background:#f0f5f1; font-weight:600; }
tbody tr:hover { background:#fafcfb; }
.grid,.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:18px; }
.form-card { max-width:720px; }
.form-actions { display:flex; gap:10px; align-items:center; margin-top:10px; }
.report-page form[method=get] { display:flex; flex-wrap:wrap; gap:12px; align-items:center; margin-bottom:16px; }
.report-page form[method=get] label { margin:0; }
.report-page form[method=get] input,.report-page form[method=get] select { width:auto; margin:0; }
.report-page .no-print>button { margin-left:12px; }
.report-page>.table-wrap { margin:0 -8px 20px; }
.meldung { padding:12px 16px; border-radius:7px; background:#eef4ef; margin:0 0 18px; font-size:13px; }
.meldung--fehler { background:#fff1f0; }
.meldung--warning { background:#fff8e1; }
.errorlist { font-size:12px; color:#b02a37; }
.anmeldung { margin:50px auto; }
.anmeldung button { width:100%; }
.section-heading { padding:20px; margin:0; border-bottom:1px solid var(--line); font-size:15px; }
.panel+.panel { margin-top:20px; }
body { margin:0; background:#f5f7f6; }
main.container { max-width:1370px; padding:35px 36px; margin:0 auto; }
.app-header { position:sticky; top:0; z-index:10; background:#fffffff2; backdrop-filter:blur(15px); border-bottom:1px solid var(--line); padding:0; }
.app-header-inner { max-width:1440px; margin:auto; padding:0 36px; display:flex; align-items:center; gap:32px; min-height:72px; }
.brand { display:flex; align-items:center; gap:9px; font-size:18px; font-weight:750; letter-spacing:-.6px; text-decoration:none; color:#25332e; }
.brand-mark { display:grid; place-items:center; background:var(--green); color:white; border-radius:9px; width:32px; height:34px; font-size:23px; }
.brand-dot { color:#7b9b88; margin-left:-9px; }
.app-nav { display:flex; align-self:stretch; gap:23px; }
.app-nav a { display:flex; align-items:center; border-bottom:2px solid transparent; padding:0; margin:0; border-radius:0; color:var(--muted); font-size:13px; white-space:nowrap; text-decoration:none; }
.app-nav a[aria-current] { color:var(--green); border-bottom-color:var(--green); font-weight:650; }
.workspace-menu { margin-left:auto; display:flex; align-items:center; gap:12px; }
.workspace-name { color:#34463c; font-size:13px; text-decoration:none; max-width:180px; }
.workspace-name b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.workspace-name small { display:block; color:var(--muted); font-size:11px; }
.workspace-menu form,.workspace-menu button { margin:0; }
.quiet-button { background:transparent; color:#748078; border:1px solid var(--line); padding:6px 10px; }
.breadcrumb { display:flex; gap:12px; font-size:12px; margin-bottom:22px; color:var(--muted); }
.breadcrumb a { color:var(--muted); text-decoration:none; }
.page-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; margin-bottom:27px; }
.page-heading h1 { margin:0 0 8px; font-size:29px; letter-spacing:-1px; font-weight:650; }
.page-heading p { color:var(--muted); margin:0; font-size:13px; }
.report-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.report-card { background:white; border:1px solid var(--line); border-radius:10px; padding:25px; text-decoration:none; }
.report-card h2 { font-size:17px; margin:0 0 12px; }
.report-card p { color:var(--muted); font-size:13px; }
.report-card span { font-size:12px; }
.summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin-bottom:25px; }
.stat { background:white; border:1px solid var(--line); border-radius:10px; padding:20px 23px; }
.stat-label { font-size:12px; color:var(--muted); margin-bottom:12px; }
.stat strong { font-size:24px; font-weight:600; letter-spacing:-.7px; }
.stat small { font-size:12px; color:var(--muted); margin-left:7px; }
.stat-foot { font-size:11px; margin-top:9px; color:var(--muted); }
.status-dot { display:inline-block; width:6px; height:6px; border-radius:50%; background:#459570; margin-right:5px; }
.panel { background:white; border:1px solid var(--line); border-radius:11px; overflow:hidden; }
.toolbar { padding:18px 20px; display:flex; gap:10px; align-items:center; border-bottom:1px solid var(--line); margin:0; }
.toolbar input,.toolbar select,.toolbar button { margin:0; font-size:12px; height:40px; padding:8px 12px; }
.toolbar input[type=search] { flex:1; min-width:160px; border-radius:6px; background:#fafcfb; }
.toolbar select { width:auto; max-width:210px; padding-right:32px; }
.result-count { margin-left:auto; color:var(--muted); font-size:12px; white-space:nowrap; }
.table-wrap { overflow:auto; }
.journal-table { margin:0; width:100%; }
.journal-table th { font-size:11px; font-weight:550; color:#7b877f; background:#fafcfb; padding:14px 20px; white-space:nowrap; }
.table-wrap th .sort-link { color:inherit; font-weight:inherit; text-decoration:none; }
.table-wrap th .sort-link:hover { color:#39453d; text-decoration:underline; }
th .sort-knopf { background:none; border:none; padding:0; font:inherit; font-weight:inherit; color:inherit; cursor:pointer; }
th .sort-knopf:hover { text-decoration:underline; }
.journal-table td { padding:18px 20px; font-size:12px; border-color:#eef1ee; background:transparent; }
.journal-table tbody tr:hover { background:#fafcfb; }
.amount { text-align:right; font-variant-numeric:tabular-nums; font-weight:600; }
.reference { color:#8b958e; font-variant-numeric:tabular-nums; }
.nowrap { white-space:nowrap; }
.account-cell { color:#65736a; min-width:160px; }
.account-cell b { font-family:ui-monospace,monospace; color:#354b3d; font-weight:500; }
.account-cell small { display:block; color:var(--muted); }
.file-badge { color:var(--green); background:#eef5f0; padding:5px 8px; font-size:11px; border-radius:4px; text-decoration:none; white-space:nowrap; }
.muted { color:var(--muted); }
.row-actions { white-space:nowrap; }
.row-actions a { font-size:11px; }
.danger-link { color:#a93636; }
.button-danger { background:#ad3535; border-color:#ad3535; }
.button-danger:hover { background:#8e2626; }
.position-row { border:1px solid var(--line); padding:14px; border-radius:8px; display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:14px; }
.position-row .account-options { top:68px; }
.position-row input[type=checkbox] { width:18px; height:18px; }
.position-row:has(input[name$="-DELETE"]:checked) { opacity:.6; }
.field--gedaemmt { opacity:.6; }
.invoice-editor { max-width:1000px; }
.invoice-item-row { display:flex; align-items:start; gap:12px; border-bottom:1px solid var(--line); padding:12px 0; flex-wrap:wrap; }
.invoice-item-row .field:first-of-type { flex:1; min-width:200px; }
.invoice-item-row .field { width:130px; margin:0; }
.invoice-item-row input[type=checkbox] { width:auto; }
.invoice-item-row:has(input[name$="-DELETE"]:checked) { opacity:.5; }
.invoice-totals { margin:20px 0; text-align:right; }
.trash-link { text-align:right; }
.inline-form { display:inline; margin:0 0 0 12px; }
.inline-form button { background:none; border:0; padding:0; margin:0; font-size:11px; color:var(--green); cursor:pointer; }
.inline-form button:hover { color:#10533e; text-decoration:underline; background:none; }
.table-footer { display:flex; justify-content:space-between; gap:12px; align-items:center; padding:16px 20px; color:var(--muted); font-size:11px; }
.table-footer nav { gap:15px; }
.table-footer nav { display:flex; }
.empty-state { text-align:center; padding:50px!important; color:var(--muted); }
kbd { background:transparent; border:1px solid #ffffff60; margin-left:10px; font-size:11px; padding:1px 4px; }
.header-add { display:grid; place-items:center; width:32px; height:32px; border:1px solid var(--line); border-radius:7px; text-decoration:none; color:var(--green); font-size:20px; }
#booking-dialog, #confirm-dialog { padding:0; border:1px solid #dce5df; border-radius:15px; width:min(660px,calc(100% - 24px)); max-width:660px; max-height:92dvh; overflow:auto; box-shadow:0 25px 100px #142d2440; color:#25332e; background:white; margin:auto; }
#booking-dialog::backdrop, #confirm-dialog::backdrop { background:#19332855; backdrop-filter:blur(4px); }
#booking-dialog:not([open]), #confirm-dialog:not([open]) { display:none; }
#booking-dialog[open], #confirm-dialog[open] { display:block; min-width:0; min-height:0; height:fit-content; inset:0; }
#confirm-dialog { width:min(480px,calc(100% - 24px)); max-width:480px; }
.booking-form { margin:0; }
.modal-head { padding:24px 28px 20px; border-bottom:1px solid var(--line); display:flex; justify-content:space-between; align-items:start; gap:15px; }
.modal-head h2 { font-size:21px; letter-spacing:-.5px; margin:0 0 6px; }
.modal-head p { font-size:12px; color:var(--muted); margin:0; }
.dialog-close { padding:3px 8px; font-size:22px; border:0; background:none; color:#87948b; margin:0; }
.modal-fields { padding:24px 28px; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }
.field { position:relative; min-width:0; }
.field.full { grid-column:1/-1; }
.field label { font-size:12px; font-weight:600; margin-bottom:8px; }
.field input,.field select { margin:0; font-size:13px; padding:11px 12px; height:42px; }
.field input[readonly],.field input:disabled { background:#f5f7f5; color:#849188; }
.field small { font-size:11px; color:var(--muted); display:block; margin-top:7px; }
.field-error,[data-non-field-errors] { color:#b02a37; font-size:12px; }
[data-non-field-errors]:empty { display:none; }
[data-error-for]:empty { display:none; }
.field-error ul { padding-left:16px; margin:5px 0 0; }
/* Radio-Liste «Rechnung zuordnen» (Durchbuch-Modal): Optionzeilen kompakt,
 * Radio exakt mittig zur Textzeile (Django rendert div > label > input + Text). */
.radio-list label { display:flex; align-items:center; gap:6px; margin:0; }
.radio-list label + label { margin-top:2px; }
.upload-box { border:1px dashed #c7d6cc; border-radius:8px; background:#fbfcfb; padding:18px; display:flex; align-items:center; gap:14px; }
.upload-icon { font-size:24px; color:#7a9786; }
.upload-box p { font-size:12px; margin:0; overflow-wrap:anywhere; }
.upload-actions { display:flex; gap:7px; flex-wrap:wrap; margin-top:10px; }
.upload-actions button { font-size:11px; padding:7px 10px; margin:0; background:white; color:#34463c; border:1px solid #dce4df; }
.modal-foot { padding:18px 28px; display:flex; align-items:center; gap:8px; background:#fafcfb; border-top:1px solid var(--line); position:sticky; bottom:0; z-index:2; }
.modal-foot button { font-size:12px; margin:0; }
.modal-foot .cancel { margin-right:auto; }
.account-options { position:absolute; left:0; right:0; top:72px; background:white; border:1px solid #c9d9cf; border-radius:7px; z-index:5; box-shadow:0 8px 25px #1e3e2520; max-height:210px; overflow:auto; padding:4px; }
.account-options [role=option] { font-size:12px; padding:10px; cursor:pointer; border-radius:4px; }
.account-options [aria-selected=true],.account-options [role=option]:hover { background:#e9f3ec; color:var(--green); }
.account-options b { font-family:ui-monospace,monospace; margin-right:7px; }
.account-options p { padding:10px; margin:0; font-size:12px; color:var(--muted); }
.app-toast { position:fixed; bottom:28px; left:50%; transform:translateX(-50%); background:#204c39; color:white; padding:13px 23px; border-radius:9px; box-shadow:0 8px 30px #17352230; z-index:30; font-size:13px; max-width:90%; }
[hidden] { display:none!important; }
@media(max-width:600px) { .modal-head { padding:20px; } .modal-fields { padding:20px; gap:17px; } .modal-foot { padding:15px; flex-wrap:wrap; } .modal-foot button { padding:10px; } .upload-box { padding:12px; } .upload-icon { display:none; } .workspace-name { max-width:130px; } }
@media(max-width:800px) { .toolbar { flex-wrap:wrap; } .toolbar input[type=search] { flex-basis:100%; } .result-count { display:none; } .stat { padding:16px; } .summary { gap:10px; } }
@media(max-width:600px) { .summary { grid-template-columns:1fr 1fr; } .stat:last-child { display:none; } .stat strong { font-size:21px; } .page-heading [role=button] { font-size:12px; white-space:nowrap; } .page-heading { flex-wrap:wrap; } .page-heading .form-actions { flex-wrap:wrap; } kbd { display:none; } .table-footer>span:last-child { display:none; } }
@media(max-width:1050px) { .app-header-inner { padding:12px 20px 0; flex-wrap:wrap; gap:16px; } .app-nav { order:3; width:100%; overflow:auto; min-height:44px; } main.container { padding:25px 20px; } }
@media(max-width:600px) { .workspace-name { max-width:150px; } .report-grid { grid-template-columns:1fr; } .app-nav { gap:20px; } .page-heading h1 { font-size:25px; } article { padding:20px; } h1 { font-size:25px; } .grid,.form-grid { grid-template-columns:1fr; } }

.meldung--fehler {
  color: #b02a37;
}

.meldung--success {
  color: #0f7b4d;
}

/* Anmeldeformular nicht über die ganze Breite ziehen */
.anmeldung {
  max-width: 24rem;
}

/* Druckansicht: Navigation/Filters/Buttons ausblenden, Tabellen voll breit */
@media print {
  .no-print,
  header,
  button,
  dialog,
  .app-toast,
  [role=button] {
    display: none !important;
  }

  main.container {
    max-width: 100%;
    padding: 0;
  }

  body { background:white; }
  article,.panel { border:0; padding:0; box-shadow:none; }
  .table-wrap { overflow:visible; }

  table {
    width: 100%;
  }

  a {
    color: inherit;
    text-decoration: none;
  }
}
.tree-group td { background:#f0f5f1; font-weight:600; }
.group-number { font-family:ui-monospace,monospace; }
.toggle-button { background:none; border:0; padding:0 6px 0 0; margin:0; color:var(--green); cursor:pointer; font-size:11px; }
.toggle-button.as-link { padding:0; text-decoration:none; }
.toggle-button[aria-expanded="false"] { color:var(--muted); }
.detail-row td { background:#f7faf8; padding:10px 20px 14px calc(40px + var(--x, 0px)); }
.detail-row .positionen-table { margin:0; }
.detail-row .positionen-table th { padding:8px 12px; }
.detail-row .positionen-table td { padding:8px 12px; }
tr[data-gruppe-toggle], tr[data-ausklappbar] { cursor:pointer; }

/* Rechnungsübersicht (Task 4): Filter-/Bulk-Leiste, Marken, Barrierefreiheit. */
.visually-hidden { position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.listen-leiste { display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap; padding:12px 20px; border-bottom:1px solid var(--line); }
.filter-links { display:flex; gap:12px; align-items:center; font-size:12px; }
.filter-links a { font-size:12px; text-decoration:none; color:var(--muted); }
.filter-links a.aktiv, .filter-links a:hover { color:var(--green); font-weight:600; }
.listen-leiste form { margin:0; }
.listen-leiste button { padding:8px 12px; font-size:12px; }
.status-marke { display:inline-block; padding:2px 7px; font-size:11px; font-weight:600; border-radius:4px; margin-left:6px; }
.status-marke--ueberfaellig { color:#a93636; background:#fff1f0; }
.status-marke--mahnreif { color:#8a6d1a; background:#fdf6e3; }
.zelle-ueberfaellig { color:#a93636; font-weight:600; }

/* Rechnungs-Druckansicht (Task 5): A4-Seite mit Rändern. */
.druckseite { max-width:210mm; min-height:297mm; margin:0 auto; padding:20mm 18mm; }
.druckseite .rechnung-absender { font-size:11px; color:var(--muted); margin:0 0 28px; }
.druckseite .rechnung-empfaenger { max-width:90mm; margin:0 0 32px; line-height:1.6; }
.druckseite h1 { margin:0 0 6px; }
.druckseite .rechnung-betrag { font-size:26px; font-weight:650; letter-spacing:-.5px; margin:0 0 24px; }
.druckseite .rechnung-hinweis { margin:24px 0 0; font-size:13px; }
.druckseite .rechnung-bemerkung { margin:16px 0 0; padding-top:12px; border-top:1px solid var(--line); font-size:13px; }
@media print {
  /* A4-Blatt mit Rändern; Navigation/Schaltflächen sind bereits via .no-print ausgeblendet. */
  @page { size:A4; margin:16mm 14mm; }
  .druckseite { max-width:none; min-height:0; margin:0; padding:0; border:0; }
}