/* Unfoldable long-form chapters from the Unternehmensmappe.
   <details> again, so every chapter is readable, linkable and keyboard
   operable with JavaScript switched off. */

.longform { margin-top: var(--space-xl); border-top: var(--hairline); }

.longform-item { border-bottom: var(--hairline); }

.longform-item > summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    cursor: pointer;
    list-style: none;
}
.longform-item > summary::-webkit-details-marker { display: none; }
.longform-item > summary::marker { content: ""; }
.longform-item > summary:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.longform-item > summary:hover .longform-title { color: var(--accent); }

.longform-title {
    font-family: var(--font-display);
    font-size: var(--step-2);
    font-weight: 700;
    text-transform: uppercase;
    line-height: 1.05;
    transition: color .2s ease;
}

.longform-body {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(220px, 1fr);
    gap: var(--space-xl);
    padding-bottom: var(--space-lg);
    animation: longform-open .35s cubic-bezier(.22, .61, .36, 1);
}

@keyframes longform-open {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: none; }
}

.longform-text p { color: var(--text-on-dark-muted); max-width: 68ch; }
.longform-text p + p { margin-top: var(--space-md); }

.longform-closing {
    margin-top: var(--space-md);
    padding-left: var(--space-md);
    border-left: 2px solid var(--accent);
    color: var(--steel-100) !important;
    font-family: var(--font-display);
    font-size: var(--step-1);
    text-transform: uppercase;
    line-height: 1.15;
}

.longform-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.longform-figure figcaption {
    margin-top: var(--space-xs);
    font-family: var(--font-mono);
    font-size: var(--step--1);
    color: var(--text-on-dark-muted);
}

@media (max-width: 860px) {
    .longform-body { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .longform-body { animation: none; }
}