/* Runde 38 · Konzept B: durchgehend dunkel, eine Geschichte vom Kai bis zum Landstrom */
body{background:#04060a}
.nav .logo{color:#fff}

/* ================= 2 · An Bord ================= */
.anbord .stage{background:#030405}
.ab-bilder{position:absolute;inset:0}
.ab-bild{position:absolute;inset:0;margin:0;overflow:hidden;opacity:0;visibility:hidden;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.ab-bild img{position:absolute;max-width:none;will-change:transform;user-select:none}
.ab-schleier{position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(0deg,rgba(3,4,6,.9),rgba(3,4,6,.55) 22%,rgba(3,4,6,0) 52%),linear-gradient(90deg,rgba(3,4,6,.55),rgba(3,4,6,0) 46%),radial-gradient(120% 90% at 50% 45%,rgba(3,4,6,0) 55%,rgba(3,4,6,.6))}
.ab-intro{position:absolute;z-index:5;left:var(--pad);bottom:calc(20*var(--vh) + 30px);max-width:min(900px,88vw);pointer-events:none}
.ab-intro>*{opacity:0;transform:translate3d(0,18px,0);filter:blur(8px);transition:opacity .7s var(--ease),transform .9s var(--ease),filter .7s var(--ease)}
.ab-intro.an>*{opacity:1;transform:none;filter:none}
.ab-intro.an>*:nth-child(2){transition-delay:.08s}
.ab-intro .kick{color:rgba(243,240,234,.8);margin-bottom:16px}
.ab-intro .W{font-size:clamp(44px,6.4vw,128px);color:#fff;text-shadow:0 10px 50px rgba(0,0,0,.55)}
.ab-text{position:absolute;z-index:5;left:var(--pad);bottom:calc(14*var(--vh) + 34px);width:min(860px,86vw)}
.ab-text.wechsel>*:not(:first-child){top:auto;bottom:0}
.ab-text .nr{color:var(--hot);display:block;margin-bottom:14px;font-size:12px}
.ab-text .W{font-size:clamp(46px,6.4vw,128px);color:#fff;text-shadow:0 10px 50px rgba(0,0,0,.55)}
.ab-text .S{font-size:.34em;margin-top:.24em;color:rgba(243,240,234,.95);max-width:640px;line-height:1.15}

/* Maßlinie mit Endanschlägen: ein Arbeitspaket, fünf Schritte */
.ab-mass{position:absolute;z-index:5;left:var(--pad);right:var(--pad);bottom:calc(6*var(--vh));opacity:0;pointer-events:none}
.ab-linie{position:relative;height:2px;background:rgba(243,240,234,.22)}
.ab-linie:before,.ab-linie:after{content:"";position:absolute;top:-8px;width:2px;height:18px;background:rgba(243,240,234,.75)}
.ab-linie:before{left:-1px}.ab-linie:after{right:-1px}
.ab-voll{position:absolute;inset:0;background:var(--hot);transform-origin:left;transform:scaleX(0)}
.ab-linie b{position:absolute;top:-5px;width:12px;height:12px;margin-left:-6px;border-radius:2px;transform:rotate(45deg);background:#07090d;border:2px solid rgba(243,240,234,.45);transition:background .3s,border-color .3s,box-shadow .3s}
.ab-linie b:nth-of-type(1){left:0}.ab-linie b:nth-of-type(2){left:25%}.ab-linie b:nth-of-type(3){left:50%}.ab-linie b:nth-of-type(4){left:75%}.ab-linie b:nth-of-type(5){left:100%}
.ab-linie b.an{background:var(--hot);border-color:var(--hot);box-shadow:0 0 14px 2px rgba(255,79,18,.5)}
.ab-mass ol{position:relative;list-style:none;margin:0;padding:0;height:30px}
.ab-mass li{position:absolute;top:16px;transform:translateX(-50%);white-space:nowrap;color:rgba(243,240,234,.55);font-size:11.5px;letter-spacing:.14em;transition:color .3s}
.ab-mass li:nth-child(1){left:0;transform:none}.ab-mass li:nth-child(2){left:25%}.ab-mass li:nth-child(3){left:50%}.ab-mass li:nth-child(4){left:75%}.ab-mass li:nth-child(5){left:auto;right:0;transform:none}
.ab-mass li.war{color:rgba(243,240,234,.8)}
.ab-mass li.an{color:#fff}
.ab-paket{position:absolute;right:0;bottom:calc(100% + 14px);color:rgba(243,240,234,.7);font-size:11px}
@media (max-width:760px){
  .ab-intro{bottom:calc(16*var(--vh) + 20px)}
  .ab-intro .W{font-size:12vw}
  .ab-text{bottom:calc(10*var(--vh) + 30px)}
  .ab-text .W{font-size:8.4vw}
  .ab-text .S{font-size:.42em}
  .ab-mass{bottom:calc(4.5*var(--vh))}
  .ab-mass li{font-size:10px;letter-spacing:.08em;opacity:0;transition:opacity .3s}
  .ab-mass li.an{opacity:1}
  .ab-paket{display:none}
  .ab-schleier{background:linear-gradient(0deg,rgba(3,4,6,.92),rgba(3,4,6,.6) 30%,rgba(3,4,6,0) 58%)}
}

/* ================= 3 · Über der Decke ================= */
.roentgen .stage{background:#07090d}
.roentgen .stage:after{background:linear-gradient(0deg,rgba(5,7,11,.82),rgba(5,7,11,0) 50%)}
.roentgen .ro-bild,.roentgen .ro-offen{object-position:50% 40%}
.roentgen .ro-tipp{background:rgba(5,7,11,.6)}

/* ================= 4 · Mannschaft ================= */
.mannschaft .stage{background:#04060a}
.mn-bild{position:absolute;inset:0;margin:0;overflow:hidden;opacity:0;visibility:hidden}
.mn-bild:first-child{opacity:1;visibility:visible}
.mn-bild img{position:absolute;max-width:none;will-change:transform,filter}
.mn-schleier{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.55;background:linear-gradient(0deg,rgba(4,6,10,.95),rgba(4,6,10,.2) 55%),radial-gradient(120% 80% at 50% 50%,rgba(4,6,10,0) 40%,rgba(4,6,10,.7))}
.mn-text{position:absolute;z-index:4;left:var(--pad);bottom:calc(9*var(--vh));width:min(820px,86vw)}
.mn-text.wechsel>*:not(:first-child){top:auto;bottom:0}
.mn-text .nr{color:var(--hot);display:block;margin-bottom:14px;font-size:12px}
.mn-text .W{font-size:clamp(44px,6vw,120px);color:#fff;text-shadow:0 10px 50px rgba(0,0,0,.55)}
.mn-text .S{font-size:.34em;margin-top:.22em;color:rgba(243,240,234,.95);max-width:640px;line-height:1.15}
.mn-zahlen{position:absolute;z-index:5;left:var(--pad);right:var(--pad);top:50%;transform:translateY(-50%);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(16px,3vw,48px);pointer-events:none}
.mn-zahlen>div{border-top:2px solid rgba(243,240,234,.2);padding-top:18px;opacity:0;transform:translate3d(0,24px,0);transition:opacity .7s var(--ease),transform .9s var(--ease),border-color .6s}
.mn-zahlen.an>div{opacity:1;transform:none;border-color:var(--hot)}
.mn-zahlen.an>div:nth-child(2){transition-delay:.08s}.mn-zahlen.an>div:nth-child(3){transition-delay:.16s}.mn-zahlen.an>div:nth-child(4){transition-delay:.24s}
.mn-zahlen b,.mn-zahlen span.W{font-size:clamp(46px,5.4vw,104px);color:#fff;display:inline}
.mn-zahlen span.W{color:var(--hot)}
.mn-zahlen em{display:block;font-style:normal;margin-top:14px;color:rgba(243,240,234,.85);font-size:12.5px}
.mn-zahlen p{grid-column:1/-1;margin:8px 0 0;color:rgba(243,240,234,.6);opacity:0;transition:opacity .8s .3s}
.mn-zahlen.an p{opacity:1}
@media (max-width:760px){
  .mn-text .W{font-size:11.5vw}.mn-text .S{font-size:.42em}.mn-text{bottom:calc(6*var(--vh))}
  .mn-zahlen{grid-template-columns:repeat(2,minmax(0,1fr));gap:28px 18px}
  .mn-zahlen b,.mn-zahlen span.W{font-size:11.5vw}
}

/* ================= 5 · Einsatzgebiete, dunkel ================= */
.schiffe .stage{background:#080b11;color:var(--ink)}
.schiffe .raster{background-image:linear-gradient(rgba(243,240,234,.03) 1px,transparent 1px),linear-gradient(90deg,rgba(243,240,234,.03) 1px,transparent 1px),linear-gradient(rgba(243,240,234,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(243,240,234,.055) 1px,transparent 1px)}
.schiffe .schiff .strich{filter:invert(1) brightness(.9)}
.schiffe .gross text{stroke:rgba(243,240,234,.14)}
.schiffe .gross svg.voll text{fill:rgba(243,240,234,.035)}
.schiffe .schatten{background:radial-gradient(closest-side,rgba(0,0,0,.65),rgba(0,0,0,0))}
.schiffe .liste span{color:rgba(243,240,234,.45)}
.schiffe .liste span.an{color:#fff}
.schiffe .kopfz .kick{color:rgba(243,240,234,.75)}
.schiffe .kopfz .W{color:#fff}
.schiffe .code{color:rgba(243,240,234,.6)}
.schiffe .code b{color:#fff}
.schiffe .info .W{color:#fff}
.schiffe .info .S{color:rgba(243,240,234,.82)}
.schiffe .fortschritt{background:rgba(243,240,234,.12)}

/* ================= 6 · Finale: 3D-Schalter ================= */
.hafen .h-dunkel{position:absolute;inset:0;z-index:3;pointer-events:none;background:radial-gradient(60% 70% at 50% 56%,rgba(3,5,9,.2),rgba(3,5,9,.92))}
.s3d{position:absolute;left:0;top:0;z-index:8;width:min(60*var(--vh),520px);aspect-ratio:1;transform-origin:0 0;will-change:transform;cursor:grab;outline:none;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.s3d.zieht{cursor:grabbing}
.s3d:not(.bereit){background:url(s3d_aus.webp) 50% 50%/100% 100% no-repeat}
.hafen.strom .s3d:not(.bereit){background-image:url(s3d_an.webp)}
.s3d:not(.bereit) .s3d-schatten{display:none}
.s3d canvas{position:relative;width:100%;height:100%;display:block}
.s3d-schatten{position:absolute;left:16%;right:16%;top:20%;bottom:12%;border-radius:22%;box-shadow:0 50px 100px rgba(0,0,0,.8),0 10px 30px rgba(0,0,0,.6);pointer-events:none}
.s3d:focus-visible:after{content:"";position:absolute;inset:8%;border-radius:12%;outline:2px solid var(--hot);outline-offset:4px}
.s3d-ruf{position:absolute;z-index:8;left:50%;bottom:calc(5*var(--vh));transform:translateX(-50%);display:flex;align-items:center;gap:12px;padding:12px 20px;border-radius:999px;background:rgba(8,11,17,.7);border:1px solid rgba(243,240,234,.18);color:#fff;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);pointer-events:none;white-space:nowrap;opacity:0}
.s3d-ruf i{width:8px;height:8px;border-radius:50%;background:var(--hot);box-shadow:0 0 0 0 rgba(255,79,18,.6);animation:rufPuls 1.6s ease-out infinite}
@keyframes rufPuls{0%{box-shadow:0 0 0 0 rgba(255,79,18,.6)}100%{box-shadow:0 0 0 12px rgba(255,79,18,0)}}
.s3d-ruf .m{display:none}
.s3d-t{position:absolute;z-index:8;left:0;top:0;width:min(330px,56vw);opacity:0;pointer-events:none}
.s3d-t b{display:block;font-size:12.5px;letter-spacing:.14em;color:var(--hot);font-weight:500}
.s3d-t span{display:block;font-size:16px;font-weight:600;margin-top:6px;line-height:1.35;color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.8)}
.hafen .kopfl{z-index:9}
@media (max-width:760px){
  .s3d{width:min(84vw,46*var(--vh))}
  .s3d-ruf .d{display:none}.s3d-ruf .m{display:inline}
  .s3d-t span{font-size:13.5px}
  .hafen .reiter{top:calc(11*var(--vh) + 96px);bottom:auto;left:var(--pad);right:auto;grid-auto-flow:column;justify-items:start;gap:14px}
}
@media (prefers-reduced-motion:reduce){.s3d-ruf i{animation:none}}
@media (min-width:761px){.schiffe .buehne{width:min(68vw,1100px);transform:translate(-44%,-47%)}}