body,
html {
	font-size: 1.2rem;
	_font-family: "Work Sans", sans-serif;
	font-weight:400;
	background-color: #fff;
	width: 100%;
	margin:0px;
	padding:0px;
	
}

body {
	font-family: 'Montserrat', sans-serif, Arial, sans-serif;
}


body {
	--bottomGap: .5vh;
	--lineColor: #6f6f6f;
	--lightlineColor: #aaaaaa;
	--backgroundGrey:#EAEAEA;
	--sub-ausgabe-grey: #D5D5D3;
	--button-size:40px;
	--button-mobile-size:40px;
	--semmel-red: #D51130;
	--semmel-red-opacy:#90091F99;
	--button-right:right;
	--mainFont:'Montserrat', sans-serif;
	--linkColor: #000;
	--afterSize: clamp(.5rem, 1vw + .4rem, 2em);
	--close-button-size: 30px;
	--form-light: #ffffff;
	--h1-headline-size: clamp(2.4rem, 7vw, 8rem);	
	--h2-headline-size: clamp(1.8rem, 4vw, 5rem);
	--h3-headline-size: clamp(1.6rem, 4vw, 5rem);
	--h4-headline-size: clamp(.8rem, 1vw, 2rem);
	--page-menue-size: clamp(1.2rem, 1.5vw, 1.6em);
	--page-menue-size--x: clamp(1rem, 7vw, 1.6rem);
	--page-image-caption: clamp(.4rem, 3vw, .6em);
	--link-box: clamp(1.4rem, 2vw, 1.8rem);
	line-height:1.6em;
	--sectionPadding: 30px;
	--fliesstext-size:clamp(.8rem, 3vw, 1.1rem);
	--list-size:clamp(.8rem, 3vw, 1.1rem);
	--bookingBoxHeadline:clamp(2.5rem, 4vw, 6rem);
	--bookingBoxSubHeadline:clamp(1.2rem, 1.6vw, 2.4rem);
	--boxed-size:1920px;
	--header-margin:3vh;
	--line-height_1_2:1.2rem;
	--titelSize: clamp(.8em, 4vw, 1.3em);
	--titel-size: clamp(.8em, 4vw, 1.3em);
	--image_sub_text: clamp(1em,1.3vw,1.4em);
	--logosize: clamp(45px, 10vw, 55px);
	--logo_padding: minmax(10px, 30px);
	--logosize-header:45px;
}
a {
	text-decoration: none;
}
a.text-link
 {
	max-width: none;
	text-transform:uppercase;
	font-size: calc(var(--link-box) * .7);
}
p a,
li a {
	color: var(--semmel-red);
	font-weight:400;
	transition:all .5s ease-in-out;
}




p a:hover,
li a:hover{
	text-decoration:underline;
	color:black;
}

.featuredHeader {
	margin-bottom: var(--header-margin);
}

.boxed {
	max-width:var(--boxed-size);
	margin: 0 auto;
}
.section-margin {
	margin:10vh auto 10vh auto;
}

html {
	scroll-behavior: smooth;
}

.super_size{
	font-size:clamp(5em, 13vw,13em);
	color: var(--semmel-red);
	font-weight:800;
	font-family: 'Montserrat','Work sans';
}
.inside:has(.video_section) {
	container-name: video_section_container;
	container-type: inline-size;
	overflow:hidden;
}
.not_found_404 .static_page .inside .video_section {
	display: flex;
	overflow:visible;
}
.videoDiv{ 
	position: absolute;
  width:100vw;
  aspect-ratio: 16/9;
  z-index:0;
  top:0px; 
  overflow:hidden;
}
.videoDiv img {
	width:inherit;
}
.grid_404 {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
	width:100%;
	height:auto;	
	min-height: 80vh;
	z-index:1;
}
.video_404 { 
  aspect-ratio: 16/9;
}

.static_page:has(.videoDiv) {
  padding:0px 30px;
}

@container video_section_container (min-width: 200px ){
	.video_section {
		display: flex;
		flex-direction: column;
	}
	.videoDiv{ 
	  width:100%;
	  height:auto;
	  max-height:none;
	  _aspect-ratio: 1/1!important;
	  position: relative;
	}
	.grid_404 {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
		width:100%;
		_height:100%;	
		min-height: none!important;
	}
	.grid_404 > div:nth-child(-n + 1) {
		display:none!important;
	}
	.grid_404 > div > div:nth-child(-n + 1) {
		margin-top:20px!important;
	}
	.video_404 { 
		width:100%;
	    _aspect-ratio: 1/1;
	}
}


