/* =========================================================================
   chatCOS — Rechtsseiten (Impressum, Datenschutzerklaerung)

   Der Rechtstext ist woertlich von niehuesconsulting.de uebernommen und
   bringt sein eigenes Markup mit: h2/h3, p, ul, ul.index (Inhaltsuebersicht),
   ul.glossary (Begriffsdefinitionen), ul.m-elements (Aufzaehlungen im
   Fliesstext), a.index-link. Deshalb wird hier ueber Element-Selektoren
   innerhalb von .legal-body gestylt und nicht ueber eigene Klassen: am
   Rechtstext selbst wird nichts angefasst.

   Farben, Abstaende und Schriften kommen ausschliesslich aus den Tokens
   von base.css. Die Rechtsseiten laufen bewusst nur in der hellen
   Farbwelt (data-mode="business", fest im html-Tag): sie haben nichts
   umzuschalten, und ein Langtext liest sich hell am ruhigsten.
   ========================================================================= */

/* ---- Kopfzeile ------------------------------------------------------- */
/* Ohne main.js gibt es kein .scrolled, die Trennlinie steht daher fest. */
.legal-nav { border-bottom-color: var(--border); }
.legal-nav .container { gap: 14px; }
.legal-nav .btn { padding: 9px 16px; font-size: .88rem; }

/* ---- Titelbereich ---------------------------------------------------- */
.legal-hero {
  padding-block: clamp(48px, 6vw, 78px) clamp(28px, 3.5vw, 40px);
  border-bottom: 1px solid var(--border);
  background: var(--surface-2);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.legal-hero h1 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(2rem, 4.4vw, 3rem); line-height: 1.05; letter-spacing: -.03em;
}
.legal-hero p { margin-top: 14px; max-width: 62ch; font-size: .95rem; }

/* ---- Textkoerper ----------------------------------------------------- */
/* Der Container haelt die linke Kante buendig unter der H1 des Titelbereichs,
   begrenzt wird nur die Lesebreite der Inhalte selbst. */
/* Feste Lesebreite in rem, nicht in ch: ch haengt an der Schriftgroesse des
   jeweiligen Elements, eine H2 bekaeme damit eine deutlich breitere Spalte als
   der Absatz darunter, und die Trennlinien ueber den Ueberschriften wuerden
   sichtbar weiter nach rechts laufen als der Text. Eine Kante fuer alles. */
.legal-body { padding-block: clamp(44px, 5.5vw, 72px) clamp(76px, 9vw, 116px); }
.legal-body > * { max-width: 46rem; }

.legal-body h2 {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1.32rem, 2.3vw, 1.72rem); line-height: 1.2; letter-spacing: -.025em;
  color: var(--text);
  margin: clamp(44px, 5vw, 64px) 0 16px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
  scroll-margin-top: calc(var(--nav-h) + 20px);
}
.legal-body h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.legal-body h3 {
  font-size: 1.02rem; color: var(--text);
  margin: 28px 0 10px; letter-spacing: -.015em;
  scroll-margin-top: calc(var(--nav-h) + 20px);
}

.legal-body p {
  font-size: .95rem; color: var(--text-muted); line-height: 1.82;
  margin-bottom: 14px; overflow-wrap: break-word;
}
.legal-body strong { color: var(--text); font-weight: 600; }

/* Der Rechtstext enthaelt ausgeschriebene Langlinks (etwa die Standard-
   vertragsklauseln der EU). Ohne "anywhere" ragen die auf 390px weit ueber
   die Textspalte hinaus, und body { overflow-x: hidden } schneidet sie
   stillschweigend ab, statt einen sichtbaren Ueberlauf zu zeigen. */
.legal-body a {
  color: var(--accent); text-decoration: underline;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  overflow-wrap: anywhere;
  transition: color .25s var(--ease);
}
.legal-body a:hover { color: var(--accent-2); }

.legal-body ul { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
.legal-body li {
  font-size: .95rem; color: var(--text-muted); line-height: 1.78;
  position: relative; padding-left: 18px; overflow-wrap: break-word;
}
.legal-body li::before {
  content: ""; position: absolute; left: 0; top: .78em;
  width: 7px; height: 1.5px; border-radius: 1px;
  background: var(--accent); opacity: .55;
}

/* Inhaltsuebersicht und Glossar sind lang: ab Tablet zweispaltig. */
.legal-body ul.index, .legal-body ul.glossary { margin-top: 10px; }
@media (min-width: 760px) {
  .legal-body ul.index { display: block; columns: 2; column-gap: 44px; }
  .legal-body ul.index li { break-inside: avoid; margin-bottom: 9px; }
}
.legal-body .index-link { color: var(--text-muted); text-decoration: none; }
.legal-body .index-link:hover { color: var(--accent); text-decoration: underline; }

/* Die Aufzaehlungen unter jedem Abschnitt sind Metadaten, keine Fliesstexte:
   eine Stufe leiser als der Absatz darueber. */
.legal-body ul.m-elements li {
  font-size: .875rem;
  color: color-mix(in srgb, var(--text-muted) 82%, var(--bg));
}
.legal-body ul.glossary li { margin-bottom: 6px; }

/* Die Fusszeile kommt unveraendert aus base.css: gleiche Marke, gleicher Satz,
   gleiche Pflichtlinks wie auf der Startseite. Nur die Wortmarke zeigt hier
   nach "/" statt auf einen Anker. */

@media (max-width: 560px) {
  .legal-nav .brand { font-size: 1rem; }
  .legal-body > * { max-width: none; }
}