/* ==========================================================================
   Partnerraster der Partnerseite (pn- prefix)

   Eigener Prefix, weil pa- in partner.css schon vollstaendig belegt ist —
   pa-cat-card, pa-why-card und so weiter. Eine Kollision faellt hier nicht
   auf, sie aendert nur still ein Mass (Lektion vom 31.07., pmh-Prefix).

   Die Datei wird mit Prioritaet 30 geladen, also nach nachbau-partner.css.
   Alles haengt an .pa-page, damit die Farbvariablen aus partner.css gelten.
   ========================================================================== */

/* 100% innerhalb der Divi-Row (die begrenzt schon auf 1140px), 1140px falls
   der Shortcode einmal ohne Container steht. 90% waeren hier doppelt
   eingerueckt und das Raster staende schmaler als jede andere Sektion. */
.pa-page .pn-liste {
  width: min(100%, 1140px);
  margin: 0 auto;
}

/* --- Filterleiste --------------------------------------------------------
   hidden, bis das Skript sie freischaltet: ohne JavaScript sollen alle Karten
   sichtbar sein und keine Knoepfe herumstehen, die nichts bewirken. */
.pa-page .pn-filter { display: none; }
.pa-page .pn-liste.pn-filter-an .pn-filter {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin: 0 0 40px;
}

.pa-page .pn-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 10px 18px;
  border: 1px solid var(--pa-border);
  border-radius: 999px;
  background: var(--pa-white);
  color: var(--pa-text);
  font-family: "Inter", sans-serif;
  font-size: 14px;
  font-weight: 500;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color .25s var(--pa-ease), color .25s var(--pa-ease),
              background-color .25s var(--pa-ease), transform .25s var(--pa-ease);
}
.pa-page .pn-chip:hover { border-color: var(--pa-gold); transform: translateY(-2px); }
.pa-page .pn-chip:focus-visible { outline: 2px solid var(--pa-gold); outline-offset: 2px; }
.pa-page .pn-chip.is-active {
  background: var(--pa-gold-gradient);
  border-color: transparent;
  color: var(--pa-white);
}

.pa-page .pn-chip-zahl {
  display: inline-block;
  min-width: 20px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--pa-gold-bg);
  color: var(--pa-gold-dark);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.pa-page .pn-chip.is-active .pn-chip-zahl {
  background: rgba(255,255,255,.22);
  color: var(--pa-white);
}

/* --- Raster --------------------------------------------------------------
   320px Mindestbreite ergibt im 1140er Container drei Spalten zu 364px. Mit
   260px waren es vier zu 267px, und darin brach jeder Satz nach drei Woertern
   um — die Karten wurden doppelt so hoch wie noetig.
   minmax(320px, 1fr): der zweite Wert darf nicht auf min-content wachsen,
   sonst sprengt eine lange URL oder ein breites Logo die Spalte. */
.pa-page .pn-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* --- Karte --------------------------------------------------------------- */
.pa-page .pn-card {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 28px;
  border: 1px solid var(--pa-border);
  border-radius: var(--pa-radius);
  background: var(--pa-white);
  transition: border-color .3s var(--pa-ease), box-shadow .3s var(--pa-ease),
              transform .3s var(--pa-ease);
}
.pa-page .pn-card:hover {
  border-color: var(--pa-gold);
  box-shadow: 0 18px 40px rgba(72,72,72,.10);
  transform: translateY(-4px);
}
/* Fokus liegt auf dem Link in der Ueberschrift, der Rahmen gehoert um die
   ganze Karte — sonst umrandet er nur den Namen und der Rest wirkt fremd. */
.pa-page .pn-card:focus-within {
  border-color: var(--pa-gold);
  box-shadow: 0 0 0 3px var(--pa-gold-bg);
}

/* --- Logoflaeche ---------------------------------------------------------
   Feste Hoehe, damit die Pillen darunter auf einer Linie liegen, egal ob das
   Logo quer (KWM), hoch (aesthetic guidance) oder quadratisch ist. */
.pa-page .pn-card-plate {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  margin: 0 0 22px;
  padding: 0 8px;
}
/* Feste Hoehe, nicht max-height!
   Die Logodateien bringen sehr verschiedene Eigenmasse mit: das Nelly-SVG
   sagt 100x40, das von Kloppe 814x432. Mit max-height bleibt das kleine
   Logo bei 40 px stehen, waehrend das grosse auf 56 px gedeckelt wird —
   im Raster sah das aus, als waeren die Logos zufaellig skaliert.
   height + object-fit:contain zieht jedes auf dieselbe Hoehe; ist ein Logo
   dafuer zu breit (KWM liegt bei 6,5:1), greift max-width und contain
   verkleinert es proportional, statt es zu verzerren. */
