/* =============================================================================
   PHYSIOPARK MG · ERNÄHRUNGSBERATUNG FÜR IHR WOHLBEFINDEN IM PHYSIOPARK MG (/ernaehrungsberatung) — Seiten-CSS
   Datei:   ppw-ernaehrungsberatung.css       Version: 0.1.1
   System:  gebrückt auf ppw-base.css (globale --ppw-* Tokens, Hardcode-
            Fallbacks eingebaut, 0 sichtbare Änderung)
   Scope:   alles unter .nutrition-page gekapselt.

   CHANGELOG (neueste zuerst · historische Einträge NIE umschreiben)
   --------------------------------------------------------------------------
   0.1.1 · 2026-09-23
     - body-Regel ohne die Wrapper-Tokens: font-family und color nutzen jetzt
       direkte Werte (dieselben wie im .nutrition-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 .nutrition-page umgehängt (Token-Kapselung)
     - Globale *box-sizing-Regel auf .nutrition-page gescoped
     - --shadow Wert weicht ab (0 12px 28px rgba(7,24,28,.12)), nicht gebrückt
     - Token-Bruecken: --font-family, --surface, --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.
   ============================================================================= */

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

.nutrition-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:#4b7c7c;
  --primary-hover:#396060;
  --accent:#a01853;
  --border:#c1d6d9;
  --shadow:0 12px 28px rgba(7,24,28,.12);
  --radius:14px;
  --ui-radius-pill:999px;
  --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
}

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

.np-container {
  max-width:1240px;
  margin:0 auto
}

.np-panel {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:22px 20px;
  margin-bottom:26px
}

.np-hero {
  margin-bottom:32px
}

.np-hero-inner {
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);
  gap:24px;
  align-items:center
}

.np-hero-text h1 {
  margin:4px 0 14px;
  font-size:clamp(1.9rem,2.2vw + 1rem,2.7rem);
  line-height:1.15;
  letter-spacing:-.02em;
  font-weight:850;
  color:var(--heading-main);
  text-wrap:balance
}

.np-hero-lead {
  margin:0;
  color:var(--muted);
  line-height:1.75;
  font-size:1.06rem;
  font-weight:500
}

.np-hero-sub {
  margin:14px 0 0;
  font-size:.96rem;
  color:#35515a
}

.np-actions {
  margin-top:20px;
  display:flex;
  flex-wrap:wrap;
  gap:10px
}

.np-hero-media {
  text-align:center
}

.np-hero-photo-wrap {
  width:100%;
  max-width:260px;
  margin:0 auto 10px;
  border-radius:18px;
  background:#f2f6f7;
  box-shadow:0 14px 28px rgba(7,24,28,.18);
  overflow:hidden
}

.np-hero-photo {
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:18px;
  transform:scale(1.02);
  transition:transform .25s ease
}

.np-hero-photo-wrap:hover .np-hero-photo {
  transform:scale(1.06)
}

.np-hero-caption {
  margin:6px 0 0;
  font-size:.94rem;
  color:#2f4750;
  line-height:1.4
}

.np-btn,.np-btn:visited {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:46px;
  padding:9px 18px;
  border-radius:var(--ui-radius-pill);
  border:1px solid transparent;
  text-decoration:none !important;
  font-size:.98rem;
  font-weight:800;
  letter-spacing:.02em;
  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
}

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

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

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

.np-btn:focus-visible {
  outline:3px solid #0f5a63;
  outline-offset:2px
}

.np-section {
  margin-bottom:28px
}

.np-section h2 {
  margin:4px 0 12px;
  font-size:clamp(1.55rem,1.4vw + .9rem,2.05rem);
  line-height:1.18;
  letter-spacing:-.015em;
  font-weight:820;
  color:var(--heading-main);
  position:relative;
  display:inline-block;
  padding-bottom:6px
}

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

.np-text {
  margin:0;
  color:var(--text);
  font-size:1.02rem;
  line-height:1.75
}

.np-text+.np-text {
  margin-top:10px
}

.np-text-muted {
  color:var(--muted)
}

.np-section-head {
  text-align:center;
  margin-bottom:18px
}

.np-section-head h2 {
  display:inline-block
}

.np-section-head .np-text {
  max-width:720px;
  margin:6px auto 0
}

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

.np-package {
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:12px;
  padding:18px 16px 18px;
  box-shadow:var(--shadow);
  transition:transform .22s ease,box-shadow .22s ease;
  border-left:4px solid #7faeb3
}

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

.np-package--highlight {
  border-left-color:var(--accent);
  background:linear-gradient(180deg,#fff,#fff6fa)
}

.np-package h3 {
  margin:6px 0 8px;
  font-size:1.2rem;
  font-weight:820;
  color:var(--heading-sub)
}

.np-package .np-text {
  font-size:.98rem
}

.np-badge {
  display:inline-block;
  padding:4px 12px;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  border-radius:999px;
  margin-bottom:8px
}

.np-badge-new {
  background:var(--primary);
  color:#fff
}

.np-badge-hot {
  background:var(--accent);
  color:#fff
}

.np-package-list {
  margin:10px 0 10px 18px;
  padding:0;
  font-size:.96rem;
  color:#223740;
  line-height:1.6
}

.np-package-list li {
  margin-bottom:4px
}

.np-price {
  margin:8px 0 0;
  font-size:1.05rem;
  font-weight:800;
  color:#0f2128
}

.np-price-highlight {
  color:var(--accent)
}

.np-package-note {
  margin:4px 0 0;
  font-size:.9rem;
  color:#334850
}

.np-booking h2 {
  display:block
}

.np-iframe-wrap {
  margin-top:18px;
  background:var(--surface-soft);
  border-radius:12px;
  padding:14px;
  box-shadow:0 10px 24px rgba(7,24,28,.18)
}

.np-iframe-wrap iframe {
  width:100%;
  height:750px;
  border:none;
  border-radius:10px
}

@media (max-width:1024px) {
  .np-hero-inner {
    grid-template-columns:1fr
  }

  .np-hero-media {
    order:-1
  }

  .np-packages {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .np-iframe-wrap iframe {
    height:640px
  }

}

@media (max-width:768px) {
  .nutrition-page {
    padding:20px 10px 34px
  }

  .np-panel {
    padding:18px 14px
  }

  .np-packages {
    grid-template-columns:1fr
  }

  .np-actions {
    flex-direction:column;
    align-items:stretch
  }

  .np-btn,.np-btn--ghost {
    width:100%
  }

  .np-iframe-wrap iframe {
    height:560px
  }

}

@media (max-width:480px) {
  .np-section h2,.np-hero-text h1 {
    font-size:1.5rem
  }

  .np-hero-photo-wrap {
    max-width:210px
  }

}

@media (prefers-reduced-motion:reduce) {
  .np-btn,.np-package,.np-hero-photo,.np-iframe-wrap {
    transition:none !important;
    animation:none !important;
    transform:none !important
  }

}