/* WOF Premium Landingpage v3 - rebuilt to match mockup */
:root{
  --wof-gold:#c79636;
  --wof-gold-light:#f0c264;
  --wof-gold-dark:#7b5017;
  --wof-red:#7f1b12;
  --wof-dark:#050403;
  --wof-panel:rgba(7,7,6,.84);
  --wof-border:rgba(205,151,58,.34);
  --wof-text:#efe4d1;
  --wof-muted:#b9ab98;
}

html,body{min-height:100%;}
body.wof-premium-body{
  background:#050403 !important;
  overflow-x:hidden;
}

.wof-premium-page{
  margin:0;
  padding:0;
  background:#050403;
  color:var(--wof-text);
  font-family:Arial, Helvetica, sans-serif;
}

.wof-premium-hero{
  position:relative;
  min-height:calc(100vh - 0px);
  height:auto;
  overflow:hidden;
  padding-bottom:32px;
  isolation:isolate;
}

.wof-premium-bg{
  position:absolute;
  inset:0;
  z-index:-5;
  background:url('../img/wof_premium_bg.png') center top / cover no-repeat;
  transform:scale(1.015);
}

.wof-premium-vignette{
  position:absolute;
  inset:0;
  z-index:-4;
  background:
    linear-gradient(180deg, rgba(0,0,0,.34) 0%, rgba(0,0,0,.10) 18%, rgba(0,0,0,.28) 60%, rgba(0,0,0,.88) 100%),
    linear-gradient(90deg, rgba(0,0,0,.84) 0%, rgba(0,0,0,.35) 24%, rgba(0,0,0,.16) 55%, rgba(0,0,0,.56) 100%),
    radial-gradient(circle at 58% 25%, rgba(226,142,50,.20), transparent 28%);
}

.wof-embers{
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
  opacity:.28;
  background:
    radial-gradient(circle at 16% 34%, rgba(255,132,34,.55) 0 1px, transparent 2px),
    radial-gradient(circle at 72% 18%, rgba(255,170,65,.45) 0 1px, transparent 2px),
    radial-gradient(circle at 88% 59%, rgba(255,91,20,.35) 0 1px, transparent 2px),
    radial-gradient(circle at 36% 72%, rgba(255,150,40,.40) 0 1px, transparent 2px);
}

.wof-hero-cowboy{
  position:absolute;
  z-index:2;
  left:5.2vw;
  bottom:70px;
  width:min(28vw, 455px);
  max-height:760px;
  object-fit:contain;
  object-position:bottom left;
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.92)) contrast(1.04) saturate(.88);
  pointer-events:none;
  user-select:none;
}

.wof-hero-native{
  position:absolute;
  z-index:2;
  right:7.2vw;
  bottom:250px;
  width:min(25vw, 400px);
  max-height:675px;
  opacity:.0; /* screenshot target mainly uses cowboy + status card; asset kept available */
  filter:drop-shadow(0 18px 28px rgba(0,0,0,.92));
  pointer-events:none;
  user-select:none;
}

.wof-title-block{
  position:relative;
  z-index:5;
  width:min(850px, 92vw);
  margin:0 auto;
  padding-top:76px;
  text-align:center;
  text-shadow:0 7px 24px rgba(0,0,0,.92);
}

.wof-title-top,
.wof-title-bottom{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:16px;
  font-family:Georgia, 'Times New Roman', serif;
  text-transform:uppercase;
  font-weight:900;
}

.wof-title-top{
  color:#eee4d5;
  font-size:clamp(36px, 4vw, 58px);
  letter-spacing:14px;
  line-height:1;
}

