/* === global: css/style.css === */
/* ═══════════════════════════════════════════════════════════════
   SISSI STATE PUNKS — Cyberpunk E-Sports Theme
   Reines CSS (konvertiert von Tailwind v4 + React)
   ═══════════════════════════════════════════════════════════════ */

/* [SCHICHT-1: TOKEN] */
/* ── Self-hosted Fonts (DSGVO-konform, kein externer Google-Request) ──
   Iceland (Headlines) + Gudea (Body), OFL-lizenziert, lokal aus /fonts/. */
/* latin-ext */
@font-face {
  font-family: 'Gudea';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/neILzCqgsI0mp9CNzoymM5Ez.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Gudea';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/neILzCqgsI0mp9CNzoKmMw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Gudea';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/neIFzCqgsI0mp9CG_oC-Nw.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Gudea';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/neIFzCqgsI0mp9CI_oA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
  font-family: 'Gudea';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/neIIzCqgsI0mp9gz25WPFqwKUQ.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
  font-family: 'Gudea';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(../fonts/neIIzCqgsI0mp9gz25WBFqw.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin */
@font-face {
  font-family: 'Iceland';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/rax9HiuFsdMNOnWPaKtMAQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* [SCHICHT-1: TOKEN] */
/* ── CSS Custom Properties (Design System) ── */
:root {
  --font-headline: 'Iceland', monospace, sans-serif;
  --font-body: 'Gudea', 'Helvetica Neue', Arial, sans-serif;

  /* Farben — werden vom CMS überschrieben */
  --bg: #0e0e12;
  --bg-surface: #131318;
  --bg-surface-container: #19191e;
  --bg-surface-high: #1f1f25;
  --text: #f3eff6;
  --text-muted: #71717a;
  --text-on-primary: #3d4a00;
  --accent: #fdd901;
  --accent-tertiary: #ff6e81;
  --border: #48474c;
  --border-light: rgba(253, 217, 1, 0.12);
  --outline-variant: #48474c;

  /* Neon glow tokens */
  --neon: #fdd901;
  --neon-glow: rgba(253, 217, 1, 0.45);
  --neon-glow-strong: rgba(253, 217, 1, 0.7);
  --neon-subtle: rgba(253, 217, 1, 0.28);
  --pink-glow: rgba(255, 60, 180, 0.35);
}

/* [SCHICHT-2: BASE] */
/* ── Reset & Base ── */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  overflow-x: hidden;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Sticky-Footer: Seite als vertikale Flex-Spalte (header / main / footer).
     Zusammen mit min-height:100vh + main{flex:1} bleibt der Footer auch auf
     kurzen Seiten ganz unten am Viewport-Rand. */
  display: flex;
  flex-direction: column;
}

/* Sticky-Footer: Content-Bereich waechst und drueckt den Footer nach unten.
   flex: 1 0 auto = wachsen erlaubt, schrumpfen verboten → kein Zusammenfallen
   bei wenig Inhalt. Greift auf allen Seiten, weil <main> ueberall direktes
   body-Kind zwischen Header- und Footer-Include ist. */
main {
  flex: 1 0 auto;
}

::selection {
  background: var(--accent);
  color: var(--text-on-primary);
}

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

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

button {
  border: none;
  background: none;
  cursor: pointer;
  font-family: inherit;
  color: inherit;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-headline);
}

/* [SCHICHT-2: BASE] */
/* ── Utility: Notched Corners (Cyberpunk clipping) ── */
.notched-corner {
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
}

.notched-button {
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

/* [SCHICHT-2: BASE] */
/* ── Container ── */
.container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 16px;
}

@media (min-width: 640px) {
  .container { padding: 0 24px; }
}
@media (min-width: 1024px) {
  .container { padding: 0 32px; }
}

/* [SCHICHT-2: BASE] */
/* ── Section Label ── */
.section-label {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 24px;
  letter-spacing: 0.14em;
  color: #ffffff;
  text-transform: uppercase;
  margin-bottom: 18px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(to right, rgba(253, 217, 1, 0.35) 0%, transparent 100%);
  max-width: 320px;
}

/* Modifier: Section-Label im Stil des Page-Hero-Titels
   (Headline-Font, größerer clamp, -0.01em letter-spacing,
   <em> als Akzent in Gelb).
   Verwendet in: partners, crew-filter, event-past, management.

   WICHTIG: muss display:block sein und NICHT flex erben — sonst werden
   <em> und der nachfolgende Text-Node zu separaten Flex-Items, das
   `gap: 14px` der Basis-Klasse setzt einen sichtbaren Abstand zwischen
   "P" und "ARTNER", und bei vielen Wörtern wirkt der Yellow-Anteil
   weggeshrinkt. */
.section-label--hero {
  display: block;
  font-family: var(--font-headline);
  font-weight: 900;
  font-size: clamp(26px, 3vw, 36px);
  letter-spacing: -0.01em;
  line-height: 1;
  color: #fff;
  gap: 0;                              /* falls die flex-gap-Regel weiter erbt */
}
.section-label--hero::after {
  display: none;                       /* die gold-fading Linie der Basis-Klasse passt zur Hero-Variante nicht */
}
.section-label--hero em {
  color: var(--accent);
  font-style: normal;
}

/* ────────────────────────────────────────────────────────
   GLOBAL SECTION HEADER (HUD-Stil) — wie crew-filter "TEAMS & CREATORS"
   Verwendung: <div class="tc-section-header">
                 <div class="tc-section-header-left">
                   <span class="tc-section-tag">SSP://...</span>
                   <p class="section-label">...</p>
                 </div>
                 <div class="tc-section-header-right">
                   <span class="tc-section-count" data-tc-count>...</span>
                 </div>
               </div>
   ──────────────────────────────────────────────────────── */
.tc-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(253, 217, 1, 0.08);
}

@media (min-width: 768px) {
  .tc-section-header { margin-bottom: 36px; }
}

.tc-section-header-left {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tc-section-tag {
  font-family: var(--font-headline);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(253, 217, 1, 0.85);
}

.tc-section-header .section-label {
  margin: 0;
}

.tc-section-count {
  font-family: var(--font-headline);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(253, 217, 1, 0.55);
  white-space: nowrap;
  padding-bottom: 2px;
}

/* [SCHICHT-2: BASE] ════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════ */
.btn-primary {
  display: inline-block;
  font-family: var(--font-headline);
  font-weight: 700;
  padding: 10px 24px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transition: all 0.2s;
  background: var(--accent);
  color: var(--text-on-primary);
}

.btn-primary:hover {
  box-shadow: 0 0 20px rgba(253, 217, 1, 0.6);
}

.btn-primary:active {
  transform: scale(0.95);
}

.btn-secondary {
  display: inline-block;
  font-family: var(--font-headline);
  font-weight: 700;
  padding: 10px 24px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  transition: all 0.2s;
  border: 2px solid var(--accent);
  color: var(--accent);
  background: transparent;
}

.btn-secondary:hover {
  background: rgba(253, 217, 1, 0.1);
}

/* [SCHICHT-3: hero] ════════════════════════════
   HERO
   ═══════════════════════════════════════════════ */
.hero {
  position: relative;
  overflow: hidden;
  height: clamp(420px, 75svh, 680px);
}

/* City background */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center top;
  filter: blur(2px) brightness(0.55) saturate(1.1);
  transform: scale(1.0);
  will-change: transform;
}

/* Neon tints overlay */
.hero-tints {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 68% 55%, rgba(253, 217, 1, 0.07) 0%, transparent 40%),
    radial-gradient(ellipse at 28% 72%, rgba(253, 217, 1, 0.04) 0%, transparent 38%),
    linear-gradient(to bottom, rgba(0, 0, 0, 0.35) 0%, transparent 35%),
    linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 45%);
}

/* Scanlines */
.hero-scanlines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 2px,
    rgba(0, 0, 0, 0.13) 2px, rgba(0, 0, 0, 0.13) 4px
  );
}

/* Floor grid */
.hero-grid {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 2;
  pointer-events: none;
  height: 45%;
  background-image:
    linear-gradient(rgba(253, 217, 1, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(253, 217, 1, 0.035) 1px, transparent 1px);
  background-size: 48px 24px;
  -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
  mask-image: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, transparent 100%);
}

/* Horizon neon line */
.hero-horizon {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 2px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(90deg, transparent 0%, rgba(253, 217, 1, 0.5) 15%, rgba(253, 217, 1, 0.9) 50%, rgba(253, 217, 1, 0.5) 85%, transparent 100%);
  box-shadow: 0 0 20px rgba(253, 217, 1, 0.5), 0 0 60px rgba(253, 217, 1, 0.18);
}

/* Bottom gradient */
.hero-fade-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 128px;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(to bottom, transparent, #0e0e12);
}

/* Woman */
.hero-woman-wrap {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: flex-end;
}

.woman-pos {
  flex-shrink: 0;
  transform: translate(200px, 30px);
}

@media (min-width: 1024px) {
  .woman-pos { transform: translate(200px, 100px); }
}

.hero-woman {
  width: auto;
  object-fit: contain;
  object-position: bottom;
  max-width: 100%;
  height: calc(min(75svh, 680px) + 80px);
  will-change: transform;
  filter: drop-shadow(-30px 0 90px rgba(253, 217, 1, 0.12)) drop-shadow(0 0 100px rgba(253, 217, 1, 0.14));
}

/* Light shafts */
.hero-shafts {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.hero-shaft {
  position: absolute;
  top: 0;
  width: 1px;
  height: 100%;
}

/* Hero text content */
.hero-content {
  position: absolute;
  left: 16px;
  z-index: 8;
  max-width: 90%;
  top: 50%;
  transform: translateY(calc(-50% + 20px));
}

@media (min-width: 640px) {
  .hero-content { left: 32px; max-width: 75%; }
}

@media (min-width: 1024px) {
  .hero-content { left: 260px; max-width: 48%; }
}

.hero-title {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  color: #fff;
  line-height: 0.88;
  margin-bottom: 12px;
  font-size: clamp(40px, 4.8vw, 68px);
  letter-spacing: -0.02em;
  text-shadow: 0 2px 40px rgba(0, 0, 0, 0.9), 0 0 60px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
  font-family: var(--font-headline);
  font-size: 14px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  margin-bottom: 20px;
  color: var(--accent);
  text-shadow: 0 0 12px var(--neon-glow);
}

.hero-coord {
  font-family: var(--font-headline);
  font-size: 7px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  display: block;
  margin-top: 16px;
  color: rgba(253, 217, 1, 0.4);
}

/* [SCHICHT-3: hero] */
/* ── HUD Elements (Desktop only) ── */
.hud-element {
  display: none;
}

@media (min-width: 1024px) {
  .hud-element { display: block; }
  .hud-element-flex { display: flex; }
}

/* HUD Bracket SVGs */
.hud-bracket-left {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  left: 50px;
  top: 83px;
  width: 56px;
  height: calc(100% - 110px);
  filter: drop-shadow(0 0 4px rgba(253, 217, 1, 0.18));
}

.hud-bracket-right {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  right: 50px;
  top: 83px;
  width: 56px;
  height: calc(100% - 110px);
  filter: drop-shadow(0 0 4px rgba(253, 217, 1, 0.18));
}

/* HUD Data panels */
.hud-data-panel {
  position: absolute;
  z-index: 8;
  pointer-events: none;
  top: 116px;
  left: 80px;
}

.hud-data-box {
  background: rgba(0, 0, 0, 0.62);
  padding: 7px 10px 7px 8px;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-left: 1px solid rgba(253, 217, 1, 0.18);
  border-right: 2px solid rgba(253, 217, 1, 0.5);
  border-top: 1px solid rgba(253, 217, 1, 0.1);
  border-bottom: 1px solid rgba(253, 217, 1, 0.1);
}

.hud-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-headline);
  font-size: 8px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 2px;
}

.hud-row-key {
  color: rgba(253, 217, 1, 0.38);
  margin-right: 12px;
}

.hud-row-val {
  color: rgba(253, 217, 1, 0.82);
}

.hud-row-val.active {
  color: var(--accent);
  animation: text-blink 3.5s ease-in-out infinite;
}

/* Right panel */
.hud-right-panel {
  position: absolute;
  z-index: 11;
  pointer-events: none;
  right: 66px;
  top: 99px;
  bottom: 43px;
  width: 158px;
  gap: 10px;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
}

.hud-stats-box {
  width: 100%;
  background: rgba(0, 0, 0, 0.42);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border-left: 2px solid rgba(253, 217, 1, 0.45);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hud-stats-label {
  font-family: var(--font-headline);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 8px;
  color: rgba(253, 217, 1, 0.35);
}

.hud-stat-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-headline);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  font-size: 9px;
}

.hud-stat-key { color: rgba(253, 217, 1, 0.3); }
.hud-stat-val { color: rgba(253, 217, 1, 0.85); }

