/*
Theme Name:   Kadence VOID
Theme URI:    https://void.cx/
Description:  Child theme of Kadence carrying the "Enter The Void" brand — dark, techy, community-first. All VOID customisations live here; the Kadence parent stays untouched and upgradeable.
Author:       Enter The Void
Author URI:   https://void.cx/
Template:     kadence
Version:      1.0.0
Requires PHP: 8.0
License:      GNU General Public License v2 or later
License URI:  http://www.gnu.org/licenses/gpl-2.0.html
Text Domain:  kadence-void
*/

/* ==========================================================================
   1. Brand tokens
   ========================================================================== */

:root {
	--void-bg:          #0b0b0f;
	--void-bg-alt:      #101016;
	--void-surface:     #14141c;
	--void-surface-2:   #1a1a24;
	--void-line:        #24242f;
	--void-line-strong: #33333f;

	--void-text:        #e9e9f0;
	--void-heading:     #ffffff;
	--void-muted:       #9b9bae;
	--void-dim:         #6f6f82;

	--void-accent:      #a855f7;
	--void-accent-2:    #3b82f6;
	--void-accent-soft: rgba(168, 85, 247, 0.14);
	--void-accent-line: rgba(168, 85, 247, 0.35);
	--void-gradient:    linear-gradient(135deg, #a855f7 0%, #6d47f5 50%, #2563eb 100%);

	--void-ok:          #34d399;
	--void-warn:        #fbbf24;
	--void-off:         #5b5b6b;

	--void-font-body:    "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--void-font-display: "Space Grotesk", var(--void-font-body);
	--void-font-mono:    ui-monospace, "SFMono-Regular", "JetBrains Mono", Menlo, Consolas, monospace;

	--void-radius:    14px;
	--void-radius-sm: 10px;
	--void-shell:     1180px;
	--void-gutter:    clamp(1.25rem, 4vw, 2rem);
}

/* ==========================================================================
   2. Self-hosted webfonts (no Google CDN — DSGVO-safe, no third-party hit)
   ========================================================================== */

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("assets/fonts/inter-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400 700;
	font-display: swap;
	src: url("assets/fonts/inter-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
		U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
		U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url("assets/fonts/space-grotesk-latin.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
		U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Space Grotesk";
	font-style: normal;
	font-weight: 500 700;
	font-display: swap;
	src: url("assets/fonts/space-grotesk-latin-ext.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308,
		U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113,
		U+2C60-2C7F, U+A720-A7FF;
}

/* ==========================================================================
   3. Base — flip Kadence to dark
   ========================================================================== */

body,
body.wp-singular,
#wrapper,
.site,
.content-bg,
.entry-content-wrap,
.content-area,
.entry.single-entry,
.entry.loop-entry {
	background: var(--void-bg);
}

body {
	color: var(--void-text);
	font-family: var(--void-font-body);
	font-size: 17px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.entry-title,
.site-title {
	color: var(--void-heading);
	font-family: var(--void-font-display);
	font-weight: 700;
	letter-spacing: -0.022em;
	line-height: 1.15;
}

h1 { font-size: clamp(2.1rem, 5.2vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3.6vw, 2.35rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.45rem); }

p { color: var(--void-text); }

a {
	color: var(--void-accent);
	text-decoration-color: var(--void-accent-line);
	text-underline-offset: 3px;
	transition: color 0.15s ease;
}
a:hover,
a:focus { color: #c89bff; }

:focus-visible {
	outline: 2px solid var(--void-accent);
	outline-offset: 3px;
	border-radius: 4px;
}

hr,
.entry-content hr {
	border: 0;
	border-top: 1px solid var(--void-line);
}

code, kbd, pre {
	font-family: var(--void-font-mono);
	background: var(--void-surface);
	color: #d6bcff;
	border-radius: 6px;
}

::selection {
	background: var(--void-accent);
	color: #fff;
}

/* Kadence surfaces that ship light by default */
.content-bg,
.entry-content-wrap,
#primary,
.site-main,
.content-container,
.entry-hero-container-inner,
.wp-site-blocks {
	background: transparent;
}

/* ==========================================================================
   4. Header
   ========================================================================== */

#masthead,
.site-header-wrap,
.site-header-row,
.site-header-main-section-left,
.site-top-header-wrap,
.site-main-header-wrap,
.site-bottom-header-wrap {
	background: rgba(11, 11, 15, 0.82);
	color: var(--void-text);
}

#masthead {
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	border-bottom: 1px solid var(--void-line);
}

.site-branding img,
.custom-logo-link img {
	max-height: 46px;
	width: auto;
}

.header-navigation .header-menu-container > ul > li > a,
.header-navigation ul li a,
.site-header-item .kadence-search-toggle-open-container,
.mobile-toggle-open-container .menu-toggle-open {
	color: var(--void-text);
	font-family: var(--void-font-display);
	font-size: 0.94rem;
	font-weight: 500;
	letter-spacing: 0.01em;
}

.header-navigation ul li a:hover,
.header-navigation ul li.current-menu-item > a {
	color: var(--void-accent);
}

/* Kadence underline hover indicator */
.header-navigation[class*="header-navigation-style-underline"] .header-menu-container > ul > li > a:after {
	background: var(--void-gradient);
}

/* Drop-downs + mobile drawer */
.header-navigation .header-menu-container ul ul.sub-menu,
.header-navigation .header-menu-container ul ul.submenu,
#mobile-drawer .drawer-inner,
.drawer-content,
#mobile-drawer {
	background: var(--void-bg-alt);
	border: 1px solid var(--void-line);
}
#mobile-drawer .drawer-inner,
#mobile-drawer li a {
	color: var(--void-text);
}
.drawer-toggle .toggle-bar,
.menu-toggle-open .menu-toggle-icon,
.drawer-toggle-close {
	color: var(--void-text);
}

/* Header CTA button */
.header-navigation .button,
.site-header-item .kadence-header-button {
	background-image: var(--void-gradient);
	border: 0;
	color: #fff;
}

/* ==========================================================================
   5. Buttons
   ========================================================================== */

.wp-block-button__link,
.button,
button,
input[type="submit"],
.kb-button {
	font-family: var(--void-font-display);
	font-weight: 600;
	letter-spacing: 0.005em;
	border-radius: var(--void-radius-sm);
	padding: 0.85em 1.6em;
	transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
}

/* Primary — gradient */
.wp-block-button:not(.is-style-outline) .wp-block-button__link,
.button.button-primary,
input[type="submit"] {
	background-image: var(--void-gradient);
	background-color: var(--void-accent);
	color: #fff;
	border: 0;
	box-shadow: 0 6px 22px -10px rgba(168, 85, 247, 0.85);
}

.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
.button.button-primary:hover,
input[type="submit"]:hover {
	color: #fff;
	transform: translateY(-1px);
	box-shadow: 0 12px 30px -12px rgba(168, 85, 247, 0.95);
}

/* Secondary — ghost */
.wp-block-button.is-style-outline .wp-block-button__link,
.void-btn-ghost .wp-block-button__link {
	background: transparent;
	color: var(--void-text);
	border: 1px solid var(--void-line-strong);
	box-shadow: none;
}
.wp-block-button.is-style-outline .wp-block-button__link:hover,
.void-btn-ghost .wp-block-button__link:hover {
	border-color: var(--void-accent);
	color: #fff;
	background: var(--void-accent-soft);
}

/* Discord-flavoured CTA (adds the mark before the label) */
.void-btn-discord .wp-block-button__link::before,
a.void-discord-link::before {
	content: "";
	display: inline-block;
	width: 1.15em;
	height: 1.15em;
	margin-right: 0.6em;
	vertical-align: -0.22em;
	background-color: currentColor;
	-webkit-mask: var(--void-discord-mask) center / contain no-repeat;
	mask: var(--void-discord-mask) center / contain no-repeat;
}

/* ==========================================================================
   6. Shared section furniture
   ========================================================================== */

.void-section {
	padding: clamp(3.5rem, 8vw, 6.5rem) var(--void-gutter);
	position: relative;
}

.void-section + .void-section {
	border-top: 1px solid var(--void-line);
}

/* Der Join-Block braucht innen keinen zweiten Gutter. */
.void-join-panel {
	margin-inline: auto;
}

.void-kicker,
.void-kicker p {
	font-family: var(--void-font-mono);
	font-size: 0.76rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	color: var(--void-accent);
	margin-bottom: 0.9rem;
}

.void-lead,
.void-lead p {
	font-size: clamp(1.02rem, 1.6vw, 1.16rem);
	color: var(--void-muted);
	max-width: 62ch;
}

.void-muted,
.void-muted p {
	color: var(--void-muted);
}

/* ==========================================================================
   7. Hero
   ========================================================================== */

.void-hero {
	position: relative;
	overflow: hidden;
	padding: clamp(2.75rem, 6vw, 4.5rem) var(--void-gutter) clamp(3.5rem, 9vw, 6rem);
	background:
		radial-gradient(900px 480px at 50% -12%, rgba(124, 58, 237, 0.30) 0%, rgba(124, 58, 237, 0) 70%),
		radial-gradient(620px 380px at 88% 8%, rgba(37, 99, 235, 0.20) 0%, rgba(37, 99, 235, 0) 70%),
		var(--void-bg);
	border-bottom: 1px solid var(--void-line);
}

/* Abstract "void" backdrop: a receding grid, no photography */
.void-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(168, 85, 247, 0.10) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(168, 85, 247, 0.10) 1px, transparent 1px);
	background-size: 62px 62px;
	-webkit-mask-image: radial-gradient(760px 420px at 50% 22%, #000 0%, transparent 78%);
	mask-image: radial-gradient(760px 420px at 50% 22%, #000 0%, transparent 78%);
	pointer-events: none;
}

/* The void itself — a dark disc with a lit rim */
.void-hero::after {
	content: "";
	position: absolute;
	left: 50%;
	top: -180px;
	width: 620px;
	height: 620px;
	transform: translateX(-50%);
	border-radius: 50%;
	background: radial-gradient(circle at 50% 50%, #000 42%, rgba(168, 85, 247, 0.28) 58%, rgba(37, 99, 235, 0.10) 66%, transparent 72%);
	filter: blur(2px);
	opacity: 0.85;
	pointer-events: none;
}

.void-hero > * {
	position: relative;
	z-index: 1;
}

.void-hero .void-hero-inner {
	max-width: 860px;
	margin: 0 auto;
	text-align: center;
}

.void-hero h1 {
	font-size: clamp(2.6rem, 7.5vw, 4.6rem);
	letter-spacing: -0.035em;
	margin: 0 0 1rem;
	text-wrap: balance;
}

.void-hero h1 .void-grad {
	background: var(--void-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

.void-hero .void-lead,
.void-hero .void-lead p {
	margin-left: auto;
	margin-right: auto;
	font-size: clamp(1.05rem, 2vw, 1.28rem);
	color: var(--void-muted);
	text-wrap: pretty;
}

.void-hero .wp-block-buttons,
.void-join-panel .wp-block-buttons {
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.9rem;
}

.void-hero .wp-block-buttons {
	margin-top: 2.2rem;
}

@media (max-width: 420px) {
	.void-hero .wp-block-button,
	.void-join-panel .wp-block-button {
		width: 100%;
	}
	.void-hero .wp-block-button__link,
	.void-join-panel .wp-block-button__link {
		display: block;
		text-align: center;
	}
}

.void-hero-logo {
	margin: 0 auto 1.7rem;
}

.void-hero-logo img {
	max-width: min(260px, 62vw);
	height: auto;
	margin: 0 auto;
	display: block;
	filter: drop-shadow(0 0 40px rgba(168, 85, 247, 0.42));
}

/* live status line under the buttons */
.void-hero .void-statusline {
	margin-top: 1.9rem;
	font-family: var(--void-font-mono);
	font-size: 0.82rem;
	color: var(--void-dim);
	letter-spacing: 0.04em;
}

/* ==========================================================================
   8. Stats
   ========================================================================== */

.void-stats-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.void-stat {
	background: linear-gradient(180deg, var(--void-surface) 0%, var(--void-bg-alt) 100%);
	border: 1px solid var(--void-line);
	border-radius: var(--void-radius);
	padding: 1.5rem 1.4rem;
	position: relative;
	overflow: hidden;
}

.void-stat::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 2px;
	background: var(--void-gradient);
	opacity: 0.8;
}

.void-stat-value {
	display: block;
	font-family: var(--void-font-display);
	font-size: clamp(2rem, 4.6vw, 2.7rem);
	font-weight: 700;
	line-height: 1.05;
	letter-spacing: -0.03em;
	color: var(--void-heading);
	font-variant-numeric: tabular-nums;
}

.void-stat-label {
	display: block;
	margin-top: 0.4rem;
	font-family: var(--void-font-mono);
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--void-dim);
}

.void-stat-note {
	display: block;
	margin-top: 0.55rem;
	font-size: 0.82rem;
	color: var(--void-muted);
}

.void-live-dot {
	display: inline-block;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--void-ok);
	margin-right: 0.45em;
	vertical-align: 0.08em;
	box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.7);
	animation: void-pulse 2.6s ease-out infinite;
}

@keyframes void-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55); }
	70%  { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
	100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}