@container video_section_container (min-width: 800px ){
	.videoDiv{ 
	  width:100vw;
	  height:100%;
	  max-height:75vh;
	  aspect-ratio: 16/9;
	  position: absolute;
	}
	.grid_404 {
		display: grid;
		grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
		width:100%;
		height:auto;	
		min-height: 70vh;
	}
	.video_404 { 
	  aspect-ratio: 16/9;
	}
	.grid_404 > div:nth-child(-n + 1) {
		display:flex!important;
	}
	.grid_404 > div > div:nth-child(-n + 1) {
		margin-top:10vh!important;
	}
}



/*

p,
span,
strong,
b,
*/

.ce_text ul {
	padding:0;
	padding-left: var(--close-button-size);
	_width: 100%;
}
.ce_text li {
	list-style:none;
	font-size: var(--fliesstext-size);
	width:auto;
}
.ce_text li:before {
		content:'';
	  width:var(--close-button-size);
	  height:var(--close-button-size);
	  background-repeat: no-repeat;
	  background-position: left center;
	  transition: all .3s ease;
	  position: absolute;
	  left:0;
	  _display: flex;	
	  _background-color:red;
	  mask-repeat: no-repeat;	
	mask-image: url('data:image/svg+xml;charset=UTF-8,<svg id="pfeil-icon" class="pfeil" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 120 120"><polygon display="inline" style="enable-background:accumulate; fill:white;" points="70.6,47.6 47.6,24.6 36.1,36.1 59.1,59.1 36.1,82.1 47.6,93.6 70.6,70.6 82.1,59.1"/></svg>');
	background-size: 30px;
	background-color: red;
}


/* -----------   PAGE HEADER FOLGESEITEN   -------------- */

section .pageHeaderRed .featuredHeader .titel.whiteType h1.headline.whiteType {
	
}
.pageHeaderRed {
	container-name: pageHeader-red;
	container-type: inline-size;
	padding:30px;
	_background-color:var(--semmel-red);
	
	  background-image: linear-gradient(
	  90deg,
	  #ff003f 5%,
	  #90091F 50%,
	  #ff003f 95%
	  );
	  background-size: auto auto;
	  background-clip: border-box;
	  background-size: 200% auto;
	  color: #fff;
	  animation: header-anim 17s linear infinite;	
}

.hide_header .pageHeaderRed {
	display:none;
}
@keyframes header-anim {
  to {
  background-position: 200% center;
  }
}


.pageHeaderRed .featuredHeader {
	padding:7vh auto 4vh auto;
	transition:all .3s ease-in-out;
}
.pageHeaderRed .featuredHeader .titel{
	border-bottom:1px solid #ffffff;;
}
.pageHeaderRed .featuredHeader .titel.whiteType,
.pageHeaderRed .featuredHeader h1.whiteType {
	color:#fff;
}


.ticketChartElement:last-child {
	border:0;
}
.kuenstler-liste.boxed{
	margin-top:1vh;
}

@container pageHeader-red ( min-width: 200px ) {
	.pageHeaderRed .featuredHeader  {
		margin:2vh auto 1vh auto;
	}
}
@container pageHeader-red ( min-width: 700px ) {
	.pageHeaderRed .featuredHeader {
		margin:7vh auto 4vh auto;
	}
}



.artist_description div {
	font-size:1em!important;
	line-height:1.4em!important;
	font-weight: 200!important;
	font-size: !important;
	font-family: 'Montserrat', sans-serif;
	font-weight: 400!important;
	text-align: left!important;
}

p,
strong,
b {
  _font-size:1em!important;
  _line-height:1.4em!important;
  font-weight: 200;
  _font-size: !important;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  text-align: left!important;
}
strong,
b{
  font-weight: 600;
  }
  
h1,h2,h3,h4,h5,h6 {font-family: 'Montserrat', sans-serif;}

.titel {
	font-size: var(--titelSize);
	padding-bottom:.3rem;
	margin-bottom:.8rem;
	border-bottom:1px solid var(--lineColor);
	width: auto;
	text-transform:uppercase;
	font-family: 'Montserrat', sans-serif;
	font-weight:700;
}
.titelsize {
	font-size: var(--titelSize);
	text-transform:uppercase;
	font-family: 'Montserrat', sans-serif;
	font-weight:700;
}
h1.headline {
	font-size: var(--h1-headline-size);
	margin:0;
	_padding:0;
	padding-top:1vh;
	line-height:.98em;
	text-transform:uppercase;
	font-weight: 800;
	color: var(--semmel-red);
	margin-bottom:0vh;
	display: inline;
	width:9ch;
	text-wrap: wrap;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}
h1.headline.headline-white {
	color:#fff;
}
.ce_text h2 {
	
	_font-size: var(--h4-headline-size);
	margin:0;
	_padding:0;
	padding-top:1vh;
	line-height:1em;
	text-transform:uppercase;
	font-weight: 800;
	_color: var(--semmel-red);
	margin-bottom:3vh;
	margin-top:1vh;
	display: inline;
	width:9ch;
	text-wrap: wrap;
	word-wrap: break-word;
	overflow-wrap: anywhere;
	
}
h2.headline {
	font-size: var(--h2-headline-size) !important;
	margin:0;
	_padding:0;
	padding-top:1vh;
	line-height:1em;
	text-transform:uppercase;
	font-weight: 800;
	color:var(--semmel-red);
	margin-bottom:3vh;
	display: inline;
	width:9ch;
	text-wrap: wrap;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}
