/** Shopify CDN: Minification failed

Line 138:0 All "@import" rules must come first

**/
@import url('https://fonts.googleapis.com/css2?family=Orbitron&family=Roboto+Mono&display=swap');

/* === Allgemein === */
body {
  background-color: #1e2b38;
  color: #d2ff00;
  font-family: 'Roboto Mono', monospace;
}

/* === Account-Dropdown Neonfarben === */
.account-actions__title,
.account-actions__email {
  color: #d2ff00 !important; /* Neon-Grün */
}

/* === Account-Dropdown Buttons (Standard) === */
.account-actions__link.button-secondary {
  background-color: #d2ff00 !important; /* Neon-Grün */
  color: #000 !important;              /* Schwarze Schrift */
  border: none !important;             /* Keine weiße Umrandung */
  box-shadow: none !important;
}

.account-actions__link.button-secondary .account-actions__icon svg path {
  stroke: #000 !important;  /* Schwarze Icons */
  fill: none !important;    /* Nur Outline */
}

/* === Account-Dropdown Buttons (Hover) === */
.account-actions__link.button-secondary:hover {
  background-color: #00ffff !important; /* Cyan Hover */
  color: #000 !important;              /* Schwarze Schrift */
}

.account-actions__link.button-secondary:hover .account-actions__icon svg path {
  stroke: #000 !important;  /* Icons bleiben schwarz */
  fill: none !important;
}

/* Fix: Account-Dropdown Icons komplett schwarz */
.account-actions__link.button-secondary .account-actions__icon svg path,
.account-actions__link.button-secondary .account-actions__icon svg circle {
  stroke: #000 !important;  /* alles schwarz */
  fill: none !important;    /* keine Füllung */
}

/* Auch im Hover schwarz lassen */
.account-actions__link.button-secondary:hover .account-actions__icon svg path,
.account-actions__link.button-secondary:hover .account-actions__icon svg circle {
  stroke: #000 !important;
  fill: none !important;
}

/* === Headings === */
h1, h2, h3, h4 {
  font-family: 'Orbitron', sans-serif;
  color: #d2ff00;
  text-transform: uppercase;
}

/* === Header-Schrift (Orbitron Regular) === */
#header-group,
#header-group * {
  font-family: 'Orbitron', sans-serif !important;
  text-transform: uppercase;
  font-weight: 200 !important;
  letter-spacing: 0.1em;
}

/* === Neon-Linie (Basiszustand: grün) === */
.neon-glow-line {
  height: 2px;
  width: 100%;
  background-color: #d2ff00;
  box-shadow:
    0 3px 6px #d2ff00,
    0 6px 12px #d2ff00,
    0 9px 18px #d2ff00;
  z-index: 1000;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
  opacity: 0;
animation: neonLineFadeIn 2s ease forwards;

  position: sticky;
}

/* === Linie bei Hover: cyan Glow === */
#header-group:hover .neon-glow-line {
  background-color: #00FFFF !important;
  box-shadow:
    0 3px 6px #00FFFF,
    0 6px 12px #00FFFF,
    0 9px 18px #00FFFF !important;
}

/* === Logo Standardfarbe === */
.custom-logo svg {
  color: #d2ff00;
  transition: color 0.4s ease;
}


/* Hover nur für die Header-Icons, nicht für alle Links */
#header-group .header-actions__action:hover,
#header-group .header-actions__action:hover svg {
  color: #00FFFF !important;
  fill: none !important;
}

/* === Menülinks Games / Shop (Fix für Text-Span) === */
#header-group .header__inline-menu .header__menu-item a,
#header-group .header__inline-menu .header__menu-item span {
  color: #d2ff00 !important;   /* Standard: Neon Grün */
  transition: color 0.3s ease !important;
}

#header-group .header__inline-menu .header__menu-item a:hover,
#header-group .header__inline-menu .header__menu-item:hover span {
  color: #00FFFF !important;   /* Hover: Cyan */
}
/* === Nur Icons (nicht das Logo): Standardstroke grün === */
#header-group .header-actions__action svg path {
  stroke: #d2ff00;
  fill: none;
  transition: stroke 0.4s ease;
}

