/* Grundlayout */
.summary {
    margin: 20px 0;
    font-family: Arial, sans-serif;
    padding: 0 16px;
}

.summary-outer {
    border-radius: 6px;
    padding: 16px 16px 8px 16px;
    background: white;
    max-width: 800px;
    margin: 20px auto;
    position: relative;
    border: 1px solid #ccc;
    box-shadow: 0 0 6px rgba(204, 204, 204, 0.7);
}

/* Inhalt: links Text, rechts Bild */
.summary-content {
    display: block;
}

/* Runder Bildrahmen, über dem Textrahmen, links */
.summary-right {
    position: absolute;
    left: -20px;
    top: -10px;
    width: 70px;
    height: 70px;
    border-radius: 50%;
    overflow: hidden;
    background: #fff;
    padding: 0;
    border: 1px solid #ccc;
    box-shadow: 0 0 6px rgba(204, 204, 204, 0.7);
}

/* Bild auf Kreis anpassen */
.summary-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.summary-left {
    margin-left: 80px;
}

/* Titel */
.summary-title {
    margin: 0 0 8px 0;
    cursor: pointer;
}

/* Der ausklappbare Textbereich */
.summary-text-wrapper {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
}

/* Innenabstand für den Text */
.summary-text {
    padding-bottom: 8px;
}

/* Toggle-Link: kleiner Klickbereich oben rechts */
.summary-toggle {
    position: absolute;
    top: 10px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    margin-top: 0;
    text-decoration: none;
    cursor: pointer;
    user-select: none;
}

/* Text im Toggle */
.summary-toggle-text {
    display: none;
}

/* Pfeil-Icon */
.summary-toggle-icon svg {
    display: block;
    transition: transform 0.2s ease;
    transform: rotate(180deg);
}

/* --- Zustand "geöffnet" --- */
.summary.open .summary-text-wrapper,
.summary.is-open .summary-text-wrapper {
    max-height: 500px;
}

/* Pfeil nach oben drehen, wenn offen */
.summary.open .summary-toggle-icon svg,
.summary.is-open .summary-toggle-icon svg {
    transform: rotate(0deg);
}

/* Responsive: Avatar unterhalb von 900px ausblenden */
@media (max-width: 900px) {
    .summary-right {
        display: none;
    }

    .summary-left {
        margin-left: 0;
    }
}