.kkk-hero {
	position: relative;
	min-height: min(100vh, 56rem);
	display: grid;
	align-items: center;
	overflow: hidden;
	isolation: isolate;
}

.kkk-hero__bg {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, transparent 35%, var(--kkk-bg) 92%),
		radial-gradient(circle at 50% 35%, var(--kkk-camo-c), transparent 55%),
		linear-gradient(120deg, var(--kkk-camo-a), transparent 45%);
}

.kkk-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: 0.35;
	background-image:
		repeating-linear-gradient(
			45deg,
			transparent 0 14px,
			rgba(0, 0, 0, 0.04) 14px 15px
		),
		repeating-linear-gradient(
			-45deg,
			transparent 0 18px,
			rgba(255, 255, 255, 0.02) 18px 19px
		);
	pointer-events: none;
}

.kkk-hero__inner {
	width: min(1400px, calc(100% - 2rem));
	margin: 0 auto;
	padding: 5.5rem 0 3.5rem;
	display: grid;
	gap: 2rem;
	justify-items: center;
	text-align: center;
}

.kkk-hero__logo-wrap {
	position: relative;
	width: min(280px, 58vw);
	aspect-ratio: 1;
}

.kkk-hero__logo {
	width: 100%;
	height: 100%;
	object-fit: contain;
	filter: var(--kkk-logo-filter) drop-shadow(0 12px 28px rgba(0, 0, 0, 0.35));
	transform-origin: center;
}

.kkk-hero__weather {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 4;
	opacity: 0.88;
}

.kkk-hero__weather-stage {
	position: relative;
	z-index: 5;
	display: grid;
	gap: 2rem;
	justify-items: center;
	width: 100%;
}

.kkk-hero__weather-stage > .kkk-hero__logo-wrap,
.kkk-hero__weather-stage > .kkk-hero__brand {
	position: relative;
	z-index: 1;
}

.kkk-hero__brand {
	width: 100%;
	max-width: none;
}

.kkk-hero__title {
	position: relative;
	z-index: 1;
	font-size: clamp(1.85rem, 6.2vw + 0.35rem, 4.4rem);
	margin: 0 0 0.35rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	max-width: 100%;
	overflow-wrap: anywhere;
}

/* Einzeiler erst ab ausreichend Breite, sonst kein Abschneiden rechts */
@media (min-width: 640px) {
	.kkk-hero__title {
		white-space: nowrap;
		overflow-wrap: normal;
	}
}

/* Seiten-h1: volle Breite, dezenter Effektband */
.kkk-title-stage {
	position: relative;
	display: block;
	width: 100%;
	max-width: none;
	box-sizing: border-box;
}

.kkk-title-stage > h1 {
	position: relative;
	z-index: 1;
}

.kkk-title-weather {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	max-width: none;
	pointer-events: none;
	z-index: 2;
	opacity: 0.72;
}

.kkk-hero__tagline {
	margin: 0 0 1rem;
	font-size: 1.05rem;
	color: var(--kkk-text-muted);
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.kkk-hero__lead {
	margin: 0 auto 1.5rem;
	max-width: 40rem;
	color: var(--kkk-text);
	font-size: 1.1rem;
}

.kkk-hero__cta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

.kkk-section {
	width: min(1200px, calc(100% - 2.5rem));
	margin: 0 auto;
	padding: 2.5rem 0;
}

.kkk-section__title {
	font-size: clamp(1.6rem, 3vw, 2.2rem);
	margin-bottom: 0.4rem;
}

.kkk-section__lead {
	color: var(--kkk-text-muted);
	max-width: none;
	margin-bottom: 1.5rem;
}

/* --- Startseite: beliebte Spiele --- */
.kkk-home-games {
	animation: kkk-fade-up 0.45s ease both;
}

.kkk-home-games .kkk-eyebrow {
	margin-bottom: 0.35rem;
}

.kkk-home-games__title {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.kkk-home-games__title-icon {
	flex: 0 0 auto;
	width: 1.05em;
	height: 1.05em;
	color: var(--kkk-accent-strong);
}

.kkk-home-games__title > span {
	min-width: 0;
}

.kkk-home-games__row {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: flex-start;
	gap: 1rem 1.15rem;
}

.kkk-home-games__item {
	flex: 0 0 auto;
	width: 6.15rem;
	opacity: 0;
	transform: translateY(0.55rem) scale(0.94);
	animation: kkk-home-game-in 0.5s cubic-bezier(0.18, 0.9, 0.22, 1) both;
	animation-delay: var(--kkk-reveal-delay, 0ms);
}

@keyframes kkk-home-game-in {
	to {
		opacity: 1;
		transform: none;
	}
}

.kkk-home-games__btn {
	appearance: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.45rem;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: center;
	cursor: pointer;
}

.kkk-home-games__btn:focus-visible {
	outline: 2px solid var(--kkk-focus);
	outline-offset: 4px;
}

.kkk-home-games__icon {
	position: relative;
	display: grid;
	place-items: center;
	width: 100%;
	aspect-ratio: 2 / 3;
	border-radius: 0.2rem;
	border: 1px solid var(--kkk-border-strong);
	background:
		linear-gradient(160deg, rgba(255, 255, 255, 0.1), transparent 45%),
		var(--kkk-bg-elevated);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 8px 18px rgba(0, 0, 0, 0.2);
	overflow: hidden;
	transition:
		transform 0.28s ease,
		border-color 0.28s ease,
		box-shadow 0.28s ease;
}

.kkk-home-games__icon::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0.12), transparent 38%, rgba(0, 0, 0, 0.22));
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.28s ease;
}

.kkk-home-games__icon img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	border-radius: inherit;
	transition: transform 0.35s ease, filter 0.35s ease;
}

.kkk-home-games__btn:hover .kkk-home-games__icon,
.kkk-home-games__btn:focus-visible .kkk-home-games__icon {
	transform: translateY(-3px) scale(1.06);
	border-color: var(--kkk-accent);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.1),
		0 14px 28px rgba(0, 0, 0, 0.28),
		0 0 0 3px var(--kkk-accent-dim);
}

.kkk-home-games__btn:hover .kkk-home-games__icon::after,
.kkk-home-games__btn:focus-visible .kkk-home-games__icon::after {
	opacity: 0.25;
}

.kkk-home-games__btn:hover .kkk-home-games__icon img,
.kkk-home-games__btn:focus-visible .kkk-home-games__icon img {
	transform: scale(1.08);
	filter: saturate(1.12) contrast(1.04);
}

.kkk-home-games__meta {
	display: flex;
	flex-direction: column;
	gap: 0.12rem;
	min-width: 0;
	width: 100%;
}

.kkk-home-games__name {
	font-size: 0.78rem;
	line-height: 1.25;
	color: var(--kkk-heading);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
}

.kkk-home-games__time {
	font-size: 0.72rem;
	font-weight: 650;
	line-height: 1.2;
	color: var(--kkk-accent-strong);
}

@media (max-width: 560px) {
	.kkk-home-games__row {
		gap: 0.85rem 0.7rem;
	}

	.kkk-home-games__item {
		width: 5.25rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kkk-home-games,
	.kkk-home-games__item,
	.kkk-home-games__icon,
	.kkk-home-games__icon img {
		animation: none;
		transition: none;
	}

	.kkk-home-games__item {
		opacity: 1;
		transform: none;
	}

	.kkk-home-games__btn:hover .kkk-home-games__icon,
	.kkk-home-games__btn:focus-visible .kkk-home-games__icon,
	.kkk-home-games__btn:hover .kkk-home-games__icon img,
	.kkk-home-games__btn:focus-visible .kkk-home-games__icon img {
		transform: none;
	}
}

/* --- Startseite: aktuelle Videos --- */
.kkk-home-videos {
	animation: kkk-fade-up 0.45s ease both;
	animation-delay: 0.05s;
}

.kkk-home-videos .kkk-eyebrow {
	margin-bottom: 0.35rem;
}

.kkk-home-videos__title {
	display: flex;
	align-items: center;
	gap: 0.55rem;
}

.kkk-home-videos__title-icon {
	flex: 0 0 auto;
	width: 1.05em;
	height: 1.05em;
	color: var(--kkk-accent-strong);
}

.kkk-home-videos__title > span {
	min-width: 0;
}

.kkk-home-videos__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1rem 1.1rem;
	align-items: stretch;
}

.kkk-home-videos__item {
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	opacity: 0;
	transform: translateY(0.55rem);
	animation: kkk-home-video-in 0.5s cubic-bezier(0.18, 0.9, 0.22, 1) both;
	animation-delay: var(--kkk-reveal-delay, 0ms);
}

@keyframes kkk-home-video-in {
	to {
		opacity: 1;
		transform: none;
	}
}

.kkk-home-videos__slot {
	margin: 0;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 0.92rem;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kkk-text-muted);
}

.kkk-home-videos__item .kkk-gallery__tile {
	flex: 1 1 auto;
	height: 100%;
}

.kkk-home-videos .kkk-gallery__media {
	aspect-ratio: 16 / 9;
}

.kkk-home-videos .kkk-gallery__media > img {
	opacity: 1;
	transform: none;
	filter: none;
}

.kkk-home-videos__more {
	margin: 1.15rem 0 0;
	text-align: center;
}

@media (max-width: 900px) {
	.kkk-home-videos__grid {
		grid-template-columns: 1fr;
		max-width: 26rem;
		margin-inline: auto;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kkk-home-videos,
	.kkk-home-videos__item {
		animation: none;
		opacity: 1;
		transform: none;
	}
}

/* --- Startseite: News + Termine --- */
.kkk-home-updates {
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
	animation: kkk-fade-up 0.45s ease both;
	animation-delay: 0.08s;
}

.kkk-home-updates__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
	gap: 0.9rem;
	align-items: stretch;
}

.kkk-home-updates__grid--single {
	grid-template-columns: 1fr;
}

.kkk-home-updates__panel {
	display: flex;
	flex-direction: column;
	min-width: 0;
	height: 100%;
	padding: 0.7rem 0.9rem 0.75rem;
	background: var(--kkk-surface);
	border: 1px solid var(--kkk-border);
	border-top: 3px solid var(--kkk-accent);
	box-shadow: var(--kkk-shadow);
}

.kkk-home-updates__head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	margin: 0 0 0.35rem;
}

.kkk-home-updates__head .kkk-eyebrow {
	margin: 0;
}

.kkk-home-updates__link {
	flex: 0 0 auto;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 0.88rem;
	font-weight: 650;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--kkk-accent-strong);
	white-space: nowrap;
}

.kkk-home-updates__link:hover {
	color: var(--kkk-heading);
}

.kkk-home-updates__title {
	display: flex;
	align-items: flex-start;
	gap: 0.45rem;
	margin: 0;
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.kkk-home-updates__icon {
	flex: 0 0 auto;
	width: 1.15em;
	height: 1.15em;
	margin-top: 0.06em;
	color: var(--kkk-accent-strong);
}

.kkk-home-updates__title a,
.kkk-home-updates__title > span {
	min-width: 0;
	flex: 1 1 auto;
}

.kkk-home-updates__title a {
	color: inherit;
	text-decoration: none;
}

.kkk-home-updates__title a:hover {
	color: var(--kkk-accent-strong);
}

.kkk-home-updates__meta {
	margin: 0.2rem 0 0;
	font-size: 0.82rem;
	color: var(--kkk-text-muted);
}

.kkk-home-updates__excerpt {
	margin: 0.4rem 0 0;
	flex: 1 1 auto;
	color: var(--kkk-text-muted);
	font-size: 0.92rem;
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 8;
	-webkit-box-orient: vertical;
	line-clamp: 8;
	overflow: hidden;
}

.kkk-home-updates__appointments {
	list-style: none;
	margin: 0.45rem 0 0;
	padding: 0;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}

.kkk-home-updates__appointment {
	display: grid;
	gap: 0.05rem 0.6rem;
	min-width: 0;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--kkk-border);
}

.kkk-home-updates__appointment:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.kkk-home-updates__when {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.3rem 0.5rem;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 0.88rem;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1.25;
	color: var(--kkk-heading);
}

.kkk-home-updates__type {
	font: inherit;
	letter-spacing: inherit;
	text-transform: none;
	color: var(--kkk-accent-strong);
}

.kkk-home-updates__appointment-title {
	min-width: 0;
	font-size: 0.92rem;
	line-height: 1.3;
	color: var(--kkk-heading);
}

.kkk-home-updates__appointment-title a {
	color: inherit;
	text-decoration: none;
}

.kkk-home-updates__appointment-title a:hover {
	color: var(--kkk-accent-strong);
}

.kkk-home-updates__subtitle {
	color: var(--kkk-text-muted);
	font-weight: 400;
}

@media (max-width: 820px) {
	.kkk-home-updates__grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kkk-home-updates {
		animation: none;
	}
}

.kkk-placeholder {
	position: relative;
	overflow: visible;
}

.kkk-placeholder__text {
	max-width: 36rem;
	color: var(--kkk-text-muted);
}

.kkk-placeholder__mark {
	position: absolute;
	right: -2rem;
	top: 0;
	width: min(220px, 40vw);
	aspect-ratio: 1;
	opacity: 0.08;
	background: url("../brand/logo.png") center / contain no-repeat;
	filter: var(--kkk-logo-filter);
	pointer-events: none;
}

.kkk-prose {
	max-width: 48rem;
}

.kkk-prose h2 {
	margin-top: 1.75rem;
	font-size: 1.45rem;
	text-transform: uppercase;
}

.kkk-prose ul {
	padding-left: 1.2rem;
}

.kkk-voice {
	margin: 0;
}

.kkk-voice__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
	align-items: stretch;
}

.kkk-voice__block {
	display: flex;
	flex-direction: column;
	min-width: 0;
	min-height: 0;
	padding: 1.1rem 1.1rem 1.15rem;
	background: var(--kkk-surface);
	border: 1px solid var(--kkk-border);
	border-top: 3px solid var(--kkk-accent);
	box-shadow: var(--kkk-shadow);
}

.kkk-voice__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1rem;
	margin: 0 0 0.95rem;
}

.kkk-voice__head-text {
	min-width: 0;
}

.kkk-voice__title {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0;
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.kkk-voice__icon {
	flex: 0 0 auto;
	width: 1.35em;
	height: 1.35em;
	color: var(--kkk-accent-strong);
}

.kkk-voice__title > span {
	min-width: 0;
}

.kkk-voice__hint {
	margin: 0.2rem 0 0;
	color: var(--kkk-text-muted);
	font-size: 0.88rem;
}

.kkk-voice__head .kkk-btn {
	flex: 0 0 auto;
}

.kkk-voice__widget {
	--kkk-voice-widget-height: 500px;
	position: relative;
	flex: 1 1 auto;
	width: 100%;
	min-height: var(--kkk-voice-widget-height);
	background: var(--kkk-bg-muted);
	border: 1px solid var(--kkk-border);
	overflow: hidden;
}

.kkk-voice__widget iframe {
	display: block;
	width: 100%;
	height: var(--kkk-voice-widget-height);
	border: 0;
	background: var(--kkk-bg-muted);
}

@media (max-width: 900px) {
	.kkk-voice__grid {
		grid-template-columns: 1fr;
	}

	.kkk-voice__widget {
		--kkk-voice-widget-height: 420px;
	}
}

.kkk-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* --- Pagination --- */
.kkk-pager {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.25rem;
}

.kkk-pager--bottom {
	justify-content: center;
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--kkk-border);
}

.kkk-pager__pages {
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem;
	align-items: center;
}

.kkk-pager__btn,
.kkk-pager__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.4rem;
	border: 1px solid var(--kkk-border);
	background: transparent;
	color: var(--kkk-text-muted);
	text-decoration: none;
	font-size: 0.9rem;
}

.kkk-pager__btn:hover,
.kkk-pager__page:hover {
	color: var(--kkk-heading);
	border-color: var(--kkk-border-strong);
	text-decoration: none;
}

.kkk-pager__page.is-current {
	color: var(--kkk-heading);
	border-color: var(--kkk-accent);
	background: var(--kkk-accent-dim);
}

.kkk-pager__btn.is-disabled {
	opacity: 0.4;
	cursor: default;
}

.kkk-pager__ellipsis {
	color: var(--kkk-text-muted);
	padding: 0 0.2rem;
}

/* --- News --- */
.kkk-news {
	animation: kkk-fade-up 0.45s ease both;
}

.kkk-news__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin: 0 0 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--kkk-border);
}

