/* Victorium — Memorial / Archiv (2026)
   Optik aus dem Original 2018 destilliert (style.original.css).
   Kein PHP, keine DB, kein Login — nur Stimmung. */

@font-face {
	font-family: "OpelSans";
	src: url("../fonts/opelsans.ttf") format("truetype");
	font-display: swap;
}
@font-face {
	font-family: "ArialCondensedBold";
	src: url("../fonts/arial-condensed-bold.ttf") format("truetype");
	font-display: swap;
}

:root {
	--ground:   #070502;
	--gold:     #ffd19a;
	--sand:     #95846a;
	--sand2:    #b9a68a;
	--ink:      #635a48;
	--ice:      #6fb7ff;
	--glow:     #ff7a00;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
	background: url("../img/bg.jpg") top center no-repeat #070502;
	font-family: "OpelSans", Arial, sans-serif;
	font-size: 12px;
	color: var(--sand);
	-webkit-font-smoothing: antialiased;
}
a { cursor: pointer; }
.clear { clear: both; }
img { border: 0; }

/* ---------- Kopf / Hero (Logo + Kriegerin stecken in bg.jpg) ---------- */
#head {
	height: 305px;
}
.hero-slogan {
	text-align: center;
	padding-top: 250px;
	font-family: "ArialCondensedBold", Georgia, serif;
	color: var(--gold);
	font-size: 15px;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-shadow: 0 0 1px #000, 0 0 3px rgba(0,0,0,.6), 0 0 22px rgba(60,140,255,.35);
}
.hero-slogan small {
	display: block;
	margin-top: 6px;
	font-family: "OpelSans", sans-serif;
	font-size: 11px;
	letter-spacing: 2px;
	color: var(--sand);
	opacity: .85;
}

/* ---------- Navigation ---------- */
#navigation {
	background: url("../img/layout/navigation.png") no-repeat;
	width: 996px;
	height: 84px;
	margin: 0 auto;
}
#navigation ul {
	list-style: none;
	width: 958px;
	margin: 0 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 84px;
}
#navigation ul li {
	height: 70px;
	line-height: 70px;
	padding: 0 26px;
	text-align: center;
	background: url("../img/layout/nav_trenner.png") right center no-repeat;
}
#navigation ul li:last-child { background: none; }
#navigation ul li a {
	font-family: "ArialCondensedBold", Arial, sans-serif;
	font-size: 14px;
	color: var(--gold);
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 1px;
	text-shadow: 0 0 1px #000, 0 0 3px rgba(0,0,0,.5);
	transition: all .5s ease;
}
#navigation ul li a:hover {
	color: #e6a75f;
	text-shadow: 0 0 1px #000, 0 0 3px rgba(0,0,0,.5), 0 0 10px #000,
		0 0 40px var(--glow), 0 0 40px var(--glow), 0 0 40px var(--glow);
}

/* ---------- Rahmen / Wrapper ---------- */
#main_wrapper {
	background: url("../img/layout/main_wrapper.png") repeat-y;
	width: 996px;
	margin: 0 auto;
	padding-top: 4px;
}
#main_wrapper .left  { float: left;  margin-left: 3px;  width: 695px; }
#main_wrapper .right { float: right; margin-right: 10px; width: 283px; }

/* ---------- Content-Panels (links) ---------- */
.content_top {
	background: url("../img/layout/content_top.png") no-repeat;
	width: 695px;
	min-height: 53px;
	color: var(--sand);
	font-size: 13px;
	font-weight: bold;
	line-height: 50px;
	text-indent: 15px;
	margin-top: 8px;
}
.content_top h2 {
	font-family: "ArialCondensedBold", Arial, sans-serif;
	font-weight: bold;
	font-size: 14px;
	letter-spacing: 1px;
	color: var(--gold);
	text-shadow: 0 1px 1px #000, 0 0 8px rgba(60,140,255,.25);
	display: inline;
}
.content_main {
	background: url("../img/layout/content_main.png") repeat-y;
	width: 695px;
	color: var(--sand);
}
.content_main .con-wrapper {
	width: 92%;
	margin: 0 auto;
	padding: 4px 0 12px;
	line-height: 1.75;
	font-size: 12.5px;
}
.content_main a { color: var(--sand2); text-decoration: none; }
.content_main a:hover { color: var(--gold); text-decoration: underline; }
.content_main p { margin: 0 0 10px; }
.content_main strong { color: var(--gold); font-weight: bold; }
.content_main .lead {
	color: var(--sand2);
	font-size: 13px;
}
.content_foot {
	background: url("../img/layout/content_foot.png") no-repeat;
	width: 695px;
	height: 30px;
	margin-top: -5px;
}

/* ---------- Chronik ---------- */
.chronik { list-style: none; margin: 4px 0 4px; }
.chronik li {
	position: relative;
	padding: 0 0 14px 26px;
	border-left: 1px solid rgba(111,183,255,.22);
	margin-left: 6px;
}
.chronik li:last-child { border-left: 1px solid transparent; padding-bottom: 2px; }
.chronik li::before {
	content: "";
	position: absolute;
	left: -5px; top: 3px;
	width: 9px; height: 9px;
	background: var(--ice);
	border-radius: 50%;
	box-shadow: 0 0 8px rgba(111,183,255,.9), 0 0 16px rgba(60,140,255,.6);
}
.chronik .jahr {
	color: var(--gold);
	font-family: "ArialCondensedBold", Arial, sans-serif;
	font-size: 13px;
	letter-spacing: 1px;
	display: block;
	margin-bottom: 2px;
}

