@import url("../../prosilver/theme/stylesheet.css");
@import url("https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800&family=Rajdhani:wght@400;500;600;700&display=swap");

:root {
	--fp-bg: #050c16;
	--fp-bg-soft: #08111f;
	--fp-panel: #0d1b2f;
	--fp-panel-deep: #081625;
	--fp-border: #1c4d69;
	--fp-cyan: #00d5ff;
	--fp-green: #45ff83;
	--fp-text: #d8ecff;
	--fp-muted: #8eafc7;
	--fp-warning: #ffd65a;
}

html, body {
	background: var(--fp-bg);
	color: var(--fp-text);
}

body {
	font-family: "Rajdhani", Arial, sans-serif;
	font-size: 16px;
	font-weight: 500;
	background:
		radial-gradient(circle at 18% 12%, rgba(0, 213, 255, .10), transparent 28rem),
		linear-gradient(180deg, #06101d 0%, #050c16 62%, #030810 100%);
}

.wrap {
	max-width: 1320px;
	margin: 22px auto;
	padding: 0 24px;
	background: transparent;
	border: 0;
}

.headerbar {
	position: relative;
	min-height: 138px;
	padding: 24px 28px;
	border: 1px solid var(--fp-border);
	border-radius: 26px;
	background:
		linear-gradient(115deg, rgba(0, 213, 255, .10), transparent 42%),
		linear-gradient(145deg, #0b2035, #06111f 72%);
	box-shadow: 0 22px 55px rgba(0, 0, 0, .35), 0 0 34px rgba(0, 213, 255, .08);
}

.headerbar::after {
	content: "FUNKPOWER · FUNKTECHNIK, APPS & PRAXIS";
	position: absolute;
	right: 28px;
	top: 26px;
	color: var(--fp-green);
	font: 600 12px/1.2 "Orbitron", sans-serif;
	letter-spacing: .12em;
}

.site_logo {
	display: none;
}

.site-description {
	float: none;
	width: auto;
	margin: 25px 0 0;
	text-align: left;
}

.site-description h1 {
	margin: 0 0 8px;
	color: var(--fp-cyan);
	font: 700 clamp(30px, 4.2vw, 48px)/1 "Orbitron", sans-serif;
	letter-spacing: .025em;
	text-shadow: 0 0 26px rgba(0, 213, 255, .22);
}

.site-description p {
	color: #acd0e8;
	font-size: 17px;
	font-weight: 500;
}

.search-header {
	top: auto;
	right: 28px;
	bottom: 24px;
}

.navbar {
	margin: 14px 0;
	padding: 8px 14px;
	border: 1px solid var(--fp-border);
	border-radius: 14px;
	background: rgba(9, 25, 42, .94);
}

.nav-main > li > a,
.nav-breadcrumbs a,
.dropdown-contents a {
	color: #cdeaff;
	font-weight: 700;
}

a,
a:link,
a:visited,
.icon.icon-blue,
.icon.icon-lightgray,
.button-secondary {
	color: var(--fp-cyan);
}

a:hover,
.nav-main a:hover,
.dropdown-contents a:hover {
	color: var(--fp-green);
	text-decoration: none;
}

.forabg,
.forumbg {
	margin: 0 0 18px;
	padding: 0;
	overflow: hidden;
	border: 1px solid var(--fp-border);
	border-radius: 18px;
	background: var(--fp-panel);
	box-shadow: 0 14px 34px rgba(0, 0, 0, .20);
}

.forabg .header,
.forumbg .header {
	padding: 15px 20px;
	background: linear-gradient(90deg, #103452, #0a2137 68%, #0b2730);
}

.forabg .header a,
.forumbg .header a,
.forabg .header dt,
.forumbg .header dt {
	color: var(--fp-cyan);
	font: 600 14px/1.3 "Orbitron", sans-serif;
	letter-spacing: .06em;
}

ul.forums,
ul.topics {
	background: transparent;
}

li.row {
	border-top-color: #173b54;
	border-bottom-color: transparent;
	background: var(--fp-panel-deep);
}

li.row:nth-child(even) {
	background: #0a192a;
}

li.row:hover {
	background: #0d253b;
}

li.row dt a.subforum,
a.forumtitle,
a.topictitle {
	color: #e0f3ff;
	font-family: "Rajdhani", sans-serif;
	font-size: 18px;
	font-weight: 600;
}

/* phpBB zeigt bei einem eigenen Forum-Bild sonst zusätzlich das Statussymbol an. */
.forum-image {
	display: none;
}

/* Europe/Berlin ist eingestellt; der technische UTC-Offset muss nicht im Footer stehen. */
.nav-footer .rightside {
	display: none;
}

a.forumtitle:hover,
a.topictitle:hover {
	color: var(--fp-cyan);
}

.list-inner,
.posts,
.topics,
.views,
.lastpost,
.responsive-show {
	color: var(--fp-muted);
}

.panel,
.post,
.bg1,
.bg2,
.bg3 {
	border: 1px solid var(--fp-border);
	border-radius: 16px;
	background: var(--fp-panel);
	color: var(--fp-text);
}

.postprofile {
	border-color: #234b66;
}

.content,
.content p,
.postbody,
.postprofile,
.panel p,
.panel li,
label,
fieldset.fields1 dt,
fieldset.fields2 dt {
	color: var(--fp-text);
}

h2,
h3,
.panel h2,
.panel h3,
.content h2,
.content h3 {
	color: var(--fp-cyan);
	font-family: "Orbitron", sans-serif;
}

input.inputbox,
textarea.inputbox,
select {
	border: 1px solid #245372;
	border-radius: 9px;
	background: #030b14;
	color: #e4f5ff;
}

input.inputbox:focus,
textarea.inputbox:focus,
select:focus {
	border-color: var(--fp-cyan);
	box-shadow: 0 0 0 3px rgba(0, 213, 255, .12);
}

.button,
.button1,
.button2,
input.button1,
input.button2 {
	border: 1px solid var(--fp-cyan);
	border-radius: 10px;
	background: var(--fp-cyan);
	color: #04111c;
	font-family: "Rajdhani", sans-serif;
	font-weight: 800;
	box-shadow: none;
}

.button:hover,
.button1:hover,
.button2:hover,
input.button1:hover,
input.button2:hover {
	border-color: var(--fp-green);
	background: var(--fp-green);
	color: #03110a;
}

.pagination li a,
.pagination li span {
	border-color: #245372;
	background: #091a2b;
	color: #cdeaff;
}

.pagination li.active span {
	border-color: var(--fp-cyan);
	background: var(--fp-cyan);
	color: #04111c;
}

.stat-block {
	margin-top: 16px;
	padding: 18px 20px;
	border: 1px solid var(--fp-border);
	border-radius: 16px;
	background: rgba(10, 27, 46, .88);
}

.stat-block h3 {
	border: 0;
	color: var(--fp-green);
	font-family: "Orbitron", sans-serif;
}

.copyright {
	color: #6f94ae;
}

.copyright a {
	color: #8fc6e8;
}

@media (max-width: 700px) {
	.wrap {
		margin: 0;
		padding: 8px;
	}

	.headerbar {
		min-height: 150px;
		padding: 22px 18px;
		border-radius: 18px;
	}

	.headerbar::after {
		position: static;
		display: block;
		margin-bottom: 20px;
		font-size: 11px;
	}

	.site-description {
		margin: 0;
	}

	.site-description h1 {
		font-size: 31px;
	}

	.site-description p {
		font-size: 17px;
	}

	.search-header {
		display: none;
	}

	.forabg,
	.forumbg,
	.panel,
	.post {
		border-radius: 13px;
	}
}