/* ============================================
   COMPARISON TABLE
   ============================================ */
.compare-section {
    background: var(--bg-white);
    padding: var(--space-3xl) var(--space-lg);
}

.compare-section h2 {
    margin-bottom: var(--space-2xl);
}

/* Box wie die anderen Kästen */
.compare-box {
    background: var(--bg-white);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
}

.compare-table-wrapper {
    display: flex;
    justify-content: center;
}

.compare-table {
    width: auto;
    min-width: 600px;
    max-width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.compare-table thead th {
    padding: var(--space-sm) var(--space-xl);
    text-align: left;
    font-weight: 600;
    color: var(--text-light);
    font-size: 13px;
    border-bottom: 2px solid var(--border);
}

.compare-table thead th:nth-child(2),
.compare-table thead th:nth-child(3) {
    text-align: center;
}

.compare-table td {
    padding: var(--space-sm) var(--space-xl);
    vertical-align: middle;
    color: var(--text-dark);
}

.compare-table tbody tr {
    border-bottom: 1px solid var(--border);
}

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

.compare-table td:first-child {
    font-weight: 500;
}

.compare-table td:nth-child(2),
.compare-table td:nth-child(3) {
    text-align: center;
}

/* Checkmark - Grün wie in Feature-Cards */
.badge-yes {
    color: var(--success);
    font-size: 18px;
    font-weight: 600;
}

/* X - Rosa */
.badge-no {
    color: #fb7185;
    font-size: 18px;
    font-weight: 600;
}

/* Notiz */
.compare-note {
    color: var(--text-light);
    font-size: 13px;
    font-weight: 400;
    margin-left: 8px;
}

/* Responsive */
@media (max-width: 768px) {
    .compare-section {
        padding: var(--space-2xl) var(--space-md);
    }
    
    .compare-box {
        padding: var(--space-lg);
    }

    .compare-table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .compare-table {
        min-width: 100%;
    }
    
    .compare-table thead th,
    .compare-table td {
        padding: var(--space-sm) var(--space-sm);
        font-size: 13px;
    }
    
    .compare-note {
        display: block;
        margin-left: 0;
        margin-top: 4px;
        font-size: 11px;
    }
}

@media (max-width: 360px) {
    .compare-table thead th,
    .compare-table td {
        padding: var(--space-xs) var(--space-xs);
        font-size: 12px;
    }
    .badge-yes, .badge-no {
        font-size: 15px;
    }
}