/* BUCHI World · Stadt-Hub + Raeume (Umbau 24.09.2026).
   Look folgt den Vorlagen aus WEBSEITE BUCHI: Schwarz, Rot #e00000,
   Bodoni fuer die grossen Worte, Archivo gesperrt fuer die Oberflaeche. */

/* ---------- Stadt ---------- */
.st-stadt { position: fixed; inset: 0; z-index: 30; overflow: hidden;
  background: #050505; opacity: 0; pointer-events: none;
  transition: opacity .9s var(--ease-cine, ease); touch-action: none; }
.st-stadt.st-sichtbar { opacity: 1; pointer-events: auto; }

.st-flaeche { position: absolute; top: 0; left: 0; will-change: transform;
  cursor: grab; }
.st-flaeche:active { cursor: grabbing; }
.st-flaeche-bild { position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; user-select: none; -webkit-user-select: none; }

/* Knoten: liegt exakt auf dem eingebrannten Ortsschild, Chip nennt die
   Funktion (Play/Video/Tagebuch/Merch/Events/Kontakt) */
.st-knoten { position: absolute; background: none; border: 0; padding: 0;
  cursor: pointer; }
.st-knoten::before { content: ""; position: absolute; inset: -4%;
  border: 1px solid rgba(224, 0, 0, 0); border-radius: 2px;
  background: rgba(224, 0, 0, 0);
  transition: border-color var(--dur-hover, .18s) ease,
              background-color var(--dur-hover, .18s) ease,
              box-shadow var(--dur-hover, .18s) ease; }
.st-knoten:hover::before, .st-knoten:focus-visible::before {
  border-color: rgba(255, 48, 54, .95);
  background: rgba(224, 0, 0, .10);
  box-shadow: 0 0 26px rgba(224, 0, 0, .45), inset 0 0 18px rgba(224, 0, 0, .18); }
