/**
 * zusatzfelder.css
 *
 * Stylt die NATIVE JTL-Attributliste (.product-attributes) um.
 * Es wird KEIN eigenes Template gerendert - die Daten kommen zu
 * 100% aus der bestehenden NOVA-Tabelle. Wir geben ihr nur ein
 * neues Aussehen per CSS, ergänzt um etwas JS für Badges/Skalen
 * (siehe zusatzfelder.js).
 */

.product-attributes {
    margin: 1.5rem 0;
}

.product-attributes table {
    border: 1px solid #e5e5e5 !important;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.product-attributes thead {
    display: none; /* "Produkteigenschaft"/"Wert" Kopfzeile war eh nur sr-only */
}

.product-attributes tbody tr.attr-custom {
    border-bottom: 1px solid #f0f0f0 !important;
}

.product-attributes tbody tr.attr-custom:nth-child(even) {
    background-color: #fafafa;
}

.product-attributes tbody tr.attr-custom:last-child {
    border-bottom: none !important;
}

.product-attributes td.h6 {
    font-size: 0.9rem !important;
    font-weight: 500;
    color: #555;
    border: none !important;
    padding: 12px 18px !important;
    vertical-align: middle;
}

.product-attributes td.h6::after {
    content: "";
}

.product-attributes td.attr-value {
    font-size: 0.9rem;
    color: #222;
    border: none !important;
    padding: 12px 18px !important;
    text-align: right;
    vertical-align: middle;
}

/* Badges für Ja/Nein-Werte (werden per JS mit der Klasse versehen) */
.zf-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 11px;
    border-radius: 20px;
    font-size: 0.78rem;
    font-weight: 600;
    color: #fff;
}
.zf-badge-ja   { background-color: #2e9e4d; }
.zf-badge-nein { background-color: #8a8f98; }
.zf-badge-info { background-color: #3b82c4; }
.zf-badge-warn { background-color: #d98c2b; }

/* Skala für 1-5 Werte (Passform, Schwierigkeit, Langlebigkeit) */
.zf-skala {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
}
.zf-skala-punkte {
    display: inline-flex;
    gap: 4px;
}
.zf-punkt {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background-color: #e1e4e8;
    border: 1.5px solid #d0d4d9;
    display: inline-block;
}
.zf-punkt-aktiv {
    background-color: #3b82c4;
    border-color: #2c6298;
}
.zf-skala-label {
    font-size: 0.72rem;
    color: #999;
    white-space: nowrap;
}
.zf-skala-label.zf-aktiv {
    color: #3b82c4;
    font-weight: 600;
}