/* ==========================================================================
   Evaxify — document pages (privacy, terms, help, impressum, data deletion).
   Loads after evx.css and only adds the article-reading layer: measure,
   heading rhythm, callouts, tables. Shell (nav, buttons, footer) comes from
   evx.css so the legal pages and the landing pages stay one product.
   ========================================================================== */

main {
  max-width: 760px; margin: clamp(32px, 5vw, 56px) auto;
  padding: 0 var(--gutter) clamp(56px, 8vw, 88px);
}

main h1 {
  font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.3rem);
  letter-spacing: -.03em; margin-bottom: .5rem;
}
main .meta { font-size: .88rem; color: var(--ink-3); margin-bottom: 2.4rem; }

main h2 {
  font-size: 1.2rem; font-weight: 700; letter-spacing: -.015em;
  margin: 2.6rem 0 .8rem; padding-bottom: .5rem;
  color: var(--ink); border-bottom: 1px solid var(--line);
}
main h3 { font-size: 1.02rem; margin: 1.6rem 0 .5rem; }

main p { margin-bottom: 1rem; }
main ul, main ol { margin: .5rem 0 1.1rem 1.3rem; }
main li { margin-bottom: .4rem; }
main strong { color: var(--ink); }

/* Callouts: one accent for information, one warning tone for consequences. */
.highlight-box,
.warning-box {
  margin: 1.4rem 0; padding: 1.05rem 1.3rem;
  border-radius: var(--r-ctl); font-size: .96rem;
  border: 1px solid var(--accent-line); border-left-width: 4px;
  background: var(--accent-soft); color: var(--ink-2);
}
.warning-box {
  border-color: var(--line-strong); border-left-color: var(--ink-3);
  background: var(--bg-sunken);
}
.highlight-box p:last-child,
.warning-box p:last-child { margin-bottom: 0; }

.faq { display: flex; flex-direction: column; gap: 0; margin-top: .5rem; }
.faq-item {
  background: none; border: 0; border-radius: 0; box-shadow: none;
  border-bottom: 1px solid var(--line); padding: 1.15rem 0;
}
.faq-item:first-child { border-top: 1px solid var(--line); }
.faq-item strong { display: block; margin-bottom: .35rem; font-size: 1rem; color: var(--ink); }
.faq-item p { margin: 0; font-size: .95rem; color: var(--ink-2); }

.rights-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(224px, 1fr));
  gap: 12px; margin: 1rem 0 1.4rem;
}
.right-card {
  padding: .9rem 1.05rem; border-radius: var(--r-ctl);
  background: var(--surface); border: 1px solid var(--line);
}
.right-card strong { display: block; margin-bottom: .2rem; font-size: .92rem; color: var(--accent-ink); }
.right-card span { font-size: .88rem; color: var(--ink-2); }

main .steps { list-style: none; counter-reset: step-counter; margin: .6rem 0 1.2rem; }
main .steps li {
  counter-increment: step-counter;
  display: flex; align-items: flex-start; gap: .9rem; margin-bottom: .9rem;
}
main .steps li::before {
  content: counter(step-counter);
  flex: 0 0 auto; min-width: 1.7rem; height: 1.7rem; margin-top: .12rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--accent); color: var(--on-accent);
  font-size: .8rem; font-weight: 700;
}

/* Article index (blog-style listing of guides). */
.article-list { display: flex; flex-direction: column; gap: 14px; margin: .6rem 0 1.2rem; list-style: none; }
.article-card {
  display: block; padding: 1.2rem 1.4rem; border-radius: var(--r-card);
  background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  color: inherit; transition: transform .15s var(--ease), box-shadow .15s var(--ease), border-color .15s var(--ease);
}
.article-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--accent-line); text-decoration: none; }
.article-card .meta { margin: 0 0 .4rem; }
.article-card h2 {
  margin: 0 0 .5rem; padding: 0; border: 0;
  font-size: 1.1rem; color: var(--ink);
}
.article-card p { margin: 0; color: var(--ink-2); font-size: .95rem; }

table {
  width: 100%; border-collapse: collapse;
  margin: 1rem 0 1.4rem; font-size: .93rem;
}
th, td {
  text-align: left; padding: .6rem .75rem; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
th { background: var(--bg-sunken); color: var(--ink); font-weight: 700; }

/* Doc pages carry a one-line footer rather than the landing sitemap. */
body > footer:not(.site-footer) {
  margin-top: 2rem; padding: 1.7rem var(--gutter);
  text-align: center; font-size: .87rem;
  background: var(--panel); color: var(--panel-ink-2);
}
body > footer:not(.site-footer) a { color: var(--panel-ink); }