.kkk-news__intro {
	margin: 0;
	color: var(--kkk-text-muted);
}

.kkk-news__list {
	display: grid;
	gap: 1.75rem;
	min-width: 0;
}

.kkk-news__article {
	min-width: 0;
	max-width: 100%;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid var(--kkk-border);
}

.kkk-news__head {
	display: flex;
	gap: 1rem;
	align-items: flex-start;
	margin-bottom: 0.85rem;
}

.kkk-news__cat,
.kkk-news__cat-placeholder {
	flex: 0 0 3rem;
	width: 3rem;
	min-width: 3rem;
	height: 3rem;
	min-height: 3rem;
	object-fit: contain;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-bg-muted);
}

.kkk-news__meta {
	min-width: 0;
}

.kkk-news__title {
	margin: 0 0 0.25rem;
	font-size: clamp(1.35rem, 2.5vw, 1.75rem);
	text-transform: uppercase;
}

.kkk-news__title a {
	color: var(--kkk-heading);
	text-decoration: none;
}

.kkk-news__title a:hover {
	color: var(--kkk-accent-strong);
}

.kkk-news__info {
	margin: 0;
	color: var(--kkk-text-muted);
	font-size: 0.95rem;
}

.kkk-news__body {
	line-height: 1.6;
	overflow-wrap: anywhere;
	min-width: 0;
	max-width: 100%;
}

/* API-HTML bringt oft feste width/style – darf die Seite nicht aufblasen */
.kkk-news__body img,
.kkk-news__body video,
.kkk-news__body embed,
.kkk-news__body object {
	max-width: 100% !important;
	width: auto !important;
	height: auto !important;
	margin: 0.75rem 0;
}

.kkk-news__body iframe {
	display: block;
	max-width: 100% !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
	margin: 0.75rem 0;
	border: 0;
}

.kkk-news__body table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.kkk-news__body pre {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.kkk-news__footer {
	margin-top: 1rem;
}

.kkk-news__comment {
	font-family: "Barlow Condensed", sans-serif;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 600;
	text-decoration: none;
}

.kkk-news__empty,
.kkk-news__error,
.kkk-news__back {
	color: var(--kkk-text-muted);
}

.kkk-news__error {
	color: #c45c5c;
}

@keyframes kkk-fade-up {
	from { opacity: 0; transform: translateY(8px); }
	to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.kkk-news { animation: none; }
}

/* --- Forum --- */
.kkk-forum__category {
	margin: 1.75rem 0;
}

.kkk-forum__category-title {
	font-size: 1.35rem;
	text-transform: uppercase;
	margin-bottom: 0.75rem;
	padding-bottom: 0.4rem;
	border-bottom: 1px solid var(--kkk-border);
}

.kkk-forum__table {
	display: grid;
	gap: 0;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-surface);
}

.kkk-forum__row {
	display: grid;
	grid-template-columns: minmax(0, 2.2fr) 4.5rem 5rem minmax(7rem, 1fr);
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	border-top: 1px solid var(--kkk-border);
	align-items: start;
}

.kkk-forum__table--threads .kkk-forum__row {
	grid-template-columns: minmax(0, 2fr) 7rem 4rem 4.5rem minmax(7rem, 1fr);
}

.kkk-forum__row--head {
	border-top: 0;
	font-family: "Barlow Condensed", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.9rem;
	color: var(--kkk-text-muted);
	background: var(--kkk-bg-muted);
}

.kkk-forum__col--topics,
.kkk-forum__col--posts,
.kkk-forum__col--replies,
.kkk-forum__col--views {
	text-align: center;
	justify-self: center;
	align-self: center;
}

.kkk-forum__col--last,
.kkk-forum__col--author {
	text-align: center;
	align-self: center;
}

.kkk-forum__entry {
	display: flex;
	align-items: center;
	gap: 0.75rem;
}

.kkk-forum__entry-body {
	flex: 1 1 auto;
	min-width: 0;
}

.kkk-forum__stats-compact {
	display: none;
}

.kkk-forum__board-link {
	font-weight: 600;
	color: var(--kkk-heading);
	text-decoration: none;
}

.kkk-forum__board-link:hover {
	color: var(--kkk-accent-strong);
}

.kkk-forum__desc,
.kkk-forum__mods,
.kkk-forum__muted,
.kkk-forum__hint,
.kkk-forum__empty,
.kkk-forum__back {
	color: var(--kkk-text-muted);
	font-size: 0.92rem;
	margin: 0.25rem 0 0;
}

.kkk-forum__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	margin-bottom: 1rem;
}

.kkk-forum__badge {
	display: inline-block;
	margin-right: 0.35rem;
	padding: 0.1rem 0.45rem;
	border: 1px solid var(--kkk-border);
	border-radius: 999px;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	color: var(--kkk-text-muted);
	vertical-align: middle;
}

.kkk-forum__badge--sticky {
	border-color: var(--kkk-accent);
	color: var(--kkk-accent-strong);
}

.kkk-forum__badge--admin {
	border-color: #b87a20;
	color: #e0a84a;
}

.kkk-forum__badge--mod {
	border-color: #2a8fad;
	color: #4ec0e0;
}

.kkk-forum__posts {
	display: grid;
	gap: 1rem;
	margin: 1rem 0 1.5rem;
	min-width: 0;
	max-width: 100%;
}

.kkk-forum__post {
	display: grid;
	grid-template-columns: 10rem minmax(0, 1fr);
	gap: 1rem;
	padding: 1rem;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-surface);
	min-width: 0;
	max-width: 100%;
}

.kkk-forum__post-main {
	min-width: 0;
	max-width: 100%;
}

.kkk-forum__author {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
}

.kkk-forum__avatar {
	display: block;
	flex: 0 0 3rem;
	width: 3rem;
	min-width: 3rem;
	height: 3rem;
	min-height: 3rem;
	border-radius: 50%;
	object-fit: cover;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-bg-muted);
}

.kkk-forum__avatar--empty {
	background:
		radial-gradient(circle at 50% 40%, var(--kkk-accent-dim), transparent 60%),
		var(--kkk-bg-muted);
}

.kkk-forum__nick {
	margin: 0;
	font-weight: 600;
	word-break: break-word;
}

.kkk-forum__rank-block {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.35rem;
	width: 100%;
	margin-top: 0.15rem;
}

.kkk-forum__rank-insignia {
	display: block;
	max-width: 100%;
	width: auto;
	height: auto;
	max-height: 2.4rem;
}

.kkk-forum__rank-progress {
	width: 100%;
	max-width: 7.5rem;
	height: 0.45rem;
	border: 1px solid var(--kkk-border-strong);
	background: var(--kkk-bg-muted);
	overflow: hidden;
}

.kkk-forum__rank-progress-bar {
	display: block;
	height: 100%;
	background: var(--kkk-accent);
}

.kkk-forum__post-date {
	margin: 0 0 0.5rem;
	color: var(--kkk-text-muted);
	font-size: 0.9rem;
}

.kkk-forum__post-body {
	min-width: 0;
	max-width: 100%;
	overflow-wrap: anywhere;
	word-break: break-word;
	line-height: 1.55;
}

/* Lange URLs / verschachteltes CC-Markup (font.link_highlight) */
.kkk-forum__post-body a,
.kkk-forum__post-body .link_forum,
.kkk-forum__post-body .link_highlight {
	overflow-wrap: anywhere;
	word-break: break-all;
}

/* API-HTML: feste width/style bei Bildern & Videos */
.kkk-forum__post-body img,
.kkk-forum__post-body video,
.kkk-forum__post-body embed,
.kkk-forum__post-body object {
	max-width: 100% !important;
	width: auto !important;
	height: auto !important;
}

.kkk-forum__post-body iframe {
	display: block;
	max-width: 100% !important;
	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9;
	border: 0;
}

.kkk-forum__post-body table {
	display: block;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.kkk-forum__post-body pre {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.kkk-forum__form-wrap {
	display: flex;
	justify-content: center;
	margin-top: 2rem;
	padding-top: 1.5rem;
	border-top: 1px solid var(--kkk-border);
}

.kkk-forum__form {
	display: grid;
	gap: 0.85rem;
	width: 100%;
	max-width: 42rem;
	margin-inline: auto;
}

.kkk-forum__form-title {
	font-size: 1.25rem;
	text-transform: uppercase;
	margin: 0;
}

.kkk-forum__label {
	display: grid;
	gap: 0.35rem;
}

.kkk-forum__label span {
	font-family: "Barlow Condensed", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.9rem;
	color: var(--kkk-text-muted);
}

.kkk-forum__label input,
.kkk-forum__label textarea {
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--kkk-border-strong);
	background: var(--kkk-bg-muted);
	color: var(--kkk-text);
	font: inherit;
}

.kkk-forum__bbcode {
	display: block;
	width: 100%;
	min-width: 0;
}

.kkk-forum__bbcode-track {
	width: 100%;
	min-width: 0;
	overflow-x: auto;
	overflow-y: hidden;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
	scrollbar-color: var(--kkk-border-strong) transparent;
	padding-bottom: 0.15rem;
}

.kkk-forum__bbcode-track::-webkit-scrollbar {
	height: 0.4rem;
}

.kkk-forum__bbcode-track::-webkit-scrollbar-track {
	background: transparent;
}

.kkk-forum__bbcode-track::-webkit-scrollbar-thumb {
	background: var(--kkk-border-strong);
	border-radius: 0;
}

.kkk-forum__bbcode-strip {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 0.35rem;
	width: max-content;
	max-width: none;
	padding-bottom: 0.1rem;
}

.kkk-forum__bbcode-btn {
	flex: 0 0 auto;
	border: 1px solid var(--kkk-border);
	background: transparent;
	color: var(--kkk-text);
	padding: 0.25rem 0.55rem;
	cursor: pointer;
	font: inherit;
	font-size: clamp(0.78rem, 2.4vw, 0.85rem);
	white-space: nowrap;
	line-height: 1.35;
}

.kkk-forum__bbcode-btn:hover {
	border-color: var(--kkk-accent);
	color: var(--kkk-heading);
}

.kkk-forum__bbcode-btn:disabled {
	opacity: 0.35;
	cursor: default;
	border-color: var(--kkk-border);
	color: var(--kkk-text);
}

.kkk-forum__composer-body {
	position: relative;
	min-height: 16rem;
}

.kkk-forum__composer-body textarea {
	display: block;
	min-height: 16rem;
	resize: vertical;
}

.kkk-forum__smileys {
	position: absolute;
	inset: 0;
	z-index: 6;
	display: grid;
	align-content: start;
	gap: 0.65rem;
	padding: 0.75rem 0.85rem;
	border: 1px solid var(--kkk-border-strong);
	background: var(--kkk-bg-muted);
	overflow: auto;
	box-sizing: border-box;
}

.kkk-forum__smileys[hidden] {
	display: none;
}

.kkk-forum__smileys-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.5rem;
}

.kkk-forum__smileys-head p {
	margin: 0;
	font-size: 0.9rem;
	color: var(--kkk-muted, var(--kkk-text));
}

.kkk-forum__smileys-grid {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem;
}

.kkk-forum__smiley {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 3rem;
	min-height: 3rem;
	padding: 0.3rem;
	border: 1px solid transparent;
	background: transparent;
	cursor: pointer;
}

.kkk-forum__smiley:hover,
.kkk-forum__smiley:focus-visible {
	border-color: var(--kkk-accent);
	outline: none;
}

.kkk-forum__smiley img {
	display: block;
	width: auto;
	height: auto;
	max-height: 3rem;
	max-width: 7rem;
	object-fit: contain;
	image-rendering: pixelated;
}

.kkk-forum__captcha {
	display: grid;
	gap: 0.75rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-surface);
}

.kkk-forum__captcha-unlock,
.kkk-forum__captcha-reveal {
	display: grid;
	gap: 0.55rem;
	transition:
		opacity 0.35s ease,
		transform 0.35s ease,
		max-height 0.4s ease,
		margin 0.35s ease;
}

.kkk-forum__captcha-unlock {
	opacity: 1;
	transform: translateY(0);
	max-height: 12rem;
}

.kkk-forum__captcha-reveal {
	opacity: 0;
	transform: translateY(0.6rem);
	max-height: 0;
	overflow: hidden;
	pointer-events: none;
	margin: 0;
}

.kkk-forum__captcha.is-unlocked .kkk-forum__captcha-unlock {
	opacity: 0;
	transform: translateY(-0.45rem);
	max-height: 0;
	overflow: hidden;
	pointer-events: none;
	margin: 0;
}

.kkk-forum__captcha.is-unlocked .kkk-forum__captcha-reveal {
	opacity: 1;
	transform: translateY(0);
	max-height: 16rem;
	pointer-events: auto;
}

.kkk-forum__track {
	position: relative;
	width: min(260px, 100%);
	height: 2.4rem;
	border: 1px solid var(--kkk-border-strong);
	background: var(--kkk-bg-muted);
	user-select: none;
	touch-action: none;
}

.kkk-forum__slider {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	width: 1.6rem;
	height: 100%;
	background: #c0392b;
	cursor: grab;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
	transition: left 0.05s linear;
}

.kkk-forum__slider:active {
	cursor: grabbing;
}

.kkk-forum__track-hint {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	padding-left: 1.6rem;
	color: var(--kkk-text-muted);
	font-size: 0.85rem;
	pointer-events: none;
}

.kkk-forum__captcha-img {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.kkk-forum__captcha-img img {
	display: block;
	border: 1px solid var(--kkk-border);
	background: #fff;
}

@media (prefers-reduced-motion: reduce) {
	.kkk-forum__captcha-unlock,
	.kkk-forum__captcha-reveal,
	.kkk-forum__slider {
		transition: none;
	}
}

.kkk-forum__terms {
	font-size: 0.9rem;
	color: var(--kkk-text-muted);
	margin: 0;
}

.kkk-forum__flash {
	padding: 0.75rem 1rem;
	margin: 0 0 1rem;
	border: 1px solid var(--kkk-border);
}

.kkk-forum__flash--error {
	border-color: #c45c5c;
	color: #c45c5c;
	background: rgba(196, 92, 92, 0.08);
}

.kkk-forum__flash--ok {
	border-color: var(--kkk-accent);
	color: var(--kkk-accent-strong);
	background: var(--kkk-accent-dim);
}

.kkk-forum__error {
	color: #c45c5c;
}

/* Wie ClanConcept: zuerst „Letzter Beitrag“ ausblenden */
@media (max-width: 1100px) {
	.kkk-forum__col--last {
		display: none;
	}

	.kkk-forum__row {
		grid-template-columns: minmax(0, 1fr) 4.5rem 5rem;
	}

	.kkk-forum__table--threads .kkk-forum__row {
		grid-template-columns: minmax(0, 1fr) 7rem 4rem 4.5rem;
	}
}

/* Schmale Ansicht: Zahlen kompakt rechts am Titel, Meta-Spalten weg */
@media (max-width: 900px) {
	.kkk-forum__col--topics,
	.kkk-forum__col--posts,
	.kkk-forum__col--author,
	.kkk-forum__col--replies,
	.kkk-forum__col--views {
		display: none;
	}

	.kkk-forum__row,
	.kkk-forum__table--threads .kkk-forum__row {
		grid-template-columns: 1fr;
	}

	.kkk-forum__stats-compact {
		display: inline-flex;
		flex-direction: column;
		flex: 0 0 auto;
		align-items: center;
		justify-content: center;
		gap: 0.2rem;
		margin-left: auto;
		color: var(--kkk-text-muted);
		font-size: 0.75rem;
		font-weight: 650;
		line-height: 1;
		white-space: nowrap;
	}

	.kkk-forum__stat-sep {
		width: 0.85em;
		height: 1px;
		background: var(--kkk-border-strong);
	}
}

@media (max-width: 800px) {
	.kkk-forum__post {
		grid-template-columns: 4.5rem minmax(0, 1fr);
	}

	.kkk-forum__author {
		align-items: center;
	}
}

@media (max-width: 560px) {
	.kkk-forum__post {
		grid-template-columns: 1fr;
	}

	.kkk-forum__author {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.5rem 0.75rem;
	}
}

/* --- Mitglieder --- */
.kkk-members {
	animation: kkk-fade-up 0.45s ease both;
}

.kkk-members__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.kkk-members__controls {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 0 0.75rem;
	align-items: start;
	margin: 0 0 1rem;
}

.kkk-members__search {
	margin: 0;
	min-width: 0;
}

.kkk-members__search-label {
	position: relative;
	display: block;
}

.kkk-members__search-label .kkk-icon--search {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--kkk-text-muted);
	pointer-events: none;
}

