/* ══ Rechtstexte (Impressum, Datenschutz) ═════════════════════════════════════
   Loaded by template-legal.php only. The protos have no legal page, so this
   follows the reference detail page of V18: sand title band, then label left
   and text right in the 4/7 grid of its project text.

   The privacy policy is HTML from an external provider (#content-dse) that
   brings its own <style> with ids and !important. Every rule for it is
   therefore prefixed with .legal-policy to win on specificity, and the few
   !important ones are answered with !important. Its markup can change with
   the provider's next update, so nothing here relies on more than tag names.
   ══════════════════════════════════════════════════════════════════════════ */

.legal {
  --gut: max(var(--pad), calc((100% - 1280px) / 2 + var(--pad)));
  padding-bottom: clamp(72px, 10vw, 140px);
}

/* Everything except the title band sits on the 1280 grid of the pages. */
.legal > :not(.legal-head) { margin-inline: var(--gut); }

/* ══ Title band ══ */
.legal-head {
  background: var(--sand);
  padding: clamp(40px, 6vw, 88px) var(--gut) clamp(48px, 6.4vw, 96px);
}
/* "Datenschutzerklärung" is one long word: it hyphenates on narrow screens
   instead of running out of the band. Safari reads the -webkit- pair. */
.legal-head h1 {
  margin-top: 10px;
  font-size: clamp(2.6rem, 7vw, 104px); line-height: .92; letter-spacing: -.025em; font-weight: 400;
  text-wrap: balance; overflow-wrap: break-word;
  hyphens: auto; hyphenate-limit-chars: 10 5 5;
  -webkit-hyphenate-limit-before: 5; -webkit-hyphenate-limit-after: 5;
}

/* ══ Sections: label left, text right ══ */
.legal-sec,
.legal-policy {
  display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(32px, 5vw, 88px); align-items: start;
  padding-top: clamp(56px, 8vw, 120px);
}
.legal-sec + .legal-sec {
  margin-top: clamp(48px, 6vw, 88px);
  padding-top: clamp(48px, 6vw, 88px);
  border-top: 1px solid var(--grey-20);
}

.legal-label {
  font-size: 12px; font-weight: 700; line-height: 1.5;
  letter-spacing: .14em; text-transform: uppercase; color: var(--grey-60);
  padding-top: .5em;
}

/* Running text, as the project text of a reference page. */
.legal-body,
.legal-policy #content-dse {
  max-width: 68ch;
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.7; font-weight: 500;
  color: #4a4c4f; text-wrap: pretty;
}
.legal-body > * + * { margin-top: 18px; }
.legal-body h3 {
  font-size: clamp(24px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -.01em; font-weight: 400;
  color: var(--ink);
}
.legal-body h3 + p { margin-top: 14px; }
.legal-body strong,
.legal-policy #content-dse b,
.legal-policy #content-dse strong { font-weight: 700; color: var(--ink); }

/* Links carry the copper underline of the V18 text links. An <a> without
   href (an e-mail address in the old content) stays plain text. */
.legal a[href] {
  color: var(--ink);
  text-decoration: underline; text-decoration-color: var(--copper);
  text-decoration-thickness: 2px; text-underline-offset: .22em;
  overflow-wrap: anywhere;
  transition: color .2s;
}
.legal a[href]:hover { color: var(--copper); }

/* Cookie settings button (Borlabs, only when the plugin runs). */
.legal > p:not([class]) { padding-top: clamp(32px, 4vw, 56px); }

/* ══ Privacy policy ══ */
.legal-policy > #content-dse { grid-column: 2; grid-row: 1; }
.legal-policy > noscript { grid-column: 1 / -1; }
.legal-policy > noscript iframe { border: 0; }

/* The page title is the H1 of the title band; the provider repeats it. */
.legal-policy #content-dse h1 { display: none; }

.legal-policy #content-dse h2 {
  margin: clamp(48px, 6vw, 88px) 0 0;
  padding-top: clamp(28px, 3.4vw, 44px);
  border-top: 1px solid var(--grey-20);
  font-size: clamp(24px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -.01em; font-weight: 400;
  color: var(--ink); text-wrap: balance;
  overflow-wrap: break-word; hyphens: auto;
}
.legal-policy #content-dse h1 + h2 { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-policy #content-dse h2 + * { margin-top: 18px; }
.legal-policy #content-dse p { margin: 18px 0 0; }
.legal-policy #content-dse > br { display: none; }

/* Lists: small copper squares, centred on the first line (V18 Haltung). */
.legal-policy #content-dse ul { margin: 14px 0 0; padding: 0; list-style: none; }
.legal-policy #content-dse li { position: relative; padding: 2px 0 2px 20px; }
.legal-policy #content-dse li::before {
  content: ""; position: absolute; left: 0; top: calc(2px + .85em - 3px);
  width: 6px; height: 6px; background: var(--copper);
}

