/* Personen- und Bildfeinschliff, 12.09.2026.
   Bewusst nach stil-viewport.css: bestehende Farben, Jost und Vollbreite
   erhalten. Echte Einzelporträts werden nicht zu einem Gruppenfoto montiert. */

/* Vier Personen, keine leere fünfte Spalte. Bei sehr breiten Bildschirmen
   bleiben Bilder begrenzt, während die Sektion selbst vollbreit bleibt. */
.startseite .team-grid,
.kontakt-seite .kp-raster {
  grid-template-columns: repeat(4, minmax(0, 520px));
  justify-content: space-between;
  max-width: 2280px;
  margin-inline: auto;
}
.startseite .team-grid figure,
.startseite .team-grid figure:nth-child(even),
.startseite .team-grid figure:nth-child(3n + 2) { margin-top: 0; }
.startseite .team-grid figure:nth-child(even) { margin-top: clamp(24px, 3vw, 56px); }
.startseite .team-grid img,
.kontakt-seite .kp-bild { object-position: 50% 50%; }
.kontakt-seite .kp-wege a { min-height: 44px; }
.kontakt-seite .kp-name { overflow-wrap: anywhere; }

/* Verkaufs-Teaser: reversibler Bildversuch vom 18.09.2026.
   Etablierter responsiver Bildrahmen aus stil-viewport.css unveraendert.
   Nur Motivwechsel und Ausschnitt: Hand und Plan bleiben im Mittelpunkt.
   Original und Webdateien behalten ihr Seitenverhaeltnis 3291:4096. */
.startseite .leistungen-bilder img { object-position: 50% 62%; }

/* Altstätten: Gebäude und Gasse im Mittelpunkt, nicht der obere Himmel.
   Auf Ultrawide begrenzt die Bildhöhe den Verlust am vertikalen Ausschnitt. */
.startseite .region-raster-neu > figure img { object-position: 50% 57%; }

/* Über uns beginnt mit den Menschen, nicht mit einem beliebigen Wohnraum. */
.teamseite .partner-einstieg {
  width: 100%;
  max-width: calc(1760px + 2 * var(--rand));
  padding-top: calc(var(--kopf-desktop) + clamp(44px, 5vw, 84px));
  padding-bottom: clamp(32px, 4vw, 64px);
}
.teamseite .partner-einstieg h1 { margin-top: 18px; max-width: 16ch; }
.teamseite .partner-einstieg .leit { max-width: 44ch; }
.teamseite .partner-band { padding-block: 0 clamp(44px, 5vw, 80px); }
.teamseite .partner-roster {
  grid-template-columns: repeat(3, minmax(0, 520px));
  justify-content: space-between;
  gap: clamp(24px, 3vw, 64px);
  max-width: 1760px;
  margin: 0 auto;
}
.teamseite .partner-roster li { min-width: 0; }
.teamseite .partner-roster img {
  width: 100%;
  max-width: 520px;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 50%;
  margin: 0 0 24px;
}
.teamseite .partner-roster h3 { font-size: clamp(22px, 1.8vw, 34px); }
.teamseite .partner-roster .p-bio { max-width: 39ch; }
.teamseite .partner-roster .p-kontakt a,
.teamseite .person-ergaenzung .p-kontakt a {
  min-height: 44px;
  overflow-wrap: anywhere;
  display: inline-flex;
  align-items: center;
  color: var(--gruen);
  text-decoration: none;
}
.teamseite .partner-roster .p-kontakt a:hover,
.teamseite .person-ergaenzung .p-kontakt a:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.teamseite .team-ergaenzung { padding-block: clamp(44px, 5vw, 80px) var(--abstand); }
.teamseite .person-ergaenzung {
  display: grid;
  grid-template-columns: minmax(0, 420px) minmax(0, 620px);
  align-items: center;
  gap: clamp(32px, 6vw, 100px);
  max-width: 1760px;
  margin-inline: auto;
  padding-top: clamp(40px, 5vw, 72px);
  border-top: 1px solid var(--sand);
}
.teamseite .person-ergaenzung > img {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: 50% 50%;
}
.teamseite .person-ergaenzung h2 {
  margin-block: 18px 8px;
  max-width: 13ch;
  color: var(--gruen);
  font-size: clamp(30px, 3.3vw, 56px);
  line-height: 1.08;
}
.teamseite .person-ergaenzung .p-rolle { color: var(--sekundaer); }
.teamseite .person-ergaenzung .p-bio { margin-top: 24px; max-width: 42ch; }
.teamseite .person-ergaenzung .p-kontakt { margin-top: 18px; }
.teamseite .personen-entwurf { max-width: 1760px; margin: 36px auto 0; }

