/* Szenen "Entscheidung" und "Detail" – scroll-gesteuert (GSAP ScrollTrigger) */
.scene--pin{position:relative}
.scene--dec{height:100svh}
.scene--det{height:100svh}
.pin{position:sticky;top:0;height:100svh;overflow:hidden}

/* 04 Entscheidung */
.variants,.emblem{position:absolute;inset:0;width:100%;height:100%;display:block}
.atmo{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.emblem{opacity:0;pointer-events:none}
.dec{position:absolute;inset:0;padding:6rem var(--gutter);pointer-events:none}
@media (min-width:901px){.dec{padding-right:calc(var(--gutter) + 8rem)}}
.dec__acts{display:flex;flex-wrap:wrap;gap:.5rem 1.6rem;margin:-.6rem 0 2.2rem;padding:0;list-style:none;font:500 .64rem/1 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:rgba(163,158,149,.5)}
.dec__acts li{display:flex;align-items:center;gap:.55rem;transition:color .5s}
.dec__acts li::before{content:"";width:5px;height:5px;border-radius:50%;border:1px solid currentColor;transition:background .5s,border-color .5s}
.dec__acts li.is-done{color:var(--asche)}
.dec__acts li.is-on{color:var(--papier)}
.dec__acts li.is-on::before{background:var(--messing);border-color:var(--messing)}
.dec__a{margin:0;max-width:12ch;font:200 clamp(2.4rem,1rem + 4.6vw,6.2rem)/1.02 var(--serif);letter-spacing:-.01em;text-shadow:0 0 40px rgba(10,11,11,.8);
  opacity:0;transform:translate3d(0,.35em,0);transition:opacity .6s var(--ease),transform 1s var(--ease)}
.dec__a.is-on{opacity:1;transform:none}
.dec__end{position:absolute;left:0;right:0;bottom:11svh;text-align:center;padding:0 var(--gutter)}
.dec__b{margin:0;font:200 clamp(2.2rem,1rem + 3.6vw,5rem)/1.05 var(--serif)}
.dec__sub{margin:1rem 0 0;color:var(--asche);white-space:nowrap}
.dec__b,.dec__sub{opacity:0;transform:translate3d(0,.6rem,0);transition:opacity .45s var(--ease),transform .7s var(--ease)}
.dec__end.is-on .dec__b,.dec__end.is-on .dec__sub{opacity:1;transform:none}
.dec__end.is-on .dec__sub{transition-delay:.12s}
@media (max-width:900px){.dec__end{bottom:15svh}}
@media (max-width:700px){.dec__acts{gap:.4rem .9rem;font-size:.56rem;letter-spacing:.1em}.dec__acts li{gap:.4rem}.dec__a{position:absolute;left:var(--gutter);bottom:15svh}.dec__end{text-align:left}.dec__sub{white-space:normal;font-size:.95rem}}

/* 05 Detail: Fehler, die Maschinen wirklich machen */
.det{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:6rem var(--gutter)}
@media (min-width:901px){.det{padding-right:calc(var(--gutter) + 8rem)}}
.det .tc-label{position:absolute;top:6rem;left:var(--gutter)}
.tp{display:block}
.tp__kick{grid-column:1;margin:0 0 1.6rem;font:500 .95rem/1.55 var(--sans);text-wrap:balance;text-transform:uppercase;letter-spacing:0;transition:letter-spacing 1s var(--ease)}
.tp__kick.is-fixed{letter-spacing:.24em}
.tp__q{grid-column:1;margin:0;max-width:17em;font:200 clamp(2.3rem,1rem + 4vw,5.6rem)/.98 var(--serif);letter-spacing:-.01em;text-indent:0;
  transition:line-height 1s var(--ease),text-indent 1s var(--ease)}
.tp__q.is-lead{line-height:1.12}
.tp__q.is-hang{text-indent:var(--hang,-.42em)}
.tp__q .wd,.tp__q .sw,.tp__q .wd--keep{text-indent:0}
.sw{display:inline-grid;position:relative}
.sw b,.sw i{grid-area:1/1;font:inherit;transition:opacity .6s var(--ease),filter .6s var(--ease)}
.sw i{opacity:0;filter:blur(6px)}
.sw.is-fixed b{opacity:0;filter:blur(6px)}
.sw.is-fixed i{opacity:1;filter:none}
.tp__br{display:block}
.tp__q.is-widow .tp__br{display:none}
.tp__fb{display:none}
@media (min-width:901px){.tp__q.is-widow .tp__fb{display:block}}
@media (max-width:900px){.tp__q.is-widow{text-wrap:balance}}
.tp__q.is-widow .wd--keep{white-space:nowrap}
.wd{display:inline-block}
.flash{position:relative}
.flash::after{content:"";position:absolute;left:-.08em;right:-.08em;bottom:-.06em;height:2px;background:var(--messing);transform-origin:left;animation:flash 1.4s var(--ease) forwards}
@keyframes flash{0%{transform:scaleX(0);opacity:1}40%{transform:scaleX(1);opacity:1}100%{transform:scaleX(1);opacity:0}}
.tp__list{grid-column:2;grid-row:1/span 2;margin:0;padding:0;list-style:none;counter-reset:k;font-size:.8rem;border-top:1px solid var(--linie)}
.tp__list li{display:flex;justify-content:space-between;gap:1rem;padding:.7rem 0;border-bottom:1px solid var(--linie);color:var(--asche);transition:color .5s}
.tp__list li::after{content:"";width:.5rem;height:.5rem;margin-top:.3rem;border:1px solid currentColor;border-radius:50%;transition:background .5s,border-color .5s}
.tp__list li.is-done{color:var(--papier)}
.tp__list li.is-done::after{background:var(--messing);border-color:var(--messing)}
.det__meter{grid-column:2;margin:1rem 0 0;font:500 .7rem/1 var(--sans);letter-spacing:.14em;text-transform:uppercase;color:var(--asche);font-variant-numeric:tabular-nums}
.det__count{color:var(--messing)}
.det__sub{margin:3rem 0 0;max-width:30rem;font-size:clamp(1.05rem,1rem + .4vw,1.4rem);opacity:0;transform:translate3d(0,.8rem,0);transition:opacity .9s var(--ease) .35s,transform 1.1s var(--ease) .35s}
.det__sub.is-on{opacity:1;transform:none}
@media (max-width:900px){
  .det .tc-label{position:static}
  .tp{grid-template-columns:1fr}
  .tp__list{grid-column:1;grid-row:auto;margin-top:2rem;display:grid;grid-template-columns:1fr 1fr;column-gap:1.2rem;font-size:.72rem}
  .tp__list li{padding:.5rem 0}
  .det__meter{grid-column:1}
  .det__sub{margin-top:1.6rem}
}

@media (prefers-reduced-motion:reduce){
  .dec__a,.dec__b,.dec__sub,.det__sub{opacity:1;transform:none}
}
/* Fehlersuche in der Detail-Szene */
.det__game{position:absolute;left:var(--gutter);bottom:6rem;margin:0;display:flex;gap:1.2rem;align-items:baseline;font:500 .7rem/1.4 var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--asche);opacity:0;transform:translate3d(0,.6rem,0);transition:opacity .8s var(--ease),transform .9s var(--ease);pointer-events:none}
.det__game.is-on{opacity:1;transform:none}
.det__n{color:var(--messing);font-variant-numeric:tabular-nums}
.tp.is-game{cursor:crosshair}
.tp.is-game .tp__q,.tp.is-game .tp__kick{-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
@media (max-width:900px){.det__game{bottom:4.5rem;right:var(--gutter);flex-wrap:wrap;gap:.4rem 1rem}}
/* Fast quadratische Formate (iPad): das Logo bleibt mittig und nimmt relativ mehr Breite ein, die Überschrift wird kleiner */
@media (min-width:701px) and (max-aspect-ratio:3/2){.dec__a{font-size:clamp(2.2rem,.6rem + 3.6vw,5rem)}}
/* Schluss der Logo-Szene: am Desktop eine Zeile (zentriert nie mehrzeilig), Größe passt sich der Breite an */
@media (min-width:701px){.dec__b{white-space:nowrap;font-size:min(clamp(2.2rem,1rem + 3.6vw,5rem),3.9vw)}}
@media (max-width:700px){.tp__kick{font-size:.78rem;margin-bottom:1.3rem}}