/* Nur für neujahr.html: die acht Satzgruppen klappen auf und zu. */
.klapp .abc-group + .abc-group { margin-top: 0; }
.klapp .abc-group { border-top: 1px solid var(--line); }
.klapp .abc-group:last-child { border-bottom: 1px solid var(--line); }
.klapp summary { display: grid; grid-template-columns: 72px 1fr 32px; column-gap: 20px; align-items: center; padding: 20px 0; cursor: pointer; list-style: none; }
.klapp summary::-webkit-details-marker { display: none; }
.klapp summary img { grid-row: span 2; width: 72px; height: 72px; border-radius: 50%; }
.klapp summary h2 { margin: 0; font-size: clamp(24px, 2.4vw, 34px); }
.klapp .group-intro { grid-column: 2; max-width: 560px; font-size: 16px; color: var(--soft); }
.klapp summary::after { content: ""; grid-column: 3; grid-row: 1 / span 2; width: 12px; height: 12px; justify-self: center; border-right: 2px solid var(--red); border-bottom: 2px solid var(--red); transform: rotate(45deg); transition: transform .2s; }
.klapp details[open] summary::after { transform: rotate(-135deg); }
.klapp details[open] .abc-grid { margin-bottom: 40px; }

@media (max-width: 760px) {
  .klapp summary { grid-template-columns: 52px 1fr 20px; column-gap: 14px; }
  .klapp summary img { width: 52px; height: 52px; }
  .klapp .group-intro { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .klapp summary::after { transition: none; } }