/* === Nur das aktuell gehoverte Icon wird cyan === */
#header-group .header-actions__action:hover svg path {
  stroke: #00FFFF !important;
}

@import url('https://fonts.googleapis.com/css2?family=Orbitron&family=Roboto+Mono&display=swap');

/* === Allgemein === */
body {
  background-color: #1e2b38;
  color: #d2ff00;
  font-family: 'Roboto Mono', monospace;
}

/* === Account-Dropdown Neonfarben === */
.account-actions__title,
.account-actions__email {
  color: #d2ff00 !important; /* Neon-Grün */
}

/* === Account-Dropdown Buttons (Standard) === */
.account-actions__link.button-secondary {
  background-color: #d2ff00 !important; /* Neon-Grün */
  color: #000 !important;              /* Schwarze Schrift */
  border: none !important;             /* Keine weiße Umrandung */
  box-shadow: none !important;
}

.account-actions__link.button-secondary .account-actions__icon svg path {
  stroke: #000 !important;  /* Schwarze Icons */
  fill: none !important;    /* Nur Outline */
}

/* === Account-Dropdown Buttons (Hover) === */
.account-actions__link.button-secondary:hover {
  background-color: #00ffff !important; /* Cyan Hover */
  color: #000 !important;              /* Schwarze Schrift */
}

.account-actions__link.button-secondary:hover .account-actions__icon svg path {
  stroke: #000 !important;  /* Icons bleiben schwarz */
  fill: none !important;
}

/* Fix: Account-Dropdown Icons komplett schwarz */
.account-actions__link.button-secondary .account-actions__icon svg path,
.account-actions__link.button-secondary .account-actions__icon svg circle {
  stroke: #000 !important;  /* alles schwarz */
  fill: none !important;    /* keine Füllung */
}

/* Auch im Hover schwarz lassen */
.account-actions__link.button-secondary:hover .account-actions__icon svg path,
.account-actions__link.button-secondary:hover .account-actions__icon svg circle {
  stroke: #000 !important;
  fill: none !important;
}

/* === Headings === */
h1, h2, h3, h4 {
  font-family: 'Orbitron', sans-serif;
  color: #d2ff00;
  text-transform: uppercase;
}

/* === Header-Schrift (Orbitron Regular) === */
#header-group,
#header-group * {
  font-family: 'Orbitron', sans-serif !important;
  text-transform: uppercase;
  font-weight: 200 !important;
  letter-spacing: 0.1em;
}

/* === Neon-Linie (Basiszustand: grün) === */
.neon-glow-line {
  height: 2px;
  width: 100%;
  background-color: #d2ff00;
  box-shadow:
    0 3px 6px #d2ff00,
    0 6px 12px #d2ff00,
    0 9px 18px #d2ff00;
  z-index: 1000;
  transition: background-color 0.4s ease, box-shadow 0.4s ease;
  opacity: 0;
animation: neonLineFadeIn 2s ease forwards;

  position: sticky;
}

/* === Linie bei Hover: cyan Glow === */
#header-group:hover .neon-glow-line {
  background-color: #00FFFF !important;
  box-shadow:
    0 3px 6px #00FFFF,
    0 6px 12px #00FFFF,
    0 9px 18px #00FFFF !important;
}

/* === Logo Standardfarbe === */
.custom-logo svg {
  color: #d2ff00;
  transition: color 0.4s ease;
}


/* Hover nur für die Header-Icons, nicht für alle Links */
#header-group .header-actions__action:hover,
#header-group .header-actions__action:hover svg {
  color: #00FFFF !important;
  fill: none !important;
}

/* === Menülinks Games / Shop (Fix für Text-Span) === */
#header-group .header__inline-menu .header__menu-item a,
#header-group .header__inline-menu .header__menu-item span {
  color: #d2ff00 !important;   /* Standard: Neon Grün */
  transition: color 0.3s ease !important;
}

