/* Design: Cams 3 – Grafit mit Violett, Kacheln als Webcam-Fenster (Basis: Cams 1/2) */
:root {
	--ct-bg: #0d0f13;
	--ct-surface: #161920;
	--ct-surface-2: #1f232c;
	--ct-text: #eceef4;
	--ct-muted: #9599a8;
	--ct-line: rgba(236, 238, 244, .08);
	--ct-accent: #9d8cff;
	--ct-accent-text: #120a2e;
	--ct-live: #34d399;
	--ct-live-text: #04210f;
	--ct-header-bg: #0a0c10;

	--ct-font-body: "Inter", system-ui, sans-serif;
	--ct-font-head: "Inter", system-ui, sans-serif;
	--ct-head-weight: 750;
	--ct-head-tracking: -0.03em;

	--ct-radius: 10px;
	--ct-radius-img: 6px;
	--ct-radius-btn: 8px;
	--ct-card-ratio: 16 / 10;
	--ct-gap: 20px 18px;
}

/* Feines Raster im Hintergrund – wie ein Bildschirm. */
body {
	background:
		radial-gradient(900px 420px at 50% -160px, rgba(157, 140, 255, .12), transparent 70%),
		var(--ct-bg);
}

/* Kopf zentriert, Name mit Objektiv-Symbol. */
.ct-header { box-shadow: 0 1px 0 var(--ct-line); }
.ct-brand__name { font-size: 1.8rem; display: inline-flex; align-items: center; gap: .3em; }
.ct-brand__name::before {
	content: ""; width: .7em; height: .7em; border-radius: 50%; flex: none;
	background: radial-gradient(circle at 35% 35%, #fff 0 8%, transparent 9%), radial-gradient(circle, #1b1640 0 34%, var(--ct-accent) 36% 52%, #2a2350 54% 100%);
	box-shadow: 0 0 0 2px var(--ct-surface-2), 0 0 12px color-mix(in srgb, var(--ct-accent) 55%, transparent);
}
.ct-brand__tagline { color: var(--ct-muted); letter-spacing: .03em; }

.ct-page-title { font-size: clamp(1.7rem, 1.2rem + 2vw, 2.6rem); }
.ct-section-title { text-transform: uppercase; letter-spacing: .08em; font-size: .95rem; color: var(--ct-muted); }

/* ------------------------------------------------------------------
 * Kacheln als Webcam-Fenster
 * ------------------------------------------------------------------ */
.ct-card-framed .ct-card { padding: 6px; background: var(--ct-surface); border: 1px solid var(--ct-line); transition: border-color .2s, transform .2s, box-shadow .2s; }
.ct-card-framed .ct-card:hover { border-color: color-mix(in srgb, var(--ct-accent) 60%, transparent); box-shadow: 0 14px 34px -20px color-mix(in srgb, var(--ct-accent) 80%, transparent); }
.ct-card-framed .ct-card__body { text-align: left; padding: 10px 6px 6px; }
.ct-card-framed .ct-card__meta { justify-content: flex-start; }
.ct-card__name { font-size: 1rem; font-weight: 700; }
.ct-card__age { color: var(--ct-text); font-weight: 600; }

/* Bildschirm-Zeilen über dem Bild; beim Darüberfahren wird das Bild klar. */
.ct-card__media::after {
	content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
	background: repeating-linear-gradient(to bottom, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px);
	opacity: .55; transition: opacity .25s;
}
.ct-card:hover .ct-card__media::after { opacity: 0; }
.ct-live, .ct-card__features { z-index: 2; }

/* Live-Anzeige mit Signal-Balken statt Punkt. */
.ct-live { border-radius: 6px; font-size: .68rem; letter-spacing: .05em; text-transform: uppercase; }
.ct-live--on { background: rgba(10, 12, 16, .74); color: #fff; backdrop-filter: blur(4px); }
.ct-live--on::before {
	width: 12px; height: 9px; border-radius: 0;
	background:
		linear-gradient(var(--ct-live), var(--ct-live)) 0 100% / 2px 3px no-repeat,
		linear-gradient(var(--ct-live), var(--ct-live)) 3px 100% / 2px 5px no-repeat,
		linear-gradient(var(--ct-live), var(--ct-live)) 6px 100% / 2px 7px no-repeat,
		linear-gradient(var(--ct-live), var(--ct-live)) 9px 100% / 2px 9px no-repeat;
	animation: ct-signal 2.4s steps(1) infinite;
}
@keyframes ct-signal { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.ct-live--lg.ct-live--on::before { width: 14px; height: 11px; }
.ct-feature { border-radius: 4px; letter-spacing: .04em; }

/* Profilbild als Bildschirm mit Rahmen. */
.ct-media { border: 6px solid var(--ct-surface); outline: 1px solid var(--ct-line); }

/* Buttons. */
.ct-btn--primary, .ct-btn--primary:hover { background: linear-gradient(135deg, var(--ct-accent), color-mix(in srgb, var(--ct-accent) 60%, #6ee7ff)); }
.ct-btn--primary { box-shadow: 0 10px 26px -14px color-mix(in srgb, var(--ct-accent) 90%, transparent); }
.ct-btn--primary:hover { filter: brightness(1.07); }
.ct-chip { border-radius: 8px; }

.ct-panel { border: 1px solid var(--ct-line); }
.ct-tabs__list button[aria-selected="true"] { border-bottom-width: 3px; }

@media (prefers-reduced-motion: reduce) {
	.ct-card-framed .ct-card, .ct-card__media::after { transition: none; }
	.ct-live--on::before { animation: none; }
}

/* Zentrierter Kopf ohne Menü: Suche mittig statt rechts außen. */
@media (min-width: 900px) {
	.ct-header-centered .ct-header__inner:not(:has(.ct-nav)) .ct-search { margin-inline: auto; width: min(420px, 100%); }
	.ct-header-centered .ct-header__inner:not(:has(.ct-nav)) .ct-search__input { width: 100%; flex: 1; }
}