: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 .kt-task-clear-copy > 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%} } /* v68.25 · Einnahmen ohne Umsatz & Händler-Retouren */ .income-purpose-fields{display:none;border:1px solid var(--line);border-radius:18px;padding:18px;background:linear-gradient(180deg,rgba(255,255,255,.8),rgba(248,250,252,.9));} .income-purpose-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:14px;} .income-purpose-grid>.span-2,.income-non-revenue-fields,.purchase-refund-fields,.purchase-vat-refund-fields{grid-column:1/-1;} .income-non-revenue-fields,.purchase-refund-fields,.purchase-vat-refund-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:14px;border:1px solid var(--line);border-radius:15px;background:var(--surface,#fff);} .income-purpose-note,.purchase-refund-preview{padding:13px 14px;border-radius:13px;background:rgba(15,23,42,.035);border:1px solid var(--line);display:flex;flex-direction:column;gap:4px;} .income-purpose-note strong,.purchase-refund-preview strong{font-size:13px;} .income-purpose-note span,.purchase-refund-preview span{font-size:12px;color:var(--muted);line-height:1.5;} .income-purpose-note.neutral{background:rgba(59,130,246,.055);} .purchase-refund-preview.ready{background:rgba(16,185,129,.055);} .purchase-refund-preview.warning{background:rgba(245,158,11,.08);} .income-purpose-badge{display:inline-flex;width:max-content;max-width:100%;align-items:center;padding:3px 8px;border-radius:999px;font-size:10px;font-weight:800;letter-spacing:.02em;background:rgba(59,130,246,.09);color:var(--text);margin-top:4px;} .income-purpose-badge.refund{background:rgba(16,185,129,.11);} .supplier-cancellation-type{background:rgba(16,185,129,.12)!important;color:inherit!important;} @media(max-width:760px){.income-purpose-grid,.income-non-revenue-fields,.purchase-refund-fields,.purchase-vat-refund-fields{grid-template-columns:1fr}.income-non-revenue-fields>*,.purchase-refund-fields>*,.purchase-vat-refund-fields>*{grid-column:1!important}} /* ========================================================= v68.27 · Buchungszweck-Icons im bestehenden KT-Finance-Stil ========================================================= */ .income-purpose-select{margin-top:6px} .income-purpose-trigger{min-height:50px} .income-purpose-trigger .payment-method-trigger-content{gap:11px} .income-purpose-option{min-height:52px;gap:11px} .income-purpose-option .payment-method-option-text{display:grid;gap:2px;min-width:0} .income-purpose-option .payment-method-option-text b{font-size:12px;font-weight:750} .income-purpose-option .payment-method-option-text small{font-size:9.5px;color:var(--muted);font-weight:650} .income-purpose-option-logo{ width:32px;height:32px;min-width:32px;border:0;border-radius:9px; background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--muted) } .income-purpose-trigger .income-purpose-option-logo{width:30px;height:30px;min-width:30px} .income-purpose-svg{width:18px;height:18px;display:block;fill:none;stroke:currentColor;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round} .purpose-icon-sale{color:#0b8e61;background:rgba(11,142,97,.10)} .purpose-icon-non_revenue,.purpose-icon-tax_refund{color:#3569b3;background:rgba(53,105,179,.09)} .purpose-icon-purchase_refund{color:#8a5b35;background:rgba(138,91,53,.10)} .purpose-icon-purchase_vat_refund{color:#6f5aa8;background:rgba(111,90,168,.10)} .purpose-icon-deposit_refund{color:#6e56b5;background:rgba(110,86,181,.10)} .purpose-icon-other{color:#566477;background:rgba(86,100,119,.09)} .income-purpose-option.is-selected .income-purpose-option-logo{ border:0;background:color-mix(in srgb,currentColor 12%,transparent) } .income-purpose-menu{z-index:165} @media(max-width:700px){.income-purpose-trigger{min-height:48px}.income-purpose-option{min-height:50px}} /* v68.31 · Auswertungen: kompletter Monatsdownload */ .all-reports-builder .panel-head h3{margin-bottom:4px} .all-reports-controls{grid-template-columns:minmax(150px,.7fr) minmax(170px,.9fr) auto} .all-reports-download{min-width:260px} .all-reports-zip-mark{font-size:10px;letter-spacing:.12em} .all-reports-includes b{white-space:nowrap} @media(max-width:900px){.all-reports-controls{grid-template-columns:1fr 1fr}.all-reports-download{grid-column:1/-1;min-width:0}} @media(max-width:520px){.all-reports-controls{grid-template-columns:1fr}.all-reports-download{grid-column:auto}} /* v68.33 · Auswertungen: einzelne / mehrere Monate auswählbar */ .all-reports-controls{grid-template-columns:minmax(130px,.65fr) minmax(170px,.8fr) minmax(170px,.8fr) auto;align-items:end} .all-reports-controls label{display:flex;flex-direction:column;gap:7px} .all-reports-multi-wrap{margin-top:14px;padding:14px;border:1px solid color-mix(in srgb,var(--text) 9%,transparent);border-radius:14px;background:color-mix(in srgb,var(--text) 2.5%,transparent)} .all-reports-multi-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px} .all-reports-multi-head span{font-size:12px;font-weight:780;color:var(--text)} .all-reports-multi-head small{font-size:10.5px;color:var(--muted);font-weight:650} .all-reports-month-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px} .all-reports-month-chip{position:relative;display:block!important;cursor:pointer} .all-reports-month-chip input{position:absolute;opacity:0;pointer-events:none} .all-reports-month-chip span{display:flex;align-items:center;justify-content:center;min-height:38px;padding:7px 8px;border-radius:10px;border:1px solid color-mix(in srgb,var(--text) 9%,transparent);background:var(--card);font-size:11px;font-weight:720;color:var(--muted);transition:.16s ease} .all-reports-month-chip:hover span{border-color:color-mix(in srgb,var(--accent) 28%,transparent);color:var(--text)} .all-reports-month-chip input:checked + span{border-color:color-mix(in srgb,var(--accent) 36%,transparent);background:color-mix(in srgb,var(--accent) 10%,var(--card));color:var(--accent);box-shadow:0 0 0 1px color-mix(in srgb,var(--accent) 7%,transparent) inset} @media(max-width:1050px){.all-reports-controls{grid-template-columns:1fr 1fr 1fr}.all-reports-download{grid-column:1/-1}.all-reports-month-grid{grid-template-columns:repeat(4,minmax(0,1fr))}} @media(max-width:700px){.all-reports-controls{grid-template-columns:1fr 1fr}.all-reports-month-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.all-reports-multi-head{align-items:flex-start;flex-direction:column;gap:3px}} @media(max-width:500px){.all-reports-controls{grid-template-columns:1fr}.all-reports-month-grid{grid-template-columns:repeat(2,minmax(0,1fr))}} /* ====================================================================== v68.34.0 · Auswertungen: Plattform-Icons bleiben auch nach Auswahl sichtbar ====================================================================== */ .report-platform-select{position:relative;width:100%;margin-top:0} .report-platform-native{position:absolute!important;inline-size:1px!important;block-size:1px!important;opacity:0!important;pointer-events:none!important} .report-platform-trigger{ width:100%;height:46px;padding:6px 11px;border:1px solid var(--line);border-radius:11px; background:var(--panel-2);color:var(--text);display:flex;align-items:center;justify-content:space-between; gap:10px;text-align:left;font:inherit;cursor:pointer } .report-platform-trigger:focus-visible{outline:2px solid color-mix(in srgb,var(--text) 28%,transparent);outline-offset:2px} .report-platform-trigger-content,.report-platform-option{display:flex;align-items:center;gap:9px;min-width:0} .report-platform-trigger-content{flex:1;overflow:hidden} .report-platform-trigger[aria-expanded="true"] .income-platform-chevron{transform:rotate(180deg)} .report-platform-menu.hidden{display:none!important} .report-platform-menu{ position:absolute;z-index:175;left:0;right:0;top:calc(100% + 6px);max-height:310px;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) } .report-platform-option{ width:100%;min-height:48px;padding:7px 9px;border:0;border-radius:9px;background:transparent;color:var(--text); text-align:left;cursor:pointer } .report-platform-option:hover,.report-platform-option:focus-visible,.report-platform-option[aria-selected="true"]{background:var(--surface-2);outline:none} .report-platform-icon-tile{ width:32px;height:32px;min-width:32px;border-radius:9px;display:grid;place-items:center; background:color-mix(in srgb,var(--text) 5%,transparent);color:var(--muted) } .report-platform-icon-tile .platform-logo-svg{max-width:24px;height:18px} .report-platform-icon-tile .platform-generic-icon, .report-platform-icon-tile .platform-vinted-logo, .report-platform-icon-tile .platform-kleinanzeigen-icon{width:19px!important;height:19px!important;flex-basis:19px} .report-platform-icon-bank{color:#3569b3;background:rgba(53,105,179,.09)} .report-platform-icon-vinted{color:#087f8c;background:rgba(8,127,140,.10)} .report-platform-icon-paypal{color:#003087;background:rgba(0,48,135,.08)} .report-platform-icon-ebay{color:#566477;background:rgba(86,100,119,.09)} .report-platform-icon-kleinanzeigen{color:#e55f43;background:rgba(229,95,67,.09)} .report-platform-icon-cash{color:#23845b;background:rgba(35,132,91,.09)} .report-platform-trigger .income-platform-option-text,.report-platform-option .income-platform-option-text{font-size:11px;font-weight:750} @media(max-width:700px){.report-platform-menu{max-height:265px}} .platform-report-platform-builder{overflow:visible!important} .platform-report-platform-builder .platform-report-controls{position:relative;z-index:4} /* ====================================================================== v68.35.0 · Auswertungen: kompakter Report-Center / Layout-Test Ausschließlich innerhalb .reports-workspace aktiv. ====================================================================== */ .reports-workspace{ display:grid; gap:16px; margin-top:2px; } .reports-overview{ display:grid; grid-template-columns:minmax(280px,.95fr) minmax(520px,1.45fr); gap:18px; align-items:stretch; padding:18px; border:1px solid var(--line); border-radius:20px; background:linear-gradient(135deg,var(--panel),color-mix(in srgb,var(--accent) 4%,var(--panel-2))); box-shadow:0 10px 30px rgba(15,23,42,.035); overflow:hidden; position:relative; } .reports-overview:after{ content:""; position:absolute; width:190px;height:190px;border-radius:50%; right:-80px;top:-105px; background:color-mix(in srgb,var(--accent) 7%,transparent); pointer-events:none; } .reports-overview-copy{ display:flex; align-items:center; gap:13px; min-width:0; } .reports-overview-copy strong{ display:block; margin-top:4px; color:var(--text); font-size:17px; letter-spacing:-.025em; } .reports-overview-copy small{ display:block; margin-top:4px; color:var(--muted); font-size:10.5px; font-weight:650; } .reports-overview-icon, .reports-card-icon{ width:42px;height:42px;min-width:42px; border-radius:12px; display:grid; place-items:center; border:1px solid color-mix(in srgb,currentColor 10%,transparent); } .reports-overview-icon{ color:#2e7380; background:rgba(46,115,128,.10); } .reports-overview-icon svg, .reports-card-icon svg{ width:21px;height:21px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } .reports-overview-kpis{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; position:relative; z-index:1; } .reports-overview-kpi{ min-width:0; padding:12px 14px; border:1px solid color-mix(in srgb,var(--text) 7%,transparent); border-radius:14px; background:color-mix(in srgb,var(--panel) 84%,transparent); } .reports-overview-kpi span{ display:block; color:var(--muted); font-size:8.5px; font-weight:800; text-transform:uppercase; letter-spacing:.09em; } .reports-overview-kpi strong{ display:block; margin-top:6px; color:var(--text); font-size:16px; letter-spacing:-.035em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .reports-overview-kpi-result{ background:color-mix(in srgb,var(--accent) 7%,var(--panel)); border-color:color-mix(in srgb,var(--accent) 16%,transparent); } .reports-section-heading{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:12px 4px 2px; } .reports-section-heading h2{ margin:3px 0 0; color:var(--text); font-size:17px; line-height:1.1; letter-spacing:-.035em; } .reports-section-heading p{ margin:0; max-width:480px; color:var(--muted); font-size:10.5px; line-height:1.45; font-weight:600; text-align:right; } .reports-section-heading-secondary{ margin-top:2px; padding-top:14px; border-top:1px solid color-mix(in srgb,var(--text) 6%,transparent); } .reports-workspace .reports-card{ margin:0; border-radius:20px; border-color:color-mix(in srgb,var(--text) 8%,transparent); box-shadow:0 10px 28px rgba(15,23,42,.035); } .reports-workspace .reports-card-featured{ background:linear-gradient(145deg,var(--panel),color-mix(in srgb,var(--accent) 3.2%,var(--panel-2))); border-color:color-mix(in srgb,var(--accent) 13%,var(--line)); } .reports-card-head{ align-items:flex-start!important; } .reports-card-title{ display:flex; align-items:flex-start; gap:12px; min-width:0; } .reports-card-title h3{ margin:3px 0 0; font-size:16px; letter-spacing:-.025em; } .reports-card-title p{ margin-top:5px!important; max-width:720px; line-height:1.45; } .reports-card-icon-zip{color:#3569b3;background:rgba(53,105,179,.09)} .reports-card-icon-platform{color:#087f8c;background:rgba(8,127,140,.10)} .reports-card-icon-expense{color:#8a5b35;background:rgba(138,91,53,.10)} .reports-card-icon-cancel{color:#9a4d64;background:rgba(154,77,100,.09)} .reports-workspace .platform-report-pdf-mark{ width:42px;height:42px; min-width:42px; border-radius:12px; font-size:9.5px; background:color-mix(in srgb,var(--text) 3%,var(--panel-2)); box-shadow:0 1px 0 rgba(255,255,255,.35) inset; } .reports-workspace .all-reports-controls, .reports-workspace .platform-report-controls{ padding:12px; border:1px solid color-mix(in srgb,var(--text) 6%,transparent); border-radius:15px; background:color-mix(in srgb,var(--text) 2.2%,transparent); } .reports-workspace .all-reports-controls{ margin-top:16px; } .reports-workspace .platform-report-controls label{ gap:6px; font-size:9.5px; letter-spacing:.01em; } .reports-workspace .platform-report-controls select, .reports-workspace .report-platform-trigger{ background:var(--panel); border-color:color-mix(in srgb,var(--text) 9%,transparent); box-shadow:0 1px 1px rgba(15,23,42,.025); } .reports-workspace .platform-report-download, .reports-workspace .cancellation-report-download{ border-radius:11px; } .reports-workspace .platform-report-includes{ margin-top:12px; padding-top:11px; border-top-color:color-mix(in srgb,var(--text) 6%,transparent); } .reports-workspace .platform-report-includes > span{ font-size:8.5px; letter-spacing:.04em; text-transform:uppercase; } .reports-workspace .platform-report-includes b{ padding:5px 8px; background:color-mix(in srgb,var(--text) 2.5%,var(--panel)); border-color:color-mix(in srgb,var(--text) 7%,transparent); font-weight:720; } .reports-individual-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:start; } .reports-individual-grid .reports-card{ min-width:0; } .reports-individual-grid .platform-report-controls{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; } .reports-individual-grid .platform-report-controls > label:first-child{ grid-column:1/-1; } .reports-individual-grid .platform-report-download{ grid-column:1/-1; width:100%; } .reports-individual-grid .expense-category-report-controls > label:first-child{ grid-column:1/-1; } .reports-workspace .cancellation-report-builder .cancellation-report-controls{ grid-template-columns:minmax(160px,.9fr) minmax(140px,.7fr) minmax(170px,.8fr) auto; padding:12px; border:1px solid color-mix(in srgb,var(--text) 6%,transparent); border-radius:15px; background:color-mix(in srgb,var(--text) 2.2%,transparent); } .reports-workspace > .card:not(.reports-card):not(.reports-year-chart){ margin:0; border-radius:20px; border-color:color-mix(in srgb,var(--text) 8%,transparent); box-shadow:0 10px 28px rgba(15,23,42,.035); } .reports-year-chart{ margin:0!important; border-radius:20px; border-color:color-mix(in srgb,var(--text) 8%,transparent); box-shadow:0 10px 28px rgba(15,23,42,.035); } .reports-year-chart .panel-head{ padding-bottom:12px; border-bottom:1px solid color-mix(in srgb,var(--text) 6%,transparent); } body.dark .reports-overview, body.dark .reports-workspace .reports-card, body.dark .reports-workspace > .card:not(.reports-card){ box-shadow:none; } @media(max-width:1180px){ .reports-overview{grid-template-columns:1fr} .reports-individual-grid{grid-template-columns:1fr} .reports-individual-grid .platform-report-controls{grid-template-columns:repeat(4,minmax(0,1fr))} .reports-individual-grid .platform-report-controls > label:first-child{grid-column:auto} .reports-individual-grid .expense-category-report-controls > label:first-child{grid-column:auto} .reports-individual-grid .platform-report-download{grid-column:1/-1} } @media(max-width:820px){ .reports-overview-kpis{grid-template-columns:1fr 1fr 1fr} .reports-section-heading{align-items:flex-start;flex-direction:column;gap:5px} .reports-section-heading p{text-align:left} .reports-workspace .cancellation-report-builder .cancellation-report-controls{grid-template-columns:1fr 1fr} .reports-workspace .cancellation-report-download{grid-column:1/-1} .reports-individual-grid .platform-report-controls{grid-template-columns:1fr 1fr} } @media(max-width:560px){ .reports-overview{padding:14px;border-radius:16px} .reports-overview-kpis{grid-template-columns:1fr} .reports-overview-kpi{display:flex;align-items:center;justify-content:space-between;gap:12px} .reports-overview-kpi strong{margin-top:0;font-size:14px} .reports-card-title{gap:9px} .reports-overview-icon,.reports-card-icon{width:38px;height:38px;min-width:38px;border-radius:11px} .reports-workspace .platform-report-pdf-mark{display:grid} .reports-individual-grid .platform-report-controls, .reports-workspace .cancellation-report-builder .cancellation-report-controls{grid-template-columns:1fr} .reports-workspace .cancellation-report-download{grid-column:auto} } /* ====================================================================== v68.36.0 · Einheitliches KT-Finance Layout Der kompakte, klare Stil des Report-Centers gilt nun systemweit. Funktionale Layouts (Tabellen, Formulare, Modals) bleiben unverändert; geändert werden Hierarchie, Karten, Abstände, Icons und Kontrollflächen. ====================================================================== */ .kt-polished-content{ --kt-view-accent:#536477; --kt-view-soft:color-mix(in srgb,var(--kt-view-accent) 8%,var(--panel)); --kt-ui-border:color-mix(in srgb,var(--text) 8%,transparent); --kt-ui-inner:color-mix(in srgb,var(--text) 2.2%,transparent); } .kt-view-dashboard{--kt-view-accent:#66717f} .kt-view-banking,.kt-view-statement{--kt-view-accent:#3569b3} .kt-view-income{--kt-view-accent:#2e8a65} .kt-view-expenses{--kt-view-accent:#9a653c} .kt-view-salesOverview{--kt-view-accent:#2e7380} .kt-view-inventory{--kt-view-accent:#735c9b} .kt-view-invoices,.kt-view-receivables,.kt-view-receipts,.kt-view-receiptVault{--kt-view-accent:#4e6d9b} .kt-view-cancellations{--kt-view-accent:#9a4d64} .kt-view-shippingDocs{--kt-view-accent:#6a7888} .kt-view-customers,.kt-view-partners{--kt-view-accent:#397d86} .kt-view-vat{--kt-view-accent:#aa7a2f} .kt-view-reports{--kt-view-accent:#2e7380} .kt-view-monthClosing{--kt-view-accent:#657383} .kt-view-automation{--kt-view-accent:#7b6640} .kt-view-auditLog{--kt-view-accent:#657383} .kt-view-trash{--kt-view-accent:#8a5962} .kt-view-settings{--kt-view-accent:#657383} .kt-view-cashBook,.kt-view-platformCash{--kt-view-accent:#23845b} .kt-view-platformVinted{--kt-view-accent:#087f8c} .kt-view-platformPayPal{--kt-view-accent:#315c9f} .kt-view-platformEbay{--kt-view-accent:#566477} .kt-view-platformKleinanzeigen{--kt-view-accent:#b85f4c} /* Seitenkopf: Icon + klare Hierarchie wie im Report-Center. */ .kt-page-head{ align-items:flex-start; gap:18px; margin-bottom:22px; padding:2px 2px 0; } .kt-page-head>.kt-page-head-main{ display:flex; align-items:center; gap:13px; min-width:250px; margin-top:0!important; width:auto!important; } .kt-page-head-icon{ width:44px; height:44px; min-width:44px; display:grid; place-items:center; border-radius:13px; color:var(--kt-view-accent); background:color-mix(in srgb,var(--kt-view-accent) 10%,var(--panel)); border:1px solid color-mix(in srgb,var(--kt-view-accent) 14%,transparent); box-shadow:0 1px 0 rgba(255,255,255,.35) inset; } .kt-page-head-icon svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; } .kt-page-head-text{min-width:0} .kt-page-head-text h1{ margin:3px 0 4px; font-size:27px; letter-spacing:-.045em; } .kt-page-head-text p{ max-width:760px; font-size:11.5px!important; } .kt-page-head>.head-actions{ display:flex; align-items:center; justify-content:flex-end; gap:6px; padding:6px; border:1px solid var(--kt-ui-border); border-radius:14px; background:var(--kt-ui-inner); } .kt-page-head>.head-actions .primary-btn, .kt-page-head>.head-actions .secondary-btn{ min-height:38px; box-shadow:none; } /* Einheitliche Kartenoberfläche. */ .kt-polished-content .kt-unified-card:not(.reports-card){ border-color:var(--kt-ui-border); border-radius:20px; box-shadow:0 10px 28px rgba(15,23,42,.035); } .kt-polished-content .kt-unified-card.panel:not(.dashboard-hero-panel):not(.platform-dashboard-hero):not(.reports-card){ background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel-2) 18%,var(--panel))); } body.dark .kt-polished-content .kt-unified-card{box-shadow:none!important} /* Abschnittsköpfe: System-Icon und dezente Trennlinie. */ .kt-panel-head-decorated{ align-items:center!important; margin-bottom:14px; padding-bottom:13px; border-bottom:1px solid color-mix(in srgb,var(--text) 6%,transparent); } .kt-panel-title{ display:flex; align-items:center; gap:11px; min-width:0; } .kt-panel-title>div, .kt-panel-title>section{min-width:0} .kt-panel-title-icon{ width:38px; height:38px; min-width:38px; display:grid; place-items:center; border-radius:11px; color:#657383; background:rgba(101,115,131,.09); border:1px solid color-mix(in srgb,currentColor 10%,transparent); } .kt-panel-title-icon svg{ width:19px; height:19px; fill:none; stroke:currentColor; stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round; } .kt-panel-title-icon.kt-tone-positive{color:#2e8a65;background:rgba(46,138,101,.09)} .kt-panel-title-icon.kt-tone-expense{color:#93633d;background:rgba(147,99,61,.09)} .kt-panel-title-icon.kt-tone-blue{color:#3569b3;background:rgba(53,105,179,.085)} .kt-panel-title-icon.kt-tone-violet{color:#735c9b;background:rgba(115,92,155,.09)} .kt-panel-title-icon.kt-tone-amber{color:#a6782f;background:rgba(166,120,47,.09)} .kt-panel-title-icon.kt-tone-rose{color:#9a4d64;background:rgba(154,77,100,.085)} .kt-panel-title-icon.kt-tone-cyan{color:#397d86;background:rgba(57,125,134,.09)} .kt-panel-head-decorated h2, .kt-panel-head-decorated h3{ margin:0; font-size:15.5px; letter-spacing:-.022em; } .kt-panel-head-decorated p{margin-top:4px!important;line-height:1.45!important} /* Tabellenkarten erhalten einen sauberen Kopf und eine ruhige Filterzone. */ .kt-polished-content .table-card>.kt-panel-head-decorated, .kt-polished-content .kt-unified-table-card>.kt-panel-head-decorated{ margin:0!important; padding:16px 18px 13px!important; } .kt-unified-toolbar{ min-height:58px; padding:11px 14px!important; background:color-mix(in srgb,var(--panel-2) 54%,var(--panel)); border-bottom:1px solid color-mix(in srgb,var(--text) 6%,transparent)!important; } .kt-unified-toolbar .section-title{font-size:13px;letter-spacing:-.01em} .kt-unified-toolbar .section-subtitle{margin-top:2px;font-size:9.5px;color:var(--muted)} .kt-unified-controls{ border:1px solid color-mix(in srgb,var(--text) 6%,transparent); border-radius:13px; background:color-mix(in srgb,var(--text) 1.8%,transparent); } .filter-panel.kt-unified-controls{padding:5px} .kt-polished-content th{ background:color-mix(in srgb,var(--panel-2) 64%,var(--panel)); border-bottom-color:color-mix(in srgb,var(--text) 7%,transparent); } .kt-polished-content td{border-bottom-color:color-mix(in srgb,var(--text) 5%,transparent)} .kt-polished-content tbody tr:hover{background:color-mix(in srgb,var(--kt-view-accent) 3.3%,var(--panel))} /* Kennzahlen / Übersichten: gleiche kleine Report-Center-Karten. */ .kt-polished-content .kpi-grid>.card, .kt-polished-content .bank-summary-grid>.card, .kt-polished-content .sales-overview-summary>.card, .kt-polished-content .platform-summary-grid>.card, .kt-polished-content .vinted-payout-stats>.card, .kt-polished-content .receivable-stats>.card, .kt-polished-content .reconciliation-stats>.card, .kt-polished-content .cancellation-kpi, .kt-polished-content .tax-box{ border-color:var(--kt-ui-border)!important; background:linear-gradient(145deg,var(--panel),color-mix(in srgb,var(--kt-view-accent) 3.2%,var(--panel-2)))!important; box-shadow:0 8px 24px rgba(15,23,42,.025)!important; } .kt-polished-content .kpi-grid>.card:hover, .kt-polished-content .bank-summary-grid>.card:not(.bank-hero):hover, .kt-polished-content .sales-overview-summary>.card:hover, .kt-polished-content .vinted-payout-stats>.card:hover{ border-color:color-mix(in srgb,var(--kt-view-accent) 18%,var(--line))!important; } /* Formulare wirken als zusammengehörige, ruhige Arbeitsbereiche. */ .kt-polished-content .form-grid{ gap:12px; } .kt-polished-content .form-grid label{ gap:6px; } .kt-polished-content .form-grid input, .kt-polished-content .form-grid select, .kt-polished-content .form-grid textarea, .kt-polished-content .filter-set input, .kt-polished-content .filter-set select{ border-color:color-mix(in srgb,var(--text) 9%,transparent); background:var(--panel); box-shadow:0 1px 1px rgba(15,23,42,.018); } .kt-polished-content .form-grid input:focus, .kt-polished-content .form-grid select:focus, .kt-polished-content .form-grid textarea:focus, .kt-polished-content .filter-set input:focus, .kt-polished-content .filter-set select:focus{ border-color:color-mix(in srgb,var(--kt-view-accent) 38%,var(--line)); box-shadow:0 0 0 3px color-mix(in srgb,var(--kt-view-accent) 8%,transparent); } /* Listen innerhalb von Karten bekommen mehr Luft und einen ruhigeren Hover. */ .kt-polished-content .mini-row, .kt-polished-content .payout-sale-row, .kt-polished-content .platform-activity-row, .kt-polished-content .statement-item{ transition:background-color .16s ease,border-color .16s ease; } .kt-polished-content .payout-sale-row:hover, .kt-polished-content .platform-activity-row:hover, .kt-polished-content .statement-item:hover{ background:color-mix(in srgb,var(--kt-view-accent) 3.3%,var(--panel-2)); } /* Bestehende Spezialkarten behalten ihren Charakter, passen aber in das Raster. */ .kt-polished-content .bank-hero, .kt-polished-content .platform-dashboard-hero, .kt-polished-content .dashboard-hero-panel{ border-color:color-mix(in srgb,var(--kt-view-accent) 12%,var(--line)); box-shadow:0 10px 30px rgba(15,23,42,.03); } .kt-polished-content .empty-state.compact{ border-color:color-mix(in srgb,var(--kt-view-accent) 11%,var(--line)); background:color-mix(in srgb,var(--kt-view-accent) 2.5%,var(--panel-2)); } /* Desktop: viele Kopfschaltflächen bleiben kompakt statt die Seite zu dominieren. */ @media(min-width:821px){ .kt-page-head>.head-actions{max-width:min(860px,64%)} .kt-view-banking .kt-page-head>.head-actions, .kt-view-invoices .kt-page-head>.head-actions, .kt-view-inventory .kt-page-head>.head-actions{align-self:center} } @media(max-width:1000px){ .kt-page-head{align-items:flex-start;flex-direction:column} .kt-page-head>.head-actions{width:100%;max-width:100%;justify-content:flex-start} .kt-page-head>.kt-page-head-main{width:100%!important} } @media(max-width:760px){ .kt-page-head{margin-bottom:16px;padding:0} .kt-page-head>.kt-page-head-main{align-items:flex-start;gap:11px;margin-top:0!important;width:100%!important} .kt-page-head-icon{width:40px;height:40px;min-width:40px;border-radius:12px} .kt-page-head-icon svg{width:20px;height:20px} .kt-page-head-text h1{font-size:23px!important;margin-top:2px} .kt-page-head>.head-actions{padding:5px;border-radius:12px} .kt-panel-title-icon{width:35px;height:35px;min-width:35px} .kt-panel-head-decorated{align-items:flex-start!important} .kt-polished-content .kt-unified-card:not(.reports-card){border-radius:16px} } @media(max-width:520px){ .kt-page-head>.head-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important} .kt-page-head>.head-actions>.primary-btn{grid-column:1/-1} .kt-page-head>.head-actions>.period-selects, .kt-page-head>.head-actions>.period-wrap, .kt-page-head>.head-actions>select{grid-column:1/-1} .kt-panel-title{align-items:flex-start} } /* ============================================================ v68.38 · KT PERIOD / MONTH / YEAR PICKER Gleiche Line-Icon-Sprache wie Navigation und Seitenköpfe. ============================================================ */ .kt-period-picker{ position:relative; display:inline-flex; align-items:stretch; min-width:min(var(--kt-period-original-width,132px),100%); max-width:100%; vertical-align:middle; } .kt-period-native{ position:absolute!important; width:1px!important;height:1px!important;min-width:0!important; margin:0!important;padding:0!important;opacity:0!important; pointer-events:none!important;overflow:hidden!important;clip-path:inset(50%)!important; } .kt-period-trigger{ width:100%;min-width:0;height:38px; display:flex;align-items:center;gap:9px; padding:4px 10px 4px 6px; border:1px solid color-mix(in srgb,var(--text) 10%,transparent); border-radius:10px;background:var(--panel);color:var(--text); font:inherit;font-size:12px;font-weight:700;text-align:left;cursor:pointer; box-shadow:0 1px 1px rgba(15,23,42,.018); transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease; } .kt-period-trigger:hover{ border-color:color-mix(in srgb,var(--kt-view-accent,#657383) 25%,var(--line)); background:color-mix(in srgb,var(--kt-view-accent,#657383) 2.5%,var(--panel)); } .kt-period-picker.open .kt-period-trigger,.kt-period-trigger:focus-visible{ outline:none;border-color:color-mix(in srgb,var(--kt-view-accent,#657383) 42%,var(--line)); box-shadow:0 0 0 3px color-mix(in srgb,var(--kt-view-accent,#657383) 8%,transparent); } .kt-period-trigger:disabled{opacity:.55;cursor:not-allowed} .kt-period-trigger-icon,.kt-period-option-icon{display:grid;place-items:center;flex:0 0 auto} .kt-period-icon{ width:30px;height:30px;min-width:30px; display:grid;place-items:center; border-radius:8px; color:var(--kt-view-accent,#657383); background:color-mix(in srgb,var(--kt-view-accent,#657383) 9%,var(--panel-2)); border:1px solid color-mix(in srgb,var(--kt-view-accent,#657383) 11%,transparent); transition:background .15s ease,color .15s ease,border-color .15s ease,transform .15s ease; } .kt-period-icon svg{ width:17px;height:17px;display:block; fill:none;stroke:currentColor;stroke-width:1.75; stroke-linecap:round;stroke-linejoin:round; } .kt-period-trigger:hover .kt-period-icon{background:color-mix(in srgb,var(--kt-view-accent,#657383) 13%,var(--panel-2));transform:translateY(-1px)} .kt-period-trigger-label{min-width:0;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kt-period-trigger-chevron{width:17px;height:17px;display:grid;place-items:center;color:var(--muted);flex:0 0 auto;transition:transform .15s ease} .kt-period-trigger-chevron svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .kt-period-picker.open .kt-period-trigger-chevron{transform:rotate(180deg)} .kt-period-menu{ position:fixed;z-index:1200;display:grid;gap:3px;padding:6px;overflow:auto;overscroll-behavior:contain; border:1px solid color-mix(in srgb,var(--text) 10%,transparent);border-radius:14px; background:color-mix(in srgb,var(--panel) 97%,transparent);color:var(--text); box-shadow:0 18px 50px rgba(15,23,42,.14),0 2px 8px rgba(15,23,42,.05); backdrop-filter:blur(18px); } body.dark .kt-period-menu{box-shadow:0 20px 60px rgba(0,0,0,.42)} .kt-period-option{ width:100%;min-height:43px;display:flex;align-items:center;gap:10px;padding:6px 8px; border:0;border-radius:10px;background:transparent;color:var(--text);font:inherit; font-size:12px;font-weight:680;text-align:left;cursor:pointer; } .kt-period-option:hover{background:color-mix(in srgb,var(--kt-view-accent,#657383) 7%,var(--panel-2))} .kt-period-option.selected{background:color-mix(in srgb,var(--kt-view-accent,#657383) 10%,var(--panel-2));color:var(--text)} .kt-period-option.selected .kt-period-icon{ color:var(--kt-view-accent,#657383); border-color:color-mix(in srgb,var(--kt-view-accent,#657383) 22%,transparent); background:color-mix(in srgb,var(--kt-view-accent,#657383) 14%,var(--panel-2)); } .kt-period-option-label{flex:1 1 auto;min-width:0} .kt-period-option-check{width:20px;height:20px;display:grid;place-items:center;color:var(--kt-view-accent,#657383)} .kt-period-option-check svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} /* Mehrfach-Monatsauswahl im Report-Center nutzt dieselben System-Icons. */ .all-reports-month-chip{display:flex!important;align-items:center!important;gap:7px!important} .all-reports-month-chip .kt-period-chip-icon{display:grid;place-items:center;flex:0 0 auto} .all-reports-month-chip .kt-period-icon{width:27px;height:27px;min-width:27px;border-radius:7px} .all-reports-month-chip .kt-period-icon svg{width:15px;height:15px} .all-reports-month-chip:has(input:checked) .kt-period-icon{ background:color-mix(in srgb,var(--kt-view-accent,#657383) 15%,var(--panel-2)); border-color:color-mix(in srgb,var(--kt-view-accent,#657383) 24%,transparent); } /* Vorhandene Layouts behalten ihre Breite. */ .period-selects>.kt-period-picker{flex:1 1 132px} .dashboard-filter-row>.kt-period-picker,.filter-set>.kt-period-picker,.filter-panel>.kt-period-picker{flex:0 1 auto} .platform-report-controls label>.kt-period-picker,.form-grid label>.kt-period-picker,.reports-card label>.kt-period-picker{width:100%;min-width:0} .platform-report-controls .kt-period-trigger{height:46px;border-radius:11px;padding-left:7px;font-size:12px;background:var(--panel-2)} .platform-report-controls .kt-period-icon{width:31px;height:31px;min-width:31px} .kt-page-head>.head-actions>.kt-period-picker{min-width:140px} .select-filter>.kt-period-picker{width:100%;min-width:0} @media(max-width:720px){ .kt-period-picker{min-width:0;width:100%} .period-selects>.kt-period-picker{width:100%;flex:1 1 0} .kt-period-menu{border-radius:13px} .kt-period-option{min-height:44px} } /* Zeitraum-Buttons verwenden dieselbe Icon-Sprache wie die Auswahlfelder. */ .kt-temporal-pills button,.inventory-sales-filter-buttons button{display:inline-flex;align-items:center;justify-content:center;gap:6px} .kt-inline-period-icon{width:18px;height:18px;display:grid;place-items:center;flex:0 0 auto;color:currentColor;opacity:.82} .kt-inline-period-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .kt-temporal-pills button.active .kt-inline-period-icon,.inventory-sales-filter-buttons button.active .kt-inline-period-icon{opacity:1} /* v68.44 · Systemweite Action-Icons + stabile Icon-only Controls */ button.kt-action-iconized{ display:inline-flex; align-items:center; justify-content:center; gap:8px; } .kt-btn-icon{ width:18px; height:18px; min-width:18px; display:inline-grid; place-items:center; flex:0 0 18px; color:currentColor; opacity:.88; pointer-events:none; } .kt-btn-icon svg{ width:18px; height:18px; display:block; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } /* v68.43 · Icon-only Schließen-Buttons: exakt ein KT-Line-X */ .kt-close-button-svg{ width:20px; height:20px; display:block; fill:none; stroke:currentColor; stroke-width:1.85; stroke-linecap:round; stroke-linejoin:round; pointer-events:none; } .icon-btn>.kt-close-button-svg,.sidebar-mobile-close>.kt-close-button-svg{margin:auto} .tiny-btn.kt-action-iconized{gap:6px} .tiny-btn .kt-btn-icon{width:15px;height:15px;min-width:15px;flex-basis:15px} .tiny-btn .kt-btn-icon svg{width:15px;height:15px;stroke-width:1.9} .primary-btn .kt-btn-icon,.cancellation-primary-btn .kt-btn-icon{opacity:.96} .danger-btn .kt-btn-icon{opacity:.9} @media(max-width:720px){ button.kt-action-iconized{gap:7px} .kt-btn-icon{width:17px;height:17px;min-width:17px;flex-basis:17px} .kt-btn-icon svg{width:17px;height:17px} } /* v68.44 · Icon-only Controls: keine Textglyphen/Auto-Icons mehr */ .kt-topbar-icon-svg,.kt-search-icon-svg{ width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;pointer-events:none } .kt-search-icon{display:grid;place-items:center;flex:0 0 20px;color:var(--muted)} #menuBtn,#themeBtn,.sidebar-mobile-close{align-items:center;justify-content:center;padding:0;line-height:1} #menuBtn>.kt-topbar-icon-svg,#themeBtn>.kt-topbar-icon-svg{margin:auto} .sidebar-mobile-close{box-sizing:border-box!important;min-width:36px!important;max-width:36px!important;min-height:36px!important;max-height:36px!important;padding:0!important;line-height:1!important} @media(max-width:900px){ .sidebar-mobile-close{width:36px!important;height:36px!important;right:10px!important;left:auto!important;display:grid!important} } /* v68.45 · Kategorie-Auswahlen im KT-Finance-Systemstil */ .kt-category-picker{position:relative;display:inline-block;width:100%;min-width:min(var(--kt-category-original-width,150px),100%);vertical-align:middle} .kt-category-native{position:absolute!important;inline-size:1px!important;block-size:1px!important;opacity:0!important;pointer-events:none!important;clip-path:inset(50%)!important} .kt-category-trigger{width:100%;min-height:42px;display:flex;align-items:center;gap:9px;padding:5px 9px 5px 6px;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--text);font:inherit;font-size:12px;font-weight:700;text-align:left;cursor:pointer;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease} .kt-category-trigger:hover{background:var(--panel-2);border-color:color-mix(in srgb,var(--kt-view-accent,#657383) 24%,var(--line))} .kt-category-picker.open .kt-category-trigger,.kt-category-trigger:focus-visible{outline:none;border-color:color-mix(in srgb,var(--kt-view-accent,#657383) 54%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--kt-view-accent,#657383) 10%,transparent)} .kt-category-trigger:disabled{opacity:.58;cursor:not-allowed} .kt-category-trigger-icon,.kt-category-option-icon{display:grid;place-items:center;flex:0 0 auto} .kt-category-icon{width:30px;height:30px;min-width:30px;border-radius:9px;display:grid;place-items:center;color:var(--kt-view-accent,#657383);background:color-mix(in srgb,var(--kt-view-accent,#657383) 9%,var(--panel-2));border:1px solid color-mix(in srgb,var(--kt-view-accent,#657383) 10%,var(--line))} .kt-category-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .kt-category-icon-purchase{color:#9a6535;background:color-mix(in srgb,#9a6535 9%,var(--panel-2));border-color:color-mix(in srgb,#9a6535 13%,var(--line))} .kt-category-icon-sale{color:#337768;background:color-mix(in srgb,#337768 9%,var(--panel-2));border-color:color-mix(in srgb,#337768 13%,var(--line))} .kt-category-icon-shipping{color:#627387;background:color-mix(in srgb,#627387 9%,var(--panel-2));border-color:color-mix(in srgb,#627387 13%,var(--line))} .kt-category-icon-marketing{color:#8b668f;background:color-mix(in srgb,#8b668f 9%,var(--panel-2));border-color:color-mix(in srgb,#8b668f 13%,var(--line))} .kt-category-icon-software{color:#586f9f;background:color-mix(in srgb,#586f9f 9%,var(--panel-2));border-color:color-mix(in srgb,#586f9f 13%,var(--line))} .kt-category-icon-hosting{color:#506f85;background:color-mix(in srgb,#506f85 9%,var(--panel-2));border-color:color-mix(in srgb,#506f85 13%,var(--line))} .kt-category-icon-bank{color:#596877;background:color-mix(in srgb,#596877 9%,var(--panel-2));border-color:color-mix(in srgb,#596877 13%,var(--line))} .kt-category-icon-refund,.kt-category-icon-withdraw{color:#9a5d5d;background:color-mix(in srgb,#9a5d5d 9%,var(--panel-2));border-color:color-mix(in srgb,#9a5d5d 13%,var(--line))} .kt-category-icon-tax{color:#9a793d;background:color-mix(in srgb,#9a793d 10%,var(--panel-2));border-color:color-mix(in srgb,#9a793d 14%,var(--line))} .kt-category-trigger-label{min-width:0;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kt-category-trigger-chevron{width:17px;height:17px;display:grid;place-items:center;color:var(--muted);flex:0 0 auto;transition:transform .15s ease} .kt-category-trigger-chevron svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .kt-category-picker.open .kt-category-trigger-chevron{transform:rotate(180deg)} .kt-category-menu{position:fixed;z-index:10080;overflow:auto;padding:7px;background:var(--panel);border:1px solid var(--line);border-radius:15px;box-shadow:0 18px 52px rgba(25,32,45,.16)} body.dark .kt-category-menu{box-shadow:0 20px 60px rgba(0,0,0,.42)} .kt-category-option{width:100%;min-height:45px;display:flex;align-items:center;gap:10px;padding:6px 9px;border:0;border-radius:10px;background:transparent;color:var(--text);font:inherit;font-size:12px;font-weight:700;text-align:left;cursor:pointer} .kt-category-option:hover,.kt-category-option:focus-visible{background:color-mix(in srgb,var(--kt-view-accent,#657383) 7%,var(--panel-2));outline:none} .kt-category-option.selected{background:color-mix(in srgb,var(--kt-view-accent,#657383) 10%,var(--panel-2))} .kt-category-option:disabled{opacity:.45;cursor:not-allowed} .kt-category-option .kt-category-icon{width:31px;height:31px;min-width:31px} .kt-category-option-label{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kt-category-option-check{width:20px;height:20px;display:grid;place-items:center;color:var(--kt-view-accent,#657383)} .kt-category-option-check svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .filter-panel .kt-category-picker,.filter-set .kt-category-picker{min-width:145px;width:auto;flex:0 1 auto} .select-filter>.kt-category-picker,.platform-report-controls label>.kt-category-picker,.form-grid label>.kt-category-picker{width:100%;min-width:0} .platform-report-controls .kt-category-trigger{height:46px;border-radius:11px;background:var(--panel-2)} @media(max-width:700px){.kt-category-picker{min-width:0;width:100%}.kt-category-menu{border-radius:13px}.kt-category-option{min-height:44px}.filter-panel .kt-category-picker,.filter-set .kt-category-picker{width:100%;min-width:0}} /* v68.47 · Zahlungsstatus-Auswahlen im KT-Finance-Systemstil */ .kt-status-picker{position:relative;display:inline-block;width:100%;min-width:min(var(--kt-status-original-width,145px),100%);vertical-align:middle} .kt-status-native{position:absolute!important;inline-size:1px!important;block-size:1px!important;opacity:0!important;pointer-events:none!important;clip-path:inset(50%)!important} .kt-status-trigger{width:100%;min-height:42px;display:flex;align-items:center;gap:9px;padding:5px 9px 5px 6px;border:1px solid var(--line);border-radius:11px;background:var(--panel);color:var(--text);font:inherit;font-size:12px;font-weight:700;text-align:left;cursor:pointer;transition:border-color .16s ease,background .16s ease,box-shadow .16s ease} .kt-status-trigger:hover{background:var(--panel-2);border-color:color-mix(in srgb,var(--kt-view-accent,#657383) 24%,var(--line))} .kt-status-picker.open .kt-status-trigger,.kt-status-trigger:focus-visible{outline:none;border-color:color-mix(in srgb,var(--kt-view-accent,#657383) 54%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--kt-view-accent,#657383) 10%,transparent)} .kt-status-trigger:disabled{opacity:.58;cursor:not-allowed} .kt-status-trigger-icon,.kt-status-option-icon{display:grid;place-items:center;flex:0 0 auto} .kt-status-icon{width:30px;height:30px;min-width:30px;border-radius:9px;display:grid;place-items:center;color:var(--kt-view-accent,#657383);background:color-mix(in srgb,var(--kt-view-accent,#657383) 9%,var(--panel-2));border:1px solid color-mix(in srgb,var(--kt-view-accent,#657383) 10%,var(--line))} .kt-status-icon svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .kt-status-icon-paid,.kt-status-icon-linked,.kt-status-icon-refunded{color:#337768;background:color-mix(in srgb,#337768 9%,var(--panel-2));border-color:color-mix(in srgb,#337768 13%,var(--line))} .kt-status-icon-open{color:#94723a;background:color-mix(in srgb,#94723a 9%,var(--panel-2));border-color:color-mix(in srgb,#94723a 13%,var(--line))} .kt-status-icon-overdue,.kt-status-icon-cancelled,.kt-status-icon-unlinked{color:#a45555;background:color-mix(in srgb,#a45555 9%,var(--panel-2));border-color:color-mix(in srgb,#a45555 13%,var(--line))} .kt-status-icon-all{color:#627387;background:color-mix(in srgb,#627387 9%,var(--panel-2));border-color:color-mix(in srgb,#627387 13%,var(--line))} .kt-status-trigger-label{min-width:0;flex:1 1 auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kt-status-trigger-chevron{width:17px;height:17px;display:grid;place-items:center;color:var(--muted);flex:0 0 auto;transition:transform .15s ease} .kt-status-trigger-chevron svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .kt-status-picker.open .kt-status-trigger-chevron{transform:rotate(180deg)} .kt-status-menu{position:fixed;z-index:10090;overflow:auto;padding:7px;background:var(--panel);border:1px solid var(--line);border-radius:15px;box-shadow:0 18px 52px rgba(25,32,45,.16)} body.dark .kt-status-menu{box-shadow:0 20px 60px rgba(0,0,0,.42)} .kt-status-option{width:100%;min-height:45px;display:flex;align-items:center;gap:10px;padding:6px 9px;border:0;border-radius:10px;background:transparent;color:var(--text);font:inherit;font-size:12px;font-weight:700;text-align:left;cursor:pointer} .kt-status-option:hover,.kt-status-option:focus-visible{background:color-mix(in srgb,var(--kt-view-accent,#657383) 7%,var(--panel-2));outline:none} .kt-status-option.selected{background:color-mix(in srgb,var(--kt-view-accent,#657383) 10%,var(--panel-2))} .kt-status-option:disabled{opacity:.45;cursor:not-allowed} .kt-status-option .kt-status-icon{width:31px;height:31px;min-width:31px} .kt-status-option-label{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .kt-status-option-check{width:20px;height:20px;display:grid;place-items:center;color:var(--kt-view-accent,#657383)} .kt-status-option-check svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round} .filter-panel .kt-status-picker,.filter-set .kt-status-picker{min-width:145px;width:auto;flex:0 1 auto} .select-filter>.kt-status-picker,.platform-report-controls label>.kt-status-picker,.form-grid label>.kt-status-picker{width:100%;min-width:0} .platform-report-controls .kt-status-trigger{height:46px;border-radius:11px;background:var(--panel-2)} @media(max-width:700px){.kt-status-picker{min-width:0;width:100%}.kt-status-menu{border-radius:13px}.kt-status-option{min-height:44px}.filter-panel .kt-status-picker,.filter-set .kt-status-picker{width:100%;min-width:0}} /* v68.48 · Auszahlungszwecke spiegeln die vorhandene Einnahmen-Iconsprache. */ .expense-purpose-logo-normal_expense{color:#566477;background:rgba(86,100,119,.09)} .expense-purpose-logo-tax_payment{color:#3569b3;background:rgba(53,105,179,.09)} .expense-purpose-logo-customer_refund{color:#8a5b35;background:rgba(138,91,53,.10)} .expense-purpose-logo-customer_vat_refund{color:#6f5aa8;background:rgba(111,90,168,.10)} /* ========================================================= v68.50 · Kontobewegungen – Beträge/Aktionen + Metadaten sauber trennen --------------------------------------------------------- Nach den neuen Button-Icons waren die beiden Aktionsbuttons breiter als die alte feste 154-px-Aktionsspur. Dadurch liefen sie nach links in den Betrag hinein und schnitten z. B. "− 17,00 €" sichtbar ab. Zusätzlich lagen Zahlungsart und Beleg-/Rechnungsnummer optisch zu eng aufeinander. Die Zeile reserviert jetzt den echten Platz der Aktionen und stapelt die Metadaten mit bewusstem Abstand. ========================================================= */ .bank-movements-list .tx-main{ display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:center; min-width:0!important; } .bank-movements-list .tx-main>strong{ width:100%; min-width:0; } .bank-movements-list .tx-main>span:not(.payment-method-badge):not(.reference-badge){ width:100%; } .bank-movements-list .tx-main>.payment-method-badge.compact{ margin:8px 0 0!important; max-width:100%!important; } .bank-movements-list .tx-main>.reference-badge{ display:inline-flex!important; margin:7px 0 0!important; max-width:100%!important; overflow:hidden; text-overflow:ellipsis; } .bank-movements-list .tx-main>.payment-method-badge.compact + .reference-badge{ margin-top:7px!important; } .bank-movements-list .tx-category, .bank-movements-list .tx-date, .bank-movements-list .bank-row-end{ min-width:0; } .bank-movements-list .tx-amount{ font-variant-numeric:tabular-nums; overflow:visible!important; text-overflow:clip!important; } /* Breiter Desktop: letzte Spalte richtet sich nach dem tatsächlichen Platz von Betrag + Icon-Buttons statt nach der alten festen Buttonbreite. */ @media(min-width:1281px){ .banking-list.bank-movements-list .statement-item{ grid-template-columns: 42px minmax(230px,1.55fr) minmax(175px,.9fr) minmax(108px,auto) minmax(360px,max-content)!important; gap:16px!important; align-items:center!important; padding-right:20px!important; } .bank-movements-list .bank-row-end{ display:flex!important; flex-direction:row!important; flex-wrap:nowrap!important; align-items:center!important; justify-content:flex-end!important; gap:12px!important; min-width:360px!important; width:auto!important; overflow:visible!important; } .bank-movements-list .bank-row-end .tx-amount{ flex:0 0 auto!important; min-width:118px!important; width:auto!important; padding-right:2px; margin:0!important; text-align:right!important; white-space:nowrap!important; } .bank-movements-list .bank-row-end .ledger-actions{ display:flex!important; flex:0 0 auto!important; width:auto!important; min-width:0!important; max-width:none!important; align-items:center!important; justify-content:flex-end!important; flex-wrap:nowrap!important; gap:8px!important; margin:0!important; overflow:visible!important; } .bank-movements-list .bank-row-end .ledger-actions .tiny-btn{ flex:0 0 auto!important; min-width:max-content; white-space:nowrap!important; } } /* Mittlere Desktopbreite: nicht quetschen. Betrag und Aktionen bekommen eine eigene volle Zeile, während Kategorie/Datum sauber darunter stehen. */ @media(min-width:901px) and (max-width:1280px){ .banking-list.bank-movements-list .statement-item{ grid-template-columns:38px minmax(0,1fr) minmax(110px,auto)!important; gap:8px 14px!important; align-items:start!important; padding:15px 16px!important; } .bank-movements-list .statement-item>.tx-icon{grid-column:1;grid-row:1} .bank-movements-list .statement-item>.tx-main{grid-column:2;grid-row:1} .bank-movements-list .statement-item>.tx-category{ grid-column:2;grid-row:2;display:grid!important;margin-top:4px; } .bank-movements-list .statement-item>.tx-date{ grid-column:3;grid-row:2;display:flex!important;justify-self:end; flex-direction:column;align-items:flex-end;gap:2px;text-align:right; white-space:nowrap; } .bank-movements-list .statement-item>.bank-row-end{ grid-column:2/span 2!important; grid-row:3!important; display:flex!important; flex-direction:row!important; align-items:center!important; justify-content:space-between!important; gap:12px!important; width:100%!important; min-width:0!important; padding-top:10px; margin-top:2px; border-top:1px solid color-mix(in srgb,var(--line) 78%,transparent); } .bank-movements-list .bank-row-end .tx-amount{ flex:0 0 auto!important; min-width:110px!important; text-align:left!important; white-space:nowrap!important; } .bank-movements-list .bank-row-end .ledger-actions{ display:flex!important; flex:0 0 auto!important; width:auto!important; min-width:0!important; max-width:none!important; gap:8px!important; flex-wrap:nowrap!important; overflow:visible!important; } } /* Handy: Buttons dürfen bei sehr schmalen Breiten umbrechen, ohne den Betrag zu überdecken oder aus der Karte zu laufen. */ @media(max-width:560px){ .bank-movements-list .bank-row-end{ align-items:flex-start!important; flex-direction:column!important; gap:9px!important; } .bank-movements-list .bank-row-end .ledger-actions{ width:100%!important; flex-wrap:wrap!important; justify-content:flex-start!important; } } /* ================================================================ V68.51 · Einstellungen > Ändern > Rechnungslayout ================================================================ */ .settings-change-card{overflow:hidden}.settings-change-category{display:grid;grid-template-columns:140px minmax(0,520px);gap:16px;align-items:center;padding:4px 0 18px;border-bottom:1px solid var(--line)}.settings-change-category-label{font-size:10px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}.settings-change-choice{display:grid;grid-template-columns:42px 1fr;column-gap:12px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:15px;background:var(--panel-2);color:var(--text);padding:12px 14px}.settings-change-choice>span{grid-row:1/3;width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,#4f76a8 10%,var(--panel));color:#4f76a8}.settings-change-choice svg,.invoice-layout-upload-btn svg,.invoice-layout-history-icon svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.settings-change-choice b{font-size:13px}.settings-change-choice small{font-size:10px;color:var(--muted);margin-top:2px}.invoice-layout-editor{margin-top:20px}.invoice-layout-editor-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(430px,.95fr);gap:20px;align-items:start}.invoice-layout-controls{display:grid;gap:14px}.invoice-layout-block{border:1px solid var(--line);border-radius:16px;background:var(--panel-2);padding:17px}.invoice-layout-block h4,.invoice-layout-preview-head h4,.invoice-layout-history-head h4{margin:4px 0 5px;font-size:15px}.invoice-layout-block p,.invoice-layout-history-head p{margin:0 0 14px;color:var(--muted);font-size:10.5px;line-height:1.55}.invoice-layout-file-row{display:flex;gap:8px;flex-wrap:wrap}.invoice-layout-upload-btn{display:inline-flex;align-items:center;gap:8px;cursor:pointer}.invoice-layout-upload-btn svg{width:17px;height:17px}.invoice-layout-file-name{margin-top:10px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--panel);font-size:10px;font-weight:700;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.invoice-layout-text-fields textarea{width:100%;resize:vertical;min-height:64px;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:10px;padding:10px;outline:none;font:inherit;font-size:12px;line-height:1.45}.invoice-layout-text-fields textarea:focus,.invoice-layout-text-fields input:focus{border-color:color-mix(in srgb,var(--text) 46%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 5%,transparent)}.invoice-layout-savebar{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:12px;align-items:end;border:1px solid var(--line);border-radius:16px;padding:14px 15px;background:var(--panel)}.invoice-layout-savebar label{display:grid;gap:6px;font-size:10px;color:var(--muted);font-weight:750}.invoice-layout-savebar input{height:42px;border:1px solid var(--line);border-radius:10px;background:var(--panel-2);color:var(--text);padding:0 11px}.invoice-layout-savebar>div{display:flex;gap:8px}.invoice-layout-preview-pane{position:sticky;top:88px;border:1px solid var(--line);border-radius:17px;background:var(--panel);padding:14px;box-shadow:var(--shadow)}.invoice-layout-preview-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:11px}.invoice-layout-preview-frame-wrap{height:min(720px,72vh);border:1px solid var(--line);border-radius:12px;overflow:hidden;background:#e9ebee}.invoice-layout-preview-frame-wrap iframe{width:100%;height:100%;border:0;background:#fff}.invoice-layout-history{margin-top:22px;border-top:1px solid var(--line);padding-top:20px}.invoice-layout-history-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:12px}.invoice-layout-history-head p{margin-bottom:0}.invoice-layout-history-list{display:grid;gap:8px}.invoice-layout-history-row{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:11px;align-items:center;border:1px solid var(--line);border-radius:13px;padding:10px 11px;background:var(--panel)}.invoice-layout-history-row.active{border-color:color-mix(in srgb,var(--good) 35%,var(--line));background:color-mix(in srgb,var(--good) 5%,var(--panel))}.invoice-layout-history-icon{width:38px;height:38px;border-radius:10px;background:var(--panel-2);display:grid;place-items:center;color:#52667f}.invoice-layout-history-row>div:nth-child(2){display:grid;gap:2px;min-width:0}.invoice-layout-history-row strong{font-size:11.5px}.invoice-layout-history-row small{font-size:9.5px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.invoice-layout-history-actions{display:flex;gap:7px}.invoice-layout-history-actions .secondary-btn{padding:8px 10px;font-size:10px}.invoice-layout-history-empty{padding:18px;border:1px dashed var(--line);border-radius:13px;color:var(--muted);font-size:10.5px;text-align:center;background:var(--panel-2)} @media(max-width:1100px){.invoice-layout-editor-grid{grid-template-columns:1fr}.invoice-layout-preview-pane{position:static}.invoice-layout-preview-frame-wrap{height:620px}}@media(max-width:720px){.settings-change-category{grid-template-columns:1fr}.invoice-layout-savebar{grid-template-columns:1fr}.invoice-layout-savebar>div{display:grid;grid-template-columns:1fr}.invoice-layout-history-head{flex-direction:column}.invoice-layout-history-row{grid-template-columns:34px 1fr}.invoice-layout-history-actions{grid-column:1/-1}.invoice-layout-history-actions button{flex:1}.invoice-layout-preview-frame-wrap{height:520px}} /* ================================================================ V68.52 · Einstellungen: Darstellung & Vorlage / PDF-Reports Vorlage ================================================================ */ .settings-template-hub{margin-top:16px;overflow:hidden}.settings-template-buttons{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.settings-template-button{display:grid;grid-template-columns:46px minmax(0,1fr) 18px;gap:13px;align-items:center;text-align:left;border:1px solid var(--line);border-radius:16px;background:var(--panel-2);color:var(--text);padding:14px 15px;cursor:pointer;transition:.16s ease}.settings-template-button:hover{transform:translateY(-1px);border-color:color-mix(in srgb,var(--text) 18%,var(--line));background:color-mix(in srgb,var(--panel-2) 94%,var(--text) 2%)}.settings-template-button.active{border-color:color-mix(in srgb,#4f76a8 36%,var(--line));background:color-mix(in srgb,#4f76a8 6%,var(--panel))}.settings-template-button>span{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;background:color-mix(in srgb,#4f76a8 10%,var(--panel));color:#4f76a8}.settings-template-button svg,.layout-pdf-dropzone svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}.settings-template-button>div{display:grid;gap:3px;min-width:0}.settings-template-button b{font-size:13px}.settings-template-button small{font-size:10px;color:var(--muted);line-height:1.45}.settings-template-button>i{font-style:normal;font-size:25px;color:var(--muted);transition:.16s ease}.settings-template-button.active>i{transform:rotate(90deg);color:#4f76a8}.settings-template-editor-card{margin-top:14px}.layout-pdf-dropzone{min-height:132px;border:1.5px dashed color-mix(in srgb,var(--text) 22%,var(--line));border-radius:15px;background:color-mix(in srgb,var(--panel) 72%,transparent);display:grid;place-items:center;align-content:center;text-align:center;gap:5px;padding:18px;margin:12px 0;cursor:pointer;transition:.16s ease}.layout-pdf-dropzone:hover,.layout-pdf-dropzone.dragover{border-color:#4f76a8;background:color-mix(in srgb,#4f76a8 6%,var(--panel));transform:translateY(-1px)}.layout-pdf-dropicon{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;background:color-mix(in srgb,#4f76a8 10%,var(--panel));color:#4f76a8;margin-bottom:2px}.layout-pdf-dropzone strong{font-size:12px}.layout-pdf-dropzone small{font-size:9.5px;color:var(--muted)} @media(max-width:780px){.settings-template-buttons{grid-template-columns:1fr}.settings-template-button{grid-template-columns:42px minmax(0,1fr) 16px}.settings-template-button>span{width:42px;height:42px}} /* ================================================================ V68.53 · Vorlagen-Center: optionale Schriftgrößen & Textfarbe ================================================================ */ .layout-style-toggle{display:flex!important;align-items:center;gap:11px;margin:12px 0 14px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel);cursor:pointer;color:var(--text)!important} .layout-style-toggle>input{width:18px;height:18px;accent-color:#4f76a8;flex:0 0 auto} .layout-style-toggle>span{display:grid;gap:2px} .layout-style-toggle b{font-size:11.5px;color:var(--text)} .layout-style-toggle small{font-size:9.5px;color:var(--muted);font-weight:500} .layout-style-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px} .layout-style-grid>label{display:grid;gap:6px;font-size:10px;color:var(--muted);font-weight:750} .layout-style-grid>label>span{font-size:8.5px;font-weight:650;color:var(--muted)} .layout-style-grid input[type="number"]{height:40px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);padding:0 10px;outline:none} .layout-style-grid input[type="number"]:focus{border-color:color-mix(in srgb,var(--text) 46%,var(--line));box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 5%,transparent)} .layout-color-field>div{display:grid;grid-template-columns:48px minmax(0,1fr);gap:8px;align-items:center} .layout-color-field input[type="color"]{width:48px;height:40px;border:1px solid var(--line);border-radius:10px;background:var(--panel);padding:4px;cursor:pointer} .layout-color-field code{height:40px;display:flex;align-items:center;padding:0 10px;border:1px solid var(--line);border-radius:10px;background:var(--panel);color:var(--text);font:700 10px ui-monospace,SFMono-Regular,Menlo,monospace;text-transform:uppercase} @media(max-width:640px){.layout-style-grid{grid-template-columns:1fr}} /* ================================================================ V68.54 · PDF-Reports: aktuelle Vorlage immer sichtbar ================================================================ */ .report-layout-preview-pane .invoice-layout-preview-head p{margin:4px 0 0;color:var(--muted);font-size:9.5px;line-height:1.45} .report-layout-visual-preview{border:1px solid var(--line);border-radius:13px;background:#e8ebef;padding:14px;overflow:auto} .report-current-preview{min-width:0;color:var(--report-preview-color,#11151a)} .report-current-preview-meta{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px} .report-current-preview-meta small{font-size:9px;color:#66707b;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:64%} .report-current-preview-sheet{width:min(100%,520px);aspect-ratio:210/297;margin:0 auto;background:#fff;border:1px solid #d8dde3;border-radius:3px;box-shadow:0 12px 28px rgba(25,33,45,.12);padding:7.2% 7.6% 6.2%;display:flex;flex-direction:column;color:var(--report-preview-color,#11151a);font-family:Inter,ui-sans-serif,system-ui,"Segoe UI",sans-serif;overflow:hidden} .report-preview-brand-row,.report-preview-title-row,.report-preview-company,.report-preview-total,.report-preview-footer{display:flex;justify-content:space-between;gap:16px} .report-preview-brand-row{align-items:center;font-size:var(--report-preview-small,7px);letter-spacing:.12em;font-weight:800}.report-preview-brand-row b{font-size:calc(var(--report-preview-body,8px) * 1.55);letter-spacing:-.02em} .report-preview-title-row{align-items:flex-start;margin-top:7.5%}.report-preview-title-row h5{margin:0;font-size:var(--report-preview-title,20px);letter-spacing:-.045em;line-height:1}.report-preview-title-row p{margin:5px 0 0;font-size:var(--report-preview-body,8px);opacity:.68}.report-preview-title-row>div:last-child{text-align:right}.report-preview-title-row strong{display:block;font-size:calc(var(--report-preview-body,8px) * 1.1)}.report-preview-title-row small{display:block;margin-top:4px;font-size:var(--report-preview-small,7px);opacity:.6} .report-preview-rule{height:1px;background:currentColor;opacity:.8;margin:5.5% 0 4.5%}.report-preview-company{align-items:flex-start;margin-bottom:5%}.report-preview-company>div{display:grid;gap:3px}.report-preview-company b{font-size:calc(var(--report-preview-body,8px) * 1.12)}.report-preview-company span{font-size:var(--report-preview-small,7px);opacity:.65}.report-preview-company>div:last-child{text-align:right}.report-preview-company strong{font-size:calc(var(--report-preview-body,8px) * 1.45)} .report-preview-table{display:grid}.report-preview-tr{display:grid;grid-template-columns:74px minmax(0,1.55fr) minmax(68px,.75fr) 76px;gap:8px;align-items:center;padding:8px 0;border-bottom:1px solid #e5e8eb;font-size:var(--report-preview-small,7px)}.report-preview-tr.head{padding:5px 0;border-bottom-color:currentColor;font-weight:800;text-transform:uppercase;letter-spacing:.06em;opacity:.72}.report-preview-tr>span:last-child{text-align:right;font-weight:750}.report-preview-tr>span:nth-child(2){display:grid;gap:2px;min-width:0}.report-preview-tr b{font-size:var(--report-preview-body,8px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.report-preview-tr small{font-size:calc(var(--report-preview-small,7px) * .9);opacity:.55;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .report-preview-total{margin-top:auto;padding-top:4%;border-top:1px solid currentColor;align-items:center;font-size:var(--report-preview-body,8px);font-weight:750}.report-preview-total b{font-size:calc(var(--report-preview-body,8px) * 1.22)}.report-preview-footer{margin-top:5%;padding-top:3%;border-top:1px solid #e2e5e8;font-size:calc(var(--report-preview-small,7px) * .9);opacity:.58} .report-layout-pdf-preview-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:14px 0 8px}.report-layout-pdf-preview-head h5{margin:3px 0 0;font-size:12px}.report-layout-pdf-preview-head .secondary-btn{padding:8px 10px;font-size:9.5px}.report-layout-pdf-frame{height:min(560px,56vh)} @media(max-width:720px){.report-layout-visual-preview{padding:9px}.report-current-preview-meta{align-items:flex-start;flex-direction:column}.report-current-preview-meta small{max-width:100%;text-align:left}.report-current-preview-sheet{width:100%;padding:6.5%}.report-preview-tr{grid-template-columns:58px minmax(0,1fr) 58px 66px;gap:5px}.report-layout-pdf-frame{height:430px}} /* V69.0 · Business Suite: Prüfcenter, Lieferanten, OPOS, AfA, DATEV, E-Rechnung, Wiederkehrend */ .v69-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}.v69-kpis article{padding:18px}.v69-kpis span{display:block;font-size:10px;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}.v69-kpis strong{display:block;font-size:22px;margin:9px 0 4px;letter-spacing:-.03em}.v69-kpis small{font-size:10px;color:var(--muted)}.v69-kpis article.danger{border-color:color-mix(in srgb,var(--bad) 28%,var(--line))}.v69-kpis article.warning{border-color:color-mix(in srgb,var(--warn) 28%,var(--line))} .v69-two-col{display:grid;grid-template-columns:1fr 1fr;gap:16px}.v69-form-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.v69-form-grid label,.v69-inline-controls label{display:grid;gap:6px;font-size:10.5px;color:var(--muted);font-weight:700}.v69-form-grid input,.v69-form-grid select,.v69-inline-controls input,.v69-inline-controls select{height:40px;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;padding:0 11px;outline:none}.v69-inline-controls{display:flex;align-items:end;gap:10px;flex-wrap:wrap}.v69-inline-controls label{min-width:150px}.v69-review-hero{padding:22px;display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.v69-review-hero h2{margin:7px 0 3px;font-size:30px;letter-spacing:-.04em}.v69-review-hero p{margin:0;color:var(--muted);font-size:12px}.v69-review-ring{--p:100;width:88px;height:88px;border-radius:50%;background:conic-gradient(var(--text) calc(var(--p)*1%),var(--panel-2) 0);display:grid;place-items:center;position:relative}.v69-review-ring:after{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--panel)}.v69-review-ring strong{z-index:1;font-size:15px}.v69-findings{display:grid}.v69-finding{display:grid;grid-template-columns:34px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--line)}.v69-finding:last-child{border-bottom:0}.v69-finding-icon{width:28px;height:28px;border-radius:8px;background:var(--panel-2);display:grid;place-items:center;font-weight:900}.v69-finding.critical .v69-finding-icon{color:var(--bad);background:color-mix(in srgb,var(--bad) 10%,transparent)}.v69-finding.warning .v69-finding-icon{color:var(--warn);background:color-mix(in srgb,var(--warn) 10%,transparent)}.v69-finding div strong,.v69-finding div small{display:block}.v69-finding div small{color:var(--muted);margin-top:3px;font-size:10.5px}.v69-list{display:grid;max-height:520px;overflow:auto}.v69-list>div{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:11px 0;border-bottom:1px solid var(--line)}.v69-list>div:last-child{border-bottom:0}.v69-list span b,.v69-list span small{display:block}.v69-list span small{color:var(--muted);font-size:10px;margin-top:3px} @media(max-width:1100px){.v69-kpis{grid-template-columns:repeat(2,1fr)}.v69-form-grid{grid-template-columns:repeat(2,1fr)}.v69-two-col{grid-template-columns:1fr}}@media(max-width:640px){.v69-kpis,.v69-form-grid{grid-template-columns:1fr}.v69-finding{grid-template-columns:32px 1fr}.v69-finding button{grid-column:2}.v69-review-ring{width:72px;height:72px}.v69-inline-controls{display:grid;grid-template-columns:1fr;width:100%}.v69-inline-controls label{min-width:0}.v69-list>div{grid-template-columns:1fr auto}.v69-list>div button{grid-column:1/-1}} .kt-readonly .primary-btn:not([onclick*=download]):not([onclick*=export]){opacity:.72}.kt-readonly .kt-users-heading:after{content:' · Rechte serverseitig geschützt';font-size:10px;color:var(--muted)} .v69-close-check-card{margin-bottom:16px}.v69-close-checks{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}.v69-close-check{border:1px solid var(--line);background:var(--panel-2);color:var(--text);border-radius:12px;padding:13px;display:flex;gap:10px;align-items:center;text-align:left;cursor:pointer}.v69-close-check>span{width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:var(--panel);font-weight:800}.v69-close-check.ok>span{color:var(--good)}.v69-close-check.warn>span{color:var(--warn)}.v69-close-check strong,.v69-close-check small{display:block}.v69-close-check small{color:var(--muted);margin-top:3px;font-size:10px}@media(max-width:900px){.v69-close-checks{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.v69-close-checks{grid-template-columns:1fr}} /* ================================================================ V69.1 · Ratenzahlung / Teilzahlung bei Einnahmen ================================================================ */ .installment-sale-fields{ grid-column:1/-1;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px; padding:15px;border:1px solid var(--line);border-radius:15px;background:var(--surface,#fff); } .installment-sale-head h4{margin:4px 0 4px;font-size:15px;letter-spacing:-.015em} .installment-sale-head p{margin:0;color:var(--muted);font-size:11px;line-height:1.5} .installment-preview{padding:14px 15px;border:1px solid var(--line);border-radius:13px;background:rgba(59,130,246,.045);display:flex;flex-direction:column;gap:4px} .installment-preview strong{font-size:13px}.installment-preview span{font-size:11.5px;color:var(--muted);line-height:1.5}.installment-preview.ready{background:rgba(16,185,129,.055)}.installment-preview.warning{background:rgba(245,158,11,.08);border-color:color-mix(in srgb,var(--warn) 28%,var(--line))} .purpose-icon-installment{color:#426a9c;background:rgba(66,106,156,.10)} .income-purpose-badge.installment{background:rgba(66,106,156,.11)} @media(max-width:760px){.installment-sale-fields{grid-template-columns:1fr}.installment-sale-fields>*{grid-column:1!important}} .installment-detail-history{display:grid;gap:7px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)} .installment-detail-history>div{display:flex;align-items:center;justify-content:space-between;gap:14px;font-size:11px}.installment-detail-history span{color:var(--muted)} /* V69.2 · Folgeraten: nur noch die neue Zahlung erfassen */ .installment-sale-fields.is-continuation{border-color:color-mix(in srgb,var(--text) 10%,var(--line));background:color-mix(in srgb,var(--panel-2) 72%,transparent)} .installment-sale-fields.is-continuation .installment-sale-head p:after{content:" · Verkaufs-, Bestands- und Einkaufspreisdaten werden aus der ersten Zahlung übernommen und nicht erneut gebucht.";font-weight:650;color:var(--text)} .installment-preview small{display:block;margin-top:6px;color:var(--muted);font-size:10.5px;line-height:1.45} /* v69.8 · Monatliche Einstellungen innerhalb der EINEN Ausgabenkarte */ .expense-recurring-fields{ margin-top:4px; padding:16px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); } /* In v69.8 sitzt die Wiederholungslogik innerhalb von „Was ist diese Ausgabe?“ und erscheint nicht mehr als zweiter Ausgaben-Block. */ .expense-purpose-fields .expense-recurring-inline{ margin-top:2px; padding:12px 0 0; border:0; border-top:1px solid var(--line); border-radius:0; background:transparent; } .expense-recurring-head{margin-bottom:12px} .expense-recurring-grid{ display:grid; grid-template-columns:1fr 1fr; gap:12px; align-items:end; } .expense-recurring-grid>label{display:grid;gap:6px} .expense-recurring-select{width:100%} .expense-recurring-preset-logo{ width:30px; height:30px; display:grid; place-items:center; border-radius:9px; background:var(--panel-2); border:1px solid var(--line); color:var(--text); flex:0 0 30px; } .expense-recurring-preset-svg{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; } .expense-recurring-toggle{ margin:0; min-height:66px; align-self:stretch; } .expense-recurring-toggle-icon{ color:var(--text); background:var(--panel); } .expense-recurring-preview{ min-height:66px; border:1px solid var(--line); border-radius:12px; background:var(--panel); padding:12px 14px; display:flex; flex-direction:column; justify-content:center; gap:4px; } .expense-recurring-preview strong{font-size:12px;color:var(--text)} .expense-recurring-preview span{font-size:10px;line-height:1.5;color:var(--muted)} .expense-recurring-preview.ready{ border-color:color-mix(in srgb,var(--good) 38%,var(--line)); background:color-mix(in srgb,var(--good) 5%,var(--panel)); } .expense-recurring-preview.ready strong{color:var(--good)} @media(max-width:640px){ .expense-recurring-grid{grid-template-columns:1fr} .expense-recurring-grid .span-2{grid-column:auto} } /* ====================================================================== v69.10 · Ausgaben-Dialog – eigenständiges, ruhigeres Layout Nur aktiv, wenn im Buchungsdialog "Ausgabe" gewählt ist. Einnahmen, Einlagen, Entnahmen und Umbuchungen bleiben unverändert. ====================================================================== */ #modalBackdrop.kt-expense-layout{ background:rgba(15,23,42,.38); backdrop-filter:blur(6px); } #modalBackdrop.kt-expense-layout > .modal{ width:min(1060px,calc(100vw - 42px))!important; max-height:min(920px,calc(100dvh - 26px))!important; padding:0 26px 24px!important; border-radius:26px!important; border-color:color-mix(in srgb,var(--line) 82%,transparent)!important; background:var(--panel)!important; box-shadow:0 34px 90px -38px rgba(15,23,42,.48)!important; overflow-y:auto!important; overflow-x:hidden!important; } #modalBackdrop.kt-expense-layout > .modal > .modal-head{ margin:0 -26px 18px!important; padding:23px 26px 17px!important; background:color-mix(in srgb,var(--panel) 96%,var(--panel-2))!important; border-bottom:1px solid color-mix(in srgb,var(--line) 82%,transparent)!important; backdrop-filter:blur(14px); z-index:30; } #modalBackdrop.kt-expense-layout > .modal > .modal-head::before{ background:color-mix(in srgb,var(--panel) 96%,var(--panel-2))!important; } #modalBackdrop.kt-expense-layout .modal-head .eyebrow{ font-size:9px; letter-spacing:.16em; color:var(--muted); } #modalBackdrop.kt-expense-layout .modal-head h2{ margin:5px 0 0!important; font-size:24px!important; line-height:1.08!important; letter-spacing:-.035em; } #modalBackdrop.kt-expense-layout .modal-head .icon-btn{ width:40px; height:40px; border-radius:13px; background:var(--panel); box-shadow:var(--soft-1); } /* Kompakter 12-Spalten-Aufbau statt langer Zweispalten-Liste. */ #modalBackdrop.kt-expense-layout #transactionForm.form-grid{ display:grid!important; grid-template-columns:repeat(12,minmax(0,1fr))!important; column-gap:12px!important; row-gap:12px!important; align-items:start!important; } #modalBackdrop.kt-expense-layout #transactionForm > *{min-width:0} #modalBackdrop.kt-expense-layout #transactionForm > label{ gap:7px; font-size:10px; letter-spacing:.01em; color:var(--muted); } #modalBackdrop.kt-expense-layout #transactionForm input, #modalBackdrop.kt-expense-layout #transactionForm select, #modalBackdrop.kt-expense-layout #transactionForm .payment-method-trigger, #modalBackdrop.kt-expense-layout #transactionForm .type-method-trigger{ min-height:46px; height:46px; border-radius:12px!important; border-color:color-mix(in srgb,var(--line) 90%,transparent)!important; background:var(--panel)!important; box-shadow:0 1px 0 rgba(15,23,42,.015); } #modalBackdrop.kt-expense-layout #transactionForm input:focus, #modalBackdrop.kt-expense-layout #transactionForm select:focus, #modalBackdrop.kt-expense-layout #transactionForm .payment-method-trigger:focus-visible, #modalBackdrop.kt-expense-layout #transactionForm .type-method-trigger:focus-visible{ outline:none!important; border-color:color-mix(in srgb,var(--text) 34%,var(--line))!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 6%,transparent)!important; } /* Kopfzeile: Art, Datum und Status auf einer Linie. */ #modalBackdrop.kt-expense-layout #transactionForm > .type-select-field{ grid-column:1 / span 4!important; order:10; } #modalBackdrop.kt-expense-layout #transactionForm > .type-select-field + label{ grid-column:5 / span 4!important; order:10; } #modalBackdrop.kt-expense-layout #transactionStatusField{ grid-column:9 / span 4!important; order:10; } /* Die wichtigste Entscheidung steht direkt danach als ruhige Hauptkarte. */ #modalBackdrop.kt-expense-layout #expensePurposeFields{ grid-column:1 / -1!important; order:20; margin:2px 0 4px!important; padding:17px 18px 16px!important; border:1px solid color-mix(in srgb,var(--line) 86%,transparent)!important; border-radius:17px!important; background:color-mix(in srgb,var(--panel-2) 55%,var(--panel))!important; } #modalBackdrop.kt-expense-layout #expensePurposeFields > .sale-cost-head{ display:grid; gap:3px; margin-bottom:12px; } #modalBackdrop.kt-expense-layout #expensePurposeFields > .sale-cost-head .eyebrow{display:none} #modalBackdrop.kt-expense-layout #expensePurposeFields > .sale-cost-head h3{ margin:0!important; font-size:14px; letter-spacing:-.015em; } #modalBackdrop.kt-expense-layout #expensePurposeFields > .sale-cost-head p{ margin:0!important; max-width:780px; font-size:10.5px; line-height:1.45; color:var(--muted); } #modalBackdrop.kt-expense-layout #expensePurposeFields .income-purpose-grid{ gap:10px; } #modalBackdrop.kt-expense-layout #expensePurposeFields .field-hint{ min-height:0; margin-top:2px; font-size:9.5px; line-height:1.4; } /* Kerninformationen folgen kompakt und logisch. */ #modalBackdrop.kt-expense-layout #transactionDescriptionField{ grid-column:1 / span 8!important; order:30; } #modalBackdrop.kt-expense-layout #transactionPartnerField{ grid-column:9 / span 4!important; order:30; } #modalBackdrop.kt-expense-layout #transactionCategoryField{ display:none!important; } #modalBackdrop.kt-expense-layout #transactionAmountField{ grid-column:1 / span 6!important; order:40; } #modalBackdrop.kt-expense-layout #transactionTaxField{ grid-column:7 / span 3!important; order:40; } #modalBackdrop.kt-expense-layout #transactionBusinessField{ grid-column:10 / span 3!important; order:40; } #modalBackdrop.kt-expense-layout #transactionAmountField .field-hint{ min-height:0; margin-top:0; font-size:9px; } /* Zahlungsart und Nachweise als klare Unterkarten, nicht als lose Formularzeilen. */ #modalBackdrop.kt-expense-layout #expensePaymentField{ grid-column:1 / span 4!important; order:50; align-self:start; margin:4px 0 0!important; padding:16px!important; border-radius:17px!important; border:1px solid color-mix(in srgb,var(--line) 86%,transparent)!important; background:color-mix(in srgb,var(--panel-2) 55%,var(--panel))!important; } #modalBackdrop.kt-expense-layout #expensePurchaseFields{ grid-column:5 / -1!important; order:50; margin:4px 0 0!important; padding:16px!important; border-radius:17px!important; border:1px solid color-mix(in srgb,var(--line) 86%,transparent)!important; background:color-mix(in srgb,var(--panel-2) 55%,var(--panel))!important; } #modalBackdrop.kt-expense-layout #expensePaymentField .eyebrow, #modalBackdrop.kt-expense-layout #expensePurchaseFields .eyebrow{display:none} #modalBackdrop.kt-expense-layout #expensePaymentField h3, #modalBackdrop.kt-expense-layout #expensePurchaseFields h3{ margin:0 0 4px!important; font-size:13px; letter-spacing:-.01em; } #modalBackdrop.kt-expense-layout #expensePaymentField p, #modalBackdrop.kt-expense-layout #expensePurchaseFields p{ margin:0 0 12px!important; font-size:10px; line-height:1.45; color:var(--muted); } #modalBackdrop.kt-expense-layout #expensePaymentField .field-hint, #modalBackdrop.kt-expense-layout #expensePurchaseFields .field-hint{ min-height:0; font-size:9px; line-height:1.35; } #modalBackdrop.kt-expense-layout #expensePurchaseFields .expense-purchase-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; } #modalBackdrop.kt-expense-layout #expensePurchaseFields input[type="file"]{ min-height:46px; height:auto; padding:8px 9px; } /* Nicht zur Ausgabenansicht gehörende Bereiche behalten ihre Logik, nehmen aber im Ausgabenmodus keinen Layout-Platz ein. */ #modalBackdrop.kt-expense-layout #transferFields, #modalBackdrop.kt-expense-layout #incomePurposeFields, #modalBackdrop.kt-expense-layout #saleCostFields, #modalBackdrop.kt-expense-layout #incomePlatformField, #modalBackdrop.kt-expense-layout #vintedUsernameField{ order:80; } /* Ruhiger Abschluss: feste Aktionsleiste innerhalb des Dialogs. */ #modalBackdrop.kt-expense-layout #transactionForm > .form-actions{ grid-column:1 / -1!important; order:100; position:sticky; bottom:-24px; z-index:22; margin:8px -26px -24px!important; padding:14px 26px 16px; border-top:1px solid color-mix(in srgb,var(--line) 82%,transparent); background:color-mix(in srgb,var(--panel) 94%,transparent); backdrop-filter:blur(14px); } #modalBackdrop.kt-expense-layout #transactionForm > .form-actions .secondary-btn, #modalBackdrop.kt-expense-layout #transactionForm > .form-actions .primary-btn{ min-width:118px; min-height:42px; border-radius:12px; } body.dark #modalBackdrop.kt-expense-layout > .modal{ box-shadow:0 36px 100px -42px rgba(0,0,0,.86)!important; } @media(max-width:900px){ #modalBackdrop.kt-expense-layout > .modal{ width:min(760px,calc(100vw - 24px))!important; padding-left:18px!important; padding-right:18px!important; } #modalBackdrop.kt-expense-layout > .modal > .modal-head{ margin-left:-18px!important; margin-right:-18px!important; padding-left:18px!important; padding-right:18px!important; } #modalBackdrop.kt-expense-layout #transactionForm.form-grid{ grid-template-columns:repeat(6,minmax(0,1fr))!important; } #modalBackdrop.kt-expense-layout #transactionForm > .type-select-field{grid-column:1 / span 3!important} #modalBackdrop.kt-expense-layout #transactionForm > .type-select-field + label{grid-column:4 / span 3!important} #modalBackdrop.kt-expense-layout #transactionStatusField{grid-column:1 / span 3!important;order:11} #modalBackdrop.kt-expense-layout #expensePurposeFields{grid-column:1 / -1!important} #modalBackdrop.kt-expense-layout #transactionDescriptionField{grid-column:1 / -1!important} #modalBackdrop.kt-expense-layout #transactionPartnerField{grid-column:1 / span 3!important} #modalBackdrop.kt-expense-layout #transactionCategoryField{display:none!important} #modalBackdrop.kt-expense-layout #transactionAmountField{grid-column:1 / span 3!important} #modalBackdrop.kt-expense-layout #transactionTaxField{grid-column:4 / span 1!important} #modalBackdrop.kt-expense-layout #transactionBusinessField{grid-column:5 / span 2!important} #modalBackdrop.kt-expense-layout #expensePaymentField, #modalBackdrop.kt-expense-layout #expensePurchaseFields{grid-column:1 / -1!important} #modalBackdrop.kt-expense-layout #transactionForm > .form-actions{ margin-left:-18px!important;margin-right:-18px!important; padding-left:18px!important;padding-right:18px!important; } } @media(max-width:620px){ #modalBackdrop.kt-expense-layout{padding:0!important} #modalBackdrop.kt-expense-layout > .modal{ width:100%!important; max-height:100dvh!important; min-height:100dvh!important; border-radius:0!important; border-left:0!important; border-right:0!important; padding:0 14px 18px!important; } #modalBackdrop.kt-expense-layout > .modal > .modal-head{ margin:0 -14px 14px!important; padding:calc(16px + env(safe-area-inset-top)) 14px 13px!important; } #modalBackdrop.kt-expense-layout #transactionForm.form-grid{ grid-template-columns:1fr!important; row-gap:11px!important; } #modalBackdrop.kt-expense-layout #transactionForm > .type-select-field, #modalBackdrop.kt-expense-layout #transactionForm > .type-select-field + label, #modalBackdrop.kt-expense-layout #transactionStatusField, #modalBackdrop.kt-expense-layout #expensePurposeFields, #modalBackdrop.kt-expense-layout #transactionDescriptionField, #modalBackdrop.kt-expense-layout #transactionPartnerField, #modalBackdrop.kt-expense-layout #transactionCategoryField, #modalBackdrop.kt-expense-layout #transactionAmountField, #modalBackdrop.kt-expense-layout #transactionTaxField, #modalBackdrop.kt-expense-layout #transactionBusinessField, #modalBackdrop.kt-expense-layout #expensePaymentField, #modalBackdrop.kt-expense-layout #expensePurchaseFields, #modalBackdrop.kt-expense-layout #transactionForm > .form-actions{ grid-column:1!important; } #modalBackdrop.kt-expense-layout #expensePurposeFields, #modalBackdrop.kt-expense-layout #expensePaymentField, #modalBackdrop.kt-expense-layout #expensePurchaseFields{padding:14px!important} #modalBackdrop.kt-expense-layout #expensePurchaseFields .expense-purchase-grid{grid-template-columns:1fr} #modalBackdrop.kt-expense-layout #transactionForm > .form-actions{ bottom:-18px; margin:6px -14px -18px!important; padding:12px 14px calc(12px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:1fr 1fr; } #modalBackdrop.kt-expense-layout #transactionForm > .form-actions button{width:100%} } /* ========================================================= v69.11 · Ausgaben-All-in-One – farbige, semantische Icons Nur die Icons der zentralen Ausgaben-Auswahl werden farblich differenziert. ========================================================= */ #transactionForm .expense-purpose-logo-other_expense{color:#64748b;background:rgba(100,116,139,.11);box-shadow:inset 0 0 0 1px rgba(100,116,139,.10)} #transactionForm .expense-purpose-logo-inventory_purchase{color:#b7791f;background:rgba(183,121,31,.12);box-shadow:inset 0 0 0 1px rgba(183,121,31,.11)} #transactionForm .expense-purpose-logo-shipping{color:#2878b8;background:rgba(40,120,184,.11);box-shadow:inset 0 0 0 1px rgba(40,120,184,.10)} #transactionForm .expense-purpose-logo-marketing{color:#b04b8b;background:rgba(176,75,139,.11);box-shadow:inset 0 0 0 1px rgba(176,75,139,.10)} #transactionForm .expense-purpose-logo-software{color:#5967b5;background:rgba(89,103,181,.11);box-shadow:inset 0 0 0 1px rgba(89,103,181,.10)} #transactionForm .expense-purpose-logo-ai_subscription{color:#7c5cc4;background:rgba(124,92,196,.12);box-shadow:inset 0 0 0 1px rgba(124,92,196,.10)} #transactionForm .expense-purpose-logo-chatgpt{color:#17856f;background:rgba(23,133,111,.12);box-shadow:inset 0 0 0 1px rgba(23,133,111,.10)} #transactionForm .expense-purpose-logo-claude_ai{color:#b9633d;background:rgba(185,99,61,.12);box-shadow:inset 0 0 0 1px rgba(185,99,61,.10)} #transactionForm .expense-purpose-logo-hosting{color:#3478a5;background:rgba(52,120,165,.11);box-shadow:inset 0 0 0 1px rgba(52,120,165,.10)} #transactionForm .expense-purpose-logo-phone_internet{color:#1b8b9d;background:rgba(27,139,157,.11);box-shadow:inset 0 0 0 1px rgba(27,139,157,.10)} #transactionForm .expense-purpose-logo-bank_fees{color:#3f6485;background:rgba(63,100,133,.12);box-shadow:inset 0 0 0 1px rgba(63,100,133,.10)} #transactionForm .expense-purpose-logo-tax_advisor{color:#31806f;background:rgba(49,128,111,.11);box-shadow:inset 0 0 0 1px rgba(49,128,111,.10)} #transactionForm .expense-purpose-logo-rent{color:#9a6b42;background:rgba(154,107,66,.11);box-shadow:inset 0 0 0 1px rgba(154,107,66,.10)} #transactionForm .expense-purpose-logo-insurance{color:#4c7d67;background:rgba(76,125,103,.11);box-shadow:inset 0 0 0 1px rgba(76,125,103,.10)} #transactionForm .expense-purpose-logo-custom_recurring{color:#7659ad;background:rgba(118,89,173,.11);box-shadow:inset 0 0 0 1px rgba(118,89,173,.10)} #transactionForm .expense-purpose-logo-tax_payment{color:#3569b3;background:rgba(53,105,179,.12);box-shadow:inset 0 0 0 1px rgba(53,105,179,.10)} #transactionForm .expense-purpose-logo-customer_refund{color:#b25050;background:rgba(178,80,80,.11);box-shadow:inset 0 0 0 1px rgba(178,80,80,.10)} #transactionForm .expense-purpose-logo-customer_vat_refund{color:#7559b0;background:rgba(117,89,176,.11);box-shadow:inset 0 0 0 1px rgba(117,89,176,.10)} /* Geöffnete Liste und gewähltes Feld behalten dieselbe Farbe; nur die Fläche wird bei Auswahl minimal angehoben, damit die Icons nicht wieder grau wirken. */ #transactionForm .income-purpose-option.is-selected [class*="expense-purpose-logo-"], #transactionForm .income-purpose-trigger [class*="expense-purpose-logo-"]{ background:color-mix(in srgb,currentColor 12%,transparent); } body.dark #transactionForm [class*="expense-purpose-logo-"]{ background:color-mix(in srgb,currentColor 15%,transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb,currentColor 17%,transparent); } /* ====================================================================== v69.12 · Einheitliches Popup-Designsystem Das in „Ausgabe erfassen“ eingefuehrte ruhige Layout ist jetzt der visuelle Standard fuer alle Dialoge. Fachliche Speziallayouts bleiben erhalten; vereinheitlicht werden Shell, Kopf, Controls, Abstaende, Unterkarten, Scrollverhalten und Aktionsleiste. ====================================================================== */ .modal-backdrop{ background:rgba(15,23,42,.38)!important; backdrop-filter:blur(6px)!important; -webkit-backdrop-filter:blur(6px)!important; padding:13px!important; } .modal-backdrop > .modal{ width:min(1060px,calc(100vw - 42px))!important; max-width:none!important; max-height:min(920px,calc(100dvh - 26px))!important; padding:0 26px 24px!important; border:1px solid color-mix(in srgb,var(--line) 82%,transparent)!important; border-radius:26px!important; background:var(--panel)!important; box-shadow:0 34px 90px -38px rgba(15,23,42,.48)!important; overflow-y:auto!important; overflow-x:hidden!important; } .modal-backdrop > .modal > .modal-head{ position:sticky!important; top:0!important; margin:0 -26px 18px!important; padding:23px 26px 17px!important; min-height:82px; align-items:flex-start!important; background:color-mix(in srgb,var(--panel) 96%,var(--panel-2))!important; border-bottom:1px solid color-mix(in srgb,var(--line) 82%,transparent)!important; z-index:40!important; } .modal-backdrop > .modal > .modal-head .eyebrow{ font-size:9px!important; line-height:1.2; letter-spacing:.16em!important; color:var(--muted)!important; } .modal-backdrop > .modal > .modal-head h2{ margin:5px 0 0!important; font-size:24px!important; line-height:1.08!important; letter-spacing:-.035em!important; } .modal-backdrop > .modal > .modal-head .icon-btn, .modal-backdrop > .modal > .modal-head .modal-close{ width:40px!important; height:40px!important; min-width:40px!important; border-radius:13px!important; background:var(--panel)!important; border:1px solid color-mix(in srgb,var(--line) 88%,transparent)!important; box-shadow:var(--soft-1)!important; } /* Kleine Auswahl-/Hilfsdialoge bleiben bewusst kompakt, sehen aber gleich aus. */ #quickCreateBackdrop > .modal{width:min(720px,calc(100vw - 42px))!important} #currentBalanceBackdrop > .modal, #receiptModalBackdrop > .modal, #partnerModalBackdrop > .modal, #inventoryAdjustBackdrop > .modal, #invoiceUploadBackdrop > .modal, #companyCreateBackdrop > .modal{width:min(820px,calc(100vw - 42px))!important} #inventoryPickerBackdrop > .modal, #paymentMatchBackdrop > .modal, #cancellationPickerBackdrop > .modal{width:min(900px,calc(100vw - 42px))!important} #invoiceModalBackdrop > .modal, #documentPreviewBackdrop > .modal{width:min(1120px,calc(100vw - 42px))!important} #transactionDetailBackdrop > .modal, #customerDetailBackdrop > .modal, #inventoryDetailBackdrop > .modal, #ktProfileBackdrop > .modal{width:min(980px,calc(100vw - 42px))!important} /* Einheitliche Formularsprache in jedem Popup. */ .modal-backdrop .form-grid{ column-gap:12px!important; row-gap:12px!important; align-items:start!important; } .modal-backdrop .form-grid > *{min-width:0} .modal-backdrop .form-grid label{ gap:7px!important; font-size:10px!important; line-height:1.35; letter-spacing:.01em; color:var(--muted)!important; } .modal-backdrop .form-grid input:not([type="checkbox"]):not([type="radio"]), .modal-backdrop .form-grid select, .modal-backdrop .form-grid .payment-method-trigger, .modal-backdrop .form-grid .type-method-trigger, .modal-backdrop .form-grid .income-platform-trigger, .modal-backdrop .form-grid .transfer-platform-trigger{ width:100%; min-height:46px!important; border-radius:12px!important; border-color:color-mix(in srgb,var(--line) 90%,transparent)!important; background:var(--panel)!important; box-shadow:0 1px 0 rgba(15,23,42,.015)!important; } .modal-backdrop .form-grid textarea{ width:100%; min-height:92px; border-radius:12px!important; border-color:color-mix(in srgb,var(--line) 90%,transparent)!important; background:var(--panel)!important; } .modal-backdrop .form-grid input:focus, .modal-backdrop .form-grid select:focus, .modal-backdrop .form-grid textarea:focus, .modal-backdrop .form-grid .payment-method-trigger:focus-visible, .modal-backdrop .form-grid .type-method-trigger:focus-visible, .modal-backdrop .form-grid .income-platform-trigger:focus-visible, .modal-backdrop .form-grid .transfer-platform-trigger:focus-visible{ outline:none!important; border-color:color-mix(in srgb,var(--text) 34%,var(--line))!important; box-shadow:0 0 0 3px color-mix(in srgb,var(--text) 6%,transparent)!important; } .modal-backdrop .field-hint{ margin-top:1px; font-size:9.5px!important; line-height:1.42!important; color:var(--muted)!important; } /* Gleiche ruhige Unterkarten in den grossen Workflows. */ #incomePurposeFields, #expensePurposeFields, #saleCostFields, #expensePaymentField, #expensePurchaseFields, #transferFields, #cancellationModalBackdrop .cancellation-summary, #aiReviewBackdrop .ai-review-summary{ border:1px solid color-mix(in srgb,var(--line) 86%,transparent)!important; border-radius:17px!important; background:color-mix(in srgb,var(--panel-2) 55%,var(--panel))!important; box-shadow:none!important; } #incomePurposeFields, #expensePurposeFields, #saleCostFields, #expensePaymentField, #expensePurchaseFields, #transferFields{ padding:16px 18px!important; } #incomePurposeFields .sale-cost-head, #expensePurposeFields .sale-cost-head, #saleCostFields .sale-cost-head, #transferFields .transfer-head{ margin-bottom:12px!important; } #incomePurposeFields .sale-cost-head h3, #expensePurposeFields .sale-cost-head h3, #saleCostFields .sale-cost-head h3, #transferFields .transfer-head h3, #expensePaymentField h3, #expensePurchaseFields h3{ margin:0 0 4px!important; font-size:14px!important; line-height:1.2; letter-spacing:-.015em!important; } #incomePurposeFields .sale-cost-head p, #expensePurposeFields .sale-cost-head p, #saleCostFields .sale-cost-head p, #transferFields .transfer-head p, #expensePaymentField p, #expensePurchaseFields p{ margin:0!important; font-size:10.5px!important; line-height:1.45!important; color:var(--muted)!important; } /* Ein Aktionsbereich an derselben Stelle in jedem Formular. */ .modal-backdrop .form-actions{ position:sticky!important; bottom:-24px!important; z-index:35!important; display:flex!important; justify-content:flex-end!important; gap:9px!important; margin:8px -26px -24px!important; padding:14px 26px 16px!important; border-top:1px solid color-mix(in srgb,var(--line) 78%,transparent)!important; background:color-mix(in srgb,var(--panel) 96%,var(--panel-2))!important; } .modal-backdrop .form-actions .primary-btn, .modal-backdrop .form-actions .secondary-btn{ min-height:44px!important; padding:10px 17px!important; border-radius:12px!important; } /* ---------------------------------------------------------------------- Buchungen: dieselbe kompakte 12-Spalten-Struktur jetzt fuer ALLE Typen. ---------------------------------------------------------------------- */ #modalBackdrop.kt-booking-layout > .modal{ width:min(1060px,calc(100vw - 42px))!important; } #modalBackdrop.kt-booking-layout #transactionForm.form-grid{ display:grid!important; grid-template-columns:repeat(12,minmax(0,1fr))!important; column-gap:12px!important; row-gap:12px!important; } #modalBackdrop.kt-booking-layout #transactionForm > label{grid-column:span 6} #modalBackdrop.kt-booking-layout #transactionForm > .span-2{grid-column:1 / -1!important} #modalBackdrop.kt-booking-layout #transactionForm > .type-select-field{ grid-column:1 / span 4!important; order:10!important; } #modalBackdrop.kt-booking-layout #transactionForm > .type-select-field + label{ grid-column:5 / span 4!important; order:10!important; } #modalBackdrop.kt-booking-layout #transactionStatusField{ grid-column:9 / span 4!important; order:10!important; } #modalBackdrop.kt-booking-layout #incomePurposeFields, #modalBackdrop.kt-booking-layout #expensePurposeFields, #modalBackdrop.kt-booking-layout #transferFields{ grid-column:1 / -1!important; order:20!important; margin:2px 0 4px!important; } #modalBackdrop.kt-booking-layout #transactionDescriptionField{ grid-column:1 / span 8!important; order:30!important; } #modalBackdrop.kt-booking-layout #transactionPartnerField{ grid-column:9 / span 4!important; order:30!important; } #modalBackdrop.kt-booking-layout #transactionAmountField{order:40!important} #modalBackdrop.kt-booking-layout #transactionTaxField{order:40!important} #modalBackdrop.kt-booking-layout #transactionBusinessField{order:40!important} #modalBackdrop.kt-booking-layout #incomePlatformField{order:40!important} #modalBackdrop.kt-booking-layout #vintedUsernameField{order:45!important} #modalBackdrop.kt-booking-layout #expensePaymentField, #modalBackdrop.kt-booking-layout #expensePurchaseFields{order:50!important} #modalBackdrop.kt-booking-layout #saleCostFields{ grid-column:1 / -1!important; order:60!important; margin-top:4px!important; } #modalBackdrop.kt-booking-layout #transactionForm > .form-actions{ grid-column:1 / -1!important; order:100!important; } /* Einnahme: automatisch gesetzte Kategorie nicht als zusaetzliches Feld zeigen. */ #modalBackdrop.kt-booking-income #transactionCategoryField{display:none!important} #modalBackdrop.kt-booking-income #incomePlatformField{grid-column:1 / span 4!important} #modalBackdrop.kt-booking-income #transactionAmountField{grid-column:5 / span 4!important} #modalBackdrop.kt-booking-income #transactionTaxField{grid-column:9 / span 2!important} #modalBackdrop.kt-booking-income #transactionBusinessField{grid-column:11 / span 2!important} #modalBackdrop.kt-booking-income #vintedUsernameField{grid-column:1 / span 4!important} /* Ausgabe: behaelt die bewährte All-in-One-Anordnung. */ #modalBackdrop.kt-booking-expense #transactionCategoryField{display:none!important} #modalBackdrop.kt-booking-expense #transactionAmountField{grid-column:1 / span 6!important} #modalBackdrop.kt-booking-expense #transactionTaxField{grid-column:7 / span 3!important} #modalBackdrop.kt-booking-expense #transactionBusinessField{grid-column:10 / span 3!important} #modalBackdrop.kt-booking-expense #expensePaymentField{grid-column:1 / span 4!important} #modalBackdrop.kt-booking-expense #expensePurchaseFields{grid-column:5 / -1!important} /* Einlage / Entnahme: weniger Felder, deshalb bewusst luftiger. */ #modalBackdrop.kt-booking-deposit #transactionForm > .type-select-field, #modalBackdrop.kt-booking-withdrawal #transactionForm > .type-select-field{ grid-column:1 / span 6!important; } #modalBackdrop.kt-booking-deposit #transactionForm > .type-select-field + label, #modalBackdrop.kt-booking-withdrawal #transactionForm > .type-select-field + label{ grid-column:7 / span 6!important; } #modalBackdrop.kt-booking-deposit #transactionDescriptionField, #modalBackdrop.kt-booking-withdrawal #transactionDescriptionField{grid-column:1 / span 8!important} #modalBackdrop.kt-booking-deposit #transactionPartnerField, #modalBackdrop.kt-booking-withdrawal #transactionPartnerField{grid-column:9 / span 4!important} #modalBackdrop.kt-booking-deposit #transactionAmountField, #modalBackdrop.kt-booking-withdrawal #transactionAmountField{grid-column:1 / span 6!important} /* Umbuchung: Auswahlkarte vollbreit, danach nur Zweck + Betrag. */ #modalBackdrop.kt-booking-transfer #transactionForm > .type-select-field{grid-column:1 / span 6!important} #modalBackdrop.kt-booking-transfer #transactionForm > .type-select-field + label{grid-column:7 / span 6!important} #modalBackdrop.kt-booking-transfer #transactionDescriptionField{grid-column:1 / span 8!important} #modalBackdrop.kt-booking-transfer #transactionAmountField{grid-column:9 / span 4!important} body.dark .modal-backdrop > .modal{ box-shadow:0 34px 90px -42px rgba(0,0,0,.88)!important; } @media(max-width:820px){ .modal-backdrop > .modal{ width:min(100%,calc(100vw - 20px))!important; padding:0 18px 20px!important; } .modal-backdrop > .modal > .modal-head{ margin:0 -18px 16px!important; padding:19px 18px 15px!important; } .modal-backdrop .form-actions{ bottom:-20px!important; margin:8px -18px -20px!important; padding:12px 18px 14px!important; } #modalBackdrop.kt-booking-layout #transactionForm.form-grid{ grid-template-columns:repeat(6,minmax(0,1fr))!important; } #modalBackdrop.kt-booking-layout #transactionForm > .type-select-field{grid-column:1 / span 3!important} #modalBackdrop.kt-booking-layout #transactionForm > .type-select-field + label{grid-column:4 / span 3!important} #modalBackdrop.kt-booking-layout #transactionStatusField{grid-column:1 / span 3!important;order:11!important} #modalBackdrop.kt-booking-layout #incomePurposeFields, #modalBackdrop.kt-booking-layout #expensePurposeFields, #modalBackdrop.kt-booking-layout #transferFields, #modalBackdrop.kt-booking-layout #transactionDescriptionField, #modalBackdrop.kt-booking-layout #saleCostFields{grid-column:1 / -1!important} #modalBackdrop.kt-booking-layout #transactionPartnerField{grid-column:1 / span 3!important} #modalBackdrop.kt-booking-income #incomePlatformField{grid-column:4 / span 3!important} #modalBackdrop.kt-booking-income #transactionAmountField{grid-column:1 / span 3!important} #modalBackdrop.kt-booking-income #transactionTaxField{grid-column:4 / span 1!important} #modalBackdrop.kt-booking-income #transactionBusinessField{grid-column:5 / span 2!important} #modalBackdrop.kt-booking-expense #transactionAmountField{grid-column:1 / span 3!important} #modalBackdrop.kt-booking-expense #transactionTaxField{grid-column:4 / span 1!important} #modalBackdrop.kt-booking-expense #transactionBusinessField{grid-column:5 / span 2!important} #modalBackdrop.kt-booking-expense #expensePaymentField, #modalBackdrop.kt-booking-expense #expensePurchaseFields{grid-column:1 / -1!important} #modalBackdrop.kt-booking-deposit #transactionForm > .type-select-field, #modalBackdrop.kt-booking-withdrawal #transactionForm > .type-select-field, #modalBackdrop.kt-booking-transfer #transactionForm > .type-select-field{grid-column:1 / span 3!important} #modalBackdrop.kt-booking-deposit #transactionForm > .type-select-field + label, #modalBackdrop.kt-booking-withdrawal #transactionForm > .type-select-field + label, #modalBackdrop.kt-booking-transfer #transactionForm > .type-select-field + label{grid-column:4 / span 3!important} #modalBackdrop.kt-booking-deposit #transactionDescriptionField, #modalBackdrop.kt-booking-withdrawal #transactionDescriptionField, #modalBackdrop.kt-booking-transfer #transactionDescriptionField{grid-column:1 / -1!important} #modalBackdrop.kt-booking-deposit #transactionPartnerField, #modalBackdrop.kt-booking-withdrawal #transactionPartnerField{grid-column:1 / span 3!important} #modalBackdrop.kt-booking-deposit #transactionAmountField, #modalBackdrop.kt-booking-withdrawal #transactionAmountField, #modalBackdrop.kt-booking-transfer #transactionAmountField{grid-column:1 / span 3!important} } @media(max-width:620px){ .modal-backdrop{padding:0!important} .modal-backdrop > .modal{ width:100%!important; height:100dvh!important; max-height:100dvh!important; border-radius:0!important; border-left:0!important; border-right:0!important; padding:0 15px 18px!important; } .modal-backdrop > .modal > .modal-head{ margin:0 -15px 14px!important; padding:16px 15px 13px!important; min-height:72px; } .modal-backdrop > .modal > .modal-head h2{font-size:21px!important} .modal-backdrop .form-grid{grid-template-columns:1fr!important} .modal-backdrop .form-grid > *, .modal-backdrop .form-grid .span-2{grid-column:1!important} #modalBackdrop.kt-booking-layout #transactionForm.form-grid{grid-template-columns:1fr!important} #modalBackdrop.kt-booking-layout #transactionForm > *, #modalBackdrop.kt-booking-layout #transactionForm > .type-select-field, #modalBackdrop.kt-booking-layout #transactionForm > .type-select-field + label, #modalBackdrop.kt-booking-layout #transactionStatusField, #modalBackdrop.kt-booking-layout #incomePurposeFields, #modalBackdrop.kt-booking-layout #expensePurposeFields, #modalBackdrop.kt-booking-layout #transferFields, #modalBackdrop.kt-booking-layout #transactionDescriptionField, #modalBackdrop.kt-booking-layout #transactionPartnerField, #modalBackdrop.kt-booking-layout #transactionAmountField, #modalBackdrop.kt-booking-layout #transactionTaxField, #modalBackdrop.kt-booking-layout #transactionBusinessField, #modalBackdrop.kt-booking-layout #incomePlatformField, #modalBackdrop.kt-booking-layout #vintedUsernameField, #modalBackdrop.kt-booking-layout #expensePaymentField, #modalBackdrop.kt-booking-layout #expensePurchaseFields, #modalBackdrop.kt-booking-layout #saleCostFields, #modalBackdrop.kt-booking-layout #transactionForm > .form-actions{ grid-column:1!important; } .modal-backdrop .form-actions{ bottom:-18px!important; margin:8px -15px -18px!important; padding:11px 15px 13px!important; } .modal-backdrop .form-actions > *{flex:1 1 0!important} } /* ========================================================= v69.14 · Verkauf · Wareneinsatz als ruhige, klare Teilkarte Nur #saleCostFields – bewusst noch kein globaler Standard. ========================================================= */ #saleCostFields.sale-cost-card-v2{ padding:0!important; overflow:hidden; border:1px solid color-mix(in srgb,var(--line) 82%,transparent)!important; border-radius:20px!important; background:var(--panel)!important; box-shadow:0 10px 30px rgba(15,23,42,.045)!important; } #saleCostFields .sale-cost-head-v2{ display:grid!important; grid-template-columns:42px minmax(0,1fr) auto; align-items:center; gap:13px; margin:0!important; padding:17px 18px 16px; border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent); background:linear-gradient(180deg,color-mix(in srgb,var(--panel-2) 48%,var(--panel)),var(--panel)); } #saleCostFields .sale-cost-head-icon{ width:42px;height:42px;border-radius:12px; display:grid;place-items:center; color:#8a5b24; background:#fff5e8; border:1px solid #f0dfc9; flex:0 0 auto; } #saleCostFields .sale-cost-head-icon svg{width:21px;height:21px} #saleCostFields .sale-cost-head-copy{min-width:0} #saleCostFields .sale-cost-head-copy .eyebrow{ display:block;margin:0 0 4px!important;font-size:8.5px!important;letter-spacing:.18em!important; } #saleCostFields .sale-cost-head-copy h3{ margin:0 0 3px!important;font-size:15px!important;line-height:1.2!important;letter-spacing:-.02em!important; } #saleCostFields .sale-cost-head-copy p{ margin:0!important;font-size:10px!important;line-height:1.4!important;color:var(--muted)!important; } #saleCostFields .sale-cost-optional-badge{ display:inline-flex;align-items:center;justify-content:center; min-height:27px;padding:5px 9px;border-radius:999px; border:1px solid color-mix(in srgb,var(--line) 82%,transparent); background:color-mix(in srgb,var(--panel-2) 72%,var(--panel)); color:var(--muted);font-size:9px;font-weight:750;letter-spacing:.02em; } #transactionForm #saleCostFields .sale-cost-layout-v2{ display:grid!important; grid-template-columns:1fr!important; gap:10px!important; padding:12px!important; align-items:stretch!important; } #transactionForm #saleCostFields .sale-cost-layout-v2 > *{grid-column:1!important} #saleCostFields .sale-cost-section{ border:1px solid color-mix(in srgb,var(--line) 76%,transparent)!important; border-radius:15px!important; background:color-mix(in srgb,var(--panel) 96%,var(--panel-2))!important; padding:13px!important; min-width:0; } #saleCostFields .sale-cost-section-head{ display:flex;align-items:flex-start;justify-content:space-between;gap:14px; margin:0 0 11px;padding:0 1px; } #saleCostFields .sale-cost-section-head strong{ display:block;font-size:11px;line-height:1.25;font-weight:760;letter-spacing:-.01em; } #saleCostFields .sale-cost-section-head small{ display:block;margin-top:3px;color:var(--muted);font-size:9.5px;line-height:1.35;font-weight:560; } #saleCostFields .sale-cost-auto-chip{ flex:0 0 auto;align-self:center; padding:5px 8px;border-radius:999px; background:#edf7f1;color:#237449;border:1px solid #d6eadf; font-size:8.5px;font-weight:720;white-space:nowrap; } #saleCostFields .sale-stock-grid{ display:grid;grid-template-columns:minmax(0,1.65fr) minmax(170px,.55fr);gap:10px;align-items:start; } #saleCostFields .sale-stock-grid > label, #saleCostFields .sale-cost-values-grid > label{ min-width:0!important;margin:0!important; } #saleCostFields .inventory-picker-input-row{gap:8px!important} #saleCostFields .inventory-picker-open{ min-height:46px!important;padding:0 13px!important;border-radius:11px!important; display:inline-flex!important;align-items:center;gap:7px;font-size:10px!important;font-weight:720!important; } #saleCostFields .inventory-picker-btn-icon{display:grid;place-items:center;width:17px;height:17px} #saleCostFields .inventory-picker-btn-icon svg{width:16px;height:16px} #saleCostFields .inventory-quantity-field{gap:6px!important} #saleCostFields .inventory-quantity-field input{height:46px!important} #saleCostFields .sale-status-strip{ position:relative; margin-top:10px!important; min-height:39px; display:flex;align-items:center; padding:9px 12px 9px 33px!important; border:1px solid color-mix(in srgb,var(--line) 70%,transparent)!important; border-radius:11px!important; background:color-mix(in srgb,var(--panel-2) 55%,var(--panel))!important; color:var(--muted)!important; font-size:9.5px!important;line-height:1.35!important; } #saleCostFields .sale-status-strip::before{ content:'';position:absolute;left:13px;top:50%;width:7px;height:7px;border-radius:50%; transform:translateY(-50%);background:#8aa6be;box-shadow:0 0 0 4px rgba(138,166,190,.12); } #saleCostFields .sale-shipping-section{padding:0!important;overflow:hidden} #saleCostFields .sale-shipping-section > .shipping-expense-toggle{ min-height:58px!important;margin:0!important;padding:10px 12px!important; display:grid!important;grid-template-columns:34px minmax(0,1fr) auto!important;gap:10px!important;align-items:center!important; border:0!important;border-radius:0!important;background:transparent!important;cursor:pointer; } #saleCostFields .shipping-expense-icon{ width:34px;height:34px;border-radius:10px;display:grid;place-items:center; color:#356b9a;background:#eef6fd;border:1px solid #d8e8f5; } #saleCostFields .shipping-expense-icon svg{width:18px;height:18px} #saleCostFields .shipping-expense-copy{min-width:0} #saleCostFields .shipping-expense-copy strong{display:block;font-size:10.5px!important;font-weight:760!important;line-height:1.25!important} #saleCostFields .shipping-expense-copy small{display:block;margin-top:2px;font-size:9px!important;line-height:1.35!important;color:var(--muted)!important} #saleCostFields .sale-shipping-section > .shipping-expense-toggle > input[type="checkbox"]{ position:absolute!important;opacity:0!important;pointer-events:none!important; } #saleCostFields .shipping-expense-switch{ width:38px;height:22px;border-radius:999px;position:relative;display:block; background:color-mix(in srgb,var(--line) 78%,var(--panel-2));border:1px solid color-mix(in srgb,var(--line) 90%,transparent); transition:.18s ease; } #saleCostFields .shipping-expense-switch::after{ content:'';position:absolute;top:2px;left:2px;width:16px;height:16px;border-radius:50%; background:var(--panel);box-shadow:0 1px 4px rgba(15,23,42,.18);transition:.18s ease; } #saleCostFields .shipping-expense-toggle:has(input:checked) .shipping-expense-switch{background:#23835a;border-color:#23835a} #saleCostFields .shipping-expense-toggle:has(input:checked) .shipping-expense-switch::after{transform:translateX(16px)} #saleCostFields .shipping-expense-fields{ grid-template-columns:repeat(3,minmax(0,1fr))!important; gap:10px!important;margin:0!important;padding:12px!important; border-top:1px solid color-mix(in srgb,var(--line) 68%,transparent); background:color-mix(in srgb,var(--panel-2) 44%,var(--panel)); } #saleCostFields .shipping-expense-fields .shipping-expense-preview{grid-column:1/-1!important;margin-top:0!important} #saleCostFields .sale-cost-values-grid{ display:grid;grid-template-columns:minmax(150px,.65fr) minmax(0,1.25fr) minmax(150px,.65fr);gap:10px;align-items:start; } #saleCostFields .sale-cost-values-grid input, #saleCostFields .sale-cost-values-grid select, #saleCostFields .sale-stock-grid input{ min-height:46px!important; } @media(max-width:760px){ #saleCostFields .sale-cost-head-v2{grid-template-columns:38px minmax(0,1fr);padding:14px} #saleCostFields .sale-cost-head-icon{width:38px;height:38px} #saleCostFields .sale-cost-optional-badge{grid-column:2;justify-self:start;margin-top:-2px} #saleCostFields .sale-stock-grid, #saleCostFields .sale-cost-values-grid, #saleCostFields .shipping-expense-fields{grid-template-columns:1fr!important} #saleCostFields .sale-cost-auto-chip{display:none} #saleCostFields .sale-cost-section-head{display:block} #saleCostFields .inventory-picker-input-row{grid-template-columns:1fr!important;display:grid!important} #saleCostFields .inventory-picker-open{width:100%!important;justify-content:center} #saleCostFields .shipping-expense-fields .shipping-expense-preview{grid-column:1!important} } /* ========================================================= v69.14 · Einheitliches Teilkarten-System in Pop-up-Workflows Der in v69.13 getestete Wareneinsatz-Stil wird dort genutzt, wo mehrere zusammengehörige Funktionen eine visuelle Gruppe bilden. Einzelne Standardfelder bleiben bewusst ohne zusätzliche Karten. ========================================================= */ .modal-backdrop .kt-section-card-v2{ border:1px solid color-mix(in srgb,var(--line) 82%,transparent)!important; border-radius:20px!important; background:var(--panel)!important; box-shadow:0 10px 30px rgba(15,23,42,.042)!important; min-width:0; } /* Große Workflow-Karten mit ruhigem, abgesetztem Kopf. */ #modalBackdrop .kt-section-card-v2:not(#saleCostFields), #invoiceModalBackdrop .kt-section-card-v2, #currentBalanceBackdrop .kt-section-card-v2, #companyCreateBackdrop .kt-section-card-v2{ padding:16px 18px!important; } #modalBackdrop .kt-section-card-v2:not(#saleCostFields) > .sale-cost-head, #modalBackdrop .kt-section-card-v2 > .expense-payment-head, #modalBackdrop .kt-section-card-v2 > .transfer-head, #invoiceModalBackdrop .invoice-items-block.kt-section-card-v2 > .dynamic-position-head{ margin:-16px -18px 14px!important; padding:16px 18px 14px!important; border-bottom:1px solid color-mix(in srgb,var(--line) 72%,transparent)!important; border-radius:20px 20px 0 0!important; background:linear-gradient(180deg,color-mix(in srgb,var(--panel-2) 52%,var(--panel)),var(--panel))!important; } #modalBackdrop .kt-section-card-v2:not(#saleCostFields) > .sale-cost-head .eyebrow, #modalBackdrop .kt-section-card-v2 > .expense-payment-head .eyebrow, #modalBackdrop .kt-section-card-v2 > .transfer-head .eyebrow, #invoiceModalBackdrop .invoice-items-block.kt-section-card-v2 > .dynamic-position-head .eyebrow{ font-size:8.5px!important; letter-spacing:.18em!important; } #modalBackdrop .kt-section-card-v2:not(#saleCostFields) > .sale-cost-head h3, #modalBackdrop .kt-section-card-v2 > .expense-payment-head h3, #modalBackdrop .kt-section-card-v2 > .transfer-head h3, #invoiceModalBackdrop .invoice-items-block.kt-section-card-v2 > .dynamic-position-head h3{ margin:3px 0 3px!important; font-size:15px!important; line-height:1.2!important; letter-spacing:-.02em!important; } #modalBackdrop .kt-section-card-v2:not(#saleCostFields) > .sale-cost-head p, #modalBackdrop .kt-section-card-v2 > .expense-payment-head p, #modalBackdrop .kt-section-card-v2 > .transfer-head p, #invoiceModalBackdrop .invoice-items-block.kt-section-card-v2 > .dynamic-position-head p{ margin:0!important; font-size:10px!important; line-height:1.42!important; color:var(--muted)!important; } /* Unterkarten für nur zeitweise sichtbare Detailgruppen. */ .modal-backdrop .kt-subsection-card-v2{ border:1px solid color-mix(in srgb,var(--line) 76%,transparent)!important; border-radius:15px!important; background:color-mix(in srgb,var(--panel) 96%,var(--panel-2))!important; padding:13px!important; box-shadow:none!important; min-width:0; } #modalBackdrop .income-purpose-grid > .kt-subsection-card-v2{ margin-top:2px!important; gap:10px!important; } #modalBackdrop .installment-sale-fields.kt-subsection-card-v2, #modalBackdrop .income-non-revenue-fields.kt-subsection-card-v2, #modalBackdrop .purchase-refund-fields.kt-subsection-card-v2, #modalBackdrop .purchase-vat-refund-fields.kt-subsection-card-v2{ padding:13px!important; background:color-mix(in srgb,var(--panel-2) 38%,var(--panel))!important; } #modalBackdrop .installment-sale-fields.kt-subsection-card-v2 .installment-sale-head{ margin:-2px 0 2px!important; padding:1px 1px 9px!important; border-bottom:1px solid color-mix(in srgb,var(--line) 62%,transparent); } #modalBackdrop .installment-sale-fields.kt-subsection-card-v2 .installment-sale-head h4{ margin:3px 0!important; font-size:12px!important; letter-spacing:-.01em!important; } #modalBackdrop .installment-sale-fields.kt-subsection-card-v2 .installment-sale-head p{ margin:0!important; font-size:9.5px!important; line-height:1.4!important; color:var(--muted)!important; } /* Einheitliche kompakte Toggle-Zeilen für optionale Funktionen. */ .modal-backdrop .kt-switch-row-v2{ min-height:58px!important; padding:10px 12px!important; border:1px solid color-mix(in srgb,var(--line) 76%,transparent)!important; border-radius:15px!important; background:color-mix(in srgb,var(--panel) 96%,var(--panel-2))!important; box-shadow:none!important; } .modal-backdrop .kt-switch-row-v2:hover{ border-color:color-mix(in srgb,var(--text) 14%,var(--line))!important; background:color-mix(in srgb,var(--panel-2) 50%,var(--panel))!important; } #invoiceModalBackdrop .invoice-shipping-toggle.kt-switch-row-v2{ margin:1px 0!important; } #cancellationModalBackdrop .cancellation-option.kt-switch-row-v2{ display:grid!important; grid-template-columns:auto minmax(0,1fr)!important; gap:11px!important; align-items:center!important; } /* Status-/Hinweiszeilen im selben visuellen System wie die Live-Vorschau. */ .modal-backdrop .kt-status-strip-v2{ position:relative!important; min-height:42px!important; padding:10px 12px 10px 34px!important; border:1px solid color-mix(in srgb,var(--line) 70%,transparent)!important; border-radius:12px!important; background:color-mix(in srgb,var(--panel-2) 52%,var(--panel))!important; color:var(--muted)!important; font-size:9.5px!important; line-height:1.4!important; } .modal-backdrop .kt-status-strip-v2::before{ content:''; position:absolute; left:14px;top:50%; width:7px;height:7px;border-radius:50%; transform:translateY(-50%); background:#809cb4; box-shadow:0 0 0 4px rgba(128,156,180,.12); } /* Bereits vorhandene Vorschauen an den neuen Stil angleichen. */ #modalBackdrop .income-purpose-note, #modalBackdrop .installment-preview, #modalBackdrop .purchase-refund-preview, #modalBackdrop .expense-invoice-status, #currentBalanceBackdrop .balance-adjustment-preview, #invoiceModalBackdrop .invoice-shipping-preview{ border-radius:12px!important; border:1px solid color-mix(in srgb,var(--line) 70%,transparent)!important; background:color-mix(in srgb,var(--panel-2) 52%,var(--panel))!important; box-shadow:none!important; } /* Zahlungsart und Belegkarte: innen luftiger, außen konsistent. */ #expensePaymentField.kt-section-card-v2 .expense-payment-grid, #expensePurchaseFields.kt-section-card-v2 .expense-purchase-grid, #incomePurposeFields.kt-section-card-v2 .income-purpose-grid, #expensePurposeFields.kt-section-card-v2 .income-purpose-grid{ gap:10px!important; } #expensePaymentField.kt-section-card-v2 .expense-payment-grid > label, #expensePurchaseFields.kt-section-card-v2 .expense-purchase-grid > label, #incomePurposeFields.kt-section-card-v2 .income-purpose-grid > label, #expensePurposeFields.kt-section-card-v2 .income-purpose-grid > label{ margin:0!important; } /* Rechnungspositionen werden zur echten Workflow-Karte statt eines losen Blocks. */ #invoiceModalBackdrop .invoice-items-block.kt-section-card-v2{ overflow:visible!important; } #invoiceModalBackdrop .invoice-items-block.kt-section-card-v2 .invoice-items-container{ display:grid; gap:9px!important; } #invoiceModalBackdrop .invoice-items-block.kt-section-card-v2 .invoice-item-row{ border:1px solid color-mix(in srgb,var(--line) 72%,transparent)!important; border-radius:14px!important; background:color-mix(in srgb,var(--panel) 97%,var(--panel-2))!important; box-shadow:none!important; } #invoiceModalBackdrop .invoice-shipping-fields.kt-subsection-card-v2:not(.hidden){ gap:10px!important; margin-top:-3px!important; } /* Kleine Info-/Übersichtskarten in anderen Pop-ups. */ #currentBalanceBackdrop .current-balance-system-card.kt-section-card-v2, #companyCreateBackdrop .company-opening-balance-card.kt-section-card-v2, #cancellationModalBackdrop .cancellation-summary.kt-section-card-v2, #aiReviewBackdrop .ai-review-summary.kt-section-card-v2{ padding:14px 16px!important; background:linear-gradient(180deg,color-mix(in srgb,var(--panel-2) 42%,var(--panel)),var(--panel))!important; } #companyCreateBackdrop .company-opening-balance-card.kt-section-card-v2 .company-opening-balance-fields{ gap:10px!important; } /* Dark Mode: Karten bleiben klar getrennt, ohne harte Leuchtränder. */ body.dark .modal-backdrop .kt-section-card-v2, body.dark .modal-backdrop .kt-subsection-card-v2, body.dark .modal-backdrop .kt-switch-row-v2{ box-shadow:0 12px 34px rgba(0,0,0,.10)!important; } @media(max-width:760px){ #modalBackdrop .kt-section-card-v2:not(#saleCostFields), #invoiceModalBackdrop .kt-section-card-v2, #currentBalanceBackdrop .kt-section-card-v2, #companyCreateBackdrop .kt-section-card-v2{ padding:13px!important; border-radius:17px!important; } #modalBackdrop .kt-section-card-v2:not(#saleCostFields) > .sale-cost-head, #modalBackdrop .kt-section-card-v2 > .expense-payment-head, #modalBackdrop .kt-section-card-v2 > .transfer-head, #invoiceModalBackdrop .invoice-items-block.kt-section-card-v2 > .dynamic-position-head{ margin:-13px -13px 12px!important; padding:14px 13px 12px!important; border-radius:17px 17px 0 0!important; } .modal-backdrop .kt-subsection-card-v2{padding:11px!important;border-radius:13px!important} #invoiceModalBackdrop .invoice-items-block.kt-section-card-v2 > .dynamic-position-head{ display:grid!important; grid-template-columns:1fr!important; gap:10px!important; } #invoiceModalBackdrop .invoice-add-position-btn{width:100%!important} } /* ========================================================= v69.15 · Klicksichere Aktionsleisten in allen Pop-ups Speichern/Abbrechen liegen garantiert ueber aufklappbaren Auswahlmenues und erhalten immer eine echte Klickflaeche. ========================================================= */ .modal-backdrop .form-actions{ z-index:260!important; isolation:isolate; pointer-events:auto!important; } .modal-backdrop .form-actions > button, .modal-backdrop .form-actions > input[type="submit"]{ position:relative; z-index:2; pointer-events:auto!important; touch-action:manipulation; } .modal-backdrop .form-actions > button:not(:disabled), .modal-backdrop .form-actions > input[type="submit"]:not(:disabled){ cursor:pointer!important; } .modal-backdrop .form-actions > button[aria-busy="true"], .modal-backdrop .form-actions > input[type="submit"][aria-busy="true"]{ cursor:wait!important; } /* ========================================================= v69.16 · Systemweiter Layout-/Icon-Sicherheitscheck Ziele: keine abgeschnittenen Icons, keine überlagernden Bedienelemente, saubere Skalierung in Pop-ups, Karten, Dropdowns, Sidebar, Topbar und Mobile-Navigation. ========================================================= */ /* 1) Icon-Boxen: feste Zentrierung, niemals zusammenschrumpfen oder clippen. */ .nav-svg-icon, .mobile-nav-icon, .account-menu-icon, .quick-create-icon, .dashboard-account-icon, .type-option-logo, .income-purpose-option-logo, .expense-recurring-preset-logo, .payment-method-option-logo, .kt-page-head-icon, .kt-panel-title-icon, .kt-category-icon, .kt-status-icon, .reports-card-icon, .reports-overview-icon, .sale-cost-head-icon, .shipping-toggle-icon, .inventory-picker-btn-icon, .kt-btn-icon, .kt-search-icon, .kt-period-trigger-icon, .kt-period-option-icon, .kt-category-trigger-icon, .kt-category-option-icon, .kt-status-trigger-icon, .kt-status-option-icon, .report-platform-icon-tile, .platform-dashboard-logo, .layout-pdf-dropicon, .v69-finding-icon{ box-sizing:border-box; display:inline-grid; place-items:center; flex:0 0 auto; align-self:center; line-height:0; overflow:visible!important; } .nav-svg-icon svg, .mobile-nav-icon svg, .account-menu-icon svg, .quick-create-icon svg, .dashboard-account-icon svg, .type-option-logo svg, .income-purpose-option-logo svg, .expense-recurring-preset-logo svg, .payment-method-option-logo svg, .kt-page-head-icon svg, .kt-panel-title-icon svg, .kt-category-icon svg, .kt-status-icon svg, .reports-card-icon svg, .reports-overview-icon svg, .sale-cost-head-icon svg, .shipping-toggle-icon svg, .inventory-picker-btn-icon svg, .kt-btn-icon svg, .kt-search-icon svg, .kt-period-trigger-icon svg, .kt-period-option-icon svg, .kt-category-trigger-icon svg, .kt-category-option-icon svg, .kt-status-trigger-icon svg, .kt-status-option-icon svg, .report-platform-icon-tile svg, .platform-dashboard-logo svg, .layout-pdf-dropicon svg, .v69-finding-icon svg, .payment-logo-svg, .platform-logo-svg, .payment-generic-icon, .platform-generic-icon, .platform-vinted-logo, .platform-kleinanzeigen-icon, .tx-type-svg, .finance-movement-svg, .kt-topbar-icon-svg, .kt-search-icon-svg{ box-sizing:border-box; display:block; flex:0 0 auto; max-width:100%; max-height:100%; margin:auto; overflow:visible!important; vertical-align:middle; } /* App-/Firmenlogo darf innerhalb seiner runden Fläche nie angeschnitten werden. */ .brand-mark{overflow:hidden} .brand-mark img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;padding:3px;display:block!important} /* 2) Buttons: Icon und Text bleiben sauber auf einer Linie. */ .icon-btn, .primary-btn, .secondary-btn, .danger-btn, .tiny-btn, .cancellation-btn, .cancellation-primary-btn, .invoice-add-position-btn, .inventory-picker-btn{ align-items:center; justify-content:center; gap:8px; min-width:0; max-width:100%; line-height:1.2; } .icon-btn{display:inline-grid!important;place-items:center!important;padding:0!important;flex:0 0 auto} .primary-btn, .secondary-btn, .danger-btn, .tiny-btn, .cancellation-btn, .cancellation-primary-btn, .invoice-add-position-btn, .inventory-picker-btn{display:inline-flex} .icon-btn>svg, .primary-btn>svg, .secondary-btn>svg, .danger-btn>svg, .tiny-btn>svg, .cancellation-btn>svg, .cancellation-primary-btn>svg, .invoice-add-position-btn>svg, .inventory-picker-btn>svg{flex:0 0 auto;align-self:center} /* 3) Flex/Grid-Kinder dürfen wirklich kleiner werden – verhindert horizontales Drücken. */ .main, .content, .card, .panel, .panel-head, .panel-head>* , .page-head, .page-head>* , .toolbar, .toolbar>* , .filter-set, .form-grid, .form-grid>* , .kt-section-card-v2, .kt-section-card-v2>* , .kt-subsection-card-v2, .kt-subsection-card-v2>* , .kt-panel-title, .kt-panel-title>* , .kt-page-head, .kt-page-head>* , .kt-page-head-main, .head-actions, .income-purpose-grid, .expense-payment-grid, .expense-purchase-grid, .sale-cost-layout, .sale-cost-inventory-grid, .sale-cost-price-grid{ min-width:0; } /* 4) Formulare/Pop-ups: kein Feld kann seine Spalte sprengen. */ .modal-backdrop .modal, .modal-backdrop .modal-card{ isolation:isolate; scroll-padding-top:90px; scroll-padding-bottom:96px; } .modal-backdrop .form-grid input:not([type="checkbox"]):not([type="radio"]), .modal-backdrop .form-grid select, .modal-backdrop .form-grid textarea, .modal-backdrop .form-grid button:not(.icon-btn), .modal-backdrop .payment-method-trigger, .modal-backdrop .income-platform-trigger, .modal-backdrop .transfer-platform-trigger, .modal-backdrop .income-purpose-trigger, .modal-backdrop .type-method-trigger, .modal-backdrop .kt-period-trigger, .modal-backdrop .kt-category-trigger, .modal-backdrop .kt-status-trigger{ min-width:0; max-width:100%; } .modal-backdrop input, .modal-backdrop select, .modal-backdrop textarea{box-sizing:border-box} /* Dropdown-Trigger: Icon bleibt sichtbar, Text kürzt sich vor Chevron sauber. */ .payment-method-trigger-content, .income-platform-trigger-content, .transfer-platform-trigger-content, .type-method-trigger .payment-method-trigger-content, .income-purpose-trigger .payment-method-trigger-content{ min-width:0; flex:1 1 auto; } .payment-method-chevron, .income-platform-chevron, .transfer-platform-chevron, .kt-category-trigger-chevron, .kt-status-trigger-chevron{ flex:0 0 auto; align-self:center; } /* Geöffnete Listen: lange Bezeichnungen umbrechen statt Icons/Text abzuschneiden. */ .income-purpose-option, .type-method-option, .payment-method-option, .income-platform-option, .transfer-platform-option, .kt-period-option, .kt-category-option, .kt-status-option{ min-width:0; max-width:100%; overflow:visible; } .income-purpose-option .payment-method-option-text, .type-method-option .payment-method-option-text{ min-width:0; overflow:visible!important; white-space:normal!important; text-overflow:clip!important; line-height:1.25; } .income-purpose-option .payment-method-option-text b, .income-purpose-option .payment-method-option-text small, .type-method-option .payment-method-option-text b, .type-method-option .payment-method-option-text small{ white-space:normal!important; overflow-wrap:anywhere; } .payment-method-option-text, .income-platform-option-text, .kt-period-option-label, .kt-category-option-label, .kt-status-option-label{ min-width:0; } /* Dropdown-Flächen bleiben innerhalb des sichtbaren Fensters. */ .payment-method-menu, .income-platform-menu, .transfer-platform-menu, .income-purpose-menu{ max-width:min(100%,calc(100vw - 28px)); max-height:min(330px,46dvh); overscroll-behavior:contain; } .kt-period-menu, .kt-category-menu, .kt-status-menu{ max-width:calc(100vw - 20px)!important; max-height:min(360px,52dvh)!important; overscroll-behavior:contain; } /* 5) Sticky Aktionsleisten: über jeder Dropdown-Ebene und mit echter Klickfläche. */ .modal-backdrop .form-actions{ z-index:11050!important; isolation:isolate; pointer-events:auto!important; background:linear-gradient(to bottom,color-mix(in srgb,var(--panel) 0%,transparent),var(--panel) 22%)!important; } .modal-backdrop .form-actions > button, .modal-backdrop .form-actions > input[type="submit"]{ position:relative; z-index:2; pointer-events:auto!important; touch-action:manipulation; min-width:0; } /* 6) Kopf-/Aktionsbereiche dürfen bei weniger Platz umbrechen statt kollidieren. */ .kt-page-head>.head-actions, .panel-head>.head-actions, .toolbar>.head-actions, .bd-actionbar-buttons{ min-width:0; flex-wrap:wrap; } .kt-server-badge{max-width:min(320px,36vw);overflow:hidden} .kt-server-badge b{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .search-wrap{min-width:0} .top-actions{min-width:0;flex:0 0 auto} /* Tabellen/Listenzeilen scrollen bewusst statt Inhalte übereinanderzulegen. */ .table-scroll, .sales-ledger-scroll, .bank-movements-list, .invoice-table-wrap, .cancellation-history-wrap{ max-width:100%; overscroll-behavior-inline:contain; } /* 7) Mobile/Tablet – enger, aber ohne abgeschnittene Icons oder überlagerte Buttons. */ @media(max-width:900px){ .page-head, .kt-page-head, .panel-head{ row-gap:12px; } .kt-page-head>.head-actions{max-width:100%;justify-content:flex-start} .toolbar{flex-wrap:wrap;align-items:stretch} .toolbar>.filter-set{flex:1 1 100%;min-width:0} .topbar{gap:10px;padding-left:16px;padding-right:16px} } @media(max-width:760px){ .nav-svg-icon, .mobile-nav-icon, .account-menu-icon, .quick-create-icon, .dashboard-account-icon, .type-option-logo, .income-purpose-option-logo, .kt-page-head-icon, .kt-panel-title-icon, .kt-category-icon, .kt-status-icon, .reports-card-icon, .reports-overview-icon{ flex-shrink:0!important; } .modal-backdrop .form-actions{ padding-bottom:calc(13px + env(safe-area-inset-bottom))!important; } .modal-backdrop .form-actions > *{min-height:44px} .payment-method-menu, .income-platform-menu, .transfer-platform-menu, .income-purpose-menu{max-height:min(280px,42dvh)} } @media(max-width:520px){ .topbar .kt-server-badge{width:34px;max-width:34px;padding:0;justify-content:center} .topbar .kt-server-badge b{display:none} .topbar .search-wrap{min-width:0} .modal-backdrop .form-actions{gap:8px!important} .modal-backdrop .form-actions > button, .modal-backdrop .form-actions > input[type="submit"]{padding-left:10px!important;padding-right:10px!important} } /* ========================================================= v69.17 · Präzise Icon-Achsen im Wareneinsatz-/Versandblock - Icon, Text und Schalter teilen sich eine saubere Mittelachse - Hinweistext steht wieder kontrolliert unter dem Titel - ältere Flex-Regeln dürfen das Versand-Icon nicht verschieben ========================================================= */ #saleCostFields .sale-shipping-section > .shipping-expense-toggle{ grid-template-columns:36px minmax(0,1fr) 40px!important; column-gap:11px!important; row-gap:0!important; align-items:center!important; padding:10px 13px!important; } #saleCostFields .sale-shipping-section .shipping-expense-icon{ width:34px!important; height:34px!important; min-width:34px!important; min-height:34px!important; max-width:34px!important; max-height:34px!important; margin:0!important; padding:0!important; align-self:center!important; justify-self:center!important; display:grid!important; place-items:center!important; line-height:0!important; box-sizing:border-box!important; position:relative!important; inset:auto!important; transform:none!important; overflow:visible!important; } #saleCostFields .sale-shipping-section .shipping-expense-icon svg{ width:18px!important; height:18px!important; min-width:18px!important; min-height:18px!important; display:block!important; margin:auto!important; position:static!important; transform:none!important; overflow:visible!important; } #saleCostFields .sale-shipping-section .shipping-expense-copy{ min-width:0!important; min-height:34px!important; margin:0!important; padding:0!important; display:flex!important; flex-direction:column!important; align-items:flex-start!important; justify-content:center!important; gap:2px!important; line-height:1.25!important; } #saleCostFields .sale-shipping-section .shipping-expense-copy strong, #saleCostFields .sale-shipping-section .shipping-expense-copy small{ width:100%!important; margin:0!important; padding:0!important; white-space:normal!important; } #saleCostFields .sale-shipping-section .shipping-expense-switch{ align-self:center!important; justify-self:end!important; margin:0!important; flex:0 0 auto!important; box-sizing:border-box!important; } @media(max-width:760px){ #saleCostFields .sale-shipping-section > .shipping-expense-toggle{ grid-template-columns:34px minmax(0,1fr) 40px!important; column-gap:9px!important; padding:10px 11px!important; } } /* ========================================================= v69.18 · Plattform-/Zahlungsart-Dropdowns sauber ausrichten - Icon/Logo und Bezeichnung bleiben als eine kompakte Zeile - Auto-Margins aus dem globalen Icon-Sicherheitsblock werden in Flex-Dropdowns gezielt neutralisiert ========================================================= */ .income-platform-trigger-content, .income-platform-option, .payment-method-trigger-content, .payment-method-option, .transfer-platform-trigger-content, .transfer-platform-option{ justify-content:flex-start!important; align-items:center!important; gap:10px!important; } .income-platform-trigger-content > .platform-logo-svg, .income-platform-option > .platform-logo-svg, .transfer-platform-trigger-content > .platform-logo-svg, .transfer-platform-option > .platform-logo-svg, .payment-method-trigger-content > .payment-logo-svg, .payment-method-option > .payment-logo-svg, .income-platform-trigger-content > .platform-generic-icon, .income-platform-option > .platform-generic-icon, .transfer-platform-trigger-content > .platform-generic-icon, .transfer-platform-option > .platform-generic-icon, .payment-method-trigger-content > .payment-generic-icon, .payment-method-option > .payment-generic-icon{ margin:0!important; flex-shrink:0!important; align-self:center!important; } .income-platform-trigger-content > .income-platform-option-text, .income-platform-option > .income-platform-option-text, .transfer-platform-trigger-content > .income-platform-option-text, .transfer-platform-option > .income-platform-option-text, .payment-method-trigger-content > .payment-method-option-text, .payment-method-option > .payment-method-option-text{ margin:0!important; flex:0 1 auto!important; text-align:left!important; min-width:0!important; } .income-platform-option, .payment-method-option, .transfer-platform-option{ width:100%!important; } /* ============================================================ v69.19 · Logo + Verkaufsdatum + Filter-Lesbarkeit ============================================================ */ .brand-mark{background:transparent!important;overflow:hidden!important} .brand-mark img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center!important;padding:0!important;border-radius:inherit!important;display:block!important} .kt-view-salesOverview .sales-ledger-date{color:#111827!important;font-weight:760!important} .kt-view-salesOverview .sales-ledger-date small{color:#4b5563!important;font-weight:600!important} .kt-view-salesOverview .period-selects .kt-period-picker-month{width:158px!important;min-width:158px!important} .kt-view-salesOverview .period-selects .kt-period-picker-year{width:112px!important;min-width:112px!important} .kt-view-salesOverview .kt-period-trigger-label{color:#111827!important;font-weight:800!important} .kt-view-salesOverview .kt-period-option-label{color:#111827!important;font-weight:700!important} body.dark .kt-view-salesOverview .sales-ledger-date, body.dark .kt-view-salesOverview .kt-period-trigger-label, body.dark .kt-view-salesOverview .kt-period-option-label{color:var(--text)!important} body.dark .kt-view-salesOverview .sales-ledger-date small{color:var(--muted)!important} @media(max-width:700px){ .kt-view-salesOverview .period-selects .kt-period-picker-month, .kt-view-salesOverview .period-selects .kt-period-picker-year{width:100%!important;min-width:0!important} } /* ============================================================ v69.20 · Vollcheck: keine abgeschnittenen Steuer-/Zahlungs-/ Plattform-/Datumsfelder, Inline-Logo und stabile Ein-Zeilen- Ausrichtung für kompakte Bedienelemente. ============================================================ */ .brand-mark{ width:38px!important;height:38px!important;min-width:38px!important; flex:0 0 38px!important;display:grid!important;place-items:center!important; padding:0!important;border-radius:12px!important;background:transparent!important; overflow:visible!important;line-height:0!important; } .brand-mark .kt-brand-logo-svg{ width:38px!important;height:38px!important;display:block!important; flex:0 0 38px!important;overflow:visible!important; } .kt-auth-brand .brand-mark,.kt-auth-brand .kt-brand-logo-svg{width:42px!important;height:42px!important;min-width:42px!important;flex-basis:42px!important} /* Kompakte Auswahlfelder bleiben immer eine Zeile: Icon unmittelbar neben Text. */ .income-platform-trigger-content,.income-platform-option, .payment-method-trigger-content,.payment-method-option, .transfer-platform-trigger-content,.transfer-platform-option, .report-platform-trigger-content,.report-platform-option, .kt-period-trigger,.kt-period-option, .kt-category-trigger,.kt-category-option, .kt-status-trigger,.kt-status-option{ align-items:center!important; } .income-platform-trigger-content,.income-platform-option, .payment-method-trigger-content,.payment-method-option, .transfer-platform-trigger-content,.transfer-platform-option, .report-platform-trigger-content,.report-platform-option{ justify-content:flex-start!important;gap:9px!important; } .income-platform-option-text, .payment-method-option-text, .report-platform-trigger .income-platform-option-text, .report-platform-option .income-platform-option-text, .kt-period-trigger-label,.kt-period-option-label, .kt-category-trigger-label,.kt-category-option-label, .kt-status-trigger-label,.kt-status-option-label{ white-space:nowrap!important; text-overflow:clip!important; } .income-platform-option-text,.payment-method-option-text, .report-platform-trigger .income-platform-option-text, .report-platform-option .income-platform-option-text, .kt-period-option-label,.kt-category-option-label,.kt-status-option-label{ overflow:visible!important; } .income-platform-trigger-content>.income-platform-option-text, .payment-method-trigger-content>.payment-method-option-text, .transfer-platform-trigger-content>.income-platform-option-text{ overflow:hidden!important; min-width:0!important; } .income-platform-option>.income-platform-option-text, .payment-method-option>.payment-method-option-text, .transfer-platform-option>.income-platform-option-text, .report-platform-option>.income-platform-option-text{ flex:0 0 auto!important;min-width:max-content!important; } .payment-method-option,.income-platform-option,.transfer-platform-option,.report-platform-option{ min-height:42px!important;padding:8px 10px!important; } /* Monat/Jahr nie wieder als „Septe…“ anzeigen. */ .kt-period-picker-month{min-width:158px!important;width:158px!important} .kt-period-picker-year{min-width:116px!important;width:116px!important} .kt-period-picker-range{min-width:190px!important} .kt-period-trigger-label{overflow:visible!important;color:#111827!important;font-weight:780!important} .kt-period-option-label{color:#111827!important;font-weight:720!important} body.dark .kt-period-trigger-label,body.dark .kt-period-option-label{color:var(--text)!important} /* Datumsangaben in Listen bleiben kontrastreich. */ .sales-ledger-date,.statement-date,.invoice-list-date,.receipt-list-date{ color:#111827!important;font-weight:720!important; } body.dark .sales-ledger-date,body.dark .statement-date,body.dark .invoice-list-date,body.dark .receipt-list-date{color:var(--text)!important} /* Buttons und Badges: Text/Icons nicht gegeneinander schieben. */ .primary-btn,.secondary-btn,.tiny-btn,.danger-btn,.status,.reference-badge,.booking-number-badge,.payment-method-badge{ white-space:nowrap; } .head-actions,.toolbar,.filter-set,.period-selects{align-items:center} .head-actions>*{min-width:0} /* In Pop-ups dürfen Menüs die Aktionsleiste nicht verdecken. */ .modal-backdrop .payment-method-menu, .modal-backdrop .income-platform-menu, .modal-backdrop .transfer-platform-menu, .modal-backdrop .income-purpose-menu, .modal-backdrop .kt-period-menu, .modal-backdrop .kt-category-menu, .modal-backdrop .kt-status-menu{z-index:10900!important} .modal-backdrop .form-actions{z-index:11050!important} @media(max-width:700px){ .kt-period-picker-month,.kt-period-picker-year,.kt-period-picker-range{width:100%!important;min-width:0!important} .period-selects{display:grid!important;grid-template-columns:1fr 1fr!important;width:100%!important} .head-actions{width:100%;gap:7px!important} .head-actions>.primary-btn,.head-actions>.secondary-btn{max-width:100%} } /* ========================================================= v69.21 · Dashboard-Statusicons pixelgenau zentrieren Der frühere Selektor `.kt-tasks-clear span` traf auch den Icon-Container selbst und überschrieb dessen Grid-Zentrierung. ========================================================= */ .kt-tasks-clear .kt-task-clear-inner{ display:grid!important; grid-template-columns:36px minmax(0,1fr)!important; align-items:center!important; column-gap:14px!important; } .kt-tasks-clear .kt-task-clear-icon{ box-sizing:border-box!important; width:36px!important; height:36px!important; min-width:36px!important; min-height:36px!important; margin:0!important; padding:0!important; display:grid!important; place-items:center!important; align-self:center!important; justify-self:center!important; line-height:0!important; color:var(--good)!important; font-size:0!important; overflow:visible!important; } .kt-tasks-clear .kt-task-clear-icon svg{ width:19px!important; height:19px!important; margin:0!important; padding:0!important; display:block!important; position:static!important; transform:none!important; flex:none!important; } .kt-tasks-clear .kt-task-clear-copy{ min-width:0!important; display:grid!important; align-content:center!important; gap:3px!important; margin:0!important; padding:0!important; } .kt-tasks-clear .kt-task-clear-copy > strong{ display:block!important; margin:0!important; line-height:1.25!important; } .kt-tasks-clear .kt-task-clear-copy > span{ display:block!important; margin:0!important; color:var(--muted)!important; line-height:1.35!important; } /* Der alte breite Selektor wird hier absichtlich neutralisiert. */ .kt-tasks-clear > .kt-task-clear-inner > .kt-task-clear-icon{ margin-top:0!important; } @media(max-width:700px){ .kt-tasks-clear .kt-task-clear-inner{ grid-template-columns:34px minmax(0,1fr)!important; column-gap:12px!important; } .kt-tasks-clear .kt-task-clear-icon{ width:34px!important;height:34px!important;min-width:34px!important;min-height:34px!important; } } /* ========================================================= v69.22 · Verkaufsübersicht: Plattformkarten sauber ausrichten - Plattformbadge darf nicht schrumpfen oder umbrechen - Verkaufsanzahl bekommt rechts einen eigenen festen Bereich - alle Plattformkarten bleiben einzeilig und symmetrisch ========================================================= */ .platform-summary-card > div{ display:grid!important; grid-template-columns:max-content minmax(0,1fr)!important; align-items:center!important; column-gap:10px!important; width:100%!important; min-height:28px!important; } .platform-summary-card > div > .platform-badge{ width:max-content!important; min-width:max-content!important; max-width:none!important; flex:none!important; white-space:nowrap!important; flex-wrap:nowrap!important; overflow:visible!important; line-height:1!important; } .platform-summary-card > div > .platform-badge > span{ display:block!important; white-space:nowrap!important; overflow:visible!important; text-overflow:clip!important; word-break:normal!important; overflow-wrap:normal!important; } .platform-summary-card > div > .platform-badge .platform-logo-svg{ flex:0 0 auto!important; margin:0!important; } .platform-summary-card > div > span:last-child{ min-width:0!important; justify-self:end!important; text-align:right!important; white-space:nowrap!important; overflow:visible!important; line-height:1.2!important; } @media(max-width:720px){ .platform-summary-card > div{ grid-template-columns:max-content 1fr!important; column-gap:8px!important; } } /* ====================================================================== v69.24 · Premium-Bestandsansicht ====================================================================== */ .inventory-summary-grid{ grid-template-columns:repeat(5,minmax(0,1fr)); gap:12px; margin-bottom:18px; } .inventory-summary-grid>.card{ position:relative; min-height:116px; padding:18px 18px 17px; border-radius:18px; overflow:hidden; background:linear-gradient(145deg,var(--panel),color-mix(in srgb,var(--panel-2) 38%,var(--panel))); } .inventory-summary-grid>.card::before{ content:"";position:absolute;left:18px;right:18px;top:0;height:2px;border-radius:0 0 3px 3px; background:color-mix(in srgb,var(--text) 16%,transparent); } .inventory-summary-grid>.card:nth-child(1)::before{background:color-mix(in srgb,#2f7d6d 55%,transparent)} .inventory-summary-grid>.card:nth-child(2)::before{background:color-mix(in srgb,#4f75b8 55%,transparent)} .inventory-summary-grid>.card:nth-child(3)::before{background:color-mix(in srgb,#a66a3f 55%,transparent)} .inventory-summary-grid>.card:nth-child(4)::before{background:color-mix(in srgb,#6d5aa8 55%,transparent)} .inventory-summary-grid>.card:nth-child(5)::before{background:color-mix(in srgb,#8a7c45 55%,transparent)} .inventory-summary-grid strong{font-size:24px;line-height:1.05;margin-top:2px} .inventory-summary-grid small{font-size:9px;line-height:1.45} .inventory-sales-overview{ padding:22px; border-radius:20px; box-shadow:0 12px 32px rgba(16,24,40,.035); } .inventory-sales-overview-head{align-items:center;margin-bottom:18px} .inventory-sales-overview-head h3{font-size:17px;letter-spacing:-.025em} .inventory-sales-filter-buttons{padding:4px;border-radius:13px;gap:2px} .inventory-sales-filter-buttons button{min-height:34px;padding:7px 11px;border-radius:9px} .inventory-sales-filter-buttons button.active{box-shadow:0 4px 12px rgba(16,24,40,.12)} .inventory-sales-kpis{gap:12px} .inventory-sales-kpis>div{padding:15px 16px;border-radius:15px;min-height:92px} .inventory-sales-kpis strong{font-size:19px} .inventory-card{ padding:0; overflow:hidden; border-radius:20px; box-shadow:0 14px 36px rgba(16,24,40,.04); } .inventory-premium-panel-head{ display:flex;align-items:center;justify-content:space-between;gap:18px; padding:21px 22px 17px!important;margin:0!important;border-bottom:1px solid var(--line); background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel-2) 28%,var(--panel))); } .inventory-premium-heading{display:flex;align-items:center;gap:13px;min-width:0} .inventory-premium-heading-icon{ width:38px;height:38px;flex:0 0 38px;border-radius:12px;display:grid;place-items:center; color:#6d5aa8;background:color-mix(in srgb,#6d5aa8 10%,var(--panel));border:1px solid color-mix(in srgb,#6d5aa8 18%,var(--line)); } .inventory-premium-heading-icon svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .inventory-premium-heading h3{margin:3px 0 4px;font-size:17px;letter-spacing:-.025em} .inventory-premium-heading p{margin:0;max-width:760px;color:var(--muted);font-size:9.5px;line-height:1.45} .inventory-premium-count{ flex:0 0 auto;display:flex;align-items:baseline;gap:6px;padding:9px 12px;border:1px solid var(--line);border-radius:12px;background:var(--panel-2) } .inventory-premium-count strong{font-size:15px}.inventory-premium-count span{font-size:9px;color:var(--muted);font-weight:750} .inventory-premium-list{padding:0 18px 18px} .inventory-premium-list-head{ display:grid;grid-template-columns:minmax(250px,1.55fr) minmax(165px,1fr) minmax(165px,1fr) minmax(155px,.9fr) minmax(125px,.7fr); gap:16px;padding:12px 14px 9px;color:var(--muted);font-size:8px;font-weight:850;letter-spacing:.08em;text-transform:uppercase; } .inventory-premium-row{ display:grid;grid-template-columns:minmax(250px,1.55fr) minmax(165px,1fr) minmax(165px,1fr) minmax(155px,.9fr) minmax(125px,.7fr); gap:16px;align-items:center;min-height:88px;padding:14px;margin-top:8px;border:1px solid var(--line);border-radius:15px; background:linear-gradient(145deg,var(--panel),color-mix(in srgb,var(--panel-2) 24%,var(--panel))); cursor:pointer;transition:border-color .18s ease,box-shadow .2s ease,transform .18s ease,background .18s ease; } .inventory-premium-row:hover{ border-color:color-mix(in srgb,var(--text) 16%,var(--line));box-shadow:0 9px 24px rgba(16,24,40,.055);transform:translateY(-1px); } .inventory-premium-row:focus-visible{outline:2px solid color-mix(in srgb,var(--text) 24%,transparent);outline-offset:2px} .inventory-premium-product{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:11px;min-width:0} .inventory-premium-product .inventory-article-number{min-height:30px;padding:7px 9px;white-space:nowrap} .inventory-premium-product .inventory-article-link{display:grid;gap:3px;text-align:left;min-width:0;padding:0;background:none;border:0} .inventory-premium-product .inventory-article-link strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .inventory-premium-product .inventory-article-link small{font-size:8.5px;color:var(--muted);line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .inventory-premium-metric,.inventory-premium-last{display:grid;gap:4px;min-width:0} .inventory-premium-metric>span,.inventory-premium-stock span,.inventory-premium-last>span{font-size:8px;font-weight:850;letter-spacing:.065em;text-transform:uppercase;color:var(--muted)} .inventory-premium-metric>strong,.inventory-premium-last>strong{font-size:12px;white-space:nowrap} .inventory-premium-metric>small,.inventory-premium-stock small,.inventory-premium-last>small{font-size:8.5px;color:var(--muted);line-height:1.4;min-width:0} .inventory-premium-metric>small b{font-size:inherit} .inventory-premium-stock{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0} .inventory-premium-stock>div{display:grid;gap:4px;min-width:0} .inventory-premium-stock strong{font-size:14px;white-space:nowrap} .inventory-premium-stock .status{flex:0 0 auto;padding:5px 8px;font-size:8px;white-space:nowrap} .inventory-premium-last small{font-weight:750;color:color-mix(in srgb,var(--text) 58%,var(--muted));white-space:nowrap} .inventory-help-card{border-radius:20px;padding:20px 22px} .inventory-flow{gap:10px}.inventory-flow>div{border-radius:14px;padding:15px 16px;background:linear-gradient(145deg,var(--panel),var(--panel-2))} @media(max-width:1180px){ .inventory-summary-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .inventory-premium-list-head{display:none} .inventory-premium-row{grid-template-columns:minmax(220px,1.45fr) minmax(145px,1fr) minmax(145px,1fr) minmax(145px,.9fr);} .inventory-premium-last{grid-column:1/-1;display:flex;align-items:center;justify-content:flex-end;gap:8px;padding-top:9px;border-top:1px solid color-mix(in srgb,var(--line) 75%,transparent)} .inventory-premium-last>span{margin-right:auto} } @media(max-width:820px){ .inventory-summary-grid{grid-template-columns:1fr 1fr} .inventory-sales-overview{padding:17px} .inventory-premium-panel-head{align-items:flex-start;padding:17px!important} .inventory-premium-count{display:none} .inventory-premium-list{padding:0 12px 12px} .inventory-premium-row{grid-template-columns:1fr 1fr;gap:13px;padding:13px} .inventory-premium-product{grid-column:1/-1;padding-bottom:10px;border-bottom:1px solid color-mix(in srgb,var(--line) 75%,transparent)} .inventory-premium-stock{align-items:flex-end} .inventory-premium-last{grid-column:1/-1} } @media(max-width:560px){ .inventory-summary-grid{grid-template-columns:1fr} .inventory-premium-heading-icon{width:34px;height:34px;flex-basis:34px} .inventory-premium-row{grid-template-columns:1fr} .inventory-premium-product,.inventory-premium-last{grid-column:1} .inventory-premium-metric,.inventory-premium-stock{padding:2px 0} .inventory-premium-stock{align-items:center} .inventory-premium-last{justify-content:flex-start;flex-wrap:wrap} } /* ====================================================================== v69.26 · Premium-Ausgabenpopup – kompakter, ruhiger, hochwertiger Nur der Ausgabenmodus wird verändert; Buchungslogik bleibt unangetastet. ====================================================================== */ #modalBackdrop.kt-expense-layout > .modal{ background: linear-gradient(180deg,color-mix(in srgb,var(--panel) 99%,#fff 1%) 0%,color-mix(in srgb,var(--panel-2) 18%,var(--panel)) 100%)!important; } /* Karten wirken wie eigenständige Arbeitsbereiche statt graue Formularboxen. */ #modalBackdrop.kt-expense-layout #expensePaymentField, #modalBackdrop.kt-expense-layout #expensePurchaseFields{ border:1px solid color-mix(in srgb,var(--line) 78%,transparent)!important; background:var(--panel)!important; box-shadow:0 8px 28px -24px rgba(15,23,42,.32),0 1px 2px rgba(15,23,42,.025)!important; } /* Zahlungsart: eine kompakte Premium-Zeile statt großer leerer Karte. */ #modalBackdrop.kt-expense-layout #expensePaymentField{ grid-column:1 / -1!important; display:grid!important; grid-template-columns:minmax(240px,.72fr) minmax(360px,1.28fr)!important; align-items:center!important; gap:24px!important; padding:17px 20px!important; border-radius:16px!important; } #modalBackdrop.kt-expense-layout #expensePaymentField .expense-payment-head{ min-width:0; display:grid; gap:3px; align-content:center; } #modalBackdrop.kt-expense-layout #expensePaymentField .expense-payment-head h3{ margin:0!important; font-size:14px!important; line-height:1.2!important; letter-spacing:-.018em!important; } #modalBackdrop.kt-expense-layout #expensePaymentField .expense-payment-head p{ margin:0!important; max-width:430px; font-size:9.5px!important; line-height:1.45!important; } #modalBackdrop.kt-expense-layout #expensePaymentField .expense-payment-grid{ min-width:0; display:block!important; } #modalBackdrop.kt-expense-layout #expensePaymentField .payment-method-field{ display:grid!important; grid-template-columns:1fr!important; gap:6px!important; min-width:0; margin:0!important; } #modalBackdrop.kt-expense-layout #expensePaymentField .payment-method-select{ margin-top:0!important; } #modalBackdrop.kt-expense-layout #expensePaymentField .payment-method-trigger{ min-height:48px!important; height:48px!important; padding:0 14px!important; border-radius:12px!important; background:color-mix(in srgb,var(--panel-2) 46%,var(--panel))!important; } #modalBackdrop.kt-expense-layout #expensePaymentField .field-hint{ margin:0!important; font-size:8.7px!important; opacity:.9; } /* Nachweis/Wareneinkauf: Header und Inhalt klar voneinander getrennt. */ #modalBackdrop.kt-expense-layout #expensePurchaseFields{ grid-column:1 / -1!important; display:block!important; padding:0!important; overflow:visible!important; border-radius:16px!important; } #modalBackdrop.kt-expense-layout #expensePurchaseFields > .sale-cost-head{ position:relative; margin:0!important; padding:17px 20px 14px!important; border-bottom:1px solid color-mix(in srgb,var(--line) 74%,transparent); background:linear-gradient(180deg,color-mix(in srgb,var(--panel-2) 34%,var(--panel)),var(--panel)); border-radius:16px 16px 0 0; } #modalBackdrop.kt-expense-layout #expensePurchaseFields > .sale-cost-head h3{ margin:0 0 3px!important; font-size:14px!important; line-height:1.22!important; letter-spacing:-.018em!important; } #modalBackdrop.kt-expense-layout #expensePurchaseFields > .sale-cost-head p{ margin:0!important; max-width:800px; font-size:9.5px!important; line-height:1.45!important; } #modalBackdrop.kt-expense-layout #expensePurchaseFields .expense-purchase-grid{ display:grid!important; grid-template-columns:repeat(12,minmax(0,1fr))!important; gap:14px 12px!important; padding:17px 20px 18px!important; align-items:start!important; } #modalBackdrop.kt-expense-layout #expensePurchaseFields .expense-purchase-grid > *{ min-width:0!important; } #modalBackdrop.kt-expense-layout #expensePurchaseFields .expense-purchase-grid > label{ display:grid!important; gap:6px!important; margin:0!important; } #modalBackdrop.kt-expense-layout #expensePurchaseFields .expense-purchase-grid > label:nth-of-type(1){ grid-column:1 / span 8!important; } #modalBackdrop.kt-expense-layout #expensePurchaseFields .expense-purchase-grid > label:nth-of-type(2){ grid-column:9 / span 4!important; } #modalBackdrop.kt-expense-layout #expensePurchaseFields .expense-purchase-grid > label:nth-of-type(3){ grid-column:1 / span 6!important; } #modalBackdrop.kt-expense-layout #expensePurchaseFields .expense-purchase-grid > label:nth-of-type(4){ grid-column:7 / span 6!important; } #modalBackdrop.kt-expense-layout #expensePurchaseFields .expense-invoice-status{ grid-column:1 / -1!important; min-height:42px!important; display:flex!important; align-items:center!important; gap:9px!important; margin:0!important; padding:10px 12px!important; border:1px solid color-mix(in srgb,var(--line) 76%,transparent)!important; border-radius:11px!important; background:color-mix(in srgb,var(--panel-2) 34%,var(--panel))!important; color:var(--muted)!important; font-size:9px!important; line-height:1.35!important; } #modalBackdrop.kt-expense-layout #expensePurchaseFields .expense-invoice-status:empty{display:none!important} #modalBackdrop.kt-expense-layout #expensePurchaseFields .expense-invoice-status > span:first-child:not(.reference-badge){ margin:0!important; } /* Datei-Upload wirkt wie ein bewusstes Upload-Control statt Browser-Standardfeld. */ #modalBackdrop.kt-expense-layout #expensePurchaseFields input[type="file"]{ width:100%!important; min-height:48px!important; height:48px!important; padding:6px 8px!important; border:1px dashed color-mix(in srgb,var(--text) 16%,var(--line))!important; border-radius:12px!important; background:color-mix(in srgb,var(--panel-2) 40%,var(--panel))!important; color:var(--muted)!important; font-size:9.5px!important; line-height:32px!important; cursor:pointer!important; } #modalBackdrop.kt-expense-layout #expensePurchaseFields input[type="file"]::file-selector-button{ height:34px!important; margin:0 10px 0 0!important; padding:0 12px!important; border:1px solid color-mix(in srgb,var(--line) 88%,transparent)!important; border-radius:9px!important; background:var(--panel)!important; color:var(--text)!important; font:inherit!important; font-weight:760!important; cursor:pointer!important; box-shadow:0 1px 2px rgba(15,23,42,.035)!important; } #modalBackdrop.kt-expense-layout #expensePurchaseFields input[type="file"]::file-selector-button:hover{ background:var(--panel-2)!important; } #modalBackdrop.kt-expense-layout #expensePurchaseFields .field-hint{ margin:0!important; min-height:0!important; font-size:8.7px!important; line-height:1.4!important; color:color-mix(in srgb,var(--muted) 92%,var(--text))!important; } /* Die Hauptfelder des Ausgaben-Popups erhalten etwas mehr optische Ruhe. */ #modalBackdrop.kt-expense-layout #transactionDescriptionField input, #modalBackdrop.kt-expense-layout #transactionPartnerField input, #modalBackdrop.kt-expense-layout #transactionAmountField input, #modalBackdrop.kt-expense-layout #transactionTaxField select, #modalBackdrop.kt-expense-layout #transactionBusinessField input{ background:color-mix(in srgb,var(--panel-2) 18%,var(--panel))!important; } @media(max-width:900px){ #modalBackdrop.kt-expense-layout #expensePaymentField{ grid-template-columns:1fr!important; gap:11px!important; } #modalBackdrop.kt-expense-layout #expensePaymentField .expense-payment-head p{max-width:none} #modalBackdrop.kt-expense-layout #expensePurchaseFields .expense-purchase-grid > label:nth-of-type(1), #modalBackdrop.kt-expense-layout #expensePurchaseFields .expense-purchase-grid > label:nth-of-type(2), #modalBackdrop.kt-expense-layout #expensePurchaseFields .expense-purchase-grid > label:nth-of-type(3), #modalBackdrop.kt-expense-layout #expensePurchaseFields .expense-purchase-grid > label:nth-of-type(4){ grid-column:1 / -1!important; } } @media(max-width:620px){ #modalBackdrop.kt-expense-layout #expensePaymentField{padding:14px!important} #modalBackdrop.kt-expense-layout #expensePurchaseFields{padding:0!important} #modalBackdrop.kt-expense-layout #expensePurchaseFields > .sale-cost-head{padding:14px 14px 12px!important} #modalBackdrop.kt-expense-layout #expensePurchaseFields .expense-purchase-grid{ grid-template-columns:1fr!important; padding:14px!important; gap:12px!important; } #modalBackdrop.kt-expense-layout #expensePurchaseFields .expense-purchase-grid > *{grid-column:1!important} } /* ========================================================= v69.27 · Lieferantenakten / Wareneinkauf-Verknüpfung ========================================================= */ .supplier-profile-fields{ margin:0 0 18px; padding:16px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(180deg,color-mix(in srgb,var(--panel) 98%,#eef7ff 2%),var(--panel)); } .supplier-profile-fields.hidden{display:none!important} .supplier-profile-head{display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;margin-bottom:14px} .supplier-profile-icon{width:38px;height:38px;border-radius:12px;display:grid;place-items:center;background:rgba(37,99,235,.08);color:#2563eb;border:1px solid rgba(37,99,235,.13);flex:0 0 auto} .supplier-profile-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .supplier-profile-head>div{min-width:0;display:grid;gap:3px} .supplier-profile-head strong{font-size:13px;letter-spacing:-.01em} .supplier-profile-head small{font-size:10.5px;line-height:1.45;color:var(--muted)} .supplier-profile-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px} .supplier-profile-grid label{margin:0} .supplier-kpis{margin-bottom:18px} .supplier-ledger-card{padding:0;overflow:hidden;border-radius:20px} .supplier-ledger-head{display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 24px;border-bottom:1px solid var(--line)} .supplier-ledger-head h3{margin:5px 0 4px;font-size:17px;letter-spacing:-.025em} .supplier-ledger-head p{margin:0;color:var(--muted);font-size:11px} .supplier-ledger-list{display:grid} .supplier-ledger-row{appearance:none;border:0;border-bottom:1px solid var(--line);background:transparent;color:var(--text);display:grid;grid-template-columns:auto minmax(220px,1.5fr) repeat(3,minmax(125px,.7fr)) auto;gap:18px;align-items:center;width:100%;padding:17px 22px;text-align:left;cursor:pointer;transition:background .16s ease,transform .16s ease} .supplier-ledger-row:last-child{border-bottom:0} .supplier-ledger-row:hover{background:var(--panel-2)} .supplier-ledger-avatar,.supplier-dossier-avatar{width:42px;height:42px;border-radius:13px;display:grid;place-items:center;background:rgba(37,99,235,.08);color:#2459a8;border:1px solid rgba(37,99,235,.12);font-size:11px;font-weight:800;letter-spacing:.03em} .supplier-ledger-main{display:grid;gap:4px;min-width:0} .supplier-ledger-main strong{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .supplier-ledger-main small,.supplier-ledger-metric small{font-size:9.5px;color:var(--muted)} .supplier-ledger-metric{display:grid;gap:4px;min-width:0} .supplier-ledger-metric strong{font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .supplier-ledger-chevron{font-size:24px;color:var(--muted);line-height:1} .supplier-empty{padding:34px!important} .supplier-detail-backdrop{z-index:2150} .supplier-detail-modal{width:min(1080px,calc(100vw - 40px));max-height:calc(100vh - 44px);overflow:auto;border-radius:24px} .supplier-detail-subtitle{margin:5px 0 0;color:var(--muted);font-size:11px} .supplier-detail-body{padding:22px 24px 28px;display:grid;gap:18px} .supplier-dossier-hero{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:14px;align-items:center;padding:16px 18px;border:1px solid var(--line);border-radius:16px;background:var(--panel-2)} .supplier-dossier-avatar{width:48px;height:48px;border-radius:15px;font-size:12px} .supplier-dossier-contact{display:grid;gap:4px;min-width:0} .supplier-dossier-contact strong{font-size:15px;letter-spacing:-.02em} .supplier-dossier-contact span,.supplier-dossier-contact small{font-size:10.5px;color:var(--muted);line-height:1.4} .supplier-dossier-kpis{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:16px;overflow:hidden} .supplier-dossier-kpis article{padding:16px 18px;border-right:1px solid var(--line);background:var(--panel)} .supplier-dossier-kpis article:last-child{border-right:0} .supplier-dossier-kpis span{display:block;font-size:9.5px;color:var(--muted);margin-bottom:7px} .supplier-dossier-kpis strong{display:block;font-size:17px;letter-spacing:-.025em} .supplier-dossier-section{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)} .supplier-dossier-section-head{padding:17px 18px;border-bottom:1px solid var(--line)} .supplier-dossier-section-head h3{margin:4px 0 0;font-size:15px} .supplier-purchase-list{display:grid} .supplier-purchase-row{display:grid;grid-template-columns:135px minmax(230px,1.4fr) 130px minmax(230px,auto);gap:16px;align-items:center;padding:15px 18px;border-bottom:1px solid var(--line)} .supplier-purchase-row:last-child{border-bottom:0} .supplier-purchase-date,.supplier-purchase-main,.supplier-purchase-amount{display:grid;gap:4px;min-width:0} .supplier-purchase-date strong,.supplier-purchase-main strong,.supplier-purchase-amount strong{font-size:11.5px} .supplier-purchase-date small,.supplier-purchase-main small,.supplier-purchase-amount small{font-size:9.5px;color:var(--muted)} .supplier-purchase-main strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .supplier-purchase-doc{display:flex;gap:7px;justify-content:flex-end;flex-wrap:wrap} @media(max-width:900px){ .supplier-ledger-row{grid-template-columns:auto 1fr auto}.supplier-ledger-metric{display:none}.supplier-ledger-chevron{display:block} .supplier-purchase-row{grid-template-columns:1fr 110px}.supplier-purchase-date{grid-column:1/-1;grid-template-columns:auto 1fr}.supplier-purchase-doc{grid-column:1/-1;justify-content:flex-start} .supplier-dossier-kpis{grid-template-columns:1fr 1fr}.supplier-dossier-kpis article:nth-child(2){border-right:0}.supplier-dossier-kpis article:nth-child(-n+2){border-bottom:1px solid var(--line)} } @media(max-width:640px){ .supplier-profile-grid{grid-template-columns:1fr}.supplier-profile-head{grid-template-columns:auto 1fr}.supplier-profile-head>.status{grid-column:1/-1;width:max-content} .supplier-detail-modal{width:calc(100vw - 16px);max-height:calc(100vh - 16px);border-radius:18px}.supplier-detail-body{padding:16px} .supplier-dossier-hero{grid-template-columns:auto 1fr}.supplier-dossier-hero>.secondary-btn{grid-column:1/-1;width:100%} .supplier-dossier-kpis{grid-template-columns:1fr}.supplier-dossier-kpis article{border-right:0;border-bottom:1px solid var(--line)}.supplier-dossier-kpis article:last-child{border-bottom:0} .supplier-purchase-row{grid-template-columns:1fr}.supplier-purchase-date,.supplier-purchase-doc{grid-column:auto}.supplier-purchase-date{grid-template-columns:1fr}.supplier-purchase-doc{justify-content:stretch}.supplier-purchase-doc .tiny-btn{flex:1} } /* ====================================================================== v69.28 · Systemweiter Premium-Polish Ziel: klare Hierarchie, ruhige Abstände, hochwertige Arbeitsbereiche, ohne Buchungslogik oder bestehende Speziallayouts zu verändern. ====================================================================== */ .kt-view-suppliers{--kt-view-accent:#397d86} .kt-view-assets{--kt-view-accent:#6f5a9b} .kt-view-eInvoices{--kt-view-accent:#4f6fa6} .kt-view-datevCenter{--kt-view-accent:#596c80} .kt-view-recurring{--kt-view-accent:#8b6b3f} .kt-view-reviewCenter{--kt-view-accent:#4f7568} .kt-view-cashBook{--kt-view-accent:#23845b} /* Ruhiger Seitenrhythmus: direkte Arbeitsbereiche stehen konsistent auseinander. */ .kt-polished-content > .card + .card, .kt-polished-content > .v69-two-col + .card, .kt-polished-content > .v69-kpis + .card, .kt-polished-content > .card + .v69-two-col, .kt-polished-content > .card + .v69-kpis{ margin-top:16px; } .kt-polished-content .panel{ padding:21px 22px; } .kt-polished-content .panel-head:not(.inventory-premium-panel-head){ gap:18px; } .kt-polished-content .panel-head p{ max-width:760px; line-height:1.5; } /* Übersichts-KPIs bekommen dieselbe feine Kartenlogik wie Bestand/Reports. */ .kt-polished-content .v69-kpis{ gap:12px; margin-bottom:18px; } .kt-polished-content .v69-kpis > article{ position:relative; min-height:112px; padding:17px 18px 16px; border-radius:17px; overflow:hidden; background:linear-gradient(145deg,var(--panel),color-mix(in srgb,var(--kt-view-accent) 3.5%,var(--panel-2))); box-shadow:0 8px 24px rgba(15,23,42,.025); } .kt-polished-content .v69-kpis > article::before{ content:""; position:absolute; left:18px;right:18px;top:0;height:2px; border-radius:0 0 4px 4px; background:color-mix(in srgb,var(--kt-view-accent) 42%,transparent); } .kt-polished-content .v69-kpis > article > span{ font-size:9px; letter-spacing:.085em; opacity:.9; } .kt-polished-content .v69-kpis > article > strong{ margin:10px 0 4px; font-size:22px; line-height:1.05; } .kt-polished-content .v69-kpis > article > small{ line-height:1.4; } /* Neue Business-Module: zwei Spalten wie ein zusammenhängender Arbeitsbereich. */ .kt-polished-content .v69-two-col{ gap:14px; align-items:stretch; } .kt-polished-content .v69-two-col > .card{ min-width:0; height:100%; border-radius:19px; border-color:var(--kt-ui-border); background:linear-gradient(180deg,var(--panel),color-mix(in srgb,var(--panel-2) 20%,var(--panel))); box-shadow:0 10px 28px rgba(15,23,42,.03); } /* Formulare als klar erkennbare innere Arbeitsfläche statt lose Felder. */ .kt-polished-content .v69-form-grid{ gap:12px; padding:14px; border:1px solid color-mix(in srgb,var(--text) 6%,transparent); border-radius:15px; background:color-mix(in srgb,var(--panel-2) 48%,var(--panel)); } .kt-polished-content .v69-form-grid label, .kt-polished-content .v69-inline-controls label{ min-width:0; gap:7px; color:color-mix(in srgb,var(--muted) 88%,var(--text)); font-size:9.5px; letter-spacing:.01em; } .kt-polished-content .v69-form-grid input, .kt-polished-content .v69-form-grid select, .kt-polished-content .v69-inline-controls input, .kt-polished-content .v69-inline-controls select{ width:100%; min-width:0; height:42px; border-radius:11px; border-color:color-mix(in srgb,var(--text) 9%,transparent); background:var(--panel); box-shadow:0 1px 2px rgba(15,23,42,.025); transition:border-color .15s ease,box-shadow .15s ease,background-color .15s ease; } .kt-polished-content .v69-form-grid input:focus, .kt-polished-content .v69-form-grid select:focus, .kt-polished-content .v69-inline-controls input:focus, .kt-polished-content .v69-inline-controls select:focus{ border-color:color-mix(in srgb,var(--kt-view-accent) 38%,var(--line)); box-shadow:0 0 0 3px color-mix(in srgb,var(--kt-view-accent) 8%,transparent); outline:none; } .kt-polished-content .v69-inline-controls{ gap:10px; padding:12px; border:1px solid color-mix(in srgb,var(--text) 6%,transparent); border-radius:14px; background:color-mix(in srgb,var(--panel-2) 45%,var(--panel)); } .kt-polished-content .v69-inline-controls > .primary-btn, .kt-polished-content .v69-inline-controls > .secondary-btn{ min-height:42px; } /* Listen: klare Zeilen, kein optisches Durcheinander. */ .kt-polished-content .v69-list{ gap:0; border:1px solid color-mix(in srgb,var(--text) 6%,transparent); border-radius:14px; overflow:auto; background:var(--panel); } .kt-polished-content .v69-list > div{ min-height:58px; padding:12px 13px; border-bottom-color:color-mix(in srgb,var(--text) 5.5%,transparent); transition:background-color .15s ease; } .kt-polished-content .v69-list > div:hover{ background:color-mix(in srgb,var(--kt-view-accent) 3%,var(--panel-2)); } .kt-polished-content .v69-list > div > span{ min-width:0; } .kt-polished-content .v69-list > div > span b{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } /* Tabellen und Filter: etwas mehr Luft, aber kompakt genug für Buchhaltung. */ .kt-polished-content .table-card{ border-radius:19px; } .kt-polished-content .table-scroll{ scrollbar-width:thin; scrollbar-color:color-mix(in srgb,var(--muted) 35%,transparent) transparent; } .kt-polished-content th{ height:42px; padding:11px 14px; font-size:8.5px; letter-spacing:.085em; } .kt-polished-content td{ min-height:50px; padding:13px 14px; vertical-align:middle; } .kt-polished-content tbody tr:last-child td{ border-bottom:0; } .kt-polished-content .row-actions, .kt-polished-content .invoice-action-group{ align-items:center; gap:6px; } /* Buttons bleiben auf einer Zeile, sauber zentriert und gleich hoch. */ .kt-polished-content .primary-btn, .kt-polished-content .secondary-btn, .kt-polished-content .tiny-btn, .modal-backdrop .primary-btn, .modal-backdrop .secondary-btn, .modal-backdrop .tiny-btn{ white-space:nowrap; text-wrap:nowrap; line-height:1.15; } .kt-polished-content .primary-btn, .kt-polished-content .secondary-btn{ min-height:38px; } .kt-polished-content .primary-btn:focus-visible, .kt-polished-content .secondary-btn:focus-visible, .kt-polished-content .tiny-btn:focus-visible, .modal-backdrop button:focus-visible{ outline:2px solid color-mix(in srgb,var(--kt-view-accent,#657383) 32%,transparent); outline-offset:2px; } .kt-polished-content button:disabled, .modal-backdrop button:disabled{ opacity:.48; cursor:not-allowed!important; box-shadow:none!important; } /* Hinweise / Leerzustände: klar lesbar statt große leere Fläche. */ .kt-polished-content .notice{ align-items:flex-start; margin-bottom:16px; padding:13px 15px; border-radius:14px; line-height:1.5; box-shadow:none; } .kt-polished-content .empty-state, .kt-polished-content .table-empty, .kt-polished-content .empty{ line-height:1.55; } .kt-polished-content .table-empty{ padding:25px 18px; color:var(--muted); } .kt-polished-content .table-empty strong{ color:var(--text); } /* Seitenkopf-Aktionen: kein Überlappen, keine zufälligen Zeilenumbrüche. */ .kt-page-head > .head-actions{ flex-wrap:wrap; } .kt-page-head > .head-actions > *{ min-width:0; } .kt-page-head > .head-actions button{ flex:0 0 auto; } /* Modals: überall dieselbe hochwertige Grundfläche. Spezialmodals dürfen darüber hinaus verfeinern. */ .modal-backdrop .modal{ border-color:color-mix(in srgb,var(--text) 9%,transparent); box-shadow:0 30px 90px rgba(15,23,42,.24); } .modal-backdrop .modal-head{ gap:18px; } .modal-backdrop .modal-head > div{ min-width:0; } .modal-backdrop .modal-head h2{ letter-spacing:-.035em; } .modal-backdrop .form-actions{ gap:8px; } /* Lieferanten-Editor ersetzt Browser-Prompts durch echtes KT-Finance UI. */ .supplier-editor-backdrop{z-index:2200} .supplier-editor-modal{ width:min(700px,calc(100vw - 34px)); border-radius:23px; padding:22px; } .supplier-editor-subtitle{ margin:-9px 0 17px; max-width:560px; color:var(--muted); font-size:10.5px; line-height:1.5; } .supplier-editor-form{ gap:12px; } .supplier-editor-form label{ font-size:10px; } .supplier-editor-form input, .supplier-editor-form textarea{ width:100%; min-width:0; border:1px solid color-mix(in srgb,var(--text) 9%,transparent); border-radius:11px; background:var(--panel); color:var(--text); padding:10px 11px; outline:none; } .supplier-editor-form input{min-height:42px} .supplier-editor-form textarea{resize:vertical;min-height:84px;line-height:1.45} .supplier-editor-form input:focus, .supplier-editor-form textarea:focus{ border-color:color-mix(in srgb,#397d86 38%,var(--line)); box-shadow:0 0 0 3px color-mix(in srgb,#397d86 8%,transparent); } .supplier-editor-info{ display:grid; grid-template-columns:38px minmax(0,1fr); align-items:center; gap:12px; padding:13px 14px; border:1px solid color-mix(in srgb,#397d86 12%,var(--line)); border-radius:13px; background:color-mix(in srgb,#397d86 4%,var(--panel-2)); } .supplier-editor-info > div{min-width:0;display:grid;gap:3px} .supplier-editor-info strong{font-size:11px;color:var(--text)} .supplier-editor-info small{font-size:9.5px;color:var(--muted);line-height:1.45} /* Neue Module haben dieselbe visuelle Tiefe wie Bestand / Reports. */ .kt-view-reviewCenter .v69-review-hero{ border-color:color-mix(in srgb,var(--kt-view-accent) 12%,var(--line)); background:linear-gradient(145deg,var(--panel),color-mix(in srgb,var(--kt-view-accent) 4%,var(--panel-2))); border-radius:19px; box-shadow:0 10px 28px rgba(15,23,42,.03); } .kt-view-reviewCenter .v69-finding{ min-height:66px; padding:13px 15px; } @media(max-width:900px){ .kt-polished-content .v69-form-grid{grid-template-columns:repeat(2,minmax(0,1fr))} .kt-polished-content .v69-kpis{grid-template-columns:repeat(2,minmax(0,1fr))} .supplier-editor-modal{width:calc(100vw - 22px)} } @media(max-width:620px){ .kt-polished-content .panel{padding:17px} .kt-polished-content .v69-form-grid{grid-template-columns:1fr;padding:12px} .kt-polished-content .v69-kpis{grid-template-columns:1fr} .kt-polished-content .v69-kpis > article{min-height:96px} .kt-polished-content .v69-inline-controls{display:grid;grid-template-columns:1fr} .kt-polished-content .v69-inline-controls label{min-width:0} .kt-page-head > .head-actions button{width:100%} .supplier-editor-modal{padding:18px;border-radius:18px} .supplier-editor-form{grid-template-columns:1fr} .supplier-editor-form .span-2{grid-column:1} } /* v69.28 QA-Fix: Lieferanten-Editor Kopfzeile ohne Textüberlagerung. */ .supplier-editor-modal .modal-head h2{ margin:4px 0 5px!important; line-height:1.08!important; } .supplier-editor-subtitle{ margin:0!important; padding:0!important; display:block; } /* ========================================================= v69.29 · Exakte Feldachsen in mehrspaltigen Formularreihen Alle Controls einer Zeile beginnen/enden auf derselben Höhe. Hinweise leben in einer eigenen dritten Rasterzeile und verschieben niemals mehr ein einzelnes Eingabefeld nach oben oder unten. ========================================================= */ #saleCostFields .shipping-expense-fields.kt-aligned-field-row{ align-items:start!important; } #saleCostFields .shipping-expense-fields.kt-aligned-field-row > label{ display:grid!important; grid-template-rows:minmax(14px,auto) 46px minmax(13px,auto)!important; align-content:start!important; align-items:stretch!important; gap:7px!important; margin:0!important; min-width:0!important; } #saleCostFields .shipping-expense-fields.kt-aligned-field-row .kt-field-label{ display:flex!important; align-items:flex-end!important; min-height:14px!important; margin:0!important; color:var(--muted)!important; font-size:10px!important; font-weight:760!important; line-height:1.25!important; } #saleCostFields .shipping-expense-fields.kt-aligned-field-row > label > input, #saleCostFields .shipping-expense-fields.kt-aligned-field-row > label > select, #saleCostFields .shipping-expense-fields.kt-aligned-field-row > label > .kt-period-picker, #saleCostFields .shipping-expense-fields.kt-aligned-field-row > label > .kt-category-picker, #saleCostFields .shipping-expense-fields.kt-aligned-field-row > label > .kt-status-picker{ grid-row:2!important; width:100%!important; height:46px!important; min-height:46px!important; max-height:46px!important; margin:0!important; align-self:stretch!important; } #saleCostFields .shipping-expense-fields.kt-aligned-field-row > label > .field-hint{ grid-row:3!important; display:block!important; min-height:13px!important; margin:0!important; padding:0!important; font-size:9px!important; line-height:1.35!important; } #saleCostFields .shipping-expense-fields.kt-aligned-field-row .kt-field-hint-placeholder{ visibility:hidden!important; user-select:none!important; } /* Allgemeiner Schutz fuer weitere horizontale Teilformulare: direkte Kinder beginnen oben, statt durch unterschiedlich hohe Hinweise vertikal zentriert zu werden. */ .modal-backdrop .form-grid > [class*="grid"], .modal-backdrop .form-grid > .kt-subsection-card-v2{ align-self:start; } @media(max-width:760px){ #saleCostFields .shipping-expense-fields.kt-aligned-field-row > label{ grid-template-rows:auto 46px auto!important; } #saleCostFields .shipping-expense-fields.kt-aligned-field-row .kt-field-hint-placeholder{display:none!important} } /* ============================================================ v69.31 · Lieferantensuche direkt im Wareneinkauf ============================================================ */ .supplier-search-field{position:relative;z-index:40} .supplier-search-field:focus-within{z-index:140} .supplier-autocomplete{ position:absolute;left:0;right:0;top:calc(100% + 7px);z-index:2600; max-height:min(360px,42vh);overflow:auto;padding:7px; border:1px solid color-mix(in srgb,var(--line) 82%,#aeb8c5 18%); border-radius:16px;background:var(--panel);box-shadow:0 18px 44px rgba(15,23,42,.16),0 2px 8px rgba(15,23,42,.07); } .supplier-autocomplete.hidden{display:none!important} .supplier-autocomplete-option{ appearance:none;border:0;background:transparent;color:var(--text);width:100%;min-height:58px; display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;gap:11px; padding:9px 10px;border-radius:11px;text-align:left;cursor:pointer;transition:background .14s ease,transform .14s ease; } .supplier-autocomplete-option:hover,.supplier-autocomplete-option:focus-visible{background:var(--panel-2);outline:none} .supplier-autocomplete-option:active{transform:scale(.996)} .supplier-autocomplete-avatar{width:36px;height:36px;border-radius:11px;display:grid;place-items:center;background:rgba(37,99,235,.08);border:1px solid rgba(37,99,235,.13);color:#2459a8;font-size:10px;font-weight:850;letter-spacing:.03em} .supplier-autocomplete-copy{min-width:0;display:grid;gap:3px} .supplier-autocomplete-copy strong{font-size:12px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .supplier-autocomplete-copy small{font-size:9.5px;line-height:1.35;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .supplier-autocomplete-history{font-size:9px;color:var(--muted);white-space:nowrap;padding-left:10px} .supplier-autocomplete-empty{display:grid;gap:4px;padding:13px 12px;color:var(--text)} .supplier-autocomplete-empty strong{font-size:11px}.supplier-autocomplete-empty small{font-size:9.5px;color:var(--muted);line-height:1.45} .supplier-profile-grid .span-2{grid-column:1/-1} @media(max-width:760px){ .supplier-autocomplete{position:fixed;left:12px;right:12px;top:auto;bottom:calc(74px + env(safe-area-inset-bottom));max-height:42vh;border-radius:17px} .supplier-autocomplete-option{grid-template-columns:36px minmax(0,1fr)} .supplier-autocomplete-history{display:none} } /* ===================================================================== v69.31 · Clean-Modus mit optionalen Hilfetexten Standard: Beispiele und Erklaerungen sind ausgeblendet. Ein Info-Button in der Topbar und in Formular-Dialogen blendet sie bei Bedarf ein. ===================================================================== */ .kt-info-toggle-top, .kt-info-toggle{ position:relative; flex:0 0 auto; } .kt-info-toggle-top[aria-pressed="true"], .kt-info-toggle[aria-pressed="true"]{ background:rgba(42,111,219,.10)!important; border-color:rgba(42,111,219,.28)!important; color:#2466c9!important; } .modal-head>.kt-info-toggle, .modal-header>.kt-info-toggle{ margin-left:auto!important; } .modal-head>.kt-info-toggle + .icon-btn, .modal-header>.kt-info-toggle + .icon-btn, .modal-head>.kt-info-toggle + .modal-close, .modal-header>.kt-info-toggle + .modal-close{ margin-left:6px!important; } .kt-info-toggle svg, .kt-info-toggle-top svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; } /* Nur erklaerende Inhalte verschwinden. Pflichtangaben, Statusmeldungen, Warnungen, Berechnungen und Validierungsfehler bleiben sichtbar. */ body.kt-info-help-off .field-hint:not(.kt-info-always), body.kt-info-help-off .invoice-items-helper, body.kt-info-help-off .kt-readonly-hint, body.kt-info-help-off .supplier-editor-subtitle, body.kt-info-help-off .supplier-detail-subtitle, body.kt-info-help-off .kt-info-helper{ display:none!important; } /* Kleine Erklaerungen in den grossen Buchungskarten werden nur im Info-Modus gezeigt. Der eigentliche Titel/Funktionsname bleibt immer da. */ body.kt-info-help-off #transactionForm .expense-payment-head p, body.kt-info-help-off #transactionForm .paypal-fee-head p, body.kt-info-help-off #transactionForm .expense-purpose-head p, body.kt-info-help-off #transactionForm .expense-purchase-head p, body.kt-info-help-off #transactionForm .income-purpose-head p, body.kt-info-help-off #transactionForm .installment-head p, body.kt-info-help-off #transactionForm .sale-cost-head p, body.kt-info-help-off #transactionForm .supplier-profile-head small, body.kt-info-help-off #transactionForm .shipping-toggle-text small, body.kt-info-help-off #transactionForm .sale-cost-section-head small{ display:none!important; } /* Beim Ein-/Ausblenden sollen keine unruhigen Restabstaende bleiben. */ body.kt-info-help-off .field-hint + *, body.kt-info-help-off .invoice-items-helper + *{ margin-top:0; } @media(max-width:720px){ .kt-info-toggle-top{display:inline-flex!important} .modal-head>.kt-info-toggle, .modal-header>.kt-info-toggle{margin-left:auto!important} } /* ====================================================================== v69.32 · Zahlungsart-Ausrichtung Titel und Auswahlfeld bilden eine echte gemeinsame Zeile. Alte Workflow-Kopfregel darf den linken Bereich nicht mehr versetzen. ====================================================================== */ #modalBackdrop.kt-expense-layout #expensePaymentField{ align-items:start!important; } #modalBackdrop.kt-expense-layout #expensePaymentField > .expense-payment-head{ margin:0!important; padding:1px 0 0!important; border:0!important; border-radius:0!important; background:transparent!important; box-shadow:none!important; align-self:start!important; align-content:start!important; } #modalBackdrop.kt-expense-layout #expensePaymentField > .expense-payment-head h3{ margin:0!important; min-height:14px; display:flex; align-items:center; } #modalBackdrop.kt-expense-layout #expensePaymentField > .expense-payment-grid{ align-self:start!important; margin:0!important; } #modalBackdrop.kt-expense-layout #expensePaymentField .payment-method-field{ align-content:start!important; } #modalBackdrop.kt-expense-layout #expensePaymentField .payment-method-field, #modalBackdrop.kt-expense-layout #expensePaymentField > .expense-payment-head{ padding-top:0!important; } body.kt-info-help-off #modalBackdrop.kt-expense-layout #expensePaymentField{ align-items:start!important; } @media(max-width:720px){ #modalBackdrop.kt-expense-layout #expensePaymentField{ grid-template-columns:1fr!important; gap:10px!important; } #modalBackdrop.kt-expense-layout #expensePaymentField > .expense-payment-head{ padding:0!important; } } /* ========================================================= v69.34 · Zeitraumleiste: Monat und Jahr klar getrennt Die Monatsnavigation folgt jetzt dem gleichen Card-/Button-System wie die übrigen KT-Finance-Filter. Monat und Jahr sind bewusst zwei eigene Bedienelemente statt eines zusammengezogenen Labels "September 2026". ========================================================= */ .period-stepper{ display:inline-flex; align-items:center; gap:6px; height:auto; min-height:40px; align-self:flex-end; padding:4px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2,var(--surface)); overflow:visible; } .period-stepper>button{ min-height:34px; border:1px solid transparent; border-radius:9px; background:var(--panel,var(--surface)); color:var(--text); box-shadow:0 1px 2px rgba(15,23,42,.035); font:inherit; cursor:pointer; transition:background .14s ease,border-color .14s ease,box-shadow .14s ease,transform .14s ease,color .14s ease; } .period-stepper>button:hover{ background:color-mix(in srgb,var(--panel,var(--surface)) 82%,var(--text) 3%); border-color:color-mix(in srgb,var(--text) 11%,var(--line)); box-shadow:0 2px 6px rgba(15,23,42,.055); } .period-stepper>button:active{transform:translateY(1px)} .period-arrow{ width:34px; flex:0 0 34px; padding:0; display:grid; place-items:center; font-size:18px; line-height:1; color:var(--muted); } .period-label{ padding:0 13px; border-left:0; border-right:0; font-size:12.5px; font-weight:750; white-space:nowrap; text-align:center; } .period-stepper-month .period-month-label{min-width:108px} .period-stepper-month .period-year-label{min-width:68px;font-variant-numeric:tabular-nums} .period-stepper .period-label.period-now{ color:var(--text); border-color:color-mix(in srgb,var(--good) 24%,var(--line)); background:color-mix(in srgb,var(--good) 7%,var(--panel)); } .period-stepper>button:focus-visible{ outline:2px solid color-mix(in srgb,var(--good) 66%,transparent); outline-offset:2px; } @media(max-width:760px){ .period-stepper{width:100%;display:grid;grid-template-columns:34px minmax(0,1fr) 72px 34px;gap:5px} .period-stepper:not(.period-stepper-month){display:flex} .period-stepper .period-label{min-width:0;width:100%} .period-stepper-month .period-month-label,.period-stepper-month .period-year-label{min-width:0} } /* ========================================================= v69.34 · Monats-/Jahresfilter wie die KT-Finance-Selects Monat und Jahr sind zwei eigenständige, kompakte Picker. ========================================================= */ .period-compact-selects{ display:inline-flex; align-items:center; gap:8px; flex-wrap:nowrap; min-width:0; } .period-compact-selects>.kt-period-picker-month{ width:158px!important; min-width:158px!important; flex:0 0 158px!important; } .period-compact-selects>.kt-period-picker-year{ width:116px!important; min-width:116px!important; flex:0 0 116px!important; } .period-compact-selects .kt-period-trigger{ height:38px; border-radius:10px; background:var(--panel); } .period-compact-selects .kt-period-trigger-label{ white-space:nowrap; overflow:visible; text-overflow:clip; } @media(max-width:560px){ .period-compact-selects{width:100%;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,.9fr);gap:7px} .period-compact-selects>.kt-period-picker-month, .period-compact-selects>.kt-period-picker-year{width:100%!important;min-width:0!important;flex:1 1 auto!important} } /* v69.35 · PayPal-Verkäufe: voller Umsatz + tatsächliche Gutschrift + automatisch verknüpfte Gebühr */ #paypalFeeFields.paypal-fee-card{ padding:0; overflow:hidden; border:1px solid color-mix(in srgb,#003087 14%,var(--border)); background:linear-gradient(180deg,color-mix(in srgb,#ffffff 97%,#003087 3%),var(--surface)); } .paypal-fee-head{ display:flex; align-items:center; gap:12px; padding:14px 16px 12px; border-bottom:1px solid var(--border); } .paypal-fee-head>div{min-width:0} .paypal-fee-head .eyebrow{color:#003087} .paypal-fee-head h3{margin:2px 0 3px;font-size:14px;line-height:1.25} .paypal-fee-head p{margin:0;color:var(--muted);font-size:10.5px;line-height:1.45} .paypal-fee-icon{ width:34px;height:34px;flex:0 0 34px;border-radius:10px; display:grid;place-items:center; color:#003087;background:rgba(0,48,135,.08);border:1px solid rgba(0,48,135,.10) } .paypal-fee-icon svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .paypal-fee-grid{ display:grid; grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr); gap:12px; align-items:end; padding:13px 16px 15px; } .paypal-fee-grid>label{margin:0;min-width:0} .paypal-fee-summary{ min-height:48px; padding:8px 11px; border:1px solid var(--border); border-radius:11px; background:var(--surface-2); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:2px 10px; align-items:center; } .paypal-fee-summary>span{font-size:9.5px;font-weight:750;color:var(--muted)} .paypal-fee-summary>strong{font-size:13px;white-space:nowrap} .paypal-fee-summary>small{grid-column:1/-1;font-size:9.5px;line-height:1.35;color:var(--muted)} .paypal-fee-summary.error{border-color:rgba(190,40,40,.28);background:rgba(190,40,40,.04)} .paypal-fee-summary.error>strong{color:var(--danger)} .paypal-fee-metric{border-color:rgba(0,48,135,.12)!important} body.dark #paypalFeeFields.paypal-fee-card{background:color-mix(in srgb,var(--surface) 95%,#003087 5%)} @media(max-width:760px){ .paypal-fee-grid{grid-template-columns:1fr} .paypal-fee-head{align-items:flex-start} }