/* =============================================================================
   Fading Star Empires — Leselayout öffentlicher Seiten (Design-Paket 3)
   Kontakt, Impressum, Datenschutz. Baut auf cg-tokens.css + cg-pages.css auf;
   nur var(--cg-*). Zeilenlänge ≤ ~68 Zeichen, klare Überschriftenhierarchie.
   ============================================================================= */
.cg-prose-page { padding: 32px 16px 64px; }
.cg-prose { max-width: 34em; margin: 0 auto; font-size: 16px; line-height: 1.65; color: var(--cg-text); }
.cg-prose [hidden] { display: none !important; }
.cg-prose .cg-back { margin: 0 0 8px -2px; }
.cg-prose h1 { font-size: var(--cg-title-page); line-height: 1.15; margin: 0 0 16px; color: var(--cg-text); }
.cg-prose h2 { font-size: 1.25rem; line-height: 1.3; margin: 40px 0 12px; color: var(--cg-text); }
.cg-prose h3 { font-size: 1.0625rem; line-height: 1.35; margin: 24px 0 8px; color: var(--cg-text); font-family: var(--cg-font-body); font-weight: 600; }
.cg-prose p, .cg-prose ul, .cg-prose address { margin: 0 0 16px; }
.cg-prose ul { padding-left: 1.25rem; }
.cg-prose li + li { margin-top: 4px; }
.cg-prose address { font-style: normal; }
.cg-prose code { font-size: .9em; color: var(--cg-text); background: var(--cg-surface-raised); border: 1px solid var(--cg-border); border-radius: 4px; padding: 1px 4px; }
.cg-prose-lead { font-size: 18px; color: var(--cg-text-muted); }
.cg-prose-note { margin-top: 40px !important; padding-top: 16px; border-top: 1px solid var(--cg-border); font-size: 14px; color: var(--cg-text-muted); }
/* global.css färbt Links/Überschriften im hellen Theme um — hier gelten die Tokens */
.cg-prose a:not(.btn), body.light-mode .cg-prose a:not(.btn) { color: var(--cg-primary); }
.cg-prose a:not(.btn):not(.cg-back) { text-decoration: underline; text-underline-offset: 3px; }
.cg-prose a:not(.btn):hover, body.light-mode .cg-prose a:not(.btn):hover { color: var(--cg-primary-hover); }
body.light-mode .cg-prose :is(h1, h2, h3) { color: var(--cg-text); }

/* Kontakt: Eckdaten + Formular */
.cg-facts { display: grid; gap: 8px; margin: 24px 0 0; }
.cg-facts dd { overflow-wrap: anywhere; }
.cg-facts > div { display: flex; flex-direction: column; gap: 2px; padding: 12px 16px; background: var(--cg-surface); border: 1px solid var(--cg-border); border-radius: var(--cg-radius); }
.cg-facts dt { font-size: 13px; font-weight: 600; color: var(--cg-text-muted); }
.cg-facts dd { margin: 0; }
.cg-prose .cg-form { margin-top: 8px; }
.cg-prose .cg-form .cg-hint { margin: 0; }
.cg-prose .cg-form .btn { align-self: flex-start; }
@media (min-width: 576px) {
  .cg-facts > div { display: grid; grid-template-columns: 9em minmax(0, 1fr); align-items: baseline; gap: 12px; }
}
@media (max-width: 575.98px) {
  .cg-prose .cg-form .btn { align-self: stretch; }
}