/* ==========================================================================
   AGB page — layout on top of the shared ground truth in style.css.
   style.css already provides: @font-face (Manrope), :root tokens, dark mode,
   reset, base typography, .mono, brand lockup, hue animations, footer base.
   Only AGB-specific rules live here. Monospace uses the shared --font-mono token.
   ========================================================================== */

:root {
  /* Wider measure than the landing page to fit the TOC + prose two-column. */
  --content-max: 64rem;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 5.5rem;
}

/* ---------- Top bar ---------- */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem var(--pad-x);
  background: color-mix(in oklab, var(--bg) 86%, transparent);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--line-soft);
}

/* Brand sits in the bar as a link and at a smaller size than the hero lockup. */
.topbar .brand {
  border-bottom: 0;
  cursor: pointer;
}

.topbar .brand .mark {
  width: clamp(34px, 5vw, 44px);
}

.topbar .brand .wordmark {
  font-size: clamp(1.25rem, 3vw, 1.6rem);
  top: 0;
}

.download {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.05rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--ink);
  color: var(--bg);
  font-family: inherit;
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition:
    transform 0.15s ease,
    opacity 0.2s ease,
    background 0.2s ease;
}

/* Keep the pill look as an <a>: override style.css's global a / a:hover. */
.download:hover {
  opacity: 0.88;
  color: var(--bg);
  border-color: var(--line);
}

.download:active {
  transform: translateY(1px);
}

.download svg {
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
}

.download .label-long {
  display: none;
}

@media (min-width: 560px) {
  .download .label-long {
    display: inline;
  }

  .download .label-short {
    display: none;
  }
}

/* ---------- Layout ---------- */

.page {
  display: block;
  width: 100%;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: var(--pad-y) var(--pad-x) 0;
  gap: 0;
}

.doc-head {
  padding-bottom: clamp(2rem, 4vw, 3rem);
  border-bottom: 1px solid var(--line);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}

.doc-kicker {
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 1rem;
}

.doc-title {
  font-size: clamp(2rem, 5.5vw, 3.25rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.04;
  color: var(--ink);
  text-wrap: balance;
}

.doc-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.25rem;
  align-items: baseline;
  margin-top: 1.25rem;
  font-size: 0.8125rem;
  color: var(--muted);
}

.doc-meta .mono {
  color: var(--ink-soft);
}

.doc-meta .sep {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.4;
  display: inline-block;
}

/* ---------- Two-column body w/ sticky TOC ---------- */

.body-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}

@media (min-width: 940px) {
  .body-grid {
    grid-template-columns: 15rem 1fr;
  }
}

.toc {
  position: static;
  display: none;
}

@media (min-width: 940px) {
  .toc {
    display: block;
    position: sticky;
    top: 6rem;
  }
}

.toc-title {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mute-2);
  margin-bottom: 1rem;
}

.toc ol {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.toc .toc-part {
  margin-top: 1.1rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--line-soft);
}

.toc .toc-part:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.toc a {
  display: block;
  border: 0;
  padding: 0.3rem 0;
  font-size: 0.8125rem;
  line-height: 1.4;
  color: var(--muted);
  position: relative;
  transition:
    color 0.15s ease,
    padding 0.15s ease;
}

.toc a.is-part {
  color: var(--ink-soft);
  font-weight: 600;
  font-size: 0.75rem;
  letter-spacing: 0.02em;
}

.toc a:hover {
  color: var(--ink);
}

.toc a.active {
  color: var(--ink);
  padding-left: 0.85rem;
}

.toc a.active::before {
  content: "";
  position: absolute;
  margin-left: -0.85rem;
  margin-top: 0.5em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--amber);
}

/* ---------- Prose ---------- */

.prose {
  min-width: 0;
}

.prose .lede {
  font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  color: var(--ink-soft);
  font-weight: 400;
  max-width: 42rem;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.prose .lede strong {
  color: var(--ink);
  font-weight: 600;
}

.part {
  margin-top: clamp(2.75rem, 5vw, 4.5rem);
}

.part:first-of-type {
  margin-top: 0;
}

.part-head {
  /* Part titles keep their own tight layout (the wide point-indent looks off on
     the big headings); only clause titles align with the numbered points. */
  display: flex;
  align-items: baseline;
  gap: 0.9rem;
  padding-bottom: 1.1rem;
  margin-bottom: 1.75rem;
  border-bottom: 1px solid var(--line);
}

.part-num {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--amber);
  letter-spacing: 0.02em;
  flex: 0 0 auto;
  padding-top: 0.15rem;
}

