/* Singerhaus: Satz für Impressum und Datenschutz (.lg) und das Fenster dafür (.legal-dialog).
   Farben kommen über --lg-* und --ld-* von der Route. */

.lg {
  --lg-line: rgba(21, 21, 19, .16);
  --lg-mute: rgba(21, 21, 19, .66);
  --lg-acc: currentColor;
  font-size: 14px;
  line-height: 1.62;
}
.lg-s { break-inside: avoid; padding-bottom: 2em; }
.lg-h {
  margin-bottom: 11px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--lg-line);
  font-family: var(--sans);
  font-size: 10.5px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--lg-acc);
}
.lg p { max-width: 62ch; text-wrap: pretty; }
.lg p + p, .lg p + .lg-dl, .lg .lg-dl + p { margin-top: .75em; }
.lg-lead {
  break-inside: avoid;
  padding-bottom: 1.1em;
  font-family: var(--serif);
  font-size: 1.5em;
  line-height: 1.2;
  letter-spacing: -.008em;
}
.lg-dl > div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 18px;
  padding: 5px 0;
  border-top: 1px solid var(--lg-line);
}
.lg-dl > div:first-child { border-top: 0; padding-top: 0; }
.lg-dl dt { color: var(--lg-mute); }
.lg-dl dd { text-align: right; }
.lg-tbd { font-family: var(--serif); font-style: italic; font-size: 1.14em; line-height: 1; color: var(--lg-mute); }
.lg-note { break-inside: avoid; font-size: 12px; line-height: 1.55; color: var(--lg-mute); }
.lg a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- Fenster ---------- */
html:has(.legal-dialog[open]) { overflow: hidden; }

.legal-dialog {
  --ld-bg: #F5F1E8;
  --ld-ink: #151513;
  width: min(720px, calc(100vw - 28px));
  max-height: min(84dvh, 860px);
  margin: auto;
  padding: 0;
  border: 0;
  background: var(--ld-bg);
  color: var(--ld-ink);
  overflow: hidden;
}
.legal-dialog[open] { display: flex; animation: ld-in .7s cubic-bezier(.33, 0, .2, 1) both; }
.legal-dialog::backdrop { background: rgba(12, 10, 8, .68); animation: ld-dim .6s ease-out both; }
@keyframes ld-in { from { opacity: 0; transform: scale(.975); filter: blur(12px); } }
@keyframes ld-dim { from { opacity: 0; } }

.ld-box { display: flex; flex-direction: column; min-height: 0; width: 100%; }
.ld-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(24px, 4vw, 40px) clamp(22px, 4vw, 44px) clamp(14px, 2vw, 22px);
}
.ld-title {
  font-family: var(--serif);
  font-weight: 300;
  font-size: clamp(40px, 6vw, 64px);
  line-height: .95;
  letter-spacing: -.03em;
}
.ld-close {
  flex: none;
  width: 42px; height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid currentColor;
  border-radius: 50%;
  transition: background-color .3s, color .3s, transform .5s var(--ease);
}
.ld-close .ico { width: 16px; height: 16px; }
.ld-close:hover { background: var(--ld-ink); color: var(--ld-bg); transform: rotate(90deg); }
.ld-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 6px clamp(22px, 4vw, 44px) 4px;
  scrollbar-width: thin;
}
.ld-body:focus-visible { outline-offset: -4px; }
.ld-foot {
  padding: 14px clamp(22px, 4vw, 44px) clamp(18px, 3vw, 28px);
  border-top: 1px solid var(--lg-line, rgba(21, 21, 19, .16));
}
.ld-other {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  background: linear-gradient(currentColor, currentColor) 0 100% / 100% 1px no-repeat;
  padding: 4px 0;
}