:root{--bg:#08090c;--panel:#111319;--panel2:#171a21;--line:#282c35;--text:#f6f7f9;--muted:#9ca1ad;--red:#ef343b;--green:#4ad980}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(circle at 50% -20%,rgba(220,35,42,.12),transparent 34%),var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}a{color:inherit;text-decoration:none}
.noise{position:fixed;inset:0;pointer-events:none;z-index:99;opacity:.024;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.top{height:74px;position:fixed;inset:0 0 auto;z-index:30;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:30px;padding:0 max(24px,calc((100vw - 1240px)/2));background:rgba(7,8,11,.8);backdrop-filter:blur(18px);border-bottom:1px solid rgba(255,255,255,.07)}
.brand{display:flex;gap:9px;align-items:center}.anchor{font-size:22px}.brand div{display:flex;flex-direction:column;line-height:.82}.brand b{letter-spacing:.06em;font-size:15px}.brand em{color:#ff3b43;font-family:Georgia,serif;font-size:17px;margin-left:31px;transform:rotate(-5deg)}
nav{display:flex;justify-content:center;gap:28px}nav a{font-size:13px;color:#c3c6cc}nav a:hover{color:white}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:11px 15px;border:1px solid #363a44;border-radius:10px;background:#17191f;font-weight:800;font-size:13px;transition:.2s}.btn:hover{transform:translateY(-1px);filter:brightness(1.12)}.btn.primary{background:linear-gradient(#dc353c,#a71e24);border-color:#ef4c53;box-shadow:0 0 28px rgba(239,52,59,.2)}.btn.big{padding:14px 24px}.glass{background:rgba(13,15,19,.7);backdrop-filter:blur(12px)}
.hero{min-height:810px;position:relative;display:grid;place-items:center;padding:130px 24px 72px;background:url('../assets/hero.png') center 45%/cover no-repeat}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,5,7,.58),rgba(4,5,7,.18),rgba(4,5,7,.44)),linear-gradient(0deg,#08090c 0%,rgba(8,9,12,.08) 50%,rgba(8,9,12,.2))}
.hero-content{position:relative;text-align:center;max-width:1120px}.kicker,.eyebrow,.section-head span{font-size:10px;letter-spacing:.24em;color:#ed666b;font-weight:900}.hero h1{line-height:.77;margin:24px 0 18px;text-transform:uppercase}.hero h1 span{display:block;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-size:clamp(66px,9vw,126px);letter-spacing:-.045em;text-shadow:0 8px 40px #000}.hero h1 em{display:block;text-transform:none;color:#ff3139;font-family:Georgia,serif;font-size:clamp(48px,6vw,88px);transform:rotate(-3deg);text-shadow:0 0 35px rgba(239,52,59,.28)}.lead{font-size:22px;font-weight:800;margin:0 0 8px}.sub{max-width:690px;margin:0 auto 24px;color:#c5c8cf;line-height:1.6}.actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.livebar{margin:30px auto 0;max-width:940px;display:grid;grid-template-columns:repeat(4,1fr);border:1px solid rgba(255,255,255,.11);border-radius:14px;background:rgba(10,12,15,.78);backdrop-filter:blur(14px)}.livebar>div{padding:15px 18px;display:flex;flex-direction:column;position:relative}.livebar>div+div:before{content:"";position:absolute;left:0;top:20%;bottom:20%;width:1px;background:var(--line)}.livebar b{font-size:13px}.livebar small{color:var(--muted);font-size:10px}.livebar i{width:9px;height:9px;border-radius:50%;background:var(--green);box-shadow:0 0 14px var(--green);position:absolute;left:15px;top:19px}.livebar>div:first-child{padding-left:37px}
.section{width:min(1240px,calc(100% - 40px));margin:auto;padding:78px 0}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:25px}.section-head.compact{margin-bottom:17px}.section-head h2,.panel h2{font-size:32px;letter-spacing:-.035em;margin:6px 0}.section-head p,.panel p{color:var(--muted);margin:0}
.event-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}.event-card,.panel,.features article{border:1px solid var(--line);background:linear-gradient(145deg,rgba(19,21,27,.97),rgba(11,13,17,.97));border-radius:16px}.event-card{overflow:hidden}.event-cover{height:145px;background:#111 center/cover no-repeat;position:relative}.event-cover:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#111319,transparent 70%)}.event-body{padding:19px}.tag{font-size:8px;font-weight:900;letter-spacing:.1em;color:#89e5aa;border:1px solid rgba(70,200,115,.24);background:rgba(50,160,90,.1);padding:4px 7px;border-radius:999px}.event-card h3{font-size:18px;margin:11px 0 7px}.event-card p{color:var(--muted);font-size:13px;line-height:1.5;min-height:40px}.event-meta{display:flex;gap:10px;flex-wrap:wrap;color:#858b96;font-size:10px;margin:13px 0}.event-link{color:#f06c71;font-size:12px;font-weight:800}
.split{display:grid;grid-template-columns:1.15fr .85fr;gap:14px}.panel{padding:23px}.news-list{display:grid;gap:11px}.news-item{display:grid;grid-template-columns:150px 1fr;gap:16px;border-top:1px solid var(--line);padding-top:14px}.news-img{height:100px;border-radius:10px;background:#15171d center/cover no-repeat;border:1px solid var(--line)}.news-item h3{margin:5px 0 7px}.news-item p{font-size:12px;line-height:1.5;color:var(--muted);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}.news-item a{font-size:11px;color:#f16e73;font-weight:800}.checks{list-style:none;padding:0;margin:22px 0 24px;display:grid;gap:12px}.checks li{color:#c7cad1}.checks li:before{content:"✓";color:var(--red);font-weight:900;margin-right:9px}
.features{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.features article{padding:25px}.features article>b{font-size:28px}.features h3{margin:16px 0 8px}.features p{color:var(--muted);font-size:13px;line-height:1.6;margin:0}
.cta{width:min(1120px,calc(100% - 40px));margin:30px auto 90px;padding:62px 30px;text-align:center;border:1px solid #3d2427;border-radius:20px;background:radial-gradient(circle at 50% 0,rgba(230,48,56,.15),transparent 50%),linear-gradient(#15171d,#0d0f13)}.cta h2{font-size:42px;margin:9px 0}.cta p{color:var(--muted);margin:0 0 22px}
footer{width:min(1240px,calc(100% - 40px));margin:auto;border-top:1px solid var(--line);padding:28px 0 44px;display:flex;justify-content:space-between;gap:20px;color:#858a94;font-size:11px}footer em{color:#ef4349;font-family:Georgia,serif}.loading,.empty{grid-column:1/-1;padding:35px;text-align:center;color:#777d88;border:1px dashed #2a2e36;border-radius:14px}
@media(max-width:980px){nav{display:none}.top{grid-template-columns:1fr auto}.event-grid{grid-template-columns:1fr 1fr}.features{grid-template-columns:1fr 1fr}.split{grid-template-columns:1fr}.livebar{grid-template-columns:1fr 1fr}}
@media(max-width:650px){.top>.btn{display:none}.hero{min-height:720px}.hero h1 span{font-size:54px}.hero h1 em{font-size:44px}.lead{font-size:18px}.section{width:calc(100% - 26px);padding:56px 0}.event-grid,.features{grid-template-columns:1fr}.news-item{grid-template-columns:1fr}.news-img{height:180px}.cta h2{font-size:31px}footer{flex-direction:column}}


/* ==================================================
   STUTENGASSE HERO V2
   Logo nur noch im Hintergrundbild
   ================================================== */

.hero {
  min-height: 810px;
  align-items: center;
}

.hero-content {
  width: min(1120px, 100%);
  padding-top: 330px;
}

.hero-info-box {
  width: min(720px, calc(100% - 30px));
  margin: 0 auto;
  padding: 18px 26px 20px;

  border: 1px solid rgba(255,255,255,.16);
  border-radius: 15px;

  background:
    linear-gradient(
      145deg,
      rgba(11,13,17,.82),
      rgba(8,9,12,.70)
    );

  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  box-shadow:
    0 20px 60px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.04);
}

.hero-info-box .lead {
  margin: 0 0 7px;

  font-size: 24px;
  font-weight: 850;
  letter-spacing: -.025em;

  text-shadow:
    0 2px 18px rgba(0,0,0,.75);
}

.hero-info-box .sub {
  margin: 0 auto 17px;
  max-width: 650px;

  color: #bfc3cb;
  font-size: 14px;
  line-height: 1.55;
}

.hero-info-box .actions {
  margin-top: 3px;
}

.hero-info-box .btn.big {
  min-width: 190px;
}

.livebar {
  margin-top: 16px;
}

/* Die alten Vordergrund-Logo-Regeln werden nicht mehr benötigt */
.hero .kicker,
.hero h1 {
  display: none;
}

@media (max-width: 900px) {

  .hero-content {
    padding-top: 280px;
  }

  .hero-info-box {
    width: min(680px, 96%);
  }
}

@media (max-width: 650px) {

  .hero {
    min-height: 720px;
    background-position: center top;
  }

  .hero-content {
    padding-top: 285px;
  }

  .hero-info-box {
    padding: 17px;
  }

  .hero-info-box .lead {
    font-size: 19px;
  }

  .hero-info-box .sub {
    font-size: 13px;
  }

  .hero-info-box .actions {
    flex-direction: column;
  }

  .hero-info-box .btn.big {
    width: 100%;
  }
}


/* ==================================================
   HERO V2.1 – Logo mehr freistellen
   ================================================== */

.hero-content {
  padding-top: 390px !important;
}

.hero-info-box {
  transform: translateY(30px);
}

.livebar {
  transform: translateY(30px);
  margin-top: 22px;
}

@media (max-width: 900px) {
  .hero-content {
    padding-top: 340px !important;
  }

  .hero-info-box,
  .livebar {
    transform: translateY(20px);
  }
}

@media (max-width: 650px) {
  .hero-content {
    padding-top: 325px !important;
  }

  .hero-info-box,
  .livebar {
    transform: translateY(10px);
  }
}


/* ==================================================
   HERO V2.2 – Hintergrundlogo stärker hervorheben
   ================================================== */

.hero-shade {
  background:
    linear-gradient(
      90deg,
      rgba(4,5,7,.48),
      rgba(4,5,7,.10) 38%,
      rgba(4,5,7,.30)
    ),
    linear-gradient(
      0deg,
      #08090c 0%,
      rgba(8,9,12,.05) 48%,
      rgba(8,9,12,.12)
    ) !important;
}

.hero {
  filter: saturate(1.04) contrast(1.03);
}

.hero-info-box {
  background:
    linear-gradient(
      145deg,
      rgba(11,13,17,.76),
      rgba(8,9,12,.64)
    ) !important;
}



/* ==================================================
   HERO V2.3 – Feinschliff
   ================================================== */

.hero-info-box {
  width: min(640px, calc(100% - 40px)) !important;
  padding: 16px 22px 18px !important;
  border-radius: 14px !important;

  box-shadow:
    0 16px 45px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.035) !important;
}

.hero-info-box .lead {
  font-size: 21px !important;
}

.hero-info-box .sub {
  font-size: 13px !important;
  max-width: 570px !important;
}

.hero-info-box .btn.big {
  min-width: 170px !important;
  padding: 12px 20px !important;
}

.livebar {
  max-width: 780px !important;
  border-radius: 12px !important;
  background: rgba(10,12,15,.68) !important;
  border-color: rgba(255,255,255,.08) !important;

  box-shadow:
    0 12px 35px rgba(0,0,0,.24);
}

.livebar > div {
  padding: 11px 14px !important;
}

.livebar b {
  font-size: 12px !important;
}

.livebar small {
  font-size: 9px !important;
  opacity: .78;
}

.livebar i {
  width: 7px !important;
  height: 7px !important;
  top: 15px !important;
  left: 12px !important;
}

.livebar > div:first-child {
  padding-left: 30px !important;
}

@media (max-width: 650px) {
  .hero-info-box {
    width: min(94%, 640px) !important;
  }

  .livebar {
    max-width: 94% !important;
  }
}



/* ==================================================
   CONTENT V2 – Events + News im Kiez-Look
   ================================================== */

.section {
  padding-top: 68px;
  padding-bottom: 68px;
}

.section-head {
  margin-bottom: 18px;
}

.section-head h2,
.panel h2 {
  font-size: 28px !important;
}

.event-grid {
  gap: 12px !important;
}

.event-card {
  border-radius: 13px !important;
  background:
    linear-gradient(
      145deg,
      rgba(16,18,23,.98),
      rgba(9,11,14,.98)
    ) !important;

  box-shadow:
    0 14px 36px rgba(0,0,0,.18);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.event-card:hover {
  transform: translateY(-3px);
  border-color: rgba(239,52,59,.28) !important;

  box-shadow:
    0 18px 44px rgba(0,0,0,.28),
    0 0 0 1px rgba(239,52,59,.06);
}

.event-cover {
  height: 125px !important;
  filter:
    saturate(.88)
    contrast(1.05);
}

.event-cover::after {
  background:
    linear-gradient(
      0deg,
      rgba(13,15,19,.98) 0%,
      rgba(13,15,19,.45) 42%,
      transparent 78%
    ) !important;
}

.event-body {
  padding: 15px 16px 16px !important;
}

.event-card h3 {
  font-size: 16px !important;
  margin: 9px 0 6px !important;
  letter-spacing: -.015em;
}

.event-card p {
  min-height: auto !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
  margin-bottom: 10px !important;
}

.event-meta {
  margin: 9px 0 10px !important;
  gap: 8px !important;
  font-size: 9px !important;
}

.event-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;

  color: #f26b71 !important;
  font-size: 11px !important;
}

.event-link:hover {
  color: #ff979b !important;
}

/* ---------------- NEWS ---------------- */

.news-panel {
  overflow: hidden;
}

.news-list {
  gap: 0 !important;
}

.news-item {
  grid-template-columns: 125px 1fr !important;
  gap: 14px !important;

  padding: 13px 0 !important;
  border-top: 1px solid rgba(255,255,255,.06) !important;

  transition:
    background .18s ease,
    transform .18s ease;
}

.news-item:hover {
  transform: translateX(3px);
}

.news-img {
  height: 82px !important;
  border-radius: 9px !important;

  filter:
    saturate(.9)
    contrast(1.04);

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025);
}

.news-item h3 {
  font-size: 15px !important;
  margin: 5px 0 5px !important;
}

.news-item p {
  font-size: 11px !important;
  line-height: 1.45 !important;
  -webkit-line-clamp: 2 !important;
}

.news-item a {
  display: inline-block;
  margin-top: 5px;

  color: #f16c72 !important;
  font-size: 10px !important;
}

/* ---------------- PANEL CLEANUP ---------------- */

.panel {
  border-radius: 14px !important;
  background:
    linear-gradient(
      145deg,
      rgba(17,19,24,.96),
      rgba(10,12,16,.97)
    ) !important;

  box-shadow:
    0 14px 40px rgba(0,0,0,.16);
}

.panel .eyebrow,
.section-head span {
  letter-spacing: .20em !important;
  font-size: 9px !important;
}

/* ---------------- EMPTY STATES ---------------- */

.loading,
.empty {
  padding: 26px !important;
  border-radius: 12px !important;
  background:
    linear-gradient(
      145deg,
      rgba(14,16,20,.66),
      rgba(9,10,13,.55)
    );
}

/* ---------------- MOBILE ---------------- */

@media (max-width: 650px) {

  .news-item {
    grid-template-columns: 100px 1fr !important;
  }

  .news-img {
    height: 72px !important;
  }

  .event-cover {
    height: 115px !important;
  }

  .event-body {
    padding: 14px !important;
  }
}



/* ==================================================
   COMMUNITY V2 – einheitlicher Kiez-Look
   ================================================== */

.features {
  gap: 12px !important;
}

.features article {
  position: relative;
  overflow: hidden;

  padding: 21px 20px !important;

  border-radius: 13px !important;

  background:
    linear-gradient(
      145deg,
      rgba(16,18,23,.98),
      rgba(9,11,14,.98)
    ) !important;

  box-shadow:
    0 14px 36px rgba(0,0,0,.18);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.features article::before {
  content: "";

  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;

  width: 3px;

  background:
    linear-gradient(
      180deg,
      #ef343b,
      rgba(239,52,59,.18)
    );

  opacity: .8;
}

.features article:hover {
  transform: translateY(-3px);

  border-color:
    rgba(239,52,59,.28) !important;

  box-shadow:
    0 18px 44px rgba(0,0,0,.28),
    0 0 0 1px rgba(239,52,59,.05);
}

.features article > b {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 38px;
  height: 38px;

  border-radius: 10px;

  background:
    rgba(239,52,59,.08);

  border:
    1px solid rgba(239,52,59,.14);

  font-size: 20px !important;
}

.features h3 {
  margin:
    14px 0 7px !important;

  font-size:
    16px !important;

  letter-spacing:
    -.015em;
}

.features p {
  font-size:
    12px !important;

  line-height:
    1.5 !important;

  color:
    #999faa !important;
}

/* ---------------- CTA ---------------- */

.cta {
  margin-top:
    38px !important;

  padding:
    50px 28px !important;

  border-radius:
    17px !important;

  background:
    radial-gradient(
      circle at 50% 0,
      rgba(239,52,59,.13),
      transparent 46%
    ),
    linear-gradient(
      145deg,
      rgba(17,19,24,.98),
      rgba(9,11,14,.98)
    ) !important;

  box-shadow:
    0 20px 55px rgba(0,0,0,.22);
}

.cta h2 {
  font-size:
    36px !important;

  letter-spacing:
    -.035em;
}

.cta p {
  font-size:
    13px !important;
}

/* ---------------- FOOTER ---------------- */

footer {
  border-top:
    1px solid rgba(255,255,255,.06) !important;

  color:
    #747983 !important;
}

footer b {
  color:
    #d9dce2;
}

footer a:hover {
  color:
    #f16c72;
}

/* ---------------- MOBILE ---------------- */

@media (max-width: 650px) {

  .features article {
    padding:
      18px !important;
  }

  .cta {
    padding:
      40px 20px !important;
  }

  .cta h2 {
    font-size:
      29px !important;
  }
}



/* ==================================================
   STUTENGASSE WEBSITE V2 – COMPLETE POLISH
   ================================================== */


/* ---------------- HEADER ---------------- */

.top {
  transition:
    background .25s ease,
    border-color .25s ease,
    box-shadow .25s ease;
}

.top.scrolled {
  background:
    rgba(7,8,11,.94) !important;

  border-bottom-color:
    rgba(239,52,59,.16) !important;

  box-shadow:
    0 12px 40px rgba(0,0,0,.28);
}

.top nav a {
  position: relative;

  padding:
    27px 0 25px;

  transition:
    color .18s ease;
}

.top nav a::after {
  content: "";

  position: absolute;

  left: 50%;
  right: 50%;
  bottom: 17px;

  height: 2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      #ef343b,
      transparent
    );

  opacity: 0;

  transition:
    left .20s ease,
    right .20s ease,
    opacity .20s ease;
}

.top nav a:hover::after,
.top nav a.active::after {
  left: 0;
  right: 0;
  opacity: 1;
}

.top nav a.active {
  color:
    #fff;
}

.brand {
  transition:
    transform .18s ease;
}

.brand:hover {
  transform:
    translateY(-1px);
}


/* ---------------- MOBILE MENU ---------------- */

.mobile-menu {
  display: none;

  width: 42px;
  height: 42px;

  border:
    1px solid rgba(255,255,255,.10);

  border-radius:
    10px;

  background:
    rgba(18,20,25,.82);

  cursor:
    pointer;

  padding:
    10px;

  flex-direction:
    column;

  justify-content:
    center;

  gap:
    5px;
}

.mobile-menu span {
  display: block;

  width: 100%;
  height: 2px;

  border-radius:
    2px;

  background:
    #f3f4f6;

  transition:
    transform .2s ease,
    opacity .2s ease;
}

.mobile-menu.open span:nth-child(1) {
  transform:
    translateY(7px)
    rotate(45deg);
}

.mobile-menu.open span:nth-child(2) {
  opacity:
    0;
}

.mobile-menu.open span:nth-child(3) {
  transform:
    translateY(-7px)
    rotate(-45deg);
}


/* ---------------- HERO DETAILS ---------------- */

.hero {
  position:
    relative;
}

.hero::after {
  content: "";

  position:
    absolute;

  left:
    0;
  right:
    0;
  bottom:
    -1px;

  height:
    170px;

  pointer-events:
    none;

  background:
    linear-gradient(
      0deg,
      #08090c,
      transparent
    );
}

.scroll-cue {
  display:
    inline-flex;

  flex-direction:
    column;

  align-items:
    center;

  gap:
    4px;

  margin-top:
    47px;

  color:
    rgba(255,255,255,.48);

  font-size:
    9px;

  letter-spacing:
    .14em;

  text-transform:
    uppercase;

  position:
    relative;

  z-index:
    4;

  transition:
    color .18s ease;
}

.scroll-cue:hover {
  color:
    #fff;
}

.scroll-cue i {
  font-size:
    18px;

  font-style:
    normal;

  animation:
    stutengasseBounce 1.7s ease-in-out infinite;
}

@keyframes stutengasseBounce {
  0%,100% {
    transform:
      translateY(0);
  }

  50% {
    transform:
      translateY(6px);
  }
}


/* ---------------- SECTIONS ---------------- */

.section {
  position:
    relative;
}

.section + .section::before {
  content: "";

  position:
    absolute;

  top:
    0;

  left:
    8%;

  right:
    8%;

  height:
    1px;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.07),
      transparent
    );
}

.section-head h2 {
  position:
    relative;
}

.section-head h2::after {
  content: "";

  display:
    block;

  width:
    34px;

  height:
    2px;

  margin-top:
    10px;

  background:
    #ef343b;

  box-shadow:
    0 0 14px rgba(239,52,59,.38);
}


/* ---------------- EVENT ACCENTS ---------------- */

.event-card {
  position:
    relative;
}

.event-card::before {
  content: "";

  position:
    absolute;

  left:
    0;
  right:
    0;
  top:
    0;

  height:
    2px;

  opacity:
    0;

  background:
    linear-gradient(
      90deg,
      transparent,
      #ef343b,
      transparent
    );

  transition:
    opacity .18s ease;
}

.event-card:hover::before {
  opacity:
    1;
}

.event-link::after {
  content:
    "→";

  margin-left:
    3px;

  transition:
    transform .18s ease;
}

.event-link:hover::after {
  transform:
    translateX(4px);
}


/* ---------------- NEWS ---------------- */

.news-item {
  border-radius:
    9px;

  padding-left:
    8px !important;

  padding-right:
    8px !important;
}

.news-item:hover {
  background:
    rgba(255,255,255,.018);
}

.news-item:hover .news-img {
  filter:
    saturate(1.04)
    contrast(1.06);

  transform:
    scale(1.015);
}

.news-img {
  transition:
    filter .20s ease,
    transform .20s ease;
}


/* ---------------- COMMUNITY ---------------- */

.features article::after {
  content: "";

  position:
    absolute;

  right:
    -35px;
  top:
    -35px;

  width:
    100px;
  height:
    100px;

  border-radius:
    50%;

  background:
    radial-gradient(
      circle,
      rgba(239,52,59,.08),
      transparent 70%
    );

  pointer-events:
    none;
}

.features article:hover > b {
  transform:
    scale(1.08);

  border-color:
    rgba(239,52,59,.30);
}

.features article > b {
  transition:
    transform .18s ease,
    border-color .18s ease;
}


/* ---------------- CTA ---------------- */

.cta {
  position:
    relative;

  overflow:
    hidden;
}

.cta::before {
  content: "";

  position:
    absolute;

  width:
    420px;
  height:
    420px;

  left:
    50%;
  top:
    -330px;

  transform:
    translateX(-50%);

  border-radius:
    50%;

  background:
    rgba(239,52,59,.11);

  filter:
    blur(80px);

  pointer-events:
    none;
}

.cta > * {
  position:
    relative;

  z-index:
    2;
}


/* ---------------- BUTTON POLISH ---------------- */

.btn {
  position:
    relative;

  overflow:
    hidden;
}

.btn::before {
  content: "";

  position:
    absolute;

  top:
    0;
  bottom:
    0;
  left:
    -80%;

  width:
    45%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,.12),
      transparent
    );

  transform:
    skewX(-20deg);

  transition:
    left .45s ease;
}

