/* Geschichten als Buehne (Variante): die Buehne bleibt stehen, beim Scrollen wechselt immer genau ein Schritt. */
@property --dfz-c{syntax:'<color>';inherits:true;initial-value:#fff39e}

#geschichten.dfz{overflow:clip;padding-bottom:0}
.dfz-track{margin-inline:calc(50% - 50vw)}
.dfz-track{position:relative;height:calc(var(--n) * 55vh + 100vh)}
.dfz-pin{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;transition:--dfz-c .9s ease}
.dfz-bg{position:absolute;inset:0;background:color-mix(in srgb,var(--dfz-c) 34%,#fbf9f5)}
.dfz-grid{position:relative;height:100%;max-width:1560px;margin:0 auto;display:grid;
  grid-template-columns:minmax(210px,250px) minmax(0,.9fr) minmax(0,1.15fr);grid-template-rows:auto minmax(0,1fr);
  column-gap:clamp(28px,4vw,80px);row-gap:clamp(16px,3.5vh,40px);padding:clamp(88px,11vh,112px) clamp(20px,4vw,64px) 32px;align-items:center}

/* ----- Kopf: steht ueber der Liste, gleiche Kante ----- */
.dfz-side{min-width:0}
.dfz-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;grid-column:1/-1;align-self:end;padding-bottom:clamp(14px,2.4vh,26px);border-bottom:1px solid rgba(17,18,21,.12)}
.dfz-skip{flex:none;display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:999px;border:1px solid rgba(17,18,21,.18);
  background:rgba(255,255,255,.55);color:#111215;font-weight:700;font-size:14px;text-decoration:none;transition:background .25s,color .25s,border-color .25s}
.dfz-skip:hover{background:#111215;color:#fff;border-color:#111215}
.dfz-skip:focus-visible{outline:2px solid #111215;outline-offset:3px}
.dfz-nav a{cursor:pointer}
.dfz-eyebrow{margin:0 0 14px;font:700 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.1em;text-transform:uppercase;color:rgba(17,18,21,.5)}
.dfz-eyebrow b{font-weight:700}
.dfz-title{margin:0;font-size:clamp(48px,min(6vw,10vh),104px);line-height:.9;font-weight:800;letter-spacing:-.05em;color:#111215;text-transform:uppercase}
.dfz-title span{font-weight:300}

/* ----- Liste ----- */
.dfz-nav ol{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px}
.dfz-nav a{display:grid;grid-template-columns:30px 1fr;align-items:baseline;padding:9px 0;color:rgba(17,18,21,.36);text-decoration:none;
  font-weight:700;font-size:16px;line-height:1.25;letter-spacing:-.01em;transition:color .35s}
.dfz-nav a:hover{color:rgba(17,18,21,.7)}
.dfz-nav a:focus-visible{outline:2px solid #111215;outline-offset:4px;border-radius:6px}
.dfz-nav .n{font:700 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.06em}
.dfz-nav a.is-active{color:#111215}
.dfz-nav .seg{grid-column:2;display:flex;gap:4px;height:3px;margin-top:0;max-height:0;opacity:0;transition:opacity .35s,margin .35s,max-height .35s}
.dfz-nav a.is-active .seg{opacity:1;margin-top:12px;max-height:3px}
.dfz-nav .seg i{flex:1;border-radius:2px;background:rgba(17,18,21,.14);transition:background .3s}
.dfz-nav .seg i.on{background:#111215}

/* ----- Text ----- */
.dfz-texts{display:grid;align-items:center;min-width:0}
.dfz-step{grid-area:1/1;opacity:0;transform:translateY(32px);transition:opacity .35s,transform .6s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.dfz-step.is-past{transform:translateY(-32px)}
.dfz-step.is-active{opacity:1;transform:none;pointer-events:auto;transition-delay:.08s}
.dfz-k{display:flex;align-items:center;gap:10px;margin:0;font:700 11px/1 ui-monospace,Menlo,monospace;letter-spacing:.08em;text-transform:uppercase;color:rgba(17,18,21,.55)}
.dfz-k span{display:none}
.dfz-k b{color:#111215;background:var(--c);padding:6px 9px;border-radius:999px;border:1px solid rgba(0,0,0,.08);order:-1}
.dfz-h{margin:22px 0 0;font-size:clamp(34px,3.7vw,60px);line-height:.98;letter-spacing:-.04em;font-weight:800;color:#111215;text-wrap:balance}
.dfz-p{margin:22px 0 0;max-width:36ch;font-size:clamp(16px,1.15vw,18px);line-height:1.55;color:#4b4d52}

/* ----- Mockup ----- */
.dfz-media{position:relative;height:100%;min-width:0;display:grid}
.dfz-media::before{content:"";position:absolute;left:50%;top:50%;width:min(86%,62vh);aspect-ratio:1;border-radius:50%;
  background:var(--dfz-c);transform:translate(-50%,-50%);filter:saturate(1.15)}
.dfz-m{grid-area:1/1;position:relative;display:grid;place-items:center;min-height:0;opacity:0;transform:translateY(48px) scale(.97);
  transition:opacity .4s,transform .75s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.dfz-m.is-past{transform:translateY(-48px) scale(.97)}
.dfz-m.is-active{opacity:1;transform:none;pointer-events:auto}
.dfz-fit{position:absolute;left:50%;top:50%;width:min(100%,520px);transform:translate(-50%,-50%);transform-origin:50% 50%}
.dfz-m .dfs{padding:0;background:none}
.dfz-m .dfs-media{padding-top:0!important}

/* ----- Ende ----- */
.dfz-end{display:flex;justify-content:center;padding:clamp(48px,7vw,96px) 16px clamp(64px,9vw,120px)}
.dfz-cta{display:inline-flex;gap:10px;align-items:center;padding:16px 26px;border-radius:999px;background:#111215;color:#fff;font-weight:800;text-decoration:none;transition:transform .25s}
.dfz-cta:hover{transform:translateY(-2px)}
.dfz-cta:focus-visible{outline:2px solid #111215;outline-offset:3px}

/* ----- mittlere Breite: Liste wird Chip-Leiste ----- */
@media (max-width:1179px){
  .dfz-grid{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);grid-template-rows:auto auto minmax(0,1fr);padding-top:92px;row-gap:16px}
  .dfz-side{grid-column:1/-1}
  .dfz-title{font-size:clamp(40px,7vw,64px)}
  .dfz-nav ol{flex-direction:row;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px}
  .dfz-nav ol::-webkit-scrollbar{display:none}
  .dfz-nav a{display:block;padding:9px 14px;border-radius:999px;white-space:nowrap;font-size:14px;color:rgba(17,18,21,.55);background:rgba(255,255,255,.45)}
  .dfz-nav a.is-active{background:#111215;color:#fff}
  .dfz-nav .n,.dfz-nav .seg{display:none}
  .dfz-k span{display:none}
}
/* ----- schmal: alles untereinander ----- */
@media (max-width:767px){
  .dfz-track{height:calc(var(--n) * 60vh + 100vh)}
  .dfz-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto minmax(0,1fr);padding:68px 16px 16px;row-gap:14px;align-items:stretch}
  .dfz-head{padding-bottom:12px}
  .dfz-head{position:relative;display:block}
  .dfz-skip{position:absolute;top:-9px;right:0;padding:5px 11px;font-size:12px;gap:6px}
  .dfz-eyebrow{margin-bottom:18px}
  .dfz-title{font-size:clamp(28px,8.6vw,40px);white-space:nowrap}
  .dfz-nav{margin:0 -16px}
  .dfz-nav ol{padding:2px 16px}
  .dfz-nav a{font-size:13px;padding:8px 12px}
  .dfz-h{margin-top:14px;font-size:clamp(26px,7.4vw,34px)}
  .dfz-p{margin-top:10px;font-size:15px;line-height:1.5}
  .dfz-media::before{width:min(92%,46vh)}
}
@media (prefers-reduced-motion:reduce){
  .dfz-pin{transition:none}
  .dfz-step,.dfz-m{transition:opacity .01s;transform:none!important}
}