/* =============================================================================
   PHYSIOPARK MG · LONG COVID THERAPIE IM PHYSIOPARK MG (/longcovid) — Seiten-CSS
   Datei:   ppw-longcovid.css       Version: 0.1.2
   System:  gebrückt auf ppw-base.css (globale --ppw-* Tokens, Hardcode-
            Fallbacks eingebaut, 0 sichtbare Änderung)
   Scope:   alles unter .lc-page gekapselt.

   CHANGELOG (neueste zuerst · historische Einträge NIE umschreiben)
   --------------------------------------------------------------------------
   0.1.2 · 2026-11-01
     - Lange CTA-Beschriftung darf mobil umbrechen: bei 320px kein
       waagerechter Seitenüberlauf mehr.

   0.1.1 · 2026-09-23
     - body-Regel ohne die Wrapper-Tokens: font-family und color nutzen jetzt
       direkte Werte (dieselben wie im .lc-page-Block). Die Tokens
       --font-family/--text/--bg sind nur im Seitenrahmen definiert, nicht am
       body — die Regel war dort ungueltig; ohne Seitenrahmen-Schrift erschien
       der Inhalt in der Serifen-Standardschrift des Browsers.
       Die Verlaufs-Zeile (background) ist ENTFALLEN statt repariert: sie war
       live nie wirksam (ungueltig), repariert haette sie erstmals einen
       Verlauf hinter die Seite gelegt — freigegeben war nur die Schrift
       (Gegenpruefung 24.09.). Die Hintergrundfarbe setzt weiter das Kit.
   0.1.0 · 2026-07-20
     - Erste versionierte Ablage, aus Live-Seite übernommen und bereinigt.
     - 2 Elementor-Rahmen-Regeln entfernt
     - :root-Tokenblock auf .lc-page umgehängt (Token-Kapselung)
     - Globale *box-sizing-Regel auf .lc-page gescoped
     - --shadow Wert weicht ab (0 12px 28px rgba(7,24,28,.12)), nicht gebrückt
     - Token-Bruecken: --font-family, --surface, --primary, --primary-hover, --heading-main
     - Manrope-Referenzen aus font-family entfernt

   ARBEITSREGELN (wie üblich)
     - KEINE Textänderung. Nur Präsentation/CSS.
     - Farben/Radien/Schatten über Tokens statt Hardcodes.
     - Klassennamen NICHT umbenennen (JS-Hooks).
     - Jede Änderung: Version hochziehen + hier loggen.
   ============================================================================= */

.lc-page *,.lc-page *:before,.lc-page *:after {
  box-sizing:border-box
}

