:root{--nav:#17212b;--nav2:#22303d;--bg:#f3f5f7;--card:#fff;--text:#17212b;--muted:#6c7782;--accent:#2d6cdf;--ok:#218838;--warn:#d97706;--danger:#c0392b;--line:#dfe4e8}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}a{text-decoration:none;color:inherit}.app{display:grid;grid-template-columns:250px 1fr;min-height:100vh}.sidebar{background:var(--nav);color:#fff;padding:24px 16px;position:sticky;top:0;height:100vh}.brand{font-size:20px;font-weight:700;margin:0 8px 28px}.brand small{display:block;font-size:12px;font-weight:500;color:#aeb9c2;margin-top:4px}.nav a{display:block;padding:11px 12px;border-radius:8px;color:#d6dee5;margin:4px 0}.nav a:hover,.nav a.active{background:var(--nav2);color:#fff}.main{padding:28px 34px}.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px}.top h1{font-size:28px;margin:0}.muted{color:var(--muted)}.grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:18px;box-shadow:0 1px 2px rgba(0,0,0,.03)}.stat strong{font-size:28px;display:block;margin-top:8px}.section{margin-top:24px}.section h2{font-size:18px}.btn{display:inline-block;border:0;background:var(--accent);color:#fff;padding:10px 14px;border-radius:8px;cursor:pointer;font-weight:600}.btn.secondary{background:#eef2f6;color:#263442}.btn.danger{background:var(--danger)}table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}th,td{text-align:left;padding:12px 14px;border-bottom:1px solid var(--line);vertical-align:top}th{font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);background:#fafbfc}.badge{display:inline-block;padding:4px 8px;border-radius:999px;background:#eef2f6;font-size:12px}.badge.paid,.badge.done{background:#e7f6eb;color:#176b2c}.badge.overdue{background:#fde8e8;color:#9c2020}.badge.confirmed,.badge.sent{background:#e9f0ff;color:#234f9c}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.form-grid .full{grid-column:1/-1}label{display:block;font-size:13px;font-weight:650;margin-bottom:6px}input,select,textarea{width:100%;padding:10px 11px;border:1px solid #cfd6dc;border-radius:8px;background:#fff;font:inherit}textarea{min-height:90px}.actions{display:flex;gap:8px;flex-wrap:wrap}.notice{padding:12px 14px;background:#fff7df;border:1px solid #ead59a;border-radius:8px;margin-bottom:18px}.invoice{max-width:900px;margin:0 auto;background:#fff;padding:48px;border:1px solid var(--line)}.invoice-head{display:flex;justify-content:space-between}.invoice-meta{text-align:right}.invoice table{border:0}.invoice-total{margin-left:auto;width:360px}.right{text-align:right}.calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.day{background:#fff;border:1px solid var(--line);border-radius:8px;min-height:105px;padding:8px}.day .n{font-size:12px;color:var(--muted)}.event{font-size:12px;background:#e9f0ff;border-radius:6px;padding:5px;margin-top:5px}.nowrap{white-space:nowrap}@media(max-width:1000px){.app{grid-template-columns:1fr}.sidebar{position:static;height:auto}.nav{display:flex;gap:5px;overflow:auto}.nav a{white-space:nowrap}.grid{grid-template-columns:repeat(2,1fr)}.main{padding:20px}.form-grid{grid-template-columns:1fr}}@media(max-width:620px){.grid{grid-template-columns:1fr}.invoice{padding:24px}.calendar{grid-template-columns:1fr}}
@media print{.sidebar,.top,.no-print{display:none!important}.app{display:block}.main{padding:0;background:#fff}.invoice{border:0;max-width:none;padding:0}}

.setup-wrap{min-height:100vh;padding:32px;background:var(--bg)}.setup-card{max-width:980px;margin:0 auto;background:#fff;border:1px solid var(--line);border-radius:14px;padding:28px;box-shadow:0 3px 16px rgba(0,0,0,.05)}.setup-brand{display:flex;flex-direction:column;margin-bottom:24px}.setup-brand strong{font-size:30px}.setup-brand span{color:var(--muted);margin-top:4px}.setup-card h2{margin-top:30px;padding-bottom:8px;border-bottom:1px solid var(--line)}.setup-actions{display:flex;gap:10px;margin-top:28px}.notice.error{background:#fdecec;border-color:#efb5b5;color:#8b1f1f}.notice.success{background:#eaf7ee;border-color:#b8dfc2;color:#17652b}.check{display:flex;align-items:center;gap:8px}.check input{width:auto}
.google-event{display:block;text-decoration:none;border-style:dashed;opacity:.9}.google-event:hover{opacity:1}.muted{color:#78838f}.form-grid small{display:block;margin-top:6px}


/* HOFA Office Belegungsplan */
.calendar-toolbar{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}.calendar-nav,.calendar-toolbar-right{display:flex;align-items:center;gap:10px}.calendar-nav strong{min-width:74px;text-align:center}.view-switch{display:inline-flex;background:#e9edf2;border-radius:9px;padding:3px}.view-switch a{padding:7px 10px;border-radius:7px;font-size:13px;font-weight:650;color:#53606d}.view-switch a.active{background:#fff;color:#17212b;box-shadow:0 1px 3px rgba(0,0,0,.08)}
.occupancy-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.03)}.occupancy-plan{display:grid;grid-template-columns:230px repeat(var(--days),minmax(34px,1fr));min-width:1180px;position:relative}.occ-head{position:sticky;top:0;z-index:6;background:#f8fafb;border-bottom:1px solid var(--line);border-right:1px solid var(--line);height:52px;display:flex;align-items:center;justify-content:center}.occ-hotel-head{left:0;z-index:8;justify-content:flex-start;padding:0 14px;font-size:12px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-weight:700}.occ-day{flex-direction:column;gap:1px;font-size:11px;color:#7a8590}.occ-day strong{font-size:15px;color:#263442}.occ-day.today{background:#fff2c9}.occ-resource{position:sticky;left:0;z-index:4;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:10px 12px;display:flex;flex-direction:column;justify-content:center;min-width:0}.occ-resource strong{font-size:13px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.occ-resource small{font-size:11px;color:var(--muted);margin-top:3px}.occ-track{grid-column:2/-1;position:relative;display:grid;grid-template-columns:repeat(var(--days),1fr);border-bottom:1px solid var(--line);min-width:0}.occ-grid-day{grid-row:1;position:relative;border-right:1px solid #edf0f2;height:100%;z-index:0}.occ-grid-day.weekend{background:#fafbfc}.occ-grid-day.today{background:#fff8df}.occ-bar{position:absolute;z-index:2;height:26px;line-height:26px;border-radius:6px;padding:0 8px;margin:0 3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:650;color:#16304f;background:#dfeaff;border:1px solid #aac2ee;box-shadow:0 1px 2px rgba(0,0,0,.05)}.occ-bar.status-confirmed{background:#dfeaff;border-color:#9fbae9;color:#1f4c8f}.occ-bar.status-planned{background:#fff1c9;border-color:#e7cc78;color:#77570b}.occ-bar.status-done{background:#def3e4;border-color:#abd3b6;color:#17652b}.occ-bar.status-cancelled{background:#f4e3e3;border-color:#dfb3b3;color:#8a2929;text-decoration:line-through}.occ-bar.google{background:#edf0f4;border:1px dashed #6d7a87;color:#33404c}.occ-bar:hover{filter:brightness(.98);box-shadow:0 2px 5px rgba(0,0,0,.12)}.occ-empty{grid-column:1/-1;padding:32px;text-align:center;color:var(--muted)}.occ-legend{display:flex;gap:16px;flex-wrap:wrap;margin-top:12px;font-size:12px;color:#5f6b76}.occ-legend span{display:flex;align-items:center;gap:6px}.lg{width:14px;height:8px;border-radius:3px;display:inline-block;border:1px solid transparent}.lg.confirmed{background:#dfeaff;border-color:#9fbae9}.lg.planned{background:#fff1c9;border-color:#e7cc78}.lg.done{background:#def3e4;border-color:#abd3b6}.lg.google{background:#edf0f4;border:1px dashed #6d7a87}
@media(max-width:1000px){.occupancy-plan{grid-template-columns:190px repeat(var(--days),34px)}.occ-hotel-head{left:0}.calendar-toolbar-right{width:100%;justify-content:space-between}.view-switch{order:1}}

/* Exakte Balkenpositionierung und Sperrzeiten */
.occ-track .occ-bar{
  left:calc(((var(--start) - 1) * 100% / var(--days)) + 3px);
  width:calc((var(--span) * 100% / var(--days)) - 6px);
  margin:0;
}
.occ-block-resource{background:#fff7f7}
.occ-bar.blocked{background:#f3dede;border-color:#d39b9b;color:#7d2525}
.lg.blocked{background:#f3dede;border-color:#d39b9b}
.blocked-event{background:#f3dede!important;color:#7d2525!important;border:1px solid #d39b9b}
.block-form{margin-bottom:18px}

/* HOFA Office – Belegungsplan als Tagesraster / Hotelzimmerplan */
.roomplan-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.roomplan{display:grid;grid-template-columns:220px repeat(var(--days),minmax(88px,1fr));min-width:1500px}
.rp-head{height:64px;background:#f6f8fa;border-right:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:center;font-weight:700;color:#263442;position:sticky;top:0;z-index:5}
.rp-hotel-head{justify-content:flex-start;padding:0 16px;left:0;z-index:7;font-size:14px}
.rp-day{flex-direction:column;gap:2px}.rp-day strong{font-size:17px}.rp-day span{font-size:12px;color:#697582;font-weight:650}.rp-day.today{background:#eaf2ff}
.rp-hotel{min-height:86px;padding:0 14px;display:flex;align-items:center;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);position:sticky;left:0;z-index:3;min-width:0}
.rp-hotel strong{font-size:14px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.rp-block-label{background:#fff7f7;color:#8a2929}
.rp-cell{min-height:86px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);padding:8px 5px;display:flex;flex-direction:column;align-items:stretch;justify-content:center;gap:5px;background:#fff;position:relative}.rp-cell.today{background:#f1f6ff}
.rp-plus{display:flex;align-items:center;justify-content:center;margin:auto;width:30px;height:30px;border-radius:7px;color:#c2cad3;font-size:26px;line-height:1;font-weight:300;transition:.15s}.rp-plus:hover{background:#eef4ff;color:var(--accent)}.rp-plus.disabled{opacity:.35;cursor:default}.rp-plus.disabled:hover{background:transparent;color:#c2cad3}
.shift-chip{display:block;border-radius:7px;padding:7px 7px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;font-weight:700;border:1px solid transparent;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.shift-chip.status-confirmed{background:#58a0f7;border-color:#4791ea;color:#fff}.shift-chip.status-planned{background:#ffc928;border-color:#e9b81f;color:#543f00}.shift-chip.status-done{background:#43d17d;border-color:#36bd6d;color:#fff}.shift-chip.status-requested,.shift-chip.status-angefragt{background:#aeb8c4;border-color:#9aa6b3;color:#fff}.shift-chip.status-cancelled{background:#f0d7d7;border-color:#dda9a9;color:#8a2929;text-decoration:line-through}.shift-chip.google{background:#eef1f5;border:1px dashed #8994a0;color:#3b4652}.shift-chip.blocked{background:#f5dddd;border-color:#dba8a8;color:#842d2d}
.rp-legend{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:14px;font-size:13px;color:#46515d}.rp-legend span{display:flex;align-items:center;gap:7px}.rl{width:18px;height:18px;border-radius:5px;display:inline-block}.rl.confirmed{background:#58a0f7}.rl.planned{background:#ffc928}.rl.done{background:#43d17d}.rl.requested{background:#aeb8c4}.rl.blocked{background:#f5dddd;border:1px solid #dba8a8}.rl.google{background:#eef1f5;border:1px dashed #8994a0}
@media(max-width:1000px){.roomplan{grid-template-columns:170px repeat(var(--days),84px)}.rp-hotel{padding:0 9px}.shift-chip{font-size:11px;padding:6px 5px}}


/* Firmenlogo */
.brand-with-logo{display:flex!important;align-items:center;gap:12px}.brand-with-logo>div{min-width:0}.sidebar-logo{display:block;max-width:52px;max-height:52px;object-fit:contain;flex:0 0 auto;background:#fff;border-radius:8px;padding:4px}.company-logo{object-fit:contain}.doc-brand{display:flex;align-items:flex-start;gap:16px}.doc-logo{max-width:150px;max-height:72px;object-fit:contain;display:block}.setup-logo-preview{max-width:220px;max-height:90px;object-fit:contain}
@media print{.doc-logo{max-width:140px;max-height:68px}.sidebar-logo{display:none}}

/* ===== HOFA Office Mobile / Tablet Optimierung ===== */
.mobile-menu-btn,.sidebar-close,.sidebar-backdrop{display:none}
.top-title{min-width:0}
button,input,select,textarea{touch-action:manipulation}

@media (max-width:900px){
  html,body{max-width:100%;overflow-x:hidden}
  body.menu-open{overflow:hidden}
  .app{display:block;min-height:100dvh}
  .sidebar{
    position:fixed;inset:0 auto 0 0;width:min(86vw,330px);height:100dvh;z-index:1000;
    transform:translateX(-105%);transition:transform .22s ease;padding:18px 14px 28px;
    overflow-y:auto;overscroll-behavior:contain;box-shadow:12px 0 32px rgba(0,0,0,.25)
  }
  .sidebar.open{transform:translateX(0)}
  .sidebar-backdrop{display:block;position:fixed;inset:0;background:rgba(10,18,26,.48);z-index:999;opacity:0;pointer-events:none;transition:opacity .2s ease}
  body.menu-open .sidebar-backdrop{opacity:1;pointer-events:auto}
  .sidebar-close{display:flex;position:absolute;right:10px;top:10px;width:44px;height:44px;border:0;border-radius:10px;background:rgba(255,255,255,.08);color:#fff;font-size:28px;align-items:center;justify-content:center;cursor:pointer}
  .brand{margin:6px 50px 22px 6px}
  .brand-with-logo{min-height:52px}
  .sidebar-logo{max-width:120px;max-height:54px}
  .nav{display:block;overflow:visible}
  .nav a{display:block;min-height:46px;padding:13px 14px;margin:4px 0;font-size:15px;white-space:normal}
  .main{padding:14px 14px 28px;min-width:0}
  .top{justify-content:flex-start;gap:12px;margin-bottom:18px;position:sticky;top:0;z-index:50;background:rgba(243,245,247,.96);backdrop-filter:blur(9px);padding:9px 0 10px}
  .mobile-menu-btn{display:flex;flex:0 0 44px;width:44px;height:44px;border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--text);align-items:center;justify-content:center;font-size:22px;cursor:pointer;box-shadow:0 1px 2px rgba(0,0,0,.04)}
  .top h1{font-size:22px;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top .muted{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card{border-radius:11px;padding:14px}
  .stat strong{font-size:23px}
  .section{margin-top:18px}
  .section h2{font-size:17px}
  .form-grid{grid-template-columns:1fr;gap:12px}
  .form-grid .full{grid-column:auto}
  input,select,textarea{font-size:16px;min-height:46px;padding:11px 12px}
  textarea{min-height:110px}
  .btn{min-height:44px;padding:11px 14px;display:inline-flex;align-items:center;justify-content:center;text-align:center}
  .actions{gap:8px}
  .actions .btn{flex:0 1 auto}
  table{display:block;width:100%;max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;border-radius:10px}
  th,td{padding:11px 12px}
  td .actions,.actions td{white-space:normal}
  .notice{font-size:14px}
  .calendar-toolbar{align-items:stretch;gap:10px}
  .calendar-nav{width:100%;justify-content:space-between}
  .calendar-toolbar-right{width:100%;display:grid;grid-template-columns:1fr;gap:8px}
  .view-switch{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .view-switch a{text-align:center;min-height:42px;display:flex;align-items:center;justify-content:center}
  .roomplan-wrap{margin-left:-14px;margin-right:-14px;border-radius:0;border-left:0;border-right:0;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
  .roomplan{grid-template-columns:145px repeat(var(--days),82px);min-width:max-content}
  .rp-head{height:58px;position:sticky;top:0}
  .rp-hotel-head,.rp-hotel{left:0;box-shadow:4px 0 8px rgba(0,0,0,.05)}
  .rp-hotel{min-height:78px;padding:0 8px}
  .rp-hotel strong{font-size:12px;white-space:normal;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
  .rp-cell{min-height:78px;padding:6px 4px;gap:4px}
  .shift-chip{font-size:10px!important;padding:6px 4px!important;border-radius:6px!important;line-height:1.15!important;white-space:normal!important;min-height:32px;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important}
  .rp-add{min-width:40px;min-height:40px;font-size:22px}
  .occ-legend{font-size:11px;gap:9px;padding:0 2px}
  .calendar{grid-template-columns:1fr;gap:8px}
  .day{min-height:auto;padding:10px}
  .invoice{width:100%;max-width:100%;padding:20px 14px;border-radius:0;border-left:0;border-right:0}
  .invoice-head{flex-direction:column;gap:16px}
  .invoice-meta{text-align:left}
  .invoice-total{width:100%;margin-left:0}
  .invoice table{display:table;white-space:normal;font-size:12px}
  .invoice th,.invoice td{padding:8px 6px}
  .doc-logo{max-width:120px!important;max-height:58px!important}
  .setup-wrap{padding:12px}
  .setup-card{padding:16px 14px;border-radius:12px}
  .setup-brand strong{font-size:24px}
  .setup-actions{flex-direction:column}
  .setup-actions .btn,.setup-actions button{width:100%}
}

@media (max-width:560px){
  .main{padding:10px 10px 24px}
  .top{margin-bottom:12px;padding-top:6px}
  .top h1{font-size:20px}
  .grid{grid-template-columns:1fr}
  .card{padding:12px}
  .stat{display:grid;grid-template-columns:1fr auto;align-items:center;gap:8px}
  .stat strong{font-size:21px;margin:0}
  .section h2{margin-bottom:10px}
  .actions{display:grid;grid-template-columns:1fr;width:100%}
  .actions .btn,.actions button.btn{width:100%}
  .calendar-toolbar .btn{width:100%}
  .roomplan-wrap{margin-left:-10px;margin-right:-10px}
  .roomplan{grid-template-columns:125px repeat(var(--days),76px)}
  .rp-hotel{padding:0 6px}
  .rp-hotel strong{font-size:11px}
  .rp-day strong{font-size:15px}.rp-day span{font-size:10px}
  .shift-chip{font-size:9.5px!important;padding:5px 3px!important}
  .invoice{margin-left:-10px;width:calc(100% + 20px)}
  .invoice table{font-size:11px}
  .nowrap{white-space:normal}
}

@media (orientation:landscape) and (max-height:600px) and (max-width:1000px){
  .sidebar{width:min(55vw,330px)}
  .top{position:static}
}

/* ===== Drucklisten ===== */
.printlist-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.printlist-card{display:block;text-decoration:none;color:inherit;transition:.15s}.printlist-card:hover{transform:translateY(-1px);box-shadow:0 8px 24px rgba(24,39,55,.08)}.printlist-card h2{margin-top:0}.printlist-toolbar{display:flex;justify-content:space-between;gap:12px;align-items:center}.print-filter{display:grid;grid-template-columns:repeat(5,minmax(140px,1fr));gap:10px;align-items:end;margin-top:16px}.print-filter label{font-size:12px}.filter-submit{display:flex;align-items:end}.print-sheet{background:#fff;border:1px solid var(--line);border-radius:12px;padding:22px;margin-top:16px}.print-title{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;border-bottom:2px solid #17212b;padding-bottom:12px;margin-bottom:14px}.print-title h2{margin:0}.print-title p{margin:0;color:#65717d}.print-table{width:100%}.print-table tfoot th{border-top:2px solid #87919b}.print-summary{text-align:right;font-weight:700}.print-only{display:none}.print-doc-head{align-items:center;gap:16px;margin-bottom:18px}.print-list-logo{max-width:120px;max-height:56px;object-fit:contain}.print-footer{text-align:center;font-size:10px;color:#707981;margin-top:20px}
@media(max-width:900px){.printlist-grid{grid-template-columns:1fr}.print-filter{grid-template-columns:1fr 1fr}.printlist-toolbar{align-items:stretch;flex-direction:column}.printlist-toolbar .btn{width:100%}.print-sheet{padding:14px;margin-left:-14px;margin-right:-14px;border-radius:0;border-left:0;border-right:0}}
@media(max-width:560px){.print-filter{grid-template-columns:1fr}.print-sheet{margin-left:-10px;margin-right:-10px}.print-title{display:block}.print-title p{margin-top:4px}}
@media print{
  @page{size:A4 landscape;margin:11mm}
  body{background:#fff!important;color:#000!important;font-size:10pt}.app{display:block!important}.sidebar,.top,.no-print,.sidebar-backdrop,.mobile-menu-btn{display:none!important}.main{padding:0!important;margin:0!important;width:100%!important}.print-only{display:flex!important}.print-sheet{border:0!important;border-radius:0!important;padding:0!important;margin:0!important;box-shadow:none!important}.print-title{margin-bottom:10px}.print-table,table{display:table!important;width:100%!important;overflow:visible!important;white-space:normal!important;border-collapse:collapse!important}.print-table thead{display:table-header-group}.print-table tfoot{display:table-footer-group}.print-table tr{break-inside:avoid}.print-table th,.print-table td{padding:5px 6px!important;font-size:8.5pt!important;border-bottom:1px solid #bbb!important}.print-table th{background:#eee!important;color:#000!important;-webkit-print-color-adjust:exact;print-color-adjust:exact}.muted{color:#555!important}.print-doc-head{display:flex!important}.print-footer{display:block!important}.right{text-align:right!important}
}

/* Buchhaltungsbereiche in der Navigation optisch trennen */
.nav-section{margin:18px 14px 6px;padding-top:12px;border-top:1px solid rgba(255,255,255,.12);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.48)}
@media (max-width: 900px){.nav-section{margin-top:14px}}

/* Kompaktere Navigation */
.app{grid-template-columns:215px 1fr}
.sidebar{padding:14px 10px}
.brand{font-size:17px;margin:0 6px 14px;gap:8px}
.brand small{font-size:10px;margin-top:2px}
.sidebar-logo{max-width:42px;max-height:34px}
.nav a{padding:7px 9px;border-radius:7px;margin:2px 0;font-size:13px;line-height:1.15}
.nav-section{font-size:10px;margin:10px 9px 3px;letter-spacing:.08em;text-transform:uppercase;color:#82909c;font-weight:700}
.main{padding:22px 28px}
.top{margin-bottom:16px}.top h1{font-size:24px}

/* Zahlungs-QR auf Rechnungen */
.invoice-qr{margin-top:24px;display:flex;align-items:center;gap:14px;padding-top:18px;border-top:1px solid var(--line);max-width:330px}
.invoice-qr svg{width:132px;height:132px;display:block;background:#fff;border:8px solid #fff}
.invoice-qr span{font-size:12px;line-height:1.4;color:#4f5b66}
@media(max-width:1000px){.app{grid-template-columns:1fr}.sidebar{padding:18px 14px}.nav a{padding:10px 12px;font-size:14px}}
@media(max-width:620px){.invoice-qr{max-width:none}.invoice-qr svg{width:118px;height:118px}}
@media print{.invoice-qr svg{width:110px;height:110px}.invoice-qr{break-inside:avoid}}

/* ===== Rechnung: echte A4-Vorschau und identische Druckgeometrie ===== */
.invoice{
  width:210mm;
  min-height:297mm;
  max-width:210mm;
  margin:0 auto;
  background:#fff;
  padding:18mm 16mm 16mm;
  border:1px solid var(--line);
  box-shadow:0 2px 10px rgba(0,0,0,.04);
  page:invoicePage;
}
.invoice-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12mm;min-height:28mm}
.invoice-head .doc-brand{min-width:0}
.invoice-meta{min-width:48mm;text-align:right;line-height:1.45}
.invoice-meta h2{font-size:18pt;line-height:1.1;margin:0 0 7mm}
.invoice-recipient{margin:26mm 0 15mm;line-height:1.42;min-height:24mm}
.invoice table{display:table;width:100%;border:0;border-collapse:collapse;table-layout:fixed;white-space:normal}
.invoice table th,.invoice table td{padding:4mm 2.5mm;border-bottom:0.25mm solid #d9dee2;vertical-align:top}
.invoice table th{font-size:8.2pt;letter-spacing:.06em;background:#fff;color:#6c7782}
.invoice table th:first-child,.invoice table td:first-child{padding-left:0;width:45%}
.invoice table th:nth-child(2),.invoice table td:nth-child(2){width:10%}
.invoice table th:nth-child(3),.invoice table td:nth-child(3){width:12%}
.invoice table th:nth-child(4),.invoice table td:nth-child(4){width:16%}
.invoice table th:nth-child(5),.invoice table td:nth-child(5){width:17%;padding-right:0}
.invoice-total{width:84mm!important;margin:7mm 0 0 auto!important;border-collapse:collapse!important}
.invoice-total td{padding:3.8mm 0!important;border-bottom:.25mm solid #d9dee2!important}
.invoice-payment{margin-top:16mm;line-height:1.45}
.invoice-payment p{margin:0 0 6mm}
.invoice-qr{margin-top:8mm;max-width:92mm;padding-top:8mm;gap:6mm}
.invoice-qr svg{width:34mm;height:34mm;border:2mm solid #fff}
.invoice-qr span{font-size:9pt}

@page invoicePage{size:A4 portrait;margin:0}
@page listPage{size:A4 landscape;margin:11mm}
.print-sheet{page:listPage}

@media print{
  /* Rechnung erhält ausschließlich ihre eigene A4-Seite */
  .invoice{width:210mm!important;min-height:297mm!important;max-width:210mm!important;margin:0!important;padding:18mm 16mm 16mm!important;border:0!important;box-shadow:none!important;background:#fff!important}
  .invoice-head{min-height:28mm!important}
  .invoice-recipient{margin:26mm 0 15mm!important;min-height:24mm!important}
  .invoice-payment{margin-top:16mm!important}
  .invoice table,.invoice-total{display:table!important;overflow:visible!important;white-space:normal!important}
  .invoice table th,.invoice table td{font-size:9.5pt!important;padding:4mm 2.5mm!important;border-bottom:.25mm solid #d9dee2!important}
  .invoice-total td{padding:3.8mm 0!important}
  .invoice-qr{margin-top:8mm!important;padding-top:8mm!important}
}

@media(max-width:900px){
  .invoice{width:100%;min-height:auto;max-width:100%;padding:20px 14px}
  .invoice-recipient{margin:32px 0 24px;min-height:0}
  .invoice-payment{margin-top:32px}
}

/* Echte, separate Rechnungs-Druckansicht */
.print-invoice-page{margin:0;background:#eceff2;padding:18px;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.print-invoice-page .invoice{border:0;box-shadow:0 4px 22px rgba(0,0,0,.10)}
.print-invoice-toolbar{width:210mm;max-width:100%;margin:0 auto 12px;display:flex;gap:8px;justify-content:flex-end}
@media print{
  .print-invoice-page{padding:0!important;margin:0!important;background:#fff!important}
  .print-invoice-page .invoice{box-shadow:none!important}
  .print-invoice-toolbar{display:none!important}
}

/* Echte, separate Rechnungs-Druckansicht */
.print-invoice-page{margin:0;background:#eceff2;padding:18px;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
.print-invoice-page .invoice{border:0;box-shadow:0 4px 22px rgba(0,0,0,.10)}
.print-invoice-toolbar{width:210mm;max-width:100%;margin:0 auto 12px;display:flex;gap:8px;justify-content:flex-end}
@media print{
  .print-invoice-page{padding:0!important;margin:0!important;background:#fff!important}
  .print-invoice-page .invoice{box-shadow:none!important}
  .print-invoice-toolbar{display:none!important}
}