.btn:hover::before {
  left:
    140%;
}


/* ---------------- SCROLL REVEAL ---------------- */

.reveal {
  opacity:
    0;

  transform:
    translateY(22px);

  transition:
    opacity .55s ease,
    transform .55s ease;
}

.reveal.visible {
  opacity:
    1;

  transform:
    translateY(0);
}


/* ---------------- BACK TO TOP ---------------- */

.back-top {
  position:
    fixed;

  right:
    22px;
  bottom:
    22px;

  width:
    42px;
  height:
    42px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid rgba(239,52,59,.28);

  border-radius:
    12px;

  background:
    rgba(15,17,22,.90);

  backdrop-filter:
    blur(12px);

  color:
    #ef6c71;

  font-size:
    18px;

  cursor:
    pointer;

  opacity:
    0;

  visibility:
    hidden;

  transform:
    translateY(10px);

  transition:
    opacity .2s ease,
    transform .2s ease,
    visibility .2s ease,
    background .2s ease;

  z-index:
    40;
}

.back-top.visible {
  opacity:
    1;

  visibility:
    visible;

  transform:
    translateY(0);
}

.back-top:hover {
  background:
    rgba(239,52,59,.12);
}


/* ---------------- FOOTER ---------------- */

footer {
  position:
    relative;
}

