/* K1 · Höfner Buchhaltung · klassisches Kanzlei-Design.
 * Reine Darstellung. Nach allen bisherigen Stylesheets laden.
 * Bestehende Paneele, Formulare, Freigaben und Scroll-Logik bleiben erhalten.
 */
:root{
 --hb-ink:#20364d;--hb-text:#263547;--hb-muted:#5b6878;--hb-muted-2:#687585;
 --hb-teal:#267238;--hb-teal-dark:#1c5b2b; /* --hb-top aus dem bestehenden Höfner-Design beibehalten. */
 --hb-mint:#e8f2e9;--hb-mint-2:#f3f7f3;--hb-bg:#edf0f4;
 --hb-card:#fff;--hb-line:#cbd3dc;--hb-line-2:#e1e6ec;--hb-input:#fff;
 --hb-warn-bg:#fff0cb;--hb-warn:#795400;--hb-danger-bg:#fbe7e6;--hb-danger:#9b302b;
 --hb-ok-bg:#e6f2e8;--hb-ok:#226731;--hb-info-bg:#e7eff9;
 --hb-radius:3px;--hb-shadow:none;--sidebar:226px;--topbar:50px;
 --office-blue:#245e96;--office-selected:#edf4fc;--office-surface:#f4f6f8;
}
html,body{font-family:"Segoe UI",Arial,Helvetica,sans-serif;color:var(--hb-text);font-size:14px;line-height:1.45;background:var(--hb-bg)}
body{font-variant-numeric:tabular-nums}
a{color:var(--office-blue)}
a:hover{color:#16456f;text-decoration:underline;text-underline-offset:3px}
button,input,select,textarea{font-family:inherit}
button:focus-visible,a:focus-visible,summary:focus-visible{outline:3px solid #337bc0;outline-offset:2px}
.sidebar{background:#f5f7f9;border-right:1px solid #c2ccd7;scrollbar-width:thin;scrollbar-color:#acb8c6 transparent}
.brand{padding:0 14px;background:var(--hb-top);gap:9px;border-bottom:1px solid rgba(0,0,0,.12)}
.brand>img{width:29px;height:29px;margin-right:0}
.brand strong{font-size:16px;font-weight:700;letter-spacing:.055em}
.brand span{font-size:12px;margin-top:3px;opacity:.85}
.nav-section{padding:18px 14px 7px;font-size:12px;font-weight:650;letter-spacing:.045em;color:#657284}
.nav-link{margin:0 0 1px;min-height:36px;padding:7px 13px;border-radius:0;gap:9px;color:#354559;font-weight:500;font-size:14px;border-left:3px solid transparent;grid-template-columns:18px minmax(0,1fr) auto}
.nav-link:hover{background:#e8edf3;color:#233b56;text-decoration:none}
.nav-link.active{background:#e1ebf6;color:#163f6b;box-shadow:none;border-left-color:#2b629b;font-weight:700}
.nav-icon{width:17px;height:17px;opacity:.8;filter:grayscale(1)}
.nav-link.active .nav-icon{filter:grayscale(1);opacity:1}
.nav-badge{background:#dce5ef;color:#314d6b;border-radius:3px;font-size:12px;height:21px;min-width:22px}
.topbar{height:var(--topbar);position:sticky;top:0;z-index:35;background:var(--hb-top);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;color:#fff;padding:0 20px;border-bottom:1px solid rgba(0,0,0,.12)}
.top-actions{gap:10px}
.period-control{display:flex;flex-direction:row;align-items:center;gap:9px}
.period-control>span{font-size:12px;letter-spacing:.03em;color:rgba(255,255,255,.8)}
.period-control input{font-size:14px;color:#fff;border:1px solid rgba(255,255,255,.35);border-radius:3px;background:var(--hb-top);min-height:30px;padding:3px 7px;color-scheme:dark}
/* Header-Steuerelemente verwenden dieselbe Grundfarbe, auch im Fokus. */
.topbar .period-control input,.topbar .period-form input,.topbar select{background:var(--hb-top);color:#fff;border-color:rgba(255,255,255,.35);color-scheme:dark}
.topbar .period-control input:hover,.topbar .period-form input:hover,.topbar select:hover{border-color:rgba(255,255,255,.65);box-shadow:inset 0 0 0 100px rgba(255,255,255,.04)}
.topbar .period-control input:focus,.topbar .period-form input:focus,.topbar select:focus{background:var(--hb-top);color:#fff;border-color:rgba(255,255,255,.8);box-shadow:none}
.topbar .period-control input:focus-visible,.topbar .period-form input:focus-visible,.topbar select:focus-visible{outline:2px solid #fff;outline-offset:2px}
.topbar select option{background:var(--hb-top);color:#fff}
.test-mode-pill{font-size:12px;font-weight:600;border-radius:3px;letter-spacing:0;padding:3px 7px;max-width:350px;background:#344d64;color:#fff2bf;border-color:#718296}
.mode-pill{font-size:12px;max-width:240px;color:#d7e0ea}
.avatar{height:30px;width:30px;border-radius:3px;background:#dce6f0;color:#20364d;font-size:12px}
.main{max-width:none;padding:16px 18px 28px}
.main.main-wide{padding:0}
.page-head{margin-bottom:14px}
.page-head h1,.documents-head h1,.status-banner h2{font-family:inherit;font-size:24px;line-height:1.25;font-weight:650;color:#20364d;letter-spacing:-.025em}
.page-head p{font-size:14px;color:#596879;margin-top:4px}
.eyebrow{font-size:12px;letter-spacing:.06em;color:#54708b}
.role-pill{border-radius:3px;font-size:12px;color:#42576d;background:#f7f9fb;border-color:#cbd6e0;padding:5px 8px}
.card,.help-card,.backup-card,.metric-card,.notice,.status-banner{border-radius:3px;box-shadow:none}
.card-head{padding:11px 14px;background:#f3f5f8;border-bottom:1px solid #cbd3dc;align-items:center}
.card-head h2{color:#263b52;font-size:15px;font-weight:650}
.card-head p{font-size:12px;color:#5f6e7e;margin-top:3px}
.card-pad{padding:14px}
.metric-grid{gap:10px}
.metric-card{min-height:100px;padding:13px 15px;border-top:3px solid #91a5ba}
.metric-card span{font-size:14px;color:#516173}
.metric-card strong{font-size:26px;margin-top:5px;color:#20364d}
.metric-card small{font-size:12px;color:#637183;margin-top:4px}
.btn{min-height:36px;border-radius:3px;padding:7px 12px;font-size:14px;font-weight:600;box-shadow:none}
.btn:hover{text-decoration:none}
.btn-primary{background:#267238;border-color:#246c35;color:#fff}
.btn-primary:hover{background:#1c5b2b;border-color:#1c5b2b;color:#fff}
.btn-secondary{background:#fff;border-color:#abb9c8;color:#2c4965}
.btn-secondary:hover{background:#edf3f9;border-color:#7a93ad;color:#1b446c}
.btn-muted{background:#647689;border-color:#647689;color:#fff}
.btn-small{min-height:32px;font-size:14px;padding:5px 9px}
.btn:disabled{opacity:.6}
.input,.select,.textarea{background:#fff;border:1px solid #aebdcc;border-radius:3px;min-height:36px;padding:7px 9px;font-size:14px;color:#25364a}
.input:focus,.select:focus,.textarea:focus{border-color:#3979b7;box-shadow:0 0 0 2px #3979b726;background:#fff}
label{font-size:14px;color:#475c71;font-weight:600;gap:4px}
.form-grid{gap:10px}
.section-title{font-size:12px;color:#536a81;letter-spacing:.04em;border-color:#d4dde6}
.status,.risk,.soft-pill,.count-pill{border-radius:3px;font-weight:600;font-size:12px;line-height:1.35;min-height:24px}
.status.info{background:#e8f0fa;color:#275780}
.status.neutral{background:#e9edf2;color:#4b5a6a}
.soft-pill,.count-pill{background:#e7edf5;color:#3d5f81}
.notice{background:#edf3fa;border-color:#bed0e3;color:#304f6e;border-left:3px solid #3979b7}
.notice strong{font-size:14px}
.notice span{font-size:13px;color:#566d84}
.status-banner{padding:16px 18px;background:#fff;border-left-width:4px;gap:14px}
.status-banner.success{background:#fff}
.status-banner h2{font-size:22px}
.status-banner p{font-size:14px;color:#5b6d7e}
.status-banner>div>span{font-size:12px;letter-spacing:.04em;color:#566d84}
.toolbar{padding:10px 14px;background:#f5f7fa}
table{font-variant-numeric:tabular-nums}
th{padding:9px 12px;background:#e9eef4;color:#4b6179;font-size:12px;font-weight:700;text-transform:none;letter-spacing:0;border-bottom:1px solid #bbc9d7;white-space:nowrap}
td{padding:10px 12px;font-size:14px;color:#2c4157;border-bottom:1px solid #dbe2ea}
tbody tr:nth-child(even){background:#f8fafc}
tbody tr:hover{background:#edf4fc}
td small,.table-note{font-size:12px;color:#607084}
.kv-list span{color:#607184}.kv-list b{color:#2c435c}
.booking-preview,.info-box,.original-box,.vat-grid>div,.vat-reconcile-grid>div{border-radius:3px;background:#f4f7fa;border-color:#cfdae5}
.booking-preview span,.info-box span{font-size:12px;color:#5a6e84;letter-spacing:0}
.booking-preview b,.info-box b{color:#263d57;font-size:14px}
.booking-preview small{font-size:12px;color:#65768b}
.documents-page{padding-inline:12px}
.documents-page .documents-head h1{font-size:23px;font-weight:650;color:#20364d}
.documents-page .documents-head p{font-size:13px;color:#5c6f82}
.documents-page .documents-tools .upload-band{border-radius:3px;border-color:#bdccdc;background:#f5f8fc}
.documents-page .documents-tools>.compact-upload,.documents-page .documents-tools>.document-statistics{border-radius:3px}
.documents-page .documents-tools .upload-copy b,.documents-page .documents-tools .upload-copy small{color:#435d78;font-size:12px}
.documents-page .documents-tools>details>summary{font-size:13px}
.documents-page .documents-workspace{border:1px solid #becbd8;border-radius:3px;background:#fff}
.documents-page .doc-list-panel{border-right-color:#bfcbd8;background:#fff}
.documents-page .doc-list-head{background:#eef2f6;font-size:14px;color:#304962;border-bottom-color:#cbd5df}
.documents-page .doc-list-head small{color:#5d7288;font-size:12px}
.documents-page .search-wrap{background:#fafbfd}
.documents-page .filter-row,.documents-page .doc-view-tabs{background:#fafbfd}
.filter-chip,.doc-view-chip,.document-pane-tabs .btn{border-radius:3px}
.documents-page .filter-chip{font-size:12px;color:#50647a}
.documents-page .filter-chip.active,.doc-view-chip.active{background:#e4edf8;color:#214f7c;border-color:#9eb9d5}
.doc-view-chip small{border-radius:3px;background:#d9e5f2}
.documents-page .doc-list-item{border-bottom-color:#dae2eb;padding-block:11px}
.documents-page .doc-list-item:nth-child(even){background:#fafbfd}
.documents-page .doc-list-item:hover{background:#f1f5fa;text-decoration:none}
.documents-page .doc-list-item.selected{background:#e8f0fa}
.documents-page .doc-list-item.selected:before{background:#2b629b;width:3px}
.documents-page .doc-main strong,.documents-page .doc-side b{font-size:15px;color:#243c56;font-weight:650}
.documents-page .doc-main small,.documents-page .doc-main>small:first-of-type{color:#536b83;font-size:12px}
.documents-page .doc-side .status{font-size:12px}
.file-icon{border-radius:3px;background:#e8edf4}
.documents-page .preview-bar{background:#eef2f6;border-bottom-color:#c6d2df;font-size:14px}
.documents-page .preview-title strong{color:#2b4560;font-size:14px}
.documents-page .preview-title small{color:#60758a;font-size:12px}
.documents-page .preview-bar .btn{font-size:12px;border-radius:3px}
.doc-preview-panel,.document-frame,.payment-frame{background:#dce2e9}
.preview-note{color:#51677e;font-size:12px;background:#f6f8fb}
.documents-page .detail-header{background:#eef2f6;border-bottom-color:#c6d2df}
.documents-page .detail-header span:first-child{color:#576f87;font-size:12px;letter-spacing:.04em}
.documents-page .detail-header strong{color:#2b425c;font-size:16px}
.documents-page .detail-scroll-area label{font-size:14px;color:#465f78}
.documents-page .detail-scroll-area label small{font-size:12px;color:#61768c}
.documents-page .doc-detail-panel .input,.documents-page .doc-detail-panel .select,.documents-page .doc-detail-panel .textarea{font-size:14px;border-radius:3px;border-color:#aebdcc;background:#fff}
.receipt-tabs{background:#eef2f6;border-color:#cad5e0;border-radius:0}
.receipt-tab{border-radius:0;color:#4f6379;font-size:14px}
.receipt-tab.active{background:#fff;color:#214f7c;box-shadow:inset 0 -3px #2b629b}
.review-box,.counterparty-box,.opos-mini,.manual-booking-card,.suggestion-box{border-radius:3px}
.documents-page .detail-actions-workflow{background:#f3f6f9;border-top-color:#bdcbd9;box-shadow:none}
.documents-page .detail-actions-workflow .btn{border-radius:3px;font-size:14px}
.documents-page[data-pane=original] [data-doc-pane=original],.documents-page[data-pane=booking] [data-doc-pane=booking]{background:#e4edf8;color:#214f7c;border-color:#9eb9d5}
.main.payments-main{padding:10px 12px}
.payments-main .page-head{margin-bottom:10px}
:is(.payments-page,.main) .payment-toolbar{background:#f5f7fa;border:1px solid #cbd5e0;border-radius:3px;padding:8px 10px}
:is(.payments-page,.main) .payment-toolbar label,:is(.payments-page,.main) .payment-toolbar label.payment-doc-view{font-size:12px;color:#52677e}
:is(.payments-page,.main) .payment-toolbar .input,:is(.payments-page,.main) .payment-toolbar .select,:is(.payments-page,.main) .payment-toolbar .btn{font-size:14px;border-radius:3px}
.payment-summary{background:#fff;border-color:#cbd5df;border-radius:3px;color:#587087;font-size:13px;padding:7px 10px}
.payment-summary b{color:#263f59}
:is(.payments-page,.main) .payment-tabs{gap:0;border-bottom:1px solid #b9c8d8}
:is(.payments-page,.main) .payment-tabs a{background:transparent;border:0;border-bottom:3px solid transparent;border-radius:0;font-size:14px;padding:7px 13px;color:#536b84}
:is(.payments-page,.main) .payment-tabs a:hover{text-decoration:none;background:#e7edf4}
:is(.payments-page,.main) .payment-tabs a.active{background:#fff;color:#214f7c;border-bottom-color:#2b629b}
:is(.payments-page,.main) .payment-tabs small{background:#dfe7f1;border-radius:3px;color:#365674}
:is(.payments-page,.main) .payment-workspace{gap:8px}
:is(.payments-page,.main) .payment-list,:is(.payments-page,.main) .payment-detail,:is(.payments-page,.main) .payment-preview{border-radius:3px;border-color:#becbd9}
:is(.payments-page,.main) .payment-list .card-head{background:#eef2f6}
:is(.payments-page,.main) .payment-tx{border-bottom-color:#dce3eb}
:is(.payments-page,.main) .payment-tx:nth-child(even){background:#f8fafc}
:is(.payments-page,.main) .payment-tx:hover{background:#f0f5fb;text-decoration:none}
:is(.payments-page,.main) .payment-tx.selected{border-left-color:#2b629b;background:#e8f0fa}
:is(.payments-page,.main) .payment-party strong{font-size:14px;color:#2a4058;font-weight:650;line-height:1.35}
:is(.payments-page,.main) .payment-date,:is(.payments-page,.main) .payment-date small,:is(.payments-page,.main) .payment-tx small.payment-purpose-full{font-size:12px;color:#5b6f84}
:is(.payments-page,.main) .payment-amount{font-size:15px;color:#263b53}
:is(.payments-page,.main) .payment-tx>.status{font-size:12px;border-radius:3px}
:is(.payments-page,.main) .payment-detail>.card-head{background:#fff}
:is(.payments-page,.main) .payment-detail>.card-head p{font-size:12px;color:#5a7188}
:is(.payments-page,.main) .payment-banktext{border-radius:3px;background:#f5f7fa;border-color:#d5dee7}
:is(.payments-page,.main) .payment-banktext summary,:is(.payments-page,.main) .payment-match-reasons summary{font-size:13px;color:#365a7e}
:is(.payments-page,.main) .payment-banktext p,:is(.payments-page,.main) .payment-reasons{font-size:13px;color:#4d647b}
:is(.payments-page,.main) .payment-balance>div{border-radius:3px;background:#f1f5fa;border-color:#ccd9e6}
:is(.payments-page,.main) .payment-balance span{font-size:12px;color:#526b85}
:is(.payments-page,.main) .payment-balance b{color:#25405d;font-size:20px}
:is(.payments-page,.main) .suggestion-box{background:#edf5ee;border-color:#bbd7bf;color:#2f5c37}
:is(.payments-page,.main) .suggestion-box>span,:is(.payments-page,.main) .manual-booking-card>span{font-size:13px}
:is(.payments-page,.main) .manual-booking-card{background:#f7f9fc;border-color:#cad6e2}
:is(.payments-page,.main) .manual-assign label{font-size:13px;gap:4px;color:#49617b}
:is(.payments-page,.main) .manual-assign .input,:is(.payments-page,.main) .manual-assign .select{font-size:14px;border-radius:3px}
:is(.payments-page,.main) .payment-detail h3{font-size:15px;color:#29435e}
:is(.payments-page,.main) .payment-preview .preview-bar{background:#eef2f6}
:is(.payments-page,.main) .payment-preview .preview-bar strong{font-size:14px;color:#2a425b}
:is(.payments-page,.main) .payment-preview .preview-bar small{font-size:12px;color:#526b85}
.login-page{background:#edf1f6}
.login-card{border-radius:4px;border:1px solid #c4d0dd;border-top:4px solid #267238;box-shadow:0 12px 40px #20364d12}
.login-card h1{font-family:inherit;color:#20364d;font-weight:650}
@media(min-width:1101px){.topbar .mode-pill{max-width:170px}}
@media(max-width:1350px){.topbar .mode-pill{display:none}.test-mode-pill{max-width:275px}.topbar{grid-template-columns:minmax(0,.4fr) auto minmax(0,1fr)}}
@media(max-width:1100px){:root{--sidebar:210px}.topbar .test-mode-pill{max-width:190px}.period-control>span{display:none}}
@media(max-width:780px){
 :root{--topbar:54px;--sidebar:226px}
 .topbar{padding-inline:10px;display:flex;gap:8px;justify-content:space-between}
 .topbar-spacer{display:none}.top-actions{margin-left:auto;gap:5px}.topbar .test-mode-pill{max-width:115px;font-size:12px}
 .period-control input{font-size:14px;max-width:150px;min-height:34px}
 .main{padding:12px 10px 30px}.main.main-wide{padding:0}.page-head-row{flex-wrap:wrap;gap:8px}.page-head h1{font-size:22px}
 .btn,.btn-small{min-height:42px}.input,.select,.textarea{font-size:16px;min-height:42px}
 .nav-link{min-height:42px}.documents-page{padding-inline:8px}.documents-page .documents-head{gap:7px}
 .documents-page .doc-detail-panel .input,.documents-page .doc-detail-panel .select,.documents-page .doc-detail-panel .textarea{font-size:16px;min-height:42px}
 :is(.payments-page,.main) .payment-toolbar .input,:is(.payments-page,.main) .payment-toolbar .select,:is(.payments-page,.main) .manual-assign .input,:is(.payments-page,.main) .manual-assign .select{font-size:16px;min-height:42px;height:42px}
 :is(.payments-page,.main) .payment-tabs a{min-height:42px;padding-inline:10px}:is(.payments-page,.main) .payment-toolbar .btn{min-height:42px}
 .documents-page .detail-actions-workflow .btn{min-height:44px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important}}
@media print{html,body{color:#000;background:#fff}.main{padding:0}.card,.metric-card{box-shadow:none}}