/* ==================================================================
   Amorazza – pages/wia.css   (V136 Komplett-Neuaufbau)
   ==================================================================
   Page-spezifische Stile für /was-ist-amorazza.php

   V136: Komplett-Re-Design. Card-Layout:
   - Jeder Inhaltsblock = Container mit abgerundeten Ecken,
     eigenem Hintergrund und großzuegigem Padding
   - Verschiedene weiche Pastell-Toene fuer visuelle Differenzierung
   - Konsistent mit premium.php-Stil (border-radius 20-24px,
     box-shadow rgba(212,83,126,0.08))

   Wird nur geladen wenn die Page $extra_css = ['pages/wia'] setzt.
   ================================================================== */


/* ─── Container ──────────────────────────────────────────────────── */

body.page-wia .wia-page {
  max-width: 760px;
  margin: 0 auto;
  padding: 24px 16px 80px;
}

body.page-wia .wia-page section,
body.page-wia .wia-page .wia-features {
  margin-bottom: 24px;
}

body.page-wia .wia-page h2 {
  font-size: var(--fs-title);
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 16px;
  line-height: 1.25;
}

body.page-wia .wia-page h3 {
  font-size: var(--fs-strong);
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 8px;
  line-height: 1.3;
}

body.page-wia .wia-page p {
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink-800, #333);
  margin: 0 0 12px;
}

body.page-wia .wia-page p:last-child {
  margin-bottom: 0;
}


/* ─── Sektion 1: Hero ────────────────────────────────────────────── */

