/* =========================================================================
   footer.css — Partner-Logos, Team, Kontakt und Rechtliches
   ========================================================================= */

.footer {
  background: var(--bg);
  color: var(--deep);
  padding-block: var(--space-y) 3rem;
}

.footer__heading {
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--ink);
  margin-bottom: 1.1rem;
}

.partner { margin-bottom: clamp(3rem, 7vw, 5rem); }

.partner__list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center;
  gap: clamp(2rem, 6vw, 4.5rem);
}
/* The logos carry different amounts of whitespace — height is set per brand. */
.partner__list img { height: clamp(40px, 5vw, 62px); width: auto; }
.partner__list li:first-child img { height: clamp(24px, 3vw, 36px); }

.partner__supporters {
  margin-top: 1.25rem;
  font-size: .9rem;
  color: var(--deep);
  opacity: .8;
}

/* Sitzt jetzt in der Betreuungs-Spalte zwischen Überschrift und Namen —
   der Abstand richtet sich nach den anderen Blöcken, nicht mehr nach
   einem eigenen Abschnitt. Die Höhe entspricht zwei Reihen der
   Team-Fotos links, damit beide Spalten auf derselben Linie enden. */
.team-group {
  margin-bottom: 1.25rem;
  position: relative;
}
.team-group img {
  display: block;
  width: 100%;
  height: calc(2 * var(--team-photo) + var(--team-photo-gap));
  object-fit: cover;
  /* Die Köpfe stehen im oberen Bildbereich — mittig beschnitten wurden
     sie angeschnitten. Der Ausschnitt beginnt an der Oberkante. */
  object-position: top;
  border-radius: .55rem;
  transition: transform .2s ease;
}
/* Zoom nur bei echtem Hover — auf Touch-Geräten löste schon das
   Antippen die Vergrößerung aus. */
@media (hover: hover) {
  .team-group:hover { z-index: 1; }
  .team-group:hover img { transform: scale(2); }
}

.footer__grid {
  display: grid;
  gap: clamp(2rem, 5vw, 4rem);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  align-items: start;
  padding-block: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
}

/* Der Team-Block trägt Fotos und zehn Namen — er braucht mehr Breite als
   die kurzen Blöcke daneben. Gleich breite Spalten lassen ihn schmal und
   hoch wirken, während rechts Leerraum steht. */
@media (min-width: 61rem) {
  .footer__grid {
    grid-template-columns:
      minmax(0, 1.75fr)  /* Team      */
      minmax(0, 1fr)     /* Betreuung */
      minmax(0, 1.15fr)  /* Kontakt   */
      minmax(0, .7fr);   /* Recht     */
    gap: clamp(2rem, 4vw, 3.5rem);
  }
}

/* --team-photo ist die gemessene Kantenlänge eines Team-Fotos; team-hover.js
   schreibt sie fort (die Fotos sind fluide). Der Startwert gilt nur, bis das
   Skript greift. Das Gruppenbild leitet daraus seine Höhe ab. */
.footer {
  --team-photo: 4rem;
  --team-photo-gap: .5rem;
}

.team-photos {
  list-style: none; margin: 0 0 1.25rem; padding: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--team-photo-gap);
  max-width: 22rem;
}
.team-photos img {
  width: 100%;
  aspect-ratio: 1;
  border-radius: .55rem;
  object-fit: cover;
  /* Gesichter sitzen im oberen Bilddrittel — mittig beschnitten fielen
     sie beim quadratischen Ausschnitt teilweise heraus. */
  object-position: top;
  transition: transform .2s ease;
}
/* das gehoverte Bild wächst über seine Nachbarn hinaus, ohne das
   Raster zu verschieben */
.team-photos li { position: relative; }
.team-photos li:hover,
.team-photos li.is-active { z-index: 1; }
.team-photos li:hover img,
.team-photos li.is-active img { transform: scale(2); }

@media (prefers-reduced-motion: reduce) {
  .team-photos img,
  .team-group img { transition: none; }
}

.team, .footer__links { list-style: none; margin: 0; padding: 0; }
.team li { margin-bottom: .35rem; font-weight: 500; }

/* Zehn Namen einspaltig geraten zu lang — zweispaltig neben den Fotos.
   Der Fluss läuft spaltenweise, damit die alphabetische Reihenfolge
   erst die linke Spalte hinunter und dann die rechte läuft. */
.team--split {
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  column-gap: 1.5rem;
  max-width: 24rem;
}

/* Name und Foto gehören zusammen: das Überfahren des einen hebt
   auch das andere hervor (Paarung über data-member, siehe team-hover.js) */
.team--split li {
  cursor: default;
  transition: color .2s ease;
}
.team--split li.is-active { color: var(--ink); }

/* Zurückgenommen, aber nicht ausgeblichen: opacity .75 brachte den kleinen
   Text auf 4.14:1. Der gemischte Ton hält 5.70:1. */
.team__note {
  display: block;
  font-weight: 400;
  font-size: .85rem;
  color: color-mix(in srgb, var(--deep) 88%, var(--bg));
}

.footer__links li { margin-bottom: .35rem; }
.footer__location { font-size: .95rem; margin-top: .6rem; }

.footer__line {
  margin: 0;
  padding-top: 1.5rem;
  border-top: 2px solid color-mix(in srgb, var(--accent) 55%, transparent);
  font-size: .9rem;
}