/**
 * MessyContact 2.0 - Styles
 * Datum: 17.02.2026
 */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: #f0f2f5;
    color: #1a1a2e;
    line-height: 1.5;
}

/* ============================================================
   LOGIN
   ============================================================ */

.login-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 20px;
}

.login-box {
    background: #fff;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
    text-align: center;
    max-width: 400px;
    width: 100%;
}

.login-box h1 {
    font-size: 24px;
    margin-bottom: 8px;
    color: #16213e;
}

.login-box p {
    color: #666;
    margin-bottom: 24px;
}

.login-box input {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
    margin-bottom: 16px;
}

.login-box input:focus {
    outline: none;
    border-color: #2563eb;
}

.login-box button {
    width: 100%;
    padding: 12px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    cursor: pointer;
}

.login-box button:hover {
    background: #1d4ed8;
}

.error-msg {
    background: #fee2e2;
    color: #dc2626;
    padding: 10px;
    border-radius: 8px;
    margin-bottom: 16px;
}

/* ============================================================
   APP LAYOUT
   ============================================================ */

.app-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 16px;
}

.app-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 2px solid #e0e0e0;
    margin-bottom: 16px;
}

.app-header h1 {
    font-size: 22px;
    color: #16213e;
}

.header-subtitle {
    color: #666;
    font-size: 14px;
}

.logout-btn {
    margin-left: auto;
    color: #666;
    text-decoration: none;
    font-size: 14px;
}

.logout-btn:hover {
    color: #dc2626;
}

.section {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.section h2 {
    font-size: 18px;
    margin-bottom: 12px;
    color: #16213e;
}

.section h3 {
    font-size: 15px;
    margin-bottom: 8px;
    color: #444;
}

.hint {
    font-size: 13px;
    color: #888;
    margin-top: 6px;
}

/* ============================================================
   AUFGABEN-DASHBOARD (Schritt 26+27: Filter + kompaktes Layout)
   ============================================================ */

/* Liste der Notiz-Kacheln: unbegrenzt viele, aber mit Scrollbereich */
#taskDashboardList {
    max-height: 55vh;
    overflow-y: auto;
    padding-right: 4px; /* Platz fuer Scrollbalken, damit Kacheln nicht angeschnitten werden */
}

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

.dashboard-header h2 {
    margin-bottom: 0;
    margin-right: auto;
}

.dashboard-filter {
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    color: #374151;
    background: white;
    cursor: pointer;
}

.dashboard-filter-date {
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    color: #374151;
}

.dashboard-empty {
    text-align: center;
    padding: 20px;
    color: #16a34a;
    font-weight: 500;
    font-size: 15px;
}

/* Kachel: 2 Zeilen statt 3 Spalten */
.task-card {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 5px 12px;
    border-radius: 8px;
    margin-bottom: 3px;
    border-left: 4px solid;
}