.hud-signal-box {
  width: 100%;
  background: rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border: 1px solid rgba(253, 217, 1, 0.12);
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Scan bar */
.scan-bar {
  position: relative;
  height: 2px;
  background: rgba(253, 217, 1, 0.08);
  overflow: hidden;
}

.scan-bar-inner {
  position: absolute;
  top: 0;
  left: 0;
  width: 40%;
  height: 100%;
  background: linear-gradient(to right, transparent, var(--accent), transparent);
  animation: scan-x 2.4s linear infinite;
}

/* [SCHICHT-3: cta] ═════════════════════════════
   UPCOMING EVENT
   ═══════════════════════════════════════════════ */
.upcoming {
  padding: 40px 0;
  border-bottom: 1px solid rgba(253, 217, 1, 0.12);
  background: rgba(8, 8, 7, 0.82);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}

.upcoming-inner {
  display: flex;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
}

@media (min-width: 1024px) {
  .upcoming-inner { gap: 56px; }
}

.upcoming-left {
  flex: 1;
  min-width: min(300px, 100%);
}

.upcoming-title {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 32px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  color: #fff;
  margin-bottom: 14px;
}

/* Countdown */
.countdown {
  display: flex;
  align-items: center;
  gap: 6px;
}

.countdown-num {
  font-family: var(--font-headline);
  font-size: clamp(36px, 8vw, 52px);
  line-height: 1;
  color: var(--accent);
  text-shadow: 0 0 6px var(--neon-glow-strong), 0 0 20px rgba(253, 217, 1, 0.25);
  min-width: 2.2ch;
  display: inline-block;
  letter-spacing: -0.02em;
}

.countdown-unit {
  font-family: var(--font-headline);
  font-size: 18px;
  color: var(--accent);
  opacity: 0.6;
  letter-spacing: 0.05em;
}

.countdown-sep {
  font-family: var(--font-headline);
  font-size: 40px;
  color: var(--accent);
  opacity: 0.45;
  margin: 0 1px;
  line-height: 1;
}

/* Event card */
.event-card {
  position: relative;
  width: 100%;
  max-width: 680px;
  will-change: transform;
  transition: transform 0.3s;
}

@media (min-width: 1024px) {
  .event-card { flex-shrink: 0; }
}

.event-card:hover {
  transform: translateY(-5px);
}

.card-tag {
  position: absolute;
  top: -12px;
  left: 0;
  background: var(--accent);
  padding: 4px 16px;
  z-index: 10;
}

/* Wenn der Hashtag im CMS nicht befüllt ist (span leer),
   bleibt der Badge breiter (mind. 5 px mehr als der
   zusammengeklappte Zustand) — sieht als bewusster Akzent aus */
.card-tag:has(span:empty) {
  min-width: 48px;
}

.card-tag span {
  color: var(--text-on-primary);
  font-family: var(--font-headline);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.card-body {
  border: 2px solid rgba(72, 71, 76, 0.3);
  background: var(--bg-surface-container);
  overflow: hidden;
  position: relative;
  transition: border-color 0.3s;
}

.event-card:hover .card-body,
.card-wrap:hover .card-body {
  border-color: var(--accent);
}

/* Card image container */
.card-img-wrap {
  position: relative;
  overflow: hidden;
  transform: translateZ(0); /* GPU layer */
}

.card-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: scale 2500ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: scale;
}

.card-wrap:hover .card-img-wrap img,
.event-card:hover .card-img-wrap img {
  scale: 1.1;
}

/* ── Logo-Modus für Event-Bilder ──────────────────────────────────
   Wenn im CMS pro Event "Bild ist ein Logo" aktiviert ist, setzt das
   Panel-JS die Klasse .is-logo auf .card-img-wrap. Das Bild wird dann
   NICHT formatfüllend beschnitten (cover), sondern kleiner + zentriert
   + vollständig sichtbar (contain) dargestellt — optimiert für
   transparente Logos. !important, da Panel-CSS .card-img-wrap img
   formatfüllend überschreibt. Gilt einheitlich für alle Event-Panels. */
.card-img-wrap.is-logo {
  display: flex !important;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.22);
}
.card-img-wrap.is-logo img {
  width: 60% !important;
  height: 60% !important;
  object-fit: contain !important;
  scale: 1 !important;
  transform: none !important;
}
/* Kein Zoom-Hover auf Logos (würde unsauber wirken) */
.card-wrap:hover .card-img-wrap.is-logo img,
.event-card:hover .card-img-wrap.is-logo img,
.event-past-card-wrap:hover .card-img-wrap.is-logo img {
  scale: 1 !important;
  transform: none !important;
}

/* ── Event-Hintergrundbild (hinter dem Vordergrund-Bild/Logo) ─────
   Wie bei den Crew-Cards: ein Background-Layer im Bildbereich, das CMS
   setzt sein "background-image" inline (Feld background_image), sonst
   greift der Default SSP_CyberSissi_Hintergrund.webp. Das Bild wird
   formatfüllend beschnitten (cover, zentriert) und orientiert sich am
   Vordergrund. Liegt HINTER dem <img> (z-index). */
.card-img-wrap .event-img-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('../media/SSP_CyberSissi_Hintergrund.webp');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  pointer-events: none;
}
/* Vordergrund-Bild/Logo über dem Hintergrund-Layer. Nur dort wo ein
   .event-img-bg existiert (Event-Cards) — damit Gallery/CTA-Overlays
   nicht ungewollt überdeckt werden. */
.card-img-wrap:has(.event-img-bg) img {
  position: relative;
  z-index: 1;
}

/* Card gradient overlay */
.card-gradient {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 120px;
  pointer-events: none;
  z-index: 2;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 0%, transparent 100%);
}

/* Event detail grid */
.event-details {
  padding: 24px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
  position: relative;
  z-index: 3;
}

.event-detail-item {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.event-detail-icon {
  margin-top: 2px;
  flex-shrink: 0;
}

.event-detail-label {
  font-family: var(--font-headline);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 4px;
  color: var(--accent);
}

.event-detail-value {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 12px;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.4;
}

/* [SCHICHT-3: partners] ════════════════════════
   ⚠ ENTFERNT — Multi-Row Logo Bar (Z.793–867)
   War ein konkurrierender Style-Block zum Quadrat-Tile-Design in
   panels/partners/partners.css und hat dieses überschrieben.
   Der einzige Style für .partner lebt jetzt in partners.css.
   ═══════════════════════════════════════════════ */


/* [SCHICHT-3: partners] ════════════════════════
   CMS PARTNER CARDS — Creator Detail (creator.html)
   #partners.partners-detail
   ═══════════════════════════════════════════════ */
.partners-detail [data-cms-partners] {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.partners-detail .cms-partner-row {
  display: contents; /* grid items fallen direkt in den parent-grid */
}
.partners-detail .cms-partner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 28px 20px 24px;
  background: var(--bg-surface);
  border: 1px solid rgba(253,217,1,0.08);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  text-decoration: none;
  transition: border-color 0.2s, transform 0.2s;
  position: relative;
}
.partners-detail .cms-partner-card::before {
  content: '';
  position: absolute;
  top: 0; right: 12px;
  width: calc(100% - 12px); height: 1px;
  background: rgba(253,217,1,0.06);
}
.partners-detail .cms-partner-card:hover {
  border-color: rgba(253,217,1,0.3);
  transform: translateY(-2px);
}
.partners-detail .cms-partner-logo {
  max-width: 100px;
  max-height: 48px;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.45);
  transition: filter 0.25s;
}
.partners-detail .cms-partner-card:hover .cms-partner-logo {
  filter: brightness(0) invert(1) opacity(0.9);
}
.partners-detail .cms-partner-name {
  font-family: var(--font-headline);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}

/* [SCHICHT-2: BASE] ════════════════════════════
   CARDS (shared pattern for teams, impressions, management)
   ═══════════════════════════════════════════════ */
.card-grid {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  gap: 24px;
  padding: 16px 4px 16px 4px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.card-grid::-webkit-scrollbar { display: none; }

@media (min-width: 768px) {
  .card-grid {
    display: grid;
    overflow: visible;
    scroll-snap-type: none;
    padding: 0;
  }
}

.card-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 48px; }
.card-grid-4 { grid-template-columns: repeat(4, 1fr); gap: 24px; }

.card-wrap {
  scroll-snap-align: start;
  flex-shrink: 0;
  width: 85vw;
  position: relative;
  will-change: transform;
  opacity: 0.72;
  transition: opacity 0.5s, transform 0.3s;
}

.card-wrap:hover,
.card-wrap:active {
  opacity: 1;
}

.card-wrap:hover {
  transform: translateY(-5px);
}

@media (min-width: 768px) {
  .card-wrap { width: auto; }
}

.card-wrap-sm {
  width: 70vw;
}

@media (min-width: 768px) {
  .card-wrap-sm { width: auto; }
}

/* Card inner content */
.card-content {
  padding: 32px;
}

.card-title {
  color: var(--accent);
  font-family: var(--font-headline);
  font-size: 1.875rem;
  font-weight: 900;
  margin-bottom: 12px;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.025em;
}

.card-title-sm {
  font-size: 0.875rem;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.025em;
}

.card-desc {
  color: var(--text-muted);
  font-size: 14px;
  font-family: var(--font-body);
  margin-bottom: 32px;
  line-height: 1.625;
  font-style: italic;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid rgba(39, 39, 42, 0.5);
  padding-top: 20px;
}

.card-stat {
  font-size: 10px;
  color: rgba(253, 217, 1, 0.6);
  font-family: var(--font-headline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.2em;
}

.card-arrow {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(253, 217, 1, 0.1);
  transition: background 0.2s;
  /* WICHTIG: Pfeil immer rechts — siehe Hinweis bei .cms-crew-stats::after.
     Auch wenn der Stat-Text leer ist, soll der Pfeil rechts sitzen. */
  margin-left: auto;
}

.card-wrap:hover .card-arrow {
  background: var(--accent);
}

.card-arrow svg {
  width: 20px;
  height: 20px;
  color: var(--accent);
  transition: color 0.2s;
}

.card-wrap:hover .card-arrow svg {
  color: var(--text-on-primary);
}

/* [SCHICHT-3: team] ════════════════════════════
   TEAMS & GAMES SECTION
   ═══════════════════════════════════════════════ */
.teams-section {
  background: var(--bg-surface);
  padding: 40px 0;
}

@media (min-width: 768px) {
  .teams-section { padding: 96px 0; }
}

.section-header {
  margin-bottom: 24px;
}

@media (min-width: 768px) {
  .section-header { margin-bottom: 48px; }
}

/* [SCHICHT-3: team] ════════════════════════════════════════
   CREW-SYSTEM
   Kategorien-Bar + Featured-Crew-Cards (CMS-managed via data-cms-crew)
   Wird auf index.html (#team) und teams.html (Übersicht) verwendet.
   ═══════════════════════════════════════════════════════════ */

/* ── Kategorien-Box (Label + Bar) ── */
.crew-categories-box {
  background: var(--accent);
  clip-path: polygon(16px 0, 100% 0, 100% 100%, 0 100%, 0 16px);
  filter: drop-shadow(0 0 8px rgba(253,217,1,0.5)) drop-shadow(0 0 20px rgba(253,217,1,0.15));
  margin-bottom: 40px;
}
.crew-categories-box-inner {
  background: var(--bg-surface);
  margin: 3px;
  clip-path: polygon(13px 0, 100% 0, 100% 100%, 0 100%, 0 13px);
}
.crew-categories-box-label {
  font-family: var(--font-headline);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0;
  padding: 7px 14px;
  border-bottom: 1px solid rgba(72, 71, 76, 0.4);
}
@media (min-width: 768px) {
  .crew-categories-box { margin-bottom: 56px; }
}

/* ── Kategorien-Bar ── */
.crew-categories {
  display: flex;
  gap: 12px;
  margin-bottom: 0;
  align-items: stretch;
  min-height: 105px;
  padding: 12px;
  box-sizing: border-box;
}
@media (max-width: 767px) {
  .crew-categories { flex-direction: column; min-height: 0; }
}

/* Featured-Zone (links) — flex-Wert wird von JS proportional gesetzt */
.crew-cat-featured-zone {
  display: flex;
  gap: 12px;
  align-items: stretch;
  flex: 1;
}
.crew-cat-featured-zone:empty { display: none; }

/* Gelber Trennstrich zwischen Featured-Zone und Rotating-Zone */
.crew-cat-divider {
  flex: 0 0 3px;
  align-self: stretch;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(253,217,1,0.5), 0 0 20px rgba(253,217,1,0.15);
  opacity: 0.9;
  border-radius: 2px;
}
.crew-cat-divider:first-child,
.crew-cat-featured-zone:empty + .crew-cat-divider { display: none; }
@media (max-width: 767px) {
  .crew-cat-divider { display: none; }
}

/* Rotierende Zone (rechts) — viewport + track + ◀ ▶ */
.crew-cat-rotating-zone {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 8px;
  position: relative;
}

.crew-cat-rotating-viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

.crew-cat-rotating-track {
  display: flex;
  gap: 12px;
  align-items: stretch;
  height: 100%;
  will-change: transform;
}

/* Auto-Loop Animation (aktiv wenn JS .is-looping setzt) */
.crew-cat-rotating-track.is-looping {
  animation: crew-cat-marquee 25s linear infinite;
}
.crew-cat-rotating-zone:hover .crew-cat-rotating-track.is-looping,
.crew-cat-rotating-track.is-paused {
  animation-play-state: paused;
}
@keyframes crew-cat-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .crew-cat-rotating-track.is-looping { animation: none; }
}

/* Pfeil-Buttons */
.crew-cat-arrow {
  flex: 0 0 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 2px solid rgba(72,71,76,0.3);
  color: var(--accent);
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s, opacity 0.2s;
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  padding: 0;
}
.crew-cat-arrow:hover {
  border-color: var(--accent);
  background: rgba(253,217,1,0.1);
}
.crew-cat-arrow[disabled] {
  opacity: 0.25;
  cursor: not-allowed;
}
.crew-cat-rotating-zone:not(.has-overflow) .crew-cat-arrow { display: none; }
@media (max-width: 767px) {
  .crew-cat-arrow { display: none !important; }
  .crew-cat-rotating-viewport { overflow-x: auto; scrollbar-width: none; }
  .crew-cat-rotating-viewport::-webkit-scrollbar { display: none; }
}

/* ── Kategorie-Card ── */
.crew-cat-card {
  flex: 1;
  min-width: 0;
  position: relative;
  display: block;
  text-decoration: none;
  color: var(--text);
  background: var(--bg-surface-container);
  border: 2px solid rgba(72,71,76,0.65);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  overflow: hidden;
  opacity: 0.82;
  transition: border-color 0.25s, opacity 0.3s, transform 0.3s, box-shadow 0.3s;
  cursor: pointer;
}
.crew-cat-card:hover,
.crew-cat-card.is-active {
  border-color: var(--accent);
  opacity: 1;
  box-shadow: 0 0 20px rgba(253,217,1,0.2);
}

