:root{
  --bg0:#070a0f;
  --bg1:#0b0f14;
  --bg2:#111723;
  --text:#cfd3da;
  --muted:#9aa2ad;
  --gold:#c6a75e;
  --gold2:#f1d48a;
  --line:rgba(198,167,94,.18);
  --line2:rgba(198,167,94,.28);
  --shadow:0 18px 60px rgba(0,0,0,.55);
}

/* ===== FOOTER WRAPPER ===== */
.mmo-footer{
  position:relative;
  padding-top: 40px;
  color:var(--text);
  background:
    linear-gradient(180deg,
      rgba(12,16,22,.35) 0%,
      rgba(12,16,22,.55) 55%,
      rgba(8,10,14,.70) 100%
    ),
    radial-gradient(900px 260px at 50% 20%,
      rgba(255,255,255,.12),
      transparent 65%
    ),
    url("/img/ui/bg-footer.webp");
  background-size:cover;
  background-position:center top;
  background-repeat:no-repeat;

  border-top:1px solid rgba(255,255,255,.10);
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* Fog */
.mmo-footer::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(700px 260px at 20% 35%, rgba(255,255,255,.08), transparent 65%),
    radial-gradient(800px 280px at 80% 40%, rgba(255,255,255,.06), transparent 70%),
    linear-gradient(180deg, rgba(255,255,255,.06), transparent 45%);
  opacity:.55;
  filter:blur(0.2px);
  z-index:1;
}

.mmo-footer > *{
  position:relative;
  z-index:2;
}

/* Link reset inside footer */
.mmo-footer a{
  color:var(--text);
  text-decoration:none;
}
.mmo-footer a:hover{
  color:var(--gold2);
}

/* ===== ZONE 1: CTA ===== */
.mmo-footer__cta{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top: 15px;              /* Höhe anpassen */
  width: min(640px, 92%);
  padding: 14px 18px 12px;
  border-radius: 16px;
  z-index:5;
  text-align:center;
}

.mmo-footer__cta-inner{
  max-width:none;
  margin:0;
  display:block;
  align-items:center;
  justify-content:space-between;
  gap:18px;
}
.mmo-footer__cta h3{
	font-family:"gang-of-tree";
  margin:0 0 4px;
  font-size:22px;
  font-weight:600;
  letter-spacing:.5px;

  /* clean gold wie Panels */
  color: rgba(241,212,138,.92);

  /* sehr dezente Tiefe (kein Glow) */
  text-shadow:
    0 1px 0 rgba(0,0,0,.65),
    0 0 10px rgba(198,167,94,.10);
	text-transform:none; /* wichtig */
}
.mmo-footer__cta p{
  margin:0;
  color:var(--muted);
}
.accent{ color:var(--gold2); }

/* Buttons */
.mmo-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:40px;
  padding:0 14px;
  border-radius:10px;
  font-weight:600;
  letter-spacing:.3px;
  text-decoration:none;
  border:1px solid transparent;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease, filter .12s ease;
  user-select:none;
}
.mmo-btn:hover{ transform:translateY(-1px); }

/* ===== CTA -> NAV Separator (Squares + Line) ===== */
.mmo-footer-separate{
  max-width:1200px;
  margin:20px auto 0px;
  padding:0 22px;

  display:flex;
  justify-content:space-between;
  align-items:center;

  position:relative;
  opacity:.35;
}
.mmo-footer-separate::after{
  content:'';
  position:absolute;
  left:22px;
  right:22px;
  top:50%;
  height:1px;
  transform:translateY(-50%);
  background:linear-gradient(
    90deg,
    transparent,
    #9e8d78,
    transparent
  );
}
.mmo-footer-separate img{
  width:14px;
  height:auto;
  z-index:2;
}

/* ===== ZONE 2: SHOWCASE NAV ===== */
.mmo-footer__main{
  position:relative;
  padding: 90px 22px 20px;
}

.mmo-footer-showcase{
  position:relative;
  max-width:1200px;
  margin:0 auto;
  min-height: 240px;

  /* Mehr Luft links/rechts wie Bild22 */
  padding: 0;

  display:grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 46px;
  align-items:center;
}

/* Panels (left/right link boxes) */
.mmo-showcase__panel{
  position:relative;
  width: 360px;              /* fixiert die Panel-Breite */
  max-width: 360px;

  padding: 16px 18px;
  border-radius: 16px;

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

  background:
    radial-gradient(220px 160px at 50% 10%, rgba(255,255,255,.06), transparent 70%),
    linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.20));  /* dunkler! */

  backdrop-filter: blur(4px); /* stärker */
  z-index: 3;
}


.mmo-showcase__panel--left{ justify-self:end; }
.mmo-showcase__panel--right{
    justify-self: start; 
    padding: 16px 18px;
}

