/* Spielvexa shared production chrome — cache-busted recovery layer. */
:root {
  --spielvexa-chrome-aqua: #37c7cd;
  --spielvexa-chrome-aqua-dark: #1aaeba;
  --spielvexa-chrome-ink: #101314;
  --spielvexa-chrome-paper: #ffffff;
  --spielvexa-chrome-line: rgba(255, 255, 255, .2);
}

/* Helper pages currently ship the compact fallback shell. Give it the
   same visual language as the Figma homepage and neutralise stale page
   rules that were written for the old full-hero helper shell. */
body:not(.homepage) [data-helper-shell="header"] {
  position: relative !important;
  z-index: 50 !important;
  width: 100% !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: var(--spielvexa-chrome-aqua) !important;
}

body:not(.homepage) [data-helper-shell="header"] > .site-header,
body:not(.homepage) .site-header {
  position: relative !important;
  inset: auto !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 104px !important;
  height: auto !important;
  margin: 0 !important;
  padding: 20px clamp(20px, 4vw, 64px) !important;
  gap: clamp(20px, 4vw, 56px) !important;
  overflow: visible !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(16, 19, 20, .18) !important;
  background: linear-gradient(115deg, #2dbfc5 0%, #66dbe1 100%) !important;
  color: var(--spielvexa-chrome-ink) !important;
  font-family: "JetBrains Mono", "Spielvexa Local", ui-monospace, monospace !important;
}

body:not(.homepage) .site-header .brand {
  display: inline-flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 154px !important;
  min-height: 64px !important;
  padding: 12px 18px !important;
  border: 1px solid #050505 !important;
  background: #050505 !important;
  color: #fff !important;
  text-decoration: none !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
}

body:not(.homepage) .site-header .brand:hover,
body:not(.homepage) .site-header .brand:focus-visible {
  color: var(--spielvexa-chrome-aqua) !important;
  outline: 3px solid #050505 !important;
  outline-offset: 3px !important;
}

body:not(.homepage) .site-header .menu-toggle {
  display: none !important;
  min-height: 52px !important;
  padding: 10px 16px !important;
  border: 2px solid #050505 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #050505 !important;
  cursor: pointer !important;
  font: 800 14px/1 "JetBrains Mono", "Spielvexa Local", ui-monospace, monospace !important;
}

body:not(.homepage) .site-header .main-navigation {
  display: flex !important;
  flex: 1 1 auto !important;
  align-items: stretch !important;
  justify-content: flex-end !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 64px !important;
  height: auto !important;
  margin: 0 0 0 auto !important;
  padding: 8px !important;
  gap: 0 !important;
  overflow: visible !important;
  background: #fff !important;
  box-shadow: 0 18px 30px rgba(0, 0, 0, .22) !important;
}

body:not(.homepage) .site-header .main-navigation a {
  display: inline-flex !important;
  flex: 0 1 auto !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 48px !important;
  padding: 10px clamp(9px, 1.25vw, 20px) !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #272c2c !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  font-size: clamp(11px, .9vw, 14px) !important;
  font-weight: 800 !important;
  line-height: 1.15 !important;
}

body:not(.homepage) .site-header .main-navigation a:hover,
body:not(.homepage) .site-header .main-navigation a:focus-visible,
body:not(.homepage) .site-header .main-navigation a[aria-current="page"] {
  background: var(--spielvexa-chrome-aqua) !important;
  color: #050505 !important;
  outline: 0 !important;
}

body:not(.homepage) .site-footer {
  position: relative !important;
  z-index: 1 !important;
  display: grid !important;
  grid-template-columns: minmax(210px, .75fr) minmax(420px, 1.6fr) auto !important;
  align-items: start !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  height: auto !important;
  margin: 0 !important;
  padding: 48px clamp(20px, 4vw, 64px) !important;
  gap: 36px clamp(28px, 4vw, 64px) !important;
  border: 0 !important;
  border-top: 8px solid var(--spielvexa-chrome-aqua) !important;
  background: #090b0c !important;
  color: #fff !important;
  font-family: "JetBrains Mono", "Spielvexa Local", ui-monospace, monospace !important;
}

body:not(.homepage) .site-footer > div {
  display: grid !important;
  gap: 14px !important;
  min-width: 0 !important;
}

body:not(.homepage) .site-footer .brand {
  color: #fff !important;
  text-decoration: none !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  letter-spacing: .12em !important;
}

body:not(.homepage) .site-footer p {
  margin: 0 !important;
  color: rgba(255, 255, 255, .72) !important;
  font: 400 14px/1.5 "Spielvexa Local", system-ui, sans-serif !important;
}

body:not(.homepage) .site-footer nav {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 10px 20px !important;
  margin: 0 !important;
  padding: 0 !important;
}

body:not(.homepage) .site-footer nav a {
  display: inline-flex !important;
  align-items: center !important;
  min-height: 38px !important;
  padding: 6px 0 !important;
  color: #fff !important;
  text-decoration: none !important;
  overflow-wrap: anywhere !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.3 !important;
}

body:not(.homepage) .site-footer nav a:hover,
body:not(.homepage) .site-footer nav a:focus-visible,
body:not(.homepage) .site-footer .brand:hover,
body:not(.homepage) .site-footer .brand:focus-visible {
  color: var(--spielvexa-chrome-aqua) !important;
  outline: 0 !important;
}

body:not(.homepage) .site-footer [data-consent-reopen] {
  justify-self: end !important;
  min-width: 190px !important;
  min-height: 48px !important;
  margin: 0 !important;
  padding: 10px 18px !important;
  border: 1px solid #fff !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #fff !important;
  cursor: pointer !important;
  font: 700 13px/1.2 "JetBrains Mono", "Spielvexa Local", ui-monospace, monospace !important;
}

body:not(.homepage) .site-footer [data-consent-reopen]:hover,
body:not(.homepage) .site-footer [data-consent-reopen]:focus-visible {
  border-color: var(--spielvexa-chrome-aqua) !important;
  background: var(--spielvexa-chrome-aqua) !important;
  color: #050505 !important;
  outline: 3px solid var(--spielvexa-chrome-aqua) !important;
  outline-offset: 3px !important;
}

/* The geometry block intentionally owns the white spacer above the Figma
   footer. The black surface belongs on the content block, not the spacer. */
footer[data-homepage-region="15-footer"] > [data-homepage-region-content] {
  background: #000 !important;
  color: #fff !important;
}

footer[data-homepage-region="15-footer"] {
  position: relative !important;
}

footer[data-homepage-region="15-footer"] .footer-theme-toggle {
  position: absolute !important;
  right: clamp(20px, 4vw, 64px) !important;
  bottom: 28px !important;
  z-index: 2 !important;
  min-height: 44px !important;
  margin: 0 !important;
  padding: 10px 18px !important;
  border: 1px solid #fff !important;
  border-radius: 999px !important;
  background: #000 !important;
  color: #fff !important;
  cursor: pointer !important;
  font: 700 13px/1.2 "JetBrains Mono", "Spielvexa Local", ui-monospace, monospace !important;
}

footer[data-homepage-region="15-footer"] .footer-theme-toggle:hover,
footer[data-homepage-region="15-footer"] .footer-theme-toggle:focus-visible {
  border-color: var(--spielvexa-chrome-aqua) !important;
  background: var(--spielvexa-chrome-aqua) !important;
  color: #050505 !important;
  outline: 3px solid var(--spielvexa-chrome-aqua) !important;
  outline-offset: 3px !important;
}

/* Cookie chrome is already structurally correct; harden it consistently. */
[data-consent-banner] {
  max-width: calc(100vw - 2rem) !important;
  max-height: calc(100dvh - 2rem) !important;
  overflow: auto !important;
}

@media (max-width: 980px) {
  body:not(.homepage) [data-helper-shell="header"] > .site-header,
  body:not(.homepage) .site-header {
    min-height: 88px !important;
    padding: 14px 20px !important;
    gap: 14px !important;
  }

  body:not(.homepage) .site-header .brand {
    min-width: 138px !important;
    min-height: 58px !important;
    padding-inline: 14px !important;
    font-size: 14px !important;
  }

  body:not(.homepage) .site-header .main-navigation a {
    padding-inline: 8px !important;
    font-size: 11px !important;
  }

  body:not(.homepage) .site-footer {
    grid-template-columns: minmax(190px, .7fr) minmax(0, 1.3fr) !important;
  }

  body:not(.homepage) .site-footer [data-consent-reopen] {
    grid-column: 1 / -1 !important;
    justify-self: start !important;
  }
}

@media (max-width: 640px) {
  body:not(.homepage) [data-helper-shell="header"] > .site-header,
  body:not(.homepage) .site-header {
    flex-wrap: wrap !important;
    min-height: 80px !important;
    padding: 14px 16px !important;
  }

  body:not(.homepage) .site-header .brand {
    min-width: 132px !important;
    min-height: 52px !important;
  }

  body:not(.homepage) .site-header .menu-toggle {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
  }

  body:not(.homepage) .site-header .main-navigation:not(.is-open):not([data-nav-panel-open]) {
    display: none !important;
  }

  body:not(.homepage) .site-header .main-navigation.is-open,
  body:not(.homepage) .site-header .main-navigation[data-nav-panel-open] {
    display: flex !important;
    flex: 0 0 100% !important;
    flex-direction: column !important;
    align-items: stretch !important;
    width: 100% !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 8px !important;
  }

  body:not(.homepage) .site-header .main-navigation a {
    justify-content: flex-start !important;
    min-height: 44px !important;
    padding: 10px 14px !important;
    font-size: 13px !important;
    white-space: normal !important;
  }

  body:not(.homepage) .site-footer {
    grid-template-columns: 1fr !important;
    padding: 38px 20px !important;
    gap: 30px !important;
    border-top-width: 6px !important;
  }

  body:not(.homepage) .site-footer nav {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px 18px !important;
  }

  body:not(.homepage) .site-footer [data-consent-reopen] {
    grid-column: auto !important;
    justify-self: stretch !important;
    width: 100% !important;
    min-width: 0 !important;
  }

  footer[data-homepage-region="15-footer"] .footer-theme-toggle {
    right: 20px !important;
    bottom: 20px !important;
  }

  footer[data-homepage-region="15-footer"] h2 {
    font-size: 26px !important;
    line-height: 1.18 !important;
    letter-spacing: -.035em !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: auto !important;
  }

  [data-consent-banner] {
    max-width: calc(100vw - 1.5rem) !important;
    max-height: calc(100dvh - 1.5rem) !important;
  }
}