/* =============================================================================
   PHYSIOPARK MG · Gemeinsame Website-Typografie
   Datei: ppw-typografie.css · Version: 0.1.8 · 2026-11-01

   0.1.8 · Supplements: Akzent des zentrierten Produkthinweises mittig.
   0.1.7 · Supplements: Hinweisüberschrift folgt als H2 der Abschnittsskala.
   0.1.6 · Supplements: Produkt-/Pakettitel an gemeinsame Größe und mittigen Akzent angeschlossen.
   0.1.5 · Aktuelles: Zwischenüberschriften im Beitrag nutzen die gemeinsame H2-Skala.
   0.1.4 · Fachseiten: Zierlinie unter „Weitere Informationen“ mittig.
   0.1.3 · FDM: mittiger Titelakzent in der zentrierten Abschlusskarte.
   0.1.2 · Soforthilfe: Akzent folgt den vorhandenen zentrierten Titeln.
   0.1.1 · Kurzer statischer Gold-Petrol-Akzent unter redaktionellen Titeln.
   0.1.0 · Ruhige Serifen für redaktionelle Titel, klare Systemschrift für
   untergeordnete Überschriften. Farben und funktionale Komponentengrößen
   bleiben bei ihren Bausteinen. Ohne zusätzliche Schriftdateien.
   ============================================================================= */

:root {
  --ppw-font-head: Georgia, "Times New Roman", serif;
  --ppw-h1: clamp(2rem, 1.35rem + 2.5vw, 3.5rem);
  --ppw-h2: clamp(1.5rem, 1.12rem + 1.5vw, 2.2rem);
  --ppw-h3: clamp(1.05rem, 1rem + .35vw, 1.25rem);
  --ppw-heading-weight: 400;
  --ppw-heading-tracking: -.025em;
  --ppw-heading-leading: 1.14;
  --ppw-subheading-weight: 650;
}

/* Nur der öffentliche Inhalt. Funktionsbereiche behalten ihre eigene Skala.
   :where hält die Ausnahmen ohne zusätzliche Selektor-Spezifität lesbar. */
#content :is(h1, h2):not(:where(
  .ppshop *, .ppshop-wrap *, .ppanfrage-wrap *, .ppabsage-wrap *, .pp-anam *,
  .ppanfrage-form *, .ppabsage-form *, .ppergo-form *,
  .pp-prak-form *, .pp-kontakt-form *, .fb-anfrage *,
  .sp-anfrage-rahmen *, .hp4-form *,
  dialog *, [role="dialog"] *, .modal-content *, .reha-modal-content *,
  .ppb *, .ppb-card *, .ppb-slide *, .pp-bewertungen *,
  .pp-footer *, #pp-header-premium *
)),
#content .pptermine-hero-title,
#content .ppabsage-title,
#content .pptermine-kontakt-title,
#content .pptermine-weiter-title,
#content .pptermine-faq-title,
#content .ppergo-heading h1 {
  font-family: var(--ppw-font-head);
  font-weight: var(--ppw-heading-weight);
  font-style: normal;
  font-synthesis: none;
  letter-spacing: var(--ppw-heading-tracking);
  line-height: var(--ppw-heading-leading);
  text-transform: none;
  text-wrap: balance;
  overflow-wrap: anywhere;
  word-break: normal;
  hyphens: auto;
  min-inline-size: 0;
  max-inline-size: 100%;
}

/* Seitentitel: dieselbe fließende Skala auf Desktop und Mobil. */
#content h1:not(:where(
  .ppshop *, .ppshop-wrap *, .ppanfrage-wrap *, .ppabsage-wrap *, .pp-anam *,
  dialog *, [role="dialog"] *, .modal-content *, .reha-modal-content *
)),
#content .ppanfrage-wrap:not(.pptermine-flow-aktiv) h1.pptermine-hero-title,
#content .ppabsage-title,
#content .ppergo-heading h1 {
  font-size: var(--ppw-h1);
}

/* Echte Abschnittstitel. Karten-, Preis-, Formular- und Dialogüberschriften
   erhalten die gemeinsame Schrift, aber ihre passende kompakte Größe. */
