/* Kurze Rückmeldung auf bewusst ausgelöste Interaktionen. */
.knopf {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.vertiefung > summary svg {
  transition: transform 200ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Native Details bleiben ohne CSS-Unterstützung sofort bedienbar.
   Kein JavaScript-Abfangen: Tastatur, exklusive Zimmergruppen und
   Sprunglinks behalten ihre gewohnte Funktion. */
@supports (interpolate-size: allow-keywords) and selector(details::details-content) {
  .vertiefung, .zimmerarten > details { interpolate-size: allow-keywords; }
  .vertiefung::details-content, .zimmerarten > details::details-content {
    block-size: 0;
    overflow: clip;
    transition: block-size 200ms cubic-bezier(0.16, 1, 0.3, 1),
      content-visibility 200ms allow-discrete;
  }
  .vertiefung[open]::details-content, .zimmerarten > details[open]::details-content {
    block-size: auto;
  }
}

@media (prefers-reduced-motion: reduce) {
  .knopf, .vertiefung > summary svg,
  .vertiefung::details-content, .zimmerarten > details::details-content {
    transition: none;
  }
}