/* Zeile 1: Kontakt-Infos nebeneinander */
.task-row-contact {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.task-contact-name {
    font-weight: 600;
    font-size: 13px;
    color: #1a1a2e;
}

.task-contact-link {
    color: #1a1a2e;
    text-decoration: none;
    border-bottom: 1px dashed #93c5fd;
}

.task-contact-link:hover {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

.task-company-inline {
    font-size: 12px;
    color: #6b7280;
}

.task-company-link {
    color: #6b7280;
    text-decoration: none;
    border-bottom: 1px dashed #9ca3af;
    cursor: pointer;
}

.task-company-link:hover {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

.task-phone-inline,
.task-email-inline {
    font-size: 12px;
}

.task-phone-inline .contact-link,
.task-email-inline .contact-link {
    font-size: 12px;
}

/* Trennzeichen zwischen den Elementen in Zeile 1 */
.task-row-contact > span + span::before {
    content: '\00b7';
    margin-right: 6px;
    color: #d1d5db;
    font-weight: bold;
}

/* Zeile 2: Datum + Notiztext + Erledigt-Button */
.task-row-note {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: #4b5563;
}

.task-date-compact {
    font-weight: 700;
    font-size: 12px;
    white-space: nowrap;
    flex-shrink: 0;
}

.task-text-compact {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Dringlichkeits-Farben */
.task-overdue {
    background: #fef2f2;
    border-left-color: #dc2626;
}

.task-today {
    background: #fffbeb;
    border-left-color: #d97706;
}

.task-future {
    background: #f0fdf4;
    border-left-color: #16a34a;
}

.task-overdue-text { color: #dc2626; }
.task-today-text { color: #d97706; }
.task-future-text { color: #16a34a; }

/* Kompakter Erledigt-Button */
.btn-task-done-compact {
    padding: 1px 7px;
    font-size: 10px;
    line-height: 1.4;
    background: #dcfce7;
    color: #16a34a;
    border: 1px solid #86efac;
    border-radius: 4px;
    cursor: pointer;
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    transition: all 0.2s;
}

.btn-task-done-compact:hover {
    background: #16a34a;
    color: white;
    border-color: #16a34a;
}

.btn-task-delete-compact {
    padding: 1px 5px;
    font-size: 12px;
    line-height: 1.4;
    background: #fff;
    color: #dc2626;
    border: 1px solid #fca5a5;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-task-delete-compact:hover {
    background: #fef2f2;
}

/* ============================================================
   SUCHE
   ============================================================ */

.search-row {
    display: flex;
    gap: 8px;
}

.search-row input {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 16px;
}

.search-row input:focus {
    outline: none;
    border-color: #2563eb;
}

.btn-cache {
    padding: 10px 14px;
    font-size: 18px;
    line-height: 1;
    background: #f1f5f9;
    color: #475569;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    flex-shrink: 0;
    transition: background 0.2s, transform 0.3s;
}

.btn-cache:hover {
    background: #e2e8f0;
    color: #1e293b;
}

.btn-cache.spinning {
    animation: spin 0.8s linear infinite;
}

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

.results-info {
    font-size: 13px;
    color: #888;
    margin-bottom: 12px;
}

/* ============================================================
   BUTTONS
   ============================================================ */

.btn {
    padding: 10px 20px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    transition: background 0.2s;
}

.btn-primary {
    background: #2563eb;
    color: #fff;
}

.btn-primary:hover {
    background: #1d4ed8;
}

.btn-success {
    background: #16a34a;
    color: #fff;
}

.btn-success:hover {
    background: #15803d;
}

.btn-small {
    padding: 6px 14px;
    font-size: 13px;
    background: #e5e7eb;
    color: #374151;
}

.btn-small:hover {
    background: #d1d5db;
}

.btn-large {
    padding: 14px 28px;
    font-size: 16px;
    width: 100%;
    margin-top: 16px;
}

/* ============================================================
   FIRMEN-KARTEN
   ============================================================ */

.company-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    margin-bottom: 8px;
    transition: border-color 0.2s;
}

.company-card:hover {
    border-color: #2563eb;
}

.company-card-main {
    flex: 1;
}

.company-name {
    font-weight: 600;
    font-size: 16px;
}

.company-city {
    font-size: 13px;
    color: #666;
}

.company-badges {
    display: inline-flex;
    gap: 4px;
    margin-top: 4px;
}

.company-info {
    font-size: 13px;
    color: #888;
    margin-top: 2px;
}

.btn-load-members {
    padding: 8px 16px;
    font-size: 13px;
    background: #2563eb;
    color: #fff;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-load-members:hover {
    background: #1d4ed8;
}

/* ============================================================
   FIRMEN-KOPFBEREICH
   ============================================================ */

.company-header-detail {
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

.company-header-left {
    flex: 0 0 auto;
    min-width: 200px;
}

.company-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.company-checkbox {
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}

.company-header-left h2 {
    margin-bottom: 4px;
}

.company-header-link {
    color: #1a1a2e;
    text-decoration: none;
    border-bottom: 2px solid #93c5fd;
    transition: all 0.15s;
}

.company-header-link:hover {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

.company-header-address {
    font-size: 13px;
    color: #666;
}

.company-header-right {
    flex: 1;
    min-width: 0;
}

.company-header-right h3 {
    margin-bottom: 8px;
}

.company-attr-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.company-attr-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 8px;
    font-size: 13px;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
}

.company-attr-item.attr-active {
    background: #f0fdf4;
    border-color: #86efac;
    font-weight: 600;
    color: #166534;
}

.company-attr-item.attr-inactive {
    background: #f9fafb;
    border-color: #e5e7eb;
    color: #9ca3af;
}

.company-attr-label {
    font-size: 12px;
    white-space: nowrap;
}

.company-attr-checkbox-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 13px;
}

.company-attr-checkbox-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.company-attr-input {
    padding: 3px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
    width: 140px;
    background: white;
}

.company-attr-input:focus {
    outline: none;
    border-color: #2563eb;
}

/* ============================================================
   BADGES
   ============================================================ */

.badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.badge-brevo {
    background: #dcfce7;
    color: #16a34a;
}

.badge-none {
    background: #f3f4f6;
    color: #9ca3af;
    text-decoration: line-through;
}

.badge-link {
    text-decoration: none;
    cursor: pointer;
    transition: transform 0.15s, box-shadow 0.15s;
}

.badge-link:hover {
    transform: scale(1.15);
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* ============================================================
   DOI-BADGES
   ============================================================ */

.doi-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.doi-yes {
    background: #dcfce7;
    color: #16a34a;
}

.doi-no {
    background: #fee2e2;
    color: #dc2626;
}

.doi-unknown {
    background: #f3f4f6;
    color: #9ca3af;
}

/* ============================================================
   EINZELPERSONEN
   ============================================================ */

.loose-persons-list {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
}

.loose-person {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid #f0f0f0;
    flex-wrap: wrap;
}

.loose-person:last-child {
    border-bottom: none;
}

.person-name {
    font-weight: 500;
}

.person-email {
    font-size: 13px;
    color: #666;
}

.person-badges {
    display: inline-flex;
    gap: 4px;
    margin-left: auto;
}

/* ============================================================
   MITARBEITER-TABELLE (NEU in 2.0)
   ============================================================ */


.members-table-wrap {
    overflow-x: auto;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
}

.members-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.members-table thead {
    background: #f8fafc;
}

.members-table th {
    padding: 10px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 12px;
    color: #64748b;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-bottom: 2px solid #e2e8f0;
    white-space: nowrap;
}

.members-table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f1f5f9;
    vertical-align: middle;
}

/* Zeilen nach Anrede eingefaerbt */
.member-row-male {
    background: #eff6ff;  /* zartblau */
}

.member-row-female {
    background: #fdf2f8;  /* zartrosa */
}

.members-table tbody tr:hover {
    background: #f1f5f9;
}

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

.col-check {
    width: 40px;
    text-align: center;
}

.col-check input[type="checkbox"] {
    width: 17px;
    height: 17px;
    cursor: pointer;
}

.col-name {
    min-width: 140px;
}

.col-email {
    min-width: 180px;
}

.col-phone {
    min-width: 130px;
}

.col-doi {
    width: 70px;
    text-align: center;
}

.col-system {
    width: 110px;
    white-space: nowrap;
}

/* Klickbare Links in der Tabelle */
.contact-link {
    color: #2563eb;
    text-decoration: none;
    transition: color 0.15s;
}

.contact-link:hover {
    color: #1d4ed8;
    text-decoration: underline;
}

.email-link::before {
    content: '\2709 ';
    font-size: 13px;
}

.phone-link::before {
    content: '\260E ';
    font-size: 13px;
}

/* Name-Link (oeffnet Notizen) */
.member-name-link {
    color: #1a1a2e;
    text-decoration: none;
    font-weight: 500;
    border-bottom: 1px dashed #93c5fd;
    transition: all 0.15s;
}

.member-name-link:hover {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

.member-name-text {
    font-weight: 500;
}

.no-members {
    padding: 20px;
    text-align: center;
    color: #888;
}

/* ============================================================
   MODAL-OVERLAY (Personendetailseite)
   ============================================================ */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1500;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.modal-content {
    position: relative;
    background: #fff;
    border-radius: 14px;
    max-width: 640px;
    width: 100%;
    max-height: 85vh;
    overflow-y: auto;
    padding: 28px 24px 24px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.2);
}

.modal-close {
    position: absolute;
    top: 12px;
    right: 14px;
    background: none;
    border: none;
    font-size: 26px;
    color: #9ca3af;
    cursor: pointer;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    transition: background 0.15s, color 0.15s;
    line-height: 1;
}

.modal-close:hover {
    background: #f3f4f6;
    color: #374151;
}

@media (max-width: 700px) {
    .modal-content {
        max-width: 100%;
        max-height: 90vh;
        padding: 20px 16px 16px;
        border-radius: 10px;
    }

    .modal-overlay {
        padding: 10px;
    }
}

/* ============================================================
   KONTAKT-DETAILS: NOTIZEN + AUFGABEN
   ============================================================ */

.contact-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.contact-detail-header h2 {
    margin-bottom: 0;
}

/* Kontakt-Info-Bereich (Firma, Email, Telefon) */
.contact-info-area {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.contact-info-company {
    margin-bottom: 8px;
}

.contact-company-link {
    color: #666;
    font-size: 14px;
    text-decoration: none;
    border-bottom: 1px dashed #93c5fd;
}

.contact-company-link:hover {
    color: #2563eb;
    border-bottom-color: #2563eb;
}

.contact-info-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 14px;
}

.contact-info-label {
    font-weight: 600;
    color: #64748b;
    min-width: 70px;
    font-size: 13px;
}

.contact-info-value {
    flex: 1;
}

.contact-field-editor {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 1;
}

.contact-field-input {
    flex: 1;
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 4px;
    font-size: 13px;
}

.btn-edit-contact-field {
    background: #eff6ff;
    color: #2563eb;
    border: 1px solid #93c5fd;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
}

.btn-edit-contact-field:hover {
    background: #dbeafe;
}

/* Kein verknuepftes Unternehmen – Link-Stil */
.contact-link-company-btn {
    color: #9ca3af;
    font-style: italic;
    text-decoration: none;
    border-bottom: 1px dashed #d1d5db;
    cursor: pointer;
    font-size: 14px;
}

.contact-link-company-btn:hover {
    color: #2563eb;
    border-bottom-color: #2563eb;
    font-style: normal;
}

/* Unternehmens-Suchbox in der Mitarbeiterkarte */
.company-search-box {
    margin-top: 8px;
    padding: 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.company-search-row {
    display: flex;
    align-items: center;
    gap: 6px;
}

.company-search-input {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 13px;
}

.company-search-input:focus {
    outline: none;
    border-color: #2563eb;
}

.company-search-results {
    margin-top: 6px;
    max-height: 200px;
    overflow-y: auto;
}

.company-search-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 8px;
    border-bottom: 1px solid #f0f0f0;
    font-size: 13px;
}

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

.company-search-item span {
    flex: 1;
}

/* Tags-Bereich im Kontakt-Detail */
.contact-tags-area {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

/* Kleiner ↗-Button zum Oeffnen in Brevo (neben Name/Firma) */
.btn-brevo-link {
    display: inline-block;
    padding: 1px 7px;
    margin-left: 4px;
    font-size: 0.85em;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    color: #1d4ed8;
    background: #e0e7ff;
    border: 1px solid #c7d2fe;
    border-radius: 5px;
    vertical-align: middle;
    transition: all 0.15s;
}

.btn-brevo-link:hover {
    background: #2563eb;
    color: #fff;
    border-color: #2563eb;
}

.contact-pills .pills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.contact-pills .tag-pill-sm {
    font-size: 12px;
    padding: 3px 10px;
}

/* Abstand zwischen Attribut- und Kampagnen-Pillen */
.contact-pills .pills-grid + .campaign-pills-row {
    margin-top: 6px;
}

/* Email-Bereich (Platzhalter) */
.contact-emails-area {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid #e5e7eb;
}

.contact-notes-area {
    margin-bottom: 20px;
}

.contact-notes-area h3,
.contact-task-area h3 {
    margin-bottom: 10px;
    color: #374151;
}

.notes-list {
    margin-bottom: 12px;
    max-height: 300px;
    overflow-y: auto;
}

.note-card {
    padding: 10px 14px;
    background: #fefce8;
    border: 1px solid #fde68a;
    border-radius: 8px;
    margin-bottom: 12px;
}

.note-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 6px;
}

.btn-note-delete {
    font-size: 14px;
    padding: 2px 6px;
    background: #fff;
    color: #dc2626;
    border: 1px solid #fca5a5;
    border-radius: 4px;
    cursor: pointer;
    margin-left: auto;
    line-height: 1;
}

.btn-note-delete:hover {
    background: #fef2f2;
}

.note-date {
    font-size: 12px;
    color: #92400e;
    font-weight: 600;
    margin-bottom: 4px;
}

.note-text {
    font-size: 14px;
    color: #1a1a2e;
    white-space: pre-wrap;
    word-break: break-word;
}

.notes-empty {
    padding: 16px;
    text-align: center;
    color: #9ca3af;
    font-size: 14px;
}

.notes-loading {
    padding: 16px;
    text-align: center;
    color: #6b7280;
    font-size: 14px;
}

.new-note-row {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.new-note-row textarea {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
}

.new-note-row textarea:focus {
    outline: none;
    border-color: #2563eb;
}

.new-note-row .btn {
    align-self: flex-end;
    flex-shrink: 0;
}

/* Bestehende Aufgaben des Kontakts */
.contact-tasks-area {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}

.contact-tasks-list {
    max-height: 250px;
    overflow-y: auto;
}

.contact-task-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 12px;
    border-radius: 8px;
    margin-bottom: 6px;
    font-size: 14px;
}

.contact-task-item.ct-open {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
}

.contact-task-item.ct-overdue {
    background: #fef2f2;
    border: 1px solid #fecaca;
}

.contact-task-item.ct-done {
    background: #f9fafb;
    border: 1px solid #e5e7eb;
    opacity: 0.6;
}

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

.ct-name {
    font-weight: 500;
}

.ct-date {
    font-size: 12px;
    color: #888;
    white-space: nowrap;
}

.ct-done-label {
    font-size: 12px;
    color: #9ca3af;
    font-style: italic;
}

/* Aufgaben-Header mit Plus-Button */
.tasks-header-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.tasks-header-row h3 {
    margin-bottom: 0;
}

.add-task-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: #2563eb;
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s;
    user-select: none;
}

.add-task-btn:hover {
    background: #1d4ed8;
    transform: scale(1.1);
}

.new-task-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.new-task-row input[type="text"] {
    flex: 1;
    padding: 10px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
}

.new-task-row input[type="date"] {
    padding: 10px 14px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
    width: 160px;
}

.new-task-row input:focus {
    outline: none;
    border-color: #2563eb;
}

/* ============================================================
   ATTRIBUT-SEKTION (Toggle im Akkordeon)
   ============================================================ */

.attr-section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 8px 0;
    color: #374151;
    font-size: 15px;
    font-weight: 600;
    transition: color 0.15s;
}

.attr-section-header:hover {
    color: #2563eb;
}

.attr-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #374151;
    font-size: 15px;
    font-weight: 700;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}

.attr-section-header:hover .attr-toggle-icon {
    background: #2563eb;
    color: #fff;
}

/* Pillen-Grid im aufklappbaren Bereich */
.attr-pills-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 8px;
}

/* Attribut-Pillen: gleicher Stil wie Tabellen-Pillen (tag-pill-sm) */
.attr-pill-label {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    border: none;
    margin: 1px;
    transition: all 0.15s;
    user-select: none;
    white-space: nowrap;
}

.attr-pill-label:hover {
    filter: brightness(0.92);
}

/* Checkbox versteckt (aber im DOM fuer JS) */
.attr-pill-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.attr-pill-name {
    font-weight: inherit;
}

/* Aktiv (alle haben es): blau wie Tabellen-Pillen */
.attr-pill-label.attr-active {
    background: #e0f2fe;
    color: #0369a1;
    font-weight: 600;
}

/* Teilweise (manche haben es): gelb/orange */
.attr-pill-label.attr-partial {
    background: #fef3c7;
    color: #92400e;
    font-weight: 500;
}

/* Inaktiv (keiner hat es): gedaempftes Grau */
.attr-pill-label.attr-inactive {
    background: #f3f4f6;
    color: #9ca3af;
    font-weight: 400;
}

/* Blocklist-Pille: rot wenn aktiv */
.attr-pill-label.attr-blocklist.attr-active {
    background: #fee2e2;
    color: #dc2626;
    font-weight: 600;
}

.attr-pill-label.attr-blocklist.attr-partial {
    background: #fee2e2;
    color: #dc2626;
    font-weight: 500;
    opacity: 0.75;
}

.attr-pill-label.attr-blocklist.attr-inactive {
    background: #f3f4f6;
    color: #9ca3af;
    font-weight: 400;
}

/* Eingabefeld fuer numerische Attribute (z.B. ABGESAGT_FUER_JAHR) */
.attr-pill-value {
    width: 48px;
    padding: 0 3px;
    border: 1px solid rgba(0,0,0,0.15);
    border-radius: 4px;
    font-size: 10px;
    text-align: center;
    background: rgba(255,255,255,0.6);
    margin-left: 2px;
}

.attr-pill-value:focus {
    outline: none;
    border-color: #2563eb;
    background: white;
}

/* Klick auf das Label soll NICHT den Number-Input togglen */
.attr-pill-label input[type="number"] {
    cursor: text;
}

/* ============================================================
   SCOPE-FARBEN: Personen (rosa), Firmen (blau), Beide (gelb)
   ============================================================ */

/* --- Personen-Attribute: zartrosa --- */
.attr-pill-label.scope-contact.attr-inactive {
    background: #fdf2f8;
    color: #9ca3af;
    font-weight: 400;
}
.attr-pill-label.scope-contact.attr-partial {
    background: #fce7f3;
    color: #be185d;
    font-weight: 500;
}
.attr-pill-label.scope-contact.attr-active {
    background: #fce7f3;
    color: #be185d;
    font-weight: 600;
}

/* --- Firmen-Attribute: zartblau --- */
.attr-pill-label.scope-company.attr-inactive {
    background: #eff6ff;
    color: #9ca3af;
    font-weight: 400;
}
.attr-pill-label.scope-company.attr-partial {
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 500;
}
.attr-pill-label.scope-company.attr-active {
    background: #dbeafe;
    color: #1d4ed8;
    font-weight: 600;
}

/* --- Attribute fuer beide: zartgelb --- */
.attr-pill-label.scope-both.attr-inactive {
    background: #fefce8;
    color: #9ca3af;
    font-weight: 400;
}
.attr-pill-label.scope-both.attr-partial {
    background: #fef9c3;
    color: #a16207;
    font-weight: 500;
}
.attr-pill-label.scope-both.attr-active {
    background: #fef9c3;
    color: #a16207;
    font-weight: 600;
}

/* Blocklist bleibt immer rot (unabhaengig vom Scope) */
.attr-pill-label.attr-blocklist.scope-contact.attr-active,
.attr-pill-label.attr-blocklist.scope-company.attr-active,
.attr-pill-label.attr-blocklist.scope-both.attr-active {
    background: #fee2e2;
    color: #dc2626;
    font-weight: 600;
}

/* ============================================================
   PILLEN-LEGENDE
   ============================================================ */

.attr-pills-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 6px;
    margin-bottom: 4px;
    font-size: 11px;
    color: #6b7280;
}

.attr-pills-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.attr-pills-legend-swatch {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(0,0,0,0.1);
}

.legend-swatch-contact { background: #fce7f3; }
.legend-swatch-company { background: #dbeafe; }
.legend-swatch-both    { background: #fef9c3; }

/* ============================================================
   VERERBUNGS-SYMBOL: Zeigt an, dass ein Tag vererbt wird
   ============================================================ */

.attr-inherit-icon {
    font-size: 9px;
    opacity: 0.5;
    margin-right: 1px;
    vertical-align: middle;
}

.attr-pill-label.attr-inheritable.attr-active .attr-inherit-icon,
.attr-pill-label.attr-inheritable.attr-partial .attr-inherit-icon {
    opacity: 0.8;
}

/* ============================================================
   NEUES ATTRIBUT ANLEGEN (Formular in Attribut-Sektion)
   ============================================================ */

.new-attr-form {
    border-top: 1px solid #e5e7eb;
    padding-top: 10px;
}

.new-attr-title {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    font-weight: 600;
    color: #6b7280;
    margin: 0;
    transition: color 0.15s;
}

.new-attr-title:hover {
    color: #2563eb;
}

.new-attr-toggle-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #e5e7eb;
    color: #6b7280;
    font-size: 13px;
    font-weight: 700;
    line-height: 1;
    transition: background 0.15s, color 0.15s;
}

.new-attr-title:hover .new-attr-toggle-icon {
    background: #2563eb;
    color: #fff;
}

.new-attr-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
    flex-wrap: wrap;
}

.new-attr-row label {
    font-size: 12px;
    font-weight: 500;
    color: #374151;
    min-width: 110px;
}

.new-attr-input {
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 12px;
    width: 180px;
    max-width: 100%;
}

.new-attr-input:focus {
    outline: none;
    border-color: #2563eb;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.15);
}

.new-attr-select {
    padding: 4px 8px;
    border: 1px solid #d1d5db;
    border-radius: 6px;
    font-size: 12px;
    background: white;
}

.new-attr-targets {
    display: flex;
    gap: 14px;
}

.new-attr-targets label {
    min-width: auto;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    cursor: pointer;
}

.new-attr-value-hint {
    font-size: 10px;
}

/* ============================================================
   MITARBEITER-ATTRIBUT-PANEL (Checkboxen)
   ============================================================ */

.member-attr-checkboxes {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.member-attr-cb-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    border: 1px solid #e5e7eb;
    background: #f9fafb;
    transition: all 0.15s;
    user-select: none;
}

.member-attr-cb-label:hover {
    border-color: #93c5fd;
    background: #eff6ff;
}

.member-attr-cb-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.member-attr-cb-label.attr-active {
    background: #f0fdf4;
    border-color: #86efac;
    font-weight: 600;
    color: #166534;
}

.member-attr-cb-label.attr-partial {
    background: #fefce8;
    border-color: #fde68a;
    color: #92400e;
}

.member-attr-cb-label.attr-inactive {
    background: #f9fafb;
    border-color: #e5e7eb;
    color: #9ca3af;
}

/* ============================================================
   TAG/ATTRIBUT-FELDER
   ============================================================ */

.tag-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.tag-field {
    flex: 1;
    position: relative;
}

.tag-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #444;
    margin-bottom: 4px;
}

.tag-field select,
.tag-field input {
    width: 100%;
    padding: 10px 14px;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    font-size: 15px;
    background: #fff;
}

.tag-field select:focus,
.tag-field input:focus {
    outline: none;
    border-color: #2563eb;
}

.new-tag-row {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.new-tag-row input {
    flex: 1;
    padding: 8px 12px;
    border: 1px dashed #ccc;
    border-radius: 6px;
    font-size: 13px;
}

.new-tag-row input:focus {
    border-color: #2563eb;
    border-style: solid;
    outline: none;
}

.new-tag-row .btn-small {
    padding: 8px 14px;
    font-size: 16px;
    font-weight: bold;
    background: #16a34a;
    color: #fff;
    flex-shrink: 0;
}

.new-tag-row .btn-small:hover {
    background: #15803d;
}

/* Select mit Loeschbutton */
.select-with-delete {
    display: flex;
    gap: 6px;
    align-items: stretch;
}

.select-with-delete select {
    flex: 1;
}

.btn-delete {
    background: #fee2e2;
    color: #dc2626;
    border: 2px solid #fca5a5;
    border-radius: 8px;
    padding: 0 12px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1;
}

.btn-delete:hover {
    background: #dc2626;
    color: white;
    border-color: #dc2626;
}

/* Neuen Kontakt anlegen - Button */
.btn-outline {
    background: white;
    color: #2563eb;
    border: 2px dashed #93c5fd;
    border-radius: 8px;
    padding: 10px 20px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
    width: 100%;
}

.btn-outline:hover {
    background: #eff6ff;
    border-color: #2563eb;
}

/* Neuen Kontakt anlegen - Formular */
.form-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}

.form-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.form-row label {
    min-width: 90px;
    font-weight: 500;
    font-size: 14px;
    color: #475569;
}

.form-row input,
.form-row select {
    flex: 1;
    padding: 8px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 14px;
}

.form-row input:focus,
.form-row select:focus {
    border-color: #2563eb;
    outline: none;
}

.target-checkboxes {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
}

.target-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    font-size: 14px;
    transition: background 0.2s;
}

