/* ==========================================================================
   Explosionsansicht «Was wir verwalten» (Angebotsseite)
   Ergänzt /assets/css/styles.css (Farben, DM Sans, Eyebrow, Buttons) und wird nur
   auf /angebot/ geladen. Jeder Selektor beginnt mit dem Block .xp (oder einem
   Modifikator .xp--*), damit nichts in die übrigen Stile hineinwirkt.
   Ohne JS oder WebGL2: Leistungen als Textliste.
   .xp--webgl  zeigt Bühne mit Canvas, Linien und mitlaufenden Labels
   .xp--live   koppelt die Szene an den Scroll (Bühne klebt unter dem Seitenkopf)
   .xp--still  ruhige Fassung bei «Bewegung reduzieren»
   ========================================================================== */

/* ---------- Dunkle Sektion wie .owners und .build ---------- */
.xp { position: relative; background: var(--navy-950); color: #c3d2e6; }
.xp h2, .xp h3 { color: #fff; }
.xp :focus-visible { outline-color: var(--cyan); }
.xp ::selection { background: rgba(32, 193, 242, .3); color: #fff; }

/* ---------- Grundfassung als Textliste ---------- */
.xp .xp__sticky { position: relative; padding: var(--section) 0; }
.xp .xp__sticky::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(900px 640px at 50% 56%, rgba(40, 116, 187, .22), transparent 70%),
    linear-gradient(180deg, rgba(6, 23, 48, 0) 70%, rgba(3, 12, 26, .55) 100%);
}
.xp .xp__inner { position: relative; }
.xp .xp__text h2 { font-size: clamp(2rem, 3.4vw, 2.85rem); }
.xp .xp__lead { max-width: 520px; margin: 18px 0 0; font-size: 1.02rem; line-height: 1.6; }
.xp .xp__lead-tip { display: none; } /* Hinweis auf die Auswahl nur, wenn das Haus zu sehen ist */
.xp--webgl .xp__lead-tip { display: inline; }
.xp .xp__canvas, .xp .xp__lines, .xp .xp__detail, .xp .xp__hint, .xp .xp__end, .xp .xp__progress { display: none; }

.xp .xp__labels {
  position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 32px;
  max-width: calc(var(--container) + 2 * var(--gutter)); margin: 44px auto 0; padding: 0 var(--gutter); list-style: none;
}
.xp .xp-label { padding: 22px 0 28px; border-top: 1px solid rgba(255, 255, 255, .12); }
.xp .xp-label__meta {
  display: flex; align-items: center; gap: 10px; margin: 0;
  font-size: .7rem; font-weight: 600; line-height: 1.4; letter-spacing: .16em; text-transform: uppercase; color: rgba(195, 210, 230, .66);
}
.xp .xp-label__num { color: var(--cyan); letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.xp .xp-label__title {
  margin: 6px 0 0; font-size: 1.08rem; font-weight: 600; line-height: 1.28; letter-spacing: -.012em; color: #fff;
  hyphens: manual; transition: color .35s var(--ease);
}
.xp .xp-label__desc { margin: 8px 0 0; font-size: .93rem; line-height: 1.55; color: #c3d2e6; }

@media (max-width: 860px) { .xp .xp__labels { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .xp .xp__labels { grid-template-columns: 1fr; } }

/* ---------- WebGL-Bühne ---------- */
.xp--live { height: 320vh; }
.xp--webgl .xp__sticky { height: 100vh; height: 100svh; min-height: min(560px, calc(100vh - var(--header-h))); min-height: min(560px, calc(100svh - var(--header-h))); padding: 0; overflow: hidden; }
.xp--live .xp__sticky {
  position: sticky; top: var(--header-h);
  height: calc(100vh - var(--header-h)); height: calc(100svh - var(--header-h));
}
.xp--webgl .xp__canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
.xp--webgl .xp__lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }

.xp--webgl .xp__inner { position: absolute; inset: 0; display: flex; align-items: center; pointer-events: none; }
.xp--webgl .xp__text { width: min(360px, 29vw); pointer-events: auto; }
.xp--live .xp__progress { display: flex; align-items: center; gap: 18px; margin-top: 34px; }
.xp .xp__count { display: inline-flex; align-items: baseline; gap: 8px; font-size: .78rem; font-weight: 600; letter-spacing: .12em; color: rgba(195, 210, 230, .6); font-variant-numeric: tabular-nums; }
.xp .xp__count b { font-size: 1.04rem; font-weight: 600; letter-spacing: .04em; color: #fff; }
.xp .xp__track { position: relative; flex: 1; max-width: 170px; height: 2px; border-radius: 2px; background: rgba(255, 255, 255, .1); overflow: hidden; }
.xp .xp__bar { position: absolute; inset: 0; background: linear-gradient(90deg, var(--cyan), var(--blue-400)); transform-origin: left center; transform: scaleX(0); }

/* Labels laufen per projizierter 3D-Position mit (Position und Deckkraft setzt das Skript) */
.xp--webgl .xp__labels { position: absolute; inset: 0; display: block; max-width: none; margin: 0; padding: 0; pointer-events: none; }
.xp--webgl .xp-label {
  position: absolute; left: 0; top: 0; width: var(--xp-label-w, 300px);
  padding: 0; border: 0; opacity: 0; pointer-events: none; will-change: transform, opacity;
}
.xp--webgl .xp-label.is-shown { pointer-events: auto; cursor: pointer; }
.xp--webgl .xp-label:focus-visible { outline-offset: 8px; border-radius: 8px; }
.xp--webgl .xp-label__desc { display: none; }
.xp--live .xp-label:not(.is-active):not(.is-hover) .xp-label__title { color: rgba(255, 255, 255, .64); }
.xp--live .xp-label:not(.is-active):not(.is-hover) .xp-label__meta { color: rgba(195, 210, 230, .5); }
.xp--webgl .xp-label.is-hover .xp-label__title { color: var(--cyan-soft); }
@media (min-width: 1000px) {
  .xp--live .xp-label.is-active .xp-label__desc { display: block; animation: xp-in .5s var(--ease) both; }
}
@keyframes xp-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Feine Hinweislinien vom Label zum Geschoss */
.xp .xp-line { fill: none; stroke: rgba(195, 210, 230, .4); stroke-width: 1; transition: stroke .35s var(--ease); }
.xp .xp-line.is-on { stroke: var(--cyan); }
.xp .xp-dot { fill: var(--navy-950); stroke: rgba(222, 234, 246, .85); stroke-width: 1.2; transition: fill .35s, stroke .35s; }
.xp .xp-dot.is-on { fill: var(--cyan); stroke: var(--cyan); }
.xp .xp-halo { fill: rgba(32, 193, 242, .2); }

/* Hinweis zu Beginn und Abschluss: in der Labelspalte */
.xp--webgl .xp__hint, .xp--webgl .xp__end {
  display: block; position: absolute; left: var(--xp-col-x, 62%); top: 50%; width: var(--xp-label-w, 300px);
  margin: 0; transform: translateY(-50%); opacity: 0; pointer-events: none;
}
.xp--still .xp__hint, .xp--still .xp__end { display: none; }
.xp .xp__hint { font-size: .8rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--cyan-soft); }
.xp--webgl .xp__hint { display: flex; align-items: center; gap: 14px; }
.xp .xp__hint-line { flex: none; width: 1px; height: 34px; background: linear-gradient(var(--cyan), rgba(32, 193, 242, 0)); transform-origin: top; animation: xp-cue 2.4s var(--ease) infinite; }
@keyframes xp-cue { 0% { transform: scaleY(0); opacity: 1; } 60% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.xp .xp__end-title { margin: 0; font-size: clamp(1.5rem, 2.2vw, 1.95rem); font-weight: 600; line-height: 1.15; letter-spacing: -.025em; color: #fff; }
.xp .xp__end-text { margin: 12px 0 0; font-size: .98rem; line-height: 1.55; }

/* Ruhige Fassung: alle Labels mit Erklärung */
.xp--still .xp__sticky { min-height: 900px; }
.xp--still .xp-label__desc { display: block; }

/* ---------- Schmale Bildschirme ---------- */
@media (max-width: 999.98px) {
  .xp--webgl .xp__inner { align-items: flex-start; padding-top: 24px; }
  .xp--webgl .xp__text { width: 100%; max-width: 560px; }
  .xp--webgl .xp__text .eyebrow { margin-bottom: 10px; }
  .xp--webgl .xp__text h2 { font-size: clamp(1.5rem, 5.6vw, 2rem); }
  .xp--webgl .xp__lead { display: none; }
  .xp--live .xp__progress { margin-top: 14px; }
  .xp--webgl .xp-label__floor { display: none; }
  .xp--webgl .xp__detail .xp-label__floor { display: inline; }
  .xp--webgl .xp-label__meta { font-size: .66rem; }
  .xp--webgl .xp-label__title { margin-top: 2px; font-size: .86rem; line-height: 1.25; }
  .xp--webgl .xp-label__desc, .xp--still .xp-label__desc { display: none; }
  .xp--still .xp__sticky { min-height: 640px; }

  /* Unten rechts schwebt die Chat-Blase des Online-Portals (56px, 14px über dem Rand):
     Detailkarte, Hinweis und Abschluss bleiben darüber, damit nichts verdeckt wird. */
  .xp--webgl .xp__detail {
    display: block; position: absolute; left: 16px; right: 16px; bottom: 82px; min-height: 118px;
    padding: 16px 18px 18px; border-radius: 16px;
    background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
    -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
    opacity: 0; transition: opacity .4s var(--ease);
  }
  .xp--webgl .xp__detail.is-shown { opacity: 1; }
  .xp .xp__detail-title { margin: 6px 0 0; font-size: 1.02rem; font-weight: 600; line-height: 1.25; color: #fff; }
  .xp .xp__detail-desc { margin: 6px 0 0; font-size: .9rem; line-height: 1.5; }
  .xp--webgl .xp__hint, .xp--webgl .xp__end { left: 20px; right: 20px; top: auto; bottom: 96px; width: auto; transform: none; }
  .xp--webgl .xp__end { text-align: center; }
  .xp--webgl .xp__hint { justify-content: center; }
  .xp .xp__end-title { font-size: 1.4rem; }
  .xp .xp__end-text { font-size: .9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .xp .xp__hint-line { animation: none; }
  .xp .xp-label__title, .xp .xp-line, .xp .xp-dot, .xp--webgl .xp__detail { transition: none; }
}