@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: 400;
	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: 600;
}

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;
	font-weight: 500;
}

/* Einheitliche FUNKPOWER-Typografie für alle phpBB-Bereiche. */
body,
input,
button,
select,
textarea,
.panel,
.content,
.postbody,
.postprofile,
.navbar,
.topiclist,
dl.details,
fieldset,
label {
	font-family: "Rajdhani", Arial, sans-serif;
	font-weight: 400;
}

.content,
.content p,
.panel p,
.panel li,
.postbody,
.postbody p,
dl.details dt,
dl.details dd,
fieldset dt,
fieldset dd {
	font-weight: 400;
}

strong,
b,
.forumtitle,
.topictitle,
.topic-title,
.username,
.username-coloured,
.nav-link,
.dropdown-contents a {
	font-family: "Rajdhani", Arial, sans-serif;
	font-weight: 600;
}

h1,
h2,
h3,
h4,
.panel h2,
.panel h3,
.content h2,
.content h3,
.forabg .header,
.forumbg .header {
	font-weight: 500;
}

/* FAQ: kompakter und typografisch näher an der FUNKPOWER-Webseite. */
.content dl.faq,
dl.faq {
	font-family: "Rajdhani", Arial, sans-serif;
	font-size: 15.5px;
	font-weight: 400;
	line-height: 1.48;
}

dl.faq dt,
.content dl.faq dt {
	color: #cfe7f8;
	font-family: "Rajdhani", Arial, sans-serif;
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
}

dl.faq dd,
.content dl.faq dd {
	font-weight: 400;
	line-height: 1.48;
}

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: 600;
	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;
}

/* Durchgängiger Kontrast für von prosilver geerbte Komponenten. */
.dropdown .dropdown-contents,
.dropdown-extended .dropdown-contents,
.jumpbox .dropdown-contents,
.contact-icons.dropdown-contents {
	border-color: #2b607f;
	background: #0a1a2b;
	color: var(--fp-text);
}

.dropdown-contents > li,
.dropdown-contents > li:hover,
.jumpbox .dropdown-contents li,
.jumpbox .dropdown-contents a {
	border-color: #173b54;
	background: #0a1a2b;
	color: #d8ecff;
}

.dropdown-contents a:hover,
.jumpbox .dropdown-contents a:hover {
	background: #103452;
	color: var(--fp-green);
}

.panel-container,
.panel-container .panel,
.cp-main .panel,
.cp-mini,
.cp-menu {
	background: var(--fp-panel);
	color: var(--fp-text);
}

.panel-container h2,
.panel-container h3,
.panel-container .panel li.header dd,
.panel-container .panel li.header dt,
.panel-container table.table1 thead th {
	color: var(--fp-cyan);
}

.tabs .tab > a,
.minitabs .tab > a,
.navigation a {
	border-color: #245372;
	background: #0a1a2b;
	color: #cdeaff;
}

.tabs .tab > a:hover,
.minitabs .tab > a:hover,
.navigation a:hover,
.tabs .activetab > a,
.tabs .activetab > a:hover,
.navigation .active-subsection a,
.navigation .active-subsection a:hover {
	background: #103452;
	color: var(--fp-green);
}

table.table1,
table.table1 thead th,
table.table1 tbody th,
table.table1 tbody td,
table.table1 td {
	border-color: #245372;
	color: var(--fp-text);
}

table.table1 tbody tr,
table.table1 tbody th {
	background: #0a1a2b;
}

table.table1 tbody tr:hover,
table.table1 tbody tr.hover {
	background: #103452;
	color: #e8f7ff;
}

blockquote,
.codebox,
.attachbox,
.post_details,
.topicreview {
	border-color: #245372;
	background: #071421;
	color: var(--fp-text);
}

blockquote cite,
.codebox p,
.codebox code,
.attachbox dt,
.attachbox dd,
.attachbox p,
.notice {
	color: var(--fp-text);
}

div.rules {
	border: 1px solid #8a6a18;
	background: #2b230d;
	color: #fff0b5;
}

div.rules a,
div.rules strong {
	color: var(--fp-warning);
}

.errorbox,
.warningbox {
	border-color: #b94a55;
	background: #32131a;
	color: #ffd8dd;
}

.successbox {
	border-color: #258a57;
	background: #0c2b1d;
	color: #caffdc;
}

.errorbox h3,
.errorbox p,
.warningbox h3,
.warningbox p,
.successbox h3,
.successbox p {
	color: inherit;
}

input,
textarea,
select,
option,
.inputbox,
input.inputbox,
textarea.inputbox {
	background-color: #030b14;
	color: #e4f5ff;
}

input::placeholder,
textarea::placeholder {
	color: #86a9c1;
	opacity: 1;
}

/* Radio-, Checkbox- und Optionsbeschriftungen im Beitragseditor. */
fieldset.fields1 label,
fieldset.fields1 dd label,
fieldset.fields2 label,
fieldset.fields2 dd label,
fieldset dd label,
.panel label,
.panel dd label {
	color: var(--fp-text);
}

fieldset.fields1 dl:hover dt label,
fieldset.fields2 dl:hover dt label,
fieldset dl:hover label {
	color: #f0f8ff;
}

.gallery label,
.gallery label:hover {
	border-color: #245372;
	background: #0a1a2b;
	color: var(--fp-text);
}

