/**
 * Channel80 — Retro-Modern Branding (Template-Manifest Stufe 1+2)
 * Liegt über templates/frontend/css/styles.css (Legacy-Basis bleibt).
 */

:root {
	color-scheme: dark;

	--c80-bg: #0c0c14;
	--c80-bg-muted: #080810;
	--c80-surface: #16161f;
	--c80-surface-2: #1e1e2a;
	--c80-border: #2e2e3c;
	--c80-text: #f0ece4;
	--c80-text-muted: #a8a4b4;
	--c80-gold: #e6a800;
	--c80-gold-soft: #ffcc44;
	--c80-link: #ffcc44;
	--c80-link-hover: #fff;
	--c80-70: #c45c26;
	--c80-80: #d4145a;
	--c80-90: #0099cc;
	--c80-live: #3dffb8;
	--c80-radius: 10px;
	--c80-shadow: 0 10px 40px rgba(0, 0, 0, 0.55);

	--c80-glow-gold: rgba(230, 168, 0, 0.55);
	--c80-glow-gold-soft: rgba(255, 204, 68, 0.38);
	--c80-glow-70: rgba(196, 92, 38, 0.5);
	--c80-glow-80: rgba(212, 20, 90, 0.55);
	--c80-glow-90: rgba(0, 153, 204, 0.5);
	--c80-glow-ambient: rgba(255, 204, 68, 0.12);
	--c80-glow-strength: 1;

	--font-color: var(--c80-text);
	--link-color: var(--c80-link);
	--bg-color: var(--c80-bg);
	--content-background: var(--c80-surface);
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--c80-glow-strength: 0.75;
	}
}

body.c80-site {
	background-color: var(--c80-bg);
	color: var(--c80-text);
	min-height: 100vh;
}

/* Feste Hintergrund-Schicht — Graffiti-Showroom (Referenz: Ziegelwand + Spots + Spiegelboden) */
.c80-site .c80-bg-layer {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-color: #06040a;
	background-image:
		linear-gradient(180deg, rgba(4, 3, 8, 0.08) 0%, rgba(4, 3, 8, 0.28) 52%, rgba(2, 2, 6, 0.82) 100%),
		url(/images/c80-hero-scene-1920.png);
	background-repeat: no-repeat;
	background-position: center 22%;
	background-size: cover;
}

.c80-site .c80-bg-layer::before {
	content: "";
	position: absolute;
	inset: 0;
	background:
		radial-gradient(ellipse 90% 70% at 50% 35%, rgba(255, 255, 255, 0.06) 0%, transparent 55%),
		radial-gradient(ellipse 120% 90% at 50% 50%, transparent 35%, rgba(0, 0, 0, 0.5) 100%);
}

/* Logo steckt bereits im Hero-Bild — kein zweites Wasserzeichen */
.c80-site .c80-bg-layer::after {
	display: none;
}