.target-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    cursor: pointer;
}

.target-cs {
    background: #f0fdf4;
    border: 2px solid #86efac;
}

.target-cs:hover {
    background: #dcfce7;
}

.target-brevo {
    background: #eff6ff;
    border: 2px solid #93c5fd;
}

.target-brevo:hover {
    background: #dbeafe;
}

.new-contact-buttons {
    display: flex;
    gap: 10px;
}

.new-contact-buttons .btn-success {
    flex: 1;
}

/* Blocklist Checkbox */
.blocklist-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 12px 16px;
    background: #fef2f2;
    border: 2px solid #fca5a5;
    border-radius: 8px;
    transition: background 0.2s;
}

.blocklist-label:hover {
    background: #fee2e2;
}

.blocklist-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #dc2626;
    cursor: pointer;
}

.blocklist-text {
    font-weight: 600;
    color: #dc2626;
}

.blocklist-hint {
    font-size: 12px;
    color: #991b1b;
    font-style: italic;
}

/* ============================================================
   STATUS
   ============================================================ */

.status-message {
    position: fixed;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    padding: 14px 24px;
    border-radius: 10px;
    font-size: 14px;
    max-width: 600px;
    width: calc(100% - 40px);
    z-index: 1000;
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
    line-height: 1.6;
}

.status-message.success {
    background: #dcfce7;
    color: #166534;
    border: 2px solid #86efac;
}

.status-message.error {
    background: #fee2e2;
    color: #991b1b;
    border: 2px solid #fca5a5;
    position: relative;
    padding-right: 40px;
}

.status-close {
    position: absolute;
    top: 8px;
    right: 12px;
    font-size: 22px;
    font-weight: bold;
    cursor: pointer;
    line-height: 1;
    opacity: 0.6;
}
.status-close:hover {
    opacity: 1;
}

.status-message.info {
    background: #dbeafe;
    color: #1e40af;
    border: 2px solid #93c5fd;
}

/* ============================================================
   LOADING
   ============================================================ */

.loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e5e7eb;
    border-top-color: #2563eb;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-bottom: 16px;
}

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

.loading-overlay p {
    font-size: 16px;
    color: #444;
}

/* ============================================================
   KLICKBARE FIRMENKARTEN (Akkordeon)
   ============================================================ */

