@font-face{
  font-family:"Gotham Cond Black";
  src:url("assets/fonts/GothamCond-Black.woff2") format("woff2");
  font-weight:900;
  font-style:normal;
  font-display:swap;
}

@font-face{
  font-family:"Petala Pro";
  src:url("assets/fonts/PetalaPro-Regular.woff2") format("woff2");
  font-weight:400;
  font-style:normal;
  font-display:swap;
}

:root{
  --bg:#080808;
  --card:#111111;
  --card2:#171717;
  --text:#ffffff;
  --muted:#cfcfcf;
  --purple:rgba(144, 0, 255, 0.72);
  --pink2:rgba(144, 0, 255, 0.72);
  --line:rgba(144, 0, 255, 0.72);
  --max:1180px;
}

*{
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:"Petala Pro", Inter, Arial, sans-serif;
  overflow-x:hidden;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  z-index:-2;
  pointer-events:none;
  background:radial-gradient(circle at 50% 0%,rgba(255,0,90,.08),transparent 34%);
}

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

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

.boxed{
  width:min(var(--max),calc(100% - 48px));
  margin-inline:auto;
}

.section{
  position:relative;
  padding:70px 0;
}

.section::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(var(--max),calc(100% - 40px));
  height:3px;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(202, 3, 237, 0.65) 12%,
      rgba(183, 0, 255, 0.65) 88%,
      transparent 100%
    );
}

.label{
  margin:0 0 6px;
  color:var(--purple);
  font-family:"Gotham Cond Black",sans-serif;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.05em;
  font-size:14px;
}

.about-copy h2 span{
  color:var(--purple);
}

.about-label{
  color:var(--purple) !important;
}

.about-copy p{
    font-size:15px;
    line-height:1.7;
}

.about-copy h2{
    margin-bottom:20px;
    font-size:78px;
}

.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:rgba(8,8,8,.76);
  backdrop-filter:blur(16px);
  border-bottom:1px solid rgba(119, 0, 255, 0.25);
}

.nav-wrap{
  height:76px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:28px;
}

.brand img{
  width:72px;
  height:72px;
  object-fit:contain;
}

.main-nav{
  display:flex;
  align-items:center;
  gap:35px;
  font-size:12px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.08em;
}

.main-nav a:hover{
  color:var(--purple);
}

.header-icons{
  display:flex;
  gap:18px;
  align-items:center;
}

.header-icons a,
.hero-socials a{
  display:flex;
  align-items:center;
  justify-content:center;
}

.header-icons svg,
.hero-socials svg{
  width:18px;
  height:18px;
  fill:white;
  transition:.2s ease;
}

.header-icons a:hover svg,
.hero-socials a:hover svg{
  fill:var(--purple);
}

.mobile-toggle{
  display:none;
  color:white;
  background:none;
  border:0;
  font-size:30px;
  cursor:pointer;
}

.online-banner{
  position:fixed;
  top:96px;
  right:calc((100vw - min(var(--max),calc(100% - 48px))) / 2);
  z-index:60;
  width:270px;
  display:none;
  align-items:center;
  gap:13px;
  padding:12px 16px;
  background:rgba(24,24,24,.94);
  border:1px solid rgba(187, 0, 255, 0.55);
  border-radius:9px;
  box-shadow:0 16px 40px rgba(0,0,0,.45),0 0 24px rgba(255,0,90,.18);
}

.online-banner.is-online{
  display:flex;
}

.online-banner img{
  width:50px;
  height:50px;
  border-radius:50%;
  border:2px solid var(--purple);
  object-fit:cover;
}

.online-banner strong{
  display:block;
  font-weight:900;
}

.online-banner small{
  display:block;
  margin-top:3px;
  color:#aaa;
  font-size:11px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:170px;
}

.online-banner i{
  width:8px;
  height:8px;
  margin-right:7px;
  display:inline-block;
  border-radius:50%;
  background:var(--purple);
  box-shadow:0 0 14px var(--purple);
}

.hero{
  position:relative;
  padding:0 0 70px;
}

