/* =============================================
   LAYOUT — WHZ GAMeS Hub
   Section-spezifische Layouts der Startseite
   ============================================= */

/* ---- Sprach-Sichtbarkeit (lang-de / lang-en) ---- */
/* Für Inhalte mit Kind-Elementen (strong, a, code …), die data-de/data-en nicht nutzen können */
html[lang="en"] .lang-de { display: none; }
html[lang="de"] .lang-en { display: none; }

/* ---- Allgemeine Section-Styles ---- */
.section {
  padding: var(--space-2xl) 0;
}

.section--dark {
  background: var(--color-ui-primary);
  color: #fff;
}

.section--alt {
  background: var(--color-bg);
}

.container {
  max-width: var(--content-width);
  margin: 0 auto;
  padding: 0 var(--page-margin);
}

.container--narrow {
  max-width: var(--content-narrow);
  margin: 0 auto;
  padding: 0 var(--page-margin);
}

.section-header {
  margin-bottom: var(--space-xl);
}

.section-header--center {
  text-align: center;
}

.section-header h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text);
  margin-bottom: var(--space-sm);
}

.section--dark .section-header h2 {
  color: #fff;
}

.section-header p {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.section--dark .section-header p {
  color: rgba(255,255,255,0.7);
}


/* ---- 1. Hero ---- */
.hero {
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  background: var(--color-ui-primary);
  overflow: hidden;
}

.hero__bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0.35;
}

.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(15, 23, 42, 0.55) 0%,
    rgba(15, 23, 42, 0.7) 70%,
    rgba(15, 23, 42, 0.9) 100%
  );
}

.hero__content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  padding: var(--space-2xl) var(--space-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
}

.hero__label {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-wireheadz);
}

.hero__title {
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: #fff;
}

.hero__claim {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: rgba(255,255,255,0.75);
}

.hero__subtext {
  font-size: var(--text-body-lg);
  color: rgba(255,255,255,0.65);
  line-height: var(--leading-relaxed);
  max-width: 560px;
}

.hero__actions {
  display: flex;
  gap: var(--space-md);
  flex-wrap: wrap;
  justify-content: center;
  margin-top: var(--space-sm);
}


/* ---- 2. Mission Statement ---- */
.mission {
  padding: var(--space-2xl) 0;
  text-align: center;
  position: relative;
}
.mission::after {
  content: '';
  display: block;
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 3px;
  background: var(--color-wireheadz);
  border-radius: 2px;
}

.mission__heading {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  color: var(--color-wireheadz);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-lg);
}

.mission__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
  text-align: left;
  margin-top: var(--space-lg);
}

.mission__text {
  font-size: var(--text-body-lg);
  line-height: var(--leading-relaxed);
  color: var(--color-text);
}

.mission__text p + p {
  margin-top: var(--space-md);
}


/* ---- Showcase ---- */
@keyframes showcaseBgZoom {
  from { transform: scale(1.06); }
  to   { transform: scale(1.0); }
}

@keyframes showcaseContentIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.showcase {
  position: relative;
  height: 100vh;            /* Fallback */
  height: 100svh;          /* füllt den Viewport, ohne Cutoff durch mobile Browserleisten */
  min-height: 520px;
  margin-top: calc(-1 * var(--nav-h, 64px));
  overflow: hidden;
  background: #0b1120;
}

.showcase__track {
  position: relative;
  width: 100%;
  height: 100%;
}

.showcase__slide {
  position: absolute;
  inset: 0;
  transform: translateX(100%);
  transition: transform 680ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.showcase__slide--active {
  transform: translateX(0);
}

.showcase__slide--left {
  transform: translateX(-100%);
}

/* Background image */
.showcase__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.showcase__slide--active .showcase__bg {
  animation: showcaseBgZoom 7s ease-out forwards;
}

.showcase__bg--event {
  background-size: cover;
  background-position: center;
}

/* Lesbarkeits-Overlay über JEDEM Slide-Bild — bildunabhängig.
   Dunkelt vor allem links + unten ab (dort sitzt der Text); rechts/oben
   bleibt das Bild weitgehend sichtbar. Liegt zwischen Bild (z 0) und Text (z 2). */
.showcase__slide::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(8, 12, 24, 0.82) 0%, rgba(8, 12, 24, 0.55) 32%, rgba(8, 12, 24, 0.12) 62%, rgba(8, 12, 24, 0) 85%),
    linear-gradient(to top, rgba(8, 12, 24, 0.6) 0%, rgba(8, 12, 24, 0.12) 38%, rgba(8, 12, 24, 0) 60%);
}

/* Zusätzliche Absicherung: dezenter Text-Schatten auf den Slide-Texten */
.showcase__title,
.showcase__text,
.showcase__event-title,
.showcase__event-date {
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.45);
}


/* Content */
.showcase__content {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  z-index: 2;
  padding-bottom: 52px;
}

.showcase__content .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  width: 100%;
}

.showcase__label,
.showcase__title,
.showcase__text,
.showcase__content .btn {
  max-width: 600px;
}

/* Event-Liste (mehrere kommende Events) */
.showcase-event-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.showcase-event-item {
  display: flex;
  gap: var(--space-md);
  align-items: baseline;
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding-bottom: 10px;
}

.showcase-event-item:last-child { border-bottom: none; padding-bottom: 0; }

.showcase-event-item__date {
  font-size: var(--text-small);
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  min-width: 90px;
  font-variant-numeric: tabular-nums;
}

.showcase-event-item__title {
  font-size: var(--text-body-lg);
  color: #fff;
  font-weight: var(--weight-medium);
  line-height: var(--leading-snug);
}

.showcase__slide--active .showcase__content {
  animation: showcaseContentIn 560ms 200ms ease both;
}

.showcase__label {
  display: inline-block;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.75);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: var(--radius-full);
  padding: 4px 12px;
  width: fit-content;
  backdrop-filter: blur(4px);
}


.showcase__title {
  font-size: clamp(2.2rem, 4.5vw, 3.75rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: #fff;
  letter-spacing: -0.01em;
}

.showcase__text {
  font-size: var(--text-body-lg);
  color: rgba(255,255,255,0.82);
  line-height: var(--leading-relaxed);
  max-width: 540px;
}

/* Arrow buttons */
.showcase__arrow {
  position: absolute;
  top: calc(50% - 36px);
  transform: translateY(-50%);
  z-index: 10;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.28);
  background: rgba(255,255,255,0.08);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(8px);
  transition: background var(--duration-fast), border-color var(--duration-fast), transform var(--duration-fast);
}

.showcase__arrow:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.55);
  transform: translateY(-50%) scale(1.08);
}

.showcase__arrow--prev { left: var(--space-lg); }
.showcase__arrow--next { right: var(--space-lg); }

/* Progress bar */
@keyframes showcaseProgress {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
.showcase__slide--active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: rgba(255,255,255,0.75);
  transform-origin: left;
  animation: showcaseProgress 6s linear forwards;
  z-index: 10;
}
.showcase--paused .showcase__slide--active::after {
  animation-play-state: paused;
}

/* Dots */
.showcase__dots {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
}

.showcase__dot {
  height: 8px;
  width: 8px;
  border-radius: var(--radius-full);
  border: none;
  background: rgba(255,255,255,0.38);
  cursor: pointer;
  padding: 0;
  pointer-events: all;
  transition: background var(--duration-base), width var(--duration-base);
}

.showcase__dot--active {
  width: 26px;
  background: rgba(255,255,255,0.92);
}


.video-embed {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-lg);
}

.video-embed iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
  border-radius: var(--radius-lg);
}


/* ---- 3. Die drei Bereiche ---- */
.areas {
  padding: var(--space-2xl) 0;
  background: var(--color-surface);
  box-shadow: inset 0 -1px 0 var(--color-border);
}

.areas__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}


/* ---- 4. eSport Highlights ---- */
.esports-highlights {
  padding: var(--space-2xl) 0;
}

.esports-highlights__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
}

/* Jede Karte belegt 2 von 4 Spalten → identische Breite */
.esports-highlights__grid > * {
  grid-column: span 2;
}

/* Letzte Karte bei ungerader Anzahl zentrieren (Spalten 2–3) */
.esports-highlights__grid > *:last-child:nth-child(odd) {
  grid-column: 2 / 4;
}

/* ---- eSport Join: Mitmachen Split ---- */
.esports-join {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  margin-top: var(--space-lg);
  min-height: 300px;
}

.esports-join__half {
  position: relative;
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  cursor: pointer;
  border-top: 4px solid var(--color-wireheadz);
  overflow: hidden;
  transition: box-shadow 0.25s ease;
}

.esports-join__half--ev {
  border-top-color: var(--color-ev);
  border-left: 1px solid rgba(128,128,128,0.2);
}

.esports-join__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.4s ease;
}

.esports-join__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 35%, rgba(0,0,0,0.48) 100%);
}

.esports-join__half:hover .esports-join__bg {
  transform: scale(1.05);
}

.esports-join__content {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.esports-join__org {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-wireheadz);
}

.esports-join__org--ev {
  color: var(--color-ev);
}

.esports-join__title {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: #fff;
  line-height: var(--leading-snug);
}

.esports-join__desc {
  font-size: var(--text-small);
  color: rgba(255,255,255,0.72);
  margin-bottom: var(--space-xs);
}


/* ---- 5. Community & Events ---- */
.community {
  padding: var(--space-2xl) 0;
  background: var(--color-surface);
}

.community__grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: var(--space-xl);
  align-items: start;
}

.events-preview__grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.event-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--space-md);
  align-items: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--duration-base);
}
.event-row:hover { box-shadow: var(--shadow-sm); }

.event-row__image {
  width: 80px;
  height: 80px;
  object-fit: cover;
}

.event-row__content {
  padding: var(--space-sm) var(--space-md) var(--space-sm) 0;
}

.event-row__date {
  font-size: var(--text-label);
  color: var(--color-text-secondary);
  margin-bottom: 2px;
}

.event-row__title {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: var(--leading-snug);
}

.discord-cta {
  background: var(--color-ui-primary);
  border-radius: var(--radius-lg);
  padding: var(--space-xl) var(--space-lg);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-md);
  box-shadow: var(--shadow-lg);
}

.discord-cta__icon {
  width: 40px;
  height: 40px;
  color: #5865F2;
}

.discord-cta__title {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
}

.discord-cta__body {
  font-size: var(--text-body);
  color: rgba(255,255,255,0.7);
  line-height: var(--leading-relaxed);
}


/* ---- 6. Historie Teaser ---- */
.history-teaser {
  padding: var(--space-2xl) 0;
}

