/* Grundlegende Styles */
body {padding: 2rem;}
details {background: #eee; border: 1px solid #666; border-radius: 3px; margin-bottom: 1.5rem;}
summary {background: #666; color: #fff; cursor: pointer; padding: 1rem;}
.akkordeon-inhalt {padding: 1rem 1rem 1px 1rem;}

/* Der verzögerungseffekt */
details[open] summary ~ * {animation: sweep .7s ease-in-out;}

@keyframes sweep {
  0%    {opacity: 0; margin-left: -20px}
  100%  {opacity: 1; margin-left: 0px}
}