/* --- Globale Variablen & Grundlegende Stile --- */
:root {
    --color-primary: #007aff; --color-primary-hover: #005ecb;
    --color-success: #34c759; --color-success-hover: #2ca349;
    --color-danger: #ff3b30; --color-danger-hover: #c7001e;
    --color-warning: #ff9500;
    --color-info: #5ac8fa;
    --color-text-primary: #1d1d1f; --color-text-secondary: #6e6e73; --color-text-tertiary: #8a8a8e; --color-text-on-primary: #ffffff;
    
    /* Moderne Liquid-Glass-Hintergründe (Semi-transparent) */
    --bg-main: linear-gradient(135deg, #f5f5f7 0%, #e3e3e9 100%); 
    --bg-container: rgba(255, 255, 255, 0.65); 
    --bg-input: rgba(255, 255, 255, 0.5); 
    --bg-hover: rgba(0, 0, 0, 0.04);
    
    /* Lichtbrechung an den Glaskanten */
    --border-glass: 1px solid rgba(255, 255, 255, 0.4);
    --border-color-input: rgba(0, 0, 0, 0.15); 
    --border-color-divider: rgba(0, 0, 0, 0.08);
    
    --spacing-xs: 4px; --spacing-s: 8px; --spacing-m: 16px; --spacing-l: 24px; --spacing-xl: 32px;
    --radius-l: 20px; --radius-m: 14px; --radius-s: 10px; --radius-full: 50%;
    
    /* Weiche, mehrschichtige Schatten für Tiefenwirkung */
    --shadow-soft: 0 8px 32px 0 rgba(31, 38, 135, 0.04); 
    --shadow-strong: 0 12px 40px 0 rgba(0, 0, 0, 0.06);
    
    --font-stack: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --transition-fast: 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition-medium: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}
body[data-theme="dark"] {
    --color-danger: #ff453a; --color-danger-hover: #ff6a61;
    --color-warning: #ff9f0a;
    --color-info: #64d2ff;
    --color-text-primary: #f5f5f7; --color-text-secondary: #8e8e93; --color-text-tertiary: #636366;
    
    /* Dark-Mode Glassmorphismus */
    --bg-main: linear-gradient(135deg, #0a0a0c 0%, #151518 100%); 
    --bg-container: rgba(28, 28, 30, 0.65); 
    --bg-input: rgba(44, 44, 46, 0.5); 
    --bg-hover: rgba(255, 255, 255, 0.06);
    
    --border-glass: 1px solid rgba(255, 255, 255, 0.08);
    --border-color-input: rgba(255, 255, 255, 0.12); 
    --border-color-divider: rgba(255, 255, 255, 0.08);
    
    --shadow-soft: 0 8px 32px 0 rgba(0, 0, 0, 0.3); 
    --shadow-strong: 0 16px 50px 0 rgba(0, 0, 0, 0.5);
}
body { 
    font-family: var(--font-stack); 
    background: var(--bg-main); 
    background-attachment: fixed;
    color: var(--color-text-primary); 
    margin: 0; 
    padding: 0; 
    line-height: 1.5; 
    transition: background var(--transition-medium), color var(--transition-medium); 
}

/* --- Grundstruktur & Layout --- */
.container { 
    max-width: 1600px; 
    margin: var(--spacing-l) auto; 
    padding: 0 var(--spacing-l); 
    box-sizing: border-box; 
    background-color: var(--bg-container); 
    border-radius: var(--radius-l); 
    border: var(--border-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: var(--shadow-strong); 
    overflow: hidden; 
    transition: background-color var(--transition-medium), border var(--transition-medium); 
    display: flex; 
    flex-direction: column; 
    min-height: calc(100vh - 48px); 
}
.container.hidden { display: none !important; }

main { padding: var(--spacing-xl); flex-grow: 1; position: relative; }
#entryView { display: flex; gap: var(--spacing-xl); }
.main-content { flex: 1; min-width: 0; }
.overview-section.full-width { width: 100%; }

/* --- Animations-Keyframes für das Einblenden --- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- View-Wechsel --- */
main > div { transition: opacity 0.2s ease-out; }

/* --- LOGIN VIEW Styles --- */
.login-container {
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 100vh;
    background: var(--bg-main);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}
.login-card {
    background-color: var(--bg-container);
    border: var(--border-glass);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    padding: 40px;
    border-radius: var(--radius-l);
    box-shadow: var(--shadow-strong);
    width: 100%;
    max-width: 400px;
    text-align: center;
    animation: fadeInUp 0.6s ease-out;
}
.login-logo-img { width: 80px; height: auto; margin-bottom: var(--spacing-m); }
.login-card h2 { margin-top: 0; margin-bottom: var(--spacing-xl); font-weight: 700; }
.login-error {
    color: var(--color-danger);
    background-color: rgba(255, 59, 48, 0.1);
    padding: 10px;
    border-radius: var(--radius-s);
    margin-bottom: var(--spacing-m);
    font-size: 0.9em;
    border: 1px solid rgba(255, 59, 48, 0.2);
}
.login-btn { width: 100%; margin-top: var(--spacing-m); padding: 14px; font-size: 1.1em; }

/* --- Header & Aktionen --- */
header { padding: var(--spacing-xl); border-bottom: 1px solid var(--border-color-divider); transition: border-color var(--transition-medium); position: relative; }
.header-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 20px; }
.header-left { display: flex; align-items: center; gap: 10px; }
#logoLink { display: block; }
#logoImage { max-width: 150px; }

.header-right-group {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--spacing-m);
}

.theme-switcher { position: relative; }
.toggle-label { display: inline-block; cursor: pointer; }
.toggle-switch { width: 52px; height: 32px; background-color: rgba(0,0,0,0.1); border-radius: 16px; position: relative; transition: background-color var(--transition-medium); }
.toggle-switch::before { content: ''; position: absolute; width: 28px; height: 28px; border-radius: 50%; background-color: white; top: 2px; left: 2px; transition: transform var(--transition-medium); box-shadow: 0 2px 4px rgba(0,0,0,0.2); }
#darkModeToggle:checked + .toggle-switch { background-color: var(--color-success); }
#darkModeToggle:checked + .toggle-switch::before { transform: translateX(20px); }
body[data-theme="dark"] .toggle-switch { background-color: rgba(255,255,255,0.15); }

.seasonal-image { width: 90px; height: auto; border-radius: 4px; object-fit: cover; transition: transform 0.3s ease; }
.seasonal-image:hover { transform: scale(1.05) rotate(3deg); }

.header-main-content { display: flex; align-items: center; justify-content: space-between; text-align: center; }
.header-main-left, .header-main-right { flex: 1; }
.header-main-left { display: flex; justify-content: flex-start; }
.header-main-right { display: flex; justify-content: flex-end; }
#backButton { padding: 8px 12px; }
#backButton .icon { width: 16px; height: 16px; margin-right: var(--spacing-xs); }
#headerNavButton { padding: 8px 12px; }
#headerNavButton .icon { width: 16px; height: 16px; margin-left: var(--spacing-xs); }
header h1 { margin: 0; font-size: 2.2em; font-weight: 700; }
header .subtitle { margin: var(--spacing-s) 0; color: var(--color-text-secondary); font-size: 1.1em; padding-bottom: 10px; }

/* --- Globales Dropdown Menü --- */
.nav-menu-dropdown { 
    position: absolute; 
    top: 60px; 
    left: 20px; 
    background-color: var(--bg-container); 
    border: var(--border-glass); 
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border-radius: var(--radius-m); 
    box-shadow: var(--shadow-strong); 
    padding: var(--spacing-s); 
    z-index: 500; 
    display: flex; 
    flex-direction: column; 
    gap: var(--spacing-s); 
    transform-origin: top left; 
    transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s var(--transition-fast); 
    visibility: visible; 
}
.nav-menu-dropdown.hidden { opacity: 0; transform: scale(0.95); pointer-events: none; visibility: hidden; transition: opacity var(--transition-fast), transform var(--transition-fast), visibility 0s var(--transition-fast); }
.nav-menu-dropdown .menu-item { width: 250px; justify-content: flex-start; padding: 12px 16px; font-size: 1em; }

/* --- Cockpit Ansicht --- */
.cockpit-layout { display: flex; flex-direction: column; gap: var(--spacing-l); margin-top: var(--spacing-l); }
.cockpit-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-l); }
.cockpit-row-4-items { grid-template-columns: repeat(4, 1fr); }