/* ---------- Galerie ---------- */
.gallery {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 8px;
	padding: 6px 0 4px;
}
.gallery figure {
	margin: 0;
	background: #000;
	border: 1px solid rgba(111,183,255,.18);
	overflow: hidden;
	cursor: pointer;
	transition: border-color .3s, transform .3s;
}
.gallery figure:hover {
	border-color: rgba(111,183,255,.6);
	transform: translateY(-2px);
}
.gallery img {
	display: block;
	width: 100%;
	height: 92px;
	object-fit: cover;
	opacity: .92;
	transition: opacity .3s;
}
.gallery figure:hover img { opacity: 1; }
.gallery figcaption {
	font-size: 10.5px;
	color: var(--ink);
	text-align: center;
	padding: 4px 2px;
	letter-spacing: .5px;
}

/* ---------- Sidebar ---------- */
.sb_top {
	background: url("../img/layout/sb_top.png") no-repeat;
	width: 283px;
	height: 51px;
	color: #99856a;
	font-size: 13px;
	font-weight: bold;
	line-height: 43px;
	text-indent: 15px;
	letter-spacing: 1px;
	text-shadow: 0 1px 1px #000, 0 0 5px rgba(0,0,0,.7);
	margin-top: 8px;
}
.sb_top a { color: #99856a; text-decoration: none; }
.sb_top a:hover { color: var(--gold); }
.sb_top a.active { color: var(--gold); text-shadow: 0 0 8px rgba(60,140,255,.4); }
.sb_top .sep { color: #4a4136; padding: 0 4px; }
.sb_main {
	background: url("../img/layout/sb_main.png") repeat-y;
	width: 283px;
	color: var(--sand);
}
.sb_main .sb-inner {
	width: 253px;
	margin: 0 auto;
	padding: 2px 0 6px;
}
.sb_foot {
	background: url("../img/layout/sb_foot.png") no-repeat;
	width: 283px;
	height: 22px;
	margin-top: -10px;
}

/* Serverstatus (eingefroren) */
.status-block {
	text-align: center;
	padding: 8px 0 12px;
}
.status-lamp {
	display: inline-block;
	width: 9px; height: 9px;
	border-radius: 50%;
	background: #5a5148;
	box-shadow: 0 0 6px rgba(0,0,0,.8);
	margin-right: 7px;
	vertical-align: middle;
}
.status-word {
	font-family: "ArialCondensedBold", Arial, sans-serif;
	font-size: 17px;
	letter-spacing: 3px;
	color: #c9b79b;
	text-transform: uppercase;
	text-shadow: 0 1px 1px #000, 0 0 10px rgba(60,140,255,.15);
	vertical-align: middle;
}
.status-sub {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	color: var(--ink);
	letter-spacing: 1px;
}

/* Ranking-Tafel */
#sb_ranking {
	background: url("../img/layout/rank.png") repeat-y;
	width: 251px;
	margin: 0 auto;
	min-height: 200px;
	position: relative;
}
.sb_ranking {
	width: 251px;
	color: #ccc;
	text-shadow: 0 0 2px #000, 0 0 4px #000;
	border-collapse: collapse;
}
.sb_ranking td {
	padding: 4px 0;
	font-size: 11.5px;
}
.sb_ranking td:nth-child(1) { width: 32px; text-align: center; color: #765c2e; font-weight: bold; }
.sb_ranking td:nth-child(2) { width: 140px; text-indent: 7px; color: #8a8a8a; }
.sb_ranking td:nth-child(3) { width: 79px;  text-indent: 7px; color: var(--ink); font-size: 11px; }
.rank-elegy {
	color: var(--sand);
	text-align: center;
	padding: 26px 18px;
	line-height: 1.7;
	font-size: 12px;
	font-style: italic;
}
.rank-elegy .ice { color: var(--ice); font-style: normal; letter-spacing: 1px; }

/* ---------- Footer ---------- */
#footer {
	background: url("../img/layout/footer.png") no-repeat top center;
	width: 1128px;
	min-height: 178px;
	margin: 0 auto;
	text-align: center;
	font-size: 13px;
	line-height: 1.6;
	color: #98856b;
	text-shadow: 0 0 1px #000, 0 0 3px rgba(0,0,0,.5);
	padding-top: 96px;
}
#footer a { color: #c8b59b; text-decoration: none; }
#footer a:hover { text-decoration: underline; }
#footer .credits { font-size: 13px; }
#footer .note {
	display: block;
	margin-top: 6px;
	font-size: 11px;
	color: #6d6152;
	letter-spacing: 1px;
}

/* ---------- Lightbox ---------- */
.lb {
	position: fixed;
	inset: 0;
	background: rgba(3,4,8,.92);
	display: none;
	align-items: center;
	justify-content: center;
	z-index: 100;
	cursor: zoom-out;
}
.lb.open { display: flex; }
.lb img {
	max-width: 90vw;
	max-height: 82vh;
	border: 1px solid rgba(111,183,255,.4);
	box-shadow: 0 0 60px rgba(60,140,255,.25);
}
.lb .lb-cap {
	position: absolute;
	bottom: 5vh;
	left: 0; right: 0;
	text-align: center;
	color: var(--sand2);
	font-size: 13px;
	letter-spacing: 1px;
}
.lb .lb-close {
	position: absolute;
	top: 3vh; right: 4vw;
	color: var(--gold);
	font-size: 30px;
	line-height: 1;
	text-decoration: none;
}

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Skip-Anchor-Offset ---------- */
[id] { scroll-margin-top: 90px; }