/* === 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%;
}

/* Sicherheitsnetz gegen waagrechten Überhang.
   `body { overflow-x: hidden }` weiter unten reicht allein nicht: Wenn
   trotzdem etwas übersteht, wächst der LAYOUT-Viewport mit. Elemente mit
   position:fixed (Modals, Overlays) richten sich danach und werden breiter
   als der Bildschirm — am Handy sah das aus, als springe die Seite während
   einer Einblend-Animation hin und her.

   ⚠ Hier bewusst `clip` und NICHT `hidden`:
   `overflow-x: hidden` auf <html> würde overflow-y zu `auto` machen und
   damit einen Scroll-Container erzeugen — das bricht `position: sticky`
   (style.css Zeile ~2196 und event-detail.css:261).
   `clip` schneidet ab, ohne einen Scroll-Container anzulegen.

   Das ist die zweite Verteidigungslinie. Die eigentliche Ursache gehört
   immer dort behoben, wo etwas übersteht — siehe die Slider-Regeln in
   crew-cards.css und management.css. */
@supports (overflow-x: clip) {
  html { overflow-x: clip; }
}

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;
}


/* ═══ SPRUNGLINK (WCAG 2.2 – 2.4.1 „Blöcke umgehen") ═══════════════════
   Unsichtbar, solange er keinen Fokus hat — aber NICHT per display:none
   oder visibility:hidden, denn dann wäre er auch für die Tastatur weg.
   Stattdessen aus dem sichtbaren Bereich geschoben. Beim Fokussieren
   (erster Tab-Druck auf der Seite) springt er sichtbar nach oben links.
   Für Maus-Nutzer ändert sich dadurch nichts. */
.skip-link {
  position: fixed;
  top: -100px;
  left: 12px;
  z-index: 2000;          /* über der fixierten Navbar (z-index 1000) */
  padding: 12px 20px;
  background: var(--accent, #fdd901);
  color: var(--text-on-primary, #0a0a0a);
  font-family: var(--font-headline);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  clip-path: polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
  transition: top 0.15s ease-out;
}
.skip-link:focus,
.skip-link:focus-visible {
  top: 12px;
  outline: 2px solid #fff;
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .skip-link { transition: none; }
}

/* Sprungziel nicht unter der fixierten Navbar verstecken: Nach dem Sprung
   soll der Inhalt sichtbar beginnen, nicht hinter dem Header liegen. */
#hauptinhalt { scroll-margin-top: 90px; }


/* === 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: partners-overview === */
/* [SCHICHT-3: partners-overview] ══════════════════════
   PARTNER ÜBERSICHT — /partner Seite
   Drei Stufen: Hauptpartner (groß) → Partner → Weitere
   Logos immer original — kein Filter, kein Graustufen.
   ═════════════════════════════════════════════════════ */

/* ── Section ──────────────────────────────────────────── */
.po-section {
  background: var(--bg-surface);
  padding: 72px 0 96px;
}


/* ── Tier Block ───────────────────────────────────────── */
.po-tier {
  margin-bottom: 72px;
}
.po-tier:last-child {
  margin-bottom: 0;
}

/* Tier ohne Partner-Karten komplett ausblenden — sonst hingen leere
   Linien + Ueberschrift ("PARTNER", "WEITERE PARTNER") in der Luft,
   wenn der Admin in dem Tier (noch) niemanden gepflegt hat.
   :has() funktioniert auf <template>-Inhalt nicht, daher ist die Regel
   sicher: greift erst wenn das CMS keine echten Cards gerendert hat. */
.po-section .po-tier:not(:has(.cms-partner-card)) {
  display: none;
}


/* ── Tier Header (Linie + Label zentriert) ────────────── */
.po-tier-header {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-bottom: 48px;
}
.po-tier-line {
  flex: 1;
  height: 1px;
  background: rgba(255, 255, 255, 0.07);
}
.po-tier-label {
  font-family: var(--font-headline);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  white-space: nowrap;
}
.po-tier--main      .po-tier-label { color: var(--accent); }
.po-tier--secondary .po-tier-label { color: var(--text-muted); }
.po-tier--tertiary  .po-tier-label { color: rgba(255, 255, 255, 0.25); }


/* ── Partner Row (alle Tiers) — immer zentriert ───────── */
.po-section .cms-partner-row {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Originalfarben erzwingen — alle anderen Filter-Regeln überschreiben */
.po-section .cms-partner-logo {
  filter: none !important;
}


/* ══════════════════════════════════════════════════════
   TIER 1 — HAUPTPARTNER
   Groß, prominent, Cyberpunk-Card mit Akzentrahmen
   ══════════════════════════════════════════════════════ */

.po-tier--main .cms-partner-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  width: 260px;
  padding: 44px 28px 32px;
  background: var(--bg-surface-container);
  border: 2px solid var(--accent);
  clip-path: polygon(12px 0, 100% 0, 100% calc(100% - 12px), calc(100% - 12px) 100%, 0 100%, 0 12px);
  text-decoration: none;
  color: var(--text);
  overflow: hidden;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease;
}

/* Subtiler Akzent-Glow im Hintergrund */
.po-tier--main .cms-partner-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%,
    rgba(253, 217, 1, 0.06) 0%,
    transparent 65%);
  pointer-events: none;
  z-index: 0;
}

