.knopf {
  position: relative;
  isolation: isolate;
  overflow: clip;
  background: var(--volt);
  border-color: var(--volt);
  color: var(--kalk-hell);
  
  transition: transform .4s var(--expo);
}
.knopf::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--kalk-hell);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  transition: transform .5s var(--expo);
}
@media (hover: hover) and (pointer: fine) {
  .knopf:hover { color: var(--volt); }
  .knopf:hover::before { transform: scaleY(1); }
}
.knopf:focus-visible { color: var(--volt); outline: 2px solid var(--hell); outline-offset: 3px; }
.knopf:focus-visible::before { transform: scaleY(1); }
.knopf:active { color: var(--kalk-hell); transform: scale(.97); transition-duration: .1s; }
.knopf:active::before { background: var(--hell); transform: scaleY(1); }
.knopf:disabled, .knopf[aria-disabled="true"] { transform: none; background: transparent; }
.knopf:disabled::before, .knopf[aria-disabled="true"]::before { display: none; }


.knopf-zweit {
  position: relative;
  border-bottom-color: transparent !important;
  align-self: center;
  padding-bottom: .3rem;
}
.knopf-zweit::before,
.knopf-zweit::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
}
.knopf-zweit::before { background: currentColor; }
.knopf-zweit::after {
  height: 2px; bottom: -1.5px;
  background: var(--volt);
  transform: scaleX(0); transform-origin: 0 50%;
  transition: transform .45s var(--expo);
}
@media (hover: hover) and (pointer: fine) {
  .knopf-zweit:hover { color: var(--volt); }
  .knopf-zweit:hover::after { transform: scaleX(1); }
}
.knopf-zweit:focus-visible { color: var(--volt); outline: 2px solid var(--volt); outline-offset: 4px; }
.knopf-zweit:focus-visible::after { transform: scaleX(1); }
.knopf-zweit:active { transform: translateY(1px); }
.knopf-zweit:active::after { transform: scaleX(1); background: var(--hell); transition-duration: .1s; }


.aufklapp { border-top: 1px solid var(--hell); max-width: 72ch; }
.aufklapp-eintrag {
  border-bottom: 1px solid var(--linie);
  interpolate-size: allow-keywords;
}
.aufklapp-eintrag summary {
  display: flex; align-items: center; justify-content: space-between; gap: 1.4rem;
  padding: 1.3rem .1rem; cursor: pointer; list-style: none;
  -webkit-tap-highlight-color: transparent;
}
.aufklapp-eintrag summary::-webkit-details-marker { display: none; }
.aufklapp-titel {
  font-size: clamp(24px, 2vw, 28px); font-weight: 560; letter-spacing: -.02em;
  color: var(--hell); transition: transform .5s var(--expo);
}
.kreuz { position: relative; flex: none; width: 20px; height: 20px; }
.kreuz::before, .kreuz::after {
  content: ''; position: absolute; left: 0; right: 0; top: 50%; height: 1.5px;
  margin-top: -.75px; background: var(--hell);
  transition: transform .45s var(--expo);
}
.kreuz::after { transform: rotate(90deg); }
.aufklapp-eintrag[open] .kreuz::after { transform: rotate(0deg); }
.aufklapp-eintrag[open] .kreuz::before { transform: rotate(180deg); }
@media (hover: hover) and (pointer: fine) {
  .aufklapp-eintrag summary:hover .aufklapp-titel { transform: translate3d(10px,0,0); color: var(--volt); }
  .aufklapp-eintrag summary:hover .kreuz::before,
  .aufklapp-eintrag summary:hover .kreuz::after { background: var(--volt); }
}
.aufklapp-eintrag summary:focus-visible .aufklapp-titel { transform: translate3d(10px,0,0); color: var(--volt); }
.aufklapp-eintrag summary:focus-visible .kreuz::before,
.aufklapp-eintrag summary:focus-visible .kreuz::after { background: var(--volt); }
.aufklapp-eintrag summary:active .aufklapp-titel { transform: translate3d(10px,0,0) scale(.985); transition-duration: .12s; }

.aufklapp-eintrag::details-content {
  
  block-size: 0; overflow: clip;
}
.aufklapp-eintrag[open]::details-content { block-size: auto; }
.aufklapp-inhalt {
  max-width: 62ch; padding: 0 .1rem clamp(20px, 3vh, 32px);
  clip-path: inset(0 0 100% 0);
  transform: translate3d(0, -8px, 0);
  transition: clip-path .5s var(--expo), transform .5s var(--expo);
}
.aufklapp-eintrag[open] .aufklapp-inhalt { clip-path: inset(0 0 0 0); transform: none; }
.aufklapp-inhalt p { margin: 0; color: var(--schild); }


@keyframes zeile-auf { from { translate: 0 110%; } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.ruhe) .zerlegt .w {
    display: inline-block; overflow: clip; overflow-clip-margin: .14em; vertical-align: top;
    
    max-width: 100%;
  }
}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    html:not(.ruhe) :is(.titel, .teil) .zerlegt .w > span {
      display: inline-block;
      animation: zeile-auf linear both;
      animation-timeline: view();
      animation-range: entry 8% entry 55%;
    }
    
    html:not(.ruhe) .titel .zerlegt .w > span {
      animation: zeile-auf .8s var(--expo) both;
      animation-delay: calc(.05s + var(--i) * 70ms);
    }
  }
}

@media (prefers-reduced-motion: reduce) {
  .knopf::before, .knopf-zweit::after, .aufklapp-titel, .kreuz::before, .kreuz::after,
  .aufklapp-eintrag::details-content, .aufklapp-inhalt { transition: none; }
}
@supports not (interpolate-size: allow-keywords) {
  
  .aufklapp-eintrag::details-content { transition: none; }
}