/* colors */

:root {
	--color-main: #d63652; /* himbeerrot */
	--color-hover: #a30c70; /* mattlila */
}

/* anderer farben */

a,
hr,
.button,.button.disabled,.button[disabled],.button.disabled:hover,.button[disabled]:hover,.button.disabled:focus,.button[disabled]:focus,
.button:hover,.button:focus,
.button.primary,.button.primary.disabled,.button.primary[disabled],.button.primary.disabled:hover,.button.primary[disabled]:hover,.button.primary.disabled:focus,.button.primary[disabled]:focus,
.button.clear.primary,.button.clear.primary.disabled,.button.clear.primary[disabled],.button.clear.primary.disabled:hover,.button.clear.primary[disabled]:hover,.button.clear.primary.disabled:focus,.button.clear.primary[disabled]:focus,
.button.dropdown.hollow.primary::after,.button.dropdown.clear.primary::after {
	color: var(--color-main);
}

.button.hollow.primary,.button.hollow.primary.disabled,.button.hollow.primary[disabled],.button.hollow.primary.disabled:hover,.button.hollow.primary[disabled]:hover,.button.hollow.primary.disabled:focus,.button.hollow.primary[disabled]:focus
{
	border: 1px solid var(--color-main);
	color: var(--color-main);
}

.button {
	border: 2px solid var(--color-main);
}

.tabs.primary,
.tabs-title>a:focus,.tabs-title>a[aria-selected='true'],
.menu .is-active>a,
.menu .active>a,
.primary,
body .callout.cta,
body.primary-color .callout.cta,
body.primary-color .shortlist.concert.last.upcoming::before,
footer,
.tabs.archiv a:focus {
	background: var(--color-main);
}

.tabs-title>a,
.accordion.shortlist .accordion-title,
.sib-form #sib-container a,
body.primary-color button,body.primary-color .button,
p.primary {
	color: var(--color-main);
}

body.primary-color hr,
body.primary-color button,body.primary-color .button,
.shortlist,
.shortlist.concert .img {
	border-color: var(--color-main);
}

.sib-form #sib-container form#sib-form svg.svgIcon-sphere {
	fill: var(--color-main);
}

body.secondary-color button:hover,body.secondary-color button:focus,body.secondary-color .button:hover,body.secondary-color .button:focus {
	border-color: var(--color-main);
	color: var(--color-main);
}

/* .menu.top li {
	border-top:1px solid var(--color-main);
} */


.menu a:hover,
a:hover,a:focus,
.button.clear.secondary,.button.clear.secondary.disabled,.button.clear.secondary[disabled],.button.clear.secondary.disabled:hover,.button.clear.secondary[disabled]:hover,.button.clear.secondary.disabled:focus,.button.clear.secondary[disabled]:focus,
.accordion.shortlist .accordion-title:hover,
.scroll:hover,
a:hover, a:active, a:focus,
a>h1:hover,a>h1:active,a>h1:focus,a>h2:hover,a>h2:active,a>h2:focus,a>h3:hover,a>h3:active,a>h3:focus,a>h4:hover,a>h4:active,a>h4:focus,
blockquote a:hover,blockquote a:active,blockquote a:focus,
.concert.english a:hover,.concert.english a:active,.concert.english a:focus,.content.english a:hover,.content.english a:active,.content.english a:focus,
#contactContainer a,
.menu.aside li a,
.menu.bottom li a,
.callout.contact,
.callout.contact h2,
.callout.status span,
p.secondary {
	color: var(--color-hover);
}

.button.secondary,.button.secondary.disabled,.button.secondary[disabled],.button.secondary.disabled:hover,.button.secondary[disabled]:hover,.button.secondary.disabled:focus,.button.secondary[disabled]:focus,
.tabs-title>a:hover,
.secondary,
body .callout.cta:hover,
body.primary-color .callout.cta:hover,
body.secondary-color .callout.cta,
body.secondary-color .shortlist.concert.last.upcoming::before,
nav.top,
.tabs.archiv a:hover,
.bx-wrapper .bx-controls .bx-pager.bx-default-pager a.active,.bx-wrapper .bx-controls .bx-pager.bx-default-pager a:hover,.bx-wrapper .bx-controls .bx-pager.bx-default-pager a:active,.bx-wrapper .bx-controls .bx-pager.bx-default-pager a:focus {
	background-color: var(--color-hover);
}

