:root {
  --header-h: 88px;
  --bg: #0b0f14;
  --bg2: #070a0e;
  --card: #0f1620;
  --card2: #0d141d;
  --text: #e9edf2;
  --muted: #a3adbb;
  --line: rgba(255, 255, 255, 0.10);
  --line2: rgba(255, 255, 255, 0.06);
  --accent: #ff7a18;
  --accent2: #ffb86b;

  /* Buttons */
  --btn-radius: 10px;
  --btn-py: 8px;
  --btn-px: 14px;
  --btn-font: 14px;
  --btn-min-h: 26px;
  --btn-weight: 700;
  --btn-border: 1px solid rgba(255, 255, 255, 0.10);
  --btn-trans: 180ms;

  /* Back-compat aliases (older rules) */
  --btn-pad-y: var(--btn-py);
  --btn-pad-x: var(--btn-px);
  --shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
  --radius: 22px;
  --radiusSm: 16px;
  --max: 1140px;
  --ease: cubic-bezier(.2, .9, .2, 1);

  --card-trans: 170ms;
  --card-ease: var(--ease);
}


* {
  box-sizing: border-box
}

/* Ensure the HTML hidden-attribute always wins over author display rules (e.g. flex rows). */
[hidden] {
  display: none !important
}

html,
html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji", "Segoe UI Emoji";
  background:
    radial-gradient(900px 500px at 20% 10%, rgba(255, 122, 24, 0.14), transparent 55%),
    radial-gradient(700px 420px at 80% 30%, rgba(130, 170, 255, 0.10), transparent 58%),
    linear-gradient(180deg, var(--bg), var(--bg2));
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  padding-top: var(--header-h);
}


a {
  color: inherit;
  text-decoration: none
}

img {
  max-width: 100%;
  display: block
}

code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace
}

.skip {
  position: absolute;
  left: -999px;
  top: 10px;
  background: var(--card);
  border: 1px solid var(--line);
  padding: 10px 12px;
  border-radius: 12px;
}

.skip:focus {
  left: 10px;
  z-index: 9999
}

.wrap {
  width: min(var(--max), calc(100% - 40px));
  margin: 0 auto
}

/* Topbar */
.topbar {
  position: fixed;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(10px);
  background: rgba(7, 10, 14, 0.55);
  border-bottom: 1px solid var(--line2);
  left: 0;
  right: 0;
  width: 100%;
}

.topbar .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 14px 0;
}

.brand {
  display: flex;
  align-items: center;
  min-width: auto;
}

.brandText {
  font-weight: 800;
  font-size: 21px;
  letter-spacing: 0.5px;
  color: var(--text);
  transition: color 200ms var(--ease), text-shadow 200ms var(--ease);
}

.brand:hover .brandText {
  color: var(--accent);
  text-shadow: 0 0 14px rgba(255, 122, 24, 0.45);
}


.nav {
  display: flex;
  gap: 18px;
  align-items: center
}

.nav a {
  color: var(--text-muted);
  font-weight: 600;
  font-size: 14px;
  padding: 10px 10px;
  /* keep it as plain text — no button/pill look */
  background: transparent;
  border: none;
  text-decoration: none;
  position: relative;
  transition: color 200ms var(--ease), text-shadow 200ms var(--ease);
}

/* Thick glow underline (single underline style) */
.nav a::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 4px;
  width: 70%;
  height: 2px;
  border-radius: 999px;
  background: rgba(249, 115, 22, .70);
  opacity: 0;
  transform: translateX(-50%) scaleX(.75);
  transform-origin: center;
  box-shadow: 0 0 10px rgba(249, 115, 22, .35), 0 0 18px rgba(249, 115, 22, .18);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease), box-shadow 180ms var(--ease);
}

.nav a:hover,
.nav a:focus-visible {
  color: var(--accent, #f97316);
  text-shadow: 0 0 8px rgba(249, 115, 22, .55), 0 0 18px rgba(249, 115, 22, .35), 0 0 32px rgba(249, 115, 22, .18);
}

.nav a:hover::after,
.nav a:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
  box-shadow: 0 0 12px rgba(249, 115, 22, .55), 0 0 26px rgba(249, 115, 22, .30);
}

/* Active/current: same vibe as hover, but a touch calmer and stable */
.nav a[aria-current='page'],
.nav a.active {
  color: var(--accent, #f97316);
  text-shadow: 0 0 8px rgba(249, 115, 22, .55),
    0 0 18px rgba(249, 115, 22, .35),
    0 0 32px rgba(249, 115, 22, .18);
}

.nav a[aria-current='page']::after,
.nav a.active::after {
  opacity: 1;
  transform: translateX(-50%) scaleX(1);
  box-shadow: 0 0 12px rgba(249, 115, 22, .55), 0 0 26px rgba(249, 115, 22, .30);
}


.topActions {
  display: flex;
  gap: 10px;
  align-items: center
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  align-items: center;
  justify-content: center;
  gap: 5px;
  flex-direction: column;
  padding: 0;
  cursor: pointer;
}

.burger span {
  display: block;
  width: 18px;
  height: 2px;
  background: rgba(233, 237, 242, 0.88);
  border-radius: 99px
}

.mobileMenu {
  border-top: 1px solid var(--line2);
  background: rgba(7, 10, 14, 0.70);
  padding: 12px 0 18px;
}

.mobileMenu .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;

  padding: var(--btn-py) var(--btn-px);
  min-height: var(--btn-min-h);

  border-radius: var(--btn-radius);
  font-size: var(--btn-font);
  font-weight: 700;
  line-height: 1;
  letter-spacing: 0.2px;

  cursor: pointer;
  user-select: none;
  text-decoration: none;

  border: var(--btn-border);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);

  transition:
    transform 150ms var(--ease),
    box-shadow 200ms var(--ease),
    background 200ms var(--ease),
    border-color 200ms var(--ease),
    color 200ms var(--ease);
}

.mobileMenu a {
  display: block;
  padding: 12px 0;
  color: rgba(233, 237, 242, 0.82);
  font-weight: 650;
}

