@font-face{font-family:"Open Sans";src:url("assets/fonts/OpenSans-Regular.ttf") format("truetype");font-style:normal;font-weight:400;font-display:swap;}
@font-face{font-family:"Open Sans";src:url("assets/fonts/OpenSans-Semibold.ttf") format("truetype");font-style:normal;font-weight:600;font-display:swap;}
@font-face{font-family:"Open Sans";src:url("assets/fonts/OpenSans-Bold.ttf") format("truetype");font-style:normal;font-weight:700;font-display:swap;}

:root{
  --bg: #100705;
  --bg2: #1b0a06;
  --panel: rgba(30, 10, 6, .88);
  --gold: #e8bd69;
  --gold-soft: #b98b43;
  --red: #8e1711;
  --text: #f5e8d0;
  --muted: #c6ad8b;
  --line: rgba(224, 174, 88, .42);
  --header-h: 82px;
}
*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
  margin: 0; background: var(--bg); color: var(--text);
  font-family: "Open Sans", Arial, sans-serif; font-size: max(12px, 16px); line-height: 1.65;
}
a{ color: inherit; text-decoration: none; }
button, a{ -webkit-tap-highlight-color: transparent; }
.site-header{
  position: fixed; inset: 0 0 auto; z-index: 50; min-height: var(--header-h);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding: 0 clamp(18px, 4vw, 64px);
  background: linear-gradient(180deg, rgba(12,5,3,.92), rgba(12,5,3,.48));
  border-bottom: 1px solid var(--line); backdrop-filter: blur(9px);
}
.brand{ display:flex; align-items:center; gap:14px; min-width: 190px; }
.brand-mark{
  width: 62px; height: 76px; margin-top: 8px; display:grid; place-items:center;
  background: linear-gradient(145deg,#a91d16,#4b0808); border:2px solid var(--gold);
  clip-path: polygon(50% 0, 94% 13%, 90% 75%, 50% 100%, 10% 75%, 6% 13%);
  filter: drop-shadow(0 0 8px rgba(220,90,25,.45));
}
.brand-mark svg{ width: 38px; height: 46px; }
.brand-name{ color:var(--gold); font-size: max(12px, 15px); letter-spacing:.12em; line-height:1.2; text-transform:uppercase; }
.brand-sub{ display:block; color:#e6d2b0; font-size: max(12px, 12px); letter-spacing:.1em; margin-top:4px; }
.nav{ display:flex; align-items:center; justify-content:center; gap:clamp(14px,2.2vw,34px); }
.nav a{ color:#f0dfc2; font-size: max(12px, 13px); letter-spacing:.07em; text-transform:uppercase; padding:29px 0 25px; border-bottom:2px solid transparent; }
.nav a:hover, .nav a.active{ color:var(--gold); border-color:var(--gold); text-shadow:0 0 12px #a94d16; }
.header-discord{ display:flex; align-items:center; gap:9px; color:var(--gold); font-size: max(12px, 13px); border-left:1px solid var(--line); padding-left:22px; }
.header-discord svg{ width:23px; height:23px; fill:currentColor; }
.menu-toggle{ display:none; background:none; border:1px solid var(--line); color:var(--gold); padding:8px 11px; font-size: max(12px, 18px); }
.hero{
  min-height: 100svh; position:relative; display:flex; align-items:center; justify-content:center;
  padding: calc(var(--header-h) + 40px) 22px 40px; overflow:hidden; isolation:isolate;
  background: #210a06 url("assets/horde-hero.webp") center center / cover no-repeat;
}
.hero::before{ content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(15,4,2,.32),rgba(15,4,2,.1) 45%,rgba(15,4,2,.24)),linear-gradient(180deg,rgba(8,3,2,.34),transparent 38%,rgba(10,3,2,.38)); }
.hero-content{ width:min(900px,90vw); text-align:center; margin-left:clamp(80px,16vw,250px); transform:translateY(-2vh); }
.eyebrow{ color:var(--gold); text-transform:uppercase; letter-spacing:.28em; font-size: max(12px, 13px); margin:0 0 10px; text-shadow:0 2px 8px #160400; }
.hero-title{ margin:0; color:#ffe0a0; text-transform:uppercase; font-size: max(12px, clamp(38px,6vw,82px)); line-height:.98; font-weight:500; letter-spacing:.055em; text-shadow:0 4px 20px #190500,0 0 24px rgba(255,157,50,.4); }
.hero-rule{ display:flex; align-items:center; justify-content:center; gap:15px; margin:22px auto 17px; width:min(500px,80%); color:var(--gold); }
.hero-rule::before, .hero-rule::after{ content:""; height:2px; flex:1; background:linear-gradient(90deg,transparent,var(--gold)); box-shadow:0 0 8px #f80; }
.hero-rule::after{ transform:scaleX(-1); }
.horde-glyph{ font-size: max(12px, 31px); line-height:1; color:#ffd47c; text-shadow:0 0 14px #e64b14; }
.hero-subtitle{ margin:0 0 28px; color:#ffe2b0; text-transform:uppercase; letter-spacing:.16em; font-size: max(12px, clamp(17px,2vw,25px)); text-shadow:0 2px 10px #260700; }
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:12px; min-height:56px;
  padding:13px 34px; border:1px solid #e5b75e; border-radius:4px;
  color:#ffe8bd; background:linear-gradient(180deg,#29130b,#090504);
  box-shadow:0 0 0 3px rgba(14,5,2,.55),0 0 22px rgba(237,119,27,.35),inset 0 1px rgba(255,230,175,.22);
  font-family:inherit; font-size: max(12px, 15px); font-weight:bold; letter-spacing:.12em; text-transform:uppercase;
  transition:transform .2s, box-shadow .2s;
}
.btn:hover{ transform:translateY(-2px); box-shadow:0 0 0 3px rgba(14,5,2,.55),0 0 30px rgba(237,119,27,.6); }
.btn-discord svg{ width:22px; height:22px; fill:currentColor; }
.features{
  position:absolute; bottom:0; left:0; right:0; display:grid; grid-template-columns:repeat(4,1fr);
  padding:25px clamp(12px,5vw,80px) 28px; background:linear-gradient(180deg,rgba(12,4,2,.15),rgba(12,4,2,.86));
  border-top:1px solid rgba(237,184,94,.2);
}
.feature{ text-align:center; padding:0 16px; border-right:1px solid var(--line); }
.feature:last-child{ border:0; }
.feature-icon{ color:var(--gold); font-size: max(12px, 25px); line-height:1.3; }
.feature h2{ margin:6px 0 2px; color:var(--gold); font-size: max(12px, 14px); letter-spacing:.08em; text-transform:uppercase; }
.feature p{ margin:0; color:#e0c9a6; font-size: max(12px, 13px); }
.page-hero{
  min-height:54vh; display:flex; align-items:flex-end; padding:150px clamp(22px,8vw,120px) 54px;
  background:linear-gradient(90deg,rgba(13,4,2,.88),rgba(13,4,2,.34)),url("assets/horde-hero.webp") center 42%/cover no-repeat;
  border-bottom:1px solid var(--line);
}
.page-hero h1{ margin:0; color:var(--gold); font-size: max(12px, clamp(36px,5vw,64px)); font-weight:500; letter-spacing:.04em; text-transform:uppercase; }
.page-hero p{ max-width:720px; margin:12px 0 0; font-size: max(12px, 17px); color:#f0ddc1; }
.content{ width:min(1120px,calc(100% - 44px)); margin:0 auto; padding:70px 0 90px; }
.content h2{ color:var(--gold); font-weight:500; font-size: max(12px, clamp(25px,3vw,36px)); margin:0 0 14px; }
.content h3{ color:#e9c27d; font-size: max(12px, 20px); font-weight:500; margin:28px 0 8px; }
.content p, .content li{ color:#e0d0b8; font-size: max(12px, 16px); }
.lead{ font-size: max(12px, 19px) !important; color:#f3e4ce !important; max-width:850px; }
.cards{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:34px; }
.card{ padding:26px; background:linear-gradient(145deg,rgba(70,25,12,.56),rgba(23,8,5,.9)); border:1px solid var(--line); box-shadow:0 12px 32px rgba(0,0,0,.2); }
.card h3{ margin-top:0; }
.stat-row{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px; }
.stat{ text-align:center; padding:25px; border:1px solid var(--line); background:rgba(70,25,12,.28); }
.stat strong{ display:block; color:var(--gold); font-size: max(12px, 25px); }
.contact-panel{ border:1px solid var(--line); padding:28px; background:rgba(70,25,12,.28); max-width:760px; }
.site-footer{ border-top:1px solid var(--line); background:linear-gradient(180deg,#1b0905,#090403); padding:30px 22px 22px; text-align:center; }
.footer-top{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:clamp(18px,4vw,52px); }
.footer-brand{ color:var(--gold); font-size: max(12px, 15px); letter-spacing:.12em; text-transform:uppercase; }
.footer-links{ display:flex; flex-wrap:wrap; justify-content:center; gap:26px; }
.footer-links a{ color:#e5d0ae; font-size: max(12px, 13px); }
.footer-links a:hover{ color:var(--gold); }
.copyright{ margin:20px 0 0; color:#bba383; font-size: max(12px, 12px); }
.legal-note{ color:#d5b88d; font-size: max(12px, 13px); }
@media (max-width: 900px) {
  .site-header{ min-height:70px; padding:0 16px; }
  .brand{ min-width:0; }
  .brand-mark{ width:48px; height:60px; }
  .brand-mark svg{ width:30px; height:36px; }
  .brand-name{ font-size: max(12px, 13px); }
  .brand-sub{ font-size: max(12px, 12px); }
  .menu-toggle{ display:block; margin-left:auto; }
  .nav{ display:none; position:absolute; top:70px; left:0; right:0; padding:10px 22px 20px; background:rgba(13,5,3,.97); border-bottom:1px solid var(--line); flex-direction:column; gap:0; }
  .nav.open{ display:flex; }
  .nav a{ width:100%; padding:12px 0; text-align:center; }
  .header-discord{ padding-left:14px; }
  .hero{ min-height:100svh; background-position:38% center; padding-bottom:230px; }
  .hero-content{ margin:0; transform:translateY(-5vh); }
  .features{ grid-template-columns:repeat(2,1fr); row-gap:16px; padding:18px 12px 20px; }
  .feature:nth-child(2){ border-right:0; }
  .feature h2{ font-size: max(12px, 12px); }
  .feature p{ font-size: max(12px, 12px); }
}
@media (max-width: 560px) {
  .brand-sub{ display:none; }
  .brand-name{ max-width:135px; }
  .header-discord{ border:0; padding:0; }
  .header-discord span{ display:none; }
  .hero{ background-position:32% center; padding:110px 18px 260px; }
  .hero::before{ background:linear-gradient(180deg,rgba(10,3,2,.35),rgba(10,3,2,.18) 42%,rgba(10,3,2,.7)); }
  .hero-title{ font-size: max(12px, clamp(34px,10vw,52px)); }
  .hero-content{ width:100%; transform:translateY(-3vh); }
  .eyebrow{ font-size: max(12px, 12px); letter-spacing:.16em; }
  .hero-subtitle{ font-size: max(12px, 15px); letter-spacing:.1em; }
  .btn{ min-height:52px; padding:12px 24px; font-size: max(12px, 13px); }
  .feature{ padding:0 6px; }
  .feature-icon{ font-size: max(12px, 21px); }
  .page-hero{ min-height:46vh; padding-top:130px; }
  .content{ padding:48px 0 60px; }
  .cards, .stat-row{ grid-template-columns:1fr; }
}

.site-header{ min-height: 76px; padding-left: clamp(12px, 2.4vw, 38px); padding-right: clamp(18px, 3vw, 48px); }
.brand{ gap: 12px; min-width: 0; height: 76px; }
.brand-banner{ width: 76px; height: 96px; object-fit: contain; align-self: flex-start; margin-top: 0; filter: drop-shadow(0 4px 9px rgba(0,0,0,.75)); }
.brand-name{ font-size: max(12px, 15px); font-weight: 600; letter-spacing: .12em; max-width: 260px; text-shadow: 0 1px 5px #000, 0 0 12px rgba(222,153,50,.35); }
.header-discord{ border-left: 1px solid var(--line); padding-left: 18px; }
.header-discord svg{ width: 27px; height: 27px; }
.hero{ min-height: 100svh; padding-top: 76px; background-position: center center; }
.hero-content{ width: min(1050px, 92vw); margin: 0 auto; transform: translateY(-2vh); text-align: center; }
.hero-kicker{
  margin: 0 0 8px; text-transform: uppercase; letter-spacing: .22em;
  font-size: max(12px, clamp(24px, 3.2vw, 43px)); line-height: 1.15; font-weight: 600;
  background: linear-gradient(180deg,#fff1c5 0%,#f5d68e 28%,#c88b35 62%,#fff0bb 82%,#9b5c1b 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .45px rgba(255,222,157,.55);
  filter: drop-shadow(0 3px 1px #321006) drop-shadow(0 0 15px rgba(255,155,48,.45));
}
.hero-title{
  margin: 0; font-size: max(12px, clamp(76px, 9vw, 126px)); line-height: .98; letter-spacing: .075em;
  font-weight: 500; text-transform: uppercase;
  background: linear-gradient(180deg,#fff6d5 0%,#f7d98e 22%,#d79a43 48%,#fff0b8 66%,#9c5d20 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .8px rgba(255,226,164,.7);
  filter: drop-shadow(0 5px 1px #2a0803) drop-shadow(0 0 22px rgba(255,157,48,.52));
}
.hero-rule{ width: min(610px, 76%); gap: 17px; margin: 24px auto 18px; }
.hero-rule::before, .hero-rule::after{ height: 2px; background: linear-gradient(90deg,transparent,#f4c56f 22%,#fff0bb 50%,#d18b36); box-shadow: 0 0 8px #ed8a28, 0 0 17px rgba(237,138,40,.55); }
.hero-rule::after{ transform: scaleX(-1); }
.hero-emblem{ width: 54px; height: 58px; object-fit: contain; filter: drop-shadow(0 2px 5px #180400) drop-shadow(0 0 10px rgba(255,125,26,.6)); }
.hero-subtitle{ margin: 0 0 30px; font-size: max(12px, clamp(22px, 2.6vw, 34px)); letter-spacing: .16em; color: #ffe6b0; text-shadow: 0 2px 4px #260800,0 0 16px rgba(255,159,52,.55); }
.btn-discord{ min-height: 64px; padding: 15px 42px; font-size: max(12px, 17px); letter-spacing: .13em; background: linear-gradient(180deg,#a91c16 0%,#74100d 55%,#4b0908 100%); border: 1px solid #f1c36e; box-shadow: 0 0 0 3px rgba(22,5,3,.72),0 0 25px rgba(210,61,22,.52),inset 0 1px rgba(255,235,190,.35); }
.btn-discord:hover{ background: linear-gradient(180deg,#c52b1d,#78110c); box-shadow: 0 0 0 3px rgba(22,5,3,.72),0 0 34px rgba(240,83,32,.72); }
.features{ padding: 22px clamp(18px,5vw,84px) 28px; }
.feature{ padding: 0 18px; }
.feature-icon{ font-size: max(12px, 38px); line-height: 1.35; text-shadow: 0 0 12px rgba(237,177,76,.55); }
.feature h2{ margin: 7px 0 4px; font-size: max(12px, 17px); letter-spacing: .1em; text-shadow: 0 1px 5px #1a0602; }
.feature p{ font-size: max(12px, 15px); color: #f0d8b2; }
@media (max-width: 900px) {
  .brand-banner{ width: 58px; height: 76px; }
  .brand-name{ font-size: max(12px, 12px); max-width: 170px; }
  .hero{ padding-top: 70px; }
  .hero-content{ margin: 0 auto; }
  .feature-icon{ font-size: max(12px, 30px); }
  .feature h2{ font-size: max(12px, 13px); }
  .feature p{ font-size: max(12px, 12px); }
}
@media (max-width: 560px) {
  .brand-banner{ width: 48px; height: 65px; }
  .brand-name{ font-size: max(12px, 12px); max-width: 145px; }
  .hero{ background-position: 36% center; padding-top: 100px; }
  .hero-kicker{ font-size: max(12px, clamp(19px, 6vw, 27px)); letter-spacing: .12em; }
  .hero-title{ font-size: max(12px, clamp(62px, 17vw, 86px)); }
  .hero-rule{ margin: 18px auto 14px; }
  .hero-emblem{ width: 44px; height: 48px; }
  .hero-subtitle{ font-size: max(12px, 18px); letter-spacing: .1em; }
  .btn-discord{ min-height: 56px; font-size: max(12px, 14px); padding: 12px 28px; }
  .features{ padding-bottom: 17px; }
  .feature-icon{ font-size: max(12px, 25px); }
  .feature h2{ font-size: max(12px, 12px); }
  .feature p{ font-size: max(12px, 12px); }
}

.brand-banner{
  width: 72px;
  height: 104px;
  object-fit: contain;
  object-position: center top;
  margin-top: 0;
  filter: drop-shadow(0 4px 9px rgba(0,0,0,.78));
}
@media (max-width: 900px) {
  .brand-banner{ width: 56px; height: 82px; }
}
@media (max-width: 560px) {
  .brand-banner{ width: 46px; height: 68px; }
}

.site-header{
  border-bottom: 0;
  background: linear-gradient(180deg, rgba(12,5,3,.96), rgba(12,5,3,.78));
}
.site-header::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 14px;
  pointer-events: none;
  background:
    linear-gradient(90deg, transparent 0, rgba(197,139,56,.9) 7%, #f2c66e 50%, rgba(197,139,56,.9) 93%, transparent 100%) center 7px / 100% 1px no-repeat;
  z-index: 0;
}
.site-header::before{
  content: "◆";
  position: absolute;
  z-index: 2;
  bottom: -9px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 19px; height: 19px;
  display: grid; place-items: center;
  color: #f5cf7c;
  font-size: max(12px, 12px);
  line-height: 1;
  background: linear-gradient(145deg,#3b1709,#100503);
  border: 1px solid #dca64e;
  box-shadow: 0 0 8px rgba(232,157,51,.5);
}
.nav{ position: relative; z-index: 3; align-self: stretch; gap: clamp(12px,2vw,30px); }
.nav a{
  position: relative;
  display: flex; align-items: center;
  padding: 0 15px;
  min-height: 100%;
  border: 0;
  color: #e9d5b3;
  transition: background .2s, color .2s;
}
.nav a:hover{ color: #ffe3a0; background: linear-gradient(180deg,rgba(125,18,12,.2),rgba(153,22,13,.48)); }
.nav a.active{
  color: #ffe2a0;
  background: linear-gradient(180deg,rgba(135,17,12,.58),rgba(104,12,8,.35));
  border: 0;
  text-shadow: 0 0 12px rgba(255,170,67,.5);
}
.nav a.active::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 9px;
  height: 2px;
  background: linear-gradient(90deg,transparent,#ffd77e 20%,#fff1c1 50%,#ffd77e 80%,transparent);
  box-shadow: 0 0 7px #f2a13d, 0 0 14px rgba(244,142,42,.65);
}
.nav a.active::before{
  content: "";
  position: absolute;
  left: 50%; bottom: 5px;
  width: 6px; height: 6px;
  transform: translateX(-50%) rotate(45deg);
  background: #ffd67b;
  box-shadow: 0 0 9px #f2a13d;
}
.header-discord{ position: relative; z-index: 3; }
.brand{ position: relative; z-index: 3; }

.features{
  padding: 24px clamp(18px,5vw,84px) 30px;
  border-top: 1px solid rgba(231,176,83,.35);
  background: linear-gradient(180deg,rgba(11,4,2,.18),rgba(11,4,2,.88));
}
.feature{
  position: relative;
  border-right: 0;
  padding: 0 24px;
}
.feature:not(:last-child)::after{
  content: "";
  position: absolute;
  top: 5%; bottom: 5%; right: 0;
  width: 2px;
  background: linear-gradient(180deg,transparent,#b77a2e 14%,#f8c46a 48%,#b77a2e 86%,transparent);
  box-shadow: 0 0 6px rgba(255,170,56,.45);
}
.feature-icon{
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f4c56f;
  height: 62px;
  margin-bottom: 5px;
  font-size: 16px;
  text-shadow: 0 0 12px rgba(237,177,76,.65);
}




.feature h2{ font-size: max(12px, 18px); margin: 5px 0 3px; letter-spacing: .09em; }
.feature p{ font-size: max(12px, 16px); }
@media (max-width: 900px) {
  .nav a{ padding: 0 9px; }
  .feature-icon{ height: 52px; }
  
  .feature h2{ font-size: max(12px, 13px); }
  .feature p{ font-size: max(12px, 12px); }
}
@media (max-width: 560px) {
  .site-header::before, .site-header::after{ display: none; }
  .nav{ align-items: center; }
  .nav a{ min-height: 42px; justify-content: center; padding: 10px 0; }
  .nav a.active::after{ bottom: 3px; }
  .nav a.active::before{ bottom: 0; }
  .features{ padding: 17px 8px 19px; }
  .feature{ padding: 0 5px; }
  .feature:not(:last-child)::after{ top: 8%; bottom: 8%; }
  .feature-icon{ height: 43px; margin-bottom: 3px; }
  
  
  
  .feature h2{ font-size: max(12px, 12px); }
  .feature p{ font-size: max(12px, 12px); }
}

:root{ --header-h: 78px; }
body{ font-family: "Open Sans", Arial, sans-serif; }
.site-header{
  min-height: var(--header-h);
  padding: 0 clamp(14px, 3vw, 46px) 0 clamp(20px, 2.8vw, 44px);
  display: flex; align-items: center; gap: clamp(14px, 2.4vw, 38px);
  background: linear-gradient(180deg, rgba(13,5,3,.93), rgba(13,5,3,.72));
  border-bottom: 1px solid rgba(226,177,91,.72);
  backdrop-filter: blur(7px);
}
.site-header::before{
  content: none;
}
.site-header::after{
  height: 20px; bottom: -1px;
  background: url("assets/header-ornament.webp") center bottom / min(698px, 52vw) 20px no-repeat,
    linear-gradient(90deg, transparent, rgba(201,148,66,.75) 12%, #e7bd6a 50%, rgba(201,148,66,.75) 88%, transparent) center 9px / 100% 1px no-repeat;
}
.brand{ height: var(--header-h); min-width: 270px; gap: 15px; position: relative; z-index: 4; }
.brand-banner{
  width: 66px; height: 98px; margin: 0; align-self: flex-start;
  object-fit: contain; object-position: center top;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.82));
}
.brand-name{
  max-width: 240px; color: #f1cb7a; font-family: "Cinzel", Georgia, serif;
  font-size: max(12px, clamp(12px, 1vw, 15px)); line-height: 1.28;
  letter-spacing: .105em; font-weight: 700; text-transform: uppercase;
  text-shadow: 0 2px 5px #000, 0 0 12px rgba(231,174,75,.25);
}
.nav{ flex: 1; gap: clamp(12px, 2.2vw, 36px); }
.nav a{
  min-height: var(--header-h); padding: 0 9px; display: flex; align-items: center;
  position: relative; border: 0; font-family: "Cinzel", Georgia, serif;
  font-size: max(12px, clamp(12px, .9vw, 14px)); letter-spacing: .075em; font-weight: 600;
  color: #f0dfc3; text-shadow: 0 1px 4px #000;
}
.nav a:hover, .nav a.active{
  color: #ffdf9a; background: linear-gradient(180deg, rgba(126,17,12,.5), rgba(126,17,12,.12));
}
.nav a.active::after{
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 8px; height: 2px;
  background: linear-gradient(90deg, transparent, #ffd16f 25%, #fff0bd 50%, #ffd16f 75%, transparent);
  box-shadow: 0 0 8px #ff9b31, 0 0 15px rgba(255,139,33,.7);
}
.header-discord{
  border-left: 1px solid rgba(218,166,83,.55); padding-left: 22px;
  min-width: 46px; display: flex; justify-content: center; align-items: center;
  position: relative; z-index: 4;
}
.header-discord img{ width: 27px; height: 27px; object-fit: contain; display: block; }
.hero{
  min-height: 100svh; padding: calc(var(--header-h) + 25px) 20px 190px;
  display: flex; justify-content: center; align-items: center;
  background-position: center center; background-size: cover;
}
.hero::before{
  background: linear-gradient(180deg, rgba(12,3,2,.32), rgba(12,3,2,.02) 35%, rgba(12,3,2,.24) 74%, rgba(9,3,2,.62));
}
.hero-content{
  width: min(1000px, 90vw); margin: 0 auto; transform: translateY(-3vh);
  text-align: center; position: relative; z-index: 2;
}
.hero-kicker{
  margin: 0 0 8px; font-family: "Cinzel", Georgia, serif;
  font-size: max(12px, clamp(21px, 2.2vw, 34px)); line-height: 1.35;
  letter-spacing: .24em; font-weight: 600; text-transform: uppercase;
  color: #f5d58d; text-shadow: 0 2px 5px #220800, 0 0 14px rgba(255,171,63,.35);
}
.hero-title{
  margin: 0; font-family: "Cinzel", Georgia, serif;
  font-size: max(12px, clamp(76px, 8.2vw, 122px)); line-height: 1.08;
  font-weight: 600; letter-spacing: .12em; padding-left: .12em;
  text-transform: uppercase;
  background: linear-gradient(180deg,#fff4c8 0%,#f8d98d 25%,#d59a43 51%,#fff0b7 72%,#9a5b20 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: .5px rgba(255,225,160,.65);
  filter: drop-shadow(0 4px 1px #260800) drop-shadow(0 0 17px rgba(255,153,46,.36));
}
.hero-rule{
  width: min(760px, 74vw); height: 64px; margin: 12px auto 10px;
  display: flex; align-items: center; justify-content: center; gap: 0;
}
.hero-rule::before, .hero-rule::after{ content: none; }
.rule-side{ display: block; width: calc((100% - 76px)/2); height: 48px; object-fit: fill; }
.hero-emblem{
  display: block; width: 64px; height: 64px; object-fit: contain;
  filter: drop-shadow(0 2px 5px #160300) drop-shadow(0 0 9px rgba(255,136,32,.42));
}
.hero-subtitle{
  margin: 0 0 30px; font-family: "Cinzel", Georgia, serif;
  font-size: max(12px, clamp(20px, 2.1vw, 30px)); line-height: 1.4;
  letter-spacing: .19em; padding-left: .19em; font-weight: 600;
  color: #ffe7b4; text-shadow: 0 2px 5px #1d0600, 0 0 13px rgba(255,160,50,.32);
}
.btn-discord{
  width: clamp(220px, 23vw, 330px); height: 76px; min-height: 76px;
  padding: 0 25px; border: 0; border-radius: 0; box-shadow: none;
  background: url("assets/cta-frame.webp") center / 100% 100% no-repeat;
  filter: drop-shadow(0 5px 8px rgba(0,0,0,.55));
  transition: transform .2s, filter .2s;
}
.btn-discord:hover{ transform: translateY(-2px); filter: drop-shadow(0 6px 12px rgba(255,120,35,.35)); }
.cta-label{
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  color: #ffdf9b; font-family: "Cinzel", Georgia, serif;
  font-size: max(12px, 15px); line-height: 1.2; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  text-shadow: 0 2px 4px #240500;
}
.cta-label img{ width: 25px; height: 25px; object-fit: contain; }
.features{
  bottom: 0; left: 0; right: 0; min-height: 166px;
  display: grid; grid-template-columns: repeat(4,minmax(0,1fr));
  align-items: center; padding: 15px clamp(20px,5vw,82px) 20px;
  background: linear-gradient(180deg,rgba(12,4,2,.06),rgba(12,4,2,.78));
  border-top: 1px solid rgba(231,181,91,.36);
}
.feature{
  min-height: 118px; padding: 0 clamp(8px,1.4vw,24px);
  border: 0; position: relative; display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
}
.feature:not(:last-child)::after{
  content: ""; position: absolute; right: 0; top: 4px; bottom: 4px;
  width: 12px; background: url("assets/feature-divider.webp") center / 12px 100% no-repeat;
  opacity: .98;
}
.feature-icon{
  height: 67px; width: 100%; display: flex; justify-content: center; align-items: center;
  margin-bottom: 3px; color: transparent; font-size: max(12px, 0); line-height: 1;
  text-shadow: none;
}
.feature-icon img{
  display: block; width: auto; height: 62px; max-width: min(112px, 70%);
  object-fit: contain; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
.feature h2{
  margin: 3px 0 2px; font-family: "Cinzel", Georgia, serif;
  font-size: max(12px, clamp(13px, 1.05vw, 17px)); line-height: 1.45;
  letter-spacing: .075em; font-weight: 700; color: #f4c76f;
  text-transform: uppercase; text-shadow: 0 2px 5px #160400;
}
.feature p{
  margin: 0; font-family: "Open Sans", Arial, sans-serif;
  font-size: max(12px, clamp(12px, .9vw, 14px)); line-height: 1.5;
  letter-spacing: .025em; color: #f1ddbb; text-shadow: 0 2px 4px #160400;
}
.site-footer{ position: relative; z-index: 3; }
@media (max-width: 900px) {
  .site-header{ min-height: 70px; gap: 12px; }
  .brand{ height: 70px; min-width: 220px; }
  .brand-banner{ width: 54px; height: 84px; }
  .brand-name{ font-size: max(12px, 12px); }
  .nav{ gap: 6px; }
  .nav a{ padding: 0 7px; font-size: max(12px, 12px); }
  .header-discord{ padding-left: 13px; min-width: 36px; }
  .hero{ padding-bottom: 220px; }
  .features{ min-height: 190px; padding-left: 12px; padding-right: 12px; }
  .feature{ min-height: 145px; }
  .feature-icon{ height: 58px; }
  .feature-icon img{ height: 52px; }
}
@media (max-width: 680px) {
  .site-header{ min-height: 68px; padding: 0 14px; }
  .brand{ min-width: 0; height: 68px; gap: 9px; }
  .brand-banner{ width: 46px; height: 72px; }
  .brand-name{ font-size: max(12px, 12px); max-width: 170px; letter-spacing: .08em; }
  .menu-toggle{ display: block; margin-left: auto; position: relative; z-index: 5; }
  .nav{
    display: none; position: absolute; top: 68px; left: 0; right: 0;
    padding: 8px 20px 18px; background: rgba(12,4,3,.98);
    border-bottom: 1px solid var(--line); flex-direction: column; gap: 0;
  }
  .nav.open{ display: flex; }
  .nav a{ width: 100%; min-height: 44px; justify-content: center; padding: 10px; }
  .nav a.active::after{ bottom: 3px; left: 34%; right: 34%; }
  .header-discord{ border-left: 1px solid var(--line); padding-left: 10px; min-width: 34px; }
  .header-discord img{ width: 23px; height: 23px; }
  .hero{ min-height: 100svh; padding: 110px 14px 300px; background-position: 37% center; }
  .hero-content{ width: 100%; transform: translateY(-2vh); }
  .hero-kicker{ font-size: max(12px, clamp(15px, 4.5vw, 22px)); letter-spacing: .16em; padding-left: .16em; }
  .hero-title{ font-size: max(12px, clamp(58px, 15vw, 82px)); letter-spacing: .09em; padding-left: .09em; }
  .hero-rule{ width: min(94vw, 580px); height: 50px; margin: 8px auto; }
  .rule-side{ width: calc((100% - 54px)/2); height: 36px; }
  .hero-emblem{ width: 48px; height: 48px; }
  .hero-subtitle{ font-size: max(12px, clamp(15px, 4.2vw, 20px)); letter-spacing: .12em; padding-left: .12em; margin-bottom: 22px; }
  .btn-discord{ width: 230px; height: 60px; min-height: 60px; }
  .cta-label{ font-size: max(12px, 12px); gap: 9px; }
  .cta-label img{ width: 21px; height: 21px; }
  .features{
    min-height: 270px; grid-template-columns: repeat(2,minmax(0,1fr));
    padding: 12px 8px 15px; row-gap: 5px;
  }
  .feature{ min-height: 118px; padding: 0 7px; }
  .feature:nth-child(2)::after{ display: none; }
  .feature:not(:last-child)::after{ top: 8px; bottom: 8px; }
  .feature-icon{ height: 53px; margin-bottom: 0; }
  .feature-icon img{ height: 47px; max-width: 90px; }
  .feature h2{ font-size: max(12px, 12px); letter-spacing: .04em; }
  .feature p{ font-size: max(12px, 12px); }
}

:root{ --header-h: 90px; }

.site-header{
  min-height: 90px;
  height: 90px;
  padding: 0 clamp(22px, 3.2vw, 52px) 0 clamp(24px, 3.2vw, 52px);
  border: 0;
  background: linear-gradient(180deg, rgba(13,5,3,.97), rgba(13,5,3,.88));
  backdrop-filter: blur(8px);
}
.site-header::before{ content: none !important; display: none !important; }
.site-header::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 27px;
  pointer-events: none;
  z-index: 2;
  background: url("assets/header-ornament.webp") center bottom / auto 27px no-repeat;
}
.brand{ height: 90px; min-width: 300px; gap: 14px; }
.brand-banner{
  width: 82px; height: 116px; margin: 0;
  object-fit: contain; object-position: center top;
  align-self: flex-start;
}
.brand-name{
  font-size: max(12px, clamp(13px, .95vw, 16px));
  line-height: 1.25;
  letter-spacing: .10em;
}
.nav{ gap: clamp(13px, 2vw, 30px); height: 90px; }
.nav a{
  height: 90px; min-height: 90px;
  padding: 0 12px;
  font-size: max(12px, clamp(12px, .85vw, 14px));
  letter-spacing: .07em;
  border: 0;
}
.nav a.active{
  background: linear-gradient(180deg, rgba(130,18,12,.64), rgba(112,13,8,.42));
}
.nav a.active::after{
  bottom: 9px; height: 2px;
  left: 8px; right: 8px;
}
.nav a.active::before{ display: none; }
.header-discord{
  height: 38px; min-width: 48px;
  padding-left: 22px;
  border-left: 1px solid rgba(211,157,75,.58);
}
.header-discord img{ width: 27px; height: 27px; }

.hero{
  height: 100svh;
  min-height: 720px;
  padding: 90px 22px 166px;
  background-position: center center;
  background-size: cover;
}
.hero::before{
  background:
    linear-gradient(90deg, rgba(12,3,2,.20), rgba(12,3,2,.02) 48%, rgba(12,3,2,.15)),
    linear-gradient(180deg, rgba(8,3,2,.20), transparent 34%, rgba(10,3,2,.18) 72%, rgba(10,3,2,.34));
}
.hero-content{
  width: min(1000px, 88vw);
  margin: 0 auto;
  transform: translateY(-5vh);
}
.hero-kicker{
  font-size: max(12px, clamp(18px, 1.75vw, 26px));
  line-height: 1.35;
  letter-spacing: .24em;
  padding-left: .24em;
  margin-bottom: 7px;
}
.hero-title{
  font-size: max(12px, clamp(72px, 7.2vw, 104px));
  line-height: 1.06;
  letter-spacing: .105em;
  padding-left: .105em;
}
.hero-rule{
  width: min(690px, 68vw);
  height: 62px;
  margin: 12px auto 8px;
  gap: 0;
}
.rule-side{
  width: calc((100% - 68px)/2);
  height: 52px;
  object-fit: fill;
}
.hero-emblem{ width: 62px; height: 62px; }
.hero-subtitle{
  font-size: max(12px, clamp(19px, 2vw, 28px));
  line-height: 1.4;
  letter-spacing: .17em;
  padding-left: .17em;
  margin: 0 0 25px;
}
.btn-discord{
  width: clamp(230px, 18vw, 280px);
  height: 68px; min-height: 68px;
  padding: 0 28px;
}
.cta-label{ font-size: max(12px, 14px); letter-spacing: .09em; }
.cta-label img{ width: 23px; height: 23px; }

.features{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 166px; min-height: 166px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  align-items: center;
  padding: 10px clamp(22px, 5vw, 78px) 13px;
  background: linear-gradient(180deg, rgba(15,5,3,.80), rgba(13,4,3,.90));
  border-top: 1px solid rgba(214,157,76,.28);
  box-shadow: inset 0 14px 24px rgba(0,0,0,.14);
}
.feature{
  min-height: 130px;
  padding: 0 18px;
  border: 0 !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: relative;
}
.feature:not(:last-child)::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  width: 10px;
  height: 112px;
  background: url("assets/feature-divider.webp") center center / auto 112px no-repeat;
  box-shadow: none;
  opacity: 1;
}
.feature-icon{
  width: 100%;
  height: 62px;
  margin: 0 0 3px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.feature-icon img{
  display: block;
  width: auto;
  height: 54px;
  max-width: 116px;
  object-fit: contain;
  filter: none;
}
.feature:nth-child(2) .feature-icon img{ height: 56px; }
.feature:nth-child(3) .feature-icon img{ height: 56px; }
.feature:nth-child(4) .feature-icon img{ height: 52px; }
.feature h2{
  margin: 2px 0 2px;
  font-size: max(12px, clamp(14px, 1.12vw, 17px));
  line-height: 1.4;
  letter-spacing: .075em;
}
.feature p{
  margin: 0;
  font-size: max(12px, clamp(12px, .95vw, 15px));
  line-height: 1.45;
  letter-spacing: .015em;
}

@media (max-width: 900px) {
  :root{ --header-h: 72px; }
  .site-header{ height: 72px; min-height: 72px; padding: 0 16px; }
  .site-header::after{ height: 20px; background-size: auto 20px; }
  .brand{ height: 72px; min-width: 210px; gap: 10px; }
  .brand-banner{ width: 60px; height: 88px; }
  .brand-name{ font-size: max(12px, 12px); }
  .nav{ height: 72px; gap: 5px; }
  .nav a{ height: 72px; min-height: 72px; padding: 0 7px; font-size: max(12px, 12px); }
  .header-discord{ padding-left: 12px; min-width: 36px; }
  .hero{ padding: 72px 18px 174px; }
  .hero-content{ transform: translateY(-3vh); }
  .features{ height: 174px; min-height: 174px; padding: 8px 12px 10px; }
  .feature{ min-height: 145px; padding: 0 8px; }
  .feature:not(:last-child)::after{ height: 100px; background-size: auto 100px; }
  .feature-icon{ height: 56px; }
  .feature-icon img{ height: 48px; max-width: 94px; }
  .feature h2{ font-size: max(12px, 13px); }
  .feature p{ font-size: max(12px, 12px); }
}
@media (max-width: 680px) {
  .site-header{ height: 68px; min-height: 68px; }
  .site-header::after{ display: none; }
  .brand{ height: 68px; min-width: 0; }
  .brand-banner{ width: 48px; height: 72px; }
  .brand-name{ font-size: max(12px, 12px); max-width: 165px; }
  .nav{ top: 68px; height: auto; }
  .nav a{ height: auto; min-height: 44px; }
  .hero{
    height: auto; min-height: 100svh;
    padding: 112px 14px 290px;
    background-position: 36% center;
  }
  .hero-content{ transform: translateY(-2vh); width: 100%; }
  .hero-kicker{ font-size: max(12px, clamp(15px, 4.4vw, 21px)); letter-spacing: .14em; padding-left: .14em; }
  .hero-title{ font-size: max(12px, clamp(58px, 15vw, 80px)); letter-spacing: .08em; padding-left: .08em; }
  .hero-rule{ width: 94vw; height: 48px; margin: 8px auto; }
  .rule-side{ width: calc((100% - 50px)/2); height: 36px; }
  .hero-emblem{ width: 46px; height: 46px; }
  .hero-subtitle{ font-size: max(12px, clamp(15px, 4vw, 19px)); letter-spacing: .1em; padding-left: .1em; margin-bottom: 20px; }
  .btn-discord{ width: 220px; height: 58px; min-height: 58px; }
  .cta-label{ font-size: max(12px, 12px); }
  .cta-label img{ width: 20px; height: 20px; }
  .features{
    height: 270px; min-height: 270px;
    grid-template-columns: repeat(2, minmax(0,1fr));
    padding: 10px 8px 12px;
    row-gap: 2px;
  }
  .feature{ min-height: 120px; padding: 0 5px; }
  .feature:nth-child(2)::after{ display: none; }
  .feature:not(:last-child)::after{ height: 90px; background-size: auto 90px; }
  .feature-icon{ height: 50px; }
  .feature-icon img{ height: 43px; max-width: 84px; }
  .feature h2{ font-size: max(12px, 12px); letter-spacing: .035em; }
  .feature p{ font-size: max(12px, 12px); }
}

:root{ --header-h: 74px; }
.site-header{
  height: 74px;
  min-height: 74px;
  padding: 0 clamp(22px, 3vw, 48px);
  gap: 18px;
  background: linear-gradient(180deg, rgba(12,5,3,.10), rgba(12,5,3,.03));
  border: 0;
  backdrop-filter: none;
  transition: background .22s ease, backdrop-filter .22s ease;
}
.site-header.is-scrolled{
  background: linear-gradient(180deg, rgba(12,5,3,.97), rgba(12,5,3,.90));
  backdrop-filter: blur(9px);
}

.site-header::before{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(90deg, rgba(194,137,55,.55), rgba(232,189,105,.9) 50%, rgba(194,137,55,.55));
  pointer-events: none;
}
.site-header::after{
  content: "";
  position: absolute;
  width: min(698px, 70vw);
  height: 25px;
  left: 50%; bottom: -1px;
  transform: translateX(-50%);
  background: url("assets/header-ornament.webp") center center / 100% 25px no-repeat;
  pointer-events: none;
  z-index: 3;
}
.brand{
  height: 74px;
  min-width: 285px;
  gap: 12px;
  position: relative;
  z-index: 4;
}
.brand-banner{
  width: 76px;
  height: 112px;
  margin: 0;
  object-fit: contain;
  object-position: top center;
  align-self: flex-start;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.65));
}
.brand-name{
  font-size: max(12px, clamp(12px, .92vw, 15px));
  line-height: 1.22;
  letter-spacing: .10em;
}
.nav{
  height: 74px;
  gap: clamp(12px, 1.8vw, 28px);
  position: relative;
  z-index: 4;
}
.nav a{
  height: 65px;
  min-height: 65px;
  align-self: flex-start;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  padding: 0 12px;
  border: 0 !important;
  border-radius: 0;
  font-size: max(12px, clamp(12px, .82vw, 14px));
  letter-spacing: .07em;
  text-shadow: 0 1px 5px rgba(0,0,0,.8);
  background: transparent;
}
.nav a:hover{ background: rgba(95,12,8,.25); }
.nav a.active{
  background: linear-gradient(180deg, rgba(127,17,12,.58), rgba(100,10,7,.34));
  box-shadow: inset 0 -2px 0 rgba(237,177,80,.95), 0 5px 15px rgba(111,18,8,.12);
  color: #f4cf82;
}
.nav a.active::after{
  content: "";
  position: absolute;
  left: 50%; bottom: -2px;
  width: 6px; height: 6px;
  transform: translateX(-50%) rotate(45deg);
  background: #f5ca75;
  box-shadow: 0 0 9px 3px rgba(255,174,57,.62);
}
.nav a.active::before{ display: none !important; }
.header-discord{
  position: relative;
  z-index: 4;
  height: 34px;
  min-width: 42px;
  padding-left: 18px;
  border-left: 1px solid rgba(211,157,75,.58);
}
.header-discord img{ width: 25px; height: 25px; object-fit: contain; }

.hero{ padding-top: 74px; }

.features{
  background: linear-gradient(180deg, rgba(13,5,3,.43), rgba(13,5,3,.62));
  border-top: 0 !important;
  box-shadow: none !important;
}

@media (max-width: 900px) {
  :root{ --header-h: 68px; }
  .site-header{ height: 68px; min-height: 68px; padding: 0 16px; }
  .site-header::after{ width: min(520px, 72vw); height: 20px; background-size: 100% 20px; }
  .brand{ height: 68px; min-width: 205px; }
  .brand-banner{ width: 58px; height: 88px; }
  .nav{ height: 68px; gap: 4px; }
  .nav a{ height: 60px; min-height: 60px; padding: 0 8px; }
  .header-discord{ padding-left: 12px; min-width: 34px; }
  .hero{ padding-top: 68px; }
}
@media (max-width: 680px) {
  .site-header{ height: 66px; min-height: 66px; }
  .site-header::after{ display: none; }
  .brand{ height: 66px; min-width: 0; }
  .brand-banner{ width: 48px; height: 72px; }
  .brand-name{ font-size: max(12px, 12px); }
  .nav{ top: 66px; height: auto; }
  .nav a{ height: auto; min-height: 44px; width: 100%; }
  .hero{ padding-top: 100px; }
}

.site-header{
  height: var(--header-h); min-height: var(--header-h);
  padding: 0 clamp(18px, 3vw, 48px) 0 clamp(18px, 2.4vw, 38px);
  display: flex; align-items: center; gap: clamp(16px, 2.2vw, 34px);
  background: transparent; border: 0; box-shadow: none; backdrop-filter: none;
  transition: background .25s ease, backdrop-filter .25s ease;
}
.site-header.is-scrolled{
  background: rgba(12, 5, 3, .70);
  backdrop-filter: blur(10px);
  box-shadow: 0 5px 18px rgba(0,0,0,.16);
}
.site-header::after{
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  left: 0; right: 0; bottom: -24px; height: 48px;
  background:
    linear-gradient(90deg, transparent 0%, rgba(190,132,48,.95) 7%, #e8bd69 50%, rgba(190,132,48,.95) 93%, transparent 100%) center 24px / 100% 1px no-repeat,
    url("assets/header-ornament-center.webp") center center / auto 48px no-repeat;
}

.brand{ flex: 0 0 auto; height: var(--header-h); min-width: 0; gap: 13px; z-index: 3; }
.brand-banner{
  width: 82px; height: 116px; margin: 0; align-self: flex-start;
  object-fit: contain; object-position: center top;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,.72));
}
.brand-name{ font-size: max(12px, clamp(13px, 1vw, 16px)); line-height: 1.2; letter-spacing: .105em; white-space: nowrap; }
.nav{ flex: 1 1 auto; align-self: stretch; justify-content: center; align-items: stretch; gap: clamp(7px, 1.1vw, 20px); z-index: 3; }
.nav a{
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: var(--header-h); padding: 0 clamp(12px, 1.25vw, 21px);
  border: 0; border-radius: 0; color: #f0dfc2;
  font-size: max(12px, clamp(12px, .78vw, 13px)); letter-spacing: .075em;
  background: transparent; transition: color .2s ease, background .2s ease;
}
.nav a:hover{ color: #ffe7b3; background: rgba(113, 18, 12, .20); }
.nav a.active{
  color: #ffe5a9;
  background: linear-gradient(180deg, rgba(130,17,12,.62), rgba(112,13,9,.36));
  text-shadow: 0 0 10px rgba(255,174,70,.38);
}
.nav a.active::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 10px; height: 2px;
  background: linear-gradient(90deg, transparent, #f2bd5d 18%, #fff0bf 50%, #f2bd5d 82%, transparent);
  box-shadow: 0 0 7px #f5a13c, 0 0 13px rgba(245,145,47,.62);
}
.nav a.active::before{
  content: ""; position: absolute; width: 5px; height: 5px; left: 50%; bottom: 7px;
  transform: translateX(-50%) rotate(45deg); background: #fff0b7;
  box-shadow: 0 0 8px 2px rgba(255,174,65,.7);
}
.header-discord{ flex: 0 0 auto; z-index: 3; border-left: 1px solid rgba(219,166,79,.55); padding: 0 0 0 20px; }
.header-discord img{ display: block; width: 25px; height: 25px; object-fit: contain; }
.hero{ min-height: 100svh; padding: 112px 22px 0; background-position: center center; }
.hero-content{ width: min(1040px, 90vw); margin: 0 auto; transform: translateY(-1vh); text-align: center; }
.hero-kicker{ font-size: max(12px, clamp(22px, 2.35vw, 34px)); letter-spacing: .23em; }
.hero-title{ letter-spacing: .085em; }
.hero-subtitle{ font-size: max(12px, clamp(20px, 2.1vw, 29px)); letter-spacing: .15em; }
.btn-discord{
  min-height: 62px; min-width: 230px; padding: 14px 34px;
  background: url("assets/cta-frame.webp") center / 100% 100% no-repeat,
              linear-gradient(180deg,#a91c16 0%,#74100d 55%,#4b0908 100%);
  border: 0; border-radius: 0; box-shadow: 0 4px 16px rgba(0,0,0,.38);
  font-size: max(12px, 18px); letter-spacing: .12em;
}
.btn-discord:hover{ background-image: url("assets/cta-frame.webp"), linear-gradient(180deg,#c52b1d,#78110c); }
.cta-label{ display: inline-flex; align-items: center; justify-content: center; gap: 12px; white-space: nowrap; }
.cta-label img{ width: 24px; height: 24px; object-fit: contain; }
.features{
  padding: 18px clamp(18px, 5vw, 84px) 24px;
  border: 0;
  background: linear-gradient(180deg, rgba(13,5,3,.10), rgba(13,5,3,.58));
}
.feature{ padding: 0 22px; }
.feature-icon{ height: 62px; margin: 0 0 5px; }
.feature-icon img{ display: block; width: auto; height: 56px; max-width: 76px; object-fit: contain; filter: drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.feature:nth-child(2) .feature-icon img{ height: 57px; max-width: 82px; }
.feature:nth-child(3) .feature-icon img{ height: 58px; max-width: 76px; }
.feature:nth-child(4) .feature-icon img{ height: 52px; max-width: 88px; }
.feature h2{ font-size: max(12px, clamp(14px, 1.1vw, 18px)); letter-spacing: .075em; }
.feature p{ font-size: max(12px, clamp(13px, .95vw, 15px)); }
.feature:not(:last-child)::after{
  width: 10px; top: 4%; bottom: 4%; right: -5px;
  background: url("assets/feature-divider.webp") center / 100% 100% no-repeat;
  box-shadow: none;
}
@media (max-width: 900px) {
  .site-header{ padding: 0 16px; }
  .brand-banner{ width: 66px; height: 94px; }
  .nav{ gap: 2px; }
  .nav a{ padding: 0 9px; font-size: max(12px, 12px); }
  .header-discord{ padding-left: 12px; }
  .hero{ padding-top: 104px; }
}
@media (max-width: 700px) {
  .site-header{ height: 70px; min-height: 70px; }
  .brand{ height: 70px; }
  .brand-banner{ width: 54px; height: 78px; }
  .brand-name{ font-size: max(12px, 12px); white-space: normal; }
  .menu-toggle{ display: block; margin-left: auto; z-index: 4; }
  .nav{ display: none; position: absolute; top: 70px; left: 0; right: 0; padding: 10px 18px 16px; background: rgba(12,5,3,.90); backdrop-filter: blur(10px); flex-direction: column; gap: 0; }
  .nav.open{ display: flex; }
  .nav a{ width: 100%; min-height: 42px; padding: 9px 0; font-size: max(12px, 12px); }
  .nav a.active::after{ bottom: 2px; left: 30%; right: 30%; }
  .nav a.active::before{ bottom: 0; }
  .header-discord{ border: 0; padding: 0; }
  .header-discord img{ width: 23px; height: 23px; }
  .site-header::after{ bottom: -18px; height: 36px; background-size: 100% 1px, auto 36px; background-position: center 18px, center center; }
  .hero{ min-height: 100svh; padding: 100px 14px 235px; background-position: 36% center; }
  .hero-content{ width: 100%; transform: translateY(-2vh); }
  .hero-kicker{ font-size: max(12px, clamp(17px, 5vw, 24px)); letter-spacing: .12em; }
  .hero-title{ font-size: max(12px, clamp(58px, 15vw, 82px)); }
  .hero-subtitle{ font-size: max(12px, clamp(15px, 4vw, 19px)); letter-spacing: .09em; }
  .btn-discord{ min-width: 190px; min-height: 54px; padding: 12px 25px; font-size: max(12px, 15px); }
  .cta-label img{ width: 21px; height: 21px; }
  .features{ grid-template-columns: repeat(2,1fr); row-gap: 16px; padding: 17px 10px 18px; }
  .feature{ padding: 0 6px; }
  .feature:nth-child(2)::after{ display: none; }
  .feature-icon{ height: 45px; }
  .feature-icon img{ height: 40px; max-width: 58px; }
  .feature:nth-child(2) .feature-icon img{ height: 42px; }
  .feature:nth-child(3) .feature-icon img{ height: 42px; }
  .feature:nth-child(4) .feature-icon img{ height: 38px; }
  .feature h2{ font-size: max(12px, 12px); }
  .feature p{ font-size: max(12px, 12px); }
}

.site-header::before{
  height: 1px; bottom: 0;
  background: linear-gradient(90deg, rgba(186,128,45,.72), rgba(232,185,91,.9) 50%, rgba(186,128,45,.72));
}
.site-header::after{
  width: min(698px, 90vw); height: 25px; left: 50%; bottom: -1px;
  background-image: url("assets/header-ornament.webp");
  background-repeat: no-repeat; background-position: center center;
  background-size: auto 25px; transform: translateX(-50%);
  pointer-events: none;
}
.nav{ align-items: center; height: 100%; }
.nav a{
  height: 42px; min-height: 42px; align-self: center;
  padding: 0 16px; flex: 0 0 auto;
  background: transparent !important; box-shadow: none !important;
  border: 0 !important; position: relative;
}
.nav a:hover{ background: rgba(111,13,8,.18) !important; }
.nav a.active{
  background: linear-gradient(180deg, rgba(119,15,10,.42), rgba(119,15,10,.24)) !important;
  color: #f5d28d; box-shadow: none !important;
}
.nav a.active::after{
  content: ""; position: absolute; left: 0; right: 0; width: auto;
  height: 2px; bottom: -16px; transform: none;
  background: linear-gradient(90deg, transparent, #d69b43 18%, #ffe1a0 50%, #d69b43 82%, transparent);
  box-shadow: 0 0 7px rgba(255,177,67,.65);
}

.hero-rule{
  display: flex; align-items: center; justify-content: center; gap: 0;
  width: min(650px, 82vw); height: 66px; margin: 18px auto 14px;
}
.hero-rule .rule-side{
  display: block; width: min(44%, 285px); height: auto; max-height: 34px;
  object-fit: contain; flex: 1 1 0;
}
.hero-rule .hero-emblem{
  display: block; width: clamp(48px, 4.2vw, 66px); height: clamp(48px, 4.2vw, 66px);
  object-fit: contain; flex: 0 0 auto; margin: 0 7px;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,.55));
}

.site-header{
  height: 78px !important;
  min-height: 78px !important;
  border: 0 !important;
  background: linear-gradient(180deg, rgba(12,5,3,.30), rgba(12,5,3,.16)) !important;
  backdrop-filter: none !important;
  overflow: visible;
}
.site-header.is-scrolled{
  background: rgba(12,5,3,.76) !important;
  backdrop-filter: blur(9px) !important;
}
.site-header::before{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important; right: 0 !important; bottom: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, rgba(174,119,43,.75), #e8bd69 50%, rgba(174,119,43,.75)) !important;
  pointer-events: none;
  z-index: 5;
}
.site-header::after{ content: none !important; display: none !important; }

.nav{ height: 100% !important; align-items: center !important; }
.nav a{
  height: 40px !important;
  min-height: 40px !important;
  padding: 0 15px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative !important;
}
.nav a:hover{ background: rgba(117,17,11,.18) !important; }
.nav a.active{
  height: 40px !important;
  min-height: 40px !important;
  background: linear-gradient(180deg, rgba(130,20,13,.48), rgba(130,20,13,.28)) !important;
  color: #f5d28d !important;
  box-shadow: none !important;
  border: 0 !important;
}
.nav a.active::before, .nav a.active::after{ content: none !important; display: none !important; }

@media (max-width: 900px) {
  .site-header{ height: 70px !important; min-height: 70px !important; }
  .nav a{ height: 38px !important; min-height: 38px !important; }
  .nav a.active{ height: 38px !important; min-height: 38px !important; }
}
@media (max-width: 700px) {
  .site-header{ height: 68px !important; min-height: 68px !important; }
  .site-header::before{ display: block !important; }
  .nav{ top: 68px !important; }
  .nav a, .nav a.active{ height: auto !important; min-height: 44px !important; }
}

.nav a.active{
  position: relative !important;
}
.nav a.active::after{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #d69b43 16%, #ffe1a0 50%, #d69b43 84%, transparent) !important;
  box-shadow: 0 0 7px rgba(255,177,67,.65) !important;
  pointer-events: none;
}
@media (max-width: 700px) {
  .nav a.active::after{
    bottom: 0 !important;
    left: 25% !important;
    right: 25% !important;
  }
}

.site-header{
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  height: 78px !important;
  min-height: 78px !important;
  border: 0 !important;
  background: linear-gradient(180deg, rgba(12,5,3,.30), rgba(12,5,3,.16)) !important;
  overflow: visible !important;
}

.site-header::after{
  content: none !important;
  display: none !important;
  background: none !important;
}

.site-header::before{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 2px !important;
  transform: none !important;
  border: 0 !important;
  background: linear-gradient(90deg, #8c5b20 0%, #d7a34e 22%, #f2d18a 50%, #d7a34e 78%, #8c5b20 100%) !important;
  box-shadow: 0 1px 5px rgba(225,171,78,.28) !important;
  z-index: 20 !important;
  pointer-events: none !important;
}

.nav a.active::after{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, transparent, #d69b43 16%, #ffe1a0 50%, #d69b43 84%, transparent) !important;
  box-shadow: 0 0 7px rgba(255,177,67,.65) !important;
}

.brand-name{ font-size: max(12px, 15px) !important; letter-spacing: .10em !important; }
.nav a{ font-size: max(12px, 14px) !important; letter-spacing: .07em !important; }
.hero-kicker{ font-size: max(12px, clamp(22px, 2.35vw, 34px)) !important; }
.hero-subtitle{ font-size: max(12px, clamp(19px, 2vw, 28px)) !important; }
.btn-discord{ font-size: max(12px, 17px) !important; }
.feature h2{ font-size: max(12px, clamp(14px, 1.1vw, 18px)) !important; }
.feature p{ font-size: max(12px, 13px) !important; }
body{ font-size: max(12px, 14px); }
@media (max-width: 900px) {
  .site-header{ height: 70px !important; min-height: 70px !important; }
  .nav a{ font-size: max(12px, 13px) !important; }
  .brand-name{ font-size: max(12px, 13px) !important; }
}
@media (max-width: 700px) {
  .site-header{ height: 68px !important; min-height: 68px !important; }
  .nav{ top: 68px !important; }
  .nav a{ font-size: max(12px, 14px) !important; }
  .brand-name{ font-size: max(12px, 12px) !important; }
  .feature h2{ font-size: max(12px, 13px) !important; }
  .feature p{ font-size: max(12px, 12px) !important; }
}

.btn-discord, .btn-discord:hover{
  width: 280px !important;
  height: 74px !important;
  min-height: 74px !important;
  min-width: 0 !important;
  padding: 0 28px !important;
  border: 0 !important;
  outline: 0 !important;
  border-radius: 0 !important;
  background: url("assets/cta-frame.webp") center center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  filter: none !important;
  transform: none;
}
.btn-discord:hover{ transform: translateY(-2px) !important; }
.btn-discord::before, .btn-discord::after{ content: none !important; display: none !important; }
.btn-discord .cta-label{
  position: relative !important;
  z-index: 2 !important;
  font-size: max(12px, 16px) !important;
  letter-spacing: .10em !important;
  gap: 11px !important;
  text-shadow: 0 1px 4px #240500 !important;
}
.btn-discord .cta-label img{ width: 23px !important; height: 23px !important; }

.site-header{ overflow: visible !important; isolation: auto !important; }
.brand{ position: relative !important; z-index: 100 !important; overflow: visible !important; }
.brand-banner{
  position: relative !important;
  z-index: 101 !important;
  display: block !important;
}

.features{
  background: linear-gradient(180deg, rgba(12,5,3,.48), rgba(12,5,3,.64)) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.feature:not(:last-child)::after{
  top: calc(50% + 10px) !important;
  transform: translateY(-50%) !important;
  height: 112px !important;
  background: url("assets/feature-divider.webp") center center / 7px 112px no-repeat !important;
  border: 0 !important;
  box-shadow: none !important;
}
@media (max-width: 900px) {
  .btn-discord, .btn-discord:hover{ width: 250px !important; height: 66px !important; min-height: 66px !important; }
}
@media (max-width: 680px) {
  .btn-discord, .btn-discord:hover{ width: 230px !important; height: 61px !important; min-height: 61px !important; }
  .feature:not(:last-child)::after{ top: calc(50% + 5px) !important; height: 90px !important; background-size: 6px 90px !important; }
}

.hero{
  position: relative !important;
  min-height: 100svh !important;
  height: 100svh !important;
  display: block !important;
  padding: 0 !important;
  overflow: hidden !important;
  background-position: center center !important;
  background-size: cover !important;
}
.hero-content{
  position: absolute !important;
  top: 34% !important;
  left: 50% !important;
  width: min(1120px, 92vw) !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translate(-50%, -50%) !important;
  text-align: center !important;
  z-index: 5 !important;
}
.hero-kicker{
  font-family: "Cinzel", Georgia, serif !important;
  font-size: max(12px, clamp(27px, 2.55vw, 43px)) !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  letter-spacing: .22em !important;
  padding-left: .22em !important;
  margin: 0 0 8px !important;
  background: linear-gradient(180deg,#fff8dc 0%,#f8dc9b 24%,#d99b42 53%,#fff0bd 72%,#a86522 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-stroke: .55px rgba(255,226,164,.78) !important;
  filter: drop-shadow(0 3px 1px #321006) drop-shadow(0 0 15px rgba(255,155,48,.48)) !important;
}
.hero-title{
  font-family: "Cinzel", Georgia, serif !important;
  font-size: max(12px, clamp(94px, 8vw, 150px)) !important;
  line-height: 1 !important;
  letter-spacing: .09em !important;
  padding-left: .09em !important;
  font-weight: 600 !important;
  margin: 0 !important;
  background: linear-gradient(180deg,#fff9df 0%,#f7d98e 23%,#d79a43 48%,#fff0b8 68%,#9c5d20 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-stroke: .9px rgba(255,226,164,.78) !important;
  filter: drop-shadow(0 5px 1px #2a0803) drop-shadow(0 0 22px rgba(255,157,48,.58)) !important;
}
.hero-rule{
  width: min(690px, 72vw) !important;
  height: 62px !important;
  margin: 12px auto 8px !important;
  gap: 0 !important;
}
.hero-rule .rule-side{
  width: calc((100% - 72px)/2) !important;
  height: auto !important;
  max-height: 36px !important;
  object-fit: contain !important;
  flex: 1 1 0 !important;
}
.hero-rule .hero-emblem{
  width: 64px !important;
  height: 64px !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
  margin: 0 4px !important;
}
.hero-subtitle{
  font-family: "Cinzel", Georgia, serif !important;
  font-size: max(12px, clamp(24px, 2.25vw, 37px)) !important;
  line-height: 1.3 !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  padding-left: .18em !important;
  margin: 0 0 27px !important;
  background: linear-gradient(180deg,#fff7d8 0%,#f1d18b 45%,#c98a3a 75%,#fff0c0 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-stroke: .35px rgba(255,224,166,.62) !important;
  filter: drop-shadow(0 2px 4px #260700) drop-shadow(0 0 12px rgba(255,159,52,.38)) !important;
}

.brand-banner{
  width: 88px !important;
  height: 132px !important;
  object-fit: contain !important;
  object-position: top center !important;
  align-self: flex-start !important;
  margin-top: 0 !important;
  flex: 0 0 auto !important;
  position: relative !important;
  z-index: 1200 !important;
}
.brand{ position: relative !important; z-index: 1200 !important; overflow: visible !important; }
.site-header{ z-index: 1100 !important; overflow: visible !important; }
@media (max-width: 900px) {
  .hero-content{ top: 34% !important; width: 94vw !important; }
  .hero-kicker{ font-size: max(12px, clamp(22px, 3.2vw, 32px)) !important; }
  .hero-title{ font-size: max(12px, clamp(76px, 10vw, 110px)) !important; }
  .hero-subtitle{ font-size: max(12px, clamp(20px, 2.7vw, 28px)) !important; }
  .brand-banner{ width: 76px !important; height: 114px !important; }
}
@media (max-width: 680px) {
  .hero{ height: auto !important; min-height: 100svh !important; }
  .hero-content{
    top: 31% !important;
    width: 96vw !important;
  }
  .hero-kicker{ font-size: max(12px, clamp(17px, 4.5vw, 24px)) !important; letter-spacing: .14em !important; padding-left: .14em !important; }
  .hero-title{ font-size: max(12px, clamp(64px, 16vw, 88px)) !important; letter-spacing: .07em !important; padding-left: .07em !important; }
  .hero-rule{ width: 92vw !important; height: 48px !important; margin: 8px auto !important; }
  .hero-rule .rule-side{ max-height: 27px !important; }
  .hero-rule .hero-emblem{ width: 48px !important; height: 48px !important; }
  .hero-subtitle{ font-size: max(12px, clamp(15px, 4vw, 21px)) !important; letter-spacing: .10em !important; padding-left: .10em !important; margin-bottom: 19px !important; }
  .brand-banner{ width: 58px !important; height: 88px !important; }
}

.hero-kicker, .hero-title, .hero-subtitle{
  -webkit-text-stroke: 0 !important;
  filter: drop-shadow(0 4px 3px rgba(0,0,0,.92)) !important;
  text-shadow: 0 3px 5px rgba(0,0,0,.92) !important;
}
.hero-kicker{
  background: linear-gradient(180deg,#fff6d5 0%,#f5d58b 30%,#dca34d 58%,#ffe9ad 82%,#c58a39 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-weight: 700 !important;
}
.hero-title{
  background: linear-gradient(180deg,#fff8dc 0%,#f8df9d 26%,#e2ad59 52%,#fff0bd 76%,#d39a48 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-weight: 700 !important;
}
.hero-subtitle{
  background: linear-gradient(180deg,#fff5d1 0%,#f2d28b 48%,#d9a14e 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  font-weight: 700 !important;
}
.feature h2{
  font-size: max(12px, clamp(16px, 1.18vw, 20px)) !important;
  line-height: 1.4 !important;
  letter-spacing: .075em !important;
  color: #f6d17f !important;
  text-shadow: 0 2px 5px rgba(0,0,0,.95) !important;
}
.feature p{
  font-size: max(12px, clamp(14px, 1vw, 17px)) !important;
  line-height: 1.5 !important;
  color: #f3dfbd !important;
  text-shadow: 0 2px 5px rgba(0,0,0,.95) !important;
}
@media (max-width: 900px) {
  .feature h2{ font-size: max(12px, 15px) !important; }
  .feature p{ font-size: max(12px, 13px) !important; }
}
@media (max-width: 680px) {
  .feature h2{ font-size: max(12px, 13px) !important; }
  .feature p{ font-size: max(12px, 12px) !important; }
}

.hero-kicker, .hero-title, .hero-subtitle{
  background: linear-gradient(180deg,
    #fff6cf 0%,
    #ffe8a1 16%,
    #f4ca68 34%,
    #d99a36 52%,
    #f8d77f 70%,
    #ffeab0 86%,
    #d99b3e 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0 transparent;
  filter: drop-shadow(0 3px 1px rgba(0,0,0,.95))
          drop-shadow(0 5px 5px rgba(0,0,0,.78))
          drop-shadow(0 0 9px rgba(0,0,0,.58));
}
.hero-kicker{
  font-weight: 700;
  text-shadow: none;
}
.hero-title{
  font-weight: 700;
  text-shadow: none;
}
.hero-subtitle{
  font-weight: 700;
  text-shadow: none;
}

.site-header .nav a{
  font-family: "Cinzel", Georgia, serif;
  font-size: max(12px, clamp(13px, .9vw, 15px));
  font-weight: 700;
  letter-spacing: .065em;
  color: #f4e4c6;
  text-shadow: 0 1px 4px rgba(0,0,0,.9);
}
.site-header .nav a:hover, .site-header .nav a.active{
  color: #ffe2a0;
}
@media (max-width: 900px) {
  .site-header .nav a{ font-size: max(12px, 13px); }
}
@media (max-width: 680px) {
  .site-header .nav a{ font-size: max(12px, 14px); }
}

.hero-kicker, .hero-title, .hero-subtitle{
  background: linear-gradient(180deg,
    #fffbe5 0%,
    #fff0b5 13%,
    #ffdc79 27%,
    #f4bd4e 43%,
    #ffe99b 58%,
    #f2c45c 73%,
    #fff2c2 87%,
    #d99a32 100%) !important;
  background-clip: text !important;
  -webkit-background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  -webkit-text-stroke: 0 !important;
  text-shadow: none !important;
  filter: drop-shadow(0 3px 2px rgba(0,0,0,.98))
          drop-shadow(0 6px 7px rgba(0,0,0,.78)) !important;
}

.site-header .nav a, .site-header .nav a:hover, .site-header .nav a.active{
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: max(12px, 14px) !important;
  font-weight: 700 !important;
  letter-spacing: .065em !important;
}
@media (max-width: 900px) {
  .site-header .nav a{ font-size: max(12px, 13px) !important; }
}
@media (max-width: 680px) {
  .site-header .nav a{ font-size: max(12px, 14px) !important; }
}

.site-header{
  height: 90px !important;
  min-height: 90px !important;
  display: flex !important;
  align-items: center !important;
  gap: clamp(14px, 2.4vw, 38px) !important;
  padding: 0 clamp(22px, 3.2vw, 52px) 0 clamp(24px, 3.2vw, 52px) !important;
}
.site-header .brand{
  flex: 0 0 300px !important;
  width: 300px !important;
  min-width: 300px !important;
  height: 90px !important;
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-shrink: 0 !important;
}
.site-header .brand-banner{
  flex: 0 0 82px !important;
  width: 82px !important;
  height: 116px !important;
  margin: 0 !important;
  align-self: flex-start !important;
  object-fit: contain !important;
  object-position: center top !important;
}
.site-header .brand-name{
  display: block !important;
  max-width: 204px !important;
  color: #f1cb7a !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: max(12px, 15px) !important;
  font-weight: 700 !important;
  line-height: 1.25 !important;
  letter-spacing: .10em !important;
  text-transform: uppercase !important;
  text-shadow: 0 2px 5px #000, 0 0 12px rgba(231,174,75,.25) !important;
}
.site-header .nav{
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 90px !important;
  align-items: stretch !important;
}
.site-header .nav a{
  height: 90px !important;
  min-height: 90px !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: max(12px, 14px) !important;
  font-weight: 700 !important;
  letter-spacing: .065em !important;
}
.site-header .header-discord{ flex: 0 0 48px !important; }
@media (max-width: 900px) {
  .site-header{ height: 72px !important; min-height: 72px !important; padding: 0 16px !important; }
  .site-header .brand{ flex: 0 0 210px !important; width: 210px !important; min-width: 210px !important; height: 72px !important; }
  .site-header .brand-banner{ flex-basis: 60px !important; width: 60px !important; height: 88px !important; }
  .site-header .brand-name{ font-size: max(12px, 12px) !important; max-width: 140px !important; }
  .site-header .nav{ height: 72px !important; }
  .site-header .nav a{ height: 72px !important; min-height: 72px !important; font-size: max(12px, 13px) !important; }
}
@media (max-width: 680px) {
  .site-header{ height: 68px !important; min-height: 68px !important; }
  .site-header .brand{ flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; height: 68px !important; }
  .site-header .brand-banner{ flex-basis: 46px !important; width: 46px !important; height: 72px !important; }
  .site-header .brand-name{ font-size: max(12px, 12px) !important; max-width: 145px !important; }
  .site-header .nav{ height: auto !important; }
  .site-header .nav a{ height: auto !important; min-height: 44px !important; font-size: max(12px, 14px) !important; }
}

@media (min-aspect-ratio: 2/1) {
  .hero{ background-image: url("assets/horde-hero-wide.webp"); }
}

.site-header::before{
  bottom: 6px !important;
}

.site-header .nav a{
  height: 42px !important;
  min-height: 42px !important;
  align-self: center !important;
  position: relative !important;
  background: transparent !important;
  box-shadow: none !important;
}

.site-header .nav a.active{
  height: 42px !important;
  min-height: 42px !important;
  align-self: center !important;
  background: linear-gradient(
    180deg,
    rgba(130, 20, 13, .52),
    rgba(130, 20, 13, .32)
  ) !important;
  color: #ffe2a0 !important;
  box-shadow: none !important;
}

.site-header .nav a.active::after{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 8px !important;
  right: 8px !important;
  bottom: 0 !important;
  width: auto !important;
  height: 2px !important;
  transform: none !important;
  background: linear-gradient(
    90deg,
    #b77a2e,
    #ffe3a0 50%,
    #b77a2e
  ) !important;
  box-shadow: 0 0 6px rgba(255, 177, 67, .48) !important;
}

@media (max-width: 900px) {
  .site-header .nav a, .site-header .nav a.active{
    height: 42px !important;
    min-height: 42px !important;
  }
}

@media (max-width: 680px) {
  .site-header .nav a, .site-header .nav a.active{
    height: 42px !important;
    min-height: 42px !important;
    align-self: stretch !important;
  }
  .site-header .nav a.active::after{
    left: 25% !important;
    right: 25% !important;
  }
}

.site-header::before{
  bottom: 8px !important;
}
.site-header .nav a.active::after{
  left: 0 !important;
  right: 0 !important;
}
@media (max-width: 680px) {
  .site-header .nav a.active::after{
    left: 0 !important;
    right: 0 !important;
  }
}

.site-header::before{
  bottom: 11px !important;
}

.site-header.is-scrolled{
  background: transparent !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

.site-header.is-scrolled::after{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 11px !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  background: rgba(12, 5, 3, .76) !important;
  -webkit-backdrop-filter: blur(9px) !important;
  backdrop-filter: blur(9px) !important;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .16) !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.site-header > *{
  position: relative;
  z-index: 2;
}
.site-header::before{
  z-index: 20 !important;
}

.site-header{
  background: transparent !important;
  box-shadow: none !important;
}

.site-header::after{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 11px !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  background: linear-gradient(
    180deg,
    rgba(12, 5, 3, .30),
    rgba(12, 5, 3, .16)
  ) !important;
  box-shadow: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
}

.site-header.is-scrolled::after{
  bottom: 11px !important;
  background: rgba(12, 5, 3, .76) !important;
  -webkit-backdrop-filter: blur(9px) !important;
  backdrop-filter: blur(9px) !important;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .16) !important;
}

.site-header .brand-banner{
  width: 90px !important;
  height: 121px !important;
  flex-basis: 85px !important;
  transform: translate(-8px, -2px) !important;
}
@media (max-width: 900px) {
  .site-header .brand-banner{
    width: 68px !important;
    height: 93px !important;
    flex-basis: 63px !important;
  }
}
@media (max-width: 680px) {
  .site-header .brand-banner{
    width: 54px !important;
    height: 77px !important;
    flex-basis: 49px !important;
  }
}

.contact-hero{ min-height: 38vh; }
.contact-intro{ padding-top: 64px; padding-bottom: 42px; }
.contact-copy{ max-width: 850px; margin: 0 auto 34px; text-align: center; }
.contact-copy h2{ line-height: 1.35; }
.comic-figure{ margin: 0 auto; max-width: 1120px; text-align: center; }
.comic-figure img{ display: block; width: 100%; height: auto; border: 1px solid rgba(224,174,91,.75); box-shadow: 0 18px 48px rgba(0,0,0,.42); }
.comic-figure figcaption{ margin-top: 12px; color: #bda17a; font-size: max(12px, 13px); letter-spacing: .04em; }
.discord-contact{ padding-top: 34px; text-align: center; }
.discord-contact-heading{ max-width: 760px; margin: 0 auto 28px; }
.discord-contact-heading h2{ margin-bottom: 10px; }
.discord-contact-heading p:last-child{ color: #e0d0b8; }
.discord-widget-frame{ width: min(100%, 620px); margin: 0 auto; overflow: hidden; border: 1px solid var(--line); background: #202127; box-shadow: 0 16px 42px rgba(0,0,0,.32); }
.discord-widget-frame iframe{ display: block; width: 100%; min-height: 500px; border: 0; }
.contact-join{ margin: 28px auto 0; }
.contact-battletag-note{ margin: 24px auto 0; color: #cdb58f; font-size: max(12px, 14px); }
.faq-anchor{ scroll-margin-top: 100px; }
@media (max-width: 560px) {
  .contact-hero{ min-height: 34vh; }
  .contact-intro{ padding-top: 42px; padding-bottom: 24px; }
  .contact-copy h2{ font-size: max(12px, 24px); }
  .comic-figure img{ border-left: 0; border-right: 0; }
  .discord-widget-frame iframe{ min-height: 500px; }
}

.contact-page{ padding-top: 0; }
.contact-banner{ width: 100%; line-height: 0; overflow: hidden; }
.contact-banner img{ display: block; width: 100%; height: auto; }
.contact-intro{
  width: min(1120px, calc(100% - 44px));
  margin: 0 auto;
  padding: 34px 0 28px;
  text-align: center;
}
.contact-intro .eyebrow{ margin: 0 0 8px; }
.contact-intro h1{
  margin: 0 0 10px;
  color: var(--gold);
  font-size: max(12px, clamp(25px, 3vw, 36px));
  font-weight: 500;
  line-height: 1.25;
}
.contact-intro > p:last-child{
  margin: 0;
  color: #e8d6bd;
  font-size: max(12px, 16px);
}
.contact-main{
  width: min(1260px, calc(100% - 44px));
  margin: 0 auto;
  padding: 8px 0 68px;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
  align-items: start;
  gap: clamp(26px, 4vw, 58px);
}
.comic-figure{ margin: 0; width: 100%; text-align: center; }
.comic-figure img{
  display: block; width: 100%; height: auto;
  border: 1px solid rgba(224,174,91,.75);
  box-shadow: 0 14px 36px rgba(0,0,0,.38);
}
.discord-contact{ min-width: 0; padding: 0; text-align: center; }
.discord-contact > .eyebrow{ margin: 0 0 8px; }
.discord-contact h2{
  margin: 0 0 10px; color: var(--gold);
  font-size: max(12px, clamp(23px, 2.2vw, 30px)); font-weight: 500; line-height: 1.25;
}
.discord-contact-copy{
  margin: 0 auto 18px; max-width: 520px;
  color: #e0d0b8; font-size: max(12px, 14px);
}
.discord-widget-frame{
  width: 100%; margin: 0 auto; overflow: hidden;
  border: 1px solid var(--line); background: #202127;
  box-shadow: 0 12px 32px rgba(0,0,0,.3);
}
.discord-widget-frame iframe{ display: block; width: 100%; height: 430px; min-height: 430px; border: 0; }
.contact-join{ margin: 18px auto 0; }
.contact-battletag-note{ margin: 16px auto 0; color: #cdb58f; font-size: max(12px, 13px); }
@media (max-width: 820px) {
  .contact-main{ grid-template-columns: 1fr; max-width: 680px; gap: 34px; }
  .discord-contact{ grid-row: 1; }
  .comic-figure{ grid-row: 2; }
  .discord-widget-frame iframe{ height: 430px; min-height: 430px; }
}
@media (max-width: 560px) {
  .contact-page{ padding-top: 68px; }
  .contact-banner img{ width: 100%; height: auto; }
  .contact-intro{ width: calc(100% - 32px); padding: 24px 0 20px; }
  .contact-intro h1{ font-size: max(12px, 24px); }
  .contact-intro > p:last-child{ font-size: max(12px, 14px); }
  .contact-main{ width: calc(100% - 28px); padding-bottom: 42px; gap: 28px; }
  .discord-widget-frame iframe{ height: 430px; min-height: 430px; }
}

.site-header, .site-header.is-scrolled{
  background: transparent !important;
  box-shadow: none !important;
}
.site-header::after{
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
.site-header.is-scrolled::after{
  background: rgba(12, 5, 3, .78) !important;
  -webkit-backdrop-filter: blur(9px) !important;
  backdrop-filter: blur(9px) !important;
  box-shadow: 0 5px 18px rgba(0,0,0,.16) !important;
}

.contact-banner{
  position: relative;
  width: 100%;
  line-height: 0;
  overflow: hidden;
}
.contact-banner img{ display:block; width:100%; height:auto; }
.contact-banner-title{
  position:absolute;
  left:clamp(28px,7vw,110px);
  top:50%;
  transform:translateY(-50%);
  line-height:1.1;
  text-align:left;
  text-shadow:0 3px 8px rgba(0,0,0,.95);
}
.contact-banner-title .eyebrow{
  margin:0 0 7px;
  color:#f3d18b;
  font-size: max(12px, 13px);
  letter-spacing:.18em;
}
.contact-banner-title h1{
  margin:0;
  color:#f0c36d;
  font-family:Georgia,"Times New Roman",serif;
  font-size: max(12px, clamp(36px,4.2vw,58px));
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
}
.contact-intro{
  width:min(1120px,calc(100% - 44px));
  margin:0 auto;
  padding:26px 0 24px;
  text-align:center;
}
.contact-intro h2{
  margin:0 0 9px;
  color:var(--gold);
  font-size: max(12px, clamp(23px,2.2vw,31px));
  font-weight:500;
  line-height:1.3;
}
.contact-intro > p{
  margin:0;
  color:#e8d6bd;
  font-size: max(12px, 15px);
}
.contact-main{
  width:min(1260px,calc(100% - 44px));
  margin:0 auto;
  padding:8px 0 68px;
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(340px,.88fr);
  align-items:start;
  column-gap:clamp(26px,4vw,58px);
  row-gap:20px;
}
.contact-main > .discord-contact-heading{
  grid-column:1 / -1;
  margin:0;
  text-align:center;
}
.contact-main > .discord-contact-heading .eyebrow{ margin:0 0 7px; }
.contact-main > .discord-contact-heading h2{
  margin:0 0 8px;
  color:var(--gold);
  font-size: max(12px, clamp(23px,2.2vw,30px));
  font-weight:500;
  line-height:1.25;
}
.contact-main > .discord-contact-heading p:last-child{
  margin:0;
  color:#e0d0b8;
  font-size: max(12px, 14px);
}
.contact-main .comic-figure, .contact-main .discord-contact{ margin:0; padding:0; min-width:0; }
.contact-main .comic-figure img{
  display:block;
  width:100%;
  height:auto;
  border:1px solid rgba(224,174,91,.75);
  box-shadow:0 14px 36px rgba(0,0,0,.38);
}
.contact-main .discord-widget-frame{
  width:100%;
  margin:0;
  overflow:hidden;
  border:1px solid var(--line);
  background:#202127;
  box-shadow:0 12px 32px rgba(0,0,0,.3);
}
.contact-main .discord-widget-frame iframe{
  display:block;
  width:100%;
  height:430px;
  min-height:430px;
  border:0;
}
.contact-main .contact-join{ margin:18px auto 0; }
.contact-main .contact-battletag-note{
  margin:16px auto 0;
  color:#cdb58f;
  font-size: max(12px, 13px);
  text-align:center;
}
@media (max-width:820px) {
  .contact-main{ grid-template-columns:1fr; max-width:680px; gap:28px; }
  .contact-main > .discord-contact-heading{ grid-column:1; }
  .contact-main .discord-contact{ grid-row:2; }
  .contact-main .comic-figure{ grid-row:3; }
}
@media (max-width:560px) {
  .contact-page{ padding-top: 0; }
  .contact-banner-title{ left:20px; }
  .contact-banner-title h1{ font-size: max(12px, 32px); }
  .contact-banner-title .eyebrow{ font-size: max(12px, 12px); }
  .contact-intro{ width:calc(100% - 32px); padding:22px 0 18px; }
  .contact-intro h2{ font-size: max(12px, 22px); }
  .contact-intro > p{ font-size: max(12px, 13px); }
  .contact-main{ width:calc(100% - 28px); padding-bottom:42px; }
  .contact-main > .discord-contact-heading p:last-child{ font-size: max(12px, 13px); }
}

/* Contact uses the same shared header behavior as every other page. */

.contact-banner img{
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.contact-banner-title{
  position: absolute;
  left: clamp(28px, 7vw, 110px);
  bottom: clamp(14px, 3vw, 30px);
  top: auto;
  transform: none;
  line-height: 1.08;
  text-align: left;
  text-shadow: 0 3px 8px rgba(0,0,0,.98);
}
.contact-banner-title .eyebrow{
  margin: 0 0 7px;
  color: #f3d18b;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
}
.contact-banner-title h1{
  margin: 0;
  color: #f0c36d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(36px, 4.2vw, 58px);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.contact-intro{
  width: min(1120px, calc(100% - 44px));
  margin: 0 auto;
  padding: 26px 0 28px;
  text-align: center;
}
.contact-intro h2{
  margin: 0 0 9px;
  color: var(--gold);
  font-size: clamp(23px, 2.2vw, 31px);
  font-weight: 500;
  line-height: 1.3;
}
.contact-intro > p{
  margin: 0;
  color: #e8d6bd;
  font-size: 15px;
}
.contact-main{
  width: min(1260px, calc(100% - 44px));
  margin: 0 auto;
  padding: 8px 0 68px;
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, .88fr);
  align-items: start;
  column-gap: clamp(34px, 5vw, 72px);
  row-gap: 0;
}
.contact-main .comic-figure, .contact-main .discord-contact{
  min-width: 0;
  margin: 0;
  padding: 0;
}
.contact-main .comic-figure img{
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid rgba(224,174,91,.75);
  box-shadow: 0 14px 36px rgba(0,0,0,.38);
}
.contact-main .discord-widget-frame{
  width: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  background: #202127;
  box-shadow: 0 12px 32px rgba(0,0,0,.3);
}
.contact-main .discord-widget-frame iframe{
  display: block;
  width: 100%;
  height: 430px;
  min-height: 430px;
  border: 0;
}
.contact-actions{
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 24px;
}
.contact-actions .contact-join{
  margin: 0 auto;
}
.contact-battletag-note{
  margin: 18px auto 8px;
  max-width: 760px;
  color: #cdb58f;
  text-align: center;
  font-size: 14px;
}
.contact-battletags{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 28px;
  color: #f0d39a;
  font-size: 14px;
  letter-spacing: .03em;
}
@media (max-width: 820px) {
  .contact-main{
    grid-template-columns: 1fr;
    max-width: 680px;
    row-gap: 28px;
  }
  .contact-main .discord-contact{ grid-row: 1; }
  .contact-main .comic-figure{ grid-row: 2; }
  .contact-actions{ grid-column: 1; padding-top: 2px; }
}
@media (max-width: 680px) {
  .contact-page-body .site-header::after{
    display: block !important;
    bottom: 0 !important;
  }
  .contact-banner-title{
    left: 20px;
    bottom: 10px;
  }
  .contact-banner-title h1{ font-size: clamp(24px, 7vw, 32px); }
  .contact-banner-title .eyebrow{ font-size: 12px; margin-bottom: 4px; }
  .contact-intro{
    width: calc(100% - 32px);
    padding: 22px 0 20px;
  }
  .contact-intro h2{ font-size: 22px; }
  .contact-intro > p{ font-size: 13px; }
  .contact-main{
    width: calc(100% - 28px);
    padding-bottom: 42px;
    row-gap: 24px;
  }
  .contact-main .discord-widget-frame iframe{
    height: 430px;
    min-height: 430px;
  }
  .contact-actions{ padding-top: 0; }
}

.contact-page-body .contact-page{
  padding-top: 0 !important;
}
.contact-page-body .contact-banner{
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
  line-height: 0;
}
.contact-page-body .contact-banner img{
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center center !important;
}
.contact-page-body .contact-banner-title{
  bottom: clamp(22px, 4vw, 48px) !important;
  top: auto !important;
}
.contact-page-body .contact-intro h2{
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: clamp(25px, 2.2vw, 31px) !important;
  line-height: 1.35 !important;
}
.contact-page-body .contact-intro > p{
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}
.contact-page-body .contact-battletag-note, .contact-page-body .contact-battletags{
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 16px !important;
  line-height: 1.65 !important;
}
@media (max-width: 680px) {
  .contact-page-body .contact-banner-title{
    bottom: 16px !important;
  }
  .contact-page-body .contact-intro > p, .contact-page-body .contact-battletag-note, .contact-page-body .contact-battletags{
    font-size: 16px !important;
  }
}

.contact-page-body .contact-banner{
  border-bottom: 1px solid rgba(226, 177, 91, .82);
}
.site-header .nav a:hover:not(.active){
  color: #ffe7b3 !important;
  background: rgba(194, 125, 34, .34) !important;
  box-shadow: inset 0 0 0 1px rgba(242, 198, 110, .48) !important;
}

.site-header .nav a{ font-size: 20px !important; }

.site-header .nav a, .site-header .nav a:hover, .site-header .nav a.active, .site-header .nav a.active:hover{
  font-size: 20px !important;
}

.contact-page-body .contact-battletag-note{
  margin: 24px auto 12px;
  max-width: 760px;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.65;
}
.contact-page-body .contact-battletags{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
}
.contact-trust{
  width: min(1080px, 100%);
  margin: 42px auto 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.trust-item{
  min-width: 0;
  padding: 22px 18px 24px;
  text-align: center;
  border: 1px solid rgba(190, 143, 65, .48);
  background: linear-gradient(145deg, rgba(75, 29, 13, .38), rgba(20, 9, 6, .72));
  box-shadow: inset 0 1px 0 rgba(255, 220, 150, .07);
}
.trust-item img{
  display: block;
  width: 104px;
  height: 104px;
  object-fit: contain;
  margin: 0 auto 12px;
}
.trust-item h3{
  margin: 0 0 8px;
  color: var(--gold);
  font-family: Georgia, "Times New Roman", serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
}
.trust-item p{
  margin: 0;
  color: #e8d6bd;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.6;
}
@media (max-width: 820px) {
  .contact-trust{ gap: 14px; margin-top: 32px; }
  .trust-item{ padding: 18px 12px 20px; }
  .trust-item img{ width: 88px; height: 88px; }
  .trust-item h3{ font-size: 18px; }
}
@media (max-width: 560px) {
  .contact-trust{ grid-template-columns: 1fr; gap: 14px; }
  .trust-item{
    display: grid;
    grid-template-columns: 76px 1fr;
    align-items: center;
    column-gap: 14px;
    text-align: left;
    padding: 14px;
  }
  .trust-item img{
    grid-row: 1 / 3;
    width: 76px;
    height: 76px;
    margin: 0;
  }
  .trust-item h3{ margin: 0 0 4px; }
}

@media (min-width: 821px) {
  .contact-main{
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: stretch;
    column-gap: clamp(28px, 3.5vw, 52px);
  }
  .contact-main .comic-figure img{
    aspect-ratio: 3 / 2;
    height: auto;
    object-fit: cover;
  }
  .contact-main .discord-contact{
    display: flex;
    min-height: 0;
  }
  .contact-main .discord-widget-frame{
    width: 100%;
    aspect-ratio: 3 / 2;
    height: auto;
  }
  .contact-main .discord-widget-frame iframe{
    width: 100%;
    height: 100%;
    min-height: 0;
  }
}
.contact-page-body .contact-intro{
  padding-bottom: clamp(42px, 4vw, 58px);
}
.contact-page-body .contact-actions{
  padding-top: clamp(38px, 4vw, 54px);
}
.contact-page-body .contact-battletag-note{
  margin-top: 30px;
  margin-bottom: 14px;
}
.contact-page-body .contact-battletags{
  gap: 9px;
}
.contact-page-body .contact-trust{
  margin-top: 54px;
}
@media (max-width: 820px) {
  .contact-page-body .contact-intro{
    padding-bottom: 30px;
  }
  .contact-page-body .contact-actions{
    padding-top: 12px;
  }
  .contact-page-body .contact-trust{
    margin-top: 38px;
  }
}

.achievements-banner{ position:relative; }
.achievements-banner-title{ top:58%; max-width:min(720px, 78vw); }
.achievements-banner-title .eyebrow{ font-size: max(12px, 15px); }
.achievements-banner-title h1{ font-size: max(12px, clamp(42px, 5vw, 68px)); }
.achievements-hero-subtitle{
  margin:12px 0 0; color:#f0ddc1; font-size:max(12px, 18px);
  line-height:1.5; max-width:620px;
}
.achievements-content{ padding-top:58px; }
.achievements-content h2{ margin-bottom:18px; }
.achievements-content .lead{ max-width:1000px; line-height:1.65; }
.achievements-outro{ margin:18px 0 0; color:#e8d6bd; font-size:max(12px, 16px); line-height:1.65; }
.achievement-archive{ margin-top:58px; padding-top:34px; border-top:1px solid var(--line); }
.achievement-archive-heading{ text-align:center; margin-bottom:28px; }
.achievement-archive-heading .eyebrow{ margin:0 0 8px; }
.achievement-archive-heading h3{ margin:0; color:var(--gold); font-size:max(12px, clamp(24px, 3vw, 34px)); font-weight:500; }
.achievement-gallery{ min-height:190px; display:grid; place-items:center; padding:28px; border:1px solid var(--line); background:linear-gradient(145deg,rgba(70,25,12,.34),rgba(15,6,4,.72)); box-shadow:0 12px 32px rgba(0,0,0,.2); }
.achievement-empty-state{ text-align:center; color:#d9c4a3; }
.achievement-empty-state p{ margin:10px 0 0; font-size:max(12px, 16px); }
.achievement-empty-ornament{ color:var(--gold); font-size:30px; text-shadow:0 0 14px rgba(224,174,91,.35); }
@media (max-width: 700px) {
  .achievements-banner-title{ top:60%; left:6vw; max-width:86vw; }
  .achievements-banner-title .eyebrow{ font-size:max(12px, 11px); letter-spacing:.12em; }
  .achievements-hero-subtitle{ font-size:max(12px, 14px); max-width:90%; }
  .achievements-content{ padding-top:38px; }
  .achievement-archive{ margin-top:38px; padding-top:26px; }
  .achievement-gallery{ min-height:150px; padding:20px; }
}

.achievements-banner{ border-bottom: 1px solid rgba(226, 177, 91, .82); }
.achievements-banner-title{
  top: auto;
  bottom: clamp(22px, 4vw, 48px);
  transform: none;
  text-align: left;
}
@media (max-width: 700px) {
  .achievements-banner-title{ bottom: 16px; }
}


@media (max-width: 560px) {
  .achievements-banner-title{
    left:5vw !important; right:5vw !important; bottom:13px !important;
    max-width:90vw !important;
  }
  .achievements-banner-title .eyebrow{
    font-size:10px !important; line-height:1.35 !important;
    letter-spacing:.12em !important; margin-bottom:4px !important;
  }
  .achievements-banner-title h1{
    font-size:clamp(30px,8vw,42px) !important; line-height:1 !important;
  }
  .achievements-hero-subtitle{
    margin-top:5px !important; font-size:12px !important; line-height:1.35 !important;
  }
}

.guild-journey-hero{background-image:linear-gradient(90deg,rgba(12,5,5,.68),rgba(12,5,5,.08)),url("assets/gilde-hero.webp") !important;background-size:cover !important;background-position:center center !important;aspect-ratio:2048/682;min-height:290px;height:auto;display:flex;align-items:center;}
.guild-journey-hero>div{position:absolute;z-index:2;}
.guild-journey{width:min(1120px,calc(100% - 48px));padding-top:72px;padding-bottom:90px;}
.guild-journey>h2{text-align:center;font-size:clamp(26px,3vw,40px);line-height:1.3;margin:0 auto 62px;max-width:1000px;}






.guild-journey .story-cta{color:#eac381;font-weight:700;letter-spacing:.045em;}
.guild-journey .story-slogan{font-weight:700;color:#e6b765;letter-spacing:.12em;font-size:clamp(18px,2vw,24px);}
@media(max-width:760px){.guild-journey-hero{aspect-ratio:auto;min-height:250px;background-position:center center !important;}.guild-journey{width:min(100% - 32px,560px);padding-top:48px;padding-bottom:64px;}.guild-journey>h2{margin-bottom:40px;}}
@media(min-width:761px) and (max-width:1000px){}

.contact-banner-title, .achievements-banner-title{
  left: clamp(28px, 6vw, 104px) !important;
  right: auto !important;
  top: auto !important;
  bottom: clamp(42px, 7.5vw, 112px) !important;
  transform: none !important;
  text-align: left !important;
  line-height: 1.12 !important;
  text-shadow: 0 3px 9px rgba(0,0,0,.78) !important;
}
.contact-banner-title .eyebrow, .achievements-banner-title .eyebrow{
  color: #f3d18b !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 13px !important;
  letter-spacing: .18em !important;
  line-height: 1.4 !important;
  margin: 0 0 8px !important;
}
.contact-banner-title h1, .achievements-banner-title h1, .guild-journey-hero .contact-banner-title h1{
  color: #f0c36d !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(36px, 4.2vw, 58px) !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  line-height: 1.08 !important;
  text-transform: uppercase !important;
}
.achievements-hero-subtitle{ color:#f0ddc1 !important; font: 16px/1.5 "Open Sans",Arial,sans-serif !important; margin-top:10px !important; }
.contact-page-body .contact-banner-title{ bottom: clamp(42px, 7.5vw, 112px) !important; }
.achievements-banner-title{ bottom: clamp(42px, 7.5vw, 112px) !important; }
.guild-journey-hero{ aspect-ratio:2172/724 !important; min-height:0 !important; height:auto !important; display:block !important; background:none !important; overflow:hidden !important; border-bottom:1px solid rgba(226,177,91,.82); }
.guild-journey-hero img{ display:block; width:100%; height:auto; object-fit:contain; }
.guild-journey-hero .contact-banner-title{ bottom:clamp(42px,7.5vw,112px) !important; }

.guild-journey{ width:min(1450px,calc(100% - 9vw)); padding:clamp(44px,5vw,72px) 0 76px; }
.guild-journey>h2{ font-size:clamp(25px,2.4vw,36px); margin:0 auto clamp(38px,4vw,56px); }















.guild-journey .story-cta{ color:#eac381; font-weight:700; font-size:clamp(18px,1.35vw,22px); letter-spacing:.035em; margin:0 0 16px; }

.guild-journey .story-slogan{ margin:0; font-weight:700; color:#e6b765; letter-spacing:.12em; font-size:clamp(17px,1.5vw,22px); }


@media (max-width:900px) {
  .guild-journey{ width:min(1500px,calc(100% - 48px)); }
  
  
  
  .contact-banner-title, .achievements-banner-title, .guild-journey-hero .contact-banner-title{ bottom:clamp(20px,5vw,48px) !important; }
}
@media (max-width:700px) {
  .contact-banner-title, .achievements-banner-title, .guild-journey-hero .contact-banner-title{ left:5vw !important; bottom:16px !important; }
  .contact-banner-title h1, .achievements-banner-title h1, .guild-journey-hero .contact-banner-title h1{ font-size:clamp(28px,7vw,38px) !important; }
  .contact-banner-title .eyebrow, .achievements-banner-title .eyebrow{ font-size:10px !important; }
  .achievements-hero-subtitle{ font-size:12px !important; }
  .guild-journey-hero .contact-banner-title{ bottom:20px !important; }
  .guild-journey{ width:calc(100% - 32px); padding:42px 0 58px; }
  .guild-journey>h2{ margin-bottom:34px; }
  
  
  
  
  
  
  
  
}

.contact-banner-title, .achievements-banner-title, .guild-journey-hero .contact-banner-title{
  left: clamp(28px, 6vw, 104px) !important;
  right: auto !important;
  top: auto !important;
  bottom: clamp(28px, 5vw, 72px) !important;
  transform: none !important;
  text-align: left !important;
}
.contact-banner-title .eyebrow, .achievements-banner-title .eyebrow, .guild-journey-hero .contact-banner-title .eyebrow{
  color: #f3e6d2 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  letter-spacing: .16em !important;
  line-height: 1.4 !important;
  margin: 0 0 7px !important;
  text-transform: uppercase;
}
.contact-banner-title h1, .achievements-banner-title h1, .guild-journey-hero .contact-banner-title h1{
  color: #f0c36d !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: clamp(36px, 4.2vw, 58px) !important;
  font-weight: 600 !important;
  letter-spacing: .06em !important;
  line-height: 1.08 !important;
  text-transform: uppercase !important;
  margin: 0 !important;
}
.achievements-hero-subtitle, .contact-hero-subtitle, .guild-hero-slogan{
  color: #f3e6d2 !important;
  font-family: "Open Sans", Arial, sans-serif !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  letter-spacing: .035em !important;
  line-height: 1.45 !important;
  margin: 7px 0 0 !important;
}
.guild-journey-hero .contact-banner-title{ bottom: clamp(28px, 5vw, 72px) !important; }








@media (max-width: 700px) {
  .contact-banner-title, .achievements-banner-title, .guild-journey-hero .contact-banner-title{ left: 5vw !important; bottom: 18px !important; }
  .contact-banner-title h1, .achievements-banner-title h1, .guild-journey-hero .contact-banner-title h1{ font-size: clamp(28px, 7vw, 38px) !important; }
  .contact-banner-title .eyebrow, .achievements-banner-title .eyebrow, .guild-journey-hero .contact-banner-title .eyebrow{ font-size: 10px !important; }
  .achievements-hero-subtitle, .contact-hero-subtitle, .guild-hero-slogan{ font-size: 11px !important; margin-top: 4px !important; }
  
  
  
  
}

.contact-page-body .contact-banner-title, .achievements-page .achievements-banner-title, .guild-journey-hero .contact-banner-title{
  left: clamp(28px, 6vw, 104px) !important;
  bottom: clamp(28px, 5vw, 72px) !important;
  top: auto !important;
}
.contact-page-body .contact-banner-title .eyebrow, .achievements-page .achievements-banner-title .eyebrow, .guild-journey-hero .contact-banner-title .eyebrow{ color:#f3e6d2 !important; }
.contact-page-body .contact-banner-title h1, .achievements-page .achievements-banner-title h1, .guild-journey-hero .contact-banner-title h1{ color:#f0c36d !important; }
@media(max-width:700px) {
  .contact-page-body .contact-banner-title, .achievements-page .achievements-banner-title, .guild-journey-hero .contact-banner-title{ left:5vw !important; bottom:18px !important; }
}

@media (min-width: 701px) {
  
  
  
  
  
}
@media (min-width: 701px) and (max-width: 1100px) {
  
}
@media (max-width: 700px) {
  
  
  
  
}

.contact-banner, .guild-journey-hero{
  position: relative;
}
.contact-page-body .contact-banner-title, .achievements-page .achievements-banner-title, .guild-journey-hero .contact-banner-title{
  position: absolute !important;
  left: clamp(28px, 6vw, 104px) !important;
  right: auto !important;
  top: auto !important;
  bottom: clamp(28px, 5vw, 72px) !important;
  transform: none !important;
  text-align: left !important;
}
@media (max-width: 700px) {
  .contact-page-body .contact-banner-title, .achievements-page .achievements-banner-title, .guild-journey-hero .contact-banner-title{
    left: 5vw !important;
    bottom: 18px !important;
  }
}

.faq-page-hero{ min-height: 42vh; }
.faq-content{ min-height: 34vh; }
.faq-list{ display: grid; gap: 16px; }
.faq-teaser{
  width: min(900px, calc(100% - 44px));
  margin: 0 auto;
  padding: 30px 0 64px;
  text-align: center;
  border-top: 1px solid rgba(205,151,72,.38);
}
.faq-teaser p{
  margin: 0 0 8px;
  color: #f3e6d2;
  font-size: clamp(16px, 1.2vw, 19px);
}
.faq-teaser-link{
  color: #eac381;
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid rgba(234,195,129,.65);
  padding-bottom: 2px;
}
.faq-teaser-link:hover{ color: #fff0d2; }
@media (max-width: 700px) {
  .faq-page-hero{ min-height: 34vh; }
  .faq-teaser{ width: calc(100% - 32px); padding: 26px 0 48px; }
}


/* ================================================================
   Shared site header — authoritative rule for every page
   Transparent at page top; dark glass background after scrolling.
   ================================================================ */
.site-header, .site-header.is-scrolled{
  background: transparent !important;
  box-shadow: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.site-header::after{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 11px !important;
  left: 0 !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
  pointer-events: none !important;
}
.site-header.is-scrolled::after{
  background: rgba(12, 5, 3, .78) !important;
  -webkit-backdrop-filter: blur(9px) !important;
  backdrop-filter: blur(9px) !important;
  box-shadow: 0 5px 18px rgba(0, 0, 0, .16) !important;
}
.site-header > *{ position: relative; z-index: 2; }

/* =========================================================
   GILDEN-HELDENREISE – konsolidierte Layoutregeln
   ========================================================= */
.story-chapter {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(250px, .8fr);
  gap: clamp(28px, 4vw, 66px);
  align-items: stretch;
  margin: 0 auto;
  padding: 0 0 clamp(38px, 4vw, 56px);
  position: relative;
}
.story-chapter:nth-of-type(even) {
  grid-template-columns: minmax(250px, .8fr) minmax(0, 1.35fr);
}
.story-chapter::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 16%;
  width: 68%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(205,151,72,.58), transparent);
}
.story-chapter + .story-chapter {
  padding-top: clamp(38px, 4vw, 56px);
}
.story-chapter:last-child::after {
  display: none;
}
.story-copy {
  min-width: 0;
  align-self: stretch;
}
.story-image {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: none;
  min-height: 0;
  align-self: stretch;
}
.story-image img {
  display: block;
  width: auto;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.story-chapter-5 {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 22px;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding-top: clamp(38px, 4vw, 56px);
}
.story-chapter-5 .story-copy {
  width: 100%;
}
.story-chapter-5 .story-copy h3 {
  text-align: center;
  margin-bottom: 22px;
}
.story-chapter-5 .story-image {
  width: 100%;
  max-width: 560px;
  margin-inline: auto;
}
.story-chapter-5 .story-image img {
  width: 100%;
  height: auto;
  max-height: 280px;
}
.story-final-cta {
  text-align: center;
  padding: 2px 0 0;
}
@media (min-width: 701px) {
  .story-chapter:not(.story-chapter-5) .story-image {
    height: 280px;
    max-height: 280px;
    overflow: hidden;
  }
  .story-chapter:not(.story-chapter-5) .story-image img {
    height: 280px;
    max-height: 280px;
  }
}
@media (min-width: 701px) and (max-width: 1100px) {
  .story-chapter:not(.story-chapter-5) .story-image,
  .story-chapter:not(.story-chapter-5) .story-image img {
    height: 240px;
    max-height: 240px;
  }
}
@media (max-width: 900px) and (min-width: 701px) {
  .story-chapter,
  .story-chapter:nth-of-type(even) {
    grid-template-columns: minmax(0, 1.25fr) minmax(220px, .8fr);
    gap: 26px;
  }
}
@media (max-width: 700px) {
  .story-chapter,
  .story-chapter:nth-of-type(even) {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 18px;
    padding-bottom: 34px;
    margin: 0;
  }
  .story-chapter + .story-chapter {
    padding-top: 34px;
  }
  .story-chapter .story-copy {
    order: 0;
  }
  .story-chapter .story-image {
    order: 1;
  }
  .story-chapter .story-image {
    display: block;
    width: min(100%, 260px);
    max-width: 260px;
    height: auto;
    max-height: none;
    margin: 0 auto;
    overflow: visible;
  }
  .story-chapter .story-image img {
    width: 100%;
    height: auto;
    max-height: none;
  }
  .story-chapter-5 {
    gap: 18px;
  }
  .story-chapter-5 .story-image {
    width: 100%;
    max-width: 100%;
  }
  .story-chapter-5 .story-image img {
    max-height: none;
  }
}


/* Erfolge-Hero: Unterzeile auf Smartphones in einer Zeile halten */
@media (max-width: 700px) {
  .achievements-hero-subtitle {
    white-space: nowrap !important;
    max-width: none !important;
    font-size: clamp(9px, 2.7vw, 11px) !important;
    letter-spacing: .01em !important;
  }
}

/* FAQ page – compact full-width panoramic hero and accessible accordion */
.faq-page-hero{
  position:relative;
  width:100%;
  height:clamp(190px, 11.51vw, 250px);
  min-height:0 !important;
  overflow:hidden;
  border-bottom:1px solid rgba(205,151,72,.45);
  background:#100806;
}
.faq-hero-image{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 48%;
  display:block;
}
.faq-hero-title{
  position:absolute;
  z-index:1;
  left:clamp(28px, 6vw, 104px);
  bottom:clamp(20px, 2.1vw, 42px);
  text-align:left;
  text-shadow:0 2px 12px rgba(0,0,0,.9);
}
.faq-hero-title .eyebrow{
  color:#f3e6d2;
  font-family:"Open Sans",Arial,sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.16em;
  margin:0 0 5px;
}
.faq-hero-title h1{
  color:#f0c36d;
  font-family:"Open Sans",Arial,sans-serif;
  font-size:clamp(34px,3.4vw,52px);
  font-weight:700;
  letter-spacing:.06em;
  line-height:1;
  margin:0;
}
.faq-hero-subtitle{
  color:#f3e6d2;
  font-family:"Open Sans",Arial,sans-serif;
  font-size:13px;
  font-weight:600;
  letter-spacing:.08em;
  margin:6px 0 0;
}
.faq-content{
  width:min(1040px, calc(100% - 48px));
  min-height:0;
  margin:0 auto;
  padding:48px 0 76px;
}
.faq-intro{text-align:center;margin:0 0 30px;}
.faq-intro h2{color:#f0c36d;margin:0 0 10px;}
.faq-intro p{color:#d9c8b2;margin:0;}
.faq-list{display:grid;gap:12px;}
.faq-item{
  border:1px solid rgba(205,151,72,.32);
  border-radius:5px;
  background:linear-gradient(110deg,rgba(58,20,17,.55),rgba(20,10,8,.92));
  overflow:hidden;
}
.faq-item summary{
  position:relative;
  cursor:pointer;
  list-style:none;
  padding:19px 54px 19px 22px;
  color:#f0c36d;
  font-size:16px;
  font-weight:600;
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{
  content:"+";
  position:absolute;
  right:22px;
  top:50%;
  transform:translateY(-50%);
  color:#eac381;
  font-size:25px;
  font-weight:400;
}
.faq-item[open] summary::after{content:"−";}
.faq-answer{
  padding:0 22px 19px;
  color:#e7d9c8;
  line-height:1.7;
}
.faq-answer p{margin:0 0 12px;}
.faq-answer p:last-child{margin-bottom:0;}
.faq-answer a{color:#eac381;text-decoration:underline;text-underline-offset:3px;}
@media(max-width:700px){
  .faq-page-hero{height:190px;}
  .faq-hero-image{object-position:53% center;}
  .faq-hero-title{left:5vw;bottom:18px;}
  .faq-hero-title .eyebrow{font-size:10px;}
  .faq-hero-title h1{font-size:34px;}
  .faq-hero-subtitle{font-size:10px;letter-spacing:.045em;}
  .faq-content{width:calc(100% - 32px);padding:34px 0 52px;}
  .faq-item summary{padding:16px 46px 16px 16px;font-size:14px;}
  .faq-item summary::after{right:16px;}
  .faq-answer{padding:0 16px 16px;font-size:14px;}
}

/* FAQ banner correction V12: show the complete illustration at its native aspect ratio */
.faq-page-hero{
  position:relative;
  width:100%;
  height:auto !important;
  min-height:0 !important;
  overflow:hidden;
  background:#100806;
  line-height:0;
}
.faq-page-hero .faq-hero-image{
  position:relative !important;
  inset:auto !important;
  display:block;
  width:100% !important;
  height:auto !important;
  max-width:none;
  object-fit:contain !important;
  object-position:center;
}
.faq-page-hero .faq-hero-title{
  position:absolute;
  z-index:2;
  left:clamp(28px, 6vw, 104px);
  bottom:clamp(18px, 2vw, 38px);
  line-height:normal;
  text-align:left;
}
@media(max-width:700px){
  .faq-page-hero .faq-hero-title{
    left:5vw;
    bottom:12px;
  }
}

/* FAQ hero V13 */
.faq-page-hero{
  position:relative;
  width:100%;
  height:auto !important;
  min-height:0 !important;
  overflow:hidden;
  background:#100806;
  line-height:0;
  border-bottom:1px solid rgba(205,151,72,.45);
}
.faq-page-hero .faq-hero-image{
  position:relative !important;
  inset:auto !important;
  display:block;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:center;
}
.faq-page-hero .faq-hero-title{
  position:absolute;
  z-index:2;
  left:clamp(28px, 6vw, 104px);
  bottom:clamp(14px, 1.5vw, 28px);
  line-height:normal;
  text-align:left;
}
.faq-hero-title .eyebrow{margin:0 0 4px;}
.faq-hero-title h1{margin:0;}
.faq-hero-subtitle{margin:4px 0 0;}
@media(max-width:700px){
  .faq-page-hero .faq-hero-title{
    position:static;
    padding:10px 16px 12px;
    text-align:center;
    background:#100806;
  }
  .faq-page-hero .faq-hero-title .eyebrow,
  .faq-page-hero .faq-hero-title .faq-hero-subtitle{
    display:none !important;
  }
  .faq-page-hero .faq-hero-title h1{
    font-size:26px !important;
    line-height:1.1;
  }
  .faq-page-hero .faq-hero-image{
    width:100% !important;
    height:auto !important;
  }
}

/* FAQ hero V14: use the supplied artwork unchanged, full width, no side extensions */
.faq-page-hero{
  position:relative;
  width:100%;
  height:auto !important;
  min-height:0 !important;
  overflow:hidden;
  background:#100806;
  line-height:0;
  border-bottom:1px solid rgba(205,151,72,.45);
}
.faq-page-hero .faq-hero-image{
  position:relative !important;
  inset:auto !important;
  display:block;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  object-fit:initial !important;
  object-position:initial !important;
}
.faq-page-hero .faq-hero-title{
  position:absolute;
  z-index:2;
  left:clamp(28px, 6vw, 104px);
  bottom:clamp(14px, 1.5vw, 28px);
  line-height:normal;
  text-align:left;
}
@media(max-width:700px){
  .faq-page-hero .faq-hero-title{
    position:static;
    padding:10px 16px 12px;
    text-align:center;
    background:#100806;
  }
  .faq-page-hero .faq-hero-title .eyebrow,
  .faq-page-hero .faq-hero-title .faq-hero-subtitle{
    display:none !important;
  }
  .faq-page-hero .faq-hero-title h1{
    font-size:26px !important;
    line-height:1.1;
  }
}

/* FAQ hero V15 – original user artwork, lossless and uncropped */
.faq-page-hero{
  position:relative;
  display:block;
  width:100%;
  height:auto !important;
  min-height:0 !important;
  overflow:hidden;
  line-height:0;
  background:#100806;
  border-bottom:1px solid rgba(205,151,72,.45);
}
.faq-page-hero .faq-hero-image{
  position:relative !important;
  inset:auto !important;
  display:block;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  object-fit:fill !important;
  object-position:center;
}
.faq-page-hero .faq-hero-title{
  position:absolute;
  left:clamp(28px, 6vw, 104px);
  bottom:clamp(14px, 1.5vw, 28px);
  z-index:2;
  line-height:normal;
}
@media(max-width:700px){
  .faq-page-hero .faq-hero-title{
    position:static;
    padding:10px 16px 12px;
    text-align:center;
    background:#100806;
  }
  .faq-page-hero .faq-hero-title .eyebrow,
  .faq-page-hero .faq-hero-title .faq-hero-subtitle{
    display:none !important;
  }
  .faq-page-hero .faq-hero-title h1{
    font-size:26px !important;
    line-height:1.1;
  }
}

/* FAQ hero V16 – matching the established page-hero layout */
.faq-page-hero{
  position:relative;
  display:flex;
  align-items:flex-end;
  width:100%;
  min-height:0 !important;
  height:auto !important;
  aspect-ratio:2172 / 724;
  overflow:hidden;
  padding:0 clamp(22px, 5.3vw, 100px) clamp(42px, 4.2vw, 76px);
  box-sizing:border-box;
  background:#100806;
  border-bottom:1px solid var(--line);
  line-height:normal;
}
.faq-page-hero .faq-hero-image{
  position:absolute !important;
  inset:0 !important;
  z-index:0;
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  object-fit:cover !important;
  object-position:center center !important;
}
.faq-page-hero .faq-hero-title{
  position:relative;
  z-index:1;
  left:auto;
  bottom:auto;
  line-height:normal;
  text-align:left;
}
.faq-page-hero .faq-hero-title .eyebrow,
.faq-page-hero .faq-hero-title h1,
.faq-page-hero .faq-hero-title .faq-hero-subtitle{
  margin-left:0;
}
@media(max-width:700px){
  .faq-page-hero{
    min-height:0 !important;
    padding:0 22px 28px;
    aspect-ratio:2172 / 900;
  }
  .faq-page-hero .faq-hero-image{
    object-fit:cover !important;
    object-position:center 42% !important;
  }
  .faq-page-hero .faq-hero-title{
    position:relative;
    padding:0;
    background:transparent;
    text-align:left;
  }
  .faq-page-hero .faq-hero-title .eyebrow,
  .faq-page-hero .faq-hero-title .faq-hero-subtitle{
    display:block !important;
  }
  .faq-page-hero .faq-hero-title h1{
    font-size:clamp(32px, 8vw, 48px) !important;
    line-height:1.05;
  }
}

/* V17 – one consistent hero title system on all content pages (Home intentionally excluded) */
.shared-page-hero{
  position:relative !important;
  overflow:hidden !important;
  border-bottom:1px solid rgba(226,177,91,.82) !important;
}
.shared-page-hero-title,
.shared-page-hero .shared-page-hero-title,
.shared-page-hero .contact-banner-title,
.shared-page-hero .achievements-banner-title,
.shared-page-hero .faq-hero-title{
  position:absolute !important;
  left:clamp(28px, 6vw, 104px) !important;
  right:auto !important;
  top:auto !important;
  bottom:clamp(28px, 5vw, 72px) !important;
  transform:none !important;
  z-index:3 !important;
  width:auto !important;
  max-width:min(760px, calc(100% - 56px)) !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
  line-height:1.35 !important;
  background:transparent !important;
}
.shared-page-hero .shared-page-hero-title .eyebrow,
.shared-page-hero .shared-page-hero-title .shared-hero-subtitle,
.shared-page-hero .shared-page-hero-title .achievements-hero-subtitle,
.shared-page-hero .shared-page-hero-title .contact-hero-subtitle,
.shared-page-hero .shared-page-hero-title .faq-hero-subtitle,
.shared-page-hero .shared-page-hero-title .guild-hero-slogan{
  display:block !important;
  margin:0 !important;
  padding:0 !important;
  color:#f3e6d2 !important;
  font-family:"Open Sans",Arial,sans-serif !important;
  font-size:clamp(16px, 1.05vw, 18px) !important;
  font-weight:600 !important;
  letter-spacing:.12em !important;
  line-height:1.4 !important;
  text-transform:uppercase !important;
  white-space:normal !important;
  max-width:100% !important;
}
.shared-page-hero .shared-page-hero-title h1{
  display:block !important;
  margin:5px 0 4px !important;
  padding:0 !important;
  color:#f0c36d !important;
  font-family:"Open Sans",Arial,sans-serif !important;
  font-size:clamp(38px, 3vw, 52px) !important;
  font-weight:600 !important;
  letter-spacing:.04em !important;
  line-height:1.05 !important;
  text-transform:uppercase !important;
  text-align:left !important;
}
.shared-page-hero .guild-hero-slogan{
  margin-top:0 !important;
}
.shared-page-hero .faq-hero-title .eyebrow,
.shared-page-hero .faq-hero-title .faq-hero-subtitle{
  display:block !important;
}
.shared-page-hero.faq-page-hero{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:2172 / 724 !important;
  padding:0 !important;
}
.shared-page-hero.faq-page-hero .faq-hero-image{
  position:absolute !important;
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  object-fit:cover !important;
  object-position:center center !important;
}
.shared-page-hero.about-page-hero{
  min-height:0 !important;
  height:auto !important;
  aspect-ratio:2172 / 724 !important;
  display:block !important;
  padding:0 !important;
  background-position:center 42% !important;
  background-size:cover !important;
}
.shared-page-hero .contact-banner-title,
.shared-page-hero .achievements-banner-title,
.shared-page-hero .guild-banner-title{
  /* Keep one common anchor point regardless of the page-specific legacy selectors. */
  left:clamp(28px, 6vw, 104px) !important;
  bottom:clamp(28px, 5vw, 72px) !important;
}
@media(max-width:700px){
  .shared-page-hero-title,
  .shared-page-hero .shared-page-hero-title,
  .shared-page-hero .contact-banner-title,
  .shared-page-hero .achievements-banner-title,
  .shared-page-hero .faq-hero-title{
    left:5vw !important;
    bottom:18px !important;
    max-width:90% !important;
  }
  .shared-page-hero .shared-page-hero-title .eyebrow,
  .shared-page-hero .shared-page-hero-title .shared-hero-subtitle,
  .shared-page-hero .shared-page-hero-title .achievements-hero-subtitle,
  .shared-page-hero .shared-page-hero-title .contact-hero-subtitle,
  .shared-page-hero .shared-page-hero-title .faq-hero-subtitle,
  .shared-page-hero .shared-page-hero-title .guild-hero-slogan{
    font-size:16px !important;
    letter-spacing:.12em !important;
    line-height:1.35 !important;
  }
  .shared-page-hero .shared-page-hero-title h1{
    font-size:38px !important;
    line-height:1.05 !important;
    margin:4px 0 !important;
  }
  .shared-page-hero.faq-page-hero{
    aspect-ratio:2172 / 1000 !important;
  }
  .shared-page-hero.faq-page-hero .faq-hero-image{
    object-position:center 42% !important;
  }
  .shared-page-hero.about-page-hero{
    aspect-ratio:2172 / 1000 !important;
  }
}


/* V19 – precise hero alignment without changing semantic heading structure */
.shared-page-hero .shared-page-hero-title,
.shared-page-hero .contact-banner-title,
.shared-page-hero .achievements-banner-title,
.shared-page-hero .faq-hero-title{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:flex-end !important;
  gap:6px !important;
  text-align:left !important;
}
.shared-page-hero .shared-page-hero-title > .eyebrow,
.shared-page-hero .shared-page-hero-title > h1,
.shared-page-hero .shared-page-hero-title > p,
.shared-page-hero .contact-banner-title > .eyebrow,
.shared-page-hero .contact-banner-title > h1,
.shared-page-hero .contact-banner-title > p,
.shared-page-hero .achievements-banner-title > .eyebrow,
.shared-page-hero .achievements-banner-title > h1,
.shared-page-hero .achievements-banner-title > p,
.shared-page-hero .faq-hero-title > .eyebrow,
.shared-page-hero .faq-hero-title > h1,
.shared-page-hero .faq-hero-title > p{
  margin:0 !important;
  padding:0 !important;
  text-indent:0 !important;
  align-self:flex-start !important;
  text-align:left !important;
}
.shared-page-hero .shared-page-hero-title > h1,
.shared-page-hero .contact-banner-title > h1,
.shared-page-hero .achievements-banner-title > h1,
.shared-page-hero .faq-hero-title > h1{
  line-height:1.05 !important;
}


/* FAQ-Verweis auf der Kontaktseite */
.contact-faq-teaser{
  margin-top: 42px;
  padding-top: 26px;
}
.contact-faq-teaser p + p{
  margin: 0 auto 18px;
  max-width: 620px;
  color: #e8d6bd;
  font-size: 15px;
  line-height: 1.6;
}
.faq-teaser-button{
  margin-top: 6px;
}
@media (max-width: 820px){
  .contact-faq-teaser{ margin-top: 34px; }
}


/* V22 – Gilden-Seite: FAQ näher an den Join-Bereich und Trust-Bereich klar absetzen */
.guild-journey {
  padding-bottom: 20px;
}
.guild-journey + .faq-teaser {
  padding-top: 12px;
}
.guild-journey .guild-trust {
  padding-bottom: clamp(38px, 4vw, 56px);
  margin-bottom: clamp(38px, 4vw, 56px);
  border-bottom: 1px solid rgba(205, 151, 72, .38);
}
@media (max-width: 760px) {
  .guild-journey {
    padding-bottom: 14px;
  }
  .guild-journey + .faq-teaser {
    padding-top: 8px;
  }
  .guild-journey .guild-trust {
    padding-bottom: 30px;
    margin-bottom: 30px;
  }
}


/* V23 – Abschluss der FAQ-Seite mit direktem nächsten Schritt */
.faq-end-cta {
  width: min(900px, calc(100% - 44px));
  margin: 0 auto;
  padding: 34px 0 58px;
  text-align: center;
  border-top: 1px solid rgba(205,151,72,.38);
}
.faq-end-cta h2 {
  margin: 0 0 10px;
  color: #eac381;
  font-size: clamp(21px, 2vw, 28px);
}
.faq-end-cta > p:not(.faq-end-contact) {
  margin: 0 auto 22px;
  max-width: 620px;
  color: #e8d6bd;
  line-height: 1.6;
}
@media (max-width: 700px) {
  .faq-end-cta {
    width: calc(100% - 32px);
    padding: 28px 0 44px;
  }
}


/* V24 – Abschlussbereich der Erfolge-Seite */
.achievements-end-cta {
  width: min(1080px, calc(100% - 48px));
  margin: 0 auto;
  padding: 42px 0 64px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  border-top: 1px solid rgba(205,151,72,.38);
}
.achievements-end-cta article {
  min-width: 0;
  padding: 28px 24px 30px;
  text-align: center;
  border: 1px solid rgba(190,143,65,.42);
  background: linear-gradient(145deg, rgba(75,29,13,.32), rgba(20,9,6,.68));
}
.achievements-end-cta h2 {
  margin: 0 0 12px;
  color: #eac381;
  font-size: clamp(20px, 1.8vw, 25px);
}
.achievements-end-cta p {
  max-width: 440px;
  min-height: 3.2em;
  margin: 0 auto 22px;
  color: #e8d6bd;
  line-height: 1.6;
}
.achievements-end-cta .achievements-join {
  border-color: rgba(205,151,72,.72);
  background: linear-gradient(145deg, rgba(91,17,12,.72), rgba(28,8,7,.9));
}
.achievements-end-cta .achievements-join h2 {
  color: #f0c36d;
}
@media (max-width: 700px) {
  .achievements-end-cta {
    width: calc(100% - 32px);
    grid-template-columns: 1fr;
    gap: 16px;
    padding: 30px 0 46px;
  }
  .achievements-end-cta article {
    padding: 24px 18px;
  }
  .achievements-end-cta p {
    min-height: 0;
  }
}

/* V27 – Über uns Hero: full image, original 3:1 ratio, no cropping */
.shared-page-hero.about-page-hero{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:2172 / 724 !important;
  padding:0 !important;
  background:none !important;
  overflow:hidden !important;
  border-bottom:1px solid rgba(226,177,91,.82) !important;
}
.shared-page-hero.about-page-hero .about-hero-image{
  display:block !important;
  width:100% !important;
  height:auto !important;
  aspect-ratio:2172 / 724;
  object-fit:contain !important;
  object-position:center center !important;
}
@media(max-width:700px){
  .shared-page-hero.about-page-hero{aspect-ratio:2172 / 724 !important;}
  .shared-page-hero.about-page-hero .shared-page-hero-title{bottom:18px !important;}
}


/* V5 – eigenständiger Aufbau der Über-uns-Seite */
.about-story-section,
.about-people-section,
.about-values-section {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
}
.about-story-section { padding: 42px 0 38px; }
.about-section-heading {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  margin:0 auto 26px;
  text-align:center;
}
.about-section-heading > span {
  display:block;
  width:clamp(36px, 9vw, 125px);
  height:1px;
  background:linear-gradient(90deg, transparent, #c99443);
}
.about-section-heading > span:last-child {
  transform:scaleX(-1);
}
.about-section-heading h2 {
  margin:0;
  color:#e9bd72;
  font-family:Georgia,serif;
  font-size:clamp(21px,2.2vw,30px);
  font-weight:600;
  letter-spacing:.075em;
  text-transform:uppercase;
}
.about-story-layout {
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
  gap:34px;
}
.about-story-copy {
  color:#e8d8c2;
  font-size:15px;
  line-height:1.65;
}
.about-story-copy p { margin:0 0 13px; }
.about-story-copy p:last-child { margin-bottom:0; }
.about-story-copy p strong {
  display:block;
  color:#e9bd72;
  font-family:Georgia,serif;
  font-size:clamp(20px,2vw,25px);
  line-height:1.25;
  margin-bottom:5px;
}
.about-story-art {
  margin:0;
  border:1px solid rgba(204,153,75,.72);
  padding:5px;
  background:linear-gradient(135deg,rgba(135,75,28,.3),rgba(15,7,5,.9));
  box-shadow:0 8px 24px rgba(0,0,0,.35);
}
.about-story-art img {
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3 / 1;
  object-fit:cover;
}
.about-people-section {
  padding:34px 0 42px;
  border-top:1px solid rgba(205,151,72,.38);
}
.about-section-intro {
  margin:-10px auto 25px;
  text-align:center;
  color:#e8d6bd;
  font-size:16px;
}
.about-people-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;
}
.about-person-card {
  min-width:0;
  overflow:hidden;
  text-align:center;
  border:1px solid rgba(205,151,72,.78);
  background:linear-gradient(155deg,rgba(75,25,17,.48),rgba(14,7,5,.94));
  box-shadow:0 8px 24px rgba(0,0,0,.3);
}
.about-person-card img {
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  object-fit:cover;
  object-position:center 34%;
}
.about-person-card h3 {
  margin:0;
  padding:12px 8px 10px;
  color:#edc477;
  font-family:Georgia,serif;
  font-size:22px;
  letter-spacing:.08em;
  border-top:1px solid rgba(205,151,72,.65);
  border-bottom:1px solid rgba(205,151,72,.35);
}
.about-person-card p {
  margin:0;
  padding:16px 17px 19px;
  color:#e8d8c2;
  font-size:14px;
  line-height:1.6;
  text-align:left;
}
.about-values-section {
  padding:34px 0 44px;
  border-top:1px solid rgba(205,151,72,.38);
}
.about-values-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}
.about-value-card {
  padding:22px 18px 24px;
  text-align:center;
  border:1px solid rgba(205,151,72,.75);
  background:linear-gradient(145deg,rgba(75,29,13,.36),rgba(17,7,5,.9));
  box-shadow:0 7px 20px rgba(0,0,0,.25);
}
.about-value-icon {
  min-height:42px;
  color:#e9bd72;
  font-family:Georgia,serif;
  font-size:36px;
  line-height:1;
  text-shadow:0 0 12px rgba(220,158,65,.35);
}
.about-value-card h3 {
  margin:10px 0 12px;
  color:#edc477;
  font-family:Georgia,serif;
  font-size:20px;
  letter-spacing:.07em;
}
.about-value-rule {
  width:62px;
  height:1px;
  margin:0 auto 13px;
  background:#c99443;
}
.about-value-card p {
  margin:0;
  color:#e8d8c2;
  font-size:14px;
  line-height:1.5;
}
.about-end-cta {
  position:relative;
  overflow:hidden;
  padding:30px 24px 54px;
  text-align:center;
  border-top:1px solid rgba(205,151,72,.6);
  background:
    linear-gradient(180deg,rgba(13,6,5,.88),rgba(13,6,5,.75)),
    url("assets/about-story.webp") center 62% / cover no-repeat;
}
.about-end-ornament {
  margin:0 auto 10px;
  color:#d8a24e;
  font-size:28px;
}
.about-end-cta h2,
.about-end-cta h3 {
  color:#edc477;
  font-family:Georgia,serif;
  letter-spacing:.07em;
}
.about-end-cta h2 { margin:0 0 17px; font-size:clamp(24px,2.6vw,34px); }
.about-end-cta p {
  max-width:760px;
  margin:0 auto 10px;
  color:#f0dfc8;
  font-size:15px;
  line-height:1.65;
}
.about-end-cta h3 { margin:24px 0 18px; font-size:clamp(23px,2.5vw,32px); }
.about-end-cta .discord-button { display:inline-flex; align-items:center; justify-content:center; min-width:190px; }

@media (max-width: 820px) {
  .about-story-layout { grid-template-columns:1fr; gap:22px; }
  .about-story-art { max-width:760px; width:100%; margin:0 auto; }
  .about-people-grid { gap:14px; }
  .about-person-card p { padding:13px 12px 16px; }
}
@media (max-width: 600px) {
  .about-story-section,
  .about-people-section,
  .about-values-section { width:calc(100% - 32px); }
  .about-story-section { padding:30px 0 28px; }
  .about-section-heading { gap:10px; margin-bottom:20px; }
  .about-section-heading > span { width:24px; }
  .about-section-heading h2 { font-size:19px; letter-spacing:.045em; }
  .about-story-copy { font-size:14px; line-height:1.6; }
  .about-people-section,.about-values-section { padding:28px 0 32px; }
  .about-people-grid,.about-values-grid { grid-template-columns:1fr; gap:17px; }
  .about-person-card { display:grid; grid-template-columns:112px minmax(0,1fr); align-items:stretch; text-align:left; }
  .about-person-card img { grid-row:1 / span 2; width:112px; height:100%; min-height:150px; aspect-ratio:auto; object-fit:cover; }
  .about-person-card h3 { align-self:end; text-align:left; padding:12px 13px 7px; font-size:19px; border-top:0; }
  .about-person-card p { padding:5px 13px 13px; font-size:13px; }
  .about-value-card { padding:18px 16px 20px; }
  .about-end-cta { padding:27px 18px 42px; }
}


/* Über uns – Fließtexte und Kartenbeschreibungen bleiben überall mindestens 16 px. */
.about-story-copy,
.about-person-card p,
.about-value-card p,
.about-end-cta p {
  font-size: 16px !important;
}
@media (max-width: 600px) {
  .about-story-copy,
  .about-person-card p,
  .about-value-card p,
  .about-end-cta p {
    font-size: 16px !important;
  }
}


/* V7 – Kontaktbanner zeigt die vollständige Originalgrafik.
   Das Bild skaliert proportional über die gesamte Breite; keine Crops, kein Stretching. */
.contact-page .contact-banner.shared-page-hero {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1536 / 132 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(226,177,91,.82) !important;
  line-height: 0 !important;
}
.contact-page .contact-banner.shared-page-hero > img {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
}
.contact-page .contact-banner.shared-page-hero .contact-banner-title {
  position: absolute !important;
  left: clamp(28px, 6vw, 104px) !important;
  right: auto !important;
  top: auto !important;
  bottom: 12px !important;
  transform: none !important;
  line-height: 1.35 !important;
}
@media (max-width: 700px) {
  .contact-page .contact-banner.shared-page-hero .contact-banner-title {
    left: 5vw !important;
    bottom: 8px !important;
    max-width: 90% !important;
  }
}




/* V9 – konsistente Header- und Hero-Regeln für Desktop, Tablet und Smartphone.
   Die Header-Höhe enthält die goldene Abschlusslinie; das Hero beginnt darunter. */
:root {
  --header-h: 70px;
  --header-bg: rgba(12, 5, 3, .92);
}
.site-header,
.site-header.is-scrolled {
  height: var(--header-h) !important;
  min-height: var(--header-h) !important;
  box-sizing: border-box !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  isolation: isolate !important;
}
.site-header::after,
.site-header.is-scrolled::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  z-index: 0 !important;
  inset: 0 0 1px 0 !important;
  height: auto !important;
  background: var(--header-bg) !important;
  -webkit-backdrop-filter: blur(9px) !important;
  backdrop-filter: blur(9px) !important;
  pointer-events: none !important;
  box-shadow: none !important;
}
.home-page-body .site-header:not(.is-scrolled)::after {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
.site-header::before,
.site-header.is-scrolled::before {
  content: "" !important;
  position: absolute !important;
  z-index: 5 !important;
  left: 0 !important;
  right: 0 !important;
  top: auto !important;
  bottom: 0 !important;
  height: 1px !important;
  background: linear-gradient(90deg, transparent, rgba(201,148,66,.85) 12%, #e7bd6a 50%, rgba(201,148,66,.85) 88%, transparent) !important;
  pointer-events: none !important;
}
.site-header > * { position: relative; z-index: 2; }
.site-header .brand,
.site-header .nav,
.site-header .header-discord {
  align-self: center !important;
}
.site-header .brand {
  height: var(--header-h) !important;
}
.site-header .nav {
  height: 100% !important;
  align-items: center !important;
}
.site-header .nav a {
  display: flex !important;
  height: 100% !important;
  min-height: 0 !important;
  padding: 0 15px !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1.2 !important;
}
.site-header .nav a.active::after { bottom: 7px !important; }
.site-header .nav a.active::before { bottom: 3px !important; }

/* Alle Unterseiten beginnen exakt unterhalb des fixierten Headers. */
.contact-page-body .contact-page,
.guild-page-body main,
.achievements-page-body .achievements-page,
.about-page-body main,
.faq-page-body .faq-page {
  padding-top: var(--header-h) !important;
}

/* Die Hero-Bilder behalten ihre natürliche Proportion. Keine Überlagerung
   durch den Header und keine zusätzlichen Höhen durch alte Regeln. */
.contact-page .contact-banner.shared-page-hero,
.guild-journey-hero.shared-page-hero,
.achievements-page .contact-banner.shared-page-hero,
.faq-page-hero.shared-page-hero,
.about-page-hero.shared-page-hero {
  margin-top: 0 !important;
}

/* Tablet: Kategorie bleibt gut lesbar, Zusatzzeilen entfallen. */
@media (max-width: 900px) {
  :root { --header-h: 68px; }
  .site-header,
  .site-header.is-scrolled {
    height: var(--header-h) !important;
    min-height: var(--header-h) !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
  }
  .site-header .brand { height: var(--header-h) !important; }
  .site-header .nav a { padding-left: 10px !important; padding-right: 10px !important; }
  .shared-page-hero .eyebrow,
  .shared-page-hero .contact-hero-subtitle,
  .shared-page-hero .guild-hero-slogan,
  .shared-page-hero .achievements-hero-subtitle,
  .shared-page-hero .faq-hero-subtitle,
  .shared-page-hero .shared-hero-subtitle {
    display: none !important;
  }
  .shared-page-hero .shared-page-hero-title h1 {
    font-size: clamp(25px, 4vw, 38px) !important;
    line-height: 1.08 !important;
    margin: 0 !important;
  }
  .shared-page-hero .shared-page-hero-title {
    left: 5vw !important;
    right: 5vw !important;
    bottom: 10px !important;
    gap: 0 !important;
    line-height: 1.1 !important;
  }
}

/* Smartphone: nur der Kategoriename bleibt im Hero sichtbar. */
@media (max-width: 600px) {
  :root { --header-h: 62px; }
  .site-header,
  .site-header.is-scrolled {
    height: var(--header-h) !important;
    min-height: var(--header-h) !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }
  .site-header .brand { height: var(--header-h) !important; }
  .site-header .nav a { min-height: 44px !important; height: auto !important; }
  .site-header .nav a.active::after { bottom: 2px !important; }
  .site-header .nav a.active::before { bottom: -2px !important; }
  .shared-page-hero .shared-page-hero-title h1 {
    font-size: clamp(22px, 6vw, 30px) !important;
    letter-spacing: .035em !important;
    line-height: 1.05 !important;
  }
  .shared-page-hero .shared-page-hero-title {
    left: 16px !important;
    right: 16px !important;
    bottom: 7px !important;
  }
}

/* Schmale Geräte: Navigation wechselt frühzeitig ins Hamburger-Menü,
   bevor Logo und Menüpunkte miteinander kollidieren. */
@media (max-width: 1100px) {
  .site-header .header-discord { display: none !important; }
  .site-header .menu-toggle {
    display: flex !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 40px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 1302 !important;
  }
  .site-header .nav,
  .site-header .nav.open {
    position: absolute !important;
    display: none !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 16px 16px !important;
    flex: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 5px !important;
    background: linear-gradient(145deg,#28100a,#130604 72%) !important;
    border: 1px solid rgba(210,157,73,.76) !important;
    box-shadow: 0 18px 34px rgba(0,0,0,.68) !important;
    z-index: 1301 !important;
  }
  .site-header .nav.open { display: flex !important; }
  .site-header .nav a,
  .site-header .nav a:hover,
  .site-header .nav a.active {
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 9px 12px !important;
    justify-content: center !important;
    font-size: 16px !important;
    border: 1px solid transparent !important;
    border-bottom: 1px solid rgba(204,153,77,.24) !important;
  }
  .site-header .nav a:hover,
  .site-header .nav a.active {
    background: linear-gradient(90deg,rgba(119,25,15,.70),rgba(76,18,12,.76)) !important;
    border-color: rgba(202,145,60,.34) !important;
    box-shadow: inset 0 -2px #d7a44f !important;
  }
  .site-header .nav a::before,
  .site-header .nav a::after { display: none !important; }
}


/* V10 – kompakte Navigationsflächen: aktiver Menüpunkt und Hover
   bleiben auf die Höhe des roten Auswahlkastens begrenzt. */
@media (min-width: 1101px) {
  .site-header .nav {
    height: 100% !important;
    align-items: center !important;
  }
  .site-header .nav a,
  .site-header .nav a:hover,
  .site-header .nav a.active,
  .site-header .nav a.active:hover {
    position: relative !important;
    display: flex !important;
    flex: 0 0 auto !important;
    align-self: center !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    box-sizing: border-box !important;
    padding: 0 15px !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1.2 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  .site-header .nav a::before,
  .site-header .nav a::after {
    content: none !important;
    display: none !important;
  }
  .site-header .nav a.active,
  .site-header .nav a.active:hover {
    background: linear-gradient(180deg, rgba(112, 20, 14, .94), rgba(67, 10, 8, .96)) !important;
    border-bottom: 2px solid #d9a64f !important;
    color: #ffe7b3 !important;
  }
  .site-header .nav a:hover:not(.active) {
    background: rgba(194, 125, 34, .30) !important;
    outline: 1px solid rgba(242, 198, 110, .48) !important;
    outline-offset: -1px !important;
    color: #ffe7b3 !important;
  }
}


/* V11 – aktive Kategorie: ausschließlich eine goldene Linie unten. */
@media (min-width: 1101px) {
  .site-header .nav a.active,
  .site-header .nav a.active:hover {
    border-top: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 2px solid #d9a64f !important;
    box-shadow: none !important;
    outline: none !important;
  }
}

/* V11 – globaler Header: Horde-Banner plus komprimierter Unreal-Schriftzug. */
.site-header .brand {
  flex: 0 0 320px !important;
  width: 320px !important;
  min-width: 0 !important;
  height: 90px !important;
  gap: 9px !important;
  align-items: center !important;
  overflow: visible !important;
}
.site-header .brand-banner {
  flex: 0 0 82px !important;
  width: 82px !important;
  height: 116px !important;
  margin: 0 !important;
  transform: translate(-5px, -1px) !important;
  object-fit: contain !important;
  object-position: center top !important;
}
.site-header .brand-copy {
  flex: 0 1 220px !important;
  min-width: 0 !important;
  height: 90px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 0 !important;
  overflow: hidden !important;
}
.site-header .brand-wordmark {
  display: block !important;
  width: min(100%, 205px) !important;
  height: auto !important;
  max-height: 76px !important;
  object-fit: contain !important;
  object-position: left center !important;
}
.site-header .brand-subtitle {
  display: block !important;
  margin-top: -1px !important;
  color: #f0d28f !important;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  line-height: 1.1 !important;
  letter-spacing: .105em !important;
  text-transform: none !important;
  white-space: nowrap !important;
  text-shadow: 0 2px 5px #000, 0 0 8px rgba(231,174,75,.24) !important;
}

/* Kategorienseiten bleiben dauerhaft halbtransparent; Home erst nach Scrollen. */
body:not(.home-page-body) .site-header::after {
  background: rgba(12, 5, 3, .76) !important;
  -webkit-backdrop-filter: blur(9px) !important;
  backdrop-filter: blur(9px) !important;
  box-shadow: 0 5px 18px rgba(0,0,0,.16) !important;
}
body.home-page-body .site-header:not(.is-scrolled)::after {
  background: transparent !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}
body.home-page-body .site-header.is-scrolled::after {
  background: rgba(12, 5, 3, .76) !important;
  -webkit-backdrop-filter: blur(9px) !important;
  backdrop-filter: blur(9px) !important;
  box-shadow: 0 5px 18px rgba(0,0,0,.16) !important;
}

/* Aktive Kategorie: roter Unterstrich mit rotem Glow, ohne aktive Hintergrundbox. */
@media (min-width: 1101px) {
  .site-header .nav a.active,
  .site-header .nav a.active:hover {
    background: transparent !important;
    border: 0 !important;
    color: #ffe7b3 !important;
    box-shadow: none !important;
    outline: none !important;
  }
  .site-header .nav a.active::before { content: none !important; display: none !important; }
  .site-header .nav a.active::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: auto !important;
    height: 2px !important;
    transform: none !important;
    border: 0 !important;
    background: #e3291c !important;
    box-shadow: 0 0 5px #f22b1d, 0 0 11px rgba(255,45,25,.85), 0 0 18px rgba(255,35,20,.48) !important;
  }
}

/* Die bisherige Hamburger-Umschaltung bei 1100 px bleibt unverändert. */
@media (max-width: 1100px) {
  .site-header .brand {
    flex: 0 1 320px !important;
    width: auto !important;
    max-width: calc(100% - 60px) !important;
    height: var(--header-h, 68px) !important;
    gap: 7px !important;
  }
  .site-header .brand-banner {
    flex: 0 0 63px !important;
    width: 63px !important;
    height: 93px !important;
    transform: translate(-3px, -1px) !important;
  }
  .site-header .brand-copy {
    flex: 0 1 205px !important;
    height: var(--header-h, 68px) !important;
  }
  .site-header .brand-wordmark {
    width: min(100%, 190px) !important;
    max-height: 57px !important;
  }
  .site-header .brand-subtitle { font-size: 10px !important; letter-spacing: .08em !important; }
  .site-header .nav a.active,
  .site-header .nav a.active:hover {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
  }
  .site-header .nav a.active::before { display: none !important; content: none !important; }
  .site-header .nav a.active::after {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 12px !important;
    right: 12px !important;
    bottom: 2px !important;
    height: 2px !important;
    background: #e3291c !important;
    box-shadow: 0 0 5px #f22b1d, 0 0 11px rgba(255,45,25,.8) !important;
  }
}
@media (max-width: 600px) {
  .site-header .brand { max-width: calc(100% - 54px) !important; gap: 5px !important; }
  .site-header .brand-banner {
    flex-basis: 49px !important;
    width: 49px !important;
    height: 77px !important;
  }
  .site-header .brand-copy { flex-basis: 165px !important; }
  .site-header .brand-wordmark { width: min(100%, 160px) !important; max-height: 49px !important; }
  .site-header .brand-subtitle { font-size: 9px !important; letter-spacing: .055em !important; }
}

/* V11 Korrektur 04.11.2026 – Logo kompakter, Unterzeile darüber, Banner +8 px. */
.site-header .brand {
  height: 90px !important;
  align-items: center !important;
  overflow: visible !important;
}
.site-header .brand-banner {
  height: 124px !important; /* bisher 116 px: exakt 8 px länger */
  object-fit: contain !important;
  object-position: center top !important;
}
.site-header .brand-copy {
  height: 90px !important;
  max-height: 90px !important;
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 1px !important;
  overflow: hidden !important;
}
.site-header .brand-subtitle {
  order: 1 !important;
  margin: 0 0 1px !important;
  font-size: 12px !important;
  line-height: 1.15 !important;
  letter-spacing: .085em !important;
  white-space: nowrap !important;
}
.site-header .brand-wordmark {
  order: 2 !important;
  width: min(100%, 155px) !important;
  max-width: 155px !important;
  max-height: 48px !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: left center !important;
}

/* Der aktive Menüpunkt bleibt ohne Fläche und erhält den roten Leucht-Glow. */
.site-header .nav a.active,
.site-header .nav a.active:hover {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
}
.site-header .nav a.active::before { content: none !important; display: none !important; }
.site-header .nav a.active::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: auto !important;
  height: 2px !important;
  transform: none !important;
  border: 0 !important;
  background: #f02b20 !important;
  box-shadow: 0 0 4px #ff3326, 0 0 9px rgba(255,45,30,.95), 0 0 17px rgba(255,35,20,.68) !important;
}

@media (max-width: 1100px) {
  .site-header .brand-banner {
    height: 101px !important; /* bisher 93 px: +8 px */
  }
  .site-header .brand-copy {
    height: var(--header-h, 68px) !important;
    max-height: var(--header-h, 68px) !important;
  }
  .site-header .brand-subtitle {
    font-size: 10px !important;
    letter-spacing: .07em !important;
  }
  .site-header .brand-wordmark {
    width: min(100%, 145px) !important;
    max-width: 145px !important;
    max-height: 43px !important;
  }
  .site-header .nav a.active::after {
    background: #f02b20 !important;
    box-shadow: 0 0 4px #ff3326, 0 0 9px rgba(255,45,30,.95), 0 0 15px rgba(255,35,20,.65) !important;
  }
}
@media (max-width: 600px) {
  .site-header .brand-banner { height: 85px !important; /* bisher 77 px: +8 px */ }
  .site-header .brand-copy { height: 68px !important; max-height: 68px !important; }
  .site-header .brand-subtitle { font-size: 9px !important; letter-spacing: .045em !important; }
  .site-header .brand-wordmark {
    width: min(100%, 132px) !important;
    max-width: 132px !important;
    max-height: 39px !important;
  }
}


/* V12 – Header-Feinschliff: nur UNREAL, Originalbanner und punktueller Sonnenaufgang-Glow. */
.site-header .brand-copy {
  justify-content: center !important;
  align-items: flex-start !important;
  gap: 0 !important;
}
.site-header .brand-subtitle { display: none !important; }
.site-header .brand-wordmark {
  display: block !important;
  width: min(100%, 155px) !important;
  max-width: 155px !important;
  max-height: 48px !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: left center !important;
}
/* Die Originalgrafik hat ein höheres Seitenverhältnis und hängt dadurch sichtbar tiefer. */
.site-header .brand-banner {
  object-fit: contain !important;
  object-position: center top !important;
}
/* Die rote Linie bleibt dezent; nur ihr Mittelpunkt erhält den hellen Sonnenaufgang. */
.site-header .nav a.active::after,
.site-header .nav a.active:hover::after {
  background:
    radial-gradient(ellipse 17px 6px at 50% 50%, rgba(255,239,190,.98) 0%, rgba(255,178,92,.78) 28%, rgba(242,43,32,.22) 66%, transparent 100%),
    linear-gradient(to right, rgba(190,24,18,.18) 0%, #c9251b 24%, #e3291c 43%, #f02b20 50%, #e3291c 57%, #c9251b 76%, rgba(190,24,18,.18) 100%) !important;
  box-shadow: none !important;
  filter: none !important;
}
@media (max-width: 1100px) {
  .site-header .brand-copy { justify-content: center !important; }
  .site-header .brand-wordmark {
    width: min(100%, 145px) !important;
    max-width: 145px !important;
    max-height: 43px !important;
  }
}
@media (max-width: 600px) {
  .site-header .brand-wordmark {
    width: min(100%, 132px) !important;
    max-width: 132px !important;
    max-height: 39px !important;
  }
}


/* V13 – UNREAL-Schriftzug etwas größer; aktive Markierung mit zentralem Sonnenaufgangslicht. */
.site-header .brand-wordmark {
  width: min(100%, 180px) !important;
  max-width: 180px !important;
  max-height: 56px !important;
}

@media (min-width: 1101px) {
  .site-header .nav a.active::after,
  .site-header .nav a.active:hover::after {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 2px !important;
    background: linear-gradient(
      to right,
      rgba(178, 24, 18, .28) 0%,
      #c9251b 22%,
      #e3291c 42%,
      #ed3022 50%,
      #e3291c 58%,
      #c9251b 78%,
      rgba(178, 24, 18, .28) 100%
    ) !important;
    box-shadow: none !important;
    filter: none !important;
  }
  .site-header .nav a.active::before,
  .site-header .nav a.active:hover::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    bottom: -5px !important;
    width: 58px !important;
    height: 14px !important;
    transform: translateX(-50%) !important;
    border: 0 !important;
    background: radial-gradient(
      ellipse at center,
      rgba(255, 248, 218, .98) 0%,
      rgba(255, 207, 126, .96) 5%,
      rgba(255, 112, 49, .78) 17%,
      rgba(239, 40, 25, .42) 38%,
      rgba(220, 35, 24, .12) 60%,
      transparent 76%
    ) !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }
}

@media (max-width: 1100px) {
  .site-header .brand-wordmark {
    width: min(100%, 160px) !important;
    max-width: 160px !important;
    max-height: 48px !important;
  }
  .site-header .nav a.active::after,
  .site-header .nav a.active:hover::after {
    background: linear-gradient(to right, rgba(178,24,18,.28), #c9251b 25%, #ed3022 50%, #c9251b 75%, rgba(178,24,18,.28)) !important;
    box-shadow: none !important;
  }
  .site-header .nav a.active::before,
  .site-header .nav a.active:hover::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    bottom: -3px !important;
    width: 48px !important;
    height: 12px !important;
    transform: translateX(-50%) !important;
    background: radial-gradient(ellipse at center, rgba(255,248,218,.98) 0%, rgba(255,190,105,.9) 9%, rgba(242,55,31,.55) 34%, transparent 74%) !important;
    border: 0 !important;
    box-shadow: none !important;
    pointer-events: none !important;
  }
}
@media (max-width: 600px) {
  .site-header .brand-wordmark {
    width: min(100%, 140px) !important;
    max-width: 140px !important;
    max-height: 42px !important;
  }
}


/* V14 – Banner bleibt unabhängig vom Breakpoint an derselben Position und Größe.
   Der Bildanker ist absolut im Brand-Container verankert; Navigation und Headerhöhe
   können die Bannerhöhe dadurch nicht mehr verkleinern oder nach oben verschieben. */
.site-header .brand {
  position: relative !important;
  display: block !important;
  flex: 0 0 320px !important;
  width: 320px !important;
  min-width: 0 !important;
  height: var(--header-h, 70px) !important;
  overflow: visible !important;
}
.site-header .brand-banner {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  display: block !important;
  width: 76px !important;
  height: 114px !important;
  min-width: 76px !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: none !important;
  object-fit: contain !important;
  object-position: center top !important;
  flex: none !important;
  align-self: auto !important;
  z-index: 1200 !important;
}
.site-header .brand-copy {
  position: absolute !important;
  left: 88px !important;
  top: 0 !important;
  width: 210px !important;
  max-width: 210px !important;
  height: var(--header-h, 70px) !important;
  max-height: var(--header-h, 70px) !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}
.site-header .brand-wordmark {
  display: block !important;
  width: 190px !important;
  max-width: 190px !important;
  max-height: 58px !important;
  height: auto !important;
  object-fit: contain !important;
  object-position: left center !important;
}

/* Die Desktopnavigation schaltet vor dem Zusammenschieben in das Hamburger-Menü.
   Bei 1200 px ist genug Platz für Logo, Menüpunkte und den getrennten Discord-Link. */
@media (max-width: 1200px) {
  .site-header .header-discord { display: none !important; }
  .site-header .menu-toggle {
    display: flex !important;
    flex: 0 0 44px !important;
    width: 44px !important;
    height: 40px !important;
    margin: 0 0 0 auto !important;
    padding: 0 !important;
    align-items: center !important;
    justify-content: center !important;
    position: relative !important;
    z-index: 1302 !important;
  }
  .site-header .nav,
  .site-header .nav.open {
    position: absolute !important;
    display: none !important;
    top: 100% !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 10px 16px 16px !important;
    flex: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    background: rgba(12, 5, 3, .96) !important;
    border-top: 1px solid rgba(210, 160, 75, .45) !important;
    z-index: 1301 !important;
  }
  .site-header .nav.open { display: flex !important; }
  .site-header .nav a {
    display: flex !important;
    width: 100% !important;
    height: auto !important;
    min-height: 44px !important;
    padding: 10px 12px !important;
    justify-content: flex-start !important;
  }
  .site-header .brand {
    flex: 0 1 320px !important;
    width: 320px !important;
    max-width: calc(100% - 60px) !important;
    height: var(--header-h, 68px) !important;
  }
  .site-header .brand-copy {
    left: 84px !important;
    width: 190px !important;
    max-width: calc(100% - 84px) !important;
  }
  .site-header .brand-wordmark {
    width: 175px !important;
    max-width: 175px !important;
    max-height: 54px !important;
  }
}
@media (max-width: 600px) {
  .site-header .brand {
    flex: 0 1 270px !important;
    width: 270px !important;
    max-width: calc(100% - 58px) !important;
  }
  .site-header .brand-banner {
    width: 76px !important;
    min-width: 76px !important;
    height: 114px !important;
  }
  .site-header .brand-copy {
    left: 82px !important;
    width: 165px !important;
    max-width: calc(100% - 82px) !important;
  }
  .site-header .brand-wordmark {
    width: 155px !important;
    max-width: 155px !important;
    max-height: 48px !important;
  }
}


/* V15 – gezielte Korrekturen nach dem Responsive-Test.
   Nur das UNREAL-Wortlogo wird innerhalb des bestehenden Headerbereichs vertikal
   etwas abgesenkt. Das Horde-Banner bleibt in seiner V14-Größe und wird oben
   minimal über den Viewport-Anfang gezogen, damit kein heller Spalt sichtbar ist. */
.site-header .brand-wordmark {
  transform: translateY(3px) !important;
}
.site-header .brand-banner {
  top: -2px !important;
}

/* Das Home-Hero verwendet eine obere Startkante statt eines vertikalen
   Mittelpunkt-Ankers. So kann ein schmaler oder niedriger Viewport den Textblock
   nicht mehr nach oben in den fixierten Header schieben. */
body.home-page-body .hero {
  position: relative !important;
  min-height: 100svh !important;
  height: 100svh !important;
}
body.home-page-body .hero-content {
  top: max(calc(var(--header-h, 70px) + 24px), 18svh) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  margin: 0 !important;
}
@media (max-width: 900px) {
  body.home-page-body .hero-content {
    top: max(calc(var(--header-h, 68px) + 22px), 17svh) !important;
    width: 94vw !important;
    transform: translateX(-50%) !important;
  }
}
@media (max-width: 680px) {
  body.home-page-body .hero {
    height: auto !important;
    min-height: 100svh !important;
  }
  body.home-page-body .hero-content {
    top: max(calc(var(--header-h, 62px) + 22px), 16svh) !important;
    left: 50% !important;
    width: 96vw !important;
    transform: translateX(-50%) !important;
  }
}

/* Hamburger-Menü: alle Einträge – aktiv oder inaktiv – bekommen dieselbe
   zentrierte Ausrichtung. Der aktive Zustand verändert weder Einzug noch Position. */
@media (max-width: 1200px) {
  .site-header .nav,
  .site-header .nav.open {
    align-items: stretch !important;
  }
  .site-header .nav a,
  .site-header .nav a:hover,
  .site-header .nav a.active,
  .site-header .nav a.active:hover {
    width: 100% !important;
    margin: 0 !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
    text-align: center !important;
    text-indent: 0 !important;
    justify-content: center !important;
    align-self: stretch !important;
    left: auto !important;
    right: auto !important;
    transform: none !important;
  }
}


/* V16 – Home-Hero ohne Überlagerungen bei wechselnder Fenstergröße.
   Der Hauptinhalt und die Feature-Leiste liegen bewusst im normalen Flex-Layout.
   Bei wenig Höhe wächst der Hero nach unten und die Seite scrollt, statt Inhalte
   übereinander zu schieben. Bei ausreichend Platz bleibt die Feature-Leiste unten. */
body.home-page-body main { display: block; }
body.home-page-body .hero {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100%;
  height: auto !important;
  min-height: 100svh !important;
  padding: calc(var(--header-h, 78px) + 24px) 22px 0 !important;
  overflow: hidden !important;
  isolation: isolate;
}
body.home-page-body .hero-content {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: min(1040px, 90vw) !important;
  max-width: 100%;
  margin: 0 auto !important;
  padding: 12px 0 34px;
  flex: 1 0 auto !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
body.home-page-body .features {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  flex: 0 0 auto !important;
  width: calc(100% + 44px);
  margin: 0 -22px !important;
  height: auto !important;
  min-height: 166px !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
body.home-page-body .feature { min-width: 0; }

@media (max-width: 900px) {
  body.home-page-body .hero {
    padding: calc(var(--header-h, 70px) + 20px) 16px 0 !important;
  }
  body.home-page-body .hero-content {
    width: min(960px, 94vw) !important;
    padding-top: 10px;
    padding-bottom: 28px;
  }
  body.home-page-body .features {
    width: calc(100% + 32px);
    margin-left: -16px !important;
    margin-right: -16px !important;
    min-height: 190px !important;
    padding-left: 12px !important;
    padding-right: 12px !important;
  }
}
@media (max-width: 700px) {
  body.home-page-body .hero {
    min-height: 100svh !important;
    padding: calc(var(--header-h, 68px) + 18px) 12px 0 !important;
  }
  body.home-page-body .hero-content {
    width: 100% !important;
    padding: 14px 0 28px;
    flex: 0 0 auto !important;
  }
  body.home-page-body .features {
    width: calc(100% + 24px);
    margin-left: -12px !important;
    margin-right: -12px !important;
    min-height: 270px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 5px !important;
    padding: 12px 8px 16px !important;
  }
  body.home-page-body .feature {
    min-height: 118px;
    padding: 0 6px;
  }
  body.home-page-body .feature:nth-child(2)::after { display: none; }
}
@media (max-height: 760px) and (min-width: 701px) {
  body.home-page-body .hero-content { padding-top: 8px; padding-bottom: 24px; }
  body.home-page-body .hero-kicker { line-height: 1.2; }
  body.home-page-body .hero-rule { margin-top: 10px; margin-bottom: 8px; }
  body.home-page-body .hero-subtitle { margin-bottom: 18px; }
}


/* V17 – stabile Home-Hero-Geometrie.
   Die Home-Seite richtet ihre vertikalen Abstände nicht mehr an der aktuellen
   Viewport-Höhe aus. Der Inhalt behält seine natürliche Höhe; bei wenig Platz
   wächst die Seite und wird scrollbar, statt Texte oder Feature-Felder zu quetschen. */
body.home-page-body .hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  position: relative !important;
  height: auto !important;
  min-height: 840px !important;
  padding: 140px 22px 0 !important;
  overflow: visible !important;
  background-position: center center !important;
}
body.home-page-body .hero-content {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: min(1040px, 90vw) !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
  text-align: center !important;
  z-index: 2 !important;
}
body.home-page-body .hero-content > * {
  flex: 0 0 auto !important;
}
body.home-page-body .hero-kicker {
  margin: 0 0 8px !important;
  line-height: 1.35 !important;
}
body.home-page-body .hero-title {
  line-height: 1.08 !important;
}
body.home-page-body .hero-rule {
  flex: 0 0 64px !important;
  margin: 12px auto 10px !important;
}
body.home-page-body .hero-subtitle {
  margin: 0 0 30px !important;
  line-height: 1.4 !important;
}
body.home-page-body .btn-discord {
  flex: 0 0 76px !important;
}
body.home-page-body .features {
  position: relative !important;
  inset: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  left: auto !important;
  flex: 0 0 auto !important;
  width: calc(100% + 44px) !important;
  min-height: 166px !important;
  height: auto !important;
  margin: auto -22px 0 !important;
  padding: 15px clamp(20px, 5vw, 82px) 20px !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  align-items: center !important;
}
body.home-page-body .feature {
  min-width: 0 !important;
  min-height: 118px !important;
  flex: none !important;
}

/* Tablet: gleiche vertikale Abstände, Feature-Bereich in zwei Spalten. */
@media (max-width: 900px) {
  body.home-page-body .hero {
    min-height: 960px !important;
    padding: 126px 16px 0 !important;
  }
  body.home-page-body .hero-content {
    width: min(960px, 94vw) !important;
  }
  body.home-page-body .features {
    width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    min-height: 286px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 8px !important;
    padding: 18px 16px 20px !important;
  }
  body.home-page-body .feature {
    min-height: 122px !important;
    padding: 0 10px !important;
  }
  body.home-page-body .feature:nth-child(2)::after { display: none !important; }
}

/* Smartphone: zwei feste Reihen; bei geringer Höhe scrollt die Seite. */
@media (max-width: 700px) {
  body.home-page-body .hero {
    min-height: 1040px !important;
    padding: 112px 12px 0 !important;
    background-position: 32% center !important;
  }
  body.home-page-body .hero-content {
    width: 100% !important;
    padding: 0 !important;
  }
  body.home-page-body .hero-kicker {
    max-width: 100% !important;
    font-size: clamp(19px, 5.2vw, 25px) !important;
    letter-spacing: .12em !important;
    line-height: 1.3 !important;
  }
  body.home-page-body .hero-title {
    font-size: clamp(58px, 15vw, 82px) !important;
    line-height: 1.08 !important;
  }
  body.home-page-body .hero-rule {
    width: 94vw !important;
    height: 58px !important;
    flex-basis: 58px !important;
    margin: 12px auto 10px !important;
  }
  body.home-page-body .hero-subtitle {
    max-width: 100% !important;
    font-size: clamp(15px, 4vw, 20px) !important;
    letter-spacing: .1em !important;
    line-height: 1.4 !important;
    margin-bottom: 24px !important;
  }
  body.home-page-body .btn-discord {
    width: min(270px, 82vw) !important;
    height: 66px !important;
    min-height: 66px !important;
    flex-basis: 66px !important;
  }
  body.home-page-body .features {
    width: calc(100% + 24px) !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    min-height: 280px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 8px !important;
    padding: 14px 8px 18px !important;
  }
  body.home-page-body .feature {
    min-height: 120px !important;
    padding: 0 5px !important;
  }
  body.home-page-body .feature-icon { height: 56px !important; }
  body.home-page-body .feature-icon img { max-height: 52px !important; }
  body.home-page-body .feature h2 {
    font-size: clamp(12px, 3.2vw, 15px) !important;
    line-height: 1.35 !important;
  }
  body.home-page-body .feature p {
    font-size: clamp(12px, 2.8vw, 13px) !important;
    line-height: 1.4 !important;
  }
}

/* V18 – V16-Layout beibehalten, aber vertikale Kompression verhindern.
   Das Hero bleibt ein durchgehender, vollflächiger Bildbereich. Bei niedrigen
   Fenstern wächst dieser Bereich nach unten; seine Inhalte behalten feste
   Abstände und die Feature-Leiste bleibt innerhalb desselben Hintergrundbildes. */
body.home-page-body main { display: block !important; }
body.home-page-body .hero {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: flex-start !important;
  width: 100% !important;
  height: auto !important;
  min-height: max(100svh, calc(var(--header-h, 78px) + 760px)) !important;
  padding: calc(var(--header-h, 78px) + 24px) 22px 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}
body.home-page-body .hero-content {
  position: relative !important;
  inset: auto !important;
  transform: none !important;
  flex: 0 0 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: min(1040px, 90vw) !important;
  max-width: 100% !important;
  margin: 0 auto !important;
  padding: 12px 0 24px !important;
  text-align: center !important;
  z-index: 2 !important;
}
body.home-page-body .hero-content > * { flex: 0 0 auto !important; }
body.home-page-body .hero-kicker { line-height: 1.35 !important; margin-bottom: 8px !important; }
body.home-page-body .hero-title { line-height: 1.08 !important; }
body.home-page-body .hero-rule { margin: 12px auto 10px !important; flex: 0 0 64px !important; }
body.home-page-body .hero-subtitle { line-height: 1.4 !important; margin-bottom: 24px !important; }
body.home-page-body .btn-discord { flex: 0 0 76px !important; }
body.home-page-body .features {
  position: relative !important;
  inset: auto !important;
  flex: 0 0 auto !important;
  width: calc(100% + 44px) !important;
  height: auto !important;
  min-height: 166px !important;
  margin: auto -22px 0 !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
body.home-page-body .feature { min-width: 0 !important; flex: none !important; }

/* Tablet: zweispaltige Feature-Leiste; derselbe Hero-Hintergrund läuft dahinter weiter. */
@media (max-width: 900px) {
  body.home-page-body .hero {
    min-height: max(100svh, calc(var(--header-h, 70px) + 900px)) !important;
    padding: calc(var(--header-h, 70px) + 20px) 16px 0 !important;
    background-position: 38% center !important;
  }
  body.home-page-body .hero-content {
    width: min(960px, 94vw) !important;
    padding: 12px 0 26px !important;
  }
  body.home-page-body .features {
    width: calc(100% + 32px) !important;
    margin-left: -16px !important;
    margin-right: -16px !important;
    min-height: 286px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 8px !important;
    padding: 18px 16px 20px !important;
  }
  body.home-page-body .feature { min-height: 122px !important; padding: 0 10px !important; }
  body.home-page-body .feature:nth-child(2)::after { display: none !important; }
}

/* Smartphone: Inhalt bleibt in natürlicher Höhe; zwei Feature-Spalten darunter. */
@media (max-width: 700px) {
  body.home-page-body .hero {
    min-height: max(100svh, calc(var(--header-h, 68px) + 930px)) !important;
    padding: calc(var(--header-h, 68px) + 18px) 12px 0 !important;
    background-position: 32% center !important;
  }
  body.home-page-body .hero-content {
    width: 100% !important;
    padding: 12px 0 24px !important;
  }
  body.home-page-body .hero-kicker {
    max-width: 100% !important;
    font-size: clamp(19px, 5.2vw, 25px) !important;
    letter-spacing: .12em !important;
    line-height: 1.3 !important;
  }
  body.home-page-body .hero-title {
    font-size: clamp(58px, 15vw, 82px) !important;
    line-height: 1.08 !important;
  }
  body.home-page-body .hero-rule {
    width: 94vw !important;
    height: 58px !important;
    flex-basis: 58px !important;
    margin: 12px auto 10px !important;
  }
  body.home-page-body .hero-subtitle {
    max-width: 100% !important;
    font-size: clamp(15px, 4vw, 20px) !important;
    letter-spacing: .1em !important;
    line-height: 1.4 !important;
    margin-bottom: 24px !important;
  }
  body.home-page-body .btn-discord {
    width: min(270px, 82vw) !important;
    height: 66px !important;
    min-height: 66px !important;
    flex-basis: 66px !important;
  }
  body.home-page-body .features {
    width: calc(100% + 24px) !important;
    margin-left: -12px !important;
    margin-right: -12px !important;
    min-height: 280px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    row-gap: 8px !important;
    padding: 14px 8px 18px !important;
  }
  body.home-page-body .feature { min-height: 120px !important; padding: 0 5px !important; }
  body.home-page-body .feature-icon { height: 56px !important; }
  body.home-page-body .feature-icon img { max-height: 52px !important; }
  body.home-page-body .feature h2 { font-size: clamp(12px, 3.2vw, 15px) !important; line-height: 1.35 !important; }
  body.home-page-body .feature p { font-size: clamp(12px, 2.8vw, 13px) !important; line-height: 1.4 !important; }
}


/* V19: Header-Wortlogo 3 px nach unten zentriert. */
.site-header .brand-wordmark { transform: translateY(3px) !important; }


/* V19 – UNREAL-Gildenlogo im Home-Hero; V18-Hero-Geometrie bleibt bestehen. */
body.home-page-body .hero-kicker {
  margin-bottom: 8px !important;
}
body.home-page-body .hero-guild-logo {
  display: block !important;
  width: min(570px, 58vw) !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 285px !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 auto 2px !important;
  flex: 0 0 auto !important;
  filter: drop-shadow(0 5px 9px rgba(0,0,0,.68)) !important;
}
body.home-page-body .hero-subtitle {
  margin-top: 0 !important;
}
@media (max-width: 900px) {
  body.home-page-body .hero-guild-logo {
    width: min(510px, 68vw) !important;
    max-height: 255px !important;
  }
}
@media (max-width: 700px) {
  body.home-page-body .hero-guild-logo {
    width: min(440px, 86vw) !important;
    max-height: 220px !important;
    margin-bottom: 4px !important;
  }
}


/* V20 – Header-Wappen enger zugeschnitten und etwas größer; Home-Hero-Block tiefer. */
.site-header .brand-banner {
  width: 84px !important;
  height: 106px !important;
  object-fit: contain !important;
  object-position: center top !important;
  align-self: flex-start !important;
  margin-top: 0 !important;
}

/* Den kompletten Home-Inhaltsblock verschieben, nicht einzelne Elemente. */
body.home-page-body .hero-content {
  padding-top: 40px !important;
}

/* Das zentrale UNREAL-Gildenlogo einen Tick vergrößert. */
body.home-page-body .hero-guild-logo {
  width: min(605px, 61vw) !important;
  max-height: 305px !important;
}

@media (max-width: 900px) {
  .site-header .brand-banner {
    width: 62px !important;
    height: 88px !important;
  }
  body.home-page-body .hero-content {
    padding-top: 34px !important;
  }
  body.home-page-body .hero-guild-logo {
    width: min(540px, 72vw) !important;
    max-height: 270px !important;
  }
}

@media (max-width: 700px) {
  .site-header .brand-banner {
    width: 54px !important;
    height: 78px !important;
  }
  body.home-page-body .hero-content {
    padding-top: 30px !important;
  }
  body.home-page-body .hero-guild-logo {
    width: min(465px, 89vw) !important;
    max-height: 235px !important;
  }
}


/* V21 – FAQ-Hero wie Kontakt: schmaler Banner direkt unter dem Header. */
.faq-page .faq-page-hero.shared-page-hero {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1536 / 132 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(226,177,91,.82) !important;
  line-height: 0 !important;
}
.faq-page .faq-page-hero.shared-page-hero > .faq-hero-image {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: fill !important;
  object-position: center !important;
}
.faq-page .faq-page-hero.shared-page-hero .faq-hero-title {
  position: absolute !important;
  left: clamp(28px, 6vw, 104px) !important;
  right: auto !important;
  top: auto !important;
  bottom: 12px !important;
  transform: none !important;
  line-height: 1.35 !important;
}
@media (max-width: 700px) {
  .faq-page .faq-page-hero.shared-page-hero .faq-hero-title {
    left: 5vw !important;
    bottom: 8px !important;
    max-width: 90% !important;
  }
}


/* V22 – Über-uns-Hero wie FAQ und Kontakt: unteres Bilddrittel, schmaler Banner. */
.shared-page-hero.about-page-hero{
  position:relative !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:1536 / 132 !important;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border:0 !important;
  border-bottom:1px solid rgba(226,177,91,.82) !important;
  line-height:0 !important;
}
.shared-page-hero.about-page-hero > .about-hero-image{
  position:relative !important;
  inset:auto !important;
  display:block !important;
  width:100% !important;
  height:auto !important;
  max-width:none !important;
  aspect-ratio:auto !important;
  object-fit:contain !important;
  object-position:center center !important;
}
.shared-page-hero.about-page-hero > .shared-page-hero-title{
  position:absolute !important;
  left:clamp(28px, 6vw, 104px) !important;
  right:auto !important;
  top:auto !important;
  bottom:12px !important;
  transform:none !important;
  z-index:3 !important;
  max-width:min(760px, calc(100% - 56px)) !important;
  margin:0 !important;
  padding:0 !important;
  text-align:left !important;
  line-height:1.35 !important;
}
@media(max-width:700px){
  .shared-page-hero.about-page-hero > .shared-page-hero-title{
    left:5vw !important;
    bottom:8px !important;
    max-width:90% !important;
  }
}


/* V24 – Gilde-Hero: gleicher schmaler Zuschnitt wie Kontakt und FAQ.
   Das Bild liegt bereits im passenden Seitenverhältnis vor und wird nicht gestaucht. */
.guild-journey-hero.shared-page-hero {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 1536 / 132 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(226,177,91,.82) !important;
  line-height: 0 !important;
}
.guild-journey-hero.shared-page-hero > img {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  object-position: center center !important;
}
.guild-journey-hero.shared-page-hero > .guild-banner-title {
  position: absolute !important;
  left: clamp(28px, 6vw, 104px) !important;
  right: auto !important;
  top: auto !important;
  bottom: 12px !important;
  transform: none !important;
  z-index: 3 !important;
  line-height: 1.35 !important;
}
@media (max-width: 700px) {
  .guild-journey-hero.shared-page-hero > .guild-banner-title {
    left: 5vw !important;
    bottom: 8px !important;
    max-width: 90% !important;
  }
}


/* V25 – Erfolge-Hero: exakt der vom Nutzer markierte Bildstreifen.
   Originalausschnitt 2048x212, proportional skaliert, niemals gestreckt. */
.achievements-page .achievements-banner.shared-page-hero {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: 2048 / 212 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(226,177,91,.82) !important;
  line-height: 0 !important;
}
.achievements-page .achievements-banner.shared-page-hero > img {
  position: relative !important;
  inset: auto !important;
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
}
.achievements-page .achievements-banner.shared-page-hero > .achievements-banner-title {
  position: absolute !important;
  left: clamp(28px, 6vw, 104px) !important;
  right: auto !important;
  top: auto !important;
  bottom: 12px !important;
  transform: none !important;
  z-index: 3 !important;
  line-height: 1.35 !important;
}
@media (max-width: 700px) {
  .achievements-page .achievements-banner.shared-page-hero > .achievements-banner-title {
    left: 5vw !important;
    bottom: 8px !important;
    max-width: 90% !important;
  }
}


/* V26 – Erfolge-Hero auf exakt dieselbe Bannerhöhe wie Kontakt und FAQ bringen. */
.achievements-page .achievements-banner.shared-page-hero {
  aspect-ratio: 2048 / 176 !important;
  overflow: hidden !important;
}
.achievements-page .achievements-banner.shared-page-hero > img {
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}

/* V26 – Goldene Abschlusslinie am Kontakt-Hero zuverlässig sichtbar halten. */
.contact-page .contact-banner.shared-page-hero {
  border: 0 !important;
  border-bottom: 1px solid rgba(226,177,91,.92) !important;
  box-sizing: border-box !important;
  overflow: hidden !important;
}


/* V27 – Hero-Beschriftungen auf allen Inhaltsseiten um 4 cm nach rechts versetzen. */
.shared-page-hero .shared-page-hero-title,
.shared-page-hero .contact-banner-title,
.shared-page-hero .achievements-banner-title {
  translate: 11cm -0.5cm !important;
}


/* V30 – bessere Lesbarkeit der Hero-Schrift auf allen Inhaltsseiten */
.shared-page-hero .shared-page-hero-title,
.shared-page-hero .contact-banner-title,
.shared-page-hero .achievements-banner-title {
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .95))
          drop-shadow(0 0 7px rgba(0, 0, 0, .78));
}
.shared-page-hero .shared-page-hero-title .eyebrow,
.shared-page-hero .shared-page-hero-title h1,
.shared-page-hero .shared-page-hero-title p,
.shared-page-hero .contact-banner-title .eyebrow,
.shared-page-hero .contact-banner-title h1,
.shared-page-hero .contact-banner-title p,
.shared-page-hero .achievements-banner-title .eyebrow,
.shared-page-hero .achievements-banner-title h1,
.shared-page-hero .achievements-banner-title p {
  text-shadow:
    0 1px 1px rgba(0, 0, 0, .98),
    0 2px 4px rgba(0, 0, 0, .92),
    0 0 8px rgba(0, 0, 0, .72);
}


/* V31 – Hero-Typografie: dezente Lesbarkeit am Desktop, klare Kategorie auf Tablet und Handy. */
.shared-page-hero .shared-page-hero-title,
.shared-page-hero .contact-banner-title,
.shared-page-hero .achievements-banner-title {
  translate: 11cm -0.2cm !important; /* 3 mm tiefer als V30 */
  filter: drop-shadow(0 2px 2px rgba(42, 18, 8, .48))
          drop-shadow(0 3px 6px rgba(30, 12, 6, .28));
}
.shared-page-hero .shared-page-hero-title .eyebrow,
.shared-page-hero .shared-page-hero-title h1,
.shared-page-hero .shared-page-hero-title p,
.shared-page-hero .contact-banner-title .eyebrow,
.shared-page-hero .contact-banner-title h1,
.shared-page-hero .contact-banner-title p,
.shared-page-hero .achievements-banner-title .eyebrow,
.shared-page-hero .achievements-banner-title h1,
.shared-page-hero .achievements-banner-title p {
  text-shadow:
    -0.5px 0 rgba(45, 20, 9, .62),
     0.5px 0 rgba(45, 20, 9, .62),
     0 -0.5px rgba(45, 20, 9, .48),
     0 0.5px rgba(45, 20, 9, .48),
     0 2px 4px rgba(30, 12, 6, .42);
}
.guild-mobile-title { display: none; }

/* Tablet: nur der Kategoriename, kompakter Text und mehr Bannerhöhe. */
@media (max-width: 1024px) {
  .shared-page-hero,
  .faq-page .faq-page-hero.shared-page-hero,
  .shared-page-hero.about-page-hero,
  .guild-journey-hero.shared-page-hero,
  .achievements-page .achievements-banner.shared-page-hero,
  .contact-page .contact-banner.shared-page-hero {
    aspect-ratio: auto !important;
    height: 96px !important;
    min-height: 96px !important;
    overflow: hidden !important;
  }
  .shared-page-hero > img,
  .faq-page .faq-page-hero.shared-page-hero > .faq-hero-image,
  .shared-page-hero.about-page-hero > .about-hero-image,
  .guild-journey-hero.shared-page-hero > img,
  .achievements-page .achievements-banner.shared-page-hero > img,
  .contact-page .contact-banner.shared-page-hero > img {
    position: absolute !important;
    inset: 0 !important;
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
  }
  .shared-page-hero .shared-page-hero-title,
  .shared-page-hero .contact-banner-title,
  .shared-page-hero .achievements-banner-title,
  .faq-page .faq-page-hero.shared-page-hero .faq-hero-title,
  .shared-page-hero.about-page-hero > .shared-page-hero-title,
  .guild-journey-hero.shared-page-hero > .guild-banner-title,
  .achievements-page .achievements-banner.shared-page-hero > .achievements-banner-title {
    left: 6vw !important;
    right: 5vw !important;
    top: 50% !important;
    bottom: auto !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    translate: 0 0 !important;
    text-align: left !important;
    line-height: 1.1 !important;
  }
  .shared-page-hero .shared-page-hero-title .eyebrow,
  .shared-page-hero .shared-page-hero-title p:not(.eyebrow),
  .shared-page-hero .contact-banner-title .eyebrow,
  .shared-page-hero .contact-banner-title p:not(.eyebrow),
  .shared-page-hero .achievements-banner-title .eyebrow,
  .shared-page-hero .achievements-banner-title p:not(.eyebrow) {
    display: none !important;
  }
  .shared-page-hero .shared-page-hero-title h1,
  .shared-page-hero .contact-banner-title h1,
  .shared-page-hero .achievements-banner-title h1 {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(27px, 3.5vw, 35px) !important;
    line-height: 1.05 !important;
    white-space: nowrap !important;
  }
  .guild-desktop-title { display: none; }
  .guild-mobile-title { display: inline; }
}

/* Smartphone: ausreichend hohe Bannerfläche, kleine Überschrift, kein Überlaufen. */
@media (max-width: 700px) {
  .shared-page-hero,
  .faq-page .faq-page-hero.shared-page-hero,
  .shared-page-hero.about-page-hero,
  .guild-journey-hero.shared-page-hero,
  .achievements-page .achievements-banner.shared-page-hero,
  .contact-page .contact-banner.shared-page-hero {
    height: 82px !important;
    min-height: 82px !important;
  }
  .shared-page-hero .shared-page-hero-title,
  .shared-page-hero .contact-banner-title,
  .shared-page-hero .achievements-banner-title,
  .faq-page .faq-page-hero.shared-page-hero .faq-hero-title,
  .shared-page-hero.about-page-hero > .shared-page-hero-title,
  .guild-journey-hero.shared-page-hero > .guild-banner-title,
  .achievements-page .achievements-banner.shared-page-hero > .achievements-banner-title {
    left: 5vw !important;
    right: 5vw !important;
  }
  .shared-page-hero .shared-page-hero-title h1,
  .shared-page-hero .contact-banner-title h1,
  .shared-page-hero .achievements-banner-title h1 {
    font-size: clamp(22px, 6vw, 28px) !important;
    letter-spacing: .055em !important;
  }
}

/* V32 – Hero-Titel: warmer, weich auslaufender Kontrast statt harter schwarzer Kontur.
   Zwischen 1025 und 1350 px wird die horizontale Verschiebung reduziert, damit
   der Text bei mittleren Fensterbreiten nicht in Bildmotive oder aus dem Banner läuft. */
.shared-page-hero .shared-page-hero-title,
.shared-page-hero .contact-banner-title,
.shared-page-hero .achievements-banner-title {
  isolation: isolate;
  translate: 11cm 0.1cm !important;
}
.shared-page-hero .shared-page-hero-title::before,
.shared-page-hero .contact-banner-title::before,
.shared-page-hero .achievements-banner-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  inset: -13px -28px;
  border-radius: 12px;
  background: linear-gradient(90deg,
    rgba(25, 9, 8, .46) 0%,
    rgba(25, 9, 8, .34) 58%,
    rgba(25, 9, 8, .12) 82%,
    rgba(25, 9, 8, 0) 100%);
  filter: blur(13px);
}
.shared-page-hero .shared-page-hero-title .eyebrow,
.shared-page-hero .shared-page-hero-title h1,
.shared-page-hero .shared-page-hero-title p,
.shared-page-hero .contact-banner-title .eyebrow,
.shared-page-hero .contact-banner-title h1,
.shared-page-hero .contact-banner-title p,
.shared-page-hero .achievements-banner-title .eyebrow,
.shared-page-hero .achievements-banner-title h1,
.shared-page-hero .achievements-banner-title p {
  -webkit-text-stroke: .35px rgba(35, 13, 8, .72);
  text-shadow:
    0 1px 2px rgba(24, 8, 6, .82),
    0 2px 5px rgba(24, 8, 6, .58),
    0 0 9px rgba(24, 8, 6, .32);
}
@media (min-width: 1025px) and (max-width: 1350px) {
  .shared-page-hero .shared-page-hero-title,
  .shared-page-hero .contact-banner-title,
  .shared-page-hero .achievements-banner-title {
    translate: 6cm 0.1cm !important;
  }
}

/* Tablet und Smartphone behalten die zentrierte, nicht verschobene Kategoriezeile. */
@media (max-width: 1024px) {
  .shared-page-hero .shared-page-hero-title,
  .shared-page-hero .contact-banner-title,
  .shared-page-hero .achievements-banner-title {
    translate: 0 0 !important;
  }
}

/* V33 – Über-uns-Geschichte als umgekehrte Pyramide */
.about-story-section {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 42px 0 24px;
}
.about-story-pyramid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 28px;
  align-items: start;
}
.about-story-block {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.about-story-block-three {
  grid-column: 1 / -1;
  width: min(760px, 100%);
  justify-self: center;
  margin-top: 2px;
}
.about-story-copy {
  color: #e8d8c2;
  font-size: 16px;
  line-height: 1.65;
}
.about-story-copy h3 {
  margin: 0 0 12px;
  color: #e9bd72;
  font-family: Georgia, serif;
  font-size: clamp(20px, 1.8vw, 25px);
  line-height: 1.25;
}
.about-story-copy p { margin: 0 0 13px; }
.about-story-copy p:last-child { margin-bottom: 0; }
.about-story-copy p strong {
  display: inline;
  color: #f0c77c;
  font-weight: 700;
}
.about-story-art {
  width: 100%;
  margin: 0;
  padding: 4px;
  border: 1px solid rgba(204,153,75,.72);
  background: linear-gradient(135deg,rgba(135,75,28,.3),rgba(15,7,5,.9));
  box-shadow: 0 8px 24px rgba(0,0,0,.35);
}
.about-story-art img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
}
.about-story-divider {
  width: min(100%, 2172px);
  margin: 0 auto 8px;
  line-height: 0;
}
.about-story-divider img {
  display: block;
  width: 100%;
  height: auto;
}
.about-people-section {
  border-top: 0 !important;
  padding-top: 26px;
}
@media (max-width: 820px) {
  .about-story-pyramid { gap: 24px 18px; }
  .about-story-block-three { width: min(680px, 100%); }
}
@media (max-width: 680px) {
  .about-story-section { width: calc(100% - 32px); padding: 30px 0 18px; }
  .about-story-pyramid { grid-template-columns: 1fr; gap: 28px; }
  .about-story-block-three { grid-column: auto; width: 100%; margin-top: 0; }
  .about-story-block { gap: 14px; }
  .about-story-copy { font-size: 16px; line-height: 1.62; }
  .about-story-art img { aspect-ratio: 3 / 1; }
  .about-story-divider { margin-bottom: 2px; }
  .about-people-section { padding-top: 24px; }
}


/* V34 – Über-uns-Geschichte: symmetrische, breitere Zwei-Spalten-Anordnung */
.about-page-body .brand-banner {
  width: 58px !important;
  height: 76px !important;
  object-fit: contain !important;
  object-position: center top !important;
}
.about-story-section {
  width: min(1500px, calc(100% - 96px)) !important;
  margin: 0 auto !important;
  padding: 34px 0 24px !important;
}
.about-story-section > .about-section-heading {
  margin-bottom: 16px !important;
}
.about-story-title {
  margin: 0 0 28px !important;
  padding: 0 !important;
  color: #e8d8c2 !important;
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1.65 !important;
  text-align: center !important;
}
.about-story-pyramid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  column-gap: 42px !important;
  row-gap: 34px !important;
  align-items: stretch !important;
}
.about-story-block {
  min-width: 0 !important;
  display: grid !important;
  grid-template-rows: 1fr auto !important;
  align-content: stretch !important;
  gap: 22px !important;
}
.about-story-block-one,
.about-story-block-two {
  height: 100% !important;
}
.about-story-block-three {
  grid-column: 1 / -1 !important;
  width: min(729px, 100%) !important;
  justify-self: center !important;
  margin: 0 auto !important;
}
.about-story-copy {
  min-width: 0 !important;
  color: #e8d8c2 !important;
  font-family: inherit !important;
  font-size: 16px !important;
  line-height: 1.58 !important;
}
.about-story-copy h3 {
  display: none !important;
}
.about-story-copy p {
  margin: 0 0 14px !important;
}
.about-story-copy p:last-child {
  margin-bottom: 0 !important;
}
.about-story-copy p strong {
  display: inline !important;
  color: #f0c77c !important;
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: 700 !important;
  line-height: inherit !important;
}
.about-story-art {
  width: 100% !important;
  margin: 0 !important;
  padding: 4px !important;
  border: 1px solid rgba(204,153,75,.72) !important;
  box-sizing: border-box !important;
}
.about-story-art img {
  display: block !important;
  width: 100% !important;
  aspect-ratio: 3 / 1 !important;
  height: auto !important;
  object-fit: cover !important;
  object-position: center !important;
}
.about-story-divider {
  margin-top: 0 !important;
}
@media (max-width: 900px) {
  .about-story-section {
    width: min(720px, calc(100% - 48px)) !important;
    padding-top: 30px !important;
  }
  .about-story-pyramid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  .about-story-block-one,
  .about-story-block-two,
  .about-story-block-three {
    grid-column: 1 !important;
    width: 100% !important;
    margin: 0 !important;
  }
  .about-story-block {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
  }
  .about-story-copy {
    font-size: 16px !important;
    line-height: 1.6 !important;
  }
  .about-story-title {
    margin-bottom: 22px !important;
  }
}
@media (max-width: 600px) {
  .about-page-body .brand-banner {
    width: 46px !important;
    height: 65px !important;
  }
  .about-story-section {
    width: calc(100% - 32px) !important;
    padding: 26px 0 18px !important;
  }
  .about-story-title {
    margin-bottom: 18px !important;
    font-size: 16px !important;
  }
  .about-story-art img {
    aspect-ratio: 3 / 1 !important;
  }
}


/* V35 – filigraner Trenner und vollständige, freigestellte Porträtkarten */
.about-story-divider {
  width: min(82%, 1150px) !important;
  margin: 2px auto 14px !important;
  line-height: 0;
}
.about-story-divider img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}
.about-people-section {
  width: min(1320px, calc(100% - 64px)) !important;
}
.about-people-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: stretch !important;
  gap: 24px !important;
}
.about-person-card {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(205,151,72,.68) !important;
  background: linear-gradient(155deg,rgba(75,25,17,.34),rgba(14,7,5,.96)) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.28) !important;
}
.about-person-card img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  aspect-ratio: 1145 / 1373 !important;
  object-fit: contain !important;
  object-position: center !important;
  background: transparent !important;
}
.about-person-card h3 {
  display: none !important;
}
.about-person-card p {
  flex: 1 0 auto;
  margin: 0 !important;
  padding: 17px 18px 20px !important;
  border-top: 1px solid rgba(205,151,72,.48);
  color: #e8d8c2 !important;
  font-size: 15px !important;
  line-height: 1.62 !important;
  text-align: left !important;
}
@media (max-width: 760px) {
  .about-story-divider {
    width: min(88%, 900px) !important;
    margin-bottom: 8px !important;
  }
  .about-people-section {
    width: min(560px, calc(100% - 32px)) !important;
  }
  .about-people-grid {
    grid-template-columns: 1fr !important;
    gap: 22px !important;
  }
  .about-person-card {
    display: flex !important;
    flex-direction: column !important;
  }
  .about-person-card img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1145 / 1373 !important;
    object-fit: contain !important;
  }
  .about-person-card p {
    padding: 16px 17px 19px !important;
    font-size: 15px !important;
  }
}


/* Portrait artwork already contains its own ornate frame and nameplate. */
.about-person-card {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.about-person-card p {
  border: 1px solid rgba(205,151,72,.42);
  border-top: 1px solid rgba(205,151,72,.58);
  background: linear-gradient(155deg,rgba(75,25,17,.28),rgba(14,7,5,.72));
}


/* V36 – Porträts dezenter und exakt auf die Textboxen abgestimmt */
.about-people-section {
  width: min(1080px, calc(100% - 64px)) !important;
}
.about-people-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-items: start !important;
  gap: 24px !important;
}
.about-person-card {
  width: 100% !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  overflow: visible !important;
}
.about-person-card img,
.about-person-card p {
  width: 88% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.about-person-card img {
  height: auto !important;
  aspect-ratio: 1145 / 1373 !important;
  object-fit: contain !important;
  object-position: center !important;
  flex: 0 0 auto !important;
}
.about-person-card p {
  margin: 0 !important;
  flex: 1 0 auto !important;
  border: 1px solid rgba(205,151,72,.48) !important;
  border-top: 1px solid rgba(205,151,72,.62) !important;
  padding: 15px 16px 18px !important;
  text-align: left !important;
}
@media (max-width: 760px) {
  .about-people-section {
    width: min(560px, calc(100% - 32px)) !important;
  }
  .about-people-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .about-person-card img,
  .about-person-card p {
    width: 88% !important;
  }
}


/* V37 – Über-uns-Abschluss: dezente Wert-Icons und freigestellter CTA-Foreground */
.about-value-icon-image {
  display: block;
  width: 112px;
  height: 82px;
  margin: 0 auto 4px;
  object-fit: contain;
  filter: drop-shadow(0 2px 5px rgba(219, 155, 54, .16));
}
.about-end-cta {
  position: relative !important;
  isolation: isolate;
  overflow: hidden !important;
  min-height: 500px;
  box-sizing: border-box;
  padding: 48px 24px 190px !important;
  border-top: 1px solid rgba(205,151,72,.58) !important;
  background:
    radial-gradient(ellipse at 50% 20%, rgba(76, 27, 15, .34), transparent 58%),
    linear-gradient(180deg, #160907 0%, #100605 100%) !important;
  text-align: center;
}
.about-end-cta-content {
  position: relative;
  z-index: 2;
  width: min(780px, 100%);
  margin: 0 auto;
}
.about-end-cta-content p {
  max-width: 760px;
  margin: 0 auto 11px;
  color: #f0dfc8;
  font-size: 16px;
  line-height: 1.62;
  text-shadow: 0 1px 4px rgba(0,0,0,.78);
}
.about-end-cta-content h3 {
  margin: 23px 0 18px;
  color: #edc477;
  font-family: Georgia, serif;
  font-size: clamp(24px, 2.5vw, 33px);
  letter-spacing: .075em;
  text-shadow: 0 2px 8px rgba(0,0,0,.88), 0 0 14px rgba(174,94,24,.18);
}
.about-end-cta .discord-button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-width: 218px;
  min-height: 54px;
  box-sizing: border-box;
  padding: 10px 28px;
  border: 1px solid #e2b45f;
  border-radius: 4px;
  color: #f8dfaa;
  background: linear-gradient(180deg, #8e2118 0%, #5b100d 52%, #350b09 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,231,170,.5),
    inset 0 -2px 0 rgba(0,0,0,.45),
    0 0 0 2px rgba(100,42,15,.7),
    0 5px 16px rgba(0,0,0,.5);
  font-family: Georgia, serif;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: .075em;
  text-decoration: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.85);
  transition: filter .18s ease, transform .18s ease;
}
.about-end-cta .discord-button img {
  display: block;
  width: 25px;
  height: 25px;
  object-fit: contain;
}
.about-end-cta .discord-button:hover {
  filter: brightness(1.13);
  transform: translateY(-1px);
}
.about-cta-foreground {
  position: absolute;
  z-index: 1;
  display: block;
  left: 50%;
  bottom: 0;
  width: 100%;
  max-width: 2172px;
  height: auto;
  margin: 0;
  padding: 0;
  transform: translateX(-50%);
  object-fit: contain;
  object-position: center bottom;
  pointer-events: none;
}
@media (max-width: 760px) {
  .about-person-card img,
  .about-person-card p {
    width: min(88%, 380px) !important;
  }
  .about-end-cta {
    min-height: 470px;
    padding: 34px 18px 150px !important;
  }
  .about-end-cta-content p {
    font-size: 16px !important;
    line-height: 1.55;
  }
  .about-end-cta-content h3 {
    margin: 20px 0 16px;
    font-size: clamp(22px, 6vw, 28px);
  }
  .about-end-cta .discord-button {
    min-width: 205px;
    min-height: 50px;
    font-size: 16px;
  }
  .about-value-icon-image {
    width: 104px;
    height: 76px;
  }
}
@media (max-width: 420px) {
  .about-end-cta {
    min-height: 500px;
    padding-bottom: 140px !important;
  }
}


/* V38 – CTA-Foreground vollständig und über die gesamte Fensterbreite zeigen */
.about-end-cta {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  min-height: calc(100vw * 724 / 2172) !important;
  height: auto !important;
  padding: 42px 24px 0 !important;
  border-top: 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.about-cta-foreground {
  left: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: auto !important;
  transform: none !important;
  object-fit: fill !important;
  object-position: center bottom !important;
}
.about-end-cta-content {
  z-index: 2 !important;
  position: relative !important;
}
.site-footer {
  border-top: 1px solid var(--line) !important;
}
@media (max-width: 760px) {
  .about-end-cta {
    min-height: 500px !important;
    padding: 34px 18px 145px !important;
  }
  .about-cta-foreground {
    width: 100vw !important;
    height: auto !important;
  }
}


/* V39 – CTA ohne sichtbaren Abschnittswechsel; freigestelltes Motiv dockt an den Footer */
.about-end-cta {
  background: #100705 !important;
  border-top: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  min-height: calc(100vw * 724 / 2172) !important;
  height: auto !important;
  padding: 42px 24px 0 !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}
.about-cta-foreground {
  left: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: auto !important;
  transform: none !important;
  object-fit: contain !important;
  object-position: center bottom !important;
}
.about-end-cta-content {
  position: relative !important;
  z-index: 2 !important;
  transform: translateY(105px) !important;
}
.site-footer {
  border-top: 1px solid var(--line) !important;
}
@media (max-width: 760px) {
  .about-end-cta {
    min-height: 500px !important;
    padding: 34px 18px 145px !important;
  }
  .about-cta-foreground {
    width: 100vw !important;
    height: auto !important;
  }
  .about-end-cta-content {
    transform: translateY(35px) !important;
  }
}


/* V40 – Werte und CTA als ein gemeinsamer Abschnitt mit durchgehendem Hintergrund */
.about-values-cta-shell {
  position: relative !important;
  isolation: isolate;
  display: flow-root;
  width: 100%;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background: #100705 !important;
}
.about-values-cta-shell .about-values-section {
  position: relative !important;
  z-index: 2 !important;
  background: transparent !important;
  border-top: 1px solid rgba(205,151,72,.38) !important;
  padding: 30px 0 24px !important;
}
.about-values-cta-shell .about-values-grid,
.about-values-cta-shell .about-value-card {
  position: relative;
  z-index: 2;
}
.about-values-cta-shell .about-end-cta {
  position: relative !important;
  z-index: 2 !important;
  min-height: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 26px 24px 116px !important;
  overflow: visible !important;
  border: 0 !important;
  background: transparent !important;
  text-align: center;
}
.about-values-cta-shell .about-end-cta-content {
  position: relative !important;
  z-index: 3 !important;
  width: min(850px, 92%);
  margin: 0 auto !important;
  transform: none !important;
}
.about-values-cta-shell .about-end-cta-content p {
  max-width: 820px;
  margin: 0 auto 16px !important;
  line-height: 1.65;
}
.about-values-cta-shell .about-end-cta-content h3 {
  margin: 30px 0 28px !important;
  font-size: clamp(25px, 2.5vw, 34px);
}
.about-values-cta-shell .about-cta-foreground {
  position: absolute !important;
  z-index: 1 !important;
  display: block !important;
  left: 50% !important;
  bottom: 0 !important;
  top: auto !important;
  width: 100vw !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  transform: translateX(-50%) !important;
  object-fit: contain !important;
  object-position: center bottom !important;
  pointer-events: none;
}
.about-values-cta-shell .discord-button-art {
  position: relative !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 10px !important;
  width: 240px !important;
  min-width: 0 !important;
  height: 64px !important;
  min-height: 0 !important;
  padding: 0 30px !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: url("assets/cta-frame.webp") center / 100% 100% no-repeat !important;
  box-shadow: none !important;
  color: #f8dfaa !important;
  text-decoration: none !important;
  font-family: Georgia, serif !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-shadow: 0 1px 3px rgba(0,0,0,.9) !important;
}
.about-values-cta-shell .discord-button-art img {
  width: 23px !important;
  height: 23px !important;
  object-fit: contain !important;
}
.about-values-cta-shell .discord-button-art:hover {
  filter: brightness(1.12);
  transform: translateY(-1px);
}
@media (max-width: 760px) {
  .about-values-cta-shell .about-values-section {
    padding: 26px 0 18px !important;
  }
  .about-values-cta-shell .about-end-cta {
    padding: 24px 18px 150px !important;
  }
  .about-values-cta-shell .about-end-cta-content {
    width: min(600px, 94%);
  }
  .about-values-cta-shell .about-end-cta-content p {
    font-size: 16px !important;
    margin-bottom: 13px !important;
  }
  .about-values-cta-shell .about-end-cta-content h3 {
    margin: 24px 0 22px !important;
  }
  .about-values-cta-shell .about-cta-foreground {
    width: 100vw !important;
  }
}

/* V41: dezente Zurück-nach-oben-Schaltfläche auf Unterseiten */
.back-to-top{position:fixed;right:clamp(16px,3vw,34px);bottom:clamp(16px,3vw,30px);z-index:60;width:48px;height:48px;border:1px solid rgba(232,189,105,.82);border-radius:50%;color:#ffe2a2;background:linear-gradient(145deg,rgba(75,20,12,.96),rgba(17,6,4,.97));box-shadow:0 4px 18px rgba(0,0,0,.45),inset 0 1px rgba(255,230,175,.16);font:600 25px/1 "Open Sans",Arial,sans-serif;cursor:pointer;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .2s ease,transform .2s ease,visibility .2s ease,border-color .2s ease}
.back-to-top.visible{opacity:1;visibility:visible;transform:translateY(0)}
.back-to-top:hover{border-color:#ffe0a0;box-shadow:0 0 20px rgba(232,189,105,.32),0 4px 18px rgba(0,0,0,.45)}
.back-to-top:focus-visible{outline:2px solid #ffe0a0;outline-offset:3px}
.legal-content{max-width:980px}
.legal-content h1{color:var(--gold);font-size:clamp(34px,5vw,54px);font-weight:500;letter-spacing:.035em;margin:0 0 28px}
.legal-content h2{margin-top:32px;font-size:clamp(22px,2.6vw,29px)}
.legal-content p{margin:0 0 16px}
.legal-content a{color:#f0c878;text-decoration:underline;text-underline-offset:3px}
.legal-content a:hover{color:#ffe7b3}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.back-to-top{transition:none}}

/* V43: zuverlässiger Header-Hintergrund beim Scrollen auf allen Geräten. */
.site-header::after{
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: 0 0 11px 0 !important;
  width: auto !important;
  height: auto !important;
  transform: none !important;
  background: linear-gradient(180deg, rgba(12,5,3,.34), rgba(12,5,3,.18)) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
.site-header.is-scrolled::after{
  background: rgba(12,5,3,.78) !important;
  -webkit-backdrop-filter: blur(9px) !important;
  backdrop-filter: blur(9px) !important;
  box-shadow: 0 5px 18px rgba(0,0,0,.18) !important;
}
.site-header > *{ position: relative; z-index: 2; }
.site-header .menu-toggle{ pointer-events: auto !important; cursor: pointer !important; }
@media (max-width: 1200px){
  .site-header .menu-toggle{ z-index: 1302 !important; }
  .site-header .nav{ z-index: 1301 !important; }
}

/* Datenschutz: Kontaktangaben als unauffällige Grafik im Stil des Fließtexts */
.privacy-contact-image{display:block;width:min(100%,186px);height:auto;margin:0 0 1.2em 0;}