/* Card-Hauptbild */
.crew-cat-card-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: scale 2500ms cubic-bezier(0.22,1,0.36,1);
}
.crew-cat-card:hover .crew-cat-card-img { scale: 1.05; }

/* Card-Logo (optional, mittig) */
.crew-cat-card-logo {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, calc(-50% + 6px));
  max-width: 50%;
  max-height: 38%;
  object-fit: contain;
  z-index: 2;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.6));
}

/* Card-Gradient + Name */
.crew-cat-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) 45%, transparent 100%);
  z-index: 1;
  pointer-events: none;
}
.crew-cat-card-name {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 10px 14px;
  text-align: left;
  font-family: var(--font-headline);
  font-size: 13px;
  font-weight: 900;
  font-style: italic;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--accent);
  z-index: 3;
  line-height: 1.1;
}

/* Featured-Markierung: kein sichtbarer Unterschied zum Rahmen — nur is-active/hover macht gelb */
.crew-cat-card[data-featured="true"]::before {
  content: none;
}

/* "ALL" Card (nur auf Übersichtsseite) */
.crew-cat-card.is-all .crew-cat-card-name {
  font-size: 14px;
  letter-spacing: 0.15em;
}
.crew-cat-card.is-all {
  background: linear-gradient(135deg, rgba(253,217,1,0.08), rgba(253,217,1,0.02));
}

/* Keine nicht-featured Kategorien → Zone verbergen, Bar zentrieren */
.crew-cat-rotating-zone.is-empty { display: none; }
.crew-categories.has-no-rotation .crew-cat-divider { display: none; }
.crew-categories.has-no-rotation { justify-content: center; }

/* Mobile-Anpassung */
@media (max-width: 767px) {
  .crew-cat-card { flex: 1; min-width: 0; }
  .crew-cat-featured-zone { gap: 8px; }
  .crew-cat-rotating-track { gap: 8px; }
}

/* [SCHICHT-3: team] ════════════════════════════
   FEATURED-CREW-WRAP & CMS-CREW-CARDS
   Markup von cms.js: .cms-crew-grid > .cms-crew-card
   ═══════════════════════════════════════════════ */
.crew-featured-wrap { position: relative; }

.cms-crew-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 24px !important;
  padding-top: 14px;
}

/* Featured-Grid: alle 3 Karten gleichwertig (kein Podium) */
.cms-crew-grid[data-crew-context="featured"] {
  grid-template-columns: repeat(3, 1fr) !important;
  align-items: stretch;
}

@media (max-width: 767px) {
  .cms-crew-grid { grid-template-columns: 1fr !important; gap: 16px !important; }
  .cms-crew-grid[data-crew-context="featured"] { grid-template-columns: 1fr !important; }
}

/* Loop-Modus: Grid wird zu horizontalem Track */
.cms-crew-grid.is-looping {
  display: flex !important;
  grid-template-columns: none !important;
  gap: 32px !important;
  overflow: hidden;
  animation: crew-card-marquee 30s linear infinite;
}
.crew-featured-wrap:hover .cms-crew-grid.is-looping {
  animation-play-state: paused;
}
.cms-crew-grid.is-looping .cms-crew-card {
  flex: 0 0 calc(33.333% - 22px);
}
@keyframes crew-card-marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(calc(-50% - 16px)); }
}
@media (prefers-reduced-motion: reduce) {
  .cms-crew-grid.is-looping { animation: none; }
}

/* Auf Startseite: nicht-Featured Cards verstecken (CMS setzt class="featured", nicht data-featured) */
.cms-crew-grid[data-crew-context="featured"] .cms-crew-card:not(.featured) {
  display: none !important;
}

/* ─────────────────────────────────────────────
   Single Crew-Card — 1:1 Nachbau der Impression-Cards
   Struktur:  cms.js liefert flaches Markup, wir simulieren die
              .card-wrap + .card-body Trennung mit Pseudo-Elementen.
     • .cms-crew-card = .card-wrap (Outer, kein bg/border/clip)
     • ::before        = .card-body Hintergrund
     • ::after         = .card-body Rahmen (über dem Bild)
     • Badge sitzt mit top:-12px ÜBER der Card (wie .card-tag)
   ───────────────────────────────────────────── */

/* Aggressiver Reset gegen alle möglichen Border-Radius-Quellen */
.cms-crew-card,
.cms-crew-card *,
.cms-crew-card::before,
.cms-crew-card::after { border-radius: 0 !important; }

.cms-crew-card {
  position: relative;
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: var(--text);
  opacity: 1;
  transition: opacity 0.5s, transform 0.3s;
  isolation: isolate;
  min-height: 340px; /* einheitliche Card-Höhe — Design unabhängig von CMS-Inhalt */
  /* KEIN clip-path / overflow:hidden / background / border auf dem Outer
     — sonst würde der Badge nicht herausragen können. */
}
.cms-crew-card:hover {
  transform: translateY(-5px);
}

/* Card-Body Hintergrund (hinter Bild & Text) */
.cms-crew-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg-surface-container);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  z-index: 0;
  pointer-events: none;
}

/* Card-Body Rahmen (Pfeil sitzt jetzt im Stats-Footer) */
.cms-crew-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid rgba(72,71,76,0.3);
  clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px);
  transition: border-color 0.3s;
  z-index: 4;
  pointer-events: none;
}
.cms-crew-card:hover::after { border-color: var(--accent); }

/* Bild — CMS setzt aspect-ratio:1 + border-radius:8px → beides überschreiben */
/* Bild-Wrapper: trägt die chamfered Form + clipped Overflow für Hover-Zoom */
.cms-crew-card .cms-crew-image-wrap {
  position: relative;
  z-index: 1;
  width: 100%;
  height: clamp(140px, 16vw, 210px);
  flex-shrink: 0;
  overflow: hidden;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}

.cms-crew-card .cms-crew-image-wrap .cms-crew-image {
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  aspect-ratio: unset !important;
  object-fit: cover;
  border-radius: 0 !important;
  clip-path: none !important;        /* Wrapper übernimmt das Clipping */
  transform: scale(1);
  transform-origin: center;
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Hover-Zoom: Bild zoomt sanft rein, Wrapper clipped sauber ab */
.cms-crew-card:hover .cms-crew-image-wrap .cms-crew-image {
  transform: scale(1.08);
}

/* Fallback: wenn Bild OHNE Wrapper ist (alte SSR / Backward-Compat) */
.cms-crew-card > .cms-crew-image {
  position: relative;
  z-index: 1;
  display: block !important;
  width: 100% !important;
  height: clamp(140px, 16vw, 210px) !important;
  aspect-ratio: unset !important;
  object-fit: cover;
  flex-shrink: 0;
  border-radius: 0 !important;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}

@media (prefers-reduced-motion: reduce) {
  .cms-crew-card .cms-crew-image-wrap .cms-crew-image,
  .cms-crew-card:hover .cms-crew-image-wrap .cms-crew-image {
    transform: none;
    transition: none;
  }
}

/* Alle Featured-Karten: gleiche Bildhöhe — Höhe geht jetzt auf den Wrapper,
   das IMG füllt diesen via height: 100% */
.cms-crew-grid[data-crew-context="featured"] .cms-crew-card .cms-crew-image-wrap {
  height: clamp(180px, 18vw, 260px) !important;
}
.cms-crew-grid[data-crew-context="featured"] .cms-crew-card > .cms-crew-image {
  height: clamp(180px, 18vw, 260px) !important;
}

/* Texte */
.cms-crew-card .cms-crew-name {
  position: relative; z-index: 1;
  display: block;
  font-family: var(--font-headline);
  font-size: 1.5rem;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--accent);
  padding: 14px 20px 0;   /* weniger Abstand zur Category */
  line-height: 1.1;
}

/* Category — direkt unter dem Namen, nicht mehr Footer */
.cms-crew-card .cms-crew-category {
  position: relative; z-index: 1;
  display: block;
  padding: 2px 20px 8px;
  font-family: var(--font-headline);
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(253,217,1,0.6) !important;
}

/* Kurzbeschreibung — grauer Italic-Text unter der Kategorie */
.cms-crew-card .cms-crew-tagline {
  position: relative; z-index: 1;
  display: block;
  padding: 0 20px 14px;
  font-family: var(--font-body);
  font-size: 13px;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-muted);
  flex: 1;     /* füllt Restraum, drückt Stats-Footer nach unten */
}
.cms-crew-card .cms-crew-tagline:empty::before {
  content: 'Kurzbeschreibung folgt.';
  opacity: 0.4;
}

/* Stats-Footer mit Pfeil */
.cms-crew-card .cms-crew-stats {
  position: relative; z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto; /* unten andocken */
  padding: 12px 12px 12px 20px;
  border-top: 1px solid rgba(39,39,42,0.5);
  font-family: var(--font-headline);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(253,217,1,0.6);
}
.cms-crew-card .cms-crew-stats::after {
  content: '';
  display: inline-flex;
  flex-shrink: 0;
  /* WICHTIG: margin-left: auto schiebt den Pfeil immer nach rechts.
     Ohne diese Regel waere der Pfeil bei leerem Stats-Text links
     (weil justify-content: space-between bei nur 1 Kind wie flex-start
     wirkt). Mit margin-left:auto sitzt der Pfeil garantiert rechts —
     egal ob davor Text steht oder nicht. */
  margin-left: auto;
  width: 32px;
  height: 32px;
  background-color: rgba(253,217,1,0.1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23fdd901' stroke-width='2'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 20px;
  transition: background-color 0.2s;
}
.cms-crew-card:hover .cms-crew-stats::after {
  background-color: var(--accent);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%233d4a00' stroke-width='2'%3E%3Cpolyline points='9 18 15 12 9 6'/%3E%3C/svg%3E");
}

/* Placeholder-Card (JS-generiert wenn < 3 Featured-Cards im CMS sind).
   Verwendet dasselbe Schema wie eine echte CMS-Card — nur das image-ph
   ersetzt das fehlende Bild visuell mit einer Hatched-Fläche. */
.cms-crew-card--placeholder {
  cursor: default;
  pointer-events: none;
  opacity: 0.5 !important;
}
.cms-crew-card--placeholder .cms-crew-image-ph {
  display: block;
  width: 100%;
  height: clamp(180px, 18vw, 260px);
  background:
    repeating-linear-gradient(
      45deg,
      rgba(253,217,1,0.04) 0px,
      rgba(253,217,1,0.04) 1px,
      transparent 1px,
      transparent 14px
    ),
    linear-gradient(135deg, #1a1a24 0%, #0f0f16 100%);
  position: relative;
  z-index: 1;
  flex-shrink: 0;
  clip-path: polygon(10px 0, 100% 0, 100% 100%, 0 100%, 0 10px);
}

/* Wenn CMS keine Kategorie liefert, Footer-Bereich trotzdem reservieren */
.cms-crew-card:not(:has(.cms-crew-category))::before {
  /* keine spezielle Anpassung nötig — Card-Höhe wird durch min-height gesteuert */
}

/* Type-Badge — ragt mit top:-12px ÜBER die Card (wie .card-tag) */
.cms-crew-card .cms-crew-type {
  position: absolute;
  top: -12px;
  left: 0;
  z-index: 10;
  background: var(--accent);
  color: var(--text-on-primary);
  padding: 4px 16px;
  font-family: var(--font-headline);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}

/* ── LIVE-Status: Badge wird rot + pulsierender Punkt ──────────────
   crew-cards.js setzt .is-live auf die Card, wenn das CMS-Feld is_live
   aktiv ist (Badge-Text wird dann zu "LIVE"). */
.cms-crew-card.is-live .cms-crew-type {
  background: #e8112d;
  color: #fff;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  animation: crew-live-pulse 1.6s ease-in-out infinite;
}
.cms-crew-card.is-live .cms-crew-type::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  animation: crew-live-dot 1.2s ease-in-out infinite;
}
@keyframes crew-live-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 17, 45, 0.55); }
  50%      { box-shadow: 0 0 12px 2px rgba(232, 17, 45, 0.85); }
}
@keyframes crew-live-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.4; transform: scale(0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .cms-crew-card.is-live .cms-crew-type,
  .cms-crew-card.is-live .cms-crew-type::before { animation: none; }
}

/* ── Details-Pfeil unten rechts (nur im Live-Zustand sichtbar) ─────
   Die Card zeigt dann auf den Stream; dieser Pfeil führt weiterhin zu
   den Crew-Details. crew-cards.js blendet ihn ein/aus + verkabelt den
   Klick (stoppt das Card-Navigieren). Optik IDENTISCH zum bestehenden
   Footer-Pfeil (.cms-crew-stats::after): dunkel-transparenter Kasten mit
   gelbem Chevron, Hover → voll gelb. Sitzt exakt auf derselben Position. */
.cms-crew-card .cms-crew-detail-arrow {
  position: absolute;
  right: 12px;
  bottom: 12px;
  z-index: 12;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--accent, #fdd901);
  background-color: rgba(253, 217, 1, 0.1);
  cursor: pointer;
  transition: background-color 0.2s, color 0.2s;
}
.cms-crew-card .cms-crew-detail-arrow svg { width: 20px; height: 20px; }
.cms-crew-card .cms-crew-detail-arrow[hidden] { display: none; }
.cms-crew-card .cms-crew-detail-arrow:hover,
.cms-crew-card .cms-crew-detail-arrow:focus-visible {
  background-color: var(--accent, #fdd901);
  color: #3d4a00;
}
.cms-crew-card .cms-crew-detail-arrow:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}
/* Auf Live-Karten den Footer-Pseudo-Pfeil unsichtbar machen → nur EIN
   sichtbarer Pfeil (der Details-Pfeil). WICHTIG: visibility:hidden statt
   display:none, damit der 32px-Platzhalter die Footer-Zeilenhöhe behält
   — sonst kollabiert die Zeile und der absolute Details-Pfeil sitzt nicht
   mehr exakt auf der gleichen Position wie bei den anderen Karten. */
