/* Design: Transen 3 – Pastell-Glamour: Pflaumen-Schwarz, Rosa, Hellblau, Weiß (Trans-Flagge), Oswald Kursiv, Pacifico */
:root {
	--ct-bg: #110b15;
	--ct-surface: #1b1321;
	--ct-surface-2: #261b2e;
	--ct-text: #fff4fb;
	--ct-muted: #c3adc4;
	--ct-line: rgba(255, 160, 210, .16);
	--ct-accent: #ff8ccf;
	--ct-accent-text: #2a0f20;
	--ct-blue: #7fd6ff;
	--ct-live: #ff5aa5;
	--ct-live-text: #ffffff;
	--ct-header-bg: rgba(17, 11, 21, .9);
	--ct-star: #ffc6e6;
	--ct-flag: linear-gradient(90deg, #7fd6ff 0 20%, #ffb0d8 20% 40%, #ffffff 40% 60%, #ffb0d8 60% 80%, #7fd6ff 80%);

	--ct-font-body: "Inter", system-ui, sans-serif;
	--ct-font-head: "Oswald", "Inter", system-ui, sans-serif;
	--ct-head-weight: 700;
	--ct-head-tracking: .01em;
	--ct-head-transform: uppercase;

	--ct-radius: 18px;
	--ct-radius-img: 14px;
	--ct-radius-btn: 999px;
	--ct-card-ratio: 3 / 4;
	--ct-gap: 18px 14px;
	--ct-logo-h: 72px;
}

/* Hintergrund: rosa und hellblauer Schimmer wie der Heiligenschein im Logo. */
body {
	background:
		radial-gradient(700px 380px at 12% -120px, rgba(255, 140, 207, .24), transparent 70%),
		radial-gradient(640px 360px at 95% 0, rgba(127, 214, 255, .16), transparent 70%),
		var(--ct-bg);
}
.ct-header { border-bottom: 0; }
.ct-header::after { content: ""; display: block; height: 4px; background: var(--ct-flag); opacity: .9; }
.ct-brand__logo { filter: drop-shadow(0 0 14px rgba(255, 140, 207, .5)); }
.ct-brand__name { font-family: var(--ct-font-head); font-style: italic; font-weight: 700; text-transform: uppercase; font-size: 1.8rem; color: #ffd6ee; text-shadow: 0 0 14px rgba(255, 140, 207, .7); }

/* Überschriften: Oswald Kursiv in Großbuchstaben, wie die Logo-Schrift. */
.ct-page-title, .ct-front h1 { font-family: var(--ct-font-head); font-style: italic; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; font-size: clamp(1.9rem, 1.3rem + 2.3vw, 3.1rem); line-height: 1.08; color: #ffe3f3; text-shadow: 0 0 22px rgba(255, 140, 207, .55); }
.ct-section-title, .ct-front h2 { font-family: var(--ct-font-head); font-style: italic; font-weight: 700; text-transform: uppercase; color: #fff; }
.ct-section-title::after { content: ""; display: block; width: 90px; height: 4px; margin-top: 6px; border-radius: 2px; background: var(--ct-flag); }
.ct-prose h3, .ct-front h3 { color: var(--ct-blue); font-family: var(--ct-font-head); font-style: italic; text-transform: uppercase; letter-spacing: .02em; }
.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-star); }
.ct-front .ct-portal li a:not(.ct-video__link) { color: var(--ct-text); }

/* Cams und Clips. */
.ct-card__media, .ct-pclip .ct-video__media { border-radius: var(--ct-radius-img); }
.ct-card:hover .ct-card__media, .ct-pclip:hover .ct-video__media { box-shadow: 0 0 0 2px var(--ct-accent), 0 0 26px rgba(255, 140, 207, .5); }
.ct-live--on { background: var(--ct-live); color: #fff; }
.ct-video__play { background: linear-gradient(135deg, var(--ct-blue), var(--ct-accent)); box-shadow: 0 0 20px rgba(255, 140, 207, .6); }
.ct-video__time { background: rgba(17, 11, 21, .85); border-radius: 999px; padding-inline: 8px; }

/* Textabschnitte: Rand in den Farben der Flagge. */
.ct-chunk { border: 0; box-shadow: inset 0 0 0 1px var(--ct-line); }
.ct-chunk::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: var(--ct-radius) var(--ct-radius) 0 0; background: var(--ct-flag); opacity: .8; }
.ct-chunk--b { background: linear-gradient(135deg, rgba(127, 214, 255, .07), var(--ct-surface) 55%); }
.ct-chunk--last { box-shadow: none; }
.ct-chunk--last::before { display: none; }

/* Buttons. */
.ct-btn { font-weight: 800; }
.ct-btn--primary { background: linear-gradient(90deg, var(--ct-blue), var(--ct-accent)); color: #2a0f20; box-shadow: 0 0 24px -4px rgba(255, 140, 207, .7); }
.ct-btn--primary:hover { filter: brightness(1.06); }
.ct-btn--ghost { border-color: rgba(255, 160, 210, .45); color: #fff; }
.ct-btn--ghost:hover { border-color: var(--ct-accent); }
.ct-pagination .current { background: var(--ct-accent); color: #2a0f20; }
.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); }