.kkk-members__search-input {
	width: 100%;
	box-sizing: border-box;
	height: 2.95rem;
	padding: 0 0.95rem 0 2.65rem;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-bg-elevated);
	color: var(--kkk-text);
	font: inherit;
	font-size: 1.05rem;
	line-height: 1.2;
}

.kkk-members__search-input:focus {
	outline: 2px solid var(--kkk-focus);
	outline-offset: 2px;
	border-color: var(--kkk-border-strong);
}

.kkk-members__search-hint {
	min-height: 1.25rem;
	margin: 0.35rem 0 0;
	font-size: 0.85rem;
	color: var(--kkk-text-muted);
}

.kkk-members__sort {
	display: flex;
	align-items: stretch;
	height: 2.95rem;
}

.kkk-members__sort-options {
	display: inline-flex;
	height: 100%;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-bg-elevated);
	box-sizing: border-box;
}

.kkk-members__sort-btn {
	appearance: none;
	margin: 0;
	padding: 0 1.15rem;
	border: 0;
	border-right: 1px solid var(--kkk-border);
	background: transparent;
	color: var(--kkk-text-muted);
	font: inherit;
	font-size: 1.05rem;
	line-height: 1.2;
	cursor: pointer;
	transition: color 0.22s ease, background-color 0.22s ease, box-shadow 0.22s ease;
}

.kkk-members__sort-btn:last-child {
	border-right: 0;
}

.kkk-members__sort-btn:hover {
	color: var(--kkk-text);
	background: var(--kkk-surface);
}

.kkk-members__sort-btn.is-active {
	color: var(--kkk-text);
	background: var(--kkk-accent-dim);
	box-shadow: inset 0 -2px 0 var(--kkk-accent-strong);
}

.kkk-members__sort-btn:focus-visible {
	outline: 2px solid var(--kkk-focus);
	outline-offset: 2px;
	z-index: 1;
}

.kkk-members.is-loading [data-kkk-members-body] {
	opacity: 0.42;
	pointer-events: none;
	transition: opacity 0.35s ease;
}

.kkk-members.is-loading .kkk-members__stage::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		110deg,
		transparent 18%,
		var(--kkk-accent-dim) 48%,
		transparent 78%
	);
	background-size: 220% 100%;
	opacity: 0.45;
	animation: kkk-members-shimmer 1.45s ease-in-out infinite;
}

.kkk-members__stage {
	position: relative;
}

[data-kkk-members-body].is-swapping {
	animation: kkk-members-swap 0.55s ease both;
}

@keyframes kkk-members-swap {
	from {
		opacity: 0;
		transform: translateY(0.4rem);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes kkk-members-shimmer {
	from {
		background-position: 120% 0;
	}
	to {
		background-position: -40% 0;
	}
}

@keyframes kkk-member-reveal {
	0% {
		opacity: 0;
		transform: perspective(1100px) rotateX(-28deg) translateY(-0.65rem);
		clip-path: inset(0 0 100% 0);
		filter: brightness(1.08);
	}
	42% {
		opacity: 1;
		filter: brightness(1.02);
	}
	72% {
		transform: perspective(1100px) rotateX(4deg) translateY(0);
		clip-path: inset(0 0 0 0);
	}
	100% {
		opacity: 1;
		transform: perspective(1100px) rotateX(0deg) translateY(0);
		clip-path: inset(0 0 0 0);
		filter: brightness(1);
	}
}

.kkk-members__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.65rem 1rem;
	margin-bottom: 0.85rem;
}

.kkk-members__intro {
	margin: 0;
	color: var(--kkk-text-muted);
	font-size: 0.95rem;
}

.kkk-members__intro-sub {
	margin-left: 0.35rem;
	opacity: 0.8;
}

.kkk-members__list {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.85rem;
	align-items: stretch;
}

.kkk-members__separator {
	grid-column: 1 / -1;
	margin: 0.15rem 0;
	padding: 0.45rem 0.65rem;
	color: var(--kkk-text-muted);
	font-size: 0.85rem;
	border-top: 1px dashed var(--kkk-border-strong);
}

.kkk-members__empty,
.kkk-members__error {
	color: var(--kkk-text-muted);
}

.kkk-members__error {
	color: #c45c5c;
}

.kkk-members__back {
	margin: 1.75rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--kkk-border);
}

.kkk-members__back-link {
	gap: 0.55rem;
}

.kkk-members__back-link .kkk-icon--back {
	width: 1rem;
	height: 1rem;
	transition: transform 0.2s ease;
}

.kkk-members__back-link:hover .kkk-icon--back {
	transform: translateX(-3px);
}

@media (prefers-reduced-motion: reduce) {
	.kkk-members__back-link .kkk-icon--back,
	.kkk-members__back-link:hover .kkk-icon--back {
		transition: none;
		transform: none;
	}
}

.kkk-members__empty-val {
	color: var(--kkk-text-muted);
	opacity: 0.7;
}

.kkk-members__pager-slot--bottom {
	margin-top: 0.85rem;
}

.kkk-icon {
	display: inline-block;
	width: 1.15rem;
	height: 1.15rem;
	fill: currentColor;
	flex-shrink: 0;
	vertical-align: middle;
}

.kkk-icon--gender {
	width: 1.1rem;
	height: 1.1rem;
	margin-right: 0.25rem;
}

.kkk-icon--m {
	color: var(--kkk-accent-strong);
}

.kkk-icon--w {
	color: #c47a9a;
}

.kkk-icon--x {
	color: var(--kkk-text-muted);
}

.kkk-icon--rank {
	opacity: 0.85;
	width: 1.6rem;
	height: 1.6rem;
}

.kkk-member {
	--kkk-dossier-paper: var(--kkk-surface);
	--kkk-dossier-ink: var(--kkk-heading);
	position: relative;
	display: flex;
	flex-direction: column;
	height: 100%;
	min-width: 0;
	padding: 0.7rem 0.75rem 0.7rem 1.35rem;
	border: 1px solid var(--kkk-border-strong);
	background:
		linear-gradient(90deg, rgba(0, 0, 0, 0.08) 0 0.7rem, transparent 0.7rem),
		repeating-linear-gradient(
			0deg,
			transparent,
			transparent 27px,
			rgba(0, 0, 0, 0.035) 27px,
			rgba(0, 0, 0, 0.035) 28px
		),
		var(--kkk-dossier-paper, var(--kkk-surface));
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 10px 24px rgba(0, 0, 0, 0.18);
	transform-origin: center top;
}

.kkk-member.is-revealing {
	transform-origin: 50% 0%;
	transform-style: preserve-3d;
	will-change: transform, opacity, clip-path;
	animation: kkk-member-reveal 0.95s cubic-bezier(0.18, 0.9, 0.22, 1) both;
	animation-delay: var(--kkk-reveal-delay, 0ms);
}

.kkk-member.is-revealed {
	opacity: 1;
	transform: none;
	clip-path: none;
	filter: none;
	animation: none;
	will-change: auto;
}

.kkk-member.is-live {
	border-color: rgba(145, 70, 255, 0.55);
	box-shadow:
		inset 3px 0 0 #9146ff,
		0 10px 24px rgba(0, 0, 0, 0.18);
}

.kkk-member__binder {
	position: absolute;
	top: 0.85rem;
	bottom: 0.85rem;
	left: 0.28rem;
	width: 0.72rem;
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
	align-items: center;
	pointer-events: none;
}

.kkk-member__hole {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.35);
	background:
		radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.25), transparent 55%),
		rgba(0, 0, 0, 0.28);
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}

.kkk-member__masthead {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.65rem;
	margin: 0 0 0.55rem;
	padding-bottom: 0.4rem;
	border-bottom: 2px solid var(--kkk-border-strong);
	flex-shrink: 0;
}

.kkk-member__classification {
	font-family: "Barlow Condensed", sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kkk-accent-strong);
}

.kkk-member__file-id {
	margin-left: auto;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 0.9rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kkk-text-muted);
}

.kkk-member__live-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.12rem 0.4rem;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: #fff;
	background: #9146ff;
}

.kkk-member__cover {
	position: relative;
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	overflow: visible;
	isolation: isolate;
	min-height: 100%;
	padding: 0.35rem 0.25rem 0.15rem;
}

.kkk-member__cover-mark {
	position: absolute;
	right: -1.4rem;
	top: -1.1rem;
	width: min(11.5rem, 58%);
	aspect-ratio: 1;
	opacity: 0.09;
	background: url("../brand/logo.png") center / contain no-repeat;
	filter: var(--kkk-logo-filter);
	pointer-events: none;
	z-index: 0;
	transform: rotate(20deg);
	transform-origin: center center;
}

.kkk-member__photo-wrap {
	position: relative;
	display: block;
	width: min(100%, 9.75rem);
	margin: 0.15rem auto 0.55rem;
	z-index: 2;
}

.kkk-member__stamp {
	position: absolute;
	right: calc(100% - 0.4rem);
	top: 50%;
	z-index: 3;
	padding: 0.28rem 0.55rem;
	border: 3px double rgba(176, 36, 36, 0.9);
	color: rgba(176, 36, 36, 0.92);
	font-family: "Barlow Condensed", sans-serif;
	font-size: clamp(0.78rem, 2.4vw, 0.95rem);
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1;
	white-space: nowrap;
	transform: translateY(-50%) rotate(-18deg);
	transform-origin: center right;
	opacity: 0.95;
	pointer-events: none;
	user-select: none;
	box-shadow: inset 0 0 0 1px rgba(176, 36, 36, 0.28);
	text-shadow: 0 0 1px rgba(176, 36, 36, 0.25);
	background: rgba(245, 240, 230, 0.55);
}

.kkk-member__cover-stack {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.55rem;
}

.kkk-member__avatar-btn {
	appearance: none;
	border: 0;
	padding: 0;
	background: transparent;
	cursor: pointer;
	flex-shrink: 0;
	line-height: 0;
	display: block;
	width: 100%;
	margin: 0;
}

.kkk-member__avatar-btn:focus-visible {
	outline: 2px solid var(--kkk-focus);
	outline-offset: 2px;
}

.kkk-member__avatar {
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
	border: 1px solid var(--kkk-border-strong);
	background: var(--kkk-bg-muted);
	box-shadow:
		0 0 0 3px rgba(255, 255, 255, 0.04),
		0 0 0 4px var(--kkk-border),
		0 10px 22px rgba(0, 0, 0, 0.22);
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.kkk-member__avatar-btn:hover .kkk-member__avatar {
	transform: scale(1.03);
	box-shadow:
		0 0 0 3px rgba(255, 255, 255, 0.06),
		0 0 0 4px var(--kkk-accent-strong),
		0 12px 26px rgba(0, 0, 0, 0.28);
}

.kkk-member__avatar--empty {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	background: linear-gradient(135deg, var(--kkk-bg-muted), var(--kkk-bg-elevated));
}

.kkk-member__name-row {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 0.4rem 0.55rem;
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	padding: 0 0.15rem;
}

.kkk-member__name {
	margin: 0;
	min-width: 0;
	flex: 0 1 auto;
	max-width: calc(100% - 2.1rem);
	font-family: "Barlow Condensed", sans-serif;
	font-size: clamp(1.55rem, 3.2vw, 2rem);
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	line-height: 1.05;
	color: var(--kkk-dossier-ink);
	overflow-wrap: normal;
	word-break: normal;
	hyphens: manual;
}

.kkk-member__name a {
	color: inherit;
	text-decoration: none;
	display: inline;
}

.kkk-member__name a:hover {
	color: var(--kkk-accent-strong);
}

.kkk-member__flag {
	display: inline-block;
	width: 1.55rem;
	height: auto;
	flex-shrink: 0;
	border: 1px solid var(--kkk-border);
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.kkk-member__cover-rank {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-width: 0;
	max-width: 100%;
}

.kkk-member__rank-badge-link {
	display: block;
	line-height: 0;
	text-decoration: none;
	color: inherit;
	flex-shrink: 0;
}

.kkk-member__rank-badge-link:hover .kkk-member__rank-badge,
.kkk-member__rank-badge-link:focus-visible .kkk-member__rank-badge {
	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3)) brightness(1.08);
	outline: none;
}

.kkk-member__rank-badge {
	width: 3.15rem;
	height: 3.15rem;
	object-fit: contain;
	filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.3));
}

.kkk-member__rank-badge--empty {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 1px dashed var(--kkk-border);
	background: var(--kkk-bg-muted);
	color: var(--kkk-text-muted);
}

.kkk-member__rank {
	margin: 0;
	min-width: 0;
	color: var(--kkk-heading);
	font-family: "Barlow Condensed", sans-serif;
	font-size: clamp(1.15rem, 2.6vw, 1.35rem);
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.2;
}

.kkk-member__rank a {
	color: inherit;
	text-decoration: none;
}

.kkk-member__rank a:hover,
.kkk-member__rank a:focus-visible {
	color: var(--kkk-accent-strong);
	text-decoration: underline;
	outline: none;
}

.kkk-member__cover-meta {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.45rem 0.85rem;
	align-items: start;
	margin: 0.1rem 0 0;
	width: 100%;
}

.kkk-member__cover-meta > div {
	display: grid;
	justify-items: center;
	gap: 0.18rem;
	min-width: 0;
}

.kkk-member__cover-meta dt {
	margin: 0;
	font-size: 0.75rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kkk-text-muted);
}

.kkk-member__cover-meta dd {
	margin: 0;
	font-size: 0.98rem;
}

.kkk-member__status,
.kkk-member__chip {
	display: inline-flex;
	align-items: center;
	padding: 0.18rem 0.5rem;
	font-size: 0.85rem;
	line-height: 1.25;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-bg-muted);
	color: var(--kkk-text-muted);
	white-space: nowrap;
}

.kkk-member__status--ok {
	border-color: var(--kkk-border-strong);
	color: var(--kkk-accent-strong);
	background: var(--kkk-accent-dim);
}

.kkk-member__status--warn {
	border-color: rgba(196, 92, 92, 0.45);
	color: #c45c5c;
	background: rgba(196, 92, 92, 0.08);
}

.kkk-member__open-akte {
	appearance: none;
	margin-top: 0.2rem;
	padding: 0.45rem 0.95rem;
	border: 1px solid var(--kkk-border-strong);
	background: var(--kkk-accent-dim);
	color: var(--kkk-heading);
	font-family: "Barlow Condensed", sans-serif;
	font-size: 0.98rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.kkk-member__open-akte:hover,
.kkk-member__open-akte:focus-visible {
	background: var(--kkk-accent);
	border-color: var(--kkk-accent-strong);
	color: var(--kkk-heading);
	outline: none;
}

.kkk-member__tabs,
.kkk-member__twitch-tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.2rem;
	margin: 0 0 0.65rem;
	padding: 0 0 0.15rem;
	border-bottom: 1px solid var(--kkk-border);
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
	flex-shrink: 0;
}

.kkk-member__tab,
.kkk-member__twitch-tab {
	appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	border: 1px solid var(--kkk-border);
	border-bottom: 0;
	background: var(--kkk-bg-muted);
	color: var(--kkk-text-muted);
	font-family: "Barlow Condensed", sans-serif;
	font-size: 0.88rem;
	font-weight: 650;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 0.38rem 0.55rem 0.45rem;
	cursor: pointer;
	white-space: nowrap;
	transform: translateY(1px);
	transition:
		color 0.2s ease,
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease;
}

.kkk-member__tab:hover,
.kkk-member__twitch-tab:hover {
	color: var(--kkk-heading);
	background: var(--kkk-bg-elevated);
}

.kkk-member__tab.is-active,
.kkk-member__twitch-tab.is-active {
	color: var(--kkk-heading);
	border-color: var(--kkk-border-strong);
	background: var(--kkk-dossier-paper, var(--kkk-surface));
	transform: translateY(0);
	box-shadow: inset 0 -2px 0 var(--kkk-accent-strong);
}

.kkk-member__tab-count {
	display: inline-block;
	min-width: 1em;
	font-size: 0.8em;
	opacity: 0.85;
}

.kkk-member__panels {
	position: relative;
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	min-height: 16.5rem;
}

.kkk-member__panel,
.kkk-member__twitch-panel {
	display: none;
}

.kkk-member__panel.is-active,
.kkk-member__twitch-panel.is-active {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 100%;
}

.kkk-member__panel.is-entering-forward {
	animation: kkk-dossier-fade-forward 0.35s ease both;
}