@media (max-width: 900px) {
	.c80-site .c80-bg-layer {
		background-image:
			linear-gradient(180deg, rgba(4, 3, 8, 0.12) 0%, rgba(2, 2, 6, 0.78) 100%),
			url(/images/c80-graffiti-wall-header.png);
		background-position: center 28%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.c80-site .c80-bg-layer {
		animation: none;
	}
}

.c80-site .container-fluid.c80-page,
.c80-site .container-fluid {
	position: relative;
	z-index: 1;
	background: transparent !important;
	background-image: none !important;
	box-shadow: none !important;
	min-height: 100vh;
	overflow-x: clip;
}

/* Keine zusätzlichen Orbs — Hero-Foto bringt Spots & Reflexionen mit */
.c80-site .container-fluid.c80-page::before,
.c80-site .container-fluid.c80-page::after {
	display: none;
}

.c80-site a,
.c80-site a:link {
	color: var(--c80-link);
	font-weight: 600;
	text-shadow: 0 0 0 transparent;
	transition: color 0.2s ease, text-shadow 0.25s ease;
}

.c80-site a:hover {
	color: var(--c80-link-hover);
	text-shadow: 0 0 14px var(--c80-glow-gold-soft);
}

.c80-site .c80-header {
	position: sticky;
	top: 0;
	z-index: 200;
	margin-bottom: 1rem;
	background: linear-gradient(180deg, var(--c80-surface) 0%, var(--c80-bg-muted) 100%);
	border-bottom: 1px solid var(--c80-border);
	box-shadow:
		var(--c80-shadow),
		0 0 28px var(--c80-glow-ambient),
		0 4px 24px rgba(230, 168, 0, 0.12);
}

.c80-site .c80-header::after {
	content: "";
	display: block;
	height: 2px;
	background: linear-gradient(
		90deg,
		transparent 0%,
		var(--c80-glow-70) 18%,
		var(--c80-gold) 42%,
		var(--c80-glow-80) 62%,
		var(--c80-glow-90) 82%,
		transparent 100%
	);
	box-shadow: 0 0 18px var(--c80-glow-gold-soft);
	opacity: calc(0.9 * var(--c80-glow-strength));
}

.c80-site .c80-header__top {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: center;
	gap: 0.5rem 1rem;
	padding: 0.65rem 1rem 0.5rem;
}

.c80-site .c80-menu-btn {
	padding: 0.25rem 0.5rem;
	border: 1px solid var(--c80-border);
	border-radius: var(--c80-radius);
	box-shadow: 0 0 0 transparent;
	transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.c80-site .c80-menu-btn:hover,
.c80-site .c80-menu-btn:focus-visible {
	border-color: var(--c80-gold-soft);
	box-shadow: 0 0 16px var(--c80-glow-gold-soft);
}

.c80-site .c80-brand {
	min-width: 0;
}

.c80-site .c80-brand__link {
	display: inline-block;
	line-height: 0;
}

.c80-site .c80-brand__logo {
	max-width: min(180px, 44vw);
	height: auto;
	filter:
		drop-shadow(0 0 8px var(--c80-glow-gold))
		drop-shadow(0 0 20px var(--c80-glow-gold-soft));
	animation: c80-logo-pulse 4s ease-in-out infinite;
	transition: filter 0.25s ease, transform 0.25s ease;
}

.c80-site .c80-brand__link:hover .c80-brand__logo {
	transform: scale(1.03);
	filter:
		drop-shadow(0 0 12px var(--c80-glow-gold))
		drop-shadow(0 0 28px var(--c80-glow-gold-soft));
}

@keyframes c80-logo-pulse {
	0%, 100% {
		filter:
			drop-shadow(0 0 10px var(--c80-glow-gold))
			drop-shadow(0 0 22px var(--c80-glow-gold-soft));
	}
	50% {
		filter:
			drop-shadow(0 0 16px var(--c80-glow-gold))
			drop-shadow(0 0 32px var(--c80-glow-gold-soft));
	}
}

@media (prefers-reduced-motion: reduce) {
	.c80-site .c80-brand__logo {
		animation: none;
	}
}

.c80-site .c80-brand__slogan {
	margin: 0.15rem 0 0;
	font-size: 0.78rem;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--c80-gold-soft);
	text-shadow:
		0 0 8px var(--c80-glow-gold-soft),
		0 0 18px var(--c80-glow-ambient);
}

.c80-site .c80-breadcrumb-row {
	padding: 0.35rem 1rem 0.55rem;
	border-top: 1px solid var(--c80-border);
	background: rgba(0, 0, 0, 0.35);
	box-shadow: inset 0 1px 0 rgba(255, 204, 68, 0.05);
}

.c80-site .c80-breadcrumb-row .breadcrumb {
	margin: 0;
	padding: 0;
	background: transparent;
	font-size: 0.85rem;
}

.c80-site .c80-breadcrumb-row .breadcrumb-item + .breadcrumb-item::before {
	color: var(--c80-text-muted);
}

.c80-site .c80-breadcrumb-row .breadcrumb a:hover {
	text-shadow: 0 0 10px var(--c80-glow-gold-soft);
}

.c80-site .c80-breadcrumb-row .breadcrumbhere {
	color: var(--c80-gold-soft);
	font-weight: 600;
	text-shadow: 0 0 12px var(--c80-glow-gold);
}

@media (max-width: 767px) {
	.c80-site .c80-brand__slogan {
		font-size: 0.68rem;
	}
}

.c80-site .c80-offcanvas.offcanvas {
	--bs-offcanvas-bg: var(--c80-surface);
	--bs-offcanvas-color: var(--c80-text);
	background-color: var(--c80-surface) !important;
	color: var(--c80-text);
	box-shadow: 8px 0 40px rgba(0, 0, 0, 0.55), 0 0 36px var(--c80-glow-ambient);
}

.c80-site .c80-offcanvas .offcanvas-header {
	background: linear-gradient(180deg, var(--c80-surface-2), var(--c80-surface)) !important;
	border-bottom: 1px solid var(--c80-border);
	box-shadow: 0 4px 20px var(--c80-glow-ambient);
}

.c80-site .c80-offcanvas .offcanvas-title {
	color: var(--c80-gold-soft);
	font-weight: 700;
	text-shadow: 0 0 14px var(--c80-glow-gold-soft);
}

.c80-site .c80-offcanvas .offcanvas-body {
	background: var(--c80-surface) !important;
	padding: 0;
}

/* Legacy styles.css: graues Menü — vollständig überschreiben */
.c80-site .c80-offcanvas ul.mainmenu,
.c80-site .c80-offcanvas ul.mainmenu ul,
.c80-site .c80-offcanvas ul.mainmenu ul.level1,
.c80-site .c80-offcanvas ul.mainmenu ul.level2,
.c80-site .c80-offcanvas ul.mainmenu ul.level3 {
	background: transparent !important;
	background-color: transparent !important;
	padding-left: 0 !important;
}

.c80-site .c80-offcanvas ul.mainmenu li a {
	display: block;
	color: var(--c80-text) !important;
	background: transparent !important;
	background-image: none !important;
	border: none !important;
	border-top: none !important;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
	border-radius: 0;
	padding: 0.65rem 1rem !important;
	font-weight: 500;
	transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease, padding-left 0.2s ease;
}

.c80-site .c80-offcanvas ul.mainmenu ul.level1 a {
	padding-left: 1.5rem !important;
}

.c80-site .c80-offcanvas ul.mainmenu ul.level2 a {
	padding-left: 2.25rem !important;
}

.c80-site .c80-offcanvas ul.mainmenu ul.level3 a {
	padding-left: 3rem !important;
}

.c80-site .c80-offcanvas ul.mainmenu li a:hover,
.c80-site .c80-offcanvas ul.mainmenu li a:focus-visible {
	color: var(--c80-gold-soft) !important;
	background: rgba(255, 204, 68, 0.08) !important;
	box-shadow: inset 3px 0 0 var(--c80-gold), 0 0 16px var(--c80-glow-ambient);
	padding-left: 1.15rem !important;
}

.c80-site .c80-offcanvas ul.mainmenu ul.level1 a:hover,
.c80-site .c80-offcanvas ul.mainmenu ul.level1 a:focus-visible {
	padding-left: 1.65rem !important;
}

.c80-site .c80-offcanvas ul.mainmenu li span.title {
	display: block;
	background: rgba(0, 0, 0, 0.25) !important;
	color: var(--c80-text-muted) !important;
	font-size: 0.72rem !important;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	padding: 0.35rem 1rem !important;
	border-bottom: 1px solid var(--c80-border);
}

.c80-site .c80-offcanvas .btn-close {
	filter: invert(1) grayscale(1);
	opacity: 0.75;
}

.c80-site .c80-content,
.c80-site .content {
	border: 1px solid rgba(255, 204, 68, 0.14);
	border-radius: var(--c80-radius);
	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.55),
		0 0 0 1px rgba(255, 255, 255, 0.04),
		0 0 32px rgba(255, 204, 68, 0.06);
	background: linear-gradient(165deg, rgba(14, 14, 22, 0.82) 0%, rgba(8, 8, 14, 0.88) 100%);
	backdrop-filter: blur(10px) saturate(1.1);
	-webkit-backdrop-filter: blur(10px) saturate(1.1);
	color: var(--c80-text);
	padding: 1.25rem 1.5rem;
}