.history-teaser__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

.history-teaser__header h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text);
  margin-bottom: var(--space-md);
}

.history-teaser__header p {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-lg);
}


/* ---- 7. Partner ---- */
.partners {
  padding: var(--space-xl) 0;
  background: var(--color-ui-primary);
}

.partners__label {
  text-align: center;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.5);
  margin-bottom: var(--space-lg);
}

.partners__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-xl);
}

.partner-logo-placeholder {
  height: 48px;
  padding: 0 var(--space-md);
  background: rgba(255,255,255,0.08);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: rgba(255,255,255,0.5);
  min-width: 120px;
  text-align: center;
}


/* ---- 8. CTA Banner ---- */
.cta-banner {
  background: var(--color-ui-primary);
  padding: var(--space-2xl) 0;
  text-align: center;
}

.cta-banner__title {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  color: #fff;
  margin-bottom: var(--space-md);
  line-height: var(--leading-snug);
}

.cta-banner__subtext {
  font-size: var(--text-body-lg);
  color: rgba(255,255,255,0.65);
  max-width: 560px;
  margin: 0 auto var(--space-xl);
  line-height: var(--leading-relaxed);
}

.cta-banner__actions {
  display: flex;
  gap: var(--space-md);
  justify-content: center;
  flex-wrap: wrap;
}


/* =============================================
   RESPONSIVE
   ============================================= */

@media (max-width: 1023px) {
  :root { --page-margin: 2rem; }

  .nav__links { display: none; }
  .nav__controls .nav__lang-toggle,
  .nav__controls .nav__theme-toggle { display: none; }
  .nav__hamburger { display: flex; }

  .hero__title { font-size: clamp(2rem, 6vw, var(--text-h1)); }

  .areas__grid { grid-template-columns: 1fr; }
  .esports-highlights__grid { grid-template-columns: 1fr; }
  .esports-highlights__grid > * { grid-column: span 1; }
  .esports-highlights__grid > *:last-child:nth-child(odd) { grid-column: span 1; }
  .esports-join { grid-template-columns: 1fr; }
  .esports-join__half--ev { border-left: none; }
  .community__grid { grid-template-columns: 1fr; }
  .history-teaser__inner { grid-template-columns: 1fr; }

  .footer__grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
  }
}

@media (max-width: 767px) {
  :root { --page-margin: 1rem; }

  .hero { min-height: 400px; }
  .hero__title { font-size: clamp(1.75rem, 8vw, 2.5rem); }
  .hero__claim { font-size: var(--text-h4); }
  .hero__subtext { font-size: var(--text-body); }

  .section-header h2 { font-size: clamp(1.5rem, 5vw, var(--text-h2)); }

  .footer__grid { grid-template-columns: 1fr; }
  .footer__bottom { flex-direction: column; gap: var(--space-sm); text-align: center; }
}


/* =============================================
   GAMeS HUB — Seitenspezifische Layouts
   ============================================= */

/* ---- Tab-Hero ---- */
/* Bildbereich mit Heading-Overlay */
.tab-hero__visual {
  position: relative;
  min-height: calc(480px + var(--nav-h, 64px));
  margin-top: calc(-1 * var(--nav-h, 64px));
  display: flex;
  align-items: center;
  background: var(--color-ui-primary);
  overflow: hidden;
}

.tab-hero__bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.tab-hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(8,12,24,0.35) 0%,
    rgba(8,12,24,0.65) 55%,
    rgba(8,12,24,0.88) 100%
  );
}

.tab-hero__content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: var(--content-width);
  margin: 0 auto;
  padding: var(--space-2xl) var(--page-margin);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: var(--space-md);
}

.tab-hero__eyebrow {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-wireheadz);
}

.tab-hero__title {
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: #fff;
}

.tab-hero__sub {
  font-size: var(--text-body-lg);
  color: rgba(255,255,255,0.7);
  line-height: var(--leading-relaxed);
  max-width: 620px;
}

/* Tab-Leiste (unter dem Bild) */
.tab-hero__tabs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.tab-hero__tabs::-webkit-scrollbar { display: none; }

.tab-hero__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-sm);
  background: var(--color-surface);
  border: none;
  border-right: 1px solid var(--color-border);
  color: var(--color-text-secondary);
  font-family: var(--font-base);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
  flex-shrink: 0;
}

.tab-hero__tab:last-child { border-right: none; }

.tab-hero__tab:not(.active):hover {
  background: var(--color-bg);
  color: var(--color-text);
}

/* Aktiver Tab: Farbe wird per JS als inline style gesetzt */
.tab-hero__tab.active { color: #fff; }
.tab-hero__tab.active [data-lucide] { color: #fff; }

/* Panels (farbige Blöcke unter der Tab-Leiste) */
.tab-hero__panels { /* container only */ }

.tab-hero__panel {
  display: none;
  background: var(--panel-color, var(--color-wireheadz));
  padding: var(--space-xl) 0;
  animation: fadeInUp var(--duration-base) var(--ease-out);
}
.tab-hero__panel.active { display: block; }

@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tab-hero__panel-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}

.tab-hero__panel-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.tab-hero__panel-text {
  font-size: var(--text-body-lg);
  color: rgba(255,255,255,0.88);
  line-height: var(--leading-relaxed);
  max-width: 600px;
}

.tab-hero__panel-metric {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.35em 0.85em;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.3);
  background: rgba(255,255,255,0.1);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(255,255,255,0.85);
}

.tab-hero__panel .leistungen__cta-btn { flex-shrink: 0; }


/* ---- Stats Block ---- */
.stats-block {
  background: var(--color-ui-primary);
  padding: var(--space-xl) 0;
}

.stats-block__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  text-align: center;
}

.stats-block__item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.stats-block__number {
  font-size: clamp(2rem, 4vw, var(--text-h1));
  font-weight: var(--weight-bold);
  color: #fff;
  line-height: 1;
}

.stats-block__label {
  font-size: var(--text-small);
  color: rgba(255,255,255,0.5);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}


/* ---- Section-Hilfselemente ---- */
.section-sub {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-top: var(--space-sm);
}

.section-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--space-xl);
}

.section-header--light h2 { color: #fff; }
.section-header--light p  { color: rgba(255,255,255,0.7); }

.section-label--light {
  color: rgba(255,255,255,0.5) !important;
}


/* ---- Bereichs-Section (Text + Bild, 2-spaltig) ---- */
.games-hub-section {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: center;
}

.games-hub-section--reverse {
  direction: rtl;
}
.games-hub-section--reverse > * { direction: ltr; }

.games-hub-section__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.games-hub-section__text h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.games-hub-section__text p {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.games-hub-section__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.games-hub-section__list li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}

.games-hub-section__list li i,
.games-hub-section__list li [data-lucide] {
  flex-shrink: 0;
  color: var(--color-wireheadz);
}

.games-hub-section__image img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 4/3;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
}


/* ---- Forschungs-Grid ---- */
.research-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.research-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--duration-base), transform var(--duration-base);
}
.research-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.research-card__icon {
  color: var(--color-wireheadz);
  margin-bottom: var(--space-xs);
}

.research-card h3 {
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.research-card p {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

/* ---- Game Change Block ---- */
.game-change-block {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: var(--space-xl);
  background: color-mix(in srgb, #0e7490 6%, var(--color-surface));
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
  margin-top: var(--space-xl);
  align-items: start;
}

.game-change-block__label {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #0e7490;
  margin-bottom: var(--space-xs);
}

.game-change-block__title {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-sm);
}

.game-change-block__desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin-bottom: var(--space-md);
}

.game-change-block__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.game-change-block__list li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}

.game-change-block__list li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #0e7490;
  flex-shrink: 0;
}

.game-change-block__img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-sm);
}

.game-change-block__video-wrap {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
}

.game-change-block__video-wrap iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
  border-radius: var(--radius-md);
}

.research-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-top: var(--space-lg);
}

.research-footer p {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  max-width: 600px;
}


/* ---- Ausstattungs-Layout ---- */
.specs-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

.specs-cards {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.spec-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.spec-card__header {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  background: var(--color-bg);
  border-bottom: 1px solid var(--color-border);
}

.spec-card__header [data-lucide] {
  color: var(--color-wireheadz);
  flex-shrink: 0;
}

.spec-card__header h3 {
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  flex: 1;
}

.spec-card__model {
  font-size: var(--text-label);
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
}

.spec-card__list {
  list-style: none;
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.spec-card__list li {
  display: flex;
  justify-content: space-between;
  font-size: var(--text-small);
  padding: 4px 0;
  border-bottom: 1px solid var(--color-border);
}
.spec-card__list li:last-child { border-bottom: none; }

.spec-card__list li span:first-child {
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
}
.spec-card__list li span:last-child {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
  text-align: right;
}

.specs-image img {
  width: 100%;
  border-radius: var(--radius-lg);
  aspect-ratio: 16/10;
  object-fit: cover;
  box-shadow: var(--shadow-lg);
  position: sticky;
  top: 80px;
}


/* ---- Rollen-Grid ---- */
.roles-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
}

.role-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  border: 1px solid var(--color-border);
  transition: box-shadow var(--duration-base), transform var(--duration-base);
}
.role-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.role-card__icon {
  color: var(--color-wireheadz);
}

.role-card h3 {
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--color-text);
}

.role-card p {
  font-size: var(--text-small);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}


/* ---- Partner (dunkel) ---- */
.partners-dark {
  background: var(--color-ui-primary);
}

.partners-dark .section-label,
.partners-dark h2 {
  color: rgba(255,255,255,0.5);
}
.partners-dark h2 { color: #fff; }

.partners-grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-md);
}

.partner-logo-wrap--text {
  min-width: 140px;
  min-height: 48px;
  border: 1px solid rgba(255,255,255,0.15);
}

.partner-text-placeholder {
  font-size: var(--text-small);
  font-weight: var(--weight-semibold);
  color: rgba(255,255,255,0.4);
}


/* ---- Galerie-Grid ---- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto auto;
  gap: var(--space-md);
}

.gallery-grid__img {
  width: 100%;
  border-radius: var(--radius-md);
  object-fit: cover;
  aspect-ratio: 16/9;
  cursor: pointer;
  transition: transform var(--duration-base), box-shadow var(--duration-base);
}
.gallery-grid__img:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-lg);
}

.gallery-grid__img--wide {
  grid-column: span 3;
  aspect-ratio: 16/6;
}


/* ---- Leistungen (Tabbed) ---- */
.leistungen {
  padding: 0;
}

.leistungen__images {
  position: relative;
  height: 480px;
  overflow: hidden;
  background: var(--color-ui-primary);
}