.kkk-member__panel.is-entering-back {
	animation: kkk-dossier-fade-back 0.35s ease both;
}

.kkk-member__twitch-panel.is-entering-forward,
.kkk-member__twitch-panel.is-entering-back,
.kkk-member__twitch-panel.is-entering {
	animation: kkk-dossier-fade-forward 0.3s ease both;
}

@keyframes kkk-dossier-fade-forward {
	from {
		opacity: 0;
		transform: translateX(0.65rem);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

@keyframes kkk-dossier-fade-back {
	from {
		opacity: 0;
		transform: translateX(-0.65rem);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}

.kkk-member__page-title {
	margin: 0 0 0.65rem;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 1rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kkk-accent-strong);
}

.kkk-member__flip {
	display: grid;
	grid-template-columns: 2.4rem minmax(0, 1fr) 2.4rem;
	gap: 0.45rem;
	align-items: center;
	margin-top: 0.7rem;
	padding-top: 0.55rem;
	border-top: 1px dashed var(--kkk-border-strong);
	flex-shrink: 0;
}

.kkk-member__flip-btn {
	appearance: none;
	width: 2.4rem;
	height: 2.4rem;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-bg-elevated);
	color: var(--kkk-heading);
	font-size: 1.45rem;
	line-height: 1;
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.kkk-member__flip-btn:hover:not(:disabled),
.kkk-member__flip-btn:focus-visible:not(:disabled) {
	border-color: var(--kkk-accent-strong);
	background: var(--kkk-accent-dim);
	outline: none;
}

.kkk-member__flip-btn:disabled {
	opacity: 0.35;
	cursor: default;
}

.kkk-member__flip-status {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: baseline;
	gap: 0.35rem 0.65rem;
	margin: 0;
	text-align: center;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 0.98rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kkk-text-muted);
}

.kkk-member__flip-count {
	opacity: 0.8;
	font-variant-numeric: tabular-nums;
}

.kkk-member__section {
	min-width: 0;
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	min-height: 100%;
}

.kkk-member__fields {
	display: grid;
	gap: 0.4rem 0.65rem;
	margin: 0;
}

.kkk-member__fields > div {
	display: grid;
	grid-template-columns: minmax(6.5rem, 8rem) minmax(0, 1fr);
	gap: 0.25rem 0.65rem;
	align-items: baseline;
}

.kkk-member__fields dt {
	margin: 0;
	color: var(--kkk-text-muted);
	font-size: 0.92rem;
}

.kkk-member__fields dd {
	margin: 0;
	min-width: 0;
	font-size: 1.02rem;
	overflow-wrap: anywhere;
}

.kkk-member__pp-line {
	display: flex !important;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem 0.65rem;
}

.kkk-member__pp-meta {
	display: inline;
	white-space: nowrap;
}

.kkk-member__progress {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	min-width: 5.5rem;
	max-width: 8rem;
	flex: 1 1 5.5rem;
}

.kkk-member__progress-track {
	flex: 1;
	height: 0.4rem;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-bg-muted);
	overflow: hidden;
}

.kkk-member__progress-bar {
	display: block;
	height: 100%;
	width: 0;
	background: linear-gradient(90deg, var(--kkk-accent), var(--kkk-accent-strong));
	transition: width 0.35s ease;
}

.kkk-member__progress-label {
	font-size: 0.8rem;
	color: var(--kkk-text-muted);
	min-width: 2.4em;
	text-align: right;
}

.kkk-member__bio {
	font-size: 1.02rem;
	line-height: 1.5;
	color: var(--kkk-text);
	overflow: auto;
	scrollbar-width: thin;
	max-height: 100%;
}

.kkk-member__portrait {
	margin: 0;
	display: grid;
	justify-items: center;
	gap: 0.45rem;
	flex: 1;
	align-content: center;
}

.kkk-member__portrait img {
	width: min(100%, 16rem);
	aspect-ratio: 1;
	object-fit: cover;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-bg-muted);
}

.kkk-member__portrait-empty {
	width: min(100%, 12rem);
	aspect-ratio: 1;
	background: linear-gradient(135deg, var(--kkk-bg-muted), var(--kkk-bg-elevated));
	border: 1px dashed var(--kkk-border);
}

.kkk-member__portrait figcaption {
	font-size: 0.95rem;
	color: var(--kkk-text-muted);
}

.kkk-member__games-intro,
.kkk-member__twitch-channel {
	margin: 0 0 0.65rem;
	color: var(--kkk-text-muted);
	font-size: 0.95rem;
}

.kkk-member__games {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(4.75rem, 1fr));
	gap: 0.7rem 0.5rem;
	align-items: start;
}

.kkk-member__game {
	display: grid;
	justify-items: center;
	gap: 0.25rem;
	text-align: center;
}

.kkk-member__game-link {
	display: grid;
	place-items: center;
	width: 64px;
	height: 64px;
	line-height: 0;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-bg-muted);
	overflow: hidden;
}

.kkk-member__game-link img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.kkk-member__game-time {
	font-size: 0.82rem;
	font-weight: 650;
	color: var(--kkk-accent-strong);
	line-height: 1.2;
}

.kkk-member__game-name {
	font-size: 0.8rem;
	line-height: 1.3;
	color: var(--kkk-text-muted);
	max-width: 100%;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
}

.kkk-member__games-more {
	appearance: none;
	grid-column: 1 / -1;
	justify-self: start;
	margin-top: 0.15rem;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-bg-muted);
	color: var(--kkk-text);
	font: inherit;
	font-size: 0.8rem;
	padding: 0.35rem 0.65rem;
	cursor: pointer;
}

.kkk-member__games-more:hover {
	border-color: var(--kkk-border-strong);
	color: var(--kkk-heading);
}

.kkk-member__vods {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
}

.kkk-member__vod-link {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	gap: 0.5rem;
	align-items: start;
	text-decoration: none;
	color: inherit;
	padding: 0.25rem;
	border: 1px solid transparent;
}

.kkk-member__vod-link:hover {
	border-color: var(--kkk-border);
	background: var(--kkk-bg-muted);
	color: inherit;
}

.kkk-member__vod-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	background: var(--kkk-bg-muted);
	border: 1px solid var(--kkk-border);
	overflow: hidden;
}

.kkk-member__vod-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.kkk-member__vod-thumb-empty {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--kkk-bg-muted), var(--kkk-bg-elevated));
}

.kkk-member__vod-badge,
.kkk-member__vod-dur {
	position: absolute;
	right: 0.2rem;
	bottom: 0.2rem;
	padding: 0.08rem 0.25rem;
	font-size: 0.62rem;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	background: rgba(0, 0, 0, 0.75);
}

.kkk-member__vod-badge {
	background: #9146ff;
}

.kkk-member__vod-body {
	display: grid;
	gap: 0.2rem;
	min-width: 0;
}

.kkk-member__vod-title {
	font-size: 0.98rem;
	font-weight: 650;
	line-height: 1.25;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
}

.kkk-member__vod-meta {
	font-size: 0.85rem;
	color: var(--kkk-text-muted);
	line-height: 1.3;
}

.kkk-members--detail .kkk-members__list {
	grid-template-columns: minmax(0, 36rem);
	justify-content: center;
}

@media (max-width: 900px) {
	.kkk-members__controls {
		grid-template-columns: 1fr;
		gap: 0.65rem;
	}

	.kkk-members__sort {
		width: 100%;
		height: 2.95rem;
	}

	.kkk-members__sort-options {
		width: 100%;
	}

	.kkk-members__sort-btn {
		flex: 1;
	}

	.kkk-members__list {
		grid-template-columns: 1fr;
	}
}

@media (max-width: 560px) {
	.kkk-member {
		padding: 0.65rem 0.65rem 0.65rem 1.2rem;
	}

	.kkk-member__photo-wrap {
		width: min(100%, 8.75rem);
	}

	.kkk-member__name-row {
		flex-wrap: wrap;
	}

	.kkk-member__stamp {
		right: calc(100% - 0.3rem);
		font-size: 0.72rem;
		letter-spacing: 0.12em;
	}

	.kkk-member__rank-badge {
		width: 2.85rem;
		height: 2.85rem;
	}

	.kkk-member__file-id {
		margin-left: 0;
	}

	.kkk-member__panels {
		min-height: 15rem;
	}

	.kkk-member__fields > div {
		grid-template-columns: 1fr;
		gap: 0.1rem;
	}

	.kkk-member__pp-line {
		flex-direction: column;
		align-items: flex-start;
	}

	.kkk-member__progress {
		max-width: 100%;
		width: 100%;
	}

	.kkk-member__vod-link {
		grid-template-columns: 4.75rem minmax(0, 1fr);
	}
}

.kkk-clanmap {
	animation: kkk-fade-up 0.55s ease both;
}

.kkk-clanmap__intro {
	margin: 0 0 1.25rem;
	color: var(--kkk-text-muted);
}

.kkk-clanmap__embed {
	max-width: 100%;
	margin: 0 auto;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-bg-muted);
	box-shadow: var(--kkk-shadow);
	overflow: hidden;
	border-radius: var(--kkk-clanmap-radius, 0);
}

.kkk-clanmap__frame {
	display: block;
	width: 100%;
	border: 0;
	background: transparent;
	border-radius: inherit;
}

.kkk-clanmap__meta {
	margin: 0.85rem 0 0;
	text-align: center;
	font-size: 0.92rem;
	color: var(--kkk-text-muted);
}

.kkk-clanmap__meta-sep {
	margin: 0 0.35rem;
	opacity: 0.55;
}

@media (prefers-reduced-motion: reduce) {
	.kkk-clanmap {
		animation: none;
	}
}

.kkk-ranks__intro {
	margin: 0 0 1.25rem;
	color: var(--kkk-text-muted);
	max-width: 40rem;
}

.kkk-ranks__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
	gap: 0.85rem;
}

.kkk-ranks__item {
	scroll-margin-top: 5rem;
	min-width: 0;
}

.kkk-ranks__item:target .kkk-ranks__card {
	border-color: var(--kkk-accent);
	background: var(--kkk-accent-dim);
}

.kkk-ranks__card {
	display: grid;
	grid-template-columns: 5.5rem minmax(0, 1fr);
	gap: 0.85rem;
	align-items: center;
	min-height: 100%;
	padding: 0.85rem;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-surface);
	color: inherit;
	box-shadow: var(--kkk-shadow);
	transition:
		border-color 0.22s ease,
		background-color 0.22s ease,
		box-shadow 0.22s ease,
		transform 0.22s ease;
}

.kkk-ranks__card:hover {
	border-color: var(--kkk-accent);
	background: var(--kkk-accent-dim);
	box-shadow:
		var(--kkk-shadow),
		0 0 0 1px var(--kkk-accent),
		0 10px 28px rgba(0, 0, 0, 0.18);
	transform: translateY(-3px);
}

.kkk-ranks__card:hover .kkk-ranks__media {
	border-color: var(--kkk-accent);
	background: var(--kkk-accent-dim);
}

.kkk-ranks__card:hover .kkk-ranks__name {
	color: var(--kkk-accent-strong);
}

.kkk-ranks__media {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 5.5rem;
	height: 5.5rem;
	padding: 0.35rem;
	overflow: hidden;
	background: var(--kkk-bg-muted);
	border: 1px solid var(--kkk-border);
	transition:
		border-color 0.22s ease,
		background-color 0.22s ease;
}

.kkk-ranks__media img {
	display: block;
	flex: 0 1 auto;
	box-sizing: border-box;
	width: auto;
	height: auto;
	/* Explizite rem-Grenzen: Prozent-max bezieht sich sonst auf die volle Box
	   und lässt breite Bilder rechts über den Innenabstand rausragen. */
	max-width: calc(5.5rem - 0.7rem);
	max-height: calc(5.5rem - 0.7rem);
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	object-fit: contain;
	object-position: center;
}

.kkk-ranks__media-empty {
	display: block;
	flex: 0 0 auto;
	width: 2rem;
	height: 2rem;
	border: 1px dashed var(--kkk-border-strong);
	opacity: 0.5;
}

.kkk-ranks__body {
	display: grid;
	gap: 0.25rem;
	min-width: 0;
}

.kkk-ranks__name {
	font-family: var(--kkk-font-display, inherit);
	font-size: 1.15rem;
	font-weight: 650;
	color: var(--kkk-heading);
	line-height: 1.25;
}

.kkk-ranks__meta {
	font-size: 0.9rem;
	color: var(--kkk-text-muted);
}

@media (max-width: 520px) {
	.kkk-ranks__list {
		grid-template-columns: 1fr;
	}
}

/* --- Bewerben / Clanregeln --- */
.kkk-apply,
.kkk-rules {
	animation: kkk-fade-up 0.45s ease both;
}

.kkk-apply__lead,
.kkk-rules__lead {
	margin: 0 0 1.25rem;
	color: var(--kkk-text-muted);
}

.kkk-apply__flash {
	margin: 0 auto 1.25rem;
	padding: 0.85rem 1rem;
	max-width: 42rem;
	border: 1px solid var(--kkk-border);
	border-left: 3px solid var(--kkk-accent);
	background: var(--kkk-surface);
	box-shadow: var(--kkk-shadow);
}

.kkk-apply__flash--ok {
	border-left-color: var(--kkk-accent);
}

.kkk-apply__flash--error {
	border-left-color: var(--kkk-danger, #c45c3a);
	color: var(--kkk-heading);
}

.kkk-apply__flash p {
	margin: 0;
}

.kkk-apply__flash-hint {
	margin-top: 0.55rem !important;
	color: var(--kkk-text-muted);
	font-size: 0.95rem;
}

.kkk-apply__intro {
	margin: 0 auto 1.5rem;
	padding: 1rem 1.1rem;
	max-width: 42rem;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-surface);
}

.kkk-apply__intro h2 {
	margin: 0 0 0.65rem;
	font-size: 1.2rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.kkk-apply__intro-body {
	color: var(--kkk-text);
}

.kkk-apply__rules-hint {
	margin: 0 auto 1.25rem;
	max-width: 42rem;
	color: var(--kkk-text-muted);
	text-align: center;
}

.kkk-apply__form {
	display: grid;
	gap: 1.25rem;
	width: 100%;
	max-width: 42rem;
	margin-inline: auto;
}

.kkk-apply__fieldset {
	margin: 0;
	padding: 1rem 1.1rem 1.15rem;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-surface);
	min-width: 0;
}

.kkk-apply__fieldset legend {
	float: left;
	width: 100%;
	margin: 0 0 0.65rem;
	padding: 0;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 1.05rem;
	font-weight: 650;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--kkk-heading);
	background: transparent;
}

.kkk-apply__fieldset::after {
	content: "";
	display: table;
	clear: both;
}

.kkk-apply__hint {
	margin: 0 0 0.85rem;
	color: var(--kkk-text-muted);
	font-size: 0.92rem;
}

.kkk-apply__label {
	display: grid;
	gap: 0.35rem;
	margin-bottom: 0.75rem;
}

.kkk-apply__label:last-child {
	margin-bottom: 0;
}

.kkk-apply__label span {
	font-family: "Barlow Condensed", sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-size: 0.9rem;
	color: var(--kkk-text-muted);
}

.kkk-apply__label input,
.kkk-apply__label select,
.kkk-apply__label textarea {
	width: 100%;
	padding: 0.55rem 0.7rem;
	border: 1px solid var(--kkk-border-strong);
	background: var(--kkk-bg-muted);
	color: var(--kkk-text);
	font: inherit;
	border-radius: 0;
}

.kkk-apply__label textarea {
	min-height: 10rem;
	resize: vertical;
	line-height: 1.5;
}

.kkk-apply__row {
	display: grid;
	grid-template-columns: minmax(10rem, 14rem) minmax(0, 1fr);
	gap: 0.85rem;
	align-items: start;
}

.kkk-apply__captcha {
	display: grid;
	gap: 0.85rem;
}

.kkk-apply__captcha-visual {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.65rem;
}

.kkk-apply__captcha-visual img {
	display: block;
	width: 240px;
	height: 70px;
	max-width: 100%;
	border: 1px solid var(--kkk-border);
	background: #fff;
	image-rendering: auto;
}

.kkk-apply__terms {
	margin: 0;
	color: var(--kkk-text-muted);
	font-size: 0.92rem;
}

.kkk-apply__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.85rem 1.25rem;
}

.kkk-apply__required-note {
	margin: 0;
	color: var(--kkk-text-muted);
	font-size: 0.88rem;
}

.kkk-rules__prose {
	max-width: 46rem;
}