.mmo-showcase__panel--left  .mmo-showcase__content-left  { margin-right: 180px; }
.mmo-showcase__panel--right .mmo-showcase__content-right { margin-left: 180px; }

.mmo-showcase__title{
  font-size:12px;
  letter-spacing:1.3px;
  text-transform:uppercase;
  color: rgba(241,212,138,.90);

  padding-bottom:10px;
  margin-bottom:10px;

  position:relative;
  border-bottom:none;
  text-align:center;
}

.mmo-showcase__title::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background: rgba(198,167,94,.22);
}

/* Links in panels */
.mmo-showlink{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
  padding: 9px 2px;
  opacity:.92;
  transition: transform .12s ease, color .12s ease, text-shadow .12s ease;
}

.mmo-showlink:hover{
  transform: translateX(2px);
  color: var(--gold2);
  text-shadow: 0 0 18px rgba(198,167,94,.18);
}

/* Gem icon (CSS-only) */
.mmo-gem{
  width:12px;
  height:12px;
  transform: rotate(45deg);
  border: 2px solid rgba(198,167,94,.55);
  background: rgba(198,167,94,.14);
  box-shadow: 0 0 10px rgba(198,167,94,.12);
  flex: 0 0 auto;
}

/* Center logo */
.mmo-showcase__center{
  position:relative;
  z-index: 2;
  text-align:center;
}

.mmo-showcase__logo{
  height: 165px;
  width:auto;
  opacity:.98;
  filter: drop-shadow(0 0 24px rgba(0,0,0,.65));
}


/* Decorative characters */
/* Decorative characters (ABOVE panels, near center logo) */
.mmo-showcase__char{
  position:absolute;
  bottom:-5px;

  width: 240px;   /* kleiner */
  height:auto;

  opacity:.9;
  pointer-events:none;

  z-index:4;
  filter: drop-shadow(0 0 18px rgba(0,0,0,.5));
}

/* links: steht "innen" neben dem Logo */
.mmo-showcase__char--left{
  left: 50%;
  transform: translateX(-162%);   /* näher ans Logo (Bild22-Style) */
}

/* rechts: steht "innen" neben dem Logo */
.mmo-showcase__char--right{
  left: 50%;
  transform: translateX(70%);     /* näher ans Logo (Bild22-Style) */
}