.po-tier--main .cms-partner-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 48px rgba(253, 217, 1, 0.18);
}

/* Logo — original, kein Filter */
.po-tier--main .cms-partner-logo {
  position: relative;
  z-index: 1;
  max-height: 120px;
  max-width: 200px;
  width: auto;
  object-fit: contain;
  transition: transform 0.35s ease;
}
.po-tier--main .cms-partner-card:hover .cms-partner-logo {
  transform: scale(1.05);
}

.po-tier--main .cms-partner-name {
  position: relative;
  z-index: 1;
  display: block;
  font-family: var(--font-headline);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  text-align: center;
}


/* ══════════════════════════════════════════════════════
   TIER 2 — PARTNER
   Mittelgroß, subtile Card, original Logos
   ══════════════════════════════════════════════════════ */

.po-tier--secondary .cms-partner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  width: 170px;
  padding: 28px 20px 20px;
  background: var(--bg-surface-container);
  border: 1px solid rgba(255, 255, 255, 0.07);
  text-decoration: none;
  color: var(--text);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.po-tier--secondary .cms-partner-card:hover {
  border-color: rgba(253, 217, 1, 0.3);
  transform: translateY(-4px);
}

/* Logo — original, kein Filter */
.po-tier--secondary .cms-partner-logo {
  max-height: 68px;
  max-width: 130px;
  width: auto;
  object-fit: contain;
  transition: transform 0.3s ease;
}
.po-tier--secondary .cms-partner-card:hover .cms-partner-logo {
  transform: scale(1.05);
}

.po-tier--secondary .cms-partner-name {
  display: block;
  font-family: var(--font-headline);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}


/* ══════════════════════════════════════════════════════
   TIER 3 — WEITERE PARTNER
   Kompakt, nur Logo, kein Name, original Farben
   ══════════════════════════════════════════════════════ */

/* Tier 3 bekommt jetzt das GLEICHE Kästchen wie die Sponsoren
   (Hintergrund + Rahmen, volle Deckkraft, Name sichtbar). */
.po-tier--tertiary .cms-partner-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--text);
  background: var(--bg-surface-container);
  border: 1px solid rgba(255, 255, 255, 0.07);
  transition: border-color 0.3s ease, transform 0.3s ease;
}
.po-tier--tertiary .cms-partner-card:hover {
  border-color: rgba(253, 217, 1, 0.3);
  transform: translateY(-4px);
}

/* Logo — original, kein Filter */
.po-tier--tertiary .cms-partner-logo {
  width: auto;
  object-fit: contain;
}

/* Name sichtbar — wie bei den Sponsoren */
.po-tier--tertiary .cms-partner-name {
  display: block;
  font-family: var(--font-headline);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
}

/* ══════════════════════════════════════════════════════
   EINHEITLICHE KÄSTCHEN (alle Tiers, alle Partner)
   IDENTISCHE Größe UND Optik — keine Unterscheidung auf den
   ersten Blick (kein gelber Rahmen, kein Glow, kein Fade).
   Alle Partner werden gleich behandelt.
   ══════════════════════════════════════════════════════ */