@media (prefers-reduced-motion: reduce) {
	.void-live-dot { animation: none; }
	.wp-block-button__link:hover { transform: none; }
}

/* ==========================================================================
   9. Game servers
   ========================================================================== */

.void-servers-head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem;
	margin-bottom: 2rem;
}

.void-servers-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.void-server {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	background: linear-gradient(180deg, var(--void-surface) 0%, var(--void-bg-alt) 100%);
	border: 1px solid var(--void-line);
	border-radius: var(--void-radius);
	transition: border-color 0.2s ease, transform 0.2s ease;
}

.void-server:hover {
	border-color: var(--void-accent-line);
	transform: translateY(-3px);
}

/* Bildfläche: Markenfarben, Raster und das V aus dem Logo. Die Geometrie kommt
   je Server aus Inline-Variablen, damit jede Karte anders aussieht, ohne dass
   irgendwo eine Bilddatei liegen muss. */
.void-cover {
	position: relative;
	height: 132px;
	overflow: hidden;
	background:
		radial-gradient(360px 180px at var(--glow-x, 50%) 118%, rgba(168, 85, 247, 0.34) 0%, rgba(168, 85, 247, 0) 72%),
		radial-gradient(320px 160px at 88% -30%, rgba(37, 99, 235, 0.26) 0%, rgba(37, 99, 235, 0) 70%),
		#0a0a12;
	border-bottom: 1px solid var(--void-line);
}

