/* /assets/footer.css */
:root{
  --vn-text:#eaf0ff;
  --vn-muted:rgba(234,240,255,.72);
  --vn-muted2:rgba(234,240,255,.55);
  --vn-border:rgba(148,163,184,.18);
  --vn-accent:#38bdf8;
  --vn-bgA:rgba(2,6,23,.88);
  --vn-bgB:rgba(2,6,23,.60);
}

/* Footer: eigener Scope + Vorrang */
.vn-footer, .vn-footer *{
  box-sizing:border-box;
  font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
.vn-footer a{ color:inherit; text-decoration:none; }

/* ✅ FULL-WIDTH BREAKOUT (auch wenn Footer in einem max-width Wrapper steckt) */
.vn-footer{
  width:100vw !important;
  max-width:99vw !important;

  /* bricht aus zentrierten Containern aus */
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;

  border-top:1px solid var(--vn-border);
  background:linear-gradient(180deg, rgba(2,6,23,.60) 0%, rgba(2,6,23,.92) 100%);
}

/* Inner ebenfalls ohne Begrenzung */
.vn-footer-inner{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:28px 0 18px;
}

/* Wrap: Innenabstand – aber Footer bleibt trotzdem full width */
.vn-footer-wrap{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;

  /* angenehmer Rand, skaliert mit Bildschirm */
  padding-left:clamp(14px, 3vw, 56px);
  padding-right:clamp(14px, 3vw, 56px);
}

/* Desktop: nutzt Breite aus */
.vn-footer-grid{
  display:grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap:clamp(14px, 2vw, 28px);
  align-items:start;
}

/* Brand */
.vn-footer-brand{
  display:flex;
  gap:12px;
  align-items:flex-start;
}
.vn-footer-logo{
  width:42px;
  height:auto;
  display:block;
  filter: drop-shadow(0 0 18px rgba(56,189,248,.18));
  margin-top:2px;
}
.vn-footer-brand h4{
  margin:0;
  font-size:12px;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:var(--vn-text);
  line-height:1.1;
}
.vn-footer-brand p{
  margin:10px 0 0;
  color:var(--vn-muted2);
  font-size:14px;
  line-height:1.55;
  max-width:70ch;
}

/* Columns */
.vn-footer-col h5{
  margin:0 0 10px;
  color:var(--vn-text);
  font-size:13px;
  letter-spacing:.06em;
  text-transform:uppercase;
}

/* Links */
.vn-footer-links{
  display:flex;
  flex-direction:column;
  gap:8px;
}
.vn-footer-links a{
  color:var(--vn-muted);
  font-size:14px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid transparent;
  background:transparent;
}
.vn-footer-links a:hover{
  color:var(--vn-text);
  background:rgba(56,189,248,.08);
  border-color:rgba(56,189,248,.18);
}

/* Bottom */
.vn-footer-bottom{
  margin-top:20px;
  padding-top:14px;
  border-top:1px solid var(--vn-border);

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.vn-footer-copy{
  color:var(--vn-muted2);
  font-size:12px;
}

.vn-footer-bottom-links{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.vn-footer-pill{
  color:var(--vn-muted);
  font-size:12px;
  padding:10px 12px;
  border-radius:999px;
  border:1px solid var(--vn-border);
  background:rgba(2,6,23,.35);
}
.vn-footer-pill:hover{
  color:var(--vn-text);
  border-color:rgba(56,189,248,.25);
  background:rgba(56,189,248,.10);
}

/* Tablet */
@media (max-width: 980px){
  .vn-footer-grid{
    grid-template-columns: 1fr 1fr;
    gap:16px;
  }
  .vn-footer-brand p{
    max-width:none;
    font-size:14px;
  }
}

/* Handy */
@media (max-width: 560px){
  .vn-footer-inner{ padding:22px 0 16px; }

  .vn-footer-grid{
    grid-template-columns: 1fr;
    gap:14px;
  }

  .vn-footer-col h5{ font-size:12px; }
  .vn-footer-links a{ font-size:15px; padding:12px 12px; }
  .vn-footer-copy{ font-size:12px; line-height:1.4; }
  .vn-footer-pill{ font-size:12px; padding:10px 12px; }
}