/* cinzel-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/cinzel-v26-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* cinzel-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/cinzel-v26-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* cinzel-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/cinzel-v26-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* cinzel-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/cinzel-v26-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* cinzel-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/cinzel-v26-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* cinzel-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/cinzel-v26-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-100 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 100;
  src: url('../fonts/roboto-condensed-v31-latin-100.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-100italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 100;
  src: url('../fonts/roboto-condensed-v31-latin-100italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-200 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/roboto-condensed-v31-latin-200.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-200italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 200;
  src: url('../fonts/roboto-condensed-v31-latin-200italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/roboto-condensed-v31-latin-300.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-300italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/roboto-condensed-v31-latin-300italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v31-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/roboto-condensed-v31-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-500 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/roboto-condensed-v31-latin-500.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-500italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/roboto-condensed-v31-latin-500italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-600 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/roboto-condensed-v31-latin-600.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-600italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 600;
  src: url('../fonts/roboto-condensed-v31-latin-600italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('../fonts/roboto-condensed-v31-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 700;
  src: url('../fonts/roboto-condensed-v31-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-800 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 800;
  src: url('../fonts/roboto-condensed-v31-latin-800.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 800;
  src: url('../fonts/roboto-condensed-v31-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-900 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/roboto-condensed-v31-latin-900.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-900italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 900;
  src: url('../fonts/roboto-condensed-v31-latin-900italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



* {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

/* Eingabefelder weiterhin markier- und bearbeitbar */
input,
textarea,
select,
[contenteditable="true"] {
    user-select: text;
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
}

:root{
	--bg:#070504;
	--panel:#100908;
	--text:#f0dcc3;
	--muted:#b9a18e;
	--red:#a70b08;
	--bright:#f0441b;
	--ember:#ff6a20;
	--gold:#d99a55;
	--line:#4b2419;
	--max:1880px;
}

*{
	box-sizing:border-box;
}

html{
	scroll-behavior:smooth;
	zoom: 0.9;
}

body{
	margin:0;
	background:var(--bg);
	color:var(--text);
	font-family:"Roboto Condensed",Arial,sans-serif;
	font-size:16px;
	line-height:1.55;
}

.container{
	width:min(92vw,var(--max));
	margin:0 auto;
}

a{
	color:inherit;
	text-decoration:none;
}