.mobileActions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  min-height: 26px;
  border-radius: var(--btn-radius);
  font-size: var(--btn-font);
  font-weight: var(--btn-weight);
  line-height: 1.1;
  cursor: pointer;
  user-select: none;
  text-decoration: none;

  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text);

  transition:
    color var(--btn-trans) var(--ease),
    background var(--btn-trans) var(--ease),
    border-color var(--btn-trans) var(--ease),
    box-shadow var(--btn-trans) var(--ease),
    text-shadow var(--btn-trans) var(--ease);
}

.btn:hover {
  /* visual feedback only — no size/shape changes */
  transform: translateY(-1px);
  border-color: rgba(255, 255, 255, 0.16);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.28);
}

.btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 122, 24, 0.25);
}

.btn:active {
  transform: none;
}

.btn-primary {
  border: 1px solid transparent;
  background: linear-gradient(180deg, rgba(255, 122, 24, 0.95), rgba(255, 122, 24, 0.70));
  color: #fff;
  box-shadow: 0 10px 26px rgba(255, 122, 24, 0.18);
}

.btn-primary:hover {
  transform: translateY(-1px);
  filter: brightness(1.03);
  box-shadow: 0 14px 34px rgba(255, 122, 24, 0.22);
}

.btn-ghost {
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.10);
  color: var(--text);
  box-shadow: none;
}

.btn-ghost:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 122, 24, 0.35);
  color: var(--accent);
  text-shadow: 0 0 10px rgba(255, 122, 24, 0.22);
  background: rgba(255, 255, 255, 0.03);
}

.iconBtn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  cursor: pointer;
}

.iconBtn:hover {
  background: rgba(255, 255, 255, 0.06)
}

.link {
  color: rgba(233, 237, 242, 0.86);
  font-weight: 700
}

.link:hover {
  color: var(--text)
}

/* Hero */
.hero {
  position: relative;
  padding: 0px 0 10px;
}

.heroBg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(900px 500px at 15% 25%, rgba(255, 122, 24, 0.20), transparent 60%),
    radial-gradient(700px 460px at 85% 20%, rgba(130, 170, 255, 0.14), transparent 60%),
    radial-gradient(600px 440px at 60% 80%, rgba(255, 184, 107, 0.10), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 60%);
  pointer-events: none;
  mask-image: linear-gradient(180deg, black 65%, transparent);
}

.heroGrid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: 28px;
  align-items: stretch;
}

.kicker {
  display: inline-flex;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: rgba(255, 255, 255, 0.03);
  color: rgba(233, 237, 242, 0.80);
  font-weight: 700;
  font-size: 12px;
  align-self: flex-start;
  width: fit-content;
  max-width: 100%;
}

.heroCopy h1 {
  margin: 16px 0 12px;
  font-size: clamp(40px, 4.5vw, 64px);
  line-height: 1.02;
  letter-spacing: -0.02em;
}

.accent {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.lead {
  margin: 0 0 18px;
  color: rgba(233, 237, 242, 0.78);
  font-size: 16px;
  max-width: 54ch;
  line-height: 1.55;
}

.ctaRow {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px
}

.metaRow {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 14px
}

.pill {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: rgba(255, 255, 255, 0.03);
}

.dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25)
}

.heroPreview {
  position: relative;
}

.previewCard {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.02));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.previewTop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line2);
}

.previewTitle {
  font-weight: 800
}

.previewHint {
  color: rgba(233, 237, 242, 0.65);
  font-weight: 650;
  font-size: 12px
}

.previewMedia {
  position: relative;
  aspect-ratio: 16 / 9;
  background: rgba(0, 0, 0, 0.28);
}

.previewMedia img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.9
}

.previewMedia iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block
}

.glassBadge {
  position: absolute;
  left: 14px;
  top: 14px;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: rgba(10, 14, 20, 0.55);
  backdrop-filter: blur(10px);
  font-weight: 800;
  font-size: 12px;
}

.previewBottom {
  display: flex;
  gap: 10px;
  padding: 14px 16px 16px;
}

.previewBottom .btn {
  flex: 1
}

.heroSub {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.heroSubCard {
  border-radius: var(--radiusSm);
  border: 1px solid var(--line2);
  background: rgba(255, 255, 255, 0.03);
  padding: 14px 14px;
}

.heroSubTitle {
  color: rgba(233, 237, 242, 0.70);
  font-weight: 700;
  font-size: 12px
}

.heroSubValue {
  margin-top: 6px;
  font-weight: 900
}

/* Sections */
section[id] {
  scroll-margin-top: calc(var(--header-h) + 14px);
}

.section {
  padding: 90px 0
}

.sectionHead {
  margin-bottom: 22px
}

.sectionHead h2 {
  margin: 0;
  font-size: clamp(28px, 2.6vw, 38px);
  letter-spacing: -0.01em;
}

.sectionHead p {
  margin: 10px 0 0;
  color: rgba(233, 237, 242, 0.70);
  max-width: 70ch;
  line-height: 1.55
}


/* Setup teaser – 21:9 premium hero */
.setupHeroCard {
  --setup-hero-pos: 50% 38%;
  position: relative;
  overflow: hidden;
  cursor: pointer;

  border-color: rgba(255, 255, 255, 0.085);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.016));
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);

  aspect-ratio: 21 / 9;
  min-height: clamp(240px, 22vw, 420px);
  display: flex;
  align-items: flex-end;
  padding: clamp(16px, 2vw, 24px);

  transform: translateY(0);
  transition:
    transform 220ms var(--ease),
    box-shadow 220ms var(--ease),
    border-color 220ms var(--ease);
}

.setupHeroCard::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: var(--setup-hero-pos);
  background-size: cover;
  background-repeat: no-repeat;
  background-image: url("../img/setup-hero.jpg");
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1);
  transition: transform 380ms var(--ease);
  will-change: transform;
  opacity: 0.96;
  pointer-events: none;
}

@supports (background-image: image-set(url("../img/setup-hero.webp") type("image/webp") 1x)) {
  .setupHeroCard::before {
    background-image: image-set(url("../img/setup-hero.webp") type("image/webp") 1x,
        url("../img/setup-hero.jpg") type("image/jpeg") 1x);
  }
}

.setupHeroCard::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.18) 60%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle at 18% 78%, rgba(0, 0, 0, 0.44), rgba(0, 0, 0, 0) 56%);
  pointer-events: none;
}

.setupHeroContent {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: 52ch;
}

