/* ---------------------------------------------------------------------------
   Rechtstexte — Impressum und Datenschutz (Booster & Bohne)

   Ergaenzt styles.css. Es werden ausschliesslich die bestehenden Marken-Token
   verwendet, keine neuen Farben. Die Marketing-Groessen aus styles.css
   (--type-display bis 7.375rem) sind fuer Fliesstextseiten unbrauchbar und
   werden hier bewusst zurueckgenommen.

   Formsprache uebernommen: Papierflaeche als Kapsel auf salbeigruenem Grund,
   Graphitkontur, grosse Radien, Archivo eng gesetzt.

   Kontraste auf --color-paper (#efe2cc) nachgerechnet:
     --color-ink       #293d2a   9,2 : 1   (Ueberschriften, Links)
     --color-ink-muted #575c47   5,4 : 1   (Fliesstext)
     --color-focus     #a84738   4,6 : 1   (Akzente, Marker)
--------------------------------------------------------------------------- */

.legal-page {
  background: var(--color-sage);
}

.legal-main {
  padding: clamp(var(--space-7), 4vw, var(--space-11)) var(--gutter) clamp(var(--space-9), 6vw, var(--space-13));
}

.legal-shell {
  max-width: var(--container);
  margin-inline: auto;
  padding: clamp(var(--space-8), 5vw, var(--space-13)) clamp(var(--space-6), 4vw, var(--space-12));
  box-sizing: border-box;
  border: var(--border-standard) var(--color-ink);
  border-radius: clamp(2rem, 5vw, 3.5rem);
  background: var(--color-paper);
  color: var(--color-ink);
}

/* Brotkrumen ---------------------------------------------------------------- */

.legal-breadcrumbs {
  margin-bottom: var(--space-7);
  font-size: var(--type-meta);
}

.legal-breadcrumbs ol {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-3);
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-breadcrumbs li + li::before {
  content: "/";
  margin-right: var(--space-3);
  color: var(--color-focus);
}

.legal-breadcrumbs a {
  color: var(--color-ink);
  text-underline-offset: var(--space-1);
}

.legal-breadcrumbs [aria-current] {
  color: var(--color-ink-muted);
}

/* Kopf ---------------------------------------------------------------------- */

.legal-head {
  max-width: 46rem;
  margin-bottom: clamp(var(--space-8), 5vw, var(--space-12));
}

.legal-head .eyebrow {
  color: var(--color-focus);
}

.legal-page h1 {
  margin: 0 0 var(--space-6);
  font-size: clamp(2.75rem, 6vw, 4.5rem);
}

.legal-lead {
  max-width: 40rem;
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--type-chapter-copy);
  line-height: 1.55;
}

/* Hinweis auf offene Angaben ------------------------------------------------ */

.legal-hinweis {
  display: grid;
  gap: var(--space-3);
  max-width: 52rem;
  margin: clamp(var(--space-7), 4vw, var(--space-9)) 0 0;
  padding: var(--space-6) var(--space-6);
  border: var(--border-hairline) var(--color-ink);
  border-left: 6px solid var(--color-focus);
  border-radius: var(--space-4);
  background: color-mix(in srgb, var(--color-focus) 8%, transparent);
}

.legal-hinweis strong {
  color: var(--color-ink);
}

.legal-hinweis p,
.legal-hinweis li {
  margin: 0;
  color: var(--color-ink-muted);
  font-size: var(--type-body-small);
  line-height: 1.6;
}

.legal-hinweis ul {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-left: var(--space-5);
}

/* Als Luecke markierte, noch fehlende Angaben.
   Sie sollen auffallen — nicht wie fertiger Text aussehen. */
.luecke {
  padding: 0.1em 0.4em;
  border-bottom: 2px solid var(--color-focus);
  background: color-mix(in srgb, var(--color-focus) 20%, transparent);
  color: var(--color-ink);
  font-weight: 760;
}

/* Zweispaltiges Grundraster ------------------------------------------------- */

.legal-layout {
  display: grid;
  grid-template-columns: minmax(12rem, 0.4fr) minmax(0, 1.6fr);
  align-items: start;
  gap: clamp(var(--space-7), 5vw, var(--space-13));
}

.legal-toc {
  position: sticky;
  top: var(--space-7);
  padding-top: var(--space-5);
  border-top: var(--border-standard) var(--color-ink);
}

.legal-toc h2 {
  margin: 0 0 var(--space-5);
  font-size: var(--type-label);
  font-weight: 820;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-transform: uppercase;
}

.legal-toc ol {
  display: grid;
  gap: var(--space-3);
  margin: 0;
  padding: 0;
  counter-reset: legal-toc;
  list-style: none;
}

.legal-toc li {
  counter-increment: legal-toc;
}

.legal-toc a {
  display: grid;
  grid-template-columns: 1.9rem 1fr;
  color: var(--color-ink-muted);
  font-size: var(--type-body-small);
  font-weight: 620;
  line-height: 1.35;
  text-decoration: none;
}

.legal-toc a::before {
  content: counter(legal-toc, decimal-leading-zero);
  color: var(--color-focus);
  font-variant-numeric: tabular-nums;
  font-weight: 820;
}

.legal-toc a:hover,
.legal-toc a:focus-visible {
  color: var(--color-ink);
  text-decoration: underline;
  text-underline-offset: var(--space-1);
}

/* Textkoerper --------------------------------------------------------------- */

.legal-body > section {
  padding-block: clamp(var(--space-7), 3.5vw, var(--space-9));
  border-top: var(--border-hairline) color-mix(in srgb, var(--color-ink) 30%, transparent);
}

.legal-body > section:first-child {
  padding-top: var(--space-5);
  border-top: var(--border-standard) var(--color-ink);
}

