/* legal.css: Impressum und Datenschutz. Selektoren unter .p-legal. */
.p-legal .legal { display: grid; gap: var(--s-6); padding-block: var(--s-7) var(--section); min-width: 0; }
.p-legal .legal > * { min-width: 0; }
.p-legal .legal-head > * + * { margin-top: var(--s-4); }
.p-legal .legal-head .warn + h1 { margin-top: var(--s-7); }
.p-legal .legal-head h1,
.p-legal .prose,
.p-legal .legal-aside { overflow-wrap: break-word; hyphens: auto; }
/* Ankerabstand: nur html { scroll-padding-top } aus base.css (~76px mobil wie auf der Karte), kein zusätzliches scroll-margin */
.p-legal .prose h2:first-child { margin-top: 0; }
.p-legal .prose code { font-size: .92em; overflow-wrap: anywhere; }

.p-legal .warn,
.p-legal .todo {
  background: var(--bg-2);
  border-left: 3px solid var(--gold);
  padding: var(--s-3) var(--s-4);
  color: var(--text);
}
.p-legal .todo { display: inline-block; max-width: 100%; background: var(--bg-3); border: 1px solid var(--gold); }

.p-legal .legal-aside { display: grid; gap: var(--s-5); align-content: start; }
.p-legal .toc { list-style: none; padding: 0; margin: var(--s-2) 0 0; }
.p-legal .toc a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding-block: var(--s-1);
  text-decoration-color: transparent;
}
.p-legal .toc a:hover,
.p-legal .toc a:focus-visible { text-decoration-color: var(--gold); }
.p-legal .legal-aside__h { font-size: var(--step-1); margin-bottom: var(--s-2); }
.p-legal .legal-contact { font-style: normal; line-height: 1.6; }
.p-legal .legal-contact a { display: inline-block; padding-block: var(--s-1); }

/* Mobil steht das Kontakt-Feld direkt vor dem gleichen Text im Fließtext: ausblenden (Desktop: Seitenspalte) */
@media (max-width: 899.98px) {
  .p-legal .legal-aside > div { display: none; }
}

@media (min-width: 900px) {
  .p-legal .legal {
    max-width: 1180px;
    grid-template-columns: minmax(0, 68ch) minmax(260px, 380px);
    justify-content: start;
    column-gap: clamp(3rem, 6vw, 8rem);
    row-gap: var(--s-6);
    align-items: start;
  }
  .p-legal .legal-head { grid-column: 1; grid-row: 1; }
  .p-legal .legal-aside {
    grid-column: 2;
    grid-row: 1 / span 2;
    position: sticky;
    top: calc(var(--header-h) + var(--s-5));
    align-self: start;
  }
  .p-legal .prose { grid-column: 1; grid-row: 2; }
}