/* UnterhaltsPlan — reusable content-block pattern for SEO entry pages
   (UNTERHALTSPLAN-FIRST-SALES-SEO-TRACKING-018)

   Additive, namespaced (`.up-` prefix), built on the existing --az-* design
   tokens (css/azimuth-tokens.css) so entry pages share one visual system
   instead of each page inventing its own blocks. Load order on a page:
   a11y.css → azimuth-tokens.css → azimuth-components.css →
   nav-dropdown.css → seo-entry-blocks.css.

   Sections covered: intent hero, trust row, quick answer, example card,
   free-vs-paid mini comparison, document value grid, related-pages strip,
   final CTA. FAQ / breadcrumb / header / footer reuse the existing
   .az-card / .az-breadcrumb / .az-footer components — no duplication here.
*/

.up-entry-page { background: var(--az-bg); }

/* ── INTENT HERO ── */
.up-intent-hero {
  background: var(--az-bg);
  border-bottom: var(--az-border-subtle);
  padding: 56px 24px 48px;
}
.up-intent-hero__inner { max-width: 1160px; margin: 0 auto; }
.up-intent-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--az-forest-100);
  border: 1px solid var(--az-green-soft);
  border-radius: var(--az-radius-pill);
  padding: 4px 14px;
  font-size: 11px;
  font-weight: var(--az-weight-bold);
  letter-spacing: 0.8px;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: var(--az-forest-800);
}
.up-intent-hero h1 {
  font-family: 'DM Sans', var(--az-font-sans);
  font-weight: 800;
  font-size: clamp(28px, 4vw, 46px);
  line-height: 1.15;
  letter-spacing: -0.5px;
  margin-bottom: 16px;
  max-width: 760px;
  color: var(--az-text);
}
.up-intent-hero__sub {
  font-size: 16px;
  color: var(--az-text-muted);
  line-height: 1.7;
  max-width: 620px;
  margin-bottom: 28px;
}
.up-intent-hero__ctas { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }

/* ── TRUST ROW ── */
.up-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  font-size: 13px;
  color: var(--az-text-muted);
  border-top: var(--az-border-subtle);
  padding-top: 16px;
}
.up-trust-row span:not(:last-child)::after { content: '·'; margin-left: 20px; color: var(--az-green-soft); }

/* ── QUICK ANSWER ── */
.up-quick-answer {
  background: var(--az-surface);
  border: var(--az-border-subtle);
  border-left: 4px solid var(--az-forest-800);
  border-radius: var(--az-radius-md);
  padding: 20px 24px;
  max-width: 900px;
  font-size: 15px;
  line-height: 1.7;
  color: var(--az-text);
}
.up-quick-answer strong { color: var(--az-forest-800); }

/* ── EXAMPLE CARD ── */
.up-example-card {
  background: var(--az-surface);
  border: var(--az-border-subtle);
  border-radius: var(--az-radius-lg);
  padding: 24px 28px;
  max-width: 620px;
}
.up-example-card__row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid var(--az-border);
  font-size: 14px;
}
.up-example-card__row:last-of-type { border-bottom: none; }
.up-example-card__row span:first-child { color: var(--az-text-muted); }
.up-example-card__row span:last-child { font-weight: var(--az-weight-semibold); color: var(--az-text); }
.up-example-card__result {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 2px solid var(--az-forest-800);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.up-example-card__result span:first-child { font-weight: var(--az-weight-semibold); color: var(--az-text); }
.up-example-card__result span:last-child { font-size: 22px; font-weight: 800; color: var(--az-forest-800); }
.up-example-card__note { margin-top: 12px; font-size: 12.5px; color: var(--az-text-muted); }

/* ── MINI COMPARISON (free vs paid) ── */
.up-mini-comparison {
  display: grid;
  gap: 16px;
  grid-template-columns: 1fr;
  max-width: 1160px;
}
@media (min-width: 700px) { .up-mini-comparison { grid-template-columns: 1fr 1fr; } }
.up-mini-comparison__col {
  background: var(--az-surface);
  border: var(--az-border-subtle);
  border-radius: var(--az-radius-lg);
  padding: 22px 24px;
}
.up-mini-comparison__col.is-paid { border-color: var(--az-border-strong); background: var(--az-info-soft); }
.up-mini-comparison__head { font-weight: var(--az-weight-bold); font-size: 16px; margin-bottom: 10px; color: var(--az-text); }
.up-mini-comparison__list { list-style: none; margin: 0; padding: 0; }
.up-mini-comparison__list li { font-size: 14px; color: var(--az-text-muted); padding: 4px 0 4px 18px; position: relative; }
.up-mini-comparison__list li::before { content: '·'; position: absolute; left: 0; color: var(--az-green-soft); font-weight: 700; }

/* ── RELATED PAGES ── */
.up-related-pages {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 16px;
  max-width: 1160px;
}
.up-related-pages a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--az-surface);
  border: var(--az-border-subtle);
  border-radius: var(--az-radius-pill);
  padding: 8px 16px;
  font-size: 13px;
  font-weight: var(--az-weight-semibold);
  color: var(--az-forest-800);
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.up-related-pages a:hover { background: var(--az-forest-100); border-color: var(--az-green-soft); }

/* ── FINAL CTA ── */
.up-final-cta {
  background: var(--az-forest-900);
  color: #fff;
  text-align: center;
  padding: 56px 24px;
}
.up-final-cta h2 { color: #fff; font-family: 'DM Sans', var(--az-font-sans); font-weight: 700; font-size: clamp(22px, 2.5vw, 30px); margin-bottom: 10px; }
.up-final-cta p { color: rgba(255,255,255,0.75); max-width: 560px; margin: 0 auto 28px; }
.up-final-cta__row { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

/* ── DOCUMENT PREVIEW CARDS (mirrors homepage .up-doc-preview-card) ── */
.up-doc-preview-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 1160px; }
@media (max-width: 780px) { .up-doc-preview-grid { grid-template-columns: 1fr; } }
.up-doc-preview-card { background: var(--az-surface); border: var(--az-border-subtle); border-radius: var(--az-radius-md); padding: 16px 18px; font-size: 12.5px; }
.up-doc-preview-title { font-weight: var(--az-weight-bold); font-size: 13px; margin-bottom: 8px; color: var(--az-text); }
.up-doc-preview-row { display: flex; justify-content: space-between; gap: 8px; padding: 4px 0; border-bottom: 1px dashed var(--az-border); color: var(--az-text-muted); }
.up-doc-preview-row:last-of-type { border-bottom: none; }
.up-doc-preview-note { margin-top: 8px; font-size: 11px; color: var(--az-text-muted); }

@media (max-width: 600px) {
  .up-intent-hero { padding: 48px 20px 40px; }
  .up-intent-hero__ctas a { width: 100%; justify-content: center; }
  .up-final-cta__row a { width: 100%; justify-content: center; }
  .up-example-card { padding: 20px; }
}