footer::before {
  content: "";

  position:
    absolute;

  left:
    0;

  top:
    -1px;

  width:
    70px;
  height:
    1px;

  background:
    #ef343b;

  box-shadow:
    0 0 13px rgba(239,52,59,.35);
}


/* ---------------- DESKTOP AMBIENT ---------------- */

@media (min-width: 981px) {

  #events::after {
    content: "";

    position:
      absolute;

    right:
      -140px;

    top:
      100px;

    width:
      300px;

    height:
      300px;

    border-radius:
      50%;

    background:
      rgba(239,52,59,.04);

    filter:
      blur(70px);

    pointer-events:
      none;
  }

}


/* ---------------- MOBILE ---------------- */

@media (max-width: 980px) {

  .mobile-menu {
    display:
      flex;
  }

  .desktop-discord {
    display:
      none !important;
  }

  .top nav {
    display:
      none;

    position:
      absolute;

    left:
      14px;

    right:
      14px;

    top:
      64px;

    flex-direction:
      column;

    gap:
      2px;

    padding:
      11px;

    border:
      1px solid rgba(255,255,255,.09);

    border-radius:
      13px;

    background:
      rgba(8,9,12,.97);

    backdrop-filter:
      blur(20px);

    box-shadow:
      0 20px 45px rgba(0,0,0,.45);
  }

  .top nav.open {
    display:
      flex;
  }

  .top nav a {
    padding:
      12px 14px;

    border-radius:
      8px;
  }

  .top nav a:hover,
  .top nav a.active {
    background:
      rgba(239,52,59,.07);
  }

  .top nav a::after {
    display:
      none;
  }

}

