/* Design: Transen 1 – Nachtviolett mit Himmelblau, Rosa und Weiß, Farbverlauf-Rahmen, Glas-Flächen, Live-Leiste */
:root {
	--ct-bg: #120e1d;
	--ct-surface: #1b1629;
	--ct-surface-2: #262036;
	--ct-text: #f6f3fb;
	--ct-muted: #a79fbb;
	--ct-line: rgba(246, 243, 251, .09);
	--ct-accent: #f5a9b8;
	--ct-accent-text: #1a1028;
	--ct-live: #5bcefa;
	--ct-live-text: #0d1a24;
	--ct-header-bg: rgba(18, 14, 29, .78);

	--ct-blue: #5bcefa;
	--ct-pink: #f5a9b8;
	--ct-grad: linear-gradient(120deg, #5bcefa 0%, #f5a9b8 52%, #ffffff 100%);
	--ct-grad-soft: linear-gradient(120deg, rgba(91, 206, 250, .16), rgba(245, 169, 184, .16));
	--ct-strip-ring: var(--ct-grad);

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

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

/* Hintergrund: zwei weiche Lichtflecken in Blau und Rosa. */
body {
	background:
		radial-gradient(900px 520px at 8% -6%, rgba(91, 206, 250, .13), transparent 60%),
		radial-gradient(800px 520px at 96% 4%, rgba(245, 169, 184, .13), transparent 60%),
		var(--ct-bg) fixed;
}

/* Kopf als Glasleiste mit Farbverlauf-Linie. */
.ct-header { border-bottom: 0; backdrop-filter: blur(14px) saturate(1.3); -webkit-backdrop-filter: blur(14px) saturate(1.3); }
@media (min-width: 783px) { .ct-header { position: sticky; top: 0; } }
.ct-header::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--ct-grad); opacity: .85; }
.admin-bar .ct-header { top: 32px; }
.ct-brand__name { font-size: 1.55rem; background: var(--ct-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* Kleines Fünf-Streifen-Fähnchen vor dem Namen. */
.ct-brand__link:not(:has(img))::before { content: ""; flex: 0 0 auto; align-self: center; width: 22px; height: 15px; margin-right: 10px; border-radius: 4px; background: linear-gradient(#5bcefa 0 20%, #f5a9b8 20% 40%, #fff 40% 60%, #f5a9b8 60% 80%, #5bcefa 80%); box-shadow: 0 0 0 1px rgba(255, 255, 255, .15), 0 4px 14px -4px rgba(91, 206, 250, .6); }
.ct-brand__tagline { letter-spacing: .02em; }

/* Überschriften: Verlaufsschrift und kurze Verlaufslinie. */
.ct-page-title { font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); line-height: 1.1; background: var(--ct-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ct-front h1 { background: var(--ct-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: clamp(1.7rem, 1.2rem + 1.8vw, 2.6rem); line-height: 1.1; }
.ct-section-title, .ct-prose h2, .ct-front h2 { position: relative; padding-bottom: 10px; }
.ct-section-title::after, .ct-prose h2::after, .ct-front h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 4px; border-radius: 4px; background: var(--ct-grad); }
.ct-prose h3, .ct-front h3 { font-weight: 700; }
.ct-prose a, .ct-front p:not(.ct-card__name) a:not(.ct-btn) { color: var(--ct-blue); text-decoration-color: rgba(91, 206, 250, .45); text-underline-offset: 3px; }

/* Kacheln: Hochformat, runde Ecken, Farbverlauf-Rahmen bei Cams, die live sind. */
.ct-card__media { border: 2px solid transparent; background: linear-gradient(var(--ct-surface-2), var(--ct-surface-2)) padding-box, linear-gradient(var(--ct-line), var(--ct-line)) border-box; transition: transform .25s ease, box-shadow .25s ease; }
.ct-card.is-online .ct-card__media { background: linear-gradient(var(--ct-surface-2), var(--ct-surface-2)) padding-box, var(--ct-grad) border-box; box-shadow: 0 14px 34px -22px rgba(91, 206, 250, .75); }
.ct-card__img { border-radius: calc(var(--ct-radius-img) - 2px); }
.ct-card:hover .ct-card__media { transform: translateY(-4px); box-shadow: 0 22px 40px -22px rgba(245, 169, 184, .8); }
.ct-card__body { padding: 12px 4px 0; }
.ct-card__name { font-family: var(--ct-font-head); font-weight: 700; font-size: 1.08rem; letter-spacing: -.01em; }
.ct-card__age::after { content: " Jahre"; }
.ct-live { border-radius: 999px; font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; padding: 5px 9px 5px 8px; }
.ct-live--on { background: var(--ct-grad); color: #1a1028; }
.ct-live--on::before { background: #1a1028; animation: ct-strip-blink 1.6s ease-in-out infinite; }
.ct-live--off { background: rgba(18, 14, 29, .7); backdrop-filter: blur(4px); }
.ct-feature { border-radius: 999px; background: rgba(18, 14, 29, .62); border: 1px solid rgba(255, 255, 255, .14); }

/* Buttons und Schlagwörter. */
.ct-btn--primary { background: var(--ct-grad); background-size: 160% 100%; background-position: 0 0; color: #1a1028; border: 0; transition: background-position .4s ease, box-shadow .2s; box-shadow: 0 12px 30px -16px rgba(245, 169, 184, .9); }
.ct-btn--primary:hover { background: var(--ct-grad); background-size: 160% 100%; background-position: 100% 0; }
.ct-btn--ghost:hover { border-color: var(--ct-blue); color: var(--ct-blue); }
.ct-btn { font-family: var(--ct-font-head); font-weight: 700; letter-spacing: .01em; }
.ct-chip { border-radius: 999px; border: 1px solid rgba(91, 206, 250, .3); background: var(--ct-grad-soft); }
.ct-chip:hover { border-color: var(--ct-pink); }
.ct-pagination .current { background: var(--ct-grad); color: #1a1028; }

/* Live-Leiste. */
.ct-strip__title { color: var(--ct-text); }
.ct-strip__title::before { background: var(--ct-grad); }
.ct-strip__ring { box-shadow: 0 8px 22px -12px rgba(91, 206, 250, .9); }

/* Redaktionsstrecke als Glas-Flächen. */
.ct-stats li, .ct-cotm, .ct-panel { background: linear-gradient(160deg, rgba(255, 255, 255, .06), rgba(255, 255, 255, .02)); border: 1px solid rgba(255, 255, 255, .1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ct-stats strong { background: var(--ct-grad); -webkit-background-clip: text; background-clip: text; color: transparent; font-size: 2.2rem; font-weight: 800; }
.ct-cotm { position: relative; overflow: visible; }
.ct-cotm__media { border-radius: var(--ct-radius) 0 0 var(--ct-radius); overflow: hidden; }
/* Sticker auf dem Bild, leicht gedreht. */
.ct-cotm__media::after { content: "★"; position: absolute; right: -16px; top: 22px; width: 62px; height: 62px; display: grid; place-items: center; border-radius: 50%; background: var(--ct-grad); color: #1a1028; font-size: 1.6rem; transform: rotate(-12deg); box-shadow: 0 10px 26px -10px rgba(0, 0, 0, .7); z-index: 2; }
.ct-cotm__media { overflow: visible; }
.ct-cotm__img { border-radius: var(--ct-radius) 0 0 var(--ct-radius); }
.ct-cotm__kicker { color: var(--ct-blue); }
.ct-cotm__title { font-size: clamp(1.5rem, 1.1rem + 1.3vw, 2.1rem); line-height: 1.08; }
.ct-cotm__title a { background: var(--ct-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ct-cotm__facts div { border-radius: 12px; background: var(--ct-grad-soft); border: 1px solid rgba(255, 255, 255, .08); }
.ct-cotm__quote { border-left: 0; padding-left: 18px; position: relative; }
.ct-cotm__quote::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 3px; border-radius: 3px; background: var(--ct-grad); }
.ct-tow__more { color: var(--ct-blue); }
.ct-tow__title { font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.9rem); }
.ct-tow__list a { border-radius: 18px; border: 2px solid transparent; background: linear-gradient(var(--ct-surface-2), var(--ct-surface-2)) padding-box, var(--ct-grad) border-box; }
.ct-tow__list img { border-radius: 16px; }
.ct-tow__list span { font-family: var(--ct-font-head); border-radius: 0 0 16px 16px; }

.ct-front table, .ct-prose table, .ct-seo table { background: linear-gradient(160deg, rgba(255, 255, 255, .05), rgba(255, 255, 255, .015)); }
.ct-front td a, .ct-prose td a, .ct-seo td a { color: var(--ct-blue); }

@media (max-width: 760px) {
	.ct-cotm__media, .ct-cotm__img { border-radius: var(--ct-radius) var(--ct-radius) 0 0; }
	.ct-cotm__media::after { right: 14px; top: auto; bottom: -22px; width: 52px; height: 52px; font-size: 1.3rem; }
}
@media (max-width: 600px) {
	:root { --ct-gap: 18px 12px; }
	.ct-brand__name { font-size: 1.35rem; }
	.ct-card__name { font-size: .98rem; }
	.ct-stats strong { font-size: 1.7rem; }
}
@media (prefers-reduced-motion: reduce) {
	.ct-live--on::before { animation: none; }
	.ct-card__media, .ct-btn--primary { transition: none; }
	.ct-card:hover .ct-card__media { transform: none; }
}