/* ============================================================
 * praxisgemeinschaft.css — page /praxis/ + /unsere-partner/
 * S59 (2026-05-01, Dr. Stracke). Eterno-style specialty grid
 * with corporate-red icons; card grid for cooperation practices.
 *
 * Container width follows _rules/CONTAINER_STANDARD.md (LL-058):
 * outer .pxz-container = 1600 px max, inner reading width ≤ 75ch.
 * ============================================================ */

/* ----- Hero — matches homepage hero (full-bleed, no max-width cap) ---
 * S59d (2026-05-01, Dr. Stracke): /praxis/ adopts the same container-rhythm
 * as the homepage. Hero is full-bleed with horizontal padding clamp(1rem,4vw,3rem)
 * (= .pxz-hero-top). Reading width for the lead paragraph is capped at
 * 75ch like the homepage's `.pxz-home .pxz-sect-intro` so long lines stay
 * readable on wide viewports. */
.pxz-pg-hero {
  max-width: none;
  margin: 0 auto;
  padding: 80px clamp(1rem, 4vw, 3rem) 40px;
  text-align: center;
  background: linear-gradient(180deg, #fff 0%, var(--pxz-mist-bg, #f6f7f9) 100%);
}
@media (min-width: 768px)  { .pxz-pg-hero { padding: 104px 48px 56px; } }
@media (min-width: 1280px) { .pxz-pg-hero { padding: 128px 64px 72px; } }

.pxz-pg-hero-inner {
  max-width: none;
  margin: 0 auto;
}

/* S60d (Dr. Stracke 2026-05-01): Hero-Logo der Praxisgemeinschaft.
 * Wiederverwendung des CSS-Background-Crop-Patterns aus nav.css (S59c):
 * <span> mit background-image + size = container × 1600/900, sodass der
 * Whitespace im 1600×1600 viewBox des logo.svg ausgeschnitten wird.
 * Größen ~1.5× der Header-Logo-Werte für die Hero-Prominenz. */
.pxz-pg-hero-logo {
  display: block;
  margin: 0 auto 1.75rem;
  width: 96px; height: 96px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 171px 171px;
}
@media (min-width: 768px)  { .pxz-pg-hero-logo { width: 120px; height: 120px; background-size: 213px 213px; margin-bottom: 2rem; } }
@media (min-width: 1280px) { .pxz-pg-hero-logo { width: 160px; height: 160px; background-size: 284px 284px; margin-bottom: 2.25rem; } }

.pxz-pg-hero .pxz-eyebrow {
  margin: 0 0 2rem;
}
.pxz-pg-hero .pxz-title-2 {
  margin: 0 0 1.5rem;
}
.pxz-pg-hero .pxz-title-2 .pxz-soft {
  color: var(--pxz-mist, #5b6b7c);
  font-weight: 400;
}
/* S61 (Dr. Stracke 2026-05-01): Hero-Lead auf Lese-Breite 75ch begrenzt, damit er
 * optisch zu den anderen Section-Intros (`.pxz-sect-intro`) passt. Vorher
 * `max-width: none` (S60c) — dehnte den Lead über die volle Hero-Breite und
 * wirkte zu breit gegenüber den restlichen Texten der Seite. */
.pxz-pg-lead {
  margin: 1.5rem auto 0;
  max-width: var(--pxz-c1-max);  /* S55d */
  text-align: center;
  text-wrap: balance;
  text-wrap: pretty;
}

/* ----- Stats strip (S60a, 2026-05-01) — between hero and story.
 * Pattern aligned with homepage `.pxz-stats-inner` (4-col on tablet+),
 * but lives in its own section so the hero stays clean.
 */
.pxz-pg-stats {
  background: transparent;
  margin: 0 auto;
}
.pxz-pg-stats-inner {
  max-width: var(--pxz-c3-max);  /* S55d */
  margin: 0 auto;
  padding: 24px clamp(1rem, 4vw, 3rem) 32px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem 1.5rem;
  text-align: center;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}
@media (min-width: 768px) {
  .pxz-pg-stats-inner {
    grid-template-columns: repeat(4, 1fr);
    padding: 32px 48px 40px;
    gap: 0 2rem;
  }
}
.pxz-pg-stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.pxz-pg-stat-n {
  font-size: var(--pxz-t4-size, 2.25rem);
  line-height: 1;
  letter-spacing: var(--pxz-t4-track, -0.01em);
  font-weight: var(--pxz-t4-weight, 700);
  color: var(--pxz-ink, #0a2540);
}
.pxz-pg-stat-l {
  font-size: var(--pxz-t6-size, 0.95rem);
  color: var(--pxz-mist, #5b6b7c);
}

/* ----- Story section (S60a) — 4-paragraph practice description.
 * Reading width 75ch, centered, on a soft mist tint to differentiate
 * from the white spec section that follows.
 */
.pxz-pg-story {
  background: var(--pxz-mist-bg, #f6f7f9);
}
.pxz-pg-story .pxz-sect-head {
  text-align: center;
  max-width: none;
  margin: 0 auto clamp(20px, 4vw, 36px);
}
/* S60d (Dr. Stracke 2026-05-01): Story-Body verwendet Standard `.pxz-lead`-
 * Schriftgröße (= --pxz-t5-size, gleicher Stil wie Hero-Lead und Sect-Intros).
 * Damit ist die Schriftgröße auf der gesamten Seite konsistent. Container-
 * Breite voll wie `.pxz-mfa-inner` der Homepage. */
.pxz-pg-story-body {
  max-width: none;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  text-align: center;
  text-wrap: balance;
  text-wrap: pretty;
}
.pxz-pg-story-body p {
  margin: 0;
}
.pxz-pg-story-body strong {
  color: var(--pxz-ink, #0a2540);
  font-weight: 600;
}

/* ----- Advantages section (S60a) — 6 static (non-clickable) cards.
 * Reuses .pxz-pg-grid + .pxz-pg-card layout but with .pxz-pg-card-static
 * (a <div> instead of <a>) and a flat hover-less treatment.
 */
/* S60d (2026-05-01): 8 Cards → Symmetrie 2×4 auf XL, 2×4=8 sauber.
 * Mobile 1, Tablet 2, Desktop 4 (statt vorher 1/2/3). */
@media (min-width: 1024px) {
  .pxz-pg-grid--adv { grid-template-columns: repeat(4, 1fr); }
}
.pxz-pg-card-static {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 24px;
  height: 100%;
  background: #fff;
  border: 1px solid var(--pxz-line, #e6e8ec);
  border-radius: var(--pxz-radius-card);
  color: var(--pxz-ink, #0a2540);
}
.pxz-pg-card-static .pxz-pg-card-name {
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
}
.pxz-pg-card-static .pxz-pg-card-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--pxz-mist, #5b6b7c);
}

/* ----- Section heading — homepage rhythm: section-head full-width, intro 75ch */
.pxz-pg-spec .pxz-sect-head,
.pxz-pg-coop .pxz-sect-head,
.pxz-pg-adv  .pxz-sect-head {
  text-align: center;
  max-width: none;
  margin: 0 auto clamp(28px, 5vw, 48px);
}
.pxz-pg-spec .pxz-sect-head .pxz-eyebrow,
.pxz-pg-coop .pxz-sect-head .pxz-eyebrow,
.pxz-pg-adv  .pxz-sect-head .pxz-eyebrow {
  margin: 0 0 12px;
}
.pxz-pg-spec .pxz-sect-head h2,
.pxz-pg-coop .pxz-sect-head h2,
.pxz-pg-adv  .pxz-sect-head h2 {
  margin: 0 0 14px;
}
/* Section intros mirror .pxz-home .pxz-sect-intro: 75ch reading width, centered. */
.pxz-pg-spec .pxz-sect-intro,
.pxz-pg-coop .pxz-sect-intro,
.pxz-pg-adv  .pxz-sect-intro {
  margin: 1.75rem auto 0;
  max-width: var(--pxz-c1-max);  /* S55d */
  text-wrap: pretty;
}

/* Differentiate cooperation rail from main grid via subtle band. */
.pxz-pg-coop {
  background: var(--pxz-rail-bg, #fbf6f5);
}

/* ----- Card grid (responsive 1 / 2 / 3 columns) ----------------- */
.pxz-pg-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) {
  .pxz-pg-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; }
}
@media (min-width: 1024px) {
  .pxz-pg-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; }
}
@media (min-width: 1280px) {
  .pxz-pg-grid { grid-template-columns: repeat(4, 1fr); }
}

/* Cooperation grid stays at 2 columns max so cards have breathing room. */
.pxz-pg-grid--coop {
  max-width: var(--pxz-c2-max);  /* S55d */
  margin: 0 auto;
}
@media (min-width: 1024px) {
  .pxz-pg-grid--coop { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1280px) {
  .pxz-pg-grid--coop { grid-template-columns: repeat(2, 1fr); }
}

/* ----- Card itself ---------------------------------------------- */
.pxz-pg-card {
  margin: 0;
  list-style: none;
}
/* S65c (2026-05-10): Easing auf Apple-Spring + längere Duration. */
.pxz-pg-card-link {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px 24px;
  height: 100%;
  background: #fff;
  border: 1px solid var(--pxz-line, #e6e8ec);
  border-radius: var(--pxz-radius-card);
  text-decoration: none;
  color: var(--pxz-ink, #0a2540);
  transition: transform .28s var(--pxz-easing-spring), box-shadow .28s var(--pxz-easing-spring), border-color .2s ease;
}
.pxz-pg-card-link:hover,
.pxz-pg-card-link:focus-visible {
  transform: translateY(-3px);
  border-color: var(--pxz-red, #c1121f);
  box-shadow: var(--pxz-shadow-card-hi);
  outline: none;
}
.pxz-pg-card-link:focus-visible {
  outline: var(--pxz-focus-ring-width) solid var(--pxz-focus-ring-color);
  outline-offset: var(--pxz-focus-ring-offset);
}

/* Icon — red, 56px, with subtle red-tint chip behind it */
.pxz-pg-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: var(--pxz-radius-input);
  background: rgba(193, 18, 31, 0.08);
  color: var(--pxz-red, #c1121f);
  flex-shrink: 0;
}
.pxz-pg-card-icon svg {
  width: 36px;
  height: 36px;
  display: block;
  color: inherit;
  fill: currentColor;
}

.pxz-pg-card-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-grow: 1;
}
.pxz-pg-card-name {
  font-size: 19px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--pxz-ink, #0a2540);
}
/* S65c (2026-05-10): Eyebrow-Tracking auf S65-Standard 0.10em. */
.pxz-pg-card-partner {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--pxz-red, #c1121f);
}
.pxz-pg-card-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--pxz-mist, #5b6b7c);
  flex-grow: 1;
}
.pxz-pg-card-cta {
  margin-top: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--pxz-red, #c1121f);
  letter-spacing: 0.01em;
}

/* ============================================================
 * Partner-Übersicht /unsere-partner/ — uses same pxz-pg-* vars
 * but grid stays at 2-col on tablet, 3 on desktop, 4 on XL.
 * ============================================================ */
.pxz-partner-grid {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px)  { .pxz-partner-grid { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1024px) { .pxz-partner-grid { grid-template-columns: repeat(3, 1fr); gap: 22px; } }
@media (min-width: 1280px) { .pxz-partner-grid { grid-template-columns: repeat(4, 1fr); } }

.pxz-partner-card {
  margin: 0;
}
.pxz-partner-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
  padding: 28px 22px;
  height: 100%;
  background: #fff;
  border: 1px solid var(--pxz-line, #e6e8ec);
  border-radius: var(--pxz-radius-card);
  text-decoration: none;
  color: var(--pxz-ink, #0a2540);
  transition: transform .28s var(--pxz-easing-spring), box-shadow .28s var(--pxz-easing-spring), border-color .2s ease;
}
.pxz-partner-link:hover,
.pxz-partner-link:focus-visible {
  transform: translateY(-3px);
  border-color: var(--pxz-red, #c1121f);
  box-shadow: var(--pxz-shadow-card-hi);
  outline: none;
}
.pxz-partner-link:focus-visible {
  outline: var(--pxz-focus-ring-width) solid var(--pxz-focus-ring-color);
  outline-offset: var(--pxz-focus-ring-offset);
}
.pxz-partner-avatar {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--pxz-mist-bg, #f4f1ef);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  font-weight: 700;
  font-size: 28px;
  color: var(--pxz-ink, #0a2540);
  flex-shrink: 0;
}
.pxz-partner-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.pxz-partner-name {
  font-size: 17px;
  line-height: 1.25;
  font-weight: 700;
}
.pxz-partner-role {
  font-size: 14px;
  line-height: 1.4;
  color: var(--pxz-mist, #5b6b7c);
}
.pxz-partner-cta {
  margin-top: auto;
  font-size: 13px;
  font-weight: 600;
  color: var(--pxz-red, #c1121f);
  padding-top: 6px;
}