.void-cover::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(168, 85, 247, 0.16) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(168, 85, 247, 0.16) 1px, transparent 1px);
	background-size: 26px 26px;
	-webkit-mask-image: linear-gradient(to top, #000 10%, transparent 92%);
	mask-image: linear-gradient(to top, #000 10%, transparent 92%);
}

.void-motif {
	position: absolute;
	left: var(--motif-x, 60%);
	/* Unten aus der Fläche laufen lassen: dort ist eine saubere Kante, oben
	   würde der Anschnitt durch die Arme des V gehen und wie ein Fehler wirken.
	   Der Mittelpunkt liegt tief genug, dass auch die durch die Drehung
	   gewachsene Bounding-Box oben nicht anstößt — bei 12 Grad sind das aus
	   88px Höhe schon rund 108px. */
	top: 70%;
	width: 104px;
	height: 88px;
	transform: translate(-50%, -50%) rotate(var(--motif-rot, 0deg)) scale(var(--motif-scale, 1));
	background: var(--void-gradient);
	clip-path: polygon(
		0% 0%, 26% 0%, 50% 58%, 74% 0%, 100% 0%, 50% 100%
	);
	opacity: 0.32;
	transition: opacity 0.2s ease;
}

.void-server:hover .void-motif {
	opacity: 0.48;
}

/* Kopfzeile sitzt auf der Bildfläche auf, die Kachel überlappt deren Kante.
   Wird von Server- und Dienstekarten gleichermaßen benutzt. */
.void-cover-head {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	padding: 0 1.3rem 1.3rem;
	margin-top: -21px;
	position: relative;
}

.void-glyph {
	flex: none;
	width: 42px;
	height: 42px;
	display: grid;
	place-items: center;
	border-radius: 12px;
	background: var(--void-gradient);
	border: 3px solid var(--void-bg-alt);
	color: #fff;
	font-family: var(--void-font-display);
	font-size: 1.15rem;
	font-weight: 700;
	line-height: 1;
	box-shadow: 0 8px 22px -12px rgba(168, 85, 247, 0.95);
}

.void-server-ident {
	min-width: 0;
	flex: 1 1 auto;
	padding-top: 20px;
}

.void-server-name {
	display: block;
	font-family: var(--void-font-display);
	font-weight: 600;
	font-size: 1.02rem;
	line-height: 1.25;
	color: var(--void-heading);
	overflow-wrap: anywhere;
}

.void-server-game {
	display: block;
	margin-top: 0.15rem;
	font-family: var(--void-font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--void-dim);
}

.void-cover-head .void-badge {
	align-self: flex-end;
}

@media (prefers-reduced-motion: reduce) {
	.void-server:hover { transform: none; }
}

/* Empty / on-demand state */
.void-servers-empty {
	border: 1px dashed var(--void-line-strong);
	border-radius: var(--void-radius);
	padding: 2rem 1.6rem;
	text-align: center;
	color: var(--void-muted);
	background: rgba(168, 85, 247, 0.04);
}

.void-servers-note {
	margin-top: 1.4rem;
	font-size: 0.92rem;
	color: var(--void-muted);
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
}

.void-servers-note code {
	background: var(--void-surface-2);
	border: 1px solid var(--void-line);
	padding: 0.1em 0.45em;
	font-size: 0.86em;
}

/* ==========================================================================
   10. About / Säulen
   ========================================================================== */

.void-about-text {
	max-width: 68ch;
}

.void-pillars {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem;
	margin: clamp(2.2rem, 5vw, 3.2rem) 0 0;
	padding: 0;
	list-style: none;
}

.void-pillar {
	background: var(--void-surface);
	border: 1px solid var(--void-line);
	border-radius: var(--void-radius);
	padding: 1.5rem 1.4rem;
	transition: border-color 0.18s ease, transform 0.18s ease;
}

.void-pillar:hover {
	border-color: var(--void-accent-line);
	transform: translateY(-2px);
}

.void-pillar h3 {
	margin: 0 0 0.5rem;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.void-pillar p {
	margin: 0;
	font-size: 0.93rem;
	color: var(--void-muted);
}

.void-pillar-mark {
	display: block;
	width: 26px;
	height: 3px;
	border-radius: 2px;
	background: var(--void-gradient);
	margin-bottom: 1rem;
}

/* ==========================================================================
   11. Join / CTA panel
   ========================================================================== */

.void-join-panel {
	position: relative;
	border: 1px solid var(--void-accent-line);
	border-radius: 20px;
	padding: clamp(2.2rem, 5vw, 3.4rem);
	text-align: center;
	overflow: hidden;
	background:
		radial-gradient(620px 300px at 50% 0%, rgba(124, 58, 237, 0.22) 0%, transparent 72%),
		var(--void-surface);
}

.void-join-panel h2 {
	margin-top: 0;
}

.void-join-panel .wp-block-buttons {
	justify-content: center;
	margin-top: 1.8rem;
}

.void-join-panel .void-lead {
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================================================
   12. Footer
   ========================================================================== */

#colophon,
.site-footer,
.site-top-footer-wrap,
.site-middle-footer-wrap,
.site-bottom-footer-wrap {
	background: var(--void-bg-alt);
	color: var(--void-muted);
	border-top: 1px solid var(--void-line);
}

#colophon a,
.site-footer a {
	color: var(--void-muted);
	text-decoration: none;
}
#colophon a:hover,
.site-footer a:hover {
	color: var(--void-accent);
}

.site-footer .widget-title,
#colophon h2,
#colophon h3 {
	font-family: var(--void-font-display);
	font-size: 0.78rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--void-dim);
}

.footer-html,
.site-bottom-footer-inner-wrap {
	font-size: 0.88rem;
}

/* ==========================================================================
   13. Forms, cards, misc Kadence bits
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="password"],
input[type="number"],
textarea,
select {
	background: var(--void-surface);
	border: 1px solid var(--void-line-strong);
	color: var(--void-text);
	border-radius: var(--void-radius-sm);
}

input::placeholder,
textarea::placeholder { color: var(--void-dim); }

input:focus,
textarea:focus,
select:focus {
	border-color: var(--void-accent);
	box-shadow: 0 0 0 3px var(--void-accent-soft);
}

.entry.loop-entry,
.entry-content-wrap,
.comment-body,
.wp-block-table td,
.wp-block-table th {
	border-color: var(--void-line);
}

.entry.loop-entry {
	background: var(--void-surface);
	border: 1px solid var(--void-line);
	border-radius: var(--void-radius);
}

blockquote {
	border-left: 3px solid var(--void-accent);
	background: var(--void-surface);
	border-radius: 0 var(--void-radius-sm) var(--void-radius-sm) 0;
	color: var(--void-text);
}

.wp-block-separator {
	border-color: var(--void-line);
	color: var(--void-line);
}

/* Scroll-to-top */
#kt-scroll-up {
	background: var(--void-surface);
	border: 1px solid var(--void-line-strong);
	color: var(--void-text);
}
#kt-scroll-up:hover {
	background: var(--void-accent);
	color: #fff;
}