.button.hollow.secondary,.button.hollow.secondary.disabled,.button.hollow.secondary[disabled],.button.hollow.secondary.disabled:hover,.button.hollow.secondary[disabled]:hover,.button.hollow.secondary.disabled:focus,.button.hollow.secondary[disabled]:focus{
	border:1px solid var(--color-hover);
	color: var(--color-hover);
}

.button.dropdown.hollow.secondary::after,.button.dropdown.clear.secondary::after{
	border-top-color: var(--color-hover);
}

body.primary-color button:hover,body.primary-color button:focus,body.primary-color .button:hover,body.primary-color .button:focus,
body.secondary-color button,body.secondary-color .button {
	border-color: var(--color-hover);
	color: var(--color-hover);
}

body.secondary-color .callout.content.concert.musician,
body.secondary-color hr {
	border-color: var(--color-hover);
}

.scroll:hover svg.arrow, 
.scroll.up svg.arrow,
svg.topnav:hover,
svg.wave,
svg.icon:hover {
	fill: var(--color-hover);
}

/* abweichende farbgebungen */
.menu a,
.concert a,
.musicians a {
	color: #000;
}

nav.top {
	background-color: #fff;
}

.menu.top li {
	border-top: none;
}

.menu a:hover,
.concert a:hover,
.musicians a:hover {
	color: var(--color-hover);
}

a.button {
	color: var(--color-main);
}

a.button:hover {
	color: var(--color-hover);
}

.button:hover {
	border: 2px solid var(--color-hover);
}





/* anderer font */

/* neue fontverweise */

/* poppins-300 - latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/poppins-v23-latin-ext-300.woff2') format('woff2');
}

/* poppins-300italic - latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/poppins-v23-latin-ext-300italic.woff2') format('woff2');
}

/* poppins-regular - latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/poppins-v23-latin-ext-regular.woff2') format('woff2');
}

/* poppins-italic - latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url('../fonts/poppins-v23-latin-ext-italic.woff2') format('woff2');
}

/* poppins-600 - latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/poppins-v23-latin-ext-500.woff2') format('woff2');
}

/* poppins-600italic - latin-ext */
@font-face {
  font-display: swap;
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  src: url('../fonts/poppins-v23-latin-ext-500italic.woff2') format('woff2');
}

/* Cormorant Garamond Light Italic */
@font-face {
  font-display: swap;
  font-family: 'Cormorant Garamond';
  font-style: italic;
  font-weight: 300;
  src: url('../fonts/cormorant-garamond-v16-latin-ext-300italic.woff2') format('woff2');
}


/* font-überschreibungen */
body,
h1,.h1,h2,.h2,h3,.h3,h4,.h4,h5,.h5,h6,.h6,
h1.small,h2.small,h3.small,h4.small,h5.small,h6.small,
h2.title, h2 span,
.menu, .menu.top, .menu.start,
button, .button,
.accordion.shortlist .accordion-title,
.sib-form,
.info.archiv code, .accordion.shortlist code,
.bx-wrapper .bx-controls .bx-pager {
	font-family:"Poppins", Geneva, Roboto, Arial, sans-serif;
	font-weight: 300;
}

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6,
h1.small,h2.small,h3.small,h4.small,h5.small,h6.small,
h2.title, h2 span {
	font-weight: 400;
}

strong {
	font-weight: 500;
}

em {
	font-style: italic;
}


html {
	font-size: 100%;
}

body {
	background: url('../img/background/flow-3-soft-900px.jpg') no-repeat bottom right;
	font-size: 1rem;
	letter-spacing: .01rem;
}

h2.title,
.accordion.shortlist .accordion-title,
button, 
.button {
	text-transform: uppercase;
}

button, .button {
	font-size: 110%;
	font-weight: 500;
}

.menu.aside li a {
	color: #fff;
}

.menu.aside li a:hover, 
.menu.aside li a:focus {
	color: #fd6119;
}

.hero h1 {
	position: absolute;
	bottom: 50px;
	right: 300px;
	
	color: #fff;
	font-size: 2.6rem;
	line-height: 1;
	margin-bottom: 0;
	text-shadow: rgba(0,0,0,.5) 1px 1px 8px;
	z-index: 200;
}

