/* =========================================================
   WHITEFOX2K – Header CSS
   Version: v4.1 strukturiert / bereinigt
   Basis: aktuelle funktionierende Header-CSS
   Ziel:
   - keine optischen Experimente
   - keine Clean-Band-Übersteuerung
   - bestehendes Layout erhalten
   - doppelte Patch-Blöcke sauber integriert
   ========================================================= */


/* =========================================================
   0) Design Tokens / Grundwerte
   ========================================================= */

:root{
  --wf-bg:#030712;
  --wf-bg2:#061127;
  --wf-panel:#07152a;
  --wf-panel2:#0a1a34;

  --wf-border:rgba(120,170,255,.13);
  --wf-border-strong:rgba(120,170,255,.24);

  --wf-text:#f4f8ff;
  --wf-muted:rgba(214,225,255,.72);
  --wf-soft:rgba(214,225,255,.56);

  --wf-blue:#2e9fff;
  --wf-cyan:#7de5ff;
  --wf-gold:#f7c95e;

  --wf-wrap:1400px;
  --wf-header-h:66px;

  --wf-search-panel-bg:linear-gradient(180deg, rgba(10,25,50,.92), rgba(5,14,29,.95));
  --wf-search-input-bg:rgba(6,16,35,.96);
  --wf-dd-bg:rgba(6,14,28,.98);
  --wf-dd-border:rgba(255,255,255,.10);

  --wf-ico:rgba(125,229,255,.92);
  --wf-ico-strong:rgba(190,244,255,.98);
  --wf-ico-glow:rgba(46,159,255,.22);

  --wf-z-header:1000;
  --wf-z-submenu:1600;
  --wf-z-search:1500;
  --wf-z-drawer:1450;
  --wf-z-adminbar:2147483647;
}


/* =========================================================
   1) WordPress Admin Bar Layer Fix
   ========================================================= */

html body.admin-bar #wpadminbar,
html body.admin-bar #wpadminbar .ab-top-menu,
html body.admin-bar #wpadminbar .ab-item,
html body.admin-bar #wpadminbar .ab-sub-wrapper,
html body.admin-bar #wpadminbar .menupop .ab-sub-wrapper,
html body.admin-bar #wpadminbar .quicklinks,
html body.admin-bar #wpadminbar .quicklinks .menupop ul{
  z-index:var(--wf-z-adminbar) !important;
}


/* =========================================================
   2) Elementor Header Container / Row Alignment
   ========================================================= */

/* Generische Elementor-Header-Ausrichtung */
header .e-con,
header .e-con-inner{
  align-items:center !important;
}

header .elementor-element-6950c7a{
  display:flex !important;
  align-items:center !important;
  justify-content:flex-end !important;
  gap:14px !important;
  overflow:visible !important;
}

header .elementor-element-6950c7a > .elementor-element{
  display:flex !important;
  align-items:center !important;
}

/* Header-Location selbst */
header.elementor-location-header{
  margin-bottom:0 !important;
  padding-bottom:0 !important;
  overflow:visible !important;
  z-index:1000 !important;
}

/* Elementor-Zeile: HTML-Header + Warenkorb */
header.elementor-location-header .wf-header-row{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  flex-wrap:nowrap !important;
  margin:0 !important;
  padding:0 !important;
  overflow:visible !important;
}

/* HTML-Widget darf schrumpfen und soll nicht überlappen */
header.elementor-location-header .wf-header-row > .elementor-element:has(.wf-header){
  flex:1 1 auto !important;
  min-width:0 !important;
}

/* Alle direkten Header-Widgets sauber begrenzen */
header.elementor-location-header .wf-header-row > .elementor-element{
  width:auto !important;
  max-width:100% !important;
  min-width:0 !important;
}

/* Reserveabstände unter dem Header neutralisieren */
header.elementor-location-header > .elementor,
header.elementor-location-header .elementor-section,
header.elementor-location-header .elementor-container,
header.elementor-location-header .e-con{
  margin-bottom:0 !important;
}


/* =========================================================
   3) Elementor WooCommerce Menu Cart
   ========================================================= */

