/* Public info pages (Impressum, Datenschutz, AGB, Kontakt, FAQ, Qogita guide)
   — shared layout. Built on the canonical design tokens (web/shared/tokens.css);
   never redeclares them. Loaded after tokens.css + primitives.css. */

body.legal-body {
  position: relative;
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Cherry-blossom backdrop — same recipe as the landing body::before, so the
   public doc family shares the brand surface instead of flat gray. */
body.legal-body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: var(--z-base);
  background-color: var(--bg);
  background-image: var(--page-bg-overlay), var(--page-bg-fallback);
  background-image: var(--page-bg-overlay), var(--page-bg-raster);
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  /* Matches the landing treatment: soft but recognizable behind the panels. */
  filter: blur(2px);
  pointer-events: none;
}
body.legal-body > * {
  position: relative;
  z-index: var(--z-content);
}

/* System focus ring for plain links (buttons keep the primitives' own ring). */
.legal-body a:not([class*="button"]):focus-visible {
  outline: none;
  border-radius: var(--radius-tiny);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.legal-body a.pill:focus-visible { border-radius: var(--radius-pill); }

/* Header — brand + back-to-site link, mirrors the landing nav. */
.legal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  max-width: 760px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-5);
}
.legal-header .brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  text-decoration: none;
  color: var(--text);
}
.legal-header .brand img { width: 40px; height: 40px; display: block; }
.legal-back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  /* Vertical padding lifts the touch target without shifting the header. */
  padding: var(--space-3) 0;
  /* Full ink: this is the only navigation on the page and it sits over the
     raw photo — muted gray disappeared into the blossom. */
  color: var(--text);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out-soft);
}
.legal-back:hover { color: var(--sky-strong); }
.legal-back svg { width: 16px; height: 16px; }

/* Main column — one frosted glass sheet over the blossom, like the landing's
   copy panels, so long-form prose keeps full legibility on the photo.
   Strong glass: a full sheet of body text needs a calmer backdrop than the
   landing's short copy panels. 760px keeps the sheet within ~1 prose measure
   so no dead slab opens to the right of the column at desktop widths. */
.legal-main {
  box-sizing: border-box;
  width: calc(100% - (2 * var(--space-5)));
  max-width: 760px;
  margin: 0 auto var(--space-10);
  padding: var(--space-10) var(--space-8) var(--space-16);
  background: var(--glass-bg-strong);
  border: var(--border-thin) solid var(--glass-border);
  border-radius: var(--radius-large);
  box-shadow: var(--glass-shadow-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
}
/* Fixed 22px so the page title outranks 18px section headings at every
   width (.text-page-title's clamp bottoms out at 18px below 900px). */
.legal-title { margin: 0 0 var(--space-2); font-size: var(--text-2xl); }
.legal-updated { color: var(--muted); margin: 0 0 var(--space-8); }
/* Intro standfirst — body-sized, muted; distinct from the meta/date slot.
   Shares the prose measure so the page doesn't open on a full-width line
   and then snap to a narrower column. */
.legal-lede { max-width: 72ch; color: var(--muted); margin: 0 0 var(--space-8); }

/* Language jump-links (Deutsch / English). */
.legal-langnav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-10);
}
.legal-langnav .pill {
  text-decoration: none;
  min-height: var(--control-height-sm);
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-xs);
  transition: background var(--duration-fast) var(--ease-out-soft),
              border-color var(--duration-fast) var(--ease-out-soft);
}
.legal-langnav .pill:hover { background: var(--sky-soft); }

/* Language blocks stack; a divider separates them. The strongest content
   break on the page gets a title-ranked heading, not a page-length gap. */
.legal-lang { scroll-margin-top: var(--space-8); }
.legal-lang + .legal-lang {
  margin-top: var(--space-12);
  padding-top: var(--space-8);
  border-top: 1px solid var(--line);
}
.legal-lang + .legal-lang .legal-prose > h2:first-child {
  margin-top: 0;
  font-size: var(--text-xl);
}

/* Readable legal prose. font-size on the wrapper makes the 72ch measure
   resolve against the real body size, not the 16px root. 15px: long-form
   public reading earns one step above the app's density scale.
   No auto-hyphenation: it broke brand names, emails and domains mid-word
   ("HOP-COMP", "info@hopcomp.-com") on the exact pages people copy them
   from. Long tokens wrap instead of overflowing. */
