/* Design: Amateure 9 – Bento-Look: Tiefschwarz, Neon-Limette, Space Grotesk, kantige Kacheln mit feinem Raster */
:root {
	--ct-bg: #070807;
	--ct-surface: #111311;
	--ct-surface-2: #1a1d1a;
	--ct-text: #eef2ea;
	--ct-muted: #9aa294;
	--ct-line: rgba(200, 255, 60, .12);
	--ct-accent: #c8ff3c;
	--ct-accent-text: #0b0f02;
	--ct-live: #ff5a36;
	--ct-live-text: #ffffff;
	--ct-header-bg: rgba(7, 8, 7, .9);
	--ct-star: #c8ff3c;

	--ct-font-body: "Inter", system-ui, sans-serif;
	--ct-font-head: "Space Grotesk", "Inter", system-ui, sans-serif;
	--ct-head-weight: 700;
	--ct-head-tracking: -0.03em;
	--ct-head-transform: none;

	--ct-radius: 6px;
	--ct-radius-img: 4px;
	--ct-radius-btn: 4px;
	--ct-card-ratio: 3 / 4;
	--ct-gap: 16px 12px;
}

/* Hintergrund: feines Messraster, oben ein Hauch Limette. */
body {
	background:
		radial-gradient(800px 300px at 20% -120px, rgba(200, 255, 60, .12), transparent 70%),
		linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 48px 48px,
		linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px) 0 0 / 48px 48px,
		var(--ct-bg);
}
.ct-header { border-bottom: 1px solid var(--ct-line); backdrop-filter: blur(8px); }
.ct-brand__name { color: var(--ct-accent); letter-spacing: -.04em; }

.ct-page-title, .ct-front h1 { font-size: clamp(2rem, 1.3rem + 2.6vw, 3.4rem); line-height: 1; letter-spacing: -.04em; }
.ct-section-title { font-size: 1.5rem; display: flex; align-items: center; gap: 12px; }
.ct-section-title::before { content: ""; width: 12px; height: 12px; background: var(--ct-accent); border-radius: 2px; flex: none; }
.ct-prose h3, .ct-front h3 { color: var(--ct-accent); font-family: var(--ct-font-head); }
.ct-prose a, .ct-front p:not(.ct-card__name) a:not(.ct-btn), .ct-front li a:not(.ct-video__link) { color: var(--ct-accent); }

/* Bento-Kacheln. */
.ct-bento__tile { background: rgba(17, 19, 17, .92); border-color: rgba(255, 255, 255, .08); }
.ct-bento__tile--stats { background: linear-gradient(160deg, rgba(200, 255, 60, .14), rgba(17, 19, 17, .95) 60%); }
.ct-bento__tile--search { background: var(--ct-accent); border-color: var(--ct-accent); }
.ct-bento__tile--search .ct-bento__label { color: var(--ct-accent-text); }
.ct-bento__tile--search input { background: rgba(7, 8, 7, .9); border-color: transparent; }
.ct-bento__tile--search .ct-btn--primary { background: #0b0f02; color: var(--ct-accent); box-shadow: none; }
a.ct-bento__tile:hover { border-color: var(--ct-accent); }
.ct-front .ct-bento__tile--cats a { color: var(--ct-text); }
.ct-front .ct-bento__tile--cats a:hover { background: var(--ct-accent); color: var(--ct-accent-text); }
.ct-front .ct-bento__tile--cats a:hover span { color: var(--ct-accent-text); }
.ct-bento__faces a { box-shadow: 0 0 0 3px #111311, 0 0 0 5px var(--ct-live); }
.ct-video__play { background: var(--ct-accent); box-shadow: 0 0 0 6px rgba(200, 255, 60, .18); }
.ct-video__play::before, .ct-video__play::after { border-left-color: #0b0f02; }
.ct-video__time { background: rgba(7, 8, 7, .85); color: var(--ct-accent); font-variant-numeric: tabular-nums; }
.ct-video__badge--live { background: var(--ct-live); }
.ct-video__badge--new { background: var(--ct-accent); color: var(--ct-accent-text); }

/* Kanäle und Clip-Kacheln. */
.ct-channel { background: rgba(17, 19, 17, .9); border-color: rgba(255, 255, 255, .07); }
.ct-front .ct-portal li a:not(.ct-video__link), .ct-front .ct-channel__who { color: var(--ct-text); }
.ct-front .ct-portal .ct-pclip__meta a:not(.ct-video__link) { color: var(--ct-muted); }
.ct-front .ct-channel__more { color: var(--ct-accent); }
.ct-pclip .ct-video__media { border-radius: var(--ct-radius-img); box-shadow: 0 0 0 1px rgba(255, 255, 255, .06); }
.ct-pclip:hover .ct-video__media { box-shadow: 0 0 0 2px var(--ct-accent); }
.ct-pclip__title { font-family: var(--ct-font-head); font-weight: 600; letter-spacing: -.01em; }
.ct-box { background: rgba(17, 19, 17, .9); border-color: rgba(255, 255, 255, .07); }
.ct-box__title { font-family: var(--ct-font-head); }
.ct-box__more { color: var(--ct-accent); }
.ct-vtabs button { border-radius: 4px; font-family: var(--ct-font-head); }
.ct-vtabs button.is-active, .ct-vtabs button:hover { background: var(--ct-accent); border-color: var(--ct-accent); color: var(--ct-accent-text); }

/* Cams klein im Hintergrund. */
.ct-card__media { border-radius: var(--ct-radius-img); }
.ct-card:hover .ct-card__media { box-shadow: 0 0 0 2px var(--ct-accent); }
.ct-card__name { font-family: var(--ct-font-head); }
.ct-live--on { background: var(--ct-live); color: #fff; }

/* Buttons. */
.ct-btn { font-family: var(--ct-font-head); font-weight: 700; letter-spacing: -.01em; }
.ct-btn--primary { background: var(--ct-accent); color: var(--ct-accent-text); }
.ct-btn--primary:hover { background: #d9ff70; }
.ct-btn--ghost { border-color: rgba(200, 255, 60, .5); color: var(--ct-accent); }
.ct-btn--ghost:hover { background: var(--ct-accent); color: var(--ct-accent-text); }
.ct-pagination .current { background: var(--ct-accent); color: var(--ct-accent-text); }
.ct-vpage__quote { border-left-color: var(--ct-accent); }
.ct-figure img { border-radius: var(--ct-radius-img); box-shadow: 0 0 0 1px var(--ct-line); }