header.elementor-location-header .wf-header-row > .elementor-widget-woocommerce-menu-cart{
  flex:0 0 auto !important;
  margin-left:8px !important;
  position:relative !important;
  z-index:1200 !important;
  align-self:center !important;
  display:flex !important;
  align-items:center !important;
}

header.elementor-location-header .elementor-widget-woocommerce-menu-cart{
  overflow:visible !important;
}

header.elementor-location-header .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle,
header.elementor-location-header .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle_wrapper{
  height:100% !important;
  display:flex !important;
  align-items:center !important;
}

header.elementor-location-header .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button,
header.elementor-location-header .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle_button{
  min-height:50px !important;
  height:50px !important;
  min-width:118px !important;
  padding:7px 13px !important;
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  border-radius:0 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  background:linear-gradient(180deg, rgba(10,25,50,.92), rgba(5,14,29,.95)) !important;
  box-shadow:none !important;
  color:#f4f8ff !important;
  transition:.18s ease !important;
}

header.elementor-location-header .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button:hover,
header.elementor-location-header .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle_button:hover{
  transform:translateY(-1px);
  border-color:rgba(113,222,255,.28) !important;
  background:linear-gradient(180deg, rgba(12,31,60,.96), rgba(6,17,36,.98)) !important;
}

header.elementor-location-header .elementor-widget-woocommerce-menu-cart .elementor-button-text,
header.elementor-location-header .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__subtotal{
  color:rgba(235,240,255,.94) !important;
  font-size:18px !important;
  font-weight:1000 !important;
  line-height:1 !important;
  letter-spacing:.06em !important;
  white-space:nowrap !important;
}

header.elementor-location-header .elementor-widget-woocommerce-menu-cart .elementor-button-icon,
header.elementor-location-header .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button-icon i,
header.elementor-location-header .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button-icon svg{
  color:var(--wf-ico) !important;
  fill:currentColor !important;
  filter:drop-shadow(0 0 10px var(--wf-ico-glow));
}

header.elementor-location-header .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button-icon[data-counter]::before,
header.elementor-location-header .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button-icon .elementor-button-icon-qty{
  background:var(--wf-blue) !important;
  color:#061127 !important;
  border:1px solid rgba(125,229,255,.55) !important;
  box-shadow:0 0 14px rgba(46,159,255,.35) !important;
  font-weight:1000 !important;
}

header.elementor-location-header .elementor-menu-cart__container{
  z-index:1700 !important;
}


/* =========================================================
   4) Whitefox Header Shell
   ========================================================= */

.wf-header{
  position:relative;
  width:100%;
  margin:0;
  background:transparent;
  border:0;
  overflow:visible;
  z-index:var(--wf-z-header);
  isolation:isolate;
}

.wf-header *{
  box-sizing:border-box;
}

.wf-header__inner{
  position:relative;
  width:100%;
  min-height:var(--wf-header-h) !important;
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center !important;
  gap:18px;
  padding:8px 14px !important;
  overflow:visible;
}

.wf-header__inner::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(10,25,50,.92), rgba(5,14,29,.95));
  border:1px solid rgba(255,255,255,.08);
  pointer-events:none;
  z-index:0;
}

.wf-header__inner::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:2px;
  background:linear-gradient(180deg, var(--wf-cyan), var(--wf-blue));
  pointer-events:none;
  z-index:1;
}

.wf-brand,
.wf-right{
  position:relative;
  z-index:2;
}

.wf-brand,
.wf-right,
.wf-nav,
.wf-search,
.wf-actions{
  align-self:center !important;
}


/* =========================================================
   5) Brand / Logo
   ========================================================= */

.wf-brand{
  display:inline-flex;
  align-items:center;
  text-decoration:none;
  padding-left:2px;
}

.wf-brand__logo{
  width:46px;
  height:46px;
  display:block;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:none;
  background:rgba(255,255,255,.02);
}


/* =========================================================
   6) Header Right Side Layout
   ========================================================= */

.wf-right{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  overflow:visible;
}


/* =========================================================
   7) Main Navigation
   ========================================================= */

.wf-nav{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  margin:0 auto;
  padding:0;
  list-style:none;
  min-width:0;
  flex-wrap:nowrap;
  flex:1 1 auto;
}

.wf-nav li{
  margin:0;
  padding:0;
}

