/* immersionx.css — reconciled (reverse-merge)
   - Bewahrt alle vorhandenen Styles; letzte Regeln gewinnen
   - Fix: rechter Rand / Layout-Shift → overflow-x:hidden + optionale stabile Scrollbar-Gasse
   - Full-bleed für Hero & Grid-Images auch innerhalb .container
   - Map + Marker, Popup (Video 40% → Popup = Video + 30px), Gridcard Overlay
   - Dotnav „Contact“ ausblenden
   - Typo-Scales, Journey Stops (default/compact/inline)
   - Globaler h3→lead Spacing-Fix
*/

/* ==== Map basics ==== */
#ix-map{ width:100%; height:460px; margin:0; padding:0; border:none; border-radius:16px; overflow:hidden; }
.ix-marker{
  width:16px; height:16px; border-radius:50%;
  background:#86e1ff; border:2px solid #0b0b0c;
  box-shadow:0 0 0 6px rgba(134,225,255,.15), 0 0 22px rgba(134,225,255,.45), 0 0 42px rgba(134,225,255,.25);
}
.mapboxgl-popup-content{
  background:#111217; color:#e8ecf3;
  border:1px solid rgba(134,225,255,.25);
  border-radius:12px;
  font:500 14px/1.4 Inter,system-ui,sans-serif;
  /* Wichtig: 15px links/rechts → Popup = Video + 30px */
  padding:8px 15px 10px;
}
.mapboxgl-ctrl-top-right .mapboxgl-ctrl-group button{ padding:10px }

/* Start/End (pink) + User (yellow) */
.ix-marker.ix-start,.ix-marker.ix-end{
  background:#ff4ccf; border:2px solid #150413;
  box-shadow:0 0 0 6px rgba(255,76,207,.15), 0 0 22px rgba(255,76,207,.45), 0 0 42px rgba(255,76,207,.30);
}
.ix-marker.ix-user{
  background:#ffd84d; border:2px solid #12100a;
  box-shadow:0 0 0 6px rgba(255,216,77,.18), 0 0 22px rgba(255,216,77,.45), 0 0 42px rgba(255,216,77,.30);
}

/* ==== Theme / Layout ==== */
:root{
  --bg:#0b0b0c; --fg:#f5f6f7; --muted:#aeb2b8;
  --accent:#86e1ff; --accent2:#ff3cc7;
  --card:#131317; --bd:rgba(255,255,255,.10);
  --pad:clamp(16px,3vw,42px);
  --radius:18px;
}
*{ box-sizing:border-box }
html{ scroll-behavior:auto }
body{ margin:0; color:var(--fg); background:var(--bg); font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Noto Sans",Arial,sans-serif; line-height:1.5; position:relative; z-index:0; }

/* Soft Glow Layer */
body::before{
  content:"";
  position:fixed;
  inset:-10%;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0) 0, rgba(0,0,0,0) 60vh, rgba(12,14,18,.20) 60vh, rgba(12,14,18,.38) 100%),
    radial-gradient(1200px 800px at 50% 10%, rgba(134,225,255,.10) 0%, rgba(134,225,255,.05) 28%, rgba(8,10,14,0) 62%),
    radial-gradient(900px 600px at 82% 32%, rgba(255,60,199,.08) 0%, rgba(255,60,199,.04) 28%, rgba(8,10,14,0) 62%);
  backdrop-filter: blur(.2px);
}
@media (prefers-reduced-motion:reduce){ body::before{ backdrop-filter:none; } }

/* Artists – local glow */
#artists{ position:relative; }
#artists::before{
  content:""; position:absolute; inset:0 0 auto 0; height:420px; pointer-events:none; z-index:-1;
  background: radial-gradient(600px 360px at 50% 0%, rgba(134,225,255,.06) 0%, rgba(134,225,255,0) 70%);
}

/* Containers & Sections */
.container{ max-width:1200px; margin:0 auto; padding:0 var(--pad) }

/* Global (halved) vertical rhythm */
.section{
  padding:clamp(30px, 4.5vh, 60px) 0;
  scroll-margin-top:64px; scroll-snap-align:start;
}
main{ scroll-snap-type:y proximity }
@media (max-width: 600px){ .section{ padding:clamp(18px, 3.2vh, 36px) 0; } }

/* Headings & copy */
.kicker{ letter-spacing:.14em; text-transform:uppercase; font-size:.78rem; color:var(--muted) }
.title{ font-family:"Syncopate",Inter,sans-serif; font-weight:700; line-height:1.06; font-size:clamp(1.8rem,5vw,3.6rem) }
.lead{ font-size:clamp(1rem,1.6vw,1.2rem); color:#e8eaf0 }

/* Neon / Buttons / Cards */
.neon{
  color:var(--fg);
  text-shadow:
    0 0 14px rgba(134,225,255,.45),
    0 0 28px rgba(134,225,255,.25),
    0 0 48px rgba(134,225,255,.15);
}
.btn{
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.9rem 1.2rem; border-radius:999px;
  color:#fff; border:0; text-decoration:none;
  font-weight:600; cursor:pointer;
  transition: box-shadow .25s, border-color .25s, transform .2s;
}
.btn:hover{ filter:brightness(.97) }
.btn-outline{ background:transparent; color:var(--fg); border:0; backdrop-filter:blur(8px); box-shadow:none; }
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.02));
  border:1px solid var(--bd);
  border-radius:var(--radius);
  padding:clamp(16px,2.2vw,28px);
}