/* Skip link */
.skip-link:focus {
	background: var(--void-accent);
	color: #fff;
}

/* ==========================================================================
   14. Layout helpers
   ========================================================================== */

.void-shell {
	width: min(var(--void-shell), 100%);
	margin-inline: auto;
}

.void-split {
	gap: clamp(1.6rem, 4vw, 3.2rem);
	align-items: flex-start;
}

.void-split > .wp-block-column > :first-child {
	margin-top: 0;
}

@media (max-width: 860px) {
	.void-servers-head { align-items: flex-start; }
}

/* Front page runs edge-to-edge: strip Kadence's page padding/title area.
   Kadence pairs that padding with a negative margin on .entry — without the
   padding the negative margin drags the content off-screen, so it goes too. */
.page-template-void-front .entry-content-wrap,
.page-template-void-front .content-container {
	padding: 0 !important;
	max-width: none;
}

.page-template-void-front .entry,
.page-template-void-front .content-bg {
	margin-left: 0 !important;
	margin-right: 0 !important;
}

/* ==========================================================================
   15. Front page chrome
   ========================================================================== */

/* No "Start" page title above the hero. */
.page-template-void-front .entry-hero-container-inner,
.page-template-void-front .entry-header,
.page-template-void-front .page-title,
.page-template-void-front .entry-title {
	display: none;
}