@media (max-width: 650px) {

  .scroll-cue {
    margin-top:
      34px;
  }

  .back-top {
    right:
      14px;

    bottom:
      14px;
  }

}


/* ---------------- REDUCED MOTION ---------------- */

@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    scroll-behavior:
      auto !important;

    animation-duration:
      .01ms !important;

    animation-iteration-count:
      1 !important;

    transition-duration:
      .01ms !important;
  }

}



/* ==================================================
   NEWS V3 – Featured + kompakte Folgeposts
   ================================================== */

.news-featured-card {
  overflow: hidden;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:
    13px;

  background:
    linear-gradient(
      145deg,
      rgba(18,20,25,.98),
      rgba(10,12,16,.98)
    );

  margin-bottom:
    14px;

  box-shadow:
    0 16px 42px rgba(0,0,0,.18);
}

.news-featured-image {
  height:
    210px;

  background:
    #111 center/cover no-repeat;

  position:
    relative;
}

.news-featured-image::after {
  content: "";

  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      0deg,
      rgba(12,14,18,.98),
      rgba(12,14,18,.15) 58%,
      transparent
    );
}

.news-featured-body {
  padding:
    18px 19px 20px;
}

.news-featured-meta {
  display:
    flex;

  gap:
    10px;

  align-items:
    center;

  flex-wrap:
    wrap;

  margin-bottom:
    9px;

  color:
    #7f8590;

  font-size:
    10px;
}