/* Dot Nav */
.dotnav{
  position:fixed; right:16px; top:50%;
  transform:translateY(-50%);
  display:flex; flex-direction:column; gap:12px;
  z-index:10000; pointer-events:auto;
}
.dotnav a{
  width:10px; height:10px; border-radius:50%;
  background:rgba(255,255,255,.25); display:block; position:relative;
  outline-offset:4px;
}
.dotnav a.active,.dotnav a:hover{ background:var(--accent) }
.dotnav a::after{
  content:attr(aria-label);
  position:absolute; right:18px; top:50%; transform:translateY(-50%);
  color:#d8dde4; background:#101115; border:1px solid var(--bd);
  padding:.25rem .5rem; border-radius:8px; white-space:nowrap;
  opacity:0; pointer-events:none; transition:.18s;
}
.dotnav a:hover::after{ opacity:1 }
.dotnav a[aria-label="Contact"]{ display:none !important; }

/* ===== Hero ===== */
.hero{
  min-height:100svh;
  display:grid; place-items:center;
  position:relative; overflow:hidden; padding:0;
}
.hero video,.hero .poster{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; filter:contrast(1.05) brightness(.9);
}
.hero .overlay{
  position:absolute; inset:0;
  background:
    radial-gradient(60% 60% at 50% 50%,
      rgba(0,0,0,0) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.78) 100%),
    linear-gradient(180deg,rgba(11,11,12,0),rgba(11,11,12,.75));
}
.herocontent{
  position:relative; text-align:center; padding:0 var(--pad);
  max-width:900px; margin-inline:auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  min-height:65svh; overflow:visible;
}

/* Logo */
.logo{
  font-family:"Syncopate",Inter,sans-serif; letter-spacing:.06em; margin:0; line-height:1;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.logo svg{
  display:block; margin:0 auto;
  width:min(86vw,760px); height:auto; max-height:42vh;
  will-change: filter, transform;
}
.logo:hover svg,.logo:focus svg,.logo.is-active svg{
  filter:
    drop-shadow(0 0 6px var(--accent))
    drop-shadow(0 0 14px #ffffff)
    drop-shadow(0 0 28px var(--accent));
  transform:scale(1.04);
}
.logo:active svg{ filter:
    drop-shadow(0 0 6px var(--accent))
    drop-shadow(0 0 14px #ffffff)
    drop-shadow(0 0 28px var(--accent)); transform:scale(1.04); }
@media (hover:hover){
  .logo:hover svg, .logo:focus svg{ transition: filter .12s, transform .12s; }
}
@media (hover:none){
  .logo:hover svg, .logo:focus svg{ filter:none; transform:none; }
}
@media (max-width:480px){ .logo svg{ width:88vw; max-height:38vh; } }

/* CTA under logo */
.hero .cta{
  display:flex; gap:12px; justify-content:center; flex-wrap:wrap;
  margin-top:clamp(12px,2vw,18px);
}

/* Safe area */
@supports (padding: max(0px)){
  .hero{
    padding-top:max(0px, env(safe-area-inset-top));
    padding-bottom:max(0px, env(safe-area-inset-bottom));
  }
}

/* Grid */
.grid{ display:grid; gap:clamp(18px,2.5vw,36px) }
@media (min-width:900px){
  .grid-2{ grid-template-columns:1.1fr 1fr }
  .grid-2.rev{ grid-template-columns:1fr 1.1fr }
}

/* Media containers */
.ratio{
  position:relative; width:100%; padding-top:56.25%;
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--bd);
}
.ratio>iframe,.ratio>img,.ratio>video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
}

/* Timeline (optional) */
.timeline{
  display:flex; gap:32px; overflow-x:auto; padding:8px; scroll-snap-type:x mandatory;
}
.timeline::-webkit-scrollbar{ height:8px }
.timeline::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:8px }
.ti{
  min-width:280px; scroll-snap-align:start;
  background:linear-gradient(180deg,rgba(134,225,255,.08),rgba(255,60,199,.06));
  border:1px solid rgba(134,225,255,.22);
  border-radius:14px; padding:14px 16px;
}
.ti .dot{
  width:10px; height:10px; border-radius:50%; background:var(--accent);
  box-shadow:0 0 0 6px rgba(134,225,255,.15),0 0 28px rgba(134,225,255,.35);
  display:inline-block; margin-right:10px;
}

/* Row-snap Cards */
.row-snap{
  display:flex; gap:16px; overflow-x:auto; padding-bottom:6px; scroll-snap-type:x mandatory;
  -ms-overflow-style:none; scrollbar-width:none;
  cursor: grab;
}
.row-snap::-webkit-scrollbar{ display:none }
.row-snap.dragging{ cursor: grabbing; }
.row-snap .card{ min-width:84%; scroll-snap-align:start; cursor:pointer }
@media (min-width:700px){ .row-snap .card{ min-width:48% } }
@media (min-width:1100px){ .row-snap .card{ min-width:31% } }
.card img{ width:100%; height:280px; object-fit:cover; border-radius:12px }

/* Glitch heading */
.glitch{ position:relative; display:inline-block }
.glitch::before,.glitch::after{
  content:attr(data-text); position:absolute; top:0; left:0;
  filter:blur(.6px); mix-blend-mode:screen; pointer-events:none;
}
.glitch::before{ color:var(--accent); transform:translate(1px,0) }
.glitch::after{ color:var(--accent2); transform:translate(-1px,0) }
@keyframes jitter{
  0%,100%{ transform:translate(0,0) }
  20%{ transform:translate(.4px,-.4px) }
  40%{ transform:translate(-.6px,.3px) }
  60%{ transform:translate(.3px,.6px) }
  80%{ transform:translate(-.4px,-.2px) }
}
.glitch,.glitch::before,.glitch::after{ animation:jitter 2s infinite steps(2) }
@media (prefers-reduced-motion:reduce){ .glitch,.glitch::before,.glitch::after{ animation:none } }

