@import url("../../prosilver/theme/stylesheet.css");

/*
 * Rasenregie Community 1.0.2
 * Target: phpBB 3.3.17
 * Parent: prosilver
 */

:root {
	--rr-bg: #07111f;
	--rr-bg-deep: #040b13;
	--rr-surface: #0d1a2a;
	--rr-surface-raised: #132437;
	--rr-surface-soft: #172b40;
	--rr-border: #3b536b;
	--rr-border-soft: rgba(121, 155, 184, .22);
	--rr-text: #f4f7fa;
	--rr-muted: #aebdcb;
	--rr-muted-soft: #8297aa;
	--rr-cyan: #25d5d8;
	--rr-cyan-strong: #13b8c4;
	--rr-cyan-ink: #041417;
	--rr-amber: #f7b955;
	--rr-green: #4dd17e;
	--rr-red: #ff6b6b;
	--rr-blue: #67b7ff;
	--rr-display: "Arial Narrow", "Roboto Condensed", Impact, sans-serif;
	--rr-ui: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
	--rr-radius: 14px;
	--rr-shadow: 0 22px 55px rgba(0, 0, 0, .28);
}

html {
	background: var(--rr-bg-deep);
	font-size: 16px;
}

body {
	min-width: 320px;
	color: var(--rr-text);
	background:
		linear-gradient(125deg, rgba(37, 213, 216, .08), transparent 34rem),
		url("./images/community-pattern.svg") repeat,
		var(--rr-bg);
	font-family: var(--rr-ui);
	font-size: 15px;
	line-height: 1.55;
}

body::before {
	position: fixed;
	inset: 0 0 auto;
	z-index: 100;
	height: 3px;
	content: "";
	pointer-events: none;
	background: linear-gradient(90deg, var(--rr-cyan), var(--rr-blue) 56%, var(--rr-amber));
}

h1,
h2,
h3,
h4,
.forum-title,
.topic-title,
.memberlist-title,
.panel-container h2,
.content h2,
.content h3 {
	color: var(--rr-text);
	font-family: var(--rr-display);
	font-weight: 900;
	letter-spacing: -.015em;
}

a,
a:link,
a:visited {
	color: #86eef0;
}

a:hover,
a:focus,
a:active {
	color: var(--rr-cyan);
	text-decoration: none;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
	outline: 3px solid var(--rr-amber);
	outline-offset: 3px;
}

.wrap {
	width: min(1480px, calc(100% - 48px));
	max-width: none;
	margin: 28px auto 48px;
	padding: 0;
	border: 1px solid var(--rr-border-soft);
	border-radius: 20px;
	background: rgba(7, 17, 31, .82);
	box-shadow: var(--rr-shadow);
	backdrop-filter: blur(12px);
}

.rr-utility {
	display: flex;
	align-items: center;
	gap: 18px;
	min-height: 46px;
	padding: 0 24px;
	border-bottom: 1px solid var(--rr-border-soft);
	border-radius: 19px 19px 0 0;
	background: rgba(4, 11, 19, .88);
}

.rr-utility-label {
	color: var(--rr-cyan);
	font-size: 10px;
	font-weight: 900;
	letter-spacing: .18em;
	text-transform: uppercase;
}

.rr-utility-links {
	display: flex;
	align-items: center;
	gap: 4px;
	margin-left: auto;
}

