/* ================================================
   MODALS.CSS  –  Impressum & Datenschutz Overlays
   ================================================ */

.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 999;
  background: rgba(42,42,53,.55); backdrop-filter: blur(6px);
}
.modal-overlay.open {
  display: flex; align-items: center; justify-content: center; padding: 2rem;
}
.modal-box {
  background: var(--white); border-radius: 24px;
  max-width: 760px; width: 100%; max-height: 85vh;
  overflow-y: auto; padding: 3rem 3.5rem; position: relative;
  box-shadow: 0 32px 80px rgba(45,110,126,.18);
  animation: fadeUp .4s ease;
}
.modal-close {
  position: absolute; top: 1.4rem; right: 1.6rem;
  background: var(--sand); border: none; cursor: pointer;
  width: 36px; height: 36px; border-radius: 50%;
  font-size: 1.1rem; color: var(--text-mid);
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
.modal-close:hover { background: var(--teal-pale); }
.modal-box h2 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.2rem; font-weight: 300;
  color: var(--teal-dark); margin-bottom: 1.8rem;
}
.modal-box h3 {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.3rem; font-weight: 400;
  color: var(--teal-dark); margin: 1.6rem 0 .6rem;
}
.modal-box p {
  font-size: .9rem; line-height: 1.85;
  color: var(--text-mid); font-weight: 300; margin-bottom: .8rem;
}
.modal-box a { color: var(--teal-dark); }
.modal-divider {
  width: 40px; height: 2px;
  background: linear-gradient(to right, var(--teal-light), var(--lavender));
  margin: .4rem 0 1.2rem; border-radius: 2px;
}
.modal-hint {
  margin-top: 1.5rem; font-size: .78rem;
  color: var(--text-light); font-style: italic;
}
@media (max-width: 600px) { .modal-box { padding: 2rem 1.5rem; } }