/* Design: Amateure 6 – Videowand im Kino-Look: Graphit, Cyan, Bernstein, Bebas Neue, Mosaik, Themen-Collagen, Filter */
:root {
	--ct-bg: #0b0d10;
	--ct-surface: #14171c;
	--ct-surface-2: #1c2027;
	--ct-text: #eef2f6;
	--ct-muted: #8d97a5;
	--ct-line: rgba(255, 255, 255, .07);
	--ct-accent: #22d3ee;
	--ct-accent-text: #04161a;
	--ct-live: #ff4d6d;
	--ct-live-text: #ffffff;
	--ct-header-bg: rgba(11, 13, 16, .9);
	--ct-star: #fbbf24;

	--ct-amber: #fbbf24;
	--ct-glow: 0 0 0 1px rgba(34, 211, 238, .5), 0 18px 40px -18px rgba(34, 211, 238, .55);

	--ct-font-body: "Inter", system-ui, sans-serif;
	--ct-font-head: "Bebas Neue", "Oswald", "Arial Narrow", sans-serif;
	--ct-head-weight: 400;
	--ct-head-tracking: .02em;
	--ct-head-transform: uppercase;

	--ct-radius: 12px;
	--ct-radius-img: 10px;
	--ct-radius-btn: 8px;
	--ct-card-ratio: 4 / 3;
	--ct-gap: 18px 12px;
}

/* Hintergrund: Projektorlicht von oben. */
body { background: radial-gradient(900px 380px at 50% -160px, rgba(34, 211, 238, .12), transparent 70%), radial-gradient(700px 400px at 100% 40%, rgba(251, 191, 36, .05), transparent 70%), var(--ct-bg); }

/* Kopf. */
.ct-header { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); border-bottom: 1px solid var(--ct-line); }
.ct-brand__name { font-size: 2.1rem; letter-spacing: .04em; line-height: 1; }
.ct-brand__name::first-letter { color: var(--ct-accent); }
.ct-brand__tagline { font-size: .75rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ct-amber); }

/* Überschriften: Bebas groß, Abschnittstitel mit „Filmrollen“-Punkt. */
.ct-page-title, .ct-front h1 { font-size: clamp(2.2rem, 1.5rem + 2.6vw, 3.6rem); line-height: .98; letter-spacing: .015em; }
.ct-section-title { display: flex; align-items: center; gap: 12px; font-size: 1.9rem; letter-spacing: .03em; }
.ct-section-title::before { content: ""; width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; background: radial-gradient(circle, var(--ct-bg) 0 3px, transparent 3.5px), radial-gradient(circle at 50% 18%, var(--ct-bg) 0 2.5px, transparent 3px), radial-gradient(circle at 82% 50%, var(--ct-bg) 0 2.5px, transparent 3px), radial-gradient(circle at 50% 82%, var(--ct-bg) 0 2.5px, transparent 3px), radial-gradient(circle at 18% 50%, var(--ct-bg) 0 2.5px, transparent 3px), var(--ct-accent); box-shadow: 0 0 14px rgba(34, 211, 238, .6); }
.ct-prose h2, .ct-front h2 { font-size: 2rem; }
.ct-prose h3, .ct-front h3 { font-family: var(--ct-font-body); text-transform: none; font-weight: 800; letter-spacing: -.01em; font-size: 1.15rem; color: var(--ct-amber); }
.ct-prose a, .ct-front p:not(.ct-card__name) a:not(.ct-btn), .ct-front li a:not(.ct-video__link):not(.ct-stack) { color: var(--ct-accent); }

