/* stack3d — "Stundenstapel": one slab per block of weekly hours, width = 17,32 € brutto per hour,
   yellow = the part that stays net. Scroll builds the stack (and takes it apart on the way back); parked, it steps on by itself.
   The pinned track is short (about a quarter screen of scroll per slab), so the section never reads as a scroll stop.
   The section header (02 label, heading, question) lives inside the pinned screen, so the stack is never shown without it.
   The stack and its legend sit in the same frame as the .compare blocks: 1px line border, r-sm radius, 1px line between cells.
   The bar chart stays as the fallback when there is no WebGL / no JS. */
.s3-frame{display:none}
.s3-on .s3-fallback{display:none}
.s3-on .s3-track{height:230vh;position:relative}
.s3-on .s3-sticky{position:sticky;top:0;height:100vh;height:100svh;display:flex;
  padding:clamp(4.6rem,9vh,6rem) 0 clamp(1rem,3vh,2rem)}               /* top: clears the fixed nav */
.s3-wrap{display:flex;flex-direction:column;width:100%;min-height:0}
.s3-head{flex:none}
.s3-head p{margin-bottom:0}
.s3-on .s3-frame{display:grid;grid-template-columns:minmax(15rem,21rem) 1fr;flex:1;min-height:0;max-height:48rem;margin-top:clamp(1.2rem,3vh,2rem);
  gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.s3-frame>div{background:var(--bg);min-height:0}
.s3-key{display:flex;flex-direction:column;justify-content:space-between;gap:1rem;padding:clamp(1rem,2.4vh,1.6rem) 1.5rem}   /* label on top, legend stands on the frame floor like the stack */
.s3-lab{font-size:.76rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-2)}   /* as .compare .lab */
.s3-stage{display:flex;flex-direction:column;padding:1.2rem 1.5rem 1.1rem}
.s3-view{position:relative;flex:1;min-height:0}
.s3-view canvas{position:absolute;inset:0;width:100%!important;height:100%!important;display:block}
.s3 .s3-cap{flex:none;font-size:.82rem;line-height:1.4;color:var(--ink-3);margin:.7rem 0 0}  /* as .barchart .cap */

.s3-legend{list-style:none;margin:0;padding:0;border-bottom:1.5px solid var(--ink);display:flex;flex-direction:column-reverse}  /* mirrors the stack: first 20 h at the bottom */
.s3-legend li{display:grid;grid-template-columns:1fr auto;gap:.2rem 1rem;align-items:baseline;padding:clamp(.4rem,1.5vh,.85rem) 0;  /* rows tighten on short laptop screens so all five fit the frame */
  border-top:1px solid var(--line);line-height:1.3;
  color:var(--ink-3);transition:color .4s var(--ease)}
.s3-legend li:last-child{border-top:0}
.s3-legend .h{font-size:.92rem}
.s3-legend .v{font-family:var(--serif);font-size:1.45rem;letter-spacing:-.01em;font-variant-numeric:tabular-nums;position:relative;white-space:nowrap}
.s3-legend .v::after{content:"";position:absolute;left:0;right:0;bottom:.08em;height:.32em;background:var(--accent);z-index:-1;
  transform:scaleX(0);transform-origin:left center;transition:transform .45s var(--ease)}
.s3-legend .v{z-index:0}
.s3-legend .sub{grid-column:1/-1;font-size:.78rem;color:var(--ink-3)}
.s3-legend li.on{color:var(--ink-2)}
.s3-legend li.on .v{color:var(--ink)}
.s3-legend li.now{color:var(--ink)}
.s3-legend li.now .v::after{transform:scaleX(1)}

@media(min-width:861px) and (max-height:780px){.s3-legend .sub{display:none}}   /* the label above already says "netto" */
@media(max-width:860px){
  .s3-on .s3-track{height:210vh}
  .s3-on .s3-sticky{padding:4.4rem 0 .9rem}
  .s3-on .s3-frame{grid-template-columns:1fr;grid-template-rows:1fr auto;max-height:none;margin-top:1rem}
  .s3-stage{order:-1;padding:.8rem 1.1rem .7rem}
  .s3-key{padding:.8rem 1.1rem .8rem;gap:.3rem}
  .s3-legend li{padding:.38rem 0}
  .s3-legend .h{font-size:.86rem}
  .s3-legend .v{font-size:1.1rem}
  .s3-legend .sub{display:none}
  .s3 .s3-cap{font-size:.76rem;margin-top:.4rem}
}
/* short phones (SE class): the whole pinned screen has to fit in ~600px, so header and legend tighten */
@media(max-width:860px) and (max-height:760px){
  .s3-on .s3-sticky{padding:4.1rem 0 .6rem}
  .s3 .s3-head .sec-num{margin-bottom:.55rem}
  .s3 .s3-head h2{font-size:1.45rem;margin-bottom:.55rem}
  .s3 .s3-head p{font-size:.9rem;line-height:1.5}
  .s3-on .s3-frame{margin-top:.7rem}
  .s3-key{padding:.55rem 1.1rem .6rem;gap:.1rem}
  .s3-lab{font-size:.7rem}
  .s3-legend li{padding:.26rem 0}
  .s3-legend .v{font-size:1rem}
}
/* reduced motion: no pinning, the finished stack stands still next to its legend */
@media(prefers-reduced-motion:reduce){
  .s3-on .s3-track{height:auto}
  .s3-on .s3-sticky{position:static;height:auto;padding:0}
  .s3-on .s3-frame{flex:none}
  .s3-view{height:min(70vh,36rem)}
}
@media(prefers-reduced-motion:reduce) and (max-width:860px){.s3-view{height:50svh}}