/* Kamerafahrt (Startseite) */
.flug{position:relative;height:100vh;height:100svh;background:#0d0d0c;color:#fff;overflow:hidden}
.flug video.film{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:opacity .22s ease}
.flug.blende video.film{opacity:0}
.flug .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .6s}
.flug.ready .poster{opacity:0}
.flug .veil{position:absolute;inset:0;pointer-events:none;background:
  linear-gradient(180deg,rgba(0,0,0,.28) 0,rgba(0,0,0,0) 14%),
  linear-gradient(0deg,rgba(0,0,0,.62) 0,rgba(0,0,0,.4) 26%,rgba(0,0,0,.12) 48%,rgba(0,0,0,0) 62%),
  radial-gradient(ellipse 75% 70% at 0% 85%,rgba(0,0,0,.45) 0,rgba(0,0,0,.2) 50%,rgba(0,0,0,0) 78%)}
.halt p{font-weight:500}
.halt h1,.halt h2{text-shadow:0 2px 24px rgba(0,0,0,.45),0 1px 3px rgba(0,0,0,.35)}
.halt p,.halt .k{text-shadow:0 1px 10px rgba(0,0,0,.6),0 1px 2px rgba(0,0,0,.5)}
.halt p{color:#fff}

/* Text je Halt */
.halt{position:absolute;left:var(--gut);bottom:clamp(110px,15vh,170px);width:min(660px,calc(100vw - 2*var(--gut)));z-index:5;pointer-events:none}
.halt>*{pointer-events:auto}
.halt .k{color:rgba(255,255,255,.78)}
.halt .t{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.halt.on .t{opacity:1;transform:none}
.halt.on .t:nth-child(2){transition-delay:.08s}.halt.on .t:nth-child(3){transition-delay:.16s}.halt.on .t:nth-child(4){transition-delay:.24s}
.halt h1,.halt h2{font-size:clamp(36px,4.6vw,74px);line-height:1;text-wrap:balance}
.halt h2{font-size:clamp(32px,4.1vw,64px)}
.halt p{font-size:clamp(17px,1.5vw,21px);line-height:1.5;color:rgba(255,255,255,.88);max-width:34em;margin:22px 0 0;text-wrap:pretty}
.halt .acts{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.halt[hidden]{display:block;visibility:hidden}

/* Infopunkte */
.spots{position:absolute;inset:0;z-index:4;pointer-events:none}
.spot{position:absolute;left:0;top:0;width:0;height:0;pointer-events:auto}
.spot button{position:absolute;left:-22px;top:-22px;width:44px;height:44px;border-radius:50%;border:0;background:transparent;cursor:pointer;padding:0}
.spot .dot{position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 2px #fff;transform:scale(0);transition:transform .45s var(--ease)}
.spot .dot::before,.spot .dot::after{content:"";position:absolute;inset:-2px;border-radius:50%;border:2px solid #fff;opacity:0}
.spot.on .dot{transform:scale(1)}
.spot.on .dot::before{animation:puls 2.4s var(--ease) infinite}
.spot.on .dot::after{animation:puls 2.4s var(--ease) 1.2s infinite}
@keyframes puls{0%{transform:scale(1);opacity:.85}100%{transform:scale(3.6);opacity:0}}
.spot .lab{position:absolute;left:20px;top:-20px;width:max-content;max-width:min(270px,62vw);padding:11px 14px 12px;border-radius:4px;background:rgba(14,14,13,.78);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-left:2px solid var(--accent);
  opacity:0;transform:translateX(-8px);transition:opacity .45s var(--ease),transform .45s var(--ease);pointer-events:none}
.spot.left .lab{left:auto;right:20px;border-left:0;border-right:2px solid var(--accent);text-align:right;transform:translateX(8px)}
.spot.on .lab{opacity:1;transform:none}
.spot .lab b{display:block;font-size:15.5px;line-height:1.2;letter-spacing:-.005em}
.spot .lab span{display:block;font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.78);margin-top:4px;max-height:0;overflow:hidden;transition:max-height .45s var(--ease)}
.spot.open .lab span,.flug.big .spot.on .lab span{max-height:120px}
.spot.out{display:none}

/* Fortschritt */
.rail{position:absolute;left:var(--gut);right:var(--gut);bottom:clamp(26px,4vh,44px);z-index:6;display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.rail button{all:unset;cursor:pointer;display:grid;gap:10px;padding-top:12px;font:500 12px/1.2 var(--f-mono);letter-spacing:.01em;text-transform:none;color:rgba(255,255,255,.78);position:relative}
.rail button::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:rgba(255,255,255,.22)}
.rail button i{position:absolute;left:0;top:0;height:2px;width:0;background:#fff}
.rail button[aria-current=step]{color:#fff}
.rail button:focus-visible{outline:2px solid var(--accent);outline-offset:4px}
.rail button span b{color:#fff;margin-right:8px;font-weight:500}
@media(max-width:640px){.rail button span em{display:none}.rail{gap:6px}}

.weiter{position:absolute;right:var(--gut);bottom:clamp(78px,11vh,110px);z-index:6;display:flex;align-items:center;gap:12px;background:none;border:0;color:#fff;cursor:pointer;font:500 12px var(--f-mono);letter-spacing:.01em;text-transform:none}
.weiter .ring{width:50px;height:50px;border-radius:50%;border:1px solid rgba(255,255,255,.55);display:grid;place-items:center;transition:background .25s,border-color .25s}
.weiter:hover .ring{background:#fff;color:var(--ink);border-color:#fff}
.weiter svg{width:16px;height:16px;animation:nick 2.2s var(--ease) infinite}
@keyframes nick{0%,60%,100%{transform:none}30%{transform:translateY(4px)}}
.laden{position:absolute;right:var(--gut);bottom:clamp(64px,9vh,90px);z-index:6;font:500 11px var(--f-mono);letter-spacing:.01em;color:rgba(255,255,255,.6);transition:opacity .5s}
.laden.fertig{opacity:0}
@media(max-width:720px){
  .halt{bottom:130px}
  .halt p{font-size:16px;margin-top:14px}
  .halt .acts{margin-top:20px}
  .halt .acts .btn{min-height:46px;padding:0 18px;font-size:14px}
  .weiter{bottom:auto;top:96px}
  .weiter .lbl{display:none}
  .spot .lab{max-width:200px}
}
/* Niedrige Fenster: auf Halt 0 bleibt der Preisabsatz sichtbar, nur kleiner gesetzt */
@media(max-height:620px){
  .halt:not([data-halt="0"]) p:not(.k){display:none}
  .halt{bottom:clamp(40px,8vh,110px)}
  .halt h1{font-size:clamp(30px,3.8vw,50px)}
  .halt[data-halt="0"] p:not(.k){font-size:16px;line-height:1.4;margin-top:12px}
  .halt .acts{margin-top:16px}
  .halt .acts .btn{padding:12px 20px}
  .halt .entdecken{margin-top:12px}
  .flug.fahrt .halt{bottom:100px}
}
@media(prefers-reduced-motion:reduce){.spot.on .dot::before,.spot.on .dot::after,.weiter svg{animation:none}}

@media(min-height:500px){.flug{min-height:560px}}
.flug.wartet .laden{opacity:1}
@media(max-width:720px){
  .halt:not([data-halt="0"]) p:not(.k){display:none}
  .halt{bottom:118px}
}
@media(max-height:480px) and (orientation:landscape){
  .halt{bottom:18px}.halt h1,.halt h2{font-size:26px}
  .halt:not([data-halt="0"]) p:not(.k){display:none}
  .halt .k{font-size:13px}
  .halt[data-halt="0"] p:not(.k){font-size:14px;line-height:1.35;margin-top:8px;max-width:46em}
  .halt .acts{margin-top:10px;gap:8px}
  .halt .acts .btn{min-height:38px;padding:0 14px;font-size:13px}
  .halt .entdecken{margin-top:8px;font-size:14px}
  .flug.fahrt .halt{bottom:70px}
  .rail{bottom:14px}.weiter{top:70px;bottom:auto}
}.laden{opacity:0;font-family:var(--f-sans);font-size:13px;letter-spacing:0}
.flug.wartet .laden{opacity:1}
.spot .lab{max-width:var(--lw,270px)}
.spot .lab b{white-space:nowrap}
.spot.nolab:not(.open) .lab{opacity:0}
.flug .poster{filter:url(#scharf) brightness(1.2) saturate(1.04)}
.halt .k{color:#fff;font-size:15px}

.rail button,.weiter,.laden{font-family:var(--sans);font-weight:600;font-size:13px;letter-spacing:.02em;text-transform:none}
/* Knopf «Fahrt überspringen» oben rechts unter der Kopfzeile */
.skip-flug{position:absolute;top:calc(var(--hh) + 14px);right:var(--gut);z-index:7;display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border:1px solid rgba(255,255,255,.6);border-radius:999px;color:#fff;background:rgba(0,0,0,.18);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);font:600 14px/1 var(--sans);text-decoration:none;transition:background .2s,color .2s}
.skip-flug:hover,.skip-flug:focus-visible{background:#fff;color:var(--ink)}
@media(max-width:760px){.skip-flug{top:calc(var(--hh) + 8px);padding:8px 12px;font-size:12px}}
/* grösser und deutlicher (Wunsch Auftraggeber) */
.skip-flug{top:calc(var(--hh) + 18px);padding:14px 22px;gap:10px;background:#fff;color:var(--ink);border-color:#fff;font-size:17px;box-shadow:0 6px 24px rgba(0,0,0,.25)}
.skip-flug:hover,.skip-flug:focus-visible{background:var(--accent);border-color:var(--accent);color:#fff}
@media(max-width:760px){.skip-flug{top:calc(var(--hh) + 10px);padding:11px 16px;font-size:15px}}
/* Runde 5 */
.halt h1{font-weight:800;font-stretch:85%;letter-spacing:-.015em}
.halt h2{font-weight:800;font-stretch:88%}
.rail button em{font-style:normal}
.rail button{font-size:14px}
.halt .k{font-size:16px}
.spot .lab b{white-space:normal;text-wrap:balance}
@media(max-width:760px){.weiter{display:none}}
/* Runde 4: bessere Lesbarkeit von Kicker und Text auf der hellen Fassade (Halt 1) */
.flug .veil{background:linear-gradient(180deg,rgba(0,0,0,.28) 0,rgba(0,0,0,0) 14%),linear-gradient(0deg,rgba(0,0,0,.62) 0,rgba(0,0,0,.4) 26%,rgba(0,0,0,.12) 48%,rgba(0,0,0,0) 62%),radial-gradient(ellipse 62% 80% at 0% 70%,rgba(0,0,0,.52) 0,rgba(0,0,0,.26) 52%,rgba(0,0,0,0) 80%)}
.halt .k{text-shadow:0 1px 14px rgba(0,0,0,.75),0 1px 2px rgba(0,0,0,.6)}
/* Navigation über hellem Himmel besser lesbar */
.flug .veil::before{content:"";position:absolute;inset:0 0 auto 0;height:180px;background:linear-gradient(180deg,rgba(0,0,0,.34),rgba(0,0,0,0))}

/* 21.10.2026: Fahrt nur auf Wunsch. Ohne Fahrtmodus steht Halt 0 mit dem Angebot still,
   Steuerung und Infopunkte erscheinen erst nach «Gebäude entdecken». */
.flug:not(.fahrt) .fahrt-ui,.flug:not(.fahrt) .spots{display:none}
.flug:not(.js) .entdecken{display:none}
.halt.on .t:nth-child(5){transition-delay:.32s}
.entdecken{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:6px 2px;background:none;border:0;color:#fff;cursor:pointer;font:600 16px/1.2 var(--sans);text-shadow:0 1px 10px rgba(0,0,0,.6)}
.entdecken .play{width:34px;height:34px;border-radius:50%;border:1px solid rgba(255,255,255,.7);display:grid;place-items:center;transition:background .2s,color .2s,border-color .2s}
.entdecken .play svg{width:14px;height:14px;margin-left:2px}
.entdecken:hover .play,.entdecken:focus-visible .play{background:#fff;color:var(--ink);border-color:#fff}
.entdecken:hover{text-decoration:underline;text-underline-offset:4px}
/* oben rechts: «Fahrt überspringen» zurueckhaltend, «Zurück zum Angebot» deutlich */
.fahrt-nav{position:absolute;top:calc(var(--hh) + 18px);right:var(--gut);left:var(--gut);z-index:7;display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px;pointer-events:none}
.fahrt-nav>*{pointer-events:auto}
.fahrt-nav .skip-flug{position:static;background:rgba(0,0,0,.25);color:#fff;border-color:rgba(255,255,255,.7);box-shadow:none}
.fahrt-nav .skip-flug:hover,.fahrt-nav .skip-flug:focus-visible{background:#fff;border-color:#fff;color:var(--ink)}
.zurueck{display:inline-flex;align-items:center;padding:14px 22px;border:1px solid #fff;border-radius:999px;background:#fff;color:var(--ink);font:600 17px/1 var(--sans);cursor:pointer;box-shadow:0 6px 24px rgba(0,0,0,.25);transition:background .2s,color .2s,border-color .2s}
.zurueck:hover,.zurueck:focus-visible{background:var(--accent);border-color:var(--accent);color:#fff}
@media(max-width:760px){.fahrt-nav{top:calc(var(--hh) + 10px);gap:8px}.fahrt-nav .skip-flug,.zurueck{padding:11px 16px;font-size:15px}}

/* 21.10.2026 Stufe 2: Handy hochkant ohne Fahrt: Bild oben, Angebot darunter auf hellem Grund.
   Der Fahrtmodus bleibt Vollbild (Geometrie der Infopunkte rechnet mit der ganzen Section). */
@media(max-width:720px) and (orientation:portrait){
  .flug:not(.fahrt){--bild:clamp(220px,40svh,380px);height:auto;min-height:0;background:var(--bg);color:var(--ink);border-bottom:1px solid var(--line)}
  .flug:not(.fahrt) .poster,.flug:not(.fahrt) video.film,.flug:not(.fahrt) .veil{bottom:auto;height:var(--bild)}
  .flug:not(.fahrt) .veil{background:none}
  .flug:not(.fahrt) .halt[data-halt="0"]{position:relative;left:auto;bottom:auto;width:auto;margin-top:var(--bild);padding:22px var(--gut) 34px}
  .flug:not(.fahrt) .halt[data-halt="0"] .k,
  .flug:not(.fahrt) .halt[data-halt="0"] h1,
  .flug:not(.fahrt) .halt[data-halt="0"] p{color:var(--ink);text-shadow:none}
  .flug:not(.fahrt) .halt[data-halt="0"] .k{color:var(--mut);font-size:15px}
  .flug:not(.fahrt) .halt[data-halt="0"] h1{font-size:clamp(30px,8.6vw,40px);line-height:1.02}
  .flug:not(.fahrt) .halt[data-halt="0"] p:not(.k){font-size:16px;line-height:1.5;margin-top:14px}
  .flug:not(.fahrt) .halt[data-halt="0"] .acts{display:grid;gap:10px;margin-top:20px}
  .flug:not(.fahrt) .halt[data-halt="0"] .acts .btn{width:100%;min-height:52px;padding:0 18px;font-size:16px}
  .flug:not(.fahrt) .halt[data-halt="0"] .btn-o:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
  .flug:not(.fahrt) .entdecken{margin-top:16px;color:var(--ink);text-shadow:none}
  .flug:not(.fahrt) .entdecken .play{border-color:rgba(28,26,23,.45)}
  .flug:not(.fahrt) .entdecken:hover .play,.flug:not(.fahrt) .entdecken:focus-visible .play{background:var(--ink);color:#fff;border-color:var(--ink)}
}