.po-section .cms-partner-card {
  position: relative;
  width: 260px !important;
  height: 260px !important;
  /* Logo zentriert, Name absolut am Boden → padding-bottom reserviert Platz */
  padding: 28px 24px 52px !important;
  gap: 0 !important;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  text-decoration: none;
  /* Identische, schlichte Box — KEINE abgeschnittenen Ecken, dezenter Rahmen */
  background: var(--bg-surface-container) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  clip-path: none !important;
}
/* Akzent-Glow des Hauptsponsoren-Tiers entfernen */
.po-section .cms-partner-card::before { display: none !important; }
/* Hover: Rahmen wird gelb + dezentes Anheben */
.po-section .cms-partner-card:hover {
  border-color: var(--accent, #fdd901) !important;
  transform: translateY(-4px) !important;
  box-shadow: none !important;
}
.po-section .cms-partner-card:hover .cms-partner-logo {
  transform: none !important;
}
/* "ZUR WEBSITE"-Info-Overlay komplett entfernen — Klick auf die Kachel
   geht direkt zur Website (die Card ist ein <a href>). */
.po-section .po-overlay { display: none !important; }
/* Logo zentriert */
.po-section .cms-partner-logo {
  max-height: 100px !important;
  max-width: 180px !important;
  width: auto;
  height: auto;
  object-fit: contain;
}
/* Name am unteren Rand, dezent */
.po-section .cms-partner-name {
  position: absolute !important;
  bottom: 24px;
  left: 16px;
  right: 16px;
  text-align: center;
  font-family: var(--font-headline);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--text-muted) !important;
  line-height: 1.3;
}
/* Overlay-Inhalt scrollt notfalls innerhalb der fixen Box (kein Abschneiden
   bei langer Beschreibung), Scrollbar dezent ausgeblendet. */
.po-section .po-overlay {
  overflow-y: auto;
  scrollbar-width: none;
}
.po-section .po-overlay::-webkit-scrollbar { display: none; }


/* ═════════════════════════════════════════════════════════
   INFO-OVERLAY — erscheint beim Hover (Desktop) oder
   ersten Tap (Touch). Zweiter Tap navigiert zur Website.
   Pflegt der Admin im CMS pro Partner Kategorie, Tagline,
   Seit, Beschreibung — wird automatisch ausgeblendet
   wenn leer (siehe partners-overview.js).
   ═════════════════════════════════════════════════════════ */

/* Container braucht overflow:hidden, damit das Overlay nicht ueberlappt.
   Tier 1 hatte schon overflow:hidden. Tier 2 + 3 brauchen es jetzt auch
   und position:relative, damit das absolute Overlay sich an der Card
   ausrichtet. */
.po-section .cms-partner-card {
  position: relative;
}
.po-tier--secondary .cms-partner-card,
.po-tier--tertiary  .cms-partner-card {
  overflow: hidden;
}

.po-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 18px 18px 16px;
  background: linear-gradient(180deg,
              rgba(15, 15, 22, 0.97) 0%,
              rgba(15, 15, 22, 0.92) 50%,
              rgba(15, 15, 22, 0.97) 100%);
  /* Default: versteckt + leicht nach unten verschoben (Slide-Up-Effekt) */
  opacity: 0;
  transform: translateY(16px);
  pointer-events: none;
  transition: opacity 0.32s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
  /* Karten-Notch nachbilden, sonst sticht das Overlay aus der Form raus */
  clip-path: inherit;
  text-align: left;
}