.company-card-clickable {
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.company-card-clickable:hover {
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

.company-card-active {
    display: none;
}

/* ============================================================
   AKKORDEON-DETAIL WRAPPER
   ============================================================ */

#companyDetailWrapper {
    margin: 4px 0 12px 0;
    border: 2px solid #3b82f6;
    padding: 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

.company-detail-header {
    margin-bottom: 16px;
}

.company-header-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.company-header-top .company-header-left {
    flex: 1;
}

.company-header-top .company-header-right {
    flex: 0 0 auto;
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

/* ============================================================
   TAG-PILLEN
   ============================================================ */

.tag-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 500;
    background: #e0f2fe;
    color: #0369a1;
    margin: 2px;
    white-space: nowrap;
}

.tag-pill-sm {
    padding: 1px 6px;
    font-size: 10px;
}

/* Scope-Farben fuer Tag-Pillen (Mitarbeiter-Zeilen + Firmen-Header) */
.tag-pill.tag-pill-scope-contact { background: #fce7f3; color: #be185d; }
.tag-pill.tag-pill-scope-company { background: #dbeafe; color: #1d4ed8; }
.tag-pill.tag-pill-scope-both    { background: #fef9c3; color: #a16207; }

/* Warnung und Blocklist ueberschreiben Scope-Farben (hoehere Prioritaet) */
.tag-pill.tag-pill-warn {
    background: #fef3c7;
    color: #92400e;
}

.tag-pill.tag-pill-blocklist {
    background: #fee2e2;
    color: #dc2626;
    font-weight: 600;
}

.company-tag-pills {
    margin-top: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.col-tags {
    min-width: 110px;
    max-width: 170px;
    vertical-align: middle;
}

/* Pillen-Grid: zweispaltig in der Tags-Spalte */
.pills-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.pills-grid .tag-pill-sm {
    text-align: center;
    margin: 0;
}

/* ============================================================
   KAMPAGNEN-PILLEN (pro Kontakt in Mitarbeiter-Tabelle)
   ============================================================ */

.campaign-pills-tr td {
    padding-top: 0 !important;
    padding-bottom: 4px !important;
    border-top: none !important;
}

.campaign-pills-row {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
}

.campaign-pill {
    display: inline-block;
    padding: 1px 7px;
    border-radius: 9px;
    font-size: 10px;
    font-weight: 500;
    white-space: nowrap;
    line-height: 1.5;
}

.campaign-pill-upcoming {
    background: #2563eb;
    color: #ffffff;
}

/* Versendet, aber Brevo hat keinen Event fuer den Kontakt — z.B. weil er beim
   Versand schon auf der Blocklist war und Brevo ihn uebersprungen hat */
.campaign-pill-skipped {
    background: #e5e7eb;
    color: #9ca3af;
}

/* Versendet, aber kein Brevo-Mailing in MC verknuepft — weisse Pille mit
   schwarzem duennen Rahmen, schwarze Schrift */
.campaign-pill-unlinked {
    background: #ffffff;
    color: #000000;
    border: 1px solid #000000;
}
/* Nur bei der echten Pille (nicht beim Legenden-Kreis) Padding ausgleichen,
   damit die Pille mit Rahmen genauso hoch ist wie die anderen */
.campaign-pill.campaign-pill-unlinked {
    padding: 0 6px;
}

/* Versendet + geoeffnet — pastell-gruen mit blasser Schrift */
.campaign-pill-opened {
    background: #d1fae5;
    color: #34d399;
}

/* Versendet + zugestellt, aber nicht geoeffnet — pastell-gelb mit blasser Schrift */
.campaign-pill-delivered {
    background: #fef3c7;
    color: #fbbf24;
}

/* Versendet + soft- oder hardbounce — pastell-rot mit blasser Schrift */
.campaign-pill-bounced {
    background: #fee2e2;
    color: #f87171;
}

/* Legacy-Fallback (kann irgendwann entfernt werden, falls altes JS noch greift) */
.campaign-pill-sent {
    background: #e5e7eb;
    color: #9ca3af;
}

/* ============================================================
   KALTE FIRMEN (Sektion unter Attributsuche)
   ============================================================ */

.btn-cold-companies {
    background: #e0f2fe;
    color: #075985;
    border: 1px solid #bae6fd;
}
.btn-cold-companies:hover {
    background: #bae6fd;
}

.cold-companies-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    margin-bottom: 12px;
}

.cold-companies-tracked {
    margin: 12px 0;
    padding: 10px 14px;
    background: #f8fafc;
    border-left: 3px solid #38bdf8;
    border-radius: 4px;
    font-size: 13px;
    color: #334155;
}

.col-numeric {
    text-align: right;
    width: 130px;
    white-space: nowrap;
}

.cold-row .cold-company-link {
    color: #075985;
    text-decoration: none;
    font-weight: 500;
}
.cold-row .cold-company-link:hover {
    text-decoration: underline;
}

/* Attribut-Filter innerhalb der Kalte-Firmen-Sektion */
.cold-filter-bar {
    margin: 10px 0 14px 0;
    padding: 10px 12px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}

.cold-filter-hint {
    font-size: 12px;
    color: #475569;
    margin-bottom: 8px;
    line-height: 1.4;
}
.cold-filter-must-hint {
    color: #047857;
    font-weight: 600;
}
.cold-filter-mustnot-hint {
    color: #b91c1c;
    font-weight: 600;
}

.cold-filter-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.cold-chip {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    border: 1px solid;
    cursor: pointer;
    background: #ffffff;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

/* Neutraler Zustand: nicht im Filter */
.cold-chip-neutral {
    border-color: #cbd5e1;
    color: #475569;
}
.cold-chip-neutral:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
}

/* MUSS-Zustand: Firma muss dieses Attribut haben (gruen) */
.cold-chip-must {
    background: #d1fae5;
    border-color: #10b981;
    color: #047857;
}
.cold-chip-must:hover {
    background: #a7f3d0;
}

/* MUSS-NICHT-Zustand: Firma darf dieses Attribut nicht haben (rot) */
.cold-chip-mustnot {
    background: #fee2e2;
    border-color: #ef4444;
    color: #b91c1c;
    text-decoration: line-through;
}
.cold-chip-mustnot:hover {
    background: #fecaca;
}

.campaign-pills-loading {
    font-size: 10px;
    color: #94a3b8;
    font-style: italic;
}

.campaign-pills-none {
    font-size: 10px;
    color: #d1d5db;
}

/* ============================================================
   MAILING-FARB-LEGENDE (Hover-Tooltip ueber Mitarbeitertabelle)
   ============================================================ */

.campaign-legend {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    position: relative;
    margin-bottom: 6px;
    padding: 2px 8px;
    font-size: 11px;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    cursor: help;
    user-select: none;
}

.campaign-legend:hover,
.campaign-legend:focus {
    background: #f1f5f9;
    color: #334155;
    outline: none;
}

.campaign-legend-icon {
    font-size: 13px;
    line-height: 1;
}

.campaign-legend-tooltip {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    margin-top: 4px;
    padding: 10px 12px;
    min-width: 280px;
    background: #ffffff;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
    font-size: 12px;
    color: #1e293b;
    z-index: 100;
    text-align: left;
    line-height: 1.6;
}

.campaign-legend:hover .campaign-legend-tooltip,
.campaign-legend:focus .campaign-legend-tooltip {
    display: block;
}

.legend-row {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 2px 0;
}

.legend-swatch {
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 7px;
    flex-shrink: 0;
}

.legend-note {
    margin-top: 8px;
    padding-top: 6px;
    border-top: 1px solid #e2e8f0;
    font-size: 11px;
    color: #64748b;
    font-style: italic;
}

/* ============================================================
   BTN-OUTLINE (fuer Bearbeiten-Button etc.)
   ============================================================ */

.btn-outline {
    background: transparent;
    border: 1px solid #d1d5db;
    color: #374151;
    font-weight: 500;
}

.btn-outline:hover {
    background: #f3f4f6;
    border-color: #9ca3af;
}

/* ============================================================
   VERKNUEPFUNGS-TOOL
   ============================================================ */

.btn-linktool {
    background: #7c3aed;
    color: #fff;
    border: none;
    font-weight: 600;
}

.btn-linktool:hover {
    background: #6d28d9;
}

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

.linktool-header h2 {
    margin-bottom: 0;
}

.linktool-actions {
    margin-bottom: 16px;
}

/* Zusammenfassung */
.linktool-summary-box {
    background: #f8fafc;
    border: 2px solid #e2e8f0;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 16px;
}

.linktool-summary-box h3 {
    margin-bottom: 12px;
}

.summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.summary-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 10px;
    border-radius: 8px;
    background: white;
    border: 1px solid #e5e7eb;
}

.summary-num {
    font-size: 24px;
    font-weight: 700;
    color: #1a1a2e;
}

.summary-label {
    font-size: 12px;
    color: #666;
    text-align: center;
    margin-top: 4px;
}

.summary-highlight {
    border-color: #2563eb;
    background: #eff6ff;
}

.summary-highlight .summary-num {
    color: #2563eb;
}

.summary-action {
    border-color: #16a34a;
    background: #f0fdf4;
}

.summary-action .summary-num {
    color: #16a34a;
}

/* Einzelne Firmen-Karten */
.linktool-company-card {
    border: 2px solid #e5e7eb;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: border-color 0.2s;
}

.linktool-company-card:hover {
    border-color: #93c5fd;
}

.linktool-company-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.linktool-company-name {
    font-weight: 600;
    font-size: 15px;
    color: #1a1a2e;
}

.match-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
}

.match-exact {
    background: #dcfce7;
    color: #16a34a;
}

.match-normalized {
    background: #fef3c7;
    color: #92400e;
}

.match-fuzzy {
    background: #fee2e2;
    color: #dc2626;
}

.linktool-address {
    font-size: 13px;
    color: #555;
    margin-bottom: 6px;
}

.linktool-no-addr {
    color: #9ca3af;
    font-style: italic;
}

.addr-label {
    font-weight: 600;
    color: #374151;
}

.linktool-link-info {
    font-size: 13px;
    color: #555;
    margin-bottom: 6px;
}

.linktool-link-info strong {
    color: #16a34a;
}

/* Mini-Buttons */
.btn-mini {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    background: #2563eb;
    color: #fff;
    margin-left: 6px;
    transition: all 0.2s;
}

.btn-mini:hover {
    background: #1d4ed8;
}

.btn-mini.btn-done,
.btn-ct-done {
    background: #dcfce7;
    color: #16a34a;
    cursor: default;
}

.btn-mini:disabled {
    opacity: 0.6;
    cursor: wait;
}

/* Kontakt-Details (eingeklappt) */
.linktool-contacts-details {
    margin-top: 6px;
}

.linktool-contacts-details summary {
    font-size: 13px;
    color: #2563eb;
    cursor: pointer;
    font-weight: 500;
}

.linktool-contacts-details summary:hover {
    text-decoration: underline;
}

.linktool-contacts-list {
    margin-top: 6px;
    padding-left: 20px;
    font-size: 13px;
    color: #555;
    max-height: 200px;
    overflow-y: auto;
}

.linktool-contacts-list li {
    margin-bottom: 3px;
}

/* Fortschrittsbalken */
.linktool-progress {
    margin-top: 16px;
}

.progress-bar-wrap {
    background: #e5e7eb;
    border-radius: 8px;
    height: 24px;
    overflow: hidden;
    margin-bottom: 8px;
}

.progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #2563eb, #7c3aed);
    border-radius: 8px;
    transition: width 0.3s;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 700px) {
    .app-container {
        padding: 10px;
    }

    .company-card {
        flex-direction: column;
        align-items: stretch;
    }

    .btn-load-members {
        width: 100%;
        text-align: center;
    }

    .tag-row {
        flex-direction: column;
        gap: 8px;
    }

    /* Tabelle: horizontales Scrollen aktiviert durch .members-table-wrap */
    .members-table {
        font-size: 13px;
    }

    .members-table th,
    .members-table td {
        padding: 8px 8px;
    }

    .person-badges {
        margin-left: 0;
    }

    .new-task-row {
        flex-direction: column;
    }

    .new-task-row input[type="date"] {
        width: 100%;
    }

    .new-note-row {
        flex-direction: column;
    }

    .task-card {
        flex-direction: column;
        align-items: stretch;
    }

    .task-col-contact {
        flex: 0 0 auto;
    }

    .btn-task-done {
        width: 100%;
        text-align: center;
    }

    .target-checkboxes {
        flex-direction: column;
        gap: 8px;
    }

    .company-header-detail {
        flex-direction: column;
    }

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

    .linktool-company-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

}

/* ============================================================
   WARNUNG BEI UNGESPEICHERTEN AENDERUNGEN (Schritt 36)
   ============================================================ */

/* Roter Punkt am Speichern-Button wenn ungespeicherte Aenderungen */
.unsaved-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    background: #dc2626;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
    animation: unsaved-pulse 1.5s ease-in-out infinite;
}

@keyframes unsaved-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.3); }
}

/* Speichern-Button hervorheben wenn ungespeicherte Aenderungen */
.has-unsaved-changes {
    box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.3);
    border-color: #dc2626 !important;
}

/* ============================================================
   NOTIZEN IM KONTAKTDETAIL (Schritt 24)
   ============================================================ */

/* Einzelne Notiz-Karte */
.note-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 10px 12px;
    margin-bottom: 8px;
}

/* Erledigte Notiz: abgedimmt */
.note-card.note-done {
    opacity: 0.55;
    background: #f9fafb;
}

/* Ueberfaellige Notiz: roter Rand links */
.note-card.note-overdue {
    border-left: 3px solid #dc2626;
}

/* Kopfzeile: Datum + Erledigt-Button nebeneinander */
.note-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
    gap: 8px;
}

/* Faelligkeitsdatum in der Notiz */
.note-due-date {
    font-size: 0.82rem;
    color: #6b7280;
}

/* Ueberfaelliges Datum rot */
.note-due-date.note-overdue {
    color: #dc2626;
    font-weight: 600;
}

/* "Datum hinzufuegen"-Link bei Notizen ohne Datum */
.note-add-due-date {
    font-size: 0.82rem;
    color: #9ca3af;
    cursor: pointer;
    opacity: 0.6;
    transition: opacity 0.2s;
}
.note-add-due-date:hover {
    opacity: 1;
    color: #2563eb;
}

/* Notiztext */
.note-text {
    font-size: 0.9rem;
    color: #374151;
    line-height: 1.45;
    white-space: pre-wrap;
    word-break: break-word;
}

/* Notizen editierbar — Klick-Hinweis */
.note-editable {
    cursor: pointer;
}
.note-editable:hover {
    border-bottom: 1px dashed #93c5fd;
}

/* Inline-Editor fuer Notizen */
.note-inline-editor {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 4px;
    width: 100%;
}

.note-edit-input {
    flex: 1;
    padding: 2px 6px;
    border: 1px solid #93c5fd;
    border-radius: 3px;
    font-size: inherit;
    min-width: 0;
}

/* Textarea fuer Notiz-Text: mehrzeilig, volle Breite */
textarea.note-edit-text {
    width: 100%;
    flex: 1 1 100%;
    min-height: 100px;
    max-height: 300px;
    resize: vertical;
    font-family: inherit;
    line-height: 1.4;
}

.note-edit-date {
    max-width: 140px;
    flex: 0 0 auto;
}

.btn-note-edit-ok,
.btn-note-edit-cancel {
    padding: 1px 6px;
    font-size: 11px;
    border: 1px solid #d1d5db;
    border-radius: 3px;
    cursor: pointer;
    background: #f9fafb;
    flex-shrink: 0;
}

.btn-note-edit-ok {
    color: #059669;
    border-color: #6ee7b7;
}

.btn-note-edit-ok:hover {
    background: #ecfdf5;
}

.btn-note-edit-cancel {
    color: #dc2626;
    border-color: #fca5a5;
}

.btn-note-edit-cancel:hover {
    background: #fef2f2;
}

/* Erledigt-Button in der Notiz */
.btn-note-done {
    font-size: 0.75rem;
    padding: 2px 8px;
    background: #f0fdf4;
    color: #16a34a;
    border: 1px solid #bbf7d0;
    border-radius: 4px;
    cursor: pointer;
    white-space: nowrap;
}

.btn-note-done:hover {
    background: #dcfce7;
    border-color: #86efac;
}

/* Erledigt-Badge (fuer bereits erledigte Notizen) */
.note-done-badge {
    font-size: 0.72rem;
    color: #9ca3af;
    font-style: italic;
    white-space: nowrap;
}

/* ---- Neue-Notiz Optionszeile (Datum + Speichern) ---- */
.new-note-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 6px;
    gap: 10px;
}

/* Datum-Label mit Kalender-Icon */
.note-date-label {
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 0.85rem;
    color: #6b7280;
}

.note-date-icon {
    font-size: 1.1rem;
}

/* Datum-Input (Kalender-Picker) */
.note-date-input {
    border: 1px solid #d1d5db;
    border-radius: 4px;
    padding: 3px 6px;
    font-size: 0.82rem;
    color: #374151;
    background: #fff;
    max-width: 140px;
}

.note-date-input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2);
}

/* ============================================================
   SCANNER — Visitenkarten scannen (Schritt 28)
   ============================================================ */

