/* ═══════════════════════════════════════════════════════════════
   pHuN Esports — Homepage & Application CSS  v2
   ═══════════════════════════════════════════════════════════════ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
  /* Dynamic — overridden by PHP inline :root */
  --bg:        #f0f2f6;
  --surface:   #ffffff;
  --card:      #ffffff;
  --border:    #e2e5ea;
  --border2:   #c8cdd5;
  --text:      #111111;
  --text2:     #374151;
  --muted:     #6b7280;
  --muted2:    #9ca3af;
  --red:       #dc2626;
  --red2:      #ef4444;
  --green:     #16a34a;
  --radius:    12px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,.06);
  --shadow:    0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.14);
  --red-rgb:   220, 38, 38;
}

/* ── Homepage overrides — dark esports skin ─── */
.hp-hero, .hp-section, .hp-section--dark, .hp-stats,
.hp-teams-grid ~ *, .hp-partners, .hp-shop, .hp-footer,
#teams, #bewerben {
  /* sections have own bg — don't inherit --bg */
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Inter', 'Barlow', sans-serif;
  font-size: 15px;
  line-height: 1.6;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

/* ── Page wrapper ──────────────────────────────────────────── */
.page { max-width: 740px; margin: 0 auto; padding: 20px 16px 48px; }

/* ═════════════════════════════════════════════════════════════
   HOMEPAGE — Hero, Sections, Footer
   ═════════════════════════════════════════════════════════════ */

/* ── Hero — rehgaming dark style ─────────────────────────────── */
@keyframes fade-up { from{opacity:0;transform:translateY(40px) scale(.97)} to{opacity:1;transform:translateY(0) scale(1)} }
@keyframes scanline { 0%{transform:translateY(-100%)} 100%{transform:translateY(100vh)} }
@keyframes orb-drift { from{transform:scale(1)} to{transform:scale(1.08) translateX(10px)} }
@keyframes pulse-ring { 0%,100%{opacity:.1;transform:scale(1)} 50%{opacity:.25;transform:scale(1.04)} }

/* ══════════════════════════════════════════════════════════
   NAVBAR
══════════════════════════════════════════════════════════ */
.hn {
  position: fixed; top: 0; left: 0; right: 0; z-index: 8000;
  padding: 0 32px;
  transition: background .3s, backdrop-filter .3s, box-shadow .3s;
  border-bottom: 1px solid transparent;
}
.hn--scrolled {
  background: rgba(5,5,8,.85);
  backdrop-filter: blur(20px) saturate(1.5);
  border-bottom-color: rgba(255,255,255,.06);
  box-shadow: 0 4px 32px rgba(0,0,0,.4);
}
.hn-inner {
  max-width: 1300px; margin: 0 auto;
  display: flex; align-items: center; height: 68px; gap: 20px;
}
.hn-brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0;
}
.hn-logo-img {
  width: 36px; height: 36px; border-radius: 8px; object-fit: contain;
}
.hn-brand-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 18px; font-weight: 900; letter-spacing: .08em;
  color: #fff; text-transform: uppercase;
}
.hn-links {
  display: flex; align-items: center; gap: 4px; margin-left: auto;
}
.hn-link {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: rgba(255,255,255,.5); text-decoration: none;
  padding: 8px 14px; border-radius: 6px;
  transition: color .15s, background .15s;
}
.hn-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.hn-link--dc { color: rgba(255,255,255,.5); display: flex; align-items: center; gap: 6px; }
.hn-link--dc:hover { color: #5865f2; }
.hn-actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.hn-cta {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  background: var(--red); color: #fff; border: none; cursor: pointer;
  padding: 9px 22px; border-radius: 6px;
  transition: opacity .15s, transform .15s;
  clip-path: polygon(0 0,calc(100% - 8px) 0,100% 8px,100% 100%,8px 100%,0 calc(100% - 8px));
}
.hn-cta:hover { opacity: .85; transform: translateY(-1px); }
.hn-burger {
  display: none; flex-direction: column; gap: 5px;
  background: none; border: none; cursor: pointer; padding: 4px;
}
.hn-burger span {
  display: block; width: 22px; height: 2px;
  background: rgba(255,255,255,.7); border-radius: 2px;
  transition: all .2s;
}
@media (max-width: 700px) {
  .hn { padding: 0 18px; }
  .hn-burger { display: flex; }
  .hn-links {
    position: fixed; top: 68px; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: rgba(5,5,8,.97); backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255,255,255,.08);
    max-height: 0; overflow: hidden; transition: max-height .3s ease; margin-left: 0;
  }
  .hn-links.open { max-height: 300px; }
  .hn-link { padding: 14px 24px; border-radius: 0; font-size: 15px; }
}

/* ══════════════════════════════════════════════════════════
   HERO
══════════════════════════════════════════════════════════ */
.hp-hero {
  position: relative; min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: var(--hero-bg, #060606);
}
/* Hintergrundbild */
.hero-bg-img {
  position: absolute; inset: 0; z-index: 1;
  background-image: var(--hero-img);
  background-size: cover; background-position: center;
}
.hero-bg-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to bottom,
    rgba(5,5,8,.6) 0%,
    rgba(5,5,8,.3) 40%,
    rgba(5,5,8,.85) 100%);
}
/* Partikel-Canvas */
.hero-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 2; pointer-events: none;
}
/* Glow-Orbs */
.hero-orb {
  position: absolute; border-radius: 50%; pointer-events: none; z-index: 1;
}
.hero-orb--1 {
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(var(--red-rgb,220,38,38),.14) 0%, transparent 65%);
  top: 10%; left: -10%;
  animation: orb-drift 10s ease-in-out infinite alternate;
}
.hero-orb--2 {
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(var(--red-rgb,220,38,38),.08) 0%, transparent 65%);
  bottom: 5%; right: -5%;
  animation: orb-drift 13s ease-in-out infinite alternate-reverse;
}
/* Grid-Textur */
.hero-scanlines {
  position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: .025;
  background-image:
    linear-gradient(rgba(255,255,255,1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,1) 1px, transparent 1px);
  background-size: 60px 60px;
}
/* Content */
.hero-content {
  position: relative; z-index: 3;
  text-align: center; padding: 100px 24px 80px;
  max-width: 860px; width: 100%;
}
/* Tag */
.hero-tag {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .55em; text-transform: uppercase;
  color: var(--red); margin-bottom: 28px;
  animation: fade-up .7s cubic-bezier(.16,1,.3,1) .05s both;
}
.hero-tag-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 8px var(--red);
  animation: pulse-dot 2s ease-in-out infinite;
}
@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:.3} }
/* Logo */
.hero-logo-wrap {
  position: relative; display: inline-block;
  margin-bottom: 28px;
  animation: fade-up .7s cubic-bezier(.16,1,.3,1) .1s both;
}
.hero-logo {
  width: 100px; height: 100px; border-radius: 18px;
  object-fit: contain; position: relative; z-index: 1;
  border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 0 0 8px rgba(var(--red-rgb,220,38,38),.06);
}
.hero-logo-glow {
  position: absolute; inset: -12px; border-radius: 50%;
  background: radial-gradient(circle, rgba(var(--red-rgb,220,38,38),.3) 0%, transparent 65%);
  animation: pulse-ring 3s ease-in-out infinite;
}
/* H1 */
.hero-h1 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(90px, 17vw, 160px);
  font-weight: 900; line-height: .88; letter-spacing: -.02em;
  color: #fff; margin-bottom: 22px;
  text-shadow: 0 0 80px rgba(var(--red-rgb,220,38,38),.3);
  animation: fade-up 1s cubic-bezier(.16,1,.3,1) both;
  text-transform: uppercase;
}
.hero-h1 em { color: var(--red); font-style: normal; }
/* Sub */
.hero-sub {
  font-size: clamp(14px, 2vw, 17px);
  color: rgba(255,255,255,.38); line-height: 1.7; font-weight: 300;
  max-width: 440px; margin: 0 auto 40px;
  animation: fade-up .8s cubic-bezier(.16,1,.3,1) .2s both;
}
/* Buttons */
.hero-btns {
  display: flex; align-items: center; justify-content: center;
  gap: 14px; flex-wrap: wrap; margin-bottom: 52px;
  animation: fade-up .8s cubic-bezier(.16,1,.3,1) .35s both;
}
.hero-btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--red); color: #fff;
  padding: 15px 38px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  border: none; cursor: pointer; text-decoration: none;
  clip-path: polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px));
  box-shadow: 0 0 30px rgba(var(--red-rgb,220,38,38),.45), inset 0 1px 0 rgba(255,255,255,.12);
  transition: transform .2s, box-shadow .2s, opacity .2s;
  position: relative; overflow: hidden;
}
.hero-btn-primary::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(255,255,255,.12) 0%, transparent 50%);
}
.hero-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 50px rgba(var(--red-rgb,220,38,38),.65), 0 10px 30px rgba(0,0,0,.4);
}
.hero-btn-icon { font-size: 16px; }
.hero-btn-arrow { font-size: 18px; transition: transform .2s; }
.hero-btn-primary:hover .hero-btn-arrow { transform: translateX(4px); }