.page-template-void-front .entry-hero,
.page-template-void-front #inner-wrap > .entry-hero-container-inner {
	display: none;
}

/* Kadence hält mit diesem margin Abstand zum Titelbereich — ohne Titel ist er Leerraum. */
.page-template-void-front #primary,
.page-template-void-front .content-area {
	margin-top: 0 !important;
}

/* Site title next to the mark */
.site-title,
.site-branding .site-title a {
	font-family: var(--void-font-display);
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--void-heading);
	font-size: 1.15rem;
}

.site-branding .site-description {
	color: var(--void-dim);
	font-size: 0.78rem;
}

/* Discord entry in the main nav renders as the header CTA */
.header-navigation li.void-menu-cta > a,
#mobile-drawer li.void-menu-cta > a {
	background-image: var(--void-gradient);
	color: #fff !important;
	border-radius: 999px;
	padding: 0.5em 1.15em;
	margin-left: 0.5rem;
	box-shadow: 0 6px 20px -12px rgba(168, 85, 247, 0.9);
}

.header-navigation li.void-menu-cta > a:hover {
	color: #fff !important;
	filter: brightness(1.08);
}

.header-navigation li.void-menu-cta > a::after {
	display: none !important;
}

/* Im mobilen Drawer als volle Zeile statt als eingerückte Pille */
#mobile-drawer li.void-menu-cta {
	border: 0 !important;
	margin-top: 0.6rem;
}

#mobile-drawer li.void-menu-cta > a {
	margin-left: 0;
	text-align: center;
	justify-content: center;
	padding: 0.8em 1.15em;
}

/* ==========================================================================
   16. Footer rows
   ========================================================================== */

/* Copyright und Rechtslinks sitzen in derselben Footer-Spalte. Kadence setzt
   justify-content auf der Zeile selbst, also muss die Verteilung eine Ebene
   tiefer passieren — sonst kleben beide links zusammen. */
#colophon .site-footer-bottom-section-1 {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem 2rem;
	width: 100%;
}

/* Kadence gibt dem HTML-Widget einen vertikalen Rand, der es gegen die
   Navigation um ein paar Pixel versetzt. */
#colophon .site-info,
#colophon .footer-navigation-wrap,
#colophon .footer-html,
#colophon .footer-html-inner p {
	margin: 0;
}

#colophon .site-info,
#colophon .footer-navigation-wrap {
	align-items: center;
}

@media (max-width: 600px) {
	#colophon .site-footer-bottom-section-1 {
		justify-content: center;
		text-align: center;
	}
	#colophon .footer-navigation ul {
		justify-content: center;
	}
}

.site-footer .footer-navigation ul,
#colophon .footer-navigation ul {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.4rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer .footer-navigation li a {
	font-size: 0.86rem;
}

#colophon .site-footer-section {
	margin: 0;
}

/* Textual stat values ("on demand") must not shout like a headline number. */
.void-stat-value.is-text {
	font-size: clamp(1.15rem, 2.1vw, 1.5rem);
	line-height: 1.35;
	letter-spacing: -0.01em;
	display: inline-block;
	padding-top: 0.5rem;
}

/* ==========================================================================
   17. Innenseiten (Impressum, Datenschutz, Beiträge)
   ========================================================================== */