.kkk-rules__prose h2 {
	margin: 1.75rem 0 0.75rem;
	font-size: 1.45rem;
}

.kkk-rules__prose h3 {
	margin: 1.35rem 0 0.55rem;
	font-size: 1.15rem;
	color: var(--kkk-accent-strong);
}

.kkk-rules__prose ul {
	margin: 0 0 0.75rem;
	padding-left: 1.2rem;
}

.kkk-rules__prose li {
	margin-bottom: 0.4rem;
}

.kkk-rules__prose li ul {
	margin-top: 0.4rem;
}

.kkk-rules__emphasis {
	padding: 0.75rem 0 0.75rem 0.85rem;
	border-left: 3px solid var(--kkk-accent);
	color: var(--kkk-heading);
}

.kkk-rules__closing {
	margin-top: 1.5rem;
	font-style: italic;
	color: var(--kkk-text-muted);
}

.kkk-rules__meta {
	margin-top: 1.25rem;
	font-size: 0.85rem;
	color: var(--kkk-text-muted);
}

.kkk-rules__cta {
	margin-top: 1.75rem;
}

@media (max-width: 640px) {
	.kkk-apply__row {
		grid-template-columns: 1fr;
	}
}

/* --- Bildergalerie --- */
.kkk-gallery {
	animation: kkk-fade-up 0.45s ease both;
}

.kkk-gallery__sr {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.kkk-gallery__crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.55rem;
	margin: 0 0 0.65rem;
	font-size: 0.92rem;
	color: var(--kkk-text-muted);
}

.kkk-gallery__crumb a {
	color: var(--kkk-accent-strong);
	text-decoration: none;
}

.kkk-gallery__crumb a:hover {
	text-decoration: underline;
}

.kkk-gallery__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem 1.25rem;
	margin: 0 0 1.15rem;
}

.kkk-gallery__back {
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem;
	align-items: center;
}

.kkk-gallery__intro,
.kkk-gallery__desc,
.kkk-gallery__empty,
.kkk-gallery__error,
.kkk-gallery__back,
.kkk-gallery__hq {
	margin: 0 0 1rem;
	color: var(--kkk-text-muted);
}

.kkk-gallery__error {
	color: #c45b5b;
}

.kkk-gallery__desc {
	max-width: 48rem;
	line-height: 1.55;
	color: var(--kkk-text);
}

.kkk-gallery__grid {
	--kkk-gallery-cols: 4;
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(var(--kkk-gallery-cols), minmax(0, 1fr));
	gap: 1.1rem 1rem;
}

.kkk-gallery__item {
	min-width: 0;
}

.kkk-gallery__item.is-pending {
	opacity: 0;
	transform: translateY(0.85rem) scale(0.98);
}

.kkk-gallery__item.is-revealed {
	opacity: 1;
	transform: none;
	animation: kkk-gallery-reveal 0.55s cubic-bezier(0.18, 0.9, 0.22, 1) both;
	animation-delay: var(--kkk-reveal-delay, 0ms);
}

@keyframes kkk-gallery-reveal {
	from {
		opacity: 0;
		transform: translateY(0.85rem) scale(0.97);
		filter: saturate(0.7);
	}
	to {
		opacity: 1;
		transform: none;
		filter: none;
	}
}

.kkk-gallery__tile {
	--kkk-rx: 0deg;
	--kkk-ry: 0deg;
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
	transform: perspective(700px) rotateX(var(--kkk-rx)) rotateY(var(--kkk-ry));
	transition: transform 0.28s ease, color 0.2s ease;
}

.kkk-gallery__tile:hover,
.kkk-gallery__tile:focus-visible {
	color: var(--kkk-heading);
}

.kkk-gallery__tile:focus-visible {
	outline: 2px solid var(--kkk-focus);
	outline-offset: 3px;
}

.kkk-gallery__media {
	--kkk-mx: 50%;
	--kkk-my: 50%;
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 168 / 130;
	border: 1px solid var(--kkk-border-strong);
	background:
		linear-gradient(145deg, var(--kkk-surface) 0%, var(--kkk-bg-elevated) 55%, var(--kkk-accent-dim) 140%);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.06),
		0 8px 18px rgba(0, 0, 0, 0.16);
	transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.kkk-gallery__grid--photos .kkk-gallery__media {
	aspect-ratio: 160 / 107;
}

.kkk-gallery__tile:hover .kkk-gallery__media,
.kkk-gallery__tile:focus-visible .kkk-gallery__media {
	border-color: var(--kkk-accent);
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.08),
		0 14px 28px rgba(0, 0, 0, 0.22);
}

.kkk-gallery__media > img,
.kkk-gallery__media img[data-kkk-gallery-img] {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transform: scale(1.04);
	filter: saturate(0.85);
	transition:
		opacity 0.45s ease,
		transform 0.45s ease,
		filter 0.45s ease;
}

.kkk-gallery__media > img.is-loaded,
.kkk-gallery__media img[data-kkk-gallery-img].is-loaded {
	opacity: 1;
	transform: scale(1);
	filter: none;
}

.kkk-gallery__tile:hover .kkk-gallery__media > img.is-loaded,
.kkk-gallery__tile:focus-visible .kkk-gallery__media > img.is-loaded,
.kkk-gallery__tile:hover .kkk-gallery__media img[data-kkk-gallery-img].is-loaded,
.kkk-gallery__tile:focus-visible .kkk-gallery__media img[data-kkk-gallery-img].is-loaded {
	transform: scale(1.07);
	filter: saturate(1.08) contrast(1.04);
}

.kkk-gallery__shine {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: radial-gradient(
		circle at var(--kkk-mx) var(--kkk-my),
		rgba(255, 255, 255, 0.28) 0%,
		rgba(255, 255, 255, 0.05) 28%,
		transparent 58%
	);
	opacity: 0;
	transition: opacity 0.25s ease;
	mix-blend-mode: soft-light;
}

.kkk-gallery__tile:hover .kkk-gallery__shine,
.kkk-gallery__tile:focus-visible .kkk-gallery__shine {
	opacity: 1;
}

.kkk-gallery__zoom {
	position: absolute;
	left: 50%;
	bottom: 0.65rem;
	transform: translate(-50%, 0.35rem);
	padding: 0.28rem 0.7rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(8, 12, 10, 0.72);
	color: #f2f5ef;
	font-size: 0.78rem;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	opacity: 0;
	transition: opacity 0.25s ease, transform 0.25s ease;
	pointer-events: none;
}

.kkk-gallery__tile:hover .kkk-gallery__zoom,
.kkk-gallery__tile:focus-visible .kkk-gallery__zoom {
	opacity: 1;
	transform: translate(-50%, 0);
}

.kkk-gallery__placeholder {
	display: grid;
	place-items: center;
	height: 100%;
	padding: 0.75rem;
	color: var(--kkk-text-muted);
	font-size: 0.85rem;
	text-align: center;
}

.kkk-gallery__caption {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	margin-top: 0.55rem;
	min-height: 2.4rem;
}

.kkk-gallery__name {
	font-size: 0.95rem;
	line-height: 1.3;
	color: var(--kkk-heading);
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.kkk-gallery__meta {
	font-size: 0.82rem;
	color: var(--kkk-text-muted);
}

.kkk-gallery__search {
	margin: 0 0 1rem;
	max-width: 28rem;
}

.kkk-gallery__search-label {
	position: relative;
	display: block;
}

.kkk-gallery__search-label .kkk-icon--search {
	position: absolute;
	left: 0.75rem;
	top: 50%;
	transform: translateY(-50%);
	color: var(--kkk-text-muted);
	pointer-events: none;
}

.kkk-gallery__search-input {
	width: 100%;
	box-sizing: border-box;
	height: 2.95rem;
	padding: 0 0.95rem 0 2.65rem;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-bg-elevated);
	color: var(--kkk-text);
	font: inherit;
	font-size: 1.05rem;
	line-height: 1.2;
}

.kkk-gallery__search-input:focus {
	outline: 2px solid var(--kkk-focus);
	outline-offset: 2px;
	border-color: var(--kkk-border-strong);
}

.kkk-gallery__search-hint {
	min-height: 1.25rem;
	margin: 0.35rem 0 0;
	font-size: 0.85rem;
	color: var(--kkk-text-muted);
}

.kkk-gallery__tabs {
	display: flex;
	flex-wrap: nowrap;
	gap: 0.2rem;
	margin: 0 0 1.1rem;
	padding: 0 0 0.15rem;
	border-bottom: 1px solid var(--kkk-border);
	overflow-x: auto;
	scrollbar-width: thin;
	-webkit-overflow-scrolling: touch;
}

.kkk-gallery__tab {
	appearance: none;
	display: inline-flex;
	align-items: center;
	border: 1px solid var(--kkk-border);
	border-bottom: 0;
	background: var(--kkk-bg-muted);
	color: var(--kkk-text-muted);
	font-family: "Barlow Condensed", sans-serif;
	font-size: 0.92rem;
	font-weight: 650;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 0.42rem 0.7rem 0.5rem;
	white-space: nowrap;
	transform: translateY(1px);
	transition:
		color 0.2s ease,
		background-color 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease;
}

.kkk-gallery__tab:hover {
	color: var(--kkk-heading);
	background: var(--kkk-bg-elevated);
}

.kkk-gallery__tab.is-active {
	color: var(--kkk-heading);
	border-color: var(--kkk-border-strong);
	background: var(--kkk-surface);
	transform: translateY(0);
	box-shadow: inset 0 -2px 0 var(--kkk-accent-strong);
}

.kkk-gallery__type-badge {
	position: absolute;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 0.28rem;
	padding: 0.18rem 0.42rem;
	border-radius: 0.2rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.03em;
	line-height: 1.2;
	text-transform: uppercase;
}

.kkk-gallery__type-badge {
	top: 0.5rem;
	left: 0.5rem;
	background: rgba(8, 12, 10, 0.82);
	color: #f4f7f1;
}

.kkk-gallery__type-badge--youtube {
	background: rgba(180, 28, 28, 0.9);
}

.kkk-gallery__type-badge--replay {
	background: rgba(100, 65, 165, 0.92);
}

.kkk-gallery__type-badge--highlight {
	background: rgba(145, 70, 255, 0.92);
}

.kkk-gallery__type-badge--live {
	background: rgba(190, 28, 42, 0.94);
}

.kkk-gallery__type-icon {
	width: 0.95rem;
	height: 0.95rem;
	display: block;
	flex: 0 0 auto;
	object-fit: contain;
	opacity: 1;
	transform: none;
	filter: brightness(0) invert(1);
}

.kkk-gallery__tile--clan {
	box-shadow: inset 0 0 0 1px rgba(196, 149, 58, 0.35);
}

.kkk-gallery__tile--member {
	box-shadow: inset 0 0 0 1px rgba(70, 120, 140, 0.28);
}

.kkk-gallery--videogallery .kkk-gallery__name {
	min-height: calc(1.3em * 2);
}

.kkk-gallery--youtube.is-loading [data-kkk-yt-body],
.kkk-gallery--videogallery.is-loading [data-kkk-yt-body] {
	opacity: 0.55;
	pointer-events: none;
	transition: opacity 0.2s ease;
}

button.kkk-gallery__tile {
	appearance: none;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: inherit;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.kkk-gallery__badge {
	position: absolute;
	right: 0.55rem;
	bottom: 0.55rem;
	z-index: 2;
	padding: 0.2rem 0.45rem;
	border-radius: 0.2rem;
	background: rgba(8, 12, 10, 0.78);
	color: #f4f7f1;
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.2;
}

.kkk-gallery__badge--duration {
	right: 0.55rem;
	bottom: 0.55rem;
	left: auto;
}

.kkk-gallery__badge--live {
	right: 0.55rem;
	bottom: 0.55rem;
	left: auto;
	background: rgba(190, 28, 42, 0.95);
	font-weight: 800;
	letter-spacing: 0.06em;
}

.kkk-gallery__play {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	pointer-events: none;
	opacity: 0.92;
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.kkk-gallery__play::before {
	content: "";
	width: 3rem;
	height: 3rem;
	border-radius: 999px;
	background: rgba(8, 12, 10, 0.72);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}

.kkk-gallery__play::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.55rem 0 0.55rem 0.9rem;
	border-color: transparent transparent transparent #f4f7f1;
	transform: translateX(0.12rem);
}

.kkk-gallery__tile:hover .kkk-gallery__play,
.kkk-gallery__tile:focus-visible .kkk-gallery__play {
	opacity: 1;
	transform: scale(1.04);
}

.kkk-gallery--youtube .kkk-gallery__media,
.kkk-gallery--youtube .kkk-gallery__grid--photos .kkk-gallery__media {
	aspect-ratio: 16 / 9;
}

.kkk-yt-modal-open,
.kkk-yt-modal-open body {
	overflow: hidden;
}

.kkk-yt-modal {
	border: 0;
	padding: 0;
	max-width: min(96vw, 960px);
	width: 100%;
	background: transparent;
	color: var(--kkk-text);
}

.kkk-yt-modal::backdrop {
	background: rgba(4, 7, 6, 0.84);
	backdrop-filter: blur(3px);
}

.kkk-yt-modal__panel {
	background: var(--kkk-bg-elevated);
	border: 1px solid var(--kkk-border);
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45);
}

.kkk-yt-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 0.85rem 1rem;
	border-bottom: 1px solid var(--kkk-border);
}

.kkk-yt-modal__title {
	margin: 0;
	font-size: 1.05rem;
	line-height: 1.35;
	color: var(--kkk-heading);
}

.kkk-yt-modal__close {
	appearance: none;
	width: 2.4rem;
	height: 2.4rem;
	border: 1px solid var(--kkk-border);
	background: transparent;
	color: var(--kkk-text);
	font-size: 1.55rem;
	line-height: 1;
	cursor: pointer;
}

.kkk-yt-modal__close:hover {
	border-color: var(--kkk-border-strong);
}

.kkk-yt-modal__body {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #0a0d0b;
}

.kkk-yt-modal__facade {
	appearance: none;
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: #0a0d0b;
	cursor: pointer;
}

.kkk-yt-modal__facade-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.kkk-yt-modal__facade-play {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
}

.kkk-yt-modal__facade-play::before {
	content: "";
	width: 4.25rem;
	height: 4.25rem;
	border-radius: 999px;
	background: rgba(8, 12, 10, 0.78);
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}

.kkk-yt-modal__facade-play::after {
	content: "";
	position: absolute;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 0.7rem 0 0.7rem 1.15rem;
	border-color: transparent transparent transparent #f4f7f1;
	transform: translateX(0.15rem);
}

.kkk-yt-modal__stage {
	position: absolute;
	inset: 0;
}

.kkk-yt-modal__stage iframe {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.kkk-yt-modal__facade[hidden],
.kkk-yt-modal__stage[hidden],
.kkk-yt-modal__facade-img[hidden] {
	display: none !important;
}

.kkk-gallery__viewer {
	margin: 0 0 1.5rem;
}

.kkk-gallery__nav-row {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.75rem;
	max-width: var(--kkk-gallery-max, 800px);
	margin: 0 auto 0.85rem;
}

.kkk-gallery__nav-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 5.5rem;
	padding: 0.45rem 0.85rem;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-bg-elevated);
	color: var(--kkk-text);
	text-decoration: none;
	font: inherit;
	font-size: 0.92rem;
	transition: border-color 0.2s ease, background-color 0.2s ease, color 0.2s ease;
}

.kkk-gallery__nav-btn:hover {
	border-color: var(--kkk-accent);
	color: var(--kkk-heading);
	background: var(--kkk-surface);
}

.kkk-gallery__nav-btn.is-disabled {
	opacity: 0.35;
	cursor: default;
}

.kkk-gallery__counter {
	margin: 0;
	text-align: center;
	color: var(--kkk-text-muted);
	font-size: 0.92rem;
}

.kkk-gallery__stage {
	margin: 0 auto;
	max-width: var(--kkk-gallery-max, 800px);
}

.kkk-gallery__full {
	display: block;
	color: inherit;
	text-decoration: none;
}

.kkk-gallery__stage-frame {
	position: relative;
	display: block;
	overflow: hidden;
	border: 1px solid var(--kkk-border-strong);
	background: var(--kkk-bg-elevated);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.22);
	touch-action: pan-y;
}

.kkk-gallery__photo {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	opacity: 0;
	transform: scale(1.02);
	transition: opacity 0.55s ease, transform 0.55s ease;
}

