/* =========================================================
   Rechtliches — Cookie-Hinweis, Footer-Links & Rechtsseiten
   (geteilt von index.html, impressum, datenschutz, kontakt)
   ========================================================= */

/* ---------- dezente Links unten rechts ---------- */
.legal-links {
  position: fixed; right: 22px; bottom: 12px; z-index: 6;
  font-family: var(--font-mono); font-size: .62rem; letter-spacing: .12em;
  display: flex; gap: 14px; pointer-events: auto;
}
.legal-links a { color: rgba(150, 170, 220, .55); text-decoration: none; text-transform: uppercase; transition: color .3s; }
.legal-links a:hover { color: var(--cyan); }

/* ---------- Cookie-/Datenschutz-Hinweis ---------- */
#cookie-banner {
  position: fixed; left: 50%; bottom: 18px; transform: translate(-50%, 160%); z-index: 9;
  width: min(600px, calc(100vw - 32px));
  background: linear-gradient(160deg, rgba(9, 18, 38, .94), rgba(5, 10, 24, .92));
  border: 1px solid rgba(110, 220, 255, .35); border-radius: 14px;
  padding: 16px 20px; display: flex; gap: 18px; align-items: center;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 8px 40px rgba(0, 0, 0, .5);
  transition: transform .6s cubic-bezier(.2, .9, .3, 1); pointer-events: auto;
}
#cookie-banner.show { transform: translate(-50%, 0); }
#cookie-banner p { margin: 0; color: #c6d2ee; font-size: .8rem; line-height: 1.5; }
#cookie-banner p a { color: var(--cyan); }
#cookie-banner button { flex-shrink: 0; }

/* ---------- Rechtsseiten-Layout ---------- */
.legal-main { position: relative; z-index: 1; max-width: 800px; margin: 0 auto; padding: 140px 24px 90px; }
.legal-main h1 {
  font-family: var(--font-display); font-weight: 800; letter-spacing: -.03em;
  font-size: clamp(2rem, 4.5vw, 3rem); margin: 0 0 8px; color: #eef5ff;
}
.legal-main .sub {
  color: var(--faint); font-family: var(--font-mono); font-size: .72rem;
  letter-spacing: .22em; text-transform: uppercase; margin-bottom: 42px;
}
.legal-main h2 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; margin: 36px 0 10px; color: #eef5ff; }
.legal-main p, .legal-main li { color: var(--muted); line-height: 1.7; font-size: .95rem; }
.legal-main ul { padding-left: 20px; }
.legal-main a { color: var(--cyan); }
.legal-main .note {
  border: 1px dashed rgba(127, 230, 255, .45); border-radius: 10px;
  padding: 12px 16px; color: var(--faint); font-size: .85rem; margin: 18px 0;
}
.legal-main .card {
  background: linear-gradient(160deg, rgba(9, 18, 38, .72), rgba(5, 10, 24, .58));
  border: 1px solid rgba(110, 220, 255, .3); border-radius: 14px;
  padding: 22px 26px; margin: 22px 0;
}
.legal-footer {
  text-align: center; color: rgba(150, 170, 220, .45); font-family: var(--font-mono);
  font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; padding: 30px 0 40px;
}
.legal-footer a { color: rgba(150, 170, 220, .7); text-decoration: none; margin: 0 8px; }
.legal-footer a:hover { color: var(--cyan); }