/* Dashboard-Button im Header (blau — erscheint nur wenn Unter-Seite offen) */
.btn-dashboard {
    background: #3b82f6;
    color: #fff;
    border: none;
    font-size: 0.82rem;
}
.btn-dashboard:hover {
    background: #2563eb;
}
/* Scanner-Button im Header (teal/gruen — hebt sich vom roten MC-Design ab) */
.btn-scanner {
    background: #0d9488;
    color: #fff;
    border: none;
    font-size: 0.82rem;
}
.btn-scanner:hover {
    background: #0f766e;
}

/* Scanner-Bereich Header */
.scanner-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}
.scanner-header h2 {
    margin: 0;
    font-size: 1.2rem;
}
.scanner-close-btn {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: #64748b;
    padding: 4px 8px;
}
.scanner-close-btn:hover {
    color: #ef4444;
}

/* Session-Tag Zeile */
.scanner-tag-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.scanner-tag-input {
    flex: 1;
    min-width: 180px;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.95rem;
}
.scanner-tag-input:focus {
    outline: none;
    border-color: #0d9488;
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.2);
}
.scanner-tag-hint {
    font-size: 0.78rem;
    color: #94a3b8;
}

/* Kamera-Bereich (rosa Rand statt dunkler Hintergrund) */
.scanner-camera-area {
    background: #fff5f7;
    border: 2px solid #f9a8d4;
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
    text-align: center;
    min-height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.scanner-video {
    width: 100%;
    max-width: 500px;
    border-radius: 8px;
    cursor: pointer;
}
.scanner-preview {
    text-align: center;
    color: #94a3b8;
}
.scanner-preview img {
    max-width: 100%;
    max-height: 350px;
    border-radius: 8px;
}

/* Steuerungs-Buttons */
.scanner-controls {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
    align-items: center;
}
.scanner-upload-label {
    display: inline-block;
    padding: 8px 16px;
    background: #e2e8f0;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    color: #334155;
    transition: background 0.15s;
}
.scanner-upload-label:hover {
    background: #cbd5e1;
}

/* Seiten-Info (Vorderseite / Rueckseite) */
.scanner-side-info {
    background: #ecfdf5;
    color: #065f46;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 0.88rem;
    margin-bottom: 12px;
}

/* Grosser Analyse-Button */
.btn-large {
    padding: 12px 28px;
    font-size: 1.05rem;
    min-height: 48px;
}

/* Scan-Formular */
.scan-result-form h3 {
    margin: 0 0 10px 0;
    font-size: 1rem;
    color: #334155;
}
.scan-form-grid {
    display: grid;
    gap: 8px;
}
.scan-form-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.scan-form-row label {
    min-width: 80px;
    font-size: 0.88rem;
    color: #475569;
    text-align: right;
}
.scan-form-row input,
.scan-form-row select {
    flex: 1;
    padding: 7px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.92rem;
}
.scan-form-row input:focus,
.scan-form-row select:focus {
    outline: none;
    border-color: #0d9488;
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.2);
}
.scan-form-row-inline {
    display: flex;
    gap: 8px;
    align-items: center;
}
.scan-form-divider {
    height: 1px;
    background: #e2e8f0;
    margin: 8px 0;
}
.scan-form-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 10px;
}

/* ==============================
   DUPLIKAT-DIALOG (nach altem MessyScan-Vorbild)
   ============================== */
.dup-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 15px;
}
.dup-dialog {
    background: white;
    border-radius: 12px;
    width: 100%;
    max-width: 450px;
    max-height: 90vh;
    overflow: hidden;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
}
.dup-header {
    background: #0d9488;
    color: white;
    padding: 12px 15px;
    flex-shrink: 0;
}
.dup-header-label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.85;
    margin-bottom: 4px;
}
.dup-header-data {
    font-size: 13px;
    line-height: 1.4;
}
.dup-header-data strong {
    font-weight: 700;
}
.dup-section-title {
    padding: 10px 15px;
    font-size: 13px;
    font-weight: 600;
    color: #333;
    background: #f5f5f5;
    border-bottom: 1px solid #ddd;
    flex-shrink: 0;
}
.dup-metabox {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    background: #fafafa;
    border-bottom: 1px solid #ddd;
    min-height: 100px;
    max-height: 50vh;
}
.dup-empty {
    text-align: center;
    color: #888;
    padding: 40px 20px;
    font-style: italic;
}
.dup-company-box {
    background: white;
    border: 2px solid #ddd;
    border-radius: 8px;
    margin-bottom: 10px;
    overflow: hidden;
}
.dup-company-box:last-child { margin-bottom: 0; }
.dup-company-row {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    cursor: pointer;
    background: #f8f8f8;
    border-bottom: 1px solid #eee;
    transition: background 0.2s;
    margin: 0;
}
.dup-company-row:hover { background: #e8f4fd; }
.dup-company-row input[type="radio"] {
    margin-right: 10px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    flex-shrink: 0;
}
.dup-company-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.dup-company-name {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.dup-company-city {
    font-size: 11px;
    color: #888;
    margin-top: 2px;
}
.dup-emp-count {
    padding: 3px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 600;
    background: #6c757d;
    color: white;
    margin-left: 8px;
    flex-shrink: 0;
}
.dup-employees {
    padding: 8px 10px;
    background: white;
    max-height: 200px;
    overflow-y: auto;
}
.dup-employee-row {
    display: flex;
    align-items: center;
    padding: 8px 10px;
    margin-bottom: 5px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}
.dup-employee-row:last-child { margin-bottom: 0; }
.dup-employee-row:hover {
    background: #e8f7fa;
    border-color: #0d9488;
}
.dup-employee-row input[type="radio"] {
    margin-right: 8px;
    width: 16px;
    height: 16px;
    cursor: pointer;
    flex-shrink: 0;
}
.dup-emp-name {
    font-weight: 500;
    font-size: 12px;
    color: #333;
    margin-right: 8px;
    white-space: nowrap;
}
.dup-emp-email {
    font-size: 11px;
    color: #666;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.dup-emp-company {
    font-size: 11px;
    color: #666;
    margin-left: 8px;
    white-space: nowrap;
}
.dup-no-emp {
    padding: 8px 12px;
    font-size: 11px;
    color: #999;
    font-style: italic;
}
.dup-persons-box {
    border-color: #0d9488;
    background: #f0faf9;
}
.dup-persons-header {
    padding: 10px 12px;
    background: #0d9488;
    color: white;
    font-weight: 600;
    font-size: 13px;
}
.dup-toggle-actions {
    display: block;
    width: 100%;
    padding: 12px 15px;
    background: #e9ecef;
    border: none;
    border-bottom: 1px solid #ddd;
    font-size: 14px;
    font-weight: 600;
    color: #495057;
    cursor: pointer;
    text-align: left;
    transition: all 0.2s;
    flex-shrink: 0;
}
.dup-toggle-actions:hover { background: #dee2e6; }
.dup-toggle-actions.expanded {
    background: #0d9488;
    color: white;
}
.dup-options {
    padding: 12px 15px;
    background: white;
    border-bottom: 1px solid #eee;
    flex-shrink: 0;
}
.dup-option {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    margin-bottom: 6px;
    background: #f8f9fa;
    border: 2px solid #e0e0e0;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
}
.dup-option:last-child { margin-bottom: 0; }
.dup-option:hover:not(.disabled) {
    background: #e8f4fd;
    border-color: #0d9488;
}
.dup-option.disabled {
    opacity: 0.4;
    cursor: not-allowed;
    background: #f0f0f0;
}
.dup-option input[type="radio"] {
    margin-right: 10px;
    width: 16px;
    height: 16px;
    cursor: pointer;
}
.dup-option.disabled input[type="radio"] { cursor: not-allowed; }
.dup-option span {
    font-size: 12px;
    color: #333;
    line-height: 1.3;
}
.dup-option.disabled span { color: #888; }
.dup-buttons {
    display: flex;
    gap: 10px;
    padding: 12px 15px;
    background: #f5f5f5;
    flex-shrink: 0;
}
.dup-btn-submit, .dup-btn-cancel {
    flex: 1;
    padding: 12px 15px;
    border: none;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    min-height: 44px;
}
.dup-btn-submit {
    background: #28a745;
    color: white;
}
.dup-btn-submit:hover:not(:disabled) { background: #1e7e34; }
.dup-btn-submit:disabled {
    background: #ccc;
    color: #888;
    cursor: not-allowed;
}
.dup-btn-cancel {
    background: #6c757d;
    color: white;
}
.dup-btn-cancel:hover { background: #545b62; }

/* "Naechste Karte" Button */
#scanNextBtn {
    margin-top: 16px;
}

/* ============================================================
   ATTRIBUTSUCHE (Feature 45)
   ============================================================ */

/* Header-Button (lila — hebt sich von Scan-teal und rotem MC-Design ab) */
.btn-attr-search {
    background: #7c3aed;
    color: #fff;
    border: none;
    font-size: 0.82rem;
}
.btn-attr-search:hover {
    background: #6d28d9;
}

/* Seiten-Header */
.attr-search-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}
.attr-search-header h2 {
    font-size: 1.3rem;
    color: #16213e;
}

/* Vorlagen-Leiste (Speichern/Laden) */
.attr-presets-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
}
.attr-presets-bar select {
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.85rem;
    min-width: 180px;
}
.attr-preset-name-input {
    padding: 6px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.85rem;
    width: 180px;
}
.attr-preset-name-input::placeholder {
    color: #94a3b8;
}
.attr-preset-name-input:focus,
.attr-presets-bar select:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}
.attr-preset-divider {
    color: #cbd5e1;
    font-size: 1.2rem;
}
.btn-save-preset {
    background: #22c55e;
    color: #fff;
    border: none;
}
.btn-save-preset:hover {
    background: #16a34a;
}
.btn-danger-small {
    color: #ef4444;
    border-color: #fecaca;
    background: #fff;
}
.btn-danger-small:hover {
    background: #fef2f2;
    border-color: #ef4444;
}

/* Checkbox: Firmen-Attribute einbeziehen */
.attr-company-toggle {
    display: block;
    margin-bottom: 16px;
    padding: 10px 14px;
    background: #f0f9ff;
    border: 1px solid #bae6fd;
    border-radius: 8px;
    font-size: 0.9rem;
    color: #0369a1;
    cursor: pointer;
}
.attr-company-toggle input[type="checkbox"] {
    margin-right: 8px;
    transform: scale(1.2);
}

/* ============================================================
   MIGRATION: ERSTES_MESSEJAHR → Firmen
   ============================================================ */

/* Beschreibungstext */
.migration-desc {
    font-size: 0.9rem;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 16px;
    padding: 12px 16px;
    background: #f0f9ff;
    border-left: 4px solid #0ea5e9;
    border-radius: 0 8px 8px 0;
}

/* Aktions-Zeile (Buttons + Status) */
.migration-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* Status-Hinweis neben Buttons */
.migration-status {
    font-size: 0.85rem;
    color: #64748b;
    font-style: italic;
}

/* Zusammenfassung ueber der Tabelle */
.migration-summary {
    padding: 12px 16px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    margin-bottom: 12px;
    font-size: 0.9rem;
    color: #334155;
    line-height: 1.5;
}

/* Danger-Button (Ausfuehren) */
.btn-danger {
    background: #dc2626;
    color: #fff;
    border-color: #dc2626;
}
.btn-danger:hover {
    background: #b91c1c;
    border-color: #b91c1c;
}
.btn-danger:disabled {
    background: #fca5a5;
    border-color: #fca5a5;
    cursor: not-allowed;
}

/* Migrations-Button im Header */
.btn-migration {
    background: #fef3c7;
    color: #92400e;
    border-color: #f59e0b;
}
.btn-migration:hover {
    background: #fde68a;
    border-color: #d97706;
}

/* Filter-Bereiche */
.attr-filter-group {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 16px;
    margin-bottom: 16px;
}
.attr-filter-group h3 {
    font-size: 0.95rem;
    color: #334155;
    margin-bottom: 4px;
}
.filter-hint {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-bottom: 12px;
}

/* Farbige linke Raender pro Bereich */
.attr-filter-must {
    border-left: 4px solid #22c55e;
}
.attr-filter-any {
    border-left: 4px solid #3b82f6;
}
.attr-filter-not {
    border-left: 4px solid #ef4444;
}

/* Filter-Zeilen */
.filter-rows {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}
.filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
}
.filter-attr-select {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.9rem;
    background: #fff;
    color: #1e293b;
}
.filter-attr-select:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}
.filter-value-input {
    width: 120px;
    min-width: 100px;
    padding: 8px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.85rem;
    background: #fff;
    color: #1e293b;
}
.filter-value-input::placeholder {
    color: #94a3b8;
    font-size: 0.8rem;
}
.filter-value-input:focus {
    outline: none;
    border-color: #7c3aed;
    box-shadow: 0 0 0 2px rgba(124, 58, 237, 0.15);
}
.btn-remove-filter {
    background: none;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    color: #ef4444;
    font-size: 1.1rem;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}
