:root {
	--main-background: radial-gradient(circle at center, #f5efff 0%, #ffffff 40%);
	
	--title-glow-color: #000000;
	
	--lab-link-color: #0971f7;
	--lab-link-border: 1px solid #08070842;
	--lab-link-background: #f7f7f75e;
	--lab-link-background-hover: #f7f7f7;
}

[data-theme="dark"] {
	--main-background: radial-gradient(circle at center, #111827 0%, #050510 70%);
	
	--title-glow-color: #0a8cff;
	
	--lab-link-color: #05e6ff;
	--lab-link-border: 1px solid #f0f8ff14;
	--lab-link-background: #1e1e515e;
	--lab-link-background-hover: #1616395e;
}


main {
	background: var(--main-background);
}

.title {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 1rem;
}

.title p {
	margin: 0;
}

.title-svg {
	position: relative;
	max-width: 500px;
	max-height: 500px;
}

@font-face {
    font-family: 'Audiowide';
    src: url('../../lib/fonts/Audiowide/Audiowide-Regular.woff2') format('woff2'),
        url('../../lib/fonts/Audiowide/Audiowide-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.title-text {
	font-family: 'Audiowide';
	font-size: calc(2rem + var(--font-size-large));
	font-weight: 800;
	letter-spacing: 4px;
	fill: url(#textGradient);
	stroke: rgba(255,255,255,0.15);
	stroke-width: 2;

	filter: url(#glow);
	cursor: default;
}

.title .svg-fx-glow {
	color: lightblue;
	transition: color 0.3s ease;
}

.title .svg-fx-glow.hovered {
	color: #cd5dd3;
}

.char {
	fill: ;

	transition: transform 0.3s ease, fill 0.3s ease;

	/* 🔥 DAS IST DER GAMECHANGER */
	display: inline-block;
	transform-box: fill-box;
	transform-origin: center;
}

.char:hover {
	fill: violet;
	transform: translateY(-6px);
}

/* === DOM LAYERING TITEL === */

.visual-title-wrapper {
	text-align: center;
}

.visual-title-wrapper p {
	margin-top: 0;
}

.visual-title {
	display: inline-block;
	padding: 0.25rem;
	font-family: 'Audiowide';
	font-size: calc(clamp(3rem, 14vw, 6rem) + var(--font-size-large));
	letter-spacing: 8px;
	position: relative;
	margin: 0;
	font-weight: 800;
	color: transparent;
	transform: perspective(800px) rotateX(12deg);
}

.visual-title .layer {
	padding: 0.25rem;
	position: absolute;
	inset: 0;
}

.visual-title .layer.gradient {
	background: linear-gradient(145deg, #8be9fd, #ffffff, #6c63ff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	z-index: 1;
}

.visual-title .layer.glow {
	color: rgb(255 0 0);
	filter: blur(18px);
	z-index: 0;
}

.visual-title .layer.outline {
	z-index: 1;
	-webkit-background-clip: text;
	-webkit-text-stroke: 6px rgba(255,255,255,.25);
}

.visual-title .layer.texture {
	background: url(noise.png);
	background-size: cover;
	mix-blend-mode: overlay;
	opacity: .35;
}


/* === CANVAS TITLE === */

.canvas-title {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.canvas-title p {
	margin: 0;
}

.fx-canvas {
	position: absolute;
	width: 100%;
	height: 100%;
	pointer-events: none;
	z-index: 0;
}

.canvas-visual-title {
	position: relative;
	display: inline-block;
	padding: 0.5rem;
	font-family: 'Audiowide';
	z-index: 2;
	margin: 0;
	font-size: calc(clamp(3rem, 14vw, 6rem) + var(--font-size-large));
	font-weight: 900;
	letter-spacing: 8px;
	background: linear-gradient(145deg, #8be9fd, #ffffff, #6c63ff);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	transform: perspective(900px) rotateX(12deg);
	filter: drop-shadow(0 0 18px rgba(255, 0, 0,.45))
			drop-shadow(0 0 20px rgba(255, 0, 0,.32));
	overflow: hidden;
}

.canvas-visual-title::before {
	content: attr(data-text);
	padding: 0.5rem;
	position: absolute;
	inset: 0;
	color: transparent;
	-webkit-text-stroke: 6px rgba(255,255,255,.25);
	z-index: -1;
}

.canvas-visual-title::after {
	content: attr(data-text);
	padding: 0.5rem;
	position: absolute;
	inset: 0;
	z-index: 4;
	opacity: 0.1;
	background: linear-gradient(140deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0), rgb(255 255 255), rgba(255, 255, 255, 0), rgba(255, 255, 255, 0));
	-webkit-background-clip: text;
	background-clip: text;
}


.back-button {
	display: flex;
    padding: 0 clamp(1rem, 4vw, 2rem);
	margin: 1rem 0;
}

.back-button a {
	position: relative;
	display: inline-flex;
	align-items: center;
	padding: 0.25rem 0.6rem;
	border-radius: 12px;
	color: var(--lab-link-color);
	text-decoration: none;
	background: transparent;
	transform: translate3d(0,0,0);
	backface-visibility: hidden;
	transition: transform 180ms cubic-bezier(.2,.8,.2,1),  color 180ms ease;
}

.back-button a::before {
	content: "";
	position: absolute;
	inset: 0;
	border: var(--lab-link-border);
	border-radius: inherit;
	background: var(--lab-link-background);
	z-index: -1;
	transform: scale(1);
	transition: transform 180ms cubic-bezier(.2,.8,.2,1), background 180ms ease;
	will-change: transform;
}

.back-button a:hover {
	transform: scale(1.02);
}

.back-button a:hover::before {
	background: var(--lab-link-background-hover);
	transform: scale(1.04);
}

.back-button a:active {
	transform: scale(0.985);
}

/* =============
	CONTENT
================*/

.visual-content {
	position: relative;
	margin-bottom: 2rem;
	padding: 0 clamp(1rem, 2vw, 2rem);
}

.module-neon-glass {
	position: relative;
	margin: 1rem auto;
	max-width: 650px;
}

.module-text-container {
	justify-self: center;
}

@font-face {
    font-family: 'Sansation';
    src: url('../../lib/fonts/Sansation/Sansation-Bold.woff2') format('woff2'),
        url('../../lib/fonts/Sansation/Sansation-Bold.woff') format('woff');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

.module-neon-glass .glass-icon-wrapper {
	position: absolute;
	left: clamp(-30px, -3vw, -18px);
	z-index: 3;
	height: 140%;
    top: -20%;
}

.module-neon-glass .glass-icon {
	position: relative;
	display: inline-block;
	height: 100%;
	font-size: clamp(5.4rem, 10vw, 6.8rem);
	font-family: 'Sansation';
	margin: 0;
	background: linear-gradient(145deg, #4545ff, #28e9e0, #236b6f);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(1px 2px 5px #0f7aff8c);
}

.module-neon-glass .glass-icon svg {
	fill: url(#textGradientNLB);
	width: clamp(60px, 8vw, 90px);
	height: 100%;
}

.module-neon-glass .glass-icon::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgb(37 96 159 / 14%);
	filter: blur(30px);
}

.module-text-container h1 {
	display: inline-block;
	padding: 1.5rem 2rem;
	position: relative;
	font-size: calc(clamp(1.75rem, 4vw, 3rem) + var(--font-size-larger));
	font-family: 'Sansation';
	margin: 0;
	background: linear-gradient(145deg, #4545ff, #28e9e0, #236b6f);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(1px 2px 5px #0f7aff8c);
}

.module-text-container h1::before {
	position: absolute;
	padding: 1.5rem 2rem;
	content: attr(data-text);
	inset: 0;
	z-index: 1;
	-webkit-text-stroke: 1px #ff000047;
}

.module-text-container h1::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgb(37 96 159 / 14%);
	filter: blur(30px);
}

.glass {
	position: absolute;
	inset: 0;
	box-sizing: border-box;
	/*background: radial-gradient(rgba(50, 136, 209, 0.1) 60%, transparent 80%);*/
	background: rgba(50, 136, 209, 0.1);
	border: 1px solid #30309b7d;
	display: flex;
	justify-content: space-between;
	padding: 0 5%;
	border-radius: 8px;
}

.glass:hover .border-left,
.glass:hover .border-top {
	top: calc(10% - 4px);
}

.glass:hover .border-left {
	top: calc(10% + 5px - 4px);
}

.glass:hover .border-right,
.glass:hover .border-bottom {
	bottom: calc(10% - 4px);
}

.glass:hover .border-right {
	bottom: calc(10% + 5px - 4px);
}

.glass-border {
	position: absolute;
	border: 1px solid rgba(99, 105, 255, 0.6);
	z-index: 2;
}

.glass .border-left {
	width: 4px;
	height: 55%;
	top: calc(10% + 5px);
	left: 2%;
	z-index: 1;
	transition: left .3s ease, top .3s ease;
	background: linear-gradient(180deg, hsl(245deg 90% 40% / 100%), hsl(195deg 40% 50% / 100%));
	border-radius: 0 0 16px 16px;
	border-top: none;
}

.glass .border-top {
	width: calc(100% - 3% * 2);
	height: 4px;
	top: 10%;
	left: 2%;
	z-index: 0;
	transition: left .3s ease, top .3s ease;
	background: hsl(245deg 90% 40% / 100%);
	border-radius: 16px 16px 16px 0;
}

.glass .border-right {
	width: 4px;
	height: 55%;
	bottom: calc(10% + 5px);
	right: 2%;
	z-index: 1;
	transition: right .3s ease, bottom .3s ease;
	background: linear-gradient(180deg, hsl(245deg 90% 40% / 100%), hsl(195deg 40% 50% / 100%));
	border-radius: 16px 16px 0 0;
	border-bottom: none;
}

.glass .border-bottom {
	width: calc(100% - 3% * 2);
	height: 4px;
	bottom: 10%;
	right: 2%;
	z-index: 0;
	transition: right .3s ease, bottom .3s ease;
	background: hsl(195deg 40% 50% / 100%);
	border-radius: 16px 0 16px 16px;
}

.left-dots,
.right-dots {
	display: flex;
	gap: clamp(0.25rem, 1.4vw, 0.5rem);
	align-items: center;
}

.dot {
	height: 10px;
	width: 10px;
	border-radius: 99px;
	position: relative;
}

.dot::before {
	content: '';
	position: absolute;
	inset: 0;
	animation: backgroundOpacity 3s ease-out infinite;
	background: radial-gradient(hsl(190deg 100% 50% / 80%) 0%, transparent 80%) !important;
}

@keyframes backgroundOpacity {
	0% {
		opacity: 0.4;
	}
	50% {
		opacity: 1;
	}
	100% {
		opacity: 0.4;
	}
}

.dot-1::before {
	background: radial-gradient(hsl(0deg 100% 100% / 50%) 0%, transparent 80%);
}

.dot-2::before {
	background: radial-gradient(hsl(120deg 85% 50% / 50%) 0%, transparent 80%);
}

.dot-3::before {
	background: radial-gradient(hsl(0deg 100% 50% / 60%) 0%, transparent 80%);
}

.dot-4::before {
	background: radial-gradient(hsl(220deg 100% 50% / 65%) 0%, transparent 80%);
}

@keyframes backgroundDots {
	0% {
		background: radial-gradient(hsl(0deg 100% 100% / 50%) 0%, transparent 80%);
	}
	25% {
		background: radial-gradient(hsl(120deg 85% 50% / 50%) 0%, transparent 80%);
	}
	50% {
		background: radial-gradient(hsl(0deg 100% 50% / 60%) 0%, transparent 80%);
	}
	75% {
		background: radial-gradient(hsl(220deg 100% 50% / 65%) 0%, transparent 80%);
	}
	100% {
		background: radial-gradient(hsl(0deg 100% 100% / 50%) 0%, transparent 80%);
	}
}