/* Modal */
.modal{
  position:fixed; inset:0; background:rgba(0,0,0,0);
  display:none; align-items:center; justify-content:center; border:0; z-index:10050;
}
.modal[open]{ display:flex }
.modal .panel{
  background:var(--card); border:1px solid var(--bd); border-radius:16px;
  max-width:min(900px,92vw); max-height:80vh; overflow:auto; padding:22px;
  box-shadow:0 20px 60px rgba(0,0,0,.4);
}
.modal .close{ position:sticky; top:0; display:flex; justify-content:flex-end; margin:-10px -10px 6px 0 }
.modal .close button{
  background:transparent; color:#fff; border:1px solid var(--bd);
  border-radius:10px; padding:6px 10px; cursor:pointer;
}
.modal .title{
  color:#fff;
  text-shadow:0 0 8px rgba(134,225,255,.5),0 0 20px rgba(134,225,255,.35),0 0 40px rgba(134,225,255,.25);
}

/* Footer */
footer{ padding:40px 0; border-top:1px solid var(--bd); color:#c9cdd3 }
.small{ font-size:.9rem; color:#c3c7ce }
.hr{ height:1px; background:linear-gradient(90deg,rgba(255,255,255,.12),rgba(255,255,255,0)); border:0; margin-top:18px }

/* Journey: Stop list (CSS counter) */
.ix-stops{
  counter-reset: stop;
  columns:2; column-gap:32px; margin:.6rem 0 clamp(18px, 3.2vw, 40px);
  list-style:none; padding:0;
}
@media (max-width:800px){ .ix-stops{ columns:1 } }
.ix-stops li{
  position:relative; padding-left:2.2rem; break-inside:avoid; margin:.30rem 0 .35rem;
  -webkit-column-break-inside: avoid; page-break-inside: avoid;
  counter-increment: stop;
}
.ix-stops li::before{
  content: counter(stop, decimal-leading-zero);
  position:absolute; left:0; top:.10rem;
  display:inline-grid; place-items:center; width:1.6rem; height:1.6rem; border-radius:999px;
  background:#0b0b0c; color:#e6f7ff; font-weight:700; font-size:.9rem;
  border:1px solid rgba(134,225,255,.45);
  box-shadow:0 0 0 6px rgba(134,225,255,.12),
             0 0 22px rgba(134,225,255,.35),
             0 0 42px rgba(134,225,255,.2);
}
.ix-stops a{
  color:inherit; text-decoration:none; border-bottom:1px dashed rgba(134,225,255,.35);
  line-height:1.35;
  transition:text-shadow .2s, border-color .2s, color .2s;
}
.ix-stops a:hover,.ix-stops a:focus,.ix-stops a.is-hover{
  color:#fff;
  text-shadow:0 0 6px rgba(134,225,255,.6),
              0 0 16px rgba(255,60,199,.35),
              0 0 28px rgba(134,225,255,.35);
  border-bottom-color:var(--accent);
  outline:none;
}
.ix-stops li.is-hover::before{
  transform:scale(1.08);
  box-shadow:0 0 0 8px rgba(134,225,255,.18),
             0 0 34px rgba(134,225,255,.6),
             0 0 72px rgba(134,225,255,.35);
}
.ix-stops + .title{ margin-top: clamp(16px, 2.6vw, 36px); }

/* Marker pulse */
@keyframes ixPulse{
  0%{ transform:scale(1);
      box-shadow:0 0 0 6px rgba(134,225,255,.15),
                 0 0 22px rgba(134,225,255,.45),
                 0 0 42px rgba(134,225,255,.25); }
  50%{ transform:scale(1.16);
       box-shadow:0 0 0 10px rgba(134,225,255,.22),
                  0 0 34px rgba(134,225,255,.65),
                  0 0 72px rgba(134,225,255,.35); }
  100%{ transform:scale(1);
        box-shadow:0 0 0 6px rgba(134,225,255,.15),
                   0 0 22px rgba(134,225,255,.45),
                   0 0 42px rgba(134,225,255,.25); }
}
.ix-marker.is-hover{ animation:ixPulse 1.1s ease-in-out infinite }
.ix-marker.is-active{ animation:ixPulse .9s ease-in-out 1 }

/* A11y */
.visually-hidden{
  position:absolute !important; width:1px; height:1px;
  padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0);
  white-space:nowrap; border:0;
}

/* Visibility toggles */
.only-mobile { display:block }
.only-desktop { display:none }
@media (min-width:900px){
  .only-mobile{ display:none }
  .only-desktop{ display:block }
}

/* Header image */
.ix-headerimg{
  margin:.8rem 0 1rem; border-radius:var(--radius);
  overflow:hidden; border:1px solid var(--bd);
}
.ix-headerimg>img{ display:block; width:100%; height:auto }
@media (min-width: 900px) { #artists .ix-headerimg { display: none !important; } }

/* Grid card (mobile) with overlay teaser */
.ix-gridcard{
  position:relative; margin:.8rem 0 1rem;
  border-radius:var(--radius); overflow:hidden; border:1px solid var(--bd);
}
.ix-gridcard>img{ width:100%; height:auto; display:block }

/* Overlay */
.ix-gridcard-body{
  position:absolute; inset:auto 0 0 0; padding:14px;
  background:none; backdrop-filter:blur(1.5px);
  color:#fff; z-index:0; overflow:hidden;
}
.ix-gridcard-body::before{
  content:"";
  position:absolute; inset:-14px 0 0 0;
  background:linear-gradient(180deg,
    rgba(0,0,0,0) 0%,
    rgba(10,12,16,.58) 42%,
    rgba(10,12,16,.82) 100%);
  pointer-events:none; z-index:-1;
  border-bottom-left-radius: var(--radius);
  border-bottom-right-radius: var(--radius);
}
.ix-gridcard.is-open .ix-gridcard-body{
  inset:0; height:100%;
  overflow:auto !important;
  -webkit-overflow-scrolling:touch; touch-action: pan-y;
}
.ix-gridcard.is-open .ix-gridcard-body::before{
  inset:0;
  background:linear-gradient(180deg,
    rgba(10,12,16,.54) 0%,
    rgba(10,12,16,.68) 35%,
    rgba(10,12,16,.82) 100%);
  border-bottom-left-radius: 0; border-bottom-right-radius: 0;
}
/* fine scrollbars */
.ix-gridcard.is-open .ix-gridcard-body::-webkit-scrollbar{ width:6px }
.ix-gridcard.is-open .ix-gridcard-body::-webkit-scrollbar-track{ background:transparent }
.ix-gridcard.is-open .ix-gridcard-body::-webkit-scrollbar-thumb{
  background:rgba(255,255,255,.25); border-radius:8px;
}
.ix-gridcard.is-open .ix-gridcard-body{ scrollbar-width:thin; scrollbar-color: rgba(255,255,255,.25) transparent; }

/* Text contrast in overlay */
.ix-gridcard-body .title,
.ix-gridcard-body h3,
.ix-gridcard-body .lead{
  text-shadow:
    0 1px 2px rgba(0,0,0,.45),
    0 2px 18px rgba(0,0,0,.55);
}

/* Clamp + Toggle */
.ix-clamp{
  display:-webkit-box; -webkit-line-clamp:6; -webkit-box-orient:vertical;
  overflow:hidden; white-space:pre-line;  /* default: respect DB line breaks */
}
.ix-clamp[aria-expanded="true"],
.ix-clamp[data-ix-open="true"]{
  -webkit-line-clamp:unset;
  overflow:visible;
  display:block;
}
/* JS adds .ix-collapsible */
.ix-clamp.ix-collapsible{ cursor:n-resize; }
.ix-clamp.ix-collapsible[aria-expanded="true"],
.ix-clamp.ix-collapsible[data-ix-open="true"]{ cursor:s-resize; }

.ix-gridcard.is-open .ix-clamp{ -webkit-line-clamp:unset; overflow:visible }
.ix-gridcard-toggle{ margin-top:.35rem }
.ix-gridcard.is-open .ix-gridcard-toggle{
  border-color:var(--accent);
  box-shadow:0 0 10px rgba(134,225,255,.45),
             0 0 24px rgba(255,60,199,.35),
             0 0 46px rgba(134,225,255,.35);
}

/* Row-snap width limit */
.section .row-snap{
  width:100%; max-width:1100px; margin-left:auto; margin-right:auto;
  padding-left:6px; padding-right:6px;
}

/* Anti-select / callout for tap targets */
.logo, .logo *, .btn, .btn *, .hero, .hero *{
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation;
}

/* Map popup media wrapper */
.mapboxgl-popup { max-width: 300px; }
.mapboxgl-popup-content{ box-sizing:border-box; padding:10px; overflow:visible; }
.ix-pop-media{ border-radius: 10px; overflow: hidden; }
.ix-popup-video{ display:block; width:100%; height:auto; max-width:100%; object-fit:cover; }

/* Map CTA unter map */
.ix-map-cta{ display:flex; gap:.75rem; align-items:center; padding:.5rem .25rem; }
.ix-map-cta .small{ opacity:.8 }

/* Optional: Accuracy Circle */
.ix-accuracy{ position:absolute; inset:0; pointer-events:none; }

/* ===== Typography breakpoints ===== */

/* ≤480px */
@media (max-width: 480px){
  .ix-gridcard-body .title{
    font-size: clamp(1.20rem, 6.2vw, 1.60rem);
    line-height:1.10; margin: 12px 0 10px;
  }
  .ix-gridcard-body h3{
    font-size: clamp(1.00rem, 4.1vw, 1.20rem);
    line-height:1.22; margin: 0 0 .30rem;
  }
  .ix-gridcard-body p,
  .ix-gridcard-body .lead{
    font-size: clamp(0.88rem, 3.8vw, 1.02rem);
    line-height: 1.52; margin:.45rem 0 0;
  }
  .ix-gridcard-toggle{ display:none !important; }
  .ix-gridcard-body{ cursor:pointer; }
  .ix-gridcard:not(.is-open) .ix-gridcard-body{
    max-height: 35%;
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0));
            mask-image: linear-gradient(to bottom, rgba(0,0,0,1) 70%, rgba(0,0,0,0));
    transition:max-height .24s ease;
  }
}