.cms-crew-card.is-live .cms-crew-stats::after { visibility: hidden; }

/* Alle Featured-Karten gleichwertig: volle Deckkraft, einheitlicher Hover */
.cms-crew-grid[data-crew-context="featured"] .cms-crew-card {
  opacity: 1;
}
.cms-crew-grid[data-crew-context="featured"] .cms-crew-card:hover {
  transform: translateY(-5px);
}

/* [SCHICHT-3: team] ════════════════════════════
   GLITCH-TRANSITION (Filter-Wechsel auf Übersichtsseite)
   ═══════════════════════════════════════════════ */
.cms-crew-grid.is-glitching .cms-crew-card {
  animation: crew-glitch-out 280ms cubic-bezier(0.6, 0, 0.4, 1) both;
}
.cms-crew-grid.is-glitch-in .cms-crew-card {
  animation: crew-glitch-in 360ms cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes crew-glitch-out {
  0%   { opacity: 1; transform: translate(0, 0) skewX(0); filter: none; clip-path: inset(0 0 0 0); }
  20%  { transform: translate(-2px, 1px) skewX(-1.5deg); filter: hue-rotate(8deg) saturate(1.3); clip-path: inset(8% 0 32% 0); }
  45%  { transform: translate(3px, -2px) skewX(1.2deg); filter: hue-rotate(-6deg) saturate(0.8); clip-path: inset(40% 0 6% 0); }
  70%  { transform: translate(-1px, 2px); filter: brightness(1.4); }
  100% { opacity: 0; transform: translateY(8px) scale(0.985); filter: blur(2px); }
}
@keyframes crew-glitch-in {
  0%   { opacity: 0; transform: translateY(-12px) scale(1.02); filter: blur(4px) brightness(1.6); clip-path: inset(0 0 0 0); }
  30%  { opacity: 1; transform: translate(-3px, 0) skewX(2deg); filter: hue-rotate(-10deg) saturate(1.4); clip-path: inset(20% 0 50% 0); }
  55%  { transform: translate(2px, 0) skewX(-1.5deg); filter: hue-rotate(6deg) saturate(0.9); clip-path: inset(60% 0 12% 0); }
  80%  { transform: translate(-1px, 0); filter: none; }
  100% { opacity: 1; transform: translate(0, 0); filter: none; clip-path: inset(0 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .cms-crew-grid.is-glitching .cms-crew-card,
  .cms-crew-grid.is-glitch-in .cms-crew-card {
    animation: none;
  }
}

/* ── Game-Badge (Legacy — falls in alten Templates noch verwendet) ── */
.team-game-badge {
  font-family: var(--font-headline);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(253,217,1,0.6);
  margin: -6px 0 12px;
}

/* Label-Helper für absolute Card-Labels (Game-Cards in Legacy/Other Sections) */
.game-card-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 16px;
  z-index: 3;
}

/* [SCHICHT-3: gallery-preview] ═════════════════
   IMPRESSIONS SECTION
   ═══════════════════════════════════════════════ */
.impressions-section {
  background: var(--bg-surface);
  padding: 40px 0;
}

/* 6-Card Gallery — 2 cols × 3 rows, portrait/landscape alternation */
.impressions-gallery {
  display: grid;
  grid-template-columns: 1fr 1.6fr;
  gap: 15px;
}
/* Portrait cards (odd rows left col, even rows right col) — tall image */
.impressions-gallery .card-wrap:nth-child(1) .card-img-wrap { height: 280px; }
.impressions-gallery .card-wrap:nth-child(2) .card-img-wrap { height: 200px; }
.impressions-gallery .card-wrap:nth-child(3) .card-img-wrap { height: 190px; }
.impressions-gallery .card-wrap:nth-child(4) .card-img-wrap { height: 270px; }
.impressions-gallery .card-wrap:nth-child(5) .card-img-wrap { height: 260px; }
.impressions-gallery .card-wrap:nth-child(6) .card-img-wrap { height: 195px; }
.impressions-gallery .card-wrap { height: 100%; }
.impressions-gallery .card-body { height: 100%; box-sizing: border-box; display: flex; flex-direction: column; }
.impressions-gallery .impression-meta { flex: 1; }
.impressions-gallery .card-footer { margin-top: 12px; }
@media (max-width: 767px) {
  .impressions-gallery {
    grid-template-columns: 1fr;
    gap: 10px;
  }
  .impressions-gallery .card-wrap .card-img-wrap { height: 200px !important; }
}

@media (min-width: 768px) {
  .impressions-section { padding: 96px 0; }
}

.impression-meta {
  padding: 20px;
}

.impression-date {
  display: none;
}

.impression-title {
  color: var(--accent);
  font-family: var(--font-headline);
  font-size: 20px;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.025em;
}

.impression-desc {
  color: var(--text-muted);
  font-size: 12px;
  font-family: var(--font-body);
  line-height: 1.625;
  margin-top: 8px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* [SCHICHT-3: management] — Management-Cards-Styles liegen in
   panels/management/management.css.
   Hier nur noch die generischen .portrait-*-Helper, die von .player-card
   (und ggf. weiteren Cards) benutzt werden.
   ═══════════════════════════════════════════════ */
.portrait-wrap {
  position: relative;
  height: 317px;
}
.portrait-inner {
  position: absolute;
  inset: 0;
  overflow: hidden;
  transform: translateZ(0);
}
.portrait-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: grayscale(1) blur(2px);
  transition: scale 2500ms cubic-bezier(0.22,1,0.36,1);
  will-change: scale;
}
.card-wrap:hover .portrait-bg { scale: 1.05; }
.portrait-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
  transition: background 1s;
  pointer-events: none;
}
.card-wrap:hover .portrait-overlay { background: rgba(0,0,0,0.3); }
.portrait-person-wrap {
  position: absolute;
  inset: 0;
  transform: translateY(55px);
}
.portrait-person {
  width: 100%; height: 100%;
  object-fit: contain;
  object-position: bottom;
  transition: scale 2500ms cubic-bezier(0.22,1,0.36,1);
  will-change: scale;
}
.card-wrap:hover .portrait-person { scale: 1.05; }
.portrait-fade {
  position: absolute;
  left: 0; right: 0;
  height: 96px;
  pointer-events: none;
  z-index: 2;
  bottom: -2px;
  background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, transparent 100%);
}

/* [SCHICHT-3: footer] ══════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */
.site-footer {
  padding: 24px 0;
  background: #060606;
  border-top: 1px solid rgba(253, 217, 1, 0.1);
}

.footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

@media (min-width: 640px) {
  .footer-inner { padding: 0 24px; }
}
@media (min-width: 768px) {
  .footer-inner { flex-direction: row; }
}
@media (min-width: 1024px) {
  .footer-inner { padding: 0 32px; }
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-links a {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #444440;
  transition: color 0.15s;
}

.footer-links a:hover {
  color: var(--accent);
}

.footer-social {
  display: flex;
  gap: 8px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(253, 217, 1, 0.12);
  color: rgba(253, 217, 1, 0.35);
  transition: color 0.15s, border-color 0.15s;
}

.footer-social a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* [SCHICHT-2: BASE] ════════════════════════════
   LEGAL / SUB-PAGES
   ═══════════════════════════════════════════════ */
.legal-page {
  max-width: 800px;
  margin: 120px auto 80px;
  padding: 0 24px;
}

.legal-page h1 {
  font-family: var(--font-headline);
  font-size: 2rem;
  color: var(--accent);
  margin-bottom: 8px;
}

.legal-page .subtitle {
  color: var(--text-muted);
  margin-bottom: 32px;
}

.legal-page p,
.legal-page li {
  color: var(--text-muted);
  line-height: 1.8;
}

/* [SCHICHT-2: BASE] ════════════════════════════
   404 PAGE
   ═══════════════════════════════════════════════ */
.page-404 {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 24px;
}

.page-404 h1 {
  font-family: var(--font-headline);
  font-size: clamp(80px, 15vw, 200px);
  color: var(--accent);
  text-shadow: 0 0 30px var(--neon-glow);
  line-height: 1;
  margin-bottom: 16px;
}

.page-404 p {
  color: var(--text-muted);
  font-size: 18px;
  margin-bottom: 32px;
}

/* [SCHICHT-2: BASE] ════════════════════════════
   KEYFRAME ANIMATIONS
   ═══════════════════════════════════════════════ */
@keyframes text-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes shaft-pulse {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.15; }
}

@keyframes scan-x {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* [SCHICHT-2: BASE] ════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════ */

/* Mobile card grid adjustments */
@media (max-width: 767px) {
  .card-grid-3 { gap: 24px; }
  .card-grid-4 { gap: 16px; }

  .card-content { padding: 20px; }
  .card-title { font-size: 1.5rem; }

  .event-details {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 16px;
  }

  .upcoming-title { font-size: 24px; }
}

/* QHD / 2K / 4K Screens — alle Panels bleiben auf Header-/Footer-Breite
   (1440px). Header (.navbar-inner) und Footer (.footer-inner) sind fix
   1440px; .container darf bei grossen Aufloesungen NICHT breiter werden,
   sonst laufen Menue/Footer und Panel-Inhalt auseinander.
   → Eine einheitliche Spaltenbreite ueber alle Aufloesungen. */

/* [SCHICHT-3: page-hero] ═══════════════════════════════════
   SUBPAGE-HERO (Cyberpunk-Style Sub-Page Header)
   Wird auf allen Sub-Pages verwendet (teams.html, join.html, etc.)
   ═══════════════════════════════════════════════════════════ */
.subpage-hero {
  position: relative;
  height: 220px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding-bottom: 40px;
}
.subpage-hero-bg {
  position: absolute;
  inset: -20px;
  background-image: url('../media/cyberpunk_city.webp');
  background-size: cover;
  background-position: center 30%;
  filter: blur(3px) brightness(0.3) saturate(1.2);
}
.subpage-hero-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 2px,
    rgba(0,0,0,0.12) 2px, rgba(0,0,0,0.12) 4px
  );
  pointer-events: none;
}
.subpage-hero-line {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(253,217,1,0.5) 20%, rgba(253,217,1,0.9) 50%, rgba(253,217,1,0.5) 80%, transparent 100%);
  box-shadow: 0 0 16px rgba(253,217,1,0.4);
}

/* Standalone-Variante: als Divider zwischen Panels (nicht im Hero-Container) */
.subpage-hero-line--divider {
  position: relative;
  bottom: auto; left: auto; right: auto;
  width: 100%;
  margin: 0;
}
.subpage-hero-content { position: relative; z-index: 2; }
.subpage-breadcrumb {
  font-family: var(--font-headline);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(253,217,1,0.45);
  margin-bottom: 10px;
}
.subpage-breadcrumb a { color: rgba(253,217,1,0.45); transition: color 0.15s; text-decoration: none; }
.subpage-breadcrumb a:hover { color: var(--accent); }
.subpage-breadcrumb span.bc-sep { margin: 0 8px; }
.subpage-title {
  font-family: var(--font-headline);
  font-size: clamp(32px, 5vw, 56px);
  color: #fff;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}
.subpage-title em { color: var(--accent); font-style: normal; }

/* [SCHICHT-3: team] ════════════════════════════════════════
   TEAMS / CREW OVERVIEW PAGE (teams.html)
   ═══════════════════════════════════════════════════════════ */
.teams-page {
  background: var(--bg);
  padding-bottom: 100px;
}

/* Sticky Kategorie-Bar Wrapper */
.crew-cat-bar-sticky {
  position: sticky;
  top: 56px;
  z-index: 10;
  background: rgba(14,14,18,0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(253,217,1,0.1);
  padding: 18px 0;
  margin-bottom: 32px;
}
.crew-cat-bar-sticky .crew-categories {
  margin-bottom: 0;
}

/* Empty-Placeholder wenn keine Crews zur ausgewählten Kategorie passen */
.cms-crew-grid .cms-crew-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px 24px;
  color: var(--text-muted);
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-headline);
  border: 1px dashed rgba(253,217,1,0.1);
}

/* [SCHICHT-3: team] ════════════════════════════════════════════════════════
   CREW DETAIL PAGES (crew-team.html / crew-creator.html / crew-solo.html)
   ─────────────────────────────────────────────────────────────────────────
   Inline-Styles aus den drei Detail-Templates wurden hierher migriert.
   Klassennamen blieben unverändert, Konflikte wurden via Parent-Scoping gelöst.
   ═══════════════════════════════════════════════════════════════════════════ */

/* [SCHICHT-3: team] */
/* ─────────────────────────────────────────────────────────────────────────
   TEAM HERO (crew-team.html)
   ───────────────────────────────────────────────────────────────────────── */
