/* ==========================================================================
   Stadler Prüfpumpen – Textseiten (Impressum, Datenschutzerklärung, Fehlerseite)
   Kopf- und Fußzeile kommen aus style.css und sind auf allen Seiten identisch
   (scripts/sync_layout.py überträgt sie von der Startseite). Hier steht nur der
   Textbereich <main class="legal"> samt Übersetzungshinweis.
   Immer nach base.css und style.css einbinden.
   ========================================================================== */

/* Breite der Textspalte – der Übersetzungshinweis darüber richtet sich ebenfalls danach */
:root {
  --legal-width: 50rem;
}

/* Warnbanner auf den übersetzten Rechtsseiten: nur die deutsche Fassung ist rechtlich verbindlich */
.translation-banner {
  border-bottom: 1px solid #f6cfae;
  background: #fff6ee;
  color: #6b3a10;
  font-size: .95rem;
  line-height: 1.55;
}

/* Inhalt so breit wie die Textspalte (.legal-inner) statt am breiteren Raster der Kopfzeile */
.translation-banner .container {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  width: min(100% - 2 * var(--gutter), var(--legal-width));
  padding-block: .85rem;
}

.translation-banner svg {
  flex: none;
  width: 1.35rem;
  height: 1.35rem;
  margin-top: .15rem;
  color: var(--orange-ink);
}

/* Breite Fenster: Symbol links neben der Spalte, damit der Hinweis bündig mit dem Text darunter beginnt */
@media (min-width: 961px) {
  .translation-banner svg {
    margin-left: calc(-1.35rem - .85rem); /* Symbolbreite + Abstand */
  }
}

.translation-banner strong {
  color: #4f2a08;
}

.translation-banner a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.translation-banner a:hover {
  color: var(--orange-ink);
}

/* ---------- Textbereich ---------- */
.legal {
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.7;
}

.legal-inner {
  width: min(100% - 2 * var(--gutter), var(--legal-width));
  margin-inline: auto;
}

.legal h1 {
  margin-top: .6rem;
  font-size: clamp(2rem, 1.4rem + 2.4vw, 2.9rem);
  font-weight: 650;
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--navy);
}

.legal h2 {
  margin-top: 2.5rem;
  font-size: 1.3rem;
  font-weight: 650;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--navy);
}

/* Sehr lange Überschrift (Datenschutzerklärung, Abschnitt 13): auf Handys kleiner, sonst füllt sie 8–12 Zeilen */
.legal h2.long {
  font-size: clamp(1.0625rem, .8rem + 1.2vw, 1.3rem);
}

/* Unterpunkte a), b), … innerhalb eines nummerierten Abschnitts */
.legal h3 {
  margin-top: 1.75rem;
  font-size: 1.05rem;
  font-weight: 650;
  line-height: 1.4;
  color: var(--navy);
}

.legal p,
.legal ul,
.legal address {
  margin-top: .9rem;
}

.legal h3 + p,
.legal h3 + ul {
  margin-top: .5rem;
}

.legal ul {
  padding-left: 1.25rem;
}

.legal li + li {
  margin-top: .4rem;
}

.legal a:not(.btn) {
  color: var(--navy);
  text-decoration: underline;
  text-underline-offset: 3px;
  overflow-wrap: anywhere; /* Notbehelf für Stücke, die allein nicht in die Zeile passen; ausgeschriebene Adressen (Google, YouTube) brechen vorher an <wbr> nach „/“ um */
}

.legal a:not(.btn):hover {
  color: var(--orange-ink);
}

/* Herkunftsvermerk des Datenschutz-Generators am Ende der Erklärung */
.legal .colophon {
  margin-top: 3rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--line);
  font-size: .85rem;
  color: var(--muted);
}

/* Schaltflächen der Fehlerseite (ein Weg in jede Sprache); die Gestaltung .btn kommt aus style.css */
.legal .actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.75rem;
}