.leistungen__img {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.6s var(--ease-in-out);
}

.leistungen__img--active {
  opacity: 1;
}

.leistungen__tabbar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.leistungen__tab {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: var(--space-md) var(--space-lg);
  font-family: var(--font-base);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: var(--color-text-secondary);
  background: var(--color-surface);
  border: none;
  border-right: 1px solid var(--color-border);
  border-bottom: 3px solid transparent;
  cursor: pointer;
  transition: background 0.2s ease, color 0.2s ease;
}

.leistungen__tab:last-child { border-right: none; }

.leistungen__tab--active {
  background: var(--tab-color, var(--color-wireheadz));
  color: #fff;
  border-bottom-color: transparent;
}

.leistungen__tab--active [data-lucide],
.leistungen__tab--active svg { color: #fff; }

.leistungen__tab:not(.leistungen__tab--active):hover {
  background: var(--color-bg);
  color: var(--color-text);
}

.leistungen__panel {
  display: none;
  background: var(--panel-color, var(--color-wireheadz));
  padding: var(--space-2xl) 0;
}

.leistungen__panel--active { display: block; }

.leistungen__panel-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3xl);
  align-items: start;
}

.leistungen__panel-text h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  color: #fff;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-md);
}

.leistungen__panel-text p {
  font-size: var(--text-body-lg);
  color: rgba(255,255,255,0.82);
  line-height: var(--leading-relaxed);
}

.leistungen__feature-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.leistungen__feature-list li {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-body);
  color: rgba(255,255,255,0.9);
}

.leistungen__feature-list li [data-lucide] {
  color: rgba(255,255,255,0.65);
  flex-shrink: 0;
}

.leistungen__cta-btn {
  display: inline-flex;
  background: rgba(255,255,255,0.15);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(4px);
}

.leistungen__cta-btn:hover {
  background: rgba(255,255,255,0.25);
  color: #fff;
  border-color: rgba(255,255,255,0.55);
}


/* ---- Lightbox ---- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.lightbox--open {
  opacity: 1;
  pointer-events: all;
}

.lightbox__overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.92);
  backdrop-filter: blur(6px);
}

.lightbox__img {
  position: relative;
  z-index: 1;
  max-width: 88vw;
  max-height: 84vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
  box-shadow: 0 32px 80px rgba(0,0,0,0.6);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s ease;
}

.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255,255,255,0.22); }

.lightbox__close {
  top: var(--space-xl);
  right: var(--space-xl);
  width: 48px;
  height: 48px;
}

.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
}

.lightbox__nav--prev { left: var(--space-xl); }
.lightbox__nav--next { right: var(--space-xl); }


/* ---- Timeline V2 ---- */
.timeline-v2 {
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

.timeline-v2__entry {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: center;
}

.timeline-v2__entry--reverse .timeline-v2__image {
  order: -1;
}

.timeline-v2__year {
  font-size: clamp(4.5rem, 8vw, 7rem);
  font-weight: var(--weight-bold);
  color: var(--color-wireheadz);
  line-height: 1;
  letter-spacing: -0.03em;
  margin-bottom: 0.1em;
}

.timeline-v2__tagline {
  font-size: var(--text-h3);
  font-weight: var(--weight-semibold);
  color: var(--color-text);
  line-height: var(--leading-snug);
  margin-bottom: var(--space-md);
}

.timeline-v2__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.timeline-v2__list li {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.timeline-v2__list li::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--color-wireheadz);
  margin-top: 0.5em;
  flex-shrink: 0;
}

.timeline-v2__image {
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 4/3;
  box-shadow: var(--shadow-lg);
  transform: translateZ(0);
  isolation: isolate;
}

.timeline-v2__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow) var(--ease-in-out);
}

.timeline-v2__entry:hover .timeline-v2__image img {
  transform: scale(1.03);
}


/* =============================================
   eSport-SEITE
   ============================================= */

/* ---- Split-Hero ---- */
.split-hero {
  display: flex;
  min-height: 78vh;
  position: relative;
}

.split-hero__half {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: flex 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.3s ease;
}

.split-hero__half--wh {
  background: linear-gradient(135deg, #2d0d15 0%, #1a0a0c 55%, #0d0508 100%);
  background-color: #1a0a0c;
}

.split-hero__half--ev {
  background: linear-gradient(135deg, #1c0a2e 0%, #0e0a1a 55%, #080510 100%);
  background-color: #0e0a1a;
}

/* dunkles Overlay für Lesbarkeit — auf Hover etwas aufhellen */
.split-hero__half::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  transition: background 0.35s ease;
  z-index: 0;
}

.split-hero__half--wh:hover { flex: 1.18; }
.split-hero__half--ev:hover { flex: 1.18; }

.split-hero__half:hover::before {
  background: rgba(0, 0, 0, 0.28);
}

/* Dark Mode: kein extra Eingriff nötig, Bilder sind selbst dunkel */

.split-hero__divider {
  width: 2px;
  background: #000;
  align-self: stretch;
  flex-shrink: 0;
  z-index: 2;
}

.split-hero__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-lg);
  padding: var(--space-3xl) var(--space-2xl);
  max-width: 480px;
}

.split-hero__label {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255, 255, 255, 0.75);
}

.split-hero__tagline {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: #fff;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.split-hero__cta {
  display: inline-block;
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-md);
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: #fff;
  text-decoration: none;
  backdrop-filter: blur(4px);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.split-hero__cta--wh { background: var(--color-wireheadz); }
.split-hero__cta--ev { background: var(--color-ev); }

.split-hero__half:hover .split-hero__cta {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
}


/* ---- News Grid ---- */
.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.news-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.news-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
}

.news-card__image {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.news-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow) var(--ease-in-out);
}

.news-card:hover .news-card__image img {
  transform: scale(1.04);
}

.news-card__accent {
  height: 4px;
  flex-shrink: 0;
}

.news-card--wh .news-card__accent { background: var(--color-wireheadz); }
.news-card--ev .news-card__accent { background: var(--color-ev); }

.news-card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.news-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-label);
  color: var(--color-text-secondary);
}

.news-card__brand {
  font-weight: var(--weight-semibold);
}

.news-card--wh .news-card__brand { color: var(--color-wireheadz); }
.news-card--ev .news-card__brand { color: var(--color-ev); }

.news-card__dot { color: var(--color-border); }

.news-card__title {
  font-size: var(--text-body-lg);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text);
}

.news-card__text {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  flex: 1;
}

.news-card__link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: var(--space-sm);
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  transition: gap 0.2s ease;
}

.news-card--wh .news-card__link { color: var(--color-wireheadz); }
.news-card--ev .news-card__link { color: var(--color-ev); }

.news-card__link:hover { gap: 8px; }

/* section-sub (Untertitel unter section-header h2) */
.section-sub {
  margin-top: var(--space-sm);
  font-size: var(--text-body);
  color: var(--color-text-secondary);
}

.section-header--center .section-sub {
  margin-left: auto;
  margin-right: auto;
}


/* =============================================
   WIREHEADZ-SEITE
   ============================================= */

/* ---- Hero ---- */
.wh-hero {
  background: var(--color-ui-primary);
  padding: calc(var(--space-2xl) + var(--nav-h, 64px)) 0 var(--space-3xl);
  margin-top: calc(-1 * var(--nav-h, 64px));
  position: relative;
  overflow: hidden;
}

.wh-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(215,38,56,0.18) 0%, transparent 60%);
  pointer-events: none;
}

.wh-hero__inner {
  position: relative;
  z-index: 1;
}

.wh-hero__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-lg);
  max-width: 640px;
  margin-top: var(--space-xl);
}

.wh-hero__logo {
  height: 64px;
  object-fit: contain;
}

.wh-hero__claim {
  font-size: var(--text-h1);
  font-weight: var(--weight-bold);
  color: #fff;
  line-height: var(--leading-tight);
}

.wh-hero__sub {
  font-size: var(--text-body-lg);
  color: rgba(255,255,255,0.7);
  line-height: var(--leading-relaxed);
}

.wh-hero__cta {
  align-self: flex-start;
  background: var(--color-ui-primary-hover) !important;
  border-color: var(--color-ui-primary-hover) !important;
}
.wh-hero__cta:hover {
  background: #475569 !important;
  border-color: #475569 !important;
}


/* ---- Breadcrumb ---- */
.breadcrumb__list {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
}

.breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  font-size: var(--text-label);
  color: rgba(255,255,255,0.5);
}

.breadcrumb__item a {
  color: rgba(255,255,255,0.6);
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumb__item a:hover { color: #fff; }

.breadcrumb__item + .breadcrumb__item::before {
  content: '/';
  color: rgba(255,255,255,0.3);
}

.breadcrumb__item--current {
  color: rgba(255,255,255,0.9);
}


/* ---- Game Overview Cards ---- */
.game-overview {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.game-overview__card {
  display: grid;
  grid-template-columns: 260px 1fr;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  border-left: 4px solid var(--color-wireheadz);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.game-overview__card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-3px);
}

.game-overview__card--paused {
  border-left-color: var(--color-border);
  opacity: 0.75;
}

.game-overview__img {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
}

.game-overview__img--paused {
  background: var(--color-bg);
}

.game-overview__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow) var(--ease-in-out);
}

.game-overview__card:hover .game-overview__img img {
  transform: scale(1.04);
}

.game-overview__body {
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.game-overview__badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  width: fit-content;
}

.game-overview__badge--active {
  background: rgba(215,38,56,0.1);
  color: var(--color-wireheadz);
}

.game-overview__badge--paused {
  background: var(--color-bg);
  color: var(--color-text-secondary);
}

.game-overview__title {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0;
}

.game-overview__meta {
  font-size: var(--text-label);
  color: var(--color-text-secondary);
  font-weight: var(--weight-medium);
}

.game-overview__desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  flex: 1;
}


/* ---- Game Accordion ---- */
.game-accordion-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.game-accordion {
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease;
}

.game-accordion[open] {
  box-shadow: var(--shadow-lg);
}

/* Summary = fullbleed image card */
.game-accordion__summary {
  position: relative;
  min-height: 220px;
  display: flex;
  align-items: flex-end;
  padding: var(--space-xl);
  cursor: pointer;
  list-style: none;
  user-select: none;
  overflow: hidden;
}

.game-accordion__summary::-webkit-details-marker { display: none; }

/* Fullbleed background image */
.game-accordion__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  transition: transform var(--duration-slow) var(--ease-in-out);
}

.game-accordion__summary:hover .game-accordion__bg {
  transform: scale(1.04);
}

