/* Deine Kirche – eigene Sektionen (Timeline, Werte, Team) */

#geschichte, #werte, #team, #glaube, #besuchen { scroll-margin-top: 90px; }

/* Story-Timeline */
.story { background: var(--color-white); padding: clamp(4rem, 9vw, 7.5rem) 6vw; }
.story__inner { max-width: 720px; margin: 0 auto; }
.story__intro { text-align: center; margin: 0 auto clamp(2.6rem, 5vw, 3.6rem); }
.story__eyebrow { margin: 0 0 0.6rem; font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-teal); }
.story__headline { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 2.6rem); color: var(--color-ink); }
.story__timeline { list-style: none; margin: 0; padding: 0; position: relative; }
/* Die durchgehende Linie lief unter dem letzten Punkt weiter.
   Jetzt zeichnet jeder Eintrag außer dem letzten sein eigenes Stück. */
.story__item:not(:last-child)::before { content: ""; position: absolute; top: 20px; bottom: -2px; left: 62px; width: 1.5px; background: rgba(31,142,130,0.25); }
.story__item { position: relative; display: grid; grid-template-columns: 62px 1fr; gap: 1.6rem; padding-bottom: 2.6rem; }
.story__item:last-child { padding-bottom: 0; }
.story__item::after { content: ""; position: absolute; top: 6px; left: 62px; transform: translateX(-50%); width: 10px; height: 10px; border-radius: 50%; background: var(--color-teal); z-index: 1; }
.story__year { font-family: var(--font-display); font-weight: 600; font-size: 0.95rem; color: var(--color-teal); text-align: right; padding-top: 0.15rem; padding-right: 0.6rem; }
.story__content h3 { margin: 0 0 0.4rem; font-family: var(--font-display); font-weight: 600; font-size: 1.15rem; color: var(--color-ink); }
.story__content p { margin: 0; max-width: 62ch; font-family: var(--font-body); font-size: 0.94rem; line-height: 1.65; color: rgba(11,21,18,0.65); }
@media (max-width: 560px) {
  .story__item:not(:last-child)::before { left: 40px; }
  .story__item { grid-template-columns: 40px 1fr; gap: 1rem; }
  .story__item::after { left: 40px; }
}

/* Werte */
.values { background: #f4f6f5; padding: clamp(4rem, 9vw, 7.5rem) 6vw; }
.values__inner { max-width: 1240px; margin: 0 auto; }
.values__intro { max-width: 640px; margin: 0 auto clamp(2.8rem, 6vw, 4rem); text-align: center; }
.values__eyebrow { margin: 0 0 0.6rem; font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-teal); }
.values__headline { margin: 0 0 1rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 2.6rem); color: var(--color-ink); }
.values__lead { margin: 0 auto; font-family: var(--font-body); font-size: 1rem; line-height: 1.7; color: rgba(11,21,18,0.65); }
.values__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; }
.values__card { background: var(--color-white); border-radius: 18px; padding: clamp(1.8rem, 3vw, 2.4rem) clamp(1.6rem, 2.6vw, 2.1rem); box-shadow: 0 8px 22px rgba(11,21,18,0.05); border-top: 2px solid rgba(31,142,130,0.35); }
.values__card h3 { margin: 0 0 0.7rem; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.45rem, 2.4vw, 1.9rem); line-height: 1.15; color: var(--color-teal-dark); }
.values__card p { margin: 0; max-width: 56ch; font-family: var(--font-body); font-size: 0.98rem; line-height: 1.7; color: rgba(11,21,18,0.65); }
@media (max-width: 760px) { .values__grid { grid-template-columns: 1fr; } }

/* Team */
.team { background: var(--color-white); padding: clamp(4rem, 9vw, 7.5rem) 6vw; }
.team__inner { max-width: 1240px; margin: 0 auto; }
.team__intro { max-width: 640px; margin: 0 auto clamp(2.8rem, 6vw, 4rem); text-align: center; }
.team__eyebrow { margin: 0 0 0.6rem; font-family: var(--font-body); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-teal); }
.team__headline { margin: 0; font-family: var(--font-display); font-weight: 600; font-size: clamp(1.9rem, 3.6vw, 2.6rem); color: var(--color-ink); }
.team__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.6rem; }
.team__photo { aspect-ratio: 4 / 5; border-radius: 16px; background: #f4f6f5 var(--photo) center/cover; margin-bottom: 1rem; }
.team__card h3 { margin: 0 0 0.2rem; font-family: var(--font-display); font-weight: 600; font-size: 1rem; color: var(--color-ink); }
.team__card p { margin: 0; font-family: var(--font-body); font-size: 0.85rem; color: var(--color-teal); }
@media (max-width: 760px) { .team__grid { grid-template-columns: 1fr 1fr; } }

/* ---------------------------------------------------
   Woran wir glauben
   Nutzt die .faq-Komponente, aber mit eigener Anordnung:
   zwei Spalten und ein Aufklapp-Kopf ohne Themen-Label
   (der Titel ist hier schon das Thema).
--------------------------------------------------- */
#glaube .faq__inner { max-width: 1080px; }
#glaube .faq__grid { grid-template-columns: 1fr 1fr; gap: 1rem 1.4rem; align-items: start; }

#glaube .faq__question { display: flex; align-items: center; gap: 1rem; }
#glaube .faq__label { flex: 1 1 auto; min-width: 0; }
#glaube .faq__text { display: block; }
#glaube .faq__chevron { flex: 0 0 auto; align-self: center; }

/* Mehrere Absätze in einer Antwort brauchen Abstand */
#glaube .faq__answer p + p { margin-top: 0.9rem; }

@media (max-width: 760px) {
  #glaube .faq__grid { grid-template-columns: 1fr; }
}

/* Zentrierter Fließtext ist auf schmalen Screens schwer lesbar */
@media (max-width: 700px) {
  .story__intro,
  .values__intro,
  .team__intro { text-align: left; }
  .values__lead { margin-left: 0; }
}