/*
Theme Name: Vellnox Media Block Theme v18 Mobile Black Nav
Theme URI: https://vellnox.com
Author: OpenAI
Description: Bearbeitbares WordPress Block-Theme für Vellnox Media mit modernem Gaming/Tech Header, Navigation, Hero-Cards, responsive Mobile-Menü und global bearbeitbarem Header/Footer.
Version: 18.0
Requires at least: 6.4
Tested up to: 6.6
Requires PHP: 7.4
Text Domain: vellnox-media
*/

:root{--vn-bg:#05070d;--vn-card:#0b101b;--vn-text:#f6f7fb;--vn-muted:#c9d1e3;--vn-green:#73ff00;--vn-blue:#00a8ff;--vn-purple:#9b4dff;--vn-yellow:#ffe600;--vn-line:rgba(255,255,255,.12)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--vn-bg);color:var(--vn-text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;overflow-x:hidden}.wp-site-blocks{background:radial-gradient(circle at 15% 5%,rgba(115,255,0,.11),transparent 30%),radial-gradient(circle at 90% 10%,rgba(0,168,255,.16),transparent 32%),#05070d}a{text-decoration:none}.vn-shell{max-width:1380px;margin:0 auto;padding-left:28px;padding-right:28px}.vn-header{position:sticky;top:0;z-index:50;background:rgba(5,7,13,.92);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(18px);box-shadow:0 10px 35px rgba(0,0,0,.25)}.vn-header-row{min-height:78px;display:flex;align-items:center;gap:34px}.vn-brand{display:flex;align-items:center;gap:14px;white-space:nowrap}.vn-logo{width:42px;height:42px;border-radius:14px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,var(--vn-green),var(--vn-blue));color:#031006;font-weight:900;box-shadow:0 0 30px rgba(115,255,0,.35)}.vn-brand-text{font-size:26px;font-weight:900;letter-spacing:-.04em;color:#fff}.vn-header .wp-block-navigation{margin-left:auto;margin-right:auto}.vn-header .wp-block-navigation a{color:#fff!important;font-weight:800;font-size:15px}.vn-header .wp-block-navigation a:hover{color:var(--vn-green)!important;text-shadow:0 0 16px rgba(115,255,0,.9)}.vn-header .wp-block-button__link{background:var(--vn-green)!important;color:#061006!important;border-radius:999px!important;padding:16px 32px!important;font-weight:900!important;box-shadow:0 0 34px rgba(115,255,0,.32)}

.vn-hero-cover{min-height:860px;padding:90px 0 78px;position:relative;overflow:hidden;background-size:cover!important;background-position:center!important}.vn-hero-cover:before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(5,7,13,.95) 0%,rgba(5,7,13,.78) 40%,rgba(5,7,13,.35) 100%),radial-gradient(circle at 20% 18%,rgba(115,255,0,.25),transparent 35%),radial-gradient(circle at 85% 20%,rgba(0,168,255,.25),transparent 35%);z-index:0}.vn-hero-cover>*{position:relative;z-index:1}.vn-hero-grid{display:grid;grid-template-columns:minmax(360px,1fr) minmax(500px,620px);gap:78px;align-items:center}.vn-pill{display:inline-flex;width:auto!important;border:1px solid rgba(115,255,0,.45);background:rgba(115,255,0,.08);color:var(--vn-green);font-weight:900;border-radius:999px;padding:9px 15px;font-size:14px;box-shadow:0 0 20px rgba(115,255,0,.12)}.vn-hero-title{font-size:clamp(54px,7vw,94px);line-height:.96;letter-spacing:-.075em;margin:28px 0 24px;font-weight:950;text-shadow:0 12px 44px rgba(0,0,0,.55)}.vn-hero-text{font-size:20px;line-height:1.65;color:#edf3ff;max-width:650px}.vn-actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}.vn-btn-primary,.vn-btn-ghost{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:17px 29px;font-weight:950}.vn-btn-primary{background:var(--vn-green);color:#061006;box-shadow:0 0 34px rgba(115,255,0,.36)}.vn-btn-ghost{border:1px solid rgba(255,255,255,.18);color:#fff;background:rgba(255,255,255,.03)}

.vn-hero-cards{display:grid;grid-template-columns:repeat(2,minmax(240px,1fr));gap:28px}.vn-feature-card{position:relative;min-height:300px;padding:28px;border-radius:18px;background:linear-gradient(145deg,rgba(14,20,33,.92),rgba(5,8,15,.86));border:1px solid rgba(255,255,255,.14);overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.45);transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}.vn-feature-card:after{content:"";position:absolute;left:18px;right:18px;bottom:0;height:3px;background:var(--accent,var(--vn-green));box-shadow:0 0 22px var(--accent,var(--vn-green))}.vn-feature-card:hover{transform:translateY(-8px) scale(1.015);border-color:var(--accent,var(--vn-green));box-shadow:0 0 0 1px var(--accent,var(--vn-green)),0 0 42px color-mix(in srgb,var(--accent,var(--vn-green)) 48%,transparent),0 34px 90px rgba(0,0,0,.55)}.vn-feature-card:hover:before{content:"";position:absolute;inset:-80px;background:linear-gradient(115deg,transparent 25%,color-mix(in srgb,var(--accent,var(--vn-green)) 45%,transparent) 48%,transparent 72%);transform:translateX(130%);animation:vnLaser .75s ease-out}.vn-feature-card .vn-icon{font-size:28px;line-height:1;margin-bottom:18px;color:var(--accent,var(--vn-green));filter:drop-shadow(0 0 12px var(--accent,var(--vn-green)))}.vn-feature-card h3{font-size:26px;margin:0 0 18px;font-weight:950}.vn-feature-card img{width:100%;height:100px;object-fit:cover;border-radius:4px;margin:0 0 22px;display:block}.vn-feature-card p{margin:0;color:#dfe7fb;line-height:1.45}.vn-feature-card .vn-card-title{font-size:21px;line-height:1.25;font-weight:950;color:var(--accent,var(--vn-green));margin-top:0}.vn-green{--accent:#73ff00}.vn-blue{--accent:#00b8ff}.vn-purple{--accent:#9b4dff}.vn-yellow{--accent:#ffe600}@keyframes vnLaser{from{transform:translateX(-130%)}to{transform:translateX(130%)}}

.vn-section{padding:70px 0}.vn-section-title{font-size:28px;line-height:1.1;margin:0 0 24px;font-weight:950;letter-spacing:-.04em}.vn-category-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:16px}.vn-category-card{min-height:148px;text-align:center;padding:25px 18px;border-radius:14px;background:linear-gradient(145deg,rgba(17,23,36,.88),rgba(8,11,19,.92));border:1px solid rgba(255,255,255,.13);position:relative;overflow:hidden;transition:.22s ease}.vn-category-card:after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent,var(--vn-green));box-shadow:0 0 18px var(--accent,var(--vn-green))}.vn-category-card:hover{transform:translateY(-6px);box-shadow:0 0 35px color-mix(in srgb,var(--accent,var(--vn-green)) 35%,transparent)}.vn-category-card .vn-icon{font-size:28px;color:var(--accent,var(--vn-green));filter:drop-shadow(0 0 12px var(--accent,var(--vn-green)));margin-bottom:12px}.vn-category-card h3{font-size:17px;margin:0 0 8px}.vn-category-card p{font-size:14px;color:#d4dbee;margin:0}.vn-post-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.vn-post-card{display:grid;grid-template-columns:150px 1fr;gap:20px;align-items:center;padding:16px;border-radius:14px;background:rgba(13,18,31,.78);border:1px solid rgba(255,255,255,.12)}.vn-post-card img{width:150px;height:105px;object-fit:cover;border-radius:8px}.vn-post-card h3{font-size:18px;line-height:1.25;margin:8px 0 0}.vn-tag{display:inline-flex;padding:5px 10px;border-radius:999px;border:1px solid var(--accent,var(--vn-green));color:var(--accent,var(--vn-green));font-size:11px;font-weight:900;text-transform:uppercase}.vn-footer{border-top:1px solid rgba(255,255,255,.1);background:#05070d;padding:48px 0;color:#d9e1f5}.vn-footer-grid{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:30px}.vn-footer a{color:#d9e1f5}.vn-footer a:hover{color:var(--vn-green)}

@media(max-width:1100px){.vn-hero-grid{grid-template-columns:1fr;gap:46px}.vn-hero-cards{max-width:760px}.vn-category-grid{grid-template-columns:repeat(3,1fr)}.vn-post-grid{grid-template-columns:1fr}.vn-header-row{flex-wrap:wrap;height:auto;padding-top:16px;padding-bottom:16px}.vn-brand-text{font-size:22px}}
@media(max-width:782px){.vn-shell{padding-left:18px;padding-right:18px}.vn-header-row{min-height:70px;align-items:center}.vn-header .wp-block-navigation{margin-left:0;margin-right:0;width:100%;justify-content:flex-end}.vn-header .wp-block-navigation__responsive-container-open{display:flex!important;color:#fff}.vn-header .wp-block-navigation__responsive-container:not(.is-menu-open){display:none!important}.vn-header .wp-block-navigation__responsive-container.is-menu-open{background:#05070d;color:#fff;padding:28px}.vn-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{gap:18px}.vn-header .wp-block-button{display:none}.vn-hero-cover{min-height:auto;padding:62px 0}.vn-hero-title{font-size:52px}.vn-hero-text{font-size:17px}.vn-hero-cards{grid-template-columns:1fr}.vn-feature-card{min-height:auto}.vn-category-grid{grid-template-columns:repeat(2,1fr)}.vn-post-card{grid-template-columns:1fr}.vn-post-card img{width:100%;height:180px}.vn-footer-grid{grid-template-columns:1fr}}
@media(max-width:480px){.vn-brand-text{font-size:20px}.vn-logo{width:36px;height:36px}.vn-hero-title{font-size:42px}.vn-category-grid{grid-template-columns:1fr}.vn-actions{flex-direction:column}.vn-btn-primary,.vn-btn-ghost{width:100%}}


/* === Vellnox Mobile Navigation Fix v15 ===
   WordPress öffnet den Navigation-Overlay-Container außerhalb des normalen Header-Flows.
   Deshalb müssen die Overlay-Styles global gesetzt werden, nicht nur unter .vn-header. */
@media (max-width: 782px){
  body .wp-block-navigation__responsive-container-open{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:44px!important;
    height:44px!important;
    border-radius:999px!important;
    background:rgba(115,255,0,.1)!important;
    border:1px solid rgba(115,255,0,.45)!important;
    color:#73ff00!important;
    box-shadow:0 0 22px rgba(115,255,0,.22)!important;
  }
  body .wp-block-navigation__responsive-container-open svg{
    width:26px!important;
    height:26px!important;
    fill:currentColor!important;
  }
  html.has-modal-open,
  body.has-modal-open{
    overflow:hidden!important;
  }
  body .wp-block-navigation__responsive-container.is-menu-open{
    position:fixed!important;
    inset:0!important;
    width:100vw!important;
    height:100vh!important;
    min-height:100vh!important;
    display:flex!important;
    flex-direction:column!important;
    justify-content:flex-start!important;
    align-items:stretch!important;
    padding:88px 28px 32px!important;
    background:
      radial-gradient(circle at 15% 18%, rgba(115,255,0,.18), transparent 34%),
      radial-gradient(circle at 90% 12%, rgba(0,168,255,.18), transparent 38%),
      linear-gradient(145deg, #05070d 0%, #07111f 52%, #03050a 100%)!important;
    color:#fff!important;
    z-index:999999!important;
    box-shadow:inset 0 -1px 0 rgba(115,255,0,.35)!important;
  }
  body .wp-block-navigation__responsive-container.is-menu-open:before{
    content:"Vellnox-Media";
    position:absolute;
    top:28px;
    left:28px;
    color:#fff;
    font-size:22px;
    font-weight:950;
    letter-spacing:-.04em;
    text-shadow:0 0 18px rgba(115,255,0,.25);
  }
  body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{
    position:absolute!important;
    top:24px!important;
    right:24px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:48px!important;
    height:48px!important;
    border-radius:999px!important;
    background:rgba(255,255,255,.06)!important;
    border:1px solid rgba(255,255,255,.16)!important;
    color:#fff!important;
  }
  body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg{
    width:26px!important;
    height:26px!important;
    fill:currentColor!important;
  }
  body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
  body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    justify-content:flex-start!important;
    gap:18px!important;
  }
  body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container{
    width:100%!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:stretch!important;
    gap:14px!important;
  }
  body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
  body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
    width:100%!important;
  }
  body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content{
    display:flex!important;
    min-height:58px!important;
    align-items:center!important;
    padding:16px 20px!important;
    border-radius:18px!important;
    background:linear-gradient(145deg, rgba(17,23,36,.94), rgba(6,10,18,.96))!important;
    border:1px solid rgba(115,255,0,.28)!important;
    color:#fff!important;
    font-size:22px!important;
    font-weight:950!important;
    line-height:1.1!important;
    text-decoration:none!important;
    box-shadow:0 0 26px rgba(0,0,0,.35), inset 0 -2px 0 rgba(115,255,0,.55)!important;
  }
  body .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover{
    color:#73ff00!important;
    border-color:#73ff00!important;
    box-shadow:0 0 34px rgba(115,255,0,.28), inset 0 -2px 0 #73ff00!important;
  }
  /* Header bleibt auf Mobile kompakt: Logo links, Burger rechts */
  .vn-header-row{
    flex-wrap:nowrap!important;
    min-height:72px!important;
    padding-top:0!important;
    padding-bottom:0!important;
  }
  .vn-header .wp-block-navigation{
    width:auto!important;
    margin-left:auto!important;
    flex:0 0 auto!important;
  }
  .vn-header .wp-block-buttons{
    display:none!important;
  }
}


/* === Vellnox Nav Stable v17 ===
   Fehler aus v15: Die Core-Navigation wurde per CSS/Overlay überschrieben.
   Darum nutzt der Header jetzt sichtbare, bearbeitbare Link-Blöcke + eigenes mobiles Menü. */
.vn-header .wp-block-navigation,
.vn-header .wp-block-navigation__responsive-container,
.vn-header .wp-block-navigation__responsive-container-open{
  display:none!important;
}
.vn-desktop-nav{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:28px!important;
  margin-left:auto!important;
  margin-right:auto!important;
  flex:1 1 auto!important;
}
.vn-desktop-nav p{margin:0!important;line-height:1!important}.vn-desktop-nav a{color:#fff!important;font-size:15px!important;font-weight:900!important;text-decoration:none!important}.vn-desktop-nav a:hover{color:var(--vn-green)!important;text-shadow:0 0 18px rgba(115,255,0,.9)!important}.vn-header-cta{display:flex!important}.vn-mobile-toggle,.vn-mobile-menu{display:none}

.vn-mobile-toggle{position:relative;z-index:1000001;width:46px;height:46px;border-radius:999px;border:1px solid rgba(115,255,0,.45);background:rgba(115,255,0,.10);box-shadow:0 0 22px rgba(115,255,0,.22);align-items:center;justify-content:center;flex-direction:column;gap:5px;cursor:pointer}.vn-mobile-toggle span{display:block;width:22px;height:2px;border-radius:9px;background:#73ff00;box-shadow:0 0 10px rgba(115,255,0,.8)}.vn-mobile-menu{position:fixed;inset:0;z-index:1000000;background:radial-gradient(circle at 15% 18%,rgba(115,255,0,.18),transparent 34%),radial-gradient(circle at 90% 12%,rgba(0,168,255,.18),transparent 38%),linear-gradient(145deg,#05070d 0%,#07111f 52%,#03050a 100%);padding:92px 26px 32px;opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .18s ease,visibility .18s ease,transform .18s ease}.vn-mobile-menu.is-open{display:block!important;opacity:1;visibility:visible;transform:translateY(0)}.vn-mobile-menu:before{content:"Vellnox-Media";position:absolute;top:28px;left:28px;color:#fff;font-size:22px;font-weight:950;letter-spacing:-.04em;text-shadow:0 0 18px rgba(115,255,0,.25)}.vn-mobile-close{position:absolute;top:22px;right:22px;width:52px;height:52px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff;font-size:42px;line-height:42px;cursor:pointer}.vn-mobile-menu-inner{display:flex;flex-direction:column;gap:14px}.vn-mobile-menu-inner a{display:flex;align-items:center;min-height:60px;padding:17px 20px;border-radius:18px;background:linear-gradient(145deg,rgba(17,23,36,.94),rgba(6,10,18,.96));border:1px solid rgba(115,255,0,.28);color:#fff!important;font-size:22px;font-weight:950;text-decoration:none;box-shadow:0 0 26px rgba(0,0,0,.35),inset 0 -2px 0 rgba(115,255,0,.55)}.vn-mobile-menu-inner a:hover{color:#73ff00!important;border-color:#73ff00;box-shadow:0 0 34px rgba(115,255,0,.28),inset 0 -2px 0 #73ff00}.vn-mobile-menu-inner .vn-mobile-cta{background:#73ff00!important;color:#061006!important;justify-content:center;box-shadow:0 0 34px rgba(115,255,0,.34)!important}
@media(max-width:782px){.vn-header-row{flex-wrap:nowrap!important;min-height:72px!important;padding-top:0!important;padding-bottom:0!important}.vn-desktop-nav,.vn-header-cta{display:none!important}.vn-mobile-toggle{display:flex!important;margin-left:auto}.vn-brand{min-width:0}.vn-brand-text{font-size:20px!important;white-space:nowrap}.vn-logo{width:36px!important;height:36px!important}}
@media(min-width:783px){.vn-mobile-toggle,.vn-mobile-menu{display:none!important}.vn-desktop-nav{display:flex!important}.vn-header-cta{display:flex!important}}
body.vn-menu-open{overflow:hidden!important}


/* === Vellnox v18: Mobile Navigation final ===
   - Mobile navigation is only available below 783px
   - Desktop navigation is always visible from 783px upward
   - Mobile overlay uses a solid black background, not transparent/white
*/
.vn-mobile-menu{
  background:#05070d !important;
  background-image:
    radial-gradient(circle at 18% 14%, rgba(115,255,0,.16), transparent 34%),
    radial-gradient(circle at 86% 20%, rgba(0,168,255,.14), transparent 38%) !important;
}
body.vn-menu-open{overflow:hidden;}
@media (min-width:783px){
  .vn-mobile-toggle,
  .vn-mobile-menu,
  .vn-mobile-menu.is-open{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  .vn-desktop-nav{
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
  }
  .vn-header-cta{
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
  }
}
@media (max-width:782px){
  .vn-desktop-nav,
  .vn-header-cta{
    display:none !important;
  }
  .vn-mobile-toggle{
    display:flex !important;
    margin-left:auto !important;
  }
  .vn-mobile-menu{
    position:fixed !important;
    inset:0 !important;
    z-index:999999 !important;
    display:block !important;
    background-color:#05070d !important;
    color:#fff !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  .vn-mobile-menu.is-open{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:none !important;
  }
  .vn-mobile-menu-inner a{
    background:#090d16 !important;
    border-color:rgba(115,255,0,.45) !important;
  }
}