/* ==========================================================================
 * praxiszentrum — Schicht 3 Components (S2.0b, 2026-04-19, PXZ_VERSION 2.7.8)
 *
 * Angelegt gemäß DESIGN_GUIDELINES.md v3.0 §2 (4-Schichten-Token-Modell).
 * Zentrale Komponenten-Bibliothek für ALLE Templates:
 *   §1 Container
 *   §2 Typografie (Apple HIG §2.2)
 *   §3 Buttons
 *   §4 Section-Wrapper (Legacy .pxz-sect* + sprechender Alias .pxz-section*)
 *   §5 Card
 *   §6 Hero-Basis
 *
 * AUSNAHMEN (dokumentiert in spec S2.0b AK-2):
 *  - #fff Hex-Werte bleiben stehen, wo aus homepage.css byteidentisch übernommen
 *    (MD5-Null-Delta-Strategie). Token-Austausch (#fff -> var(--pxz-c-surface))
 *    erfolgt in S2.0d zusammen mit Home-Refactor.
 *  - 24px hartkodiert in .pxz-card Padding. Semantic-Token
 *    --pxz-space-card-padding-sm wird in S2.0d nachgezogen.
 *  - 64/80/96px in .pxz-sect Padding entsprechen Schicht-2-Tokens
 *    --pxz-space-section-y-mobile/-tablet/-y (geplante Migration S2.0d).
 *
 * Enqueue-Reihenfolge:
 *   pxz-tokens -> blocksy-parent -> praxiszentrum
 *   -> pxz-components -> page-CSS (homepage, karriere, standard, ...)
 * ========================================================================== */


/* ==========================================================================
 * §1 CONTAINER (Guideline 3.2)
 * ========================================================================== */
/* S39-it1 (2026-04-24): container widened to 1600px (prev 1280 +25%).
 * Header + Teaser stay full-viewport via their own overrides. Responsive
 * padding via clamp keeps comfortable side margins on every screen size. */
.pxz-container { max-width: var(--pxz-c3-max); margin: 0 auto; padding: 0 clamp(1rem, 4vw, 3rem); }  /* S55d C3 */

/* Prose utility — cap flowing text via C1-Token (DG §13 base, S55d). */
.pxz-prose { max-width: var(--pxz-c1-max); }
.pxz-prose-center { max-width: var(--pxz-c1-max); margin-left: auto; margin-right: auto; }


/* ==========================================================================
 * §2 TYPOGRAPHY SCALE (Apple HIG §2.2 — S40 Type-Scale T1..T8)
 * Token-Referenz: assets/css/tokens.css "Type-Scale semantic".
 * Evidence: specs/sprint-2/S40_evidence/apple-scale.json
 * ========================================================================== */
.pxz-display   { font-size: var(--pxz-t1-size); line-height: var(--pxz-t1-line); letter-spacing: var(--pxz-t1-track); font-weight: var(--pxz-t1-weight); text-wrap: balance; color: var(--pxz-text); }
.pxz-title-1   { font-size: var(--pxz-t2-size); line-height: var(--pxz-t2-line); letter-spacing: var(--pxz-t2-track); font-weight: var(--pxz-t2-weight); text-wrap: balance; color: var(--pxz-text); }
.pxz-title-2   { font-size: var(--pxz-t3-size); line-height: var(--pxz-t3-line); letter-spacing: var(--pxz-t3-track); font-weight: var(--pxz-t3-weight); color: var(--pxz-text); }
.pxz-title-3   { font-size: var(--pxz-t4-size); line-height: var(--pxz-t4-line); letter-spacing: var(--pxz-t4-track); font-weight: var(--pxz-t4-weight); color: var(--pxz-text); }
.pxz-headline  { font-size: var(--pxz-t5-size); line-height: var(--pxz-t5-line); letter-spacing: var(--pxz-t5-track); font-weight: var(--pxz-t5-weight); color: var(--pxz-text); }
.pxz-lead      { font-size: var(--pxz-t5-size); line-height: var(--pxz-t5-line); letter-spacing: var(--pxz-t5-track); font-weight: var(--pxz-t5-weight); color: var(--pxz-text-muted); }
.pxz-body      { font-size: var(--pxz-t6-size); line-height: var(--pxz-t6-line); letter-spacing: var(--pxz-t6-track); color: var(--pxz-text); }
.pxz-callout   { font-size: var(--pxz-t6-size); line-height: var(--pxz-t6-line); color: var(--pxz-text-muted); }
.pxz-footnote  { font-size: var(--pxz-t8-size); line-height: var(--pxz-t8-line); letter-spacing: var(--pxz-t8-track); color: var(--pxz-text-tertiary); font-weight: 500; }
/* S65 (2026-05-10): Eyebrow-Tracking 0.18em → 0.12em — apple.com/de
 * misst ~0.10–0.12em auf Section-Eyebrows. 0.18em wirkte stempelartig
 * und trug zum „templateartig"-Eindruck bei. Weight bleibt 700. */
.pxz-eyebrow   { font-size: var(--pxz-t7-size); text-transform: uppercase; letter-spacing: 0.12em; color: var(--pxz-accent); font-weight: 700; margin-bottom: 1.25rem; }
.pxz-soft { color: var(--pxz-text-tertiary); }


/* ==========================================================================
 * §3 BUTTONS (Guideline 6.1 — S40 Apple-Pill-Metrik)
 * Token-Referenz: tokens.css --pxz-btn-* (Apple-CTA-Messwerte 2026-04-24).
 * !important neutralisiert .pxz-home a color-Vererbung (homepage.css).
 * ========================================================================== */
/* S65 (2026-05-10): `transition: all` → spezifische Properties (vermeidet
 * Re-Paint auf jeder spec-Property, ruhigerer Hover-State, GPU-friendly). */
