/* Die Muckibude — Startseite: Einstieg, Abschnitte, Bilder, Fragen */

/* ---------- Bildband über die ganze Breite ---------- */
.bildband{margin:0;background:var(--bg-mid)}
.bildband img{
  width:100%;height:auto;max-height:min(42vh,460px);object-fit:cover;object-position:center 58%;
}
.bildband figcaption,
figure figcaption{
  max-width:var(--maxw);margin:.5rem auto 0;padding:0 1.2rem;
  font-size:.8rem;color:var(--muted);letter-spacing:.02em;
}
.bildband figcaption{text-align:right}

/* ---------- Einstieg ---------- */
.einstieg{padding:2.6rem 0 3.6rem}
.einstieg .oberzeile{
  font-size:clamp(1.5rem,3.4vw,2.2rem);color:var(--rostbraun);
  margin:0 0 .1em;line-height:1.2;
}
.einstieg h1{margin:0 0 .35em;letter-spacing:-.02em}
.einstieg .unterzeile{
  font-size:clamp(1.1rem,2.3vw,1.5rem);color:var(--teal);font-weight:600;
  line-height:1.35;max-width:36rem;margin:0 0 1.6rem;
}
.einstieg .leise{margin-top:1.6rem;color:var(--muted);font-size:.98rem}
.einstieg .leise a{font-weight:600;text-decoration:underline;text-underline-offset:3px}

/* ---------- Die inneren Stimmen ---------- */
.stimme{
  font-style:italic;font-size:1.12rem;color:var(--ink);
  margin:0 0 .9em;padding-left:1.1rem;border-left:2px solid var(--wave);
}

/* ---------- Abschnitt mit Bild daneben ---------- */
.mit-bild{
  display:grid;gap:2.6rem;align-items:center;
  grid-template-columns:minmax(0,1.25fr) minmax(260px,.9fr);
}
.mit-bild--links{grid-template-columns:minmax(260px,.9fr) minmax(0,1.25fr)}
.mit-bild__text{min-width:0}
.mit-bild__text h2{margin-top:0}
.mit-bild__bild{margin:0}
.mit-bild__bild img{border-radius:var(--radius);box-shadow:var(--shadow-lg)}
.mit-bild__bild figcaption{padding:0;margin-top:.55rem}
@media(max-width:820px){
  .mit-bild,.mit-bild--links{grid-template-columns:1fr;gap:1.8rem}
  .mit-bild--links .mit-bild__bild{order:2}
}

/* ---------- Anlässe ---------- */
.anlaesse{list-style:none;margin:1.2rem 0 1.6rem;padding:0}
.anlaesse li{
  position:relative;padding:.1rem 0 .1rem 1.5rem;margin-bottom:1rem;
  border-left:2px solid var(--wave);padding-left:1.2rem;
}

/* ---------- Weiterführender Link ---------- */
.weiter{margin-top:1.6rem}
.weiter a{
  font-weight:600;text-decoration:underline;text-underline-offset:3px;
}
.weiter a::after{content:" →"}

/* ---------- Leitsatz ---------- */
.leitsatz{
  font-weight:700;color:var(--ink);font-size:1.12rem;
  margin:1.5rem 0;padding:.9rem 1.2rem;
  background:var(--foam);border-radius:var(--radius);
}

/* ---------- Stimmen aus der MUT-Oase ---------- */
.stimmen{max-width:var(--readw);margin:3rem 0 0}
.stimmen__titel{color:var(--muted);font-size:.95rem;margin-bottom:1.2rem}

/* ---------- Häufige Fragen ---------- */
.faq{max-width:52rem;margin:2rem auto 0}
.faq details{
  background:var(--white);border:1px solid var(--border);border-radius:var(--radius);
  margin-bottom:.7rem;box-shadow:var(--shadow);overflow:hidden;
}
.faq summary{
  cursor:pointer;list-style:none;padding:1.05rem 3rem 1.05rem 1.3rem;
  font-weight:600;color:var(--ink);position:relative;font-size:1.02rem;
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::marker{content:""}
.faq summary::after{
  content:"+";position:absolute;right:1.2rem;top:50%;transform:translateY(-50%);
  color:var(--ocean);font-size:1.4rem;font-weight:400;line-height:1;
}
.faq details[open] summary::after{content:"–"}
.faq details[open] summary{border-bottom:1px solid var(--border)}
.faq summary:hover{color:var(--ocean)}
.faq .antwort{padding:1.1rem 1.3rem 1.2rem}
.faq .antwort p:last-child{margin-bottom:0}

/* ---------- Schluss ---------- */
.abschluss{
  background:var(--foam);border-top:1px solid var(--border);
  padding:4rem 0 4.5rem;
}
.abschluss .lead{color:var(--ink)}
.abschluss .schlusssatz{
  font-size:1.18rem;color:var(--ink);margin-top:2rem;
  padding-top:1.6rem;border-top:1px solid var(--border);
}