.wf-nav > li{
  position:relative;
}

.wf-nav > li > a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:40px;
  min-width:116px;
  padding:9px 13px;
  text-decoration:none;
  color:rgba(235,240,255,.92);
  font-size:12px;
  font-weight:900;
  letter-spacing:.11em;
  text-transform:uppercase;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  transition:.18s ease;
  text-align:center;
}

.wf-nav > li > a:hover{
  transform:translateY(-1px);
  color:#fff;
  border-color:rgba(113,222,255,.26);
  background:rgba(75,163,255,.08);
}

.wf-nav-ico,
.wf-drawer-ico{
  width:15px;
  height:15px;
  display:inline-block;
  flex:0 0 auto;
  color:var(--wf-ico);
  filter:drop-shadow(0 0 10px var(--wf-ico-glow));
  transition:.18s ease;
}

.wf-nav > li > a:hover .wf-nav-ico,
.wf-drawer__panel a:hover .wf-drawer-ico{
  color:var(--wf-ico-strong);
  filter:drop-shadow(0 0 14px rgba(40,190,255,.28));
}


/* =========================================================
   8) Shop Highlight
   ========================================================= */

.wf-header .wf-nav a[href="https://whitefox2k.de/shop/"],
.wf-header .wf-nav a[href="/shop/"]{
  border-color:rgba(247,201,94,.24) !important;
  background:linear-gradient(135deg, rgba(247,201,94,.14), rgba(28,18,6,.82)) !important;
  color:#fff6d2 !important;
}

.wf-header .wf-nav a[href="https://whitefox2k.de/shop/"] .wf-nav-label,
.wf-header .wf-nav a[href="/shop/"] .wf-nav-label{
  background:linear-gradient(135deg,
    rgba(255,255,255,.98) 0%,
    rgba(255,243,176,.95) 32%,
    rgba(255,211,90,.95) 65%,
    rgba(255,191,42,.98) 100%
  );
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 10px rgba(255,210,90,.18);
}

.wf-header .wf-nav a[href="https://whitefox2k.de/shop/"] .wf-nav-ico,
.wf-header .wf-nav a[href="/shop/"] .wf-nav-ico{
  color:rgba(255,211,90,.95) !important;
  filter:drop-shadow(0 0 12px rgba(255,210,90,.20)) !important;
}

.wf-header .wf-nav a[href="https://whitefox2k.de/shop/"]:hover,
.wf-header .wf-nav a[href="/shop/"]:hover{
  border-color:rgba(247,201,94,.36) !important;
  background:linear-gradient(135deg, rgba(247,201,94,.18), rgba(28,18,6,.92)) !important;
}


/* =========================================================
   9) Shop Submenu / Hover Dropdown
   ========================================================= */

.wf-nav-caret{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin-left:2px;
  font-size:11px;
  line-height:1;
  color:rgba(255,220,120,.9);
  transition:.18s ease;
}

.wf-nav-item--has-submenu:hover .wf-nav-caret,
.wf-nav-item--has-submenu:focus-within .wf-nav-caret{
  transform:rotate(180deg);
}

.wf-submenu{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:244px;
  margin:0;
  padding:9px;
  list-style:none;
  background:linear-gradient(180deg, rgba(7,17,36,.98), rgba(3,10,22,.98));
  border:1px solid rgba(247,201,94,.22);
  box-shadow:0 22px 48px rgba(0,0,0,.58), 0 0 0 1px rgba(255,255,255,.035) inset;
  opacity:0;
  visibility:hidden;
  transform:translateY(-6px);
  pointer-events:none;
  transition:opacity .16s ease, transform .16s ease, visibility .16s ease;
  z-index:var(--wf-z-submenu);
}

.wf-submenu::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:-11px;
  height:11px;
}

.wf-submenu::after{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:2px;
  background:linear-gradient(180deg, var(--wf-gold), var(--wf-blue));
  pointer-events:none;
}

