/* legal.css — Impressum & Datenschutz
   Nur das Seiten-Skeleton; gemeinsame Bausteine liegen in shared.css. */
html, body {
  width: 100vw; min-height: 100vh;
  background-color: #020610;
  overflow: hidden;
  perspective: 1200px;
  display: flex; justify-content: center; align-items: center;
}
body { height: 100vh; }

/* Headline oben (im Desktop links oben, Mobile zentriert oben) */
.legal-hero {
  position: fixed; top: 8%; left: 6%;
  z-index: 10; max-width: 88vw; pointer-events: none;
}
.legal-hero h1 {
  margin: 0;
  font-size: clamp(1.8rem, 5vw, 4rem);
  line-height: .95; letter-spacing: -.025em; font-weight: 900;
  background: linear-gradient(90deg, #00ffff, #ff00ff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Zurück-Link oben rechts */
.legal-back {
  position: fixed; top: 18px; right: 18px;
  z-index: 12;
  font-size: .68rem; font-weight: 700; letter-spacing: .18em;
  text-transform: uppercase;
  color: #dff2ff; text-decoration: none;
  padding: 8px 14px; border-radius: 10px;
  border: 1px solid rgba(160,225,255,.22);
  background: rgba(255,255,255,.05);
  transition: background .2s ease, border-color .2s ease;
}
.legal-back:hover {
  background: rgba(0,200,255,.12);
  border-color: rgba(0,220,255,.5);
}

/* Scrollbarer Inhalt unten — Mobile wird in shared.css auf Fullwidth gesetzt */
.legal-scroll {
  position: fixed; left: 6%; bottom: 6%;
  z-index: 10;
  width: min(560px, 46vw);
  max-height: 80vh;
  overflow-y: auto;
  padding: 22px 26px;
  border-radius: 18px;
  background: linear-gradient(150deg,
    rgba(255,255,255,.09) 0%, rgba(0,170,255,.04) 100%);
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  border: 1px solid rgba(160,225,255,.18);
  box-shadow: 0 14px 40px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.16);
  color: #dff2ff;
}
.legal-scroll h2 {
  margin: 1.1rem 0 .4rem;
  font-size: 1.15rem; font-weight: 800;
  background: linear-gradient(90deg, #00ffff, #ff00ff);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.legal-scroll h2:first-child { margin-top: 0; }
.legal-scroll p, .legal-scroll a, .legal-scroll li {
  color: #eaf7ff; line-height: 1.55; font-size: .9rem;
}
.legal-scroll p { margin: .35rem 0; }
.legal-scroll a { text-decoration: underline; }
.legal-scroll ul { margin: .35rem 0; padding-left: 1.25rem; }
.legal-scroll li { margin: .2rem 0; }
.legal-scroll strong { color: #b9f0ff; }
.legal-scroll .legal-meta {
  margin-top: 1.2rem; padding-top: .8rem;
  border-top: 1px solid rgba(160,225,255,.15);
  font-size: .72rem; color: rgba(190,230,255,.5);
}

/* Desktop: Body darf nicht scrollen (volle Canvas-Optik) */
@media (min-width: 901px) {
  .legal-scroll::-webkit-scrollbar { width: 8px; }
  .legal-scroll::-webkit-scrollbar-thumb {
    background: rgba(0,200,255,.3); border-radius: 8px; }
}

/* Mobile: wird zur normal lesbaren, scrollenden Seite */
@media (max-width: 900px) {
  html, body { overflow-y: auto; height: auto; min-height: 100vh;
               display: block; }
  .isometric-grid { position: absolute; opacity: .4; }
  .legal-hero { position: relative; top: auto; left: auto;
                margin: 26px 6% 0; }
  .legal-back { top: 14px; right: 14px; }
  .legal-scroll {
    position: relative; left: auto; right: auto; bottom: auto;
    margin: 18px 4% 40px;
    width: 92vw; max-width: 92vw; max-height: none;
    overflow: visible;
  }
}