#header-group .header__inline-menu .header__menu-item a:hover,
#header-group .header__inline-menu .header__menu-item:hover span {
  color: #00FFFF !important;   /* Hover: Cyan */
}
/* === Nur Icons (nicht das Logo): Standardstroke grün === */
#header-group .header-actions__action svg path {
  stroke: #d2ff00;
  fill: none;
  transition: stroke 0.4s ease;
}

/* === Nur das aktuell gehoverte Icon wird cyan === */
#header-group .header-actions__action:hover svg path {
  stroke: #00FFFF !important;
}
/* === Such-Icon gezielt ansprechen === */
.search-modal__button svg circle,
.search-modal__button svg path {
  stroke: #d2ff00;
  fill: none;
  transition: stroke 0.4s ease;
}

.search-modal__button:hover svg circle,
.search-modal__button:hover svg path {
  stroke: #00FFFF !important;
}

/* === Avatar-/Personen-Icon: Füllung verhindern === */
.header-actions__action svg circle {
  fill: none !important;
}

/* Auch im Hover-Zustand: Füllung soll leer bleiben, nur Stroke wird cyan */
.header-actions__action:hover svg circle {
  fill: none !important;
  stroke: #00FFFF !important;
}
@keyframes neonLineFadeIn {
  0% {
    opacity: 0;
    box-shadow: none;
  }
  100% {
    opacity: 1;
    box-shadow:
      0 3px 6px #d2ff00,
      0 6px 12px #d2ff00,
      0 9px 18px #d2ff00;
  }
}
/* === Mobile Menü-Icon (Burger / Close): Standardfarbe grün === */
.header__icon--menu svg path,
.header__icon--summary svg path {
  stroke: #d2ff00;
  fill: none;
  transition: stroke 0.4s ease;
}

/* === Cart Icon (immer nur Stroke, kein Fill) === */
.header-actions__action.icon-cart svg {
  fill: none !important;       /* keine Fläche */
  stroke: #d2ff00 !important;  /* Neon-Grün */
  transition: stroke 0.3s ease;
  stroke-width: 1.5px;         /* falls zu dünn, kannst du hochgehen */
}

/* Hover: Stroke wird Cyan */
.header-actions__action.icon-cart:hover svg {
  fill: none !important;
  stroke: #00FFFF !important;
}

/* === Mobile Menü-Icon (Burger / Close): Hoverfarbe cyan === */
.header__icon--menu:hover svg path,
.header__icon--summary:hover svg path {
  stroke: #00FFFF !important;
}
/* === X-Schließen Icon im mobilen Menü: Standardfarbe grün === */
.menu-drawer__close-button svg path {
  stroke: #d2ff00;
  fill: none;
  transition: stroke 0.4s ease;
}

/* === X-Schließen Icon beim Hover: cyan === */
.menu-drawer__close-button:hover svg path {
  stroke: #00FFFF !important;
}
.menu-drawer__menu > li:first-child {
  margin-top: 1.5rem; /* Du kannst den Wert bei Bedarf anpassen */
}
/* Standardgröße für Desktop */
.custom-logo svg {
  max-width: 287px;
  height: auto;
  transition: max-width 0.4s ease;
}

#header-group .header-actions__action:hover,
#header-group .header-actions__action:hover svg {
  color: #00FFFF !important;
  fill: none !important;
}

@media screen and (max-width: 749px) {
  .header__columns {
    display: grid !important;
    grid-template-areas: 'menu logo actions' !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center;
    column-gap: 0 !important;
    padding-inline: var(--padding-xs) !important;
  }

  .header__column--left {
    grid-area: menu !important;
    justify-content: flex-start !important;
  }

  .header__column--center {
    grid-area: logo !important;
    justify-content: center !important;
  }

  .header__column--right {
    grid-area: actions !important;
    justify-content: flex-end !important;
    display: flex !important;
    gap: 0.75rem !important;
    align-items: center !important;
  }

  .custom-logo svg,
  .header-logo svg {
    max-width: 110px !important;
    height: auto;
  }
}
/* === Such-Icon gezielt ansprechen === */
.search-modal__button svg circle,
.search-modal__button svg path {
  stroke: #d2ff00;
  fill: none;
  transition: stroke 0.4s ease;
}