.rr-utility-links a {
	display: inline-flex;
	align-items: center;
	min-height: 34px;
	padding: 0 12px;
	border: 1px solid transparent;
	border-radius: 8px;
	color: var(--rr-muted);
	font-size: 11px;
	font-weight: 800;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.rr-utility-links a:hover,
.rr-utility-links a:focus {
	border-color: var(--rr-border);
	color: var(--rr-text);
	background: var(--rr-surface);
}

.headerbar {
	position: relative;
	min-height: 160px;
	margin: 0;
	padding: 0;
	border-radius: 0;
	background:
		linear-gradient(90deg, rgba(8, 21, 34, .98), rgba(8, 21, 34, .74)),
		radial-gradient(circle at 78% 32%, rgba(37, 213, 216, .16), transparent 26rem),
		var(--rr-surface);
	overflow: hidden;
}

.headerbar::before {
	position: absolute;
	inset: 0;
	content: "";
	pointer-events: none;
	background:
		linear-gradient(90deg, transparent 0 72%, rgba(247, 185, 85, .85) 72% 72.2%, transparent 72.2%),
		url("./images/community-pattern.svg") repeat;
	opacity: .7;
}

.headerbar > .inner {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 160px;
	padding: 24px 32px;
}

.site-description {
	width: auto;
	float: none;
	display: flex;
	align-items: center;
	min-width: 420px;
}

.logo {
	display: flex;
	align-items: center;
	width: min(500px, 44vw);
	height: 92px;
	padding: 0;
	float: none;
}

.site_logo {
	display: block;
	width: 100%;
	height: 100%;
	background-image: url("./images/rasenregie-wordmark.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: contain;
}

.site-description h1,
.site-description > p:not(.skiplink) {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	overflow: hidden;
	white-space: nowrap;
}

.search-header {
	width: min(370px, 36vw);
	margin: 0 0 0 auto;
	box-shadow: none;
}

.search-box .inputbox {
	height: 46px;
	padding: 0 14px;
	border: 1px solid var(--rr-border);
	border-radius: 10px 0 0 10px;
	color: var(--rr-text);
	background: rgba(4, 11, 19, .82);
	font-size: 14px;
}

.search-box .inputbox::placeholder {
	color: var(--rr-muted-soft);
}

.search-box .button-search,
.search-box .button-search-end {
	height: 46px;
	border-color: var(--rr-cyan-strong);
	color: var(--rr-cyan-ink);
	background: var(--rr-cyan);
}

.search-box .button-search-end {
	border-radius: 0 10px 10px 0;
	border-left-color: rgba(4, 20, 23, .25);
}

.navbar {
	min-height: 58px;
	margin: 0;
	padding: 0 20px;
	border: 0;
	border-top: 1px solid var(--rr-border-soft);
	border-bottom: 1px solid var(--rr-border-soft);
	border-radius: 0;
	background: rgba(13, 26, 42, .96);
}

.nav-main,
.nav-breadcrumbs {
	display: flex;
	align-items: center;
	min-height: 56px;
}

ul.linklist > li {
	font-size: 12px;
}

ul.linklist > li > a,
.navbar a {
	color: var(--rr-muted);
	font-weight: 750;
}

ul.linklist > li > a:hover,
.navbar a:hover {
	color: var(--rr-cyan);
}

.icon,
a:hover .icon,
.icon.icon-blue,
.icon.icon-lightgray {
	color: var(--rr-cyan);
}

.page-body {
	padding: 28px 26px 34px;
}

.breadcrumbs .crumb::before {
	color: var(--rr-border);
}

.breadcrumbs .crumb a {
	color: var(--rr-muted);
}

.breadcrumbs .crumb:last-child a {
	color: var(--rr-text);
}

.action-bar {
	display: flex;
	align-items: center;
	gap: 10px;
	margin: 18px 0;
}

.forabg,
.forumbg {
	margin: 0 0 18px;
	padding: 0;
	border: 1px solid var(--rr-border-soft);
	border-radius: var(--rr-radius);
	background: var(--rr-surface);
	box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
	overflow: hidden;
}

.forabg > .inner,
.forumbg > .inner {
	margin: 0;
}

li.header {
	padding: 0;
	background:
		linear-gradient(90deg, rgba(37, 213, 216, .13), transparent 55%),
		var(--rr-surface-raised);
}

li.header dl.row-item {
	min-height: 58px;
	display: flex;
	align-items: center;
	padding: 0 20px;
}

li.header dt,
li.header dd {
	color: var(--rr-muted);
	font-family: var(--rr-ui);
	font-size: 10px;
	font-weight: 850;
	letter-spacing: .14em;
	text-transform: uppercase;
}

li.header dt .list-inner {
	padding-left: 0;
}

ul.topiclist {
	margin: 0;
	background: transparent;
}

ul.topiclist li {
	color: var(--rr-text);
}

ul.topiclist li.row {
	min-height: 88px;
	border-top: 1px solid var(--rr-border-soft);
	border-bottom: 0;
	background: rgba(9, 21, 35, .74);
	transition: background-color .18s ease, transform .18s ease;
}

ul.topiclist li.row:nth-child(even) {
	background: rgba(13, 29, 46, .74);
}

ul.topiclist li.row:hover {
	background: rgba(23, 43, 64, .96);
}

ul.topiclist li.row dl {
	min-height: 88px;
	display: flex;
	align-items: stretch;
}

ul.topiclist li.row dt,
ul.topiclist li.row dd {
	display: flex;
	align-items: center;
}

ul.topiclist li.row dt {
	min-height: 88px;
}

ul.topiclist li.row dt .list-inner {
	padding-top: 15px;
	padding-bottom: 15px;
}

.row-item::before {
	top: 50%;
	left: 19px;
	transform: translateY(-50%);
	color: var(--rr-cyan);
	font-size: 25px;
}

.row-item[class*="announce"]::before,
.row-item[class*="sticky"]::before {
	color: var(--rr-amber);
}

.forum-title,
.topictitle {
	color: var(--rr-text) !important;
	font-family: var(--rr-display);
	font-size: 18px;
	font-weight: 900;
	letter-spacing: .01em;
}

.forum-title:hover,
.topictitle:hover {
	color: var(--rr-cyan) !important;
}

.forum-title + br + span,
.forum-description,
.topic-poster,
.topic-time,
.responsive-show,
.responsive-hide,
dd.lastpost,
dd.posts,
dd.topics,
dd.views {
	color: var(--rr-muted);
}

.forumlist .forum-description,
ul.topiclist .list-inner > span {
	font-size: 12px;
	line-height: 1.55;
}

dd.posts,
dd.topics,
dd.views {
	border-left-color: var(--rr-border-soft);
	font-size: 12px;
}

dd.lastpost {
	border-left: 1px solid var(--rr-border-soft);
	font-size: 12px;
}

dd.lastpost > span {
	padding: 0 14px;
}

.stat-block,
.statistics {
	margin-top: 22px;
	padding: 20px;
	border: 1px solid var(--rr-border-soft);
	border-radius: var(--rr-radius);
	color: var(--rr-muted);
	background: rgba(13, 26, 42, .78);
}

.stat-block h3 {
	margin: 0 0 10px;
	padding: 0 0 10px;
	border-bottom: 1px solid var(--rr-border-soft);
	color: var(--rr-text);
	font-family: var(--rr-display);
	font-size: 21px;
	font-weight: 900;
}

.panel,
.post,
.bg1,
.bg2,
.bg3 {
	color: var(--rr-text);
	background: var(--rr-surface);
}

.panel {
	margin-bottom: 18px;
	padding: 20px;
	border: 1px solid var(--rr-border-soft);
	border-radius: var(--rr-radius);
}

.panel .inner {
	padding: 0;
}

/*
 * prosilver uses a more specific light background for nested UCP/MCP panels.
 * Keep account settings, moderation forms and confirmation dialogs inside the
 * Rasenregie dark surface instead of falling back to #f9f9f9 / white.
 */
.cp-main .panel,
.panel-container .panel,
.phpbb_alert {
	border-color: var(--rr-border-soft);
	color: var(--rr-text);
	background: var(--rr-surface);
}

.phpbb_alert .alert_close {
	color: var(--rr-muted);
}

.panel-container h2,
.panel h2,
.panel h3 {
	color: var(--rr-text);
}

.post {
	position: relative;
	margin-bottom: 18px;
	padding: 0;
	border: 1px solid var(--rr-border-soft);
	border-radius: var(--rr-radius);
	box-shadow: 0 10px 26px rgba(0, 0, 0, .12);
	overflow: hidden;
}

/*
 * The localized prosilver stylesheet is loaded after this file and adds its
 * ONLINE ribbon as a background image. Our post surface resets the original
 * no-repeat value, which otherwise tiles that ribbon across the whole post.
 * The Rasenregie layout deliberately omits the decorative ribbon so the
 * message and profile remain readable at every viewport size.
 */
.post.online {
	background-color: var(--rr-surface);
	background-image: none !important;
	background-repeat: no-repeat !important;
}

.post::before {
	position: absolute;
	inset: 0 auto 0 0;
	width: 3px;
	content: "";
	background: var(--rr-cyan-strong);
}

.post > .inner {
	padding: 0;
}

.postbody {
	width: calc(100% - 280px);
	padding: 22px 26px 28px;
}

.postprofile {
	width: 240px;
	padding: 22px 18px;
	border-color: var(--rr-border-soft);
	color: var(--rr-muted);
	background: rgba(4, 11, 19, .34);
}

.postprofile strong,
.postprofile dt,
.postprofile dd {
	color: var(--rr-muted);
}

.postprofile .username,
.postprofile .username-coloured {
	color: var(--rr-cyan) !important;
	font-family: var(--rr-display);
	font-size: 18px;
	font-weight: 900;
}

/* phpBB group colours are optimised for prosilver's white background. */
a.username-coloured[style*="#AA0000"],
span.username-coloured[style*="#AA0000"] {
	color: #ff7474 !important;
}

a.username-coloured[style*="#00AA00"],
span.username-coloured[style*="#00AA00"] {
	color: #63d994 !important;
}

.postprofile .avatar img {
	border: 2px solid var(--rr-border);
	border-radius: 16px;
	background: var(--rr-surface-raised);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .28);
}

.postbody h3 {
	padding-right: 150px;
	color: var(--rr-text);
	font-size: 20px;
}

.postbody .content {
	min-height: 130px;
	color: #e8eef3;
	font-size: 15px;
	line-height: 1.72;
}

.postbody .content blockquote {
	margin: 16px 0;
	padding: 16px 18px;
	border: 0;
	border-left: 4px solid var(--rr-cyan);
	border-radius: 0 10px 10px 0;
	color: var(--rr-muted);
	background: rgba(4, 11, 19, .54);
}

.postbody .content code,
.codebox {
	border-color: var(--rr-border-soft);
	color: #d6e8f5;
	background: var(--rr-bg-deep);
}

.postbody .content a {
	color: var(--rr-cyan);
	text-decoration: underline;
	text-decoration-color: rgba(37, 213, 216, .45);
	text-underline-offset: 3px;
}

.post-buttons .button {
	border-color: var(--rr-border);
	color: var(--rr-muted);
	background: var(--rr-surface-raised);
}

.post-buttons .button:hover {
	border-color: var(--rr-cyan);
	color: var(--rr-cyan);
}

.signature {
	border-top-color: var(--rr-border-soft);
	color: var(--rr-muted-soft);
}

.button,
.button1,
.button2,
input.button1,
input.button2,
a.button1,
a.button2 {
	min-height: 40px;
	padding: 8px 14px;
	border: 1px solid var(--rr-border);
	border-radius: 9px;
	color: var(--rr-text);
	background: var(--rr-surface-raised);
	box-shadow: none;
	font-family: var(--rr-ui);
	font-size: 11px;
	font-weight: 850;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.button:hover,
.button2:hover,
input.button2:hover {
	border-color: var(--rr-cyan);
	color: var(--rr-cyan);
	background: #183249;
}

.button1,
input.button1,
a.button1,
.button-search {
	border-color: var(--rr-cyan);
	color: var(--rr-cyan-ink);
	background: var(--rr-cyan);
}

.button1:hover,
input.button1:hover,
a.button1:hover {
	border-color: #6af1f2;
	color: var(--rr-cyan-ink);
	background: #6af1f2;
}

.inputbox,
input.inputbox,
textarea.inputbox,
select {
	min-height: 42px;
	border: 1px solid var(--rr-border);
	border-radius: 9px;
	color: var(--rr-text);
	background: var(--rr-bg-deep);
	font-family: var(--rr-ui);
	font-size: 14px;
}

textarea.inputbox {
	padding: 12px;
}

.inputbox:hover,
.inputbox:focus,
select:hover,
select:focus {
	border-color: var(--rr-cyan);
	color: var(--rr-text);
	background: #081827;
}

fieldset.fields1 dt,
fieldset.fields2 dt,
fieldset.fields1 dd,
fieldset.fields2 dd,
dl.details dt,
dl.details dd {
	color: var(--rr-muted);
}

.pagination li a,
.pagination li span {
	min-width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--rr-border);
	border-radius: 8px;
	color: var(--rr-muted);
	background: var(--rr-surface);
}

.pagination li.active span,
.pagination li a:hover {
	border-color: var(--rr-cyan);
	color: var(--rr-cyan-ink);
	background: var(--rr-cyan);
}

.rules,
.rules.notice,
.rules.message {
	padding: 16px 18px;
	border: 1px solid rgba(247, 185, 85, .42);
	border-left: 4px solid var(--rr-amber);
	border-radius: 10px;
	color: #f9dfb4;
	background: rgba(91, 57, 16, .28);
}

.rules a {
	color: #ffe5ba;
	text-decoration: underline;
}

.error,
.warning {
	color: #ff9696;
}

.successbox,
.errorbox {
	border: 0;
	border-left: 4px solid var(--rr-green);
	border-radius: 10px;
	color: var(--rr-text);
	background: rgba(34, 91, 57, .55);
}

.errorbox {
	border-left-color: var(--rr-red);
	background: rgba(100, 28, 36, .55);
}

.dropdown .dropdown-contents,
.dropdown-extended .dropdown-contents {
	border: 1px solid var(--rr-border);
	border-radius: 10px;
	color: var(--rr-text);
	background: var(--rr-surface-raised);
	box-shadow: var(--rr-shadow);
}

.dropdown-extended ul li,
.dropdown-extended .header,
.dropdown-extended .footer {
	border-color: var(--rr-border-soft);
	color: var(--rr-muted);
	background: var(--rr-surface-raised);
}

.dropdown-extended ul li:hover {
	background: var(--rr-surface-soft);
}

.tabs .tab > a,
.minitabs .tab > a {
	border-radius: 8px 8px 0 0;
	color: var(--rr-muted);
	background: var(--rr-surface);
}

.tabs .activetab > a,
.tabs .tab > a:hover,
.minitabs .activetab > a,
.minitabs .tab > a:hover {
	color: var(--rr-cyan);
	background: var(--rr-surface-raised);
}

.navigation a {
	color: var(--rr-muted);
	background: var(--rr-surface);
}

.navigation a:hover,
.navigation .active-subsection a {
	color: var(--rr-cyan-ink);
	background: var(--rr-cyan);
}

table.table1 tbody tr {
	border-color: var(--rr-border-soft);
	background: var(--rr-surface);
}

table.table1 tbody tr:hover,
table.table1 tbody tr.hover {
	color: var(--rr-text);
	background: var(--rr-surface-raised);
}

table.table1 thead th {
	color: var(--rr-muted);
	font-size: 10px;
	letter-spacing: .12em;
	text-transform: uppercase;
}

table.table1 td {
	color: var(--rr-muted);
}

.page-footer {
	padding: 28px 24px 34px;
	border-top: 1px solid var(--rr-border-soft);
	color: var(--rr-muted-soft);
	background: rgba(4, 11, 19, .42);
}

.copyright {
	color: var(--rr-muted-soft);
	font-size: 11px;
	line-height: 1.7;
}

.copyright a {
	color: var(--rr-muted);
}

.jumpbox-cat-link,
.jumpbox-sub-link {
	border-color: var(--rr-border-soft);
	color: var(--rr-text);
	background: var(--rr-surface);
}

@media (min-width: 1800px) {
	body {
		font-size: 16px;
	}

	.wrap {
		width: min(1660px, calc(100% - 72px));
	}

	.page-body {
		padding-inline: 34px;
	}

	.forum-title,
	.topictitle {
		font-size: 19px;
	}
}

@media (max-width: 900px) {
	.wrap {
		width: calc(100% - 24px);
		margin-top: 12px;
		border-radius: 16px;
	}

	.rr-utility {
		padding-inline: 16px;
	}

	.headerbar,
	.headerbar > .inner {
		min-height: 134px;
	}

	.headerbar > .inner {
		padding: 20px;
	}

	.logo {
		width: min(430px, 56vw);
		height: 80px;
	}

	.search-header {
		width: min(300px, 35vw);
	}

	.page-body {
		padding-inline: 18px;
	}

	dd.posts,
	dd.topics,
	dd.views {
		display: none;
	}

	.postbody {
		width: calc(100% - 230px);
	}

	.postprofile {
		width: 190px;
	}
}

@media (max-width: 700px) {
	body {
		font-size: 15px;
	}

	.wrap {
		width: 100%;
		margin: 0;
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.rr-utility {
		min-height: 44px;
		padding: 0 12px;
	}

	.rr-utility-label {
		display: none;
	}

	.rr-utility-links {
		width: 100%;
		justify-content: space-between;
		margin: 0;
	}

	.rr-utility-links a {
		min-height: 40px;
		padding: 0 8px;
		font-size: 10px;
	}

	.headerbar,
	.headerbar > .inner {
		min-height: 114px;
		border-radius: 0;
	}

	.headerbar > .inner {
		padding: 14px 16px;
	}

	.site-description {
		min-width: 0;
		width: 100%;
	}

	.logo {
		width: min(390px, 76vw);
		height: 72px;
	}

	.search-header {
		display: none;
	}

	.navbar {
		padding-inline: 8px;
	}

	.nav-main,
	.nav-breadcrumbs {
		min-height: 52px;
	}

	.page-body {
		padding: 16px 12px 26px;
	}

	.action-bar {
		align-items: flex-start;
		flex-wrap: wrap;
	}

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

	li.header dl.row-item {
		min-height: 48px;
		padding-inline: 14px;
	}

	li.header dd {
		display: none;
	}

	ul.topiclist li.row,
	ul.topiclist li.row dl,
	ul.topiclist li.row dt {
		min-height: 82px;
	}

	ul.topiclist li.row dt {
		width: 100%;
		padding-right: 0;
	}

	ul.topiclist li.row dt .list-inner {
		margin-right: 0;
		padding: 13px 12px 13px 52px;
	}

	.row-item::before {
		left: 14px;
		font-size: 22px;
	}

	dd.lastpost,
	dd.posts,
	dd.topics,
	dd.views {
		display: none;
	}

	.forum-title,
	.topictitle {
		font-size: 17px;
	}

	.postbody,
	.postprofile {
		width: auto;
		float: none;
	}

	.postbody {
		padding: 18px 16px 22px;
	}

	.postprofile {
		min-height: 72px;
		padding: 12px 16px;
		border: 0;
		border-top: 1px solid var(--rr-border-soft);
	}

	.postprofile .avatar-container {
		float: left;
		margin: 0 12px 0 0;
	}

	.postprofile .avatar img {
		width: 48px;
		height: 48px;
		object-fit: cover;
		border-radius: 12px;
	}

	.postbody h3 {
		padding-right: 0;
		font-size: 18px;
	}

	.postbody .content {
		font-size: 15px;
	}

	.button,
	.button1,
	.button2,
	input.button1,
	input.button2,
	a.button1,
	a.button2 {
		min-height: 44px;
	}

	.page-footer {
		padding-inline: 16px;
	}
}

@media (max-width: 420px) {
	.rr-utility-links a {
		padding-inline: 5px;
		font-size: 9px;
		letter-spacing: .04em;
	}

	.logo {
		width: 92vw;
		height: 68px;
	}

	.forum-title,
	.topictitle {
		font-size: 16px;
	}

	.pagination {
		max-width: 100%;
		overflow-x: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		scroll-behavior: auto !important;
		transition-duration: .01ms !important;
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
	}
}