.setupHeroMeta {
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(233, 237, 242, 0.78);
  text-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.setupHeroBtn {
  align-self: flex-start;
  min-height: 40px;
  padding: 10px 16px;
}

.setupHeroCard:hover {
  border-color: rgba(255, 122, 24, 0.26);
  background:
    radial-gradient(520px 220px at 10% 50%, rgba(255, 122, 24, 0.20), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035));
  box-shadow:
    0 22px 60px rgba(243, 102, 8, 0.55),
    0 0 0 1px rgba(255, 122, 24, 0.10) inset;
  transform: translateY(-1px);
}

.setupHeroCard:hover::before {
  transform: scale(1.03);
}

.setupHeroCard:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 122, 24, 0.25), 0 24px 70px rgba(0, 0, 0, 0.48);
  border-color: rgba(255, 122, 24, 0.38);
}

@media (max-width: 980px) {
  .setupHeroCard {
    --setup-hero-pos: 50% 34%;
    min-height: clamp(230px, 32vw, 380px);
  }
}

@media (max-width: 560px) {
  .setupHeroCard {
    --setup-hero-pos: 50% 30%;
    min-height: 280px;
  }

  .setupHeroBtn {
    min-height: 44px;
    padding: 12px 16px;
  }
}

@media (prefers-reduced-motion: reduce) {

  .setupHeroCard,
  .setupHeroCard::before {
    transition: none !important;
  }

  .setupHeroCard:hover {
    transform: none;
  }

  .setupHeroCard:hover::before {
    transform: none;
  }
}


/* Setup page – match setup hero aesthetic */
.setupPageMeta {
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(233, 237, 242, 0.72);
}

/* Setup – Kategorie-Kacheln: identisches Responsive-Verhalten wie die Setup-Items */
.setupCatGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

@media (max-width: 980px) {
  .setupCatGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .setupCatGrid {
    grid-template-columns: 1fr;
  }
}


.setupCatCard {
  --setup-cat-img: none;
  --setup-cat-pos: 50% 42%;
  position: relative;
  overflow: hidden;
  text-decoration: none;
  cursor: pointer;

  border-radius: var(--radius);
  border: 1px solid rgba(255, 255, 255, 0.085);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);

  /*
    Responsive fix:
    Avoid an implicit minimum width created by (aspect-ratio + high min-height).
    That combo prevents the cards from shrinking like the setup items and makes
    them visually "push into each other" in certain width ranges.

    We keep the premium, large cover look via an explicit height clamp instead.
  */
  height: clamp(180px, 18vw, 240px);
  min-height: 0;
  aspect-ratio: auto;
  width: 100%;
  min-width: 0;
  display: flex;
  align-items: flex-end;
  padding: clamp(14px, 1.6vw, 18px);

  transform: translateY(0);
  transition:
    transform 220ms var(--ease),
    box-shadow 220ms var(--ease),
    border-color 220ms var(--ease);
}

.setupCatCard::before {
  content: "";
  position: absolute;
  inset: 0;
  background-position: var(--setup-cat-pos, 50% 50%);
  background-size: cover;
  background-repeat: no-repeat;
  /* Category image sits under the premium gradients (same behavior as the setup hero). */
  background-image:
    radial-gradient(circle at 18% 78%, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 56%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.012)),
    var(--setup-cat-img);
  filter: saturate(1.05) contrast(1.02);
  transform: scale(1);
  transition: transform 380ms var(--ease);
  will-change: transform;
  opacity: 0.96;
  pointer-events: none;
}

/* Category-specific premium backgrounds (subtle, non-retail) */
.setupCatCard--pc::before {
  background-image:
    radial-gradient(circle at 18% 78%, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 56%),
    radial-gradient(circle at 72% 18%, rgba(255, 122, 24, 0.14), rgba(0, 0, 0, 0) 58%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.012)),
    var(--setup-cat-img);
}

.setupCatCard--kamera::before {
  background-image:
    radial-gradient(circle at 18% 78%, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 56%),
    radial-gradient(circle at 70% 22%, rgba(85, 140, 255, 0.12), rgba(0, 0, 0, 0) 58%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.012)),
    var(--setup-cat-img);
}

.setupCatCard--audio::before {
  background-image:
    radial-gradient(circle at 18% 78%, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0) 56%),
    radial-gradient(circle at 70% 22%, rgba(152, 94, 255, 0.12), rgba(0, 0, 0, 0) 58%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.012)),
    var(--setup-cat-img);
}

.setupCatCard::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(0deg, rgba(0, 0, 0, 0.72) 0%, rgba(0, 0, 0, 0.22) 56%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(circle at 18% 78%, rgba(0, 0, 0, 0.44), rgba(0, 0, 0, 0) 56%);
  pointer-events: none;
}

/* Setup cover card thumbnails (category images) */
.setupCatMedia {
  position: absolute;
  inset: 12px 12px auto 12px;
  height: 56%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  z-index: 1;
  pointer-events: none;
}

.setupCatThumb {
  width: min(260px, 88%);
  height: 100%;
  object-fit: contain;
  opacity: 0.96;
  filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.55));
  transform: translateY(-2px);
}

.setupCatContent {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 48ch;
}

.setupCatMeta {
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(233, 237, 242, 0.78);
  text-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.setupCatTitle {
  font-weight: 900;
  letter-spacing: -0.01em;
  font-size: 18px;
  color: rgba(233, 237, 242, 0.96);
  text-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.setupCatSub {
  color: rgba(233, 237, 242, 0.70);
  line-height: 1.35;
  text-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}

.setupCatCard:hover {
  border-color: rgba(255, 122, 24, 0.26);
  background:
    radial-gradient(520px 220px at 10% 50%, rgba(255, 122, 24, 0.20), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035));
  box-shadow:
    0 22px 60px rgba(243, 102, 8, 0.55),
    0 0 0 1px rgba(255, 122, 24, 0.10) inset;
  transform: translateY(-1px);
}

.setupCatCard:hover::before {
  transform: scale(1.03);
}

.setupCatCard:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 122, 24, 0.25), 0 24px 60px rgba(0, 0, 0, 0.46);
  border-color: rgba(255, 122, 24, 0.38);
}

@media (prefers-reduced-motion: reduce) {

  .setupCatCard,
  .setupCatCard::before {
    transition: none !important;
  }

  .setupCatCard:hover {
    transform: none;
  }

  .setupCatCard:hover::before {
    transform: none;
  }
}