.hero {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
}

.hero img {
	max-width: unset;
	width: 100%;
}

h1, h1.title {
	margin-top: 2em;
	margin-bottom: 1em;
}

h2, .h2, h2.title, h2 span {
	font-size: 2.5rem;
	margin-bottom: 1em;
	text-transform: unset;
}

h3, .h3 {
	font-size: 1.8rem;
	margin-bottom: .7em;
}

p {
	line-height: 1.5;
}

.accordion.shortlist .accordion-title {
	font-size: 1.0625rem;
	font-weight: 500;
}

.menu.main {
	font-size: 1.0625rem;
}

.menu li.active > a {
	text-decoration: none;
	border-bottom: 1px solid #000;
	padding-bottom: 5px;
}


/* .concert .info a {
	text-decoration: underline;
} */

section.introtext,
section.concerts {
	margin-top: 4rem;
}

section.introtext .introtext-special {
	font-family: "Cormorant Garamond", Times, "Times New Roman", serif;
	font-style: italic;
	font-weight: 300;
}

section.introtext p {
	font-size: 1.125rem;
	line-height: 1.5;
	padding: 0 1rem;
}

section.introtext .introtext-special p {
	font-size: 1.3rem;
}


.shortlist.concert {
	padding-bottom: 6rem;
}

/* konzertankündigung startseite */
.shortlist.concert .img {
	padding-top: 0;
	border: none;
}

.shortlist.musicians, .shortlist.artists {
	padding-top: 0;
	border: none;
}

.content.start .primary,
.content.basic .primary {
	background: transparent;
}

/* section:last-of-type {
	background: url('../img/background/flow-3-soft-900px.jpg') no-repeat bottom right;
} */


.shortlist.musicians figcaption, .shortlist.artists figcaption {
	font-weight: 500;
}

.menu li.active > a {
	border-bottom: none;
	padding-bottom: .7rem;
}

.caption {
	margin-bottom: 1rem;
}




/* Responsiveness */

.wortmarke-mobil svg.wortmarke {
  width: 150px;
  height: auto;
  padding: 0.7rem 1rem;
}



@media screen and (max-width: 84em) {
	.hero h1 {
		bottom: 30px;
		right: 150px;
	  }
}

@media screen and (max-width: 60em) {
	.hero h1 {
		bottom: unset;
		right: unset;
		top: 90px;
		left: 70px;
	  }
}

@media screen and (max-width: 66.25em) {
	.menu.main {
		font-size: 1rem;
	}
	
	.menu.top.show-for-xmedium {
		display: block !important;
		visibility: visible !important;
	}
}


@media screen and (max-width: 40em) {
	.hero h1 {
		font-size: 2rem;
		top: 100px;
		left: 30px;
	  }
	  
	  h1, h1.title {
		margin-top: 1em;
		margin-bottom: 1em;
	  }
	  
	 body {
		  background: url('../img/background/flow-3-soft-600px.jpg') no-repeat bottom right;
	  }
}

@media screen and (max-width: 30em) {
	.hero h1 {
		font-size: 1.5rem !important;
		top: 100px;
		left: 20px;
	  }
	  
	 body {
		 background: url('../img/background/flow-3-soft-600px.jpg') no-repeat bottom right;
	 }
}



@media screen and (min-width: 60em) and (max-width: 74.938em) {
  .menu.main li a {
	padding: 1.5rem 0.4rem 0.5rem;
  }
}


@media screen and (max-width: 59.938em) {
	
	nav.hide-for-xmedium .menu.start {
		text-transform: unset;
	}
	
	nav.top {
		background: #cfd3e2;
	}
	
	nav.bottom ul.show-for-xmedium {
		display: unset !important;
	}
	
	.menu.main li a:hover, .menu.main li a:focus,
	.menu.top li a:hover {
		color: var(--color-hover);
	}
	
	.callout.contact.info {
		padding-top: 0;
	}
	
	h2,
	h2.title {
		font-size: 2rem !important;
	}
	
}


@media screen and (max-width: 40em) {
	h1 {
		font-size: 2.5rem !important;
	}
	
	h2,
	h2.title {
		font-size: 2rem !important;
	}
}