/* 768–1023px */
@media (min-width: 768px) and (max-width: 1023.98px){
  #artists .row-snap .card .title,
  #artists .row-snap .card h3,
  #artists .row-snap .card .lead,
  #artists .row-snap .card p{ font-size: inherit; line-height: inherit; }

  .section .title{
    font-size: clamp(3.0rem, 7.6vw, 5.6rem);
    line-height: 1.08; margin: 0 0 .6rem;
  }
  .section h3{
    font-size: clamp(1.6rem, 3.4vw, 2.2rem);
    line-height: 1.20; margin: 0 0 .45rem;
  }
  .section p,
  .section .lead{
    font-size: clamp(1.10rem, 2.2vw, 1.40rem);
    line-height: 1.50; margin: .55rem 0 0;
  }
}

/* ≥1024px (+ cap ≥1440px) */
@media (min-width: 1024px){
  #artists .row-snap .card .title,
  #artists .row-snap .card h3,
  #artists .row-snap .card .lead,
  #artists .row-snap .card p{ font-size: inherit; line-height: inherit; }

  .section .title{
    font-size: clamp(2.4rem, 3.6vw, 4.2rem);
    line-height: 1.06; margin: 0 0 .7rem;
  }
  .section h3{
    font-size: clamp(1.35rem, 2.1vw, 1.9rem);
    line-height: 1.18; margin: 0 0 .55rem;
  }
  .section p,
  .section .lead{
    font-size: clamp(1.0rem, 1.2vw, 1.25rem);
    line-height: 1.48; margin: .65rem 0 0;
  }
  .ix-gridcard-body .title{ font-size: clamp(1.1rem, 1.6vw, 1.6rem); margin:.6rem 0 .4rem; }
  .ix-gridcard-body h3{ font-size: clamp(1rem, 1.3vw, 1.3rem); }
  .ix-gridcard-body p, .ix-gridcard-body .lead{ font-size: clamp(.95rem, 1.05vw, 1.1rem); }

  .neon{ text-shadow: 0 0 10px rgba(134,225,255,.35), 0 0 20px rgba(134,225,255,.20); }
}
@media (min-width: 1440px){
  .section .title{ font-size: clamp(2.4rem, 3.2vw, 3.8rem); }
  .section h3{ font-size: clamp(1.25rem, 1.6vw, 1.8rem); }
  .section p, .section .lead{ font-size: clamp(1rem, .95vw, 1.2rem); }
}