.hero-btn-discord {
  display: inline-flex; align-items: center; gap: 10px;
  background: rgba(88,101,242,.15); color: #8891f2;
  padding: 14px 28px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid rgba(88,101,242,.3); text-decoration: none;
  clip-path: polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px));
  transition: all .2s; backdrop-filter: blur(8px);
}
.hero-btn-discord:hover {
  background: rgba(88,101,242,.28); color: #fff;
  border-color: rgba(88,101,242,.6);
  box-shadow: 0 0 24px rgba(88,101,242,.3);
  transform: translateY(-2px);
}
/* Stats */
.hero-stats {
  display: inline-flex; align-items: center; gap: 28px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 14px; padding: 16px 36px;
  backdrop-filter: blur(12px);
  animation: fade-up .8s cubic-bezier(.16,1,.3,1) .5s both;
}
.hero-stat { text-align: center; }
.hero-stat-num {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px; font-weight: 900; color: #fff; line-height: 1;
  margin-bottom: 3px;
}
.hero-stat-num.open  { color: #22c55e; text-shadow: 0 0 12px rgba(34,197,94,.4); }
.hero-stat-num.closed{ color: rgba(255,255,255,.3); font-size: 18px; }
.hero-stat-lbl {
  font-size: 10px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: rgba(255,255,255,.3);
}
.hero-stat-div {
  width: 1px; height: 32px; background: rgba(255,255,255,.08);
}
/* Scroll-Indicator */
.hero-scroll {
  position: absolute; bottom: 32px; left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  z-index: 3; background: none; border: none; cursor: pointer;
  padding: 0; transition: opacity .2s;
}
.hero-scroll:hover { opacity: .6; }
.hero-scroll-mouse {
  width: 24px; height: 38px; border-radius: 12px;
  border: 2px solid rgba(255,255,255,.25);
  display: flex; justify-content: center; padding-top: 6px;
}
.hero-scroll-wheel {
  width: 3px; height: 8px; border-radius: 2px;
  background: var(--red);
  animation: scroll-wheel 1.8s ease-in-out infinite;
}
@keyframes scroll-wheel {
  0%   { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(12px); opacity: 0; }
}
.hero-scroll span {
  font-size: 9px; font-weight: 700; letter-spacing: .35em;
  color: rgba(255,255,255,.25); text-transform: uppercase;
}

/* Mobile Hero */
@media (max-width: 640px) {
  .hero-content { padding: 90px 20px 60px; }
  .hero-h1 { font-size: clamp(72px, 22vw, 110px); }
  .hero-stats { gap: 16px; padding: 14px 20px; }
  .hero-stat-num { font-size: 22px; }
  .hero-btns { gap: 10px; }
  .hero-btn-primary, .hero-btn-discord { padding: 13px 22px; font-size: 15px; }
  .hero-rec-badge { top: 80px; right: 16px; }
}

/* Floating Recruiting Badge */
.hero-rec-badge {
  position: absolute; top: 88px; right: 36px; z-index: 4;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 100px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  backdrop-filter: blur(10px);
  animation: fade-up .8s cubic-bezier(.16,1,.3,1) .6s both;
}
.hero-rec-badge--open {
  background: rgba(34,197,94,.08);
  border: 1px solid rgba(34,197,94,.25);
  color: #22c55e;
}
.hero-rec-badge--closed {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.35);
}
.hero-rec-dot {
  width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0;
}
.hero-rec-badge--open  .hero-rec-dot { background: #22c55e; box-shadow: 0 0 8px #22c55e; animation: pulse-dot 2s ease-in-out infinite; }
.hero-rec-badge--closed .hero-rec-dot { background: rgba(255,255,255,.2); }

/* hp-btn-primary Alias — wird noch auf anderen Seiten verwendet */
.hp-btn-primary {
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--red); color: #fff;
  padding: 14px 36px; font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  border: none; cursor: pointer; text-decoration: none;
  position: relative; overflow: hidden;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  transition: all .2s;
  box-shadow: 0 0 20px rgba(220,38,38,.4), inset 0 1px 0 rgba(255,255,255,.1);
}
.hp-btn-primary:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 40px rgba(220,38,38,.6), 0 8px 24px rgba(0,0,0,.4);
  opacity: .9;
}
.hp-btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: rgba(255,255,255,.7);
  padding: 13px 28px; font-family: 'Barlow Condensed', sans-serif;
  font-size: 17px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  border: 1px solid rgba(255,255,255,.2); text-decoration: none;
  clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px));
  transition: all .2s; backdrop-filter: blur(8px);
}
.hp-btn-secondary:hover { border-color: var(--red); color: #fff; }

/* ── Stats bar ─────────────────────────────────────────────── */
.hp-stats {
  display: flex; align-items: stretch; overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.hp-stat {
  flex: 1; min-width: 110px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; padding: 20px 14px;
  gap: 4px; transition: background .2s;
}
.hp-stat:last-child { border-right: none; }
.hp-stat span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 28px; font-weight: 900; line-height: 1;
}
.hp-stat label { font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hp-stat-dc a { display: flex; flex-direction: column; align-items: center; gap: 5px; text-decoration: none; font-size: 11px; font-weight: 700; }

/* ── Dark theme (default) */
.hp-stats--dark {
  background: #040404;
  border-bottom: 1px solid rgba(220,38,38,.15);
}
.hp-stats--dark .hp-stat { border-right: 1px solid rgba(255,255,255,.06); }
.hp-stats--dark .hp-stat:hover { background: rgba(255,255,255,.03); }
.hp-stats--dark .hp-stat span  { color: var(--red); }
.hp-stats--dark .hp-stat label { color: rgba(255,255,255,.3); }
.hp-stats--dark .hp-stat-dc a  { color: #5865f2; }
.hp-stats--dark .hp-stat-dc a svg { fill: #5865f2; }

/* ── Light theme */
.hp-stats--light {
  background: #ffffff;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
}
.hp-stats--light .hp-stat { border-right: 1px solid #e5e7eb; }
.hp-stats--light .hp-stat:hover { background: #f9fafb; }
.hp-stats--light .hp-stat span  { color: var(--red); }
.hp-stats--light .hp-stat label { color: #9ca3af; }
.hp-stats--light .hp-stat-dc a  { color: #5865f2; }
.hp-stats--light .hp-stat-dc a svg { fill: #5865f2; }

/* ── Accent theme (red) */
.hp-stats--accent {
  background: var(--red);
  border-bottom: 1px solid rgba(0,0,0,.1);
}
.hp-stats--accent .hp-stat { border-right: 1px solid rgba(255,255,255,.15); }
.hp-stats--accent .hp-stat:hover { background: rgba(0,0,0,.08); }
.hp-stats--accent .hp-stat span  { color: #fff; }
.hp-stats--accent .hp-stat label { color: rgba(255,255,255,.7); }
.hp-stats--accent .hp-stat-dc a  { color: rgba(255,255,255,.9); }
.hp-stats--accent .hp-stat-dc a svg { fill: rgba(255,255,255,.9); }

/* Custom theme */
.hp-stats--custom .hp-stat { border-right: 1px solid rgba(255,255,255,.1); }
.hp-stats--custom .hp-stat:hover { background: rgba(255,255,255,.05); }
.hp-stats--custom .hp-stat span  { color: var(--stats-num-color, var(--red)); }
.hp-stats--custom .hp-stat label { color: rgba(255,255,255,.4); }

/* ── Sections ──────────────────────────────────────────────── */
.hp-section {
  padding: var(--sec-pad-top, 90px) 0 var(--sec-pad-bot, 90px); position: relative;
  background: #0d0d0d;
}
.hp-section--dark {
  background: #080808;
  padding: var(--sec-pad-top, 90px) 0 var(--sec-pad-bot, 90px); position: relative; overflow: hidden;
}
.hp-section--dark::before {
  content: ''; position: absolute; top: -20%; left: 50%; transform: translateX(-50%);
  width: 70%; height: 40%;
  background: radial-gradient(ellipse, rgba(220,38,38,.07) 0%, transparent 70%);
  pointer-events: none;
}
.hp-container { max-width: 1100px; margin: 0 auto; padding: 0 28px; }
.hp-section-head { text-align: center; margin-bottom: var(--sec-head-mb, 48px); }
.hp-section-head--light h2,
.hp-section-head--light p { color: #fff; }
.hp-section-head--light .hp-section-tag { color: var(--red); }
.hp-section-head--light p { color: rgba(255,255,255,.45); }

.hp-section-tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .35em; text-transform: uppercase;
  color: var(--red); margin-bottom: 10px;
  display: inline-flex; align-items: center; gap: 12px;
}
.hp-section-tag::before,
.hp-section-tag::after { content: ''; display: block; height: 1px; width: 26px; background: var(--red); opacity: .55; }

.hp-section-head h2 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(36px, 6.5vw, 64px);
  font-weight: 900; line-height: .9; letter-spacing: -.01em;
  color: #fff; margin-bottom: 14px;
}
.hp-section-head p { font-size: 15px; color: rgba(255,255,255,.4); max-width: 520px; margin: 0 auto; line-height: 1.7; font-weight: 300; }

/* Heading size variants */
.sh-size-xs { font-size: clamp(22px, 3.5vw, 30px) !important; }
.sh-size-sm { font-size: clamp(26px, 4.5vw, 38px) !important; }
.sh-size-md { font-size: clamp(30px, 5.5vw, 46px) !important; }
.sh-size-lg { font-size: clamp(34px, 6vw, 56px) !important; }
.sh-size-xl { font-size: clamp(44px, 8vw, 76px) !important; }

/* ── Team cards (homepage grid) ─────────────────────────────── */
.hp-teams-grid {
  display: grid;
  grid-template-columns: repeat(var(--teams-cols, 4), 1fr);
  gap: 16px;
}

/* ── Modern style (default) ─── */
.hp-tcard {
  background: #111111;
  border: 1px solid rgba(255,255,255,.08);
  overflow: hidden; cursor: pointer; position: relative;
  display: flex; flex-direction: column;
  transition: transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s, border-color .2s;
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.hp-tcard-accent {
  width: 100%; height: 3px; background: var(--tc, var(--red)); flex-shrink: 0;
}
.hp-tcard-inner {
  padding: 22px 18px; display: flex; flex-direction: column;
  align-items: center; gap: 10px; flex: 1; text-align: center;
}
.hp-tcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 24px rgba(var(--tc-rgb, 220,38,38), .25), 0 16px 40px rgba(0,0,0,.3);
  border-color: var(--tc, var(--red));
  background: #181818;
}
.hp-tcard--closed { opacity: .4; }

/* Logo */
.hp-tcard-logo { width: 56px; height: 56px; border-radius: 10px; object-fit: contain; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1); }
.hp-tcard-logo-ph {
  width: 56px; height: 56px; border-radius: 10px;
  background: var(--tc, var(--red));
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 900; color: #fff;
}

/* Text */
.hp-tcard-name { font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 900; color: #fff; line-height: 1; letter-spacing: .02em; }
.hp-tcard-game { font-size: 11px; color: rgba(255,255,255,.35); letter-spacing: .04em; text-transform: uppercase; }
.hp-tcard-cap  { font-size: 11px; color: rgba(255,255,255,.3); }

/* Footer row */
.hp-tcard-footer { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 10px; }
.hp-tcard-members { font-size: 11px; color: rgba(255,255,255,.3); }
.hp-tcard-badge { font-size: 10px; font-weight: 700; padding: 3px 10px; border-radius: 3px; letter-spacing: .04em; text-transform: uppercase; }
.hp-tcard-badge--open   { background: rgba(22,163,74,.15); color: #4ade80; border: 1px solid rgba(74,222,128,.2); }
.hp-tcard-badge--full   { background: rgba(220,38,38,.1); color: #fca5a5; border: 1px solid rgba(252,165,165,.2); }
.hp-tcard-badge--closed { background: rgba(255,255,255,.05); color: rgba(255,255,255,.25); border: 1px solid rgba(255,255,255,.1); }

/* Click-to-expand member detail */
.hp-tcard-members-panel {
  display: none; padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,.07);
  text-align: left; animation: fade-up .25s ease;
}
.hp-tcard.expanded .hp-tcard-members-panel { display: block; }
.hp-tcard-members-panel .ml-label { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.25); margin-bottom: 8px; }
.hp-tcard-members-panel .ml-member { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.hp-tcard-members-panel .ml-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
.hp-tcard-members-panel .ml-name { font-size: 12px; color: rgba(255,255,255,.65); font-weight: 500; }

/* ── Team modal ────────────────────────────────────────────── */
.hp-modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 200;
  background: rgba(0,0,0,.65); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 20px;
}
.hp-modal-overlay.open { display: flex; animation: modal-in .2s ease; }
@keyframes modal-in { from{opacity:0;transform:scale(.96)} to{opacity:1;transform:scale(1)} }
.hp-modal {
  background: var(--surface); border-radius: 16px;
  max-width: 460px; width: 100%; max-height: 85vh; overflow-y: auto;
  padding: 24px; position: relative;
  box-shadow: 0 24px 64px rgba(0,0,0,.3);
}
.hp-modal-close {
  position: absolute; top: 14px; right: 14px;
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 8px; width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 16px; color: var(--muted);
  transition: all .15s;
}
.hp-modal-close:hover { background: var(--border); color: var(--text); }

/* ── Split sections (new layout type) ─────────────────────── */
.hp-split {
  display: grid; grid-template-columns: 1fr 1fr;
  overflow: hidden;
}
/* Image-right: swap columns via order without touching text direction */
.hp-split.reverse .hp-split-media  { order: 2; }
.hp-split.reverse .hp-split-content { order: 1; }

.hp-split-media {
  position: relative; overflow: hidden;
  align-self: stretch;
}
.hp-split-media img,
.hp-split-media video {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block; position: absolute; inset: 0;
  transition: transform .6s cubic-bezier(.16,1,.3,1);
}
.hp-split:hover .hp-split-media img { transform: scale(1.03); }

/* Parallax variant — background stays fixed to viewport */
.hp-split-media--parallax {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
}
.hp-split-media--parallax img { display: none; }

/* On mobile: fixed attachment doesn't work well, fall back to cover */
@media (max-width: 640px) {
  .hp-split-media--parallax {
    background-attachment: scroll;
    background-size: cover;
    background-position: center 30%;
  }
}
.hp-split-media-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(0,0,0,.3) 0%, transparent 60%);
  pointer-events: none;
}
.hp-split-media-ph {
  width: 100%; height: 100%; min-height: 320px;
  display: flex; align-items: center; justify-content: center;
  font-size: 64px; background: var(--bg);
}
.hp-split-content {
  display: flex; flex-direction: column; justify-content: center;
  padding: 56px 52px; gap: 20px;
  background: var(--surface);
  /* Image left → text right-aligned, towards centre */
  text-align: right;
  align-items: flex-end;
}
.hp-split-content .hp-split-tag { flex-direction: row-reverse; }
.hp-split-content p { max-width: 420px; }

/* Image right → text left-aligned, towards centre */
.hp-split.reverse .hp-split-content {
  text-align: left;
  align-items: flex-start;
}
.hp-split.reverse .hp-split-content .hp-split-tag { flex-direction: row; }

/* Dark background → light text */
.hp-split-content.dark {
  background: #0d0d0d;
  color: #fff;
}
.hp-split-content.dark h3 { color: #fff; }
.hp-split-content.dark p  { color: rgba(255,255,255,.55); }
.hp-split-content.dark .hp-split-tag { color: var(--red); }
.hp-split-content.dark .hp-split-feature-text strong { color: #fff; }
.hp-split-content.dark .hp-split-feature-text span   { color: rgba(255,255,255,.45); }

.hp-split-content.accent {
  background: var(--red);
}
.hp-split-content.accent .hp-split-tag { color: rgba(255,255,255,.7); }
.hp-split-content.accent .hp-split-tag::before,
.hp-split-content.accent .hp-split-tag::after { background: rgba(255,255,255,.5); }
.hp-split-content.accent h3 { color: #fff; }
.hp-split-content.accent p  { color: rgba(255,255,255,.8); }
.hp-split-content.accent .hp-btn-primary { background: #fff; color: var(--red); box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.hp-split-tag {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: .35em;
  text-transform: uppercase; color: var(--red);
  display: inline-flex; align-items: center; gap: 10px;
}
.hp-split-tag::before,
.hp-split-tag::after { content: ''; display: block; height: 1px; width: 20px; background: var(--red); opacity: .6; }
.hp-split-content h3 {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(30px, 4vw, 48px); font-weight: 900;
  line-height: .95; letter-spacing: -.01em; color: var(--text);
}
.hp-split-content p { font-size: 15px; color: var(--muted); line-height: 1.7; max-width: 400px; }
.hp-split-features { display: flex; flex-direction: column; gap: 10px; }
.hp-split-feature {
  display: flex; align-items: flex-start; gap: 12px;
}
.hp-split-feature-ico {
  width: 32px; height: 32px; border-radius: 8px;
  background: rgba(220,38,38,.1); border: 1px solid rgba(220,38,38,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 15px; flex-shrink: 0;
}
.hp-split-feature-text strong { font-size: 13px; font-weight: 700; color: var(--text); display: block; margin-bottom: 2px; }
.hp-split-feature-text span   { font-size: 12px; color: var(--muted); }

/* ── Divider sections ──────────────────────────────────────── */
.hp-divider {
  position: relative; width: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hp-divider-text {
  position: relative; z-index: 2;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(32px, 7vw, 80px); font-weight: 900;
  letter-spacing: .06em; text-transform: uppercase;
  color: #fff; text-shadow: 0 2px 24px rgba(0,0,0,.5);
  text-align: center; padding: 0 20px;
}

/* ── Partner slider ────────────────────────────────────────── */
.hp-partners {
  background: #090909; border-top: 1px solid rgba(255,255,255,.05);
  border-bottom: 1px solid rgba(255,255,255,.05); overflow: hidden; width: 100%;
}
.hp-partner-track-wrap {
  overflow: hidden; position: relative;
  -webkit-mask: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}
.hp-partner-track {
  display: flex; align-items: center; gap: 0;
  padding: 16px 0; width: max-content;
  animation: partnerScroll var(--partner-spd, 40s) linear infinite;
  will-change: transform;
}
.hp-partner-track:hover { animation-play-state: paused; }
@keyframes partnerScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
.hp-partner-item {
  display: flex; align-items: center; justify-content: center;
  height: var(--partner-logo-h, 40px); flex-shrink: 0;
  margin-right: var(--partner-gap, 60px);
  transition: opacity .4s ease, filter .4s ease, transform .3s ease;
}
.hp-partner-item:hover { opacity: 1 !important; filter: grayscale(0%) !important; transform: scale(1.08); }
.hp-partner-item img { height: var(--partner-logo-h, 32px); width: auto; max-width: 140px; object-fit: contain; }

/* ── Shop slider ───────────────────────────────────────────── */
.hp-shop { padding: 60px 0; background: #0d0d0d; width: 100%; overflow: hidden; }
.hp-shop-track-wrap {
  overflow: hidden; width: 100%; position: relative;
  -webkit-mask: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  mask: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
}
.hp-shop-track {
  display: flex; gap: 0; width: max-content; padding: 12px 0;
  animation: shopScroll var(--shop-spd, 40s) linear infinite;
  will-change: transform;
}
.hp-shop-track:hover { animation-play-state: paused; }
@keyframes shopScroll { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@media (max-width: 640px) {
  .hp-shop-track { animation-duration: var(--shop-mobile-spd, var(--shop-spd, 40s)); }
}

.hp-shop-card {
  flex-shrink: 0; width: var(--shop-card-w, 240px);
  margin-right: var(--shop-card-gap, 20px);
  background: #fff; border-radius: 6px;
  overflow: hidden; position: relative;
  box-shadow: 0 2px 16px rgba(0,0,0,.08), 0 0 0 1px rgba(0,0,0,.04);
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s;
  display: flex; flex-direction: column;
}
.hp-shop-card:hover { transform: translateY(-8px) scale(1.01); box-shadow: 0 20px 48px rgba(0,0,0,.16), 0 0 0 1px rgba(0,0,0,.06); }
.hp-shop-badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--red); color: #fff; font-size: 10px; font-weight: 800; padding: 3px 9px; border-radius: 3px; letter-spacing: .06em; text-transform: uppercase; }
.hp-shop-img { width: 100%; height: var(--shop-card-img-h, 180px); background-size: cover; background-position: center; background-color: #f5f5f5; }
.hp-shop-img--ph { display: flex; align-items: center; justify-content: center; font-size: 48px; background: #f0f0f0; }
.hp-shop-name-row { background: #f7f7f7; padding: 14px 16px; text-align: center; border-top: 1px solid #ebebeb; }
.hp-shop-name { font-size: 17px; font-weight: 300; color: #444; font-family: 'Barlow', sans-serif; }
.hp-shop-price-row { background: #fff; padding: 12px 16px; text-align: center; border-top: 1px solid #ebebeb; border-bottom: 1px solid #ebebeb; }
.hp-shop-price { font-size: 22px; font-weight: 300; color: #555; letter-spacing: .02em; }
.hp-shop-desc-row { padding: 12px 16px; text-align: center; border-bottom: 1px solid #ebebeb; flex: 1; }
.hp-shop-desc { font-size: 12px; color: #999; line-height: 1.6; margin: 0; }
.hp-shop-btn {
  display: block; padding: 14px; text-align: center;
  background: var(--shop-btn-color, #4db8d4); color: var(--shop-btn-text, #fff);
  font-size: 16px; font-weight: 500; letter-spacing: .03em;
  text-decoration: none; transition: filter .15s; margin-top: auto;
}
.hp-shop-btn:hover { filter: brightness(1.1); color: var(--shop-btn-text, #fff); }

/* ── Footer ────────────────────────────────────────────────── */
.hp-footer {
  background: #030303;
  color: rgba(255,255,255,.6); padding: 64px 0 0;
  position: relative;
}
.hp-footer::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(to right, transparent, rgba(220,38,38,.5), transparent);
}
.hp-footer-inner {
  max-width: 1100px; margin: 0 auto; padding: 0 28px 52px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 44px; border-bottom: 1px solid rgba(255,255,255,.07);
}
.hp-footer-logo { width: 48px; height: 48px; border-radius: 12px; object-fit: contain; margin-bottom: 10px; }
.hp-footer-name { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 900; color: #fff; margin-bottom: 4px; }
.hp-footer-tagline { font-size: 12px; color: rgba(255,255,255,.28); margin-bottom: 16px; letter-spacing: .05em; }
/* Social Icons */
.hp-footer-socials { display: flex; gap: 8px; flex-wrap: wrap; }
.hp-footer-social {
  width: 34px; height: 34px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  color: rgba(255,255,255,.45); text-decoration: none;
  transition: all .18s;
}
.hp-footer-social svg { width: 15px; height: 15px; fill: currentColor; stroke: none; }
.hp-footer-social:hover { background: rgba(255,255,255,.1); color: #fff; transform: translateY(-2px); }
.hp-footer-social--discord:hover { background: rgba(88,101,242,.2); color: #5865f2; border-color: rgba(88,101,242,.3); }
.hp-footer-social--instagram:hover { background: rgba(225,48,108,.15); color: #e1306c; border-color: rgba(225,48,108,.25); }
.hp-footer-social--twitter:hover { background: rgba(255,255,255,.1); color: #fff; }
.hp-footer-social--youtube:hover { background: rgba(255,0,0,.12); color: #ff0000; border-color: rgba(255,0,0,.2); }
.hp-footer-social--tiktok:hover { background: rgba(255,255,255,.08); color: #fff; }
.hp-footer-social--twitch:hover { background: rgba(145,70,255,.15); color: #9146ff; border-color: rgba(145,70,255,.3); }
.hp-footer-heading { font-size: 10px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.25); margin-bottom: 14px; }
.hp-footer-text { font-size: 13px; color: rgba(255,255,255,.45); line-height: 1.7; }
.hp-footer-nav { display: flex; flex-direction: column; gap: 9px; }
.hp-footer-nav a { font-size: 13px; color: rgba(255,255,255,.45); text-decoration: none; transition: color .15s; }
.hp-footer-nav a:hover { color: var(--red); }
.hp-footer-bottom {
  max-width: 1100px; margin: 0 auto; padding: 16px 28px;
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 12px; color: rgba(255,255,255,.22);
}
.hp-footer-bottom a { color: rgba(255,255,255,.22); margin-left: 16px; text-decoration: none; transition: color .15s; }
.hp-footer-bottom a:hover { color: var(--red); }

/* ── Why Us ────────────────────────────────────────────────── */
.hp-why { padding: var(--sec-pad-top, 80px) 0 var(--sec-pad-bot, 80px); background: #080808; }
.why-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px; margin-top: 48px;
}
.why-card {
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 16px; padding: 28px 24px;
  transition: border-color .2s, background .2s;
  position: relative; overflow: hidden;
}
.why-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--red); transform: scaleX(0); transform-origin: left;
  transition: transform .3s ease;
}
.why-card:hover { border-color: rgba(255,255,255,.12); background: rgba(255,255,255,.05); }
.why-card:hover::before { transform: scaleX(1); }
.why-icon { font-size: 32px; margin-bottom: 16px; display: block; }
.why-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px; font-weight: 900; color: #fff;
  margin-bottom: 10px; letter-spacing: .02em;
}
.why-text { font-size: 13px; color: rgba(255,255,255,.45); line-height: 1.7; }

/* ── Team Member Toggle ────────────────────────────────────── */
.tsp-members-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 4px 0; margin-top: 10px;
  cursor: pointer; font-family: inherit; opacity: .5;
  transition: opacity .15s;
}
.tsp-members-toggle:hover { opacity: .8; }
.tsp-members-toggle-lbl { font-size: 11px; font-weight: 600; color: rgba(255,255,255,.7); letter-spacing: .04em; }
.tsp-members-toggle-arrow {
  font-size: 12px; color: rgba(255,255,255,.4);
  transition: transform .2s; display: inline-block;
}
.tsp-members-toggle.open .tsp-members-toggle-arrow { transform: rotate(90deg); }
.tsp-members-drawer {
  margin-top: 8px; display: flex; flex-wrap: wrap; gap: 4px;
  animation: fade-up .15s ease both;
}
.tsp-ml-name {
  font-size: 11px; color: rgba(255,255,255,.45);
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07);
  border-radius: 4px; padding: 2px 7px;
}

/* ── Mobile: Footer kompakt ────────────────────────────────── */
@media (max-width: 640px) {
  .hp-footer { padding: 32px 0 0; }
  .hp-footer-inner {
    grid-template-columns: 1fr 1fr; gap: 24px 16px;
    padding: 0 18px 28px;
  }
  .hp-footer-col:first-child { grid-column: 1 / -1; }
  .hp-footer-logo { width: 32px; height: 32px; margin-bottom: 6px; }
  .hp-footer-name { font-size: 16px; margin-bottom: 2px; }
  .hp-footer-tagline { font-size: 11px; margin-bottom: 10px; }
  .hp-footer-socials { gap: 6px; }
  .hp-footer-social { width: 28px; height: 28px; border-radius: 6px; }
  .hp-footer-social svg { width: 12px; height: 12px; }
  .hp-footer-heading { font-size: 9px; margin-bottom: 8px; }
  .hp-footer-nav { gap: 6px; }
  .hp-footer-nav a { font-size: 12px; }
  .hp-footer-text { font-size: 11px; line-height: 1.6; }
  .hp-footer-bottom {
    flex-direction: row; justify-content: space-between;
    padding: 10px 18px; font-size: 10px;
  }
  .hp-footer-bottom a { margin-left: 10px; font-size: 10px; }
  .why-grid { grid-template-columns: 1fr !important; gap: 12px; }
  .why-card { padding: 20px 16px; }
}

/* ── Legal modals ──────────────────────────────────────────── */
.hp-legal-modal {
  display: none; position: fixed; inset: 0; z-index: 10100;
  background: rgba(0,0,0,.78); backdrop-filter: blur(6px);
  align-items: center; justify-content: center; padding: 20px;
}
.hp-legal-modal.open { display: flex; }
.hp-legal-modal-box {
  background: #111111;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 16px;
  width: var(--legal-modal-w, 85%); max-height: 88vh;
  display: flex; flex-direction: column;
  position: relative;
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
}
/* Header */
.legal-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 28px 16px; border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.legal-modal-head h2 {
  font-family: 'Barlow Condensed', sans-serif; font-size: 22px;
  font-weight: 900; color: #fff; margin: 0;
}
/* Scrollbarer Content-Bereich */
.hp-legal-modal-box .hp-legal-content {
  flex: 1; overflow-y: auto; padding: 20px 28px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.12) transparent;
}
.hp-legal-modal-box .hp-legal-content::-webkit-scrollbar { width: 4px; }
.hp-legal-modal-box .hp-legal-content::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }
/* Footer mit Buttons */
.legal-modal-footer {
  display: flex; gap: 10px; align-items: center;
  padding: 16px 28px; border-top: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
@media (max-width: 640px) {
  .legal-modal-head { padding: 16px 18px 12px; }
  .hp-legal-modal-box .hp-legal-content { padding: 16px 18px; }
  .legal-modal-footer { padding: 14px 18px; flex-wrap: wrap; }
  .legal-modal-footer .btn-main { width: 100%; text-align: center; justify-content: center; }
}

/* Score-Ring Zahl weiß */
.ai-score-ring span { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 900; color: #fff; line-height: 1; }

/* Legal content */
.hp-legal-content { font-size: 14px; line-height: 1.85; color: rgba(255,255,255,.65); }

.hp-legal-content .legal-heading {
  display: block;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  color: #fff; margin: 28px 0 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--red);
}
.hp-legal-content .legal-heading:first-child { margin-top: 0; }

.hp-legal-content .legal-num-heading {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 15px; font-weight: 700; color: #fff;
  margin: 22px 0 8px;
}
.hp-legal-content .legal-num {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 22px; font-weight: 900; color: var(--red);
  line-height: 1; flex-shrink: 0;
}
.hp-legal-content .legal-line { margin-bottom: 3px; }
.hp-legal-content .legal-spacer { height: 10px; }
.hp-legal-content .legal-li {
  padding-left: 16px; position: relative; margin-bottom: 4px;
  color: rgba(255,255,255,.55);
}
.hp-legal-content .legal-li::before {
  content: '–'; position: absolute; left: 0;
  color: var(--red);
}
.hp-legal-content .legal-hr {
  border: none; border-top: 1px solid rgba(255,255,255,.1);
  margin: 18px 0;
}
.hp-legal-content strong { font-weight: 700; color: #fff; }
.hp-legal-content u { text-decoration-color: var(--red); color: #fff; }

/* Scrollbar */
.hp-legal-modal-box::-webkit-scrollbar { width: 4px; }
.hp-legal-modal-box::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

/* Close btn */
.hp-legal-close {
  position: absolute; top: 16px; right: 16px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
  border-radius: 8px; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; font-size: 14px; color: rgba(255,255,255,.5);
  transition: all .15s; z-index: 2;
}
.hp-legal-close:hover { background: rgba(255,255,255,.12); color: #fff; }

/* ── Success ───────────────────────────────────────────────── */
.hp-success { text-align: center; padding: 48px 20px; }
.hp-success-ico { font-size: 52px; color: #16a34a; margin-bottom: 12px; }
.hp-success h3 { font-family: 'Barlow Condensed', sans-serif; font-size: 30px; font-weight: 900; color: #16a34a; margin-bottom: 8px; }
.hp-success p { color: rgba(255,255,255,.5); font-size: 15px; }

/* ═════════════════════════════════════════════════════════════
   APPLICATION FORM — Modern Dark Design
   ═════════════════════════════════════════════════════════════ */

/* ── Step bar ──────────────────────────────────────────────── */
.stepbar {
  display: flex; align-items: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px; padding: 14px 20px;
  margin-bottom: 24px;
  gap: 0;
  backdrop-filter: blur(12px);
}
.sb-step {
  display: flex; align-items: center; gap: 8px;
  cursor: pointer; flex-shrink: 0;
  transition: opacity .2s;
}
.sb-step:not(.active) { opacity: .45; }
.sb-step:hover:not(.active) { opacity: .7; }
.sb-num {
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800; color: rgba(255,255,255,.5);
  flex-shrink: 0; transition: all .2s; font-family: 'Barlow Condensed', sans-serif;
}
.sb-step.active .sb-num { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 0 0 4px rgba(220,38,38,.25); }
.sb-step.done .sb-num   { background: rgba(22,163,74,.2); border-color: rgba(22,163,74,.5); color: #4ade80; }
.sb-lbl { font-size: 12px; font-weight: 700; color: rgba(255,255,255,.7); letter-spacing: .02em; }
.sb-step.active .sb-lbl { color: #fff; }
.sb-line { flex: 1; height: 1px; background: rgba(255,255,255,.1); margin: 0 10px; min-width: 16px; }
.sb-line.done { background: rgba(22,163,74,.4); }

/* ── Step panes ────────────────────────────────────────────── */
.spane { display: none; }
.spane.active { display: block; animation: pane-in .3s ease; }
@keyframes pane-in { from{opacity:0;transform:translateY(12px)} to{opacity:1;transform:translateY(0)} }

.spane-head { margin-bottom: 24px; }
.spane-head h2 { font-family: 'Barlow Condensed', sans-serif; font-size: 26px; font-weight: 900; color: #fff; margin-bottom: 5px; }
.spane-head p  { font-size: 13px; color: rgba(255,255,255,.4); }

.spane-footer {
  display: flex; gap: 10px; margin-top: 24px;
  padding-top: 18px; border-top: 1px solid rgba(255,255,255,.08);
  flex-wrap: wrap;
}

/* ── Form card sections ────────────────────────────────────── */
.card {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: var(--radius); padding: 20px 22px;
  margin-bottom: 14px;
  backdrop-filter: blur(8px);
}
.card-head {
  display: flex; align-items: flex-start; gap: 13px;
  margin-bottom: 18px; padding-bottom: 16px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.card-ico {
  width: 36px; height: 36px; background: rgba(220,38,38,.12);
  border: 1px solid rgba(220,38,38,.2);
  border-radius: 10px; display: flex; align-items: center;
  justify-content: center; font-size: 18px; flex-shrink: 0;
}
.sec-title { font-size: 14px; font-weight: 700; color: rgba(255,255,255,.9); }
.sec-desc  { font-size: 12px; color: rgba(255,255,255,.35); margin-top: 2px; }

/* ── Fields ────────────────────────────────────────────────── */
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.45); }
.req { color: var(--red); }

input[type=text], input[type=tel], input[type=number], input[type=email], textarea, select {
  width: 100%; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px; padding: 11px 14px;
  font-size: 14px; color: #fff; font-family: inherit;
  outline: none; transition: border-color .15s, background .15s, box-shadow .15s;
}
input:focus, textarea:focus, select:focus {
  border-color: var(--red); background: rgba(255,255,255,.1);
  box-shadow: 0 0 0 3px rgba(220,38,38,.15);
}
input::placeholder, textarea::placeholder { color: rgba(255,255,255,.2); }
select { appearance: none; cursor: pointer; color: rgba(255,255,255,.85); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px; }
select option { background: #1c1c1c; color: #fff; }
textarea { resize: vertical; min-height: 90px; line-height: 1.6; }

/* ── Option buttons ────────────────────────────────────────── */
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 9px; padding: 9px 15px;
  cursor: pointer; font-size: 13px; font-weight: 500; color: rgba(255,255,255,.65);
  transition: all .15s; user-select: none;
}
.opt:hover { border-color: rgba(220,38,38,.5); color: #fff; background: rgba(220,38,38,.07); }
.opt.sel { background: rgba(220,38,38,.15); border-color: var(--red); color: #fff; font-weight: 700; }
.opt.dis { opacity: .35; cursor: not-allowed; }
.opt input { display: none; }
.opt-dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid rgba(255,255,255,.25); flex-shrink: 0; transition: all .15s; }
.opt.sel .opt-dot { border-color: var(--red); background: var(--red); }
.opt.sq { border-radius: 8px; }

/* ── Slider ────────────────────────────────────────────────── */
.sl-wrap { display: flex; flex-direction: column; gap: 12px; }
.sl-display {
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; padding: 10px 16px;
}
.sl-num { font-family: 'Barlow Condensed', sans-serif; font-size: 32px; font-weight: 900; color: var(--red); line-height: 1; }
.sl-side { font-size: 11px; color: rgba(255,255,255,.3); font-weight: 600; }
.sl-caps { display: flex; justify-content: space-between; padding: 0 2px; font-size: 10px; color: rgba(255,255,255,.25); }

input[type=range] {
  -webkit-appearance: none; width: 100%; height: 5px; border-radius: 3px;
  outline: none; border: none;
  background: linear-gradient(to right, var(--red) 0%, rgba(255,255,255,.15) 0%);
  padding: 0;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none; width: 22px; height: 22px; border-radius: 50%;
  background: var(--red); box-shadow: 0 0 0 4px rgba(220,38,38,.25); cursor: pointer;
}

/* ── Team cards in form ────────────────────────────────────── */
.tcard {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; overflow: hidden; margin-bottom: 10px;
  transition: border-color .15s, background .15s;
}
.tcard:hover { border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); }
.tcard.selected { border-color: var(--red); background: rgba(220,38,38,.07); }
.no-apply { opacity: .5; }
.tcard-main { display: flex; align-items: center; gap: 14px; padding: 14px 16px; cursor: pointer; }
.tcard-logo { width: 42px; height: 42px; border-radius: 10px; object-fit: contain; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); flex-shrink: 0; }
.tcard-logo-ph {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif; font-size: 20px; font-weight: 900; color: #fff;
}
.tcard-info { flex: 1; min-width: 0; }
.tcard-row1 { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
.tcard-name { font-family: 'Barlow Condensed', sans-serif; font-size: 18px; font-weight: 900; color: #fff; }
.tcard-game { font-size: 12px; color: rgba(255,255,255,.4); }
.tcard-captain { font-size: 11px; color: rgba(255,255,255,.35); margin-top: 2px; }
.tcard-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.tcard-tag { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1); border-radius: 100px; padding: 2px 9px; font-size: 10px; color: rgba(255,255,255,.45); font-weight: 600; }
.tcard-badge { font-size: 10px; font-weight: 700; padding: 2px 9px; border-radius: 100px; }
.tcard-badge.open       { background: rgba(22,163,74,.15); border: 1px solid rgba(134,239,172,.3); color: #86efac; }
.tcard-badge.full       { background: rgba(220,38,38,.1); border: 1px solid rgba(220,38,38,.3); color: #fca5a5; }
.tcard-badge.not-looking { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); color: rgba(255,255,255,.3); }
.tcard-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.tcard-arrow { font-size: 20px; color: rgba(255,255,255,.3); transition: transform .2s; font-weight: 300; }
.tcard-members-btn {
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.12);
  border-radius: 7px; padding: 4px 10px; font-size: 12px; color: rgba(255,255,255,.6);
  cursor: pointer; transition: all .15s;
}
.tcard-members-btn:hover { background: rgba(255,255,255,.14); color: #fff; }

.tcard-detail { border-top: 1px solid rgba(255,255,255,.07); }
.tcard-desc { padding: 12px 16px; font-size: 13px; color: rgba(255,255,255,.45); line-height: 1.6; }
.tcard-memberlist { padding: 0 16px 14px; }
.tcard-memberlist-inner { display: flex; flex-direction: column; gap: 14px; }
.ml-group {}
.ml-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.25); margin-bottom: 7px; }
.ml-member { display: flex; align-items: center; gap: 9px; padding: 3px 0; }
.ml-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.ml-dot.captain { background: #d97706; }
.ml-dot.spieler { background: #3b82f6; }
.ml-dot.trial   { background: rgba(255,255,255,.3); }
.ml-name { font-size: 13px; color: rgba(255,255,255,.75); font-weight: 500; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ml-since { font-size: 11px; color: rgba(255,255,255,.25); flex-shrink: 0; }

/* ── AI Result ─────────────────────────────────────────────── */
.ai-thinking {
  display: flex; align-items: center; gap: 14px;
  padding: 20px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px; margin: 16px 0;
}
.ai-spinner {
  width: 36px; height: 36px; border-radius: 50%;
  border: 3px solid rgba(220,38,38,.2);
  border-top-color: var(--red);
  animation: spin .8s linear infinite; flex-shrink: 0;
}
@keyframes spin { to { transform: rotate(360deg); } }
.ai-thinking strong { display: block; font-size: 14px; font-weight: 700; color: #fff; margin-bottom: 2px; }
.ai-thinking span   { font-size: 12px; color: rgba(255,255,255,.4); }

.ai-result-card {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 14px; padding: 22px; margin-bottom: 14px;
}
.ai-match-top { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.ai-score-ring { display: none !important; }
.ai-alt-score  { display: none !important; }
.ai-score-ring { display: none !important; }
.ai-match-score { font-family: 'Barlow Condensed', sans-serif; font-size: 26px; font-weight: 900; color: var(--red); line-height: 1; }
.ai-match-label { font-size: 9px; color: rgba(255,255,255,.3); letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; }
.ai-match-info {}
.ai-match-team { font-family: 'Barlow Condensed', sans-serif; font-size: 22px; font-weight: 900; color: #fff; }
.ai-reason {
  font-size: 13px; color: rgba(255,255,255,.55); line-height: 1.65;
  padding: 14px; background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07); border-radius: 9px;
  margin-bottom: 14px;
}
.ai-alts-title { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 10px; }
.ai-alt-item { display: flex; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,.06); }
.ai-alt-name { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.7); }
.ai-alt-reason { font-size: 12px; color: rgba(255,255,255,.35); }
.ai-choices { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.ai-choice-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 18px; border-radius: 9px; border: none;
  font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; transition: all .15s;
}
.ai-choice-btn.primary   { background: var(--red); color: #fff; }
.ai-choice-btn.secondary { background: rgba(255,255,255,.08); color: rgba(255,255,255,.7); border: 1px solid rgba(255,255,255,.12); }
.ai-choice-btn.ghost     { background: transparent; color: rgba(255,255,255,.4); border: 1px solid rgba(255,255,255,.1); }
.ai-choice-btn:hover     { transform: translateY(-1px); opacity: .9; }
.manual-team-btn {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; cursor: pointer; width: 100%; text-align: left;
  font-family: inherit; font-size: 13px; color: rgba(255,255,255,.7);
  transition: all .15s; margin-bottom: 6px;
}
.manual-team-btn:hover { border-color: var(--red); background: rgba(220,38,38,.07); }
.manual-team-btn strong { color: #fff; font-weight: 700; }

/* ── Legal ─────────────────────────────────────────────────── */
.legal {
  display: flex; align-items: flex-start; gap: 13px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px; padding: 14px 16px;
  cursor: pointer; transition: border-color .15s; user-select: none; margin-bottom: 10px;
}
.legal:hover { border-color: rgba(220,38,38,.4); }
.legal.ok { background: rgba(22,163,74,.08); border-color: rgba(134,239,172,.3); }
.l-chk {
  width: 22px; height: 22px; border-radius: 6px; flex-shrink: 0;
  background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.2);
  display: flex; align-items: center; justify-content: center;
  color: transparent; transition: all .2s; margin-top: 1px;
}
.legal.ok .l-chk { background: var(--green); border-color: var(--green); color: #fff; }
.l-info strong { font-size: 13px; font-weight: 700; color: rgba(255,255,255,.85); display: block; margin-bottom: 2px; }
.l-info a, .l-info span { font-size: 12px; color: rgba(255,255,255,.35); }
.l-info a { color: var(--red); text-decoration: underline; }

/* ── Summary ───────────────────────────────────────────────── */
.summary-box {
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09);
  border-radius: 12px; padding: 18px 20px; margin-bottom: 18px;
}
.summary-title { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 14px; }
.s-row { display: flex; gap: 10px; padding: 7px 0; font-size: 13px; border-bottom: 1px solid rgba(255,255,255,.06); }
.s-row:last-child { border-bottom: none; }
.s-row--long { flex-direction: column; gap: 4px; }
.s-row--long .s-val { color: rgba(255,255,255,.65); font-size: 12px; line-height: 1.5; font-weight: 400; }
.s-label { color: rgba(255,255,255,.35); min-width: 110px; flex-shrink: 0; }
.s-val   { color: rgba(255,255,255,.85); font-weight: 500; }

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 10px 20px; border-radius: 9px;
  font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; border: none; transition: all .15s;
  text-decoration: none; white-space: nowrap;
}
.btn-primary {
  background: var(--red); color: #fff;
  box-shadow: 0 4px 16px rgba(220,38,38,.3);
}
.btn-primary:hover { background: var(--red2); transform: translateY(-1px); }
.btn-ghost {
  background: rgba(255,255,255,.07); color: rgba(255,255,255,.6);
  border: 1px solid rgba(255,255,255,.12);
}
.btn-ghost:hover { background: rgba(255,255,255,.12); color: #fff; }
.btn-main {
  display: block; width: 100%; padding: 15px;
  background: var(--red); color: #fff; border: none; border-radius: 10px;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase;
  cursor: pointer; transition: all .15s;
  box-shadow: 0 6px 24px rgba(220,38,38,.35);
}
.btn-main:hover { background: var(--red2); transform: translateY(-2px); box-shadow: 0 8px 32px rgba(220,38,38,.45); }
.btn-main:disabled { opacity: .4; cursor: not-allowed; transform: none; }

/* ── Reveal hints ──────────────────────────────────────────── */
.reveal-hint {
  text-align: center; padding: 12px;
  background: rgba(255,255,255,.03); border: 1px dashed rgba(255,255,255,.12);
  border-radius: 9px; font-size: 12px; color: rgba(255,255,255,.3);
  margin-bottom: 10px;
}

/* ── Selected banner ───────────────────────────────────────── */
#selBanner {
  background: rgba(22,163,74,.1); border: 1px solid rgba(134,239,172,.25);
  border-radius: 9px; padding: 10px 14px; margin-top: 8px;
  display: flex; align-items: center; gap: 10px; font-size: 13px;
}
#selName { color: #4ade80; font-weight: 700; }

/* ── Toast ─────────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(18,20,26,.96); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px; padding: 12px 18px;
  display: flex; align-items: center; gap: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,.4);
  min-width: 240px; max-width: 380px;
  opacity: 0; transition: all .3s cubic-bezier(.16,1,.3,1); z-index: 9999; pointer-events: none;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.t-ico { font-size: 18px; flex-shrink: 0; }
.t-body strong { display: block; font-size: 13px; font-weight: 700; color: #fff; }
.t-body span   { font-size: 12px; color: rgba(255,255,255,.5); }

/* ── Popup / Overlay ───────────────────────────────────────── */
/* ── Alerts ────────────────────────────────────────────────── */
.alert { border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; font-size: 13px; }
.alert p { margin-bottom: 4px; }
.alert p:last-child { margin: 0; }
.alert-success { background: rgba(22,163,74,.1); border: 1px solid rgba(134,239,172,.25); color: #4ade80; }
.alert-error   { background: rgba(220,38,38,.1); border: 1px solid rgba(220,38,38,.3); color: #fca5a5; }
.alert-warning { background: rgba(234,179,8,.1); border: 1px solid rgba(253,224,71,.25); color: #fde047; }

/* ── Progress section divider ──────────────────────────────── */
.prog-sec {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.09) !important;
}

/* ── Prog-section dark overrides ──────────────────────────── */
.hp-section--dark .stepbar,
.hp-section--dark .card,
.hp-section--dark .tcard,
.hp-section--dark .legal,
.hp-section--dark .summary-box,
.hp-section--dark .reveal-hint,
.hp-section--dark .ai-result-card { /* already use rgba — inherits correctly */ }

/* ── Scroll reveal ─────────────────────────────────────────── */
.reveal       { opacity:0; transform:translateY(28px); transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1); }
.reveal-left  { opacity:0; transform:translateX(-32px); transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1); }
.reveal-right { opacity:0; transform:translateX(32px);  transition:opacity .65s cubic-bezier(.16,1,.3,1),transform .65s cubic-bezier(.16,1,.3,1); }
.reveal.in-view, .reveal-left.in-view, .reveal-right.in-view { opacity:1; transform:none; }
.reveal-delay-1 { transition-delay:.1s } .reveal-delay-2 { transition-delay:.2s }
.reveal-delay-3 { transition-delay:.3s } .reveal-delay-4 { transition-delay:.4s }

/* ═════════════════════════════════════════════════════════════
   RESPONSIVE
   ═════════════════════════════════════════════════════════════ */

/* ── Tablet ────────────────────────────────────────────────── */
/* ══════════════════════════════════════════════════════════════
   RESPONSIVE  ·  1200 · 900 · 640 · 480 · 360
   ══════════════════════════════════════════════════════════════ */

/* ── Large tablet / Small desktop ≤1200px ─────────────────── */
@media (max-width: 1200px) {
  .hp-container { padding: 0 28px; }
  .hp-hero-inner { padding: 80px 28px 80px; }
}

/* ── Tablet landscape ≤900px ──────────────────────────────── */
@media (max-width: 900px) {
  .hp-section, .hp-section--dark { padding: calc(var(--sec-pad-top,90px) * .72) 0 calc(var(--sec-pad-bot,90px) * .72); }
  .hp-container { padding: 0 20px; }
  .hp-section-head { margin-bottom: calc(var(--sec-head-mb,48px) * .7); }

  /* Split: stack vertically */
  .hp-split { grid-template-columns: 1fr; }
  .hp-split.reverse .hp-split-media  { order: 0; }
  .hp-split.reverse .hp-split-content { order: 1; }
  .hp-split-media { min-height: 0; }
  .hp-split-content { padding: 40px 32px; text-align: left !important; align-items: flex-start !important; }
  .hp-split-content .hp-split-tag { flex-direction: row !important; }

  /* Teams: 3 col */
  .hp-teams-grid { grid-template-columns: repeat(3, 1fr) !important; gap: 12px; }

  /* Stats compact */
  .hp-stat { padding: 16px 10px; }
  .hp-stat span { font-size: 24px; }
}

/* ── Mobile ≤640px ────────────────────────────────────────── */
@media (max-width: 640px) {

  /* ── Base layout ── */
  .hp-container { padding: 0 14px; }
  .hp-section, .hp-section--dark { padding: calc(var(--sec-pad-top,90px) * .55) 0 calc(var(--sec-pad-bot,90px) * .55); }
  .hp-section-head { margin-bottom: calc(var(--sec-head-mb,48px) * .5); text-align: center; }
  .hp-section-head h2 { font-size: clamp(24px, 7.5vw, 38px); margin-bottom: 8px; }
  .hp-section-head p  { font-size: 13px; line-height: 1.6; }
  .hp-section-tag { font-size: 9px; letter-spacing: .22em; }
  .hp-section-tag::before, .hp-section-tag::after { width: 14px; gap: 8px; }

  /* ── Hero ── */
  .hp-hero { min-height: 100svh; }
  .hp-hero::before { background-size: 40px 40px; }
  .hp-hero::after  { display: none; }
  .hp-hero-inner   { padding: 72px 16px 60px; max-width: 100%; }
  .hp-hero-logo    { width: 68px; height: 68px; margin-bottom: 20px; }
  .hp-hero-logo img { width: 68px; height: 68px; border-radius: 12px; }
  .hp-hero-logo::before { inset: -6px; }
  .hp-hero-logo::after  { inset: -12px; }
  .hp-hero-tag  { font-size: 9px; letter-spacing: .3em; margin-bottom: 12px; }
  .hp-hero-tag::before, .hp-hero-tag::after { width: 18px; }
  .hp-hero-h1   { font-size: clamp(38px, 11.5vw, 58px); line-height: .9; margin-bottom: 16px; }
  .hp-hero-sub  { font-size: 13px; line-height: 1.65; margin-bottom: 28px; max-width: 100%; padding: 0 4px; }
  .hp-hero-btns { flex-direction: column; gap: 10px; padding: 0 8px; }
  .hp-hero-btns .hp-btn-primary,
  .hp-hero-btns .hp-btn-secondary {
    width: 100%; justify-content: center;
    padding: 14px 20px; font-size: 15px;
  }
  .hp-hero-scroll { bottom: 18px; }

  /* ── Stats bar ── */
  .hp-stats { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .hp-stat   { min-width: 85px; padding: 14px 8px; flex-shrink: 0; }
  .hp-stat span { font-size: 20px; }
  .hp-stat label { font-size: 8.5px; letter-spacing: .06em; }
  .hp-stat-dc a { font-size: 9px; }
  .hp-stat-dc a svg { width: 16px; height: 16px; }

  /* ── Teams grid ── */
  .hp-teams-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 9px; }
  .hp-tcard-accent { height: 3px; }
  .hp-tcard-inner  { padding: 13px 11px; gap: 7px; }
  .hp-tcard-logo,
  .hp-tcard-logo-ph { width: 44px; height: 44px; border-radius: 9px; font-size: 17px; }
  .hp-tcard-name   { font-size: 14px; letter-spacing: .01em; }
  .hp-tcard-game   { font-size: 9.5px; }
  .hp-tcard-footer { padding-top: 7px; gap: 5px; }
  .hp-tcard-badge  { font-size: 8.5px; padding: 2px 6px; }
  .hp-tcard-members { font-size: 9.5px; }
  .hp-tcard-members-panel { padding: 10px 12px; }
  .hp-tcard-members-panel .ml-name  { font-size: 11px; }
  .hp-tcard-members-panel .ml-label { font-size: 8.5px; margin-bottom: 5px; }
  .hp-tcard-members-panel .ml-dot   { width: 5px; height: 5px; }

  /* ── Partner slider ── */
  .hp-partners { padding: 0; }
  .hp-partner-track-wrap {
    -webkit-mask: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
    mask: linear-gradient(to right, transparent 0%, black 5%, black 95%, transparent 100%);
  }
  .hp-partner-item {
    height: var(--partner-mobile-logo-h, var(--partner-logo-h, 28px));
    margin-right: var(--partner-mobile-gap, var(--partner-gap, 40px));
  }
  .hp-partner-track {
    animation-duration: var(--partner-mobile-spd, var(--partner-spd, 40s));
  }

  /* ── Shop slider ── */
  .hp-shop { padding: 40px 0; }

  /* ── Split sections ── */
  .hp-split-media  { min-height: 200px; }
  .hp-split-content { padding: 26px 16px; gap: 13px; }
  .hp-split-content h3  { font-size: clamp(22px, 7vw, 34px); }
  .hp-split-content p   { font-size: 13px; line-height: 1.65; max-width: 100%; }
  .hp-split-feature-ico { width: 28px; height: 28px; font-size: 13px; }
  .hp-split-feature-text strong { font-size: 12px; }
  .hp-split-feature-text span   { font-size: 11px; }
  .hp-split-tag { font-size: 9px; letter-spacing: .22em; }

  /* ── Heading size scale ── */
  .sh-size-xl { font-size: clamp(32px, 9.5vw, 48px) !important; line-height: .9 !important; }
  .sh-size-lg { font-size: clamp(26px, 7.5vw, 38px) !important; }
  .sh-size-md { font-size: clamp(22px, 6.5vw, 32px) !important; }
  .sh-size-sm { font-size: clamp(18px, 5.5vw, 26px) !important; }

  /* ── Divider sections ── */
  .hp-divider-text { font-size: clamp(20px, 7.5vw, 44px); padding: 0 12px; }

  /* ── Application form ── */
  .stepbar {
    padding: 10px 12px; gap: 2px;
    border-radius: 10px;
  }
  .sb-step   { gap: 5px; }
  .sb-lbl    { display: none; }
  .sb-num    { width: 27px; height: 27px; font-size: 11px; }
  .sb-line   { flex: 1; margin: 0 4px; min-width: 8px; }
  .spane-head { margin-bottom: 14px; }
  .spane-head h2 { font-size: 20px; }
  .spane-head p  { font-size: 12px; margin-top: 3px; }
  .card  { padding: 14px 14px; margin-bottom: 10px; border-radius: 10px; }
  .card-head { gap: 10px; margin-bottom: 12px; padding-bottom: 12px; }
  .card-ico  { width: 30px; height: 30px; font-size: 15px; border-radius: 8px; }
  .sec-title { font-size: 13px; }
  .sec-desc  { font-size: 11px; }
  .field > label { font-size: 10px; }
  input[type=text], input[type=tel], input[type=number],
  input[type=email], textarea, select { padding: 9px 11px; font-size: 13px; border-radius: 8px; }
  .opts { gap: 6px; }
  .opt  { padding: 8px 11px; font-size: 12px; border-radius: 7px; }
  .opt-dot { width: 12px; height: 12px; }
  .sl-num  { font-size: 26px; }
  .spane-footer { flex-direction: column; gap: 8px; padding-top: 14px; }
  .spane-footer .btn { width: 100%; justify-content: center; padding: 11px; font-size: 12px; }
  .btn-main { font-size: 17px; padding: 14px; border-radius: 9px; }

  /* Team list in form (tcard) */
  .tcard-main { padding: 12px 13px; gap: 11px; }
  .tcard-logo, .tcard-logo-ph { width: 38px; height: 38px; border-radius: 8px; font-size: 17px; }
  .tcard-name  { font-size: 16px; }
  .tcard-game  { font-size: 11px; }
  .tcard-badge { font-size: 9px; padding: 2px 7px; }
  .tcard-tags  { gap: 3px; }
  .tcard-tag   { font-size: 9px; padding: 1px 7px; }

  /* AI results */
  .ai-result-card  { padding: 16px; }
  .ai-match-top    { gap: 12px; margin-bottom: 12px; }
  .ai-score-ring   { width: 50px; height: 50px; border-width: 2px; }
  .ai-match-score  { font-size: 18px; }
  .ai-match-team   { font-size: 17px; }
  .ai-reason       { font-size: 12px; padding: 10px 12px; }
  .ai-choices      { flex-direction: column; gap: 7px; }
  .ai-choice-btn   { width: 100%; justify-content: center; padding: 10px 14px; font-size: 12px; }
  .ai-thinking     { padding: 14px; gap: 10px; }
  .ai-spinner      { width: 28px; height: 28px; border-width: 2.5px; }

  /* Summary */
  .summary-box { padding: 14px; }
  .s-row { font-size: 12px; gap: 8px; }
  .s-label { min-width: 90px; font-size: 11px; }

  /* Legal */
  .hp-legal-modal { padding: 10px; }
  .hp-legal-modal-box { width: 100% !important; max-height: 92svh; padding: 18px 14px; border-radius: 12px; }
  .hp-legal-modal-box h2 { font-size: 18px; }
  .hp-legal-content { font-size: 12.5px; }
  .hp-legal-content .legal-heading { font-size: 14px; margin: 18px 0 7px; }
  .hp-legal-content .legal-num-heading { font-size: 13px; gap: 8px; margin: 14px 0 6px; }
  .hp-legal-content .legal-num { font-size: 18px; }

  /* Toast */
  .toast { min-width: 0; width: calc(100vw - 28px); bottom: 16px; }

  /* Modal (team detail) */
  .hp-modal { padding: 18px; border-radius: 12px; }
  .hp-modal-overlay { padding: 12px; align-items: flex-end; }

  /* Footer */
  .hp-footer { padding-top: 40px; }
  .hp-footer-inner { grid-template-columns: 1fr; gap: 20px; padding: 0 14px 28px; }
  .hp-footer-name  { font-size: 18px; }
  .hp-footer-heading { font-size: 9.5px; margin-bottom: 10px; }
  .hp-footer-nav a { font-size: 12px; }
  .hp-footer-text  { font-size: 12px; }
  .hp-footer-bottom { flex-direction: column; text-align: center; gap: 6px; padding: 12px 14px; font-size: 10.5px; }
  .hp-footer-dc    { font-size: 11px; padding: 6px 12px; }
}

/* ── Compact phones ≤400px ────────────────────────────────── */
@media (max-width: 400px) {
  .hp-hero-h1  { font-size: 34px; }
  .hp-hero-inner { padding: 64px 14px 52px; }
  .hp-section, .hp-section--dark { padding: calc(var(--sec-pad-top,90px) * .42) 0 calc(var(--sec-pad-bot,90px) * .42); }
  .hp-container { padding: 0 12px; }
  .hp-teams-grid { grid-template-columns: 1fr 1fr !important; gap: 7px; }
  .hp-tcard-inner { padding: 11px 10px; }
  .hp-tcard-logo, .hp-tcard-logo-ph { width: 38px; height: 38px; font-size: 15px; }
  .hp-tcard-name { font-size: 12.5px; }
  .hp-stat { min-width: 76px; padding: 12px 6px; }
  .hp-stat span { font-size: 18px; }
  .card { padding: 12px; }
  .hp-footer-inner { padding: 0 12px 22px; }
}

/* ── Touch devices: disable hover effects ─────────────────── */
@media (hover: none) and (pointer: coarse) {
  .hp-tcard:hover { transform: none !important; box-shadow: none !important; border-color: rgba(255,255,255,.08) !important; }
  .hp-tcard.expanded { border-color: var(--tc, var(--red)) !important; }
  .hp-btn-primary:hover, .hp-btn-secondary:hover { transform: none !important; }
  .hp-shop-card:hover { transform: none !important; box-shadow: 0 2px 16px rgba(0,0,0,.08) !important; }
  .hp-split:hover .hp-split-media img { transform: none !important; }
  .spc-drag { opacity: .6; }
}

/* ── Safe area (notch / home bar) ─────────────────────────── */
@supports (padding: max(0px)) {
  .hp-hero-inner { padding-left: max(16px, env(safe-area-inset-left)); padding-right: max(16px, env(safe-area-inset-right)); }
  .hp-footer-bottom { padding-bottom: max(14px, env(safe-area-inset-bottom)); }
}

/* ── Override .page wrapper ────────────────────────────────── */
body > .page { max-width: 100%; padding: 0; }
#bewerben .hp-container > .stepbar,
#bewerben .hp-container > form,
#bewerben .hp-container > .hp-success { max-width: 700px; margin-left: auto; margin-right: auto; }

/* ══════════════════════════════════════════════════════════════
   TEAMS SPLIT LAYOUT
   ══════════════════════════════════════════════════════════════ */

.hp-teams-split {
  display: flex; flex-direction: column; gap: 3px;
}

.ts-row {
  display: grid;
  grid-template-columns: 4px 72px 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0 16px;
  background: rgba(255,255,255,.03);
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 12px;
  padding: 16px 18px 16px 0;
  cursor: default;
  transition: background .2s, border-color .2s;
  position: relative;
  overflow: hidden;
}
.ts-row::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(var(--tc-rgb,220,38,38),.04) 0%, transparent 40%);
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.ts-row:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.12); }
.ts-row:hover::before { opacity: 1; }
.ts-row--closed { opacity: .45; }

/* Left accent stripe */
.ts-stripe {
  grid-column: 1; grid-row: 1 / 3;
  width: 4px; height: 100%;
  background: var(--tc, var(--red));
  border-radius: 0 2px 2px 0;
  align-self: stretch;
  margin-left: -1px;
}

/* Avatar */
.ts-avatar {
  grid-column: 2; grid-row: 1 / 3;
  width: 52px; height: 52px;
  border-radius: 12px; overflow: hidden;
  position: relative; flex-shrink: 0;
  background: rgba(var(--tc-rgb,220,38,38),.15);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,.1);
}
.ts-avatar img { width: 100%; height: 100%; object-fit: contain; }
.ts-avatar span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px; font-weight: 900; color: var(--tc, var(--red));
}
.ts-avatar-glow {
  position: absolute; inset: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  border-radius: 11px; pointer-events: none;
}

/* Info */
.ts-info {
  grid-column: 3; grid-row: 1;
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.ts-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px; font-weight: 900; color: #fff;
  line-height: 1; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ts-meta {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.ts-game { font-size: 11px; color: rgba(255,255,255,.4); text-transform: uppercase; letter-spacing: .06em; }
.ts-cap  { font-size: 11px; color: rgba(255,255,255,.4); }
.ts-members { font-size: 11px; color: rgba(255,255,255,.35); }

/* Member dots row */
.ts-memberrow {
  display: flex; align-items: center; gap: 4px; margin-top: 2px;
}
.ts-member-dot {
  width: 8px; height: 8px; border-radius: 50%;
  opacity: .7;
}
.ts-member-more {
  font-size: 10px; color: rgba(255,255,255,.3);
  margin-left: 2px;
}

/* Actions column */
.ts-actions {
  grid-column: 4; grid-row: 1;
  display: flex; align-items: center; gap: 8px; flex-shrink: 0;
}
.ts-badge {
  font-size: 10px; font-weight: 700; padding: 3px 10px;
  border-radius: 4px; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap;
}
.ts-badge--open   { background: rgba(22,163,74,.15); color: #4ade80; border: 1px solid rgba(74,222,128,.2); }
.ts-badge--full   { background: rgba(220,38,38,.1); color: #fca5a5; border: 1px solid rgba(252,165,165,.15); }
.ts-badge--closed { background: rgba(255,255,255,.05); color: rgba(255,255,255,.3); border: 1px solid rgba(255,255,255,.1); }

.ts-btn {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  padding: 7px 16px; border: none; border-radius: 6px;
  background: var(--tc, var(--red)); color: #fff;
  cursor: pointer; white-space: nowrap;
  transition: filter .15s, transform .15s;
  box-shadow: 0 2px 12px rgba(220,38,38,.3);
}
.ts-btn:hover { filter: brightness(1.15); transform: translateY(-1px); }
.ts-btn--full { width: 100%; justify-content: center; margin-top: 12px; padding: 10px; font-size: 14px; }

.ts-detail-btn {
  width: 28px; height: 28px; border-radius: 6px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.1);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.4); transition: all .15s; flex-shrink: 0;
}
.ts-detail-btn:hover { background: rgba(255,255,255,.13); color: #fff; }
.ts-row.expanded .ts-detail-btn { background: rgba(255,255,255,.13); color: #fff; }
.ts-row.expanded .ts-detail-btn svg { transform: rotate(180deg); }

/* Expandable area */
.ts-expand {
  grid-column: 2 / 5; grid-row: 2;
  display: none;
  padding: 14px 0 0 0;
  margin-top: 12px;
  border-top: 1px solid rgba(255,255,255,.07);
}
.ts-row.expanded .ts-expand { display: flex; flex-wrap: wrap; gap: 16px; }
.ts-expand-group { min-width: 120px; }
.ts-expand-label { font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.3); margin-bottom: 6px; }
.ts-expand-members { display: flex; flex-direction: column; gap: 4px; }
.ts-expand-member { display: flex; align-items: center; gap: 6px; font-size: 12px; color: rgba(255,255,255,.65); }
.ts-expand-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }

/* Mobile */
@media (max-width: 640px) {
  .ts-row { grid-template-columns: 4px 44px 1fr auto; gap: 0 12px; padding: 13px 14px 13px 0; }
  .ts-avatar { width: 44px; height: 44px; border-radius: 9px; }
  .ts-avatar span { font-size: 16px; }
  .ts-name { font-size: 17px; }
  .ts-game, .ts-cap, .ts-members { font-size: 10px; }
  .ts-btn { font-size: 12px; padding: 6px 12px; }
  .ts-actions { gap: 6px; }
  .ts-expand { grid-column: 2 / 5; }
  .ts-expand-group { min-width: 100px; }
}

@media (max-width: 400px) {
  .ts-row { grid-template-columns: 4px 38px 1fr; }
  .ts-actions { grid-column: 2 / 4; grid-row: 2; padding-top: 8px; border-top: 1px solid rgba(255,255,255,.06); }
  .ts-expand { grid-column: 1 / 4; }
}

/* ══════════════════════════════════════════════════════════════
   TEAMS ALTERNATING SPLIT LAYOUT — dezent
   ══════════════════════════════════════════════════════════════ */

.tsp-row {
  display: grid;
  /* Normal: text(small) | image(large) */
  grid-template-columns: var(--tsp-txt-pct, 35%) var(--tsp-img-pct, 65%);
  min-height: 360px;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.tsp-row:last-child { border-bottom: none; }
/* Flip: image(large) | text(small) — swap BOTH column widths AND visual order */
.tsp-row--flip {
  grid-template-columns: var(--tsp-img-pct, 65%) var(--tsp-txt-pct, 35%);
}
.tsp-row--flip .tsp-info   { order: 2; }
.tsp-row--flip .tsp-visual { order: 1; }

/* ── Info panel ─────────────────────────────────────────────── */
.tsp-info {
  background: #0d0d0d;
  display: flex; flex-direction: column;
  position: relative;
}


.tsp-accent-line { display: none; }

.tsp-inner {
  padding: 36px 40px;
  display: flex; flex-direction: column;
  justify-content: center; gap: 10px;
  flex: 1;
}

.tsp-game-tag {
  font-size: 10px; font-weight: 700; letter-spacing: .3em;
  text-transform: uppercase; color: var(--tc, var(--red));
  opacity: .8; margin-bottom: 2px;
}

.tsp-name {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: clamp(28px, 4.5vw, 48px);
  font-weight: 900; line-height: .95; letter-spacing: -.01em;
  color: #fff; margin: 0;
}

.tsp-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 10px; font-weight: 700; padding: 3px 10px;
  border-radius: 100px; letter-spacing: .04em;
}
.tsp-badge--open   { background: rgba(22,163,74,.12); color: #4ade80; border: 1px solid rgba(74,222,128,.18); }
.tsp-badge--full   { background: rgba(220,38,38,.08); color: #fca5a5; border: 1px solid rgba(252,165,165,.12); }
.tsp-badge--closed { background: rgba(255,255,255,.05); color: rgba(255,255,255,.3); border: 1px solid rgba(255,255,255,.08); }

.tsp-desc {
  font-size: var(--tsp-desc-fs, 13px); color: rgba(255,255,255,.4);
  line-height: 1.7; max-width: var(--tsp-desc-maxw, 350px); margin: 0;
}

.tsp-stats {
  display: flex; gap: 20px; flex-wrap: wrap;
}
.tsp-stat { display: flex; flex-direction: column; gap: 2px; }
.tsp-stat span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 20px; font-weight: 900; color: var(--tc, var(--red)); line-height: 1;
}
.tsp-stat label {
  font-size: 9px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255,255,255,.25);
}

.tsp-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tsp-chip {
  font-size: 10px; padding: 3px 8px;
  background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08);
  border-radius: 100px; color: rgba(255,255,255,.4);
}

.tsp-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--tc, var(--red)); color: #fff;
  padding: 10px 20px; border: none; cursor: pointer;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 14px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  border-radius: 6px; transition: all .18s;
}
.tsp-btn:hover { filter: brightness(1.12); transform: translateY(-1px); }
.tsp-btn--ghost {
  background: transparent; color: rgba(255,255,255,.5);
  border: 1px solid rgba(255,255,255,.15); box-shadow: none;
}
.tsp-btn--ghost:hover { color: rgba(255,255,255,.8); border-color: rgba(255,255,255,.3); }

/* ── Visual panel ───────────────────────────────────────────── */
.tsp-visual {
  position: relative; overflow: hidden;
  display: flex; align-items: flex-start; justify-content: center;
  background: #0a0a0a;
  /* background-position controlled via inline style */
}
.tsp-row--flip .tsp-visual { direction: ltr; }

.tsp-visual-bg { display: none; }
.tsp-visual::after { display: none; }

.tsp-logo-wrap {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: center;
}
.tsp-logo-img {
  width: 120px; height: 120px; object-fit: contain;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,.4));
  transition: transform .35s ease; position: relative; z-index: 1;
}
.tsp-visual:hover .tsp-logo-img { transform: scale(1.05); }

.tsp-logo-ph {
  width: 100px; height: 100px; border-radius: 18px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 40px; font-weight: 900; color: var(--tc, var(--red));
  position: relative; z-index: 1;
}

.tsp-ring { display: none; }

/* Members — subtle pills */
.tsp-member-overlay {
  position: absolute; bottom: 0; left: 0; right: 0; z-index: 3;
  padding: 12px 18px;
  background: linear-gradient(to top, rgba(7,8,9,.85) 0%, transparent 100%);
  display: flex; flex-wrap: wrap; gap: 4px; align-items: flex-end;
}
.tsp-member-pill {
  display: inline-flex; align-items: center; gap: 4px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08);
  border-radius: 100px; padding: 3px 8px;
  font-size: 10px; color: rgba(255,255,255,.5);
}
.tsp-member-dot { width: 5px; height: 5px; border-radius: 50%; flex-shrink: 0; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  .tsp-row { grid-template-columns: 1fr; min-height: 0; }
  .tsp-row--flip .tsp-info { order: 0; }
  .tsp-row--flip .tsp-visual { order: 1; }
  .tsp-visual {
    min-height: 200px;
    height: 200px;
    background-size: cover !important;
    background-position: center !important;
    align-items: center;
  }
  .tsp-logo-img { width: 52px; height: 52px; }
  .tsp-logo-ph { width: 46px; height: 46px; font-size: 18px; border-radius: 10px; }
  .tsp-inner { padding: 20px 20px; gap: 8px; text-align: left !important; align-items: flex-start !important; }
  .tsp-name { font-size: clamp(28px, 7vw, 42px); margin-bottom: 4px; }
  .tsp-desc { font-size: 12px; max-width: 100% !important; }
  .tsp-btn { font-size: 12px; padding: 9px 16px; }
  .tsp-chips { justify-content: flex-start; }
  .tsp-stats { justify-content: flex-start; }
  .tsp-members-toggle { align-self: flex-start; }
}

/* ── Teams Mobile Slider ────────────────────────────────────── */
/* ── Teams Mobile Slider ────────────────────────────────────── */
.teams-slider-wrap { position: relative; }
@media (max-width: 640px) {
  .teams-slider-wrap { overflow: hidden; }
}

/* Swipe-Hint rechts */
.teams-slider-wrap::after {
  content: ''; display: none;
  position: absolute; top: 0; right: 0; bottom: 36px;
  width: 30px;
  background: linear-gradient(to right, transparent, rgba(6,8,9,.75));
  pointer-events: none; z-index: 2;
}
@media (max-width: 640px) { .teams-slider-wrap::after { display: block; } }

/* Dots-Navigation */
.teams-slider-controls {
  display: none;
  align-items: center; justify-content: center;
  gap: 10px; padding: 12px 0 4px;
}
.tsd-prev, .tsd-next { display: none; }
.teams-slider-dots { display: flex; align-items: center; gap: 5px; }
.tsd-dot {
  height: 3px; border-radius: 1px; width: 18px;
  background: rgba(255,255,255,.15); border: none; cursor: pointer;
  padding: 0; transition: all .35s cubic-bezier(.16,1,.3,1);
}
.tsd-dot.active { background: var(--red); width: 32px; }

@media (max-width: 640px) {
  .teams-slider {
    display: flex;
    overflow: visible;
    will-change: transform;
    scrollbar-width: none; gap: 0; padding: 8px 0 0;
  }
  .teams-slider::-webkit-scrollbar { display: none; }
  .teams-slider .tsp-row,
  .teams-slider .tsp-clone {
    flex: 0 0 100%; width: 100%;
    border-bottom: none !important;
    min-height: 0;
  }
}


/* ── Team split member list (in info panel) ─────────────────── */
.tsp-members-list {
  display: flex; flex-direction: column; gap: 10px;
  padding-top: 4px;
}
.tsp-ml-group { display: flex; flex-direction: column; gap: 5px; }
.tsp-ml-label {
  font-size: 9px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255,255,255,.28); display: flex; align-items: center; gap: 5px;
}
.tsp-ml-names {
  display: flex; flex-wrap: wrap; gap: 5px;
}
.tsp-ml-name {
  font-size: 12px; color: rgba(255,255,255,.65);
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 5px; padding: 3px 9px;
  font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════
   APPLY MODAL
   ══════════════════════════════════════════════════════════════ */

.apm-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.8);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  animation: apm-fade .2s ease;
}
@keyframes apm-fade { from{opacity:0} to{opacity:1} }

.apm-box {
  background: #111111;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  width: 100%; max-width: var(--apply-modal-maxw, 600px);
  max-height: 95svh;
  display: flex; flex-direction: column;
  box-shadow: 0 32px 80px rgba(0,0,0,.6);
  animation: apm-pop .25s cubic-bezier(.16,1,.3,1);
}
@keyframes apm-pop { from{transform:scale(.96);opacity:0} to{transform:scale(1);opacity:1} }

/* Header */
.apm-header {
  display: flex; align-items: center; gap: 14px;
  padding: 18px 22px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0;
}
.apm-logo {
  width: 44px; height: 44px; border-radius: 10px; overflow: hidden;
  background: rgba(220,38,38,.1); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(220,38,38,.2);
}
.apm-logo img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.apm-logo span { font-family:'Barlow Condensed',sans-serif; font-size:18px; font-weight:900; color:var(--red); }
.apm-title { font-family:'Barlow Condensed',sans-serif; font-size:22px; font-weight:900; color:#fff; letter-spacing:.03em; }
.apm-sub { font-size:12px; color:rgba(255,255,255,.4); margin-top:1px; }
.apm-close {
  margin-left: auto; width:32px; height:32px; border-radius:8px;
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.1);
  color: rgba(255,255,255,.5); cursor:pointer; font-size:14px;
  display:flex; align-items:center; justify-content:center;
  transition: all .15s; flex-shrink:0;
}
.apm-close:hover { background:rgba(255,255,255,.12); color:#fff; }

/* Progress bar */
.apm-progress {
  display: flex; align-items: center; padding: 14px 22px;
  border-bottom: 1px solid rgba(255,255,255,.07);
  flex-shrink: 0; gap: 0;
}
.apm-step {
  display: flex; align-items: center; gap: 7px;
  font-size: 11px; font-weight: 700; color: rgba(255,255,255,.3);
  letter-spacing: .04em; text-transform: uppercase; transition: color .2s;
}
.apm-step span {
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.15);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; transition: all .2s;
}
.apm-step.active { color: #fff; }
.apm-step.active span { background: var(--red); border-color: var(--red); color: #fff; }
.apm-step.done span { background: rgba(22,163,74,.2); border-color: #4ade80; color: #4ade80; }
.apm-prog-line { flex: 1; height: 1px; background: rgba(255,255,255,.08); margin: 0 10px; }

/* Body */
.apm-body {
  flex: 1; overflow-y: auto; padding: 20px 22px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent;
}
.apm-body::-webkit-scrollbar { width: 4px; }
.apm-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

/* Panes */
.apm-pane { display: none; }
.apm-pane.active { display: block; }

/* Footer */
.apm-footer {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: 16px; margin-top: 8px;
  border-top: 1px solid rgba(255,255,255,.07);
}

/* Mobile */
@media (max-width: 640px) {
  .apm-overlay { padding: 0; align-items: flex-end; }
  .apm-box {
    max-height: 92svh; border-radius: 20px 20px 0 0;
    width: 100%; max-width: 100%;
  }
  .apm-header { padding: 14px 16px; gap: 10px; }
  .apm-logo { width: 36px; height: 36px; }
  .apm-title { font-size: 18px; }
  .apm-sub { display: none; }
  .apm-progress { padding: 10px 16px; gap: 0; }
  .apm-step { font-size: 10px; gap: 4px; }
  .apm-step span { width: 20px; height: 20px; font-size: 10px; }
  .apm-prog-line { margin: 0 6px; }
  .apm-body { padding: 14px 16px; }
  .apm-footer { padding-top: 12px; gap: 8px; }
  .apm-footer .btn { padding: 10px 14px; font-size: 13px; }
  .btn-main { width: 100%; padding: 14px; font-size: 15px; }
  /* Summary */
  .s-row { flex-direction: column; gap: 2px; padding: 8px 0; }
  .s-label { min-width: unset; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
  .s-val { font-size: 13px; }
  /* Cards */
  .card { padding: 14px; }
  .card-head { gap: 10px; margin-bottom: 14px; }
  /* Opts / Radio */
  .opts { gap: 6px; }
  .opt { padding: 8px 10px; font-size: 13px; }
  /* AI result */
  .ai-main-result { padding: 14px; }
  .ai-score-ring { display: none !important; }
  .ai-score-ring span { font-size: 20px; }
  .ai-match-team { font-size: 18px; }
  .ai-alt-item { padding: 9px 10px; }
}

/* ── AI match alts ─────────────────────────────────────────── */
.ai-alts-title { font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.3); margin:16px 0 8px; }
.ai-alts-list { display:flex; flex-direction:column; gap:5px; }
.ai-alt-item {
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.07);
  border-radius:8px; padding:10px 12px;
  transition:all .15s;
}
.ai-alt-item:hover { background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.15); }
.ai-alt-item.selected { border-color:var(--red); background:rgba(220,38,38,.08); }
.ai-alt-score { font-family:'Barlow Condensed',sans-serif; font-size:18px; font-weight:900; color:var(--red); min-width:32px; text-align:center; }
.ai-alt-name { font-size:13px; font-weight:700; color:#fff; }
.ai-alt-reason { font-size:11px; color:rgba(255,255,255,.4); margin-top:2px; }
.ai-match-sub { font-size:12px; color:rgba(255,255,255,.4); margin-top:4px; max-width:280px; }

/* ── AI main result card ─────────────────────────────────────── */
.ai-main-result {
  background: rgba(255,255,255,.04);
  border: 2px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 16px; margin-bottom: 12px;
  transition: all .15s;
}
.ai-main-result:hover { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.15); }
.ai-main-result.selected { border-color: var(--red); background: rgba(220,38,38,.07); }
.ai-slots {
  font-size: 11px; color: #4ade80; font-weight: 700; margin-top: 3px;
  display: inline-flex; align-items: center; gap: 4px;
}
.ai-slots::before { content:'●'; font-size:7px; }

.l-hint { font-size:11px; color:rgba(255,255,255,.35); display:block; margin-top:2px; }
.legal.ok .l-hint { color:#4ade80; }

/* ── Spielstil / Stärken Tags ───────────────────────────────── */
.style-tag-label {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 13px; border-radius: 20px;
  border: 1px solid rgba(255,255,255,.15); font-size: 12px;
  background: rgba(255,255,255,.04); color: rgba(255,255,255,.6);
  cursor: pointer; user-select: none; transition: all .15s;
}
.style-tag-label:hover { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.3); }
.style-tag-label.active-tag { background: rgba(220,38,38,.15); border-color: var(--red); color: #fff; font-weight: 700; }

/* ── iOS Zoom verhindern ─────────────────────────────────────── */
@media (max-width: 768px) {
  input[type=text], input[type=email], input[type=number], input[type=tel],
  input[type=password], input[type=search], textarea, select {
    font-size: 16px !important;
  }
}