:root{
  --gold:#d8bb75;
  --gold2:#9f742d;
  --text:#f1dfb0;
  --refw:100vw;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:#040807;color:var(--text);font-family:Georgia,"Times New Roman",serif}
body{min-height:100vh;overflow:hidden}
a{color:inherit;text-decoration:none}button,input{font:inherit}button{cursor:pointer}
.reference{position:relative;width:100%;height:100%;margin:0 auto}
.outer-frame{position:fixed;z-index:80;pointer-events:none;inset:.65vh;border:1px solid rgba(178,132,48,.82);box-shadow:inset 0 0 0 1px rgba(90,57,12,.32)}

/* 100 / 828 / 96 = exakte Ziel-Proportionen von 1536x1024 */
.topbar{height:9.765625vh;position:relative;z-index:10;background:linear-gradient(#090e0d,#070b0b);border-bottom:1px solid #9f742c;box-shadow:inset 0 -1px rgba(246,203,107,.12)}
.header-logo{
  position:absolute;
  left:4.25vh;
  top:7%;
  width:23.8vh;
  height:86%;
  overflow:visible;
  display:flex;
  align-items:center
}
.header-logo img{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain
}
.nav{
  position:absolute;
  left:35.45vh;
  top:0;
  height:100%;
  display:flex;
  align-items:center;
  gap:5.25vh;
  text-transform:uppercase;
  font-size:1.62vh;
  letter-spacing:.015em;
  white-space:nowrap
}
.nav a{height:100%;display:flex;align-items:center;position:relative;color:#ead7a7;text-shadow:0 1px 1px #000}
.nav a.active:after{content:"";position:absolute;left:13%;right:13%;bottom:0;height:.32vh;background:linear-gradient(90deg,transparent,#f6c844 28%,#fff1ad 50%,#f6c844 72%,transparent);box-shadow:0 0 .8vh #ffc83c}
.top-actions{
  position:absolute;
  right:6.25vh;
  top:0;
  height:100%;
  display:flex;
  align-items:center;
  gap:1.55vh
}
.header-login{height:4.85vh;width:14.1vh;padding:0 1.2vh;color:#efddb1;text-transform:uppercase;background:#0b1111;border:1px solid #8d682b;font-size:1.58vh}

.sprite-button{position:relative;border:0;background:transparent;color:#f7e1a7;text-transform:uppercase;font-weight:700;letter-spacing:.02em;isolation:isolate;padding:0}
.sprite-button:before{content:"";position:absolute;inset:-18% -10%;background:url('assets/btn_red_clean.png') center/100% 100% no-repeat;z-index:-1}
.sprite-button span{position:relative;z-index:1;text-shadow:0 2px 2px #380505}
.top-play{width:18.2vh;height:4.8vh;font-size:1.6vh}

.hero{height:80.859375vh;position:relative;z-index:1;overflow:hidden;border-bottom:1px solid rgba(162,118,39,.65);background:#121711}
.hero-ambient{
  position:absolute;
  inset:0;
  display:block;
  background:url('assets/bg_castle.png') center center/cover no-repeat;
  filter:brightness(.88) saturate(.92);
  transform:scale(1.015)
}
.hero-reference{
  overflow:hidden;
  background:transparent;
  isolation:isolate
}
.hero-reference::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  left:50%;
  width:143.55vh;
  transform:translateX(-50%);
  z-index:-1;
  background:url('assets/bg_castle.png') center center/100% 100% no-repeat;
  -webkit-mask-image:linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.15) 4%,
    rgba(0,0,0,.55) 10%,
    #000 18%,
    #000 82%,
    rgba(0,0,0,.55) 90%,
    rgba(0,0,0,.15) 96%,
    transparent 100%
  );
  mask-image:linear-gradient(
    90deg,
    transparent 0%,
    rgba(0,0,0,.15) 4%,
    rgba(0,0,0,.55) 10%,
    #000 18%,
    #000 82%,
    rgba(0,0,0,.55) 90%,
    rgba(0,0,0,.15) 96%,
    transparent 100%
  )
}
.hero-shade{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(4,7,6,.015),rgba(4,7,6,.045) 58%,rgba(3,5,4,.13)),
    linear-gradient(90deg,rgba(2,5,4,.035),transparent 43%,rgba(2,3,3,.055));
  pointer-events:none
}

.hero-left{position:absolute;inset:0}
.hero-brand{position:absolute;inset:0;pointer-events:none}
.hero-crest{
  position:absolute;
  left:27.0vh;
  top:9.15%;
  width:15.8vh;
  height:auto;
  filter:drop-shadow(0 .55vh .65vh rgba(0,0,0,.58))
}
.hero-title{
  position:absolute;
  left:15.0vh;
  top:38.3%;
  width:36.1vh;
  height:auto;
  filter:drop-shadow(0 .45vh .8vh rgba(0,0,0,.6))
}
.hero-copy{
  position:absolute;
  left:22.2vh;
  top:59.7%;
  font-size:2.22vh;
  line-height:1.34;
  text-transform:uppercase;
  letter-spacing:.012em;
  text-shadow:0 .2vh .4vh #000;
  color:#f2e2bd
}

.features{
  position:absolute;
  left:13.0vh;
  top:71.0%;
  width:67.0vh;
  height:14.5%;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(176,130,47,.55);
  border-bottom:1px solid rgba(176,130,47,.55)
}
.feature{text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.05vh}
.feature+.feature{border-left:1px solid rgba(176,130,47,.48)}

.feature strong{text-transform:uppercase;font-size:1.62vh;color:#dcc078;line-height:1.05}
.feature span{font-size:1.48vh;color:#f0dfb9;line-height:1.05;margin-top:.25vh}
.hero-cta{
  position:absolute;
  left:21.5vh;
  top:88.0%;
  width:37.0vh;
  height:8.15%;
  font-size:2.4vh
}
.hero-cta:before{inset:-22% -8%}

.login-panel{
  position:absolute;
  right:18.0vh;
  top:26.2%;
  width:37.4vh;
  height:56.0%;
  padding:3.25vh 1.95vh 2.75vh;
  background:linear-gradient(rgba(8,13,13,.91),rgba(8,13,13,.955));
  border:1px solid #8c6727;
  box-shadow:inset 0 0 0 1px rgba(33,39,34,.65),0 1.1vh 2.8vh rgba(0,0,0,.45)
}
.login-panel:before,.login-panel:after{content:"";position:absolute;left:7%;right:7%;height:1px;background:linear-gradient(90deg,transparent,#9d7127 15%,#d2a653 50%,#9d7127 85%,transparent);opacity:.9}
.login-panel:before{top:2.1%}.login-panel:after{bottom:2.1%}
.corner{position:absolute;width:1.05vh;height:1.05vh;border-color:#c79a43;border-style:solid}
.corner.tl{left:2.7%;top:2.7%;border-width:1px 0 0 1px}.corner.tr{right:2.7%;top:2.7%;border-width:1px 1px 0 0}.corner.bl{left:2.7%;bottom:2.7%;border-width:0 0 1px 1px}.corner.br{right:2.7%;bottom:2.7%;border-width:0 1px 1px 0}
.login-panel h1{
  text-align:center;
  margin:0 0 2.2vh;
  text-transform:uppercase;
  color:#e7c984;
  font-size:2.85vh;
  font-weight:500;
  line-height:1
}
.login-panel form{display:flex;flex-direction:column;gap:1.24vh}
.input-row{
  height:4.85vh;
  border:1px solid #825e25;
  background:rgba(5,11,11,.92);
  display:flex;
  align-items:center
}
.ico{
  width:3.7vh;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#d5ac52
}
.ico img{
  width:2.35vh;
  height:2.35vh;
  object-fit:contain;
  filter:drop-shadow(0 .12vh .12vh rgba(0,0,0,.65))
}
.user-ico img{width:2.15vh;height:2.15vh}
.lock-ico img{width:2.25vh;height:2.25vh}
.input-row input{flex:1;height:100%;border:0;outline:0;background:transparent;color:#e8d5a4;font-size:1.42vh;padding:0 .75vh}
.input-row input::placeholder{color:#bfa56b}
.options{display:flex;justify-content:space-between;align-items:center;font-size:1.08vh;color:#e6cf9a;white-space:nowrap}
.options label{display:flex;align-items:center;gap:.35vh}.options input{accent-color:#c99a37;width:1.25vh;height:1.25vh;margin:0}.options a{color:#d8af56}
.login-submit{
  height:4.9vh;
  width:100%;
  font-size:1.72vh
}.login-submit:before{inset:-20% -5%}
.or{height:2.0vh;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.9vh;color:#d6b366;text-transform:uppercase;font-size:1.3vh}.or i{height:1px;background:#9e742d}
.create-account{
  width:100%;
  height:5.0vh;
  border:1px solid #876529;
  color:#ead7a8;
  background:rgba(5,11,11,.88);
  text-transform:uppercase;
  font-size:1.4vh;
  font-weight:600;
  cursor:pointer
}.create-account b{font-size:1.45vh;margin-right:.45vh;color:#d8b15f}

.footer{height:9.375vh;position:relative;z-index:10;background:linear-gradient(#0a0e0e,#080b0b);border-top:1px solid rgba(190,145,50,.45);color:#d8c290}
.footer-reference{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 9.5vh
}
.footer-links{
  display:flex;
  gap:3.0vh;
  text-transform:uppercase;
  font-size:1.36vh
}
.copyright{font-size:1.55vh;justify-self:center}
.socials{
  justify-self:end;
  display:flex;
  gap:1.15vh
}
.socials a{width:4.15vh;height:4.15vh;border:1px solid #896524;border-radius:50%;display:grid;place-items:center;color:#cfae62;font-size:1.45vh;background:#090e0d}

@media(max-width:900px){
  body{overflow:auto}.outer-frame{display:none}.topbar{height:auto;min-height:150px}.reference{width:100%;transform:none}.header-reference{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:12px;gap:12px}.header-logo,.nav,.top-actions{position:static}.header-logo{width:210px;height:auto;overflow:visible}.header-logo img{width:100%;height:auto}.nav{height:auto;flex-wrap:wrap;justify-content:center;gap:22px;font-size:15px}.top-actions{height:auto}.header-login,.top-play{width:auto;max-width:none;height:50px;font-size:15px}.hero{height:auto;min-height:1050px}.hero-reference{width:100%;background-position:center;background-size:cover}.hero-crest{left:50%;transform:translateX(-50%);top:55px;width:170px}.hero-title{left:50%;transform:translateX(-50%);top:260px;width:330px}.hero-copy{left:50%;transform:translateX(-50%);top:455px;width:90%;text-align:center;font-size:23px}.features{left:5%;top:585px;width:90%;height:240px;grid-template-columns:repeat(2,1fr)}.feature:nth-child(3),.feature:nth-child(4){border-top:1px solid rgba(176,130,47,.48)}.hero-cta{left:50%;transform:translateX(-50%);top:850px;width:320px;height:70px;font-size:22px}.login-panel{right:auto;left:50%;transform:translateX(-50%);top:940px;width:min(360px,90%);height:auto;min-height:430px;padding:30px 25px}.login-panel h1{font-size:28px}.input-row{height:50px}.input-row input{font-size:15px}.options{font-size:12px}.login-submit{height:48px;font-size:17px}.create-account{height:50px;font-size:14px}.footer{height:auto;min-height:130px}.footer-reference{grid-template-columns:1fr;gap:16px;padding:18px}.footer-links,.copyright,.socials{justify-self:center}.footer-links{font-size:13px}.copyright{font-size:14px}
}


@media(max-width:900px){
  .header-logo{position:static;left:auto;height:auto;width:210px;overflow:visible}
  .header-logo img{width:100%;height:auto}
  .nav{position:static;left:auto;height:auto}
  .top-actions{position:static;right:auto;height:auto}
  .hero-reference::before{display:none}
  .hero-crest{left:50%;transform:translateX(-50%)}
  .hero-title{left:50%;transform:translateX(-50%)}
  .hero-copy{left:50%;transform:translateX(-50%)}
  .features{left:5%}
  .hero-cta{left:50%;transform:translateX(-50%)}
  .login-panel{right:auto;left:50%;transform:translateX(-50%)}
  .footer-reference{padding:18px}
}

.feature-art{
  width:3.45vh;
  height:3.45vh;
  object-fit:contain;
  margin-bottom:.12vh;
  filter:drop-shadow(0 .14vh .18vh rgba(0,0,0,.72)) brightness(.95)
}

.options label{
  position:relative;
}
.options label input[type="checkbox"]{
  appearance:none;
  -webkit-appearance:none;
  width:1.65vh;
  height:1.65vh;
  border:0;
  background:rgba(0,0,0,.55);
  border-radius:0;
  position:relative;
}
.options label input[type="checkbox"]::after{
  content:"";
  position:absolute;
  inset:-.45vh;
  background:url('assets/icon_check.png') center/contain no-repeat;
  opacity:0;
  transition:opacity .12s ease;
}
.options label input[type="checkbox"]:checked::after{opacity:1}
.create-icon{
  display:inline-flex;
  width:2.0vh;
  height:2.0vh;
  vertical-align:middle;
  margin-right:.45vh
}
.create-icon img{width:100%;height:100%;object-fit:contain}
.socials a{
  border:0!important;
  background:transparent!important;
  width:4.9vh!important;
  height:4.9vh!important;
  overflow:visible;
}
.socials a img{
  width:100%;
  height:100%;
  object-fit:contain;
  filter:drop-shadow(0 .2vh .25vh rgba(0,0,0,.55))
}

@media(max-width:900px){
  .header-logo{width:250px;height:92px}
  .feature-art{width:46px;height:46px}
  .ico img{width:24px;height:24px}
  .socials a{width:48px!important;height:48px!important}
}

@media(min-width:901px){
  .socials a{
    width:4.35vh!important;
    height:4.35vh!important;
  }
}

@media(min-width:901px){
  .socials a{
    width:3.8vh!important;
    height:3.8vh!important;
    opacity:.9;
  }
  .socials a img{
    transform:scale(.9);
  }
}

@media(min-width:901px){
  .feature-art{
    filter:drop-shadow(0 .14vh .18vh rgba(0,0,0,.72)) brightness(.94);
  }
}

@media(min-width:901px){
  .socials a{
    width:3.55vh!important;
    height:3.55vh!important;
  }
  .socials a img{
    transform:none!important;
  }
}

@media(min-width:901px){
  .nav a,
  .footer-links a,
  .login-panel a{
    transition:color .16s ease, text-shadow .16s ease, filter .16s ease;
  }
  .nav a:hover,
  .footer-links a:hover,
  .login-panel a:hover{
    color:#f6d985;
    text-shadow:0 0 .55vh rgba(241,190,74,.38);
  }
  button:focus-visible,
  a:focus-visible,
  input:focus-visible{
    outline:1px solid #e2b65b;
    outline-offset:2px;
  }
}

@media(min-width:901px){
  .login-panel button:hover{filter:brightness(1.08)}
  .login-panel input:focus{filter:brightness(1.08)}
}


/* Visible language selector */
.language-switcher{
  position:absolute;
  right:28.3vh;
  top:50%;
  transform:translateY(-50%);
  z-index:30;
  font-family:Georgia,"Times New Roman",serif;
}
.language-current{
  height:4.85vh;
  min-width:9.5vh;
  padding:.45vh .8vh;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:.65vh;
  border:1px solid #8d682b;
  background:linear-gradient(#0d1413,#070b0b);
  color:#f0ddb0;
  text-transform:uppercase;
  font-size:1.35vh;
  box-shadow:inset 0 0 0 1px rgba(41,31,13,.55);
}
.language-current img{
  width:2.6vh;
  height:1.8vh;
  object-fit:cover;
  border:1px solid rgba(219,170,72,.45);
  box-shadow:0 .1vh .25vh rgba(0,0,0,.55);
}
.language-chevron{
  color:#d2a650;
  font-size:1.4vh;
  transform:translateY(-.05vh);
}
.language-menu{
  position:absolute;
  top:calc(100% + .45vh);
  right:0;
  width:17.8vh;
  padding:.55vh;
  border:1px solid #9b712a;
  background:
    radial-gradient(circle at 50% 0,rgba(73,46,13,.18),transparent 40%),
    linear-gradient(#0d1413,#070b0b);
  box-shadow:0 1.2vh 2.5vh rgba(0,0,0,.56),inset 0 0 0 1px rgba(45,34,15,.68);
}
.language-menu::before{
  content:"";
  position:absolute;
  left:.6vh;
  right:.6vh;
  top:.35vh;
  height:1px;
  background:linear-gradient(90deg,transparent,#d2a14a,transparent);
}
.language-menu button{
  width:100%;
  height:4.1vh;
  display:flex;
  align-items:center;
  gap:.8vh;
  padding:.4vh .7vh;
  border:1px solid transparent;
  background:transparent;
  color:#e9d5a4;
  text-align:left;
  font-size:1.35vh;
}
.language-menu button:hover,
.language-menu button[aria-selected="true"]{
  border-color:rgba(167,119,42,.52);
  background:linear-gradient(90deg,rgba(116,21,17,.48),rgba(33,18,12,.22));
  color:#ffe4a5;
}
.language-menu img{
  width:2.7vh;
  height:1.8vh;
  object-fit:cover;
  border:1px solid rgba(219,170,72,.4);
  flex:0 0 auto;
}
.language-menu[hidden]{display:none!important}

@media(max-width:1180px) and (min-width:901px){
  .language-switcher{right:25.5vh}
  .language-current{min-width:8.2vh}
  #currentLanguageCode{display:none}
}

@media(max-width:900px){
  .language-switcher{
    position:relative;
    right:auto;
    top:auto;
    transform:none;
    order:2;
  }
  .language-current{
    height:48px;
    min-width:100px;
    font-size:15px;
  }
  .language-current img{
    width:28px;
    height:19px;
  }
  .language-menu{
    width:190px;
    right:50%;
    transform:translateX(50%);
  }
  .language-menu button{
    height:44px;
    font-size:15px;
  }
  .language-menu img{
    width:29px;
    height:19px;
  }
  .top-actions{order:3}
}


/* ============================================================
   V17 MASTER GRAPHICS PASS
   These assets come directly from the user's newest UI sheet.
   ============================================================ */

.outer-frame{
  border-color:rgba(188,139,46,.72);
}
.master-corner{
  position:absolute;
  width:3.7vh;
  height:3.7vh;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 .12vh .18vh rgba(0,0,0,.72));
}
.mc-tl{left:-.25vh;top:-.25vh}
.mc-tr{right:-.25vh;top:-.25vh}
.mc-bl{left:-.25vh;bottom:-.25vh}
.mc-br{right:-.25vh;bottom:-.25vh}

/* Header actions are one flex row: LANGUAGE -> LOGIN -> PLAY */
.top-actions{
  right:4.1vh!important;
  gap:1.15vh!important;
  z-index:50;
}
.language-switcher{
  position:relative!important;
  right:auto!important;
  top:auto!important;
  transform:none!important;
  z-index:60!important;
}
.language-current{
  width:9.8vh!important;
  min-width:9.8vh!important;
  height:4.9vh!important;
  border:0!important;
  padding:.45vh .8vh!important;
  background:url('assets/button_black_master_v17.png') center/100% 100% no-repeat!important;
  box-shadow:none!important;
}
.language-current img{
  width:2.55vh!important;
  height:1.72vh!important;
  border:0!important;
}
.language-menu{
  top:calc(100% + .35vh)!important;
  right:0!important;
  width:10.3vh!important;
  height:24.4vh!important;
  padding:1.8vh 1.2vh 1.1vh!important;
  border:0!important;
  background:url('assets/language_panel_master_v17.png') center/100% 100% no-repeat!important;
  box-shadow:0 1vh 2.5vh rgba(0,0,0,.55)!important;
}
.language-menu::before{display:none!important}
.language-menu button{
  height:4.15vh!important;
  padding:0!important;
  justify-content:center!important;
  border:0!important;
  background:transparent!important;
}
.language-menu button span{display:none}
.language-menu button img{
  width:3.05vh!important;
  height:2.0vh!important;
  border:0!important;
  transition:transform .12s ease,filter .12s ease;
}
.language-menu button:hover img,
.language-menu button[aria-selected="true"] img{
  transform:scale(1.13);
  filter:brightness(1.18) drop-shadow(0 0 .25vh #d8a73f);
}

.header-login{
  width:14.2vh!important;
  height:4.9vh!important;
  border:0!important;
  background:url('assets/button_black_master_v17.png') center/100% 100% no-repeat!important;
  box-shadow:none!important;
}
.top-play{
  width:18.8vh!important;
  height:4.95vh!important;
  background:url('assets/button_play_master_v17.png') center/100% 100% no-repeat!important;
}
.top-play::before{display:none!important}

/* New crest and feature art are from the master sheet. */
.hero-crest{
  width:18.2vh!important;
  top:7.9%!important;
  left:25.7vh!important;
}
.feature-art{
  width:4.35vh!important;
  height:4.35vh!important;
  filter:drop-shadow(0 .16vh .22vh rgba(0,0,0,.78))!important;
}

/* Large hero CTA uses the new extra-wide red master button. */
.hero-cta{
  width:39.2vh!important;
  height:8.35%!important;
  background:url('assets/button_hero_master_v17.png') center/100% 100% no-repeat!important;
}
.hero-cta::before{display:none!important}

/* The LOGIN PANEL is now visibly the dedicated new master artwork. */
.login-panel{
  right:16.8vh!important;
  top:24.8%!important;
  width:39.7vh!important;
  height:58.8%!important;
  padding:0!important;
  border:0!important;
  box-shadow:0 1.15vh 3vh rgba(0,0,0,.46)!important;
  background:url('assets/login_panel_master_v17.png') center/100% 100% no-repeat!important;
}
.login-panel::before,
.login-panel::after,
.login-panel .corner{display:none!important}

.login-panel h1{
  position:absolute!important;
  top:7.0%!important;
  left:8%!important;
  right:8%!important;
  margin:0!important;
  font-size:2.7vh!important;
}

/* The panel image already contains the input/button frames.
   HTML fields sit transparently on top of them. */
.login-panel form{
  position:absolute!important;
  inset:0!important;
  display:block!important;
}
.login-panel .input-row{
  position:absolute!important;
  left:12.6%!important;
  width:74.9%!important;
  height:10.5%!important;
  border:0!important;
  background:transparent!important;
}
.login-panel .username-row{top:19.0%!important}
.login-panel .password-row{top:32.8%!important}
.login-panel .ico{width:11.5%!important}
.login-panel .input-row input{
  font-size:1.42vh!important;
  padding:0 .4vh!important;
}

.login-panel .options{
  position:absolute!important;
  left:12.4%!important;
  right:12.4%!important;
  top:47.2%!important;
  height:4.6%!important;
  font-size:1.02vh!important;
}
.login-panel .login-submit{
  position:absolute!important;
  left:11.8%!important;
  top:55.0%!important;
  width:76.4%!important;
  height:12.5%!important;
  background:transparent!important;
  border:0!important;
}
.login-panel .login-submit::before{display:none!important}
.login-panel .or{
  position:absolute!important;
  left:13%!important;
  right:13%!important;
  top:69.3%!important;
  height:5.0%!important;
}
.login-panel .or i{background:transparent!important}
.login-panel .create-account{
  position:absolute!important;
  left:12.7%!important;
  top:77.0%!important;
  width:74.6%!important;
  height:12.0%!important;
  border:0!important;
  background:transparent!important;
}
.login-panel .create-icon{display:none!important}

/* New social icon artwork from the master sheet. */
.socials a{
  width:4.05vh!important;
  height:4.05vh!important;
  border:0!important;
  background:transparent!important;
}
.socials a img{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  transform:none!important;
  filter:drop-shadow(0 .15vh .2vh rgba(0,0,0,.65))!important;
}

@media(max-width:900px){
  .master-corner{display:none}
  .top-actions{
    position:static!important;
    display:flex!important;
    flex-wrap:wrap!important;
    justify-content:center!important;
  }
  .language-current{width:105px!important;height:50px!important}
  .language-menu{
    width:105px!important;
    height:250px!important;
    right:50%!important;
    transform:translateX(50%)!important;
  }
  .language-menu button{height:43px!important}
  .language-menu button img{width:31px!important;height:20px!important}
  .header-login{width:150px!important;height:50px!important}
  .top-play{width:190px!important;height:52px!important}
  .hero-crest{left:50%!important;top:55px!important;width:170px!important}
  .feature-art{width:48px!important;height:48px!important}
  .hero-cta{width:340px!important;height:74px!important}
  .login-panel{
    left:50%!important;
    right:auto!important;
    top:940px!important;
    width:min(410px,92%)!important;
    height:465px!important;
  }
  .login-panel h1{font-size:28px!important}
  .login-panel .input-row input{font-size:15px!important}
  .login-panel .options{font-size:11px!important}
}


/* ============================================================
   V18 CLEANUP – fixes from the latest desktop screenshot
   ============================================================ */

@media(min-width:901px){
  /* Give the wordmark and claim clear breathing room. */
  .hero-title{
    top:37.0%!important;
  }
  .hero-copy{
    top:61.0%!important;
    font-size:2.16vh!important;
  }

  /* Slightly lower the features to preserve the visual rhythm. */
  .features{
    top:72.0%!important;
    height:14.0%!important;
  }
  .feature-art{
    width:4.05vh!important;
    height:4.05vh!important;
  }
  .feature strong{
    font-size:1.58vh!important;
  }
  .feature span{
    font-size:1.42vh!important;
  }

  /* CTA remains aligned under the wider feature strip. */
  .hero-cta{
    top:88.6%!important;
  }

  /* Login option row was too tiny and sat directly on the ornamental lines. */
  .login-panel .options{
    top:46.4%!important;
    left:12.7%!important;
    right:12.7%!important;
    height:5.6%!important;
    font-size:1.22vh!important;
    line-height:1!important;
  }
  .login-panel .options label{
    gap:.48vh!important;
  }
  .login-panel .options label input[type="checkbox"]{
    width:1.75vh!important;
    height:1.75vh!important;
    flex:0 0 auto;
  }
  .login-panel .options a{
    font-size:1.16vh!important;
  }

  /* Login CTA/text spacing, especially for longer translations. */
  .login-panel .login-submit{
    top:55.2%!important;
  }
  .login-panel .or{
    top:69.7%!important;
  }
  .login-panel .create-account{
    top:77.3%!important;
    font-size:1.34vh!important;
    white-space:nowrap;
  }

  /* Header controls align more evenly and stay clear of the logo/nav. */
  .top-actions{
    right:3.75vh!important;
    gap:1.0vh!important;
  }
  .language-current{
    width:9.4vh!important;
    min-width:9.4vh!important;
  }
  .header-login{
    width:13.6vh!important;
  }
  .top-play{
    width:18.2vh!important;
  }

  /* The language list should read as a compact dropdown, not a second panel. */
  .language-menu{
    top:calc(100% + .5vh)!important;
    height:23.6vh!important;
    width:9.9vh!important;
    padding:1.55vh 1.15vh 1.0vh!important;
  }
  .language-menu button{
    height:4.0vh!important;
  }

  /* Footer icons felt a little dominant in the screenshot. */
  .socials a{
    width:3.65vh!important;
    height:3.65vh!important;
  }
}


/* ============================================================
   V19 – NEW LION/GEM FRAME ASSETS
   ============================================================ */

/* Remove the plain CSS frame and use the user's new 8-slice artwork instead. */
.outer-frame{
  position:fixed!important;
  inset:0!important;
  z-index:90!important;
  border:0!important;
  box-shadow:none!important;
  pointer-events:none!important;
  overflow:hidden!important;
}
.outer-frame::before,
.outer-frame::after{display:none!important}

.pf{
  position:absolute;
  display:block;
  pointer-events:none;
  object-fit:fill;
  filter:drop-shadow(0 .18vh .28vh rgba(0,0,0,.68));
}

/* Corners are deliberately restrained: decorative but never over the content. */
.pf-tl{left:.15vh;top:.15vh;width:4.8vh;height:4.3vh;object-fit:contain;object-position:left top}
.pf-tr{right:.15vh;top:.15vh;width:4.8vh;height:4.3vh;object-fit:contain;object-position:right top}
.pf-bl{left:.15vh;bottom:.15vh;width:4.8vh;height:4.3vh;object-fit:contain;object-position:left bottom}
.pf-br{right:.15vh;bottom:.15vh;width:4.8vh;height:4.3vh;object-fit:contain;object-position:right bottom}

/* Long edge pieces are stretched only along their long axis. */
.pf-top{
  left:4.4vh;right:4.4vh;top:.12vh;
  width:auto;height:1.8vh;
}
.pf-bottom{
  left:4.4vh;right:4.4vh;bottom:.12vh;
  width:auto;height:1.8vh;
}
.pf-left{
  left:.12vh;top:4.0vh;bottom:4.0vh;
  width:1.8vh;height:auto;
}
.pf-right{
  right:.12vh;top:4.0vh;bottom:4.0vh;
  width:1.8vh;height:auto;
}

/* Keep important UI clear of the decorative edge. */
.topbar{padding-left:.25vh;padding-right:.25vh}
.footer{padding-left:.25vh;padding-right:.25vh}

/* Slightly more premium panel contrast so the new frame language matches. */
.login-panel{
  filter:drop-shadow(0 .25vh .4vh rgba(0,0,0,.38));
}
.header-login,
.top-play,
.hero-cta,
.language-current{
  filter:drop-shadow(0 .12vh .18vh rgba(0,0,0,.48));
}

@media(max-width:900px){
  .pf{display:none!important}
}


/* ============================================================
   V22 – LOGIN PANEL BUILT BY CODE
   Only small decorative fragments come from the latest assets.
   The actual box / rails / inputs / buttons are HTML + CSS.
   ============================================================ */

.login-panel.login-coded{
  position:absolute !important;
  right:17.2vh !important;
  top:25.6% !important;
  width:37.8vh !important;
  height:auto !important;
  min-height:44.5vh !important;

  display:flex !important;
  flex-direction:column !important;

  padding:3.55vh 2.55vh 2.65vh !important;

  /* CODED panel body – no finished panel PNG */
  background:
    linear-gradient(rgba(6,11,12,.90), rgba(4,8,9,.96)),
    url('assets/coded_login_texture.png?v=22') center/22vh 22vh repeat !important;

  border:1px solid rgba(173,126,42,.86) !important;
  border-radius:.25vh !important;

  box-shadow:
    inset 0 0 0 1px rgba(31,35,33,.92),
    inset 0 0 2.6vh rgba(0,0,0,.72),
    0 1.2vh 3.0vh rgba(0,0,0,.42) !important;

  filter:none !important;
  overflow:visible !important;
  isolation:isolate;
}

/* Remove every older static-panel decoration */
.login-panel.login-coded::before,
.login-panel.login-coded::after,
.login-panel.login-coded .corner{
  display:none !important;
}

/* CODED inner rails */
.login-panel.login-coded > .coded-login-decoration::before,
.login-panel.login-coded > .coded-login-decoration::after{
  content:"";
  position:absolute;
  left:1.25vh;
  right:1.25vh;
  height:1px;
  background:linear-gradient(
    90deg,
    transparent 0%,
    rgba(113,76,21,.32) 6%,
    #c9963a 18%,
    #e1b65c 50%,
    #c9963a 82%,
    rgba(113,76,21,.32) 94%,
    transparent 100%
  );
  box-shadow:0 1px rgba(0,0,0,.7);
}
.login-panel.login-coded > .coded-login-decoration::before{top:1.05vh}
.login-panel.login-coded > .coded-login-decoration::after{bottom:1.05vh}

.coded-login-decoration{
  position:absolute !important;
  inset:0 !important;
  z-index:0 !important;
  pointer-events:none !important;
}

/* Vertical rails built with CSS, not images */
.coded-login-decoration{
  background:
    linear-gradient(#c9963a,#6f4714,#d7a64a) left 1.05vh top 4.2vh / 1px calc(100% - 8.4vh) no-repeat,
    linear-gradient(#c9963a,#6f4714,#d7a64a) right 1.05vh top 4.2vh / 1px calc(100% - 8.4vh) no-repeat;
}

.cl-corner{
  position:absolute;
  width:4.65vh;
  height:4.65vh;
  object-fit:contain;
  pointer-events:none;
  filter:drop-shadow(0 .12vh .20vh rgba(0,0,0,.68));
}
.cl-tl{left:-.36vh;top:-.34vh;object-position:left top}
.cl-tr{right:-.36vh;top:-.34vh;object-position:right top}
.cl-bl{left:-.36vh;bottom:-.34vh;object-position:left bottom}
.cl-br{right:-.36vh;bottom:-.34vh;object-position:right bottom}

.cl-jewel{
  position:absolute;
  left:50%;
  width:3.9vh;
  height:3.0vh;
  transform:translateX(-50%);
  object-fit:contain;
  filter:drop-shadow(0 .12vh .18vh rgba(0,0,0,.55));
}
.cl-jewel-top{top:-.84vh}
.cl-jewel-bottom{bottom:-.84vh}

/* Content sits above decoration */
.login-panel.login-coded > h1,
.login-panel.login-coded > .coded-title-rule,
.login-panel.login-coded > form{
  position:relative !important;
  z-index:2 !important;
}

/* Header */
.login-panel.login-coded h1{
  position:relative !important;
  top:auto !important;
  left:auto !important;
  right:auto !important;

  margin:0 !important;
  padding:0 !important;

  text-align:center !important;
  text-transform:uppercase !important;
  font-size:2.62vh !important;
  line-height:1 !important;
  font-weight:500 !important;
  color:#efd89c !important;
  text-shadow:0 .15vh .26vh #000 !important;
}

.coded-title-rule{
  width:78%;
  height:1.4vh;
  margin:.72vh auto 1.55vh;
}
.coded-title-rule::before,
.coded-title-rule::after{
  content:"";
  position:absolute;
  top:50%;
  width:43%;
  height:1px;
  background:linear-gradient(90deg,transparent,#ba8730);
}
.coded-title-rule::before{left:0}
.coded-title-rule::after{
  right:0;
  transform:scaleX(-1);
}
.coded-title-rule span{
  position:absolute;
  left:50%;
  top:50%;
  width:.82vh;
  height:.82vh;
  transform:translate(-50%,-50%) rotate(45deg);
  border:1px solid #d7a84c;
  background:#6d160c;
  box-shadow:0 0 .35vh rgba(220,164,62,.32);
}

/* Real normal-flow form */
.login-panel.login-coded form{
  position:relative !important;
  inset:auto !important;
  display:flex !important;
  flex-direction:column !important;
  gap:1.05vh !important;
  width:100% !important;
  height:auto !important;
}

/* Input boxes are CODE */
.login-panel.login-coded .input-row{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;

  width:100% !important;
  height:5.0vh !important;
  min-height:5.0vh !important;

  display:flex !important;
  align-items:center !important;

  border:1px solid rgba(161,116,39,.92) !important;
  border-radius:.18vh !important;

  background:
    linear-gradient(180deg,rgba(6,13,15,.92),rgba(4,9,10,.94)) !important;

  box-shadow:
    inset 0 0 0 1px rgba(24,28,27,.94),
    inset 0 .25vh .8vh rgba(0,0,0,.36),
    0 .12vh .28vh rgba(0,0,0,.28) !important;
}
.login-panel.login-coded .username-row,
.login-panel.login-coded .password-row{
  top:auto !important;
}
.login-panel.login-coded .input-row:focus-within{
  border-color:#d6a94c !important;
  box-shadow:
    inset 0 0 0 1px rgba(43,45,38,.96),
    0 0 .65vh rgba(211,158,57,.22) !important;
}
.login-panel.login-coded .ico{
  width:3.85vh !important;
  height:100% !important;
}
.login-panel.login-coded .ico img{
  width:2.10vh !important;
  height:2.10vh !important;
}
.login-panel.login-coded .input-row input{
  height:100% !important;
  font-size:1.38vh !important;
  padding:0 .65vh !important;
}

/* Remember / forgot */
.login-panel.login-coded .options{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;

  width:100% !important;
  height:2.15vh !important;

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

  font-size:1.04vh !important;
  line-height:1 !important;
  margin:.05vh 0 .15vh !important;
}
.login-panel.login-coded .options label{
  display:flex !important;
  align-items:center !important;
  gap:.38vh !important;
}
.login-panel.login-coded .options a{
  font-size:1.03vh !important;
}

/* CODED red login button – no finished button PNG */
.login-panel.login-coded .login-submit{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;

  width:100% !important;
  height:5.15vh !important;

  margin:.12vh 0 .18vh !important;
  border:1px solid #b07922 !important;
  border-radius:.32vh !important;

  background:
    linear-gradient(180deg,#a91e18 0%,#75110d 46%,#4c0907 100%) !important;

  color:#f3dda6 !important;
  font-size:1.68vh !important;

  box-shadow:
    inset 0 0 0 1px #e0ad4b,
    inset 0 .34vh .55vh rgba(255,111,54,.20),
    inset 0 -.38vh .55vh rgba(38,0,0,.38),
    0 .18vh .35vh rgba(0,0,0,.36) !important;
}
.login-panel.login-coded .login-submit::before,
.login-panel.login-coded .login-submit::after{
  content:"" !important;
  position:absolute !important;
  top:50% !important;
  width:1.25vh !important;
  height:1.25vh !important;
  transform:translateY(-50%) rotate(45deg) !important;
  border:1px solid #e1b154 !important;
  background:#690d09 !important;
  box-shadow:0 0 .22vh #2c0000 !important;
  z-index:0 !important;
}
.login-panel.login-coded .login-submit::before{left:.58vh !important}
.login-panel.login-coded .login-submit::after{right:.58vh !important}
.login-panel.login-coded .login-submit span{
  position:relative !important;
  z-index:2 !important;
}

/* CODED OR divider */
.login-panel.login-coded .coded-or{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;

  height:2.55vh !important;
  width:100% !important;

  display:grid !important;
  grid-template-columns:1fr auto 1fr !important;
  align-items:center !important;
  gap:.9vh !important;

  margin:.02vh 0 !important;
}
.login-panel.login-coded .coded-or i{
  display:block !important;
  height:1px !important;
  background:linear-gradient(90deg,transparent,#b68732) !important;
}
.login-panel.login-coded .coded-or i:last-child{
  transform:scaleX(-1);
}
.login-panel.login-coded .coded-or span{
  color:#dfbd68 !important;
  font-size:1.15vh !important;
  text-transform:uppercase !important;
}

/* Create account box is CODE too */
.login-panel.login-coded .create-account{
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;

  width:100% !important;
  height:5.05vh !important;

  border:1px solid rgba(161,116,39,.92) !important;
  border-radius:.18vh !important;

  background:
    linear-gradient(180deg,rgba(10,18,19,.96),rgba(4,9,10,.96)) !important;

  color:#edd8a7 !important;
  font-size:1.30vh !important;

  box-shadow:
    inset 0 0 0 1px rgba(27,31,29,.95),
    0 .14vh .30vh rgba(0,0,0,.28) !important;
}
.login-panel.login-coded .create-icon{
  display:inline-flex !important;
  width:2.05vh !important;
  height:2.05vh !important;
  margin-right:.45vh !important;
}
.login-panel.login-coded .create-icon img{
  width:100% !important;
  height:100% !important;
}

/* Hover */
.login-panel.login-coded .login-submit:hover{
  filter:brightness(1.10) !important;
}
.login-panel.login-coded .create-account:hover{
  border-color:#d3a049 !important;
  filter:brightness(1.08) !important;
}

@media(max-width:900px){
  .login-panel.login-coded{
    left:50% !important;
    right:auto !important;
    top:950px !important;
    transform:translateX(-50%) !important;

    width:min(390px,92%) !important;
    min-height:430px !important;

    padding:32px 26px 25px !important;
  }

  .cl-corner{width:52px;height:52px}
  .cl-jewel{width:42px;height:32px}
  .cl-jewel-top{top:-9px}
  .cl-jewel-bottom{bottom:-9px}

  .login-panel.login-coded h1{font-size:27px !important}
  .login-panel.login-coded .input-row{
    height:50px !important;
    min-height:50px !important;
  }
  .login-panel.login-coded .input-row input{font-size:15px !important}
  .login-panel.login-coded .options{
    height:25px !important;
    font-size:11px !important;
  }
  .login-panel.login-coded .options a{font-size:11px !important}
  .login-panel.login-coded .login-submit{
    height:50px !important;
    font-size:17px !important;
  }
  .login-panel.login-coded .create-account{
    height:50px !important;
    font-size:14px !important;
  }
}

/* V24 login composed cleanly from component assets */
.login-panel.login-v24{position:absolute!important;right:15.8vh!important;top:27.1%!important;width:37.2vh!important;height:auto!important;min-height:0!important;padding:3.35vh 2.75vh 2.85vh!important;background:transparent!important;border:0!important;box-shadow:none!important;filter:none!important;overflow:visible!important;isolation:isolate;display:flex!important;flex-direction:column!important}
.login-v24:before,.login-v24:after,.login-v24>.corner,.login-v24>.coded-login-decoration{display:none!important}
.v24-frame{position:absolute;inset:0;z-index:0;pointer-events:none}.v24-fill{position:absolute;left:1.65vh;right:1.65vh;top:1.7vh;bottom:1.7vh;background:linear-gradient(rgba(4,9,10,.91),rgba(3,7,8,.97)),url('assets/v24_texture.png?v=24') center/18vh 18vh repeat;box-shadow:inset 0 0 1.7vh #0008,0 .45vh 1.6vh #0007}
.v24-piece{position:absolute;display:block;max-width:none;pointer-events:none;filter:drop-shadow(0 .08vh .16vh #0009)}
.v24-tl,.v24-tr,.v24-bl,.v24-br{width:4.25vh;height:4.25vh;object-fit:contain}.v24-tl{left:-.15vh;top:-.15vh;object-position:left top}.v24-tr{right:-.15vh;top:-.15vh;object-position:right top}.v24-bl{left:-.15vh;bottom:-.15vh;object-position:left bottom}.v24-br{right:-.15vh;bottom:-.15vh;object-position:right bottom}
.v24-top,.v24-bottom{left:3.7vh;right:3.7vh;width:auto;height:1.55vh;object-fit:fill}.v24-top{top:.04vh}.v24-bottom{bottom:.04vh}
.v24-left,.v24-right{top:3.65vh;bottom:3.65vh;height:auto;width:1.55vh;object-fit:fill}.v24-left{left:.03vh}.v24-right{right:.03vh}
.login-v24>h1,.login-v24>.v24-title-rule,.login-v24>form{position:relative!important;z-index:2!important}.login-v24 h1{position:relative!important;inset:auto!important;margin:0!important;padding:0!important;text-align:center!important;text-transform:uppercase!important;font-size:2.45vh!important;line-height:1.05!important;font-weight:500!important;color:#edd79f!important;text-shadow:0 .14vh .25vh #000!important}
.v24-title-rule{height:1.25vh;margin:.55vh auto 1.05vh;width:84%;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.72vh}.v24-title-rule i{height:1px;background:linear-gradient(90deg,transparent,#b88730)}.v24-title-rule i:last-child{transform:scaleX(-1)}.v24-title-rule b{width:.7vh;height:.7vh;transform:rotate(45deg);border:1px solid #d7aa50;background:#76130d}
.login-v24 form{position:relative!important;inset:auto!important;display:flex!important;flex-direction:column!important;gap:.78vh!important;width:100%!important;height:auto!important}
.v24-input{position:relative;display:flex;align-items:center;width:100%;height:4.75vh;border:1px solid #a97827;background:linear-gradient(#071012ee,#03090bee);box-shadow:inset 0 0 0 1px #1b201eee,inset 0 .18vh .6vh #0007;box-sizing:border-box}.v24-input:before,.v24-input:after{content:'';position:absolute;top:50%;width:.55vh;height:.55vh;border:1px solid #b88934;transform:translateY(-50%) rotate(45deg);background:#111}.v24-input:before{left:-.32vh}.v24-input:after{right:-.32vh}.v24-input .ico{width:3.8vh!important;min-width:3.8vh!important;height:100%!important;display:grid!important;place-items:center!important}.v24-input .ico img{width:1.95vh!important;height:1.95vh!important;object-fit:contain}.v24-input input{position:relative!important;inset:auto!important;flex:1;height:100%!important;background:transparent!important;border:0!important;outline:0!important;color:#ead6a4!important;font-size:1.34vh!important;padding:0 1vh 0 .1vh!important}.v24-input input::placeholder{color:#b79f69}.v24-input:focus-within{border-color:#d3a346;box-shadow:inset 0 0 0 1px #2b302a,0 0 .5vh #d5a44433}
.v24-options{position:relative!important;inset:auto!important;width:100%!important;height:2.3vh!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:space-between!important;font-size:1.04vh!important;line-height:1!important;white-space:nowrap}.v24-options a{font-size:1.02vh!important;color:#d8b45d!important}.v24-remember{display:flex;align-items:center;gap:.34vh;cursor:pointer}.v24-checkbox{position:absolute!important;opacity:0!important;width:1px!important;height:1px!important;pointer-events:none}.v24-checkmark{display:inline-block;width:1.82vh;height:1.82vh;flex:0 0 1.82vh;background:url('assets/v24_check_off.png?v=24') center/contain no-repeat;filter:drop-shadow(0 .06vh .11vh #0009)}.v24-checkbox:checked+.v24-checkmark{background-image:url('assets/v24_check_on.png?v=24')}.v24-checkbox:focus-visible+.v24-checkmark{outline:1px solid #e0b45a;outline-offset:.12vh}.v24-remember:hover .v24-checkmark{filter:brightness(1.12) drop-shadow(0 0 .18vh #dca54266)}
.v24-login-button{position:relative;width:100%;height:4.9vh;border:0;background:transparent;color:#f1dda8;font-family:inherit;font-size:1.55vh;font-weight:700;text-transform:uppercase;cursor:pointer;padding:0}.v24-btnskin{position:absolute;inset:0;pointer-events:none}.v24-btnskin img{position:absolute;top:0;height:100%;max-width:none;object-fit:fill;filter:drop-shadow(0 .09vh .16vh #0009)}.v24-btnskin .b-l{left:0;width:3.75vh;object-fit:contain;object-position:left center}.v24-btnskin .b-r{right:0;width:3.75vh;object-fit:contain;object-position:right center}.v24-btnskin .b-c{left:3.15vh;right:3.15vh;width:auto}.v24-login-button .lbl{position:relative;z-index:2}.v24-login-button:hover{filter:brightness(1.08)}
.v24-or{height:2.1vh;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:.75vh}.v24-or i{height:1px;background:linear-gradient(90deg,transparent,#b68431)}.v24-or i:last-child{transform:scaleX(-1)}.v24-or span{font-size:1.08vh;color:#dbba68;text-transform:uppercase}
.v24-create{height:4.75vh;width:100%;border:1px solid #9d7024;background:linear-gradient(#091113f4,#040a0bf7);box-shadow:inset 0 0 0 1px #1c211f;color:#ead5a0;font-family:inherit;font-size:1.23vh;font-weight:700;text-transform:uppercase;display:flex;align-items:center;justify-content:center;gap:.45vh;cursor:pointer}.v24-create:before,.v24-create:after{content:'';width:.48vh;height:.48vh;border:1px solid #ba8a35;transform:rotate(45deg);background:#101313}.v24-create .create-icon{width:1.9vh!important;height:1.9vh!important;display:inline-flex!important;margin:0!important}.v24-create .create-icon img{width:100%!important;height:100%!important;object-fit:contain}.v24-create:hover{filter:brightness(1.08)}
@media(max-width:900px){.login-panel.login-v24{left:50%!important;right:auto!important;top:950px!important;transform:translateX(-50%)!important;width:min(390px,92%)!important;padding:32px 28px 28px!important}.v24-tl,.v24-tr,.v24-bl,.v24-br{width:45px;height:45px}.v24-top,.v24-bottom{left:39px;right:39px;height:17px}.v24-left,.v24-right{top:39px;bottom:39px;width:17px}.v24-fill{left:17px;right:17px;top:17px;bottom:17px}.login-v24 h1{font-size:27px!important}.v24-input{height:50px}.v24-input input{font-size:15px!important}.v24-options{height:27px!important;font-size:11px!important}.v24-options a{font-size:11px!important}.v24-checkmark{width:20px;height:20px;flex-basis:20px}.v24-login-button{height:52px;font-size:17px}.v24-create{height:50px;font-size:14px}}


/* ============================================================
   V25 – LOGIN VISUAL CLEANUP
   Fixes the screenshot issue from V24:
   - clean 3-slice login button
   - no overlapping caps
   - checkbox + labels aligned
   - more breathing room between options and button
   ============================================================ */

.login-panel.login-v24{
  width:38.2vh !important;
  padding:3.45vh 2.90vh 2.95vh !important;
}

/* Give title/form a little more interior room. */
.login-v24 form{
  gap:.92vh !important;
}

/* Inputs remain coded boxes, but with calmer end diamonds. */
.v24-input{
  height:4.72vh !important;
}
.v24-input::before,
.v24-input::after{
  width:.48vh !important;
  height:.48vh !important;
}

/* ---------- remember + forgot row ---------- */
.v24-options{
  height:2.55vh !important;
  min-height:2.55vh !important;
  margin:.05vh 0 .16vh !important;
  font-size:1.02vh !important;
  overflow:visible !important;
}
.v24-options a{
  font-size:1.00vh !important;
  line-height:1 !important;
}
.v24-remember{
  gap:.42vh !important;
  line-height:1 !important;
}

/* Asset checkbox: clear on/off states, better size and alignment. */
.v24-checkmark{
  width:1.58vh !important;
  height:1.58vh !important;
  flex:0 0 1.58vh !important;
  transform:translateY(-.02vh);
  background-size:contain !important;
}
.v24-checkbox:checked + .v24-checkmark{
  background-image:url('assets/v24_check_on.png?v=24') !important;
}
.v24-checkbox:not(:checked) + .v24-checkmark{
  background-image:url('assets/v24_check_off.png?v=24') !important;
}

/* ---------- clean three-slice red login button ---------- */
.v24-login-button{
  height:4.70vh !important;
  margin:.18vh 0 .08vh !important;
  padding:0 !important;
  overflow:visible !important;
  line-height:1 !important;
}

.v24-btnskin{
  position:absolute !important;
  inset:0 !important;
  overflow:visible !important;
}

.v24-btnskin img{
  top:0 !important;
  height:100% !important;
  filter:drop-shadow(0 .10vh .16vh rgba(0,0,0,.62)) !important;
}

/* Small fixed caps + stretched middle.
   The center image contains ONLY the middle now. */
.v24-btnskin .b-l{
  left:0 !important;
  width:4.25vh !important;
  height:100% !important;
  object-fit:fill !important;
}
.v24-btnskin .b-r{
  right:0 !important;
  width:4.25vh !important;
  height:100% !important;
  object-fit:fill !important;
}
.v24-btnskin .b-c{
  left:3.55vh !important;
  right:3.55vh !important;
  width:auto !important;
  height:100% !important;
  object-fit:fill !important;
}

.v24-login-button .lbl{
  position:relative !important;
  z-index:5 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:100% !important;
  font-size:1.45vh !important;
  text-shadow:0 .12vh .22vh rgba(35,0,0,.95) !important;
}

/* Keep the OR separator clearly below the red button. */
.v24-or{
  height:2.22vh !important;
  margin:.03vh 0 .02vh !important;
}
.v24-or span{
  font-size:1.04vh !important;
}

/* Create-account button gets a touch more air and remains fully readable. */
.v24-create{
  height:4.72vh !important;
  margin-top:.03vh !important;
}

/* Subtle frame alignment correction */
.v24-top,
.v24-bottom{
  left:3.55vh !important;
  right:3.55vh !important;
}
.v24-left,
.v24-right{
  top:3.55vh !important;
  bottom:3.55vh !important;
}

@media(max-width:900px){
  .login-panel.login-v24{
    width:min(400px,92%) !important;
  }
  .v24-options{
    height:29px !important;
    min-height:29px !important;
  }
  .v24-checkmark{
    width:18px !important;
    height:18px !important;
    flex-basis:18px !important;
  }
  .v24-login-button{
    height:50px !important;
  }
  .v24-btnskin .b-l,
  .v24-btnskin .b-r{
    width:45px !important;
  }
  .v24-btnskin .b-c{
    left:38px !important;
    right:38px !important;
  }
}


/* ============================================================
   V26 – REGISTRATION FLOW + MEDIEVAL TYPOGRAPHY
   ============================================================ */

/* No external font download required. On Windows, Palatino/Book Antiqua
   gives a more medieval/fantasy serif feeling while remaining readable. */
:root{
  --castle-font:
    "Palatino Linotype",
    "Book Antiqua",
    Palatino,
    "Times New Roman",
    Georgia,
    serif;
}

html,
body,
button,
input,
select,
textarea{
  font-family:var(--castle-font) !important;
}

/* Stronger medieval treatment for UI labels/headings. */
.nav,
.header-login,
.sprite-button,
.hero-copy,
.feature strong,
.login-panel h1,
.login-panel button,
.footer-links{
  font-family:var(--castle-font) !important;
  letter-spacing:.025em;
}

.nav,
.header-login,
.sprite-button,
.login-panel h1,
.login-panel button{
  font-variant:small-caps;
}

/* ------------------------------------------------------------
   Login: "Konto erstellen" and ODER are gone.
   Compact the panel and give the remaining form more breathing room.
   ------------------------------------------------------------ */
.login-panel.login-v24{
  width:37.7vh !important;
  padding:3.45vh 2.90vh 3.15vh !important;
}

.login-v24 form{
  gap:1.00vh !important;
}

.v24-options{
  margin:.08vh 0 .42vh !important;
}

/* Keep checkbox states from the asset. */
.v24-checkmark{
  width:1.64vh !important;
  height:1.64vh !important;
  flex-basis:1.64vh !important;
}

/* ------------------------------------------------------------
   Login button:
   use the red master asset as a CSS-scaled skin.
   This removes the visually broken separated caps seen in V25.
   It is still an asset-driven UI component, not a browser button.
   ------------------------------------------------------------ */
.v24-login-button{
  height:5.05vh !important;
  margin:.20vh 0 .15vh !important;
  background:
    url('assets/button_red_master_v17.png?v=26')
    center / 100% 100% no-repeat !important;
  border:0 !important;
  box-shadow:none !important;
  overflow:visible !important;
}

.v24-login-button .v24-btnskin{
  display:none !important;
}

.v24-login-button .lbl{
  position:relative !important;
  z-index:3 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  height:100% !important;
  color:#f0dba5 !important;
  font-size:1.43vh !important;
  font-weight:700 !important;
  text-transform:uppercase !important;
  letter-spacing:.035em !important;
  text-shadow:
    0 .12vh .18vh #250000,
    0 0 .18vh rgba(255,205,104,.18) !important;
}

/* The login panel now ends cleanly after the login button. */
.login-panel.login-v24 form > .v24-login-button:last-child{
  margin-bottom:.20vh !important;
}

/* Slightly improve checkbox/forgot readability. */
.v24-options,
.v24-options a{
  letter-spacing:.008em !important;
}

/* "JETZT SPIELEN" stays visually the same, but is now the register CTA. */
.top-play,
.hero-cta{
  cursor:pointer;
}

@media(max-width:900px){
  .login-panel.login-v24{
    width:min(390px,92%) !important;
    padding-bottom:30px !important;
  }
  .v24-checkmark{
    width:19px !important;
    height:19px !important;
    flex-basis:19px !important;
  }
  .v24-login-button{
    height:52px !important;
  }
  .v24-login-button .lbl{
    font-size:17px !important;
  }
}


/* ============================================================
   V27 – SEAMLESS LOGIN FRAME
   Side/top/bottom rails are repeated from small asset sections.
   No stretching and no transparent gaps between frame pieces.
   ============================================================ */

.login-panel.login-v24{
  width:37.8vh !important;
  padding:3.55vh 2.95vh 3.15vh !important;
}

/* old stretched pieces are not used anymore */
.login-v24 .v24-top,
.login-v24 .v24-right,
.login-v24 .v24-bottom,
.login-v24 .v24-left{
  display:none !important;
}

.v27-frame{
  position:absolute !important;
  inset:0 !important;
  overflow:visible !important;
  pointer-events:none !important;
}

/* Fill reaches under the rails, so no background shines through. */
.v27-fill{
  left:1.12vh !important;
  right:1.12vh !important;
  top:1.12vh !important;
  bottom:1.12vh !important;
}

/* Repeated rails */
.v27-rail{
  position:absolute;
  z-index:1;
  pointer-events:none;
  filter:drop-shadow(0 .08vh .14vh rgba(0,0,0,.58));
}

.v27-rail-top{
  left:3.30vh;
  right:3.30vh;
  top:.06vh;
  height:1.48vh;
  background:
    url('assets/v27_rail_top.png?v=27')
    left center / auto 100% repeat-x;
}

.v27-rail-bottom{
  left:3.30vh;
  right:3.30vh;
  bottom:.06vh;
  height:1.48vh;
  background:
    url('assets/v27_rail_bottom.png?v=27')
    left center / auto 100% repeat-x;
}

/* EXACTLY what was requested:
   the left/right rail tile repeats vertically as many times as needed. */
.v27-rail-left{
  top:3.15vh;
  bottom:3.15vh;
  left:.08vh;
  width:1.48vh;
  background:
    url('assets/v27_rail_left.png?v=27')
    center top / 100% auto repeat-y;
}

.v27-rail-right{
  top:3.15vh;
  bottom:3.15vh;
  right:.08vh;
  width:1.48vh;
  background:
    url('assets/v27_rail_right.png?v=27')
    center top / 100% auto repeat-y;
}

/* Corners sit over the repeating rails and cover every join. */
.v27-corner{
  z-index:3 !important;
}

/* Slight overlap is intentional: it removes 1px/transparent seams. */
.v24-tl{
  left:-.12vh !important;
  top:-.12vh !important;
}
.v24-tr{
  right:-.12vh !important;
  top:-.12vh !important;
}
.v24-bl{
  left:-.12vh !important;
  bottom:-.12vh !important;
}
.v24-br{
  right:-.12vh !important;
  bottom:-.12vh !important;
}

/* ------------------------------------------------------------
   FORM SPACING
   Removes the cramped/overlapping look in the screenshot.
   ------------------------------------------------------------ */
.login-v24 form{
  gap:1.02vh !important;
}

.v24-input{
  height:4.82vh !important;
  min-height:4.82vh !important;
  flex:0 0 4.82vh !important;
}

/* The checkbox row gets its own clean line below password. */
.v24-options{
  height:2.28vh !important;
  min-height:2.28vh !important;
  margin:.12vh 0 .34vh !important;
  align-items:center !important;
  overflow:visible !important;
}

.v24-remember{
  height:100% !important;
  display:flex !important;
  align-items:center !important;
}

.v24-checkmark{
  width:1.62vh !important;
  height:1.62vh !important;
  flex:0 0 1.62vh !important;
}

/* Login button starts below the option row, never on top of it. */
.v24-login-button{
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:5.05vh !important;
  flex:0 0 5.05vh !important;
  margin:.04vh 0 0 !important;
}

/* Hide obsolete 3-slice images because V26 already uses the clean master button. */
.v24-login-button .v24-btnskin{
  display:none !important;
}

/* Make the title block and inputs sit slightly farther from the actual rail. */
.login-v24 > h1,
.login-v24 > .v24-title-rule,
.login-v24 > form{
  width:100% !important;
  box-sizing:border-box !important;
}

/* Prevent long translations from running into each other. */
.v24-options{
  gap:1vh !important;
}
.v24-options a{
  margin-left:auto !important;
  text-align:right !important;
}

/* ------------------------------------------------------------
   RESPONSIVE
   Same repeated-rail system on smaller screens.
   ------------------------------------------------------------ */
@media(max-width:900px){
  .login-panel.login-v24{
    width:min(390px,92%) !important;
    padding:36px 30px 31px !important;
  }

  .v27-fill{
    left:12px !important;
    right:12px !important;
    top:12px !important;
    bottom:12px !important;
  }

  .v27-rail-top,
  .v27-rail-bottom{
    left:35px !important;
    right:35px !important;
    height:16px !important;
  }

  .v27-rail-left,
  .v27-rail-right{
    top:34px !important;
    bottom:34px !important;
    width:16px !important;
  }

  .login-v24 form{
    gap:10px !important;
  }

  .v24-input{
    height:50px !important;
    min-height:50px !important;
    flex-basis:50px !important;
  }

  .v24-options{
    height:25px !important;
    min-height:25px !important;
    margin:2px 0 5px !important;
  }

  .v24-login-button{
    height:52px !important;
    flex-basis:52px !important;
  }
}


/* ============================================================
   V28 – LOGIN SPACING + SEAMLESS REPEATED FRAME
   Fixes the screenshot where the remember row was still positioned
   by an old high-specificity .login-panel .options rule.
   ============================================================ */

/* Stronger specificity than all legacy absolute-position rules. */
.login-panel.login-v24 form{
  position:relative !important;
  inset:auto !important;
  display:flex !important;
  flex-direction:column !important;
  width:100% !important;
  height:auto !important;
  gap:1.02vh !important;
}

.login-panel.login-v24 .v24-options{
  position:relative !important;
  inset:auto !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  width:100% !important;
  height:2.55vh !important;
  min-height:2.55vh !important;
  margin:.02vh 0 .52vh !important;
  padding:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:1.1vh !important;
  overflow:visible !important;
  white-space:nowrap !important;
  line-height:1 !important;
  box-sizing:border-box !important;
}
.login-panel.login-v24 .v24-options label{
  position:relative !important;
  inset:auto !important;
  display:flex !important;
  align-items:center !important;
  gap:.42vh !important;
  height:100% !important;
  margin:0 !important;
  padding:0 !important;
}
.login-panel.login-v24 .v24-options a{
  position:relative !important;
  inset:auto !important;
  margin:0 0 0 auto !important;
  padding:0 !important;
  text-align:right !important;
  align-self:center !important;
  line-height:1 !important;
}

/* Keep the native checkbox completely out of layout; the asset is the visual state. */
.login-panel.login-v24 .v24-checkbox{
  position:absolute !important;
  opacity:0 !important;
  width:1px !important;
  height:1px !important;
  min-width:1px !important;
  min-height:1px !important;
  margin:0 !important;
  padding:0 !important;
  pointer-events:none !important;
}
.login-panel.login-v24 .v24-checkmark{
  width:1.62vh !important;
  height:1.62vh !important;
  flex:0 0 1.62vh !important;
  margin:0 !important;
}

/* Inputs get their own rows; nothing can sit on top of password anymore. */
.login-panel.login-v24 .v24-input{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:4.82vh !important;
  min-height:4.82vh !important;
  flex:0 0 4.82vh !important;
  margin:0 !important;
}

.login-panel.login-v24 .v24-login-button{
  position:relative !important;
  inset:auto !important;
  width:100% !important;
  height:5.08vh !important;
  min-height:5.08vh !important;
  flex:0 0 5.08vh !important;
  margin:0 !important;
}

/* Slightly more room inside the now naturally growing box. */
.login-panel.login-v24{
  width:37.8vh !important;
  height:auto !important;
  min-height:0 !important;
  padding:3.55vh 2.95vh 3.35vh !important;
}

/* Repeated frame rails: tight alpha-cropped tiles, deliberately overlap corners. */
.login-panel.login-v24 .v27-rail-top{
  left:2.95vh !important;
  right:2.95vh !important;
  top:.04vh !important;
  height:1.38vh !important;
  background:url('assets/v28_rail_top.png?v=28') left center / auto 100% repeat-x !important;
}
.login-panel.login-v24 .v27-rail-bottom{
  left:2.95vh !important;
  right:2.95vh !important;
  bottom:.04vh !important;
  height:1.38vh !important;
  background:url('assets/v28_rail_bottom.png?v=28') left center / auto 100% repeat-x !important;
}
.login-panel.login-v24 .v27-rail-left{
  top:2.95vh !important;
  bottom:2.95vh !important;
  left:.02vh !important;
  width:1.38vh !important;
  background:url('assets/v28_rail_left.png?v=28') center top / 100% auto repeat-y !important;
}
.login-panel.login-v24 .v27-rail-right{
  top:2.95vh !important;
  bottom:2.95vh !important;
  right:.02vh !important;
  width:1.38vh !important;
  background:url('assets/v28_rail_right.png?v=28') center top / 100% auto repeat-y !important;
}

/* Corners overlap rails instead of meeting edge-to-edge = no tiny gaps. */
.login-panel.login-v24 .v24-tl{left:-.16vh !important;top:-.16vh !important}
.login-panel.login-v24 .v24-tr{right:-.16vh !important;top:-.16vh !important}
.login-panel.login-v24 .v24-bl{left:-.16vh !important;bottom:-.16vh !important}
.login-panel.login-v24 .v24-br{right:-.16vh !important;bottom:-.16vh !important}
.login-panel.login-v24 .v27-fill{
  left:1.00vh !important;
  right:1.00vh !important;
  top:1.00vh !important;
  bottom:1.00vh !important;
}

@media(max-width:900px){
  .login-panel.login-v24 .v24-options{
    position:relative !important;
    inset:auto !important;
    height:27px !important;
    min-height:27px !important;
    margin:1px 0 6px !important;
  }
  .login-panel.login-v24 .v24-input{
    height:50px !important;
    min-height:50px !important;
    flex-basis:50px !important;
  }
  .login-panel.login-v24 .v24-login-button{
    height:52px !important;
    min-height:52px !important;
    flex-basis:52px !important;
  }
  .login-panel.login-v24 .v27-rail-top,
  .login-panel.login-v24 .v27-rail-bottom{
    left:31px !important;
    right:31px !important;
    height:15px !important;
  }
  .login-panel.login-v24 .v27-rail-left,
  .login-panel.login-v24 .v27-rail-right{
    top:31px !important;
    bottom:31px !important;
    width:15px !important;
  }
}


/* ============================================================
   V29 FINAL LOGIN COMPONENT
   Fresh isolated classes: old login CSS cannot interfere.
   No new design assets; only existing files are reused.
   ============================================================ */

.login-final,
.login-final *{
  box-sizing:border-box;
}

.login-final{
  position:absolute;
  right:15.8vh;
  top:26.0%;
  width:37.8vh;
  height:auto;
  padding:3.15vh 2.85vh 2.05vh;
  color:#ead6a4;
  background:transparent;
  border:0;
  box-shadow:none;
  isolation:isolate;
  font-family:var(--castle-font,"Palatino Linotype","Book Antiqua",Palatino,Georgia,serif);
}

/* ---------- frame: corners + repeated straight rail pieces ---------- */
.login-final__frame{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.login-final__fill{
  position:absolute;
  inset:.82vh;
  background:
    linear-gradient(rgba(3,8,9,.94),rgba(3,7,8,.975)),
    url('assets/v24_texture.png?v=24') center/18vh 18vh repeat;
  box-shadow:
    inset 0 0 1.6vh rgba(0,0,0,.68),
    0 .45vh 1.4vh rgba(0,0,0,.42);
}

.login-final__rail{
  position:absolute;
  z-index:1;
  pointer-events:none;
  filter:drop-shadow(0 .06vh .12vh rgba(0,0,0,.6));
}

/* Repeat the straight sections as often as necessary. */
.login-final__rail--top{
  left:3.20vh;
  right:3.20vh;
  top:0;
  height:1.38vh;
  background:url('assets/v28_rail_top.png?v=28') left center/auto 100% repeat-x;
}
.login-final__rail--bottom{
  left:3.20vh;
  right:3.20vh;
  bottom:0;
  height:1.38vh;
  background:url('assets/v28_rail_bottom.png?v=28') left center/auto 100% repeat-x;
}
.login-final__rail--left{
  top:3.10vh;
  bottom:3.10vh;
  left:0;
  width:1.38vh;
  background:url('assets/v28_rail_left.png?v=28') center top/100% auto repeat-y;
}
.login-final__rail--right{
  top:3.10vh;
  bottom:3.10vh;
  right:0;
  width:1.38vh;
  background:url('assets/v28_rail_right.png?v=28') center top/100% auto repeat-y;
}

.login-final__corner{
  position:absolute;
  z-index:3;
  width:4.10vh;
  height:4.10vh;
  object-fit:contain;
  max-width:none;
  filter:drop-shadow(0 .08vh .14vh rgba(0,0,0,.65));
}
.login-final__corner--tl{left:-.10vh;top:-.10vh;object-position:left top}
.login-final__corner--tr{right:-.10vh;top:-.10vh;object-position:right top}
.login-final__corner--bl{left:-.10vh;bottom:-.10vh;object-position:left bottom}
.login-final__corner--br{right:-.10vh;bottom:-.10vh;object-position:right bottom}

/* ---------- content ---------- */
.login-final > h1,
.login-final__title-rule,
.login-final__form{
  position:relative;
  z-index:5;
}

.login-final > h1{
  margin:0;
  padding:0;
  text-align:center;
  text-transform:uppercase;
  font-size:2.42vh;
  line-height:1;
  font-weight:500;
  letter-spacing:.025em;
  color:#efd8a0;
  text-shadow:0 .14vh .24vh #000;
}

.login-final__title-rule{
  width:82%;
  height:1.10vh;
  margin:.52vh auto .88vh;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:.70vh;
}
.login-final__title-rule i{
  height:1px;
  background:linear-gradient(90deg,transparent,#b88730);
}
.login-final__title-rule i:last-child{transform:scaleX(-1)}
.login-final__title-rule b{
  width:.68vh;
  height:.68vh;
  transform:rotate(45deg);
  border:1px solid #d7aa50;
  background:#76130d;
}

.login-final__form{
  display:flex;
  flex-direction:column;
  gap:.88vh;
  width:100%;
  margin:0;
}

.login-final__field{
  position:relative;
  width:100%;
  height:4.65vh;
  min-height:4.65vh;
  display:flex;
  align-items:center;
  margin:0;
  border:1px solid #a97827;
  background:linear-gradient(#071012ee,#03090bee);
  box-shadow:inset 0 0 0 1px #1b201eee,inset 0 .18vh .6vh #0007;
}
.login-final__field::before,
.login-final__field::after{
  content:"";
  position:absolute;
  top:50%;
  width:.50vh;
  height:.50vh;
  border:1px solid #b88934;
  background:#111;
  transform:translateY(-50%) rotate(45deg);
}
.login-final__field::before{left:-.29vh}
.login-final__field::after{right:-.29vh}
.login-final__field:focus-within{
  border-color:#d3a346;
  box-shadow:inset 0 0 0 1px #2b302a,0 0 .45vh rgba(213,164,68,.20);
}

.login-final__icon{
  width:3.65vh;
  min-width:3.65vh;
  height:100%;
  display:grid;
  place-items:center;
}
.login-final__icon img{
  width:1.85vh;
  height:1.85vh;
  object-fit:contain;
  filter:drop-shadow(0 .08vh .11vh rgba(0,0,0,.7));
}

.login-final__field input{
  flex:1;
  min-width:0;
  height:100%;
  padding:0 .90vh 0 .05vh;
  border:0;
  outline:0;
  background:transparent;
  color:#ead6a4;
  font:inherit;
  font-size:1.28vh;
}
.login-final__field input::placeholder{color:#b79f69;opacity:1}

/* ---------- remember row: its own row, no overlap ---------- */
.login-final__options{
  width:100%;
  min-height:2.20vh;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.2vh;
  margin:0;
  padding:0 .05vh;
  white-space:nowrap;
  font-size:1.06vh;
  line-height:1;
}
.login-final__remember{
  display:flex;
  align-items:center;
  gap:.38vh;
  min-width:0;
  cursor:pointer;
}
.login-final__checkbox{
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
  pointer-events:none;
}
.login-final__checkmark{
  width:1.55vh;
  height:1.55vh;
  flex:0 0 1.55vh;
  background:url('assets/v24_check_off.png?v=24') center/contain no-repeat;
  filter:drop-shadow(0 .06vh .10vh rgba(0,0,0,.65));
}
.login-final__checkbox:checked + .login-final__checkmark{
  background-image:url('assets/v24_check_on.png?v=24');
}
.login-final__checkbox:focus-visible + .login-final__checkmark{
  outline:1px solid #e0b45a;
  outline-offset:.10vh;
}
.login-final__options a{
  margin-left:auto;
  color:#d8b45d;
  text-decoration:none;
  font-size:1.04vh;
}
.login-final__options a:hover{text-decoration:underline}

/* ---------- login button ---------- */
.login-final__submit{
  position:relative;
  width:100%;
  height:4.85vh;
  min-height:4.85vh;
  margin:.08vh 0 0;
  padding:0;
  border:0;
  background:url('assets/button_red_master_v17.png?v=26') center/100% 100% no-repeat;
  color:#f0dba5;
  font:inherit;
  font-size:1.42vh;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:.035em;
  text-shadow:0 .12vh .20vh #250000;
  cursor:pointer;
}
.login-final__submit:hover{filter:brightness(1.08)}
.login-final__submit:active{transform:translateY(.06vh)}

/* ---------- responsive ---------- */
@media(max-width:900px){
  .login-final{
    left:50%;
    right:auto;
    top:940px;
    transform:translateX(-50%);
    width:min(380px,92%);
    padding:31px 28px 22px;
  }
  .login-final__corner{width:44px;height:44px}
  .login-final__rail--top,
  .login-final__rail--bottom{left:34px;right:34px;height:15px}
  .login-final__rail--left,
  .login-final__rail--right{top:33px;bottom:33px;width:15px}
  .login-final > h1{font-size:27px}
  .login-final__title-rule{height:12px;margin:6px auto 9px}
  .login-final__form{gap:9px}
  .login-final__field{height:49px;min-height:49px}
  .login-final__field input{font-size:15px}
  .login-final__icon{width:39px;min-width:39px}
  .login-final__icon img{width:20px;height:20px}
  .login-final__options{min-height:24px;font-size:11px;gap:12px}
  .login-final__options a{font-size:11px}
  .login-final__checkmark{width:17px;height:17px;flex-basis:17px}
  .login-final__submit{height:51px;min-height:51px;font-size:16px}
}

/* ============================================================
   V30 – CODE-ONLY LOGIN FRAME FIX
   No new graphics. Uses existing v24 frame assets directly.
   The side frame pieces repeat vertically as often as needed.
   ============================================================ */

.login-final{
  width:37.8vh;
  padding:3.10vh 2.90vh 2.30vh;
}

/* Let the inner fill run underneath the frame so no seams can show. */
.login-final__fill{
  inset:.45vh;
}

/* Straight top/bottom rails stay repeatable. */
.login-final__rail--top{
  left:3.00vh;
  right:3.00vh;
  top:.05vh;
  height:1.42vh;
  background:url('assets/v28_rail_top.png?v=30') left center / auto 100% repeat-x;
}
.login-final__rail--bottom{
  left:3.00vh;
  right:3.00vh;
  bottom:.05vh;
  height:1.42vh;
  background:url('assets/v28_rail_bottom.png?v=30') left center / auto 100% repeat-x;
}

/* IMPORTANT: use the ORIGINAL left/right frame parts and repeat them.
   No stretched one-piece side and no generated/cropped replacement art. */
.login-final__rail--left{
  top:2.95vh;
  bottom:2.95vh;
  left:-.02vh;
  width:2.15vh;
  background-image:url('assets/v24_left.png?v=30');
  background-repeat:repeat-y;
  background-position:center top;
  background-size:100% auto;
}
.login-final__rail--right{
  top:2.95vh;
  bottom:2.95vh;
  right:-.02vh;
  width:2.15vh;
  background-image:url('assets/v24_right.png?v=30');
  background-repeat:repeat-y;
  background-position:center top;
  background-size:100% auto;
}

/* Corners overlap rails slightly so joins cannot open up at fractional pixels. */
.login-final__corner{
  width:4.18vh;
  height:4.18vh;
}
.login-final__corner--tl{left:-.14vh;top:-.14vh}
.login-final__corner--tr{right:-.14vh;top:-.14vh}
.login-final__corner--bl{left:-.14vh;bottom:-.14vh}
.login-final__corner--br{right:-.14vh;bottom:-.14vh}

/* Compact, deterministic vertical layout: no inherited gaps/absolute positioning. */
.login-final__title-rule{
  margin:.48vh auto .78vh;
}
.login-final__form{
  display:grid;
  grid-template-columns:1fr;
  grid-template-rows:4.65vh 4.65vh 2.15vh 4.85vh;
  row-gap:.78vh;
}
.login-final__field{
  height:4.65vh;
  min-height:0;
}
.login-final__options{
  min-height:0;
  height:2.15vh;
  margin:0;
  padding:0 .10vh;
  align-items:center;
}
.login-final__remember,
.login-final__options a{
  position:static;
  transform:none;
}
.login-final__checkmark{
  width:1.62vh;
  height:1.62vh;
  flex-basis:1.62vh;
}
.login-final__submit{
  height:4.85vh;
  min-height:0;
  margin:0;
  align-self:stretch;
}

@media(max-width:900px){
  .login-final{
    width:min(380px,92%);
    padding:31px 28px 23px;
  }
  .login-final__rail--top,
  .login-final__rail--bottom{
    left:32px;
    right:32px;
    height:15px;
  }
  .login-final__rail--left,
  .login-final__rail--right{
    top:31px;
    bottom:31px;
    width:22px;
  }
  .login-final__corner{width:45px;height:45px}
  .login-final__form{
    grid-template-rows:49px 49px 24px 51px;
    row-gap:8px;
  }
  .login-final__options{height:24px}
  .login-final__checkmark{width:18px;height:18px;flex-basis:18px}
  .login-final__submit{height:51px}
}

/* ============================================================
   V31 – CODE-ONLY FINAL RAIL FIX
   Uses only existing assets. No new design assets are created.
   The straight rail tiles repeat; decorated side pieces do not.
   ============================================================ */

.login-final__rail--left{
  top:2.82vh !important;
  bottom:2.82vh !important;
  left:.10vh !important;
  width:1.38vh !important;
  background-image:url('assets/v28_rail_left.png?v=31') !important;
  background-repeat:repeat-y !important;
  background-position:center top !important;
  background-size:100% 1.02vh !important;
}

.login-final__rail--right{
  top:2.82vh !important;
  bottom:2.82vh !important;
  right:.10vh !important;
  width:1.38vh !important;
  background-image:url('assets/v28_rail_right.png?v=31') !important;
  background-repeat:repeat-y !important;
  background-position:center top !important;
  background-size:100% 1.02vh !important;
}

.login-final__rail--top{
  left:2.90vh !important;
  right:2.90vh !important;
  top:.08vh !important;
  height:1.38vh !important;
  background-image:url('assets/v28_rail_top.png?v=31') !important;
  background-repeat:repeat-x !important;
  background-position:left center !important;
  background-size:2.04vh 100% !important;
}

.login-final__rail--bottom{
  left:2.90vh !important;
  right:2.90vh !important;
  bottom:.08vh !important;
  height:1.38vh !important;
  background-image:url('assets/v28_rail_bottom.png?v=31') !important;
  background-repeat:repeat-x !important;
  background-position:left center !important;
  background-size:2.04vh 100% !important;
}

/* Corners cover the rail ends by a few pixels so no seam can open. */
.login-final__corner{
  width:4.12vh !important;
  height:4.12vh !important;
  z-index:4 !important;
}
.login-final__corner--tl{left:-.08vh !important;top:-.08vh !important}
.login-final__corner--tr{right:-.08vh !important;top:-.08vh !important}
.login-final__corner--bl{left:-.08vh !important;bottom:-.08vh !important}
.login-final__corner--br{right:-.08vh !important;bottom:-.08vh !important}

/* Keep the dark center underneath every border pixel. */
.login-final__fill{
  inset:.34vh !important;
}

/* Keep all form rows deterministic and separated. */
.login-final__form{
  grid-template-rows:4.65vh 4.65vh 2.30vh 4.85vh !important;
  row-gap:.82vh !important;
}
.login-final__options{
  height:2.30vh !important;
  min-height:2.30vh !important;
  padding:0 .08vh !important;
}
.login-final__checkmark{
  width:1.66vh !important;
  height:1.66vh !important;
  flex-basis:1.66vh !important;
}

@media(max-width:900px){
  .login-final__rail--left,
  .login-final__rail--right{
    top:30px !important;
    bottom:30px !important;
    width:15px !important;
    background-size:100% 10px !important;
  }
  .login-final__rail--left{left:1px !important}
  .login-final__rail--right{right:1px !important}
  .login-final__rail--top,
  .login-final__rail--bottom{
    left:30px !important;
    right:30px !important;
    height:15px !important;
    background-size:22px 100% !important;
  }
  .login-final__form{
    grid-template-rows:49px 49px 25px 51px !important;
    row-gap:8px !important;
  }
  .login-final__options{height:25px !important;min-height:25px !important}
  .login-final__checkmark{width:18px !important;height:18px !important;flex-basis:18px !important}
}

/* ============================================================
   V32 – final login cleanup
   Code-only polish: tighter joins, clearer checkbox, cleaner spacing.
   ============================================================ */

.login-final{
  padding:3.18vh 2.78vh 2.28vh !important;
}

/* Keep the interior dark field tucked under every border pixel. */
.login-final__fill{
  inset:.42vh !important;
}

/* Nudge rails so the transitions into the corners read cleaner. */
.login-final__rail--top{
  left:2.86vh !important;
  right:2.86vh !important;
  top:.07vh !important;
  height:1.40vh !important;
  background-size:2.08vh 100% !important;
}
.login-final__rail--bottom{
  left:2.86vh !important;
  right:2.86vh !important;
  bottom:.07vh !important;
  height:1.40vh !important;
  background-size:2.08vh 100% !important;
}
.login-final__rail--left{
  top:2.76vh !important;
  bottom:2.76vh !important;
  left:.08vh !important;
  width:1.42vh !important;
  background-size:100% .98vh !important;
}
.login-final__rail--right{
  top:2.76vh !important;
  bottom:2.76vh !important;
  right:.08vh !important;
  width:1.42vh !important;
  background-size:100% .98vh !important;
}

.login-final__corner{
  width:4.16vh !important;
  height:4.16vh !important;
}
.login-final__corner--tl{left:-.11vh !important;top:-.11vh !important}
.login-final__corner--tr{right:-.11vh !important;top:-.11vh !important}
.login-final__corner--bl{left:-.11vh !important;bottom:-.11vh !important}
.login-final__corner--br{right:-.11vh !important;bottom:-.11vh !important}

/* Slightly roomier vertical rhythm so the checkbox row stays readable. */
.login-final__form{
  grid-template-rows:4.62vh 4.62vh 2.62vh 4.85vh !important;
  row-gap:.90vh !important;
}

.login-final__field{
  height:4.62vh !important;
}

.login-final__options{
  min-height:2.62vh !important;
  height:2.62vh !important;
  padding:0 .12vh !important;
  gap:1.40vh !important;
  font-size:1.08vh !important;
  line-height:1 !important;
  align-items:center !important;
}

.login-final__remember{
  position:relative !important;
  display:flex !important;
  align-items:center !important;
  gap:.44vh !important;
  font-size:1.08vh !important;
  line-height:1 !important;
}

/* Make the checkbox unmistakably visible without changing the design. */
.login-final__checkbox{
  position:absolute !important;
  left:0 !important;
  top:50% !important;
  width:1.82vh !important;
  height:1.82vh !important;
  transform:translateY(-50%) !important;
  opacity:0 !important;
  margin:0 !important;
  pointer-events:none !important;
}
.login-final__checkmark{
  display:block !important;
  width:1.82vh !important;
  height:1.82vh !important;
  flex:0 0 1.82vh !important;
  background-position:center !important;
  background-size:100% 100% !important;
  margin:0 !important;
}

.login-final__options a{
  font-size:1.05vh !important;
  line-height:1 !important;
  margin-left:auto !important;
}

.login-final__submit{
  margin-top:.06vh !important;
}

@media(max-width:900px){
  .login-final{
    padding:31px 27px 23px !important;
  }
  .login-final__rail--top,
  .login-final__rail--bottom{
    left:30px !important;
    right:30px !important;
    height:15px !important;
    background-size:22px 100% !important;
  }
  .login-final__rail--left,
  .login-final__rail--right{
    top:30px !important;
    bottom:30px !important;
    width:15px !important;
    background-size:100% 10px !important;
  }
  .login-final__corner{width:45px !important;height:45px !important}
  .login-final__form{
    grid-template-rows:49px 49px 28px 51px !important;
    row-gap:9px !important;
  }
  .login-final__options{
    min-height:28px !important;
    height:28px !important;
    font-size:12px !important;
  }
  .login-final__remember,
  .login-final__options a{font-size:12px !important}
  .login-final__checkmark{
    width:18px !important;
    height:18px !important;
    flex-basis:18px !important;
  }
}

/* ============================================================
   V33 – login position + size adjustment (code only)
   User feedback: move login box upward into the marked position,
   make it a bit larger, keep checkbox readable.
   ============================================================ */

.login-final{
  right:13.9vh !important;
  top:22.9% !important;
  width:40.8vh !important;
  padding:3.35vh 3.00vh 2.20vh !important;
}

.login-final__fill{
  inset:.78vh !important;
}

.login-final__rail--top,
.login-final__rail--bottom{
  left:3.12vh !important;
  right:3.12vh !important;
}
.login-final__rail--left,
.login-final__rail--right{
  top:3.04vh !important;
  bottom:3.04vh !important;
}

.login-final > h1{
  font-size:2.58vh !important;
}

.login-final__title-rule{
  width:83% !important;
  margin:.58vh auto .98vh !important;
}

.login-final__form{
  gap:.96vh !important;
}

.login-final__field{
  height:4.82vh !important;
  min-height:4.82vh !important;
}

.login-final__icon{
  width:3.78vh !important;
  min-width:3.78vh !important;
}

.login-final__icon img{
  width:1.92vh !important;
  height:1.92vh !important;
}

.login-final__field input{
  font-size:1.31vh !important;
}

.login-final__options{
  min-height:2.34vh !important;
  font-size:1.10vh !important;
  gap:1.35vh !important;
  padding:0 .08vh !important;
}

.login-final__remember{
  gap:.44vh !important;
}

.login-final__checkmark{
  width:1.66vh !important;
  height:1.66vh !important;
  flex-basis:1.66vh !important;
}

.login-final__options a{
  font-size:1.08vh !important;
}

.login-final__submit{
  height:4.98vh !important;
  min-height:4.98vh !important;
  font-size:1.48vh !important;
  margin:.14vh 0 0 !important;
}

@media(max-width:900px){
  .login-final{
    top:920px !important;
    width:min(390px,92%) !important;
    padding:33px 29px 24px !important;
  }
  .login-final > h1{font-size:29px !important}
  .login-final__field{height:51px !important;min-height:51px !important}
  .login-final__field input{font-size:15px !important}
  .login-final__options{min-height:26px !important;font-size:12px !important}
  .login-final__options a{font-size:12px !important}
  .login-final__checkmark{width:18px !important;height:18px !important;flex-basis:18px !important}
  .login-final__submit{height:53px !important;font-size:17px !important}
}

/* ============================================================
   V34 – login box matched to the supplied reference crop
   The V33 login artwork/content already matches the reference;
   only the desktop box was about 10% too large. Scale the entire
   isolated component uniformly so frame, fields, text and button
   keep their exact proportions. Keep the established top/right
   anchor from V33 unchanged.
   ============================================================ */
@media(min-width:901px){
  .login-final{
    transform:scale(.901) !important;
    transform-origin:top right !important;
  }
}

/* ============================================================
   V35 – bündige Login-Umrandung (CODE-FIX)
   Die vier Ecken und die wiederholten Rails benutzen jetzt
   denselben Quellbild-Maßstab. Dadurch liegen die geraden
   Goldleisten exakt auf den Fortsetzungen in den Eckgrafiken.
   Keine neue Grafik, keine Änderung am Markup.
   ============================================================ */
@media(min-width:901px){
  /*
     Gemeinsamer Asset-Maßstab:
     v24_tl.png = 306 px breit -> 4.16vh.
     Alle anderen Maße sind daraus proportional berechnet.
     So werden die Eckbilder nicht mehr in quadratische Boxen
     gezwungen und die Rail-Querschnitte bleiben identisch.
  */

  .login-final__corner{
    object-fit:fill !important;
    max-width:none !important;
  }

  /* Top-left: 306 x 251 */
  .login-final__corner--tl{
    width:4.1600vh !important;
    height:3.4123vh !important;
    left:.0952vh !important;
    top:0 !important;
  }

  /* Top-right: 313 x 251 */
  .login-final__corner--tr{
    width:4.2552vh !important;
    height:3.4123vh !important;
    right:.1495vh !important;
    top:0 !important;
  }

  /* Bottom-left: 314 x 270 */
  .login-final__corner--bl{
    width:4.2688vh !important;
    height:3.6706vh !important;
    left:0 !important;
    bottom:0 !important;
  }

  /* Bottom-right: 324 x 258; slight lift aligns its rail to BL. */
  .login-final__corner--br{
    width:4.4047vh !important;
    height:3.5074vh !important;
    right:0 !important;
    bottom:.1767vh !important;
  }

  /*
     Horizontal rail section matches the exact straight section
     inside the corner assets (60 source px high).
  */
  .login-final__rail--top{
    top:.9924vh !important;
    left:2.82vh !important;
    right:2.82vh !important;
    height:.8157vh !important;
    background-size:1.6314vh 100% !important;
  }

  .login-final__rail--bottom{
    bottom:1.3051vh !important;
    left:2.82vh !important;
    right:2.82vh !important;
    height:.8021vh !important;
    background-size:1.6314vh 100% !important;
  }

  /*
     Vertikale Rails liegen jetzt auf derselben X-Position wie
     die geraden Seitenstücke in TL/BL bzw. TR/BR.
  */
  .login-final__rail--left{
    left:.5030vh !important;
    top:2.62vh !important;
    bottom:2.78vh !important;
    width:1.2099vh !important;
    background-size:100% .8157vh !important;
  }

  .login-final__rail--right{
    right:.5710vh !important;
    top:2.62vh !important;
    bottom:2.78vh !important;
    width:1.1963vh !important;
    background-size:100% .8157vh !important;
  }

  /* Fill reicht weiterhin unter die komplette Umrandung. */
  .login-final__fill{
    inset:.54vh !important;
  }
}

/* ============================================================
   V37 – Login-Bereich auf Zielgröße aus Referenzbild 2 erhöht
   Größerer Desktop-Loginbereich, aber weiterhin code-only:
   dieselbe bündige V35-Umrandung, nur insgesamt stärker skaliert.
   ============================================================ */
@media(min-width:901px){
  .login-final{
    transform:scale(1.16) !important;
    transform-origin:top right !important;
  }
}

/* ============================================================
   V39 – Login wieder größer (CODE ONLY)
   Gleiche Proportionen wie V38, aber sichtbar größer auf Desktop.
   Rahmen bleibt bündig, Inhalte skalieren passend mit.
   ============================================================ */
@media(min-width:901px){
  .login-final{
    transform:none !important;
    transform-origin:initial !important;
    right:8.0vh !important;
    top:22.8% !important;
    width:36.6vh !important;
    height:43.1vh !important;
    min-height:43.1vh !important;
    padding:3.60vh 3.00vh 2.75vh !important;
  }

  .login-final > h1{
    font-size:2.72vh !important;
  }

  .login-final__title-rule{
    width:80% !important;
    margin:.65vh auto 1.35vh !important;
  }

  .login-final__form{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:4.78vh 4.78vh 2.54vh 5.55vh !important;
    row-gap:1.32vh !important;
    width:100% !important;
  }

  .login-final__field{
    height:4.78vh !important;
    min-height:4.78vh !important;
  }

  .login-final__icon{
    width:3.90vh !important;
    min-width:3.90vh !important;
  }

  .login-final__icon img{
    width:1.91vh !important;
    height:1.91vh !important;
  }

  .login-final__field input{
    font-size:1.38vh !important;
  }

  .login-final__options{
    height:2.54vh !important;
    min-height:2.54vh !important;
    font-size:1.13vh !important;
    gap:.95vh !important;
  }

  .login-final__remember,
  .login-final__options a{
    font-size:1.13vh !important;
  }

  .login-final__checkmark{
    width:1.71vh !important;
    height:1.71vh !important;
    flex-basis:1.71vh !important;
  }

  .login-final__submit{
    height:5.55vh !important;
    min-height:5.55vh !important;
    font-size:1.58vh !important;
    margin:.18vh 0 0 !important;
  }
}


/* ============================================================
   V40 – großer Loginbereich ohne leeren unteren Block (CODE ONLY)
   Der Fehler in V39 war die feste Panel-Höhe. Der Rahmen war groß,
   der eigentliche Inhalt blieb aber oben. Jetzt bestimmt der Inhalt
   wieder die Panel-Höhe; alle Elemente bleiben sichtbar größer.
   ============================================================ */
@media(min-width:901px){
  .login-final{
    right:8.0vh !important;
    top:22.8% !important;
    width:36.6vh !important;
    height:auto !important;
    min-height:0 !important;
    padding:3.60vh 3.00vh 2.70vh !important;
    transform:none !important;
  }

  .login-final > h1{
    font-size:2.72vh !important;
  }

  .login-final__title-rule{
    width:80% !important;
    height:1.24vh !important;
    margin:.66vh auto 1.20vh !important;
  }

  .login-final__form{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:4.78vh 4.78vh 2.54vh 5.55vh !important;
    row-gap:1.16vh !important;
    width:100% !important;
    margin:0 !important;
  }

  .login-final__field{
    height:4.78vh !important;
    min-height:4.78vh !important;
  }

  .login-final__icon{
    width:3.90vh !important;
    min-width:3.90vh !important;
  }

  .login-final__icon img{
    width:1.91vh !important;
    height:1.91vh !important;
  }

  .login-final__field input{
    font-size:1.38vh !important;
  }

  .login-final__options{
    height:2.54vh !important;
    min-height:2.54vh !important;
    font-size:1.13vh !important;
    gap:.95vh !important;
    padding:0 .08vh !important;
  }

  .login-final__remember,
  .login-final__options a{
    font-size:1.13vh !important;
  }

  .login-final__checkmark{
    width:1.71vh !important;
    height:1.71vh !important;
    flex-basis:1.71vh !important;
  }

  .login-final__submit{
    height:5.55vh !important;
    min-height:5.55vh !important;
    font-size:1.58vh !important;
    margin:.06vh 0 0 !important;
  }
}

/* ============================================================
   V42 – LOGIN AUS EINZELTEILEN AUS eee.zip
   Kein fertiges Login-Panel wird verwendet.
   Rahmen = 4 Ecken + wiederholte horizontale/vertikale Schienen.
   Button = linkes Endstück + skalierbare Mitte + rechtes Endstück.
   Icons = einzelne EEE-Assets.
   ============================================================ */

.login-parts,
.login-parts *{
  box-sizing:border-box;
}

.login-parts{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}

.login-parts__fill{
  position:absolute;
  inset:.72vh;
  background:
    radial-gradient(circle at 50% 12%,rgba(44,37,24,.16),transparent 34%),
    linear-gradient(180deg,rgba(6,11,12,.985),rgba(2,7,8,.99)),
    url('assets/v24_texture.png?v=42') center/18vh 18vh repeat;
  box-shadow:
    inset 0 0 1.4vh rgba(0,0,0,.82),
    inset 0 .18vh .55vh rgba(210,164,69,.035),
    0 .48vh 1.25vh rgba(0,0,0,.38);
}

.login-parts__rail{
  position:absolute;
  z-index:1;
  filter:drop-shadow(0 .07vh .11vh rgba(0,0,0,.72));
}

.login-parts__rail--top,
.login-parts__rail--bottom{
  left:5.15vh;
  right:5.15vh;
  height:1.10vh;
  background:url('assets/eee_rail_h.png') center/auto 100% repeat-x;
}
.login-parts__rail--top{top:.42vh}
.login-parts__rail--bottom{bottom:.42vh;transform:rotate(180deg)}

.login-parts__rail--left,
.login-parts__rail--right{
  top:4.65vh;
  bottom:4.65vh;
  width:1.10vh;
  background:url('assets/eee_rail_v.png') center top/100% auto repeat-y;
}
.login-parts__rail--left{left:.46vh}
.login-parts__rail--right{right:.46vh;transform:scaleX(-1)}

.login-parts__corner{
  position:absolute;
  z-index:3;
  width:auto;
  height:auto;
  max-width:none;
  object-fit:contain;
  filter:drop-shadow(0 .08vh .14vh rgba(0,0,0,.72));
}
.login-parts__corner--tl{left:-.03vh;top:-.03vh;width:6.20vh}
.login-parts__corner--tr{right:-.03vh;top:-.03vh;width:6.38vh}
.login-parts__corner--bl{left:-.03vh;bottom:-.03vh;width:6.35vh}
.login-parts__corner--br{right:-.03vh;bottom:-.03vh;width:6.55vh}

@media(min-width:901px){
  .login-final{
    right:7.4vh !important;
    top:22.4% !important;
    width:37.6vh !important;
    height:auto !important;
    min-height:0 !important;
    padding:4.05vh 3.10vh 3.05vh !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    transform:none !important;
    isolation:isolate !important;
    overflow:visible !important;
  }

  /* Disable the old V24/V35 frame; V42 uses only the new EEE parts. */
  .login-final__frame{
    display:none !important;
  }

  .login-final > h1,
  .login-final__title-rule,
  .login-final__form{
    position:relative !important;
    z-index:5 !important;
  }

  .login-final > h1{
    margin:0 !important;
    padding:0 !important;
    font-size:2.72vh !important;
    line-height:1 !important;
    letter-spacing:.018em !important;
    color:#efd8a0 !important;
    text-shadow:0 .14vh .24vh #000 !important;
  }

  .login-final__title-rule{
    width:81% !important;
    height:1.02vh !important;
    margin:.62vh auto 1.16vh !important;
    gap:.66vh !important;
  }
  .login-final__title-rule i{
    height:1px !important;
    background:linear-gradient(90deg,transparent,#b9852e 24%,#d2a553 100%) !important;
  }
  .login-final__title-rule i:last-child{
    transform:scaleX(-1) !important;
  }
  .login-final__title-rule b{
    width:.70vh !important;
    height:.70vh !important;
    border:1px solid #d3a64e !important;
    background:#7b140d !important;
  }

  .login-final__form{
    display:grid !important;
    grid-template-columns:1fr !important;
    grid-template-rows:4.82vh 4.82vh 2.42vh 5.32vh !important;
    row-gap:1.16vh !important;
    width:100% !important;
    margin:0 !important;
  }

  .login-final__field{
    position:relative !important;
    height:4.82vh !important;
    min-height:4.82vh !important;
    display:flex !important;
    align-items:center !important;
    margin:0 !important;
    border:1px solid #9d722a !important;
    background:
      linear-gradient(180deg,rgba(8,14,15,.96),rgba(3,9,10,.98)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(36,39,33,.78),
      inset 0 .18vh .62vh rgba(0,0,0,.72) !important;
  }

  .login-final__field::before,
  .login-final__field::after{
    display:block !important;
    content:"" !important;
    position:absolute !important;
    top:50% !important;
    width:.48vh !important;
    height:.48vh !important;
    border:1px solid #b98a35 !important;
    background:#101313 !important;
    transform:translateY(-50%) rotate(45deg) !important;
  }
  .login-final__field::before{left:-.29vh !important}
  .login-final__field::after{right:-.29vh !important}

  .login-final__field:focus-within{
    border-color:#d0a248 !important;
    box-shadow:
      inset 0 0 0 1px rgba(51,53,43,.9),
      0 0 .42vh rgba(207,161,70,.18) !important;
  }

  .login-final__icon{
    width:3.60vh !important;
    min-width:3.60vh !important;
    height:100% !important;
    display:grid !important;
    place-items:center !important;
    overflow:visible !important;
  }
  .login-final__icon img{
    width:1.78vh !important;
    height:1.78vh !important;
    object-fit:contain !important;
    filter:drop-shadow(0 .08vh .12vh rgba(0,0,0,.78)) !important;
  }

  .login-final__field input{
    flex:1 !important;
    min-width:0 !important;
    height:100% !important;
    padding:0 .92vh 0 .04vh !important;
    border:0 !important;
    outline:0 !important;
    background:transparent !important;
    color:#e5d09b !important;
    font:inherit !important;
    font-size:1.28vh !important;
  }
  .login-final__field input::placeholder{
    color:#c8ae75 !important;
    opacity:1 !important;
  }

  .login-final__options{
    height:2.42vh !important;
    min-height:2.42vh !important;
    display:flex !important;
    align-items:center !important;
    justify-content:space-between !important;
    gap:1.10vh !important;
    padding:0 .10vh !important;
    margin:0 !important;
    font-size:1.04vh !important;
    line-height:1 !important;
    white-space:nowrap !important;
  }
  .login-final__remember,
  .login-final__options a{
    font-size:1.04vh !important;
    color:#d8bb73 !important;
  }
  .login-final__remember{
    gap:.42vh !important;
  }
  .login-final__checkmark{
    width:1.58vh !important;
    height:1.58vh !important;
    flex:0 0 1.58vh !important;
  }

  /* Three-piece EEE button. No finished login/button panel is used. */
  .login-final__submit{
    position:relative !important;
    width:100% !important;
    height:5.32vh !important;
    min-height:5.32vh !important;
    margin:0 !important;
    padding:0 !important;
    border:0 !important;
    background:transparent !important;
    color:#f2deb0 !important;
    font:inherit !important;
    font-size:1.50vh !important;
    font-weight:700 !important;
    text-transform:uppercase !important;
    letter-spacing:.03em !important;
    text-shadow:0 .13vh .20vh #270000 !important;
    cursor:pointer !important;
    overflow:visible !important;
  }

  .login-final__btnskin{
    position:absolute !important;
    inset:0 !important;
    z-index:0 !important;
    pointer-events:none !important;
  }
  .login-final__btnpart{
    position:absolute !important;
    top:0 !important;
    height:100% !important;
    max-width:none !important;
  }
  .login-final__btnpart--left{
    left:0 !important;
    width:5.05vh !important;
    object-fit:fill !important;
    object-position:left center !important;
  }
  .login-final__btnpart--right{
    right:0 !important;
    width:5.05vh !important;
    object-fit:fill !important;
    object-position:right center !important;
  }
  .login-final__btnpart--center{
    left:4.45vh !important;
    right:4.45vh !important;
    width:auto !important;
    background:url('assets/eee_btn_center.png') center/100% 100% no-repeat !important;
  }
  .login-final__submit-label{
    position:relative !important;
    z-index:2 !important;
  }
  .login-final__submit:hover{
    filter:brightness(1.06) !important;
  }
  .login-final__submit:active{
    transform:translateY(.05vh) !important;
  }
}

@media(max-width:900px){
  .login-final{
    background:transparent !important;
  }
  .login-final__frame{display:none !important}
  .login-parts__corner--tl{width:60px}
  .login-parts__corner--tr{width:62px}
  .login-parts__corner--bl{width:62px}
  .login-parts__corner--br{width:64px}
  .login-parts__rail--top,
  .login-parts__rail--bottom{left:48px;right:48px;height:11px}
  .login-parts__rail--left,
  .login-parts__rail--right{top:46px;bottom:46px;width:11px}
}

/* ============================================================
   V43 – sauberer EEE-Rahmen AUS EINZELTEILEN
   Kein fertiges Loginbild. Die sichtbare Box besteht aus:
   4 separaten Ecken + 4 geraden Rail-Stücken + CSS-Füllung.
   Wichtig: die Rails sind jetzt bewusst OHNE wiederholte Ornamente,
   damit keine Diamanten/Fleur-de-lis mehrfach an den Seiten auftauchen.
   ============================================================ */
@media(min-width:901px){
  .login-final{
    right:7.35vh !important;
    top:22.25% !important;
    width:38.2vh !important;
    height:auto !important;
    min-height:0 !important;
    padding:4.15vh 3.15vh 3.00vh !important;
    background:transparent !important;
    border:0 !important;
    box-shadow:none !important;
    transform:none !important;
    overflow:visible !important;
  }

  .login-parts__fill{
    inset:.62vh !important;
    background:
      radial-gradient(circle at 50% 8%,rgba(62,47,24,.12),transparent 33%),
      linear-gradient(180deg,rgba(4,10,11,.985),rgba(2,7,8,.995)),
      url('assets/v24_texture.png?v=43') center/18vh 18vh repeat !important;
    box-shadow:
      inset 0 0 1.45vh rgba(0,0,0,.82),
      0 .50vh 1.30vh rgba(0,0,0,.40) !important;
  }

  .login-parts__corner{
    z-index:4 !important;
    max-width:none !important;
    height:auto !important;
    object-fit:contain !important;
    filter:drop-shadow(0 .07vh .12vh rgba(0,0,0,.72)) !important;
  }
  .login-parts__corner--tl{
    content:url('assets/eee2_frame_tl.png') !important;
    left:-.10vh !important; top:-.08vh !important; width:6.10vh !important;
  }
  .login-parts__corner--tr{
    content:url('assets/eee2_frame_tr.png') !important;
    right:-.10vh !important; top:-.08vh !important; width:6.10vh !important;
  }
  .login-parts__corner--bl{
    content:url('assets/eee2_frame_bl.png') !important;
    left:-.10vh !important; bottom:-.08vh !important; width:6.22vh !important;
  }
  .login-parts__corner--br{
    content:url('assets/eee2_frame_br.png') !important;
    right:-.10vh !important; bottom:-.08vh !important; width:6.22vh !important;
  }

  .login-parts__rail{
    z-index:2 !important;
    filter:drop-shadow(0 .05vh .08vh rgba(0,0,0,.70)) !important;
  }
  .login-parts__rail--top,
  .login-parts__rail--bottom{
    left:4.78vh !important;
    right:4.78vh !important;
    height:.62vh !important;
    background:url('assets/eee2_rail_h.png') center/100% 100% no-repeat !important;
    transform:none !important;
  }
  .login-parts__rail--top{top:.46vh !important}
  .login-parts__rail--bottom{bottom:.46vh !important;transform:scaleY(-1) !important}

  .login-parts__rail--left,
  .login-parts__rail--right{
    top:4.42vh !important;
    bottom:4.42vh !important;
    width:.66vh !important;
    background:url('assets/eee2_rail_v.png') center/100% 100% no-repeat !important;
  }
  .login-parts__rail--left{left:.43vh !important;transform:none !important}
  .login-parts__rail--right{right:.43vh !important;transform:scaleX(-1) !important}

  /* Slightly calmer content spacing to match the target screenshot. */
  .login-final > h1{
    font-size:2.74vh !important;
    margin:0 !important;
  }
  .login-final__title-rule{
    width:79% !important;
    margin:.58vh auto 1.14vh !important;
  }
  .login-final__form{
    grid-template-rows:4.78vh 4.78vh 2.40vh 5.20vh !important;
    row-gap:1.10vh !important;
  }
  .login-final__field{
    height:4.78vh !important;
    min-height:4.78vh !important;
  }
  .login-final__submit{
    height:5.20vh !important;
    min-height:5.20vh !important;
  }
}

/* ============================================================
   V44 – Login aus Einzelteilen größer und näher am Zielscreen
   Weiterhin komplett aus Einzelteilen aufgebaut:
   4 Ecken + 4 Rails + CSS-Füllung + zusammengesetzter Button.
   Anpassung: größer, etwas weiter nach links/oben, Inhalte skaliert mit.
   ============================================================ */
@media(min-width:901px){
  .login-final{
    right:6.10vh !important;
    top:21.20% !important;
    width:42.4vh !important;
    padding:4.55vh 3.55vh 3.35vh !important;
  }

  .login-parts__fill{
    inset:.68vh !important;
  }

  .login-parts__corner--tl{
    left:-.12vh !important;
    top:-.10vh !important;
    width:6.45vh !important;
  }
  .login-parts__corner--tr{
    right:-.12vh !important;
    top:-.10vh !important;
    width:6.45vh !important;
  }
  .login-parts__corner--bl{
    left:-.12vh !important;
    bottom:-.10vh !important;
    width:6.58vh !important;
  }
  .login-parts__corner--br{
    right:-.12vh !important;
    bottom:-.10vh !important;
    width:6.58vh !important;
  }

  .login-parts__rail--top,
  .login-parts__rail--bottom{
    left:5.05vh !important;
    right:5.05vh !important;
    height:.66vh !important;
  }
  .login-parts__rail--top{top:.50vh !important}
  .login-parts__rail--bottom{bottom:.50vh !important}

  .login-parts__rail--left,
  .login-parts__rail--right{
    top:4.68vh !important;
    bottom:4.68vh !important;
    width:.72vh !important;
  }
  .login-parts__rail--left{left:.47vh !important}
  .login-parts__rail--right{right:.47vh !important}

  .login-final > h1{
    font-size:3.02vh !important;
  }

  .login-final__title-rule{
    width:80% !important;
    margin:.66vh auto 1.30vh !important;
  }

  .login-final__form{
    grid-template-rows:5.18vh 5.18vh 2.58vh 5.72vh !important;
    row-gap:1.18vh !important;
  }

  .login-final__field{
    height:5.18vh !important;
    min-height:5.18vh !important;
  }

  .login-final__icon{
    width:4.08vh !important;
    min-width:4.08vh !important;
  }

  .login-final__icon img{
    width:1.98vh !important;
    height:1.98vh !important;
  }

  .login-final__field input{
    font-size:1.47vh !important;
  }

  .login-final__options{
    min-height:2.58vh !important;
    height:2.58vh !important;
    font-size:1.16vh !important;
    gap:1.05vh !important;
  }

  .login-final__remember,
  .login-final__options a{
    font-size:1.16vh !important;
  }

  .login-final__checkmark{
    width:1.78vh !important;
    height:1.78vh !important;
    flex-basis:1.78vh !important;
  }

  .login-final__submit{
    height:5.72vh !important;
    min-height:5.72vh !important;
    font-size:1.68vh !important;
  }

  .login-final__btnpart--left,
  .login-final__btnpart--right{
    width:5.00vh !important;
  }
  .login-final__btnpart--center{
    left:4.45vh !important;
    right:4.45vh !important;
  }
}

/* ============================================================
   V45 – Login aus Einzelteilen nochmals größer
   Reaktion auf den letzten Screenshot: die Box war noch immer zu klein.
   Weiterhin nur aus Einzelteilen aufgebaut (keine fertige Login-Grafik).
   ============================================================ */
@media(min-width:901px){
  .login-final{
    right:4.85vh !important;
    top:20.55% !important;
    width:46.9vh !important;
    padding:4.95vh 3.90vh 3.65vh !important;
  }

  .login-parts__fill{
    inset:.74vh !important;
  }

  .login-parts__corner--tl{
    left:-.14vh !important;
    top:-.12vh !important;
    width:6.95vh !important;
  }
  .login-parts__corner--tr{
    right:-.14vh !important;
    top:-.12vh !important;
    width:6.95vh !important;
  }
  .login-parts__corner--bl{
    left:-.14vh !important;
    bottom:-.12vh !important;
    width:7.10vh !important;
  }
  .login-parts__corner--br{
    right:-.14vh !important;
    bottom:-.12vh !important;
    width:7.10vh !important;
  }

  .login-parts__rail--top,
  .login-parts__rail--bottom{
    left:5.42vh !important;
    right:5.42vh !important;
    height:.72vh !important;
  }
  .login-parts__rail--top{top:.54vh !important}
  .login-parts__rail--bottom{bottom:.54vh !important}

  .login-parts__rail--left,
  .login-parts__rail--right{
    top:5.02vh !important;
    bottom:5.02vh !important;
    width:.78vh !important;
  }
  .login-parts__rail--left{left:.52vh !important}
  .login-parts__rail--right{right:.52vh !important}

  .login-final > h1{
    font-size:3.28vh !important;
  }

  .login-final__title-rule{
    width:80% !important;
    margin:.74vh auto 1.42vh !important;
  }

  .login-final__form{
    grid-template-rows:5.62vh 5.62vh 2.82vh 6.18vh !important;
    row-gap:1.28vh !important;
  }

  .login-final__field{
    height:5.62vh !important;
    min-height:5.62vh !important;
  }

  .login-final__icon{
    width:4.42vh !important;
    min-width:4.42vh !important;
  }

  .login-final__icon img{
    width:2.14vh !important;
    height:2.14vh !important;
  }

  .login-final__field input{
    font-size:1.58vh !important;
  }

  .login-final__options{
    min-height:2.82vh !important;
    height:2.82vh !important;
    font-size:1.24vh !important;
    gap:1.14vh !important;
  }

  .login-final__remember,
  .login-final__options a{
    font-size:1.24vh !important;
  }

  .login-final__checkmark{
    width:1.92vh !important;
    height:1.92vh !important;
    flex-basis:1.92vh !important;
  }

  .login-final__submit{
    height:6.18vh !important;
    min-height:6.18vh !important;
    font-size:1.82vh !important;
  }

  .login-final__btnpart--left,
  .login-final__btnpart--right{
    width:5.45vh !important;
  }
  .login-final__btnpart--center{
    left:4.86vh !important;
    right:4.86vh !important;
  }
}

/* ============================================================
   V46 – Zielproportionen nach aktuellem Screenshot
   Die Größe ist jetzt grundsätzlich da; im Vergleich zum Ziel war
   das Panel aber zu breit und etwas zu tief positioniert.
   Weiterhin ausschließlich aus Einzelteilen aufgebaut.
   ============================================================ */
@media(min-width:901px){
  .login-final{
    right:4.85vh !important;
    top:16.8% !important;
    width:37.8vh !important;
    padding:4.75vh 3.25vh 3.55vh !important;
  }

  /* Frame bleibt groß genug, wirkt auf der schmaleren Zielbox aber nicht gestaucht. */
  .login-parts__fill{
    inset:.72vh !important;
  }
  .login-parts__corner--tl,
  .login-parts__corner--tr{
    width:6.55vh !important;
  }
  .login-parts__corner--bl,
  .login-parts__corner--br{
    width:6.70vh !important;
  }
  .login-parts__rail--top,
  .login-parts__rail--bottom{
    left:5.08vh !important;
    right:5.08vh !important;
    height:.70vh !important;
  }
  .login-parts__rail--left,
  .login-parts__rail--right{
    top:4.78vh !important;
    bottom:4.78vh !important;
    width:.76vh !important;
  }

  .login-final > h1{
    font-size:3.00vh !important;
  }

  .login-final__title-rule{
    width:79% !important;
    margin:.70vh auto 1.38vh !important;
  }

  .login-final__form{
    grid-template-rows:5.34vh 5.34vh 2.72vh 5.90vh !important;
    row-gap:1.24vh !important;
  }

  .login-final__field{
    height:5.34vh !important;
    min-height:5.34vh !important;
  }

  .login-final__icon{
    width:4.18vh !important;
    min-width:4.18vh !important;
  }
  .login-final__icon img{
    width:2.04vh !important;
    height:2.04vh !important;
  }
  .login-final__field input{
    font-size:1.48vh !important;
  }

  .login-final__options{
    height:2.72vh !important;
    min-height:2.72vh !important;
    font-size:1.16vh !important;
    gap:1.05vh !important;
  }
  .login-final__remember,
  .login-final__options a{
    font-size:1.16vh !important;
  }
  .login-final__checkmark{
    width:1.82vh !important;
    height:1.82vh !important;
    flex-basis:1.82vh !important;
  }

  /* Button weiterhin dreiteilig – Mittelstück wurde nur transparent beschnitten. */
  .login-final__submit{
    width:96% !important;
    justify-self:center !important;
    height:5.90vh !important;
    min-height:5.90vh !important;
    font-size:1.72vh !important;
  }
  .login-final__btnpart--left,
  .login-final__btnpart--right{
    width:5.20vh !important;
  }
  .login-final__btnpart--center{
    left:4.56vh !important;
    right:4.56vh !important;
    background-image:url('assets/eee_btn_center_trim.png') !important;
    background-size:100% 100% !important;
  }
}


/* ============================================================
   V47 – Zielscreen-Messung: schmal/hoch statt flach
   Weiterhin vollständig aus Einzelteilen aufgebaut.
   Der letzte Stand war in der Breite bereits nah am Ziel,
   aber noch ca. 5 % zu niedrig/kompakt. Deshalb:
   - Breite praktisch beibehalten
   - Panel etwas nach unten
   - mehr vertikale Luft
   - Eingabefelder minimal niedriger
   - Button stärker eingerückt wie im Zielscreen
   ============================================================ */
@media(min-width:901px){
  .login-final{
    right:4.85vh !important;
    top:17.7% !important;
    width:37.8vh !important;
    height:auto !important;
    min-height:0 !important;
    padding:5.00vh 3.70vh 4.45vh !important;
  }

  .login-parts__fill{
    inset:.72vh !important;
  }

  .login-final > h1{
    font-size:3.00vh !important;
    margin:0 !important;
  }

  .login-final__title-rule{
    width:78% !important;
    margin:.72vh auto 1.52vh !important;
  }

  .login-final__form{
    grid-template-rows:5.02vh 5.02vh 2.58vh 5.72vh !important;
    row-gap:1.50vh !important;
  }

  .login-final__field{
    height:5.02vh !important;
    min-height:5.02vh !important;
  }

  .login-final__icon{
    width:3.95vh !important;
    min-width:3.95vh !important;
  }

  .login-final__icon img{
    width:1.96vh !important;
    height:1.96vh !important;
  }

  .login-final__field input{
    font-size:1.43vh !important;
  }

  .login-final__options{
    height:2.58vh !important;
    min-height:2.58vh !important;
    font-size:1.12vh !important;
    gap:1.00vh !important;
  }

  .login-final__remember,
  .login-final__options a{
    font-size:1.12vh !important;
  }

  .login-final__checkmark{
    width:1.72vh !important;
    height:1.72vh !important;
    flex-basis:1.72vh !important;
  }

  .login-final__submit{
    width:90% !important;
    justify-self:center !important;
    height:5.72vh !important;
    min-height:5.72vh !important;
    font-size:1.66vh !important;
  }

  .login-final__btnpart--left,
  .login-final__btnpart--right{
    width:5.00vh !important;
  }

  .login-final__btnpart--center{
    left:4.42vh !important;
    right:4.42vh !important;
    background-image:url('assets/eee_btn_center_trim.png') !important;
    background-size:100% 100% !important;
  }

  /* Rahmen proportional zur nun höheren Box halten. */
  .login-parts__rail--left,
  .login-parts__rail--right{
    top:4.78vh !important;
    bottom:4.78vh !important;
  }
}


/* ============================================================
   V48 – Optionen lesbarer + Login-Button ohne sichtbare Fugen
   Fixes basierend auf dem letzten Screenshot:
   - "Angemeldet bleiben" und "Passwort vergessen?" waren zu klein
   - der dreiteilige Anmelden-Button zeigte sichtbare Lücken/Fugen
   Weiterhin vollständig aus Einzelteilen aufgebaut.
   ============================================================ */
@media(min-width:901px){
  .login-final__options{
    height:2.86vh !important;
    min-height:2.86vh !important;
    padding:0 .16vh !important;
    gap:1.15vh !important;
    font-size:1.26vh !important;
    line-height:1.08 !important;
    align-items:center !important;
  }

  .login-final__remember,
  .login-final__options a{
    font-size:1.26vh !important;
    line-height:1.08 !important;
  }

  .login-final__remember{
    gap:.54vh !important;
  }

  .login-final__checkmark{
    width:1.86vh !important;
    height:1.86vh !important;
    flex-basis:1.86vh !important;
  }

  .login-final__submit{
    width:91.5% !important;
    justify-self:center !important;
    height:5.88vh !important;
    min-height:5.88vh !important;
    font-size:1.76vh !important;
    overflow:hidden !important;
    isolation:isolate !important;
  }

  .login-final__btnskin{
    overflow:hidden !important;
    inset:0 !important;
  }

  .login-final__btnpart{
    top:0 !important;
    height:100% !important;
  }

  /* Deliberate overlap so there are no visible seams between parts. */
  .login-final__btnpart--left{
    left:-.28vh !important;
    width:5.72vh !important;
  }

  .login-final__btnpart--right{
    right:-.28vh !important;
    width:5.72vh !important;
  }

  .login-final__btnpart--center{
    left:4.58vh !important;
    right:4.58vh !important;
    background-image:url('assets/eee_btn_center_trim.png') !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    background-size:100% 100% !important;
  }

  .login-final__submit-label{
    position:relative !important;
    z-index:3 !important;
    letter-spacing:.02em !important;
  }
}


/* ============================================================
   V49 – Checkbox größer + dreiteiligen Login-Button sauber gebaut
   Fixes auf Basis des letzten Screenshots:
   - Checkbox war noch zu klein
   - der Anmelden-Button wirkte weiterhin unfertig durch sichtbare Fugen
     und zu harte Übergänge zwischen linken/rechten Endkappen und Mitte.
   Lösung: die Mittelbahn liegt jetzt durchgehend unter den Endkappen,
   die Endkappen überlappen bewusst darüber.
   ============================================================ */
@media(min-width:901px){
  .login-final__options{
    height:3.02vh !important;
    min-height:3.02vh !important;
    font-size:1.30vh !important;
    gap:1.22vh !important;
  }

  .login-final__remember,
  .login-final__options a{
    font-size:1.30vh !important;
  }

  .login-final__remember{
    gap:.62vh !important;
  }

  .login-final__checkmark{
    width:2.16vh !important;
    height:2.16vh !important;
    flex-basis:2.16vh !important;
  }

  .login-final__submit{
    width:92.2% !important;
    height:5.98vh !important;
    min-height:5.98vh !important;
    font-size:1.80vh !important;
    overflow:hidden !important;
  }

  .login-final__btnskin{
    position:absolute !important;
    inset:0 !important;
    overflow:hidden !important;
  }

  .login-final__btnpart{
    position:absolute !important;
    top:0 !important;
    height:100% !important;
    max-width:none !important;
  }

  /* Center strip runs continuously under the endcaps, removing seams. */
  .login-final__btnpart--center{
    left:0 !important;
    right:0 !important;
    z-index:0 !important;
    background-image:url('assets/eee_btn_center_trim.png') !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:100% 100% !important;
  }

  .login-final__btnpart--left{
    left:-.08vh !important;
    width:6.22vh !important;
    z-index:2 !important;
    object-fit:contain !important;
    object-position:left center !important;
  }

  .login-final__btnpart--right{
    right:-.08vh !important;
    width:6.22vh !important;
    z-index:2 !important;
    object-fit:contain !important;
    object-position:right center !important;
  }

  .login-final__submit-label{
    z-index:3 !important;
    letter-spacing:.015em !important;
  }
}


/* ============================================================
   V50 – sichtbare Checkbox + sauberer Button-Anschluss
   Ursache der Button-Fugen: die Endkappen wurden in zu breite CSS-
   Boxen mit object-fit:contain gesetzt. Dadurch entstand zwischen dem
   echten Bildrand und dem Mittelteil transparenter Leerraum.
   Jetzt entsprechen die Endkappen-Breiten ihrem echten Seitenverhältnis
   und überlappen den Mittelteil leicht.
   ============================================================ */
@media(min-width:901px){
  .login-final__options{
    height:3.18vh !important;
    min-height:3.18vh !important;
    font-size:1.32vh !important;
    align-items:center !important;
  }

  .login-final__remember,
  .login-final__options a{
    font-size:1.32vh !important;
  }

  .login-final__remember{
    gap:.68vh !important;
  }

  .login-final__checkmark{
    width:2.50vh !important;
    height:2.50vh !important;
    flex:0 0 2.50vh !important;
    background-size:100% 100% !important;
  }

  .login-final__submit{
    width:92.2% !important;
    height:5.98vh !important;
    min-height:5.98vh !important;
    overflow:visible !important;
  }

  .login-final__btnskin{
    position:absolute !important;
    inset:0 !important;
    overflow:visible !important;
  }

  .login-final__btnpart{
    position:absolute !important;
    top:0 !important;
    height:100% !important;
    max-width:none !important;
  }

  /* True aspect ratio of the source parts at 5.98vh height:
     left 304/361 => ~5.03vh; right 308/379 => ~4.86vh. */
  .login-final__btnpart--left{
    left:0 !important;
    width:5.04vh !important;
    z-index:2 !important;
    object-fit:fill !important;
    object-position:left center !important;
  }

  .login-final__btnpart--right{
    right:0 !important;
    width:4.87vh !important;
    z-index:2 !important;
    object-fit:fill !important;
    object-position:right center !important;
  }

  /* Middle section starts underneath both flat inner edges. */
  .login-final__btnpart--center{
    left:4.45vh !important;
    right:4.30vh !important;
    z-index:1 !important;
    background-image:url('assets/eee_btn_center_trim.png') !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    background-size:100% 100% !important;
  }

  .login-final__submit-label{
    position:relative !important;
    z-index:4 !important;
    font-size:1.80vh !important;
  }
}


/* ============================================================
   V51 – endgültiger Fix für Checkbox + Anmelden-Button
   - Checkbox nochmals größer und klarer klickbar
   - Mittelstück des 3-teiligen Buttons seitlich beschnitten,
     damit die doppelten Goldkanten/Fugen verschwinden
   - Endkappen sitzen enger am Mittelteil
   ============================================================ */
@media(min-width:901px){
  .login-final__options{
    height:3.28vh !important;
    min-height:3.28vh !important;
    font-size:1.34vh !important;
    gap:1.18vh !important;
    align-items:center !important;
  }

  .login-final__remember,
  .login-final__options a{
    font-size:1.34vh !important;
    line-height:1.06 !important;
  }

  .login-final__remember{
    gap:.76vh !important;
  }

  .login-final__checkmark{
    width:2.92vh !important;
    height:2.92vh !important;
    flex:0 0 2.92vh !important;
    background-size:100% 100% !important;
  }

  .login-final__submit{
    width:92.6% !important;
    height:6.02vh !important;
    min-height:6.02vh !important;
    overflow:hidden !important;
    isolation:isolate !important;
  }

  .login-final__btnskin{
    inset:0 !important;
    overflow:hidden !important;
  }

  .login-final__btnpart{
    top:0 !important;
    height:100% !important;
    max-width:none !important;
  }

  /* Keep endcaps at true aspect ratio, but slightly biased inward. */
  .login-final__btnpart--left{
    left:-.02vh !important;
    width:5.07vh !important;
    z-index:2 !important;
    object-fit:fill !important;
    object-position:left center !important;
  }

  .login-final__btnpart--right{
    right:-.02vh !important;
    width:4.90vh !important;
    z-index:2 !important;
    object-fit:fill !important;
    object-position:right center !important;
  }

  /* Use a side-trimmed middle strip to avoid duplicate side borders. */
  .login-final__btnpart--center{
    left:4.70vh !important;
    right:4.55vh !important;
    z-index:1 !important;
    background-image:url('assets/eee_btn_center_seamless.png') !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    background-size:100% 100% !important;
  }

  .login-final__submit-label{
    position:relative !important;
    z-index:4 !important;
    font-size:1.82vh !important;
    letter-spacing:.01em !important;
  }
}


/* ============================================================
   V52 – Header aufgeräumt + Sprachwahl rechts außen
   - Header-Anmelden entfernt
   - Header-Registrieren/Jetzt-spielen entfernt
   - Sprachwahl allein rechts in die Ecke gesetzt
   - Dropdown lesbarer und hochwertiger aufgebaut
   ============================================================ */
@media(min-width:901px){
  .top-actions{
    right:2.15vh !important;
    top:0 !important;
    height:100% !important;
    gap:0 !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
  }

  .header-login,
  .top-play{
    display:none !important;
  }

  .language-switcher{
    position:relative !important;
    right:auto !important;
    top:auto !important;
    transform:none !important;
    z-index:120 !important;
  }

  .language-current{
    width:10.8vh !important;
    min-width:10.8vh !important;
    height:4.65vh !important;
    padding:.38vh 1.10vh !important;
    gap:.72vh !important;
    border:0 !important;
    border-radius:0 !important;
    background:
      linear-gradient(180deg,rgba(255,208,103,.05),rgba(0,0,0,.06)),
      url('assets/button_black_master_v17.png') center/100% 100% no-repeat !important;
    color:#f2deb0 !important;
    box-shadow:
      0 .28vh .70vh rgba(0,0,0,.42),
      inset 0 0 .38vh rgba(255,206,96,.10) !important;
    text-shadow:0 .10vh .18vh #000 !important;
    transition:filter .15s ease, transform .15s ease !important;
  }

  .language-current:hover,
  .language-current[aria-expanded="true"]{
    filter:brightness(1.12) drop-shadow(0 0 .25vh rgba(217,169,66,.28)) !important;
  }

  .language-current:active{
    transform:translateY(.04vh) !important;
  }

  .language-current img{
    width:2.60vh !important;
    height:1.70vh !important;
    object-fit:cover !important;
    border:1px solid rgba(222,174,76,.34) !important;
    box-shadow:0 .08vh .22vh rgba(0,0,0,.55) !important;
  }

  #currentLanguageCode{
    display:inline !important;
    min-width:2.0vh !important;
    text-align:center !important;
    font-size:1.26vh !important;
    letter-spacing:.08em !important;
  }

  .language-chevron{
    display:inline-block !important;
    margin-left:.06vh !important;
    color:#dcb052 !important;
    font-size:1.20vh !important;
    line-height:1 !important;
    transition:transform .15s ease !important;
  }

  .language-current[aria-expanded="true"] .language-chevron{
    transform:rotate(180deg) !important;
  }

  .language-menu{
    top:calc(100% + .46vh) !important;
    right:.15vh !important;
    width:15.6vh !important;
    height:auto !important;
    padding:1.05vh .78vh .78vh !important;
    border:1px solid rgba(176,128,43,.72) !important;
    background:
      radial-gradient(circle at 50% 0,rgba(118,77,19,.18),transparent 48%),
      linear-gradient(180deg,rgba(10,16,15,.985),rgba(4,8,8,.995)) !important;
    box-shadow:
      0 1.0vh 2.25vh rgba(0,0,0,.62),
      inset 0 0 0 1px rgba(53,39,16,.72),
      inset 0 0 1.0vh rgba(0,0,0,.68) !important;
  }

  .language-menu::before{
    display:block !important;
    content:"" !important;
    position:absolute !important;
    left:1.1vh !important;
    right:1.1vh !important;
    top:.52vh !important;
    height:1px !important;
    background:linear-gradient(90deg,transparent,#d4a64b,transparent) !important;
  }

  .language-menu button{
    width:100% !important;
    height:3.85vh !important;
    padding:.34vh .62vh !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:.75vh !important;
    border:1px solid transparent !important;
    background:transparent !important;
    color:#ead7a7 !important;
    text-align:left !important;
    font-size:1.23vh !important;
    transition:background .12s ease, border-color .12s ease, color .12s ease !important;
  }

  .language-menu button span{
    display:inline !important;
    white-space:nowrap !important;
  }

  .language-menu button img{
    width:2.52vh !important;
    height:1.66vh !important;
    flex:0 0 auto !important;
    border:1px solid rgba(216,169,73,.30) !important;
    transform:none !important;
    filter:none !important;
  }

  .language-menu button:hover,
  .language-menu button[aria-selected="true"]{
    border-color:rgba(180,132,45,.50) !important;
    background:linear-gradient(90deg,rgba(112,26,17,.48),rgba(45,25,14,.12)) !important;
    color:#ffe7aa !important;
  }

  .language-menu button:hover img,
  .language-menu button[aria-selected="true"] img{
    transform:scale(1.05) !important;
    filter:brightness(1.10) !important;
  }
}

@media(max-width:900px){
  .header-login,
  .top-play{
    display:none !important;
  }

  .top-actions{
    width:100% !important;
    display:flex !important;
    justify-content:center !important;
  }

  .language-current{
    width:112px !important;
    min-width:112px !important;
  }

  .language-menu{
    width:180px !important;
  }

  .language-menu button span{
    display:inline !important;
  }
}


/* ============================================================
   V53 – großer Zielscreen-Pass
   1) Login vertikal/inhaltlich näher an Referenz
   2) Header höher, segmentierter, mit Icon-Navigation
   3) Drei große Feature-Karten + zweiter Hero-CTA
   ============================================================ */

@media(min-width:901px){
  /* ---------- Header ---------- */
  .topbar{
    height:11.35vh !important;
    background:
      linear-gradient(180deg,rgba(21,18,13,.82),rgba(7,11,10,.98)),
      url('assets/coded_login_texture.png') center/18vh 18vh repeat !important;
    border-bottom:1px solid #8f6725 !important;
    box-shadow:
      inset 0 -1px rgba(241,190,83,.16),
      inset 0 0 2.0vh rgba(0,0,0,.56),
      0 .32vh .85vh rgba(0,0,0,.36) !important;
  }

  .header-logo{
    left:3.25vh !important;
    top:5% !important;
    width:27.6vh !important;
    height:90% !important;
  }

  .nav{
    left:31.4vh !important;
    top:0 !important;
    height:100% !important;
    gap:0 !important;
    align-items:stretch !important;
    font-size:1.42vh !important;
    letter-spacing:.015em !important;
  }

  .nav a{
    width:12.8vh !important;
    height:100% !important;
    padding:.72vh .75vh .65vh !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:center !important;
    justify-content:center !important;
    gap:.30vh !important;
    color:#e7cf96 !important;
    border-left:1px solid rgba(142,100,35,.22) !important;
    border-right:1px solid rgba(20,15,8,.72) !important;
    background:
      linear-gradient(180deg,rgba(78,57,26,.08),rgba(0,0,0,.10)) !important;
    transition:background .14s ease, color .14s ease, filter .14s ease !important;
  }

  .nav a:hover{
    background:
      linear-gradient(180deg,rgba(132,92,30,.15),rgba(9,11,9,.12)) !important;
    color:#f7df9f !important;
  }

  .nav a.active{
    background:
      radial-gradient(circle at 50% 82%,rgba(166,101,18,.18),transparent 43%),
      linear-gradient(180deg,rgba(91,62,20,.13),rgba(7,9,8,.04)) !important;
  }

  .nav a.active:after{
    left:40% !important;
    right:40% !important;
    bottom:.26vh !important;
    height:.38vh !important;
  }

  .nav-icon{
    display:block !important;
    width:3.15vh !important;
    height:3.15vh !important;
    object-fit:contain !important;
    filter:
      sepia(.22)
      saturate(1.18)
      brightness(.95)
      drop-shadow(0 .10vh .15vh rgba(0,0,0,.60)) !important;
  }

  .nav a:nth-child(2) .nav-icon{width:3.35vh !important}
  .nav a:nth-child(3) .nav-icon{width:3.20vh !important}
  .nav a:nth-child(4) .nav-icon{width:3.10vh !important}

  .top-actions{
    right:1.45vh !important;
  }

  .language-current{
    width:10.3vh !important;
    min-width:10.3vh !important;
    height:4.5vh !important;
  }

  /* Keep the whole composition inside the viewport after taller header. */
  .hero{
    height:79.275vh !important;
  }

  /* ---------- Left hero ---------- */
  .hero-crest{
    left:23.7vh !important;
    top:4.6% !important;
    width:14.8vh !important;
  }

  .hero-title{
    left:12.2vh !important;
    top:30.2% !important;
    width:36.8vh !important;
  }

  .hero-copy{
    left:18.4vh !important;
    top:51.5% !important;
    font-size:2.16vh !important;
  }

  .hero-cta{
    left:17.0vh !important;
    top:61.2% !important;
    width:31.4vh !important;
    height:6.35vh !important;
    font-size:2.12vh !important;
  }

  .hero-register{
    position:absolute !important;
    left:18.2vh !important;
    top:68.5% !important;
    width:29.0vh !important;
    height:4.80vh !important;
    border:1px solid #8e672a !important;
    background:
      linear-gradient(180deg,rgba(24,25,22,.98),rgba(7,10,10,.98)) !important;
    color:#e3c886 !important;
    text-transform:uppercase !important;
    font-size:1.62vh !important;
    letter-spacing:.025em !important;
    text-shadow:0 .12vh .18vh #000 !important;
    box-shadow:
      inset 0 0 0 1px rgba(53,48,34,.75),
      0 .25vh .55vh rgba(0,0,0,.30) !important;
  }

  .hero-register:hover{
    filter:brightness(1.10) !important;
  }

  /* ---------- Three target-style feature cards ---------- */
  .features.target-feature-cards{
    left:6.2vh !important;
    top:77.0% !important;
    width:119.0vh !important;
    height:20.8% !important;
    display:grid !important;
    grid-template-columns:repeat(3,1fr) !important;
    gap:1.15vh !important;
    border:0 !important;
    z-index:4 !important;
  }

  .target-feature-cards .feature-card{
    position:relative !important;
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:36% 64% !important;
    align-items:stretch !important;
    gap:0 !important;
    text-align:left !important;
    overflow:hidden !important;
    border:1px solid rgba(132,94,35,.74) !important;
    background:
      radial-gradient(circle at 18% 42%,rgba(91,65,27,.15),transparent 35%),
      linear-gradient(180deg,rgba(11,15,14,.94),rgba(5,8,8,.975)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(49,42,27,.72),
      inset 0 0 1.15vh rgba(0,0,0,.60),
      0 .34vh .90vh rgba(0,0,0,.35) !important;
  }

  .target-feature-cards .feature-card::before{
    content:"" !important;
    position:absolute !important;
    inset:.38vh !important;
    pointer-events:none !important;
    border:1px solid rgba(84,59,22,.34) !important;
  }

  .target-feature-cards .feature-card + .feature-card{
    border-left:1px solid rgba(132,94,35,.74) !important;
  }

  .feature-visual{
    position:relative !important;
    min-width:0 !important;
    display:grid !important;
    place-items:center !important;
    overflow:hidden !important;
    background:
      radial-gradient(circle at center,rgba(164,115,37,.13),transparent 64%),
      linear-gradient(90deg,rgba(0,0,0,.18),transparent) !important;
  }

  .target-feature-cards .feature-art{
    display:block !important;
    width:83% !important;
    max-width:none !important;
    height:82% !important;
    object-fit:contain !important;
    margin:0 !important;
    filter:
      brightness(.90)
      saturate(.95)
      sepia(.08)
      drop-shadow(0 .20vh .34vh rgba(0,0,0,.65)) !important;
  }

  .feature-copy{
    position:relative !important;
    z-index:2 !important;
    display:flex !important;
    flex-direction:column !important;
    justify-content:center !important;
    align-items:flex-start !important;
    padding:1.10vh 1.20vh 1.05vh 1.05vh !important;
  }

  .target-feature-cards .feature strong{
    width:100% !important;
    padding-bottom:.55vh !important;
    margin-bottom:.62vh !important;
    color:#d6b46f !important;
    font-size:1.70vh !important;
    line-height:1.06 !important;
    letter-spacing:.015em !important;
    text-transform:uppercase !important;
    border-bottom:1px solid rgba(153,109,40,.50) !important;
  }

  .target-feature-cards .feature span{
    margin:0 !important;
    color:#e6d4aa !important;
    font-size:1.26vh !important;
    line-height:1.33 !important;
  }

  /* ---------- Login: correct vertical placement/proportion ---------- */
  .login-final{
    right:4.85vh !important;
    top:22.7% !important;
    width:37.8vh !important;
    padding:5.15vh 3.70vh 5.05vh !important;
  }

  .login-final__title-rule{
    margin:.72vh auto 1.45vh !important;
  }

  .login-final__form{
    grid-template-rows:5.02vh 5.02vh 3.28vh 6.02vh !important;
    row-gap:1.44vh !important;
  }

  .login-final__submit{
    align-self:end !important;
    margin-top:.12vh !important;
  }

  .login-parts__rail--left,
  .login-parts__rail--right{
    top:4.92vh !important;
    bottom:4.92vh !important;
  }
}

@media(max-width:900px){
  .nav-icon{display:none !important}
  .hero-register{
    position:absolute !important;
    left:50% !important;
    transform:translateX(-50%) !important;
    top:920px !important;
    width:300px !important;
    height:48px !important;
  }
  .target-feature-cards{
    display:none !important;
  }
}


/* ============================================================
   V54 – Zielscreen-Ausrichtung nach dem V53-Screenshot
   - Hero-Branding nicht mehr gestapelt/überlappend
   - Login deutlich höher gesetzt wie in der Vorlage
   - Karten höher und größer
   - zusätzliche Benefit-Leiste wie im Zielscreen
   ============================================================ */
@media(min-width:901px){
  /* Header logo stronger, menu begins after it. */
  .header-logo{
    left:3.15vh !important;
    width:31.8vh !important;
  }
  .nav{
    left:36.2vh !important;
  }
  .nav a{
    width:12.2vh !important;
  }

  /* The reference has the big wordmark high on the left; remove the extra crest stack. */
  .hero-crest{
    display:none !important;
  }
  .hero-title{
    left:10.3vh !important;
    top:7.2% !important;
    width:39.8vh !important;
  }
  .hero-copy{
    left:17.3vh !important;
    top:36.2% !important;
    font-size:2.22vh !important;
    line-height:1.20 !important;
  }
  .hero-cta{
    left:16.7vh !important;
    top:49.6% !important;
    width:31.8vh !important;
    height:6.30vh !important;
  }
  .hero-register{
    left:18.0vh !important;
    top:58.1% !important;
    width:29.2vh !important;
    height:4.72vh !important;
  }

  /* Three cards: taller and closer to the reference proportions. */
  .features.target-feature-cards{
    left:5.2vh !important;
    top:68.4% !important;
    width:123.5vh !important;
    height:21.8% !important;
    gap:1.10vh !important;
  }
  .target-feature-cards .feature-card{
    grid-template-columns:38% 62% !important;
  }
  .target-feature-cards .feature-art{
    width:90% !important;
    height:88% !important;
  }
  .target-feature-cards .feature strong{
    font-size:1.76vh !important;
  }
  .target-feature-cards .feature span{
    font-size:1.28vh !important;
  }

  /* Thin bottom benefit strip, matching the target hierarchy. */
  .hero-benefits{
    position:absolute !important;
    left:19.0vh !important;
    top:92.0% !important;
    width:117.0vh !important;
    height:6.25% !important;
    z-index:5 !important;
    display:grid !important;
    grid-template-columns:repeat(4,1fr) !important;
    border:1px solid rgba(125,90,37,.62) !important;
    background:linear-gradient(180deg,rgba(10,14,13,.94),rgba(5,8,8,.98)) !important;
    box-shadow:inset 0 0 0 1px rgba(42,35,24,.68),0 .30vh .65vh rgba(0,0,0,.32) !important;
  }
  .hero-benefit{
    min-width:0 !important;
    display:grid !important;
    grid-template-columns:4.3vh 1fr !important;
    align-items:center !important;
    gap:.72vh !important;
    padding:.42vh .90vh !important;
    border-right:1px solid rgba(126,89,34,.34) !important;
  }
  .hero-benefit:last-child{border-right:0 !important}
  .hero-benefit img{
    width:3.15vh !important;
    height:3.15vh !important;
    object-fit:contain !important;
    justify-self:center !important;
    filter:sepia(.15) brightness(.92) drop-shadow(0 .08vh .12vh rgba(0,0,0,.55)) !important;
  }
  .hero-benefit span{
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    gap:.10vh !important;
  }
  .hero-benefit strong{
    color:#d4b371 !important;
    font-size:1.23vh !important;
    line-height:1.05 !important;
    text-transform:uppercase !important;
    white-space:nowrap !important;
  }
  .hero-benefit small{
    color:#bca982 !important;
    font-size:1.02vh !important;
    line-height:1.08 !important;
    white-space:nowrap !important;
  }

  /* Login reference position: much closer to top of the hero. */
  .login-final{
    right:4.85vh !important;
    top:16.7% !important;
    width:37.4vh !important;
    padding:5.10vh 3.55vh 5.18vh !important;
  }
  .login-final > h1{
    font-size:3.04vh !important;
  }
  .login-final__form{
    row-gap:1.48vh !important;
  }
}

@media(max-width:900px){
  .hero-benefits{display:none !important}
  .hero-crest{display:block !important}
}


/* ============================================================
   V55 – Doppelten Registrieren-CTA entfernen + Login final säubern
   - linker Zusatzbutton "Registrieren" entfernt
   - Checkbox deutlich sichtbarer gemacht
   - dreiteiligen Login-Button enger und sauberer zusammengesetzt
   ============================================================ */
@media(min-width:901px){
  /* Only one left CTA: Jetzt spielen. */
  .hero-register{
    display:none !important;
  }

  .hero-cta{
    top:50.8% !important;
  }

  /* Make the checkbox actually visible in the dark panel. */
  .login-final__options{
    height:3.42vh !important;
    min-height:3.42vh !important;
    align-items:center !important;
    gap:1.24vh !important;
  }

  .login-final__remember,
  .login-final__options a{
    font-size:1.34vh !important;
    line-height:1.06 !important;
  }

  .login-final__remember{
    gap:.84vh !important;
  }

  .login-final__checkmark{
    width:3.10vh !important;
    height:3.10vh !important;
    flex:0 0 3.10vh !important;
    border:1px solid rgba(214,172,79,.92) !important;
    border-radius:.14vh !important;
    background-color:rgba(11,9,5,.98) !important;
    background-image:url('assets/v24_check_on.png?v=24') !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:78% 78% !important;
    box-shadow:
      inset 0 0 0 1px rgba(59,37,8,.90),
      0 .08vh .18vh rgba(0,0,0,.70),
      0 0 .20vh rgba(232,187,82,.18) !important;
    filter:none !important;
  }

  .login-final__checkbox:not(:checked) + .login-final__checkmark{
    background-image:url('assets/v24_check_off.png?v=24') !important;
    background-size:76% 76% !important;
  }

  .login-final__checkbox:focus-visible + .login-final__checkmark{
    outline:1px solid #ffd67f !important;
    outline-offset:.12vh !important;
  }

  /* Final pass on the 3-part button: narrower, more overlap, trimmed center. */
  .login-final__submit{
    width:90.2% !important;
    justify-self:center !important;
    height:6.10vh !important;
    min-height:6.10vh !important;
    overflow:hidden !important;
    isolation:isolate !important;
  }

  .login-final__btnskin{
    inset:0 !important;
    overflow:hidden !important;
  }

  .login-final__btnpart{
    top:0 !important;
    height:100% !important;
    max-width:none !important;
  }

  .login-final__btnpart--left{
    left:-.04vh !important;
    width:5.32vh !important;
    z-index:2 !important;
    object-fit:fill !important;
    object-position:left center !important;
  }

  .login-final__btnpart--right{
    right:-.04vh !important;
    width:5.18vh !important;
    z-index:2 !important;
    object-fit:fill !important;
    object-position:right center !important;
  }

  .login-final__btnpart--center{
    left:4.94vh !important;
    right:4.82vh !important;
    z-index:1 !important;
    background-image:url('assets/eee_btn_center_seamless_v2.png') !important;
    background-repeat:no-repeat !important;
    background-position:center !important;
    background-size:100% 100% !important;
  }

  .login-final__submit-label{
    position:relative !important;
    z-index:4 !important;
    font-size:1.84vh !important;
    letter-spacing:.01em !important;
  }
}

@media(max-width:900px){
  .hero-register{
    display:none !important;
  }
}


/* ============================================================
   V56 – Checkbox als echtes CSS-Element + Außenrahmen entfernt
   - Checkbox ist jetzt kein Bild-Lookup mehr, sondern rein per CSS gezeichnet
   - der komplette äußere Seitenrahmen / die Ornament-Umrandung ist entfernt
   ============================================================ */

.outer-frame,
.pf{
  display:none !important;
}

@media(min-width:901px){
  .login-final__options{
    height:3.52vh !important;
    min-height:3.52vh !important;
    align-items:center !important;
    gap:1.28vh !important;
  }

  .login-final__remember{
    gap:.82vh !important;
  }

  .login-final__remember,
  .login-final__options a{
    font-size:1.34vh !important;
    line-height:1.08 !important;
  }

  /* Real CSS checkbox box, not an image asset. */
  .login-final__checkmark{
    position:relative !important;
    width:2.34vh !important;
    height:2.34vh !important;
    flex:0 0 2.34vh !important;
    border:1px solid #d4a84b !important;
    border-radius:.14vh !important;
    background:
      linear-gradient(180deg, rgba(21,18,12,.98), rgba(8,9,8,.98)) !important;
    box-shadow:
      inset 0 0 0 1px rgba(74,47,10,.92),
      0 .08vh .16vh rgba(0,0,0,.65),
      0 0 .18vh rgba(212,168,75,.18) !important;
    filter:none !important;
    overflow:hidden !important;
  }

  .login-final__checkmark::before{
    content:"" !important;
    position:absolute !important;
    inset:.32vh !important;
    border-radius:.08vh !important;
    background:transparent !important;
  }

  .login-final__checkmark::after{
    content:"" !important;
    position:absolute !important;
    left:.66vh !important;
    top:.30vh !important;
    width:.62vh !important;
    height:1.14vh !important;
    border-right:.28vh solid #efc86c !important;
    border-bottom:.28vh solid #efc86c !important;
    transform:rotate(40deg) scale(0) !important;
    transform-origin:center !important;
    opacity:0 !important;
    transition:transform .12s ease, opacity .12s ease !important;
    filter:drop-shadow(0 .04vh .06vh rgba(0,0,0,.55)) !important;
  }

  .login-final__checkbox:checked + .login-final__checkmark::after{
    transform:rotate(40deg) scale(1) !important;
    opacity:1 !important;
  }

  .login-final__checkbox:not(:checked) + .login-final__checkmark::after{
    transform:rotate(40deg) scale(0) !important;
    opacity:0 !important;
  }

  .login-final__checkbox:focus-visible + .login-final__checkmark{
    outline:1px solid #ffd67f !important;
    outline-offset:.12vh !important;
  }
}

@media(max-width:900px){
  .outer-frame,
  .pf{
    display:none !important;
  }

  .login-final__checkmark{
    position:relative !important;
    width:18px !important;
    height:18px !important;
    flex:0 0 18px !important;
    border:1px solid #d4a84b !important;
    border-radius:2px !important;
    background:linear-gradient(180deg, rgba(21,18,12,.98), rgba(8,9,8,.98)) !important;
    box-shadow:inset 0 0 0 1px rgba(74,47,10,.92), 0 1px 2px rgba(0,0,0,.65) !important;
    overflow:hidden !important;
  }

  .login-final__checkmark::after{
    content:"" !important;
    position:absolute !important;
    left:5px !important;
    top:1px !important;
    width:5px !important;
    height:9px !important;
    border-right:2px solid #efc86c !important;
    border-bottom:2px solid #efc86c !important;
    transform:rotate(40deg) scale(0) !important;
    opacity:0 !important;
  }

  .login-final__checkbox:checked + .login-final__checkmark::after{
    transform:rotate(40deg) scale(1) !important;
    opacity:1 !important;
  }
}


/* ============================================================
   V57 – Header-Rechtsbereich vereinheitlichen + Login-Button
   optisch an "Jetzt spielen" angleichen
   - beseitigt den andersfarbigen Bereich oben rechts
   - Sprachbutton sauber rechts ausgerichtet
   - Login-Button nutzt dieselbe visuelle Basis wie der Haupt-CTA
   - Checkbox etwas kräftiger/sichtbarer
   ============================================================ */

@media(min-width:901px){
  /* Fix the differently tinted patch in the marked top-right area. */
  .topbar,
  .header-reference{
    overflow:hidden !important;
  }

  .top-actions{
    right:1.10vh !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    height:auto !important;
    width:auto !important;
    display:flex !important;
    align-items:center !important;
    justify-content:flex-end !important;
    gap:0 !important;
    background:transparent !important;
    box-shadow:none !important;
    border:0 !important;
  }

  .language-switcher{
    position:relative !important;
    right:0 !important;
    top:auto !important;
    transform:none !important;
    margin:0 !important;
    padding:0 !important;
    background:transparent !important;
  }

  .language-current{
    width:10.0vh !important;
    min-width:10.0vh !important;
    height:4.45vh !important;
    margin:0 !important;
    background:
      linear-gradient(180deg,rgba(255,208,103,.04),rgba(0,0,0,.05)),
      url('assets/button_black_master_v17.png') center/100% 100% no-repeat !important;
  }

  /* Make login submit visually match the "Jetzt spielen" button. */
  .login-final__submit{
    position:relative !important;
    width:88.0% !important;
    justify-self:center !important;
    height:5.95vh !important;
    min-height:5.95vh !important;
    border:0 !important;
    background:transparent !important;
    overflow:visible !important;
    isolation:isolate !important;
    box-shadow:none !important;
  }

  .login-final__submit::before{
    content:"" !important;
    position:absolute !important;
    inset:-10% -6.5% !important;
    background:url('assets/btn_red_clean.png') center/100% 100% no-repeat !important;
    z-index:1 !important;
    pointer-events:none !important;
  }

  .login-final__btnskin{
    display:none !important;
  }

  .login-final__submit-label{
    position:relative !important;
    z-index:2 !important;
    font-size:1.96vh !important;
    letter-spacing:.015em !important;
    text-shadow:0 .20vh .22vh rgba(56,5,5,.88) !important;
  }

  /* Checkbox slightly stronger so it reads immediately. */
  .login-final__checkmark{
    width:2.52vh !important;
    height:2.52vh !important;
    flex:0 0 2.52vh !important;
    border:1px solid #ddb055 !important;
    box-shadow:
      inset 0 0 0 1px rgba(88,54,11,.95),
      0 .08vh .16vh rgba(0,0,0,.65),
      0 0 .24vh rgba(221,176,85,.24) !important;
  }

  .login-final__checkmark::after{
    left:.72vh !important;
    top:.26vh !important;
    width:.66vh !important;
    height:1.26vh !important;
    border-right:.30vh solid #f2cd73 !important;
    border-bottom:.30vh solid #f2cd73 !important;
  }
}

@media(max-width:900px){
  .top-actions{
    transform:none !important;
  }

  .login-final__submit::before{
    content:"" !important;
    position:absolute !important;
    inset:-8% -6% !important;
    background:url('assets/btn_red_clean.png') center/100% 100% no-repeat !important;
    z-index:1 !important;
    pointer-events:none !important;
  }

  .login-final__btnskin{
    display:none !important;
  }

  .login-final__submit-label{
    position:relative !important;
    z-index:2 !important;
  }
}


/* ============================================================
   V58 – neues Benutzer-Logo sauber oben links
   Das hochgeladene Castle-Lords-Logo wird direkt verwendet.
   Der alte zu breite Logo-Container wurde verkleinert, damit
   rechts daneben kein unnötiger Leerraum entsteht.
   ============================================================ */
@media(min-width:901px){
  .header-logo{
    left:1.55vh !important;
    top:.35vh !important;
    width:23.0vh !important;
    height:10.45vh !important;
    margin:0 !important;
    padding:0 !important;
    display:block !important;
    overflow:visible !important;
    z-index:30 !important;
  }

  .header-logo img{
    width:100% !important;
    height:100% !important;
    display:block !important;
    object-fit:contain !important;
    object-position:left center !important;
    filter:drop-shadow(0 .18vh .26vh rgba(0,0,0,.62)) !important;
  }

  /* Start navigation directly after the real visual logo area. */
  .nav{
    left:27.0vh !important;
  }
}

@media(max-width:900px){
  .header-logo{
    width:235px !important;
    height:auto !important;
  }

  .header-logo img{
    width:100% !important;
    height:auto !important;
    object-fit:contain !important;
  }
}


/* ============================================================
   V59 – Sprachmenü repariert + Logo links klar sichtbar
   Ursache Sprachwahl:
   V57 hatte den Header auf overflow:hidden gesetzt. Dadurch wurde
   das Dropdown am unteren Headerrand abgeschnitten.
   ============================================================ */
@media(min-width:901px){
  /* Dropdown darf wieder aus dem Header herausragen. */
  .topbar{
    overflow:visible !important;
  }

  .header-reference{
    overflow:visible !important;
  }

  .top-actions{
    right:1.25vh !important;
    top:0 !important;
    transform:none !important;
    height:100% !important;
    z-index:300 !important;
    overflow:visible !important;
  }

  .language-switcher{
    position:relative !important;
    z-index:310 !important;
    overflow:visible !important;
  }

  .language-current{
    position:relative !important;
    z-index:312 !important;
    width:10.2vh !important;
    min-width:10.2vh !important;
    height:4.55vh !important;
  }

  .language-menu{
    position:absolute !important;
    top:calc(100% + .58vh) !important;
    right:0 !important;
    z-index:500 !important;
    width:16.4vh !important;
    height:auto !important;
    min-height:0 !important;
    padding:1.08vh .78vh .78vh !important;
    overflow:visible !important;
    border:1px solid rgba(176,128,43,.78) !important;
    background:
      radial-gradient(circle at 50% 0,rgba(118,77,19,.18),transparent 48%),
      linear-gradient(180deg,rgba(10,16,15,.995),rgba(4,8,8,.998)) !important;
    box-shadow:
      0 1.0vh 2.25vh rgba(0,0,0,.70),
      inset 0 0 0 1px rgba(53,39,16,.75),
      inset 0 0 1.0vh rgba(0,0,0,.70) !important;
  }

  .language-menu[hidden]{
    display:none !important;
  }

  .language-menu button{
    display:flex !important;
    width:100% !important;
    height:3.9vh !important;
    align-items:center !important;
    justify-content:flex-start !important;
    gap:.78vh !important;
    padding:.34vh .64vh !important;
  }

  .language-menu button span{
    display:inline !important;
    white-space:nowrap !important;
  }

  /* Hochgeladenes Logo links deutlicher/präsenter. */
  .header-logo{
    left:.85vh !important;
    top:.08vh !important;
    width:25.3vh !important;
    height:11.10vh !important;
    z-index:80 !important;
    overflow:visible !important;
  }

  .header-logo img{
    width:100% !important;
    height:100% !important;
    object-fit:contain !important;
    object-position:left center !important;
    transform:scale(1.06) !important;
    transform-origin:left center !important;
    filter:drop-shadow(0 .18vh .28vh rgba(0,0,0,.70)) !important;
  }

  .nav{
    left:28.6vh !important;
  }
}

@media(max-width:900px){
  .topbar,
  .header-reference,
  .top-actions,
  .language-switcher{
    overflow:visible !important;
  }

  .language-menu[hidden]{
    display:none !important;
  }
}


/* ============================================================
   V62 REGISTRATION – built from transparent individual assets
   No finished form/panel/button image is used.
   ============================================================ */
.register-page-v62{overflow:hidden;background:#050807}
.reg62-stage{position:relative;height:79.275vh;overflow:hidden;border-bottom:1px solid #8f6725}
.reg62-bg{position:absolute;inset:0;background:url('assets/bg_castle.png') center 46%/cover no-repeat;filter:brightness(.74) saturate(.88);transform:scale(1.01)}
.reg62-vignette{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.34),rgba(0,0,0,.08) 30%,rgba(0,0,0,.06) 70%,rgba(0,0,0,.31)),linear-gradient(180deg,rgba(0,0,0,.06),rgba(0,0,0,.23))}
.reg62-shell{position:relative;z-index:2;width:100%;height:100%;padding-top:1.6vh}
.reg62-heading{text-align:center;color:#ead39a;text-shadow:0 .16vh .25vh #000}
.reg62-heading h1{margin:.1vh 0 .35vh;font-size:5.15vh;line-height:1;text-transform:uppercase;font-weight:500;letter-spacing:.035em}
.reg62-heading p{margin:0;font-size:1.72vh;color:#e1ca95}
.reg62-heading__orn{display:none}

.reg62-panel{position:absolute;left:50%;top:18.7%;width:92.0vh;height:70.5%;transform:translateX(-50%);display:grid;grid-template-columns:56% 44%;z-index:3;padding:4.7vh 4.8vh 4.0vh}
.reg62-frame{position:absolute;inset:0;z-index:0;pointer-events:none}
.reg62-fill{position:absolute;inset:1.05vh;background:linear-gradient(180deg,rgba(5,10,10,.985),rgba(2,7,8,.992));box-shadow:inset 0 0 2.4vh #000c,0 .7vh 2vh #0009}
.reg62-rail{position:absolute;z-index:2;background-repeat:no-repeat;background-position:center;background-size:100% 100%;filter:drop-shadow(0 .08vh .12vh #000b)}
.reg62-rail--top,.reg62-rail--bottom{left:9.4vh;right:9.4vh;height:.95vh;background-image:url('assets/reg_rail_h.png')}
.reg62-rail--top{top:.45vh}.reg62-rail--bottom{bottom:.45vh;transform:scaleY(-1)}
.reg62-rail--left,.reg62-rail--right{top:8.7vh;bottom:8.7vh;width:.82vh;background-image:url('assets/reg_rail_v.png')}
.reg62-rail--left{left:.53vh}.reg62-rail--right{right:.53vh;transform:scaleX(-1)}
.reg62-corner{position:absolute;z-index:4;width:12.2vh;height:12.2vh;object-fit:contain;filter:drop-shadow(0 .12vh .18vh #000c)}
.reg62-corner--tl{left:-.20vh;top:-.20vh}
.reg62-corner--tr{right:-.20vh;top:-.20vh}
.reg62-corner--bl{left:-.20vh;bottom:-.20vh}
.reg62-corner--br{right:-.20vh;bottom:-.20vh}

.reg62-formside,.reg62-benefits{position:relative;z-index:5}
.reg62-formside{padding-right:4.0vh;border-right:1px solid rgba(136,96,34,.38)}
.reg62-benefits{padding-left:4.2vh}
.reg62-formside h2,.reg62-benefits h2{margin:0 0 1.55vh;text-transform:uppercase;color:#d9b565;font-size:2.08vh;letter-spacing:.02em;font-weight:500}
.reg62-form{display:grid;gap:.78vh}
.reg62-label{display:grid;gap:.30vh;color:#d9bc78;text-transform:uppercase;font-size:1.15vh;letter-spacing:.02em}
.reg62-input{height:4.45vh;display:flex;align-items:center;border:1px solid #896329;background:linear-gradient(180deg,rgba(8,14,14,.96),rgba(4,9,10,.98));box-shadow:inset 0 0 0 1px rgba(31,32,27,.9),inset 0 .18vh .45vh #0008}
.reg62-input>img{width:2.0vh;height:2.0vh;object-fit:contain;margin:0 1.05vh;filter:drop-shadow(0 .07vh .1vh #000b)}
.reg62-input input{flex:1;min-width:0;height:100%;border:0;outline:0;background:transparent;color:#ead5a0;padding:0 1vh 0 0;font-size:1.16vh}
.reg62-input input::placeholder{color:#8f8060;opacity:1}
.reg62-eye{width:4.25vh;height:100%;border:0;border-left:1px solid rgba(117,84,31,.48);background:transparent;display:grid;place-items:center;padding:0}
.reg62-eye img{width:2.10vh;height:1.55vh;object-fit:contain;opacity:.9}
.reg62-password-row{display:flex;align-items:center;justify-content:space-between;gap:1vh;margin:.05vh 0 .18vh}
.reg62-password-row small{color:#8f8062;font-size:.90vh}
.reg62-generate{height:2.45vh;padding:0 .90vh;border:1px solid #846028;background:#0a100f;color:#d9b562;font-size:.86vh;text-transform:uppercase}
.reg62-generate:hover{filter:brightness(1.15)}

.reg62-consent{display:flex;align-items:flex-start;gap:.62vh;color:#baa67d;font-size:.94vh;line-height:1.25;cursor:pointer;text-transform:none}
.reg62-consent input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.reg62-check{position:relative;width:1.75vh;height:1.75vh;flex:0 0 1.75vh;border:1px solid #ae7e31;background:#070b0a;box-shadow:inset 0 0 0 1px #34230c;margin-top:.02vh}
.reg62-check:after{content:"";position:absolute;left:.48vh;top:.13vh;width:.48vh;height:.90vh;border-right:.22vh solid #efc869;border-bottom:.22vh solid #efc869;transform:rotate(40deg) scale(0);opacity:0}
.reg62-consent input:checked+.reg62-check:after{transform:rotate(40deg) scale(1);opacity:1}
.reg62-consent a{color:#d8ab49;text-decoration:none}.reg62-consent a:hover{text-decoration:underline}

.reg62-submit{position:relative;width:88%;height:5.35vh;justify-self:center;margin-top:.42vh;border:0;background:transparent;color:#f2dba5;text-transform:uppercase;font-size:1.65vh;font-weight:700;letter-spacing:.02em;isolation:isolate;overflow:visible}
.reg62-submit__skin{position:absolute;inset:0;z-index:0;pointer-events:none}
.reg62-submit__center{position:absolute;left:3.9vh;right:3.9vh;top:.28vh;bottom:.28vh;background:url('assets/reg_button_center.png') center/100% 100% no-repeat}
.reg62-submit__left,.reg62-submit__right{position:absolute;top:-.20vh;height:5.8vh;width:6.0vh;object-fit:contain;z-index:2}
.reg62-submit__left{left:-.45vh}.reg62-submit__right{right:-.45vh}
.reg62-submit__label{position:relative;z-index:4;text-shadow:0 .16vh .2vh #400}
.reg62-submit:hover{filter:brightness(1.08)}
.reg62-login{text-align:center;color:#a9976f;font-size:1.02vh;margin-top:.18vh}
.reg62-login a{margin-left:.48vh;color:#d8ad50;text-transform:uppercase;font-weight:700}

.reg62-benefit{display:grid;grid-template-columns:6.4vh 1fr;gap:1.18vh;align-items:center;min-height:9.2vh;padding:.62vh 0;border-bottom:1px solid rgba(124,87,31,.33)}
.reg62-benefit:last-child{border-bottom:0}
.reg62-benefit>img{width:5.55vh;height:5.55vh;object-fit:contain;filter:drop-shadow(0 .15vh .2vh #000c)}
.reg62-benefit strong{display:block;color:#d9b76b;text-transform:uppercase;font-size:1.30vh;margin-bottom:.30vh}
.reg62-benefit p{margin:0;color:#c6b48d;font-size:1.02vh;line-height:1.38}

@media(max-width:900px){
  .register-page-v62{overflow:auto}
  .reg62-stage{height:auto;min-height:1260px}
  .reg62-heading h1{font-size:34px}
  .reg62-heading p{font-size:14px;padding:0 20px}
  .reg62-panel{position:relative;left:auto;top:auto;width:min(94%,620px);height:auto;min-height:970px;margin:25px auto 45px;transform:none;grid-template-columns:1fr;padding:60px 38px 50px}
  .reg62-formside{padding:0;border:0}
  .reg62-benefits{padding:40px 0 0}
  .reg62-corner{width:90px;height:90px}
  .reg62-rail--top,.reg62-rail--bottom{left:70px;right:70px;height:8px}
  .reg62-rail--left,.reg62-rail--right{top:65px;bottom:65px;width:7px}
  .reg62-formside h2,.reg62-benefits h2{font-size:21px}
  .reg62-label{font-size:12px}
  .reg62-input{height:50px}
  .reg62-input input{font-size:14px}
  .reg62-submit{height:58px;font-size:17px}
  .reg62-benefit{grid-template-columns:64px 1fr;min-height:92px}
  .reg62-benefit>img{width:54px;height:54px}
  .reg62-benefit strong{font-size:14px}
  .reg62-benefit p{font-size:12px}
}


/* ============================================================
   V63 – Registration polish pass
   Ziel: näher an Startseite und Referenz, größer/lesbarer/sauberer.
   Weiterhin nur aus Einzelteilen aufgebaut – keine fertige Panelgrafik.
   ============================================================ */

@media(min-width:901px){
  /* Gesamte Registrierung größer und präsenter */
  .reg62-shell{
    padding-top:1.15vh !important;
  }

  .reg62-heading h1{
    margin:.02vh 0 .42vh !important;
    font-size:5.55vh !important;
    letter-spacing:.032em !important;
  }

  .reg62-heading p{
    font-size:1.84vh !important;
    line-height:1.18 !important;
  }

  .reg62-panel{
    top:17.1% !important;
    width:106.0vh !important;
    height:73.7% !important;
    grid-template-columns:57% 43% !important;
    padding:5.25vh 5.35vh 4.55vh !important;
  }

  /* Rahmen harmonischer zusammensetzen */
  .reg62-fill{
    inset:1.10vh !important;
  }

  .reg62-corner{
    width:13.3vh !important;
    height:13.3vh !important;
  }

  .reg62-corner--tl{left:-.26vh !important;top:-.24vh !important}
  .reg62-corner--tr{right:-.26vh !important;top:-.24vh !important}
  .reg62-corner--bl{left:-.26vh !important;bottom:-.24vh !important}
  .reg62-corner--br{right:-.26vh !important;bottom:-.24vh !important}

  .reg62-rail--top,
  .reg62-rail--bottom{
    left:10.3vh !important;
    right:10.3vh !important;
    height:1.02vh !important;
  }

  .reg62-rail--top{top:.49vh !important}
  .reg62-rail--bottom{bottom:.49vh !important}

  .reg62-rail--left,
  .reg62-rail--right{
    top:9.45vh !important;
    bottom:9.45vh !important;
    width:.90vh !important;
  }

  .reg62-rail--left{left:.57vh !important}
  .reg62-rail--right{right:.57vh !important}

  /* Spalten */
  .reg62-formside{
    padding-right:4.8vh !important;
  }

  .reg62-benefits{
    padding-left:4.8vh !important;
  }

  .reg62-formside h2,
  .reg62-benefits h2{
    margin-bottom:1.82vh !important;
    font-size:2.42vh !important;
    line-height:1.05 !important;
  }

  /* Formular größer und lesbarer */
  .reg62-form{
    gap:.96vh !important;
  }

  .reg62-label{
    gap:.37vh !important;
    font-size:1.31vh !important;
  }

  .reg62-input{
    height:5.15vh !important;
  }

  .reg62-input>img{
    width:2.28vh !important;
    height:2.28vh !important;
    margin:0 1.18vh !important;
  }

  .reg62-input input{
    font-size:1.34vh !important;
    padding-right:1.18vh !important;
  }

  .reg62-eye{
    width:4.75vh !important;
  }

  .reg62-eye img{
    width:2.35vh !important;
    height:1.75vh !important;
  }

  .reg62-password-row{
    margin:.10vh 0 .30vh !important;
    gap:1.2vh !important;
  }

  .reg62-password-row small{
    font-size:1.02vh !important;
    line-height:1.18 !important;
  }

  .reg62-generate{
    height:2.90vh !important;
    padding:0 1.10vh !important;
    font-size:.98vh !important;
    white-space:nowrap !important;
  }

  /* Checkboxen deutlich größer + bessere Zeilenhöhe */
  .reg62-consent{
    gap:.82vh !important;
    font-size:1.08vh !important;
    line-height:1.35 !important;
  }

  .reg62-check{
    width:2.24vh !important;
    height:2.24vh !important;
    flex:0 0 2.24vh !important;
    border-color:#d2a046 !important;
    box-shadow:
      inset 0 0 0 1px #3b270d,
      0 .08vh .16vh rgba(0,0,0,.66),
      0 0 .18vh rgba(218,167,69,.20) !important;
  }

  .reg62-check:after{
    left:.62vh !important;
    top:.17vh !important;
    width:.58vh !important;
    height:1.12vh !important;
    border-right:.26vh solid #f1c96b !important;
    border-bottom:.26vh solid #f1c96b !important;
  }

  /* CTA: gleiche optische Sprache wie "JETZT SPIELEN", keine sichtbaren Fugen */
  .reg62-submit{
    width:86% !important;
    height:6.20vh !important;
    margin-top:.64vh !important;
    font-size:1.88vh !important;
    overflow:visible !important;
  }

  .reg62-submit__skin{
    display:none !important;
  }

  .reg62-submit::before{
    content:"" !important;
    position:absolute !important;
    inset:-10% -6.5% !important;
    background:url('assets/btn_red_clean.png') center/100% 100% no-repeat !important;
    z-index:1 !important;
    pointer-events:none !important;
  }

  .reg62-submit__label{
    position:relative !important;
    z-index:2 !important;
    text-shadow:0 .18vh .24vh rgba(64,0,0,.90) !important;
  }

  .reg62-login{
    margin-top:.38vh !important;
    font-size:1.15vh !important;
  }

  .reg62-login a{
    margin-left:.56vh !important;
  }

  /* Rechte Spalte kräftiger */
  .reg62-benefit{
    grid-template-columns:7.45vh 1fr !important;
    gap:1.35vh !important;
    min-height:10.25vh !important;
    padding:.78vh 0 !important;
  }

  .reg62-benefit>img{
    width:6.35vh !important;
    height:6.35vh !important;
  }

  .reg62-benefit strong{
    font-size:1.48vh !important;
    margin-bottom:.38vh !important;
  }

  .reg62-benefit p{
    font-size:1.15vh !important;
    line-height:1.42 !important;
  }
}

@media(max-width:900px){
  .reg62-panel{
    width:min(95%,660px) !important;
    padding:64px 40px 54px !important;
  }

  .reg62-check{
    width:22px !important;
    height:22px !important;
    flex-basis:22px !important;
  }

  .reg62-submit__skin{
    display:none !important;
  }

  .reg62-submit::before{
    content:"" !important;
    position:absolute !important;
    inset:-8% -6% !important;
    background:url('assets/btn_red_clean.png') center/100% 100% no-repeat !important;
    z-index:1 !important;
    pointer-events:none !important;
  }

  .reg62-submit__label{
    position:relative !important;
    z-index:2 !important;
  }
}


/* ============================================================
   V64 – Layout-Fix nach Screenshot
   - Panel größer und luftiger
   - Button nicht mehr am unteren Rahmen
   - untere Ecken kompakter
   - Checkbox-/Hinweistext besser lesbar
   - rechte Spalte etwas stärker
   ============================================================ */
@media(min-width:901px){
  .reg62-panel{
    top:15.9% !important;
    width:110.0vh !important;
    height:76.2% !important;
    grid-template-columns:57.5% 42.5% !important;
    padding:5.45vh 5.55vh 6.20vh !important;
  }

  /* Bottom corners were visually intruding into the content. */
  .reg62-corner--tl,
  .reg62-corner--tr{
    width:12.75vh !important;
    height:12.75vh !important;
  }

  .reg62-corner--bl,
  .reg62-corner--br{
    width:10.65vh !important;
    height:10.65vh !important;
    bottom:-.14vh !important;
  }

  .reg62-rail--top{
    left:9.8vh !important;
    right:9.8vh !important;
  }

  .reg62-rail--bottom{
    left:8.2vh !important;
    right:8.2vh !important;
    bottom:.46vh !important;
  }

  .reg62-rail--left,
  .reg62-rail--right{
    top:8.9vh !important;
    bottom:7.85vh !important;
  }

  .reg62-formside{
    padding-right:5.10vh !important;
  }

  .reg62-benefits{
    padding-left:5.05vh !important;
  }

  .reg62-formside h2,
  .reg62-benefits h2{
    font-size:2.52vh !important;
    margin-bottom:1.72vh !important;
  }

  .reg62-form{
    gap:.84vh !important;
  }

  .reg62-label{
    font-size:1.34vh !important;
    gap:.34vh !important;
  }

  .reg62-input{
    height:5.05vh !important;
  }

  .reg62-input input{
    font-size:1.38vh !important;
  }

  .reg62-password-row{
    min-height:3.25vh !important;
    margin:.08vh 0 .30vh !important;
  }

  .reg62-password-row small{
    max-width:60% !important;
    font-size:1.08vh !important;
    line-height:1.22 !important;
  }

  .reg62-generate{
    height:3.10vh !important;
    padding:0 1.15vh !important;
    font-size:1.02vh !important;
  }

  .reg62-consent{
    min-height:2.50vh !important;
    gap:.88vh !important;
    font-size:1.14vh !important;
    line-height:1.38 !important;
    align-items:center !important;
  }

  .reg62-check{
    width:2.42vh !important;
    height:2.42vh !important;
    flex:0 0 2.42vh !important;
  }

  .reg62-check:after{
    left:.68vh !important;
    top:.18vh !important;
    width:.62vh !important;
    height:1.20vh !important;
    border-right:.28vh solid #f1ca6d !important;
    border-bottom:.28vh solid #f1ca6d !important;
  }

  /* Keep CTA clearly inside the frame. */
  .reg62-submit{
    width:82.5% !important;
    height:5.80vh !important;
    margin-top:.36vh !important;
    font-size:1.84vh !important;
  }

  .reg62-submit::before{
    inset:-8% -5.5% !important;
  }

  .reg62-login{
    margin-top:.52vh !important;
    font-size:1.18vh !important;
    padding-bottom:.30vh !important;
  }

  .reg62-benefit{
    grid-template-columns:7.35vh 1fr !important;
    min-height:10.0vh !important;
    gap:1.42vh !important;
    padding:.78vh 0 !important;
  }

  .reg62-benefit>img{
    width:6.30vh !important;
    height:6.30vh !important;
  }

  .reg62-benefit strong{
    font-size:1.52vh !important;
  }

  .reg62-benefit p{
    font-size:1.18vh !important;
    line-height:1.43 !important;
  }
}


/* ============================================================
   V65 – Lohengrin typography pass
   Font source is NOT bundled into the package.
   The browser first tries a locally installed "Lohengrin" font,
   then loads the licensed remote TTF as a fallback.
   ============================================================ */

@font-face{
  font-family:"Lohengrin";
  src:
    local("Lohengrin"),
    local("Lohengrin Regular"),
    url("https://st.1001fonts.net/download/font/lohengrin.regular.ttf") format("truetype");
  font-style:normal;
  font-weight:400;
  font-display:swap;
}

:root{
  --castle-font:
    "Lohengrin",
    "Palatino Linotype",
    "Book Antiqua",
    Palatino,
    Georgia,
    serif;
}

/* Use Lohengrin throughout the Castle Lords UI. */
html,
body,
button,
input,
select,
textarea{
  font-family:var(--castle-font) !important;
}

/* Lohengrin looks best with slightly more breathing room. */
.nav,
.sprite-button,
.hero-copy,
.feature strong,
.footer-links,
.login-final > h1,
.login-final__submit-label,
.reg62-heading h1,
.reg62-formside h2,
.reg62-benefits h2,
.reg62-benefit strong,
.reg62-submit__label{
  letter-spacing:.045em !important;
}

/* Keep long explanatory text readable even with the decorative face. */
.feature span,
.hero-benefit small,
.reg62-benefit p,
.reg62-password-row small,
.reg62-consent,
.reg62-login,
.copyright{
  letter-spacing:.012em !important;
  line-height:1.38;
}

/* Inputs need a bit more size because Lohengrin has a compact x-height. */
.login-final__field input,
.reg62-input input{
  font-size:1.46vh !important;
  letter-spacing:.018em !important;
}

/* Registration headline gains the intended medieval character. */
.reg62-heading h1{
  font-size:5.72vh !important;
  font-weight:400 !important;
  text-shadow:
    0 .16vh .24vh #000,
    0 0 .18vh rgba(229,183,85,.18) !important;
}

.reg62-formside h2,
.reg62-benefits h2{
  font-weight:400 !important;
}

.reg62-submit__label,
.login-final__submit-label,
.sprite-button{
  font-weight:400 !important;
}


/* ============================================================
   V66 – Decorative side knights on registration page
   Added from user-provided transparent PNG assets.
   They sit around the registration panel and hide on small screens.
   ============================================================ */

.reg62-shell{
  overflow:hidden;
}

.reg62-knight{
  position:absolute;
  bottom:2.8vh;
  z-index:1;
  pointer-events:none;
  user-select:none;
  filter:
    drop-shadow(0 .8vh 1.4vh rgba(0,0,0,.72))
    drop-shadow(0 0 .35vh rgba(196,146,50,.12));
}

.reg62-panel,
.reg62-heading{
  position:relative;
  z-index:2;
}

@media(min-width:1280px){
  .reg62-knight--left{
    left:max(1vw, 1.2vh);
    width:27.5vh;
    max-width:18.2vw;
  }

  .reg62-knight--right{
    right:max(1vw, 1.2vh);
    width:27.5vh;
    max-width:18.2vw;
  }
}

@media(min-width:1500px){
  .reg62-knight--left{
    left:2.0vh;
    width:29.8vh;
    max-width:17.0vw;
  }

  .reg62-knight--right{
    right:2.0vh;
    width:29.8vh;
    max-width:17.0vw;
  }
}

@media(min-width:1700px){
  .reg62-knight--left{
    left:2.2vh;
    width:32.0vh;
  }

  .reg62-knight--right{
    right:2.2vh;
    width:32.0vh;
  }
}

@media(max-width:1279px){
  .reg62-knight{
    display:none !important;
  }
}


/* ============================================================
   V67 – bigger side knights + registration panel bottom fix
   - Knights more prominent
   - Registration panel moved up slightly
   - More internal bottom spacing so CTA is not clipped
   - Shell gets more vertical room above the footer
   ============================================================ */

@media(min-width: 1280px){
  .reg62-shell{
    min-height: 92vh !important;
    padding-bottom: 13.0vh !important;
  }

  .reg62-heading{
    padding-top: 1.1vh !important;
    margin-bottom: 1.4vh !important;
  }

  .reg62-panel{
    top: 22.8% !important;
    width: 112.5vh !important;
    height: 72.0% !important;
    padding: 5.1vh 5.4vh 7.2vh !important;
    grid-template-columns: 57.5% 42.5% !important;
  }

  .reg62-rail--left,
  .reg62-rail--right{
    bottom: 9.1vh !important;
  }

  .reg62-rail--bottom{
    bottom: .80vh !important;
  }

  .reg62-corner--bl,
  .reg62-corner--br{
    width: 9.7vh !important;
    height: 9.7vh !important;
    bottom: -.05vh !important;
  }

  .reg62-form{
    gap: .78vh !important;
  }

  .reg62-password-row{
    min-height: 3.05vh !important;
    margin: .14vh 0 .52vh !important;
  }

  .reg62-consent{
    min-height: 2.72vh !important;
    font-size: 1.12vh !important;
    line-height: 1.35 !important;
  }

  .reg62-submit{
    height: 5.65vh !important;
    margin-top: .55vh !important;
    margin-bottom: .55vh !important;
  }

  .reg62-login{
    margin-top: .55vh !important;
    padding-bottom: .55vh !important;
  }

  .reg62-knight{
    bottom: 5.2vh !important;
  }

  .reg62-knight--left{
    left: .8vw !important;
    width: 34.5vh !important;
    max-width: 20.0vw !important;
  }

  .reg62-knight--right{
    right: .8vw !important;
    width: 34.5vh !important;
    max-width: 20.0vw !important;
  }
}

@media(min-width: 1600px){
  .reg62-shell{
    min-height: 94vh !important;
    padding-bottom: 13.8vh !important;
  }

  .reg62-panel{
    top: 22.2% !important;
    width: 115vh !important;
    height: 72.8% !important;
    padding-bottom: 7.5vh !important;
  }

  .reg62-knight{
    bottom: 5.8vh !important;
  }

  .reg62-knight--left{
    left: 1.0vw !important;
    width: 38vh !important;
    max-width: 21.5vw !important;
  }

  .reg62-knight--right{
    right: 1.0vw !important;
    width: 38vh !important;
    max-width: 21.5vw !important;
  }
}

@media(min-width: 1800px){
  .reg62-knight--left{
    width: 41vh !important;
    left: 1.2vw !important;
  }

  .reg62-knight--right{
    width: 41vh !important;
    right: 1.2vw !important;
  }
}


/* ============================================================
   V68 – panel moved up + paladins much larger
   ============================================================ */

@media (min-width: 1280px){
  .reg62-shell{
    min-height: 94vh !important;
    padding-top: 0.8vh !important;
    padding-bottom: 11.0vh !important;
  }

  .reg62-heading{
    padding-top: 0.2vh !important;
    margin-bottom: 0.9vh !important;
  }

  .reg62-heading h1{
    font-size: 5.55vh !important;
  }

  .reg62-heading p{
    font-size: 1.78vh !important;
  }

  .reg62-panel{
    top: 16.0% !important;
    width: 111.5vh !important;
    height: 67.5% !important;
    padding: 4.0vh 4.8vh 5.4vh !important;
    grid-template-columns: 56.8% 43.2% !important;
  }

  .reg62-rail--left,
  .reg62-rail--right{
    top: 8.2vh !important;
    bottom: 7.7vh !important;
  }

  .reg62-rail--bottom{
    bottom: 0.45vh !important;
  }

  .reg62-corner--bl,
  .reg62-corner--br{
    bottom: -0.1vh !important;
  }

  .reg62-form{
    gap: .62vh !important;
  }

  .reg62-password-row{
    margin: 0.05vh 0 0.38vh !important;
  }

  .reg62-consent{
    min-height: 2.45vh !important;
    font-size: 1.06vh !important;
    line-height: 1.28 !important;
  }

  .reg62-submit{
    height: 5.2vh !important;
    margin-top: .35vh !important;
    margin-bottom: .35vh !important;
  }

  .reg62-login{
    margin-top: .25vh !important;
    padding-bottom: .25vh !important;
  }

  .reg62-knight{
    bottom: 3.8vh !important;
    z-index: 2 !important;
  }

  .reg62-knight--left{
    left: 0.4vw !important;
    width: 45vh !important;
    max-width: 26vw !important;
  }

  .reg62-knight--right{
    right: 0.4vw !important;
    width: 45vh !important;
    max-width: 26vw !important;
  }
}

@media (min-width: 1500px){
  .reg62-shell{
    min-height: 95vh !important;
    padding-bottom: 10.8vh !important;
  }

  .reg62-panel{
    top: 15.4% !important;
    width: 114vh !important;
    height: 68.3% !important;
    padding: 4.15vh 5.0vh 5.75vh !important;
  }

  .reg62-knight{
    bottom: 3.1vh !important;
  }

  .reg62-knight--left{
    left: 0.5vw !important;
    width: 49vh !important;
    max-width: 27vw !important;
  }

  .reg62-knight--right{
    right: 0.5vw !important;
    width: 49vh !important;
    max-width: 27vw !important;
  }
}

@media (min-width: 1700px){
  .reg62-panel{
    top: 14.8% !important;
    width: 116vh !important;
    height: 68.8% !important;
    padding-bottom: 5.9vh !important;
  }

  .reg62-knight{
    bottom: 2.2vh !important;
  }

  .reg62-knight--left{
    left: 0.6vw !important;
    width: 53vh !important;
    max-width: 28vw !important;
  }

  .reg62-knight--right{
    right: 0.6vw !important;
    width: 53vh !important;
    max-width: 28vw !important;
  }
}

@media (min-width: 1900px){
  .reg62-panel{
    top: 14.0% !important;
    width: 118vh !important;
    height: 69.2% !important;
  }

  .reg62-knight--left{
    width: 56vh !important;
    left: 0.7vw !important;
    max-width: 29vw !important;
  }

  .reg62-knight--right{
    width: 56vh !important;
    right: 0.7vw !important;
    max-width: 29vw !important;
  }
}


/* ============================================================
   V69 – registration panel higher + paladins slightly slimmer/taller
   ============================================================ */

@media (min-width: 1280px){
  .reg62-shell{
    min-height: 93.5vh !important;
    padding-top: 0.4vh !important;
    padding-bottom: 11.8vh !important;
  }

  .reg62-heading{
    padding-top: 0.1vh !important;
    margin-bottom: 0.55vh !important;
  }

  .reg62-panel{
    top: 13.9% !important;
    width: 111.5vh !important;
    height: 65.8% !important;
    padding: 3.8vh 4.8vh 4.9vh !important;
  }

  .reg62-rail--left,
  .reg62-rail--right{
    top: 7.9vh !important;
    bottom: 7.1vh !important;
  }

  .reg62-form{
    gap: .55vh !important;
  }

  .reg62-consent{
    min-height: 2.3vh !important;
    font-size: 1.02vh !important;
  }

  .reg62-submit{
    margin-top: .28vh !important;
    height: 5.0vh !important;
  }

  .reg62-login{
    margin-top: .18vh !important;
  }

  .reg62-knight{
    bottom: 1.6vh !important;
    transform-origin: bottom center !important;
  }

  .reg62-knight--left{
    left: 0.6vw !important;
    width: 39.5vh !important;
    max-width: 23vw !important;
    transform: scaleX(.92) scaleY(1.06) !important;
  }

  .reg62-knight--right{
    right: 0.6vw !important;
    width: 39.5vh !important;
    max-width: 23vw !important;
    transform: scaleX(.92) scaleY(1.06) !important;
  }
}

@media (min-width: 1500px){
  .reg62-panel{
    top: 13.2% !important;
    width: 113.0vh !important;
    height: 66.4% !important;
    padding-bottom: 5.15vh !important;
  }

  .reg62-knight{
    bottom: 1.2vh !important;
  }

  .reg62-knight--left{
    left: 0.7vw !important;
    width: 42.8vh !important;
    max-width: 23.5vw !important;
    transform: scaleX(.915) scaleY(1.07) !important;
  }

  .reg62-knight--right{
    right: 0.7vw !important;
    width: 42.8vh !important;
    max-width: 23.5vw !important;
    transform: scaleX(.915) scaleY(1.07) !important;
  }
}

@media (min-width: 1700px){
  .reg62-panel{
    top: 12.7% !important;
    width: 114.5vh !important;
    height: 67.0% !important;
  }

  .reg62-knight{
    bottom: .85vh !important;
  }

  .reg62-knight--left{
    left: 0.8vw !important;
    width: 46.8vh !important;
    max-width: 24vw !important;
    transform: scaleX(.91) scaleY(1.08) !important;
  }

  .reg62-knight--right{
    right: 0.8vw !important;
    width: 46.8vh !important;
    max-width: 24vw !important;
    transform: scaleX(.91) scaleY(1.08) !important;
  }
}

@media (min-width: 1900px){
  .reg62-panel{
    top: 12.2% !important;
    width: 116.0vh !important;
    height: 67.4% !important;
  }

  .reg62-knight--left{
    width: 49.2vh !important;
    max-width: 24.5vw !important;
    transform: scaleX(.905) scaleY(1.08) !important;
  }

  .reg62-knight--right{
    width: 49.2vh !important;
    max-width: 24.5vw !important;
    transform: scaleX(.905) scaleY(1.08) !important;
  }
}


/* ============================================================
   V70 – final registration layout stabilization
   - Registration panel moved upward and made height-safe
   - Desktop layout no longer clips the lower box area
   - Paladins overlap the panel and face toward the center
   - Composition scales more consistently across large screens
   ============================================================ */

@media (min-width: 1280px){
  .reg62-stage{
    height: auto !important;
    min-height: calc(100vh - 16.8vh) !important;
    overflow: hidden !important;
  }

  .reg62-shell{
    min-height: calc(100vh - 16.8vh) !important;
    height: auto !important;
    padding: 1.2vh 0 4.8vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .reg62-heading{
    position: relative !important;
    z-index: 3 !important;
    width: min(82vw, 1280px) !important;
    padding-top: .3vh !important;
    margin-bottom: .4vh !important;
  }

  .reg62-heading h1{
    margin: 0 0 .35vh !important;
    font-size: clamp(4.2vh, 5vw, 5.9vh) !important;
  }

  .reg62-heading p{
    font-size: clamp(1.35vh, 1.55vw, 1.78vh) !important;
  }

  .reg62-panel{
    position: relative !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    margin: 7.3vh auto 0 !important;
    width: min(63.5vw, 1080px) !important;
    min-height: 56.5vh !important;
    height: auto !important;
    padding: 3.1vh 3.45vh 4.35vh !important;
    grid-template-columns: 55.5% 44.5% !important;
    z-index: 2 !important;
  }

  .reg62-frame,
  .reg62-formside,
  .reg62-benefits{
    z-index: 2 !important;
  }

  .reg62-rail--left,
  .reg62-rail--right{
    top: 7.2vh !important;
    bottom: 7.3vh !important;
  }

  .reg62-formside{
    padding-right: 2.9vh !important;
  }

  .reg62-benefits{
    padding-left: 3.0vh !important;
  }

  .reg62-formside h2,
  .reg62-benefits h2{
    margin-bottom: 1.18vh !important;
    font-size: 1.95vh !important;
  }

  .reg62-form{
    gap: .55vh !important;
  }

  .reg62-label{
    gap: .22vh !important;
    font-size: 1.08vh !important;
  }

  .reg62-input{
    height: 4.1vh !important;
  }

  .reg62-input > img{
    width: 1.85vh !important;
    height: 1.85vh !important;
    margin: 0 .92vh !important;
  }

  .reg62-input input{
    font-size: 1.15vh !important;
  }

  .reg62-eye{
    width: 3.5vh !important;
  }

  .reg62-password-row{
    min-height: 2.18vh !important;
    margin: .10vh 0 .24vh !important;
    align-items: center !important;
  }

  .reg62-hint{
    font-size: .95vh !important;
    line-height: 1.18 !important;
  }

  .reg62-generate{
    height: 2.45vh !important;
    padding: 0 1.1vh !important;
    font-size: .86vh !important;
  }

  .reg62-consent{
    min-height: 2.05vh !important;
    gap: .68vh !important;
    font-size: 1.00vh !important;
    line-height: 1.2 !important;
    margin: .02vh 0 !important;
  }

  .reg62-consent input{
    width: 1.42vh !important;
    height: 1.42vh !important;
    margin-top: .05vh !important;
  }

  .reg62-submit{
    width: 86% !important;
    height: 4.95vh !important;
    margin-top: .44vh !important;
  }

  .reg62-submit__left,
  .reg62-submit__right{
    height: 5.25vh !important;
    width: 5.55vh !important;
  }

  .reg62-submit__center{
    left: 3.55vh !important;
    right: 3.55vh !important;
    top: .22vh !important;
    bottom: .22vh !important;
  }

  .reg62-submit__label{
    font-size: 1.58vh !important;
  }

  .reg62-login{
    margin-top: .28vh !important;
    font-size: .98vh !important;
  }

  .reg62-benefit{
    min-height: 8.15vh !important;
    grid-template-columns: 5.9vh 1fr !important;
    gap: 1.05vh !important;
    padding: .46vh 0 !important;
  }

  .reg62-benefit > img{
    width: 5.05vh !important;
    height: 5.05vh !important;
  }

  .reg62-benefit strong{
    font-size: 1.24vh !important;
    margin-bottom: .18vh !important;
  }

  .reg62-benefit p{
    font-size: .98vh !important;
    line-height: 1.32 !important;
  }

  .reg62-knight{
    position: absolute !important;
    z-index: 5 !important;
    bottom: 4.0vh !important;
    pointer-events: none !important;
    transform-origin: bottom center !important;
    filter:
      drop-shadow(0 .95vh 1.6vh rgba(0,0,0,.78))
      drop-shadow(0 0 .35vh rgba(194,146,50,.12)) !important;
  }

  .reg62-knight--left{
    left: clamp(0.2vw, 0.9vw, 1.1vw) !important;
    width: clamp(32vh, 21.8vw, 43vh) !important;
    max-width: none !important;
    transform: scaleX(.90) scaleY(1.08) !important;
  }

  .reg62-knight--right{
    right: clamp(0.2vw, 0.9vw, 1.1vw) !important;
    width: clamp(32vh, 21.8vw, 43vh) !important;
    max-width: none !important;
    transform: scaleX(.90) scaleY(1.08) !important;
  }
}

@media (min-width: 1500px){
  .reg62-panel{
    margin-top: 7.0vh !important;
    width: min(64vw, 1120px) !important;
    min-height: 57.2vh !important;
    padding: 3.25vh 3.55vh 4.5vh !important;
  }

  .reg62-knight{
    bottom: 3.4vh !important;
  }

  .reg62-knight--left,
  .reg62-knight--right{
    width: clamp(35vh, 22.5vw, 47vh) !important;
    transform: scaleX(.89) scaleY(1.10) !important;
  }
}

@media (min-width: 1750px){
  .reg62-panel{
    margin-top: 6.6vh !important;
    width: min(65vw, 1150px) !important;
    min-height: 57.6vh !important;
    padding-bottom: 4.65vh !important;
  }

  .reg62-knight{
    bottom: 2.8vh !important;
  }

  .reg62-knight--left,
  .reg62-knight--right{
    width: clamp(38vh, 23.2vw, 50vh) !important;
    transform: scaleX(.885) scaleY(1.115) !important;
  }
}

@media (min-width: 2000px){
  .reg62-panel{
    width: min(65vw, 1180px) !important;
    min-height: 58vh !important;
  }

  .reg62-knight--left,
  .reg62-knight--right{
    width: clamp(40vh, 23.4vw, 52vh) !important;
  }
}


/* ============================================================
   V71 – registration overlay alignment pass
   - registration panel sits higher and fully clears the footer
   - panel bottom is no longer cut off on 16:9 desktop screens
   - side paladins are taller/narrower and overlap the box mainly at the edges
   - large-screen behavior is normalized with width/height clamps
   ============================================================ */

@media (min-width: 1280px){
  .reg62-stage{
    min-height: calc(100vh - 7.7vh - 7.8vh) !important;
    height: auto !important;
    overflow: hidden !important;
  }

  .reg62-shell{
    min-height: calc(100vh - 7.7vh - 7.8vh) !important;
    padding: 0.8vh 0 10.8vh !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  .reg62-heading{
    width: min(84vw, 1260px) !important;
    padding-top: 0.3vh !important;
    margin-bottom: 0.55vh !important;
  }

  .reg62-heading h1{
    font-size: clamp(3.8vh, 4.45vw, 5.5vh) !important;
    line-height: .96 !important;
    margin-bottom: .28vh !important;
  }

  .reg62-heading p{
    font-size: clamp(1.2vh, 1.35vw, 1.65vh) !important;
    line-height: 1.18 !important;
  }

  .reg62-panel{
    width: min(61.5vw, 1020px) !important;
    max-width: calc(100vw - 25vw) !important;
    min-height: 54.4vh !important;
    height: auto !important;
    margin: 4.2vh auto 0 !important;
    padding: 2.55vh 2.9vh 3.15vh !important;
    grid-template-columns: 53.2% 46.8% !important;
    column-gap: 0 !important;
  }

  .reg62-rail--top,
  .reg62-rail--bottom{
    left: 8.1vh !important;
    right: 8.1vh !important;
  }

  .reg62-rail--left,
  .reg62-rail--right{
    top: 6.3vh !important;
    bottom: 5.6vh !important;
  }

  .reg62-formside{
    padding-right: 2.4vh !important;
  }

  .reg62-benefits{
    padding-left: 2.55vh !important;
  }

  .reg62-formside h2,
  .reg62-benefits h2{
    font-size: 1.8vh !important;
    margin-bottom: 1.0vh !important;
  }

  .reg62-form{
    gap: 0.42vh !important;
  }

  .reg62-label{
    gap: 0.2vh !important;
    font-size: 1.02vh !important;
  }

  .reg62-input{
    height: 3.9vh !important;
  }

  .reg62-input > img{
    width: 1.62vh !important;
    height: 1.62vh !important;
    margin: 0 0.86vh !important;
  }

  .reg62-input input{
    font-size: 1.08vh !important;
  }

  .reg62-eye{
    width: 3.15vh !important;
  }

  .reg62-password-row{
    min-height: 2.02vh !important;
    margin: 0.08vh 0 0.18vh !important;
    align-items: center !important;
  }

  .reg62-hint{
    font-size: .90vh !important;
    line-height: 1.18 !important;
    max-width: 68% !important;
  }

  .reg62-generate{
    height: 2.28vh !important;
    padding: 0 0.95vh !important;
    font-size: .80vh !important;
    white-space: nowrap !important;
  }

  .reg62-consent{
    min-height: 1.95vh !important;
    gap: .56vh !important;
    font-size: .94vh !important;
    line-height: 1.16 !important;
    margin: .04vh 0 !important;
  }

  .reg62-consent input{
    width: 1.34vh !important;
    height: 1.34vh !important;
    margin-top: .03vh !important;
  }

  .reg62-submit{
    width: 82% !important;
    height: 4.55vh !important;
    margin-top: .26vh !important;
  }

  .reg62-submit__left,
  .reg62-submit__right{
    width: 5.15vh !important;
    height: 4.95vh !important;
  }

  .reg62-submit__center{
    left: 3.35vh !important;
    right: 3.35vh !important;
    top: .18vh !important;
    bottom: .18vh !important;
  }

  .reg62-submit__label{
    font-size: 1.48vh !important;
  }

  .reg62-login{
    margin-top: .20vh !important;
    font-size: .92vh !important;
    line-height: 1.18 !important;
  }

  .reg62-benefit{
    min-height: 7.35vh !important;
    grid-template-columns: 5.4vh 1fr !important;
    gap: .9vh !important;
    padding: .32vh 0 !important;
  }

  .reg62-benefit > img{
    width: 4.45vh !important;
    height: 4.45vh !important;
  }

  .reg62-benefit strong{
    font-size: 1.16vh !important;
    margin-bottom: .15vh !important;
  }

  .reg62-benefit p{
    font-size: .92vh !important;
    line-height: 1.26 !important;
  }

  .reg62-knight{
    position: absolute !important;
    z-index: 5 !important;
    bottom: 1.0vh !important;
    max-width: none !important;
    pointer-events: none !important;
    transform-origin: bottom center !important;
    filter: drop-shadow(0 1.0vh 1.7vh rgba(0,0,0,.78)) !important;
  }

  .reg62-knight--left{
    left: clamp(0.2vw, .55vw, 0.75vw) !important;
    width: clamp(31vh, 19.6vw, 40vh) !important;
    transform: scaleX(.80) scaleY(1.15) !important;
  }

  .reg62-knight--right{
    right: clamp(0.2vw, .55vw, 0.75vw) !important;
    width: clamp(31vh, 19.6vw, 40vh) !important;
    transform: scaleX(.80) scaleY(1.15) !important;
  }
}

@media (min-width: 1500px){
  .reg62-panel{
    width: min(61.2vw, 1045px) !important;
    max-width: calc(100vw - 24vw) !important;
    min-height: 55.0vh !important;
    margin-top: 3.9vh !important;
    padding-bottom: 3.25vh !important;
  }

  .reg62-knight{
    bottom: 0.4vh !important;
  }

  .reg62-knight--left,
  .reg62-knight--right{
    width: clamp(33vh, 20.2vw, 43vh) !important;
    transform: scaleX(.79) scaleY(1.17) !important;
  }
}

@media (min-width: 1750px){
  .reg62-panel{
    width: min(61vw, 1070px) !important;
    max-width: calc(100vw - 23vw) !important;
    min-height: 55.5vh !important;
    margin-top: 3.5vh !important;
  }

  .reg62-knight{
    bottom: 0vh !important;
  }

  .reg62-knight--left,
  .reg62-knight--right{
    width: clamp(35vh, 20.8vw, 46vh) !important;
    transform: scaleX(.785) scaleY(1.18) !important;
  }
}

@media (min-width: 2200px){
  .reg62-panel{
    width: 1080px !important;
    max-width: calc(100vw - 26vw) !important;
  }

  .reg62-knight--left,
  .reg62-knight--right{
    width: clamp(38vh, 21vw, 48vh) !important;
  }
}


/* ============================================================
   V72 – Registrierung kompakter
   Ursache in V71: min-height + zu große Breitenbegrenzung erzeugten
   unnötig viel leere Fläche. Die Box richtet sich jetzt am Inhalt aus.
   ============================================================ */

@media (min-width:1280px){
  .reg62-shell{
    min-height:calc(100vh - 15.5vh) !important;
    padding:0.8vh 0 8.0vh !important;
  }

  .reg62-heading{
    margin-bottom:.25vh !important;
  }

  /* Nicht mehr künstlich in Breite/Höhe ziehen. */
  .reg62-panel{
    width:clamp(860px,56.5vw,980px) !important;
    max-width:none !important;
    min-height:0 !important;
    height:auto !important;
    margin:3.6vh auto 0 !important;
    padding:2.65vh 3.15vh 2.95vh !important;
    grid-template-columns:54.2% 45.8% !important;
  }

  .reg62-formside{
    padding-right:2.55vh !important;
  }

  .reg62-benefits{
    padding-left:2.7vh !important;
  }

  .reg62-formside h2,
  .reg62-benefits h2{
    margin-bottom:.92vh !important;
    font-size:1.82vh !important;
  }

  .reg62-form{
    gap:.44vh !important;
  }

  .reg62-label{
    gap:.18vh !important;
    font-size:1.02vh !important;
  }

  .reg62-input{
    height:3.92vh !important;
  }

  .reg62-password-row{
    min-height:2.0vh !important;
    margin:.06vh 0 .16vh !important;
  }

  .reg62-consent{
    min-height:1.88vh !important;
    margin:.02vh 0 !important;
  }

  .reg62-submit{
    width:81% !important;
    height:4.55vh !important;
    margin-top:.26vh !important;
  }

  .reg62-login{
    margin-top:.15vh !important;
  }

  .reg62-benefit{
    min-height:6.85vh !important;
    padding:.25vh 0 !important;
    grid-template-columns:5.15vh 1fr !important;
  }

  .reg62-benefit > img{
    width:4.25vh !important;
    height:4.25vh !important;
  }

  .reg62-benefit strong{
    font-size:1.14vh !important;
  }

  .reg62-benefit p{
    font-size:.90vh !important;
    line-height:1.24 !important;
  }

  /* Rails/Ecken folgen der kompakteren Box. */
  .reg62-rail--top,
  .reg62-rail--bottom{
    left:7.5vh !important;
    right:7.5vh !important;
  }

  .reg62-rail--left,
  .reg62-rail--right{
    top:5.9vh !important;
    bottom:5.5vh !important;
  }

  /* Paladine hoch und schlank, nur an den Seiten über die Box. */
  .reg62-knight{
    bottom:1.0vh !important;
    z-index:5 !important;
  }

  .reg62-knight--left{
    left:1.1vw !important;
    width:clamp(34vh,20vw,43vh) !important;
    max-width:none !important;
    transform:scaleX(.82) scaleY(1.14) !important;
  }

  .reg62-knight--right{
    right:1.1vw !important;
    width:clamp(34vh,20vw,43vh) !important;
    max-width:none !important;
    transform:scaleX(.82) scaleY(1.14) !important;
  }
}

@media (min-width:1600px){
  .reg62-panel{
    width:clamp(900px,55.5vw,1020px) !important;
    margin-top:3.3vh !important;
  }

  .reg62-knight--left,
  .reg62-knight--right{
    width:clamp(37vh,20.5vw,46vh) !important;
    transform:scaleX(.81) scaleY(1.16) !important;
  }
}

@media (min-width:1900px){
  .reg62-panel{
    width:1020px !important;
  }

  .reg62-knight--left,
  .reg62-knight--right{
    width:47vh !important;
  }
}


/* ============================================================
   V73 – Referenzlayout: Box wie Bild 1 + Paladine links/rechts
   Zielauflösungen: 1366×768, 1600×900, 1920×1080, 2560×1440
   ============================================================ */

@media (min-width:1100px){
  .register-page-v62{
    overflow:hidden !important;
  }

  .reg62-stage{
    --reg-panel-w: clamp(800px, 54vw, 1040px);
    --reg-panel-h: clamp(490px, 58vh, 565px);
    --reg-knight-w: clamp(305px, 20vw, 390px);
    height:79.275vh !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .reg62-shell{
    position:relative !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    padding:.75vh 0 0 !important;
    display:block !important;
    overflow:hidden !important;
  }

  .reg62-heading{
    position:relative !important;
    z-index:7 !important;
    width:min(82vw,1200px) !important;
    margin:0 auto !important;
    padding:0 !important;
    text-align:center !important;
  }

  .reg62-heading h1{
    margin:0 0 .25vh !important;
    font-size:clamp(38px,4.9vh,58px) !important;
    line-height:.98 !important;
  }

  .reg62-heading p{
    margin:0 !important;
    font-size:clamp(13px,1.52vh,18px) !important;
    line-height:1.15 !important;
  }

  /* Box wieder wie Referenz: nicht flach, nicht überlang. */
  .reg62-panel{
    position:absolute !important;
    left:50% !important;
    top:10.3vh !important;
    transform:translateX(-50%) !important;
    width:var(--reg-panel-w) !important;
    height:var(--reg-panel-h) !important;
    min-height:0 !important;
    max-width:none !important;
    margin:0 !important;
    padding:3.2vh 3.45vh 3.45vh !important;
    grid-template-columns:55% 45% !important;
    z-index:4 !important;
    overflow:visible !important;
  }

  .reg62-fill{
    inset:1.02vh !important;
  }

  .reg62-corner{
    width:clamp(72px,9.2vh,96px) !important;
    height:clamp(72px,9.2vh,96px) !important;
  }

  .reg62-rail--top,
  .reg62-rail--bottom{
    left:7.4vh !important;
    right:7.4vh !important;
    height:.82vh !important;
  }

  .reg62-rail--left,
  .reg62-rail--right{
    top:6.8vh !important;
    bottom:6.8vh !important;
    width:.72vh !important;
  }

  .reg62-formside{
    padding-right:3.05vh !important;
    border-right:1px solid rgba(136,96,34,.38) !important;
  }

  .reg62-benefits{
    padding-left:3.15vh !important;
  }

  .reg62-formside h2,
  .reg62-benefits h2{
    margin:0 0 1.15vh !important;
    font-size:clamp(17px,2.05vh,23px) !important;
    line-height:1.05 !important;
  }

  .reg62-form{
    display:grid !important;
    gap:.52vh !important;
  }

  .reg62-label{
    gap:.20vh !important;
    font-size:clamp(10px,1.07vh,12px) !important;
  }

  .reg62-input{
    height:4.35vh !important;
    min-height:34px !important;
  }

  .reg62-input > img{
    width:1.85vh !important;
    height:1.85vh !important;
    margin:0 .95vh !important;
  }

  .reg62-input input{
    font-size:clamp(11px,1.15vh,13px) !important;
  }

  .reg62-eye{
    width:3.65vh !important;
  }

  .reg62-password-row{
    min-height:2.35vh !important;
    margin:.08vh 0 .22vh !important;
    align-items:center !important;
  }

  .reg62-password-row small{
    max-width:65% !important;
    font-size:clamp(9px,.91vh,10px) !important;
    line-height:1.18 !important;
  }

  .reg62-generate{
    height:2.55vh !important;
    padding:0 1vh !important;
    font-size:clamp(8px,.80vh,9px) !important;
  }

  .reg62-consent{
    min-height:2.12vh !important;
    gap:.62vh !important;
    margin:.02vh 0 !important;
    font-size:clamp(9px,.94vh,10.5px) !important;
    line-height:1.2 !important;
  }

  .reg62-check{
    width:1.75vh !important;
    height:1.75vh !important;
    flex-basis:1.75vh !important;
  }

  .reg62-submit{
    width:82% !important;
    height:4.9vh !important;
    margin-top:.35vh !important;
  }

  .reg62-submit__label{
    font-size:clamp(14px,1.55vh,17px) !important;
  }

  .reg62-login{
    margin-top:.28vh !important;
    padding:0 !important;
    font-size:clamp(9px,.92vh,10px) !important;
  }

  .reg62-benefit{
    min-height:7.55vh !important;
    grid-template-columns:5.6vh 1fr !important;
    gap:1vh !important;
    padding:.34vh 0 !important;
  }

  .reg62-benefit > img{
    width:4.65vh !important;
    height:4.65vh !important;
  }

  .reg62-benefit strong{
    font-size:clamp(11px,1.16vh,13px) !important;
    margin-bottom:.18vh !important;
  }

  .reg62-benefit p{
    font-size:clamp(9px,.91vh,10.5px) !important;
    line-height:1.27 !important;
  }

  /* Paladine werden an den Boxkanten verankert.
     Dadurch bleibt die Überlappung auf jeder Desktopbreite gleich. */
  .reg62-knight{
    position:absolute !important;
    z-index:6 !important;
    bottom:1.0vh !important;
    width:var(--reg-knight-w) !important;
    max-width:none !important;
    pointer-events:none !important;
    transform-origin:bottom center !important;
    filter:drop-shadow(0 .9vh 1.45vh rgba(0,0,0,.78)) !important;
  }

  .reg62-knight--left{
    left:calc(50% - (var(--reg-panel-w) / 2)) !important;
    right:auto !important;
    transform:translateX(-82%) scaleX(.84) scaleY(1.10) !important;
  }

  .reg62-knight--right{
    right:calc(50% - (var(--reg-panel-w) / 2)) !important;
    left:auto !important;
    transform:translateX(82%) scaleX(.84) scaleY(1.10) !important;
  }
}

/* 1366×768 / kleinere Desktop-Displays */
@media (min-width:1100px) and (max-width:1450px){
  .reg62-stage{
    --reg-panel-w:clamp(780px,58vw,840px);
    --reg-panel-h:clamp(475px,63vh,500px);
    --reg-knight-w:clamp(285px,22vw,315px);
  }

  .reg62-panel{
    top:9.3vh !important;
    padding:2.7vh 2.9vh 2.85vh !important;
  }

  .reg62-benefit{
    min-height:7.0vh !important;
  }

  .reg62-knight{
    bottom:.5vh !important;
  }
}

/* 1600–1899 */
@media (min-width:1451px) and (max-width:1899px){
  .reg62-stage{
    --reg-panel-w:clamp(890px,55vw,990px);
    --reg-panel-h:clamp(500px,59vh,545px);
    --reg-knight-w:clamp(315px,20.5vw,365px);
  }
}

/* 1920+ */
@media (min-width:1900px){
  .reg62-stage{
    --reg-panel-w:clamp(980px,53.5vw,1040px);
    --reg-panel-h:clamp(525px,56vh,565px);
    --reg-knight-w:clamp(350px,19.8vw,395px);
  }

  .reg62-panel{
    top:9.8vh !important;
  }
}

/* Tablet: gleiche Grundidee, aber ohne Figuren über den Inhalt zu legen. */
@media (min-width:901px) and (max-width:1099px){
  .reg62-stage{
    height:auto !important;
    min-height:900px !important;
  }

  .reg62-shell{
    min-height:900px !important;
  }

  .reg62-panel{
    position:relative !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    width:min(88vw,760px) !important;
    height:auto !important;
    min-height:620px !important;
    margin:35px auto 70px !important;
  }

  .reg62-knight{
    display:none !important;
  }
}


/* ============================================================
   V74 – Rahmen unten wirklich schließen + mehr Abstand Paladine
   ============================================================ */

@media (min-width:1100px){

  /* Untere Rahmenkante als durchgehende Sicherheitslinie.
     Die Ornament-Rail liegt weiterhin darüber. */
  .reg62-frame::after{
    content:"" !important;
    position:absolute !important;
    z-index:1 !important;
    left:5.25vh !important;
    right:5.25vh !important;
    bottom:.50vh !important;
    height:1px !important;
    background:linear-gradient(
      90deg,
      rgba(102,67,16,.35),
      #bb8b31 8%,
      #d0a04a 50%,
      #bb8b31 92%,
      rgba(102,67,16,.35)
    ) !important;
    box-shadow:0 0 .18vh rgba(210,160,70,.28) !important;
    pointer-events:none !important;
  }

  /* Bottom-Rail bis dichter an die Ecken ziehen. */
  .reg62-rail--bottom{
    left:5.35vh !important;
    right:5.35vh !important;
    bottom:.43vh !important;
    height:.84vh !important;
    z-index:3 !important;
  }

  /* Seitenleisten sauber bis in die unteren Eckteile führen. */
  .reg62-rail--left,
  .reg62-rail--right{
    bottom:5.15vh !important;
  }

  /* Untere Ecken bündig auf die Rahmenkante setzen. */
  .reg62-corner--bl{
    left:-.10vh !important;
    bottom:-.05vh !important;
    z-index:5 !important;
  }

  .reg62-corner--br{
    right:-.10vh !important;
    bottom:-.05vh !important;
    z-index:5 !important;
  }

  /* Paladine etwas weiter von der Box weg.
     Größen bleiben wie V73, nur die Überlappung wird reduziert. */
  .reg62-knight--left{
    transform:translateX(-94%) scaleX(.84) scaleY(1.10) !important;
  }

  .reg62-knight--right{
    transform:translateX(94%) scaleX(.84) scaleY(1.10) !important;
  }
}

/* Kleinere Desktops: etwas weniger Abstand, damit nichts am Rand klebt. */
@media (min-width:1100px) and (max-width:1450px){
  .reg62-knight--left{
    transform:translateX(-90%) scaleX(.84) scaleY(1.10) !important;
  }

  .reg62-knight--right{
    transform:translateX(90%) scaleX(.84) scaleY(1.10) !important;
  }
}

/* 1600+ darf der Abstand deutlicher sein. */
@media (min-width:1600px){
  .reg62-knight--left{
    transform:translateX(-96%) scaleX(.84) scaleY(1.10) !important;
  }

  .reg62-knight--right{
    transform:translateX(96%) scaleX(.84) scaleY(1.10) !important;
  }
}


/* ============================================================
   V76 – Browser-Zoom-stabiles Registrierungs-Layout
   Problem:
   Die bisherigen Desktop-Regeln verwendeten px-clamps und
   min-width-Breakpoints. Beim Browser-Zoom ändern sich die CSS-
   Viewport-Pixel, wodurch Box, Figuren und Schrift unterschiedlich
   skalierten bzw. andere Breakpoints aktiv wurden.

   Lösung:
   Auf Desktop-Geräten (Maus/Pointer) verwendet die Registrierung
   nur noch viewport-relative Maße (vh/vw). Dadurch kompensiert sich
   Browser-Zoom automatisch: 40%, 80%, 100%, 125%, 150%, 200% bleiben
   optisch nahezu gleich proportioniert.
   ============================================================ */

@media (hover:hover) and (pointer:fine){

  .register-page-v62{
    overflow:hidden !important;
  }

  .reg62-stage{
    --reg-panel-w:114vh !important;
    --reg-panel-h:58vh !important;
    --reg-knight-w:44vh !important;

    height:79.275vh !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .reg62-shell{
    position:relative !important;
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    padding:.75vh 0 0 !important;
    overflow:hidden !important;
  }

  .reg62-heading{
    position:relative !important;
    z-index:7 !important;
    width:82vw !important;
    max-width:none !important;
    margin:0 auto !important;
    padding:0 !important;
    text-align:center !important;
  }

  .reg62-heading h1{
    margin:0 0 .25vh !important;
    font-size:4.9vh !important;
    line-height:.98 !important;
  }

  .reg62-heading p{
    margin:0 !important;
    font-size:1.52vh !important;
    line-height:1.15 !important;
  }

  /* Feste Proportionen relativ zur Viewport-Höhe – keine px-Clamps. */
  .reg62-panel{
    position:absolute !important;
    left:50% !important;
    top:10.3vh !important;
    transform:translateX(-50%) !important;

    width:min(var(--reg-panel-w), 68vw) !important;
    height:var(--reg-panel-h) !important;
    min-width:0 !important;
    max-width:none !important;
    min-height:0 !important;
    max-height:none !important;

    margin:0 !important;
    padding:3.2vh 3.45vh 3.45vh !important;
    grid-template-columns:55% 45% !important;
    z-index:4 !important;
    overflow:visible !important;
  }

  .reg62-fill{
    inset:1.02vh !important;
  }

  .reg62-corner{
    width:9.2vh !important;
    height:9.2vh !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:none !important;
    max-height:none !important;
  }

  .reg62-rail--top{
    left:7.4vh !important;
    right:7.4vh !important;
    top:.45vh !important;
    height:.82vh !important;
  }

  .reg62-rail--bottom{
    left:5.35vh !important;
    right:5.35vh !important;
    bottom:.43vh !important;
    height:.84vh !important;
    z-index:3 !important;
  }

  .reg62-rail--left,
  .reg62-rail--right{
    top:6.8vh !important;
    bottom:5.15vh !important;
    width:.72vh !important;
  }

  .reg62-corner--tl{
    left:-.20vh !important;
    top:-.20vh !important;
  }

  .reg62-corner--tr{
    right:-.20vh !important;
    top:-.20vh !important;
  }

  .reg62-corner--bl{
    left:-.10vh !important;
    bottom:-.05vh !important;
  }

  .reg62-corner--br{
    right:-.10vh !important;
    bottom:-.05vh !important;
  }

  /* Untere Kante bleibt bei jedem Zoom geschlossen. */
  .reg62-frame::after{
    content:"" !important;
    position:absolute !important;
    z-index:1 !important;
    left:5.25vh !important;
    right:5.25vh !important;
    bottom:.50vh !important;
    height:.10vh !important;
    min-height:1px !important;
    background:linear-gradient(
      90deg,
      rgba(102,67,16,.35),
      #bb8b31 8%,
      #d0a04a 50%,
      #bb8b31 92%,
      rgba(102,67,16,.35)
    ) !important;
    pointer-events:none !important;
  }

  .reg62-formside{
    padding-right:3.05vh !important;
    border-right:.10vh solid rgba(136,96,34,.38) !important;
  }

  .reg62-benefits{
    padding-left:3.15vh !important;
  }

  .reg62-formside h2,
  .reg62-benefits h2{
    margin:0 0 1.15vh !important;
    font-size:2.05vh !important;
    line-height:1.05 !important;
  }

  .reg62-form{
    display:grid !important;
    gap:.52vh !important;
  }

  .reg62-label{
    gap:.20vh !important;
    font-size:1.07vh !important;
  }

  .reg62-input{
    height:4.35vh !important;
    min-height:0 !important;
  }

  .reg62-input > img{
    width:1.85vh !important;
    height:1.85vh !important;
    margin:0 .95vh !important;
  }

  .reg62-input input{
    font-size:1.15vh !important;
    min-height:0 !important;
  }

  .reg62-eye{
    width:3.65vh !important;
    min-width:3.65vh !important;
  }

  .reg62-eye img{
    width:2.0vh !important;
    height:1.5vh !important;
  }

  .reg62-password-row{
    min-height:2.35vh !important;
    margin:.08vh 0 .22vh !important;
    align-items:center !important;
  }

  .reg62-password-row small{
    max-width:65% !important;
    font-size:.91vh !important;
    line-height:1.18 !important;
  }

  .reg62-generate{
    height:2.55vh !important;
    min-height:0 !important;
    padding:0 1vh !important;
    font-size:.80vh !important;
  }

  .reg62-consent{
    min-height:2.12vh !important;
    gap:.62vh !important;
    margin:.02vh 0 !important;
    font-size:.94vh !important;
    line-height:1.2 !important;
  }

  .reg62-check{
    width:1.75vh !important;
    height:1.75vh !important;
    min-width:1.75vh !important;
    min-height:1.75vh !important;
    flex:0 0 1.75vh !important;
  }

  .reg62-check::after{
    left:.48vh !important;
    top:.12vh !important;
    width:.45vh !important;
    height:.88vh !important;
    border-right:.20vh solid #efc869 !important;
    border-bottom:.20vh solid #efc869 !important;
  }

  .reg62-submit{
    width:82% !important;
    height:4.9vh !important;
    min-height:0 !important;
    margin-top:.35vh !important;
  }

  .reg62-submit__left,
  .reg62-submit__right{
    height:5.25vh !important;
    width:5.5vh !important;
  }

  .reg62-submit__center{
    left:3.55vh !important;
    right:3.55vh !important;
    top:.22vh !important;
    bottom:.22vh !important;
  }

  .reg62-submit__label{
    font-size:1.55vh !important;
  }

  .reg62-login{
    margin-top:.28vh !important;
    padding:0 !important;
    font-size:.92vh !important;
  }

  .reg62-benefit{
    min-height:7.55vh !important;
    grid-template-columns:5.6vh 1fr !important;
    gap:1vh !important;
    padding:.34vh 0 !important;
  }

  .reg62-benefit > img{
    width:4.65vh !important;
    height:4.65vh !important;
  }

  .reg62-benefit strong{
    font-size:1.16vh !important;
    margin-bottom:.18vh !important;
  }

  .reg62-benefit p{
    font-size:.91vh !important;
    line-height:1.27 !important;
  }

  /* Paladine bleiben an den Boxkanten verankert.
     Keine width-breakpoints mehr, deshalb springen sie bei Zoom nicht. */
  .reg62-knight{
    display:block !important;
    position:absolute !important;
    z-index:6 !important;
    bottom:1vh !important;
    width:var(--reg-knight-w) !important;
    min-width:0 !important;
    max-width:none !important;
    height:auto !important;
    pointer-events:none !important;
    transform-origin:bottom center !important;
    filter:drop-shadow(0 .9vh 1.45vh rgba(0,0,0,.78)) !important;
  }

  .reg62-knight--left{
    left:calc(50% - (min(var(--reg-panel-w), 68vw) / 2)) !important;
    right:auto !important;
    transform:translateX(-94%) scaleX(.84) scaleY(1.10) !important;
  }

  .reg62-knight--right{
    right:calc(50% - (min(var(--reg-panel-w), 68vw) / 2)) !important;
    left:auto !important;
    transform:translateX(94%) scaleX(.84) scaleY(1.10) !important;
  }
}

/* Sehr breite / sehr schmale Desktop-Seitenverhältnisse:
   nur den Abstand begrenzen, nicht die gesamte Gestaltung wechseln. */
@media (hover:hover) and (pointer:fine) and (max-aspect-ratio: 4/3){
  .reg62-stage{
    --reg-panel-w:104vh !important;
    --reg-knight-w:40vh !important;
  }

  .reg62-panel{
    width:min(var(--reg-panel-w), 72vw) !important;
  }

  .reg62-knight--left{
    left:calc(50% - (min(var(--reg-panel-w), 72vw) / 2)) !important;
  }

  .reg62-knight--right{
    right:calc(50% - (min(var(--reg-panel-w), 72vw) / 2)) !important;
  }
}


/* ============================================================
   V77 – Gemeinsames Seiten-Panel
   Ein wiederverwendbarer Rahmen für:
   Passwort vergessen, Impressum, Datenschutz, AGB und weitere Seiten.
   Nutzt die gleichen Einzelteile wie die Registrierungsbox.
   ============================================================ */

.shared-page{
  overflow:hidden;
  background:#050807;
}

.shared-stage{
  position:relative;
  height:79.275vh;
  overflow:hidden;
  border-bottom:1px solid #8f6725;
}

.shared-stage__bg{
  position:absolute;
  inset:0;
  background:url('assets/bg_castle.png') center 46%/cover no-repeat;
  filter:brightness(.67) saturate(.82);
  transform:scale(1.01);
}

.shared-stage__vignette{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 35%,rgba(0,0,0,.03),rgba(0,0,0,.18) 55%,rgba(0,0,0,.44) 100%),
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.24));
}

.shared-layout{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  padding-top:2.6vh;
}

.shared-heading{
  text-align:center;
  color:#ead39a;
  text-shadow:0 .16vh .25vh #000;
}

.shared-heading h1{
  margin:0 0 .42vh;
  font-size:4.9vh;
  line-height:1;
  text-transform:uppercase;
  font-weight:400;
  letter-spacing:.045em;
}

.shared-heading p{
  margin:0;
  font-size:1.55vh;
  color:#e1ca95;
}

.shared-panel{
  position:absolute;
  left:50%;
  top:18.6%;
  width:82vh;
  min-height:46vh;
  transform:translateX(-50%);
  padding:4.6vh 5.2vh 4.5vh;
  color:#e7d2a0;
  isolation:isolate;
}

.shared-frame{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
}

.shared-frame__fill{
  position:absolute;
  inset:1.04vh;
  background:
    radial-gradient(circle at 50% 0,rgba(80,54,21,.10),transparent 34%),
    linear-gradient(180deg,rgba(5,10,10,.988),rgba(2,7,8,.995));
  box-shadow:inset 0 0 2.4vh #000c,0 .7vh 2vh #0009;
}

.shared-frame__rail,
.shared-frame__corner{
  position:absolute;
  display:block;
}

.shared-frame__rail{
  z-index:2;
  background-repeat:no-repeat;
  background-position:center;
  background-size:100% 100%;
}

.shared-frame__rail--top,
.shared-frame__rail--bottom{
  left:7.1vh;
  right:7.1vh;
  height:.88vh;
  background-image:url('assets/reg_rail_h.png');
}

.shared-frame__rail--top{top:.45vh}
.shared-frame__rail--bottom{bottom:.45vh;transform:scaleY(-1)}

.shared-frame__rail--left,
.shared-frame__rail--right{
  top:6.5vh;
  bottom:6.5vh;
  width:.75vh;
  background-image:url('assets/reg_rail_v.png');
}

.shared-frame__rail--left{left:.52vh}
.shared-frame__rail--right{right:.52vh;transform:scaleX(-1)}

.shared-frame__corner{
  z-index:4;
  width:10.2vh;
  height:10.2vh;
  object-fit:contain;
}

.shared-frame__corner--tl{left:-.18vh;top:-.18vh}
.shared-frame__corner--tr{right:-.18vh;top:-.18vh}
.shared-frame__corner--bl{left:-.10vh;bottom:-.10vh}
.shared-frame__corner--br{right:-.10vh;bottom:-.10vh}

.shared-panel__content{
  position:relative;
  z-index:5;
}

.shared-form-card{
  width:76%;
  margin:0 auto;
}

.shared-icon-title{
  display:grid;
  grid-template-columns:6.3vh 1fr;
  align-items:center;
  gap:1.25vh;
  margin-bottom:2.2vh;
}

.shared-icon-title > img{
  width:5.5vh;
  height:5.5vh;
  object-fit:contain;
  filter:drop-shadow(0 .16vh .25vh #000c);
}

.shared-icon-title h2,
.shared-legal h2{
  margin:0 0 .5vh;
  color:#dbb869;
  text-transform:uppercase;
  font-size:2.25vh;
  font-weight:400;
}

.shared-icon-title p{
  margin:0;
  color:#c8b48a;
  font-size:1.16vh;
  line-height:1.42;
}

.shared-form{
  display:grid;
  gap:1.55vh;
}

.shared-label{
  display:grid;
  gap:.36vh;
  color:#d9bc78;
  text-transform:uppercase;
  font-size:1.18vh;
}

.shared-input{
  height:4.9vh;
  display:flex;
  align-items:center;
  border:1px solid #896329;
  background:linear-gradient(180deg,rgba(8,14,14,.97),rgba(4,9,10,.99));
  box-shadow:inset 0 0 0 1px rgba(31,32,27,.9),inset 0 .18vh .45vh #0008;
}

.shared-input img{
  width:2.1vh;
  height:2.1vh;
  object-fit:contain;
  margin:0 1.1vh;
}

.shared-input input{
  flex:1;
  min-width:0;
  height:100%;
  border:0;
  outline:0;
  background:transparent;
  color:#ead5a0;
  font:inherit;
  font-size:1.28vh;
}

.shared-input input::placeholder{
  color:#8f8060;
  opacity:1;
}

.shared-red-button{
  position:relative;
  width:82%;
  height:5.45vh;
  justify-self:center;
  margin-top:.35vh;
  border:0;
  background:transparent;
  color:#f2dba5;
  text-transform:uppercase;
  font-size:1.62vh;
  letter-spacing:.025em;
  isolation:isolate;
}

.shared-red-button::before{
  content:"";
  position:absolute;
  inset:-9% -6%;
  background:url('assets/btn_red_clean.png') center/100% 100% no-repeat;
  z-index:-1;
}

.shared-red-button:hover{filter:brightness(1.08)}

.shared-backlink{
  text-align:center;
  font-size:1.08vh;
}

.shared-backlink a{
  color:#d8ad50;
  text-transform:uppercase;
  text-decoration:none;
}

.shared-backlink a:hover{text-decoration:underline}

.shared-legal{
  color:#c9b78e;
}

.shared-legal h2{
  text-align:center;
  font-size:2.65vh;
  margin-bottom:1.7vh;
}

.shared-legal section{
  padding:1.05vh 0;
  border-bottom:1px solid rgba(140,98,35,.36);
}

.shared-legal section:last-of-type{
  border-bottom:0;
}

.shared-legal h3{
  margin:0 0 .45vh;
  color:#d8b567;
  font-size:1.35vh;
  text-transform:uppercase;
  font-weight:400;
}

.shared-legal p{
  margin:0;
  font-size:1.10vh;
  line-height:1.5;
}

.shared-legal__note{
  margin-top:1.35vh !important;
  color:#8e805f;
  font-size:.98vh !important;
  font-style:italic;
}

.shared-legal--scroll{
  max-height:38vh;
  padding-right:1.0vh;
  overflow:auto;
  scrollbar-color:#9d722c #07100f;
  scrollbar-width:thin;
}

@media (hover:hover) and (pointer:fine){
  .shared-stage{
    height:79.275vh;
  }

  .shared-panel{
    width:min(82vh,58vw);
  }
}

@media(max-width:900px){
  .shared-page{
    overflow:auto;
  }

  .shared-stage{
    min-height:900px;
    height:auto;
  }

  .shared-layout{
    min-height:900px;
  }

  .shared-heading{
    padding:20px 18px 0;
  }

  .shared-heading h1{
    font-size:34px;
  }

  .shared-heading p{
    font-size:14px;
  }

  .shared-panel{
    position:relative;
    left:auto;
    top:auto;
    width:min(92%,620px);
    min-height:520px;
    margin:35px auto 60px;
    transform:none;
    padding:55px 38px 48px;
  }

  .shared-form-card{
    width:100%;
  }

  .shared-icon-title{
    grid-template-columns:60px 1fr;
  }

  .shared-icon-title > img{
    width:52px;
    height:52px;
  }

  .shared-icon-title h2,
  .shared-legal h2{
    font-size:23px;
  }

  .shared-icon-title p,
  .shared-legal p{
    font-size:13px;
  }

  .shared-legal h3{
    font-size:15px;
  }

  .shared-label{
    font-size:13px;
  }

  .shared-input{
    height:50px;
  }

  .shared-input input{
    font-size:15px;
  }

  .shared-red-button{
    height:56px;
    font-size:16px;
  }

  .shared-backlink{
    font-size:12px;
  }

  .shared-legal--scroll{
    max-height:none;
    overflow:visible;
  }
}


/* ============================================================
   V78 – Premium Sprachwahl
   Gleicher Castle-Lords-Look, aber klarer, hochwertiger und lesbarer.
   ============================================================ */

.language-switcher,
.language-switcher *{
  box-sizing:border-box;
}

@media(min-width:901px){
  .topbar,
  .header-reference,
  .top-actions,
  .language-switcher{
    overflow:visible !important;
  }

  .top-actions{
    right:1.35vh !important;
    z-index:500 !important;
  }

  .language-switcher{
    position:relative !important;
    z-index:520 !important;
  }

  .language-current{
    position:relative !important;
    z-index:522 !important;
    width:14.65vh !important;
    min-width:14.65vh !important;
    height:5.18vh !important;
    padding:.48vh 1.20vh .48vh 1.10vh !important;
    display:grid !important;
    grid-template-columns:3.0vh 1fr 1.25vh !important;
    align-items:center !important;
    gap:.72vh !important;
    border:0 !important;
    background:
      linear-gradient(180deg,rgba(255,220,132,.08),rgba(29,18,5,.08)),
      url('assets/button_black_master_v17.png') center/100% 100% no-repeat !important;
    color:#f3dca5 !important;
    filter:drop-shadow(0 .30vh .50vh rgba(0,0,0,.46)) !important;
    box-shadow:none !important;
    cursor:pointer !important;
    transition:filter .16s ease,transform .12s ease !important;
  }

  .language-current::after{
    content:"" !important;
    position:absolute !important;
    left:15% !important;
    right:15% !important;
    bottom:.36vh !important;
    height:1px !important;
    background:linear-gradient(90deg,transparent,rgba(225,172,68,.42),transparent) !important;
    pointer-events:none !important;
  }

  .language-current:hover,
  .language-current[aria-expanded="true"]{
    filter:
      brightness(1.11)
      drop-shadow(0 .30vh .50vh rgba(0,0,0,.46))
      drop-shadow(0 0 .30vh rgba(218,166,58,.18)) !important;
  }

  .language-current:active{
    transform:translateY(.05vh) !important;
  }

  .language-current__flag{
    position:relative !important;
    width:3.0vh !important;
    height:2.05vh !important;
    display:grid !important;
    place-items:center !important;
    padding:.12vh !important;
    background:#050807 !important;
    border:1px solid rgba(194,145,53,.66) !important;
    box-shadow:
      inset 0 0 .28vh rgba(255,195,73,.10),
      0 .08vh .22vh rgba(0,0,0,.62) !important;
  }

  .language-current__flag::before,
  .language-current__flag::after{
    content:"" !important;
    position:absolute !important;
    width:.35vh !important;
    height:.35vh !important;
    background:#c68e2d !important;
    transform:rotate(45deg) !important;
    top:50% !important;
    margin-top:-.175vh !important;
  }

  .language-current__flag::before{left:-.22vh !important}
  .language-current__flag::after{right:-.22vh !important}

  .language-current__flag img,
  .language-current img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    border:0 !important;
    box-shadow:none !important;
  }

  .language-current__text{
    min-width:0 !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:.02vh !important;
    line-height:1 !important;
  }

  #currentLanguageCode{
    display:block !important;
    min-width:0 !important;
    font-size:1.18vh !important;
    line-height:1 !important;
    letter-spacing:.12em !important;
    color:#f5dfaa !important;
  }

  #currentLanguageName{
    display:block !important;
    max-width:100% !important;
    margin-top:.17vh !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    color:#a89267 !important;
    font-size:.82vh !important;
    line-height:1 !important;
    letter-spacing:.025em !important;
    text-transform:none !important;
  }

  .language-chevron{
    position:relative !important;
    display:block !important;
    width:.82vh !important;
    height:.82vh !important;
    margin:0 !important;
    font-size:0 !important;
    transform:rotate(45deg) !important;
    border-right:.16vh solid #d7a646 !important;
    border-bottom:.16vh solid #d7a646 !important;
    transition:transform .16s ease !important;
  }

  .language-current[aria-expanded="true"] .language-chevron{
    transform:rotate(225deg) translate(-.10vh,-.10vh) !important;
  }

  .language-menu{
    position:absolute !important;
    top:calc(100% + .72vh) !important;
    right:.18vh !important;
    z-index:700 !important;
    width:22.6vh !important;
    height:auto !important;
    min-height:0 !important;
    padding:1.05vh .82vh .90vh !important;
    overflow:visible !important;
    border:1px solid rgba(181,132,43,.90) !important;
    background:
      radial-gradient(circle at 50% -10%,rgba(136,88,24,.24),transparent 40%),
      linear-gradient(180deg,rgba(10,16,15,.997),rgba(3,7,7,.998)) !important;
    box-shadow:
      0 1.25vh 2.8vh rgba(0,0,0,.72),
      inset 0 0 0 1px rgba(56,41,17,.78),
      inset 0 0 1.2vh rgba(0,0,0,.72) !important;
  }

  .language-menu::before{
    content:"" !important;
    display:block !important;
    position:absolute !important;
    top:-.43vh !important;
    right:2.8vh !important;
    width:.80vh !important;
    height:.80vh !important;
    border-left:1px solid rgba(181,132,43,.90) !important;
    border-top:1px solid rgba(181,132,43,.90) !important;
    background:#0a0f0e !important;
    transform:rotate(45deg) !important;
  }

  .language-menu::after{
    content:"" !important;
    position:absolute !important;
    inset:.36vh !important;
    z-index:-1 !important;
    border:1px solid rgba(122,84,28,.34) !important;
    pointer-events:none !important;
  }

  .language-menu[hidden]{
    display:none !important;
  }

  .language-menu__heading{
    height:2.65vh !important;
    display:grid !important;
    grid-template-columns:1fr auto 1fr !important;
    align-items:center !important;
    gap:.55vh !important;
    padding:0 .48vh .45vh !important;
    color:#cba354 !important;
    text-transform:uppercase !important;
    font-size:.95vh !important;
    letter-spacing:.11em !important;
    text-align:center !important;
  }

  .language-menu__ornament{
    position:relative !important;
    height:1px !important;
    background:linear-gradient(90deg,transparent,#865f22) !important;
  }

  .language-menu__ornament:last-child{
    transform:scaleX(-1) !important;
  }

  .language-menu__ornament::after{
    content:"" !important;
    position:absolute !important;
    right:-.05vh !important;
    top:50% !important;
    width:.38vh !important;
    height:.38vh !important;
    margin-top:-.19vh !important;
    background:#8b1d12 !important;
    border:1px solid #c18f37 !important;
    transform:rotate(45deg) !important;
  }

  .language-menu button{
    position:relative !important;
    width:100% !important;
    height:4.35vh !important;
    display:grid !important;
    grid-template-columns:3.05vh 1fr 2.45vh 1.35vh !important;
    align-items:center !important;
    gap:.72vh !important;
    margin:.12vh 0 !important;
    padding:.42vh .72vh !important;
    border:1px solid transparent !important;
    background:transparent !important;
    color:#dbc79b !important;
    text-align:left !important;
    cursor:pointer !important;
    transition:
      background .13s ease,
      border-color .13s ease,
      color .13s ease,
      transform .10s ease !important;
  }

  .language-menu button::before{
    content:"" !important;
    position:absolute !important;
    left:.38vh !important;
    right:.38vh !important;
    bottom:-.08vh !important;
    height:1px !important;
    background:linear-gradient(90deg,transparent,rgba(109,78,31,.32),transparent) !important;
  }

  .language-menu button:hover{
    border-color:rgba(169,121,40,.46) !important;
    background:
      linear-gradient(90deg,rgba(120,22,15,.48),rgba(60,25,13,.16),transparent) !important;
    color:#ffe3a2 !important;
    transform:translateX(.06vh) !important;
  }

  .language-menu button[aria-selected="true"]{
    border-color:rgba(205,153,60,.62) !important;
    background:
      radial-gradient(circle at 15% 50%,rgba(176,36,20,.26),transparent 43%),
      linear-gradient(90deg,rgba(91,28,14,.34),rgba(34,20,11,.12)) !important;
    color:#ffe4a5 !important;
  }

  .language-option__flag{
    position:relative !important;
    width:3.0vh !important;
    height:1.92vh !important;
    padding:.10vh !important;
    display:grid !important;
    place-items:center !important;
    border:1px solid rgba(177,129,46,.50) !important;
    background:#050807 !important;
    box-shadow:0 .08vh .18vh rgba(0,0,0,.55) !important;
  }

  .language-option__flag img,
  .language-menu button img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
    border:0 !important;
    transform:none !important;
    filter:none !important;
  }

  .language-option__name,
  .language-menu button span.language-option__name{
    display:block !important;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
    font-size:1.15vh !important;
    letter-spacing:.02em !important;
  }

  .language-option__code{
    display:block !important;
    color:#826f4d !important;
    font-size:.82vh !important;
    letter-spacing:.11em !important;
    text-align:center !important;
  }

  .language-option__check{
    display:block !important;
    color:#e2b95f !important;
    font-family:Georgia,"Times New Roman",serif !important;
    font-size:1.08vh !important;
    line-height:1 !important;
    opacity:0 !important;
    transform:scale(.75) !important;
    transition:opacity .13s ease,transform .13s ease !important;
  }

  .language-menu button[aria-selected="true"] .language-option__check{
    opacity:1 !important;
    transform:scale(1) !important;
  }
}

@media(max-width:900px){
  .language-current{
    width:148px !important;
    min-width:148px !important;
    height:50px !important;
    display:grid !important;
    grid-template-columns:30px 1fr 12px !important;
    gap:8px !important;
    padding:6px 12px !important;
    border:0 !important;
    background:url('assets/button_black_master_v17.png') center/100% 100% no-repeat !important;
  }

  .language-current__flag{
    width:30px !important;
    height:20px !important;
    padding:1px !important;
    border:1px solid rgba(194,145,53,.66) !important;
  }

  .language-current__flag img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  .language-current__text{
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    line-height:1 !important;
  }

  #currentLanguageCode{
    display:block !important;
    font-size:13px !important;
  }

  #currentLanguageName{
    display:block !important;
    margin-top:3px !important;
    color:#a89267 !important;
    font-size:10px !important;
  }

  .language-chevron{
    width:8px !important;
    height:8px !important;
    border-right:2px solid #d7a646 !important;
    border-bottom:2px solid #d7a646 !important;
    transform:rotate(45deg) !important;
  }

  .language-menu{
    width:220px !important;
    height:auto !important;
    padding:10px 8px 8px !important;
    right:50% !important;
    transform:translateX(50%) !important;
    border:1px solid rgba(181,132,43,.90) !important;
    background:linear-gradient(180deg,#0a100f,#030707) !important;
  }

  .language-menu__heading{
    display:grid !important;
    grid-template-columns:1fr auto 1fr !important;
    gap:7px !important;
    align-items:center !important;
    height:28px !important;
    font-size:11px !important;
    text-align:center !important;
    color:#cba354 !important;
  }

  .language-menu__ornament{
    height:1px !important;
    background:linear-gradient(90deg,transparent,#865f22) !important;
  }

  .language-menu button{
    width:100% !important;
    height:44px !important;
    display:grid !important;
    grid-template-columns:31px 1fr 28px 16px !important;
    align-items:center !important;
    gap:8px !important;
    padding:5px 8px !important;
    background:transparent !important;
    color:#dbc79b !important;
  }

  .language-option__flag{
    width:30px !important;
    height:20px !important;
  }

  .language-option__flag img{
    width:100% !important;
    height:100% !important;
    object-fit:cover !important;
  }

  .language-option__name{
    display:block !important;
    font-size:14px !important;
  }

  .language-option__code{
    display:block !important;
    font-size:10px !important;
    color:#826f4d !important;
  }

  .language-option__check{
    display:block !important;
    opacity:0 !important;
    color:#e2b95f !important;
  }

  .language-menu button[aria-selected="true"] .language-option__check{
    opacity:1 !important;
  }
}


/* ============================================================
   V79 – Sprachwahl mit neuem transparenten Asset
   Asset = nur Rahmen / Hintergrund. Flagge + Text bleiben HTML.
   ============================================================ */

@media(min-width:901px){
  .top-actions{
    right:1.05vh !important;
  }

  .language-switcher{
    position:relative !important;
    z-index:800 !important;
  }

  .language-current{
    position:relative !important;
    width:18.7vh !important;
    min-width:18.7vh !important;
    height:5.15vh !important;
    padding:0 !important;
    display:block !important;
    border:0 !important;
    outline:0 !important;
    background:
      url('assets/language_selector_frame.png')
      center / 100% 100% no-repeat !important;
    filter:
      drop-shadow(0 .28vh .42vh rgba(0,0,0,.60))
      brightness(.98) !important;
    box-shadow:none !important;
    overflow:visible !important;
    cursor:pointer !important;
    transition:
      filter .15s ease,
      transform .12s ease !important;
  }

  .language-current::before,
  .language-current::after{
    display:none !important;
    content:none !important;
  }

  .language-current:hover,
  .language-current[aria-expanded="true"]{
    filter:
      brightness(1.09)
      drop-shadow(0 .30vh .46vh rgba(0,0,0,.62))
      drop-shadow(0 0 .28vh rgba(224,169,62,.18)) !important;
  }

  .language-current:active{
    transform:translateY(.05vh) !important;
  }

  /* Flag sits in the small framed compartment rendered in the PNG. */
  .language-current__flag{
    position:absolute !important;
    left:1.55vh !important;
    top:50% !important;
    width:2.60vh !important;
    height:1.72vh !important;
    transform:translateY(-50%) !important;
    display:block !important;
    padding:0 !important;
    border:0 !important;
    background:none !important;
    box-shadow:
      0 .08vh .18vh rgba(0,0,0,.72) !important;
    overflow:hidden !important;
  }

  .language-current__flag::before,
  .language-current__flag::after{
    display:none !important;
    content:none !important;
  }

  .language-current__flag img,
  .language-current img{
    width:100% !important;
    height:100% !important;
    display:block !important;
    object-fit:cover !important;
    border:0 !important;
    box-shadow:none !important;
  }

  /* Text is real HTML, not baked into the asset. */
  .language-current__text{
    position:absolute !important;
    left:5.15vh !important;
    right:3.55vh !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    justify-content:center !important;
    gap:.08vh !important;
    min-width:0 !important;
    line-height:1 !important;
    text-align:left !important;
  }

  #currentLanguageCode{
    display:block !important;
    color:#f4d999 !important;
    font-size:1.24vh !important;
    line-height:1 !important;
    letter-spacing:.10em !important;
    text-shadow:
      0 .12vh .16vh #000,
      0 0 .12vh rgba(215,162,53,.18) !important;
  }

  #currentLanguageName{
    display:block !important;
    max-width:100% !important;
    margin:.16vh 0 0 !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
    color:#9f8a62 !important;
    font-size:.75vh !important;
    line-height:1 !important;
    letter-spacing:.025em !important;
    text-transform:none !important;
  }

  /* Arrow is already part of the generated transparent skin. */
  .language-chevron{
    display:none !important;
  }

  /* Dropdown anchored to the new wider selector. */
  .language-menu{
    top:calc(100% + .46vh) !important;
    right:.35vh !important;
    width:21.8vh !important;
    padding:.92vh .78vh .78vh !important;
    border:1px solid rgba(179,128,39,.92) !important;
    background:
      radial-gradient(circle at 50% -10%,rgba(123,77,18,.20),transparent 42%),
      linear-gradient(180deg,rgba(8,13,12,.998),rgba(3,7,7,.998)) !important;
    box-shadow:
      0 1.0vh 2.4vh rgba(0,0,0,.72),
      inset 0 0 0 1px rgba(65,45,17,.74),
      inset 0 0 1.15vh rgba(0,0,0,.72) !important;
  }

  .language-menu::before{
    right:2.55vh !important;
  }

  .language-menu__heading{
    height:2.42vh !important;
    padding:0 .42vh .36vh !important;
    font-size:.88vh !important;
  }

  .language-menu button{
    height:4.08vh !important;
    grid-template-columns:2.75vh 1fr 2.25vh 1.15vh !important;
    gap:.64vh !important;
    padding:.36vh .62vh !important;
  }

  .language-option__flag{
    width:2.72vh !important;
    height:1.72vh !important;
  }

  .language-option__name{
    font-size:1.04vh !important;
  }

  .language-option__code{
    font-size:.76vh !important;
  }
}

@media(max-width:900px){
  .language-current{
    width:184px !important;
    min-width:184px !important;
    height:51px !important;
    padding:0 !important;
    display:block !important;
    border:0 !important;
    background:
      url('assets/language_selector_frame.png')
      center / 100% 100% no-repeat !important;
    box-shadow:none !important;
  }

  .language-current__flag{
    position:absolute !important;
    left:16px !important;
    top:50% !important;
    width:27px !important;
    height:18px !important;
    transform:translateY(-50%) !important;
    padding:0 !important;
    border:0 !important;
    background:none !important;
  }

  .language-current__text{
    position:absolute !important;
    left:51px !important;
    right:35px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    display:flex !important;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:2px !important;
  }

  #currentLanguageCode{
    font-size:13px !important;
  }

  #currentLanguageName{
    margin:0 !important;
    font-size:9px !important;
  }

  .language-chevron{
    display:none !important;
  }

  .language-menu{
    top:calc(100% + 5px) !important;
    right:0 !important;
    transform:none !important;
    width:218px !important;
  }
}


/* ============================================================
   V80 – Sprachwahl Feintuning + bessere Flaggenoptik
   ============================================================ */
@media(min-width:901px){
  .language-current__flag{
    left:1.42vh !important;
    width:2.86vh !important;
    height:1.92vh !important;
    border:.08vh solid rgba(204,158,61,.72) !important;
    border-radius:.12vh !important;
    background:linear-gradient(180deg, rgba(11,10,9,.58), rgba(20,14,5,.22)) !important;
    box-shadow:
      0 .10vh .22vh rgba(0,0,0,.72),
      inset 0 0 0 .04vh rgba(255,232,173,.18) !important;
  }

  .language-current__text{
    left:5.42vh !important;
  }

  .language-option__flag{
    width:2.84vh !important;
    height:1.82vh !important;
    border:.07vh solid rgba(198,150,48,.55) !important;
    border-radius:.10vh !important;
    box-shadow:0 .10vh .20vh rgba(0,0,0,.55) !important;
    overflow:hidden !important;
  }
}

@media(max-width:900px){
  .language-current__flag{
    left:15px !important;
    width:29px !important;
    height:19px !important;
    border:1px solid rgba(204,158,61,.72) !important;
    border-radius:2px !important;
    background:linear-gradient(180deg, rgba(11,10,9,.58), rgba(20,14,5,.22)) !important;
    box-shadow:
      0 1px 3px rgba(0,0,0,.72),
      inset 0 0 0 1px rgba(255,232,173,.12) !important;
  }

  .language-current__text{
    left:54px !important;
  }

  .language-option__flag{
    border:1px solid rgba(198,150,48,.55) !important;
    border-radius:2px !important;
    overflow:hidden !important;
  }
}


/* ============================================================
   V81 – News page in Castle Lords design
   ============================================================ */
.news-stage{
  position:relative;
  height:80.859375vh;
  overflow:hidden;
  border-bottom:1px solid rgba(162,118,39,.65);
  background:#111712;
}
.news-stage__bg{
  position:absolute;
  inset:0;
  background:url('assets/bg_castle.png') center 46%/cover no-repeat;
  filter:brightness(.78) saturate(.88);
  transform:scale(1.015);
}
.news-stage__vignette{
  position:absolute;
  inset:0;
  background:
    linear-gradient(180deg,rgba(4,7,6,.10),rgba(4,7,6,.22) 55%,rgba(3,5,4,.34)),
    linear-gradient(90deg,rgba(3,5,4,.40),rgba(3,5,4,.12) 22%,rgba(3,5,4,.12) 78%,rgba(3,5,4,.40));
}
.news-shell{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  padding-top:1.8vh;
}
.news-heading{
  text-align:center;
  color:#ead39a;
  text-shadow:0 .16vh .25vh #000;
}
.news-heading h1{
  margin:.1vh 0 .40vh;
  font-size:5.05vh;
  line-height:1;
  text-transform:uppercase;
  font-weight:500;
  letter-spacing:.035em;
}
.news-heading p{
  margin:0;
  font-size:1.82vh;
  color:#e1ca95;
}
.news-panel{
  position:absolute;
  left:50%;
  top:15.7%;
  width:min(153vh, 96vw);
  height:72.0%;
  transform:translateX(-50%);
  padding:2.55vh 2.65vh;
  isolation:isolate;
}
.news-panel__content{
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns:38.5% 1fr;
  gap:2.35vh;
  height:100%;
}
.news-sidebar,
.news-feature{
  min-height:0;
}
.news-sidebar{
  display:flex;
  flex-direction:column;
  gap:1.10vh;
}
.news-card{
  display:grid;
  grid-template-columns:12.2vh 1fr;
  gap:1.10vh;
  min-height:11.25vh;
  padding:1.0vh;
  border:1px solid rgba(136,96,34,.38);
  background:linear-gradient(180deg,rgba(6,11,11,.80),rgba(4,8,9,.90));
  box-shadow:inset 0 0 0 1px rgba(28,29,24,.72);
}
.news-card--active{
  border-color:#c09034;
  box-shadow:inset 0 0 0 1px rgba(255,219,133,.12), 0 0 1.0vh rgba(210,149,36,.20);
}
.news-card__thumb{
  border:1px solid rgba(165,118,38,.44);
  box-shadow:inset 0 0 0 1px rgba(255,235,178,.06);
  background-image:url('assets/bg_castle.png');
  background-repeat:no-repeat;
  background-size:cover;
  background-position:center;
}
.news-card__thumb--one{background-position:12% 56%; filter:saturate(1.0) brightness(.92)}
.news-card__thumb--two{background-position:42% 38%; filter:saturate(.95) brightness(.84)}
.news-card__thumb--three{background-position:74% 52%; filter:hue-rotate(-26deg) saturate(1.08) brightness(.72)}
.news-card__thumb--four{background-position:59% 20%; filter:brightness(.90)}
.news-card__thumb--five{background-position:86% 24%; filter:saturate(.70) brightness(.88)}
.news-card__content{display:flex; flex-direction:column; min-width:0;}
.news-card__meta{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.1vh;
  margin-bottom:.55vh;
  color:#d7c391;
  font-size:1.10vh;
}
.news-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:2.20vh;
  min-width:5.2vh;
  padding:0 .75vh;
  border:1px solid rgba(194,153,66,.38);
  font-size:1.00vh;
  text-transform:uppercase;
  letter-spacing:.04em;
  color:#fff0ca;
}
.news-badge--important{background:linear-gradient(180deg,rgba(95,23,16,.92),rgba(70,13,10,.92));}
.news-badge--update{background:linear-gradient(180deg,rgba(32,78,20,.92),rgba(18,49,12,.92));}
.news-badge--event{background:linear-gradient(180deg,rgba(18,63,96,.92),rgba(10,42,69,.92));}
.news-badge--news{background:linear-gradient(180deg,rgba(106,71,18,.92),rgba(75,48,10,.92));}
.news-card h3{
  margin:0 0 .48vh;
  font-size:1.72vh;
  line-height:1.15;
  font-weight:500;
  color:#f0ddb1;
}
.news-card p{
  margin:0;
  font-size:1.18vh;
  line-height:1.38;
  color:#ccb88d;
}
.news-load-more{
  margin-top:auto;
  align-self:center;
  min-width:22vh;
  height:3.15vh;
  padding:0 1.5vh;
  border:1px solid rgba(154,112,39,.55);
  background:linear-gradient(180deg,rgba(9,15,15,.95),rgba(6,10,11,.95));
  box-shadow:inset 0 0 0 1px rgba(38,38,29,.88);
  color:#e5d09c;
  text-transform:uppercase;
  font-size:1.20vh;
  letter-spacing:.03em;
}
.news-feature{
  display:grid;
  grid-template-rows:46% 1fr;
  border-left:1px solid rgba(136,96,34,.24);
  padding-left:.2vh;
  min-width:0;
}
.news-feature__hero{
  position:relative;
  min-height:0;
  border:1px solid rgba(165,118,38,.44);
  box-shadow:inset 0 0 0 1px rgba(255,235,178,.06);
  background:
    linear-gradient(180deg,rgba(0,0,0,.10),rgba(0,0,0,.14)),
    url('assets/bg_castle.png') center 44%/cover no-repeat;
  overflow:hidden;
}
.news-ribbon{
  position:absolute;
  left:1.0vh;
  top:1.0vh;
  display:inline-flex;
  align-items:center;
  height:3.2vh;
  padding:0 1.3vh 0 1.15vh;
  background:linear-gradient(180deg,rgba(96,24,17,.96),rgba(58,12,10,.96));
  color:#f1ddb0;
  text-transform:uppercase;
  font-size:1.08vh;
  letter-spacing:.05em;
  border:1px solid rgba(184,132,44,.46);
  clip-path:polygon(0 0, 88% 0, 100% 50%, 88% 100%, 0 100%);
  box-shadow:0 .18vh .35vh rgba(0,0,0,.45);
}
.news-feature__body{
  display:grid;
  grid-template-rows:auto auto auto 1fr;
  gap:1.0vh;
  min-height:0;
  padding:1.65vh .5vh 0 1.55vh;
}
.news-feature__body h2{
  margin:0;
  font-size:3.0vh;
  line-height:1.05;
  text-transform:uppercase;
  color:#e7cb82;
  font-weight:500;
}
.news-feature__meta{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:1.4vh;
  color:#d6c18d;
  font-size:1.18vh;
  text-transform:uppercase;
}
.news-feature__date::before,
.news-feature__category::before{
  content:'';
  display:inline-block;
  width:.78vh;
  height:.78vh;
  margin-right:.45vh;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #ffe59c, #c88c24 62%, #7a5119);
  box-shadow:0 0 .35vh rgba(218,170,64,.35);
  vertical-align:middle;
}
.news-feature__lead{
  margin:0;
  font-size:1.45vh;
  line-height:1.5;
  color:#d4c093;
  max-width:95%;
}
.news-feature__bottom{
  display:grid;
  grid-template-columns:1fr 23.5vh;
  gap:1.9vh;
  min-height:0;
  align-items:start;
}
.news-info h3,
.news-rewards h3{
  margin:0 0 1.1vh;
  color:#e3c97f;
  text-transform:uppercase;
  font-size:1.86vh;
  font-weight:500;
}
.news-info ul{
  list-style:none;
  margin:0 0 1.6vh;
  padding:0;
  display:grid;
  gap:.80vh;
}
.news-info li{
  position:relative;
  padding-left:1.9vh;
  color:#d3c095;
  font-size:1.30vh;
  line-height:1.42;
}
.news-info li::before{
  content:'';
  position:absolute;
  left:0;
  top:.42vh;
  width:.95vh;
  height:.95vh;
  border-radius:50%;
  background:radial-gradient(circle at 35% 35%, #ffe59c, #c88c24 62%, #7a5119);
  box-shadow:0 0 .35vh rgba(218,170,64,.30);
}
.news-feature__cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:29vh;
  height:4.0vh;
  padding:0 1.6vh;
  border:1px solid rgba(154,112,39,.55);
  background:linear-gradient(180deg,rgba(9,15,15,.95),rgba(6,10,11,.95));
  box-shadow:inset 0 0 0 1px rgba(38,38,29,.88);
  color:#e5d09c;
  text-transform:uppercase;
  font-size:1.25vh;
  letter-spacing:.03em;
}
.news-rewards{
  border:1px solid rgba(136,96,34,.38);
  background:linear-gradient(180deg,rgba(6,11,11,.72),rgba(4,8,9,.82));
  box-shadow:inset 0 0 0 1px rgba(28,29,24,.72);
  padding:1.35vh 1.2vh 1.1vh;
}
.news-reward-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:1.0vh;
}
.news-reward{
  text-align:center;
  display:grid;
  justify-items:center;
  gap:.55vh;
}
.news-reward__icon{
  width:8.8vh;
  height:7.3vh;
  border:1px solid rgba(165,118,38,.44);
  box-shadow:inset 0 0 0 1px rgba(255,235,178,.06);
  display:grid;
  place-items:center;
  background:linear-gradient(180deg,rgba(12,17,16,.88),rgba(7,11,10,.96));
}
.news-reward__icon img{
  width:4.0vh;
  height:4.0vh;
  object-fit:contain;
  filter:drop-shadow(0 .12vh .18vh rgba(0,0,0,.65));
}
.news-reward span{
  font-size:1.10vh;
  line-height:1.25;
  color:#dbc792;
}

@media (max-width: 1200px){
  .news-panel{width:min(96vw, 1120px);}
}

@media (max-width: 900px){
  body.news-page{overflow:auto;}
  .news-stage{
    height:auto;
    min-height:calc(100vh - 150px);
    overflow:visible;
  }
  .news-shell{
    padding:18px 0 36px;
  }
  .news-heading h1{font-size:38px}
  .news-heading p{font-size:15px;padding:0 20px}
  .news-panel{
    position:relative;
    left:auto;
    top:auto;
    width:min(95%, 720px);
    height:auto;
    transform:none;
    margin:24px auto 30px;
    padding:36px 24px 28px;
  }
  .news-panel__content{
    grid-template-columns:1fr;
    gap:24px;
    height:auto;
  }
  .news-card{grid-template-columns:110px 1fr;min-height:112px;padding:10px}
  .news-feature{grid-template-rows:auto auto;border-left:0;padding-left:0}
  .news-feature__hero{height:220px}
  .news-feature__body{padding:14px 2px 0 2px;gap:12px}
  .news-feature__body h2{font-size:28px}
  .news-feature__lead{max-width:none;font-size:14px}
  .news-feature__bottom{grid-template-columns:1fr;gap:18px}
  .news-rewards{padding:14px 14px 12px}
  .news-reward-grid{grid-template-columns:repeat(3,1fr)}
  .news-reward__icon{width:100%;height:82px}
  .news-reward__icon img{width:42px;height:42px}
  .news-load-more{height:40px;min-width:240px;font-size:13px}
  .news-feature__cta{height:44px;min-width:280px;font-size:13px}
}


/* ============================================================
   V82 – News layout correction from screenshot
   Fixes reward overflow and brings the page closer to the proposal.
   ============================================================ */
@media (min-width:901px){
  .news-panel{
    top:14.6% !important;
    height:74.2% !important;
    width:min(156vh,96vw) !important;
    padding:2.35vh 2.45vh 2.55vh !important;
  }

  .news-panel__content{
    grid-template-columns:39% 61% !important;
    gap:2.0vh !important;
  }

  .news-sidebar{
    gap:.82vh !important;
  }

  .news-card{
    min-height:10.65vh !important;
    grid-template-columns:11.7vh 1fr !important;
    padding:.85vh !important;
  }

  .news-card h3{
    font-size:1.62vh !important;
  }

  .news-card p{
    font-size:1.08vh !important;
  }

  .news-feature{
    grid-template-rows:39.5% 60.5% !important;
  }

  .news-feature__body{
    gap:.72vh !important;
    padding:1.25vh .35vh 0 1.25vh !important;
  }

  .news-feature__body h2{
    font-size:2.7vh !important;
  }

  .news-feature__lead{
    font-size:1.28vh !important;
    line-height:1.42 !important;
  }

  .news-feature__bottom{
    grid-template-columns:minmax(0,1fr) 31.5vh !important;
    gap:1.35vh !important;
    align-items:start !important;
  }

  .news-info h3,
  .news-rewards h3{
    font-size:1.62vh !important;
    margin-bottom:.72vh !important;
  }

  .news-info ul{
    gap:.55vh !important;
    margin-bottom:1.0vh !important;
  }

  .news-info li{
    font-size:1.12vh !important;
  }

  .news-feature__cta{
    min-width:25vh !important;
    height:3.55vh !important;
    font-size:1.05vh !important;
  }

  /* Main bug: rewards were stacked vertically and fell out of the frame. */
  .news-rewards{
    padding:1.0vh 1.0vh .9vh !important;
    overflow:hidden !important;
  }

  .news-reward-grid{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
    gap:.72vh !important;
  }

  .news-reward{
    min-width:0 !important;
    gap:.38vh !important;
  }

  .news-reward__icon{
    width:100% !important;
    height:6.4vh !important;
  }

  .news-reward__icon img{
    width:3.45vh !important;
    height:3.45vh !important;
  }

  .news-reward span{
    font-size:.88vh !important;
    line-height:1.12 !important;
    white-space:normal !important;
  }

  .news-load-more{
    min-width:20vh !important;
    height:2.85vh !important;
    font-size:1.02vh !important;
  }
}

/* ============================================================
   V83 – News page scaled up slightly on desktop
   Request: "nur generell alles bisschen größer"
   ============================================================ */
@media (min-width:901px){
  .news-heading h1{
    font-size:5.45vh !important;
    margin:.15vh 0 .48vh !important;
  }

  .news-heading p{
    font-size:1.95vh !important;
  }

  .news-panel{
    top:14.1% !important;
    width:min(161vh, 97vw) !important;
    height:76.0% !important;
    padding:2.55vh 2.65vh 2.7vh !important;
  }

  .news-panel__content{
    grid-template-columns:39.25% 60.75% !important;
    gap:2.2vh !important;
  }

  .news-sidebar{
    gap:.95vh !important;
  }

  .news-card{
    min-height:11.2vh !important;
    grid-template-columns:12.0vh 1fr !important;
    padding:.95vh !important;
  }

  .news-card__meta{
    font-size:1.14vh !important;
    margin-bottom:.58vh !important;
  }

  .news-badge{
    height:2.3vh !important;
    min-width:5.5vh !important;
    font-size:1.04vh !important;
  }

  .news-card h3{
    font-size:1.74vh !important;
    margin-bottom:.52vh !important;
  }

  .news-card p{
    font-size:1.14vh !important;
    line-height:1.4 !important;
  }

  .news-load-more{
    min-width:21.5vh !important;
    height:3.0vh !important;
    font-size:1.08vh !important;
  }

  .news-feature{
    grid-template-rows:40.5% 59.5% !important;
  }

  .news-feature__hero{
    min-height:26vh !important;
  }

  .news-ribbon{
    height:3.35vh !important;
    font-size:1.12vh !important;
  }

  .news-feature__body{
    gap:.85vh !important;
    padding:1.4vh .4vh 0 1.4vh !important;
  }

  .news-feature__body h2{
    font-size:2.95vh !important;
  }

  .news-feature__meta{
    font-size:1.24vh !important;
    gap:1.5vh !important;
  }

  .news-feature__lead{
    font-size:1.38vh !important;
    line-height:1.46 !important;
  }

  .news-feature__bottom{
    grid-template-columns:minmax(0,1fr) 33vh !important;
    gap:1.5vh !important;
  }

  .news-info h3,
  .news-rewards h3{
    font-size:1.74vh !important;
    margin-bottom:.8vh !important;
  }

  .news-info ul{
    gap:.62vh !important;
    margin-bottom:1.1vh !important;
  }

  .news-info li{
    font-size:1.18vh !important;
    line-height:1.44 !important;
  }

  .news-feature__cta{
    min-width:26.5vh !important;
    height:3.75vh !important;
    font-size:1.12vh !important;
  }

  .news-rewards{
    padding:1.1vh 1.1vh .95vh !important;
  }

  .news-reward-grid{
    gap:.8vh !important;
  }

  .news-reward__icon{
    height:6.8vh !important;
  }

  .news-reward__icon img{
    width:3.65vh !important;
    height:3.65vh !important;
  }

  .news-reward span{
    font-size:.94vh !important;
    line-height:1.16 !important;
  }
}

/* ============================================================
   V84 – Keep content inside the news frame
   Request: box should not be left; make the box a bit bigger instead.
   ============================================================ */
@media (min-width:901px){
  .news-panel{
    top:13.5% !important;
    width:min(165vh, 97.6vw) !important;
    height:79.2% !important;
    padding:2.7vh 2.8vh 2.85vh !important;
    overflow:hidden !important;
  }

  .news-panel__content{
    grid-template-columns:39.5% 60.5% !important;
    gap:2.1vh !important;
    align-items:stretch !important;
  }

  .news-sidebar{
    gap:.9vh !important;
  }

  .news-card{
    min-height:11.0vh !important;
    grid-template-columns:11.9vh 1fr !important;
    padding:.9vh !important;
  }

  .news-card__meta{
    font-size:1.12vh !important;
  }

  .news-card h3{
    font-size:1.70vh !important;
    line-height:1.14 !important;
  }

  .news-card p{
    font-size:1.12vh !important;
    line-height:1.38 !important;
  }

  .news-load-more{
    min-width:22vh !important;
    height:3.05vh !important;
  }

  .news-feature{
    grid-template-rows:37.5% 62.5% !important;
    min-width:0 !important;
  }

  .news-feature__hero{
    min-height:25.0vh !important;
  }

  .news-feature__body{
    gap:.78vh !important;
    padding:1.38vh .45vh 0 1.35vh !important;
    min-height:0 !important;
  }

  .news-feature__body h2{
    font-size:2.86vh !important;
    line-height:1.04 !important;
  }

  .news-feature__meta{
    font-size:1.20vh !important;
    gap:1.35vh !important;
  }

  .news-feature__lead{
    max-width:100% !important;
    font-size:1.34vh !important;
    line-height:1.44 !important;
  }

  .news-feature__bottom{
    grid-template-columns:minmax(0,1fr) 31.5vh !important;
    gap:1.35vh !important;
    min-height:0 !important;
    align-items:start !important;
  }

  .news-info h3,
  .news-rewards h3{
    font-size:1.68vh !important;
    margin-bottom:.74vh !important;
  }

  .news-info ul{
    gap:.56vh !important;
    margin-bottom:1.05vh !important;
  }

  .news-info li{
    font-size:1.14vh !important;
    line-height:1.4 !important;
  }

  .news-feature__cta{
    min-width:25.5vh !important;
    height:3.6vh !important;
    font-size:1.08vh !important;
  }

  .news-rewards{
    padding:1.0vh 1.0vh .95vh !important;
    overflow:hidden !important;
    align-self:start !important;
  }

  .news-reward-grid{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:.72vh !important;
  }

  .news-reward__icon{
    height:6.3vh !important;
  }

  .news-reward__icon img{
    width:3.45vh !important;
    height:3.45vh !important;
  }

  .news-reward span{
    font-size:.90vh !important;
    line-height:1.12 !important;
  }
}

/* ============================================================
   V85 – News box wider + taller, content must never leave frame
   Request: also broader and higher; right header must stay inside.
   ============================================================ */
@media (min-width:901px){
  .news-panel{
    top:12.4% !important;
    width:min(172vh, 98.55vw) !important;
    height:82.2% !important;
    padding:2.85vh 3.0vh 3.0vh !important;
    overflow:hidden !important;
  }

  .news-panel__content{
    grid-template-columns:39.7% 60.3% !important;
    gap:2.35vh !important;
    align-items:stretch !important;
    min-height:0 !important;
  }

  .news-sidebar{
    gap:1.0vh !important;
    min-height:0 !important;
  }

  .news-card{
    min-height:11.4vh !important;
    grid-template-columns:12.2vh 1fr !important;
    padding:.95vh !important;
    overflow:hidden !important;
  }

  .news-card h3{
    font-size:1.74vh !important;
    line-height:1.14 !important;
  }

  .news-card p{
    font-size:1.13vh !important;
    line-height:1.38 !important;
  }

  .news-load-more{
    min-width:23vh !important;
    height:3.1vh !important;
  }

  .news-feature{
    grid-template-rows:38.5% 61.5% !important;
    min-width:0 !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .news-feature__hero{
    min-height:26.2vh !important;
  }

  .news-feature__body{
    gap:.84vh !important;
    padding:1.55vh .55vh 0 1.55vh !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .news-feature__body h2{
    font-size:2.82vh !important;
    line-height:1.06 !important;
    max-width:100% !important;
    overflow-wrap:anywhere !important;
    word-break:break-word !important;
  }

  .news-feature__meta{
    font-size:1.22vh !important;
    gap:1.4vh !important;
  }

  .news-feature__lead{
    max-width:100% !important;
    font-size:1.35vh !important;
    line-height:1.43 !important;
  }

  .news-feature__bottom{
    grid-template-columns:minmax(0,1fr) 33.5vh !important;
    gap:1.55vh !important;
    min-height:0 !important;
    align-items:start !important;
  }

  .news-info h3,
  .news-rewards h3{
    font-size:1.72vh !important;
    margin-bottom:.78vh !important;
  }

  .news-info ul{
    gap:.60vh !important;
    margin-bottom:1.1vh !important;
  }

  .news-info li{
    font-size:1.15vh !important;
    line-height:1.4 !important;
  }

  .news-feature__cta{
    min-width:26.2vh !important;
    height:3.65vh !important;
    font-size:1.08vh !important;
  }

  .news-rewards{
    padding:1.05vh 1.05vh .98vh !important;
    overflow:hidden !important;
    align-self:start !important;
  }

  .news-reward-grid{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:.76vh !important;
  }

  .news-reward__icon{
    height:6.45vh !important;
  }

  .news-reward__icon img{
    width:3.55vh !important;
    height:3.55vh !important;
  }

  .news-reward span{
    font-size:.92vh !important;
    line-height:1.12 !important;
  }
}

/* ============================================================
   V86 – News: feste Inhaltsbereiche
   Titel, Meta, Text, Infos und Rewards dürfen nur in ihren
   vorgesehenen Bereichen rendern. Nichts darf mehr in andere
   Bereiche oder über den Rahmen laufen.
   ============================================================ */
@media (min-width:901px){
  /* Hauptbox = zwei klar getrennte Bereiche */
  .news-panel{
    overflow:hidden !important;
  }

  .news-panel__content{
    display:grid !important;
    grid-template-columns:minmax(0, 39.5%) minmax(0, 60.5%) !important;
    grid-template-rows:minmax(0, 1fr) !important;
    gap:2.2vh !important;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .news-sidebar,
  .news-feature{
    min-width:0 !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  /* ----------------------------------------------------------
     LINKE NEWS-LISTE
     Jede Karte bekommt feste Bereiche:
     Bild | Meta | Überschrift | Kurztext
     ---------------------------------------------------------- */
  .news-sidebar{
    display:grid !important;
    grid-template-rows:repeat(5, minmax(0, 1fr)) auto !important;
    gap:.92vh !important;
  }

  .news-card{
    display:grid !important;
    grid-template-columns:12.2vh minmax(0,1fr) !important;
    grid-template-rows:minmax(0,1fr) !important;
    min-height:0 !important;
    height:auto !important;
    overflow:hidden !important;
  }

  .news-card__thumb{
    min-width:0 !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .news-card__content{
    display:grid !important;
    grid-template-areas:
      "meta"
      "title"
      "excerpt" !important;
    grid-template-rows:auto minmax(1.8vh,auto) minmax(0,1fr) !important;
    gap:.34vh !important;
    min-width:0 !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .news-card__meta{
    grid-area:meta !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  .news-card h3{
    grid-area:title !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    line-clamp:2 !important;
    overflow-wrap:anywhere !important;
  }

  .news-card p{
    grid-area:excerpt !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    line-clamp:2 !important;
    overflow-wrap:anywhere !important;
  }

  .news-load-more{
    align-self:end !important;
    justify-self:center !important;
    margin:0 !important;
  }

  /* ----------------------------------------------------------
     RECHTER HAUPTARTIKEL
     Oben: Hero-Bild
     Unten: Titel / Meta / Text / Informationsbereich
     ---------------------------------------------------------- */
  .news-feature{
    display:grid !important;
    grid-template-areas:
      "hero"
      "body" !important;
    grid-template-rows:minmax(24vh, 39%) minmax(0,61%) !important;
    height:100% !important;
  }

  .news-feature__hero{
    grid-area:hero !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .news-feature__body{
    grid-area:body !important;
    display:grid !important;
    grid-template-areas:
      "feature-title"
      "feature-meta"
      "feature-lead"
      "feature-bottom" !important;
    grid-template-rows:
      minmax(3.2vh, auto)
      auto
      minmax(4.2vh, auto)
      minmax(0, 1fr) !important;
    gap:.72vh !important;
    min-width:0 !important;
    min-height:0 !important;
    height:100% !important;
    overflow:hidden !important;
  }

  .news-feature__body h2{
    grid-area:feature-title !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:2 !important;
    line-clamp:2 !important;
    overflow-wrap:anywhere !important;
    word-break:normal !important;
  }

  .news-feature__meta{
    grid-area:feature-meta !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    white-space:nowrap !important;
  }

  .news-feature__lead{
    grid-area:feature-lead !important;
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    display:-webkit-box !important;
    -webkit-box-orient:vertical !important;
    -webkit-line-clamp:3 !important;
    line-clamp:3 !important;
    overflow-wrap:anywhere !important;
  }

  /* Unten nochmal zwei eigene sichere Bereiche */
  .news-feature__bottom{
    grid-area:feature-bottom !important;
    display:grid !important;
    grid-template-areas:"info rewards" !important;
    grid-template-columns:minmax(0,1fr) minmax(29vh,33vh) !important;
    grid-template-rows:minmax(0,1fr) !important;
    gap:1.4vh !important;
    min-width:0 !important;
    min-height:0 !important;
    height:100% !important;
    overflow:hidden !important;
  }

  .news-info{
    grid-area:info !important;
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) auto !important;
    min-width:0 !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .news-info h3,
  .news-rewards h3{
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .news-info ul{
    min-height:0 !important;
    overflow:hidden !important;
  }

  .news-info li{
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .news-feature__cta{
    max-width:100% !important;
    overflow:hidden !important;
    white-space:nowrap !important;
    text-overflow:ellipsis !important;
  }

  .news-rewards{
    grid-area:rewards !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:100% !important;
    max-height:100% !important;
    overflow:hidden !important;
  }

  .news-reward-grid{
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  .news-reward{
    min-width:0 !important;
    overflow:hidden !important;
  }

  .news-reward span{
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }
}


/* ============================================================
   V87 – Ältere News laden + Scrollbereich nur links
   Die große News-Box bleibt unverändert. Nur die Liste scrollt.
   ============================================================ */
@media (min-width:901px){
  .news-sidebar{
    display:grid !important;
    grid-template-rows:minmax(0,1fr) auto !important;
    gap:.92vh !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .news-list{
    min-width:0 !important;
    min-height:0 !important;
    height:100% !important;
    display:grid !important;
    grid-auto-rows:11.15vh !important;
    align-content:start !important;
    gap:.92vh !important;
    overflow-x:hidden !important;
    overflow-y:auto !important;
    padding-right:.62vh !important;
    scrollbar-width:thin !important;
    scrollbar-color:#b17d28 #07100e !important;
    overscroll-behavior:contain !important;
  }

  .news-list::-webkit-scrollbar{
    width:.72vh !important;
  }

  .news-list::-webkit-scrollbar-track{
    background:linear-gradient(180deg,#060c0b,#0a100e) !important;
    border-left:1px solid rgba(113,78,27,.45) !important;
  }

  .news-list::-webkit-scrollbar-thumb{
    background:linear-gradient(180deg,#d1a24b,#8d5d1c) !important;
    border:1px solid #5f3f14 !important;
    box-shadow:inset 0 0 .20vh rgba(255,232,163,.32) !important;
  }

  .news-list::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(180deg,#ebbd64,#a66e23) !important;
  }

  .news-card{
    height:11.15vh !important;
    min-height:11.15vh !important;
  }

  .news-card[hidden]{
    display:none !important;
  }

  .news-load-more{
    position:relative !important;
    z-index:4 !important;
    margin:0 auto !important;
    flex:0 0 auto !important;
  }

  .news-load-more:disabled{
    opacity:.55 !important;
    cursor:default !important;
    filter:saturate(.5) !important;
  }

  .news-card__thumb--six{background-position:25% 42%;filter:brightness(.85) saturate(.95)}
  .news-card__thumb--seven{background-position:67% 44%;filter:brightness(.78) saturate(1.08) sepia(.12)}
  .news-card__thumb--eight{background-position:36% 27%;filter:brightness(.92) saturate(.82)}
  .news-card__thumb--nine{background-position:54% 34%;filter:brightness(.72) saturate(.70)}
  .news-card__thumb--ten{background-position:79% 49%;filter:brightness(.82) saturate(1.05)}
  .news-card__thumb--eleven{background-position:47% 56%;filter:brightness(.75) saturate(.88)}
  .news-card__thumb--twelve{background-position:17% 29%;filter:brightness(.90) saturate(.92)}
}

@media (max-width:900px){
  .news-sidebar{
    display:grid !important;
    grid-template-rows:auto auto !important;
    gap:12px !important;
  }

  .news-list{
    display:grid !important;
    gap:10px !important;
    max-height:590px !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-right:6px !important;
    scrollbar-width:thin !important;
    scrollbar-color:#b17d28 #07100e !important;
  }

  .news-card[hidden]{display:none !important;}
}


/* ============================================================
   V88 – Support page in the existing Castle Lords design
   ============================================================ */
.support-stage{
  position:relative;
  height:80.859375vh;
  overflow:hidden;
  border-bottom:1px solid rgba(162,118,39,.65);
  background:#111712;
}
.support-stage__bg{
  position:absolute;
  inset:0;
  background:url('assets/bg_castle.png') center 45%/cover no-repeat;
  filter:brightness(.63) saturate(.82);
  transform:scale(1.015);
}
.support-stage__vignette{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 28%,rgba(0,0,0,.03),rgba(0,0,0,.18) 55%,rgba(0,0,0,.44) 100%),
    linear-gradient(90deg,rgba(3,5,4,.48),rgba(3,5,4,.10) 28%,rgba(3,5,4,.10) 72%,rgba(3,5,4,.48));
}
.support-shell{
  position:relative;
  z-index:2;
  width:100%;
  height:100%;
  padding-top:1.45vh;
}
.support-heading{
  width:min(96vh,72vw);
  margin:0 auto;
  text-align:center;
  color:#ead39a;
  text-shadow:0 .16vh .25vh #000;
}
.support-heading h1{
  margin:0 0 .20vh;
  font-size:5.25vh;
  line-height:1;
  text-transform:uppercase;
  font-weight:500;
  letter-spacing:.035em;
}
.support-heading__lead{
  margin:0 0 .55vh;
  color:#e6ce94;
  font-size:1.82vh;
}
.support-heading__sub{
  width:70%;
  margin:0 auto;
  color:#cdb98d;
  font-size:1.24vh;
  line-height:1.35;
}
.support-panel{
  position:absolute;
  left:50%;
  top:19.0%;
  width:min(126vh,78vw);
  height:66.5%;
  transform:translateX(-50%);
  padding:3.5vh 4.0vh 3.4vh;
  isolation:isolate;
  overflow:hidden;
}
.support-panel__content{
  position:relative;
  z-index:5;
  display:grid;
  grid-template-columns:56% 44%;
  grid-template-rows:minmax(0,1fr) 5.75vh;
  height:100%;
  min-height:0;
}
.support-topics,
.support-contact{
  min-height:0;
  overflow:hidden;
}
.support-topics{
  padding-right:2.65vh;
  border-right:1px solid rgba(136,96,34,.30);
}
.support-contact{
  padding-left:2.65vh;
}
.support-topics h2,
.support-contact h2{
  margin:0 0 1.05vh;
  color:#e1bf6b;
  text-transform:uppercase;
  text-align:center;
  font-size:2.0vh;
  font-weight:500;
  letter-spacing:.03em;
}
.support-topic-list{
  display:grid;
  gap:.68vh;
}
.support-topic{
  position:relative;
  display:grid;
  grid-template-columns:4.7vh minmax(0,1fr) 1.35vh;
  align-items:center;
  gap:1.05vh;
  min-height:6.35vh;
  padding:.62vh 1.0vh;
  border:1px solid rgba(137,97,34,.58);
  background:linear-gradient(180deg,rgba(8,13,12,.86),rgba(4,8,8,.94));
  box-shadow:inset 0 0 0 1px rgba(36,34,27,.78);
  color:#ddc591;
  text-align:left;
  cursor:pointer;
  overflow:hidden;
}
.support-topic::after{
  content:'';
  position:absolute;
  left:6.7vh;
  right:3.1vh;
  bottom:.55vh;
  height:1px;
  background:linear-gradient(90deg,rgba(139,94,27,.38),transparent);
}
.support-topic:hover{
  border-color:rgba(196,145,48,.78);
  filter:brightness(1.08);
}
.support-topic__icon{
  width:4.4vh;
  height:4.4vh;
  display:grid;
  place-items:center;
}
.support-topic__icon img{
  width:3.6vh;
  height:3.6vh;
  object-fit:contain;
  filter:drop-shadow(0 .14vh .22vh rgba(0,0,0,.64));
}
.support-topic__copy{
  min-width:0;
  display:grid;
  gap:.25vh;
}
.support-topic__copy strong{
  color:#e2c372;
  font-size:1.35vh;
  line-height:1.1;
  font-weight:500;
  text-transform:uppercase;
}
.support-topic__copy small{
  color:#bfae84;
  font-size:1.02vh;
  line-height:1.23;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.support-topic__arrow{
  color:#d4a244;
  font-size:2.35vh;
  line-height:1;
}
.support-contact{
  display:grid;
  grid-template-rows:auto repeat(3,minmax(0,1fr));
  gap:.72vh;
}
.support-contact-card{
  display:grid;
  grid-template-columns:5.8vh minmax(0,1fr);
  gap:1.35vh;
  align-items:center;
  min-height:0;
  padding:1.0vh 1.25vh;
  border:1px solid rgba(137,97,34,.50);
  background:linear-gradient(180deg,rgba(8,13,12,.78),rgba(4,8,8,.90));
  box-shadow:inset 0 0 0 1px rgba(36,34,27,.68);
  overflow:hidden;
}
.support-contact-card__icon{
  width:5.4vh;
  height:5.4vh;
  display:grid;
  place-items:center;
}
.support-contact-card__icon img{
  width:4.7vh;
  height:4.7vh;
  object-fit:contain;
  filter:drop-shadow(0 .16vh .25vh rgba(0,0,0,.72));
}
.support-contact-card__copy{
  min-width:0;
}
.support-contact-card h3{
  margin:0 0 .42vh;
  color:#e1bd68;
  text-transform:uppercase;
  font-size:1.48vh;
  font-weight:500;
}
.support-contact-card p{
  margin:0 0 .7vh;
  color:#c7b58a;
  font-size:1.08vh;
  line-height:1.32;
}
.support-email{
  color:#e7b83f;
  font-size:1.10vh;
  text-decoration:none;
}
.support-email:hover{text-decoration:underline}
.support-action{
  min-width:17.5vh;
  height:3.45vh;
  padding:0 1.15vh;
  border:1px solid rgba(154,112,39,.62);
  background:linear-gradient(180deg,rgba(11,17,16,.95),rgba(6,10,11,.98));
  box-shadow:inset 0 0 0 1px rgba(38,38,29,.88);
  color:#e5d09c;
  text-transform:uppercase;
  font-size:1.05vh;
  cursor:pointer;
}
.support-action--red{
  background:
    linear-gradient(180deg,rgba(122,24,15,.92),rgba(76,10,8,.96));
  border-color:rgba(184,128,38,.72);
}
.support-action:hover{filter:brightness(1.10)}
.support-hours{
  grid-column:1 / -1;
  align-self:end;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:1.0vh;
  height:5.2vh;
  margin-top:.55vh;
  border:1px solid rgba(137,97,34,.48);
  background:linear-gradient(180deg,rgba(7,12,11,.82),rgba(4,8,8,.92));
  box-shadow:inset 0 0 0 1px rgba(36,34,27,.66);
  color:#cdb98d;
  text-align:center;
}
.support-hours__icon{
  color:#d4aa50;
  font-size:1.8vh;
}
.support-hours div{
  display:grid;
  gap:.18vh;
}
.support-hours strong{
  color:#e1c27a;
  font-size:1.15vh;
  font-weight:500;
}
.support-hours span:not(.support-hours__icon){
  font-size:.98vh;
}

@media(max-width:900px){
  body.support-page{overflow:auto;}
  .support-stage{
    height:auto;
    min-height:1000px;
    overflow:visible;
  }
  .support-shell{padding:20px 0 50px;}
  .support-heading{width:min(94%,680px);}
  .support-heading h1{font-size:40px;}
  .support-heading__lead{font-size:17px;}
  .support-heading__sub{width:92%;font-size:13px;}
  .support-panel{
    position:relative;
    left:auto;
    top:auto;
    width:min(94%,760px);
    height:auto;
    transform:none;
    margin:28px auto 0;
    padding:48px 34px 40px;
    overflow:visible;
  }
  .support-panel__content{
    grid-template-columns:1fr;
    grid-template-rows:auto;
    gap:24px;
    height:auto;
  }
  .support-topics{padding-right:0;border-right:0;overflow:visible;}
  .support-contact{padding-left:0;overflow:visible;display:grid;grid-template-rows:auto;}
  .support-topics h2,.support-contact h2{font-size:22px;margin-bottom:12px;}
  .support-topic-list{gap:8px;}
  .support-topic{grid-template-columns:50px 1fr 18px;min-height:74px;padding:8px 12px;}
  .support-topic__icon{width:46px;height:46px;}
  .support-topic__icon img{width:38px;height:38px;}
  .support-topic__copy strong{font-size:15px;}
  .support-topic__copy small{font-size:12px;white-space:normal;}
  .support-contact-card{grid-template-columns:60px 1fr;min-height:132px;padding:14px;}
  .support-contact-card__icon{width:56px;height:56px;}
  .support-contact-card__icon img{width:48px;height:48px;}
  .support-contact-card h3{font-size:17px;}
  .support-contact-card p{font-size:13px;}
  .support-email{font-size:13px;}
  .support-action{height:42px;min-width:190px;font-size:12px;}
  .support-hours{grid-column:auto;height:auto;min-height:76px;padding:12px;}
  .support-hours strong{font-size:14px;}
  .support-hours span:not(.support-hours__icon){font-size:12px;}
}

/* ============================================================
   V89 – Support layout: every section gets its own defined area
   Fixes clipped sixth topic and makes the page easier to read.
   ============================================================ */
@media (min-width:901px){
  .support-heading{
    width:min(104vh,76vw) !important;
  }

  .support-heading h1{
    font-size:5.55vh !important;
  }

  .support-heading__lead{
    font-size:1.95vh !important;
    margin-bottom:.62vh !important;
  }

  .support-heading__sub{
    width:76% !important;
    font-size:1.34vh !important;
    line-height:1.38 !important;
  }

  .support-panel{
    top:17.2% !important;
    width:min(137vh,84vw) !important;
    height:71.8% !important;
    padding:3.65vh 4.15vh 3.55vh !important;
    overflow:hidden !important;
  }

  .support-panel__content{
    grid-template-columns:56.5% 43.5% !important;
    grid-template-rows:minmax(0,1fr) 6.15vh !important;
    height:100% !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .support-topics,
  .support-contact{
    min-height:0 !important;
    overflow:hidden !important;
  }

  .support-topics{
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) !important;
    padding-right:2.75vh !important;
  }

  .support-contact{
    grid-template-rows:auto repeat(3,minmax(0,1fr)) !important;
    gap:.82vh !important;
    padding-left:2.75vh !important;
  }

  .support-topics h2,
  .support-contact h2{
    margin-bottom:1.18vh !important;
    font-size:2.15vh !important;
  }

  .support-topic-list{
    display:grid !important;
    grid-template-rows:repeat(6,minmax(0,1fr)) !important;
    gap:.72vh !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .support-topic{
    min-height:0 !important;
    height:auto !important;
    grid-template-columns:5.0vh minmax(0,1fr) 1.5vh !important;
    gap:1.1vh !important;
    padding:.68vh 1.05vh !important;
  }

  .support-topic__icon{
    width:4.65vh !important;
    height:4.65vh !important;
  }

  .support-topic__icon img{
    width:3.85vh !important;
    height:3.85vh !important;
  }

  .support-topic__copy strong{
    font-size:1.43vh !important;
    line-height:1.12 !important;
  }

  .support-topic__copy small{
    font-size:1.08vh !important;
    line-height:1.25 !important;
  }

  .support-topic__arrow{
    font-size:2.55vh !important;
  }

  .support-contact-card{
    min-height:0 !important;
    grid-template-columns:6.15vh minmax(0,1fr) !important;
    gap:1.45vh !important;
    padding:1.05vh 1.35vh !important;
  }

  .support-contact-card__icon{
    width:5.75vh !important;
    height:5.75vh !important;
  }

  .support-contact-card__icon img{
    width:4.95vh !important;
    height:4.95vh !important;
  }

  .support-contact-card h3{
    font-size:1.60vh !important;
    margin-bottom:.48vh !important;
  }

  .support-contact-card p{
    font-size:1.16vh !important;
    line-height:1.34 !important;
    margin-bottom:.75vh !important;
  }

  .support-email{
    font-size:1.17vh !important;
  }

  .support-action{
    min-width:18.5vh !important;
    height:3.65vh !important;
    font-size:1.11vh !important;
  }

  .support-hours{
    height:5.55vh !important;
    margin-top:.6vh !important;
    gap:1.1vh !important;
  }

  .support-hours__icon{
    font-size:1.95vh !important;
  }

  .support-hours strong{
    font-size:1.23vh !important;
  }

  .support-hours span:not(.support-hours__icon){
    font-size:1.05vh !important;
  }
}


/* ============================================================
   V90 – Help / Knowledge Center + article page
   ============================================================ */
.support-action--link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
}

.knowledge-stage,.help-article-stage{
  position:relative;
  height:80.859375vh;
  overflow:hidden;
  border-bottom:1px solid rgba(162,118,39,.65);
  background:#111712;
}
.knowledge-stage__bg{
  position:absolute;inset:0;
  background:url('assets/bg_castle.png') center 45%/cover no-repeat;
  filter:brightness(.60) saturate(.80);
  transform:scale(1.015);
}
.knowledge-stage__vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 26%,rgba(0,0,0,.02),rgba(0,0,0,.16) 52%,rgba(0,0,0,.46) 100%),
    linear-gradient(90deg,rgba(3,5,4,.50),rgba(3,5,4,.09) 30%,rgba(3,5,4,.09) 70%,rgba(3,5,4,.50));
}
.knowledge-shell,.help-article-shell{position:relative;z-index:2;width:100%;height:100%;padding-top:1.45vh;}
.knowledge-heading,.help-article-heading{width:min(112vh,80vw);margin:0 auto;text-align:center;color:#ead39a;text-shadow:0 .16vh .25vh #000;}
.knowledge-heading h1,.help-article-heading h1{margin:0 0 .42vh;font-size:5.25vh;line-height:1;text-transform:uppercase;font-weight:500;letter-spacing:.035em;}
.knowledge-heading p,.help-article-heading p{margin:0;color:#d6c092;font-size:1.38vh;line-height:1.35;}
.knowledge-panel{
  position:absolute;left:50%;top:16.8%;width:min(148vh,90vw);height:72.8%;transform:translateX(-50%);
  padding:3.55vh 4.15vh 3.55vh;isolation:isolate;overflow:hidden;
}
.knowledge-panel__content{position:relative;z-index:5;display:grid;grid-template-columns:31% 69%;grid-template-rows:6.6vh minmax(0,1fr);height:100%;min-height:0;overflow:hidden;}
.knowledge-search-wrap{grid-column:1/-1;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1.8vh;padding-bottom:1.25vh;border-bottom:1px solid rgba(136,96,34,.28);}
.knowledge-search{height:4.65vh;display:flex;align-items:center;border:1px solid rgba(151,107,36,.62);background:linear-gradient(180deg,rgba(8,13,12,.92),rgba(4,8,8,.98));box-shadow:inset 0 0 0 1px rgba(36,34,27,.78);}
.knowledge-search img{width:2.5vh;height:2.5vh;object-fit:contain;margin:0 1.15vh;filter:drop-shadow(0 .14vh .20vh rgba(0,0,0,.65));}
.knowledge-search input{flex:1;height:100%;min-width:0;border:0;outline:0;background:transparent;color:#ead7aa;font:inherit;font-size:1.30vh;}
.knowledge-search input::placeholder{color:#8f8060;}
.knowledge-ticket-link{color:#d3a84c;text-decoration:none;font-size:1.08vh;text-transform:uppercase;white-space:nowrap;}
.knowledge-ticket-link:hover{text-decoration:underline;}
.knowledge-categories{min-height:0;padding:1.7vh 2.15vh 0 0;border-right:1px solid rgba(136,96,34,.30);overflow:hidden;}
.knowledge-articles{min-height:0;padding:1.7vh 0 0 2.25vh;overflow:hidden;display:grid;grid-template-rows:auto minmax(0,1fr) auto;}
.knowledge-categories h2,.knowledge-articles h2{margin:0 0 1.0vh;color:#e1bf6b;text-transform:uppercase;font-size:1.95vh;font-weight:500;}
.knowledge-category-list{display:grid;gap:.58vh;}
.knowledge-category{display:grid;grid-template-columns:4.15vh minmax(0,1fr) auto;align-items:center;gap:.9vh;min-height:5.55vh;padding:.55vh .85vh;border:1px solid rgba(137,97,34,.42);background:linear-gradient(180deg,rgba(8,13,12,.75),rgba(4,8,8,.88));color:#cdb98d;text-align:left;cursor:pointer;}
.knowledge-category:hover,.knowledge-category.is-active{border-color:rgba(195,143,45,.78);background:linear-gradient(90deg,rgba(83,27,13,.42),rgba(8,13,12,.86));color:#efd79e;}
.knowledge-category__icon{width:3.9vh;height:3.9vh;display:grid;place-items:center;}
.knowledge-category__icon img{width:3.25vh;height:3.25vh;object-fit:contain;}
.knowledge-category span:not(.knowledge-category__icon){font-size:1.10vh;text-transform:uppercase;line-height:1.12;}
.knowledge-category b{font-size:.95vh;color:#9c8250;font-weight:400;}
.knowledge-articles__header{display:flex;justify-content:space-between;align-items:flex-end;min-height:5.4vh;padding-bottom:.8vh;}
.knowledge-articles__header h2{margin-bottom:.28vh;}
.knowledge-articles__header p{margin:0;color:#a99874;font-size:1.0vh;}
.knowledge-article-list{min-height:0;overflow-y:auto;overflow-x:hidden;display:grid;align-content:start;gap:.62vh;padding-right:.45vh;scrollbar-width:thin;scrollbar-color:#a97925 #07100e;}
.knowledge-article-list::-webkit-scrollbar{width:.7vh}.knowledge-article-list::-webkit-scrollbar-track{background:#07100e}.knowledge-article-list::-webkit-scrollbar-thumb{background:linear-gradient(#d0a04a,#7f5619);border:1px solid #2d200d;}
.knowledge-article{display:grid;grid-template-columns:4.75vh minmax(0,1fr) 1.4vh;align-items:center;gap:1.05vh;min-height:6.15vh;padding:.65vh 1.0vh;border:1px solid rgba(137,97,34,.48);background:linear-gradient(180deg,rgba(7,12,11,.80),rgba(4,8,8,.92));color:#d8c18c;text-decoration:none;}
.knowledge-article:hover{border-color:rgba(195,143,45,.78);filter:brightness(1.08);}
.knowledge-article[hidden]{display:none!important;}
.knowledge-article__icon{width:4.45vh;height:4.45vh;display:grid;place-items:center;}
.knowledge-article__icon img{width:3.65vh;height:3.65vh;object-fit:contain;}
.knowledge-article__copy{min-width:0;display:grid;gap:.24vh;}
.knowledge-article__copy strong{color:#e2c372;font-size:1.30vh;font-weight:500;line-height:1.15;}
.knowledge-article__copy small{color:#b6a47d;font-size:1.0vh;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.knowledge-article__arrow{color:#d4a244;font-size:2.3vh;}
.knowledge-empty{padding:2.2vh;text-align:center;color:#b7a47d;border:1px solid rgba(137,97,34,.35);background:rgba(4,8,8,.74);}
.knowledge-empty strong{display:block;color:#dec077;font-size:1.30vh;margin-bottom:.4vh;}
.knowledge-empty span{font-size:1.02vh;}

.help-article-heading{position:relative;}
.help-article-back{display:inline-block;margin-bottom:.6vh;color:#d4a84a;text-decoration:none;text-transform:uppercase;font-size:1.0vh;}
.help-article-back:hover{text-decoration:underline;}
.help-article-heading h1{font-size:4.45vh;}
.help-article-panel{position:absolute;left:50%;top:18.2%;width:min(130vh,82vw);height:69.8%;transform:translateX(-50%);padding:3.7vh 4.3vh 3.65vh;isolation:isolate;overflow:hidden;}
.help-article-panel__content{position:relative;z-index:5;display:grid;grid-template-columns:minmax(0,1fr) 31%;gap:2.6vh;height:100%;min-height:0;overflow:hidden;}
.help-article-copy{min-height:0;overflow-y:auto;padding-right:1.1vh;scrollbar-width:thin;scrollbar-color:#a97925 #07100e;}
.help-article-intro{display:grid;grid-template-columns:6.0vh minmax(0,1fr);gap:1.2vh;align-items:center;padding-bottom:1.2vh;margin-bottom:1.1vh;border-bottom:1px solid rgba(136,96,34,.30);}
.help-article-intro__icon{width:5.6vh;height:5.6vh;display:grid;place-items:center;}
.help-article-intro__icon img{width:4.8vh;height:4.8vh;object-fit:contain;}
.help-article-category{display:block;color:#d9b45e;text-transform:uppercase;font-size:1.05vh;margin-bottom:.35vh;}
.help-article-intro p{margin:0;color:#c9b78d;font-size:1.18vh;line-height:1.45;}
.help-step{display:grid;grid-template-columns:3.3vh minmax(0,1fr);gap:1.0vh;padding:1.15vh 0;border-bottom:1px solid rgba(136,96,34,.24);}
.help-step>span{width:2.8vh;height:2.8vh;border:1px solid rgba(180,128,38,.75);display:grid;place-items:center;color:#e2bd67;background:rgba(72,26,13,.34);font-size:1.15vh;}
.help-step h2{margin:0 0 .38vh;color:#e2c372;font-size:1.45vh;font-weight:500;text-transform:uppercase;}
.help-step p{margin:0;color:#bfae84;font-size:1.08vh;line-height:1.48;}
.help-article-note{margin-top:1.25vh;padding:1.0vh 1.2vh;border:1px solid rgba(137,97,34,.48);background:linear-gradient(90deg,rgba(88,51,14,.22),rgba(4,8,8,.65));}
.help-article-note strong{display:block;color:#e4c66f;font-size:1.18vh;text-transform:uppercase;margin-bottom:.3vh;}
.help-article-note span{color:#c6b48a;font-size:1.04vh;line-height:1.4;}
.help-article-side{min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto auto;gap:1.0vh;overflow:hidden;}
.help-side-card{padding:1.25vh;border:1px solid rgba(137,97,34,.48);background:linear-gradient(180deg,rgba(7,12,11,.80),rgba(4,8,8,.92));overflow:hidden;}
.help-side-card h2{margin:0 0 .9vh;color:#e0bf6a;font-size:1.45vh;text-transform:uppercase;font-weight:500;}
.help-related-list{display:grid;gap:.6vh;}
.help-related-list a{display:block;padding:.72vh .82vh;border:1px solid rgba(137,97,34,.35);color:#cdb98d;text-decoration:none;font-size:1.0vh;line-height:1.25;background:rgba(6,11,10,.72);}
.help-related-list a:hover{border-color:rgba(191,139,45,.72);color:#efd79e;}
.help-side-card--question{text-align:center;}
.helpful-actions{display:flex;justify-content:center;gap:.8vh;}
.helpful-actions button{min-width:7.0vh;height:3.2vh;border:1px solid rgba(154,112,39,.62);background:rgba(7,12,11,.92);color:#dfc894;text-transform:uppercase;font-size:1.0vh;cursor:pointer;}
.helpful-actions button:hover{filter:brightness(1.12);}
#helpfulThanks{margin:.8vh 0 0;color:#d9ba68;font-size:1.0vh;}
.help-side-support{display:flex;align-items:center;justify-content:center;min-height:4.2vh;padding:.6vh 1vh;border:1px solid rgba(171,117,35,.65);background:linear-gradient(180deg,rgba(109,24,15,.78),rgba(67,11,8,.88));color:#ead39a;text-decoration:none;text-align:center;text-transform:uppercase;font-size:1.02vh;}

@media(max-width:900px){
  body.knowledge-page,body.help-article-page{overflow:auto;}
  .knowledge-stage,.help-article-stage{height:auto;min-height:1000px;overflow:visible;}
  .knowledge-shell,.help-article-shell{padding:20px 0 50px;}
  .knowledge-heading,.help-article-heading{width:min(94%,720px);}
  .knowledge-heading h1,.help-article-heading h1{font-size:36px;}
  .knowledge-heading p,.help-article-heading p{font-size:14px;}
  .knowledge-panel,.help-article-panel{position:relative;left:auto;top:auto;width:min(94%,800px);height:auto;transform:none;margin:28px auto 0;padding:48px 32px 40px;overflow:visible;}
  .knowledge-panel__content{grid-template-columns:1fr;grid-template-rows:auto;gap:20px;height:auto;overflow:visible;}
  .knowledge-search-wrap{grid-template-columns:1fr;gap:10px;}
  .knowledge-search{height:50px}.knowledge-search input{font-size:14px}.knowledge-ticket-link{font-size:11px;text-align:center;}
  .knowledge-categories{padding:0;border-right:0;overflow:visible;}.knowledge-articles{padding:0;overflow:visible;display:block;}
  .knowledge-category-list{grid-template-columns:1fr 1fr;gap:8px}.knowledge-category{min-height:62px;grid-template-columns:44px 1fr auto}.knowledge-category span:not(.knowledge-category__icon){font-size:12px}
  .knowledge-article-list{max-height:none;overflow:visible;gap:8px}.knowledge-article{min-height:70px;grid-template-columns:50px 1fr 18px}.knowledge-article__copy strong{font-size:14px}.knowledge-article__copy small{font-size:12px;white-space:normal}
  .help-article-panel__content{grid-template-columns:1fr;height:auto;overflow:visible}.help-article-copy{overflow:visible;padding-right:0}.help-article-side{overflow:visible}.help-article-back{font-size:11px}
  .help-article-intro p,.help-step p{font-size:13px}.help-step h2{font-size:16px}.help-article-category{font-size:11px}.help-side-card h2{font-size:16px}.help-related-list a{font-size:12px}.help-side-support{font-size:12px;min-height:46px}
}


/* ============================================================
   V91 – Wissensbereich: feste Scroll-Zonen
   Search/Header bleiben stehen. Kategorien und Artikel scrollen separat.
   ============================================================ */

@media (min-width:901px){

  /* Linke Seite: Überschrift bleibt stehen, nur Kategorien scrollen. */
  .knowledge-categories{
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .knowledge-category-list{
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    align-content:start !important;
    padding-right:.52vh !important;
    scrollbar-width:thin !important;
    scrollbar-color:#b1802d #07100e !important;
    overscroll-behavior:contain !important;
  }

  /* Rechte Seite: Header bleibt stehen, nur Artikelliste scrollt. */
  .knowledge-articles{
    grid-template-rows:auto minmax(0,1fr) !important;
    min-height:0 !important;
    overflow:hidden !important;
  }

  .knowledge-article-list{
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-right:.58vh !important;
    scrollbar-width:thin !important;
    scrollbar-color:#b1802d #07100e !important;
    overscroll-behavior:contain !important;
  }

  /* Gemeinsames Castle-Lords Scrollbar-Design. */
  .knowledge-category-list::-webkit-scrollbar,
  .knowledge-article-list::-webkit-scrollbar,
  .help-article-copy::-webkit-scrollbar,
  .help-related-list::-webkit-scrollbar{
    width:.72vh !important;
  }

  .knowledge-category-list::-webkit-scrollbar-track,
  .knowledge-article-list::-webkit-scrollbar-track,
  .help-article-copy::-webkit-scrollbar-track,
  .help-related-list::-webkit-scrollbar-track{
    background:
      linear-gradient(90deg,#030706,#09120f,#030706) !important;
    border-left:1px solid rgba(106,74,28,.28) !important;
    border-right:1px solid rgba(106,74,28,.18) !important;
  }

  .knowledge-category-list::-webkit-scrollbar-thumb,
  .knowledge-article-list::-webkit-scrollbar-thumb,
  .help-article-copy::-webkit-scrollbar-thumb,
  .help-related-list::-webkit-scrollbar-thumb{
    min-height:5.6vh !important;
    border:1px solid #4e350f !important;
    background:
      linear-gradient(90deg,#765019,#d1a03f 48%,#765019) !important;
    box-shadow:
      inset 0 0 .20vh rgba(255,231,163,.30),
      0 0 .18vh rgba(0,0,0,.65) !important;
  }

  .knowledge-category-list::-webkit-scrollbar-thumb:hover,
  .knowledge-article-list::-webkit-scrollbar-thumb:hover,
  .help-article-copy::-webkit-scrollbar-thumb:hover,
  .help-related-list::-webkit-scrollbar-thumb:hover{
    background:
      linear-gradient(90deg,#93651f,#e4b750 48%,#93651f) !important;
  }

  /* Leerer Suchzustand bleibt innerhalb des rechten Bereichs zentriert. */
  .knowledge-empty{
    align-self:center !important;
    margin:auto 0 !important;
  }

  /* Artikelansicht: auch dort dieselbe Scrollbar. */
  .help-article-copy{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    scrollbar-width:thin !important;
    scrollbar-color:#b1802d #07100e !important;
    overscroll-behavior:contain !important;
  }

  /* Falls später viele "ähnliche Artikel" dazukommen. */
  .help-related-list{
    min-height:0 !important;
    max-height:23vh !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-right:.35vh !important;
    scrollbar-width:thin !important;
    scrollbar-color:#b1802d #07100e !important;
  }
}

/* Mobile: normale Seiten-Scrollbewegung statt verschachtelter Mini-Scrollbars. */
@media (max-width:900px){
  .knowledge-category-list,
  .knowledge-article-list,
  .help-article-copy,
  .help-related-list{
    max-height:none !important;
    overflow:visible !important;
  }
}


/* ============================================================
   V92 – Hilfe / Wissensbereich etwas größer skalieren
   ============================================================ */

@media (min-width: 901px){
  /* Wissensbereich */
  .knowledge-heading,
  .help-article-heading{
    width:min(124vh,84vw) !important;
  }

  .knowledge-heading h1,
  .help-article-heading h1{
    font-size:5.8vh !important;
  }

  .knowledge-heading p,
  .help-article-heading p{
    font-size:1.5vh !important;
  }

  .knowledge-panel{
    top:15.4% !important;
    width:min(158vh,92vw) !important;
    height:75.5% !important;
    padding:3.95vh 4.6vh 3.8vh !important;
  }

  .knowledge-panel__content{
    grid-template-rows:7.1vh minmax(0,1fr) !important;
    grid-template-columns:32% 68% !important;
  }

  .knowledge-search-wrap{
    gap:2vh !important;
    padding-bottom:1.45vh !important;
  }

  .knowledge-search{
    height:5.05vh !important;
  }

  .knowledge-search img{
    width:2.7vh !important;
    height:2.7vh !important;
    margin:0 1.22vh !important;
  }

  .knowledge-search input{
    font-size:1.42vh !important;
  }

  .knowledge-ticket-link{
    font-size:1.18vh !important;
  }

  .knowledge-categories h2,
  .knowledge-articles h2{
    font-size:2.18vh !important;
    margin-bottom:1.12vh !important;
  }

  .knowledge-categories{
    padding:1.95vh 2.35vh 0 0 !important;
  }

  .knowledge-articles{
    padding:1.95vh 0 0 2.45vh !important;
  }

  .knowledge-category-list{
    gap:.72vh !important;
  }

  .knowledge-category{
    grid-template-columns:4.45vh minmax(0,1fr) auto !important;
    gap:1vh !important;
    min-height:6.15vh !important;
    padding:.7vh 1.0vh !important;
  }

  .knowledge-category__icon{
    width:4.15vh !important;
    height:4.15vh !important;
  }

  .knowledge-category__icon img{
    width:3.45vh !important;
    height:3.45vh !important;
  }

  .knowledge-category span:not(.knowledge-category__icon){
    font-size:1.18vh !important;
    line-height:1.18 !important;
  }

  .knowledge-category b{
    font-size:1.02vh !important;
  }

  .knowledge-articles__header{
    min-height:5.9vh !important;
    padding-bottom:.95vh !important;
  }

  .knowledge-articles__header p{
    font-size:1.12vh !important;
  }

  .knowledge-article-list{
    gap:.74vh !important;
    padding-right:.62vh !important;
  }

  .knowledge-article{
    grid-template-columns:5.1vh minmax(0,1fr) 1.55vh !important;
    gap:1.12vh !important;
    min-height:6.8vh !important;
    padding:.78vh 1.08vh !important;
  }

  .knowledge-article__icon{
    width:4.8vh !important;
    height:4.8vh !important;
  }

  .knowledge-article__icon img{
    width:3.95vh !important;
    height:3.95vh !important;
  }

  .knowledge-article__copy{
    gap:.28vh !important;
  }

  .knowledge-article__copy strong{
    font-size:1.42vh !important;
  }

  .knowledge-article__copy small{
    font-size:1.08vh !important;
  }

  .knowledge-article__arrow{
    font-size:2.55vh !important;
  }

  .knowledge-empty{
    padding:2.6vh !important;
  }

  .knowledge-empty strong{
    font-size:1.42vh !important;
  }

  .knowledge-empty span{
    font-size:1.10vh !important;
  }

  /* Detail-Artikelansicht ebenfalls etwas größer */
  .help-article-panel{
    top:17.2% !important;
    width:min(138vh,85vw) !important;
    height:72.5% !important;
    padding:3.95vh 4.6vh 3.8vh !important;
  }

  .help-article-panel__content{
    grid-template-columns:minmax(0,1fr) 32% !important;
    gap:2.9vh !important;
  }

  .help-article-back{
    font-size:1.12vh !important;
    margin-bottom:.72vh !important;
  }

  .help-article-heading h1{
    font-size:4.9vh !important;
  }

  .help-article-intro{
    grid-template-columns:6.35vh minmax(0,1fr) !important;
    gap:1.35vh !important;
    padding-bottom:1.4vh !important;
    margin-bottom:1.28vh !important;
  }

  .help-article-intro__icon{
    width:5.95vh !important;
    height:5.95vh !important;
  }

  .help-article-intro__icon img{
    width:5.05vh !important;
    height:5.05vh !important;
  }

  .help-article-category{
    font-size:1.16vh !important;
    margin-bottom:.42vh !important;
  }

  .help-article-intro p{
    font-size:1.28vh !important;
  }

  .help-step{
    grid-template-columns:3.6vh minmax(0,1fr) !important;
    gap:1.12vh !important;
    padding:1.28vh 0 !important;
  }

  .help-step > span{
    width:3.0vh !important;
    height:3.0vh !important;
    font-size:1.22vh !important;
  }

  .help-step h2{
    font-size:1.58vh !important;
    margin-bottom:.44vh !important;
  }

  .help-step p{
    font-size:1.16vh !important;
  }

  .help-article-note{
    margin-top:1.45vh !important;
    padding:1.15vh 1.35vh !important;
  }

  .help-article-note strong{
    font-size:1.26vh !important;
  }

  .help-side-card{
    padding:1.45vh !important;
  }

  .help-side-card h2{
    font-size:1.56vh !important;
    margin-bottom:1.0vh !important;
  }

  .help-related-list{
    gap:.72vh !important;
  }

  .help-related-list a{
    font-size:1.12vh !important;
    padding:.95vh 1.0vh !important;
  }

  .help-side-support{
    min-height:5.2vh !important;
    font-size:1.12vh !important;
  }
}


/* ============================================================
   V93 – Ritter rechts auf Support / Wissensbereich / Hilfeartikel
   Das Bild ist rein dekorativ und liegt als transparentes Asset vor.
   ============================================================ */

.knowledge-stage,
.help-article-stage,
.support-stage{
  isolation:isolate;
}

.help-guardian{
  position:absolute;
  z-index:3;
  display:block;
  width:auto;
  max-width:none;
  height:auto;
  pointer-events:none;
  user-select:none;
  object-fit:contain;
  filter:
    drop-shadow(0 .65vh .65vh rgba(0,0,0,.58))
    drop-shadow(0 0 .35vh rgba(151,92,24,.14));
}

/* Wissensdatenbank: rechts neben/leicht über den Rahmen,
   aber hinter dem eigentlichen Inhalt der Box. */
.help-guardian--knowledge{
  right:-.6vh;
  bottom:-1.6vh;
  height:67vh;
  transform:translateX(3.0%);
}

/* Hilfeartikel: fast identische Position, damit die Seiten zusammengehören. */
.help-guardian--article{
  right:-.2vh;
  bottom:-1.5vh;
  height:68vh;
  transform:translateX(3.0%);
}

/* Support: etwas kleiner, damit Kontaktboxen und Figur nicht konkurrieren. */
.help-guardian--support{
  right:.1vh;
  bottom:-1.8vh;
  height:64vh;
  transform:translateX(4.0%);
}

/* Rahmen und Content bleiben immer vor dem Ritter lesbar. */
.knowledge-panel,
.help-article-panel,
.support-panel{
  z-index:4 !important;
}

.knowledge-panel__content,
.help-article-panel__content,
.support-panel__content{
  position:relative;
  z-index:6;
}

/* Rechts etwas Luft schaffen, ohne die Box wieder klein zu machen.
   Der Ritter schaut am Rand über den Rahmen, der Textbereich bleibt geschützt. */
@media (min-width: 1401px){
  .knowledge-panel{
    width:min(151vh,88vw) !important;
    transform:translateX(-54%) !important;
  }

  .help-article-panel{
    width:min(134vh,82vw) !important;
    transform:translateX(-55%) !important;
  }

  .support-panel{
    transform:translateX(-53%) !important;
  }
}

@media (min-width: 1101px) and (max-width: 1400px){
  .help-guardian--knowledge,
  .help-guardian--article{
    height:61vh;
    right:-2.0vh;
    opacity:.96;
  }

  .help-guardian--support{
    height:57vh;
    right:-2.0vh;
  }

  .knowledge-panel,
  .help-article-panel,
  .support-panel{
    transform:translateX(-52%) !important;
  }
}

/* Bei kleineren Desktop-Breiten nicht über den Inhalt legen:
   Figur bleibt am rechten Rand, wird aber kleiner. */
@media (min-width: 901px) and (max-width: 1100px){
  .help-guardian--knowledge,
  .help-guardian--article{
    height:50vh;
    right:-5vh;
    opacity:.88;
  }

  .help-guardian--support{
    height:47vh;
    right:-5vh;
    opacity:.86;
  }
}

/* Mobile: keine überladene Seitenkante. */
@media (max-width:900px){
  .help-guardian{
    display:none !important;
  }
}


/* ============================================================
   V94 – Registrierungsfigur rechts ersetzt + Hilfe-Abstände vereinheitlicht
   ============================================================ */

/* Registrierung:
   linke Figur bleibt unverändert, rechts wird die neue Ritterin verwendet.
   Die Ritterin darf leicht über den Goldrahmen schauen, soll aber nicht
   in den Formular-/Benefit-Bereich hineinragen. */
@media (hover:hover) and (pointer:fine){
  .reg62-knight--right{
    transform:
      translateX(97%)
      scaleX(.86)
      scaleY(1.10) !important;
    filter:
      drop-shadow(0 .9vh 1.45vh rgba(0,0,0,.78))
      drop-shadow(0 0 .30vh rgba(161,94,24,.12)) !important;
  }
}

/* 4:3 bzw. schmalere Desktop-Ansichten: etwas mehr Abstand zur Box. */
@media (hover:hover) and (pointer:fine) and (max-aspect-ratio:4/3){
  .reg62-knight--right{
    transform:
      translateX(99%)
      scaleX(.86)
      scaleY(1.10) !important;
  }
}


/* ------------------------------------------------------------
   Wissensbereich / Hilfeartikel / Support:
   gleicher rechter Figuren-Anker, aber die jeweilige Box endet
   VOR der Figur. Dadurch ist der Abstand auf allen drei Seiten sauber.
   ------------------------------------------------------------ */

@media (min-width:1401px){
  .help-guardian--knowledge,
  .help-guardian--article,
  .help-guardian--support{
    right:.75vh !important;
    bottom:-1.45vh !important;
    transform:none !important;
  }

  .help-guardian--knowledge{
    height:66.5vh !important;
  }

  .help-guardian--article{
    height:67.0vh !important;
  }

  .help-guardian--support{
    height:64.0vh !important;
  }

  /* Wissensbereich war vorher am stärksten unter der Figur.
     Etwas schmaler + weiter links = sauberer sichtbarer Zwischenraum. */
  .knowledge-panel{
    width:min(145vh,86vw) !important;
    transform:translateX(-59%) !important;
  }

  /* Artikel und Support bekommen denselben optischen Abstand. */
  .help-article-panel{
    width:min(133vh,81vw) !important;
    transform:translateX(-56%) !important;
  }

  .support-panel{
    transform:translateX(-54%) !important;
  }
}

/* Mittlere Desktopbreiten:
   Figur etwas kleiner und Boxen nur moderat nach links schieben. */
@media (min-width:1101px) and (max-width:1400px){
  .help-guardian--knowledge,
  .help-guardian--article,
  .help-guardian--support{
    right:-.8vh !important;
    bottom:-1.35vh !important;
    transform:none !important;
  }

  .help-guardian--knowledge{
    height:59vh !important;
  }

  .help-guardian--article{
    height:60vh !important;
  }

  .help-guardian--support{
    height:56vh !important;
  }

  .knowledge-panel{
    width:min(142vh,84vw) !important;
    transform:translateX(-56%) !important;
  }

  .help-article-panel{
    width:min(131vh,80vw) !important;
    transform:translateX(-54%) !important;
  }

  .support-panel{
    transform:translateX(-52.8%) !important;
  }
}

/* Kleine Desktopbreiten: Figur bleibt sichtbar, bekommt aber mehr Abstand,
   ohne den Inhalt zu überdecken. */
@media (min-width:901px) and (max-width:1100px){
  .help-guardian--knowledge,
  .help-guardian--article,
  .help-guardian--support{
    right:-3.5vh !important;
    bottom:-1.2vh !important;
    transform:none !important;
  }

  .help-guardian--knowledge,
  .help-guardian--article{
    height:48vh !important;
  }

  .help-guardian--support{
    height:45vh !important;
  }
}


/* ============================================================
   V95 – Neuer Support-Wächter mit Leucht-Siegel
   Nur auf der Support-Seite.
   Mehr Abstand zur Box, damit Hand/Leuchte nicht in den Content ragen.
   ============================================================ */

.help-guardian--support-orb{
  transform-origin:bottom right;
}

@media (min-width:1401px){
  .help-guardian--support.help-guardian--support-orb{
    right:-2.0vh !important;
    bottom:-1.6vh !important;
    height:63.5vh !important;
    transform:translateX(11.0%) !important;
  }

  .support-panel{
    transform:translateX(-54.6%) !important;
    width:min(123vh, 78vw) !important;
  }
}

@media (min-width:1101px) and (max-width:1400px){
  .help-guardian--support.help-guardian--support-orb{
    right:-3.0vh !important;
    bottom:-1.4vh !important;
    height:56.5vh !important;
    transform:translateX(10.5%) !important;
  }

  .support-panel{
    transform:translateX(-53.8%) !important;
    width:min(118vh, 80vw) !important;
  }
}

@media (min-width:901px) and (max-width:1100px){
  .help-guardian--support.help-guardian--support-orb{
    right:-4.0vh !important;
    bottom:-1.0vh !important;
    height:46vh !important;
    transform:translateX(8.5%) !important;
  }
}


/* ============================================================
   V96 – Gelehrten-Wächter für Hilfe & Wissensbereich
   Neue Figur auf knowledge.html und help-article.html.
   Mit mehr Abstand zur Box, damit Leucht-Siegel und Buch nicht in den Content ragen.
   ============================================================ */

.help-guardian--knowledge-scholar,
.help-guardian--article-scholar{
  transform-origin:bottom right;
}

@media (min-width:1401px){
  .help-guardian--knowledge.help-guardian--knowledge-scholar{
    right:-4.2vh !important;
    bottom:-1.8vh !important;
    height:66.5vh !important;
    transform:translateX(10.5%) !important;
  }

  .help-guardian--article.help-guardian--article-scholar{
    right:-4.0vh !important;
    bottom:-1.6vh !important;
    height:67.5vh !important;
    transform:translateX(10.2%) !important;
  }

  .knowledge-panel{
    width:min(148vh, 86vw) !important;
    transform:translateX(-55.1%) !important;
  }

  .help-article-panel{
    width:min(132vh, 80vw) !important;
    transform:translateX(-55.9%) !important;
  }
}

@media (min-width:1101px) and (max-width:1400px){
  .help-guardian--knowledge.help-guardian--knowledge-scholar{
    right:-4.6vh !important;
    bottom:-1.5vh !important;
    height:60vh !important;
    transform:translateX(10.0%) !important;
    opacity:.97;
  }

  .help-guardian--article.help-guardian--article-scholar{
    right:-4.4vh !important;
    bottom:-1.4vh !important;
    height:61vh !important;
    transform:translateX(9.6%) !important;
    opacity:.97;
  }

  .knowledge-panel{
    width:min(142vh, 88vw) !important;
    transform:translateX(-54.7%) !important;
  }

  .help-article-panel{
    width:min(127vh, 84vw) !important;
    transform:translateX(-55.2%) !important;
  }
}

@media (min-width:901px) and (max-width:1100px){
  .help-guardian--knowledge.help-guardian--knowledge-scholar,
  .help-guardian--article.help-guardian--article-scholar{
    right:-3.8vh !important;
    bottom:-1.1vh !important;
    height:47vh !important;
    transform:translateX(7.5%) !important;
    opacity:.96;
  }
}


/* ============================================================
   V97 – Weibliche Gelehrten-Paladin für direkte Hilfeartikel
   Nur auf help-article.html.
   Mehr Luft zwischen Box und Figur, damit Orb/Buch sauber außerhalb
   des Inhalts bleiben.
   ============================================================ */

.help-guardian--article-female-scholar{
  transform-origin:bottom right;
}

@media (min-width:1401px){
  .help-guardian--article.help-guardian--article-female-scholar{
    right:-5.0vh !important;
    bottom:-1.7vh !important;
    height:68.5vh !important;
    transform:translateX(12.5%) !important;
  }

  .help-article-panel{
    width:min(131vh,79vw) !important;
    transform:translateX(-56.6%) !important;
  }
}

@media (min-width:1101px) and (max-width:1400px){
  .help-guardian--article.help-guardian--article-female-scholar{
    right:-5.2vh !important;
    bottom:-1.45vh !important;
    height:61.5vh !important;
    transform:translateX(11.8%) !important;
    opacity:.97;
  }

  .help-article-panel{
    width:min(126vh,83vw) !important;
    transform:translateX(-55.8%) !important;
  }
}

@media (min-width:901px) and (max-width:1100px){
  .help-guardian--article.help-guardian--article-female-scholar{
    right:-4.6vh !important;
    bottom:-1.1vh !important;
    height:48vh !important;
    transform:translateX(9.0%) !important;
    opacity:.96;
  }
}


/* ============================================================
   V98 – direkte Hilfeartikel: Figur kleiner + weiter links
   ============================================================ */
@media (min-width:1401px){
  .help-guardian--article.help-guardian--article-female-scholar{
    right:1.2vh !important;
    bottom:-1.55vh !important;
    height:62.5vh !important;
    transform:translateX(4.0%) !important;
  }
}

@media (min-width:1101px) and (max-width:1400px){
  .help-guardian--article.help-guardian--article-female-scholar{
    right:.2vh !important;
    bottom:-1.35vh !important;
    height:56.5vh !important;
    transform:translateX(3.5%) !important;
  }
}

@media (min-width:901px) and (max-width:1100px){
  .help-guardian--article.help-guardian--article-female-scholar{
    right:-1.2vh !important;
    bottom:-1.05vh !important;
    height:44.5vh !important;
    transform:translateX(2.5%) !important;
  }
}

/* ============================================================
   V99 – Weltinfo, komplett aus Code + Einzelteilen aufgebaut
   Keine fertige UI-Box als Bild. Rahmen = 4 Rails + 4 Ecken + CSS-Fill.
   ============================================================ */

.worldinfo-page{overflow:hidden;background:#020606;}
.worldinfo-stage{
  position:relative;
  height:79.275vh;
  min-height:0;
  overflow:hidden;
  border-bottom:1px solid #8f6725;
  color:#ead39a;
}
.worldinfo-stage__bg{
  position:absolute;inset:0;
  background:url('assets/bg_castle.png') center 47%/cover no-repeat;
  filter:brightness(.60) saturate(.82);
  transform:scale(1.01);
}
.worldinfo-stage__vignette{
  position:absolute;inset:0;
  background:
    radial-gradient(circle at 50% 24%,rgba(109,74,27,.06),transparent 35%),
    radial-gradient(circle at 50% 42%,rgba(0,0,0,.02),rgba(0,0,0,.26) 62%,rgba(0,0,0,.52) 100%),
    linear-gradient(180deg,rgba(0,0,0,.08),rgba(0,0,0,.27));
}
.worldinfo-shell{position:relative;z-index:2;height:100%;padding-top:1.7vh;}
.worldinfo-heading{text-align:center;text-shadow:0 .18vh .35vh #000;}
.worldinfo-heading h1{
  margin:0 0 .32vh;
  font-size:5.25vh;
  line-height:.98;
  font-weight:400;
  text-transform:uppercase;
  letter-spacing:.055em;
  color:#efd79d;
}
.worldinfo-heading p{margin:0;font-size:1.55vh;color:#e0c78d;}
.worldinfo-layout{
  position:absolute;
  left:50%;top:9.6vh;
  transform:translateX(-50%);
  width:min(155vh,91.6vw);
  height:65.8vh;
  display:grid;
  grid-template-columns:minmax(0,1fr) 31.2vh;
  gap:1.45vh;
  min-height:0;
}
.worldinfo-main,.worldinfo-sidebox{position:relative;isolation:isolate;min-width:0;min-height:0;}
.worldinfo-main{padding:1.25vh 1.65vh 1.55vh;overflow:hidden;}

.worldinfo-frame-parts{position:absolute;inset:0;pointer-events:none;z-index:0;}
.worldinfo-frame-fill{
  position:absolute;inset:1.02vh;
  background:
    radial-gradient(circle at 50% 0,rgba(93,60,20,.10),transparent 34%),
    linear-gradient(180deg,rgba(4,10,10,.992),rgba(2,7,8,.997));
  box-shadow:inset 0 0 2.3vh rgba(0,0,0,.82),0 .65vh 1.9vh rgba(0,0,0,.58);
}
.worldinfo-frame-rail,.worldinfo-frame-corner{position:absolute;display:block;z-index:2;}
.worldinfo-frame-rail{background-repeat:no-repeat;background-position:center;background-size:100% 100%;}
.worldinfo-frame-rail--top,.worldinfo-frame-rail--bottom{
  left:6.7vh;right:6.7vh;height:.82vh;background-image:url('assets/reg_rail_h.png');
}
.worldinfo-frame-rail--top{top:.42vh;}
.worldinfo-frame-rail--bottom{bottom:.42vh;transform:scaleY(-1);}
.worldinfo-frame-rail--left,.worldinfo-frame-rail--right{
  top:6.25vh;bottom:6.25vh;width:.72vh;background-image:url('assets/reg_rail_v.png');
}
.worldinfo-frame-rail--left{left:.50vh;}
.worldinfo-frame-rail--right{right:.50vh;transform:scaleX(-1);}
.worldinfo-frame-corner{width:9.45vh;height:9.45vh;object-fit:contain;z-index:4;}
.worldinfo-frame-corner--tl{left:-.16vh;top:-.16vh;}
.worldinfo-frame-corner--tr{right:-.16vh;top:-.16vh;}
.worldinfo-frame-corner--bl{left:-.08vh;bottom:-.08vh;}
.worldinfo-frame-corner--br{right:-.08vh;bottom:-.08vh;}
.worldinfo-frame-parts--mini .worldinfo-frame-corner{width:7.2vh;height:7.2vh;}
.worldinfo-frame-parts--mini .worldinfo-frame-rail--top,
.worldinfo-frame-parts--mini .worldinfo-frame-rail--bottom{left:5vh;right:5vh;height:.67vh;}
.worldinfo-frame-parts--mini .worldinfo-frame-rail--left,
.worldinfo-frame-parts--mini .worldinfo-frame-rail--right{top:4.8vh;bottom:4.8vh;width:.60vh;}

.worldinfo-main__content{position:relative;z-index:5;height:100%;display:grid;grid-template-rows:5.15vh minmax(0,1fr);min-height:0;overflow:hidden;}
.worldinfo-tabs{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:.54vh;padding:0 .48vh .72vh;
  border-bottom:1px solid rgba(174,123,38,.32);
}
.worldinfo-tab{
  position:relative;display:flex;align-items:center;justify-content:center;gap:.72vh;
  min-width:0;border:1px solid #6c4917;background:linear-gradient(180deg,#101616,#050a0a);
  color:#dfc27f;font:inherit;font-size:1.45vh;text-transform:uppercase;
  cursor:pointer;box-shadow:inset 0 0 1.1vh rgba(0,0,0,.66);
}
.worldinfo-tab::before{content:"";position:absolute;left:1.4vh;right:1.4vh;bottom:-1px;height:1px;background:transparent;box-shadow:none;}
.worldinfo-tab:hover{border-color:#a77925;color:#f0d492;}
.worldinfo-tab.is-active{
  border-color:#c49636;color:#f6dfa3;
  background:linear-gradient(180deg,#6e160e 0%,#3a0807 50%,#170504 100%);
  box-shadow:inset 0 0 1.2vh rgba(234,82,24,.22),0 0 .7vh rgba(207,131,32,.18);
}
.worldinfo-tab.is-active::before{background:#e7b144;box-shadow:0 0 .7vh #e4a62f;}
.worldinfo-tab__icon{width:2.15vh;height:2.15vh;display:grid;place-items:center;color:#d9a642;font-size:1.25vh;flex:none;}
.worldinfo-tab__icon--bars{display:flex;align-items:flex-end;justify-content:center;gap:.18vh;}
.worldinfo-tab__icon--bars i,.worldinfo-mini-icon--bars i{display:block;width:.34vh;background:linear-gradient(#f0c65b,#986216);box-shadow:0 0 .2vh #000;}
.worldinfo-tab__icon--bars i:nth-child(1),.worldinfo-mini-icon--bars i:nth-child(1){height:.72vh;}
.worldinfo-tab__icon--bars i:nth-child(2),.worldinfo-mini-icon--bars i:nth-child(2){height:1.22vh;}
.worldinfo-tab__icon--bars i:nth-child(3),.worldinfo-mini-icon--bars i:nth-child(3){height:1.68vh;}

.worldinfo-view{min-height:0;overflow:hidden;padding:1.05vh .55vh .2vh;}
.worldinfo-view.is-active{display:grid;grid-template-rows:auto minmax(0,1fr) auto;}
.worldinfo-view[hidden]{display:none!important;}
.worldinfo-section-title{display:grid;grid-template-columns:1fr auto 1fr;gap:1.0vh;align-items:center;margin:.1vh 0 .75vh;}
.worldinfo-section-title>span{height:1px;background:linear-gradient(90deg,transparent,#805d20 38%,#c49838);}
.worldinfo-section-title>span:last-child{transform:scaleX(-1);}
.worldinfo-section-title h2{margin:0;color:#eccd82;font-size:2.18vh;font-weight:400;letter-spacing:.025em;text-transform:uppercase;white-space:nowrap;}
.worldinfo-section-title h2 b{font-weight:400;}

.worldinfo-stat-table,.worldinfo-settings-table{
  min-height:0;overflow:auto;border:1px solid rgba(134,93,29,.72);
  background:rgba(0,5,6,.47);scrollbar-width:thin;scrollbar-color:#b17d25 #06100f;
}
.worldinfo-stat-table::-webkit-scrollbar,.worldinfo-settings-table::-webkit-scrollbar,.worldinfo-world-list::-webkit-scrollbar{width:1.05vh; min-width:12px;}
.worldinfo-stat-table::-webkit-scrollbar-track,.worldinfo-settings-table::-webkit-scrollbar-track,.worldinfo-world-list::-webkit-scrollbar-track{background:#06100f;}
.worldinfo-stat-table::-webkit-scrollbar-thumb,.worldinfo-settings-table::-webkit-scrollbar-thumb,.worldinfo-world-list::-webkit-scrollbar-thumb{background:linear-gradient(#dfb24d,#8b5e17);border:1px solid #4a310e; min-height:48px;}
.worldinfo-stat-row,.worldinfo-settings-table>div{
  min-height:2.53vh;display:grid;grid-template-columns:45% 55%;align-items:center;
  border-bottom:1px solid rgba(112,80,29,.34);font-size:1.19vh;
}
.worldinfo-stat-row:last-child,.worldinfo-settings-table>div:last-child{border-bottom:0;}
.worldinfo-stat-row>span,.worldinfo-settings-table>div>span{padding:.39vh 1.05vh;color:#e8cb89;border-right:1px solid rgba(112,80,29,.34);}
.worldinfo-stat-row>strong,.worldinfo-settings-table>div>strong{padding:.39vh 1.25vh;color:#efdba8;font-weight:400;}
.worldinfo-stat-row small{font-size:.95em;color:#d1b675;}
.worldinfo-online{display:flex;align-items:center;gap:.55vh;color:#8fd44d!important;}
.worldinfo-online i{display:block;width:.72vh;height:.72vh;border-radius:50%;background:#66bd3d;box-shadow:0 0 .55vh rgba(104,216,66,.56);}
.worldinfo-resources{display:grid;grid-template-columns:18vh 1fr;gap:1vh;align-items:center;margin-top:.8vh;}
.worldinfo-resources h3{margin:0;font-size:1.15vh;font-weight:400;color:#e8cd8d;text-transform:uppercase;}
.worldinfo-resource-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.55vh;}
.worldinfo-resource-grid>div{height:3.5vh;border:1px solid #745018;background:linear-gradient(180deg,#101616,#080d0d);display:flex;align-items:center;gap:.75vh;padding:0 .9vh;min-width:0;}
.worldinfo-resource-grid strong{font-size:1.03vh;font-weight:400;white-space:nowrap;}
.resource-icon{display:block;width:2.05vh;height:1.38vh;position:relative;flex:none;filter:drop-shadow(0 .14vh .15vh #000);}
.resource-icon::before,.resource-icon::after{content:"";position:absolute;border-radius:.18vh;transform:skewX(-15deg);}
.resource-icon--wood::before{inset:.25vh .12vh .18vh;background:linear-gradient(90deg,#7a461a,#d0903f,#80501f);box-shadow:.35vh -.16vh 0 #b4752a,-.35vh .16vh 0 #6e3d16;}
.resource-icon--clay::before{inset:.22vh .18vh;background:linear-gradient(135deg,#7f2918,#c85a2d);box-shadow:.45vh .1vh 0 #8f351e,-.38vh .16vh 0 #b34b27;}
.resource-icon--iron::before{inset:.18vh .16vh;background:linear-gradient(135deg,#919699,#3b4248);box-shadow:.38vh .15vh 0 #60686e,-.38vh .12vh 0 #777f84;}
.resource-icon--silver::before{inset:.16vh .14vh;background:linear-gradient(135deg,#d5d8d7,#636b70);box-shadow:.38vh .15vh 0 #878e91,-.38vh .1vh 0 #a8adae;}

.worldinfo-settings-table{height:100%;}
.worldinfo-settings-table>div{grid-template-columns:45% 55%;min-height:3.10vh;font-size:1.25vh;}
.worldinfo-guest-card{margin:1.5vh auto 1.4vh;width:min(72vh,92%);display:grid;grid-template-columns:9vh 1fr;gap:1.6vh;align-items:center;padding:2.2vh 2.4vh;border:1px solid #76511a;background:linear-gradient(180deg,rgba(14,20,19,.95),rgba(4,9,9,.96));box-shadow:inset 0 0 1.2vh #000;}
.worldinfo-guest-emblem{width:8vh;height:8vh;border:1px solid #8a611c;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#3e190d 0,#111817 58%,#050909 100%);box-shadow:inset 0 0 1vh #000,0 0 1vh rgba(173,113,29,.12);}
.worldinfo-guest-emblem span{font-size:3.5vh;color:#e7b14a;text-shadow:0 0 .8vh rgba(229,159,44,.5);}
.worldinfo-guest-card h3{margin:0 0 .6vh;font-size:1.8vh;font-weight:400;color:#e9c978;text-transform:uppercase;}
.worldinfo-guest-card p{margin:0 0 1.2vh;font-size:1.18vh;line-height:1.45;color:#cfb87e;}
.worldinfo-action{min-width:20vh;height:3.5vh;border:1px solid #a27826;background:linear-gradient(#68140d,#3c0807 55%,#180404);color:#f0d69a;font:inherit;font-size:1.08vh;text-transform:uppercase;cursor:pointer;}
.worldinfo-action:hover{border-color:#d2a549;box-shadow:0 0 .6vh rgba(219,152,38,.25);}
.worldinfo-guest-note{width:min(72vh,92%);margin:0 auto;padding:1.25vh 1.5vh;border:1px solid rgba(116,80,24,.7);background:rgba(4,10,10,.67);}
.worldinfo-guest-note strong{font-size:1.18vh;color:#e3c17a;text-transform:uppercase;}
.worldinfo-guest-note p{margin:.38vh 0 0;font-size:1.08vh;color:#baa46f;}

.worldinfo-sidebar{display:grid;grid-template-rows:24.2vh minmax(0,1fr);gap:1.15vh;min-height:0;}
.worldinfo-sidebox{padding:1.25vh 1.5vh 1.35vh;overflow:hidden;}
.worldinfo-sidebox__content{position:relative;z-index:5;height:100%;display:flex;flex-direction:column;min-height:0;}
.worldinfo-sidebox h2{position:relative;margin:.2vh 0 1.05vh;text-align:center;font-size:1.62vh;font-weight:400;text-transform:uppercase;color:#e8c676;}
.worldinfo-sidebox h2::after{content:"";display:block;width:62%;height:1px;margin:.55vh auto 0;background:linear-gradient(90deg,transparent,#8d651f,transparent);}
.worldinfo-view-button{
  height:4.45vh;display:grid;grid-template-columns:3.5vh 1fr;align-items:center;gap:.65vh;padding:0 .8vh;
  border:1px solid #604113;border-bottom-color:#3f2b0d;background:linear-gradient(#111817,#070c0c);color:#e1c17a;
  font:inherit;font-size:1.16vh;text-transform:uppercase;text-align:left;cursor:pointer;
}
.worldinfo-view-button+.worldinfo-view-button{margin-top:.45vh;}
.worldinfo-view-button:hover{border-color:#a37724;}
.worldinfo-view-button.is-active{background:linear-gradient(#6f180f,#3b0807);border-color:#b4802b;color:#f0d598;box-shadow:inset 0 0 .8vh rgba(221,84,27,.16);}
.worldinfo-mini-icon{width:2.4vh;height:2.4vh;display:grid;place-items:center;color:#e0aa3d;font-size:1.3vh;}
.worldinfo-mini-icon--bars{display:flex;align-items:flex-end;justify-content:center;gap:.2vh;}
.worldinfo-world-list{min-height:0;overflow-y:auto;overflow-x:hidden;padding-right:.6vh;scrollbar-width:auto;scrollbar-color:#d9a842 #06100f;scrollbar-gutter:stable both-edges;}
.worldinfo-world-list button{
  width:100%;min-height:2.92vh;display:flex;align-items:center;gap:.7vh;padding:.25vh .75vh;
  border:1px solid transparent;border-bottom-color:rgba(111,78,24,.32);background:transparent;color:#d9bc79;
  font:inherit;font-size:1.05vh;text-align:left;cursor:pointer;
}
.worldinfo-world-list button span{font-size:.72vh;color:#b68123;}
.worldinfo-world-list button:hover{background:rgba(86,55,17,.24);border-color:#76521a;}
.worldinfo-world-list button.is-active{background:linear-gradient(90deg,#56100b,#8b1a10 52%,#4c0d08);border-color:#b77f27;color:#f3d99a;box-shadow:inset 0 0 .65vh rgba(235,92,28,.20);}

/* Medium desktop / browser zoom stability */
@media (hover:hover) and (pointer:fine) and (max-aspect-ratio:4/3){
  .worldinfo-layout{width:min(143vh,92vw);grid-template-columns:minmax(0,1fr) 28vh;}
  .worldinfo-tab{font-size:1.25vh;}
  .worldinfo-stat-row,.worldinfo-settings-table>div{font-size:1.08vh;}
  .worldinfo-resource-grid strong{font-size:.92vh;}
}

@media (min-width:901px) and (max-width:1100px){
  .worldinfo-page{overflow:auto;}
  .worldinfo-stage{height:auto;min-height:960px;overflow:visible;}
  .worldinfo-shell{padding:24px 0 50px;}
  .worldinfo-heading h1{font-size:48px;}
  .worldinfo-heading p{font-size:16px;}
  .worldinfo-layout{position:relative;left:auto;top:auto;transform:none;width:min(94%,860px);height:auto;margin:26px auto 0;display:block;}
  .worldinfo-main{min-height:720px;padding:18px 20px 24px;}
  .worldinfo-main__content{grid-template-rows:58px minmax(0,1fr);}
  .worldinfo-tabs{height:58px;}
  .worldinfo-tab{font-size:14px;}
  .worldinfo-section-title h2{font-size:22px;}
  .worldinfo-stat-row,.worldinfo-settings-table>div{min-height:32px;font-size:13px;}
  .worldinfo-resources{grid-template-columns:1fr;}
  .worldinfo-resource-grid{grid-template-columns:repeat(2,1fr);}
  .worldinfo-resource-grid>div{height:42px;}
  .worldinfo-resource-grid strong{font-size:12px;}
  .worldinfo-sidebar{margin-top:18px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:none;gap:18px;}
  .worldinfo-sidebox{min-height:280px;}
}

@media (max-width:900px){
  .worldinfo-page{overflow:auto;}
  .worldinfo-stage{height:auto;min-height:0;overflow:visible;}
  .worldinfo-shell{padding:28px 0 42px;}
  .worldinfo-heading{padding:0 18px;}
  .worldinfo-heading h1{font-size:40px;}
  .worldinfo-heading p{font-size:15px;line-height:1.35;}
  .worldinfo-layout{position:relative;left:auto;top:auto;transform:none;width:min(94%,720px);height:auto;margin:24px auto 0;display:block;}
  .worldinfo-main{padding:18px 16px 24px;overflow:visible;}
  .worldinfo-main__content{height:auto;display:block;overflow:visible;}
  .worldinfo-tabs{display:grid;grid-template-columns:1fr;height:auto;gap:6px;margin:10px 4px 16px;padding:0 0 12px;}
  .worldinfo-tab{height:46px;font-size:14px;}
  .worldinfo-view{overflow:visible;padding:0 6px 12px;}
  .worldinfo-view.is-active{display:block;}
  .worldinfo-section-title{margin:8px 0 12px;}
  .worldinfo-section-title h2{font-size:20px;white-space:normal;text-align:center;}
  .worldinfo-stat-table,.worldinfo-settings-table{max-height:none;overflow:visible;}
  .worldinfo-stat-row,.worldinfo-settings-table>div{grid-template-columns:1fr;min-height:0;font-size:13px;}
  .worldinfo-stat-row>span,.worldinfo-settings-table>div>span{border-right:0;border-bottom:1px solid rgba(112,80,29,.24);padding:8px 10px 4px;}
  .worldinfo-stat-row>strong,.worldinfo-settings-table>div>strong{padding:5px 10px 8px;}
  .worldinfo-resources{display:block;margin-top:12px;}
  .worldinfo-resources h3{font-size:13px;margin-bottom:8px;}
  .worldinfo-resource-grid{grid-template-columns:1fr 1fr;}
  .worldinfo-resource-grid>div{height:40px;}
  .worldinfo-resource-grid strong{font-size:11px;}
  .worldinfo-guest-card{width:100%;grid-template-columns:1fr;text-align:center;}
  .worldinfo-guest-emblem{margin:auto;}
  .worldinfo-guest-note{width:100%;}
  .worldinfo-sidebar{margin-top:18px;display:block;}
  .worldinfo-sidebox{min-height:0;margin-bottom:16px;padding:18px 20px 22px;}
  .worldinfo-world-list{max-height:270px;overflow-y:auto;}
  .worldinfo-view-button{height:46px;font-size:13px;}
  .worldinfo-world-list button{min-height:36px;font-size:12px;}
}


/* ============================================================
   V100 – Weltinfo Desktop größer / dichter / besser ausgenutzt
   Ziel: weniger tote Fläche, deutlich lesbarere Tabellen und Sidebar.
   ============================================================ */
@media (min-width:1101px){
  .worldinfo-shell{padding-top:1.45vh !important;}

  .worldinfo-heading h1{
    font-size:5.55vh !important;
    margin-bottom:.42vh !important;
  }

  .worldinfo-heading p{
    font-size:1.72vh !important;
  }

  .worldinfo-layout{
    top:10.0vh !important;
    width:min(159vh,94vw) !important;
    height:66.8vh !important;
    grid-template-columns:minmax(0,1fr) 33.2vh !important;
    gap:1.55vh !important;
  }

  .worldinfo-main{
    padding:1.35vh 1.72vh 1.55vh !important;
  }

  .worldinfo-main__content{
    grid-template-rows:5.75vh minmax(0,1fr) !important;
  }

  .worldinfo-tabs{
    gap:.62vh !important;
    padding:0 .52vh .82vh !important;
  }

  .worldinfo-tab{
    font-size:1.58vh !important;
    gap:.82vh !important;
  }

  .worldinfo-tab__icon{
    width:2.35vh !important;
    height:2.35vh !important;
    font-size:1.38vh !important;
  }

  .worldinfo-view{
    padding:1.10vh .62vh .28vh !important;
  }

  .worldinfo-section-title{
    margin:.12vh 0 .92vh !important;
    gap:1.15vh !important;
  }

  .worldinfo-section-title h2{
    font-size:2.36vh !important;
  }

  .worldinfo-stat-table,
  .worldinfo-settings-table{
    overflow-y:auto !important;
  }

  .worldinfo-stat-row,
  .worldinfo-settings-table>div{
    min-height:3.22vh !important;
    font-size:1.34vh !important;
  }

  .worldinfo-stat-row>span,
  .worldinfo-settings-table>div>span{
    padding:.48vh 1.14vh !important;
  }

  .worldinfo-stat-row>strong,
  .worldinfo-settings-table>div>strong{
    padding:.48vh 1.34vh !important;
  }

  .worldinfo-online i{
    width:.82vh !important;
    height:.82vh !important;
  }

  .worldinfo-resources{
    grid-template-columns:20vh 1fr !important;
    gap:1.15vh !important;
    margin-top:.92vh !important;
  }

  .worldinfo-resources h3{
    font-size:1.28vh !important;
  }

  .worldinfo-resource-grid{
    gap:.68vh !important;
  }

  .worldinfo-resource-grid>div{
    height:4.05vh !important;
    gap:.82vh !important;
    padding:0 1.02vh !important;
  }

  .worldinfo-resource-grid strong{
    font-size:1.18vh !important;
  }

  .resource-icon{
    width:2.28vh !important;
    height:1.52vh !important;
  }

  .worldinfo-sidebar{
    grid-template-rows:25.8vh minmax(0,1fr) !important;
    gap:1.25vh !important;
  }

  .worldinfo-sidebox{
    padding:1.38vh 1.62vh 1.48vh !important;
  }

  .worldinfo-sidebox h2{
    font-size:1.84vh !important;
    margin:.24vh 0 1.16vh !important;
  }

  .worldinfo-view-button{
    height:4.95vh !important;
    grid-template-columns:3.8vh 1fr !important;
    gap:.75vh !important;
    padding:0 .92vh !important;
    font-size:1.28vh !important;
  }

  .worldinfo-mini-icon{
    width:2.65vh !important;
    height:2.65vh !important;
    font-size:1.45vh !important;
  }

  .worldinfo-world-list{
    padding-right:.42vh !important;
  }

  .worldinfo-world-list button{
    min-height:3.42vh !important;
    gap:.78vh !important;
    padding:.32vh .88vh !important;
    font-size:1.18vh !important;
  }

  .worldinfo-world-list button span{
    font-size:.82vh !important;
  }
}

/* 4:3 / stark gezoomte Desktopansichten: groß bleiben, aber sauber einpassen. */
@media (hover:hover) and (pointer:fine) and (min-width:1101px) and (max-aspect-ratio:4/3){
  .worldinfo-layout{
    width:min(149vh,94vw) !important;
    grid-template-columns:minmax(0,1fr) 30.5vh !important;
  }
  .worldinfo-stat-row,.worldinfo-settings-table>div{
    font-size:1.20vh !important;
    min-height:3.05vh !important;
  }
  .worldinfo-tab{font-size:1.38vh !important;}
  .worldinfo-world-list button{font-size:1.08vh !important;}
}


/* ============================================================
   V101 – Weltinfo: harte Inhaltszonen + zusätzliche Legacy-Statistiken
   + Rundenziele. Jeder Bereich besitzt seinen eigenen Container und
   darf die goldene Box nicht verlassen.
   ============================================================ */

@media (min-width:1101px){
  .worldinfo-tabs{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }

  .worldinfo-tab{
    min-width:0 !important;
    overflow:hidden !important;
  }

  .worldinfo-tab > span:last-child{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  .worldinfo-view.is-active{
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) auto !important;
    min-height:0 !important;
    min-width:0 !important;
    overflow:hidden !important;
    contain:layout paint;
  }

  .worldinfo-view--settings.is-active,
  .worldinfo-view--guest.is-active{
    grid-template-rows:auto minmax(0,1fr) !important;
  }

  .worldinfo-region{
    min-width:0 !important;
    min-height:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  .worldinfo-region--header{
    flex:none;
  }

  .worldinfo-region--body{
    min-height:0 !important;
  }

  .worldinfo-region--scroll{
    overflow:hidden !important;
    overscroll-behavior:contain;
  }

  .worldinfo-view--stats .worldinfo-region--scroll .worldinfo-stat-table,
  .worldinfo-view--settings .worldinfo-region--scroll .worldinfo-settings-table{
    width:100% !important;
    height:100% !important;
    max-height:100% !important;
    min-height:0 !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    box-sizing:border-box;
  }

  .worldinfo-view--guest .worldinfo-region--scroll,
  .worldinfo-view--goal .worldinfo-region--scroll{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-right:.35vh;
    scrollbar-width:thin;
    scrollbar-color:#b17d25 #06100f;
  }

  .worldinfo-view--guest .worldinfo-region--scroll::-webkit-scrollbar,
  .worldinfo-view--goal .worldinfo-region--scroll::-webkit-scrollbar{width:.63vh;}
  .worldinfo-view--guest .worldinfo-region--scroll::-webkit-scrollbar-track,
  .worldinfo-view--goal .worldinfo-region--scroll::-webkit-scrollbar-track{background:#06100f;}
  .worldinfo-view--guest .worldinfo-region--scroll::-webkit-scrollbar-thumb,
  .worldinfo-view--goal .worldinfo-region--scroll::-webkit-scrollbar-thumb{background:linear-gradient(#dfb24d,#8b5e17);border:1px solid #4a310e;}

  .worldinfo-region--footer{
    max-height:6.0vh !important;
    overflow:hidden !important;
  }

  .worldinfo-resources{
    width:100%;
    min-width:0;
    overflow:hidden;
  }

  .worldinfo-resource-grid{
    min-width:0;
  }

  .worldinfo-resource-grid>div{
    min-width:0 !important;
    overflow:hidden !important;
  }

  .worldinfo-resource-grid strong{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .worldinfo-stat-row,
  .worldinfo-settings-table>div{
    min-width:0;
  }

  .worldinfo-stat-row>span,
  .worldinfo-stat-row>strong,
  .worldinfo-settings-table>div>span,
  .worldinfo-settings-table>div>strong{
    min-width:0;
    overflow-wrap:anywhere;
  }

  /* 4 buttons on the right get their own fixed zone. */
  .worldinfo-sidebar{
    grid-template-rows:31.4vh minmax(0,1fr) !important;
    overflow:hidden;
  }

  .worldinfo-sidebox,
  .worldinfo-sidebox__content{
    min-height:0;
    overflow:hidden !important;
  }

  .worldinfo-sidebox--view .worldinfo-sidebox__content{
    display:grid !important;
    grid-template-rows:auto repeat(4,minmax(0,1fr)) !important;
    gap:.45vh;
  }

  .worldinfo-sidebox--view .worldinfo-view-button{
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    overflow:hidden;
  }

  .worldinfo-sidebox--worlds .worldinfo-sidebox__content{
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) !important;
  }

  .worldinfo-world-list{
    min-height:0 !important;
    max-height:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  /* Rundenziel */
  .worldinfo-goal-overview{
    display:grid;
    grid-template-columns:8.2vh minmax(0,1fr);
    gap:1.45vh;
    align-items:center;
    padding:1.15vh 1.35vh;
    border:1px solid rgba(126,88,27,.72);
    background:linear-gradient(180deg,rgba(17,24,23,.92),rgba(5,10,10,.92));
    box-shadow:inset 0 0 1.1vh rgba(0,0,0,.58);
  }

  .worldinfo-goal-seal{
    width:7.1vh;height:7.1vh;border-radius:50%;
    display:grid;place-items:center;
    border:1px solid #a57624;
    color:#eac057;font-size:3.5vh;
    background:radial-gradient(circle,#6a220f 0,#171b18 57%,#050909 100%);
    box-shadow:inset 0 0 1vh #000,0 0 .7vh rgba(198,126,27,.18);
  }

  .worldinfo-goal-overview__copy{min-width:0;}
  .worldinfo-goal-overview__copy>span{display:block;font-size:1.02vh;color:#bda56c;text-transform:uppercase;margin-bottom:.18vh;}
  .worldinfo-goal-overview__copy h3{margin:0 0 .35vh;font-size:2.0vh;font-weight:400;color:#efd18a;text-transform:uppercase;}
  .worldinfo-goal-overview__copy p{margin:0;font-size:1.16vh;line-height:1.43;color:#cdb67e;overflow-wrap:anywhere;}

  .worldinfo-goal-metrics{
    display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75vh;
    margin-top:.85vh;
  }
  .worldinfo-goal-metrics>div{
    min-width:0;padding:.78vh .9vh;border:1px solid rgba(114,80,26,.65);
    background:rgba(4,10,10,.72);overflow:hidden;
  }
  .worldinfo-goal-metrics span{display:block;font-size:.96vh;text-transform:uppercase;color:#aa935f;margin-bottom:.25vh;}
  .worldinfo-goal-metrics strong{display:block;font-size:1.20vh;font-weight:400;color:#ebcf8a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

  .worldinfo-goal-progress{margin-top:.85vh;padding:.75vh .9vh;border:1px solid rgba(113,78,24,.62);background:rgba(3,8,8,.58);}
  .worldinfo-goal-progress__top{display:flex;justify-content:space-between;gap:1vh;font-size:1.05vh;color:#d5b873;margin-bottom:.48vh;}
  .worldinfo-goal-progress__track{height:1.45vh;border:1px solid #6f4c18;background:#07100f;overflow:hidden;box-shadow:inset 0 0 .55vh #000;}
  .worldinfo-goal-progress__track i{display:block;height:100%;background:linear-gradient(90deg,#67120c,#b22b17 55%,#e5aa35);box-shadow:0 0 .8vh rgba(225,118,31,.32);}

  .worldinfo-goal-types{margin-top:.85vh;padding:.8vh .9vh;border:1px solid rgba(112,78,24,.54);background:rgba(4,9,9,.58);}
  .worldinfo-goal-types h3{margin:0 0 .55vh;font-size:1.25vh;font-weight:400;color:#e4c477;text-transform:uppercase;}
  .worldinfo-goal-type-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5vh;}
  .worldinfo-goal-type-grid span{min-width:0;padding:.5vh .65vh;border:1px solid rgba(102,72,24,.55);font-size:1.0vh;color:#cbb177;background:rgba(12,18,17,.78);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  .worldinfo-goal-note{height:3.45vh;display:flex;align-items:center;justify-content:center;gap:.7vh;border:1px solid rgba(116,80,24,.66);background:rgba(5,10,10,.78);font-size:1.02vh;color:#c9ae72;overflow:hidden;padding:0 1vh;text-align:center;}
  .worldinfo-goal-note>span:first-child{color:#d9a33e;flex:none;}
}

/* At narrow desktop widths, preserve the zones and let their interiors scroll. */
@media (min-width:901px) and (max-width:1100px){
  .worldinfo-tabs{grid-template-columns:repeat(2,1fr) !important;height:auto !important;}
  .worldinfo-main__content{grid-template-rows:auto minmax(0,1fr) !important;}
  .worldinfo-view.is-active{display:grid !important;grid-template-rows:auto minmax(0,1fr) auto !important;}
  .worldinfo-view--settings.is-active,.worldinfo-view--guest.is-active{grid-template-rows:auto minmax(0,1fr) !important;}
  .worldinfo-region--scroll{overflow:auto !important;}
  .worldinfo-goal-metrics{grid-template-columns:1fr 1fr;}
  .worldinfo-goal-type-grid{grid-template-columns:1fr 1fr;}
}

@media (max-width:900px){
  .worldinfo-tabs{grid-template-columns:1fr !important;}
  .worldinfo-region{overflow:visible !important;}
  .worldinfo-region--scroll{overflow:visible !important;}
  .worldinfo-goal-overview{display:grid;grid-template-columns:70px 1fr;gap:12px;padding:12px;border:1px solid rgba(126,88,27,.72);background:rgba(5,10,10,.88);}
  .worldinfo-goal-seal{width:64px;height:64px;border-radius:50%;display:grid;place-items:center;border:1px solid #a57624;color:#eac057;font-size:30px;}
  .worldinfo-goal-overview__copy h3{font-size:19px;margin:0 0 6px;color:#efd18a;}
  .worldinfo-goal-overview__copy p{font-size:13px;line-height:1.4;color:#cdb67e;margin:0;}
  .worldinfo-goal-metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px;}
  .worldinfo-goal-metrics>div{border:1px solid rgba(114,80,26,.65);padding:8px;background:rgba(4,10,10,.72);}
  .worldinfo-goal-metrics span,.worldinfo-goal-metrics strong{display:block;}
  .worldinfo-goal-progress,.worldinfo-goal-types{margin-top:10px;padding:10px;border:1px solid rgba(113,78,24,.62);background:rgba(3,8,8,.64);}
  .worldinfo-goal-progress__track{height:14px;border:1px solid #6f4c18;background:#07100f;overflow:hidden;}
  .worldinfo-goal-progress__track i{display:block;height:100%;background:linear-gradient(90deg,#67120c,#b22b17 55%,#e5aa35);}
  .worldinfo-goal-type-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px;}
  .worldinfo-goal-type-grid span{border:1px solid rgba(102,72,24,.55);padding:6px;color:#cbb177;background:rgba(12,18,17,.78);}
  .worldinfo-goal-note{margin-top:10px;padding:8px;border:1px solid rgba(116,80,24,.66);background:rgba(5,10,10,.78);color:#c9ae72;}
}


/* ============================================================
   V102 – Weltinfo: jede Box besitzt ihren eigenen Bereich.
   Statistik erweitert um Truppen insgesamt, Durchschnitt pro Spieler/Burg
   sowie neueste Spieler/Allianz. Keine Zone darf eine andere überlagern.
   ============================================================ */

@media (min-width:1101px){
  .worldinfo-layout{
    grid-template-columns:minmax(0,1fr) 30.5vh !important;
    align-items:stretch !important;
    overflow:hidden !important;
  }

  .worldinfo-layout > *,
  .worldinfo-main,
  .worldinfo-main__content,
  .worldinfo-sidebar,
  .worldinfo-sidebox,
  .worldinfo-sidebox__content{
    min-width:0 !important;
    min-height:0 !important;
    max-width:100% !important;
    max-height:100% !important;
    box-sizing:border-box !important;
  }

  .worldinfo-main{
    overflow:hidden !important;
    contain:layout paint;
  }

  .worldinfo-sidebar{
    display:grid !important;
    grid-template-rows:31.0% minmax(0,69.0%) !important;
    gap:1.15vh !important;
    overflow:hidden !important;
    contain:layout paint;
  }

  .worldinfo-sidebox{
    width:100% !important;
    height:100% !important;
    overflow:hidden !important;
    contain:layout paint;
  }

  .worldinfo-sidebox--view .worldinfo-sidebox__content{
    grid-template-rows:auto repeat(4,minmax(0,1fr)) !important;
    overflow:hidden !important;
  }

  .worldinfo-sidebox--worlds .worldinfo-sidebox__content{
    grid-template-rows:auto minmax(0,1fr) !important;
    overflow:hidden !important;
  }

  .worldinfo-world-list{
    height:100% !important;
    min-height:0 !important;
    max-height:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
  }

  /* Stats: header fixed; everything below lives in ONE scroll region. */
  .worldinfo-view--stats.is-active{
    grid-template-rows:auto minmax(0,1fr) !important;
    overflow:hidden !important;
  }

  .worldinfo-view--stats .worldinfo-region--body{
    min-height:0 !important;
    overflow:hidden !important;
  }

  .worldinfo-stats-scroll{
    height:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-right:.42vh !important;
    scrollbar-width:thin;
    scrollbar-color:#b17d25 #06100f;
    overscroll-behavior:contain;
  }

  .worldinfo-stats-scroll::-webkit-scrollbar{width:.64vh;}
  .worldinfo-stats-scroll::-webkit-scrollbar-track{background:#06100f;}
  .worldinfo-stats-scroll::-webkit-scrollbar-thumb{background:linear-gradient(#dfb24d,#8b5e17);border:1px solid #4a310e;}

  .worldinfo-stats-stack{
    width:100%;
    min-width:0;
    display:grid;
    grid-template-columns:minmax(0,1fr);
    gap:.78vh;
    padding-bottom:.35vh;
  }

  .worldinfo-stat-zone{
    position:relative;
    width:100%;
    min-width:0;
    overflow:hidden;
    border:1px solid rgba(126,88,27,.72);
    background:linear-gradient(180deg,rgba(8,14,14,.91),rgba(2,7,8,.92));
    box-shadow:inset 0 0 1.0vh rgba(0,0,0,.60);
    box-sizing:border-box;
  }

  .worldinfo-stat-zone__title{
    margin:0;
    min-height:3.25vh;
    padding:.62vh 1.0vh .52vh;
    display:flex;
    align-items:center;
    justify-content:center;
    border-bottom:1px solid rgba(131,91,28,.55);
    color:#e8c879;
    font-size:1.28vh;
    line-height:1.12;
    font-weight:400;
    text-align:center;
    text-transform:uppercase;
    letter-spacing:.025em;
    background:linear-gradient(180deg,rgba(41,27,11,.36),rgba(3,8,8,.18));
    overflow:hidden;
  }

  .worldinfo-view--stats .worldinfo-stat-table{
    width:100% !important;
    height:auto !important;
    max-height:none !important;
    overflow:visible !important;
    border:0 !important;
    background:transparent !important;
  }

  .worldinfo-stat-zone--overview .worldinfo-stat-table{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .worldinfo-stat-zone--overview .worldinfo-stat-row{
    grid-template-columns:48% 52% !important;
    min-height:2.8vh !important;
  }

  .worldinfo-stat-zone--overview .worldinfo-stat-row:nth-child(odd){
    border-right:1px solid rgba(112,80,29,.38);
  }

  .worldinfo-stat-zone--resources{
    padding-bottom:.72vh;
  }

  .worldinfo-resource-grid--zone{
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
    gap:.6vh !important;
    padding:.72vh .8vh 0 !important;
  }

  .worldinfo-resource-grid--zone>div{
    height:4.2vh !important;
  }

  .worldinfo-troop-grid{
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:.58vh;
    padding:.78vh .82vh .86vh;
    min-width:0;
  }

  .worldinfo-troop-card{
    min-width:0;
    height:6.75vh;
    display:grid;
    grid-template-columns:3.45vh minmax(0,1fr);
    grid-template-rows:1fr auto;
    column-gap:.65vh;
    align-items:center;
    padding:.5vh .62vh;
    border:1px solid rgba(122,84,26,.62);
    background:linear-gradient(180deg,rgba(18,25,24,.93),rgba(4,9,9,.96));
    box-shadow:inset 0 0 .8vh rgba(0,0,0,.55);
    overflow:hidden;
  }

  .worldinfo-troop-card img{
    grid-row:1 / 3;
    width:3.2vh;
    height:3.2vh;
    object-fit:contain;
    filter:drop-shadow(0 .15vh .18vh rgba(0,0,0,.75));
  }

  .worldinfo-troop-card strong{
    min-width:0;
    align-self:end;
    color:#f0d38b;
    font-size:1.18vh;
    font-weight:400;
    line-height:1.08;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .worldinfo-troop-card span{
    min-width:0;
    align-self:start;
    color:#9e885b;
    font-size:.78vh;
    line-height:1.04;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .worldinfo-average-zones{
    min-width:0;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:.78vh;
  }

  .worldinfo-troop-grid--average{
    grid-template-columns:repeat(5,minmax(0,1fr));
    gap:.48vh;
    padding:.64vh;
  }

  .worldinfo-troop-grid--average .worldinfo-troop-card{
    height:5.8vh;
    grid-template-columns:2.75vh minmax(0,1fr);
    padding:.38vh .45vh;
  }

  .worldinfo-troop-grid--average .worldinfo-troop-card img{
    width:2.55vh;
    height:2.55vh;
  }

  .worldinfo-troop-grid--average .worldinfo-troop-card strong{font-size:1.02vh;}
  .worldinfo-troop-grid--average .worldinfo-troop-card span{display:none;}

  .worldinfo-stat-zone--meta{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:0;
  }

  .worldinfo-meta-card{
    min-width:0;
    min-height:6.2vh;
    display:grid;
    grid-template-columns:4.3vh minmax(0,1fr);
    grid-template-rows:1fr 1fr;
    align-items:center;
    column-gap:.75vh;
    padding:.65vh 1.0vh;
    border-right:1px solid rgba(121,84,27,.55);
    overflow:hidden;
  }

  .worldinfo-meta-card:last-child{border-right:0;}
  .worldinfo-meta-card img{grid-row:1/3;width:3.6vh;height:3.6vh;object-fit:contain;}
  .worldinfo-meta-card>span:not(.worldinfo-meta-clock){align-self:end;color:#b79e68;font-size:.92vh;text-transform:uppercase;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .worldinfo-meta-card strong{align-self:start;color:#efd18a;font-size:1.14vh;font-weight:400;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
  .worldinfo-meta-clock{grid-row:1/3;width:3.6vh;height:3.6vh;display:grid;place-items:center;border:1px solid #8f6320;border-radius:50%;color:#d7a43b;font-size:2.1vh;}
}

@media (min-width:901px) and (max-width:1100px){
  .worldinfo-view--stats.is-active{grid-template-rows:auto minmax(0,1fr) !important;}
  .worldinfo-stats-scroll{overflow-y:auto !important;overflow-x:hidden !important;}
  .worldinfo-stat-zone--overview .worldinfo-stat-table{display:block;}
  .worldinfo-stat-zone--overview .worldinfo-stat-row:nth-child(odd){border-right:0;}
  .worldinfo-troop-grid{grid-template-columns:repeat(4,minmax(0,1fr));}
  .worldinfo-average-zones{grid-template-columns:1fr;}
  .worldinfo-stat-zone--meta{grid-template-columns:1fr;}
  .worldinfo-meta-card{border-right:0;border-bottom:1px solid rgba(121,84,27,.55);}
  .worldinfo-meta-card:last-child{border-bottom:0;}
}

@media (max-width:900px){
  .worldinfo-stats-stack{display:grid;gap:10px;}
  .worldinfo-stat-zone{border:1px solid rgba(126,88,27,.72);background:rgba(3,8,8,.9);overflow:hidden;}
  .worldinfo-stat-zone__title{margin:0;padding:10px;text-align:center;color:#e8c879;border-bottom:1px solid rgba(131,91,28,.55);}
  .worldinfo-troop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;padding:8px;}
  .worldinfo-troop-card{display:grid;grid-template-columns:42px 1fr;align-items:center;gap:8px;padding:8px;border:1px solid rgba(122,84,26,.62);background:#07100f;overflow:hidden;}
  .worldinfo-troop-card img{width:38px;height:38px;grid-row:1/3;}
  .worldinfo-troop-card strong{font-weight:400;color:#f0d38b;}
  .worldinfo-troop-card span{font-size:11px;color:#9e885b;}
  .worldinfo-average-zones{display:grid;grid-template-columns:1fr;gap:10px;}
  .worldinfo-stat-zone--meta{display:grid;grid-template-columns:1fr;}
  .worldinfo-meta-card{display:grid;grid-template-columns:42px 1fr;gap:8px;padding:10px;border-bottom:1px solid rgba(121,84,27,.55);}
  .worldinfo-meta-card img{width:36px;height:36px;grid-row:1/3;}
  .worldinfo-meta-card strong{font-weight:400;color:#efd18a;}
  .worldinfo-meta-clock{grid-row:1/3;display:grid;place-items:center;width:36px;height:36px;border:1px solid #8f6320;border-radius:50%;}
}


/* ============================================================
   V103 – Weltinfo: echte Truppen-Assets + strikt getrennte Sidebar-Zonen
   ============================================================ */

@media (min-width:1101px){
  /* WICHTIG: Prozentzeilen dürfen zusammen mit dem gap niemals >100% werden.
     Die zweite Zeile nimmt nur den tatsächlich verbleibenden Platz ein. */
  .worldinfo-sidebar{
    grid-template-rows:minmax(0,31%) minmax(0,1fr) !important;
    gap:1.55vh !important;
    overflow:hidden !important;
  }

  .worldinfo-sidebox{
    position:relative !important;
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  /* Ornamente bleiben vollständig IN ihrer jeweiligen Box. */
  .worldinfo-sidebox .worldinfo-frame-parts--mini{
    inset:.24vh !important;
    overflow:hidden !important;
  }
  .worldinfo-sidebox .worldinfo-frame-parts--mini .worldinfo-frame-corner{
    width:5.8vh !important;
    height:5.8vh !important;
  }
  .worldinfo-sidebox .worldinfo-frame-parts--mini .worldinfo-frame-corner--tl{left:0 !important;top:0 !important;}
  .worldinfo-sidebox .worldinfo-frame-parts--mini .worldinfo-frame-corner--tr{right:0 !important;top:0 !important;}
  .worldinfo-sidebox .worldinfo-frame-parts--mini .worldinfo-frame-corner--bl{left:0 !important;bottom:0 !important;}
  .worldinfo-sidebox .worldinfo-frame-parts--mini .worldinfo-frame-corner--br{right:0 !important;bottom:0 !important;}
  .worldinfo-sidebox .worldinfo-frame-parts--mini .worldinfo-frame-rail--top,
  .worldinfo-sidebox .worldinfo-frame-parts--mini .worldinfo-frame-rail--bottom{
    left:4.2vh !important;
    right:4.2vh !important;
  }
  .worldinfo-sidebox .worldinfo-frame-parts--mini .worldinfo-frame-rail--left,
  .worldinfo-sidebox .worldinfo-frame-parts--mini .worldinfo-frame-rail--right{
    top:4.1vh !important;
    bottom:4.1vh !important;
  }

  .worldinfo-sidebox__content{
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }

  .worldinfo-sidebox--view .worldinfo-sidebox__content{
    display:grid !important;
    grid-template-rows:3.25vh repeat(4,minmax(0,1fr)) !important;
    gap:.34vh !important;
    padding:.10vh 0 .15vh !important;
  }
  .worldinfo-sidebox--view h2{
    margin:0 !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  .worldinfo-sidebox--view .worldinfo-view-button{
    width:100% !important;
    max-width:100% !important;
    height:auto !important;
    min-height:0 !important;
    margin:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  .worldinfo-sidebox--view .worldinfo-view-button > span:last-child{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  .worldinfo-sidebox--worlds .worldinfo-sidebox__content{
    display:grid !important;
    grid-template-rows:3.9vh minmax(0,1fr) !important;
    gap:.2vh !important;
  }
  .worldinfo-sidebox--worlds h2{margin:0 !important;overflow:hidden !important;}
  .worldinfo-world-list{
    width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    max-width:100% !important;
    max-height:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    box-sizing:border-box !important;
  }
  .worldinfo-world-list button{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }

  /* Realistische Browsergame-Truppenicons. */
  .worldinfo-troop-grid{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:.62vh !important;
  }
  .worldinfo-troop-card{
    height:7.45vh !important;
    grid-template-columns:5.35vh minmax(0,1fr) !important;
    column-gap:.62vh !important;
    padding:.36vh .58vh !important;
  }
  .worldinfo-troop-card img{
    width:5.05vh !important;
    height:5.05vh !important;
    object-fit:contain !important;
    filter:drop-shadow(0 .18vh .22vh rgba(0,0,0,.82)) !important;
  }
  .worldinfo-troop-card strong{
    font-size:1.10vh !important;
  }
  .worldinfo-troop-card span{
    font-size:.78vh !important;
  }

  .worldinfo-troop-grid--average{
    grid-template-columns:repeat(5,minmax(0,1fr)) !important;
    gap:.45vh !important;
  }
  .worldinfo-troop-grid--average .worldinfo-troop-card{
    height:5.9vh !important;
    grid-template-columns:3.75vh minmax(0,1fr) !important;
    padding:.30vh .40vh !important;
  }
  .worldinfo-troop-grid--average .worldinfo-troop-card img{
    width:3.55vh !important;
    height:3.55vh !important;
  }
  .worldinfo-troop-grid--average .worldinfo-troop-card strong{
    font-size:.98vh !important;
  }
}

@media (min-width:901px) and (max-width:1100px){
  .worldinfo-sidebar{
    grid-template-rows:auto auto !important;
    gap:18px !important;
    overflow:visible !important;
  }
  .worldinfo-sidebox{overflow:hidden !important;}
  .worldinfo-troop-grid{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}

@media (max-width:900px){
  .worldinfo-troop-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .worldinfo-troop-card img{object-fit:contain !important;}
}


/* ============================================================
   V104 – Weltinfo: realistische Ressourcen-Icons + eigene
   Scrollbereiche für jede Truppenübersicht.
   ============================================================ */

@media (min-width:1101px){
  /* Ressourcenkacheln bleiben ein eigener, nicht überlaufender Bereich. */
  .worldinfo-stat-zone--resources{
    overflow:hidden !important;
    contain:layout paint;
  }

  .worldinfo-resource-grid--zone>div{
    display:flex !important;
    align-items:center !important;
    min-width:0 !important;
    overflow:hidden !important;
  }

  .resource-icon-img{
    width:3.35vh !important;
    height:3.35vh !important;
    flex:0 0 3.35vh !important;
    object-fit:contain !important;
    display:block !important;
    filter:drop-shadow(0 .18vh .22vh rgba(0,0,0,.82));
  }

  .worldinfo-resource-grid--zone strong{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  /* Jede Truppen-Zone besitzt ihren eigenen Body. Die Überschrift bleibt fest. */
  .worldinfo-stat-zone--troops,
  .worldinfo-stat-zone--average{
    display:grid !important;
    grid-template-rows:auto minmax(0,1fr) !important;
    min-height:0 !important;
    overflow:hidden !important;
    contain:layout paint;
  }

  .worldinfo-stat-zone--troops{
    height:20.8vh !important;
  }

  .worldinfo-stat-zone--average{
    height:16.8vh !important;
  }

  .worldinfo-troop-scroll{
    min-width:0 !important;
    min-height:0 !important;
    width:100% !important;
    height:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    overscroll-behavior:contain !important;
    scrollbar-width:auto !important;
    scrollbar-color:#d9a842 #06100f !important;
    scrollbar-gutter:stable both-edges !important;
    padding-right:.7vh !important;
    box-sizing:border-box !important;
  }

  .worldinfo-troop-scroll::-webkit-scrollbar{
    width:1.35vh !important;
    min-width:14px !important;
  }
  .worldinfo-troop-scroll::-webkit-scrollbar-track{
    background:linear-gradient(90deg,#030706,#09120f,#030706) !important;
    border-left:1px solid rgba(98,67,22,.38) !important;
    box-shadow:inset 0 0 .2vh rgba(255,220,138,.08) !important;
  }
  .worldinfo-troop-scroll::-webkit-scrollbar-thumb{
    min-height:5.6vh !important;
    border:1px solid #4e350f !important;
    background:linear-gradient(90deg,#765019,#d1a03f 48%,#765019) !important;
    box-shadow:inset 0 0 .24vh rgba(255,231,163,.34) !important, 0 0 .18vh rgba(0,0,0,.35) !important;
  }
  .worldinfo-troop-scroll::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(90deg,#93651f,#e4b750 48%,#93651f) !important;
  }

  /* Das Grid darf innerhalb des Scroll-Bodys natürlich höher werden. */
  .worldinfo-troop-scroll .worldinfo-troop-grid{
    height:auto !important;
    min-height:max-content !important;
    padding-right:.52vh !important;
  }

  /* Eigene Durchschnittsboxen bleiben in ihrer Hälfte und können nicht überlappen. */
  .worldinfo-average-zones{
    min-width:0 !important;
    overflow:hidden !important;
    align-items:stretch !important;
  }
  .worldinfo-average-zones > .worldinfo-stat-zone{
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
  }

  /* Auch der übergeordnete Statistikbereich bleibt scrollbar, falls die komplette
     Sammlung auf kleineren Desktop-Höhen höher als der verfügbare Bereich wird. */
  .worldinfo-stats-scroll{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    scrollbar-width:auto !important;
    scrollbar-color:#d9a842 #06100f !important;
  }
  .worldinfo-stats-scroll::-webkit-scrollbar{width:1.1vh !important; min-width:12px !important;}
  .worldinfo-stats-scroll::-webkit-scrollbar-track{background:#06100f !important; box-shadow:inset 0 0 .2vh rgba(255,220,138,.08) !important;}
  .worldinfo-stats-scroll::-webkit-scrollbar-thumb{
    background:linear-gradient(#dfb24d,#8b5e17) !important;
    border:1px solid #4a310e !important;
  }
}

@media (min-width:901px) and (max-width:1100px){
  .resource-icon-img{width:34px;height:34px;object-fit:contain;flex:none;}
  .worldinfo-troop-scroll{
    max-height:260px;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    scrollbar-width:auto;
    scrollbar-color:#d9a842 #06100f;
  }
}

@media (max-width:900px){
  .resource-icon-img{width:32px;height:32px;object-fit:contain;flex:none;}
  .worldinfo-troop-scroll{
    max-height:360px;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    scrollbar-width:auto;
    scrollbar-color:#d9a842 #06100f;
  }
}


/* ============================================================
   V106 – EINE Scrollbar für den kompletten linken Weltinfo-Inhalt
   Keine verschachtelten Scrollbars mehr in den Truppenblöcken.
   Tabs + Welt-Titel bleiben oben, der gesamte Inhalt darunter scrollt.
   ============================================================ */

@media (min-width:1101px){
  /* Der komplette Body der aktiven linken Ansicht ist die einzige Scrollfläche. */
  .worldinfo-view--stats.is-active{
    min-height:0 !important;
    overflow:hidden !important;
  }

  .worldinfo-view--stats .worldinfo-region--body.worldinfo-stats-scroll{
    min-height:0 !important;
    height:100% !important;
    overflow-y:auto !important;
    overflow-x:hidden !important;
    padding-right:.75vh !important;
    scrollbar-width:auto !important;
    scrollbar-color:#d9a842 #06100f !important;
    scrollbar-gutter:stable !important;
    overscroll-behavior:contain !important;
  }

  .worldinfo-view--stats .worldinfo-region--body.worldinfo-stats-scroll::-webkit-scrollbar{
    width:1.25vh !important;
    min-width:13px !important;
  }
  .worldinfo-view--stats .worldinfo-region--body.worldinfo-stats-scroll::-webkit-scrollbar-track{
    background:linear-gradient(90deg,#030706,#09120f,#030706) !important;
    border-left:1px solid rgba(98,67,22,.42) !important;
    box-shadow:inset 0 0 .22vh rgba(255,220,138,.08) !important;
  }
  .worldinfo-view--stats .worldinfo-region--body.worldinfo-stats-scroll::-webkit-scrollbar-thumb{
    min-height:6.2vh !important;
    border:1px solid #4e350f !important;
    background:linear-gradient(90deg,#765019,#d5a541 48%,#765019) !important;
    box-shadow:inset 0 0 .25vh rgba(255,231,163,.34) !important;
  }
  .worldinfo-view--stats .worldinfo-region--body.worldinfo-stats-scroll::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(90deg,#956820,#e8bb52 48%,#956820) !important;
  }

  /* Die einzelnen Sektionen wachsen natürlich nach Inhalt. */
  .worldinfo-stat-zone--troops,
  .worldinfo-stat-zone--average{
    display:block !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:hidden !important;
    contain:layout paint !important;
  }

  /* Keine eigene Scrollbar mehr in Truppen / Durchschnitt. */
  .worldinfo-troop-scroll,
  .worldinfo-troop-scroll--total,
  .worldinfo-troop-scroll--average{
    width:100% !important;
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    padding-right:0 !important;
    scrollbar-width:none !important;
    scrollbar-gutter:auto !important;
  }
  .worldinfo-troop-scroll::-webkit-scrollbar,
  .worldinfo-troop-scroll--total::-webkit-scrollbar,
  .worldinfo-troop-scroll--average::-webkit-scrollbar{
    display:none !important;
    width:0 !important;
    height:0 !important;
  }

  .worldinfo-troop-scroll .worldinfo-troop-grid{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
    padding-right:0 !important;
  }

  /* Etwas Luft am Ende, damit die letzte Zeile nicht am Rahmen klebt. */
  .worldinfo-stats-stack{
    padding-bottom:1.0vh !important;
  }
}

/* Auch bei kleineren Desktopbreiten: nur eine linke Scrollfläche. */
@media (min-width:901px) and (max-width:1100px){
  .worldinfo-troop-scroll{
    max-height:none !important;
    height:auto !important;
    overflow:visible !important;
    scrollbar-width:none !important;
  }
  .worldinfo-troop-scroll::-webkit-scrollbar{display:none !important;}
  .worldinfo-stats-scroll{
    overflow-y:auto !important;
    overflow-x:hidden !important;
    scrollbar-width:auto !important;
    scrollbar-color:#d9a842 #06100f !important;
  }
  .worldinfo-stats-scroll::-webkit-scrollbar{width:13px !important;}
  .worldinfo-stats-scroll::-webkit-scrollbar-thumb{min-height:52px !important;}
}


/* ============================================================
   V107 – Weltinfo: harte Inhaltszonen + dezente Scrollbars
   Tabs und rechte Ansicht bleiben sicher innerhalb ihrer Goldrahmen.
   ============================================================ */
@media (min-width:1101px){
  /* Hauptbox: Inhalt darf den dekorativen Rand niemals übermalen. */
  .worldinfo-main{
    overflow:hidden !important;
  }
  .worldinfo-main__content{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    overflow:hidden !important;
    box-sizing:border-box !important;
  }
  .worldinfo-tabs{
    width:auto !important;
    max-width:none !important;
    min-width:0 !important;
    margin:.20vh .90vh 0 !important;
    padding:0 0 .72vh !important;
    gap:.58vh !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
    grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  }
  .worldinfo-tab{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  .worldinfo-tab > span:last-child{
    min-width:0 !important;
    max-width:100% !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  /* Rechte Sidebar: jede Box ist eine eigene, abgeschlossene Zone. */
  .worldinfo-sidebar{
    grid-template-rows:23.0vh minmax(0,1fr) !important;
    gap:1.55vh !important;
    overflow:hidden !important;
  }
  .worldinfo-sidebox{
    overflow:hidden !important;
    contain:layout paint !important;
  }
  .worldinfo-sidebox--view .worldinfo-sidebox__content{
    width:100% !important;
    max-width:100% !important;
    height:100% !important;
    min-width:0 !important;
    min-height:0 !important;
    padding:.35vh .55vh .90vh !important;
    grid-template-rows:3.05vh repeat(4,minmax(0,1fr)) !important;
    gap:.30vh !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  .worldinfo-sidebox--view h2{
    width:100% !important;
    max-width:100% !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  .worldinfo-sidebox--view .worldinfo-view-button{
    width:100% !important;
    max-width:100% !important;
    min-width:0 !important;
    height:100% !important;
    min-height:0 !important;
    padding:0 .72vh !important;
    margin:0 !important;
    box-sizing:border-box !important;
    overflow:hidden !important;
  }
  .worldinfo-sidebox--view .worldinfo-view-button > span:last-child{
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    white-space:nowrap !important;
  }

  /* Linke Gesamt-Scrollbar: schmal, dunkel und nur leicht golden. */
  .worldinfo-view--stats .worldinfo-region--body.worldinfo-stats-scroll{
    padding-right:.42vh !important;
    scrollbar-width:thin !important;
    scrollbar-color:#9a7028 #07100f !important;
    scrollbar-gutter:stable !important;
  }
  .worldinfo-view--stats .worldinfo-region--body.worldinfo-stats-scroll::-webkit-scrollbar{
    width:.62vh !important;
  }
  .worldinfo-view--stats .worldinfo-region--body.worldinfo-stats-scroll::-webkit-scrollbar-track{
    background:rgba(3,8,8,.72) !important;
    border:0 !important;
    box-shadow:inset 0 0 .12vh rgba(186,132,45,.10) !important;
  }
  .worldinfo-view--stats .worldinfo-region--body.worldinfo-stats-scroll::-webkit-scrollbar-thumb{
    min-height:4.4vh !important;
    border:0 !important;
    border-radius:.35vh !important;
    background:linear-gradient(90deg,#6c4b1a,#a8792b 50%,#6c4b1a) !important;
    box-shadow:inset 0 0 .10vh rgba(255,224,154,.20) !important;
  }
  .worldinfo-view--stats .worldinfo-region--body.worldinfo-stats-scroll::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(90deg,#7e581d,#bd8930 50%,#7e581d) !important;
  }
  .worldinfo-view--stats .worldinfo-region--body.worldinfo-stats-scroll::-webkit-scrollbar-button{
    display:none !important;
    width:0 !important;
    height:0 !important;
  }

  /* Rechte Weltliste erhält dieselbe dezente Scrollbar. */
  .worldinfo-world-list{
    padding-right:.30vh !important;
    scrollbar-width:thin !important;
    scrollbar-color:#9a7028 #07100f !important;
    scrollbar-gutter:stable !important;
  }
  .worldinfo-world-list::-webkit-scrollbar{
    width:.58vh !important;
  }
  .worldinfo-world-list::-webkit-scrollbar-track{
    background:rgba(3,8,8,.70) !important;
    border:0 !important;
  }
  .worldinfo-world-list::-webkit-scrollbar-thumb{
    min-height:4.0vh !important;
    border:0 !important;
    border-radius:.35vh !important;
    background:linear-gradient(90deg,#684817,#9d7127 50%,#684817) !important;
    box-shadow:none !important;
  }
  .worldinfo-world-list::-webkit-scrollbar-thumb:hover{
    background:linear-gradient(90deg,#7b561c,#b5822e 50%,#7b561c) !important;
  }
  .worldinfo-world-list::-webkit-scrollbar-button{
    display:none !important;
    width:0 !important;
    height:0 !important;
  }
}

@media (min-width:901px) and (max-width:1100px){
  .worldinfo-stats-scroll::-webkit-scrollbar,
  .worldinfo-world-list::-webkit-scrollbar{width:7px !important;}
  .worldinfo-stats-scroll{scrollbar-width:thin !important;}
  .worldinfo-world-list{scrollbar-width:thin !important;}
}

/* ============================================================
   V108 – Welt-Auswahl nach Login
   Karten/Rahmen komplett aus HTML/CSS + einzelnen Assets gebaut.
   ============================================================ */
body.world-select-page{background:#030808;overflow-x:hidden}
.world-select-page .topbar{z-index:50}
.world-select-actions{display:flex;align-items:center;gap:1.25vh}
.world-account-chip{height:5.1vh;min-width:14.2vh;display:flex;align-items:center;gap:.8vh;padding:.38vh .9vh .38vh .5vh;border:1px solid rgba(134,91,27,.55);background:linear-gradient(180deg,rgba(11,17,16,.96),rgba(3,8,8,.96));box-shadow:inset 0 0 1.2vh rgba(151,101,29,.10);color:#e7c779}
.world-account-chip img{width:3.4vh;height:3.4vh;object-fit:contain;filter:drop-shadow(0 0 .35vh rgba(204,141,36,.28))}
.world-account-chip span{display:grid;line-height:1.05}.world-account-chip strong{font-size:1.25vh;font-weight:500}.world-account-chip small{font-size:.78vh;color:#8f825f;margin-top:.22vh}

.world-select-stage{position:relative;min-height:calc(100vh - 18.2vh);padding:1.7vh 0 1.6vh;isolation:isolate;overflow:hidden}
.world-select-stage__bg{position:absolute;inset:0;background:url('assets/bg_castle.png') center 43%/cover no-repeat;z-index:-3;filter:saturate(.78) brightness(.62)}
.world-select-stage__shade{position:absolute;inset:0;z-index:-2;background:radial-gradient(circle at 50% 22%,rgba(218,164,80,.12),transparent 34%),linear-gradient(90deg,rgba(0,7,8,.42),rgba(0,7,8,.14) 25%,rgba(0,7,8,.14) 75%,rgba(0,7,8,.44)),linear-gradient(180deg,rgba(2,7,8,.12),rgba(2,7,8,.35))}
.world-select-shell{width:min(145vh,86vw);margin:0 auto;min-width:0}
.world-select-heading{text-align:center;color:#e8cd91;margin-bottom:1.35vh;text-shadow:0 2px 2px #000}
.world-select-title-line{display:flex;align-items:center;justify-content:center;gap:1.7vh}.world-select-title-line>span{width:8.5vh;height:1px;background:linear-gradient(90deg,transparent,#9d7123,transparent)}
.world-select-heading h1{margin:0;font-family:Georgia,'Times New Roman',serif;font-weight:400;text-transform:uppercase;letter-spacing:.08em;font-size:4.7vh;color:#f2d99b;text-shadow:0 .18vh .2vh #000,0 0 .85vh rgba(174,112,30,.22)}
.world-select-heading p{margin:.25vh 0 0;font-size:1.34vh;color:#e7cd91}.world-select-heading small{display:block;margin-top:.3vh;font-size:.92vh;color:#b6a47a}

.world-select-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1.5vh;align-items:stretch}
.world-card{position:relative;min-width:0;height:61.8vh;display:grid;grid-template-rows:20.3vh 1fr;background:linear-gradient(180deg,rgba(3,10,10,.98),rgba(2,8,8,.985));overflow:hidden;box-shadow:0 .5vh 1.8vh rgba(0,0,0,.55)}
.world-card-frame{position:absolute;inset:0;pointer-events:none;z-index:8}.world-card-frame .rail{position:absolute;background:linear-gradient(90deg,transparent,#6e4915 8%,#c58d2a 50%,#6e4915 92%,transparent)}
.world-card-frame .rail.top,.world-card-frame .rail.bottom{left:1.5vh;right:1.5vh;height:1px}.world-card-frame .rail.top{top:.35vh}.world-card-frame .rail.bottom{bottom:.35vh}.world-card-frame .rail.left,.world-card-frame .rail.right{top:1.5vh;bottom:1.5vh;width:1px;background:linear-gradient(180deg,transparent,#6e4915 8%,#b47c24 50%,#6e4915 92%,transparent)}.world-card-frame .rail.left{left:.35vh}.world-card-frame .rail.right{right:.35vh}
.world-card-frame .corner{position:absolute;width:2.6vh;height:2.6vh;object-fit:contain;z-index:2}.world-card-frame .tl{top:0;left:0}.world-card-frame .tr{top:0;right:0}.world-card-frame .bl{bottom:0;left:0}.world-card-frame .br{bottom:0;right:0}
.world-card-image{margin:.7vh .7vh 0;height:19.6vh;overflow:hidden;border-bottom:1px solid rgba(139,94,28,.75);background:#07100f}.world-card-image img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.82) contrast(1.05) brightness(.86);transition:.25s ease}.world-card:hover .world-card-image img{filter:saturate(.95) contrast(1.05) brightness(.93);transform:scale(1.015)}
.world-card-badge{position:absolute;z-index:12;left:1.1vh;top:1.1vh;padding:.5vh 1.15vh .42vh;font-family:Georgia,serif;text-transform:uppercase;letter-spacing:.08em;font-size:.88vh;border:1px solid #89611d;box-shadow:0 .25vh .6vh rgba(0,0,0,.45)}.world-card-badge--green{background:linear-gradient(180deg,#254817,#10280d);color:#e5d18d}.world-card-badge--red{background:linear-gradient(180deg,#62140d,#310805);color:#ecd292}
.world-card-body{min-height:0;padding:1.1vh 1.35vh 1vh;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;align-content:start}
.world-card h2{margin:0;text-align:center;font-family:Georgia,'Times New Roman',serif;font-weight:400;text-transform:uppercase;letter-spacing:.045em;font-size:2.28vh;color:#f0d48d;text-shadow:0 1px 2px #000}
.world-card-state{text-align:center;text-transform:uppercase;font-size:.92vh;margin:.18vh 0 .75vh;letter-spacing:.05em}.world-card-state--green{color:#78b84a}.world-card-state--gold{color:#d7a941}.world-card-state--blue{color:#6ba6d0}
.world-card-stats{border-top:1px solid rgba(99,70,28,.48);min-height:0}
.world-card-stats>div{display:grid;grid-template-columns:2.2vh 1fr auto;align-items:center;gap:.55vh;min-height:3.6vh;border-bottom:1px solid rgba(76,57,28,.42);font-size:1.03vh;color:#d6bd82}.world-card-stats>div>span:first-child{color:#d19b35;text-align:center;font-size:1.28vh}.world-card-stats b{font-weight:400;color:#c1a76e;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.world-card-stats strong{font-weight:400;color:#efd58f;text-align:right;white-space:nowrap}.world-card-stats .online-dot{width:.72vh;height:.72vh;border-radius:50%;background:#68c739;box-shadow:0 0 .65vh rgba(97,205,49,.55);justify-self:center}
.world-card-actions{padding-top:.8vh;display:grid;grid-template-columns:1fr auto;gap:.7vh;align-items:center}.world-enter{min-height:4.4vh;border:1px solid #a67522;color:#eed99b;font-family:Georgia,'Times New Roman',serif;text-transform:uppercase;letter-spacing:.05em;font-size:1.27vh;cursor:pointer;box-shadow:inset 0 0 .75vh rgba(255,219,124,.08),0 .2vh .4vh rgba(0,0,0,.32)}.world-enter:hover{filter:brightness(1.14)}.world-enter--green{background:linear-gradient(180deg,#214d17,#0d290b)}.world-enter--red{background:linear-gradient(180deg,#7a160f,#3d0806)}.world-enter--blue{background:linear-gradient(180deg,#173f63,#0c2238)}.world-enter--dark{background:linear-gradient(180deg,#171c1a,#080d0c)}.world-card-actions a{height:4.4vh;min-width:4.8vh;display:grid;place-items:center;padding:0 .55vh;border:1px solid rgba(116,82,28,.56);color:#c7a65c;text-decoration:none;font-size:.82vh;text-transform:uppercase;background:#07100f}.world-card-actions a:hover{color:#f0d48b;border-color:#a87626}

.world-select-rules{margin-top:1.25vh;min-height:7.7vh;display:grid;grid-template-columns:4.4vh 1fr auto;align-items:center;gap:1.15vh;padding:.85vh 1.5vh;border:1px solid rgba(125,88,31,.65);background:linear-gradient(180deg,rgba(6,13,12,.96),rgba(3,9,9,.98));box-shadow:inset 0 0 1.1vh rgba(133,91,27,.08)}
.world-select-rules__icon{width:3.6vh;height:3.6vh;border-radius:50%;border:1px solid #9b7126;display:grid;place-items:center;font-family:Georgia,serif;font-size:2vh;color:#d4aa58;background:#09100f}.world-select-rules strong{font-family:Georgia,serif;font-weight:400;font-size:1.15vh;color:#e2c47d;text-transform:uppercase}.world-select-rules p{margin:.2vh 0 0;font-size:.88vh;color:#aa986c}.world-select-rules>a{min-width:13vh;height:3.6vh;display:grid;place-items:center;border:1px solid #8d641f;color:#d6b765;text-decoration:none;text-transform:uppercase;font-size:.88vh;background:#09100f}.world-select-rules>a:hover{border-color:#c08b2b;color:#f0d48d}

@media (max-width:1450px){.world-select-shell{width:min(150vh,92vw)}.world-select-grid{gap:1.05vh}.world-account-chip{display:none}.world-card h2{font-size:2.05vh}.world-card-stats>div{font-size:.95vh}}
@media (max-width:1100px){.world-select-stage{overflow:auto}.world-select-shell{width:92vw}.world-select-grid{grid-template-columns:repeat(2,minmax(0,1fr));}.world-card{height:640px;grid-template-rows:220px 1fr}.world-card-image{height:214px}.world-select-heading h1{font-size:44px}.world-select-heading p{font-size:15px}.world-select-heading small{font-size:12px}.world-card-stats>div{font-size:12px;min-height:39px}.world-card h2{font-size:25px}.world-enter{font-size:14px}.world-select-rules{grid-template-columns:42px 1fr auto}.world-select-rules strong{font-size:14px}.world-select-rules p,.world-select-rules>a{font-size:11px}}
@media (max-width:720px){.world-select-grid{grid-template-columns:1fr}.world-select-heading h1{font-size:36px}.world-select-title-line>span{display:none}.world-card{height:auto;min-height:620px}.world-select-rules{grid-template-columns:38px 1fr}.world-select-rules>a{grid-column:1/-1}.world-select-actions{gap:0}.world-select-page .language-switcher{transform:scale(.9);transform-origin:right center}}

/* ============================================================
   V109 – World selection polish
   Kompaktere Karten, größere Lesbarkeit, keine tote Fläche.
   ============================================================ */
@media (min-width:1101px){
  .world-select-shell{
    width:min(148vh,89vw);
  }
  .world-select-heading{
    margin-bottom:1.15vh;
  }
  .world-select-heading h1{
    font-size:4.9vh;
  }
  .world-select-heading p{
    font-size:1.42vh;
  }
  .world-select-heading small{
    font-size:.98vh;
  }
  .world-select-grid{
    gap:1.35vh;
  }
  .world-card{
    height:58.8vh;
    grid-template-rows:20.8vh minmax(0,1fr);
  }
  .world-card-image{
    height:20.1vh;
    margin:.72vh .72vh 0;
  }
  .world-card-body{
    padding:1.08vh 1.28vh 1.08vh;
    display:flex;
    flex-direction:column;
    min-height:0;
  }
  .world-card h2{
    font-size:2.46vh;
    line-height:1.04;
  }
  .world-card-state{
    font-size:1.00vh;
    margin:.24vh 0 .72vh;
  }
  .world-card-stats{
    flex:0 0 auto;
    width:100%;
  }
  .world-card-stats>div{
    grid-template-columns:2.45vh minmax(0,1fr) auto;
    gap:.62vh;
    min-height:3.95vh;
    font-size:1.11vh;
    padding:0 .12vh;
  }
  .world-card-stats>div>span:first-child{
    font-size:1.42vh;
  }
  .world-card-stats .online-dot{
    width:.78vh;
    height:.78vh;
  }
  .world-card-actions{
    margin-top:auto;
    padding-top:.82vh;
    grid-template-columns:minmax(0,1fr) 5.5vh;
    gap:.62vh;
  }
  .world-enter{
    min-height:4.65vh;
    font-size:1.34vh;
  }
  .world-card-actions a{
    height:4.65vh;
    min-width:5.5vh;
    font-size:.88vh;
    padding:0 .45vh;
  }
  .world-card-badge{
    font-size:.94vh;
    padding:.54vh 1.2vh .46vh;
  }
  .world-select-rules{
    margin-top:1.05vh;
    min-height:7.3vh;
    padding:.85vh 1.4vh;
  }
  .world-select-rules strong{
    font-size:1.18vh;
  }
  .world-select-rules p{
    font-size:.94vh;
  }
  .world-select-rules>a{
    min-width:14vh;
    height:3.85vh;
    font-size:.94vh;
  }
}

/* Farbige, aber dezente Welt-Identität nur über CSS – keine fertigen Kartenbilder. */
.world-card--active .world-card-body{
  background:linear-gradient(180deg,rgba(10,33,13,.18),rgba(2,8,8,0) 28%);
}
.world-card--registered .world-card-body{
  background:linear-gradient(180deg,rgba(55,15,10,.14),rgba(2,8,8,0) 28%);
}
.world-card--new:nth-of-type(3) .world-card-body{
  background:linear-gradient(180deg,rgba(10,30,48,.12),rgba(2,8,8,0) 28%);
}

/* Lange Übersetzungen dürfen nie aus ihren Bereichen laufen. */
.world-card h2,
.world-card-state,
.world-card-stats b,
.world-card-stats strong,
.world-enter,
.world-card-actions a{
  min-width:0;
  max-width:100%;
}
.world-card-stats strong{
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Backend-/Sicherheitsmeldungen */
.app-flashes{position:relative;z-index:50;max-width:1180px;margin:12px auto 0;padding:0 16px;box-sizing:border-box}.app-flash{padding:12px 16px;margin:8px 0;border:1px solid rgba(255,255,255,.16);border-radius:5px;background:#1a211f;color:#f4edd7;font:600 14px/1.4 Arial,sans-serif;box-shadow:0 5px 18px rgba(0,0,0,.25)}.app-flash--success{border-color:#4b7f51}.app-flash--error{border-color:#9b423a}.app-flash--warning{border-color:#a57d36}.app-flash--info{border-color:#4a6e8d}
.world-account-tools{display:flex;align-items:center;gap:8px}.world-logout-form{margin:0}.world-logout-button{border:1px solid #735f39;background:#171b19;color:#d6c59e;padding:7px 10px;border-radius:4px;cursor:pointer}.world-logout-button:hover{background:#242a27}.backend-card{max-width:620px;margin:0 auto}.backend-form textarea{width:100%;min-height:170px;resize:vertical;box-sizing:border-box;background:#121817;color:#eee5cf;border:1px solid #695838;border-radius:4px;padding:12px;font:inherit}.backend-form select{width:100%;box-sizing:border-box;background:#121817;color:#eee5cf;border:1px solid #695838;border-radius:4px;padding:12px;font:inherit}.token-invalid{padding:16px;border:1px solid #8b443e;background:#2a1717;color:#f0d2cc;border-radius:5px}


/* ============================================================
   V110 – Konto-Panel auf der Startseite
   Zeigt den echten Session-Status statt erneut das Login-Formular.
   ============================================================ */
.login-account-panel__content{
  position:relative;
  z-index:3;
  width:86%;
  margin:0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  gap:.55vh;
  color:#d8c690;
}
.login-account-panel__crest{
  width:5.5vh;
  height:5.5vh;
  object-fit:contain;
  margin:.35vh 0 .25vh;
  filter:drop-shadow(0 .2vh .35vh rgba(0,0,0,.7));
}
.login-account-panel__label{
  color:#a99261;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.9vh;
}
.login-account-panel__username{
  color:#f1d48b;
  font-family:Georgia,'Times New Roman',serif;
  font-size:2.05vh;
  font-weight:400;
  line-height:1.15;
}
.login-account-panel__email{
  max-width:100%;
  color:#b8b094;
  font-size:.95vh;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.login-account-panel__content p{
  margin:.65vh 0 .7vh;
  color:#b9aa82;
  font-size:.98vh;
  line-height:1.45;
}
.login-account-panel__world{
  width:88%;
  min-height:5.2vh;
  display:grid;
  place-items:center;
  position:relative;
  text-decoration:none;
  color:#f5dfaa;
  font-family:Georgia,'Times New Roman',serif;
  text-transform:uppercase;
  letter-spacing:.035em;
  font-size:1.55vh;
  text-shadow:0 .18vh .2vh rgba(56,5,5,.9);
  background:url('assets/btn_red_clean.png') center/100% 100% no-repeat;
}
.login-account-panel__world:hover{filter:brightness(1.09)}
.login-account-panel__content form{width:100%;margin-top:.2vh}
.login-account-panel__logout{
  border:0;
  background:transparent;
  color:#c8a65b;
  font-family:Georgia,'Times New Roman',serif;
  text-transform:uppercase;
  font-size:.92vh;
  cursor:pointer;
  padding:.45vh 1vh;
}
.login-account-panel__logout:hover{color:#f0d38d;text-decoration:underline}


/* ============================================================
   V112 – Cookie consent + besser lesbares Konto-Panel
   ============================================================ */

/* Eingeloggt-Panel: feste, lesbare Größen statt extrem kleiner vh-Texte. */
.login-account-panel{
  padding-top:28px;
  padding-bottom:24px;
}
.login-account-panel .login-final__title-rule{
  margin-bottom:10px;
}
.login-account-panel__content{
  width:84%;
  gap:6px;
  padding:12px 13px 10px;
  border:1px solid rgba(168,123,43,.28);
  border-radius:4px;
  background:
    linear-gradient(180deg,rgba(8,15,14,.74),rgba(3,9,9,.52));
  box-shadow:
    inset 0 0 18px rgba(0,0,0,.22),
    0 5px 18px rgba(0,0,0,.18);
}
.login-account-panel__crest{
  width:44px;
  height:44px;
  margin:0 0 2px;
}
.login-account-panel__label{
  display:inline-flex;
  align-items:center;
  gap:6px;
  color:#c4aa6d;
  font-size:11px;
  line-height:16px;
  letter-spacing:.09em;
}
.login-account-panel__label::before{
  content:"";
  width:7px;
  height:7px;
  flex:0 0 7px;
  border-radius:50%;
  background:#66b84e;
  box-shadow:0 0 7px rgba(102,184,78,.65);
}
.login-account-panel__username{
  color:#f4d98e;
  font-size:21px;
  line-height:25px;
  font-weight:600;
  text-shadow:0 2px 3px #000;
}
.login-account-panel__email{
  max-width:100%;
  color:#ded4b8;
  font-size:12px;
  line-height:17px;
  font-family:Arial,Helvetica,sans-serif;
  text-shadow:0 1px 2px #000;
}
.login-account-panel__content p{
  max-width:245px;
  margin:5px 0 7px;
  color:#d2c49f;
  font-size:12px;
  line-height:17px;
  font-family:Arial,Helvetica,sans-serif;
}
.login-account-panel__world{
  width:94%;
  min-height:48px;
  font-size:15px;
  line-height:18px;
}
.login-account-panel__content form{
  width:94%;
  margin-top:2px;
}
.login-account-panel__logout{
  width:100%;
  min-height:34px;
  border:1px solid rgba(151,110,38,.52);
  border-radius:3px;
  background:rgba(8,13,12,.66);
  color:#d9bd79;
  font-size:11px;
  line-height:16px;
  letter-spacing:.06em;
  padding:7px 12px;
}
.login-account-panel__logout:hover{
  color:#ffe4a0;
  border-color:#bd8830;
  background:rgba(28,25,16,.72);
  text-decoration:none;
}

/* Cookie-Banner – bewusst losgelöst von der eigentlichen Spielfläche. */
.cookie-consent[hidden]{
  display:none!important;
}
.cookie-consent{
  position:fixed;
  z-index:10000;
  left:18px;
  right:18px;
  bottom:18px;
  display:block;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .18s ease,transform .18s ease;
  pointer-events:none;
}
.cookie-consent.is-visible{
  opacity:1;
  transform:translateY(0);
  pointer-events:auto;
}
.cookie-consent__inner{
  width:min(1120px,100%);
  margin:0 auto;
  display:grid;
  grid-template-columns:62px minmax(0,1fr) auto;
  align-items:center;
  gap:18px;
  padding:17px 18px;
  border:1px solid #8d6723;
  border-radius:7px;
  background:
    linear-gradient(180deg,rgba(14,20,19,.985),rgba(6,11,10,.99)),
    url('assets/v24_texture.png?v=24') center/180px 180px repeat;
  box-shadow:
    inset 0 0 0 1px rgba(220,171,73,.08),
    0 15px 45px rgba(0,0,0,.58);
  color:#e7dcc1;
  box-sizing:border-box;
}
.cookie-consent__crest{
  width:58px;
  height:58px;
  display:grid;
  place-items:center;
  border-right:1px solid rgba(137,100,37,.38);
}
.cookie-consent__crest img{
  width:44px;
  height:44px;
  object-fit:contain;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.75));
}
.cookie-consent__copy{
  min-width:0;
  font-family:Arial,Helvetica,sans-serif;
}
.cookie-consent__copy h2{
  margin:0 0 5px;
  color:#f0cf83;
  font-family:Georgia,'Times New Roman',serif;
  font-size:19px;
  line-height:24px;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:.035em;
}
.cookie-consent__copy p{
  margin:0;
  max-width:700px;
  color:#cfc5aa;
  font-size:13px;
  line-height:19px;
}
.cookie-consent__copy a{
  display:inline-block;
  margin-top:6px;
  color:#c9a557;
  font-size:12px;
  line-height:16px;
  text-decoration:underline;
  text-underline-offset:2px;
}
.cookie-consent__copy a:hover{
  color:#f0cf83;
}
.cookie-consent__actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:9px;
}
.cookie-consent__button{
  min-height:40px;
  padding:9px 16px;
  border-radius:4px;
  font-family:Georgia,'Times New Roman',serif;
  font-size:12px;
  line-height:17px;
  text-transform:uppercase;
  letter-spacing:.025em;
  cursor:pointer;
  white-space:nowrap;
}
.cookie-consent__button--secondary{
  border:1px solid #75643e;
  background:#121817;
  color:#d5c69d;
}
.cookie-consent__button--secondary:hover{
  border-color:#a58343;
  color:#f0db9e;
  background:#1a211e;
}
.cookie-consent__button--primary{
  border:1px solid #c57b43;
  background:linear-gradient(180deg,#aa291e,#6d0d09);
  color:#fff0c7;
  text-shadow:0 1px 2px #310000;
  box-shadow:inset 0 0 9px rgba(255,200,91,.12);
}
.cookie-consent__button--primary:hover{
  filter:brightness(1.10);
}
.cookie-settings-link{
  appearance:none;
  border:0;
  padding:0;
  margin:0;
  background:transparent;
  color:inherit;
  font:inherit;
  text-transform:inherit;
  cursor:pointer;
}
.cookie-settings-link:hover{
  color:#e0be70;
  text-decoration:underline;
}

@media (max-width:860px){
  .cookie-consent{
    left:10px;
    right:10px;
    bottom:10px;
  }
  .cookie-consent__inner{
    grid-template-columns:46px minmax(0,1fr);
    gap:12px;
    padding:14px;
  }
  .cookie-consent__crest{
    width:44px;
    height:44px;
  }
  .cookie-consent__crest img{
    width:36px;
    height:36px;
  }
  .cookie-consent__actions{
    grid-column:1/-1;
    justify-content:stretch;
  }
  .cookie-consent__button{
    flex:1 1 0;
    white-space:normal;
  }
}
@media (max-width:520px){
  .cookie-consent__inner{
    grid-template-columns:1fr;
  }
  .cookie-consent__crest{
    display:none;
  }
  .cookie-consent__actions{
    grid-column:1;
    flex-direction:column-reverse;
  }
  .cookie-consent__button{
    width:100%;
  }
}


/* ============================================================
   V113 – MariaDB News + zweisprachig DE/EN
   ============================================================ */
.news-card{
  color:inherit;
  text-decoration:none;
  cursor:pointer;
}
.news-card:hover{
  border-color:rgba(193,144,52,.78);
  background:linear-gradient(180deg,rgba(11,18,17,.92),rgba(6,11,11,.96));
  box-shadow:inset 0 0 0 1px rgba(255,219,133,.08),0 0 .8vh rgba(210,149,36,.10);
}
.news-card:focus-visible{
  outline:2px solid #d0a34b;
  outline-offset:2px;
}
.news-feature__body--db{
  grid-template-rows:auto auto auto 1fr auto;
}
.news-feature__article{
  min-height:0;
  overflow:auto;
  padding-right:.8vh;
  color:#c8b993;
  font-size:1.23vh;
  line-height:1.58;
  white-space:normal;
  scrollbar-color:#8d672b #0b1010;
  scrollbar-width:thin;
}
.news-feature__actions{
  padding-top:.7vh;
}
.news-db-empty{
  grid-column:1/-1;
  align-self:center;
  justify-self:center;
  width:min(620px,86%);
  padding:42px 34px;
  text-align:center;
  border:1px solid rgba(160,116,41,.52);
  background:rgba(5,11,10,.88);
  box-shadow:inset 0 0 24px rgba(0,0,0,.34);
}
.news-db-empty h2{
  margin:0 0 12px;
  color:#e7c478;
  font-family:Georgia,'Times New Roman',serif;
  font-size:25px;
  font-weight:500;
}
.news-db-empty p{
  margin:0;
  color:#c8b991;
  font-size:14px;
  line-height:1.6;
}


/* ============================================================
   V115 – Weltinfo aus zentralem Snapshot-Read-Model
   ============================================================ */
.worldinfo-world-list a{
  display:flex;
  align-items:center;
  gap:.7vh;
  width:100%;
  box-sizing:border-box;
  padding:.68vh .8vh;
  border:1px solid transparent;
  background:rgba(5,11,10,.42);
  color:#bcae88;
  font-family:Georgia,'Times New Roman',serif;
  font-size:1.05vh;
  line-height:1.35;
  text-decoration:none;
  cursor:pointer;
}
.worldinfo-world-list a + a{margin-top:.34vh}
.worldinfo-world-list a:hover{
  color:#ecd08b;
  border-color:rgba(160,116,40,.42);
  background:rgba(16,22,20,.7);
}
.worldinfo-world-list a.is-active{
  color:#f1d486;
  border-color:#856022;
  background:linear-gradient(180deg,rgba(72,50,17,.52),rgba(25,20,10,.66));
  box-shadow:inset 0 0 10px rgba(224,166,52,.08);
}
.worldinfo-world-list a span{
  color:#a77c32;
  font-size:.75em;
}
.worldinfo-seed-note{
  margin:0 0 1.1vh;
  padding:.8vh 1vh;
  display:flex;
  align-items:flex-start;
  gap:.75vh;
  border:1px solid rgba(175,126,39,.48);
  background:rgba(62,41,12,.28);
  color:#cbb98a;
  font-size:1.02vh;
  line-height:1.45;
}
.worldinfo-seed-note strong{
  flex:0 0 auto;
  color:#ebc46d;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.worldinfo-no-snapshot{
  margin:2vh;
  padding:2.2vh;
  border:1px solid rgba(140,105,47,.45);
  background:rgba(5,10,10,.72);
  color:#c4b58f;
  text-align:center;
}
.worldinfo-status--maintenance{color:#e1b851!important}
.worldinfo-status--maintenance i{background:#d5a42c!important;box-shadow:0 0 .5vh rgba(213,164,44,.7)!important}
.worldinfo-status--closed,
.worldinfo-status--offline{color:#c77c72!important}
.worldinfo-status--closed i,
.worldinfo-status--offline i{background:#9e3e34!important;box-shadow:0 0 .5vh rgba(158,62,52,.65)!important}
.worldinfo-empty-state{
  width:min(720px,90%);
  margin:8vh auto;
  padding:3vh;
  text-align:center;
  border:1px solid #715427;
  background:rgba(6,12,11,.86);
  color:#d3c395;
}