<style>
/* Container (direkt das <details>-Element) */
details.klapp {
border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.06); margin: .75rem 0; overflow: hidden; /* runde Ecken auch für den Inhalt */
}
/* Kopfzeile */ details.klapp > summary.klapp-summary {
list-style: none; /* verhindert Standard-Dreieck in manchen Skins/Browsern */ display: flex; align-items: center; gap: .5rem; padding: .75rem 1rem; font-weight: 700; cursor: pointer; user-select: none; background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%); border-bottom: 1px solid #e2e8f0;
}
/* eigenes Pfeil-Icon */ details.klapp > summary.klapp-summary .klapp-arrow {
display: inline-block; transform: rotate(0deg); transition: transform .2s ease; font-size: 1.1em; line-height: 1; margin-right: .1rem; /* typografischer Pfeil, wirkt „schlanker“ als > */ content: "›";
}
/* Pfeil drehen, wenn geöffnet */ details.klapp[open] > summary.klapp-summary .klapp-arrow {
transform: rotate(90deg);
}
/* Inhalt */ details.klapp > .klapp-content {
padding: 1rem 1.25rem;
}
/* sanftes Einblenden (nur bei unterstützten Browsern sichtbar) */ details.klapp[open] > .klapp-content {
animation: klappFade .18s ease;
} @keyframes klappFade {
from { opacity: 0; transform: translateY(-2px); }
to { opacity: 1; transform: translateY(0); }
}
/* optionaler Dark-Mode über Systempräferenz */ @media (prefers-color-scheme: dark) {
details.klapp { background:#0b0f16; border-color:#1f2937; box-shadow: 0 1px 2px rgba(0,0,0,.45); }
details.klapp > summary.klapp-summary { background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%); border-bottom-color:#1f2937; color:#e5e7eb; }
details.klapp > .klapp-content { color:#e5e7eb; }
} </style>
<details class="klapp" >
<summary class="klapp-summary"> › Abschnitt </summary>