/* ========================================  
   LIFE PORTFOLIO – MAIN STYLES (v1.1.0)  
   Kompatibel mit Ashe Theme (WP Royal)  
   ======================================== */

#lp-container {  
    max-width: 900px;  
    margin: 2rem auto;  
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;  
    color: #1e293b;  
    line-height: 1.6;  
}

/* ---------- INTRO ---------- */  
.lp-intro {  
    text-align: center;  
    margin-bottom: 2rem;  
}

.lp-intro h2 {  
    font-size: 2rem;  
    margin-bottom: 0.5rem;  
    color: #0f172a;  
}

.lp-intro p {  
    color: #64748b;  
    max-width: 600px;  
    margin: 0 auto 1.5rem;  
}

.lp-legend {  
    display: flex;  
    flex-wrap: wrap;  
    justify-content: center;  
    gap: 1rem;  
}

.lp-legend-item {  
    display: flex;  
    align-items: center;  
    gap: 0.4rem;  
    font-size: 0.85rem;  
    font-weight: 500;  
}

.lp-legend-dot {  
    width: 12px;  
    height: 12px;  
    border-radius: 50%;  
    display: inline-block;  
}

/* ---------- CATEGORY BLOCKS ---------- */  
.lp-category {  
    background: #ffffff;  
    border-radius: 12px;  
    padding: 1.5rem;  
    margin-bottom: 1.5rem;  
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);  
}

.lp-cat-title {  
    display: flex;  
    align-items: center;  
    gap: 0.5rem;  
    font-size: 1.25rem;  
    margin: 0 0 0.25rem;  
    color: #0f172a;  
}

.lp-cat-dot {  
    width: 14px;  
    height: 14px;  
    border-radius: 50%;  
    display: inline-block;  
    flex-shrink: 0;  
}

.lp-cat-desc {  
    font-size: 0.9rem;  
    color: #64748b;  
    font-style: italic;  
    margin: 0 0 1rem;  
}

/* ---------- HEADER ROW ---------- */  
.lp-header-row {  
    display: grid;  
    grid-template-columns: 1fr 100px 100px 100px;  
    gap: 0.5rem;  
    padding: 0.5rem 0;  
    border-bottom: 2px solid #e2e8f0;  
    margin-bottom: 0.5rem;  
    font-size: 0.75rem;  
    font-weight: 700;  
    text-transform: uppercase;  
    letter-spacing: 0.05em;  
    color: #94a3b8;  
}

.lp-header-val {  
    text-align: center;  
}

/* ---------- ITEM ROWS ---------- */  
.lp-item {  
    border-bottom: 1px solid #f1f5f9;  
}

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

.lp-item-row {  
    display: grid;  
    grid-template-columns: 1fr 100px 100px 100px;  
    gap: 0.5rem;  
    align-items: center;  
    padding: 0.6rem 0;  
}

.lp-item-name {  
    min-width: 0;  
}

.lp-accordion-toggle {  
    background: none;  
    border: none;  
    cursor: pointer;  
    font-size: 0.95rem;  
    font-weight: 600;  
    color: #334155;  
    padding: 0.25rem 0;  
    text-align: left;  
    display: flex;  
    align-items: center;  
    gap: 0.5rem;  
    width: 100%;  
    transition: color 0.2s;  
}

.lp-accordion-toggle:hover {  
    color: #3B82F6;  
}

.lp-toggle-icon {  
    font-size: 0.65rem;  
    transition: transform 0.2s;  
    flex-shrink: 0;  
}

.lp-accordion-toggle[aria-expanded="true"] .lp-toggle-icon {  
    transform: rotate(90deg);  
}

/* ---------- INPUT GROUPS ---------- */  
.lp-item-inputs {  
    display: contents;  
}

.lp-input-group {  
    display: contents;  
}

/* Mobile-Labels (im Desktop versteckt) */  
.lp-mobile-label {  
    display: none;  
    font-size: 0.7rem;  
    font-weight: 700;  
    text-transform: uppercase;  
    letter-spacing: 0.05em;  
    color: #94a3b8;  
    margin-bottom: 0.15rem;  
}

.lp-input {  
    width: 100%;  
    max-width: 100px;  
    padding: 0.5rem;  
    border: 1px solid #cbd5e1;  
    border-radius: 8px;  
    font-size: 0.95rem;  
    text-align: center;  
    background: #f8fafc;  
    transition: border-color 0.2s, box-shadow 0.2s;  
    box-sizing: border-box;  
    -moz-appearance: textfield;  
}

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