.btn-remove-filter:hover {
    background: #fef2f2;
    border-color: #ef4444;
}

/* + Bedingung Button */
.btn-add-filter {
    color: #7c3aed;
    border-color: #7c3aed;
    background: #fff;
    font-size: 0.82rem;
}
.btn-add-filter:hover {
    background: #f5f3ff;
}

/* Aktions-Zeile */
.attr-search-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.attr-search-count {
    font-size: 0.9rem;
    color: #64748b;
    font-weight: 600;
}

/* Ergebnis-Tabelle */
.attr-results-scroll {
    overflow-x: auto;
    overflow-y: auto;
    max-height: 70vh;
    -webkit-overflow-scrolling: touch;
    position: relative;
}
.attr-results-scroll thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}
.attr-results-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}
.attr-results-table th {
    background: #f8fafc;
    text-align: left;
    padding: 10px 12px;
    border-bottom: 2px solid #e2e8f0;
    font-weight: 600;
    color: #475569;
    white-space: nowrap;
}
.attr-results-table td {
    padding: 8px 12px;
    border-bottom: 1px solid #f1f5f9;
    color: #334155;
}
.attr-results-table tr:hover {
    background: #f8fafc;
}

/* ============================================================
   KAMPAGNEN-REPORT
   ============================================================ */

/* Nav-Button (tuerkis — unterscheidet sich von lila Attributsuche) */
.btn-campaign-report {
    background: #0d9488;
    color: #fff;
    border: none;
    font-size: 0.82rem;
}
.btn-campaign-report:hover {
    background: #0f766e;
}

/* Info-Text */
.campaign-report-info {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 20px;
    line-height: 1.5;
}

/* Kampagnen-Definitions-Karte */
.campaign-def-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 8px;
}

/* Zusammenfassungs-Zeile (immer sichtbar) */
.campaign-def-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.campaign-def-name {
    flex: 1;
    min-width: 140px;
    padding: 5px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.93rem;
    font-weight: 600;
}
.campaign-def-name:focus {
    outline: none;
    border-color: #0d9488;
    box-shadow: 0 0 0 2px rgba(13, 148, 136, 0.15);
}

/* Segment-Vorschau unter der Summary-Zeile */
.campaign-seg-preview {
    margin-top: 4px;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    padding-left: 28px; /* fluchtet mit dem Name-Input (nach Pfeil-Button) */
}
.seg-preview-include {
    font-size: 0.78rem;
    color: #0d9488;
}
.seg-preview-exclude {
    font-size: 0.78rem;
    color: #dc2626;
}

/* Ausgeklappter Bereich */
.campaign-def-details {
    margin-top: 10px;
    border-top: 1px solid #f1f5f9;
    padding-top: 10px;
}

/* Aufklapp-Button */
.campaign-expand-btn {
    font-size: 0.9rem;
    min-width: 24px;
    flex-shrink: 0;
}
.campaign-expand-btn.expanded {
    color: #0d9488;
}

/* Bereits-versendet-Checkbox */
.campaign-sent-label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: #64748b;
    white-space: nowrap;
    cursor: pointer;
    flex-shrink: 0;
}
.campaign-sent-label input[type="checkbox"] {
    cursor: pointer;
}
.campaign-sent-label span {
    user-select: none;
}

/* Aktions-Zeile unter den Definitionen */
.campaign-def-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    align-items: center;
}
.campaign-sort-label {
    font-size: 0.8rem;
    color: #94a3b8;
    margin-left: 8px;
}
.btn-sort-camp {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #e2e8f0;
    font-size: 0.8rem;
    padding: 4px 10px;
}
.btn-sort-camp:hover {
    background: #e2e8f0;
    color: #0d9488;
}

/* Segment-Auswahl */
.segment-select-group {
    margin-bottom: 10px;
}
.segment-group-label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: #475569;
    margin-bottom: 4px;
}
.segment-select-container {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 8px;
    background: #f8fafc;
}
.segment-checkbox-label {
    display: block;
    padding: 3px 4px;
    font-size: 0.85rem;
    color: #334155;
    cursor: pointer;
}
.segment-checkbox-label:hover {
    background: #e2e8f0;
    border-radius: 4px;
}
.segment-category-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    margin-top: 6px;
    margin-bottom: 2px;
    padding-left: 2px;
}

/* Duplizieren-Button in der Kampagnen-Karte */
.campaign-btn-icon {
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 5px;
    color: #475569;
    font-size: 1rem;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
    transition: background 0.15s;
    flex-shrink: 0;
}
.campaign-btn-icon:hover {
    background: #e2e8f0;
    color: #0d9488;
}

/* Sendedatum-Zeile */
.campaign-date-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}
.campaign-send-date {
    padding: 5px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.9rem;
    color: #1e293b;
    background: #fff;
}
.campaign-send-date:focus {
    outline: none;
    border-color: #0d9488;
    box-shadow: 0 0 0 2px rgba(13,148,136,0.15);
}
.campaign-brevo-link {
    flex: 1;
    min-width: 180px;
    padding: 5px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 0.85rem;
    color: #475569;
    background: #f8fafc;
    cursor: pointer;
}
.campaign-brevo-link:focus {
    outline: none;
    border-color: #0d9488;
}

/* ---- 365-Tage-Kalender ---- */
#campaignReportResults {
    overflow-x: auto;
}
#campaignReportResults table {
    border-collapse: collapse;
    font-size: 0.78rem;
    white-space: nowrap;
}
.cal-fixed {
    position: sticky;
    left: 0;
    background: #f8fafc;
    z-index: 2;
    min-width: 80px;
    max-width: 140px;
    overflow: hidden;
    text-overflow: ellipsis;
    border-right: 1px solid #cbd5e1 !important;
}
thead .cal-fixed {
    background: #1e293b;
    color: #e2e8f0;
    z-index: 3;
}
.cal-month-header {
    background: #1e293b;
    color: #94a3b8;
    text-align: center;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    border-left: 2px solid #334155 !important;
    padding: 4px 2px;
}
.cal-day {
    background: #1e293b;
    color: #64748b;
    text-align: center;
    font-size: 0.7rem;
    min-width: 20px;
    width: 20px;
    padding: 3px 1px;
    border-left: 1px solid #2d3f55;
}
.cal-day-campaign {
    background: #134e4a;
    color: #5eead4;
    text-align: center;
    font-size: 0.7rem;
    min-width: 20px;
    width: 20px;
    padding: 3px 1px;
    border-left: 1px solid #2d3f55;
    cursor: help;
}
.cal-day-campaign-past {
    background: #334155;
    color: #94a3b8;
    text-align: center;
    font-size: 0.7rem;
    min-width: 20px;
    width: 20px;
    padding: 3px 1px;
    border-left: 1px solid #2d3f55;
    cursor: help;
}
.cal-cell {
    min-width: 20px;
    width: 20px;
    padding: 0;
    border-left: 1px solid #f0f4f8;
}
.cal-cell-x {
    min-width: 20px;
    width: 20px;
    text-align: center;
    font-weight: 700;
    color: #0d9488;
    background: #f0fdf4;
    border-left: 1px solid #a7f3d0;
    cursor: help;
}
.cal-cell-x-past {
    min-width: 20px;
    width: 20px;
    text-align: center;
    font-weight: 700;
    color: #94a3b8;
    background: #f1f5f9;
    border-left: 1px solid #cbd5e1;
    cursor: help;
}
#campaignReportResults tr:hover .cal-cell,
#campaignReportResults tr:hover .cal-cell-x {
    background: #e0f2fe;
}
#campaignReportResults tr:hover .cal-cell-x {
    background: #bbf7d0;
}

/* Keine-Kampagne-Zeilen rot hervorheben */
.campaign-no-campaign {
    background: #fef2f2 !important;
}
.campaign-no-campaign td {
    color: #991b1b;
}
.campaign-no-campaign:hover {
    background: #fee2e2 !important;
}

/* --- Scanner Mobile-Optimierung --- */
@media (max-width: 600px) {
    /* Kein seitliches Verschieben auf dem Handy */
    #scannerSection {
        overflow-x: hidden;
        max-width: 100vw;
    }
    .scan-form-row {
        flex-direction: column;
        align-items: stretch;
    }
    .scan-form-row label {
        text-align: left;
        min-width: auto;
        margin-bottom: 2px;
    }
    .scanner-tag-row {
        flex-direction: column;
        align-items: stretch;
    }
    .scanner-controls {
        justify-content: center;
    }
    .scan-form-actions {
        flex-direction: column;
    }
    /* Duplikat-Dialog: Auf Handybreite begrenzen */
    .dup-overlay { padding: 8px; }
    .dup-dialog { max-width: calc(100vw - 16px); }
    .dup-header { padding: 10px 12px; }
    .dup-metabox { padding: 8px; }
}

@media (max-height: 700px) {
    .dup-metabox {
        max-height: 40vh;
        min-height: 100px;
    }
}

/* ============================================================
   RESPONSIVE: HANDY-ANPASSUNG (Schritt 29)
   Breakpoints: 768px (Tablet), 480px (Handy)
   ============================================================ */

/* --- Kein horizontales Scrollen auf der gesamten Seite --- */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ---- TABLET (bis 768px) ---- */
@media (max-width: 768px) {

    /* --- HEADER: Umbruch erlauben, kompakter --- */
    .app-header {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 0;
    }

    .app-header h1 {
        font-size: 18px;
    }

    .header-subtitle {
        font-size: 12px;
    }

    /* --- DASHBOARD: Filter-Zeile umbrechen --- */
    .dashboard-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .dashboard-header h2 {
        flex: 1 0 100%;
        font-size: 16px;
    }

    /* --- SECTION: Weniger Padding --- */
    .section {
        padding: 14px;
    }

    /* --- FORMULARE: Labels ueber Inputs statt daneben --- */
    .form-row {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .form-row label {
        min-width: auto;
    }

    /* --- KONTAKT-INFO im Modal: Labels ueber Werte --- */
    .contact-info-row {
        flex-wrap: wrap;
    }

    .contact-info-label {
        min-width: auto;
        flex: 0 0 100%;
    }

    /* --- NOTIZ-EINGABE: Untereinander statt nebeneinander --- */
    .new-note-options {
        flex-direction: column;
        align-items: stretch;
    }

    .new-note-options .btn {
        width: 100%;
        text-align: center;
    }

    /* --- AKKORDEON-DETAIL: Weniger Padding --- */
    #companyDetailWrapper {
        padding: 12px;
    }

    /* --- PILLEN-LEGENDE: Kompakter --- */
    .attr-pills-legend {
        gap: 8px;
        font-size: 10px;
    }

    /* --- NEUES ATTRIBUT: Labels ueber Inputs --- */
    .new-attr-row {
        flex-direction: column;
        align-items: stretch;
        gap: 4px;
    }

    .new-attr-row label {
        min-width: auto;
    }

    .new-attr-input {
        width: 100%;
    }

    /* --- ATTRIBUTSUCHE: Kompakter auf Tablet --- */
    .attr-search-header h2 {
        font-size: 1.1rem;
    }
    .attr-filter-group {
        padding: 12px;
    }

    /* --- MIGRATION: Kompakter auf Tablet --- */
    .migration-desc {
        font-size: 0.85rem;
        padding: 10px 12px;
    }
    .migration-actions {
        gap: 8px;
    }
}