@media (max-width: 1100px) {
  .startseite .team-grid,
  .kontakt-seite .kp-raster { grid-template-columns: repeat(2, minmax(0, 520px)); }
  .startseite .team-grid figure:nth-child(even) { margin-top: 0; }
}

@media (max-width: 979px) {
  .teamseite .partner-einstieg { padding-top: calc(var(--kopf-mobil) + 60px); }
  .startseite .leistungen-bilder img { object-position: 50% 50%; }
}

@media (max-width: 760px) {
  .teamseite .partner-roster { grid-template-columns: minmax(0, 520px); justify-content: center; row-gap: 52px; }
  .teamseite .person-ergaenzung { grid-template-columns: minmax(0, 520px); justify-content: center; gap: 28px; }
  .teamseite .person-ergaenzung > img { max-width: 420px; }
  .teamseite .partner-einstieg { padding-bottom: 36px; }
  .teamseite .person-ergaenzung h2 { max-width: none; }
  /* Names are people, not different type levels: same mobile styling even
     though partner headings are h3 and the team heading is h2 semantically. */
  .teamseite .partner-roster h3,
  .teamseite .person-ergaenzung h2 {
    font-family: "Jost", "Segoe UI", Arial, sans-serif;
    font-size: 26px;
    font-weight: 500;
    line-height: 1.2;
    letter-spacing: -.025em;
    margin-block: 0 6px;
  }
  .teamseite .partner-roster .p-rolle,
  .teamseite .person-ergaenzung .p-rolle {
    font-size: 14px;
    font-weight: 400;
    line-height: 1.6;
    margin-top: 4px;
  }
  .teamseite .partner-roster .p-bio,
  .teamseite .person-ergaenzung .p-bio,
  .teamseite .partner-roster .p-kontakt,
  .teamseite .person-ergaenzung .p-kontakt {
    font-size: 16px;
    font-weight: 400;
    line-height: 1.6;
  }
  .teamseite .partner-roster .p-bio,
  .teamseite .person-ergaenzung .p-bio { margin-top: 14px; color: var(--sekundaer); }
  .teamseite .partner-roster .p-kontakt,
  .teamseite .person-ergaenzung .p-kontakt { margin-top: 10px; }
  .teamseite .partner-roster .p-kontakt a,
  .teamseite .person-ergaenzung .p-kontakt a { font: inherit; }
}

@media (max-width: 660px) {
  .startseite .team-grid {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: min(78vw, 360px);
    justify-content: start;
    /* Reveal translations used to add vertical overflow to the horizontal rail. */
    overflow-y: hidden;
    overscroll-behavior: auto;
    touch-action: pan-x pan-y pinch-zoom;
    padding-block: 4px;
  }
  .startseite .team-grid figure[data-reveal] { opacity: 1; transform: none; }
  .startseite .team-grid figure:nth-child(even) { margin-top: 0; }
  .startseite .region-raster-neu > figure img { object-position: 59% 50%; }
}

@media (max-width: 540px) {
  .kontakt-seite .kp-raster { grid-template-columns: minmax(0, 420px); justify-content: center; gap: 46px; }
}