/* Setup One-Page – Equipment Portfolio */
.material-symbols-rounded {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: 20px;
  line-height: 1;
  vertical-align: middle;
}

.setupMiniNav {
  position: sticky;
  top: calc(var(--header-h) + 10px);
  z-index: 25;

  /* Hidden by default – becomes visible only after the cover navigation scrolls out. */
  max-height: 0;
  overflow: hidden;
  margin-top: 0;
  margin-bottom: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition:
    max-height 260ms var(--ease),
    opacity 200ms var(--ease),
    transform 200ms var(--ease),
    margin 200ms var(--ease);
}

.setupMiniNav[data-visible="1"] {
  max-height: 140px;
  margin-top: 16px;
  margin-bottom: 26px;
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

.setupMiniNavInner {
  display: inline-flex;
  gap: 10px;
  padding: 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(0, 0, 0, 0.28);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.36);
}

.setupTab {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.01em;
  color: rgba(233, 237, 242, 0.82);
  background: transparent;
  border: 1px solid transparent;
  transition: background 180ms var(--ease), border-color 180ms var(--ease), color 180ms var(--ease);
}

.setupTab:hover {
  color: rgba(233, 237, 242, 0.94);
  background: rgba(255, 255, 255, 0.04);
  border-color: rgba(255, 255, 255, 0.10);
}

.setupTab:focus-visible {
  outline: none;
  border-color: rgba(255, 122, 24, 0.38);
  box-shadow: 0 0 0 3px rgba(255, 122, 24, 0.20);
}

.setupSection {
  margin-top: 36px;
}

.setupSectionHead {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}

.setupSectionHeading {
  min-width: 0
}

.setupSectionNote {
  margin-top: 6px;
  color: rgba(233, 237, 242, 0.66);
  line-height: 1.35;
  max-width: 68ch;
}

.setupSectionHead h3 {
  margin: 0;
  font-size: 20px;
  letter-spacing: -0.01em;
}

.setupCount {
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: rgba(233, 237, 242, 0.55);
  white-space: nowrap;
}

.setupItemGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.setupHighlightGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.setupItemCard {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  text-decoration: none;
  cursor: pointer;

  border-radius: var(--radiusSm);
  border: 1px solid rgba(255, 255, 255, 0.085);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.014));
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.30);

  transform: translateY(0);
  transition:
    transform 220ms var(--ease),
    box-shadow 220ms var(--ease),
    border-color 220ms var(--ease);
}

.setupItemCard--highlight {
  padding: 16px;
  min-height: 92px;
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.016));
  box-shadow: 0 18px 46px rgba(0, 0, 0, 0.34);
}

.setupItemCard:hover {
  transform: none;
  border-color: rgba(255, 122, 24, 0.28);
  box-shadow: 0 18px 45px rgba(243,102,8,.35);
}

.setupItemCard:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 122, 24, 0.25), 0 18px 44px rgba(0, 0, 0, 0.38);
  border-color: rgba(255, 122, 24, 0.38);
}

.setupItemCard--static {
  cursor: default;
}

.setupItemCard--static:hover {
  transform: none;
  border-color: rgba(255, 255, 255, 0.085);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.30);
}

.setupItemIcon {
  width: 38px;
  height: 38px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;

  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.03);
}

.setupItemIcon .material-symbols-rounded {
  font-size: 20px;
  color: rgba(233, 237, 242, 0.90);
}

.setupItemBody {
  min-width: 0;
}

.setupItemLabel {
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: rgba(233, 237, 242, 0.62);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.setupItemTitle {
  margin-top: 4px;
  font-weight: 900;
  font-size: 14px;
  line-height: 1.25;
  color: rgba(233, 237, 242, 0.92);
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.setupItemAction {
  margin-left: auto;
  opacity: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 6px;
  transform: translateY(1px);
  transition: opacity 180ms var(--ease), transform 180ms var(--ease);
  color: rgba(233, 237, 242, 0.72);
}

.setupItemActionText {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.setupItemCard:hover .setupItemAction,
.setupItemCard:focus-visible .setupItemAction {
  opacity: 0.92;
  transform: translateY(0);
}

.setupItemAction .material-symbols-rounded {
  font-size: 18px;
}

@media (max-width: 980px) {
  .setupItemGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .setupHighlightGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .setupItemGrid {
    grid-template-columns: 1fr;
  }

  .setupHighlightGrid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  .setupItemCard {
    transition: none !important;
  }

  .setupItemCard:hover {
    transform: none;
  }
}


.card {
  margin-bottom: 10px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}

.card-pad {
  padding: 18px
}

.card h3 {
  margin: 0 0 10px;
  font-size: 18px
}

.muted {
  color: rgba(233, 237, 242, 0.65)
}

.small {
  font-size: 12px
}

.split {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 18px;
  align-items: stretch;
}

.bullets {
  margin: 10px 0 0;
  padding-left: 18px;
  color: rgba(233, 237, 242, 0.78)
}

.bullets li {
  margin: 8px 0
}

.aboutText {
  max-width: 66ch;
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
}

.aboutText p {
  margin: 0 0 16px;
  line-height: 1.72;
  color: rgba(233, 237, 242, 0.78)
}

/* About – premium polish */
.nameAccent {
  color: var(--accent);
  font-weight: 600;
  text-shadow: 0 0 12px rgba(249, 115, 22, 0.12);
}

#about .aboutCard {
  padding: clamp(18px, 2.2vw, 26px);
  position: relative;
  overflow: hidden;
  border-color: rgba(255, 255, 255, 0.085);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.04), rgba(255, 255, 255, 0.016));
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.30);
}

#about .aboutCard::before {
  content: "";
  position: absolute;
  inset: -40% -30% auto -30%;
  height: 220px;
  background: radial-gradient(circle at 30% 40%, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0));
  pointer-events: none;
}

.aboutText p:last-child {
  margin-bottom: 0
}

.miniCta {
  margin-top: 14px
}

.portrait {
  position: relative;
  overflow: hidden;
  min-height: 320px;
}

.portrait picture {
  display: block;
  width: 100%;
  height: 100%
}

.portrait img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Editorial framing: eyes/face sit slightly above center */
  object-position: 50% 22%;
  opacity: 0.98;
}