h2.headline.headline-white {
	color:#fff;
}
h3, .tour-title-h3 {
	font-size: var(--h3-headline-size) !important;
	margin:0;
	_padding:0;
	padding-top:1vh;
	line-height:.9em;
	text-transform:uppercase;
	font-weight: 800;
	color: var(--semmel-red);
	margin-bottom:3vh;
	display: inline;
	width:9ch;
	text-wrap: wrap;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}
.tour-title-h3 {
	color:#fff;
}
/* Tourname rot bei Touren ohne feste Farbe (Kundenwunsch 2026-10-12); tour.js
   dunkelt den errechneten Hintergrund dafür ab. Hebt die weiße Schrift aus
   ".colormode .animateType" (effects.css) auf */
.colormode.tourname-rot .artist-headline h1.animateType {
	background-image: linear-gradient(-90deg, #ff003f 0%, #90091F 29%, #ff003f 67%, #ff003f 100%);
	background-size: 200% auto;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: headline-anim 7s linear infinite;
}
/* Künstlername über dem Tournamen (Tour-Seite): eigene Zeile */
.tour-title-h3.tour-kuenstlername {
	display: block;
	width: auto;
	margin-bottom: .2em;
}

h3.headline.headline-white {
	color:#fff;
}


.kontakt_content h3 {
	font-size: var(--h4-headline-size) !important;
	margin:0;
	_padding:0;
	padding-top:1vh;
	line-height:.9em;
	text-transform:uppercase;
	font-weight: 800;
	color: var(--semmel-red);
	margin-bottom:3vh;
	display: inline;
	width:9ch;
	text-wrap: wrap;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}	



h4, .tour-title {
	font-size: var(--h4-headline-size) !important;
	margin:0;
	_padding:0;
	padding-top:1vh;
	line-height:.9em;
	text-transform:uppercase;
	font-weight: 800;
	color: var(--semmel-red);
	margin-bottom:3vh;
	display: inline;
	width:9ch;
	text-wrap: wrap;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}

.bigBoldHeadline{
	font-size: var(--page-menue-size);
	color: #000;
	font-family: 'Montserrat', sans-serif;
	font-weight:800;
	_line-height: .9em;
	margin-bottom: 2vh;
	max-width: 12ch;
	display: inline;
}
.m-top {
  margin-top: auto;
}
.m-bottom {
	margin-bottom:2rem;
}
a {
	text-decoration: xnone;
	color: var(--linkColor);
}
.ce_text li {
	font-size: var(--list-size);
}


/* ---------------   ARTIST MENU ---------------*/

.artist-menue .artist-menue_List .artist-menue_Element.active:after{
	color: var(--semmel-red);
	transform: rotate(90deg);
	background-color: var(--semmel-red);
}

.artist-menue .artist-menue_List .artist-menue_Element.active a{
	color: var(--semmel-red)!important;	
}
.artist-menue .artist-menue_List .artist-menue_Element.active:after{
	background-color:var(--semmel-red)!important;
}








/*  -----------   Image Oberlay Hover -------

<div class="overlay"><div class="buttonCircle animate plus-icon"></div></div>
*/
.artist-tour-image,
.artistElementImage,
.eventImage{
	overflow: clip;
	position: relative;
}
.overlay{
	opacity: 0;
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	background-color: var(--semmel-red);
	z-index: 10;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	transition:all .7s ease-in-out;
}

.overlay .buttonCircle {
	scale: .7;
	transform: translateY(450%);
	position: absolute;
	transition:all .9s ease-in-out;
}
.overlay:hover {
	opacity: 1;
	background-color: var(--semmel-red-opacy);
	transition:all .3s ease-in-out;
}



.overlay:hover .buttonCircle.animate:after  {
  transform: rotate(360deg);
  transition:all .9s ease-in-out;
}
.overlay:hover .buttonCircle {
	transform: translateY(0%);
	
}
/* -----------   TOOL TIP  ----- */
.tooltip {
	display:absolute;
	position:relative;
	_border-bottom:1px dotted #666;
	text-align:left;
}
.tooltip .right {
	min-width:200px;
	max-width:400px;
	top:50%;
	left:100%;
	margin-left:20px;
	transform:translate(0, -50%);
	padding:0;
	color:#EEEEEE;
	background-color:#444444;
	font-weight:normal;
	font-size:13px;
	border-radius:8px;
	position:absolute;
	z-index:99999999;
	box-sizing:border-box;
	box-shadow:0 1px 8px rgba(0,0,0,0.5);
	visibility:hidden; opacity:0; transition:opacity 0.8s;
}

.message:hover .tooltip .right {
	visibility:visible; opacity:1;
}

.tooltip .right img {
	width:400px;
	border-radius:8px 8px 0 0;
}
.tooltip .text-content {
	padding:10px 20px;
	line-height:1.3em;
}

.tooltip .right i {
	position:absolute;
	top:50%;
	right:100%;
	margin-top:-12px;
	width:12px;
	height:24px;
	overflow:hidden;
}
.tooltip .right i::after {
	content:'';
	position:absolute;
	width:12px;
	height:12px;
	left:0;
	top:50%;
	transform:translate(50%,-50%) rotate(-45deg);
	background-color:#444444;
	box-shadow:0 1px 8px rgba(0,0,0,0.5);
}





/*  ----------   BASIC BOX ----------*/
.basicBoxElement{
	gap:1vw;
	position: relative;
	display: grid;
	container-name: kalenderElementContainer;
	container-type: inline-size;
}
.basicBoxElement .warning {
	position: absolute;
	top:10px;
	left:10px;
	border-radius:100rem;
	background-color:black;
	width:30px;
	height:auto;
	aspect-ratio:1/1;
	z-index:10;
	filter:invert(100%) ;
	display:none;
}
.basicBoxElement .image {
	min-width:60px;
	width:100%;
	height:auto;
	aspect-ratio:1/1;
	_background-color:black;
	border-radius:100rem;
	overflow: clip;
}
.basicBoxElement .basicBoxContent{
	display: flex;
	flex-direction: column;
	justify-content: center;
	margin-bottom:2vh;
}
.basicBoxElement .contentTitel{
	text-transform:uppercase;
	font-family: 'Montserrat', sans-serif;
	font-weight:700;
	align-self: left;
	_margin-bottom:.2rem;
	text-align:left;
}
.basicBoxElement .contentText{
	font-weight:400;
	_font-family: 'Work Sans', sans-serif;
	_font-size: var(--fliesstext-size);
	margin-bottom:.3rem;
}

.basicBoxElement .location{
	margin-top:.5rem;
	text-transform:uppercase;
	_font-family: 'Work Sans', sans-serif;
}
.basicBoxElement .ort,
.basicBoxElement .begin{
	text-transform:uppercase;
	font-weight:400;
	_font-family: 'Work Sans', sans-serif;
	font-weight:600;
	_color:var(--semmel-red);
}
.basicBoxElement {
	_padding-bottom: .2rem;
	_basicborder-bottom: 1px solid var(--lineColor);
	_padding-right:calc(var(--afterSize)*3);
	opacity: 1;
	transition: all .2s ease-in-out;
}
.basicBoxElement:hover {
	color:var(--semmel-red)!important;
	__background-color: var(--backgroundGrey);
	__padding:.2em .5em;
	opacity: 1;
}
.basicBoxElement:hover:after {
	color:var(--semmel-red);
	transform: rotate(90deg);
}

#neu_im_vvk_bg {
	background: #eaeaea;
}