/* Volle Kadence-Breite ergibt bei reinem Fließtext ~115 Zeichen pro Zeile. */
body:not(.page-template-void-front) .entry-content {
	max-width: 76ch;
	margin-inline: auto;
}

body:not(.page-template-void-front) .entry-content > h2 {
	margin-top: 2.6rem;
}

body:not(.page-template-void-front) .entry-hero-container-inner {
	padding-block: clamp(2.25rem, 5vw, 3.25rem) !important;
	min-height: 0 !important;
}

/* Kadence' Standardabstand unter dem Titelbereich ist für Blogeinträge gedacht. */
body:not(.page-template-void-front) #primary,
body:not(.page-template-void-front) .content-area {
	margin-top: clamp(2rem, 4vw, 3rem) !important;
}

/* ==========================================================================
   18. Unterseiten-Kopf (Kadence-Titelbereich im VOID-Look)
   ========================================================================== */

body:not(.page-template-void-front) .entry-hero-container-inner {
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(1400px 520px at 50% -30%, rgba(124, 58, 237, 0.30) 0%, rgba(124, 58, 237, 0) 70%),
		radial-gradient(760px 340px at 82% 120%, rgba(37, 99, 235, 0.16) 0%, rgba(37, 99, 235, 0) 72%),
		var(--void-bg);
	border-bottom: 1px solid var(--void-line);
}

body:not(.page-template-void-front) .entry-hero-container-inner::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(168, 85, 247, 0.09) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(168, 85, 247, 0.09) 1px, transparent 1px);
	background-size: 62px 62px;
	-webkit-mask-image: radial-gradient(900px 300px at 50% 45%, #000 0%, transparent 80%);
	mask-image: radial-gradient(900px 300px at 50% 45%, #000 0%, transparent 80%);
	pointer-events: none;
}

body:not(.page-template-void-front) .entry-hero-container-inner > * {
	position: relative;
	z-index: 1;
}

body:not(.page-template-void-front) .entry-hero .entry-title {
	font-size: clamp(2rem, 4.6vw, 3rem);
	letter-spacing: -0.03em;
}

/* ==========================================================================
   19. Karten-Raster (Säulen, Teaser, Events)
   ========================================================================== */

.void-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1rem;
	margin: clamp(2rem, 4vw, 2.8rem) 0 0;
	padding: 0;
	list-style: none;
}

.void-cards.is-three {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.void-card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	background: var(--void-surface);
	border: 1px solid var(--void-line);
	border-radius: var(--void-radius);
	padding: 1.6rem 1.5rem;
	transition: border-color 0.18s ease, transform 0.18s ease;
}

.void-card:hover {
	border-color: var(--void-accent-line);
	transform: translateY(-2px);
}

.void-card h3 {
	margin: 0;
	font-size: 1.1rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.void-card p {
	margin: 0;
	font-size: 0.93rem;
	color: var(--void-muted);
}

/* Ganze Karte klickbar, ohne den Link aus dem Textfluss zu reißen */
.void-card-link::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}

.void-card-more {
	margin-top: auto;
	padding-top: 0.9rem;
	font-family: var(--void-font-display);
	font-size: 0.88rem;
	font-weight: 600;
	color: var(--void-accent);
}

.void-card-more::after {
	content: " →";
}

.void-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-top: 0.4rem;
	padding: 0;
	list-style: none;
}

.void-chips li {
	font-family: var(--void-font-mono);
	font-size: 0.68rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--void-dim);
	border: 1px solid var(--void-line-strong);
	border-radius: 999px;
	padding: 0.28em 0.7em;
}

/* ==========================================================================
   20. Zeitleiste
   ========================================================================== */

.void-timeline {
	position: relative;
	margin: clamp(2rem, 4vw, 2.8rem) 0 0;
	padding: 0 0 0 2.1rem;
	list-style: none;
}

.void-timeline::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 0.6rem;
	bottom: 0.6rem;
	width: 1px;
	background: linear-gradient(to bottom, var(--void-accent), var(--void-accent-2), transparent);
}

.void-timeline li {
	position: relative;
	padding-bottom: 1.9rem;
}

.void-timeline li:last-child {
	padding-bottom: 0;
}

.void-timeline li::before {
	content: "";
	position: absolute;
	left: -2.1rem;
	top: 0.5rem;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: var(--void-bg);
	border: 2px solid var(--void-accent);
}

.void-timeline .void-year {
	display: block;
	font-family: var(--void-font-mono);
	font-size: 0.74rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--void-accent);
	margin-bottom: 0.2rem;
}

.void-timeline h3 {
	margin: 0 0 0.35rem;
	font-size: 1.05rem;
	font-weight: 600;
}

.void-timeline p {
	margin: 0;
	font-size: 0.93rem;
	color: var(--void-muted);
	max-width: 62ch;
}

/* ==========================================================================
   21. Kompakte Merkmal-Liste ("Was dich erwartet")
   ========================================================================== */

.void-perks {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 0.9rem 1.8rem;
	margin: clamp(2rem, 4vw, 2.6rem) 0 0;
	padding: 0;
	list-style: none;
}

.void-perks li {
	border-top: 1px solid var(--void-line);
	padding-top: 0.9rem;
}

