/* KAMRADEK/OS — Rechts-Modal (Impressum/Datenschutz): schwebendes, NICHT
   ziehbares / NICHT verkleinerbares Dialogfenster im Phosphor-Look, im Monitorglas.
   Liegt über den normalen Fenstern, aber unter der CRT-FX-Ebene (Scanlines/Vignette
   legen sich mit drüber). Per [hidden] entfernt. */

.legal-modal {
  position: absolute;                /* im .crt-screen → bleibt im Glas */
  inset: 0;
  z-index: 97;                       /* über Fenstern (≤89) & Sticker (95), unter CRT-FX (100) */
}
.legal-modal[hidden] { display: none; }

/* Desktop dahinter abdunkeln */
.legal-modal-backdrop {
  position: absolute; inset: 0;
  background: color-mix(in srgb, var(--bg-room) 72%, transparent);
}

/* Fixes, zentriertes Dialogfenster — keine Drag-/Resize-Handles = nicht verschiebbar */
.legal-modal-win {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: min(680px, 90%);
  max-height: 82%;
  display: flex; flex-direction: column;
  background: var(--bg);
  border: 1px solid var(--phos-mid);            /* wie ein fokussiertes Fenster */
  box-shadow: 0 0 16px var(--phos-glow);
}

/* Titelleiste invers = fokussiert (wie .kos-window.is-focused) */
.legal-modal-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; padding: 3px 6px 3px 12px;
  background: var(--phos); color: var(--bg);
  letter-spacing: 0.5px;
}
.legal-modal-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legal-modal-close {
  flex: none; font: inherit; line-height: 1;
  width: 26px; height: 22px;
  background: none; border: 1px solid var(--bg); color: var(--bg);
  cursor: pointer;
}
.legal-modal-close:hover { background: var(--bg); color: var(--phos); }

/* Inhalt scrollt intern (fixe Fenstergröße); erbt die .content-Typografie */
.legal-modal-body {
  overflow-y: auto;
  padding: 14px 20px 18px;
}
.legal-modal-body > :first-child { margin-top: 0; }

@media (max-width: 900px) {
  .legal-modal { position: fixed; }             /* Rahmen mobil weg → am Viewport fixieren */
  .legal-modal-win { width: 94%; max-height: 88%; }
}