/* Partner-Seite (Spec 2026-09-16-partner-page.md, Variante B aus dem Design-Canvas). Graue Fläche, darauf
   weiße Karten je Bereich mit den Logos in drei Spalten. Am Desktop jawigo als Kreis in der Mitte, die Karten
   links und rechts; darunter ein Baum: Kreis oben links, die Karten an einer senkrechten Linie. */

.page-partner main > .section { background: var(--surface-app); }

.partner-map { position: relative; display: flex; flex-direction: column; gap: 20px; }
.partner-lines { display: none; }

.partner-hub {
  position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  width: 80px; height: 80px;
  border: 1px solid var(--border-1); border-radius: 50%;
  background: var(--surface-card); box-shadow: var(--shadow-pop);
}
.partner-hub img { width: 62%; height: auto; }

.partner-area {
  position: relative; z-index: 1;
  padding: 20px 22px 22px;
  border: 1px solid var(--border-1); border-radius: var(--radius-card);
  background: var(--surface-card); box-shadow: var(--shadow-tile);
  scroll-margin-top: 24px;
}
.partner-area-head {
  display: block;
  margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--border-1);
  font-size: 16px; font-weight: 600; line-height: 1.3; letter-spacing: 0; color: var(--ink-1);
}

.partner-logos { list-style: none; margin: 0; padding: 0; max-width: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.partner-logos a, .partner-logos span {
  display: flex; align-items: center; justify-content: center;
  height: 64px; padding: 0 8px; border-radius: 8px;
  background: var(--surface-app);
  transition: background 150ms var(--ease-out), box-shadow 150ms var(--ease-out);
}
.partner-logos a:hover { background: var(--surface-card); box-shadow: 0 0 0 1px var(--border-2); }
/* Feste Höhe und object-fit: SVGs mit kleinen eigenen Maßen (Fiserv) wachsen so auf Zellengröße */
.partner-logos img { height: 40px; width: 100%; object-fit: contain; }

/* Baum unterhalb der Desktop-Grenze: die Linie läuft senkrecht unter der Kreismitte (40 px), jede Karte trägt
   ihr Stück davon (::before) und den Abzweig zur Kopfzeile (::after). Die letzte Karte endet am Abzweig. */
@media (max-width: 1023px) {
  .partner-map { padding-left: 64px; }
  .partner-hub { margin-left: -64px; }
  .partner-area::before, .partner-area::after { content: ""; position: absolute; background: var(--border-2); }
  .partner-area::before { left: -25px; top: -21px; bottom: -1px; width: 1.5px; }
  .partner-area:last-child::before { bottom: auto; height: 56px; }
  .partner-area::after { left: -25px; top: 34px; width: 24px; height: 1.5px; }
}

@media (min-width: 1024px) {
  .partner-map { display: grid; grid-template-columns: minmax(0, 7fr) minmax(180px, 5fr) minmax(0, 7fr); gap: 40px 0; align-items: center; }
  .partner-lines { display: block; position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; fill: none; stroke: var(--border-2); stroke-width: 1.5; }
  .partner-lines circle { fill: var(--brand-red); stroke: none; }
  .partner-hub { grid-column: 2; grid-row: 1 / span 3; justify-self: center; width: 180px; height: 180px; }
  .partner-area:nth-of-type(odd) { grid-column: 1; }
  .partner-area:nth-of-type(even) { grid-column: 3; }
  .partner-area:nth-of-type(1), .partner-area:nth-of-type(2) { grid-row: 1; }
  .partner-area:nth-of-type(3), .partner-area:nth-of-type(4) { grid-row: 2; }
  .partner-area:nth-of-type(5), .partner-area:nth-of-type(6) { grid-row: 3; }
}

@media (prefers-reduced-motion: reduce) { .partner-logos a { transition: none; } }