/* Dark gradient overlay */
.game-accordion__summary::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.52) 45%, rgba(0,0,0,0.28) 100%);
  z-index: 1;
  transition: background 0.3s ease;
}

.game-accordion__summary:hover::before {
  background: linear-gradient(to top, rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.42) 45%, rgba(0,0,0,0.20) 100%);
}

/* Text content */
.game-accordion__content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding-right: 56px;
}

.game-accordion__title {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  color: #fff;
  margin: 0;
  text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

.game-accordion__content .game-overview__desc {
  color: rgba(255,255,255,0.82);
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  text-shadow: 0 1px 4px rgba(0,0,0,0.4);
  margin: 0;
  max-width: 60ch;
}

.game-accordion__content .game-overview__badge {
  align-self: flex-start;
}

.game-accordion__content .game-overview__badge--active {
  background: rgba(215,38,56,0.65);
  color: #fff;
}

/* Circular chevron */
.game-accordion__arrow {
  position: absolute;
  bottom: var(--space-xl);
  right: var(--space-xl);
  z-index: 2;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: transform 0.3s ease, background 0.25s ease;
  flex-shrink: 0;
}

.game-accordion[open] .game-accordion__arrow {
  transform: rotate(180deg);
}

.game-accordion__summary:hover .game-accordion__arrow {
  background: rgba(255,255,255,0.28);
}

/* Roster area */
.game-accordion__roster {
  padding: var(--space-xl) var(--space-lg) var(--space-lg);
}

/* Game-specific color gradients */
.game-accordion--valorant .game-accordion__roster {
  background: linear-gradient(135deg, #1a0308 0%, #2d0810 40%, #0d0d0d 100%);
}

.game-accordion--rocket-league .game-accordion__roster {
  background: linear-gradient(135deg, #020a1a 0%, #0d1a2e 45%, #0a0a0f 100%);
}

.game-accordion--lol .game-accordion__roster {
  background: linear-gradient(to right, #002E5F 0%, #1a0a1a 50%, #5C0F1A 100%);
}

.game-accordion--formula1 .game-accordion__roster {
  background: linear-gradient(135deg, #1a0a00 0%, #2a1200 45%, #0d0808 100%);
}

.game-accordion__roster--paused {
  display: flex;
  align-items: center;
  gap: var(--space-lg);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-body);
}

/* Paused variant */
.game-accordion--paused .game-accordion__summary {
  background: var(--color-surface);
  min-height: 120px;
  align-items: center;
}

.game-accordion--paused .game-accordion__summary::before {
  display: none;
}

.game-accordion--paused .game-accordion__title {
  color: var(--color-text);
  text-shadow: none;
}

.game-accordion--paused .game-accordion__content .game-overview__desc {
  color: var(--color-text-secondary);
  text-shadow: none;
}

.game-accordion--paused .game-accordion__arrow {
  background: rgba(0,0,0,0.08);
  color: var(--color-text-secondary);
  backdrop-filter: none;
  bottom: 50%;
  transform: translateY(50%);
}

.game-accordion--paused[open] .game-accordion__arrow {
  transform: translateY(50%) rotate(180deg);
}

.game-accordion--paused .game-accordion__summary:hover .game-accordion__arrow {
  background: rgba(0,0,0,0.14);
}

.game-accordion--hidden {
  display: none;
}

/* Roster CTA – "Kein passendes Team?" */
.roster-cta {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-top: var(--space-xl);
  cursor: pointer;
  transition: box-shadow 0.25s ease;
}

.roster-cta:hover {
  box-shadow: var(--shadow-md);
}

.roster-cta__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform 0.4s ease;
}

.roster-cta:hover .roster-cta__bg {
  transform: scale(1.05);
}

.roster-cta__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,15,30,0.88) 0%, rgba(20,30,55,0.75) 100%);
}

.roster-cta__content {
  position: relative;
  z-index: 1;
  max-width: 580px;
  padding: var(--space-2xl) var(--space-xl);
}

.roster-cta__label {
  display: block;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: var(--text-xs);
  font-weight: 600;
  color: rgba(255,255,255,0.55);
  margin-bottom: var(--space-sm);
}

.roster-cta__title {
  font-size: var(--text-h2);
  font-weight: 700;
  color: #fff;
  margin: 0 0 var(--space-md);
  line-height: 1.2;
}

.roster-cta__desc {
  font-size: var(--text-body);
  color: rgba(255,255,255,0.75);
  margin: 0 0 var(--space-xl);
  line-height: 1.65;
}


/* ---- Player Grid (Fullbleed) ---- */
.player-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--space-md);
}

.player-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  cursor: pointer;
}

.player-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

.player-card__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: left top;
  display: block;
  transform: scale(1.55);
  transform-origin: 20% 12%;
  transition: transform var(--duration-slow) var(--ease-in-out);
}

.player-card:hover .player-card__bg {
  transform: scale(1.63);
}

.player-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0,0,0,0.88) 0%,
    rgba(0,0,0,0.3) 50%,
    transparent 100%
  );
  pointer-events: none;
}

.player-card__overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--space-md);
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transform: translateY(6px);
  transition: transform var(--duration-base) var(--ease-in-out);
}

.player-card:hover .player-card__overlay {
  transform: translateY(0);
}

.player-card__ingame {
  font-size: var(--text-label);
  font-weight: var(--weight-bold);
  color: var(--color-wireheadz);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.player-card__name {
  font-size: var(--text-body);
  font-weight: var(--weight-semibold);
  color: #fff;
  margin: 0;
  line-height: 1.2;
}

.player-card__role {
  display: inline-block;
  font-size: 10px;
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 2px 7px;
  border-radius: 999px;
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.85);
  width: fit-content;
  margin-top: 2px;
}

.player-card__role--captain {
  background: rgba(215,38,56,0.7);
  color: #fff;
}

.player-card__study {
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  margin-top: 1px;
}


/* ---- Turniere & Ergebnisse ---- */
.results-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
}

.results-layout--single {
  grid-template-columns: 1fr;
  max-width: 640px;
  margin: 0 auto;
}

.results-block__title {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin-bottom: var(--space-lg);
}

.results-block__icon {
  width: 32px;
  height: 32px;
  object-fit: contain;
  border-radius: var(--radius-sm);
}

.results-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-body);
}

.results-table thead th {
  text-align: left;
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-secondary);
  padding: var(--space-sm) var(--space-md);
  border-bottom: 2px solid var(--color-border);
}

.results-table tbody tr {
  border-bottom: 1px solid var(--color-border);
  transition: background 0.15s ease;
}

.results-table tbody tr:last-child { border-bottom: none; }
.results-table tbody tr:hover { background: var(--color-bg); }

.results-table tbody td {
  padding: var(--space-md);
  color: var(--color-text);
  vertical-align: middle;
}

.results-table__highlight {
  font-weight: var(--weight-semibold);
  color: var(--color-wireheadz) !important;
}


/* ---- Organigramm / Split-Panel ---- */

.org-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  align-items: start;
}

/* Baum (links) */
.org-tree {
  display: flex;
  flex-direction: column;
}

.org-tree__group {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}

.org-tree__group-label {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--space-sm) var(--space-lg);
  background: rgba(233, 30, 140, 0.06);
  border-bottom: 1px solid var(--color-border);
}

.org-tree__group-label .org-label__title {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-ev);
}

.org-tree__group-label .org-label__sub {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
}

.org-tree__connector {
  display: flex;
  justify-content: center;
  padding: 4px 0;
  color: var(--color-text-muted);
}

/* Node-Button */
.org-node {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-md) var(--space-lg);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--color-border);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s ease;
  color: inherit;
}

.org-node:last-child { border-bottom: none; }
.org-node:hover { background: rgba(233, 30, 140, 0.04); }
.org-node--active { background: rgba(233, 30, 140, 0.09); }

.org-node__photo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--color-border);
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  overflow: hidden;
  flex-shrink: 0;
  transition: border-color 0.15s ease;
}

.org-node:hover .org-node__photo,
.org-node--active .org-node__photo { border-color: var(--color-ev); }

.org-node__photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.org-node__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.org-node__role {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-ev);
  white-space: nowrap;
}

.org-node__name {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.org-node__chevron {
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: color 0.15s ease, transform 0.15s ease;
}

.org-node--active .org-node__chevron {
  color: var(--color-ev);
  transform: translateX(3px);
}

/* Detailpanel (rechts) */
.org-detail {
  position: sticky;
  top: 88px;
}

.org-detail__prompt {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 300px;
  border: 2px dashed var(--color-border);
  border-radius: var(--radius-lg);
  color: var(--color-text-muted);
  text-align: center;
  padding: var(--space-xl);
  gap: var(--space-md);
}

.org-detail__prompt p {
  font-size: var(--text-body);
  max-width: 200px;
  line-height: var(--leading-relaxed);
}

.org-detail__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  animation: org-card-in 0.2s ease;
}

@keyframes org-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.org-detail__header {
  padding: var(--space-xl) var(--space-xl) var(--space-lg);
  display: flex;
  gap: var(--space-lg);
  align-items: flex-start;
  border-bottom: 1px solid var(--color-border);
}

.org-detail__photo {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  border: 3px solid var(--color-ev);
  background: var(--color-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-muted);
  overflow: hidden;
  flex-shrink: 0;
}

.org-detail__photo img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.org-detail__titles {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
}

.org-detail__role {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-ev);
}

.org-detail__name {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0;
  line-height: 1.2;
}

.org-detail__meta {
  font-size: 0.875rem;
  color: var(--color-text-secondary);
}

.org-detail__body {
  padding: var(--space-lg) var(--space-xl) var(--space-xl);
}

.org-detail__desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}


/* ---- Accordion-Roster Platzhalter (In Aufbau) ---- */

.roster-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  padding: var(--space-xl) var(--space-lg);
  text-align: center;
  color: var(--color-text-secondary);
}

.roster-placeholder p {
  font-size: var(--text-body);
  max-width: 400px;
}