.void-perks strong {
	display: block;
	font-family: var(--void-font-display);
	font-weight: 600;
	font-size: 0.98rem;
	color: var(--void-heading);
	margin-bottom: 0.2rem;
}

.void-perks span {
	font-size: 0.9rem;
	color: var(--void-muted);
}

/* Unterseiten dürfen breiter werden, wenn Karten statt Fließtext drin stehen */
body:not(.page-template-void-front) .entry-content:has(.void-cards),
body:not(.page-template-void-front) .entry-content:has(.void-perks),
body:not(.page-template-void-front) .entry-content:has(.void-servers-grid),
body:not(.page-template-void-front) .entry-content:has(.void-stats-grid),
body:not(.page-template-void-front) .entry-content:has(.void-servers-empty) {
	max-width: var(--void-shell);
}

/* Karten dürfen die volle Breite nutzen, Fließtext nicht — sonst stehen auf einer
   Seite 62-Zeichen-Absätze neben 115-Zeichen-Absätzen. */
body:not(.page-template-void-front) .entry-content > p,
body:not(.page-template-void-front) .entry-content > h2,
body:not(.page-template-void-front) .entry-content > h3,
body:not(.page-template-void-front) .entry-content > ul:not([class]),
body:not(.page-template-void-front) .entry-content > ol:not([class]) {
	max-width: 72ch;
}

/* ==========================================================================
   22. 404
   ========================================================================== */

.void-404 {
	margin-top: 0 !important;
	padding: clamp(3.5rem, 9vw, 7rem) var(--void-gutter) clamp(4rem, 10vw, 7rem);
	position: relative;
	overflow: hidden;
	background:
		radial-gradient(1100px 460px at 50% -25%, rgba(124, 58, 237, 0.26) 0%, rgba(124, 58, 237, 0) 70%),
		var(--void-bg);
}