.search-modal__button:hover svg circle,
.search-modal__button:hover svg path {
  stroke: #00FFFF !important;
}

/* === Avatar-/Personen-Icon: Füllung verhindern === */
.header-actions__action svg circle {
  fill: none !important;
}

/* Auch im Hover-Zustand: Füllung soll leer bleiben, nur Stroke wird cyan */
.header-actions__action:hover svg circle {
  fill: none !important;
  stroke: #00FFFF !important;
}
@keyframes neonLineFadeIn {
  0% {
    opacity: 0;
    box-shadow: none;
  }
  100% {
    opacity: 1;
    box-shadow:
      0 3px 6px #d2ff00,
      0 6px 12px #d2ff00,
      0 9px 18px #d2ff00;
  }
}
/* === Mobile Menü-Icon (Burger / Close): Standardfarbe grün === */
.header__icon--menu svg path,
.header__icon--summary svg path {
  stroke: #d2ff00;
  fill: none;
  transition: stroke 0.4s ease;
}

/* === Cart Icon (immer nur Stroke, kein Fill) === */
.header-actions__action.icon-cart svg {
  fill: none !important;       /* keine Fläche */
  stroke: #d2ff00 !important;  /* Neon-Grün */
  transition: stroke 0.3s ease;
  stroke-width: 1.5px;         /* falls zu dünn, kannst du hochgehen */
}

/* Hover: Stroke wird Cyan */
.header-actions__action.icon-cart:hover svg {
  fill: none !important;
  stroke: #00FFFF !important;
}

/* === Mobile Menü-Icon (Burger / Close): Hoverfarbe cyan === */
.header__icon--menu:hover svg path,
.header__icon--summary:hover svg path {
  stroke: #00FFFF !important;
}
/* === X-Schließen Icon im mobilen Menü: Standardfarbe grün === */
.menu-drawer__close-button svg path {
  stroke: #d2ff00;
  fill: none;
  transition: stroke 0.4s ease;
}

/* === X-Schließen Icon beim Hover: cyan === */
.menu-drawer__close-button:hover svg path {
  stroke: #00FFFF !important;
}
.menu-drawer__menu > li:first-child {
  margin-top: 1.5rem; /* Du kannst den Wert bei Bedarf anpassen */
}
/* Standardgröße für Desktop */
.custom-logo svg {
  max-width: 287px;
  height: auto;
  transition: max-width 0.4s ease;
}

#header-group .header-actions__action:hover,
#header-group .header-actions__action:hover svg {
  color: #00FFFF !important;
  fill: none !important;
}

@media screen and (max-width: 749px) {
  .header__columns {
    display: grid !important;
    grid-template-areas: 'menu logo actions' !important;
    grid-template-columns: 1fr auto 1fr !important;
    align-items: center;
    column-gap: 0 !important;
    padding-inline: var(--padding-xs) !important;
  }

  .header__column--left {
    grid-area: menu !important;
    justify-content: flex-start !important;
  }

  .header__column--center {
    grid-area: logo !important;
    justify-content: center !important;
  }

  .header__column--right {
    grid-area: actions !important;
    justify-content: flex-end !important;
    display: flex !important;
    gap: 0.75rem !important;
    align-items: center !important;
  }

  .custom-logo svg,
  .header-logo svg {
    max-width: 110px !important;
    height: auto;
  }
}
/* === FINAL FIX: Games/Shop Hover (zielt auf den sichtbaren Text-Span) === */

/* Grundfarbe */
#header-group overflow-list .menu-list__link-title {
  color: #d2ff00 !important;
  transition: color .3s ease !important;
}

/* Hover/Fokus auf dem Link ODER dem gesamten LI -> Text wird cyan */
#header-group overflow-list .menu-list__link:hover > .menu-list__link-title,
#header-group overflow-list .menu-list__link:focus > .menu-list__link-title,
#header-group overflow-list .menu-list__list-item:hover > .menu-list__link > .menu-list__link-title,
#header-group overflow-list .menu-list__list-item:focus-within > .menu-list__link > .menu-list__link-title {
  color: #00FFFF !important;
}