.kkk-gallery__photo.is-loaded {
	opacity: 1;
	transform: none;
}

.kkk-gallery__stage-glow {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, transparent 62%, rgba(0, 0, 0, 0.18));
	opacity: 0.65;
}

.kkk-gallery__photo-caption {
	margin: 0.85rem 0 0;
	line-height: 1.55;
	color: var(--kkk-text);
}

.kkk-gallery__hq a {
	color: var(--kkk-accent-strong);
}

.kkk-gallery__comments {
	margin: 1.75rem 0 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--kkk-border);
}

.kkk-gallery__comments-title {
	margin: 0 0 0.85rem;
	font-size: 1.15rem;
}

.kkk-gallery__comments-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}

.kkk-gallery__comment-meta {
	margin: 0 0 0.35rem;
	font-size: 0.92rem;
	color: var(--kkk-text-muted);
}

.kkk-gallery__comment-meta a {
	color: var(--kkk-accent-strong);
	text-decoration: none;
}

.kkk-gallery__comment-meta a:hover {
	text-decoration: underline;
}

.kkk-gallery__comment-text {
	line-height: 1.5;
	color: var(--kkk-text);
}

/* Lightbox */
body.kkk-lightbox-open {
	overflow: hidden;
}

.kkk-lightbox {
	position: fixed;
	inset: 0;
	z-index: 1200;
	display: grid;
	place-items: center;
	padding: max(0.85rem, env(safe-area-inset-top, 0px))
		max(1rem, env(safe-area-inset-right, 0px))
		max(0.85rem, env(safe-area-inset-bottom, 0px))
		max(1rem, env(safe-area-inset-left, 0px));
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.22s ease;
}

.kkk-lightbox.is-open {
	opacity: 1;
	pointer-events: auto;
}

.kkk-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(4, 7, 6, 0.84);
	backdrop-filter: blur(3px);
}

.kkk-lightbox__panel {
	position: relative;
	z-index: 1;
	width: min(96vw, 1100px);
	max-height: 94vh;
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	grid-template-areas:
		"close close close"
		"prev figure next"
		"caption caption caption"
		"counter counter counter"
		"link link link";
	gap: 0.65rem 0.75rem;
	align-items: center;
	justify-items: center;
}

.kkk-lightbox__close {
	grid-area: close;
	justify-self: end;
	appearance: none;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid rgba(255, 255, 255, 0.28);
	background: rgba(12, 16, 14, 0.72);
	color: #f4f7f1;
	font-size: 1.55rem;
	line-height: 1;
	cursor: pointer;
}

.kkk-lightbox__close:hover {
	background: rgba(20, 28, 22, 0.9);
}

.kkk-lightbox__dock {
	display: contents;
}

.kkk-lightbox__nav {
	appearance: none;
	width: 2.75rem;
	height: 2.75rem;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(12, 16, 14, 0.7);
	color: #f4f7f1;
	font-size: 1.8rem;
	line-height: 1;
	cursor: pointer;
}

.kkk-lightbox__nav:hover {
	background: rgba(20, 28, 22, 0.92);
}

.kkk-lightbox__nav--prev {
	grid-area: prev;
}

.kkk-lightbox__nav--next {
	grid-area: next;
}

.kkk-lightbox__figure {
	grid-area: figure;
	margin: 0;
	width: 100%;
	min-width: 0;
	max-height: calc(94vh - 7rem);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.kkk-lightbox__frame {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: 100%;
	max-height: calc(94vh - 9rem);
	overflow: hidden;
	background: rgba(0, 0, 0, 0.35);
	box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
	touch-action: pan-y;
}

.kkk-lightbox__img {
	display: block;
	max-width: min(100%, 1040px);
	max-height: calc(94vh - 9rem);
	width: auto;
	height: auto;
	object-fit: contain;
	opacity: 0;
	transform: scale(1.03);
	transition: opacity 0.35s ease, transform 0.35s ease;
}

.kkk-lightbox__img.is-loaded {
	opacity: 1;
	transform: none;
}

.kkk-lightbox__caption,
.kkk-lightbox__counter,
.kkk-lightbox__link-wrap {
	margin: 0;
	color: rgba(242, 245, 239, 0.88);
	text-align: center;
}

.kkk-lightbox__caption {
	grid-area: caption;
	width: 100%;
	font-size: 0.95rem;
}

.kkk-lightbox__counter {
	grid-area: counter;
	font-size: 0.88rem;
}

.kkk-lightbox__link-wrap {
	grid-area: link;
	font-size: 0.88rem;
}

.kkk-lightbox__link {
	color: #c5d9a8;
}

@media (max-width: 960px) {
	.kkk-gallery__grid {
		--kkk-gallery-cols: 3;
	}
}

@media (max-width: 700px) {
	.kkk-gallery__grid {
		--kkk-gallery-cols: 2;
	}

	.kkk-gallery__nav-row {
		grid-template-columns: 1fr 1fr;
		grid-template-areas:
			"counter counter"
			"prev next";
	}

	.kkk-gallery__counter {
		grid-area: counter;
	}

	.kkk-gallery__nav-btn:first-child {
		grid-area: prev;
	}

	.kkk-gallery__nav-btn:last-child {
		grid-area: next;
		justify-self: end;
	}

	.kkk-lightbox {
		padding: max(0.5rem, env(safe-area-inset-top, 0px))
			max(0.65rem, env(safe-area-inset-right, 0px))
			max(0.5rem, env(safe-area-inset-bottom, 0px))
			max(0.65rem, env(safe-area-inset-left, 0px));
	}

	.kkk-lightbox__panel {
		width: 100%;
		max-height: none;
		height: 100%;
		display: block;
	}

	.kkk-lightbox__close {
		position: absolute;
		top: max(0.35rem, env(safe-area-inset-top, 0px));
		right: max(0.35rem, env(safe-area-inset-right, 0px));
		z-index: 3;
	}

	.kkk-lightbox__figure {
		position: absolute;
		inset: 0;
		max-height: none;
		height: auto;
		width: auto;
		z-index: 0;
	}

	.kkk-lightbox__frame {
		width: 100%;
		height: 100%;
		max-height: none;
		background: transparent;
		box-shadow: none;
	}

	.kkk-lightbox__img {
		max-width: 100%;
		max-height: 100%;
	}

	.kkk-lightbox__dock {
		position: absolute;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 2;
		display: grid;
		grid-template-columns: auto minmax(0, 1fr) auto;
		grid-template-areas:
			"caption caption caption"
			"prev counter next"
			"link link link";
		align-items: center;
		gap: 0.55rem 0.85rem;
		padding: 2.75rem 0.85rem max(0.85rem, env(safe-area-inset-bottom, 0px));
		background: linear-gradient(
			to top,
			rgba(4, 7, 6, 0.92) 0%,
			rgba(4, 7, 6, 0.72) 42%,
			rgba(4, 7, 6, 0) 100%
		);
		pointer-events: none;
	}

	.kkk-lightbox__dock > * {
		pointer-events: auto;
	}

	.kkk-lightbox__caption {
		grid-area: caption;
		font-size: 0.92rem;
		line-height: 1.4;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
	}

	.kkk-lightbox__nav {
		width: 3.1rem;
		height: 3.1rem;
		font-size: 1.95rem;
	}

	.kkk-lightbox__nav--prev {
		grid-area: prev;
		justify-self: start;
	}

	.kkk-lightbox__nav--next {
		grid-area: next;
		justify-self: end;
	}

	.kkk-lightbox__counter {
		grid-area: counter;
		justify-self: center;
		font-size: 0.88rem;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
	}

	.kkk-lightbox__link-wrap {
		grid-area: link;
		padding-bottom: 0.1rem;
		text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55);
	}
}

@media (max-width: 420px) {
	.kkk-gallery__grid {
		--kkk-gallery-cols: 1;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kkk-members,
	[data-kkk-members-body].is-swapping,
	.kkk-member.is-revealing,
	.kkk-members.is-loading .kkk-members__stage::after,
	.kkk-member__panel.is-entering-forward,
	.kkk-member__panel.is-entering-back,
	.kkk-member__twitch-panel.is-active,
	.kkk-member__avatar,
	.kkk-member__progress-bar,
	.kkk-ranks__card,
	.kkk-ranks__media,
	.kkk-apply,
	.kkk-rules,
	.kkk-gallery,
	.kkk-gallery__item.is-revealed,
	.kkk-gallery__media img,
	.kkk-gallery__photo,
	.kkk-lightbox,
	.kkk-lightbox__img {
		animation: none;
		transition: none;
	}

	.kkk-ranks__card:hover {
		transform: none;
	}

	.kkk-gallery__tile,
	.kkk-gallery__tile:hover .kkk-gallery__media img.is-loaded {
		transform: none;
	}

	.kkk-gallery__item.is-pending,
	.kkk-gallery__item.is-revealed,
	.kkk-gallery__media img,
	.kkk-gallery__media img.is-loaded,
	.kkk-gallery__photo,
	.kkk-gallery__photo.is-loaded,
	.kkk-lightbox__img,
	.kkk-lightbox__img.is-loaded {
		opacity: 1;
		transform: none;
		filter: none;
	}

	.kkk-member,
	.kkk-member.is-revealing,
	.kkk-member.is-revealed {
		opacity: 1;
		transform: none;
		clip-path: none;
		filter: none;
	}

	.kkk-members.is-loading [data-kkk-members-body] {
		filter: none;
	}
}

/* --- Clanwars --- */
.kkk-wars__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--kkk-border);
}

.kkk-wars__stats {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.65rem 1.1rem;
}

.kkk-wars__stats--compact {
	margin: 0 0 1rem;
}

.kkk-wars__stat {
	display: grid;
	gap: 0.15rem;
	min-width: 4.5rem;
}

.kkk-wars__stat-label {
	font-family: "Barlow Condensed", sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kkk-text-muted);
}

.kkk-wars__stat-value {
	font-family: "Barlow Condensed", sans-serif;
	font-size: 1.55rem;
	font-weight: 650;
	line-height: 1;
	color: var(--kkk-heading);
}

.kkk-wars__stat--win .kkk-wars__stat-value {
	color: #3d8f4a;
}

.kkk-wars__stat--loss .kkk-wars__stat-value {
	color: #c45c5c;
}

.kkk-wars__stat--draw .kkk-wars__stat-value {
	color: #c48a2e;
}

.kkk-wars__table-wrap {
	overflow-x: auto;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-surface);
	box-shadow: var(--kkk-shadow);
}

.kkk-wars__table {
	width: 100%;
	border-collapse: collapse;
	min-width: 42rem;
}

.kkk-wars__table th,
.kkk-wars__table td {
	padding: 0.7rem 0.85rem;
	text-align: left;
	border-bottom: 1px solid var(--kkk-border);
	vertical-align: middle;
}

.kkk-wars__table th {
	font-family: "Barlow Condensed", sans-serif;
	font-size: 0.95rem;
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kkk-heading);
	background: var(--kkk-bg-muted);
	white-space: nowrap;
}

.kkk-wars__table tbody tr:nth-child(even) {
	background: var(--kkk-bg-muted);
}

.kkk-wars__table tbody tr:hover {
	background: var(--kkk-accent-dim);
}

.kkk-wars__table tbody tr:last-child td {
	border-bottom: 0;
}

.kkk-wars__result {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 650;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.kkk-wars__result--win {
	color: #3d8f4a;
}

.kkk-wars__result--loss {
	color: #c45c5c;
}

.kkk-wars__result--draw {
	color: #c48a2e;
}

.kkk-wars__details {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.kkk-wars__details:hover {
	color: var(--kkk-heading);
}

.kkk-wars__empty,
.kkk-wars__muted {
	color: var(--kkk-text-muted);
}

.kkk-wars__error {
	color: #c45c5c;
}

.kkk-wars--detail .kkk-wars__detail-layout {
	display: grid;
	gap: 1.5rem;
	margin: 0 0 2rem;
}

@media (min-width: 900px) {
	.kkk-wars--detail .kkk-wars__detail-layout {
		grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
		align-items: start;
	}
}

.kkk-wars__meta {
	margin: 0;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-surface);
	box-shadow: var(--kkk-shadow);
}

.kkk-wars__meta-row {
	display: grid;
	grid-template-columns: 8rem minmax(0, 1fr);
	gap: 0.75rem;
	padding: 0.7rem 0.9rem;
	border-bottom: 1px solid var(--kkk-border);
}

.kkk-wars__meta-row:nth-child(even) {
	background: var(--kkk-bg-muted);
}

.kkk-wars__meta-row:last-child {
	border-bottom: 0;
}

.kkk-wars__meta dt {
	margin: 0;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 0.95rem;
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kkk-text-muted);
}

.kkk-wars__meta dd {
	margin: 0;
	min-width: 0;
	overflow-wrap: anywhere;
}

.kkk-wars__report,
.kkk-wars__screens,
.kkk-wars__steam,
.kkk-wars__history {
	margin: 0 0 2rem;
}

.kkk-wars__report h2,
.kkk-wars__screens h2,
.kkk-wars__steam h2,
.kkk-wars__history h2 {
	margin: 0 0 0.85rem;
	font-size: 1.35rem;
	text-transform: uppercase;
}

.kkk-wars__report-body {
	line-height: 1.6;
	overflow-wrap: anywhere;
}

.kkk-wars__report-body img {
	margin: 0.75rem 0;
}

.kkk-wars__report-author {
	margin: 0.85rem 0 0;
	color: var(--kkk-text-muted);
	font-size: 0.95rem;
}

.kkk-wars__screens-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr));
	gap: 0.85rem;
}

.kkk-wars__screen {
	display: grid;
	gap: 0.45rem;
	width: 100%;
	margin: 0;
	padding: 0.45rem;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-surface);
	color: inherit;
	cursor: pointer;
	text-align: left;
	box-shadow: var(--kkk-shadow);
	transition: border-color 0.2s ease, background-color 0.2s ease, transform 0.2s ease;
}

.kkk-wars__screen:hover {
	border-color: var(--kkk-accent);
	background: var(--kkk-accent-dim);
	transform: translateY(-1px);
}

.kkk-wars__screen img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	background: var(--kkk-bg-muted);
}

.kkk-wars__screen-caption {
	font-size: 0.9rem;
	color: var(--kkk-text-muted);
	line-height: 1.3;
}

.kkk-wars__steam-card {
	position: relative;
	isolation: isolate;
	display: grid;
	gap: 1.15rem;
	padding: 1.1rem;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-surface);
	box-shadow: var(--kkk-shadow);
	overflow: hidden;
}

.kkk-wars__steam-card--bg {
	color: #f2f6fb;
	border-color: rgba(255, 255, 255, 0.16);
	background: #171c24;
}

.kkk-wars__steam-card--bg::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: var(--kkk-wars-game-bg) center / cover no-repeat;
	opacity: 0.34;
	pointer-events: none;
}

.kkk-wars__steam-card--bg::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background: linear-gradient(135deg, rgba(13, 17, 24, 0.72) 0%, rgba(13, 17, 24, 0.9) 100%);
	pointer-events: none;
}

.kkk-wars__steam-card--bg > * {
	position: relative;
	z-index: 1;
}

.kkk-wars__steam-card--bg .kkk-wars__steam-name,
.kkk-wars__steam-card--bg .kkk-wars__steam-facts span {
	color: #f2f6fb;
}

.kkk-wars__steam-card--bg .kkk-wars__steam-genres,
.kkk-wars__steam-card--bg .kkk-wars__steam-facts {
	color: #b6c0cc;
}

.kkk-wars__steam-card--bg .kkk-btn--ghost {
	color: #f2f6fb;
	border-color: rgba(255, 255, 255, 0.28);
}

.kkk-wars__steam-card--bg .kkk-btn--ghost:hover {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
}

@media (min-width: 700px) {
	.kkk-wars__steam-card {
		grid-template-columns: minmax(9.5rem, 11.5rem) minmax(0, 1fr);
		align-items: start;
	}
}

.kkk-wars__steam-cover {
	display: block;
	width: min(11.5rem, 42vw);
	max-width: 100%;
	justify-self: start;
	text-decoration: none;
}

.kkk-wars__steam-cover img {
	display: block;
	width: 100%;
	aspect-ratio: 2 / 3;
	object-fit: cover;
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35);
	background: var(--kkk-bg-muted);
}

.kkk-wars__steam-name {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	margin: 0 0 0.5rem;
	font-family: "Barlow Condensed", sans-serif;
	font-size: clamp(1.25rem, 2.4vw, 1.55rem);
	font-weight: 650;
	text-transform: uppercase;
	color: var(--kkk-heading);
	line-height: 1.15;
}