.pxz-btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border-radius: var(--pxz-radius-btn);
  padding: var(--pxz-btn-padding-y) var(--pxz-btn-padding-x);
  font-size: var(--pxz-btn-font-size); font-weight: var(--pxz-btn-font-weight);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
  line-height: 1;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  min-height: var(--pxz-btn-height-min);
}
.pxz-btn-primary       { background: var(--pxz-ink) !important;  color: #fff !important; }
.pxz-btn-primary:hover { background: var(--pxz-graphite) !important; color: #fff !important; }
.pxz-btn-accent        { background: var(--pxz-red) !important;  color: #fff !important; }
.pxz-btn-accent:hover  { background: var(--pxz-red-dark) !important; color: #fff !important; }
.pxz-btn-ghost         { background: #fff !important; color: var(--pxz-ink) !important; border: 1px solid var(--pxz-line); }
.pxz-btn-ghost:hover   { background: var(--pxz-chalk) !important; color: var(--pxz-ink) !important; }
.pxz-btn-amber         { background: var(--pxz-amber) !important; color: var(--pxz-ink) !important; }
.pxz-btn-amber:hover   { background: var(--pxz-amber-bright) !important; color: var(--pxz-ink) !important; }
.pxz-btn-dark-ghost    { color: #fff !important; border: 1.5px solid rgba(255,255,255,0.4); background: transparent !important; }
.pxz-btn-dark-ghost:hover { border-color: #fff; background: rgba(255,255,255,0.08) !important; color: #fff !important; }


/* ==========================================================================
 * §4 SECTION-WRAPPER (DESIGN_GUIDELINES §13.4)
 * Legacy-Namen .pxz-sect* (Home) + sprechender Alias .pxz-section* (Skelette).
 * Beide deklarationsidentisch. S2.0d loest den Dual-Name auf.
 * Padding 64/80/96 px (Standard-Sektion, PXZ-E-006-konform).
 * ========================================================================== */
.pxz-sect { padding: 64px 0; }
@media (min-width: 768px)  { .pxz-sect { padding: 80px 0; } }
@media (min-width: 1280px) { .pxz-sect { padding: 96px 0; } }
.pxz-sect-light { background: #fff; }
.pxz-sect-chalk { background: var(--pxz-chalk); }
.pxz-sect-head { max-width: var(--pxz-c2-max); margin-bottom: 72px; }  /* S55d C2 */
@media (min-width: 768px) { .pxz-sect-head { margin-bottom: 96px; } }
.pxz-sect-intro { margin-top: 1.75rem; max-width: var(--pxz-c1-max); }  /* S55d C1 */

.pxz-section { padding: 64px 0; }
@media (min-width: 768px)  { .pxz-section { padding: 80px 0; } }
@media (min-width: 1280px) { .pxz-section { padding: 96px 0; } }
.pxz-section-light { background: #fff; }
.pxz-section-chalk { background: var(--pxz-chalk); }
.pxz-section-head { max-width: var(--pxz-c2-max); margin-bottom: 72px; }  /* S55d C2 */
@media (min-width: 768px) { .pxz-section-head { margin-bottom: 96px; } }
.pxz-section-intro { margin-top: 1.75rem; max-width: var(--pxz-c1-max); }  /* S55d C1 */


/* ==========================================================================
 * §5 CARD (Basis fuer S2.2-Skelett-Templates)
 * AK-2-Ausnahme: 24px hartkodiert (kein Semantic-Token vorhanden).
 * Kommt in S2.0d als --pxz-space-card-padding-sm.
 * ========================================================================== */
.pxz-card {
  background: var(--pxz-c-surface);
  border-radius: var(--pxz-radius-card);
  box-shadow: var(--pxz-shadow-card);
  padding: 24px;
}


/* ==========================================================================
 * §6 HERO-BASIS
 * Nackter Hero-Baustein; page-spezifische Hero-Kinder (.pxz-hero-top,
 * .pxz-hero-sub, .pxz-hero-ctas, .pxz-hero-img*) bleiben in homepage.css.
 * ========================================================================== */
.pxz-hero { background: #fff; }

/* ==========================================================================
 * §7 DOCTOLIB FLOATING BUTTON (S41 → S52 → S67)
 * S41 (2026-04-25): Override auf hefo-Plugin-Snippet — vertikal mittig.
 * S52 (2026-04-29): Logo-Rot statt Doctolib-Blau.
 * S67 (2026-05-10): Plugin entfernt, Button vom Theme selbst gerendert
 *                   (inc/doctolib-floating-button.php). Klasse statt
 *                   Attribut-Selector. Desktop ≥ 769 px; Mobile nutzt
 *                   den Multi-Action-FAB in online-services/termin-fab.php.
 * ========================================================================== */
.pxz-doctolib-fab {
  position: fixed;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 90;
  display: flex;
  align-items: center;
  padding: 12px 18px;
  background-color: var(--pxz-red);
  color: #fff;
  font-family: var(--pxz-font-sans, system-ui, sans-serif);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  letter-spacing: 0.01em;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.18);
  transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.pxz-doctolib-fab:hover,
.pxz-doctolib-fab:focus-visible {
  background-color: var(--pxz-red-dark, var(--pxz-red));
  transform: translateY(-50%) translateX(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.22);
  color: #fff;
  text-decoration: none;
}
.pxz-doctolib-fab:focus-visible {
  outline: var(--pxz-focus-ring-width, 2px) solid var(--pxz-focus-ring-color, #fff);
  outline-offset: var(--pxz-focus-ring-offset, 2px);
}
@media (max-width: 768px) {
  .pxz-doctolib-fab { display: none; }
}