/* Mosaik. */
.ct-wall .ct-video__media { border-radius: 12px; }
.ct-wall .ct-video:first-child .ct-video__media { box-shadow: 0 0 0 1px rgba(251, 191, 36, .35), 0 30px 60px -30px rgba(0, 0, 0, .9); }
.ct-wall .ct-video:first-child .ct-video__title { font-family: var(--ct-font-head); font-weight: 400; font-size: 2.4rem; letter-spacing: .02em; }
.ct-wall .ct-video:first-child .ct-video__media::before { content: "★ Empfehlung"; position: absolute; left: 16px; top: 14px; z-index: 3; padding: 4px 10px; border-radius: 6px; background: var(--ct-amber); color: #1a1300; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.ct-wall .ct-video:first-child .ct-video__badges { top: 46px; left: 16px; }
.ct-video__link:hover .ct-video__media { box-shadow: var(--ct-glow); }
.ct-video__media { transition: box-shadow .25s; }
.ct-video__play { background: rgba(34, 211, 238, .92); box-shadow: 0 10px 24px -8px rgba(34, 211, 238, .9); }
.ct-video__play::after { border-color: transparent transparent transparent #04161a; }
.ct-video__time { background: rgba(11, 13, 16, .82); color: var(--ct-amber); font-variant-numeric: tabular-nums; }
.ct-video__title { font-weight: 700; }
.ct-video__cam a { color: var(--ct-accent); }
.ct-video__meta .ct-feature { background: transparent; border: 1px solid rgba(255, 255, 255, .16); }

/* Themen-Kacheln wie Kinokarten (Lochrand). */
.ct-topic { position: relative; background: var(--ct-surface); box-shadow: inset 0 0 0 1px var(--ct-line); }
.ct-topic__collage { aspect-ratio: 16 / 10; }
.ct-topic__name { font-size: 1.5rem; padding-top: 12px; letter-spacing: .03em; border-top: 2px dashed rgba(255, 255, 255, .12); }
.ct-topic__count { color: var(--ct-amber); font-weight: 700; }
.ct-topic:hover { box-shadow: var(--ct-glow); }

/* Filter. */
.ct-filter__chip { border-radius: 8px; background: var(--ct-surface-2); }
.ct-filter__chip.is-active { box-shadow: 0 8px 20px -10px rgba(34, 211, 238, .9); }
.ct-filter__chip--tag.is-active { background: var(--ct-amber); border-color: var(--ct-amber); color: #1a1300; }

/* Stapel. */
.ct-stack__name { font-family: var(--ct-font-head); font-weight: 400; font-size: 1.4rem; letter-spacing: .03em; }
.ct-stack__count { color: var(--ct-amber); font-weight: 700; }
.ct-stack__pile img { border-color: var(--ct-bg); }

/* Cams im Hintergrund: kleine Kacheln, gedämpft bis zum Darüberfahren. */
.ct-grid { --ct-gap: 14px 10px; }
.ct-card__name { font-family: var(--ct-font-body); font-weight: 700; font-size: .9rem; }
.ct-card__media { border-radius: 8px; }
.ct-card .ct-card__img { filter: saturate(.85) brightness(.9); transition: filter .25s; }
.ct-card:hover .ct-card__img { filter: none; }
.ct-card__motto { display: none; }
.ct-live { font-size: .6rem; border-radius: 6px; }

/* Buttons. */
.ct-btn { font-family: var(--ct-font-head); font-weight: 400; font-size: 1.2rem; letter-spacing: .06em; }
.ct-btn--primary { background: var(--ct-accent); color: #04161a; box-shadow: 0 12px 28px -12px rgba(34, 211, 238, .9); }
.ct-btn--primary:hover { background: #67e8f9; }
.ct-btn--ghost { border-color: rgba(255, 255, 255, .16); color: #fff; }
.ct-btn--ghost:hover { border-color: var(--ct-accent); color: var(--ct-accent); }
.ct-pagination .current { background: var(--ct-accent); color: #04161a; }
.ct-chip:hover { border-color: var(--ct-accent); color: var(--ct-accent); }

/* Videoseite. */
.ct-vpage__quote { border-left-color: var(--ct-amber); }
.ct-vpage__facts dd { color: var(--ct-amber); }
.ct-figure img { border-radius: 12px; }

@media (max-width: 600px) {
	.ct-brand__name { font-size: 1.6rem; }
	.ct-wall .ct-video:first-child .ct-video__title { font-size: 1.6rem; }
	.ct-section-title { font-size: 1.5rem; }
}