.portraitOverlay {
  position: absolute;
  inset: auto 0 0 0;
  padding: 16px;
  background: linear-gradient(180deg, transparent, rgba(7, 10, 14, 0.75));
}

.portraitLabel {
  font-weight: 900
}

.portraitSub {
  color: rgba(233, 237, 242, 0.70);
  margin-top: 4px
}

.grid3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px
}

.tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: rgba(255, 255, 255, 0.03);
  font-weight: 800;
  font-size: 12px;
  color: rgba(233, 237, 242, 0.80);
}

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

.chip {
  padding: 7px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 122, 24, 0.35);
  background: rgba(255, 122, 24, 0.12);
  font-weight: 900;
  font-size: 12px
}

.schedule {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px
}

.scheduleGrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 10px;
  margin-top: 12px
}

.day {
  border: 1px solid var(--line2);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding: 10px;
  min-height: 86px;
}

.dayName {
  font-weight: 900;
  font-size: 12px;
  color: rgba(233, 237, 242, 0.78)
}

.dayTime {
  margin-top: 10px;
  font-weight: 950;
  font-size: 13px
}

.dayGame {
  margin-top: 6px;
  color: rgba(233, 237, 242, 0.62);
  font-size: 12px
}

/* Schedule (S6): skeleton + week list */
.scheduleSkeleton {
  display: flex;
  flex-direction: column;
  gap: 10px
}

.skLine {
  height: 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  overflow: hidden
}

.skLine::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.09), transparent);
  animation: sk 1.2s infinite
}

@keyframes sk {
  100% {
    transform: translateX(100%)
  }
}

.skLine--title {
  height: 18px;
  width: 72%
}

.skLine--short {
  width: 46%
}

.skLine--day {
  height: 14px;
  width: 58%
}

/* Schedule (S6.1): horizontal 7-day cards */
.weekRow {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding-bottom: 6px;
  align-items: stretch;
  -webkit-overflow-scrolling: touch;

  /* Firefox (scoped): thin + subtle */
  scrollbar-width: thin;
  /* Premium: keep it visible, but very low contrast */
  scrollbar-color: rgba(255, 255, 255, 0.12) rgba(255, 255, 255, 0.02);
}

.weekRow--skeleton {
  pointer-events: none
}

/* Week-Row overflow hint: subtle left/right fades (scoped to schedule week section) */
.weekRowWrap {
  position: relative
}

.weekRowFade {
  position: absolute;
  top: 0;
  bottom: 14px;
  width: 38px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms var(--ease);
  z-index: 2;
}

.weekRowFade--left {
  left: 0;
  background: linear-gradient(90deg, rgba(11, 15, 20, 0.92), rgba(11, 15, 20, 0))
}

.weekRowFade--right {
  right: 0;
  background: linear-gradient(270deg, rgba(11, 15, 20, 0.92), rgba(11, 15, 20, 0))
}

.weekRowWrap.has-left .weekRowFade--left {
  opacity: 1
}

.weekRowWrap.has-right .weekRowFade--right {
  opacity: 1
}

@media (max-width: 740px) {
  .weekRowFade {
    width: 32px
  }
}

/* WebKit (Chrome/Edge/Safari) – scoped, premium + unobtrusive */
.weekRow::-webkit-scrollbar {
  height: 6px
}

.weekRow::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.02);
  border-radius: 999px;
}

.weekRow::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.10);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}

.weekRow::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.15);
  background-clip: padding-box
}

.weekRow::-webkit-scrollbar-thumb:active {
  background: rgba(255, 255, 255, 0.20);
  background-clip: padding-box
}

/* Week card: keep a premium, compact line length on wide screens (same visual rhythm as other featured cards) */
.scheduleWeekCard {
  padding: 16px;
  width: 100%;
  /* Align to the same content width as other sections (.wrap controls max width). */
  max-width: var(--max);
  margin-inline: 0;
}

.dayCard {
  flex: 0 0 220px;
  min-width: 220px;
  border: 1px solid var(--line2);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding: 10px;
  display: flex;
  flex-direction: column
}

@media (max-width: 740px) {
  .dayCard {
    flex-basis: 200px;
    min-width: 200px
  }
}

/* Optional (feature-flagged): week-row scroll snapping */
.weekRow.weekSnap--proximity {
  scroll-snap-type: x proximity
}

.weekRow.weekSnap--mandatory {
  scroll-snap-type: x mandatory
}

.weekRow.weekSnap--proximity .dayCard,
.weekRow.weekSnap--mandatory .dayCard {
  scroll-snap-align: start;
  scroll-snap-stop: normal
}

/* Remove the “lonely” left stroke that can appear before the first card (it’s just the first card's left border in the card padding gutter). */
.weekRow>.dayCard:first-child {
  border-left: 0
}

.dayCardHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px
}

.dayCardLabel {
  font-weight: 950;
  color: rgba(233, 237, 242, 0.82)
}

.dayCardBody {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1
}

.eventCard {
  border: 1px solid var(--line2);
  background: rgba(255, 255, 255, 0.02);
  border-radius: 14px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px
}

.eventTime {
  font-weight: 950;
  font-size: 12px;
  color: rgba(233, 237, 242, 0.86)
}

.eventTitle {
  font-weight: 950;
  line-height: 1.15;
  color: rgba(233, 237, 242, 0.80)
}

.eventCat {
  font-size: 12px;
  color: rgba(233, 237, 242, 0.58)
}

.eventCard--cancelled {
  opacity: 0.6;
  text-decoration: line-through
}

.eventCard--soft {
  border-color: rgba(255, 122, 24, 0.35);
  background: rgba(255, 122, 24, 0.08)
}

.dayEmpty {
  margin-top: 2px;
  padding: 10px;
  border-radius: 14px;
  border: 1px dashed rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.015);
  color: rgba(233, 237, 242, 0.68)
}

.dayEmptyTitle {
  font-weight: 950;
  margin-bottom: 6px
}

.dayEmptyText {
  color: rgba(233, 237, 242, 0.58)
}

.dayEmpty a {
  color: var(--accent);
  text-decoration: none
}

.dayEmpty a:hover {
  text-decoration: underline
}

.dayCard--skeleton .skLine {
  opacity: 0.9
}

.weekList {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 12px
}

