/* Le Flâneur — Impressum und Datenschutz.
   Gestaltung aus dem gelieferten Design-Kit (`LegalPage`, `LegalSection`,
   `LegalRows`).
   Setzt `the-new-elegance.css` voraus.

   Diese Datei ist absichtlich von beiden Wegen aus ladbar:
   - eigenstaendig, solange „Coming Soon" oder die Wartungsseite vor der
     Website steht (dann ohne Navigation, siehe WebsiteLegalPages),
   - im Layout des Templates, sobald die Website live ist.

   Genau das fehlte zuvor: die Regeln lagen nur in `le-flaneur.css`, die das
   Template-Layout nicht laedt — im Live-Fall fiel die Angabenliste damit auf
   die Browser-Standarddarstellung zurueck.

   Sie kommt deshalb ohne die `--type-*`-Kurzschreibweisen aus: die gibt es nur
   im Kit-Stylesheet, nicht in der `style.css` des Templates. Alle Werte
   stehen ausgeschrieben, mit Rueckfallwert, damit die Seite in beiden
   Umgebungen gleich aussieht. */

.legal-page {
  /* Bewusst nicht `--font-serif-display`: das zeigt in der `style.css` des
     Templates auf Cormorant Garamond, den Ersatz aus der Zeit vor dem
     Marken-Font. Die Pflichtseiten sollen in beiden Umgebungen dieselbe
     Schrift tragen. */
  --legal-serif: "The New Elegance", "Cormorant Garamond", "Times New Roman", serif;
  --legal-sans: "Jost", "Century Gothic", "Futura", sans-serif;

  max-width: 720px;
  margin: 0 auto;
}

/* Zurueck-Link steht oben, wie im Kit: auf der eigenstaendigen Fassung ist er
   der einzige Weg aus der Seite heraus, und unten am Ende eines langen
   Rechtstexts findet ihn niemand. Im Template-Layout entfaellt er, dort
   traegt die Kopfzeile die Navigation. */
.legal-back {
  display: inline-block;
  font: 400 var(--text-xs, 12px)/1.4 var(--legal-sans);
  letter-spacing: var(--tracking-eyebrow, 0.24em);
  text-transform: uppercase;
  color: var(--text-accent, #5d6e7c);
  text-decoration: none;
  margin-bottom: var(--space-6, 32px);
}
.legal-back:hover { text-decoration: underline; text-underline-offset: 3px; }

.legal-eyebrow {
  font: 400 var(--text-xs, 12px)/1.4 var(--legal-sans);
  letter-spacing: var(--tracking-eyebrow, 0.24em);
  text-transform: uppercase;
  color: var(--text-muted, #66686b);
  margin-bottom: var(--gap-eyebrow, 24px);
}

/* Gemischte Schreibung, nicht gesperrte Versalien: die Pflichtseiten tragen im
   Kit den Display-Titel und nicht die `.heading-display` der uebrigen Seiten. */
.legal-title {
  font-family: var(--legal-serif);
  font-weight: 400;
  font-size: clamp(34px, 3.6vw, 44px);
  line-height: 1.2;
  color: var(--text-heading, #26241f);
  text-transform: none;
  letter-spacing: normal;
  margin: 0;
  word-spacing: 0.06em;
  overflow-wrap: break-word;
  hyphens: manual;
}

.legal-rule {
  width: 48px;
  border-top: 2px solid var(--greige-dark, #c3bbac);
  margin: 20px 0 0;
}

.legal-content {
  margin-top: var(--space-5, 24px);
  font: 400 var(--text-base, 16px)/1.65 var(--legal-sans);
  color: var(--text-body, #3c3a34);
}

.legal-content .legal-intro { color: var(--text-muted, #66686b); margin: 0; }

/* Der eingesetzte HTML-Block kommt aus einem Generator und bringt keine
   eigenen Klassen mit — die Elemente werden deshalb direkt gestaltet. */
.legal-content h1,
.legal-content h2,
.legal-content h3 {
  font-family: var(--legal-serif);
  font-weight: 500;
  font-size: var(--text-xl, 24px);
  line-height: 1.3;
  color: var(--text-heading, #26241f);
  text-transform: none;
  letter-spacing: normal;
  margin: var(--space-7, 48px) 0 var(--space-4, 16px);
  word-spacing: 0.06em;
}
.legal-content h2 { padding-bottom: 12px; border-bottom: 1px solid var(--border-hairline, rgba(38, 36, 31, 0.16)); }
.legal-content h3 { font-size: var(--text-lg, 19px); }
.legal-content > :first-child { margin-top: 0; }

.legal-content p,
.legal-content ul,
.legal-content ol,
.legal-content dl { margin: 0 0 var(--space-4, 16px); }
.legal-content ul, .legal-content ol { padding-left: 22px; }
.legal-content li { margin-bottom: 6px; }
.legal-content a { color: var(--text-accent, #5d6e7c); }

/* Adress- und Registerangaben: Label in gesperrten Versalien links, Wert
   rechts daneben — zweispaltiges Grid wie im Kit (13rem/1fr).
   Unterhalb von 920px stapeln beide untereinander; 920px ist der Breakpoint
   der Vorlage, damit die Seite an derselben Stelle umbricht wie der Rest des
   Kits. Zeilenabstand ueber row-gap und nicht ueber Margins: im Grid wuerden
   sich beide addieren und die Zeilen auseinanderziehen. */
.legal-content dl {
  display: grid;
  grid-template-columns: 13rem 1fr;
  column-gap: var(--space-5, 24px);
  row-gap: 12px;
}
.legal-content dt {
  font: 400 var(--text-xs, 12px)/1.4 var(--legal-sans);
  letter-spacing: var(--tracking-eyebrow, 0.24em);
  text-transform: uppercase;
  color: var(--text-muted, #66686b);
  /* Setzt die Versalienzeile auf die Grundlinie des Werts daneben. */
  padding-top: 5px;
}
.legal-content dd { margin: 0; }

@media (max-width: 919px) {
  .legal-content dl { grid-template-columns: 1fr; row-gap: 4px; }
  /* Gestapelt braucht das Label Luft nach oben, um zur eigenen Gruppe zu
     gehoeren statt zum Wert darueber — ausser bei der ersten Zeile. */
  .legal-content dt { padding-top: 14px; }
  .legal-content dl > dt:first-child { padding-top: 0; }
}

.legal-content img { max-width: 100%; height: auto; }
/* Breites aus dem Generator darf die Seite nicht quer scrollen lassen. */
.legal-content table { width: 100%; border-collapse: collapse; display: block; overflow-x: auto; }

/* Die Luecken, die das Kit bewusst offen laesst: Angaben, die nur die
   Geschaeftsfuehrung liefern kann, stehen als sichtbare Markierung — nie als
   erfundener Wert. */
.legal-content .tbd { color: var(--text-accent, #5d6e7c); border-bottom: 1px dashed currentColor; }

.legal-missing { color: var(--text-muted, #66686b); font-style: italic; }