/* UPDATE: Nav-Cards mit edlem Milchglas-Effekt und sanftem Verflüssigungs-Hover */
.nav-card { 
    background-color: var(--bg-container); 
    border: var(--border-glass);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: var(--spacing-l); 
    border-radius: var(--radius-l); 
    cursor: pointer; 
    text-align: center; 
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.3s ease, box-shadow 0.3s ease; 
    box-shadow: var(--shadow-soft); 
    position: relative; 
}
.nav-card:hover { 
    transform: translateY(-4px) scale(1.02); 
    background-color: rgba(255, 255, 255, 0.85);
    box-shadow: 0 15px 35px 0 rgba(31, 38, 135, 0.1);
}
body[data-theme="dark"] .nav-card:hover {
    background-color: rgba(44, 44, 46, 0.85);
    box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 0.6);
}
.nav-card-icon { margin-bottom: var(--spacing-m); color: var(--color-primary); }
.nav-card-icon svg { width: 44px; height: 44px; }
.nav-card h3 { font-size: 1.3em; font-weight: 600; color: var(--color-text-primary); margin-top: 0; margin-bottom: var(--spacing-s); }
.nav-card p { color: var(--color-text-secondary); font-size: 0.95em; margin: 0; }
.nav-card-badge { position: absolute; top: 12px; right: 12px; background-color: var(--color-danger); color: white; min-width: 24px; height: 24px; border-radius: 12px; padding: 0 6px; display: flex; align-items: center; justify-content: center; font-size: 0.8em; font-weight: bold; box-shadow: 0 2px 4px rgba(0,0,0,0.2); }

/* --- Footer --- */
.footer-actions { padding: var(--spacing-m) var(--spacing-xl); background-color: rgba(0,0,0,0.02); border-top: 1px solid var(--border-color-divider); display: flex; justify-content: center; align-items: center; gap: var(--spacing-m); flex-wrap: wrap; transition: background-color var(--transition-medium), border-color var(--transition-medium); }
.data-group { display: flex; gap: var(--spacing-s); }
#dataStatus { font-size: 0.9em; color: var(--color-text-tertiary); text-align: center; flex-grow: 1; }

/* --- Berichts-Ansicht --- */
.filter-section { display: flex; flex-wrap: wrap; gap: var(--spacing-l); align-items: flex-end; margin-bottom: var(--spacing-l); padding-bottom: var(--spacing-xs); animation: fadeInUp 0.5s ease forwards; }
.filter-controls { display: flex; gap: var(--spacing-m); flex-grow: 1; align-items: flex-end; }
.filter-section .form-group { margin-bottom: 0; }
.filter-buttons { display: flex; gap: var(--spacing-s); align-items: flex-end; padding-bottom: 8px; }
.report-actions { display: flex; justify-content: flex-end; gap: var(--spacing-m); margin-bottom: var(--spacing-l); padding: var(--spacing-s) 0; }

/* --- Karten & Sektionen --- */
.card { 
    background-color: var(--bg-container); 
    border: var(--border-glass);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    padding: 28px; 
    border-radius: var(--radius-m); 
    box-shadow: var(--shadow-soft); 
    margin-bottom: var(--spacing-xl); 
    transition: background-color var(--transition-medium), box-shadow var(--transition-medium); 
}
.input-section.card { animation: fadeInUp 0.5s ease forwards; }
.overview-section .overview-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-m); }
.overview-section h2, .input-section h2 { margin-top: 0; margin-bottom: 0; font-size: 1.6em; font-weight: 600; }