.weekDay {
  border: 1px solid var(--line2);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 16px;
  padding: 12px
}

.weekDayHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px
}

.weekDayLabel {
  font-weight: 900;
  color: rgba(233, 237, 242, 0.82)
}

.weekChips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.weekChip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--line2);
  background: rgba(255, 255, 255, 0.02);
  font-size: 12px;
  font-weight: 850;
  max-width: 100%
}

.weekChipTime {
  font-weight: 950;
  color: rgba(233, 237, 242, 0.85)
}

.weekChipTitle {
  color: rgba(233, 237, 242, 0.65);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px
}

.weekMore {
  border: 1px solid var(--line2);
  background: rgba(255, 255, 255, 0.02);
  color: rgba(233, 237, 242, 0.80);
  border-radius: 999px;
  padding: 8px 10px;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer
}

.weekMore:hover {
  border-color: rgba(255, 122, 24, 0.28)
}

.chip--soft {
  border-color: rgba(255, 122, 24, 0.35);
  background: rgba(255, 122, 24, 0.12)
}

.chip--cancelled {
  border-color: rgba(255, 255, 255, 0.15);
  background: rgba(255, 255, 255, 0.04);
  opacity: 0.7;
  text-decoration: line-through
}

.weekChip--soft {
  border-color: rgba(255, 122, 24, 0.35);
  background: rgba(255, 122, 24, 0.10)
}

.weekChip--cancelled {
  border-color: rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.02);
  opacity: 0.55;
  text-decoration: line-through
}

/* Social */
.socialGrid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 12px;
  padding: 0px 0 70px;
}

/* Social links: equal tiles, centered icon + label */
.socialCard {
  display: flex;
  position: relative;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 16px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  /* Subtle card-level contrast help behind the icon (allowed: part of card background, not a nested badge) */
  background:
    radial-gradient(260px 160px at 50% 34%, rgba(255, 255, 255, 0.06), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
  text-decoration: none;
  color: var(--text);
  transition:
    transform 200ms var(--ease),
    border-color 200ms var(--ease),
    background 200ms var(--ease),
    box-shadow 200ms var(--ease);
}

.socialCard:hover {
  border-color: rgba(255, 122, 24, 0.26);
  background:
    radial-gradient(520px 220px at 10% 50%, rgba(255, 122, 24, 0.20), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035));
  box-shadow:
    0 22px 60px rgba(243, 102, 8, 0.55),
    0 0 0 1px rgba(255, 122, 24, 0.10) inset;
  transform: translateY(-1px);
  z-index: 2;
}

.socialCard:active {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
}

.socialCard:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 122, 24, 0.25), 0 12px 28px rgba(0, 0, 0, 0.28);
  border-color: rgba(255, 122, 24, 0.35);
}

/* Logos render directly on the card background (no nested badge/container; no effects on the SVG) */
.socialLogo {
  display: block;
  object-fit: contain;
  /* no filter/shadow/outline/glow on the logo */
  filter: none;
  width: auto;
  height: 56px;
  max-width: 100%;
  max-height: 56px;
}

/* Optical normalization: YouTube may be scaled slightly to match perceived weight */
.socialCard[data-platform-key="youtube"] .socialLogo {
  transform: scale(1.15);
  transform-origin: center;
}


/* Size hierarchy per tier (visually ~56px primary, ~44px secondary) */
.socialName {
  font-weight: 900;
  line-height: 1.15;
}

/* Grid spans */
.socialCard.socialCard@media (max-width: 980px) {
  .socialGrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}


@media (max-width: 740px) {
  .socialGrid {
    grid-template-columns: 1fr;
  }
}


/* Community CTA */
.communityCta {
  margin-top: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 18px;
  border-radius: var(--radius);
  border: 1px solid rgba(255, 122, 24, 0.25);
  background: radial-gradient(900px 240px at 20% 20%, rgba(255, 122, 24, 0.18), transparent 55%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.015));
}

/* Community (MVP): keep copy tight + readable without layout shifts */
#community .card p.muted {
  margin: 0;
  line-height: 1.55;
  text-wrap: pretty
}

#community .communityCta p.muted {
  margin: 10px 0 0;
  line-height: 1.55;
  text-wrap: pretty
}

/* Setup */
.product {
  overflow: hidden
}

.productImg {
  height: 140px;
  background:
    radial-gradient(260px 140px at 30% 40%, rgba(255, 122, 24, 0.22), transparent 60%),
    radial-gradient(260px 140px at 70% 30%, rgba(130, 170, 255, 0.12), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.01));
  border-bottom: 1px solid var(--line2);
}

.productBody {
  padding: 16px
}

.productTitle {
  font-weight: 950
}

.fineprint {
  margin-top: 14px;
  color: rgba(233, 237, 242, 0.55);
  font-size: 12px
}

/* Footer */
.footer {
  padding: 32px 0 44px;
  border-top: 1px solid var(--line2);
  background: rgba(7, 10, 14, 0.45);
}

.footerGrid{
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: start;
  gap: 24px;
}


.footerBrand {
  font-weight: 950;
  margin-bottom: 6px
}

.footerLinks{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 2px; /* optional: Micro-Alignment */
}

footerLinks a{
  color: rgba(233, 237, 242, 0.75);
  font-weight: 700;
  text-decoration: none;
  text-underline-offset: 4px;
  justify-content: flex-start;
}

.footerLinks a:hover{
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: rgba(255,122,24,.65);
}

.footerLinks a:focus-visible{
  outline: 2px solid rgba(255,122,24,.55);
  outline-offset: 3px;
  border-radius: 10px;
}

.footerBrand { margin-bottom: 8px; }
.footer .muted { line-height: 1.5; }
.footer .muted.small { margin-top: 6px; }

/* Privacy sheet */
.privacySheet {
  position: fixed;
  inset: 0;
  z-index: 100
}

.privacyBackdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55)
}

.privacyPanel {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: min(520px, calc(100% - 40px));
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: rgba(15, 22, 32, 0.92);
  backdrop-filter: blur(16px);
  box-shadow: var(--shadow);
}

.privacyHead {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--line2)
}

.privacyTitle {
  font-weight: 950
}

.privacyBody {
  padding: 14px 16px 16px
}

.toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  font-weight: 800
}

.toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none
}

