/* ============================================================
   Legal-Seiten (Impressum / Datenschutz) , Premium Dark-Look
   wie die Homepage: dunkel + neuronales Netz + schwebende Blasen
   + Glas-Karten. Laedt zusaetzlich style.css (Tokens/Nav/Footer).
   ============================================================ */
body.legal{color:#fff;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden;
  background:#061230;
  background-image:radial-gradient(85% 60% at 50% -12%,rgba(48,118,218,.42),transparent 56%),
    linear-gradient(180deg,#08183f 0%,#061230 62%,#040d22 100%)!important}

/* ---- Deko-Ebenen ---- */
.legal #neural{position:fixed;inset:0;width:100vw;height:100vh;z-index:1;pointer-events:none;opacity:0}
.legal .orb{position:fixed;border-radius:50%;filter:blur(80px);z-index:0;pointer-events:none;will-change:transform}
.legal .orb-a{width:520px;height:520px;background:radial-gradient(circle,#3f86e0,transparent 70%);
  top:-120px;right:-90px;opacity:.5;animation:orbFloatA 17s ease-in-out infinite}
.legal .orb-b{width:600px;height:600px;background:radial-gradient(circle,#1f64c8,transparent 70%);
  bottom:-180px;left:-150px;opacity:.42;animation:orbFloatB 21s ease-in-out infinite}
@keyframes orbFloatA{0%,100%{transform:translate(0,0)}50%{transform:translate(-42px,52px)}}
@keyframes orbFloatB{0%,100%{transform:translate(0,0)}50%{transform:translate(54px,-44px)}}

/* ---- Nav: helles, frosted Apple-Glas ---- */
.legal .nav{position:fixed;top:0;left:0;right:0;z-index:50;
  background:linear-gradient(180deg,rgba(56,86,150,.42),rgba(30,54,104,.30));
  backdrop-filter:blur(24px) saturate(180%);-webkit-backdrop-filter:blur(24px) saturate(180%);
  border-bottom:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 8px 30px -16px rgba(0,0,0,.5);transition:none}
.legal .nav .logo{color:#fff}
.legal .nav .logo .logo-sub{color:#8fc4ff}

/* ---- Hero (Titel ueber dunklem Hintergrund) ---- */
.legal-hero{position:relative;z-index:2;padding:150px 0 28px}
.legal-hero .wrap{position:relative}
.legal-hero .tag{display:inline-block;font-size:13px;font-weight:700;letter-spacing:.18em;
  text-transform:uppercase;color:#8fc4ff;margin-bottom:16px}
.legal-hero h1{font-size:clamp(34px,6vw,58px);font-weight:800;letter-spacing:-.025em;line-height:1.05;color:#fff;max-width:none}

/* ---- Inhalt: Glas-Karte ---- */
.legal-body{position:relative;z-index:2;padding:30px 0 96px}
.legal-body .wrap{max-width:880px}
.legal-body .card{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-radius:24px;
  padding:clamp(26px,4vw,46px);backdrop-filter:blur(16px);box-shadow:0 44px 110px -52px rgba(2,8,28,.95)}
.legal-container,.impressum-container,.dse-container{max-width:760px;margin:0 auto;
  line-height:1.82;font-size:clamp(15px,2.5vw,16.5px);color:#b8c7e6}
.legal-body h2{font-size:clamp(19px,3.5vw,25px);font-weight:800;letter-spacing:-.01em;color:#fff;
  margin:1.9em 0 .5em;padding-left:15px;border-left:3px solid var(--blue)}
.legal-body h2:first-child{margin-top:0}
.legal-body h3{font-size:17px;font-weight:700;color:#fff;margin:1.4em 0 .4em}
.legal-body p{margin-bottom:.7em}
.legal-body ul,.legal-body ol{margin:.4em 0 1.1em 1.4em}
.legal-body li{margin-bottom:.4em}
.legal-body a{color:#7fb6ff;text-decoration:underline;text-underline-offset:3px}
.legal-body a:hover{color:#a9ccff}
.legal-body strong{color:#fff;font-weight:700}
.legal-body .impressum-address p,.legal-body .impressum-contact p{margin-bottom:.2em}

/* ---- Footer: weich aus dem Dunkel ---- */
.legal .footer{position:relative;z-index:3;background:linear-gradient(180deg,rgba(6,16,42,0),#05122c 32%,#030d22)}

/* ---- Mobile / Tablet ---- */
@media (max-width:900px){
  .legal .nav{padding:13px 18px}
  .legal .nav-cta{font-size:13px;padding:9px 15px;white-space:nowrap}
  .legal-hero{padding:108px 0 20px}
  .legal-hero h1{font-size:clamp(30px,9vw,44px)}
  .legal-body{padding:22px 0 64px}
  .legal-body .wrap{max-width:100%;padding-left:18px;padding-right:18px}
  .legal-body .card{padding:24px 20px}
  .legal-container,.impressum-container,.dse-container{max-width:100%;font-size:15px;line-height:1.75}
  .legal-body h2{font-size:20px}
}