:root {
	--color-red: #e4032e;
	--color-brown: #563429;
	--color-beige: #faf6f2;
	--color-black: #000000;
	--color-grey: #777777;
	--color-footer: #e8dbd2;
}

/* ibm-plex-sans-regular - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 400;
  src: url('../Fonts/ibm-plex-sans-v23-latin-regular.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-sans-italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 400;
  src: url('../Fonts/ibm-plex-sans-v23-latin-italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-sans-700 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 700;
  src: url('../Fonts/ibm-plex-sans-v23-latin-700.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* ibm-plex-sans-700italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'IBM Plex Sans';
  font-style: italic;
  font-weight: 700;
  src: url('../Fonts/ibm-plex-sans-v23-latin-700italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}

/* roboto-condensed-800italic - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 800;
  src: url('../Fonts/roboto-condensed-v31-latin-800italic.woff2') format('woff2'); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}



body {
	margin:0;
	padding:0;
	border:0;

	color:var(--color-black);
	background: var(--color-beige);
	font-family: 'IBM Plex Sans';
}

#main-wrapper {	
	background: var(--color-beige);
	overflow-y: hidden;
}

.scrolled50 #main-wrapper,
.scrolledinitial #main-wrapper{
	
}

main {
	max-width: 1065px;
	margin:0 auto;
}

.main-clearer {
  width: 100%;
  display: inline-block;
}

#header {
/*	margin:50px 50px 0 50px;
/	margin-left: clamp(1.25rem, -4.87768rem + 12.766vw, 5.375rem);
/	margin-top: clamp(1.25rem, -4.87768rem + 12.766vw, 5.375rem);
/	margin-right: clamp(1.25rem, -4.87768rem + 12.766vw, 5.375rem);
*/
	background: var(--color-beige);
	position: sticky;
	z-index: 10;
}


.scrolled50 #header,
.scrolledinitial #header {
	/*position: fixed;*/
	z-index: 2;
	background: rgba(255,255,255,0.9);
	top:0;
	margin: 0;
	box-sizing: border-box;
	left:0;
	right:0;

}

.header-wrapper {
	max-width: 1285px;
	max-width: 1065px;
	/* 
	padding:0 110px;
		https://websquadron.co.uk/font-clamp-generator/
		padding-left	768	0	PX	1285	110	PX	{padding-left: clamp(0rem, -10.21296rem + 21.277vw, 6.875rem);}
	*/

/*padding-left: clamp(0rem, -10.21296rem + 21.277vw, 6.875rem);
padding-right: clamp(0rem, -10.21296rem + 21.277vw, 6.875rem);
*/
	margin:0 auto;
	box-sizing: border-box;
}


#logo-wrapper {
	display: flex;
	justify-content: space-between;
	padding:20px 20px 40px 20px;
	gap: 20px;
}

.scrolled50 #logo-wrapper,
.scrolledinitial #logo-wrapper {
	/*padding-top:30px;*/
	padding-top: clamp(1.5625rem, 1.09834rem + 0.967vw, 1.875rem);
}

#logo .wortmarke {
	flex:1 1 auto;

	display: flex;
	flex-direction: column;
	justify-content: center;
}

.scrolled50 #logo .wortmarke,
.scrolledinitial #logo .wortmarke {
	justify-content: flex-end;	
}

#logo .wortmarke img {
	width: 100%;
	height: auto;
}

.scrolled50 #logo .wortmarke img,
.scrolledinitial #logo .wortmarke img {
}


#logo .wortmarke .logo-desktop {
	display: block;
}
#logo .wortmarke .logo-mobile {
	display: none;
}

@media only screen and (max-width: 768px) {
	#logo .wortmarke .logo-desktop {
		display: none	;
	}
	#logo .wortmarke .logo-mobile {
		display: block;
	}
}


#mainnav {
	display: block;
	text-align: right;
	padding:20px;
}

#mainnav ul {
	margin:0;
	padding:0;
	list-style-type: none;
	color: var(--color-grey);
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: 0.12em;
}

#mainnav ul li {
	display: inline-block;
	margin-right: 4px;
}


#mainnav ul li a {
	text-decoration: none;
	color:inherit;
}

#mainnav ul li a:hover,
#mainnav ul li.active a {
	color:var(--color-red);
}


#mainnav ul li a::after {
	content:'/';
}
#mainnav ul li:last-child a::after {
	content:'';
}

.scrolled50 #mainnav,
.scrolledinitial #mainnav {
	padding-bottom: 0 !important;
}	

@media only screen and (max-width: 768px) {

	.scrolled50 #mainnav, #mainnav {
		display: none;
		margin-top: 0px;
	}

	#logo .wortmarke {
		justify-content: flex-end;
	}


