.paragraph.paragraph--type---panorama-detail {
  overflow: auto;
  width: 360px;
  margin: 0 auto;
  clear: both;
}

@media (min-width: 736px) {
  .paragraph.paragraph--type---panorama-detail {
    width: 100%;
    max-width: 1080px;
  }
}

.paragraph.paragraph--type---panorama-detail .panorama-detail-section{
  max-width: 100%;
  margin-left: 17px;
  margin-right: 17px;
}

/* Grundcontainer der Zeile */
.panorama-detail-row {
  display: flex;
  align-items: center; /* Vertikale Zentrierung */
  flex-wrap: wrap;     /* Wichtig für Mobile */
  margin-bottom: 40px;
}

/* Jede GERADE Zeile wird gespiegelt (2., 4., 6. Zeile) */
.panorama-detail-row:nth-child(even) {
  flex-direction: row-reverse;
}

/* Die Bild-Spalte (2/3) */
.column-image {
  flex: 0 0 66.666%;
  max-width: 66.666%;
}

.column-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* Grundstyling für die Textspalte (1/3) */
.column-text {
  flex: 0 0 33.333%;
  max-width: 33.333%;
  box-sizing: border-box;
  /* Standard-Abstand für ungerade Zeilen (Bild links, Text rechts) */
  padding-left: 40px; 
}

/* Spezial-Regel für GERADE Zeilen (Text links, Bild rechts) */
.panorama-detail-row:nth-child(even) .column-text {
  /* Padding links auf 0, damit der Text mit dem Bild darüber fluchtet */
  padding-left: 0;
  /* Dafür Abstand nach rechts zum Bild hin hinzufügen */
  padding-right: 40px;
}

/* Spezial-Regel für UNGERADE Zeilen (Bild links, Text rechts) */
.panorama-detail-row:nth-child(odd) .column-text {
  /* Padding rechts auf 0, damit der Text bündig mit dem Header/Container abschließt */
  padding-right: 0;
}

/* Mobile-Reset: Auf dem Smartphone brauchen wir das Padding wieder rundherum */
@media (max-width: 1000px) {
  .column-text,
  .panorama-detail-row:nth-child(even) .column-text {
    padding: 20px !important;
  }
}

/* MOBILE ANPASSUNG */
@media (max-width: 1000px) {
  
  /* Wir zwingen ALLE Zeilen (auch die geraden) in die normale Spaltenform */
  .panorama-detail-row, 
  .panorama-detail-row:nth-child(even) {
    flex-direction: column !important; /* Stapelt Bild oben, Text unten */
  }

  /* Die Spalten nehmen nun die volle Breite ein */
  .column-image, 
  .column-text {
    flex: 0 0 100%;
    max-width: 100%;
    padding: 20px;
    text-align: left; /* Falls du oben 'right' für gerade Zeilen hattest, hier resetten */
  }

  /* Optional: Ein kleiner Abstand zwischen den Sektionen auf Mobile */
  .panorama-detail-row {
    margin-bottom: 60px;
  }
}