.team-hero {
  position: relative;
  height: 320px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding-bottom: 40px;
  margin-top: 56px;
}
.team-hero-bg {
  position: absolute;
  inset: -20px;
  background-size: cover;
  background-position: center;
  filter: blur(4px) brightness(0.25) saturate(1.3);
  transition: background-image 0.3s;
}
.team-hero-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 2px,
    rgba(0,0,0,0.12) 2px, rgba(0,0,0,0.12) 4px
  );
  pointer-events: none;
}
.team-hero-line {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(253,217,1,0.5) 20%, rgba(253,217,1,0.9) 50%, rgba(253,217,1,0.5) 80%, transparent 100%);
  box-shadow: 0 0 16px rgba(253,217,1,0.4);
}
/* Neon shaft */
.team-hero::before {
  content: '';
  position: absolute;
  top: 0; left: 60%;
  width: 1px; height: 100%;
  background: linear-gradient(to bottom, transparent 10%, rgba(253,217,1,0.2) 50%, transparent);
  z-index: 1;
}
.team-hero-content {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-end;
  gap: 24px;
  flex-wrap: wrap;
}
.team-hero-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(253,217,1,0.1);
  border: 1px solid rgba(253,217,1,0.25);
  padding: 6px 14px;
  font-family: var(--font-headline);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  margin-bottom: 10px;
}
.team-hero-name {
  font-family: var(--font-headline);
  font-size: clamp(36px, 6vw, 68px);
  color: #fff;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1;
}
.team-hero-name em { color: var(--accent); font-style: normal; }
.team-hero-id {
  font-family: var(--font-headline);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: rgba(253,217,1,0.3);
  margin-top: 6px;
}

/* [SCHICHT-3: team] */
/* ─────────────────────────────────────────────────────────────────────────
   CREATOR / SOLO HERO (crew-creator.html, crew-solo.html)
   ───────────────────────────────────────────────────────────────────────── */
.creator-hero {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  margin-top: 56px;
}
.creator-hero-bg {
  position: absolute;
  inset: -20px;
  background-image: url('../images/cyberpunk_city.webp');
  background-size: cover;
  background-position: center 30%;
  filter: grayscale(1) blur(2px) brightness(0.25);
}
.creator-hero-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 100% at 30% 100%, transparent 0%, rgba(14,14,18,0.7) 100%);
  pointer-events: none;
}
.creator-hero-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 2px,
    rgba(0,0,0,0.1) 2px, rgba(0,0,0,0.1) 4px
  );
  pointer-events: none;
}
.creator-hero-line {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(253,217,1,0.5) 20%, rgba(253,217,1,0.9) 50%, rgba(253,217,1,0.5) 80%, transparent 100%);
  box-shadow: 0 0 16px rgba(253,217,1,0.4);
}
.creator-hero-portrait {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 100%;
  width: 50%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.creator-hero-portrait img {
  height: 105%;
  width: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: bottom center;
  filter: drop-shadow(-40px 0 60px rgba(14,14,18,0.9));
}
.creator-hero-portrait::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(14,14,18,0.95) 0%, rgba(14,14,18,0.3) 40%, transparent 70%);
  pointer-events: none;
}
.creator-hero-content {
  position: relative;
  z-index: 2;
  padding: 60px 0 48px;
  max-width: 560px;
}
.creator-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(253,217,1,0.1);
  border: 1px solid rgba(253,217,1,0.25);
  padding: 5px 14px;
  font-family: var(--font-headline);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  clip-path: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
  margin-bottom: 16px;
}
.creator-hero-name {
  font-family: var(--font-headline);
  font-size: clamp(48px, 8vw, 88px);
  color: #fff;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  line-height: 0.95;
  margin-bottom: 6px;
}
.creator-hero-name em { color: var(--accent); font-style: normal; }
.creator-hero-realname {
  font-size: 13px;
  color: var(--text-muted);
  letter-spacing: 0.08em;
  margin-bottom: 20px;
}
/* Neon shaft */
.creator-hero::after {
  content: '';
  position: absolute;
  top: 0; left: 55%;
  width: 1px; height: 100%;
  background: linear-gradient(to bottom, transparent 5%, rgba(253,217,1,0.15) 50%, transparent);
  pointer-events: none;
}
/* Hero platform/stat-badges row (auch in crew-solo.html für Game/Rank/Region) */
.creator-hero-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

/* [SCHICHT-3: team] */
/* ─────────────────────────────────────────────────────────────────────────
   PLATFORM-BADGES (shared: creator/solo Hero + team.html creator-mode)
   ───────────────────────────────────────────────────────────────────────── */
.platform-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-headline);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 6px 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  color: var(--text-muted);
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
}
.platform-badge.youtube { border-color: rgba(255,0,0,0.35);     color: #ff5555; }
.platform-badge.twitch  { border-color: rgba(145,70,255,0.35);  color: #9146ff; }
.platform-badge.tiktok  { border-color: rgba(0,240,255,0.35);   color: #00f0ff; }
.platform-badge.insta   { border-color: rgba(255,110,129,0.35); color: #ff6e81; }
/* Solo-spezifische Badge-Varianten (Game/Rank/Role/Region) */
.platform-badge.solo-game   { border-color: rgba(253,217,1,0.35);  color: var(--accent); }
.platform-badge.solo-rank   { border-color: rgba(0,240,255,0.35);  color: #00f0ff; }
.platform-badge.solo-role   { border-color: rgba(145,70,255,0.35); color: #b685ff; }
.platform-badge.solo-region { border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.6); }

/* [SCHICHT-3: team] */
/* ─────────────────────────────────────────────────────────────────────────
   PAGE BODY (team-page für team.html, creator-page für creator/solo)
   ───────────────────────────────────────────────────────────────────────── */
.team-page,
.creator-page {
  background: var(--bg);
  padding-bottom: 100px;
}

/* Section Header (gleicher Style für beide Page-Typen) */
.team-section,
.creator-section {
  padding-top: 60px;
}
.team-section-header,
.creator-section-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 36px;
}
.team-section-title,
.creator-section-title {
  font-family: var(--font-headline);
  font-size: 13px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  white-space: nowrap;
}
.team-section-line,
.creator-section-line {
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, rgba(253,217,1,0.15) 0%, transparent 100%);
}

/* [SCHICHT-3: team] */
/* ─────────────────────────────────────────────────────────────────────────
   PLAYER ROSTER (crew-team.html)
   ───────────────────────────────────────────────────────────────────────── */
.roster-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
}
.player-card {
  background: var(--bg-surface);
  border: 1px solid rgba(253,217,1,0.08);
  position: relative;
  overflow: hidden;
  transition: border-color 0.2s;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
}
.player-card:hover { border-color: rgba(253,217,1,0.25); }
/* Portrait reuses .portrait-wrap / .portrait-inner / .portrait-bg / etc. (oben definiert) */
.player-card .portrait-wrap { height: 260px; }
.player-card .portrait-person-wrap { transform: translateY(30px); }

.player-role-badge {
  position: absolute;
  top: 10px; right: 10px;
  z-index: 2;
  font-family: var(--font-headline);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  background: rgba(14,14,18,0.85);
  border: 1px solid rgba(253,217,1,0.3);
  color: var(--accent);
  padding: 3px 8px;
}
.player-info { padding: 14px 16px 18px; }
.player-tag {
  font-family: var(--font-headline);
  font-size: 16px;
  color: #fff;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1.1;
}
.player-tag em { color: var(--accent); font-style: normal; }
.player-name {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
  letter-spacing: 0.06em;
}
.player-position {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 10px;
  font-family: var(--font-headline);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(253,217,1,0.45);
  border-top: 1px solid rgba(253,217,1,0.08);
  padding-top: 10px;
  width: 100%;
}
.player-position::before {
  content: '';
  width: 4px; height: 4px;
  background: var(--accent);
  flex-shrink: 0;
  opacity: 0.6;
}
/* IGL highlight */
.player-card.is-igl .player-tag em { color: #ff6e81; }
.player-card.is-igl .player-role-badge { border-color: rgba(255,110,129,0.4); color: #ff6e81; }

/* [SCHICHT-3: team] */
/* ─────────────────────────────────────────────────────────────────────────
   STATS BAR + WIN-RATE (crew-team.html)
   ───────────────────────────────────────────────────────────────────────── */
.stats-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  margin-top: 48px;
  background: rgba(253,217,1,0.06);
  border: 1px solid rgba(253,217,1,0.1);
}
.stat-cell {
  padding: 28px 24px;
  text-align: center;
  background: var(--bg-surface);
  position: relative;
}
.stat-cell::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
}
.stat-cell.wins::before   { background: var(--accent); }
.stat-cell.losses::before { background: rgba(255,45,120,0.6); }
.stat-cell.draws::before  { background: rgba(255,255,255,0.2); }
.stat-cell.games::before  { background: rgba(0,240,255,0.4); }

.stat-number {
  font-family: var(--font-headline);
  font-size: 3rem;
  font-weight: 400;
  line-height: 1;
  margin-bottom: 8px;
}
.stat-cell.wins   .stat-number { color: var(--accent); text-shadow: 0 0 16px rgba(253,217,1,0.3); }
.stat-cell.losses .stat-number { color: #ff6e81; text-shadow: 0 0 16px rgba(255,110,129,0.3); }
.stat-cell.draws  .stat-number { color: rgba(255,255,255,0.5); }
.stat-cell.games  .stat-number { color: #00f0ff; text-shadow: 0 0 16px rgba(0,240,255,0.25); }

.stat-label {
  font-family: var(--font-headline);
  font-size: 9px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}

/* Win rate bar */
.winrate-wrap {
  margin-top: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.winrate-label {
  font-family: var(--font-headline);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}
.winrate-bar {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.08);
  position: relative;
  overflow: hidden;
}
.winrate-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--accent), rgba(253,217,1,0.6));
  box-shadow: 0 0 8px rgba(253,217,1,0.4);
  transition: width 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
.winrate-pct {
  font-family: var(--font-headline);
  font-size: 13px;
  color: var(--accent);
  white-space: nowrap;
}

/* [SCHICHT-3: team] */
/* ─────────────────────────────────────────────────────────────────────────
   TOURNAMENTS (crew-team.html)
   ───────────────────────────────────────────────────────────────────────── */
.tournament-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: 0;
}
.tournament-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 16px;
  padding: 14px 20px;
  background: var(--bg-surface);
  border-left: 2px solid rgba(253,217,1,0.1);
  transition: border-color 0.2s;
}
.tournament-item:hover { border-left-color: rgba(253,217,1,0.4); }
.tournament-name {
  font-family: var(--font-headline);
  font-size: 13px;
  color: #fff;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.tournament-date {
  font-family: var(--font-headline);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.12em;
  white-space: nowrap;
}
.tournament-result {
  font-family: var(--font-headline);
  font-size: 10px;
  letter-spacing: 0.12em;
  padding: 4px 10px;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.tournament-result.win  { background: rgba(253,217,1,0.12); color: var(--accent); }
.tournament-result.loss { background: rgba(255,45,120,0.1);  color: #ff6e81; }
.tournament-result.top  { background: rgba(0,240,255,0.1);   color: #00f0ff; }

/* CMS Templates ausblenden */
template { display: none; }

/* [SCHICHT-3: team] */
/* ─────────────────────────────────────────────────────────────────────────
   CREATOR-MODE BLOCK (in crew-team.html bei data-team-type="creator")
   Klassenname-Konflikt mit creator/solo gelöst durch Parent-Scoping unten
   ───────────────────────────────────────────────────────────────────────── */
.creator-profile {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 40px;
  align-items: start;
}
.creator-photo-wrap { position: relative; }
.creator-photo {
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}
.creator-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  filter: saturate(0.85);
}
.creator-photo-wrap::before {
  content: '';
  position: absolute;
  top: -4px; right: -4px;
  width: 24px; height: 24px;
  border-top: 2px solid var(--accent);
  border-right: 2px solid var(--accent);
  opacity: 0.6;
}
.creator-photo-wrap::after {
  content: '';
  position: absolute;
  bottom: -4px; left: -4px;
  width: 24px; height: 24px;
  border-bottom: 2px solid var(--accent);
  border-left: 2px solid var(--accent);
  opacity: 0.6;
}
.creator-info-block {
  display: flex;
  flex-direction: column;
  gap: 20px;
}
.creator-name-block { }
.creator-tag {
  font-family: var(--font-headline);
  font-size: clamp(28px, 4vw, 44px);
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1;
}
.creator-tag em { color: var(--accent); font-style: normal; }
.creator-realname {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 6px;
  letter-spacing: 0.06em;
}
.creator-platforms {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.creator-bio {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.8;
  padding: 20px;
  background: var(--bg-surface);
  border-left: 2px solid rgba(253,217,1,0.15);
  position: relative;
}
.creator-bio::before {
  content: '';
  position: absolute;
  top: 0; left: -2px;
  width: 2px; height: 30px;
  background: var(--accent);
}
.creator-stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.creator-stat-cell {
  padding: 18px;
  background: var(--bg-surface);
  text-align: center;
  border-top: 2px solid rgba(253,217,1,0.12);
}
.creator-stat-cell:first-child { border-top-color: var(--accent); }
/* Parent-Scoped Stat-Number/Lbl für creator-mode in team-page (kleiner) */
.creator-stat-cell .creator-stat-num {
  font-family: var(--font-headline);
  font-size: 1.8rem;
  color: var(--accent);
  text-shadow: 0 0 12px rgba(253,217,1,0.25);
}
.creator-stat-cell .creator-stat-lbl {
  font-family: var(--font-headline);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
  margin-top: 4px;
}

/* [SCHICHT-3: team] */
/* ─────────────────────────────────────────────────────────────────────────
   BIO + STATS (crew-creator.html, crew-solo.html — Sidebar-Layout)
   ───────────────────────────────────────────────────────────────────────── */
.creator-bio-layout {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 32px;
  align-items: start;
}
.creator-bio-text {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.9;
  padding: 28px 32px;
  background: var(--bg-surface);
  border-left: 2px solid rgba(253,217,1,0.2);
  position: relative;
}
.creator-bio-text::before {
  content: '';
  position: absolute;
  top: 0; left: -2px;
  width: 2px; height: 48px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(253,217,1,0.4);
}
.creator-stats-sidebar {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.creator-stat-item {
  padding: 20px 24px;
  background: var(--bg-surface);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-top: 2px solid rgba(253,217,1,0.1);
  position: relative;
}
.creator-stat-item:first-child { border-top-color: var(--accent); }
.creator-stat-item:first-child .creator-stat-num { color: var(--accent); text-shadow: 0 0 16px rgba(253,217,1,0.3); }
/* Parent-Scoped Stat-Number/Lbl für sidebar-mode (größer als creator-stat-cell) */
.creator-stat-item .creator-stat-num {
  font-family: var(--font-headline);
  font-size: 2.2rem;
  color: #fff;
  line-height: 1;
  margin-bottom: 6px;
}
.creator-stat-item .creator-stat-lbl {
  font-family: var(--font-headline);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}

/* [SCHICHT-3: partners] */
/* ─────────────────────────────────────────────────────────────────────────
   KOOPERATIONSPARTNER (Legacy-Static-Cards — CMS rendert .cms-partner-*)
   ───────────────────────────────────────────────────────────────────────── */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}
.partner-card {
  background: var(--bg-surface);
  border: 1px solid rgba(253,217,1,0.08);
  padding: 28px 20px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  transition: border-color 0.2s, transform 0.2s;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  position: relative;
}
.partner-card::before {
  content: '';
  position: absolute;
  top: 0; right: 12px;
  width: calc(100% - 12px); height: 1px;
  background: rgba(253,217,1,0.06);
}
.partner-card:hover {
  border-color: rgba(253,217,1,0.3);
  transform: translateY(-2px);
}
.partner-logo-wrap {
  width: 100px; height: 52px;
  display: flex; align-items: center; justify-content: center;
}
.partner-logo-wrap img {
  max-width: 100px; max-height: 48px;
  object-fit: contain;
  filter: brightness(0) invert(1) opacity(0.45);
  transition: opacity 0.25s;
}
.partner-card:hover .partner-logo-wrap img { opacity: 0.9; }
.partner-divider {
  width: 100%;
  height: 1px;
  background: rgba(253,217,1,0.08);
}
.partner-name {
  font-family: var(--font-headline);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
}
.partner-type {
  font-size: 11px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}
.partner-since {
  font-family: var(--font-headline);
  font-size: 9px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(253,217,1,0.35);
}
.partner-card.featured {
  border-color: rgba(253,217,1,0.2);
}
.partner-card.featured .partner-logo-wrap img { opacity: 0.7; }
.partner-card.featured::after {
  content: 'FEATURED';
  position: absolute;
  top: 10px; left: 10px;
  font-family: var(--font-headline);
  font-size: 8px;
  letter-spacing: 0.16em;
  color: var(--accent);
  opacity: 0.5;
}

/* [SCHICHT-3: team] */
/* ─────────────────────────────────────────────────────────────────────────
   RESPONSIVE — Crew Detail Pages
   ───────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .roster-grid { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 900px) {
  .creator-hero-portrait { width: 55%; }
  .creator-hero-content { max-width: 480px; }
  .creator-bio-layout { grid-template-columns: 1fr; }
  .creator-stats-sidebar { flex-direction: row; }
  .creator-stat-item { flex: 1; }
}
@media (max-width: 860px) {
  .roster-grid { grid-template-columns: repeat(3, 1fr); }
  .creator-profile { grid-template-columns: 1fr; }
  .creator-photo-wrap { max-width: 260px; }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .creator-hero { min-height: 420px; }
  .creator-hero-portrait { width: 60%; opacity: 0.5; }
  .creator-hero-content { max-width: 100%; }
  .creator-hero-name { font-size: clamp(40px, 10vw, 60px); }
  .creator-stats-sidebar { flex-wrap: wrap; }
  .creator-stat-item { min-width: calc(50% - 1px); }
  .partners-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .roster-grid { grid-template-columns: repeat(2, 1fr); }
  .stats-bar { grid-template-columns: repeat(2, 1fr); }
  .creator-stats-row { grid-template-columns: repeat(3, 1fr); }
  .tournament-item { grid-template-columns: 1fr auto; }
  .tournament-date { display: none; }
}

/* [SCHICHT-2: BASE] ════════════════════════════════════════════════════════
   STATIC SUBPAGES — Legal (impressum.html, datenschutz.html) + Join (join.html)
   ─────────────────────────────────────────────────────────────────────────
   Inline-Styles aus den drei Subpages wurden hierher migriert.
   ═══════════════════════════════════════════════════════════════════════════ */

/* [SCHICHT-2: BASE] */
/* ─────────────────────────────────────────────────────────────────────────
   LEGAL LAYOUT (impressum.html, datenschutz.html — shared)
   HUD-Label oben rechts: per data-hud Attribut individuell setzbar
   ───────────────────────────────────────────────────────────────────────── */
.legal-wrap {
  max-width: 860px;
  margin: 0 auto;
  padding: 60px 24px 100px;
}
.legal-wrap::before {
  content: 'LEGAL // DATA';
  font-family: var(--font-headline);
  font-size: 9px;
  letter-spacing: 0.22em;
  color: rgba(253,217,1,0.15);
  display: block;
  text-align: right;
  margin-bottom: 32px;
}
.legal-wrap[data-hud]::before { content: attr(data-hud); }

.legal-block {
  margin-bottom: 40px;
  padding: 32px;
  background: var(--bg-surface);
  border-left: 2px solid rgba(253,217,1,0.2);
  position: relative;
}
.legal-block::before {
  content: '';
  position: absolute;
  top: 0; left: -2px;
  width: 2px; height: 40px;
  background: var(--accent);
  box-shadow: 0 0 8px rgba(253,217,1,0.5);
}
.legal-block-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(253,217,1,0.08);
}
.legal-block-icon {
  width: 32px; height: 32px;
  background: rgba(253,217,1,0.08);
  border: 1px solid rgba(253,217,1,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}
.legal-block-title {
  font-family: var(--font-headline);
  font-size: 14px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent);
  font-weight: 400;
}
.legal-prose {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.8;
}
.legal-prose p { margin-bottom: 12px; }
.legal-prose p:last-child { margin-bottom: 0; }
.legal-prose a { color: var(--accent); }
.legal-prose h3 {
  font-family: var(--font-headline);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text);
  margin: 20px 0 8px;
}
.legal-prose ul {
  padding-left: 20px;
  margin-bottom: 12px;
}
.legal-prose li { margin-bottom: 6px; }
.legal-row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px 16px;
  margin-bottom: 10px;
  font-size: 14px;
}
.legal-row-label {
  font-family: var(--font-headline);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(253,217,1,0.4);
  padding-top: 2px;
}
.legal-row-value {
  color: var(--text);
  line-height: 1.6;
}
.legal-row-value a { color: var(--accent); transition: opacity 0.15s; }
.legal-row-value a:hover { opacity: 0.7; }

