* {
	margin: 0px;
	padding: 0px;
	box-sizing: border-box;
	user-select: none;  
}

body, html {
	position: relative;
	height: 100%;
	width: 100%;
	font-size: 0.7292vw;
	overflow: hidden;
	color: white;
}
.form {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100vw;
	height: 100vh;
	perspective: 1000px;
}
span, div:not(.form), img, svg, path, input {
	transition: all 0.3s ease;
}

.verify-badge {
	animation: badge-pulse 2s ease-in-out infinite;
}
@keyframes badge-pulse {
	0%, 100% { transform: scale(1); }
	50% { transform: scale(1.15); }
}
.videobg.custom-bg-video {
	mix-blend-mode: normal;
	filter: none;
	transition: opacity 0.5s ease;
}
.videobg {
	position: absolute;
	object-fit: cover;
	mix-blend-mode: color-dodge;
	filter: grayscale(100%);
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	pointer-events: none;
}

.container {
	transition: transform 0.15s ease-out;
	position: relative;
	width: 15.052vw;
	zoom: 1.15; /* PC: gesamtes Profil 15% größer (Mobile via Media-Query zurückgesetzt) */
	overflow: hidden;
	height: auto;
	background: linear-gradient(180deg, rgb(var(--main-rgb)) -2.1%, rgba(var(--main-rgb), 0) 3.71%), radial-gradient(57.64% 35.62% at 100% 1.86%, rgba(255, 255, 255, 0.25) 0.93%, rgba(0, 0, 0, 0) 100%), radial-gradient(50.05% 21.4% at 0% 5.32%, rgba(255, 255, 255, 0.25) 0%, rgba(0, 0, 0, 0) 100%), radial-gradient(85.51% 64.69% at 50.17% 0%, rgba(var(--main-rgb), 0.45) 0%, rgba(0, 0, 0, 0) 100%), rgba(27, 27, 27, 0.96);
	box-shadow: inset 0vw 0.208vw 0.328vw rgba(var(--main-rgb), 0.38);
	border-radius: 0.729vw;
	padding: 0.365vw;
	transform-style: preserve-3d;
	will-change: transform;
}
.lines {
	position: absolute;
	width: 100%;
	top: 0;
}
.banner img, .banner-video {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.banner-video { display: block; }
.banner {
	position: relative;
	width: 100%;
	overflow: hidden;
	border-radius: 0.365vw;
	height: 5.104vw;
}
.music_section {
	gap: 0.365vw;
	margin-top: 1.25vw;
	position: relative;
}
.views_count {
	position: absolute;
	top: 0.313vw;
	right: 0.313vw;
	height: 1.667vw;
	backdrop-filter: blur(0.146vw);
	border-radius: 0.26vw;
	background: rgba(28, 27, 28, 0.6);
	font-size: 0.754vw;
	gap: 0.26vw;
	padding: 0vw 0.417vw;
	font-family: 'Arame-Thin';
}
.views_count span {
	height: 1.146vw;
}
.views_count svg {
	width: 0.781vw;
	height: 0.781vw;
}
.vip_badge {
	position: absolute;
	top: 0.313vw;
	left: 0.313vw;
	height: 1.667vw;
	width: 1.667vw;
	border-radius: 0.26vw;
	backdrop-filter: blur(0.146vw);
	background: rgba(54, 41, 32, 0.6);
}
.vip_badge svg {
	width: 0.938vw;
	height: 0.938vw;
}
.avatar {
	position: relative;
}
.avatar img {
	width: 1.927vw;
	height: 1.927vw;
	border-radius: 100%;
}

.glass-circle {
	width: 0.521vw;
	height: 0.521vw;
	border-radius: 50%;

	background: linear-gradient(
	  160deg,
	  #b8f5a8 0%,
	  #99E48A 40%,
	  #5cbf4a 100%
	);

	box-shadow:
	  inset 0 0.04vw 0.06vw rgba(255, 255, 255, 0.6),
	  inset 0 -0.02vw 0.04vw rgba(0, 60, 0, 0.3),
	  0 0.01vw 0.03vw rgba(0, 0, 0, 0.25);

	position: relative;
	overflow: hidden;
  }
  .glass-circle::before {
	content: "";
	position: absolute;
	top: 8%;
	left: 15%;
	width: 70%;
	height: 50%;

	border-radius: 50%;
	background: linear-gradient(
	  180deg,
	  rgba(255, 255, 255, 0.75) 0%,
	  rgba(255, 255, 255, 0) 100%
	);
  }
  .glass-circle::after {
	content: "";
	position: absolute;
	bottom: 10%;
	left: 25%;
	width: 50%;
	height: 25%;

	border-radius: 50%;
	background: radial-gradient(
	  ellipse at 50% 100%,
	  rgba(255, 255, 255, 0.2) 0%,
	  transparent 70%
	);
  }

.glass-circle.offline {
	background: linear-gradient(
	  160deg,
	  #ffb3b3 0%,
	  #e45a5a 40%,
	  #bf2a2a 100%
	);
	box-shadow:
	  inset 0 0.04vw 0.06vw rgba(255, 255, 255, 0.6),
	  inset 0 -0.02vw 0.04vw rgba(60, 0, 0, 0.3),
	  0 0.01vw 0.03vw rgba(0, 0, 0, 0.25);
}

.glass-circle {
	position: absolute;
	bottom: 0;
	right: 0;
}
.badge_discord {
	width: 0.86vw;
	height: 0.86vw;
	position: relative;
}
.badge_discord img {
	width: 100%;
	height: 100%;
	position: absolute;
}
.blur_badge {
	filter: blur(0.667vw);
	opacity: 0.25;
}
.left_head span {
	font-size: 0.91vw;
	font-family: 'Arame-Regular';
	text-shadow: 0 0 1.458vw rgba(255, 255, 255, 0.35);
}
.left_head svg {
	width: 0.86vw;
	height: 0.86vw;
	filter: drop-shadow(0 0 0.573vw rgba(120, 243, 128, 0.25));
}
.left_head {
	gap: 0.42vw;
}
.row_head {
	flex: 1 1 auto;
	min-width: 0;
}
.head_flex {
	width: 100%;
	gap: 0.4167vw;
}
.flex_icons {
	gap: 0.1563vw;
	margin-left: auto; /* Discord-Badges nach ganz rechts */
}
.role {
	font-size: 0.758vw;
	font-family: 'Light';
	color: rgba(255, 255, 255, 0.35);
	letter-spacing: -0.01em;
	margin-top: -0.156vw;
}
.header_cont {
	gap: 0.4688vw;
	margin-top: 0.651vw;
}
.head_music img {
	width: 1.875vw;
	height: 1.875vw;
	border-radius: 0.104vw;
	object-fit: cover;        /* breite/hohe Bilder sauber mittig einzoomen statt verzerren */
	object-position: center;
	flex-shrink: 0;
}
.head_music {
	gap: 0.521vw;
	padding-right: 4.2vw; /* Platz für die absolute Zeitanzeige (top-right) freihalten */
}
/* Langer Songtitel/Artist sauber mit … abschneiden statt hinter die Zeit zu laufen */
.row_music { flex: 1 1 auto; min-width: 0; }
.row_music span { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row_music span:first-child {
	font-size: 0.833vw;
	font-family: 'Arame-Regular';
	text-shadow: 0 0 1.51vw rgba(255, 255, 255, 0.25);
}
.row_music span:last-child {
	font-size: 0.758vw;
	font-family: 'Light';
	color: rgba(255, 255, 255, 0.35);
	margin-top: -0.156vw;
}
.ms_btn {
	cursor: pointer;
	flex-shrink: 0;
	background: linear-gradient(225deg, rgb(var(--main-rgb)) 0%, rgba(var(--main-rgb), 0) 146.43%);
	box-shadow: inset 0.104vw 0.104vw 0.182vw rgba(255, 255, 255, 0.45);
	filter: drop-shadow(0vw 0vw 1.089vw rgba(var(--main-rgb), 0.47));
	border-radius: 0.208vw;
	width: 1.458vw;
	height: 1.458vw;
}
.ms_btn:hover {
	transform: translateY(0.1vw);
	filter: drop-shadow(0vw 0vw 1.089vw rgba(var(--main-rgb), 0.67));
}
.ms_btn:active {
	opacity: 0.75;
}
.ms_btn svg {
	width: 0.833vw;
	height: 0.833vw;
}
.music_section {
	padding: 0.208vw;
	background: rgba(255, 255, 255, 0.04);
	padding: 0.208vw;
	border-radius: 0.313vw;
}
.pannel_volume {
	height: 1.458vw;
	border-radius: 0.208vw;
	padding: 0.313vw;
	background: rgba(0, 0, 0, 0.25);
}
input[type=range] {
	cursor: pointer;
	width: 100%;
	height: 0.104vw;
	--fill: 50%;
	/* Farbe IMMER aus dem CSS (Accent gefüllt, heller Rest); JS setzt nur noch --fill (Prozent) */
	background: linear-gradient(to right, rgb(var(--main-rgb)) var(--fill), rgba(255, 255, 255, 0.2) var(--fill));
	transition: none; /* Füllung sofort, kein Nachziehen (global transition:all würde den Gradient animieren) */
	-webkit-appearance: none;
	outline: none;
	border-radius: 0.1563vw;
	margin-left: auto;
	margin-right: auto;
}

input[type=range]::-webkit-slider-thumb {
	width: 0.417vw;
	height: 0.417vw;
	background: #ffffff;
	border-radius: 100%;
	-webkit-appearance: none;
	appearance: none;
}
.pannel_volume svg {
	width: 0.833vw;
	height: 0.833vw;
	flex-shrink: 0;
}
.pannel_volume {
	gap: 0.26vw;
}
.last_music {
	gap: 0.365vw;
}
.time_music {
	height: 1.146vw;
	background: rgba(var(--main-rgb), 0.25);
	border-radius: 0.26vw;
	padding: 0.213vw 0.317vw;
	position: absolute;
	top: 0.208vw;
	right: 0.208vw;
	font-size: 0.677vw;
	font-family: 'Arame-Thin';
	color: #fff; /* Zeit-Text immer weiß; Box-Hintergrund (rgba main) bleibt färbbar */
}
.time_total {
	color: rgba(255, 255, 255, 0.5);
}
.time_music span {
	height: 1.138vw;
}
.music_section {
	margin-top: 1.25vw;
}
.flex_social img {
	width: 1.468vw;
	border-radius: 0.389vw;
}
.flex_social {
	gap: 0.417vw;
}
.flex_social img {
	cursor: pointer;
}
.flex_social img:hover {
	transform: translateY(0.1vw);
}
.flex_social img:active {
	opacity: 0.75;
}
.flex_social {
	margin-top: 0.121vw;
}

.github {
	box-shadow: 0 0 1.25vw rgba(255, 255, 255, 0.25);
}
.instagram {
	box-shadow: 0 0 1.25vw rgba(212, 84, 141, 0.58);
}
.tiktok {
	box-shadow: 0 0 1.25vw rgba(212, 84, 141, 0.58);
}
.discord {
	box-shadow: 0 0 1.25vw rgba(86, 98, 246, 0.58);
}
.youtube {
	box-shadow: 0 0 1.25vw rgba(255, 32, 36, 0.58);
}
.twitch {
	box-shadow: 0 0 1.25vw rgba(170, 109, 247, 0.58);
}
.twitter {
	box-shadow: 0 0 1.25vw rgba(255, 255, 255, 0.58);
}
.section_socials span {
	font-size: 0.729vw;
	letter-spacing: 0.38em;
	color: rgba(255, 255, 255, 0.35);
	font-family: 'Arame-Thin';
}
.background {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.section_socials {
	gap: 0.521vw;
}

.box_link svg path {
	fill: #fff; /* Link-Icon immer weiß (nicht einfärbbar), Box-Hintergrund bleibt färbbar */
}
.link_pannel {
	cursor: pointer;
	position: relative;
	overflow: hidden;
	height: 1.875vw;
	border-radius: 0.365vw;
	padding: 0.26vw;
	background: radial-gradient(51.88% 561.22% at 0% 100%, rgba(var(--main-rgb), 0.25) 0%, rgba(var(--main-rgb), 0) 100%), rgba(255, 255, 255, 0.05);
	border-radius: 0.365vw;
	gap: 0.3646vw;
}
.link_pannel:active {
	opacity: 0.75;
}
.link_pannel:hover {
	transform: translateY(0.1vw);
	background: radial-gradient(51.88% 561.22% at 0% 100%, rgba(var(--main-rgb), 0.25) 0%, rgba(var(--main-rgb), 0) 100%), rgba(255, 255, 255, 0.1);
}
.link_bg {
	position: absolute;
	width: 100%;
	left: 0;
	opacity: 0.12;
}
/* Hochgeladene Logos: mittig eingepasst, größer, dezent wie das NRW-Beispiel */
.link_bg_fit {
	left: 0;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 100%;
	height: 140%;
	object-fit: contain;
	object-position: center;
	opacity: 0.16;
}
.box_link {
	position: relative;
	width: 1.354vw;
	height: 1.354vw;
	border-radius: 0.156vw;
	background: rgba(0, 0, 0, 0.4);
}
.box_link svg {
	width: 0.833vw;
	height: 0.833vw;
}
.link_pannel span {
	position: relative;
	font-size: 0.781vw;
	font-family: 'Medium';
}
/* Optionale Link-Beschreibung unter dem Titel (gleiche Font wie die Profil-Beschreibung) */
.link_text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 0;
	position: relative;
}
.link_pannel .link_desc {
	font-size: 0.7vw;
	font-family: 'Light';
	color: rgba(255, 255, 255, 0.35);
	letter-spacing: -0.01em;
	margin-top: 0.04vw;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.link_pannel.has_desc {
	height: auto;
	min-height: 1.875vw;
	padding-top: 0.22vw;
	padding-bottom: 0.22vw;
}
.links_flex {
	gap: 0.417vw;
	margin-top: 1.25vw;
}
.section_socials {
	margin-top: 1vw;
}
.circle {
	position: absolute;
	width: 26.458vw;
	height: 26.458vw;
	border-radius: 100%;
	filter: blur(4.589vw);
	background: rgb(var(--main-rgb));
	opacity: 0.15;
}
.circle_top {
	top: -13.229vw;
}
.circle_bottom {
	bottom: -13.229vw;
}
.top_form svg {
	width: 2.188vw;
	height: 2.188vw;
}
.form_w {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	background: radial-gradient(66.76% 100% at 50% 100%, rgba(87, 87, 87, 0.2) 0%, rgba(0, 0, 0, 0) 100%), rgba(27, 27, 27, 0.92);
	backdrop-filter: blur(0.927vw);
}
.top_form {
	text-align: center;
}
.row_w {
	margin-top: 0.833vw;
}
.row_w span:first-child {
	font-size: 1.042vw;
	font-family: 'Arame-Regular';
	text-shadow: 0 0 1.51vw rgba(255, 255, 255, 0.25);
}
.row_w span:last-child {
	font-size: 0.885vw;
	font-family: 'Medium';
	color: rgba(255, 255, 255, 0.35);
	letter-spacing: -0.02em;
	margin-top: -0.156vw;
}
.link_pannel_w {
	height: 1.875vw;
	background: rgba(255, 255, 255, 0.1);
	border-radius: 0.417vw;
	padding: 0.417vw 0.469vw;
}
.link_pannel_w svg {
	width: 0.833vw;
	height: 0.833vw;
}
.link_pannel_w {
	gap: 0.281vw;
	margin-top: 0.833vw;
}
.link_pannel_w span {
	font-size: 0.833vw;
	font-family: 'Arame-Thin';
	height: 1.342vw;
	color: rgba(255, 255, 255, 0.75);
}
.flex_buttons {
	gap: 0.833vw;
	width: 18.333vw;
	margin-top: 1.667vw;
}
.button {
	cursor: pointer;
	height: 2.031vw;
	gap: 0.208vw;
	border-radius: 0.417vw;
	background: linear-gradient(90deg, #9ABC4F 0%, #7E8869 100%);
	box-shadow: 0vw 0.313vw 1.667vw rgba(var(--main-rgb), 0.25);
}
.button span {
	font-size: 0.781vw;
	font-family: 'Arame-Regular';
}
.button svg {
	width: 0.781vw;
	height: 0.781vw;
}
.red_button {
	background: linear-gradient(90deg, #D35455 0%, #7B3D3D 100%);
	box-shadow: 0vw 0.313vw 1.667vw rgba(188, 48, 49, 0.25);
}
.button:hover {
	transform: translateY(0.1vw);
	box-shadow: 0vw 0.313vw 1.667vw rgba(var(--main-rgb), 0.35);
}
.red_button:hover {
	transform: translateY(0.1vw);
	box-shadow: 0vw 0.313vw 1.667vw rgba(188, 48, 49, 0.35);
}
.button:active {
	opacity: 0.75;
}
.flex_agree {
	cursor: pointer;
	gap: 0.417vw;
	margin-top: 2.083vw;
}
.flex_agree span {
	font-size: 0.833vw;
	font-family: 'Light';
	color: rgba(255, 255, 255, 0.75);
}
#agree {
	appearance: none;
	-webkit-appearance: none;
	width: 0.729vw;
	height: 0.729vw;
	border-radius: 0.208vw;
	background: rgba(255, 255, 255, 0.15);
	border: none;
	cursor: pointer;
	position: relative;
}
#agree:checked {
	background: rgba(255, 255, 255, 0.85);
	box-shadow: 0 0 0.913vw rgba(255, 255, 255, 0.6);
}
.form_click svg {
	width: 1.042vw;
	height: 1.042vw;
}
.form_click span {
	font-size: 0.833vw;
	font-family: 'Arame-Thin';
	color: rgba(255, 255, 255, 0.45);
	letter-spacing: 0.12em; /* default enger ... */
	margin-top: 0.885vw;
	transition: letter-spacing 0.55s cubic-bezier(0.22, 1, 0.36, 1), color 0.4s ease;
}
.form_click:hover span {
	letter-spacing: 0.43em; /* ... bei Hover smooth auseinander */
	color: rgba(255, 255, 255, 0.85);
}
.form_click svg {
	transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.4s ease;
	opacity: 0.6;
}
.form_click:hover svg {
	transform: translateY(-0.12vw) scale(1.08);
	opacity: 1;
}

@media (max-width: 768px) {
	body, html {
		font-size: 3.2vw;
	}
	.container {
		width: 79vw;
		padding: 2vw;
		border-radius: 4vw;
		margin: 6vw 0;
		zoom: 1; /* Mobile: keine Vergrößerung */
	}
	.banner {
		height: 28vw;
		border-radius: 2vw;
	}
	.avatar img {
		width: 11vw;
		height: 11vw;
	}
	.glass-circle {
		width: 3vw;
		height: 3vw;
	}
	.header_cont {
		gap: 2.5vw;
		margin-top: 3.5vw;
	}
	.left_head span {
		font-size: 5vw;
	}
	.left_head svg {
		width: 4.7vw;
		height: 4.7vw;
	}
	.left_head {
		gap: 2.5vw;
	}
	.role {
		font-size: 3.5vw;
		margin-top: -0.5vw;
	}
	.badge_discord {
		width: 4.7vw;
		height: 4.7vw;
	}
	.head_flex {
		gap: 2.5vw;
	}
	.flex_icons {
		gap: 1vw;
	}
	.music_section {
		margin-top: 5vw;
		gap: 2vw;
		padding: 1.5vw;
		border-radius: 2vw;
	}
	.head_music img {
		width: 10vw;
		height: 10vw;
		border-radius: 1vw;
	}
	.head_music {
		gap: 3vw;
		padding-right: 18vw;
	}
	.row_music span:first-child {
		font-size: 4.2vw;
	}
	.row_music span:last-child {
		font-size: 3.5vw;
		margin-top: -0.5vw;
	}
	.ms_btn {
		width: 8vw;
		height: 8vw;
		border-radius: 1.5vw;
	}
	.ms_btn svg {
		width: 4.5vw;
		height: 4.5vw;
	}
	.last_music {
		gap: 2vw;
	}
	.pannel_volume {
		height: 8vw;
		border-radius: 1.5vw;
		padding: 2vw;
		gap: 1.5vw;
	}
	.pannel_volume svg {
		width: 4.5vw;
		height: 4.5vw;
	}
	input[type=range] {
		height: 0.8vw;
		border-radius: 1vw;
	}
	input[type=range]::-webkit-slider-thumb {
		width: 2.5vw;
		height: 2.5vw;
	}
	.time_music {
		height: 5.5vw;
		border-radius: 1.5vw;
		padding: 1vw 2vw;
		font-size: 3vw;
		top: 1.5vw;
		right: 1.5vw;
	}
	.time_music span {
		height: 5.5vw;
	}
	.section_socials {
		margin-top: 5vw;
		gap: 2.5vw;
	}
	.section_socials span {
		font-size: 3.2vw;
	}
	.flex_social {
		gap: 2.5vw;
		margin-top: 1vw;
	}
	.flex_social img {
		width: 8vw;
		border-radius: 2vw;
	}
	.links_flex {
		gap: 2.5vw;
		margin-top: 5vw;
	}
	.link_pannel {
		height: 10vw;
		border-radius: 2vw;
		padding: 1.5vw;
		gap: 2vw;
	}
	.box_link {
		width: 7vw;
		height: 7vw;
		border-radius: 1vw;
	}
	.box_link svg {
		width: 4.5vw;
		height: 4.5vw;
	}
	.link_pannel span {
		font-size: 4vw;
	}
	.link_pannel .link_desc {
		font-size: 3vw;
		margin-top: 0.3vw;
	}
	.link_pannel.has_desc {
		padding-top: 1.2vw;
		padding-bottom: 1.2vw;
	}
	.views_count {
		top: 1.5vw;
		right: 1.5vw;
		height: 7vw;
		border-radius: 1.5vw;
		font-size: 3.5vw;
		gap: 1.5vw;
		padding: 0 2.5vw;
	}
	.views_count span {
		height: 6vw;
	}
	.views_count svg {
		width: 4vw;
		height: 4vw;
	}
	.vip_badge {
		top: 1.5vw;
		left: 1.5vw;
		height: 7vw;
		width: 7vw;
		border-radius: 1.5vw;
	}
	.vip_badge svg {
		width: 4vw;
		height: 4vw;
	}
	.circle {
		width: 80vw;
		height: 80vw;
		filter: blur(15vw);
	}
	.circle_top {
		top: -40vw;
	}
	.circle_bottom {
		bottom: -40vw;
	}
	.videobg {
		display: none;
	}
	.container {
		box-shadow: inset 0vw 1vw 2vw rgba(var(--main-rgb), 0.38);
	}
	.ms_btn {
		filter: drop-shadow(0vw 0vw 5vw rgba(var(--main-rgb), 0.47));
	}
	.ms_btn:hover {
		filter: drop-shadow(0vw 0vw 5vw rgba(var(--main-rgb), 0.67));
	}
	.github {
		box-shadow: 0 0 5vw rgba(255, 255, 255, 0.25);
	}
	.instagram {
		box-shadow: 0 0 5vw rgba(212, 84, 141, 0.58);
	}
	.tiktok {
		box-shadow: 0 0 5vw rgba(212, 84, 141, 0.58);
	}
	.discord {
		box-shadow: 0 0 5vw rgba(86, 98, 246, 0.58);
	}
	.youtube {
		box-shadow: 0 0 5vw rgba(255, 32, 36, 0.58);
	}
	.twitch {
		box-shadow: 0 0 5vw rgba(170, 109, 247, 0.58);
	}
	.twitter {
		box-shadow: 0 0 5vw rgba(255, 255, 255, 0.58);
	}
	.left_head span {
		text-shadow: 0 0 6vw rgba(255, 255, 255, 0.35);
	}
	.left_head svg {
		filter: drop-shadow(0 0 3vw rgba(120, 243, 128, 0.25));
	}
	.blur_badge {
		filter: blur(3vw);
	}
	#agree:checked {
		box-shadow: 0 0 4vw rgba(255, 255, 255, 0.6);
	}
}



.space {
	justify-content: space-between;
}
.w100 {
	width: 100%;
}
.h100 {
	height: 100%;
}
.tc {
	text-align: center;
}
.clmn {
	display: flex;
	flex-direction: column;
}
.flex {
	display: flex;
}
.alcn {
	display: flex;
	align-items: center;
}
.jlcn {
	display: flex;
	align-items: center;
	justify-content: center;
}
.rev {
	flex-direction: row-reverse;
}

/* ===== Diebstahlschutz: kein Markieren / Ziehen / Speichern ===== */
body {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
	-webkit-touch-callout: none;
}
img, canvas, video {
	-webkit-user-drag: none;
	-khtml-user-drag: none;
	-moz-user-drag: none;
	-o-user-drag: none;
	user-drag: none;
	-webkit-touch-callout: none;
}
/* Nicht-anklickbare Medien: gar nicht erst als Ziel ansprechbar (kein Drag/Save-Target) */
.avatar img, .banner img, .head_music img, .link_bg, .flex_icons img {
	pointer-events: none;
}
/* Bedienelemente bleiben nutzbar */
input, .volume_slider, .ms_btn { pointer-events: auto; }