/* ══════════════════════════════════════════════════════════════════════════
   Impressum and Datenschutzerklärung. Built on the tokens in styles.css:
   these pages are plainer than the front page on purpose, because their job
   is to be read and found, not to sell anything.
   ══════════════════════════════════════════════════════════════════════ */

.legal-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  padding: 14px 0;
  background: color-mix(in srgb, var(--color-bg) 96%, transparent);
  /* Matches the marketing header's site-header rule in styles.css: same
     reasoning, same lighter value. Keep the two in sync. */
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-bottom: 1px solid color-mix(in srgb, var(--color-divider) 55%, transparent);
}
.legal-bar-inner {
  max-width: 1160px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

/* The language switcher itself (.lang-switch, .lang-trigger, .lang-menu) is
   defined once in styles.css, loaded before this file, and needs no
   legal-page override: .legal-bar-inner's flex layout places it correctly
   with no grid-area to set. */

.legal {
  max-width: 1160px;
  margin: 0 auto;
  padding: 56px 24px 0;
}
.legal-inner { max-width: 72ch; }

.legal h1 {
  font-weight: 400;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
  margin: 0 0 14px;
}
.legal .kicker { display: block; margin: 0 0 16px; }
.legal-updated {
  font-family: var(--font-ui);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  color: var(--color-neutral-600);
  margin: 0 0 40px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--color-divider);
}

.legal h2 {
  font-weight: 400;
  font-size: clamp(24px, 2.6vw, 30px);
  line-height: 1.15;
  margin: 44px 0 14px;
  padding-top: 28px;
  border-top: 1px solid var(--color-divider);
}
.legal h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.legal h3 {
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent-800);
  margin: 28px 0 10px;
}
.legal p { font-size: 16px; line-height: 1.75; margin: 0 0 14px; text-wrap: pretty; }
.legal ul { margin: 0 0 14px; padding-left: 0; list-style: none; }
.legal li {
  position: relative;
  font-size: 16px;
  line-height: 1.7;
  margin-bottom: 9px;
  padding-left: 20px;
}
.legal li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 11px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-accent);
}
.legal strong { font-weight: 600; }
.legal address {
  font-style: normal;
  font-size: 16px;
  line-height: 1.8;
  padding: 20px 22px;
  margin: 0 0 18px;
  border: 1px solid var(--color-accent-300);
  border-radius: var(--radius-md);
  background: var(--color-accent-100);
}

.legal-note {
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--color-neutral-700);
  padding: 16px 18px;
  margin: 0 0 18px;
  border-left: 2px solid var(--color-accent-300);
  background: color-mix(in srgb, var(--color-surface) 60%, transparent);
}

.legal-table-wrap { overflow-x: auto; margin: 0 0 18px; }
.legal table {
  width: 100%;
  min-width: 460px;
  border-collapse: collapse;
  font-size: 14.5px;
}
.legal th {
  text-align: left;
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-neutral-700);
  padding: 0 14px 8px 0;
  border-bottom: 1px solid var(--color-divider);
}
.legal td {
  padding: 11px 14px 11px 0;
  border-bottom: 1px solid var(--color-divider);
  line-height: 1.6;
  vertical-align: top;
}

.legal-back {
  display: inline-block;
  margin: 44px 0 0;
  font-family: var(--font-ui);
  font-size: 13px;
  letter-spacing: 0.03em;
}

/* Numbered steps, for the download page's per-platform instructions. Same
   accent language as .legal li's dot, a number instead. */
.legal ol {
  counter-reset: step;
  margin: 0 0 22px;
  padding-left: 0;
  list-style: none;
}
.legal ol li {
  counter-increment: step;
  padding-left: 34px;
}
.legal ol li::before {
  content: counter(step);
  position: absolute;
  left: 0;
  top: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--color-accent-100);
  color: var(--color-accent-800);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* The "coming to the app stores" callout on the download page. Sits right
   under the intro line, ahead of the install steps, since the one thing
   worth being unmissable here is that the native listings aren't live yet:
   the steps below are the real way in until they are. */
.store-notice {
  display: flex;
  gap: 20px;
  align-items: flex-start;
  padding: 28px 26px;
  margin: 0 0 36px;
  border: 1px solid var(--color-accent-300);
  border-radius: var(--radius-lg);
  background: var(--color-accent-100);
}
.store-notice-logo {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 14px;
}
.store-notice-kicker {
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent-800);
  margin: 0 0 8px;
}
/* Overrides .legal h2's divider styling: this heading sits inside a callout
   card, not between two ordinary sections, so it gets none of that and a
   size of its own instead. It is still the first h2 in the document, so
   .legal h2:first-of-type's border/margin reset applies underneath this and
   costs nothing extra; the next real h2 (the first platform) still gets its
   usual divider, exactly as if this card were not there. */
.store-notice-title {
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(21px, 2.6vw, 27px);
  line-height: 1.25;
  color: var(--color-text);
  margin: 0 0 10px;
  border: 0;
  padding: 0;
}
.store-notice-text {
  font-size: 15px;
  line-height: 1.65;
  color: var(--color-neutral-700);
  margin: 0 0 18px;
}
.store-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.store-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 99px;
  background: var(--color-bg);
  border: 1px solid var(--color-divider);
  font-family: var(--font-ui);
  font-size: 12.5px;
  font-weight: 500;
  color: var(--color-neutral-700);
}
.store-badge svg { width: 16px; height: 16px; flex-shrink: 0; fill: currentColor; color: var(--color-accent-700); }
.store-badge em { font-style: normal; color: var(--color-neutral-500); }

@media (max-width: 760px) {
  .legal-bar-inner { padding-left: 16px; padding-right: 16px; }
  .legal { padding: 36px 16px 0; }
  .legal h2 { margin-top: 34px; padding-top: 22px; }
  .store-notice { flex-direction: column; padding: 24px 20px; }
}