#mobileopener {
	flex: 0 1 10vw;
	width: 8vw;
	display: flex;
	justify-content: flex-end;
	align-items: flex-end;
	/* padding-bottom: 5px; */
	position: absolute;
	right: 6vw;
	/* bottom: 17px; */
	top: 21vw;
}

	#mobileopener .bar1 {
		height: 4px;
		background: var(--color-black);
		margin-top:1.1vw;
	}
	#mobileopener .bar2 {
		height: 4px;
		background: var(--color-black);
		margin-top:1.1vw;
	}
	#mobileopener .bar3 {
		height: 4px;
		background: var(--color-black);
		margin-top:1.1vw;
	}


	.mobilemenuopen #mobileopener .bar1,
	.mobilemenuopen #mobileopener .bar2,
	.mobilemenuopen #mobileopener .bar3 {
		background: var(--color-red);
	}


	.mobileopener-wrapper {
		width:100%;
		pointer-events: all;
		cursor: pointer;
	}

#mainnav ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
  color: var(--color-black);
  font-size: 21px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
}

#mainnav ul li a::after {
	content:'';
}

.scrolled50 #mainnav, #mainnav {
	display: block;
	width: 100%;
	overflow: hidden;
	position: absolute;
	background: var(--color-beige);
	z-index: 100;
	transform: translateY(calc(100% - 4px)) translateX(100vw);
	bottom: 0;
	left: 0;
	right: 0;
	border-top: 2px solid var(--color-red);
	border-bottom: 2px solid var(--color-red);
	transition: transform 0.3s ease, width 0.3s ease;
	/* display: none; */
	width: 0%;
	overflow: hidden;
	padding:0;
}

body.mobilemenuopen .scrolled50 #mainnav, body.mobilemenuopen #mainnav {
	width: 100vw;
	overflow: hidden;
	transform: translateY(calc(100% - 4px)) translateX(0);
	transition: transform 0.3s ease, width 0.3s ease;
	/* display: block; */
}

	#mainnav ul {
		padding:clamp(1.5625rem, -3.07958rem + 9.671vw, 4.6875rem);
	}

	#mainnav ul li {
		display: block;
		padding-right: 20px;
		margin-bottom: 10px;
	}


}












#footer {
	background: var(--color-beige);
	overflow: hidden;
  background: var(--color-footer);	
  max-width: 1065px;
  margin-left: auto;
  margin-right: auto;
  color:var(--color-red);
}
.footer-wrapper {	
	padding-top: 30px;
	padding-bottom: 30px;
	box-sizing: border-box;
  max-width: 1065px;
  margin: 0 auto;
  color:#fff;
}

#footer a {
	color: inherit;
	text-decoration:none;
}

#footer a:hover {
	text-decoration:underline;
}

#footernav ul {
	margin:0;
	padding:0;
	list-style-type: none;
}

#footernav ul li {
	display: inline-block;
}

#footer p {
	font-size: 17px;
	color: var(--color-red);
}

#footer ul {
	color:var(--color-brown);
	margin-bottom: 0;
}



p {
	font-size: 19px;
	line-height: 1.5em;
	margin: 0 0 1em 0;
	padding: 0;
	letter-spacing: 0.04em;
	color: var(--color-black);
}

.ce-bodytext ul {
	font-size: 19px;
	line-height: 1.5em;
	margin:0;
	padding: 0 0 0 1em;
	margin-bottom: 1em;
	letter-spacing: 0.04em;
	color: var(--color-black);
}


h1 {
	margin:0.4em 0 0.6em 0;
	padding:0;
	letter-spacing: 0.03em;	
	color: var(--color-black);
}

h2 {
	padding: 0;
	margin:0 0 1em 0;
	color: var(--color-black);
}

h3 {
	padding:0;
	margin: 0 0 1em 0;
	color: var(--color-black);
}


@media only screen and (max-width: 768px) {
	h1,h2,h3 {
		hyphens: auto;
		word-break: break-word;
	}
}


.h-big {	
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 800;
	font-size: 55px;
	font-size: clamp(2rem, 1.7443rem + 1.1364vw, 2.625rem);
	text-transform: uppercase;
}

.h-medium {	
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 800;
	font-size: 37px; 
	font-size: clamp(1.875rem, 1.22508rem + 1.354vw, 2.3125rem);
	text-transform: uppercase;
}


.color-red {
	color:var(--color-red); 
}

.nomarginbottom {
	margin-bottom: 0 !important;
}

.ff-roboto {
  font-family: 'Roboto Condensed';
  font-style: italic;
  font-weight: 900;
  font-size: 1.1em;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}