/* --- Formularelemente --- */
.form-row { display: flex; gap: var(--spacing-l); align-items: flex-end; margin-bottom: var(--spacing-l); }
.form-group { margin-bottom: var(--spacing-l); }
.form-row .form-group { margin-bottom: 0; }
.form-group.flex-grow { flex: 1; }
.form-group-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--spacing-s); }
.form-group label { display: block; font-weight: 500; color: var(--color-text-primary); margin-bottom: var(--spacing-s); }
.form-group-header label { margin-bottom: 0; }
.form-group input, .form-group select, .form-group textarea { width: 100%; padding: 12px 14px; border: 1px solid var(--border-color-input); border-radius: var(--radius-s); font-size: 1em; box-sizing: border-box; background-color: var(--bg-input); color: var(--color-text-primary); transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-medium); }
.form-group select:disabled { background-color: rgba(0,0,0,0.05); cursor: not-allowed; opacity: 0.7; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.2); }
#pipelineSearchInput { padding: 10px 14px; width: 280px; }
.company-input-wrapper { position: relative; }
#companyName { padding-right: 40px !important; }
.company-status-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background-repeat: no-repeat; background-position: center; background-size: contain; opacity: 0; transition: opacity var(--transition-fast); z-index: 2; }
.company-status-icon.is-valid { opacity: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='3' stroke='%2334c759'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M4.5 12.75l6 6 9-13.5' /%3E%3C/svg%3E"); }
.company-status-icon.is-new { opacity: 1; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke-width='3' stroke='%23007aff'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M12 4.5v15m7.5-7.5h-15' /%3E%3C/svg%3E"); }
textarea { resize: vertical; }
input[type="date"] { position: relative; }
.form-fieldset { border: 1px solid var(--border-color-divider); border-radius: var(--radius-m) var(--radius-m) 0; margin-top: var(--spacing-l); transition: border-color var(--transition-medium); }
#activityForm > .form-row, #activityForm > .form-fieldset, #activityForm > .form-group { margin-bottom: var(--spacing-l); }
#companyForm .button-primary { width: 100%; margin-top: var(--spacing-m); }
.form-fieldset legend { font-size: 0.9em; font-weight: 600; color: var(--color-text-secondary); padding: 0 var(--spacing-s); margin-left: calc(var(--spacing-s) * -1); }
.form-fieldset .form-group:last-child { margin-bottom: var(--spacing-l); }
.form-fieldset > .form-row:last-child { margin-bottom: 0; }

/* --- Live-Vorschläge --- */
.suggestions-container { position: absolute; top: 100%; left: 0; right: 0; background-color: var(--bg-container); border: 1px solid var(--border-color-input); border-top: none; border-radius: 0 0 var(--radius-s) var(--radius-s); box-shadow: var(--shadow-soft); max-height: 200px; overflow-y: auto; z-index: 10; transform-origin: top; animation: fadeIn 0.15s ease-out; }
.suggestion-item { padding: 10px 14px; cursor: pointer; font-size: 1em; }
.suggestion-item:hover, .suggestion-item.is-active { background-color: var(--bg-hover); }
.suggestion-item strong { color: var(--color-primary); }

/* --- Buttons --- */
.button-primary, .button-secondary, .button-export, .button-data, .button-danger, .button-secondary-inline { display: inline-flex; align-items: center; justify-content: center; gap: var(--spacing-s); padding: 12px var(--spacing-l); font-size: 1em; font-weight: 500; border-radius: var(--radius-s); border: none; cursor: pointer; text-align: center; transition: all var(--transition-fast); }
.button-primary { background-color: var(--color-primary); color: var(--color-text-on-primary); }
.button-primary:hover { background-color: var(--color-primary-hover); }
.button-primary:disabled, .button-secondary-inline:disabled, .button-export:disabled { background-color: #d1d1d6; color: var(--color-text-tertiary); cursor: not-allowed; transform: none; box-shadow: none; }
#activityForm .button-primary, .filter-buttons .button-primary { width: 100%; }
.form-button-group { display: flex; gap: var(--spacing-m); align-items: center; margin-bottom: var(--spacing-s); }
.form-button-group .button-primary { flex-grow: 1; }
#saveAndNewSameCompanyBtn { padding: 12px; white-space: nowrap; }
.button-secondary { background-color: transparent; color: var(--color-primary); width: 100%; margin-top: 12px; box-shadow: inset 0 0 0 1px var(--border-color-input); }
.button-secondary:hover { background-color: rgba(0, 122, 255, 0.05); }
.button-secondary-inline { background-color: var(--bg-hover); color: var(--color-text-primary); padding: var(--spacing-s) var(--spacing-m); font-size: 0.9em; box-shadow: none; border: 1px solid var(--border-color-input); }
.button-secondary-inline:hover { background-color: var(--border-color-divider); }
#mergeModal .button-primary { width: 100%; }
.button-danger { background-color: var(--color-danger); color: white; width: 100%; margin-top: 12px; }
#editContactForm .button-danger { background-color: transparent; color: var(--color-danger); box-shadow: inset 0 0 0 1px var(--color-danger); }
#editContactForm .button-danger:hover { background-color: var(--color-danger); color: white; }
.button-danger:hover { background-color: var(--color-danger-hover); }
.button-export { background-color: var(--color-success); color: var(--color-text-on-primary); }
.button-export:hover { background-color: var(--color-success-hover); }
.button-export:disabled { background-color: #d1d1d6; color: var(--color-text-tertiary); cursor: not-allowed; }
.button-data { padding: 10px var(--spacing-m); background-color: var(--bg-main); color: var(--color-text-primary); }
.button-data:hover { background-color: var(--bg-hover); }
.button-data.save { background-color: var(--color-primary); color: white; }
.button-data.save:hover { background-color: var(--color-primary-hover); }
.button-data:disabled { background-color: #e5e5e5; color: var(--color-text-tertiary); cursor: not-allowed; }
.button-inline-add { background-color: transparent; border: none; border-radius: var(--radius-full); width: 32px; height: 32px; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--color-primary); cursor: pointer; transition: background-color var(--transition-fast); }
.button-inline-add:hover { background-color: rgba(0, 122, 255, 0.1); }
.button-inline-add:disabled { color: #d1d1d6; cursor: not-allowed; background-color: transparent; }
.button-primary:focus-visible, .button-secondary:focus-visible, .button-export:focus-visible, .button-data:focus-visible, .button-danger:focus-visible, .button-secondary-inline:focus-visible, .action-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--bg-main), 0 0 0 5px var(--color-primary); }

/* --- Icons & Misc --- */
.icon { width: 20px; height: 20px; }
.button-inline-add .icon { width: 24px; height: 24px; }
.contact-detail-item .icon { width: 16px; height: 16px; color: var(--color-text-tertiary); }
.activity-item .icon { width: 16px; height: 16px; color: var(--color-text-secondary); margin-right: var(--spacing-s); }
.hidden { display: none !important; }
.fade-out { opacity: 0 !important; pointer-events: none !important; }

/* --- Aktivitätenliste --- */
.info-message { color: var(--color-text-secondary); text-align: center; padding: 40px; background-color: var(--bg-hover); border-radius: var(--radius-m); transition: background-color var(--transition-medium); }

/* UPDATE: Milchglas-Effekt auf die Berichts-Kärtchen */
.activity-item { 
    padding: 20px; 
    border-radius: var(--radius-m); 
    margin-bottom: var(--spacing-m); 
    background-color: var(--bg-container); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: var(--border-glass); 
    position: relative; 
    transition: all var(--transition-fast); 
    border-left: 4px solid transparent; 
    animation: fadeInUp 0.5s ease forwards; 
    opacity: 0; 
    animation-delay: calc(var(--item-index) * 50ms); 
}
.activity-item:hover { 
    border-color: transparent; 
    box-shadow: var(--shadow-soft); 
    border-left-color: var(--color-primary); 
}
.activity-item.outcome-success { border-left-color: var(--color-success); }
.activity-item.outcome-resubmission { border-left-color: var(--color-warning); }

/* UPDATE: Gestrichelter Rand und Hintergrund-Muster für negative Ergebnisse */
.activity-item.outcome-no-interest {
    border-left: 4px dashed var(--color-danger);
    background-image: linear-gradient(45deg, rgba(255,59,48,0.03) 25%, transparent 25%, transparent 50%, rgba(255,59,48,0.03) 50%, rgba(255,59,48,0.03) 75%, transparent 75%, transparent);
    background-size: 20px 20px;
}

.activity-item.outcome-customer-care { border-left-color: var(--color-primary); }
.activity-item.outcome-info-sent { border-left-color: var(--color-info); }
.activity-item.outcome-other { border-left-color: var(--border-color-input); }
.activity-item.is-overdue { border-left-color: var(--color-danger); background-color: rgba(255, 59, 48, 0.05); border-left-style: solid; }
body[data-theme="dark"] .activity-item.is-overdue { background-color: rgba(255, 69, 58, 0.1); }

/* BEHOBEN: padding-right: 80px verhindert, dass Text in die absoluten Buttons rechts hineinläuft */
.activity-item .main-info { 
    display: flex; 
    flex-wrap: wrap; 
    align-items: center; 
    gap: 12px var(--spacing-l); 
    padding-bottom: var(--spacing-m); 
    padding-right: 80px; 
    border-bottom: 1px solid var(--border-color-divider); 
    margin-bottom: var(--spacing-m); 
}
.activity-item .time { font-weight: 600; color: var(--color-primary); flex-basis: 150px; flex-shrink: 0; }
.activity-item .customer { font-weight: 500; flex-grow: 1; }
.activity-item .customer .company-name { font-weight: 600; }
.activity-item .customer .contact-name { color: var(--color-text-secondary); }
.activity-item .type { background-color: var(--bg-hover); color: var(--color-text-secondary); padding: 4px 12px; border-radius: 16px; font-size: 0.85em; font-weight: 500; white-space: nowrap; }
.activity-log-section { margin-bottom: var(--spacing-m); }
.activity-log-section h5 { font-size: 0.9em; font-weight: 600; color: var(--color-text-secondary); margin: 0 0 var(--spacing-s) 0; text-transform: uppercase; }
.activity-log-section p { margin: 0; white-space: pre-wrap; }
.activity-next-step { background-color: var(--bg-hover); padding: 12px var(--spacing-m); border-radius: var(--radius-s); display: flex; align-items: center; margin-bottom: var(--spacing-m); transition: background-color var(--transition-medium), border-color var(--transition-medium); }
.activity-next-step strong { margin-right: var(--spacing-s); }
.activity-item.is-overdue .activity-next-step { background-color: rgba(255, 59, 48, 0.1); border: 1px solid rgba(255, 59, 48, 0.2); }
body[data-theme="dark"] .activity-item.is-overdue .activity-next-step { background-color: rgba(255, 69, 58, 0.15); border: 1px solid rgba(255, 69, 58, 0.3); }
.activity-tags-container { display: flex; flex-wrap: wrap; gap: var(--spacing-s); margin-top: var(--spacing-m); }
.activity-tag { background-color: var(--bg-hover); color: var(--color-text-secondary); padding: var(--spacing-xs) 10px; border-radius: var(--radius-s); font-size: 0.85em; }
.activity-actions { position: absolute; top: var(--spacing-m); right: var(--spacing-m); display: flex; gap: var(--spacing-s); opacity: 0; transition: opacity var(--transition-fast); }
.activity-item:hover .activity-actions { opacity: 1; }

/* UPDATE: .action-btn sorgt für runde, edle Knöpfe */
.action-btn { background: var(--bg-hover); border: none; border-radius: var(--radius-full); width: 32px; height: 32px; cursor: pointer; color: var(--color-text-secondary); display: flex; align-items: center; justify-content: center; transition: all var(--transition-fast); }
.action-btn:hover { background-color: var(--color-primary); color: white; transform: scale(1.1); }
.action-btn.delete:hover { background-color: var(--color-danger); }

/* BEHOBEN: Setzt vererbte Abstände für Symbole innerhalb von Aktionsknöpfen auf 0, um den Stift perfekt mittig auszurichten */
.action-btn .icon {
    margin: 0 !important;
}

.activity-item-footer { margin-top: var(--spacing-m); padding-top: var(--spacing-m); border-top: 1px solid var(--border-color-divider); text-align: right; display: flex; justify-content: flex-end; gap: var(--spacing-s); }

/* --- Sidebar --- */
.contact-sidebar { flex-basis: 340px; flex-shrink: 0; align-self: flex-start; }
.sidebar-placeholder { padding: 40px 20px; font-size: 0.9em; color: var(--color-text-secondary); text-align: center; background-color: var(--bg-main); border-radius: var(--radius-m); }
.contact-detail-card { background-color: var(--bg-hover); border-radius: var(--radius-m); padding: var(--spacing-m); margin-bottom: var(--spacing-m); position: relative; border-left: 4px solid transparent; transition: border-color var(--transition-fast); }
.contact-detail-card h4 { margin: 0 0 12px 0; font-weight: 600; font-size: 1.05em; padding-right: 80px; }
.contact-detail-item { display: flex; align-items: center; gap: 10px; font-size: 0.95em; color: var(--color-text-secondary); margin-bottom: var(--spacing-s); }
.contact-detail-item a { color: var(--color-primary); text-decoration: none; word-break: break-all; }
.contact-detail-item a:hover { text-decoration: underline; }
.contact-card-actions { position: absolute; top: 10px; right: 10px; display: flex; gap: var(--spacing-s); opacity: 0; transition: opacity var(--transition-fast); }
.contact-detail-card:hover .contact-card-actions { opacity: 1; }
.favorite-contact-btn .icon-star-solid { display: none; }
.favorite-contact-btn .icon-star-outline { display: block; }
.is-favorite .favorite-contact-btn .icon-star-solid { display: block; color: var(--color-warning); }
.is-favorite .favorite-contact-btn .icon-star-outline { display: none; }
.favorite-contact-btn:hover { background-color: rgba(255, 149, 0, 0.1); color: var(--color-warning); }
.contact-detail-card.is-favorite { border-left-color: var(--color-warning); }
.contact-detail-item.sub-detail { font-size: 0.9em; margin-bottom: var(--spacing-xs); margin-top: calc(var(--spacing-xs) * -1); }

/* --- Firmen-Ansicht & Sortier-Steuerung --- */
.header-button-group { display: flex; gap: var(--spacing-m); }
.company-controls { display: flex; flex-wrap: wrap; gap: var(--spacing-l); align-items: flex-end; animation: fadeInUp 0.5s ease forwards; }
.company-controls .form-group { margin-bottom: 0; }
.sort-controls { display: flex; flex-direction: column; }
.sort-controls label { margin-bottom: var(--spacing-s); font-weight: 500; color: var(--color-text-primary); }
.sort-controls .button-group { display: flex; gap: var(--spacing-s); }
.sort-btn .sort-indicator { display: inline-block; width: 1em; text-align: center; }
.sort-btn.asc .sort-indicator::after { content: '▲'; font-size: 0.7em; }
.sort-btn.desc .sort-indicator::after { content: '▼'; font-size: 0.7em; }

/* UPDATE: Liquid-Glass-Look für Firmenkarten */
.company-list-item { 
    display: grid; 
    grid-template-columns: 1fr auto auto; 
    gap: var(--spacing-l); 
    align-items: center; 
    padding: var(--spacing-m) var(--spacing-l); 
    border-radius: var(--radius-m); 
    margin-bottom: var(--spacing-m); 
    background-color: var(--bg-container); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: var(--border-glass); 
    transition: all var(--transition-fast); 
    animation: fadeInUp 0.5s ease forwards; 
    opacity: 0; 
    animation-delay: calc(var(--item-index) * 50ms); 
}
.company-list-item:hover { 
    border-color: transparent; 
    box-shadow: var(--shadow-soft); 
    transform: translateY(-2px);
}
.company-list-item.is-inactive { background-color: rgba(255, 149, 0, 0.05); border-left: 4px solid var(--color-warning); }
body[data-theme="dark"] .company-list-item.is-inactive { background-color: rgba(255, 159, 10, 0.1); }
.company-info .company-name { font-size: 1.2em; font-weight: 600; }
.company-info .company-meta { font-size: 0.9em; color: var(--color-text-secondary); }
.company-stats { text-align: right; }
.company-stats .stat-value { font-size: 1.2em; font-weight: 600; }
.company-stats .stat-label { font-size: 0.8em; text-transform: uppercase; color: var(--color-text-tertiary); }
.company-actions { display: flex; gap: var(--spacing-s); }
.company-actions .edit-company-btn { opacity: 0; }
.company-list-item:hover .company-actions .edit-company-btn { opacity: 1; }

/* --- Firmen-Detailansicht --- */
.company-detail-header-area {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 0 var(--spacing-xl) 0;
    margin-bottom: var(--spacing-l);
    border-bottom: 1px solid var(--border-color-divider);
}
.company-detail-header-area h2 {
    font-size: 2.2em;
    font-weight: 700;
    margin: 0;
    flex-grow: 1;
}
.company-detail-content-grid {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: var(--spacing-xl);
    align-items: start;
}
#companyDetailInfoCard {
    margin-bottom: 0;
    position: sticky;
    top: var(--spacing-xl);
}
#companyDetailInfoCard .address-heading {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    margin: 0 0 var(--spacing-s) 0;
    display: flex;
    align-items: center;
    gap: var(--spacing-s);
}
#companyDetailInfoCard .address-heading .icon {
    width: 16px; height: 16px;
}
.company-address, .company-address-placeholder {
    font-size: 1.05em;
    color: var(--color-text-secondary);
    line-height: 1.6;
    margin-top: 0;
}