.wf-nav-item--has-submenu:hover > .wf-submenu,
.wf-nav-item--has-submenu:focus-within > .wf-submenu{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

.wf-submenu li{
  position:relative;
  z-index:1;
}

.wf-submenu a{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:36px;
  padding:9px 12px;
  color:rgba(235,240,255,.9);
  font-size:11px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  text-decoration:none;
  white-space:nowrap;
  border:1px solid transparent;
  background:transparent;
  transition:.16s ease;
}

.wf-submenu a::after{
  content:"›";
  margin-left:18px;
  color:rgba(125,229,255,.78);
}

.wf-submenu a:hover,
.wf-submenu a:focus{
  color:#fff;
  border-color:rgba(113,222,255,.18);
  background:rgba(75,163,255,.08);
}


/* =========================================================
   10) Header Search
   ========================================================= */

.wf-search{
  width:min(560px, 31vw);
  min-width:320px;
  max-width:560px;
  position:relative;
  z-index:var(--wf-z-search);
  overflow:visible;
  flex:0 0 auto;
}

.wf-header .wfhs{
  position:relative;
  width:100%;
  padding:0;
  background:transparent;
  border:0;
  box-shadow:none;
  overflow:visible;
}

.wf-header .wfhs-row{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:10px;
  padding:0;
}

.wf-header .wfhs-label{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:10px 14px;
  font-size:11px;
  line-height:1;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(220,232,255,.64);
  font-weight:900;
  white-space:nowrap;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
}

.wf-header .wfhs-inputwrap{
  position:relative;
  width:100%;
  overflow:visible;
}

.wf-header .wfhs-input{
  width:100% !important;
  height:40px !important;
  padding:0 16px !important;
  border-radius:0 !important;
  background:rgba(6,16,35,.96) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#fff !important;
  font-size:14px !important;
  outline:none !important;
  box-shadow:none !important;
}

.wf-header .wfhs-input::placeholder{
  color:rgba(203,211,255,.62) !important;
  font-style:italic !important;
}

.wf-header .wfhs-input:focus{
  border-color:rgba(113,222,255,.28) !important;
  background:rgba(7,18,39,.98) !important;
}

.wf-header .wfhs-btn{
  width:40px;
  height:40px;
  padding:0;
  margin:0;
  border:1px solid rgba(255,255,255,.08) !important;
  background:rgba(255,255,255,.025) !important;
  box-shadow:none !important;
  border-radius:0 !important;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:.18s ease;
}

.wf-header .wfhs-btn:hover{
  transform:translateY(-1px);
  border-color:rgba(113,222,255,.24) !important;
  background:rgba(75,163,255,.08) !important;
}

.wf-header .wfhs-icon{
  width:18px;
  height:18px;
  fill:currentColor;
  color:var(--wf-ico);
}


/* =========================================================
   11) Header Search Dropdown
   ========================================================= */

.wf-header .wfhs-dropdown{
  position:absolute !important;
  top:calc(100% + 10px) !important;
  left:0 !important;
  right:0 !important;
  width:100% !important;
  z-index:calc(var(--wf-z-search) + 1) !important;
  background:var(--wf-dd-bg) !important;
  border:1px solid var(--wf-dd-border) !important;
  box-shadow:0 20px 45px rgba(0,0,0,.55) !important;
  overflow:hidden !important;
}

.wf-header .wfhs-dropdown[hidden]{
  display:none !important;
}

.wf-header .wfhs-list{
  list-style:none;
  margin:0;
  padding:6px 0;
  width:100%;
}

.wf-header .wfhs-item{
  width:100%;
}

.wf-header .wfhs-item > a{
  width:100%;
  display:grid;
  grid-template-columns:56px 1fr;
  gap:12px;
  align-items:center;
  padding:10px 12px;
  text-decoration:none;
}

.wf-header .wfhs-item > a:hover{
  background:rgba(255,255,255,.05);
}

.wf-header .wfhs-thumb img{
  width:56px !important;
  height:56px !important;
  display:block;
  object-fit:cover !important;
  border:1px solid rgba(255,255,255,.08) !important;
  background:rgba(255,255,255,.02) !important;
}

.wf-header .wfhs-text{
  display:grid;
  grid-template-columns:1fr auto;
  grid-template-rows:auto auto;
  gap:4px 12px;
  min-width:0;
}

.wf-header .wfhs-title{
  grid-column:1 / 2;
  grid-row:1;
  font-weight:850;
  line-height:1.2;
  color:rgba(235,240,255,.95);
  margin:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.wf-header .wfhs-meta{
  grid-column:1 / 3;
  grid-row:2;
  display:flex;
  gap:10px;
  align-items:center;
  min-width:0;
}

.wf-header .wfhs-platform{
  font-size:12px;
  color:rgba(203,211,255,.72);
  white-space:nowrap;
}

.wf-header .wfhs-price{
  grid-column:2 / 3;
  grid-row:1;
  justify-self:end;
  font-weight:1000;
  white-space:nowrap;
  background:linear-gradient(135deg, #ffffff 0%, #fff3b0 35%, #ffd35a 70%, #ffbf2a 100%);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
  background-clip:text;
  color:transparent;
  text-shadow:0 0 10px rgba(255,210,90,.18);
}

.wf-header .wfhs-footer{
  padding:10px 12px 12px;
  border-top:1px solid rgba(148,163,184,.14);
  width:100%;
}

.wf-header .wfhs-all{
  display:block;
  width:100%;
  text-align:center;
  padding:12px 14px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#fff !important;
  text-decoration:none !important;
  border:1px solid rgba(113,222,255,.20);
  background:linear-gradient(135deg, rgba(75,163,255,.15), rgba(7,16,34,.94));
  transition:.18s ease;
}

.wf-header .wfhs-all:hover{
  transform:translateY(-1px);
  border-color:rgba(113,222,255,.40);
  background:linear-gradient(135deg, rgba(75,163,255,.26), rgba(7,16,34,.98));
}


/* =========================================================
   12) Burger Button
   ========================================================= */

.wf-actions{
  display:inline-flex;
  align-items:center;
  gap:12px;
  white-space:nowrap;
  min-width:0;
}

.wf-burger{
  display:none;
  width:44px !important;
  height:40px !important;
  padding:0 !important;
  margin:0 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  background:rgba(255,255,255,.03) !important;
  border-radius:0 !important;
  box-shadow:none !important;
  appearance:none !important;
  -webkit-appearance:none !important;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:.18s ease;
}

.wf-burger:hover{
  transform:translateY(-1px);
  border-color:rgba(113,222,255,.28) !important;
  background:rgba(75,163,255,.08) !important;
}

.wf-burger-lines{
  width:18px;
  height:12px;
  display:inline-flex;
  flex-direction:column;
  justify-content:space-between;
}

.wf-burger-lines span{
  height:2px;
  width:100%;
  display:block;
  background:#f4f8ff;
}


/* =========================================================
   13) Mobile Drawer
   ========================================================= */

.wf-drawer{
  display:none;
  padding:10px 0 0;
  position:relative;
  z-index:var(--wf-z-drawer);
}

.wf-drawer.wf-open{
  display:block;
}

.wf-drawer__panel{
  position:relative;
  padding:10px;
  background:linear-gradient(180deg, rgba(10,25,50,.96), rgba(5,14,29,.98));
  border:1px solid rgba(255,255,255,.08);
  overflow:hidden;
}

.wf-drawer__panel::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:2px;
  background:linear-gradient(180deg, var(--wf-cyan), var(--wf-blue));
}

.wf-drawer__panel a{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin:8px 0;
  padding:12px 14px;
  text-decoration:none;
  color:rgba(235,240,255,.92);
  font-size:12px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.025);
  transition:.18s ease;
}

.wf-drawer__panel a:hover{
  border-color:rgba(113,222,255,.26);
  background:rgba(75,163,255,.08);
}

.wf-drawer-left{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.wf-drawer-submenu{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:7px;
  margin:-2px 0 8px 22px;
  padding:0 0 2px 10px;
  border-left:1px solid rgba(247,201,94,.18);
}

.wf-drawer__panel .wf-drawer-submenu a{
  margin:0;
  min-height:34px;
  padding:9px 10px;
  font-size:10px;
  letter-spacing:.08em;
  color:rgba(220,232,255,.78);
  background:rgba(255,255,255,.018);
}


/* =========================================================
   14) Responsive – Desktop kleiner
   ========================================================= */

@media (max-width:1560px){
  .wf-nav > li > a{
    min-width:118px;
    padding:10px 14px;
    font-size:11px;
  }

  .wf-search{
    width:min(500px, 29vw);
    min-width:280px;
  }
}

@media (max-width:1320px){
  .wf-header__inner{
    gap:18px;
  }

  .wf-nav{
    gap:10px;
  }

  .wf-nav > li > a{
    min-width:106px;
    padding:10px 12px;
    font-size:11px;
  }

  .wf-search{
    width:min(420px, 26vw);
    min-width:240px;
  }
}


/* =========================================================
   15) Responsive – Tablet / Mobile Navigation
   ========================================================= */

@media (max-width:1100px){
  .wf-nav{
    display:none;
  }

  .wf-burger{
    display:inline-flex;
  }

  .wf-right{
    justify-content:flex-end;
    gap:12px;
  }

  .wf-search{
    width:min(100%, 560px);
    max-width:560px;
    min-width:220px;
  }
}

@media (orientation: portrait) and (max-width:900px){
  .wf-search{
    display:none !important;
  }
}


/* =========================================================
   16) Responsive – Small Mobile
   ========================================================= */

@media (max-width:640px){
  header.elementor-location-header .wf-header-row{
    gap:8px !important;
  }

  header.elementor-location-header .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle .elementor-button,
  header.elementor-location-header .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__toggle_button{
    min-width:86px !important;
    height:48px !important;
    min-height:48px !important;
    padding:7px 9px !important;
  }

  header.elementor-location-header .elementor-widget-woocommerce-menu-cart .elementor-button-text,
  header.elementor-location-header .elementor-widget-woocommerce-menu-cart .elementor-menu-cart__subtotal{
    font-size:15px !important;
  }

  .wf-header__inner{
    grid-template-columns:auto 1fr;
    min-height:62px !important;
    gap:12px;
    padding:8px 12px !important;
  }

  .wf-brand__logo{
    width:44px;
    height:44px;
  }

  .wf-search{
    min-width:0;
    width:100%;
  }

  .wf-header .wfhs-row{
    grid-template-columns:1fr auto;
    gap:8px;
  }

  .wf-header .wfhs-label{
    display:none;
  }
}

@media (max-width:480px){
  .wf-drawer-submenu{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   PATCH v4.2 – Shop-Submenu Icons statt Fragezeichen
   Sicherer Zusatzpatch für die aktuell funktionierende CSS
   ========================================================= */

/* Basis: rechte Symbolfläche im Dropdown als echtes Icon rendern */
.wf-submenu a{
  position:relative;
  padding-right:42px;
}

.wf-submenu a::after{
  content:"" !important;
  position:absolute;
  top:50%;
  right:12px;
  width:16px;
  height:16px;
  margin:0 !important;
  transform:translateY(-50%);
  background-repeat:no-repeat;
  background-position:center;
  background-size:contain;
  opacity:.96;
}

/* leichter Hover-Effekt */
.wf-submenu a:hover::after,
.wf-submenu a:focus::after{
  opacity:1;
  transform:translateY(-50%) scale(1.06);
}

/* ---------------------------------------------------------
   Plattform-Hubs
   --------------------------------------------------------- */

/* Steam */
.wf-submenu a[href*="/steam-keys/"]::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%230f1f35'/%3E%3Ccircle cx='44' cy='21' r='8' fill='none' stroke='%23ffffff' stroke-width='4'/%3E%3Ccircle cx='44' cy='21' r='3.2' fill='%23ffffff'/%3E%3Ccircle cx='22' cy='40' r='5' fill='%23ffffff'/%3E%3Cpath d='M26 37l10-6' stroke='%23ffffff' stroke-width='4' stroke-linecap='round'/%3E%3Cpath d='M17 37l8 3' stroke='%237de5ff' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Xbox */
.wf-submenu a[href*="/xbox-keys/"]::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%23107c10'/%3E%3Cpath d='M18 18c6 2 10 6 14 12 4-6 8-10 14-12' fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round'/%3E%3Cpath d='M18 46c6-7 10-11 14-17 4 6 8 10 14 17' fill='none' stroke='%23ffffff' stroke-width='5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* Epic Games */
.wf-submenu a[href*="/epic-keys/"]::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath d='M18 10h28v36l-14 8-14-8z' fill='%23111111' stroke='%23ffffff' stroke-width='2'/%3E%3Ctext x='32' y='29' text-anchor='middle' font-family='Arial,sans-serif' font-size='12' font-weight='700' fill='%23ffffff'%3EEPIC%3C/text%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial,sans-serif' font-size='8' font-weight='700' fill='%23ffffff'%3EGAMES%3C/text%3E%3C/svg%3E");
}

/* GOG */
.wf-submenu a[href*="/gog-keys/"]::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%237833c7'/%3E%3Ctext x='32' y='38' text-anchor='middle' font-family='Arial,sans-serif' font-size='18' font-weight='700' fill='%23ffffff'%3EGOG%3C/text%3E%3C/svg%3E");
}

/* Origin */
.wf-submenu a[href*="/origin-keys/"]::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%23f26c21'/%3E%3Cpath d='M32 18c8 0 14 6 14 14 0 7-5 12-11 14l7-7-8-1-3 8c-7-1-13-7-13-14 0-8 6-14 14-14z' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* PlayStation */
.wf-submenu a[href*="/playstation-keys/"]::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%23006fcd'/%3E%3Ctext x='32' y='39' text-anchor='middle' font-family='Arial,sans-serif' font-size='20' font-weight='700' fill='%23ffffff'%3EPS%3C/text%3E%3C/svg%3E");
}

/* ---------------------------------------------------------
   Nicht-Plattform-Hubs
   --------------------------------------------------------- */

/* Budget Keys */
.wf-submenu a[href*="/budget-deals/"]::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%239b7b15'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial,sans-serif' font-size='24' font-weight='700' fill='%23ffffff'%3E%25%3C/text%3E%3C/svg%3E");
}