.kkk-wars__steam-icon {
	width: 1.75rem;
	height: 1.75rem;
	object-fit: contain;
	flex-shrink: 0;
	border: 1px solid var(--kkk-border);
	background: rgba(0, 0, 0, 0.25);
}

.kkk-wars__steam-genres {
	margin: 0 0 0.75rem;
	color: var(--kkk-text-muted);
	font-style: italic;
}

.kkk-wars__steam-desc {
	margin: 0 0 0.85rem;
	max-width: 42rem;
}

.kkk-wars__steam-facts {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
	display: grid;
	gap: 0.35rem;
}

.kkk-wars__steam-facts span {
	display: inline-block;
	min-width: 6.5rem;
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kkk-text-muted);
}

.kkk-wars__steam-trailer {
	margin: 0 0 1rem;
	max-width: 22rem;
	border: 1px solid rgba(255, 255, 255, 0.18);
	background: rgba(0, 0, 0, 0.35);
	overflow: hidden;
}

.kkk-wars__steam-trailer video {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

.kkk-wars__steam-actions {
	margin: 0;
}

.kkk-wars__comments {
	margin: 0 0 2rem;
	text-align: center;
}

.kkk-wars__comment-link {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.kkk-wars__back {
	margin: 1.75rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--kkk-border);
}

.kkk-wars__back-link {
	gap: 0.55rem;
}

.kkk-wars__back-link .kkk-icon--back {
	width: 1rem;
	height: 1rem;
	transition: transform 0.2s ease;
}

.kkk-wars__back-link:hover .kkk-icon--back {
	transform: translateX(-3px);
}

@media (max-width: 700px) {
	.kkk-wars__table {
		min-width: 0;
	}

	.kkk-wars__table thead {
		display: none;
	}

	.kkk-wars__table,
	.kkk-wars__table tbody,
	.kkk-wars__table tr,
	.kkk-wars__table td {
		display: block;
		width: 100%;
	}

	.kkk-wars__table tr {
		padding: 0.85rem;
		border-bottom: 1px solid var(--kkk-border);
	}

	.kkk-wars__table td {
		display: grid;
		grid-template-columns: 7rem minmax(0, 1fr);
		gap: 0.5rem;
		padding: 0.35rem 0;
		border-bottom: 0;
	}

	.kkk-wars__table td::before {
		content: attr(data-label);
		font-family: "Barlow Condensed", sans-serif;
		font-size: 0.9rem;
		font-weight: 650;
		letter-spacing: 0.06em;
		text-transform: uppercase;
		color: var(--kkk-text-muted);
	}

	.kkk-wars__meta-row {
		grid-template-columns: 1fr;
		gap: 0.2rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kkk-wars__screen,
	.kkk-wars__back-link .kkk-icon--back,
	.kkk-wars__back-link:hover .kkk-icon--back {
		transition: none;
		transform: none;
	}
}

/* --- Gästebuch --- */
.kkk-guestbook__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	justify-content: space-between;
	gap: 1rem;
	margin: 0 0 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--kkk-border);
}

.kkk-guestbook__intro {
	margin: 0;
	color: var(--kkk-text-muted);
}

.kkk-guestbook__toolbar-actions {
	display: grid;
	gap: 0.65rem;
	justify-items: end;
}

.kkk-guestbook__hint {
	margin: 0 0 1rem;
	color: var(--kkk-text-muted);
	font-size: 0.95rem;
}

.kkk-guestbook__flash {
	margin: 0 0 1.25rem;
	padding: 0.9rem 1rem;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-surface);
}

.kkk-guestbook__flash--ok {
	border-color: #3d8f4a;
	background: rgba(61, 143, 74, 0.1);
}

.kkk-guestbook__flash--error {
	border-color: #c45c5c;
	color: #c45c5c;
	background: rgba(196, 92, 92, 0.08);
}

.kkk-guestbook__flash p {
	margin: 0;
}

.kkk-guestbook__empty {
	color: var(--kkk-text-muted);
}

.kkk-guestbook__list {
	display: grid;
	gap: 1.35rem;
}

.kkk-guestbook__entry {
	padding: 1rem 1.1rem 1.15rem;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-surface);
	box-shadow: var(--kkk-shadow);
}

.kkk-guestbook__entry-head {
	margin: 0 0 0.85rem;
	padding-bottom: 0.75rem;
	border-bottom: 1px solid var(--kkk-border);
}

.kkk-guestbook__entry-top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0.75rem 1rem;
}

.kkk-guestbook__entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.45rem 0.85rem;
	margin: 0;
	min-width: 0;
}

.kkk-guestbook__entry-nr {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 650;
	letter-spacing: 0.06em;
	color: var(--kkk-accent-strong);
}

.kkk-guestbook__entry-author {
	font-family: "Barlow Condensed", sans-serif;
	font-size: 1.2rem;
	font-weight: 650;
	text-transform: uppercase;
	color: var(--kkk-heading);
}

.kkk-guestbook__entry-date {
	margin: 0;
	color: var(--kkk-text-muted);
	font-size: 0.95rem;
}

.kkk-guestbook__entry-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.55rem;
	margin: 0;
	flex-shrink: 0;
}

.kkk-mail-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-bg-muted);
	color: var(--kkk-accent-strong);
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.kkk-mail-link:hover {
	background: var(--kkk-accent-dim);
	border-color: var(--kkk-accent);
	color: var(--kkk-heading);
	text-decoration: none;
}

.kkk-mail-link__icon {
	display: block;
	width: 1.05rem;
	height: 1.05rem;
	overflow: visible;
}

.kkk-guestbook__homepage {
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
}

.kkk-guestbook__entry-body {
	overflow-wrap: anywhere;
}

.kkk-guestbook__entry-body img {
	max-width: min(100%, 45rem);
	height: auto;
	margin: 0.75rem 0;
}

.kkk-guestbook__comments {
	margin: 1.1rem 0 0;
	padding-top: 0.9rem;
	border-top: 1px dashed var(--kkk-border);
}

.kkk-guestbook__comments-title {
	margin: 0 0 0.7rem;
	font-size: 1.05rem;
	text-transform: uppercase;
}

.kkk-guestbook__comments-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.kkk-guestbook__comment {
	padding: 0.7rem 0.85rem;
	border-left: 3px solid var(--kkk-accent);
	background: var(--kkk-bg-muted);
}

.kkk-guestbook__comment-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.45rem 0.85rem;
	margin: 0 0 0.4rem;
	font-size: 0.95rem;
	color: var(--kkk-text-muted);
}

.kkk-guestbook__form {
	display: grid;
	gap: 0.85rem;
	max-width: 40rem;
	padding: 1.1rem;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-surface);
	box-shadow: var(--kkk-shadow);
}

.kkk-guestbook__label,
.kkk-guestbook__text-field {
	display: grid;
	gap: 0.35rem;
	margin: 0;
}

.kkk-guestbook__label span,
.kkk-guestbook__label-text {
	font-family: "Barlow Condensed", sans-serif;
	font-size: 0.95rem;
	font-weight: 650;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--kkk-heading);
}

.kkk-guestbook__label input,
.kkk-guestbook__label textarea,
.kkk-guestbook__text-field textarea {
	width: 100%;
	padding: 0.65rem 0.75rem;
	border: 1px solid var(--kkk-border-strong);
	background: var(--kkk-bg-elevated);
	color: var(--kkk-text);
	font: inherit;
}

.kkk-guestbook__label textarea,
.kkk-guestbook__text-field textarea {
	min-height: 12rem;
	resize: vertical;
	line-height: 1.5;
}

.kkk-guestbook__bbcode {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
}

.kkk-guestbook__bbcode-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.15rem;
	height: 2.15rem;
	margin: 0;
	padding: 0;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-bg-muted);
	color: var(--kkk-heading);
	cursor: pointer;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.kkk-guestbook__bbcode-btn:hover,
.kkk-guestbook__bbcode-btn:focus-visible {
	border-color: var(--kkk-accent);
	background: var(--kkk-accent-dim);
	color: var(--kkk-accent-strong);
}

.kkk-guestbook__bbcode-btn svg {
	display: block;
	width: 1.05rem;
	height: 1.05rem;
}

.kkk-guestbook__captcha {
	display: grid;
	gap: 0.75rem;
	margin-top: 0.25rem;
}

.kkk-guestbook__captcha-visual {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem;
}

.kkk-guestbook__captcha-visual img {
	border: 1px solid var(--kkk-border);
	background: #fff;
}

.kkk-guestbook__terms {
	margin: 0.35rem 0 0;
	color: var(--kkk-text-muted);
	font-size: 0.95rem;
}

.kkk-guestbook__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	margin-top: 0.35rem;
}

@media (max-width: 700px) {
	.kkk-guestbook__toolbar-actions {
		justify-items: start;
		width: 100%;
	}
}

/* --- Clangeschichte --- */
.kkk-story__lead {
	margin-bottom: 1.15rem;
	color: var(--kkk-text-muted);
	font-size: 1.12rem;
}

.kkk-story__toc {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin: 0 0 0.25rem;
}

.kkk-story__toc a {
	display: inline-flex;
	align-items: center;
	min-height: 1.85rem;
	padding: 0.15rem 0.65rem;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-surface);
	color: var(--kkk-text);
	font-family: "Barlow Condensed", sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-decoration: none;
	text-transform: uppercase;
}

.kkk-story__toc a:hover {
	border-color: var(--kkk-border-strong);
	background: var(--kkk-accent-dim);
	color: var(--kkk-heading);
}

.kkk-story__preface,
.kkk-story__chapter {
	scroll-margin-top: 5.5rem;
}

.kkk-story__preface {
	margin: 2rem 0 2.25rem;
	padding: 1.35rem 1.5rem 0.35rem;
	border-top: 1px solid var(--kkk-border);
	border-bottom: 1px solid var(--kkk-border);
	background:
		linear-gradient(180deg, var(--kkk-accent-dim), transparent 3.25rem);
}

.kkk-story__preface-label {
	margin: 0 0 0.9rem;
	text-align: center;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.28em;
	text-transform: uppercase;
	color: var(--kkk-text-muted);
}

.kkk-story__preface p {
	color: var(--kkk-text-muted);
	font-size: 0.9rem;
	line-height: 1.75;
}

.kkk-story__preface > p:nth-of-type(2)::first-letter {
	float: left;
	margin: 0.12rem 0.4rem 0 0;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 2.55rem;
	font-weight: 650;
	line-height: 0.8;
	color: var(--kkk-accent-strong);
}

.kkk-story__chapters {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.kkk-story__chapter {
	padding: 1.15rem 1.25rem 0.35rem 1.3rem;
	background: var(--kkk-surface);
	border: 1px solid var(--kkk-border);
	border-left: 3px solid var(--kkk-accent);
	box-shadow: var(--kkk-shadow);
}

.kkk-story__chapter--mark {
	border-left-color: var(--kkk-accent-strong);
	background:
		linear-gradient(90deg, var(--kkk-accent-dim), transparent 9rem),
		var(--kkk-surface);
}

.kkk-story__when {
	margin: 0 0 0.15rem;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--kkk-accent-strong);
}

.kkk-story__chapter h2 {
	margin: 0 0 0.75rem;
	font-size: clamp(1.35rem, 2.4vw, 1.7rem);
	text-transform: uppercase;
}

.kkk-story__emblem {
	width: min(220px, 62%);
	margin: 0.35rem auto 0.85rem;
}

.kkk-story__emblem img {
	width: 100%;
	height: auto;
	filter: var(--kkk-logo-filter);
}

.kkk-story__join {
	margin-top: 1.25rem;
	padding: 1.35rem 1.25rem 1.25rem;
	background: var(--kkk-surface);
	border: 1px solid var(--kkk-border);
	border-left: 3px solid var(--kkk-accent);
	box-shadow: var(--kkk-shadow);
}

.kkk-story__join h2 {
	margin: 0 0 0.45rem;
	font-size: 1.55rem;
	text-transform: uppercase;
}

.kkk-story__join p {
	color: var(--kkk-text-muted);
}

@media (max-width: 640px) {
	.kkk-story__preface {
		padding-left: 0.15rem;
		padding-right: 0.15rem;
	}

	.kkk-story__chapter,
	.kkk-story__join {
		padding-left: 1rem;
		padding-right: 1rem;
	}
}

/* ——— Termine ——— */
.kkk-appointments__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.75rem 1.25rem;
	margin: 0 0 1.25rem;
}

.kkk-appointments__intro {
	margin: 0;
	color: var(--kkk-text-muted);
}

.kkk-appointments__error,
.kkk-appointments__empty {
	margin: 0.5rem 0 0;
	color: var(--kkk-text-muted);
}

.kkk-appointments__error {
	color: var(--kkk-danger, #b33);
}

.kkk-appointments__list {
	display: flex;
	flex-direction: column;
	gap: 0.85rem;
}

.kkk-appointments__item {
	display: grid;
	grid-template-columns: minmax(9.5rem, 12.5rem) minmax(0, 1fr);
	gap: 0.85rem 1.25rem;
	padding: 1rem 1.15rem 1.1rem;
	background: var(--kkk-surface);
	border: 1px solid var(--kkk-border);
	border-left: 3px solid var(--kkk-accent);
	box-shadow: var(--kkk-shadow);
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.kkk-appointments__item--birthday {
	border-left-color: var(--kkk-accent-strong);
}

.kkk-appointments__item--anniversary {
	border-left-color: var(--kkk-heading);
}

.kkk-appointments__item--past {
	opacity: 0.55;
	border-left-color: var(--kkk-border);
}

.kkk-appointments__item--past .kkk-appointments__title,
.kkk-appointments__item--past .kkk-appointments__details,
.kkk-appointments__item--past .kkk-appointments__subtitle {
	color: var(--kkk-text-muted);
}

.kkk-appointments__when {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.4rem;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	line-height: 1.25;
	color: var(--kkk-heading);
}

.kkk-appointments__when time {
	display: block;
}

.kkk-appointments__when-range {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.15rem;
}

.kkk-appointments__until {
	font-size: 0.78rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kkk-text-muted);
}

.kkk-appointments__past-badge {
	display: inline-block;
	padding: 0.15rem 0.45rem;
	font-size: 0.72rem;
	font-weight: 650;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--kkk-text-muted);
	border: 1px solid var(--kkk-border);
	background: var(--kkk-bg-muted);
}

.kkk-appointments__body {
	min-width: 0;
}

.kkk-appointments__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.4rem 0.65rem;
	margin: 0 0 0.35rem;
}

.kkk-appointments__type {
	display: inline-block;
	padding: 0.12rem 0.45rem;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 0.78rem;
	font-weight: 650;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--kkk-accent-strong);
	border: 1px solid var(--kkk-accent);
	background: var(--kkk-accent-dim);
}

.kkk-appointments__type--birthday {
	color: var(--kkk-heading);
	border-color: var(--kkk-accent-strong);
}

.kkk-appointments__type--anniversary {
	color: var(--kkk-heading);
	border-color: var(--kkk-border);
	background: var(--kkk-bg-muted);
}

.kkk-appointments__category {
	font-size: 0.9rem;
	color: var(--kkk-text-muted);
}

.kkk-appointments__title {
	margin: 0 0 0.25rem;
	font-size: clamp(1.2rem, 2.2vw, 1.45rem);
	text-transform: uppercase;
	line-height: 1.15;
}

.kkk-appointments__title a {
	color: inherit;
	text-decoration: none;
}

.kkk-appointments__title a:hover {
	color: var(--kkk-accent-strong);
}

.kkk-appointments__details,
.kkk-appointments__subtitle {
	margin: 0;
	color: var(--kkk-text-muted);
	font-size: 0.98rem;
}

.kkk-appointments__text {
	margin-top: 0.65rem;
	font-size: 0.98rem;
	overflow-wrap: anywhere;
}

.kkk-appointments__text--plain {
	white-space: pre-line;
}

.kkk-appointments__text p:first-child {
	margin-top: 0;
}

.kkk-appointments__text p:last-child {
	margin-bottom: 0;
}

.kkk-appointments__person {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
}

.kkk-appointments__avatar {
	flex: 0 0 3rem;
	width: 3rem;
	height: 3rem;
	object-fit: cover;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-bg-muted);
}

.kkk-appointments__person-text {
	min-width: 0;
}