option.disabled-option {
	color: #86a9c1;
}

hr,
.panel-container hr,
.cp-menu hr {
	border-color: #245372;
}

/* Schaltflächen bleiben auch ohne Hover vollständig lesbar. */
a.button,
a.button:link,
a.button:visited,
.button span,
.button .icon,
.button-secondary,
a.button1,
a.button2,
input.button1,
input.button2,
input.button3 {
	background-image: none;
	filter: none;
	color: #04111c;
	text-shadow: none;
}

a.button:hover,
a.button:focus,
.button:hover span,
.button:focus span,
.button:hover .icon,
.button:focus .icon,
a.button1:hover,
a.button2:hover,
input.button1:hover,
input.button2:hover,
input.button3:hover,
input.button1:focus,
input.button2:focus,
input.button3:focus {
	background-image: none;
	filter: none;
	color: #03110a;
	text-shadow: none;
}

/* Profilinformationen und Metadaten dürfen keine prosilver-Schwarzwerte erben. */
.postprofile,
.postprofile dt,
.postprofile dd,
.postprofile strong,
.postprofile .profile-posts a,
p.author,
.postbody .author,
.postbody .content,
.signature,
.notice,
.post_details {
	color: var(--fp-text);
}

.postprofile a:not(.username):not(.username-coloured) {
	color: var(--fp-cyan);
}

.postprofile a:not(.username):not(.username-coloured):hover {
	color: var(--fp-green);
}

/* phpBB färbt den über einen #p-Anker angesprungenen Beitrag sonst schwarz. */
.post:target .content,
.post:target .content p,
.post:target .content li,
.post:target .content span {
	color: var(--fp-text);
}

.post h3 a.first-unread,
.post:target h3,
.post:target h3 a,
.postbody h3,
.postbody h3 a {
	color: var(--fp-cyan);
}

.postlink,
.postlink:visited {
	border-bottom-color: var(--fp-cyan);
	background: transparent;
	color: #75ddff;
}

.postlink:hover {
	border-bottom-color: var(--fp-green);
	background: #103452;
	color: var(--fp-green);
}

.dropdown-extended a.mark_read,
.alert_close .icon::before {
	background-color: #0a1a2b;
}

.posthilit {
	background: #3b3010;
	color: #ffe680;
}

/* Statussymbole bleiben auf dunklen Flächen sichtbar; in Cyan-Buttons bleiben sie dunkel. */
.icon.icon-black,
.icon.icon-gray,
.icon.icon-lightgray,
.icon.icon-bluegray,
.top i,
.arrow-left,
.arrow-right {
	color: #9fc7df;
}

.button .icon.icon-black,
.button .icon.icon-gray,
.button .icon.icon-lightgray,
.button .icon.icon-bluegray,
.button .icon.icon-blue,
.button .icon.icon-green,
.button .icon.icon-red,
.button .icon.icon-orange {
	color: #04111c;
}

.button:hover .icon,
.button:focus .icon {
	color: #03110a;
}

li.header dt,
li.header dd,
.forabg li.header dt,
.forabg li.header dd,
.forumbg li.header dt,
.forumbg li.header dd {
	color: #dff5ff;
}

/* Übersichtliche Bedienleiste und gut lesbarer Leerzustand in den Foren. */
.action-bar.bar-top {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 52px;
	margin: 18px 0;
}

.action-bar.bar-top > .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 48px;
	padding: 0 20px;
	border-radius: 13px;
	font-size: 18px;
	line-height: 1;
}

.action-bar.bar-top .search-box {
	margin-left: auto;
}

.action-bar.bar-top .search-box fieldset {
	display: flex;
	align-items: stretch;
}

.action-bar.bar-top .search-box .inputbox.search {
	box-sizing: border-box;
	width: 310px;
	height: 48px;
	padding: 0 15px;
	border-radius: 13px 0 0 13px;
	font-size: 18px;
}

.action-bar.bar-top .search-box .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	min-width: 50px;
	height: 48px;
	padding: 0 13px;
	border-radius: 0;
	font-size: 19px;
}

.action-bar.bar-top .search-box .button-search-end {
	border-radius: 0 13px 13px 0;
}

.action-bar.bar-top + .panel {
	padding: 20px 22px;
	border-radius: 15px;
}

.action-bar.bar-top + .panel .inner > strong {
	display: block;
	font-size: 21px;
	font-weight: 500;
	line-height: 1.35;
}

@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;
	}

	.action-bar.bar-top {
		flex-wrap: wrap;
	}

	.action-bar.bar-top > .button {
		width: 100%;
	}

	.action-bar.bar-top .search-box {
		width: 100%;
		margin-left: 0;
	}

	.action-bar.bar-top .search-box form,
	.action-bar.bar-top .search-box fieldset {
		width: 100%;
	}

	.action-bar.bar-top .search-box .inputbox.search {
		width: auto;
		min-width: 0;
		flex: 1;
	}
}

/* Einheitliche Darstellung hochgeladener Beitragsbilder. */
.postbody .content .inline-attachment,
.postbody .content .attachbox {
	text-align: center;
}

.postbody .content img.postimage,
.postbody .content .inline-attachment img,
.postbody .content .attachbox img {
	display: block;
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 800px;
	margin: 12px auto;
	object-fit: contain;
	border-radius: 10px;
}