/* =====================================================================
   Tivinaut – legal pages (imprint, privacy, terms, contact)
   ---------------------------------------------------------------------
   Loaded on top of css/styles.css, which is not touched: every token,
   the glass utilities, header, footer, buttons and the reduced
   motion / reduced transparency / no-backdrop-filter fallbacks come
   from there. This file only adds the document layout.

   Two glass slabs are in view at most (table of contents + document),
   the same budget the start page keeps. Nothing nests a backdrop-filter
   inside another one: everything sitting ON the document slab uses
   .glass--inner (see the rules in css/styles.css).
   ===================================================================== */

/* js/legal.js hides empty blocks with the hidden attribute; the flex/grid
   display rules below would otherwise beat the UA's [hidden] rule */
[hidden] {
  display: none !important;
}

.legal {
  padding: calc(var(--header-h) + clamp(30px, 6vh, 68px)) var(--pad) clamp(64px, 10vh, 120px);
}

.legal-wrap {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  /* minmax(0, 1fr) instead of the implicit "auto": a grid item is at least
     min-content wide by default, and one long German compound would push the
     whole column past a 360px screen */
  grid-template-columns: minmax(0, 1fr);
  gap: clamp(18px, 2.6vw, 32px);
  align-items: start;
}

/* ---------- table of contents ---------- */
/* Below 1100px the list is a panel at the top of the page that folds
   open; from 1100px it is a sticky sidebar. The toggle stays operable at
   every width (it is the panel's heading as well), js/legal.js only
   decides the initial state per breakpoint. */
.legal-toc {
  border-radius: 18px;
  padding: 6px;
}

.legal-toc-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-radius: 14px;
  background: none;
  cursor: pointer;
  font-family: var(--font-head);
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink);
  text-align: left;
}

.legal-toc-btn .material-symbols-outlined {
  font-size: 20px;
  color: var(--ice-2);
}

.legal-toc-chevron {
  margin-left: auto;
  transition: transform 240ms var(--ease-out);
}

.legal-toc.is-open .legal-toc-chevron {
  transform: rotate(180deg);
}

.legal-toc-btn:focus-visible,
.legal-toc-btn:active {
  background-color: rgba(191, 227, 255, 0.12);
}

@media (hover: hover) {
  .legal-toc-btn:hover {
    background-color: rgba(191, 227, 255, 0.12);
  }
}

.legal-toc-list {
  display: none;
  margin: 0;
  padding: 4px 14px 12px;
  list-style: none;
}

.legal-toc.is-open .legal-toc-list {
  display: block;
}

/* no numbering here on purpose: some documents number their own headings
   ("1. Vertragspartner …"), a second counter would read as a double number */
.legal-toc-list a {
  display: block;
  padding: 7px 0 7px 13px;
  border-left: 2px solid transparent;
  font-size: 0.88rem;
  line-height: 1.35;
  color: var(--muted);
  transition: color 160ms ease, border-color 160ms ease;
}

.legal-toc-list a:focus-visible,
.legal-toc-list a:active {
  color: var(--ink);
  border-left-color: var(--amber);
}

@media (hover: hover) {
  .legal-toc-list a:hover {
    color: var(--ink);
    border-left-color: var(--amber);
  }
}

/* ---------- document slab ---------- */
.legal-doc {
  /* The measure, not the slab: ch is the width of the digit zero, which runs
     wider than the average letter, and the padding is inside the box. 68ch
     plus padding lands at roughly 76 characters per line (measured in
     Chrome at 1440px), which is where legal prose stays readable. */
  max-width: 68ch;
  padding: clamp(26px, 4vw, 46px) clamp(22px, 4vw, 46px) clamp(30px, 4vw, 48px);
  border-radius: var(--radius);
}

/* headings: German compounds ("Nutzungsbedingungen") are wider than a 360px
   screen at display size. hyphens:auto uses the dictionary of the language in
   <html lang> and breaks at a syllable; overflow-wrap is only the last resort
   for something the dictionary does not know (a URL, a product name). */
.legal-title,
.legal-h2,
.legal-rte h3 {
  overflow-wrap: break-word;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* the sidebar entries are short enough to fit without the dictionary; a
   hyphen per line would only make the column noisy */
.legal-toc-list a {
  overflow-wrap: break-word;
}

.legal-title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.85rem, 4.4vw, 3.2rem);
  line-height: 1.07;
  letter-spacing: -0.025em;
  margin-top: 16px;
}

.legal-updated {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-size: 0.84rem;
  color: var(--muted);
}

.legal-updated .material-symbols-outlined {
  font-size: 18px;
}