/* --- Styles für die Karte --- */
#companyMap {
    height: 200px;
    width: 100%;
    border-radius: var(--radius-m);
    margin-top: var(--spacing-m);
    z-index: 1;
    border: 1px solid var(--border-color-input);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
#companyMap:hover {
    box-shadow: var(--strong);
    border-color: var(--color-primary);
}

#companyDetailContacts h3 {
    font-size: 1.4em;
    font-weight: 600;
    margin-top: 0;
    margin-bottom: var(--spacing-l);
    border-bottom: 1px solid var(--border-color-divider);
    padding-bottom: var(--spacing-m);
}
#companyDetailContactList {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-m);
}
#companyDetailContactList .contact-detail-card {
    background-color: var(--bg-container);
    border: var(--border-glass);
}
#companyDetailContactList .contact-card-actions {
    opacity: 1;
}

/* --- Fokus-Kampagne --- */

/* UPDATE: Premium "Liquid Glass" Look für Fokus-Karten */
.focus-campaign-item { 
    padding: var(--spacing-m) var(--spacing-l); 
    border-radius: var(--radius-m); 
    margin-bottom: var(--spacing-l); 
    background-color: var(--bg-container); 
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--border-glass); 
    transition: all var(--transition-medium); 
    animation: fadeInUp 0.5s ease forwards; 
    opacity: 0; 
    animation-delay: calc(var(--item-index) * 50ms); 
}
.focus-campaign-item:hover { 
    border-color: transparent; 
    box-shadow: var(--shadow-strong); 
    transform: translateY(-3px);
}
.focus-item-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--spacing-l); padding-bottom: var(--spacing-m); margin-bottom: var(--spacing-m); border-bottom: 1px solid var(--border-color-divider); }
.focus-company-info .company-name { font-size: 1.2em; font-weight: 600; }
.focus-company-info .last-contact-date { font-size: 0.9em; color: var(--color-text-secondary); }
.focus-item-view { padding-bottom: var(--spacing-m); }
.focus-view-grid { display: grid; grid-template-columns: auto 1fr; gap: var(--spacing-xs) var(--spacing-m); align-items: center; font-size: 0.95em; margin-bottom: var(--spacing-m); }
.focus-view-label { font-weight: 600; color: var(--color-text-secondary); }
.focus-view-value { color: var(--color-text-primary); }
.focus-item-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-l); align-items: flex-end; }
.focus-item-body .form-group { margin-bottom: 0; }
.focus-item-body .form-group label { font-size: 0.9em; margin-bottom: var(--spacing-s); }
.focus-item-body .form-group select, .focus-item-body .form-group input { padding: 8px 10px; }
.focus-item-actions { display: flex; justify-content: flex-end; gap: var(--spacing-s); align-items: center; }
.focus-item-actions .button-primary, .focus-item-actions .button-secondary-inline { padding: 8px 12px; }
.status-badge { padding: 4px 12px; border-radius: 16px; font-size: 0.85em; font-weight: 500; white-space: nowrap; color: white; }
.status-badge.status-offen { background-color: var(--color-warning); }
.status-badge.status-kontaktiert { background-color: var(--color-primary); }
.status-badge.status-erledigt { background-color: var(--color-success); }
.focus-campaign-item:not(.is-editing) .focus-item-body { display: none; }
.focus-campaign-item.is-editing .focus-item-view { display: none; }
.focus-campaign-item.is-editing { border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1); }