.pa-page .pn-card-logo {
  height: 56px;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: center;
}
/* Ohne Logodatei: Anfangsbuchstaben im Kreis, wie bei den Teamkarten ohne
   Foto. Gleiche Hoehe wie ein Logo, damit die Reihe nicht verspringt. */
.pa-page .pn-card-monogramm {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border: 1px solid rgba(191,167,98,.35);
  border-radius: 50%;
  background: var(--pa-gold-bg);
  color: var(--pa-gold-dark);
  font-family: "Montserrat", sans-serif;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: .02em;
}

/* --- Pille, Name, Text --------------------------------------------------- */
.pa-page .pn-card-kat {
  display: inline-block;
  align-self: flex-start;
  margin: 0 0 12px;
  padding: 5px 12px;
  border: 1px solid rgba(191,167,98,.35);
  border-radius: 999px;
  background: var(--pa-gold-bg);
  color: var(--pa-gold-dark);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: .01em;
}

.pa-page .pn-card-title {
  margin: 0 0 12px;
  font-family: "Montserrat", sans-serif;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--pa-dark);
}
.pa-page .pn-card-title a {
  color: inherit;
  text-decoration: none;
}
/* Die ganze Karte anklickbar machen, ohne sie in ein <a> zu packen — so
   bleibt genau ein Link je Karte in der Tastatur-Reihenfolge. */
.pa-page .pn-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--pa-radius);
}
.pa-page .pn-card-title a:focus-visible { outline: none; }

.pa-page .pn-card-text {
  margin: 0 0 22px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--pa-muted);
}
.pa-page .pn-card-text p { margin: 0; }
.pa-page .pn-card-text p + p { margin-top: 10px; }

/* --- Link unten ---------------------------------------------------------- */
.pa-page .pn-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: auto 0 0;          /* schiebt den Link an den Kartenfuss */
  color: var(--pa-gold-dark);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
}
.pa-page .pn-card-pfeil {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  transition: transform .25s var(--pa-ease);
}
.pa-page .pn-card:hover .pn-card-pfeil { transform: translate(2px, -2px); }

/* --- Filterzustaende ----------------------------------------------------- */
.pa-page .pn-card[hidden] { display: none; }
.pa-page .pn-leer-filter[hidden] { display: none; }
.pa-page .pn-leer-filter {
  margin: 0;
  padding: 40px 0;
  text-align: center;
  color: var(--pa-muted);
  font-size: 15px;
}
.pa-page .pn-leer {
  margin: 0;
  padding: 28px;
  border: 1px dashed rgba(191,167,98,.5);
  border-radius: var(--pa-radius-sm);
  background: var(--pa-gold-bg);
  color: var(--pa-text);
  font-size: 15px;
  text-align: center;
}

/* --- Einblenden ----------------------------------------------------------
   Nur ueber transform. Ein opacity-Start laesst Karten unsichtbar stehen,
   wenn die Animation nicht laeuft — das ist auf dieser Seite schon zweimal
   passiert (Kundenseite 29.07., Stellenanzeigen 02.09.). */
.pa-page .pn-reveal {
  animation: pnRein .5s var(--pa-ease) both;
  animation-delay: calc(var(--delay, 0) * 55ms);
}
@keyframes pnRein {
  from { transform: translateY(16px); }
  to   { transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pa-page .pn-reveal { animation: none; }
  .pa-page .pn-card,
  .pa-page .pn-chip,
  .pa-page .pn-card-pfeil { transition: none; }
  .pa-page .pn-card:hover { transform: none; }
}

/* --- Schmale Schirme ----------------------------------------------------- */
@media (max-width: 640px) {
  .pa-page .pn-grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .pa-page .pn-card { padding: 24px; }
  .pa-page .pn-chip { padding: 9px 14px; font-size: 13px; }

  /* Umbrechend stand bei 390px jeder Knopf auf einer eigenen Zeile — sechs
     Zeilen, bevor die erste Karte kam. Als schiebbare Reihe braucht die
     Leiste eine Zeile; die angeschnittenen Knoepfe am Rand zeigen, dass es
     weitergeht. Das Schieben bleibt in der Leiste, die Seite selbst
     bekommt dadurch keinen seitlichen Ueberlauf. */
  .pa-page .pn-liste.pn-filter-an .pn-filter {
    flex-wrap: nowrap;
    justify-content: flex-start;
    margin: 0 -16px 28px;
    padding: 2px 16px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .pa-page .pn-filter::-webkit-scrollbar { display: none; }
  /* Bewusst ohne scroll-snap: mit "x proximity" stand die Leiste beim Laden
     schon um die 16px padding-left verschoben da, der Knopf "Alle" war links
     angeschnitten. Snap rechnet den Innenabstand nicht mit, und fuer eine
     Reihe unterschiedlich breiter Knoepfe bringt Einrasten ohnehin nichts. */
  .pa-page .pn-chip { flex: 0 0 auto; }
}