/* Geschichten als Akkordeon: unter der angeklickten Zeile oeffnet eine kompakte Buehne.
   Schritt-, Text- und Mockup-Stile kommen aus story-stage.css (dfz-*). */
#geschichten.dfh{overflow:clip}

/* Zeile im geoeffneten Zustand: bleibt der einzige Titel */
.dfh-row[aria-expanded="true"]{background:var(--c);border-bottom-color:transparent}
.dfh-row[aria-expanded="true"] .dfh-go{background:#111215;color:#fff}

/* Auf- und Zuklappen ueber die Zeilenhoehe */
.dfa-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.2,.8,.2,1)}
.dfa-panel.is-open{grid-template-rows:1fr}
.dfa-panel[hidden]{display:none}
.dfa-clip{min-height:0;overflow:hidden}

/* Buehne: Text | Mockup, darunter die Steuerung */
.dfa-stage{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.15fr);grid-template-rows:minmax(0,1fr) auto;
  column-gap:clamp(28px,4vw,72px);height:clamp(420px,calc(100vh - 300px),620px);padding:clamp(24px,3vw,44px) clamp(20px,3vw,48px);
  background:color-mix(in srgb,var(--c) 34%,#fbf9f5);border-bottom:1px solid rgba(0,0,0,.1)}
.dfa-stage .dfz-texts{grid-column:1;grid-row:1;align-self:center}
.dfa-stage .dfz-media{grid-column:2;grid-row:1/3;min-height:0;container-type:size}
.dfa-stage .dfz-media::before{width:min(88cqw,96cqh)}
.dfa-stage .dfz-h{font-size:clamp(30px,3.2vw,52px)}

/* Steuerung: Pfeile + Fortschritt je Schritt (laeuft wie bei Stories) */
.dfa-ctrl{grid-column:1;grid-row:2;display:flex;align-items:center;gap:12px;padding-top:18px}
.dfa-arrow{flex:none;width:42px;height:42px;border-radius:50%;border:1px solid rgba(17,18,21,.2);background:rgba(255,255,255,.6);color:#111215;
  font:700 17px/1 system-ui,sans-serif;cursor:pointer;transition:background .2s,color .2s}
.dfa-arrow:hover{background:#111215;color:#fff}
.dfa-arrow:focus-visible,.dfa-seg button:focus-visible{outline:2px solid #111215;outline-offset:3px}
.dfa-seg{flex:1;display:flex;gap:5px;min-width:0}
.dfa-seg button{flex:1;height:22px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center}
.dfa-seg i{position:relative;display:block;width:100%;height:3px;border-radius:2px;background:rgba(17,18,21,.15);overflow:hidden}
.dfa-seg i::after{content:"";position:absolute;inset:0;background:#111215;transform-origin:0 50%;transform:scaleX(0)}
.dfa-seg button.is-past i::after{transform:scaleX(1)}
.dfa-seg button.is-active i::after{animation:dfa-fill var(--dfa-d,7s) linear forwards}
.dfa-panel.is-paused .dfa-seg button.is-active i::after{animation-play-state:paused}
@keyframes dfa-fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

@media (max-width:767px){
  .dfa-stage{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);height:auto;padding:22px 16px 18px;row-gap:14px}
  .dfa-stage .dfz-texts{grid-column:1;grid-row:1}
  .dfa-stage .dfz-media{grid-column:1;grid-row:3;height:clamp(240px,38vh,360px)}
  .dfa-ctrl{grid-row:2;padding-top:0}
  .dfa-arrow{width:38px;height:38px}
  .dfa-stage .dfz-h{font-size:clamp(24px,7vw,30px);margin-top:12px}
}
@media (prefers-reduced-motion:reduce){
  .dfa-panel{transition:none}
  .dfa-seg button.is-active i::after{animation:none;transform:scaleX(1)}
}