/* ---- WireHeadZ Teambild rechts im Hero ---- */
.wh-hero--wh {
  background:
    url('../assets/images/wireheadz/hero.png') right center / auto 100% no-repeat,
    linear-gradient(to right, var(--color-wireheadz) 0%, #000 55%);
  min-height: 620px;
}

.wh-hero--wh::before { background: none; }

/* ---- WireHeadZ e.V. Vereinsbild rechts im Hero ---- */
.wh-hero--ev {
  background:
    url('../assets/images/wireheadz-ev/hero.png') right center / auto 100% no-repeat,
    linear-gradient(to right, var(--color-ev) 0%, #0e0a1a 55%);
  min-height: 620px;
}

.wh-hero--ev::before { background: none; }

/* ---- WireHeadZ e.V. Farb-Overrides ---- */
.wh-hero--ev::before {
  background: linear-gradient(135deg, rgba(233,30,140,0.18) 0%, transparent 60%);
}

.ev-training {
  background: var(--color-ev);
}

.ev-training .section-label {
  color: rgba(255,255,255,0.65) !important;
  margin-bottom: 0;
}

.game-accordion--ev .game-accordion__roster {
  background: linear-gradient(135deg, #1a0312 0%, #2d0a1e 45%, #0d0d0d 100%);
}

.game-accordion--ev .player-card__ingame {
  color: var(--color-ev);
}

.game-accordion--ev .player-card__role--captain {
  background: rgba(233,30,140,0.7);
}


/* ---- Player Lightbox ---- */
.player-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(0, 0, 0, 0.92);
  align-items: center;
  justify-content: center;
  padding: var(--space-lg);
}

.player-lightbox.open {
  display: flex;
}

.player-lightbox__wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--space-md);
  max-width: 520px;
  width: 100%;
}

.player-lightbox__card {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  min-width: 0;
}

.player-lightbox__img {
  width: 100%;
  max-height: 65vh;
  object-fit: contain;
  border-radius: var(--radius-lg);
  display: block;
}

.player-lightbox__info {
  text-align: center;
  color: #fff;
}

.player-lightbox__name {
  font-size: var(--text-h3, 1.25rem);
  font-weight: var(--weight-bold, 700);
  margin: 0;
}

.player-lightbox__study {
  font-size: var(--text-small, 0.875rem);
  color: rgba(255, 255, 255, 0.55);
  margin-top: 4px;
}

.player-lightbox__counter {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.35);
  margin-top: 6px;
  letter-spacing: 0.05em;
}

.player-lightbox__nav {
  flex-shrink: 0;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50%;
  width: 48px;
  height: 48px;
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.player-lightbox__nav:hover {
  background: rgba(255, 255, 255, 0.25);
}

.player-lightbox__nav[style*="hidden"] {
  pointer-events: none;
}

.player-lightbox__close {
  position: absolute;
  top: -44px;
  right: 0;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  padding: 8px;
  opacity: 0.6;
  line-height: 1;
  transition: opacity 0.2s;
}

.player-lightbox__close:hover {
  opacity: 1;
}

@media (max-width: 600px) {
  .player-lightbox__wrap {
    gap: var(--space-xs, 8px);
  }

  .player-lightbox__nav {
    width: 38px;
    height: 38px;
  }

  .player-lightbox__close {
    top: -40px;
  }
}


/* ---- Training (rotes Layout) ---- */
.wh-training {
  background: var(--color-wireheadz);
}

.wh-training__label {
  color: rgba(255,255,255,0.65) !important;
}

.training-layout {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.wh-training .section-label {
  margin-bottom: 0;
}

.training-layout .training-info {
  margin-top: var(--space-lg);
}

.training-layout .btn {
  margin-top: var(--space-md);
}

.training-layout h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  color: #fff;
}

.training-layout__intro {
  font-size: var(--text-body-lg);
  color: rgba(255,255,255,0.8);
  line-height: var(--leading-relaxed);
}

.training-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-xl);
  max-width: 680px;
  margin: 0 auto;
}

.training-info__block {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.training-info__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.15);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.training-info__block h4 {
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: #fff;
  margin-bottom: var(--space-xs);
}

.training-info__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.training-info__list li {
  font-size: var(--text-body);
  color: rgba(255,255,255,0.75);
  padding-left: 1.1em;
  position: relative;
}

.training-info__list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: rgba(255,255,255,0.5);
}


/* ---- Events Teaser ---- */
.events-teaser-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
}

.event-teaser-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.event-teaser-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.event-teaser-card__img {
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

.event-teaser-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--duration-slow) var(--ease-in-out);
}

.event-teaser-card:hover .event-teaser-card__img img {
  transform: scale(1.04);
}

.event-teaser-card__body {
  padding: var(--space-md) var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.event-teaser-card__date {
  font-size: var(--text-label);
  color: var(--color-wireheadz);
  font-weight: var(--weight-semibold);
}

.event-teaser-card__title {
  font-size: var(--text-body);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0;
}

.events-teaser-cta {
  text-align: center;
}


/* ---- Join CTA ---- */
.join-cta {
  background: var(--color-wireheadz);
  padding: var(--space-3xl) 0;
}

.join-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2xl);
}

.join-cta__text h2 {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  color: #fff;
  margin-bottom: var(--space-sm);
}

.join-cta__text p {
  font-size: var(--text-body-lg);
  color: rgba(255,255,255,0.8);
}

.join-cta__actions {
  display: flex;
  gap: var(--space-md);
  flex-shrink: 0;
}

/* Buttons auf rotem Hintergrund */
.btn--surface {
  background: #fff;
  color: var(--color-wireheadz);
  font-weight: var(--weight-semibold);
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: opacity 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.btn--surface:hover { opacity: 0.9; }

.btn--ghost-light {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255,255,255,0.6);
  font-weight: var(--weight-semibold);
  padding: var(--space-sm) var(--space-xl);
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: border-color 0.2s ease, background 0.2s ease;
  display: inline-flex;
  align-items: center;
}

.btn--ghost-light:hover {
  border-color: #fff;
  background: rgba(255,255,255,0.1);
}


/* =============================================
   EVENTS-SEITE
   ============================================= */

/* ---- Page Hero (wiederverwendbar für Events, Partner, Mitmachen) ---- */
.page-hero {
  position: relative;
  min-height: calc(340px + var(--nav-h, 64px));
  margin-top: calc(-1 * var(--nav-h, 64px));
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--color-ui-primary);
}

.page-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  animation: showcaseBgZoom 8s ease-out forwards;
}

.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.88) 0%, rgba(0,0,0,0.48) 55%, rgba(0,0,0,0.22) 100%);
  z-index: 1;
}

.page-hero__inner {
  position: relative;
  z-index: 2;
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
  width: 100%;
}

.page-hero__label {
  display: block;
  font-size: var(--text-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.6);
  margin-bottom: var(--space-xs);
}

.page-hero__title {
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  font-weight: var(--weight-bold);
  color: #fff;
  line-height: var(--leading-snug);
  margin: 0 0 var(--space-sm);
}

.page-hero__sub {
  font-size: var(--text-body-lg);
  color: rgba(255,255,255,0.75);
  max-width: 600px;
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* ---- Events Grid ---- */
.events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
}

.events-grid--auto {
  grid-template-columns: repeat(auto-fill, minmax(300px, 380px));
  justify-content: start;
}

.events-grid--single {
  grid-template-columns: minmax(300px, 420px);
}

/* ---- Volle Event-Card ---- */
.event-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.event-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}

.event-card__img {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-bg);
}

.event-card__img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s var(--ease-in-out);
}

.event-card:hover .event-card__img img {
  transform: scale(1.04);
}

.event-card__badges {
  position: absolute;
  top: var(--space-md);
  left: var(--space-md);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  z-index: 1;
}

.event-card__badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 4px 9px;
  border-radius: var(--radius-sm);
  backdrop-filter: blur(6px);
  white-space: nowrap;
}

.event-card__badge--upcoming { background: var(--color-wireheadz); color: #fff; }
.event-card__badge--archive  { background: rgba(0,0,0,0.55); color: rgba(255,255,255,0.85); }
.event-card__badge--tba      { background: rgba(0,0,0,0.3); color: rgba(255,255,255,0.6); border: 1px solid rgba(255,255,255,0.18); }
.event-card__badge--category { background: rgba(0,0,0,0.5); color: rgba(255,255,255,0.85); }

.event-card__body {
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  flex: 1;
}

.event-card__date {
  font-size: var(--text-label);
  font-weight: var(--weight-semibold);
  color: var(--color-wireheadz);
  letter-spacing: 0.04em;
}

.event-card__date--archive { color: var(--color-text-muted); }

.event-card__time {
  color: var(--color-text-secondary);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  margin-left: var(--space-xs);
}

.event-card__title {
  font-size: var(--text-h3);
  font-weight: var(--weight-bold);
  color: var(--color-text);
  margin: 0;
  line-height: var(--leading-snug);
}

.event-card__location {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.event-card__desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  flex: 1;
}

.event-card__footer {
  padding: 0 var(--space-lg) var(--space-lg);
}

/* Coming Soon / TBA */
.event-card--tba {
  border: 2px dashed var(--color-border);
  background: transparent;
  box-shadow: none;
}

.event-card--tba:hover {
  transform: none;
  box-shadow: none;
  border-color: var(--color-wireheadz);
}

.event-card--tba .event-card__img {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg);
  color: var(--color-text-muted);
}

/* Archiv: leicht gedimmt */
.event-card--archive { opacity: 0.82; }
.event-card--archive:hover { opacity: 1; }

/* ---- Kooperation CTA ---- */
.event-coop {
  background: var(--color-ui-primary);
}

.event-coop__inner {
  display: flex;
  align-items: center;
  gap: var(--space-2xl);
}

.event-coop__icon {
  width: 80px;
  height: 80px;
  border-radius: var(--radius-lg);
  background: rgba(215,38,56,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-wireheadz);
  flex-shrink: 0;
}

.event-coop__text { flex: 1; }

.event-coop__label {
  display: block;
  font-size: var(--text-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.48);
  margin-bottom: var(--space-sm);
}

.event-coop__heading {
  font-size: var(--text-h2);
  font-weight: var(--weight-bold);
  color: #fff;
  line-height: var(--leading-snug);
  margin-bottom: var(--space-md);
}

.event-coop__desc {
  font-size: var(--text-body-lg);
  color: rgba(255,255,255,0.7);
  line-height: var(--leading-relaxed);
}

.event-coop__actions {
  display: flex;
  flex-direction: row;
  gap: var(--space-md);
  align-items: stretch;
  margin-top: var(--space-lg);
}

.event-coop__actions .btn {
  flex: 1;
  justify-content: center;
  text-align: center;
}


/* Page hero medium variant — matches GAMeS Hub tab-hero height */
.page-hero--md {
  min-height: calc(480px + var(--nav-h, 64px));
}

/* Page hero tall variant — matches showcase height (Startseite) */
.page-hero--lg {
  min-height: calc(620px + var(--nav-h, 64px));
}

