/* ============================================================
   MSV eSports – eigene Gestaltung
   Dunkler und kantiger als der Rest der Seite, aber mit den
   Vereinsfarben Grün und Rot.
   ============================================================ */

#seite-esport{
  --es-nacht:#040A07;
  --es-tief:#081710;
  --es-flaeche:#0C2117;
  --es-neon:#3BEE8B;
  --es-neon-matt:#8FE9B6;
  --es-rot:#FF3244;
  --es-text:#C9DED2;
  --es-linie:rgba(59,238,139,.20);
  --es-linie-stark:rgba(59,238,139,.42);
  background:var(--es-nacht);
  color:var(--es-text);
}

/* Abgeschrägte Ecken – das Kantenmotiv der ganzen Abteilung */
.kante{
  clip-path:polygon(0 0, calc(100% - 16px) 0, 100% 16px,
                    100% 100%, 16px 100%, 0 calc(100% - 16px));
}

#seite-esport .es-block{padding:clamp(52px,7vw,90px) 0;position:relative}
#seite-esport .es-block-tief{background:var(--es-tief)}

#seite-esport h2{
  font-size:clamp(28px,4.2vw,46px);
  font-variation-settings:'wdth' 122,'wght' 800;
  text-transform:uppercase;letter-spacing:.005em;color:#fff;
}
#seite-esport h3{
  font-size:15px;text-transform:uppercase;letter-spacing:.14em;
  font-variation-settings:'wdth' 92,'wght' 700;color:var(--es-neon);
}

.es-titel{display:flex;align-items:center;gap:16px;margin-bottom:34px;flex-wrap:wrap}
.es-titel::before{
  content:'';width:5px;height:32px;flex-shrink:0;
  background:linear-gradient(var(--es-neon),var(--es-rot));
}
.es-titel-zusatz{
  font-size:13px;letter-spacing:.13em;text-transform:uppercase;
  font-variation-settings:'wdth' 90,'wght' 600;color:var(--es-neon-matt);
}

/* ============================================================
   Kopfbereich
   ============================================================ */
.es-held{
  position:relative;overflow:hidden;
  background:var(--es-nacht);
  padding:clamp(46px,7vw,86px) 0 clamp(52px,8vw,96px);
}
/* feines Raster im Hintergrund */
.es-held::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background-image:
    linear-gradient(var(--es-linie) 1px, transparent 1px),
    linear-gradient(90deg, var(--es-linie) 1px, transparent 1px);
  background-size:64px 64px;
  opacity:.4;
  mask-image:radial-gradient(ellipse 80% 70% at 70% 40%, #000 20%, transparent 75%);
}
.es-held-raster{
  position:relative;z-index:2;
  display:grid;grid-template-columns:1fr 330px;gap:52px;align-items:center;
}
.es-wappen{position:relative;display:flex;justify-content:center}
.es-wappen::before{
  content:'';position:absolute;inset:-14%;
  background:radial-gradient(circle, rgba(59,238,139,.30) 0%, transparent 68%);
  filter:blur(14px);
}
.es-wappen img{position:relative;max-width:100%;height:auto}

.es-marke{
  font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;
  font-variation-settings:'wdth' 88,'wght' 700;color:var(--es-neon);margin-bottom:16px;
}
.es-name{
  margin:0;font-size:clamp(42px,7.4vw,84px);line-height:.94;
  font-variation-settings:'wdth' 125,'wght' 800;
  text-transform:uppercase;letter-spacing:-.015em;color:#fff;
}
.es-name em{font-style:normal;color:var(--es-neon)}
.es-unterzeile{margin:16px 0 0;font-size:17.5px;max-width:48ch}