.toggleUi {
  width: 46px;
  height: 28px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.06);
  position: relative;
  flex: 0 0 auto;
  transition: background 200ms var(--ease), border-color 200ms var(--ease);
}

.toggleUi::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 4px;
  width: 20px;
  height: 20px;
  border-radius: 999px;
  background: rgba(233, 237, 242, 0.90);
  transition: transform 220ms var(--ease), background 200ms var(--ease);
}

.toggle input:checked+.toggleUi {
  background: rgba(255, 122, 24, 0.16);
  border-color: rgba(255, 122, 24, 0.35)
}

.toggle input:checked+.toggleUi::after {
  transform: translateX(18px);
  background: var(--accent2)
}

.privacyActions {
  display: flex;
  gap: 10px;
  margin-top: 14px
}

.privacyActions .btn {
  flex: 1
}

/* Reveal */
.reveal {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 600ms var(--ease), transform 650ms var(--ease)
}

.reveal.is-in {
  opacity: 1;
  transform: translateY(-1)
}

/* Responsive */
@media (max-width: 980px) {
  .heroGrid {
    grid-template-columns: 1fr;
    gap: 18px
  }

  .split {
    grid-template-columns: 1fr
  }

  .portrait {
    min-height: 280px;
    aspect-ratio: 4 / 5
  }

  .schedule {
    grid-template-columns: 1fr
  }

  .grid3 {
    grid-template-columns: 1fr
  }

  .heroSub {
    grid-template-columns: 1fr 1fr
  }
}

/* Switch to burger before the header nav starts to wrap */
@media (max-width: 935px) {

  .nav,
  .topActions {
    display: none
  }

  .burger {
    display: inline-flex
  }
}

@media (max-width: 740px) {
  .hero {
    padding-top: 48px
  }

  .section {
    padding: 56px 0
  }

  .scheduleGrid {
    grid-template-columns: repeat(2, 1fr)
  }

  .heroSub {
    grid-template-columns: 1fr
  }

  .footerGrid{
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .footerLinks{
    width: 100%;
    justify-content: flex-start;
    gap: 12px 18px;
  }

  .communityCta {
    flex-direction: column;
    align-items: flex-start
  }
}

@media (max-width: 480px){
  .footerLinks{
    flex-direction: column;
    gap: 10px;
    align-items: flex-start;
  }
}

/* NAV-HOVER-002: Header nav links – text-only hover/active (no background, no border, no layout shift) */
header nav a {
  text-decoration: none;
}

header nav a,
.main-nav a {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  position: relative;
  transition: color 160ms ease, text-shadow 160ms ease;
  text-decoration: none;
}

header nav a:hover,
header nav a:focus-visible,
header nav a[aria-current='true'],
header nav a[aria-current='page'],
header nav a.active,
.main-nav a:hover,
.main-nav a:focus-visible,
.main-nav a[aria-current='true'],
.main-nav a[aria-current='page'],
.main-nav a.active {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: var(--accent, #f97316) !important;
  text-shadow: 0 0 6px rgba(249, 115, 22, .55),
    0 0 14px rgba(249, 115, 22, .35),
    0 0 26px rgba(249, 115, 22, .22);
}

/* underline beam (no layout shift because it's absolutely positioned) */
header nav a::after,
.main-nav a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -10px;
  height: 2px;
  opacity: 0;
  transform: scaleX(.65);
  transition: opacity 160ms ease, transform 160ms ease;
  pointer-events: none;
}

header nav a:hover::after,
header nav a:focus-visible::after,
header nav a[aria-current='true']::after,
header nav a[aria-current='page']::after,
header nav a.active::after,
.main-nav a:hover::after,
.main-nav a:focus-visible::after,
.main-nav a[aria-current='true']::after,
.main-nav a[aria-current='page']::after,
.main-nav a.active::after {

  opacity: 1;
  transform: scaleX(1);
  background: linear-gradient(90deg, transparent, rgba(249, 115, 22, .95), transparent);
  box-shadow: 0 0 10px rgba(249, 115, 22, .45);
}

/* BTN-STD-001: enforce compact, non-pill buttons */
/* .btn,
.btn:hover,
.btn-primary:hover,
.btn-ghost:hover {
  transform: none;
} */


/* HERO: Profile card + stream status */
.profileWrap {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.profileCard {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  min-height: 74px;
  border-radius: 20px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.035);
  color: var(--text);
  text-decoration: none;
  box-shadow: 0 12px 34px rgba(0, 0, 0, 0.38);
  transition: transform var(--card-trans) var(--card-ease), opacity var(--card-trans) var(--card-ease), box-shadow var(--card-trans) var(--card-ease), background var(--card-trans) var(--card-ease), border-color var(--card-trans) var(--card-ease);
  will-change: transform;
}


.profileCard:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 122, 24, 0.22);
  background: rgba(255, 255, 255, 0.045);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.46);
}


.profileCard:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 122, 24, 0.35), 0 16px 40px rgba(0, 0, 0, 0.45);
}

.avatarWrap {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  padding: 2px;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(255, 255, 255, 0.04);
}


.avatarWrap img {
  width: 100%;
  height: 100%;
  border-radius: 999px;
  display: block;
  object-fit: cover;
  background: rgba(255, 255, 255, 0.06);
}


.profileMain {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

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

.profileName {
  font-weight: 800;
  letter-spacing: 0.2px;
  font-size: 16px;
  line-height: 1.1;
}

.statusPill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 11px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 12px;
  color: rgba(235, 235, 245, 0.72);
  background: rgba(255, 255, 255, 0.03);
  white-space: nowrap;
}


.statusDot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.35);
}


.statusPill[data-state="live"] {
  color: rgba(220, 255, 230, 0.96);
  border-color: rgba(34, 197, 94, 0.38);
  background: rgba(34, 197, 94, 0.12);
}


.statusPill[data-state="live"] .statusDot {
  background: rgba(34, 197, 94, 0.98);
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.14);
  animation: liveDotPulse 1.8s ease-in-out infinite;
}