/* ---- HANDY (bis 480px) ---- */
@media (max-width: 480px) {

    /* --- HEADER: Zweizeilig, Buttons in eigener Zeile --- */
    .app-header {
        gap: 6px;
        padding: 10px 0;
    }

    .app-header h1 {
        font-size: 16px;
        flex: 1 0 auto;
    }

    .header-subtitle {
        display: none;
    }

    .logout-btn {
        font-size: 12px;
        padding: 6px 10px;
    }

    /* --- BUTTONS: Touch-freundliche Mindestgroesse (44px) --- */
    .btn {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 14px;
    }

    .btn-small {
        min-height: 38px;
        padding: 8px 12px;
        font-size: 12px;
    }

    .btn-dashboard, .btn-scanner, .btn-attr-search, .btn-campaign-report, .btn-migration {
        min-height: 38px;
        padding: 8px 10px;
        font-size: 12px;
    }

    /* --- ATTRIBUTSUCHE: Volle Breite auf Handy --- */
    .attr-presets-bar {
        flex-direction: column;
        align-items: stretch;
    }
    .attr-presets-bar select,
    .attr-preset-name-input {
        width: 100%;
        min-width: unset;
        min-height: 44px;
        font-size: 14px;
    }
    .attr-preset-divider {
        display: none;
    }
    .attr-filter-group {
        padding: 10px;
    }
    .attr-filter-group h3 {
        font-size: 0.85rem;
    }
    .filter-row {
        flex-wrap: wrap;
    }
    .filter-attr-select {
        font-size: 14px;
        min-height: 44px;
        flex: 1 1 100%;
    }
    .filter-value-input {
        flex: 1;
        width: auto;
        min-height: 44px;
        font-size: 14px;
    }
    .attr-results-table {
        font-size: 0.8rem;
    }
    .attr-results-table th,
    .attr-results-table td {
        padding: 6px 8px;
    }

    /* --- SECTIONS: Weniger Padding auf Handy --- */
    .app-container {
        padding: 8px;
    }

    .section {
        padding: 12px;
        border-radius: 8px;
        margin-bottom: 10px;
    }

    .section h2 {
        font-size: 16px;
    }

    /* --- SUCHE: Input und Buttons untereinander, Cache-Button neben Suchen --- */
    .search-row {
        flex-direction: column;
    }

    .search-row input {
        font-size: 16px;
    }

    .search-row .btn:not(.btn-cache) {
        flex: 1;
        text-align: center;
    }

    .search-row .btn-cache {
        width: auto;
    }

    /* --- DASHBOARD: Filter-Zeile kompakt --- */
    .dashboard-filter {
        flex: 1;
        min-width: 0;
    }

    .dashboard-header .btn-small {
        flex: 0 0 auto;
    }

    /* --- DASHBOARD-KACHELN: Kompakter auf Handy --- */
    .task-card {
        padding: 6px 10px;
    }

    .task-contact-name {
        font-size: 12px;
    }

    .task-row-contact {
        gap: 4px;
        font-size: 11px;
    }

    .task-row-note {
        font-size: 11px;
    }

    /* --- FIRMENKARTEN: Volle Breite, mehr Platz --- */
    .company-card {
        padding: 12px;
        gap: 8px;
    }

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

    /* --- FIRMEN-DETAIL (AKKORDEON) --- */
    #companyDetailWrapper {
        padding: 10px;
        border-radius: 8px;
    }

    .company-header-top {
        flex-direction: column;
        gap: 8px;
    }

    .company-header-top .company-header-right {
        align-self: flex-end;
    }

    .company-name-row h2 {
        font-size: 16px;
    }

    /* --- MITARBEITER-TABELLE: Scrollbar + kompakter --- */
    .members-table {
        font-size: 12px;
    }

    .members-table th,
    .members-table td {
        padding: 6px 6px;
    }

    /* Tabellen-Spalten: Weniger min-width auf Handy */
    .col-check { width: 30px; }
    .col-name { min-width: 90px; }
    .col-email { min-width: 100px; }
    .col-phone { min-width: 80px; }
    .col-tags { min-width: 60px; max-width: 100px; }

    /* Pillen in Tabelle: Noch kompakter */
    .tag-pill-sm {
        font-size: 9px;
        padding: 1px 4px;
    }

    .pills-grid {
        grid-template-columns: 1fr;
        gap: 1px;
    }

    /* --- MODAL: Volle Breite auf Handy, von oben scrollbar --- */
    .modal-overlay {
        padding: 8px 0 0 0;
        align-items: flex-start;
    }

    .modal-content {
        max-width: 100%;
        max-height: 95vh;
        border-radius: 14px 14px 0 0;
        padding: 16px 10px 10px;
    }

    .modal-close {
        top: 8px;
        right: 8px;
        width: 44px;
        height: 44px;
        font-size: 28px;
    }

    /* --- NOTIZ-TEXTAREA im Modal: Volle Breite --- */
    .new-note-row {
        flex-direction: column;
    }

    .new-note-row textarea {
        width: 100%;
        padding: 8px 10px;
        font-size: 16px;
        box-sizing: border-box;
    }

    .new-note-options {
        width: 100%;
    }

    /* --- KONTAKT-DETAIL im Modal: Kompakter --- */
    .contact-detail-header h2 {
        font-size: 16px;
    }

    .contact-info-area {
        margin-bottom: 8px;
        padding-bottom: 8px;
    }

    .contact-info-row {
        font-size: 13px;
        margin-bottom: 2px;
        gap: 4px;
    }

    .contact-info-label {
        min-width: 52px;
    }

    .btn-edit-contact-field {
        font-size: 9px;
        padding: 1px 5px;
    }

    .contact-tags-area {
        margin-bottom: 8px;
        padding-bottom: 8px;
    }

    .contact-notes-area {
        margin-bottom: 8px;
    }

    .contact-notes-area h3 {
        margin-bottom: 4px;
        font-size: 14px;
    }

    .note-card {
        padding: 8px 10px;
    }

    .btn-note-done {
        min-height: 36px;
        padding: 4px 10px;
    }

    /* --- DATUMS-INPUT: Groesser und touch-freundlich --- */
    .note-date-input {
        min-height: 44px;
        font-size: 16px;
        padding: 8px 10px;
        max-width: 180px;
    }

    .note-date-icon {
        font-size: 1.4rem;
    }

    .note-date-label {
        font-size: 1rem;
    }

    /* --- ATTRIBUT-SEKTION --- */
    .attr-pills-grid {
        gap: 3px;
    }

    .attr-pill-label {
        padding: 4px 8px;
        font-size: 11px;
    }

    /* --- NEUEN KONTAKT / NEUE FIRMA ANLEGEN --- */
    .new-contact-buttons {
        flex-direction: column;
    }

    .new-contact-buttons .btn {
        width: 100%;
    }

    /* --- MIGRATION: Kompakter auf Handy --- */
    .migration-desc {
        font-size: 0.82rem;
        padding: 8px 10px;
    }
    .migration-actions {
        flex-direction: column;
        align-items: stretch;
    }
    .migration-actions .btn {
        width: 100%;
        text-align: center;
    }
    .migration-summary {
        font-size: 0.82rem;
        padding: 10px 12px;
    }

    /* --- STATUS-MELDUNG: Breiter auf Handy --- */
    .status-message {
        width: calc(100% - 16px);
        font-size: 13px;
        padding: 12px 16px;
    }
}

/* ============================================================
   LEADRECHERCHE
   ============================================================ */

.btn-leadrecherche {
    background: #7c3aed;
    color: #fff;
    border-color: #7c3aed;
}
.btn-leadrecherche:hover {
    background: #6d28d9;
    border-color: #6d28d9;
}
.lr-header-buttons {
    display: flex;
    gap: 8px;
    align-items: center;
}
.btn-lr-load-last {
    background: #f5f3ff;
    color: #7c3aed;
    border: 1px solid #7c3aed;
}
.btn-lr-load-last:hover {
    background: #ede9fe;
}

/* Quellen-Buttons (Firmen finden) */
.lr-source-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    margin-bottom: 12px;
}
.lr-source-btn {
    background: #f1f5f9;
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 16px;
    padding: 6px 14px;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s;
}
.lr-source-btn:hover {
    background: #e0e7ff;
    border-color: #818cf8;
    color: #4338ca;
}
.lr-source-btn.lr-source-active {
    background: #7c3aed;
    color: #fff;
    border-color: #7c3aed;
}
.lr-source-hint {
    color: #94a3b8;
    font-size: 11px;
}

/* Tabs */
.lr-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 16px;
    border-bottom: 2px solid #e2e8f0;
}
.lr-tab {
    padding: 10px 20px;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: #64748b;
    transition: all 0.15s;
}
.lr-tab:hover {
    color: #1a1a2e;
    background: #f8fafc;
}
.lr-tab-active {
    color: #7c3aed;
    border-bottom-color: #7c3aed;
}

/* Input-Bereich */
.lr-input-methods {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lr-input-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lr-input-group label {
    font-weight: 600;
    font-size: 13px;
    color: #475569;
}
.lr-input-group textarea {
    width: 100%;
    padding: 10px 12px;
    border: 2px solid #e2e8f0;
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
}
.lr-input-group textarea:focus {
    border-color: #7c3aed;
    outline: none;
    box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.15);
}
.lr-input-or {
    text-align: center;
    color: #94a3b8;
    font-size: 13px;
    padding: 4px 0;
}
.lr-input-upload-row {
    flex-direction: row;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.lr-upload-btn {
    background: #e2e8f0 !important;
    color: #475569 !important;
    cursor: pointer;
}
.lr-upload-btn:hover {
    background: #cbd5e1 !important;
}
.lr-extract-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Domain-Vorschau */
.lr-domain-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 10px 0;
    max-height: 300px;
    overflow-y: auto;
}
.lr-domain-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
}
.lr-domain-item label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    flex: 1;
    min-width: 0;
}
.lr-research-actions {
    margin-top: 12px;
    display: flex;
    gap: 10px;
    align-items: center;
}

/* Badges */
.lr-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
}
.lr-badge-reachable {
    background: #dcfce7;
    color: #166534;
}
.lr-badge-nocontact {
    background: #ffedd5;
    color: #9a3412;
}
.lr-badge-new {
    background: #dbeafe;
    color: #1e40af;
}

/* Fortschrittsbalken */
.lr-progress-bar-container {
    width: 100%;
    height: 8px;
    background: #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 8px;
}
.lr-progress-bar {
    height: 100%;
    background: #7c3aed;
    border-radius: 4px;
    width: 0%;
    transition: width 0.3s;
}

/* Ergebnistabelle */
.lr-results-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 10px;
}
.lr-results-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.lr-results-filters select {
    padding: 6px 10px;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    font-size: 13px;
}
.lr-toggle-reachable {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: #64748b;
    margin-bottom: 8px;
    cursor: pointer;
}

/* Ampel-Symbole */
.lr-ampel {
    display: inline-block;
    font-size: 16px;
    font-weight: bold;
}
.lr-ampel-green-double {
    color: #15803d;
}
.lr-ampel-green {
    color: #16a34a;
}
.lr-ampel-yellow {
    color: #d97706;
}
.lr-ampel-red {
    color: #dc2626;
}
.lr-ampel-cell {
    text-align: center;
}

/* Spezial-Banner in Zeilen */
.lr-insolvency-banner {
    background: #fee2e2;
    color: #991b1b;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    font-weight: 600;
    margin-bottom: 4px;
    display: inline-block;
}
.lr-below-minimum {
    background: #f1f5f9;
    color: #64748b;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    margin-bottom: 4px;
    display: inline-block;
}
.lr-below-minimum-text {
    color: #94a3b8;
}

/* Erreichbare Zeilen ausgegraut */
.lr-row-reachable {
    opacity: 0.45;
    background: #f8fafc;
}
.lr-row-reachable:hover {
    opacity: 0.75;
}
.lr-row-insolvent {
    background: #fef2f2;
}