/* Spiele unter 5 Euro */
.wf-submenu a[href*="/spiele-unter-5-euro/"]::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%23c99a20'/%3E%3Ctext x='32' y='40' text-anchor='middle' font-family='Arial,sans-serif' font-size='24' font-weight='700' fill='%23ffffff'%3E%E2%82%AC%3C/text%3E%3C/svg%3E");
}

/* Neue Games */
.wf-submenu a[href*="/neue-games/"]::after{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='32' cy='32' r='30' fill='%232e9fff'/%3E%3Cpath d='M32 16l4 10 10 4-10 4-4 10-4-10-10-4 10-4z' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* =========================================================
   WHITEFOX NATIVE 1.2.10 – MOBILE HEADER COLLISION / FRAME FIX
   Ziel:
   - Logo ohne eigenen Rahmen
   - Warenkorb ohne eigenen Rahmen
   - nur Burger als sichtbarer gerahmter Button
   - Cart und Burger bekommen getrennte Slots und überlappen nie
   ========================================================= */

@media (max-width:767px){
  body .wf-header .wf-header__inner{
    display:flex !important;
    grid-template-columns:none !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:12px !important;
    min-height:64px !important;
    padding:8px 12px !important;
  }

  body .wf-header .wf-brand{
    flex:0 0 auto !important;
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  body .wf-header .wf-brand__logo{
    width:44px !important;
    height:44px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    outline:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
  }

  body .wf-header .wf-right{
    flex:1 1 auto !important;
    width:auto !important;
    min-width:0 !important;
    margin:0 !important;
    justify-content:flex-end !important;
    gap:0 !important;
    overflow:visible !important;
  }

  body .wf-header .wf-actions{
    display:grid !important;
    grid-template-columns:40px 44px !important;
    align-items:center !important;
    justify-content:end !important;
    column-gap:8px !important;
    row-gap:0 !important;
    width:92px !important;
    min-width:92px !important;
    max-width:92px !important;
    height:40px !important;
    margin:0 0 0 auto !important;
    padding:0 !important;
    position:relative !important;
    overflow:visible !important;
  }

  body .wf-header .wf-cart-mobile-slot{
    grid-column:1 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    height:40px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    outline:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
    position:relative !important;
  }

  body .wf-header .wf-cart-mobile-slot .wf-cart-mobile-header,
  body .wf-header .wf-cart-mobile-slot .elementor-widget-woocommerce-menu-cart,
  body .wf-header .wf-cart-mobile-slot .elementor-widget-container,
  body .wf-header .wf-cart-mobile-slot .wf-exit-cart-shell,
  body .wf-header .wf-cart-mobile-slot .elementor-menu-cart__wrapper{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    height:40px !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    outline:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    overflow:visible !important;
    position:relative !important;
    inset:auto !important;
    transform:none !important;
  }

  body .wf-header .wf-cart-mobile-slot .elementor-menu-cart__toggle_button,
  body .wf-header .wf-cart-mobile-slot .elementor-menu-cart__toggle .elementor-button{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:40px !important;
    min-width:40px !important;
    max-width:40px !important;
    height:40px !important;
    min-height:40px !important;
    margin:0 !important;
    padding:0 !important;
    gap:0 !important;
    border:0 !important;
    outline:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
    transform:none !important;
    overflow:visible !important;
  }

  body .wf-header .wf-cart-mobile-slot .elementor-menu-cart__toggle_button:hover,
  body .wf-header .wf-cart-mobile-slot .elementor-menu-cart__toggle_button:focus,
  body .wf-header .wf-cart-mobile-slot .elementor-menu-cart__toggle_button:active,
  body .wf-header .wf-cart-mobile-slot .elementor-menu-cart__toggle .elementor-button:hover,
  body .wf-header .wf-cart-mobile-slot .elementor-menu-cart__toggle .elementor-button:focus,
  body .wf-header .wf-cart-mobile-slot .elementor-menu-cart__toggle .elementor-button:active{
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    background-image:none !important;
    box-shadow:none !important;
    transform:none !important;
  }

  /* Auf Mobile reicht Icon + Mengen-Badge. Der Betrag braucht unnötig Breite. */
  body .wf-header .wf-cart-mobile-slot .elementor-button-text,
  body .wf-header .wf-cart-mobile-slot .elementor-menu-cart__subtotal{
    display:none !important;
  }

  body .wf-header .wf-cart-mobile-slot .elementor-button-icon{
    position:relative !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:40px !important;
    height:40px !important;
    margin:0 !important;
    padding:0 !important;
    gap:0 !important;
    overflow:visible !important;
  }

  body .wf-header .wf-cart-mobile-slot .elementor-button-icon > svg,
  body .wf-header .wf-cart-mobile-slot .elementor-button-icon svg{
    display:block !important;
    width:22px !important;
    height:22px !important;
    margin:0 !important;
    flex:0 0 auto !important;
  }

  /* Elementor kann zusätzlich ein ::before-Counter erzeugen – nur das echte Badge verwenden. */
  body .wf-header .wf-cart-mobile-slot .elementor-button-icon[data-counter]::before{
    content:none !important;
    display:none !important;
  }

  body .wf-header .wf-cart-mobile-slot .elementor-button-icon-qty{
    position:absolute !important;
    top:0 !important;
    right:-1px !important;
    z-index:3 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    min-width:18px !important;
    width:auto !important;
    height:18px !important;
    line-height:18px !important;
    margin:0 !important;
    padding:0 4px !important;
    border-radius:999px !important;
    font-size:10px !important;
    font-weight:950 !important;
  }

  body .wf-header .wf-burger{
    grid-column:2 !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    flex:0 0 44px !important;
    width:44px !important;
    min-width:44px !important;
    max-width:44px !important;
    height:40px !important;
    min-height:40px !important;
    margin:0 !important;
    padding:0 !important;
    position:relative !important;
    inset:auto !important;
    transform:none !important;
    z-index:4 !important;
    border:1px solid rgba(255,255,255,.12) !important;
    background:rgba(255,255,255,.035) !important;
    box-shadow:none !important;
  }

  body .wf-header .wf-burger:hover,
  body .wf-header .wf-burger:focus{
    transform:none !important;
    border-color:rgba(113,222,255,.34) !important;
    background:rgba(75,163,255,.09) !important;
  }

  body .wf-header .wf-burger-lines{
    width:18px !important;
    height:12px !important;
    margin:0 !important;
  }
}

@media (max-width:380px){
  body .wf-header .wf-header__inner{
    gap:8px !important;
    padding-left:10px !important;
    padding-right:10px !important;
  }

  body .wf-header .wf-brand__logo{
    width:40px !important;
    height:40px !important;
  }
}