/* ============================================================
   PAGE — Preise  (Figma node 0:1173, design width 1920)
   Pricing page composed from shared `page_modules` layouts:
     page_intro     (title/intro — CSS in main.css .page-intro*)
     pricing_plans  (centered Monthly/Yearly toggle + two plan cards)
     faq            (REUSED home `faq` module verbatim — .faq__panel etc.)
   All values from docs/preise/figma-audit.json (0:1221 / 0:1224 / 0:1325).
   Prefix: .preise-. The pricing_plans module reuses the home Pricing leaf
   components (.pricing__toggle / .pricing__tab / .pricing__wrap / .plan-card* /
   .feature-item*); only the centered outer wrapper is page-specific (home's
   Pricing has a heading+toggle header row, this page has just the centered
   toggle). The FAQ is the SAME module as home — only its footer gap is set here.
   ============================================================ */

/* The grey field (#F7F7F8) + the title row are the SHARED page_intro module —
   .page-intro*, the .site-main:has(.page-intro) background and the footer-margin
   cancel all live in main.css. This file carries only page-specific rhythm. */

/* ---------- Pricing plans (0:1224) — NEW wrapper only; leaf components reused ---------- */
/* Vertical stack: the HUG toggle (centered) sits 50px above the two-card wrap.
   Home's Pricing has a heading+toggle header row, so .pricing__inner is not reused. */
.preise-pricing {
	margin-top: 100px; /* intro-bottom → pricing-top */
}

.preise-pricing__inner {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center; /* centers the HUG toggle above the full-width wrap */
	gap: 50px;
}

/* ---------- FAQ (0:1325) — REUSED home `faq` module ----------
   .section--faq (main.css) already supplies the 150px pricing→FAQ top gap; add
   only the FAQ→footer bottom gap (the shared footer's top margin is cancelled by
   .site-main:has(.page-intro) + .site-footer in main.css). */
.section--faq {
	margin-bottom: 150px;
}

/* ============================================================
   RESPONSIVE — page-specific `.preise-` rules only. The shared
   page_intro title, the reused pricing leaf + FAQ module, and the
   header/footer all respond via main.css at 1024/768/480 (main.css
   already tightens `.section--faq` margin-top on mobile). No Figma
   mobile frame exists for this page → values derived, not guessed.
   ============================================================ */

/* ---------- MOBILE  max-width: 768px ---------- */
@media (max-width: 768px) {
	.preise-pricing { margin-top: 80px; }
	.preise-pricing__inner { gap: 40px; }
	.section--faq { margin-bottom: 80px; }
}

/* ---------- SMALL MOBILE  max-width: 480px ---------- */
@media (max-width: 480px) {
	.preise-pricing { margin-top: 60px; }
	.section--faq { margin-bottom: 60px; }
}