@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@500;600;700;800;900&family=Inter:wght@400;500;600;700;800;900&display=swap');
:root{--bg:#050b18;--panel:#09182b;--cyan:#00caff;--blue:#087dff;--white:#f5f8ff;--muted:#afc1d6;--line:#173452}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--bg);color:var(--white);font-family:Inter,Arial,sans-serif}
a{color:inherit;text-decoration:none}
.topbar{min-height:78px;padding:12px clamp(18px,4vw,65px);display:flex;align-items:center;justify-content:space-between;gap:22px;background:#040a17f5;border-bottom:1px solid #087dff70;position:relative;z-index:5}
.brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
.logo{font-family:'Barlow Condensed',Impact,sans-serif;font-weight:900;font-style:italic;font-size:44px;letter-spacing:-3px;color:#08caff;text-shadow:0 0 18px #008dff}
.brandname{display:flex;flex-direction:column;line-height:1.15;letter-spacing:1px}
.brandname b{font-size:12px}.brandname small{color:var(--cyan);font-size:10px;letter-spacing:2px;margin-top:5px}
nav{display:flex;align-items:center;gap:clamp(12px,2vw,28px)}
nav a{font-size:12px;color:#d6e3f3;white-space:nowrap;transition:color .2s}
nav a:hover,nav a.active{color:var(--cyan)}
nav a.active{border-bottom:2px solid var(--cyan);padding:10px 0}
.join-top{font-size:10px;font-weight:800;white-space:nowrap;padding:12px 14px;border:1px solid var(--cyan);border-radius:4px;box-shadow:0 0 15px #008dff30}
.join-top b{color:var(--cyan);margin-left:8px;font-size:15px}
.server-hero{height:460px;min-height:410px;position:relative;overflow:hidden;display:flex;align-items:center;background:#071326}
.server-bg{position:absolute;inset:0;background:url('/assets/ftg-wow/ftg-hafen-hero.jpg') center 55%/cover no-repeat}
.server-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(3,8,19,.97),rgba(3,8,19,.78) 38%,rgba(3,8,19,.18) 100%),linear-gradient(0deg,#050b18,transparent 25%)}
.server-intro{position:relative;margin-left:clamp(22px,8vw,125px);max-width:690px;padding:42px 20px 48px 0}
.eyebrow,.section-kicker{font-size:10px;letter-spacing:2.8px;color:var(--cyan);font-weight:800}
.eyebrow{display:flex;align-items:center;gap:9px;margin:0 0 15px}
.eyebrow span{width:7px;height:7px;background:var(--cyan);border-radius:50%;box-shadow:0 0 12px var(--cyan)}
.server-intro h1{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(52px,7vw,86px);font-weight:900;font-style:italic;line-height:.88;letter-spacing:-.5px;margin:0;text-shadow:0 4px 25px #000}
.server-intro h1 span{color:var(--cyan);text-shadow:0 0 25px #00aaff55}
.lead{font-size:18px;font-weight:700;margin:20px 0 8px}
.intro-text{max-width:510px;color:#c4d3e5;font-size:12px;line-height:1.8;margin:0 0 22px}
.button{display:inline-flex;align-items:center;justify-content:center;gap:20px;padding:13px 17px;border:1px solid #00bfff;border-radius:4px;background:#06152bd9;font-size:10px;font-weight:800;letter-spacing:.5px;transition:.2s}
.button:hover{transform:translateY(-2px);box-shadow:0 0 23px #008dff50}
.button b,.button span{color:var(--cyan);font-size:16px}
.hero-stamp{position:absolute;right:7%;top:42%;color:var(--cyan);font-family:'Barlow Condensed',sans-serif;font-style:italic;font-weight:900;font-size:55px;text-shadow:0 0 22px #00aaff;transform:rotate(-8deg)}
.hero-stamp span{display:block;text-align:center;font:800 9px Inter,sans-serif;letter-spacing:2px;color:#e6f5ff;line-height:1.7}
.hero-bottom{position:absolute;bottom:18px;left:clamp(22px,8vw,125px);display:flex;gap:13px;align-items:center;color:#b6cce2;font-size:9px;letter-spacing:1.7px}
.hero-bottom i{width:20px;height:1px;background:var(--cyan)}
.server-section{padding:70px clamp(20px,7vw,105px) 65px;background:linear-gradient(180deg,#050b18,#071426)}
.section-heading{display:flex;align-items:end;justify-content:space-between;gap:25px;margin-bottom:28px}
.section-kicker{margin:0 0 8px}
.section-heading h2,.tour-banner h2{font-family:'Barlow Condensed',Impact,sans-serif;font-size:clamp(35px,4vw,50px);line-height:1.05;margin:0;font-weight:800}
.section-heading h2 span,.tour-banner h2 span{color:var(--cyan)}
.section-heading>p{font-size:12px;color:var(--muted);max-width:310px;margin:0 0 4px;line-height:1.8}
.server-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.server-card{overflow:hidden;border:1px solid #17446b;border-radius:8px;background:linear-gradient(145deg,#0c1e33,#071222);box-shadow:0 10px 40px #0002;transition:border-color .25s,transform .25s}
.server-card:hover{transform:translateY(-4px);border-color:var(--cyan);box-shadow:0 12px 38px #008dff20}
.card-image{height:245px;position:relative;overflow:hidden;background:#10243b}
.card-image img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .5s}
.server-card:hover .card-image img{transform:scale(1.045)}
.image-shade{position:absolute;inset:0;background:linear-gradient(0deg,#071222 0%,transparent 75%),linear-gradient(90deg,#04102050,transparent)}
.game-label{position:absolute;top:17px;left:18px;background:#061426df;border:1px solid #00caff85;border-radius:3px;padding:7px 10px;color:#7fe5ff;font-size:9px;font-weight:800;letter-spacing:1.4px}
.game-symbol{position:absolute;right:18px;bottom:10px;font-size:36px;filter:drop-shadow(0 0 12px #008dff)}
.card-content{padding:23px 24px 24px}
.card-topline{display:flex;justify-content:space-between;align-items:center;gap:10px}
.game-tag{color:var(--cyan);font-size:9px;letter-spacing:1.3px;font-weight:800}
.server-number{color:#a7bdd4;font-size:9px;border:1px solid #244866;border-radius:3px;padding:5px 7px}
.card-content h3{font-family:'Barlow Condensed',sans-serif;font-size:32px;line-height:1.1;margin:13px 0 9px}
.card-description{color:#b9cadd;font-size:12px;line-height:1.8;min-height:44px;margin:0 0 19px}
.status-row{display:flex;align-items:center;gap:11px;background:#071426;border:1px solid #19334d;padding:12px;border-radius:4px}
.status-indicator{width:9px;height:9px;flex-shrink:0;border-radius:50%;background:#8192a5;box-shadow:0 0 8px #8192a544}
.status-row div{display:flex;flex-direction:column;gap:4px}
.status-row b{font-size:11px}.status-row small{font-size:10px;color:#93a9c0}
.card-divider{height:1px;background:var(--line);margin:19px 0 13px}
.detail-row{display:flex;justify-content:space-between;gap:12px;padding:6px 0;font-size:10px;color:#9eb2c9}
.detail-row b{font-weight:600;color:#e0eaf5;text-align:right}
.card-actions{display:flex;align-items:center;flex-wrap:wrap;gap:15px;margin-top:20px}
.button-primary{background:linear-gradient(110deg,#087cff,#00bfe9);border-color:#0bbcff;box-shadow:0 0 18px #008dff25}
.button-primary span{color:#fff}
.text-link{font-size:10px;color:#a9c5df}.text-link:hover{color:var(--cyan)}
.server-note{font-size:10px;line-height:1.8;color:#8299b2;margin:20px 0 0}
.tour-banner{margin:0 clamp(20px,7vw,105px) 65px;padding:30px;display:flex;align-items:center;justify-content:space-between;gap:22px;border:1px solid #087dff70;background:linear-gradient(105deg,#0b2440,#071426)}
.tour-banner h2{margin:7px 0}.tour-banner p:last-child{font-size:11px;color:#afc2d8;margin:0}
.tour-banner .button{flex-shrink:0}
.footer{padding:26px clamp(20px,7vw,105px) 18px;display:flex;align-items:center;flex-wrap:wrap;gap:22px;border-top:1px solid #17304a;background:#030814}
.footer .logo{font-size:35px}.footer .brandname b{font-size:10px}.footer .brandname small{font-size:8px}
.footer>p{font-size:10px;color:#b4c5d9;margin:0 auto 0 0}.footer>p span{color:var(--cyan)}
.footer-links{display:flex;gap:18px}.footer-links a{font-size:10px;color:#c3d0e0}.footer-links a:hover{color:var(--cyan)}
.copyright{flex-basis:100%;border-top:1px solid #14263d;padding-top:13px;color:#71869e;font-size:8px;letter-spacing:1.5px}
@media(max-width:1050px){.topbar{flex-wrap:wrap}.topbar nav{order:3;flex-basis:100%;justify-content:center;flex-wrap:wrap;padding:6px}.server-hero{height:430px}.server-grid{gap:14px}.card-content{padding:18px}.card-image{height:210px}}
@media(max-width:700px){.topbar{gap:12px}.logo{font-size:36px}.brandname b{font-size:10px}.brandname small{font-size:8px}.topbar nav{justify-content:flex-start;gap:12px 18px}.topbar nav a{font-size:10px}.join-top{font-size:9px;padding:9px}.server-hero{height:auto;min-height:570px}.server-bg{background-position:60% center}.server-shade{background:linear-gradient(90deg,#030813ef,#0308138a),linear-gradient(0deg,#050b18,transparent 50%)}.server-intro{margin-left:22px;padding:65px 18px 90px 0}.server-intro h1{font-size:clamp(49px,12vw,70px)}.lead{font-size:15px}.intro-text{font-size:11px}.hero-stamp{display:none}.hero-bottom{left:22px;right:15px;gap:8px;font-size:7px;letter-spacing:.8px}.server-section{padding:50px 16px}.section-heading{align-items:flex-start;flex-direction:column;gap:9px}.server-grid{grid-template-columns:1fr;gap:18px}.card-image{height:230px}.card-content h3{font-size:29px}.card-description{min-height:0}.tour-banner{margin:0 16px 40px;padding:22px;align-items:flex-start;flex-direction:column}.tour-banner .button{width:100%}.footer{padding:25px 20px 17px;gap:15px}.footer>p{flex-basis:100%;order:2}.footer .brand{order:1}.footer-links{order:3;flex-wrap:wrap}.copyright{order:4}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

/* FTG-WOW Abgleich mit der Startseite */
.topbar {
  padding: 12px clamp(16px, 4vw, 64px);
}

nav {
  gap: clamp(10px, 1.6vw, 25px);
}

nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #e0e9f8;
}

nav a.active {
  padding: 12px 15px;
  border: 1px solid #078bff;
  border-radius: 4px;
  box-shadow: 0 0 18px #008bff50;
}

.join-top {
  padding: 13px 15px;
  box-shadow: 0 0 15px #008dff40;
}

.join-top b {
  font-size: 16px;
}

.server-intro {
  margin-left: clamp(24px, 4vw, 65px);
}

.server-section {
  padding: 60px clamp(18px, 3.5vw, 55px) 55px;
}

.tour-banner {
  margin-left: clamp(20px, 4vw, 65px);
  margin-right: clamp(20px, 4vw, 65px);
}

@media (max-width: 700px) {
  .topbar {
    gap: 10px;
  }

  nav {
    justify-content: flex-start;
    gap: 12px 17px;
  }

  nav a {
    font-size: 10px;
  }

  .join-top {
    font-size: 9px;
    padding: 10px;
  }

  .server-intro {
    margin-left: 20px;
  }

  .server-section {
    padding: 50px 16px;
  }
}

/* Kopfzeile exakt an FTG-WOW-Startseite angleichen */
.topbar {
  min-height: 78px;
  padding: 12px clamp(16px, 4vw, 64px);
  gap: 22px;
}

.brand {
  gap: 12px;
  flex-shrink: 0;
}

.logo {
  font-size: 44px;
  letter-spacing: -3px;
}

.brandname {
  line-height: 1.15;
  letter-spacing: 1px;
}

.brandname b {
  font-size: 12px;
}

.brandname small {
  font-size: 10px;
  letter-spacing: 2px;
  margin-top: 5px;
}

nav {
  gap: clamp(10px, 1.6vw, 25px);
}

nav a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #e0e9f8;
  padding: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

nav a.active {
  padding: 12px 15px;
  border: 1px solid #078bff;
  border-radius: 4px;
  box-shadow: 0 0 18px #008bff50;
}

.join-top {
  padding: 13px 15px;
  box-shadow: 0 0 15px #008dff40;
}

.join-top b {
  font-size: 16px;
  margin-left: 8px;
}

@media (max-width: 1200px) {
  .topbar {
    flex-wrap: wrap;
  }

  .topbar nav {
    order: 3;
    flex-basis: 100%;
    justify-content: center;
    flex-wrap: wrap;
    padding: 4px 0;
  }
}

@media (max-width: 700px) {
  .topbar {
    gap: 10px;
  }

  .logo {
    font-size: 36px;
  }

  .brandname b {
    font-size: 10px;
  }

  .brandname small {
    font-size: 8px;
  }

  .topbar nav {
    justify-content: flex-start;
    gap: 12px 17px;
  }

  .topbar nav a {
    font-size: 10px;
  }

  .join-top {
    font-size: 9px;
    padding: 10px;
  }
}

/* Exakte Kopfzeilenwerte der FTG-WOW-Startseite */
.topbar {
  min-height: 78px;
  padding: 12px clamp(16px, 4vw, 64px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 22px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.logo {
  font-family: 'Barlow Condensed', Impact, sans-serif;
  font-weight: 900;
  font-style: italic;
  font-size: 44px;
  letter-spacing: -3px;
  color: #08caff;
  text-shadow: 0 0 18px #008dff;
}

.brandname {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  letter-spacing: 1px;
}

.brandname b {
  font-size: 12px;
}

.brandname small {
  color: var(--cyan);
  font-size: 10px;
  letter-spacing: 2px;
  margin-top: 5px;
}

nav {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.6vw, 25px);
}

nav a {
  font-size: 12px;
  color: #e0e9f8;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 8px;
  transition: .2s;
}

.join-top {
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
  padding: 13px 15px;
  border: 1px solid var(--cyan);
  box-shadow: 0 0 15px #008dff40;
  border-radius: 4px;
}

.join-top b {
  color: var(--cyan);
  font-size: 16px;
  margin-left: 8px;
}