.c80-site .c80-content h1,
.c80-site .content h1,
.c80-site .pagetitle h1 {
	text-shadow: 0 0 20px var(--c80-glow-gold-soft);
}

.c80-site .c80-wrapper {
	padding-bottom: 2rem;
}

/* Radio offline — Legacy-Player/Stream-UI ausblenden (CMS-HTML bleibt unverändert) */
.c80-site .startplayer,
.c80-site .frame_right3,
.c80-site .toolbar,
.c80-site .trackdisplay,
.c80-site .onair {
	display: none !important;
}

/* Legacy container-fluid-Hintergrund aus styles.css neutralisieren (Media Queries) */
@media screen and (max-width: 1356px),
screen and (max-width: 1920px),
screen and (min-width: 1921px) {
	.c80-site .container-fluid {
		background: transparent !important;
		background-image: none !important;
	}
}

.c80-site .decadeblock {
	margin-top: 1.5rem;
	padding: 1rem;
	border-radius: var(--c80-radius);
	background: rgba(14, 14, 22, 0.55);
	border: 1px solid var(--c80-border);
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 1rem;
	box-shadow: 0 0 28px var(--c80-glow-ambient);
	transition: box-shadow 0.3s ease;
}

.c80-site .decadeblock#decade0 {
	border-left: 4px solid var(--c80-gold);
	box-shadow:
		0 0 28px var(--c80-glow-ambient),
		inset 4px 0 24px rgba(230, 168, 0, 0.08);
}