/* ---- GAMeS Hub Responsive ---- */
@media (max-width: 1023px) {
  .tab-hero__visual { min-height: calc(380px + var(--nav-h, 64px)); }
  .page-hero--md { min-height: calc(380px + var(--nav-h, 64px)); }
  .page-hero--lg { min-height: calc(560px + var(--nav-h, 64px)); }
  .tab-hero__title { font-size: clamp(2rem, 5vw, var(--text-h1)); }
  .tab-hero__tabs { grid-template-columns: repeat(3, 1fr); }
  .tab-hero__tab:nth-child(3) { border-right: none; }
  .tab-hero__panel-inner { flex-direction: column; align-items: flex-start; }

  .stats-block__grid { grid-template-columns: repeat(2, 1fr); }

  .games-hub-section {
    grid-template-columns: 1fr;
    gap: var(--space-xl);
  }
  .games-hub-section--reverse { direction: ltr; }

  .research-grid { grid-template-columns: repeat(2, 1fr); }
  .game-change-block { grid-template-columns: 1fr; }

  .specs-layout { grid-template-columns: 1fr; }
  .specs-image img { position: static; }

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

  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .gallery-grid__img--wide { grid-column: span 2; }

  .showcase { height: calc(560px + var(--nav-h, 64px)); }
  .showcase__title { font-size: clamp(1.9rem, 5.5vw, 3rem); }
  .showcase__text { font-size: var(--text-body); }
  .mission__body { grid-template-columns: 1fr; }
  .research-footer { flex-direction: column; align-items: flex-start; }

  .timeline-v2 { gap: 3.5rem; }
  .timeline-v2__entry { gap: var(--space-lg); }

  .leistungen__images { height: 340px; }
  .leistungen__panel-inner { grid-template-columns: 1fr; gap: var(--space-xl); }

  /* eSport Tablet */
  .split-hero__inner { padding: var(--space-2xl) var(--space-xl); }
  .split-hero__tagline { font-size: var(--text-h3); }
  .news-grid { grid-template-columns: repeat(2, 1fr); }

  /* WireHeadZ Tablet — Bild etwas kleiner, Gradient angepasst */
  .wh-hero--wh,
  .wh-hero--ev {
    /* Reihenfolge: Gradient | Bild | Fallback-Farbe */
    background-size: auto, auto 82%, auto;
  }

  /* WireHeadZ Tablet */
  .game-accordion__summary { min-height: 180px; }
  .player-grid { grid-template-columns: repeat(3, 1fr); }
  .results-layout { grid-template-columns: 1fr; gap: var(--space-xl); }
  .training-info { max-width: 100%; }
  .events-teaser-grid { grid-template-columns: repeat(2, 1fr); }
  .join-cta__inner { flex-direction: column; text-align: center; align-items: center; }

  /* Organigramm Tablet */
  .org-layout { grid-template-columns: 1fr; }
  .org-detail { position: static; }

  /* Events Tablet */
  .events-grid { grid-template-columns: repeat(2, 1fr); }
  .event-coop__inner { flex-direction: column; gap: var(--space-xl); }
}

@media (max-width: 767px) {
  .tab-hero__visual { min-height: calc(300px + var(--nav-h, 64px)); }
  .page-hero--lg { min-height: calc(480px + var(--nav-h, 64px)); }
  .tab-hero__title { font-size: clamp(1.75rem, 7vw, 2.25rem); }
  .tab-hero__sub { font-size: var(--text-body); }
  .tab-hero__tabs { grid-template-columns: repeat(2, 1fr); }
  .tab-hero__tab:nth-child(3) { border-right: 1px solid var(--color-border); }
  .tab-hero__tab:nth-child(2),
  .tab-hero__tab:nth-child(4) { border-right: none; }
  .tab-hero__tab { flex-direction: column; gap: 4px; font-size: 11px; padding: var(--space-sm); }

  .stats-block__grid { grid-template-columns: repeat(2, 1fr); gap: var(--space-md); }

  .research-grid { grid-template-columns: 1fr; }
  .game-change-block { padding: var(--space-lg); }
  .roles-grid { grid-template-columns: 1fr; }

  .showcase { height: calc(480px + var(--nav-h, 64px)); }
  .showcase__arrow { display: none; }
  .showcase__title { font-size: clamp(1.7rem, 7vw, 2.4rem); }
  .showcase__text { font-size: var(--text-small); max-width: 100%; }
  .gallery-grid { grid-template-columns: 1fr; }
  .gallery-grid__img--wide { grid-column: span 1; aspect-ratio: 16/9; }

  .leistungen__images { height: 240px; }
  .leistungen__tabbar { grid-template-columns: repeat(2, 1fr); }
  .leistungen__tab {
    padding: var(--space-sm) var(--space-md);
    font-size: var(--text-label);
    flex-direction: column;
    gap: 4px;
    border-bottom: 1px solid var(--color-border);
  }
  .leistungen__tab:nth-child(2) { border-right: none; }

  .timeline-v2 { gap: 3rem; }
  .timeline-v2__entry,
  .timeline-v2__entry--reverse {
    grid-template-columns: 1fr;
    gap: var(--space-lg);
  }
  .timeline-v2__entry--reverse .timeline-v2__image { order: 0; }
  .timeline-v2__image { aspect-ratio: 16/9; }
  .timeline-v2__year { font-size: clamp(3.5rem, 14vw, 5rem); }

  /* eSport */
  .split-hero { flex-direction: column; min-height: unset; }
  .split-hero__half { min-height: 65vw; flex: unset; width: 100%; }
  .split-hero__half:hover { flex: unset; }
  .split-hero__divider { width: 100%; height: 2px; align-self: auto; background: #000; }
  .split-hero__tagline { font-size: var(--text-h3); }

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

  /* WireHeadZ Mobile — Hero-Bild ausblenden, nur Farbe zeigen */
  .wh-hero--wh {
    background: #1a0a0c;
    min-height: unset;
  }
  .wh-hero--ev {
    background: #0e0a1a;
    min-height: unset;
  }

  /* WireHeadZ Mobile */
  .game-accordion__summary { min-height: 150px; padding: var(--space-lg); }
  .game-accordion__title { font-size: var(--text-h3); }
  .game-accordion__arrow { bottom: var(--space-lg); right: var(--space-lg); }
  .player-grid { grid-template-columns: repeat(2, 1fr); }
  .training-info { grid-template-columns: 1fr; }
  .events-teaser-grid { grid-template-columns: 1fr; }
  .join-cta__actions { flex-direction: column; width: 100%; }
  .btn--surface, .btn--ghost-light { justify-content: center; }

  /* Organigramm Mobile */
  .org-node { padding: var(--space-sm) var(--space-md); gap: var(--space-sm); }
  .org-node__photo { width: 36px; height: 36px; }
  .org-detail__header { flex-direction: column; align-items: center; text-align: center; }

  /* Events Mobile */
  .events-grid { grid-template-columns: 1fr; }
  .page-hero { min-height: 260px; }
  .page-hero--md { min-height: calc(300px + var(--nav-h, 64px)); }
  .page-hero--lg { min-height: calc(480px + var(--nav-h, 64px)); }
  .page-hero__title { font-size: clamp(1.8rem, 7vw, 2.5rem); }
  .event-coop__actions { flex-direction: column; width: 100%; }

  /* Event Modal Mobile */
  .event-modal { padding: 0; align-items: flex-end; }
  .event-modal__panel {
    grid-template-columns: 1fr;
    grid-template-rows: 220px 1fr;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    max-height: 95vh;
    height: auto;
  }
  .event-modal__detail { padding: var(--space-lg); border-left: none; border-top: 1px solid var(--color-border); }
}


/* ============================================
   EVENT MODAL
   ============================================ */

.event-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-sm);
  background: rgba(0,0,0,0.88);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.22s ease, visibility 0.22s ease;
}
.event-modal.open {
  opacity: 1;
  visibility: visible;
}

.event-modal__panel {
  position: relative;
  width: 100%;
  max-width: min(1440px, 96vw);
  height: clamp(520px, 88vh, 920px);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.5fr 400px;
  box-shadow: 0 32px 96px rgba(0,0,0,0.65);
  animation: modal-in 0.22s ease;
}

@keyframes modal-in {
  from { transform: scale(0.96) translateY(10px); opacity: 0; }
  to   { transform: scale(1)    translateY(0);    opacity: 1; }
}

.event-modal__close {
  position: absolute;
  top: var(--space-md);
  right: var(--space-md);
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.45);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  backdrop-filter: blur(4px);
}
.event-modal__close:hover { background: rgba(0,0,0,0.75); }

/* Gallery */
.event-modal__gallery {
  position: relative;
  background: #111;
  overflow: hidden;
  height: 100%;       /* fill grid cell */
}
.event-modal__gallery-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.35s ease;
}
.event-modal__gallery-slide {
  min-width: 100%;
  width: 100%;
  height: 100%;       /* inherit full height */
  flex-shrink: 0;
  overflow: hidden;
}
.event-modal__gallery-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  display: block;
}
.event-modal__gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: rgba(0,0,0,0.45);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  backdrop-filter: blur(4px);
}
.event-modal__gallery-nav:hover { background: rgba(0,0,0,0.75); }
.event-modal__gallery-nav--prev { left: var(--space-md); }
.event-modal__gallery-nav--next { right: var(--space-md); }

.event-modal__dots {
  position: absolute;
  bottom: var(--space-md);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 6px;
}
.event-modal__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.35);
  cursor: pointer;
  padding: 0;
  transition: background 0.15s, transform 0.15s;
}
.event-modal__dot.active {
  background: #fff;
  transform: scale(1.25);
}

/* Detail panel */
.event-modal__detail {
  overflow-y: auto;
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  border-left: 1px solid var(--color-border);
}
.event-modal__date-loc {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  font-weight: 500;
}
.event-modal__title {
  font-size: clamp(1.1rem, 2vw, 1.45rem);
  font-weight: var(--weight-bold);
  line-height: var(--leading-snug);
  color: var(--color-text);
  margin: 0;
}
.event-modal__loc-row {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}
.event-modal__badges-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.event-modal__desc {
  font-size: var(--text-body);
  line-height: var(--leading-relaxed);
  color: var(--color-text-secondary);
}
.event-modal__section { display: flex; flex-direction: column; gap: var(--space-xs); }
.event-modal__section-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--color-wireheadz);
}
.event-modal__highlights {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.event-modal__highlights li {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.5;
}
.event-modal__highlights li::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--color-wireheadz);
  flex-shrink: 0;
  margin-top: 6px;
}
.event-modal__partner-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.event-modal__partner-tag {
  font-size: var(--text-sm);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  color: var(--color-text-secondary);
}

