.artist-hero {
	--artist-color: #000;

	position: relative;
	width: 100%;
	min-height: 100vh;
	overflow: visible;
	margin-bottom: 100px;
}

.artist-hero__bg {
	position: relative;
	width: 100%;
	min-height: 100vh;

	display: flex;
	align-items: flex-end;

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* Farb-Overlay */
.artist-hero__bg::before {
	content: "";
	position: absolute;
	inset: 0;

	background: var(--artist-color);
	opacity: 0.5;

	z-index: 1;
	pointer-events: none;
}

/* optional: zusätzlicher Verlauf für bessere Lesbarkeit */
.artist-hero__bg::after {
	content: "";
	position: absolute;
	inset: 0;

	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.55) 0%,
		rgba(0, 0, 0, 0.1) 55%,
		transparent 100%
	);

	z-index: 2;
	pointer-events: none;
}

.artist-hero__content {
	position: relative;
	z-index: 3;

	width: 100%;
	padding: clamp(30px, 6vw, 100px);

	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 40px;

	box-sizing: border-box;
	padding-bottom: 150px;
}

/* Logo */
.artist-hero__logo {
	flex: 0 0 auto;
}

.artist-hero__logo img {
	display: block;
	width: auto;
	height: auto;
	max-width: min(350px, 35vw);
	max-height: 220px;
	object-fit: contain;
}

/* Text */
.artist-hero__headline {
	margin-left: auto;
	text-align: right;
	color: #fff;
}

.artist-hero__name {
	margin: 0;

	font-size: clamp(3rem, 8vw, 9rem);
	line-height: 0.9;
	font-weight: 800;
	letter-spacing: -0.04em;
	color:#FFF;
}

.artist-hero__title {
	margin-top: 15px;

	font-size: clamp(1rem, 2vw, 1.8rem);
	line-height: 1.3;
}

.artist-booking {
	position: absolute;
	width: 150px;
	height: 150px;

	left: 50%;
	bottom: -75px;
	transform: translateX(-50%);
	z-index: 99;
}



/* Mobile */
@media (max-width: 768px) {

	.artist-hero,
	.artist-hero__bg {
		min-height: 100svh;
	}

	.artist-hero__content {
		flex-direction: column;
		align-items: flex-start;
		justify-content: flex-end;
		padding: 25px;
	}

	.artist-hero__logo img {
		max-width: 60vw;
		max-height: 140px;
	}

	.artist-hero__headline {
		margin-left: 0;
		text-align: left;
	}

	.artist-hero__name {
		font-size: clamp(3rem, 14vw, 6rem);
	}
}



body.single-act .textbox {
	padding-left: calc(var(--main-padding) + 15vw);
  padding-right: calc(var(--main-padding) + 15vw);
	padding-top:50px;
}
body.single-act .textbox h2 {
	text-transform: none !important;
}




body.single-act .galerie_slider {
	padding-left: calc(var(--main-padding) + 0vw);
  padding-right: calc(var(--main-padding) + 0vw);
	height: auto;
	max-height: 500px !important;
	padding-bottom: 50px;
	padding-top:40px;
	margin-top:50px;
}
body.single-act .galerie_slider .galerieSwiper {
	height: auto;
	max-height: 500px !important;
}
body.single-act .galerie_slider .swiper-pagination-bullet {
	background: #fff;
}


body.single-act .galerieSwiper .swiper-slide {
	aspect-ratio: 16 / 12;
	overflow: hidden;
	border-radius: 20px;
	max-height: 400px;
}

body.single-act .galerieSwiper .swiper-slide a {
	display: block;
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

body.single-act .galerieSwiper .swiper-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 0;
}




/* From Uiverse.io by Giannasaurus */ 
body.single-act .artist-hero .button {
  cursor: pointer;
  border: none;
  background: #fff;
  color: #000;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  overflow: hidden;
  position: relative;
  display: grid;
  place-content: center;
  transition:
    background 300ms,
    transform 200ms;
  font-weight: 600;
	box-shadow: rgba(17, 12, 46, 0.15) 0px 48px 100px 0px;
}

body.single-act .artist-hero .button:hover {
	color:#fff;
}

body.single-act .artist-hero .button__text {
	font-size: 20px;
  position: absolute;
  inset: 0;
  animation: text-rotation 8s linear infinite;

  > span {
    position: absolute;
    transform: rotate(calc(19deg * var(--index)));
    inset: 7px;
  }
}

body.single-act .artist-hero .button__circle {
  position: relative;
  width: 40px;
  height: 40px;
  overflow: hidden;
  background: #fff;
  color: #db5275;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.button__icon--copy {
  position: absolute;
  transform: translate(-150%, 150%);
}

.button:hover {
  background: #000;
  transform: scale(1.05);
}

.button:hover .button__icon {
  color: #000;
}

.button__icon, .button__icon path {
	fill:#fff !important;
}

.button:hover .button__icon:first-child {
  transition: transform 0.3s ease-in-out;
  transform: translate(150%, -150%);
}

.button:hover .button__icon--copy {
  transition: transform 0.3s ease-in-out 0.1s;
  transform: translate(0);
}

@keyframes text-rotation {
  to {
    rotate: 360deg;
  }
}