/* Runde 39 · Konzept B: Scan durch die Hülle, Schnitt durchs Schiff, Flug in die Brücke, zwei Wege */

/* ================= 1 · Start: Scan und Schnitt ================= */
.start3 canvas.bau{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;visibility:hidden}
.start3 .scanlinie{position:absolute;left:0;right:0;top:0;height:0;z-index:3;pointer-events:none;opacity:0;will-change:transform}
.start3 .scanlinie:before{content:"";position:absolute;left:0;right:0;bottom:0;height:140px;background:linear-gradient(0deg,rgba(255,79,18,.16),rgba(255,79,18,0))}
.start3 .scanlinie i{position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--hot);box-shadow:0 0 16px 2px rgba(255,79,18,.6),0 0 70px 14px rgba(255,79,18,.16)}
.start3 .scanlinie i:before,.start3 .scanlinie i:after{content:"";position:absolute;top:-8px;width:2px;height:18px;background:var(--hot)}
.start3 .scanlinie i:before{left:var(--pad)}.start3 .scanlinie i:after{right:var(--pad)}
.ab-schleier.b3{opacity:0;will-change:opacity}

/* Durch die Brückenfenster: dasselbe Bild wie zu Beginn der nächsten Szene */
.start3 .tor{position:absolute;inset:0;z-index:4;opacity:0;pointer-events:none;background:#07090d;will-change:opacity,transform}
.start3 .tor img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 40%}
.start3 .tor:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(5,7,11,.82),rgba(5,7,11,0) 50%)}

/* ================= 2 · Brücke: schließt ohne Schnitt an ================= */
#roentgen{margin-top:calc(-100*var(--vh))}
.roentgen .ro-text{opacity:0}

/* ================= 3 · Zwei Wege ================= */
.wege .stage{background:#04060a}
.wg{position:absolute;inset:0;display:block;color:#fff;text-decoration:none;overflow:hidden;-webkit-tap-highlight-color:transparent}
.wg .bildw{position:absolute;inset:0;background:#07090d}
.wg .bildw img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 1.4s var(--ease)}
.wg.a .bildw img{object-position:50% 40%}
.wg.b .bildw img{object-position:68% 50%}
.wg .bildw:after{content:"";position:absolute;inset:0}
.wg.a .bildw:after{background:linear-gradient(0deg,rgba(4,6,10,.92),rgba(4,6,10,.4) 36%,rgba(4,6,10,0) 62%),linear-gradient(90deg,rgba(4,6,10,.62),rgba(4,6,10,0) 48%),linear-gradient(180deg,rgba(4,6,10,.55),rgba(4,6,10,0) 24%)}
.wg.b .bildw:after{background:linear-gradient(0deg,rgba(4,6,10,.92),rgba(4,6,10,.4) 36%,rgba(4,6,10,0) 62%),linear-gradient(270deg,rgba(4,6,10,.62),rgba(4,6,10,0) 48%),linear-gradient(180deg,rgba(4,6,10,.55),rgba(4,6,10,0) 24%)}
.wg.b{z-index:2;clip-path:inset(0 0 0 50%);will-change:clip-path}
.wg .zahl{display:block;color:rgba(243,240,234,.7);margin-bottom:12px}
.wg .txt{position:absolute;bottom:calc(10*var(--vh));width:min(560px,38vw)}
.wg.a .txt{left:var(--pad)}
.wg.b .txt{right:var(--pad);text-align:right}
.wg .kick{color:var(--hot);margin-bottom:16px}
.wg.b .kick{justify-content:flex-end}
.wg .W{font-size:clamp(40px,4.3vw,88px);color:#fff;text-shadow:0 10px 50px rgba(0,0,0,.55)}
.wg .W .S{font-size:.38em;margin-top:.18em;color:rgba(243,240,234,.94)}
.wg p{font-size:clamp(15px,1.08vw,18px);line-height:1.55;color:rgba(243,240,234,.88);margin:20px 0 0;max-width:440px;text-shadow:0 2px 18px rgba(0,0,0,.7)}
.wg.b p{margin-left:auto}
.wg .pf{display:inline-flex;align-items:center;gap:14px;margin-top:26px;font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:#fff}
.wg.b .pf{flex-direction:row-reverse}
.wg .pf i{position:relative;width:36px;height:2px;background:var(--hot);transition:width .35s var(--ease)}
.wg .pf i:after{content:"";position:absolute;right:-1px;top:-4px;width:2px;height:10px;background:var(--hot)}
.wg.b .pf i:after{right:auto;left:-1px}
@media (hover:hover){.wg:hover .bildw img{transform:scale(1)}.wg:hover .pf i{width:60px}}
.wg:active .pf{transform:scale(.97)}
.wg:focus-visible{outline:2px solid var(--hot);outline-offset:-6px}

.teiler{position:absolute;z-index:3;top:0;bottom:0;left:0;width:0;pointer-events:none;will-change:transform}
.teiler:before{content:"";position:absolute;top:0;bottom:0;left:-1px;width:2px;background:linear-gradient(180deg,rgba(255,79,18,0),var(--hot) 18%,var(--hot) 82%,rgba(255,79,18,0));box-shadow:0 0 18px rgba(255,79,18,.45)}
.teiler .griff{position:absolute;top:50%;left:0;width:78px;height:78px;margin:-39px 0 0 -39px;border-radius:50%;background:var(--hot);color:#fff;display:grid;place-items:center;font-family:var(--serif);font-style:italic;font-size:27px;line-height:1;box-shadow:0 0 0 9px rgba(255,79,18,.16),0 18px 50px rgba(0,0,0,.5)}
.teiler .griff:before,.teiler .griff:after{content:"";position:absolute;top:50%;width:0;height:0;margin-top:-5px;border:5px solid transparent}
.teiler .griff:before{left:-16px;border-right-color:rgba(255,255,255,.85)}
.teiler .griff:after{right:-16px;border-left-color:rgba(255,255,255,.85)}

.wg-zahlen{position:absolute;z-index:4;left:50%;top:calc(11.4*var(--vh));transform:translateX(-50%);width:max-content;max-width:calc(100vw - 2*var(--pad));display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;padding:11px 20px;border-radius:999px;background:rgba(4,6,10,.58);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:rgba(243,240,234,.85);white-space:nowrap;pointer-events:none}
.wg-zahlen b{color:#fff;font-weight:500}
.wg-zahlen span{display:flex;align-items:center;gap:8px}
.wg-zahlen span+span:before{content:"";width:4px;height:4px;border-radius:50%;background:var(--hot);margin-right:6px}

@media (max-width:760px){
  .wg .txt{width:calc(100vw - 2*var(--pad) - 8vw);bottom:calc(9*var(--vh))}
  .wg .W{font-size:7.6vw}
  .wg .W .S{font-size:.42em}
  .wg p{font-size:15px;margin-top:14px}
  .wg .pf{margin-top:18px}
  .wg.a .bildw img,.wg.b .bildw img{object-position:50% 50%}
  .teiler .griff{width:58px;height:58px;margin:-29px 0 0 -29px;font-size:21px}
  .teiler .griff:before{left:-13px}.teiler .griff:after{right:-13px}
  .wg-zahlen{top:calc(10*var(--vh));width:calc(100vw - 2*var(--pad));white-space:normal;border-radius:14px;gap:6px 14px;font-size:10px;letter-spacing:.1em;padding:10px 12px}
  .wg-zahlen span+span:before{margin-right:2px}
}
@media (prefers-reduced-motion:reduce){.wg .bildw img{transition:none;transform:none}}