/* Sektion 2 */
.hscroll {
  display: flex;            /* Panels nebeneinander */
  overflow: hidden;         /* kein Scrollbar-Flackern */
  height: 100vh;            /* damit pin sauber arbeitet */
  position: relative;
}

/* Jedes Panel = ein Vollbild in der Horizontalen */
.hscroll .panel {
  flex: 0 0 100vw;          /* exakt viewport-breit */
  height: 100%;
  display: grid;            /* zwei Blöcke ohne Abstand nebeneinander */
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: center;      /* optional: vertikal mittig */
  justify-items: center;    /* optional: Inhalt mittig */
  will-change: transform;
}

.square-box-cover {
  aspect-ratio: 1 / 1;   /* immer Quadrat */
  height: 80vh; 
  width: auto;           /* füllt die Grid-Spalte */
  margin: 0 auto;      /* Demo-Hintergrund */
}

/* Mobile Portrait: max 767px */
@media (max-width: 767px) {
  .square-box-cover {
    width: 80%;          /* nur 80% der Container-Breite */
    margin: 0 auto;      /* zentriert im Container */
  }
}

.square-box {
  aspect-ratio: 1 / 1;   /* immer Quadrat */
  width: 100%;           /* füllt die Grid-Spalte */
  height: auto;
  margin: 0 auto;      /* Demo-Hintergrund */
}

/* Mobile Portrait: max 767px */
@media (max-width: 767px) {
  .square-box {
    width: 80%;          /* nur 80% der Container-Breite */
    margin: 0 auto;      /* zentriert im Container */
  }
}