/* Misc */
.mapboxgl-popup-content button.btn{ cursor:pointer }

/* ==== Add-ons ============================================================ */

/* Mobile-only “Get there” link */
.get-there { display:none; font-weight:600; text-decoration:none; border-bottom:1px dashed rgba(134,225,255,.45); }
@media (max-width: 540px){ .get-there{ display:inline } }

/* Focus ring */
:where(a,button,[role="button"],.btn,.dotnav a):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
  border-radius:10px;
}

/* Mapbox tweaks */
.mapboxgl-canvas { outline: none; }
.mapboxgl-popup-tip { display:none; }
.mapboxgl-popup { pointer-events:auto; }

/* Motion reduction */
@media (prefers-reduced-motion: reduce){
  * { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition: none !important; }
  .glitch, .glitch::before, .glitch::after { animation: none !important; }
  .ix-marker.is-hover, .ix-marker.is-active { animation: none !important; }
}

/* Small phones: smaller card media */
@media (max-width: 360px){
  .card img{ height:220px; }
}

/* Print */
@media print{
  body{ background:#fff; color:#000; }
  .hero, .dotnav, #ix-map, .modal, .row-snap, .ix-headerimg, .ix-gridcard { display:none !important; }
  .container, .section{ padding:0 !important; }
  a{ color:#000; text-decoration:underline; }
}

/* Utilities */
img, video, iframe { max-width:100%; height:auto; }
.ix-gridcard-body p, .ix-gridcard-body .lead { overflow-wrap:anywhere; }

/* ===== Journey: compact stop list (digits only) ===== */
.ix-stops--compact{
  display:flex; flex-wrap:wrap; gap:10px 12px; align-items:center;
  list-style:none; margin:.6rem 0 1rem; padding:0; counter-reset: stop;
}
.ix-stops--compact li{ counter-increment: stop; margin:0; padding:0; break-inside:auto; }
.ix-stops--compact li::before{ content:none !important; display:none !important; }
.ix-stops--compact .ix-stop-link{
  inline-size:32px; block-size:32px; border-radius:999px; display:inline-grid; place-items:center;
  text-decoration:none; color:#e6f7ff; background:#0b0b0c; border:1px solid rgba(134,225,255,.45);
  font:700 .9rem/1 Inter,system-ui,sans-serif;
  box-shadow:0 0 0 6px rgba(134,225,255,.12), 0 0 22px rgba(134,225,255,.35), 0 0 42px rgba(134,225,255,.2);
  outline:none;
}
.ix-stops--compact .ix-stop-link::before{ content: counter(stop, decimal-leading-zero); }
.ix-stops--compact .ix-stop-link:hover,
.ix-stops--compact .ix-stop-link:focus,
.ix-stops--compact .ix-stop-link.is-hover{
  color:#fff; border-color:var(--accent);
  box-shadow:0 0 0 8px rgba(134,225,255,.18), 0 0 34px rgba(134,225,255,.6), 0 0 72px rgba(134,225,255,.35);
}
.ix-stops--compact li:first-child .ix-stop-link,
.ix-stops--compact li:last-child .ix-stop-link{
  background:#150413; border-color:#ff4ccf;
  box-shadow:0 0 0 6px rgba(255,76,207,.15), 0 0 22px rgba(255,76,207,.45), 0 0 42px rgba(255,76,207,.30);
}

/* Popup meta links */
.ix-popup-meta{
  display:flex; gap:.5rem; align-items:center; flex-wrap:wrap;
  color:#cfe5f6; font-size:.84rem;
}
.ix-popup-meta a{
  display:inline-block; padding:.18rem .55rem; border-radius:999px; text-decoration:none;
  color:#eaf7ff; background:rgba(134,225,255,.10); border:1px solid rgba(134,225,255,.35); font-weight:600;
}
.ix-popup-meta a:hover{ background:rgba(134,225,255,.18); border-color:rgba(134,225,255,.55); }
.ix-popup-meta .get-there      { display:inline-block; }
.ix-popup-meta .get-there-alt  { display:none; }
@media (hover:none) and (pointer:coarse){ .ix-popup-meta .get-there-alt{ display:none; } }
@media (min-width:768px){
  .ix-popup-meta .get-there      { display:none; }
  .ix-popup-meta .get-there-alt  { display:inline-flex; gap:.5rem; }
}

/* Mapbox close button */
.mapboxgl-popup-close-button{
  color:#eaf7ff; font-size:18px; top:4px; right:6px;
  padding:.15rem .3rem; line-height:1;
  text-shadow: 0 0 6px rgba(134,225,255,.55);
}
.mapboxgl-popup-close-button:hover{ color:#fff; }

/* always hide [hidden] */
[hidden]{ display:none !important; }
/* Ausnahme: Dotnav darf nie verschwinden (JS bug-safety) */
.dotnav[hidden]{ display:flex !important; }  /* ↑ [FIX] */

#ix-8w-overlay{
  position:fixed; inset:0; z-index:10020; background:rgba(0,0,0,.9);
  display:grid; place-items:center;
}
html[data-maplayout="8thwall"] .ix-stops{ display:none !important; }

/* Journey section container reset */
#journey-gothenburg-route .container{ display:block; }
#journey-gothenburg-route .ix-headerimg{ margin-top:.8rem; }

/* ---- Read-more cues for .ix-clamp ---- */
.ix-clamp{ position:relative; }
.ix-clamp.ix-has-more:not([data-ix-open="true"]):not([aria-expanded="true"]){ cursor:pointer; }
/* soft fade */
.ix-clamp.ix-has-more:not([data-ix-open="true"]):not([aria-expanded="true"])::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2.2rem; pointer-events:none;
  background:linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(10,12,16,.55) 65%, rgba(10,12,16,.85) 100%);
}
/* cue: arrows */
.ix-clamp.ix-has-more[data-ix-cue="arrows"]:not([data-ix-open="true"]):not([aria-expanded="true"])::after{
  content:""; position:absolute; left:50%; bottom:8px; width:12px; height:12px;
  border-left:2px solid rgba(234,247,255,.9); border-top:2px solid rgba(234,247,255,.9);
  transform:translateX(-50%) rotate(45deg);
  box-shadow:0 0 10px rgba(134,225,255,.5); opacity:.9; pointer-events:none; animation:ixNudgeUp 1.8s ease-in-out infinite;
}
@keyframes ixNudgeUp{ 0%,100%{ transform:translateX(-50%) translateY(0) rotate(45deg) } 50%{ transform:translateX(-50%) translateY(-2px) rotate(45deg) } }
/* cue: lines */
.ix-clamp.ix-has-more[data-ix-cue="lines"]:not([data-ix-open="true"]):not([aria-expanded="true"])::after{
  content:""; position:absolute; left:50%; bottom:8px; width:44px; height:12px; transform:translateX(-50%); pointer-events:none; opacity:.85;
  background:
    linear-gradient(#eaf7ff,#eaf7ff) center 100%/36px 1px no-repeat,
    linear-gradient(#eaf7ff,#eaf7ff) center 6px/28px 1px no-repeat,
    linear-gradient(#eaf7ff,#eaf7ff) center 1px/20px 1px no-repeat;
  filter: drop-shadow(0 0 8px rgba(134,225,255,.45));
}

/* ================== GLOBAL spacing fix ================== */
.section h3{ margin-bottom:0; }
.section h3 + .lead{ margin-top:.20rem !important; }
.lead > :first-child{ margin-top:0; }
.lead{ display:flow-root; }
.lead.ix-clamp{ white-space:normal; }
.lead.ix-clamp > *{ white-space:pre-line; }

/* Logo X: default 34% opacity */
.logo svg{
  opacity:.34;                      /* = 66% transparent */
  transition:opacity .28s ease;
}
.logo:hover svg,
.logo:focus-within svg,
.logo a:hover svg,
.logo a:focus-visible svg,
.logo:active svg,
.logo a:active svg,
.logo.is-opaque svg{
  opacity:1;
}

/* ---- alte compact/inline Zusatzregeln (beibehalten) ---- */
.ix-stops.ix-stops--compact { list-style:none; padding:0; margin:.6rem 0 0 0; columns:auto; column-width: 260px; }
.ix-stops li { break-inside:avoid; margin:0 0 .35rem 0; }
.ix-stops li a { display:block; text-decoration:none; color:#cfe8ff; border-bottom:1px dotted rgba(207,232,255,.35); padding:.12rem .2rem; }

/* Stopliste: alles in einer Zeile, scrollbar bei Überlauf */
.ix-stops { 
  display: flex; 
  flex-wrap: nowrap; 
  gap: 14px; 
  overflow-x: auto; 
  padding: .35rem 0 0 0; 
  margin: .35rem 0 0 0;
}
.ix-stops li { list-style: none; white-space: nowrap; }
.ix-stops li::marker { content: none; }
.ix-stops li a.ix-stop-link {
  display: inline-block;
  white-space: nowrap;
  text-decoration: none;
  color: #cfe8ff;
  border-bottom: 1px dotted rgba(207,232,255,.35);
  padding: .12rem .2rem;
}

/* --- Journey stops: INLINE one-line items with colored number circle --- */
.ix-stops--inline{
  display:flex;
  flex-wrap:nowrap;
  gap:14px;
  align-items:center;
  overflow-x:auto;
  padding:.35rem 0 0 0;
  margin:.35rem 0 0 0;
}
.ix-stops--inline li{
  list-style:none;
  display:flex;
  align-items:center;
  gap:.45rem;
  white-space:nowrap;
}
.ix-stops--inline li::marker{ content:none; }
.ix-stops--inline li::before{
  content: attr(data-n);
  display:inline-grid; place-items:center;
  inline-size:1.6rem; block-size:1.6rem;
  border-radius:999px; flex:0 0 auto;
  background:#0b0b0c; color:#e6f7ff; font:700 .9rem/1 Inter,system-ui,sans-serif;
  border:1px solid rgba(134,225,255,.45);
  box-shadow:0 0 0 6px rgba(134,225,255,.12), 0 0 22px rgba(134,225,255,.35), 0 0 42px rgba(134,225,255,.2);
}
.ix-stops--inline a.ix-stop-link{
  display:inline-block;
  white-space:nowrap;
  text-decoration:none;
  color:#cfe8ff;
  border-bottom:1px dotted rgba(207,232,255,.35);
  padding:.12rem .2rem;
}

/* ==== Hard overrides to neutralize old compact/pink edge-cases ==== */
.ix-stops--compact { columns:auto; column-width:auto; display:initial; }
.ix-stops--compact li:first-child .ix-stop-link,
.ix-stops--compact li:last-child  .ix-stop-link{
  background:#0b0b0c !important;
  border-color:rgba(134,225,255,.45) !important;
  box-shadow:0 0 0 6px rgba(134,225,255,.12), 0 0 22px rgba(134,225,255,.35), 0 0 42px rgba(134,225,255,.2) !important;
  color:#e6f7ff !important;
}
.ix-stops.ix-stops--inline{ columns:auto !important; counter-reset:none !important; }
.ix-stops.ix-stops--inline li{ counter-increment: none !important; }
.ix-stops.ix-stops--inline li::before{ content: attr(data-n) !important; }

/* --- INLINE stop list (wrapping badges) --- */
.ix-stops.ix-stops--inline{
  display:flex;
  flex-wrap:wrap;
  gap:10px 14px;
  list-style:none;
  padding:.35rem 0 0 0;
  margin:.35rem 0 0 0;
  overflow:visible;
}
.ix-stops--inline li{
  display:inline-grid;
  grid-auto-flow:column;
  align-items:center;
  gap:8px;
  line-height:1.25;
}
.ix-stops--inline li::before{
  content: attr(data-n);
  display:inline-grid; place-items:center;
  inline-size:28px; block-size:28px;
  border-radius:999px;
  background:#0b0b0c; color:#e6f7ff;
  font:700 .85rem/1 Inter,system-ui,sans-serif;
  border:1px solid rgba(134,225,255,.45);
  box-shadow: 0 0 0 6px rgba(134,225,255,.12), 0 0 22px rgba(134,225,255,.35), 0 0 42px rgba(134,225,255,.20);
}
.ix-stops--inline .ix-stop-link{
  display:inline-block;
  white-space:nowrap;
  text-decoration:none;
  color:#cfe8ff;
  padding:.28rem .6rem;
  border-radius:999px;
  background:rgba(134,225,255,.08);
  border:1px solid rgba(134,225,255,.35);
}
.ix-stops--inline .ix-stop-link:hover,
.ix-stops--inline .ix-stop-link:focus{
  color:#fff; border-color:var(--accent);
  box-shadow:0 0 0 8px rgba(134,225,255,.18),
             0 0 34px rgba(134,225,255,.6),
             0 0 72px rgba(134,225,255,.35);
}

/* Wichtig: alte „scrollbare“ Baseregel neutralisieren */
.ix-stops{
  overflow:visible;
  flex-wrap:wrap;
}

/* Social follow chips */
.social-follow{
  display:flex; flex-wrap:wrap; gap:12px; margin:.6rem 0 0; padding:0; list-style:none;
}
.social-follow .social{
  --ring: rgba(134,225,255,.18);
  display:inline-flex; align-items:center; gap:.6rem;
  padding:.6rem .9rem; border-radius:999px; text-decoration:none;
  color:#eaf7ff; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));
  border:1px solid var(--bd); box-shadow:0 0 0 6px var(--ring);
  transition:transform .18s ease, box-shadow .22s ease, border-color .22s ease, background .22s ease;
}
.social-follow .social:hover{
  transform:translateY(-1px);
  border-color:var(--accent);
  box-shadow:
    0 0 10px rgba(134,225,255,.35),
    0 0 24px rgba(255,60,199,.25),
    0 0 46px rgba(134,225,255,.25);
}
.social-follow svg{ width:20px; height:20px; flex:none; filter:drop-shadow(0 0 6px rgba(134,225,255,.35)); }
.social-follow span{ white-space:nowrap; }

/* leichte Marken-Tönung */
.social-follow .instagram{ --ring: rgba(225,48,108,.20); }
.social-follow .facebook { --ring: rgba(24,119,242,.20); }
.social-follow .tiktok   { --ring: rgba(105,201,208,.20); }
.social-follow .x        { --ring: rgba(255,255,255,.16); }

/* sehr kleine Screens: nur Icons */
@media (max-width: 420px){
  .social-follow .social span{ display:none; }
  .social-follow .social{ padding:.55rem .6rem; }
}

/* --- B) Dimmer an die Karte hängen --- */
.ix-gridcard::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:1;
  opacity:0;
  transition:opacity .24s ease;
  background:linear-gradient(180deg,
    rgba(10,12,16,.54) 0%,
    rgba(10,12,16,.68) 35%,
    rgba(10,12,16,.82) 100%);
}
.ix-gridcard.is-open::after{ opacity:1; }
.ix-gridcard-body{ z-index:2; }
.ix-gridcard.is-open .ix-gridcard-body::before{ background:none; opacity:0; }

/* Mobile popup bounds */
@media (max-width: 600px){
  .mapboxgl-popup{ max-width:96vw !important; }
  .mapboxgl-popup-content{
    max-height:82svh;
    overflow:auto;                 /* Scroll wenn höher als Viewport */
    -webkit-overflow-scrolling:touch;
    touch-action: pan-y;           /* Scroll-Gesten nicht von der Map „gefressen“ */
  }
  .ix-popup-video{
    max-height:70svh;
    object-fit:contain;            /* volle Controls sichtbar */
  }
}

.ix-pop-dragging .ix-pop-h1{ cursor:grabbing; }

/* ==== Map basics (Update block, behält 40%-Video + Popup=Video+30) ==== */
.mapboxgl-popup{ max-width:96vw; pointer-events:auto; }
.mapboxgl-popup-tip{ display:none; }
.mapboxgl-popup-content{
  --pop-video-w: clamp(200px, 40vw, 220px);
  width: calc(var(--pop-video-w) + 30px);
  background:#111217; color:#e8ecf3;
  border:1px solid rgba(134,225,255,.25); border-radius:12px;
  font:500 14px/1.4 Inter,system-ui,sans-serif;
  padding:8px 15px 10px;
  box-sizing:border-box; overflow:visible;
}
.ix-pop-media{ border-radius:10px; overflow:hidden; display:flex; justify-content:center; align-items:center; }
.ix-popup-video{ display:block; width:var(--pop-video-w); max-width:100%; height:auto; object-fit:contain; margin:6px auto; }

/* Popup meta (Desktop-Alt-Link) */
@media (min-width:768px){ .ix-popup-meta .get-there{ display:none; } .ix-popup-meta .get-there-alt{ display:inline-flex; gap:.5rem; } }

/* ========= FINAL FIX BLOCK (wins last) ========= */
/* 1) Kein horizontaler Overflow ⇒ kein später rechter Rand */
html, body{
  max-width:100%;
  overflow-x:hidden;
  /* Für Desktop-Browser mit breiten Scrollbars → Layout stabil, optional: */
  scrollbar-gutter: stable both-edges;
}

/* 2) Full-bleed für Hero/Media, falls diese in .container liegen */
.container .hero,
.container .ix-headerimg,
.container .ix-gridcard{
  margin-left: calc(-1 * var(--pad));
  margin-right: calc(-1 * var(--pad));
  width: calc(100% + (var(--pad) * 2));
}

/* 3) Dotnav bleibt randbündig, kollidiert nicht mit Overflow */
.dotnav{ right:16px; }
@supports (right: max(0px)){
  /* Auf großen Viewports: am äußeren Rand, auf kleinen: 16px */
  .dotnav{ right: max(16px, calc((100vw - 1200px)/2 + 16px)); }
}

/* 4) Sicherstellen, dass zeilenweise Scroller nicht über 100vw gehen */
.row-snap{ contain: layout paint; }

/* 5) Media als Block-Elemente (verhindert Inline-Gaps) */
img, video, canvas{ display:block; }


/* Popup überall greifbar; beim Drag visuelles Feedback */
.mapboxgl-popup-content,
.ix-pop-media,
.ix-pop-h1 { cursor: grab; }

.ix-pop-dragging,
.ix-pop-dragging * { cursor: grabbing !important; user-select: none; }

/* Bei Touch: vertikal scrollen im Popup weiterhin erlauben */
@media (max-width: 600px){
  .mapboxgl-popup-content{ touch-action: pan-y; }
}


/* --- Pretty links inside the Follow/Artist modal -------------------------------- */
.modal #artistBody {
  /* sorgt für angenehme Zeilenhöhe und etwas Luft */
  line-height: 1.5;
}

/* alle Links im Modal als moderne „Pills“ */
.modal #artistBody a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .42rem .62rem;
  border-radius: 10px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.10);
  text-decoration: none;
  color: #EAF7FF;
  transition: background .18s ease, border-color .18s ease, transform .12s ease, box-shadow .18s ease;
  /* sorgt für ordentlichen Abstand, auch wenn im CMS mit <br> getrennt wurde */
  margin-top: .35rem;
}