@media (max-width: 720px) {
	.kkk-appointments__item {
		grid-template-columns: 1fr;
		gap: 0.55rem;
		padding: 0.9rem 1rem 1rem;
	}

	.kkk-appointments__when {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		gap: 0.45rem 0.75rem;
		padding-bottom: 0.45rem;
		border-bottom: 1px solid var(--kkk-border);
		font-size: 1rem;
	}

	.kkk-appointments__when-range {
		flex-direction: row;
		flex-wrap: wrap;
		align-items: baseline;
		gap: 0.25rem 0.4rem;
	}

	.kkk-appointments__when-range time {
		display: inline;
	}

	.kkk-appointments__until {
		font-size: inherit;
		letter-spacing: 0.06em;
		text-transform: none;
		font-weight: 600;
	}
}

/* --- Downloads --- */
.kkk-downloads__toolbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.85rem 1.25rem;
	margin: 0 0 1.5rem;
	padding-bottom: 1rem;
	border-bottom: 1px solid var(--kkk-border);
}

.kkk-downloads__intro {
	margin: 0;
	color: var(--kkk-text-muted);
}

.kkk-downloads__crumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.35rem 0.45rem;
	margin: -0.35rem 0 1.1rem;
	font-family: "Barlow Condensed", sans-serif;
	font-size: 0.95rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--kkk-text-muted);
}

.kkk-downloads__crumb a {
	color: var(--kkk-accent);
	text-decoration: none;
}

.kkk-downloads__crumb a:hover {
	text-decoration: underline;
}

.kkk-downloads__crumb-sep {
	opacity: 0.45;
}

.kkk-downloads__back {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-family: "Barlow Condensed", sans-serif;
	font-weight: 650;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--kkk-accent);
}

.kkk-downloads__back:hover {
	text-decoration: underline;
}

.kkk-downloads__back::before {
	content: "";
	width: 0.55rem;
	height: 0.55rem;
	border-left: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.kkk-downloads__back:hover::before {
	transform: rotate(45deg) translate(-2px, 2px);
}

.kkk-downloads__error,
.kkk-downloads__empty {
	color: var(--kkk-text-muted);
}

.kkk-downloads__folders {
	list-style: none;
	margin: 0 0 1.5rem;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
	gap: 0.85rem;
}

.kkk-downloads__folder {
	opacity: 0;
	transform: translateY(0.45rem);
	animation: kkk-downloads-reveal 0.5s cubic-bezier(0.18, 0.9, 0.22, 1) both;
	animation-delay: var(--kkk-reveal-delay, 0ms);
}

.kkk-downloads__folder-link {
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: center;
	gap: 0.85rem;
	min-height: 4.5rem;
	padding: 0.85rem 1rem;
	border: 1px solid var(--kkk-border);
	background:
		linear-gradient(145deg, var(--kkk-accent-dim), transparent 55%),
		var(--kkk-surface);
	box-shadow: var(--kkk-shadow);
	color: inherit;
	text-decoration: none;
	transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;
}

.kkk-downloads__folder-link:hover,
.kkk-downloads__folder-link:focus-visible {
	border-color: var(--kkk-accent);
	transform: translateY(-2px);
	outline: none;
}

.kkk-downloads__folder-icon {
	display: grid;
	place-items: center;
	width: 2.75rem;
	height: 2.35rem;
}

.kkk-downloads__folder-glyph {
	position: relative;
	display: block;
	width: 2.15rem;
	height: 1.55rem;
	border-radius: 0.15rem 0.15rem 0.2rem 0.2rem;
	background: var(--kkk-accent);
	box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.18);
}

.kkk-downloads__folder-glyph::before {
	content: "";
	position: absolute;
	left: 0;
	top: -0.35rem;
	width: 0.95rem;
	height: 0.4rem;
	border-radius: 0.12rem 0.12rem 0 0;
	background: var(--kkk-accent-strong);
}

.kkk-downloads__folder-body {
	display: grid;
	gap: 0.15rem;
	min-width: 0;
}

.kkk-downloads__folder-name {
	font-family: "Barlow Condensed", sans-serif;
	font-size: 1.2rem;
	font-weight: 650;
	letter-spacing: 0.03em;
	color: var(--kkk-heading);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.kkk-downloads__folder-meta {
	font-size: 0.9rem;
	color: var(--kkk-text-muted);
}

.kkk-downloads__folder-arrow {
	width: 0.55rem;
	height: 0.55rem;
	border-right: 2px solid var(--kkk-accent);
	border-top: 2px solid var(--kkk-accent);
	transform: rotate(45deg);
	opacity: 0.75;
	transition: transform 0.2s ease, opacity 0.2s ease;
}

.kkk-downloads__folder-link:hover .kkk-downloads__folder-arrow {
	transform: rotate(45deg) translate(2px, -2px);
	opacity: 1;
}

.kkk-downloads__files {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.75rem;
}

.kkk-downloads__file {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0.9rem 1.15rem;
	padding: 0.95rem 1.05rem;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-surface);
	box-shadow: var(--kkk-shadow);
	opacity: 0;
	transform: translateY(0.4rem);
	animation: kkk-downloads-reveal 0.5s cubic-bezier(0.18, 0.9, 0.22, 1) both;
	animation-delay: var(--kkk-reveal-delay, 0ms);
}

.kkk-downloads__file-main {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	min-width: 0;
	flex: 1 1 16rem;
}

.kkk-downloads__file-icon {
	flex-shrink: 0;
	display: grid;
	place-items: center;
	width: 3rem;
	height: 3.35rem;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-bg-muted);
	clip-path: polygon(0 0, 70% 0, 100% 30%, 100% 100%, 0 100%);
}

.kkk-downloads__ext {
	font-family: "Barlow Condensed", sans-serif;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: var(--kkk-heading);
}

.kkk-downloads__file-icon--image { background: rgba(90, 143, 191, 0.22); }
.kkk-downloads__file-icon--archive { background: rgba(196, 138, 46, 0.22); }
.kkk-downloads__file-icon--pdf { background: rgba(196, 92, 92, 0.22); }
.kkk-downloads__file-icon--doc { background: rgba(79, 107, 46, 0.18); }
.kkk-downloads__file-icon--sheet { background: rgba(61, 143, 74, 0.18); }
.kkk-downloads__file-icon--audio { background: rgba(138, 90, 191, 0.18); }
.kkk-downloads__file-icon--video { background: rgba(191, 90, 138, 0.18); }
.kkk-downloads__file-icon--app { background: rgba(90, 111, 191, 0.18); }
.kkk-downloads__file-icon--link { background: var(--kkk-accent-dim); }

.kkk-downloads__file-info {
	min-width: 0;
	display: grid;
	gap: 0.25rem;
}

.kkk-downloads__file-title {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.65rem;
}

.kkk-downloads__file-name {
	font-family: "Barlow Condensed", sans-serif;
	font-size: 1.15rem;
	font-weight: 650;
	letter-spacing: 0.02em;
	color: var(--kkk-heading);
	word-break: break-word;
}

.kkk-downloads__file-version {
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--kkk-text-muted);
}

.kkk-downloads__file-desc {
	margin: 0;
	color: var(--kkk-text-muted);
	font-size: 0.95rem;
}

.kkk-downloads__file-meta {
	list-style: none;
	margin: 0.2rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.25rem 0.85rem;
	font-size: 0.85rem;
	color: var(--kkk-text-muted);
}

.kkk-downloads__file-meta li {
	position: relative;
}

.kkk-downloads__file-meta li + li::before {
	content: "·";
	position: absolute;
	left: -0.55rem;
	opacity: 0.55;
}

.kkk-downloads__action {
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 7.5rem;
	padding: 0.55rem 1rem;
	border: 1px solid var(--kkk-accent);
	background: var(--kkk-accent-dim);
	color: var(--kkk-heading);
	font-family: "Barlow Condensed", sans-serif;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.kkk-downloads__action:hover,
.kkk-downloads__action:focus-visible {
	background: var(--kkk-accent);
	color: #0f140e;
	outline: none;
}

@keyframes kkk-downloads-reveal {
	to {
		opacity: 1;
		transform: none;
	}
}

@media (max-width: 640px) {
	.kkk-downloads__file {
		align-items: stretch;
	}

	.kkk-downloads__action {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kkk-downloads__folder,
	.kkk-downloads__file {
		opacity: 1;
		transform: none;
		animation: none;
	}

	.kkk-downloads__folder-link,
	.kkk-downloads__folder-link:hover,
	.kkk-downloads__folder-arrow,
	.kkk-downloads__folder-link:hover .kkk-downloads__folder-arrow,
	.kkk-downloads__back::before,
	.kkk-downloads__back:hover::before,
	.kkk-downloads__action {
		transition: none;
		transform: none;
	}
}

/* —— Twitch (Mitglieder) —— */
.kkk-twitch {
	width: min(920px, 100%);
	margin: 0 auto;
}

.kkk-twitch__lead {
	margin: 0 0 1.75rem;
	max-width: 42em;
	color: var(--kkk-text-muted);
	line-height: 1.55;
}

.kkk-twitch__error,
.kkk-twitch__empty {
	margin: 0 0 1rem;
	padding: 1.1rem 1rem;
	border: 1px dashed var(--kkk-border);
	background: var(--kkk-bg-muted);
	color: var(--kkk-text-muted);
	text-align: center;
	line-height: 1.5;
}

.kkk-twitch__error {
	border-style: solid;
	border-color: color-mix(in srgb, var(--kkk-accent) 35%, var(--kkk-border));
	color: var(--kkk-heading);
}

.kkk-twitch__section {
	margin: 0 0 2.5rem;
	position: relative;
}

.kkk-twitch__section.is-loading {
	pointer-events: none;
}

.kkk-twitch__section.is-loading .kkk-twitch__section-body {
	opacity: 0.45;
}

.kkk-twitch__section-head {
	margin: 0 0 1rem;
}

.kkk-twitch__section-head h2 {
	margin: 0 0 0.35rem;
	font-family: var(--kkk-font-display, inherit);
	font-size: clamp(1.35rem, 2.4vw, 1.7rem);
	font-weight: 650;
	letter-spacing: 0.02em;
	color: var(--kkk-heading);
}

.kkk-twitch__section-lead {
	margin: 0;
	color: var(--kkk-text-muted);
	font-size: 0.95rem;
	line-height: 1.45;
}

.kkk-twitch__count {
	color: var(--kkk-text-muted);
	font-weight: 500;
}

.kkk-twitch__live-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.1rem;
}

.kkk-twitch__live-meta {
	margin: 0 0 0.75rem;
}

.kkk-twitch__live-who {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.35rem 0.5rem;
}

.kkk-twitch__nick {
	font-size: 1.05rem;
	font-weight: 700;
	color: var(--kkk-heading);
	text-decoration: none;
}

.kkk-twitch__nick:hover,
.kkk-twitch__channel:hover {
	color: var(--kkk-accent);
}

.kkk-twitch__as {
	color: var(--kkk-text-muted);
	font-size: 0.9rem;
}

.kkk-twitch__channel {
	font-weight: 650;
	color: var(--kkk-accent);
	text-decoration: none;
}

.kkk-twitch__live-badge {
	display: inline-block;
	margin-left: 0.15rem;
	padding: 0.12rem 0.4rem;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 1.2;
	color: #fff;
	background: #c62828;
}

.kkk-twitch__live-stats {
	margin: 0.4rem 0 0;
	color: var(--kkk-text-muted);
	font-size: 0.9rem;
	line-height: 1.4;
}

.kkk-twitch__game {
	color: var(--kkk-heading);
	font-weight: 650;
}

.kkk-twitch__player,
.kkk-twitch__vod-player {
	position: relative;
	width: 100%;
	overflow: hidden;
	border: 1px solid var(--kkk-border);
	background: #000;
	aspect-ratio: 16 / 9;
}

.kkk-twitch__player iframe,
.kkk-twitch__vod-player iframe {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

.kkk-twitch__live-title {
	margin: 0.65rem 0 0;
	color: var(--kkk-text-muted);
	font-size: 0.92rem;
	line-height: 1.45;
	overflow-wrap: anywhere;
}

.kkk-twitch__vod-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(15.5rem, 1fr));
	gap: 1rem;
}

.kkk-twitch__vod {
	min-width: 0;
}

.kkk-twitch__vod.is-open {
	grid-column: 1 / -1;
}

.kkk-twitch__vod-card {
	display: flex;
	flex-direction: column;
	gap: 0.55rem;
	height: 100%;
}

.kkk-twitch__vod.is-open .kkk-twitch__vod-card {
	display: grid;
	grid-template-columns: minmax(10rem, 16rem) minmax(0, 1fr);
	gap: 0.85rem;
	align-items: start;
}

.kkk-twitch__vod-open {
	appearance: none;
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 1px solid var(--kkk-border);
	background: var(--kkk-bg-muted);
	cursor: pointer;
	text-align: left;
	color: inherit;
}

.kkk-twitch__vod-open:hover {
	border-color: var(--kkk-border-strong);
}

.kkk-twitch__vod-open:focus-visible {
	outline: 2px solid var(--kkk-accent);
	outline-offset: 2px;
}

.kkk-twitch__vod-open:disabled {
	cursor: default;
	opacity: 0.7;
}

.kkk-twitch__vod-thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background: var(--kkk-bg-elevated);
}

.kkk-twitch__vod-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.35s ease;
}

.kkk-twitch__vod-open:hover .kkk-twitch__vod-thumb img {
	transform: scale(1.04);
}

.kkk-twitch__vod-thumb-empty {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, var(--kkk-bg-muted), var(--kkk-bg-elevated));
}

.kkk-twitch__vod-play {
	position: absolute;
	inset: 50% auto auto 50%;
	width: 2.5rem;
	height: 2.5rem;
	margin: -1.25rem 0 0 -1.25rem;
	border-radius: 50%;
	background: color-mix(in srgb, var(--kkk-heading) 72%, transparent);
	box-shadow: 0 0 0 1px color-mix(in srgb, #fff 20%, transparent);
	pointer-events: none;
}

.kkk-twitch__vod-play::before {
	content: '';
	position: absolute;
	left: 55%;
	top: 50%;
	transform: translate(-40%, -50%);
	border-style: solid;
	border-width: 0.45rem 0 0.45rem 0.75rem;
	border-color: transparent transparent transparent #fff;
}

.kkk-twitch__vod-dur {
	position: absolute;
	right: 0.35rem;
	bottom: 0.35rem;
	padding: 0.1rem 0.35rem;
	font-size: 0.68rem;
	font-weight: 700;
	line-height: 1.2;
	color: #fff;
	background: rgba(0, 0, 0, 0.78);
}

.kkk-twitch__vod-body {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
	min-width: 0;
}

.kkk-twitch__vod-title {
	margin: 0;
	font-size: 0.98rem;
	font-weight: 650;
	line-height: 1.3;
	color: var(--kkk-heading);
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	line-clamp: 2;
}

.kkk-twitch__vod-streamer,
.kkk-twitch__vod-meta {
	margin: 0;
	font-size: 0.85rem;
	color: var(--kkk-text-muted);
	line-height: 1.35;
}

.kkk-twitch__vod-meta {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 0.75rem;
	flex-wrap: wrap;
}

.kkk-twitch__vod-date {
	min-width: 0;
}

.kkk-twitch__vod-streamer a {
	color: inherit;
	font-weight: 600;
	text-decoration: none;
}

.kkk-twitch__vod-streamer a:hover {
	color: var(--kkk-accent);
}

.kkk-twitch__vod-login {
	font-weight: 400;
	opacity: 0.85;
}

.kkk-twitch__vod-external {
	margin-left: auto;
	color: var(--kkk-accent);
	text-decoration: none;
	font-weight: 600;
	white-space: nowrap;
}

.kkk-twitch__vod-external:hover {
	text-decoration: underline;
}

.kkk-twitch__vod-player {
	margin-top: 0.75rem;
}

.kkk-twitch__vod-player[hidden] {
	display: none;
}

.kkk-twitch__pager {
	margin-top: 1rem;
}

@media (max-width: 640px) {
	.kkk-twitch__vod.is-open .kkk-twitch__vod-card {
		grid-template-columns: 1fr;
	}

	.kkk-twitch__vod-grid {
		grid-template-columns: 1fr;
	}
}

@media (prefers-reduced-motion: reduce) {
	.kkk-twitch__vod-thumb img,
	.kkk-twitch__vod-open:hover .kkk-twitch__vod-thumb img {
		transition: none;
		transform: none;
	}

	.kkk-twitch__section.is-loading .kkk-twitch__section-body {
		opacity: 1;
	}
}