:root{ --bg:#f5f7fb;--panel:#ffffff;--panel-2:#f8fafc;--text:#111827;--muted:#64748b;--line:#e5e7eb;--accent:#111827;--accent-2:#334155;--good:#0f9f6e;--bad:#dc5a5a;--warn:#c98600;--shadow:0 12px 38px rgba(15,23,42,.07);--radius:18px } body.dark{--bg:#0b1220;--panel:#111827;--panel-2:#172033;--text:#f8fafc;--muted:#94a3b8;--line:#243044;--accent:#f8fafc;--accent-2:#cbd5e1;--shadow:0 12px 38px rgba(0,0,0,.28)} *{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;background:var(--bg);color:var(--text)}button,input,select{font:inherit}.app-shell{display:grid;grid-template-columns:264px 1fr;min-height:100vh}.sidebar{position:sticky;top:0;height:100vh;padding:22px 16px;display:flex;flex-direction:column;background:var(--panel);border-right:1px solid var(--line);z-index:20}.brand{display:flex;align-items:center;gap:12px;padding:4px 8px 24px}.brand-mark{width:38px;height:38px;border-radius:12px;background:var(--text);color:var(--panel);display:grid;place-items:center;font-weight:800;letter-spacing:-.04em}.brand strong,.company-card strong{display:block;font-size:14px}.brand span,.company-card span{display:block;font-size:11px;color:var(--muted);margin-top:2px}.nav{display:flex;flex-direction:column;gap:15px;flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;padding:0 2px 12px;scrollbar-width:thin}.nav-section{display:flex;flex-direction:column;gap:4px}.nav-section-label{padding:0 12px 4px;color:var(--muted);font-size:8px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;opacity:.68}.nav-item{border:0;background:transparent;color:var(--muted);display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;text-align:left;cursor:pointer;font-weight:600;font-size:13px;flex:0 0 auto}.nav-item span{width:18px;text-align:center}.nav-item:hover{background:var(--panel-2);color:var(--text)}.nav-item.active{background:var(--text);color:var(--panel)}.sidebar-footer{margin-top:10px;display:grid;gap:12px;flex:0 0 auto}.company-card{display:flex;gap:10px;align-items:center;padding:12px;background:var(--panel-2);border:1px solid var(--line);border-radius:14px}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:var(--text);color:var(--panel);font-size:12px;font-weight:800}.main{min-width:0}.topbar{height:70px;position:sticky;top:0;z-index:15;background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(14px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:16px;padding:0 28px}.search-wrap{display:flex;align-items:center;gap:9px;flex:1;max-width:620px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:9px 12px;color:var(--muted)}.search-wrap input{width:100%;border:0;outline:0;background:transparent;color:var(--text);font-size:13px}.top-actions{margin-left:auto;display:flex;gap:8px;align-items:center}.icon-btn,.primary-btn,.secondary-btn{border:0;border-radius:10px;cursor:pointer;transition:.2s ease}.icon-btn{width:38px;height:38px;background:var(--panel);border:1px solid var(--line);color:var(--text)}.primary-btn{background:var(--text);color:var(--panel);padding:10px 15px;font-weight:700}.secondary-btn{background:var(--panel-2);color:var(--text);border:1px solid var(--line);padding:10px 15px;font-weight:700}.content{padding:28px;max-width:1500px;margin:0 auto}.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:24px}.page-head h1{font-size:28px;line-height:1;margin:6px 0 6px;letter-spacing:-.035em}.page-head p{margin:0;color:var(--muted);font-size:13px}.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:10px;font-weight:800;color:var(--muted)}.period-pills{display:flex;border:1px solid var(--line);background:var(--panel);padding:3px;border-radius:11px}.period-pills button{border:0;background:transparent;color:var(--muted);padding:7px 10px;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer}.period-pills button.active{background:var(--text);color:var(--panel)}.kpi-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;margin-bottom:16px}.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}.kpi{padding:18px}.kpi-top{display:flex;justify-content:space-between;gap:8px;color:var(--muted);font-size:11px}.kpi strong{font-size:22px;display:block;margin:12px 0 4px;letter-spacing:-.03em}.delta{font-size:11px;font-weight:700}.delta.good{color:var(--good)}.delta.bad{color:var(--bad)}.grid-2{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;margin-top:16px}.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}.panel{padding:20px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}.panel-head h3{margin:0;font-size:15px}.panel-head p{margin:4px 0 0;color:var(--muted);font-size:11px}.chart{height:280px;position:relative}.chart svg{width:100%;height:100%;overflow:visible}.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--muted)}.legend i{width:8px;height:8px;border-radius:50%;display:inline-block;margin-right:5px}.mini-list{display:grid;gap:11px}.mini-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid var(--line)}.mini-row:last-child{border:0}.mini-row strong{font-size:13px}.mini-row span{font-size:11px;color:var(--muted)}.status{padding:5px 8px;border-radius:99px;font-size:10px;font-weight:800;white-space:nowrap}.status.paid{background:rgba(15,159,110,.12);color:var(--good)}.status.open{background:rgba(201,134,0,.14);color:var(--warn)}.status.overdue{background:rgba(220,90,90,.12);color:var(--bad)}.notice{display:flex;gap:10px;padding:13px 14px;background:rgba(201,134,0,.1);border:1px solid rgba(201,134,0,.22);border-radius:13px;color:var(--warn);font-size:11px;margin-bottom:16px}.table-card{overflow:hidden}.toolbar{padding:14px 16px;border-bottom:1px solid var(--line);display:flex;gap:10px;justify-content:space-between;align-items:center}.filter-set{display:flex;gap:8px;flex-wrap:wrap}.filter-set select,.filter-set input,.form-grid input,.form-grid select{background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:9px 10px;outline:none}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;font-size:12px}th{padding:11px 14px;text-align:left;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line);background:var(--panel-2);white-space:nowrap}td{padding:13px 14px;border-bottom:1px solid var(--line);white-space:nowrap}tbody tr:hover{background:var(--panel-2)}.money.pos{color:var(--good);font-weight:800}.money.neg{color:var(--text);font-weight:700}.stack{display:grid;gap:16px}.tax-breakdown{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.tax-box{padding:16px;background:var(--panel-2);border:1px solid var(--line);border-radius:14px}.tax-box span{display:block;color:var(--muted);font-size:10px}.tax-box strong{display:block;margin-top:8px;font-size:18px}.clickable{cursor:pointer}.clickable:hover{outline:2px solid color-mix(in srgb,var(--text) 12%,transparent)}.progress{height:8px;background:var(--panel-2);border-radius:99px;overflow:hidden;border:1px solid var(--line)}.progress > div{height:100%;background:var(--text);border-radius:99px}.donut-wrap{display:flex;align-items:center;gap:24px}.donut{width:170px;height:170px;border-radius:50%;background:conic-gradient(#111827 0 43%,#64748b 43% 65%,#94a3b8 65% 79%,#cbd5e1 79% 90%,#e2e8f0 90%);position:relative;flex:0 0 auto}.dark .donut{background:conic-gradient(#f8fafc 0 43%,#cbd5e1 43% 65%,#94a3b8 65% 79%,#64748b 79% 90%,#334155 90%)}.donut:after{content:"";position:absolute;inset:31px;border-radius:50%;background:var(--panel)}.donut-center{position:absolute;inset:0;display:grid;place-items:center;z-index:2;text-align:center;font-size:11px;color:var(--muted)}.donut-center strong{display:block;color:var(--text);font-size:18px}.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.45);backdrop-filter:blur(4px);display:grid;place-items:center;padding:20px;z-index:50}.modal-backdrop.hidden,.toast.hidden{display:none}.modal{width:min(720px,100%);background:var(--panel);border:1px solid var(--line);border-radius:20px;box-shadow:0 24px 80px rgba(0,0,0,.28);padding:22px}.modal-head{display:flex;justify-content:space-between;align-items:flex-start}.modal-head h2{margin:4px 0 18px;font-size:22px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:13px}.form-grid label{display:grid;gap:6px;font-size:11px;color:var(--muted);font-weight:700}.span-2{grid-column:span 2}.form-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}.toast{position:fixed;right:24px;bottom:24px;background:var(--text);color:var(--panel);padding:12px 16px;border-radius:12px;font-size:12px;font-weight:700;box-shadow:var(--shadow);z-index:60}.detail-drawer{margin-top:12px;padding:14px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2);font-size:12px}.empty{padding:48px;text-align:center;color:var(--muted)}.mobile-only{display:none} @media(max-width:1150px){.kpi-grid{grid-template-columns:repeat(3,1fr)}.grid-2{grid-template-columns:1fr}.grid-3{grid-template-columns:1fr 1fr}} @media(max-width:820px){.app-shell{grid-template-columns:1fr}.sidebar{position:fixed;left:-280px;width:264px;transition:.2s ease}.sidebar.open{left:0;box-shadow:20px 0 60px rgba(0,0,0,.18)}.mobile-only{display:inline-grid;place-items:center}.content{padding:18px}.topbar{padding:0 16px}.search-wrap{display:none}.kpi-grid,.grid-3,.tax-breakdown{grid-template-columns:1fr 1fr}.page-head{align-items:flex-start;flex-direction:column}.donut-wrap{align-items:flex-start;flex-direction:column}} @media(max-width:560px){.kpi-grid,.grid-3,.tax-breakdown{grid-template-columns:1fr}.form-grid{grid-template-columns:1fr}.span-2{grid-column:span 1}.top-actions .icon-btn:nth-child(2){display:none}.content{padding:14px}.period-pills{overflow:auto;max-width:100%}.donut{width:145px;height:145px}.topbar{height:62px}.page-head h1{font-size:24px}} /* v2 additions */ .bank-hero{padding:24px;display:grid;grid-template-columns:1.4fr .6fr;gap:24px;align-items:end;background:linear-gradient(135deg,var(--panel),var(--panel-2));overflow:hidden;position:relative}.bank-hero:after{content:"KT";position:absolute;right:24px;top:-26px;font-size:150px;font-weight:900;letter-spacing:-.08em;color:var(--text);opacity:.025;pointer-events:none}.bank-balance .eyebrow{display:block}.bank-balance strong{display:block;font-size:42px;letter-spacing:-.05em;margin:10px 0 8px}.bank-balance p{margin:0;color:var(--muted);font-size:12px}.account-meta{display:grid;gap:8px;text-align:right}.account-meta span{font-size:11px;color:var(--muted)}.account-meta strong{font-size:13px}.statement-list{display:grid}.statement-item{display:grid;grid-template-columns:42px minmax(0,1.35fr) minmax(150px,.7fr) 120px 130px;gap:14px;align-items:center;padding:14px 18px;border-top:1px solid var(--line)}.statement-item:first-child{border-top:0}.tx-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:var(--panel-2);font-weight:900}.tx-icon.in{color:var(--good)}.tx-icon.out{color:var(--bad)}.tx-main strong{display:block;font-size:13px}.tx-main span,.tx-category span{display:block;font-size:11px;color:var(--muted);margin-top:3px}.tx-category strong{font-size:12px}.tx-date{font-size:12px;color:var(--muted)}.tx-amount{text-align:right;font-size:14px;font-weight:800}.tx-amount.in{color:var(--good)}.tx-amount.out{color:var(--text)}.automation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.automation-card{padding:18px}.automation-card .score{font-size:30px;font-weight:850;letter-spacing:-.04em;margin:12px 0 4px}.suggestion-row{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:center;padding:14px 0;border-top:1px solid var(--line)}.suggestion-row:first-of-type{border-top:0}.suggestion-actions{display:flex;gap:8px}.tiny-btn{border:1px solid var(--line);background:var(--panel-2);color:var(--text);padding:7px 10px;border-radius:9px;font-size:11px;font-weight:750;cursor:pointer}.tiny-btn.approve{background:var(--text);color:var(--panel)}.report-sheet{background:#fff;color:#111827;border-radius:16px;padding:36px;box-shadow:var(--shadow);border:1px solid #e5e7eb}.report-brand{display:flex;align-items:flex-start;justify-content:space-between;gap:18px;padding-bottom:22px;border-bottom:2px solid #111827}.report-brand h2{margin:0;font-size:24px;letter-spacing:-.04em}.report-brand p{margin:6px 0 0;color:#64748b;font-size:12px}.report-logo{width:48px;height:48px;border-radius:13px;background:#111827;color:#fff;display:grid;place-items:center;font-weight:900}.report-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:22px 0}.report-summary div{padding:14px;background:#f8fafc;border-radius:12px}.report-summary span{display:block;color:#64748b;font-size:10px;text-transform:uppercase;letter-spacing:.08em}.report-summary strong{display:block;margin-top:7px;font-size:16px}.report-table{width:100%;border-collapse:collapse;font-size:11px}.report-table th,.report-table td{padding:10px 8px;border-bottom:1px solid #e5e7eb;text-align:left}.report-table th{font-size:9px;text-transform:uppercase;letter-spacing:.07em;color:#64748b}.report-table td:last-child,.report-table th:last-child{text-align:right}.report-footer{margin-top:26px;padding-top:16px;border-top:1px solid #e5e7eb;color:#64748b;font-size:10px;display:flex;justify-content:space-between}.api-status{padding:12px 14px;border:1px dashed var(--line);border-radius:12px;background:var(--panel-2);font-size:12px;color:var(--muted)} @media(max-width:900px){.bank-hero{grid-template-columns:1fr}.account-meta{text-align:left}.statement-item{grid-template-columns:38px 1fr 100px}.tx-category,.tx-date{display:none}.automation-grid,.report-summary{grid-template-columns:1fr 1fr}}@media(max-width:620px){.statement-item{grid-template-columns:34px 1fr auto;padding:12px}.bank-balance strong{font-size:32px}.automation-grid,.report-summary{grid-template-columns:1fr}.report-sheet{padding:20px}} @media print{.sidebar,.topbar,.page-head,.no-print{display:none!important}.app-shell{display:block}.content{padding:0;max-width:none}.report-sheet{box-shadow:none;border:0;border-radius:0;padding:0}.card:not(.report-sheet){box-shadow:none}body{background:#fff}} /* v5 invoice creator */ .invoice-editor-modal{width:min(780px,100%)} .table-empty strong{display:block;color:var(--text);font-size:13px;margin-bottom:5px} @media print{#invoiceModalBackdrop{display:none!important}} .period-wrap{display:flex;flex-direction:column;align-items:flex-end;gap:9px}.period-pills{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.period-pills button{border:1px solid var(--border);background:var(--card);color:var(--muted);border-radius:999px;padding:8px 11px;font:inherit;font-size:12px;cursor:pointer}.period-pills button:hover{color:var(--text)}.period-pills button.active{background:var(--text);color:var(--bg);border-color:var(--text)}.custom-range{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px}.custom-range input{border:1px solid var(--border);background:var(--card);color:var(--text);border-radius:9px;padding:7px 9px}.modal input[type=file]{padding:10px;background:var(--surface)} @media(max-width:760px){.period-wrap{align-items:flex-start;width:100%}.period-pills{justify-content:flex-start}.custom-range{flex-wrap:wrap}} /* v7 — ruhiges Finanzdashboard */ .overview-shell{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(420px,.95fr);gap:18px;align-items:stretch}.revenue-overview,.ring-overview{padding:30px;min-height:430px}.overview-label{text-transform:uppercase;letter-spacing:.13em;font-size:10px;font-weight:800;color:var(--muted)}.overview-revenue{font-size:clamp(46px,6vw,78px);font-weight:760;letter-spacing:-.065em;line-height:.95;margin:24px 0 8px}.overview-period{color:var(--muted);font-size:12px}.calc-list{margin-top:46px;max-width:620px}.calc-row{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:13px 0;font-size:14px}.calc-row span{color:var(--muted)}.calc-row strong{font-size:15px}.calc-row.subtle{padding-top:5px}.calc-divider{height:1px;background:var(--line);margin:8px 0}.calc-row.result{padding-top:16px}.calc-row.result span{color:var(--text);font-weight:750}.calc-row.result strong{font-size:24px;letter-spacing:-.035em}.overview-note{margin-top:22px;max-width:620px;color:var(--muted);font-size:11px;line-height:1.6}.ring-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.ring-head h3{margin:6px 0 0;font-size:18px;letter-spacing:-.02em}.ring-caption{font-size:10px;color:var(--muted);white-space:nowrap}.ring-layout{display:grid;grid-template-columns:1fr 200px;align-items:center;gap:24px;min-height:330px}.finance-rings{width:min(310px,100%);aspect-ratio:1;position:relative;display:grid;place-items:center;margin:auto}.finance-rings svg{width:100%;height:100%;transform:rotate(-90deg);overflow:visible}.ring-track,.ring-progress{fill:none;stroke-width:2.3}.ring-track{stroke:var(--line)}.ring-progress{stroke-linecap:round;transition:stroke-dasharray .35s ease}.ring-revenue{stroke:var(--text)}.ring-profit{stroke:color-mix(in srgb,var(--text) 62%,var(--muted))}.ring-tax{stroke:color-mix(in srgb,var(--text) 34%,var(--muted))}.ring-center{position:absolute;text-align:center;display:grid;gap:4px}.ring-center span{font-size:10px;color:var(--muted)}.ring-center strong{font-size:31px;letter-spacing:-.045em}.ring-values{display:grid;gap:24px}.ring-value{display:grid;grid-template-columns:30px 1fr;gap:11px;align-items:center}.line-swatch{height:0;border-top:2px solid var(--text);width:28px;display:block}.line-swatch.profit{opacity:.62}.line-swatch.tax{opacity:.34}.ring-value span{font-size:11px;color:var(--muted);display:block;margin-bottom:5px}.ring-value strong{font-size:16px;letter-spacing:-.02em}.dashboard-lower{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:18px}.compact-panel{padding:22px}.compact-head{display:flex;align-items:flex-start;justify-content:space-between;gap:15px;margin-bottom:21px}.compact-head h3{margin:5px 0 0;font-size:16px}.text-action{border:0;background:transparent;color:var(--muted);font-weight:700;font-size:11px;cursor:pointer;padding:4px}.text-action:hover{color:var(--text)}.status-grid{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line)}.status-grid>div{padding:18px 14px 4px 0}.status-grid span,.tax-simple span{display:block;color:var(--muted);font-size:10px;margin-bottom:7px}.status-grid strong{font-size:21px;letter-spacing:-.03em}.tax-simple{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line)}.tax-simple>div{padding:18px 16px 4px 0}.tax-simple strong{font-size:18px;letter-spacing:-.025em}.tax-simple .emphasis strong{font-size:23px} @media(max-width:1100px){.overview-shell{grid-template-columns:1fr}.ring-layout{grid-template-columns:1fr 220px}.dashboard-lower{grid-template-columns:1fr}.revenue-overview,.ring-overview{min-height:unset}} @media(max-width:680px){.revenue-overview,.ring-overview{padding:22px}.overview-revenue{font-size:48px}.ring-layout{grid-template-columns:1fr}.ring-values{grid-template-columns:repeat(3,1fr);gap:12px}.ring-value{grid-template-columns:1fr;gap:7px}.status-grid,.tax-simple{grid-template-columns:1fr 1fr}.calc-list{margin-top:34px}.ring-caption{display:none}} /* v8 final visual pass */ :root{ --bg:#f7f7f5; --panel:#ffffff; --panel-2:#f2f2ef; --text:#101114; --muted:#74777f; --line:#e7e7e2; --chart-profit:#111214; --chart-tax:#7d8189; --chart-base:#c8c9c6; --radius:16px; --shadow:none; } body.dark{ --bg:#0f1012; --panel:#151619; --panel-2:#1b1c20; --text:#f5f5f3; --muted:#9b9da3; --line:#292b30; --chart-profit:#f5f5f3; --chart-tax:#9b9da3; --chart-base:#51545a; } html,body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Inter,Arial,sans-serif;letter-spacing:-.01em} .sidebar{width:auto;padding:24px 14px}.app-shell{grid-template-columns:248px 1fr}.brand{padding:2px 10px 26px}.brand-mark{border-radius:10px;width:36px;height:36px;font-size:12px}.brand strong{font-size:13px;letter-spacing:-.015em}.brand span{font-size:10.5px}.nav{gap:2px}.nav-item{font-size:12.5px;font-weight:560;padding:9px 11px;border-radius:9px}.nav-item.active{font-weight:650}.company-card{border-radius:12px;padding:11px;box-shadow:none}.topbar{height:66px;padding:0 30px;background:color-mix(in srgb,var(--bg) 94%,transparent)}.search-wrap{max-width:520px;border-radius:10px;background:transparent;border-color:transparent;padding-left:0}.search-wrap:focus-within{background:var(--panel);border-color:var(--line);padding-left:10px}.icon-btn{border-radius:9px;background:transparent}.icon-btn:hover{background:var(--panel-2)}.primary-btn,.secondary-btn{border-radius:9px;font-size:12px}.content{padding:34px 38px;max-width:1380px}.page-head{margin-bottom:28px;align-items:center}.page-head h1{font-size:26px;font-weight:680;letter-spacing:-.045em;margin:5px 0 5px}.page-head p{font-size:12px}.eyebrow{font-size:9px;letter-spacing:.14em}.card{box-shadow:none}.period-wrap{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.period-pills{padding:3px;border-radius:10px;background:transparent}.period-pills button{font-size:11px;padding:6px 9px}.custom-range{display:flex;align-items:center;gap:7px;font-size:11px;color:var(--muted)}.custom-range input{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:8px;padding:6px 8px} .minimal-dashboard{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(400px,.92fr);border:1px solid var(--line);border-radius:20px;background:var(--panel);overflow:hidden;min-height:520px}.balance-card{padding:46px 48px 40px;display:flex;flex-direction:column}.allocation-card{padding:46px 46px 36px;border-left:1px solid var(--line);display:grid;grid-template-rows:auto 1fr auto}.metric-label{font-size:9px;letter-spacing:.16em;font-weight:750;color:var(--muted)}.hero-amount{font-size:clamp(44px,5.1vw,72px);line-height:1;font-weight:690;letter-spacing:-.065em;margin-top:16px}.period-copy{font-size:12px;color:var(--muted);margin-top:10px}.balance-lines{margin-top:auto;padding-top:62px;display:grid;gap:0}.balance-line{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:15px 0;border-bottom:1px solid var(--line);font-size:13px}.balance-line span{color:var(--muted)}.balance-line strong{font-weight:620}.profit-line{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;padding-top:24px}.profit-line span{font-size:14px;font-weight:620}.profit-line strong{font-size:30px;letter-spacing:-.045em}.micro-note{font-size:10.5px;line-height:1.55;color:var(--muted);max-width:560px;margin:26px 0 0}.allocation-copy h2{font-size:22px;margin:7px 0 5px;letter-spacing:-.035em}.allocation-copy p{font-size:11.5px;color:var(--muted);margin:0}.single-donut-wrap{display:grid;place-items:center;padding:30px 0 24px}.single-donut{width:238px;height:238px;border-radius:50%;position:relative;display:grid;place-items:center}.single-donut:after{content:"";position:absolute;inset:13px;border-radius:50%;background:var(--panel)}.single-donut-hole{position:relative;z-index:2;text-align:center}.single-donut-hole span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.14em;color:var(--muted)}.single-donut-hole strong{display:block;font-size:20px;letter-spacing:-.035em;margin-top:6px}.allocation-legend{border-top:1px solid var(--line)}.allocation-row{display:grid;grid-template-columns:20px 1fr 48px 96px;align-items:center;gap:8px;min-height:43px;border-bottom:1px solid var(--line);font-size:11.5px}.allocation-row:last-child{border-bottom:0}.allocation-row span{color:var(--muted)}.allocation-row strong{text-align:right;font-size:12px}.allocation-row small{text-align:right;color:var(--muted);font-size:10.5px}.legend-stroke{width:16px;height:3px;border-radius:3px}.legend-stroke.profit{background:var(--chart-profit)}.legend-stroke.tax{background:var(--chart-tax)}.legend-stroke.base{background:var(--chart-base)}.minimal-status-row{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden;margin-top:16px}.minimal-stat{border:0;border-right:1px solid var(--line);background:transparent;color:var(--text);padding:18px 20px;text-align:left;cursor:pointer}.minimal-stat:last-child{border-right:0}.minimal-stat:hover{background:var(--panel-2)}.minimal-stat span{display:block;font-size:10.5px;color:var(--muted)}.minimal-stat strong{display:block;margin-top:8px;font-size:16px;letter-spacing:-.025em}.toolbar-caption{font-size:11px;color:var(--muted)} .table-card,.panel,.tax-box,.modal{box-shadow:none}.panel{padding:19px}.panel-head h3{font-weight:650}.table-card{border-radius:15px}th{font-size:9px;letter-spacing:.08em}td{font-size:11.5px}.status{font-size:9px}.tiny-btn{font-size:10px}.form-grid label{font-size:10.5px}.form-grid input,.form-grid select{font-size:12px}.notice{font-size:10.5px}.toast{font-size:11px;border-radius:10px} @media(max-width:1050px){.minimal-dashboard{grid-template-columns:1fr}.allocation-card{border-left:0;border-top:1px solid var(--line)}.minimal-status-row{grid-template-columns:1fr 1fr}.minimal-stat:nth-child(2){border-right:0}.minimal-stat:nth-child(-n+2){border-bottom:1px solid var(--line)}} @media(max-width:820px){.content{padding:22px 18px}.topbar{padding:0 16px}.minimal-dashboard{min-height:0}.balance-card,.allocation-card{padding:30px 24px}.hero-amount{font-size:48px}.single-donut{width:210px;height:210px}.page-head{align-items:flex-start}} @media(max-width:560px){.minimal-status-row{grid-template-columns:1fr}.minimal-stat{border-right:0;border-bottom:1px solid var(--line)}.minimal-stat:last-child{border-bottom:0}.balance-card,.allocation-card{padding:26px 20px}.balance-lines{padding-top:42px}.profit-line{align-items:flex-start;flex-direction:column}.profit-line strong{font-size:27px}.allocation-row{grid-template-columns:18px 1fr 40px 78px}.single-donut{width:188px;height:188px}.hero-amount{font-size:42px}} .danger-btn{color:#9f2d2d!important;border-color:rgba(159,45,45,.22)!important;background:transparent!important} .danger-btn:hover{background:rgba(159,45,45,.07)!important;border-color:rgba(159,45,45,.34)!important} td>div[style*="display:flex"]{flex-wrap:wrap} /* v11 product polish */ .head-actions{display:flex;gap:8px;align-items:center}.row-actions{display:flex;gap:6px;flex-wrap:nowrap}.section-title{font-size:13px;font-weight:670}.section-subtitle{font-size:10.5px;color:var(--muted);margin-top:3px}.banking-list{margin-top:16px}.warning-notice{margin-top:14px} .partner-summary{display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;margin-bottom:16px}.partner-summary>div{padding:20px 22px;border-right:1px solid var(--line)}.partner-summary>div:last-child{border-right:0}.partner-summary span{display:block;font-size:10px;color:var(--muted);margin-bottom:8px}.partner-summary strong{display:block;font-size:19px;letter-spacing:-.035em}.partner-list{display:grid;gap:12px}.partner-card{display:grid;grid-template-columns:minmax(240px,.9fr) minmax(480px,1.6fr) auto;gap:24px;align-items:center;padding:22px 24px}.partner-main{display:flex;gap:14px;align-items:center}.partner-avatar{width:46px;height:46px;border:1px solid var(--line);background:var(--panel-2);border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:750;letter-spacing:.04em}.partner-main h3{font-size:16px;letter-spacing:-.025em;margin:5px 0 3px}.partner-main p{font-size:10.5px;color:var(--muted);margin:0}.partner-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:0}.partner-metrics>div{padding:4px 18px;border-left:1px solid var(--line)}.partner-metrics span{display:block;font-size:9.5px;color:var(--muted);margin-bottom:7px}.partner-metrics strong{display:block;font-size:14px;letter-spacing:-.02em}.partner-edit{white-space:nowrap}.partner-note{margin-top:14px}.filter-set select{min-width:130px} @media(max-width:1100px){.partner-card{grid-template-columns:1fr auto}.partner-metrics{grid-column:1/-1;border-top:1px solid var(--line);padding-top:16px}.partner-metrics>div:first-child{border-left:0;padding-left:0}.partner-summary{grid-template-columns:1fr 1fr}.partner-summary>div:nth-child(2){border-right:0}.partner-summary>div:nth-child(-n+2){border-bottom:1px solid var(--line)}} @media(max-width:680px){.head-actions{width:100%;display:grid;grid-template-columns:1fr 1fr}.partner-summary{grid-template-columns:1fr}.partner-summary>div{border-right:0;border-bottom:1px solid var(--line)}.partner-summary>div:last-child{border-bottom:0}.partner-card{grid-template-columns:1fr;padding:20px}.partner-edit{width:100%}.partner-metrics{grid-template-columns:1fr 1fr}.partner-metrics>div{border-left:0;border-top:1px solid var(--line);padding:12px 8px 8px 0}.partner-metrics>div:nth-child(odd){border-right:1px solid var(--line)}.row-actions{flex-direction:column}} /* v12: kompakte Banking-Ansichten für Einnahmen und Ausgaben */ .type-overview-grid{ display:grid; grid-template-columns:minmax(260px,1.5fr) repeat(3,minmax(150px,1fr)); gap:14px; margin-bottom:18px; } .type-total-card,.type-metric-card{min-height:148px;display:flex;flex-direction:column;justify-content:center} .type-total-card{padding:28px 30px} .type-total-amount{font-size:clamp(32px,4vw,52px);letter-spacing:-.045em;line-height:1.02;margin-top:8px} .type-total-card p{margin:8px 0 0;color:var(--muted)} .type-metric-card{padding:24px} .type-metric-card>span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em} .type-metric-card>strong{font-size:25px;letter-spacing:-.025em;margin:9px 0 5px} .type-metric-card>small{color:var(--muted);font-size:12px} .type-ledger .statement-item{grid-template-columns:42px minmax(170px,1.4fr) minmax(150px,1fr) 105px 130px auto} .ledger-actions{justify-content:flex-end;white-space:nowrap} @media(max-width:1100px){ .type-overview-grid{grid-template-columns:1fr 1fr} } @media(max-width:720px){ .type-overview-grid{grid-template-columns:1fr} .type-total-card,.type-metric-card{min-height:auto} .type-ledger .statement-item{grid-template-columns:38px 1fr auto;gap:10px} .type-ledger .tx-category,.type-ledger .tx-date{display:none} .type-ledger .ledger-actions{grid-column:2/-1;justify-content:flex-start} } .net-balance{display:flex;align-items:center;gap:8px;margin-top:8px;font-size:12px;color:var(--muted)} .net-balance b{font-size:13px;color:var(--text);font-weight:650} /* v14 bank filters */ .bank-summary-grid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(170px,.6fr) minmax(170px,.6fr);gap:14px;margin-bottom:18px} .bank-mini-card{display:flex;flex-direction:column;justify-content:center;padding:24px} .bank-mini-card>span{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em} .bank-mini-card>strong{font-size:28px;letter-spacing:-.03em;margin:8px 0 4px} .bank-mini-card>small{color:var(--muted)} .bank-toolbar{align-items:flex-start;gap:18px} .filter-panel{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;align-items:end} .filter-panel select,.amount-filter input{height:38px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:9px;padding:0 10px;font:inherit;font-size:13px} .amount-filter{display:flex;flex-direction:column;gap:4px} .amount-filter span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em} .amount-filter input{width:100px} .compact-filter-btn{height:38px} @media(max-width:1100px){ .bank-summary-grid{grid-template-columns:1fr 1fr} .bank-summary-grid .bank-hero{grid-column:1/-1} } @media(max-width:760px){ .bank-summary-grid{grid-template-columns:1fr} .bank-summary-grid .bank-hero{grid-column:auto} .filter-panel{justify-content:flex-start;width:100%} .filter-panel select,.amount-filter{flex:1 1 140px} .amount-filter input{width:100%} } /* v15 audit polish */ .banking-list:not(.type-ledger) .statement-item{grid-template-columns:42px minmax(170px,1.35fr) minmax(145px,.9fr) 105px 130px auto} @media(max-width:900px){ .banking-list:not(.type-ledger) .statement-item{grid-template-columns:38px 1fr auto} .banking-list:not(.type-ledger) .tx-category,.banking-list:not(.type-ledger) .tx-date{display:none} .banking-list:not(.type-ledger) .ledger-actions{grid-column:2/-1;justify-content:flex-start} } .name-filter{display:flex;flex-direction:column;gap:4px} .name-filter span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em} .name-filter input{height:38px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:9px;padding:0 10px;font:inherit;font-size:13px;min-width:170px} @media(max-width:760px){.name-filter{flex:1 1 180px}.name-filter input{width:100%;min-width:0}} /* v17: formaler, hochwertiger Kontoauszug */ .formal-statement{padding:34px} .formal-statement-top{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;padding-bottom:24px;border-bottom:1px solid var(--line)} .formal-brand{display:flex;gap:16px;align-items:center} .formal-monogram{width:48px;height:48px;border:1px solid var(--text);border-radius:13px;display:flex;align-items:center;justify-content:center;font-weight:800;letter-spacing:-.04em} .formal-brand h2{margin:4px 0 4px;font-size:25px;letter-spacing:-.035em} .formal-brand p{margin:0;color:var(--muted);font-size:12px} .formal-meta{display:grid;grid-template-columns:auto auto;gap:4px 14px;text-align:right;font-size:11px;color:var(--muted)} .formal-meta strong{color:var(--text);font-size:12px} .statement-filter-note{margin:18px 0 0;padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)} .statement-filter-note span{display:block;font-size:9px;color:var(--muted);letter-spacing:.12em;text-transform:uppercase;margin-bottom:4px} .statement-filter-note strong{font-size:11px;line-height:1.5} .formal-summary{display:grid;grid-template-columns:repeat(4,1fr);margin:26px 0 30px;border:1px solid var(--line);border-radius:14px;overflow:hidden} .formal-summary>div{padding:18px;border-right:1px solid var(--line)} .formal-summary>div:last-child{border-right:0} .formal-summary span{display:block;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.12em;margin-bottom:7px} .formal-summary strong{font-size:18px;letter-spacing:-.025em} .formal-summary-main{background:var(--text);color:var(--bg)} .formal-summary-main span{color:color-mix(in srgb,var(--bg) 65%,transparent)} .formal-ledger-head,.formal-ledger-row{display:grid;grid-template-columns:105px minmax(0,1.65fr) minmax(135px,.8fr) 135px;gap:16px;align-items:center} .formal-ledger-head{padding:0 6px 10px;border-bottom:1px solid var(--line);font-size:9px;color:var(--muted);letter-spacing:.1em;text-transform:uppercase} .formal-ledger-head span:last-child{text-align:right} .formal-ledger-row{padding:15px 6px;border-bottom:1px solid var(--line)} .formal-date{color:var(--muted);font-size:11px} .formal-booking strong{display:block;font-size:12px;margin-bottom:3px} .formal-booking span{display:block;color:var(--muted);font-size:11px;margin-bottom:4px} .formal-booking small{font-size:9px;color:var(--muted)} .formal-category{font-size:11px;color:var(--muted)} .formal-amount{text-align:right;font-weight:700;font-size:12px} .formal-amount.in{color:var(--positive,#166534)} .formal-amount.out{color:var(--negative,#991b1b)} .formal-empty{padding:40px 0;text-align:center;color:var(--muted)} .formal-footer{display:flex;justify-content:space-between;gap:20px;padding-top:16px;margin-top:26px;border-top:1px solid var(--line);color:var(--muted);font-size:10px} @media(max-width:800px){ .formal-statement{padding:20px} .formal-statement-top{flex-direction:column} .formal-meta{text-align:left} .formal-summary{grid-template-columns:1fr 1fr} .formal-summary>div:nth-child(2){border-right:0} .formal-summary>div:nth-child(-n+2){border-bottom:1px solid var(--line)} .formal-ledger-head{display:none} .formal-ledger-row{grid-template-columns:1fr auto} .formal-date,.formal-category{display:none} } .clickable-booking{cursor:pointer;transition:background .16s ease}.clickable-booking:hover{background:var(--surface-2)} .transaction-detail-modal{max-width:760px}.detail-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.detail-hero{grid-column:1/-1;padding:24px;border:1px solid var(--line);border-radius:16px;background:var(--surface-2)}.detail-hero>span{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}.detail-hero>strong{display:block;font-size:34px;letter-spacing:-.04em;margin:8px 0 5px}.detail-hero>p{margin:0;color:var(--muted);font-size:12px}.detail-card{padding:18px;border:1px solid var(--line);border-radius:14px}.detail-card>span{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:7px}.detail-card>strong{font-size:18px}.detail-card>small{display:block;margin-top:4px;color:var(--muted)}.detail-section{margin-top:18px;padding:20px;border-top:1px solid var(--line)}.detail-section h3{margin:4px 0 10px}.detail-section>p{color:var(--muted);line-height:1.6}.detail-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.detail-meta>div{padding:12px 0;border-bottom:1px solid var(--line)}.detail-meta span{display:block;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px} .invoice-items-block{border:1px solid var(--line);border-radius:16px;padding:16px}.invoice-items-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}.invoice-items-head h3{margin:3px 0 0}.invoice-item-row{display:grid;grid-template-columns:minmax(220px,1.8fr) 90px 140px 100px 40px;gap:10px;align-items:end;padding:12px 0;border-top:1px solid var(--line)}.invoice-item-row:first-child{border-top:0}.invoice-item-row label{margin:0}.invoice-remove-btn{margin-bottom:1px} @media(max-width:820px){.detail-grid{grid-template-columns:1fr 1fr}.invoice-item-row{grid-template-columns:1fr 1fr}.invoice-item-desc{grid-column:1/-1}.invoice-remove-btn{justify-self:end}} @media(max-width:560px){.detail-grid{grid-template-columns:1fr}.detail-meta{grid-template-columns:1fr}.invoice-item-row{grid-template-columns:1fr}.invoice-item-desc{grid-column:auto}} .field-hint{display:block;margin-top:5px;color:var(--muted);font-size:10px}.dashboard-filter-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.month-select{height:38px;border:1px solid var(--line);background:var(--surface);color:var(--text);border-radius:9px;padding:0 10px;font:inherit;font-size:12px}@media(max-width:720px){.dashboard-filter-row{width:100%}.month-select{width:100%}} .detail-document{margin-top:16px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;display:flex;align-items:center;justify-content:space-between;gap:18px;background:var(--surface-2)} .detail-document h3{margin:4px 0 5px} .detail-document p{margin:0;color:var(--muted);font-size:11px} @media(max-width:620px){.detail-document{align-items:flex-start;flex-direction:column}.detail-document .primary-btn{width:100%}} /* v24 kompaktere Buchungsdetailansicht */ .detail-compact-head{display:flex;justify-content:space-between;gap:18px;align-items:flex-start;padding:4px 0 18px;border-bottom:1px solid var(--line)} .detail-compact-head>div:first-child>strong{display:block;font-size:32px;letter-spacing:-.04em;margin:6px 0 4px} .detail-compact-head p{margin:0;color:var(--muted);font-size:11px} .detail-status{font-size:11px;border:1px solid var(--line);border-radius:999px;padding:7px 10px;color:var(--muted)} .detail-stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-bottom:1px solid var(--line)} .detail-stats-row>div{padding:16px 14px;border-right:1px solid var(--line)} .detail-stats-row>div:last-child{border-right:0} .detail-stats-row span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:5px} .detail-stats-row strong{font-size:16px} .detail-stats-row small{display:block;color:var(--muted);font-size:9px;margin-top:3px} .detail-doc-strip{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:18px 0;border-bottom:1px solid var(--line)} .detail-doc-strip p{margin:4px 0 0;color:var(--muted);font-size:11px} .detail-doc-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end} .detail-meta-compact{display:grid;grid-template-columns:1fr 1fr;gap:0;margin-top:4px} .detail-meta-compact>div{padding:14px 0;border-bottom:1px solid var(--line)} .detail-meta-compact>div:nth-child(odd){padding-right:14px} .detail-meta-compact>div:nth-child(even){padding-left:14px;border-left:1px solid var(--line)} .detail-meta-compact .span-2{grid-column:1/-1;padding-left:0!important;padding-right:0!important;border-left:0!important} .detail-meta-compact span{display:block;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px} .detail-meta-compact strong{font-size:11px} @media(max-width:760px){ .detail-stats-row{grid-template-columns:1fr 1fr} .detail-stats-row>div:nth-child(2n){border-right:0} .detail-doc-strip{align-items:flex-start;flex-direction:column} .detail-doc-actions{justify-content:flex-start} .detail-doc-actions button{flex:1 1 auto} } /* v25 – großzügige Premium-Buchungsdetailansicht */ .transaction-detail-modal{max-width:920px} .booking-detail-hero{ display:flex;justify-content:space-between;gap:24px;align-items:flex-start; padding:10px 0 28px;border-bottom:1px solid var(--line) } .booking-detail-amount{ font-size:clamp(40px,5vw,62px);line-height:1;letter-spacing:-.055em;font-weight:760;margin:8px 0 10px } .booking-detail-sub{font-size:13px;color:var(--muted)} .booking-detail-badge{ border:1px solid var(--line);border-radius:999px;padding:9px 13px;font-size:11px;color:var(--muted);white-space:nowrap } .booking-detail-finance{ display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--line) } .finance-cell{padding:22px 20px;border-right:1px solid var(--line)} .finance-cell:nth-child(3n){border-right:0} .finance-cell:nth-child(n+4){border-top:1px solid var(--line)} .finance-cell span{display:block;font-size:9px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:7px} .finance-cell strong{display:block;font-size:22px;letter-spacing:-.025em} .finance-cell small{display:block;margin-top:5px;color:var(--muted);font-size:10px} .booking-documents-panel{ display:grid;grid-template-columns:minmax(0,1fr) auto;gap:26px;align-items:center; margin-top:24px;padding:24px;border:1px solid var(--line);border-radius:18px;background:var(--surface-2) } .booking-documents-copy h3{font-size:20px;margin:5px 0 7px;letter-spacing:-.025em} .booking-documents-copy p{margin:0;color:var(--muted);font-size:12px;line-height:1.55;max-width:520px} .booking-documents-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end;max-width:360px} .booking-detail-bottom{ display:grid;grid-template-columns:minmax(0,1.25fr) minmax(260px,.75fr);gap:18px;margin-top:20px } .booking-tax-card,.booking-meta-card{border:1px solid var(--line);border-radius:16px;padding:22px} .booking-tax-card h3{margin:5px 0 9px;font-size:18px;letter-spacing:-.02em} .booking-tax-card p{margin:0;color:var(--muted);font-size:12px;line-height:1.7} .booking-meta-card{display:grid;grid-template-columns:1fr 1fr;gap:0} .booking-meta-card>div{padding:8px 0 14px} .booking-meta-card span{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.09em;color:var(--muted);margin-bottom:4px} .booking-meta-card strong{font-size:11px;line-height:1.4} .booking-detail-note{margin-top:16px} @media(max-width:820px){ .booking-detail-finance{grid-template-columns:1fr 1fr} .finance-cell:nth-child(3n){border-right:1px solid var(--line)} .finance-cell:nth-child(2n){border-right:0} .finance-cell:nth-child(n+3){border-top:1px solid var(--line)} .booking-documents-panel{grid-template-columns:1fr} .booking-documents-actions{justify-content:flex-start;max-width:none} .booking-detail-bottom{grid-template-columns:1fr} } @media(max-width:560px){ .booking-detail-hero{flex-direction:column} .booking-detail-finance{grid-template-columns:1fr} .finance-cell,.finance-cell:nth-child(n){border-right:0;border-top:1px solid var(--line)} .finance-cell:first-child{border-top:0} .booking-documents-actions{display:grid;grid-template-columns:1fr} .booking-meta-card{grid-template-columns:1fr} } /* v26 – neue Buchungsdetailansicht */ .transaction-detail-modal{max-width:940px} .bd-head{ display:flex; justify-content:space-between; align-items:flex-start; gap:24px; padding:8px 0 26px; border-bottom:1px solid var(--line); } .bd-amount{ margin:7px 0 10px; font-size:clamp(42px,5vw,64px); line-height:1; letter-spacing:-.055em; font-weight:760; } .bd-subline{ display:flex; align-items:center; gap:10px; color:var(--muted); font-size:12px; } .bd-subline i{width:3px;height:3px;border-radius:999px;background:var(--muted)} .bd-status{ padding:8px 12px; border:1px solid var(--line); border-radius:999px; font-size:11px; color:var(--muted); } .bd-finance{ display:grid; grid-template-columns:minmax(230px,.8fr) minmax(0,2.2fr); border-bottom:1px solid var(--line); } .bd-finance-main{ padding:30px 26px 30px 4px; border-right:1px solid var(--line); display:flex; flex-direction:column; justify-content:center; } .bd-main-label{ font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:10px; } .bd-main-value{ font-size:34px; letter-spacing:-.04em; font-weight:740; } .bd-main-caption{margin-top:5px;color:var(--muted);font-size:11px} .bd-breakdown{ display:grid; grid-template-columns:repeat(3,1fr); } .bd-metric{ padding:28px 22px; min-height:125px; border-right:1px solid var(--line); border-bottom:1px solid var(--line); } .bd-metric:nth-child(3n){border-right:0} .bd-metric:nth-last-child(-n+3){border-bottom:0} .bd-metric span{ display:block; font-size:9px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); margin-bottom:8px; } .bd-metric strong{ display:block; font-size:22px; letter-spacing:-.025em; } .bd-metric small{ display:block; margin-top:5px; font-size:10px; color:var(--muted); } .bd-document{ margin-top:24px; padding:24px; border:1px solid var(--line); border-radius:18px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:26px; align-items:center; background:var(--surface-2); } .bd-document-copy{ display:flex; gap:15px; align-items:flex-start; } .bd-doc-icon{ width:42px; height:42px; border:1px solid var(--line); border-radius:12px; display:flex; align-items:center; justify-content:center; font-weight:750; flex:0 0 auto; background:var(--surface); } .bd-document h3{ margin:4px 0 6px; font-size:19px; letter-spacing:-.025em; } .bd-document p{ margin:0; color:var(--muted); font-size:11px; line-height:1.55; } .bd-document-actions{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; max-width:390px; } .bd-lower{ display:grid; grid-template-columns:minmax(0,1.2fr) minmax(280px,.8fr); gap:18px; margin-top:18px; } .bd-tax,.bd-info{ border:1px solid var(--line); border-radius:16px; padding:22px; } .bd-tax h3{ margin:5px 0 9px; font-size:17px; letter-spacing:-.02em; } .bd-tax p{ margin:0; color:var(--muted); line-height:1.65; font-size:11px; } .bd-info{ display:grid; grid-template-columns:1fr 1fr; gap:0; } .bd-info>div{ padding:7px 0 13px; } .bd-info span{ display:block; margin-bottom:4px; font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } .bd-info strong{font-size:11px;line-height:1.4} .bd-footnote{ margin-top:14px; font-size:9px; color:var(--muted); } @media(max-width:840px){ .bd-finance{grid-template-columns:1fr} .bd-finance-main{border-right:0;border-bottom:1px solid var(--line);padding-left:0} .bd-document{grid-template-columns:1fr} .bd-document-actions{justify-content:flex-start;max-width:none} .bd-lower{grid-template-columns:1fr} } @media(max-width:640px){ .bd-head{flex-direction:column} .bd-breakdown{grid-template-columns:1fr 1fr} .bd-metric:nth-child(n){border-right:1px solid var(--line);border-bottom:1px solid var(--line)} .bd-metric:nth-child(2n){border-right:0} .bd-document-actions{display:grid;grid-template-columns:1fr} .bd-info{grid-template-columns:1fr} } .period-selects{display:flex;gap:8px;align-items:center} .invoice-live-totals{display:flex;justify-content:flex-end;gap:18px;padding-top:12px;margin-top:8px;border-top:1px solid var(--line);font-size:11px;color:var(--muted)} .invoice-live-totals b{color:var(--text);margin-left:5px} @media(max-width:720px){.period-selects{width:100%;display:grid;grid-template-columns:1fr 1fr}.invoice-live-totals{justify-content:flex-start;flex-wrap:wrap}} /* macOS Safari compatibility */ .mac-compat-note{ position:fixed;left:50%;bottom:18px;transform:translateX(-50%); z-index:9999;display:flex;align-items:center;gap:16px; min-width:360px;max-width:calc(100vw - 32px); padding:11px 14px;border-radius:14px;background:#111;color:#fff; box-shadow:0 14px 42px rgba(0,0,0,.22); font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,Arial,sans-serif } .mac-compat-note div{display:flex;flex-direction:column;gap:2px} .mac-compat-note strong{font-size:12px} .mac-compat-note span{font-size:10px;opacity:.72} .mac-compat-note button{border:0;background:transparent;color:#fff;font-size:18px;cursor:pointer} @supports (-webkit-touch-callout:none){ input,select,textarea,button{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text",Inter,Arial,sans-serif} } /* Safari-safe finance input */ input[name="grossAmount"]{font-variant-numeric:tabular-nums} .sale-cost-fields{margin-top:4px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)} .sale-cost-head h3{margin:4px 0}.sale-cost-head p{margin:0 0 14px;color:var(--muted);font-size:11px} .sale-cost-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;align-items:end} .sale-cost-preview{grid-column:1/-1;padding:12px;border:1px solid var(--line);border-radius:10px;font-size:11px;color:var(--muted)} .tx-time{display:block;margin-top:3px;font-size:9px;color:var(--muted)} .profit-metric strong{font-variant-numeric:tabular-nums} @media(max-width:760px){.sale-cost-grid{grid-template-columns:1fr}.sale-cost-preview{grid-column:auto}} .optional-label{font-size:9px;color:var(--muted);font-weight:500;margin-left:4px} .invoice-settings-preview{margin-top:18px;padding:16px 17px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2);font-size:11px;line-height:1.65;color:var(--muted)} .invoice-settings-preview p{margin:8px 0 0}.invoice-settings-preview b{color:var(--text)} .invoice-items-helper{margin:5px 0 0;color:var(--muted);font-size:10px;line-height:1.45} .invoice-item-row{grid-template-columns:minmax(210px,2fr) 90px minmax(145px,1fr) 95px 38px} .invoice-item-row .field-hint{display:block;margin-top:5px;color:var(--muted);font-size:9px;font-weight:500} .invoice-shipping-row{background:rgba(127,127,127,.035);border-radius:12px;padding:10px} @media(max-width:760px){.invoice-item-row{grid-template-columns:1fr 1fr}.invoice-item-desc{grid-column:1/-1}.invoice-remove-btn{justify-self:end}.invoice-shipping-row{padding:10px}} /* Vier feste Rechnungspositionen */ .fixed-invoice-position{position:relative;padding-top:34px;margin-top:10px} .invoice-position-label{ position:absolute;left:14px;top:10px; font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase; color:var(--muted) } .fixed-invoice-position[data-position="4"]{background:var(--surface-2)} @media(max-width:760px){ .fixed-invoice-position{padding-top:38px} } /* Dynamische Rechnungspositionen */ .dynamic-position-head{align-items:end;gap:18px} .invoice-position-count-label{ min-width:170px; font-size:11px; color:var(--muted); } .invoice-position-count-label select{margin-top:7px} .dynamic-invoice-position{ position:relative; padding-top:34px; margin-top:10px; } .invoice-position-label{ position:absolute; left:14px; top:10px; font-size:10px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); } @media(max-width:760px){ .dynamic-position-head{align-items:stretch;flex-direction:column} .invoice-position-count-label{width:100%} } /* FIX: Rechnungspositionen müssen auf kleinen Mac/Safari-Fenstern sichtbar und scrollbar sein */ #invoiceModalBackdrop{ overflow-y:auto !important; align-items:flex-start !important; padding-top:24px !important; padding-bottom:24px !important; } #invoiceModalBackdrop .modal, #invoiceModalBackdrop .invoice-editor-modal{ width:min(920px,100%) !important; max-height:calc(100vh - 48px) !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch; margin:auto; } .invoice-fields-label{ margin:16px 0 8px; padding-top:14px; border-top:1px solid var(--line); font-size:11px; font-weight:800; color:var(--text); } .invoice-items-container{ display:flex; flex-direction:column; gap:12px; width:100%; } #invoiceItemsContainer .invoice-item-row.dynamic-invoice-position{ display:grid !important; grid-template-columns:minmax(220px,1.8fr) 90px minmax(150px,1fr) 110px !important; gap:12px !important; position:relative !important; padding:42px 14px 16px !important; margin:0 !important; border:1px solid var(--line) !important; border-radius:14px !important; background:var(--panel) !important; min-height:130px !important; } #invoiceItemsContainer .invoice-position-label{ left:14px !important; top:12px !important; color:var(--text) !important; } #invoiceItemsContainer input, #invoiceItemsContainer select{ width:100% !important; min-height:42px !important; } @media(max-width:820px){ #invoiceItemsContainer .invoice-item-row.dynamic-invoice-position{ grid-template-columns:1fr 1fr !important; } #invoiceItemsContainer .invoice-item-desc{grid-column:1/-1} } @media(max-width:560px){ #invoiceItemsContainer .invoice-item-row.dynamic-invoice-position{ grid-template-columns:1fr !important; } #invoiceItemsContainer .invoice-item-desc{grid-column:auto} } /* Rechnungsnummern / Buchungsreferenzen */ .reference-badge{ display:inline-flex;align-items:center;width:max-content; margin-top:5px;padding:4px 7px;border-radius:7px; border:1px solid var(--line);background:var(--surface-2); color:var(--text);font-size:9px;font-weight:800; letter-spacing:.03em;white-space:nowrap } .detail-reference{font-weight:700;color:var(--text)} .dashboard-invoice-strip{margin-top:16px;padding:18px 20px} .dashboard-invoice-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:8px} .dashboard-invoice-head h3{margin:4px 0 0} .dashboard-invoice-list{display:flex;flex-direction:column} .dashboard-invoice-row{ display:grid;grid-template-columns:130px minmax(180px,1fr) 120px 130px; gap:12px;align-items:center;width:100%; padding:12px 4px;border:0;border-top:1px solid var(--line); background:transparent;color:var(--text);font:inherit;text-align:left;cursor:pointer } .dashboard-invoice-row:hover{background:var(--surface-2)} .dashboard-invoice-row .invoice-ref{font-weight:850} .dashboard-invoice-row .invoice-customer{color:var(--muted)} .dashboard-invoice-row .invoice-date{color:var(--muted);font-size:11px} .dashboard-invoice-row strong{text-align:right} @media(max-width:760px){ .dashboard-invoice-row{grid-template-columns:1fr auto} .dashboard-invoice-row .invoice-customer{grid-column:1} .dashboard-invoice-row .invoice-date{display:none} } /* Ausgaben: Wareneinkauf / Händlerrechnung */ .expense-purchase-fields{ margin-top:4px;padding:16px;border:1px solid var(--line); border-radius:14px;background:var(--surface-2) } .expense-purchase-grid{ display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:end } .expense-invoice-status{ min-height:42px;padding:10px 12px;border:1px dashed var(--line); border-radius:10px;color:var(--muted);font-size:10px } .expense-invoice-status strong{display:block;color:var(--text);margin-top:6px} .expense-invoice-status small{display:block;margin-top:3px} #expensePurchaseFields input[type="file"]{ min-height:44px;padding:9px;background:var(--panel) } @media(max-width:640px){ .expense-purchase-grid{grid-template-columns:1fr} .expense-purchase-grid .span-2{grid-column:auto} } /* Berichte: Rechnungs-/Belegnummern bewusst schwarz und stärker */ .report-reference{ display:block; width:max-content; margin-top:4px; color:var(--text) !important; font-size:10px; font-weight:850; letter-spacing:.01em; } @media print{ .report-reference{color:#000 !important;font-weight:800} } /* Firmendaten am Anfang von Berichten */ .report-company-lines{ display:flex; flex-wrap:wrap; gap:4px 12px; margin-top:7px; max-width:560px; } .report-company-lines span{ color:var(--muted); font-size:9px; line-height:1.45; } @media print{ .report-company-lines span{color:#666} } /* Rechnungsnummern B-JJJJ-XXX */ .invoice-number-field-status{min-height:14px;margin-top:2px;font-size:9.5px;font-weight:700} .invoice-number-field-status.free{color:#15803d} .invoice-number-field-status.used,.invoice-number-field-status.own{color:#b91c1c} .invoice-number-field-status.invalid{color:#b45309} #invoiceForm input.invoice-no-free{border-color:rgba(21,128,61,.55);box-shadow:0 0 0 2px rgba(21,128,61,.06)} #invoiceForm input.invoice-no-used{border-color:rgba(185,28,28,.55);box-shadow:0 0 0 2px rgba(185,28,28,.06)} #invoiceForm input.invoice-no-invalid{border-color:rgba(180,83,9,.55)} .invoice-number-registry{margin-top:16px;padding:18px} .invoice-number-registry-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px} .invoice-number-registry-head h3{margin:5px 0 5px;font-size:19px} .invoice-number-registry-head p{margin:0;color:var(--muted);font-size:11px} .invoice-number-next{min-width:220px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)} .invoice-number-next span{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.08em} .invoice-number-next strong{display:block;margin:5px 0 9px;font-size:17px} .invoice-number-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:6px;max-height:330px;overflow:auto;margin-top:15px;padding:8px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)} .invoice-number-chip{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 9px;border-radius:9px;font:inherit;text-align:left;cursor:pointer} .invoice-number-chip span{font-size:10px;font-weight:850} .invoice-number-chip small{font-size:8px;font-weight:700} .invoice-number-chip.used{color:#991b1b;border:1px solid rgba(220,38,38,.24);background:rgba(220,38,38,.075)} .invoice-number-chip.free{color:#166534;border:1px solid rgba(22,163,74,.24);background:rgba(22,163,74,.07)} .invoice-number-chip.used:hover{background:rgba(220,38,38,.12)} .invoice-number-chip.free:hover{background:rgba(22,163,74,.13)} @media(max-width:700px){.invoice-number-registry-head{flex-direction:column}.invoice-number-next{width:100%;min-width:0}.invoice-number-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} /* Plattform-Auswahl und Verkaufsübersicht */ #incomePlatformField{display:flex;flex-direction:column} .platform-badge{ display:inline-flex;width:max-content;align-items:center; padding:4px 8px;border-radius:999px;border:1px solid var(--line); background:var(--surface-2);color:var(--text); font-size:9px;line-height:1;font-weight:800;letter-spacing:.015em } .sales-overview-summary{ display:grid;grid-template-columns:minmax(260px,1.5fr) repeat(2,minmax(160px,.75fr)); gap:12px;margin-bottom:12px } .sales-overview-total,.sales-overview-metric{padding:18px} .sales-overview-total>strong{display:block;margin:8px 0 4px;font-size:30px;letter-spacing:-.045em} .sales-overview-total p{margin:0;color:var(--muted);font-size:11px} .sales-overview-metric{display:flex;flex-direction:column;justify-content:center} .sales-overview-metric span{color:var(--muted);font-size:10px} .sales-overview-metric strong{margin:7px 0 3px;font-size:19px} .sales-overview-metric small{color:var(--muted)} .platform-summary-grid{ display:grid;grid-template-columns:repeat(6,minmax(115px,1fr)); gap:10px;margin-bottom:14px } .platform-summary-card{padding:14px} .platform-summary-card>div{display:flex;align-items:center;justify-content:space-between;gap:7px} .platform-summary-card>div>span:last-child{color:var(--muted);font-size:9px} .platform-summary-card>strong{display:block;margin-top:12px;font-size:16px} .sales-ledger{overflow:hidden} .sales-ledger .toolbar{padding:17px 18px} .sales-ledger-head,.sales-ledger-row{ display:grid;grid-template-columns:100px minmax(190px,1.5fr) 110px 135px minmax(150px,1fr) 120px; gap:12px;align-items:center } .sales-ledger-head{ padding:9px 18px;border-top:1px solid var(--line);border-bottom:1px solid var(--line); color:var(--muted);font-size:8px;font-weight:750;letter-spacing:.08em;text-transform:uppercase } .sales-ledger-row{padding:13px 18px;border-bottom:1px solid var(--line)} .sales-ledger-row:last-child{border-bottom:0} .sales-ledger-date{font-size:10px;color:var(--muted)} .sales-ledger-date small{display:block;margin-top:3px} .sales-ledger-main strong{display:block;font-size:11px} .sales-ledger-main span{display:block;margin-top:3px;color:var(--muted);font-size:9.5px} .sales-ledger-ref strong{color:var(--text);font-size:10px;font-weight:900} .sales-ledger-ref span{color:var(--muted)} .sales-ledger-tax strong{display:block;font-size:10px} .sales-ledger-tax span{display:block;margin-top:3px;color:var(--muted);font-size:9px} .sales-ledger-gross{text-align:right;font-size:12px;font-weight:850} @media(max-width:1050px){ .platform-summary-grid{grid-template-columns:repeat(3,minmax(125px,1fr))} .sales-ledger{overflow-x:auto} .sales-ledger-head,.sales-ledger-row{min-width:900px} } @media(max-width:700px){ .sales-overview-summary{grid-template-columns:1fr} .platform-summary-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } /* Umbuchungen */ .transfer-fields{display:none;margin-top:4px;padding:16px;border:1px solid var(--line);border-radius:14px;background:var(--surface-2)} .transfer-head h3{margin:5px 0 4px} .transfer-head p{margin:0 0 14px;color:var(--muted);font-size:11px;line-height:1.5} .transfer-grid{display:grid;grid-template-columns:minmax(180px,1fr) 38px minmax(180px,1fr);gap:10px;align-items:end} .transfer-arrow{display:grid;place-items:center;min-height:43px;font-size:20px;font-weight:800;color:var(--muted)} .transfer-badge{display:inline-flex;width:max-content;margin-top:5px;padding:4px 7px;border-radius:7px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);font-size:9px;font-weight:850} .platform-balance{display:block;margin-top:8px;color:var(--muted);font-size:9px;line-height:1.4} .platform-balance b{color:var(--text);font-weight:800} @media(max-width:620px){.transfer-grid{grid-template-columns:1fr}.transfer-arrow{min-height:22px;transform:rotate(90deg)}} /* Dashboard: gleichmäßige Konten-/Plattformübersicht */ .dashboard-wallet-section{ margin-bottom:16px; padding:20px; border:1px solid var(--line); border-radius:18px; background:var(--panel); } .dashboard-wallet-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:16px; } .dashboard-wallet-head h3{ margin:5px 0 4px; font-size:18px; letter-spacing:-.025em; } .dashboard-wallet-head p{ margin:0; color:var(--muted); font-size:11px; } .dashboard-wallet-total{ min-width:180px; text-align:right; } .dashboard-wallet-total span{ display:block; color:var(--muted); font-size:9px; text-transform:uppercase; letter-spacing:.09em; } .dashboard-wallet-total strong{ display:block; margin-top:5px; font-size:20px; letter-spacing:-.03em; } .dashboard-wallet-grid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px; align-items:stretch; } .dashboard-wallet-card{ min-width:0; min-height:124px; display:flex; flex-direction:column; align-items:stretch; justify-content:space-between; padding:14px; border:1px solid var(--line); border-radius:13px; background:var(--panel-2); color:var(--text); text-align:left; cursor:pointer; } .dashboard-wallet-card:hover{ transform:translateY(-1px); border-color:var(--muted); } .dashboard-wallet-card-top{ min-height:25px; display:flex; align-items:center; justify-content:space-between; gap:8px; } .dashboard-wallet-card-top>span:last-child{ overflow:hidden; color:var(--muted); font-size:8.5px; white-space:nowrap; text-overflow:ellipsis; } .dashboard-wallet-card>strong{ display:block; margin-top:14px; font-size:20px; line-height:1; letter-spacing:-.035em; } .dashboard-wallet-card>small{ display:block; margin-top:9px; color:var(--muted); font-size:8.5px; line-height:1.35; } /* Die beiden großen Dashboard-Boxen stehen exakt auf einem Raster. */ .minimal-dashboard{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; align-items:stretch; } .balance-card,.allocation-card{ min-width:0; height:100%; } /* Verkaufsübersicht: alle Plattformboxen gleich breit und gleich hoch. */ .platform-summary-grid{ grid-template-columns:repeat(6,minmax(0,1fr)) !important; align-items:stretch; } .platform-summary-card{ min-width:0; min-height:118px; height:100%; display:flex; flex-direction:column; justify-content:space-between; } .platform-summary-card>div{ min-height:25px; } .platform-summary-card>strong{ margin-top:14px; } .platform-balance{ margin-top:9px; } /* Einnahmen sind immer Verkauf; das Feld bleibt sichtbar, aber gesperrt. */ #transactionCategoryField select:disabled{ opacity:1; color:var(--text); cursor:not-allowed; } @media(max-width:1150px){ .dashboard-wallet-grid,.platform-summary-grid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; } } @media(max-width:1050px){ .minimal-dashboard{ grid-template-columns:1fr !important; } } @media(max-width:720px){ .dashboard-wallet-head{ align-items:flex-start; flex-direction:column; } .dashboard-wallet-total{ min-width:0; text-align:left; } .dashboard-wallet-grid,.platform-summary-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } @media(max-width:480px){ .dashboard-wallet-grid,.platform-summary-grid{ grid-template-columns:1fr !important; } } /* Dashboard Umsatz-Fix: gleichmäßige und stabile Ausrichtung */ .dashboard-wallet-grid{ grid-auto-rows:1fr; } .dashboard-wallet-card{ height:100%; } .minimal-dashboard{ align-items:stretch !important; } .balance-card,.allocation-card{ align-self:stretch; } .balance-lines{ width:100%; } /* Einnahme/Ausgabe/Umbuchung – sauberes Formularraster */ #transactionForm.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:22px; row-gap:18px; align-items:start; } #transactionForm > label{ min-width:0; margin:0; display:flex; flex-direction:column; gap:8px; } #transactionForm > label.span-2, #transactionForm > .span-2{ grid-column:1 / -1; } #transactionForm input, #transactionForm select{ width:100%; min-width:0; height:48px; box-sizing:border-box; } #transactionForm .field-hint{ display:block; min-height:15px; margin-top:1px; line-height:1.35; } /* Feste, nachvollziehbare Anordnung */ #transactionForm .tx-grid-partner{grid-column:1} #transactionForm .tx-grid-platform{grid-column:2} #transactionForm .tx-grid-category{grid-column:1} #transactionForm .tx-grid-amount{grid-column:2} #transactionForm .tx-grid-tax{grid-column:1} #transactionForm .tx-grid-business{grid-column:2} #transactionForm .tx-grid-status{grid-column:1} /* Partner/Kunde darf nicht mehr als schmale Sonderbox erscheinen */ #transactionForm .tx-grid-partner input, #transactionForm .tx-grid-platform select, #transactionForm .tx-grid-category select, #transactionForm .tx-grid-amount input, #transactionForm .tx-grid-tax select, #transactionForm .tx-grid-business input, #transactionForm .tx-grid-status select{ max-width:none !important; width:100% !important; } /* Kategorie bei Einnahmen bleibt gesperrt, sieht aber wie ein normales Feld aus */ #transactionForm .tx-grid-category select:disabled{ opacity:1; -webkit-text-fill-color:var(--text); color:var(--text); background:var(--panel-2); } /* Verkaufskostenblock sauber unterhalb des Grundformulars */ #transactionForm .sale-cost-fields, #transactionForm .expense-purchase-fields, #transactionForm .transfer-fields{ grid-column:1 / -1; width:100%; margin-top:2px; } /* Innenraster des Wareneinsatz-Blocks angleichen */ #transactionForm .sale-cost-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; align-items:end; } #transactionForm .sale-cost-grid > label{ min-width:0; display:flex; flex-direction:column; gap:8px; } #transactionForm .sale-cost-preview{ grid-column:1 / -1; min-height:48px; display:flex; align-items:center; } /* Buttons bündig */ #transactionForm .form-actions{ grid-column:1 / -1; margin-top:2px; } /* Modal etwas ruhiger/breiter, damit nichts gequetscht wirkt */ #modalBackdrop .modal{ width:min(960px,calc(100vw - 36px)); } #modalBackdrop .modal-body, #modalBackdrop .modal-content{ min-width:0; } @media(max-width:760px){ #transactionForm.form-grid{ grid-template-columns:1fr; column-gap:0; row-gap:16px; } #transactionForm .tx-grid-partner, #transactionForm .tx-grid-platform, #transactionForm .tx-grid-category, #transactionForm .tx-grid-amount, #transactionForm .tx-grid-tax, #transactionForm .tx-grid-business, #transactionForm .tx-grid-status, #transactionForm > label.span-2, #transactionForm > .span-2{ grid-column:1; } #transactionForm .sale-cost-grid{ grid-template-columns:1fr; } #transactionForm .sale-cost-preview{ grid-column:1; } } /* Modal-Scroll FIX: Einnahmen/Ausgaben/Umbuchungen vollständig scrollbar */ #modalBackdrop{ position:fixed; inset:0; overflow-y:auto !important; overflow-x:hidden; padding:24px 16px; align-items:flex-start !important; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } #modalBackdrop .modal{ width:min(960px,calc(100vw - 32px)); max-height:none !important; min-height:0; margin:auto; overflow:visible !important; } #modalBackdrop .modal-card{ max-height:none !important; overflow:visible !important; } #modalBackdrop .modal-body, #modalBackdrop .modal-content{ max-height:none !important; overflow:visible !important; } #transactionForm{ padding-bottom:28px; } /* Falls ältere CSS-Regeln das Modal zentrieren oder abschneiden */ #modalBackdrop.hidden{ display:none !important; } @media(max-height:820px){ #modalBackdrop{ padding-top:14px; padding-bottom:28px; } } @media(max-width:760px){ #modalBackdrop{ padding:10px 8px 24px; } #modalBackdrop .modal{ width:100%; } } /* GLOBALER MODAL-SCROLL FIX Alle Dialoge bleiben auf Mac/Safari und kleinen Displays vollständig erreichbar. */ #invoiceModalBackdrop,#invoiceUploadBackdrop,#modalBackdrop,#partnerModalBackdrop,#receiptModalBackdrop,#transactionDetailBackdrop{ position:fixed !important; inset:0 !important; overflow-y:auto !important; overflow-x:hidden !important; align-items:flex-start !important; justify-content:center; padding:24px 16px 34px !important; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; box-sizing:border-box; } #invoiceModalBackdrop > .modal, #invoiceUploadBackdrop > .modal, #modalBackdrop > .modal, #partnerModalBackdrop > .modal, #receiptModalBackdrop > .modal, #transactionDetailBackdrop > .modal, #invoiceModalBackdrop > .modal-card, #invoiceUploadBackdrop > .modal-card, #modalBackdrop > .modal-card, #partnerModalBackdrop > .modal-card, #receiptModalBackdrop > .modal-card, #transactionDetailBackdrop > .modal-card, #invoiceModalBackdrop .modal, #invoiceUploadBackdrop .modal, #modalBackdrop .modal, #partnerModalBackdrop .modal, #receiptModalBackdrop .modal, #transactionDetailBackdrop .modal{ flex:0 0 auto; max-height:none !important; min-height:0 !important; overflow:visible !important; margin:auto !important; } #invoiceModalBackdrop .modal-card, #invoiceUploadBackdrop .modal-card, #modalBackdrop .modal-card, #partnerModalBackdrop .modal-card, #receiptModalBackdrop .modal-card, #transactionDetailBackdrop .modal-card, #invoiceModalBackdrop .modal-body, #invoiceUploadBackdrop .modal-body, #modalBackdrop .modal-body, #partnerModalBackdrop .modal-body, #receiptModalBackdrop .modal-body, #transactionDetailBackdrop .modal-body, #invoiceModalBackdrop .modal-content, #invoiceUploadBackdrop .modal-content, #modalBackdrop .modal-content, #partnerModalBackdrop .modal-content, #receiptModalBackdrop .modal-content, #transactionDetailBackdrop .modal-content, #invoiceModalBackdrop form, #invoiceUploadBackdrop form, #modalBackdrop form, #partnerModalBackdrop form, #receiptModalBackdrop form, #transactionDetailBackdrop form{ max-height:none !important; } #invoiceModalBackdrop .modal-body, #invoiceUploadBackdrop .modal-body, #modalBackdrop .modal-body, #partnerModalBackdrop .modal-body, #receiptModalBackdrop .modal-body, #transactionDetailBackdrop .modal-body, #invoiceModalBackdrop .modal-content, #invoiceUploadBackdrop .modal-content, #modalBackdrop .modal-content, #partnerModalBackdrop .modal-content, #receiptModalBackdrop .modal-content, #transactionDetailBackdrop .modal-content{ overflow:visible !important; } /* Unten immer Luft lassen, damit Speichern/Abbrechen nicht abgeschnitten werden. */ #invoiceModalBackdrop form, #invoiceUploadBackdrop form, #modalBackdrop form, #partnerModalBackdrop form, #receiptModalBackdrop form, #transactionDetailBackdrop form{ padding-bottom:max(24px,env(safe-area-inset-bottom)) !important; } #invoiceModalBackdrop.hidden,#invoiceUploadBackdrop.hidden,#modalBackdrop.hidden,#partnerModalBackdrop.hidden,#receiptModalBackdrop.hidden,#transactionDetailBackdrop.hidden{ display:none !important; } @media(max-height:820px){ #invoiceModalBackdrop,#invoiceUploadBackdrop,#modalBackdrop,#partnerModalBackdrop,#receiptModalBackdrop,#transactionDetailBackdrop{ padding-top:12px !important; padding-bottom:30px !important; } } @media(max-width:760px){ #invoiceModalBackdrop,#invoiceUploadBackdrop,#modalBackdrop,#partnerModalBackdrop,#receiptModalBackdrop,#transactionDetailBackdrop{ padding:10px 8px 28px !important; } #invoiceModalBackdrop > .modal, #invoiceUploadBackdrop > .modal, #modalBackdrop > .modal, #partnerModalBackdrop > .modal, #receiptModalBackdrop > .modal, #transactionDetailBackdrop > .modal, #invoiceModalBackdrop > .modal-card, #invoiceUploadBackdrop > .modal-card, #modalBackdrop > .modal-card, #partnerModalBackdrop > .modal-card, #receiptModalBackdrop > .modal-card, #transactionDetailBackdrop > .modal-card, #invoiceModalBackdrop .modal, #invoiceUploadBackdrop .modal, #modalBackdrop .modal, #partnerModalBackdrop .modal, #receiptModalBackdrop .modal, #transactionDetailBackdrop .modal{ width:100% !important; max-width:100% !important; } } /* ========================================================= FINALER SCROLL-FIX – GILT FÜR ALLE POP-UPS / BUCHUNGSARTEN ========================================================= */ /* Auch die normale Übersichtsseite darf immer vertikal scrollen. */ html,body{ min-height:100% !important; height:auto !important; overflow-x:hidden !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch; } .app-shell,.main,.content{ min-height:0; height:auto; } .main,.content{ overflow:visible !important; } /* Backdrop bleibt am Bildschirm. Gescrollt wird IM Fenster selbst. */ #invoiceModalBackdrop,#invoiceUploadBackdrop,#modalBackdrop,#partnerModalBackdrop,#receiptModalBackdrop,#transactionDetailBackdrop{ position:fixed !important; inset:0 !important; display:flex !important; align-items:flex-start !important; justify-content:center !important; overflow:hidden !important; padding:12px !important; box-sizing:border-box !important; } /* JEDES Modal: eigener Scrollbereich. 100vh = Safari-Fallback, 100dvh = moderne Browser. */ #invoiceModalBackdrop > .modal,#invoiceUploadBackdrop > .modal,#modalBackdrop > .modal,#partnerModalBackdrop > .modal,#receiptModalBackdrop > .modal,#transactionDetailBackdrop > .modal{ width:min(960px,100%) !important; max-width:100% !important; max-height:calc(100vh - 24px) !important; max-height:calc(100dvh - 24px) !important; min-height:0 !important; margin:0 auto !important; overflow-x:hidden !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch !important; overscroll-behavior:contain !important; scrollbar-gutter:stable; box-sizing:border-box !important; } /* Alte Regeln dürfen Inhalte innerhalb des Fensters nicht abschneiden. */ #invoiceModalBackdrop .modal-body, #invoiceUploadBackdrop .modal-body, #modalBackdrop .modal-body, #partnerModalBackdrop .modal-body, #receiptModalBackdrop .modal-body, #transactionDetailBackdrop .modal-body, #invoiceModalBackdrop .modal-content, #invoiceUploadBackdrop .modal-content, #modalBackdrop .modal-content, #partnerModalBackdrop .modal-content, #receiptModalBackdrop .modal-content, #transactionDetailBackdrop .modal-content{ max-height:none !important; overflow:visible !important; } #invoiceModalBackdrop form, #invoiceUploadBackdrop form, #modalBackdrop form, #partnerModalBackdrop form, #receiptModalBackdrop form, #transactionDetailBackdrop form{ max-height:none !important; overflow:visible !important; padding-bottom:max(32px,env(safe-area-inset-bottom)) !important; } /* Überschrift oben sichtbar, während man im langen Fenster scrollt. */ #invoiceModalBackdrop .modal-head, #invoiceUploadBackdrop .modal-head, #modalBackdrop .modal-head, #partnerModalBackdrop .modal-head, #receiptModalBackdrop .modal-head, #transactionDetailBackdrop .modal-head{ position:sticky; top:-1px; z-index:8; background:var(--panel); padding-top:1px; } /* Versteckte Fenster bleiben natürlich verborgen. */ #invoiceModalBackdrop.hidden,#invoiceUploadBackdrop.hidden,#modalBackdrop.hidden,#partnerModalBackdrop.hidden,#receiptModalBackdrop.hidden,#transactionDetailBackdrop.hidden{ display:none !important; } @media(max-width:760px){ #invoiceModalBackdrop,#invoiceUploadBackdrop,#modalBackdrop,#partnerModalBackdrop,#receiptModalBackdrop,#transactionDetailBackdrop{ padding:6px !important; } #invoiceModalBackdrop > .modal,#invoiceUploadBackdrop > .modal,#modalBackdrop > .modal,#partnerModalBackdrop > .modal,#receiptModalBackdrop > .modal,#transactionDetailBackdrop > .modal{ width:100% !important; max-height:calc(100vh - 12px) !important; max-height:calc(100dvh - 12px) !important; border-radius:14px !important; } } /* Status "Bezahlt" klar grün hervorheben */ .status.paid, .bd-status.paid, .invoice-status.paid, .paid-status, .status-badge.paid{ color:#16803a !important; background:rgba(22,128,58,.10) !important; border-color:rgba(22,128,58,.22) !important; font-weight:800 !important; } body.dark .status.paid, body.dark .bd-status.paid, body.dark .invoice-status.paid, body.dark .paid-status, body.dark .status-badge.paid{ color:#57d47b !important; background:rgba(87,212,123,.11) !important; border-color:rgba(87,212,123,.24) !important; } /* Plattform-Reports: Monat / Gesamtjahr */ .platform-report-builder{margin-bottom:16px;overflow:hidden;position:relative} .platform-report-builder .panel-head{align-items:center} .platform-report-pdf-mark{width:48px;height:48px;border:1px solid var(--line);border-radius:13px;display:grid;place-items:center;font-size:11px;font-weight:900;letter-spacing:.09em;background:var(--panel-2)} .platform-report-controls{display:grid;grid-template-columns:1.15fr .85fr .8fr 1fr auto;gap:10px;align-items:end;margin-top:18px} .platform-report-controls label{display:flex;flex-direction:column;gap:7px;color:var(--muted);font-size:10px;font-weight:750} .platform-report-controls select{height:46px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2);color:var(--text);padding:0 12px;font:inherit;font-size:12px;outline:none} .platform-report-controls select:focus{border-color:var(--text)} .platform-report-download{height:46px;white-space:nowrap} .platform-report-includes{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:14px;padding-top:13px;border-top:1px solid var(--line)} .platform-report-includes span{font-size:9px;color:var(--muted);font-weight:750;margin-right:3px} .platform-report-includes b{font-size:8.5px;padding:5px 8px;border:1px solid var(--line);border-radius:999px;background:var(--panel-2)} .report-year-cards{margin-top:0} @media(max-width:1050px){.platform-report-controls{grid-template-columns:1fr 1fr 1fr 1fr}.platform-report-download{grid-column:1/-1}} @media(max-width:680px){.platform-report-controls{grid-template-columns:1fr 1fr}.platform-report-download{grid-column:1/-1}.platform-report-pdf-mark{display:none}} @media(max-width:440px){.platform-report-controls{grid-template-columns:1fr}.platform-report-download{grid-column:auto}} /* Vinted Username - nur interne Verkaufszuordnung */ .vinted-username-field{ flex-direction:column; } .vinted-user-tag{ display:inline-flex; width:max-content; margin-top:6px; padding:4px 7px; border:1px solid var(--line); border-radius:7px; background:var(--panel-2); color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.01em; } /* Vinted Username direkt in der Einnahmen-Übersicht */ .vinted-income-username{ display:block; width:max-content; margin-top:4px; margin-bottom:2px; color:var(--muted); font-size:10px; font-weight:750; line-height:1.35; } /* Positive Einnahmen immer grün – konsistent in allen Ansichten */ .positive-income, .sales-ledger-gross, .tx-amount.in, .money.pos, .type-ledger .tx-amount.in, .banking-list .tx-amount.in{ color:#0b9f62 !important; font-weight:800; } /* Auch grüne Einnahmen in Detailansichten */ .bd-amount.positive-income{ color:#0b9f62 !important; } /* Dark Mode: heller, gut lesbarer Grünton */ body.dark .positive-income, body.dark .sales-ledger-gross, body.dark .tx-amount.in, body.dark .money.pos, body.dark .type-ledger .tx-amount.in, body.dark .banking-list .tx-amount.in, body.dark .bd-amount.positive-income{ color:#43d58a !important; } /* Mehrfachauswahl / Sammellöschen */ .bulk-selection-controls{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; } .bulk-selection-count{ display:inline-flex; align-items:center; gap:4px; min-height:38px; padding:0 11px; border:1px solid var(--line); border-radius:10px; color:var(--muted); background:var(--panel); font-size:10px; white-space:nowrap; } .bulk-selection-count b{ color:var(--text); font-size:12px; } .bulk-delete-btn{ min-height:38px; padding:0 13px; border:1px solid rgba(188,48,48,.30); border-radius:10px; background:rgba(188,48,48,.06); color:#ad2d2d; font-weight:800; cursor:pointer; } .bulk-delete-btn:hover:not(:disabled){ background:rgba(188,48,48,.11); } .bulk-delete-btn:disabled{ opacity:.42; cursor:not-allowed; } .bulk-select-marker{ width:25px; height:25px; min-width:25px; display:inline-grid; place-items:center; padding:0; margin-right:10px; border:1.5px solid var(--line); border-radius:8px; background:var(--panel); color:#fff; font-size:13px; font-weight:900; cursor:pointer; vertical-align:middle; transition:.14s ease; } .bulk-select-marker:hover{ border-color:rgba(11,159,98,.55); } .bulk-select-marker.selected{ background:#0b9f62; border-color:#0b9f62; color:#fff; } .statement-item.bulk-selectable-row, .sales-ledger-row.bulk-selectable-row{ position:relative; cursor:pointer; } .statement-item.bulk-selectable-row>.bulk-select-marker, .sales-ledger-row.bulk-selectable-row>.bulk-select-marker{ position:absolute; left:14px; top:50%; transform:translateY(-50%); margin:0; z-index:2; } .statement-item.bulk-selectable-row{ padding-left:56px !important; } .sales-ledger-row.bulk-selectable-row{ padding-left:54px !important; } .bulk-selected{ background:rgba(11,159,98,.055) !important; box-shadow:inset 3px 0 0 rgba(11,159,98,.70); } table tr.bulk-selected td{ background:rgba(11,159,98,.045); } .bulk-table-selectable{ cursor:pointer; } .toolbar-actions{ display:flex; gap:8px; align-items:center; flex-wrap:wrap; } body.dark .bulk-select-marker.selected{ background:#43d58a; border-color:#43d58a; color:#102018; } body.dark .bulk-selected{ background:rgba(67,213,138,.065) !important; box-shadow:inset 3px 0 0 rgba(67,213,138,.72); } body.dark table tr.bulk-selected td{ background:rgba(67,213,138,.045); } @media(max-width:760px){ .bulk-selection-controls{ width:100%; } .bulk-selection-controls .secondary-btn, .bulk-selection-controls .bulk-delete-btn{ flex:1 1 auto; } } /* ========================================================= V29 · Datensicherheit, Bankabgleich, Auszahlungen & Reports ========================================================= */ .negative-expense{color:#b34a43!important} .closed-month-badge{ display:block; margin-top:4px; color:var(--muted); font-size:8px; font-weight:700; } .closed-month-inline{margin-left:6px;font-size:10px;opacity:.65} /* Dashboard Monatsvergleich */ .dashboard-comparison{margin:18px 0 20px} .dashboard-comparison-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:10px} .dashboard-comparison-head h3{margin:4px 0 0;font-size:16px} .dashboard-comparison-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px} .dashboard-comparison-grid .card{padding:16px 17px;display:grid;gap:7px} .dashboard-comparison-grid span{font-size:9px;color:var(--muted);font-weight:750;text-transform:uppercase;letter-spacing:.06em} .dashboard-comparison-grid strong{font-size:19px;letter-spacing:-.03em} .dashboard-comparison-grid small{font-size:9px;color:var(--muted)} /* Bankabgleich */ .reconciliation-card{margin:16px 0;padding:18px} .reconciliation-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap} .reconciliation-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0} .reconciliation-stats>div{padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2);display:grid;gap:4px} .reconciliation-stats span{font-size:8px;text-transform:uppercase;color:var(--muted);font-weight:750} .reconciliation-stats strong{font-size:17px} .reconciliation-list{display:grid;border-top:1px solid var(--line)} .reconciliation-row{display:grid;grid-template-columns:minmax(0,1.5fr) 130px minmax(220px,1fr);gap:14px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--line)} .reconciliation-row>div:first-child{display:grid;gap:3px} .reconciliation-row>div:first-child strong{font-size:10px} .reconciliation-row>div:first-child span{font-size:9px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .reconciliation-row>strong{text-align:right} .reconciliation-match{display:flex;align-items:center;justify-content:flex-end;gap:7px;min-width:0} .reconciliation-match .tiny-btn{max-width:190px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* Vinted Auszahlungen */ .vinted-payout-stats,.receivable-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:16px} .vinted-payout-stats .card,.receivable-stats .card{padding:18px;display:grid;gap:7px} .vinted-payout-stats span,.receivable-stats span{font-size:9px;color:var(--muted);text-transform:uppercase;font-weight:750;letter-spacing:.06em} .vinted-payout-stats strong,.receivable-stats strong{font-size:22px} .vinted-payout-stats small,.receivable-stats small{font-size:9px;color:var(--muted)} .payout-section{padding:18px;margin-bottom:16px} .payout-sales-list{display:grid;border-top:1px solid var(--line)} .payout-sale-row{width:100%;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);display:grid;grid-template-columns:minmax(0,1.7fr) 150px 150px;gap:14px;align-items:center;padding:13px 4px;text-align:left;cursor:pointer} .payout-sale-row:hover{background:var(--panel-2)} .payout-sale-row>div{display:grid;gap:4px} .payout-sale-row>div strong{font-size:11px} .payout-sale-row>div span,.payout-sale-row>span{font-size:9px;color:var(--muted)} .payout-sale-row>strong{text-align:right} /* Offene Rechnungen */ .receivable-list-card{padding:18px} .receivable-list{display:grid;border-top:1px solid var(--line)} .receivable-row{display:grid;grid-template-columns:minmax(0,1.5fr) 105px 130px auto;gap:12px;align-items:center;padding:12px 2px;border-bottom:1px solid var(--line)} .receivable-main{border:0;background:transparent;color:var(--text);display:grid;gap:4px;text-align:left;cursor:pointer;padding:0} .receivable-main strong{font-size:11px} .receivable-main span{font-size:9px;color:var(--muted)} .receivable-row>strong{text-align:right} /* Papierkorb & Verlauf */ .trash-card,.audit-card{padding:18px;margin-bottom:16px} .trash-list,.audit-list{display:grid;border-top:1px solid var(--line)} .trash-row{display:grid;grid-template-columns:minmax(0,1fr) 90px auto;gap:14px;align-items:center;padding:13px 2px;border-bottom:1px solid var(--line)} .trash-row>div:first-child{display:grid;gap:4px} .trash-row strong{font-size:11px} .trash-row span,.trash-row small{font-size:9px;color:var(--muted)} .trash-row>div:last-child{display:flex;gap:7px;justify-content:flex-end} .audit-row{display:grid;grid-template-columns:130px minmax(0,1fr);gap:14px;padding:10px 2px;border-bottom:1px solid var(--line)} .audit-row>span{font-size:9px;color:var(--muted)} .audit-row>div{display:grid;gap:3px} .audit-row strong{font-size:10px} .audit-row small{font-size:9px;color:var(--muted)} /* Globale Suche */ .search-result-section{padding:17px;margin-bottom:13px} .search-result-list{display:grid;border-top:1px solid var(--line)} .search-result-list>button{border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);display:grid;grid-template-columns:minmax(0,1.5fr) 170px 150px;gap:14px;align-items:center;text-align:left;padding:12px 3px;cursor:pointer} .search-result-list>button:hover{background:var(--panel-2)} .search-result-list>button>div{display:grid;gap:3px} .search-result-list strong{font-size:11px} .search-result-list span,.search-result-list small{font-size:9px;color:var(--muted)} .search-result-list>button>strong{text-align:right} /* Monatsabschluss */ .month-close-card,.tax-advisor-card,.backup-settings-card{margin:16px 0} .month-close-controls,.tax-advisor-controls{display:grid;grid-template-columns:180px 220px auto;gap:10px;align-items:end;margin-top:14px} .month-close-controls label,.tax-advisor-controls label{display:flex;flex-direction:column;gap:6px;font-size:9px;color:var(--muted);font-weight:700} .month-close-controls select,.tax-advisor-controls select{min-height:43px} .closed-month-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:13px} .closed-month-list button{border:1px solid var(--line);border-radius:11px;background:var(--panel-2);color:var(--text);padding:9px 11px;display:grid;gap:4px;text-align:left;cursor:pointer} .closed-month-list button strong{font-size:10px} .closed-month-list button small{font-size:8px;color:var(--muted)} /* Backup */ .backup-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:14px} /* Kleine leere Zustände */ .empty-state.compact{min-height:110px;padding:20px} /* Nav: zusätzlicher Platz bei mehr Menüpunkten */ .sidebar .nav{overflow-y:auto;min-height:0;padding-bottom:8px} @media(max-width:1000px){ .dashboard-comparison-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .reconciliation-row{grid-template-columns:minmax(0,1fr) 120px} .reconciliation-match{grid-column:1/-1;justify-content:flex-start} .receivable-row{grid-template-columns:minmax(0,1fr) 100px 120px} .receivable-row>.secondary-btn{grid-column:1/-1;width:max-content} } @media(max-width:720px){ .dashboard-comparison-grid,.vinted-payout-stats,.receivable-stats,.reconciliation-stats{grid-template-columns:1fr} .payout-sale-row,.search-result-list>button{grid-template-columns:1fr} .payout-sale-row>strong,.search-result-list>button>strong{text-align:left} .receivable-row{grid-template-columns:1fr} .receivable-row>strong{text-align:left} .trash-row{grid-template-columns:1fr} .trash-row>div:last-child{justify-content:flex-start;flex-wrap:wrap} .audit-row{grid-template-columns:1fr} .month-close-controls,.tax-advisor-controls{grid-template-columns:1fr} } /* Brutto-/Nettogewinn: Dashboard und einzelne Einnahme */ .dashboard-profit-summary{margin:18px 0 20px} .dashboard-profit-head{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:10px} .dashboard-profit-head h3{margin:4px 0 3px;font-size:16px} .dashboard-profit-head p{margin:0;color:var(--muted);font-size:10px} .dashboard-profit-count{border:1px solid var(--line);border-radius:10px;background:var(--panel-2);padding:7px 10px;color:var(--muted);font-size:9px;font-weight:750;white-space:nowrap} .dashboard-profit-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .dashboard-profit-card{padding:19px 20px;display:grid;gap:8px} .dashboard-profit-card>span{color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase} .dashboard-profit-card>strong{font-size:26px;letter-spacing:-.045em} .dashboard-profit-card>small{color:var(--muted);font-size:9px;line-height:1.45} .dashboard-profit-note{margin:8px 2px 0;color:var(--muted);font-size:8.5px;line-height:1.45} .bd-metric.profit-highlight{border-color:rgba(11,159,98,.18);background:rgba(11,159,98,.035)} .bd-sale-profit{margin-top:16px;padding:20px;border:1px solid var(--line);border-radius:16px;background:var(--panel)} .bd-sale-profit-head h3{margin:4px 0 0;font-size:16px} .bd-sale-profit-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-top:14px} .bd-sale-profit-grid>div{padding:13px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2);display:grid;gap:6px} .bd-sale-profit-grid span{color:var(--muted);font-size:8px;font-weight:750;text-transform:uppercase;letter-spacing:.05em} .bd-sale-profit-grid strong{font-size:14px} .bd-sale-profit-grid .profit-result{border-color:rgba(11,159,98,.20);background:rgba(11,159,98,.045)} .bd-sale-profit>p{margin:10px 2px 0;color:var(--muted);font-size:8.5px;line-height:1.45} body.dark .bd-metric.profit-highlight, body.dark .bd-sale-profit-grid .profit-result{border-color:rgba(67,213,138,.20);background:rgba(67,213,138,.045)} @media(max-width:760px){ .dashboard-profit-grid{grid-template-columns:1fr} .dashboard-profit-head{align-items:flex-start;flex-direction:column} .bd-sale-profit-grid{grid-template-columns:1fr} } /* ========================================================= V29 · Globaler Scroll-Fix Nichts darf in Seiten, Modals oder Tabellen abgeschnitten werden. ========================================================= */ /* Browser-/Safari-Grundlage */ html, body{ width:100%; max-width:100%; min-height:100%; } html{ overflow-y:auto !important; overflow-x:hidden !important; } body{ min-height:100vh !important; min-height:100dvh !important; overflow-x:hidden !important; } /* Haupt-App: Inhaltsbereich darf immer vertikal scrollen */ .app-shell, .app, .layout, .shell{ min-height:100vh; min-height:100dvh; max-height:100vh; max-height:100dvh; overflow:hidden; } main, .main, .main-content, .content, #content{ min-height:0 !important; max-height:100vh !important; max-height:100dvh !important; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; scrollbar-gutter:stable; } /* Genug Platz am Ende jeder Seite, damit der letzte Bereich nie untergeht */ #content{ padding-bottom:56px !important; } /* Sidebar separat scrollbar */ .sidebar{ min-height:0 !important; max-height:100vh !important; max-height:100dvh !important; overflow-y:auto !important; overflow-x:hidden !important; -webkit-overflow-scrolling:touch; } .sidebar .nav{ overflow-y:auto !important; overflow-x:hidden !important; min-height:0 !important; padding-bottom:24px !important; } /* Alle Backdrops bleiben im Viewport, der eigentliche Dialog scrollt */ .modal-backdrop, .backdrop, [id$="Backdrop"]{ position:fixed !important; inset:0 !important; width:100vw !important; height:100vh !important; height:100dvh !important; max-height:100vh !important; max-height:100dvh !important; overflow-y:auto !important; overflow-x:hidden !important; padding:12px !important; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; } /* Direkte Modals / Dialoge */ .modal-backdrop > .modal, .backdrop > .modal, [id$="Backdrop"] > .modal, .modal, .dialog, .modal-card{ max-height:calc(100vh - 24px) !important; max-height:calc(100dvh - 24px) !important; overflow-y:auto !important; overflow-x:hidden !important; min-height:0 !important; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; scrollbar-gutter:stable; padding-bottom:28px; } /* Falls ein Modal einen eigenen Body/Inhaltscontainer besitzt */ .modal-body, .modal-content, .dialog-body, .transaction-detail-content, #transactionDetailContent, .invoice-preview, .receipt-preview{ min-height:0 !important; max-height:none !important; overflow:visible; } /* Kopf im Modal bleibt sichtbar, Inhalt darunter kann scrollen */ .modal-head, .modal-header{ position:sticky; top:0; z-index:10; background:var(--panel); } /* Tabellen horizontal scrollbar statt abgeschnitten */ .table-scroll, .table-wrap, .table-container{ width:100%; max-width:100%; overflow-x:auto !important; overflow-y:visible !important; -webkit-overflow-scrolling:touch; scrollbar-gutter:stable; } /* Große Listen/Reports dürfen nicht von festen Höhen abgeschnitten werden */ .statement-list, .sales-ledger-list, .payout-sales-list, .receivable-list, .reconciliation-list, .search-result-list, .trash-list, .audit-list, .invoice-number-grid, .closed-month-list{ max-height:none !important; overflow:visible !important; } /* Karten / Panels dürfen ihren Inhalt wachsen lassen */ .card, .panel, .banking-list, .sales-ledger, .payout-section, .receivable-list-card, .reconciliation-card, .trash-card, .audit-card, .dashboard-profit-summary{ min-height:0; max-height:none; } /* Kleine Screens: Header/Actions dürfen umbrechen statt abgeschnitten werden */ .page-head, .panel-head, .toolbar, .head-actions, .dashboard-filter-row, .bulk-selection-controls, .backup-actions, .reconciliation-actions{ flex-wrap:wrap !important; } @media(max-width:900px){ #content{ padding-bottom:72px !important; } .modal-backdrop, .backdrop, [id$="Backdrop"]{ align-items:flex-start !important; padding:8px !important; } .modal-backdrop > .modal, .backdrop > .modal, [id$="Backdrop"] > .modal, .modal, .dialog, .modal-card{ width:100% !important; max-width:100% !important; max-height:calc(100dvh - 16px) !important; } } /* Safari-Fallback, falls dvh nicht unterstützt wird */ @supports not (height:100dvh){ main, .main, .main-content, .content, #content, .sidebar{ max-height:100vh !important; } .modal-backdrop, .backdrop, [id$="Backdrop"]{ height:100vh !important; max-height:100vh !important; } .modal-backdrop > .modal, .backdrop > .modal, [id$="Backdrop"] > .modal, .modal, .dialog, .modal-card{ max-height:calc(100vh - 24px) !important; } } /* ========================================================= V29 · Globaler Layout-/Ausrichtungs-Fix Saubere Leerzustände, kein Text-Überlauf, nichts abgeschnitten. ========================================================= */ /* Allgemein: Grid-/Flex-Kinder dürfen korrekt schrumpfen */ #content *, .card *, .panel *, .statement-item > *, .sales-ledger-row > *, .sales-ledger-head > *, .reconciliation-row > *, .receivable-row > *, .payout-sale-row > *, .search-result-list > button > *{ min-width:0; } /* Lange Namen, Beschreibungen und Referenzen umbrechen sauber */ .tx-main, .tx-category, .sales-ledger-main, .sales-ledger-ref, .sales-ledger-tax, .reconciliation-row, .receivable-main, .payout-sale-row, .search-result-list{ overflow-wrap:anywhere; word-break:normal; } /* Einheitlicher Leerzustand für ALLE Listen/Karten */ .empty-state{ width:100%; min-height:132px; padding:28px 24px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:7px; color:var(--muted); background:transparent; line-height:1.45; overflow:visible; } .empty-state strong{ display:block; margin:0; color:var(--text); font-size:14px; font-weight:800; line-height:1.3; letter-spacing:-.01em; } .empty-state span, .empty-state p{ display:block; margin:0; max-width:720px; color:var(--muted); font-size:11px; line-height:1.55; white-space:normal; } .empty-state.compact{ min-height:110px; padding:22px 20px; } /* Verkaufsübersicht: Header und Inhalt strikt getrennt */ .sales-ledger{ overflow:hidden; } .sales-ledger-head{ position:relative; z-index:1; min-height:42px; background:var(--panel-2); } .sales-ledger-list{ display:block; width:100%; min-height:0; } .sales-ledger-list > .empty-state{ border-top:0; border-radius:0 0 18px 18px; } /* Kein Text darf sich über die Spalten legen */ .sales-ledger-head > span, .sales-ledger-row > div{ min-width:0; overflow:hidden; } .sales-ledger-head > span{ white-space:nowrap; text-overflow:ellipsis; } .sales-ledger-main strong, .sales-ledger-main span, .sales-ledger-main small, .sales-ledger-ref strong, .sales-ledger-ref span, .sales-ledger-tax strong, .sales-ledger-tax span{ max-width:100%; } .sales-ledger-main strong, .sales-ledger-main span{ white-space:normal; } .sales-ledger-ref strong, .sales-ledger-ref span{ white-space:normal; overflow-wrap:anywhere; } /* Normale Buchungslisten */ .statement-list{ width:100%; min-width:0; } .statement-item{ width:100%; min-width:0; } .tx-main strong, .tx-main span, .tx-main small, .tx-category strong, .tx-category span{ max-width:100%; white-space:normal; overflow-wrap:anywhere; } /* Tabellen: Inhalte bleiben erreichbar, ohne dass Karten abgeschnitten werden */ .table-card{ min-width:0; overflow:hidden; } .table-scroll{ display:block; width:100%; max-width:100%; overflow-x:auto !important; overflow-y:visible !important; -webkit-overflow-scrolling:touch; } .table-scroll table{ min-width:max-content; } /* Überschriften / Aktionen umbrechen sauber */ .page-head, .page-head > div, .panel-head, .toolbar, .head-actions{ min-width:0; } .page-head{ gap:16px; } .head-actions{ max-width:100%; } /* Karten und Statistiken dürfen nicht überlaufen */ .sales-overview-summary, .platform-summary-grid, .dashboard-wallet-grid, .dashboard-comparison-grid, .dashboard-profit-grid, .vinted-payout-stats, .receivable-stats, .reconciliation-stats{ min-width:0; } .sales-overview-summary > *, .platform-summary-grid > *, .dashboard-wallet-grid > *, .dashboard-comparison-grid > *, .dashboard-profit-grid > *, .vinted-payout-stats > *, .receivable-stats > *, .reconciliation-stats > *{ min-width:0; } /* Texte in Kennzahlenkarten sauber umbrechen */ .card strong, .card span, .card small, .card p{ overflow-wrap:anywhere; } /* Buttons dürfen bei langen Beschriftungen wachsen statt abgeschnitten werden */ .primary-btn, .secondary-btn, .tiny-btn, .danger-btn{ max-width:100%; white-space:normal; line-height:1.25; } /* Desktop kleiner / Tablet: Tabellenlisten bleiben zugänglich */ @media(max-width:1050px){ .sales-ledger{ overflow-x:auto !important; overflow-y:hidden; -webkit-overflow-scrolling:touch; } .sales-ledger-head, .sales-ledger-row{ min-width:900px; } /* Der Leerzustand soll NICHT 900px breit erzwungen werden */ .sales-ledger-list > .empty-state{ min-width:min(100%,900px); width:100%; } } /* Kleinere Fenster: Listen werden kompakter statt abgeschnitten */ @media(max-width:760px){ .empty-state{ min-height:118px; padding:22px 18px; } .empty-state strong{ font-size:13px; } .empty-state span, .empty-state p{ font-size:10.5px; } .page-head, .panel-head{ align-items:flex-start !important; } } /* Sehr kleine Displays: Buchungslisten in lesbares Raster bringen */ @media(max-width:620px){ .statement-item{ grid-template-columns:34px minmax(0,1fr) auto !important; gap:10px; } .statement-item .tx-category, .statement-item .tx-date{ grid-column:2/-1; display:block !important; } .statement-item .tx-amount{ align-self:start; } .statement-item .row-actions{ grid-column:2/-1; justify-content:flex-start; flex-wrap:wrap; } } /* ========================================================= V30 · Bestandsverwaltung ========================================================= */ .inventory-summary-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:16px; } .inventory-summary-grid>.card{ padding:18px; display:grid; gap:7px; } .inventory-summary-grid span, .dashboard-inventory-summary span{ color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; } .inventory-summary-grid strong, .dashboard-inventory-summary strong{ font-size:22px; letter-spacing:-.035em; } .inventory-summary-grid small, .dashboard-inventory-summary small{ color:var(--muted); font-size:9px; } .inventory-card, .inventory-help-card{ padding:18px; margin-bottom:16px; } .inventory-table td strong{ font-size:11px; } .inventory-low{ color:#b27a18 !important; } .inventory-help-card>p{ margin:14px 0 0; color:var(--muted); font-size:9px; line-height:1.5; } .inventory-flow{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-top:14px; } .inventory-flow>div{ padding:14px; border:1px solid var(--line); border-radius:11px; background:var(--panel-2); display:grid; gap:5px; } .inventory-flow strong{ font-size:11px; } .inventory-flow span{ color:var(--muted); font-size:9px; line-height:1.45; } .dashboard-inventory{ margin:18px 0 20px; } .dashboard-inventory-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; margin-bottom:10px; } .dashboard-inventory-head h3{ margin:4px 0 3px; font-size:16px; } .dashboard-inventory-head p{ margin:0; color:var(--muted); font-size:10px; } .dashboard-inventory-summary{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .dashboard-inventory-summary>.card{ padding:17px 18px; display:grid; gap:7px; } .dashboard-stock-strip{ margin-top:9px; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px; } .dashboard-stock-strip button{ border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--text); padding:10px; display:grid; gap:5px; text-align:left; cursor:pointer; min-width:0; } .dashboard-stock-strip button:hover{ background:var(--panel-2); } .dashboard-stock-strip span{ color:var(--muted); font-size:8.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .dashboard-stock-strip strong{ font-size:12px; } .inventory-live-preview{ min-height:68px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:3px; } .inventory-live-preview span, .inventory-live-preview small{ color:var(--muted); font-size:9px; } .inventory-live-preview strong{ font-size:16px; } .inventory-inline-tag{ display:inline-flex; width:max-content; max-width:100%; margin-top:5px; padding:4px 7px; border:1px solid var(--line); border-radius:7px; background:var(--panel-2); color:var(--muted); font-size:9px; font-weight:750; } .bd-metric.inventory-metric{ border-color:rgba(11,159,98,.16); } @media(max-width:1050px){ .inventory-summary-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); } .dashboard-stock-strip{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media(max-width:700px){ .inventory-summary-grid, .dashboard-inventory-summary, .inventory-flow{ grid-template-columns:1fr; } .dashboard-stock-strip{ grid-template-columns:repeat(2,minmax(0,1fr)); } .dashboard-inventory-head{ align-items:flex-start; flex-direction:column; } } /* ========================================================= V30 · Klickbare Warenauswahl bei Einnahmen ========================================================= */ .inventory-picker-field{ grid-column:span 2; } .inventory-picker-input-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; gap:8px; align-items:center; } .inventory-picker-input-row input{ min-width:0; } .inventory-picker-open{ min-height:48px; white-space:nowrap; } .inventory-picker-modal{ width:min(720px,100%) !important; } .inventory-picker-search{ margin:4px 0 12px; } .inventory-picker-search input{ width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--text); outline:none; } .inventory-picker-list{ display:grid; gap:8px; min-height:120px; max-height:55vh; max-height:55dvh; overflow-y:auto !important; overflow-x:hidden !important; padding-right:2px; -webkit-overflow-scrolling:touch; } .inventory-picker-item{ width:100%; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:16px; align-items:center; padding:14px 15px; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--text); text-align:left; cursor:pointer; transition:.14s ease; } .inventory-picker-item:hover{ background:var(--panel-2); } .inventory-picker-item.selected{ border-color:rgba(11,159,98,.35); background:rgba(11,159,98,.055); } .inventory-picker-item-main{ min-width:0; display:grid; gap:4px; } .inventory-picker-item-main strong{ font-size:12px; overflow-wrap:anywhere; } .inventory-picker-item-main span{ color:var(--muted); font-size:9px; } .inventory-picker-stock{ min-width:92px; display:grid; gap:4px; text-align:right; } .inventory-picker-stock span{ color:var(--muted); font-size:8px; font-weight:750; text-transform:uppercase; letter-spacing:.05em; } .inventory-picker-stock strong{ font-size:13px; } .inventory-picker-actions{ margin-top:14px; } body.dark .inventory-picker-item.selected{ border-color:rgba(67,213,138,.34); background:rgba(67,213,138,.06); } @media(max-width:680px){ .inventory-picker-field{ grid-column:span 1; } .inventory-picker-input-row{ grid-template-columns:1fr; } .inventory-picker-open{ width:100%; } .inventory-picker-item{ grid-template-columns:1fr auto; gap:10px; padding:12px; } } /* ========================================================= V30 · Versandkosten aus Verkauf automatisch als Bank-Ausgabe ========================================================= */ .shipping-expense-box{ grid-column:1/-1; margin:3px 0 5px; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); } .shipping-expense-toggle{ display:flex !important; flex-direction:row !important; align-items:flex-start; gap:10px; cursor:pointer; } .shipping-expense-toggle>input{ width:18px; height:18px; margin:2px 0 0; flex:0 0 auto; } .shipping-expense-toggle>span{ display:grid; gap:3px; } .shipping-expense-toggle strong{ color:var(--text); font-size:11px; } .shipping-expense-toggle small{ color:var(--muted); font-size:9px; line-height:1.45; } .shipping-expense-fields{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin-top:13px; padding-top:13px; border-top:1px solid var(--line); } .shipping-expense-preview{ grid-column:1/-1; min-height:62px; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; gap:3px; } .shipping-expense-preview span, .shipping-expense-preview small{ color:var(--muted); font-size:9px; } .shipping-expense-preview strong{ font-size:15px; } .shipping-linked-tag{ display:inline-flex; width:max-content; max-width:100%; margin-top:5px; padding:4px 7px; border:1px solid rgba(179,74,67,.18); border-radius:7px; background:rgba(179,74,67,.045); color:var(--muted); font-size:9px; font-weight:750; } .bd-metric.shipping-expense-metric{ border-color:rgba(179,74,67,.18); background:rgba(179,74,67,.035); } body.dark .shipping-linked-tag, body.dark .bd-metric.shipping-expense-metric{ border-color:rgba(220,110,100,.20); background:rgba(220,110,100,.045); } @media(max-width:720px){ .shipping-expense-fields{ grid-template-columns:1fr; } } /* ========================================================= V31 · Manuelle Bestandskorrektur ========================================================= */ .inventory-adjust-modal{ width:min(660px,100%) !important; } .inventory-adjust-preview{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; padding:12px; border:1px solid var(--line); border-radius:11px; background:var(--panel-2); } .inventory-adjust-preview>div{ min-width:0; display:grid; gap:4px; } .inventory-adjust-preview span{ color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; } .inventory-adjust-preview strong{ font-size:14px; } .inventory-row-actions{ display:flex; align-items:center; justify-content:flex-end; gap:6px; flex-wrap:wrap; min-width:210px; } .inventory-row-actions .tiny-btn{ white-space:nowrap; } .inventory-row-actions .positive-action{ color:#0b9f62; border-color:rgba(11,159,98,.20); background:rgba(11,159,98,.055); } body.dark .inventory-row-actions .positive-action{ color:#43d58a; border-color:rgba(67,213,138,.22); background:rgba(67,213,138,.055); } .inventory-table{ min-width:980px; } @media(max-width:700px){ .inventory-adjust-preview{ grid-template-columns:1fr; } } /* ========================================================= V31 · Bestandsartikel komplett ausblenden/löschen ========================================================= */ .inventory-row-actions .inventory-delete-btn{ border-style:dashed; } .inventory-row-actions{ min-width:300px; } /* ========================================================= V31 · Einkaufskosten in der Bestandsliste ========================================================= */ .inventory-summary-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); } .inventory-table{ min-width:1240px; } .inventory-table td{ vertical-align:middle; } .inventory-cost-hint{ display:block; margin-top:3px; color:var(--muted); font-size:8px; line-height:1.3; white-space:nowrap; } @media(max-width:1180px){ .inventory-summary-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media(max-width:760px){ .inventory-summary-grid{ grid-template-columns:1fr 1fr; } } @media(max-width:480px){ .inventory-summary-grid{ grid-template-columns:1fr; } } /* ========================================================= V31 · Versandauswahl kompakt ========================================================= */ /* Die Versandoption ist nur noch eine kleine, saubere Auswahlzeile. */ .sale-cost-grid > .shipping-expense-box{ grid-column:1/-1 !important; width:100% !important; min-height:0 !important; margin:2px 0 4px !important; padding:0 !important; border:0 !important; border-radius:0 !important; background:transparent !important; overflow:visible !important; } .sale-cost-grid > .shipping-expense-box > .shipping-expense-toggle{ display:inline-flex !important; width:auto !important; max-width:100% !important; min-height:36px !important; padding:7px 10px !important; margin:0 !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; gap:8px !important; border:1px solid var(--line) !important; border-radius:9px !important; background:var(--panel) !important; cursor:pointer; box-sizing:border-box; } .sale-cost-grid > .shipping-expense-box > .shipping-expense-toggle:hover{ background:var(--panel-2) !important; } .sale-cost-grid > .shipping-expense-box > .shipping-expense-toggle > input[type="checkbox"]{ appearance:auto !important; -webkit-appearance:checkbox !important; width:15px !important; height:15px !important; min-width:15px !important; min-height:15px !important; max-width:15px !important; max-height:15px !important; flex:0 0 15px !important; margin:0 !important; padding:0 !important; border-radius:3px !important; } .sale-cost-grid > .shipping-expense-box > .shipping-expense-toggle > span{ min-width:0 !important; display:flex !important; flex-direction:row !important; align-items:center !important; gap:7px !important; } .sale-cost-grid > .shipping-expense-box > .shipping-expense-toggle strong{ flex:0 0 auto; margin:0 !important; font-size:10.5px !important; line-height:1.25 !important; white-space:nowrap !important; } .sale-cost-grid > .shipping-expense-box > .shipping-expense-toggle small{ min-width:0 !important; margin:0 !important; color:var(--muted) !important; font-size:8.5px !important; line-height:1.3 !important; white-space:normal !important; overflow-wrap:anywhere !important; } /* Erst nach Aktivierung erscheint darunter ein normaler, kompakter Bereich. */ .sale-cost-grid > .shipping-expense-box > .shipping-expense-fields{ width:100% !important; margin:8px 0 0 !important; padding:12px !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:9px !important; border:1px solid var(--line) !important; border-radius:10px !important; background:var(--panel-2) !important; box-sizing:border-box; overflow:visible !important; } .sale-cost-grid > .shipping-expense-box .shipping-expense-preview{ min-height:48px !important; padding:10px 12px !important; margin:0 !important; } /* Kein seitliches Herauslaufen mehr. */ .sale-cost-grid > .shipping-expense-box, .sale-cost-grid > .shipping-expense-box *{ min-width:0; max-width:100%; box-sizing:border-box; } @media(max-width:820px){ .sale-cost-grid > .shipping-expense-box > .shipping-expense-toggle{ width:100% !important; } .sale-cost-grid > .shipping-expense-box > .shipping-expense-toggle > span{ flex-wrap:wrap !important; gap:3px 7px !important; } .sale-cost-grid > .shipping-expense-box > .shipping-expense-fields{ grid-template-columns:1fr !important; } } /* ========================================================= V32 · Kategorie-Reports für Ausgaben ========================================================= */ .expense-category-report-builder{ margin-top:16px; } .expense-category-report-builder .panel-head p{ max-width:720px; } .expense-category-report-controls{ grid-template-columns:minmax(170px,1.3fr) minmax(150px,.8fr) minmax(120px,.7fr) minmax(150px,.8fr) auto; } @media(max-width:1080px){ .expense-category-report-controls{ grid-template-columns:repeat(2,minmax(0,1fr)); } .expense-category-report-controls .platform-report-download{ grid-column:1/-1; width:100%; } } @media(max-width:680px){ .expense-category-report-controls{ grid-template-columns:1fr; } .expense-category-report-controls .platform-report-download{ grid-column:auto; } } /* ========================================================= V33 · Hinweis bei direktem file://-Start ========================================================= */ .local-file-persistence-warning{ position:fixed; left:50%; bottom:18px; transform:translateX(-50%); z-index:99999; width:min(760px,calc(100vw - 28px)); padding:12px 14px; border:1px solid rgba(181,116,0,.24); border-radius:11px; background:rgba(255,249,232,.97); box-shadow:0 12px 36px rgba(0,0,0,.12); color:#5d4300; backdrop-filter:blur(12px); } .local-file-persistence-warning div{display:grid;gap:3px} .local-file-persistence-warning strong{font-size:11px} .local-file-persistence-warning span{font-size:9.5px;line-height:1.45} body.dark .local-file-persistence-warning{ background:rgba(56,44,17,.96); color:#ffe5a3; border-color:rgba(255,213,102,.20); } /* ========================================================= V33 · Rechnungsnummer an automatischer Versand-Ausgabe ========================================================= */ .bd-metric.shipping-invoice-ref-metric strong{ letter-spacing:.015em; } .bd-metric.shipping-invoice-ref-metric small{ max-width:240px; } /* V42 · Dashboard beim Öffnen sofort sichtbar */ #content{min-height:1px;} /* V43 · HTML-Fallback statt weißer Hauptfläche */ .dashboard-start-fallback{ min-height:260px; display:flex; flex-direction:column; justify-content:center; padding:28px; border:1px solid var(--line); border-radius:18px; background:var(--panel); } .dashboard-start-fallback h1{ margin:7px 0 8px; font-size:28px; letter-spacing:-.035em; } .dashboard-start-fallback p{ margin:0; color:var(--muted); font-size:13px; } /* ========================================================= V44 · Versand-Ausgabe in der Buchungsliste sauber anordnen ========================================================= */ .tx-main-meta-row{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:5px; } .tx-main-meta-row .inventory-inline-tag, .tx-main-meta-row .platform-badge{ margin-top:0; } .tx-main .shipping-income-tag{ display:flex; width:max-content; max-width:100%; margin-top:6px; margin-bottom:1px; padding:4px 8px; clear:both; line-height:1.25; } @media(max-width:700px){ .tx-main-meta-row{ gap:5px; } .tx-main .shipping-income-tag{ margin-top:5px; } } /* ========================================================= V46 · Rechnungsnummern nur in der normalen App-Oberfläche Bericht-/PDF-Layout bleibt exakt wie v44. ========================================================= */ #content .reference-badge, #content .invoice-reference-strong, .transaction-detail-modal .reference-badge, .modal .reference-badge{ color:#111111 !important; font-weight:850 !important; background:#ffffff !important; border-color:rgba(17,17,17,.16) !important; } #content .invoice-number-chip, #content .invoice-no, #content .invoice-number{ color:#111111 !important; font-weight:850 !important; } body.dark #content .reference-badge, body.dark #content .invoice-reference-strong, body.dark .transaction-detail-modal .reference-badge, body.dark .modal .reference-badge, body.dark #content .invoice-number-chip{ color:#111111 !important; background:#f8f8f6 !important; border-color:rgba(17,17,17,.18) !important; } /* Belegte Rechnungsnummern muessen die spaeteren allgemeinen Farbregeln sichtbar ueberstimmen. Das gilt identisch fuer helles und dunkles Design. */ #content .invoice-number-chip.used, body.dark #content .invoice-number-chip.used{ color:#ffffff !important; background:#dc2626 !important; border-color:#991b1b !important; box-shadow:0 2px 7px rgba(153,27,27,.24) !important; opacity:1 !important; } #content .invoice-number-chip.used:hover, body.dark #content .invoice-number-chip.used:hover{ color:#ffffff !important; background:#b91c1c !important; border-color:#7f1d1d !important; } #content .invoice-number-chip.legacy-used:disabled, body.dark #content .invoice-number-chip.legacy-used:disabled{ color:#ffffff !important; background:#dc2626 !important; border-color:#991b1b !important; cursor:not-allowed !important; opacity:1 !important; } /* ========================================================= V48 · Kassenbuch – bewusst 1:1 im Stil der Vinted-Auszahlungen ========================================================= */ .cash-book-stats .card strong{ letter-spacing:-.03em; } .cash-book-section .payout-sale-row > div > strong{ color:var(--text); font-weight:850; } /* ========================================================= V50 · Bestand: verkaufte Stückzahl nach Zeitraum ========================================================= */ .inventory-sales-overview{ margin-bottom:16px; padding:20px; } .inventory-sales-overview-head{ display:flex; justify-content:space-between; align-items:flex-end; gap:18px; margin-bottom:16px; } .inventory-sales-overview-head h3{ margin:5px 0 4px; font-size:16px; } .inventory-sales-overview-head p{ margin:0; max-width:680px; color:var(--muted); font-size:10px; line-height:1.5; } .inventory-sales-filter{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; } .inventory-sales-filter-buttons{ display:flex; gap:3px; padding:3px; border:1px solid var(--line); border-radius:11px; background:var(--panel-2); } .inventory-sales-filter-buttons button{ border:0; border-radius:8px; background:transparent; color:var(--muted); padding:7px 10px; font-size:10px; font-weight:800; cursor:pointer; white-space:nowrap; } .inventory-sales-filter-buttons button.active{ background:var(--text); color:var(--panel); } .inventory-sales-custom{ display:flex; align-items:center; gap:7px; } .inventory-sales-custom span{ color:var(--muted); font-size:9px; } .inventory-sales-custom input{ min-height:36px; padding:6px 9px; font-size:10px; } .inventory-sales-kpis{ display:grid; grid-template-columns:1.1fr 1fr 1fr; gap:9px; } .inventory-sales-kpis>div{ min-width:0; padding:14px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); display:grid; gap:5px; } .inventory-sales-kpis span{ color:var(--muted); font-size:8px; font-weight:800; text-transform:uppercase; letter-spacing:.055em; } .inventory-sales-kpis strong{ font-size:18px; letter-spacing:-.025em; } .inventory-sales-kpis small{ color:var(--muted); font-size:9px; } .inventory-period-sales-hint{ display:block; margin-top:4px; color:var(--muted); font-size:8px; white-space:nowrap; } @media(max-width:900px){ .inventory-sales-overview-head{ align-items:flex-start; flex-direction:column; } .inventory-sales-filter{ align-items:flex-start; width:100%; } .inventory-sales-filter-buttons{ max-width:100%; overflow-x:auto; } } @media(max-width:650px){ .inventory-sales-kpis{ grid-template-columns:1fr; } .inventory-sales-custom{ flex-wrap:wrap; } } /* V51 · Bestandsbericht PDF */ .inventory-sales-actions{ display:flex; align-items:flex-end; gap:9px; flex-wrap:wrap; justify-content:flex-end; } .inventory-pdf-btn{ white-space:nowrap; min-height:36px; } @media(max-width:900px){ .inventory-sales-actions{ width:100%; justify-content:flex-start; } } /* ========================================================= V54 · Umbuchung nur bei vorhandenem Guthaben ========================================================= */ .transfer-balance-guard{ margin-top:10px; } .transfer-funds-state{ border:1px solid var(--line); border-radius:11px; padding:11px 12px; display:grid; gap:5px; } .transfer-funds-state>div{ display:flex; justify-content:space-between; align-items:center; gap:12px; } .transfer-funds-state span{ color:var(--muted); font-size:9px; font-weight:800; text-transform:uppercase; letter-spacing:.05em; } .transfer-funds-state strong{ font-size:14px; } .transfer-funds-state p{ margin:0; color:var(--muted); font-size:9px; line-height:1.45; } .transfer-funds-state.allowed{ border-color:rgba(11,159,98,.20); background:rgba(11,159,98,.045); } .transfer-funds-state.allowed strong{ color:#0b9f62; } .transfer-funds-state.blocked{ border-color:rgba(179,74,67,.22); background:rgba(179,74,67,.05); } .transfer-funds-state.blocked strong, .transfer-funds-state.blocked p b{ color:#b34a43; } #saveTransactionBtn:disabled{ opacity:.42; cursor:not-allowed; } /* V57 · Professionellere Sidebar-Icons */ .nav-item .nav-svg-icon{ width:18px; min-width:18px; height:18px; display:grid; place-items:center; color:currentColor; } .nav-item .nav-svg-icon svg{ width:17px; height:17px; display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } /* V58 · zentraler Serverspeicher */ .server-storage-note.connected{ border-color:rgba(11,159,98,.24); } .server-storage-note.offline, .server-storage-note.conflict{ border-color:rgba(179,74,67,.30); } .server-storage-note.offline strong, .server-storage-note.conflict strong{ color:#b34a43; } /* V60 · sichtbarer zentraler Serverstatus */ .kt-server-badge{ display:flex; align-items:center; gap:7px; min-height:34px; padding:0 10px; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--muted); font-size:9px; font-weight:700; white-space:nowrap; } .kt-server-badge span{ width:7px; height:7px; border-radius:50%; background:#9ca3af; flex:0 0 auto; } .kt-server-badge.connected span{background:#0b9f62;} .kt-server-badge.saving span{background:#c98600;} .kt-server-badge.offline span, .kt-server-badge.conflict span{background:#b34a43;} .kt-server-badge.offline, .kt-server-badge.conflict{color:#b34a43;} @media(max-width:800px){ .kt-server-badge b{display:none;} .kt-server-badge{padding:0 9px;} } /* V62 · Server zuerst laden, dann App rendern */ .server-loading-screen{ min-height:420px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:9px; color:var(--text); } .server-loading-screen strong{ font-size:16px; } .server-loading-screen span{ color:var(--muted); font-size:11px; } .server-loading-spinner{ width:28px; height:28px; border-radius:50%; border:2px solid var(--line); border-top-color:var(--text); animation:ktServerSpin .8s linear infinite; margin-bottom:4px; } @keyframes ktServerSpin{ to{transform:rotate(360deg)} } /* ========================================================= V66 · Login-Gate – bewusst getrennt von der stabilen v64-App ========================================================= */ .kt-auth-gate{ position:fixed; inset:0; z-index:100000; display:grid; place-items:center; padding:24px; background:var(--bg); } .kt-auth-gate.hidden{display:none!important;} .kt-auth-card{ width:min(430px,100%); padding:28px; border:1px solid var(--line); border-radius:22px; background:var(--panel); box-shadow:0 28px 90px rgba(0,0,0,.14); } .kt-auth-brand{ display:flex; align-items:center; gap:12px; padding-bottom:24px; margin-bottom:25px; border-bottom:1px solid var(--line); } .kt-auth-brand strong{display:block;font-size:14px;} .kt-auth-brand span{display:block;margin-top:2px;color:var(--muted);font-size:10px;} .kt-auth-panel.hidden{display:none!important;} .kt-auth-panel h1{margin:8px 0;font-size:28px;letter-spacing:-.04em;} .kt-auth-panel>p{margin:0 0 22px;color:var(--muted);font-size:11px;line-height:1.55;} .kt-auth-form{display:grid;gap:13px;} .kt-auth-form label{display:grid;gap:6px;color:var(--muted);font-size:10px;font-weight:750;} .kt-auth-form input{ width:100%; min-height:43px; padding:9px 11px; border:1px solid var(--line); border-radius:10px; outline:none; background:var(--panel-2); color:var(--text); font:inherit; } .kt-auth-form input:focus{border-color:var(--text);} .kt-auth-submit{width:100%;min-height:44px;margin-top:4px;} .kt-auth-error{ padding:10px 11px; border:1px solid rgba(179,74,67,.25); border-radius:10px; background:rgba(179,74,67,.06); color:#b34a43; font-size:10px; } .kt-auth-error.hidden{display:none!important;} .kt-account-btn{font-size:13px;} /* ========================================================= V67 · Benutzerkonto unten links ========================================================= */ .sidebar-footer{position:relative;} .company-account-card{ width:100%; appearance:none; text-align:left; cursor:pointer; color:var(--text); font:inherit; position:relative; transition:background .15s ease,border-color .15s ease; } .company-account-card:hover, .company-account-card[aria-expanded="true"]{ background:var(--panel); border-color:color-mix(in srgb,var(--text) 18%,var(--line)); } .company-account-copy{min-width:0;flex:1;} .company-account-copy strong, .company-account-copy span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .company-account-chevron{ width:auto!important; margin-left:auto!important; margin-top:0!important; color:var(--muted); font-size:12px!important; } .avatar.small{width:30px;height:30px;font-size:9px;} .sidebar-account-menu{ position:absolute; left:0; right:0; bottom:68px; z-index:90; padding:7px; border:1px solid var(--line); border-radius:14px; background:var(--panel); box-shadow:0 18px 45px rgba(0,0,0,.12); } .sidebar-account-menu.hidden{display:none!important;} .sidebar-account-head{ display:flex; align-items:center; gap:9px; padding:9px 9px 11px; margin-bottom:4px; border-bottom:1px solid var(--line); } .sidebar-account-head>div:last-child{min-width:0;} .sidebar-account-head strong{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; } .sidebar-account-head span{ display:block; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:9px; } .sidebar-account-menu>button{ width:100%; display:grid; grid-template-columns:22px 1fr; align-items:center; gap:8px; padding:9px; border:0; border-radius:9px; background:transparent; color:var(--text); text-align:left; cursor:pointer; } .sidebar-account-menu>button:hover{background:var(--panel-2);} .sidebar-account-menu>button>span{ width:22px; color:var(--muted); text-align:center; font-size:13px; } .sidebar-account-menu button strong{display:block;font-size:10px;} .sidebar-account-menu button small{ display:block; margin-top:2px; color:var(--muted); font-size:8px; } .sidebar-account-menu .logout-action{ margin-top:3px; border-top:1px solid var(--line); border-radius:0 0 9px 9px; color:#b34a43; } .kt-profile-modal{max-width:640px;} .kt-profile-identity{ display:flex; align-items:center; gap:13px; padding:14px; margin-bottom:14px; border:1px solid var(--line); border-radius:14px; background:var(--panel-2); } .profile-avatar{width:45px;height:45px;font-size:12px;} .kt-profile-identity strong{display:block;font-size:12px;} .kt-profile-identity span{display:block;margin-top:2px;color:var(--muted);font-size:9px;} .kt-profile-identity small{ display:inline-block; margin-top:5px; padding:3px 6px; border-radius:999px; background:var(--panel); color:var(--muted); font-size:7px; font-weight:800; text-transform:uppercase; letter-spacing:.08em; } .kt-profile-tabs{ display:flex; gap:4px; padding:3px; margin-bottom:17px; border-radius:10px; background:var(--panel-2); } .kt-profile-tabs button{ flex:1; padding:8px 10px; border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:10px; font-weight:750; cursor:pointer; } .kt-profile-tabs button.active{ background:var(--panel); color:var(--text); box-shadow:0 1px 3px rgba(0,0,0,.05); } .kt-profile-tabs button.hidden{display:none!important;} .kt-profile-section.hidden{display:none!important;} .kt-profile-section h3{margin:0 0 12px;font-size:12px;} .kt-profile-divider{ height:1px; margin:18px 0; background:var(--line); } .kt-users-heading{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:12px; } .kt-users-heading h3{margin:0 0 4px;} .kt-users-heading p{margin:0;color:var(--muted);font-size:9px;} .kt-users-list{ display:grid; gap:2px; max-height:240px; overflow:auto; } .kt-user-row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:9px; padding:9px 0; border-bottom:1px solid var(--line); } .kt-user-copy{min-width:0;} .kt-user-copy strong{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10px; } .kt-user-copy span{ display:block; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:8px; } .kt-users-loading{ padding:15px 0; color:var(--muted); font-size:9px; } .kt-user-grid{ display:grid; grid-template-columns:1fr 1fr; gap:10px; } .kt-profile-section .kt-auth-form select{ width:100%; min-height:43px; padding:9px 11px; border:1px solid var(--line); border-radius:10px; outline:none; background:var(--panel-2); color:var(--text); font:inherit; } @media(max-width:650px){ .kt-user-grid{grid-template-columns:1fr;} .kt-user-row{grid-template-columns:auto 1fr auto;} .kt-user-row .tiny-btn{grid-column:2/4;justify-self:start;} } /* ========================================================= V69 · STABILITÄT & LESBARKEIT Keine PDF-/Report-Styles werden hier verändert. ========================================================= */ /* Höherer Kontrast für sekundäre Texte. */ :root{ --muted:#5f6670; --line:#dde1e6; } body.dark{ --muted:#b2b6bf; --line:#34373e; } /* Lesbarkeit der zentralen Oberfläche. */ html,body{ font-size:14px; line-height:1.42; } .page-head h1{ line-height:1.08; } .page-head p, .panel-head p, .sales-overview-total p, .inventory-sales-overview-head p, .kt-users-heading p{ font-size:11.5px !important; line-height:1.55 !important; color:var(--muted) !important; } .eyebrow, .nav-section-label{ font-size:9.5px !important; line-height:1.3; } .nav-section-label{ opacity:.9 !important; } .nav-item{ font-size:13px !important; line-height:1.25; min-height:38px; } .form-grid label, .kt-auth-form label, .month-close-controls label, .tax-advisor-controls label{ font-size:11.5px !important; line-height:1.35; } .form-grid input, .form-grid select, .form-grid textarea, .kt-auth-form input, .kt-auth-form select{ font-size:13px !important; line-height:1.35; } input::placeholder, textarea::placeholder{ color:color-mix(in srgb,var(--muted) 86%,transparent); opacity:1; } .field-hint, .invoice-item-row .field-hint, .inventory-cost-hint, .inventory-period-sales-hint, .shipping-expense-toggle small, .shipping-expense-preview small{ font-size:10px !important; line-height:1.45 !important; color:var(--muted) !important; } .notice, .warning-notice, .server-storage-note, .detail-drawer{ line-height:1.5; } /* Tabellen / Listen */ th, .sales-ledger-head, .formal-ledger-head{ font-size:9.5px !important; letter-spacing:.07em !important; color:var(--muted) !important; } td{ font-size:12px !important; line-height:1.45; } .status, .platform-badge, .reference-badge, .transfer-badge, .inventory-inline-tag, .shipping-linked-tag, .vinted-user-tag{ font-size:9.5px !important; line-height:1.2 !important; } .tx-time, .formal-booking small, .search-result-list small, .trash-row small, .audit-row small{ font-size:10px !important; line-height:1.4; } .tiny-btn{ min-height:30px; padding:6px 9px; font-size:10.5px !important; } /* Dashboard: kleine Beschriftungen nicht mehr mikroskopisch. */ .metric-label, .dashboard-profit-card>span, .dashboard-profit-card>small, .dashboard-wallet-card-top>span:last-child, .dashboard-wallet-card>small, .dashboard-comparison-grid span, .dashboard-comparison-grid small, .dashboard-inventory-summary span, .dashboard-inventory-summary small, .dashboard-stock-strip span, .inventory-sales-kpis span, .inventory-sales-kpis small{ font-size:9.5px !important; line-height:1.4; } /* Serverstatus besser lesbar, aber weiterhin kompakt. */ .kt-server-badge{ font-size:10px !important; min-height:36px; padding:0 11px; } /* --------------------------------------------------------- Unteres Benutzerkonto – komplett überarbeitet --------------------------------------------------------- */ .company-account-card{ min-height:66px; padding:10px 11px !important; gap:10px !important; border-radius:13px !important; background:var(--panel-2) !important; } .company-account-card:hover, .company-account-card[aria-expanded="true"]{ background:var(--panel) !important; border-color:color-mix(in srgb,var(--text) 22%,var(--line)) !important; box-shadow:0 8px 24px rgba(0,0,0,.055); } .account-avatar-main{ width:38px !important; height:38px !important; font-size:11px !important; } .company-account-copy{ display:grid; gap:1px; min-width:0; } .company-account-kicker{ margin:0 !important; color:var(--muted) !important; font-size:7.5px !important; font-weight:850; letter-spacing:.1em; } .company-account-copy strong{ margin:0; color:var(--text); font-size:11.5px !important; line-height:1.25; } .company-account-copy small{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:9px; line-height:1.25; } .company-account-chevron{ display:grid; place-items:center; width:24px !important; height:24px; flex:0 0 24px; border-radius:7px; background:var(--panel); } .company-account-chevron svg{ width:14px; height:14px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; transition:transform .16s ease; } .company-account-card[aria-expanded="true"] .company-account-chevron svg{ transform:rotate(180deg); } /* Account dropdown */ .sidebar-account-menu{ left:0; right:0; bottom:74px; padding:8px; border-radius:15px; box-shadow:0 18px 50px rgba(0,0,0,.16); } body.dark .sidebar-account-menu{ box-shadow:0 20px 55px rgba(0,0,0,.42); } .sidebar-account-menu-label{ padding:6px 9px 7px; color:var(--muted); font-size:8px; font-weight:850; letter-spacing:.11em; } .sidebar-account-head{ gap:10px; padding:10px; margin-bottom:5px; border:1px solid var(--line); border-radius:11px; background:var(--panel-2); } .sidebar-account-head-copy{ min-width:0; } .sidebar-account-head strong{ font-size:11.5px !important; } .sidebar-account-head span{ font-size:9.5px !important; } .sidebar-account-head small{ display:inline-block; margin-top:4px; padding:2px 5px; border-radius:999px; background:var(--panel); color:var(--muted); font-size:7.5px; font-weight:800; text-transform:uppercase; letter-spacing:.06em; } .sidebar-account-menu>button{ min-height:50px; grid-template-columns:32px 1fr; gap:9px; padding:8px 9px; border-radius:10px; } .account-menu-icon{ width:30px !important; height:30px; display:grid; place-items:center; border:1px solid var(--line); border-radius:9px; background:var(--panel-2); color:var(--text) !important; } .account-menu-icon svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; } .sidebar-account-menu button strong{ font-size:11px !important; line-height:1.25; } .sidebar-account-menu button small{ margin-top:3px; font-size:9px !important; line-height:1.3; } .sidebar-account-menu .logout-action{ margin-top:5px; border-top:1px solid var(--line); } .sidebar-account-menu .logout-action .account-menu-icon{ color:#b34a43 !important; } /* Profilfenster */ .kt-profile-modal{ width:min(680px,100%) !important; } .kt-profile-identity{ padding:16px; border-radius:15px; } .profile-avatar{ width:48px !important; height:48px !important; font-size:12px !important; } .kt-profile-identity strong{ font-size:13px !important; } .kt-profile-identity span{ font-size:10px !important; } .kt-profile-identity small{ font-size:8px !important; } .kt-profile-tabs{ margin-bottom:20px; } .kt-profile-tabs button{ min-height:38px; font-size:11px !important; } .kt-profile-section h3{ font-size:13px !important; } .kt-readonly-hint{ font-size:9.5px !important; color:var(--muted); } .kt-users-list{ max-height:280px; } .kt-user-row{ min-height:52px; gap:10px; padding:10px 2px; } .kt-user-copy strong{ font-size:11px !important; } .kt-user-copy span{ font-size:9.5px !important; line-height:1.35; } .kt-users-loading{ font-size:10px !important; } /* Login ebenfalls besser lesbar */ .kt-auth-brand strong{font-size:15px !important;} .kt-auth-brand span{font-size:11px !important;} .kt-auth-panel>p{font-size:12px !important;} .kt-auth-error{font-size:11px !important;line-height:1.45;} /* --------------------------------------------------------- BUGFIX: alte, fehlerhaft gruppierte Modal-Selektoren haben teilweise den Backdrop selbst auf overflow:visible gesetzt. Dieser finale Block setzt ALLE Dialoge eindeutig korrekt. --------------------------------------------------------- */ #invoiceModalBackdrop, #invoiceUploadBackdrop, #modalBackdrop, #partnerModalBackdrop, #receiptModalBackdrop, #transactionDetailBackdrop, #ktProfileBackdrop{ position:fixed !important; inset:0 !important; display:flex !important; align-items:flex-start !important; justify-content:center !important; overflow:hidden !important; padding:12px !important; box-sizing:border-box !important; } #invoiceModalBackdrop.hidden, #invoiceUploadBackdrop.hidden, #modalBackdrop.hidden, #partnerModalBackdrop.hidden, #receiptModalBackdrop.hidden, #transactionDetailBackdrop.hidden, #ktProfileBackdrop.hidden{ display:none !important; } #invoiceModalBackdrop > .modal, #invoiceUploadBackdrop > .modal, #modalBackdrop > .modal, #partnerModalBackdrop > .modal, #receiptModalBackdrop > .modal, #transactionDetailBackdrop > .modal, #ktProfileBackdrop > .modal{ flex:0 0 auto !important; width:min(960px,100%) !important; max-width:100% !important; max-height:calc(100vh - 24px) !important; max-height:calc(100dvh - 24px) !important; min-height:0 !important; margin:0 auto !important; overflow-x:hidden !important; overflow-y:auto !important; overscroll-behavior:contain !important; -webkit-overflow-scrolling:touch !important; scrollbar-gutter:stable; } #invoiceModalBackdrop > .modal > .modal-head, #invoiceUploadBackdrop > .modal > .modal-head, #modalBackdrop > .modal > .modal-head, #partnerModalBackdrop > .modal > .modal-head, #receiptModalBackdrop > .modal > .modal-head, #transactionDetailBackdrop > .modal > .modal-head, #ktProfileBackdrop > .modal > .modal-head{ position:sticky !important; top:-1px !important; z-index:10 !important; margin:-1px -1px 14px !important; padding:1px 1px 12px !important; border-bottom:1px solid var(--line); background:var(--panel) !important; } #invoiceModalBackdrop > .modal form, #invoiceUploadBackdrop > .modal form, #modalBackdrop > .modal form, #partnerModalBackdrop > .modal form, #receiptModalBackdrop > .modal form, #transactionDetailBackdrop > .modal form, #ktProfileBackdrop > .modal form{ max-height:none !important; overflow:visible !important; } @media(max-width:760px){ html,body{font-size:14px;} .content{padding:18px 14px !important;} .sidebar-account-menu{bottom:72px;} #invoiceModalBackdrop, #invoiceUploadBackdrop, #modalBackdrop, #partnerModalBackdrop, #receiptModalBackdrop, #transactionDetailBackdrop, #ktProfileBackdrop{ padding:6px !important; } #invoiceModalBackdrop > .modal, #invoiceUploadBackdrop > .modal, #modalBackdrop > .modal, #partnerModalBackdrop > .modal, #receiptModalBackdrop > .modal, #transactionDetailBackdrop > .modal, #ktProfileBackdrop > .modal{ max-height:calc(100vh - 12px) !important; max-height:calc(100dvh - 12px) !important; } } @media(prefers-reduced-motion:reduce){ *, *::before, *::after{ scroll-behavior:auto !important; transition-duration:.01ms !important; animation-duration:.01ms !important; animation-iteration-count:1 !important; } } /* ========================================================= V70 · MOBILE DEBUG / HANDY-STABILITÄT ========================================================= */ html{min-height:100%;-webkit-text-size-adjust:100%;text-size-adjust:100%} body{min-height:100dvh;overflow-x:hidden} button,input,select,textarea{touch-action:manipulation} button,.nav-item,.company-account-card,.sidebar-account-menu>button,.period-pills button,.tiny-btn{-webkit-tap-highlight-color:transparent} input,select,textarea{max-width:100%} .table-wrap,.ledger-table,.sales-ledger,.formal-ledger,.inventory-table-wrap,.invoice-number-table,.report-table-wrap{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain} .sidebar-scrim,.sidebar-mobile-close{display:none} @media(max-width:900px){ body.mobile-nav-open{overflow:hidden!important} .app-shell,.app{display:block!important;min-width:0!important;width:100%!important} .main{width:100%!important;min-width:0!important} .sidebar{ position:fixed!important;z-index:1000!important;left:0!important;top:0!important;bottom:0!important; width:min(86vw,320px)!important;height:100dvh!important;max-height:100dvh!important; transform:translateX(-104%);transition:transform .2s ease; box-shadow:18px 0 50px rgba(0,0,0,.18); padding-top:max(18px,env(safe-area-inset-top))!important; padding-bottom:max(12px,env(safe-area-inset-bottom))!important; overflow:hidden!important } .sidebar.open{transform:translateX(0)!important} .sidebar-scrim{display:block;position:fixed;z-index:999;inset:0;background:rgba(12,16,22,.38);backdrop-filter:blur(2px);opacity:0;pointer-events:none;transition:opacity .18s ease} .sidebar-scrim.open{opacity:1;pointer-events:auto} .sidebar-mobile-close{display:grid;place-items:center;position:absolute;top:max(10px,env(safe-area-inset-top));right:10px;z-index:5;width:36px;height:36px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font-size:20px} .sidebar .brand{padding-right:46px} .nav{padding-bottom:8px!important} .topbar{ height:auto!important;min-height:60px;position:sticky!important;top:0!important;z-index:30!important; padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left))!important; gap:8px!important;flex-wrap:nowrap!important;background:color-mix(in srgb,var(--bg) 96%,transparent)!important } .mobile-only{display:inline-grid!important;place-items:center;flex:0 0 40px} .search-wrap{min-width:0!important;flex:1 1 auto!important;max-width:none!important;padding:8px 9px!important;border:1px solid var(--line)!important;background:var(--panel)!important} .search-wrap input{min-width:0!important;width:100%!important;font-size:16px!important} .top-actions{margin-left:0!important;flex:0 0 auto;gap:5px!important} .top-actions .kt-server-badge{display:none!important} .top-actions .icon-btn{width:38px!important;height:38px!important;flex:0 0 38px} .top-actions .primary-btn{min-height:38px;padding:8px 11px!important;white-space:nowrap} .content{ width:100%!important;max-width:none!important; padding:16px max(12px,env(safe-area-inset-right)) max(24px,calc(env(safe-area-inset-bottom) + 12px)) max(12px,env(safe-area-inset-left))!important; overflow-x:hidden!important } .page-head{display:block!important;margin-bottom:18px!important} .page-head h1{font-size:24px!important} .page-head>div:last-child,.page-head .actions{margin-top:12px;width:100%} .minimal-dashboard,.dashboard-layout,.dashboard-grid,.dashboard-main-grid,.dashboard-secondary-grid,.dashboard-profit-grid,.dashboard-wallet-grid,.dashboard-comparison-grid,.summary-grid,.stat-grid,.report-grid,.inventory-summary-grid,.inventory-sales-kpis,.cash-management-grid,.vinted-management-grid{ grid-template-columns:1fr!important;width:100%!important;min-width:0!important } .minimal-dashboard{min-height:0!important} .balance-card,.allocation-card{padding:22px 18px!important;border-left:0!important} .allocation-card{border-top:1px solid var(--line)!important} .hero-value,.balance-value,.dashboard-balance{font-size:clamp(30px,10vw,48px)!important;line-height:1!important;overflow-wrap:anywhere} .dashboard-wallet-card,.dashboard-profit-card,.card,.panel{min-width:0!important} .filters,.filter-row,.toolbar,.toolbar-row,.period-wrap,.report-actions,.bank-actions,.page-actions,.invoice-actions,.inventory-actions,.cash-actions,.sales-actions{ display:flex!important;flex-wrap:wrap!important;gap:8px!important;width:100%!important } .filters>*,.filter-row>*,.toolbar>*{min-width:0!important;max-width:100%!important} .period-pills{max-width:100%;overflow-x:auto;flex-wrap:nowrap!important;padding-bottom:2px;-webkit-overflow-scrolling:touch} .period-pills button{flex:0 0 auto;min-height:36px} .form-grid,.user-form-grid,.kt-user-grid,.invoice-form-grid,.transaction-grid{grid-template-columns:1fr!important} .form-grid .span-2,.kt-auth-form .span-2,.invoice-form-grid .span-2{grid-column:auto!important} input,select,textarea{font-size:16px!important} .form-actions{position:sticky;bottom:-1px;z-index:7;display:flex!important;gap:8px;margin:16px -2px -2px!important;padding:10px 2px 2px!important;background:linear-gradient(to bottom,transparent,var(--panel) 28%)} .form-actions>*{flex:1 1 0;min-height:44px} .invoice-item-row,.invoice-position-row{display:grid!important;grid-template-columns:1fr!important;gap:8px!important;min-width:0!important} .invoice-item-row>*,.invoice-position-row>*{min-width:0!important;width:100%!important} table{width:max-content;min-width:100%} th,td{white-space:nowrap} td .booking,td .item-name,.formal-booking{white-space:normal!important;min-width:160px} #invoiceModalBackdrop,#invoiceUploadBackdrop,#modalBackdrop,#partnerModalBackdrop,#receiptModalBackdrop,#transactionDetailBackdrop,#ktProfileBackdrop,#inventoryPickerBackdrop,#inventoryAdjustBackdrop{ padding:0!important;align-items:stretch!important } #invoiceModalBackdrop > .modal,#invoiceUploadBackdrop > .modal,#modalBackdrop > .modal,#partnerModalBackdrop > .modal,#receiptModalBackdrop > .modal,#transactionDetailBackdrop > .modal,#ktProfileBackdrop > .modal,#inventoryPickerBackdrop > .modal,#inventoryAdjustBackdrop > .modal{ width:100%!important;max-width:none!important;height:100dvh!important;max-height:100dvh!important;min-height:100dvh!important; margin:0!important;border-radius:0!important; padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))!important; overflow-y:auto!important;overflow-x:hidden!important } .modal-head{gap:10px!important} .modal-head h2{font-size:20px!important;line-height:1.15} .sidebar-account-menu{ position:fixed!important;left:12px!important;right:12px!important;bottom:max(12px,env(safe-area-inset-bottom))!important; width:auto!important;max-height:min(70dvh,520px);overflow:auto;z-index:1100!important } .kt-profile-tabs{position:sticky;top:0;z-index:8;background:var(--panel);padding-top:4px} .kt-user-row{grid-template-columns:auto minmax(0,1fr) auto!important} .kt-user-row .tiny-btn{grid-column:2/4!important;justify-self:stretch!important;width:100%!important} .kt-auth-gate{ min-height:100dvh;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))!important; align-items:center;overflow-y:auto } .kt-auth-card{width:100%!important;max-width:440px!important;padding:22px 18px!important} .toast{ left:12px!important;right:12px!important;bottom:max(18px,calc(env(safe-area-inset-bottom) + 10px))!important; width:auto!important;max-width:none!important;text-align:center } .cash-card,.vinted-card,.inventory-card,.platform-card{min-width:0!important;width:100%!important} .detail-grid,.detail-row{grid-template-columns:1fr!important;min-width:0!important} .search-result-list{min-width:0!important} .search-result-list>*{min-width:0!important;overflow-wrap:anywhere} } @media(max-width:520px){ .top-actions .primary-btn{width:40px!important;height:40px!important;padding:0!important;overflow:hidden;color:transparent!important;position:relative} .top-actions .primary-btn::after{content:'+';position:absolute;inset:0;display:grid;place-items:center;color:var(--panel);font-size:21px;font-weight:750} .search-wrap span{display:none} .page-head h1{font-size:22px!important} } @media(max-width:900px) and (orientation:landscape){ .sidebar{width:min(50vw,320px)!important} .kt-auth-gate{align-items:flex-start} .kt-auth-card{margin:10px auto} } /* ========================================================= V71 · Kontobewegungen / Einlagen / kompakter Bankabgleich ========================================================= */ .bank-filter-selection{ display:flex; align-items:center; justify-content:flex-start; width:100%; margin-top:10px; padding-top:10px; border-top:1px solid var(--line); } .bank-filter-selection .bulk-selection-controls{ width:auto; } .bank-deposit-btn{ font-weight:720; } .deposit-badge{ display:inline-flex; align-items:center; width:max-content; margin-top:5px; padding:3px 7px; border-radius:999px; border:1px solid rgba(25,135,84,.22); background:rgba(25,135,84,.075); color:#18794e; font-size:9px; font-weight:760; letter-spacing:.01em; } body.dark .deposit-badge{ color:#77d7a6; background:rgba(67,213,138,.08); border-color:rgba(67,213,138,.22); } /* Bankabgleich bewusst klein halten */ .reconciliation-card.reconciliation-card-compact{ margin:10px 0 14px; padding:11px 13px; } .reconciliation-compact-top{ display:flex; align-items:center; justify-content:space-between; gap:12px; } .reconciliation-compact-copy{ display:grid; gap:2px; min-width:0; } .reconciliation-compact-copy .eyebrow{ font-size:8px; } .reconciliation-compact-copy > strong{ font-size:12px; line-height:1.2; } .reconciliation-compact-copy > small{ color:var(--muted); font-size:9px; line-height:1.35; } .reconciliation-card-compact .reconciliation-actions{ display:flex; align-items:center; gap:6px; flex:0 0 auto; } .reconciliation-card-compact .compact-bank-sync-btn{ min-height:32px; padding:6px 10px; font-size:9px; } .reconciliation-list-compact{ margin-top:9px; border-top:1px solid var(--line); } .reconciliation-list-compact .reconciliation-row{ padding:8px 1px; gap:10px; } .reconciliation-list-compact .reconciliation-row > div:first-child strong{ font-size:9px; } .reconciliation-list-compact .reconciliation-row > div:first-child span{ font-size:8.5px; } @media(max-width:900px){ .bank-filter-selection{ margin-top:8px; padding-top:8px; } .bank-filter-selection .bulk-selection-controls{ width:100%; } .reconciliation-card.reconciliation-card-compact{ padding:10px 11px; } .reconciliation-compact-top{ align-items:flex-start; } .reconciliation-compact-copy > small{ max-width:58vw; } } @media(max-width:560px){ .reconciliation-compact-top{ gap:8px; } .reconciliation-compact-copy > small{ max-width:52vw; font-size:8px; } .reconciliation-card-compact .compact-bank-sync-btn{ padding:6px 8px; } } /* ========================================================= V72 · übersichtliche Navigation / Forderungen / Audit / Entnahmen ========================================================= */ .nav-section-fixed .nav-section-label{padding:0 10px 7px} .nav-collapsible{margin:2px 0;border-radius:11px} .nav-collapsible>summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 10px;color:var(--muted);font-size:9px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;cursor:pointer;border-radius:10px;user-select:none} .nav-collapsible>summary::-webkit-details-marker{display:none} .nav-collapsible>summary:hover{background:var(--panel-2);color:var(--text)} .nav-section-chevron{font-size:13px;transition:transform .16s ease} .nav-collapsible[open] .nav-section-chevron{transform:rotate(180deg)} .nav-section-items{display:grid;gap:2px} .nav-collapsible:not([open])>.nav-section-items{display:none} .nav-collapsible[open]{padding-bottom:5px} .withdrawal-badge{display:inline-flex;align-items:center;width:max-content;margin-top:5px;padding:3px 7px;border-radius:999px;border:1px solid rgba(190,70,70,.22);background:rgba(190,70,70,.07);color:#a53d3d;font-size:9px;font-weight:760} body.dark .withdrawal-badge{color:#ff9b9b;background:rgba(255,100,100,.08);border-color:rgba(255,100,100,.2)} .receivable-stats-advanced{grid-template-columns:repeat(4,minmax(0,1fr))} .receivable-stats-advanced .warning{border-color:rgba(211,150,34,.22)} .receivable-stats-advanced .danger{border-color:rgba(190,70,70,.25)} .receivable-row.warning{background:rgba(211,150,34,.035)} .receivable-row.critical{background:rgba(190,70,70,.045)} .receivable-actions{display:flex;gap:6px;justify-content:flex-end;align-items:center;flex-wrap:wrap} .payment-suggest-btn{border-color:rgba(20,125,75,.28)!important} #paymentMatchBackdrop.hidden{display:none!important} .payment-match-modal{max-width:720px} .payment-match-content{min-height:150px} .payment-candidate-list{display:grid;border-top:1px solid var(--line)} .payment-candidate{display:grid;grid-template-columns:minmax(0,1fr) 130px auto;gap:12px;align-items:center;width:100%;padding:13px 2px;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);text-align:left;cursor:pointer} .payment-candidate:hover{background:var(--panel-2)} .payment-candidate>div{display:grid;gap:4px}.payment-candidate>div span{font-size:9px;color:var(--muted)} .match-confidence{font-size:8px;font-weight:750;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:4px 7px;white-space:nowrap} .match-confidence.strong{color:#18794e;border-color:rgba(25,135,84,.25);background:rgba(25,135,84,.06)} .audit-filter-card,.audit-ledger-card{padding:17px;margin-bottom:14px} .audit-filter-grid{display:grid;grid-template-columns:180px 200px minmax(240px,1fr);gap:10px;align-items:end} .audit-filter-grid label{display:grid;gap:6px;font-size:9px;color:var(--muted);font-weight:720} .audit-filter-grid input,.audit-filter-grid select{min-height:42px} .audit-ledger{display:grid;border-top:1px solid var(--line)} .audit-ledger-row{display:grid;grid-template-columns:190px minmax(0,1fr);gap:18px;padding:15px 2px;border-bottom:1px solid var(--line)} .audit-ledger-meta{display:grid;align-content:start;gap:4px}.audit-ledger-meta strong{font-size:10px}.audit-ledger-meta span,.audit-ledger-meta small{font-size:8.5px;color:var(--muted)} .audit-ledger-main{min-width:0}.audit-ledger-main h4{font-size:11px;margin:5px 0 3px}.audit-ledger-main p{font-size:9px;color:var(--muted);margin:0;overflow-wrap:anywhere} .audit-entity-chip{display:inline-flex;padding:3px 7px;border-radius:999px;background:var(--panel-2);border:1px solid var(--line);font-size:8px;font-weight:750;color:var(--muted)} .audit-change-details{margin-top:9px}.audit-change-details summary{font-size:9px;font-weight:720;cursor:pointer;color:var(--text)} .audit-change-details>div{display:grid;margin-top:7px;border:1px solid var(--line);border-radius:10px;overflow:hidden} .audit-change-row{display:grid;grid-template-columns:150px minmax(0,1fr) 20px minmax(0,1fr);gap:8px;padding:8px 10px;border-bottom:1px solid var(--line);font-size:8.5px;align-items:center}.audit-change-row:last-child{border-bottom:0}.audit-change-row strong{font-size:8.5px}.audit-change-row span{overflow-wrap:anywhere;color:var(--muted)}.audit-change-row i{text-align:center;color:var(--muted);font-style:normal} .month-close-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-bottom:15px}.month-close-kpis article{padding:16px;display:grid;gap:6px}.month-close-kpis span{font-size:8.5px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:750}.month-close-kpis strong{font-size:18px}.month-close-kpis small{font-size:8.5px;color:var(--muted)} .month-close-info{padding:18px}.month-close-info h3{margin:0 0 13px}.month-close-info-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:9px}.month-close-info-grid>div{display:grid;gap:4px;padding:12px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2)}.month-close-info-grid strong{font-size:10px}.month-close-info-grid span{font-size:8.5px;color:var(--muted);line-height:1.45} @media(max-width:1100px){ .receivable-stats-advanced,.month-close-kpis,.month-close-info-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .audit-filter-grid{grid-template-columns:1fr 1fr}.audit-search-label{grid-column:1/-1} } @media(max-width:900px){ .nav-collapsible>summary{min-height:42px;font-size:10px;padding:10px 12px} .nav-collapsible .nav-item{min-height:43px} #paymentMatchBackdrop{padding:0!important;align-items:stretch!important} #paymentMatchBackdrop>.modal{width:100%!important;max-width:none!important;height:100dvh!important;max-height:100dvh!important;margin:0!important;border-radius:0!important;padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))!important;overflow-y:auto!important;overflow-x:hidden!important} .receivable-actions{justify-content:flex-start} .audit-ledger-row{grid-template-columns:1fr;gap:8px} .audit-ledger-meta{grid-template-columns:auto 1fr;align-items:center}.audit-ledger-meta small{grid-column:1/-1} .month-close-controls,.tax-advisor-controls{grid-template-columns:1fr!important}.month-close-controls button,.tax-advisor-controls button{width:100%} } @media(max-width:640px){ .receivable-stats-advanced,.month-close-kpis,.month-close-info-grid,.audit-filter-grid{grid-template-columns:1fr!important} .audit-search-label{grid-column:auto} .payment-candidate{grid-template-columns:1fr}.payment-candidate>strong{text-align:left}.match-confidence{width:max-content} .audit-change-row{grid-template-columns:1fr}.audit-change-row i{display:none}.audit-change-row span{padding-left:8px;border-left:2px solid var(--line)} .receivable-row{padding:14px 0!important;gap:9px!important}.receivable-actions{width:100%}.receivable-actions button{flex:1 1 145px;min-height:42px} .bank-deposit-btn,.bank-withdrawal-btn{flex:1 1 140px} } /* V72 · zusätzliche Handy-Feinarbeit */ @media(max-width:900px){ .page-head .head-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important;width:100%!important} .page-head .head-actions>.period-selects{grid-column:1/-1;width:100%} .page-head .head-actions>button{width:100%;min-height:42px;white-space:normal;line-height:1.2} .receivable-list-card,.audit-ledger-card,.audit-filter-card,.month-close-info{padding:14px!important} } @media(max-width:520px){ .page-head .head-actions{grid-template-columns:1fr!important} .page-head .head-actions>.period-selects{grid-column:auto} .period-selects{width:100%;display:grid!important;grid-template-columns:1fr 1fr;gap:7px} .period-selects select{min-width:0;width:100%} .bank-summary-grid{grid-template-columns:1fr!important} .bank-hero{min-width:0!important} .bank-balance strong{font-size:clamp(30px,12vw,46px)!important;overflow-wrap:anywhere} .statement-item{min-width:0!important} .statement-item .tx-main,.statement-item .tx-category{min-width:0!important} } /* ===== V68-Funktionen in kompletter Serverbasis ===== */ /* ========================================================= V61 · Storno sichtbar + funktionierendes Dialogfenster ========================================================= */ .invoice-return-main-btn{ color:#a33f3f!important; border-color:rgba(185,72,72,.34)!important; background:rgba(185,72,72,.065)!important; font-weight:780!important; } .invoice-return-main-btn:hover, .cancellation-btn:hover{ background:rgba(185,72,72,.12)!important; border-color:rgba(185,72,72,.46)!important; } .cancellation-btn{ font-weight:760!important; white-space:nowrap; } .cancellation-picker-modal{ width:min(620px,100%); } .cancellation-picker-intro{ margin:-5px 0 16px; color:var(--muted); font-size:11px; line-height:1.55; } .cancellation-picker-label{ display:grid; gap:7px; font-size:10.5px; color:var(--muted); font-weight:700; } .cancellation-picker-label select{ width:100%; min-height:44px; padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:var(--panel); color:var(--text); font-size:12px; } .cancellation-picker-hint{ display:grid; gap:2px; margin-top:10px; padding:10px 12px; border:1px solid var(--line); border-radius:10px; background:var(--panel-2); } .cancellation-picker-hint strong{font-size:10px} .cancellation-picker-hint span{font-size:9px;color:var(--muted)} .invoice-management-table th:last-child, .invoice-management-table td:last-child{ position:sticky; right:0; z-index:3; background:var(--panel); box-shadow:-10px 0 16px -16px rgba(0,0,0,.55); } .invoice-management-table th:last-child{ z-index:4; background:var(--panel-2); } .invoice-management-table tbody tr:hover td:last-child{ background:var(--panel-2); } @media(max-width:760px){ .invoice-return-main-btn{ width:100%; justify-content:center; } .cancellation-picker-modal{ width:100%; max-width:none; } .invoice-management-table td:last-child{ min-width:235px; } } /* ========================================================= V62 · MINUSBETRÄGE IMMER ROT ========================================================= */ :root{ --kt-negative:#b42318; } body.dark{ --kt-negative:#ff6b6b; } .negative-expense, .money.neg, .tx-amount.out, .formal-amount.out, .amount.out, .report-negative, .cancellation-amount{ color:var(--kt-negative)!important; } /* ========================================================= V63 · RECHNUNG PDF / STORNORECHNUNG PDF GETRENNT ========================================================= */ .invoice-pdf-choice{ display:inline-flex; align-items:center; gap:6px; } .invoice-pdf-main-btn, .invoice-pdf-row-btn{ font-weight:760!important; } .cancellation-pdf-main-btn, .cancellation-pdf-row-btn{ color:var(--kt-negative)!important; border-color:rgba(180,35,24,.34)!important; background:rgba(180,35,24,.055)!important; font-weight:780!important; } .cancellation-pdf-main-btn:hover, .cancellation-pdf-row-btn:hover{ background:rgba(180,35,24,.11)!important; border-color:rgba(180,35,24,.48)!important; } @media(max-width:760px){ .invoice-pdf-choice{ width:100%; display:grid; grid-template-columns:1fr 1fr; } .invoice-pdf-main-btn, .cancellation-pdf-main-btn{ min-height:42px; width:100%; } } /* ========================================================= V64 · STORNORECHNUNGS-REPORT IN AUSWERTUNGEN ========================================================= */ .cancellation-report-builder{ margin-top:16px; border-color:rgba(180,35,24,.18); } .cancellation-report-pdf-mark{ color:var(--kt-negative)!important; border-color:rgba(180,35,24,.28)!important; background:rgba(180,35,24,.06)!important; } .cancellation-report-download{ background:#a8241b!important; border-color:#a8241b!important; color:#fff!important; } .cancellation-report-download:hover{ filter:brightness(.96); } .cancellation-report-includes b{ border-color:rgba(180,35,24,.15); } @media(max-width:760px){ .cancellation-report-controls{ grid-template-columns:1fr!important; } .cancellation-report-download{ width:100%; min-height:44px; } } /* ========================================================= V65 · STORNOREPORT = IDENTISCHER REPORT-STIL Der Storno-Report verwendet nun dieselbe PDF-Geometrie, Typografie, Spalten und Abstände wie alle übrigen Reports. ========================================================= */ .cancellation-report-builder .panel-head p{ max-width:760px; } /* ========================================================= V66 · ONE APP / PC + IPAD + IPHONE / PWA Desktop-Funktionen bleiben erhalten. ========================================================= */ .brand-mark{ overflow:hidden; padding:0!important; background:#111827!important; } .brand-mark img{ display:block; width:100%; height:100%; object-fit:cover; border-radius:inherit; } .mobile-bottom-nav, .mobile-sidebar-scrim{ display:none; } /* Tablet: vorhandene Inhalte bekommen mehr nutzbaren Platz. */ @media (max-width:1180px) and (min-width:821px){ .content{padding:22px} .topbar{padding-inline:20px} .toolbar{flex-wrap:wrap} .page-head{align-items:flex-start} .page-head>div:last-child{max-width:100%} .overview-shell{gap:14px} } /* iPhone / kleine Tablets: echte App-Navigation unten. */ @media (max-width:760px){ html,body{ min-height:100%; min-height:100dvh; overscroll-behavior-y:none; } body{ padding-bottom:calc(72px + env(safe-area-inset-bottom)); } body.mobile-menu-open{ overflow:hidden; } .topbar{ height:calc(58px + env(safe-area-inset-top)); min-height:58px; padding-top:env(safe-area-inset-top); padding-left:12px; padding-right:12px; gap:9px; } .top-actions{ gap:6px; } .top-actions .primary-btn{ min-height:40px; padding:9px 12px; } .icon-btn{ min-width:40px; min-height:40px; } .content{ padding:14px 12px 18px; } .page-head{ margin-bottom:17px; gap:12px; } .page-head h1{ font-size:24px; } .card{ border-radius:15px; } .panel{ padding:16px; } /* verhindert Safari-Zoom beim Antippen von Formularen */ input,select,textarea, .form-grid input,.form-grid select{ font-size:16px!important; } button,.tiny-btn,.primary-btn,.secondary-btn{ touch-action:manipulation; } .tiny-btn{ min-height:38px; } .toolbar, .filter-set, .form-actions{ flex-wrap:wrap; } .toolbar>*{ max-width:100%; } .table-scroll{ -webkit-overflow-scrolling:touch; scrollbar-width:thin; } .modal-backdrop{ place-items:end center; padding:0; } .modal{ width:100%!important; max-width:none!important; max-height:calc(94dvh - env(safe-area-inset-top)); overflow:auto; border-radius:22px 22px 0 0!important; padding:20px 16px calc(18px + env(safe-area-inset-bottom))!important; } .modal-head{ position:sticky; top:-20px; z-index:4; background:var(--panel); padding-top:6px; } .toast{ left:12px; right:12px; bottom:calc(82px + env(safe-area-inset-bottom)); text-align:center; } .sidebar{ top:0; bottom:0; height:100dvh; padding-top:calc(18px + env(safe-area-inset-top)); padding-bottom:calc(18px + env(safe-area-inset-bottom)); z-index:101; } .mobile-sidebar-scrim{ position:fixed; inset:0; display:block; border:0; background:rgba(15,23,42,.42); opacity:0; pointer-events:none; z-index:100; transition:opacity .18s ease; } .mobile-sidebar-scrim.open{ opacity:1; pointer-events:auto; } .mobile-bottom-nav{ position:fixed; left:0; right:0; bottom:0; z-index:90; display:grid; grid-template-columns:repeat(5,1fr); align-items:end; min-height:calc(64px + env(safe-area-inset-bottom)); padding:6px 8px calc(6px + env(safe-area-inset-bottom)); background:color-mix(in srgb,var(--panel) 93%,transparent); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border-top:1px solid var(--line); box-shadow:0 -10px 32px rgba(15,23,42,.06); } .mobile-bottom-nav button{ position:relative; min-width:0; min-height:52px; border:0; background:transparent; color:var(--muted); display:grid; justify-items:center; align-content:center; gap:3px; border-radius:12px; cursor:pointer; } .mobile-bottom-nav button>span{ font-size:18px; line-height:1; font-weight:800; } .mobile-bottom-nav button>b{ font-size:8.5px; font-weight:760; white-space:nowrap; } .mobile-bottom-nav button.active{ color:var(--text); } .mobile-bottom-nav button.active:after{ content:""; position:absolute; top:3px; width:18px; height:2px; border-radius:999px; background:var(--text); } .mobile-bottom-nav .mobile-quick-add{ width:52px; height:52px; min-height:52px; align-self:start; justify-self:center; margin-top:-18px; border-radius:18px; color:var(--panel); background:var(--text); box-shadow:0 10px 25px rgba(15,23,42,.2); } .mobile-bottom-nav .mobile-quick-add>span{ font-size:25px; font-weight:500; } .mobile-bottom-nav .mobile-quick-add>b{ display:none; } .mobile-bottom-nav .mobile-quick-add:after{ display:none; } .invoice-action-group{ flex-wrap:wrap; } } /* Sehr kleine iPhones */ @media (max-width:430px){ .content{padding-inline:10px} .kpi-grid, .grid-3, .tax-breakdown, .status-grid, .tax-simple{ grid-template-columns:1fr!important; } .mobile-bottom-nav{ padding-left:4px; padding-right:4px; } .mobile-bottom-nav button>b{ font-size:8px; } .page-head h1{ font-size:22px; } .bank-balance strong{ font-size:30px; } } /* Standalone PWA: kein künstlicher Browserabstand. */ html.pwa-standalone .topbar{ -webkit-user-select:none; user-select:none; } /* ========================================================= V67 · ZENTRALER SERVER-SYNC ========================================================= */ .server-sync-status{display:inline-flex;align-items:center;gap:7px;min-height:34px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--panel);color:var(--muted);font-size:9px;font-weight:760;white-space:nowrap;transition:.18s ease} .server-sync-dot{width:7px;height:7px;border-radius:50%;background:#9ca3af;box-shadow:0 0 0 3px rgba(156,163,175,.12)} .server-sync-status.is-synced{color:#287a59;border-color:rgba(40,122,89,.2);background:rgba(40,122,89,.045)} .server-sync-status.is-synced .server-sync-dot{background:#2e9b6b;box-shadow:0 0 0 3px rgba(46,155,107,.12)} .server-sync-status.is-saving,.server-sync-status.is-connecting{color:#74622b} .server-sync-status.is-saving .server-sync-dot,.server-sync-status.is-connecting .server-sync-dot{background:#d0a83e;animation:ktSyncPulse 1.1s ease-in-out infinite} .server-sync-status.is-offline,.server-sync-status.is-error{color:var(--kt-negative);border-color:rgba(180,35,24,.2);background:rgba(180,35,24,.045)} .server-sync-status.is-offline .server-sync-dot,.server-sync-status.is-error .server-sync-dot{background:var(--kt-negative)} @keyframes ktSyncPulse{50%{opacity:.35;transform:scale(.82)}} @media(max-width:760px){.server-sync-status{min-height:36px;padding:0 8px}.server-sync-label{display:none}.server-sync-status{width:36px;justify-content:center}.server-sync-dot{width:8px;height:8px}} /* V67: Bis der zentrale Datenstand geladen ist, keine versehentlichen lokalen Änderungen. */ .kt-server-booting .app-shell,.kt-server-booting .mobile-bottom-nav{pointer-events:none} /* ========================================================= V68 · MEHR-UNTERNEHMEN / PROFIL-SWITCHER ========================================================= */ .company-switcher{ position:relative; } .company-card-button{ width:100%; border:1px solid var(--line); color:var(--text); cursor:pointer; text-align:left; transition:.18s ease; } .company-card-button:hover{ border-color:color-mix(in srgb,var(--text) 18%,var(--line)); background:color-mix(in srgb,var(--panel-2) 88%,var(--text) 3%); } .company-card-copy{ min-width:0; flex:1; } .company-card-copy strong, .company-card-copy span{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .company-switch-chevron{ margin-left:auto; color:var(--muted); font-size:12px; transform:rotate(0deg); } .company-menu{ position:absolute; left:0; right:0; bottom:calc(100% + 9px); z-index:140; background:var(--panel); border:1px solid var(--line); border-radius:16px; box-shadow:0 18px 55px rgba(15,23,42,.18); padding:8px; max-height:min(520px,70vh); overflow:auto; } .company-menu.hidden{ display:none; } .company-menu-head{ display:grid; gap:2px; padding:8px 9px 10px; } .company-menu-head span{ color:var(--muted); font-size:8px; font-weight:850; letter-spacing:.13em; } .company-menu-head small{ color:var(--muted); font-size:9px; } .company-menu-list{ display:grid; gap:3px; } .company-menu-item, .company-menu-action{ width:100%; border:0; background:transparent; color:var(--text); display:flex; align-items:center; gap:10px; padding:9px; border-radius:11px; cursor:pointer; text-align:left; } .company-menu-item:hover, .company-menu-action:hover{ background:var(--panel-2); } .company-menu-item.active{ background:var(--panel-2); } .company-menu-avatar{ width:31px; height:31px; border-radius:10px; background:var(--text); color:var(--panel); display:grid; place-items:center; flex:0 0 auto; font-size:9px; font-weight:850; } .company-menu-copy{ display:grid; gap:2px; min-width:0; flex:1; } .company-menu-copy strong, .company-menu-action strong{ font-size:10.5px; } .company-menu-copy small, .company-menu-action small{ display:block; color:var(--muted); font-size:8.5px; margin-top:2px; } .company-menu-check{ margin-left:auto; color:var(--good); font-size:12px; font-weight:900; } .company-menu-divider{ height:1px; background:var(--line); margin:7px 3px; } .company-menu-action>span{ width:31px; height:31px; border-radius:10px; border:1px solid var(--line); display:grid; place-items:center; flex:0 0 auto; font-size:13px; } .company-menu-add{ margin-top:5px; } .company-menu-add>span{ background:var(--text); color:var(--panel); border-color:var(--text); } .company-menu-logout{ color:var(--kt-negative); } .company-create-modal{ width:min(760px,100%); } .company-create-info{ padding:12px 13px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); display:grid; gap:4px; } .company-create-info strong{ font-size:10.5px; } .company-create-info span{ color:var(--muted); font-size:9.5px; line-height:1.5; } @media(max-width:760px){ .company-menu{ position:fixed; left:10px; right:10px; bottom:calc(78px + env(safe-area-inset-bottom)); max-height:65dvh; border-radius:18px; } .company-create-modal{ width:100%!important; } } .kt-company-menu-section{margin:6px 0;padding:7px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .kt-active-company-line{display:flex;align-items:center;gap:9px;padding:7px 9px 4px;font-size:10px} .kt-company-list{display:grid;gap:3px;padding:3px 0} .kt-company-switch-item,.kt-add-company-btn{width:100%;border:0;background:transparent;color:var(--text);display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:10px;text-align:left;cursor:pointer} .kt-company-switch-item:hover,.kt-company-switch-item.active,.kt-add-company-btn:hover{background:var(--panel-2)} .kt-company-switch-avatar{width:29px;height:29px;border-radius:9px;background:var(--text);color:var(--panel);display:grid;place-items:center;font-size:9px;font-weight:850;flex:0 0 auto} .kt-company-switch-item>span:nth-child(2),.kt-add-company-btn>div{display:grid;gap:1px;min-width:0;flex:1}.kt-company-switch-item small,.kt-add-company-btn small{color:var(--muted);font-size:8px}.kt-company-switch-item>b{color:var(--good);margin-left:auto}.kt-add-company-btn>span{font-size:18px;width:29px;text-align:center}.company-create-modal{width:min(760px,100%)} /* ========================================================= V68.3 · STORNORECHNUNGEN + UNTERNEHMENSDIALOG ========================================================= */ .priority-workflow-backdrop{ z-index:1200; } .cancellation-nav-item .nav-svg-icon{ color:var(--kt-negative); } .cancellation-primary-btn, .cancellation-confirm-btn{ min-height:38px; padding:9px 14px; border:1px solid color-mix(in srgb,var(--kt-negative) 45%,var(--line)); border-radius:9px; background:var(--kt-negative); color:#fff; font:inherit; font-size:11px; font-weight:800; cursor:pointer; transition:background .18s ease,border-color .18s ease,transform .18s ease; } .cancellation-primary-btn:hover:not(:disabled), .cancellation-confirm-btn:hover:not(:disabled){ background:color-mix(in srgb,var(--kt-negative) 88%,#000); border-color:var(--kt-negative); transform:translateY(-1px); } .cancellation-primary-btn:disabled, .cancellation-confirm-btn:disabled{ cursor:not-allowed; opacity:.48; transform:none; } .status.cancelled{ color:var(--kt-negative)!important; background:color-mix(in srgb,var(--kt-negative) 10%,transparent)!important; border:1px solid color-mix(in srgb,var(--kt-negative) 22%,transparent)!important; } .cancellation-kpi-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; margin-bottom:16px; } .cancellation-kpi{ padding:17px 18px; box-shadow:none; } .cancellation-kpi>span{ display:block; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; } .cancellation-kpi>strong{ display:block; margin-top:10px; font-size:23px; letter-spacing:-.035em; } .cancellation-kpi>small{ display:block; margin-top:5px; color:var(--muted); font-size:9px; line-height:1.4; } .cancellation-kpi.warning{ border-color:color-mix(in srgb,var(--kt-negative) 28%,var(--line)); } .cancellation-kpi.warning>strong{color:var(--kt-negative)} .cancellation-start-card{ padding:20px; margin-bottom:16px; box-shadow:none; } .cancellation-start-card .panel-head{ align-items:center; } .cancellation-eligible-list{ display:grid; border-top:1px solid var(--line); } .cancellation-eligible-row{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; align-items:center; gap:14px; padding:12px 2px; border-bottom:1px solid var(--line); } .cancellation-eligible-row>div{ display:grid; grid-template-columns:auto minmax(0,1fr); align-items:center; gap:5px 8px; min-width:0; } .cancellation-eligible-row>div small{ grid-column:1/-1; color:var(--muted); font-size:9px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .cancellation-eligible-row>b{ font-size:12px; white-space:nowrap; } .cancellation-history-card{ box-shadow:none; } .cancellation-history-head{ margin:0; padding:18px 20px; border-bottom:1px solid var(--line); } .cancellation-history-table td:last-child{ min-width:220px; } .company-create-error{ padding:10px 12px; border:1px solid color-mix(in srgb,var(--kt-negative) 32%,var(--line)); border-radius:10px; background:color-mix(in srgb,var(--kt-negative) 7%,var(--panel)); color:var(--kt-negative); font-size:10px; font-weight:700; line-height:1.45; } .kt-add-company-btn:disabled{ cursor:not-allowed; opacity:.55; } .kt-add-company-btn:disabled:hover{ background:transparent; } button:disabled{ cursor:not-allowed; opacity:.52; } button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible{ outline:2px solid color-mix(in srgb,var(--text) 56%,transparent); outline-offset:2px; } @media(max-width:1050px){ .cancellation-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:900px){ #cancellationPickerBackdrop, #cancellationModalBackdrop, #companyCreateBackdrop{ padding:0!important; align-items:stretch!important; z-index:1200!important; } #cancellationPickerBackdrop>.modal, #cancellationModalBackdrop>.modal, #companyCreateBackdrop>.modal{ width:100%!important; max-width:none!important; height:100dvh!important; max-height:100dvh!important; min-height:100dvh!important; margin:0!important; border-radius:0!important; padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))!important; overflow-y:auto!important; overflow-x:hidden!important; } .cancellation-start-card .panel-head{ display:grid; } .cancellation-start-card .panel-head .cancellation-primary-btn{ width:100%; } } @media(max-width:620px){ .cancellation-kpi-grid{grid-template-columns:1fr} .cancellation-eligible-row{ grid-template-columns:minmax(0,1fr) auto; } .cancellation-eligible-row>.cancellation-btn{ grid-column:1/-1; width:100%; min-height:40px; } } .brand-mark img{width:100%;height:100%;object-fit:cover;border-radius:inherit;display:block} /* ========================================================= V68.4 · MOBILE BOTTOM-BAR + EINHEITLICHE FINANZ-ICONS ========================================================= */ .nav-item{ min-height:42px; padding:7px 9px; gap:10px; } .nav-item .nav-svg-icon{ width:28px; min-width:28px; height:28px; border-radius:8px; background:color-mix(in srgb,var(--text) 5%,transparent); color:var(--muted); transition:background .16s ease,color .16s ease,transform .16s ease; } .nav-item .nav-svg-icon svg{ width:17px; height:17px; stroke-width:1.75; } .nav-item:hover .nav-svg-icon{ color:var(--text); background:color-mix(in srgb,var(--text) 9%,transparent); transform:translateY(-1px); } .nav-item.active .nav-svg-icon{ color:var(--panel); background:color-mix(in srgb,var(--panel) 16%,transparent); } .nav-item .nav-icon-banking{color:#3569b3;background:rgba(53,105,179,.09)} .nav-item .nav-icon-income{color:#0b8e61;background:rgba(11,142,97,.10)} .nav-item .nav-icon-expense{color:#c44545;background:rgba(196,69,69,.10)} .nav-item .nav-icon-cash{color:#a66d00;background:rgba(166,109,0,.10)} .nav-item .nav-icon-vinted{color:#087f8c;background:rgba(8,127,140,.10)} .nav-item .nav-icon-sales{color:#6e56b5;background:rgba(110,86,181,.10)} .nav-item .nav-icon-inventory{color:#8a5b35;background:rgba(138,91,53,.10)} .nav-item .nav-icon-invoices,.nav-item .nav-icon-receivables,.nav-item .nav-icon-numbers{color:#3f66a3;background:rgba(63,102,163,.09)} .nav-item .nav-icon-cancellation{color:var(--kt-negative);background:rgba(180,35,24,.09)} .nav-item .nav-icon-vat{color:#8261a8;background:rgba(130,97,168,.10)} .nav-item .nav-icon-reports{color:#2e7380;background:rgba(46,115,128,.10)} .nav-item .nav-icon-closing{color:#456e52;background:rgba(69,110,82,.10)} .nav-item .nav-icon-automation{color:#9a6b00;background:rgba(154,107,0,.10)} .nav-item .nav-icon-partners,.nav-item .nav-icon-audit,.nav-item .nav-icon-settings{color:#566477;background:rgba(86,100,119,.09)} .nav-item .nav-icon-trash{color:#9b5555;background:rgba(155,85,85,.09)} .nav-item.active .nav-icon-banking, .nav-item.active .nav-icon-income, .nav-item.active .nav-icon-expense, .nav-item.active .nav-icon-cash, .nav-item.active .nav-icon-vinted, .nav-item.active .nav-icon-sales, .nav-item.active .nav-icon-inventory, .nav-item.active .nav-icon-invoices, .nav-item.active .nav-icon-cancellation, .nav-item.active .nav-icon-receivables, .nav-item.active .nav-icon-numbers, .nav-item.active .nav-icon-vat, .nav-item.active .nav-icon-reports, .nav-item.active .nav-icon-closing, .nav-item.active .nav-icon-automation, .nav-item.active .nav-icon-partners, .nav-item.active .nav-icon-audit, .nav-item.active .nav-icon-trash, .nav-item.active .nav-icon-settings{ color:var(--panel); background:color-mix(in srgb,var(--panel) 16%,transparent); } .finance-movement-svg{ width:20px; height:20px; display:block; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; } .tx-icon.in{background:color-mix(in srgb,var(--good) 9%,var(--panel-2))} .tx-icon.out{background:color-mix(in srgb,var(--bad) 9%,var(--panel-2));color:var(--bad)} @media(max-width:900px){ /* Im geschlossenen Zustand wird der Scrim vollständig aus dem iOS-Hit-Test genommen. Sichtbarkeit plus pointer-events ist stabiler als Transparenz allein. */ .sidebar-scrim{ visibility:hidden!important; } .sidebar-scrim.open{ visibility:visible!important; } } @media(max-width:760px){ body{ padding-bottom:calc(78px + env(safe-area-inset-bottom))!important; } .mobile-bottom-nav{ z-index:950!important; min-height:calc(68px + env(safe-area-inset-bottom))!important; padding:6px max(5px,env(safe-area-inset-right)) calc(7px + env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left))!important; background:var(--panel)!important; -webkit-backdrop-filter:none!important; backdrop-filter:none!important; pointer-events:auto!important; isolation:isolate; transform:translateZ(0); -webkit-transform:translateZ(0); box-shadow:0 -8px 28px rgba(15,23,42,.10)!important; } .mobile-bottom-nav button{ z-index:1; min-height:54px!important; padding:4px 2px!important; pointer-events:auto!important; touch-action:manipulation!important; -webkit-user-select:none; user-select:none; -webkit-tap-highlight-color:transparent; } .mobile-bottom-nav button:active{ background:var(--panel-2); transform:scale(.96); } .mobile-bottom-nav .mobile-nav-icon{ width:32px; height:30px; display:grid; place-items:center; border-radius:10px; background:transparent; } .mobile-bottom-nav .mobile-nav-icon svg{ width:21px; height:21px; display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; } .mobile-bottom-nav button>b{ font-size:9px!important; line-height:1.05; letter-spacing:-.01em; pointer-events:none; } .mobile-bottom-nav button.active{ color:var(--text); } .mobile-bottom-nav button.active .mobile-nav-icon{ background:color-mix(in srgb,var(--text) 8%,var(--panel)); } .mobile-bottom-nav button.active:after{ top:1px!important; width:16px!important; height:2px!important; } .mobile-bottom-nav .mobile-quick-add{ width:54px!important; height:54px!important; min-height:54px!important; margin-top:-18px!important; border:3px solid var(--panel)!important; border-radius:18px!important; } .mobile-bottom-nav .mobile-quick-add .mobile-nav-icon{ width:100%; height:100%; color:var(--panel); background:transparent; } .mobile-bottom-nav .mobile-quick-add .mobile-nav-icon svg{ width:25px; height:25px; stroke-width:2; } .mobile-bottom-nav .mobile-quick-add:active{ background:color-mix(in srgb,var(--text) 88%,var(--muted)); } .kt-server-booting .mobile-bottom-nav{ pointer-events:none!important; } } /* ========================================================= V68.6 · abschließende Bedien- und Ebenenregeln ========================================================= */ #modalBackdrop, #invoiceModalBackdrop, #paymentMatchBackdrop, #receiptModalBackdrop, #partnerModalBackdrop, #inventoryPickerBackdrop, #inventoryAdjustBackdrop, #ktProfileBackdrop, #transactionDetailBackdrop, #invoiceUploadBackdrop{ z-index:1100!important; } #cancellationPickerBackdrop, #cancellationModalBackdrop, #companyCreateBackdrop{ z-index:1200!important; } .toast{ z-index:1300!important; } /* Bereits belegte Nummern bleiben in jeder Ansicht und auch im Dark Mode rot. */ #content .invoice-number-chip.used, body.dark #content .invoice-number-chip.used, #content .invoice-number-chip.legacy-used:disabled, body.dark #content .invoice-number-chip.legacy-used:disabled{ color:#fff!important; background:#dc2626!important; border-color:#991b1b!important; box-shadow:0 1px 2px rgba(127,29,29,.22)!important; opacity:1!important; cursor:not-allowed!important; } #content .invoice-number-chip.used:hover, body.dark #content .invoice-number-chip.used:hover, #content .invoice-number-chip.legacy-used:disabled:hover, body.dark #content .invoice-number-chip.legacy-used:disabled:hover{ color:#fff!important; background:#dc2626!important; border-color:#991b1b!important; } @media(max-width:760px){ #modalBackdrop, #invoiceModalBackdrop, #paymentMatchBackdrop, #receiptModalBackdrop, #partnerModalBackdrop, #inventoryPickerBackdrop, #inventoryAdjustBackdrop, #ktProfileBackdrop, #transactionDetailBackdrop, #invoiceUploadBackdrop{ padding:0!important; align-items:stretch!important; justify-content:center!important; } #modalBackdrop>.modal, #invoiceModalBackdrop>.modal, #paymentMatchBackdrop>.modal, #receiptModalBackdrop>.modal, #partnerModalBackdrop>.modal, #inventoryPickerBackdrop>.modal, #inventoryAdjustBackdrop>.modal, #ktProfileBackdrop>.modal, #transactionDetailBackdrop>.modal, #invoiceUploadBackdrop>.modal{ width:100%!important; max-width:none!important; height:100dvh!important; max-height:100dvh!important; min-height:100dvh!important; margin:0!important; border-radius:0!important; padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(14px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left))!important; overflow-x:hidden!important; overflow-y:auto!important; } .modal-backdrop:not(.hidden){ pointer-events:auto!important; } .modal-backdrop:not(.hidden)>.modal{ pointer-events:auto!important; } .modal-head>.icon-btn, .form-actions>button, .mobile-bottom-nav>button{ min-height:44px; } } /* ========================================================= V68.8 · KLEINE BUTTONS BESSER KLICKBAR ========================================================= */ .tiny-btn{ min-height:36px; padding:8px 11px; } @media (max-width:900px), (pointer:coarse){ .tiny-btn, .primary-btn, .secondary-btn, .cancellation-primary-btn, .cancellation-confirm-btn, .icon-btn, .period-pills button, .invoice-action-group button, .row-actions button, .head-actions button{ min-height:44px!important; touch-action:manipulation!important; } .icon-btn{ min-width:44px!important; } .invoice-action-group, .row-actions, .head-actions{ gap:9px!important; row-gap:9px!important; } } /* V68.9 · KI-Dokumenten-Inbox, Buchungsnummern & sichere Unternehmensverwaltung */ .booking-number-badge{display:inline-flex;align-items:center;min-height:22px;padding:3px 7px;border-radius:999px;border:1px solid var(--line);background:var(--panel-2);color:var(--text);font-size:9px;font-weight:850;letter-spacing:.03em;white-space:nowrap} .ai-upload-card{overflow:hidden}.ai-upload-card .panel-head{align-items:center}.ai-drop-zone{display:grid;place-items:center;text-align:center;gap:7px;min-height:190px;padding:28px;border:1.5px dashed color-mix(in srgb,var(--text) 22%,var(--line));border-radius:18px;background:color-mix(in srgb,var(--panel-2) 72%,transparent);cursor:pointer;transition:.18s ease}.ai-drop-zone:hover,.ai-drop-zone.dragover{border-color:color-mix(in srgb,var(--text) 55%,var(--line));background:color-mix(in srgb,var(--panel-2) 88%,var(--text) 4%);transform:translateY(-1px)}.ai-drop-zone strong{font-size:16px}.ai-drop-zone span{font-size:12px;color:var(--muted)}.ai-drop-zone small{max-width:720px;color:var(--muted);font-size:10px;line-height:1.5}.ai-review-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:14px;padding:14px 16px;border:1px solid color-mix(in srgb,var(--warn) 32%,var(--line));border-radius:14px;background:color-mix(in srgb,var(--warn) 8%,var(--panel));}.ai-review-banner div{display:grid;gap:3px}.ai-review-banner strong{font-size:12px}.ai-review-banner span{font-size:10px;color:var(--muted)}.ai-results{margin-top:18px;padding-top:16px;border-top:1px solid var(--line)}.ai-results .panel-head.compact{margin-bottom:8px}.ai-result-row{display:flex;align-items:center;gap:10px;padding:10px 2px;border-bottom:1px solid var(--line)}.ai-result-row:last-child{border-bottom:0}.ai-result-row>span{width:24px;height:24px;border-radius:50%;display:grid;place-items:center;background:var(--panel-2);font-size:11px;font-weight:900}.ai-result-row.success>span{color:var(--good)}.ai-result-row.review>span{color:var(--warn)}.ai-result-row.error>span{color:var(--bad)}.ai-result-row>div{display:grid;gap:2px;min-width:0}.ai-result-row strong{font-size:11px;overflow:hidden;text-overflow:ellipsis}.ai-result-row small,.ai-empty-result{font-size:10px;color:var(--muted)}.ai-empty-result{padding:8px 0}.ai-review-modal{width:min(820px,100%);max-height:min(90vh,900px);overflow:auto}.ai-review-summary{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel-2)}.ai-review-summary div{display:grid;gap:3px}.ai-review-summary span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800}.ai-review-summary strong{font-size:12px}.ai-review-summary p{grid-column:1/-1;margin:2px 0 0;font-size:10px;color:var(--muted);line-height:1.5}.ai-review-note{padding:11px 12px;border:1px solid var(--line);border-radius:11px;background:var(--panel-2);font-size:10px;color:var(--muted);line-height:1.45}.ai-settings-card .panel-head{align-items:center}.ai-settings-help{display:grid;align-content:center;gap:3px;padding:8px 0}.ai-settings-help strong{font-size:11px}.ai-settings-help span{font-size:9px;color:var(--muted);line-height:1.45}.head-actions .danger-btn{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 32%,var(--line))} @media(max-width:700px){.ai-review-banner{align-items:stretch;flex-direction:column}.ai-review-banner button{width:100%}.ai-review-summary{grid-template-columns:1fr}.ai-review-summary p{grid-column:1}.ai-drop-zone{min-height:160px;padding:22px 14px}.ai-settings-help{grid-column:1/-1}} .ai-data-notice{margin-top:10px;padding:10px 12px;border:1px solid var(--border);border-radius:12px;background:var(--soft);font-size:11px;line-height:1.5;color:var(--muted)} /* v68.10 – vereinfachter Rechnungseditor + automatische Bestandspositionen */ #invoiceModalBackdrop .invoice-editor-modal{width:min(980px,100%)!important} .invoice-items-block{padding:18px!important;background:var(--surface-2)} .dynamic-position-head{align-items:center!important} .invoice-add-position-btn{flex:0 0 auto;white-space:nowrap} .invoice-items-container{gap:10px!important} #invoiceItemsContainer .invoice-item-row.dynamic-invoice-position{ display:grid!important; grid-template-columns:minmax(240px,2fr) 90px minmax(135px,1fr) 100px!important; gap:12px!important; padding:14px!important; min-height:0!important; background:var(--panel)!important; box-shadow:0 1px 0 rgba(15,23,42,.02); } #invoiceItemsContainer .invoice-position-topline{ grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:12px; padding-bottom:2px; } #invoiceItemsContainer .invoice-position-label{ position:static!important; inset:auto!important; color:var(--text)!important; font-size:10px!important; font-weight:850!important; letter-spacing:.08em!important; } .invoice-position-remove{ border:0; background:transparent; color:var(--muted); font:inherit; font-size:10px; font-weight:750; cursor:pointer; padding:5px 7px; border-radius:8px; } .invoice-position-remove:hover{background:var(--surface-2);color:var(--danger,#b42318)} #invoiceItemsContainer .invoice-stock-toggle{ grid-column:1/3; display:flex!important; flex-direction:row!important; align-items:center!important; gap:10px; min-height:52px; padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); cursor:pointer; } #invoiceItemsContainer .invoice-stock-toggle input{ width:18px!important; min-height:18px!important; height:18px!important; flex:0 0 auto; margin:0; } #invoiceItemsContainer .invoice-stock-toggle span{display:flex;flex-direction:column;gap:2px} #invoiceItemsContainer .invoice-stock-toggle b{font-size:11px;color:var(--text)} #invoiceItemsContainer .invoice-stock-toggle small{font-size:9px;color:var(--muted);font-weight:500} #invoiceItemsContainer .invoice-line-total{ grid-column:3/-1; display:flex; align-items:center; justify-content:space-between; gap:12px; min-height:52px; padding:10px 12px; border:1px solid var(--line); border-radius:11px; background:var(--surface-2); } #invoiceItemsContainer .invoice-line-total span{font-size:10px;color:var(--muted);font-weight:700} #invoiceItemsContainer .invoice-line-total strong{font-size:15px;color:var(--text);font-variant-numeric:tabular-nums} .invoice-live-totals{margin-top:14px!important;padding:14px 16px!important;border-radius:12px!important;background:var(--panel)!important} .inventory-multi-metric{grid-column:span 2}.inventory-multi-metric small{line-height:1.65} @media(max-width:820px){ #invoiceItemsContainer .invoice-item-row.dynamic-invoice-position{grid-template-columns:1fr 1fr!important} #invoiceItemsContainer .invoice-item-desc{grid-column:1/-1!important} #invoiceItemsContainer .invoice-stock-toggle{grid-column:1/2} #invoiceItemsContainer .invoice-line-total{grid-column:2/3} } @media(max-width:560px){ .invoice-items-block{padding:12px!important} .dynamic-position-head{align-items:stretch!important;flex-direction:column!important} .invoice-add-position-btn{width:100%} #invoiceItemsContainer .invoice-item-row.dynamic-invoice-position{grid-template-columns:1fr!important;padding:12px!important} #invoiceItemsContainer .invoice-item-desc,#invoiceItemsContainer .invoice-stock-toggle,#invoiceItemsContainer .invoice-line-total{grid-column:1!important} } /* ========================================================= v68.11 · Kundenprofile im Rechnungseditor ========================================================= */ .customer-profile-field{position:relative} .invoice-customer-suggestions{ position:absolute; z-index:8; top:calc(100% - 2px); left:0; right:0; display:grid; gap:4px; max-height:310px; overflow:auto; padding:7px; border:1px solid var(--line); border-radius:13px; background:var(--panel); box-shadow:0 18px 50px rgba(15,23,42,.16); } .invoice-customer-suggestions.hidden{display:none!important} .invoice-customer-suggestion{ width:100%; display:grid; grid-template-columns:36px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:58px; padding:9px 10px; border:0; border-radius:10px; background:transparent; color:var(--text); text-align:left; cursor:pointer; font:inherit; } .invoice-customer-suggestion:hover, .invoice-customer-suggestion:focus-visible{background:var(--surface-2);outline:none} .invoice-customer-avatar{ width:36px;height:36px;display:grid;place-items:center; border:1px solid var(--line);border-radius:11px;background:var(--surface-2); font-size:10px;font-weight:900; } .invoice-customer-suggestion-copy{min-width:0;display:grid;gap:2px} .invoice-customer-suggestion-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px} .invoice-customer-suggestion-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:9.5px;font-weight:500} .invoice-customer-suggestion-copy em{color:var(--muted);font-size:8.5px;font-style:normal;font-weight:750} .invoice-customer-suggestion>b{color:var(--text);font-size:9px;white-space:nowrap} @media(max-width:560px){ .invoice-customer-suggestions{position:static;margin-top:6px;max-height:250px;box-shadow:none} .invoice-customer-suggestion{grid-template-columns:34px minmax(0,1fr)} .invoice-customer-suggestion>b{grid-column:2} } /* ====================================================================== v68.12 · Zahlungsarten + getrennte Rechnungs-/Stornoansicht ====================================================================== */ .expense-payment-field{ display:none; margin-top:4px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); } .expense-payment-head h3{margin:3px 0 4px} .expense-payment-head p{margin:0 0 13px;color:var(--muted);font-size:11px;line-height:1.5} .expense-payment-grid{ display:grid; grid-template-columns:minmax(220px,1fr) minmax(220px,1fr); gap:14px; align-items:end; } .payment-method-badge{ display:inline-flex; align-items:center; gap:8px; width:max-content; max-width:100%; min-height:30px; padding:5px 9px; border:1px solid var(--line); border-radius:9px; background:var(--panel); color:var(--text); font-size:10px; font-weight:750; line-height:1; vertical-align:middle; } .payment-method-badge.compact{min-height:24px;padding:3px 7px;margin-top:5px;font-size:9px;gap:6px} .payment-method-badge.branded{background:color-mix(in srgb,var(--panel) 92%,#fff 8%)} .payment-method-badge.payment-method-empty{color:var(--muted);font-weight:650} .payment-logo-svg{display:block;width:auto;height:18px;overflow:visible;flex:0 0 auto} .payment-method-badge.compact .payment-logo-svg{height:14px} .visa-logo{width:43px;color:#1a1f71} .visa-logo text{fill:currentColor;font:italic 900 15px Arial,sans-serif;letter-spacing:-1px} .mastercard-logo{width:37px} .mastercard-logo .mc-left{fill:#eb001b;opacity:.95} .mastercard-logo .mc-right{fill:#f79e1b;opacity:.92} .amex-logo{width:46px} .amex-logo rect{fill:#2e77bc} .amex-logo text{fill:#fff;font:800 8px Arial,sans-serif;letter-spacing:.3px} .paypal-logo{width:38px;color:#003087} .paypal-logo text{fill:currentColor;font:800 10px Arial,sans-serif} .wallet-logo{width:40px;color:var(--text)} .wallet-logo text{fill:currentColor;font:800 10px -apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif} .payment-method-metric .payment-method-badge{margin-top:2px} .bd-info .payment-method-badge{margin-top:0} /* Dokumenttyp und Nummer dürfen optisch nie zusammenkleben. */ .invoice-doc-type{ display:inline-flex; align-items:center; font-size:9px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; } .invoice-doc-type + .invoice-list-no, .invoice-doc-type + strong{margin-left:8px} .invoice-list-no{display:inline-block} .cancellation-history-table .invoice-doc-type + .invoice-list-no{margin-left:8px} @media(max-width:700px){ .expense-payment-grid{grid-template-columns:1fr} } /* ====================================================================== v68.13.1 · Zahlungsarten-Dropdown nur beim Öffnen sichtbar ====================================================================== */ .expense-payment-grid{grid-template-columns:minmax(0,1fr)} .payment-method-preview{display:none!important} .payment-method-field{min-width:0} .payment-method-select{position:relative;margin-top:6px} .payment-method-native{position:absolute!important;inline-size:1px!important;block-size:1px!important;opacity:0!important;pointer-events:none!important} .payment-method-trigger{ width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--line);border-radius:10px; background:var(--panel);color:var(--text);display:flex;align-items:center;justify-content:space-between;gap:10px; text-align:left;font:inherit;cursor:pointer } .payment-method-trigger:focus-visible{outline:2px solid color-mix(in srgb,var(--text) 28%,transparent);outline-offset:2px} .payment-method-trigger-content,.payment-method-option{display:flex;align-items:center;gap:10px;min-width:0} .payment-method-trigger-content{flex:1;overflow:hidden} .payment-method-trigger .payment-logo-svg,.payment-method-option .payment-logo-svg{height:18px;max-width:48px} .payment-method-option-text{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .payment-method-chevron{font-size:18px;line-height:1;color:var(--muted);transition:transform .16s ease} .payment-method-trigger[aria-expanded="true"] .payment-method-chevron{transform:rotate(180deg)} .payment-method-menu.hidden{display:none!important} .payment-method-menu{ position:absolute;z-index:140;left:0;right:0;top:calc(100% + 6px);max-height:330px;overflow:auto; padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--panel); box-shadow:0 18px 48px rgba(0,0,0,.18) } .payment-method-option{ width:100%;min-height:40px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--text); text-align:left;cursor:pointer } .payment-method-option:hover,.payment-method-option:focus-visible,.payment-method-option[aria-selected="true"]{background:var(--surface-2);outline:none} .payment-method-option .visa-logo{width:43px} .payment-method-option .mastercard-logo{width:37px} .payment-method-option .amex-logo{width:46px} .payment-method-option .paypal-logo{width:38px} .payment-method-option .wallet-logo{width:40px} .modal-backdrop:not(.hidden)>.modal{overscroll-behavior:contain} @media(max-width:700px){.payment-method-menu{max-height:270px}} /* ====================================================================== v68.13.2 · Icons in Zahlungsart- und Einnahme-Plattform-Auswahl ====================================================================== */ .payment-generic-icon,.platform-generic-icon,.platform-vinted-logo,.platform-kleinanzeigen-icon{ width:22px!important;height:22px!important;color:var(--text);fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;flex:0 0 22px } .payment-generic-icon text{stroke:none;fill:currentColor;font:800 7px Arial,sans-serif} .other-payment-icon circle{fill:currentColor;stroke:none} .platform-logo-svg{display:block;width:auto;height:20px;overflow:visible;flex:0 0 auto} .platform-paypal-logo{width:42px;color:#003087} .platform-paypal-logo text{fill:currentColor;font:800 10px Arial,sans-serif} .platform-ebay-logo{width:40px;color:var(--text)} .platform-ebay-logo text{fill:currentColor;font:800 11px Arial,sans-serif;letter-spacing:-.4px} .platform-vinted-logo{color:#087f8c} .platform-kleinanzeigen-icon{color:#e55f43} .platform-bank-icon{color:#3569b3} .platform-cash-icon{color:#23845b} .platform-badge-with-icon{display:inline-flex;align-items:center;gap:6px} .platform-badge-with-icon .platform-logo-svg{height:14px;max-width:34px} .platform-badge-with-icon .platform-generic-icon,.platform-badge-with-icon .platform-vinted-logo,.platform-badge-with-icon .platform-kleinanzeigen-icon{width:15px!important;height:15px!important;flex-basis:15px} .income-platform-select{position:relative;margin-top:6px;width:100%} .income-platform-native{position:absolute!important;inline-size:1px!important;block-size:1px!important;opacity:0!important;pointer-events:none!important} .income-platform-trigger{ width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text); display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;font:inherit;cursor:pointer } .income-platform-trigger:focus-visible{outline:2px solid color-mix(in srgb,var(--text) 28%,transparent);outline-offset:2px} .income-platform-trigger-content,.income-platform-option{display:flex;align-items:center;gap:10px;min-width:0} .income-platform-trigger-content{flex:1;overflow:hidden} .income-platform-trigger .platform-logo-svg,.income-platform-option .platform-logo-svg{height:20px;max-width:48px} .income-platform-trigger .platform-generic-icon,.income-platform-trigger .platform-vinted-logo,.income-platform-trigger .platform-kleinanzeigen-icon, .income-platform-option .platform-generic-icon,.income-platform-option .platform-vinted-logo,.income-platform-option .platform-kleinanzeigen-icon{width:22px!important;height:22px!important;flex:0 0 22px} .income-platform-option-text{font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .income-platform-chevron{font-size:18px;line-height:1;color:var(--muted);transition:transform .16s ease} .income-platform-trigger[aria-expanded="true"] .income-platform-chevron{transform:rotate(180deg)} .income-platform-menu.hidden{display:none!important} .income-platform-menu{ position:absolute;z-index:140;left:0;right:0;top:calc(100% + 6px);max-height:300px;overflow:auto;padding:6px;border:1px solid var(--line); border-radius:12px;background:var(--panel);box-shadow:0 18px 48px rgba(0,0,0,.18) } .income-platform-option{width:100%;min-height:40px;padding:8px 10px;border:0;border-radius:8px;background:transparent;color:var(--text);text-align:left;cursor:pointer} .income-platform-option:hover,.income-platform-option:focus-visible,.income-platform-option[aria-selected="true"]{background:var(--surface-2);outline:none} @media(max-width:700px){.income-platform-menu{max-height:260px}} /* ====================================================================== v68.13.3 · Dashboard-Icons ruhiger + flüssigere Editor-Fenster ====================================================================== */ /* Dashboard: keine kleinen Badge-Pillen mehr in den Guthaben-Karten. Jede Plattform bekommt eine gleich große, ruhige Icon-Fläche. */ .dashboard-wallet-card-top{ min-height:34px; align-items:center; gap:10px; } .dashboard-wallet-brand-copy{ min-width:0; display:grid; gap:3px; align-content:center; } .dashboard-wallet-icon{ width:34px; height:34px; flex:0 0 34px; display:grid; place-items:center; border:1px solid var(--line); border-radius:10px; background:var(--panel); color:var(--text); } .dashboard-wallet-icon .platform-generic-icon, .dashboard-wallet-icon .platform-vinted-logo, .dashboard-wallet-icon .platform-kleinanzeigen-icon{ width:18px!important; height:18px!important; flex-basis:18px!important; } .dashboard-wallet-icon .platform-paypal-logo, .dashboard-wallet-icon .platform-ebay-logo{ width:29px!important; max-width:29px!important; height:15px!important; } .dashboard-wallet-brand-name{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); font-size:10.5px; font-weight:800; line-height:1.15; } .dashboard-wallet-kind{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:8px; font-weight:650; line-height:1.2; } .dashboard-wallet-card:hover .dashboard-wallet-icon{ border-color:color-mix(in srgb,var(--text) 18%,var(--line)); } @media(max-width:620px){ .dashboard-wallet-card-top{align-items:center} } /* Performance: Nur das eigentliche Fenster scrollt. Der Backdrop selbst bleibt starr. Dadurch gibt es keine zwei verschachtelten Scrollflächen mehr. */ .modal-backdrop, .backdrop, [id$="Backdrop"]{ overflow:hidden!important; -webkit-overflow-scrolling:auto!important; overscroll-behavior:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; background:rgba(15,23,42,.38); } .modal-backdrop > .modal, .backdrop > .modal, [id$="Backdrop"] > .modal, [id$="Backdrop"] > .modal-card{ overflow-x:hidden!important; overflow-y:auto!important; max-height:calc(100vh - 24px)!important; max-height:calc(100dvh - 24px)!important; -webkit-overflow-scrolling:touch!important; overscroll-behavior:contain!important; touch-action:pan-y; scroll-behavior:auto!important; scrollbar-gutter:auto!important; transform:translateZ(0); -webkit-transform:translateZ(0); backface-visibility:hidden; -webkit-backface-visibility:hidden; box-shadow:0 16px 48px rgba(0,0,0,.18)!important; } /* Der feste Kopf bleibt leichtgewichtig. */ .modal-head, .modal-header{ box-shadow:none!important; backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } /* Während ein Dialog offen ist, wird die Seite dahinter nicht zusätzlich gescrollt oder mit teuren Blur-Effekten neu berechnet. */ @supports selector(body:has(*)){ body:has([id$="Backdrop"]:not(.hidden)){ overflow:hidden!important; } body:has([id$="Backdrop"]:not(.hidden)) .topbar, body:has([id$="Backdrop"]:not(.hidden)) .mobile-bottom-nav{ backdrop-filter:none!important; -webkit-backdrop-filter:none!important; } } @media(max-width:760px){ .modal-backdrop, .backdrop, [id$="Backdrop"]{ padding:0!important; } .modal-backdrop > .modal, .backdrop > .modal, [id$="Backdrop"] > .modal, [id$="Backdrop"] > .modal-card{ width:100%!important; max-width:none!important; height:100dvh!important; min-height:100dvh!important; max-height:100dvh!important; margin:0!important; border-radius:0!important; box-shadow:none!important; } } /* ====================================================================== v68.13.4 · Schnellstart, Umbuchungs-Icons & Mobile-Finish ====================================================================== */ /* "Neu" öffnet einen ruhigen Schnellstarter statt direkt eines Formulars. */ .quick-create-backdrop{z-index:1210!important} .quick-create-modal{ width:min(760px,calc(100vw - 32px))!important; max-height:min(88dvh,760px)!important; padding:22px!important; } .quick-create-subtitle{ margin:5px 0 0; color:var(--muted); font-size:11px; line-height:1.45; } .quick-create-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:18px; } .quick-create-action{ min-width:0; min-height:78px; display:grid; grid-template-columns:44px minmax(0,1fr); align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--panel); color:var(--text); text-align:left; cursor:pointer; font:inherit; touch-action:manipulation; } .quick-create-action:hover, .quick-create-action:focus-visible{ background:var(--panel-2); border-color:color-mix(in srgb,var(--text) 18%,var(--line)); outline:none; } .quick-create-action:active{transform:translateY(1px)} .quick-create-action>span:last-child{min-width:0;display:grid;gap:4px} .quick-create-action strong{font-size:12px;line-height:1.2} .quick-create-action small{font-size:9.5px;line-height:1.35;color:var(--muted)} .quick-create-icon{ width:42px;height:42px;border-radius:12px;display:grid;place-items:center; background:var(--panel-2);color:var(--text);border:1px solid var(--line) } .quick-create-icon svg{ width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round } .quick-create-icon.income{color:var(--good)} .quick-create-icon.expense,.quick-create-icon.cancellation{color:var(--bad)} .quick-create-icon.transfer{color:#3569b3} .quick-create-action.storno{border-color:color-mix(in srgb,var(--bad) 22%,var(--line))} /* Umbuchung: dieselben Plattform-Symbole wie bei Einnahmen. */ .transfer-platform-select{position:relative;width:100%;margin-top:6px} .transfer-platform-native{ position:absolute!important;inline-size:1px!important;block-size:1px!important; opacity:0!important;pointer-events:none!important } .transfer-platform-trigger{ width:100%;min-height:44px;padding:9px 12px;border:1px solid var(--line);border-radius:10px; background:var(--panel);color:var(--text);display:flex;align-items:center;justify-content:space-between; gap:10px;text-align:left;font:inherit;cursor:pointer } .transfer-platform-trigger:focus-visible{ outline:2px solid color-mix(in srgb,var(--text) 28%,transparent);outline-offset:2px } .transfer-platform-trigger-content,.transfer-platform-option{ display:flex;align-items:center;gap:10px;min-width:0 } .transfer-platform-trigger-content{flex:1;overflow:hidden} .transfer-platform-trigger .platform-logo-svg,.transfer-platform-option .platform-logo-svg{height:20px;max-width:48px} .transfer-platform-trigger .platform-generic-icon, .transfer-platform-trigger .platform-vinted-logo, .transfer-platform-trigger .platform-kleinanzeigen-icon, .transfer-platform-option .platform-generic-icon, .transfer-platform-option .platform-vinted-logo, .transfer-platform-option .platform-kleinanzeigen-icon{ width:22px!important;height:22px!important;flex:0 0 22px } .transfer-platform-chevron{ font-size:18px;line-height:1;color:var(--muted);transition:transform .14s ease } .transfer-platform-trigger[aria-expanded="true"] .transfer-platform-chevron{transform:rotate(180deg)} .transfer-platform-menu.hidden{display:none!important} .transfer-platform-menu{ position:absolute;z-index:150;left:0;right:0;top:calc(100% + 6px); max-height:280px;overflow:auto;padding:6px;border:1px solid var(--line); border-radius:12px;background:var(--panel);box-shadow:0 16px 40px rgba(0,0,0,.16) } .transfer-platform-option{ width:100%;min-height:42px;padding:8px 10px;border:0;border-radius:8px; background:transparent;color:var(--text);text-align:left;cursor:pointer } .transfer-platform-option:hover, .transfer-platform-option:focus-visible, .transfer-platform-option[aria-selected="true"]{background:var(--surface-2);outline:none} .transfer-platform-inline{ display:inline-flex;align-items:center;gap:6px;min-width:0;color:inherit } .transfer-platform-inline .platform-logo-svg{height:15px;max-width:34px} .transfer-platform-inline .platform-generic-icon, .transfer-platform-inline .platform-vinted-logo, .transfer-platform-inline .platform-kleinanzeigen-icon{ width:16px!important;height:16px!important;flex:0 0 16px } .transfer-platform-inline>span:last-child{white-space:nowrap} .transfer-detail-route{display:flex!important;align-items:center;gap:7px!important;flex-wrap:wrap} .transfer-detail-route>strong{font-size:12px} /* Abschließende responsive Sicherungen: keine verzogenen Karten/Buttons oder unsichtbaren horizontalen Überläufe auf kleinen Geräten. */ .table-scroll, .table-wrap, .invoice-table-wrap, .cancellation-table-wrap{ width:100%; max-width:100%; overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; overscroll-behavior-x:contain; } .panel-head{min-width:0} .panel-head>div{min-width:0} .panel-head h2,.panel-head h3,.page-head h1{overflow-wrap:anywhere} .head-actions>*{max-width:100%} @media(max-width:760px){ .quick-create-backdrop{ align-items:flex-end!important; padding:0!important; } .quick-create-backdrop>.quick-create-modal{ width:100%!important; max-width:none!important; height:auto!important; min-height:0!important; max-height:min(82dvh,720px)!important; margin:0!important; border-radius:20px 20px 0 0!important; padding:18px max(14px,env(safe-area-inset-right)) max(18px,calc(env(safe-area-inset-bottom) + 12px)) max(14px,env(safe-area-inset-left))!important; box-shadow:0 -12px 40px rgba(0,0,0,.18)!important; } .quick-create-grid{gap:8px;margin-top:14px} .quick-create-action{min-height:72px;padding:10px;grid-template-columns:40px minmax(0,1fr);gap:10px} .quick-create-icon{width:38px;height:38px;border-radius:11px} .quick-create-action strong{font-size:11px} .quick-create-action small{font-size:9px} .transfer-grid{ grid-template-columns:minmax(0,1fr) 26px minmax(0,1fr)!important; gap:7px!important; align-items:end!important } .transfer-grid label{min-width:0!important} .transfer-arrow{padding-bottom:12px!important} .transfer-platform-menu{max-height:240px} .page-head .head-actions, .head-actions{ width:100%!important; max-width:100%!important; } .head-actions button, .head-actions .primary-btn, .head-actions .secondary-btn, .head-actions .cancellation-primary-btn{ max-width:100%; } .panel-head{ gap:10px!important; align-items:flex-start!important; flex-wrap:wrap!important; } .panel-head>button, .panel-head>.primary-btn, .panel-head>.secondary-btn{ flex:0 1 auto; } .formal-statement{max-width:100%!important;overflow:hidden} .formal-statement .formal-statement-top{min-width:0} .formal-statement .formal-brand{min-width:0} .formal-statement .formal-brand>div:last-child{min-width:0} } @media(max-width:520px){ .head-actions{ display:grid!important; grid-template-columns:repeat(2,minmax(0,1fr))!important; gap:8px!important; } .head-actions>.period-pills, .head-actions>.dashboard-period, .head-actions>.bulk-selection-controls, .head-actions>select{ grid-column:1/-1; } .head-actions button{ width:100%!important; min-width:0!important; white-space:normal!important; line-height:1.15!important; padding-left:9px!important; padding-right:9px!important; } .transfer-grid{ grid-template-columns:1fr!important; gap:8px!important } .transfer-arrow{ width:30px;height:30px;margin:-2px auto -2px; display:grid;place-items:center;transform:rotate(90deg);padding:0!important } } @media(max-width:390px){ .quick-create-grid{grid-template-columns:1fr} .topbar{gap:6px!important} .top-actions{gap:4px!important} .top-actions .icon-btn{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important} .top-actions .primary-btn{width:36px!important;height:36px!important;min-width:36px!important;min-height:36px!important} .search-wrap{padding-left:8px!important;padding-right:8px!important} } /* ====================================================================== v68.13.6 · Dashboard-Neugestaltung + saubere Warenmengenfelder ====================================================================== */ /* Dashboard: ruhigere Typografie und einheitliche Sektionen */ .dashboard-section, .dashboard-hero-panel{ border:1px solid var(--line); border-radius:20px; background:var(--panel); box-shadow:0 8px 26px rgba(15,23,42,.045); } body.dark .dashboard-section, body.dark .dashboard-hero-panel{ box-shadow:0 12px 30px rgba(0,0,0,.16); } .dashboard-section{ margin:16px 0 0; padding:22px; } .dashboard-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:18px; margin-bottom:16px; } .dashboard-section-head h3{ margin:3px 0 4px; font-size:18px; line-height:1.2; font-weight:730; letter-spacing:-.025em; } .dashboard-section-head p{ margin:0; color:var(--muted); font-size:11px; line-height:1.5; } .dashboard-section-kicker{ display:block; color:var(--muted); font-size:10px; font-weight:650; line-height:1.3; letter-spacing:0; text-transform:none; } /* Hero: die wichtigsten Werte stehen oben, ohne überladene Icons. */ .dashboard-hero-panel{ display:grid; grid-template-columns:minmax(270px,.85fr) minmax(0,1.65fr); gap:0; overflow:hidden; } .dashboard-hero-copy{ padding:28px 30px; border-right:1px solid var(--line); background:linear-gradient(145deg,var(--panel),var(--panel-2)); } .dashboard-hero-copy h2{ margin:5px 0 6px; font-size:26px; line-height:1.1; font-weight:740; letter-spacing:-.035em; } .dashboard-hero-copy>p{ margin:0; max-width:360px; color:var(--muted); font-size:11px; line-height:1.55; } .dashboard-liquidity{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line); } .dashboard-liquidity>span{ display:block; color:var(--muted); font-size:11px; font-weight:650; } .dashboard-liquidity>strong{ display:block; margin-top:7px; font-size:clamp(30px,3.2vw,44px); line-height:1; font-weight:750; letter-spacing:-.055em; } .dashboard-liquidity>small{ display:block; margin-top:9px; color:var(--muted); font-size:9.5px; line-height:1.4; } .dashboard-hero-kpis{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); padding:12px; background:var(--panel); } .dashboard-hero-kpis article{ min-width:0; padding:20px 22px; border-radius:14px; } .dashboard-hero-kpis article:nth-child(odd){border-right:1px solid var(--line)} .dashboard-hero-kpis article:nth-child(-n+2){border-bottom:1px solid var(--line)} .dashboard-hero-kpis span{ display:block; color:var(--muted); font-size:10px; font-weight:650; } .dashboard-hero-kpis strong{ display:block; margin-top:9px; font-size:24px; line-height:1.05; font-weight:730; letter-spacing:-.035em; overflow-wrap:anywhere; } .dashboard-hero-kpis small{ display:block; margin-top:7px; color:var(--muted); font-size:9px; line-height:1.35; } /* Konten & Plattformen: großzügiger, gleiche Icons, weniger Badge-Look. */ .dashboard-wallet-section{ margin:16px 0 0; padding:22px; } .dashboard-wallet-head, .dashboard-wallet-total{display:none!important} .dashboard-wallet-grid{ display:grid!important; grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:10px!important; align-items:stretch; } .dashboard-wallet-card{ position:relative; min-width:0; min-height:128px; height:auto!important; display:grid; grid-template-columns:42px minmax(0,1fr); grid-template-rows:auto 1fr auto; column-gap:12px; row-gap:0; align-items:center; padding:16px; border:1px solid var(--line); border-radius:15px; background:var(--panel-2); color:var(--text); text-align:left; box-shadow:none; transition:transform .15s ease,border-color .15s ease,background .15s ease; } .dashboard-wallet-card:hover{ transform:translateY(-1px); border-color:color-mix(in srgb,var(--text) 18%,var(--line)); background:var(--panel); } .dashboard-account-icon{ grid-row:1 / span 2; width:42px; height:42px; display:grid; place-items:center; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--text); } .dashboard-account-icon svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; } .dashboard-wallet-brand-copy{ min-width:0; display:grid; gap:3px; align-self:center; } .dashboard-wallet-brand-name{ min-width:0; color:var(--text); font-size:12px; font-weight:710; line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .dashboard-wallet-kind{ color:var(--muted); font-size:9px; font-weight:550; line-height:1.25; } .dashboard-wallet-card>strong{ grid-column:1 / -1; display:block; align-self:end; margin:17px 0 0; font-size:22px; line-height:1; font-weight:740; letter-spacing:-.04em; } .dashboard-wallet-open{ grid-column:1 / -1; display:flex; align-items:center; justify-content:space-between; margin-top:11px; padding-top:9px; border-top:1px solid var(--line); color:var(--muted); font-size:9px; font-weight:600; } .dashboard-wallet-open b{font-size:13px;font-weight:500} /* Universelle, modernere Kennzahlen-Karte. */ .dashboard-metric-tile{ min-width:0; display:grid; align-content:start; gap:7px; padding:17px 18px; border:1px solid var(--line); border-radius:14px; background:var(--panel-2); } .dashboard-metric-tile>span{ color:var(--muted)!important; font-size:10px!important; font-weight:620!important; letter-spacing:0!important; text-transform:none!important; } .dashboard-metric-tile>strong{ min-width:0; font-size:21px!important; line-height:1.05; font-weight:730!important; letter-spacing:-.035em!important; overflow-wrap:anywhere; } .dashboard-metric-tile>small{ color:var(--muted); font-size:9px!important; line-height:1.45; } .dashboard-comparison, .dashboard-profit-summary, .dashboard-inventory{ margin:16px 0 0!important; } .dashboard-comparison-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; } .dashboard-profit-head{margin-bottom:16px} .dashboard-profit-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .dashboard-profit-count{ border:1px solid var(--line); border-radius:999px; background:var(--panel-2); padding:7px 10px; color:var(--muted); font-size:9px; font-weight:620; white-space:nowrap; } .dashboard-profit-note{ margin:10px 2px 0; color:var(--muted); font-size:9px; line-height:1.45; } /* Bestand: weniger Kästen, dafür klare Zahlen und kompakte Artikelchips. */ .dashboard-inventory-summary{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } .dashboard-inventory-summary>.card{ box-shadow:none; } .dashboard-stock-strip{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; margin-top:10px; } .dashboard-stock-strip button{ min-width:0; min-height:64px; display:grid; gap:7px; align-content:center; padding:11px 12px; border:1px solid var(--line); border-radius:12px; background:var(--panel); color:var(--text); text-align:left; cursor:pointer; } .dashboard-stock-strip button:hover{background:var(--panel-2)} .dashboard-stock-strip span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); font-size:9px; font-weight:550; text-transform:none; letter-spacing:0; } .dashboard-stock-strip strong{ font-size:13px; font-weight:720; } /* Finanzstruktur: zwei klare Flächen statt der alten übergroßen Blöcke. */ .dashboard-finance-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(340px,.85fr); gap:12px; } .dashboard-turnover-panel, .dashboard-allocation-panel{ min-width:0; border:1px solid var(--line); border-radius:15px; background:var(--panel-2); } .dashboard-turnover-panel{padding:20px} .dashboard-turnover-main{ padding-bottom:18px; border-bottom:1px solid var(--line); } .dashboard-turnover-main span, .dashboard-turnover-lines span{ color:var(--muted); font-size:10px; font-weight:600; } .dashboard-turnover-main strong{ display:block; margin-top:8px; font-size:31px; line-height:1; font-weight:740; letter-spacing:-.045em; } .dashboard-turnover-main small{ display:block; margin-top:8px; color:var(--muted); font-size:9px; } .dashboard-turnover-lines{display:grid;margin-top:5px} .dashboard-turnover-lines>div{ min-height:43px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-bottom:1px solid var(--line); } .dashboard-turnover-lines>div:last-child{border-bottom:0} .dashboard-turnover-lines strong{ font-size:12px; font-weight:680; } .dashboard-turnover-result{ margin-top:6px; padding-top:7px; } .dashboard-turnover-result strong{font-size:18px!important} .dashboard-allocation-panel{ display:grid; grid-template-columns:170px minmax(0,1fr); gap:18px; align-items:center; padding:18px; } .dashboard-allocation-panel .single-donut{ width:156px; height:156px; margin:auto; } .dashboard-allocation-panel .single-donut:after{inset:12px} .dashboard-allocation-panel .single-donut-hole strong{font-size:15px} .dashboard-allocation-panel .allocation-row{ grid-template-columns:16px minmax(0,1fr) 38px 82px; min-height:42px; } /* Schnellzugriff */ .dashboard-quick-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-top:16px; } .dashboard-quick-grid button{ min-width:0; display:grid; gap:6px; padding:16px 17px; border:1px solid var(--line); border-radius:14px; background:var(--panel); color:var(--text); text-align:left; cursor:pointer; box-shadow:none; } .dashboard-quick-grid button:hover{background:var(--panel-2)} .dashboard-quick-grid span{ color:var(--muted); font-size:9.5px; font-weight:600; } .dashboard-quick-grid strong{ font-size:18px; font-weight:730; letter-spacing:-.025em; overflow-wrap:anywhere; } .dashboard-quick-grid small{ color:var(--muted); font-size:8.5px; } /* Rechnungen auf dem Dashboard an das neue Raster angleichen. */ .dashboard-invoice-strip{ margin:16px 0 0!important; padding:22px!important; } .dashboard-invoice-head{margin-bottom:7px} .dashboard-invoice-row{ min-height:48px; padding:11px 3px; } .dashboard-invoice-row .invoice-ref{font-size:11px;font-weight:720} .dashboard-invoice-row .invoice-customer{font-size:10px} .dashboard-invoice-row strong{font-size:11px;font-weight:720} /* Warenmenge bei Ein- und Ausgang: eigenes, sauberes Raster. */ #transactionForm .sale-cost-grid{ grid-template-columns:repeat(6,minmax(0,1fr))!important; gap:14px!important; align-items:start!important; } #transactionForm .sale-cost-grid>.inventory-picker-field{ grid-column:span 4!important; align-self:start; } #transactionForm .sale-cost-grid>.inventory-quantity-field{ grid-column:span 2!important; align-self:start; min-width:0; } #transactionForm .sale-cost-grid>.inventory-quantity-field input{ max-width:none!important; } #transactionForm .sale-cost-grid>.inventory-quantity-field .field-hint, #transactionForm .expense-purchase-grid>.inventory-quantity-field .field-hint{ min-height:14px; margin-top:0; } #transactionForm .sale-cost-grid>.sale-cost-preview, #transactionForm .sale-cost-grid>.shipping-expense-box{ grid-column:1 / -1!important; } #transactionForm .sale-cost-grid>label:not(.inventory-picker-field):not(.inventory-quantity-field){ grid-column:span 2; } #transactionForm .expense-purchase-grid{ grid-template-columns:minmax(0,1.45fr) minmax(150px,.55fr)!important; gap:14px!important; align-items:start!important; } #transactionForm .expense-purchase-grid>.inventory-quantity-field{ min-width:0; align-self:start; } #transactionForm .expense-purchase-grid>label:nth-of-type(3), #transactionForm .expense-purchase-grid>.span-2, #transactionForm .expense-purchase-grid>.expense-invoice-status{ grid-column:1 / -1!important; } .inventory-quantity-field{ display:flex!important; flex-direction:column!important; gap:8px!important; } .inventory-quantity-field input{ width:100%!important; min-width:0!important; height:48px!important; } /* Responsive Dashboard */ @media(max-width:1180px){ .dashboard-wallet-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} .dashboard-comparison-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .dashboard-stock-strip{grid-template-columns:repeat(3,minmax(0,1fr))} .dashboard-quick-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .dashboard-finance-grid{grid-template-columns:1fr} } @media(max-width:900px){ .dashboard-hero-panel{grid-template-columns:1fr} .dashboard-hero-copy{border-right:0;border-bottom:1px solid var(--line)} .dashboard-allocation-panel{grid-template-columns:150px minmax(0,1fr)} } @media(max-width:720px){ .dashboard-section,.dashboard-wallet-section,.dashboard-invoice-strip{padding:17px!important;border-radius:16px} .dashboard-hero-panel{border-radius:16px} .dashboard-hero-copy{padding:22px 19px} .dashboard-hero-kpis{padding:6px} .dashboard-hero-kpis article{padding:16px 13px} .dashboard-hero-kpis strong{font-size:19px} .dashboard-liquidity>strong{font-size:35px} .dashboard-section-head{align-items:flex-start;flex-direction:column;margin-bottom:13px} .dashboard-wallet-grid{grid-template-columns:1fr!important} .dashboard-wallet-card{min-height:112px;grid-template-columns:38px minmax(0,1fr);padding:14px} .dashboard-account-icon{width:38px;height:38px} .dashboard-wallet-card>strong{font-size:20px;margin-top:14px} .dashboard-comparison-grid,.dashboard-profit-grid,.dashboard-inventory-summary{grid-template-columns:1fr} .dashboard-stock-strip{grid-template-columns:repeat(2,minmax(0,1fr))} .dashboard-allocation-panel{grid-template-columns:1fr;padding:16px} .dashboard-allocation-panel .single-donut{width:150px;height:150px} .dashboard-quick-grid{grid-template-columns:1fr 1fr} #transactionForm .sale-cost-grid, #transactionForm .expense-purchase-grid{grid-template-columns:1fr!important} #transactionForm .sale-cost-grid>* , #transactionForm .expense-purchase-grid>*{ grid-column:1!important; } } @media(max-width:460px){ .dashboard-hero-kpis{grid-template-columns:1fr} .dashboard-hero-kpis article:nth-child(n){border-right:0;border-bottom:1px solid var(--line)} .dashboard-hero-kpis article:last-child{border-bottom:0} .dashboard-stock-strip,.dashboard-quick-grid{grid-template-columns:1fr} .dashboard-turnover-main strong{font-size:27px} } /* ========================================================= V68.13.7 · Einnahmen/Ausgaben-Liste ruhiger strukturieren ========================================================= */ .type-ledger .statement-item, .banking-list:not(.type-ledger) .statement-item{ align-items:start; } .tx-icon{ margin-top:2px; } .tx-main{ min-width:0; } .tx-main-heading{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; } .tx-main-heading strong{ margin:0; min-width:0; } .tx-main-heading .platform-badge, .tx-main-heading .payment-method-badge{ margin-top:0; flex:0 0 auto; } .tx-main-meta-stack{ display:grid; gap:4px; margin-top:5px; } .tx-main-meta-row--references{ gap:5px; } .tx-main-meta-row--secondary{ margin-top:0; } .tx-main-meta-row--secondary .inventory-inline-tag{ background:var(--panel); border-style:dashed; } .tx-main .reference-badge, .tx-main .booking-number-badge{ margin-top:0; } .tx-main .platform-badge, .tx-main .payment-method-badge.compact{ min-height:26px; padding:4px 8px; font-size:9px; } .tx-main .payment-method-badge.compact .payment-logo-svg, .tx-main .platform-badge .platform-logo-svg{ height:13px; } .tx-main span{ max-width:100%; } @media(max-width:900px){ .tx-main-heading{ flex-wrap:wrap; } } @media(max-width:620px){ .tx-main-heading{ gap:8px; } .tx-main-heading .platform-badge, .tx-main-heading .payment-method-badge{ order:3; } } /* ========================================================= v68.13.7 · Buchungslisten klarer und ruhiger ========================================================= */ .type-ledger .statement-item{ grid-template-columns:36px minmax(180px,1.2fr) minmax(170px,.9fr) minmax(190px,1fr) 94px 118px auto !important; gap:18px; align-items:center; padding:17px 16px; transition:background .16s ease; } .type-ledger .statement-item:hover{ background:color-mix(in srgb,var(--panel-2) 55%,transparent); } .type-ledger .tx-icon{ width:34px; height:34px; margin:0; border-radius:10px; box-shadow:none; } .type-ledger .tx-main{ display:grid; gap:3px; align-content:center; } .type-ledger .tx-main>strong{ font-size:13.5px; font-weight:780; letter-spacing:-.01em; } .type-ledger .tx-main>span{ margin:0; font-size:11.5px; line-height:1.35; color:var(--muted); } .type-ledger .tx-inventory-note, .type-ledger .vinted-income-username{ display:block; margin-top:4px; color:var(--muted); font-size:10px; line-height:1.3; font-weight:600; } .type-ledger .tx-inventory-note::before{ content:'Bestand · '; color:var(--text); font-weight:700; } .tx-record-meta{ display:grid; gap:6px; min-width:0; padding:1px 0; } .tx-record-line{ display:grid; grid-template-columns:64px minmax(0,1fr); gap:9px; align-items:baseline; min-width:0; } .tx-record-line>span{ color:var(--muted); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.055em; } .tx-record-line>strong{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:10.5px; font-weight:760; color:var(--text); font-variant-numeric:tabular-nums; } .tx-record-empty>strong{ color:var(--muted); font-weight:650; } .type-ledger .tx-category{ display:grid; gap:3px; align-content:center; min-width:0; } .type-ledger .tx-category>strong{ font-size:12px; font-weight:780; } .type-ledger .tx-category>span{ margin:0; line-height:1.35; } .tx-payment-inline{ display:flex; align-items:center; gap:8px; min-width:0; margin-top:5px; } .tx-payment-label{ flex:0 0 auto; color:var(--muted); font-size:9px; font-weight:700; text-transform:uppercase; letter-spacing:.05em; } .tx-payment-value{ display:inline-flex; align-items:center; gap:5px; min-width:0; color:var(--text); font-size:10px; font-weight:700; } .tx-payment-value>span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .tx-payment-value .platform-logo-svg, .tx-payment-value .payment-logo-svg{ width:auto; height:13px; max-width:34px; flex:0 0 auto; } .tx-payment-value .platform-generic-icon, .tx-payment-value .platform-vinted-logo, .tx-payment-value .platform-kleinanzeigen-icon, .tx-payment-value .payment-generic-icon{ width:14px!important; height:14px!important; flex-basis:14px; } .type-ledger .tx-date{ font-size:11px; line-height:1.35; } .type-ledger .tx-amount{ font-size:14px; font-weight:820; align-self:center; } .type-ledger .ledger-actions{ align-self:center; gap:7px; } @media(max-width:1180px){ .type-ledger .statement-item{ grid-template-columns:34px minmax(160px,1.2fr) minmax(155px,.9fr) minmax(160px,1fr) 88px 110px auto !important; gap:12px; } .tx-record-line{grid-template-columns:56px minmax(0,1fr);gap:7px} } /* Die gestapelte Darstellung gilt bis 1180 Pixel: darunter reicht die Breite fuer sieben Spalten nicht, Beschreibungen und Beschriftungen brachen sonst mitten im Wort um. */ @media(max-width:1180px){ .type-ledger .statement-item{ grid-template-columns:34px minmax(0,1fr) auto !important; gap:10px 12px; align-items:start; padding:15px 14px; } .type-ledger .tx-icon{grid-column:1;grid-row:1;width:32px;height:32px} .type-ledger .tx-main{grid-column:2;grid-row:1} .type-ledger .tx-amount{grid-column:3;grid-row:1;text-align:right;white-space:nowrap} .type-ledger .tx-record-meta{ grid-column:2/-1; grid-row:2; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:8px 14px; padding:10px 0 0; border-top:1px solid var(--line); } .type-ledger .tx-record-line{grid-template-columns:62px minmax(0,1fr)} .type-ledger .tx-category{ grid-column:2/-1; grid-row:3; display:grid!important; padding-top:4px; } .type-ledger .tx-date{ grid-column:2/-1; grid-row:4; display:flex!important; align-items:center; gap:6px; } .type-ledger .ledger-actions{ grid-column:2/-1; grid-row:5; justify-content:flex-start; flex-direction:row; flex-wrap:wrap; } } @media(max-width:520px){ .type-ledger .statement-item{padding:14px 12px} .type-ledger .tx-record-meta{grid-template-columns:1fr;gap:5px} .type-ledger .tx-record-line{grid-template-columns:70px minmax(0,1fr)} .tx-payment-inline{align-items:flex-start;flex-direction:column;gap:3px} .type-ledger .tx-main>strong{font-size:13px} .type-ledger .tx-amount{font-size:13px} } /* ========================================================= v68.13.8 · Ein Haupt-Scrollbereich + sanfter UI-Feinschliff ========================================================= */ /* Nur der Inhaltsbereich scrollt. Damit verschwindet die zweite Scrollleiste rechts, ohne Sidebar oder Dialoge einzuschränken. */ html, body{ width:100%; height:100%; min-height:100%; overflow:hidden!important; } body{ margin:0; } .app-shell{ width:100%; height:100vh!important; height:100dvh!important; min-height:0!important; max-height:none!important; overflow:hidden!important; } .main{ width:100%; height:100%!important; min-height:0!important; max-height:none!important; display:flex!important; flex-direction:column; overflow:hidden!important; } .topbar{ flex:0 0 auto; } .content, #content{ width:100%; flex:1 1 auto; min-height:0!important; height:auto!important; max-height:none!important; overflow-x:hidden!important; overflow-y:auto!important; overscroll-behavior-y:contain; -webkit-overflow-scrolling:touch; scrollbar-gutter:auto!important; scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--muted) 38%,transparent) transparent; } #content::-webkit-scrollbar{width:9px} #content::-webkit-scrollbar-track{background:transparent} #content::-webkit-scrollbar-thumb{ background:color-mix(in srgb,var(--muted) 30%,transparent); border:3px solid transparent; background-clip:padding-box; border-radius:999px; } #content::-webkit-scrollbar-thumb:hover{ background:color-mix(in srgb,var(--muted) 48%,transparent); border:2px solid transparent; background-clip:padding-box; } /* Kleine optische Verfeinerungen – Stil bleibt unverändert. */ .card{ border-color:color-mix(in srgb,var(--line) 88%,transparent); box-shadow:0 1px 2px rgba(15,23,42,.018),0 8px 24px rgba(15,23,42,.022); } .toolbar{ padding:15px 18px; } .section-title{ letter-spacing:-.012em; } .section-subtitle{ line-height:1.45; } .primary-btn, .secondary-btn, .tiny-btn, .icon-btn{ transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease; } .primary-btn:hover{ box-shadow:0 5px 14px rgba(15,23,42,.10); } .secondary-btn:hover, .tiny-btn:hover, .icon-btn:hover{ background:color-mix(in srgb,var(--panel-2) 86%,var(--text) 3%); border-color:color-mix(in srgb,var(--line) 76%,var(--text) 16%); } .form-grid input:focus, .form-grid select:focus, .filter-set input:focus, .filter-set select:focus{ border-color:color-mix(in srgb,var(--text) 32%,var(--line)); box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 5%,transparent); } .type-ledger .statement-item{ border-top-color:color-mix(in srgb,var(--line) 82%,transparent); } .type-ledger .statement-item:hover{ background:color-mix(in srgb,var(--panel-2) 68%,transparent); } @media(max-width:760px){ /* Die feste Bottom-Navigation braucht keinen zweiten Body-Abstand mehr. Der Platz wird direkt im einzigen Scrollbereich reserviert. */ body{ padding-bottom:0!important; } .app-shell, .main{ height:100dvh!important; } .content, #content{ padding-bottom:calc(94px + env(safe-area-inset-bottom))!important; overscroll-behavior-y:contain; } } @media print{ html,body{ height:auto!important; min-height:0!important; overflow:visible!important; } .app-shell,.main,.content,#content{ height:auto!important; max-height:none!important; overflow:visible!important; } } /* ========================================================= v68.13.9 · Plattform-Dashboards + Storno-Löschworkflow ========================================================= */ .nav-icon-platforms,.nav-icon-platform-bank,.nav-icon-platform-paypal,.nav-icon-platform-ebay,.nav-icon-platform-kleinanzeigen{color:var(--muted)} .platform-hub-intro{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px 22px;margin-bottom:16px} .platform-hub-intro h3{margin:5px 0 5px;font-size:18px;letter-spacing:-.02em}.platform-hub-intro p{margin:0;color:var(--muted);font-size:12px}.platform-hub-intro>span{font-size:11px;color:var(--muted);white-space:nowrap} .platform-hub-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.platform-hub-card{appearance:none;width:100%;text-align:left;padding:18px;border:1px solid var(--line);background:var(--panel);display:grid;grid-template-columns:44px minmax(0,1fr) auto;grid-template-areas:"icon copy balance" "icon flow flow";column-gap:13px;row-gap:9px;align-items:center;cursor:pointer;transition:border-color .16s ease,transform .16s ease,box-shadow .16s ease}.platform-hub-card:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--text) 20%,var(--line));box-shadow:0 10px 28px rgba(15,23,42,.055)} .platform-hub-icon{grid-area:icon;width:44px;height:44px;border-radius:13px;background:var(--panel-2);display:grid;place-items:center;border:1px solid var(--line)}.platform-hub-icon .platform-logo-svg{width:22px!important;height:22px!important;max-width:30px}.platform-hub-copy{grid-area:copy;min-width:0}.platform-hub-copy strong{display:block;font-size:14px}.platform-hub-copy small{display:block;margin-top:4px;color:var(--muted);font-size:10px}.platform-hub-balance{grid-area:balance;text-align:right}.platform-hub-balance small{display:block;color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.08em}.platform-hub-balance b{display:block;margin-top:3px;font-size:15px}.platform-hub-flow{grid-area:flow;display:flex;justify-content:flex-end;gap:13px;border-top:1px solid var(--line);padding-top:9px}.platform-hub-flow em{font-style:normal;font-size:10px;font-weight:750;color:var(--muted)}.platform-hub-flow em:first-child{color:var(--good)} .platform-dashboard-hero{padding:22px;display:flex;align-items:center;gap:16px;margin-bottom:14px;background:linear-gradient(135deg,var(--panel),var(--panel-2))}.platform-dashboard-logo{width:54px;height:54px;flex:0 0 54px;border-radius:16px;border:1px solid var(--line);background:var(--panel);display:grid;place-items:center}.platform-dashboard-logo .platform-logo-svg{width:28px!important;height:28px!important;max-width:38px}.platform-dashboard-hero strong{display:block;font-size:30px;letter-spacing:-.045em;margin:5px 0 3px}.platform-dashboard-hero p{margin:0;color:var(--muted);font-size:11px} .platform-dashboard-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:14px}.platform-dashboard-kpis article{padding:16px}.platform-dashboard-kpis span{display:block;color:var(--muted);font-size:10px}.platform-dashboard-kpis strong{display:block;font-size:18px;margin:7px 0 3px;letter-spacing:-.025em}.platform-dashboard-kpis small{color:var(--muted);font-size:9px} .platform-dashboard-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.platform-dashboard-panel{padding:0;overflow:hidden}.platform-dashboard-panel .panel-head{padding:18px 18px 12px;margin:0}.platform-dashboard-wide{grid-column:1/-1}.platform-activity-list,.platform-document-list{border-top:1px solid var(--line)}.platform-activity-row,.platform-document-list>button{appearance:none;border:0;border-top:1px solid var(--line);background:transparent;color:var(--text);width:100%;text-align:left;padding:12px 16px;display:grid;align-items:center;gap:11px;cursor:pointer}.platform-activity-row:first-child,.platform-document-list>button:first-child{border-top:0}.platform-activity-row:hover,.platform-document-list>button:hover{background:var(--panel-2)}.platform-activity-row{grid-template-columns:30px minmax(0,1fr) auto}.platform-activity-row>span:nth-child(2) strong,.platform-document-list>button>span:nth-child(2) strong{display:block;font-size:12px}.platform-activity-row>span:nth-child(2) small,.platform-document-list>button>span:nth-child(2) small{display:block;margin-top:3px;color:var(--muted);font-size:9px}.platform-activity-row>b{font-size:12px}.platform-activity-direction{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:13px;font-weight:900;background:var(--panel-2)}.platform-activity-direction.in{color:var(--good)}.platform-activity-direction.out{color:var(--bad)} .platform-document-list>button{grid-template-columns:auto minmax(0,1fr) auto}.platform-document-list>button>b{font-size:11px}.platform-document-type{display:inline-flex;align-items:center;justify-content:center;min-width:64px;padding:5px 7px;border-radius:7px;background:var(--panel-2);border:1px solid var(--line);font-size:8px;font-weight:850;letter-spacing:.055em}.platform-document-type.storno{color:var(--bad)}.platform-document-type.receipt{color:var(--muted)}.platform-document-open{font-size:9px;color:var(--muted);font-weight:750}.platform-dashboard-panel>.empty-state{margin:0;border-top:1px solid var(--line);border-radius:0} .cancellation-history-table .danger-btn{white-space:nowrap} @media(max-width:900px){.platform-dashboard-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}.platform-dashboard-grid{grid-template-columns:1fr}.platform-dashboard-wide{grid-column:auto}} @media(max-width:700px){.platform-hub-grid{grid-template-columns:1fr}.platform-hub-intro{align-items:flex-start;flex-direction:column;gap:8px}.platform-dashboard-hero{padding:17px}.platform-dashboard-hero strong{font-size:25px}.platform-dashboard-kpis{grid-template-columns:1fr 1fr}.platform-dashboard-panel .panel-head{padding:15px 14px 10px}.platform-activity-row,.platform-document-list>button{padding:11px 12px}.platform-document-type{min-width:56px}.platform-document-list>button{grid-template-columns:auto minmax(0,1fr)}.platform-document-list>button>b,.platform-document-open{grid-column:2}.platform-activity-row{grid-template-columns:28px minmax(0,1fr) auto}} @media(max-width:430px){.platform-dashboard-kpis{grid-template-columns:1fr}.platform-hub-card{grid-template-columns:40px minmax(0,1fr);grid-template-areas:"icon copy" "balance balance" "flow flow"}.platform-hub-balance{text-align:left;display:flex;gap:8px;align-items:baseline}.platform-hub-balance small,.platform-hub-balance b{display:inline}.platform-hub-icon{width:40px;height:40px}.platform-activity-row{grid-template-columns:28px minmax(0,1fr)}.platform-activity-row>b{grid-column:2;text-align:left;margin-top:2px}.platform-document-list>button{grid-template-columns:1fr}.platform-document-list>button>*{grid-column:1}.platform-document-type{width:max-content}} /* ========================================================= v68.14.4 · Umbuchungen: bezahlte Eingänge gezielt auswählen ========================================================= */ .transfer-amount-readonly{ background:var(--panel-2)!important; cursor:default; font-weight:800; } .transfer-income-picker{ border:1px solid var(--line); border-radius:14px; background:var(--panel); overflow:hidden; } .transfer-income-picker.empty{ padding:14px; } .transfer-income-picker.empty p{ margin:8px 0 0; color:var(--muted); font-size:10px; line-height:1.5; } .transfer-income-picker-head{ min-height:58px; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); background:var(--panel-2); } .transfer-income-picker.empty .transfer-income-picker-head{ min-height:0; padding:0; border-bottom:0; background:transparent; } .transfer-income-picker-head>div{ min-width:0; } .transfer-income-picker-head strong{ display:block; font-size:12px; } .transfer-income-picker-head span{ display:block; margin-top:3px; color:var(--muted); font-size:9.5px; line-height:1.4; } .transfer-select-all{ min-height:34px; padding:7px 10px; white-space:nowrap; } .transfer-income-summary{ padding:9px 14px; display:flex; align-items:center; justify-content:space-between; gap:12px; border-bottom:1px solid var(--line); background:color-mix(in srgb,var(--panel) 94%,var(--good) 6%); } .transfer-income-summary span{ color:var(--muted); font-size:9.5px; font-weight:700; } .transfer-income-summary strong{ font-size:13px; color:var(--good); } .transfer-income-list{ max-height:290px; overflow:auto; overscroll-behavior:contain; } .transfer-income-row{ position:relative; display:grid; grid-template-columns:20px minmax(0,1fr) auto; gap:10px; align-items:center; padding:11px 14px; border-bottom:1px solid var(--line); cursor:pointer; transition:background .15s ease; } .transfer-income-row:last-child{border-bottom:0} .transfer-income-row:hover{background:var(--panel-2)} .transfer-income-row.selected{background:rgba(11,159,98,.055)} .transfer-income-row input{ position:absolute; opacity:0; pointer-events:none; } .transfer-income-check{ width:18px; height:18px; border:1.5px solid var(--line-strong,var(--line)); border-radius:6px; display:grid; place-items:center; background:var(--panel); } .transfer-income-row.selected .transfer-income-check{ background:var(--text); border-color:var(--text); } .transfer-income-row.selected .transfer-income-check:after{ content:'✓'; color:var(--panel); font-size:11px; font-weight:900; } .transfer-income-main{ min-width:0; } .transfer-income-main strong{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; } .transfer-income-main small{ display:block; margin-top:3px; color:var(--muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; } .transfer-income-amount{ white-space:nowrap; font-size:11px; } .transfer-unpaid-note{ padding:9px 14px; border-top:1px solid var(--line); color:var(--muted); font-size:9px; background:var(--panel-2); } @media(max-width:650px){ .transfer-income-picker-head{ align-items:flex-start; } .transfer-income-row{ grid-template-columns:20px minmax(0,1fr); } .transfer-income-amount{ grid-column:2; justify-self:start; margin-top:-3px; } .transfer-income-list{max-height:250px} } /* v68.14.4 · Plattform-Benutzername bei Rechnungen */ .invoice-platform-username-field{ min-width:0; } .invoice-platform-username-field.hidden{display:none!important} .invoice-platform-username-field input{width:100%} .transfer-income-username{ color:var(--muted); font-size:.92em; font-weight:700; white-space:nowrap; } @media(max-width:620px){ .invoice-platform-username-field{grid-column:1/-1} .transfer-income-main strong{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px} } /* ========================================================= v68.14.5 · Modal-Startposition + Rechnungsplattform sauber ausrichten ========================================================= */ /* Das Rechnungs-Plattformfeld liegt bereits in einem Grid-Label mit gap. Der zusätzliche margin-top aus dem allgemeinen Plattform-Dropdown hat die linke Seite gegenüber dem Benutzernamen sichtbar nach unten gedrückt. */ #invoiceForm .invoice-platform-field, #invoiceForm .invoice-platform-username-field{ align-self:start; min-width:0; } #invoiceForm #invoicePlatformSelect{ margin-top:0!important; } #invoiceForm .invoice-platform-field .income-platform-trigger, #invoiceForm .invoice-platform-username-field input{ min-height:44px; height:44px; } #invoiceForm .invoice-platform-username-field .field-hint{ margin-top:1px; } /* Sticky Köpfe starten ohne optischen Versatz. Die eigentliche Scrollposition wird zusätzlich beim Schließen jedes Dialogs in app.js auf 0 zurückgesetzt. */ #modalBackdrop > .modal, #invoiceModalBackdrop > .modal, #receiptModalBackdrop > .modal, #invoiceUploadBackdrop > .modal, #partnerModalBackdrop > .modal, #companyCreateBackdrop > .modal, #inventoryAdjustBackdrop > .modal{ scroll-padding-top:0!important; } @media(max-width:620px){ #invoiceForm .invoice-platform-field, #invoiceForm .invoice-platform-username-field{ grid-column:1/-1; } } /* ========================================================= v68.14.6 · Modal-Kopf ohne oberen Durchscheine-/Scrollspalt ========================================================= */ /* Der scrollbare .modal-Container hatte oben weiterhin sein eigenes Padding. Sobald der sticky Kopf aktiv wurde, konnte Formularinhalt in diesem Padding-Bereich oberhalb des Kopfs sichtbar werden. Der obere Abstand gehört deshalb jetzt dem Kopf selbst, nicht mehr dem Scrollcontainer. */ #modalBackdrop > .modal, #invoiceModalBackdrop > .modal, #receiptModalBackdrop > .modal, #invoiceUploadBackdrop > .modal, #partnerModalBackdrop > .modal, #companyCreateBackdrop > .modal, #inventoryAdjustBackdrop > .modal, #cancellationModalBackdrop > .modal, #aiReviewBackdrop > .modal{ padding-top:0!important; } #modalBackdrop > .modal > .modal-head, #invoiceModalBackdrop > .modal > .modal-head, #receiptModalBackdrop > .modal > .modal-head, #invoiceUploadBackdrop > .modal > .modal-head, #partnerModalBackdrop > .modal > .modal-head, #companyCreateBackdrop > .modal > .modal-head, #inventoryAdjustBackdrop > .modal > .modal-head, #cancellationModalBackdrop > .modal > .modal-head, #aiReviewBackdrop > .modal > .modal-head{ top:0!important; margin:0 0 14px!important; padding:22px 0 12px!important; background:var(--panel)!important; border-bottom:1px solid var(--line)!important; isolation:isolate; } /* Der Kopf deckt den scrollenden Formularinhalt vollständig ab. */ #modalBackdrop > .modal > .modal-head::before, #invoiceModalBackdrop > .modal > .modal-head::before, #receiptModalBackdrop > .modal > .modal-head::before, #invoiceUploadBackdrop > .modal > .modal-head::before, #partnerModalBackdrop > .modal > .modal-head::before, #companyCreateBackdrop > .modal > .modal-head::before, #inventoryAdjustBackdrop > .modal > .modal-head::before, #cancellationModalBackdrop > .modal > .modal-head::before, #aiReviewBackdrop > .modal > .modal-head::before{ content:""; position:absolute; inset:0; z-index:-1; background:var(--panel); pointer-events:none; } @media(max-width:760px){ #modalBackdrop > .modal, #invoiceModalBackdrop > .modal, #receiptModalBackdrop > .modal, #invoiceUploadBackdrop > .modal, #partnerModalBackdrop > .modal, #companyCreateBackdrop > .modal, #inventoryAdjustBackdrop > .modal, #cancellationModalBackdrop > .modal, #aiReviewBackdrop > .modal{ padding-top:0!important; } #modalBackdrop > .modal > .modal-head, #invoiceModalBackdrop > .modal > .modal-head, #receiptModalBackdrop > .modal > .modal-head, #invoiceUploadBackdrop > .modal > .modal-head, #partnerModalBackdrop > .modal > .modal-head, #companyCreateBackdrop > .modal > .modal-head, #inventoryAdjustBackdrop > .modal > .modal-head, #cancellationModalBackdrop > .modal > .modal-head, #aiReviewBackdrop > .modal > .modal-head{ top:0!important; padding-top:calc(18px + env(safe-area-inset-top))!important; } } /* ========================================================= v68.14.7 · Neutraler aktueller Kontostand ========================================================= */ .current-balance-btn{ white-space:nowrap; } .current-balance-modal{ max-width:720px; } .current-balance-system-card{ padding:18px 20px; border:1px solid var(--line); border-radius:16px; background:var(--panel-2); } .current-balance-system-card strong{ display:block; margin-top:6px; font-size:30px; line-height:1.05; letter-spacing:-.035em; } .current-balance-system-card p{ margin:7px 0 0; color:var(--muted); font-size:11px; line-height:1.5; } .balance-adjustment-preview{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--panel-2); } .balance-adjustment-preview strong{ font-size:13px; white-space:nowrap; } .balance-adjustment-preview span{ color:var(--muted); font-size:11px; line-height:1.45; text-align:right; } .balance-adjustment-preview.positive strong{color:var(--good)} .balance-adjustment-preview.negative strong{color:var(--bad)} .balance-adjustment-preview.neutral strong{color:var(--muted)} .balance-adjustment-note{ display:flex; gap:10px; align-items:flex-start; padding:12px 14px; border:1px dashed var(--line); border-radius:12px; color:var(--muted); font-size:11px; line-height:1.5; } .balance-adjustment-note strong{ color:var(--text); white-space:nowrap; } .balance-adjustment-badge{ display:inline-flex; width:max-content; max-width:100%; margin-top:5px; padding:4px 8px; border:1px solid var(--line); border-radius:999px; background:var(--panel-2); color:var(--muted); font-size:9px; font-weight:750; } .optional-label{ color:var(--muted); font-weight:500; } @media(max-width:700px){ .current-balance-modal{max-width:none} .balance-adjustment-preview, .balance-adjustment-note{ display:grid; gap:5px; } .balance-adjustment-preview span{text-align:left} .balance-adjustment-note strong{white-space:normal} .current-balance-system-card strong{font-size:26px} } /* ========================================================= v68.14.8 · Kontostand-Dialog + Startkontostand Unternehmen ========================================================= */ .current-balance-btn{ background:var(--panel)!important; color:var(--text)!important; border-color:var(--line)!important; box-shadow:none!important; } .current-balance-btn:hover{ background:var(--panel-2)!important; border-color:color-mix(in srgb,var(--text) 18%,var(--line))!important; transform:none; } .current-balance-modal{ width:min(650px,100%); } .current-balance-form{ gap:14px; align-items:start; } .current-balance-modal .modal-head{ margin-bottom:2px; } .current-balance-system-card{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:16px 18px; border-radius:14px; } .current-balance-system-copy{ min-width:0; } .current-balance-system-copy p{ margin:5px 0 0; color:var(--muted); font-size:11px; line-height:1.45; } .current-balance-system-card strong{ margin:0; font-size:25px; white-space:nowrap; text-align:right; } .current-balance-form > label{ align-self:stretch; } .current-balance-form > label > input{ width:100%; min-height:44px; } .current-balance-form .balance-adjustment-preview{ min-height:58px; } .current-balance-form .balance-adjustment-note{ background:color-mix(in srgb,var(--panel-2) 70%,transparent); border-style:solid; } .company-opening-balance-card{ display:grid; gap:13px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--panel-2); } .company-opening-balance-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:16px; } .company-opening-balance-head > div{ display:grid; gap:3px; } .company-opening-balance-head strong{ color:var(--text); font-size:12px; } .company-opening-balance-head span:not(.status){ color:var(--muted); font-size:10px; line-height:1.4; } .company-opening-balance-fields{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .company-opening-balance-fields label{ display:grid; gap:6px; font-size:11px; color:var(--muted); font-weight:700; } .company-opening-balance-fields input{ width:100%; min-height:42px; background:var(--panel); color:var(--text); border:1px solid var(--line); border-radius:10px; padding:9px 10px; outline:none; } .company-opening-balance-fields input:focus{ border-color:color-mix(in srgb,var(--text) 26%,var(--line)); box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 5%,transparent); } .company-opening-balance-card > small{ color:var(--muted); font-size:10px; line-height:1.45; } @media(max-width:700px){ .current-balance-system-card{ align-items:flex-start; gap:10px; } .current-balance-system-card strong{ font-size:22px; } .company-opening-balance-fields{ grid-template-columns:1fr; } } @media(max-width:480px){ .current-balance-system-card{ display:grid; } .current-balance-system-card strong{ text-align:left; } } /* ========================================================= v68.14.9 · Einheitliche Formularausrichtung Kontostand ========================================================= */ .current-balance-form > .current-balance-field{ display:grid; grid-template-rows:16px 44px 24px; gap:6px; align-content:start; align-self:start; margin:0!important; min-width:0; } .current-balance-field-label{ display:flex; align-items:center; min-height:16px; color:var(--muted); font-size:10.5px; font-weight:700; line-height:1.2; } .current-balance-form > .current-balance-field > input{ height:44px; min-height:44px; margin:0!important; align-self:start; } .current-balance-form > .current-balance-field > .field-hint{ min-height:18px; margin:0; padding-top:1px; line-height:1.35; } .current-balance-field-spacer{ visibility:hidden; user-select:none; pointer-events:none; } .current-balance-form > .span-2{ margin-top:0; } .current-balance-form .balance-adjustment-preview{ margin-top:0; } @media(max-width:560px){ .current-balance-form > .current-balance-field{ grid-template-rows:16px 44px auto; } .current-balance-field-spacer{ display:none; } } /* ========================================================= v68.14.10 · Plattform-Buchungen löschbar + kompakte Aktionen ========================================================= */ .platform-activity-row{ grid-template-columns:30px minmax(0,1fr) auto auto; } .platform-activity-copy{min-width:0} .platform-activity-delete{ align-self:center; white-space:nowrap; margin-left:2px; } @media(max-width:700px){ .platform-activity-row{ grid-template-columns:28px minmax(0,1fr) auto; } .platform-activity-delete{ grid-column:2 / -1; justify-self:start; margin:3px 0 0; } } @media(max-width:430px){ .platform-activity-row>b{ grid-column:2; text-align:left; margin-top:2px; } .platform-activity-delete{ grid-column:2; } } /* ========================================================= v68.14.11 · Kontobewegungen exakt spaltenbündig ========================================================= */ @media(min-width:901px){ .bank-movements-list .statement-item{ grid-template-columns:42px minmax(170px,1.35fr) minmax(145px,.9fr) 105px 130px 150px!important; } .bank-movements-list .ledger-actions{ width:150px; min-width:150px; justify-content:flex-end; flex-wrap:nowrap; } .bank-movements-list .tx-category, .bank-movements-list .tx-date, .bank-movements-list .tx-amount{ align-self:center; } } @media(max-width:900px){ .bank-movements-list .statement-item{ grid-template-columns:38px minmax(0,1fr) auto!important; } .bank-movements-list .ledger-actions{ width:auto; min-width:0; } } /* ========================================================= v68.14.13 · Kontobewegungen: Betrag + Aktionen nebeneinander ========================================================= */ @media (min-width:901px){ .bank-movements-list .statement-item{ grid-template-columns:42px minmax(170px,1.35fr) minmax(145px,.9fr) 105px minmax(278px,auto)!important; align-items:center; } .bank-movements-list .bank-row-end{ display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:flex-end; gap:12px; min-width:278px; width:100%; align-self:center; } .bank-movements-list .bank-row-end .tx-amount{ flex:0 0 112px; min-width:112px; margin:0; text-align:right; white-space:nowrap; align-self:center; } .bank-movements-list .bank-row-end .ledger-actions{ display:flex; flex:0 0 154px; width:154px; min-width:154px; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:flex-end; gap:7px; margin:0; } .bank-movements-list .bank-row-end .ledger-actions .tiny-btn{ flex:0 0 auto; white-space:nowrap; } } @media (max-width:900px){ .bank-movements-list .bank-row-end{ grid-column:2 / -1; display:flex; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:space-between; gap:10px; min-width:0; width:100%; } .bank-movements-list .bank-row-end .tx-amount{ flex:0 0 auto; margin:0; text-align:left; white-space:nowrap; } .bank-movements-list .bank-row-end .ledger-actions{ display:flex; flex:0 0 auto; width:auto; min-width:0; flex-direction:row; flex-wrap:nowrap; align-items:center; justify-content:flex-end; gap:7px; margin:0; } } /* ========================================================= v68.15.0 · Verkaufsübersicht: Bruttobetrag direkt unter Spaltenkopf ========================================================= */ .sales-ledger-head > span:last-child, .sales-ledger-gross{ text-align:left; justify-self:start; } /* ========================================================= V68.15 · Artikelnummern, Einkaufschargen & Bestandsdetails ========================================================= */ .inventory-article-number{ display:inline-flex; align-items:center; min-height:28px; padding:5px 8px; border:1px solid var(--line); border-radius:8px; background:var(--panel-2); color:var(--text); font:inherit; font-size:9px; font-weight:850; letter-spacing:.025em; white-space:nowrap; cursor:pointer; } .inventory-article-number:hover{background:var(--panel)} .inventory-article-link{ display:grid; gap:3px; min-width:150px; padding:0; border:0; background:transparent; color:var(--text); text-align:left; cursor:pointer; } .inventory-article-link strong{font-size:11px} .inventory-article-link small{color:var(--muted);font-size:8px} .inventory-article-link:hover strong{text-decoration:underline;text-underline-offset:3px} .inventory-detail-modal{width:min(1040px,100%)!important} .inventory-detail-content{display:grid;gap:16px;padding-bottom:4px} .inventory-detail-hero{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--panel-2); } .inventory-detail-hero h3{margin:4px 0 5px;font-size:20px;letter-spacing:-.035em} .inventory-detail-hero p{margin:0;color:var(--muted);font-size:10px;line-height:1.45} .inventory-detail-kpis{ display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:9px; } .inventory-detail-kpis>div, .inventory-lot-finance-grid>div{ min-width:0; padding:12px; border:1px solid var(--line); border-radius:11px; background:var(--panel); } .inventory-detail-kpis span, .inventory-lot-finance-grid span, .inventory-lot-metric span{ display:block; color:var(--muted); font-size:8px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; } .inventory-detail-kpis strong{display:block;margin-top:5px;font-size:15px;letter-spacing:-.025em} .inventory-detail-kpis small{display:block;margin-top:3px;color:var(--muted);font-size:8px;line-height:1.35} .inventory-detail-warning{ display:grid; gap:3px; padding:11px 12px; border:1px solid var(--line); border-radius:11px; background:var(--panel-2); } .inventory-detail-warning strong{font-size:10px} .inventory-detail-warning span{color:var(--muted);font-size:9px} .inventory-detail-section-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; padding-top:2px; } .inventory-detail-section-head h3{margin:4px 0 0;font-size:15px} .inventory-detail-section-head>small{color:var(--muted);font-size:9px} .inventory-lot-list{display:grid;gap:9px} .inventory-lot-card{ border:1px solid var(--line); border-radius:12px; background:var(--panel); overflow:hidden; } .inventory-lot-card>summary{ display:grid; grid-template-columns:minmax(180px,1.5fr) repeat(5,minmax(84px,.55fr)) 22px; gap:10px; align-items:center; padding:12px 14px; cursor:pointer; list-style:none; user-select:none; } .inventory-lot-card>summary::-webkit-details-marker{display:none} .inventory-lot-card[open]>summary{border-bottom:1px solid var(--line);background:var(--panel-2)} .inventory-lot-title{display:grid;gap:2px;min-width:0} .inventory-lot-title>span{color:var(--muted);font-size:8px;font-weight:850;letter-spacing:.04em} .inventory-lot-title strong{font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .inventory-lot-title small{color:var(--muted);font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .inventory-lot-metric{min-width:0} .inventory-lot-metric strong{display:block;margin-top:4px;font-size:10px;white-space:nowrap} .inventory-lot-chevron{font-size:15px;color:var(--muted);text-align:center;transition:transform .16s ease} .inventory-lot-card[open] .inventory-lot-chevron{transform:rotate(180deg)} .inventory-lot-body{display:grid;gap:12px;padding:13px 14px 14px} .inventory-lot-finance-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px} .inventory-lot-finance-grid strong{display:block;margin-top:4px;font-size:11px} .inventory-lot-sales-head{display:flex;justify-content:space-between;gap:12px;align-items:center} .inventory-lot-sales-head strong{font-size:10px} .inventory-lot-sales-head span{color:var(--muted);font-size:8px} .inventory-sale-records{display:grid;border:1px solid var(--line);border-radius:10px;overflow:hidden} .inventory-sale-record{ display:grid; grid-template-columns:minmax(160px,1.4fr) minmax(110px,.7fr) minmax(120px,.7fr) auto; gap:12px; align-items:center; padding:10px 11px; border-top:1px solid var(--line); } .inventory-sale-record:first-child{border-top:0} .inventory-sale-record>div{min-width:0} .inventory-sale-record strong{display:block;font-size:9px} .inventory-sale-record span{display:block;margin-top:2px;color:var(--muted);font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .inventory-sale-record>div:nth-child(2),.inventory-sale-record>div:nth-child(3){text-align:right} .inventory-table{min-width:1370px} @media(max-width:900px){ .inventory-detail-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .inventory-lot-card>summary{grid-template-columns:minmax(150px,1.3fr) repeat(2,minmax(80px,.6fr)) 22px} .inventory-lot-card>summary .inventory-lot-metric:nth-of-type(3), .inventory-lot-card>summary .inventory-lot-metric:nth-of-type(4), .inventory-lot-card>summary .inventory-lot-metric:nth-of-type(5){display:none} .inventory-lot-finance-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media(max-width:620px){ .inventory-detail-hero,.inventory-detail-section-head{display:grid;grid-template-columns:1fr;align-items:start} .inventory-detail-kpis{grid-template-columns:1fr 1fr} .inventory-lot-card>summary{grid-template-columns:minmax(0,1fr) auto 20px;gap:8px} .inventory-lot-card>summary .inventory-lot-metric{display:none} .inventory-lot-card>summary .inventory-lot-metric:nth-of-type(4){display:block} .inventory-lot-finance-grid{grid-template-columns:1fr 1fr} .inventory-sale-record{grid-template-columns:1fr auto;gap:8px} .inventory-sale-record>div:nth-child(2){display:none} .inventory-sale-record>div:nth-child(3){text-align:right} .inventory-sale-record .tiny-btn{grid-column:1/-1;justify-self:start} } /* KT Finance final mobile inventory fixes */ .inventory-detail-modal .modal { max-height: calc(100dvh - 24px); overflow:hidden; } .inventory-detail-content { overflow-y:auto; max-height:calc(100dvh - 180px); -webkit-overflow-scrolling:touch; } @media(max-width:700px){ .inventory-detail-modal { align-items:flex-start; padding:12px; } .inventory-detail-content { max-height:calc(100dvh - 150px); } } /* Rechnung Versand Checkbox */ .invoice-shipping-toggle{ display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--border,#dfe3ea); border-radius:14px; background:var(--card,#fff); cursor:pointer; transition:.2s ease; } .invoice-shipping-toggle:hover{ transform:translateY(-1px); } .invoice-shipping-toggle input{ width:18px; height:18px; margin:0; accent-color:var(--accent,#2563eb); } .invoice-shipping-fields{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; } @media(max-width:700px){ .invoice-shipping-fields{grid-template-columns:1fr} .invoice-shipping-toggle{align-items:flex-start} } /* KT Finance Beta v5 - Bestand klickbare Kartenzeilen */ .inventory-click-row{cursor:pointer;transition:background .18s ease,transform .18s ease;} .inventory-click-row:hover{background:rgba(255,255,255,.035);} .inventory-actions-cell,.inventory-actions-head{display:none!important;} .inventory-click-row button{cursor:pointer;} /* KT Finance · Versandkosten auf Rechnungen (Sichtbarkeit + Vorschau) */ .invoice-shipping-fields.hidden{display:none!important;} .invoice-shipping-preview{ grid-column:1/-1; margin:0; padding:11px 13px; border-radius:12px; background:var(--panel-2,#f4f6f9); border:1px solid var(--line,#dfe3ea); color:var(--muted,#6b7280); font-size:11px; line-height:1.55; font-weight:600; } .invoice-shipping-preview b{color:var(--text,#14171c);} /* KT Finance · Zahlungsart mit Logo auch im geschlossenen Feld */ .payment-method-trigger .visa-logo{width:43px} .payment-method-trigger .mastercard-logo{width:37px} .payment-method-trigger .amex-logo{width:46px} .payment-method-trigger .paypal-logo{width:38px} .payment-method-trigger .wallet-logo{width:40px} .payment-method-trigger-content.is-empty .payment-method-option-text{color:var(--muted);font-weight:600} .invoice-shipping-fields .payment-method-select{margin-top:0} .invoice-shipping-fields .payment-method-menu{z-index:160} .payment-method-menu.drop-up{top:auto;bottom:calc(100% + 6px)} .apple-pay-logo .apple-mark{fill:currentColor;stroke:none} .google-pay-logo .g-blue{fill:#4285f4} /* ====================================================================== Handy-Überarbeitung · v68.15.1 ====================================================================== */ @media(max-width:760px){ /* 1) Die klebende Aktionsspalte der Rechnungstabelle ist auf schmalen Bildschirmen breiter als der sichtbare Bereich und legt sich dadurch über Rechnungsnummer, Kunde und Datum. Auf dem Handy scrollt sie deshalb normal mit. */ .invoice-management-table th:last-child, .invoice-management-table td:last-child{ position:static; box-shadow:none; } /* 2) Zeitraum-Umschalter im Bestand: bequeme Tippfläche wie überall sonst. */ .inventory-sales-filter-buttons{flex-wrap:wrap;gap:7px} .inventory-sales-filter-buttons button{min-height:40px;padding:9px 13px} } @media(max-width:520px){ /* 3) Kopfzeilen-Aktionen zweispaltig: sonst stehen auf der Handy-Startseite bis zu sieben Schaltflächen untereinander, bevor Inhalte kommen. Die Hauptaktion bleibt über die volle Breite. */ .page-head .head-actions{grid-template-columns:repeat(2,minmax(0,1fr))!important} .page-head .head-actions>.period-selects{grid-column:1 / -1!important} .page-head .head-actions>.primary-btn, .page-head .head-actions>.cancellation-primary-btn, .page-head .head-actions>.invoice-return-main-btn{grid-column:1 / -1} .page-head .head-actions>button{ padding:10px 9px; font-size:12px; white-space:normal; line-height:1.25; overflow-wrap:anywhere; } } @media(max-width:760px){ /* 5) Artikelnummer im Bestand als bequem tippbare Fläche. */ .inventory-article-number{min-height:38px;padding:9px 11px;font-size:10px} } @media(max-width:760px){ /* 4) Sichtbarer Hinweis, dass die Rechnungstabelle seitlich weiterscrollt (dort liegen Ansehen / Bearbeiten / PDF / Stornieren). */ .table-card:has(> .invoice-table-scroll){position:relative} .table-card:has(> .invoice-table-scroll)::after{ content:""; position:absolute; top:0; right:0; bottom:0; width:24px; pointer-events:none; background:linear-gradient(to right,transparent,var(--panel)); } .invoice-table-scroll{-webkit-overflow-scrolling:touch} } /* ====================================================================== v68.16 · Stücknummern im Bestand & Bestandsvorschläge in der Rechnung ====================================================================== */ /* Vorschlagsliste unter dem Artikelfeld der Rechnungsposition */ .invoice-item-desc{position:relative} .inv-stock-suggestions{ position:absolute; z-index:60; left:0; right:0; top:calc(100% + 5px); max-height:290px; overflow:auto; padding:6px; border:1px solid var(--line); border-radius:13px; background:var(--panel); box-shadow:0 18px 48px rgba(0,0,0,.18); } .inv-stock-suggestions.hidden{display:none!important} .inv-stock-suggestions-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; padding:5px 8px 8px; color:var(--muted); font-size:9px; font-weight:850; letter-spacing:.1em; text-transform:uppercase; } .inv-stock-suggestions-head small{font-size:9px;font-weight:650;letter-spacing:0;text-transform:none} .inv-stock-suggestion{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; min-height:44px; padding:8px 10px; border:0; border-radius:9px; background:transparent; color:var(--text); text-align:left; cursor:pointer; } .inv-stock-suggestion:hover, .inv-stock-suggestion:focus-visible{background:var(--panel-2);outline:none} .inv-stock-suggestion-main{display:grid;gap:2px;min-width:0} .inv-stock-suggestion-main strong{font-size:12px} .inv-stock-suggestion-main small{font-size:9.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .inv-stock-suggestion-qty{ flex:0 0 auto; padding:5px 9px; border-radius:999px; background:var(--panel-2); border:1px solid var(--line); font-size:10px; font-weight:850; white-space:nowrap; } .inv-stock-suggestion-qty.inventory-low{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 34%,var(--line))} /* Stücknummern in Chargen, Verkäufen und Artikeldetail */ .inventory-unit-tag{ display:inline-block; margin-top:4px; padding:2px 7px; border-radius:999px; background:var(--panel-2); border:1px solid var(--line); color:var(--muted); font-size:9px; font-weight:800; white-space:nowrap; } .inventory-lot-units{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:10px; margin:14px 0 4px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); } .inventory-lot-units>div{display:grid;gap:3px;min-width:0} .inventory-lot-units span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800} .inventory-lot-units strong{font-size:12px;overflow-wrap:anywhere} .inventory-unit-overview{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px; margin-top:14px; padding:14px 16px; border:1px solid var(--line); border-radius:14px; background:var(--panel-2); } .inventory-unit-overview>div{display:grid;gap:3px;min-width:0} .inventory-unit-overview strong{font-size:14px;overflow-wrap:anywhere} .inventory-unit-overview small{font-size:10px;color:var(--muted);line-height:1.5} .inventory-unit-next{text-align:right} .inventory-unit-next span{font-size:9px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:800} @media(max-width:700px){ .inventory-unit-overview{flex-direction:column;align-items:flex-start} .inventory-unit-next{text-align:left} .inv-stock-suggestions{max-height:240px} } /* Versandrechnungen */ .nav-item .nav-icon-shipping{color:currentColor} .invoice-doc-type.shipping{color:var(--muted)} .shipping-doc-payment{display:inline-block;margin-top:3px;color:var(--muted);font-size:9.5px;font-weight:700} .shipping-docs-note{ align-items:flex-start; margin:0 0 16px; background:var(--panel-2); border-color:var(--line); color:var(--muted); line-height:1.6; } .shipping-docs-note strong{color:var(--text)} .shipping-docs-note>span{font-size:14px;line-height:1.2} .shipping-pass-through-note{ display:block; margin-top:6px; color:var(--muted); font-size:10px; font-weight:650; line-height:1.45; } @media(max-width:620px){ /* Kennzahlen auf dem Handy zweispaltig – vier gestapelte Karten sind sonst eine ganze Bildschirmlänge, bevor die eigentliche Liste kommt. */ .cancellation-kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important} .cancellation-kpi{padding:13px 14px} .cancellation-kpi strong{font-size:18px} .cancellation-kpi small{font-size:9px} } /* ====================================================================== Dokumentvorschau in der App (Fallback, wenn das Browserfenster blockiert) ====================================================================== */ .document-preview-modal{ width:min(880px,100%); max-height:min(94dvh,1000px); display:flex; flex-direction:column; } .document-preview-frame-wrap{ flex:1; min-height:0; margin:4px 0 14px; border:1px solid var(--line); border-radius:16px; overflow:hidden; background:var(--panel-2); } #documentPreviewFrame{ display:block; width:100%; height:min(64dvh,640px); border:0; background:#fff; } .document-preview-actions{flex:0 0 auto} @media(max-width:700px){ .document-preview-modal{max-height:100dvh;border-radius:0} #documentPreviewFrame{height:calc(100dvh - 230px)} .document-preview-actions{flex-wrap:wrap} .document-preview-actions button{flex:1 1 auto;min-height:44px} } /* ====================================================================== v68.17 · Weicheres Erscheinungsbild Gleicher Stil, nur ruhiger: etwas rundere Ecken, sehr zurückhaltende Schatten statt harter Kanten, weniger Tiefschwarz, sanftere Trennlinien und weiche Übergänge beim Überfahren. Layout und Struktur bleiben gleich. ====================================================================== */ :root{ --radius:20px; --text:#1b1d21; --line:#e6e6e2; --muted:#6b7079; --soft-1:0 1px 2px rgba(16,17,20,.035); --soft-2:0 10px 30px -18px rgba(16,17,20,.16); --soft-3:0 26px 70px -34px rgba(16,17,20,.26); --soft-hover:0 1px 2px rgba(16,17,20,.05),0 16px 38px -20px rgba(16,17,20,.22); } body.dark{ --text:#f1f2f0; --line:#2b2d33; --muted:#a4a7ae; --soft-1:0 1px 2px rgba(0,0,0,.32); --soft-2:0 12px 34px -20px rgba(0,0,0,.6); --soft-3:0 30px 80px -38px rgba(0,0,0,.75); --soft-hover:0 1px 2px rgba(0,0,0,.38),0 18px 42px -22px rgba(0,0,0,.7); } /* Flächen bekommen wieder ein wenig Tiefe – bewusst sehr dezent. */ .card, .table-card, .panel, .tax-box, .minimal-dashboard, .minimal-status-row, .cancellation-kpi, .report-sheet{ box-shadow:var(--soft-1),var(--soft-2); } .modal{ box-shadow:var(--soft-1),var(--soft-3); } /* Rundere, weichere Kanten. */ .card,.table-card{border-radius:var(--radius)} .minimal-dashboard{border-radius:22px} .minimal-status-row{border-radius:18px} .modal{border-radius:24px} .primary-btn,.secondary-btn,.cancellation-primary-btn{border-radius:12px} .icon-btn{border-radius:12px} .tiny-btn{border-radius:11px} .form-grid input,.form-grid select,.form-grid textarea, .filter-set input,.filter-set select, .custom-range input, .payment-method-trigger{border-radius:12px} .tx-icon{border-radius:14px} .notice{border-radius:16px} .detail-drawer,.api-status,.tax-box{border-radius:16px} /* Weiche Übergänge statt harter Sprünge. */ .card, .tiny-btn,.primary-btn,.secondary-btn,.icon-btn,.cancellation-primary-btn, .nav-item,.minimal-stat,.period-pills button, .inv-stock-suggestion,.payment-method-option,.payment-method-trigger, .invoice-article-link,.inventory-article-number{ transition:background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .22s ease,transform .18s ease; } .primary-btn:hover,.secondary-btn:hover,.cancellation-primary-btn:hover{ box-shadow:var(--soft-hover); transform:translateY(-1px); } .primary-btn:active,.secondary-btn:active,.tiny-btn:active,.cancellation-primary-btn:active{ transform:translateY(0); } .minimal-stat:hover{box-shadow:var(--soft-hover)} /* Trennlinien und Tabellen ruhiger. */ td, th, .mini-row, .balance-line, .allocation-row, .statement-item{ border-color:color-mix(in srgb,var(--line) 74%,transparent); } th{ background:color-mix(in srgb,var(--panel-2) 55%,var(--panel)); } tbody tr{transition:background-color .16s ease} tbody tr:hover{background:color-mix(in srgb,var(--panel-2) 72%,var(--panel))} /* Fokus sichtbar, aber nicht hart. */ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline:2px solid color-mix(in srgb,var(--text) 24%,transparent); outline-offset:2px; } .form-grid input:focus, .form-grid select:focus, .filter-set input:focus, .filter-set select:focus{ border-color:color-mix(in srgb,var(--text) 26%,var(--line)); box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 7%,transparent); } /* Kennzahlenkacheln bekommen etwas Plastizität. */ .cancellation-kpi, .minimal-stat, .tax-box, .inventory-detail-kpis>div, .inventory-sales-kpis>div{ background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel-2) 42%,var(--panel))); } /* Statuspillen und Badges weicher. */ .status{padding:6px 10px;letter-spacing:.02em} .status.paid{background:color-mix(in srgb,var(--good) 13%,transparent)} .status.open{background:color-mix(in srgb,var(--warn) 15%,transparent)} .status.overdue{background:color-mix(in srgb,var(--bad) 13%,transparent)} .booking-number-badge,.reference-badge,.inventory-unit-tag{border-radius:999px} /* Modal-Hintergrund weicher. */ .modal-backdrop{ background:color-mix(in srgb,#0b0d12 42%,transparent); backdrop-filter:blur(6px); } /* Leere Zustände etwas freundlicher. */ .empty-state, .table-empty{ border-radius:16px; } .empty-state.compact{ background:color-mix(in srgb,var(--panel-2) 55%,var(--panel)); border:1px dashed color-mix(in srgb,var(--line) 85%,transparent); } /* Schlanke, weiche Scrollleisten. */ .table-scroll,.nav,.modal,.inv-stock-suggestions,.payment-method-menu{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--muted) 40%,transparent) transparent; } .table-scroll::-webkit-scrollbar, .nav::-webkit-scrollbar, .modal::-webkit-scrollbar, .inv-stock-suggestions::-webkit-scrollbar, .payment-method-menu::-webkit-scrollbar{height:9px;width:9px} .table-scroll::-webkit-scrollbar-thumb, .nav::-webkit-scrollbar-thumb, .modal::-webkit-scrollbar-thumb, .inv-stock-suggestions::-webkit-scrollbar-thumb, .payment-method-menu::-webkit-scrollbar-thumb{ background:color-mix(in srgb,var(--muted) 34%,transparent); border-radius:999px; } .table-scroll::-webkit-scrollbar-track, .nav::-webkit-scrollbar-track, .modal::-webkit-scrollbar-track{background:transparent} /* Bewegung nur, wenn der Nutzer sie möchte. */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important} .primary-btn:hover,.secondary-btn:hover,.cancellation-primary-btn:hover{transform:none} } /* Klebende Aktionsspalte folgt dem weichen Zeilen-Hover. */ .invoice-management-table tbody tr:hover td:last-child{ background:color-mix(in srgb,var(--panel-2) 72%,var(--panel)); } /* Bei geöffnetem Fenster keine überlagernde Leiste am unteren Rand. */ body.kt-modal-open .mobile-bottom-nav{display:none!important} /* Kurz hervorgehobene Zeile nach dem Sprung aus einer Buchung. */ .row-flash>td{ background:color-mix(in srgb,var(--good) 12%,var(--panel))!important; transition:background .5s ease; } .row-flash>td:first-child{box-shadow:inset 3px 0 0 var(--good)} /* ====================================================================== Korrekturen v68.17.1 ====================================================================== */ /* 1) Tabellenkopf: Die Spalte "Aktionen" war ausgeblendet, dadurch endete der graue Kopfstreifen mitten in der Tabelle und rechts blitzte die weiße Kartenfläche durch. Die Kopfzelle bleibt jetzt erhalten. Ausnahme: In der Bestandsliste sind auch die Aktionszellen selbst ausgeblendet – dort muss die Kopfzelle ebenfalls verschwinden, sonst hätte die Kopfzeile eine Spalte mehr als die Datenzeilen. */ .inventory-actions-head{ display:table-cell!important; color:transparent!important; user-select:none; } .inventory-table .inventory-actions-head, table:has(td.inventory-actions-cell) .inventory-actions-head{ display:none!important; } /* 2) Kopfbereich einer Tabellenkarte braucht denselben Innenabstand wie die Tabelle darunter. */ .table-card>.panel-head{ padding:18px 20px 0; margin-bottom:14px; } .shipping-archive-head{padding:18px 20px 0} /* 3) Zahlungsart wurde als "Banküberweis…" abgeschnitten, weil Beschriftung und Wert nebeneinander standen. Die Beschriftung steht jetzt darüber, damit der Wert die volle Spaltenbreite bekommt. */ @media(max-width:1560px){ .tx-payment-inline{ flex-direction:column; align-items:flex-start; gap:3px; } } .tx-payment-value{min-width:0;max-width:100%} .tx-payment-value>span{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* 4) Buchungszeile: Die Schaltflächen rechts dürfen nie zusammengedrückt werden. Vorher blieben bei mittleren Fensterbreiten 11 Pixel übrig und "Bearbeiten"/"Löschen" lagen übereinander auf dem Betrag. Gilt nur für die mehrspaltige Darstellung – am Handy bleibt die gestapelte Zeile unverändert. */ @media(min-width:901px){ .type-ledger .statement-item, .banking-list:not(.type-ledger) .statement-item{ grid-template-columns:36px minmax(0,1.2fr) minmax(0,.95fr) minmax(0,1fr) minmax(78px,auto) minmax(92px,auto) minmax(158px,auto)!important; } .type-ledger .ledger-actions, .banking-list .row-actions{ flex:0 0 auto; flex-wrap:nowrap; } .type-ledger .ledger-actions .tiny-btn, .banking-list .row-actions .tiny-btn{ white-space:nowrap; flex:0 0 auto; } } @media(min-width:901px) and (max-width:1180px){ .type-ledger .statement-item, .banking-list:not(.type-ledger) .statement-item{ grid-template-columns:34px minmax(0,1.15fr) minmax(0,.9fr) minmax(0,1fr) minmax(72px,auto) minmax(84px,auto) minmax(150px,auto)!important; gap:12px; } } /* 5) Verfügbarkeitshinweis in der Bestandsliste darf umbrechen. */ .inventory-article-link small{ white-space:normal; line-height:1.35; overflow-wrap:anywhere; } @media(max-width:760px){ .inventory-article-link{min-height:44px;padding:6px 0} } /* Sprungschaltflächen in den Buchungsdetails. */ .bd-jump-btn{ margin-top:9px; align-self:start; justify-self:start; width:max-content; } .bd-metric .bd-jump-btn{display:inline-flex;align-items:center;min-height:32px} /* Kopfzeile der Detailfenster bleibt beim Scrollen stehen. */ .transaction-detail-modal, .inventory-detail-modal .modal, .document-preview-modal{position:relative} /* Der Innenabstand oben kommt aus der Kopfzeile selbst – sonst bleibt beim Scrollen ein durchsichtiger Streifen über der festen Kopfzeile stehen. */ .transaction-detail-modal, .inventory-detail-modal .modal, .document-preview-modal{padding-top:0} .transaction-detail-modal>.modal-head, .inventory-detail-modal .modal>.modal-head, .document-preview-modal>.modal-head{ position:sticky; top:0; z-index:6; margin:0 -22px 0; padding:22px 22px 14px; background:var(--panel); border-radius:24px 24px 0 0; box-shadow:0 10px 18px -16px rgba(16,17,20,.5); } body.dark .transaction-detail-modal>.modal-head, body.dark .inventory-detail-modal .modal>.modal-head, body.dark .document-preview-modal>.modal-head{ box-shadow:0 10px 20px -16px rgba(0,0,0,.85); } /* 5b) Der Versand-Hinweis darf seine Spalte nicht verlassen. Mit width:max-content loest max-width:100% gegen die max-content-Spur auf, dadurch schob sich der Hinweis ueber die Nachbarspalte. */ .shipping-linked-tag{ width:auto; max-width:100%; white-space:normal; overflow-wrap:anywhere; } /* 6) Buchungs- und Rechnungsnummern in den Listen brauchen genug Platz, sonst wird "BU-2026-000020" abgeschnitten. */ @media(min-width:1181px){ .type-ledger .statement-item, .banking-list:not(.type-ledger):not(.bank-movements-list) .statement-item{ grid-template-columns:36px minmax(0,1.2fr) minmax(150px,.95fr) minmax(0,1fr) minmax(78px,auto) minmax(92px,auto) minmax(158px,auto)!important; } /* Bezeichnung ueber den Wert stellen: nebeneinander bleibt fuer lange Nummern wie "BU-2026-000020" zu wenig Platz, der Text lief dann in die Nachbarspalte hinein. Gestapelt steht die volle Spaltenbreite bereit. */ .tx-record-line{grid-template-columns:minmax(0,1fr)!important;gap:2px!important} .tx-record-line>span{line-height:1.25} .tx-record-line>*:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} } /* 6b) Die Zeilen der Kontobewegungen haben nur fuenf Spalten. Fuer sie gilt weiterhin die eigene Fuenf-Spalten-Vorlage (v68.14.13); die Vorlage oben liess sonst zwei Spuren leer mitlaufen - rund 250 Pixel blieben ungenutzt, waehrend Beschreibung und Zahlungsart auf wenige Zeichen zusammengedrueckt wurden. */ /* 7) Gesellschafterkarte: 240 + 480 Pixel Mindestbreite passten zwischen 1100 und 1300 Pixeln nicht mehr, dadurch wurde "Bearbeiten" gekappt. */ .partner-card{ grid-template-columns:minmax(0,.9fr) minmax(0,1.6fr) minmax(112px,auto); } .partner-edit{flex:0 0 auto} @media(max-width:1240px){ .partner-card{grid-template-columns:minmax(0,1fr) minmax(112px,auto)} .partner-metrics{grid-column:1/-1;border-top:1px solid var(--line);padding-top:16px} .partner-metrics>div:first-child{border-left:0;padding-left:0} } /* 8) Aktionsspalte der Rechnungstabelle: Die Schaltflächen dürfen am rechten Rand nicht angeschnitten werden. Sie brechen jetzt notfalls um. */ @media(min-width:761px){ .invoice-management-table td:last-child .invoice-action-group{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:6px; max-width:420px; } } /* ========================================================= v68.18 · Kontobewegungen: Zeile hat nur fuenf Spalten --------------------------------------------------------- Aeltere Layer definieren fuer .statement-item eine Vorlage mit sieben Spuren. In den Kontobewegungen besitzt eine Zeile aber nur fuenf Kinder (Symbol, Text, Kategorie, Datum, Betrag + Schaltflaechen). Die beiden letzten Spuren liefen dadurch leer mit und belegten rund 250 Pixel, waehrend Beschreibung und Zahlungsart auf wenige Zeichen zusammengedrueckt wurden ("Ban kueb erw eisu ng"). Bewusst ohne :has() formuliert: aeltere Browser kennen den Selektor nicht und wuerden die komplette Regel verwerfen. ========================================================= */ @media(min-width:1181px){ .banking-list.bank-movements-list .statement-item{ grid-template-columns:42px minmax(0,1.5fr) minmax(150px,1fr) minmax(96px,auto) minmax(278px,auto)!important; align-items:center; } } @media(min-width:1120px) and (max-width:1180px){ .banking-list.bank-movements-list .statement-item{ grid-template-columns:38px minmax(0,1.35fr) minmax(138px,1fr) minmax(88px,auto) minmax(266px,auto)!important; align-items:center; } } /* Zwischen 901 und 1023 Pixeln reicht die Breite fuer fuenf Spalten nicht: der Textblock fiel auf wenige Pixel zusammen und brach Buchstabe fuer Buchstabe um. Dort gilt dieselbe kompakte Aufteilung wie am Handy. */ @media(min-width:901px) and (max-width:1119px){ .banking-list.bank-movements-list .statement-item{ grid-template-columns:38px minmax(0,1fr) auto!important; align-items:center; } } /* ========================================================= v68.18 · Hinweis-Plaketten bleiben in ihrer Spalte --------------------------------------------------------- .tx-main ist ein Raster. Darin loest max-width:100% gegen die Spur auf, die sich nach dem breitesten Inhalt richtet. Plaketten wie "Versand-Ausgabe" oder "Automatisch aus Verkauf · Rechnung ..." wuchsen dadurch ueber die Spalte hinaus und legten sich ueber die Nachbarspalte. ========================================================= */ .tx-main{grid-template-columns:minmax(0,1fr)} .tx-main>*{min-width:0;max-width:100%} /* Kurze Grossbuchstaben-Beschriftungen nicht mitten im Wort trennen: aus "ZAHLUNGSWEG" wurde sonst "ZAHLUNG SWEG". */ .tx-payment-label, .tx-record-line>span, .bd-metric>span{ overflow-wrap:normal!important; word-break:normal!important; hyphens:none; } .tx-payment-label{white-space:nowrap!important} /* Zwischen 901 und 1180 Pixeln steht genug Breite zur Verfuegung, um Kategorie und Datum nebeneinander zu setzen. Das spart der gestapelten Darstellung eine Zeile, ohne dass etwas abgeschnitten wird. */ @media(min-width:901px) and (max-width:1180px){ .type-ledger .tx-category{ grid-column:2; grid-row:3; } .type-ledger .tx-date{ grid-column:3; grid-row:3; justify-content:flex-end; white-space:nowrap; } .type-ledger .ledger-actions{ grid-row:4; } } /* ========================================================= v68.19 · Versandblock der Rechnungsmaske – weicher und ruhiger --------------------------------------------------------- Aus der harten Kontrollkaestchen-Zeile wird eine ruhige Karte mit Symbol, erklaerendem Untertitel und weichem Schalter. Der Eingabebereich darunter liegt in einem leicht getoenten Feld, damit er als zusammengehoerig lesbar ist, ohne den vorhandenen Stil zu verlassen. ========================================================= */ .invoice-shipping-toggle{ display:grid !important; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:14px !important; padding:15px 17px !important; border:1px solid var(--line) !important; border-radius:16px !important; background:linear-gradient(180deg,var(--panel) 0%,var(--panel-2) 100%) !important; box-shadow:var(--soft-1,0 1px 2px rgba(16,17,20,.035)); transition:border-color .22s ease,box-shadow .22s ease,background .22s ease; } .invoice-shipping-toggle:hover{ transform:none !important; border-color:color-mix(in srgb,var(--text) 18%,var(--line)) !important; box-shadow:var(--soft-2,0 10px 30px -18px rgba(16,17,20,.16)); } .invoice-shipping-toggle:focus-within{ border-color:color-mix(in srgb,var(--text) 26%,var(--line)) !important; } .shipping-toggle-icon{ width:38px; height:38px; border-radius:12px; display:grid; place-items:center; background:var(--panel-2); border:1px solid var(--line); color:var(--muted); transition:background .22s ease,color .22s ease,border-color .22s ease; } .shipping-toggle-icon svg{width:20px;height:20px} .shipping-toggle-text{ display:grid; gap:3px; min-width:0; } .shipping-toggle-text strong{ font-size:12.5px; font-weight:750; color:var(--text); letter-spacing:-.005em; } .shipping-toggle-text small{ font-size:10.5px; font-weight:600; line-height:1.5; color:var(--muted); } /* Der eigentliche Haken bleibt bedienbar, wird aber unsichtbar hinter den Schalter gelegt, damit Tastatur und Vorlesesoftware weiter funktionieren. */ .invoice-shipping-toggle input[type="checkbox"]{ position:absolute; opacity:0; width:1px; height:1px; margin:0; pointer-events:none; } .shipping-switch{ position:relative; width:46px; height:27px; flex:0 0 auto; border-radius:99px; background:var(--panel-2); border:1px solid var(--line); transition:background .22s ease,border-color .22s ease; } .shipping-switch:after{ content:""; position:absolute; top:50%; left:3px; width:19px; height:19px; border-radius:50%; transform:translateY(-50%); background:var(--panel); border:1px solid var(--line); box-shadow:0 1px 3px rgba(16,17,20,.16); transition:left .22s cubic-bezier(.32,.72,.28,1),background .22s ease; } .invoice-shipping-toggle input[type="checkbox"]:checked~.shipping-switch{ background:var(--text); border-color:var(--text); } .invoice-shipping-toggle input[type="checkbox"]:checked~.shipping-switch:after{ left:22px; border-color:transparent; } .invoice-shipping-toggle input[type="checkbox"]:focus-visible~.shipping-switch{ outline:2px solid color-mix(in srgb,var(--text) 32%,transparent); outline-offset:2px; } .invoice-shipping-toggle:has(input[type="checkbox"]:checked){ border-color:color-mix(in srgb,var(--text) 20%,var(--line)) !important; background:linear-gradient(180deg,var(--panel) 0%,color-mix(in srgb,var(--panel-2) 82%,var(--panel)) 100%) !important; } .invoice-shipping-toggle:has(input[type="checkbox"]:checked) .shipping-toggle-icon{ background:color-mix(in srgb,var(--text) 8%,var(--panel)); border-color:color-mix(in srgb,var(--text) 16%,var(--line)); color:var(--text); } /* Eingabebereich als ruhiges, zusammenhaengendes Feld */ .invoice-shipping-fields:not(.hidden){ display:grid !important; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px !important; margin-top:-4px; padding:16px 17px 17px !important; border:1px solid var(--line); border-top:0; border-radius:0 0 16px 16px; background:color-mix(in srgb,var(--panel-2) 62%,var(--panel)); } .invoice-shipping-fields label{ font-size:10.5px; letter-spacing:.02em; } .invoice-shipping-fields input[type="text"]{ border-radius:12px; padding:11px 12px; } .invoice-shipping-preview{ border-radius:13px !important; border-color:color-mix(in srgb,var(--line) 78%,transparent) !important; background:var(--panel) !important; padding:12px 14px !important; line-height:1.6 !important; } @media(max-width:700px){ .invoice-shipping-toggle{ grid-template-columns:auto minmax(0,1fr); row-gap:12px !important; } .shipping-switch{grid-column:2;justify-self:end} .invoice-shipping-fields:not(.hidden){grid-template-columns:1fr} } /* ========================================================= v68.19.1 · Aktionsspalte der Tabellen laeuft durch --------------------------------------------------------- Die letzte Spalte war "klebend" (position:sticky) und brauchte dafuer einen eigenen, deckenden Hintergrund plus Schlagschatten. Dadurch sass sie als sichtbar abgesetzter Block neben der Kopfzeile und - bei eingefaerbten Zeilen - auch neben den Datenzeilen. Die Aktionsspalte laeuft jetzt wie jede andere Spalte mit: gleiche Farbe, kein Schatten, keine Kante. Auf schmalen Bildschirmen war sie ohnehin schon nicht mehr klebend. ========================================================= */ .invoice-management-table th:last-child, .invoice-management-table td:last-child{ position:static !important; box-shadow:none !important; } /* Kopfzelle: exakt der Ton der uebrigen Kopfzellen. */ .invoice-management-table th:last-child{ background:color-mix(in srgb,var(--panel-2) 55%,var(--panel)) !important; } /* Datenzelle: durchsichtig wie jede andere Zelle, damit Zeilenfarbe und Mauszeiger-Hervorhebung durchlaufen. */ .invoice-management-table td:last-child, .invoice-management-table tbody tr:hover td:last-child{ background:transparent !important; } /* ========================================================= v68.19.1 · Verkaufsübersicht: Plattformspalte breit genug --------------------------------------------------------- Die Spalte war auf 110 Pixel festgelegt. "Banküberweisung" braucht mit Symbol rund 120 Pixel und wurde deshalb zu "Banküberweisun" gekappt. Die Spalte richtet sich jetzt nach dem Inhalt und die Plakette darf im Notfall umbrechen, statt abgeschnitten zu werden. ========================================================= */ .sales-ledger-head, .sales-ledger-row{ grid-template-columns:100px minmax(180px,1.45fr) minmax(134px,auto) 135px minmax(150px,1fr) 120px; } .sales-ledger-head>*, .sales-ledger-row>*{min-width:0} .sales-ledger-row .platform-badge{ width:auto; max-width:100%; white-space:normal; line-height:1.25; text-align:left; } @media(max-width:1050px){ .sales-ledger-head, .sales-ledger-row{min-width:940px} } /* Versandübersicht: Herkunft und Warnkachel */ .shipping-origin-tag{ display:block; margin-top:4px; color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.02em; } .cancellation-kpi.shipping-kpi-warn{ border-color:color-mix(in srgb,var(--bad) 32%,var(--line)); } /* ========================================================= v68.19.2 · Mehr Luft über der Kopfzeile der Detailfenster --------------------------------------------------------- "BUCHUNGSDETAILS" saß dicht unter der abgerundeten Oberkante und wirkte dadurch angeschnitten. Die feste Kopfzeile bekommt oben rund einen Zentimeter mehr Innenabstand. ========================================================= */ #transactionDetailBackdrop > .modal > .modal-head, #inventoryDetailBackdrop > .modal > .modal-head, #transactionDetailBackdrop .modal-head, #inventoryDetailBackdrop .modal-head, .transaction-detail-modal>.modal-head, .inventory-detail-modal .modal>.modal-head, .document-preview-modal>.modal-head{ padding-top:38px !important; } .transaction-detail-modal>.modal-head .eyebrow, .inventory-detail-modal .modal>.modal-head .eyebrow, .document-preview-modal>.modal-head .eyebrow{ display:block; margin-bottom:2px; } /* Die Schließen-Schaltfläche bleibt auf Höhe der Überschrift. */ .transaction-detail-modal>.modal-head .icon-btn, .transaction-detail-modal>.modal-head .modal-close, .inventory-detail-modal .modal>.modal-head .icon-btn, .inventory-detail-modal .modal>.modal-head .modal-close, .document-preview-modal>.modal-head .icon-btn, .document-preview-modal>.modal-head .modal-close{ align-self:flex-start; } @media(max-width:760px){ #transactionDetailBackdrop > .modal > .modal-head, #inventoryDetailBackdrop > .modal > .modal-head, #transactionDetailBackdrop .modal-head, #inventoryDetailBackdrop .modal-head, .transaction-detail-modal>.modal-head, .inventory-detail-modal .modal>.modal-head, .document-preview-modal>.modal-head{ padding-top:30px !important; } } /* Aktionsleiste unter den Buchungsdetails */ .bd-actionbar{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-top:18px; padding-top:16px; border-top:1px solid var(--line); } .bd-actionbar:empty{display:none} .bd-actionbar-hint{ color:var(--muted); font-size:10.5px; line-height:1.5; max-width:520px; } .bd-actionbar-buttons{display:flex;gap:8px;flex-wrap:wrap} .bd-actionbar .danger-btn{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 34%,var(--line))} @media(max-width:620px){ .bd-actionbar{flex-direction:column;align-items:stretch} .bd-actionbar-buttons>button{flex:1} } /* ========================================================= v68.20 · Kundenregister ========================================================= */ .customer-address-tag{ display:block; margin-top:3px; color:var(--muted); font-size:9.5px; font-weight:650; white-space:normal; overflow-wrap:anywhere; } .customer-row{cursor:pointer} .customer-detail-modal{width:min(880px,100%)} .customer-address-block{ margin-top:8px; font-size:13px; line-height:1.7; font-weight:650; } .customer-address-block .muted-note{color:var(--muted);font-weight:600;font-size:12px} .customer-lists{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; margin-top:18px; } .customer-list-block{ min-width:0; padding:16px; border:1px solid var(--line); border-radius:16px; background:var(--panel-2); } .customer-order-list{display:grid;gap:8px;margin-top:11px;max-height:320px;overflow:auto} .customer-order-row{ display:flex; align-items:center; justify-content:space-between; gap:12px; width:100%; padding:10px 12px; border:1px solid var(--line); border-radius:12px; background:var(--panel); text-align:left; cursor:pointer; transition:border-color .18s ease,background .18s ease; } .customer-order-row:hover{ border-color:color-mix(in srgb,var(--text) 22%,var(--line)); background:color-mix(in srgb,var(--panel-2) 55%,var(--panel)); } .customer-order-row strong{display:block;font-size:11.5px} .customer-order-row span{display:block;margin-top:3px;color:var(--muted);font-size:9.5px} .customer-order-meta{display:flex;align-items:center;gap:9px;flex:0 0 auto;white-space:nowrap} .customer-order-meta b{font-size:12px} @media(max-width:820px){ .customer-lists{grid-template-columns:1fr} } /* Das Info-Zeichen der Hinweisboxen darf nicht schrumpfen. */ .notice>span:first-child{ flex:0 0 auto; line-height:1.5; } /* ========================================================= v68.20.1 · Zahlart-Plakette kompakter + Symbole je Buchungsart --------------------------------------------------------- Die Zahlart stand als kastenförmiger Block mit Symbol über dem Text und wirkte dadurch zu groß. Symbol und Text stehen jetzt in einer Zeile in einer ruhigen Pille; zu lange Bezeichnungen bekommen Auslassungspunkte. ========================================================= */ .tx-main .payment-method-badge, .tx-main .payment-method-badge.compact{ /* Die Grundregel ".tx-main span{display:block}" macht aus der Plakette einen Block - dadurch rutschte der Text unter das Symbol. */ display:inline-flex !important; align-items:center !important; flex-wrap:nowrap !important; min-height:22px !important; padding:3px 9px 3px 7px !important; gap:6px !important; border-radius:999px !important; border-color:color-mix(in srgb,var(--line) 82%,transparent) !important; background:color-mix(in srgb,var(--panel-2) 62%,var(--panel)) !important; font-size:9px !important; font-weight:700 !important; line-height:1.2 !important; white-space:nowrap; overflow:hidden; } .tx-main .payment-method-badge.compact .payment-logo-svg{ height:12px !important; flex:0 0 auto; } /* Der Text darf kürzen statt unter das Symbol zu rutschen. */ .tx-main .payment-method-badge>span:not(.payment-logo-svg), .tx-main .payment-method-badge>*:not(svg){ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; overflow-wrap:normal; word-break:normal; } /* Buchungsart mit Symbol */ .tx-type-svg{ width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; display:block; } .type-method-select{position:relative} .type-method-native{ position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; } .type-method-trigger .payment-method-trigger-content{ display:inline-flex; align-items:center; gap:9px; min-width:0; } .type-option-logo{ display:grid; place-items:center; width:26px; height:26px; flex:0 0 auto; border-radius:9px; border:1px solid var(--line); background:var(--panel-2); color:var(--text); } .type-method-trigger .type-option-logo{width:24px;height:24px} .type-method-option{display:flex;align-items:center;gap:10px} .type-method-option .payment-method-option-text{display:grid;gap:2px;min-width:0} .type-method-option .payment-method-option-text b{font-size:12px;font-weight:750} .type-method-option .payment-method-option-text small{font-size:9.5px;color:var(--muted)} .type-method-option.is-selected .type-option-logo{ background:color-mix(in srgb,var(--text) 9%,var(--panel)); border-color:color-mix(in srgb,var(--text) 20%,var(--line)); } /* Farbliche Unterscheidung wie in den Listen */ .tx-type-income{color:var(--good)} .tx-type-expense{color:var(--bad)} .tx-type-deposit,.tx-type-withdrawal,.tx-type-transfer,.tx-type-balance_adjustment{color:var(--muted)} /* ========================================================= v68.21 · Grundlagen: fehlende Farbvariablen, Rückfallwerte, Kontraste --------------------------------------------------------- Vier Variablen wurden an 39 Stellen benutzt, aber nie definiert. Jede dieser Deklarationen war damit ungültig – Hintergründe fielen auf durchsichtig, Rahmen verschwanden. Hier werden sie auf die vorhandenen Grundfarben abgebildet. ========================================================= */ :root{ --surface:var(--panel); --surface-2:var(--panel-2); --border:var(--line); --card:var(--panel); } body.dark{ --surface:var(--panel); --surface-2:var(--panel-2); --border:var(--line); --card:var(--panel); } /* Semantische Farben im hellen Design: die bisherigen Werte lagen mit 3,0–3,7 : 1 unter der Lesbarkeitsgrenze von 4,5 : 1 – ausgerechnet bei Beträgen und Statusplaketten. Im dunklen Design bleiben sie unverändert. */ :root{ --good:#07734f; --bad:#b52f2f; --warn:#8a5c00; } body.dark{ --good:#0f9f6e; --bad:#dc5a5a; --warn:#c98600; } /* Tastaturfokus: color-mix() ist die einzige Farbangabe gewesen. Kennt der Browser sie nicht, war die gesamte Deklaration ungültig und der Fokus unsichtbar – bei gleichzeitig abgeschaltetem Browserstandard. */ button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--text); outline:2px solid color-mix(in srgb,var(--text) 34%,transparent); outline-offset:2px; } /* Deckende Ersatzfarbe für Leisten, die sonst durchsichtig würden und Inhalte durchscheinen ließen. */ .topbar{background:var(--bg)} .topbar{background:color-mix(in srgb,var(--bg) 88%,transparent)} .mobile-bottom-nav{background:var(--panel)} .mobile-bottom-nav{background:color-mix(in srgb,var(--panel) 93%,transparent)} .ring-progress{stroke:var(--muted)} /* ========================================================= v68.21 · Handy: Suche, Design-Umschalter, Datum wieder erreichbar ========================================================= */ /* 1) Die globale Suche war unter 820 px ersatzlos ausgeblendet – in einer Buchhaltung der meistgenutzte Einstieg. Sie bekommt jetzt eine eigene Zeile unter der Kopfleiste. */ @media(max-width:820px){ .topbar{ height:auto !important; min-height:0 !important; flex-wrap:wrap !important; row-gap:8px !important; padding:10px 14px 12px !important; } .search-wrap{ display:flex !important; order:5 !important; flex:1 0 100% !important; width:100% !important; max-width:none !important; } .search-wrap input{font-size:16px !important} } /* 2) Der Umschalter hell/dunkel war das zweite Kind der Kopfleiste und wurde unter 560 px ausgeblendet – wer einmal auf Dunkel gestellt hat, kam am Telefon nicht mehr zurück. Stattdessen entfällt die Server-Plakette. */ @media(max-width:560px){ .top-actions .icon-btn:nth-child(2){display:inline-flex !important} .top-actions #ktServerBadge{display:none !important} } /* 3) Datum und Kategorie waren unter 900 px komplett ausgeblendet. Damit war eine Buchung zeitlich nicht mehr einzuordnen und der Hinweis auf einen abgeschlossenen Monat unsichtbar. Beides läuft jetzt als zweite Zeile unter der Beschreibung mit. */ @media(max-width:900px){ .banking-list:not(.type-ledger) .tx-date, .type-ledger .tx-date{ display:flex !important; grid-column:2 / -1; align-items:center; gap:8px; margin-top:2px; font-size:10.5px; color:var(--muted); } .banking-list:not(.type-ledger) .tx-date .tx-time, .type-ledger .tx-date .tx-time{margin:0} .banking-list:not(.type-ledger) .tx-category, .type-ledger .tx-category{ display:block !important; grid-column:2 / -1; margin-top:2px; } .tx-category>strong{font-size:11px} } /* 4) Tippflächen in der Kopfleiste: die eigene 44-px-Regel wurde unter 390 px wieder auf 36 px zurückgesetzt. */ @media(max-width:390px){ .top-actions .icon-btn, .top-actions .primary-btn{ width:42px !important; height:42px !important; min-width:42px !important; min-height:42px !important; } } /* 5) .tiny-btn: fünf verstreute Größenregeln, die späteste gewann mit 36 px. Auf Touch-Geräten sind die Zeilenaktionen jetzt durchgehend 40 px hoch. */ @media(pointer:coarse),(max-width:900px){ .tiny-btn{min-height:40px !important;padding:9px 12px !important} } /* 6) Beschriftungen der unteren Navigation waren mit 8 px kaum lesbar. */ .mobile-bottom-nav button>b{font-size:10px !important;letter-spacing:0 !important} @media(max-width:480px){ .mobile-bottom-nav button>b{font-size:9.5px !important} } /* 7) Der Bestandsdetail-Dialog trägt beide Klassen am selben Element – ".inventory-detail-modal .modal" hat deshalb nie getroffen. */ .inventory-detail-modal{ max-height:calc(100dvh - 24px); overflow:hidden; } .inventory-detail-modal>.modal-head{ padding-top:38px !important; } /* ========================================================= v68.21 · Aufgabenliste auf der Startseite ========================================================= */ .kt-tasks{margin-top:16px} .kt-task-list{display:grid;gap:9px;margin-top:14px} .kt-task-row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto; align-items:center; gap:13px; width:100%; padding:13px 15px; border:1px solid var(--line); border-radius:14px; background:var(--panel); text-align:left; cursor:pointer; transition:border-color .18s ease,background .18s ease,transform .18s ease; } .kt-task-row:hover{ border-color:color-mix(in srgb,var(--text) 20%,var(--line)); background:color-mix(in srgb,var(--panel-2) 55%,var(--panel)); } .kt-task-dot{ width:9px;height:9px;border-radius:50%;flex:0 0 auto; background:var(--muted); } .kt-task-kritisch .kt-task-dot{background:var(--bad)} .kt-task-warnung .kt-task-dot{background:var(--warn)} .kt-task-hinweis .kt-task-dot{background:var(--muted)} .kt-task-kritisch{border-color:color-mix(in srgb,var(--bad) 34%,var(--line))} .kt-task-warnung{border-color:color-mix(in srgb,var(--warn) 32%,var(--line))} .kt-task-copy{display:grid;gap:3px;min-width:0} .kt-task-copy strong{font-size:12.5px;font-weight:750} .kt-task-copy small{font-size:10.5px;color:var(--muted);line-height:1.5} .kt-task-action{ flex:0 0 auto; color:var(--muted); font-size:10.5px; font-weight:750; white-space:nowrap; } .kt-tasks-clear .kt-task-clear-inner{ display:flex;align-items:center;gap:14px; padding:16px 18px;border:1px solid var(--line);border-radius:16px; background:var(--panel); } .kt-task-clear-icon{ display:grid;place-items:center;width:34px;height:34px;flex:0 0 auto; border-radius:11px;background:color-mix(in srgb,var(--good) 14%,var(--panel));color:var(--good); } .kt-task-clear-icon svg{width:19px;height:19px} .kt-tasks-clear strong{display:block;font-size:13px} .kt-tasks-clear span{display:block;margin-top:3px;color:var(--muted);font-size:11px} @media(max-width:700px){ .kt-task-row{grid-template-columns:auto minmax(0,1fr);row-gap:8px} .kt-task-action{grid-column:2;justify-self:start} } /* ========================================================================== v68.22 · Scrollverhalten und Fenster-Sperre ohne :has() ========================================================================== */ /* Nur ein einziger Scrollbereich: die Kopfzeile bleibt stehen, gescrollt wird ausschliesslich der Inhalt. Vorher lagen zwei Scrollcontainer ineinander, was auf Touchgeraeten zu haengenden Kopfzeilen und doppelten Scrollbalken gefuehrt hat. */ .main{ display:flex !important; flex-direction:column !important; max-height:100vh !important; max-height:100dvh !important; overflow:hidden !important; } .main > .topbar{flex:0 0 auto} .main > .content, .main > #content{ flex:1 1 auto !important; min-height:0 !important; max-height:none !important; overflow-y:auto !important; overflow-x:hidden !important; overscroll-behavior:contain; } /* Die Sperre des Hintergrunds haengt nicht mehr allein an :has(): die Klasse wird beim Oeffnen eines Fensters gesetzt und wirkt in jedem Browser. */ body.kt-modal-open{overflow:hidden !important} body.kt-modal-open .main{overflow:hidden !important} /* Der Inhalt hinter dem Fenster bleibt stehen (Scrollposition bleibt erhalten). */ body.kt-modal-open .main > .content, body.kt-modal-open .main > #content{overflow-y:hidden !important} body.kt-modal-open .topbar{ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* ========================================================================== v68.22 · Buchungszeilen zwischen 901 und 1180 Pixeln -------------------------------------------------------------------------- Die siebenspaltige Vorlage liess in diesem Bereich nur rund 50 Pixel je Spalte uebrig – Kategorie, Datum und Betrag lagen sichtbar uebereinander. Statt zu quetschen wird die Zeile hier bewusst gestapelt: Symbol, Text und Betrag oben, darunter Belegzeile, Kategorie/Datum und die Schaltflaechen. ========================================================================== */ @media(min-width:901px) and (max-width:1180px){ .type-ledger .statement-item, .banking-list:not(.type-ledger) .statement-item{ grid-template-columns:34px minmax(0,1fr) minmax(96px,auto)!important; gap:7px 12px!important; align-items:start!important; } .type-ledger .statement-item>.tx-icon, .banking-list:not(.type-ledger) .statement-item>.tx-icon{grid-column:1;grid-row:1} .type-ledger .statement-item>.tx-main, .banking-list:not(.type-ledger) .statement-item>.tx-main{grid-column:2;grid-row:1;min-width:0} .type-ledger .statement-item>.tx-amount, .banking-list:not(.type-ledger) .statement-item>.tx-amount{ grid-column:3;grid-row:1;justify-self:end;text-align:right;white-space:nowrap; } .type-ledger .statement-item>.tx-record-meta, .banking-list:not(.type-ledger) .statement-item>.tx-record-meta{grid-column:2/span 2;grid-row:2;min-width:0} .type-ledger .statement-item>.tx-category, .banking-list:not(.type-ledger) .statement-item>.tx-category{grid-column:2;grid-row:3;min-width:0} .type-ledger .statement-item>.tx-date, .banking-list:not(.type-ledger) .statement-item>.tx-date{ grid-column:3;grid-row:3;justify-self:end;text-align:right;white-space:nowrap; } .type-ledger .statement-item>.bank-row-end, .banking-list:not(.type-ledger) .statement-item>.bank-row-end{ grid-column:2/span 2;grid-row:4;justify-self:stretch; } .type-ledger .statement-item>.row-actions, .type-ledger .statement-item>.ledger-actions, .banking-list:not(.type-ledger) .statement-item>.row-actions{ grid-column:2/span 2;grid-row:5;justify-content:flex-start;flex-wrap:wrap; } } /* ========================================================================== v68.22 · Filterleisten einheitlich beschriftet und linksbuendig -------------------------------------------------------------------------- Die Auswahlfelder trugen bisher keine sichtbare Beschriftung, waehrend Name/Min./Max. eine hatten – die Zeile wirkte dadurch unruhig. Ausserdem klebte die Leiste am rechten Rand, sobald sie unter die Ueberschrift rutschte; links blieb eine grosse Luecke. ========================================================================== */ .select-filter{display:flex;flex-direction:column;gap:4px;min-width:0} .select-filter>span{ font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em; white-space:nowrap; } .select-filter>select{max-width:100%} .filter-panel{align-items:flex-end} /* Die Felder lesen sich als zusammenhaengendes Formular: immer links beginnend, in der Reihenfolge der Beschriftungen. */ .toolbar.bank-toolbar{flex-wrap:wrap} .toolbar.bank-toolbar>.filter-panel{ justify-content:flex-start; flex:1 1 100%; width:100%; } @media(max-width:760px){ .select-filter{flex:1 1 150px} .select-filter>select{width:100%} } /* --------------------------------------------------------------------- Zeitraum-Filter (Woche / Monat / Quartal / frei) Der Blätterer steht bewusst neben der Auswahl: erst die Einheit wählen, dann mit den Pfeilen durchgehen. Die Mitte zeigt immer den tatsächlich wirksamen Zeitraum im Klartext und führt per Klick zurück auf heute. --------------------------------------------------------------------- */ .date-filter{display:flex;flex-direction:column;gap:4px} .date-filter>span{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em} .date-filter>input{ height:38px;border:1px solid var(--line);background:var(--surface);color:var(--text); border-radius:9px;padding:0 10px;font:inherit;font-size:13px; } .period-stepper{ display:inline-flex;align-items:stretch;height:38px;align-self:flex-end; border:1px solid var(--line);border-radius:9px;background:var(--surface);overflow:hidden; } .period-stepper>button{ border:0;background:transparent;color:var(--text);font:inherit;cursor:pointer; transition:background .12s ease,color .12s ease; } .period-arrow{ width:29px;flex:0 0 auto;font-size:17px;line-height:1;color:var(--muted); } .period-arrow:hover{background:var(--surface-2,rgba(125,125,125,.12));color:var(--text)} .period-label{ padding:0 11px;font-size:13px;font-weight:600;white-space:nowrap; border-left:1px solid var(--line);border-right:1px solid var(--line); } /* Die Betragsfelder halten nur kurze Zahlen - schmaler gesetzt, damit die Leiste mit dem Zeitraum weiterhin in eine Reihe passt. */ .filter-panel .amount-filter input{width:84px} .period-label:hover{background:var(--surface-2,rgba(125,125,125,.12))} /* Der laufende Zeitraum wird hervorgehoben - so sieht man auf einen Blick, ob man gerade in der Gegenwart oder in der Vergangenheit sucht. */ .period-label.period-now{color:var(--good)} .period-stepper>button:focus-visible{outline:2px solid var(--good);outline-offset:-2px} @media(max-width:760px){ .period-stepper{width:100%;justify-content:space-between} .period-label{flex:1 1 auto;text-align:center} .date-filter{flex:1 1 150px} .date-filter>input{width:100%} }