/* Aus src/pages/ueber-uns.astro uebernommen.
   Jede Regel ist auf `body.t-ueber-uns main` eingegrenzt. Astro hat das CSS
   je Seite gekapselt, ein gemeinsames Stylesheet tut das nicht -- und das
   `main` haelt die Seitenregeln von Kopf, Fuss und Zustimmungsfenster fern,
   die ausserhalb stehen und eigene Klassen gleichen Namens haben. */
/* Der Vorspann ist eine normale Bahn wie die Bildraster darunter: gleiche
   linke Kante wie Logo, Ueberzeilen und Bilder. Die Lesebreite haelt nicht
   der Block, sondern der Absatz (.vorspann, 56ch) -- so bleibt die Zeile kurz,
   ohne dass der Text in der Mitte haengt. */
body.t-ueber-uns main .kopf {
    padding-block: var(--a-5) var(--a-3);
  }
body.t-ueber-uns main h1 {
    font-size: var(--t-gross);
    margin-bottom: var(--a-3);
  }
body.t-ueber-uns main .betont {
    color: var(--rot);
    font-style: italic;
    font-variation-settings: "SOFT" 60, "WONK" 1;
  }
body.t-ueber-uns main .vorspann {
    font-size: var(--t-klein);
    color: var(--tinte-leise);
    max-width: 56ch;
  }
/* ---------- Porträts ---------- */
body.t-ueber-uns main .person { margin: 0; }
body.t-ueber-uns main .person img {
    width: 100%;
    /* Alle sieben Aufnahmen sind 2:3 — kein Zuschnitt nötig, nichts wird
       angeschnitten. */
    aspect-ratio: 2 / 3;
    object-fit: cover;
    border-radius: var(--radius);
    margin-bottom: var(--a-2);
  }
body.t-ueber-uns main .person figcaption p {
    color: var(--tinte-leise);
    font-size: var(--t-fein);
    margin: 0;
  }
body.t-ueber-uns main .leitung-abschnitt { padding-top: var(--a-3); }
body.t-ueber-uns main .leitung {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--a-3);
  }
body.t-ueber-uns main .person-gross h3 {
    font-size: var(--t-mittel);
    margin-bottom: 0.2em;
  }
/* Gastgeberinnen und Kueche/Service stehen direkt uebereinander und bilden
   einen Block: kein Farbwechsel und kein Abstand dazwischen, sonst liest sich
   die zweite Gruppe wieder wie ein Anhang. Den warmen Grund traegt jetzt der
   Abschnitt darunter. */
body.t-ueber-uns main .team-abschnitt { padding-top: 0; }
body.t-ueber-uns main .werte-abschnitt { background: var(--papier-warm); }
body.t-ueber-uns main .abschnitt-titel {
    font-size: var(--t-gross);
    margin-bottom: var(--a-4);
  }
/* Kueche und Service werden genauso gross gezeigt wie die Gastgeberinnen.
   Vorher waren die Karten hier schmaler und die Namen kleiner — das las sich
   wie zwei Klassen Personal statt wie ein Team. */
body.t-ueber-uns main .team {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: var(--a-3);
  }
body.t-ueber-uns main .team h3 {
    font-size: var(--t-mittel);
    margin-bottom: 0.2em;
  }
body.t-ueber-uns main .team-fuss {
    margin-top: var(--a-4);
    padding-top: var(--a-3);
    border-top: 1px solid var(--linie);
    color: var(--tinte-leise);
    font-size: var(--t-fein);
    max-width: 60ch;
  }
/* ---------- Werte ---------- */
body.t-ueber-uns main .werte { max-width: var(--breite-text); }
body.t-ueber-uns main .werte h2 {
    font-size: var(--t-gross);
    margin-bottom: var(--a-3);
  }
body.t-ueber-uns main .werte p:not(.marke) { color: var(--tinte-leise); }
body.t-ueber-uns main .werte-link { margin-top: var(--a-3); }
/* ---------- Einladung ---------- */
body.t-ueber-uns main .einladung { padding-bottom: var(--a-6); }
body.t-ueber-uns main .einladung-bild {
    width: 100%;
    height: clamp(220px, 34vh, 380px);
    overflow: hidden;
    margin-bottom: var(--a-4);
  }
body.t-ueber-uns main .einladung-bild img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 60%;
  }
body.t-ueber-uns main .einladung-text {
    max-width: calc(700px + 2 * var(--rand));
    margin-inline: auto;
    text-align: center;
  }
body.t-ueber-uns main .einladung h2 {
    font-size: var(--t-mittel);
    margin-bottom: var(--a-2);
  }
body.t-ueber-uns main .einladung p {
    color: var(--tinte-leise);
    margin-bottom: var(--a-3);
  }
body.t-ueber-uns main .einladung-knoepfe {
    display: flex;
    flex-wrap: wrap;
    gap: var(--a-2);
    justify-content: center;
  }