.grain{
	position:fixed;
	inset:0;
	pointer-events:none;
	z-index:100;
	opacity:.025;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* =========================================================
   HEADER
   ========================================================= */

.header{
	height:74px;
	background:rgba(5,5,5,.97);
	border-bottom:1px solid #2b1d19;
	position:sticky;
	top:0;
	z-index:50;
}

.header-inner{
	height:100%;
	width:calc(100% - 64px);
	margin:auto;
	display:flex;
	align-items:center;
}

.logo{
	display:flex;
	align-items:center;
	gap:13px;
	white-space:nowrap;
}

.logo-symbol{
	font-size:30px;
	color:var(--bright);
	line-height:1;
}

.logo b{
	display:block;
	font:700 20px/1 Cinzel,serif;
	letter-spacing:.02em;
}

.logo small{
	display:block;
	font-size:9px;
	letter-spacing:.22em;
	color:#bcb2aa;
	margin-top:4px;
}

.header nav{
	margin-left:auto;
	display:flex;
	align-items:center;
	gap:3px;
}

.header nav a{
	font-size:12px;
	letter-spacing:.08em;
	padding:13px 13px;
	color:#d0c8c3;
}

.header nav a:hover,
.header nav a.active{
	background:#21110f;
	box-shadow:inset 0 -2px var(--bright);
	color:white;
}

.header nav .apply{
	border:1px solid var(--bright);
	padding:11px 17px;
	margin-left:13px;
}

.hamburger{
	display:none;
	margin-left:auto;
	background:none;
	border:0;
	color:#eee;
	font-size:28px;
}


/* =========================================================
   HERO
   ========================================================= */

.hero{
	height:560px;
	position:relative;
	overflow:hidden;
}

.hero-bg{
	position:absolute;
	inset:0;
	background:url("../img/horde_hero.jpg") center center/cover no-repeat;
	transform:scale(1.01);
}

.hero-shade{
	position:absolute;
	inset:0;
	background:
		linear-gradient(90deg,rgba(5,3,2,.88),rgba(12,5,3,.28) 55%,rgba(15,5,2,.10)),
		linear-gradient(0deg,rgba(4,2,1,.78),transparent 35%);
}

.hero-inner{
	height:100%;
	position:relative;
	display:flex;
	align-items:center;
}

.hero-copy{
	width:55%;
	padding-left:4.2%;
	margin-top:-10px;
}

.kicker{
	font-size:11px;
	font-weight:700;
	color:#ff4a20;
	letter-spacing:.31em;
	text-transform:uppercase;
}

.hero h1{
	font:800 clamp(70px,7.4vw,132px)/.83 Cinzel,Georgia,serif;
	margin:18px 0 24px;
	text-shadow:4px 5px #130a08;
	letter-spacing:-.035em;
}

.hero h1 em{
	font-style:normal;
	color:var(--bright);
}

.hero-copy>p{
	font:400 clamp(17px,1.3vw,25px)/1.15 Cinzel,Georgia,serif;
	letter-spacing:.18em;
	margin:0;
}

.hero-copy>p strong{
	font-weight:700;
}

.buttons{
	display:flex;
	gap:12px;
	margin-top:25px;
}

.btn{
	display:inline-flex;
	align-items:center;
	gap:18px;
	padding:14px 24px;
	border:1px solid #54302a;
	font-size:11px;
	font-weight:700;
	letter-spacing:.17em;
}

.btn i{
	font-style:normal;
	font-size:18px;
	line-height:0;
}

.btn.red{
	background:linear-gradient(#d93416,#8e0906);
	border-color:#ffffff;
}

.btn.dark{
	background:rgba(0,0,0,.5);
}

.hero-note{
	position:absolute;
	right:3%;
	bottom:58px;
	transform:rotate(-5deg);
	font-size:15px;
	line-height:1.1;
	color:#ffffff;
	text-shadow:0 1px #a9a09a;
	letter-spacing:.12em;
}

.hero-note b{
	font-size:13px;
}


/* =========================================================
   QUICK STATS
   ========================================================= */

.quick{
	height:82px;
	background:#0d0c0c;
	border-top:1px solid #33231f;
	border-bottom:1px solid #33231f;
	display:grid;
	grid-template-columns:repeat(4,1fr);
}

.quick>div{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:16px;
	border-right:1px solid #30221e;
}

.quick>div:last-child{
	border:0;
}

.quick strong{
	font-size:25px;
	color:#cbbeb4;
}

.quick span{
	font-size:12px;
	letter-spacing:.19em;
}

.quick small{
	display:block;
	color:#77716d;
	font-size:12px;
	letter-spacing:.15em;
	margin-top:1px;
}

/* =========================================================
   QUICK STATS
   ========================================================= */

.quick2{
	height:82px;
	background:#0d0c0c;
	border-top:1px solid #33231f;
	border-bottom:1px solid #33231f;
	display:grid;
	grid-template-columns:repeat(3,1fr);
}

.quick2>div{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:16px;
	border-right:1px solid #30221e;
}

.quick2>div:last-child{
	border:0;
}

.quick2 strong{
	font-size:25px;
	color:#cbbeb4;
}

.quick2 span{
	font-size:12px;
	letter-spacing:.19em;
}

.quick2 small{
	display:block;
	color:#77716d;
	font-size:12px;
	letter-spacing:.15em;
	margin-top:1px;
}


/* =========================================================
   ABOUT
   ========================================================= */

.about{
	min-height:410px;
	padding:76px 4.2%;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:70px;
	align-items:center;
}


.about-copy{
	max-width:700px;
}

.about h2,
.activities h2,
.recruit h2{
	font:800 clamp(34px,3vw,54px)/1.02 Cinzel,Georgia,serif;
	margin:12px 0 22px;
	letter-spacing:-.02em;
}

.about p{
	color:var(--muted);
	font-size:16px;
	max-width:650px;
}

.more{
	display:inline-block;
	color:var(--bright);
	font-size:11px;
	font-weight:700;
	letter-spacing:.18em;
	margin-top:10px;
}

.about-image{
	height:340px;
	background:
		linear-gradient(90deg,#080707,transparent 22%),
		url("../img/horde_about.jpg") center/cover no-repeat;
	border:1px solid #3b2823;
	box-shadow:inset 0 0 80px #000;
}

.recruiting-image{
	height:340px;
	background:
		linear-gradient(90deg,#080707,transparent 22%),
		url("../img/horde_recruiting.jpg") center/cover no-repeat;
	border:1px solid #3b2823;
	box-shadow:inset 0 0 80px #000;
}


/* =========================================================
   ACTIVITIES
   ========================================================= */

.activities{
	padding:72px 0 78px;
	background:#0b0a0a;
	border-top:1px solid #211816;
	border-bottom:1px solid #211816;
}

.activities h2 em{
	font-style:normal;
	color:var(--bright);
}

.cards{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:18px;
}

.card{
	border:1px solid #4a3029;
	background:#100e0d;
	min-width:0;
	transition:transform .2s,border-color .2s;
}

.card:hover{
	transform:translateY(-4px);
	border-color:#b9411f;
}

.pic{
	height:175px;
	background-size:cover;
	background-position:center;
}

.pic.raids{
	background-image:url("../img/horde_raids_small.jpg");
}

.pic.dungeons{
	background-image:url("../img/horde_dungeons_small.jpg");
}

.pic.pvp{
	background-image:url("../img/horde_pvp_small.jpg");
}

.pic.community{
	background-image:url("../img/horde_community_small.jpg");
}

.card-body{
	padding:19px 20px 23px;
}

.card-body small{
	font-size:9px;
	letter-spacing:.15em;
	color:#c4aa98;
}

.card h3{
	font:700 27px/1 Cinzel,Georgia,serif;
	margin:8px 0;
}

.card p{
	font-size:13px;
	color:#b9b0aa;
	margin:0;
}


/* =========================================================
   RECRUITING
   ========================================================= */

.recruit{
	position:relative;
	min-height:210px;
	overflow:hidden;
	border-bottom:1px solid #7b2616;
}

.recruit-bg{
	position:absolute;
	inset:0;
	background:
		linear-gradient(90deg,rgba(10,5,4,.94),rgba(52,9,7,.55)),
		url("../img/horde_recruit.jpg") center/cover;
}

.recruit-inner{
	position:relative;
	min-height:210px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:40px;
}

.recruit h2{
	font-size:clamp(28px,2.3vw,44px);
	margin:7px 0;
}

.recruit p{
	color:#c5bbb4;
	margin:0;
	font-size:14px;
}


/* =========================================================
   STATS
   ========================================================= */

.stats{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	background:#090909;
}

.stats>div{
	min-height:112px;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:20px;
	border-right:1px solid #30221f;
}

.stats>div:last-child{
	border:0;
}

.stats b{
	font:800 34px Cinzel,Georgia,serif;
}

.stats span{
	font-size:12px;
	letter-spacing:.15em;
}

.stats small{
	display:block;
	color:#706964;
	font-size:12px;
	margin-top:2px;
}


/* =========================================================
   PAGE HERO
   ========================================================= */

.page-hero{
	height:300px;
	background:
		linear-gradient(90deg,rgba(5,5,5,.91),rgba(5,5,5,.35)),
		url("../img/horde_hero.jpg") center/cover;
	display:flex;
	align-items:flex-end;
	padding-bottom:55px;
	border-bottom:1px solid #40251f;
}

.page-hero h1{
	font:800 clamp(42px,5vw,74px)/1 Cinzel,Georgia,serif;
	margin:12px 0 0;
}


/* =========================================================
   PAGE CONTENT
   ========================================================= */

.page-wrap{
	padding:70px 0 100px;
}


/* =========================================================
   RAID LAYOUT
   ========================================================= */

/*
   Desktop:
   - Links: alle Raids untereinander
   - Rechts: Raidplan
*/

.content-grid{
	display:grid;
	grid-template-columns:2fr 1fr;
	gap:24px;
	align-items:start;
}

.raid-list{
	display:grid;
	grid-template-columns:1fr;
	gap:24px;
	min-width:0;
}

.raid-list .panel{
	width:100%;
}

.raidplan{
	height:max-content;
	position:sticky;
	top:98px;
}


/* =========================================================
   PANELS
   ========================================================= */

.panel{
	background:#11100f;
	border:1px solid #33231f;
	padding:30px;
}

.panel h2,
.panel h3{
	font-family:Cinzel,Georgia,serif;
}

.panel h2{
	margin-top:0;
	margin-bottom:12px;
}

.panel h3{
	margin-top:0;
}

.muted{
	color:var(--muted);
}


/* =========================================================
   TABLES
   ========================================================= */

.table-wrap{
	overflow:auto;
}

.data-table{
	width:100%;
	border-collapse:collapse;
	table-layout:fixed;
}

.data-table th,
.data-table td{
	padding:13px;
	border-bottom:1px solid #2b201c;
	text-align:left;
	vertical-align:middle;
}

/* Gleichmäßige Spaltenbreiten in allen Raid-Tabellen */
.data-table th:nth-child(1),
.data-table td:nth-child(1){
	width:50%;
}

.data-table th:nth-child(2),
.data-table td:nth-child(2){
	width:25%;
}

.data-table th:nth-child(3),
.data-table td:nth-child(3){
	width:25%;
}

.data-table th{
	font-size:10px;
	letter-spacing:.13em;
	color:#bba89c;
}

.data-table tbody tr:last-child td{
	border-bottom:0;
}

.badge{
	border:1px solid #6e2923;
	padding:4px 8px;
	font-size:9px;
	letter-spacing:.1em;
}


/* =========================================================
   MEMBERS / EVENTS / MEDIA
   ========================================================= */

.member-grid,
.event-grid,
.media-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:18px;
}

.member-card,
.event-card,
.media-card{
	background:#11100f;
	border:1px solid #33231f;
	padding:24px;
}

.member-head{
	display:flex;
	align-items:center;
	gap:15px;
}

.avatar{
	width:60px;
	height:60px;
	border-radius:50%;
	display:grid;
	place-items:center;
	background:linear-gradient(145deg,#8c1814,#21100e);
	font-family:Cinzel;
	font-size:19px;
}

.member-card h3{
	margin:0;
	font-family:Cinzel;
}

.role{
	color:#dc3933;
	font-size:10px;
	letter-spacing:.16em;
}


/* =========================================================
   DISCORD
   ========================================================= */

.discord-box{
	text-align:center;
	padding:0;
	background:transparent;
	border:0;
}

.discord-box h2{
	font:700 40px Cinzel,Georgia,serif;
	margin:12px 0;
}

.discord-box > .discord-live{
	margin-top:0px;
}


/* =========================================================
   FORMS
   ========================================================= */

.form-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:16px;
}

.field{
	display:flex;
	flex-direction:column;
	gap:7px;
}

.field.full{
	grid-column:1/-1;
}

.field label{
	font-size:10px;
	letter-spacing:.15em;
	color:#bba89c;
}

.field input,
.field select,
.field textarea{
	background:#090808;
	border:1px solid #3b2823;
	color:#eee;
	padding:13px;
	font:inherit;
}

.field textarea{
	min-height:150px;
}


/* =========================================================
   FOOTER
   ========================================================= */

.footer{
	background:#070707;
	border-top:1px solid #291c18;
	padding:35px 0 20px;
}

.footer-inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:30px;
}

.footer-links{
	display:flex;
	gap:18px;
	font-size:11px;
	color:#817a76;
}

.footer-links a:hover{
	color:#fff;
}

.copyright{
	margin-top:23px;
	padding-top:16px;
	border-top:1px solid #211815;
	color:#5e5854;
	font-size:10px;
	letter-spacing:.06em;
}


/* =========================================================
   DISCORD MEMBERS
   ========================================================= */

.role-section{
	margin-bottom:50px;
}

.role-title{
	margin-bottom:20px;
	font-size:28px;
	font-weight:700;
}

.members-grid{
	display:grid;
	grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
	gap:16px;
}

.members-grid .member-card{
	padding:18px;
	background:#1b1e25;
	border:1px solid #2b2f39;
	border-radius:12px;
}

.members-grid .member-head{
	display:flex;
	align-items:center;
	gap:14px;
}

.members-grid .avatar{
	width:48px;
	height:48px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	overflow:hidden;
	flex-shrink:0;
	background:transparent;
}

.members-grid .avatar img{
	width:100%;
	height:100%;
	object-fit:cover;
	display:block;
}

.members-grid .member-card h3{
	margin:0 0 4px;
	font-size:18px;
}

.members-grid .role{
	color:#8b91a1;
	font-size:12px;
	font-weight:700;
	letter-spacing:.08em;
}

.members-grid .muted{
	margin:15px 0 0;
	color:#8b91a1;
	font-size:14px;
}

.discord-members-loading{
	min-height:300px;
	display:flex;
	align-items:center;
	justify-content:center;
}

.members-loader{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:15px;
	opacity:.7;
}

.loader-spinner{
	width:36px;
	height:36px;
	border:3px solid rgba(255,255,255,.15);
	border-top-color:currentColor;
	border-radius:50%;
	animation:discord-loader-spin .8s linear infinite;
}

@keyframes discord-loader-spin{
	from{
		transform:rotate(0deg);
	}

	to{
		transform:rotate(360deg);
	}
}

.member-error{
	padding:30px;
	text-align:center;
	opacity:.7;
}


/* =========================================================
   RESPONSIVE - TABLET
   ========================================================= */

@media(max-width:1200px){

	.header nav a{
		padding:11px 8px;
		font-size:10px;
	}

	.header-inner{
		width:calc(100% - 35px);
	}

	.about{
		gap:35px;
	}

	.cards{
		gap:12px;
	}

}


/* =========================================================
   RESPONSIVE - MOBILE
   ========================================================= */

@media(max-width:850px){

	.header{
		height:68px;
	}

	.logo b{
		font-size:15px;
	}

	.logo small{
		font-size:7px;
	}

	.hamburger{
		display:block;
	}

	.header nav{
		display:none;
		position:absolute;
		left:0;
		right:0;
		top:68px;
		background:#090808;
		border-bottom:1px solid #38231f;
		padding:10px;
		flex-direction:column;
		align-items:stretch;
	}

	.header nav.open{
		display:flex;
	}

	.header nav a{
		padding:13px 16px;
	}

	.header nav .apply{
		margin:5px 0;
	}


	.hero{
		height:520px;
	}

	.hero-copy{
		width:100%;
		padding:0 6%;
	}

	.hero h1{
		font-size:60px;
	}

	.hero-note{
		display:none;
	}


	.quick{
		height:auto;
		grid-template-columns:1fr 1fr;
	}

	.quick>div{
		min-height:72px;
	}

	.quick>div:nth-child(2){
		border-right:0;
	}

	.quick>div:nth-child(n+3){
		border-top:1px solid #30221e;
	}


	.about{
		grid-template-columns:1fr;
		padding:55px 0;
		gap:30px;
	}

	.about-image{
		height:270px;
	}


	.cards,
	.member-grid,
	.event-grid,
	.media-grid{
		grid-template-columns:1fr 1fr;
	}


	.recruit-inner{
		padding:35px 0;
		display:block;
	}

	.recruit .btn{
		margin-top:20px;
	}


	.stats{
		grid-template-columns:1fr 1fr;
	}

	.stats>div:nth-child(2){
		border-right:0;
	}

	.stats>div:nth-child(n+3){
		border-top:1px solid #30221e;
	}


	/* Raidplan unter die Raids */
	.content-grid{
		grid-template-columns:1fr;
	}

	.raidplan{
		position:static;
	}

	.footer-inner{
		display:block;
	}

	.footer-links{
		margin-top:25px;
		flex-wrap:wrap;
	}

	.form-grid{
		grid-template-columns:1fr;
	}

	.field.full{
		grid-column:auto;
	}

}


/* =========================================================
   RESPONSIVE - SMALL MOBILE
   ========================================================= */

@media(max-width:540px){

	.container{
		width:calc(100% - 32px);
	}

	.cards,
	.member-grid,
	.event-grid,
	.media-grid{
		grid-template-columns:1fr;
	}

	.hero{
		height:500px;
	}

	.hero h1{
		font-size:52px;
	}

	.hero-copy>p{
		font-size:15px;
	}

	.quick span{
		font-size:9px;
	}

	.about h2,
	.activities h2{
		font-size:34px;
	}

	.page-hero{
		height:230px;
	}


	/* Panels auf kleinen Displays etwas kompakter */
	.panel{
		padding:22px;
	}

	.data-table th,
	.data-table td{
		padding:11px 9px;
	}

	.raid-list{
		gap:18px;
	}

}



/* =========================================================
   MEDIA LINKS
   ========================================================= */

.media-grid > a{
	display:block;
	color:inherit;
	text-decoration:none;
	outline:none;
	border:0;
	box-shadow:none;
}

.media-grid > a:focus,
.media-grid > a:focus-visible,
.media-grid > a:active{
	outline:none;
	border:0;
	box-shadow:none;
}

.media-grid > a .media-card{
	outline:none;
}


.gallery-back-wrap {
    padding-top: 24px;
    padding-bottom: 8px;
}

.gallery-back-button {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 11px 18px;

    border: 1px solid #302b28;
    background: #111;

    color: #c9b7a5;
    text-decoration: none;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.gallery-back-button:hover {
    background: #1a1715;
    border-color: #6d4b38;
    color: #fff;
}

.gallery-back-button2 {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 11px 18px;

    border: 1px solid #302b28;
    background: #6d4b38;

    color: #c9b7a5;
    text-decoration: none;

    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease,
        transform .2s ease;
}

.gallery-back-button2:hover {
    background: #6d4b38;
    border-color: #6d4b38;
    color: #fff;

}

.gallery-back-button:focus,
.gallery-back-button:active {
    outline: none;
}


/* ============================================================
   MEMBER AVATAR
   ============================================================ */

.member-head {
    display: flex;
    align-items: center;
    gap: 14px;
    min-height: 48px;
}

.avatar {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;

    flex: 0 0 48px;

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

    border-radius: 50%;
    overflow: hidden;

    background: transparent;
    color: transparent;

    font-size: 0;
    line-height: 0;
}

.avatar img {
    display: block;

    width: 48px !important;
    height: 48px !important;

    min-width: 48px !important;
    min-height: 48px !important;

    max-width: 48px !important;
    max-height: 48px !important;

    object-fit: cover;
    object-position: center;

    margin: 0;
    padding: 0;

    border: 0;
    border-radius: 50%;
}








/* =========================================================
   DISCORD LIVE VIEW
========================================================= */

.discord-live{
	display:block;
	width:100%;
	background:#0b0908;
	border:1px solid #3b211a;
	border-radius:0;
	overflow:hidden;
	box-shadow:
		inset 0 0 60px rgba(0,0,0,.35),
		0 10px 35px rgba(0,0,0,.18);
}


/* =========================================================
   DISCORD SERVER HEADER
========================================================= */

.discord-server-title{
	display:flex;
	align-items:center;
	gap:14px;

	padding:20px 24px;

	background:
		linear-gradient(
			90deg,
			rgba(167,11,8,.16),
			rgba(16,9,8,.95) 45%
		);

	border-bottom:1px solid #3b211a;

	position:relative;
}

.discord-server-title::after{
	content:"";
	position:absolute;
	left:24px;
	bottom:-1px;

	width:80px;
	height:2px;

	background:var(--bright);
}

.discord-server-title img{
	width:46px;
	height:46px;

	border-radius:50%;

	object-fit:cover;

	border:1px solid #713022;

	box-shadow:
		0 0 0 3px rgba(167,11,8,.08),
		0 0 18px rgba(240,68,27,.12);
}

.discord-server-title strong{
	display:block;

	font-family:Cinzel,Georgia,serif;
	font-size:18px;
	font-weight:700;

	color:#f0dcc3;

	letter-spacing:.02em;
}

.discord-server-title span{
	display:block;

	margin-top:3px;

	font-size:10px;
	letter-spacing:.16em;

	text-transform:uppercase;

	color:#81716a;
}


/* =========================================================
   CHANNEL LIST
========================================================= */

.discord-channel-list{
	padding:24px 24px 30px;

	background:
		linear-gradient(
			180deg,
			#100908 0%,
			#0d0807 100%
		);
}

.discord-category{
	margin-bottom:28px;
}

.discord-category:last-child{
	margin-bottom:0;
}


/* =========================================================
   CATEGORY TITLE
========================================================= */

.discord-category-title{
	display:flex;
	align-items:center;
	gap:12px;

	padding:0 10px 9px;

	font-size:10px;
	font-weight:700;

	letter-spacing:.24em;

	color:#a88d7d;

	text-transform:uppercase;
}

.discord-category-title::before{
	content:"";

	width:3px;
	height:12px;

	background:var(--bright);

	box-shadow:
		0 0 8px rgba(240,68,27,.25);
}

.discord-category-title::after{
	content:"";

	flex:1;

	height:1px;

	background:
		linear-gradient(
			90deg,
			#43251c,
			transparent
		);
}


/* =========================================================
   CHANNEL
========================================================= */

.discord-channel{
	display:flex;
	align-items:center;

	gap:10px;

	min-height:38px;

	padding:7px 12px;

	margin-bottom:2px;

	border-left:2px solid transparent;

	color:#a99b92;

	font-size:14px;

	background:transparent;

	transition:
		background .18s ease,
		color .18s ease,
		border-color .18s ease,
		padding-left .18s ease;
}

.discord-channel:hover{
	background:
		linear-gradient(
			90deg,
			rgba(167,11,8,.16),
			rgba(167,11,8,.025)
		);

	border-left-color:var(--bright);

	color:#fff;

	padding-left:16px;
}

.discord-channel-icon{
	width:20px;

	flex:0 0 20px;

	text-align:center;

	font-size:15px;

	color:#715d53;

	transition:color .18s ease;
}

.discord-channel:hover .discord-channel-icon{
	color:var(--bright);
}

.discord-channel-name{
	min-width:0;

	overflow:hidden;

	text-overflow:ellipsis;

	white-space:nowrap;

	letter-spacing:.02em;
}


/* =========================================================
   VOICE CHANNEL
========================================================= */

.discord-channel.voice{
	color:#b9a18e;
}

.discord-channel.voice .discord-channel-icon{
	color:#a75b38;
}

.discord-channel.voice:hover{
	color:#fff;
}


/* =========================================================
   VOICE USERS
========================================================= */

.discord-voice-users{
	display:flex;
	flex-wrap:wrap;

	gap:5px;

	margin:3px 0 8px 42px;
}

.discord-voice-user{
	display:inline-flex;
	align-items:center;

	gap:5px;

	padding:3px 8px;

	background:#17100e;

	border:1px solid #392019;

	color:#9d8b80;

	font-size:10px;

	letter-spacing:.04em;
}

.discord-voice-user::before{
	content:"";

	width:6px;
	height:6px;

	border-radius:50%;

	background:#4caf50;

	box-shadow:
		0 0 6px rgba(76,175,80,.45);
}


/* =========================================================
   EMPTY / ERROR
========================================================= */

.discord-error{
	padding:28px;

	background:
		linear-gradient(
			135deg,
			#160908,
			#0d0706
		);

	border:1px solid #54241b;

	text-align:center;
}

.discord-error strong{
	display:block;

	font-family:Cinzel,Georgia,serif;

	color:#ff8f78;

	font-size:18px;
}

.discord-error p{
	margin:9px 0 0;

	color:#9e8d84;

	font-size:13px;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:800px){

	.discord-server-title{
		padding:18px;
	}

	.discord-channel-list{
		padding:20px 14px 24px;
	}

	.discord-category-title{
		padding-left:7px;
	}

	.discord-channel{
		padding:8px 9px;
	}
}


@media(max-width:500px){

	.discord-server-title{
		padding:16px;
	}

	.discord-server-title img{
		width:40px;
		height:40px;
	}

	.discord-server-title strong{
		font-size:15px;
	}

	.discord-channel-list{
		padding:18px 9px 22px;
	}

	.discord-category{
		margin-bottom:23px;
	}

	.discord-category-title{
		font-size:9px;
		letter-spacing:.18em;
	}

	.discord-channel{
		min-height:36px;
		font-size:13px;
	}

	.discord-voice-users{
		margin-left:36px;
	}
}



.discord-intro{
	padding-bottom:0;
}

.discord-embed-wrap{
	padding-top:0;
}

.discord-box > .discord-live{
	margin-top:0;
}

/* =========================================================
   MOBILE – ACTIVITIES CARDS TEXT ZENTRIEREN
   ========================================================= */

@media (max-width:850px){
    .cards .card-body{
        text-align:center;
    }

    .cards .card-body small,
    .cards .card-body h3,
    .cards .card-body p{
        text-align:center;
    }
}

/* =========================================================
   MOBILE – QUICK STATS IN DEN 4 BOXEN ZENTRIEREN
   ========================================================= */

@media (max-width:850px){
    .quick > div{
        justify-content:center;
        text-align:center;
    }

    .quick > div > span{
        text-align:center;
    }
}



.gallery-back-wrap + .page-wrap {
    padding-top: 20px;
}



.ranking {
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:18px;
}




/* =========================================================
   GUILD STREAMS
   ========================================================= */

.guild-streams-panel{
    padding:30px;
}

.guild-streams-head{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:30px;
    margin-bottom:26px;
}

.guild-streams-head h2{
    margin:10px 0 10px;
    font:800 clamp(28px,2.2vw,42px)/1 Cinzel,Georgia,serif;
    letter-spacing:-.02em;
}

.guild-streams-head p{
    margin:0;
    max-width:720px;
}

.guild-streams-live{
    display:flex;
    align-items:center;
    gap:8px;
    padding:8px 12px;
    border:1px solid #52251d;
    background:#0b0807;
    color:#bca89a;
    font-size:10px;
    font-weight:700;
    letter-spacing:.16em;
    white-space:nowrap;
}

.live-dot{
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--bright);
    box-shadow:0 0 10px rgba(240,68,27,.8);
    animation:guild-live-pulse 1.5s infinite;
}

@keyframes guild-live-pulse{
    0%,100%{
        opacity:1;
        transform:scale(1);
    }

    50%{
        opacity:.45;
        transform:scale(.75);
    }
}


.guild-stream-grid{
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:18px;
}


.guild-stream-card{
    min-width:0;
    background:#0b0908;
    border:1px solid #3b211a;
    overflow:hidden;
    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}

.guild-stream-card:hover{
    transform:translateY(-3px);
    border-color:#a33a20;
    box-shadow:0 12px 35px rgba(0,0,0,.35);
}


.guild-stream-player{
    position:relative;
    width:100%;
    aspect-ratio:16 / 9;
    background:#050404;
    overflow:hidden;
}

.guild-stream-player::after{
    content:"";
    position:absolute;
    inset:0;
    pointer-events:none;
    border-bottom:1px solid rgba(240,68,27,.2);
}

.guild-stream-player iframe{
    display:block;
    width:100%;
    height:100%;
    border:0;
}


.guild-stream-info{
    min-height:76px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:15px 17px;
    background:
        linear-gradient(
            90deg,
            rgba(167,11,8,.10),
            rgba(16,9,8,.98) 55%
        );
}


.guild-stream-label{
    display:block;
    margin-bottom:4px;
    color:#ff4a20;
    font-size:8px;
    font-weight:700;
    letter-spacing:.2em;
}

.guild-stream-info h3{
    margin:0;
    font:700 19px/1 Cinzel,Georgia,serif;
    color:#f0dcc3;
}


.guild-stream-button{
    display:inline-flex;
    align-items:center;
    gap:9px;
    flex-shrink:0;

    padding:9px 13px;

    border:1px solid #633025;
    background:#130b09;

    color:#cbb6a6;
    font-size:9px;
    font-weight:700;
    letter-spacing:.15em;

    transition:
        background .2s ease,
        border-color .2s ease,
        color .2s ease;
}

.guild-stream-button span{
    color:var(--bright);
    font-size:13px;
}

.guild-stream-button:hover{
    background:#27100d;
    border-color:var(--bright);
    color:#fff;
}


/* =========================================================
   GUILD STREAMS – MOBILE
   ========================================================= */

@media(max-width:850px){

    .guild-streams-panel{
        padding:22px;
    }

    .guild-streams-head{
        align-items:flex-start;
        flex-direction:column;
        gap:15px;
    }

    .guild-stream-grid{
        grid-template-columns:1fr;
    }

}


@media(max-width:540px){

    .guild-streams-panel{
        padding:20px;
    }

    .guild-streams-head h2{
        font-size:30px;
    }

    .guild-stream-info{
        padding:13px;
    }

    .guild-stream-info h3{
        font-size:16px;
    }

    .guild-stream-button{
        padding:8px 10px;
        font-size:8px;
    }

}





.recruitment-table {
    width: 100%;
    border-collapse: collapse;
	vertical-align: middle;
}

.recruitment-table td {
    padding: 8px 12px;
    vertical-align: middle;
}

.recruitment-table .class-icon {
    width: 40px;
    text-align: center;
	vertical-align: middle;
}

.recruitment-table .class-icon img {
    width: 32px;
    height: 32px;
    object-fit: contain;
    vertical-align: middle;
}

.recruitment-table .class-count {
    width: 50px;
    font-weight: bold;
    white-space: nowrap;
	vertical-align: middle;
}

.recruitment-table .class-name {
    text-align: left;
	vertical-align: middle;
}


.about-divider{
    width:100%;
    height:1px;
    background:#33231f;
    margin:0;
}