/* Card clickable indicator */
.event-card[data-event] { cursor: pointer; }
.event-card__details-link {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  gap: 4px;
  transition: color 0.15s;
  user-select: none;
}
.event-card__details-link::after { content: ' →'; }
.event-card[data-event]:hover .event-card__details-link { color: var(--color-wireheadz); }

/* Tablet */
@media (max-width: 1023px) {
  .event-modal__panel {
    grid-template-columns: 1fr;
    grid-template-rows: 340px 1fr;
    height: auto;
    max-height: 92vh;
  }
  .event-modal__detail { border-left: none; border-top: 1px solid var(--color-border); }
}


/* ============================================
   PARTNER PAGE
   ============================================ */

/* ---- Partner Cards (Sponsoren) ---- */
.partner-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.partner-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-wireheadz);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.partner-card__logo {
  height: 44px;
  display: flex;
  align-items: center;
}
.partner-card__logo a {
  display: flex;
  align-items: center;
  height: 100%;
}
.partner-card__logo img {
  max-height: 100%;
  max-width: 160px;
  width: auto;
  object-fit: contain;
}
.partner-card__logo--text {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-text-muted);
  letter-spacing: -0.01em;
}
.partner-card__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.partner-card__type {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-wireheadz);
}
.partner-card__since {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}
.partner-card__since::before { content: '· '; }
.partner-card__name {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.partner-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.65;
  flex: 1;
  margin: 0;
}

/* ---- Kooperationsfelder ---- */
.kooperation-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
  margin-top: var(--space-xl);
}
.kooperation-block {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.kooperation-block__header {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.kooperation-block__icon {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-md);
  background: rgba(215,38,56,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-wireheadz);
  flex-shrink: 0;
}
[data-theme="dark"] .kooperation-block__icon {
  background: rgba(215,38,56,0.15);
}
.kooperation-block__title {
  font-size: var(--text-h3);
  font-weight: 700;
  margin: 0;
  color: var(--color-text);
  line-height: 1.2;
}
.kooperation-block__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0;
}
.kooperation-block__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.kooperation-block__list li {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding-left: 1.1em;
  position: relative;
}
.kooperation-block__list li::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--color-wireheadz);
}

/* ---- Business Club ---- */
.business-club-layout {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-2xl);
  align-items: start;
  margin-top: var(--space-xl);
}
.business-club__intro {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin: var(--space-md) 0 var(--space-lg);
}
.business-club__highlights {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.business-club__highlights li {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  font-size: var(--text-base);
  color: var(--color-text-secondary);
}
.business-club__highlights li::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-wireheadz);
  flex-shrink: 0;
  margin-top: 7px;
}
.business-club__members-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-xl);
}
.business-club__members-label {
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  margin: 0 0 var(--space-md);
}
.business-club__member-list {
  list-style: none;
  padding: 0;
  margin: 0 0 var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}
.business-club__member-list li {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  padding: var(--space-sm) var(--space-md);
  background: var(--color-bg);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-border);
}
.business-club__founded {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin: 0;
}

/* ---- Recruiting Features ---- */
.recruiting-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}
.recruiting-feature {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}
.recruiting-feature__num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--color-wireheadz);
  line-height: 1;
}
.recruiting-feature__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
}
.recruiting-feature__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.65;
  margin: 0;
}
.recruiting-cta {
  margin-top: var(--space-2xl);
  padding: var(--space-xl);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xl);
}
.recruiting-cta__text h3 {
  font-size: var(--text-h3);
  font-weight: 700;
  margin: 0 0 var(--space-xs);
}
.recruiting-cta__text p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ---- Partner Page Responsive ---- */
@media (max-width: 1023px) {
  .business-club-layout { grid-template-columns: 1fr; }
  .kooperation-grid { grid-template-columns: 1fr; gap: var(--space-xl); }
  .recruiting-grid { grid-template-columns: repeat(2, 1fr); }
  .recruiting-cta { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 600px) {
  .recruiting-grid { grid-template-columns: 1fr; }
  .partner-cards { grid-template-columns: 1fr; }
}


/* ============================================
   KONTAKT FORM
   ============================================ */

.form-categories {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  margin-bottom: var(--space-2xl);
}

.form-category-btn {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm) var(--space-lg);
  border-radius: 999px;
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
  font-size: var(--text-body);
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s, transform 0.1s;
  font-family: inherit;
  white-space: nowrap;
}
.form-category-btn:active { transform: scale(0.97); }
.form-category-btn:focus-visible {
  outline: 2px solid var(--color-wireheadz);
  outline-offset: 2px;
}

.form-category-btn:hover {
  border-color: var(--color-wireheadz);
  color: var(--color-wireheadz);
}

.form-category-btn.active {
  background: var(--color-wireheadz);
  border-color: var(--color-wireheadz);
  color: #fff;
}

.form-section {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl);
}

.form-section__heading {
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text);
  margin: 0 0 var(--space-xl);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-border);
}

.form-fields-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.form-group label {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text);
}

.form-required {
  color: var(--color-wireheadz);
  margin-left: 2px;
}

.form-optional {
  font-weight: 400;
  color: var(--color-text-muted);
  margin-left: 4px;
}

.form-group input,
.form-group select,
.form-group textarea {
  padding: 10px var(--space-md);
  border: 1.5px solid var(--color-border);
  border-radius: var(--radius-md);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-body);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
  width: 100%;
  box-sizing: border-box;
  appearance: none;
  -webkit-appearance: none;
}

.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-md) center;
  padding-right: calc(var(--space-md) + 24px);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  border-color: var(--color-wireheadz);
  box-shadow: 0 0 0 3px rgba(215,38,56,0.12);
}

.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: #dc2626;
  box-shadow: 0 0 0 3px rgba(220,38,38,0.12);
}

.form-group.has-error label {
  color: #dc2626;
}

.form-group textarea {
  resize: vertical;
  min-height: 110px;
  line-height: var(--leading-relaxed);
}

.form-hint {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
}

/* ---- Form Callout (Info-Box im Formular) ---- */
.form-callout {
  display: flex;
  gap: var(--space-sm);
  align-items: flex-start;
  background: color-mix(in srgb, var(--color-ui-primary) 8%, var(--color-bg));
  border: 1px solid color-mix(in srgb, var(--color-ui-primary) 25%, transparent);
  border-left: 3px solid var(--color-ui-primary);
  border-radius: var(--radius-sm);
  padding: var(--space-sm) var(--space-md);
  margin-top: var(--space-xs);
}

.form-callout__icon {
  color: var(--color-ui-primary);
  flex-shrink: 0;
  margin-top: 1px;
}

.form-callout p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: 0 0 4px;
  line-height: var(--leading-relaxed);
}

.form-callout p:last-child {
  margin-bottom: 0;
}

.form-callout__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--color-ui-primary);
  text-decoration: none;
}

.form-callout__link:hover {
  text-decoration: underline;
}

/* ---- Game Accordion: Join-Button ---- */
.game-accordion__join {
  margin-top: var(--space-lg);
  display: flex;
  justify-content: center;
}

.form-divider {
  border: none;
  border-top: 1px solid var(--color-border);
}

.form-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-top: var(--space-xl);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-xl);
}

.form-submit__note {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  line-height: var(--leading-relaxed);
  margin: 0;
}

/* Form responsive */
@media (max-width: 700px) {
  .form-grid { grid-template-columns: 1fr; }
  .form-section { padding: var(--space-lg); }
  .form-submit { flex-direction: column; align-items: stretch; }
  .form-submit .btn { justify-content: center; }
}

@media (max-width: 480px) {
  .form-category-btn { font-size: var(--text-sm); padding: var(--space-xs) var(--space-md); }
}


/* ============================================
   MITMACHEN PAGE
   ============================================ */

/* ---- Discord Feature ---- */
.discord-feature {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: var(--space-3xl);
  align-items: start;
}

.discord-feature__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.discord-feature__desc {
  font-size: var(--text-body-lg);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
}

.discord-feature__channels {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xs);
}

.discord-channel-tag {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  border: 1px solid var(--color-border);
}

.discord-channel-tag__hash {
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 0.85em;
}

.discord-feature__cta-card {
  background: #5865F2;
  border-radius: var(--radius-xl);
  padding: var(--space-2xl) var(--space-xl);
  text-align: center;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-md);
  position: sticky;
  top: calc(72px + var(--space-lg));
}

.discord-feature__cta-icon {
  width: 56px;
  height: 56px;
  color: rgba(255,255,255,0.9);
}

.discord-feature__cta-title {
  font-size: var(--text-h3);
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: var(--leading-snug);
}

.discord-feature__cta-stat {
  font-size: var(--text-body);
  color: rgba(255,255,255,0.75);
  margin: 0;
}

.discord-feature__cta-card .btn--white {
  width: 100%;
  justify-content: center;
}

/* ---- Join Paths (Team beitreten) ---- */
.join-paths {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

.join-path-card {
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  padding: var(--space-2xl) var(--space-xl);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-wireheadz);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.join-path-card--ev {
  border-top-color: var(--color-ev);
}

.join-path-card__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 4px var(--space-sm);
  background: rgba(215, 38, 56, 0.1);
  color: var(--color-wireheadz);
  border-radius: var(--radius-sm);
  font-size: var(--text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  align-self: flex-start;
}

.join-path-card--ev .join-path-card__badge {
  background: rgba(233, 30, 140, 0.1);
  color: var(--color-ev);
}

.join-path-card__title {
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text);
  margin: 0;
  line-height: var(--leading-snug);
}

.join-path-card__desc {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
}

.join-path-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  flex: 1;
}

.join-path-card__list li {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  padding: var(--space-xs) 0;
  border-bottom: 1px solid var(--color-border);
}

.join-path-card__list li:last-child {
  border-bottom: none;
}

.join-path-card__list li::before {
  content: '✓';
  color: var(--color-wireheadz);
  font-weight: 700;
  flex-shrink: 0;
  line-height: 1.6;
}

.join-path-card--ev .join-path-card__list li::before {
  color: var(--color-ev);
}

.join-path-card__cta {
  margin-top: var(--space-lg);
}

/* ---- Contact Grid ---- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  margin-top: var(--space-xl);
}

.contact-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.contact-card__icon {
  width: 48px;
  height: 48px;
  background: var(--color-wireheadz);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  flex-shrink: 0;
}

.contact-card__label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-text-muted);
  margin: 0;
}

.contact-card__title {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin: 0;
  line-height: var(--leading-snug);
}

.contact-card__desc {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  margin: 0;
  flex: 1;
}

/* ---- FAQ ---- */
.faq-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  overflow: hidden;
  margin-top: var(--space-xl);
}