.legal-intro {
  margin-top: 22px;
  font-size: 1.02rem;
}

.legal-sections {
  margin-top: 6px;
}

.legal-section {
  margin-top: 34px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
  scroll-margin-top: calc(var(--header-h) + 20px);
}

.legal-h2 {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(1.3rem, 2.4vw, 1.7rem);
  line-height: 1.18;
  letter-spacing: -0.015em;
  margin-bottom: 14px;
}

/* ---------- the text bodies coming from i18n/legal/<lang>.js ---------- */
/* Allowed tags: p, ul, ol, li, strong, em, br, a, h3 */
.legal-rte p {
  margin: 0 0 13px;
  color: var(--ink);
}

.legal-rte > *:last-child {
  margin-bottom: 0;
}

.legal-rte h3 {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: 0.01em;
  margin: 22px 0 10px;
  color: var(--ice);
}

.legal-rte ul,
.legal-rte ol {
  margin: 0 0 14px;
  padding-left: 1.35em;
}

.legal-rte ul {
  list-style: disc;
}

.legal-rte ol {
  list-style: decimal;
}

.legal-rte li {
  margin-bottom: 7px;
}

.legal-rte li::marker {
  color: var(--ice-2);
}

.legal-rte strong {
  font-weight: 600;
  color: #ffffff;
}

.legal-rte em {
  font-style: normal;
  color: var(--muted);
}

/* addresses, mail addresses and URLs must never push the page sideways */
.legal-rte a,
.legal-rte p,
.legal-rte li {
  overflow-wrap: anywhere;
}

.legal-rte a {
  color: var(--amber);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color 160ms ease;
}

.legal-rte a:focus-visible,
.legal-rte a:active {
  color: #ffc083;
  text-decoration-thickness: 2px;
}

@media (hover: hover) {
  .legal-rte a:hover {
    color: #ffc083;
    text-decoration-thickness: 2px;
  }
}

/* ---------- footer of the document ---------- */
.legal-foot {
  margin-top: 36px;
  padding-top: 26px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  justify-content: space-between;
}

.legal-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  flex: 1 1 260px;
  margin: 0;
  font-size: 0.82rem;
  color: var(--muted);
}

.legal-note .material-symbols-outlined {
  font-size: 18px;
  margin-top: 1px;
}

/* the back link sits ON the document glass: inner variant, no second
   backdrop-filter (a filtered child of a filtered parent renders grey) */
.legal-back {
  min-height: 46px;
  padding: 10px 20px;
  font-size: 0.92rem;
  background-color: var(--glass-tint-2);
}

.legal-back:focus-visible,
.legal-back:active {
  background-color: rgba(191, 227, 255, 0.19);
}

@media (hover: hover) {
  .legal-back:hover {
    background-color: rgba(191, 227, 255, 0.19);
  }
}

/* the current page in the footer link row */
.footer-links a[aria-current="page"] {
  color: var(--amber);
}

/* =====================================================================
   Responsive
   ===================================================================== */
@media (min-width: 1100px) {
  .legal-wrap {
    grid-template-columns: minmax(0, 252px) minmax(0, 1fr);
  }

  .legal-toc {
    position: sticky;
    top: calc(var(--header-h) + 22px);
    max-height: calc(100vh - var(--header-h) - 44px);
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

@media (max-width: 720px) {
  /* narrow column plus long compounds: hyphenate the running text as well,
     otherwise single words leave holes in the ragged edge */
  .legal-intro,
  .legal-rte p,
  .legal-rte li {
    -webkit-hyphens: auto;
    hyphens: auto;
  }
}

@media (max-width: 420px) {
  .legal-toc-btn {
    letter-spacing: 0.12em;
  }

  .legal-foot {
    gap: 14px;
  }

  .legal-back {
    width: 100%;
    justify-content: center;
  }
}

/* =====================================================================
   Reduced motion
   ===================================================================== */
@media (prefers-reduced-motion: reduce) {
  .legal-toc-chevron,
  .legal-toc-list a,
  .legal-rte a,
  .legal-back {
    transition: none;
  }
}

/* Shown only without JavaScript: the provider identity must stay reachable (imprint duty). */
.legal-noscript {
  max-width: 76ch;
  margin: 6rem auto 2rem;
  padding: 1.25rem 1.5rem;
  color: var(--ink, #eef2ff);
  background: rgba(10, 18, 40, 0.85);
  border: 1px solid rgba(124, 196, 255, 0.35);
  border-radius: 16px;
}
.legal-noscript a { color: var(--amber, #ff9a3c); }