/* --- Pipeline Ansicht --- */
.pipeline-board { display: flex; gap: var(--spacing-l); overflow-x: auto; padding: var(--spacing-s) var(--spacing-xl); margin: 0 calc(var(--spacing-xl) * -1); }
.pipeline-stage { flex: 1 1 280px; background-color: rgba(0,0,0,0.03); border-radius: var(--radius-l); display: flex; flex-direction: column; transition: all var(--transition-medium); animation: fadeInUp 0.5s ease forwards; opacity: 0; animation-delay: calc(var(--item-index) * 70ms); border: var(--border-glass); }
body[data-theme="dark"] .pipeline-stage { background-color: rgba(255,255,255,0.03); }
.pipeline-stage-header { padding: var(--spacing-m) var(--spacing-l); border-bottom: 1px solid var(--border-color-divider); }
.pipeline-stage-header h3 { margin: 0; font-size: 1.05em; font-weight: 600; }
.pipeline-stage-cards { flex-grow: 1; padding: var(--spacing-s) var(--spacing-s) var(--spacing-l); display: flex; flex-direction: column; gap: var(--spacing-s); min-height: 300px; }

/* UPDATE: "Liquid Glass" Look für Pipeline Karten */
.pipeline-card { 
    background-color: var(--bg-container); 
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: var(--border-glass);
    border-radius: var(--radius-m); 
    padding: var(--spacing-m); 
    box-shadow: var(--shadow-soft); 
    transition: transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast); 
    cursor: pointer; 
}
.pipeline-card:hover { 
    transform: translateY(-3px) scale(1.02); 
    box-shadow: var(--shadow-strong); 
    background-color: rgba(255, 255, 255, 0.85);
}
body[data-theme="dark"] .pipeline-card:hover {
    background-color: rgba(44, 44, 46, 0.85);
}
.pipeline-card-title { font-weight: 600; font-size: 0.9em; margin-bottom: var(--spacing-xs); }
.pipeline-card-meta { font-size: 0.8em; color: var(--color-text-secondary); }