.faq-item {
  border-bottom: 1px solid var(--color-border);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-lg) var(--space-xl);
  cursor: pointer;
  list-style: none;
  background: var(--color-surface);
  font-weight: 600;
  font-size: var(--text-body);
  color: var(--color-text);
  gap: var(--space-md);
  transition: background 0.15s;
}

.faq-item summary:hover {
  background: var(--color-bg);
}

.faq-item summary::-webkit-details-marker { display: none; }

.faq-item summary .faq-chevron {
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform 0.22s ease;
}

.faq-item[open] > summary .faq-chevron {
  transform: rotate(180deg);
}

.faq-item[open] > summary {
  border-bottom: 1px solid var(--color-border);
  background: var(--color-bg);
}

.faq-item__body {
  padding: var(--space-lg) var(--space-xl);
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  background: var(--color-bg);
}

.faq-item__body a {
  color: var(--color-wireheadz);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ============================================
   LEGAL PAGES (Impressum, Datenschutz)
   ============================================ */

.legal-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
  padding: var(--space-2xl) 0 var(--space-3xl);
}

.legal-section {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.legal-section > h2 {
  font-size: var(--text-h3);
  font-weight: 700;
  color: var(--color-text);
  padding-bottom: var(--space-sm);
  border-bottom: 2px solid var(--color-wireheadz);
  margin: 0;
  line-height: var(--leading-snug);
}

.legal-section > h3 {
  font-size: var(--text-base);
  font-weight: 600;
  color: var(--color-text);
  margin: var(--space-sm) 0 0;
}

.legal-section p,
.legal-section address {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  font-style: normal;
  margin: 0;
}

.legal-section a {
  color: var(--color-wireheadz);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.legal-block {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.legal-block + .legal-block {
  margin-top: var(--space-md);
}

.legal-block__label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--color-wireheadz);
  margin: 0;
}

.legal-block__label--ev {
  color: var(--color-ev);
}

.legal-block address {
  font-size: var(--text-body);
  color: var(--color-text-secondary);
  line-height: var(--leading-relaxed);
  font-style: normal;
}

.legal-block a {
  color: var(--color-wireheadz);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Page hero without image (legal pages) */
.page-hero--plain {
  min-height: 180px;
  align-items: center;
}

.page-hero--plain::before {
  background: rgba(0,0,0,0.25);
}

/* ---- Mitmachen Responsive ---- */
@media (max-width: 1023px) {
  .discord-feature { grid-template-columns: 1fr; }
  .discord-feature__cta-card { position: static; max-width: 480px; }
  .contact-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
  .join-paths { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .discord-feature__channels { grid-template-columns: 1fr; }
  .faq-item summary { padding: var(--space-md) var(--space-lg); }
  .faq-item__body { padding: var(--space-md) var(--space-lg); }
}


/* =============================================
   HINTERGRUND-DEKO — Tiefe & Formen (Tier 1+2+3)
   Dezente Glows, Dot-Grid, geometrische Akzente.
   Dunkle Sektionen nutzen --color-ui-primary in
   BEIDEN Themes → Deko funktioniert in Light & Dark.
   ============================================= */

/* Position + Clipping-Kontext für die Deko-Ebenen */
.cta-banner,
.partners,
.footer,
.discord-cta,
.stats-block,
.section--dark {
  position: relative;
  overflow: hidden;
}

/* Glow-Ebenen (Marken-Rot + Pink) als background-image.
   Grundfarbe (--color-ui-primary) bleibt erhalten, weil
   nur das image-Longhand gesetzt wird. */
.cta-banner,
.partners,
.footer,
.stats-block,
.section--dark {
  background-image:
    radial-gradient(60% 70% at 6% 92%, rgba(215, 38, 56, 0.18), transparent 60%),
    radial-gradient(55% 65% at 94% 8%, rgba(233, 30, 140, 0.15), transparent 62%);
}

/* Discord-CTA: kompakter, mit Discord-Blurple als Akzent */
.discord-cta {
  background-image:
    radial-gradient(75% 95% at -8% 112%, rgba(88, 101, 242, 0.24), transparent 62%),
    radial-gradient(60% 80% at 112% -12%, rgba(215, 38, 56, 0.14), transparent 60%);
}

/* Feines Dot-Grid (Wire/Node-Thema) auf allen dunklen Sektionen */
.cta-banner::before,
.partners::before,
.footer::before,
.discord-cta::before,
.stats-block::before,
.section--dark::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1.5px);
  background-size: 24px 24px;
}

/* Inhalt über die Deko-Ebenen heben */
.cta-banner > .container,
.partners > .container,
.stats-block > .container,
.section--dark > .container {
  position: relative;
  z-index: 1;
}
.footer > .footer__grid,
.footer > .footer__bottom { position: relative; z-index: 1; }
.discord-cta > * { position: relative; z-index: 1; }

/* Tier 2 — Geometrische Akzente (Hexagone + Node-Cluster) nur am CTA-Banner */
.cta-banner::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat, no-repeat;
  background-position: left -45px bottom -40px, right -25px top -45px;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='210' height='210' viewBox='0 0 210 210'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='1.5'%3E%3Cpolygon points='105,18 174,58 174,138 105,178 36,138 36,58'/%3E%3Cpolygon points='105,52 144,75 144,121 105,144 66,121 66,75'/%3E%3C/g%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='160' viewBox='0 0 200 160'%3E%3Cg stroke='%23ffffff' stroke-opacity='0.10' stroke-width='1.5' fill='none'%3E%3Cline x1='30' y1='44' x2='112' y2='30'/%3E%3Cline x1='112' y1='30' x2='162' y2='92'/%3E%3Cline x1='112' y1='30' x2='72' y2='112'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.13'%3E%3Ccircle cx='30' cy='44' r='4'/%3E%3Ccircle cx='112' cy='30' r='5'/%3E%3Ccircle cx='162' cy='92' r='4'/%3E%3Ccircle cx='72' cy='112' r='4'/%3E%3C/g%3E%3C/svg%3E");
  animation: whzDrift 26s ease-in-out infinite alternate;
}

/* Tier 2 — Schräger Übergang Hell→Dunkel (history-teaser → partners) */
.partners {
  clip-path: polygon(0 2.2vw, 100% 0, 100% 100%, 0 100%);
  padding-top: calc(var(--space-xl) + 2.2vw);
}

/* Helle Sektionen dezent tönen (Light & Dark tauglich) */
.mission {
  background-image: radial-gradient(42% 60% at 88% 2%, rgba(215, 38, 56, 0.05), transparent 70%);
}
.community {
  background-image: radial-gradient(45% 65% at 6% 0%, rgba(233, 30, 140, 0.05), transparent 72%);
}

/* Tier 3 — 3D-Tilt: eigener Composite-/Transform-Kontext für die Karten */
.area-card,
.game-card { transform-style: preserve-3d; }


/* =============================================
   BEWEGUNG — sanft driftende Node/Hexagon-Formen
   in den dunklen Bereichen. Transform-basiert (GPU),
   pro Bereich entkoppelt (Richtung/Tempo/Delay), damit
   gestapelte Bereiche nicht synchron/identisch wirken.
   ============================================= */
.partners::after,
.footer::after,
.stats-block::after,
.discord-cta::after,
.section--dark::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='150' viewBox='0 0 190 150'%3E%3Cg stroke='%23ffffff' stroke-opacity='0.09' stroke-width='1.5' fill='none'%3E%3Cline x1='28' y1='40' x2='104' y2='28'/%3E%3Cline x1='104' y1='28' x2='152' y2='86'/%3E%3Cline x1='104' y1='28' x2='66' y2='104'/%3E%3C/g%3E%3Cg fill='%23ffffff' fill-opacity='0.12'%3E%3Ccircle cx='28' cy='40' r='4'/%3E%3Ccircle cx='104' cy='28' r='5'/%3E%3Ccircle cx='152' cy='86' r='4'/%3E%3Ccircle cx='66' cy='104' r='4'/%3E%3C/g%3E%3C/svg%3E");
  animation: whzDrift 32s ease-in-out infinite alternate;
}
.partners::after    { background-position: right 7% top 32%;    animation-name: whzDriftB; animation-duration: 30s; }
.footer::after      { background-position: left 6% top 38%;     animation-duration: 38s; animation-delay: -14s; }
.stats-block::after { background-position: right 9% bottom 28%; animation-name: whzDriftB; animation-duration: 34s; }
.discord-cta::after { background-position: right 11% top 20%;   animation-duration: 26s; }

@keyframes whzDrift  { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(16px, -13px, 0); } }
@keyframes whzDriftB { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-15px, 12px, 0); } }

/* Reduced Motion: keine Drift, kein Cursor-Spot */
@media (prefers-reduced-motion: reduce) {
  .cta-banner::after,
  .partners::after,
  .footer::after,
  .stats-block::after,
  .discord-cta::after,
  .section--dark::after { animation: none; }
  .whz-spot { display: none; }
}


/* =============================================
   "BLAUE"/HELLE BEREICHE — schlicht halten
   Partner (Startseite) + alle CTA-Banner verlieren
   die Deko, damit nichts mehr gestapelt wiederholt.
   Die bewegte Deko bleibt nur am Footer/Discord.
   ============================================= */
.partners,
.cta-banner {
  background-image: none;
  clip-path: none;
}
.partners { padding-top: var(--space-xl); }
.partners::before,
.partners::after,
.cta-banner::before,
.cta-banner::after { content: none; }

/* Startseiten-CTA "Werde Teil von WireHeadZ": hell statt dunkel */
.cta-banner--light { background: var(--color-surface); }
.cta-banner--light .cta-banner__title    { color: var(--color-text); }
.cta-banner--light .cta-banner__subtext  { color: var(--color-text-secondary); }


/* =============================================
   INTERAKTIVER CURSOR-SPOT — das Raster „reagiert"
   auf die Maus: hellere Punkte erscheinen rund um
   den Cursor (per Maske an Mausposition).
   Liegt deckungsgleich über dem Basis-Raster.
   ============================================= */
.whz-spot {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  background-image: radial-gradient(rgba(255, 255, 255, 0.42) 1px, transparent 1.6px);
  background-size: 24px 24px;
  -webkit-mask: radial-gradient(circle 150px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, 0.45) 45%, transparent 72%);
          mask: radial-gradient(circle 150px at var(--mx, 50%) var(--my, 50%), #000 0%, rgba(0, 0, 0, 0.45) 45%, transparent 72%);
}
.whz-spot.is-hot { opacity: 1; }