/* erstes Element braucht keinen top-Margin */
.modal #artistBody :is(a, p, ul, ol):first-child a { margin-top: 0; }

/* Hover/Focus States */
.modal #artistBody a:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.22);
  transform: translateY(-1px);
}
.modal #artistBody a:focus-visible {
  outline: 2px solid #9DD1FF;
  outline-offset: 2px;
}

/* „extern“-Hinweis (dezent) */
.modal #artistBody a::after {
  content: "↗";
  font-size: .9em;
  opacity: .65;
  margin-left: .2rem;
}

/* besiegt das alte 90s-Blau/Lila */
.modal #artistBody a:visited { color: #EAF7FF; }

/* wenn Links per <br> getrennt sind, die Brüche verstecken (wir nutzen die Abstände oben) */
.modal #artistBody a + br { display: none; }

/* Listen im Modal (falls vorhanden) kompakt & ohne Bullets */
.modal #artistBody ul {
  list-style: none;
  padding: 0;
  margin: .2rem 0 0 0;
}
.modal #artistBody ul li + li { margin-top: .35rem; }

/* Falls jemand .ix-social im Modal verwendet: leicht aufhübschen */
.modal #artistBody .ix-social {
  filter: none;
}
.modal #artistBody .ix-social .ix-icon {
  width: 18px; height: 18px;
  opacity: .9;
}

