/* Summarize Box - Aufklappbare Problem-Detail-Boxen */
.summarize-box {
    background: var(--color-warning-10);
    border: 1px solid var(--color-warning);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    padding: 1rem;
    transition: all 0.3s ease;
}

.summarize-box:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.summarize-box summary {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-warning-dark);
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 8rem;
    list-style: none;
    margin-bottom: 0;
}

.summarize-box summary::-webkit-details-marker {
    display: none;
}

.summarize-box summary::after {
    content: "Details";
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-warning-dark);
    background: var(--color-warning-20);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
}

.summarize-box[open] summary::after {
    content: "Weniger";
    background: var(--color-warning-30);
}

.summarize-box[open] summary {
    margin-bottom: 0.8rem;
    border-bottom: 1px solid var(--color-warning-20);
    padding-bottom: 0.5rem;
}

.summarize-box .summary-content {
    margin-top: 0.8rem;
    animation: slideDown 0.3s ease-out;
}

.summarize-box .summary-content p {
    margin-bottom: 0.8rem;
    line-height: 1.6;
}

.summarize-box .summary-content ul {
    margin-left: 1rem;
    margin-bottom: 0.8rem;
}

.summarize-box .summary-content li {
    margin-bottom: 0.4rem;
    line-height: 1.5;
}

@keyframes slideDown {
    from { 
        opacity: 0; 
        transform: translateY(-10px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

/* Solution Box - Für positive Lösungsansätze */
.solution-box {
    background: var(--color-success-10);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    padding: 1rem;
    transition: all 0.3s ease;
}

.solution-box:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.solution-box summary {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-success-dark);
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 8rem;
    list-style: none;
    margin-bottom: 0;
}

.solution-box summary::-webkit-details-marker {
    display: none;
}

.solution-box summary::after {
    content: "Mehr";
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-success-dark);
    background: var(--color-success-20);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
}

.solution-box[open] summary::after {
    content: "Weniger";
    background: var(--color-success-30);
}

.solution-box[open] summary {
    margin-bottom: 0.8rem;
    border-bottom: 1px solid var(--color-success-20);
    padding-bottom: 0.5rem;
}

.solution-box .summary-content {
    margin-top: 0.8rem;
    animation: slideDown 0.3s ease-out;
}

.solution-box .summary-content p {
    margin-bottom: 0.8rem;
    line-height: 1.6;
}

.solution-box .summary-content ul {
    margin-left: 1rem;
    margin-bottom: 0.8rem;
}

.solution-box .summary-content li {
    margin-bottom: 0.4rem;
    line-height: 1.5;
}

/* Compare Box - Für Vergleiche (wenig hilfreich vs. empfohlen) */
.compare-box-poor {
    background: var(--color-error-10);
    border: 1px solid var(--color-error);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    padding: 1rem;
    transition: all 0.3s ease;
}

.compare-box-poor:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.compare-box-poor summary {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-error-dark);
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 8rem;
    list-style: none;
    margin-bottom: 0;
}

.compare-box-poor summary::-webkit-details-marker {
    display: none;
}

.compare-box-poor summary::after {
    content: "Warum?";
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-error-dark);
    background: var(--color-error-20);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
}

.compare-box-poor[open] summary::after {
    content: "Weniger";
    background: var(--color-error-30);
}

.compare-box-poor[open] summary {
    margin-bottom: 0.8rem;
    border-bottom: 1px solid var(--color-error-20);
    padding-bottom: 0.5rem;
}

.compare-box-good {
    background: var(--color-success-10);
    border: 1px solid var(--color-success);
    border-radius: var(--radius-md);
    margin-bottom: 1rem;
    padding: 1rem;
    transition: all 0.3s ease;
}

.compare-box-good:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.compare-box-good summary {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-success-dark);
    cursor: pointer;
    user-select: none;
    position: relative;
    padding-right: 8rem;
    list-style: none;
    margin-bottom: 0;
}

.compare-box-good summary::-webkit-details-marker {
    display: none;
}

.compare-box-good summary::after {
    content: "Warum?";
    position: absolute;
    top: 0;
    right: 0;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-success-dark);
    background: var(--color-success-20);
    padding: 0.2rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: all 0.3s ease;
}

.compare-box-good[open] summary::after {
    content: "Weniger";
    background: var(--color-success-30);
}

.compare-box-good[open] summary {
    margin-bottom: 0.8rem;
    border-bottom: 1px solid var(--color-success-20);
    padding-bottom: 0.5rem;
}

.compare-box-poor .summary-content,
.compare-box-good .summary-content {
    margin-top: 0.8rem;
    animation: slideDown 0.3s ease-out;
}

.compare-box-poor .summary-content p,
.compare-box-good .summary-content p {
    margin-bottom: 0.8rem;
    line-height: 1.6;
}

.compare-box-poor .summary-content ul,
.compare-box-good .summary-content ul {
    margin-left: 1rem;
    margin-bottom: 0.8rem;
}

.compare-box-poor .summary-content li,
.compare-box-good .summary-content li {
    margin-bottom: 0.4rem;
    line-height: 1.5;
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .summarize-box summary,
    .solution-box summary,
    .compare-box-poor summary,
    .compare-box-good summary {
        padding-right: 6rem;
        font-size: 1rem;
    }
    
    .summarize-box summary::after,
    .solution-box summary::after,
    .compare-box-poor summary::after,
    .compare-box-good summary::after {
        font-size: 0.7rem;
        padding: 0.15rem 0.4rem;
    }
}