.hero::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  transform:translateX(-50%);
  width:min(var(--max),calc(100% - 48px));
  height:100%;
  background:
    linear-gradient(
      90deg,
      rgba(8,8,8,.78) 0%,
      rgba(8,8,8,.58) 30%,
      rgba(8,8,8,.18) 58%,
      rgba(8,8,8,.42) 100%
    ),
    url('../images/tank_bg_.png');

  background-size:cover;
  background-position:center center;
  background-repeat:no-repeat;

  z-index:0;
}

.hero-inner{
  position:relative;
  z-index:2;
  min-height:520px;
  display:flex;
  align-items:center;
}

.hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:120px;
  background:
    linear-gradient(
      transparent,
      rgba(8,8,8,.92)
    );
}

.hero-inner{
  position:relative;
  z-index:2;
}

.hero-copy{
  width:min(540px,100%);
}

.hero h1{
  max-width:1200px;
  margin:0 0 18px;
  font-family:"Gotham Cond", "Barlow Condensed", sans-serif;
  font-size:clamp(50px,6vw,82px);
  line-height:.88;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:-.025em;
}

.hero h1 span{
  color:var(--purple);
}

.hero h1 span,
.about-copy h2 span,
.featured-video h2 span,
.community-box h2 span{
  color:var(--purple);
}

.hero-text{
  max-width:440px;
  color:#ededed;
  line-height:1.7;
  margin:0;
}

.hero-buttons{
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  margin-top:30px;
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:14px 24px;
  border:2px solid var(--purple);
  border-radius:4px;
  font-size:13px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.02em;
}

.btn.primary{
    position:relative;
    overflow:hidden;
    background:var(--purple);
    border:2px solid var(--purple);
    color:#fff;
    font-weight: 500;
    transition:
        background .25s ease,
        color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
    box-shadow:
        0 0 12px rgba(76, 0, 255, 0.45),
        0 0 28px rgba(23, 2, 108, 0.429);
}

/* HOLLOW EFFECT */
.btn.primary:hover{
    background:transparent;
    color:var(--purple);
    box-shadow:
        0 0 14px rgba(47, 0, 255, 0.45),
        inset 0 0 18px rgba(57, 1, 121, 0.15);
    transform:translateY(-2px);
}

/* ICON FARBE */
.btn.primary svg,
.btn.primary i{
    transition:.25s ease;
}

.btn.primary:hover svg,
.btn.primary:hover i{
    fill:var(--purple);
    color:var(--purple);
}

/* LIGHT SWEEP */
.btn.primary::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(255,255,255,.18),
            transparent
        );

    transform:translateX(-120%);
    transition:transform .55s ease;
}

.btn.primary:hover::before{
    transform:translateX(120%);
}

.btn.outline{
    position:relative;
    overflow:hidden;
    background:transparent;
    border:2px solid var(--purple);
    color:#ffffff;
    font-weight:500; 
    transition:
        background .25s ease,
        color .25s ease,
        box-shadow .25s ease,
        transform .25s ease;
}

/* HOVER */
.btn.outline:hover{
    background:var(--purple);
    color:#ffffff;
    box-shadow:
        0 0 12px rgba(123, 0, 255, 0.45),
        0 0 28px rgba(115, 0, 255, 0.25);
    transform:translateY(-2px);
}

/* SHINE EFFEKT */
.btn.outline::before{
    content:"";
    position:absolute;
    inset:0;
    background:
        linear-gradient(
            120deg,
            transparent,
            rgba(168,85,247,.45)
            rgba(168,85,247,.25)
            rgba(168,85,247,.18)
            rgba(168,85,247,.16)
            transparent
        );

    transform:translateX(-120%);
    transition:transform .55s ease;
}

.btn.outline:hover::before{
    transform:translateX(120%);
}

.hero-socials{
  display:flex;
  gap:20px;
  margin-top:34px;
  font-weight:900;
}