.profileGame {
  margin-top: 4px;
  font-size: 13px;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Optional stream title (hero only; sticky hides it) */
.profileTitle {
  margin-top: 6px;
  font-size: 13px;
  color: rgba(233, 237, 242, 0.78);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.profileNext {
  display: block;
  margin-top: 6px;
  font-size: 12px;
  font-weight: 800;
  color: rgba(233, 237, 242, 0.70)
}

.profileNext strong {
  color: rgba(233, 237, 242, 0.86);
  font-weight: 950
}

.profileCardPlaceholder {
  height: 0px;
}

.profileCard.is-sticky {
  --card-trans: 780ms;
  --card-ease: cubic-bezier(0.16, 1, 0.3, 1);
  position: fixed;
  top: calc(var(--header-h) + 12px);
  left: 0;
  right: 0;
  margin: 0 auto;
  transform: none;
  width: min(560px, calc(100% - 28px));
  z-index: 60;
  padding: 10px 12px;
  border-radius: 16px;

  /* Glass optic */
  background: rgba(10, 12, 16, 0.10);
  -webkit-backdrop-filter: blur(12px) saturate(1.15);
  backdrop-filter: blur(12px) saturate(1.15);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.45);
}

/* While animating between hero <-> sticky via FLIP, avoid hover transforms fighting the animation */
.profileCard.is-animating,
.profileCard.is-animating:hover {
  transform: none !important;
}

/* Sticky avatar should match the original compact "push" look */
.profileCard.is-sticky .avatarWrap {
  width: 86px;
  height: 86px;
}

.profileCard.is-sticky .profileName {
  font-size: 15px;
}

.profileCard.is-sticky .statusPill {
  padding: 6px 9px;
}

/* Sticky should stay compact and never show long titles */
.profileCard.is-sticky .profileTitle {
  display: none;
}

/* During FLIP animation we lock hover transforms to avoid jitter */
.profileCard.is-animating,
.profileCard.is-animating:hover {
  transition: none !important;
  transform: none !important;
}



/*
  HERO-PROFILE-CARD-POLISH-003
  Premium-Override (am Dateiende), damit die Profilkachel sichtbar „wertiger“ wirkt.
*/
.profileCard.profileCard--premium {
  padding: 16px 18px;
  min-height: 84px;
  gap: 16px;
  border-radius: 22px;
  border-color: rgba(255, 255, 255, 0.12);
  background:
    radial-gradient(420px 180px at 10% 50%, rgba(255, 122, 24, 0.16), transparent 60%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.03));
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.50),
    inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.profileCard.profileCard--premium:hover {
  border-color: rgba(255, 122, 24, 0.26);
  background:
    radial-gradient(520px 220px at 10% 50%, rgba(255, 122, 24, 0.20), transparent 62%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.035));
  box-shadow:
    0 22px 60px rgba(243, 102, 8, 0.55),
    0 0 0 1px rgba(255, 122, 24, 0.10) inset;
  transform: translateY(-1px);
}

.profileCard.profileCard--premium:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255, 122, 24, 0.32),
    0 22px 60px rgba(0, 0, 0, 0.55);
}

.profileCard.profileCard--premium .avatarWrap {
  width: 54px;
  height: 54px;
  padding: 2px;
  border-color: rgba(255, 255, 255, 0.14);
  background: rgba(255, 255, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.35);
}

.profileCard.profileCard--premium .avatarWrap img {
  background: rgba(255, 255, 255, 0.06);
}

.profileCard.profileCard--premium .profileName {
  font-weight: 800;
  letter-spacing: 0.2px;
}

/* CTA-Hierarchie (003): Preview-CTA nutzt Ghost-Style (HTML-klasse), Nav bleibt Primary */

/* Preview hint: only show when text exists (e.g., Blockiert) */
.previewHint:empty {
  display: none;
}



/* Hero copy stays clean (profile card moved into right "Stream Hub" card) */
.heroCopy {
  display: block;
}

/* Align right hero module with the headline (not the kicker) on wide screens */
@media (min-width: 981px) {
  .heroPreview {
    padding-top: 56px;
  }

  .heroGrid {
    gap: 34px;
  }

  .hero {
    padding-top: 74px;
  }
}

/* Stream Hub layout inside the right card */
.profileWrap.profileWrap--hub {
  margin: 0;
  gap: 12px;
}

.profileCard.profileCard--hub {
  width: 100%;
  padding: 22px 22px;
  min-height: 220px;
  border-radius: 24px;
}

.profileCard.profileCard--hub .avatarWrap {
  width: 148px;
  height: 148px;
}

/* Hub-card sticky override: shrink avatar back to compact size */
.profileCard.profileCard--hub.is-sticky .avatarWrap {
  width: 86px;
  height: 86px;
}

.profileCard.profileCard--hub .profileName {
  font-size: 18px;
}

.profileCard.profileCard--hub .profileGame {
  font-size: 14px;
  margin-top: 8px;
}

.profileCard.profileCard--hub .profileTitle {
  font-size: 14px;
  margin-top: 10px;
}

.profileCard.profileCard--hub .profileNext {
  font-size: 13px;
  margin-top: 8px;
}

/* When docked/sticky, always fall back to the compact visual */
.profileCard.profileCard--hub.is-sticky {
  min-height: 0;
  padding: 10px 12px;
  border-radius: 16px;
  /* Fix: prevent hub card width:100% from overriding sticky compact width */
  width: min(560px, calc(100% - 28px));
}


/* Stream Hub (right hero module) – no embedded preview, only the premium profile card */
.previewCard#previewCard {
  min-height: 340px;
}

@media (max-width: 980px) {
  .previewCard#previewCard {
    min-height: 0;
  }
}

.profileWrap.profileWrap--hub {
  flex: 1;
  display: flex;
  align-items: flex-start;
}

/* --- Mobile overflow hard stop --- */
html,
body {
  overflow-x: hidden;
}

.wrap,
.card {
  max-width: 100%;
}

/* Schedule: verhindert, dass irgendwas die Card aufzieht */
.scheduleWeekCard,
.weekRowWrap,
.weekRow {
  max-width: 100%;
  min-width: 0;
}

/* Setup: ebenfalls strikt auf Containerbreite */
.setupHeroCard {
  max-width: 100%;
}

@media (max-width: 980px) {
  .setupHeroCard {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .setupHighlightGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .setupHeroCard {
    grid-template-columns: 1fr;
  }

  .setupHighlightGrid {
    grid-template-columns: 1fr;
  }
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.brandLogo {
  display: block;
  height: 38px;   /* anpassen */
  width: auto;
}