/* === Startseite: Bild-Text-Abschnitte === */

.intro-section {
  width: 100%;
  margin: 0 0 1rem 0;
  padding: 0;
}

.intro-block {
  overflow: hidden; /* clearfix */
  padding: 1.8rem 0;
  border-bottom: 1px solid #f0e4de;
  box-sizing: border-box;
}

.intro-block:last-child {
  border-bottom: none;
  padding-bottom: 0.8rem;
}

/* Bild: float links, 35% Breite, kein max-width damit es auf breiten Screens wächst */
.intro-block .intro-imglink {
  display: block;
  float: left;
  width: 40%;
  min-width: 120px;
  margin: 0 1.8rem 1rem 0;
  line-height: 0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(80,50,50,0.13);
}

/* Bild im reverse-Block: float rechts */
.intro-block.reverse .intro-imglink {
  float: right;
  margin: 0 0 1rem 1.8rem;
}

/* Bild füllt den Link-Wrapper aus */
.intro-block .intro-imglink img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

/* Text fließt neben und unter dem Bild */
.intro-block p {
  text-align: justify;
  hyphens: auto;
  overflow-wrap: break-word;
  color: #3a2e2e;
  font-size: 1.05rem;
  line-height: 1.45;
  margin: 0 0 0.8rem 0;
}

.intro-block p:last-child {
  margin-bottom: 0;
}

/* Mobil (bis 800px): Außenabstand für Bilder – nur die äußere Seite */
@media (max-width: 800px) {
  .intro-block .intro-imglink {
    margin-left: 0.8rem; /* erstes Bild: Abstand zum linken Rand */
  }
  .intro-block.reverse .intro-imglink {
    margin-right: 0.8rem; /* zweites Bild: Abstand zum rechten Rand */
  }
}

/* Mobil: Bild über dem Text, mit Abstand zur äußeren Seite */
@media (max-width: 520px) {
  .intro-block .intro-imglink {
    float: none;
    display: block;
    width: 70%;
    margin: 0 auto 1.2rem 0.8rem; /* erstes Bild: Abstand links (äußere Seite) */
  }
  .intro-block.reverse .intro-imglink {
    float: none;
    display: block;
    width: 70%;
    margin: 0 0.8rem 1.2rem auto; /* zweites Bild: Abstand rechts (äußere Seite) */
  }
  .intro-block p {
    text-align: left;
  }
}