.hero-logo-text{
  position:absolute;
  right:6%;
  bottom:40px;
  font-family:"Gotham Cond Black", "Barlow Condensed", sans-serif;
  font-weight:900;
  font-size:74px;
  line-height:.8;
  transform:rotate(-4deg);
  text-shadow:0 5px 18px rgba(0,0,0,.55);
}

.hero-logo-text span{
  color:var(--purple);
}

.hero-logo-text small{
  display:block;
  margin-top:8px;
  font-size:12px;
  text-align:center;
  letter-spacing:.15em;
  transform:rotate(4deg);
}

.about-section{
  padding-top:0;
  padding-bottom:0;
}

.about-grid{
  display:grid;
  grid-template-columns:.95fr 1.05fr;
  gap:50px;
  align-items:end;
  min-height:390px;
}

.person-wrap{
  position:relative;
  margin-top: -80px;
  min-height:390px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  overflow:visible;
  padding-left:70px;
}

.person-wrap img{
  max-height:520px;
  object-fit:contain;
  transform:translateY(0);
  position:relative;
  z-index:3;
}

.about-copy h2,
.featured-video h2,
.latest-videos h2,
.community-box h2{
  margin:0 0 18px;
  font-family:"Gotham Cond Black", "Barlow Condensed", sans-serif;
  font-size:clamp(42px,5vw,66px);
  line-height:.9;
  text-transform:uppercase;
  font-weight:900;
}

.about-copy p{
  color:#eee;
  line-height:1.72;
}

.stats{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:30px;
    margin-top:30px;
    padding-bottom:18px;
}

.stats div{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
    text-align:center;
}

.stats i{
    width:54px;
    height:54px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin:0 auto 14px;
    border:2px solid var(--purple);
    border-radius:50%;
}

.stats i img,
.stats i svg{
    width:20px;
    height:20px;
    object-fit:contain;
}

.stats strong{
    display:block;
    margin-top:2px;
    font-size:11px;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:.03em;
    text-align:center;
}

.stats span{
    display:block;
    margin-top:4px;
    font-size:15px;
    font-weight:600;
    line-height:1.35;
    text-align:center;
    color:#f2f2f2;
}

.section-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:20px;
  margin:0 0 34px;
  font-family:"Gotham Cond Black", "Barlow Condensed", sans-serif;
  font-size:44px;
  text-transform:uppercase;
  font-weight:900;
  text-align:center;
}

.section-title span{
    width:64px;
    height:2px;
    background:
        linear-gradient(
            to right,
            var(--purple) 0%,
            transparent 100%
        );
}

.section-title span:first-child{
    transform:scaleX(-1);
}

.feature-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:18px;
}

.feature-card{
    position:relative;
    width:100%;
    min-height:180px;
    padding:26px 20px;
    background:#070707;
    border:2px solid #8c00ff;
    border-radius:2px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
}

/* CORNER GLOW */
.feature-card span.corner{
    position:absolute;
    width:14px;
    height:14px;
    border-color:#c31bf6;
    pointer-events:none;
    filter:
        drop-shadow(0 0 9px rgba(219, 107, 146, 0.9))
        drop-shadow(0 0 7px rgba(168,85,247,.55));
}

/* OBEN LINKS */
.feature-card .tl{
    top:-2px;
    left:-2px;
    border-top:2px solid #ff005a;
    border-left:2px solid #ff005a;
}

/* OBEN RECHTS */
.feature-card .tr{
    top:-2px;
    right:-2px;
    border-top:2px solid #ff005a;
    border-right:2px solid #ff005a;
}

/* UNTEN LINKS */
.feature-card .bl{
    bottom:-2px;
    left:-2px;
    border-bottom:2px solid #ff005a;
    border-left:2px solid #ff005a;
}

/* UNTEN RECHTS */
.feature-card .br{
    bottom:-2px;
    right:-2px;
    border-bottom:2px solid #ff005a;
    border-right:2px solid #ff005a;
}

/* ICON */
.feature-card .icon{
    width:42px;
    height:42px;
    margin-bottom:18px;
    display:flex;
    align-items:center;
    justify-content:center;
}