body.page-wia .wia-hero {
  background: linear-gradient(135deg, #fff8fa 0%, var(--rose-50) 100%);
  border-radius: 24px;
  padding: clamp(28px, 5vw, 44px) clamp(20px, 4vw, 32px);
  text-align: center;
  box-shadow: 0 8px 32px rgba(212,83,126,0.1);
}

body.page-wia .wia-hero-claim {
  font-size: var(--fs-strong);
  font-weight: 400;
  color: var(--ink-900);
  line-height: 1.45;
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(212,83,126,0.18);
}

body.page-wia .wia-hero-claim strong {
  color: var(--rose-600);
  font-weight: 700;
}

body.page-wia .wia-hero-title {
  font-size: var(--fs-hero);
  font-weight: 700;
  color: var(--ink-900);
  margin: 0 0 12px;
  line-height: 1.15;
  letter-spacing: -0.5px;
}

body.page-wia .wia-hero-lead {
  font-size: var(--fs-strong);
  font-weight: 400;
  color: var(--ink-900);
  line-height: 1.45;
  margin: 0 0 12px;
}

body.page-wia .wia-hero-lead strong {
  color: var(--rose-600);
  font-weight: 700;
}

body.page-wia .wia-hero-sub {
  font-size: var(--fs-body);
  color: #666;
  line-height: 1.55;
  margin: 0;
}


/* ─── Sektion 2: Story ───────────────────────────────────────────── */

body.page-wia .wia-story {
  background: #fffdf8;
  border: 1px solid #f5e9c8;
  border-radius: 20px;
  padding: clamp(24px, 4vw, 36px) clamp(20px, 4vw, 32px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.04);
}

body.page-wia .wia-story-quote {
  font-size: var(--fs-body);
  color: #555;
  margin-bottom: 16px;
  line-height: 1.55;
}

body.page-wia .wia-story-question {
  font-style: italic;
  font-size: var(--fs-strong);
  color: var(--ink-900);
  padding: 12px 18px;
  border-left: 3px solid #d4a657;
  background: #fff8e8;
  border-radius: 0 12px 12px 0;
  margin-bottom: 14px;
}

body.page-wia .wia-story-answer {
  font-size: var(--fs-strong);
  color: var(--ink-900);
  margin-bottom: 24px;
}

body.page-wia .wia-story-answer strong {
  color: #b8852d;
  font-weight: 700;
}

body.page-wia .wia-story-punch {
  font-size: var(--fs-strong);
  font-weight: 700;
  color: var(--ink-900);
  line-height: 1.4;
  padding: 18px 22px;
  background: #fff5ec;
  border-radius: 14px;
  margin-bottom: 22px;
  text-align: center;
}

body.page-wia .wia-story-closing {
  font-size: var(--fs-strong);
  line-height: 1.45;
  text-align: center;
  padding: 22px 18px;
  background: linear-gradient(135deg, #fff8fa, #ffeef3);
  border-radius: 16px;
  margin-top: 22px;
  color: var(--ink-900);
}


/* ─── Sektion 3: Features ────────────────────────────────────────── */

body.page-wia .wia-features-intro {
  background: #fff;
  border: 2px solid #fce8ee;
  border-radius: 20px;
  padding: clamp(24px, 4vw, 32px) clamp(20px, 4vw, 28px);
  text-align: center;
  box-shadow: 0 4px 20px rgba(212,83,126,0.08);
}

body.page-wia .wia-features-intro h2 {
  font-size: var(--fs-title);
  background: linear-gradient(135deg, var(--rose-600) 0%, #b8336a 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 14px;
}

body.page-wia .wia-features-h {
  text-align: center;
  margin: 32px 0 20px;
}

body.page-wia .wia-features {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

body.page-wia .wia-feature {
  border-radius: 20px;
  padding: clamp(22px, 4vw, 30px) clamp(20px, 4vw, 28px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
  margin: 0;
}

body.page-wia .wia-feature-rose     { background: #fff8fa; border: 1px solid #fce8ee; }
body.page-wia .wia-feature-sage     { background: #f5f8f5; border: 1px solid #dbe5db; }
body.page-wia .wia-feature-mint     { background: #f5fbf7; border: 1px solid #d9ecdf; }
body.page-wia .wia-feature-vanilla  { background: #fffaf0; border: 1px solid #f0e3c8; }
body.page-wia .wia-feature-blue     { background: #f5f9fc; border: 1px solid #d8e6f0; }
body.page-wia .wia-feature-peach    { background: #fff5ec; border: 1px solid #f5dcc6; }
body.page-wia .wia-feature-lavender { background: #f9f6fc; border: 1px solid #e4dbed; }

body.page-wia .wia-feature-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 14px;
}

body.page-wia .wia-feature-icon {
  font-size: 32px;
  line-height: 1;
  flex-shrink: 0;
}

body.page-wia .wia-feature-head h3 {
  margin: 0 0 6px;
}

body.page-wia .wia-feature-tier {
  display: inline-block;
  font-size: 0.75em;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 999px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

body.page-wia .wia-tier-free {
  background: #e6f4ec;
  color: #1f7a3f;
}

body.page-wia .wia-tier-premium {
  background: linear-gradient(135deg, #fff0c4 0%, #ffe1d4 100%);
  color: #8b5e00;
}

body.page-wia .wia-steps {
  margin: 12px 0 12px 22px;
  padding: 0;
}

body.page-wia .wia-steps li {
  margin-bottom: 8px;
  line-height: 1.55;
  font-size: var(--fs-body);
  color: var(--ink-800, #333);
}

body.page-wia .wia-feature-tagline {
  text-align: center;
  font-style: italic;
  margin-top: 14px;
  padding: 12px;
  background: rgba(255,255,255,0.6);
  border-radius: 12px;
}


/* ─── Sektion 4: Pricing ─────────────────────────────────────────── */

body.page-wia .wia-pricing {
  background: linear-gradient(135deg, #f5fbf7 0%, #eaf6ef 100%);
  border: 1px solid #cde5d6;
  border-radius: 20px;
  padding: clamp(24px, 4vw, 32px) clamp(20px, 4vw, 28px);
  text-align: center;
  box-shadow: 0 4px 20px rgba(31,122,63,0.06);
}

body.page-wia .wia-pricing-lead {
  font-size: var(--fs-strong);
  color: var(--ink-900);
  margin-bottom: 14px !important;
}


/* ─── Sektion 5: Haltung ─────────────────────────────────────────── */

body.page-wia .wia-stance > h2 {
  text-align: center;
  margin-bottom: 20px;
}

body.page-wia .wia-stance-card {
  border-radius: 20px;
  padding: clamp(22px, 4vw, 30px) clamp(20px, 4vw, 28px);
  margin-bottom: 16px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.05);
}

body.page-wia .wia-stance-german {
  background: linear-gradient(135deg, #fdf6f0 0%, #f9ecdd 100%);
  border: 1px solid #f0dcc4;
}

body.page-wia .wia-stance-mission {
  background: linear-gradient(135deg, #fff8fa 0%, #ffeef3 100%);
  border: 1px solid #fce8ee;
}

body.page-wia .wia-stance-mission-text {
  font-size: var(--fs-strong);
  line-height: 1.5;
  color: var(--ink-900);
}

body.page-wia .wia-stance-aphorism {
  font-size: var(--fs-title);
  font-style: italic;
  font-weight: 400;
  text-align: center;
  padding: clamp(28px, 5vw, 36px) clamp(20px, 4vw, 28px);
  background: var(--ink-900);
  color: #fff;
  border-radius: 20px;
  letter-spacing: -0.3px;
  line-height: 1.3;
  margin-top: 16px;
}


/* ─── Sektion 6: CTA ─────────────────────────────────────────────── */

body.page-wia .wia-cta {
  background: linear-gradient(135deg, var(--rose-600) 0%, #b8336a 100%);
  border-radius: 24px;
  padding: clamp(28px, 5vw, 40px) clamp(20px, 4vw, 32px);
  text-align: center;
  color: #fff;
  box-shadow: 0 8px 32px rgba(212,83,126,0.25);
}

body.page-wia .wia-cta h2 {
  color: #fff;
  font-size: var(--fs-title);
  margin-bottom: 12px;
}

body.page-wia .wia-cta p {
  color: rgba(255,255,255,0.92);
  font-size: var(--fs-body);
  margin-bottom: 20px;
}

body.page-wia .wia-cta-btn {
  display: inline-block;
  background: #fff;
  color: var(--rose-600);
  font-weight: 700;
  font-size: var(--fs-strong);
  padding: 14px 30px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

body.page-wia .wia-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,0.2);
}


/* ─── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 480px) {
  body.page-wia .wia-feature-head {
    flex-direction: column;
    gap: 8px;
  }

  body.page-wia .wia-stance-aphorism {
    font-size: var(--fs-strong);
  }
}