.legal-prose {
  max-width: 72ch;
  font-size: var(--text-lg);
  overflow-wrap: break-word;
}
.legal-prose > h2 { margin: var(--space-12) 0 var(--space-3); scroll-margin-top: var(--space-8); }
.legal-prose > h3 { margin: var(--space-8) 0 var(--space-2); }
.legal-prose p { margin: 0 0 var(--space-4); line-height: var(--leading-relaxed); }
.legal-prose ul { margin: 0 0 var(--space-4) var(--space-5); padding: 0; }
.legal-prose li { margin: 0 0 var(--space-2); line-height: var(--leading-relaxed); }
/* Body-size links: text ink carries contrast (AA), the sky underline carries
   the accent — sky-strong alone misses 4.5:1 at 14px on --bg. Buttons that
   happen to sit in prose keep their primitive styling. */
.legal-prose a:not([class*="button"]) {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--sky-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  /* URLs and emails may exceed the measure — break anywhere, never clip. */
  overflow-wrap: anywhere;
}
.legal-prose a:not([class*="button"]):hover { text-decoration-thickness: 2px; }
.legal-prose strong { color: var(--text); font-weight: var(--weight-semibold); }

/* Boxed entity / contact details — brighter card on the glass sheet. */
.legal-card {
  background: var(--surface-strong);
  border: var(--border-thin) solid var(--glass-border-strong);
  border-radius: var(--radius);
  padding: var(--space-6);
  box-shadow: var(--shadow-sm);
}
.legal-card p { margin: 0 0 var(--space-1); }
.legal-card > h2 { margin: 0 0 var(--space-3); }
.legal-card .legal-card__label {
  display: block;
  color: var(--muted);
  margin: var(--space-4) 0 var(--space-1);
}
.legal-card .legal-card__label:first-child { margin-top: 0; }

/* Partnership credential — the blossom-soft pill BRAND.md reserves for
   partner marks. */
.legal-partner-pill {
  background: var(--blossom-soft);
  border-color: var(--blossom);
  color: var(--text);
}

/* Closing conversion strip on the SEO pages (guide + FAQ). */
.legal-cta-card { margin-top: var(--space-10); }
.legal-cta-card p { margin: 0 0 var(--space-4); }
.legal-cta-card p:last-child { margin-bottom: 0; }
.legal-cta-card__title { margin: 0 0 var(--space-3); }

/* Section eyebrow above the page title (guide) — sky ties it to the brand
   accent; the muted gray version vanished against the photo. */
.legal-eyebrow { margin: 0 0 var(--space-2); color: var(--sky-strong); }

/* Guide illustration — one real product visual so the article reads as a
   guide, not a legal document. */
.guide-figure { margin: var(--space-6) 0 var(--space-8); }
.guide-figure img {
  display: block;
  width: 100%;
  height: auto;
  border: var(--border-thin) solid var(--glass-border-strong);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
}

/* FAQ accordion (faq.html) — mirrors the landing FAQ recipe: no native
   marker, sky Heroicon chevron, full-row hit area, cards on the 4px grid. */
.faq-list {
  display: grid;
  gap: var(--space-3);
}
.faq-list .legal-card {
  padding: 0;
  scroll-margin-top: var(--space-8);
}
summary.faq-question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6);
  cursor: pointer;
  list-style: none;
}
summary.faq-question::-webkit-details-marker { display: none; }
.faq-chevron {
  color: var(--sky);
  transition: transform var(--duration-base) var(--ease-out-soft);
}
details[open] > summary .faq-chevron { transform: rotate(180deg); }
summary.faq-question:focus-visible {
  outline: none;
  border-radius: var(--radius);
  box-shadow: 0 0 0 3px var(--focus-ring);
}
.faq-list .faq-answer {
  margin: 0;
  padding: 0 var(--space-6) var(--space-5);
  color: var(--muted);
}
@media (prefers-reduced-motion: reduce) {
  .faq-chevron { transition: none; }
}

/* Footer — same link row as the landing footer, on its own glass strip so
   the compliance links never sit illegibly on the raw blossom photo. */
.legal-footer {
  box-sizing: border-box;
  width: calc(100% - (2 * var(--space-5)));
  max-width: 760px;
  margin: 0 auto var(--space-10);
  padding: var(--space-6) var(--space-8);
  background: var(--glass-bg-strong);
  border: var(--border-thin) solid var(--glass-border);
  border-radius: var(--radius-large);
  box-shadow: var(--glass-shadow-soft);
  -webkit-backdrop-filter: var(--glass-blur-soft);
  backdrop-filter: var(--glass-blur-soft);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-5);
  color: var(--muted);
}
.legal-footer a {
  padding: var(--space-3) 0;
  color: var(--muted);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-out-soft);
}
.legal-footer a:hover { color: var(--text); }
.legal-footer a[aria-current="page"] { color: var(--text); }
.legal-footer .legal-footer__spacer { flex: 1 1 auto; }
/* Per-language page links get their own full row under the link row. */
.legal-langs {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-4);
}