.legal-body > section:last-child {
  padding-bottom: 0;
}

.legal-body h2 {
  margin: 0 0 var(--space-5);
  font-size: clamp(1.625rem, 2.8vw, 2.25rem);
  line-height: 1.0;
}

.legal-body h3 {
  margin: var(--space-7) 0 var(--space-3);
  font-size: clamp(1.125rem, 1.7vw, 1.3125rem);
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.legal-body p,
.legal-body li {
  max-width: 42rem;
  color: var(--color-ink-muted);
  font-size: var(--type-body);
  line-height: 1.62;
  text-wrap: pretty;
}

.legal-body p {
  margin: 0 0 var(--space-5);
}

.legal-body > section > p:last-child {
  margin-bottom: 0;
}

.legal-body strong {
  color: var(--color-ink);
  font-weight: 760;
}

.legal-body a {
  color: var(--color-ink);
  font-weight: 700;
  text-underline-offset: var(--space-1);
  text-decoration-color: var(--color-focus);
  text-decoration-thickness: 2px;
}

.legal-body a:hover {
  color: var(--color-focus);
}

.legal-body ul {
  display: grid;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding-left: var(--space-5);
}

.legal-body li::marker {
  color: var(--color-focus);
}

.legal-body code {
  padding: 0.1em 0.35em;
  border-radius: var(--space-1);
  background: color-mix(in srgb, var(--color-ink) 10%, transparent);
  font-size: 0.9em;
}

/* Anschriftenblock ---------------------------------------------------------- */

.legal-adresse {
  max-width: 32rem;
  margin: 0 0 var(--space-5);
  padding: var(--space-5) var(--space-6);
  border: var(--border-hairline) var(--color-ink);
  border-left: 6px solid var(--color-ink);
  border-radius: var(--space-4);
  background: color-mix(in srgb, var(--color-community) 34%, transparent);
  color: var(--color-ink);
  font-size: var(--type-body);
  font-style: normal;
  line-height: 1.7;
}

.legal-adresse strong {
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-display);
  font-size: 1.375rem;
  font-weight: 820;
  letter-spacing: -0.04em;
  line-height: 1.05;
}

.legal-adresse a {
  color: var(--color-ink);
  font-weight: 700;
  text-underline-offset: var(--space-1);
  text-decoration-color: var(--color-focus);
}

/* Angabenliste (Steuer, Kontakt …) ------------------------------------------ */

.legal-dl {
  margin: 0 0 var(--space-5);
  border-bottom: var(--border-hairline) color-mix(in srgb, var(--color-ink) 30%, transparent);
}

.legal-dl > div {
  display: grid;
  grid-template-columns: minmax(11rem, 0.35fr) minmax(0, 1fr);
  gap: var(--space-1) var(--space-6);
  padding-block: var(--space-3);
  border-top: var(--border-hairline) color-mix(in srgb, var(--color-ink) 30%, transparent);
}

.legal-dl dt {
  color: var(--color-ink);
  font-weight: 760;
}

.legal-dl dd {
  margin: 0;
  color: var(--color-ink-muted);
}

.legal-dl small {
  display: block;
  font-size: var(--type-meta);
}

.legal-dl a {
  color: var(--color-ink);
  font-weight: 700;
  text-underline-offset: var(--space-1);
  text-decoration-color: var(--color-focus);
}

/* Stand-Zeile --------------------------------------------------------------- */

.legal-stand {
  margin-top: var(--space-6);
  color: var(--color-ink-muted);
  font-size: var(--type-body-small);
}

/* Abschluss der Kapsel ------------------------------------------------------ */

.legal-outro {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-5);
  margin-top: clamp(var(--space-8), 5vw, var(--space-11));
  padding-top: clamp(var(--space-7), 3.5vw, var(--space-9));
  border-top: var(--border-standard) var(--color-ink);
}

.legal-outro p {
  margin: 0;
  max-width: 30rem;
  color: var(--color-ink-muted);
}

/* Schmalere Fenster --------------------------------------------------------- */

@media (max-width: 62rem) {
  .legal-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-8);
  }

  .legal-toc {
    position: static;
    top: auto;
  }

  .legal-toc ol {
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
  }
}

@media (max-width: 51.25rem) {
  .legal-main {
    padding-inline: var(--gutter-mobile);
  }
}

@media (max-width: 38rem) {
  .legal-dl > div {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-1);
  }

  .legal-adresse {
    padding: var(--space-5);
  }

  .legal-shell {
    border-radius: var(--space-8);
  }
}

/* Rechtszeile auf der Fehlerseite ------------------------------------------
   Impressum und Datenschutz muessen von jeder Seite aus erreichbar sein
   ("staendig verfuegbar", § 5 DDG). Die 404-Seite hat keine Fusszeile,
   deshalb hier eine schlanke Zeile — und die Vollhoehe von .error-main
   entsprechend zurueckgenommen, damit die Seite nicht zu scrollen anfaengt.
--------------------------------------------------------------------------- */

.error-page .error-main {
  min-height: calc(100svh - var(--header-height) - 4.5rem);
}

.error-legal {
  min-height: 4.5rem;
  padding: var(--space-4) max(var(--gutter), calc((100vw - var(--container)) / 2));
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3) var(--space-6);
  border-top: var(--border-standard) var(--color-ink);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--type-body-small);
}

.error-legal a {
  font-weight: 700;
  text-underline-offset: var(--space-2);
}

.error-legal span {
  color: var(--color-ink-muted);
}

@media (max-width: 51.25rem) {
  .error-page .error-main {
    min-height: calc(100svh - var(--header-height-mobile) - 4.5rem);
  }

  .error-legal {
    padding-inline: var(--gutter-mobile);
  }
}