/**
 * autowire.app — marketing and legal pages
 *
 * Only what these pages have and the account app does not: the hero, the
 * legal prose, the definition tables, the password-reset flow. Everything
 * else — reset, layout, header, footer, buttons, cards, forms, banners —
 * comes from base.css and components.css, which are shared with
 * account.autowire.app.
 *
 * Load order:  tokens.css → tokens-app.css → base.css → components.css → site.css
 *
 * Pages carry no <style> block and no inline styling except a genuinely
 * one-off custom-property value (--stack-gap).
 */


/* ═══════════════════════════════════════════════════════════════════════
   HERO AND PAGE INTROS
   ═══════════════════════════════════════════════════════════════════════ */

.hero-title {
  font-size: var(--text-hero);
  font-weight: var(--fw-bold);
  line-height: 1.02;              /* tighter than --lh-display: this is the largest type on the site */
  letter-spacing: var(--ls-snug);
  color: inherit;
  max-width: 16ch;
}
.page-lead {
  font-size: 20px;
  line-height: var(--lh-loose);
  color: inherit;
  max-width: 62ch;
}

/* Mono metadata line under a page title ("Stand: August 2026"). */
.page-meta {
  font-family: var(--font-mono);
  font-size: var(--text-mono-s);
  color: var(--fg-secondary-strong);
  hyphens: none;
}


/* ═══════════════════════════════════════════════════════════════════════
   PROSE — the legal documents
   ═══════════════════════════════════════════════════════════════════════ */

/* base.css and tokens.css zero every heading and paragraph margin, so .prose
   supplies its own rhythm with gap. Headings additionally carry a top margin:
   in a flex column, margins add to the gap, which is the cheapest way to give
   a new section more air above it than a paragraph gets. This is the only
   place in the stylesheet that uses a margin for vertical rhythm. */
.prose {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  max-width: var(--measure-prose);
  font-size: var(--text-body-m);
}
.prose > h2 {
  font-size: var(--text-h-sub);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: var(--ls-normal);
  margin-top: var(--space-6);
  scroll-margin-top: calc(var(--header-h) + var(--space-4));
}
.prose > h2:first-child { margin-top: 0; }
.prose > h3 {
  font-size: var(--text-h3);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  margin-top: var(--space-3);
}
.prose > p, .prose li {
  font-size: var(--text-body-m);
  line-height: var(--lh-loose);
  color: var(--fg-secondary-strong);
}
.prose > ul {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.prose strong { color: var(--fg-primary); font-weight: var(--fw-semibold); }
.prose a { color: var(--fg-primary); text-decoration: underline; text-underline-offset: 3px; }

/* Long URLs in body copy have nowhere else to break. */
.prose a[href^="http"] { overflow-wrap: anywhere; }

code {
  color: var(--fg-primary);
  background: var(--color-gray-100);
  border-radius: var(--radius-sm);
  padding: 2px 6px;
  font-size: var(--text-mono-xs);
}

/* An emphasised block inside prose — the design system's card, reused for the
   Anbieter / Kontakt / Löschung-beantragen boxes. */
.prose-card {
  background: var(--bg-card);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-card);
  padding: var(--card-padding-web);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.section-alt .prose-card { background: var(--bg-card); }
.prose-card p { font-size: var(--text-body-m); line-height: var(--lh-loose); }
.prose-card ul {
  margin: 0;
  padding-left: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* The prominent mailto on the Daten-löschen page. */
.prose-mail {
  font-size: var(--text-body-l);
  font-weight: var(--fw-semibold);
  width: fit-content;
}


/* ═══════════════════════════════════════════════════════════════════════
   TABLES — term/definition pairs on the legal pages
   ═══════════════════════════════════════════════════════════════════════ */

.data-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}
.data-table th, .data-table td {
  padding: var(--table-cell-py) var(--table-cell-px);
  border-bottom: var(--table-row-border);
  vertical-align: top;
  font-size: var(--text-body-s);
  line-height: var(--lh-loose);
}
.data-table th {
  width: 30%;
  color: var(--fg-primary);
  font-weight: var(--fw-semibold);
}
.data-table td { color: var(--fg-secondary-strong); }
.data-table tr:last-child th,
.data-table tr:last-child td { border-bottom: 0; }
.data-table strong { color: var(--fg-primary); font-weight: var(--fw-semibold); }

/* Wide content scrolls inside its own container — the page body must never
   scroll sideways. */
.table-scroll { overflow-x: auto; }


/* ═══════════════════════════════════════════════════════════════════════
   AUTH — the narrow single-purpose pages (password reset)
   ═══════════════════════════════════════════════════════════════════════ */

/* A single centred column. The text inside stays left-aligned, as everywhere
   else in the design system. */
.auth-col {
  width: 100%;
  max-width: 460px;
  margin-inline: auto;
}

/* The reset-password form's status messages. Hidden by default; the script
   reveals them by setting an inline display, so nothing here may raise the
   specificity of the display property. */
.form-msg { display: none; }
.form-msg a { color: inherit; }

/* Mutually exclusive page states (auth/reset). Class names are part of the
   contract with that page's script — do not rename .state or .active. */
.state { display: none; }
.state.active { display: flex; flex-direction: column; gap: var(--space-5); }


/* ═══════════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════════ */

@media (max-width: 760px) {
  .hero-title { max-width: none; }
}

/* Below 560px a two-column definition table has ~14 characters per line in
   the value column, which is unreadable. Stack the pair instead of scrolling. */
@media (max-width: 560px) {
  .data-table, .data-table tbody, .data-table tr,
  .data-table th, .data-table td { display: block; width: 100%; }
  .data-table th {
    padding: var(--space-4) 0 var(--space-1);
    border-bottom: 0;
  }
  .data-table td { padding: 0 0 var(--space-4); }
  .data-table tr:first-child th { padding-top: 0; }
  .data-table tr { border-bottom: var(--table-row-border); }
  .data-table tr:last-child { border-bottom: 0; }
  .data-table tr:last-child td { padding-bottom: 0; }
}