/* Journey: Stop-Liste 70% kleiner */
.ix-stops.ix-stops--inline { 
  font-size: 0.7em; 
}
/* Kill the legacy number badges in the stop list */
.ix-stops li::before,
.ix-stops [data-n]::before,
.ix-stops .ix-badge,
.ix-stops [class*="badge"] {
  content: none !important;
  display: none !important;
}

/* Platz links wieder freigeben (falls vorher fürs Badge reserviert) */
.ix-stops li {
  padding-left: 0 !important;
  margin-left: 0 !important;
}

/* Optional: falls in der CSS Variablen für Badge-Größe benutzt wurden */
.ix-stops { --n-size: 0 !important; --n-gap: 0 !important; }

/* Gestapelte Stopliste: jeder Landmark genau eine Zeile */
.ix-stops--stacked{
  list-style: none;
  padding: 0;
  margin: .6rem 0;
  display: block;
  columns: 1;            /* sicherheitshalber */
}
.ix-stops--stacked li{
  margin: .30rem 0;
  padding-left: 0;       /* keine Nummern-Badges einrücken */
  white-space: normal;   /* Zeilenumbruch in den Links erlauben, falls lang */
}
.ix-stops--stacked li::before{ content: none !important; }
.ix-stops--stacked .ix-stop-link{
  display: block;
  text-decoration: none;
  color: #cfe8ff;
  border-bottom: 1px dotted rgba(207,232,255,.35);
  padding: .12rem .2rem;
}

.dotnav{ opacity:0; pointer-events:none; transition:opacity .25s ease; }
.dotnav.is-visible{ opacity:1; pointer-events:auto; }