/* --- Modal --- */
.modal { visibility: hidden; opacity: 0; position: fixed; z-index: 2500; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.4); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: visibility 0s var(--transition-medium), opacity var(--transition-medium); }
.modal.is-visible { visibility: visible; opacity: 1; transition-delay: 0s; }
.modal-content { background-color: var(--bg-container); border: var(--border-glass); backdrop-filter: blur(25px); -webkit-backdrop-filter: blur(25px); margin: 10% auto; padding: var(--spacing-xl); border-radius: var(--radius-l); width: 90%; max-width: 500px; position: relative; box-shadow: var(--shadow-strong); transition: all var(--transition-medium); transform: scale(0.95); opacity: 0; }
.modal.is-visible .modal-content { transform: scale(1); opacity: 1; }
#campaignManagerModal .modal-content { max-width: 800px; }
#modalCompanyName { display: block; margin-top: 0.5em; font-size: 1.1em; }
.close-btn { background: transparent; border: none; font-family: inherit; color: #cccccc; position: absolute; top: 12px; right: var(--spacing-m); font-size: 32px; font-weight: normal; cursor: pointer; transition: color var(--transition-fast); padding: 0; line-height: 1; }
.close-btn:hover, .close-btn:focus { color: var(--color-text-primary); }
.modal-actions { display: flex; gap: var(--spacing-m); margin-top: var(--spacing-l); }
.modal-actions .button-primary, .modal-actions .button-danger { margin-top: 0; }
#mergeForm label, #companyForm label { font-weight: 600; color: var(--color-text-secondary); }
#mergeForm #companyToDeleteSelect { border: 2px solid var(--color-danger); }
#mergeForm #companyToKeepSelect { border: 2px solid var(--color-success); }
.campaign-manager-body { display: flex; gap: var(--spacing-l); margin-bottom: var(--spacing-l); }
.company-selection-column { flex: 1; display: flex; flex-direction: column; }
.company-selection-column h3 { margin-top: 0; }
.company-selection-column input[type="search"] { margin-bottom: var(--spacing-m); padding: 12px 14px; border: 1px solid var(--border-color-input); border-radius: var(--radius-s); font-size: 1em; }
.company-selection-list { border: 1px solid var(--border-color-input); border-radius: var(--radius-s); height: 300px; overflow-y: auto; padding: var(--spacing-s); background-color: rgba(0,0,0,0.02); }
body[data-theme="dark"] .company-selection-list { background-color: rgba(255,255,255,0.02); }
.company-selection-item { padding: var(--spacing-s) var(--spacing-m); border-radius: var(--radius-s); cursor: pointer; }
.company-selection-item:hover { background-color: var(--bg-hover); }
.company-selection-item.selected { background-color: var(--color-primary); color: white; }
.campaign-actions-column { display: flex; flex-direction: column; justify-content: center; gap: var(--spacing-m); }

/* Diese Regel sorgt dafür, dass PLZ und Stadt im Firmen-Modal untereinander stehen. */
#companyForm .form-fieldset .form-row {
    flex-direction: column;
    align-items: stretch;
    gap: var(--spacing-m); /* Fügt einen Abstand zwischen den Feldern hinzu */
}

