.stwp {
  position: relative;
  background-color: var(--stwp-bg, #14212C);
}

.stwp__sticky {
  position: sticky;
  top: var(--stwp-header-h, 0px);
  width: 100%;
  height: calc(100svh - var(--stwp-header-h, 0px));
  overflow: hidden;
}

.stwp__canvas {
  width: 100%;
  height: 100%;
  display: block;
}

/* Lesbarkeits-Verlauf — exakte Regel aus der Lieferung (EINBAU.md), da die
   Bilder ab v3 neutral gerendert sind (kein Verlauf mehr eingebrannt). */
.stwp__verlauf {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.stwp__verlauf::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(20,33,44,.92) 0%, rgba(20,33,44,.72) 25%, rgba(20,33,44,.34) 45%, rgba(20,33,44,.06) 65%, rgba(20,33,44,0) 78%);
}
.stwp__verlauf::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 26%;
  background: linear-gradient(180deg, rgba(20,33,44,0) 0%, rgba(20,33,44,.28) 40%, rgba(20,33,44,.72) 72%, #14212C 100%);
}

/* Die Sektion selbst ist randlos (volle Breite, für den Bildhintergrund).
   Die Textbox soll sich aber am normalen Inhaltsraster der Seite ausrichten
   (Kit-Containerbreite 1120px, zentriert), nicht am reinen Viewport-Rand -
   sonst klebt der Text am Bildschirmrand, während der Rest der Seite eingerückt ist. */
.stwp__textboxes {
  position: absolute;
  inset: 0;
  max-width: 1120px;
  margin-inline: auto;
  pointer-events: none;
}

/* Breite der Textspalte lebt bewusst hier im Plugin-CSS, nicht im Elementor-Template:
   Das Template soll austauschbar bleiben (Punkt: "Template über Dropdown tauschbar"),
   die Positionierung/Breite der Spalte muss dabei aber stabil bleiben. */
.stwp__textbox {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  width: min(38%, 640px);
  padding-inline: clamp(1.5rem, 4vw, 2rem) 1rem;
  display: flex;
  align-items: center;
  opacity: 0;
  overflow-wrap: break-word;
  word-break: break-word;
  hyphens: auto;
  transition: none; /* Opacity wird pro Frame direkt von JS gesetzt, keine CSS-Transition nötig */
}

.stwp__textbox > * {
  width: 100%;
}

@media (max-width: 1024px) {
  .stwp__textbox {
    width: min(55%, 480px);
  }
}


/* MOBILE LAYOUT: Bild oben, Text unten auf voller Breite ---------------------------------------------------------------------
   Auf Mobil funktioniert die Desktop-Ueberlagerung (schmale Textspalte links ueber
   dem Vollbild-Produktbild) nicht: Text wird zu schmal, bricht haesslich um. Stattdessen:
   Sticky-Bereich wird zur Spalte, Bild oben in fester Hoehe, Textbox darunter auf
   voller Breite mit eigenem (dunklem) Hintergrund. Der Canvas wird von produktwelt.js
   per object-fit:contain-Logik gezeichnet und passt sich der neuen, per CSS vorgegebenen
   Groesse automatisch und unverzerrt an (siehe masse()/zeichnen() im JS). */
@media (max-width: 767px) {
  .stwp__sticky {
    display: flex;
    flex-direction: column;
  }

  .stwp__canvas {
    position: relative;
    flex: 0 0 auto;
    width: 100%;
    height: 42vh;
  }

  /* Der Links-Rechts-Lesbarkeits-Verlauf war nur fuer den ueberlagerten Text noetig -
     auf Mobil liegt der Text nicht mehr auf dem Bild, daher nicht mehr gebraucht. */
  .stwp__verlauf {
    display: none;
  }

  .stwp__textboxes {
    position: relative;
    inset: auto;
    flex: 1 1 auto;
    width: 100%;
    max-width: 100%;
    margin-inline: 0;
    background-color: var(--stwp-bg, #14212C);
  }

  .stwp__textbox {
    inset: 0;
    width: 100%;
    padding-inline: 1.25rem;
    padding-block: 0.75rem 1.25rem;
    align-items: flex-start;
  }
}