.wof-title-top span,
.wof-title-bottom span{
  display:block;
  width:70px;
  height:1px;
  background:linear-gradient(90deg, transparent, #e7c58a, transparent);
}

.wof-title-block h1{
  margin:4px 0 0;
  font-family:Georgia, 'Times New Roman', serif;
  text-transform:uppercase;
  font-size:clamp(84px, 9vw, 154px);
  line-height:.82;
  letter-spacing:5px;
  color:#efe6d8;
  font-weight:900;
  text-shadow:
    0 4px 0 rgba(0,0,0,.50),
    0 13px 36px rgba(0,0,0,.92);
}

.wof-title-bottom{
  margin-top:16px;
  color:#d9c19a;
  font-size:clamp(20px, 2.2vw, 35px);
  letter-spacing:11px;
}

.wof-title-block p{
  margin:20px 0 26px;
  color:#fff6e7;
  font-size:17px;
  letter-spacing:1.7px;
  font-weight:800;
  text-transform:uppercase;
}

.wof-action-row{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:14px;
}

.wof-action{
  min-width:230px;
  min-height:55px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:0 26px;
  border-radius:5px;
  text-decoration:none !important;
  color:#fff4e4 !important;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.5px;
  border:1px solid rgba(236,184,82,.42);
  box-shadow:0 13px 30px rgba(0,0,0,.52), inset 0 1px rgba(255,255,255,.15);
  transition:transform .18s ease, filter .18s ease, box-shadow .18s ease;
}

.wof-action:hover{
  transform:translateY(-2px);
  filter:brightness(1.12);
  box-shadow:0 18px 40px rgba(0,0,0,.66), 0 0 18px rgba(201,151,58,.14);
}

.wof-action.primary{
  background:linear-gradient(180deg, #c9973c, #7d5118);
}

.wof-action.secondary{
  background:linear-gradient(180deg, rgba(16,15,13,.90), rgba(5,5,4,.96));
}

.wof-floating-status{
  position:absolute;
  z-index:7;
  top:94px;
  right:9.4vw;
  width:355px;
  padding:22px 22px 20px;
  background:linear-gradient(180deg, rgba(14,12,9,.86), rgba(6,6,5,.88));
  border:1px solid rgba(201,151,58,.32);
  border-radius:7px;
  box-shadow:0 20px 44px rgba(0,0,0,.66), inset 0 0 0 1px rgba(255,255,255,.025);
  backdrop-filter:blur(8px);
}

.wof-floating-status:before,
.wof-home-card:before{
  content:"";
  position:absolute;
  inset:8px;
  border:1px solid rgba(201,151,58,.07);
  border-radius:4px;
  pointer-events:none;
}

.wof-floating-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding-bottom:14px;
  margin-bottom:6px;
  border-bottom:1px solid rgba(201,151,58,.17);
}

.wof-floating-head strong{
  color:#fff1da;
  font-size:20px;
  text-transform:uppercase;
  font-weight:900;
  letter-spacing:.8px;
}

.wof-floating-head span,
.wof-card-head b{
  font-size:13px;
  text-transform:uppercase;
  font-weight:900;
}

.is-online{color:#53e05c !important;text-shadow:0 0 12px rgba(83,224,92,.35);}
.is-offline{color:#d84b40 !important;text-shadow:0 0 12px rgba(216,75,64,.26);}

.wof-status-line,
.discord-row{
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.075);
  color:#b9ad9e;
  font-size:14px;
}

.wof-status-line b,
.discord-row b{
  color:var(--wof-gold-light);
  text-align:right;
  max-width:58%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:normal;
}

.wof-connect-btn,
.wof-discord-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  min-height:50px;
  margin-top:17px;
  border-radius:5px;
  background:linear-gradient(180deg, #b67e2e, #7b4e16);
  color:#fff2df !important;
  text-decoration:none !important;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
  border:1px solid rgba(239,190,90,.35);
  box-shadow:inset 0 1px rgba(255,255,255,.14);
}

.wof-lower-layout{
  position:relative;
  z-index:6;
  width:min(1260px, calc(100vw - 84px));
  margin:88px auto 0;
  margin-left:calc(50% - 335px);
  display:grid;
  grid-template-columns:1.05fr .9fr 1fr;
  gap:14px;
}

.wof-home-card{
  position:relative;
  min-height:392px;
  padding:22px;
  background:linear-gradient(180deg, rgba(12,11,9,.87), rgba(6,6,5,.88));
  border:1px solid rgba(201,151,58,.27);
  border-radius:7px;
  box-shadow:0 20px 42px rgba(0,0,0,.66);
  backdrop-filter:blur(8px);
  overflow:hidden;
}

.wof-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding-bottom:16px;
  margin-bottom:13px;
  border-bottom:1px solid rgba(201,151,58,.18);
}

.wof-card-head h2{
  margin:0;
  color:#fff1db;
  font-size:20px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.6px;
}

.wof-card-head a{
  color:#e1ad48;
  font-size:12px;
  text-decoration:none;
  text-transform:uppercase;
  font-weight:900;
}

.wof-news-item{
  display:flex;
  gap:15px;
  padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.wof-news-item:last-child{border-bottom:0;}

.wof-news-item img{
  flex:0 0 112px;
  width:112px;
  height:72px;
  object-fit:cover;
  border-radius:5px;
  background:#1b1208;
  border:1px solid rgba(201,151,58,.22);
}

.wof-news-item h3,
.wof-change-item h3{
  margin:0 0 6px;
  color:#fff0d8;
  font-size:15.5px;
  line-height:1.25;
}

.wof-news-item p{
  margin:0 0 5px;
  color:#c2b5a2;
  font-size:13.5px;
  line-height:1.38;
}

.wof-news-item time,
.wof-change-item time{
  color:#a99a87;
  font-size:12px;
}

.wof-change-item{
  padding:12px 0;
  border-bottom:1px solid rgba(255,255,255,.07);
}

.wof-change-item:last-child{border-bottom:0;}
.wof-change-item span{color:#e1ad48;}

.discord-icon{
  color:#5865f2;
  text-shadow:0 0 14px rgba(88,101,242,.45);
  margin-right:6px;
}

.discord-section-title{
  color:#e1ad48;
  text-transform:uppercase;
  font-weight:900;
  font-size:13px;
  margin:8px 0 10px;
}

.discord-info{
  margin-top:19px;
  padding-top:17px;
  border-top:1px solid rgba(201,151,58,.18);
}

.discord-info strong{
  display:block;
  color:#e1ad48;
  text-transform:uppercase;
  font-size:13px;
  margin-bottom:7px;
}

.discord-info p{
  margin:0;
  color:#c7baa8;
  font-size:14px;
  line-height:1.45;
}

/* Header harmony if existing header is plain */
.site-header,
header.site-header{
  box-shadow:0 10px 28px rgba(0,0,0,.42);
}

/* Large 1920 layout */
@media(min-width:1500px){
  .wof-premium-hero{min-height:1080px;}
  .wof-title-block{padding-top:82px;}
  .wof-title-block h1{font-size:158px;}
  .wof-hero-cowboy{width:520px;bottom:88px;left:5vw;}
  .wof-floating-status{right:9.5vw;top:100px;width:370px;}
  .wof-lower-layout{
    width:1260px;
    margin-top:92px;
    margin-left:calc(50% - 330px);
  }
}

/* 1080p tuning */
@media(min-width:1700px) and (max-width:2100px){
  .wof-title-block{transform:translateY(0);}
  .wof-lower-layout{margin-top:78px;}
}

/* 2K/4K */
@media(min-width:2200px){
  .wof-premium-hero{
    max-width:2560px;
    margin:0 auto;
  }
}

/* Medium screens */
@media(max-width:1320px){
  .wof-hero-cowboy{opacity:.55;left:-2vw;width:390px;}
  .wof-floating-status{
    position:relative;
    top:auto;
    right:auto;
    margin:28px auto 0;
    width:min(420px, calc(100vw - 40px));
  }
  .wof-lower-layout{
    width:min(1100px, calc(100vw - 38px));
    margin:38px auto 0;
    grid-template-columns:1fr;
  }
  .wof-home-card{min-height:auto;}
}

/* Mobile */
@media(max-width:720px){
  .wof-premium-hero{padding-bottom:22px;}
  .wof-hero-cowboy,.wof-hero-native{display:none;}
  .wof-title-block{padding-top:44px;width:calc(100vw - 24px);}
  .wof-title-top{font-size:32px;letter-spacing:7px;}
  .wof-title-block h1{font-size:66px;letter-spacing:2px;}
  .wof-title-bottom{font-size:18px;letter-spacing:4px;}
  .wof-title-top span,.wof-title-bottom span{width:34px;}
  .wof-title-block p{font-size:13px;}
  .wof-action{min-width:100%;box-sizing:border-box;}
  .wof-floating-status{width:calc(100vw - 24px);padding:18px;box-sizing:border-box;}
  .wof-lower-layout{width:calc(100vw - 24px);}
  .wof-home-card{padding:18px;}
  .wof-news-item img{width:86px;height:58px;flex-basis:86px;}
}


/* =========================================================
   WOF Layout Fix: nicht mehr abgeschnitten / passend 1920x1080
   ========================================================= */

/* Header darf nicht den Hero überdecken */
body.wof-premium-body{
  margin:0 !important;
  background:#050403 !important;
  overflow-x:hidden !important;
}

.wof-premium-page{
  width:100% !important;
  max-width:none !important;
  overflow:hidden !important;
}

.wof-premium-hero{
  width:100vw !important;
  max-width:none !important;
  min-height:calc(100vh - 76px) !important;
  padding-top:0 !important;
  padding-bottom:34px !important;
  box-sizing:border-box !important;
}

/* Hintergrund immer vollflächig, nicht kleiner Container */
.wof-premium-bg{
  left:0 !important;
  right:0 !important;
  width:100vw !important;
  background-position:center center !important;
  background-size:cover !important;
}

/* Titel sichtbar unter Navbar, nicht oben abgeschnitten */
.wof-title-block{
  padding-top:58px !important;
  width:min(850px, 52vw) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  transform:none !important;
}

/* Titel etwas kompakter, damit Button/Status nicht kollidieren */
.wof-title-top{
  font-size:clamp(32px, 3.2vw, 54px) !important;
  letter-spacing:10px !important;
}
.wof-title-block h1{
  font-size:clamp(86px, 7.6vw, 142px) !important;
}
.wof-title-bottom{
  font-size:clamp(20px, 1.8vw, 31px) !important;
  letter-spacing:8px !important;
}
.wof-title-block p{
  margin-top:16px !important;
  margin-bottom:22px !important;
}

/* Cowboy an den linken Bildrand und nicht mitten in die Karten */
.wof-hero-cowboy{
  left:4.5vw !important;
  bottom:70px !important;
  width:clamp(360px, 26vw, 500px) !important;
  max-height:760px !important;
}

/* Serverstatus exakt rechts oben, aber nicht über Button */
.wof-floating-status{
  top:64px !important;
  right:7vw !important;
  width:360px !important;
  transform:none !important;
}

/* Untere Karten: volle sinnvolle Breite und komplett sichtbar */
.wof-lower-layout{
  width:min(1240px, calc(100vw - 440px)) !important;
  max-width:1240px !important;
  margin-top:72px !important;
  margin-left:calc(50vw - 160px) !important;
  margin-right:0 !important;
  grid-template-columns:1.04fr .9fr 1fr !important;
  gap:14px !important;
  box-sizing:border-box !important;
}

/* Kartenhöhe kompakter wie im Mockup */
.wof-home-card{
  min-height:360px !important;
  max-height:430px !important;
  padding:22px !important;
  box-sizing:border-box !important;
}

.wof-news-item{
  padding:11px 0 !important;
}
.wof-news-item img{
  width:112px !important;
  height:68px !important;
  flex-basis:112px !important;
}
.wof-change-item{
  padding:10px 0 !important;
}

/* Discord-Karte darf Inhalt nicht abschneiden */
.discord-card{
  overflow:hidden !important;
}
.discord-row b{
  max-width:58% !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
  white-space:nowrap !important;
}

/* Button in Discord normal breit */
.wof-discord-btn{
  width:auto !important;
  min-width:210px !important;
  display:inline-flex !important;
  padding-left:22px !important;
  padding-right:22px !important;
}

/* Footer sauber unter Inhalt */
footer{
  position:relative !important;
  z-index:10 !important;
}

/* 1920x1080 Zielauflösung */
@media (min-width:1700px) and (max-width:2100px){
  .wof-premium-hero{
    min-height:740px !important;
  }

  .wof-title-block{
    padding-top:55px !important;
  }

  .wof-hero-cowboy{
    left:5vw !important;
    bottom:72px !important;
    width:470px !important;
  }

  .wof-floating-status{
    right:8.5vw !important;
    top:64px !important;
    width:355px !important;
  }

  .wof-lower-layout{
    width:1220px !important;
    margin-left:calc(50vw - 230px) !important;
    margin-top:70px !important;
  }

  .wof-home-card{
    min-height:355px !important;
  }
}

/* Wenn der Bildschirm schmaler ist, alles untereinander statt abgeschnitten */
@media (max-width:1500px){
  .wof-title-block{
    width:min(820px, 86vw) !important;
  }

  .wof-floating-status{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    width:min(420px, calc(100vw - 40px)) !important;
    margin:26px auto 0 !important;
  }

  .wof-hero-cowboy{
    opacity:.45 !important;
    left:-40px !important;
    width:390px !important;
  }

  .wof-lower-layout{
    width:min(1120px, calc(100vw - 40px)) !important;
    margin:36px auto 0 !important;
    grid-template-columns:1fr !important;
  }

  .wof-home-card{
    max-height:none !important;
  }
}

/* Mobil */
@media (max-width:760px){
  .wof-title-block{
    padding-top:36px !important;
  }
  .wof-title-top{
    letter-spacing:5px !important;
  }
  .wof-title-block h1{
    font-size:64px !important;
  }
  .wof-lower-layout{
    width:calc(100vw - 22px) !important;
  }
}


/* =========================================================
   FINAL FULLWIDTH FIX
   Problem: Homepage steckte in altem Portal-Container.
   Lösung: Startseite aus jedem Parent-Container auf 100vw ziehen.
   ========================================================= */

html,
body{
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  overflow-x:hidden !important;
  background:#050403 !important;
}

/* Bricht aus jedem alten .container/.content Wrapper aus */
.wof-premium-page{
  position:relative !important;
  left:50% !important;
  right:50% !important;
  width:100vw !important;
  max-width:100vw !important;
  min-width:100vw !important;
  margin-left:-50vw !important;
  margin-right:-50vw !important;
  padding:0 !important;
  overflow:hidden !important;
  background:#050403 !important;
}

/* Hero über komplette Browserbreite */
.wof-premium-hero{
  width:100vw !important;
  max-width:100vw !important;
  min-height:calc(100vh - 76px) !important;
  height:760px !important;
  max-height:none !important;
  margin:0 !important;
  padding:0 0 34px !important;
  overflow:hidden !important;
  box-sizing:border-box !important;
}

/* Hintergrund nicht als kleiner Ausschnitt */
.wof-premium-bg{
  position:absolute !important;
  inset:0 !important;
  width:100vw !important;
  height:100% !important;
  background-position:center center !important;
  background-size:cover !important;
  transform:none !important;
}

/* Titel wieder komplett sichtbar und mittig */
.wof-title-block{
  position:relative !important;
  z-index:5 !important;
  width:820px !important;
  max-width:calc(100vw - 760px) !important;
  min-width:580px !important;
  margin:0 auto !important;
  padding-top:54px !important;
  left:0 !important;
  right:auto !important;
  transform:none !important;
  text-align:center !important;
  overflow:visible !important;
}

.wof-title-top{
  font-size:44px !important;
  letter-spacing:10px !important;
  white-space:nowrap !important;
}

.wof-title-block h1{
  font-size:122px !important;
  line-height:.86 !important;
  letter-spacing:4px !important;
  white-space:nowrap !important;
  margin:4px 0 0 !important;
}

.wof-title-bottom{
  font-size:26px !important;
  letter-spacing:8px !important;
  white-space:nowrap !important;
}

.wof-title-block p{
  font-size:15px !important;
  margin:16px 0 22px !important;
  white-space:nowrap !important;
}

/* Cowboy links wie im Referenzbild */
.wof-hero-cowboy{
  position:absolute !important;
  left:6.5vw !important;
  bottom:34px !important;
  width:430px !important;
  max-height:680px !important;
  z-index:2 !important;
}

/* Serverstatus oben rechts */
.wof-floating-status{
  position:absolute !important;
  top:62px !important;
  right:8vw !important;
  width:345px !important;
  margin:0 !important;
  transform:none !important;
  z-index:7 !important;
}

/* Kartenbereich exakt wie Referenz: mittig unter Hero, komplett sichtbar */
.wof-lower-layout{
  position:relative !important;
  z-index:6 !important;
  width:1180px !important;
  max-width:calc(100vw - 520px) !important;
  margin:66px 8vw 0 auto !important;
  display:grid !important;
  grid-template-columns:1.05fr .9fr 1fr !important;
  gap:14px !important;
  box-sizing:border-box !important;
  left:auto !important;
  right:auto !important;
  transform:none !important;
}

.wof-home-card{
  min-height:332px !important;
  max-height:360px !important;
  padding:21px !important;
  box-sizing:border-box !important;
}

.wof-card-head h2{
  font-size:20px !important;
}

.wof-news-item{
  gap:13px !important;
  padding:10px 0 !important;
}

.wof-news-item img{
  width:104px !important;
  height:62px !important;
  flex-basis:104px !important;
}

.wof-news-item h3,
.wof-change-item h3{
  font-size:15px !important;
}

.wof-news-item p{
  font-size:13px !important;
}

.wof-change-item{
  padding:9px 0 !important;
}

/* Wenn Bildschirm wirklich 1920 breit ist */
@media (min-width:1700px) and (max-width:2100px){
  .wof-premium-hero{
    height:760px !important;
    min-height:760px !important;
  }

  .wof-title-block{
    width:780px !important;
    max-width:780px !important;
    min-width:780px !important;
    padding-top:60px !important;
  }

  .wof-title-top{
    font-size:43px !important;
  }

  .wof-title-block h1{
    font-size:126px !important;
  }

  .wof-title-bottom{
    font-size:27px !important;
  }

  .wof-hero-cowboy{
    left:7vw !important;
    bottom:36px !important;
    width:440px !important;
  }

  .wof-floating-status{
    top:64px !important;
    right:8.6vw !important;
    width:350px !important;
  }

  .wof-lower-layout{
    width:1185px !important;
    max-width:1185px !important;
    margin-top:64px !important;
    margin-right:8.5vw !important;
  }
}

/* 1440 bis 1699: Serverbox darunter, damit nichts abgeschnitten wird */
@media (max-width:1699px){
  .wof-premium-hero{
    height:auto !important;
    min-height:760px !important;
    padding-bottom:32px !important;
  }

  .wof-title-block{
    width:min(800px, calc(100vw - 80px)) !important;
    max-width:calc(100vw - 80px) !important;
    min-width:0 !important;
  }

  .wof-title-block h1{
    font-size:clamp(72px, 9vw, 118px) !important;
  }

  .wof-floating-status{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    width:min(420px, calc(100vw - 40px)) !important;
    margin:26px auto 0 !important;
  }

  .wof-hero-cowboy{
    opacity:.45 !important;
    left:-35px !important;
    width:390px !important;
  }

  .wof-lower-layout{
    width:min(1120px, calc(100vw - 40px)) !important;
    max-width:calc(100vw - 40px) !important;
    margin:36px auto 0 !important;
    grid-template-columns:1fr !important;
  }

  .wof-home-card{
    max-height:none !important;
  }
}

/* Mobile */
@media (max-width:760px){
  .wof-premium-page{
    left:0 !important;
    right:auto !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }

  .wof-title-top{
    font-size:28px !important;
    letter-spacing:4px !important;
  }

  .wof-title-block h1{
    font-size:58px !important;
  }

  .wof-title-bottom{
    font-size:17px !important;
    letter-spacing:3px !important;
  }

  .wof-title-block p{
    white-space:normal !important;
  }

  .wof-hero-cowboy{
    display:none !important;
  }
}


/* Native Charakter rechts wieder sichtbar */
.wof-hero-native{
    display:block !important;
    opacity:1 !important;
    right:2.2vw !important;
    bottom:38px !important;
    width:clamp(300px, 22vw, 430px) !important;
    max-height:660px !important;
    z-index:2 !important;
    filter:drop-shadow(0 18px 28px rgba(0,0,0,.92)) contrast(1.04) saturate(.9) !important;
}

/* Serverstatus bleibt über dem Native */
.wof-floating-status{
    z-index:8 !important;
}

/* Auf 1920x1080 sitzt er rechts wie im Entwurf */
@media (min-width:1700px) and (max-width:2100px){
    .wof-hero-native{
        right:2.8vw !important;
        bottom:42px !important;
        width:405px !important;
    }
}

/* Bei kleineren Bildschirmen nicht quetschen */
@media (max-width:1500px){
    .wof-hero-native{
        opacity:.35 !important;
        right:-80px !important;
        width:330px !important;
    }
}

@media (max-width:760px){
    .wof-hero-native{
        display:none !important;
    }
}


/* Serverstatus unten links neben Discord, vier Karten Layout */


.wof-lower-layout{
  width:min(1500px, calc(100vw - 140px)) !important;
  max-width:1500px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  grid-template-columns:1.05fr .92fr .86fr .9fr !important;
  gap:14px !important;
}

.server-card{
  background:
    radial-gradient(circle at 50% 10%, rgba(83,224,92,.12), transparent 34%),
    linear-gradient(180deg, rgba(12,11,9,.87), rgba(6,6,5,.88)) !important;
}

.server-status-center{
  text-align:center;
  padding:10px 0 15px;
  border-bottom:1px solid rgba(255,255,255,.075);
  margin-bottom:6px;
}

.server-led{
  width:16px;
  height:16px;
  border-radius:50%;
  margin:0 auto 8px;
  box-shadow:0 0 18px rgba(83,224,92,.45);
}

.server-led.online{
  background:#53e05c;
}

.server-led.offline{
  background:#d84b40;
  box-shadow:0 0 18px rgba(216,75,64,.35);
}

.server-status-center strong{
  display:block;
  color:#fff1db;
  font-size:22px;
  text-transform:uppercase;
  letter-spacing:.8px;
}

.server-status-center span{
  display:block;
  margin-top:5px;
  color:#c2b5a2;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.8px;
}

.server-connect{
  background:linear-gradient(180deg, #b67e2e, #7b4e16) !important;
}

.server-card .discord-row b,
.discord-card .discord-row b{
  max-width:54% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* 1920x1080: Karten weiter links und alles sichtbar */
@media (min-width:1700px) and (max-width:2100px){
  .wof-lower-layout{
    width:1490px !important;
    max-width:1490px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    margin-top:64px !important;
    grid-template-columns:1.08fr .94fr .84fr .9fr !important;
  }

  .wof-home-card{
    min-height:342px !important;
    max-height:375px !important;
  }

  .wof-hero-native{
    right:1.1vw !important;
    width:360px !important;
    opacity:.9 !important;
  }
}

/* Kleinere Monitore: Karten untereinander */
@media (max-width:1500px){
  .wof-lower-layout{
    width:min(1120px, calc(100vw - 40px)) !important;
    max-width:calc(100vw - 40px) !important;
    grid-template-columns:1fr !important;
  }
}


/* Alte Statusbereiche vollständig ausblenden - nur Premium-Karten bleiben aktiv */
.server-status:not(.server-card),
.discord-status:not(.discord-card),
.status-section,
.status-grid,
.old-status,
.old-discord,
.server-widget:not(.server-card),
.discord-widget:not(.discord-card),
.legacy-status,
.legacy-discord {
  display:none !important;
}

/* Premium Reihenfolge: News | Changes | Serverstatus | Discord */
.wof-lower-layout{
  grid-template-columns:1.05fr .92fr .86fr .9fr !important;
}

.wof-server-box{
  display:none !important;
}


/* Premium Serverstatus auf Hauptseite wieder aktiv */
.wof-floating-status{
  display:block !important;
  position:absolute !important;
  top:62px !important;
  right:8vw !important;
  width:345px !important;
  margin:0 !important;
  transform:none !important;
  z-index:8 !important;
}

/* Untere Karten wieder ohne Serverkarte: News | Changes | Discord */
.wof-lower-layout{
  grid-template-columns:1.08fr .96fr 1fr !important;
  width:min(1260px, calc(100vw - 520px)) !important;
  max-width:1260px !important;
  margin-left:auto !important;
  margin-right:8vw !important;
}

/* alte / doppelte Statusbereiche bleiben aus */
.server-status:not(.wof-floating-status),
.discord-status:not(.discord-card),
.status-section,
.status-grid,
.old-status,
.old-discord,
.legacy-status,
.legacy-discord{
  display:none !important;
}

@media (min-width:1700px) and (max-width:2100px){
  .wof-floating-status{
    top:64px !important;
    right:8.5vw !important;
    width:350px !important;
  }

  .wof-lower-layout{
    width:1260px !important;
    max-width:1260px !important;
    margin-right:8.5vw !important;
    grid-template-columns:1.08fr .96fr 1fr !important;
  }

  .wof-hero-native{
    right:2.2vw !important;
    bottom:42px !important;
    width:390px !important;
    opacity:1 !important;
  }
}

@media (max-width:1500px){
  .wof-floating-status{
    position:relative !important;
    top:auto !important;
    right:auto !important;
    width:min(420px, calc(100vw - 40px)) !important;
    margin:26px auto 0 !important;
  }

  .wof-lower-layout{
    width:min(1120px, calc(100vw - 40px)) !important;
    max-width:calc(100vw - 40px) !important;
    margin:36px auto 0 !important;
    grid-template-columns:1fr !important;
  }
}


/* FINAL: Serverstatus unten links von Discord, oben entfernt */
.wof-floating-status{
  display:none !important;
}

.wof-lower-layout{
  width:min(1500px, calc(100vw - 120px)) !important;
  max-width:1500px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  grid-template-columns:1.08fr .94fr .86fr .92fr !important;
  gap:14px !important;
}

.server-card{
  display:block !important;
  background:
    radial-gradient(circle at 50% 10%, rgba(83,224,92,.12), transparent 34%),
    linear-gradient(180deg, rgba(12,11,9,.87), rgba(6,6,5,.88)) !important;
}

.server-status-center{
  text-align:center;
  padding:10px 0 15px;
  border-bottom:1px solid rgba(255,255,255,.075);
  margin-bottom:6px;
}

.server-led{
  width:16px;
  height:16px;
  border-radius:50%;
  margin:0 auto 8px;
}

.server-led.online{
  background:#53e05c;
  box-shadow:0 0 18px rgba(83,224,92,.45);
}

.server-led.offline{
  background:#d84b40;
  box-shadow:0 0 18px rgba(216,75,64,.35);
}

.server-status-center strong{
  display:block;
  color:#fff1db;
  font-size:20px;
  text-transform:uppercase;
  letter-spacing:.7px;
}

.server-status-center span{
  display:block;
  margin-top:5px;
  color:#c2b5a2;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.8px;
}

.server-connect{
  background:linear-gradient(180deg, #b67e2e, #7b4e16) !important;
}

.server-card .discord-row b,
.discord-card .discord-row b{
  max-width:54% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* 1920x1080: Karten sauber nach links und komplett sichtbar */
@media (min-width:1700px) and (max-width:2100px){
  .wof-lower-layout{
    width:1490px !important;
    max-width:1490px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    margin-top:64px !important;
    grid-template-columns:1.08fr .94fr .86fr .92fr !important;
  }

  .wof-home-card{
    min-height:342px !important;
    max-height:380px !important;
  }

  .wof-hero-native{
    right:1.2vw !important;
    width:355px !important;
    opacity:.9 !important;
  }
}

/* Kleinere Monitore: Karten untereinander */
@media (max-width:1500px){
  .wof-lower-layout{
    width:min(1120px, calc(100vw - 40px)) !important;
    max-width:calc(100vw - 40px) !important;
    margin:36px auto 0 !important;
    grid-template-columns:1fr !important;
  }
}


/* REBUILD: Unterer Bereich garantiert 4 Karten */
.wof-floating-status{
  display:none !important;
}

.wof-lower-layout{
  display:grid !important;
  grid-template-columns:1.08fr .94fr .86fr .92fr !important;
  gap:14px !important;
  width:min(1500px, calc(100vw - 120px)) !important;
  max-width:1500px !important;
  margin:64px auto 0 !important;
  box-sizing:border-box !important;
}

.wof-home-card{
  display:block !important;
  min-width:0 !important;
}

.server-card{
  display:block !important;
  visibility:visible !important;
  opacity:1 !important;
  background:
    radial-gradient(circle at 50% 10%, rgba(83,224,92,.12), transparent 34%),
    linear-gradient(180deg, rgba(12,11,9,.87), rgba(6,6,5,.88)) !important;
}

.server-status-center{
  text-align:center;
  padding:10px 0 15px;
  border-bottom:1px solid rgba(255,255,255,.075);
  margin-bottom:6px;
}

.server-led{
  width:16px;
  height:16px;
  border-radius:50%;
  margin:0 auto 8px;
}

.server-led.online{
  background:#53e05c;
  box-shadow:0 0 18px rgba(83,224,92,.45);
}

.server-led.offline{
  background:#d84b40;
  box-shadow:0 0 18px rgba(216,75,64,.35);
}

.server-status-center strong{
  display:block;
  color:#fff1db;
  font-size:20px;
  text-transform:uppercase;
  letter-spacing:.7px;
}

.server-status-center span{
  display:block;
  margin-top:5px;
  color:#c2b5a2;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.8px;
}

.server-connect{
  background:linear-gradient(180deg, #b67e2e, #7b4e16) !important;
}

.server-card .discord-row b,
.discord-card .discord-row b{
  max-width:54% !important;
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

@media (min-width:1700px) and (max-width:2100px){
  .wof-lower-layout{
    width:1490px !important;
    max-width:1490px !important;
    margin:64px auto 0 !important;
    grid-template-columns:1.08fr .94fr .86fr .92fr !important;
  }

  .wof-home-card{
    min-height:342px !important;
    max-height:380px !important;
  }
}

@media (max-width:1500px){
  .wof-lower-layout{
    width:min(1120px, calc(100vw - 40px)) !important;
    max-width:calc(100vw - 40px) !important;
    margin:36px auto 0 !important;
    grid-template-columns:1fr !important;
  }
}

/* WOF status cards connected to admin/status.php */
.wof-lower-layout{
  grid-template-columns:1.08fr .94fr .86fr .92fr !important;
  width:min(1500px, calc(100vw - 120px)) !important;
  max-width:1500px !important;
  margin:64px auto 0 !important;
}
.server-card{display:block!important;visibility:visible!important;opacity:1!important}
.server-status-center{text-align:center;padding:10px 0 15px;border-bottom:1px solid rgba(255,255,255,.075);margin-bottom:6px}
.server-led{width:16px;height:16px;border-radius:50%;margin:0 auto 8px}
.server-led.online{background:#53e05c;box-shadow:0 0 18px rgba(83,224,92,.45)}
.server-led.offline{background:#d84b40;box-shadow:0 0 18px rgba(216,75,64,.35)}
.server-status-center strong{display:block;color:#fff1db;font-size:20px;text-transform:uppercase;letter-spacing:.7px}
.server-status-center span{display:block;margin-top:5px;color:#c2b5a2;font-size:12px;text-transform:uppercase;letter-spacing:.8px}
.server-connect{background:linear-gradient(180deg,#b67e2e,#7b4e16)!important}
@media(max-width:1500px){.wof-lower-layout{grid-template-columns:1fr!important;width:min(1120px,calc(100vw - 40px))!important}}