/* =============================================================================
   PHYSIOPARK MG · KRANKENGYMNASTIK & SPORTPHYSIOTHERAPIE (/krankengymnastik) — Seiten-CSS
   Datei:   ppw-krankengymnastik.css       Version: 0.1.0
   System:  gebrückt auf ppw-base.css (globale --ppw-* Tokens, Hardcode-
            Fallbacks eingebaut, 0 sichtbare Änderung)
   Scope:   alles unter .lp-page gekapselt.

   CHANGELOG (neueste zuerst · historische Einträge NIE umschreiben)
   --------------------------------------------------------------------------
   0.1.0 · 2026-07-20
     - Erste versionierte Ablage, aus Live-Seite übernommen und bereinigt.
     - 1 Elementor-Rahmen-Regeln entfernt
     - :root-Tokenblock auf .lp-page umgehängt (Token-Kapselung)
     - Globale *box-sizing-Regel auf .lp-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.
   ============================================================================= */

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

.lp-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;
  --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
}

@media (hover:hover) and (pointer:fine) {
  html {
    scroll-behavior:smooth
  }

}

.lp-page {
  font-family:var(--font-family);
  color:var(--text);
  padding:28px 14px 44px;
  background:radial-gradient(980px 420px at 4% 0%,rgba(15,92,99,.11),transparent 72%),radial-gradient(760px 320px at 100% 10%,rgba(15,92,99,.08),transparent 72%),linear-gradient(180deg,#f8fcfc 0%,var(--bg) 100%)
}

.lp-page .container {
  max-width:1120px;
  margin:0 auto;
  padding:0 10px
}

.lp-actions-row {
  margin-top:22px;
  display:flex;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;
  width:100%
}

a.lp-btn,button.lp-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:10px 16px;
  border-radius:var(--ui-radius-pill);
  border:1px solid transparent;
  text-decoration:none !important;
  font-size:1rem;
  font-weight:700;
  color:#fff;
  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;
  cursor:pointer;
  font-family:inherit
}

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

.lp-btn-ghost {
  background:#fff !important;
  color:#103a43 !important;
  border:1px solid #8fb5ba !important;
  box-shadow:none !important
}

.lp-btn-ghost:hover,.lp-btn-ghost:focus-visible {
  background:#e6f1f3 !important;
  border-color:#6e9ea5 !important;
  color:#0b3038 !important
}

.dropdown-wrapper {
  position:relative;
  display:inline-block;
  width:auto
}

.dropdown-wrapper .dropdown-toggle {
  width:100%
}

.dropdown-menu {
  position:absolute;
  top:100%;
  left:50%;
  transform:translateX(-50%) translateY(10px);
  background:var(--surface);
  min-width:240px;
  border-radius:12px;
  box-shadow:0 12px 28px rgba(0,0,0,.15);
  border:1px solid var(--border);
  padding:8px 0;
  z-index:100;
  opacity:0;
  visibility:hidden;
  transition:all .2s ease
}

.dropdown-wrapper.is-active .dropdown-menu {
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(5px)
}

.lp-bottom .dropdown-menu {
  top:auto;
  bottom:100%;
  transform:translateX(-50%) translateY(-10px)
}

.lp-bottom .dropdown-wrapper.is-active .dropdown-menu {
  transform:translateX(-50%) translateY(-5px)
}

.dropdown-item {
  display:block;
  padding:12px 18px;
  color:var(--text);
  text-decoration:none !important;
  font-weight:700;
  font-size:.95rem;
  transition:background-color .2s ease,color .2s ease;
  text-align:left
}

.dropdown-item:hover,.dropdown-item:focus {
  background-color:var(--surface-soft);
  color:var(--primary)
}

.lp-panel,.lp-card {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:24px
}

.lp-section-head h2,.lp-bottom h2 {
  margin:0 0 18px;
  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:8px;
  text-align:center
}