/* Tabelle kompakt — kein horizontales Scrollen */
.lr-results-table {
    table-layout: fixed;
    width: 100%;
    font-size: 13px;
}
.lr-results-table th,
.lr-results-table td {
    word-wrap: break-word;
    overflow-wrap: break-word;
    padding: 5px 4px;
    vertical-align: top;
}
/* Spaltenbreiten */
.lr-results-table th:nth-child(1),
.lr-results-table td:nth-child(1) { width: 13%; }  /* Domain */
.lr-results-table th:nth-child(2),
.lr-results-table td:nth-child(2) { width: 15%; }  /* Firma */
.lr-results-table th:nth-child(3),
.lr-results-table td:nth-child(3) { width: 4%; text-align: right; }  /* MA */
.lr-results-table th:nth-child(4),
.lr-results-table td:nth-child(4) { width: 9%; }   /* Ort */
.lr-results-table th:nth-child(5),
.lr-results-table td:nth-child(5) { width: 5%; text-align: center; }  /* Ampel */
.lr-results-table th:nth-child(6),
.lr-results-table td:nth-child(6) { width: 10%; }  /* Brevo-Status */
.lr-results-table th:nth-child(7),
.lr-results-table td:nth-child(7) { width: 16%; }  /* HR-Kontakt */
.lr-results-table th:nth-child(8),
.lr-results-table td:nth-child(8) { width: 20%; }  /* Einschaetzung */
.lr-results-table th:nth-child(9),
.lr-results-table td:nth-child(9) { width: 8%; }   /* Aktionen */

/* HR-Kontakt-Zelle */
.lr-hr-cell {
    font-size: 12px;
    line-height: 1.3;
}
.lr-hr-cell a {
    color: #2563eb;
    text-decoration: none;
}
.lr-hr-cell a:hover {
    text-decoration: underline;
}

/* Aktions-Buttons */
.lr-actions-cell {
    white-space: nowrap;
}
.btn-mini.lr-btn-retry,
.btn-mini.lr-btn-ignore,
.btn-mini.lr-btn-note {
    padding: 2px 5px;
    font-size: 11px;
    margin: 1px;
}

/* Responsive */
@media (max-width: 700px) {
    .lr-tabs {
        flex-direction: column;
    }
    .lr-tab {
        border-bottom: none;
        border-left: 3px solid transparent;
    }
    .lr-tab-active {
        border-left-color: #7c3aed;
        border-bottom-color: transparent;
    }
    .lr-results-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .lr-results-table {
        font-size: 12px;
    }
}

/* ============================================================
   MAIL-ANTWORT
   ============================================================ */

.btn-mail-antwort {
    background: #ea7a0b;
    color: #fff;
    border-color: #ea7a0b;
}
.btn-mail-antwort:hover {
    background: #c9650a;
    border-color: #c9650a;
}

.ma-header-buttons {
    display: flex;
    gap: 12px;
    align-items: center;
}
.ma-counter {
    font-size: 13px;
    color: #666;
}
.ma-counter.ma-counter-warn {
    color: #c9650a;
    font-weight: 600;
}
.ma-counter.ma-counter-limit {
    color: #c00;
    font-weight: 600;
}
.ma-model-picker {
    font-size: 13px;
    color: #555;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ma-model-picker select {
    font-size: 13px;
    padding: 2px 6px;
    border: 1px solid #bbb;
    border-radius: 4px;
    background: #fff;
    cursor: pointer;
}

.ma-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-top: 16px;
}

.ma-left, .ma-right {
    min-width: 0;
}

/* Drag & Drop-Feld */
.ma-dropzone {
    border: 2px dashed #bbb;
    border-radius: 10px;
    padding: 32px 16px;
    text-align: center;
    cursor: pointer;
    background: #fafafa;
    transition: all 0.15s ease;
}
.ma-dropzone:hover,
.ma-dropzone.ma-dropzone-hover {
    border-color: #ea7a0b;
    background: #fff5e9;
}
.ma-dropzone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
}
.ma-dropzone-icon {
    font-size: 36px;
}
.ma-dropzone-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: #555;
}
.ma-dropzone-text strong {
    color: #222;
    font-size: 15px;
}
.ma-dropzone-text span {
    font-size: 13px;
    color: #888;
}

/* Erkannte Mail */
.ma-parsed {
    margin-top: 16px;
    padding: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
}
.ma-parsed h3 {
    margin: 0 0 12px 0;
    font-size: 16px;
}
.ma-parsed h4 {
    margin: 12px 0 6px 0;
    font-size: 14px;
    color: #555;
}
.ma-meta {
    margin: 0;
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 4px 12px;
    font-size: 14px;
}
.ma-meta dt {
    color: #666;
    font-weight: 600;
}
.ma-meta dd {
    margin: 0;
    word-break: break-word;
}
.ma-body-preview {
    background: #f7f7f7;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    padding: 10px 12px;
    font-size: 13px;
    line-height: 1.5;
    white-space: pre-wrap;
    max-height: 160px;
    overflow: hidden;
    position: relative;
}
.ma-body-preview.ma-body-expanded {
    max-height: none;
}
.ma-body-toggle {
    margin-top: 6px;
}
.ma-generate-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 16px;
}

/* Rechte Seite */
.ma-empty-state {
    padding: 32px 16px;
    text-align: center;
    color: #888;
    border: 1px dashed #ddd;
    border-radius: 8px;
}
.ma-empty-state p {
    margin: 8px 0;
}

.ma-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    gap: 12px;
    color: #555;
}
.ma-loading .spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #ddd;
    border-top-color: #ea7a0b;
    border-radius: 50%;
    animation: ma-spin 0.8s linear infinite;
}
@keyframes ma-spin {
    to { transform: rotate(360deg); }
}

.ma-match-info {
    margin: 0 0 14px 0;
    font-size: 13px;
    line-height: 1.4;
}
.ma-match-info .ma-match-block {
    padding: 10px 12px;
    border-radius: 6px;
    margin-bottom: 6px;
}
.ma-match-info .ma-match-block:last-child { margin-bottom: 0; }

/* Legacy: wenn ma-match-info SELBST die Variant-Klasse traegt (alter Pfad) */
.ma-match-info.ma-match-ok,
.ma-match-info .ma-match-block.ma-match-ok {
    background: #e8f5e9;
    border: 1px solid #a5d6a7;
    color: #1b5e20;
}
.ma-match-info.ma-match-fuzzy,
.ma-match-info .ma-match-block.ma-match-fuzzy {
    background: #fff4e0;
    border: 1px solid #ffb74d;
    color: #8a4b00;
}
.ma-match-info.ma-match-none,
.ma-match-info .ma-match-block.ma-match-none {
    background: #eceff1;
    border: 1px solid #b0bec5;
    color: #37474f;
}
/* Padding nur am Hauptcontainer, wenn er KEINE Bloecke drin hat */
.ma-match-info.ma-match-ok:not(:has(.ma-match-block)),
.ma-match-info.ma-match-fuzzy:not(:has(.ma-match-block)),
.ma-match-info.ma-match-none:not(:has(.ma-match-block)) {
    padding: 10px 12px;
    border-radius: 6px;
}
.ma-match-info strong {
    font-weight: 600;
}
.ma-match-info .ma-match-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
    margin-right: 8px;
    vertical-align: middle;
}
.ma-match-ok .ma-match-badge    { background: #2e7d32; color: #fff; }
.ma-match-fuzzy .ma-match-badge { background: #ef6c00; color: #fff; }
.ma-match-none .ma-match-badge  { background: #546e7a; color: #fff; }

/* Klickbarer Badge (Link zur Kontakt-Detailseite) */
.ma-match-info .ma-match-badge-link {
    border: none;
    cursor: pointer;
    font-family: inherit;
    line-height: inherit;
    text-decoration: none;
}
.ma-match-info .ma-match-badge-link::after {
    content: " \2197"; /* kleiner Pfeil nach oben rechts */
    opacity: 0.8;
    margin-left: 2px;
}
.ma-match-info .ma-match-badge-link:hover {
    filter: brightness(1.15);
    text-decoration: none;
}

.ma-result h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
}
.ma-result h4 {
    margin: 20px 0 8px 0;
    font-size: 14px;
    color: #444;
}
.ma-draft {
    width: 100%;
    min-height: 260px;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.55;
    resize: vertical;
    box-sizing: border-box;
}
.ma-draft-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 10px;
}
.ma-bcc-hint {
    margin-top: 10px;
    padding: 8px 10px;
    background: #fff5e9;
    border-left: 3px solid #ea7a0b;
    border-radius: 4px;
    font-size: 13px;
    color: #6b3a04;
}
.ma-bcc-hint code {
    background: rgba(0,0,0,0.06);
    padding: 1px 5px;
    border-radius: 3px;
}

.ma-hints {
    margin-top: 20px;
    padding: 12px 14px;
    border-left: 3px solid #888;
    background: #fafafa;
    border-radius: 4px;
    font-size: 14px;
    line-height: 1.55;
}
.ma-hints h4 {
    margin-top: 0;
}

/* Vorschlaege / Aktionen */
.ma-suggestions {
    margin-top: 24px;
    padding: 16px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: #fff;
}
.ma-suggestion-item {
    display: flex;
    gap: 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f0f0f0;
}
.ma-suggestion-item:last-child {
    border-bottom: none;
}
.ma-suggestion-item input[type="checkbox"] {
    margin-top: 3px;
    flex-shrink: 0;
}
.ma-suggestion-body {
    flex: 1;
    min-width: 0;
}
.ma-suggestion-title {
    font-weight: 600;
    color: #222;
    font-size: 14px;
}
.ma-suggestion-detail {
    font-size: 13px;
    color: #555;
    margin-top: 2px;
    line-height: 1.5;
}
.ma-suggestion-input {
    margin-top: 6px;
    display: flex;
    gap: 6px;
    align-items: center;
    font-size: 13px;
}
.ma-suggestion-input label {
    color: #666;
}
.ma-suggestion-input input[type="number"],
.ma-suggestion-input input[type="text"] {
    padding: 3px 6px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 13px;
    width: 100px;
}
.ma-suggestion-input input[type="text"] {
    width: 160px;
}
.ma-suggestion-item.ma-suggestion-done {
    opacity: 0.5;
}
.ma-suggestion-item.ma-suggestion-done .ma-suggestion-title::after {
    content: " (erledigt)";
    color: #38872a;
    font-weight: 400;
}
.ma-suggestion-item.ma-suggestion-error {
    background: #fff0f0;
    border-radius: 4px;
    padding-left: 8px;
}
.ma-suggestion-item.ma-suggestion-error .ma-suggestion-error-msg {
    color: #c00;
    font-size: 12px;
    margin-top: 4px;
}
.ma-apply-row {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f0f0f0;
}
.ma-apply-status {
    font-size: 13px;
    color: #666;
}

/* Mobil: Spalten untereinander */
@media (max-width: 900px) {
    .ma-split {
        grid-template-columns: 1fr;
    }
    .ma-dropzone {
        padding: 24px 12px;
    }
}

@media (max-width: 900px) {
    .btn-mail-antwort {
        padding: 6px 10px;
        font-size: 12px;
    }
}

/* ============================================================ */
/* BREVO-DIAGNOSE — Konsistenzpruefung der Brevo-API           */
/* ============================================================ */

.brevo-diag-tests {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.brevo-diag-test {
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    padding: 14px 16px;
    background: #fafafa;
}

.brevo-diag-test h3 {
    margin: 0 0 8px 0;
    font-size: 16px;
    color: #1f2937;
}

.brevo-diag-result {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
}

.brevo-diag-row {
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e5e7eb;
}
.brevo-diag-row:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.brevo-diag-row h4 {
    margin: 0 0 8px 0;
    font-size: 14px;
    color: #111827;
}

.brevo-diag-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 8px;
    font-size: 13px;
    background: #fff;
}

.brevo-diag-table th,
.brevo-diag-table td {
    padding: 6px 10px;
    text-align: left;
    border-bottom: 1px solid #f1f1f1;
    vertical-align: top;
}

.brevo-diag-table th {
    background: #f3f4f6;
    font-weight: 600;
    color: #374151;
}

.brevo-diag-table td:first-child {
    color: #6b7280;
    width: 38%;
}

.brevo-diag-verdict {
    margin-top: 8px;
    padding: 10px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
}

.brevo-diag-verdict-ok {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
}

.brevo-diag-verdict-bug {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.brevo-diag-verdict-info {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fde68a;
}