.lc-page {
  --font-family: var(--ppw-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
  --bg:#edf4f6;
  --surface: var(--ppw-surface, #ffffff);
  --surface-soft:#f5f9fa;
  --card:#fff;
  --text:#0f2128;
  --muted:#2e4750;
  --primary: var(--ppw-brand, #0f5c63);
  --primary-hover: var(--ppw-brand-hover, #0b494f);
  --accent:#a01853;
  --border:#c1d6d9;
  --shadow:0 12px 28px rgba(7,24,28,.12);
  --radius:14px;
  --ui-radius-pill:10px;
  --heading-main: var(--ppw-heading, #0c2731);
  --heading-sub:#123c46;
  --heading-accent:#0f5c63
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  font-family:var(--ppw-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif);
  color:#0f2128
}

.lc-page {
  padding:28px 14px 44px
}

.lc-page .container {
  max-width:1120px;
  margin:0 auto
}

a.cta-button,a.cta-button:visited {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:10px 20px;
  border-radius:var(--ui-radius-pill);
  border:1px solid transparent;
  text-decoration:none !important;
  font-size:1rem;
  font-weight:700;
  color:#fff !important;
  background:linear-gradient(135deg,var(--primary),#2f7880);
  box-shadow:0 8px 18px rgba(15,91,99,.24);
  transition:transform .2s ease,box-shadow .2s ease,background-color .2s ease;
  white-space:nowrap
}

a.cta-button:hover {
  color:#fff !important;
  background:linear-gradient(135deg,var(--primary-hover),#256b72);
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(15,91,99,.3)
}

a.cta-button--ghost,a.cta-button--ghost:visited {
  background:#fff;
  color:#0f2128 !important;
  border:1px solid var(--primary);
  box-shadow:0 0 0 1px rgba(15,92,99,.08)
}

a.cta-button--ghost:hover {
  background:#d4ecf0;
  color:#0f2128 !important;
  border-color:var(--primary-hover)
}

a.cta-button:focus-visible,a.cta-button--ghost:focus-visible {
  outline:3px solid var(--accent);
  outline-offset:3px
}

.lc-hero {
  background:var(--surface);
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:var(--shadow);
  padding:26px 24px;
  margin-bottom:32px
}

.lc-hero-title {
  margin:0 0 14px;
  font-size:clamp(1.9rem,2.2vw + 1rem,2.6rem);
  line-height:1.18;
  letter-spacing:-.015em;
  font-weight:820;
  color:var(--heading-main);
  position:relative;
  display:inline-block;
  padding-bottom:6px
}

.lc-hero-title:after {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:86%;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--heading-accent),#4f8b92 60%,transparent)
}

.lc-hero-subtitle {
  margin:0 0 8px;
  font-size:1.05rem;
  color:var(--muted);
  font-weight:600
}

.lc-hero-text {
  margin:0 0 10px;
  font-size:1.02rem;
  color:var(--muted);
  line-height:1.7
}

.lc-hero-list {
  list-style:none;
  margin:12px 0 0;
  padding:0;
  font-size:.98rem;
  color:var(--muted)
}

.lc-hero-list li+li {
  margin-top:4px
}

.lc-expert-section {
  margin-bottom:32px
}

.lc-expert-section-head {
  margin-bottom:18px
}

.lc-expert-section-head h2 {
  margin:0 0 8px;
  font-size:clamp(1.5rem,1.4vw + .9rem,2.1rem);
  line-height:1.18;
  letter-spacing:-.015em;
  font-weight:820;
  color:var(--heading-main);
  position:relative;
  display:inline-block;
  padding-bottom:6px
}

.lc-expert-section-head h2:after {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:80%;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--heading-accent),#4f8b92 60%,transparent)
}

.lc-expert-section-head p {
  margin:0;
  font-size:1rem;
  color:var(--muted);
  line-height:1.6
}

.lc-expert-grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:20px
}

.lc-expert-grid-single {
  margin-top:18px;
  grid-template-columns:minmax(0,1fr)
}

.lc-expert-card {
  background:var(--surface);
  border-radius:var(--radius);
  border:1px solid var(--border);
  box-shadow:0 10px 24px rgba(7,24,28,.08);
  padding:16px 16px 14px;
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);
  gap:14px;
  align-items:center;
  border-left:4px solid #7faeb3
}

.lc-expert-card-image {
  max-width:180px;
  width:100%;
  justify-self:center
}

.lc-expert-card-image img {
  display:block;
  width:100%;
  height:auto;
  border-radius:12px;
  object-fit:cover;
  box-shadow:0 8px 18px rgba(7,24,28,.18)
}

.lc-expert-card-body h3 {
  margin:0 0 4px;
  font-size:1.2rem;
  font-weight:800;
  color:var(--heading-sub)
}

.lc-expert-card-role {
  margin:0 0 8px;
  font-size:.92rem;
  color:var(--primary);
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.08em
}

.lc-expert-card-body p {
  margin:0 0 6px;
  font-size:.98rem;
  color:var(--muted);
  line-height:1.7
}

.lc-expert-focus {
  font-size:.92rem;
  color:var(--muted)
}

.lc-sections {
  display:grid;
  gap:18px;
  margin-bottom:34px
}

.lc-box {
  background:linear-gradient(180deg,#fff,#f7fbfc);
  border-radius:var(--radius);
  border:1px solid var(--border);
  padding:18px 18px 16px;
  box-shadow:0 10px 24px rgba(7,24,28,.06);
  position:relative;
  overflow:hidden
}

.lc-box:before {
  content:"";
  position:absolute;
  left:0;
  top:12px;
  bottom:12px;
  width:4px;
  border-radius:999px;
  background:linear-gradient(180deg,var(--primary),#4f8b92)
}

.lc-box h2 {
  margin:0 0 10px 8px;
  font-size:clamp(1.3rem,1.05vw + 1rem,1.55rem);
  line-height:1.2;
  font-weight:800;
  color:var(--heading-sub);
  position:relative;
  padding-bottom:4px
}

.lc-box h2:after {
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width:46%;
  height:3px;
  border-radius:999px;
  background:linear-gradient(90deg,var(--heading-accent),transparent)
}

.lc-box p {
  margin:0 0 10px 8px;
  font-size:1rem;
  color:var(--muted);
  line-height:1.7
}

.lc-box ul {
  margin:0 0 6px 26px;
  padding:0;
  color:var(--muted);
  font-size:.98rem
}

.lc-box ul li+li {
  margin-top:4px
}

.lc-box p:last-child {
  margin-bottom:0
}

.lc-source {
  font-size:.9rem;
  color:var(--muted);
  opacity:.9
}

.lc-cta {
  margin-top:10px;
  padding:22px 20px;
  border-radius:var(--radius);
  background:radial-gradient(circle at top left,rgba(15,92,99,.08),#fff);
  border:1px solid var(--border);
  box-shadow:0 10px 26px rgba(7,24,28,.12);
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content:space-between;
  gap:14px
}

.lc-cta-text {
  max-width:520px
}

.lc-cta-text h2 {
  margin:0 0 6px;
  font-size:1.4rem;
  color:var(--heading-sub);
  font-weight:800
}

.lc-cta-text p {
  margin:0;
  font-size:1rem;
  color:var(--muted);
  line-height:1.6
}

.lc-cta-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px
}

@media (max-width:960px) {
  .lc-expert-grid {
    grid-template-columns:minmax(0,1fr)
  }

  .lc-expert-card {
    grid-template-columns:minmax(0,1fr)
  }

  .lc-expert-card-image {
    max-width:200px
  }

}

@media (max-width:760px) {
  .lc-page {
    padding:22px 10px 32px
  }

  .lc-hero {
    padding:20px 18px
  }

  .lc-hero-title {
    font-size:1.9rem
  }

  .lc-cta {
    flex-direction:column;
    align-items:flex-start
  }

  .lc-cta-actions {
    width:100%
  }

  .lc-cta-actions a {
    flex:1 1 auto;
    min-width:0;
    max-width:100%;
    white-space:normal;
    text-align:center;
    justify-content:center
  }

}

@media (prefers-reduced-motion:reduce) {
  .lc-expert-card,.lc-box,.lc-cta,a.cta-button,a.cta-button--ghost {
    transition:none !important
  }

}