/* Über uns
 *
 * Gemessen an „Über uns“ des Webflow-Stands (1280 px):
 *   h1 54/64,8 bei 40/140 · vier Kacheln 281 breit ab y 205, Kachel 500 hoch,
 *   Bild abwechselnd 370 und 266 hoch, Zahl 40/56 px, Label 22/33 bei x +21
 *   Reiter: Sektion ab y 845, Innenabstand 41; Reiter 518 × 84, Abstand 30,
 *   Reitertext 28 px; Inhalt 518 breit bei x 660, Bild 518 × 236, Text 18/27 Gewicht 500
 *   Team: Untertitel 20/700 Versalien; Karten 359 × 461, Abstand 20/20,
 *   Bild 335 × 460 mittig, Name 24 px zentriert, Rolle 18/27 zentriert
 * Weggelassen: „Working Process“ und „Testimonial“ (Intario-Platzhalter ohne
 * inhaltliche Entsprechung).
 */

/* ---------------------------------------------------- Kopf und Kennzahlen */
.ueber-kopf { padding: var(--abstand-kopf) 0 140px; }
.ueber-kopf h1 { margin: 0 0 16px; line-height: 1.2; }        /* 54/64,8 wie in der Vorlage, Kacheln ab y 205 */
.kennzahlen {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 25px; margin-top: 0;
}
.kennzahl { display: flex; flex-direction: column; min-height: 500px; }
.kennzahl .bild {
  height: 370px; overflow: hidden; background: var(--dunkel-sektion);
}
.kennzahl:nth-child(even) .bild { height: 266px; }
.kennzahl .bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kennzahl .zahl {
  margin: 20px 0 0; padding: 0 21px;
  font-family: var(--schrift-display); font-style: italic;
  font-size: 40px; line-height: 56px; font-weight: 500; color: var(--akzent);
  font-variant-numeric: tabular-nums;
}
.kennzahl .label { padding: 0 21px; font-size: 22px; line-height: 33px; color: var(--dunkel-text); }
.kennzahl .label a { color: inherit; text-decoration: none; display: inline-block; padding-block: 6px; margin-block: -6px; }
.kennzahl .label a:hover { color: var(--akzent); }
@media screen and (max-width: 991px) {
  .kennzahlen { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .kennzahl { min-height: 0; }
  .kennzahl .bild, .kennzahl:nth-child(even) .bild { height: 240px; }
}
@media screen and (max-width: 479px) {
  .ueber-kopf { padding-bottom: 80px; }
  .kennzahlen { grid-template-columns: 1fr 1fr; gap: 15px; }
  .kennzahl .bild, .kennzahl:nth-child(even) .bild { height: 160px; }
  .kennzahl .zahl { font-size: 32px; line-height: 44px; padding: 0 12px; margin-top: 12px; }
  .kennzahl .label { font-size: 17px; line-height: 26px; padding: 0 12px; }
  .kennzahl .label a { padding-block: 9px; margin-block: -9px; }   /* 26 + 18 = 44 */
}

/* ---------------------------------------------------- Reiter Mission / Vision / Geschichte */
.leitbild { padding: 0 0 140px; }
.leitbild-innen { padding: 40px; border: 1px solid var(--dunkel-rand); display: grid; grid-template-columns: 518px 1fr; gap: 40px; align-items: center; }
.reiter-liste { display: flex; flex-direction: column; gap: 30px; margin: 0; padding: 0; list-style: none; }
.reiter {
  display: flex; align-items: center; width: 100%; height: 84px; padding: 0 31px;
  background: var(--dunkel-grund); border: 1px solid var(--dunkel-rand); color: var(--dunkel-text);
  font-family: var(--schrift-display); font-style: italic; font-size: 28px; line-height: 42px; font-weight: 500;
  text-align: left; cursor: pointer; transition: border-color .2s ease, color .2s ease;
}
.reiter:hover, .reiter[aria-selected="true"] { border-color: var(--akzent); color: var(--akzent); }
.reiter:focus-visible { outline: 2px solid var(--akzent); outline-offset: 3px; }
.reiter-inhalt { max-width: 560px; width: 100%; padding: 21px; }   /* Inhalt 518 bei x 660 */
.reiter-tafel { margin: 0 0 40px; }
.reiter-tafel:last-child { margin-bottom: 0; }
.reiter-tafel .bild { aspect-ratio: 518 / 236; overflow: hidden; background: var(--dunkel-sektion); margin-bottom: 20px; }
.reiter-tafel .bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.reiter-tafel h2 { font-size: 28px; margin: 0 0 12px; }
.reiter-tafel p, .reiter-tafel li { font-size: 18px; line-height: 27px; font-weight: 500; color: var(--dunkel-text-leise); margin: 0 0 14px; }
.reiter-tafel ul { margin: 0 0 14px; padding-left: 22px; }
.reiter-tafel blockquote { margin: 0 0 14px; padding-left: 18px; border-left: 2px solid var(--akzent); }
.reiter-tafel blockquote p { color: var(--dunkel-text); }
.reiter-tafel .quelle { font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--dunkel-text-leise); }
/* Mit Skript: nur die gewählte Tafel sichtbar, Überschrift wird vom Reiter übernommen */
.js .reiter-tafel[hidden] { display: none; }
.js .reiter-tafel h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.js .reiter-tafel { margin-bottom: 0; }
@media screen and (max-width: 991px) {
  .leitbild-innen { grid-template-columns: 1fr; padding: 30px; }
  .reiter-inhalt { padding: 0; max-width: none; }
  .reiter-liste { flex-direction: row; flex-wrap: wrap; gap: 12px; }
  .reiter { width: auto; height: 56px; font-size: 22px; padding: 0 20px; }
  .reiter-inhalt { max-width: none; justify-self: stretch; }
}
@media screen and (max-width: 479px) {
  .leitbild { padding-bottom: 80px; }
  .leitbild-innen { padding: 20px 15px; }
  .reiter { height: 48px; font-size: 19px; padding: 0 14px; }
}

