/* === Watthunt Premium-Shell: schwebender Glas-Header + einheitlicher Footer.
   GEMEINSAME QUELLE (analog nav-groups): pro Seite EINE <link>-Zeile, NACH den
   seiten-eigenen Styles laden, damit diese .nav/.footer-Regeln die alten
   Header/Footer-Styles der Seite per Source-Order überschreiben.
   Header-Markup bleibt unverändert (überall gleiche .nav-Struktur);
   Dropdowns laufen weiter über nav-groups.{css,js} (Body-Portal-Fix unberührt). === */

/* ---------- Schwebender Glas-Header (wie Startseite) ---------- */
/* sticky statt fixed: reserviert seinen Platz im Fluss -> kein Underlap des Inhalts;
   optisch identisch zur schwebenden Glas-Pille der Startseite. */
.nav{position:sticky;top:14px;margin-top:14px;z-index:1000;border-bottom:0;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
.nav-inner{height:58px;width:min(1180px,calc(100% - 28px));margin:0 auto;padding:0 10px 0 12px;
  display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:24px;
  border:1px solid rgba(255,255,255,.14);border-radius:999px;
  background:linear-gradient(180deg,rgba(8,13,17,.62),rgba(6,10,14,.44));
  backdrop-filter:blur(24px) saturate(1.05);-webkit-backdrop-filter:blur(24px) saturate(1.05);
  box-shadow:0 18px 60px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.10)}
.nav.scrolled .nav-inner{background:linear-gradient(180deg,rgba(20,27,34,.88),rgba(14,20,26,.76));
  box-shadow:0 22px 54px -24px rgba(0,0,0,.9),inset 0 1px 0 rgba(255,255,255,.07)}
@media(max-width:980px){.nav{top:10px;margin-top:10px}.nav-inner{width:min(100% - 22px,1180px);height:56px}}
@media(max-width:480px){.nav{top:8px;margin-top:8px}.nav-inner{width:calc(100% - 16px);height:54px;padding:0 8px 0 10px}}

/* ---------- Einheitlicher Premium-Footer (wie Startseite) ---------- */
.footer{position:relative;overflow:hidden;border-top:0;margin-top:48px;padding:90px 0 32px;color:var(--muted,#8f9aa5);
  background:linear-gradient(180deg,transparent 0%,rgba(34,229,143,.02) 42%,rgba(4,11,10,.6) 100%)}
.footer::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,transparent,rgba(34,229,143,.5) 35%,rgba(34,229,143,.5) 65%,transparent);opacity:.7}
.footer-glow{position:absolute;left:50%;bottom:-30%;width:min(1100px,96%);height:560px;transform:translateX(-50%);
  background:radial-gradient(ellipse at center,rgba(34,229,143,.13),transparent 66%);pointer-events:none;z-index:0}
.footer-inner{position:relative;z-index:1;width:min(1180px,calc(100% - 40px));margin:0 auto}
.footer-grid{display:grid;grid-template-columns:1.7fr repeat(4,1fr);gap:44px 28px;align-items:start}
.footer-brand{max-width:330px}
.footer-brand .logo{display:flex;align-items:center;gap:10px;font-weight:800;color:#fff;margin-bottom:16px}
.footer-brand p{margin-top:0;color:var(--soft,#c8d0d6);line-height:1.62;font-size:14px}
.footer-status{display:inline-flex;align-items:center;gap:8px;margin-top:18px;padding:7px 13px;border:1px solid rgba(34,229,143,.24);
  border-radius:999px;background:rgba(34,229,143,.06);color:#bdf7da;font-size:12px;font-weight:740}
.footer-status-dot{width:8px;height:8px;border-radius:50%;background:var(--green,#22e58f);box-shadow:0 0 12px rgba(34,229,143,.85);animation:footerPulse 2.4s ease-in-out infinite}
@keyframes footerPulse{0%,100%{opacity:1}50%{opacity:.45}}
.footer-sources{margin-top:13px;font-size:12px;color:var(--muted,#8f9aa5);line-height:1.5}
.footer-sources b{color:var(--soft,#c8d0d6);font-weight:760}
.footer-social{display:flex;gap:10px;margin-top:22px}
.footer-social a,.footer-social button{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;
  border:1px solid var(--line-strong,rgba(255,255,255,.14));background:rgba(255,255,255,.03);color:var(--soft,#c8d0d6);
  cursor:pointer;transition:color .2s,border-color .2s,background .2s,transform .2s;padding:0}
.footer-social a:hover,.footer-social button:hover{color:#031108;border-color:transparent;background:linear-gradient(180deg,#34f4a1,#17c875);transform:translateY(-2px)}
.footer-social svg{width:18px;height:18px;display:block}
.footer-col h4{color:var(--text,#f4f7f8);font-size:11px;font-weight:850;text-transform:uppercase;letter-spacing:.14em;margin-bottom:16px}
.footer-col a{display:block;color:var(--muted,#8f9aa5);font-size:14px;padding:7px 0;width:max-content;transition:color .2s,transform .2s}
.footer-col a:hover{color:var(--text,#f4f7f8);transform:translateX(3px)}
.footer-bottom{margin-top:56px;padding-top:24px;border-top:1px solid rgba(255,255,255,.08);
  display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;font-size:13px;color:var(--muted,#8f9aa5)}
.footer-legal{display:flex;gap:24px;flex-wrap:wrap}
.footer-legal a{color:var(--muted,#8f9aa5);padding:0;transition:color .2s}
.footer-legal a:hover{color:var(--text,#f4f7f8)}
@media(max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1;max-width:none}}
@media(max-width:520px){.footer-grid{grid-template-columns:1fr}}