.void-404::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(to right, rgba(168, 85, 247, 0.09) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(168, 85, 247, 0.09) 1px, transparent 1px);
	background-size: 62px 62px;
	-webkit-mask-image: radial-gradient(820px 380px at 50% 30%, #000 0%, transparent 78%);
	mask-image: radial-gradient(820px 380px at 50% 30%, #000 0%, transparent 78%);
	pointer-events: none;
}

.void-404-inner {
	position: relative;
	z-index: 1;
	width: min(640px, 100%);
	margin-inline: auto;
	text-align: center;
}

.void-404 .void-kicker {
	margin-bottom: 0.4rem;
}

.void-404-code {
	font-family: var(--void-font-display);
	font-size: clamp(5rem, 17vw, 9.5rem);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.06em;
	margin: 0 0 0.6rem;
	background: var(--void-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	opacity: 0.9;
}

.void-404-title {
	font-size: clamp(1.5rem, 3.6vw, 2.2rem);
	margin: 0 0 1rem;
	text-wrap: balance;
}

.void-404 .void-lead {
	margin-inline: auto;
}

.void-404-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.5rem 0.4rem;
	margin: 1.8rem 0 0;
	padding: 0;
	list-style: none;
}

.void-404-links a {
	display: inline-block;
	font-family: var(--void-font-display);
	font-size: 0.88rem;
	font-weight: 500;
	color: var(--void-text);
	text-decoration: none;
	border: 1px solid var(--void-line-strong);
	border-radius: 999px;
	padding: 0.42em 1em;
	transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.void-404-links a:hover {
	border-color: var(--void-accent);
	background: var(--void-accent-soft);
	color: #fff;
}

/* Im PHP-Template fehlt die is-layout-flex-Klasse, die Core beim Rendern von
   Block-Markup ergänzt — display:flex muss deshalb von Hand kommen. */
.void-404-actions {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 0.9rem;
	margin-top: 2.1rem;
}

@media (max-width: 420px) {
	.void-404-actions .wp-block-button { width: 100%; }
	.void-404-actions .wp-block-button__link { display: block; text-align: center; }
}

/* ==========================================================================
   23. Dienste-Karten
   ========================================================================== */

.void-card h3 a {
	color: inherit;
	text-decoration: none;
}

.void-card:hover h3 a {
	color: var(--void-accent);
}

/* Hinweis unter einer Kartengruppe, z. B. zur Fremdmarke eines Dienstes. */
.void-note {
	margin-top: 1.4rem;
	padding: 1rem 1.2rem;
	border-left: 2px solid var(--void-accent-line);
	background: rgba(168, 85, 247, 0.05);
	border-radius: 0 var(--void-radius-sm) var(--void-radius-sm) 0;
	font-size: 0.92rem;
	color: var(--void-muted);
	max-width: 72ch;
}

.void-note strong {
	color: var(--void-text);
}

/* ==========================================================================
   24. Regeln
   ========================================================================== */

.void-rules {
	counter-reset: voidrule;
	list-style: none;
	margin: clamp(2rem, 4vw, 2.6rem) 0 0;
	padding: 0;
	display: grid;
	gap: 0.9rem;
}

.void-rules > li {
	counter-increment: voidrule;
	position: relative;
	background: var(--void-surface);
	border: 1px solid var(--void-line);
	border-radius: var(--void-radius);
	padding: 1.35rem 1.4rem 1.35rem 4.1rem;
}

.void-rules > li::before {
	content: counter(voidrule);
	position: absolute;
	left: 1.3rem;
	top: 1.25rem;
	width: 1.9rem;
	height: 1.9rem;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--void-accent-soft);
	border: 1px solid var(--void-accent-line);
	font-family: var(--void-font-mono);
	font-size: 0.8rem;
	color: var(--void-accent);
}

.void-rules h3 {
	margin: 0 0 0.4rem;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.void-rules p {
	margin: 0;
	font-size: 0.95rem;
	color: var(--void-muted);
	max-width: 68ch;
}

.void-rules p + p {
	margin-top: 0.35rem;
}

@media (max-width: 480px) {
	.void-rules > li {
		padding: 3.4rem 1.2rem 1.3rem;
	}
	.void-rules > li::before {
		top: 1.2rem;
		left: 1.2rem;
	}
}

/* ==========================================================================
   25. FAQ
   ========================================================================== */

.void-faq {
	margin: clamp(2rem, 4vw, 2.6rem) 0 0;
	max-width: 76ch;
}

.void-faq > div {
	padding: 1.5rem 0;
	border-top: 1px solid var(--void-line);
}

.void-faq > div:last-child {
	border-bottom: 1px solid var(--void-line);
}

.void-faq h3 {
	margin: 0 0 0.55rem;
	font-size: 1.08rem;
	font-weight: 600;
	letter-spacing: -0.01em;
}

.void-faq p {
	margin: 0;
	color: var(--void-muted);
	font-size: 0.97rem;
}

.void-faq p + p {
	margin-top: 0.6rem;
}

/* ==========================================================================
   26. Karten mit Bildfläche
   ========================================================================== */

.void-card.has-cover {
	padding: 0;
	overflow: hidden;
	gap: 0;
	background: linear-gradient(180deg, var(--void-surface) 0%, var(--void-bg-alt) 100%);
}

.void-card.has-cover > p {
	padding: 0 1.3rem 1.4rem;
}

.void-card.has-cover .void-cover-head {
	padding-bottom: 0.9rem;
}

.void-card.has-cover h3 {
	flex: 1 1 auto;
	min-width: 0;
	/* Hält den Titel unterhalb der Bildkante, während die Monogramm-Kachel
	   bewusst auf ihr aufsitzt. */
	padding-top: 13px;
	margin: 0;
	font-size: 1.02rem;
	overflow-wrap: anywhere;
}

.void-card.has-cover:hover .void-motif {
	opacity: 0.48;
}

/* Motiv-Variante: statt des V das Kürzel des Dienstes. Bei den Server-Karten
   bleibt das V, weil dort jedes Spiel anders heißt und ein Buchstabe nichts
   erklären würde. */
.void-motif.is-letter {
	width: auto;
	height: auto;
	clip-path: none;
	background: var(--void-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	font-family: var(--void-font-display);
	font-size: 124px;
	font-weight: 700;
	line-height: 0.8;
	letter-spacing: -0.04em;
	user-select: none;
}

/* ==========================================================================
   27. Untermenü
   ========================================================================== */

/* Kadence faerbt Dropdown-Links per Inline-CSS mit var(--global-palette8).
   In einer hellen Palette ist das ein heller Text auf dunklem Panel; in unserer
   dunklen Palette ist Palette 8 eine HINTERGRUNDfarbe — das Ergebnis war
   unsichtbarer Text auf gleichfarbigem Grund. Die ID sticht die Inline-Regel. */
#masthead .header-navigation .header-menu-container ul ul li.menu-item > a {
	color: var(--void-text);
	font-size: 0.9rem;
}

/* Kadence hinterlegt den aktiven Dropdown-Eintrag ausserdem mit einer
   Palettenfarbe, die hier fast weiss ist — zusammen mit weisser Schrift war der
   Eintrag genau auf der Seite unsichtbar, auf der man gerade steht. */
#masthead .header-navigation .header-menu-container ul ul li.menu-item > a:hover,
#masthead .header-navigation .header-menu-container ul ul li.menu-item.current-menu-item > a {
	background: var(--void-accent-soft);
	color: #fff;
}

/* Desktop-Dropdown */
.header-navigation .sub-menu {
	min-width: 200px;
	padding: 0.4rem;
	border-radius: var(--void-radius-sm);
	box-shadow: 0 18px 40px -22px rgba(0, 0, 0, 0.9);
}

.header-navigation .sub-menu li a {
	border-radius: 8px;
	padding: 0.55em 0.8em;
	font-size: 0.9rem;
}

.header-navigation .sub-menu li a:hover {
	background: var(--void-accent-soft);
	color: #fff;
}

/* Mobiler Drawer: Kadence klappt Unterpunkte per display:none weg und blendet
   sie nur über einen Aufklapp-Knopf ein. Auf einem Drawer mit sechs Einträgen
   ist das unnötige Interaktion — dort ist Platz, also stehen sie offen da. */
#mobile-drawer .sub-menu {
	display: block;
	padding-left: 0.9rem;
	border-left: 1px solid var(--void-line);
	margin: 0.2rem 0 0.4rem 0.4rem;
}

#mobile-drawer .sub-menu li a {
	font-size: 0.92rem;
	color: var(--void-muted);
}

#mobile-drawer .sub-menu li a:hover {
	color: var(--void-accent);
}

/* Der Aufklapp-Knopf hat damit keine Funktion mehr. */
#mobile-drawer .drawer-sub-toggle {
	display: none;
}