/* --- Toast-Benachrichtigungen --- */
#toast-container { position: fixed; top: 20px; right: 20px; z-index: 3000; display: flex; flex-direction: column; gap: var(--spacing-m); }
.toast { padding: var(--spacing-m) var(--spacing-l); background-color: var(--bg-container); border: var(--border-glass); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); color: var(--color-text-primary); border-radius: var(--radius-s); box-shadow: var(--shadow-strong); border-left: 4px solid; animation: toast-in var(--transition-medium), toast-out var(--transition-medium) 3.7s forwards; }
.toast.success { border-left-color: var(--color-success); }
.toast.error { border-left-color: var(--color-danger); }
@keyframes toast-in { from { transform: translateX(120%); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes toast-out { from { transform: translateX(0); opacity: 1; } to { transform: translateX(120%); opacity: 0; } }

/* --- Statistik & Responsive --- */
#kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-l); margin-bottom: var(--spacing-xl); }

/* UPDATE: Glass-Look für KPI-Karten */
.kpi-card { 
    background-color: var(--bg-container); 
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: var(--border-glass);
    border-radius: var(--radius-m); 
    padding: var(--spacing-l); 
    text-align: center; 
    box-shadow: var(--shadow-soft); 
    transition: all var(--transition-medium); 
    animation: fadeInUp 0.5s ease forwards; 
    opacity: 0; 
    animation-delay: calc(var(--item-index) * 70ms); 
}
.kpi-card:hover { 
    transform: translateY(-4px) scale(1.02); 
    box-shadow: var(--shadow-strong); 
    background-color: rgba(255, 255, 255, 0.85);
}
body[data-theme="dark"] .kpi-card:hover {
    background-color: rgba(44, 44, 46, 0.85);
}
.kpi-value { font-size: 2.5em; font-weight: 700; color: var(--color-primary); line-height: 1.1; margin-bottom: var(--spacing-s); }
.kpi-label { font-size: 1em; font-weight: 500; color: var(--color-text-secondary); }
#statsGrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-l); }
.chart-container { padding: var(--spacing-l); animation: fadeInUp 0.5s ease forwards; opacity: 0; animation-delay: calc(var(--item-index) * 100ms); }
.chart-container h3 { text-align: center; margin-top: 0; margin-bottom: var(--spacing-l); font-weight: 600; color: var(--color-text-secondary); }
.chart-container.full-width-chart { grid-column: 1 / -1; }

@media (max-width: 992px) { 
    #entryView { flex-direction: column; } 
    .contact-sidebar { align-self: initial; } 
    .company-list-item { grid-template-columns: 1fr; text-align: center; } 
    .company-stats { text-align: center; margin-top: var(--spacing-m); }
    .filter-controls { flex-direction: column; align-items: stretch; width: 100%; }
    .header-main-content { justify-content: space-between; text-align: left; }
    .header-main-left { flex-grow: 0; }
    .header-titles { flex-grow: 1; text-align: center; }
    .company-detail-content-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) { 
    main { padding: var(--spacing-m); } 
    #activityForm .form-row, .filter-section .form-row { flex-direction: column; align-items: stretch; gap: var(--spacing-l); } 
    .filter-buttons { flex-direction: column; align-items: stretch; } 
    header h1 { font-size: 1.8em; } 
    .footer-actions { flex-direction: column; align-items: stretch; text-align: center; } 
    .company-controls { flex-direction: column; align-items: stretch; } 
    #kpi-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-m); } 
    .cockpit-row, .cockpit-row-4-items { grid-template-columns: 1fr; }
    .campaign-manager-body { flex-direction: column; }
    .focus-item-body { grid-template-columns: 1fr; gap: var(--spacing-m); }
    .focus-item-header { flex-direction: column; align-items: flex-start; }
    .form-button-group { flex-direction: column; align-items: stretch; }
    #pipeline-board { margin: 0 calc(var(--spacing-m) * -1); padding: var(--spacing-s) var(--spacing-m); }
}
@media (max-width: 480px) { 
    body { padding: 0; } 
    .container { border-radius: 0; box-shadow: none; margin: 0; min-height: 100vh; padding: 0; } 
    header, main, .footer-actions { padding: var(--spacing-m); } 
    .card { padding: var(--spacing-l) var(--spacing-m); border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--border-color-divider); margin-bottom: 0; } 
    #statsGrid { grid-template-columns: 1fr; } 
    #toast-container { top: 10px; right: 10px; left: 10px; }
}

/* --- Aktivitäts-Kontext (Follow-up) --- */
.activity-context-info {
    font-size: 0.9em;
    font-style: italic;
    color: var(--color-text-secondary);
    padding: var(--spacing-s) var(--spacing-m);
    margin: calc(var(--spacing-m) * -1) 0 var(--spacing-m) 0;
    background-color: var(--bg-hover);
    border-bottom: 1px solid var(--border-color-divider);
}
.activity-context-info a {
    color: var(--color-primary);
    font-weight: 500;
    text-decoration: none;
}
.activity-context-info a:hover {
    text-decoration: underline;
}

@keyframes highlight-fade {
    from { background-color: rgba(0, 122, 255, 0.15); }
    to { background-color: transparent; }
}
.activity-item.is-highlighted {
    animation: highlight-fade 2.5s ease-out forwards;
}

/* --- Status-Legende & Filter im Bericht (Apple Style) --- */
#statusLegendContainer {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: var(--spacing-m);
    padding-top: var(--spacing-m);
    border-top: 1px solid var(--border-color-divider);
    animation: fadeIn 0.5s ease forwards;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 8px 14px;
    border-radius: 20px;
    background-color: var(--bg-container);
    border: var(--border-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
    font-size: 0.85em;
    font-weight: 500;
    color: var(--color-text-secondary);
    position: relative; 
    transition: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
    user-select: none;
}

.legend-item:hover {
    background-color: var(--bg-hover);
    color: var(--color-text-primary);
    box-shadow: 0 2px 5px rgba(0,0,0,0.12);
}

.legend-item:active {
    transform: scale(0.97);
}

.legend-item.is-active {
    background-color: rgba(0, 122, 255, 0.1);
    color: var(--color-primary);
    border-color: var(--color-primary);
    box-shadow: none;
}

body[data-theme="dark"] .legend-item {
    background-color: #2c2c2e;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
body[data-theme="dark"] .legend-item:hover {
    background-color: #3a3a3c;
}
body[data-theme="dark"] .legend-item.is-active {
    background-color: rgba(10, 132, 255, 0.2);
    color: #64d2ff;
    border-color: #64d2ff;
}

.legend-color-box {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.legend-box-success { background-color: var(--color-success); }
.legend-box-care { background-color: var(--color-primary); }
.legend-box-resubmission { background-color: var(--color-warning); }
.legend-box-info { background-color: var(--color-info); }
.legend-box-negative { 
    border: 2px dashed var(--color-danger); 
    background-color: transparent; 
    width: 8px; height: 8px;
}
.legend-box-other { background-color: #d1d1d6; }

/* --- CSS Tooltip --- */
.legend-tooltip {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    bottom: 130%; 
    left: 50%;
    transform: translateX(-50%) scale(0.95);
    background-color: rgba(30, 30, 30, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    padding: 8px 12px;
    border-radius: 8px;
    width: max-content;
    max-width: 250px;
    font-size: 0.85em;
    line-height: 1.4;
    z-index: 100;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    white-space: pre-line; 
    text-align: center;
    font-weight: 400;
}

.legend-tooltip::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: rgba(30, 30, 30, 0.9) transparent transparent transparent;
}

.legend-item:hover .legend-tooltip {
    visibility: visible;
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* --- Absolut zentrierter Apple-Style Logout-Button --- */
#logoutBtn {
    font-family: inherit; 
    margin: 0;
    padding: 0 var(--spacing-m);
    border: var(--border-glass);
    background-color: var(--bg-hover);
    color: var(--color-text-secondary);
    
    height: 36px;
    border-radius: var(--radius-s);
    cursor: pointer;
    box-sizing: border-box;

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);

    font-size: 0.9em;
    font-weight: 700;
    line-height: normal;
    white-space: nowrap;
    text-align: center;

    transition: all var(--transition-fast);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

#logoutBtn span {
    display: inline-block;
    line-height: 1;
    margin: 0;
    padding: 0;
}

#logoutBtn:hover {
    background-color: var(--bg-hover);
    color: var(--color-danger);
    border-color: var(--color-danger);
    box-shadow: 0 2px 8px rgba(255, 59, 48, 0.1);
}

body[data-theme="dark"] #logoutBtn:hover {
    background-color: rgba(255, 69, 58, 0.1);
}

#logoutBtn .icon {
    width: 16px;
    height: 16px;
    margin: 0;
    display: block;
    transition: color var(--transition-fast);
}