/* Wenn Card gehovered / fokussiert / per Touch geoeffnet → Overlay sichtbar */
.po-section .cms-partner-card:hover .po-overlay,
.po-section .cms-partner-card:focus-within .po-overlay,
.po-section .cms-partner-card.is-touch-open .po-overlay {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* ─── Overlay-Inhalte ─────────────────────────────────── */

.po-overlay-tag {
  display: inline-block;
  align-self: flex-start;
  font-family: var(--font-headline);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  padding: 3px 8px;
  background: rgba(253, 217, 1, 0.1);
  border: 1px solid rgba(253, 217, 1, 0.35);
  clip-path: polygon(4px 0, 100% 0, 100% calc(100% - 4px), calc(100% - 4px) 100%, 0 100%, 0 4px);
  margin-bottom: 4px;
}
.po-overlay-tag:empty,
.po-overlay-tag[hidden] { display: none; }

.po-overlay-name {
  font-family: var(--font-headline);
  font-size: 1.25rem;
  font-weight: 900;
  font-style: italic;
  text-transform: uppercase;
  letter-spacing: -0.01em;
  color: #fff;
  margin: 0 0 2px;
  line-height: 1.1;
}

.po-overlay-tagline {
  font-family: var(--font-body);
  font-size: 12px;
  font-style: italic;
  color: var(--text-muted);
  margin: 0 0 6px;
  line-height: 1.4;
}
.po-overlay-tagline:empty,
.po-overlay-tagline[hidden] { display: none; }

.po-overlay-meta {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-bottom: 6px;
}
.po-overlay-meta[hidden] { display: none; }

.po-overlay-meta-row {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-family: var(--font-headline);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.po-overlay-meta-row[hidden] { display: none; }
.po-overlay-meta-label { color: rgba(253, 217, 1, 0.6); }
.po-overlay-meta-value { color: #fff; font-weight: 700; }

.po-overlay-desc {
  flex: 1;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 0 0 10px;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  white-space: pre-line;
}
.po-overlay-desc:empty,
.po-overlay-desc[hidden] { display: none; }

.po-overlay-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  margin-top: auto;
  padding: 8px 14px;
  background: var(--accent);
  color: var(--text-on-primary, #0a0a0a);
  font-family: var(--font-headline);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  clip-path: polygon(5px 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) 100%, 0 100%, 0 5px);
  transition: filter 0.2s, transform 0.2s;
}
.po-section .cms-partner-card:hover .po-overlay-cta,
.po-section .cms-partner-card.is-touch-open .po-overlay-cta {
  /* dezenter "Glow" via brightness */
  filter: brightness(1.05);
}

/* ─── Tier-spezifische Anpassungen ────────────────────── */

/* Tier 1: viel Platz, Standardgroessen */
.po-tier--main .po-overlay {
  padding: 22px 22px 20px;
}
.po-tier--main .po-overlay-name { font-size: 1.5rem; }
.po-tier--main .po-overlay-desc { -webkit-line-clamp: 5; }

/* Tier 2: weniger Platz, kompaktere Typo */
.po-tier--secondary .po-overlay {
  padding: 14px 14px 12px;
  gap: 6px;
}
.po-tier--secondary .po-overlay-name { font-size: 1rem; }
.po-tier--secondary .po-overlay-tagline { font-size: 11px; }
.po-tier--secondary .po-overlay-desc {
  font-size: 11px;
  -webkit-line-clamp: 3;
}
.po-tier--secondary .po-overlay-cta {
  font-size: 10px;
  padding: 6px 10px;
}

/* Tier 3: kompakt, nur essentielle Felder.
   description wird ausgeblendet (siehe partners-overview.js bzw.
   per CSS hier zusaetzlich). */
.po-tier--tertiary .po-overlay {
  padding: 10px 12px;
  gap: 4px;
}
.po-tier--tertiary .po-overlay-tag {
  font-size: 8px;
  letter-spacing: 0.16em;
  padding: 2px 6px;
}
.po-tier--tertiary .po-overlay-name { font-size: 13px; }
.po-tier--tertiary .po-overlay-tagline {
  font-size: 10px;
  -webkit-line-clamp: 2;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.po-tier--tertiary .po-overlay-meta,
.po-tier--tertiary .po-overlay-desc {
  display: none;
}
.po-tier--tertiary .po-overlay-cta {
  font-size: 9px;
  padding: 5px 8px;
  letter-spacing: 0.14em;
}
/* Tier 3 wird beim Hover voll sichtbar (statt nur opacity 0.55) */
.po-tier--tertiary .cms-partner-card:hover,
.po-tier--tertiary .cms-partner-card:focus-within,
.po-tier--tertiary .cms-partner-card.is-touch-open {
  opacity: 1;
}

/* ─── Reduced Motion: Slide-Up deaktivieren ──────────── */
@media (prefers-reduced-motion: reduce) {
  .po-overlay {
    transition: opacity 0.15s linear;
    transform: none;
  }
}


/* ── Responsive ───────────────────────────────────────── */
@media (max-width: 640px) {
  .po-section { padding: 48px 0 64px; }

  /* Einheitliche Box auch mobil — responsive Breite. */
  .po-section .cms-partner-card {
    width: min(260px, 84vw) !important;
    height: min(260px, 84vw) !important;
    padding: 24px 20px 48px !important;
  }
  .po-section .cms-partner-logo { max-height: 92px !important; }
}

/* ── Reduced Motion ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .po-tier--main .cms-partner-card,
  .po-tier--secondary .cms-partner-card,
  .po-tier--tertiary .cms-partner-card,
  .po-tier--main .cms-partner-logo,
  .po-tier--secondary .cms-partner-logo {
    transition: none;
  }
}


/* ══════════════════════════════════════════════════════════════
   NUR HANDY (≤767px): Sponsoren-Reihe rotiert eine Kachel durch
   (aktiviert von partners-overview.js über die Klasse .po-mobile-rotate).
   Am PC/Tablet greift diese Media-Query nicht → alles bleibt wie es ist.
   ══════════════════════════════════════════════════════════════ */
/* Nachfahren-Selektoren (kein ">"), damit es auch greift, falls das CMS
   die Karten verschachtelt rendert. JS blendet über .po-hidden aus und
   steuert die Glitch-Klassen. */
@media (max-width: 767px) {
  /* Überschriften der Abschnitte (HAUPTSPONSOREN / SPONSOREN / PARTNER)
     waren am Handy mit 11px sehr klein. Der Zeichenabstand ist bewusst
     enger als am PC (0.35em → 0.18em): Bei 20px und 0.35em wäre
     „HAUPTSPONSOREN" breiter als der Bildschirm und würde umbrechen. */
  .po-section .po-tier-label {
    font-size: 20px;
    letter-spacing: 0.18em;
  }

  .po-section .cms-partner-row.po-mobile-rotate {
    /* 2x2-Raster statt einer einzelnen grossen Kachel.
       partners-overview.js zeigt vier Kacheln gleichzeitig und blättert
       danach auf die nächsten vier weiter.

       ⚠ minmax(0, 1fr), NICHT 1fr.
       Raster-Elemente haben min-width:auto — ihre Mindestbreite ist der
       Inhalt. Die Kachel ist 260px breit vorgegeben, dadurch wuchs die
       erste Spalte auf 260px und quetschte die zweite auf 71px.
       minmax(0, …) erlaubt der Spalte, unter den Inhalt zu schrumpfen. */
    display: grid !important;   /* überschreibt das flex !important */
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px;
    align-items: start;
    justify-items: stretch;
    position: relative;
    text-align: center;
  }
  .po-section .cms-partner-row.po-mobile-rotate .cms-partner-card {
    /* Breite und Höhe der Kachel sind am PC fest auf 260px gesetzt.
       Im Raster ist die Spalte aber nur noch rund 166px breit — ohne
       height:auto + aspect-ratio bliebe die Kachel 260px hoch und wäre
       ein hohes schmales Rechteck statt eines Quadrats. */
    width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
    margin: 0 !important;
    /* Innenabstand verkleinert — 24/20/48 war auf 260px gerechnet.
       Unten bleibt Platz für den Namen, der dort absolut sitzt. */
    padding: 14px 12px 34px !important;
  }
  .po-section .cms-partner-row.po-mobile-rotate .cms-partner-logo {
    max-width: 100% !important;
    height: auto;
  }
  .po-section .cms-partner-row.po-mobile-rotate .cms-partner-card.po-hidden {
    display: none !important;
  }
  .po-section .cms-partner-row.po-mobile-rotate .cms-partner-card.po-glitch-in {
    animation: po-glitch-in 0.5s linear both;
  }
  .po-section .cms-partner-row.po-mobile-rotate .cms-partner-card.po-glitch-out {
    animation: po-glitch-out 0.44s linear both;
  }
}

/* Glitch-IN: Kachel taucht mit RGB/Clip-Flicker auf */
@keyframes po-glitch-in {
  0%   { opacity: 0; clip-path: inset(45% 0 45% 0); transform: translateX(-8px); filter: brightness(1.5) contrast(1.15); }
  22%  { opacity: 1; clip-path: inset(0 0 58% 0);   transform: translateX(6px); }
  40%  { clip-path: inset(62% 0 0 0);  transform: translateX(-4px); }
  58%  { clip-path: inset(18% 0 22% 0); transform: translateX(3px); }
  74%  { clip-path: inset(0 0 0 0);     transform: none; filter: none; }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
}
/* Glitch-OUT: Kachel zerfällt/flickert weg */
@keyframes po-glitch-out {
  0%   { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
  25%  { opacity: 1; clip-path: inset(0 0 55% 0); transform: translateX(7px); filter: brightness(1.4); }
  45%  { clip-path: inset(50% 0 0 0);  transform: translateX(-7px); }
  70%  { clip-path: inset(30% 0 32% 0); transform: translateX(4px); opacity: 0.5; }
  100% { opacity: 0; clip-path: inset(50% 0 50% 0); transform: translateX(-5px); }
}

/* Reduced Motion: weiter durchwechseln, aber ohne Glitch-Animation */
@media (prefers-reduced-motion: reduce) {
  .po-section .cms-partner-row.po-mobile-rotate .cms-partner-card.po-glitch-in,
  .po-section .cms-partner-row.po-mobile-rotate .cms-partner-card.po-glitch-out {
    animation: none !important;
  }
}


/* === 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;
}