/* Rechte-Liste (nur datenschutz.html) */
.rights-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
  margin-top: 16px;
}
.right-item {
  padding: 16px;
  background: rgba(253,217,1,0.04);
  border: 1px solid rgba(253,217,1,0.1);
}
.right-item-title {
  font-family: var(--font-headline);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 6px;
}
.right-item p {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.5;
}

@media (max-width: 600px) {
  .legal-row { grid-template-columns: 1fr; gap: 2px; }
  .legal-row-label { margin-bottom: 0; }
  .legal-block { padding: 20px; }
  .rights-grid { grid-template-columns: 1fr; }
}

/* [SCHICHT-3: contact] */
/* ─────────────────────────────────────────────────────────────────────────
   JOIN PAGE (join.html — Member Registration Form)
   ───────────────────────────────────────────────────────────────────────── */
.join-section {
  background: var(--bg);
  padding: 60px 0 100px;
}
.join-wrap {
  max-width: 700px;
  margin: 0 auto;
  padding: 0 24px;
}

/* Form Card */
.join-card {
  background: var(--bg-surface);
  border-left: 2px solid rgba(253,217,1,0.2);
  position: relative;
  padding: 40px;
}
.join-card::before {
  content: '';
  position: absolute;
  top: 0; left: -2px;
  width: 2px; height: 60px;
  background: var(--accent);
  box-shadow: 0 0 10px rgba(253,217,1,0.5);
}
.join-card-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 32px;
  padding-bottom: 20px;
  border-bottom: 1px solid rgba(253,217,1,0.08);
}
.join-card-icon {
  width: 40px; height: 40px;
  background: rgba(253,217,1,0.08);
  border: 1px solid rgba(253,217,1,0.2);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  color: var(--accent);
}
.join-card-title {
  font-family: var(--font-headline);
  font-size: 18px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #fff;
}
.join-card-subtitle {
  font-size: 13px;
  color: var(--text-muted);
  margin-top: 4px;
}

/* Form Fields */
.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.form-field.full { grid-column: 1 / -1; }

.form-label {
  font-family: var(--font-headline);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(253,217,1,0.5);
}
.form-label span {
  color: var(--accent);
  margin-left: 2px;
}

.form-input,
.form-select {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(253,217,1,0.15);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  padding: 12px 16px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  box-sizing: border-box;
}
.form-input::placeholder { color: rgba(255,255,255,0.2); }
.form-input:focus,
.form-select:focus {
  border-color: rgba(253,217,1,0.5);
  box-shadow: 0 0 0 2px rgba(253,217,1,0.08), inset 0 0 12px rgba(253,217,1,0.03);
}

/* Custom Select Arrow */
.form-select-wrap { position: relative; }
.form-select-wrap::after {
  content: '';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid rgba(253,217,1,0.5);
  pointer-events: none;
}
.form-select option {
  background: #1a1a20;
  color: #fff;
}

/* Gamer-Tag mit @ Prefix */
.form-input-wrap { position: relative; }
.form-input-prefix {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--font-headline);
  font-size: 14px;
  color: rgba(253,217,1,0.4);
  pointer-events: none;
}
.form-input-wrap .form-input { padding-left: 28px; }

/* Divider + Submit Area */
.form-divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(253,217,1,0.1) 0%, transparent 100%);
  margin: 28px 0;
}
.form-submit-area {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.form-legal {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  max-width: 300px;
}
.form-legal a { color: rgba(253,217,1,0.5); transition: color 0.15s; }
.form-legal a:hover { color: var(--accent); }

.btn-join {
  font-family: var(--font-headline);
  font-size: 13px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--text-on-primary);
  border: none;
  cursor: pointer;
  padding: 14px 36px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: opacity 0.15s, transform 0.15s;
  white-space: nowrap;
}
.btn-join:hover {
  opacity: 0.88;
  transform: translateY(-1px);
}
.btn-join:active { transform: translateY(0); opacity: 1; }

/* Success Message */
.join-success {
  display: none;
  text-align: center;
  padding: 48px 32px;
}
.join-success-icon {
  width: 56px; height: 56px;
  border: 2px solid var(--accent);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 24px;
  color: var(--accent);
  box-shadow: 0 0 20px rgba(253,217,1,0.2);
}
.join-success h3 {
  font-family: var(--font-headline);
  font-size: 22px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: 12px;
}
.join-success p {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.7;
}

/* Info Sidebar */
.join-layout {
  display: grid;
  grid-template-columns: 1fr 260px;
  gap: 32px;
  align-items: start;
}
.join-info {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.join-info-item {
  padding: 20px;
  background: var(--bg-surface);
  border-left: 2px solid rgba(253,217,1,0.12);
  position: relative;
}
.join-info-item::before {
  content: '';
  position: absolute;
  top: 0; left: -2px;
  width: 2px; height: 20px;
  background: rgba(253,217,1,0.4);
}
.join-info-title {
  font-family: var(--font-headline);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}
.join-info-text {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}

/* Join Responsive */
@media (max-width: 860px) {
  .join-layout { grid-template-columns: 1fr; }
  .join-info { display: none; }
}
@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
  .join-card { padding: 24px 20px; }
  .form-submit-area { flex-direction: column; align-items: flex-start; }
  .btn-join { width: 100%; text-align: center; }
}

/* [SCHICHT-2: BASE] ════════════════════════════
   CREW DETAIL PAGE
   Für panels/crew-detail/ (V2) — drei Versionen:
   Team · Creator · Solo Player
   Content via crew_member.* per Mitglied im CMS.
   ═══════════════════════════════════════════════ */

/* ── Hero-Header ── */
.crew-detail-header {
  position: relative;
  min-height: 260px;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  margin-top: 56px;
  background: var(--bg-surface) center/cover no-repeat;
}
.crew-detail-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(8,8,14,0.97) 0%,
    rgba(8,8,14,0.62) 40%,
    rgba(8,8,14,0.22) 100%
  );
  z-index: 1;
}
.crew-detail-header::after {
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 3px,
    rgba(0,0,0,0.07) 3px, rgba(0,0,0,0.07) 4px
  );
  pointer-events: none;
  z-index: 2;
}
.crew-detail-header-line {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(253,217,1,0.4) 15%,
    rgba(253,217,1,0.9) 50%,
    rgba(253,217,1,0.4) 85%,
    transparent 100%
  );
  box-shadow: 0 0 16px rgba(253,217,1,0.35);
  z-index: 3;
}
.crew-detail-header-inner {
  position: relative;
  z-index: 4;
  width: 100%;
  padding: 28px 0 24px;
}

/* Back-Link */
.crew-detail-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-headline);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(253,217,1,0.55);
  text-decoration: none;
  margin-bottom: 20px;
  transition: color 0.2s;
}
.crew-detail-back:hover { color: var(--accent); }
.crew-detail-back svg { flex-shrink: 0; }

/* Type Badge */
.crew-detail-badge {
  display: inline-block;
  background: var(--accent);
  color: var(--text-on-primary);
  font-family: var(--font-headline);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 5px 18px;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  margin-bottom: 14px;
}

