/* ==========================================================================
   Tour — die Website als selbstlaufende Bildschirmshow
   Läuft wie ein Video, ist aber eine Seite: scharf auf jedem Bildschirm,
   jederzeit änderbar, und man kann mittendrin anhalten.
   ========================================================================== */

.tourpage{background:#000;overflow:hidden;height:100svh}

.tour{position:fixed;inset:0;background:#000;overflow:hidden}

/* --- Szene ---------------------------------------------------------------- */
.scene{position:absolute;inset:0;opacity:0;visibility:hidden;
  transition:opacity .9s var(--ease),visibility .9s}
.scene.on{opacity:1;visibility:visible}

.sc-media{position:absolute;inset:0;overflow:hidden}
.sc-media img{width:100%;height:100%;object-fit:cover;
  object-position:var(--pos,50% 50%);transform:scale(1.02)}
.scene.on .sc-media img{animation:tourZoom 9s linear forwards}
@keyframes tourZoom{to{transform:scale(1.16)}}
.sc-media::after{content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(43,31,19,.55) 0%,rgba(43,31,19,.15) 35%,rgba(43,31,19,.9) 100%),
    linear-gradient(90deg,rgba(43,31,19,.65) 0%,rgba(43,31,19,0) 65%)}

.sc-copy{position:relative;height:100%;display:flex;flex-direction:column;
  justify-content:center;max-width:var(--max);margin-inline:auto;
  padding-inline:var(--pad);padding-bottom:6vh}

.sc-kicker{font-family:var(--text);font-weight:700;font-size:.74rem;letter-spacing:.24em;
  text-transform:uppercase;color:var(--red-lit);display:flex;align-items:center;gap:.8em;
  opacity:0}
.sc-kicker::before{content:"";width:34px;height:2px;background:currentColor;display:block}
.scene.on .sc-kicker{animation:tourFade .8s var(--ease) .15s both}

.sc-title{font-family:var(--display);font-weight:700;text-transform:uppercase;
  line-height:.88;letter-spacing:-.01em;color:#fff;margin:.5em 0 0;
  font-size:clamp(2.6rem,8.5vw,7.5rem);text-shadow:0 2px 60px rgba(0,0,0,.5)}
.sc-title span{display:block;overflow:hidden;padding-block:.08em;margin-block:-.08em}
.sc-title span i{display:block;font-style:normal;transform:translateY(112%)}
.scene.on .sc-title span i{animation:tourRise 1.1s var(--ease) both}
.scene.on .sc-title span:nth-child(2) i{animation-delay:.1s}
.scene.on .sc-title span:nth-child(3) i{animation-delay:.2s}

.sc-sub{margin-top:1.4em;max-width:46ch;font-size:clamp(1.05rem,1.7vw,1.4rem);
  line-height:1.5;color:rgba(255,255,255,.86);opacity:0}
.scene.on .sc-sub{animation:tourFade 1s var(--ease) .5s both}

@keyframes tourRise{from{transform:translateY(112%)}to{transform:none}}
@keyframes tourFade{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}

/* --- Schlussbild ---------------------------------------------------------- */
.scene.finale .sc-media::after{background:rgba(43,31,19,.78)}
.scene.finale .sc-copy{align-items:center;text-align:center;padding-bottom:0}
.scene.finale .sc-sub{margin-inline:auto}
.finale-logo{width:76px;height:76px;margin:0 auto 1.6em;opacity:0}
.scene.on.finale .finale-logo{animation:tourFade .9s var(--ease) both}
.finale-facts{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:2em;opacity:0}
.scene.on.finale .finale-facts{animation:tourFade 1s var(--ease) .8s both}
.finale-facts span{padding:.6em 1.2em;border-radius:99px;border:1px solid rgba(255,255,255,.24);
  font-size:.9rem;color:#fff}

/* --- Fortschritt ---------------------------------------------------------- */
.tour-bar{position:fixed;top:0;left:0;right:0;z-index:20;display:flex;gap:4px;
  padding:14px var(--pad) 0}
.tour-bar span{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.22);
  overflow:hidden}
.tour-bar span b{display:block;height:100%;width:0;background:#fff;border-radius:3px}
.tour-bar span.done b{width:100%}
.tour-bar span.run b{animation:tourBar linear forwards;animation-duration:var(--d,6s)}
@keyframes tourBar{from{width:0}to{width:100%}}
.tour.paused .tour-bar span.run b{animation-play-state:paused}
.tour.paused .scene.on .sc-media img{animation-play-state:paused}

/* --- Bedienung ------------------------------------------------------------ */
.tour-ui{position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:0 var(--pad) 26px}
.tour-brand{display:flex;align-items:center;gap:11px;color:#fff;opacity:.9}
.tour-brand img{width:30px;height:30px}
.tour-brand span{font-family:var(--display);font-weight:700;text-transform:uppercase;
  font-size:.95rem;letter-spacing:.02em}
.tour-ctrl{display:flex;align-items:center;gap:8px}
.tour-ctrl button,.tour-ctrl a{
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);
  backdrop-filter:blur(10px);
  transition:background .4s var(--ease),transform .4s var(--ease)}
.tour-ctrl button:hover,.tour-ctrl a:hover{background:var(--red);border-color:var(--red);
  transform:scale(1.07)}
.tour-ctrl svg{width:17px;height:17px;fill:currentColor}
.tour-ctrl .wide{width:auto;padding:0 1.3em;border-radius:99px;font-size:.88rem;font-weight:700;gap:.6em;
  display:inline-flex;align-items:center}
.tour-ui .hint{position:absolute;left:50%;bottom:34px;translate:-50% 0;
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.45)}

@media (max-width:760px){
  .tour-ui .hint{display:none}
  .sc-copy{padding-bottom:12vh}
}

@media (prefers-reduced-motion:reduce){
  .scene.on .sc-media img,.scene.on .sc-title span i,.scene.on .sc-kicker,
  .scene.on .sc-sub,.tour-bar span.run b{animation:none !important}
  .sc-title span i{transform:none}
  .sc-kicker,.sc-sub,.finale-logo,.finale-facts{opacity:1}
}