/* =========================================================
   Alpine Collective — WORLD LAYER
   Eén doorlopende bergwereld: geen zwarte blokken.
   Fase A (cinematic hero) → Fase B (interactieve reis)
   ========================================================= */

/* ---------- De wereld: vaste achtergrondscène ---------- */
body{ background:#22354c; }
.world{ position:fixed; inset:0; z-index:-2; overflow:hidden; }
.world img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.world .alt{ opacity:0; transition:opacity 1.2s ease; }
/* dag-fase tinten (scroll-gestuurd) */
.world .tint{ position:absolute; inset:0; opacity:0; transition:opacity 1.2s ease; }
.world .tint.morning{ background:linear-gradient(180deg, rgba(120,160,205,0.24), rgba(10,18,30,0.34) 85%); }
.world .tint.day{ background:linear-gradient(180deg, rgba(30,55,90,0.1), rgba(10,18,30,0.32) 85%); }
.world .tint.afternoon{ background:linear-gradient(180deg, rgba(224,150,70,0.18), rgba(12,16,26,0.36) 85%); }
.world .tint.evening{ background:linear-gradient(180deg, rgba(20,26,52,0.38), rgba(6,8,14,0.52) 85%); }
.world .veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(9,13,20,0), rgba(9,13,20,0.1)); }

/* secties worden transparant: de wereld blijft zichtbaar */
main section.section, .ctaband{ background:transparent; }
footer.site{ background:linear-gradient(180deg, rgba(8,10,14,0.55), rgba(8,10,14,0.82)); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); margin-top:var(--s5); }

/* leesbaarheids-glass: licht, geen dichte vlakken */
.pane{ background:linear-gradient(200deg, rgba(16,30,46,0.5), rgba(8,16,26,0.62) 62%); border:1px solid rgba(255,255,255,0.14); border-radius:22px; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 24px 60px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.08); padding:clamp(22px,3vw,36px); }
.basecard{ background:linear-gradient(200deg, rgba(16,30,46,0.55), rgba(8,16,26,0.68) 62%); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); }
.incgrid .item, .area{ background:rgba(10,20,32,0.5); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); }
.planner{ background:rgba(8,16,26,0.55); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); }
.planner .row{ background:transparent; }
.field input,.field select,.field textarea{ background:rgba(8,18,30,0.62); }
.form-shell{ position:relative; }

