/* 07_abschnitt.css — Abschnitt (normal) + kacheln-grid + Link-Styles.
   Phase 2: aus v7 Z. 1111-1218 + 1366-1370. */

/* ===== ABSCHNITT (z-index: 2) ===== */
.abschnitt {
  position: relative;
  width: 100%;
  max-width: 900px;
  /* EXAKT wie Editor (preview-area: width: 900px) */
  margin: 2rem auto;
  /* KEIN overflow:hidden - damit Zusatztext sichtbar ist */
  z-index: 2;
}

.abschnitt:last-child {
  margin-bottom: 0;
}

.abschnitt-visual {
  position: relative;
  overflow: hidden;
}

/* ===== BILD-EBENE (z-index: 3) ===== */
.bild-wrapper {
  position: absolute;
  overflow: hidden;
  z-index: 3;
}

.bild-wrapper img {
  display: block;
  /* width, height, object-fit werden inline gesetzt */
}

/* ===== TEXTTAPE (z-index: 4) ===== */
.texttape {
  position: absolute;
  padding: 8px;
  overflow: visible;
  z-index: 4;
  /* WICHTIG: content-box wie im Editor, damit Breite = Inhalt, nicht Inhalt+Padding */
  box-sizing: content-box;
  /* Konsistent mit Editor */
  font-size: 1rem;
  line-height: 1.5;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.texttape p {
  margin: 0 0 0.5rem 0;
}

.texttape h2 {
  font-size: 1.5rem;
  margin: 0 0 0.5rem 0;
}

/* ===== ZUSATZTEXT (fließt nach visual-Wrapper) ===== */
.zusatztext {
  position: relative;
  width: 100%;
  padding: 1rem;
  margin-top: 0;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 8px;
  z-index: 5;
}

.zusatztext p {
  margin-bottom: 0.75rem;
}

.zusatztext h2 {
  font-size: 1.5rem;
  margin-bottom: 1rem;
  color: var(--farbe1);
}

/* ===== KACHELN-GRID (abschnittstyp=kacheln) ===== */
.kacheln-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3rem 4rem;
  padding: 1.5rem 2rem;
}

.kachel-item h3 {
  font-size: 1.3rem;
  margin: 0 0 0.3rem 0;
}

.kachel-linie {
  width: 50px;
  height: 3px;
  margin-bottom: 0.8rem;
}

.kachel-item p {
  margin: 0.25rem 0;
  padding-left: 1.2rem;
  font-size: 1rem;
}

/* Link-Farben im Content-Bereich */
.texttape a, .zusatztext a, .abschnitt a {
  color: var(--farbe5);
  text-decoration: underline;
}