/*              NEWSLETTER MODAL            */

#newsletterModal {
	_display: none;
	position: fixed;
	bottom: -300px;
	right: 10px;
	width:auto;
	max-width: 300px;
	padding: 20px;
	border-radius:24px;
	background-color: var(--semmel-red);
	border: 0px solid #ccc;
	box-shadow: 0 0 10px rgba(0,0,0,0.1);
	z-index: 1000;
	transition:all .5s ease-in-out;
	transform: scale(50%);
	color:white;
}
#newsletterModal h2 {
	margin-top: 0;
	color:white;
	font-size:clamp(1.2rem, 5vw, 1.6rem);
}
#newsletterModal button {
	margin-top: 10px;
	padding: 10px;
	background-color: white;
	color: var(--semmel-red);
	border: none;
	cursor: pointer;
}
#newsletterModal button:hover {
	background-color: #ffffff50;
}
/* Stil für das Modal, wenn es aktiv ist */
#newsletterModal.aktiv {
	display: block;
	bottom: 10px;
	opacity: 1;
	transform: scale(100%);
}
#newsletterModal_close {
  position:absolute;
  right:10px;
  top:10px;
  width:30px;
  height:auto;
  aspect-ratio:1/1;
  background-color:red;
  z-index:10;
  transition: all .5s ease-in-out;
}
.close-icon:hover:after {
  transform: rotate(180deg);
}

#newsletterModal .newsletter_button {
	background-color: #ffffff;	
	font-size: clamp(.75em, 1vw, 1em) !important;

}


#newsletterModal .buttonCircle {
	background-color: white;
}
#newsletterModal .buttonCircle:after {
	content: '';
	background-color: var(--semmel-red);

}