.es-marken{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.es-unterzeile + .es-discord{margin-top:34px}
.es-marke-chip{
  border:1px solid var(--es-linie-stark);padding:7px 14px;
  font-size:12px;letter-spacing:.1em;text-transform:uppercase;
  font-variation-settings:'wdth' 90,'wght' 650;color:var(--es-neon-matt);
}

/* Discord-Knopf */
.es-discord{
  display:inline-flex;align-items:center;gap:11px;margin-top:30px;
  background:#5865F2;color:#fff;text-decoration:none;
  padding:15px 28px;font-size:15px;letter-spacing:.06em;text-transform:uppercase;
  font-variation-settings:'wdth' 100,'wght' 700;
  transition:background .15s,transform .15s;
}
.es-discord:hover{background:#4551D8;transform:translateY(-2px)}
.es-discord svg{width:23px;height:18px;flex-shrink:0}

@media (max-width:860px){
  .es-held-raster{grid-template-columns:1fr;gap:30px}
  .es-wappen{order:-1;max-width:240px;margin:0 auto}
}

/* ============================================================
   Kennzahlen
   ============================================================ */
.es-werte{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  border-top:1px solid var(--es-linie-stark);border-bottom:1px solid var(--es-linie-stark);
}
.es-wert{padding:26px 18px;border-right:1px solid var(--es-linie)}
.es-wert:last-child{border-right:none}
.es-wert dt{
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  font-variation-settings:'wdth' 88,'wght' 700;color:var(--es-neon);margin-bottom:9px;
}
.es-wert dd{
  margin:0;font-size:clamp(22px,2.6vw,30px);line-height:1.1;color:#fff;
  font-variation-settings:'wdth' 116,'wght' 750;font-variant-numeric:tabular-nums;
}

/* ============================================================
   Bilderkarussell
   ============================================================ */
.es-karussell{position:relative}
.es-fenster{
  display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;
}
.es-fenster::-webkit-scrollbar{display:none}
.es-folie{
  flex:0 0 100%;scroll-snap-align:center;margin:0;position:relative;
  background:var(--es-flaeche);
}
.es-folie img{
  width:100%;aspect-ratio:16/9;object-fit:cover;display:block;
}
.es-folie figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:44px 22px 18px;
  background:linear-gradient(transparent, rgba(4,10,7,.92));
  font-size:15px;color:#fff;font-variation-settings:'wdth' 100,'wght' 550;
}
@media (min-width:900px){
  .es-folie{flex-basis:calc(50% - 8px)}
}

.es-pfeil{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  width:48px;height:48px;border:1px solid var(--es-linie-stark);
  background:rgba(4,10,7,.82);color:#fff;cursor:pointer;
  font-size:24px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .15s,border-color .15s;
}
.es-pfeil:hover{background:var(--es-neon);color:var(--es-nacht);border-color:var(--es-neon)}
.es-pfeil[disabled]{opacity:.28;cursor:default}
.es-pfeil[disabled]:hover{background:rgba(4,10,7,.82);color:#fff;border-color:var(--es-linie-stark)}
.es-pfeil.links{left:-10px}
.es-pfeil.rechts{right:-10px}
@media (max-width:700px){
  .es-pfeil{width:40px;height:40px;font-size:20px}
  .es-pfeil.links{left:4px}
  .es-pfeil.rechts{right:4px}
}

.es-punkte{display:flex;justify-content:center;gap:9px;margin-top:22px}
.es-punkt{
  width:26px;height:4px;background:var(--es-linie-stark);border:none;padding:0;
  cursor:pointer;transition:background .15s;
}
.es-punkt[aria-current="true"]{background:var(--es-neon)}

.es-galerie-leer{
  border:1px dashed var(--es-linie-stark);padding:44px 24px;text-align:center;
  color:var(--es-neon-matt);font-size:15px;
}

/* ============================================================
   Über uns und Mission
   ============================================================ */
.es-ueber{display:grid;grid-template-columns:1.25fr 1fr;gap:44px;align-items:start}
@media (max-width:860px){.es-ueber{grid-template-columns:1fr;gap:30px}}
.es-ueber p{font-size:17.5px;margin-bottom:1em}

.es-mission{background:var(--es-flaeche);padding:2px}
.es-mission-innen{background:var(--es-tief);padding:30px 28px;border-left:4px solid var(--es-rot)}
.es-mission-label{
  margin:0 0 12px;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;
  font-variation-settings:'wdth' 88,'wght' 700;color:var(--es-rot);
}
.es-mission-text{
  margin:0;font-size:20px;line-height:1.42;color:#fff;
  font-variation-settings:'wdth' 106,'wght' 600;
}

/* ============================================================
   Erfolge
   ============================================================ */
.es-pokale{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px}
.es-pokal:only-child{max-width:540px}
.es-pokal:only-child .es-pokal-innen{padding:34px 34px 36px}
.es-pokal{background:linear-gradient(140deg, var(--es-neon), var(--es-rot));padding:1px}
.es-pokal-innen{
  background:var(--es-flaeche);padding:26px 26px 28px;height:100%;
  display:flex;flex-direction:column;gap:6px;
}
.es-pokal-jahr{
  font-size:12px;letter-spacing:.14em;font-variation-settings:'wdth' 88,'wght' 700;
  color:var(--es-neon);font-variant-numeric:tabular-nums;
}
.es-pokal-titel{
  font-size:25px;line-height:1.12;color:#fff;text-transform:uppercase;
  font-variation-settings:'wdth' 116,'wght' 780;letter-spacing:-.01em;
}
.es-pokal-text{margin:4px 0 0;font-size:15px}

/* ============================================================
   Roster
   ============================================================ */
.es-gruppe + .es-gruppe{margin-top:44px}
.es-gruppe h3{margin:0 0 18px}
.es-roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:16px}

.es-spieler{background:var(--es-linie-stark);padding:1px;transition:background .18s}
.es-spieler:hover{background:var(--es-neon)}
.es-spieler.rot{background:rgba(255,50,68,.5)}
.es-spieler.rot:hover{background:var(--es-rot)}

.es-spieler-innen{
  background:var(--es-flaeche);padding:22px 20px 20px;height:100%;
  display:flex;flex-direction:column;gap:3px;position:relative;overflow:hidden;
}
.es-spieler-kuerzel{
  font-size:74px;line-height:.8;color:rgba(255,255,255,.07);
  font-variation-settings:'wdth' 125,'wght' 800;letter-spacing:-.04em;
  position:absolute;bottom:-8px;right:10px;pointer-events:none;
}
.es-spieler-innen{padding-bottom:26px}
.es-spieler-rolle{
  margin:0 0 10px;font-size:11px;letter-spacing:.14em;text-transform:uppercase;
  font-variation-settings:'wdth' 88,'wght' 700;color:var(--es-neon);
}
.es-spieler.rot .es-spieler-rolle{color:var(--es-rot)}
.es-spieler-name{
  margin:0;font-size:22px;line-height:1.1;color:#fff;
  font-variation-settings:'wdth' 112,'wght' 750;
}
.es-spieler-tag{
  margin:8px 0 0;display:flex;align-items:center;gap:7px;
  font-size:13.5px;color:var(--es-neon-matt);
  font-variation-settings:'wdth' 96,'wght' 500;
}
.es-spieler-tag svg{width:15px;height:12px;flex-shrink:0;opacity:.8}

/* ============================================================
   Aufruf am Ende
   ============================================================ */
.es-aufruf{position:relative;overflow:hidden;background:var(--es-tief)}
.es-aufruf::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 60% 100% at 15% 50%, rgba(59,238,139,.13), transparent 70%);
}
.es-aufruf .huelle{position:relative;z-index:2}
.es-aufruf p{font-size:17.5px;max-width:60ch}
.es-knoepfe{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:30px}
.es-knopf-linie{
  display:inline-block;border:1px solid var(--es-linie-stark);color:#fff;
  text-decoration:none;padding:15px 26px;font-size:15px;
  letter-spacing:.06em;text-transform:uppercase;
  font-variation-settings:'wdth' 100,'wght' 650;transition:background .15s,border-color .15s;
}
.es-knopf-linie:hover{background:rgba(59,238,139,.12);border-color:var(--es-neon)}

@media (prefers-reduced-motion: reduce){
  .es-fenster{scroll-behavior:auto}
  .es-discord:hover{transform:none}
}