.news-featured-body h3 {
  margin:
    0 0 8px;

  font-size:
    21px;

  letter-spacing:
    -.025em;
}

.news-featured-body p {
  margin:
    0 0 14px;

  color:
    #aeb3bd;

  font-size:
    13px;

  line-height:
    1.55;

  display:
    -webkit-box;

  -webkit-line-clamp:
    4;

  -webkit-box-orient:
    vertical;

  overflow:
    hidden;
}

.news-featured-link {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    5px;

  color:
    #f16c72;

  font-size:
    11px;

  font-weight:
    800;
}

.news-featured-link::after {
  content:
    "→";

  transition:
    transform .18s ease;
}

.news-featured-link:hover::after {
  transform:
    translateX(4px);
}


/* ---------------- FOLLOW-UP NEWS ---------------- */

#news-list {
  display:
    grid;

  gap:
    0;
}

.news-compact-item {
  display:
    grid;

  grid-template-columns:
    92px 1fr;

  gap:
    13px;

  align-items:
    center;

  padding:
    12px 4px;

  border-top:
    1px solid rgba(255,255,255,.06);

  border-radius:
    8px;

  transition:
    background .18s ease,
    transform .18s ease;
}

.news-compact-item:hover {
  background:
    rgba(255,255,255,.018);

  transform:
    translateX(3px);
}

.news-compact-image {
  width:
    92px;

  height:
    64px;

  border-radius:
    8px;

  background:
    #15171d center/cover no-repeat;

  border:
    1px solid rgba(255,255,255,.06);
}

.news-compact-meta {
  display:
    flex;

  gap:
    8px;

  align-items:
    center;

  color:
    #797f8a;

  font-size:
    9px;
}

.news-compact-content h4 {
  margin:
    5px 0 4px;

  font-size:
    14px;
}

.news-compact-content p {
  margin:
    0;

  color:
    #979ca7;

  font-size:
    11px;

  line-height:
    1.4;

  display:
    -webkit-box;

  -webkit-line-clamp:
    2;

  -webkit-box-orient:
    vertical;

  overflow:
    hidden;
}

.news-compact-content a {
  display:
    inline-block;

  margin-top:
    5px;

  color:
    #ed6c71;

  font-size:
    9px;

  font-weight:
    800;
}

@media (max-width: 650px) {

  .news-featured-image {
    height:
      170px;
  }

  .news-featured-body h3 {
    font-size:
      18px;
  }

  .news-compact-item {
    grid-template-columns:
      78px 1fr;
  }

  .news-compact-image {
    width:
      78px;

    height:
      58px;
  }
}



/* ==================================================
   EVENTS V3 – Kiez Event Cards
   ================================================== */

.event-card {
  display: grid;
  grid-template-columns: 86px 1fr;
  overflow: hidden;
}

.event-datebox {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  background:
    linear-gradient(
      180deg,
      rgba(24,26,32,.98),
      rgba(12,14,18,.98)
    );

  border-right:
    1px solid rgba(255,255,255,.06);

  position: relative;
}

.event-datebox::after {
  content: "";

  position: absolute;

  right:
    -1px;

  top:
    18%;

  bottom:
    18%;

  width:
    2px;

  background:
    linear-gradient(
      180deg,
      transparent,
      #ef343b,
      transparent
    );

  opacity:
    .55;
}

.event-datebox .day {
  font-size:
    31px;

  font-weight:
    900;

  line-height:
    1;
}

.event-datebox .month {
  margin-top:
    5px;

  font-size:
    9px;

  letter-spacing:
    .18em;

  color:
    #f06469;

  font-weight:
    900;
}

.event-datebox .weekday {
  margin-top:
    5px;

  font-size:
    9px;

  color:
    #777d87;
}

.event-main {
  min-width:
    0;
}

.event-cover {
  height:
    120px !important;

  border-bottom:
    1px solid rgba(255,255,255,.05);
}

.event-body {
  padding:
    15px 16px 16px !important;
}

.event-title-row {
  display:
    flex;

  justify-content:
    space-between;

  gap:
    12px;

  align-items:
    flex-start;
}

.event-card h3 {
  margin:
    8px 0 5px !important;
}

.event-status {
  flex-shrink:
    0;

  font-size:
    8px;

  letter-spacing:
    .08em;

  color:
    #9ce9b5;

  border:
    1px solid rgba(74,217,128,.22);

  background:
    rgba(74,217,128,.08);

  border-radius:
    999px;

  padding:
    4px 7px;
}

.event-info-grid {
  display:
    grid;

  grid-template-columns:
    repeat(2,minmax(0,1fr));

  gap:
    7px 10px;

  margin:
    11px 0 12px;
}

.event-info {
  display:
    flex;

  align-items:
    center;

  gap:
    6px;

  min-width:
    0;

  color:
    #8e949f;

  font-size:
    10px;
}

.event-info strong {
  color:
    #cfd2d8;

  font-weight:
    700;
}

.event-footer {
  display:
    flex;

  align-items:
    center;

  justify-content:
    space-between;

  gap:
    10px;

  padding-top:
    10px;

  border-top:
    1px solid rgba(255,255,255,.05);
}

.event-interested {
  color:
    #8b909a;

  font-size:
    9px;
}

.event-link {
  font-size:
    10px !important;

  padding:
    7px 10px;

  border:
    1px solid rgba(239,52,59,.20);

  border-radius:
    8px;

  background:
    rgba(239,52,59,.06);
}

.event-link:hover {
  background:
    rgba(239,52,59,.12);
}

@media (max-width: 980px) {

  .event-grid {
    grid-template-columns:
      1fr 1fr;
  }

}

@media (max-width: 650px) {

  .event-grid {
    grid-template-columns:
      1fr;
  }

  .event-card {
    grid-template-columns:
      72px 1fr;
  }

  .event-datebox .day {
    font-size:
      27px;
  }

  .event-info-grid {
    grid-template-columns:
      1fr;
  }

}



/* ==================================================
   COMMUNITY / TEAM V1
   ================================================== */

.team-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3, minmax(0, 1fr));

  gap:
    14px;
}