/* Name */
.crew-detail-name {
  font-family: var(--font-headline);
  font-size: clamp(2.8rem, 7vw, 5.5rem);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--accent);
  line-height: 0.95;
  margin-bottom: 12px;
  text-shadow: 0 0 48px rgba(253,217,1,0.28);
}
.crew-detail-sub {
  font-family: var(--font-headline);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* Logo (optional, top-right of header) */
.crew-detail-logo {
  position: absolute;
  top: 36px; right: 0;
  max-height: 96px; max-width: 200px;
  object-fit: contain;
  z-index: 5;
  filter: drop-shadow(0 4px 18px rgba(0,0,0,0.7));
  opacity: 0.9;
}
@media (max-width: 767px) { .crew-detail-logo { display: none; } }

/* ── Body ── */
.crew-detail-body { padding: 60px 0 80px; }

/* Photo + Info two-column grid */
.crew-detail-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 48px;
}
@media (max-width: 860px) {
  .crew-detail-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* Profile Photo */
.crew-detail-photo-wrap { position: relative; }
.crew-detail-photo {
  display: block;
  width: 100%;
  aspect-ratio: 3/4;
  object-fit: cover;
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
}
.crew-detail-photo-wrap::after {
  content: '';
  position: absolute;
  inset: 0;
  border: 2px solid rgba(253,217,1,0.18);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  pointer-events: none;
}

/* Info column */
.crew-detail-info { display: flex; flex-direction: column; gap: 20px; }

/* Tagline */
.crew-detail-tagline {
  font-family: var(--font-body);
  font-size: 15px;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.65;
  padding-bottom: 16px;
  border-bottom: 1px solid rgba(253,217,1,0.1);
}

/* Section card */
.crew-detail-section {
  background: var(--bg-surface);
  border: 1px solid rgba(72,71,76,0.3);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  overflow: hidden;
}
.crew-detail-section-hdr {
  padding: 9px 18px;
  border-bottom: 1px solid rgba(72,71,76,0.3);
  display: flex;
  align-items: center;
  gap: 8px;
}
.crew-detail-section-hdr span {
  font-family: var(--font-headline);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.crew-detail-section-hdr span.a { color: var(--accent); }
.crew-detail-section-body {
  padding: 18px 20px;
  color: var(--text-muted);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 1.72;
}
.crew-detail-section-body p,
.crew-detail-section-body li,
.crew-detail-section-body span,
.crew-detail-section-body a,
.crew-detail-tagline {
  font-family: var(--font-body);
}
.crew-detail-section-body h3 {
  font-family: var(--font-headline);
  font-size: 15px;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 8px;
}
.crew-detail-section-body ul { padding-left: 18px; margin: 0; }
.crew-detail-section-body li { margin-bottom: 4px; }

/* Stats row */
.crew-detail-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 2px;
}
.crew-detail-stat {
  padding: 14px 16px;
  background: var(--bg-surface-container);
}
.crew-detail-stat-label {
  display: block;
  font-family: var(--font-headline);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.crew-detail-stat-value {
  display: block;
  font-family: var(--font-headline);
  font-size: 22px;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: -0.01em;
}

/* Social links */
.crew-detail-socials {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 20px;
}
.crew-detail-social-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 16px;
  background: var(--bg-surface-container);
  border: 1px solid rgba(72,71,76,0.4);
  color: var(--text-muted);
  text-decoration: none;
  font-family: var(--font-headline);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  clip-path: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.crew-detail-social-link:hover {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(253,217,1,0.05);
}

/* Wide section (full-width bio etc.) */
.crew-detail-wide { margin-bottom: 32px; }

/* Responsive */
@media (max-width: 767px) {
  .crew-detail-header { min-height: 190px; }
  .crew-detail-name { font-size: 2.4rem; }
  .crew-detail-body { padding: 36px 0 56px; }
  .crew-detail-stats-row { grid-template-columns: 1fr 1fr; }
}


/* === panel: header === */
/* [SCHICHT-3: header] ══════════════════════════
   NAVBAR
   ═══════════════════════════════════════════════ */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 200;
  height: 56px;
  transition: all 0.3s;
  background: rgba(14, 14, 18, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(253, 217, 1, 0.1);
}

.navbar.scrolled {
  background: rgba(14, 14, 18, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(253, 217, 1, 0.2);
}

.navbar-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 16px;
  height: 100%;
  display: flex;
  align-items: center;
}

@media (min-width: 640px) {
  .navbar-inner { padding: 0 24px; }
}
@media (min-width: 1024px) {
  .navbar-inner { padding: 0 32px; }
}

/* Brand */
.navbar-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-right: 28px;
  border-right: 1px solid rgba(253, 217, 1, 0.15);
  margin-right: 28px;
  flex-shrink: 0;
}

.navbar-brand img {
  height: 32px;
  width: auto;
  object-fit: contain;
}

/* Desktop nav links */
.nav-links {
  display: none;
  flex: 1;
  justify-content: flex-end;
  list-style: none;
}

@media (min-width: 768px) {
  .nav-links { display: flex; }
}

.nav-links a {
  font-family: var(--font-headline);
  font-size: 15px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 8px 12px;
  position: relative;
  transition: color 0.15s;
  color: #71717a;
}

.nav-links a:hover,
.nav-links a.active {
  color: #fff;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 12px;
  right: 12px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 6px var(--neon-glow-strong);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.2s;
}

.nav-links a:hover::after,
.nav-links a.active::after {
  transform: scaleX(1);
}

/* ─── Auth-Block (Login-Button OR User-Menü) ──────────────── */
.navbar-auth {
  display: none;
  margin-left: 16px;
  position: relative;
}

@media (min-width: 640px) {
  .navbar-auth { display: block; }
}

/* Login Button (Anon-State) */
.btn-login {
  display: block;
  font-size: 14px;
  font-weight: 900;
  padding: 5px 16px;
}

/* WICHTIG: Member-Runtime setzt das hidden-Attribut, sobald der
   Auth-State umschaltet. Eigene display:block-Regeln auf .btn-login,
   .mobile-menu-login etc. würden das hidden überschreiben — diese
   Regel hier sorgt dafür, dass hidden immer gewinnt. */
[data-cms-member-anon-only][hidden],
[data-cms-member-authed-only][hidden] {
  display: none !important;
}

/* User Menu Trigger (Authed-State) */
.navbar-user-toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: rgba(253, 217, 1, 0.08);
  border: 1px solid rgba(253, 217, 1, 0.2);
  color: var(--accent);
  font-family: var(--font-headline);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 14px 4px 4px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.navbar-user-toggle:hover {
  background: rgba(253, 217, 1, 0.15);
  border-color: rgba(253, 217, 1, 0.4);
}

/* Avatar-Circle */
.navbar-user-avatar {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(253, 217, 1, 0.15);
  border: 1px solid rgba(253, 217, 1, 0.3);
  overflow: hidden;
  flex-shrink: 0;
}

.navbar-user-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* hidden gewinnt über display:inline-flex */
.navbar-user-avatar[hidden] {
  display: none !important;
}

.navbar-user-name {
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.navbar-user-caret {
  transition: transform 0.2s;
  flex-shrink: 0;
}

.navbar-user[data-open="true"] .navbar-user-caret {
  transform: rotate(180deg);
}

/* Dropdown */
.navbar-user-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 180px;
  background: rgba(20, 20, 26, 0.98);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(253, 217, 1, 0.2);
  list-style: none;
  margin: 0;
  padding: 6px;
  display: none;
  z-index: 250;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5);
}

.navbar-user[data-open="true"] .navbar-user-dropdown {
  display: block;
}

.navbar-user-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: none;
  border: none;
  color: #e4e4e7;
  font-family: var(--font-headline);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
  transition: background 0.12s, color 0.12s;
}

.navbar-user-item:hover {
  background: rgba(253, 217, 1, 0.1);
  color: var(--accent);
}

.navbar-user-item svg {
  flex-shrink: 0;
  opacity: 0.7;
}

/* Mobile Auth-Block */
.mobile-menu-auth {
  margin-top: 16px;
  padding-top: 20px;
  border-top: 1px solid rgba(253, 217, 1, 0.15);
}

.mobile-menu-login {
  display: inline-block !important;
  background: var(--accent);
  color: var(--text-on-primary) !important;
  padding: 10px 20px;
  font-size: 16px !important;
  font-weight: 900;
  font-family: var(--font-headline);
  letter-spacing: 0.14em !important;
  text-transform: uppercase;
}

.mobile-menu-user {
  display: flex;
  flex-direction: column;
  gap: 12px;
  align-items: flex-start;
}

.mobile-menu-user-name {
  font-family: var(--font-headline);
  font-size: 14px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
}

.mobile-menu-user-logout {
  background: transparent;
  border: 1px solid rgba(253, 217, 1, 0.4);
  color: var(--accent);
  font-family: var(--font-headline);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.15s;
}

.mobile-menu-user-logout:hover {
  background: rgba(253, 217, 1, 0.1);
}

/* Mobile toggle — FIXE Größe + gestapelte Icons (Hamburger & X liegen in
   derselben Grid-Zelle). Dadurch ändert der Icon-Wechsel weder Breite noch
   Position → der Button springt beim Öffnen/Schließen NICHT mehr. */
.mobile-toggle {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-left: auto;
  flex: 0 0 auto;
  box-sizing: border-box;
  color: var(--accent);
}
.mobile-toggle-bars,
.mobile-toggle-x {
  grid-area: 1 / 1;          /* beide Icons exakt übereinander, gleiche Zelle */
  width: 24px;
  height: 24px;
}

@media (min-width: 768px) {
  .mobile-toggle { display: none; }
}

/* Mobile menu */
.mobile-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  background: rgba(14, 14, 18, 0.97);
  border-bottom: 1px solid rgba(253, 217, 1, 0.2);
  padding: 32px;
  flex-direction: column;
  gap: 20px;
  /* Menü nie höher als der sichtbare Bereich → es kann die Seitenhöhe NICHT
     vergrößern und damit keine Scrollbar ein-/ausblenden (= kein Springen des
     Toggle-Icons). Bei sehr vielen Punkten scrollt das Menü intern. */
  max-height: calc(100vh - 56px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mobile-menu.open {
  display: flex;
}

/* CSS-only Toggle (Checkbox + Label) — öffnet das Menü ohne JS */
.nav-toggle-cb { display: none; }
#navToggle:checked ~ .mobile-menu { display: flex; }

/* Hamburger ↔ X umschalten */
.mobile-toggle { cursor: pointer; }
.mobile-toggle-x { display: none; }
#navToggle:checked ~ .mobile-toggle .mobile-toggle-bars { display: none; }
#navToggle:checked ~ .mobile-toggle .mobile-toggle-x { display: block; }

@media (min-width: 768px) {
  .mobile-menu { display: none !important; }
  #navToggle:checked ~ .mobile-menu { display: none !important; }
}

/* Nur Handy: Scrollbar IMMER anzeigen + Platz reservieren. Ursache des
   Springens: die Seitenhöhe ändert sich durch dynamische Inhalte (Sponsoren-
   Glitch, Karten-Slider, nachladende Bilder), wodurch die Scrollbar erscheint/
   verschwindet. Da die Navbar position:fixed width:100% ist, wandert ihr
   rechter Rand (und damit der Toggle) um die Scrollbar-Breite hin und her.

   WICHTIG: Die Regel MUSS auf <body>, nicht <html>. body hat in style.css
   overflow-x:hidden; da <html> overflow:visible ist, propagiert der Browser
   die overflow-Werte von <body> auf den Viewport — eine Regel auf <html>
   wird deshalb ignoriert. overflow-y:scroll auf body hält die Scrollbar
   konstant → keine Breitenänderung mehr. Am PC (≥768px) unverändert. */
@media (max-width: 767px) {
  body {
    overflow-y: scroll;
    scrollbar-gutter: stable;
  }

  /* Container-UNABHÄNGIGER Fix (falls die Scrollbar trotzdem toggelt): Navbar
     an die volle Viewport-Breite inkl. Scrollbar-Bereich binden. 100vw ist
     konstant — anders als width:100% / right:0, die beim Erscheinen der
     Scrollbar schmaler werden. So bleibt der rechte Rand (und damit der
     Hamburger/X-Toggle) IMMER an derselben Stelle, egal ob eine Scrollbar
     kommt oder geht. */
  .navbar {
    width: 100vw !important;
    left: 0 !important;
  }
  /* Menü hängt an der Navbar → dieselbe Breite */
  .mobile-menu {
    width: 100vw !important;
  }
}

/* Keine Listen-Bullets (weiße Punkte) im Mobile-Menü — egal ob der Server
   die Menüpunkte als <ul>/<li> oder als <a> rendert. */
.mobile-menu,
.mobile-menu ul,
.mobile-menu li {
  list-style: none !important;
}
.mobile-menu li::marker { content: none; }

.mobile-menu a {
  display: flex;
  align-items: center;
  gap: 14px;
  font-family: var(--font-headline);
  font-size: 20px;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* Gelber Strich vor jedem Menüpunkt (statt weißer Punkt) */
.mobile-menu a::before {
  content: '';
  flex: 0 0 auto;
  width: 18px;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 6px var(--neon-glow-strong);
}
/* Login-Button im Auth-Block braucht keinen Strich */
.mobile-menu .mobile-menu-auth a::before {
  display: none;
}


/* === panel: page-hero === */
/* [SCHICHT-3: page-hero] ═══════════════════════════════════
   SUBPAGE-HERO (Cyberpunk-Style Sub-Page Header)
   Wird auf allen Sub-Pages verwendet (teams.html, join.html, etc.)
   ═══════════════════════════════════════════════════════════ */
.subpage-hero {
  position: relative;
  height: 220px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding-bottom: 40px;
}
.subpage-hero-bg {
  position: absolute;
  inset: -20px;
  /* Standard-Fallback für alle Unterseiten — im CMS pro Seite überschreibbar */
  background-image: url('../../media/SSP_CyberSissi_Hintergrund.webp');
  background-size: cover;
  background-position: center 30%;
  filter: blur(3px) brightness(0.3) saturate(1.2);
}
.subpage-hero-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0px, transparent 2px,
    rgba(0,0,0,0.12) 2px, rgba(0,0,0,0.12) 4px
  );
  pointer-events: none;
}
.subpage-hero-line {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(253,217,1,0.5) 20%, rgba(253,217,1,0.9) 50%, rgba(253,217,1,0.5) 80%, transparent 100%);
  box-shadow: 0 0 16px rgba(253,217,1,0.4);
}
.subpage-hero-content { position: relative; z-index: 2; }
.subpage-breadcrumb {
  font-family: var(--font-headline);
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(253,217,1,0.45);
  margin-bottom: 10px;
}
.subpage-breadcrumb a { color: rgba(253,217,1,0.45); transition: color 0.15s; text-decoration: none; }
.subpage-breadcrumb a:hover { color: var(--accent); }
.subpage-breadcrumb span.bc-sep { margin: 0 8px; }
.subpage-title {
  font-family: var(--font-headline);
  font-size: clamp(32px, 5vw, 56px);
  color: #fff;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  line-height: 1;
  margin: 0;
}
.subpage-title em { color: var(--accent); font-style: normal; }