#content :is(
  .pp-home .home-panel > h2,
  .pp-home .home-benefits h2,
  .pp-home .location-section h2,
  .pp-home .award-box h2,
  .pp-home .review-box h2,
  .pp-home .partner-title,
  .pp-home .bottom-cta-panel h2,
  .lp-section-head h2, .lp-bottom h2,
  .locations-page .cta-box-bottom h2,
  .bp-section > h2, .np-section > h2,
  .mt-card > h2, .mt-section-head h2, .mt-cta-text h2,
  .pnf-card > h2, .pnf-section-head h2, .pnf-cta-text h2,
  .lin-card > h2, .lin-section-head h2, .lin-about-text h2, .lin-bottom-text h2,
  .np-section-head h2, .cmd-content > h2, .fdm-panel > h2,
  .lc-cta-text h2, .sp-section > h2, .sp-diag-text h2, .sp-cta-banner-text h2,
  .privacy-section h2, .fb-abschnitt-titel, .pp-news-body h2,
  .product-table-container .package-section > h2, .product-table-container .sales-announcement h2,
  .lc-expert-section-head h2,
  .reha-card > h2, .reha-card-head h2,
  .kurs-section > h2, .kurs-anmeldung-head h2,
  .kurs-ansprechpartner-text h2, .kurs-trainerin-text h2,
  .hp4-section-head h2, .hp4-bottom h2,
  .pp-faq-page .faq-category-title,
  .pp-faq-page .bottom-cta-panel h2,
  .ppw-editorial > h2, .ppw-section-title,
  .ergo-section > h2, .ergotherapie-section > h2,
  .pp-ergo-section h2
) {
  font-size: var(--ppw-h2);
  line-height: 1.2;
  letter-spacing: -.018em;
}

/* Kleine Überschriften bleiben klar und kompakt. Personen-, Bewertungs-,
   Formular- und Dialogdarstellungen behalten ihren jeweiligen Vertrag. */
#content :is(h3, h4):not(:where(
  .ppshop *, .ppshop-wrap *, .ppanfrage-wrap *, .ppabsage-wrap *, .pp-anam *,
  .ppanfrage-form *, .ppabsage-form *, .ppergo-form *,
  .pp-prak-form *, .pp-kontakt-form *, .fb-anfrage *,
  .sp-anfrage-rahmen *, .hp4-form *,
  dialog *, [role="dialog"] *, .modal-content *, .reha-modal-content *,
  .ppb *, .ppb-card *, .ppb-slide *, .pp-bewertungen *,
  .pp-footer *, #pp-header-premium *
)) {
  font-family: var(--ppw-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif);
  font-weight: var(--ppw-subheading-weight);
  letter-spacing: -.01em;
  text-wrap: balance;
  overflow-wrap: anywhere;
  word-break: normal;
}

/* Gemeinsamer ruhiger Titelakzent. Ersetzt in ppw-typografie.css den bisherigen
   Block „Vorhandene breite, teils animierte Titel-Unterstreichungen entfallen“.
   Nicht zusätzlich hinter dessen content:none-Regeln anhängen. */

:root {
  --ppw-title-rule-width: 52px;
  --ppw-title-rule-gold: var(--ppw-accent-gold);
  --ppw-title-rule-end: var(--ppw-brand, #0f5c63);
  --ppw-title-rule-margin: 0;
}

/* Im Textfluss statt absolut positioniert: mehrzeilige und bereits inline
   dargestellte Titel bekommen einen eigenen, verlässlich freien Linienraum. */
#content :is(h1, h2):not(:where(
  .ppshop *, .ppshop-wrap *, .ppanfrage-wrap *, .ppabsage-wrap *, .pp-anam *,
  form *, .wpforms-container *, .ppanfrage-form *, .ppabsage-form *, .ppergo-form *,
  .pp-prak-form *, .pp-kontakt-form *, .fb-anfrage *,
  .sp-anfrage-rahmen *, .hp4-form *,
  dialog *, [role="dialog"] *, [aria-modal="true"] *, .modal-content *, .reha-modal-content *,
  .ppb *, .ppb-card *, .ppb-slide *, .pp-bewertungen *,
  .pp-footer *, #pp-header-premium *
)),
#content .ppanfrage-wrap:not(.pptermine-flow-aktiv) h1.pptermine-hero-title,
#content .ppabsage-title,
#content .ppergo-heading h1 {
  padding-block-end: 0;
}

#content :is(h1, h2):not(:where(
  .ppshop *, .ppshop-wrap *, .ppanfrage-wrap *, .ppabsage-wrap *, .pp-anam *,
  form *, .wpforms-container *, .ppanfrage-form *, .ppabsage-form *, .ppergo-form *,
  .pp-prak-form *, .pp-kontakt-form *, .fb-anfrage *,
  .sp-anfrage-rahmen *, .hp4-form *,
  dialog *, [role="dialog"] *, [aria-modal="true"] *, .modal-content *, .reha-modal-content *,
  .ppb *, .ppb-card *, .ppb-slide *, .pp-bewertungen *,
  .pp-footer *, #pp-header-premium *
))::after,
#content .ppanfrage-wrap:not(.pptermine-flow-aktiv) h1.pptermine-hero-title::after,
#content .ppabsage-title::after,
#content .ppergo-heading h1::after {
  content: "";
  display: block;
  position: static;
  inset: auto;
  float: none;
  transform: none;
  box-sizing: border-box;
  width: var(--ppw-title-rule-width);
  max-width: 100%;
  height: 2px;
  margin: 14px var(--ppw-title-rule-margin) 0;
  padding: 0;
  border: 0;
  border-radius: 1px;
  background: linear-gradient(90deg, var(--ppw-title-rule-gold), var(--ppw-title-rule-end));
  opacity: 1;
  box-shadow: none;
  animation: none;
  transition: none;
  pointer-events: none;
}