/* ---------------------------------------------------- Gremien */
.gremien { padding: 0 0 140px; }
.gremien-innen { padding: 20px 40px 40px; border: 1px solid var(--dunkel-rand); }
.gremien .angabe-fett { font-size: 20px; line-height: 30px; font-weight: 700; text-transform: uppercase; color: var(--dunkel-text); margin: 0 0 30px; }
.gremium { margin: 0 0 40px; }
.gremium:last-child { margin-bottom: 0; }
.gremium h2 { font-size: 30px; margin: 0 0 20px; }
/* Personen wie die vier Kacheln „Über uns“ der Startseite: vier gleich breite Spalten, 10 px Abstand, quadratisch
 * (Porträts künftig ebenfalls quadratisch beschnitten) – aber ohne Schachbrett-Wechsel (29.09.2026). */
.personen { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 10px; }
.person { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.person .portraet {
  width: 100%; aspect-ratio: 1; display: grid; place-items: center; overflow: hidden;
  border: 1px solid var(--dunkel-rand); background: var(--dunkel-sektion); color: var(--akzent); margin-bottom: 19px;
  font-family: var(--schrift-display); font-style: italic; font-weight: 500;
}
.person { container-type: inline-size; }
.person .portraet { font-size: clamp(40px, 30cqw, 96px); }   /* Monogramm folgt der Kachelbreite */
.person .portraet img { width: 100%; height: 100%; object-fit: cover; display: block; }
.person h3 { font-size: 24px; line-height: 1.3; margin: 0; }
.person h3 a { color: inherit; text-decoration: none; display: inline-block; padding-block: 8px; margin-block: -8px; }
.person h3 a:hover { color: var(--akzent); }
.person .rolle { font-size: 18px; line-height: 27px; font-weight: 500; margin: 0; color: var(--dunkel-text); }
.person .hinweis { font-size: .78rem; letter-spacing: .09em; text-transform: uppercase; color: var(--dunkel-text-leise); margin: 6px 0 0; }
@media screen and (max-width: 991px) { .personen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media screen and (max-width: 767px) { .gremien-innen { padding: 15px 20px 30px; } }
@media screen and (max-width: 479px) { .gremien { padding-bottom: 80px; } .personen { gap: 12px; } .person h3 { font-size: 20px; } .person h3 a { padding-block: 9px; margin-block: -9px; } .person .rolle { font-size: 16px; } }

/* ---------------------------------------------------- Jahresberichte (06.10.2026)
 * Kasten wie „Die Stiftung“ darüber (40 px Abstand); ab 768 px links das Foto in der Breite zweier Personenkacheln
 * (Raster 4 × 1fr, Abstand 10), rechts Text und Knopf, beide unten bündig. Darunter untereinander. */
.gremien { padding-bottom: 40px; }
.jahresberichte { padding: 0 0 140px; }
.jahresberichte-innen { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px 10px; align-items: end; padding-top: 40px; }
.jb-bild { aspect-ratio: 1; overflow: hidden; border: 1px solid var(--dunkel-rand); background: var(--dunkel-sektion); }
.jb-bild img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jb-text .angabe-fett { font-size: 20px; line-height: 30px; font-weight: 700; text-transform: uppercase; color: var(--dunkel-text); margin: 0 0 18px; }
.jb-text h2 { font-size: 30px; line-height: 1.3; margin: 0 0 16px; }
.jb-text p:not(.angabe-fett) { font-size: 18px; line-height: 1.6; color: var(--dunkel-text-leise); margin: 0 0 14px; }
.jb-text .knopf { margin-top: 14px; background: var(--akzent); color: var(--dunkel-grund); border-color: transparent; }
.jb-text .knopf:hover { background: #fff; color: var(--dunkel-grund); }
@media screen and (min-width: 768px) {
  .jahresberichte-innen { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .jb-text { padding-left: 30px; }
}
@media screen and (max-width: 767px) { .jahresberichte-innen { padding-top: 30px; } }
@media screen and (max-width: 479px) { .jahresberichte { padding-bottom: 80px; } .gremien { padding-bottom: 30px; } }