/* ==== MOBILE: Lupe oben rechts pinnen, Floating unten aus ==== */
@media (max-width: 749px) {
  /* Header als Bezugspunkt */
  #header-group { position: relative; }

  /* Native Floating-Suche ausblenden */
  .floating-search,
  .mobile-search-fab,
  .search-fab,
  .header__search--floating { display: none !important; }

  /* Die vorhandene Such-Schaltfläche oben rechts fixieren */
  .search-modal__button {
    position: absolute !important;
    top: 10px;                /* ggf. 8–14px tweaken */
    right: 12px;              /* Abstand zum Rand */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    transform: none !important;
    margin: 0 !important;
  }

  /* Platz für die fixierte Lupe schaffen, damit nix überlappt */
  .header__column--right { padding-right: 36px !important; }

  /* Logo minimal kleiner, damit die Reihe nicht wrappt */
  .custom-logo svg,
  .header-logo svg { max-width: 106px !important; height: auto !important; }
}

/* ========= MOBILE HEADER / NEON FIX ========= */

/* 1) Header sauber sticky + Safe-Area berücksichtigen */
.site-header,
.header-wrapper {
  position: sticky;
  top: 0;
  z-index: 1000; /* unter dem Drawer, aber über Content */
  padding-top: max(0px, env(safe-area-inset-top));
  /* keine zusätzliche margin-top auf dem nächsten Element erzwingen */
}

/* 2) Drawer/Offcanvas-Menü steht über allem */
.menu-drawer,
.nav-drawer,
.drawer__inner {
  position: fixed;
  inset: 0;
  z-index: 1100; /* höher als Header */
}

/* 3) Neon nur lokal unter dem Titel rendern – NICHT fixed! */
.page-title,
.section-header__title,
h1.page-title,
h1.section-title {
  position: relative; /* Anker für die Pseudo-Linie */
  isolation: isolate; /* eigener Stacking-Context, damit z-index sauber bleibt */
}

.page-title::after,
.section-header__title::after,
h1.page-title::after,
h1.section-title::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;           /* feine Distanz zur Schrift */
  height: 2px;            /* eigentliche Linie */
  background: #00ffd0;    /* deine Neon-Farbe (adjust if needed) */
  box-shadow:
    0 0 8px #00ffd0,
    0 0 16px #00ffd0,
    0 0 24px #00ffd0;      /* Glow */
  pointer-events: none;
  z-index: -1;            /* unter dem Text bleiben */
}

/* 4) Verhindern, dass globale Neon-Linien mitlaufen (falls du sowas hattest) */
.neon-line,
.header-neon,
[data-neon="line"] {
  position: absolute !important;
  z-index: 1 !important;
}
@media (max-width: 768px) {
  .neon-line,
  .header-neon,
  [data-neon="line"] {
    position: absolute !important; /* nicht fixed auf Mobile */
    width: 100%;
  }
}

/* 5) Mobile: Header-Height & Content-Offset clean halten */
:root {
  --header-mobile-h: 56px; /* passe an deine echte Höhe an */
}
@media (max-width: 768px) {
  .site-header,
  .header-wrapper {
    min-height: var(--header-mobile-h);
  }
  /* Haupt-Content bekommt bewusst Platz, aber nicht zu viel */
  main,
  .main-content,
  #MainContent {
    padding-top: 0; /* entferne doppelte Offsets, wenn dein Theme die schon setzt */
  }
}

/* 6) Falls dein Title über dem Menü durchblitzt: unter den Drawer zwingen */
@media (max-width: 768px) {
  .page-title,
  .section-header__title,
  h1.page-title,
  h1.section-title {
    z-index: 1000; /* unter Drawer (1100), über Content */
  }
}

/* 7) Typische iOS Safari Render-Quirks abfedern */
@supports (padding: max(0px)) {
  .site-header,
  .header-wrapper {
    padding-top: max(0px, env(safe-area-inset-top));
  }
}

/* ============== NEON-LINIE SAFETY FIX ============== */

/* 1) Linie an den Header "anbinden" und innen clippen */
#header-group,
.site-header,
.header-wrapper {
  position: relative;
  overflow: hidden;                /* Strich kann nicht überragen */
}