/* --- Aktivitäten-Historie Timeline (Apple-Style) --- */
.timeline-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-m);
    margin-top: var(--spacing-m);
}

.timeline-card-item {
    padding: var(--spacing-m);
    background-color: rgba(0,0,0,0.02);
    border-radius: var(--radius-s);
    border-left: 4px solid var(--border-color-input);
    position: relative;
    transition: all var(--transition-fast);
    border-bottom: 1px solid var(--border-color-divider);
}
body[data-theme="dark"] .timeline-card-item {
    background-color: rgba(255,255,255,0.02);
}

.timeline-card-item:hover {
    background-color: var(--bg-hover);
    transform: translateX(2px);
}

.timeline-card-item.outcome-success { border-left-color: var(--color-success); }
.timeline-card-item.outcome-resubmission { border-left-color: var(--color-warning); }
.timeline-card-item.outcome-info-sent { border-left-color: var(--color-info); }
.timeline-card-item.outcome-no-interest { border-left-color: var(--color-danger); }

.timeline-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85em;
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-s);
}

.timeline-card-body {
    font-size: 0.95em;
    line-height: 1.5;
    white-space: pre-wrap;
    color: var(--color-text-primary);
    background-color: var(--bg-container);
    border: var(--border-glass);
    padding: 10px 12px;
    border-radius: var(--radius-s);
    margin-top: var(--spacing-s);
}

.timeline-card-next {
    margin-top: var(--spacing-s);
    padding-top: var(--spacing-s);
    border-top: 1px dashed var(--border-color-input);
    font-size: 0.85em;
    color: var(--color-primary);
    font-weight: 600;
}