.part-title {
  font-size: clamp(1.375rem, 3vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.12;
  color: var(--ink);
}

.part-intro {
  font-size: 0.9375rem;
  line-height: 1.65;
  color: var(--muted);
  max-width: 42rem;
  margin: -0.75rem 0 2rem;
}

.clause {
  margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
}

/* Anchor offset for every jump target (clauses + individual points) is handled
   once, globally, by html { scroll-padding-top }. Don't also set
   scroll-margin-top here — the two add up and overshoot by a header height. */

.clause-title {
  /* Match .clause p columns so the title aligns with the points below it. */
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0 0.5rem;
  align-items: baseline;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 0.9rem;
}

.clause-title .n {
  font-family: var(--font-mono);
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--mute-2);
}

/* The clause number deep-links to itself — same treatment as a.ref: plain
   number, no underline/colour shift, only brighten on hover. */
.clause-title a.n {
  justify-self: start;
  border-bottom: 0;
  text-decoration: none;
  transition: color 0.15s ease;
}

.clause-title a.n:hover {
  color: var(--ink);
}

.clause p {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 0 0.5rem;
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-soft);
  margin-bottom: 0.7rem;
  max-width: 44rem;
}

.clause p .ref {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  color: var(--mute-2);
  padding-top: 0.12rem;
  font-weight: 500;
}

/* The point number deep-links to itself. Keep it looking like a plain number —
   no underline, no colour shift — and only brighten on hover, as in the TOC. */
.clause p a.ref {
  justify-self: start;
  border-bottom: 0;
  text-decoration: none;
  transition: color 0.15s ease;
}

.clause p a.ref:hover {
  color: var(--ink);
}

.clause p.plain {
  display: block;
}

/* Inline cross-reference link, e.g. "siehe Punkt 6.2" — from [6.2]{.ref}.
   Links to the referenced point; colour is the shared --blue accent token,
   which swaps for dark mode in style.css, so no dark override is needed here.
   Uses the body font (no monospace) so it reads as part of the sentence. */
.prose a.xref {
  white-space: nowrap;
  border-bottom: 0;
  color: var(--blue);
  text-decoration: underline;
  text-decoration-color: color-mix(in oklab, var(--blue) 35%, transparent);
  text-underline-offset: 0.15em;
  transition:
    text-decoration-color 0.2s ease,
    color 0.2s ease;
}

.prose a.xref:hover {
  text-decoration-color: currentColor;
}

/* ---------- Closing note ---------- */

.closing {
  margin: clamp(3rem, 6vw, 5rem) 0 0;
  padding: clamp(1.5rem, 3vw, 2rem);
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--line-soft);
  max-width: 44rem;
}

.closing h3 {
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.closing p {
  font-size: 0.9375rem;
  line-height: 1.7;
  color: var(--ink-soft);
}

/* ---------- Footer (centered to match the document column) ---------- */

.footer {
  margin-top: clamp(3rem, 6vw, 5rem);
  border-top: 1px solid var(--line-soft);
  max-width: var(--content-max);
  margin-left: auto;
  margin-right: auto;
  width: 100%;
}

.footer .sep {
  opacity: 0.5;
}

.footer a {
  border: 0;
  color: var(--muted);
}

.footer a:hover {
  color: var(--ink);
}

/* ---------- Print / PDF ---------- */

@media print {
  @page {
    margin: 18mm 16mm;
  }

  :root {
    --bg: #ffffff;
    --ink: #111;
    --ink-soft: #222;
    --muted: #555;
    --mute-2: #777;
    --line: #ccc;
    --line-soft: #e2e2e2;
    --ink-blue: #2f4a66;
  }

  html,
  body {
    background: #fff;
  }

  .topbar {
    position: static;
    border-bottom: 1px solid #ccc;
    backdrop-filter: none;
    padding: 0 0 1rem;
    margin-bottom: 1.5rem;
  }

  .download {
    display: none !important;
  }

  .brand .mark,
  .brand .wordmark {
    animation: none;
    filter: none;
  }

  .toc {
    display: none !important;
  }

  .body-grid {
    grid-template-columns: 1fr !important;
    gap: 0;
  }

  .page {
    padding: 0;
    max-width: none;
  }

  .footer {
    max-width: none;
    padding: 1.5rem 0 0;
  }

  .clause,
  .part,
  .closing {
    break-inside: avoid;
  }

  .part-head,
  .clause-title {
    break-after: avoid;
  }

  .closing {
    background: #f6f6f4;
  }

  a {
    border: 0;
  }
}