/* ==========================================================================
   OBJECT MANAGER MODAL - IMMO Vision Dashboard

   Version: 1.0
   Date: 2025-11-22
   Objekt: 6-Familienhaus Kornwestheim (Breslauer Straße 22)

   Dependencies:
   - Dashboard CSS-Variablen (dashboard.css)
   - Inter Font (Google Fonts)

   Structure:
   1. Overlay & Container (~80 lines)
   2. Header (3-teilig) (~120 lines)
   3. Tab Navigation (~60 lines)
   4. Tab Content (~700 lines)
      4.1 Tab 1: Übersicht (~140 lines)
      4.2 Tab 2: Analyse (~200 lines)
      4.3 Tab 3: Aufgaben (~120 lines)
      4.4 Tab 4: Dokumente (~140 lines)
      4.5 Tab 5: Timeline (~140 lines)
   5. Besichtigungs-Modal (Nested) (~250 lines)
   6. Responsive (~200 lines)
   7. Animations (~40 lines)

   Total: ~1250 lines
   ========================================================================== */

/* ==========================================================================
   1. OVERLAY & CONTAINER
   ========================================================================== */

.object-manager-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    width: 100vw;
    height: 100%;
    height: 100dvh; /* Dynamic Viewport Height - berücksichtigt Browser-UI */
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 9999;
    display: flex;
    padding: 0; /* Volle Fläche nutzen */
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    animation: fadeIn 0.3s ease;
    overflow: hidden;
}

/* Hidden State */
.object-manager-overlay[data-state="hidden"] {
    display: none;
}

.object-manager-container {
    width: 100%;
    width: 100vw;
    height: 100%;
    height: 100dvh; /* Volle Höhe inkl. dynamischer Viewport */
    max-width: none; /* Keine Begrenzung */
    max-height: none;
    background: #FFFFFF; /* Solid weiß für Fullscreen */
    border: none;
    border-radius: 0; /* Keine Rundung bei Fullscreen */
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: fadeIn 0.2s ease;
}

/* ==========================================================================
   2. HEADER v2.0 (6-teilig: Zurück | UserType | Titel | Bild | Map | Delete)
   ========================================================================== */

.object-manager-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 8px 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: #FFFFFF;
    flex-shrink: 0;
}

/* Zurück-Button (Apple-Style) */
.om-back-button {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: transparent;
    border: none;
    color: var(--color-primary, #0077B6);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    flex-shrink: 0;
    min-height: 44px; /* Touch Target */
}

.om-back-button:hover {
    background: rgba(0, 119, 182, 0.1);
}

.om-back-button:active {
    transform: scale(0.95);
}

.om-back-button svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.om-back-button span {
    white-space: nowrap;
}

/* Header Container Groups v1.0 - Für zentrierte Darstellung */
.om-header-left,
.om-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.om-header-left {
    justify-content: flex-start;
}

.om-header-right {
    justify-content: flex-end;
}

/* Objekt-Info (Mitte) */
.om-header-info {
    flex: 1;
    text-align: center;
    min-width: 0; /* Allow text truncation */
}

.om-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--gray-900, #111827);
    margin: 0 0 4px 0;
    line-height: 1.2;
}

.om-meta {
    font-size: 14px;
    color: var(--gray-600, #4B5563);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    line-height: 1.4;
}

.om-meta-separator {
    color: var(--gray-400, #9CA3AF);
}

/* User-Type Icon (v2.1 - No background, icon only blue) */
.om-user-type-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: #0077b6;
}

.om-user-type-icon svg {
    width: 20px;
    height: 20px;
}

/* Mini-Objektbild (zwischen Titel und Map) */
.om-header-image {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
}

.om-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--gray-200, #E5E7EB), var(--gray-300, #D1D5DB));
    display: flex;
    align-items: center;
    justify-content: center;
}

.om-image-placeholder svg {
    color: rgba(0, 0, 0, 0.2);
}

/* Objektbild im Header (v4.1.1 - Lightbox Support) */
.om-header-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: zoom-in;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.om-header-image img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* Map Button (v2.1 - No background, icon only blue) */
.om-map-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: none;
    color: #0077b6;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    padding: 0;
}

.om-map-btn:hover {
    transform: scale(1.1);
}

.om-map-btn:active {
    transform: scale(0.95);
}

.om-map-btn svg {
    width: 18px;
    height: 18px;
}

/* Hide map button when no coordinates */
.om-map-btn[data-hidden="true"] {
    display: none;
}

/* Delete Button (v4.0.0: Icon-only, minimalist) */
.om-delete-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: #86868b;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0;
}

.om-delete-btn:hover {
    color: #ef4444; /* Red on hover */
    transform: scale(1.15);
}

.om-delete-btn:active {
    transform: scale(0.95);
}

.om-delete-btn svg {
    flex-shrink: 0;
}

/* ==========================================================================
   3. TAB NAVIGATION
   ========================================================================== */

.om-tabs {
    display: flex;
    justify-content: space-between; /* Verteilt auf ALLEN Größen */
    gap: 0;
    padding: 0 24px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    background: #FFFFFF;
    overflow-x: auto;
    scrollbar-width: none;
    flex-shrink: 0;
}

.om-tabs::-webkit-scrollbar {
    display: none;
}

.om-tab {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 16px 24px;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--gray-600, #4B5563);
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    position: relative;
    margin-bottom: -1px;
    min-height: 44px; /* Touch Target */
}