.st-knoten:focus-visible { outline: none; }
.st-knoten-debug::before { border-color: #0f0 !important; }
.st-chip { position: absolute; left: 50%; top: 104%;
  transform: translateX(-50%);
  background: #e00000; color: #fff; white-space: nowrap;
  font-family: 'Archivo', system-ui, sans-serif; font-weight: 700;
  font-size: calc(var(--s, 1) * 13px); letter-spacing: .22em;
  text-transform: uppercase;
  padding: calc(var(--s, 1) * 4px) calc(var(--s, 1) * 10px);
  box-shadow: 0 2px 14px rgba(224, 0, 0, .5);
  transition: transform var(--dur-hover, .18s) ease; }
.st-knoten:hover .st-chip, .st-knoten:focus-visible .st-chip {
  transform: translateX(-50%) scale(1.08); }

/* Kopfzeile der Stadt */
.st-bar { position: absolute; inset: 0 0 auto 0; z-index: 3; display: flex;
  align-items: center; gap: 1rem; padding: 1rem 1.5rem 1.6rem;
  background: linear-gradient(rgba(3, 3, 6, .7), transparent);
  pointer-events: none; }
.st-bar > * { pointer-events: auto; }
.st-marke { width: clamp(86px, 7.5vw, 118px); height: auto;
  filter: drop-shadow(0 2px 12px rgba(0, 0, 0, .65)); }
.st-bar-mitte { flex: 1 1 auto; min-width: 0; display: flex; justify-content: center; }
.st-jetzt { max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; background: rgba(8, 8, 12, .55); color: #ddd;
  border: 1px solid rgba(224, 0, 0, .5); padding: .45rem 1rem; font: inherit;
  font-size: .72rem; letter-spacing: .18em; text-transform: uppercase;
  cursor: pointer; }
.st-jetzt-an { color: #fff; border-color: #e00000;
  box-shadow: 0 0 16px rgba(224, 0, 0, .35); }
.st-bar-rechts { display: flex; gap: 1.1rem; align-items: center; }
.st-bar-knopf { background: none; border: 0; padding: .35rem 0; cursor: pointer;
  color: #c9c9c9; font-family: inherit; font-size: .72rem; letter-spacing: .22em;
  text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid transparent; }
.st-bar-knopf:hover, .st-bar-knopf:focus-visible { color: #fff;
  border-bottom-color: #e00000; outline: none; }

.st-hinweis { position: absolute; left: 50%; bottom: 1.1rem; z-index: 3;
  transform: translateX(-50%); margin: 0; color: #bbb; font-size: .72rem;
  letter-spacing: .28em; text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8); pointer-events: none; }

/* ---------- Laden (echter Fortschritt ueber dem Vorlagen-Bild) ---------- */
.st-laden { position: fixed; inset: 0; z-index: 60; background: #050505;
  overflow: hidden; opacity: 1; transition: opacity .6s ease; }
.st-laden.st-weg { opacity: 0; pointer-events: none; }
.st-laden-deckel { position: absolute; background: rgba(8, 6, 8, .92);
  filter: blur(1px); }
.st-laden-balken { position: absolute; background: rgba(20, 16, 18, .9);
  border: 1px solid rgba(224, 0, 0, .35); overflow: hidden; }
.st-laden-stand { position: absolute; inset: 0; transform-origin: 0 50%;
  transform: scaleX(0); background: linear-gradient(90deg, #7a0000, #ff3036);
  box-shadow: 0 0 18px rgba(255, 48, 54, .8); }
.st-laden-zahl { position: absolute; display: grid; place-items: center;
  color: #fff; font-family: 'Archivo', system-ui, sans-serif;
  font-size: calc(var(--s, 1) * 21px); letter-spacing: .12em; }

/* ---------- Raum-Overlay ---------- */
#raum[hidden] { display: none !important; }
.st-raum { position: absolute; inset: 0; z-index: 10; overflow: hidden;
  opacity: 0; transition: opacity .45s ease; }
.st-raum.st-raum-auf { opacity: 1; }
.st-raum-bg { position: absolute; inset: 0; background-size: cover;
  background-repeat: no-repeat; background-color: #050505; }
.st-raum-bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(rgba(0, 0, 0, .45), transparent 30%,
    transparent 62%, rgba(0, 0, 0, .55)); pointer-events: none; }
/* Deck-/Kino-Raeume: die eingebrannte Menue-Zeile der Vorlage tritt in
   die Ambience zurueck (sie ist Bild, keine Bedienung) */
[data-ort="events"] .st-raum-bg::after,
[data-ort="kontakt"] .st-raum-bg::after,
[data-ort="videos"] .st-raum-bg::after {
  background: linear-gradient(rgba(0, 0, 0, .82) 0, rgba(0, 0, 0, .5) 7%,
    transparent 24%, transparent 62%, rgba(0, 0, 0, .55)); }
.st-raum-inhalt { position: absolute; inset: 0; z-index: 2; display: flex;
  flex-direction: column; justify-content: center; padding: 5.2rem 1.4rem 1.4rem;
  pointer-events: none; }
.st-raum-inhalt > * { pointer-events: auto; }
.st-raum-zu { position: absolute; top: 1rem; right: 1.1rem; z-index: 5;
  width: 2.6rem; height: 2.6rem; border-radius: 50%;
  border: 1px solid #444; background: rgba(8, 8, 10, .6); color: #eee;
  font: inherit; font-size: 1.1rem; cursor: pointer; }
.st-raum-zu:hover, .st-raum-zu:focus-visible { color: #fff;
  border-color: #e00000; outline: none; }

/* Glas-Panel — fast deckend, damit eingebrannte Vorlagen-Elemente
   darunter nicht durchscheinen */
.st-panel { width: min(92vw, 34rem); max-height: calc(100vh - 7rem);
  display: flex; flex-direction: column; gap: .9rem;
  background: rgba(6, 7, 10, .88); border: 1px solid rgba(255, 255, 255, .13);
  padding: 1.5rem 1.7rem 1.6rem; box-shadow: 0 22px 60px rgba(0, 0, 0, .55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.st-badge { margin: 0; color: #ff3036; font-size: .66rem; font-weight: 700;
  letter-spacing: .34em; text-transform: uppercase; }
.st-titel { margin: 0; font-weight: 600; font-size: clamp(1.7rem, 3.4vw, 2.6rem);
  letter-spacing: .05em; text-transform: uppercase; line-height: 1.05; }
.st-untertitel { margin: -.4rem 0 0; color: #c9c9c9; font-size: .8rem;
  letter-spacing: .3em; }

/* Musik */
.st-panel-musik { align-self: flex-start; margin-left: clamp(0rem, 4vw, 4rem); }
.st-rail { display: flex; gap: .7rem; overflow-x: auto; padding-bottom: .4rem;
  scrollbar-width: thin; flex: 0 0 auto; }
.st-cover { flex: 0 0 auto; width: 4.6rem; background: none; border: 0;
  padding: 0; cursor: pointer; color: #aaa; font-family: inherit; }
.st-cover img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block;
  border: 2px solid transparent; }
.st-cover-an img { border-color: #e00000;
  box-shadow: 0 0 16px rgba(224, 0, 0, .45); }
.st-cover-name { display: block; margin-top: .3rem; font-size: .58rem;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.st-release-kopf { display: flex; gap: .8rem; align-items: baseline;
  flex: 0 0 auto; }
.st-release-kopf strong { font-size: 1.05rem; letter-spacing: .06em;
  text-transform: uppercase; }
.st-release-kopf span { color: #999; font-size: .72rem; letter-spacing: .18em;
  text-transform: uppercase; }
.st-tracks { list-style: none; margin: 0; padding: 0; overflow-y: auto;
  min-height: 0; flex: 1 1 auto; }
.st-track { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto;
  gap: .7rem; width: 100%; text-align: left; align-items: baseline;
  background: none; border: 0; border-bottom: 1px solid rgba(255, 255, 255, .07);
  color: #ddd; padding: .55rem .2rem; font: inherit; font-size: .88rem;
  cursor: pointer; }
.st-track:hover, .st-track:focus-visible { color: #fff;
  background: rgba(224, 0, 0, .09); outline: none; }
.st-track-an { color: #ff3036; }
.st-track-an .st-track-titel { color: #ff3036; }
.st-track-nr { color: #777; font-size: .72rem; }
.st-track-titel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-track-dauer { color: #888; font-size: .74rem; }
.st-transport { display: flex; align-items: center; gap: .7rem; flex: 0 0 auto; }
.st-tk { background: rgba(10, 10, 14, .6); border: 1px solid #3a3a3a;
  color: #ddd; min-width: 2.4rem; height: 2.4rem; padding: 0 .6rem;
  font: inherit; font-size: .95rem; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; gap: .3rem; }
.st-tk:hover, .st-tk:focus-visible { color: #fff; border-color: #e00000;
  outline: none; }
.st-tk-gross { min-width: 3rem; height: 3rem; border-color: #e00000;
  color: #fff; background: rgba(224, 0, 0, .18); font-size: 1.1rem; }
.st-zeit { color: #999; font-size: .72rem; letter-spacing: .08em;
  white-space: nowrap; }
.st-fortschritt { flex: 1 1 auto; height: 4px; background: rgba(255,255,255,.14);
  cursor: pointer; }
.st-fortschritt-stand { height: 100%; transform-origin: 0 50%;
  transform: scaleX(0); background: #ff3036; }

/* Kino */
.st-schirm { position: absolute; background: #000; overflow: hidden;
  box-shadow: 0 0 60px rgba(224, 0, 0, .25); }
.st-video { position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: #000; cursor: pointer; }
.st-video-play { position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%); width: 4.6rem; height: 4.6rem;
  border-radius: 50%; border: 2px solid #ff3036; color: #fff;
  background: rgba(5, 5, 8, .6); font-size: 1.5rem; cursor: pointer;
  transition: opacity .25s ease; }
.st-video-play:hover { background: rgba(224, 0, 0, .4); }
.st-video-play-weg { opacity: 0; pointer-events: none; }
.st-video-leiste { position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: center; gap: .45rem; padding: .5rem .6rem;
  background: linear-gradient(transparent, rgba(0, 0, 0, .82));
  opacity: 0; transition: opacity .25s ease; }
.st-schirm:hover .st-video-leiste, .st-schirm:focus-within .st-video-leiste {
  opacity: 1; }
.st-video-leiste .st-tk { min-width: 2rem; height: 2rem; font-size: .8rem; }
.st-skip span[data-i18n] { font-size: .62rem; letter-spacing: .2em;
  text-transform: uppercase; }
.st-video-titel { margin-left: auto; color: #ccc; font-size: .68rem;
  letter-spacing: .22em; text-transform: uppercase; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.st-programm { position: absolute; left: 50%; bottom: 1.2rem;
  transform: translateX(-50%); display: flex; gap: .6rem; max-width: 94vw;
  overflow-x: auto; padding: .3rem; z-index: 3; }
.st-programm-karte { flex: 0 0 auto; width: 9.5rem; background: rgba(6,7,10,.85);
  border: 1px solid rgba(255, 255, 255, .14); padding: 0 0 .4rem; color: #ccc;
  font: inherit; font-size: .6rem; letter-spacing: .14em;
  text-transform: uppercase; cursor: pointer; }
.st-programm-karte img { width: 100%; aspect-ratio: 16/9; object-fit: cover;
  display: block; margin-bottom: .35rem; }
.st-programm-karte:hover, .st-programm-karte:focus-visible { color: #fff;
  border-color: #e00000; outline: none; }
.st-karte-an { border-color: #e00000; color: #fff;
  box-shadow: 0 0 14px rgba(224, 0, 0, .4); }
.st-schirm-mobil { position: relative; width: min(96vw, 46rem);
  aspect-ratio: 16/9; margin: 0 auto; }

/* Deck-Panel: liegt exakt ueber der eingebrannten UI des Vorlagenbilds */
.st-deck { position: absolute; display: flex; flex-direction: column;
  gap: .8rem; padding: calc(var(--s, 1) * 22px);
  background: #04050a; border: 1px solid rgba(255, 255, 255, .1);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .65); overflow-y: auto;
  scrollbar-width: thin; }
.st-deck .st-titel { font-size: calc(var(--s, 1) * 44px); }
.st-deck .st-untertitel { margin: -.3rem 0 .3rem; }

/* Tagebuch */
[data-ort="tagebuch"] .st-raum-bg::after {
  background: linear-gradient(rgba(0,0,0,.35), transparent 26%,
    transparent 80%, rgba(0,0,0,.4)); }
.st-kenburns { animation: st-kenburns 36s ease-in-out infinite alternate; }
@keyframes st-kenburns {
  from { transform: scale(1); } to { transform: scale(1.06); } }
.st-tagebuch-zeile { position: absolute; left: 50%; bottom: 1.4rem;
  transform: translateX(-50%); margin: 0; color: #ddd; font-size: .72rem;
  letter-spacing: .3em; text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, .9); }

/* Merch */
.st-panel-unten { align-self: center; margin-top: auto; width: min(96vw, 62rem);
  background: rgba(6, 7, 10, .82); }
.st-merch-rail { display: flex; gap: .8rem; overflow-x: auto;
  padding-bottom: .3rem; }
.st-merch-karte { flex: 0 0 auto; width: clamp(7rem, 14vw, 10.5rem);
  aspect-ratio: 1; background: #fff; border: 1px solid rgba(255,255,255,.12);
  padding: .35rem; cursor: pointer; overflow: hidden; }
.st-merch-karte img { width: 100%; height: 100%; object-fit: contain;
  display: block; transition: transform .3s ease; }
.st-merch-karte:hover img { transform: scale(1.05); }
.st-merch-karte:hover, .st-merch-karte:focus-visible {
  border-color: #e00000; outline: none; }
.st-merch-zeile { margin: 0; color: #bbb; font-size: .78rem;
  letter-spacing: .06em; }
.st-merch-zeile a { color: #ff3036; text-decoration: none; }
.st-merch-zeile a:hover { text-decoration: underline; }
.st-lupe { position: absolute; inset: 0; z-index: 8; display: grid;
  place-items: center; background: rgba(2, 2, 4, .88); cursor: zoom-out; }
.st-lupe img { max-width: 92vw; max-height: 88vh; object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .7); }

/* Events */
.st-panel-events { align-self: flex-start; margin-left: clamp(0rem, 4vw, 4rem); }
.st-chips { display: flex; gap: .6rem; flex-wrap: wrap; }
.st-schalter { background: rgba(8, 8, 12, .5); color: #c4c4c4;
  border: 1px solid #3a3a3a; padding: .5rem 1.05rem; font: inherit;
  font-size: .64rem; letter-spacing: .24em; text-transform: uppercase;
  cursor: pointer; }
.st-schalter:hover, .st-schalter:focus-visible { color: #fff;
  border-color: #e00000; outline: none; }
.st-schalter-an { color: #fff; border-color: #e00000;
  background: rgba(224, 0, 0, .16); }
.st-events-liste { display: flex; flex-direction: column; overflow-y: auto;
  min-height: 0; }
.st-event { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr) auto;
  gap: .8rem; align-items: baseline; padding: .8rem .2rem;
  border-bottom: 1px solid rgba(255, 255, 255, .08); }
.st-event-datum { color: #999; font-size: .74rem; letter-spacing: .14em; }
.st-event-stadt { font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; }
.st-event-ort { color: #999; font-size: .74rem; letter-spacing: .1em;
  text-transform: uppercase; }
.st-leer { margin: .4rem 0; color: #bbb; font-size: .88rem; }
.st-cta { display: inline-block; background: rgba(8, 8, 12, .42); color: #ddd;
  border: 1px solid rgba(224, 0, 0, .55); padding: .55rem 1.1rem; font: inherit;
  font-size: .68rem; letter-spacing: .22em; text-transform: uppercase;
  cursor: pointer; text-decoration: none; width: max-content; }
.st-cta:hover, .st-cta:focus-visible { color: #fff;
  background: rgba(224, 0, 0, .18); border-color: #e00000; outline: none; }

/* Kontakt */
.st-panel-kontakt { align-self: flex-start; margin-left: clamp(0rem, 5vw, 5rem); }
.st-form { display: flex; flex-direction: column; gap: .65rem;
  overflow-y: auto; min-height: 0; }
.st-form input, .st-form textarea { background: rgba(12, 12, 16, .8);
  border: 1px solid #3a3a3a; color: #eee; padding: .7rem .85rem; font: inherit;
  font-size: .88rem; resize: vertical; }
.st-form input:focus-visible, .st-form textarea:focus-visible {
  outline: none; border-color: #e00000; }
.st-form input::placeholder, .st-form textarea::placeholder { color: #888;
  letter-spacing: .1em; }
.st-cta-voll { width: 100%; text-align: center; padding: .8rem 1rem; }
.st-form-ergebnis { margin: .2rem 0 0; color: #cfd3da; font-size: .84rem; }
.st-sozial { display: inline-flex; gap: .5rem; margin-top: .55rem;
  flex-wrap: wrap; }
.st-kopie { width: 100%; margin-top: .5rem; background: rgba(12,12,16,.9);
  border: 1px solid #3a3a3a; color: #eee; padding: .6rem .7rem; font: inherit;
  font-size: .82rem; resize: vertical; }
.st-kontakt-fuss { margin: 0; color: #8f949c; font-size: .74rem; }

/* ---------- Fassungen ---------- */
.stadt-aktiv #kopf, .stadt-aktiv #hinweisScroll, .stadt-aktiv #skip,
.stadt-aktiv #fortschritt, .stadt-aktiv #ankunft, .stadt-aktiv #reise {
  display: none !important; }

@media (max-width: 760px) {
  .st-panel { width: 100%; align-self: stretch; margin: auto 0 0;
    max-height: 72vh; padding: 1.1rem 1rem 1.2rem; }
  .st-panel-musik, .st-panel-events, .st-panel-kontakt { margin-left: 0; }
  .st-raum-inhalt { padding: 4.6rem .6rem .6rem; }
  .st-bar { padding: .8rem 1rem 1.2rem; }
  .st-bar-rechts { gap: .7rem; }
  .st-bar-knopf { font-size: .62rem; letter-spacing: .16em; }
  .st-hinweis { display: none; }
  .st-programm { position: static; transform: none; margin-top: .8rem;
    max-width: 100%; }
  .st-video-leiste { opacity: 1; }
  .st-raum-inhalt { justify-content: flex-end; }
  [data-ort="videos"] .st-raum-inhalt { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .st-stadt, .st-raum, .st-laden { transition: none; }
  .st-kenburns { animation: none; }
  .st-chip, .st-merch-karte img { transition: none; }
}