/* Design: Amateure 2 – Videothek im Camcorder-Look: Anthrazit, Bernstein, OSD-Einblendungen, Filmstreifen */
:root {
	--ct-bg: #0f0f12;
	--ct-surface: #18181d;
	--ct-surface-2: #23232a;
	--ct-text: #f1efe9;
	--ct-muted: #a3a0a8;
	--ct-line: rgba(241, 239, 233, .09);
	--ct-accent: #ffb000;
	--ct-accent-text: #1a1300;
	--ct-live: #ff4040;
	--ct-live-text: #ffffff;
	--ct-header-bg: #0b0b0d;
	--ct-star: #ffb000;

	--ct-osd: "VT323", ui-monospace, "Courier New", monospace;
	--ct-rec: #ff4040;

	--ct-font-body: "Inter", system-ui, sans-serif;
	--ct-font-head: "Oswald", "Arial Narrow", sans-serif;
	--ct-head-weight: 600;
	--ct-head-tracking: 0.01em;
	--ct-head-transform: uppercase;

	--ct-radius: 6px;
	--ct-radius-img: 4px;
	--ct-radius-btn: 4px;
	--ct-card-ratio: 16 / 9;
	--ct-gap: 26px 18px;
}

/* Kopf: Name groß, daneben blinkendes REC, Untertitel als Camcorder-Datumsstempel. */
.ct-header { border-bottom: 1px solid var(--ct-line); }
.ct-brand__name { font-size: 1.9rem; letter-spacing: .03em; }
.ct-brand__name::after { content: "● REC"; margin-left: 12px; font-family: var(--ct-osd); font-size: 1.15rem; letter-spacing: .06em; color: var(--ct-rec); vertical-align: .35em; animation: ct-rec-blink 1.4s steps(1) infinite; }
@keyframes ct-rec-blink { 50% { opacity: 0; } }
.ct-brand__tagline { font-family: var(--ct-osd); font-size: 1.15rem; letter-spacing: .06em; color: var(--ct-accent); text-transform: uppercase; }

.ct-page-title, .ct-front h1 { font-size: clamp(1.8rem, 1.3rem + 2vw, 2.8rem); line-height: 1.1; }
.ct-section-title { display: flex; align-items: center; gap: 12px; }
.ct-section-title::before { content: "▶"; font-family: var(--ct-osd); font-size: 1.4em; color: var(--ct-accent); line-height: 1; }
.ct-prose h3, .ct-front h3 { font-family: var(--ct-font-body); text-transform: none; font-weight: 800; letter-spacing: -.01em; }
.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); }

/* Cam-Kacheln im 16:9-Format mit OSD-Einblendungen. */
.ct-card__media { box-shadow: 0 0 0 1px var(--ct-line); }
.ct-card__media::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px); opacity: 0; transition: opacity .2s; pointer-events: none; }
.ct-card:hover .ct-card__media::after { opacity: 1; }
.ct-card__name { font-family: var(--ct-font-head); text-transform: uppercase; letter-spacing: .02em; font-weight: 600; font-size: 1.05rem; }
.ct-card__age::after { content: " Jahre"; }
.ct-live { font-family: var(--ct-osd); font-size: 1rem; font-weight: 400; letter-spacing: .06em; border-radius: 2px; padding: 2px 7px 1px 6px; text-transform: uppercase; }
.ct-live--on { background: rgba(0, 0, 0, .55); color: var(--ct-rec); }
.ct-live--on::before { background: var(--ct-rec); animation: ct-rec-blink 1.4s steps(1) infinite; }
.ct-feature { font-family: var(--ct-osd); font-size: .95rem; font-weight: 400; letter-spacing: .05em; border-radius: 2px; color: var(--ct-accent); text-transform: uppercase; }