/* Accordions as the fields of V18 Haltung: lines, plus/minus, copper on hover. */
.legal-policy #content-dse details {
  margin: 0; border-top: 1px solid var(--grey-20);
  overflow-wrap: anywhere;
}
.legal-policy #content-dse :not(details) + details { margin-top: 24px; }
.legal-policy #content-dse details:not(:has(+ details)) { border-bottom: 1px solid var(--grey-20); }
.legal-policy #content-dse details > summary {
  display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 20px; align-items: center;
  width: auto; margin: 0; padding: clamp(16px, 1.8vw, 22px) 0;
  background: none; color: var(--ink); border-radius: 0;
  font-size: clamp(17px, 1.5vw, 20px); line-height: 1.4; font-weight: 500;
  list-style: none; cursor: pointer;
  transition: color .2s;
}
.legal-policy #content-dse details > summary::-webkit-details-marker { display: none; }
.legal-policy #content-dse details > summary::before { content: none !important; display: none; }
.legal-policy #content-dse details > summary b { font-weight: 500; }
.legal-policy #content-dse details > summary::after {
  content: ""; width: 20px; height: 20px;
  background:
    linear-gradient(var(--ink), var(--ink)) center / 20px 2px no-repeat,
    linear-gradient(var(--ink), var(--ink)) center / 2px 20px no-repeat;
}
.legal-policy #content-dse details[open] > summary::after {
  background: linear-gradient(var(--ink), var(--ink)) center / 20px 2px no-repeat;
}
.legal-policy #content-dse details > summary:hover { background: none; color: var(--copper); }
.legal-policy #content-dse details > summary:focus-visible { outline: 2px solid var(--copper); outline-offset: 4px; }
.legal-policy #content-dse details > div { margin: 0; padding: 0 0 clamp(24px, 3vw, 40px); }
.legal-policy #content-dse details > div > :first-child { margin-top: 0; }
.legal-policy #content-dse details > div > * + table { margin-top: 14px; }

/* Tables: rows on lines, label column in grey, no zebra and no hover. */
.legal-policy #content-dse table {
  width: 100%; margin: 0; border: 0 !important; border-collapse: collapse;
  font-size: clamp(15px, 1.25vw, 17px); line-height: 1.5;
}
.legal-policy #content-dse tr,
.legal-policy #content-dse tr:nth-child(even),
.legal-policy #content-dse tr:hover { background: none; border: 0; border-radius: 0; overflow: visible; cursor: auto; }
.legal-policy #content-dse td,
.legal-policy #content-dse th {
  padding: 12px 20px 12px 0 !important;
  border-top: 1px solid var(--grey-20);
  text-align: left; vertical-align: top;
}
.legal-policy #content-dse tr:first-child > td,
.legal-policy #content-dse tr:first-child > th { border-top: 0; }
.legal-policy #content-dse td:first-child { width: 40%; color: var(--grey-60); }
.legal-policy #content-dse th { font-weight: 700; color: var(--ink); }

/* ══ Table of contents (assets/js/legal.js) ══ */
.legal-toc { grid-column: 1; grid-row: 1; position: sticky; top: 130px; }
.legal-toc-label {
  font-size: 12px; font-weight: 700; line-height: 1.5;
  letter-spacing: .14em; text-transform: uppercase; color: var(--grey-60);
}
.legal-toc ol { margin: 16px 0 0; padding: 0; list-style: none; counter-reset: toc; }
.legal-toc li { counter-increment: toc; }
.legal .legal-toc a {
  display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 8px;
  padding: 8px 0;
  font-size: 15px; line-height: 1.4; font-weight: 500;
  color: var(--grey-60); text-decoration: none;
}
.legal-toc a::before {
  content: counter(toc, decimal-leading-zero);
  font-size: 13px; font-weight: 700; letter-spacing: .06em; color: var(--copper);
}
.legal .legal-toc a:hover { color: var(--ink); }

@media (max-width: 900px) {
  .legal-sec,
  .legal-policy { grid-template-columns: minmax(0, 1fr); }
  .legal-sec { gap: 16px; }
  .legal-label { padding-top: 0; }
  .legal-policy > #content-dse { grid-column: 1; grid-row: auto; }
  .legal-toc { position: static; grid-row: auto; padding-bottom: 8px; border-bottom: 1px solid var(--grey-20); }
}

/* Narrow screens stack the table rows: label above value. */
@media (max-width: 600px) {
  .legal-policy #content-dse table,
  .legal-policy #content-dse tbody,
  .legal-policy #content-dse tr,
  .legal-policy #content-dse td,
  .legal-policy #content-dse th { display: block; width: auto; }
  .legal-policy #content-dse tr,
  .legal-policy #content-dse tr:nth-child(even),
  .legal-policy #content-dse tr:hover { padding: 12px 0; border-top: 1px solid var(--grey-20); }
  .legal-policy #content-dse tr:first-child { border-top: 0; }
  .legal-policy #content-dse td,
  .legal-policy #content-dse th { padding: 0 !important; border-top: 0; }
  .legal-policy #content-dse td:first-child { width: auto; margin-bottom: 4px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .legal a[href], .legal-policy #content-dse details > summary { transition: none; }
}