/* About-Seite.
 *
 * Nutzt die Abschnittsregeln aus main.css (.section, .section-header, ...) und
 * ergaenzt nur, was diese Seite zusaetzlich braucht.
 * Keine fremden Schriften, keine fremden Adressen.
 */

.ueber-inner { max-width: 980px; margin: 0 auto; }

/* Kopf */
.ueber-kopf {
  padding: calc(var(--header-h) + 3rem) 32px 0;
  background: var(--bg);
  text-align: center;
}
.ueber-kopf h1 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600; font-size: clamp(2.2rem, 5vw, 3.2rem);
  line-height: 1.1; margin: 0 0 1rem; color: var(--text);
}
.ueber-kopf h1 em { font-style: italic; color: var(--sandstone); }
.ueber-lead {
  font-size: 1.08rem; line-height: 1.75; color: var(--text-mid);
  max-width: 62ch; margin: 0 auto;
}

/* Gastgeber: die beiden Inhaber nebeneinander, jeder mit eigenem Bild.
   Vorher stand hier ein gemeinsames Foto, auf dem auch Gaeste zu sehen waren. */
.ueber-mitte {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600; font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  margin: 0 0 .9rem; color: var(--text); text-align: center;
}
.ueber-mitte-text {
  color: var(--text-mid); line-height: 1.75;
  max-width: 58ch; margin: 0 auto 2.4rem; text-align: center;
}
.ueber-mitte-text strong { color: var(--text); }

.ueber-personen {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px; max-width: 720px; margin: 0 auto 2.2rem;
}
.ueber-person { text-align: center; }
.ueber-person img {
  width: 300px; max-width: 100%; height: auto; aspect-ratio: 1;
  object-fit: cover; border-radius: 50%;
  display: block; margin: 0 auto 18px;
  box-shadow: var(--shadow-sm);
}
.ueber-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem; font-weight: 600; color: var(--text); margin: 0;
}
.ueber-rolle { font-size: 15px; color: var(--text-mid); margin: 2px 0 0; }
.ueber-rolle:first-of-type { color: var(--gold-dark); font-weight: 600; }

.ueber-klein { font-size: 14px; }
.ueber-klein a { color: var(--gold-dark); }

/* Die Abschnitte stehen sonst mit 88px oben und unten aneinander, das reisst
   ein Loch in die Seite. */
.ueber-gastgeber { padding-bottom: 40px; }
.ueber-arbeit { padding-top: 48px; }

/* Wie wir arbeiten */
.ueber-punkte { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.ueber-punkt {
  background: var(--white); border: 1px solid var(--border);
  border-radius: var(--r-lg); padding: 24px;
}
.ueber-punkt h3 { font-size: 1.05rem; margin: 0 0 .5rem; color: var(--text); }
.ueber-punkt p { color: var(--text-mid); line-height: 1.7; margin: 0; }

/* Gebiete und Abschluss */
.ueber-gebiete { text-align: center; padding-top: 0; }
.ueber-gebiete h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600; font-size: clamp(1.6rem, 3.4vw, 2.1rem);
  margin: 0 0 .9rem; color: var(--text);
}
.ueber-gebiete p { color: var(--text-mid); line-height: 1.75; max-width: 62ch; margin: 0 auto 1rem; }
.ueber-knoepfe {
  display: flex; flex-wrap: wrap; gap: 14px; justify-content: center;
  margin: 26px 0 18px;
}
.ueber-zweitknopf {
  display: inline-block; padding: 11px 24px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--white);
  font-size: 15px; font-weight: 600; color: var(--text);
}
.ueber-zweitknopf:hover { border-color: var(--sandstone); color: var(--gold-dark); }

@media (max-width: 860px) {
  .ueber-split { grid-template-columns: 1fr; gap: 28px; }
  .ueber-bild { max-width: 340px; margin: 0 auto; }
  .ueber-punkte { grid-template-columns: 1fr; }
}
@media (max-width: 520px) {
  .ueber-personen { grid-template-columns: 1fr; }
}