/* === panel: cta === */
/* ═══════════════════════════════════════════════════════════
   CALL TO ACTION — Panel-Styles (SSP-Style, große Typo)
   Namespace: cta2-
   V1 = zentriert · V2 = split · V3 = mega (gelbe Fläche)
   ═══════════════════════════════════════════════════════════ */

.cta2 {
  position: relative;
  overflow: hidden;
  background: var(--bg);
  padding: clamp(56px, 9vw, 110px) 0;
}

/* Dezente Rasterlinien im Hintergrund (Cyberpunk-Anmutung) */
.cta2-grid {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(253, 217, 1, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(253, 217, 1, 0.04) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 78%);
}

.cta2 .container { position: relative; z-index: 1; }

/* ── Gemeinsame Bausteine ───────────────────────────────────── */
.cta2-tag {
  display: inline-block;
  font-family: var(--font-headline);
  font-size: 12px;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 18px;
}
.cta2-headline {
  font-family: var(--font-headline);
  font-size: clamp(2.2rem, 6vw, 5rem);
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.98;
  color: var(--text);
  margin: 0;
}
.cta2-sub {
  font-family: var(--font-body);
  font-size: clamp(15px, 1.6vw, 18px);
  line-height: 1.55;
  color: var(--text-muted);
  margin: 18px 0 0;
  max-width: 540px;
}
.cta2-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 28px;
  padding: 15px 34px;
  background: var(--accent);
  color: var(--text-on-primary, #0a0a0a);
  font-family: var(--font-headline);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  /* gechamferte Ecken */
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: filter 0.2s, transform 0.2s, box-shadow 0.2s;
}
.cta2-btn:hover {
  filter: brightness(1.08);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(253, 217, 1, 0.25);
}
/* cta.js blendet den Button aus (Toggle aus ODER kein Text) — display:inline-flex
   oben würde [hidden] sonst überschreiben. */
.cta2-btn[hidden] { display: none !important; }

/* ════════════════════════════════════════════════════════════
   V1 — ZENTRIERT
   ════════════════════════════════════════════════════════════ */
.cta2-inner--center {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 820px;
  margin: 0 auto;
}
.cta2-inner--center .cta2-sub { margin-left: auto; margin-right: auto; }

/* ════════════════════════════════════════════════════════════
   V2 — SPLIT
   ════════════════════════════════════════════════════════════ */
.cta2-inner--split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.9fr);
  gap: 32px 48px;
  align-items: center;
}
.cta2-inner--split .cta2-left { min-width: 0; }
.cta2-inner--split .cta2-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border-left: 2px solid rgba(253, 217, 1, 0.25);
  padding-left: 32px;
}
.cta2-inner--split .cta2-sub { margin-top: 0; }

/* ════════════════════════════════════════════════════════════
   V3 — MEGA (gelbe Fläche, optional Bild gelb getönt)
   ════════════════════════════════════════════════════════════ */
.cta2--mega {
  background: var(--accent);
}
.cta2--mega .cta2-grid { display: none; }

/* Optionales Hintergrundbild: liegt über der gelben Fläche, wird per
   mix-blend-mode:multiply + grayscale gelb eingefärbt. Leeres Feld =
   kein Bild (data-cms-bg setzt dann kein background-image) → reine
   gelbe Fläche. */
.cta2-mega-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  filter: grayscale(1) contrast(1.05);
  mix-blend-mode: multiply;
  opacity: 0.92;
  pointer-events: none;
}
.cta2--mega .container { position: relative; z-index: 1; }
.cta2-inner--mega {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
.cta2-tag--dark { color: rgba(10, 10, 10, 0.7); }
.cta2-headline--mega {
  color: var(--text-on-primary, #0a0a0a);
  font-size: clamp(2.6rem, 8vw, 6rem);
}
.cta2-btn--dark {
  background: #0a0a0a;
  color: var(--accent);
  margin-top: 32px;
}
.cta2-btn--dark:hover {
  filter: none;
  background: #18181f;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3);
}

/* ════════════════════════════════════════════════════════════
   V4 — ZENTRIERT BOXED (dunkel, Rahmen)
   ════════════════════════════════════════════════════════════ */
.cta2--boxed {
  background: var(--bg);
}
.cta2-box {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: clamp(36px, 6vw, 64px) clamp(24px, 5vw, 56px);
  background: var(--bg-surface, #131318);
  border: 2px solid rgba(253, 217, 1, 0.35);
  /* gechamferte Cyberpunk-Ecken */
  clip-path: polygon(20px 0, 100% 0, 100% calc(100% - 20px), calc(100% - 20px) 100%, 0 100%, 0 20px);
}
.cta2-box .cta2-sub { margin-left: auto; margin-right: auto; }

/* ════════════════════════════════════════════════════════════
   V5 — MEGA DARK (dunkel, riesig, minimal)
   ════════════════════════════════════════════════════════════ */
.cta2--megadark {
  background:
    radial-gradient(ellipse at center, rgba(253,217,1,0.06) 0%, transparent 60%),
    var(--bg);
}
.cta2-headline--megadark {
  color: var(--text);
  font-size: clamp(2.6rem, 8vw, 6rem);
}
.cta2-headline--megadark::after {
  content: '';
  display: block;
  width: 64px;
  height: 4px;
  margin: 22px auto 0;
  background: var(--accent);
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════════ */
@media (max-width: 767px) {
  .cta2-inner--split {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .cta2-inner--split .cta2-right {
    border-left: none;
    border-top: 2px solid rgba(253, 217, 1, 0.25);
    padding-left: 0;
    padding-top: 22px;
  }
}


/* === panel: media-kit-logos === */
/* ═══════════════════════════════════════════════════════════
   MEDIA KIT — LOGOS (Grid). Namespace: mk-
   ═══════════════════════════════════════════════════════════ */

.mk-section { position: relative; background: var(--bg); padding: 72px 0 88px; }

/* ── Header ─────────────────────────────────────────────────── */
.mk-header { margin-bottom: 40px; max-width: 760px; }
.mk-tag {
  display: inline-block;
  font-family: var(--font-headline);
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
.mk-heading {
  font-family: var(--font-headline);
  font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 900; font-style: italic;
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 1;
  color: var(--text); margin: 0 0 12px;
}
.mk-intro {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  color: var(--text-muted); margin: 0;
}

/* ── Logo-Grid ──────────────────────────────────────────────── */
.mk-grid {
  --mk-cols: 3;
  display: grid;
  grid-template-columns: repeat(var(--mk-cols), 1fr);
  gap: 18px;
}
.mk-logo-card {
  display: flex; flex-direction: column; margin: 0;
  background: var(--bg-surface-container, #19191e);
  border: 1px solid rgba(255, 255, 255, 0.07);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%);
  transition: border-color 0.25s ease, transform 0.25s ease;
}
.mk-logo-card:hover { border-color: rgba(253, 217, 1, 0.4); transform: translateY(-3px); }

.mk-logo-imgwrap {
  position: relative; aspect-ratio: 16 / 10;
  display: flex; align-items: center; justify-content: center;
  padding: 28px; overflow: hidden;
  background:
    linear-gradient(135deg, #1a1a24 0%, #0f0f16 100%),
    repeating-conic-gradient(rgba(255,255,255,0.02) 0% 25%, transparent 0% 50%) 0 0 / 22px 22px;
}
.mk-logo-img {
  max-width: 78%; max-height: 78%; width: auto; height: auto;
  object-fit: contain;
  filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.45));
  transition: transform 0.3s ease;
}
.mk-logo-card:hover .mk-logo-img { transform: scale(1.04); }

.mk-logo-foot {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 14px; border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.mk-logo-title {
  font-family: var(--font-headline); font-size: 12px; font-weight: 700;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text); line-height: 1.2;
}
.mk-dl-icon {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; color: var(--accent);
  background: rgba(253, 217, 1, 0.1); border: 1px solid rgba(253, 217, 1, 0.25);
  cursor: pointer; transition: background 0.2s, color 0.2s, transform 0.2s;
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
}
.mk-dl-icon:hover {
  background: var(--accent); color: var(--text-on-primary, #0a0a0a); transform: translateY(-1px);
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) { .mk-grid { --mk-cols: 2 !important; } }
@media (max-width: 767px) { .mk-section { padding: 48px 0 60px; } }
@media (max-width: 479px) { .mk-grid { --mk-cols: 1 !important; } }


/* === panel: media-kit-wallpapers === */
/* ═══════════════════════════════════════════════════════════
   MEDIA KIT — WALLPAPERS (Bild links, Text + Download rechts)
   Namespace: mk-
   ═══════════════════════════════════════════════════════════ */

.mk-section { position: relative; background: var(--bg-surface, #131318); padding: 72px 0 88px; }

/* ── Header ─────────────────────────────────────────────────── */
.mk-header { margin-bottom: 40px; max-width: 760px; }
.mk-tag {
  display: inline-block;
  font-family: var(--font-headline);
  font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase;
  color: var(--accent); margin-bottom: 12px;
}
.mk-heading {
  font-family: var(--font-headline);
  font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 900; font-style: italic;
  text-transform: uppercase; letter-spacing: -0.01em; line-height: 1;
  color: var(--text); margin: 0 0 12px;
}
.mk-intro {
  font-family: var(--font-body); font-size: 15px; line-height: 1.6;
  color: var(--text-muted); margin: 0;
}

/* ── Wallpaper-Liste ────────────────────────────────────────── */
.mk-wall-list { display: flex; flex-direction: column; gap: 22px; }

.mk-wall-row {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  background: var(--bg-surface-container, #19191e);
  border: 1px solid rgba(255, 255, 255, 0.07);
  overflow: hidden;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 16px), calc(100% - 16px) 100%, 0 100%);
  transition: border-color 0.25s ease;
}
.mk-wall-row:hover { border-color: rgba(253, 217, 1, 0.32); }

.mk-wall-img { position: relative; min-height: 200px; overflow: hidden; }
.mk-wall-img img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.mk-wall-row:hover .mk-wall-img img { transform: scale(1.04); }

.mk-wall-info {
  display: flex; flex-direction: column; justify-content: center; gap: 12px;
  padding: 28px 30px;
}
.mk-wall-title {
  font-family: var(--font-headline);
  font-size: clamp(1.2rem, 2.4vw, 1.7rem); font-weight: 900; font-style: italic;
  text-transform: uppercase; letter-spacing: -0.01em; color: var(--text);
  margin: 0; line-height: 1.05;
}
.mk-wall-text {
  font-family: var(--font-body); font-size: 14px; line-height: 1.6;
  color: var(--text-muted); margin: 0;
}
.mk-dl-btn {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  margin-top: 4px; padding: 11px 22px;
  background: var(--accent); color: var(--text-on-primary, #0a0a0a);
  font-family: var(--font-headline); font-size: 12px; font-weight: 700;
  letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none;
  cursor: pointer; transition: filter 0.2s, transform 0.2s;
}
.mk-dl-btn:hover { filter: brightness(1.1); transform: translateY(-1px); }
.mk-dl-btn svg { display: block; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 767px) {
  .mk-section { padding: 48px 0 60px; }
  .mk-wall-row { grid-template-columns: 1fr; }
  .mk-wall-img { min-height: 180px; }
  .mk-wall-info { padding: 22px 20px; }
}


/* === panel: footer === */
/* [SCHICHT-3: footer] ══════════════════════════
   FOOTER
   ═══════════════════════════════════════════════ */
.site-footer {
  padding: 24px 0;
  background: #060606;
  border-top: 1px solid rgba(253, 217, 1, 0.1);
}

.footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}

@media (min-width: 640px) {
  .footer-inner { padding: 0 24px; }
}
@media (min-width: 768px) {
  .footer-inner { flex-direction: row; }
}
@media (min-width: 1024px) {
  .footer-inner { padding: 0 32px; }
}

.footer-links {
  display: flex;
  gap: 24px;
}

.footer-links a {
  font-family: var(--font-body);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #444440;
  transition: color 0.15s;
}

.footer-links a:hover {
  color: var(--accent);
}

.footer-social {
  display: flex;
  gap: 8px;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid rgba(253, 217, 1, 0.12);
  color: rgba(253, 217, 1, 0.35);
  transition: color 0.15s, border-color 0.15s;
}

.footer-social a:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* footer.js setzt [hidden] auf Links ohne echte URL — display:flex oben
   wuerde das sonst ueberschreiben, daher explizit ausblenden. */
.footer-social a[hidden] {
  display: none !important;
}

.footer-social-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

/* CMS-Icon (data-cms-icon) und statische Vorschau-SVGs einheitlich groß */
.footer-social a svg,
.footer-social-icon svg {
  width: 15px;
  height: 15px;
  display: block;
}