/* ---------- HERO-PORTAL (homepage) ---------- */
.heroportal{ position:relative; min-height:100svh; display:flex; flex-direction:column; justify-content:center; gap:clamp(30px,6vh,64px); padding:clamp(96px,13vh,140px) 0 clamp(40px,7vh,76px); box-sizing:border-box; overflow:hidden; }
.heroportal .headline{ position:relative; z-index:3; text-align:center; padding:0 20px; display:flex; flex-direction:column; align-items:center; }
.heroportal .brandlogo{ width:clamp(120px,15vw,190px); height:auto; filter:brightness(0) invert(1) drop-shadow(0 8px 34px rgba(0,0,0,0.55)); margin-bottom:18px; }
.heroportal h1{ font-size:clamp(44px,7.6vw,104px); text-shadow:0 8px 44px rgba(0,0,0,0.55); }
.heroportal .tagline{ margin-top:22px; font-family:var(--disp); font-weight:700; font-size:clamp(17px,2vw,24px); color:var(--ink); text-shadow:0 2px 20px rgba(0,0,0,0.6); }
.heroportal .tagline .accent{ color:#f6a869; }
.heroportal .eyebrow{ display:inline-flex; align-items:center; gap:10px; padding:9px 20px; border-radius:999px; background:rgba(14,26,42,0.55); border:1px solid rgba(255,255,255,0.22); -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px); font-size:clamp(10.5px,1vw,12.5px); letter-spacing:0.16em; text-transform:uppercase; font-weight:600; color:rgba(255,255,255,0.94); margin-bottom:22px; }
.heroportal .eyebrow i{ width:7px; height:7px; border-radius:50%; background:#f6a869; box-shadow:0 0 0 4px rgba(246,168,105,0.22); font-style:normal; flex:none; }
.heroportal .support{ margin:16px auto 0; max-width:52ch; padding:14px 26px; font-size:clamp(14px,1.4vw,17px); font-weight:300; color:rgba(245,247,250,0.96); background:rgba(10,18,30,0.34); border:1px solid rgba(255,255,255,0.12); border-radius:18px; -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); text-shadow:0 1px 10px rgba(0,0,0,0.5); }
.heroportal .choices{ position:relative; z-index:3; display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,24px); width:min(1060px,calc(100% - 40px)); margin:0 auto; }
.heroportal .choice{ background:rgba(12,28,45,0.28); -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px); border:1px solid rgba(255,255,255,0.18); box-shadow:0 12px 35px rgba(0,0,0,0.15); border-radius:24px; transition:transform 0.35s ease, background 0.35s ease, border-color 0.35s ease; }
.heroportal .choice:hover{ transform:translateY(-4px); background:rgba(12,28,45,0.38); border-color:rgba(255,255,255,0.3); }
.heroportal .choice{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; padding:clamp(20px,3.5vh,40px) 22px clamp(30px,5vh,54px); text-decoration:none; position:relative; }
.heroportal .choice:focus-visible{ outline:3px solid var(--orange); outline-offset:-6px; border-radius:20px; }
.heroportal .choice .t{ font-family:var(--disp); font-weight:800; letter-spacing:0.02em; font-size:clamp(30px,4.6vw,58px); color:#ffffff; text-shadow:0 6px 34px rgba(0,0,0,0.72), 0 2px 8px rgba(0,0,0,0.5); transition:transform .5s cubic-bezier(.2,.7,.2,1), opacity .4s ease; }
.heroportal .choice .d{ font-size:clamp(12px,1.2vw,15px); color:rgba(250,252,255,0.95); text-shadow:0 2px 14px rgba(0,0,0,0.7); }
.heroportal .choice .go{ margin-top:6px; font-size:12.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:9px 20px; border-radius:999px; border:1px solid rgba(255,255,255,0.35); color:var(--ink); background:rgba(10,20,32,0.4); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); transition:background .25s ease, border-color .25s ease; }
.heroportal .choice:hover .go, .heroportal .choice.active .go{ background:var(--orange); border-color:var(--orange); color:#0b0c0e; }
.heroportal .choice.winter .go{ background:var(--orange); border-color:var(--orange); color:#0b0c0e; }
.heroportal .choice.zomer .go{ background:rgba(255,255,255,0.16); border-color:rgba(255,255,255,0.4); color:#ffffff; }
.heroportal .choice.zomer:hover .go, .heroportal .choice.zomer.active .go{ background:rgba(255,255,255,0.92); border-color:rgba(255,255,255,0.92); color:#0b0c0e; }
.heroportal .choice.dim .t{ opacity:0.5; transform:scale(0.95); }
.heroportal .choice.active .t{ transform:scale(1.06); }
.heroportal .chdivider{ display:none; }
@media (max-width:720px){
  .heroportal{ padding-top:max(96px, calc(env(safe-area-inset-top) + 84px)); gap:clamp(24px,4.5vh,40px); }
  .heroportal .choices{ grid-template-columns:1fr; gap:14px; }
  .heroportal .choice{ padding:20px 22px 24px; min-height:44px; }
  .heroportal .brandlogo{ width:104px; margin-bottom:12px; }
  .heroportal .eyebrow{ margin-bottom:16px; letter-spacing:0.14em; }
  .heroportal .support{ padding:12px 18px; margin-top:14px; }
  .heroportal .chdivider{ display:none; }
}

/* ---------- Route door de pagina (fase B) ---------- */
.journey{ position:relative; }
.journeyline{ position:absolute; top:0; bottom:0; left:50%; width:2px; z-index:0; pointer-events:none; }
.journeyline .track{ position:absolute; inset:0; background:linear-gradient(180deg, transparent, rgba(245,247,250,0.14) 6%, rgba(245,247,250,0.14) 94%, transparent); }
.journeyline .fill{ position:absolute; top:0; left:0; right:0; height:0; background:linear-gradient(180deg, var(--orange), #f6a869); box-shadow:0 0 12px rgba(232,112,42,0.8); }
/* eindpunt: klein oranje cirkeltje waar de lijn stopt (voor de aanvraag) */
.journeyline.capped .track{ background:linear-gradient(180deg, transparent, rgba(245,247,250,0.14) 6%, rgba(245,247,250,0.14)); }
.journeyline.capped::after{ content:""; position:absolute; left:50%; bottom:-5px; transform:translateX(-50%); width:10px; height:10px; border-radius:50%; background:var(--orange); box-shadow:0 0 10px rgba(232,112,42,0.85); }
@media (max-width:900px){
  /* lijn in eigen smalle kolom links; content krijgt echte horizontale ruimte */
  .journeyline{ left:14px; }
  .journey .wrap{ padding-left:44px; }
}

/* checkpoint-markers */
.checkpoint{ position:relative; }
.checkpoint::before{ content:""; position:absolute; left:50%; top:-8px; transform:translateX(-50%); width:14px; height:14px; border-radius:50%; background:var(--night-2); border:3px solid var(--orange); box-shadow:0 0 14px rgba(232,112,42,0.7); z-index:2; }
@media (max-width:900px){ .checkpoint::before{ left:14px; } }

/* ---------- Panorama-explorer (skigebieden / activiteiten) ---------- */
.panorama{ position:relative; border-radius:26px; overflow:hidden; border:1px solid rgba(255,255,255,0.16); box-shadow:0 40px 90px rgba(0,0,0,0.45); }
.panomap{ position:relative; }
.panorama .bg{ width:100%; height:auto; aspect-ratio:16/8.2; object-fit:cover; display:block; }
.panorama .shade{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(8,12,20,0.12), rgba(8,12,20,0.55) 92%); }
.panorama svg.routes{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.panorama svg.routes path{ fill:none; stroke-linecap:round; }
.panorama svg.routes .piste{ stroke:var(--ice); stroke-width:2.6; filter:drop-shadow(0 0 5px rgba(127,178,217,0.9)); }
.panorama svg.routes .piste.red{ stroke:#f0876a; filter:drop-shadow(0 0 5px rgba(240,135,106,0.9)); }
.panorama svg.routes .trail{ stroke:var(--orange); stroke-width:2.6; stroke-dasharray:5 8; filter:drop-shadow(0 0 5px rgba(232,112,42,0.85)); }
.panorama svg.routes .water{ stroke:#8fd0e8; stroke-width:3; opacity:0.9; filter:drop-shadow(0 0 6px rgba(143,208,232,0.9)); }
.hotspot{ position:absolute; transform:translate(-50%,-50%); z-index:4; display:flex; flex-direction:column; align-items:center; gap:6px; background:transparent; border:0; cursor:pointer; font-family:var(--body); padding:8px; }
.hotspot .dot{ width:16px; height:16px; border-radius:50%; background:var(--orange); border:3px solid rgba(255,255,255,0.85); box-shadow:0 0 0 6px rgba(232,112,42,0.28), 0 0 18px rgba(232,112,42,0.8); transition:transform .25s ease; }
.hotspot .lbl{ font-size:12px; font-weight:700; letter-spacing:0.06em; color:var(--ink); background:rgba(8,14,24,0.72); border:1px solid rgba(255,255,255,0.22); padding:5px 12px; border-radius:999px; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); white-space:nowrap; }
.hotspot:hover .dot,.hotspot[aria-expanded="true"] .dot{ transform:scale(1.3); }
.hotspot[aria-expanded="true"] .lbl{ background:var(--orange); color:#0b0c0e; border-color:var(--orange); }
.hotspot:focus-visible{ outline:2px solid var(--orange); outline-offset:4px; border-radius:14px; }
/* Ginzling-pin: thuisbasis, geen skigebied */
.hotspot.pin .dot{ width:12px; height:12px; background:#fff; border:3px solid var(--orange); box-shadow:0 0 0 4px rgba(232,112,42,0.25), 0 0 12px rgba(232,112,42,0.6); }
.hotspot.pin .lbl{ border-style:dashed; }
/* Zillertal Arena: verbonden gebieden lichten secundair mee op */
.hotspot.linked .dot{ background:var(--ice); border-color:rgba(255,255,255,0.7); box-shadow:0 0 0 5px rgba(127,178,217,0.28), 0 0 14px rgba(127,178,217,0.8); }
/* selector onder de kaart (mobiel + toegankelijkheid) */
.panoselect{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.panoselect button{ font-family:var(--body); font-size:12.5px; font-weight:600; padding:9px 16px; border-radius:999px; border:1px solid rgba(255,255,255,0.22); background:rgba(10,20,32,0.5); color:rgba(245,247,250,0.85); cursor:pointer; transition:all .2s ease; }
.panoselect button[aria-pressed="true"]{ background:var(--orange); border-color:var(--orange); color:#0b0c0e; }
.panoselect button:focus-visible{ outline:2px solid var(--orange); outline-offset:2px; }
.sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.panoinfo{ position:relative; z-index:5; margin-top:16px; max-width:100%; background:linear-gradient(200deg, rgba(16,30,46,0.72), rgba(8,16,26,0.85) 62%); border:1px solid rgba(255,255,255,0.2); border-radius:18px; padding:18px 22px; -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px); box-shadow:0 20px 50px rgba(0,0,0,0.45); }
.panoinfo h3{ font-size:19px; }
.panoinfo .meta{ font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--ice); font-weight:700; margin-top:2px; }
.panoinfo p{ font-size:13.5px; margin-top:8px; line-height:1.55; }
.panoinfo .morebtn{ margin-top:10px; font-size:12.5px; font-weight:700; color:var(--orange-soft); background:none; border:0; cursor:pointer; padding:0; font-family:var(--body); }
.panodetail{ margin-top:16px; }
.panodetail[hidden]{ display:none; }
.panodetail .pane p{ max-width:75ch; }
@media (max-width:720px){
  /* verhouding NIET wijzigen: hotspots zijn geografisch aan het beeld verankerd.
     In plaats daarvan wordt de kaart een panbaar landschap: vaste bredere kaartbreedte
     (dus ~510px hoog) met horizontale scroll; JS centreert de actieve hotspot. */
  .panorama{ overflow-x:auto; overflow-y:hidden; -webkit-overflow-scrolling:touch; scrollbar-width:thin; }
  .panomap{ width:800px; }
  .hotspot{ padding:12px; }
  .hotspot .lbl{ font-size:11px; padding:4px 10px; }
  .hotspot .dot{ width:14px; height:14px; }
  .panoselect{ gap:6px; }
  .panoselect button{ padding:11px 14px; font-size:12px; min-height:44px; }
}

/* ---------- Vervoer-route (NL → AT) — echte outline-kaart ---------- */
.transportroute{ position:relative; margin-top:18px; flex:1 1 auto; display:flex; align-items:center; justify-content:center; min-height:300px; }
.transportroute .rt-frame{ position:relative; width:100%; aspect-ratio:1138 / 1034; }
.transportroute .route-map{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:block; }
.transportroute .route-overlay{ position:absolute; inset:0; width:100%; height:100%; display:block; overflow:visible; }
.transportroute .route{ fill:none; stroke:var(--orange); stroke-width:5.5; stroke-linecap:round; filter:drop-shadow(0 0 9px rgba(232,112,42,0.6)); }
.transportroute .feed{ fill:none; stroke:rgba(245,247,250,0.46); stroke-width:2; stroke-linecap:round; }
.transportroute .stop{ fill:#fff; }
.transportroute .stop.sm{ fill:rgba(245,247,250,0.95); filter:drop-shadow(0 0 4px rgba(255,255,255,0.35)); }
.transportroute .stop.hubdot{ fill:var(--orange); filter:drop-shadow(0 0 9px rgba(232,112,42,0.95)); }
.transportroute .stop.endpoint{ fill:var(--orange); filter:drop-shadow(0 0 9px rgba(232,112,42,0.9)); }
.transportroute .hubring{ fill:none; stroke:var(--orange); stroke-width:2.4; opacity:0.6; }
.transportroute text{ font-family:var(--body); font-weight:600; letter-spacing:0.06em; }
.transportroute .lbl-land{ font-size:24px; letter-spacing:0.1em; fill:rgba(216,228,248,0.82); paint-order:stroke fill; stroke:rgba(9,18,32,0.9); stroke-width:5px; stroke-linejoin:round; }
.transportroute .lbl-hub{ font-size:29px; letter-spacing:0.01em; fill:var(--orange-soft); font-weight:700; }
.transportroute .lbl-end{ font-size:29px; letter-spacing:0.01em; fill:rgba(245,247,250,0.96); font-weight:700; }
.transportroute .bus{ fill:#fff; filter:drop-shadow(0 0 10px rgba(232,112,42,0.95)); }

/* ---------- Avond / basisgloed (afsluiting) ---------- */
.basecampglow{ position:relative; overflow:hidden; border-radius:26px; border:1px solid rgba(255,255,255,0.16); }
.basecampglow img{ width:100%; aspect-ratio:16/7; object-fit:cover; display:block; }
.basecampglow::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,18,34,0.35), rgba(8,8,14,0.55)), radial-gradient(46% 55% at 50% 62%, rgba(246,168,105,0.4), transparent 70%); }
.basecampglow .cap{ position:absolute; z-index:2; left:0; right:0; bottom:clamp(16px,3vw,34px); text-align:center; }
.basecampglow .cap h3{ font-size:clamp(20px,2.6vw,30px); text-shadow:0 4px 24px rgba(0,0,0,0.7); }

/* kampvuur-flikker (zomer) */
.fireglow{ position:relative; }
.fireglow::after{ content:""; position:absolute; inset:0; pointer-events:none; background:radial-gradient(42% 50% at 50% 66%, rgba(246,150,60,0.42), transparent 72%); animation:flick 2.8s ease-in-out infinite; }
@keyframes flick{ 0%,100%{ opacity:0.85; } 40%{ opacity:1; } 60%{ opacity:0.78; } }

/* sneeuw (subtiel, alleen desktop + motion ok) */
.snowlayer{ position:absolute; inset:0; pointer-events:none; z-index:2; overflow:hidden; }
.snowlayer i{ position:absolute; top:-4%; width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,0.75); animation:snowfall linear infinite; }
@keyframes snowfall{ to{ transform:translateY(108vh) translateX(6vw); } }
@media (max-width:900px){ .snowlayer{ display:none; } }

/* tabs: nooit beide panelen tegelijk (hidden wint van display:grid) */
.incgrid[hidden]{ display:none !important; }
.incgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr)); gap:12px; margin-top:var(--s3); }

/* week-tijdlijn */
.timeline{ display:flex; flex-direction:column; gap:0; margin-top:14px; }
.tstep{ position:relative; padding:12px 0 12px 26px; border-left:2px solid rgba(232,112,42,0.4); }
.tstep:last-child{ border-left-color:transparent; }
.tstep::before{ content:""; position:absolute; left:-7px; top:16px; width:12px; height:12px; border-radius:50%; background:var(--night-2); border:3px solid var(--orange); box-shadow:0 0 10px rgba(232,112,42,0.6); }
.tstep b{ font-family:var(--disp); font-size:14.5px; color:var(--ink); display:block; letter-spacing:0.02em; }
.tstep span{ font-size:13.5px; color:var(--ink-soft); line-height:1.55; display:block; margin-top:2px; max-width:56ch; }

/* editorial fotogrid (zomer) */
.editorialgrid{ display:grid; grid-template-columns:1.6fr 1fr; grid-template-rows:1fr 1fr; gap:14px; }
.editorialgrid figure{ margin:0; border-radius:20px; overflow:hidden; border:1px solid rgba(255,255,255,0.16); position:relative; }
.editorialgrid figure.big{ grid-row:1/3; }
.editorialgrid img{ width:100%; height:100%; object-fit:cover; display:block; min-height:200px; }
.editorialgrid figcaption{ position:absolute; left:0; right:0; bottom:0; padding:26px 16px 12px; font-size:12.5px; color:rgba(245,247,250,0.92); background:linear-gradient(180deg, transparent, rgba(8,10,16,0.72)); }
@media (max-width:720px){ .editorialgrid{ grid-template-columns:1fr; grid-template-rows:auto; } .editorialgrid figure.big{ grid-row:auto; } }

/* sfeerbeeld-placeholder voor bases in ontwikkeling */
.basecard .nophoto{ display:flex; align-items:center; justify-content:center; text-align:center; height:100%; padding:20px; color:rgba(245,247,250,0.55); font-size:12px; letter-spacing:0.14em; text-transform:uppercase; line-height:1.8; background:linear-gradient(200deg, rgba(111,143,95,0.16), rgba(10,20,34,0.85)), repeating-linear-gradient(-45deg, transparent 0 14px, rgba(245,247,250,0.03) 14px 28px); }

/* footer sluit exact aan op de onderkant */
html{ height:100%; }
body{ min-height:100svh; display:flex; flex-direction:column; }
body > main, body > .journey{ flex:1 0 auto; }
footer.site{ margin-top:auto; padding-bottom:env(safe-area-inset-bottom); }

.reduced .world .tint,.reduced .world .alt{ transition-duration:.2s; }
.reduced .snowlayer,.reduced .fireglow::after{ display:none; animation:none; }
@media (prefers-reduced-motion:reduce){ .snowlayer{ display:none; } .fireglow::after{ animation:none; } }