/* str8up 3D-Hero
   Hintergrund transparent → Farbe/Bild kommt von der YOOtheme-Section.
   Mobil: Text oben, Modell darunter. Ab Breakpoint: Text links, Modell rechts. */

.su-glass {
  --su-text-w: 55%;
  --su-overlap: 8%;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: center;
}

.su-glass__text {
  position: relative;
  z-index: 1;
  grid-row: 1;
  grid-column: 1;
  transition: opacity 0.8s ease;
  pointer-events: none; /* Ziehen der Grafik auch im Überlappungsbereich */
}
.su-glass__text a,
.su-glass__text button { pointer-events: auto; }

/* Fläche, in die das Modell gesetzt wird – hier wird auch gezogen */
.su-glass__stage {
  position: relative;
  z-index: 1;
  touch-action: pan-y; /* vertikales Scrollen auf Touch bleibt möglich */
  cursor: grab;
  grid-row: 2;
  grid-column: 1;
  justify-self: center;
  width: min(100%, 520px);
  aspect-ratio: 1;
  margin-top: -10%; /* leichte Überlappung auch mobil */
}

/* Canvas deckt das ganze Element ab (Text + Modell); das Skript vergrößert
   ihn über den Rand hinaus, damit das Modell nicht abgeschnitten wird */
.su-glass__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.8s ease;
  max-width: none; /* UIkit begrenzt canvas sonst auf 100 % */
  pointer-events: none;
}

/* Sobald die 3D-Szene steht, zeichnet sie den Text.
   opacity statt display:none – Text bleibt für SEO & Screenreader erhalten. */
.su-glass.is-ready .su-glass__text { opacity: 0; }
.su-glass.is-ready .su-glass__canvas { opacity: 1; }
.su-glass.is-dragging .su-glass__stage { cursor: grabbing; }

/* Nebeneinander ab Breakpoint */
@media (min-width: 640px) {
  .su-glass--s { grid-template-columns: var(--su-text-w) minmax(0, 1fr); }
  .su-glass--s .su-glass__stage { grid-row: 1; grid-column: 1 / -1; justify-self: end; width: calc(100% - var(--su-text-w) + var(--su-overlap)); margin-top: 0; }
}
@media (min-width: 960px) {
  .su-glass--m { grid-template-columns: var(--su-text-w) minmax(0, 1fr); }
  .su-glass--m .su-glass__stage { grid-row: 1; grid-column: 1 / -1; justify-self: end; width: calc(100% - var(--su-text-w) + var(--su-overlap)); margin-top: 0; }
}
@media (min-width: 1200px) {
  .su-glass--l { grid-template-columns: var(--su-text-w) minmax(0, 1fr); }
  .su-glass--l .su-glass__stage { grid-row: 1; grid-column: 1 / -1; justify-self: end; width: calc(100% - var(--su-text-w) + var(--su-overlap)); margin-top: 0; }
}

.su-glass--valign-top .su-glass__text { align-self: start; }
.su-glass--valign-bottom .su-glass__text { align-self: end; }

@media (prefers-reduced-motion: reduce) {
  .su-glass__text,
  .su-glass__canvas { transition: none; }
}