.neon-glow-line {
  position: absolute !important;   /* statt sticky/fixed */
  left: 0; right: 0; bottom: 0;    /* sitzt direkt unten am Header */
  z-index: 0 !important;           /* unter Icons/Logo */
}

/* 2) Linie ausblenden, sobald irgendein Drawer/Overlay offen ist */
@media (max-width: 768px) {
  /* modern & robust: :has() – iOS/Safari 17+ kann das */
  html:has(.menu-drawer[open]) .neon-glow-line,
  html:has(.menu-drawer--open) .neon-glow-line,
  html:has(.drawer--is-open) .neon-glow-line,
  html:has(.search-modal[open]) .neon-glow-line,
  html:has(.js-search-is-open) .neon-glow-line,
  html:has(.country-selector[open]) .neon-glow-line {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Fallback für Themes, die Body/HTML Klassen togglen */
  html.drawer-open .neon-glow-line,
  body.drawer-open .neon-glow-line,
  body.menu-open .neon-glow-line,
  body.search-open .neon-glow-line {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}

/* === FINAL MOBILE HEADER FIX FOR HORIZON / REPLAI === */
@media (max-width: 749px) {

  /* 1) Header + Wrapper enger zusammenziehen */
  .shopify-section-header,
  .shopify-section-header .header,
  .shopify-section-header .header-wrapper,
  .shopify-section-header .header__wrapper {
    min-height: 44px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  /* 2) Neonlinie fix positionieren und im Header clippen */
  .neon-glow-line {
    position: absolute !important;
    bottom: 0 !important;
    left: 0;
    right: 0;
    z-index: 0 !important;
  }
  #header-group,
  .header-wrapper {
    overflow: hidden !important;
  }

  /* 3) Logo zentriert & kleiner */
  .custom-logo svg,
  .header-logo svg,
  .header__heading img,
  .header__heading svg {
    max-height: 20px !important;
    height: 20px !important;
    width: auto !important;
    transform: translateY(1px) !important; /* optisch zentrieren */
  }

  /* 4) Menü + Icons in Linie bringen */
  .header__columns {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0 !important;
  }

  .header__column--left,
  .header__column--center,
  .header__column--right {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  /* 5) Icons verkleinern */
  .header__icon,
  .header-actions__action,
  .search-modal__button {
    width: 28px !important;
    height: 28px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
  }

  .header__icon svg,
  .header-actions__action svg,
  .search-modal__button svg {
    width: 16px !important;
    height: 16px !important;
  }

  /* 6) Lupe pixelgenau mittig */
  .header__column--right {
    position: relative !important;
    align-items: center !important;
  }

  .search-modal__button {
    position: absolute !important;
    top: 50% !important;
    right: 12px !important;
    transform: translateY(-50%) !important;
  }

  /* 7) Falls Announcement-Bar aktiv ist */
  .announcement-bar,
  .announcement__bar,
  .shopify-section-header .announcement-bar__message {
    padding: 2px 0 !important;
    font-size: 12px !important;
    min-height: 0 !important;
  }
}

/* === FIX: Search-Icon klickt sich nicht mehr mit dem Cart === */
@media (max-width: 749px) {

  /* Rechte Spalte: kein Überlappen mehr */
  .header__column--right {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0 !important;
    overflow: visible !important;
  }

  /* Cart bleibt statisch, Lupe bekommt eigenen Platz */
  .header-actions__action.icon-cart {
    position: relative !important;
    z-index: 5 !important;
    margin-right: 36px !important; /* trennt Hitboxen */
  }

  /* Lupe leicht nach oben, klarer Klickbereich */
  .search-modal__button {
    position: absolute !important;
    top: 50% !important;
    right: 6px !important;
    transform: translateY(-50%) !important;
    z-index: 10 !important;
    pointer-events: auto !important;
  }

  /* optional: etwas kleinere Symbole für optische Balance */
  .header-actions__action svg,
  .search-modal__button svg {
    width: 17px !important;
    height: 17px !important;
  }
}