.team-card {
  position:
    relative;

  overflow:
    hidden;

  min-height:
    230px;

  padding:
    22px;

  border:
    1px solid var(--line);

  border-radius:
    15px;

  background:
    linear-gradient(
      145deg,
      rgba(17,19,24,.98),
      rgba(9,11,14,.98)
    );

  box-shadow:
    0 14px 38px rgba(0,0,0,.18);

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.team-card::before {
  content:
    "";

  position:
    absolute;

  top:
    0;

  left:
    0;

  right:
    0;

  height:
    2px;

  background:
    linear-gradient(
      90deg,
      transparent,
      var(--team-accent, #ef343b),
      transparent
    );

  opacity:
    .7;
}

.team-card::after {
  content:
    "";

  position:
    absolute;

  width:
    150px;

  height:
    150px;

  right:
    -60px;

  top:
    -60px;

  border-radius:
    50%;

  background:
    var(--team-glow, rgba(239,52,59,.09));

  filter:
    blur(38px);

  pointer-events:
    none;
}

.team-card:hover {
  transform:
    translateY(-4px);

  border-color:
    color-mix(
      in srgb,
      var(--team-accent, #ef343b) 28%,
      var(--line)
    );

  box-shadow:
    0 20px 48px rgba(0,0,0,.30);
}

.team-avatar {
  width:
    46px;

  height:
    46px;

  display:
    grid;

  place-items:
    center;

  margin-bottom:
    15px;

  border:
    1px solid rgba(255,255,255,.08);

  border-radius:
    12px;

  background:
    rgba(255,255,255,.035);

  font-size:
    23px;

  position:
    relative;

  z-index:
    2;
}

.team-role {
  color:
    var(--team-accent, #ef6469);

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    .18em;

  margin-bottom:
    6px;

  position:
    relative;

  z-index:
    2;
}

.team-card h3 {
  margin:
    0 0 8px;

  font-size:
    18px;

  letter-spacing:
    -.02em;

  position:
    relative;

  z-index:
    2;
}

.team-card p {
  margin:
    0;

  min-height:
    58px;

  color:
    #969ca7;

  font-size:
    12px;

  line-height:
    1.5;

  position:
    relative;

  z-index:
    2;
}

.team-status {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    6px;

  margin-top:
    14px;

  padding:
    5px 8px;

  border:
    1px solid rgba(255,255,255,.07);

  border-radius:
    999px;

  background:
    rgba(255,255,255,.025);

  color:
    #7f858f;

  font-size:
    9px;

  position:
    relative;

  z-index:
    2;
}

.team-status.online {
  color:
    #8fe2aa;

  border-color:
    rgba(74,217,128,.16);

  background:
    rgba(74,217,128,.06);
}


/* Rollenfarben */

.team-card.boss {
  --team-accent:
    #f0b84a;

  --team-glow:
    rgba(240,184,74,.10);
}

.team-card.police {
  --team-accent:
    #5b9cff;

  --team-glow:
    rgba(91,156,255,.10);
}

.team-card.door {
  --team-accent:
    #ef343b;

  --team-glow:
    rgba(239,52,59,.10);
}

.team-card.captain {
  --team-accent:
    #c18cff;

  --team-glow:
    rgba(193,140,255,.10);
}

.team-card.player {
  --team-accent:
    #58d88e;

  --team-glow:
    rgba(88,216,142,.10);
}

.team-card.guest {
  --team-accent:
    #e58f42;

  --team-glow:
    rgba(229,143,66,.10);
}


/* Mobile */

@media (max-width: 980px) {

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

}

@media (max-width: 650px) {

  .team-grid {
    grid-template-columns:
      1fr;
  }

  .team-card {
    min-height:
      auto;
  }

}



/* ==================================================
   LIVE DISCORD TEAM
   ================================================== */

.member-card {
  position: relative;
  overflow: hidden;
  min-height: 250px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background:
    linear-gradient(
      145deg,
      rgba(17,19,24,.98),
      rgba(9,11,14,.98)
    );
  box-shadow:
    0 14px 38px rgba(0,0,0,.18);
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.member-card::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 2px;
  background:
    linear-gradient(
      90deg,
      transparent,
      var(--member-color, #ef343b),
      transparent
    );
}

.member-card:hover {
  transform: translateY(-4px);
  border-color: var(--member-color, #ef343b);
  box-shadow: 0 20px 48px rgba(0,0,0,.30);
}

.member-avatar {
  width: 76px;
  height: 76px;
  border-radius: 18px;
  object-fit: cover;
  border: 2px solid var(--member-color, #ef343b);
  box-shadow: 0 8px 28px rgba(0,0,0,.34);
  margin-bottom: 16px;
}

.member-role {
  color: var(--member-color, #ef6469);
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  margin-bottom: 7px;
}

.member-card h3 {
  margin: 0 0 7px;
  font-size: 20px;
}

.member-card p {
  margin: 0;
  color: #949aa5;
  font-size: 12px;
  line-height: 1.5;
}

.member-badge {
  display: inline-flex;
  margin-top: 16px;
  padding: 5px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.07);
  background: rgba(255,255,255,.025);
  color: #8d939d;
  font-size: 9px;
}



/* ==================================================
   TEAM GROUPS V2
   ================================================== */

.team-groups {
  display:
    grid;

  gap:
    34px;
}

.team-group {
  position:
    relative;
}

.team-group + .team-group {
  padding-top:
    28px;

  border-top:
    1px solid rgba(255,255,255,.06);
}

.team-group-head {
  margin-bottom:
    14px;
}

.team-group-head span {
  color:
    #ef6469;

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    .18em;
}

.team-group-head h3 {
  margin:
    5px 0 0;

  font-size:
    20px;

  letter-spacing:
    -.025em;
}

/* Wenige Karten nicht verloren aussehen lassen */

.team-grid {
  grid-template-columns:
    repeat(auto-fit, minmax(260px, 1fr)) !important;
}

.team-grid > .member-card:only-child {
  max-width:
    420px;
}

@media (max-width: 650px) {

  .team-grid {
    grid-template-columns:
      1fr !important;
  }

  .team-grid > .member-card:only-child {
    max-width:
      none;
  }

}



/* ==================================================
   COMMUNITY HIGHLIGHTS
   ================================================== */

.highlight-grid {
  display:
    grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:
    12px;
}

.highlight-card {
  position:
    relative;

  overflow:
    hidden;

  min-height:
    235px;

  border:
    1px solid var(--line);

  border-radius:
    14px;

  background:
    #101217;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.highlight-card:hover {
  transform:
    translateY(-4px);

  border-color:
    rgba(239,52,59,.30);

  box-shadow:
    0 20px 45px rgba(0,0,0,.32);
}

.highlight-media {
  width:
    100%;

  height:
    190px;

  object-fit:
    cover;

  display:
    block;

  background:
    #0b0d11;
}

.highlight-overlay {
  position:
    absolute;

  inset:
    auto 0 0;

  padding:
    35px 14px 13px;

  background:
    linear-gradient(
      0deg,
      rgba(8,9,12,.98),
      rgba(8,9,12,.72) 55%,
      transparent
    );
}

.highlight-top {
  display:
    flex;

  justify-content:
    space-between;

  align-items:
    center;

  gap:
    8px;

  margin-bottom:
    5px;
}

.highlight-type {
  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .12em;

  color:
    #f36b71;
}

.highlight-date {
  font-size:
    8px;

  color:
    #767c87;
}

.highlight-author {
  font-size:
    13px;

  font-weight:
    800;
}

.highlight-text {
  margin-top:
    4px;

  color:
    #979da8;

  font-size:
    10px;

  white-space:
    nowrap;

  overflow:
    hidden;

  text-overflow:
    ellipsis;
}

.highlight-card video {
  pointer-events:
    none;
}

.highlight-play {
  position:
    absolute;

  left:
    50%;

  top:
    82px;

  transform:
    translate(-50%,-50%);

  width:
    44px;

  height:
    44px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid rgba(255,255,255,.18);

  border-radius:
    50%;

  background:
    rgba(8,9,12,.75);

  backdrop-filter:
    blur(10px);

  font-size:
    16px;

  box-shadow:
    0 10px 30px rgba(0,0,0,.35);
}

@media (max-width:980px) {

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

}

@media (max-width:650px) {

  .highlight-grid {
    grid-template-columns:
      1fr;
  }

}



/* ==================================================
   HIGHLIGHTS V2 – Featured Layout
   ================================================== */

.highlight-featured {
  display:
    grid;

  grid-template-columns:
    1.55fr .9fr;

  gap:
    12px;
}

.highlight-hero,
.highlight-side,
.highlight-more-card {
  position:
    relative;

  overflow:
    hidden;

  border:
    1px solid var(--line);

  border-radius:
    14px;

  background:
    #0f1116;

  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.highlight-hero:hover,
.highlight-side:hover,
.highlight-more-card:hover {
  transform:
    translateY(-3px);

  border-color:
    rgba(239,52,59,.30);

  box-shadow:
    0 18px 45px rgba(0,0,0,.32);
}

.highlight-hero {
  min-height:
    400px;
}

.highlight-hero .highlight-media {
  height:
    400px;
}

.highlight-side-wrap {
  display:
    grid;

  grid-template-rows:
    repeat(2, 1fr);

  gap:
    12px;
}

.highlight-side {
  min-height:
    194px;
}

.highlight-side .highlight-media {
  height:
    194px;
}

.highlight-more {
  display:
    grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  gap:
    12px;

  margin-top:
    12px;
}

.highlight-more-card {
  min-height:
    190px;
}

.highlight-more-card .highlight-media {
  height:
    190px;
}

.highlight-media {
  width:
    100%;

  object-fit:
    cover;

  display:
    block;

  background:
    #0b0d11;
}

.highlight-hero::after,
.highlight-side::after,
.highlight-more-card::after {
  content:
    "";

  position:
    absolute;

  inset:
    0;

  pointer-events:
    none;

  background:
    linear-gradient(
      0deg,
      rgba(7,8,11,.92) 0%,
      rgba(7,8,11,.28) 42%,
      transparent 72%
    );
}

.highlight-overlay {
  position:
    absolute;

  left:
    0;
  right:
    0;
  bottom:
    0;

  z-index:
    3;

  padding:
    18px;
}

.highlight-hero .highlight-overlay {
  padding:
    22px;
}

.highlight-type {
  display:
    inline-flex;

  margin-bottom:
    6px;

  color:
    #ff7277;

  font-size:
    8px;

  font-weight:
    900;

  letter-spacing:
    .13em;

  text-transform:
    uppercase;
}

.highlight-author {
  font-size:
    15px;

  font-weight:
    850;
}

.highlight-hero .highlight-author {
  font-size:
    20px;
}

.highlight-text {
  margin-top:
    5px;

  color:
    #b0b5be;

  font-size:
    11px;

  line-height:
    1.45;

  display:
    -webkit-box;

  -webkit-line-clamp:
    2;

  -webkit-box-orient:
    vertical;

  overflow:
    hidden;
}

.highlight-date {
  color:
    #777d87;

  font-size:
    9px;

  margin-top:
    6px;
}

.highlight-play {
  position:
    absolute;

  left:
    50%;
  top:
    50%;

  z-index:
    4;

  transform:
    translate(-50%,-50%);

  width:
    54px;

  height:
    54px;

  display:
    grid;

  place-items:
    center;

  border:
    1px solid rgba(255,255,255,.22);

  border-radius:
    50%;

  background:
    rgba(8,9,12,.72);

  backdrop-filter:
    blur(12px);

  font-size:
    18px;

  box-shadow:
    0 10px 30px rgba(0,0,0,.35);

  transition:
    transform .18s ease,
    background .18s ease;
}

.highlight-hero:hover .highlight-play,
.highlight-side:hover .highlight-play,
.highlight-more-card:hover .highlight-play {
  transform:
    translate(-50%,-50%) scale(1.08);

  background:
    rgba(239,52,59,.20);
}

.highlight-more-title {
  margin-top:
    22px;

  margin-bottom:
    10px;

  color:
    #858b95;

  font-size:
    9px;

  font-weight:
    900;

  letter-spacing:
    .15em;
}

@media (max-width:980px) {

  .highlight-featured {
    grid-template-columns:
      1fr;
  }

  .highlight-side-wrap {
    grid-template-columns:
      1fr 1fr;

    grid-template-rows:
      none;
  }

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

}

@media (max-width:650px) {

  .highlight-hero,
  .highlight-hero .highlight-media {
    min-height:
      290px;

    height:
      290px;
  }

  .highlight-side-wrap {
    grid-template-columns:
      1fr;
  }

  .highlight-more {
    grid-template-columns:
      1fr;
  }

}



/* ==================================================
   EVENTS LIVE V4
   ================================================== */

.event-live-card {
  position: relative;
  display: grid;
  grid-template-columns: 74px 1fr auto;
  align-items: center;
  gap: 18px;
  min-height: 128px;
  padding: 18px;
  margin-bottom: 10px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #101217;
}

.event-live-cover {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: .35;
  pointer-events: none;
}

.event-live-card > *:not(.event-live-cover) {
  position: relative;
  z-index: 2;
}

.event-datebox {
  width: 64px;
  min-height: 68px;
  display: grid;
  place-content: center;
  text-align: center;
  border: 1px solid rgba(239,52,59,.22);
  border-radius: 12px;
  background: rgba(239,52,59,.06);
}

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

.event-datebox span {
  margin-top: 3px;
  color: #8b909a;
  font-size: 9px;
  text-transform: uppercase;
}

.event-live-body h3 {
  margin: 5px 0 5px;
  font-size: 18px;
}

.event-live-body p {
  margin: 0 0 9px;
  color: #9ba0aa;
  font-size: 11px;
}

.event-live-top {
  display: flex;
  align-items: center;
  gap: 8px;
}

.event-status {
  color: #e8666b;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .13em;
}

.event-status.is-live {
  color: #ff5258;
  text-shadow: 0 0 14px rgba(255,50,60,.5);
}

.event-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  color: #868c96;
  font-size: 10px;
}

.event-discord-button {
  padding: 9px 12px;
  border: 1px solid rgba(239,52,59,.25);
  border-radius: 9px;
  background: rgba(239,52,59,.07);
  color: #f2f2f2;
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}

.event-discord-button:hover {
  background: rgba(239,52,59,.14);
}

@media (max-width:720px) {

  .event-live-card {
    grid-template-columns: 60px 1fr;
  }

  .event-discord-button {
    grid-column: 1 / -1;
    text-align: center;
  }

  .event-datebox {
    width: 56px;
  }

}



/* ==================================================
   LIVE VOM KIEZ
   ================================================== */

.live-kiez-section {
  padding-top: 36px;
  padding-bottom: 20px;
}

.live-kiez-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.live-kiez-card {
  position: relative;
  min-height: 120px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background:
    linear-gradient(
      145deg,
      rgba(18,20,25,.98),
      rgba(10,12,16,.98)
    );
  overflow: hidden;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.live-kiez-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 3px;
  height: 100%;
  background: #ef343b;
  opacity: .9;
}

.live-kiez-card:hover {
  transform: translateY(-3px);
  border-color: rgba(239,52,59,.30);
  box-shadow: 0 18px 40px rgba(0,0,0,.26);
}

.live-kiez-label {
  display: block;
  margin-bottom: 9px;
  color: #ef6469;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .15em;
}

.live-kiez-card strong {
  display: block;
  color: #f3f4f6;
  font-size: 16px;
  line-height: 1.3;
}

.live-kiez-card small {
  display: block;
  margin-top: 8px;
  color: #8f95a0;
  font-size: 10px;
}

@media (max-width: 850px) {
  .live-kiez-grid {
    grid-template-columns: 1fr;
  }
}



/* ==================================================
   EVENTS V5 – breiter & präsenter
   ================================================== */

#events .event-grid {
  display: grid;
  grid-template-columns: 1fr !important;
  gap: 14px;
}

#events .event-live-card {
  width: 100%;
  max-width: none;
  min-height: 155px;
  grid-template-columns: 82px minmax(0, 1fr) auto;
  padding: 22px;
  border-radius: 16px;
}

#events .event-live-cover {
  opacity: .42;
  background-position: center 42%;
}

#events .event-datebox {
  width: 72px;
  min-height: 78px;
}

#events .event-datebox strong {
  font-size: 19px;
}

#events .event-live-body {
  max-width: 700px;
}

#events .event-live-body h3 {
  font-size: 21px;
  margin: 6px 0 7px;
}