.feature-card .icon img{
    width:40px;
    height:40px;
    object-fit:contain;
}

/* TITEL */
.feature-card h3{
    margin:0 0 10px;
    font-family:"Gotham Cond Black",sans-serif;
    font-size:20px;
    line-height:1;
    text-transform:uppercase;
    color:#fff;
}

/* TEXT */
.feature-card p{
    max-width:180px;
    margin:0 auto;
    color:#d7d7d7;
    font-size:13px;
    line-height:1.45;
}

/* RESPONSIVE */
@media(max-width:1000px){
  .feature-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media(max-width:640px){
  .feature-grid{
    grid-template-columns:1fr;
  }

  .feature-card{
    min-height:160px;
  }
}

.videos-layout{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  gap:58px;
  align-items:start;
}

.featured-video h2,
.latest-videos h2{
  font-size:58px;
}

.video-frame{
  position:relative;
  overflow:hidden;
  border-radius:10px;
  background:#141414;
  border:1px solid rgba(255,255,255,.08);
}

.video-frame iframe{
  width:100%;
  aspect-ratio:16/9;
  display:block;
  border:0;
}

.latest-list{
  display:grid;
  gap:22px;
}

.video-row{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:20px;
  align-items:center;
}

.thumb{
  position:relative;
  overflow:hidden;
  border-radius:4px;
  background:#202020;
}

.thumb img{
  width:100%;
  aspect-ratio:16/9;
  object-fit:cover;
}

.thumb::after{
  content:"▶";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  color:var(--purple);
  border:2px solid var(--purple);
  border-radius:50%;
  background:rgba(0,0,0,.5);
  font-size:14px;
}

.video-text em{
  display:block;
  color:var(--purple);
  font-size:13px;
  font-style:normal;
  font-weight:900;
  text-transform:uppercase;
}

.video-text strong{
  display:block;
  margin:5px 0;
  font-family:"Gotham Cond Black", "Barlow Condensed", sans-serif;
  font-size:28px;
  line-height:1;
  text-transform:uppercase;
}

.video-text small,
.loading{
  color:#bdbdbd;
  font-size:12px;
}

.follow-bar{
  margin-top:42px;
  padding:16px 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  border:1px solid var(--purple);
  border-radius:4px;
  text-transform:uppercase;
}

.follow-bar a{
  min-width:300px;
  text-align:center;
  padding:14px 24px;
  background:var(--purple);
  border-radius:4px;
  font-weight:900;
}

.sponsor-slider{
  position:relative;
  width:100%;
  aspect-ratio:1000 / 625;
  overflow:hidden;
  border-radius:5px;
  background:#111;
}

.sponsor-slider a{
  position:absolute;
  inset:0;
  display:block;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity 1.2s ease-in-out;
}

.sponsor-slider a.active{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}

.setup-grid{
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:30px;
  text-align:center;
  padding-bottom:55px;
}

.setup-item img{
  width:64px;
  height:64px;
  object-fit:contain;
  margin:0 auto 14px;
  display:block;
  filter:
brightness(0)
saturate(100%)
invert(18%)
sepia(95%)
saturate(7480%)
hue-rotate(270deg)
brightness(104%)
contrast(118%);
}

.setup-grid strong{
  display:block;
  margin-top:10px;
  color:var(--purple);
  text-transform:uppercase;
  font-size:13px;
}

.setup-grid span{
  display:block;
  margin-top:3px;
  text-transform:uppercase;
  font-weight:400;
  font-size:14px;
  color:#ffffff;
}

.community-box{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:34px;
  padding:30px;
  border:1px solid var(--purple);
  border-radius:4px;
}

.community-box h2{
  font-size:44px;
  margin-bottom:10px;
}

.community-box p{
  color:#ddd;
  margin:0;
}

.community-actions{
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:18px;
  flex-wrap:nowrap;
}

.community-actions a{
  display:flex;
  align-items:center;
  justify-content:center;
  min-width:180px;
  height:44px;
  padding:0 22px;
  border-radius:5px;
  font-size:13px;
  font-weight:400;
  text-transform:uppercase;
  transition:.25s ease;
}

.community-actions a:hover{
  transform:translateY(-2px);
}

.community-actions .twitch{background:#7c3cff;}
.community-actions .discord{background:#5865f2;}
.community-actions .youtube{background:#ff2020;}

.partners {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

.partners img {
  max-width: 140px;
  height: auto;
  object-fit: contain;
  filter: grayscale(100%);
  transition: 0.3s ease;
}

.partners img:hover {
  filter: grayscale(0%);
  transform: scale(1.05);
}

.footer{
  position:relative;
  padding:50px 0;
  text-align:center;
  border-top:1px solid rgba(85, 0, 255, 0.42);
  color:#aaa;
  font-size:12px;
}

.footer img{
  width:56px;
  margin:0 auto 14px;
}

.footer span,
.footer a{
  color:var(--purple);
}

.footer nav{
  position:absolute;
  right:0;
  top:54px;
  display:grid;
  gap:8px;
  text-align:left;
}

@media(max-width:1000px){
  .boxed{
    width:calc(100% - 32px);
  }

  .mobile-toggle{
    display:block;
  }

  .main-nav{
    position:absolute;
    top:76px;
    left:0;
    right:0;
    display:none;
    flex-direction:column;
    gap:22px;
    padding:25px;
    background:#080808;
    border-bottom:1px solid var(--purple);
  }

  .main-nav.is-open{
    display:flex;
  }

  .header-icons{
    display:none;
  }

  .online-banner{
    right:16px;
  }

  .hero-logo-text{
    display:none;
  }

  .about-grid,
  .videos-layout{
    grid-template-columns:1fr;
    gap:40px;
  }

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

  .setup-grid{
    grid-template-columns:repeat(3,1fr);
  }

  .community-box{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media(max-width:640px){
  .section{
    padding:48px 0;
  }

  .brand img{
    width:58px;
    height:58px;
  }

  .nav-wrap{
    height:68px;
  }

  .main-nav{
    top:68px;
  }

.hero{
  min-height:570px;
  background-position:center right;
}

  .hero h1{
    font-size:48px;
  }

  .hero-buttons,
  .follow-bar,
  .community-actions{
    flex-direction:column;
  }

  .btn,
  .follow-bar a,
  .community-actions a{
    width:100%;
  }

  .stats,
  .feature-grid,
  .setup-grid{
    grid-template-columns:1fr;
  }

  .video-row{
    grid-template-columns:1fr;
  }

  .section-title{
    font-size:36px;
  }

  .section-title span{
    width:34px;
  }

  .featured-video h2,
  .latest-videos h2{
    font-size:45px;
  }

  .online-banner{
    top:82px;
    left:16px;
    right:16px;
    width:auto;
  }

  .footer nav{
    position:static;
    margin-top:18px;
    text-align:center;
  }
  
}
/* =========================
   STREAMING KALENDER
========================= */

.stream-calendar-section{
 margin-top:85px;
}

/* UNTERE LINIE */
.stream-calendar-section::after{
  content:"";
  position:absolute;
  bottom:0;
  left:50%;
  transform:translateX(-50%);
  width:min(var(--max),calc(100% - 40px));
  height:2px;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(115, 0, 255, 0.7) 12%,
      rgba(153, 0, 255, 0.7) 88%,
      transparent 100%
    );
}

/* KALENDER */
.stream-calendar{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:14px;
  width:100%;
  margin-top:45px;
  padding-bottom:50px;
}

/* CARD */
.stream-day{
  background:#070707;
  border:1px solid rgba(119, 0, 255, 0.7);
  border-radius:4px;
  min-height:350px;
  padding:34px 22px;
  transition:.25s ease;
}

.stream-day{
  overflow:hidden;
}

/* HOVER */
.stream-day:hover{
  transform:translateY(-4px);
  box-shadow:
    0 0 12px rgba(168,85,247,.45),
    0 0 28px rgba(168,85,247,.25);
}

/* AKTUELLER TAG */
.stream-day.active-day{
  border:2px solid var(--purple);
  box-shadow:
    0 0 12px rgba(168,85,247,.45),
    0 0 28px rgba(168,85,247,.25);
}

/* WOCHENTAG */
.stream-day h3{
  margin:0;
  text-align:center;
  color:#ffffff;
  font-family:"Gotham Cond Black",sans-serif;
  font-size:14px;
  line-height:1;
  text-transform:uppercase;
  word-break:break-word;
}

/* AKTUELLER TAG = PINK */
.stream-day.active-day h3{
  color:var(--purple);
}

/* LINIE */
.stream-day h3::after{
  content:"";
  display:block;
  width:100%;
  height:2px;
  margin:28px auto 42px;
  background:var(--purple);
}

/* EVENTS */
.calendar-event{
  text-align:center;
}

/* UHRZEIT */
.calendar-event strong{
  display:block;
  margin-bottom:12px;
  color:var(--purple);
  font-size:18px;
  font-weight:500;
  text-transform:uppercase;
}

/* BESCHREIBUNG */
.calendar-event p{
  margin:0;
  color:#ffffff;
  font-size:16px;
  line-height:1.5;
}

/* TRENNER */
.calendar-separator{
  width:100%;
  height:2px;
  margin:34px 0;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--purple),
      transparent
    );
}

/* =========================
   TABLET
========================= */

@media(max-width:1400px){

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

}

/* =========================
   MOBILE TABLET
========================= */

@media(max-width:950px){

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

}

/* =========================
   SMARTPHONE
========================= */

@media(max-width:640px){

  .stream-calendar{
    grid-template-columns:1fr;
    gap:18px;
    margin-top:34px;
  }

  .stream-day{
    min-height:auto;
    padding:28px 18px;
  }

  .stream-day h3{
    font-size:28px;
  }

  .stream-day h3::after{
    margin:24px auto 32px;
  }

  .calendar-event strong{
    font-size:17px;
  }

  .calendar-event p{
    font-size:15px;
  }

}

@keyframes twitchShake {

  0%   { transform: translateX(0); }
  10%  { transform: translateX(-4px) rotate(-1deg); }
  20%  { transform: translateX(4px) rotate(1deg); }
  30%  { transform: translateX(-4px) rotate(-1deg); }
  40%  { transform: translateX(4px) rotate(1deg); }
  50%  { transform: translateX(-3px); }
  60%  { transform: translateX(3px); }
  70%  { transform: translateX(-2px); }
  80%  { transform: translateX(2px); }
  90%  { transform: translateX(-1px); }
  100% { transform: translateX(0); }

}

.twitch-live.shake{
  animation:twitchShake 1s ease;
}

/* =========================
   IMAGE SLIDER
========================= */

.image-slider-section{
  padding:70px 0;
}

.image-slider{
  position:relative;
  width:100%;
  max-width:1000px;
  aspect-ratio:1000 / 625;
  margin:0 auto;
  overflow:hidden;
  border:0px solid rgba(144, 0, 255, 0.72);
  background:#070707;
}

/* WICHTIG */
.image-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity 1s ease;
}

/* NUR AKTIVE SLIDE SICHTBAR */
.image-slide.active{
  opacity:1;
  z-index:2;
}

.image-slide img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* Fester Spiel-Banner an der Stelle des frueheren Event-Sliders. Gleiche
   Breite und gleiches Seitenverhaeltnis wie dieser (1000/625), damit die
   Seite darunter nicht springt. Kein position:absolute wie bei .image-slide —
   der Banner steht allein und traegt die Hoehe selbst. */
.game-banner{
  display:block;
  width:100%;
  max-width:1000px;
  margin:0 auto;
  aspect-ratio:1000 / 625;
  overflow:hidden;
  background:#070707;
  transition:transform .25s ease, box-shadow .25s ease;
}
.game-banner img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.game-banner:hover{
  transform:translateY(-3px);
  box-shadow:0 10px 28px rgba(144,0,255,.35);
}