/* FVBH – Förderverein Bonhoeffer-Haus Nordbögge e.V.
   Vanilla CSS, kein Framework. Mobil-first. */

:root {
  --farbe-primär: #7a1f2b;      /* dunkles kirchenrot */
  --farbe-primär-hell: #9c3444;
  --farbe-text: #2b2b2b;
  --farbe-text-hell: #6b6b6b;
  --farbe-hintergrund: #faf9f7;
  --farbe-karte: #ffffff;
  --farbe-linie: #e5e0da;
  --radius: 10px;
  --max-breite: 1000px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--farbe-text);
  background: var(--farbe-hintergrund);
  line-height: 1.65;
}

img { max-width: 100%; height: auto; display: block; }

/* ---------- Kopfbereich ---------- */
.kopf {
  background: var(--farbe-primär);
  color: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  position: sticky;
  top: 0;
  z-index: 50;
}

.kopf-innen {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 0 1rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  flex-wrap: wrap;
  min-height: 60px;
}

.marke {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  color: #fff;
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.2;
}

.marke img { width: 40px; height: 40px; border-radius: 50%; }

.marke small {
  display: block;
  font-weight: 400;
  font-size: .72rem;
  opacity: .85;
}

/* Navigation */
.navi {
  margin-left: auto;
  display: flex;
  gap: .25rem;
  flex-wrap: wrap;
}

.navi a {
  color: #fff;
  text-decoration: none;
  padding: .45rem .7rem;
  border-radius: 6px;
  font-size: .95rem;
}

.navi a:hover,
.navi a[aria-current="page"] {
  background: rgba(255,255,255,.18);
}

/* Hamburger für Mobil */
.navi-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: none;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1;
  padding: .4rem .6rem;
  cursor: pointer;
  border-radius: 6px;
}

/* ---------- Hero ---------- */
.hero {
  background:
    linear-gradient(rgba(30, 8, 12, .55), rgba(30, 8, 12, .55)),
    url("../img/bonhoeffer-2013.jpg") center 35% / cover no-repeat;
  color: #fff;
  text-align: center;
  padding: clamp(3rem, 10vw, 6rem) 1rem;
}

.hero h1 {
  margin: 0 0 .5rem;
  font-size: clamp(1.7rem, 5vw, 2.6rem);
  text-wrap: balance;
}

.hero p {
  margin: 0 auto;
  max-width: 42em;
  font-size: 1.05rem;
  opacity: .95;
}

.hero .cta {
  display: inline-block;
  margin-top: 1.5rem;
  background: #fff;
  color: var(--farbe-primär);
  padding: .7rem 1.4rem;
  border-radius: 999px;
  text-decoration: none;
  font-weight: 600;
  box-shadow: 0 2px 10px rgba(0,0,0,.25);
}

/* ---------- Layout ---------- */
main {
  max-width: var(--max-breite);
  margin: 0 auto;
  padding: 2rem 1rem 3rem;
}

.seite h1 {
  margin: 0 0 1.2rem;
  color: var(--farbe-primär);
  font-size: clamp(1.5rem, 4vw, 2.1rem);
}

.seite h2 {
  margin: 2rem 0 .8rem;
  color: var(--farbe-primär);
  font-size: 1.3rem;
}

article img.rand { border-radius: var(--radius); }

.abbildung {
  margin: 1.2rem 0 2.2rem;
}

.abbildung figcaption {
  font-size: .85rem;
  color: var(--farbe-text-hell);
  margin-top: .4rem;
}

/* Karten (Startseite) */
.karten {
  display: grid;
  gap: 1.2rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  margin-top: 2rem;
}

.karte {
  background: var(--farbe-karte);
  border: 1px solid var(--farbe-linie);
  border-radius: var(--radius);
  padding: 1.4rem;
  text-decoration: none;
  color: inherit;
  transition: box-shadow .15s, transform .15s;
}

.karte:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.10);
  transform: translateY(-2px);
}

.karte h2 { margin: .8rem 0 .5rem; font-size: 1.1rem; }
.karte p { margin: 0; font-size: .95rem; color: var(--farbe-text-hell); }
.karte .pfeil { color: var(--farbe-primär); font-weight: 700; }

/* Hinweisbox */
.hinweis {
  background: #fdf3f4;
  border: 1px solid #eccfd3;
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  margin: 1.5rem 0;
}

/* ---------- Formular ---------- */
.formular {
  max-width: 560px;
  margin-top: 1rem;
}

.feld { margin-bottom: 1rem; }

.feld label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .95rem; }

.feld input,
.feld textarea {
  width: 100%;
  padding: .65rem .8rem;
  border: 1px solid #c9c2ba;
  border-radius: 8px;
  font: inherit;
  background: #fff;
}

.feld input:focus,
.feld textarea:focus {
  outline: 2px solid var(--farbe-primär-hell);
  border-color: var(--farbe-primär-hell);
}

.pflicht { color: var(--farbe-primär); }

button[type="submit"] {
  background: var(--farbe-primär);
  color: #fff;
  border: none;
  padding: .8rem 1.6rem;
  border-radius: 999px;
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}

button[type="submit"]:hover { background: var(--farbe-primär-hell); }

button[disabled] { opacity: .6; cursor: wait; }

.formular-hinweis { font-size: .85rem; color: var(--farbe-text-hell); margin-top: 1rem; }

/* Formular-Feedback (kontakt-verarbeiten.php) */
.erfolg {
  background: #eef7ee;
  border: 1px solid #bfe0bf;
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  color: #1e5c1e;
}

.fehler {
  background: #fdf0f1;
  border: 1px solid #eccfd3;
  border-radius: var(--radius);
  padding: 1rem 1.2rem;
  color: var(--farbe-primär);
}

/* ---------- Fußbereich ---------- */
.fuss {
  background: #26201e;
  color: #cfc6c0;
  padding: 2rem 1rem 3rem;
  font-size: .9rem;
}

.fuss-innen {
  max-width: var(--max-breite);
  margin: 0 auto;
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.fuss h3 { color: #fff; font-size: 1rem; margin: 0 0 .5rem; }
.fuss a { color: #e8b9c0; }
.fuss ul { list-style: none; margin: 0; padding: 0; }
.fuss li { margin-bottom: .3rem; }

.fuss-copyright {
  max-width: var(--max-breite);
  margin: 2rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid #444;
  font-size: .8rem;
}

/* ---------- Mobil ---------- */
@media (max-width: 720px) {
  .navi-toggle { display: block; }

  .navi {
    display: none;
    width: 100%;
    flex-direction: column;
    padding-bottom: .8rem;
  }

  .navi.offen { display: flex; }

  .navi a { padding: .6rem .8rem; }
}

/* Druck */
@media print {
  .kopf, .fuss, .hero .cta, .navi-toggle { display: none; }
  body { background: #fff; }
}