.om-tab:hover {
    color: var(--color-primary, #0077B6);
    background: rgba(0, 119, 182, 0.05);
}

.om-tab.active {
    color: var(--color-primary, #0077B6);
    border-bottom-color: var(--color-primary, #0077B6);
}

.om-tab svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.om-tab:focus-visible {
    outline: 2px solid var(--color-primary, #0077B6);
    outline-offset: -2px;
}

.om-tab:focus {
    outline: none;
}

/* ==========================================================================
   3.5 ANALYSE TAB SUB-LABELS (Desktop: Objektanalyse/Finanzanalyse)
   ========================================================================== */

/* Tab mit Sub-Labels: kompaktes 2-Zeilen Layout */
.om-tab-with-sub {
    padding: 10px 16px;
}

/* Labels Container: vertikal gestapelt */
.om-tab-labels {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

/* Zeile 1: Icon + "Analyse" horizontal */
.om-tab-main {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
}

.om-tab-main svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Zeile 2: Sub-Labels Container */
.om-tab-sub {
    display: none; /* Hidden by default, shown on Desktop when Tab is active */
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-500, #6B7280);
    line-height: 1;
    white-space: nowrap;
}

/* Desktop: Show sub-labels when Analyse tab is active */
@media (min-width: 768px) {
    .om-tab-with-sub.active .om-tab-sub {
        display: flex;
    }
}

/* Sub-Label Items */
.om-tab-sub-item {
    cursor: pointer;
    padding: 1px 3px;
    border-radius: 2px;
    transition: all 0.15s ease;
}

.om-tab-sub-item:hover {
    background: rgba(0, 119, 182, 0.1);
    color: var(--color-primary, #0077B6);
}

.om-tab-sub-item.active {
    color: var(--color-primary, #0077B6);
    font-weight: 600;
}

/* Divider zwischen Sub-Labels */
.om-tab-sub-divider {
    color: var(--gray-300, #D1D5DB);
    font-weight: 400;
    user-select: none;
    font-size: 8px;
}

/* ==========================================================================
   4. TAB CONTENT
   ========================================================================== */

.om-tab-content {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 16px; /* Reduziert von 32px */
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; /* iOS momentum scrolling */
    background: #FFFFFF;
}

/* Desktop/Tablet: Etwas mehr Padding */
@media (min-width: 768px) {
    .om-tab-content {
        padding: 20px;
    }
}

.om-tab-panel {
    display: none;
}

.om-tab-panel.active {
    display: block;
    opacity: 1;  /* FIX: Explizit setzen - verhindert opacity:0 nach Animation */
    animation: fadeInContent 0.3s ease forwards;
}

.om-section {
    margin-bottom: 20px;
}

.om-section:last-child {
    margin-bottom: 0;
}

.om-section-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 16px;
    font-weight: 700;
    color: var(--gray-800, #1F2937);
    margin: 0 0 16px 0;
}

.om-section-title svg {
    width: 20px;
    height: 20px;
    color: var(--color-primary, #0077B6);
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   4.1 Tab 1: Übersicht
   -------------------------------------------------------------------------- */

/* Recommendation Card (Green Gradient) */
/* ==========================================================================
   Kaufempfehlung (Variante C - Ultra-Kompakt, ~50px Höhe)

   Layout:
   ┌──────────────────────────────────────────────────────────────────────┐
   │  ● BEDINGT KAUFEN · 72%                                 KI-ANALYSE  │
   │  (i) Diese Einschätzung basiert auf KI und ersetzt keine Beratung   │
   └──────────────────────────────────────────────────────────────────────┘
   ========================================================================== */
.recommendation-card {
    padding: 12px 16px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    margin-bottom: 20px;
}

.recommendation-main {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

/* Farbiger Signalpunkt (12px) */
.recommendation-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Empfehlungsfarben */
.recommendation-dot.rec-buy { background: #10B981; }
.recommendation-dot.rec-conditional { background: #F59E0B; }
.recommendation-dot.rec-caution { background: #EF4444; }
.recommendation-dot.rec-avoid { background: #6B7280; }

.recommendation-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary, #1F2937);
    margin: 0;
    line-height: 1.2;
}

.recommendation-separator {
    color: var(--text-tertiary, #9CA3AF);
}

.recommendation-confidence {
    font-size: 14px;
    color: var(--text-secondary, #6B7280);
}

.recommendation-badge {
    margin-left: auto;
    padding: 4px 8px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.5px;
    color: var(--text-tertiary, #9CA3AF);
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
}

/* Begründungszeile (zwischen Haupt-Info und Disclaimer) */
.recommendation-reason {
    margin-top: 8px;
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary, #6B7280);
    line-height: 1.4;
}

/* Kompakter Disclaimer */
.recommendation-disclaimer {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    font-size: 11px;
    color: var(--text-tertiary, #9CA3AF);
}

.recommendation-disclaimer .info-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.6;
}

.recommendation-disclaimer span {
    line-height: 1.3;
}

/* Stats Grid (Kennzahlen) */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 12px;
}

.stat-card {
    background: #FFFFFF;
    padding: 16px;
    border-radius: 12px;
    text-align: center;
    border: 1px solid rgba(0, 0, 0, 0.15);
    transition: all 0.2s ease;
}

.stat-card:hover {
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--color-primary, #0077B6);
    margin: 0 0 4px 0;
    line-height: 1;
}

.stat-label {
    font-size: 12px;
    color: var(--gray-600, #4B5563);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0;
}

/* ==========================================================================
   FINANCING SECTION (v2.0)
   - Zwei Varianten: Eigennutzer vs Investor
   - Expandable mit Chevron Animation
   - 2-Spalten Grid (Desktop), 3-Spalten für Nebenkosten
   - Responsive für Mobile
   ========================================================================== */

/* Section Container - no border per user request */
.financing-section {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 20px;
}

/* Header: Title + Expand Button */
.financing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.financing-header .om-section-title {
    margin: 0;
}

/* Icon Styling */
.financing-icon {
    flex-shrink: 0;
}

/* Expand Button */
.financing-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0, 119, 182, 0.08);
    color: var(--color-primary, #0077B6);
    cursor: pointer;
    border-radius: 8px;
    transition: all 0.2s ease;
    padding: 0;
}

.financing-expand-btn:hover {
    background: rgba(0, 119, 182, 0.15);
}

.financing-expand-btn:active {
    transform: scale(0.95);
}

/* Chevron Animation */
.financing-chevron {
    transition: transform 0.2s ease;
}

.financing-section.expanded .financing-chevron {
    transform: rotate(180deg);
}

/* Summary Grid (immer sichtbar) */
.financing-summary {
    margin-bottom: 24px;  /* Bug #1 Fix: Abstand zwischen Kennzahlen und Content */
    max-width: 900px;     /* v4.2: Gleiche Breite wie Content-Wrapper */
    margin-left: auto;
    margin-right: auto;
}

.financing-section.expanded .financing-summary {
    margin-bottom: 24px;
}

/* Stats Grid Override für 4 Spalten */
.financing-stats {
    grid-template-columns: repeat(4, 1fr);
}

/* Details Container (always visible - v4.1: Header removed, section always expanded) */
.financing-details {
    max-height: none;
    opacity: 1;
    overflow: visible;
}

/* Divider */
.financing-divider {
    height: 1px;
    background: rgba(0, 0, 0, 0.08);
    margin: 16px 0;
}

/* Section Labels */
.financing-section-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--gray-500, #6B7280);
    margin-bottom: 12px;
    margin-top: 16px;
}

.financing-section-label:first-child {
    margin-top: 0;
}

/* Label Sum (Nebenkosten Summe) */
.financing-label-sum {
    font-size: 11px;
    font-weight: 600;
    color: var(--color-primary, #0077B6);
    text-transform: none;
}

/* Input Grid (2 Spalten Desktop) */
.financing-inputs {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
}

/* 3 Spalten für Nebenkosten */
.financing-inputs-3col {
    grid-template-columns: repeat(3, 1fr);
}

/* v4.2: 3 Spalten für Investor Desktop (≥769px) */
@media (min-width: 769px) {
    #financingFormInvestor .financing-inputs-3col-investor,
    #financingFormInvestor .financing-inputs-3col {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;  /* Kompakterer Gap für 3 Spalten */
    }

    #financingFormInvestor .financing-inputs-3col .financing-input-group:last-child {
        grid-column: auto;
    }
}

/* Full Width Input */
.financing-input-full {
    grid-column: 1 / -1;
}

/* Input Group */
.financing-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;  /* v4.2: Ermöglicht Schrumpfen in Grid */
}

/* Label */
.financing-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-700, #374151);
}

/* v4.1: Euro-Wert im Label (rechts neben Text, vor Info-Icon) */
.financing-label-text {
    flex-shrink: 0;
}

.financing-label-euro {
    color: var(--gray-400, #9CA3AF);
    font-size: 11px;
    font-weight: 500;
    margin-left: auto;
    white-space: nowrap;
}

/* Label Info (Prozent-Anzeige) */
.financing-label-info {
    font-weight: 500;
    color: var(--gray-500, #6B7280);
}

/* Label Euro (Nebenkosten Euro-Wert im Label) */
.financing-label-euro {
    font-weight: 500;
    font-size: 11px;
    color: var(--gray-500, #6B7280);
    margin-left: auto;
}

/* Lock Icon (readonly fields) */
.financing-lock-icon {
    color: var(--gray-400, #9CA3AF);
}

/* Info Icon */
.financing-info-icon {
    color: var(--gray-400, #9CA3AF);
    cursor: help;
}

.financing-info-icon:hover {
    color: var(--color-primary, #0077B6);
}

/* Auto-Fill Badge - Hidden by default, shown via .visible class */
.financing-autofill-badge {
    display: none;  /* Hidden by default */
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    background: rgba(245, 158, 11, 0.15);
    color: #D97706;
    font-size: 9px;
    font-weight: 700;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.financing-autofill-badge.visible {
    display: inline-flex;
}

/* Input Wrapper (Input + Suffix) */
.financing-input-wrapper {
    position: relative;  /* Required for absolute positioned autofill badge */
    display: flex;
    align-items: center;
    gap: 0;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.12);
    border-radius: 8px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    min-width: 0;  /* v4.2: Ermöglicht Schrumpfen in Grid */
}

.financing-input-wrapper:focus-within {
    border-color: var(--color-primary, #0077B6);
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.1);
}

/* Input Field */
.financing-input {
    flex: 1;
    padding: 10px 12px;
    border: none;
    background: transparent;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 15px;
    font-weight: 500;
    color: var(--gray-900, #111827);
    outline: none;
    min-width: 0;
}

.financing-input[readonly] {
    color: var(--gray-500, #6B7280);
    cursor: not-allowed;
}

.financing-input::-webkit-inner-spin-button,
.financing-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.financing-input[type="number"] {
    -moz-appearance: textfield;
}

/* Select Input */
.financing-select-wrapper {
    position: relative;
}

.financing-select {
    appearance: none;
    -webkit-appearance: none;
    padding-right: 32px;
    cursor: pointer;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236B7280' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center;
}

/* Suffix (%, €, J.) */
.financing-suffix {
    padding: 10px 12px;
    background: transparent;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-500, #6B7280);
    white-space: nowrap;
}

/* Calculated Value Display */
.financing-calculated {
    font-size: 12px;
    color: var(--gray-500, #6B7280);
    margin-top: 4px;
}

/* Results List */
.financing-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--gray-50, #F9FAFB);
    border-radius: 8px;
    padding: 12px 16px;
}

/* v4.1: Side-by-Side Results Grid (Investor) */
.financing-results-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: stretch;
}

.financing-results-column {
    display: flex;
    flex-direction: column;
}

.financing-results-column .financing-section-label {
    margin-top: 0;
}

.financing-results-column .financing-results {
    flex: 1;
}

.financing-result-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}

.financing-result-label {
    font-size: 13px;
    color: var(--gray-600, #4B5563);
}

.financing-result-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-900, #111827);
}

.financing-result-highlight {
    color: var(--color-primary, #0077B6);
    font-size: 16px;
    font-weight: 700;
}

/* Save Button */
.financing-save-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 12px 24px;
    margin-top: 16px;
    background: var(--color-primary, #0077B6);
    color: #FFFFFF;
    border: none;
    border-radius: 8px;
    font-family: 'Inter', -apple-system, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.financing-save-btn:hover {
    background: #006299;
    transform: translateY(-1px);
}

.financing-save-btn:active {
    transform: translateY(0);
}

.financing-save-btn:disabled {
    background: var(--gray-300, #D1D5DB);
    cursor: not-allowed;
    transform: none;
}

.financing-save-btn svg {
    flex-shrink: 0;
}

/* Loading Spinner Animation for Save Button */
.financing-save-btn .animate-spin {
    animation: spin 1s linear infinite;
}

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

/* ========================================
   KALKULATIONS-MANAGEMENT (v5.0)
   - Dropdown fuer Kalkulationsauswahl
   - Unsaved Changes Indicator
   - Action Buttons (Save, Save As, Delete)
   ======================================== */

.financing-calc-header {
    display: flex;
    align-items: flex-end;  /* v4.1: Align actions with dropdown button (not label) */
    justify-content: space-between;
    gap: 16px;
    padding: 0 0 16px 0;
    border-bottom: 1px solid var(--gray-200, #E5E7EB);
    margin-bottom: 20px;
    flex-wrap: wrap;
}

/* Bug #4 Fix: Left section (Dropdown + Unsaved Indicator) */
.financing-calc-left {
    display: flex;
    align-items: center;
    gap: 16px;
    flex: 1;
    min-width: 200px;
}

/* Bug #4 Fix: Right section (Action Buttons) */
.financing-calc-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.financing-calc-selector {
    flex: 1;
}

.financing-calc-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--gray-500, #6B7280);
    margin-bottom: 6px;
    letter-spacing: 0.03em;
}

.financing-calc-dropdown {
    position: relative;
}

.financing-calc-dropdown-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    background: #FFFFFF;
    border: 1px solid var(--gray-200, #E5E7EB);
    border-radius: 8px;
    cursor: pointer;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    transition: all 0.2s ease;
    min-height: 44px;
}

.financing-calc-dropdown-btn:hover {
    border-color: var(--color-primary, #0077B6);
}

.financing-calc-dropdown-btn:focus {
    outline: none;
    border-color: var(--color-primary, #0077B6);
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.1);
}

.financing-calc-dropdown-btn .calc-name {
    flex: 1;
    text-align: left;
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-900, #111827);
}

.financing-calc-dropdown-btn .calc-date {
    font-size: 12px;
    color: var(--gray-400, #9CA3AF);
}

.financing-calc-dropdown-btn .dropdown-chevron {
    color: var(--gray-400, #9CA3AF);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.financing-calc-dropdown.open .dropdown-chevron {
    transform: rotate(180deg);
}

.financing-calc-dropdown-menu {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    background: #FFFFFF;
    border: 1px solid var(--gray-200, #E5E7EB);
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    z-index: 100;
    display: none;
    max-height: 300px;
    overflow-y: auto;
}

.financing-calc-dropdown.open .financing-calc-dropdown-menu {
    display: block;
}

.calc-option {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 14px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    transition: background 0.15s ease;
}

.calc-option:hover {
    background: var(--gray-50, #F9FAFB);
}

.calc-option.active {
    background: rgba(0, 119, 182, 0.05);
}

.calc-option.new-calc {
    color: var(--color-primary, #0077B6);
    font-weight: 500;
}

.calc-option.new-calc svg {
    color: var(--color-primary, #0077B6);
}

.calc-option-divider {
    height: 1px;
    background: var(--gray-200, #E5E7EB);
    margin: 4px 0;
}

.calc-option-name {
    flex: 1;
    font-size: 14px;
    color: var(--gray-900, #111827);
}

.calc-option-date {
    font-size: 12px;
    color: var(--gray-400, #9CA3AF);
}

.calc-option-check {
    color: var(--color-primary, #0077B6);
    flex-shrink: 0;
}

/* Unsaved Changes Indicator */
.financing-unsaved-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #F59E0B;
    font-weight: 500;
    white-space: nowrap;
}

/* Financing Actions Footer - DEPRECATED (Bug #4: Moved to header)
   Keeping for backwards compatibility */
.financing-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 20px 0 0 0;
    border-top: 1px solid var(--gray-200, #E5E7EB);
    margin-top: 24px;
}

.financing-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 20px;
    border-radius: 8px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 44px;
}

.financing-action-btn.primary {
    background: var(--color-primary, #0077B6);
    color: #FFFFFF;
    border: none;
}

.financing-action-btn.primary:hover {
    background: #006299;
}

.financing-action-btn.primary:disabled {
    background: var(--gray-300, #D1D5DB);
    cursor: not-allowed;
}

.financing-action-btn.secondary {
    background: #FFFFFF;
    color: var(--gray-700, #374151);
    border: 1px solid var(--gray-200, #E5E7EB);
}

.financing-action-btn.secondary:hover {
    border-color: var(--color-primary, #0077B6);
    color: var(--color-primary, #0077B6);
}

.financing-action-btn.danger {
    background: none;
    color: var(--gray-400, #9CA3AF);
    border: none;
    padding: 10px;
}

.financing-action-btn.danger:hover {
    color: var(--color-danger, #EF4444);
}

.financing-action-btn svg {
    flex-shrink: 0;
}

/* Icon-Only Buttons (v4.3) */
.financing-action-btn.icon-only {
    padding: 10px;
    min-width: 44px;
    min-height: 44px;
    background: none;
    border: 1px solid var(--gray-200, #E5E7EB);
    color: var(--gray-500, #6B7280);
    border-radius: 8px;
}

.financing-action-btn.icon-only:hover {
    border-color: var(--gray-300, #D1D5DB);
    color: var(--gray-700, #374151);
    background: var(--gray-50, #F9FAFB);
}

.financing-action-btn.icon-only.primary {
    background: var(--color-primary, #0077B6);
    border-color: var(--color-primary, #0077B6);
    color: #FFFFFF;
}

.financing-action-btn.icon-only.primary:hover {
    background: #006299;
    border-color: #006299;
}

/* Delete button: Rot bei Hover */
.financing-action-btn.icon-only#calcDeleteBtn:hover {
    border-color: var(--color-danger, #EF4444);
    color: var(--color-danger, #EF4444);
    background: rgba(239, 68, 68, 0.05);
}

/* Save As Modal Input */
.calc-name-input-wrapper {
    margin-top: 12px;
}

.calc-name-input {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid var(--gray-200, #E5E7EB);
    border-radius: 8px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    color: var(--gray-900, #111827);
    transition: all 0.2s ease;
}

.calc-name-input:focus {
    outline: none;
    border-color: var(--color-primary, #0077B6);
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.1);
}

.calc-name-input::placeholder {
    color: var(--gray-400, #9CA3AF);
}

/* Mobile Responsive */
@media (max-width: 767px) {
    .financing-calc-header {
        flex-direction: column;
        align-items: stretch;
        gap: 12px;
    }

    /* Bug #4: Mobile layout for header with actions */
    .financing-calc-left {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .financing-calc-actions {
        justify-content: flex-end;
        flex-wrap: wrap;
    }

    .financing-calc-dropdown-btn {
        width: 100%;
    }

    .financing-unsaved-indicator {
        justify-content: flex-end;
    }

    .financing-actions {
        flex-wrap: wrap;
    }

    .financing-action-btn.primary,
    .financing-action-btn.secondary {
        flex: 1;
        min-width: 120px;
    }

    .financing-action-btn.danger {
        order: -1;
        flex: 0 0 44px;
    }

    /* v4.1: Results Grid untereinander auf Mobile */
    .financing-results-grid {
        grid-template-columns: 1fr;
    }
}

/* Insights Grid (2 Spalten: Top Insights | Nächste Schritte) */
.insights-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

@media (min-width: 768px) {
    .insights-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Grid Items - White Background wie Kennzahlen */
.insights-grid > .om-section {
    background: #FFFFFF;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    margin-bottom: 0;
    transition: all 0.2s ease;
}

.insights-grid > .om-section:hover {
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

/* Insight List */
.insight-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.insight-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 0;
}

/* WICHTIG: Keine ::before Bullets im Modal! */
.object-manager-overlay .insight-item::before {
    content: none;
}

.insight-icon {
    width: 20px;
    height: 20px;
    color: var(--color-primary, #0077B6);
    flex-shrink: 0;
    margin-top: 2px;
}

.step-number {
    width: 24px;
    height: 24px;
    background: var(--color-primary, #0077B6);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 0;
}

.insight-content {
    flex: 1;
    min-width: 0;
}

.insight-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-900, #111827);
    margin: 0 0 2px 0;
    line-height: 1.3;
}

.insight-text {
    font-size: 14px;
    color: var(--gray-700, #374151);
    line-height: 1.5;
    margin: 0;
}

/* --------------------------------------------------------------------------
   4.2 Tab 2: Analyse
   -------------------------------------------------------------------------- */

/* AI Agent Boxes (4 Varianten: Lila, Orange, Rot, Blau) */
.ai-agent-box {
    padding: 20px;
    border-radius: 12px;
    border: 1px solid;
    margin-bottom: 24px;
}

.ai-agent-purple {
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.05), rgba(139, 92, 246, 0.05));
    border-color: rgba(99, 102, 241, 0.2);
}

.ai-agent-orange {
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(217, 119, 6, 0.05));
    border-color: rgba(245, 158, 11, 0.2);
}

.ai-agent-red {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.05), rgba(220, 38, 38, 0.05));
    border-color: rgba(239, 68, 68, 0.2);
}

.ai-agent-blue {
    background: linear-gradient(135deg, rgba(0, 119, 182, 0.05), rgba(0, 184, 217, 0.05));
    border-color: rgba(0, 119, 182, 0.2);
}

.ai-agent-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.ai-agent-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.ai-agent-purple .ai-agent-icon {
    background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.ai-agent-orange .ai-agent-icon {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.ai-agent-red .ai-agent-icon {
    background: linear-gradient(135deg, #ef4444, #dc2626);
}

.ai-agent-blue .ai-agent-icon {
    background: linear-gradient(135deg, #0077B6, #00B8D9);
}

.ai-agent-icon svg {
    width: 18px;
    height: 18px;
}

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

.ai-agent-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-800, #1F2937);
    margin: 0 0 2px 0;
}

.ai-agent-subtitle {
    font-size: 12px;
    color: var(--gray-600, #4B5563);
    margin: 0;
}

.ai-agent-content {
    padding: 16px;
    background: white;
    border-radius: 6px;
    font-size: 13px;
    color: var(--gray-700, #374151);
    line-height: 1.6;
    margin-bottom: 12px;
}

.ai-agent-content p {
    margin: 0;
}

.ai-agent-button {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--color-primary, #0077B6);
    color: white;
    border: none;
    border-radius: 8px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 44px; /* Touch Target */
}

.ai-agent-button:hover {
    background: var(--color-primary-dark, #003566);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 119, 182, 0.3);
}

.ai-agent-button:active {
    transform: translateY(0);
}

.ai-agent-button svg {
    width: 16px;
    height: 16px;
}

/* Categories Grid (3×3 auf Desktop/Tablet, Stack auf Mobile) */
.categories-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 768px) {
    .categories-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
}

/* Category Cards (immer expanded, kein Accordion mehr!) */
.category-accordion {
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.2s ease;
    margin-bottom: 0;
}

.category-accordion:hover {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

.category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px;
    cursor: default; /* Kein Click mehr */
    transition: background 0.2s ease;
    background: rgba(255, 255, 255, 0.3);
}

.category-info {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.category-icon {
    width: 20px;
    height: 20px;
    color: var(--color-primary, #0077B6);
    flex-shrink: 0;
}

.category-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-800, #1F2937);
    margin: 0;
    line-height: 1.2;
}

.category-score {
    font-size: 16px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Score Color Coding */
.score-a {
    color: var(--color-success, #10B981);
}

.score-b {
    color: var(--color-primary, #0077B6);
}

.score-c {
    color: var(--color-warning, #F59E0B);
}

.score-d {
    color: var(--color-danger, #EF4444);
}

/* Chevron verstecken (nicht mehr nötig) */
.category-chevron {
    display: none;
}

/* Content immer sichtbar (kein Toggle mehr) */
.category-content {
    display: block !important;
    max-height: none !important;
    overflow: visible;
}

.category-details {
    padding: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.2);
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 13px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
    gap: 12px;
}

.detail-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.detail-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--gray-600, #4B5563);
    flex: 1;
    min-width: 0;
}

.detail-label svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.detail-value {
    font-weight: 600;
    color: var(--gray-800, #1F2937);
    text-align: right;
    white-space: nowrap;
}

.detail-summary {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 13px;
    color: var(--gray-600, #4B5563);
    line-height: 1.5;
}

.detail-summary strong {
    color: var(--gray-800, #1F2937);
}

.detail-critical {
    color: var(--color-danger, #EF4444);
    background: rgba(239, 68, 68, 0.05);
    padding: 8px 12px;
    border-radius: 6px;
    margin: 12px 0 0 0;
}

.detail-critical strong {
    color: var(--color-danger, #EF4444);
}

.detail-warning {
    color: var(--color-warning, #F59E0B);
    background: rgba(245, 158, 11, 0.05);
    padding: 8px 12px;
    border-radius: 6px;
    margin: 12px 0 0 0;
}

.detail-warning strong {
    color: var(--color-warning, #F59E0B);
}

/* --------------------------------------------------------------------------
   4.3 Tab 3: Aufgaben
   -------------------------------------------------------------------------- */

/* Tasks Kanban Grid (3 Spalten auf Desktop/Tablet) */
.tasks-kanban {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
}

@media (min-width: 768px) {
    .tasks-kanban {
        grid-template-columns: 1fr 1fr 1fr;
        gap: 16px;
    }
}

.task-section {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.priority-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.priority-critical {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-danger, #EF4444);
}

.priority-high {
    background: rgba(245, 158, 11, 0.15);
    color: var(--color-warning, #F59E0B);
}

.priority-medium {
    background: rgba(0, 119, 182, 0.15);
    color: var(--color-primary, #0077B6);
}

.task-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
}

.task-item {
    background: #FFFFFF;
    border-radius: 12px;
    padding: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-left: 4px solid var(--color-danger, #EF4444);
    transition: all 0.2s ease;
}

.task-item:hover {
    background: #FFFFFF;
    transform: translateX(4px);
}

.task-item.task-important {
    border-left-color: var(--color-warning, #F59E0B);
}

.task-item.task-optional {
    border-left-color: var(--color-primary, #0077B6);
}

.task-item.completed {
    opacity: 0.6;
    border-left-color: var(--color-success, #10B981);
}

.task-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.task-checkbox {
    width: 20px;
    height: 20px;
    min-width: 20px;
    border: 2px solid var(--gray-400, #9CA3AF);
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.task-checkbox:hover {
    border-color: var(--color-primary, #0077B6);
    transform: scale(1.1);
}

.task-item.completed .task-checkbox {
    background: var(--color-success, #10B981);
    border-color: var(--color-success, #10B981);
    color: white;
}

.task-item.completed .task-checkbox::after {
    content: '✓';
    font-size: 14px;
    font-weight: 700;
}

.task-title {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-800, #1F2937);
    margin: 0;
    line-height: 1.3;
}

.task-description {
    font-size: 13px;
    color: var(--gray-600, #4B5563);
    line-height: 1.5;
}

.task-description strong {
    color: var(--gray-800, #1F2937);
    font-weight: 600;
}

/* --------------------------------------------------------------------------
   4.4 Tab 4: Dokumente
   -------------------------------------------------------------------------- */

/* Risk Items (in AI Agent Content) */
.risk-item {
    padding: 8px 12px;
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 13px;
    line-height: 1.5;
}

.risk-item:last-child {
    margin-bottom: 0;
}

.risk-critical {
    background: rgba(239, 68, 68, 0.1);
    border-left: 3px solid var(--color-danger, #EF4444);
}

.risk-medium {
    background: rgba(245, 158, 11, 0.1);
    border-left: 3px solid var(--color-warning, #F59E0B);
}

/* Upload Zone */
.upload-zone {
    border: 2px dashed var(--gray-300, #D1D5DB);
    border-radius: 12px;
    padding: 40px;
    text-align: center;
    margin-bottom: 24px;
    background: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.2s ease;
}

.upload-zone:hover {
    border-color: var(--color-primary, #0077B6);
    background: rgba(0, 119, 182, 0.05);
}

.upload-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto 12px;
    opacity: 0.5;
    color: var(--gray-500, #6B7280);
}

.upload-text {
    font-size: 14px;
    color: var(--gray-600, #4B5563);
    margin-bottom: 8px;
}

.upload-text strong {
    font-weight: 600;
    color: var(--gray-800, #1F2937);
}

.upload-hint {
    font-size: 12px;
    color: var(--gray-500, #6B7280);
}

/* Document List */
.document-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.document-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
    transition: all 0.2s ease;
}

.document-item:hover {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.document-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

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

.document-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-800, #1F2937);
    margin: 0 0 2px 0;
    line-height: 1.3;
}

.document-meta {
    font-size: 12px;
    color: var(--gray-500, #6B7280);
    margin: 0;
    line-height: 1.4;
}

.document-status {
    padding: 4px 12px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    flex-shrink: 0;
}

.status-complete {
    background: rgba(16, 185, 129, 0.15);
    color: var(--color-success, #10B981);
}

.status-pending {
    background: rgba(245, 158, 11, 0.15);
    color: var(--color-warning, #F59E0B);
}

.status-missing {
    background: rgba(239, 68, 68, 0.15);
    color: var(--color-danger, #EF4444);
}

/* Buttons */
.btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 44px;
}

.btn-primary {
    background: var(--color-primary, #0077B6);
    color: white;
}

.btn-primary:hover {
    background: var(--color-primary-dark, #003566);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 119, 182, 0.3);
}

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

.btn-full {
    width: 100%;
}

.btn-small {
    padding: 8px 16px;
    font-size: 13px;
    min-height: 36px;
}

.btn svg {
    width: 16px;
    height: 16px;
}

/* --------------------------------------------------------------------------
   4.5 Tab 5: Timeline
   -------------------------------------------------------------------------- */

.progress-bar-container {
    margin-bottom: 32px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

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

.progress-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-700, #374151);
}

.progress-label svg {
    width: 16px;
    height: 16px;
    color: var(--color-primary, #0077B6);
}

.progress-percentage {
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary, #0077B6);
}

.progress-bar {
    width: 100%;
    height: 12px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 9999px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary, #0077B6), var(--color-primary-light, #00B8D9));
    border-radius: 9999px;
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.progress-meta {
    margin-top: 8px;
    font-size: 12px;
    color: var(--gray-600, #4B5563);
}

/* Timeline (Marker überlagert auf Content-Cards) */
.timeline {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.timeline * {
    border: none !important;
    text-decoration: none !important;
}

.timeline *::before,
.timeline *::after {
    content: none !important;
    display: none !important;
}

.timeline-item {
    position: relative;
    width: 100%;
}

.timeline-marker {
    position: absolute;
    left: 12px;
    top: 16px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: white;
    border: 3px solid var(--color-success, #10B981) !important;
    box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1);
    z-index: 2;
}

.timeline-marker.pending {
    border-color: var(--gray-300, #D1D5DB) !important;
    background: var(--gray-100, #F3F4F6);
    box-shadow: none !important;
}

.timeline-marker.current {
    border-color: var(--color-primary, #0077B6) !important;
    animation: pulse 2s infinite;
}

.timeline-content {
    width: 100%;
    background: rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 16px 16px 16px 48px; /* Links Platz für Marker */
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    transition: all 0.2s ease;
}

.timeline-content:hover {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.timeline-date {
    font-size: 12px;
    color: var(--gray-500, #6B7280);
    margin: 0 0 6px 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    border: none !important;
    text-decoration: none !important;
    outline: none !important;
    background: none !important;
}

.timeline-date::before,
.timeline-date::after {
    content: none !important;
    display: none !important;
}

.timeline-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-800, #1F2937);
    margin: 0 0 6px 0;
    line-height: 1.3;
    border: none !important;
    text-decoration: none !important;
    outline: none !important;
    background: none !important;
}

.timeline-title::before,
.timeline-title::after {
    content: none !important;
    display: none !important;
}

.timeline-description {
    font-size: 13px;
    color: var(--gray-600, #4B5563);
    line-height: 1.6;
    margin: 0;
    border: none !important;
    text-decoration: none !important;
    outline: none !important;
    background: none !important;
}

.timeline-description::before,
.timeline-description::after {
    content: none !important;
    display: none !important;
}

.timeline-summary {
    margin-top: 32px;
    padding: 20px;
    background: rgba(0, 119, 182, 0.1);
    border-radius: 12px;
    border-left: 4px solid var(--color-primary, #0077B6);
}

.summary-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-800, #1F2937);
    margin: 0 0 8px 0;
}

.summary-text {
    font-size: 13px;
    color: var(--gray-700, #374151);
    line-height: 1.6;
    margin: 0;
}

.summary-text strong {
    color: var(--gray-900, #111827);
}

/* ==========================================================================
   5. BESICHTIGUNGS-MODAL (Nested Modal-in-Modal)
   ========================================================================== */

.besichtigung-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    height: 100dvh;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000; /* Above Object Manager (9999) */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    animation: fadeIn 0.3s ease;
}

.besichtigung-modal-overlay[data-state="hidden"] {
    display: none;
}

.besichtigung-modal-container {
    width: 100%;
    max-width: 900px;
    max-height: 90vh;
    max-height: 90dvh;
    background: white;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: slideUp 0.3s ease;
}

.besichtigung-modal-header {
    padding: 24px;
    border-bottom: 1px solid var(--gray-200, #E5E7EB);
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-shrink: 0;
}

.besichtigung-modal-title {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 20px;
    font-weight: 700;
    color: var(--gray-900, #111827);
    margin: 0;
}

.besichtigung-modal-title svg {
    width: 24px;
    height: 24px;
    color: var(--color-primary, #0077B6);
}

.besichtigung-modal-close {
    background: none;
    border: none;
    font-size: 28px;
    line-height: 1;
    color: var(--gray-500, #6B7280);
    cursor: pointer;
    padding: 4px 8px;
    transition: color 0.2s;
    min-width: 44px;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.besichtigung-modal-close:hover {
    color: var(--gray-900, #111827);
}

.besichtigung-modal-body {
    padding: 24px;
    overflow-y: auto;
    overflow-x: hidden;
    flex: 1;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}

/* Phase Tabs */
.phase-tabs {
    display: flex;
    gap: 8px;
    margin-bottom: 24px;
    border-bottom: 2px solid var(--gray-200, #E5E7EB);
}

.phase-tab {
    flex: 1;
    padding: 12px 16px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-600, #4B5563);
    transition: all 0.2s;
    margin-bottom: -2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    white-space: nowrap;
    min-height: 44px;
}

.phase-tab:hover {
    color: var(--color-primary, #0077B6);
}

.phase-tab.active {
    color: var(--color-primary, #0077B6);
    border-bottom-color: var(--color-primary, #0077B6);
}

.phase-tab svg {
    width: 16px;
    height: 16px;
}

.phase-content {
    display: none;
}

.phase-content.active {
    display: block;
    animation: fadeInContent 0.3s ease;
}

/* AI Insight Box (in Besichtigungs-Modal) */
.ai-insight-box {
    padding: 16px;
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(139, 92, 246, 0.1));
    border-radius: 12px;
    border-left: 4px solid #6366f1;
    margin-bottom: 16px;
}

.ai-insight-title {
    font-weight: 600;
    color: #6366f1;
    font-size: 14px;
    margin: 0 0 8px 0;
}

.ai-insight-text {
    font-size: 13px;
    color: var(--gray-700, #374151);
    line-height: 1.6;
    margin: 0;
}

/* Checklist Items */
.checklist-item {
    padding: 16px;
    background: rgba(0, 119, 182, 0.05);
    border-radius: 12px;
    margin-bottom: 12px;
    border-left: 3px solid var(--color-primary, #0077B6);
}

.checklist-item.completed {
    opacity: 0.7;
    background: rgba(16, 185, 129, 0.05);
    border-left-color: var(--color-success, #10B981);
}

.checklist-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.checklist-checkbox {
    width: 24px;
    height: 24px;
    min-width: 24px;
    border: 2px solid var(--gray-400, #9CA3AF);
    border-radius: 6px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.2s;
}

.checklist-checkbox:hover {
    border-color: var(--color-primary, #0077B6);
    transform: scale(1.1);
}

.checklist-item.completed .checklist-checkbox {
    background: var(--color-success, #10B981);
    border-color: var(--color-success, #10B981);
    color: white;
}

.checklist-item.completed .checklist-checkbox::after {
    content: '✓';
    font-size: 16px;
    font-weight: 700;
}

.checklist-title {
    font-weight: 600;
    color: var(--gray-800, #1F2937);
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 4px 0;
    line-height: 1.3;
}

.checklist-title svg {
    width: 16px;
    height: 16px;
    color: var(--color-primary, #0077B6);
}

.checklist-description {
    font-size: 13px;
    color: var(--gray-600, #4B5563);
    line-height: 1.5;
    margin: 0;
}

.checklist-description strong {
    color: var(--gray-800, #1F2937);
    font-weight: 600;
}

/* Photo Upload Zone (in Checklists) */
.photo-upload-zone {
    margin-top: 12px;
    padding: 16px;
    border: 2px dashed var(--gray-300, #D1D5DB);
    border-radius: 12px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 13px;
    color: var(--gray-600, #4B5563);
    font-weight: 500;
}

.photo-upload-zone:hover {
    border-color: var(--color-primary, #0077B6);
    background: rgba(0, 119, 182, 0.02);
    color: var(--color-primary, #0077B6);
}

/* Report Summary (Phase 3) */
.report-summary {
    padding: 20px;
    background: white;
    border: 1px solid var(--gray-200, #E5E7EB);
    border-radius: 12px;
    margin-bottom: 20px;
}

.report-summary-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-800, #1F2937);
    margin: 0 0 16px 0;
}

.report-section {
    margin-bottom: 16px;
}

.report-section:last-child {
    margin-bottom: 0;
}

.report-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-700, #374151);
    margin: 0 0 8px 0;
}

.cost-summary {
    padding: 12px;
    background: rgba(0, 119, 182, 0.1);
    border-radius: 6px;
    font-size: 13px;
    color: var(--gray-700, #374151);
    line-height: 1.8;
}

.cost-summary strong {
    color: var(--gray-900, #111827);
}

.ki-recommendation {
    padding: 16px;
    background: linear-gradient(135deg, rgba(0, 119, 182, 0.1), rgba(0, 184, 217, 0.1));
    border-radius: 12px;
    border-left: 4px solid var(--color-primary, #0077B6);
    margin-top: 16px;
}

.ki-recommendation-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--color-primary, #0077B6);
    margin: 0 0 8px 0;
}

.ki-recommendation-text {
    font-size: 13px;
    color: var(--gray-700, #374151);
    line-height: 1.6;
    margin: 0;
}

.ki-recommendation-text strong {
    color: var(--gray-900, #111827);
}

/* ==========================================================================
   6. RESPONSIVE BREAKPOINTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tablet (768px - 1200px)
   -------------------------------------------------------------------------- */
@media (max-width: 1200px) {
    .om-tab-content {
        padding: 24px;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* --------------------------------------------------------------------------
   Mobile (<768px)
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    /* Header v2.3 - Kompakter + Apple HIG Touch-Targets + Zentrierte Container */
    .object-manager-header {
        padding: 12px 8px;
        gap: 8px;
    }

    /* Container-Gruppen mit gleicher Breite für perfekte Zentrierung */
    .om-header-left,
    .om-header-right {
        min-width: 100px;
        gap: 4px;
    }

    .om-title {
        font-size: 15px;
    }

    .om-meta {
        font-size: 12px;
        gap: 4px;
    }

    /* Meta: Nur Preis + Fläche auf Mobile (ab 4. Element = Separator nach Fläche) */
    .om-meta span:nth-child(n+4) {
        display: none;
    }

    /* Zurück-Button: Weniger Padding, Touch-Target gewährleisten */
    .om-back-button {
        padding: 8px;
        min-width: 44px;
        min-height: 44px;
    }

    /* Image Thumbnail - kleiner auf Mobile */
    .om-header-image {
        width: 24px;
        height: 24px;
    }

    /* Alle Icon-Buttons: Einheitliche Touch-Area (Apple HIG 44x44pt) */
    .om-user-type-icon,
    .om-map-btn,
    .om-delete-btn {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Einheitliche Icon-Größe 18x18 */
    .om-user-type-icon svg,
    .om-map-btn svg,
    .om-delete-btn svg {
        width: 18px;
        height: 18px;
    }

    /* Tabs */
    .om-tabs {
        padding: 0 8px;
    }

    .om-tab {
        padding: 12px;
        font-size: 12px;
        gap: 0;
    }

    /* Bug #10 Fix: Nur Icons auf Mobile, Text verstecken */

    /* Reguläre Tabs: Direkte <span> Kinder verstecken (Übersicht, Aufgaben, Dokumente) */
    .om-tab > span {
        display: none;
    }

    /* Analyse-Tab: .om-tab-main sichtbar, aber Text verstecken via font-size: 0 */
    .om-tab .om-tab-main {
        display: flex;
        align-items: center;
        font-size: 0;       /* Versteckt nur den Text "Analyse" */
    }

    .om-tab .om-tab-main svg {
        width: 20px;
        height: 20px;
    }

    /* Sub-Labels verstecken */
    .om-tab .om-tab-sub {
        display: none;
    }

    /* Alle Tab-Icons gleiche Größe */
    .om-tab svg {
        width: 20px;
        height: 20px;
    }

    /* Content */
    .om-tab-content {
        padding: 16px;
    }

    /* Sections */
    .om-section {
        margin-bottom: 24px;
    }

    .om-section-title {
        font-size: 15px;
    }

    /* Recommendation Card */
    .recommendation-card {
        padding: 14px 16px;
    }

    .recommendation-title {
        font-size: 13px;
    }

    .recommendation-confidence {
        font-size: 13px;
    }

    .recommendation-badge {
        padding: 3px 6px;
        font-size: 9px;
    }

    /* Stats Grid */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* Accordions */
    .category-header {
        padding: 12px;
    }

    .category-name {
        font-size: 14px;
    }

    .category-score {
        font-size: 18px;
    }

    .category-details {
        padding: 16px 12px;
    }

    /* Tasks */
    .task-item {
        padding: 12px;
    }

    /* Documents */
    .upload-zone {
        padding: 30px 20px;
    }

    /* Timeline */
    .timeline {
        padding-left: 28px;
    }

    .progress-bar-container {
        padding: 16px;
    }

    /* Besichtigungs-Modal */
    .besichtigung-modal-container {
        max-height: 100vh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .besichtigung-modal-header {
        padding: 20px;
    }

    .besichtigung-modal-title {
        font-size: 18px;
    }

    .besichtigung-modal-body {
        padding: 20px;
    }
}

/* --------------------------------------------------------------------------
   Small Phones (<480px)
   -------------------------------------------------------------------------- */
@media (max-width: 479px) {
    /* Header - erbt von 767px Media Query, nur Überschreibungen hier */
    .object-manager-header {
        padding: 12px 8px;
    }

    /* Container-Gruppen für Zentrierung (erbt min-width von 767px) */
    .om-header-left,
    .om-header-right {
        gap: 2px; /* Noch kompakter auf sehr kleinen Screens */
    }

    .om-back-button span {
        display: none; /* Hide "Zurück" text, show only icon */
    }

    .om-back-button {
        padding: 8px;
    }

    .om-title {
        font-size: 14px;
    }

    .om-meta {
        font-size: 11px;
        gap: 4px;
    }

    .om-header-image {
        width: 24px;
        height: 24px;
    }

    /* Tabs */
    .om-tabs {
        padding: 0 8px;
    }

    .om-tab {
        padding: 10px 12px;
        font-size: 12px;
    }

    /* Content */
    .om-tab-content {
        padding: 12px;
    }

    /* Stats Grid - 2x2 auf Mobile */
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* Recommendation */
    .recommendation-card {
        padding: 12px;
    }

    .recommendation-main {
        gap: 6px;
    }

    .recommendation-dot {
        width: 10px;
        height: 10px;
    }

    .recommendation-title {
        font-size: 12px;
    }

    .recommendation-confidence {
        font-size: 12px;
    }

    .recommendation-badge {
        padding: 2px 5px;
        font-size: 8px;
    }

    .recommendation-disclaimer {
        font-size: 10px;
        margin-top: 6px;
    }

    .recommendation-disclaimer .info-icon {
        width: 12px;
        height: 12px;
    }

    /* Accordions */
    .category-header {
        padding: 10px;
    }

    .category-name {
        font-size: 13px;
    }

    .category-score {
        font-size: 16px;
    }

    .category-icon {
        width: 20px;
        height: 20px;
    }

    /* Tasks */
    .task-item {
        padding: 10px;
    }

    .task-title {
        font-size: 14px;
    }

    .task-description {
        font-size: 12px;
    }

    /* Documents */
    .upload-zone {
        padding: 24px 16px;
    }

    .upload-icon {
        width: 40px;
        height: 40px;
    }

    /* Timeline */
    .timeline-content {
        padding: 16px;
    }

    .timeline-title {
        font-size: 14px;
    }

    .timeline-description {
        font-size: 12px;
    }

    /* Besichtigungs-Modal */
    .besichtigung-modal-header {
        padding: 16px;
    }

    .besichtigung-modal-title {
        font-size: 16px;
    }

    .besichtigung-modal-title svg {
        width: 20px;
        height: 20px;
    }

    .besichtigung-modal-body {
        padding: 16px;
    }

    .phase-tabs {
        flex-direction: column;
        gap: 4px;
    }

    .phase-tab {
        width: 100%;
        justify-content: flex-start;
        padding: 10px 12px;
    }

    .checklist-title {
        font-size: 13px;
    }

    .checklist-description {
        font-size: 12px;
    }
}

/* ==========================================================================
   7. ANIMATIONS & KEYFRAMES
   ========================================================================== */

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

@keyframes fadeInContent {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {
    0%, 100% {
        box-shadow: 0 0 0 4px rgba(0, 119, 182, 0.1);
    }
    50% {
        box-shadow: 0 0 0 8px rgba(0, 119, 182, 0.2);
    }
}

/* ==========================================================================
   8. UTILITY CLASSES
   ========================================================================== */

/* Screen Reader Only */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus Visible (Keyboard Navigation) */
*:focus-visible {
    outline: 2px solid var(--color-primary, #0077B6);
    outline-offset: 2px;
}

/* Remove Tap Highlight (Touch Devices) */
.om-tab,
.om-back-button,
.category-header,
.task-checkbox,
.checklist-checkbox,
.phase-tab,
.upload-zone,
.photo-upload-zone {
    -webkit-tap-highlight-color: transparent;
}

/* Smooth Scrolling */
html {
    scroll-behavior: smooth;
}

/* ==========================================================================
   8.5 DELETE CONFIRMATION MODAL (v4.0.0)
   Apple-Style Glassmorphic Confirmation Dialog
   ========================================================================== */

.om-delete-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10002; /* Above Object Manager (10001) */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.om-delete-modal.open {
    display: flex;
    opacity: 1;
}

.om-delete-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

.om-delete-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(30px) saturate(180%);
    border-radius: 16px;
    padding: 28px;
    max-width: 440px;
    width: 90%;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    position: relative;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.om-delete-modal.open .om-delete-content {
    transform: scale(1);
}

.om-delete-title {
    font-size: 20px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 16px 0;
    text-align: center;
}

.om-delete-info {
    margin-bottom: 24px;
}

.om-delete-main-text {
    font-size: 15px;
    color: #1d1d1f;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.om-delete-details {
    background: rgba(0, 119, 182, 0.05);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

.om-delete-subtitle {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 8px 0;
}

.om-delete-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.om-delete-list li {
    font-size: 14px;
    color: #3c3c43;
    padding: 4px 0;
    padding-left: 20px;
    position: relative;
}

.om-delete-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: #10b981;
    font-weight: bold;
}

.om-delete-note {
    font-size: 13px;
    color: #0077b6;
    margin: 0 0 12px 0;
    padding: 12px;
    background: rgba(0, 119, 182, 0.08);
    border-radius: 8px;
    font-weight: 500;
}

.om-delete-warning {
    font-size: 13px;
    color: #ef4444;
    margin: 0;
    font-weight: 600;
}

.om-delete-actions {
    display: flex;
    gap: 12px;
}

.om-delete-cancel-btn,
.om-delete-confirm-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.om-delete-cancel-btn {
    background: rgba(0, 0, 0, 0.05);
    color: #1d1d1f;
}

.om-delete-cancel-btn:hover {
    background: rgba(0, 0, 0, 0.1);
}

.om-delete-confirm-btn {
    background: #ef4444;
    color: white;
}

.om-delete-confirm-btn:hover {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3);
}

.om-delete-confirm-btn:active {
    transform: translateY(0);
}

/* Save Button Blue Override (must come AFTER red .om-delete-confirm-btn:hover) */
.om-delete-confirm-btn.calc-save-btn {
    background: var(--color-primary, #0077B6);
}

.om-delete-confirm-btn.calc-save-btn:hover {
    background: #006299;
    box-shadow: 0 4px 12px rgba(0, 119, 182, 0.3);
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .om-delete-content {
        padding: 24px;
        max-width: 90%;
    }

    .om-delete-title {
        font-size: 18px;
    }

    .om-delete-actions {
        flex-direction: column;
    }

    .om-delete-cancel-btn,
    .om-delete-confirm-btn {
        width: 100%;
    }
}

/* ==========================================================================
   9. PRINT STYLES (Optional - für PDF Export)
   ========================================================================== */

@media print {
    .object-manager-overlay {
        position: static;
        background: white;
        padding: 0;
    }

    .object-manager-container {
        max-width: 100%;
        max-height: none;
        box-shadow: none;
        border: 1px solid #000;
    }

    .om-back-button {
        display: none;
    }

    .om-tabs {
        display: none;
    }

    .om-tab-panel {
        display: block !important;
        page-break-inside: avoid;
    }

    .category-content {
        max-height: none !important;
        display: block;
    }
}

/* ==========================================================================
   10. TASKS TAB - Dynamic Task Management v1.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   10.1 Tasks Header (Progress Bar + Toggle)
   -------------------------------------------------------------------------- */

.tasks-header {
    display: none;  /* Ausgeblendet - Progress Bar und Toggle nicht mehr nötig */
}

.tasks-progress {
    display: none;  /* Ausgeblendet - nicht mehr nötig mit Erledigt-Spalte */
}

.progress-bar {
    height: 6px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #10B981, #0077B6);
    border-radius: 3px;
    transition: width 0.3s ease;
}

.tasks-toggle-completed {
    display: none;  /* Ausgeblendet - nicht mehr nötig mit Erledigt-Spalte */
}

.tasks-toggle-completed:hover {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.15);
}

.tasks-toggle-completed.active {
    background: rgba(16, 185, 129, 0.1);
    border-color: #10B981;
    color: #10B981;
}

.tasks-toggle-completed .toggle-icon {
    transition: transform 0.2s ease;
}

.tasks-toggle-completed.active .toggle-icon {
    transform: rotate(180deg);
}

/* --------------------------------------------------------------------------
   10.2 Task Columns Container
   -------------------------------------------------------------------------- */

.tasks-columns-container {
    margin-bottom: 16px;
}

.swipe-dots {
    display: none;
}

.tasks-columns-wrapper {
    display: flex;
    gap: 16px;
}

/* --------------------------------------------------------------------------
   10.3 Single Task Column
   -------------------------------------------------------------------------- */

.task-column {
    flex: 1;
    min-width: 280px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
}

.column-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Pill/Badge Style (iOS Notifications) - Fix 23 */
.column-count-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    flex-shrink: 0;
}

/* ToDo: Blau */
.column-count-pill.todo {
    background: rgba(0, 119, 182, 0.1);
    border: 1px solid rgba(0, 119, 182, 0.25);
    color: #0077B6;
}

/* In Progress: Orange */
.column-count-pill.in-progress {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.25);
    color: #D97706;
}

/* Completed: Grün */
.column-count-pill.completed {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.25);
    color: #059669;
}

/* Column Dots (für Move-Menu) */
.column-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.column-dot.todo {
    background: #0077B6;
}

.column-dot.in-progress {
    background: #F59E0B;
}

.column-dot.completed {
    background: #10B981;
}

.column-title {
    font-size: 14px;
    font-weight: 600;
    color: #1d1d1f;
    flex: 1;
}

.column-tasks {
    flex: 1;
    min-height: 200px;  /* Konsistente Höhe auch bei leeren Spalten */
}

/* --------------------------------------------------------------------------
   10.4 Task Item (v2.0 - Kompakt)
   -------------------------------------------------------------------------- */

.task-item {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
    cursor: grab;
    transition: all 0.2s ease;
    position: relative;
}

.task-item:hover {
    border-color: rgba(0, 119, 182, 0.3);
}

.task-item:last-child {
    margin-bottom: 0;
}

/* Drag-Animation konsolidiert - siehe unten bei "Dragging State" */

/* Task Header */
.task-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 6px;
}

.task-meta-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.task-created-date {
    font-size: 11px;
    color: #9CA3AF;
    font-weight: 500;
}

.task-id-badge {
    font-size: 11px;
    font-weight: 500;
    color: #9CA3AF;
}

.task-ai-badge {
    font-size: 11px;
    color: #9CA3AF;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Task Actions */
.task-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.task-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    color: #9CA3AF;
    cursor: pointer;
    border-radius: 6px;
    transition: all 0.15s ease;
}

.task-btn:hover {
    background: rgba(0, 0, 0, 0.05);
    color: #4B5563;
}

.task-btn .task-icon {
    width: 16px;
    height: 16px;
}

/* Due Date Wrapper (eingerahmt) */
.task-due-wrapper {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(0, 119, 182, 0.08);
    border: 1px solid rgba(0, 119, 182, 0.2);
    border-radius: 6px;
    font-size: 11px;
    color: #0077B6;
    font-weight: 500;
    cursor: pointer;
}

.task-due-wrapper .task-icon {
    width: 14px;
    height: 14px;
}

.task-due-wrapper.overdue {
    background: rgba(239, 68, 68, 0.08);
    border-color: rgba(239, 68, 68, 0.2);
    color: #EF4444;
}

/* Expand Button (im Header) */
.task-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border: none;
    background: transparent;
    color: #9CA3AF;
    cursor: pointer;
    border-radius: 4px;
    transition: all 0.15s ease;
    padding: 0;
}

.task-btn.task-expand-btn:hover {
    background: rgba(0, 119, 182, 0.1);
    color: #0077B6;
}

.task-expand-btn .task-expand-chevron {
    transition: transform 0.2s ease;
}

.task-item.expanded .task-expand-btn .task-expand-chevron {
    transform: rotate(180deg);
}

/* Title Row */
.task-title-row {
    display: flex;
    align-items: flex-start;
    cursor: pointer;
}

.task-title {
    flex: 1;
    font-size: 13px;
    font-weight: 500;
    color: #1d1d1f;
    line-height: 1.4;
    word-break: break-word;
}

/* Description (collapsed by default) */
.task-description {
    font-size: 12px;
    color: #6B7280;
    line-height: 1.5;
    margin-top: 8px;
    word-break: break-word;
}

.task-description.collapsed {
    display: none;
}

.task-description:empty {
    display: none;
}

/* Overdue Badge */
.task-overdue-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 3px 8px;
    background: rgba(239, 68, 68, 0.1);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    color: #EF4444;
    text-transform: uppercase;
}

.task-overdue-badge .task-icon {
    width: 12px;
    height: 12px;
}

/* Mobile: Show move button */
.task-move-btn {
    display: none;
}

@media (max-width: 768px) {
    .task-move-btn {
        display: flex;
    }
}

.task-overdue-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    background: #EF4444;
    color: white;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
}

/* Task Actions */
.task-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.task-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: none;
    background: transparent;
    border-radius: 6px;
    cursor: pointer;
    color: #6B7280;
    transition: all 0.15s ease;
}

.task-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

.task-delete-btn:hover {
    color: #EF4444;
    background: rgba(239, 68, 68, 0.1);
}

.task-date-btn {
    position: relative;
}

.task-date-input {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

/* Flatpickr hidden input */
.task-due-wrapper .flatpickr-input {
    position: absolute;
    width: 0;
    height: 0;
    opacity: 0;
    pointer-events: none;
}

/* --------------------------------------------------------------------------
   Flatpickr Custom Theme (Apple-Style)
   -------------------------------------------------------------------------- */

.flatpickr-calendar {
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15) !important;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    padding: 8px !important;
    width: 280px !important;
}

.flatpickr-calendar.arrowTop:before,
.flatpickr-calendar.arrowTop:after,
.flatpickr-calendar.arrowBottom:before,
.flatpickr-calendar.arrowBottom:after {
    display: none !important;
}

.flatpickr-months {
    padding: 8px 4px !important;
}

.flatpickr-months .flatpickr-month {
    height: 36px !important;
}

.flatpickr-current-month {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1d1d1f !important;
    padding: 0 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
    font-weight: 600 !important;
    background: transparent !important;
}

.flatpickr-current-month input.cur-year {
    font-weight: 600 !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
    padding: 8px !important;
    fill: #6B7280 !important;
    transition: all 0.15s ease !important;
    border-radius: 6px !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
    background: rgba(0, 119, 182, 0.1) !important;
    fill: #0077B6 !important;
}

.flatpickr-weekdays {
    margin-bottom: 4px !important;
}

span.flatpickr-weekday {
    color: #9CA3AF !important;
    font-size: 11px !important;
    font-weight: 500 !important;
    text-transform: uppercase !important;
}

.flatpickr-days {
    width: 100% !important;
}

.dayContainer {
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
}

.flatpickr-day {
    width: 36px !important;
    height: 36px !important;
    line-height: 36px !important;
    margin: 1px !important;
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #1d1d1f !important;
    border-radius: 8px !important;
    border: none !important;
    transition: all 0.15s ease !important;
}

.flatpickr-day:hover {
    background: rgba(0, 119, 182, 0.1) !important;
    border: none !important;
}

.flatpickr-day.today {
    background: rgba(0, 119, 182, 0.08) !important;
    border: 1px solid rgba(0, 119, 182, 0.3) !important;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover {
    background: #0077B6 !important;
    border-color: #0077B6 !important;
    color: #FFFFFF !important;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
    color: #D1D5DB !important;
}

.flatpickr-day.disabled,
.flatpickr-day.disabled:hover {
    color: #E5E7EB !important;
    background: transparent !important;
}

/* Clear Button for Flatpickr */
.flatpickr-clear-btn {
    display: block;
    width: calc(100% - 16px);
    margin: 8px;
    padding: 8px 12px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 6px;
    color: #6B7280;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.flatpickr-clear-btn:hover {
    background: rgba(239, 68, 68, 0.05);
    border-color: rgba(239, 68, 68, 0.3);
    color: #EF4444;
}

/* Completed Task State */
.task-item.completed {
    opacity: 0.7;
    background: #FFFFFF;
}

.task-item.completed .task-title {
    text-decoration: line-through;
    color: #6B7280;
}

/* Dragging State - No shadows at all */
.task-item.dragging {
    opacity: 0.85;
    transform: scale(0.97);
    z-index: 100;
    cursor: grabbing;
    box-shadow: none !important;
    background: #FFFFFF !important;
    border: 1px solid rgba(0, 119, 182, 0.3) !important;
}

.task-item.dragging,
.task-item.dragging * {
    box-shadow: none !important;
    filter: none !important;
}

/* Drop Target */
.task-column.drop-target,
.task-column.drag-over {
    background: transparent;
    border: 2px dashed rgba(0, 119, 182, 0.4);
}

/* --------------------------------------------------------------------------
   10.4.1 Task Item - Edit Mode (v3.0)
   -------------------------------------------------------------------------- */

/* Edit Mode Container */
.task-item.editing {
    background: #FFFFFF;
    border: 2px solid #0077B6;
    cursor: default;
}

.task-item.editing:hover {
    transform: none;
}

/* Task Body Structure */
.task-body {
    margin-top: 8px;
}

/* View Mode Content */
.task-content-view .task-title {
    font-size: 14px;
    font-weight: 600;
    color: #1F2937;
    line-height: 1.4;
}

.task-content-view .task-description {
    font-size: 13px;
    color: #6B7280;
    margin-top: 4px;
    line-height: 1.5;
}

/* Edit Mode Content */
.task-content-edit {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.task-edit-title {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    color: #1F2937;
    background: #FFFFFF;
    min-height: 20px;
    resize: none;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.task-edit-title:focus {
    outline: none;
    border-color: #0077B6;
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.1);
}

.task-edit-description {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    border-radius: 6px;
    font-size: 13px;
    font-family: inherit;
    color: #4B5563;
    background: #FFFFFF;
    min-height: 20px;
    resize: none;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.task-edit-description:focus {
    outline: none;
    border-color: #0077B6;
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.1);
}

/* Edit Mode Actions */
.task-edit-actions {
    display: flex;
    align-items: center;
    gap: 4px;
}

.task-btn.task-save-btn {
    color: #10B981;
}

.task-btn.task-save-btn:hover {
    background: rgba(16, 185, 129, 0.1);
    color: #059669;
}

.task-btn.task-cancel-btn {
    color: #6B7280;
}

.task-btn.task-cancel-btn:hover {
    background: rgba(107, 114, 128, 0.1);
    color: #4B5563;
}

.task-btn.task-delete-btn {
    color: #EF4444;
}

.task-btn.task-delete-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #DC2626;
}

/* Edit Button Styling */
.task-btn.task-edit-btn {
    color: #6B7280;
}

.task-btn.task-edit-btn:hover {
    background: rgba(0, 119, 182, 0.1);
    color: #0077B6;
}

/* Completed Task in Edit Mode */
.task-item.completed.editing {
    opacity: 1;
}

.task-item.completed.editing .task-title {
    text-decoration: none;
    color: #1F2937;
}

/* --------------------------------------------------------------------------
   10.5 Completed Tasks Section
   -------------------------------------------------------------------------- */

.column-completed {
    margin-top: 16px;
}

.completed-separator {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.separator-line {
    flex: 1;
    height: 1px;
    background: rgba(0, 0, 0, 0.1);
}

.separator-text {
    font-size: 11px;
    font-weight: 600;
    color: #9CA3AF;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* --------------------------------------------------------------------------
   10.6 Add Task Button & Inline Form
   -------------------------------------------------------------------------- */

.add-task-btn {
    width: 100%;
    padding: 12px;
    margin-top: 12px;
    border: 2px dashed rgba(0, 0, 0, 0.15);
    border-radius: 8px;
    background: transparent;
    color: #6B7280;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.add-task-btn:hover {
    border-color: #0077B6;
    color: #0077B6;
    background: rgba(0, 119, 182, 0.05);
}

/* ========================================
   Inline Add Form - Redesign v2.1 (Task-Item Style)
   ======================================== */

.inline-add-form {
    background: #fff;
    border: 2px solid #0077B6;
    border-radius: 12px;
    margin-top: 12px;
    overflow: hidden;
}

/* Header Row - IDENTISCH zu .task-header */
.inline-add-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    margin-bottom: 0;
    /* KEIN background! KEIN border-bottom! */
}

/* Left Side: Creation Date */
.inline-add-meta-left {
    display: flex;
    align-items: center;
    gap: 8px;
}

.inline-add-date-display {
    font-size: 11px;             /* War 13px - KORRIGIERT */
    font-weight: 500;
    color: #9CA3AF;              /* War #374151 - KORRIGIERT */
}

.inline-add-id-badge {
    font-size: 10px;
    font-weight: 600;
    color: #0077B6;
    background: rgba(0, 119, 182, 0.1);
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
}

/* Right Side: Actions (Datepicker + Save + Cancel) */
.inline-add-actions {
    display: flex;
    align-items: center;
    gap: 4px;
    position: relative;
}

/* Datepicker Button nutzt .task-btn Styling */
/* Fix 22: Datepicker mit Datum = identisch zu task-due-wrapper */
.inline-add-datepicker-btn.has-date {
    /* Override task-btn defaults */
    width: auto;
    height: auto;
    /* Identisch zu task-due-wrapper */
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(0, 119, 182, 0.08);
    border: 1px solid rgba(0, 119, 182, 0.2);
    border-radius: 6px;
    font-size: 11px;
    color: #0077B6;
    font-weight: 500;
}

.inline-add-datepicker-btn.has-date .task-icon {
    width: 14px;
    height: 14px;
}

.datepicker-date-text {
    font-size: 11px;
    font-weight: 500;
    color: #0077B6;
    line-height: 1;
}

/* Save/Cancel Buttons: Nutzen Standard task-save-btn / task-cancel-btn Styling */
/* (Keine Custom-Overrides nötig - Klassen in HTML hinzugefügt) */

/* Hidden Date Input (for Flatpickr) */
.inline-add-date-input {
    position: absolute;
    left: 0;
    top: 100%;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

/* Body (Textareas) */
.inline-add-body {
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inline-add-title,
.inline-add-desc {
    width: 100%;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 14px;
    font-family: inherit;
    resize: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
    outline: none;
}

.inline-add-title {
    font-weight: 500;
    min-height: 42px;
    color: #1d1d1f;
}

.inline-add-desc {
    font-weight: 400;
    color: #6B7280;
    min-height: 60px;
}

.inline-add-title:focus,
.inline-add-desc:focus {
    border-color: #0077B6;
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.1);
}

.inline-add-title::placeholder,
.inline-add-desc::placeholder {
    color: #9CA3AF;
}

/* Error Animation */
.inline-add-title.error {
    border-color: #EF4444;
    animation: shake 0.4s ease;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

/* --------------------------------------------------------------------------
   10.7 AI Suggestions Container
   -------------------------------------------------------------------------- */

.ai-suggestions-container {
    background: linear-gradient(135deg, rgba(0, 119, 182, 0.06), rgba(0, 119, 182, 0.02));
    border: 1px solid rgba(0, 119, 182, 0.15);
    border-radius: 12px;
    padding: 16px;
    margin-bottom: 16px;
}

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

.ai-suggestions-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #0077B6;
}

.ai-suggestions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ai-suggestion-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(0, 119, 182, 0.15);
    border-radius: 8px;
    padding: 12px;
}

.suggestion-priority {
    padding-top: 4px;
}

.suggestion-content {
    flex: 1;
    min-width: 0;
}

.suggestion-title {
    font-size: 14px;
    font-weight: 500;
    color: #1d1d1f;
    margin-bottom: 4px;
}

.suggestion-description {
    font-size: 13px;
    color: #6B7280;
    line-height: 1.4;
}

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

.suggestion-accept-btn,
.suggestion-reject-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.suggestion-accept-btn {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.suggestion-accept-btn:hover {
    background: #10B981;
    color: white;
}

.suggestion-reject-btn {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}

.suggestion-reject-btn:hover {
    background: #EF4444;
    color: white;
}

/* --------------------------------------------------------------------------
   10.7.1 Inline AI Suggestions (in ToDo Column)
   -------------------------------------------------------------------------- */

.task-item.ai-suggestion-inline {
    border: 1px dashed rgba(0, 119, 182, 0.3);
    background: #FFFFFF;
}

.task-item.ai-suggestion-inline .task-ai-badge.suggestion {
    font-size: 11px;
    color: #9CA3AF;  /* Grau statt blau */
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    background: none;
    padding: 0;
}

.task-item.ai-suggestion-inline .suggestion-accept-btn,
.task-item.ai-suggestion-inline .suggestion-reject-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: transparent;
}

/* Accept-Button: IMMER grün */
.task-item.ai-suggestion-inline .suggestion-accept-btn {
    color: #10B981;
}

.task-item.ai-suggestion-inline .suggestion-accept-btn:hover {
    background: rgba(16, 185, 129, 0.1);
}

/* Reject-Button: Grau, rot bei hover */
.task-item.ai-suggestion-inline .suggestion-reject-btn {
    color: #9CA3AF;
}

.task-item.ai-suggestion-inline .suggestion-reject-btn:hover {
    background: rgba(239, 68, 68, 0.1);
    color: #EF4444;
}

/* Fix 3: Padding zwischen Header und Titel = 12px */
.task-item.ai-suggestion-inline .task-header {
    margin-bottom: 4px;
}
.task-item.ai-suggestion-inline .task-body {
    margin-top: 8px;
}

/* Description Lists in Suggestions */
.task-description .description-list {
    margin: 4px 0 0 0;
    padding-left: 16px;
    list-style-type: disc;
}

.task-description .description-list li {
    margin: 2px 0;
    line-height: 1.4;
}

.task-description p {
    margin: 0 0 4px 0;
}

.task-description p:last-child {
    margin-bottom: 0;
}

/* Fix 7: Column Title nimmt Platz ein → Button rechts vor Count */
.task-column[data-status="todo"] .column-header .column-title {
    flex-grow: 1;
}

/* ========================================
   FIX 12: KI VORSCHLÄGE BUTTON + MODAL + SKELETON
   ======================================== */

/* KI Vorschläge Button im Header - Pill-Style (Fix 24) */
.generate-ai-inline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 5px 12px;
    background: rgba(0, 119, 182, 0.12);
    color: #0077B6;
    border: 1px solid rgba(0, 119, 182, 0.3);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    line-height: 1.2;
    white-space: nowrap;
    flex-shrink: 0;
}

.generate-ai-inline:hover:not(:disabled) {
    background: rgba(0, 119, 182, 0.2);
    border-color: rgba(0, 119, 182, 0.5);
}

.generate-ai-inline:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.generate-ai-inline.loading {
    pointer-events: none;
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 0.8; }
}

/* Confirmation Modal Overlay */
.ai-confirm-modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
    animation: fadeIn 0.2s ease;
}

/* Confirmation Modal */
.ai-confirm-modal {
    background: white;
    border-radius: 16px;
    padding: 24px;
    max-width: 360px;
    width: 90%;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    animation: scaleIn 0.2s ease;
}

.ai-confirm-icon {
    font-size: 32px;
    text-align: center;
    margin-bottom: 12px;
}

.ai-confirm-title {
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    margin: 0 0 12px 0;
    color: #1a1a1a;
}

.ai-confirm-text {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.ai-confirm-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
}

/* Fix 14: Features mit SVG-Icons statt ::before Checkmarks */
.ai-confirm-features li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 13px;
    color: #444;
    padding: 8px 0;
}

.ai-confirm-features .feature-icon {
    flex-shrink: 0;
    margin-top: 2px;
}

.ai-confirm-actions {
    display: flex;
    gap: 12px;
}

.ai-confirm-cancel {
    flex: 1;
    padding: 10px 16px;
    border: 1px solid #ddd;
    background: white;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}

.ai-confirm-cancel:hover {
    background: #f5f5f5;
}

/* Fix 14: Submit Button mit #0077B6 statt Gradient */
.ai-confirm-submit {
    flex: 1;
    padding: 10px 16px;
    border: none;
    background: #0077B6;
    color: white;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.ai-confirm-submit:hover {
    background: #006299;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 119, 182, 0.4);
}

/* Fix 16: Skeleton Loading Item - Header + 2 Body-Zeilen */
.task-item.skeleton-item {
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px dashed rgba(0, 119, 182, 0.3);
    border-radius: 8px;
    margin-bottom: 8px;
}

.skeleton-header {
    margin-bottom: 10px;
}

.skeleton-title {
    height: 16px;
    width: 70%;
    border-radius: 4px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.skeleton-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.skeleton-line {
    height: 12px;
    border-radius: 4px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.skeleton-line:first-child {
    width: 100%;
    animation-delay: 0.1s;
}

.skeleton-line.short {
    width: 60%;
    animation-delay: 0.2s;
}

@keyframes shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes scaleIn {
    from { transform: scale(0.95); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

/* Animation for accepting suggestion */
.task-item.ai-suggestion-inline.accepting {
    animation: acceptPulse 0.3s ease-out forwards;
}

@keyframes acceptPulse {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        background: rgba(16, 185, 129, 0.2);
        border-color: #10B981;
    }
    100% {
        opacity: 0;
        transform: scale(0.95);
    }
}

/* Animation for rejecting suggestion */
.task-item.ai-suggestion-inline.rejecting {
    animation: rejectSlide 0.25s ease-out forwards;
}

@keyframes rejectSlide {
    0% {
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        opacity: 0;
        transform: translateX(-20px);
    }
}

/* --------------------------------------------------------------------------
   10.8 Empty State
   -------------------------------------------------------------------------- */

.tasks-empty-state {
    text-align: center;
    padding: 60px 20px;
}

.empty-icon {
    color: #D1D5DB;
    margin-bottom: 16px;
}

.empty-title {
    font-size: 18px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 0 0 8px 0;
}

.empty-text {
    font-size: 14px;
    color: #6B7280;
    margin: 0 0 24px 0;
}

.empty-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.empty-add-btn,
.empty-ai-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.empty-add-btn {
    background: transparent;
    color: #0077B6;
    border: 1px solid #0077B6;
}

.empty-add-btn:hover {
    background: rgba(0, 119, 182, 0.08);
}

.empty-ai-btn {
    background: #0077B6;
    color: white;
    border: 1px solid #0077B6;
}

.empty-ai-btn:hover {
    background: #006299;
}

/* --------------------------------------------------------------------------
   10.9 AI Generate Button
   -------------------------------------------------------------------------- */

/* FIX 12D: Alten Button verstecken (ersetzt durch Header-Button) */
.ai-generate-container {
    display: none;
    /* margin-top: 16px; */
}

.ai-generate-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 20px;
    background: #0077B6;
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.ai-generate-btn:hover {
    background: #006299;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 119, 182, 0.3);
}

.ai-generate-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.ai-generate-btn.loading {
    pointer-events: none;
}

.ai-generate-btn.loading .task-icon {
    animation: spin 1s linear infinite;
}

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

/* --------------------------------------------------------------------------
   10.10 Undo Toast
   -------------------------------------------------------------------------- */

.undo-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 12px;
    background: #1F2937;
    color: white;
    padding: 12px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
    z-index: 10001;
    animation: slideUpToast 0.3s ease;
}

@keyframes slideUpToast {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.undo-text {
    font-size: 14px;
    max-width: 250px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.undo-btn {
    background: transparent;
    border: none;
    color: #60A5FA;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    margin: -4px -8px;
    transition: color 0.15s ease;
}

.undo-btn:hover {
    color: #93C5FD;
}

/* Toast Animation Classes */
.undo-toast.show {
    animation: slideUpToast 0.3s ease forwards;
}

.undo-toast:not(.show) {
    animation: slideDownToast 0.3s ease forwards;
}

@keyframes slideDownToast {
    from {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
    to {
        opacity: 0;
        transform: translateX(-50%) translateY(20px);
    }
}

/* --------------------------------------------------------------------------
   10.11 Move Menu (Mobile Bottom Sheet)
   -------------------------------------------------------------------------- */

.move-menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 10001;
    animation: fadeIn 0.2s ease;
}

.move-menu {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #fff;
    border-radius: 16px 16px 0 0;
    padding: 20px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    z-index: 10002;
    transform: translateY(100%);
    transition: transform 0.3s ease;
}

.move-menu.open {
    transform: translateY(0);
}

@keyframes slideUpMenu {
    from {
        transform: translateY(100%);
    }
    to {
        transform: translateY(0);
    }
}

.move-menu-header {
    font-size: 16px;
    font-weight: 600;
    color: #1d1d1f;
    text-align: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.move-option {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    padding: 14px 16px;
    background: transparent;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    color: #1d1d1f;
    cursor: pointer;
    transition: background 0.15s ease;
}

.move-option:hover {
    background: rgba(0, 0, 0, 0.05);
}

.move-option.active {
    background: rgba(0, 119, 182, 0.1);
    color: #0077B6;
}

.move-menu-cancel {
    width: 100%;
    margin-top: 12px;
    padding: 14px;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    color: #6B7280;
    cursor: pointer;
    transition: background 0.15s ease;
}

.move-menu-cancel:hover {
    background: rgba(0, 0, 0, 0.1);
}

/* --------------------------------------------------------------------------
   10.12 Responsive Styles
   -------------------------------------------------------------------------- */

/* Mobile: Swipe Carousel */
@media (max-width: 767px) {
    .tasks-header {
        flex-wrap: wrap;
    }

    .tasks-progress {
        order: 2;
        flex: 0 0 100%;
        max-width: 100%;
        margin-top: 12px;
    }

    .tasks-toggle-completed {
        order: 1;
    }

    .swipe-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-bottom: 12px;
    }

    .swipe-dots .dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: rgba(0, 0, 0, 0.2);
        transition: all 0.2s ease;
    }

    .swipe-dots .dot.active {
        background: #0077B6;
        transform: scale(1.25);
    }

    .tasks-columns-wrapper {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0;
        padding-bottom: 8px;
    }

    .tasks-columns-wrapper::-webkit-scrollbar {
        display: none;
    }

    .task-column {
        flex: 0 0 100%;
        scroll-snap-align: start;
        min-width: 100%;
        box-sizing: border-box;
    }

    /* Hide drag handle on mobile */
    .task-drag-handle {
        display: none;
    }

    /* Show move button on mobile */
    .task-move-btn {
        display: flex;
    }

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

    .empty-add-btn,
    .empty-ai-btn {
        width: 100%;
        justify-content: center;
    }
}

/* Desktop: Show drag, hide move */
@media (min-width: 768px) {
    .swipe-dots {
        display: none;
    }

    .task-move-btn {
        display: none;
    }

    .task-drag-handle {
        display: flex;
    }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1024px) {
    .task-column {
        min-width: 220px;
    }

    .column-title {
        font-size: 13px;
    }
}

/* Small phones */
@media (max-width: 480px) {
    .tasks-header {
        padding: 0;
    }

    .task-column {
        padding: 12px;
    }

    .task-item {
        padding: 10px;
        gap: 8px;
    }

    .column-header {
        font-size: 13px;
    }

    .task-title {
        font-size: 13px;
    }

    .task-description {
        font-size: 12px;
    }

    .task-btn {
        width: 32px;
        height: 32px;
    }

    .undo-toast {
        left: 16px;
        right: 16px;
        transform: none;
        bottom: 16px;
    }

    .undo-text {
        flex: 1;
        max-width: none;
    }
}

/* ==========================================================================
   11. TIMELINE TAB v2.0 - Interactive Status Hub
   ========================================================================== */

/* --------------------------------------------------------------------------
   11.1 Timeline Section Container
   -------------------------------------------------------------------------- */

.om-timeline-section {
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 20px;
    margin-bottom: 20px;
}

.om-timeline-header {
    margin-bottom: 20px;
}

.om-timeline-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-800, #1F2937);
    margin: 0;
}

.om-timeline-title svg {
    color: var(--color-primary, #0077B6);
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   11.2 Desktop Timeline (Horizontal) - ≥768px
   -------------------------------------------------------------------------- */

.om-timeline-container {
    position: relative;
}

/* Desktop: Horizontal Timeline - v2.0 mit abwechselnden Labels */
.om-timeline-desktop {
    position: relative;
    padding: 30px 20px;  /* Platz für Labels oben + unten */
    min-height: 90px;
}

/* Progress Track (Horizontal Line) - vertikal zentriert */
.om-timeline-track {
    position: absolute;
    top: 50%;
    left: 40px;
    right: 40px;
    height: 4px;
    background: #E5E5EA;  /* Report Card Grau */
    border-radius: 2px;
    transform: translateY(-50%);
    z-index: 1;
}

.om-timeline-progress {
    height: 100%;
    background: #8E8E93;  /* Report Card Progress Grau */
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Dots Container - vertikal zentriert */
.om-timeline-dots {
    position: absolute;
    top: 50%;
    left: 40px;
    right: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;  /* Dots vertikal zur Linie zentrieren */
    transform: translateY(-50%);
    z-index: 2;
}

/* Individual Dot - relativ für absolut positionierte Labels */
.om-timeline-dot {
    position: relative;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* Hover-Effekt auf den Kreis, nicht den Container */
.om-timeline-dot:hover .om-dot-circle {
    transform: scale(1.1);
}

.om-dot-circle {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 2px solid var(--gray-300, #D1D5DB);
    transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

/* Dot States */
.om-timeline-dot.completed .om-dot-circle {
    background: #8E8E93;  /* GRAU - wie Report Card */
    border-color: #8E8E93;
}

/* Kein Checkmark bei Completed - nur gefüllter grauer Kreis */

/* v2.4: Keine Größenänderung - alle Dots gleich groß */
.om-timeline-dot.current .om-dot-circle {
    background: #34C759;
    border-color: #34C759;
    box-shadow: 0 0 12px rgba(52, 199, 89, 0.5);
    z-index: 3;
}

/* Kein innerer Kreis - wie Report Card */

.om-timeline-dot.upcoming .om-dot-circle {
    background: var(--gray-100, #F3F4F6);
    border-color: var(--gray-300, #D1D5DB);
}

.om-timeline-dot.rejected .om-dot-circle {
    border-color: var(--color-danger, #EF4444);
}

.om-timeline-dot.rejected.current .om-dot-circle {
    background: var(--color-danger, #EF4444);
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0.2);
}

/* Dot Label - Base (Desktop: absolut positioniert) */
.om-timeline-desktop .om-dot-label {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 11px;
    font-weight: 500;
    color: #8E8E93;
    white-space: nowrap;
    pointer-events: none;
}

/* Ungerade Dots (1,3,5,7): Label OBEN */
.om-timeline-desktop .om-timeline-dot:nth-child(odd) .om-dot-label {
    bottom: calc(100% + 6px);
    top: auto;
}

/* Gerade Dots (2,4,6): Label UNTEN */
.om-timeline-desktop .om-timeline-dot:nth-child(even) .om-dot-label {
    bottom: auto;
    top: calc(100% + 6px);
}

/* Aktueller Status: Label GRÜN + fett */
/* v2.4: Keine font-size Änderung - alle Labels gleich groß */
.om-timeline-dot.current .om-dot-label {
    color: #34C759;
    font-weight: 600;
}

/* Abgelehnt (aktuell): Label ROT */
.om-timeline-dot.rejected.current .om-dot-label {
    color: #FF3B30;
}

/* Dot Date - Base (Desktop: absolut positioniert, gegenüber vom Label) */
.om-timeline-desktop .om-dot-date {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    color: #8E8E93;
    white-space: nowrap;
    pointer-events: none;
}

/* Ungerade Dots (1,3,5,7): Label OBEN → Datum UNTEN */
.om-timeline-desktop .om-timeline-dot:nth-child(odd) .om-dot-date {
    bottom: auto;
    top: calc(100% + 6px);
}

/* Gerade Dots (2,4,6): Label UNTEN → Datum OBEN */
.om-timeline-desktop .om-timeline-dot:nth-child(even) .om-dot-date {
    bottom: calc(100% + 6px);
    top: auto;
}

/* Pulse Animation */
@keyframes omTimelinePulse {
    0%, 100% {
        box-shadow: 0 0 0 6px rgba(52, 199, 89, 0.2);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(52, 199, 89, 0.1);
    }
}

/* --------------------------------------------------------------------------
   11.3 Mobile Timeline (Vertical Zigzag) - <768px - v2.3
   Dots centered, labels/dates alternating left/right
   -------------------------------------------------------------------------- */

.om-timeline-mobile {
    display: none;
    flex-direction: column;
    gap: 0;
    position: relative;
    padding: 8px 0;
}

/* Vertikale Linie durch die MITTE */
.om-timeline-mobile::before {
    content: '';
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 16px;
    bottom: 16px;
    width: 2px;
    background: var(--gray-200, #E5E7EB);
    border-radius: 1px;
}

/* Jeder Dot als 3-spaltige Flexbox-Zeile */
.om-timeline-mobile .om-timeline-dot {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 10px 0;
    gap: 0;
    cursor: pointer;
}

/* Dot-Kreis immer in der Mitte (order: 2) */
.om-timeline-mobile .om-dot-circle {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    order: 2;
    margin: 0 8px;
}

/* v2.4: Current Dot Mobile - KEINE Größenänderung mehr, alle Dots gleich groß */

/* Label + Date Basis-Styles */
.om-timeline-mobile .om-dot-label,
.om-timeline-mobile .om-dot-date {
    width: calc(50% - 20px);
    padding: 0 8px;
    box-sizing: border-box;
}

.om-timeline-mobile .om-dot-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--gray-700, #374151);
}

.om-timeline-mobile .om-dot-date {
    font-size: 13px;
    color: var(--gray-500, #6B7280);
}

/* Odd Rows (1,3,5,7): Datum links, Label rechts */
.om-timeline-mobile .om-timeline-dot:nth-child(odd) .om-dot-date {
    order: 1;
    text-align: right;
}

.om-timeline-mobile .om-timeline-dot:nth-child(odd) .om-dot-label {
    order: 3;
    text-align: left;
}

/* Even Rows (2,4,6): Label links, Datum rechts */
.om-timeline-mobile .om-timeline-dot:nth-child(even) .om-dot-label {
    order: 1;
    text-align: right;
}

.om-timeline-mobile .om-timeline-dot:nth-child(even) .om-dot-date {
    order: 3;
    text-align: left;
}

/* Aktueller Status: Label + Datum GRÜN */
.om-timeline-mobile .om-timeline-dot.current .om-dot-label {
    color: #34C759;
    font-weight: 600;
}

.om-timeline-mobile .om-timeline-dot.current .om-dot-date {
    color: #34C759;
    font-weight: 500;
}

/* Abgelehnt Status: ROT */
.om-timeline-mobile .om-timeline-dot.rejected.current .om-dot-label,
.om-timeline-mobile .om-timeline-dot.rejected.current .om-dot-date {
    color: #FF3B30;
}

/* Separator für Abgelehnt - zentriert */
.om-timeline-mobile .om-dot-separator {
    border-top: 1px dashed var(--gray-300, #D1D5DB);
    margin: 8px 25%;
    width: 50%;
}

/* --------------------------------------------------------------------------
   11.3.5 KI-Coaching Section
   Personalisierte Tipps basierend auf Status + UserType
   -------------------------------------------------------------------------- */

.om-coaching-section {
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid rgba(0, 119, 182, 0.12);
    padding: 20px;
    margin-bottom: 16px;
}

.om-coaching-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.om-coaching-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: #1a1a1a;
}

.om-coaching-title svg {
    color: #0077B6;
}

.om-coaching-title h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 600;
}

.om-coaching-badges {
    display: flex;
    align-items: center;
    gap: 8px;
}

.om-coaching-user-type {
    font-size: 12px;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 119, 182, 0.08), rgba(0, 184, 217, 0.08));
    color: #0077B6;
}

.om-coaching-refresh {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    background: #FFFFFF;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.om-coaching-refresh:hover {
    background: rgba(0, 119, 182, 0.05);
    border-color: rgba(0, 119, 182, 0.2);
}

.om-coaching-refresh:active {
    transform: scale(0.95);
}

.om-coaching-refresh.spinning svg {
    animation: spin 1s linear infinite;
}

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

.om-coaching-refresh svg {
    color: #666;
    transition: color 0.2s ease;
}

.om-coaching-refresh:hover svg {
    color: #0077B6;
}

/* Coaching Container */
.om-coaching-container {
    min-height: 80px;
}

/* Coaching Card Container (v2.0 - Glassmorphic) */
.om-coaching-card {
    padding: 0; /* Kein Padding mehr - Cards haben eigenes */
}

/* ========================================
   Dezente Headline mit Urgency-Dot (v2.0)
   ======================================== */
.om-coaching-headline {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
    padding-left: 4px;
}

/* Urgency-Dot vor der Headline */
.om-coaching-headline::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 7px;
    flex-shrink: 0;
    background: var(--urgency-color, #10b981);
    box-shadow: 0 0 8px var(--urgency-color, #10b981);
}

.om-coaching-headline.urgency-high { --urgency-color: #ef4444; }
.om-coaching-headline.urgency-medium { --urgency-color: #f59e0b; }
.om-coaching-headline.urgency-low { --urgency-color: #10b981; }

.om-coaching-headline-text {
    font-size: 15px;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
}

/* ========================================
   Tips Container (v2.1 - 2-Spalten Grid)
   ======================================== */
.om-coaching-tips {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 1fr; /* v2.4: Alle Zeilen gleich hoch (höchste Card bestimmt) */
    align-items: stretch; /* v2.4: Cards füllen volle Zeilenhöhe */
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0 0 12px 0;
}

/* ========================================
   Kompakte Glassmorphic Tip Cards (v2.1)
   ======================================== */
.om-coaching-tip-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(12px) saturate(180%);
    -webkit-backdrop-filter: blur(12px) saturate(180%);
    border-radius: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    display: flex;
    gap: 10px;
    align-items: flex-start;
    transition: all 0.2s ease;
    /* v2.4: Keine Höhenbegrenzung - Text vollständig anzeigen */
    height: auto;
    min-height: auto;
    overflow: visible;
    animation: tipCardFadeIn 0.3s ease forwards;
    opacity: 0;
    transform: translateY(8px);
}

.om-coaching-tip-card:hover {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

/* Entry Animation */
@keyframes tipCardFadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Legacy Support (falls alte Struktur noch verwendet wird) */
.om-coaching-tip {
    display: flex;
    gap: 12px;
    padding: 12px;
    border-radius: 8px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.2s ease;
}

.om-coaching-tip:last-child {
    margin-bottom: 0;
}

.om-coaching-tip:hover {
    background: #FFFFFF;
    border-color: rgba(0, 119, 182, 0.1);
}

/* ========================================
   Icon-Badges (v2.1 - einheitlich Blau)
   ======================================== */
.tip-icon-badge {
    width: 24px;
    height: 24px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(0, 119, 182, 0.1);
    color: #0077B6;
}

.tip-icon-badge svg {
    width: 14px;
    height: 14px;
}

/* Legacy Support - alte tip-icon Klassen */
.tip-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.tip-icon svg {
    width: 12px;
    height: 12px;
}

/* Type: Critical - Rot */
.tip-icon.type-critical {
    background: rgba(239, 68, 68, 0.15);
}
.tip-icon.type-critical svg {
    color: #DC2626;
}

/* Type: Warning - Orange */
.tip-icon.type-warning {
    background: rgba(245, 158, 11, 0.15);
}
.tip-icon.type-warning svg {
    color: #D97706;
}

/* Type: Info - Blau */
.tip-icon.type-info {
    background: rgba(59, 130, 246, 0.15);
}
.tip-icon.type-info svg {
    color: #2563EB;
}

/* Type: Success - Grün */
.tip-icon.type-success {
    background: rgba(16, 185, 129, 0.15);
}
.tip-icon.type-success svg {
    color: #059669;
}

.tip-content {
    flex: 1;
    min-width: 0;
    overflow: visible; /* Text NICHT abschneiden */
    /* v2.4: Sicherstellen, dass Content nicht komprimiert wird */
    flex-shrink: 0;
}

.tip-text {
    font-weight: 500;
    font-size: 14px;
    color: #1a1a1a;
    display: block;
    line-height: 1.4;
    /* Text umbrechen statt abschneiden (v1.9.8) */
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.tip-reason {
    font-size: 12px;
    color: #666;
    display: block;
    margin-top: 4px;
    line-height: 1.3;
    /* Text umbrechen statt abschneiden (v1.9.8) */
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

/* ========================================
   Next-Step Card (v2.0 - Glassmorphic)
   ======================================== */
.om-coaching-next-step-card {
    background: linear-gradient(135deg,
        rgba(0, 119, 182, 0.08),
        rgba(0, 119, 182, 0.04));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 12px;
    border: 1px solid rgba(0, 119, 182, 0.12);
    display: flex;
    align-items: center;
    gap: 12px;
    animation: tipCardFadeIn 0.3s ease forwards;
    animation-delay: 0.25s;
    opacity: 0;
    transform: translateY(10px);
}

.next-step-arrow {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(0, 119, 182, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0077b6;
    flex-shrink: 0;
}

.next-step-arrow svg {
    width: 18px;
    height: 18px;
}

.next-step-content {
    flex: 1;
    min-width: 0;
}

.next-step-label {
    font-size: 11px;
    font-weight: 600;
    color: #0077b6;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
}

.next-step-action {
    font-size: 14px;
    font-weight: 500;
    color: #1a1a1a;
    line-height: 1.4;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.next-step-deadline {
    font-size: 12px;
    color: #666;
    padding: 4px 10px;
    background: rgba(255, 255, 255, 0.6);
    border-radius: 6px;
    white-space: nowrap;
}

/* Legacy Support - alte next-step Klassen */
.om-coaching-next-step {
    margin-top: 16px;
    padding: 12px 14px;
    background: rgba(0, 119, 182, 0.08);
    border-radius: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

/* Loading State */
.om-coaching-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 24px;
    color: #666;
    justify-content: center;
}

.om-coaching-loading .spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(0, 119, 182, 0.2);
    border-top-color: #0077B6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

.om-coaching-loading span {
    font-size: 14px;
}

/* Error State */
.om-coaching-error {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    color: #666;
}

.om-coaching-error svg.error-icon {
    color: #ef4444;
    width: 24px;
    height: 24px;
}

.om-coaching-error .error-text {
    font-size: 14px;
    color: #666;
}

.om-coaching-error button {
    padding: 8px 16px;
    background: #0077B6;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s ease;
}

.om-coaching-error button:hover {
    background: #005a8c;
}

/* ========================================
   Coaching Skeleton Loading (v2.5)
   ======================================== */

/* Coaching Skeleton Card */
.coaching-skeleton-card {
    background: rgba(255, 255, 255, 0.8);
    border: 1px dashed rgba(0, 119, 182, 0.3);
    border-radius: 10px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Skeleton Lines mit Shimmer */
.coaching-skeleton-text,
.coaching-skeleton-reason {
    height: 14px;
    border-radius: 4px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
}

.coaching-skeleton-text {
    width: 75%;
}

.coaching-skeleton-reason {
    width: 100%;
    animation-delay: 0.1s;
}

.coaching-skeleton-reason.short {
    width: 60%;
    animation-delay: 0.2s;
}

/* Next-Step Skeleton */
.coaching-skeleton-next-step {
    background: rgba(0, 119, 182, 0.05);
    border: 1px dashed rgba(0, 119, 182, 0.2);
    border-radius: 12px;
    padding: 14px 16px;
    margin-top: 12px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.coaching-skeleton-next-step .skeleton-arrow {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    flex-shrink: 0;
}

.coaching-skeleton-next-step .skeleton-action {
    flex: 1;
    height: 16px;
    border-radius: 4px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    animation-delay: 0.15s;
}

.coaching-skeleton-next-step .skeleton-deadline {
    width: 60px;
    height: 24px;
    border-radius: 6px;
    background: linear-gradient(90deg, #e0e0e0 25%, #f5f5f5 50%, #e0e0e0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    animation-delay: 0.25s;
}


/* ========================================
   Mobile Responsive (v2.0)
   ======================================== */
@media (max-width: 480px) {
    .om-coaching-section {
        padding: 16px;
    }

    .om-coaching-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    /* Grid auf 1 Spalte für Mobile */
    .om-coaching-tips {
        grid-template-columns: 1fr;
    }

    /* Kompakte Tip Cards */
    .om-coaching-tip-card {
        padding: 10px 12px;
        gap: 10px;
    }

    .om-coaching-tip-card:hover {
        transform: translateY(-1px);
    }

    .tip-icon-badge {
        width: 22px;
        height: 22px;
    }

    .tip-icon-badge svg {
        width: 12px;
        height: 12px;
    }

    .om-coaching-next-step-card {
        flex-wrap: wrap;
        padding: 12px 14px;
    }

    .next-step-arrow {
        width: 28px;
        height: 28px;
    }

    .next-step-arrow svg {
        width: 16px;
        height: 16px;
    }

    .next-step-content {
        width: 100%;
        order: 2;
    }

    .next-step-deadline {
        order: 3;
        width: 100%;
        text-align: center;
        margin-top: 8px;
    }

    /* Legacy Support */
    .om-coaching-tip {
        padding: 10px;
        gap: 10px;
    }

    .om-coaching-next-step {
        padding: 10px 12px;
    }

    .next-step-action {
        min-width: 150px;
    }
}

/* --------------------------------------------------------------------------
   11.4 Deadlines Section
   -------------------------------------------------------------------------- */

.om-deadlines-section {
    background: #FFFFFF;
    border-radius: 16px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    padding: 20px;
    margin-bottom: 80px; /* Space for FAB */
}

.om-deadlines-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.om-deadlines-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 600;
    color: var(--gray-800, #1F2937);
    margin: 0;
}

.om-deadlines-title svg {
    color: var(--color-primary, #0077B6);
    flex-shrink: 0;
}

.om-deadlines-count {
    font-size: 12px;
    font-weight: 500;
    color: var(--gray-500, #6B7280);
    background: var(--gray-100, #F3F4F6);
    padding: 4px 10px;
    border-radius: 12px;
}

/* Deadline Cards Container */
.om-deadlines-container {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 12px;
}

/* Individual Deadline Card */
.om-deadline-card {
    background: var(--gray-50, #F9FAFB);
    border-radius: 12px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    padding: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.om-deadline-card:hover {
    background: #FFFFFF;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.om-deadline-card.today {
    border-color: var(--color-warning, #F59E0B);
    background: rgba(245, 158, 11, 0.05);
}

.om-deadline-card.overdue {
    border-color: var(--color-danger, #EF4444);
    background: rgba(239, 68, 68, 0.05);
}

/* Card Content */
.om-deadline-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    background: rgba(0, 119, 182, 0.1);
    border-radius: 8px;
    margin-bottom: 8px;
}

.om-deadline-icon svg {
    width: 16px;
    height: 16px;
    color: var(--color-primary, #0077B6);
}

.om-deadline-card.overdue .om-deadline-icon {
    background: rgba(239, 68, 68, 0.1);
}

.om-deadline-card.overdue .om-deadline-icon svg {
    color: var(--color-danger, #EF4444);
}

.om-deadline-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-800, #1F2937);
    margin: 0 0 6px 0;
    line-height: 1.3;
}

.om-deadline-due {
    font-size: 12px;
    color: var(--gray-500, #6B7280);
    margin-bottom: 10px;
}

/* Countdown Badge */
.om-deadline-countdown {
    display: inline-block;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border-radius: 6px;
    background: var(--gray-100, #F3F4F6);
    color: var(--gray-600, #4B5563);
}

.om-deadline-card.today .om-deadline-countdown {
    background: var(--color-warning, #F59E0B);
    color: #FFFFFF;
}

.om-deadline-card.overdue .om-deadline-countdown {
    background: var(--color-danger, #EF4444);
    color: #FFFFFF;
}

/* Empty State */
.om-deadlines-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    text-align: center;
}

.om-deadlines-empty svg {
    color: var(--gray-300, #D1D5DB);
    margin-bottom: 16px;
}

.om-deadlines-empty p {
    font-size: 15px;
    font-weight: 500;
    color: var(--gray-600, #4B5563);
    margin: 0 0 6px 0;
}

.om-deadlines-empty span {
    font-size: 13px;
    color: var(--gray-400, #9CA3AF);
}

/* --------------------------------------------------------------------------
   11.5 FAB - Besichtigungs-Assistent
   -------------------------------------------------------------------------- */

.om-besichtigung-fab {
    position: fixed;
    bottom: 24px;
    right: 24px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: linear-gradient(135deg, #0077B6 0%, #00B4D8 100%);
    color: #FFFFFF;
    border: none;
    border-radius: 28px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 119, 182, 0.35);
    transition: all 0.2s ease;
    z-index: 100;
}

.om-besichtigung-fab:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 119, 182, 0.4);
}

.om-besichtigung-fab:active {
    transform: translateY(0);
}

.om-besichtigung-fab svg {
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   11.6 Timeline Tab Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 768px) {
    /* Switch to Vertical Timeline */
    .om-timeline-desktop {
        display: none;
    }

    .om-timeline-mobile {
        display: flex;
    }

    /* Adjust sections */
    .om-timeline-section,
    .om-deadlines-section {
        padding: 16px;
        border-radius: 12px;
    }

    /* Single column for deadline cards */
    .om-deadlines-container {
        grid-template-columns: 1fr;
    }

    /* FAB: Icon only on mobile */
    .om-besichtigung-fab {
        width: 56px;
        height: 56px;
        padding: 0;
        border-radius: 50%;
        justify-content: center;
    }

    .om-fab-text {
        display: none;
    }
}

@media (max-width: 480px) {
    .om-timeline-section,
    .om-deadlines-section {
        padding: 14px;
        margin-bottom: 14px;
    }

    .om-deadlines-section {
        margin-bottom: 70px;
    }

    .om-timeline-title,
    .om-deadlines-title {
        font-size: 15px;
    }

    .om-besichtigung-fab {
        bottom: 16px;
        right: 16px;
        width: 52px;
        height: 52px;
    }
}

/* ==========================================================================
   FINANCING SECTION - RESPONSIVE
   ========================================================================== */

/* Tablet (< 1024px) */
@media (max-width: 1024px) {
    .financing-stats {
        grid-template-columns: repeat(4, 1fr);
    }

    .financing-inputs-3col {
        grid-template-columns: repeat(2, 1fr);
    }

    .financing-inputs-3col .financing-input-group:last-child {
        grid-column: 1 / -1;
    }
}

/* Mobile (< 768px) */
@media (max-width: 768px) {
    .financing-section {
        padding: 12px;
    }

    /* 2×2 Grid für Stats */
    .financing-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    /* 2 Spalten für Inputs statt 1 */
    .financing-inputs {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* Nebenkosten: 2 + 1 Layout */
    .financing-inputs-3col {
        grid-template-columns: repeat(2, 1fr);
    }

    .financing-inputs-3col .financing-input-group:last-child {
        grid-column: 1 / -1;
    }

    .financing-input {
        font-size: 16px; /* Prevent iOS zoom */
    }

    .financing-save-btn {
        padding: 14px 24px;
    }

    /* Labels kompakter */
    .financing-label {
        font-size: 12px;
    }

    .financing-section-label {
        font-size: 10px;
    }

    /* Results kompakter */
    .financing-result-label {
        font-size: 12px;
    }

    .financing-result-value {
        font-size: 13px;
    }
}

/* Small Mobile (< 480px) */
@media (max-width: 480px) {
    .financing-section {
        padding: 10px;
    }

    /* Stats noch kompakter */
    .financing-stats .stat-card {
        padding: 12px 8px;
    }

    .financing-stats .stat-value {
        font-size: 18px;
    }

    .financing-stats .stat-label {
        font-size: 10px;
    }

    /* 1 Spalte für sehr kleine Screens - alle Inputs */
    .financing-inputs {
        grid-template-columns: 1fr;
    }

    .financing-inputs-3col {
        grid-template-columns: 1fr;
    }

    .financing-inputs-3col .financing-input-group:last-child {
        grid-column: auto;
    }

    /* Results: Stack Layout */
    .financing-result-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .financing-result-value {
        font-size: 15px;
    }
}

/* ==========================================================================
   FINANCING - UTILITY CLASSES
   ========================================================================== */

/* Hidden class for variant switching */
.hidden {
    display: none !important;
}

/* Spin animation for loading */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.animate-spin {
    animation: spin 1s linear infinite;
}

/* Autofill Badge */
.autofill-badge {
    position: absolute;
    right: 48px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
}

/* ==========================================================================
   FINANCING - TOAST NOTIFICATIONS
   ========================================================================== */

.financing-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 20px;
    background: rgba(30, 30, 30, 0.95);
    color: white;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 500;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(20px);
    z-index: 100000;
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.financing-toast.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
}

.financing-toast-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.95), rgba(5, 150, 105, 0.95));
}

.financing-toast-error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.95), rgba(220, 38, 38, 0.95));
}

.financing-toast svg {
    flex-shrink: 0;
}

/* ==========================================================================
   ANALYSE SEGMENT CONTROL (v5.0)
   ========================================================================== */

.analyse-segment-container {
    display: flex;
    justify-content: center;
    padding: 0 0 20px 0;
    margin-bottom: 16px;
    border-bottom: 1px solid var(--gray-200, #e5e7eb);
}

/* Desktop: Hide segment control (using sub-nav instead) */
@media (min-width: 768px) {
    .analyse-segment-container {
        display: none;
    }
}

.analyse-segment-control {
    display: inline-flex;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 8px;     /* FIX: 10px → 8px */
    padding: 6px;           /* FIX: 4px → 6px */
    gap: 2px;
}

.analyse-segment-btn {
    padding: 12px 24px;     /* FIX: 10px → 12px vertical */
    border: none;
    background: transparent;
    border-radius: 6px;     /* FIX: 8px → 6px (kleiner als Container) */
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-600, #4b5563);
    cursor: pointer;
    transition: all 0.2s ease;
}

.analyse-segment-btn:hover {
    color: var(--gray-800, #1f2937);
}

.analyse-segment-btn.active {
    background: #FFFFFF;
    color: var(--gray-900, #111827);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);  /* FIX: Stärkerer Shadow */
}

/* Segment Panels */
.analyse-segment-panel {
    display: none;
}

.analyse-segment-panel.active {
    display: block;
}

/* Mobile: Underline Style */
@media (max-width: 767px) {
    .analyse-segment-container {
        padding: 0;
        margin-bottom: 20px;
        border-bottom: none;
    }

    .analyse-segment-control {
        width: 100%;
        background: none;
        border-radius: 0;
        border-bottom: 1px solid var(--gray-200, #e5e7eb);
        padding: 0;
        gap: 0;
    }

    .analyse-segment-btn {
        flex: 1;
        border-radius: 0;
        padding: 6px 16px;      /* Reduziert: 14px → 6px für ~30px Höhe */
        border-bottom: 2px solid transparent;
        margin-bottom: -1px;
        font-size: 13px;
    }

    .analyse-segment-btn.active {
        background: none;
        box-shadow: none;
        color: var(--color-primary, #0077B6);
        border-bottom-color: var(--color-primary, #0077B6);
    }
}

/* ==========================================================================
   FINANCING CHARTS (v5.0)
   ========================================================================== */

.financing-chart-container {
    background: #FFFFFF;
    border: 1px solid var(--gray-200, #e5e7eb);
    border-radius: 12px;
    padding: 16px;          /* FIX: 20px → 16px (kompakter) */
    margin-bottom: 0;       /* Grid handles gaps */
}

/* Charts Grid - 2x2 auf Desktop */
.financing-charts-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 20px;
}

.financing-chart-container.investor-only,
.financing-chart-container.eigennutzer-only {
    display: none;
}

/* Show based on user type - controlled by JS */
.financing-chart-container.investor-only.visible,
.financing-chart-container.eigennutzer-only.visible {
    display: block;
}

.financing-chart-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.financing-chart-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--gray-800, #1f2937);
    margin: 0;
}

.financing-chart-info {
    background: none;
    border: none;
    color: var(--gray-400, #9ca3af);
    cursor: help;
    padding: 4px;
    border-radius: 4px;
    transition: color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.financing-chart-info:hover {
    color: var(--gray-600, #4b5563);
}

.financing-chart-canvas-wrapper {
    position: relative;
    width: 100%;
    /* REMOVED: min-height: 160px; - Chart.js handles sizing */
    margin-bottom: 12px;
}

.financing-chart-canvas-wrapper canvas {
    width: 100% !important;
    /* REMOVED: height: auto !important; - Let HTML height attributes work */
    max-height: 200px;      /* Limit max height for compact display */
}

.financing-chart-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--gray-100, #f3f4f6);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--gray-600, #4b5563);
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    flex-shrink: 0;
}

.financing-chart-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--gray-100, #f3f4f6);
}

.financing-chart-summary.three-col {
    grid-template-columns: repeat(3, 1fr);
}

.chart-summary-item {
    text-align: center;
}

.chart-summary-label {
    display: block;
    font-size: 11px;
    color: var(--gray-500, #6b7280);
    margin-bottom: 4px;
}

.chart-summary-value {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-900, #111827);
}

.chart-summary-value.highlight {
    color: var(--color-primary, #0077B6);
}

.chart-summary-value.success {
    color: var(--color-success, #10B981);
}

.chart-summary-value.danger {
    color: var(--color-danger, #EF4444);
}

.financing-chart-highlight {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    background: rgba(245, 158, 11, 0.1);
    border-radius: 8px;
    margin-top: 16px;
    font-size: 13px;
    color: var(--gray-700, #374151);
}

.financing-chart-highlight strong {
    color: #D97706;
    font-weight: 600;
}

/* Mobile: 1 Spalte statt 2x2 Grid */
@media (max-width: 767px) {
    .financing-charts-grid {
        grid-template-columns: 1fr;  /* 1 column on mobile */
    }

    .financing-chart-container {
        padding: 16px;
        margin-bottom: 12px;  /* Restore margin for single column */
    }

    .financing-chart-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .financing-chart-summary.three-col {
        grid-template-columns: repeat(2, 1fr);
    }

    .financing-chart-summary .chart-summary-item:last-child {
        grid-column: span 2;
    }

    .financing-chart-legend {
        gap: 12px;
    }

    .financing-chart-highlight {
        flex-wrap: wrap;
    }
}

/* ==========================================================================
   ECB BADGE (v5.0)
   ========================================================================== */

.ecb-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 2px 6px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.15), rgba(0, 119, 182, 0.15));
    color: #003366;
    border: 1px solid rgba(0, 51, 102, 0.2);
    border-radius: 4px;
    margin-left: 6px;
    vertical-align: middle;
    cursor: help;
    transition: all 0.2s ease;
}

.ecb-badge:hover {
    background: linear-gradient(135deg, rgba(0, 51, 102, 0.25), rgba(0, 119, 182, 0.25));
    transform: scale(1.05);
}

.ecb-badge.loading {
    opacity: 0.6;
    animation: ecbPulse 1s ease-in-out infinite;
}

.ecb-badge.active {
    background: linear-gradient(135deg, #003366, #0077B6);
    color: white;
    border-color: transparent;
}

.ecb-badge.error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.25));
    color: #dc2626;
    border-color: rgba(239, 68, 68, 0.3);
}

@keyframes ecbPulse {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.ecb-refresh-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    margin-left: 4px;
    background: rgba(0, 51, 102, 0.08);
    border: 1px solid rgba(0, 51, 102, 0.15);
    border-radius: 6px;
    color: #003366;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.ecb-refresh-btn:hover {
    background: rgba(0, 51, 102, 0.15);
    border-color: rgba(0, 51, 102, 0.25);
    transform: scale(1.05);
}

.ecb-refresh-btn:active {
    transform: scale(0.95);
}

.ecb-refresh-btn.loading svg {
    animation: ecbSpin 1s linear infinite;
}

@keyframes ecbSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

.financing-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

/* Mobile */
@media (max-width: 767px) {
    .ecb-badge {
        font-size: 8px;
        padding: 1px 4px;
    }

    .ecb-refresh-btn {
        width: 32px;
        height: 32px;
    }
}

/* ==========================================================================
   17. TOAST NOTIFICATIONS
   ========================================================================== */

.omm-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12),
                0 0 0 1px rgba(0, 0, 0, 0.05);
    font-size: 14px;
    font-weight: 500;
    color: #1d1d1f;
    z-index: 100001;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.omm-toast.visible {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}

.omm-toast-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.omm-toast-message {
    flex: 1;
    white-space: nowrap;
}

/* Success Toast */
.omm-toast-success {
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15), rgba(16, 185, 129, 0.05));
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.omm-toast-success .omm-toast-icon {
    color: #10B981;
}

.omm-toast-success .omm-toast-message {
    color: #047857;
}

/* Error Toast */
.omm-toast-error {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.omm-toast-error .omm-toast-icon {
    color: #ef4444;
}

.omm-toast-error .omm-toast-message {
    color: #dc2626;
}

/* Info Toast */
.omm-toast-info {
    background: linear-gradient(135deg, rgba(0, 119, 182, 0.15), rgba(0, 119, 182, 0.05));
    border: 1px solid rgba(0, 119, 182, 0.3);
}

.omm-toast-info .omm-toast-icon {
    color: #0077B6;
}

.omm-toast-info .omm-toast-message {
    color: #005c8a;
}

/* Mobile Toast */
@media (max-width: 767px) {
    .omm-toast {
        bottom: 80px;
        left: 16px;
        right: 16px;
        transform: translateY(20px);
        max-width: none;
        width: auto;
        padding: 10px 16px;
        font-size: 13px;
    }

    .omm-toast.visible {
        transform: translateY(0);
    }
}

/* ==========================================================================
   FINANZIERUNGSRECHNER v4.2 - STACKED LAYOUT

   Version: 4.2
   Date: 2026-01-18

   Structure:
   1. Content-Wrapper (Vertikal gestapelt, max-width 900px)
   2. Form-Column (100% Breite)
   3. Charts-Column (100% Breite, unter Formular)
   4. Basis vs. Experten Sektionen
   5. Neue UI-Komponenten (Checkbox, Info-Boxes, etc.)
   6. Chart-Konsistenz (180px Canvas-Höhe)
   7. Mobile Responsive (<768px, <480px)

   Changelog v4.2:
   - Side-by-Side Layout entfernt (bessere Übersichtlichkeit)
   - Max-Width 900px, zentriert
   - Charts unter dem Formular statt daneben
   ========================================================================== */

/* ==========================================================================
   1. STACKED LAYOUT v4.2 (alle Bildschirmgrößen)
   - Vertikal gestapelt für bessere Übersichtlichkeit
   - Max-Width 900px, zentriert
   ========================================================================== */

.financing-content-wrapper {
    display: flex;
    flex-direction: column;
    gap: 24px;
    max-width: 900px;
    margin: 0 auto;
}

.financing-form-column {
    width: 100%;
}

.financing-charts-column {
    width: 100%;
    position: static;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ==========================================================================
   2. BASIS VS. EXPERTEN SEKTIONEN
   ========================================================================== */

/* Basis-Sektion (immer offen) */
.financing-section-basis {
    margin-bottom: 20px;
}

/* Experten-Sektion (aufklappbar) */
.financing-section-experten {
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 20px;
    background: #FFFFFF;
}

.financing-section-experten-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    cursor: pointer;
    background: rgba(0, 119, 182, 0.05);
    transition: background 0.2s ease;
    user-select: none;
}

.financing-section-experten-header:hover {
    background: rgba(0, 119, 182, 0.08);
}

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

.financing-section-experten-header-left svg {
    width: 20px;
    height: 20px;
    color: var(--color-primary, #0077B6);
}

.financing-section-experten-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-800, #1F2937);
}

.financing-section-experten-header-right {
    display: flex;
    align-items: center;
    gap: 16px;
}

.financing-section-experten-summary {
    font-size: 13px;
    color: var(--gray-500, #6B7280);
    max-width: 300px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.financing-section-experten-chevron {
    width: 20px;
    height: 20px;
    color: var(--gray-400, #9CA3AF);
    transition: transform 0.3s ease;
}

.financing-section-experten.open .financing-section-experten-chevron {
    transform: rotate(90deg);
}

.financing-section-experten-content {
    padding: 20px;
    display: none;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.financing-section-experten.open .financing-section-experten-content {
    display: block;
}

/* Experten Sub-Sections */
.financing-experten-subsection {
    margin-bottom: 24px;
}

.financing-experten-subsection:last-child {
    margin-bottom: 0;
}

.financing-experten-subsection-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-600, #4B5563);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 16px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.financing-experten-subsection-title svg {
    width: 14px;
    height: 14px;
    opacity: 0.7;
}

/* ==========================================================================
   3. NEUE UI-KOMPONENTEN
   ========================================================================== */

/* Zusammenveranlagung Checkbox */
.financing-checkbox-wrapper {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(0, 119, 182, 0.05);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease;
    margin-bottom: 16px;
}

.financing-checkbox-wrapper:hover {
    background: rgba(0, 119, 182, 0.08);
}

.financing-checkbox-wrapper input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--color-primary, #0077B6);
    cursor: pointer;
    flex-shrink: 0;
}

.financing-checkbox-wrapper label {
    font-size: 14px;
    font-weight: 500;
    color: var(--gray-700, #374151);
    cursor: pointer;
}

/* Zusammenveranlagung Fields Container */
.financing-zusammenveranlagung-fields {
    padding: 16px;
    background: rgba(0, 119, 182, 0.03);
    border: 1px solid rgba(0, 119, 182, 0.1);
    border-radius: 8px;
    margin-bottom: 16px;
}

/* Info-Box (Splittingvorteil, etc.) */
.financing-info-box {
    padding: 12px 16px;
    border-radius: 8px;
    margin-top: 12px;
    font-size: 13px;
    line-height: 1.5;
}

.financing-info-box.success {
    background: rgba(16, 185, 129, 0.1);
    border-left: 4px solid #10B981;
    color: #047857;
}

.financing-info-box.info {
    background: rgba(0, 119, 182, 0.1);
    border-left: 4px solid #0077B6;
    color: #005a8c;
}

.financing-info-box.warning {
    background: rgba(245, 158, 11, 0.1);
    border-left: 4px solid #F59E0B;
    color: #92400E;
}

.financing-info-box strong {
    font-weight: 600;
}

/* Auto-Badge */
.financing-auto-badge {
    display: inline-block;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    background: var(--color-primary, #0077B6);
    color: white;
    border-radius: 4px;
    margin-left: 8px;
    vertical-align: middle;
}

/* Gutachten-Box */
.financing-gutachten-box {
    padding: 16px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.3);
    border-radius: 8px;
    margin-top: 12px;
}

.financing-gutachten-box .financing-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #92400E;
}

.financing-gutachten-box .financing-label svg {
    width: 16px;
    height: 16px;
    color: #F59E0B;
}

.financing-gutachten-box .financing-calculated {
    margin-top: 8px;
    color: var(--gray-600, #4B5563);
}

.financing-gutachten-box .financing-calculated.success {
    color: #047857;
    font-weight: 500;
}

/* Analyse-Box (Sensitivität, Steuer-Szenarien) */
.financing-analyse-box {
    padding: 20px;
    background: #FFFFFF;
    border: 2px solid rgba(0, 119, 182, 0.2);
    border-radius: 12px;
    margin-top: 20px;
    position: relative;
}

.financing-analyse-box.steuer-szenarien {
    border-color: rgba(16, 185, 129, 0.3);
}

.financing-analyse-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.financing-analyse-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--gray-800, #1F2937);
}

.financing-analyse-title svg {
    width: 18px;
    height: 18px;
    color: var(--color-primary, #0077B6);
}

/* Feature Badge (NEU) */
.financing-feature-badge {
    position: absolute;
    top: -10px;
    right: 16px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.3);
}

/* Analyse Button */
.financing-analyse-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    background: var(--color-primary, #0077B6);
    color: white;
    font-size: 14px;
    font-weight: 500;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.financing-analyse-btn:hover {
    background: #005a8c;
    transform: translateY(-1px);
}

.financing-analyse-btn svg {
    width: 16px;
    height: 16px;
}

/* Sensitivitäts-Basis-Kennzahlen */
.financing-sens-basis {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.financing-sens-stat {
    text-align: center;
    padding: 12px;
    background: rgba(0, 119, 182, 0.05);
    border-radius: 8px;
}

.financing-sens-stat-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-primary, #0077B6);
}

.financing-sens-stat-label {
    font-size: 12px;
    color: var(--gray-500, #6B7280);
    margin-top: 4px;
}

/* Kritische Schwellenwerte */
.financing-sens-thresholds {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-bottom: 20px;
}

.financing-threshold-card {
    padding: 16px;
    background: #FFFFFF;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 8px;
}

.financing-threshold-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.financing-threshold-card-header svg {
    width: 18px;
    height: 18px;
}

.financing-threshold-card-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-700, #374151);
}

.financing-threshold-row {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    margin-bottom: 6px;
}

.financing-threshold-row:last-child {
    margin-bottom: 0;
}

.financing-threshold-label {
    color: var(--gray-500, #6B7280);
}

.financing-threshold-value {
    font-weight: 600;
}

.financing-threshold-value.current {
    color: var(--color-primary, #0077B6);
}

.financing-threshold-value.critical {
    color: #EF4444;
}

.financing-threshold-value.puffer {
    color: #10B981;
}

/* Sensitivitäts-Ranking */
.financing-sens-ranking {
    margin-bottom: 20px;
}

.financing-ranking-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-700, #374151);
    margin-bottom: 12px;
}

.financing-ranking-item {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.financing-ranking-position {
    width: 20px;
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-500, #6B7280);
}

.financing-ranking-bar-wrapper {
    flex: 1;
    height: 20px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    overflow: hidden;
}

.financing-ranking-bar {
    height: 100%;
    background: var(--color-primary, #0077B6);
    border-radius: 4px;
    transition: width 0.5s ease;
}

.financing-ranking-label {
    width: 100px;
    font-size: 13px;
    color: var(--gray-600, #4B5563);
}

.financing-ranking-elast {
    width: 60px;
    text-align: right;
    font-size: 13px;
    font-weight: 500;
}

/* Loading State */
.financing-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    color: var(--gray-500, #6B7280);
    font-size: 14px;
}

.financing-loading::before {
    content: "";
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-200, #E5E7EB);
    border-top-color: var(--color-primary, #0077B6);
    border-radius: 50%;
    margin-right: 12px;
    animation: spin 0.8s linear infinite;
}

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

/* Empfehlungen */
.financing-recommendations {
    padding: 16px;
    background: rgba(16, 185, 129, 0.05);
    border-radius: 8px;
}

.financing-recommendation-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 13px;
    color: var(--gray-700, #374151);
    margin-bottom: 8px;
}

.financing-recommendation-item:last-child {
    margin-bottom: 0;
}

.financing-recommendation-item::before {
    content: "💡";
    flex-shrink: 0;
}

/* Steuer-Szenarien Top-Results */
.szenarien-top-results {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.szenarien-top-card {
    text-align: center;
    padding: 16px 12px;
    background: linear-gradient(135deg, rgba(0, 119, 182, 0.05) 0%, rgba(0, 119, 182, 0.1) 100%);
    border-radius: 8px;
}

.szenarien-top-icon {
    font-size: 20px;
    margin-bottom: 8px;
}

.szenarien-top-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--gray-500, #6B7280);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}

.szenarien-top-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--gray-800, #1F2937);
    margin-bottom: 4px;
}

.szenarien-top-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--color-primary, #0077B6);
}

/* Steuer-Szenarien Tabelle */
.financing-szenarien-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

.financing-szenarien-table thead {
    background: rgba(0, 0, 0, 0.03);
}

.financing-szenarien-table th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    color: var(--gray-600, #4B5563);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.financing-szenarien-table tbody tr {
    transition: background 0.2s ease;
}

.financing-szenarien-table tbody tr:hover {
    background: rgba(0, 119, 182, 0.03);
}

.financing-szenarien-table tbody tr.current {
    background: rgba(0, 119, 182, 0.05);
    font-weight: 500;
}

.financing-szenarien-table tbody tr.optimal {
    background: rgba(16, 185, 129, 0.1);
}

.financing-szenarien-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.financing-szenarien-table td.positive {
    color: #10B981;
    font-weight: 500;
}

.financing-szenarien-table td.negative {
    color: #EF4444;
    font-weight: 500;
}

.financing-szenarien-table .szenario-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 8px;
    background: var(--gray-300, #D1D5DB);
}

.financing-szenarien-table .szenario-indicator.current {
    background: var(--color-primary, #0077B6);
}

.financing-szenarien-table .szenario-indicator.optimal {
    background: #10B981;
}

/* ==========================================================================
   4. CHART-KONSISTENZ (180px Canvas-Höhe)
   ========================================================================== */

/* Override für 1er-Grid in Charts-Column */
.financing-charts-column .financing-chart-container {
    margin-bottom: 0; /* Gap wird von Flexbox gehandhabt */
}

.financing-charts-column .financing-chart-canvas-wrapper {
    height: 180px; /* FEST für alle Charts */
}

.financing-charts-column .financing-chart-canvas-wrapper canvas {
    height: 100% !important;
}

/* Chart Legend in Charts-Column */
.financing-charts-column .financing-chart-legend {
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 24px;
    margin-top: 12px;
}

/* Chart Summary in Charts-Column */
.financing-charts-column .financing-chart-summary {
    min-height: 48px;
    padding-top: 12px;
    display: flex;
    justify-content: space-around;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
    margin-top: 12px;
}

/* ==========================================================================
   5. RESPONSIVE - TABLET (768px - 1023px)
   v4.2: Layout-Regeln entfernt (jetzt immer gestapelt)
   ========================================================================== */

@media (max-width: 1023px) {
    /* Experten-Summary kürzer */
    .financing-section-experten-summary {
        max-width: 200px;
    }

    /* Sensitivitäts-Basis 2×2 Grid */
    .financing-sens-basis {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ==========================================================================
   6. RESPONSIVE - MOBILE (≤767px)
   ========================================================================== */

@media (max-width: 767px) {
    .financing-content-wrapper {
        gap: 16px;
    }

    /* Experten-Header kompakter */
    .financing-section-experten-header {
        padding: 12px 16px;
    }

    .financing-section-experten-summary {
        display: none; /* Auf Mobile versteckt */
    }

    .financing-section-experten-content {
        padding: 16px;
    }

    /* Sensitivitäts-Thresholds stacked */
    .financing-sens-thresholds {
        grid-template-columns: 1fr;
    }

    /* Szenarien Top-Results 1-spaltig auf sehr schmalem Screen */
    .szenarien-top-results {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .szenarien-top-card {
        padding: 12px 8px;
    }

    .szenarien-top-label {
        font-size: 10px;
    }

    .szenarien-top-name {
        font-size: 12px;
    }

    .szenarien-top-value {
        font-size: 14px;
    }

    /* Tabelle horizontal scrollbar */
    .financing-analyse-box.steuer-szenarien {
        overflow-x: auto;
    }

    .financing-szenarien-table {
        min-width: 600px;
    }

    /* Charts kleiner */
    .financing-charts-column .financing-chart-canvas-wrapper {
        height: 160px;
    }

    .financing-charts-column .financing-chart-legend {
        gap: 16px;
    }

    .financing-charts-column .financing-chart-legend .legend-label {
        font-size: 11px;
    }
}

/* ==========================================================================
   7. RESPONSIVE - COMPACT MOBILE (≤480px)
   ========================================================================== */

@media (max-width: 480px) {
    /* 2-spaltige Felder */
    .financing-inputs-2col-mobile {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    /* Nebenkosten bleiben 3-spaltig aber kompakter */
    .financing-inputs-3col {
        gap: 8px;
    }

    .financing-inputs-3col .financing-input {
        font-size: 14px;
        padding: 8px;
    }

    /* Inline-Felder */
    .financing-input-inline {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .financing-input-inline .financing-label {
        flex: 1;
    }

    .financing-input-inline .financing-input-wrapper {
        width: 140px;
    }

    /* Sensitivitäts-Basis kompakter */
    .financing-sens-basis {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }

    .financing-sens-stat {
        padding: 10px;
    }

    .financing-sens-stat-value {
        font-size: 16px;
    }

    .financing-sens-stat-label {
        font-size: 11px;
    }

    /* Szenarien Top-Results stacked */
    .szenarien-top-results {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .szenarien-top-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        text-align: left;
    }

    .szenarien-top-card-left {
        display: flex;
        align-items: center;
        gap: 12px;
    }

    .szenarien-top-icon {
        font-size: 24px;
        margin-bottom: 0;
    }

    /* Checkbox kompakter */
    .financing-checkbox-wrapper {
        padding: 10px 12px;
    }

    /* Info-Box kompakter */
    .financing-info-box {
        padding: 10px 12px;
        font-size: 12px;
    }

    /* Charts noch kleiner */
    .financing-charts-column .financing-chart-canvas-wrapper {
        height: 140px;
    }

    .financing-charts-column .financing-chart-summary {
        flex-direction: column;
        gap: 8px;
    }

    .financing-charts-column .chart-summary-item {
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
}

/* ==========================================================================
   8. USER-TYPE SPEZIFISCHE ANZEIGE
   ========================================================================== */

/* Eigennutzer-only Elemente */
.eigennutzer-only {
    display: none;
}

body[data-user-type="eigennutzer"] .eigennutzer-only,
.financing-section[data-user-type="eigennutzer"] .eigennutzer-only {
    display: block;
}

/* Investor-only Elemente */
.investor-only {
    display: none;
}

body[data-user-type="investor"] .investor-only,
.financing-section[data-user-type="investor"] .investor-only {
    display: block;
}

/* Charts sichtbar machen basierend auf UserType */
.financing-chart-container.eigennutzer-only.visible,
.financing-chart-container.investor-only.visible {
    display: block;
}

/* Legend Labels basierend auf UserType */
.legend-label.eigennutzer-only {
    display: none;
}

.legend-label.investor-only {
    display: none;
}

body[data-user-type="eigennutzer"] .legend-label.eigennutzer-only,
.financing-charts-column[data-user-type="eigennutzer"] .legend-label.eigennutzer-only {
    display: inline;
}

body[data-user-type="investor"] .legend-label.investor-only,
.financing-charts-column[data-user-type="investor"] .legend-label.investor-only {
    display: inline;
}

/* ==========================================================================
   9. ANIMATIONS
   ========================================================================== */

@keyframes slideDown {
    from {
        opacity: 0;
        max-height: 0;
    }
    to {
        opacity: 1;
        max-height: 2000px;
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.financing-section-experten-content {
    animation: slideDown 0.3s ease;
}

.financing-info-box {
    animation: fadeInUp 0.3s ease;
}

.financing-gutachten-box {
    animation: fadeInUp 0.3s ease;
}

/* ==========================================================================
   FINANCING TOOLTIPS (Glassmorphic)
   ========================================================================== */

.financing-tooltip {
    position: fixed;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 0, 0, 0.1);
    color: #1f2937;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 400;
    line-height: 1.4;
    max-width: 240px;
    pointer-events: none;
    z-index: 10000;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.2s ease, transform 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.financing-tooltip.show {
    opacity: 1;
    transform: translateY(0);
}

/* Mobile: Tooltip needs pointer-events for tap-to-close */
@media (max-width: 767px) {
    .financing-tooltip {
        pointer-events: auto;
        max-width: 200px;
        font-size: 11px;
        padding: 6px 10px;
    }
}

/* ==========================================================================
   v4.8.0: EXPERTEN-KALKULATION CHECKBOX IM HEADER
   Runde Checkbox ersetzt den Chevron im Experten-Sektion Header
   ========================================================================== */

/* Checkbox-Label im Header (ersetzt Chevron) */
.financing-expert-checkbox-header {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 4px;
    margin-left: auto;
    flex-shrink: 0;
}

.financing-expert-checkbox-header input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

/* Runde Checkbox (Radio-Style) */
.financing-expert-checkmark {
    width: 22px;
    height: 22px;
    border: 2px solid rgba(0, 119, 182, 0.4);
    border-radius: 50%;
    background: white;
    position: relative;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.financing-expert-checkmark::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-primary, #0077B6);
    transition: transform 0.2s ease;
}

/* Hover-Effekt */
.financing-expert-checkbox-header:hover .financing-expert-checkmark {
    border-color: var(--color-primary, #0077B6);
    box-shadow: 0 0 0 3px rgba(0, 119, 182, 0.1);
}

/* Checked State */
.financing-expert-checkbox-header input:checked + .financing-expert-checkmark {
    border-color: var(--color-primary, #0077B6);
}

.financing-expert-checkbox-header input:checked + .financing-expert-checkmark::after {
    transform: translate(-50%, -50%) scale(1);
}

/* Header-Style wenn aktiviert */
.financing-section-experten-header:has(input:checked) {
    background: linear-gradient(135deg, rgba(0, 119, 182, 0.08) 0%, rgba(0, 119, 182, 0.04) 100%);
}

/* Experten-Sektion Ausblenden wenn nicht aktiv */
.financing-section-experten.expert-disabled .financing-section-experten-content {
    display: none !important;
}

/* Header immer sichtbar, auch wenn expert-disabled */
.financing-section-experten.expert-disabled {
    display: block !important;
}

.financing-section-experten.expert-disabled .financing-section-experten-header {
    opacity: 0.85;
}

/* Responsive */
@media (max-width: 480px) {
    .financing-expert-checkmark {
        width: 20px;
        height: 20px;
    }

    .financing-expert-checkmark::after {
        width: 10px;
        height: 10px;
    }
}

/* ==========================================================================
   END OF STYLES
   ========================================================================== */