.c80-site .decadeblock#decade70 {
	border-left: 4px solid var(--c80-70);
	box-shadow:
		0 0 24px rgba(196, 92, 38, 0.15),
		inset 4px 0 28px rgba(196, 92, 38, 0.1);
}

.c80-site .decadeblock#decade80 {
	border-left: 4px solid var(--c80-80);
	box-shadow:
		0 0 28px rgba(212, 20, 90, 0.18),
		inset 4px 0 28px rgba(212, 20, 90, 0.1);
}

.c80-site .decadeblock#decade90 {
	border-left: 4px solid var(--c80-90);
	box-shadow:
		0 0 24px rgba(0, 153, 204, 0.16),
		inset 4px 0 28px rgba(0, 153, 204, 0.1);
}

.c80-site .decadeblock h2 {
	grid-column: 1 / -1;
	margin-bottom: 0.75rem;
	font-size: 1.15rem;
	color: var(--c80-gold-soft);
	text-shadow: 0 0 16px var(--c80-glow-gold-soft);
}

.c80-site .decadeblock#decade70 h2 {
	color: #e88a50;
	text-shadow: 0 0 16px var(--c80-glow-70);
}

.c80-site .decadeblock#decade80 h2 {
	color: #ff4d8a;
	text-shadow: 0 0 18px var(--c80-glow-80);
}

.c80-site .decadeblock#decade90 h2 {
	color: #33c4f0;
	text-shadow: 0 0 16px var(--c80-glow-90);
}

.c80-site .decadeblock .videoblock {
	display: flex;
	flex-direction: column;
	margin: 0;
}

.c80-site .videoblock {
	border: 1px solid var(--c80-border);
	border-radius: var(--c80-radius);
	overflow: hidden;
	background: var(--c80-surface-2);
	transition: transform 0.2s ease, box-shadow 0.25s ease, border-color 0.25s ease;
	box-shadow: 0 0 0 transparent;
}

.c80-site .videoblock:hover {
	transform: translateY(-3px);
	border-color: rgba(212, 20, 90, 0.45);
	box-shadow:
		0 8px 28px rgba(212, 20, 90, 0.28),
		0 0 24px var(--c80-glow-80),
		0 0 48px rgba(212, 20, 90, 0.12);
}

.c80-site .videoblock .thumb a {
	display: block;
	background: #000;
}

.c80-site .videoblock .thumb img {
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	vertical-align: middle;
	transition: filter 0.25s ease;
}

.c80-site .videoblock:hover .thumb img {
	filter: brightness(1.06) saturate(1.08);
}

.c80-site .videoblock .text {
	padding: 0.65rem 0.75rem 0.85rem;
}

.c80-site .videoblock .text .title {
	font-size: 0.9rem;
	margin-bottom: 0.35rem;
}

.c80-site .videoblock .text .desc {
	font-size: 0.78rem;
	color: var(--c80-text-muted);
	line-height: 1.35;
}

.c80-site .c80-content > .videoblock,
.c80-site .content > .videoblock {
	display: grid;
	grid-template-columns: minmax(140px, 220px) 1fr;
	margin-bottom: 0.75rem;
}

.c80-site .yearblock {
	border-radius: var(--c80-radius);
	border: 1px solid var(--c80-border);
	margin-bottom: 1rem;
}

.c80-site .yearblock.year70 {
	border-left: 4px solid var(--c80-70);
	box-shadow:
		0 0 24px rgba(196, 92, 38, 0.2),
		inset 4px 0 20px rgba(196, 92, 38, 0.08);
}