/* Die vorhandene Textausrichtung bleibt erhalten. Nur der Akzent folgt ihr.
   :where hält bewusste lokale Ausrichtungsangaben einfach überschreibbar. */
#content :where(
  .pp-home .home-hero h1,
  .pp-home .location-section h2,
  .pp-home .award-box h2,
  .pp-home .review-box h2,
  .pp-home .partner-title,
  .pp-home .bottom-cta-panel h2,
  .lp-hero h1, .lp-section-head h2, .lp-bottom h2,
  .locations-page .cta-box-bottom h2,
  .bp-cta-bottom h2, .np-section-head h2,
  .fdm-hero h1, .fdm-panel.text-center > h2,
  .hp4-hero h1, .hp4-section-head h2, .hp4-bottom h2,
  .reha-hero h1, .reha-card > h2, .reha-card-head h2,
  .kurs-hero h1, .kurs-anmeldung-head h2,
  .pp-news-hero h1, .fb-mehr-titel,
  .product-table-container > h1, .product-table-container .package-section > h2,
  .product-table-container .sales-announcement h2,
  .pp-faq-page .faq-header h1,
  .pp-faq-page .bottom-cta-panel h2,
  .privacy-head h1, .impressum-head h1, .pp-404-page h1,
  .pptermine-hero-title,
  #pp-bgm-2026 .pp-section-title--centered
) {
  --ppw-title-rule-margin: auto;
}

/* Gold bleibt auf den vorhandenen dunklen Auftaktflächen klar erkennbar. */
#content :where(
  .fb-hero,
  .kurs-hero,
  .sp-modern .sp-hero,
  #pp-bgm-2026 .pp-kontakt-section
) {
  --ppw-title-rule-gold: var(--ppw-accent-gold-light);
  --ppw-title-rule-end: var(--ppw-accent-gold-pale);
}

/* Diese beiden vorhandenen Kontaktabschnitte werden mobil zentriert. */
@media (max-width: 900px) {
  #content :where(.kurs-ansprechpartner-text h2) {
    --ppw-title-rule-margin: auto;
  }
}
@media (max-width: 640px) {
  #content :where(.kurs-trainerin-text h2) {
    --ppw-title-rule-margin: auto;
  }
}

/* Optional für spätere Seiten oder bewusst abweichende Abschnitte.
   Das Attribut darf am Abschnitt oder direkt am Titel stehen. */
#content [data-ppw-title-align="left"],
#content [data-ppw-title-align="left"] :is(h1, h2) {
  --ppw-title-rule-margin: 0;
}
#content [data-ppw-title-align="center"],
#content [data-ppw-title-align="center"] :is(h1, h2) {
  --ppw-title-rule-margin: auto;
}

/* Vorhandene Zusatzlinie an kleinen Kurs-Unterüberschriften entfällt weiterhin.
   Im aktiven Terminablauf bleibt der kompakte Kopf ohne dekorative Zusatzhöhe. */
#content .kurs-subheading::after,
#content .ppanfrage-wrap.pptermine-flow-aktiv .pptermine-hero-title::after {
  content: none;
}

@media print {
  #content :is(h1, h2)::after {
    display: none;
  }
}


/* Die alte BGF-Seite besitzt ID-Regeln mit !important. Ausschließlich deren
   typografische Eigenschaften werden an denselben Standard angeschlossen. */
#content #pp-bgm-2026 :is(h1, h2) {
  font-family: var(--ppw-font-head) !important;
  font-weight: var(--ppw-heading-weight) !important;
  line-height: var(--ppw-heading-leading) !important;
  letter-spacing: var(--ppw-heading-tracking) !important;
}
#content #pp-bgm-2026 h1 {
  font-size: var(--ppw-h1) !important;
}
#content #pp-bgm-2026 h2 {
  font-size: var(--ppw-h2) !important;
}
#content #pp-bgm-2026 :is(h3, h4, h5) {
  font-family: var(--ppw-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif) !important;
  font-weight: var(--ppw-subheading-weight) !important;
  letter-spacing: -.01em !important;
}
#content #pp-bgm-2026 .pp-hero-headline em {
  font-weight: inherit !important;
}

/* Der Fachseiten-Anfragekopf und die Terminkontakte sind Funktionsbereiche;
   ihre bestehenden Größen werden bewusst nicht vom Abschnittsraster erfasst. */
@media print {
  #content :is(h1, h2, h3, h4) {
    text-wrap: wrap;
  }
}