#events .event-live-body p {
  max-width: 620px;
  font-size: 11px;
  line-height: 1.55;
}

#events .event-meta {
  margin-top: 10px;
  gap: 18px;
}

#events .event-discord-button {
  padding: 11px 15px;
}

@media (max-width: 720px) {

  #events .event-live-card {
    grid-template-columns: 62px 1fr;
    padding: 16px;
  }

  #events .event-datebox {
    width: 58px;
    min-height: 66px;
  }

  #events .event-discord-button {
    grid-column: 1 / -1;
    width: 100%;
    text-align: center;
  }
}



/* ==================================================
   COMMUNITY WALL V3
   ================================================== */

#highlights {
  position: relative;
}

.highlight-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 14px;
  flex-wrap: wrap;
}

.highlight-filter {
  appearance: none;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 999px;
  padding: 7px 12px;
  background: rgba(255,255,255,.025);
  color: #8f959f;
  font: inherit;
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
  transition:
    border-color .18s ease,
    background .18s ease,
    color .18s ease,
    transform .18s ease;
}

.highlight-filter:hover {
  color: #fff;
  border-color: rgba(239,52,59,.26);
  transform: translateY(-1px);
}

.highlight-filter.is-active {
  color: #fff;
  background: rgba(239,52,59,.12);
  border-color: rgba(239,52,59,.45);
  box-shadow: inset 0 0 18px rgba(239,52,59,.06);
}