/* Video-Kacheln: PLAY-Einblendung, Zeitcode, Fortschrittsbalken beim Darüberfahren. */
.ct-video__media { box-shadow: 0 0 0 1px var(--ct-line); }
.ct-video__media::before { content: "PLAY ▶"; position: absolute; left: 8px; top: 6px; font-family: var(--ct-osd); font-size: 1.05rem; letter-spacing: .06em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); z-index: 1; }
.ct-video__media::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--ct-rec); transition: width .9s ease; }
.ct-video__link:hover .ct-video__media::after { width: 100%; }
.ct-video__play { background: rgba(255, 176, 0, .9); box-shadow: none; opacity: 0; transition: opacity .2s, transform .2s; transform: scale(.8); }
.ct-video__play::after { border-color: transparent transparent transparent #1a1300; }
.ct-video__link:hover .ct-video__play { opacity: 1; transform: scale(1); }
.ct-video__time { font-family: var(--ct-osd); font-size: 1.05rem; font-weight: 400; letter-spacing: .05em; background: rgba(0, 0, 0, .65); color: var(--ct-accent); }
.ct-video__title { font-weight: 700; }
.ct-video__meta .ct-feature { background: transparent; border: 1px solid rgba(255, 176, 0, .35); }
.ct-video__cam a { color: var(--ct-accent); }

/* Video-Bereich auf der Startseite als Filmstreifen. */
.ct-videos--front { position: relative; padding: 26px 22px 30px; background: #08080a; border-radius: var(--ct-radius); }
.ct-videos--front::before, .ct-videos--front::after { content: ""; position: absolute; left: 0; right: 0; height: 12px; background: repeating-linear-gradient(90deg, transparent 0 10px, rgba(241, 239, 233, .14) 10px 22px, transparent 22px 30px); }
.ct-videos--front::before { top: 6px; }
.ct-videos--front::after { bottom: 6px; }

/* Buttons. */
.ct-btn { font-family: var(--ct-font-head); text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.ct-btn--primary { box-shadow: 0 10px 24px -14px rgba(255, 176, 0, .9); }
.ct-btn--primary:hover { background: #ffc233; }
.ct-chip { border-radius: 2px; }
.ct-pagination a, .ct-pagination span { font-family: var(--ct-osd); font-size: 1.15rem; }

/* Videoseite: Bildschirm mit Vignette und Einblendungen, Szenen als Filmstreifen. */
.ct-vpage__screen { box-shadow: 0 0 0 1px var(--ct-line), 0 24px 50px -30px rgba(0, 0, 0, .9); }
.ct-vpage__screen::before { content: "PLAY ▶"; position: absolute; left: 14px; top: 10px; z-index: 2; font-family: var(--ct-osd); font-size: 1.6rem; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .8); }
.ct-vpage__screen::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(0, 0, 0, .55)), repeating-linear-gradient(to bottom, rgba(0, 0, 0, .12) 0 1px, transparent 1px 3px); pointer-events: none; }
.ct-vpage__screen .ct-video__play { opacity: .95; transform: none; z-index: 2; }
.ct-vpage__screen .ct-video__time { z-index: 2; font-size: 1.4rem; right: 14px; bottom: 12px; }
.ct-vpage__thumbs { padding: 14px 10px; background: #08080a; border-radius: var(--ct-radius); position: relative; }
.ct-vpage__thumbs::before, .ct-vpage__thumbs::after { content: ""; position: absolute; left: 0; right: 0; height: 7px; background: repeating-linear-gradient(90deg, transparent 0 8px, rgba(241, 239, 233, .16) 8px 16px, transparent 16px 22px); }
.ct-vpage__thumbs::before { top: 3px; }
.ct-vpage__thumbs::after { bottom: 3px; }
.ct-vpage__facts dd { font-family: var(--ct-osd); font-size: 1.25rem; font-weight: 400; color: var(--ct-accent); }
.ct-vpage__facts dd a { color: inherit; }
.ct-vpage__quote { border-left-color: var(--ct-accent); }

/* Redaktionsstrecke. */
.ct-stats strong { font-family: var(--ct-osd); font-weight: 400; font-size: 2.6rem; color: var(--ct-accent); }
.ct-cotm { border-left: 3px solid var(--ct-accent); }
.ct-cotm__kicker { font-family: var(--ct-osd); font-size: 1.15rem; font-weight: 400; color: var(--ct-accent); }
.ct-cotm__title a, .ct-tow__more { color: var(--ct-accent); }
.ct-tow__list a { aspect-ratio: 16 / 10; }

@media (max-width: 600px) {
	.ct-brand__name { font-size: 1.5rem; }
	.ct-brand__name::after { font-size: .95rem; margin-left: 8px; }
	.ct-videos--front { padding: 24px 12px 28px; }
}
@media (prefers-reduced-motion: reduce) {
	.ct-brand__name::after, .ct-live--on::before { animation: none; }
	.ct-video__media::after { transition: none; }
}