/* =========================================================
   TECDOOR Massaufnahme - Modern UI (Blue/Orange)
   Logo-Farben: Blau #1e3c6e, Orange #f39200
   ========================================================= */

/* ---- reset / base ---- */
:root {
    --blue-900: #1e3c6e;
    --blue-800: #254785;
    --blue-700: #2d539c;
    --blue-600: #3460b3;
    --orange-600: #f39200;
    --orange-500: #ffa31a;
    --bg: #eef3f8;
    --card: #ffffff;
    --text: #1f2937;
    --muted: #6b7280;
    --border: #e5e7eb;
    --shadow: 0 10px 40px rgba(0,0,0,.10);
    --shadow2: 0 15px 50px rgba(0,0,0,.15);
    --radius-xl: 12px;
    --radius-lg: 10px;
    --radius-md: 7px;
    --radius: 6px;
    --focus: 0 0 0 2px rgba(243,146,0,.20);
    --touch-min: 32px;
    --spacing-sm: 6px;
    --spacing-md: 12px;
    --spacing-lg: 18px;
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-300: #d1d5db;
}

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    height: 100%;
    -webkit-text-size-adjust: 100%;
}

body {
    height: 100vh;
    height: 100dvh;
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
    font-size: 16px;
    color: var(--text);
    background: linear-gradient(135deg, var(--blue-800) 0%, var(--blue-900) 100%);
    -webkit-overflow-scrolling: touch;
    overflow: hidden; /* prevent double-scroll — .app-content is the scroll container */
    display: flex;
    flex-direction: column;
}

.app {
    height: 100vh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* Safe area padding für Tablets mit Notch */
@supports (padding: env(safe-area-inset-bottom)) {
    .content {
        padding-bottom: calc(40px + env(safe-area-inset-bottom));
    }
    .topbar {
        padding-left: calc(16px + env(safe-area-inset-left));
        padding-right: calc(16px + env(safe-area-inset-right));
    }
}

/* ---- topbar ---- */
.topbar, .app-header {
    position: sticky;
    top: 0;
    z-index: 110; /* > quotation-type-bar (99) — stellt sicher, dass Notification-Dropdown immer vorne ist */
    padding: 8px 16px;
    background: linear-gradient(135deg, var(--blue-800) 0%, var(--blue-700) 100%);
    box-shadow: 0 10px 25px rgba(0,0,0,.18);
    display: flex;
    align-items: center;
    gap: 12px;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.icon-btn, .btn-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 0;
    background: rgba(255,255,255,.14);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: transform .15s ease, background .15s ease;
}

.icon-btn:hover, .btn-icon:hover {
    background: rgba(255,255,255,.20);
    transform: translateY(-1px);
}

.icon-btn:active, .btn-icon:active {
    transform: translateY(0);
}

.logo {
    height: 32px;
    width: auto;
    object-fit: contain;
}

.header-title {
    color: #fff;
    font-size: 20px;
    font-weight: 800;
    letter-spacing: .2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.user-name {
    color: #fff;
    font-size: 14px;
    opacity: 0.9;
}

/* ---- content wrapper ---- */
.content, .app-content {
    padding: 10px 12px 24px;
    background: var(--bg);
    flex: 1;
    min-height: 0;
    overflow-y: scroll; /* Scrollbar immer sichtbar */
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    scrollbar-gutter: stable; /* Platz für Scrollbar reservieren */
}

.view {
    max-width: 980px;
    margin: 0 auto;
}

/* Full-width views — Pipeline, Planung, Aufträge etc. nutzen volle Breite */
#viewList, #viewPlanung, #viewAuftraege, #viewRechnungskontrolle,
#viewKundenObjekt, #viewKennzahlen, #viewZonenplan, #viewRapporte,
#viewQuotation, #viewAngebote, #viewServicevertraege, #viewFakturierung, #viewOlmero,
#viewMahnwesen, #viewCashflow, #viewNachkalkulation, #viewVertriebsleitstand {
    max-width: 100%;
}

#viewNachkalkulation, #viewCashflow, #viewVertriebsleitstand { width:100%; min-width:0; box-sizing:border-box; }
#nkUebersichtInhalt, #cfWrap { width:100%; max-width:none; min-width:0; padding:8px; box-sizing:border-box; }
.nk-table-scroll { max-width:100%; overflow-x:auto; border:1px solid var(--border,#dbe4ef); border-radius:8px; }
#viewNachkalkulation .nk-overview-table { width:100%; font-size:13px; }
#viewNachkalkulation .nk-overview-table td,
#viewNachkalkulation .nk-overview-table th { padding:7px 9px; }
#viewNachkalkulation .nk-overview-table td:nth-child(3),
#viewNachkalkulation .nk-overview-table td:nth-child(4) { min-width:120px; max-width:260px; white-space:normal; overflow-wrap:anywhere; }
#viewNachkalkulation .nk-overview-table td:not(:nth-child(3)):not(:nth-child(4)) { white-space:nowrap; }

/* Quotation: Type-Bar & Tabs nutzen volle Breite, aber Formular bleibt lesbar */
#viewQuotation .form-container {
    max-width: 760px;
}

.view.hidden {
    display: none !important;
}

/* Auth Loading View (shown during auth check instead of login form) */
.auth-loading-view {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
}

.auth-loading-content {
    text-align: center;
}

.auth-loading-logo {
    height: 40px;
    border-radius: 4px;
    margin-bottom: 12px;
}

.auth-loading-text {
    font-size: 14px;
    color: #6b7280;
}

.auth-loading-spinner {
    margin-top: 12px;
    width: 32px;
    height: 32px;
    border: 3px solid #e5e7eb;
    border-top-color: #1e3c6e;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    display: inline-block;
}

/* ---- cards ---- */
.card, .form-container {
    background: var(--card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    padding: 14px;
    max-width: 980px;
    margin: 0 auto 12px auto;
}

.card h2, .form-section h3 {
    margin: 0 0 5px 0;
    font-size: 15px;
    font-weight: 700;
    color: var(--blue-900);
}

.form-section {
    margin-bottom: 14px;
}

.form-section h3 {
    padding-bottom: 5px;
    border-bottom: 2px solid var(--orange-600);
    margin-bottom: 10px;
}

.muted, .text-muted {
    color: var(--muted);
}

/* ---- fields ---- */
.field, .form-group {
    display: block;
    margin-bottom: 8px;
}

.field > span, .form-group > label {
    display: block;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 3px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

input[type="text"],
input[type="password"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="date"],
input[type="search"],
select,
textarea {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 7px;
    font-size: 13px;
    min-height: unset;
    outline: none;
    background: #fff;
    transition: border-color .15s ease, box-shadow .15s ease;
    touch-action: manipulation;
}

textarea {
    resize: vertical;
}

input:focus, select:focus, textarea:focus {
    border-color: var(--orange-600);
    box-shadow: var(--focus);
}

input::placeholder, textarea::placeholder {
    color: var(--gray-300);
}

.form-row {
    margin-bottom: 10px;
}

.form-row.two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.form-row.three-col {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
}

@media (max-width: 599px) {
    .form-row.two-col, .form-row.three-col {
        grid-template-columns: 1fr;
    }
}

.form-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* ---- buttons ---- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 0;
    border-radius: 8px;
    padding: 7px 14px;
    min-height: unset;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, background .15s ease, opacity .15s ease;
    user-select: none;
    touch-action: manipulation;
}

.btn-primary, .btn.primary {
    color: #fff;
    background: linear-gradient(135deg, var(--orange-600) 0%, var(--orange-500) 100%);
    box-shadow: 0 3px 10px rgba(243,146,0,.28);
}

.btn-primary:hover, .btn.primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(243,146,0,.34);
}

.btn-primary:active, .btn.primary:active {
    transform: translateY(0);
}

/* Neu-Button Dropdown */
.btn-new-dropdown {
    position: relative;
    display: inline-flex;
}
.new-menu {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.12);
    z-index: 100;
    min-width: 200px;
    padding: 6px;
    animation: newMenuIn 0.15s ease;
}
.new-menu.open { display: block; }
@keyframes newMenuIn {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}
.new-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 10px 14px;
    white-space: nowrap;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    color: #1e293b;
    border-radius: 7px;
    cursor: pointer;
    transition: background 0.15s;
}
.new-menu-item:hover {
    background: #f1f5f9;
}
.new-menu-icon {
    font-size: 18px;
    line-height: 1;
}
.new-menu-divider { height: 1px; background: #e2e8f0; margin: 4px 6px; }
.new-menu-item-accent { color: #c26b00 !important; font-weight: 700 !important; }

.btn-secondary, .btn.secondary {
    background: #f7fafc;
    border: 1px solid var(--border);
    color: #374151;
}

.btn-secondary:hover, .btn.secondary:hover {
    background: #eef2f7;
}

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
}

.btn:disabled {
    opacity: .55;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.btn-block {
    width: 100%;
}

/* ---- messages ---- */
.msg {
    margin-top: 10px;
    font-size: 13.5px;
    color: var(--muted);
}

.msg.ok {
    color: #0f766e;
}

.msg.err {
    color: #b91c1c;
    background: #fff1f2;
    border: 1px solid #fecdd3;
    padding: 10px 12px;
    border-radius: 12px;
}

/* ---- Login View ---- */
.login-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 100px);
    padding: 24px;
}

.login-logo {
    text-align: center;
    margin-bottom: 40px;
}

.login-logo-img, .login-logo img {
    max-width: 280px;
    height: auto;
    margin: 0 auto 20px;
}

.login-logo h1 {
    font-size: 28px;
    color: var(--blue-900);
    margin-bottom: 8px;
    font-weight: 900;
}

.login-logo p {
    color: var(--muted);
    font-size: 16px;
}

.login-form {
    width: 100%;
    max-width: 400px;
    background: var(--card);
    padding: 32px;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow2);
}

.login-hint {
    text-align: center;
    margin-top: 16px;
    font-size: 12px;
    color: var(--muted);
}

/* ---- search & filter ---- */
.search-bar {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.search-bar input {
    flex: 1;
}

.filter-chips {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
    overflow-x: auto;
    padding-bottom: 3px;
}

.chip {
    padding: 5px 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s;
}

.chip:hover {
    border-color: var(--blue-700);
    color: var(--blue-700);
}

.chip.active {
    background: var(--blue-700);
    border-color: var(--blue-700);
    color: white;
}

/* ---- list view ---- */
.list-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 10px;
}

@media (max-width: 599px) {
    .list-container {
        grid-template-columns: 1fr;
    }
}

.list-item {
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: 0 10px 40px rgba(0,0,0,.08);
    padding: 18px;
    cursor: pointer;
    transition: transform .18s ease, box-shadow .18s ease;
    border-left: 5px solid transparent;
}

.list-item:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow2);
}

.list-item.status-0 {
    border-left-color: var(--muted);
}

.list-item.status-1 {
    border-left-color: var(--orange-600);
}

.list-item.status-2 {
    border-left-color: #10b981;
}

.list-item-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 8px;
}

.list-item-title {
    font-size: 18px;
    font-weight: 900;
    color: #111827;
}

.list-item-id {
    font-size: 12px;
    color: var(--muted);
    background: var(--gray-100);
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
}

.list-item-details {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 14px;
    color: var(--muted);
}

.list-item-detail {
    display: flex;
    align-items: center;
    gap: 4px;
}

.list-item-detail svg {
    width: 16px;
    height: 16px;
}

.list-item-products {
    display: flex;
    gap: 6px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.product-badge {
    font-size: 11px;
    padding: 5px 10px;
    background: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-800) 100%);
    color: white;
    border-radius: 6px;
    font-weight: 700;
}

/* ---- Auftragstyp-Bar ---- */
.quotation-type-bar {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 16px;
    background: #f8fafc;
    border-bottom: 1px solid #e5e7eb;
    position: sticky;
    top: 0;
    z-index: 99;
}
/* Desktop: beide Zeilen als flex-row */
.qbar-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}
.qbar-spacer { flex: 1; }
.qbar-label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}
/* Total-Feld Desktop */
.qbar-total {
    display: flex;
    align-items: center;
    gap: 4px;
}
.qbar-total-label {
    font-size: 12px;
    color: var(--muted);
    white-space: nowrap;
    font-weight: 500;
}
.qbar-total-input {
    width: 120px;
    padding: 4px 8px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    text-align: right;
}
/* Button-Text (wird auf Handy ausgeblendet) */
.qbar-btn-label { /* sichtbar auf Desktop */ }
/* Legacy: label direkt in bar (z.B. headerManualSignBtn) */
.quotation-type-bar > label {
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    white-space: nowrap;
}
.btn-sp-header {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s;
}
.btn-sp-header:hover {
    background: #dbeafe;
    border-color: #93c5fd;
}
.btn-sp-header:active {
    background: #bfdbfe;
}
.quotation-type-select {
    padding: 4px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    background: white;
    color: var(--text);
    cursor: pointer;
}
.quotation-type-select:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.15);
}

/* ---- Tabs ---- */
.tabs {
    display: flex;
    gap: 3px;
    flex-wrap: wrap;
    background: var(--card);
    padding: 3px;
    border-radius: var(--radius-lg);
    margin-bottom: 10px;
    box-shadow: var(--shadow);
}

.tab {
    flex: 0 0 auto;
    padding: 8px 14px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 700;
    color: var(--muted);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.tab:hover {
    background: var(--gray-100);
}

.tab.active {
    background: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-800) 100%);
    color: white;
}

.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
}

/* ---- Product Tabs ---- */
.product-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.product-tab {
    padding: 12px 24px;
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 14px;
    font-weight: 700;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s;
}

.product-tab:hover {
    border-color: var(--blue-700);
}

.product-tab.active {
    background: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-800) 100%);
    border-color: var(--blue-700);
    color: white;
}

.product-tab .badge {
    display: inline-block;
    background: rgba(255,255,255,0.25);
    padding: 1px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    margin-left: 4px;
}

.product-tab.active .badge {
    background: rgba(255,255,255,0.35);
}

.product-content {
    background: var(--card);
    border-radius: var(--radius-xl);
    padding: 24px;
    box-shadow: var(--shadow);
}

/* ---- Product Selection Cards ---- */
.product-selection {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 16px;
}

.checkbox-card {
    cursor: pointer;
}

.checkbox-card input {
    display: none;
}

.checkbox-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 16px;
    background: var(--gray-50);
    border: 3px solid var(--border);
    border-radius: var(--radius-lg);
    transition: all 0.2s;
}

.checkbox-card-content svg {
    color: var(--muted);
    transition: color 0.2s;
}

.checkbox-card-content span {
    font-weight: 700;
    color: var(--muted);
    font-size: 14px;
}

.checkbox-card input:checked + .checkbox-card-content {
    background: linear-gradient(135deg, rgba(45,83,156,0.1) 0%, rgba(30,60,110,0.15) 100%);
    border-color: var(--blue-700);
}

.checkbox-card input:checked + .checkbox-card-content svg {
    color: var(--blue-700);
}

.checkbox-card input:checked + .checkbox-card-content span {
    color: var(--blue-900);
}

/* Product Quantity Input */
.product-quantity {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
    width: 100%;
    justify-content: center;
}

.product-quantity label {
    font-size: 12px;
    color: var(--muted);
    font-weight: 500;
}

.product-quantity input[type="number"] {
    width: 56px;
    padding: 4px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: var(--blue-900);
    background: white;
}

.product-quantity input[type="number"]:focus {
    outline: none;
    border-color: var(--blue-700);
    box-shadow: var(--focus);
}

/* ---- Measurement Card ---- */
.measurement-card {
    background: var(--gray-50);
    border-radius: var(--radius-md);
    padding: 10px 12px;
    margin-bottom: 10px;
}

.measurement-card-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.btn-sm {
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: 26px;
    transition: all 0.15s ease;
}

.btn-outline-danger {
    background: transparent;
    color: #dc2626;
    border: 1px solid #dc2626;
    border-radius: var(--radius-sm);
    padding: 6px 12px;
    font-size: 13px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: all 0.2s;
}

.btn-outline-danger:hover {
    background: #fef2f2;
}

.measurement-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.measurement-title {
    font-weight: 800;
    color: var(--blue-900);
}

.measurement-actions {
    display: flex;
    gap: 8px;
}

.measurement-data, .measurement-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

@media (max-width: 599px) {
    .measurement-data, .measurement-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.measurement-item {
    text-align: center;
    padding: 10px;
    background: white;
    border-radius: var(--radius);
}

.measurement-label {
    font-size: 11px;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
}

.measurement-value {
    font-size: 20px;
    font-weight: 800;
    color: var(--blue-900);
}

/* ---- Photo Section ---- */
.photo-section {
    margin-top: 24px;
}

.photo-section h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 12px;
    margin-bottom: 12px;
}

.photo-item {
    position: relative;
    aspect-ratio: 1;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--gray-100);
    border: 2px solid var(--border);
}

.photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.photo-item-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%);
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    align-items: flex-end;
    padding: 8px;
}

.photo-item:hover .photo-item-overlay {
    opacity: 1;
}

/* Photo Upload Buttons (Kamera + Galerie) */
.photo-upload-buttons {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}
.photo-upload-buttons .btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Photo Lightbox */
#photoLightbox {
    z-index: 300;
    background: rgba(0, 0, 0, 0.92);
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
#photoLightbox.hidden { display: none; }
.lightbox-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lightbox-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    color: white;
    font-size: 40px;
    cursor: pointer;
    z-index: 2;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}
.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.12);
    border: none;
    color: white;
    font-size: 52px;
    cursor: pointer;
    z-index: 2;
    width: 56px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    line-height: 1;
}
.lightbox-prev { left: 12px; }
.lightbox-next { right: 12px; }
.lightbox-nav:hover { background: rgba(255,255,255,0.22); }
.lightbox-image-wrapper {
    max-width: 90vw;
    max-height: 88vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
#lightboxImage {
    max-width: 100%;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 4px;
}
.lightbox-counter {
    position: absolute;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    color: white;
    font-size: 14px;
    background: rgba(0,0,0,0.5);
    padding: 6px 18px;
    border-radius: 20px;
}

/* Photo Overview Grid */
.photo-overview-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(70px, 1fr));
    gap: 6px;
    margin-top: 8px;
}
.photo-overview-category {
    grid-column: 1 / -1;
    font-size: 12px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 10px;
    margin-bottom: 2px;
}
.photo-overview-category:first-child { margin-top: 0; }
.photo-overview-thumb {
    aspect-ratio: 1;
    border-radius: 6px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid var(--border);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.photo-overview-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.photo-overview-thumb:hover {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(0, 40, 85, 0.15);
}

/* Mobile adjustments */
@media (max-width: 599px) {
    .photo-upload-buttons {
        flex-direction: column;
    }
    .lightbox-nav {
        width: 40px;
        height: 60px;
        font-size: 36px;
    }
    .lightbox-prev { left: 4px; }
    .lightbox-next { right: 4px; }
    .photo-overview-grid {
        grid-template-columns: repeat(auto-fill, minmax(60px, 1fr));
    }
}

.photo-item-actions {
    display: flex;
    gap: 4px;
    width: 100%;
}

.photo-item-actions button {
    flex: 1;
    padding: 6px;
    border: none;
    background: rgba(255,255,255,0.9);
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
}

/* Photo delete button (overlay icon) */
.photo-delete-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    background: rgba(220, 38, 38, 0.85);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 2;
    padding: 0;
}

.photo-item:hover .photo-delete-btn,
.photo-item:active .photo-delete-btn {
    opacity: 1;
}

/* Always visible on touch devices */
@media (hover: none) {
    .photo-delete-btn {
        opacity: 1;
    }
}

/* ===== Foto-Mehrfachauswahl (Massaufnahme): Auswahlmodus + „Ausgewählte löschen" ===== */
.photo-sel-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
    margin: 2px 0 8px;
}
.ps-toggle-btn, .ps-del-btn {
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 7px;
    border: 1px solid #d1d5db;
    background: #fff;
    color: #374151;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ps-toggle-btn.active { background: #dbeafe; border-color: #93c5fd; color: #1e40af; }
.ps-del-btn { background: #fee2e2; border-color: #fca5a5; color: #b91c1c; }
/* Checkbox-Overlay: nur im Auswahlmodus (.ps-active am Grid) sichtbar */
.ps-cb-wrap {
    display: none;
    position: absolute;
    top: 5px;
    left: 5px;
    z-index: 3;
    background: rgba(255,255,255,0.85);
    border-radius: 5px;
    padding: 1px;
    line-height: 0;
}
.photo-grid-wrap.ps-active .ps-cb-wrap { display: block; }
.ps-cb { width: 20px; height: 20px; cursor: pointer; accent-color: #2563eb; margin: 0; }
/* Im Auswahlmodus die Einzel-Löschen-Buttons ausblenden (Sammel-Löschen ist aktiv) */
.photo-grid-wrap.ps-active .photo-delete-btn,
.photo-grid-wrap.ps-active .photo-thumb-delete { display: none; }
.photo-tile-selected { outline: 3px solid #2563eb; outline-offset: -3px; border-radius: 6px; }

/* Photo thumbnail card in measurement cards */
.photo-thumb-card {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.photo-thumb-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
}

.photo-thumb-delete {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: none;
    background: rgba(220, 38, 38, 0.85);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    opacity: 0.9;   /* dauerhaft sichtbar, damit Fotos in der Übersicht direkt löschbar sind */
    transition: opacity 0.2s;
    z-index: 2;
}

.photo-thumb-card:hover .photo-thumb-delete,
.photo-thumb-card:active .photo-thumb-delete {
    opacity: 1;
}

@media (hover: none) {
    .photo-thumb-delete {
        opacity: 1;
    }
}

/* ---- Drawing Canvas ---- */
.drawing-section {
    margin-top: 24px;
}

.drawing-section h4 {
    font-size: 14px;
    font-weight: 700;
    color: var(--muted);
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.saved-drawings-grid {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 12px;
}

.saved-drawing-item {
    position: relative;
    width: 140px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: white;
    overflow: hidden;
}

.saved-drawing-item img {
    width: 100%;
    height: 95px;
    object-fit: contain;
    cursor: pointer;
    display: block;
    padding: 4px;
}

.saved-drawing-item .drawing-note {
    font-size: 11px;
    color: var(--muted);
    padding: 2px 6px 4px;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.btn-delete-drawing {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 22px;
    height: 22px;
    border: none;
    background: rgba(220, 53, 69, 0.85);
    color: white;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.saved-drawing-item:hover .btn-delete-drawing {
    opacity: 1;
}

.drawing-canvas-container {
    position: relative;
    background: white;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

#drawingCanvas {
    width: 100%;
    height: auto;
    display: block;
    touch-action: none;
}

.drawing-tools {
    display: flex;
    gap: 4px;
    padding: 10px;
    background: var(--gray-100);
    border-top: 1px solid var(--border);
}

.tool-btn {
    width: 44px;
    height: 44px;
    border: none;
    background: white;
    border-radius: var(--radius);
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.tool-btn:hover {
    background: var(--gray-200);
}

.tool-btn.active {
    background: var(--blue-700);
    color: white;
}

.tool-separator {
    width: 1px;
    background: var(--border);
    margin: 0 6px;
}

.drawing-tools {
    flex-wrap: wrap;
}

/* ---- Drawing Template Picker ---- */
.drawing-template-picker {
    padding: 10px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--border);
}

.drawing-template-label {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    margin-bottom: 8px;
    padding: 0 4px;
}

.drawing-template-grid {
    display: flex;
    gap: 10px;
    overflow-x: auto;
    padding-bottom: 4px;
}

.drawing-template-card {
    flex: 0 0 150px;
    cursor: pointer;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color 0.2s, transform 0.15s;
    background: white;
}

.drawing-template-card:hover {
    border-color: var(--blue-700);
    transform: translateY(-2px);
}

.drawing-template-card.selected {
    border-color: var(--orange-600, #ea580c);
    box-shadow: 0 0 0 2px var(--orange-600, #ea580c);
}

.drawing-template-card canvas {
    width: 100%;
    height: 100px;
    display: block;
}

.drawing-template-card-label {
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    color: var(--text);
    background: var(--gray-50);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (hover: none) {
    .btn-delete-drawing {
        opacity: 1;
    }
}

/* =========================================================
   Mode Selection Screen (Massaufnahme vs Angebot)
   ========================================================= */

.mode-select-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: calc(100vh - 60px);
    padding: 24px;
    text-align: center;
}

.mode-select-title {
    font-size: 1.6rem;
    font-weight: 700;
    color: #1e3c6e;
    margin: 0 0 8px;
}

.mode-select-subtitle {
    font-size: 0.95rem;
    color: #6b7280;
    margin: 0 0 32px;
}

.mode-select-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    max-width: 700px;
    width: 100%;
}

.mode-card {
    background: white;
    border: 2px solid #e5e7eb;
    border-radius: 16px;
    padding: 32px 24px 24px;
    cursor: pointer;
    transition: all 0.25s ease;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.mode-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: #1e3c6e;
    transform: scaleX(0);
    transition: transform 0.25s ease;
}

.mode-card:hover {
    border-color: #1e3c6e;
    box-shadow: 0 8px 30px rgba(30, 60, 110, 0.15);
    transform: translateY(-4px);
}

.mode-card:hover::before {
    transform: scaleX(1);
}

.mode-card-offer::before {
    background: #f39200;
}

.mode-card-offer:hover {
    border-color: #f39200;
    box-shadow: 0 8px 30px rgba(243, 146, 0, 0.2);
}

.mode-card-icon {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #f0f4fa;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1e3c6e;
    transition: all 0.25s ease;
}

.mode-card-offer .mode-card-icon {
    background: #fff7ed;
    color: #f39200;
}

.mode-card:hover .mode-card-icon {
    background: #1e3c6e;
    color: white;
    transform: scale(1.08);
}

.mode-card-offer:hover .mode-card-icon {
    background: #f39200;
    color: white;
}

.mode-card h3 {
    font-size: 1.2rem;
    font-weight: 700;
    color: #111827;
    margin: 4px 0;
}

.mode-card p {
    font-size: 0.85rem;
    color: #6b7280;
    margin: 0;
    line-height: 1.4;
}

.mode-card-features {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 8px;
}

.mode-card-features span {
    background: #f3f4f6;
    color: #4b5563;
    font-size: 0.72rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 12px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.mode-card-offer .mode-card-features span {
    background: #fff7ed;
    color: #c2710a;
}

.mode-back-btn {
    margin-top: 24px;
    color: #6b7280;
    font-size: 0.9rem;
    display: flex;
    align-items: center;
    gap: 6px;
}

.mode-back-btn:hover {
    color: #1e3c6e;
}

/* Mobile: stack cards vertically */
@media (max-width: 600px) {
    .mode-select-cards {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .mode-card {
        padding: 24px 20px 20px;
    }

    .mode-select-title {
        font-size: 1.3rem;
    }

    .mode-card-icon {
        width: 60px;
        height: 60px;
    }

    .mode-card-icon svg {
        width: 36px;
        height: 36px;
    }
}


/* ---- Offer Lines ---- */
.offer-container {
    background: var(--card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    overflow: hidden;
    position: relative;
}
.offer-container.drag-over {
    outline: 2px dashed #3b82f6;
    outline-offset: -2px;
}
#offerDropOverlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(59,130,246,0.07);
    border-radius: var(--radius-xl);
    z-index: 20;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
#offerDropOverlay.visible { display: flex; }

.sp-drop-overlay {
    display: none;
    position: absolute;
    inset: 0;
    background: rgba(59,130,246,0.07);
    border-radius: var(--radius-xl);
    z-index: 20;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.sp-drop-overlay.visible { display: flex; }
#tabSharepoint {
    position: relative;
}

.offer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--border);
}

.offer-header h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--blue-900);
    margin: 0;
}

.offer-actions {
    display: flex;
    gap: 8px;
}

.offer-lines {
    max-height: 60vh;
    overflow-y: auto;
}

.offer-line {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    transition: background 0.2s;
}

.offer-line:hover {
    background: var(--gray-50);
}

.offer-line:last-child {
    border-bottom: none;
}

.offer-line-pos {
    display: flex;
    align-items: flex-start;
    padding-top: 2px;
}
input.offer-line-pos-input {
    width: 36px;
    padding: 2px 2px;
    font-size: 11px;
    text-align: center;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--gray-50);
    color: var(--muted);
    font-weight: 600;
}
input.offer-line-pos-input:focus {
    border-color: var(--primary);
    background: white;
    color: var(--text);
    outline: none;
}

/* Ziehgriff der Positionszeile — aktiviert draggable erst beim Greifen, damit die
   Eingabefelder der Zeile (Menge/Preis) normal bedienbar bleiben. */
.line-drag-handle {
    display: block;
    text-align: center;
    cursor: grab;
    color: #cbd5e1;
    font-size: 12px;
    line-height: 1;
    margin-bottom: 2px;
    user-select: none;
}
.line-drag-handle:hover { color: var(--primary); }
.line-drag-handle:active { cursor: grabbing; }
.offer-line[draggable="true"] { background: var(--gray-50); }

.offer-line-info {
    flex: 1;
    min-width: 100px;
    overflow: hidden;
}

.offer-line-title {
    font-weight: 600;
    margin-bottom: 2px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
}

.offer-line-details {
    font-size: 13px;
    color: var(--muted);
    white-space: normal;
    word-break: break-word;
}

.offer-line-amount {
    font-weight: 800;
    color: var(--blue-900);
    text-align: right;
    min-width: 90px;
    white-space: nowrap;
    padding-top: 4px;
    flex-shrink: 0;
}

.offer-line-option-check {
    display: flex;
    align-items: center;
    padding-top: 4px;
    flex-shrink: 0;
    margin-left: 4px;
}
.option-checkbox-label {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    user-select: none;
}
.option-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--orange);
    cursor: pointer;
    margin: 0;
}
.option-checkbox-label input[type="checkbox"]:checked + span {
    color: var(--orange);
    font-weight: 600;
}

.offer-line-actions {
    display: flex;
    gap: 4px;
    padding-top: 1px;
}

.offer-line-actions button {
    width: 30px;
    height: 30px;
    border: none;
    background: transparent;
    border-radius: var(--radius);
    color: var(--muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.offer-line-actions button:hover {
    background: var(--gray-100);
    color: var(--text);
}

.offer-line-actions button.delete:hover {
    background: #fee2e2;
    color: #dc2626;
}

/* Margin Warnings on Offer Lines */
.line-margin-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 6px;
    background: #f3f4f6;
    color: #6b7280;
    vertical-align: middle;
}
.line-margin-badge.margin-warn {
    background: #fef2f2;
    color: #dc2626;
    animation: pulse-margin 2s infinite;
}
.line-margin-badge.margin-good {
    background: #f0fdf4;
    color: #16a34a;
}
@keyframes pulse-margin {
    0%,100% { opacity:1; }
    50% { opacity:0.6; }
}
.offer-line.offer-line-margin-warn {
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
}

/* Batch Mode */
.pipeline-card.batch-selected {
    box-shadow: 0 0 0 2px #3b82f6, 0 2px 8px rgba(59,130,246,0.3) !important;
    border-left-color: #3b82f6 !important;
}
/* Suche: Treffer kurz hervorheben */
@keyframes searchMatchFlash {
    0%   { box-shadow: 0 0 0 3px #fbbf24, 0 2px 12px rgba(251,191,36,0.5); }
    60%  { box-shadow: 0 0 0 3px #fbbf24, 0 2px 12px rgba(251,191,36,0.5); }
    100% { box-shadow: none; }
}
.pipeline-card-search-match {
    animation: searchMatchFlash 2s ease-out forwards;
    border-left-color: #f59e0b !important;
}
.batch-toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    background: #dbeafe;
    border-radius: 10px;
    margin-bottom: 10px;
    font-size: 13px;
}
.batch-toolbar.hidden { display: none; }
.batch-toolbar .batch-count {
    font-weight: 700;
    color: #1e3c6e;
}

.offer-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: linear-gradient(135deg, var(--blue-800) 0%, var(--blue-900) 100%);
    color: white;
}

.offer-total span:first-child {
    font-size: 16px;
    font-weight: 600;
}

.total-amount {
    font-size: 26px;
    font-weight: 900;
}

/* ---- Template Type Action Buttons ---- */
.template-type-actions {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 18px;
}

.template-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 10px;
    border: 2px solid #002855;
    border-radius: 10px;
    background: #fff;
    color: #002855;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    transition: background .15s, color .15s, border-color .15s, transform .1s;
    text-align: center;
    min-height: 72px;
}

.template-type-btn:hover {
    background: #002855;
    color: #fff;
    transform: translateY(-1px);
}

.template-type-btn.active {
    background: #002855;
    color: #fff;
    border-color: #002855;
    box-shadow: 0 2px 8px rgba(0,40,85,.25);
}

.template-type-btn-nav {
    border-color: #1e3c6e;
    background: #f0f4f8;
    color: #1e3c6e;
}

.template-type-btn-nav:hover {
    background: #1e3c6e;
    color: #fff;
}

.template-type-btn-icon {
    font-size: 22px;
    line-height: 1;
}

.template-type-btn-label {
    font-size: 12px;
    font-weight: 600;
    line-height: 1.2;
}

/* ---- Hörmann Jahresaktion Header ---- */
.template-jahresaktion-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: linear-gradient(135deg, #002855 0%, #1e3c6e 100%);
    border-radius: 8px;
    margin-bottom: 12px;
}

@media (max-width: 600px) {
    .template-type-actions {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ---- Template List (Grid) ---- */
.template-filters {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.template-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 12px;
}

.template-card {
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.template-card:hover {
    border-color: var(--blue-700);
    box-shadow: var(--shadow);
    transform: translateY(-2px);
}

.template-card-image {
    width: 100%;
    height: 110px;
    background: var(--gray-50);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.template-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.template-card-image .template-card-placeholder {
    font-size: 48px;
    color: var(--muted);
    opacity: 0.4;
}

.template-card-body {
    padding: 12px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.template-card-title {
    font-weight: 700;
    font-size: 14px;
    color: var(--text);
}

.template-card-desc {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
    /* Beschreibung vollständig zeigen (kein line-clamp) — Karten wachsen in der Höhe mit */
    overflow-wrap: break-word;
}

.template-card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-top: 1px solid var(--border);
    background: var(--gray-50);
}

.template-card-badge {
    display: inline-block;
    font-size: 11px;
    padding: 3px 8px;
    background: linear-gradient(135deg, var(--orange-600) 0%, var(--orange-500) 100%);
    color: white;
    border-radius: 6px;
    font-weight: 700;
}

.template-card-count {
    font-size: 12px;
    color: var(--muted);
}

/* ---- Template Lines (Galerie-Ansicht) ---- */
.template-lines-summary {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: var(--gray-50);
    border-radius: var(--radius);
    font-size: 13px;
    color: var(--muted);
    align-items: center;
    flex-wrap: wrap;
}

.template-lines-summary .tpl-sum-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.template-lines-summary .tpl-sum-value {
    font-weight: 700;
    color: var(--text);
}

.template-lines-gallery {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.template-line-card {
    display: flex;
    align-items: stretch;
    gap: 0;
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 10px;
    background: var(--card);
    transition: all 0.2s;
}

.template-line-card.selected {
    border-color: var(--blue-700);
    background: rgba(45,83,156,0.03);
}

.template-line-card.optional {
    border-style: dashed;
}

.template-line-card.optional.selected {
    border-color: var(--orange-600);
    background: rgba(243,146,0,0.03);
}

.template-line-checkbox {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    min-width: 48px;
    background: var(--gray-50);
    border-right: 1px solid var(--border);
    cursor: pointer;
}

.template-line-checkbox input[type="checkbox"] {
    width: 22px;
    height: 22px;
    accent-color: var(--orange-600);
    cursor: pointer;
}

.template-line-image {
    width: 100px;
    min-width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--gray-50);
    border-right: 1px solid var(--border);
}

.template-line-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.template-line-image .tpl-line-no-img {
    font-size: 32px;
    color: var(--muted);
    opacity: 0.3;
}

.template-line-content {
    flex: 1;
    padding: 12px 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    min-width: 0;
}

.template-line-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--text);
}

.template-line-name .badge-optional {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    background: var(--orange-600);
    color: white;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
}

/* Entgegenkommen (Kulanz / Geschenk) auf Positionen — gruen, weil es eine gute
   Nachricht ist und sich vom orangen Options-Badge unterscheiden muss. */
.badge-goodwill {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    background: #dcfce7;
    color: #166534;
    border: 1px solid #86efac;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
}

/* iHAAS-Import-Badge auf Angebotspositionen */
.badge-ihaas {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
    white-space: nowrap;
}

.template-line-details {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}

.template-line-details .category-tag {
    display: inline-block;
    padding: 1px 6px;
    background: var(--gray-100);
    border-radius: 4px;
    font-size: 11px;
    margin-right: 4px;
}

.template-line-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 12px 16px;
    min-width: 120px;
    text-align: right;
}

.template-line-price {
    font-weight: 700;
    font-size: 16px;
    color: var(--blue-900);
    white-space: nowrap;
}

.template-line-qty {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
}

.template-line-option-toggle {
    margin-top: 6px;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--muted);
    cursor: pointer;
}

.template-line-option-toggle input {
    accent-color: var(--orange-600);
}

/* Template footer */
.template-footer-info {
    font-size: 14px;
    color: var(--muted);
}

.template-footer-info strong {
    color: var(--blue-900);
    font-size: 16px;
}

.template-footer-actions {
    display: flex;
    gap: 8px;
}

@media (max-width: 600px) {
    .template-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
        gap: 10px;
    }
    .template-card-image { height: 90px; }
    .template-line-image { width: 70px; min-width: 70px; height: 70px; }
    .template-line-right { min-width: 80px; padding: 8px; }
    .template-line-content { padding: 8px 10px; }
    .template-line-name { font-size: 13px; }
    .template-line-price { font-size: 14px; }
    .modal-footer {
        flex-direction: column;
        gap: 10px;
    }
    .template-footer-actions {
        width: 100%;
        justify-content: stretch;
    }
    .template-footer-actions .btn { flex: 1; }
}

/* ---- Additional Positions (Konfigurator-Zusatzpositionen) ---- */
.addpos-search-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 6px 10px;
    margin-bottom: 8px;
}

.addpos-search-wrap svg {
    flex-shrink: 0;
    color: var(--muted);
}

.addpos-search-wrap input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 13px;
    width: 100%;
    color: var(--text);
}

.addpos-category-group {
    margin-bottom: 4px;
}

.addpos-category-group:last-child {
    margin-bottom: 0;
}

.addpos-category-group.hidden {
    display: none;
}

.addpos-category-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
    transition: opacity 0.15s;
}

.addpos-category-header:hover {
    opacity: 0.85;
}

.addpos-category-chevron {
    flex-shrink: 0;
    transition: transform 0.2s;
    color: inherit;
    opacity: 0.7;
}

.addpos-category-group.collapsed .addpos-category-chevron {
    transform: rotate(-90deg);
}

.addpos-category-header h5 {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: inherit;
}

.addpos-category-count {
    font-size: 11px;
    opacity: 0.8;
    font-weight: 400;
}

.addpos-select-all {
    margin-left: auto;
    font-size: 11px;
    cursor: pointer;
    background: rgba(255,255,255,0.3);
    border: none;
    padding: 2px 8px;
    border-radius: 4px;
    color: inherit;
    font-weight: 500;
}

.addpos-select-all:hover {
    background: rgba(255,255,255,0.5);
}

.addpos-category-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 0 6px 0;
}

.addpos-category-group.collapsed .addpos-category-items {
    display: none;
}

.additional-positions-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.addpos-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: #fff;
    transition: all 0.15s;
    opacity: 0.55;
}

.addpos-item.selected {
    opacity: 1;
    border-color: var(--blue-200);
    background: var(--blue-50);
}

.addpos-item.optional.selected {
    border-color: var(--orange-200);
    background: #fff8f0;
}

.addpos-checkbox {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.addpos-img {
    width: 42px;
    height: 42px;
    object-fit: contain;
    border-radius: 5px;
    flex-shrink: 0;
    background: #f3f4f6;
}

.offer-line-img-placeholder.addpos-img {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: #d1d5db;
    background: #f3f4f6;
    border-radius: 5px;
}

.addpos-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--blue-600);
    cursor: pointer;
}

.addpos-info {
    flex: 1;
    min-width: 0;
}

.addpos-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    line-height: 1.3;
}

.addpos-name .badge-optional {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
    background: var(--orange-100);
    color: var(--orange-700);
    margin-left: 4px;
    vertical-align: middle;
}

.addpos-meta {
    display: flex;
    gap: 6px;
    align-items: center;
    margin-top: 2px;
    font-size: 11px;
    color: var(--muted);
}

.addpos-meta .category-tag {
    display: inline-block;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 4px;
    font-weight: 500;
}

.addpos-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
    min-width: 80px;
}

.addpos-price {
    font-size: 13px;
    font-weight: 600;
    color: var(--blue-900);
}

.addpos-opt-toggle {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--muted);
    cursor: pointer;
}

.addpos-opt-toggle input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: var(--orange-600);
    cursor: pointer;
}

.addpos-opt-toggle span {
    user-select: none;
}

@media (max-width: 600px) {
    .addpos-item { padding: 6px 8px; gap: 8px; }
    .addpos-name { font-size: 12px; }
    .addpos-right { min-width: 60px; }
    .addpos-price { font-size: 12px; }
}

/* ---- Article Wizard (Zusätzliche Artikel erfassen) ---- */

/* Tab-Switcher */
.artwiz-tabs {
    display: flex;
    border-bottom: 2px solid var(--border);
    background: var(--blue-50);
    flex-shrink: 0;
}

.artwiz-tab {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
}

.artwiz-tab:hover { color: var(--text); background: rgba(0,0,0,0.03); }
.artwiz-tab.active {
    color: var(--blue-700);
    border-bottom-color: var(--blue-600);
    background: #fff;
    font-weight: 600;
}

/* Scrollbarer Resultate-Bereich */
.artwiz-results-scroll {
    flex: 1;
    overflow-y: auto;
    min-height: 120px;
    max-height: 280px;
    border-bottom: 1px solid var(--border);
}

.artwiz-results {
    background: #fff;
}

.artwiz-result-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 16px;
    border-bottom: 1px solid var(--border);
    transition: background 0.1s;
}

.artwiz-result-item:last-child { border-bottom: none; }
.artwiz-result-item:hover { background: var(--blue-50); }
.artwiz-result-item.already-added { opacity: 0.5; }

.artwiz-result-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.artwiz-result-id {
    font-size: 11px;
    color: var(--muted);
    font-family: monospace;
}

.artwiz-result-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.artwiz-result-price {
    font-size: 12px;
    font-weight: 600;
    color: var(--blue-900);
    white-space: nowrap;
}

.artwiz-result-add {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: var(--blue-600);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.1s;
}

.artwiz-result-add:hover { background: var(--blue-700); }

/* Produktbild im Article Wizard */
.artwiz-result-img {
    flex-shrink: 0;
    width: 36px;
    height: 36px;
    object-fit: contain;
    border-radius: 4px;
    background: #f3f4f6;
    border: 1px solid var(--border);
}

/* Load More / Infinite Scroll Indicator */
.artwiz-load-more {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    font-size: 12px;
    color: var(--muted);
}

.artwiz-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border);
    border-top: 2px solid var(--blue-600);
    border-radius: 50%;
    animation: artwizSpin 0.6s linear infinite;
}

@keyframes artwizSpin {
    100% { transform: rotate(360deg); }
}

/* Ausgewählte Artikel Section */
.artwiz-selected-section {
    flex-shrink: 0;
    border-top: 1px solid var(--border);
    max-height: 180px;
    overflow-y: auto;
}

.artwiz-selected-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    cursor: pointer;
    user-select: none;
}

.artwiz-selected-header h4 {
    font-size: 13px;
    margin: 0;
    color: var(--blue-900);
    display: flex;
    align-items: center;
    gap: 4px;
}

.artwiz-selected-header h4 span {
    font-weight: normal;
    font-size: 0.85rem;
    color: var(--muted);
}

.artwiz-selected-chevron {
    transition: transform 0.2s;
}

.artwiz-selected-section.collapsed .artwiz-selected-chevron {
    transform: rotate(-90deg);
}

.artwiz-selected-section.collapsed .artwiz-selected-list {
    display: none;
}

.artwiz-selected-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 0 16px 10px;
    min-height: 20px;
}

.artwiz-selected-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: 8px;
    background: var(--blue-50);
}

.artwiz-sel-info {
    flex: 1;
    min-width: 0;
}

.artwiz-sel-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
}

.artwiz-sel-id {
    font-size: 11px;
    color: var(--muted);
}

.artwiz-sel-fields {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
}

.artwiz-sel-fields input {
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 12px;
    background: #fff;
}

.artwiz-sel-fields input[type="number"] { width: 60px; text-align: right; }

.artwiz-sel-opt {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 11px;
    color: var(--muted);
}

.artwiz-sel-opt input { width: 14px; height: 14px; accent-color: var(--orange-600); }

.artwiz-sel-remove {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 50%;
    background: var(--red-100, #fee2e2);
    color: var(--red-600, #dc2626);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.artwiz-sel-remove:hover { background: var(--red-200, #fecaca); }

.artwiz-no-results {
    padding: 16px;
    text-align: center;
    font-size: 12px;
    color: var(--muted);
}

/* Mobile Responsive für Artikel-Wizard */
@media (max-width: 600px) {
    .artwiz-selected-item { flex-wrap: wrap; }
    .artwiz-sel-fields { flex-wrap: wrap; }
}

/* ---- Rechnungskontrolle (Invoice Control) ---- */
.rk-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.rk-filter-tabs {
    display: flex;
    gap: 3px;
    background: #fff;
    border-radius: 10px;
    padding: 3px;
    border: 1px solid var(--gray-300, #d1d5db);
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.rk-filter-btn {
    padding: 8px 18px;
    border: none;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.15s;
}

.rk-filter-btn:hover { color: var(--blue-700, #1d4ed8); background: var(--blue-50, #eff6ff); }
.rk-filter-btn.active { background: var(--blue-600); color: #fff; box-shadow: 0 2px 4px rgba(37,99,235,0.3); }

.rk-filter-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    background: #ef4444;
    color: #fff;
    margin-left: 4px;
    vertical-align: middle;
}
.rk-filter-badge:empty { display: none; }
.rk-filter-btn.active .rk-filter-badge { background: #fff; color: var(--blue-600); }

.rk-sales-filter {
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    min-width: 160px;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.rk-sales-filter:hover {
    border-color: var(--blue-400, #60a5fa);
}
.rk-sales-filter:focus {
    border-color: var(--blue-600);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.12);
}

#viewRechnungskontrolle,
#viewKundenObjekt,
#viewAuftraege,
#viewKennzahlen,
#viewPlanung {
    max-width: 100%;
}

.rk-split-panel {
    display: flex;
    flex: 1;
    min-height: 0;
    height: calc(100vh - 145px);
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.rk-list-panel {
    width: 340px;
    min-width: 280px;
    max-width: 40%;
    border-right: 1px solid var(--border);
    overflow-y: auto;
    flex-shrink: 0;
    position: relative;
    transition: width 0.25s ease, min-width 0.25s ease, max-width 0.25s ease, padding 0.25s ease;
}
/* Eingeklappt bleibt eine schmale Leiste mit dem Knopf stehen (19.10.2026): der frühere fixe Knopf am linken
   Bildschirmrand lag seit dem Seitenmenü unter #topNav – die Liste liess sich nicht mehr öffnen. */
.rk-list-panel.collapsed {
    width: 38px;
    min-width: 38px;
    max-width: 38px;
    overflow: hidden;
    padding: 0;
}
.rk-list-panel.collapsed .rk-invoice-list {
    display: none;
}
.rk-list-toggle {
    position: absolute;
    top: 8px;
    right: 4px;
    z-index: 10;
    background: #f3f4f6;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #6b7280;
    transition: background 0.15s;
}
.rk-list-toggle:hover {
    background: #e5e7eb;
    color: #374151;
}
.rk-list-panel.collapsed .rk-list-toggle {
    top: 8px;
    right: 4px;
}
.rk-list-panel.collapsed > :not(.rk-list-toggle) {
    display: none;
}

.rk-detail-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    min-width: 0;
    overflow-y: auto;
}

.rk-detail-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    color: var(--muted);
    font-size: 13px;
}

.rk-detail-content {
    padding: 16px 20px;
    overflow-y: auto;
}

.rk-detail-main {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
}

/* Auftrags-Summary-Bar */
.rk-order-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    margin: 12px 0;
    background: linear-gradient(135deg, #f0f4ff 0%, #f8fafc 100%);
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 10px;
    flex-wrap: wrap;
}

.rk-summary-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--blue-900);
    margin-right: 8px;
    white-space: nowrap;
}

.rk-summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 14px;
    border-left: 1px solid var(--gray-200, #e5e7eb);
    min-width: 0;
}

.rk-summary-item:first-of-type {
    border-left: none;
}

.rk-summary-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.rk-summary-value {
    font-size: 14px;
    font-weight: 700;
    color: var(--text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.rk-summary-value.rk-summary-warn {
    color: #b45309;
}

.rk-summary-value.rk-summary-ok {
    color: #059669;
}

.rk-summary-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 4px;
}

.rk-detail-main > .rk-detail-fields {
    flex: 0 0 340px;
    min-width: 280px;
    max-width: 380px;
}

.rk-detail-pdf {
    flex: 2;
    min-width: 400px;
    display: flex;
    flex-direction: column;
}

.rk-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--gray-100, #f3f4f6);
}

.rk-detail-header .rk-detail-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--blue-900);
    letter-spacing: -0.2px;
}

.rk-detail-header .rk-detail-subtitle {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
}

.rk-detail-header .rk-detail-actions {
    margin-left: auto;
    display: flex;
    gap: 8px;
}

.rk-journal-note {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 16px;
    margin: 0 16px 4px 16px;
    background: #fef3c7;
    border: 1px solid #fbbf24;
    border-radius: 8px;
    font-size: 13px;
    color: #92400e;
    line-height: 1.4;
}
.rk-journal-note svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: #d97706;
}

.rk-detail-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.rk-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
}

.rk-notizen-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.rk-notizen-row label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.rk-notizen-row textarea {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text);
    background: #fff;
    resize: vertical;
    min-height: 40px;
    font-family: inherit;
}

.rk-detail-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.rk-detail-field.full-width {
    grid-column: 1 / -1;
}

.rk-detail-field label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.rk-detail-field input,
.rk-detail-field textarea,
.rk-detail-field select {
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 13px;
    color: var(--text);
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.rk-detail-field input:focus,
.rk-detail-field textarea:focus {
    border-color: var(--blue-600);
    outline: none;
    box-shadow: 0 0 0 3px rgba(30,60,110,0.08);
}

.rk-detail-field input[readonly],
.rk-detail-field .rk-readonly-value {
    background: var(--gray-50, #f9fafb);
    border-color: var(--gray-200, #e5e7eb);
    color: var(--text);
    cursor: default;
}

.rk-detail-field textarea {
    resize: vertical;
    min-height: 48px;
}

.rk-detail-field .rk-readonly-value {
    font-size: 13px;
    padding: 7px 10px;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 6px;
    background: var(--gray-50, #f9fafb);
}

.rk-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    color: var(--blue-900);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--gray-100, #f3f4f6);
}

.rk-detail-pdf .rk-pdf-iframe {
    width: 100%;
    flex: 1;
    min-height: 600px;
    height: calc(100vh - 280px);
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: 8px;
    margin-top: 8px;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}

.rk-pdf-no-doc {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    min-height: 160px;
    color: var(--muted);
    font-size: 13px;
    background: var(--gray-50, #f9fafb);
    border: 1px dashed var(--gray-300, #d1d5db);
    border-radius: 8px;
    margin-top: 8px;
}

.rk-related-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 16px;
    border-top: 2px solid var(--gray-200, #e5e7eb);
    margin-top: 4px;
}

.rk-related-wrap {
    overflow-x: auto;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 8px;
    background: #fff;
}

.rk-related-table {
    width: 100%;
    min-width: 500px;
    border-collapse: collapse;
    font-size: 13px;
}

.rk-related-table th {
    text-align: left;
    padding: 8px 12px;
    font-weight: 600;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    border-bottom: 2px solid var(--gray-200, #e5e7eb);
    background: var(--gray-50, #f9fafb);
    white-space: nowrap;
}

.rk-related-table td {
    padding: 8px 12px;
    border-bottom: 1px solid var(--gray-100, #f3f4f6);
    color: var(--text);
    white-space: nowrap;
}

.rk-related-table tbody tr:last-child td {
    border-bottom: none;
}

.rk-related-table tr:hover {
    background: #f0f7ff;
}

.rk-related-table tr.current-row {
    background: #dbeafe;
    font-weight: 600;
}

.rk-related-table .badge-posted {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}

.rk-related-table .badge-posted.yes {
    background: #d1fae5; color: #065f46;
}

.rk-related-table .badge-posted.no {
    background: #fef3c7; color: #92400e;
}

.rk-related-table td.num {
    font-variant-numeric: tabular-nums;
    text-align: right;
}

.rk-related-table .rk-notes-cell {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--muted);
    font-size: 12px;
}

.rk-related-link {
    color: var(--blue-600);
    text-decoration: none;
    font-weight: 600;
}
.rk-related-link:hover {
    text-decoration: underline;
    color: var(--blue-700, #1d4ed8);
}

.rk-edit-input {
    width: 100%;
    min-width: 60px;
    border: 1px solid transparent;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 12px;
    background: transparent;
    transition: border-color 0.15s, background 0.15s;
}
.rk-edit-input:hover {
    border-color: #d1d5db;
    background: #f9fafb;
}
.rk-edit-input:focus {
    border-color: var(--blue-500, #3b82f6);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.15);
}
.rk-edit-input.num {
    text-align: right;
    min-width: 80px;
}
.rk-edit-input[type="date"] {
    min-width: 110px;
}
.btn-icon-danger {
    background: transparent;
    border: 1px solid transparent;
    color: #9ca3af;
    cursor: pointer;
    border-radius: 6px;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.btn-icon-danger:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: #dc2626;
}
.rk-add-purchase-btn {
    margin: 8px 0 4px 0;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.rk-related-editable td {
    padding: 4px 6px;
}

.rk-related-empty {
    color: var(--muted);
    font-size: 13px;
    padding: 16px;
    text-align: center;
    background: var(--gray-50, #f9fafb);
    border: 1px dashed var(--gray-300, #d1d5db);
    border-radius: 8px;
}

.rk-invoice-list {
    display: flex;
    flex-direction: column;
}

.rk-inv-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--gray-100, #f3f4f6);
    cursor: pointer;
    transition: all 0.15s;
}

.rk-inv-item:hover { background: #f0f7ff; }
.rk-inv-item.active {
    background: #e8f0fe;
    border-left: 3px solid var(--blue-900);
    box-shadow: inset 0 0 0 1px rgba(30,60,110,0.06);
}

.rk-inv-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.rk-inv-vendor {
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}

.rk-inv-amount {
    font-weight: 700;
    font-size: 13px;
    color: var(--blue-900);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.rk-inv-row2 {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--muted);
    flex-wrap: wrap;
}

.rk-inv-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.1px;
}

.rk-inv-badge.open { background: #fef3c7; color: #92400e; }
.rk-inv-badge.approved { background: #d1fae5; color: #065f46; }
.rk-inv-badge.auto { background: #dbeafe; color: #1e40af; }
.rk-inv-badge.pdf { background: #fee2e2; color: #991b1b; }

.rk-inv-row3 {
    display: flex;
    gap: 6px;
    font-size: 11px;
    color: var(--muted);
    flex-wrap: wrap;
}

.rk-inv-actions {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.rk-inv-actions .btn {
    font-size: 12px;
    padding: 4px 12px;
    min-height: 28px;
    border-radius: 6px;
    font-weight: 600;
}

/* Neu-Markierung fuer neue/ungelesene Items (global) */
.rk-inv-item.new-item,
.list-item.new-item,
.order-list-item.new-item {
    background: #eff6ff;
    border-left: 3px solid #3b82f6;
}
.rk-inv-item.new-item:hover,
.list-item.new-item:hover,
.order-list-item.new-item:hover {
    background: #dbeafe;
}

.pipeline-card.pipeline-card-new {
    border-left: 3px solid #3b82f6;
    box-shadow: 0 0 0 1px rgba(59,130,246,0.3), 0 2px 8px rgba(59,130,246,0.15);
}

.new-dot-sm {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #3b82f6;
    vertical-align: middle;
}

.ind.ind-new {
    background: #3b82f6;
    color: #fff;
}

.new-dot {
    position: absolute;
    top: 12px;
    left: 4px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3b82f6;
    flex-shrink: 0;
}

.rk-inv-item {
    position: relative;
}

.rk-inv-badge.new-badge {
    background: #3b82f6;
    color: #fff;
    animation: badgePop 0.3s ease-out;
}

/* ---- Global Search Box (RK + KO) ---- */
.global-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 10px 16px;
    flex: 1;
    max-width: 900px;
    min-width: 260px;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.global-search-box:focus-within {
    border-color: var(--blue-600, #2563eb);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15), 0 2px 8px rgba(37,99,235,0.10);
}
.global-search-box svg {
    flex-shrink: 0;
    color: var(--blue-600, #2563eb);
    opacity: 0.7;
    transition: opacity 0.2s;
}
.global-search-box:focus-within svg {
    opacity: 1;
}
.global-search-box input {
    border: none;
    background: transparent;
    outline: none;
    font-size: 15px;
    font-weight: 500;
    width: 100%;
    color: var(--text, #1e293b);
    letter-spacing: 0.01em;
}
.global-search-box input::placeholder {
    color: #94a3b8;
    font-weight: 400;
}
.search-shortcut {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 12px;
    font-family: inherit;
    color: #94a3b8;
    line-height: 1;
}
.global-search-box:focus-within .search-shortcut {
    display: none;
}

.rk-new-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 8px 16px;
    border: 1px solid var(--gray-300, #d1d5db);
    border-radius: 10px;
    background: #fff;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.rk-new-filter-btn:hover {
    border-color: #3b82f6;
    color: #3b82f6;
    background: var(--blue-50, #eff6ff);
}

.rk-new-filter-btn.active {
    background: #3b82f6;
    color: #fff;
    border-color: #3b82f6;
}

.new-dot-inline {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #3b82f6;
    display: inline-block;
}

.rk-new-filter-btn.active .new-dot-inline {
    background: #fff;
}

.rk-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--muted);
    font-size: 13px;
    gap: 8px;
}

@media (max-width: 768px) {
    .rk-split-panel {
        flex-direction: column;
        height: auto;
    }
    .rk-list-panel {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .rk-detail-panel {
        min-height: 50vh;
    }
    .rk-detail-content {
        padding: 12px;
    }
    .rk-fields-grid {
        grid-template-columns: 1fr;
    }
    .rk-detail-main {
        flex-direction: column;
    }
    .rk-detail-main > .rk-detail-fields {
        width: 100%;
        max-width: 100%;
        min-width: 0;
        flex: 0 0 auto;
    }
    .rk-detail-pdf {
        min-width: 0;
    }
    .rk-detail-pdf .rk-pdf-iframe {
        min-height: 350px;
        height: 45vh;
    }
    .rk-detail-header {
        flex-direction: column;
        gap: 8px;
    }
    .rk-detail-header .rk-detail-actions {
        justify-content: flex-start;
    }
}

/* ---- Item Lookup (Artikel-Suche) ---- */
.item-lookup-container {
    position: relative;
}

.item-lookup-results {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    z-index: 100;
    max-height: 280px;
    overflow-y: auto;
}

.item-lookup-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--gray-100);
    transition: background 0.15s;
}

.item-lookup-item:last-child {
    border-bottom: none;
}

.item-lookup-item:hover {
    background: var(--gray-50);
}

.item-lookup-item-img {
    width: 44px;
    height: 44px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--gray-100);
}

.item-lookup-item-img.no-image {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
    font-size: 18px;
}

.item-lookup-item-info {
    flex: 1;
    min-width: 0;
}

.item-lookup-item-name {
    font-weight: 600;
    font-size: 14px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.item-lookup-item-id {
    font-size: 12px;
    color: var(--muted);
}

.item-lookup-item-price {
    font-weight: 700;
    font-size: 14px;
    color: var(--blue-900);
    white-space: nowrap;
}

.item-lookup-empty {
    padding: 20px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}

/* Selected item card */
.selected-item-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    background: var(--gray-50);
    border: 2px solid var(--blue-700);
    border-radius: var(--radius-md);
    margin-bottom: 16px;
}

.selected-item-image {
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid var(--border);
    background: white;
}

.selected-item-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.selected-item-info {
    flex: 1;
    min-width: 0;
}

.selected-item-name {
    font-weight: 700;
    font-size: 15px;
    color: var(--blue-900);
}

.selected-item-id {
    font-size: 12px;
    color: var(--muted);
}

.selected-item-remove {
    flex-shrink: 0;
    color: var(--muted);
}

/* Offer line with image */
.offer-line-img {
    width: 50px;
    height: 50px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--border);
    flex-shrink: 0;
    background: #f3f4f6;
}

/* ---- Modal ---- */
.modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 200;
    padding: 16px;
}

.modal.active {
    display: flex;
}

/* Modal-Overlay System (neues Pattern fuer Activity/Email/QuickActivity Modals) */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 16px;
}
.modal-overlay.hidden {
    display: none;
}
/* Inner .modal inside .modal-overlay: override old-system display:none */
.modal-overlay > .modal {
    display: flex;
    flex-direction: column;
    position: static;
    inset: auto;
    background: var(--card, white);
    border-radius: 16px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    padding: 0;
}

.modal-content {
    background: var(--card);
    border-radius: var(--radius-xl);
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow2);
    overflow-y: auto;
}

.modal-content.modal-large {
    max-width: 800px;
}

.modal-content.modal-fullscreen {
    max-width: 100%;
    max-height: 100%;
    height: 100%;
    border-radius: 0;
    overflow: hidden;
}

.modal-content.modal-fullscreen .modal-header {
    background: #111;
    color: white;
    border-bottom: 1px solid #333;
    z-index: 10;
    position: relative;
}

.modal-content.modal-fullscreen .modal-header h2 {
    color: white;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 1px solid var(--border);
}

.modal-header h2 {
    font-size: 15px;
    font-weight: 700;
    color: var(--blue-900);
    margin: 0;
}

.modal-body {
    flex: 1;
    padding: 12px 16px;
    overflow-y: auto;
}

.modal-footer {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    align-items: center;
    padding: 10px 16px;
    border-top: 1px solid var(--border);
    background: var(--gray-50);
    flex-wrap: wrap;
}

/* ---- Camera ---- */
.camera-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: black;
    padding: 0;
    overflow-y: auto;
}

#cameraVideo {
    max-width: 100%;
    max-height: 100%;
}

.camera-preview {
    position: relative;
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    background: black;
    overflow: visible;
    min-height: 0;
}

.camera-draw-container {
    position: relative;
    display: inline-block;
    max-width: 100%;
    max-height: calc(100% - 50px);
}

.camera-draw-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}

.camera-draw-container canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: crosshair;
    z-index: 2;
}

.camera-draw-tools {
    display: flex;
    gap: 8px;
    padding: 8px;
    justify-content: center;
    background: rgba(0,0,0,0.8);
    border-radius: 8px;
    margin-top: 8px;
}

.camera-draw-tools .tool-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 2px solid transparent;
    background: rgba(255,255,255,0.15);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.camera-draw-tools .tool-btn.active {
    border-color: white;
    background: rgba(255,255,255,0.3);
}

.camera-saved-photos {
    width: 100%;
    padding: 8px 12px;
    background: rgba(0,0,0,0.6);
    color: white;
}

.camera-photos-grid {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 4px 0;
}

.camera-photos-grid .camera-thumb {
    position: relative;
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,0.3);
}

.camera-photos-grid .camera-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.camera-photos-grid .camera-thumb .camera-thumb-delete {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(220,38,38,0.85);
    color: white;
    border: none;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.camera-footer {
    justify-content: center;
    background: black;
    border: none;
}

.btn-capture {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: white;
    border: 4px solid var(--gray-300);
    color: #dc2626;
    padding: 0;
}

.btn-capture:hover {
    border-color: #dc2626;
}

/* ---- Report ---- */
.report-container {
    background: var(--card);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow);
    overflow: hidden;
}

.report-preview {
    padding: 24px;
    max-height: 70vh;
    overflow-y: auto;
}

.report-preview iframe {
    width: 100%;
    height: 60vh;
    border: none;
}

.report-actions {
    display: flex;
    gap: 12px;
    justify-content: flex-end;
    padding: 16px 24px;
    background: var(--gray-50);
    border-top: 1px solid var(--border);
    flex-wrap: wrap;
}

.button-divider {
    width: 100%;
    height: 1px;
    background: var(--border);
    margin: 4px 0;
}

.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: white;
    color: var(--blue-900);
    border: 1px solid var(--blue-900);
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-outline:hover {
    background: rgba(30,60,110,0.05);
}

.btn-outline:active {
    transform: scale(0.98);
}

.btn-outline svg {
    flex-shrink: 0;
}

/* ---- Loading & Toast ---- */
.loading-overlay {
    position: fixed;
    inset: 0;
    background: rgba(255, 255, 255, 0.9);
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 300;
}

.loading-overlay.active {
    display: flex;
}

.loading-spinner {
    width: 48px;
    height: 48px;
    border: 4px solid var(--gray-200);
    border-top-color: var(--blue-700);
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

#loadingText {
    margin-top: 16px;
    color: var(--muted);
    font-weight: 600;
}

.toast-container {
    position: fixed;
    bottom: 20px;
    left: 16px;
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* über allen Dialogen (Tore aufnehmen 10060, Overlays bis ~10100): sonst blieben Fehlermeldungen unsichtbar (28.10.2026) */
    z-index: 20010;
    pointer-events: none;
}

.toast {
    background: var(--blue-900);
    color: white;
    padding: 14px 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow2);
    animation: slideUp 0.3s ease;
    pointer-events: auto;
    font-weight: 600;
}

.toast.success {
    background: #059669;
}

.toast.error {
    background: #dc2626;
}

.toast.warning {
    background: var(--orange-600);
}

@keyframes slideUp {
    from {
        transform: translateY(100%);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* ---- Empty State ---- */
.empty-state {
    text-align: center;
    padding: 48px 24px;
    color: var(--muted);
}

.empty-state svg {
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    color: var(--gray-300);
}

.empty-state h3 {
    font-size: 18px;
    color: var(--text);
    margin-bottom: 8px;
}

/* ---- Status Pills ---- */
.pill {
    padding: 8px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 900;
    letter-spacing: .4px;
    text-transform: uppercase;
    white-space: nowrap;
}

.pill.offen {
    background: #FFE4BF;
    color: #A05A00;
}

.pill.inbearbeitung {
    background: #CCE0F4;
    color: var(--blue-900);
}

.pill.abgeschlossen {
    background: #d1fae5;
    color: #065f46;
}

/* ---- Responsive ---- */
@media (max-width: 599px) {
    .card, .form-container {
        padding: 14px;
        border-radius: 16px;
    }

    .content, .app-content {
        padding: 12px 10px 30px;
    }

    .header-title {
        font-size: 17px;
    }

    .offer-actions {
        flex-direction: column;
    }

    .offer-actions .btn {
        width: 100%;
    }
}

@media (min-width: 600px) and (max-width: 899px) {
    .content, .app-content {
        padding: 20px 20px 40px;
    }

    .card, .form-container {
        padding: 20px;
        max-width: 720px;
    }

    .list-container {
        max-width: 720px;
    }
}

@media (min-width: 900px) {
    .content, .app-content {
        padding: 24px 32px 50px;
    }

    .card, .form-container {
        padding: 24px;
        max-width: 900px;
    }

    .header-title {
        font-size: 22px;
    }
}

@media (min-width: 1200px) {
    .content, .app-content {
        /* KEIN Top-Padding am Scroll-Container: sonst kann die sticky Toolbar nicht bis an die
           Container-Oberkante haften (sie pinnt erst NACH dem Padding), und im Streifen darüber
           laufen beim Scrollen die Pipeline-Karten nach oben durch. Mit 0 klebt die Toolbar
           direkt unter dem blauen Topbar und verdeckt alle Karten. Seiten/Unten bleiben. */
        padding: 0 40px 60px;
    }

    .card, .form-container {
        padding: 28px;
        max-width: 1100px;
    }

    .list-container {
        grid-template-columns: repeat(3, 1fr);
        max-width: 1100px;
    }

    .header-title {
        font-size: 24px;
    }
}

/* ---- Touch Device Optimizations ---- */
@media (hover: none) and (pointer: coarse) {
    .btn, .icon-btn, .btn-icon, .tool-btn {
        min-height: 48px;
        min-width: 48px;
    }

    .list-item {
        padding: 18px;
    }

    .btn:hover,
    .list-item:hover {
        transform: none;
    }

    .btn:active,
    .list-item:active {
        transform: scale(0.98);
        opacity: 0.9;
    }
}

/* ---- Visualizer ---- */
.vis-radio-group {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}

.vis-radio-group.vis-color-group {
    grid-template-columns: 1fr;
}

.vis-radio-item {
    cursor: pointer;
}

.vis-radio-item input {
    display: none;
}

.vis-radio-content {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--gray-50);
    border: 2px solid var(--border);
    border-radius: var(--radius-md);
    transition: all 0.2s;
}

.vis-radio-content svg {
    flex-shrink: 0;
    color: var(--muted);
}

.vis-radio-content span {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}

.vis-radio-item input:checked + .vis-radio-content {
    background: linear-gradient(135deg, rgba(45,83,156,0.08), rgba(30,60,110,0.12));
    border-color: var(--blue-700);
}

.vis-radio-item input:checked + .vis-radio-content svg {
    color: var(--blue-700);
}

.vis-radio-item input:checked + .vis-radio-content span {
    color: var(--blue-900);
}

.vis-ai-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: linear-gradient(135deg, #eef3f8, #e8edf5);
    border: 2px solid var(--blue-700);
    border-radius: var(--radius-md);
    cursor: pointer;
    margin-bottom: 12px;
    font-weight: 600;
    font-size: 14px;
    color: var(--blue-900);
}

.vis-ai-checkbox input {
    width: 20px;
    height: 20px;
    min-height: auto;
    accent-color: var(--blue-700);
}

.vis-photo-buttons {
    display: flex;
    gap: 12px;
}

.vis-photo-buttons .btn {
    flex: 1;
}

.vis-ai-status {
    text-align: center;
    padding: 24px;
}

.vis-ai-status .loading-spinner {
    margin: 0 auto 12px;
}

.vis-ai-status-title {
    color: var(--blue-700);
    font-weight: 600;
    margin: 0 0 4px;
}

.vis-ai-status-sub {
    color: var(--muted);
    font-size: 13px;
    margin: 0;
}

.vis-preview {
    max-width: 300px;
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--border);
}

.vis-preview img {
    width: 100%;
    display: block;
}

.vis-canvas-wrap {
    overflow: hidden;
    border-radius: var(--radius-lg);
    border: 2px solid var(--border);
    background: var(--gray-100);
}

.vis-canvas-wrap canvas {
    width: 100%;
    display: block;
    touch-action: none;
}

.vis-canvas-actions {
    display: flex;
    gap: 12px;
    margin-top: 12px;
}

.vis-canvas-actions .btn {
    flex: 1;
}

.vis-result {
    border-radius: var(--radius-md);
    overflow: hidden;
    cursor: pointer;
    border: 2px solid var(--border);
}

.vis-result img {
    width: 100%;
    display: block;
}

@media (max-width: 599px) {
    .vis-radio-group {
        grid-template-columns: 1fr;
    }

    .vis-photo-buttons {
        flex-direction: column;
    }
}

/* ---- Measurement UX Improvements ---- */
.measurement-actions-improved {
    display: flex;
    gap: 8px;
}

.measurement-actions-improved .btn-action {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: none;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.measurement-actions-improved .btn-action.edit {
    background: var(--gray-100);
    color: var(--blue-900);
}

.measurement-actions-improved .btn-action.edit:hover {
    background: rgba(45,83,156,0.1);
}

.measurement-actions-improved .btn-action.delete {
    background: #fef2f2;
    color: #dc2626;
}

.measurement-actions-improved .btn-action.delete:hover {
    background: #fee2e2;
}

.measurement-actions-improved .btn-action svg {
    flex-shrink: 0;
}

.measurement-detail-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}

.measurement-detail-tag {
    font-size: 12px;
    padding: 4px 10px;
    background: var(--gray-100);
    border-radius: 6px;
    color: var(--text);
    font-weight: 500;
}

.measurement-card.fade-out {
    animation: fadeOutCard 0.3s ease forwards;
}

@keyframes fadeOutCard {
    to {
        opacity: 0;
        transform: translateX(30px);
        height: 0;
        padding: 0;
        margin: 0;
        overflow: hidden;
    }
}

/* Confirm Delete Modal */
.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    box-shadow: 0 4px 12px rgba(220,38,38,.25);
}

.btn-danger:hover {
    box-shadow: 0 6px 16px rgba(220,38,38,.35);
    transform: translateY(-1px);
}

/* ---- Motiv-Grid (Haustüre) ---- */
.vis-motiv-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 10px;
}

.vis-motiv-item {
    cursor: pointer;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 3px solid var(--border);
    transition: border-color .2s, transform .15s, box-shadow .2s;
    background: #fff;
}

.vis-motiv-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

.vis-motiv-item.selected {
    border-color: var(--orange-600);
    box-shadow: 0 0 0 2px var(--orange-600);
}

.vis-motiv-item img {
    width: 100%;
    display: block;
    aspect-ratio: 3/5;
    object-fit: contain;
    background: var(--gray-50);
}

.vis-motiv-item .motiv-label {
    padding: 6px;
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text);
    background: var(--gray-50);
}

/* ---- Varianten-Grid ---- */
.vis-varianten-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 12px;
}

.vis-variant-item {
    position: relative;
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--gray-50);
    cursor: pointer;
}

.vis-variant-item img {
    width: 100%;
    display: block;
    border-radius: var(--radius-md);
}

.vis-variant-item .variant-label {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 6px 8px;
    background: linear-gradient(transparent, rgba(0,0,0,0.75));
    color: #fff;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.vis-variant-delete {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: rgba(239, 68, 68, 0.9);
    color: white;
    border: none;
    cursor: pointer;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.vis-variant-delete:hover {
    background: rgba(220, 38, 38, 1);
}

/* ---- Varianten-Vergleich ---- */
.vis-compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 8px;
}

.vis-compare-grid img {
    width: 100%;
    border-radius: var(--radius-md);
    cursor: pointer;
}

.vis-compare-grid .compare-label {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

/* ---- Muster-Foto Grid ---- */
.vis-muster-foto-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 12px;
}

.vis-muster-foto-item {
    cursor: pointer;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 3px solid transparent;
    transition: border-color .2s, transform .2s;
}

.vis-muster-foto-item:hover {
    border-color: var(--orange-600);
    transform: translateY(-2px);
}

.vis-muster-foto-item img {
    width: 100%;
    display: block;
    aspect-ratio: 16/10;
    object-fit: cover;
}

.vis-muster-foto-item .muster-label {
    padding: 8px;
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
}

/* ---- Muster-Foto Button ---- */
.vis-muster-btn {
    background: linear-gradient(135deg, #f0f4ff, #e0e8f8) !important;
    border-color: var(--blue-600) !important;
    color: var(--blue-900) !important;
}

/* ---- Kategorie-Item highlight ---- */
.vis-kategorie-item input:checked + .vis-radio-content {
    background: linear-gradient(135deg, #f8f9ff, #eef1fa) !important;
    border-color: var(--blue-700) !important;
}

/* ---- Print Styles ---- */
@media print {
    body {
        background: #fff !important;
    }

    .app-header, .topbar, .tabs, .form-actions, .btn, .modal, .loading-overlay, .toast-container {
        display: none !important;
    }

    .app-content, .content {
        padding: 0;
        background: white;
    }

    .card, .form-container {
        box-shadow: none;
        padding: 0;
    }
}

/* ===== Angebot Sub-Tabs ===== */
.offer-subtabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    padding: 8px;
    background: var(--gray-50);
    border-radius: var(--radius-xl);
    margin-bottom: 16px;
}

.offer-subtab {
    flex: 0 0 auto;
    padding: 10px 16px;
    border: none;
    background: transparent;
    border-radius: var(--radius-lg);
    font-size: 14px;
    font-weight: 600;
    color: var(--muted);
    cursor: pointer;
    transition: all 0.2s;
    text-align: center;
    white-space: nowrap;
}

.offer-subtab:hover {
    background: white;
    color: var(--text);
}

.offer-subtab.active {
    background: white;
    color: var(--blue-900);
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.offer-subtab-content {
    display: none;
}

.offer-subtab-content.active {
    display: block;
}

/* ===== Product Catalog (Konfigurator) ===== */
/* Auftragsart-Schnellzugriff im Konfigurator-Tab */
.konfig-auftragsart-section {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid #e5e7eb;
}
.konfig-auftragsart-title {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #6b7280;
    margin-bottom: 10px;
}

.configurator-header {
    margin-bottom: 20px;
}

.configurator-header h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--blue-900);
    margin: 0 0 4px;
}

.product-catalog {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.catalog-category-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: 700;
    color: var(--blue-900);
}

.catalog-category-header svg {
    color: var(--orange);
}

.catalog-products {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 10px;
}

.catalog-product-card {
    background: var(--card);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 0 0 12px 0;
    cursor: pointer;
    transition: all 0.2s;
    overflow: hidden;
}

.catalog-product-card:hover {
    border-color: var(--orange);
    background: #fff8f0;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(243, 146, 0, 0.15);
}

/* Image area inside catalog card */
.catalog-product-img {
    width: 100%;
    height: 90px;
    background: var(--gray-50);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 8px;
    position: relative;
}

.catalog-product-thumb {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: none;
}

.catalog-product-img-placeholder {
    color: var(--orange);
    opacity: 0.45;
}

.catalog-product-name {
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
    margin-bottom: 3px;
    padding: 0 12px;
    line-height: 1.3;
}

.catalog-product-price {
    font-size: 12px;
    color: var(--orange);
    font-weight: 700;
    padding: 0 12px;
}

.configurator-divider {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
    color: var(--muted);
    font-size: 13px;
}

.configurator-divider::before,
.configurator-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--border);
}

.configurator-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

/* ===== Block Management ===== */
.offer-blocks {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 16px;
}

.offer-block-container {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow);
}

.offer-block-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--blue-900);
    color: white;
    cursor: pointer;
    user-select: none;
}

.offer-block-title {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.offer-block-chevron {
    font-size: 12px;
    transition: transform 0.2s;
}

.offer-block-count {
    font-size: 12px;
    opacity: 0.7;
    font-weight: 400;
}

.offer-block-name {
    cursor: pointer;
}
.offer-block-name:hover {
    text-decoration: underline;
    text-decoration-style: dotted;
}

.offer-block-qty-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
}
.offer-block-qty-wrap label {
    opacity: 0.8;
    font-weight: 400;
}
/* Spezifisch genug, um die globale input[type=number]-Regel (background:#fff) zu schlagen —
   sonst steht weisse Schrift auf weissem Feld und die Anzahl ist unsichtbar. */
.offer-block-header .offer-block-qty-input,
.offer-block-qty-input {
    width: 48px;
    padding: 2px 4px;
    border: 1px solid rgba(255,255,255,0.6);
    border-radius: var(--radius);
    background: #fff;
    color: var(--blue-900);
    text-align: center;
    font-size: 14px;
    font-weight: 700;
}
.offer-block-header .offer-block-qty-input:focus,
.offer-block-qty-input:focus {
    outline: none;
    border-color: var(--blue-400, #60a5fa);
    box-shadow: 0 0 0 2px rgba(255,255,255,0.35);
}

.offer-block-total {
    font-weight: 800;
    font-size: 16px;
    margin-right: 8px;
}
.offer-block-subtotal {
    font-size: 12px;
    font-weight: 400;
    opacity: 0.8;
}

.offer-block-actions {
    display: flex;
    gap: 4px;
}

.offer-block-actions .btn-icon {
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255,255,255,0.15);
    border-radius: var(--radius);
    color: white;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.offer-block-actions .btn-icon:hover {
    background: rgba(255,255,255,0.3);
}

.offer-block-actions .btn-icon.delete:hover {
    background: rgba(220, 38, 38, 0.5);
}

/* Kein eigener Scrollbereich mitten in der Seite: max-height 600px erzeugte bei
   laengeren Bloecken einen ZWEITEN Scrollbalken neben dem der Seite — man wusste nie,
   welcher gerade scrollt. Der Grenzwert stammte nur von der Aufklapp-Animation.
   Preis dafuer: Auf- und Zuklappen geschieht jetzt ohne Animation. */
.offer-block-lines {
    max-height: none;
    overflow: visible;
}

.offer-block-lines.collapsed {
    max-height: 0;
    overflow: hidden;
}

.offer-block-optional-hint {
    padding: 8px 20px;
    font-size: 12px;
    color: var(--muted);
    font-style: italic;
    background: #fffbeb;
    border-top: 1px solid #fef3c7;
}

.offer-line-optional {
    background: #fffbeb;
}

.offer-line-optional .offer-line-title {
    color: var(--muted);
}

.badge-optional {
    display: inline-block;
    background: #fef3c7;
    color: #92400e;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    font-style: normal;
    vertical-align: middle;
}

.badge-standard {
    display: inline-block;
    background: #d1fae5;
    color: #065f46;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    font-style: normal;
    vertical-align: middle;
}

/* Kategorie-Unter-Header innerhalb von Blöcken */
.offer-cat-subheader {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    background: var(--gray-50, #f9fafb);
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    user-select: none;
}
.offer-cat-subheader:hover {
    background: #eef2ff;
}
.offer-cat-arrow {
    font-size: 10px;
    color: var(--muted);
    width: 12px;
    flex-shrink: 0;
}
.offer-cat-subcount {
    font-size: 12px;
    color: var(--muted);
    flex: 1;
}
.offer-cat-subtotal {
    font-size: 13px;
    font-weight: 700;
    color: var(--blue-900);
    white-space: nowrap;
}
.offer-cat-sublines.collapsed {
    display: none;
}

.offer-summary-row.block-detail {
    font-size: 13px;
    opacity: 0.85;
    border-bottom: 1px dashed #e5e7eb;
}

.offer-line-actions button.active {
    color: var(--orange);
}

/* Inline Qty per Position */
.offer-line-qty-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

input.offer-line-qty-input {
    width: 48px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    background: var(--card);
    padding: 2px 2px;
}

input.offer-line-qty-input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.offer-line-qty-unit {
    font-size: 11px;
    color: var(--muted);
    min-width: 20px;
}

.offer-line-price-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

input.offer-line-price-input {
    width: 62px;
    height: 30px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: right;
    font-size: 13px;
    font-weight: 600;
    background: var(--card);
    padding: 2px 4px;
}

input.offer-line-price-input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

/* Offer line image improvements */
.offer-line-img-placeholder {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    border-radius: 6px;
    font-size: 18px;
    border: 1px solid var(--border);
}

/* ===== Motiv Select Grid ===== */
.motiv-select-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    padding: 8px 0;
}

.motiv-select-card {
    border: 2px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--card);
}

.motiv-select-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
    transform: translateY(-2px);
}

.motiv-select-card.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
    background: #eff6ff;
}

.motiv-select-img-wrap {
    width: 100%;
    height: 200px;
    overflow: hidden;
    background: #e8e8e8;
    display: flex;
    align-items: center;
    justify-content: center;
}

.motiv-select-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.motiv-select-placeholder {
    font-size: 40px;
    color: var(--muted);
}

.motiv-select-label {
    padding: 8px 10px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    border-top: 1px solid var(--border);
}

/* ===== Color Selection Grid (Garagentore) ===== */
.color-select-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    padding: 8px 0;
}

.color-select-card {
    border: 2px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    cursor: pointer;
    transition: all 0.2s;
    background: var(--card);
}

.stautraum-size-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 4px 0 8px;
}

.stautraum-size-card {
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 10px 18px;
    cursor: pointer;
    background: var(--card);
    font-size: 14px;
    font-weight: 500;
    transition: border-color 0.15s, background 0.15s, color 0.15s;
    white-space: nowrap;
}

.stautraum-size-card:hover {
    border-color: var(--primary);
}

.stautraum-size-card.selected {
    border-color: var(--primary);
    background: #eff6ff;
    color: var(--primary);
}

.color-select-card:hover {
    border-color: var(--primary);
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
    transform: translateY(-2px);
}

.color-select-card.selected {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.25);
    background: #eff6ff;
}

.color-select-img-wrap {
    width: 100%;
    aspect-ratio: 4/3;
    overflow: hidden;
    background: #f9fafb;
    position: relative;   /* Positionierungskontext für absolute Kinder */
}

.color-select-img-wrap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.color-select-fallback {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--muted);
}

.color-select-swatch {
    position: absolute;   /* füllt immer den ganzen Container */
    inset: 0;             /* top/right/bottom/left: 0 */
    border-radius: 2px;
}

.color-select-label {
    padding: 6px 8px;
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    border-top: 1px solid var(--border);
    line-height: 1.3;
}

/* ===== Autocomplete ===== */
.autocomplete-wrapper {
    position: relative;
}
.autocomplete-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    z-index: 1000;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 12px rgba(0,0,0,0.12);
    display: none;
}
.autocomplete-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    transition: background 0.15s;
}
.autocomplete-item:last-child { border-bottom: none; }
.autocomplete-item:hover { background: #f0f4ff; }
.autocomplete-item .ac-main { font-weight: 600; font-size: 14px; }
.autocomplete-item .ac-sub { font-size: 11px; color: var(--muted); margin-top: 2px; }

/* ===== Lookup Modal ===== */
.lookup-result-item {
    padding: 10px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    border-radius: 6px;
    margin: 4px 0;
    transition: background 0.15s;
}
.lookup-result-item:hover { background: #f0f4ff; }
.lookup-result-item.lookup-current {
    background: #f0fdf4;
    border: 1px solid #86efac;
}

/* ===== Contact Person ===== */
.contact-person-select {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    background: var(--card);
}
.contact-fields {
    margin-top: 8px;
    padding: 12px;
    background: #f9fafb;
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

/* ===== Source Badge ===== */
.source-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    vertical-align: middle;
}
.source-enquiry {
    background: #fff3cd;
    color: #856404;
}
.source-quotation {
    background: #d1ecf1;
    color: #0c5460;
}

/* ===== Offer Summary ===== */
.offer-summary {
    background: var(--card);
    border: 2px solid var(--blue-900);
    border-radius: var(--radius-xl);
    overflow: hidden;
}

.offer-summary-row {
    display: flex;
    justify-content: space-between;
    padding: 12px 20px;
    font-size: 14px;
    border-bottom: 1px solid var(--border);
}

.offer-summary-row:last-child {
    border-bottom: none;
}

.offer-summary-row.optional {
    color: var(--muted);
    font-style: italic;
}

.offer-summary-row.discount-position {
    color: #b91c1c;
    background: #fff7ed;
    border-left: 4px solid #f59e0b;
}

.offer-summary-row.skonto-position {
    color: #b91c1c;
    background: #fff1f2;
    border-left: 4px solid #f59e0b;
    font-weight: 700;
}

.offer-summary-row.total {
    background: var(--blue-900);
    color: white;
    font-weight: 800;
    font-size: 16px;
}

/* ===== Text Blocks ===== */
.textblocks-container {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.offer-position-settings-host {
    margin: 0 0 16px;
}

.offer-discount-settings {
    display: grid;
    grid-template-columns: minmax(180px, 1fr) repeat(3, minmax(140px, auto));
    gap: 10px 16px;
    align-items: end;
    padding: 14px 16px;
    border: 1px solid #f0c36d;
    border-left: 4px solid #f59e0b;
    border-radius: 9px;
    background: #fffbeb;
}

.offer-discount-settings > h3,
.offer-discount-settings > p {
    grid-column: 1 / -1;
    margin: 0;
}

.offer-discount-settings .form-group { margin: 0; }

.payment-discount-calculated {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 270px;
    padding: 8px 11px;
    border-radius: 7px;
    background: #fff;
    color: #7c2d12;
    font-size: 12px;
}

.payment-discount-calculated strong { font-size: 14px; }

.offer-payment-conditions {
    margin: 18px 0 24px;
    padding: 16px;
    border: 1px solid #f0c36d;
    border-left: 5px solid #f59e0b;
    border-radius: 10px;
    background: #fffbeb;
}

.offer-payment-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
}

.offer-payment-heading h3 { margin: 0 0 3px; color: var(--blue-900); font-size: 17px; }
.offer-payment-heading p { margin: 0; color: var(--muted); font-size: 12px; }

.offer-payment-grid {
    display: grid;
    grid-template-columns: minmax(190px, .8fr) minmax(280px, 1.1fr) minmax(280px, 1.1fr);
    gap: 12px;
    align-items: stretch;
}

.offer-payment-grid > .form-group,
.offer-payment-option {
    margin: 0;
    padding: 11px;
    border: 1px solid #fde68a;
    border-radius: 8px;
    background: #fff;
}

.offer-payment-check {
    display: flex;
    align-items: center;
    gap: 7px;
    min-height: 34px;
    color: var(--blue-900);
    font-weight: 700;
}

.offer-payment-fields {
    display: grid;
    grid-template-columns: minmax(125px, 1fr) minmax(105px, .7fr);
    gap: 8px;
    margin-top: 7px;
}

.offer-payment-fields input,
.offer-payment-fields select { width: 100%; }

.offer-payment-conditions .payment-discount-calculated {
    margin-top: 12px;
    border: 1px solid #fecaca;
}

.offer-text-settings-host {
    margin-top: 20px;
    padding: 16px;
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    background: #f8fafc;
}

.offer-position-settings-title {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 14px;
    color: var(--blue-900);
}

.offer-position-settings-title span { color: var(--muted); font-size: 12px; }

@media (max-width: 900px) {
    .offer-discount-settings { grid-template-columns: 1fr 1fr; }
    .offer-position-settings-title { align-items: flex-start; flex-direction: column; gap: 2px; }
    .offer-payment-grid { grid-template-columns: 1fr; }
}

.textblocks-section h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--blue-900);
    margin-bottom: 4px;
}

.textblock-select-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.textblock-checkbox {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: background 0.2s;
}

.textblock-checkbox:hover {
    background: var(--gray-100);
}

.textblock-checkbox input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}

.textblock-info {
    flex: 1;
}

.textblock-info strong {
    display: block;
    font-size: 14px;
    margin-bottom: 2px;
}

.textblock-info span {
    font-size: 12px;
    color: var(--muted);
    line-height: 1.4;
}

/* Textblock-Selektor pro Angebot */
.textblock-selector-item {
    padding: 10px 14px;
    background: var(--gray-50);
    border-radius: var(--radius-lg);
    margin-bottom: 8px;
}
.textblock-override {
    width: 100%;
    margin-top: 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.5;
    resize: vertical;
    overflow: auto;   /* ohne overflow lässt sich ein Feld (auch contenteditable) nicht in der Höhe ziehen */
    font-family: inherit;
}
.textblock-override:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}
.textblock-preview {
    font-size: 12px;
    color: var(--muted);
    margin-top: 4px;
    padding-left: 26px;
    line-height: 1.4;
}
.btn-text-sm {
    display: inline-block;
    margin-top: 4px;
    padding: 2px 8px;
    font-size: 11px;
    color: var(--muted);
    background: none;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
}
.btn-text-sm:hover {
    background: var(--gray-100);
    color: var(--text);
}

.textblock-manager-item {
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    margin-bottom: 8px;
}
.textblock-manager-view {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}
.textblock-manager-info {
    flex: 1;
    cursor: pointer;
    min-width: 0;
}
.textblock-manager-info:hover {
    opacity: 0.8;
}
.textblock-manager-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}
.textblock-manager-edit {
    margin-top: 8px;
}
.textblock-manager-edit .form-group {
    margin-bottom: 10px;
}
.textblock-manager-edit label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 4px;
    color: var(--muted);
}
.textblock-manager-edit input,
.textblock-manager-edit textarea,
.textblock-manager-edit select {
    width: 100%;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 8px 10px;
    font-size: 13px;
}
.textblock-manager-edit textarea {
    resize: vertical;
}
.textblock-manager-edit .form-actions {
    display: flex;
    gap: 8px;
}

.badge-header, .badge-footer {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
}

.badge-header {
    background: #dbeafe;
    color: #1e40af;
}

.badge-footer {
    background: #f0fdf4;
    color: #166534;
}

.badge-default {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 6px;
    background: #fef3c7;
    color: #92400e;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
}
.checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    margin: 0;
}

/* ===== Offer Preview ===== */
.offer-preview-container {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.offer-preview-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.offer-preview-frame {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-xl);
    min-height: 400px;
}

.offer-preview-frame iframe {
    width: 100%;
    height: calc(100vh - 200px);
    min-height: 500px;
    border: none;
}

/* ===== Mobile Responsiv Offer ===== */
@media (max-width: 768px) {
    .offer-subtab {
        font-size: 12px;
        padding: 8px 10px;
    }
    .catalog-products {
        grid-template-columns: 1fr 1fr;
    }
    .offer-block-header {
        flex-wrap: wrap;
    }
    .offer-preview-frame iframe {
        height: calc(100vh - 220px);
        min-height: 400px;
    }
    .offer-preview-actions {
        flex-direction: column;
    }
    .offer-preview-actions .btn {
        width: 100%;
    }
}

/* ===== Size Selection Modal (Grössenwahl) ===== */
.size-section h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 12px;
}

.size-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
}

.size-card {
    background: var(--gray-50);
    border: 2px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 14px 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.size-card:hover {
    border-color: var(--primary);
    background: #f0f7ff;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.size-card.selected {
    border-color: var(--primary);
    background: #e8f0fe;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}

.size-card-dimensions {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 4px;
}

.size-card-price {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--primary);
}

.size-card-label {
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

.size-custom-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
}

.size-custom-row .form-group {
    margin-bottom: 0;
}

.size-custom-row .form-group label {
    font-size: 0.8rem;
    margin-bottom: 4px;
}

.size-custom-row .form-group input {
    padding: 8px 10px;
    font-size: 0.9rem;
}

.kuerzung-checkbox {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.95rem;
}

.kuerzung-checkbox input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

.kuerzung-details {
    background: var(--gray-50);
    border-radius: var(--radius);
    padding: 12px 16px;
}

@media (max-width: 600px) {
    .size-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .size-custom-row {
        flex-direction: column;
        gap: 8px;
    }
}

/* ===== Block Position Picker ===== */
.block-pos-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}

.block-pos-toolbar label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    margin-right: 4px;
}

.block-pos-groesse-select {
    display: flex;
    align-items: center;
    gap: 6px;
}

.block-pos-groesse-select select {
    height: 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 8px;
    font-size: 13px;
    background: var(--card);
    max-width: 130px;
}

.block-pos-template-select select,
.block-pos-category-filter select {
    height: 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 8px;
    font-size: 13px;
    background: var(--card);
    max-width: 200px;
}

.block-pos-search {
    flex: 1;
    min-width: 120px;
}

.block-pos-search input {
    width: 100%;
    height: 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0 10px;
    font-size: 13px;
}

.block-pos-search input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.block-pos-selection-info {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary);
    white-space: nowrap;
}

.block-pos-list {
    max-height: 50vh;
    overflow-y: auto;
}

.block-pos-empty {
    padding: 40px;
    text-align: center;
    color: var(--muted);
    font-size: 14px;
}

/* Alle-auswählen Leiste */
.block-pos-select-all-bar {
    padding: 8px 12px;
    border-bottom: 1px solid var(--border);
    background: var(--gray-50, #f9fafb);
}
.block-pos-select-all-bar label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    cursor: pointer;
}
.block-pos-select-all-bar input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
}

/* Kategorie-Gruppen */
.block-pos-cat-group {
    border-bottom: 1px solid var(--border);
}
.block-pos-cat-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    cursor: pointer;
    background: var(--gray-50, #f9fafb);
    user-select: none;
    position: sticky;
    top: 0;
    z-index: 2;
    border-bottom: 1px solid var(--border);
}
.block-pos-cat-header:hover {
    background: #eef2ff;
}
.block-pos-cat-arrow {
    font-size: 11px;
    color: var(--muted);
    width: 14px;
    text-align: center;
    flex-shrink: 0;
    transition: transform 0.15s;
}
.block-pos-cat-count {
    font-size: 12px;
    color: var(--muted);
    flex: 1;
}
.block-pos-cat-checkall {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
}
.block-pos-cat-checkall input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--primary);
}
.block-pos-cat-body {
    transition: max-height 0.2s ease;
    overflow: hidden;
}
.block-pos-cat-group.collapsed .block-pos-cat-body {
    display: none;
}

.block-pos-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.block-pos-table thead {
    position: sticky;
    top: 0;
    background: var(--gray-50);
    z-index: 1;
}

.block-pos-table th {
    padding: 8px 10px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid var(--border);
}

.block-pos-table td {
    padding: 8px 6px;
    vertical-align: middle;
    border-bottom: 1px solid var(--border);
}
/* Spaltenbreiten Block-Position-Picker */
.bpt-cb { width: 36px; text-align: center; }
.bpt-img { width: 50px; }
.bpt-desc { /* flex */ }
.bpt-qty { width: 65px; }
.bpt-price { width: 95px; font-weight: 700; color: var(--blue-900); white-space: nowrap; }
.bpt-opt { width: 40px; text-align: center; }
.block-pos-qty { width: 52px; }

.block-pos-row:hover {
    background: var(--blue-50, #eff6ff);
}

.block-pos-row.already-added {
    background: #f0fdf4;
}

.block-pos-img {
    width: 44px;
    height: 44px;
    border-radius: 4px;
    object-fit: cover;
    border: 1px solid var(--border);
    background: #f3f4f6;
}

.block-pos-no-img {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    background: #f3f4f6;
    border-radius: 4px;
    font-size: 18px;
    border: 1px solid var(--border);
}

.block-pos-name {
    font-weight: 600;
    color: var(--text);
    line-height: 1.3;
}

.block-pos-itemid {
    font-size: 11px;
    color: var(--muted);
}

.block-pos-price {
    font-weight: 700;
    color: var(--blue-900);
    white-space: nowrap;
}

.block-pos-qty {
    width: 52px;
    height: 28px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    text-align: center;
    font-size: 12px;
    padding: 0 4px;
}

.badge-existing {
    display: inline-block;
    background: #dcfce7;
    color: #166534;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 4px;
}

/* Add position button in block header */
.btn-add-pos {
    color: var(--primary) !important;
    background: rgba(37, 99, 235, 0.08) !important;
    border-radius: var(--radius) !important;
}

.btn-add-pos:hover {
    background: rgba(37, 99, 235, 0.18) !important;
    color: var(--primary) !important;
}

@media (max-width: 600px) {
    .block-pos-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
}

/* =====================================================
   RESPONSIVE OPTIMIERUNG — Handy & Tablet
   ===================================================== */

/* ---- Handy (max 480px) ---- */
@media (max-width: 480px) {
    /* Header kompakt */
    .topbar, .app-header {
        padding: 10px 12px;
        gap: 8px;
    }
    .logo { height: 26px; }
    .header-title { font-size: 15px; }
    .user-name { font-size: 12px; }
    .icon-btn, .btn-icon { width: 38px; height: 38px; border-radius: 10px; }

    /* Content weniger padding */
    .content, .app-content {
        padding: 8px 6px 24px;
    }

    /* Cards/Container */
    .card, .form-container {
        padding: 12px;
        border-radius: 14px;
        margin-bottom: 10px;
    }

    /* Tabs kleiner + horizontal scrollbar */
    .tabs {
        padding: 3px;
        gap: 2px;
        border-radius: 12px;
        margin-bottom: 10px;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .tabs::-webkit-scrollbar { display: none; }
    .tab {
        padding: 8px 10px;
        font-size: 11px;
        border-radius: 10px;
        flex-shrink: 0;
    }

    /* Offer Subtabs kompakt */
    .offer-subtabs {
        padding: 4px;
        gap: 2px;
        border-radius: 14px;
        margin-bottom: 10px;
    }
    .offer-subtab {
        padding: 7px 6px;
        font-size: 11px;
    }

    /* Block Header */
    .offer-block-header {
        padding: 10px 12px;
        gap: 6px;
    }
    .offer-block-title { gap: 6px; }
    .offer-block-name { font-size: 14px; }
    .offer-block-total { font-size: 14px; }
    .offer-block-subtotal { font-size: 10px; }
    .offer-block-qty-wrap { font-size: 11px; }
    .offer-block-qty-input { width: 40px; font-size: 12px; }
    .offer-block-actions .btn-icon { width: 24px; height: 24px; }
    .btn-add-pos { width: 24px !important; height: 24px !important; }

    /* Offer Line — Stacked Layout auf Handy */
    .offer-line {
        flex-wrap: wrap;
        padding: 10px 12px;
        gap: 8px;
    }
    .offer-line-img, .offer-line-img-placeholder {
        width: 40px;
        height: 40px;
    }
    .offer-line-info {
        flex: 1 1 calc(100% - 56px);
        min-width: 0;
    }
    .offer-line-title { font-size: 13px; }
    .offer-line-details { font-size: 11px; }

    /* Zweite Zeile: Qty/Preis/Total/Actions horizontal verteilt */
    .offer-line-qty-wrap {
        flex: 0 0 auto;
        margin-left: 48px; /* Bild-Breite + gap, damit es unter Info anfängt */
    }
    .offer-line-price-wrap {
        flex: 0 0 auto;
    }
    .offer-line-amount {
        flex: 0 0 auto;
        min-width: 70px;
        font-size: 13px;
        text-align: right;
    }
    .offer-line-option-check {
        margin-left: 2px;
    }
    input.offer-line-qty-input { width: 40px; height: 28px; font-size: 12px; }
    .offer-line-qty-unit { font-size: 10px; }
    input.offer-line-price-input { width: 52px; height: 28px; font-size: 12px; }

    /* Actions kompakt */
    .offer-line-actions {
        flex: 0 0 auto;
        gap: 2px;
    }
    .offer-line-actions button { width: 28px; height: 28px; }

    /* Summary */
    .offer-summary-row { padding: 10px 14px; font-size: 13px; }
    .offer-summary-row.total { font-size: 16px; }

    /* Total Footer */
    .offer-total { padding: 14px; }
    .total-amount { font-size: 20px; }

    /* Product Catalog */
    .catalog-category-header span { font-size: 14px; }
    .catalog-products { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }
    .catalog-product-img { height: 70px; }
    .catalog-product-name { font-size: 12px; }
    .catalog-product-price { font-size: 11px; }

    /* Modals */
    .modal { padding: 0; }
    .modal-content {
        max-width: 100%;
        max-height: 100%;
        height: 100%;
        border-radius: 0;
    }
    .modal-content.modal-large {
        max-width: 100%;
    }
    .modal-header { padding: 12px 14px; }
    .modal-header h2 { font-size: 16px; }
    .modal-body { padding: 12px 14px; }
    .modal-footer {
        padding: 12px 14px;
        gap: 8px;
    }
    .modal-footer .btn { font-size: 13px; padding: 10px 14px; }

    /* Block Position Picker Table als Karten */
    .block-pos-table thead { display: none; }
    .block-pos-table, .block-pos-table tbody, .block-pos-table tr, .block-pos-table td {
        display: block;
        width: 100%;
    }
    .block-pos-table tr.block-pos-row {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 8px;
        padding: 10px;
        border-bottom: 1px solid var(--border);
    }
    .block-pos-table td { padding: 0; border-bottom: none; }
    .block-pos-table td:nth-child(1) { flex: 0 0 auto; } /* Checkbox */
    .block-pos-table td:nth-child(2) { flex: 0 0 auto; } /* Bild */
    .block-pos-table td:nth-child(3) { flex: 1 1 0; min-width: 0; } /* Name */
    .block-pos-table td:nth-child(4) { flex: 0 0 55px; } /* Menge */
    .block-pos-table td:nth-child(5) { flex: 0 0 auto; font-weight: 700; } /* Preis */
    .block-pos-table td:nth-child(6) { flex: 0 0 auto; } /* Optional */

    /* Motiv Auswahl */
    .motiv-select-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }
    .motiv-select-label { font-size: 11px; padding: 6px; }

    /* Color Selection */
    .color-select-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    .color-select-label { font-size: 10px; padding: 5px 6px; }

    /* Size Selection */
    .size-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }

    /* Template cards */
    .template-grid { grid-template-columns: 1fr !important; gap: 8px; }

    /* Print Preview */
    .offer-preview-frame iframe { height: calc(100vh - 240px); min-height: 350px; }

    /* Formularfelder kompakter */
    input[type="text"], input[type="password"], input[type="number"],
    input[type="email"], input[type="tel"], input[type="date"],
    input[type="search"], select, textarea {
        padding: 10px 12px;
        font-size: 15px;
        border-radius: 10px;
    }
    .field > label, .form-group > label { font-size: 11px; margin-bottom: 4px; }

    /* Visualizer */
    .vis-radio-group { grid-template-columns: 1fr !important; }
    .vis-motiv-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; }

    /* Measurement */
    .measurement-data, .measurement-grid { grid-template-columns: 1fr !important; }
}

/* ---- Tablet Portrait (481px - 768px) ---- */
@media (min-width: 481px) and (max-width: 768px) {
    .topbar, .app-header {
        padding: 12px 14px;
    }
    .logo { height: 28px; }
    .header-title { font-size: 17px; }

    .content, .app-content {
        padding: 14px 12px 32px;
    }

    .card, .form-container {
        padding: 16px;
        border-radius: 16px;
    }

    /* Offer Lines etwas kompakter */
    .offer-line {
        padding: 12px 14px;
        gap: 10px;
    }
    .offer-line-img, .offer-line-img-placeholder {
        width: 44px;
        height: 44px;
    }
    .offer-line-title { font-size: 14px; }
    input.offer-line-qty-input { width: 42px; height: 30px; }
    input.offer-line-price-input { width: 56px; height: 30px; }
    .offer-line-amount { min-width: 70px; font-size: 14px; }
    .offer-line-actions button { width: 30px; height: 30px; }

    /* Block Header */
    .offer-block-header {
        padding: 10px 14px;
        gap: 8px;
    }
    .offer-block-total { font-size: 15px; }

    /* Modals nicht ganz fullscreen */
    .modal { padding: 8px; }
    .modal-content { border-radius: 16px; }
    .modal-content.modal-large { max-width: 100%; }

    /* Motiv Grid 3 Spalten */
    .motiv-select-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    /* Color Grid 3 Spalten */
    .color-select-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }

    /* Catalog */
    .catalog-products { grid-template-columns: repeat(2, 1fr); }

    /* Block Pos Picker */
    .block-pos-img { width: 38px; height: 38px; }
    .block-pos-no-img { width: 38px; height: 38px; }
}

/* ---- Tablet Landscape (769px - 1024px) ---- */
@media (min-width: 769px) and (max-width: 1024px) {
    .content, .app-content {
        padding: 18px 20px 40px;
    }
    .card, .form-container {
        max-width: 100%;
    }

    /* Offer Lines */
    .offer-line {
        padding: 14px 16px;
        gap: 10px;
    }
    .offer-line-amount { min-width: 80px; }

    /* Motiv Grid 4 Spalten */
    .motiv-select-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ---- Touch-spezifisch: grössere Tap-Targets ---- */
@media (hover: none) and (pointer: coarse) {
    /* Inline Inputs etwas grösser für Touch */
    input.offer-line-qty-input,
    input.offer-line-price-input {
        min-height: 36px;
    }

    /* Block Pos Checkboxen grösser */
    .block-pos-cb,
    .block-pos-opt {
        width: 20px;
        height: 20px;
    }

    /* Offer-Line Actions grösser */
    .offer-line-actions button {
        min-width: 40px;
        min-height: 40px;
    }

    /* Block header actions */
    .offer-block-actions .btn-icon {
        width: 32px;
        height: 32px;
    }

    /* Tab touch */
    .tab, .offer-subtab {
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Motiv cards */
    .motiv-select-card {
        min-height: 44px;
    }

}

/* ---- Landscape Handy ---- */
@media (max-height: 500px) and (orientation: landscape) {
    .modal-content {
        max-height: 100vh;
    }
    .modal-body {
        max-height: calc(100vh - 120px);
        overflow-y: auto;
    }
    .block-pos-list { max-height: 40vh; }
    .offer-block-lines { max-height: 300px; }
}

/* ---- Enquiry Detail View ---- */
#viewEnquiry {
    padding: 0 16px 16px;
    max-width: 1200px;
    margin: 0 auto;
}

.enquiry-status-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: var(--radius-lg);
    margin-bottom: 16px;
    color: #fff;
    font-weight: 600;
}
.enquiry-status-bar.status-open { background: linear-gradient(135deg, #f59e0b, #d97706); }
.enquiry-status-bar.status-progress { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.enquiry-status-bar.status-done { background: linear-gradient(135deg, #22c55e, #16a34a); }
.enquiry-status-bar.status-cancelled { background: linear-gradient(135deg, #6b7280, #4b5563); }

.enquiry-status-label {
    padding: 3px 12px;
    border-radius: 20px;
    background: rgba(255,255,255,0.25);
    font-size: 13px;
}
.enquiry-linked-quote {
    cursor: pointer;
    text-decoration: underline;
    font-size: 13px;
    opacity: 0.9;
}
.enquiry-linked-quote:hover { opacity: 1; }
.enquiry-amount {
    margin-left: auto;
    font-size: 18px;
    font-weight: 800;
}

.enquiry-section {
    margin-bottom: 16px;
}
.enquiry-section h3 {
    font-size: 14px;
    font-weight: 700;
    color: var(--blue-900);
    margin-bottom: 8px;
}
.enquiry-products {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.enquiry-product-badge {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 20px;
    background: var(--blue-50);
    color: var(--blue-800);
    font-size: 13px;
    font-weight: 600;
    border: 1px solid var(--blue-100);
}
.enquiry-product-badge small { font-weight: 400; opacity: 0.7; }

.enquiry-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 12px;
}

.enquiry-card {
    background: #fff;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: 10px 12px;
}
.enquiry-card h3 {
    font-size: 13px;
    font-weight: 700;
    color: var(--blue-900);
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 2px solid var(--blue-50);
}

.enquiry-field-grid {
    display: grid;
    gap: 8px;
}

.enquiry-field {
    display: flex;
    gap: 8px;
    font-size: 13px;
    line-height: 1.4;
}
.enquiry-field-label {
    flex: 0 0 120px;
    color: var(--muted);
    font-weight: 500;
}
.enquiry-field-value {
    flex: 1;
    color: var(--text);
    font-weight: 600;
    word-break: break-word;
}
.enquiry-link {
    color: var(--primary);
    text-decoration: none;
}
.enquiry-link:hover {
    text-decoration: underline;
}

/* ── Kontakt-Aktionen: Anrufen & Maps ──────────────────────────────────────── */
.field-with-action {
    display: flex;
    align-items: center;
    gap: 4px;
    width: 100%;
}
.field-with-action input {
    flex: 1;
    min-width: 0;
}
.contact-action-btn {
    flex-shrink: 0;
    padding: 5px 9px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    background: #f8fafc;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    color: #374151;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
.contact-action-btn:hover {
    background: #e5e7eb;
    border-color: #9ca3af;
}
.contact-action-btn.tel-btn:hover  { background: #dcfce7; border-color: #86efac; }
.contact-action-btn.maps-btn:hover { background: #dbeafe; border-color: #93c5fd; }
.contact-action-link {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
    color: #374151;
    padding: 3px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: background 0.15s;
    white-space: nowrap;
}
.contact-action-link:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
    text-decoration: none;
}
.contact-action-link.tel-link  { color: #166534; }
.contact-action-link.tel-link:hover  { background: #dcfce7; border-color: #86efac; }
.contact-action-link.maps-link { color: #1e40af; }
.contact-action-link.maps-link:hover { background: #dbeafe; border-color: #93c5fd; }
/* ─────────────────────────────────────────────────────────────────────────── */

.enquiry-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    padding: 16px 0 16px;
    position: sticky;
    bottom: 0;
    background: var(--bg);
    border-top: 2px solid var(--border);
    z-index: 10;
    margin-top: 8px;
}
.enquiry-actions .btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: none;
}
.enquiry-actions .btn-primary {
    background: linear-gradient(135deg, var(--blue-700) 0%, var(--blue-800) 100%);
    color: #fff;
    font-size: 15px;
    padding: 12px 28px;
    box-shadow: 0 3px 10px rgba(45,83,156,0.4);
}
.enquiry-actions .btn-primary:hover { background: linear-gradient(135deg, var(--blue-800) 0%, var(--blue-900) 100%); }
.enquiry-actions .btn-outline {
    background: #fff;
    color: var(--text);
    border: 1px solid var(--border);
}
.enquiry-actions .btn-outline:hover { background: var(--gray-50); }

/* Enquiry File Upload */
/* Email Drop Zone */
.email-drop-zone {
    border: 2px dashed #d1d5db;
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    color: #6b7280;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 12px;
    background: #f9fafb;
}
.email-drop-zone.dragover {
    border-color: #f59e0b;
    background: #fffbeb;
    color: #92400e;
}
.email-drop-zone:hover {
    border-color: #9ca3af;
    background: #f3f4f6;
}
.email-import-loading { color: #6b7280; font-size: 13px; padding: 8px; }
.email-import-success {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    margin-bottom: 10px;
}
.mailbox-results-header {
    font-weight: 600;
    font-size: 13px;
    color: #1e40af;
    padding: 8px 0 6px;
}
.mailbox-results-list {
    max-height: 250px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}
.mailbox-result-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    cursor: default;
}
.mailbox-result-item:hover { background: #eff6ff; border-color: #93c5fd; }
.mailbox-result-info { flex: 1; min-width: 0; }

.email-import-error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 13px;
    color: #991b1b;
    margin-bottom: 10px;
}

.enquiry-file-upload {
    border: 2px dashed var(--border);
    border-radius: 8px;
    margin-bottom: 12px;
    transition: all 0.2s;
}
.enquiry-file-upload.dragover {
    border-color: var(--blue-600);
    background: rgba(37, 99, 235, 0.05);
}
.enquiry-file-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.enquiry-file-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 6px;
    background: var(--gray-50);
    border: 1px solid var(--border);
    transition: all 0.15s;
}
.enquiry-file-item[onclick] {
    cursor: pointer;
}
.enquiry-file-item:hover {
    background: #eff6ff;
    border-color: #93c5fd;
}
.enquiry-file-icon { font-size: 18px; flex-shrink: 0; }
.enquiry-file-info { flex: 1; min-width: 0; }
.enquiry-file-name {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.enquiry-file-meta {
    font-size: 11px;
    color: var(--text-muted);
}
.enquiry-file-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

/* Enquiry responsive */
@media (max-width: 768px) {
    .enquiry-grid {
        grid-template-columns: 1fr;
    }
    .enquiry-status-bar {
        flex-wrap: wrap;
    }
    .enquiry-amount {
        margin-left: 0;
        width: 100%;
        text-align: right;
    }
    .enquiry-field-label {
        flex: 0 0 100px;
        font-size: 12px;
    }
}

/* ===== Enquiry Edit Inputs ===== */
.enquiry-input {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 14px;
    font-family: inherit;
    background: white;
    color: var(--text);
    transition: border-color .2s, box-shadow .2s;
}
.enquiry-input:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1);
}
.enquiry-input[type="date"] {
    min-width: 150px;
}
.enquiry-input[type="number"] {
    min-width: 100px;
}
.enquiry-textarea {
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    line-height: 1.5;
}
.enquiry-field-full {
    flex-direction: column;
    gap: 4px;
}
.enquiry-field-full .enquiry-field-label {
    flex: none;
}
.enquiry-select {
    appearance: auto;
    cursor: pointer;
}

/* ===== Pipeline Drag & Drop ===== */
.pipeline-card[draggable="true"] {
    cursor: grab;
}
.pipeline-card[draggable="true"]:active {
    cursor: grabbing;
}
.pipeline-card.dragging {
    opacity: 0.4;
    transform: scale(0.95);
    box-shadow: 0 0 0 2px #3b82f6;
}

.pipeline-column-valid-target {
    outline: 2px dashed #3b82f6;
    outline-offset: -2px;
    background: rgba(59,130,246,0.05) !important;
    border-radius: 8px;
}
.pipeline-column-drop-hover {
    outline: 2px solid #22c55e !important;
    background: rgba(34,197,94,0.08) !important;
}

/* ===== Completion Modal ===== */
.completion-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn .15s ease-out;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }

.completion-modal {
    background: white;
    border-radius: 16px;
    padding: 28px;
    max-width: 380px;
    width: 90%;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
    animation: slideUp .2s ease-out;
}
@keyframes slideUp { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }

.completion-modal h3 {
    margin: 0 0 6px;
    font-size: 18px;
    color: var(--text);
}
.completion-modal p {
    color: #64748b;
    margin: 0 0 20px;
    font-size: 14px;
}
.completion-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
.btn-completion {
    padding: 14px;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform .1s, filter .1s;
}
.btn-completion:hover {
    transform: scale(1.02);
}
.btn-completion:active {
    transform: scale(0.98);
}
.btn-won {
    background: #dcfce7;
    color: #166534;
}
.btn-won:hover { background: #bbf7d0; }
.btn-lost {
    background: #fef2f2;
    color: #991b1b;
}
.btn-lost:hover { background: #fecaca; }
.btn-cancelled {
    background: #f1f5f9;
    color: #475569;
}
.btn-cancelled:hover { background: #e2e8f0; }
.btn-cancel {
    background: none;
    border: 1px solid #e2e8f0;
    padding: 10px 24px;
    border-radius: 8px;
    cursor: pointer;
    color: #64748b;
    font-size: 14px;
}
.btn-cancel:hover { background: #f8fafc; }

/* ---- Print: nichts ändern ---- */
@media print {
    .offer-line { break-inside: avoid; }
    .offer-block-container { break-inside: avoid; }
}

/* ===== Pipeline Dashboard ===== */
/* ---- Einheitlicher Tab-Header für alle Seiten ---- */
.dashboard-header,
.planung-header,
.auftraege-header,
.kennzahlen-header {
    display: flex;
    flex-direction: column;       /* Zeile 1: Nav-Toggle / Zeile 2: Filter */
    align-items: stretch;
    justify-content: flex-start;
    gap: 5px;
    padding: 10px 14px 8px;       /* Extra oben damit tab-badge-Kreise nicht abgeschnitten */
    background: #fff;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 0;
    /* Header bleibt beim Scrollen oben sichtbar */
    position: sticky;
    top: 0;
    z-index: 100;
}


.view-toggle {
    display: flex;
    flex-wrap: wrap;
    background: #e8ecf2;
    border-radius: 12px;
    padding: 4px;
    overflow: visible;
    position: relative;
    gap: 2px;
    border: 1px solid #d1d8e3;
}

.toggle-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: #4b5563;
    cursor: pointer;
    transition: all .2s;
    white-space: nowrap;
    position: relative;
}

.toggle-btn:hover {
    background: rgba(255,255,255,0.6);
    color: #1e3c6e;
}

.toggle-btn.active {
    background: #fff;
    color: #1e3c6e;
    box-shadow: 0 2px 6px rgba(0,0,0,.12), 0 0 0 1px rgba(30,60,110,0.06);
}

.toggle-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.tab-badge {
    position: absolute;
    top: -8px;
    right: -10px;
    min-width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 6px;
    background: #3b82f6;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 11px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(59,130,246,0.5);
    pointer-events: none;
    animation: badgePop 0.3s ease-out;
    z-index: 10;
    border: 2px solid #fff;
}

.tab-badge.badge-blue {
    background: #3b82f6;
    box-shadow: 0 2px 6px rgba(59,130,246,0.4);
}

.tab-badge.badge-amber {
    background: #f59e0b;
    box-shadow: 0 2px 6px rgba(245,158,11,0.4);
}

@keyframes badgePop {
    0% { transform: scale(0); }
    50% { transform: scale(1.3); }
    70% { transform: scale(0.9); }
    100% { transform: scale(1); }
}

.view-toggle-compact {
    display: flex;
    width: 100%;                  /* Volle Header-Breite nutzen */
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: visible;          /* Verhindert nicht, aber Badges brauchen Raum oben */
    /* Scrollbalken ausblenden */
    scrollbar-width: none;
    -ms-overflow-style: none;
    /* Badges bei top:-8px brauchen Platz; padding-top schafft Raum im Scroll-Container */
    padding-top: 10px;
    margin-top: -4px;             /* Visuellen Abstand kompensieren */
}
.view-toggle-compact::-webkit-scrollbar {
    display: none;
}
.view-toggle-compact .toggle-btn {
    flex: 1;                /* Gleichmässig die volle Breite aufteilen */
    justify-content: center;
    padding: 6px 6px;
    font-size: 12px;
    gap: 4px;
    white-space: nowrap;
    min-width: 0;           /* Erlaubt Schrumpfen unter natürlicher Breite */
}

/* ---- Globale Navigation IM Topbar (blauer Balken) ---- */
/* Alle übrigen (pro View duplizierten) Nav-Leisten ausblenden — nur #topNav ist sichtbar */
.view-toggle-compact:not(#topNav) { display: none !important; }

#topNav.topnav {
    flex: 1 1 340px;        /* nimmt die Mitte ein; bricht bei Platzmangel auf eigene Zeile */
    width: auto;            /* override width:100% der Basisklasse */
    min-width: 0;
    flex-wrap: wrap;        /* Tabs umbrechen statt horizontal scrollen */
    overflow: visible;
    padding-top: 0;
    margin-top: 0;
    gap: 2px;
    align-items: center;
}
#topNav.topnav .toggle-btn {
    flex: 0 0 auto;         /* natürliche Breite, nicht strecken → sauberes Umbrechen */
    color: rgba(255,255,255,0.82);
    padding: 5px 9px;
    font-size: 12px;
    font-weight: 600;
}
#topNav.topnav .toggle-btn:hover {
    background: rgba(255,255,255,0.16);
    color: #fff;
}
#topNav.topnav .toggle-btn.active {
    background: #fff;
    color: var(--blue-800, #1e3c6e);
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
}

/* Topbar darf umbrechen, Logo/Icons behalten ihre Breite */
.app-header { flex-wrap: wrap; }
.app-header .header-left  { flex: 0 0 auto; }
.app-header .header-right { flex: 0 0 auto; margin-left: auto; }

/* Hamburger nur auf schmalen Screens — Desktop: Nav direkt im Topbar */
.nav-toggle-btn { display: none; }

@media (max-width: 1199px) {
    .nav-toggle-btn {
        display: inline-flex; align-items: center; justify-content: center;
        width: 40px; height: 40px; border-radius: 12px; border: 0;
        background: rgba(255,255,255,.16); color: #fff; cursor: pointer; flex-shrink: 0;
    }
    .nav-toggle-btn:active { transform: scale(.95); }
    /* Nav standardmässig eingeklappt → bricht NICHT mehr in viele Zeilen um */
    #topNav.topnav { display: none; }
    /* Aufgeklappt: vertikales Dropdown über volle Breite, scrollbar */
    .app-header.nav-open #topNav.topnav {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex-basis: 100%;
        width: 100%;
        order: 9;                 /* unter Logo/Icons-Zeile */
        max-height: 70vh;
        overflow-y: auto;
        gap: 4px;
        margin-top: 8px;
        background: rgba(0,0,0,.16);
        border-radius: 12px;
        padding: 8px;
    }
    .app-header.nav-open #topNav.topnav .toggle-btn {
        width: 100%;
        justify-content: flex-start;
        padding: 11px 14px;
        font-size: 14px;
    }
}

/* Rote Zähler-Badge (Pendenzen) — gleiche Darstellung wie Re.kontrolle (badge-amber), nur rot */
.tab-badge.badge-red {
    background: #dc2626;
    box-shadow: 0 2px 6px rgba(220,38,38,0.45);
}

.dashboard-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;              /* Filter-Elemente umbrechen bei Bedarf */
}

.dashboard-actions select {
    padding: 7px 10px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    font-size: 13px;
    min-width: 90px;
    max-width: 180px;
    background: #fff;
    flex: 0 0 auto;
}
#salesOrderTypeFilter { min-width: 140px; }

.dashboard-actions input[type="search"] {
    flex: 1 1 160px;
    min-width: 120px;
    max-width: 280px;
}

/* KPI Bar */
.kpi-bar {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.kpi-card {
    background: #fff;
    border-radius: 8px;
    padding: 6px 10px;
    box-shadow: 0 1px 3px rgba(0,0,0,.06);
    text-align: center;
    transition: all .2s;
}

.kpi-value {
    display: block;
    font-size: 15px;
    font-weight: 800;
    color: #1e3c6e;
}

.kpi-label {
    display: block;
    font-size: 10px;
    color: #6b7280;
    font-weight: 600;
    margin-top: 1px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.kpi-card.kpi-alert {
    background: #fef2f2;
    border: 2px solid #fca5a5;
}
.kpi-card.kpi-alert .kpi-value {
    color: #dc2626;
}
.kpi-card.kpi-orders {
    background: #f0fdf4;
    border: 2px solid #86efac;
}
.kpi-card.kpi-orders .kpi-value {
    color: #16a34a;
}

/* ===== Auftragsverwaltung ===== */
.auftraege-container {
    padding: 0;
}
.auftraege-container > *:not(.auftraege-header) {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}
/* auftraege-header erbt von der einheitlichen Regel oben */
.auftraege-nav { display: flex; align-items: center; gap: 8px; }
.auftraege-controls { display: flex; gap: 8px; align-items: center; }
.auftraege-controls input[type="search"] {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
    min-width: 200px;
}

/* Order List */
.order-list-container {
    display: grid;
    gap: 4px;
}
.order-list-item {
    display: grid;
    grid-template-columns: 120px 1fr 1fr 120px 120px 80px;
    gap: 12px;
    align-items: center;
    padding: 7px 12px;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all .15s;
    font-size: 12px;
}
.order-list-item.order-list-item-8col {
    grid-template-columns: 110px 1fr 1fr 100px 100px 100px 100px 80px;
    gap: 8px;
}
.order-list-item:hover {
    border-color: var(--blue-700);
    box-shadow: 0 2px 8px rgba(30,60,110,.1);
}
.order-list-item .order-id {
    font-weight: 600;
    color: var(--blue-800);
}
.order-list-item .order-amount {
    font-weight: 600;
    text-align: right;
    font-size: 12px;
}
.order-list-item .order-open {
    text-align: right;
    color: #dc2626;
    font-weight: 500;
}
.order-list-item .order-status {
    text-align: center;
}
.order-list-item .order-ellipsis {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.order-list-item .order-purch-ok {
    color: #16a34a;
}
.order-list-header {
    display: grid;
    grid-template-columns: 120px 1fr 1fr 120px 120px 80px;
    gap: 12px;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.order-list-header.order-list-header-8col {
    grid-template-columns: 110px 1fr 1fr 100px 100px 100px 100px 80px;
    gap: 8px;
}

/* Order Detail */
.order-detail-container {
    background: var(--card);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    padding: 10px 12px;
}
.order-detail-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}
.order-detail-header h2 {
    font-size: 15px;
    margin: 0;
    flex: 1;
}
.order-status-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;   /* "Offener Auftrag" nicht auf zwei Zeilen umbrechen */
}
.order-status-badge.status-open { background: #dbeafe; color: #1e40af; }
.order-status-badge.status-backorder { background: #dbeafe; color: #1e40af; }
.order-status-badge.status-delivered { background: #d1fae5; color: #065f46; }
.order-status-badge.status-invoiced { background: #f0fdf4; color: #16a34a; }
.order-status-badge.status-cancelled { background: #fee2e2; color: #991b1b; }

/* Fixer Auftragskopf (15.10.2026): Titel, Aktionen, Prozessleiste, nächste Schritte und Reiter bleiben beim Scrollen oben */
.order-sticky-head { position: sticky; top: var(--app-header-h, 0px); z-index: 40; background: var(--card, #fff); margin: -10px -12px 10px; padding: 10px 12px 0; border-bottom: 1px solid var(--border, #e5e7eb); }
.order-sticky-head.is-stuck { box-shadow: 0 4px 10px rgba(15, 23, 42, .08); }
.order-sticky-head .order-detail-tabs { margin-bottom: 8px; }
.order-sticky-head .beleg-prozess-wrap { margin: 4px 0 6px; }
/* EIN Prozessblock vor den Knöpfen (16.10.2026): Ablauf-Leiste, darunter die Bubbles */
.order-sticky-head .beleg-prozess { flex-direction: column; align-items: flex-start; gap: 4px; }
.order-head-progress .order-progress-bar { margin: 0 0 4px; }
.order-sticky-head.is-stuck .order-progress-sub, .order-sticky-head.is-stuck #orderDetailSubtitle { display: none !important; }
.order-sticky-head.is-stuck .order-progress-circle { width: 20px; height: 20px; font-size: 10px; }
.order-steps-fold { border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; margin: 2px 0 6px; }
.order-steps-fold > summary { list-style: none; cursor: pointer; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 10px; font-size: 13px; }
.order-steps-fold > summary::-webkit-details-marker { display: none; }
.order-steps-fold > summary .osf-titel::before { content: '▸ '; color: #64748b; }
.order-steps-fold[open] > summary .osf-titel::before { content: '▾ '; }
.order-steps-fold .osf-titel { font-weight: 700; color: #002B57; }
.order-steps-fold .osf-next { display: inline-flex; align-items: center; gap: 6px; color: #475569; font-size: 12px; }
.order-steps-fold .osf-rows { padding: 0 12px 6px; max-height: 45vh; overflow: auto; }
@media (max-width: 760px) {
  .order-sticky-head { position: static; }
  .order-steps-fold .osf-next strong { display: none; }
}

/* Order Tabs */
.order-detail-tabs {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 3px;
    background: #f1f5f9;
    border-radius: 8px;
}
.order-tab {
    padding: 5px 10px;
    border: none;
    background: transparent;
    cursor: pointer;
    font-size: 11.5px;
    font-weight: 500;
    color: #64748b;
    border-radius: 6px;
    transition: all .15s;
    white-space: nowrap;
}
.order-tab:hover { color: var(--blue-700); background: rgba(255,255,255,.6); }
.order-tab.active {
    color: #fff;
    background: var(--blue-700);
    box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

/* Order Overview Grid */
.order-overview-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}
.order-info-card {
    padding: 10px 12px;
    background: var(--bg);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}
.order-info-card h4 {
    margin: 0 0 6px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--blue-700);
    font-weight: 700;
    border-bottom: 1px solid var(--border);
    padding-bottom: 5px;
}
.order-info-row {
    display: grid;
    grid-template-columns: 100px 1fr;
    gap: 6px;
    padding: 2px 0;
    font-size: 12px;
    align-items: center;
}
.order-info-row .label { color: var(--muted); font-size: 11px; }
.order-info-row .value { font-weight: 500; }

/* Order Lines Table */
.order-lines-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.order-lines-table th {
    text-align: left;
    padding: 4px 10px;
    background: var(--bg);
    font-size: 11px;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}
.order-lines-table td {
    padding: 3px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
/* Zeile mit Artikelbild bekommt mehr Platz */
.order-lines-table tr.has-image td {
    padding: 8px 10px;
}
.order-lines-table .amount { text-align: right; font-weight: 500; }
/* Kompakte Variante: enge Zeilen, Aktions-Buttons nebeneinander */
.order-lines-table.compact { font-size: 12.5px; }
.order-lines-table.compact th { padding: 3px 8px; }
.order-lines-table.compact td { padding: 2px 8px; line-height: 1.35; }
.order-lines-table.compact tr:nth-child(even):not(:last-child) td { background: rgba(0,0,0,.015); }

/* Invoice Card */
.invoice-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
}
.invoice-card.posted { border-left: 3px solid #16a34a; }
.invoice-card.draft { border-left: 3px solid #f59e0b; }
.invoice-card.sent { border-left: 3px solid #2563eb; }
/* Storniert: zurueckgenommene Buchung. Bewusst gedaempft, aber lesbar — die Rechnung
   bleibt bearbeitbar und kann erneut gebucht werden. */
.invoice-card.cancelled { border-left: 3px solid #b91c1c; background: #fafafa; }
.invoice-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.invoice-header .invoice-id { font-weight: 600; color: var(--blue-800); }
.invoice-header .invoice-amount { font-weight: 700; font-size: 16px; }
.invoice-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
}
.invoice-badge.akonto { background: #fef3c7; color: #92400e; }
.invoice-badge.posted { background: #d1fae5; color: #065f46; }
.invoice-badge.draft { background: #fee2e2; color: #991b1b; }
.invoice-badge.sent { background: #dbeafe; color: #1e40af; }
.invoice-badge.cancelled { background: #fee2e2; color: #b91c1c; border: 1px solid #fca5a5; }

/* Create Invoice Modal */
.invoice-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}
.invoice-modal {
    background: var(--card);
    border-radius: var(--radius-lg);
    padding: 24px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    overflow-y: auto;
}
.invoice-modal h3 { margin: 0 0 16px; }
.invoice-form-group {
    margin-bottom: 12px;
}
.invoice-form-group label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 4px;
}
.invoice-form-group input,
.invoice-form-group select,
.invoice-form-group textarea {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 14px;
}
.invoice-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 16px;
}

/* Purchase order card */
.purchase-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
}
.purchase-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}
.purchase-header .purch-id { font-weight: 600; color: var(--blue-800); }
.purchase-docs { margin-top: 8px; }
.purchase-doc-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 12px;
    color: var(--muted);
}

/* Assembly order card */
.assembly-card {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px;
    margin-bottom: 12px;
}
.assembly-card.signed { border-left: 3px solid #16a34a; }
.assembly-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

/* My Orders Toggle */
.my-orders-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    color: var(--text);
    user-select: none;
}
.my-orders-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--blue-700);
    cursor: pointer;
}

/* Order Status Filter Select */
.order-status-select {
    padding: 6px 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    min-width: 100px;
}
.order-open-steps-toggle {
    padding: 6px 12px;
    border: 1px solid #fcd34d;
    border-radius: var(--radius);
    font-size: 13px;
    font-weight: 600;
    background: #fffbeb;
    color: #b45309;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background .15s, border-color .15s;
}
.order-open-steps-toggle:hover { background: #fef3c7; }
.order-open-steps-toggle.active {
    background: #b45309;
    border-color: #b45309;
    color: #fff;
}
.order-open-steps-toggle .open-steps-count {
    display: inline-block;
    min-width: 18px;
    text-align: center;
    padding: 0 5px;
    border-radius: 10px;
    background: #b45309;
    color: #fff;
    font-size: 11px;
    line-height: 18px;
}
.order-open-steps-toggle.active .open-steps-count {
    background: #fff;
    color: #b45309;
}

/* Order Detail Actions */
.order-detail-actions {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

/* Order Edit Inputs */
.order-edit-input {
    width: 100%;
    padding: 3px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
    background: var(--card);
    height: 26px;
}
.order-edit-input:focus {
    border-color: var(--blue-700);
    outline: none;
    box-shadow: 0 0 0 2px rgba(37,99,235,.15);
}

.laufblatt-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-bottom: 8px;
}
.laufblatt-field label {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.laufblatt-field input {
    padding: 5px 8px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    background: var(--card);
    height: 30px;
}
.laufblatt-field input:focus {
    border-color: var(--blue-700);
    outline: none;
    box-shadow: 0 0 0 2px rgba(37,99,235,.15);
}

/* Order Amount Big (in overview) */
.order-amount-big {
    font-size: 16px;
    font-weight: 700;
    color: var(--blue-800);
}

/* Order Summary Bar */
.order-summary-bar {
    padding: 10px 16px;
    background: var(--bg);
    border-radius: var(--radius);
    font-size: 13px;
    margin-bottom: 12px;
    color: var(--text);
}
.order-summary-bar strong {
    font-weight: 700;
}

/* Purchase Card Confirmed */
.purchase-card.confirmed {
    border-left: 3px solid #16a34a;
}

/* Invoice Lines Section */
.invoice-lines-section {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}
.invoice-lines-section table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.invoice-lines-section th {
    text-align: left;
    padding: 6px 8px;
    background: var(--bg);
    font-size: 10px;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 600;
}
.invoice-lines-section td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.invoice-lines-section .amount {
    text-align: right;
    font-weight: 500;
}
.invoice-lines-section tfoot td {
    font-weight: 700;
    border-top: 2px solid var(--border);
    border-bottom: none;
}

/* Inline Edit Inputs (in invoice lines) */
.inline-edit {
    padding: 3px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 12px;
    background: var(--card);
    width: 100%;
}
.inline-edit:focus {
    border-color: var(--blue-700);
    outline: none;
}
.inline-edit-sm {
    width: 70px;
    text-align: right;
}

/* Small Icon Button */
.btn-icon-sm {
    width: 24px;
    height: 24px;
    border: none;
    background: #fee2e2;
    color: #dc2626;
    border-radius: var(--radius);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    transition: background .15s;
    padding: 0;
}
.btn-icon-sm:hover {
    background: #fecaca;
}

/* Invoice Line Item Lookup */
.inv-item-lookup-wrap {
    position: relative;
}
.inv-item-lookup-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 100;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    max-height: 240px;
    overflow-y: auto;
    min-width: 280px;
    margin-top: 2px;
}
.inv-item-lookup-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 10px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    transition: background .1s;
}
.inv-item-lookup-item:last-child {
    border-bottom: none;
}
.inv-item-lookup-item:hover {
    background: #f0f4ff;
}
.inv-item-lookup-main {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.inv-item-lookup-id {
    font-weight: 600;
    color: var(--blue-800);
    font-size: 12px;
}
.inv-item-lookup-name {
    font-size: 11px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.inv-item-lookup-price {
    font-weight: 600;
    font-size: 11px;
    white-space: nowrap;
    margin-left: 8px;
    color: var(--text);
}
.inv-item-lookup-empty {
    padding: 12px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
}

/* Invoice Sent Badge */
.invoice-sent-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: #dbeafe;
    color: #1e40af;
}

/* ===== KPI-Leiste ===== */
.order-kpi-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    padding: 12px 0;
}
.kpi-tile {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 12px 16px;
    text-align: center;
}
.kpi-tile .kpi-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--blue-800);
    line-height: 1.2;
}
.kpi-tile .kpi-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    margin-top: 4px;
}
.kpi-tile.kpi-warn .kpi-value { color: #b45309; }
.kpi-tile.kpi-ok .kpi-value { color: #16a34a; }
.kpi-tile.kpi-highlight { border-color: var(--orange-600); border-width: 2px; }
.kpi-tile.kpi-highlight .kpi-value { color: var(--orange-600); }

/* ===== 9-Spalten Grid (mit Indikatoren + DB%) ===== */
.order-list-item.order-list-item-10col {
    grid-template-columns: 110px 40px 1fr 1fr 90px 90px 55px 124px 90px 90px;
    gap: 6px;
}
.order-list-header.order-list-header-10col {
    grid-template-columns: 110px 40px 1fr 1fr 90px 90px 55px 124px 90px 90px;
    gap: 6px;
}

/* Order indicators column */
.order-indicators {
    display: flex;
    gap: 3px;
    align-items: center;
    font-size: 14px;
}
.order-indicators .ind {
    width: 16px;
    height: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    border-radius: 50%;
}
.ind-rapport { background: #fef3c7; color: #92400e; }
.ind-lines { background: #dbeafe; color: #1e40af; }
.ind-webshop { background: #d1fae5; color: #065f46; }

/* DB% column */
.order-db {
    font-size: 12px;
    font-weight: 600;
    text-align: right;
}
.order-db.db-ok { color: #16a34a; }
.order-db.db-warn { color: #b45309; }
.order-db.db-bad { color: #dc2626; }

/* Status notes subline */
.order-subline {
    grid-column: 1 / -1;
    font-size: 11px;
    color: var(--muted);
    padding-left: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.order-product-summary {
    grid-column: 1 / -1;
    min-width: 0;
    padding: 3px 6px 1px;
    border-left: 3px solid #f59e0b;
    color: #334155;
    font-size: 12px;
    line-height: 1.35;
    white-space: normal;
    overflow-wrap: anywhere;
}
.order-product-summary strong { color: #92400e; }

/* ===== Action-Dropdown Menus ===== */
.order-action-dropdown {
    position: relative;
}
.order-action-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    z-index: 200;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    min-width: 200px;
    margin-top: 4px;
}
.order-action-dropdown.open .order-action-menu {
    display: block;
}
.order-action-menu button {
    display: block;
    width: 100%;
    padding: 10px 16px;
    border: none;
    background: none;
    text-align: left;
    font-size: 13px;
    cursor: pointer;
    color: var(--text);
    transition: background .1s;
}
.order-action-menu button:hover {
    background: #f0f4ff;
}
.order-action-menu button:first-child { border-radius: var(--radius) var(--radius) 0 0; }
.order-action-menu button:last-child { border-radius: 0 0 var(--radius) var(--radius); }

/* ===== Kalkulations-Spalten in Invoice Lines ===== */
.kalk-col {
    text-align: right;
    font-size: 12px;
}
.kalk-input {
    width: 65px;
    padding: 3px 4px;
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 12px;
    text-align: right;
    background: var(--card);
}
.kalk-input:focus {
    border-color: var(--blue-700);
    outline: none;
    box-shadow: 0 0 0 2px rgba(37,99,235,.15);
}
.kalk-checkbox {
    width: 16px;
    height: 16px;
    accent-color: var(--blue-700);
    cursor: pointer;
}
.kalk-total {
    font-weight: 600;
    color: var(--text);
}

/* ===== Zahlungsart-Badges ===== */
.payment-badges {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}
.payment-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
    font-weight: 600;
    background: #f3f4f6;
    color: var(--muted);
}
.payment-badge.active { background: #d1fae5; color: #065f46; }

/* ===== Aktivitäten-Timeline ===== */
.activities-timeline {
    padding: 0;
    margin: 0;
    list-style: none;
}
.activity-item {
    display: flex;
    gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}
.activity-item:last-child { border-bottom: none; }
.activity-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--blue-700);
    margin-top: 4px;
    flex-shrink: 0;
}
.activity-content {
    flex: 1;
    min-width: 0;
}
.activity-title {
    font-weight: 600;
    font-size: 13px;
    color: var(--text);
}
.activity-desc {
    font-size: 12px;
    color: var(--muted);
    margin-top: 2px;
}
.activity-meta {
    font-size: 11px;
    color: var(--muted);
    margin-top: 4px;
}
.activity-form {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.activity-form select,
.activity-form input,
.activity-form textarea {
    padding: 6px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
}
.activity-form textarea {
    flex: 1;
    min-width: 200px;
    resize: vertical;
    min-height: 36px;
}

/* Reverse button */
.btn-danger-sm {
    padding: 4px 10px;
    border: 1px solid #dc2626;
    background: #fee2e2;
    color: #dc2626;
    border-radius: var(--radius);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all .15s;
}
.btn-danger-sm:hover {
    background: #fecaca;
}

/* ---- Order List: Tablet (768–1023px) — reduziertes Grid ---- */
@media (min-width: 768px) and (max-width: 1023px) {
    .order-list-item.order-list-item-10col {
        grid-template-columns: 100px 1fr 1fr 90px 90px 115px;
        gap: 6px;
    }
    .order-list-header.order-list-header-10col {
        grid-template-columns: 100px 1fr 1fr 90px 90px 115px;
        gap: 6px;
    }
    /* Indikatoren und DB% Spalte ausblenden auf Tablet */
    .order-list-item.order-list-item-10col .order-indicators,
    .order-list-item.order-list-item-10col .order-db,
    .order-list-item.order-list-item-10col .order-auftragsdatum,
    .order-list-item.order-list-item-10col .order-subline {
        display: none;
    }
    .order-list-header.order-list-header-10col > div:nth-child(2),
    .order-list-header.order-list-header-10col > div:nth-child(7),
    .order-list-header.order-list-header-10col > div:nth-child(9) {
        display: none;
    }
}

/* ---- Order List: Phone (<768px) — Card-Layout mit Labels ---- */
@media (max-width: 767px) {
    .order-list-item,
    .order-list-item.order-list-item-8col,
    .order-list-item.order-list-item-10col {
        grid-template-columns: 1fr 1fr;
        gap: 4px 12px;
    }
    .order-list-header { display: none; }

    /* Data-Labels als Mini-Header über jedem Wert */
    .order-list-item > div[data-label]:not([data-label=""])::before {
        content: attr(data-label);
        display: block;
        font-size: 10px;
        color: #9ca3af;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        margin-bottom: 1px;
    }

    .order-overview-grid { grid-template-columns: 1fr; }
    .auftraege-header { flex-direction: column; align-items: stretch; }
    .auftraege-controls { flex-wrap: wrap; }
    .inline-edit-sm { width: 60px; }
    .order-kpi-bar { grid-template-columns: 1fr 1fr; gap: 8px; }
    .kpi-tile .kpi-value { font-size: 16px; }
    .order-indicators { font-size: 12px; }
    .order-subline { display: none; }
    .order-action-dropdown .order-action-menu { left: 0; right: auto; }
    .kalk-input { width: 55px; }
    .activity-form { flex-direction: column; }
}

/* Pipeline Board */
.pipeline-board {
    display: flex;
    gap: 10px;
    /* WICHTIG: kein overflow-x:auto — das würde overflow-y zu auto erzwingen und das Board
       zum Scroll-Container machen; dann haften die sticky Spaltenköpfe am Board statt am
       Fenster und verschwinden beim Seiten-Scroll. Spalten sind flex:1 → passen ohne H-Scroll. */
    overflow: visible;
    padding-bottom: 16px;
    min-height: 50vh;
}

.pipeline-column {
    min-width: 0;
    flex: 1 1 0;
    display: flex;
    flex-direction: column;
    background: #f9fafb;
    border-radius: 14px;
    /* sichtbar statt hidden, damit der sticky-Spaltenkopf beim Seiten-Scroll oben bleibt */
    overflow: visible;
}

.pipeline-column-header {
    padding: 5px 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 700;
    font-size: 13px; /* war 11px — besser lesbar auf Handy und Tablet */
    color: #fff;
    /* bleibt beim Seiten-Scroll sichtbar — top = Höhe der sticky Toolbar (dynamisch via JS gesetzt).
       Fallback 60px ~ aktuelle Toolbar-Höhe (Nav ist im Topbar, nicht mehr hier); ein zu grosser
       Fallback (alt: 96px) erzeugt einen transparenten Streifen, in dem Karten nach oben durchlaufen. */
    position: sticky;
    top: var(--pipeline-toolbar-h, 60px);
    z-index: 3;
    border-radius: 14px 14px 0 0;
}

/* Mobile: Spalten-Header NICHT sticky — sonst schwebt er (overflow:visible + z-index) über die
   Karten und überlappt sie beim Scrollen. Statisch = sauber oben in jeder Spalte. */
@media (max-width: 767px) {
    .pipeline-column-header { position: static !important; top: auto !important; z-index: auto; }

    /* Handy: EINE Spalte pro Bildschirm, horizontal wischen (Scroll-Snap) — ohne das waren
       alle Spalten in die Bildschirmbreite gequetscht (flex:1 + min-width:0). Auf Desktop
       bleibt overflow:visible Pflicht (sticky Spaltenköpfe); auf Mobile sind die Köpfe
       static (oben), darum ist der Scroll-Container hier gefahrlos. */
    .pipeline-board {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
        gap: 12px;
    }
    .pipeline-column {
        flex: 0 0 86vw;      /* nächste Spalte lugt rechts rein → lädt zum Wischen ein */
        min-width: 86vw;
        scroll-snap-align: start;
    }

    /* "Mein Tag"-Balken: KPI-Chips in EINER wischbaren Zeile statt mehrzeiligem
       Umbruch-Chaos; Prioritäten kompakt darunter. */
    .mein-tag-header { flex-direction: column; align-items: stretch; gap: 6px; }
    .mein-tag-kpi-strip, .mein-tag-grid {
        display: flex; flex-wrap: nowrap; overflow-x: auto;
        -webkit-overflow-scrolling: touch; gap: 6px; padding-bottom: 2px;
    }
    .mein-tag-kpi-strip > *, .mein-tag-grid > * { flex: 0 0 auto; }
    .mein-tag-sep { display: none; }
    .mein-tag-priorities { font-size: 12px; }
}

.column-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.column-badges {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
}
.column-count {
    background: rgba(255,255,255,.3);
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    min-width: 20px;
    text-align: center;
}
.column-total-chf {
    font-size: 9px;
    opacity: 0.9;
    white-space: nowrap;
    padding: 0 2px;
}

/* Stage Colors */
.stage-neue-anfragen { background: linear-gradient(135deg, #f59e0b, #d97706); }
.stage-bearbeitete-anfragen { background: linear-gradient(135deg, #3b82f6, #2563eb); }
.stage-neue-angebote { background: linear-gradient(135deg, #8b5cf6, #7c3aed); }
.stage-verschickte-angebote { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.stage-nachfassen { background: linear-gradient(135deg, #ef4444, #dc2626); }
.stage-gewonnen { background: linear-gradient(135deg, #22c55e, #16a34a); }
.stage-auftrag-neu { background: linear-gradient(135deg, #66bb6a, #43a047); }
.stage-planung-freigegeben { background: linear-gradient(135deg, #42a5f5, #1e88e5); }

.pipeline-cards {
    flex: 1;
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    /* Kein Eigen-Scroll je Spalte mehr — die ganze Seite scrollt durch alle Swimlanes */
    overflow-y: visible;
    max-height: none;
    overscroll-behavior-y: contain;
    -webkit-overflow-scrolling: touch;
}

.pipeline-empty {
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
    padding: 16px 8px;
}

/* Pipeline Card */
.pipeline-card {
    background: #fff;
    border-radius: 10px;
    padding: 10px 12px;
    box-shadow: 0 1px 3px rgba(0,0,0,.08);
    cursor: pointer;
    transition: transform .1s, box-shadow .1s;
    border-left: 3px solid transparent;
}

.pipeline-card:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,.12);
}

.pipeline-card-overdue {
    background: #fef2f2;
    border-left-color: #dc2626 !important;
    animation: pulse-overdue 2s infinite;
}

@keyframes pulse-overdue {
    0%, 100% { box-shadow: 0 1px 3px rgba(220,38,38,.1); }
    50% { box-shadow: 0 2px 8px rgba(220,38,38,.25); }
}

.pipeline-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.pipeline-card-id {
    font-size: 11px;
    font-weight: 700;
    color: #2d539c;
}

.pipeline-card-days {
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    background: #f3f4f6;
    padding: 1px 6px;
    border-radius: 8px;
}

.pipeline-card-days.days-warning {
    background: #fef2f2;
    color: #dc2626;
    font-weight: 700;
}

.pipeline-card-days.days-caution {
    background: #fffbeb;
    color: #d97706;
}

.pipeline-card-customer {
    font-size: 13px;
    font-weight: 600;
    color: #111827;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pipeline-card-location {
    font-size: 11px;
    color: #6b7280;
    margin-top: 1px;
}
.pipeline-card-contact {
    font-size: 11px;
    color: #1e3c6e;
    margin-top: 1px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pipeline-card-amount {
    font-size: 12px;
    font-weight: 700;
    color: #1e3c6e;
    margin-top: 4px;
}

.pipeline-card-products {
    display: flex;
    gap: 3px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.pipeline-product-badge {
    font-size: 9px;
    padding: 2px 6px;
    background: #eef2ff;
    color: #4338ca;
    border-radius: 4px;
    font-weight: 600;
}

.pipeline-card-types {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 4px;
}

.pipeline-type-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.pipeline-card-followup {
    font-size: 10px;
    color: #6b7280;
    margin-top: 4px;
}

.pipeline-result-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: .3px;
}

.result-won { background: #dcfce7; color: #166534; }
.result-lost { background: #fef2f2; color: #991b1b; }
.result-cancelled { background: #f3f4f6; color: #6b7280; }

.pipeline-card-actions {
    display: flex;
    gap: 4px;
    margin-top: 6px;
}

.pipeline-action {
    width: 28px;
    height: 28px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    transition: all .15s;
}

.pipeline-action:hover {
    border-color: #2d539c;
    background: #eef2ff;
}

/* Pipeline Card Risk Scoring */
/* Anfragen, die Aufmerksamkeit brauchen (siehe pipeAnfrageAlarm in app.js).
   Absichtlich staerker als die Risiko-Balken: hier geht es nicht um eine Prognose,
   sondern um etwas, das jemand HEUTE anfassen muss. */
.pipeline-card.pipeline-card-ohne-zuweisung {
    background: #fffbeb;
    border-left: 4px solid #f59e0b !important;
}
.pipeline-card.pipeline-card-liegengeblieben {
    background: #fef2f2;
    border-left: 4px solid #dc2626 !important;
}
.pipe-alarm-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin: 2px 0 3px;
}
.pipe-alarm-badge {
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
}
.pipe-alarm-badge.alarm-zuweisung {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b88;
}
.pipe-alarm-badge.alarm-liegen {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #dc262688;
}

.pipeline-card.risk-high {
    border-left-color: #dc2626 !important;
}
.pipeline-card.risk-medium {
    border-left-color: #f59e0b !important;
}
.pipeline-card.risk-low {
    border-left-color: #22c55e !important;
}
.pipeline-card-risk {
    font-size: 9px;
    font-weight: 600;
    margin-top: 2px;
}
.pipeline-card-risk.risk-high { color: #dc2626; }
.pipeline-card-risk.risk-medium { color: #d97706; }

/* Pipeline Margin Badge */
.pipeline-margin-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    padding: 1px 5px;
    border-radius: 4px;
    margin-left: 4px;
    background: #f0fdf4;
    color: #166534;
    vertical-align: middle;
}
.pipeline-margin-badge.margin-low {
    background: #fef2f2;
    color: #991b1b;
}
.pipeline-margin-badge.margin-high {
    background: #dcfce7;
    color: #15803d;
}

/* Pipeline Last Contact */
.pipeline-lastcontact {
    display: block;
    font-size: 9px;
    margin-top: 2px;
}
.pipeline-lastcontact.contact-old {
    color: #dc2626;
    font-weight: 600;
}
.pipeline-lastcontact.contact-warn {
    color: #d97706;
}

/* ===== Mein Tag Dashboard ===== */
.mein-tag {
    background: linear-gradient(135deg, #1e3c6e 0%, #2d539c 100%);
    border-radius: 10px;
    padding: 4px 12px 5px;
    margin-bottom: 5px;
    color: #fff;
    position: relative;
}

/* Eingeklappt: nur die Kopfzeile bleibt stehen. Der Streifen ist nuetzlich, aber er
   nimmt oben viel Platz weg — wer die Liste sehen will, klappt ihn auf. Die Wahl wird
   pro Browser gemerkt. */
.mein-tag.mt-eingeklappt .mein-tag-priorities,
.mein-tag.mt-eingeklappt #meinTagCockpit,
.mein-tag.mt-eingeklappt #funnelStrip,
.mein-tag.mt-eingeklappt #meinTagPendenzen {
    display: none !important;
}
/* Der Terminkasten sitzt in der KOPFZEILE und wurde vom Einklappen bisher nicht
   erfasst — deshalb blieb der Streifen trotz "weniger" hoch. */
.mein-tag.mt-eingeklappt #meinTagTermine {
    display: none !important;
}
.mt-klapp {
    /* Bewusst NICHT absolut: oben rechts endet die Kennzahlenleiste, dort lag der
       Knopf frueher ueber der Kachel "Offene Schritte". */
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 4px;
    background: rgba(255,255,255,.22);
    border: 1px solid rgba(255,255,255,.45);
    color: #fff;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    padding: 5px 10px;
    white-space: nowrap;
}
.mt-klapp:hover { background: rgba(255,255,255,.38); }
.mein-tag-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
    gap: 10px;
}
.mein-tag-left {
    display: flex;
    flex-direction: column;
    gap: 1px;
    flex: 0 0 auto;
}
.mein-tag-kpi-strip {
    display: flex;
    gap: 5px;
    flex: 1;
    justify-content: flex-end;
    flex-wrap: wrap;
    align-items: center;
}
/* Override kpi-card styles inside Mein Tag — weiss auf dunkelblau */
.mein-tag .kpi-card {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    padding: 3px 8px !important;
    min-width: 0;
    box-shadow: none;
}
.mein-tag .kpi-value {
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 700 !important;
}
.mein-tag .kpi-label {
    color: rgba(255,255,255,0.65) !important;
    font-size: 9px !important;
    text-transform: uppercase;
}
.mein-tag .kpi-card.kpi-orders {
    background: rgba(22,163,74,0.25) !important;
    border-color: rgba(134,239,172,0.35) !important;
}
.mein-tag .kpi-card.kpi-orders .kpi-value { color: #86efac !important; }
.mein-tag .kpi-card.kpi-margin {
    background: rgba(245,158,11,0.2) !important;
    border-color: rgba(253,230,138,0.35) !important;
}
.mein-tag .kpi-card.kpi-margin .kpi-value { color: #fde68a !important; }
.mein-tag .kpi-card.kpi-alert {
    background: rgba(220,38,38,0.35) !important;
    border-color: rgba(252,165,165,0.4) !important;
}
.mein-tag .kpi-card.kpi-alert .kpi-value { color: #fca5a5 !important; }
/* Trenner zwischen KPI-Strip und Metric-Strip */
.mein-tag-sep {
    display: inline-block;
    width: 1px;
    height: 22px;
    background: rgba(255,255,255,0.2);
    flex-shrink: 0;
    align-self: center;
    margin: 0 3px;
}
/* MT-Cards im Header: gleicher Look wie KPI-Cards */
.mein-tag-header .mt-card {
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    padding: 3px 8px !important;
    border-radius: 6px;
    backdrop-filter: none;
    min-width: 0;
    box-shadow: none;
}
.mein-tag-header .mt-card:hover {
    background: rgba(255,255,255,0.2) !important;
    transform: translateY(-1px);
}
.mein-tag-header .mt-card.mt-alert {
    background: rgba(220,38,38,0.35) !important;
    border-color: rgba(252,165,165,0.4) !important;
}
.mein-tag-header .mt-card.mt-warn {
    background: rgba(245,158,11,0.25) !important;
    border-color: rgba(253,230,138,0.35) !important;
}
.mein-tag-header .mt-value {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #fff !important;
    line-height: 1.2 !important;
}
.mein-tag-header .mt-card.mt-alert .mt-value { color: #fca5a5 !important; }
.mein-tag-header .mt-card.mt-warn  .mt-value { color: #fde68a !important; }
.mein-tag-header .mt-label {
    font-size: 9px !important;
    color: rgba(255,255,255,0.65) !important;
    text-transform: uppercase;
    margin-top: 0 !important;
    opacity: 1 !important;
}
.mein-tag-header .mt-card.mt-active {
    background: rgba(255,255,255,0.28) !important;
    border-color: rgba(255,255,255,0.55) !important;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.25) !important;
}
.mein-tag-header .mt-card.mt-active .mt-value { color: #fff !important; font-weight: 800 !important; }
.mein-tag-title {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.mein-tag-date {
    font-size: 10px;
    opacity: 0.7;
}
.mein-tag-grid {
    display: flex;
    gap: 5px;
    align-items: center;
}
.mt-card {
    background: rgba(255,255,255,0.12);
    border-radius: 7px;
    padding: 4px 6px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(4px);
}
.mt-card:hover {
    background: rgba(255,255,255,0.22);
    transform: translateY(-1px);
}
.mt-card.mt-alert {
    background: rgba(220,38,38,0.3);
    border: 1px solid rgba(220,38,38,0.5);
}
.mt-card.mt-warn {
    background: rgba(245,158,11,0.25);
    border: 1px solid rgba(245,158,11,0.4);
}
.mt-value {
    display: block;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.1;
}
.mt-label {
    display: block;
    font-size: 9px;
    opacity: 0.85;
    margin-top: 1px;
}
.mein-tag-priorities {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1px 8px;
}
.mt-prio-title {
    grid-column: 1 / -1;
    font-size: 10px;
    font-weight: 600;
    opacity: 0.85;
    margin-bottom: 2px;
}
.mt-prio-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 1px 6px;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 11px;
}
.mt-prio-item:hover {
    background: rgba(255,255,255,0.15);
}
.mt-prio-id {
    font-weight: 600;
    font-size: 11px;
    opacity: 0.9;
    min-width: 80px;
}
.mt-prio-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 120px;
    flex: 1;
    min-width: 0;
}
.mt-prio-amount {
    font-weight: 600;
    font-size: 11px;
    white-space: nowrap;
}

/* ===== Quick Filters ===== */
.quick-filters {
    display: flex;
    gap: 6px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.quick-filter-btn {
    padding: 6px 14px;
    border-radius: 20px;
    border: 1px solid #d1d5db;
    background: #fff;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    color: #374151;
}
.quick-filter-btn:hover {
    border-color: #2d539c;
    background: #eef2ff;
    color: #1e3c6e;
}
.quick-filter-btn.active {
    background: #1e3c6e;
    color: #fff;
    border-color: #1e3c6e;
}
.toggle-completed-btn {
    margin-left: auto;
    border-style: dashed !important;
    opacity: 0.7;
}
.toggle-completed-btn.active {
    opacity: 1;
    border-style: solid !important;
    background: #16a34a !important;
    border-color: #16a34a !important;
}

/* ===== Quick Activity Modal ===== */
.qa-type-buttons {
    display: flex;
    gap: 6px;
}
.qa-type-btn {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.qa-type-btn:hover { border-color: #2d539c; background: #eef2ff; }
.qa-type-btn.active {
    background: #1e3c6e;
    color: #fff;
    border-color: #1e3c6e;
}
.qa-followup-buttons {
    display: flex;
    gap: 6px;
}
.qa-fu-btn {
    flex: 1;
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    background: #fff;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.15s;
    text-align: center;
}
.qa-fu-btn:hover { border-color: #2d539c; }
.qa-fu-btn.active {
    background: #dbeafe;
    color: #1e3c6e;
    border-color: #3b82f6;
}

/* KPI Margin card */
.kpi-card.kpi-margin {
    background: #fefce8;
    border: 2px solid #fde68a;
}
.kpi-card.kpi-margin .kpi-value {
    color: #a16207;
}

/* Responsive: Mein Tag — Desktop/Tablet */
@media (max-width: 768px) {
    .quick-filters {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
}

/* Mobile Responsive — Dashboard Tablet */
@media (max-width: 768px) {
    .kpi-bar { grid-template-columns: repeat(2, 1fr); }
    .dashboard-header { flex-direction: column; align-items: stretch; }
}

/* Flat List View */
.flat-list-view { }
.flat-list-view.hidden { display: none; }

/* ===================================================================
   HANDY/TABLET OPTIMIERUNG — alles unter 640px
   =================================================================== */
@media (max-width: 640px) {

    /* 1. Navigation Tabs — horizontal scrollbar, kompakter */
    .view-toggle {
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 3px;
    }
    .view-toggle::-webkit-scrollbar { display: none; }
    .toggle-btn {
        padding: 7px 10px;
        font-size: 12px;
        flex-shrink: 0;
        gap: 4px;
    }
    .toggle-btn svg { width: 13px; height: 13px; }
    .tab-badge { font-size: 10px; min-width: 18px; height: 18px; top: -6px; right: -7px; padding: 0 4px; }

    /* 2. Dashboard-Filter — 2×2 Grid */
    .dashboard-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        flex-wrap: unset;
        align-items: stretch;
    }
    .dashboard-actions select {
        max-width: 100%;
        min-width: 0;
        width: 100%;
        font-size: 12px;
        padding: 7px 6px;
        flex: none;
    }
    .dashboard-actions input[type="search"] {
        grid-column: 1 / 2;
        max-width: 100%;
        min-width: 0;
        font-size: 13px;
        flex: none;
    }
    .btn-new-dropdown {
        grid-column: 2 / 3;
        display: flex;
        flex-direction: column;
    }
    .btn-new-dropdown > .btn {
        width: 100%;
        justify-content: center;
        padding: 8px 6px;
        font-size: 13px;
    }

    /* 3. Mein Tag — kompakt & scrollbar */
    .mein-tag { padding: 10px 12px; margin-bottom: 6px; }

    .mein-tag-header {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        margin-bottom: 6px;
    }
    /* Titel + Datum nebeneinander in einer Zeile */
    .mein-tag-left {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 0;
        flex: 0 0 auto;
    }
    .mein-tag-title { font-size: 13px; }
    .mein-tag-date  { font-size: 11px; }

    /* KPI-Strip: alle Cards in einer horizontal scrollbaren Zeile */
    .mein-tag-kpi-strip {
        flex: none;
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        justify-content: flex-start;
        gap: 4px;
        padding-bottom: 2px;
    }
    .mein-tag-kpi-strip::-webkit-scrollbar { display: none; }

    /* Trenner ausblenden */
    .mein-tag-sep { display: none; }

    /* KPI-Cards: nicht schrumpfen */
    .mein-tag .kpi-card {
        flex-shrink: 0;
        min-width: 68px;
        padding: 4px 8px !important;
    }
    .mein-tag .kpi-value { font-size: 11px !important; }
    .mein-tag .kpi-label { font-size: 8px !important; }

    /* MT-Cards (Alle/Überfällig/…) — inline im Strip, kein Umbrechen */
    .mein-tag-grid {
        display: flex;
        flex-wrap: nowrap;
        flex-shrink: 0;
        gap: 4px;
        align-items: center;
    }
    .mein-tag-header .mt-card {
        flex-shrink: 0;
        min-width: 44px;
        padding: 3px 6px !important;
    }
    .mein-tag-header .mt-value { font-size: 11px !important; }
    .mein-tag-header .mt-label { font-size: 8px !important; }

    /* 4. Prioritäten — 2 Spalten statt 3 */
    .mein-tag-priorities {
        grid-template-columns: 1fr 1fr;
        gap: 1px 6px;
    }
    .mt-prio-item { font-size: 10px; gap: 4px; padding: 2px 4px; }
    .mt-prio-id   { min-width: 50px; font-size: 10px; }
    .mt-prio-name { max-width: 80px; }
    .mt-prio-amount { font-size: 10px; white-space: nowrap; }

    /* 5. Sonstiges */
    .qa-type-buttons { flex-wrap: wrap; }

    /* ── Header (top bar) ──────────────────────────────── */
    .app-header, .topbar { padding: 7px 10px; gap: 8px; }
    .logo { height: 24px; }
    .header-title { font-size: 15px; }
    .user-name { display: none; }  /* Benutzername auf Handy ausblenden */
    .icon-btn, .btn-icon { width: 36px; height: 36px; border-radius: 10px; }

    /* ── Quotation Type Bar (Angebot-Header) ───────────── */
    .quotation-type-bar { padding: 6px 10px; gap: 4px; }

    /* Zeile 1: Auftragsart + Status in einer Zeile */
    .qbar-row-1 { gap: 5px; }
    .qbar-row-1 .qbar-label { display: none; }  /* Labels "Auftragsart:" / "Status:" ausblenden */
    .qbar-row-1 .quotation-type-select { flex: 1; min-width: 0; font-size: 12px; padding: 5px 4px; }
    .qbar-row-1 .qbar-spacer { display: none; }

    /* Zeile 2: Aktionen + Total */
    .qbar-row-2 { gap: 5px; }
    .qbar-btn-label { display: none; }           /* Text hinter Emoji ausblenden (nur Icon) */
    .qbar-row-2 .btn-sm { padding: 6px 9px; font-size: 15px; }   /* Icon-only = größeres Emoji */
    .qbar-spacer { flex: 1; }
    .qbar-total { gap: 4px; }
    .qbar-total-label { display: none; }         /* "Total exkl. MwSt" ausblenden */
    .qbar-total-input { width: 100px; font-size: 13px; padding: 4px 6px; }

    /* ── Angebot Tabs — horizontal scrollbar ───────────── */
    #quotationTabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 3px;
        gap: 2px;
    }
    #quotationTabs::-webkit-scrollbar { display: none; }
    #quotationTabs .tab { font-size: 11px; padding: 7px 9px; flex-shrink: 0; }

    /* ── Auftrag Detail Header + Tabs ──────────────────── */
    /* Umbrechen, damit die Status-Pills (Bestellung/Laufblatt) NICHT den Titel überlappen */
    .order-detail-header { gap: 8px; flex-wrap: wrap; align-items: center; }
    .order-detail-header h2 { font-size: 15px; }
    .order-status-badge { font-size: 10px; padding: 3px 8px; }
    /* Pills auf eigene, volle Zeile unter Titel/Zurück */
    #orderDetailStatusIcons { margin-left: 0 !important; order: 3; flex-basis: 100%; flex-wrap: wrap; }

    /* Aktionsleiste als horizontal wischbarer Streifen (statt mehrzeilig gequetscht) */
    .order-detail-actions {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 6px;
        padding-bottom: 2px;
    }
    .order-detail-actions::-webkit-scrollbar { display: none; }
    .order-detail-actions .btn,
    .order-detail-actions .btn-sm,
    .order-detail-actions .order-action-dropdown { flex-shrink: 0; }
    .order-detail-actions .btn-sm { padding: 8px 12px; font-size: 12px; }

    /* Formular-/Modal-Eingaben auf 16px → verhindert das automatische Zoomen beim Fokus (iOS/Android),
       das das Bearbeiten auf dem Handy umständlich macht. Tabellen-Inline-Felder ausgenommen. */
    .modal input:not([type=checkbox]):not([type=radio]),
    .modal select, .modal textarea,
    .invoice-modal input:not([type=checkbox]):not([type=radio]),
    .invoice-modal select, .invoice-modal textarea,
    .modal-overlay input:not([type=checkbox]):not([type=radio]),
    .modal-overlay select, .modal-overlay textarea,
    .form-group > input, .form-group > select, .form-group > textarea {
        font-size: 16px;
    }

    /* Grössere Touch-Ziele für die wichtigsten Buttons (gescoped → Tabellen/Inline-Felder bleiben kompakt) */
    .order-detail-actions .btn,
    .order-detail-actions .btn-sm,
    .modal-footer .btn,
    .modal-footer .btn-sm,
    .invoice-actions .btn,
    .invoice-actions .btn-sm { min-height: 42px; display: inline-flex; align-items: center; }

    /* „Nächste Schritte": Aktion unter das Label, Button über volle Breite (leicht antippbar) */
    .order-next-step-row { flex-wrap: wrap !important; }
    .order-next-step-row .ons-action:empty { display: none; }
    .order-next-step-row .ons-action { flex-basis: 100%; padding-left: 26px; margin-top: 4px; white-space: normal !important; }
    .order-next-step-row .ons-action .btn,
    .order-next-step-row .ons-action .btn-sm { width: 100%; min-height: 42px; justify-content: center; }

    .order-detail-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding: 3px;
        gap: 2px;
    }
    .order-detail-tabs::-webkit-scrollbar { display: none; }
    .order-tab { font-size: 11px; padding: 6px 9px; flex-shrink: 0; }

    /* ── Anfragen (enquiry) ──────────────────────────────── */
    .enquiry-actions { padding: 10px 0 12px; gap: 8px; }
    .enquiry-actions .btn { padding: 10px 14px; font-size: 13px; }
    .enquiry-actions .btn-primary { padding: 10px 18px; font-size: 14px; }

    /* ── Order overview grid: 1 Spalte ──────────────────── */
    .order-overview-grid { grid-template-columns: 1fr; gap: 8px; }
}

/* =========================================================
   Timeline / Activity Tracking
   ========================================================= */
.timeline-container {
    padding: 12px;
}

.timeline-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.timeline-actions .btn-sm {
    padding: 6px 12px;
    font-size: 13px;
    border-radius: 20px;
}

.timeline-actions .btn-outline {
    background: transparent;
    border: 1.5px solid var(--primary);
    color: var(--primary);
}

.timeline-actions .btn-outline:hover {
    background: var(--primary);
    color: white;
}

.timeline-loading,
.timeline-empty {
    text-align: center;
    color: #9ca3af;
    padding: 40px 20px;
    font-size: 14px;
}

.timeline-track {
    position: relative;
    padding-left: 32px;
}

.timeline-track::before {
    content: '';
    position: absolute;
    left: 14px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: #e5e7eb;
    border-radius: 1px;
}

.timeline-item {
    position: relative;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.timeline-item-latest .timeline-content {
    border-left: 3px solid var(--primary);
    padding-left: 12px;
}

.timeline-dot {
    position: absolute;
    left: -32px;
    top: 4px;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: 2px solid white;
    box-shadow: 0 0 0 2px #e5e7eb;
    z-index: 1;
    flex-shrink: 0;
}

.timeline-content {
    flex: 1;
    background: white;
    border-radius: 8px;
    padding: 10px 14px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
    border: 1px solid #f3f4f6;
}

.timeline-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.timeline-type-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 10px;
    white-space: nowrap;
}

.timeline-date {
    font-size: 11px;
    color: #9ca3af;
    margin-left: auto;
    white-space: nowrap;
}

.timeline-duration {
    font-size: 11px;
    color: #6b7280;
    background: #f3f4f6;
    padding: 2px 6px;
    border-radius: 8px;
}

.timeline-title {
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
    margin-bottom: 4px;
}

.timeline-description {
    font-size: 13px;
    color: #4b5563;
    margin-top: 4px;
    line-height: 1.4;
    white-space: pre-wrap;
}

.timeline-status-change {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    font-size: 13px;
}

.status-old {
    color: #9ca3af;
    text-decoration: line-through;
}

.status-arrow {
    color: #6b7280;
    font-weight: bold;
}

.status-new {
    color: #22c55e;
    font-weight: 600;
}

.timeline-contact {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    flex-wrap: wrap;
}

.timeline-link {
    font-size: 12px;
    color: var(--primary);
    text-decoration: none;
}

.timeline-link:hover {
    text-decoration: underline;
}

.timeline-user {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 4px;
}

/* Activity Modal adjustments */
#modalActivity .modal-body .form-group {
    margin-bottom: 12px;
}

#modalActivity .modal-body textarea {
    resize: vertical;
    min-height: 60px;
}

/* Mobile Timeline */
@media (max-width: 768px) {
    .timeline-actions {
        justify-content: center;
    }

    .timeline-track {
        padding-left: 28px;
    }

    .timeline-dot {
        left: -28px;
        width: 24px;
        height: 24px;
        font-size: 12px;
    }

    .timeline-track::before {
        left: 10px;
    }

    .timeline-content {
        padding: 8px 10px;
    }

    .timeline-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .timeline-date {
        margin-left: 0;
    }
}

/* =========================================================
   Email Compose Modal
   ========================================================= */
.email-modal {
    max-width: 560px;
    width: 95%;
}

.email-template-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
    padding: 8px 12px;
    background: #f8f9fb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
}

.email-template-bar label {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    white-space: nowrap;
}

.email-template-bar select {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    background: white;
}

#emailBody {
    min-height: 180px;
    resize: vertical;
    font-size: 14px;
    line-height: 1.5;
    font-family: inherit;
}

.email-status-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    background: #eff6ff;
    border-radius: 8px;
    border: 1px solid #bfdbfe;
    margin-top: 10px;
    font-size: 13px;
    color: #1e40af;
}

.email-status-icon {
    font-size: 16px;
}

.btn-email {
    background: #8b5cf6 !important;
    border-color: #8b5cf6 !important;
    color: white !important;
}

.btn-email:hover {
    background: #7c3aed !important;
    border-color: #7c3aed !important;
}

/* Mobile Email Modal */
@media (max-width: 768px) {
    .email-modal {
        max-width: 100%;
        margin: 10px;
    }

    .email-template-bar {
        flex-direction: column;
        align-items: stretch;
    }

    #emailBody {
        min-height: 140px;
    }
}

/* =========================================================
   Planning / Besuchsplanung
   ========================================================= */
.planung-container {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 60px);
    overflow: hidden;
}

/* planung-header erbt von der einheitlichen Regel oben */

.planung-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.planung-week-label {
    font-weight: 600;
    font-size: 14px;
    color: #1f2937;
    margin-left: 8px;
}

.planung-controls {
    display: flex;
    align-items: center;
    gap: 8px;
}

.planung-controls select {
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
}

/* Week Calendar — Redesign with event cards */
.planung-week {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 3px;
    padding: 8px 14px;
    background: #f3f4f6;
    min-height: 160px;
}

.plan-day {
    background: white;
    border-radius: 8px;
    padding: 0;
    cursor: pointer;
    transition: all 0.15s;
    border: 2px solid transparent;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.plan-day:hover { background: #f8fbff; }
.plan-day-today { border-color: var(--accent); }
.plan-day-selected { background: #eff6ff; border-color: var(--primary); }
.plan-day-dragover { background: #dbeafe; border-color: var(--primary); border-style: dashed; }

.plan-day-header {
    display: flex; align-items: center; gap: 4px;
    padding: 4px 8px; border-bottom: 1px solid #f3f4f6;
}
.plan-day-name { font-size: 10px; color: #6b7280; text-transform: uppercase; font-weight: 600; }
.plan-day-number { font-size: 14px; font-weight: 700; color: #1f2937; }
.plan-day-badge {
    margin-left: auto; background: var(--primary); color: white; font-size: 9px;
    font-weight: 700; padding: 1px 5px; border-radius: 10px; min-width: 16px; text-align: center;
}
.plan-day-today .plan-day-number { background: var(--accent); color: white; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; }

.plan-day-events {
    flex: 1; padding: 3px 4px; display: flex; flex-direction: column; gap: 2px; overflow: hidden;
}
.plan-day-empty { font-size: 10px; color: #d1d5db; text-align: center; padding: 6px 0; }
.plan-day-event {
    padding: 2px 4px; border-radius: 3px; background: #f9fafb;
    display: flex; gap: 4px; align-items: center; font-size: 10px;
    white-space: nowrap; overflow: hidden; min-height: 18px;
}
.plan-day-event-confirmed { box-shadow: 0 0 0 1.5px #10b981; background: #f0fdf4; }
.plan-day-event-time { color: #6b7280; font-weight: 600; flex-shrink: 0; }
.plan-day-event-name { color: #1f2937; overflow: hidden; text-overflow: ellipsis; }

/* Body: 3 Panels */
.planung-body {
    display: grid;
    grid-template-columns: 260px 1fr 300px;
    flex: 1;
    overflow: hidden;
}

/* Orders Panel (left) */
.planung-orders-panel {
    background: white;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.planung-orders-header {
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.planung-orders-header h4 { margin: 0; font-size: 14px; }
.planung-orders-header input { padding: 6px 10px; border: 1px solid #d1d5db; border-radius: 6px; font-size: 13px; }

.planung-order-tabs {
    display: flex;
    border-bottom: 1px solid #e5e7eb;
}

.planung-tab {
    flex: 1;
    padding: 8px;
    background: none;
    border: none;
    font-size: 12px;
    font-weight: 500;
    color: #6b7280;
    cursor: pointer;
    border-bottom: 2px solid transparent;
}

.planung-tab.active {
    color: var(--primary);
    border-bottom-color: var(--primary);
}

.planung-order-list {
    flex: 1;
    overflow-y: auto;
    padding: 8px;
}

.plan-order-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 8px 10px;
    margin-bottom: 6px;
    cursor: grab;
    transition: all 0.15s;
    border-left: 3px solid #d1d5db;
}

.plan-order-card:hover { box-shadow: 0 2px 6px rgba(0,0,0,0.1); }
.plan-order-card:active { cursor: grabbing; opacity: 0.8; }
.plan-order-enquiry { border-left-color: #f59e0b; }
.plan-order-quotation { border-left-color: #8b5cf6; }
.plan-order-overdue { background: #fef2f2; border-left-color: #ef4444; }

.plan-order-id { font-size: 11px; font-weight: 600; color: #6b7280; }
.plan-order-customer { font-size: 16px; font-weight: 700; color: #1f2937; margin-top: 2px; line-height: 1.25; }
.plan-order-city { font-size: 12px; color: #6b7280; }
.plan-order-amount { font-size: 11px; color: #22c55e; font-weight: 600; margin-top: 2px; }

.plan-overdue-badge {
    display: inline-block;
    font-size: 10px;
    background: #ef4444;
    color: white;
    padding: 1px 6px;
    border-radius: 8px;
    margin-top: 3px;
}
.plan-stage-badge {
    display: inline-block;
    font-size: 9px;
    font-weight: 600;
    color: #fff;
    padding: 1px 6px;
    border-radius: 8px;
    vertical-align: middle;
    margin-left: 4px;
}

.plan-empty-orders {
    text-align: center;
    color: #9ca3af;
    padding: 30px 10px;
    font-size: 13px;
}

/* Schedule Panel (center) */
.planung-schedule-panel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.planung-schedule-header {
    padding: 10px 14px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.planung-schedule-header h4 { margin: 0; font-size: 14px; }
.planung-day-stats { display: flex; gap: 12px; font-size: 12px; color: #6b7280; }

/* Stundenplan (hourly timeline with employee columns) */
.planung-timeline {
    flex: 1;
    overflow: auto;
}

.stundenplan-wrapper {
    display: flex;
    min-height: 100%;
}

.stundenplan-time-axis {
    width: 42px;
    flex-shrink: 0;
    position: relative;
    border-right: 1px solid #e5e7eb;
    background: #fafbfc;
}

.stundenplan-hour-label {
    position: absolute;
    left: 4px;
    font-size: 10px;
    color: #9ca3af;
    transform: translateY(-7px);
    user-select: none;
}

.stundenplan-columns {
    display: flex;
    flex: 1;
    min-width: 0;
}

.stundenplan-column {
    flex: 1;
    min-width: 140px;
    border-right: 1px solid #e5e7eb;
    display: flex;
    flex-direction: column;
}

.stundenplan-column-header {
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 700;
    text-align: center;
    border-bottom: 1px solid rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stundenplan-column-body {
    position: relative;
    background: white;
}

.stundenplan-gridline {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 1px solid #f0f0f0;
}
.stundenplan-gridline-half {
    border-top-style: dotted;
    border-top-color: #f5f5f5;
}

/* Midday line (12:00) */
.stundenplan-midday-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px dashed #f59e0b;
    z-index: 3;
    pointer-events: none;
}

/* Current time indicator */
.stundenplan-now-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px solid #ef4444;
    z-index: 4;
    pointer-events: none;
}
.stundenplan-now-dot {
    position: absolute;
    left: -4px;
    top: -5px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ef4444;
}

/* Plan Events (absolute positioned in columns) */
.plan-event {
    position: absolute;
    left: 3px;
    right: 3px;
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    padding: 3px 6px;
    overflow: hidden;
    cursor: grab;
    transition: box-shadow 0.15s;
    z-index: 2;
}

.plan-event:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.15); z-index: 10; }
.plan-event-confirmed { box-shadow: 0 0 0 2px #10b981; background: #f0fdf4; }
.plan-event-confirmed:hover { box-shadow: 0 0 0 2px #10b981, 0 2px 8px rgba(0,0,0,0.15); }

.plan-event-time { font-size: 9px; color: #6b7280; font-weight: 600; }
.plan-event-title { font-size: 12px; font-weight: 600; color: #1f2937; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.plan-event-meta { font-size: 10px; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.plan-fix-badge {
    position: absolute;
    top: 2px;
    right: 24px;
    background: #10b981;
    color: white;
    font-size: 8px;
    font-weight: 800;
    padding: 1px 4px;
    border-radius: 3px;
    letter-spacing: 0.5px;
}

.plan-event-actions {
    position: absolute;
    top: 2px;
    right: 2px;
    display: flex;
    gap: 1px;
    opacity: 0;
    transition: opacity 0.15s;
}
.plan-event:hover .plan-event-actions { opacity: 1; }

.plan-event-btn {
    background: white;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    font-size: 12px;
    cursor: pointer;
    padding: 0 3px;
    line-height: 1.3;
    color: #6b7280;
}
.plan-event-btn:hover { background: #f3f4f6; }
.plan-event-confirm:hover { color: #10b981; border-color: #10b981; }
.plan-event-remove:hover { color: #ef4444; border-color: #ef4444; }

.plan-empty {
    text-align: center;
    color: #9ca3af;
    padding: 60px 20px;
    font-size: 14px;
}

.plan-day-more { font-size: 9px; color: #9ca3af; text-align: center; padding: 1px 0; }

/* Map Panel (right) */
.planung-map-panel {
    display: flex;
    flex-direction: column;
    border-left: 1px solid #e5e7eb;
    overflow: hidden;
}

.planung-map-header {
    padding: 10px 12px;
    border-bottom: 1px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.planung-map-header h4 { margin: 0; font-size: 14px; }
.planung-route-info { font-size: 12px; color: #6b7280; }

.planung-map {
    flex: 1;
    min-height: 200px;
}

/* Mobile Planning */
@media (max-width: 1024px) {
    .planung-body {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr auto;
    }

    .planung-orders-panel {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
        max-height: 200px;
    }

    .planung-map-panel {
        border-left: none;
        border-top: 1px solid #e5e7eb;
        min-height: 250px;
    }
}

@media (max-width: 768px) {
    .planung-header {
        flex-direction: column;
        align-items: stretch;
    }

    .planung-nav, .planung-controls {
        justify-content: center;
    }

    .planung-week {
        grid-template-columns: repeat(5, 1fr);
        gap: 4px;
        padding: 6px 8px;
    }

    .plan-day { padding: 6px; }
    .plan-day-number { font-size: 14px; }
}


/* =====================================================
   ERWEITERTE RESPONSIVE OPTIMIERUNG — Handy & Tablet
   Comprehensive mobile-first improvements
   ===================================================== */

/* ---- Global: Better touch & scroll ---- */
* {
    -webkit-tap-highlight-color: transparent;
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
}

/* ---- Dashboard Header: Phone improvements ---- */
@media (max-width: 480px) {
    .dashboard-header {
        gap: 8px;
    }

    .view-toggle {
        width: 100%;
        justify-content: center;
    }

    .toggle-btn {
        padding: 8px 10px;
        font-size: 12px;
        gap: 4px;
        flex: 1;
        justify-content: center;
    }

    .toggle-btn svg {
        width: 14px;
        height: 14px;
    }

    .dashboard-actions {
        flex-direction: column;
        gap: 8px;
        width: 100%;
    }

    .dashboard-actions select {
        width: 100%;
        min-width: unset;
    }

    .dashboard-actions input[type="search"] {
        flex: 1 1 100%;
        width: 100%;
    }

    #btnNewQuotation {
        width: 100%;
    }
}

/* ---- Dashboard Header: Tablet ---- */
@media (min-width: 481px) and (max-width: 768px) {
    .dashboard-actions {
        flex-wrap: wrap;
        gap: 8px;
    }

    .dashboard-actions select {
        min-width: 140px;
    }

    .dashboard-actions input[type="search"] {
        flex: 1 1 120px;
    }
}

/* ---- KPI Bar: Small phone ---- */
@media (max-width: 360px) {
    .kpi-bar {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
    }

    .kpi-card {
        padding: 8px;
    }

    .kpi-value {
        font-size: 15px;
    }

    .kpi-label {
        font-size: 9px;
    }
}

/* ---- View-Toggle: Icons-only on small phones ---- */
@media (max-width: 599px) {
    .view-toggle-compact .toggle-btn {
        padding: 8px 4px;
        font-size: 0;
        gap: 0;
        min-width: 0;
        justify-content: center;
    }

    .view-toggle-compact .toggle-btn svg {
        width: 18px;
        height: 18px;
    }

    .view-toggle-compact .toggle-btn.active {
        font-size: 11px;
        gap: 4px;
    }
}

/* ---- Header: Compact on phone ---- */
@media (max-width: 599px) {
    .user-name {
        display: none;
    }

    .header-title {
        font-size: 15px !important;
    }

    .logo {
        height: 24px;
    }

    .header-right {
        gap: 6px;
    }

    .btn-icon, .icon-btn {
        width: 36px;
        height: 36px;
        padding: 6px;
    }
}

/* ---- KPI-Bar: Horizontaler Scroll auf kleinen Phones ---- */
@media (max-width: 479px) {
    .kpi-bar {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 8px;
        padding-bottom: 4px;
    }

    .kpi-card {
        flex: 0 0 45vw;
        scroll-snap-align: start;
    }
}

/* ---- Dashboard-Actions: Touch-friendly ---- */
@media (hover: none) and (pointer: coarse) {
    .dashboard-actions select,
    .dashboard-actions input[type="search"] {
        min-height: 44px;
        font-size: 16px;
    }
}

/* ---- Pipeline Board: Tablet (768–1199px) — alle 8 Spalten, horizontaler Scroll ---- */
@media (min-width: 768px) and (max-width: 1199px) {
    .pipeline-board {
        display: flex;
        flex-wrap: nowrap;
        gap: 8px;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        overscroll-behavior-x: contain;
    }

    .pipeline-column {
        min-width: 140px;
        flex: 1 1 0;
        scroll-snap-align: start;
    }

    .pipeline-cards {
        max-height: 50vh;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---- Pipeline Board: Phone (<768px) — Swipe eine Spalte pro Bildschirm ---- */
@media (max-width: 767px) {
    .pipeline-board {
        display: flex;
        flex-direction: row;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        gap: 0;
        padding-bottom: 4px;
        min-height: auto;
    }

    .pipeline-column {
        min-width: 85vw;
        max-width: 85vw;
        flex: 0 0 85vw;
        scroll-snap-align: center;
        margin: 0 4px;
    }

    .pipeline-cards {
        max-height: 60vh;
        flex-direction: column;
        overflow-y: auto;
        overflow-x: visible;
        gap: 6px;
        padding: 8px;
        overscroll-behavior-y: contain;
        -webkit-overflow-scrolling: touch;
    }

    .pipeline-card {
        width: 100%;
        flex-shrink: 0;
    }
}

/* ---- Pipeline Card: Touch Targets (WCAG 44px Minimum) ---- */
@media (hover: none) and (pointer: coarse) {
    .pipeline-action {
        width: 44px;  /* war 36px — WCAG-konform, besser für ältere Mitarbeiter */
        height: 44px;
        font-size: 17px;
    }

    .pipeline-card {
        padding: 12px;
    }

    .pipeline-card-customer {
        font-size: 14px;
    }

    .pipeline-card-actions {
        gap: 6px;
    }
}

/* ---- Pipeline Move Button (Touch-only) ---- */
.pipeline-card-move-btn {
    display: none !important;
}

@media (hover: none) and (pointer: coarse) {
    .pipeline-card-move-btn {
        display: inline-flex !important;
    }
}

/* ---- Pipeline Move Overlay/Menu ---- */
.pipeline-move-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 2000;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    animation: fadeIn 0.15s ease-out;
}

.pipeline-move-menu {
    background: white;
    border-radius: 16px 16px 0 0;
    padding: 16px;
    width: 100%;
    max-width: 420px;
    max-height: 80vh;
    overflow-y: auto;
    animation: slideUp 0.2s ease-out;
}

.pipeline-move-title {
    font-weight: 700;
    font-size: 16px;
    color: var(--blue-900, #1e3c6e);
    margin-bottom: 12px;
    text-align: center;
}

.pipeline-move-option {
    display: block;
    width: 100%;
    padding: 14px 16px;
    border: none;
    background: #f9fafb;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 500;
    text-align: left;
    cursor: pointer;
    margin-bottom: 6px;
    transition: background 0.15s;
}

.pipeline-move-option:hover {
    background: #eff6ff;
}

.pipeline-move-option:active {
    background: #dbeafe;
}

.pipeline-move-cancel {
    display: block;
    width: 100%;
    padding: 14px;
    border: none;
    background: transparent;
    color: #6b7280;
    font-size: 14px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    margin-top: 8px;
    border-top: 1px solid #e5e7eb;
}

/* ---- Pipeline Scroll Indicator (Mobile Dots) ---- */
.pipeline-scroll-indicator {
    display: none;
}

@media (max-width: 767px) {
    .pipeline-scroll-indicator {
        display: flex;
        justify-content: center;
        gap: 6px;
        padding: 8px 0 4px;
    }

    .pipeline-scroll-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #d1d5db;
        transition: background 0.2s, transform 0.2s;
    }

    .pipeline-scroll-dot.active {
        background: var(--orange-600, #f39200);
        transform: scale(1.3);
    }
}

/* ---- Pipeline Board: Very small phone — Spaltenbreite anpassen ---- */
@media (max-width: 480px) {
    .pipeline-column {
        min-width: 88vw;
        max-width: 88vw;
        flex: 0 0 88vw;
    }

    .pipeline-column-header {
        padding: 8px 10px;
        font-size: 11px;
    }
}

/* ---- Planning View: Full mobile redesign ---- */

/* Planning: Tablet Portrait (768–1023px) — stacked, Map als Toggle-Overlay */
@media (min-width: 768px) and (max-width: 1023px) {
    .planung-container {
        height: auto;
        min-height: calc(100vh - 60px);
        overflow: visible;
    }

    .planung-body {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        min-height: auto;
    }

    .planung-orders-panel {
        max-height: 200px;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }

    .planung-schedule-panel {
        min-height: 350px;
    }

    .planung-map-panel {
        position: fixed;
        bottom: 0;
        right: 0;
        width: 50vw;
        height: 50vh;
        z-index: 100;
        box-shadow: -4px -4px 20px rgba(0,0,0,0.15);
        border-radius: 12px 0 0 0;
        display: none;
        min-height: 0;
    }

    .planung-map-panel.map-visible {
        display: flex;
        flex-direction: column;
    }

    .planung-map {
        min-height: 0;
        flex: 1;
    }
}

/* Planning: Map Toggle Button — nur sichtbar auf Tablet/Phone */
.plan-map-toggle-btn {
    display: none;
    position: fixed;
    bottom: 80px;
    right: 16px;
    z-index: 99;
    background: var(--blue-700, #1e3c6e);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: all 0.2s;
}

.plan-map-toggle-btn:hover {
    transform: scale(1.05);
}

@media (max-width: 1023px) {
    .plan-map-toggle-btn {
        display: flex;
        align-items: center;
        gap: 4px;
    }
}

/* Planning: Tablet (general ≤1024px adjustments) */
@media (max-width: 1024px) {
    .planung-container {
        height: auto;
        min-height: calc(100vh - 60px);
        overflow: visible;
    }
}

/* Planning: Phone — vollständig vertikal, Map als Toggle */
@media (max-width: 767px) {
    .planung-container {
        height: auto;
        overflow: visible;
    }

    .planung-nav {
        flex-wrap: wrap;
        justify-content: center;
    }

    .planung-controls {
        flex-wrap: wrap;
        justify-content: center;
        width: 100%;
    }

    .planung-controls select {
        flex: 1;
        min-width: 120px;
        min-height: 44px;
        font-size: 16px;
    }

    .planung-week {
        grid-template-columns: repeat(5, minmax(100px, 1fr));
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x mandatory;
    }

    .plan-day {
        scroll-snap-align: start;
        min-width: 100px;
    }

    .planung-body {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .planung-orders-panel {
        max-height: 150px;
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }

    .planung-order-list {
        padding: 6px;
    }

    .plan-order-card {
        padding: 6px 8px;
        margin-bottom: 4px;
    }

    .plan-order-customer {
        font-size: 15px;
        font-weight: 700;
    }

    .plan-order-city {
        font-size: 11px;
    }

    .planung-schedule-panel {
        min-height: 280px;
    }

    .planung-timeline {
        min-height: 280px;
    }

    .planung-map-panel {
        display: none;
        border-left: none;
        border-top: 1px solid #e5e7eb;
        min-height: 200px;
    }

    .planung-map-panel.map-visible {
        display: block;
    }

    .planung-map {
        min-height: 200px;
        height: 200px;
    }
}

/* Planning: Very small phone */
@media (max-width: 480px) {
    .planung-week {
        gap: 2px;
        padding: 4px 6px;
    }

    .plan-day {
        padding: 4px 2px;
    }

    .plan-day-name {
        font-size: 9px;
    }

    .plan-day-number {
        font-size: 13px;
    }

    .plan-day-count {
        font-size: 9px;
    }

    .planung-orders-panel {
        max-height: 160px;
    }

    .planung-orders-header h4 {
        font-size: 12px;
    }

    .planung-orders-header input {
        padding: 5px 8px;
        font-size: 12px;
    }

    .planung-tab {
        font-size: 11px;
        padding: 6px;
    }

    .plan-event-title {
        font-size: 12px;
    }

    .plan-event {
        padding: 4px 8px;
    }

    .planung-map {
        height: 180px;
        min-height: 180px;
    }

    /* Auto-Plan Modal */
    #modalAutoPlan .modal {
        padding: 0;
    }

    #modalAutoPlan .modal-content {
        max-width: 100% !important;
    }
}

/* ---- Timeline: Small phone improvements ---- */
@media (max-width: 480px) {
    .timeline-container {
        padding: 8px;
    }

    .timeline-actions {
        gap: 6px;
        justify-content: center;
    }

    .timeline-actions .btn-sm {
        padding: 6px 10px;
        font-size: 11px;
    }

    .timeline-track {
        padding-left: 24px;
    }

    .timeline-track::before {
        left: 8px;
    }

    .timeline-dot {
        left: -24px;
        width: 20px;
        height: 20px;
        font-size: 10px;
    }

    .timeline-content {
        padding: 6px 8px;
    }

    .timeline-title {
        font-size: 13px;
    }

    .timeline-description {
        font-size: 12px;
    }

    .timeline-type-badge {
        font-size: 10px;
        padding: 1px 6px;
    }
}

/* ---- Email Modal: Phone fullscreen ---- */
@media (max-width: 480px) {
    .email-modal {
        max-width: 100%;
        width: 100%;
        margin: 0;
        border-radius: 0;
    }

    .email-template-bar {
        flex-direction: column;
        gap: 6px;
        padding: 6px 10px;
    }

    #emailBody {
        min-height: 120px;
        font-size: 14px;
    }

    .email-status-bar {
        font-size: 12px;
        padding: 8px 10px;
    }
}

/* ---- Activity Modal: Phone improvements ---- */
@media (max-width: 480px) {
    #modalActivity .modal-body {
        padding: 10px 12px;
    }

    #modalActivity .modal-body .form-group label {
        font-size: 12px;
    }

    #modalActivity .modal-body select,
    #modalActivity .modal-body input,
    #modalActivity .modal-body textarea {
        font-size: 14px;
        padding: 10px 12px;
    }
}


/* ---- Quotation Detail: Phone optimization ---- */
@media (max-width: 480px) {
    /* Customer form */
    .autocomplete-wrapper input {
        font-size: 15px;
    }

    .autocomplete-dropdown {
        max-height: 200px;
    }

    .autocomplete-item {
        padding: 12px;
        min-height: 44px;
    }

    /* Photo grid: 3 columns on phone */
    .photo-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }

    /* Drawing section */
    .saved-drawings-grid {
        gap: 6px;
    }

    .saved-drawing-item {
        width: 100px;
    }

    /* Report preview */
    .report-preview {
        padding: 8px;
    }

    .report-preview iframe {
        height: 50vh;
    }

    /* Report actions */
    .report-actions {
        padding: 10px;
        flex-direction: column;
    }

    .report-actions .btn {
        width: 100%;
    }
}

/* ---- Form fields: Better spacing on tablet ---- */
@media (min-width: 481px) and (max-width: 768px) {
    .form-row.two-col {
        grid-template-columns: 1fr 1fr;
    }

    .form-row.three-col {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---- Offer lines: Tablet improvements ---- */
@media (min-width: 481px) and (max-width: 768px) {
    .offer-line {
        flex-wrap: wrap;
    }

    .offer-line-info {
        flex: 1 1 calc(100% - 60px);
    }

    .offer-line-amount {
        min-width: 80px;
    }

    .offer-preview-frame iframe {
        height: calc(100vh - 200px);
        min-height: 400px;
    }
}

/* ---- Login: Phone improvements ---- */
@media (max-width: 480px) {
    .login-container {
        min-height: calc(100vh - 70px);
        padding: 16px;
    }

    .login-logo-img, .login-logo img {
        max-width: 200px;
    }

    .login-logo h1 {
        font-size: 22px;
    }

    .login-form {
        padding: 20px 16px;
    }
}

/* ---- Mode Selection: Phone ---- */
@media (max-width: 480px) {
    .mode-select-container {
        padding: 16px;
        min-height: calc(100vh - 70px);
    }

    .mode-card {
        padding: 20px 16px 16px;
    }

    .mode-card h3 {
        font-size: 1rem;
    }

    .mode-card p {
        font-size: 0.8rem;
    }
}

/* ---- Landscape phone: Fix viewport issues ---- */
@media (max-height: 500px) and (orientation: landscape) {
    .planung-container {
        height: auto;
    }

    .planung-body {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .planung-orders-panel {
        max-height: 50vh;
        flex: 0 0 200px;
    }

    .planung-schedule-panel {
        flex: 1;
        min-height: 300px;
    }

    .planung-map-panel {
        flex: 0 0 250px;
        min-height: 300px;
    }

    .pipeline-cards {
        max-height: 40vh;
    }

    .kpi-bar {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ---- Improve scrolling on iOS ---- */
.planung-order-list,
.pipeline-cards,
.planung-timeline,
.offer-lines,
.offer-block-lines,
.block-pos-list,
.autocomplete-dropdown,
.item-lookup-results,
.timeline-track {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

/* ---- Fix iOS input zoom ---- */
@media screen and (max-width: 768px) {
    input[type="text"],
    input[type="number"],
    input[type="email"],
    input[type="tel"],
    input[type="password"],
    input[type="date"],
    input[type="search"],
    select,
    textarea {
        font-size: 16px !important;
    }
}

/* ---- Prevent content overflow on mobile ----
   NUR Tablet/Handy: overflow-x:hidden macht .view zum Scroll-Container (overflow-y wird zu
   'auto' gerechnet) → die sticky Spaltentitel würden an .view statt an der Seite kleben und
   beim Scrollen verschwinden. Am Desktop (≥1200px) muss .view sichtbar bleiben, damit die
   Spaltenköpfe am echten Scroll-Container (.content) haften. */
@media (max-width: 1199px) {
    .view {
        overflow-x: hidden;
    }
}

/* ---- Better overflow handling for pipeline on tablet ---- */
@media (min-width: 769px) and (max-width: 1200px) {
    .pipeline-board {
        overflow-x: auto;
    }
}

/* ---- Toast notifications: Safe areas ---- */
@supports (padding: env(safe-area-inset-bottom)) {
    .toast-container {
        bottom: calc(20px + env(safe-area-inset-bottom));
    }
}

/* ---- Full-width views on small phones ---- */
@media (max-width: 480px) {
    .view {
        max-width: 100%;
        padding: 0;
    }

    #viewList {
        max-width: 100%;
    }

    #viewPlanung {
        max-width: 100%;
    }

    /* Flat list view cards */
    .list-container {
        gap: 10px;
    }

    .list-item {
        padding: 14px;
    }

    .list-item-title {
        font-size: 15px;
    }

    .list-item-details {
        gap: 8px;
        font-size: 12px;
    }
}

/* ---- Better Product Selection on Phone ---- */
@media (max-width: 480px) {
    .product-selection {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .checkbox-card-content {
        padding: 16px 10px;
        gap: 8px;
    }

    .checkbox-card-content svg {
        width: 28px;
        height: 28px;
    }

    .checkbox-card-content span {
        font-size: 12px;
    }
}

/* ---- Better Measurement Display on Phone ---- */
@media (max-width: 480px) {
    .measurement-card {
        padding: 10px;
    }

    .measurement-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .measurement-actions {
        width: 100%;
        justify-content: flex-end;
    }

    .measurement-actions-improved .btn-action {
        padding: 6px 10px;
        font-size: 12px;
    }

    .measurement-value {
        font-size: 16px;
    }
}

/* ---- Visualizer: Phone improvements ---- */
@media (max-width: 480px) {
    .vis-preview {
        max-width: 100%;
    }

    .vis-canvas-actions {
        flex-direction: column;
        gap: 8px;
    }

    .vis-canvas-actions .btn {
        width: 100%;
    }

    .vis-photo-buttons {
        flex-direction: column;
        gap: 8px;
    }

    .vis-compare-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
}

/* ---- Muster-Foto Grid: Phone ---- */
@media (max-width: 480px) {
    .vis-muster-foto-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* ---- Varianten Grid: Phone ---- */
@media (max-width: 480px) {
    .vis-varianten-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
}

/* ---- Drawing Tools: Better touch ---- */
@media (hover: none) and (pointer: coarse) {
    .tool-btn {
        width: 48px;
        height: 48px;
    }

    .drawing-tools {
        justify-content: center;
        gap: 6px;
    }

    .camera-draw-tools .tool-btn {
        width: 40px;
        height: 40px;
    }
}

/* ---- Offer Block: Better touch on actions ---- */
@media (hover: none) and (pointer: coarse) {
    .offer-block-actions .btn-icon {
        width: 36px;
        height: 36px;
    }

    .btn-add-pos {
        width: 36px !important;
        height: 36px !important;
    }
}

/* ---- Better select elements on phone ---- */
@media (max-width: 480px) {
    select {
        appearance: auto;
        -webkit-appearance: auto;
    }
}

/* ---- Fix: Pipeline empty states on phone ---- */
@media (max-width: 768px) {
    .empty-state {
        padding: 24px 16px;
    }

    .empty-state svg {
        width: 48px;
        height: 48px;
    }

    .empty-state h3 {
        font-size: 16px;
    }
}

/* ---- Planning: Touch drag improvement ---- */
@media (hover: none) and (pointer: coarse) {
    .plan-order-card {
        min-height: 44px;
        touch-action: pan-y;
    }

    .plan-event {
        min-height: 44px;
    }

    .plan-event-remove {
        width: 32px;
        height: 32px;
        font-size: 20px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}

/* ---- Tablet Landscape: Wider views ---- */
@media (min-width: 1025px) and (max-width: 1400px) {
    .planung-body {
        grid-template-columns: 240px 1fr 280px;
    }
}

/* ---- Ultra-wide screens: Center dashboard content ---- */
@media (min-width: 1400px) {
    .kpi-bar {
        max-width: 1400px;
        margin: 0 auto 16px;
    }

    /* Toolbar als Full-Bleed über die GANZE Fensterbreite (nicht nur max-width:none — das liess
       je ~40px Rand frei, durch den seitlich Karten nach oben durchliefen). 100vw + negativer
       Links-Margin ziehen den deckend-weissen Balken über die ganze Breite; .app-content
       (overflow-x:hidden) schneidet den Überhang ab → kein horizontaler Scrollbalken.
       Live verifiziert: an keinem Randpunkt liegt mehr eine Karte über der Toolbar. */
    .dashboard-header {
        max-width: none;
        width: 100vw;
        margin: 0 0 0 calc(50% - 50vw);
    }
}

/* ---- Fix: Prevent horizontal overflow everywhere ---- */
@media (max-width: 768px) {
    .app-content, .content {
        overflow-x: hidden;
    }

    .form-container {
        overflow-x: hidden;
    }
}

/* ---- Accessibility: Focus visible for keyboard nav ---- */
@media (hover: hover) {
    .btn:focus-visible,
    .tab:focus-visible,
    .toggle-btn:focus-visible,
    .pipeline-card:focus-visible,
    .plan-order-card:focus-visible,
    .chip:focus-visible {
        outline: 2px solid var(--orange-600);
        outline-offset: 2px;
    }
}

/* ---- Quotation Wizard Modal ---- */
.quotation-wizard-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn .15s ease-out;
    padding: 16px;
}

.quotation-wizard {
    background: white;
    border-radius: 16px;
    padding: 24px;
    max-width: 620px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.2);
    animation: slideUp .2s ease-out;
}

.quotation-wizard h3 {
    margin: 0 0 16px;
    font-size: 18px;
    font-weight: 700;
    color: var(--blue-900);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Wizard Form Grid + PLZ field */
.wizard-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.field-plz {
    width: 80px;
    flex-shrink: 0;
}

/* ---- Wizard: Phone Full-Screen ---- */
@media (max-width: 599px) {
    .quotation-wizard-overlay {
        padding: 0;
        align-items: flex-end;
    }

    .quotation-wizard {
        max-width: 100%;
        border-radius: 16px 16px 0 0;
        max-height: 92vh;
        padding: 16px;
    }

    .wizard-form-grid {
        grid-template-columns: 1fr;
    }

    .field-plz {
        width: 100%;
    }

    .quotation-wizard h3 {
        font-size: 16px;
    }
}

.wizard-section {
    margin-bottom: 20px;
    border: 1px solid var(--gray-200);
    border-radius: 12px;
    overflow: hidden;
}

.wizard-section-header {
    padding: 12px 16px;
    background: var(--gray-50);
    border-bottom: 1px solid var(--gray-200);
    font-weight: 700;
    font-size: 14px;
    color: var(--blue-900);
    display: flex;
    align-items: center;
    gap: 8px;
}

.wizard-enquiry-data {
    padding: 10px 16px;
    background: #f0f9ff;
    border-bottom: 1px solid var(--gray-200);
    font-size: 13px;
    color: #374151;
    line-height: 1.5;
}

.wizard-enquiry-data .data-row {
    display: flex;
    gap: 8px;
}

.wizard-enquiry-data .data-label {
    font-weight: 600;
    color: #6b7280;
    min-width: 65px;
}

.wizard-manual-fields {
    padding: 10px 16px;
    background: #fefce8;
    border-bottom: 1px solid var(--gray-200);
}
.wizard-manual-fields input {
    width: 100%;
    padding: 7px 10px;
    border: 1px solid var(--gray-300);
    border-radius: 6px;
    font-size: 13px;
}
.wizard-manual-fields input:focus {
    border-color: var(--primary);
    outline: none;
    box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}
.wizard-selected-info {
    padding: 10px 16px;
    background: #ecfdf5;
    border-bottom: 1px solid var(--gray-200);
}
.wizard-selected-badge {
    font-size: 13px;
    color: #065f46;
    line-height: 1.5;
}
.wizard-selected-badge small {
    color: #6b7280;
}

/* ── SharePoint Subfolder Cards ──────────────────────────────────────────── */
.sp-subfolder-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 14px;
}
@media (max-width: 480px) {
    .sp-subfolder-grid {
        grid-template-columns: 1fr;
    }
}
.sp-subfolder-card {
    background: #fff;
    border: 1.5px solid var(--gray-200);
    border-radius: 12px;
    padding: 14px 14px 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color .15s, box-shadow .15s;
    cursor: default;
}
.sp-subfolder-card.sp-drag-over {
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px #bfdbfe;
    background: #eff6ff;
}
.sp-subfolder-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.sp-subfolder-card-header:hover .sp-subfolder-title {
    text-decoration: underline;
}
.sp-subfolder-icon {
    font-size: 22px;
    line-height: 1;
}
.sp-subfolder-title {
    font-weight: 600;
    font-size: 14px;
}
.sp-subfolder-count {
    font-size: 12px;
    color: #6b7280;
    cursor: pointer;
    padding-left: 2px;
}
.sp-subfolder-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.sp-subfolder-upload-btn {
    font-size: 12px;
    padding: 4px 10px;
    cursor: pointer;
    border-radius: 6px;
    font-weight: 500;
}
.sp-subfolder-cam-btn {
    font-size: 12px;
    padding: 4px 8px;
    cursor: pointer;
    display: none; /* nur auf Touch-Geräten einblenden */
}
@media (hover: none) and (pointer: coarse) {
    .sp-subfolder-cam-btn {
        display: inline-flex;
    }
}
.sp-subfolder-drop-hint {
    font-size: 11px;
    color: #9ca3af;
    text-align: center;
    border: 1px dashed #d1d5db;
    border-radius: 6px;
    padding: 4px;
    display: none;
}
.sp-subfolder-card.sp-drag-over .sp-subfolder-drop-hint {
    display: block;
    color: #3b82f6;
    border-color: #93c5fd;
}
/* Drop-Zone in Unterordner */
.sp-drop-zone {
    margin: 8px 14px 4px;
    border: 1.5px dashed #d1d5db;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
    transition: background .15s, border-color .15s;
}
.sp-drop-zone.sp-drag-over {
    background: #eff6ff;
    border-color: #3b82f6;
    color: #3b82f6;
}

.wizard-suggestions-section {
    padding: 10px 16px 8px;
    background: #fffbeb;
    border-bottom: 1px solid #fde68a;
}
.wizard-suggestions-header {
    font-size: 12px;
    font-weight: 600;
    color: #92400e;
    margin-bottom: 7px;
}
.wizard-suggestion-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.wizard-suggestion-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: #fff;
    border: 1.5px solid #f59e0b;
    border-radius: 20px;
    font-size: 12px;
    color: #1f2937;
    cursor: pointer;
    transition: background .15s, border-color .15s;
    user-select: none;
}
.wizard-suggestion-chip:hover {
    background: #fef3c7;
    border-color: #d97706;
}
.wizard-suggestion-chip.selected {
    background: #fef3c7;
    border-color: #d97706;
    font-weight: 600;
    box-shadow: 0 0 0 2px #fde68a;
}
.wizard-suggestion-chip .chip-count {
    font-size: 11px;
    color: #6b7280;
}

.wizard-match-list {
    padding: 8px;
}

.wizard-match-card {
    padding: 7px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background .12s, border-color .12s;
    border: 1.5px solid transparent;
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-bottom: 2px;
}
.wizard-match-card:hover {
    background: #f3f4f6;
    border-color: #d1d5db;
}
.wizard-match-card.selected {
    background: #eff6ff;
    border-color: #3b82f6;
}
.wizard-match-card strong {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wizard-match-card small {
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.wizard-match-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background .15s;
    border: 2px solid transparent;
}

.wizard-match-item:hover {
    background: var(--gray-50);
}

.wizard-match-item.selected {
    background: #eff6ff;
    border-color: #3b82f6;
}

.wizard-match-item input[type="radio"] {
    margin-top: 3px;
    accent-color: #3b82f6;
    flex-shrink: 0;
}

.wizard-match-info {
    flex: 1;
    min-width: 0;
}

.wizard-match-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text);
}

.wizard-match-detail {
    font-size: 12px;
    color: #6b7280;
    margin-top: 2px;
}

.wizard-match-badge {
    font-size: 11px;
    background: #dbeafe;
    color: #1d4ed8;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.wizard-match-new {
    color: #16a34a;
    font-weight: 600;
    font-size: 13px;
}

.wizard-match-group-header {
    padding: 8px 16px 4px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #6b7280;
    border-top: 1px solid #e5e7eb;
    margin-top: 4px;
}

.wizard-match-group-header:first-child {
    border-top: none;
    margin-top: 0;
}

.wizard-match-stats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.wizard-stat { font-size: 11px; color: #6b7280; background: #f3f4f6; padding: 1px 6px; border-radius: 4px; }
.wizard-obj-id { background: #dbeafe; color: #1e40af; font-size: 11px; padding: 1px 6px; border-radius: 4px; font-weight: 600; margin-left: 6px; }
.wizard-sp-link { font-size: 11px; color: #2563eb; text-decoration: none; background: #eff6ff; padding: 1px 6px; border-radius: 4px; }
.wizard-sp-link:hover { background: #dbeafe; }
.wizard-duplicate-badge { font-size: 10px; color: #d97706; background: #fef3c7; padding: 1px 6px; border-radius: 4px; font-weight: 600; }
.wizard-new-badge { font-size: 10px; color: #059669; background: #d1fae5; padding: 1px 6px; border-radius: 4px; margin-left: 6px; }
.wizard-manager-badge { font-size: 10px; color: #7c3aed; background: #ede9fe; padding: 1px 6px; border-radius: 4px; margin-left: 4px; }
.wizard-fuzzy-badge { font-size: 10px; color: #0369a1; background: #e0f2fe; padding: 1px 6px; border-radius: 4px; margin-left: 4px; font-style: italic; }

.wizard-searching {
    padding: 12px 16px;
    font-size: 13px;
    color: #6b7280;
    font-style: italic;
}

.wizard-no-matches {
    padding: 12px 16px;
    font-size: 13px;
    color: #9ca3af;
}

.wizard-search-bar {
    display: flex;
    gap: 8px;
    padding: 8px 16px;
    border-bottom: 1px solid #e5e7eb;
}

.wizard-search-bar input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
}

.wizard-search-bar input:focus {
    border-color: #3b82f6;
    outline: none;
    box-shadow: 0 0 0 2px rgba(59,130,246,.15);
}

.wizard-search-bar .btn-sm {
    padding: 6px 12px;
    font-size: 12px;
    white-space: nowrap;
}

.wizard-contact-section {
    padding: 12px 16px;
}

.wizard-contact-section label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    margin-bottom: 4px;
}

.wizard-contact-section select {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    margin-bottom: 8px;
}

.wizard-contact-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 8px;
}

.wizard-contact-fields input {
    padding: 8px 10px;
    border: 1px solid var(--gray-200);
    border-radius: 8px;
    font-size: 13px;
}

.wizard-contact-fields input::placeholder {
    color: #9ca3af;
}

.wizard-actions {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-200);
}

.wizard-actions .btn {
    min-width: 130px;
}

.wizard-actions .btn-primary {
    min-width: 180px;
}

.wizard-hint {
    padding: 10px 14px;
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 8px;
    color: #92400e;
    margin-top: 4px;
}

.wizard-hint small {
    font-size: 12px;
    line-height: 1.4;
}

/* ---- Pipeline: Desktop (≥1200px) — alle 8 Swimlanes volle Breite ---- */
@media (min-width: 1200px) {
    .pipeline-board {
        display: flex;
        gap: 10px;
    }

    .pipeline-column {
        min-width: 140px;
        flex: 1 1 0;
    }

    .pipeline-cards {
        /* Kein Höhen-Cap am Desktop: Spalten wachsen auf volle Inhaltshöhe → alle Swimlanes
           gleich lang (align-items:stretch), grauer Hintergrund über ALLE Kacheln, und die
           sticky Spaltentitel bleiben bis zum Board-Ende kleben. */
        max-height: none;
    }
}

/* ---- Pipeline: Ultra-wide (≥1800px) — noch mehr Platz ---- */
@media (min-width: 1800px) {
    .pipeline-column {
        min-width: 180px;
    }

    .pipeline-cards {
        max-height: none;
    }
}

/* ===== Kennzahlen Dashboard ===== */
.kennzahlen-container {
    padding: 0;
}
.kennzahlen-container > *:not(.kennzahlen-header) {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 16px;
    padding-right: 16px;
}
/* kennzahlen-header erbt von der einheitlichen Regel oben */
.kz-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
}
.kennzahlen-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e3c6e;
}
.kz-month-picker {
    padding: 6px 12px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 0.95rem;
    color: #1e3c6e;
    background: #fff;
}
.kz-month-picker:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}
.kz-section {
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    padding: 16px;
    margin-bottom: 16px;
}
.kz-section-title {
    font-size: 1rem;
    font-weight: 600;
    color: #1e3c6e;
    margin: 0 0 4px;
}
.kz-section-context {
    display: block;
    font-size: 0.72rem;
    color: #94a3b8;
    margin: 0 0 12px;
    font-weight: 400;
    letter-spacing: 0.2px;
}

/* KPI Grid */
.kz-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 16px;
}
.kz-kpi-card {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    padding: 16px;
    text-align: center;
    border-top: 3px solid #2563eb;
    transition: transform 0.15s, box-shadow 0.15s;
    position: relative;
}
.kz-kpi-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.kz-kpi-icon { font-size: 1.4rem; margin-bottom: 4px; }
.kz-kpi-card.kz-kpi-blue { border-top-color: #2563eb; }
.kz-kpi-card.kz-kpi-green { border-top-color: #16a34a; }
.kz-kpi-card.kz-kpi-emerald { border-top-color: #059669; }
.kz-kpi-card.kz-kpi-red { border-top-color: #dc2626; }
.kz-kpi-card.kz-kpi-orange { border-top-color: #ea580c; }
.kz-kpi-card.kz-kpi-purple { border-top-color: #7c3aed; }
.kz-kpi-card.kz-kpi-teal { border-top-color: #0d9488; }
.kz-kpi-card.kz-kpi-gold { border-top-color: #ca8a04; }
.kz-kpi-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #1e293b;
    display: block;
}
.kz-kpi-label {
    font-size: 0.78rem;
    color: #64748b;
    margin-top: 4px;
    display: block;
}
.kz-kpi-sub {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 2px;
    display: block;
}
.kz-kpi-bar-wrap {
    margin-top: 8px;
    height: 6px;
    background: #e2e8f0;
    border-radius: 3px;
    overflow: hidden;
}
.kz-kpi-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #7c3aed, #a78bfa);
    border-radius: 3px;
    transition: width 0.6s ease;
}
.kz-kpi-type-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
    text-align: left;
}
.kz-kpi-type-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
}
.kz-kpi-type-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.kz-kpi-type-name { flex: 1; color: #334155; font-weight: 500; }
.kz-kpi-type-count { color: #94a3b8; font-size: 0.72rem; }
.kz-kpi-type-value { font-weight: 700; color: #1e293b; }

/* Salesperson Table */
.kz-table-wrap {
    overflow-x: auto;
}
.kz-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
}
.kz-table th {
    background: #f1f5f9;
    color: #475569;
    font-weight: 600;
    padding: 8px 10px;
    text-align: right;
    white-space: nowrap;
    border-bottom: 2px solid #e2e8f0;
    position: sticky;
    top: 0;
}
.kz-table th:first-child { text-align: left; }
.kz-table td {
    padding: 8px 10px;
    border-bottom: 1px solid #f1f5f9;
    text-align: right;
    white-space: nowrap;
}
.kz-table td:first-child {
    text-align: left;
    font-weight: 600;
    color: #1e3c6e;
}
.kz-table tbody tr:hover { background: #f8fafc; }
.kz-table .kz-bar-cell {
    position: relative;
    min-width: 80px;
}
.kz-bar {
    position: absolute;
    left: 0; top: 2px; bottom: 2px;
    border-radius: 3px;
    opacity: 0.15;
}
.kz-table tfoot td {
    font-weight: 700;
    border-top: 2px solid #1e3c6e;
    background: #f8fafc;
}
.kz-medal { margin-right: 4px; }

/* Two Column Layout */
.kz-two-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 16px;
}

/* Regional Heatmap */
/* Regional Heatmap Table */
.kz-region-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}
.kz-region-table thead th {
    text-align: left;
    font-size: 0.72rem;
    font-weight: 600;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    padding: 6px 8px;
    border-bottom: 2px solid #e2e8f0;
}
.kz-region-table tbody tr {
    border-bottom: 1px solid #f1f5f9;
    transition: background 0.15s;
}
.kz-region-table tbody tr:hover { background: #f8fafc !important; }
.kz-region-table td { padding: 7px 8px; }
.kz-rt-city { font-weight: 500; color: #1e293b; white-space: nowrap; }
.kz-rt-zip { font-weight: 400; color: #94a3b8; font-size: 0.72rem; }
.kz-rt-num { text-align: center; font-weight: 600; color: #334155; min-width: 36px; }
.kz-rt-amt { font-weight: 600; color: #1e293b; white-space: nowrap; font-size: 0.78rem; }
.kz-rt-stacked {
    display: flex;
    height: 16px;
    border-radius: 4px;
    overflow: hidden;
    gap: 1px;
}
.kz-rt-seg {
    height: 100%;
    min-width: 3px;
    transition: width 0.3s;
}
.kz-rt-legend {
    display: flex;
    gap: 16px;
    justify-content: center;
    padding: 8px;
    font-size: 0.72rem;
    color: #64748b;
}
.kz-rt-legend span { display: flex; align-items: center; gap: 4px; }
.kz-rt-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
}
thead .kz-rt-num { text-align: center; }

/* Salesperson Ranking Cards */
.kz-ranking-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 12px;
}
.kz-ranking-card {
    background: #fff;
    border-radius: 10px;
    padding: 14px 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    transition: transform 0.15s, box-shadow 0.15s;
}
.kz-ranking-card:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,0.1); }
.kz-ranking-header { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.kz-ranking-medal { font-size: 1.3rem; }
.kz-ranking-name { font-weight: 700; font-size: 0.95rem; color: #1e293b; }
.kz-ranking-metrics { display: flex; flex-direction: column; gap: 6px; }
.kz-ranking-metric { display: flex; flex-direction: column; gap: 2px; }
.kz-ranking-metric-label { font-size: 0.72rem; color: #94a3b8; }
.kz-ranking-bar-track { height: 10px; background: #f1f5f9; border-radius: 5px; overflow: hidden; }
.kz-ranking-bar { height: 100%; border-radius: 5px; transition: width 0.5s ease; }
.kz-ranking-metric-val { font-size: 0.78rem; color: #334155; font-weight: 500; }
.kz-ranking-stats-row { display: flex; gap: 12px; margin-top: 4px; flex-wrap: wrap; }
.kz-ranking-stat { font-size: 0.75rem; color: #64748b; }
.kz-ranking-stat b { color: #1e293b; }

/* Funnel Cards (Order Types) */
.kz-funnel-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 14px;
}
.kz-funnel-card {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    transition: transform 0.15s;
}
.kz-funnel-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.kz-funnel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 14px 8px;
}
.kz-funnel-type-name { font-weight: 700; font-size: 0.95rem; color: #1e293b; }
.kz-funnel-conv { font-weight: 800; font-size: 1.1rem; }
.kz-funnel-body { padding: 8px 14px; }
.kz-funnel-step {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
}
.kz-funnel-step-header { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: #475569; }
.kz-funnel-step-icon {
    width: 26px; height: 26px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; font-size: 0.85rem;
}
.kz-funnel-step-val { font-size: 0.82rem; color: #1e293b; text-align: right; }
.kz-funnel-step-won { background: #f0fdf4; border-radius: 6px; padding: 6px 8px !important; }
.kz-funnel-arrow { text-align: center; color: #cbd5e1; font-size: 0.7rem; line-height: 1; }
.kz-funnel-lost { text-align: center; font-size: 0.75rem; color: #dc2626; padding: 4px 0 2px; }
.kz-funnel-bar-section { padding: 8px 14px 12px; border-top: 1px solid #f1f5f9; }
.kz-funnel-bar-label { font-size: 0.7rem; color: #94a3b8; margin-bottom: 4px; }
.kz-funnel-bar-track { height: 8px; background: #f1f5f9; border-radius: 4px; overflow: hidden; }
.kz-funnel-bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.kz-funnel-bar-amt { font-size: 0.78rem; color: #1e293b; font-weight: 600; }

/* Donut Chart (Product Types) */
.kz-product-grid {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}
.kz-donut-wrap { flex: 0 0 auto; }
.kz-donut {
    width: 160px; height: 160px;
    border-radius: 50%;
    position: relative;
    display: flex; align-items: center; justify-content: center;
}
.kz-donut-hole {
    width: 90px; height: 90px;
    background: #fff;
    border-radius: 50%;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    box-shadow: inset 0 0 8px rgba(0,0,0,0.05);
}
.kz-donut-total { font-size: 0.85rem; font-weight: 800; color: #1e293b; }
.kz-donut-sub { font-size: 0.65rem; color: #94a3b8; }
.kz-product-legend { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 200px; }
.kz-product-legend-item {
    display: flex; align-items: center; gap: 8px;
    font-size: 0.82rem; padding: 4px 0;
    border-bottom: 1px solid #f8fafc;
}
.kz-product-dot { width: 12px; height: 12px; border-radius: 3px; flex-shrink: 0; }
.kz-product-name { flex: 1; color: #334155; font-weight: 500; }
.kz-product-count { color: #94a3b8; font-size: 0.72rem; }
.kz-product-pct { font-weight: 700; color: #475569; min-width: 30px; text-align: right; }
.kz-product-amt { font-weight: 700; color: #1e293b; min-width: 80px; text-align: right; }

/* Conversion Gauge */
.kz-conv-grid {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    padding: 8px 0;
}
.kz-conv-item { text-align: center; min-width: 100px; }
.kz-gauge {
    width: 90px; height: 50px;
    position: relative;
    overflow: hidden;
    margin: 0 auto 6px;
}
.kz-gauge-bg {
    width: 90px; height: 90px;
    border-radius: 50%;
    background: conic-gradient(#e2e8f0 0deg 180deg, transparent 180deg);
    position: absolute;
    top: 0; left: 0;
}
.kz-gauge-fill {
    width: 90px; height: 90px;
    border-radius: 50%;
    position: absolute; top: 0; left: 0;
    clip-path: polygon(50% 50%, 0% 0%, 0% 100%, 50% 100%);
    transform-origin: 50% 50%;
    transition: transform 0.6s ease;
}
.kz-gauge-center {
    position: absolute;
    bottom: 0; left: 50%;
    transform: translateX(-50%);
    background: #fff;
    width: 60px; height: 30px;
    border-radius: 30px 30px 0 0;
    display: flex; align-items: flex-end; justify-content: center;
    padding-bottom: 2px;
}
.kz-gauge-value { font-size: 0.9rem; font-weight: 800; color: #1e293b; }
.kz-conv-label { font-size: 0.82rem; font-weight: 600; color: #334155; }
.kz-conv-sub { font-size: 0.72rem; color: #94a3b8; }

/* Fazit Summary Box */
.kz-fazit {
    background: linear-gradient(135deg, #1e3c6e 0%, #2563eb 100%);
    color: #fff;
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 16px;
    position: relative;
    overflow: hidden;
}
.kz-fazit::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 120px; height: 120px;
    background: rgba(255,255,255,0.08);
    border-radius: 50%;
}
.kz-fazit-title {
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.kz-fazit-text {
    font-size: 0.88rem;
    line-height: 1.6;
    color: rgba(255,255,255,0.92);
}
/* Order Analysis Cards */
.kz-oa-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}
.kz-oa-card {
    background: #fff;
    border-radius: 12px;
    padding: 16px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.06);
    display: flex;
    gap: 12px;
    align-items: flex-start;
    transition: transform 0.15s;
}
.kz-oa-card:hover { transform: translateY(-1px); box-shadow: 0 3px 8px rgba(0,0,0,0.1); }
.kz-oa-icon {
    width: 44px; height: 44px;
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.3rem;
    flex-shrink: 0;
}
.kz-oa-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.kz-oa-value { font-size: 1.4rem; font-weight: 800; color: #1e293b; }
.kz-oa-label { font-size: 0.78rem; color: #64748b; }
.kz-oa-sub { font-size: 0.72rem; color: #94a3b8; }
.kz-oa-bar { height: 5px; background: #f1f5f9; border-radius: 3px; margin-top: 4px; overflow: hidden; }
.kz-oa-bar-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; }
.kz-oa-ytd { border-left: 3px solid #7c3aed; }
.kz-oa-section-label { font-size: 0.82rem; font-weight: 700; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px; padding-left: 2px; }

.kz-fazit-highlight {
    background: rgba(255,255,255,0.15);
    border-radius: 4px;
    padding: 2px 6px;
    font-weight: 700;
    white-space: nowrap;
}

/* Forecast Cards */
.kz-forecast-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px;
}
.kz-forecast-card {
    background: linear-gradient(135deg, #f0f9ff, #e0f2fe);
    border-radius: 10px;
    padding: 16px;
    text-align: center;
    border: 1px solid #bae6fd;
}
.kz-forecast-card.kz-forecast-total {
    background: linear-gradient(135deg, #1e3c6e, #2563eb);
    color: #fff;
    border: none;
    grid-column: 1 / -1;
}
.kz-forecast-card.kz-forecast-total .kz-forecast-label { color: rgba(255,255,255,0.8); }
.kz-forecast-card.kz-forecast-total .kz-forecast-value { color: #fff; }
.kz-forecast-name {
    font-weight: 600;
    font-size: 0.9rem;
    color: #1e3c6e;
    margin-bottom: 8px;
}
.kz-forecast-row {
    display: flex;
    justify-content: space-around;
    gap: 12px;
}
.kz-forecast-item { text-align: center; }
.kz-forecast-value {
    font-size: 1.2rem;
    font-weight: 800;
    color: #1e3c6e;
    display: block;
}
.kz-forecast-label {
    font-size: 0.72rem;
    color: #64748b;
}

/* Trend Chart - CSS Bar Chart */
.kz-trend-chart {
    overflow-x: auto;
    padding-bottom: 8px;
}
.kz-trend-grid {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    min-height: 200px;
    padding: 0 4px;
}
.kz-trend-month {
    flex: 1;
    min-width: 55px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.kz-trend-bars {
    display: flex;
    gap: 2px;
    align-items: flex-end;
    height: 160px;
    width: 100%;
    justify-content: center;
}
.kz-trend-bar {
    width: 12px;
    border-radius: 3px 3px 0 0;
    transition: height 0.4s ease;
    position: relative;
    cursor: default;
}
.kz-trend-bar:hover { filter: brightness(0.85); }
.kz-trend-bar[title]:hover::after {
    content: attr(title);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: #1e293b;
    color: #fff;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    white-space: nowrap;
    z-index: 10;
}
.kz-trend-label {
    font-size: 0.7rem;
    color: #64748b;
    margin-top: 6px;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    max-height: 60px;
    overflow: hidden;
}
.kz-trend-legend {
    display: flex;
    gap: 16px;
    justify-content: center;
    margin-top: 12px;
    flex-wrap: wrap;
}
.kz-trend-legend-item {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: #64748b;
}
.kz-trend-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 2px;
}

/* Year Comparison */
.kz-year-grid {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    min-height: 200px;
    overflow-x: auto;
    padding-bottom: 8px;
}
.kz-year-month {
    flex: 1;
    min-width: 45px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.kz-year-vals {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    min-height: 28px;
}
.kz-year-val {
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
.kz-year-bars {
    display: flex;
    gap: 3px;
    align-items: flex-end;
    height: 130px;
    width: 100%;
    justify-content: center;
}
.kz-year-bar {
    width: 18px;
    border-radius: 3px 3px 0 0;
    transition: height 0.4s ease;
    position: relative;
}
.kz-year-bar:hover { filter: brightness(0.85); }
.kz-year-label {
    font-size: 0.72rem;
    color: #64748b;
    margin-top: 6px;
}

/* Sprint Track */
.kz-sprint-track {
    position: relative;
    padding: 4px 0 0;
}
.sprint-empty {
    text-align: center;
    padding: 32px 16px;
    color: #94a3b8;
    font-size: 0.9rem;
}
.sprint-inactive {
    opacity: 0.55;
}
.sprint-inactive .sprint-firstname {
    color: #64748b;
}
.sprint-bar-empty {
    height: 100%;
    display: flex;
    align-items: center;
    padding-left: 12px;
    font-size: 0.7rem;
    color: #94a3b8;
    font-style: italic;
}
.sprint-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 4px;
    transition: background 0.15s;
}
.sprint-row:hover {
    background: #f1f5f9;
}
.sprint-top3 {
    background: #f8fafc;
}
.sprint-rank {
    flex: 0 0 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.78rem;
    font-weight: 700;
    color: #fff;
    line-height: 1;
}
.sprint-info {
    flex: 0 0 120px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sprint-firstname {
    font-size: 0.82rem;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sprint-lastname {
    font-size: 0.7rem;
    color: #64748b;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sprint-bar-wrap {
    flex: 1;
    position: relative;
    height: 30px;
    background: #f1f5f9;
    border-radius: 6px;
    overflow: hidden;
}
.sprint-bar {
    height: 100%;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 10px;
    transition: width 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    min-width: 0;
    position: relative;
    z-index: 1;
}
.sprint-bar-val {
    font-size: 0.72rem;
    font-weight: 700;
    color: #fff;
    white-space: nowrap;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}
.sprint-grid-lines {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    pointer-events: none;
}
.sprint-grid-line {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(0,0,0,0.06);
}
.sprint-meta {
    flex: 0 0 55px;
    text-align: right;
}
.sprint-orders {
    font-size: 0.72rem;
    color: #64748b;
    font-weight: 500;
}
.sprint-scale {
    display: flex;
    justify-content: space-between;
    padding: 4px 93px 0 158px;
}
.sprint-scale-label {
    font-size: 0.62rem;
    color: #94a3b8;
    text-align: center;
}

/* Responsive */
@media (max-width: 900px) {
    .kz-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .kz-two-col { grid-template-columns: 1fr; }
    .kz-table { font-size: 0.78rem; }
    .kz-table th, .kz-table td { padding: 6px 6px; }
    .sprint-info { flex: 0 0 90px; }
    .sprint-scale { padding-left: 128px; padding-right: 73px; }
    .kz-ranking-grid { grid-template-columns: 1fr; }
    .kz-funnel-grid { grid-template-columns: repeat(2, 1fr); }
    .kz-product-grid { flex-direction: column; align-items: center; }
    .kz-oa-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .kz-kpi-grid { grid-template-columns: repeat(2, 1fr); }
    .kennzahlen-header { flex-direction: column; align-items: flex-start; }
    .kz-forecast-grid { grid-template-columns: 1fr; }
    .sprint-info { flex: 0 0 70px; }
    .sprint-firstname { font-size: 0.75rem; }
    .sprint-lastname { display: none; }
    .sprint-rank { flex: 0 0 24px; height: 24px; font-size: 0.7rem; }
    .sprint-scale { display: none; }
    .sprint-row { padding: 6px 8px; gap: 6px; }
    .kz-funnel-grid { grid-template-columns: 1fr; }
    .kz-ranking-grid { grid-template-columns: 1fr; }
    .kz-conv-grid { gap: 12px; }
    .kz-gauge { width: 70px; height: 40px; }
    .kz-oa-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   Kunden/Objekt CRM Dashboard
   ========================================================= */

/* KO List Search (inside list panel) */
.ko-list-search {
    padding: 10px 10px 6px;
    border-bottom: 1px solid var(--border, #e2e8f0);
    background: #fafbfc;
    position: sticky;
    top: 0;
    z-index: 2;
}
.ko-list-search .global-search-box {
    max-width: 100%;
    min-width: 0;
    padding: 8px 12px;
    border-radius: 10px;
}
.ko-list-search .global-search-box input {
    font-size: 14px;
}
.ko-result-count {
    display: block;
    font-size: 0.7rem;
    color: #94a3b8;
    white-space: nowrap;
    margin-top: 4px;
    padding-left: 2px;
}

/* Dashboard Animation */
.ko-dashboard {
    animation: koFadeIn 0.3s ease;
}
@keyframes koFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Split Panel Layout */
.ko-split-panel {
    display: flex;
    flex: 1;
    min-height: 0;
    height: calc(100vh - 145px);
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

/* List Panel (Left) */
.ko-list-panel {
    width: 360px;
    min-width: 300px;
    max-width: 420px;
    border-right: 1px solid var(--border);
    overflow-y: auto;
    flex-shrink: 0;
    position: relative;
    transition: width 0.25s ease, min-width 0.25s ease, max-width 0.25s ease, padding 0.25s ease;
}
/* Detail Panel (Right) */
.ko-detail-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: var(--bg);
    min-width: 0;
    overflow-y: auto;
    padding: 16px;
}

.ko-detail-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 12px;
    color: #94a3b8;
    font-size: 0.85rem;
}

.ko-list-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    gap: 10px;
    color: #94a3b8;
    font-size: 0.78rem;
    text-align: center;
    padding: 20px;
}

/* Search Result List Items */
.ko-search-list {
    display: flex;
    flex-direction: column;
}
.ko-list-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 8px 10px;
    border-bottom: 1px solid #f3f4f6;
    cursor: pointer;
    transition: all 0.15s;
}
.ko-list-item:hover { background: #f0f7ff; }
.ko-list-item.active {
    background: #e8f0fe;
    border-left: 3px solid #1e3c6e;
    box-shadow: inset 0 0 0 1px rgba(30,60,110,0.06);
}
.ko-list-row1 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.ko-list-name {
    font-weight: 600;
    font-size: 0.78rem;
    color: #1e293b;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
    min-width: 0;
}
.ko-list-value {
    font-weight: 700;
    font-size: 0.7rem;
    color: #1e3c6e;
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.ko-list-row2 {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.7rem;
    color: #94a3b8;
    flex-wrap: wrap;
}
.ko-list-row3 {
    font-size: 0.7rem;
    color: #64748b;
}
.ko-list-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
}
/* ── Zeichenfläche: Zoom/Pan-Viewport + Vollbild (Tablet/Stift) ── */
.drawing-viewport {
    overflow: hidden;
    position: relative;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background: #eef2f7;
    touch-action: none; /* Browser-Gesten aus — Pinch/Pan macht die App selbst */
}
.drawing-viewport canvas {
    transform-origin: 0 0;
    display: block;
    touch-action: none;
    background: #fff;
}
.drawing-vollbild {
    position: fixed !important;
    inset: 0;
    z-index: 9999;
    background: #0f172a;
    display: flex !important;
    flex-direction: column;
    padding: 10px;
    margin: 0 !important;
}
.drawing-vollbild .drawing-viewport { flex: 1; border-color: #334155; }
.drawing-vollbild .drawing-template-picker { display: none; }
.drawing-vollbild .drawing-tools { background: #1e293b; border-radius: 8px; }

.ko-list-badge.type-customer { background: #dbeafe; color: #1e40af; }
.ko-list-badge.type-object { background: #d1fae5; color: #065f46; }
.ko-list-badge.type-match { background: #fef3c7; color: #92400e; }
.ko-list-badge.type-enquiry { background: #ede9fe; color: #5b21b6; }

/* Header Card */
.ko-header-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    padding: 20px;
    margin-bottom: 16px;
    border-top: 3px solid #1e3c6e;
}
.ko-header-col {
    min-width: 0;
}
.ko-header-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    margin-bottom: 4px;
}
.ko-header-name {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1e3c6e;
    margin-bottom: 2px;
}
.ko-header-id {
    font-size: 0.78rem;
    color: #94a3b8;
    margin-bottom: 6px;
}
.ko-header-addr {
    font-size: 0.85rem;
    color: #475569;
    margin-bottom: 4px;
}
.ko-header-detail {
    font-size: 0.82rem;
    color: #475569;
    margin-bottom: 2px;
}
.ko-header-detail a {
    color: #2563eb;
    text-decoration: none;
}
.ko-header-detail a:hover {
    text-decoration: underline;
}

/* Contacts */
.ko-contacts {
    margin-top: 12px;
    padding-top: 10px;
    border-top: 1px solid #e5e7eb;
    font-size: 0.82rem;
    color: #475569;
}
.ko-contacts strong {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: #94a3b8;
    margin-bottom: 6px;
}
.ko-contact-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #f1f5f9;
    border-radius: 20px;
    padding: 4px 10px;
    margin: 2px 4px 2px 0;
    font-size: 0.78rem;
}
.ko-contact-name {
    font-weight: 600;
    color: #334155;
}
.ko-contact-link {
    color: #2563eb;
    text-decoration: none;
    font-size: 0.75rem;
}
.ko-contact-link:hover {
    text-decoration: underline;
}

/* Cross-Sell Section */
.ko-cross-sell {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 12px;
    margin-bottom: 16px;
}
.ko-cross-sell-card {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.07);
    padding: 14px;
    border-left: 4px solid #94a3b8;
    position: relative;
    transition: transform 0.15s, box-shadow 0.15s;
}
.ko-cross-sell-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}
.ko-cross-sell-card.priority-high {
    border-left-color: #16a34a;
    background: linear-gradient(135deg, #f0fdf4, #fff);
}
.ko-cross-sell-card.priority-medium {
    border-left-color: #f59e0b;
    background: linear-gradient(135deg, #fffbeb, #fff);
}
.ko-cross-sell-card.priority-low {
    border-left-color: #94a3b8;
    background: linear-gradient(135deg, #f8fafc, #fff);
}
.ko-cross-sell-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.ko-cross-sell-body {
    flex: 1;
    min-width: 0;
}
.ko-cross-sell-title {
    font-weight: 700;
    font-size: 0.88rem;
    color: #1e293b;
    margin-bottom: 4px;
}
.ko-cross-sell-desc {
    font-size: 0.78rem;
    color: #64748b;
    line-height: 1.4;
}
.ko-cross-sell-type {
    position: absolute;
    top: 8px;
    right: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #94a3b8;
    background: #f1f5f9;
    padding: 2px 6px;
    border-radius: 4px;
}

/* Detail Tabs */
.ko-detail-tabs {
    display: flex;
    gap: 2px;
    margin-bottom: 16px;
    border-bottom: 2px solid #e5e7eb;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}
.ko-detail-tab {
    padding: 10px 18px;
    border: none;
    background: transparent;
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: all 0.15s;
}
.ko-detail-tab:hover {
    color: #1e3c6e;
    background: #f0f4ff;
}
.ko-detail-tab.active {
    color: #1e3c6e;
    border-bottom-color: #1e3c6e;
}

/* Tab Content */
.ko-tab-content {
    min-height: 100px;
}
.ko-empty {
    padding: 40px 20px;
    text-align: center;
    color: #94a3b8;
    font-size: 0.9rem;
}

/* Timeline */
/* ===== Timeline V2 — Kombinierter Zeitstrahl ===== */
.ko-timeline-v2 {
    position: relative;
    padding-left: 40px;
}
.ko-timeline-v2::before {
    content: '';
    position: absolute;
    left: 16px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(180deg, #1e3c6e 0%, #e2e8f0 100%);
}
.ko-tl-month {
    position: relative;
    font-size: 12px;
    font-weight: 700;
    color: #1e3c6e;
    background: #eef2ff;
    display: inline-block;
    padding: 4px 14px;
    border-radius: 12px;
    margin: 16px 0 8px -8px;
    letter-spacing: 0.02em;
}
.ko-tl-item {
    position: relative;
    display: flex;
    gap: 12px;
    padding: 6px 0;
}
.ko-tl-line {
    position: absolute;
    left: -34px;
    top: 8px;
}
.ko-tl-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: #fff;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    z-index: 1;
    border: 2px solid #fff;
}
.ko-tl-body {
    flex: 1;
    background: #fff;
    border-radius: 10px;
    padding: 10px 14px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    border: 1px solid #f1f5f9;
    transition: all 0.15s;
}
.ko-tl-item:hover .ko-tl-body {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    border-color: #dbeafe;
}
/* Type-specific left border accent */
.ko-tl-quotation .ko-tl-body { border-left: 3px solid #3b82f6; }
.ko-tl-order .ko-tl-body { border-left: 3px solid #1e3c6e; }
.ko-tl-purchase .ko-tl-body { border-left: 3px solid #d97706; }
.ko-tl-purchase_invoice .ko-tl-body { border-left: 3px solid #0d9488; }
.ko-tl-invoice .ko-tl-body { border-left: 3px solid #16a34a; }
.ko-tl-activity .ko-tl-body { border-left: 3px solid #8b5cf6; }

.ko-tl-head {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ko-tl-title {
    font-size: 13px;
    font-weight: 600;
    color: #1e293b;
}
.ko-tl-status {
    font-size: 10px;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 6px;
    background: currentColor;
    -webkit-background-clip: unset;
    background-color: color-mix(in srgb, currentColor 12%, transparent);
}
.ko-tl-amount {
    font-size: 12px;
    font-weight: 700;
    color: #1e3c6e;
    margin-left: auto;
    font-variant-numeric: tabular-nums;
}
.ko-tl-date {
    font-size: 11px;
    color: #94a3b8;
}
.ko-tl-detail {
    font-size: 11px;
    color: #64748b;
    margin-top: 3px;
    line-height: 1.4;
}

/* Responsive */
@media (max-width: 900px) {
    .ko-header-card { grid-template-columns: 1fr; }
    .ko-cross-sell { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .ko-split-panel {
        flex-direction: column;
        height: auto;
    }
    .ko-list-panel {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .ko-detail-panel { min-height: 50vh; }
    .ko-detail-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0;
    }
    .ko-detail-tab {
        white-space: nowrap;
        flex: 0 0 auto;
    }
}
@media (max-width: 600px) {
    .ko-header-name { font-size: 1.1rem; }
    .ko-detail-tab { padding: 8px 12px; font-size: 0.8rem; }
    .ko-timeline-v2 { padding-left: 32px; }
    .ko-tl-dot { width: 24px; height: 24px; font-size: 10px; }
    .ko-tl-line { left: -28px; }
    .ko-tl-amount { margin-left: 0; display: block; }
}

/* ===== SharePoint Document Panel ===== */
.sp-document-panel {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
}

.sp-header-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    gap: 12px;
    flex-wrap: wrap;
}

.sp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: #374151;
    flex-wrap: wrap;
}
.sp-bc-item {
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background .15s;
}
.sp-bc-item:hover { background: #e5e7eb; }
.sp-bc-active { font-weight: 600; color: #1e3c6e; cursor: default; }
.sp-bc-active:hover { background: transparent; }
.sp-bc-root { font-weight: 600; }
.sp-bc-sep { color: #9ca3af; font-size: 14px; }

.sp-header-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.sp-upload-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
}

.sp-upload-zone {
    padding: 12px 16px;
    text-align: center;
    border-bottom: 1px dashed #d1d5db;
    background: #fafbfc;
    transition: all .2s;
    display: none; /* hidden by default, shown on drag */
}
.sp-upload-zone.dragover {
    display: block;
    background: #eff6ff;
    border-color: #3b82f6;
}
.sp-drop-text { color: #6b7280; font-size: 13px; }

.sp-file-list {
    display: flex;
    flex-direction: column;
}

.sp-file-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #f3f4f6;
    transition: background .12s;
    cursor: default;
}
.sp-file-item:last-child { border-bottom: none; }
.sp-file-item:hover { background: #f9fafb; }

.sp-folder-item { cursor: pointer; }
.sp-folder-item:hover { background: #fef3c7; }

.sp-file-icon { flex-shrink: 0; }

.sp-file-info { flex: 1; min-width: 0; }
.sp-file-name {
    font-size: 13px;
    font-weight: 500;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sp-file-meta {
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
}

.sp-file-chevron {
    font-size: 18px;
    color: #9ca3af;
    font-weight: 300;
}

.sp-file-actions {
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s;
}
.sp-file-item:hover .sp-file-actions { opacity: 1; }

.sp-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: #6b7280;
    text-decoration: none;
    transition: all .12s;
}
.sp-action-btn:hover { background: #e5e7eb; color: #1f2937; }
.sp-action-delete:hover { background: #fef2f2; color: #dc2626; }

/* Preview overlay */
.sp-preview-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 24px;
}
.sp-preview-modal {
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 25px 50px rgba(0,0,0,0.3);
}
.sp-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}
.sp-preview-close {
    background: none;
    border: none;
    font-size: 24px;
    cursor: pointer;
    color: #6b7280;
    line-height: 1;
    padding: 0 4px;
}
.sp-preview-close:hover { color: #dc2626; }

/* Show upload zone when dragging over the panel */
.sp-document-panel.dragging .sp-upload-zone { display: block; }

/* ── Photo grid (image-only folders) ── */
.sp-photo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 10px;
    padding: 14px 16px;
}

.sp-photo-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    cursor: pointer;
    border-radius: 8px;
    overflow: hidden;
    border: 2px solid transparent;
    transition: border-color .15s, box-shadow .15s, transform .15s;
    background: #f9fafb;
}
.sp-photo-card:hover {
    border-color: #1e3c6e;
    box-shadow: 0 4px 16px rgba(30,60,110,.18);
    transform: translateY(-2px);
}
.sp-photo-thumb {
    position: relative;
    width: 100%;
    padding-top: 75%; /* 4:3 aspect ratio */
    background: #e5e7eb;
    overflow: hidden;
}
.sp-photo-thumb img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: opacity .3s;
}
.sp-photo-thumb-placeholder {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f3f4f6;
    color: #9ca3af;
    font-size: 11px;
}
.sp-photo-thumb-placeholder.loading::after {
    content: '';
    width: 20px;
    height: 20px;
    border: 2px solid #d1d5db;
    border-top-color: #1e3c6e;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
.sp-photo-name {
    padding: 4px 6px 6px;
    font-size: 11px;
    color: #374151;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
.sp-photo-card .sp-photo-actions {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    gap: 4px;
    opacity: 0;
    transition: opacity .15s;
}
.sp-photo-thumb { position: relative; }
.sp-photo-card:hover .sp-photo-actions { opacity: 1; }
.sp-photo-action-btn {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.55);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: background .12s;
}
.sp-photo-action-btn:hover { background: rgba(220,38,38,.8); }
.sp-photo-action-btn.sp-photo-dl:hover { background: rgba(30,60,110,.85); }

/* ── Lightbox ── */
.sp-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.92);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
}
.sp-lightbox-header {
    position: absolute;
    top: 0; left: 0; right: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    background: linear-gradient(to bottom, rgba(0,0,0,.7), transparent);
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    z-index: 1;
}
.sp-lightbox-close {
    width: 36px;
    height: 36px;
    border: none;
    background: rgba(255,255,255,.15);
    color: #fff;
    border-radius: 50%;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s;
}
.sp-lightbox-close:hover { background: rgba(220,38,38,.7); }
.sp-lightbox-img-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    padding: 60px 80px;
}
.sp-lightbox-img-wrap img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 4px;
    box-shadow: 0 0 60px rgba(0,0,0,.5);
}
.sp-lightbox-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(255,255,255,.2);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .7s linear infinite;
}
.sp-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    background: rgba(255,255,255,.15);
    border: none;
    border-radius: 50%;
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .12s;
    z-index: 2;
}
.sp-lightbox-nav:hover { background: rgba(255,255,255,.3); }
.sp-lightbox-nav.prev { left: 16px; }
.sp-lightbox-nav.next { right: 16px; }
.sp-lightbox-nav:disabled { opacity: .3; cursor: default; }
.sp-lightbox-footer {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 10px 20px;
    background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
    color: rgba(255,255,255,.7);
    font-size: 12px;
    text-align: center;
    z-index: 1;
}

@media (max-width: 768px) {
    .sp-file-actions { opacity: 1; }
    .sp-header-bar { flex-direction: column; align-items: stretch; }
    .sp-header-actions { justify-content: flex-end; }
    .sp-photo-grid { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 8px; }
    .sp-lightbox-img-wrap { padding: 50px 50px; }
    .sp-lightbox-nav { width: 36px; height: 36px; font-size: 18px; }
    .sp-lightbox-nav.prev { left: 8px; }
    .sp-lightbox-nav.next { right: 8px; }
}

/* ===== Doubletten-Warnung ===== */
.dup-warning-panel {
    margin-top: 10px;
    border: 1px solid #fbbf24;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    background: #fffbeb;
    overflow: hidden;
}
.dup-warning-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: #fef3c7;
    font-size: 13px;
    font-weight: 600;
    color: #92400e;
    border-bottom: 1px solid #fde68a;
}
.dup-warning-header svg { flex-shrink: 0; color: #d97706; }
.dup-match-list { padding: 4px; }
.dup-match-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
}
.dup-match-item:hover { background: #fef9c3; }
.dup-match-info { flex: 1; min-width: 0; }
.dup-match-name {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dup-obj-id {
    font-weight: 400;
    font-size: 11px;
    color: #6b7280;
    margin-left: 4px;
}
.dup-match-addr {
    font-size: 12px;
    color: #6b7280;
    margin-top: 1px;
}
.dup-match-meta {
    display: flex;
    gap: 10px;
    font-size: 11px;
    color: #9ca3af;
    margin-top: 2px;
}
.dup-match-right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 3px;
    flex-shrink: 0;
}
.dup-match-score {
    font-size: 16px;
    font-weight: 700;
    line-height: 1;
}
.dup-match-reason {
    font-size: 10px;
    color: #9ca3af;
    white-space: nowrap;
}
.dup-link-btn {
    font-size: 11px !important;
    padding: 2px 8px !important;
    background: #f59e0b !important;
    color: #fff !important;
    border: none !important;
    border-radius: 4px !important;
}
.dup-link-btn:hover {
    background: #d97706 !important;
}
/* Kritische Doublette (Score >= 90%) */
.dup-warning-critical {
    background: #fef2f2 !important;
    color: #991b1b !important;
    border-bottom-color: #fecaca !important;
}
.dup-warning-critical svg { color: #dc2626 !important; }
.dup-confirm-bar {
    padding: 8px 12px;
    background: #fef2f2;
    border-top: 1px solid #fecaca;
    font-size: 12px;
    color: #991b1b;
    font-weight: 500;
}
/* Empfohlen / Alt Badges in Doubletten-Anzeige */
.dup-recommended {
    background: #f0fdf4 !important;
    border-left: 3px solid #16a34a;
}
.dup-recommended:hover { background: #dcfce7 !important; }
.dup-old {
    opacity: 0.6;
}
.dup-badge-rec {
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    background: #16a34a;
    color: #fff;
    padding: 1px 6px;
    border-radius: 8px;
    vertical-align: middle;
    margin-right: 4px;
}
.dup-badge-old {
    display: inline-block;
    font-size: 10px;
    font-weight: 600;
    background: #9ca3af;
    color: #fff;
    padding: 1px 6px;
    border-radius: 8px;
    vertical-align: middle;
    margin-right: 4px;
}
/* Zweite Zeile mit Metadaten */
.dup-match-meta + .dup-match-meta {
    margin-top: 1px;
}

/* ID-Badge im Wizard-Header (Kundennummer, Objekt-ID) */
.enq-wiz-id-badge {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    background: #dbeafe;
    color: #1e40af;
    padding: 1px 8px;
    border-radius: 10px;
    margin-left: 8px;
    vertical-align: middle;
}
/* Duplikat-Panel auch im manuellen Wizard */
.duplicate-warning-panel {
    margin-top: 10px;
    border: 1px solid #fbbf24;
    border-left: 4px solid #f59e0b;
    border-radius: 8px;
    background: #fffbeb;
    overflow: hidden;
}

/* ===== Auftrags-Fortschritts-Tracker ===== */
.order-progress-bar {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    margin-bottom: 8px;
    background: #fff;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    overflow-x: auto;
    gap: 0;
}
.order-progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    min-width: 60px;
}
.order-progress-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    border: 2px solid #d1d5db;
    background: #f9fafb;
    color: #9ca3af;
    transition: all 0.2s;
}
.order-progress-step.completed .order-progress-circle {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
    font-size: 14px;
}
.order-progress-step.current .order-progress-circle {
    background: #fff;
    border-color: #2563eb;
    color: #2563eb;
    box-shadow: 0 0 0 3px rgba(37,99,235,0.15);
}
.order-progress-label {
    font-size: 9px;
    color: #9ca3af;
    font-weight: 500;
    white-space: nowrap;
}
.order-progress-step.completed .order-progress-label { color: #2563eb; font-weight: 600; }
.order-progress-step.partial .order-progress-label { color: #d97706; font-weight: 600; }
.order-progress-step.current .order-progress-label { color: #1d4ed8; font-weight: 600; }
.order-progress-step.partial .order-progress-circle {
    background: #f59e0b; border-color: #f59e0b; color: #fff;
}
.order-progress-sub {
    font-size: 8px;
    color: #6b7280;
    white-space: nowrap;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: center;
}
.order-progress-step.completed .order-progress-sub { color: #2563eb; }
.order-progress-step.partial .order-progress-sub { color: #d97706; }
.order-progress-line {
    flex: 1;
    height: 3px;
    background: #e5e7eb;
    min-width: 20px;
    margin: 0 -2px;
    margin-bottom: 28px;
    border-radius: 2px;
}
.order-progress-line.completed { background: #2563eb; }
.order-progress-line.partial { background: linear-gradient(90deg, #f59e0b 50%, #e5e7eb 50%); }

/* Mini-Fortschritt in Auftrags-Liste */
.order-progress-row {
    grid-column: 1 / -1;
    padding: 2px 0 0 0;
}
.order-progress-mini {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.order-progress-mini-bar {
    width: 80px;
    height: 5px;
    background: #e5e7eb;
    border-radius: 3px;
    overflow: hidden;
}
.order-progress-mini-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s;
}
.order-progress-mini-label {
    font-size: 11px;
    color: #9ca3af;
    font-weight: 500;
}

@media (max-width: 768px) {
    .order-progress-bar { padding: 10px 8px; gap: 0; }
    .order-progress-step { min-width: 48px; }
    .order-progress-circle { width: 26px; height: 26px; font-size: 11px; }
    .order-progress-label { font-size: 10px; }
    .order-progress-line { min-width: 12px; margin-bottom: 18px; }
}

/* ===== Quick-Actions FAB ===== */
.quick-action-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--orange-600);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(243,146,0,0.4);
    z-index: 1000;
    transition: transform 0.2s, background 0.2s;
}
.quick-action-fab:hover { background: #e08600; transform: scale(1.08); }
.quick-action-fab.open { transform: rotate(45deg); background: #dc2626; }
.quick-action-fab.open:hover { background: #b91c1c; }

.quick-action-menu {
    position: fixed;
    bottom: 90px;
    right: 24px;
    width: 280px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    border: 1px solid #e5e7eb;
    z-index: 1001;
    overflow: hidden;
    animation: quickMenuSlideUp 0.2s ease-out;
}
@keyframes quickMenuSlideUp {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: translateY(0); }
}
.quick-action-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 500;
    color: #1f2937;
    cursor: pointer;
    text-align: left;
    transition: background 0.15s;
}
.quick-action-item:hover { background: #f3f4f6; }
.quick-action-icon { font-size: 18px; }
.quick-action-divider {
    height: 1px;
    background: #e5e7eb;
    margin: 4px 0;
}
.quick-action-recent { padding: 4px 0 8px; }
.quick-action-recent-title {
    font-size: 11px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 4px 16px 6px;
}
.quick-action-recent-list { max-height: 240px; overflow-y: auto; }
.quick-recent-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    cursor: pointer;
    transition: background 0.15s;
}
.quick-recent-item:hover { background: #f9fafb; }
.quick-recent-icon { font-size: 16px; flex-shrink: 0; }
.quick-recent-info { flex: 1; min-width: 0; }
.quick-recent-id {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quick-recent-type {
    font-weight: 400;
    font-size: 11px;
    color: #9ca3af;
    margin-left: 4px;
}
.quick-recent-detail {
    font-size: 11px;
    color: #6b7280;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.quick-recent-date {
    font-size: 11px;
    color: #9ca3af;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .quick-action-fab { bottom: 16px; right: 16px; width: 50px; height: 50px; }
    .quick-action-menu { bottom: 76px; right: 16px; width: calc(100vw - 32px); }
}

/* ===== Notification Center ===== */
.notification-bell-wrapper {
    position: relative;
    display: inline-flex;
}
.notification-bell {
    position: relative;
    color: #fff;
}
.notification-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 9px;
    background: #ef4444;
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}
.notification-badge.badge-high {
    background: #dc2626;
    animation: notifPulse 2s ease-in-out infinite;
}
@keyframes notifPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}
.notification-dropdown {
    /* position: fixed bricht aus dem Header-Stacking-Context aus →
       erscheint immer über Navigationsmenüs */
    position: fixed;
    top: 60px;   /* Höhe des app-header */
    right: 16px;
    width: 360px;
    max-height: 480px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.18);
    border: 1px solid #e5e7eb;
    z-index: 10001;
    overflow: hidden;
    animation: quickMenuSlideUp 0.2s ease-out;
}
.notification-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: #f9fafb;
    border-bottom: 1px solid #e5e7eb;
    font-size: 14px;
    font-weight: 600;
    color: #1f2937;
}
.notification-dropdown-header .btn-text {
    background: none;
    border: none;
    color: var(--blue-700);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
}
.notification-dropdown-header .btn-text:hover { text-decoration: underline; }
.notification-list {
    max-height: 400px;
    overflow-y: auto;
}
.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    transition: background 0.15s;
    border-bottom: 1px solid #f3f4f6;
}
.notification-item:last-child { border-bottom: none; }
.notification-item:hover { background: #f9fafb; }
.notification-item.notification-high { border-left: 3px solid #dc2626; }
.notification-item.notification-medium { border-left: 3px solid #f59e0b; }
.notification-item.notification-low { border-left: 3px solid #22c55e; }
.notif-icon { font-size: 14px; margin-top: 2px; flex-shrink: 0; }
.notif-content { flex: 1; min-width: 0; }
.notif-title {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-message {
    font-size: 12px;
    color: #6b7280;
    margin-top: 1px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.notif-days {
    font-size: 11px;
    font-weight: 700;
    color: #dc2626;
    flex-shrink: 0;
    min-width: 28px;
    text-align: right;
}

@media (max-width: 768px) {
    .notification-dropdown {
        /* bereits fixed — nur Breite anpassen */
        width: calc(100vw - 32px);
        right: 16px;
        max-height: 70vh;
    }
}

@media (max-width: 479px) {
    .notification-dropdown {
        /* Kleinstgeräte: vollbreite, dicht unter dem Header */
        top: 52px;   /* Header auf Mobilgeräten etwas kürzer */
        left: 8px;
        right: 8px;
        width: auto;
        max-height: 75vh;
        border-radius: 12px;
    }
}

/* ===== Gamification ===== */
.gamification-container { padding: 0; }
.gam-grid {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    gap: 16px;
}
.gam-card {
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e5e7eb;
    padding: 16px;
    overflow: hidden;
}
.gam-card-title {
    font-size: 14px;
    font-weight: 700;
    color: #1f2937;
    margin-bottom: 12px;
}

/* Points Card */
.gam-points-card {
    text-align: center;
    background: linear-gradient(135deg, #1e3c6e 0%, #2d539c 100%);
    color: #fff;
    border-color: transparent;
}
.gam-points-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 8px;
}
.gam-level-badge {
    background: var(--orange-600);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 10px;
}
.gam-level-name { font-size: 13px; opacity: 0.9; }
.gam-points-value { font-size: 36px; font-weight: 800; line-height: 1.1; }
.gam-points-label { font-size: 12px; opacity: 0.7; margin-bottom: 12px; }
.gam-progress-bar {
    height: 6px;
    background: rgba(255,255,255,0.2);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 4px;
}
.gam-progress-fill {
    height: 100%;
    background: var(--orange-600);
    border-radius: 3px;
    transition: width 0.5s;
}
.gam-progress-text { font-size: 11px; opacity: 0.7; }
.gam-stats { font-size: 12px; opacity: 0.8; margin-top: 8px; }

/* Leaderboard */
.gam-lb-list { display: flex; flex-direction: column; gap: 4px; }
.gam-lb-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 13px;
    transition: background 0.15s;
}
.gam-lb-item:hover { background: #f3f4f6; }
.gam-lb-me { background: #eff6ff; border: 1px solid #bfdbfe; }
.gam-lb-rank { width: 24px; text-align: center; font-size: 14px; }
.gam-lb-name { flex: 1; font-weight: 500; color: #1f2937; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gam-lb-pts { font-weight: 700; color: var(--blue-700); font-size: 12px; }
.gam-lb-lvl { font-size: 11px; color: #9ca3af; min-width: 40px; text-align: right; }

/* Achievements */
.gam-achievements-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}
.gam-achievement {
    text-align: center;
    padding: 12px 8px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    transition: transform 0.15s;
}
.gam-achievement:hover { transform: translateY(-2px); }
.gam-achievement.earned {
    background: linear-gradient(135deg, #fef9c3, #fef3c7);
    border-color: #fde68a;
}
.gam-achievement.locked { opacity: 0.5; }
.gam-ach-icon { font-size: 28px; margin-bottom: 4px; }
.gam-ach-name { font-size: 12px; font-weight: 600; color: #1f2937; }
.gam-ach-desc { font-size: 10px; color: #6b7280; margin-top: 2px; }
.gam-ach-progress {
    height: 4px;
    background: #e5e7eb;
    border-radius: 2px;
    margin-top: 6px;
    overflow: hidden;
}
.gam-ach-bar {
    height: 100%;
    background: var(--orange-600);
    border-radius: 2px;
}

/* Gamification: Tablet */
@media (min-width: 600px) and (max-width: 899px) {
    .gam-grid {
        grid-template-columns: 1fr 1fr;
    }
    .gam-grid > :first-child {
        grid-column: 1 / -1;
    }
}

/* Gamification: Phone */
@media (max-width: 599px) {
    .gam-grid { grid-template-columns: 1fr; }
    .gam-achievements-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }
}

/* Quick-Action FAB: Safe Area */
@supports (padding: env(safe-area-inset-bottom)) {
    .quick-action-fab {
        bottom: calc(24px + env(safe-area-inset-bottom));
    }
}

/* ===== Zonenplan ===== */
.zp-toolbar {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 4px 0;
}
.zp-tabs {
    display: flex; gap: 4px;
}
.zp-tab-btn {
    padding: 6px 16px; border: 1px solid var(--border); border-radius: 6px;
    background: #fff; cursor: pointer; font-size: 13px; font-weight: 500;
    transition: all 0.15s; color: var(--text);
}
.zp-tab-btn:hover { background: #eff6ff; }
.zp-tab-btn.active { background: var(--blue-600, #2563eb); color: #fff; border-color: var(--blue-600, #2563eb); }

.zp-stats {
    display: flex; gap: 12px; align-items: center; padding: 8px 0 4px; flex-wrap: wrap;
}
.zp-stat {
    font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 4px;
}

.zp-table-container {
    overflow-x: auto; max-height: calc(100vh - 200px); overflow-y: auto;
}
.zp-table {
    width: 100%; border-collapse: collapse; font-size: 13px;
}
.zp-table th {
    text-align: left; padding: 10px 12px; background: #f9fafb;
    border-bottom: 2px solid var(--border); font-weight: 600; color: var(--muted);
    text-transform: uppercase; font-size: 11px; letter-spacing: 0.5px;
    position: sticky; top: 0; z-index: 1;
}
.zp-table td {
    padding: 8px 12px; border-bottom: 1px solid #f1f5f9;
}
.zp-table tbody tr:hover { background: #eff6ff; }

.zp-zone-badge {
    display: inline-block; min-width: 28px; text-align: center;
    padding: 2px 8px; border-radius: 12px; font-weight: 600; font-size: 11px;
    background: #f3f4f6; color: #374151;
}
.zp-zone-badge.zone-0 { background: #f0fdf4; color: #166534; }
.zp-zone-badge.zone-1 { background: #ecfdf5; color: #065f46; }
.zp-zone-badge.zone-2 { background: #fefce8; color: #854d0e; }
.zp-zone-badge.zone-3 { background: #fff7ed; color: #9a3412; }
.zp-zone-badge.zone-4 { background: #fef2f2; color: #991b1b; }
.zp-zone-badge.zone-5 { background: #faf5ff; color: #6b21a8; }
.zp-zone-badge.zone-6 { background: #f0f9ff; color: #075985; }
.zp-zone-badge.zone-7 { background: #fdf4ff; color: #86198f; }
.zp-zone-badge.zone-8 { background: #fff1f2; color: #9f1239; }
.zp-zone-badge.zone-9 { background: #f0fdfa; color: #115e59; }
.zp-zone-badge.zone-10 { background: #fdf2f8; color: #9d174d; }
.zp-zone-badge.zone-11 { background: #eff6ff; color: #1e40af; }
.zp-zone-badge.zone-12 { background: #ecfccb; color: #3f6212; }
.zp-zone-badge.zone-13 { background: #fef9c3; color: #713f12; }
.zp-zone-badge.zone-14 { background: #e0e7ff; color: #3730a3; }
.zp-zone-badge.zone-15 { background: #fce7f3; color: #831843; }
.zp-zone-badge.zone-16 { background: #ccfbf1; color: #134e4a; }
.zp-zone-badge.zone-17 { background: #dbeafe; color: #1e3a8a; }
.zp-zone-badge.zone-18 { background: #fef3c7; color: #78350f; }
.zp-zone-badge.zone-19 { background: #ede9fe; color: #4c1d95; }
.zp-zone-badge.zone-20 { background: #d1fae5; color: #064e3b; }

.zp-worker-select {
    padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px;
    font-size: 12px; background: #fff; min-width: 180px; cursor: pointer;
}
.zp-worker-select:focus { border-color: var(--blue-600, #2563eb); outline: none; box-shadow: 0 0 0 2px rgba(37,99,235,0.15); }

.zp-price-input {
    width: 90px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 4px;
    font-size: 12px; text-align: right;
}
.zp-price-input:focus { border-color: var(--blue-600, #2563eb); outline: none; box-shadow: 0 0 0 2px rgba(37,99,235,0.15); }

.zp-flatrate-table th { min-width: 100px; }

/* Package Manager */
.zp-pkg-form {
    display: flex; gap: 8px; margin-bottom: 16px; align-items: center;
}
.zp-pkg-form input { flex: 1; padding: 8px 12px; border: 1px solid var(--border); border-radius: 6px; font-size: 13px; }
.zp-pkg-form input:focus { border-color: var(--blue-600, #2563eb); outline: none; box-shadow: 0 0 0 2px rgba(37,99,235,0.15); }
.zp-pkg-list { display: flex; flex-direction: column; gap: 8px; max-height: 400px; overflow-y: auto; }
.zp-pkg-item {
    display: flex; align-items: center; justify-content: space-between;
    padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px;
    background: #f9fafb;
}
.zp-pkg-info { display: flex; flex-direction: column; gap: 2px; }
.zp-pkg-info strong { font-size: 13px; }
.zp-pkg-info span { font-size: 11px; color: var(--muted); }
.zp-pkg-actions { display: flex; gap: 4px; }

/* Map Legend */
.zp-map-legend {
    margin-top: 12px; padding: 12px 16px; background: #f9fafb;
    border: 1px solid var(--border); border-radius: 8px;
}
.zp-map-legend-title {
    font-weight: 600; font-size: 13px; margin-bottom: 8px; color: #374151;
}
.zp-map-legend-items {
    display: flex; flex-wrap: wrap; gap: 8px 16px;
}
.zp-map-legend-item {
    display: flex; align-items: center; gap: 6px; font-size: 12px;
}
.zp-map-legend-dot {
    width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
    border: 1px solid rgba(0,0,0,0.1);
}
.zp-map-legend-name { color: #374151; }
.zp-map-legend-count {
    background: #e5e7eb; color: #6b7280; padding: 0 5px;
    border-radius: 8px; font-size: 10px; font-weight: 600;
}

/* PLZ-Lookup im Pakete-Tab */
.zp-plz-lookup {
    margin-bottom: 16px;
}
.zp-plz-search {
    display: flex; align-items: center; gap: 8px;
    padding: 8px 14px; border: 2px solid var(--border); border-radius: 10px;
    background: #fff; max-width: 400px; transition: border-color 0.2s;
}
.zp-plz-search:focus-within {
    border-color: var(--blue-600, #2563eb);
    box-shadow: 0 0 0 3px rgba(37,99,235,0.1);
}
.zp-plz-search svg { color: var(--muted); flex-shrink: 0; }
.zp-plz-search input {
    border: none; outline: none; flex: 1; font-size: 14px;
    background: transparent; padding: 0;
}
.zp-plz-clear {
    border: none; background: none; cursor: pointer; font-size: 18px;
    color: var(--muted); padding: 0 2px; line-height: 1;
}
.zp-plz-clear:hover { color: #ef4444; }
.zp-plz-result-found {
    margin-top: 10px; padding: 10px 14px; border-radius: 8px;
    background: #ecfdf5; border: 1px solid #a7f3d0;
    color: #065f46; font-size: 14px; display: inline-flex; align-items: center; gap: 4px;
}
.zp-plz-result-none {
    margin-top: 10px; padding: 8px 14px; border-radius: 8px;
    background: #fef2f2; border: 1px solid #fecaca;
    color: #991b1b; font-size: 13px; display: inline-block;
}

/* Faktoren */
.zp-factor-header {
    display: flex; justify-content: flex-end; margin-bottom: 12px;
}
.zp-factor-form {
    display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 16px;
    background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 8px;
    margin-bottom: 12px; align-items: center;
}
.zp-factor-form input, .zp-factor-form select {
    padding: 6px 10px; border: 1px solid var(--border); border-radius: 6px;
    font-size: 13px; background: #fff;
}
.zp-factor-form input:focus, .zp-factor-form select:focus {
    border-color: var(--blue-600, #2563eb); outline: none;
    box-shadow: 0 0 0 2px rgba(37,99,235,0.15);
}
.zp-factor-form input[type="text"] { min-width: 150px; }
.zp-factor-form input[type="number"] { width: 120px; }
.zp-factor-form select { min-width: 120px; }
.zp-factor-form-actions { display: flex; gap: 6px; }
.zp-factor-badge {
    display: inline-block; padding: 2px 8px; border-radius: 10px;
    font-size: 11px; font-weight: 600;
}
.zp-factor-industrie { background: #dbeafe; color: #1e40af; }
.zp-factor-privat { background: #fef3c7; color: #92400e; }

/* Faktoren Item-Lookup */
.zp-item-lookup-wrap {
    position: relative;
    flex: 1;
    min-width: 200px;
}
.zp-item-lookup-results {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 200;
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 4px 16px rgba(0,0,0,.15);
    max-height: 260px;
    overflow-y: auto;
    min-width: 320px;
    margin-top: 2px;
}
.zp-item-lookup-results.hidden { display: none !important; }
.zp-item-lookup-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    cursor: pointer;
    border-bottom: 1px solid var(--border);
    font-size: 12px;
    transition: background .1s;
}
.zp-item-lookup-item:last-child { border-bottom: none; }
.zp-item-lookup-item:hover { background: #f0f4ff; }
.zp-item-lookup-main {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
    flex: 1;
}
.zp-item-lookup-id {
    font-weight: 600;
    color: var(--blue-800, #1e40af);
    font-size: 12px;
}
.zp-item-lookup-name {
    font-size: 11px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.zp-item-lookup-price {
    font-weight: 600;
    font-size: 11px;
    white-space: nowrap;
    margin-left: 8px;
    color: var(--text);
}
.zp-item-lookup-empty {
    padding: 12px;
    text-align: center;
    color: var(--muted);
    font-size: 12px;
}

/* iHAAS Import */
.btn-ihaas {
    border-color: #f59e0b !important;
    color: #b45309 !important;
    font-weight: 600;
}
.btn-ihaas:hover {
    background: #fef3c7 !important;
    border-color: #d97706 !important;
}

/* IHAAS Choice Modal */
.ihaas-choice-btn {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 18px 20px;
    border: 2px solid #e5e7eb;
    border-radius: 12px;
    background: #fff;
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
    font-family: inherit;
    text-decoration: none;
    box-sizing: border-box;
}
.ihaas-choice-btn:hover {
    border-color: #002855;
    background: #f0f4fb;
    transform: translateY(-1px);
}
.ihaas-choice-icon {
    font-size: 32px;
    flex-shrink: 0;
    line-height: 1;
}
.ihaas-choice-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}
.ihaas-choice-title {
    font-size: 15px;
    font-weight: 700;
    color: #002855;
    display: block;
}
.ihaas-choice-desc {
    font-size: 12px;
    color: #6b7280;
    display: block;
    line-height: 1.4;
}
.ihaas-header-info {
    background: #f8fafc;
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 14px 18px;
    margin-bottom: 16px;
}
.ihaas-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px 24px;
    font-size: 13px;
}
.ihaas-positions { margin-bottom: 16px; }
.ihaas-table-wrap {
    max-height: 400px;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: 8px;
}
.ihaas-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.ihaas-table thead { position: sticky; top: 0; background: var(--card); z-index: 1; }
.ihaas-table th {
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--muted);
    border-bottom: 2px solid var(--border);
}
.ihaas-table td {
    padding: 8px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.ihaas-table tr:hover { background: #f0f4ff; }
.ihaas-table tfoot td {
    padding: 10px;
    background: #f8fafc;
}
.ihaas-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

/* Zonenplan responsive */
@media (max-width: 768px) {
    .zp-toolbar { flex-direction: column; align-items: stretch; }
    .zp-worker-select { min-width: 140px; font-size: 11px; }
    .zp-table { font-size: 12px; }
    .zp-table th, .zp-table td { padding: 6px 8px; }
    .zp-pkg-form { flex-direction: column; }
    .zp-pkg-form input { width: 100%; }
    .zp-factor-form { flex-direction: column; }
    .zp-factor-form input, .zp-factor-form select { width: 100%; min-width: unset; }
    .zp-map-legend-items { flex-direction: column; gap: 4px; }
    .ihaas-info-grid { grid-template-columns: 1fr; }
    .ihaas-table { font-size: 12px; }
}

/* =========================================================
   Settings Panel (Admin Drawer)
   ========================================================= */

.settings-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.35);
    z-index: 1400;
}
.settings-overlay.open { display: block; }

.settings-panel {
    position: fixed;
    top: 0;
    right: -520px;
    width: 520px;
    max-width: 100vw;
    height: 100vh;
    background: var(--card);
    box-shadow: -4px 0 30px rgba(0,0,0,.15);
    z-index: 1401;
    display: flex;
    flex-direction: column;
    transition: right .28s cubic-bezier(.4,0,.2,1);
}
.settings-panel.open { right: 0; }

.settings-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 20px;
    background: var(--blue-900);
    color: #fff;
    flex-shrink: 0;
}
.settings-panel-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: .3px;
}
.settings-panel-header button {
    background: none;
    border: none;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius);
    line-height: 1;
    opacity: .8;
    transition: opacity .15s;
}
.settings-panel-header button:hover { opacity: 1; }

.settings-panel-tabs {
    display: flex;
    gap: 0;
    background: var(--gray-100);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    overflow-x: auto;
}
.settings-tab {
    padding: 10px 18px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    font-size: 13px;
    font-weight: 500;
    color: var(--muted);
    cursor: pointer;
    white-space: nowrap;
    transition: color .15s, border-color .15s;
}
.settings-tab:hover { color: var(--blue-900); }
.settings-tab.active {
    color: var(--blue-900);
    border-bottom-color: var(--orange-600);
    background: var(--card);
}

.settings-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px;
}

.settings-section {
    margin-bottom: 28px;
}
.settings-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--blue-900);
    text-transform: uppercase;
    letter-spacing: .6px;
    margin: 0 0 14px;
    padding-bottom: 6px;
    border-bottom: 2px solid var(--orange-600);
    display: inline-block;
}

.settings-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.settings-card {
    background: var(--gray-50);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 14px 16px;
}

.settings-card-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.settings-card-row:last-child { margin-bottom: 0; }

.settings-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    min-width: 120px;
    flex-shrink: 0;
}

.settings-input,
.settings-select {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 13px;
    background: var(--card);
    color: var(--text);
    transition: border-color .15s, box-shadow .15s;
}
.settings-input:focus,
.settings-select:focus {
    outline: none;
    border-color: var(--orange-600);
    box-shadow: var(--focus);
}

/* Log table */
.settings-log-table-wrap {
    overflow-x: auto;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
}
.settings-log-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
}
.settings-log-table th {
    background: var(--blue-900);
    color: #fff;
    padding: 8px 10px;
    text-align: left;
    font-weight: 600;
    white-space: nowrap;
}
.settings-log-table td {
    padding: 7px 10px;
    border-bottom: 1px solid var(--border);
    vertical-align: middle;
}
.settings-log-table tr:last-child td { border-bottom: none; }
.settings-log-table tr:hover td { background: var(--gray-50); }
.settings-log-row-err td { background: #fff5f5 !important; color: #b91c1c; }
.settings-log-row-skip td { background: #f9fafb !important; color: #6b7280; }

/* Small buttons */
.btn-xs {
    padding: 3px 9px;
    font-size: 11px;
    border-radius: 5px;
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    transition: background .15s, color .15s;
    white-space: nowrap;
}
.btn-xs:hover { background: var(--gray-100); }
.btn-xs.btn-primary {
    background: var(--blue-900);
    color: #fff;
    border-color: var(--blue-900);
}
.btn-xs.btn-primary:hover { background: var(--blue-800); }

.btn-sm {
    padding: 7px 14px;
    font-size: 13px;
    border-radius: var(--radius);
    border: 1px solid var(--border);
    background: var(--card);
    color: var(--text);
    cursor: pointer;
    transition: background .15s, color .15s;
}
.btn-sm:hover { background: var(--gray-100); }
.btn-sm.btn-primary {
    background: var(--blue-900);
    color: #fff;
    border-color: var(--blue-900);
}
.btn-sm.btn-primary:hover { background: var(--blue-800); }
.btn-sm.btn-success {
    background: #16a34a;
    color: #fff;
    border-color: #16a34a;
}
.btn-sm.btn-success:hover { background: #15803d; }

/* Settings gear button in header */
#btnSettings {
    background: none;
    border: none;
    color: inherit;
    font-size: 18px;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius);
    opacity: .8;
    transition: opacity .15s, background .15s;
    text-decoration: none;
}
#btnSettings:hover { opacity: 1; background: rgba(255,255,255,.1); }

@media (max-width: 600px) {
    .settings-panel { width: 100vw; }
    .settings-grid-2 { grid-template-columns: 1fr; }
}

/* =========================================================
   SCHNELLRECHNUNG — Modal & Components
   ========================================================= */

/* Accent nav button for Schnellrechnung */
.toggle-btn-accent {
    background: linear-gradient(135deg, #f39200, #e07d00) !important;
    color: #fff !important;
    border-color: transparent !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(243,146,0,.35);
}
.toggle-btn-accent:hover {
    background: linear-gradient(135deg, #e07d00, #c86e00) !important;
    box-shadow: 0 4px 14px rgba(243,146,0,.45);
    transform: translateY(-1px);
}

/* Fullscreen overlay backdrop */
.schnellrechnung-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.55);
    z-index: 9000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px;
    overflow-y: auto;
}
.schnellrechnung-overlay.hidden {
    display: none !important;
}

/* Modal card */
.schnellrechnung-modal {
    background: #fff;
    border-radius: var(--radius-xl);
    box-shadow: 0 24px 80px rgba(0,0,0,.28);
    width: 100%;
    max-width: 780px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: srModalIn .2s ease;
}
@keyframes srModalIn {
    from { opacity: 0; transform: translateY(-20px) scale(.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Modal header */
.schnellrechnung-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: linear-gradient(90deg, var(--blue-900), var(--blue-700));
    color: #fff;
}

/* Modal scrollable body */
.schnellrechnung-body {
    padding: 10px 14px;
    overflow-y: auto;
    max-height: calc(100vh - 160px);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Section cards within body */
.schnellrechnung-section {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    border-radius: var(--radius-md);
    padding: 10px 12px;
}

/* Totals box */
.schnellrechnung-totals {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius-md);
    padding: 10px 14px;
}

/* Footer button bar */
.schnellrechnung-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    gap: 8px;
    flex-wrap: wrap;
}

/* Payment radio buttons */
.sr-payment-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: #374151;
    background: #fff;
    transition: all .15s;
    user-select: none;
    white-space: nowrap;
}
.sr-payment-btn:hover {
    border-color: var(--blue-700);
    color: var(--blue-900);
    background: #eff6ff;
}
.sr-payment-btn.sr-pay-active {
    border-color: var(--blue-900);
    background: var(--blue-900);
    color: #fff;
    box-shadow: 0 2px 8px rgba(30,60,110,.25);
}
.sr-payment-btn.sr-pay-active-bar   { border-color: #16a34a; background: #16a34a; color: #fff; }
.sr-payment-btn.sr-pay-active-twint { border-color: #7c3aed; background: #7c3aed; color: #fff; }
.sr-payment-btn.sr-pay-active-karte { border-color: #0369a1; background: #0369a1; color: #fff; }
.sr-payment-btn.sr-pay-active-rechnung { border-color: #d97706; background: #d97706; color: #fff; }

/* ── Schnellrechnung Quellen-Tabs (Freitext / Ersatzteil / Eig. Artikel) ── */
.sr-source-tabs {
    display: flex;
    gap: 3px;
    margin-bottom: 4px;
}
.sr-source-tab {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border: 1px solid #d1d5db;
    border-radius: 12px;
    background: #f9fafb;
    color: #6b7280;
    cursor: pointer;
    white-space: nowrap;
    line-height: 1.5;
    transition: background .12s, color .12s, border-color .12s;
}
.sr-source-tab:hover {
    background: #f0f4f8;
    border-color: #9ca3af;
    color: #374151;
}
.sr-source-tab-active {
    background: #002855;
    border-color: #002855;
    color: #fff;
}
.sr-source-tab-active:hover {
    background: #1e3c6e;
    border-color: #1e3c6e;
    color: #fff;
}

/* Position line rows in the table */
.sr-line-row {
    display: grid;
    grid-template-columns: 1fr 70px 60px 100px 70px 32px;
    gap: 4px;
    align-items: start;  /* start statt center, damit Quellen-Tabs oben ausgerichtet sind */
    margin-bottom: 6px;
}
.sr-line-row input {
    padding: 6px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 12px;
    width: 100%;
    background: #fff;
    /* Vertikaler Offset: Quellen-Tab-Höhe (~22px) + Gap (4px) ausgleichen */
    margin-top: 26px;
}
/* 1. Kind (Beschreibungs-Div) braucht keinen Offset — hat eigene Tab-Zeile */
.sr-line-row > div:first-child > input {
    margin-top: 0;
}
.sr-line-row input:focus {
    outline: none;
    border-color: var(--blue-600);
    box-shadow: var(--focus);
}
.sr-line-row input[type="number"] {
    text-align: right;
}
.sr-line-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: #ef4444;
    cursor: pointer;
    border-radius: 50%;
    font-size: 14px;
    transition: background .12s;
    flex-shrink: 0;
    margin-top: 26px; /* Quellen-Tab-Offset */
}
.sr-line-remove:hover { background: #fee2e2; }

/* Item autocomplete dropdown for SR lines */
.sr-item-dropdown {
    position: absolute;
    z-index: 9999;
    background: #fff;
    border: 1px solid #d1d5db;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.14);
    max-height: 260px;
    overflow-y: auto;
    min-width: 340px;
}
.sr-item-dropdown-item {
    padding: 6px 10px;
    cursor: pointer;
    font-size: 12px;
    border-bottom: 1px solid #f3f4f6;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}
.sr-item-dropdown-item:last-child { border-bottom: none; }
.sr-item-dropdown-item:hover { background: #eff6ff; }
.sr-item-dropdown-img {
    width: 36px;
    height: 36px;
    object-fit: cover;
    border-radius: 4px;
    flex-shrink: 0;
    border: 1px solid #e5e7eb;
    display: block;
}
.sr-item-dropdown-img-placeholder {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    flex-shrink: 0;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    border: 1px solid #e5e7eb;
}
.sr-item-dropdown-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; overflow: hidden; }
.sr-item-dropdown-item .sr-item-id { font-weight: 700; color: #1e3c6e; font-size: 11px; }
.sr-item-dropdown-item .sr-item-name { color: #374151; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sr-item-dropdown-item .sr-item-price { color: #16a34a; font-weight: 600; white-space: nowrap; margin-left: auto; flex-shrink: 0; }
/* Article badge shown in line row after item is selected */
.sr-item-selected-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: #dbeafe;
    color: #1e40af;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 700;
    padding: 2px 6px;
    line-height: 1.4;
}
.sr-item-selected-badge .sr-badge-clear {
    cursor: pointer;
    color: #93c5fd;
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
}
.sr-item-selected-badge .sr-badge-clear:hover { color: #1e40af; }

/* Spinner shown in action buttons while loading */
.sr-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255,255,255,.4);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin .6s linear infinite;
    vertical-align: middle;
    margin-right: 4px;
}
.sr-spinner-dark {
    border-color: rgba(30,60,110,.3);
    border-top-color: var(--blue-900);
}

@media (max-width: 640px) {
    .schnellrechnung-modal { border-radius: var(--radius-lg); }
    .schnellrechnung-body { padding: 14px 14px; max-height: calc(100vh - 180px); }
    .schnellrechnung-header { padding: 14px 16px; }
    .schnellrechnung-footer { padding: 10px 14px; }
    .sr-line-row {
        grid-template-columns: 1fr 55px 50px 80px 55px 28px;
        gap: 3px;
    }
    .sr-payment-btn { padding: 7px 12px; font-size: 12px; }
}
/* Schnellrechnung: Vollbild auf kleinen Phones */
@media (max-width: 479px) {
    .schnellrechnung-overlay {
        padding: 0;
        align-items: flex-start;
    }
    .schnellrechnung-modal {
        border-radius: 0;
        min-height: 100svh;
        min-height: 100vh;
        max-width: 100vw;
    }
    .schnellrechnung-body {
        max-height: calc(100vh - 126px);
        padding: 10px 12px;
    }
    .schnellrechnung-header { padding: 12px 14px; }
    .schnellrechnung-footer {
        padding: 8px 12px;
        flex-wrap: wrap;
        gap: 6px;
    }
    .schnellrechnung-footer .btn {
        flex: 1 1 auto;
        justify-content: center;
        min-height: 44px;
    }
    .sr-line-row {
        grid-template-columns: 1fr 46px 42px 68px 42px 26px;
        gap: 2px;
    }
    .sr-payment-btns { flex-wrap: wrap; }
    .sr-payment-btn { flex: 1 1 auto; min-height: 40px; justify-content: center; font-size: 11px; }
}
/* Touch-freundliche Schnellrechnung-Inputs auf mobilen Geräten */
@media (hover: none) and (pointer: coarse) {
    .sr-line-row input { min-height: 40px; font-size: 15px; }
    .sr-item-dropdown-item { padding: 10px 12px; min-height: 52px; }
    .schnellrechnung-footer .btn { min-height: 48px; font-size: 14px; }
}

@keyframes slideInRight { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:translateX(0); } }

/* Angebots-Zusatzverkauf: kompakt zwischen Positionen und Totals. */
.offer-cross-sell-panel { margin:14px 0;padding:12px;border:1px solid #f5c56b;border-left:4px solid #f39200;border-radius:10px;background:#fffaf0; }
.offer-cross-sell-head { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px; }
.offer-cross-sell-head strong { color:#17375e;font-size:14px;margin-right:10px; }
.offer-cross-sell-head span { color:#64748b;font-size:12px; }
.offer-cross-sell-grid { display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:8px; }
.offer-cross-sell-card { display:grid;grid-template-columns:48px minmax(0,1fr) auto;gap:9px;align-items:center;background:#fff;border:1px solid #ead9b8;border-radius:8px;padding:8px; }
.offer-cross-sell-card img { width:48px;height:48px;object-fit:contain;border-radius:6px;background:#f8fafc; }
.offer-cross-sell-copy { min-width:0;display:flex;flex-direction:column;gap:2px; }
.offer-cross-sell-copy b { color:#f39200;font-size:12px; }
.offer-cross-sell-copy span { color:#27364a;font-size:12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.offer-cross-sell-copy small { color:#64748b;font-size:11px; }
.offer-cross-sell-actions { display:flex;gap:5px;white-space:nowrap; }
.offer-cross-sell-loading { color:#64748b;font-size:12px;padding:4px; }
@media (max-width:760px) { .offer-cross-sell-card{grid-template-columns:40px minmax(0,1fr)} .offer-cross-sell-actions{grid-column:1/-1;justify-content:flex-end} }

/* ===== Email Thread / Conversation View ===== */
.email-thread {
    border: 1px solid var(--border);
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    margin-bottom: 10px;
}
.email-thread-header {
    background: #f9fafb;
    padding: 9px 12px;
    border-bottom: 1px solid var(--border);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    user-select: none;
    transition: background 0.15s;
}
.email-thread-header:hover { background: #f3f4f6; }
.email-thread-subject {
    font-weight: 600;
    font-size: 13px;
    color: #374151;
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.email-thread-meta {
    font-size: 11px;
    color: #9ca3af;
    flex-shrink: 0;
    display: flex;
    gap: 8px;
    align-items: center;
}
.email-thread-count {
    background: #e5e7eb;
    color: #6b7280;
    border-radius: 10px;
    padding: 1px 8px;
    font-size: 11px;
    font-weight: 500;
}
.email-thread-toggle { font-size: 10px; color: #9ca3af; transition: transform 0.15s; }
.email-thread-messages {
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.email-bubble {
    max-width: 84%;
    padding: 8px 12px;
    border-radius: 12px;
    font-size: 12px;
    word-break: break-word;
}
.email-bubble.outbound {
    align-self: flex-end;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-bottom-right-radius: 3px;
}
.email-bubble.inbound {
    align-self: flex-start;
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-bottom-left-radius: 3px;
}
.email-bubble-meta {
    font-size: 11px;
    color: #374151;
    margin-bottom: 4px;
    font-weight: 600;
}
.email-bubble-body {
    font-size: 12px;
    color: #4b5563;
    line-height: 1.45;
}
.email-body-full {
    font-size: 12px;
    color: #374151;
    line-height: 1.5;
    max-height: 380px;
    overflow-y: auto;
    border-top: 1px solid rgba(0,0,0,0.06);
    margin-top: 6px;
    padding-top: 6px;
}
.email-body-html {
    font-size: 12px;
    max-height: 360px;
    overflow-y: auto;
}
.email-body-html img { max-width: 100%; height: auto; }
.email-bubble-footer {
    font-size: 10px;
    color: #9ca3af;
    margin-top: 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.email-bubble-expand {
    font-size: 11px;
    color: var(--primary, #3b82f6);
    cursor: pointer;
    background: none;
    border: none;
    padding: 0;
    text-decoration: underline;
    white-space: nowrap;
}
.email-bubble-expand:hover { opacity: 0.75; }
@media (max-width: 640px) {
    .email-bubble { max-width: 95%; }
    .email-thread-subject { font-size: 12px; }
}

/* ══════════════════════════════════════════════════════════════
   CMD+K UNIVERSALSUCHE
══════════════════════════════════════════════════════════════ */
#cmdkModal.modal-overlay {
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(4px);
    align-items: flex-start;
    padding-top: 12vh;
}
.cmdk-panel {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    width: 100%;
    max-width: 560px;
    overflow: hidden;
    animation: cmdkIn .15s cubic-bezier(.17,.67,.3,1.25);
}
@keyframes cmdkIn {
    from { opacity:0; transform:scale(.95) translateY(-8px); }
    to   { opacity:1; transform:scale(1)   translateY(0); }
}
.cmdk-search-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 16px;
}
.cmdk-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 16px;
    color: #111827;
    background: transparent;
}
.cmdk-input::placeholder { color: #9ca3af; }
.cmdk-esc {
    font-size: 11px;
    color: #9ca3af;
    border: 1px solid #e5e7eb;
    border-radius: 5px;
    padding: 2px 7px;
    cursor: pointer;
    user-select: none;
    flex-shrink: 0;
}
.cmdk-divider { border: none; border-top: 1px solid #f3f4f6; margin: 0; }
.cmdk-results { max-height: 340px; overflow-y: auto; }
.cmdk-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    cursor: pointer;
    border-bottom: 1px solid #f9fafb;
    transition: background .1s;
    outline: none;
}
.cmdk-item:hover, .cmdk-item:focus { background: #f3f4f6; }
.cmdk-type-icon { font-size: 18px; flex-shrink: 0; }
.cmdk-item-text { flex: 1; min-width: 0; }
.cmdk-item-label { font-size: 14px; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-item-sub { font-size: 12px; color: #9ca3af; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cmdk-badge {
    font-size: 10px;
    background: #e5e7eb;
    color: #6b7280;
    border-radius: 8px;
    padding: 2px 8px;
    flex-shrink: 0;
    text-transform: uppercase;
    letter-spacing: .3px;
    font-weight: 600;
}
.cmdk-empty, .cmdk-loading {
    padding: 24px 16px;
    text-align: center;
    font-size: 13px;
    color: #9ca3af;
}
.cmdk-footer {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px 16px;
    border-top: 1px solid #f3f4f6;
    font-size: 11px;
    color: #9ca3af;
    background: #f9fafb;
}
.cmdk-footer kbd {
    background: #e5e7eb;
    border-radius: 4px;
    padding: 1px 5px;
    font-family: monospace;
    font-size: 10px;
    color: #374151;
}
.cmdk-trigger { display: inline-flex; }
@media (max-width: 640px) {
    .cmdk-panel { max-width: 96vw; border-radius: 10px; }
    .cmdk-input { font-size: 14px; }
    .cmdk-footer { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   WIN/LOSS SCORE BADGE
══════════════════════════════════════════════════════════════ */
.pipeline-win-score {
    font-size: 10px;
    font-weight: 700;
    border-radius: 8px;
    padding: 1px 6px;
    margin-left: 4px;
    vertical-align: middle;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════
   LETZTER KONTAKT - erweitert
══════════════════════════════════════════════════════════════ */
.pipeline-lastcontact.contact-ok {
    background: #dcfce7;
    color: #166534;
    border-color: #86efac;
}

/* ══════════════════════════════════════════════════════════════
   NOTIFICATION CENTER (falls noch nicht vorhanden)
══════════════════════════════════════════════════════════════ */
.notification-bell-wrapper { position: relative; display: inline-flex; }
.notification-bell { position: relative; }
.notification-badge {
    position: absolute;
    top: -4px;
    right: -4px;
    background: #ef4444;
    color: #fff;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    border: 2px solid var(--primary, #1e3c6e);
    pointer-events: none;
}
.notification-badge.badge-high { background: #dc2626; animation: pulse-overdue 1.5s infinite; }
.notification-dropdown {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 340px;
    max-width: 94vw;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.15);
    z-index: 9000;
    overflow: hidden;
}
.notification-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid #f3f4f6;
    font-weight: 600;
    font-size: 13px;
}
.notification-list { max-height: 360px; overflow-y: auto; }
.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid #f9fafb;
    transition: background .1s;
}
.notification-item:hover { background: #f9fafb; }
.notification-item.notification-high { border-left: 3px solid #ef4444; }
.notification-item.notification-medium { border-left: 3px solid #f59e0b; }
.notification-item.notification-low { border-left: 3px solid #10b981; }
.notif-icon { font-size: 18px; flex-shrink: 0; }
.notif-content { flex: 1; min-width: 0; }
.notif-title { font-size: 13px; font-weight: 600; color: #111827; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.notif-message { font-size: 12px; color: #6b7280; margin-top: 2px; }
.notif-days { font-size: 11px; font-weight: 700; color: #dc2626; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   PIPELINE QUICKLOG HOVER OVERLAY (Feature 3)
══════════════════════════════════════════════════════════════ */
.pipeline-card { position: relative; }
.pipeline-quicklog-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 30, 60, 0.92);
    border-radius: inherit;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.18s ease;
    z-index: 10;
    padding: 6px;
}
.pipeline-card:hover .pipeline-quicklog-overlay {
    opacity: 1;
    pointer-events: auto;
}
.pipeline-quicklog-overlay .ql-row {
    display: flex;
    flex-direction: column;
    gap: 3px;
    width: 100%;
}
.ql-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 7px;
    padding: 4px 8px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 5px;
    color: #fff;
    cursor: pointer;
    font-size: 11px;
    font-weight: 500;
    transition: background 0.12s;
    min-width: 0;
    width: 100%;
    text-align: left;
    line-height: 1.3;
}
.ql-btn:hover { background: rgba(255,255,255,0.22); transform: none; }
.ql-btn .ql-icon { font-size: 13px; line-height: 1; flex-shrink: 0; width: 16px; text-align: center; }
.ql-btn .ql-label { font-size: 11px; color: rgba(255,255,255,0.9); }
.ql-btn-primary { background: rgba(99,179,237,0.25); border-color: rgba(99,179,237,0.45); }
.ql-btn-primary:hover { background: rgba(99,179,237,0.45); }

/* ── Sub-Angebot Bar ───────────────────────────────────────── */
.sub-quotation-bar {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 16px 4px;
    background: rgba(99,179,237,0.06);
    border-bottom: 1px solid rgba(99,179,237,0.15);
    font-size: 12px;
}
.sqb-label {
    color: var(--muted, #9ca3af);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.03em;
    margin-right: 2px;
    white-space: nowrap;
}
.sqb-chip {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.15);
    color: var(--text, #e2e8f0);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s;
    white-space: nowrap;
    font-family: inherit;
}
.sqb-chip:hover { background: rgba(99,179,237,0.2); border-color: rgba(99,179,237,0.4); }
.sqb-chip.sqb-active {
    background: rgba(99,179,237,0.22);
    border-color: rgba(99,179,237,0.55);
    color: #93c5fd;
    font-weight: 600;
    pointer-events: none;
}
.sqb-chip.sqb-parent {
    background: rgba(139,92,246,0.12);
    border-color: rgba(139,92,246,0.3);
    color: #c4b5fd;
}
.sqb-chip.sqb-parent:hover { background: rgba(139,92,246,0.25); border-color: rgba(139,92,246,0.5); }

/* ── Follow-Up Datums-Picker Popup ─────────────────────────── */
.fu-picker-popup {
    background: #1a2d40;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 10px;
    padding: 10px;
    min-width: 168px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.55);
    font-family: inherit;
}
.fu-picker-title {
    font-size: 10px;
    color: rgba(255,255,255,0.45);
    margin-bottom: 5px;
    padding: 0 2px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.fu-picker-sep {
    border-top: 1px solid rgba(255,255,255,0.1);
    margin: 7px 0;
}
.fu-pick-btn {
    display: block;
    width: 100%;
    text-align: left;
    padding: 5px 8px;
    background: rgba(255,255,255,0.06);
    border: 1px solid transparent;
    border-radius: 5px;
    color: #e8f0fe;
    cursor: pointer;
    font-size: 12px;
    margin-bottom: 3px;
    transition: background 0.1s;
    font-family: inherit;
}
.fu-pick-btn:last-child { margin-bottom: 0; }
.fu-pick-btn:hover { background: rgba(255,255,255,0.16); }
.fu-pick-ok {
    display: inline-block;
    width: auto;
    padding: 4px 10px;
    background: rgba(99,179,237,0.25);
    border: 1px solid rgba(99,179,237,0.45);
    border-radius: 5px;
    color: #93c5fd;
    cursor: pointer;
    font-size: 12px;
    margin-bottom: 0;
    font-family: inherit;
    flex-shrink: 0;
}
.fu-pick-ok:hover { background: rgba(99,179,237,0.42); }
.fu-date-input {
    flex: 1;
    font-size: 11px;
    background: #263548;
    color: #e8f0fe;
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 5px;
    padding: 4px 6px;
    font-family: inherit;
    min-width: 0;
}
.fu-date-input:focus { outline: none; border-color: rgba(99,179,237,0.6); }

/* ══════════════════════════════════════════════════════════════
   BULK SELECTION (Feature 4)
══════════════════════════════════════════════════════════════ */
.pipeline-card.bulk-mode { cursor: default; }
.pipeline-card.bulk-mode:hover .pipeline-quicklog-overlay { opacity: 0; pointer-events: none; }
.pipeline-card-checkbox {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 20px;
    height: 20px;
    border-radius: 4px;
    border: 2px solid #94a3b8;
    background: #fff;
    display: none;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 15;
    transition: border-color .15s, background .15s;
}
body.bulk-active .pipeline-card-checkbox { display: flex; }
body.bulk-active .pipeline-card { cursor: pointer; }
body.bulk-active .pipeline-card:hover .pipeline-quicklog-overlay { opacity: 0; pointer-events: none; }
.pipeline-card.bulk-selected {
    outline: 2px solid #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.25);
}
.pipeline-card.bulk-selected .pipeline-card-checkbox {
    background: #3b82f6;
    border-color: #3b82f6;
}
.pipeline-card.bulk-selected .pipeline-card-checkbox::after {
    content: '✓';
    color: #fff;
    font-size: 13px;
    font-weight: 700;
}

/* Floating bulk action bar */
.bulk-bar {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    background: #1e3c6e;
    color: #fff;
    border-radius: 16px;
    padding: 12px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.35);
    z-index: 9500;
    transition: transform 0.25s cubic-bezier(.34,1.56,.64,1);
    white-space: nowrap;
}
.bulk-bar.bulk-bar-visible {
    transform: translateX(-50%) translateY(0);
}
.bulk-bar-count {
    font-size: 14px;
    font-weight: 700;
    min-width: 80px;
}
.bulk-bar-sep { width: 1px; height: 24px; background: rgba(255,255,255,.25); }
.bulk-bar button {
    background: rgba(255,255,255,0.15);
    border: 1px solid rgba(255,255,255,0.25);
    color: #fff;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s;
}
.bulk-bar button:hover { background: rgba(255,255,255,0.28); }
.bulk-bar-cancel { background: transparent !important; border-color: rgba(255,255,255,0.15) !important; }

/* Stage picker popup */
.bulk-stage-picker {
    position: fixed;
    bottom: 80px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    z-index: 9600;
    padding: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 380px;
    justify-content: center;
}
.bulk-stage-option {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background .12s;
}
.bulk-stage-option:hover { background: #e0e7ff; border-color: #6366f1; color: #4338ca; }

/* ══════════════════════════════════════════════════════════════
   ANGEBOTS-PREVIEW MODAL (Feature 5)
══════════════════════════════════════════════════════════════ */
.offer-preview-modal {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 10000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 20px;
}
.offer-preview-inner {
    background: #fff;
    border-radius: 12px;
    width: 100%;
    max-width: 900px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 16px 64px rgba(0,0,0,.35);
}
.offer-preview-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 20px;
    border-bottom: 1px solid #e5e7eb;
    flex-shrink: 0;
}
.offer-preview-header h2 { font-size: 16px; font-weight: 700; margin: 0; }
.offer-preview-actions { display: flex; gap: 8px; }
.offer-preview-body {
    flex: 1;
    overflow-y: auto;
    padding: 0;
}
.offer-preview-body iframe {
    width: 100%;
    height: 100%;
    border: none;
    min-height: 600px;
}
/* Inline preview styling */
.offer-preview-content {
    padding: 32px 40px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 13px;
    color: #111;
}
.offer-preview-logo {
    font-size: 22px;
    font-weight: 900;
    color: #1e3c6e;
    letter-spacing: 2px;
    margin-bottom: 24px;
}
.offer-preview-addresses {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 28px;
}
.offer-preview-address-block h3 { font-size: 11px; color: #6b7280; text-transform: uppercase; letter-spacing: 1px; margin: 0 0 6px; }
.offer-preview-address-block p { margin: 0; line-height: 1.6; }
.offer-preview-title { font-size: 18px; font-weight: 700; color: #1e3c6e; margin: 0 0 6px; }
.offer-preview-subtitle { font-size: 13px; color: #6b7280; margin: 0 0 24px; }
.offer-preview-table { width: 100%; border-collapse: collapse; margin-bottom: 20px; }
.offer-preview-table th { background: #1e3c6e; color: #fff; padding: 8px 10px; font-size: 12px; text-align: left; }
.offer-preview-table td { padding: 8px 10px; border-bottom: 1px solid #f3f4f6; font-size: 13px; }
.offer-preview-table tr:hover td { background: #f9fafb; }
.offer-preview-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.offer-preview-total-row { background: #f0f4ff; }
.offer-preview-total-row td { font-weight: 700; font-size: 14px; }
.offer-preview-footer { font-size: 11px; color: #9ca3af; border-top: 1px solid #e5e7eb; padding-top: 16px; margin-top: 24px; }

/* ══════════════════════════════════════════════════════════════
   KAPAZITÄTS-AMPEL — Planung (Feature 6)
══════════════════════════════════════════════════════════════ */
.capacity-gauge {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    background: #f9fafb;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    font-size: 12px;
}
.capacity-gauge-label { color: #6b7280; font-weight: 500; white-space: nowrap; }
.capacity-bar {
    flex: 1;
    height: 10px;
    background: #e5e7eb;
    border-radius: 99px;
    overflow: hidden;
    min-width: 80px;
}
.capacity-fill {
    height: 100%;
    border-radius: 99px;
    transition: width 0.5s ease;
}
.capacity-fill.cap-ok { background: #10b981; }
.capacity-fill.cap-warn { background: #f59e0b; }
.capacity-fill.cap-critical { background: #ef4444; animation: pulse-overdue 1.5s infinite; }
.capacity-gauge-value { font-weight: 700; color: #374151; white-space: nowrap; font-size: 12px; }

/* ══════════════════════════════════════════════════════════════
   COCKPIT WIN-RATE + FUNNEL KPI (Feature 7)
══════════════════════════════════════════════════════════════ */
.kpi-card.kpi-winrate .kpi-value { color: #059669; }
.funnel-strip {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: #f0f4ff;
    border-radius: 8px;
    font-size: 12px;
    flex-wrap: wrap;
}
.funnel-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 52px;
}
.funnel-step-value { font-size: 16px; font-weight: 800; color: #1e3c6e; }
.funnel-step-label { font-size: 10px; color: #6b7280; text-align: center; }
.funnel-arrow { color: #94a3b8; font-size: 16px; }
.funnel-rate { font-size: 10px; font-weight: 700; color: #059669; }

/* Funnel in der dunklen Mein-Tag-Kopfzeile: kompakt + helle Schrift, füllt die Lücke */
.mein-tag-header .funnel-strip {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    flex: 0 0 auto;
    flex-wrap: nowrap;
    padding: 4px 10px;
}
.mein-tag-header .funnel-step { min-width: 44px; }
.mein-tag-header .funnel-step-value { color: #fff; font-size: 14px; }
.mein-tag-header .funnel-step-label { color: rgba(255,255,255,0.65); }
.mein-tag-header .funnel-arrow { color: rgba(255,255,255,0.4); font-size: 14px; }
.mein-tag-header .funnel-rate { color: #86efac; }

/* ══════════════════════════════════════════════════════════════
   OFFER PREVIEW PRINT
══════════════════════════════════════════════════════════════ */
@media print {
    body > *:not(.offer-preview-modal) { display: none !important; }
    .offer-preview-modal { position: static; padding: 0; background: #fff; }
    .offer-preview-inner { max-height: none; box-shadow: none; border-radius: 0; }
    .offer-preview-header { display: none; }
}

/* ══════════════════════════════════════════════════════════════
   VERLOREN-ANALYSE MODAL (Feature 3)
══════════════════════════════════════════════════════════════ */
.lost-reason-modal .modal { max-width: 480px; }
.lost-reason-options {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}
.lost-reason-btn {
    padding: 10px 12px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    background: #f9fafb;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: left;
    transition: all .15s;
    display: flex;
    align-items: center;
    gap: 8px;
}
.lost-reason-btn:hover { border-color: #6366f1; background: #eef2ff; }
.lost-reason-btn.selected { border-color: #1e3c6e; background: #1e3c6e; color: #fff; }
.lost-reason-extra { margin-top: 12px; }
.lost-reason-extra input, .lost-reason-extra textarea {
    width: 100%;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    margin-bottom: 8px;
}
.timing-row { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; font-size: 13px; }
.timing-row input[type=number] { width: 70px; }

/* ══════════════════════════════════════════════════════════════
   ANALYTICS DASHBOARD (Features 1, 3, 11, 12)
══════════════════════════════════════════════════════════════ */
.analytics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 16px;
}
.analytics-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 18px 20px;
}
.analytics-card-title {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #6b7280;
    font-weight: 600;
    margin-bottom: 14px;
}
.response-bar { display: flex; flex-direction: column; gap: 8px; }
.response-bar-row { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.response-bar-label { width: 80px; color: #6b7280; flex-shrink: 0; }
.response-bar-track { flex: 1; height: 8px; background: #f3f4f6; border-radius: 99px; overflow: hidden; }
.response-bar-fill { height: 100%; border-radius: 99px; }
.response-bar-val { width: 32px; text-align: right; font-weight: 700; color: #374151; }

/* Lost analysis chart */
.lost-chart { display: flex; flex-direction: column; gap: 10px; }
.lost-chart-row { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.lost-chart-label { width: 130px; color: #374151; flex-shrink: 0; font-size: 12px; }
.lost-chart-bar-track { flex: 1; height: 14px; background: #f3f4f6; border-radius: 99px; overflow: hidden; }
.lost-chart-bar-fill { height: 100%; background: #ef4444; border-radius: 99px; transition: width .5s; }
.lost-chart-pct { width: 36px; font-weight: 700; color: #374151; font-size: 12px; text-align: right; }
.lost-chart-top { font-size: 11px; color: #9ca3af; }

/* PLZ Heatmap table */
.plz-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.plz-table th { background: #f9fafb; padding: 8px 10px; text-align: left; font-weight: 600; color: #6b7280; font-size: 11px; text-transform: uppercase; border-bottom: 1px solid #e5e7eb; }
.plz-table td { padding: 8px 10px; border-bottom: 1px solid #f3f4f6; }
.plz-win-pill { padding: 2px 10px; border-radius: 99px; font-weight: 700; font-size: 12px; display: inline-block; }
.plz-win-high  { background: #dcfce7; color: #166534; }
.plz-win-mid   { background: #fef3c7; color: #92400e; }
.plz-win-low   { background: #fee2e2; color: #991b1b; }

/* Offer AI Score */
.ai-score-ring {
    width: 90px; height: 90px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center; flex-direction: column;
    font-size: 26px; font-weight: 900; margin: 0 auto 12px;
    border: 6px solid;
}
.ai-score-label { font-size: 13px; font-weight: 600; text-align: center; }
.ai-score-breakdown { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.ai-score-row { display: flex; justify-content: space-between; font-size: 12px; color: #6b7280; }
.ai-score-row strong { color: #374151; }
/* KI-Aktions-Tipps unter dem Score */
.ai-score-tips { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.ai-tip {
    font-size: 12px;
    color: #374151;
    background: #fffbeb;
    border-left: 3px solid #f59e0b;
    padding: 6px 10px;
    border-radius: 0 6px 6px 0;
    line-height: 1.4;
}
/* Drip-Status im Angebot */
.drip-status-bar {
    font-size: 12px;
    color: #6b7280;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    padding: 6px 10px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

/* NPS Dashboard */
.nps-score-big {
    font-size: 52px; font-weight: 900; text-align: center; margin: 8px 0;
}
.nps-score-big.nps-good  { color: #059669; }
.nps-score-big.nps-ok    { color: #d97706; }
.nps-score-big.nps-bad   { color: #dc2626; }
.nps-bar-row { display: flex; gap: 4px; align-items: flex-end; margin-top: 12px; }
.nps-score-bar { flex: 1; border-radius: 4px 4px 0 0; min-height: 4px; transition: height .5s; position: relative; }
.nps-score-bar:hover::after { content: attr(data-label); position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 10px; color: #374151; white-space: nowrap; }

/* ══════════════════════════════════════════════════════════════
   UPSELL SUGGESTION POPUP
══════════════════════════════════════════════════════════════ */
.upsell-popup {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #c7d2fe;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,.15);
    padding: 12px;
    z-index: 200;
}
.upsell-popup-title {
    font-size: 11px;
    font-weight: 700;
    color: #6366f1;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 8px;
}
.upsell-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 8px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 12px;
    gap: 8px;
}
.upsell-item:hover { background: #eef2ff; }
.upsell-item-name { flex: 1; font-weight: 500; color: #374151; }
.upsell-item-price { color: #6b7280; }
.upsell-item-add { color: #6366f1; font-weight: 700; font-size: 14px; }

/* WhatsApp / SMS buttons */
.quick-contact-btn {
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    text-decoration: none;
}
.btn-whatsapp { background: #25d366; border-color: #22c55e; color: #fff; }
.btn-sms      { background: #3b82f6; border-color: #2563eb; color: #fff; }
.btn-whatsapp:hover { background: #22c55e; }
.btn-sms:hover { background: #2563eb; }

/* Route Optimization */
.route-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: #4285f4;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
}
.route-btn:hover { background: #3367d6; }

/* ══════════════════════════════════════════════════════════════
   ANALYTICS TAB IN KENNZAHLEN
══════════════════════════════════════════════════════════════ */
.kenz-tab-bar {
    display: flex;
    gap: 4px;
    padding: 0 0 12px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.kenz-tab {
    padding: 6px 14px;
    border-radius: 8px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all .12s;
}
.kenz-tab.active { background: #1e3c6e; color: #fff; border-color: #1e3c6e; }

/* ===== Hilfe-Panel CSS ===== */
#helpPanel {
    font-family: -apple-system, Arial, sans-serif;
}
#helpPanel details > summary {
    list-style: none;
    user-select: none;
}
#helpPanel details > summary::-webkit-details-marker { display: none; }
#helpPanel details[open] summary {
    border-radius: 8px 8px 0 0;
    margin-bottom: 0;
}
@media (max-width: 480px) {
    #helpPanel { width: 100vw !important; }
}

/* ═══════════════════════════════════════════════════════════
   SCHNELLANGEBOT MODAL
   ═══════════════════════════════════════════════════════════ */

.sa-modal {
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,.22);
    width: 96vw;
    max-width: 1020px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

.sa-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
    background: #fff;
    flex-shrink: 0;
}

.sa-body {
    display: grid;
    grid-template-columns: 400px 1fr;
    flex: 1;
    overflow: hidden;
    min-height: 0;
}

.sa-left {
    padding: 18px 20px;
    overflow-y: auto;
    border-right: 1px solid var(--gray-200, #e5e7eb);
}

.sa-right {
    padding: 18px 20px;
    overflow-y: auto;
    background: #f9fafb;
}

.sa-section-title {
    font-size: 12px;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid #e5e7eb;
}

.sa-paste-box {
    width: 100%;
    height: 96px;
    font-size: 12px;
    line-height: 1.5;
    font-family: inherit;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    padding: 8px 10px;
    resize: vertical;
    color: #374151;
    background: #fff;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
.sa-paste-box:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,.12);
}
.sa-paste-box::placeholder { color: #9ca3af; font-size: 11px; }

.sa-divider {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0;
    font-size: 10px;
    font-weight: 600;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.sa-divider::before, .sa-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

.sa-search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    box-shadow: 0 4px 20px rgba(0,0,0,.12);
    z-index: 300;
    max-height: 200px;
    overflow-y: auto;
}
.sa-search-result {
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    border-bottom: 1px solid #f3f4f6;
    transition: background .1s;
}
.sa-search-result:last-child { border-bottom: none; }
.sa-search-result:hover { background: #eff6ff; }
.sa-search-account { font-size: 10px; color: #6b7280; margin-left: 8px; }
.sa-search-addr    { font-size: 10px; color: #9ca3af; margin-top: 1px; }
.sa-search-noresult { padding: 10px 12px; font-size: 12px; color: #9ca3af; }

.sa-fields-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px;
}
.sa-field-full { grid-column: 1 / -1; }
.sa-fields-grid label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 3px;
}
.sa-fields-grid .form-input {
    font-size: 12px;
    padding: 5px 8px;
    height: 30px;
}

/* Template Cards */
.sa-template-group { margin-bottom: 14px; }
.sa-template-group-title {
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 7px;
}
.sa-template-cards-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.sa-template-card {
    padding: 9px 13px;
    border: 2px solid #e5e7eb;
    border-radius: 7px;
    cursor: pointer;
    background: #fff;
    transition: border-color .13s, background .13s, box-shadow .13s;
}
.sa-template-card:hover {
    border-color: #93c5fd;
    background: #eff6ff;
}
.sa-template-card.sa-card-selected {
    border-color: #2563eb;
    background: #eff6ff;
    box-shadow: 0 0 0 2px rgba(37,99,235,.15);
}
.sa-template-card-name {
    font-size: 13px;
    font-weight: 600;
    color: #1f2937;
}
.sa-template-card-desc {
    font-size: 11px;
    color: #6b7280;
    margin-top: 2px;
}

/* Template Lines Preview */
.sa-lines-preview {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 7px;
    padding: 10px 13px;
    font-size: 12px;
}
.sa-lines-preview-title {
    font-size: 10px;
    font-weight: 700;
    color: #9ca3af;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}
.sa-line-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 3px 0;
    border-bottom: 1px solid #f3f4f6;
    font-size: 11px;
}
.sa-line-row:last-of-type { border-bottom: none; }
.sa-line-optional { opacity: .6; }
.sa-line-desc { flex: 1; color: #374151; }
.sa-line-qty  { color: #6b7280; white-space: nowrap; min-width: 20px; text-align: right; }
.sa-line-price { color: #111827; font-weight: 500; white-space: nowrap; min-width: 80px; text-align: right; }
.sa-line-total {
    text-align: right;
    padding-top: 7px;
    margin-top: 6px;
    border-top: 2px solid #e5e7eb;
    font-size: 12px;
    color: #1f2937;
}

.sa-loading {
    color: #9ca3af;
    font-size: 12px;
    padding: 6px 0;
    font-style: italic;
}

/* Footer */
.sa-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid #e5e7eb;
    background: #f9fafb;
    flex-shrink: 0;
}

/* Accent-Button (⚡ Schnellangebot in Anfrage-Actions) */
.btn.btn-accent {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #f59e0b;
    font-weight: 600;
}
.btn.btn-accent:hover {
    background: #fde68a;
    border-color: #d97706;
}

@media (max-width: 768px) {
    .sa-modal { max-height: 95vh; }
    .sa-body  { grid-template-columns: 1fr; }
    .sa-left  { border-right: none; border-bottom: 1px solid #e5e7eb; }
}

/* ── Schnellangebot Wizard Steps ────────────────────────────────────── */
.sa-wizard-header {
    display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap;
}
.sa-back-btn {
    background: none; border: 1px solid #d1d5db; border-radius: 5px; padding: 3px 9px;
    font-size: 12px; cursor: pointer; color: #374151; transition: background .12s; white-space: nowrap;
}
.sa-back-btn:hover { background: #f3f4f6; }
.sa-step-badge {
    font-size: 10px; background: #dbeafe; color: #1d4ed8; border-radius: 20px;
    padding: 2px 8px; font-weight: 600; white-space: nowrap;
}
.sa-wizard-title { font-size: 13px; font-weight: 700; color: #1f2937; flex: 1; }

/* Kategorie-Auswahl */
.sa-cat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.sa-cat-btn {
    display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 10px;
    background: #fff; border: 2px solid #e5e7eb; border-radius: 10px; cursor: pointer;
    text-align: center; transition: border-color .13s, background .13s, box-shadow .13s; width: 100%;
}
.sa-cat-btn:hover { border-color: #93c5fd; background: #eff6ff; box-shadow: 0 2px 8px rgba(37,99,235,.1); }
.sa-cat-icon { font-size: 22px; line-height: 1; }
.sa-cat-label { font-size: 12px; font-weight: 700; color: #1f2937; }
.sa-cat-desc  { font-size: 10px; color: #6b7280; }
.sa-cat-count { font-size: 10px; color: #9ca3af; margin-top: 2px; }

/* Template-Liste */
.sa-tpl-group-title {
    font-size: 10px; font-weight: 700; color: #9ca3af;
    text-transform: uppercase; letter-spacing: .5px; margin: 10px 0 5px;
}
.sa-tpl-list { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; }
.sa-tpl-btn {
    display: block; width: 100%; text-align: left; padding: 9px 13px;
    border: 2px solid #e5e7eb; border-radius: 7px; cursor: pointer;
    background: #fff; transition: border-color .13s, background .13s;
}
.sa-tpl-btn:hover   { border-color: #93c5fd; background: #eff6ff; }
.sa-tpl-btn.selected { border-color: #2563eb; background: #eff6ff; box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
.sa-tpl-name { font-size: 13px; font-weight: 600; color: #1f2937; }
.sa-tpl-desc { font-size: 11px; color: #6b7280; margin-top: 2px; }

/* Grössen-Grid */
.sa-size-grid { border-collapse: collapse; font-size: 12px; width: auto; margin-bottom: 4px; }
.sa-size-grid th {
    padding: 5px 10px; font-size: 11px; font-weight: 600; color: #6b7280;
    background: #f3f4f6; border: 1px solid #e5e7eb; white-space: nowrap;
}
.sa-size-cell {
    padding: 8px 12px; border: 2px solid #e5e7eb; text-align: center; cursor: pointer;
    font-size: 12px; font-weight: 500; color: #1f2937; white-space: nowrap;
    border-radius: 4px; transition: border-color .12s, background .12s;
}
.sa-size-cell:hover   { border-color: #93c5fd; background: #eff6ff; }
.sa-size-cell.selected { border-color: #2563eb; background: #dbeafe; font-weight: 700; box-shadow: 0 0 0 2px rgba(37,99,235,.15); }
.sa-size-cell.disabled { color: #d1d5db; cursor: default; border-color: #f3f4f6; font-size: 10px; }

/* KI-Hinweis */
.sa-ai-hint {
    background: #fefce8; border: 1px solid #fde047; border-radius: 6px;
    padding: 7px 10px; font-size: 12px; color: #713f12; margin-bottom: 10px;
}

/* Optionale Positionen */
.sa-optional-section { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e5e7eb; }
.sa-opt-line {
    display: flex; align-items: center; gap: 6px; padding: 4px 0;
    cursor: pointer; font-size: 11px;
}
.sa-opt-line input[type=checkbox] { flex-shrink: 0; }
.sa-opt-line .sa-line-price { white-space: nowrap; color: #6b7280; }

/* ===== Objekt-Vorschläge im Auftrags-Wizard ===== */
.owiz-loading {
    font-size: 12px; color: #6b7280; padding: 6px 0; font-style: italic;
}
.owiz-obj-sugg {
    margin-top: 8px;
    padding: 8px 10px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
}
.owiz-sugg-label {
    font-size: 12px; color: #0369a1; font-weight: 600; margin-bottom: 6px;
}
.owiz-chip-row {
    display: flex; flex-wrap: wrap; gap: 6px;
}
.owiz-obj-chip {
    display: flex; flex-direction: column; gap: 1px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #bae6fd;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    min-width: 110px; max-width: 210px;
}
.owiz-obj-chip:hover {
    background: #e0f2fe; border-color: #0284c7;
}
.owiz-obj-chip.owiz-chip-active {
    background: #0284c7; border-color: #0369a1; color: #fff;
}
.owiz-obj-chip.owiz-chip-active .owiz-chip-addr,
.owiz-obj-chip.owiz-chip-active .owiz-chip-date {
    color: rgba(255,255,255,0.82);
}
.owiz-chip-name {
    font-size: 13px; font-weight: 600;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.owiz-chip-addr {
    font-size: 11px; color: #6b7280;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.owiz-chip-date {
    font-size: 10px; color: #9ca3af;
}

/* ===== Laufblatt Notiz-Zeilen (Datum-Picker / Wer / Notiz) ===== */
.lb-notiz-row {
    display: grid;
    grid-template-columns: 140px 130px 1fr;
    gap: 4px 8px;
    margin-bottom: 4px;
}
/* Eigene Zelle fuer das Datum: die globale KW-Anzeige haengt sich als Geschwister
   hinter jedes input[type=date]. Ohne diese Zelle belegt sie im Grid eine eigene
   Spalte — dann rutscht "Wer" in die Angabe-Spalte und das mehrzeilige Feld in die
   140px-Spalte (Wer nicht mehr erfassbar, Notiz zweizeilig und unbrauchbar). */
.lb-notiz-row .lb-datum-zelle {
    min-width: 0;
}
.lb-notiz-row input,
.lb-notiz-row textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 4px 6px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 12px;
    font-family: inherit;
}
/* Notiz mehrzeilig: wächst mit Inhalt (Höhe via JS), kein manueller Resize-Griff */
.lb-notiz-row textarea.lb-notiz-text {
    resize: none;
    overflow: hidden;
    min-height: 28px;
    line-height: 1.35;
}
/* Mobile: Datum + Wer nebeneinander, Notiz über volle Breite & grösser/besser lesbar */
@media (max-width: 640px) {
    .lb-notiz-row {
        grid-template-columns: 1fr 1fr;
        gap: 6px;
        margin-bottom: 10px;
    }
    .lb-notiz-row .lb-notiz-text {
        grid-column: 1 / -1;
    }
    .lb-notiz-row input,
    .lb-notiz-row textarea {
        font-size: 16px;   /* >=16px verhindert Auto-Zoom auf iOS */
        padding: 9px 10px;
    }
    .lb-notiz-row textarea.lb-notiz-text {
        min-height: 48px;
    }
}

/* ===== VOR-ORT-MODUS (schlanke Baustellen-Ansicht) ===== */
.feld-mode {
    position: fixed;
    inset: 0;
    z-index: 4000;
    background: #eef3f8;
    display: flex;
    flex-direction: column;
    -webkit-tap-highlight-color: transparent;
}
.feld-mode.hidden { display: none; }
.feld-topbar {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #1e3c6e;
    color: #fff;
    padding: 12px 12px;
    padding-top: max(12px, env(safe-area-inset-top));
}
.feld-topbar-title {
    flex: 1;
    font-size: 17px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.feld-back, .feld-close {
    flex: 0 0 auto;
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    background: transparent; border: none; color: #fff;
    border-radius: 10px; cursor: pointer;
}
.feld-back:active, .feld-close:active { background: rgba(255,255,255,.15); }
.feld-body {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 14px;
    padding-bottom: max(24px, env(safe-area-inset-bottom));
}
.feld-search {
    display: flex; align-items: center; gap: 8px;
    background: #fff; border: 1px solid #d5dde8; border-radius: 12px;
    padding: 12px 14px; margin-bottom: 14px;
}
.feld-search svg { flex: 0 0 auto; color: #6b7280; }
.feld-search input {
    flex: 1; border: none; outline: none; font-size: 16px; background: transparent;
}
.feld-section-label {
    font-size: 12px; color: #6b7280; text-transform: uppercase;
    letter-spacing: .04em; margin: 14px 2px 8px; font-weight: 600;
    display: flex; align-items: center; gap: 6px;
}
.feld-card {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
    padding: 14px 16px; margin-bottom: 10px; cursor: pointer;
}
.feld-card:active { background: #f1f5fb; }
.feld-card.today { border-color: #b5d4f4; }
.feld-card-time { font-size: 12px; color: #185fa5; font-weight: 600; }
.feld-card-name { font-size: 17px; font-weight: 600; color: #1f2937; margin: 2px 0; }
.feld-card-sub { font-size: 13px; color: #6b7280; }
.feld-card-id { font-size: 12px; color: #94a3b8; margin-top: 2px; }
.feld-empty { text-align: center; color: #94a3b8; font-size: 14px; padding: 28px 12px; }
.feld-hub-head {
    background: #fff; border: 1px solid #e2e8f0; border-radius: 14px;
    padding: 16px; margin-bottom: 14px;
}
.feld-hub-id { font-size: 12px; color: #6b7280; }
.feld-hub-name { font-size: 20px; font-weight: 700; color: #1f2937; margin: 4px 0 3px; }
.feld-hub-addr { font-size: 14px; color: #4b5563; }
.feld-actions-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.feld-act {
    display: flex; flex-direction: column; align-items: center; gap: 6px;
    border-radius: 14px; padding: 16px 8px; text-decoration: none;
    font-size: 14px; font-weight: 600; cursor: pointer; border: none;
}
.feld-act svg { width: 26px; height: 26px; }
.feld-act.call { background: #e1f5ee; color: #0f6e56; }
.feld-act.navi { background: #e6f1fb; color: #185fa5; }
.feld-act[disabled] { opacity: .4; pointer-events: none; }
.feld-act:active { filter: brightness(.95); }
.feld-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.feld-tile {
    display: flex; flex-direction: column; align-items: center; gap: 8px;
    background: #fff; border: 1px solid #d5dde8; border-radius: 14px;
    padding: 22px 8px; font-size: 15px; font-weight: 600; color: #1f2937;
    cursor: pointer; text-align: center;
}
.feld-tile svg { width: 30px; height: 30px; color: #1e3c6e; }
.feld-tile:active { background: #f1f5fb; }
.feld-tile-hint { font-size: 11px; font-weight: 400; color: #94a3b8; }
#btnFeldMode { display: inline-flex; }

/* QW3: To-do-Banner beim Login */
.todo-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #fff8e1;
    border: 1px solid #e0b400;
    border-left: 4px solid #e0b400;
    border-radius: 10px;
    padding: 10px 14px;
    margin: 10px 14px 0;
    font-size: 14px;
    color: #7a5c00;
}
.todo-banner.hidden { display: none; }
.todo-banner .tb-text { flex: 1; }
.todo-banner .tb-text strong { color: #6b4e00; }
.todo-banner .tb-open {
    background: #b45309; color: #fff; border: none; border-radius: 8px;
    padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.todo-banner .tb-open:active { filter: brightness(.95); }
.todo-banner .tb-close {
    background: transparent; border: none; color: #7a5c00; font-size: 20px;
    cursor: pointer; line-height: 1; padding: 0 4px;
}

/* Rollen-Umschalter im Header */
.nav-role-switch {
    background: rgba(255,255,255,.15);
    color: #fff;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 8px;
    padding: 5px 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    margin-right: 4px;
    max-width: 130px;
}
.nav-role-switch option { color: #1f2937; background: #fff; }
@media (max-width: 600px) {
    .nav-role-switch { max-width: 96px; font-size: 12px; padding: 4px 6px; }
}


/* ── Kompakte Positionsansicht ──────────────────────────────────────────
   Eine Zeile je Position: Bild, Detailtext und Zusatznotizen aus, Titel auf eine
   Zeile gekuerzt. Nur Darstellung — es wird nichts umgebaut und nichts neu geladen,
   deshalb bleiben Eingabefelder und Aktionen voll benutzbar. */
.offer-blocks-compact .offer-line {
    padding-top: 4px;
    padding-bottom: 4px;
}
.offer-blocks-compact .offer-line-img,
.offer-blocks-compact .offer-line-img-placeholder,
.offer-blocks-compact .offer-line-details,
.offer-blocks-compact .offer-line-detail-images,
.offer-blocks-compact .offer-line-additional {
    display: none !important;
}
.offer-blocks-compact .offer-line-info {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
}
.offer-blocks-compact .offer-line-info > * {
    display: inline;
}
.offer-blocks-compact .offer-cat-subheader { padding-top: 3px; padding-bottom: 3px; }


/* ── Untermenue in der Registerkarten-Leiste ("Vor Ort") ─────────────────────
   Die Eintraege sind echte .tab-Buttons und behalten ihr data-tab — nur ihre
   Position wandert in eine Klappliste. Dadurch greifen showTab(), die
   Sichtbarkeitsregel und die einmalige Klickbindung unveraendert weiter. */
.tab-menu { position: relative; display: inline-block; }
.tab-menu-pfeil { font-size: 10px; opacity: .7; margin-left: 2px; }
.tab-menu-liste {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1200;
    min-width: 190px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    box-shadow: 0 10px 28px rgba(0,0,0,.14);
    padding: 4px;
}
.tab-menu.open .tab-menu-liste { display: block; }
.tab-menu-liste .tab {
    display: block;
    width: 100%;
    text-align: left;
    border: none;
    border-radius: 6px;
    margin: 0;
    white-space: nowrap;
}
.tab-menu-liste .tab:hover { background: #f1f5f9; }
/* Der Elternknopf zeigt an, dass einer seiner Eintraege aktiv ist — ohne ihn
   waere bei "Zufahrt" oben gar keine Registerkarte markiert. */
.tab-menu-btn.kind-aktiv { font-weight: 700; }


/* ── Technische Detailangaben einer Position ────────────────────────────────
   Wortgleich aus dem Angebotsbeleg uebernommen (ReportService), damit der
   Verkaeufer bei der Erfassung dasselbe sieht wie der Kunde spaeter. Vorher
   wurde derselbe Text hier zu einer Zeile "a | b | c" zusammengequetscht,
   waehrend der Beleg eine saubere Merkmal/Wert-Tabelle zeigte. */
.tech-detail { margin-top: 5px; font-size: 12.5px; }
.tech-detail table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;   /* gemeinsame Spaltenkante ueber alle Abschnitte */
    margin: 1px 0 5px;
}
.tech-detail td, .tech-detail th {
    padding: 2px 10px 2px 0;
    vertical-align: top;
    line-height: 1.35;
    text-align: left;
    /* Kein nowrap: bei fixer Spaltenbreite ragt ein langes Label sonst aus der
       Zelle und legt sich ueber den Wert. */
    word-break: normal;
    overflow-wrap: anywhere;
}
.tech-detail td:first-child, .tech-detail th:first-child { width: 190px; color: #5a6472; }
.tech-detail td + td { color: #1a1a1a; }
.tech-detail tr:nth-child(even) { background: #fafbfc; }
/* Abschnittstitel: NUR ein Absatz, der ausschliesslich aus fettem Text besteht.
   Bewusst eng gefasst — waere b/strong pauschal ein Block, risse jede inline
   gesetzte Fettung die Zeile auseinander. */
.tech-detail p > b:only-child, .tech-detail p > strong:only-child {
    display: block;
    margin: 9px 0 1px;
    font-size: 0.93em;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #0b2a5b;
}
.tech-detail p { margin: 2px 0; }
.tech-detail ul, .tech-detail ol { margin: 2px 0 5px 18px; padding: 0; }

/* Eingekappte Fassung: in der kompakten Positionsliste nur die ersten Zeilen. */
.offer-blocks-compact .tech-detail { display: none; }

/* Der Editor fuer denselben Text soll aussehen wie das Ergebnis. */
#lineAdditionalNotesRt.tech-detail { font-size: 12.5px; }


/* ===== Rechnungskarte: Angaben in themenbezogenen Spalten =====
   Vorher lief alles untereinander; die Karte wurde dadurch sehr hoch und die
   Aktionen standen hinter der Positionstabelle. Die Spalten klappen unter
   240px automatisch untereinander. */
.inv-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:10px; margin:8px 0; }
.inv-group { border:1px solid #e5e7eb; border-radius:8px; padding:8px 10px; background:#fff; }
.inv-group-t { font-size:11px; font-weight:700; color:#1e3c6e; text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.inv-row { display:flex; justify-content:space-between; align-items:baseline; gap:10px; padding:2px 0; font-size:12px; }
/* Kein nowrap: ein langes Label darf umbrechen statt sich ueber den Wert zu legen. */
.inv-row-l { color:#6b7280; flex:0 1 auto; }
.inv-row-v { text-align:right; font-weight:600; word-break:break-word; }
.inv-row-full { display:block; }
.inv-row-full .inv-row-v { display:block; text-align:left; font-weight:400; margin-top:2px; }
.inv-feld { margin-bottom:6px; }
.inv-feld > label { display:block; font-size:11px; color:#6b7280; font-weight:600; margin-bottom:2px; }
.inv-feld > .inline-edit { width:100%; box-sizing:border-box; }


/* Zweitwert unter der KPI-Kachel. Die Kacheln zeigen netto (so rechnet die
   Rechnungserstellung); brutto steht klein darunter, weil der Kunde diesen Betrag
   auf dem Beleg sieht. */
.kpi-sub { font-size:10px; color:#9ca3af; margin-top:1px; white-space:nowrap; }

/* Textwerte stehen direkt neben ihrem Label. Nur Betraege bleiben rechtsbuendig —
   dort hilft die Ausrichtung beim Vergleichen, bei Text trennt sie Label und Wert. */
.inv-row-text { justify-content:flex-start; gap:6px; }
.inv-row-text .inv-row-v { text-align:left; font-weight:600; }
.inv-row-text .inv-row-l::after { content:':'; }
.inv-row-text .payment-badges { display:inline-flex; }


/* ── Angebots-Titelleiste: Hauptaktion und Mehr-Menue ──────────────────────
   Die Leiste trug 14 gleichrangige Knoepfe. Jetzt traegt sie Speichern, den zum
   Status passenden naechsten Schritt und ein Menue - der Ablauf wird dadurch lesbar. */
.qbar-haupt {
    background: #003D7A;
    border-color: #003D7A;
    color: #fff;
}
.qbar-haupt:hover { background: #00509e; border-color: #00509e; }

.qbar-mehr { margin-left: 4px; }
.qbar-mehr-liste { min-width: 240px; right: 0; left: auto; }

.qbar-mehr-titel {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
    padding: 8px 10px 3px;
}
.qbar-mehr-titel:first-child { padding-top: 4px; }

/* Im Menue stehen die Knoepfe untereinander und linksbuendig - in der Leiste
   waren sie nebeneinander und schmal. */
.qbar-mehr-eintrag {
    display: block !important;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    border-radius: 6px;
    margin: 0;
    padding: 6px 10px;
    white-space: nowrap;
}
.qbar-mehr-eintrag:hover { background: #f1f5f9; }
/* Ausgeblendete Knoepfe bleiben ausgeblendet - die bestehende Logik setzt
   style.display="none", und das schlaegt die Klasse. */
.qbar-mehr-eintrag[style*="display: none"],
.qbar-mehr-eintrag[style*="display:none"] { display: none !important; }
/* Im Menue ist die Beschriftung immer sichtbar, auch wenn sie in der schmalen
   Leiste ausgeblendet waere. */
.qbar-mehr-eintrag .qbar-btn-label { display: inline !important; }


/* Aus der Auftragsleiste ins Aktionen-Menue verschobene Knoepfe: dort stehen sie
   untereinander und linksbuendig wie die uebrigen Eintraege. */
.obar-menue-eintrag {
    display: block !important;
    width: 100%;
    text-align: left;
    border: none;
    background: none;
    margin: 0;
}
.obar-menue-eintrag[style*="display: none"],
.obar-menue-eintrag[style*="display:none"] { display: none !important; }


/* ── Anruf-Karte in der Kundenakte ─────────────────────────────────────────
   Vier Felder nebeneinander, damit am Telefon nichts gescrollt oder geklickt
   werden muss. Auf schmalen Geraeten untereinander. */
.ko-anrufkarte {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 10px 0 14px;
}
.ko-ak-feld {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-left: 3px solid #003D7A;
    border-radius: 8px;
    padding: 9px 12px;
    font-size: 13px;
    min-width: 0;
}
.ko-ak-titel {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #94a3b8;
    margin-bottom: 3px;
}
.ko-ak-sub { font-size: 11px; color: #64748b; margin-top: 2px; }
.ko-ak-ja { color: #16a34a; font-weight: 600; }
.ko-ak-nein { color: #b45309; font-weight: 600; }
.ko-ak-leer { color: #94a3b8; }

@media (max-width: 1100px) {
    .ko-anrufkarte { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
    .ko-anrufkarte { grid-template-columns: 1fr; }
}


/* ── Prozessleiste: einheitlich in Angebot und Auftrag ─────────────────────
   Vorher zeigte der Auftrag Haekchen-Pillen oben rechts, das Angebot ein
   Status-Textfeld - zwei Darstellungsarten fuer dieselbe Frage. Jetzt beide
   gleich: links der Ablauf, rechts die Schnellanzeigen. */
.beleg-prozess-wrap { padding: 0 4px; }
.beleg-prozess {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 7px 10px;
    margin: 6px 0;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.bp-kette { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bp-stufe {
    font-size: 12px;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 12px;
    white-space: nowrap;
}
/* Erledigt und Aktuell erhalten ihre Farbe inline aus der Board-Palette
   (siehe BELEG_STUFEN in app.js) - hier steht nur der neutrale Grundzustand. */
.bp-offen    { background: #eef2f6; color: #94a3b8; }
.bp-aktuell  { box-shadow: 0 1px 3px rgba(0,0,0,.18); }
.bp-pfeil    { color: #cbd5e1; font-size: 13px; }
.bp-abbruch  {
    background: #fee2e2; color: #991b1b;
    font-size: 12px; font-weight: 700;
    padding: 2px 12px; border-radius: 12px;
}

.bp-marken { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.bp-marke {
    font-size: 11px;
    font-weight: 600;
    padding: 2px 9px;
    border-radius: 10px;
    white-space: nowrap;
    cursor: help;
}
.bp-ok    { background: #dcfce7; color: #166534; }
.bp-offen { background: #f1f5f9; color: #94a3b8; }

@media (max-width: 800px) {
    .beleg-prozess { flex-direction: column; align-items: flex-start; }
}


/* Einheitliche Status-Pille: gleiche Form in Liste, Karte und Beleg.
   Die Farbe kommt aus BELEG_FARBEN (app.js) und damit aus der Board-Palette. */
.beleg-pille {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 9px;
    border-radius: 11px;
    border: 1px solid transparent;
    white-space: nowrap;
    letter-spacing: .01em;
}
/* Foto-Schnellzugriff in Kundenakte und Auftrag */
.ko-inline-photo { border:1px solid #bfdbfe;background:#eff6ff;color:#1e40af;border-radius:999px;padding:2px 8px;font:inherit;font-weight:700;cursor:pointer;margin-left:auto; }
.ko-photo-primary { border-color:#60a5fa !important;background:#eff6ff !important;color:#1e40af !important;font-weight:700; }
.ko-foto-overlay { z-index:10000;padding:18px; }
.ko-foto-modal { width:min(1060px,calc(100vw - 36px));max-width:1060px;height:min(820px,calc(100vh - 36px));max-height:calc(100vh - 36px);padding:0;overflow:hidden;display:flex;flex-direction:column; }
.ko-foto-head { display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid #e5e7eb; }
.ko-foto-head h3 { margin:0;color:#082f57; }
.ko-foto-object { color:#64748b;font-size:12px;margin-top:2px; }
.ko-foto-close { border:0;background:#eef2f7;color:#334155;border-radius:50%;width:38px;height:38px;font-size:25px;line-height:1;cursor:pointer; }
.ko-foto-tabs { display:flex;gap:7px;align-items:center;padding:10px 14px;border-bottom:1px solid #e5e7eb;overflow-x:auto;background:#f8fafc; }
.ko-foto-tabs button,.ko-foto-tabs a { white-space:nowrap;border:1px solid #cbd5e1;background:#fff;color:#334155;border-radius:999px;padding:7px 12px;font-size:12px;font-weight:700;text-decoration:none;cursor:pointer; }
.ko-foto-tabs button.active { background:#082f57;color:#fff;border-color:#082f57; }
.ko-foto-tabs a { margin-left:auto; }
.ko-foto-body { flex:1;min-height:0;overflow-y:auto;background:#eef2f7; }
.ko-foto-loading,.ko-foto-empty { min-height:220px;display:flex;align-items:center;justify-content:center;gap:10px;color:#64748b;text-align:center;padding:24px; }
.ko-foto-error { color:#b91c1c; }
.ko-foto-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;padding:14px; }
.ko-foto-card { min-width:0;border:0;border-radius:10px;padding:0;overflow:hidden;background:#fff;box-shadow:0 1px 5px rgba(15,23,42,.12);cursor:pointer;text-align:left; }
.ko-foto-thumb { display:block;position:relative;aspect-ratio:4/3;background:#e5e7eb;overflow:hidden; }
.ko-foto-thumb img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover; }
.ko-foto-meta { display:flex;flex-direction:column;gap:2px;padding:8px 10px;min-width:0; }
.ko-foto-meta strong { color:#082f57;font-size:12px; }
.ko-foto-meta small { color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
@media (max-width:600px) {
    .ko-foto-overlay { padding:0; }
    .ko-foto-modal { width:100vw;max-width:none;height:100dvh;max-height:100dvh;border-radius:0; }
    .ko-foto-head { padding:12px 14px; }
    .ko-foto-tabs { padding:8px; }
    .ko-foto-tabs a { margin-left:0; }
    .ko-foto-grid { grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:7px; }
    .ko-foto-meta { padding:6px 7px; }
}
/* ===== Arbeitsmodus: Arbeitskorb, nächste Aktion und mobile Schnellleiste ===== */
.work-cockpit {
    background:#fff;border:1px solid #dbe4ef;border-radius:12px;overflow:hidden;
    box-shadow:0 2px 8px rgba(15,23,42,.06);
}
.work-cockpit-head {display:flex;align-items:center;justify-content:space-between;padding:10px 12px;background:#f8fafc;border-bottom:1px solid #e5e7eb;color:#002b57}
.work-cockpit-head>div {display:flex;align-items:baseline;gap:8px}
.work-cockpit-head span {font-size:11px;font-weight:500;color:#64748b}
.work-cockpit-list {display:grid;grid-template-columns:1fr 1fr}
.work-cockpit-row {display:grid;grid-template-columns:26px minmax(130px,1fr) minmax(130px,1.25fr) auto;align-items:center;gap:9px;padding:9px 11px;border:0;border-bottom:1px solid #eef2f7;background:#fff;text-align:left;color:#1e293b;cursor:pointer}
.work-cockpit-row:nth-child(odd) {border-right:1px solid #eef2f7}
.work-cockpit-row:hover {background:#eff6ff}
.work-cockpit-prio {width:23px;height:23px;display:grid;place-items:center;border-radius:50%;background:#fee2e2;color:#b91c1c;font-weight:800;font-size:11px}
.work-cockpit-main {min-width:0;display:flex;gap:6px;align-items:baseline}
.work-cockpit-main strong {color:#003b71;white-space:nowrap}
.work-cockpit-main span,.work-cockpit-reason {font-size:12px;color:#64748b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.work-cockpit-action {font-size:12px;font-weight:800;color:#075aa7;white-space:nowrap}
.work-cockpit-empty {padding:12px 16px;display:flex;gap:10px;color:#166534}
.work-cockpit-empty span {font-size:12px;color:#64748b}

.record-next-action {display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:10px 12px;background:linear-gradient(100deg,#eaf4ff,#f8fbff);border:1px solid #8fc4f1;border-left:5px solid #075aa7;border-radius:10px;box-shadow:0 2px 7px rgba(7,90,167,.08)}
.record-next-icon {width:34px;height:34px;display:grid;place-items:center;flex:0 0 auto;background:#fff;border:1px solid #bfdbfe;border-radius:50%;font-size:17px}
.record-next-copy {display:grid;min-width:0;flex:1}
.record-next-copy>span {font-size:10px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:#64748b}
.record-next-copy>strong {font-size:14px;color:#002b57}
.record-next-copy>small {font-size:11px;color:#64748b}
.quotation-next-action {margin:8px 14px}

.mobile-quick-bar {display:none}

@media (max-width:900px) {
    .work-cockpit-list {grid-template-columns:1fr}
    .work-cockpit-row:nth-child(odd) {border-right:0}
    .work-cockpit-row {grid-template-columns:25px minmax(105px,1fr) auto}
    .work-cockpit-reason {display:none}
}

@media (max-width:768px) {
    body:has(.mobile-quick-bar.is-visible) .app-content {padding-bottom:78px!important}
    .mobile-quick-bar.is-visible {position:fixed;z-index:10020;left:0;right:0;bottom:0;display:flex;align-items:stretch;justify-content:space-around;gap:2px;padding:6px max(6px,env(safe-area-inset-right)) calc(6px + env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left));background:rgba(255,255,255,.98);border-top:1px solid #cbd5e1;box-shadow:0 -5px 18px rgba(15,23,42,.16)}
    .mqb-item {min-width:0;flex:1;min-height:48px;border:0;border-radius:9px;background:transparent;color:#334155;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-decoration:none;font:inherit}
    .mqb-item>span {font-size:18px;line-height:1}
    .mqb-item>small {display:block;max-width:100%;font-size:9px;font-weight:700;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
    .mqb-item.mqb-primary {background:#003b71;color:#fff;box-shadow:0 2px 6px rgba(0,59,113,.28)}
    .record-next-action {margin:8px 0;padding:9px 10px}
    .record-next-copy small {display:none}
    .record-next-action>.btn {font-size:11px;padding:7px 9px}
    .quotation-next-action {margin:7px 4px}
}

/* The board owns horizontal scrolling. Its headers must not inherit the page
   toolbar offset, which pushes them down over cards at intermediate widths. */
#pipelineBoard {
    overflow-x: auto;
    align-items: stretch;
    scroll-snap-type: x proximity;
}
#pipelineBoard > .pipeline-column {
    flex: 1 0 160px;
    min-width: 160px;
    scroll-snap-align: start;
}
#pipelineBoard .pipeline-column-header {
    position: sticky;
    top: 0;
    flex-shrink: 0;
}
#pipelineBoard .pipeline-cards { max-height: none; }
.pipeline-density { display:flex; gap:4px; }
.pipeline-density [aria-pressed=true] { background:#003d7a; color:white; }
@media (min-width:768px) {
    #pipelineBoard { gap:6px; }
    #pipelineBoard .column-title { white-space:normal; overflow-wrap:anywhere; line-height:1.25; }
    #pipelineBoard .pipeline-column-header { gap:4px; min-height:48px; }
    #pipelineBoard:not([data-density=comfortable]) .pipeline-cards { padding:5px; }
    #pipelineBoard:not([data-density=comfortable]) .pipeline-card { padding:8px; min-width:0; }
    #pipelineBoard[data-density=comfortable] > .pipeline-column { flex-basis:240px; min-width:240px; }
}
@media (max-width: 767px) {
    #pipelineBoard > .pipeline-column {
        flex: 0 0 85vw;
        min-width: 85vw;
    }

    /* Handy: Touch-Scrollen im Board (14.10.2026). .pipeline-cards war hier ein eigener Scroll-Container
       (overflow-y:auto) mit overscroll-behavior:contain, aber ohne Höhenbegrenzung (max-height:none oben) —
       ein Wisch auf einer Karte blieb an diesem leeren Scroller hängen und wurde weder an die Seite
       (senkrecht) noch ans Board (waagrecht) weitergegeben. Jetzt: keine senkrechten Scroller in Spalten,
       senkrecht scrollt die Seite, waagrecht das Board. Drag & Drop bleibt (Android: langes Drücken). */
    #pipelineBoard {
        overflow-y: hidden;
        overscroll-behavior: auto;
    }
    #pipelineBoard > .pipeline-column,
    #pipelineBoard .pipeline-cards {
        overflow: visible;
        max-height: none;
        overscroll-behavior: auto;
    }
    #pipelineBoard .pipeline-card { touch-action: manipulation; }
    #pipelineBoard .pipeline-card.dragging { touch-action: none; }
}

/* Keep wide contract tables within their own scroll area, starting at the contract number. */
#viewServicevertraege { min-width: 0; max-width: 100%; }
#svTableContainer { min-width: 0; max-width: 100%; overflow-x: auto; box-sizing: border-box; }
#svContractsTable { min-width: 1450px; margin-left: 0; margin-right: 0; }
#svContractsTable th:first-child, #svContractsTable td:first-child { min-width: 20px; }
#svContractsTable th:nth-child(2), #svContractsTable td:nth-child(2) { min-width: 115px; }

/* Compact territory list, including global form-control overrides. */
#zpZipRateTable td { padding:3px 8px; line-height:1.25; }
#zpZipRateTable th { padding:6px 8px; }
#zpZipRateTable .zp-worker-select { height:28px; min-height:28px; padding:2px 6px; margin:0; }
#zpAreaFilters select { min-height:32px; padding:4px 8px; width:auto; }

.settings-panel.settings-wide { width:min(1120px,100vw); right:-1120px; }
.settings-panel.settings-wide.open { right:0; }
.settings-panel.settings-wide .settings-panel-tabs { flex-wrap:wrap; overflow:visible; }
#settingsCatalogBody { min-width:0; overflow:auto; }
#settingsCatalogBody .zp-table-container { overflow:auto; }

/* Settings are a normal application page, shared by menu and gear entry points. */
#viewEinstellungen { padding:20px; min-width:0; }
#viewEinstellungen #settingsPanel { position:static; width:100%; max-width:1440px; height:auto; min-height:65vh; margin:0 auto; right:auto; transform:none; transition:none; box-shadow:none; border:1px solid var(--border); border-radius:14px; display:grid; grid-template-columns:240px minmax(0,1fr); overflow:hidden; z-index:auto; }
#viewEinstellungen .settings-panel-header { grid-column:1/-1; padding:22px 24px; background:#fff; color:var(--blue-900,#07376b); border-bottom:1px solid var(--border); }
#viewEinstellungen h1 { font-size:26px; }
#viewEinstellungen .settings-panel-tabs { display:flex; flex-direction:column; flex-wrap:nowrap; padding:12px; gap:4px; overflow:visible; background:#f2f6fa; border-right:1px solid var(--border); border-bottom:0; align-self:stretch; }
#viewEinstellungen .settings-tab { text-align:left; white-space:normal; border-radius:7px; padding:10px 12px; border-bottom:0; }
#viewEinstellungen .settings-tab.active { background:#123f78; color:#fff; }
#viewEinstellungen .settings-panel-body { padding:22px; min-width:0; overflow:auto; }
@media(max-width:800px) {
 #viewEinstellungen { padding:10px; }
 #viewEinstellungen #settingsPanel { grid-template-columns:minmax(0,1fr); }
 #viewEinstellungen .settings-panel-tabs { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border-right:0; border-bottom:1px solid var(--border); }
 #viewEinstellungen .settings-panel-body { padding:12px; }
}

#viewAnfragen, #viewEinstellungen { max-width:100%; width:100%; box-sizing:border-box; }

#viewEnquiry .enquiry-actions { position:static; bottom:auto; margin:0 0 16px; padding:12px; background:#fff; border:1px solid var(--border); border-radius:10px; align-items:center; }
#viewEnquiry .enquiry-actions .btn { min-height:40px; padding:8px 14px; font-size:14px; box-shadow:none; }
@media(max-width:600px) { #viewEnquiry .enquiry-actions .btn { flex:1 1 140px; justify-content:center; } }

/* Uniform icons and label alignment for every settings area. */
#viewEinstellungen .settings-tab { display:flex; align-items:center; gap:10px; }
#viewEinstellungen .settings-tab-icon { flex:0 0 24px; width:24px; text-align:center; line-height:1.3; }

/* Main/sub-orders use the same grid, with a clear ERP relationship. */
.order-list-item.order-parent-row { border-left:4px solid var(--blue-700,#003878); margin-bottom:4px; }
.order-list-item.order-child-row { margin-left:calc(18px * var(--order-depth,1)); border-left:3px solid #b8cce3; background:#f8fbff; margin-top:4px; }
.order-relation { font-size:10px; line-height:1.4; color:#526b89; font-weight:600; margin-top:4px; overflow-wrap:anywhere; }
@media(max-width:700px) { .order-list-item.order-child-row { margin-left:10px; } }

.pipeline-order-search-row { display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px;padding:8px;background:#f8fafc;border-radius:6px; }
.pipeline-order-search-parent { border-left:4px solid var(--blue-700,#003878); }
.pipeline-order-search-child { margin-left:calc(18px * var(--order-depth,1));border-left:3px solid #b8cce3;background:#f0f6fc; }
.pipeline-order-search-row .order-relation { margin-top:0; }

/* Olmero compact review */
#viewOlmero .olm-toolbar{display:flex;flex-wrap:wrap;gap:8px;padding:12px;background:#f4f7fa;border:1px solid #dce5ee;border-radius:10px}#viewOlmero .olm-toolbar select,#viewOlmero .olm-toolbar input{height:34px;width:auto;max-width:220px;font-size:12px}#viewOlmero .olm-stat{cursor:pointer;border:1px solid #dce5ee;border-radius:10px;background:white;font:inherit}#viewOlmero .olm-stat:hover{border-color:#073b72;background:#eef5ff}#viewOlmero .olm-quick-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:12px 0}#viewOlmero .olm-tbl th{position:sticky;top:0;background:#edf3f9;z-index:1}#viewOlmero .olm-tbl td{padding:10px}

/* Keep the AB actions clear of the persistent unsaved-changes notice. */
body:has(#abOverlay) #tecAutosaveStatus {
    max-height: 96px;
    overflow-y: auto;
    box-sizing: border-box;
}
body:has(#tecAutosaveStatus) #abOverlay {
    padding-bottom: 120px;
}
body:has(#tecAutosaveStatus) #abOverlay > .modal-content {
    max-height: calc(100vh - 136px);
    max-height: calc(100dvh - 136px);
}
#abOverlay .modal-header,
#abOverlay .modal-footer { flex-shrink: 0; }
#abOverlay .modal-body { min-height: 0; }
#abOverlay .modal-footer { flex-wrap: wrap; }

/* Kachel-Aktionen auf Touch (14.10.2026, app.js «Kachel-Aktionen auf Touch»): kein Hover-Overlay unter dem
   Finger; erster Tipp öffnet eine Aktionsleiste in der anderen Bildschirmhälfte, zweiter Tipp öffnet die Kachel.
   Desktop (Maus) unverändert. */
@media (hover: none) {
    .pipeline-card:hover .pipeline-quicklog-overlay { opacity: 0; pointer-events: none; }
}
.pqs-touch .pipeline-card:hover .pipeline-quicklog-overlay { opacity: 0; pointer-events: none; }
.pipeline-card.pqs-aktiv { box-shadow: 0 0 0 3px #003d7a, 0 4px 14px rgba(0,61,122,.25); }
.pipeline-quick-sheet {
    position: fixed;
    left: 8px;
    right: 8px;
    z-index: 1500;
    max-height: 48vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    background: #0f1e3c;
    color: #fff;
    border-radius: 14px;
    padding: 12px 12px 14px;
    box-shadow: 0 10px 34px rgba(15,23,42,.38);
    box-sizing: border-box;
}
.pipeline-quick-sheet.pqs-unten { bottom: calc(8px + env(safe-area-inset-bottom, 0px)); }
.pipeline-quick-sheet.pqs-oben { top: calc(8px + env(safe-area-inset-top, 0px)); }
.pqs-titel { font-weight: 700; font-size: 15px; padding-right: 52px; line-height: 1.3; }
.pqs-hinweis { font-size: 12px; opacity: .75; margin: 2px 52px 10px 0; }
.pqs-schliessen {
    position: absolute; top: 6px; right: 6px; width: 48px; height: 48px;
    border: 0; border-radius: 10px; background: rgba(255,255,255,.12); color: #fff; font-size: 18px; cursor: pointer;
}
.pqs-knoepfe { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.pipeline-quick-sheet .ql-btn.pqs-btn {
    min-height: 48px; min-width: 48px; padding: 8px 12px; gap: 10px;
    border-radius: 10px; font-size: 15px; justify-content: flex-start;
}
.pipeline-quick-sheet .ql-btn.pqs-btn .ql-icon { font-size: 18px; width: 22px; }
.pipeline-quick-sheet .ql-btn.pqs-btn .ql-label { font-size: 15px; color: #fff; }
.pipeline-quick-sheet .ql-btn.pqs-oeffnen {
    grid-column: 1 / -1; justify-content: center; min-height: 52px;
    background: #2563eb; border-color: #2563eb; font-weight: 700;
}
@media (hover: none) and (pointer: coarse) {
    .pipeline-card-actions { gap: 8px; flex-wrap: wrap; }
}

/* Einheitlicher Belegkopf (15.10.2026): Anfrage, Angebot und Auftrag – Titel/Aktionen, Ablauf-Leiste und Reiter bleiben beim Scrollen oben */
.beleg-sticky-head { position: sticky; top: var(--app-header-h, 0px); z-index: 40; background: var(--card, #fff); padding-top: 4px; border-bottom: 1px solid var(--border, #e5e7eb); }
.beleg-sticky-head .beleg-prozess-wrap { margin: 4px 0 6px; }
#viewQuotation .beleg-sticky-head { background: var(--bg, #f8fafc); }
@media (max-width: 760px) { .beleg-sticky-head { position: static; } }
/* Beim Scrollen kompakter wie der Auftragskopf (16.10.2026) – nur wo der Kopf fix ist (nicht mobil) */
@media (min-width: 761px) {
  .beleg-sticky-head.is-stuck { box-shadow: 0 4px 10px rgba(15, 23, 42, .08); }
  .beleg-sticky-head.is-stuck .order-progress-sub, .beleg-sticky-head.is-stuck .bp-stufe small { display: none !important; }
  .beleg-sticky-head.is-stuck .order-progress-circle { width: 20px; height: 20px; font-size: 10px; }
  /* 19.10.2026: Hörmann-Hinweis beim Scrollen ausblenden – der fixe Kopf nahm sonst den halben Bildschirm ein */
  .beleg-sticky-head.is-stuck .hoer-status { display: none !important; }
}
/* Hörmann-Hinweis: Auswahl und Knopf auf einer Zeile statt je volle Breite */
.hoer-status select, .hoer-status .btn { width: auto !important; flex: 0 0 auto; margin: 0; }

/* ===== Volle Breite (16.10.2026): Ansichten nutzen die ganze verfügbare Seitenbreite ===== */
@media (min-width: 1200px) {
    section.view .card, section.view .form-container, section.view .list-container { max-width: none; }
    .content, .app-content { padding-left: 20px; padding-right: 20px; }
}
.auftraege-container > *:not(.auftraege-header) { max-width: none; }
#viewEnquiry { max-width: none; }
#viewServiceFakt { max-width: none; }   /* Service-Fakturierung volle Breite (16.10.2026) */
@media (min-width: 1400px) { .kpi-bar { max-width: none; } }
.kennzahlen-container > *:not(.kennzahlen-header) { max-width: none; }

/* Kennzahlen-Kacheln (16.10.2026): ganze Breite nutzen, Texte umbrechen statt abschneiden */
#orderKpiBar { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
#orderKpiBar .kpi-tile { min-width: 0; }
#orderKpiBar .kpi-sub, #orderKpiBar .kpi-label, #orderKpiBar .kpi-value { white-space: normal; overflow-wrap: anywhere; }
/* Kennzahlen-Kacheln flacher (16.10.2026): weniger Höhe, Nebenzeile einzeilig */
#orderKpiBar { gap: 6px; margin-bottom: 6px; }
#orderKpiBar .kpi-tile { padding: 6px 10px; }
#orderKpiBar .kpi-tile .kpi-value { font-size: 16px; line-height: 1.15; }
#orderKpiBar .kpi-tile .kpi-label { font-size: 10px; margin-top: 1px; }
#orderKpiBar .kpi-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 10px; }

/* Objektfotos (16.10.2026): Fenster nutzt den Platz (vorher erbte es align-items:center und alles stand in einer schmalen Spalte),
   mehr Fotos nebeneinander, Gruppen je Produkt-Ordner, Auswahl zum Einordnen */
.ko-foto-modal { width:min(1700px,calc(100vw - 36px)); max-width:none; height:calc(100vh - 36px); align-items:stretch; }
.ko-foto-modal > * { align-self:stretch; }
.ko-foto-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:10px; padding:10px 14px; }
.ko-foto-gruppe { padding:10px 14px 0; font-weight:700; color:#082f57; font-size:13px; }
.ko-foto-gruppe small { color:#64748b; font-weight:500; margin-left:6px; }
.ko-foto-card.ko-foto-sel { outline:3px solid #16a34a; outline-offset:-3px; }
.ko-foto-check { position:absolute; top:6px; left:6px; width:22px; height:22px; border-radius:6px; background:rgba(255,255,255,.92); border:2px solid #16a34a; color:#16a34a; font-weight:800; display:flex; align-items:center; justify-content:center; z-index:2; }

/* Grossansicht zoomen (16.10.2026) */
.sp-lightbox-img-wrap { overflow:hidden; touch-action:none; }
.sp-lightbox-img-wrap img.sp-lb-zoombar { transition:transform .08s ease-out; transform-origin:center center; user-select:none; -webkit-user-drag:none; }
.sp-lightbox-img-wrap img { cursor:zoom-in; }
.sp-lb-zoom { display:inline-flex; align-items:center; gap:4px; margin-left:16px; }
.sp-lb-zoom button { background:rgba(255,255,255,.15); color:#fff; border:1px solid rgba(255,255,255,.3); border-radius:6px; width:30px; height:28px; font-size:16px; cursor:pointer; line-height:1; }
.sp-lb-zoom button:hover { background:rgba(255,255,255,.3); }
.sp-lb-zoom span { color:#fff; font-size:12px; min-width:42px; text-align:center; }

/* Kassenverkauf: Preise inkl./exkl. MwSt erfassen (19.10.2026) */
.sr-vat-mode{display:inline-flex;border:1px solid #cbd5e1;border-radius:6px;overflow:hidden;font-size:12px}
.sr-vat-mode label{display:flex;align-items:center;gap:4px;padding:4px 9px;cursor:pointer;color:#475569;margin:0}
.sr-vat-mode label:has(input:checked){background:#1e3c6e;color:#fff;font-weight:600}
.sr-vat-mode input{margin:0;accent-color:#fff}

/* Aufträge-Leiste (19.10.2026): «＋ Neuer Auftrag» und «Daten-Copilot» wurden abgeschnitten/umgebrochen – Knöpfe behalten ihre Breite, die Suche nimmt den Rest, sonst Umbruch */
.auftraege-controls { flex-wrap: wrap; }
.auftraege-controls > button, .auftraege-controls > .btn { flex: 0 0 auto; white-space: nowrap; }
.auftraege-controls input[type="search"] { flex: 1 1 200px; }

/* Olmero kompakter (19.10.2026): Titel, Schnellreiter und Kennzahlen in einer Zeile; Sammelaktionen nur mit Auswahl → Tabelle rückt nach oben */
#viewOlmero .olm-head { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 8px; }
#viewOlmero .olm-head h2 { margin:0 6px 0 0; font-size:18px; }
#viewOlmero .olm-head .olm-quick-tabs { margin:0; }
#viewOlmero .olm-head .olm-stats { display:flex; gap:6px; margin:0 0 0 auto; padding:0; border:0; background:none; }
#viewOlmero .olm-head .olm-stat { display:inline-flex; align-items:baseline; gap:5px; padding:4px 10px; min-width:0; border-radius:999px; }
#viewOlmero .olm-head .olm-stat b { font-size:14px; }
#viewOlmero .olm-head .olm-stat span { font-size:11px; }
#viewOlmero .olm-toolbar { padding:8px; gap:6px; margin-bottom:8px; }
#viewOlmero .olm-toolbar select, #viewOlmero .olm-toolbar input { height:30px; }
#viewOlmero .olm-bulk { display:none; gap:6px; align-items:center; flex-wrap:wrap; }
#viewOlmero .olm-bulk.aktiv { display:inline-flex; }

/* Zeichnung (19.10.2026): Farben, Dicke, Text, Seiten */
.zeichnung-optionen { display:flex; flex-wrap:wrap; gap:10px 16px; align-items:center; margin-top:8px; padding:6px 8px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; font-size:12px; }
.zeichnung-optionen .zo-gruppe { display:inline-flex; align-items:center; gap:6px; }
.zeichnung-optionen select { height:30px; font-size:12px; padding:0 6px; border:1px solid #cbd5e1; border-radius:6px; background:#fff; }
.zeichnung-farbe { width:24px; height:24px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 0 1px #cbd5e1; cursor:pointer; padding:0; }
.zeichnung-farbe.active { box-shadow:0 0 0 2px #0f172a; }
.zeichnung-optionen .zo-seiten { margin-left:auto; }
.zeichnung-optionen .zo-seiten .btn { min-width:30px; padding:4px 8px; }

/* Varianten-Vergleich (28.10.2026) */
.bv-modal{max-width:1100px;width:96vw;max-height:90vh;overflow:auto;align-items:stretch!important;padding:18px!important;box-sizing:border-box}
.bv-kopf{display:flex;justify-content:space-between;align-items:center;gap:10px}
.bv-wahl{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-end;margin:12px 0}
.bv-wahl label{display:flex;flex-direction:column;gap:3px;font-size:12px;font-weight:600;color:#475569;min-width:0}
.bv-wahl select{padding:6px 8px;border:1px solid #cbd5e1;border-radius:6px;max-width:100%;font:inherit;font-weight:400;color:#1e293b}
.bv-wahl .bv-nur{flex-direction:row;align-items:center;gap:6px;font-weight:400}
.bv-summe{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-bottom:12px}
.bv-summe>div{background:#f1f5f9;border-radius:8px;padding:8px 10px;display:flex;flex-direction:column;min-width:0}
.bv-summe span{font-size:12px;color:#64748b;overflow-wrap:anywhere}
.bv-summe b{font-size:16px;color:#0f172a}
.bv-summe .bv-zahlen{grid-column:1/-1;background:none;padding:0;font-size:12px;color:#475569}
.bv-cat{margin:12px 0 4px;font-weight:700;color:#003878;font-size:13px}
.bv-reihe{display:grid;grid-template-columns:90px minmax(0,1fr) minmax(0,1fr);gap:4px 12px;padding:8px 10px;border:1px solid #e2e8f0;border-left-width:4px;border-radius:8px;margin-bottom:6px;background:#fff}
.bv-st{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.bv-gleich{border-left-color:#cbd5e1;opacity:.75}.bv-gleich .bv-st{color:#94a3b8}
.bv-anders{border-left-color:#f59e0b;background:#fffbeb}.bv-anders .bv-st{color:#b45309}
.bv-fehlt{border-left-color:#ef4444;background:#fef2f2}.bv-fehlt .bv-st{color:#b91c1c}
.bv-neu{border-left-color:#10b981;background:#ecfdf5}.bv-neu .bv-st{color:#047857}
.bv-titel{font-size:13px;color:#0f172a;overflow-wrap:anywhere}
.bv-betrag{font-size:12px;color:#475569;margin-top:2px}
.bv-leer{color:#94a3b8}
.bv-opt{font-size:10px;background:#fef3c7;color:#92400e;border-radius:4px;padding:1px 5px}
.bv-diffs{grid-column:2/-1;border-top:1px dashed #fcd34d;padding-top:6px;display:flex;flex-direction:column;gap:4px}
.bv-diff{display:grid;grid-template-columns:100px minmax(0,1fr) 16px minmax(0,1fr);gap:6px;font-size:12px;align-items:start}
.bv-feld{font-weight:600;color:#92400e}
.bv-alt{color:#b91c1c;white-space:pre-line;overflow-wrap:anywhere}
.bv-wert-neu{color:#047857;white-space:pre-line;overflow-wrap:anywhere}
.bv-pfeil{color:#94a3b8}
@media (max-width:700px){
 .bv-summe{grid-template-columns:minmax(0,1fr)}
 .bv-reihe{grid-template-columns:minmax(0,1fr)}
 .bv-a::before{content:"A: ";font-size:11px;color:#64748b;font-weight:700}
 .bv-b::before{content:"B: ";font-size:11px;color:#64748b;font-weight:700}
 .bv-a,.bv-b{display:flex;flex-direction:column}
 .bv-diffs{grid-column:1}
 .bv-diff{grid-template-columns:minmax(0,1fr)}
 .bv-pfeil{display:none}
}
/* Optionen ausblenden + Alternativ-Block (28.10.2026) */
.offer-optionen-aus .offer-line-optional,
.offer-optionen-aus .offer-block-optional-hint{display:none!important}
.offer-block-alternative{border:2px dashed #a78bfa;border-radius:10px}
.offer-block-alternative>.offer-block-header{background:#5b21b6!important}
.offer-block-alt-badge{margin-left:8px;font-size:12px;font-weight:600;background:#ede9fe;color:#5b21b6;border-radius:10px;padding:2px 9px;white-space:nowrap}
.offer-block-actions .btn-icon.aktiv{background:#ede9fe;color:#5b21b6}