.lp-bottom h2:after {
  content:"";
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  bottom:0;
  width:100%;
  height:4px;
  border-radius:999px;
  background:linear-gradient(90deg,transparent,var(--heading-accent) 15%,#4f8b92 50%,var(--heading-accent) 85%,transparent)
}

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

.lp-hero,.lp-bottom {
  text-align:center;
  padding:30px 24px;
  display:flex;
  flex-direction:column;
  align-items:center
}

.lp-hero h1 {
  margin:0 0 16px;
  font-size:clamp(1.9rem,2.2vw + 1rem,2.8rem);
  line-height:1.15;
  color:var(--heading-main)
}

.lp-hero p,.lp-bottom p,.lp-section-head p {
  margin:0 auto;
  max-width:920px;
  color:var(--muted);
  line-height:1.75;
  font-size:1.08rem;
  text-align:center
}

.lp-section {
  margin-top:56px
}

.lp-section-head {
  margin:0 auto 24px;
  max-width:900px;
  text-align:left
}

.lp-section-head p {
  text-align:left
}

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

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

.lp-card {
  border-top:4px solid #7faeb3;
  border-left:none;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  transition:transform .24s ease,box-shadow .24s ease
}

.lp-card-highlight {
  border-top-color:var(--accent);
  background:linear-gradient(180deg,#fff,#fff6fa)
}

.lp-card:hover {
  transform:translateY(-4px);
  box-shadow:0 18px 32px rgba(7,24,28,.15)
}

.lp-card h3 {
  color:var(--heading-sub);
  font-size:1.2rem;
  font-weight:800;
  margin:0 0 12px
}

.lp-card p {
  margin:0;
  color:#1f3942;
  font-size:1.02rem;
  line-height:1.72
}

.hp4-hints {
  display:grid;
  gap:16px;
  grid-template-columns:repeat(3,minmax(0,1fr))
}

.hp4-hint {
  border-radius:12px;
  padding:20px;
  text-align:left;
  border:1px solid #d3e2e4;
  height:100%
}

.hp4-hint h3 {
  margin:0 0 10px;
  font-size:1.15rem;
  color:var(--heading-sub);
  font-weight:800
}

.hp4-hint p {
  margin:0 0 10px;
  color:#2f4750;
  line-height:1.65;
  font-size:1rem
}

.hp4-hint p:last-child {
  margin-bottom:0
}

.hp4-hint a {
  color:var(--primary);
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:2px
}

.hp4-hint a:hover {
  color:var(--primary-hover)
}

.hp4-hint-neutral {
  background:var(--surface-soft)
}

.hp4-hint-important {
  background:#ecf7f1;
  border-color:#c8e7d6
}

.hp4-hint-important h3 {
  color:#1e4b35
}

.hp4-hint-warning {
  background:#fff6f1;
  border-color:#f0d6c8
}

.hp4-hint-warning h3 {
  color:#8f4a2a
}

.faq-container {
  max-width:900px;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  gap:12px
}

.faq-category-title {
  margin:24px 0 8px;
  font-size:1.25rem;
  color:var(--heading-sub);
  font-weight:800;
  border-bottom:2px solid #d3e2e4;
  padding-bottom:6px
}

.faq-item {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  overflow:hidden;
  transition:box-shadow .2s ease
}

.faq-item:hover {
  box-shadow:0 6px 16px rgba(7,24,28,.08)
}

.lp-page .faq-container button.faq-question {
  width:100%;
  text-align:left;
  padding:18px 20px;
  font-size:1.1rem;
  font-weight:800;
  color:var(--heading-sub) !important;
  background:0 0 !important;
  border:none !important;
  cursor:pointer;
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:inherit;
  transition:color .2s ease
}

.lp-page .faq-container button.faq-question:hover,.lp-page .faq-container button.faq-question:focus,.lp-page .faq-container .faq-item.is-open button.faq-question {
  color:var(--primary) !important;
  outline:none !important;
  background:0 0 !important
}

.lp-page .faq-container button.faq-question:after {
  content:"+";
  font-size:1.6rem;
  font-weight:400;
  color:var(--primary) !important;
  transition:transform .3s ease
}

.lp-page .faq-container .faq-item.is-open button.faq-question:after {
  content:"−"
}

.faq-answer {
  max-height:0;
  opacity:0;
  padding:0 20px;
  overflow:hidden;
  transition:all .3s ease;
  color:#2f4750;
  line-height:1.7
}

.faq-item.is-open .faq-answer {
  max-height:1000px;
  opacity:1;
  padding:0 20px 20px
}

.faq-answer a {
  color:var(--primary);
  font-weight:800;
  text-decoration:underline;
  text-underline-offset:2px
}

.faq-answer a:hover {
  color:var(--primary-hover)
}

@media (max-width:1024px) {
  .lp-grid-3,.lp-grid-2,.hp4-hints {
    grid-template-columns:repeat(2,1fr)
  }

}

@media (max-width:760px) {
  .lp-grid-3,.lp-grid-2,.hp4-hints {
    grid-template-columns:1fr
  }

  .lp-panel,.lp-card,.hp4-hint {
    padding:18px 14px
  }

  .lp-section {
    margin-top:40px
  }

  .lp-actions-row {
    flex-direction:column;
    gap:8px
  }

  .lp-actions-row .lp-btn,.dropdown-wrapper {
    width:100%
  }

  .dropdown-menu,.lp-bottom .dropdown-menu {
    position:relative;
    top:0;
    bottom:auto;
    left:0;
    transform:none;
    width:100%;
    max-height:0;
    overflow:hidden;
    opacity:0;
    visibility:hidden;
    margin-top:0;
    box-shadow:none;
    border:1px solid transparent;
    background:var(--surface-soft);
    transition:max-height .3s ease,opacity .3s ease,margin .3s ease
  }

  .dropdown-wrapper.is-active .dropdown-menu,.lp-bottom .dropdown-wrapper.is-active .dropdown-menu {
    max-height:250px;
    opacity:1;
    visibility:visible;
    margin-top:8px;
    border:1px solid var(--border);
    transform:none
  }

  .lp-hero h1 {
    font-size:1.8rem
  }

  .lp-section-head h2,.lp-bottom h2 {
    font-size:1.6rem
  }

  .lp-hero p,.lp-bottom p,.lp-section-head p {
    font-size:1.15rem
  }

  .lp-card h3 {
    font-size:1.35rem
  }

  .lp-card p,.hp4-hint p {
    font-size:1.05rem
  }

  .lp-page .faq-container button.faq-question {
    font-size:1.05rem;
    padding:16px
  }

}