.lp-input:focus {  
    outline: none;  
    border-color: #3B82F6;  
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);  
    background: #ffffff;  
}

/* Validierungsfehler – Inline-Stil */  
.lp-input.lp-invalid {  
    border-color: #ef4444;  
    background: #fef2f2;  
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15);  
}

/* ---------- VALIDATION MESSAGE ---------- */  
.lp-validation-message {  
    background: #fef2f2;  
    border: 1px solid #fca5a5;  
    border-left: 4px solid #ef4444;  
    color: #991b1b;  
    padding: 0.75rem 1rem;  
    border-radius: 8px;  
    margin: 1rem 0;  
    font-size: 0.9rem;  
    font-weight: 500;  
}

/* ---------- ACCORDION CONTENT ---------- */  
.lp-accordion-content {  
    padding: 0.5rem 0 0.75rem 1.5rem;  
    font-size: 0.85rem;  
    color: #64748b;  
    line-height: 1.7;  
}

.lp-accordion-content p {  
    margin: 0;  
}

/* ---------- BUTTONS ---------- */  
.lp-actions {  
    text-align: center;  
    margin-top: 2rem;  
}

.lp-btn {  
    display: inline-flex;  
    align-items: center;  
    gap: 0.5rem;  
    padding: 0.85rem 2rem;  
    border: none;  
    border-radius: 10px;  
    font-size: 1.05rem;  
    font-weight: 600;  
    cursor: pointer;  
    transition: transform 0.15s, box-shadow 0.2s;  
}

.lp-btn:hover {  
    transform: translateY(-1px);  
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);  
}

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

.lp-btn-primary {  
    background: #334155;  
    color: #ffffff;  
    border: 1px solid #475569;  
}

.lp-btn-primary:hover {  
    background: #475569;  
}  


.lp-btn-secondary {  
    background: #f1f5f9;  
    color: #334155;  
    border: 1px solid #e2e8f0;  
}

/* ---------- RESULTS ---------- */  
.lp-results {  
    margin-top: 3rem;  
    padding-top: 2rem;  
    border-top: 2px solid #e2e8f0;  
}

.lp-results h2 {  
    text-align: center;  
    font-size: 1.75rem;  
    margin-bottom: 1.5rem;  
}

.lp-chart-wrapper {  
    background: #ffffff;  
    border-radius: 12px;  
    padding: 1.5rem;  
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);  
    margin-bottom: 1rem;  
    position: relative;  
}

.lp-chart-wrapper canvas {  
    max-width: 100%;  
} 

.lp-export-row {  
    text-align: center;  
    margin: 1rem 0 2rem;  
}

/* ---------- SUMMARY ---------- */  
.lp-summary {  
    background: #f8fafc;  
    border-radius: 12px;  
    padding: 1.5rem 2rem;  
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);  
}

.lp-summary h3 {  
    margin: 0 0 1rem;  
    font-size: 1.1rem;  
}

.lp-summary-block {  
    margin-bottom: 1rem;  
    padding: 0.75rem 1rem;  
    border-radius: 8px;  
    background: #ffffff;  
    border-left: 4px solid #cbd5e1;  
}

.lp-summary-block.lp-alert {  
    border-left-color: #ef4444;  
    background: #fef2f2;  
}

.lp-summary-block.lp-success {  
    border-left-color: #22c55e;  
    background: #f0fdf4;  
}

.lp-summary-block.lp-info {  
    border-left-color: #3b82f6;  
    background: #eff6ff;  
}

.lp-summary-block strong {  
    display: block;  
    margin-bottom: 0.25rem;  
}

.lp-summary-block p {  
    margin: 0;  
    font-size: 0.9rem;  
    color: #475569;  
}

/* ---------- RESPONSIVE ---------- */  
@media (max-width: 640px) {  
    .lp-header-row {  
        display: none;  
    }

    .lp-item-row {  
        grid-template-columns: 1fr;  
        gap: 0.5rem;  
    }

    .lp-item-inputs {  
        display: grid;  
        grid-template-columns: repeat(3, 1fr);  
        gap: 0.5rem;  
    }

    .lp-input-group {  
        display: flex;  
        flex-direction: column;  
    }

    .lp-mobile-label {  
        display: block;  
    }

    .lp-input {  
        max-width: 100%;  
    }

    .lp-legend {  
        flex-direction: column;  
        align-items: center;  
    }  
}