.highlight-counter {
  margin-left: auto;
  color: #6f7580;
  font-size: 9px;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.highlight-featured {
  display: block !important;
}

.community-feature {
  position: relative;
  display: block;
  overflow: hidden;
  min-height: 420px;
  border: 1px solid var(--line);
  border-radius: 17px;
  background: #0b0d11;
  transition:
    transform .2s ease,
    border-color .2s ease,
    box-shadow .2s ease;
}

.community-feature:hover {
  transform: translateY(-3px);
  border-color: rgba(239,52,59,.30);
  box-shadow: 0 24px 60px rgba(0,0,0,.34);
}

.community-feature .community-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.community-feature-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      90deg,
      rgba(7,8,11,.96) 0%,
      rgba(7,8,11,.72) 38%,
      rgba(7,8,11,.16) 74%
    ),
    linear-gradient(
      0deg,
      rgba(7,8,11,.60),
      transparent 50%
    );
}

.community-feature-content {
  position: relative;
  z-index: 4;
  width: min(500px, 70%);
  min-height: 420px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 34px;
}

.community-feature-kicker {
  margin-top: 10px;
  color: #9399a4;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .16em;
}

.community-feature-content h3 {
  margin: 8px 0 10px;
  font-size: clamp(24px, 3vw, 38px);
  line-height: 1.05;
  letter-spacing: -.035em;
}

.community-type {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 7px;
  border: 1px solid rgba(239,52,59,.28);
  border-radius: 6px;
  background: rgba(239,52,59,.12);
  color: #ff6b71;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .13em;
}

.community-meta {
  display: flex;
  gap: 7px;
  align-items: center;
  color: #858b95;
  font-size: 9px;
}

.community-discord-link {
  margin-top: 20px;
  color: #ff696f;
  font-size: 10px;
  font-weight: 900;
}

.highlight-more {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.community-gallery-card {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: #101217;
  transition:
    transform .18s ease,
    border-color .18s ease,
    box-shadow .18s ease;
}

.community-gallery-card:hover {
  transform: translateY(-3px);
  border-color: rgba(239,52,59,.28);
  box-shadow: 0 18px 40px rgba(0,0,0,.28);
}

.community-gallery-media {
  position: relative;
  height: 190px;
  overflow: hidden;
  background: #090b0e;
}

.community-gallery-media .community-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .3s ease;
}

.community-gallery-card:hover .community-media {
  transform: scale(1.025);
}

.community-type-card {
  position: absolute;
  left: 11px;
  top: 11px;
  z-index: 3;
  backdrop-filter: blur(8px);
}

.community-gallery-body {
  padding: 13px 14px 14px;
}

.community-gallery-body strong {
  display: block;
  min-height: 18px;
  margin-bottom: 7px;
  color: #eef0f3;
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.community-play {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 5;
  transform: translate(-50%,-50%);
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 50%;
  background: rgba(7,8,11,.74);
  backdrop-filter: blur(10px);
  color: #fff;
  font-size: 17px;
  box-shadow: 0 12px 30px rgba(0,0,0,.35);
}

.community-only-one {
  grid-column: 1 / -1;
  padding: 22px;
  border: 1px dashed rgba(255,255,255,.07);
  border-radius: 12px;
  color: #747a84;
  font-size: 10px;
  text-align: center;
}

.highlight-empty {
  width: 100%;
}

@media (max-width: 900px) {

  .highlight-more {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .community-feature-content {
    width: 80%;
  }

}

@media (max-width: 620px) {

  .highlight-counter {
    width: 100%;
    margin-left: 0;
  }

  .community-feature {
    min-height: 340px;
  }

  .community-feature-content {
    width: 100%;
    min-height: 340px;
    padding: 22px;
  }

  .community-feature-shade {
    background:
      linear-gradient(
        0deg,
        rgba(7,8,11,.98) 0%,
        rgba(7,8,11,.65) 60%,
        rgba(7,8,11,.15)
      );
  }

  .highlight-more {
    grid-template-columns: 1fr;
  }

}