/* --- Discord Link im Panel (integriert) --- */
.mmo-showlink__left{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

/* kleiner Discord-Punkt im Stil deines Golds */
.mmo-discord-dot{
  width:8px;
  height:8px;
  border-radius:50%;
  border:1px solid rgba(138,166,255,.55);
  background: rgba(138,166,255,.25);
  box-shadow: 0 0 8px rgba(138,166,255,.18);
  transition:all .25s ease;
}

/* Discord-Link leicht „besonders“ machen */
.mmo-showlink--discord{
  margin-top:10px;
  padding-top:12px;
  border-top:1px solid rgba(255,255,255,.06);
}

/* Hover: gleicher Stil, aber mit leichtem Discord-Glow */
.mmo-showlink--discord:hover{
  text-shadow: 0 0 18px rgba(138,166,255,.18);
}

.mmo-showlink--discord:hover .mmo-discord-dot{
  background: #8aa6ff;
  box-shadow:
    0 0 6px rgba(138,166,255,.9),
      0 0 18px rgba(138,166,255,.7),
      0 0 30px rgba(138,166,255,.5);
  transform: scale(1.2);
  animation: discordPulse 1.2s ease-in-out infinite;
}

@keyframes discordPulse{
  0%   { box-shadow: 0 0 8px rgba(138,166,255,.4); }
  50%  { box-shadow: 0 0 18px rgba(138,166,255,.9); }
  100% { box-shadow: 0 0 8px rgba(138,166,255,.4); }
}

/* ===== ZONE 3: BRAND / META ===== */
.mmo-footer__meta{
  position:relative;
  padding:10px 22px 10px;
  display:grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap:16px;
  align-items:center;
}

.age-badge{
  width:56px;
  height:auto;
  opacity:.9;
  filter:drop-shadow(0 0 10px rgba(0,0,0,.45));
}

.meta__center{ text-align:center; }

.brandlogo{
  height:34px;
  width:auto;
  opacity:.95;
  filter:drop-shadow(0 0 14px rgba(0,0,0,.55));
}
.tagline{
  margin-top:4px;
  color:rgba(241,212,138,.85);
  letter-spacing:.8px;
}
.smallprint{
  margin-top:6px;
  font-size:12px;
  line-height:1.45;
  color:rgba(207,211,218,.75);
}

.meta__right{
  display:flex;
  flex-direction:column;
  gap:10px;
  align-items:flex-end;
}

.socials{
  display:flex;
  gap:10px;
}
.socials a{
  width:36px;
  height:36px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  transition:border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.socials a:hover{
  transform:translateY(-1px);
  border-color:rgba(198,167,94,.30);
  box-shadow:0 0 18px rgba(198,167,94,.14);
}

/* Icon placeholders */
.icon{
  width:16px;
  height:16px;
  display:block;
  background:rgba(255,255,255,.75);
  mask-size:contain;
  mask-repeat:no-repeat;
}

.lang__btn{
  height:36px;
  padding:0 12px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.03);
  color:rgba(230,233,239,.92);
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:8px;
}
.lang__btn:hover{
  border-color:rgba(198,167,94,.25);
  box-shadow:0 0 18px rgba(198,167,94,.10);
}
.caret{ opacity:.8; }

/* ===== ZONE 4: DISCLAIMER BAR ===== */
.mmo-footer__bar{
  border-top:1px solid rgba(255,255,255,.06);
  padding:10px 22px 10px;
  background:linear-gradient(180deg, rgba(0,0,0,.20), rgba(0,0,0,.55));

  display:flex;
  gap:12px;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
}

.bar__links a{
  color:rgba(207,211,218,.80);
}
.bar__links a:hover{ color:var(--gold2); }
.sep{ color:rgba(207,211,218,.25); padding:0 8px; }
.bar__disclaimer{
  color:rgba(207,211,218,.58);
  font-size:12px;
  max-width:720px;
}

@media (min-width: 1400px){
.mmo-showcase__char{
    width: 240px;
	bottom:-5px; 
  }
}


/* Responsive */
@media (max-width: 980px){

  .mmo-footer-showcase{
    grid-template-columns: 1fr;
    min-height: auto;
    gap: 14px;
    padding: 0 22px;
  }

  .mmo-showcase__center{ order: 1; }
  .mmo-showcase__panel--left{ order: 2; }
  .mmo-showcase__panel--right{ order: 3; }

  .mmo-showcase__panel{
    width: 100%;
    max-width: none;
    justify-self: stretch;
  }

  .mmo-showcase__logo{ height: 90px; }
  .mmo-showcase__char{ display:none; }

  /* WICHTIG: Offsets reset */
  .mmo-showcase__content-left,
  .mmo-showcase__content-right{
    margin: 0 !important;
  }

  .mmo-footer__cta{
    position: static;
    transform: none;
    width: 100%;
    margin: 0 auto 14px;
    text-align: center;
	padding: 14px 18px 12px;
    border-radius: 16px;
  }

  .mmo-footer__main{
    padding: 24px 22px 10px;
  }

  /* Meta */
  .mmo-footer__meta{
    grid-template-columns:1fr;
  }
  .meta__right{ align-items:flex-start; }
  .meta__center{ text-align:left; }

.mmo-footer__cta-inner{
  max-width:none;
  margin:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:6px;
}

}

@media (max-width: 560px){
  .mmo-btn{ width:100%; }

  .mmo-showcase__logo{ height: 70px; }

  .mmo-showlink{
    padding: 10px 2px;
    font-size: 14px;
  }

  .mmo-showcase__title{
    font-size: 11px;
  }
}











@media (min-width: 992px){
    .mmo-footer .lang-selector,.mmo-footer .f-detail{
        padding:30px 0
    }
}
.mmo-footer .lang-selector{
    position:relative;
    max-width:230px;
    width:100%
}
@media (min-width: 992px){
    .mmo-footer .lang-selector{
        margin-left:auto
    }
}
.mmo-footer .lang-selector .foot-lang-button{
    width:100%;
    background-color:rgba(16,16,16,0.5);
    border:1px solid #101010;
    height:44px;
    padding:20px;
    position:relative;
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-align:center;
    -ms-flex-align:center;
    align-items:center;
    -webkit-transition:0.2s;
    transition:0.2s;
    cursor:pointer
}
.mmo-footer .lang-selector .foot-lang-button:hover{
    background-color:rgba(16,16,16,0.2)
}
.mmo-footer .lang-selector .foot-lang-button img{
    margin-right:10px
}
.mmo-footer .lang-selector>.foot-lang-button:after{
    content:'';
    height:6px;
    width:10px;
    position:absolute;
    display:block;
    background-image:url(../img/ui/lang-arrow.png);
    right:20px;
    top:50%;
    -webkit-transform:translateY(-50%);
    transform:translateY(-50%)
}
.mmo-footer .lang-selector .lang-dropdown{
    -webkit-transition:.2s;
    transition:.2s;
    opacity:0;
    -webkit-transform:translateY(5px);
    transform:translateY(5px);
    pointer-events:none;
    width:inherit;
    background-color:rgba(16,16,16,0.2);
    position:absolute;
    bottom:100%;
    left:0
}
.mmo-footer .lang-selector.open .lang-dropdown{
    opacity:1;
    -webkit-transform:translateY(0px);
    transform:translateY(0px);
    pointer-events:unset
}