/* legal.css — Typografie für die Rechtstexte von „Plan den Raum“
   (Impressum, AGB, Datenschutz, Widerruf, Kündigung).
   Wird NICHT direkt verlinkt: layout.php lädt sie über $opts['css'].

   Die Datei greift auf die Petrol-Tokens des Planers zu, bringt aber für jeden
   Wert einen Fallback mit — sie funktioniert also auch in einem Chrome ohne
   globale Custom Properties. Alles ist unter `.legal` gescoped, damit die
   Marketing-Hülle unberührt bleibt. */

.legal {
  /* Lesbarkeit: ~72 Zeichen pro Zeile ist das Optimum für Lauftext. */
  --legal-measure: 72ch;
  --legal-ink: var(--ink, #1f242b);
  --legal-ink-2: var(--ink-2, #4b535d);
  --legal-muted: var(--muted, #757e89);
  --legal-line: var(--line, #e3e7ea);
  --legal-line-2: var(--line-2, #eef1f3);
  --legal-accent: var(--accent, #0e7c86);
  --legal-accent-d: var(--accent-d, #0a636b);
  --legal-accent-l: var(--accent-l, #e6f3f4);
  --legal-warn: var(--warn, #e4572e);
  --legal-panel: var(--panel, #fff);
  --legal-radius: var(--r, 10px);

  --legal-text: clamp(1rem, 0.96rem + 0.18vw, 1.0625rem);
  --legal-lh: 1.72;
  --legal-gap: clamp(1.5rem, 1rem + 2vw, 2.75rem);

  max-width: var(--legal-measure);
  margin-inline: auto;
  padding: var(--legal-gap) clamp(1rem, 0.5rem + 3vw, 2rem) calc(var(--legal-gap) * 2);
  color: var(--legal-ink);
  font-size: var(--legal-text);
  line-height: var(--legal-lh);
  /* Silbentrennung: deutsche Rechtstexte haben lange Komposita. */
  hyphens: auto;
  text-wrap: pretty;
}

/* ---------- Überschriften: klare Hierarchie über Skalen-Kontrast ---------- */

.legal h1 {
  margin: 0 0 0.35em;
  font-size: clamp(1.9rem, 1.35rem + 2.4vw, 2.85rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.02em;
  hyphens: manual;
}

/* Kurzer Einleitungssatz direkt unter der H1 */
.legal > .legal-lead {
  margin: 0 0 2.25em;
  max-width: 60ch;
  color: var(--legal-ink-2);
  font-size: 1.1em;
  line-height: 1.6;
}

.legal h2 {
  margin: 2.4em 0 0.55em;
  padding-top: 0.9em;
  border-top: 1px solid var(--legal-line);
  font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.45rem);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  hyphens: manual;
}

.legal h2:first-of-type { border-top: 0; padding-top: 0; }

.legal h3 {
  margin: 1.9em 0 0.4em;
  font-size: 1.02em;
  font-weight: 700;
  color: var(--legal-ink);
  letter-spacing: 0.01em;
}

.legal h4 {
  margin: 1.5em 0 0.3em;
  font-size: 0.95em;
  font-weight: 700;
  color: var(--legal-ink-2);
}

/* Überschriften nie allein am Seitenende / Spaltenende stehen lassen */
.legal h2, .legal h3, .legal h4 { break-after: avoid-page; }

/* ---------- Lauftext, Listen, Links ---------- */

.legal p { margin: 0 0 1.15em; }
.legal p:last-child { margin-bottom: 0; }

.legal ul,
.legal ol { margin: 0 0 1.2em; padding-left: 1.35em; }
.legal li { margin-bottom: 0.45em; }
.legal li > ul,
.legal li > ol { margin: 0.45em 0 0; }

.legal ul { list-style: none; padding-left: 1.1em; }
.legal ul > li { position: relative; }
.legal ul > li::before {
  content: "";
  position: absolute;
  left: -1.1em;
  top: 0.66em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--legal-accent);
}

.legal a {
  color: var(--legal-accent-d);
  text-decoration: underline;
  text-decoration-thickness: from-font;
  text-underline-offset: 0.15em;
  /* Lange URLs / E-Mail-Adressen dürfen brechen statt zu überlaufen. */
  overflow-wrap: anywhere;
}
.legal a:hover { color: var(--legal-accent); text-decoration-thickness: 2px; }
.legal a:focus-visible {
  outline: 2px solid var(--legal-accent); outline-offset: 2px;
  border-radius: 3px; text-decoration: none;
}

.legal strong { font-weight: 700; }
.legal small { font-size: 0.875em; color: var(--legal-ink-2); }
.legal address { font-style: normal; }

/* ---------- Definitionslisten (Anbieterangaben, Preistabellen, Fristen) ---------- */

.legal dl {
  margin: 0 0 1.4em;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(9rem, 15rem) 1fr;
  gap: 0.1em 1.5rem;
  align-items: baseline;
}

.legal dt {
  grid-column: 1; padding: 0.42em 0;
  font-weight: 700; color: var(--legal-ink-2); hyphens: manual;
}

.legal dd { grid-column: 2; margin: 0; padding: 0.42em 0; }

/* Zeilenweise Trennung ab der zweiten Zeile — ruhiger als volle Rahmen. */
.legal dt + dd { border-top: 1px solid var(--legal-line-2); }
.legal dl > dt { border-top: 1px solid var(--legal-line-2); }
.legal dl > dt:first-child,
.legal dl > dt:first-child + dd { border-top: 0; }

@media (max-width: 34rem) {
  .legal dl { grid-template-columns: 1fr; gap: 0; }
  .legal dt { grid-column: 1; padding-bottom: 0; border-top: 1px solid var(--legal-line-2); }
  .legal dd { grid-column: 1; padding-top: 0.1em; border-top: 0; }
  .legal dl > dt:first-child + dd { border-top: 0; }
}

/* Kompakte Variante ohne Trennlinien (z. B. Anschrift im Impressum) */
.legal dl.legal-plain > dt,
.legal dl.legal-plain > dd { border-top: 0; padding: 0.18em 0; }

/* ---------- Abgesetzte Blöcke ---------- */

/* Neutraler Hervorhebungs-Kasten (Muster-Widerrufsformular, Beispiele) */
.legal-box {
  margin: 1.8em 0;
  padding: clamp(1rem, 0.7rem + 1.2vw, 1.6rem);
  background: var(--legal-panel);
  border: 1px solid var(--legal-line);
  border-left: 4px solid var(--legal-accent);
  border-radius: var(--legal-radius);
  box-shadow: var(--shadow-s, 0 1px 3px rgba(20, 30, 40, 0.08));
  break-inside: avoid-page;
}

.legal-box > :first-child { margin-top: 0; }
.legal-box > :last-child { margin-bottom: 0; }

.legal-box h2,
.legal-box h3 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

/* Muster-Widerrufsformular: bewusst „Formular-Optik“ mit Ausfüll-Linien. */
.legal-form-sample { font-size: 0.97em; }
.legal-form-sample .legal-fill {
  display: inline-block; min-width: 12ch;
  border-bottom: 1px dotted var(--legal-muted);
}
.legal-form-sample .legal-note { color: var(--legal-muted); font-size: 0.86em; }

/* Warnender Hinweis (Haftungsausschluss Fachplanung) */
.legal-warn {
  margin: 1.8em 0;
  padding: clamp(1rem, 0.7rem + 1.2vw, 1.6rem);
  background: #fff6f2;
  border: 1px solid #f4cdbe;
  border-left: 4px solid var(--legal-warn);
  border-radius: var(--legal-radius);
  break-inside: avoid-page;
}
.legal-warn > :first-child { margin-top: 0; }
.legal-warn > :last-child { margin-bottom: 0; }
.legal-warn h2,
.legal-warn h3 { margin-top: 0; padding-top: 0; border-top: 0; }

/* Stand-Angabe */
.legal-stand {
  margin-top: 2.5em;
  color: var(--legal-muted);
  font-size: 0.9em;
}

/* Querverweise am Seitenende */
.legal-siehe-auch {
  margin-top: 2em;
  padding-top: 1.1em;
  border-top: 1px solid var(--legal-line);
  font-size: 0.94em;
  color: var(--legal-ink-2);
}

/* Inhaltsübersicht (längere Texte wie die Datenschutzerklärung) */
.legal-toc {
  margin: 0 0 2.5em;
  padding: 1.1em 1.3em;
  background: var(--legal-accent-l);
  border-radius: var(--legal-radius);
  font-size: 0.95em;
}
.legal-toc p { margin: 0 0 0.5em; font-weight: 700; color: var(--legal-accent-d); }
.legal-toc ol { margin: 0; padding-left: 1.3em; columns: 2; column-gap: 2rem; }
.legal-toc li { margin-bottom: 0.28em; break-inside: avoid; }
@media (max-width: 40rem) { .legal-toc ol { columns: 1; } }

/* ---------- Formular (Kündigungsseite nach § 312k BGB) ---------- */

.legal-form { margin: 1.6em 0 0; }

.legal-field { margin-bottom: 1.25em; }

.legal-field > label,
.legal-fieldset > legend {
  display: block;
  margin-bottom: 0.35em;
  font-weight: 700;
  font-size: 0.95em;
  color: var(--legal-ink);
}

.legal-field .legal-hint {
  display: block;
  margin-top: 0.3em;
  color: var(--legal-muted);
  font-size: 0.86em;
  font-weight: 400;
}

.legal-form input[type="email"],
.legal-form input[type="text"],
.legal-form textarea {
  width: 100%; padding: 0.65em 0.8em;
  font: inherit; font-size: 1em; color: var(--legal-ink);
  background: #fff; border: 1px solid #c9d1d6; border-radius: 8px;
  transition: border-color 140ms ease, box-shadow 140ms ease;
}

.legal-form textarea { min-height: 6.5em; resize: vertical; line-height: 1.55; }

.legal-form input:focus-visible,
.legal-form textarea:focus-visible {
  outline: 0; border-color: var(--legal-accent);
  box-shadow: 0 0 0 3px var(--legal-accent-l);
}

.legal-fieldset { margin: 0 0 1.25em; padding: 0; border: 0; }

.legal-radio,
.legal-check {
  display: grid; grid-template-columns: auto 1fr; gap: 0.1em 0.65em;
  align-items: start; padding: 0.55em 0; cursor: pointer;
}
.legal-radio input,
.legal-check input {
  margin: 0.28em 0 0; width: 1.05em; height: 1.05em;
  accent-color: var(--legal-accent);
}
.legal-radio > span,
.legal-check > span { font-size: 0.97em; }
.legal-radio .legal-hint,
.legal-check .legal-hint { display: block; color: var(--legal-muted); font-size: 0.86em; }

.legal-btn {
  display: inline-block; margin-top: 0.4em; padding: 0.78em 1.5em;
  font: inherit; font-weight: 700; font-size: 1em;
  color: #fff; background: var(--legal-accent);
  border: 0; border-radius: 8px; cursor: pointer;
  transition: background 140ms ease, transform 140ms ease, box-shadow 140ms ease;
}
.legal-btn:hover { background: var(--legal-accent-d); box-shadow: var(--shadow-s, 0 1px 3px rgba(20, 30, 40, 0.08)); }
.legal-btn:active { transform: translateY(1px); }
.legal-btn:focus-visible { outline: 2px solid var(--legal-accent-d); outline-offset: 3px; }

/* Statusmeldungen */
.legal-flash,
.legal-error {
  margin: 0 0 1.5em; padding: 0.95em 1.15em;
  border-radius: var(--legal-radius); border-left: 4px solid; font-size: 0.97em;
}
.legal-flash { background: var(--legal-accent-l); border-left-color: var(--legal-accent); }
.legal-error { background: #fff6f2; border-left-color: var(--legal-warn); color: #7a2c12; }
.legal-flash > :last-child,
.legal-error > :last-child { margin-bottom: 0; }

/* Honeypot: für Menschen und Screenreader unsichtbar, für Bots verlockend. */
.legal-honey { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Reduzierte Bewegung ---------- */

@media (prefers-reduced-motion: reduce) {
  .legal-btn,
  .legal-form input,
  .legal-form textarea { transition: none; }
  .legal-btn:active { transform: none; }
}

/* ---------- Druck ---------- */

@media print {
  .legal { max-width: none; padding: 0; font-size: 10.5pt; line-height: 1.5; color: #000; }
  .legal h1 { font-size: 20pt; }
  .legal h2 { font-size: 13pt; margin-top: 1.6em; }
  .legal h3 { font-size: 11pt; }

  .legal a { color: #000; text-decoration: none; }
  /* Ziel-URLs ausschreiben — auf Papier ist ein Link sonst wertlos. */
  .legal a[href^="http"]::after,
  .legal a[href^="mailto"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em; color: #444; word-break: break-all;
  }
  .legal a[href^="#"]::after { content: ""; }

  .legal-box,
  .legal-warn,
  .legal-toc { background: none; border: 1px solid #999; }
  .legal-toc ol { columns: 2; }

  /* Formular und Buttons haben auf Papier keinen Nutzen. */
  .legal-form,
  .legal-btn { display: none; }

  .legal p,
  .legal li,
  .legal dl { orphans: 3; widows: 3; }
}