main a {
	color:var(--color-red);
}


main a.linkback {
	color:var(--color-grey);
	text-decoration: none;
}
main a.linkback:hover {
	color:var(--color-red);
}

main a.linkback::before {
	content:'← ';
	color:var(--color-red);
}




main img {
	max-width: 100%;
	height: auto;
	display: block;
}


.imagewithbutton {
	padding-bottom: 40px;
	background: #fff;
}

.imagewithbutton-wrapper {
	position: relative;
}

.imagewithbutton-button {
	position: absolute;
	bottom:0;
	z-index: 1;
}

.imagewithbutton-position-right .imagewithbutton-button {
	right:0;
	transform:translateX(30%) translateY(40%);
}

@media only screen and (max-width: 1300px) {
	.imagewithbutton-position-right .imagewithbutton-button {
		transform:translateX(10%) translateY(40%);
	}
}

@media only screen and (max-width: 1100px) {
	.imagewithbutton-position-right .imagewithbutton-button {
		transform: translateX(-14%) translateY(60%);
	}
	.imagewithbutton-button {
			width: 46% !important;
	}
	.imagewithbutton {
		padding-bottom: 90px;
		background: #fff;
	}
}

.imagewithbutton-position-left .imagewithbutton-button {
	left:0;
	transform:translateX(-30%) translateY(40%);
}

.imagewithbutton-image {
	position: relative;
}

.imagewithbutton-image-overlay {
	position: absolute;
	top: 42%;
	left: 6%;
	width: 37%;
}
.ce-bodytext {
	padding-left: calc(2 * clamp(1.5625rem, -3.07958rem + 9.671vw, 4.6875rem));
	padding-right: clamp(1.5625rem, -3.07958rem + 9.671vw, 4.6875rem);
}

.container1colwhite .ce-bodytext {
	padding-left: 0;
	padding-right: 0;
}


.container1colwhite {
	background: #fff;
	position: relative;
}

.container1colwhite-wrapper {
	padding-left: calc(2 * clamp(1.5625rem, -3.07958rem + 9.671vw, 4.6875rem));
	padding-right: clamp(1.5625rem, -3.07958rem + 9.671vw, 4.6875rem);
	padding-top: calc(0.5 * clamp(1.5625rem, -3.07958rem + 9.671vw, 4.6875rem));
	padding-bottom: calc(0.5 * clamp(1.5625rem, -3.07958rem + 9.671vw, 4.6875rem));
}
@media only screen and (max-width: 768px) {
	.container1colwhite-wrapper {
		padding-left: calc(1 * clamp(1.5625rem, -3.07958rem + 9.671vw, 4.6875rem));
	}
}
.buttonincontainer-wrapper {
	position: absolute;
	left:0;
	top:0;
	transform: translate(-40%, -40%);
}

.buttonincontainer-headline {
	padding-left: 7%;
	padding-top: 4%;
}


.ce-intext.ce-right .ce-gallery, .ce-intext.ce-left .ce-gallery, .ce-above .ce-gallery {
	margin-bottom: 0;
}

.ce-row {
	margin-bottom: 0;
}


.ce-gallery[data-ce-columns="2"] .ce-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: -1px;
}

.ce-gallery[data-ce-columns="2"] .ce-column {
	flex:0 0  calc(100% / 2);
	margin-right: 0;
	float: none;
}

.ce-gallery[data-ce-columns="2"] .ce-column img {
	width: 100%;
}



.ce-gallery[data-ce-columns="3"] .ce-row {
	display: flex;
	justify-content: space-between;
	margin-bottom: -1px;
}
.ce-gallery[data-ce-columns="3"] .ce-column {
	flex:0 0  calc(100% / 3);
	margin-right: 0;
	float: none;
}

.ce-gallery[data-ce-images="3"] .ce-column img {
	width: 100%;
}




.imagewithbutton-button {
	display: grid;
	--xfade: 1s; /* Dauer der Kreuzblende */
}
.imagewithbutton-slide {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden; /* nimmt inaktive Slides aus Tab-Reihenfolge + Screenreader */
	pointer-events: none;
	/* visibility erst nach dem Ausblenden umschalten, damit die Blende sichtbar bleibt */
	transition: opacity var(--xfade) ease-in-out, visibility 0s linear var(--xfade);
}
.imagewithbutton-slide.is-active {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	transition: opacity var(--xfade) ease-in-out;
}
@media (prefers-reduced-motion: reduce) {
	.imagewithbutton-slide,
	.imagewithbutton-slide.is-active {
		transition: none;
	}
}




#c209 h1 {
	word-break: normal; 
	hyphens: none;
}