:root {
            --sidebar-width: 260px;
            --topbar-height: 56px;
            --brand-green: #82bb41;
            --brand-green-dark: #6fa532;
            --brand-green-light: #f4fae9;
            --text-primary: #2d2d2d;
            --text-muted: #888;
            --border-color: #eee;
        }
        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Archivo', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background: #f5f5f5;
            color: var(--text-primary);
            min-height: 100vh;
        }
        h1, h2, h3, h4 { font-family: 'Hepta Slab', Georgia, serif; }

        /* Sidebar */
        .sidebar {
            position: fixed; top: 0; left: 0;
            width: var(--sidebar-width); height: 100vh;
            background: #fff; border-right: 1px solid var(--border-color);
            display: flex; flex-direction: column; z-index: 200;
            transition: transform 0.3s ease; overflow-y: auto;
        }
        .sidebar-brand {
            padding: 20px 20px 16px; display: flex; align-items: center; gap: 12px;
            border-bottom: 1px solid var(--border-color);
        }
        .sidebar-brand img { height: 32px; }
        .sidebar-title {
            font-family: 'Hepta Slab', Georgia, serif; font-size: 18px; font-weight: 700; color: var(--text-primary);
        }
        .sidebar-title .green { color: var(--brand-green); }
        .sidebar-nav { flex: 1; padding: 12px 0; }
        .sidebar-nav-item {
            display: flex; align-items: center; gap: 12px;
            padding: 12px 20px; font-size: 14px; font-weight: 600; color: var(--text-muted);
            cursor: pointer; transition: all 0.15s; text-decoration: none;
            border-left: 3px solid transparent;
        }
        .sidebar-nav-item:hover { background: #f9fafb; color: var(--text-primary); }
        .sidebar-nav-item.active { color: var(--brand-green); background: var(--brand-green-light); border-left-color: var(--brand-green); }
        .sidebar-icon { font-size: 18px; width: 24px; text-align: center; flex-shrink: 0; }
        .sidebar-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .sidebar-nav-item .nav-badge {
            margin-left: auto; background: var(--brand-green); color: #fff;
            font-size: 11px; padding: 2px 8px; border-radius: 50px; font-weight: 700; white-space: nowrap;
        }
        .sidebar-footer { padding: 16px 20px; border-top: 1px solid var(--border-color); }
        .sidebar-footer-text { font-size: 11px; color: #aaa; }

        /* Sidebar Groups */
        .sidebar-group { margin-bottom: 2px; }
        .sidebar-group-header {
            display: flex; align-items: center; gap: 12px;
            padding: 10px 20px; cursor: pointer; transition: background 0.15s;
            font-size: 12px; font-weight: 700; text-transform: uppercase;
            letter-spacing: 0.5px; color: #999;
        }
        .sidebar-group-header:hover { background: #f9fafb; color: var(--text-primary); }
        .sidebar-group-icon { font-size: 16px; width: 20px; text-align: center; flex-shrink: 0; }
        .sidebar-group-title { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .sidebar-group-chevron {
            font-size: 10px; transition: transform 0.2s; flex-shrink: 0;
        }
        .sidebar-group.collapsed .sidebar-group-chevron { transform: rotate(-90deg); }
        .sidebar-group-items {
            overflow: hidden; max-height: 500px; transition: max-height 0.3s ease;
        }
        .sidebar-group.collapsed .sidebar-group-items { max-height: 0; }
        .sidebar-group-items .sidebar-nav-item { padding-left: 32px; font-size: 13px; }

        /* Topbar */
        .topbar {
            position: fixed; top: 0; left: var(--sidebar-width); right: 0;
            height: var(--topbar-height); background: #fff; border-bottom: 1px solid var(--border-color);
            display: flex; align-items: center; padding: 0 24px; z-index: 100; transition: left 0.3s ease;
        }
        .sidebar-toggle { display: none; background: none; border: none; font-size: 22px; cursor: pointer; padding: 4px 8px; margin-right: 12px; color: var(--text-primary); }
        .topbar-title { font-family: 'Hepta Slab', Georgia, serif; font-size: 16px; font-weight: 700; color: var(--text-primary); }

        /* Main content */
        .main-content { margin-left: var(--sidebar-width); padding-top: var(--topbar-height); min-height: 100vh; transition: margin-left 0.3s ease; overflow-x: hidden; }
        .sidebar-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.4); z-index: 150; }
        .sidebar-overlay.active { display: block; }

        .container { max-width: 1400px; margin: 0 auto; padding: 24px; }

        /* Cards */
        .card {
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.08);
            margin-bottom: 20px;
            overflow: hidden;
        }
        .card-header {
            padding: 16px 24px;
            font-family: 'Hepta Slab', Georgia, serif;
            font-size: 16px;
            font-weight: 700;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }
        .card-body { padding: 20px 24px; }

        /* Controls */
        .controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
        select, input, textarea {
            font-family: 'Archivo', sans-serif;
            padding: 10px 14px;
            border: 2px solid #e0e0e0;
            border-radius: 8px;
            font-size: 14px;
            background: #fff;
            transition: border-color 0.2s;
        }
        select:focus, input:focus { outline: none; border-color: #82bb41; }
        label { font-size: 12px; font-weight: 700; color: #666; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; display: block; }

        .btn {
            font-family: 'Archivo', sans-serif;
            padding: 10px 24px;
            border: none;
            border-radius: 50px;
            font-size: 14px;
            font-weight: 700;
            cursor: pointer;
            transition: all 0.2s;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 6px;
        }
        .btn-primary { background: linear-gradient(135deg, #82bb41 0%, #6fa532 100%); color: #fff; }
        .btn-primary:hover { transform: translateY(-1px); box-shadow: 0 4px 15px rgba(130,187,65,0.4); }
        .btn-primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; }
        .btn-secondary { background: #f0f0f0; color: #555; }
        .btn-secondary:hover { background: #e0e0e0; }
        .btn-outline { background: transparent; color: #82bb41; border: 2px solid #82bb41; }
        .btn-outline:hover { background: #82bb41; color: #fff; }
        .btn-danger { background: #e74c3c; color: #fff; }
        .btn-danger:hover { background: #c0392b; }
        .btn-sm { padding: 6px 16px; font-size: 13px; }
        .btn-xs { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
        .btn-icon { background:none; border:none; cursor:pointer; font-size:16px; padding:2px 4px; opacity:0.5; transition:opacity 0.2s; }
        .btn-icon:hover { opacity:1; }
        .ico-btn { display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0; border-radius:8px; border:1.5px solid #ddd; background:#fff; cursor:pointer; transition:all 0.15s; color:#555; }
        .ico-btn:hover { background:#f5f5f5; border-color:#aaa; color:#333; }
        .ico-btn svg { width:16px; height:16px; }
        .ico-btn.green { border-color:#82bb41; color:#82bb41; }
        .ico-btn.green:hover { background:#82bb41; color:#fff; }
        .ico-btn.blue { border-color:#3498db; color:#3498db; }
        .ico-btn.blue:hover { background:#3498db; color:#fff; }
        .ico-btn.red { border-color:#e74c3c; color:#e74c3c; }
        .ico-btn.red:hover { background:#e74c3c; color:#fff; }
        .ico-btn.purple { border-color:#5a67d8; color:#5a67d8; }
        .ico-btn.purple:hover { background:#5a67d8; color:#fff; }
        .ico-btn.dark { border-color:#141e46; color:#141e46; }
        .ico-btn.dark:hover { background:#141e46; color:#fff; }
        .ico-btn.sm { width:28px; height:28px; }
        .ico-btn.sm svg { width:14px; height:14px; }

        /* Status bar */
        .status-bar {
            display: flex; align-items: center; gap: 16px; padding: 12px 24px;
            background: #fff; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,0.05);
            margin-bottom: 20px; flex-wrap: wrap;
        }
        .status-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
        .status-dot.green { background: #82bb41; }
        .status-dot.yellow { background: #f5a623; }
        .status-dot.red { background: #e74c3c; }
        .status-dot.blue { background: #3498db; }
        .status-text { font-size: 13px; color: #666; }
        .status-text strong { color: #2d2d2d; }

        /* Saved months pills */
        .saved-months { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
        .month-pill {
            padding: 6px 14px; border-radius: 50px; font-size: 13px; font-weight: 600;
            cursor: pointer; background: #f4fae9; color: #5a8a25;
            border: 1px solid #c8e6a0; transition: all 0.2s;
        }
        .month-pill:hover { background: #82bb41; color: #fff; border-color: #82bb41; }

        /* Loading */
        .loading { display: none; text-align: center; padding: 40px; }
        .loading.active { display: block; }
        .spinner { display: inline-block; width: 40px; height: 40px; border: 4px solid #e0e0e0; border-top-color: #82bb41; border-radius: 50%; animation: spin 0.8s linear infinite; }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* Solario Loader */
        .solario-loader-img {
            width: 48px; height: 48px;
            animation: solario-spin 1.5s linear infinite;
            display: block; margin: 0 auto 12px;
        }
        @keyframes solario-spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        /* Table */
        .table-wrapper { overflow-x: auto; }
        table { width: 100%; border-collapse: collapse; font-size: 13px; }
        th {
            background: #f9fafb; padding: 10px 12px; text-align: left; font-weight: 700;
            color: #555; text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px;
            border-bottom: 2px solid #eee; white-space: nowrap; cursor: pointer; user-select: none;
        }
        th:hover { color: #82bb41; }
        td { padding: 10px 12px; border-bottom: 1px solid #f0f0f0; white-space: nowrap; }
        tr:hover td { background: #f9fafb; }
        .amount { text-align: right; font-variant-numeric: tabular-nums; }
        .row-warning { background: #fff8e6 !important; }
        .row-warning td { background: #fff8e6 !important; }
        .row-storno { color: #c0392b; }
        .row-storno td { background: #fef0ef !important; }
        .row-override { }
        .row-override td { background: #fffde7 !important; }

        /* Badge */
        .badge { display: inline-block; padding: 3px 10px; border-radius: 50px; font-size: 11px; font-weight: 700; }
        .badge-at { background: #e8f5e9; color: #2e7d32; }
        .badge-de { background: #e3f2fd; color: #1565c0; }
        .badge-ig { background: #f3e5f5; color: #7b1fa2; }
        .badge-free { background: #fff3e0; color: #e65100; }
        .badge-unknown { background: #f5f5f5; color: #888; }
        .badge-cash { background: #e8f5e9; color: #2e7d32; }
        .badge-card { background: #e3f2fd; color: #1565c0; }
        .badge-other { background: #f3e5f5; color: #7b1fa2; }
        .badge-demo { background: #fff3e0; color: #e65100; }
        .badge-signed { background: #e8f5e9; color: #2e7d32; }
        .badge-special { background: #fce4ec; color: #c62828; }
        .badge-eingang { background: #e8f5e9; color: #2e7d32; }
        .badge-ausgang { background: #fce4ec; color: #c62828; }

        /* Category sections */
        .cat-section { margin-bottom: 16px; }
        .cat-header {
            display: flex; align-items: center; justify-content: space-between;
            padding: 12px 16px; background: #f9fafb; border-radius: 8px;
            cursor: pointer; transition: background 0.2s;
        }
        .cat-header:hover { background: #f0f0f0; }
        .cat-header h4 { font-size: 14px; display: flex; align-items: center; gap: 8px; }
        .cat-header .cat-totals { font-size: 13px; color: #666; font-family: 'Archivo', sans-serif; }
        .cat-details { display: none; padding: 12px 16px; }
        .cat-details.open { display: block; }
        .chevron { transition: transform 0.2s; display: inline-block; }
        .chevron.open { transform: rotate(90deg); }

        /* UVA Box */
        .uva-box { background: linear-gradient(135deg, #f4fae9 0%, #e8f5e9 100%); border: 2px solid #82bb41; border-radius: 12px; padding: 24px; }
        .uva-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 16px; }
        .uva-field { background: #fff; border-radius: 8px; padding: 16px; text-align: center; box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
        .uva-field .label { font-size: 12px; color: #777; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 4px; }
        .uva-field .kz { font-family: 'Hepta Slab', serif; font-size: 14px; font-weight: 700; color: #82bb41; }
        .uva-field .value { font-size: 22px; font-weight: 700; color: #2d2d2d; margin-top: 4px; }
        .uva-section-header { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: #555; background: #f8f9fa; padding: 8px 12px; border-radius: 6px; margin-bottom: 4px; }

        /* DE ELSTER compact KZ table */
        .de-kz-table { width: 100%; border-collapse: collapse; font-size: 13px; }
        .de-kz-table th { text-align: left; padding: 6px 10px; font-size: 11px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid #bbdefb; }
        .de-kz-table th.amount { text-align: right; }
        .de-kz-table td { padding: 8px 10px; border-bottom: 1px solid #e3f2fd; }
        .de-kz-table td.kz-num { font-family: 'Hepta Slab', serif; font-weight: 700; color: #0d47a1; white-space: nowrap; width: 60px; }
        .de-kz-table td.kz-val { text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
        .de-kz-table tr.kz-section td { padding: 6px 10px 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: #555; background: rgba(227,242,253,0.5); border-bottom: 1px solid #bbdefb; }
        .de-kz-table tr.kz-result td { border-top: 2px solid #333; font-weight: 700; font-size: 14px; }

        /* Warnings */
        .warning-box { background: #fff8e6; border-left: 4px solid #f5a623; border-radius: 0 8px 8px 0; padding: 16px; }
        .warning-item { font-size: 13px; color: #8a6d00; padding: 4px 0; }
        .uva-check-item { padding: 10px 14px; margin-bottom: 6px; border-radius: 6px; font-size: 13px; line-height: 1.5; display: flex; gap: 10px; align-items: flex-start; }
        .uva-check-item .check-icon { flex-shrink: 0; font-size: 16px; margin-top: 1px; }
        .uva-check-item .check-msg { flex: 1; }
        .uva-check-item .check-code { font-size: 11px; color: #888; font-family: monospace; }
        .uva-check-error { background: #fef2f2; border-left: 4px solid #dc2626; color: #991b1b; }
        .uva-check-warning { background: #fffbeb; border-left: 4px solid #f59e0b; color: #92400e; }
        .uva-check-info { background: #eff6ff; border-left: 4px solid #3b82f6; color: #1e40af; }
        .uva-check-ok { background: #f0fdf4; border-left: 4px solid #22c55e; color: #166534; padding: 12px 14px; border-radius: 6px; font-size: 14px; display: flex; align-items: center; gap: 10px; }

        /* Stats row */
        .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 20px; }
        .stat-card { background: #fff; border-radius: 10px; padding: 16px; text-align: center; box-shadow: 0 2px 10px rgba(0,0,0,0.05); }
        .stat-card .stat-label { font-size: 11px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
        .stat-card .stat-value { font-size: 24px; font-weight: 700; margin-top: 4px; }
        .stat-card .stat-value.green { color: #82bb41; }

        /* Kassenstand highlight */
        .kassenstand-box {
            background: linear-gradient(135deg, #82bb41 0%, #6fa532 100%);
            border-radius: 12px; padding: 24px; color: #fff; text-align: center;
            margin-bottom: 20px; box-shadow: 0 4px 20px rgba(130,187,65,0.3);
        }
        .kassenstand-box .ks-label { font-size: 14px; opacity: 0.9; text-transform: uppercase; letter-spacing: 1px; }
        .kassenstand-box .ks-value { font-size: 42px; font-weight: 800; font-family: 'Hepta Slab', serif; margin-top: 4px; }
        .kassenstand-box .ks-sub { font-size: 13px; opacity: 0.8; margin-top: 8px; }

        /* Items table for Kasse */
        .items-table { width: 100%; border-collapse: collapse; }
        .items-table th { background: #f9fafb; padding: 10px 12px; text-align: left; font-weight: 700; color: #555; font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; border-bottom: 2px solid #eee; }
        .items-table td { padding: 8px 12px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
        .items-table input, .items-table select { padding: 8px 10px; font-size: 13px; width: 100%; }

        /* Totals */
        .totals-row { display: flex; justify-content: flex-end; gap: 24px; padding: 16px 0; border-top: 2px solid #eee; margin-top: 8px; }
        .total-item { text-align: right; }
        .total-item .total-label { font-size: 12px; color: #888; text-transform: uppercase; }
        .total-item .total-value { font-size: 20px; font-weight: 700; }
        .total-item .total-value.green { color: #82bb41; }

        /* Payment */
        .payment-options { display: flex; gap: 12px; margin: 16px 0; }
        .payment-option {
            flex: 1; padding: 14px 16px; border: 2px solid #e0e0e0; border-radius: 10px;
            text-align: center; cursor: pointer; transition: all 0.2s; font-weight: 600;
        }
        .payment-option:hover { border-color: #82bb41; }
        .payment-option.selected { border-color: #82bb41; background: #f4fae9; color: #5a8a25; }
        .payment-option .icon { font-size: 24px; margin-bottom: 4px; }

        /* Receipt preview */
        .receipt-preview {
            background: #fff; border: 1px dashed #ccc; border-radius: 4px; padding: 24px;
            max-width: 400px; margin: 0 auto; font-family: 'Courier New', monospace; font-size: 13px; line-height: 1.5;
        }
        .receipt-preview .receipt-header { text-align: center; margin-bottom: 12px; border-bottom: 1px dashed #999; padding-bottom: 12px; }
        .receipt-preview .receipt-header .company-name { font-weight: 700; font-size: 15px; }
        .receipt-preview .receipt-items { margin: 12px 0; }
        .receipt-preview .receipt-item { display: flex; justify-content: space-between; }
        .receipt-preview .receipt-totals { border-top: 1px dashed #999; padding-top: 8px; margin-top: 8px; }
        .receipt-preview .receipt-totals .total-line { display: flex; justify-content: space-between; font-weight: 700; }
        .receipt-preview .receipt-footer { text-align: center; margin-top: 12px; border-top: 1px dashed #999; padding-top: 12px; font-size: 11px; color: #666; }
        .receipt-preview .qr-code { text-align: center; margin: 12px 0; }
        .receipt-preview .qr-code img { max-width: 180px; }
        .receipt-preview .signature-info { font-size: 10px; color: #999; text-align: center; word-break: break-all; }

        /* Collapsible */
        .collapsible-header { padding: 14px 24px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; transition: background 0.2s; }
        .collapsible-header:hover { background: #f9fafb; }
        .collapsible-body { display: none; }
        .collapsible-body.open { display: block; }

        /* Kassenbuch form row */
        .kb-form { display: grid; grid-template-columns: 1fr 1fr 2fr 1fr auto; gap: 12px; align-items: end; }

        /* Modal */
        .modal-overlay { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.5); z-index: 500; justify-content: center; align-items: center; }
        .modal-overlay.show { display: flex; }
        .modal { background: #fff; border-radius: 12px; padding: 32px; max-width: 480px; width: 90%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); }
        .modal h3 { margin-bottom: 16px; }
        .modal-wide { max-width: 1100px; }

        /* Document preview modal */
        .doc-preview-container { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
        .doc-preview-left { border-right: 1px solid #eee; padding-right: 24px; }
        .doc-preview-right { overflow-y: auto; max-height: 70vh; }
        .doc-preview-frame { width: 100%; min-height: 500px; border: 1px solid #eee; border-radius: 8px; background: #fafafa; }
        .doc-preview-frame img { width: 100%; border-radius: 8px; }
        .doc-preview-frame iframe { width: 100%; min-height: 500px; border: none; border-radius: 8px; }
        .doc-detail-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; }
        .doc-detail-row .lbl { color: #888; font-weight: 600; }
        .doc-detail-row .val { font-weight: 700; text-align: right; }
        .doc-positions-table { width: 100%; border-collapse: collapse; font-size: 12px; margin-top: 12px; }
        .doc-positions-table th { background: #f9fafb; padding: 8px 10px; text-align: left; font-weight: 700; color: #555; font-size: 11px; text-transform: uppercase; border-bottom: 2px solid #eee; }
        .doc-positions-table td { padding: 8px 10px; border-bottom: 1px solid #f0f0f0; }

        /* Archive controls */
        .archive-controls { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
        .archive-controls select, .archive-controls input { padding: 8px 12px; font-size: 13px; }
        .archive-pagination { display: flex; align-items: center; gap: 8px; justify-content: center; margin-top: 16px; padding: 12px 0; }
        .archive-pagination button { padding: 6px 14px; border-radius: 6px; border: 1px solid #ddd; background: #fff; cursor: pointer; font-size: 13px; font-weight: 600; }
        .archive-pagination button:hover { background: #f4fae9; border-color: #82bb41; }
        .archive-pagination button:disabled { opacity: 0.4; cursor: not-allowed; }
        .archive-pagination button.active { background: #82bb41; color: #fff; border-color: #82bb41; }
        .archive-pagination .page-info { font-size: 13px; color: #888; }
        .preview-btn { padding: 4px 10px; border-radius: 6px; border: 1px solid #82bb41; background: #f4fae9; color: #5a8a25; cursor: pointer; font-size: 11px; font-weight: 700; transition: all 0.2s; }
        .preview-btn:hover { background: #82bb41; color: #fff; }
        .archive-row { cursor: pointer; transition: background 0.15s; }
        .archive-row:hover td { background: #f4fae9 !important; }
        .sort-indicator { font-size: 10px; margin-left: 4px; }

        @media (max-width: 900px) {
            .doc-preview-container { grid-template-columns: 1fr; }
            .doc-preview-left { border-right: none; padding-right: 0; border-bottom: 1px solid #eee; padding-bottom: 16px; }
        }

        /* Kasse Tabs */
        .kasse-tabs { display: flex; gap: 4px; margin-bottom: 20px; }
        .kasse-tab {
            padding: 10px 24px; border-radius: 50px 50px 0 0; font-weight: 700; font-size: 14px;
            cursor: pointer; background: #e8e8e8; color: #888; transition: all 0.2s;
        }
        .kasse-tab.active { background: #fff; color: #82bb41; box-shadow: 0 -2px 10px rgba(0,0,0,0.05); }
        .kasse-tab:hover { color: #82bb41; }

        /* Kasse Banner */
        .kasse-banner {
            padding: 16px 20px;
            border-radius: 10px;
            margin-bottom: 16px;
            display: flex;
            gap: 14px;
            align-items: flex-start;
            font-size: 13px;
            line-height: 1.6;
        }
        .kasse-banner.hidden { display: none !important; }
        .kasse-banner-error {
            background: #fdf0ef;
            border: 1px solid #f5c6cb;
            color: #721c24;
        }
        .kasse-banner-warning {
            background: #fff8e1;
            border: 1px solid #ffe082;
            color: #856404;
        }
        .kasse-banner-icon {
            font-size: 24px;
            flex-shrink: 0;
            line-height: 1;
        }
        .kasse-banner-content p {
            margin: 4px 0 0 0;
        }

        /* Kasse Summary Cards */
        .kasse-summary-row {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 16px;
            margin-bottom: 20px;
        }
        .kasse-summary-card {
            background: #fff;
            border-radius: 10px;
            padding: 16px 20px;
            box-shadow: 0 1px 6px rgba(0,0,0,0.06);
            text-align: center;
        }
        .kasse-summary-label {
            font-size: 12px;
            color: #888;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            margin-bottom: 4px;
        }
        .kasse-summary-value {
            font-size: 22px;
            font-weight: 700;
            color: #333;
        }
        .kasse-summary-sub {
            font-size: 12px;
            color: #aaa;
            margin-top: 2px;
        }
        @media (max-width: 600px) {
            .kasse-summary-row { grid-template-columns: 1fr; }
        }

        /* Toast */
        .toast {
            position: fixed; bottom: 24px; right: 24px; background: #2d2d2d; color: #fff;
            padding: 14px 24px; border-radius: 10px; font-size: 14px;
            box-shadow: 0 4px 20px rgba(0,0,0,0.2); transform: translateY(100px);
            opacity: 0; transition: all 0.3s; z-index: 1000;
        }
        .toast.show { transform: translateY(0); opacity: 1; }
        .toast.error { background: #c0392b; }
        .toast.success { background: #27ae60; }

        .hidden { display: none !important; }

        /* Section content */
        .section-content { padding: 0; }

        /* Wizard steps */
        .wizard-steps { display: flex; gap: 0; margin-bottom: 24px; }
        .wizard-step {
            flex: 1; padding: 14px 16px; text-align: center; font-weight: 700; font-size: 14px;
            background: #f0f0f0; color: #888; position: relative; cursor: default;
        }
        .wizard-step:first-child { border-radius: 10px 0 0 10px; }
        .wizard-step:last-child { border-radius: 0 10px 10px 0; }
        .wizard-step.active { background: #82bb41; color: #fff; }
        .wizard-step.done { background: #d4edbc; color: #5a8a25; }
        .wizard-step .step-num { display: inline-block; width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.3); line-height: 26px; font-size: 13px; margin-right: 6px; }
        .wizard-step.active .step-num { background: rgba(255,255,255,0.4); }

        /* Drop zone */
        .drop-zone {
            border: 3px dashed #ccc; border-radius: 12px; padding: 48px 24px; text-align: center;
            cursor: pointer; transition: all 0.3s; background: #fafafa;
        }
        .drop-zone:hover, .drop-zone.drag-over { border-color: #82bb41; background: #f4fae9; }
        .drop-zone .drop-icon { font-size: 48px; color: #ccc; margin-bottom: 12px; }
        .drop-zone.drag-over .drop-icon { color: #82bb41; }

        /* Confidence bar */
        .confidence-bar { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
        .confidence-fill { height: 6px; border-radius: 3px; background: #82bb41; }
        .confidence-text { font-size: 11px; color: #888; white-space: nowrap; }

        /* Finance summary cards */
        .finance-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 24px; }
        .finance-card {
            background: #fff; border-radius: 12px; padding: 20px; text-align: center;
            box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        }
        .finance-card .fc-label { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: 0.5px; }
        .finance-card .fc-value { font-size: 28px; font-weight: 800; font-family: 'Hepta Slab', serif; margin-top: 4px; }
        .finance-card .fc-value.positive { color: #82bb41; }
        .finance-card .fc-value.negative { color: #e74c3c; }
        .finance-card .fc-value.neutral { color: #2d2d2d; }

        /* Payment status badges */
        .badge-bezahlt { background: #e8f5e9; color: #2e7d32; }
        .badge-offen { background: #fff3e0; color: #e65100; }
        .badge-ueberfaellig { background: #fce4ec; color: #c62828; }

        /* Chart containers */
        .chart-container { position: relative; height: 300px; margin: 16px 0; }

        /* Belege Review Layout (Step 2) */
        .belege-review-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
        .belege-preview-pane { position: sticky; top: 80px; }
        .belege-preview-frame { width: 100%; min-height: 400px; border: 1px solid #eee; border-radius: 8px; background: #fafafa; overflow: hidden; }
        .belege-preview-frame img { width: 100%; border-radius: 8px; }
        .belege-preview-frame iframe { width: 100%; min-height: 500px; border: none; border-radius: 8px; }
        .belege-preview-placeholder { display: flex; align-items: center; justify-content: center; height: 400px; color: #ccc; font-size: 48px; }

        /* AI Verification */
        .ai-verify-box { margin-top: 12px; padding: 12px 16px; border-radius: 8px; font-size: 13px; }
        .ai-verify-box.agree { background: #f4fae9; border: 1px solid #c8e6a0; }
        .ai-verify-box.disagree { background: #fff8e6; border: 1px solid #f5d680; }
        .ai-verify-box.error { background: #fef0ef; border: 1px solid #f5c6c0; }
        .ai-verify-icon { font-size: 16px; margin-right: 6px; }
        .ai-reasoning { margin-top: 6px; font-size: 12px; color: #666; font-style: italic; }

        /* Inbox status */
        .inbox-status-bar { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: #f9fafb; border-radius: 8px; margin-bottom: 16px; font-size: 13px; }

        /* Patterns table */
        .pattern-status { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; }
        .pattern-detected { background: #fff3e0; color: #e65100; }
        .pattern-confirmed { background: #e8f5e9; color: #2e7d32; }
        .pattern-rejected { background: #fef0ef; color: #c62828; }

        @media (max-width: 900px) {
            .sidebar { transform: translateX(-100%); }
            .sidebar.open { transform: translateX(0); }
            .sidebar-toggle { display: block; }
            .topbar { left: 0; }
            .main-content { margin-left: 0; }
            .sidebar-overlay.active { display: block; }
            .belege-review-layout { grid-template-columns: 1fr; }
        }
        /* Finance sub-tabs */
        .fin-subtab {
            padding: 7px 18px; border: none; border-radius: 6px; font-size: 13px; font-weight: 600;
            font-family: 'Archivo', sans-serif; cursor: pointer; background: transparent; color: #64748b;
            transition: all 0.15s;
        }
        .fin-subtab:hover { background: #e2e8f0; color: #334155; }
        .fin-subtab.active { background: #fff; color: var(--brand-green); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

        /* Wiederkehrende Zahlungen */
        .wk-filter-tab {
            padding: 6px 14px; border: none; background: transparent; font-size: 12px;
            font-weight: 600; color: #64748b; cursor: pointer; border-radius: 6px; transition: all 0.15s;
        }
        .wk-filter-tab:hover { background: #e2e8f0; }
        .wk-filter-tab.active { background: #fff; color: var(--brand-green); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }
        .wk-status-detected { display:inline-block; padding:3px 10px; border-radius:50px; font-size:11px; font-weight:700; background:#fff3e0; color:#e65100; }
        .wk-status-confirmed { display:inline-block; padding:3px 10px; border-radius:50px; font-size:11px; font-weight:700; background:#e8f5e9; color:#2e7d32; }
        .wk-status-rejected { display:inline-block; padding:3px 10px; border-radius:50px; font-size:11px; font-weight:700; background:#f5f5f5; color:#888; }
        .wk-autobook-badge { display:inline-block; padding:1px 6px; border-radius:4px; font-size:10px; font-weight:700; background:#dbeafe; color:#1d4ed8; margin-left:4px; }
        .wk-category-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:11px; font-weight:600; background:#f1f5f9; color:#475569; }
        .wk-label-badge { display:inline-block; padding:2px 8px; border-radius:4px; font-size:10px; font-weight:600; background:#ede9fe; color:#6d28d9; margin-left:2px; }
        .aw-subtab {
            padding: 8px 16px; border: none; background: transparent; font-size: 12px;
            font-weight: 600; color: #64748b; cursor: pointer; border-radius: 6px; transition: all 0.15s;
        }
        .aw-subtab:hover { background: #e2e8f0; }
        .aw-subtab.active { background: #fff; color: var(--brand-green); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

        /* Kunden-Detail Tabs */
        .kd-tab {
            padding: 10px 20px;
            border: none;
            background: none;
            font-size: 13px;
            font-weight: 600;
            color: #888;
            cursor: pointer;
            border-bottom: 2px solid transparent;
            margin-bottom: -2px;
            transition: all 0.2s;
        }
        .kd-tab:hover { color: #333; }
        .kd-tab.active { color: #82bb41; border-bottom-color: #82bb41; }

        /* Timeline */
        .kd-timeline { position: relative; padding-left: 30px; }
        .kd-timeline::before {
            content: '';
            position: absolute;
            left: 12px;
            top: 0;
            bottom: 0;
            width: 2px;
            background: #e0e0e0;
        }
        .kd-timeline-item {
            position: relative;
            padding: 12px 0 12px 20px;
            border-bottom: 1px solid #f5f5f5;
        }
        .kd-timeline-item::before {
            content: '';
            position: absolute;
            left: -24px;
            top: 16px;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: #82bb41;
            border: 2px solid #fff;
            box-shadow: 0 0 0 2px #82bb41;
        }
        .kd-timeline-item.payment::before { background: #2e7d32; box-shadow: 0 0 0 2px #2e7d32; }
        .kd-timeline-item.invoice::before { background: #3498db; box-shadow: 0 0 0 2px #3498db; }
        .kd-timeline-item.account::before { background: #f39c12; box-shadow: 0 0 0 2px #f39c12; }
        .kd-timeline-date { font-size: 11px; color: #888; }
        .kd-timeline-title { font-size: 14px; font-weight: 600; color: #333; margin: 2px 0; }
        .kd-timeline-details { font-size: 12px; color: #666; }

        /* Sub-tabs (Jahresabschluss) */
        .sub-tabs { display: flex; gap: 4px; background: #f1f5f9; border-radius: 8px; padding: 3px; flex-wrap: wrap; }
        .sub-tab {
            padding: 8px 16px; border: none; background: transparent; font-size: 13px;
            font-weight: 600; color: #64748b; cursor: pointer; border-radius: 6px; transition: all 0.15s;
            font-family: 'Archivo', sans-serif;
        }
        .sub-tab:hover { background: #e2e8f0; color: #334155; }
        .sub-tab.active { background: #fff; color: var(--brand-green); box-shadow: 0 1px 3px rgba(0,0,0,0.1); }

        /* Jahresabschluss KPI cards */
        .ja-kpi {
            background: #fff; border: 1px solid #e0e0e0; border-radius: 6px;
            padding: 12px 16px; text-align: center;
        }
        .ja-kpi-label {
            font-size: 11px; color: #666; text-transform: uppercase;
            letter-spacing: 0.5px; margin-bottom: 4px;
        }
        .ja-kpi-value {
            font-size: 18px; font-weight: 700; font-family: 'Archivo', monospace, sans-serif;
        }

        /* Jahresabschluss section headers */
        .ja-section-header {
            font-size: 15px; font-weight: 700; color: #1a237e;
            padding: 8px 0; margin: 24px 0 8px 0;
            border-bottom: 2px solid #1a237e;
            text-transform: uppercase; letter-spacing: 0.5px;
        }

        /* Bilanz Grid */
        .ja-bilanz-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 8px; }
        .ja-bilanz-side { min-width: 0; }

        /* Jahresabschluss tables */
        .ja-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.4; }
        .ja-table thead tr { background: #37474f; color: #fff; }
        .ja-table thead th { padding: 6px 10px; font-weight: 600; font-size: 12px; text-transform: uppercase; letter-spacing: 0.3px; }
        .ja-th-left { text-align: left; }
        .ja-th-right { text-align: right; }
        .ja-table tbody tr { border-bottom: 1px solid #eceff1; }
        .ja-table tbody tr:hover { background: #f5f7fa; }
        .ja-table td { padding: 4px 10px; }

        /* Amount cells */
        .ja-amt { text-align: right; font-family: 'Archivo', monospace, sans-serif; font-variant-numeric: tabular-nums; white-space: nowrap; }
        .ja-bold { font-weight: 700; }
        .ja-negative { color: #c62828; }
        .ja-mono { font-family: monospace; font-weight: 600; font-size: 12px; color: #546e7a; }
        .ja-indent { padding-left: 28px !important; color: #555; }

        /* Bilanz row types */
        .ja-row-group td { font-weight: 600; color: #1a237e; padding-top: 8px; border-bottom: 1px solid #cfd8dc; }
        .ja-row-subsection td { font-weight: 500; padding-left: 20px !important; background: #f8f9fa; }
        .ja-row-detail td { padding-left: 36px !important; font-size: 12px; color: #555; }
        .ja-row-account td { color: #555; }
        .ja-row-total { background: #1a237e !important; color: #fff !important; }
        .ja-row-total td { font-weight: 700; padding: 8px 10px; color: #fff !important; border: none; }
        .ja-row-total .ja-amt { color: #fff !important; }

        /* GuV Staffelform */
        .ja-guv-table { max-width: 700px; }
        .ja-guv-nr { width: 30px; color: #888; font-size: 12px; text-align: right; padding-right: 8px; }
        .ja-guv-label { padding-left: 4px; }
        .ja-guv-bold td { font-weight: 700; }
        .ja-guv-bold .ja-guv-label { color: #1a237e; }
        .ja-guv-sep td { border-top: 2px solid #37474f; padding-top: 6px; }

        /* Kontennachweis / Detail */
        .ja-detail-section { margin-bottom: 16px; }
        .ja-detail-section-title {
            font-size: 13px; font-weight: 700; color: #37474f;
            padding: 6px 0; margin: 16px 0 4px 0;
            border-bottom: 1px solid #cfd8dc; text-transform: uppercase; letter-spacing: 0.3px;
        }
        .ja-detail-group { margin-bottom: 2px; }
        .ja-detail-summary {
            display: flex; justify-content: space-between; align-items: center;
            padding: 6px 10px; background: #f5f7fa; border: 1px solid #e0e0e0;
            border-radius: 4px; cursor: pointer; font-size: 13px; font-weight: 600;
            color: #37474f; user-select: none;
        }
        .ja-detail-summary:hover { background: #eceff1; }
        .ja-detail-total { font-family: 'Archivo', monospace, sans-serif; font-variant-numeric: tabular-nums; color: #1a237e; }
        .ja-detail-table { margin: 4px 0 8px 0; border: 1px solid #e0e0e0; border-radius: 4px; }
        .ja-detail-table td { font-size: 12px; padding: 3px 8px; }
        .ja-detail-sum td { font-weight: 700; border-top: 2px solid #37474f; background: #f5f7fa; padding: 5px 8px; }

        /* Bank Assign Modal Tabs */
        .ba-tab {
            padding: 8px 16px; border: none; background: none; cursor: pointer;
            font-family: 'Archivo', sans-serif; font-size: 13px; color: #888;
            border-bottom: 2px solid transparent; transition: all 0.2s;
        }
        .ba-tab:hover { color: #333; }
        .ba-tab.active { color: var(--brand-green-dark); border-bottom-color: var(--brand-green); font-weight: 600; }
        .ba-suggestion-item {
            display: flex; justify-content: space-between; align-items: center;
            padding: 10px 14px; border-bottom: 1px solid #f0f0f0;
            cursor: pointer; font-size: 13px; transition: background 0.15s;
        }
        .ba-suggestion-item:hover { background: var(--brand-green-light); }
        .ba-suggestion-item:last-child { border-bottom: none; }
        .ba-auto-card {
            display: flex; justify-content: space-between; align-items: center;
            padding: 10px 14px; border: 1px solid #e0e0e0; border-radius: 8px;
            margin-bottom: 6px; font-size: 13px; cursor: pointer; transition: all 0.15s;
        }
        .ba-auto-card:hover { border-color: var(--brand-green); background: var(--brand-green-light); }

        /* Invoice form (Rechnungserstellung) - Overhauled */
        .inv-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
        .inv-form-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
        .inv-label { font-size: 12px; color: #666; display: block; margin-bottom: 4px; font-weight: 500; }
        .inv-input { width: 100%; padding: 9px 12px; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box; font-size: 14px; transition: border-color 0.2s; }
        .inv-input:focus { border-color: #82bb41; outline: none; box-shadow: 0 0 0 3px rgba(130,187,65,0.12); }
        .inv-section-label { font-size: 13px; font-weight: 600; color: #555; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 10px; padding-bottom: 4px; border-bottom: 1px solid #eee; }

        /* Form + Preview side-by-side layout */
        .inv-form-preview-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
        .inv-form-panel { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
        .inv-preview-panel { position: sticky; top: 80px; }
        .inv-preview-label { font-size: 13px; font-weight: 600; color: #888; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; }
        .inv-preview-page { background: #fff; border-radius: 4px; padding: 32px 28px; box-shadow: 0 2px 20px rgba(0,0,0,0.12); min-height: 500px; font-size: 12px; line-height: 1.5; border: 1px solid #e0e0e0; }

        /* Preview internal styles */
        .inv-pv-header { margin-bottom: 12px; }
        .inv-pv-sender { font-size: 8px; color: #999; border-bottom: 0.5px solid #ccc; padding-bottom: 3px; margin-bottom: 8px; }
        .inv-pv-recipient { font-size: 11px; margin-bottom: 16px; line-height: 1.6; }
        .inv-pv-title { font-size: 16px; font-weight: 700; margin-bottom: 8px; color: #222; }
        .inv-pv-meta { font-size: 11px; color: #555; margin-bottom: 16px; line-height: 1.8; }
        .inv-pv-table { width: 100%; border-collapse: collapse; font-size: 10px; margin-bottom: 12px; }
        .inv-pv-table th { background: #f5f5f5; border: 1px solid #ddd; padding: 4px 6px; text-align: center; font-weight: 600; font-size: 9px; }
        .inv-pv-table td { border: 1px solid #ddd; padding: 3px 6px; }
        .inv-pv-table .text-right { text-align: right; }
        .inv-pv-totals { text-align: right; margin-bottom: 12px; font-size: 11px; }
        .inv-pv-total-row { display: flex; justify-content: flex-end; gap: 20px; padding: 2px 0; }
        .inv-pv-total-row span:first-child { min-width: 100px; text-align: right; }
        .inv-pv-total-gross { font-weight: 700; font-size: 12px; border-top: 1px solid #333; padding-top: 4px; margin-top: 2px; }
        .inv-pv-notes { font-size: 10px; color: #666; margin-bottom: 12px; padding: 6px; background: #fafafa; border-radius: 4px; }
        .inv-pv-footer { font-size: 9px; color: #888; border-top: 0.5px solid #ccc; padding-top: 8px; margin-top: 12px; }

        /* Customer autocomplete dropdown */
        .inv-autocomplete-dropdown { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border: 1px solid #ddd; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,0.15); z-index: 100; max-height: 280px; overflow-y: auto; }
        .inv-ac-item { padding: 10px 14px; cursor: pointer; border-bottom: 1px solid #f0f0f0; transition: background 0.15s; }
        .inv-ac-item:last-child { border-bottom: none; }
        .inv-ac-item:hover { background: #f4fae9; }
        .inv-ac-new { background: #fafafa; }
        .inv-ac-new:hover { background: #f0f7e4; }

        /* Position rows */
        .inv-position-row { display: flex; gap: 8px; margin-bottom: 8px; align-items: center; flex-wrap: wrap; }
        .inv-position-row input { min-width: 0; box-sizing: border-box; }
        .inv-position-row .inv-desc { flex: 3 1 180px; padding: 8px; border: 1px solid #ddd; border-radius: 6px; }
        .inv-position-row .inv-qty { flex: 0.5 1 60px; padding: 8px; border: 1px solid #ddd; border-radius: 6px; }
        .inv-position-row .inv-price { flex: 1 1 90px; padding: 8px; border: 1px solid #ddd; border-radius: 6px; }
        .inv-totals-bar { display: flex; gap: 20px; margin-bottom: 16px; padding: 12px; background: #f8f9fa; border-radius: 8px; flex-wrap: wrap; }
        .inv-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

        @media (max-width: 1200px) {
            .inv-form-preview-layout { grid-template-columns: 1fr; }
            .inv-preview-panel { position: static; }
        }
        @media (max-width: 900px) {
            .ja-bilanz-grid { grid-template-columns: 1fr; }
            #ja-stats { grid-template-columns: repeat(2, 1fr) !important; }
            .inv-form-grid { grid-template-columns: 1fr; }
            .inv-form-grid-3 { grid-template-columns: 1fr; }
        }
        @media (max-width: 768px) {
            .container { padding: 12px; }
            .controls { flex-direction: column; align-items: stretch; }
            .uva-grid { grid-template-columns: 1fr; }
            .payment-options { flex-direction: column; }
            .totals-row { flex-direction: column; align-items: flex-end; }
            .kb-form { grid-template-columns: 1fr; }
            .kassenstand-box .ks-value { font-size: 32px; }
            .fin-subtab { padding: 6px 12px; font-size: 12px; }
            .kd-tab { padding: 8px 12px; font-size: 12px; }
            .inv-position-row { gap: 6px; }
            .inv-totals-bar { flex-direction: column; gap: 8px; }
        }