.c80-site .yearblock.year80 {
	border-left: 4px solid var(--c80-80);
	box-shadow:
		0 0 28px rgba(212, 20, 90, 0.22),
		inset 4px 0 20px rgba(212, 20, 90, 0.08);
}

.c80-site .yearblock.year90 {
	border-left: 4px solid var(--c80-90);
	box-shadow:
		0 0 24px rgba(0, 153, 204, 0.2),
		inset 4px 0 20px rgba(0, 153, 204, 0.08);
}

.c80-site.discography .content .release {
	border-radius: var(--c80-radius);
}

.c80-site.discography .content .buylinks a {
	border-radius: 6px;
}

.c80-site.mod2midi {
	--midi-card-bg: linear-gradient(145deg, var(--c80-surface-2), var(--c80-bg-muted));
	--upload-bg: linear-gradient(145deg, var(--c80-surface), var(--c80-surface-2));
}

.c80-site.mod2midi .card {
	border-color: var(--c80-border);
}

.c80-site.mod2midi .card a {
	color: var(--c80-gold-soft);
}

.c80-site .cookiewrapper {
	border-top: 1px solid var(--c80-border);
	background: var(--c80-surface);
	box-shadow: 0 -8px 32px var(--c80-glow-ambient);
}

/* ── Login-Seite (ohne Shell) ── */
body.c80-site.c80-login-page {
	min-height: 100vh;
}

body.c80-site.c80-login-page .c80-bg-layer {
	display: block;
}

.c80-site .c80-login-panel {
	max-width: 360px;
	margin: 0 auto;
	padding: 2rem 1.75rem;
	border-radius: var(--c80-radius);
	border: 1px solid var(--c80-border);
	background: linear-gradient(165deg, var(--c80-surface) 0%, var(--c80-bg-muted) 100%);
	box-shadow:
		var(--c80-shadow),
		0 0 48px var(--c80-glow-ambient),
		0 0 80px rgba(230, 168, 0, 0.08);
}

.c80-site .c80-login-panel h1 {
	text-shadow: 0 0 18px var(--c80-glow-gold-soft);
}

.c80-site .c80-login-panel .form-control {
	background: var(--c80-surface-2);
	border-color: var(--c80-border);
	color: var(--c80-text);
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.c80-site .c80-login-panel .form-control:focus {
	border-color: var(--c80-gold-soft);
	box-shadow:
		0 0 0 0.2rem rgba(230, 168, 0, 0.15),
		0 0 20px var(--c80-glow-gold-soft);
	background: var(--c80-surface-2);
	color: var(--c80-text);
}

.c80-site .btn-primary {
	background: linear-gradient(135deg, var(--c80-gold) 0%, #c48800 100%);
	border: none;
	color: #1a1a22;
	font-weight: 700;
	box-shadow:
		0 4px 16px rgba(230, 168, 0, 0.35),
		0 0 24px var(--c80-glow-gold-soft);
	transition: transform 0.15s ease, box-shadow 0.2s ease;
}

.c80-site .btn-primary:hover,
.c80-site .btn-primary:focus-visible {
	background: linear-gradient(135deg, var(--c80-gold-soft) 0%, var(--c80-gold) 100%);
	color: #0a0a10;
	box-shadow:
		0 6px 22px rgba(230, 168, 0, 0.45),
		0 0 32px var(--c80-glow-gold);
	transform: translateY(-1px);
}

.c80-site #resultToast .toast-header svg rect {
	filter: drop-shadow(0 0 6px var(--c80-glow-gold));
}

/* Bootstrap / Legacy auf dunklem Grund */
.c80-site .form-control,
.c80-site .form-select {
	background-color: var(--c80-surface-2);
	border-color: var(--c80-border);
	color: var(--c80-text);
}

.c80-site .form-control::placeholder {
	color: var(--c80-text-muted);
	opacity: 0.75;
}

.c80-site .text-body-secondary {
	color: var(--c80-text-muted) !important;
}

.c80-site .toast {
	background: var(--c80-surface);
	border-color: var(--c80-border);
	color: var(--c80-text);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.55), 0 0 24px var(--c80-glow-ambient);
}

.c80-site .toast-header {
	background: var(--c80-surface-2);
	border-bottom-color: var(--c80-border);
	color: var(--c80-text);
}

.c80-site .btn-close {
	filter: invert(1) grayscale(1);
	opacity: 0.7;
}