@charset "utf-8";
/*=============Fonts  =============*/
/* unica-one-regular - latin */
@font-face {
  font-display: swap; 
  font-family: 'Unica One';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/unica-one-v15-latin-regular.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/unica-one-v15-latin-regular.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}

/* ibm-plex-sans-300 - latin */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/ibm-plex-sans-v19-latin-300.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/ibm-plex-sans-v19-latin-300.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}
/* ibm-plex-sans-600 - latin */
@font-face {
  font-display: swap; 
  font-family: 'IBM Plex Sans';
  font-style: normal;
  font-weight: 600;
  src: url('../fonts/ibm-plex-sans-v19-latin-600.woff2') format('woff2'), /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
       url('../fonts/ibm-plex-sans-v19-latin-600.ttf') format('truetype'); /* Chrome 4+, Firefox 3.5+, IE 9+, Safari 3.1+, iOS 4.2+, Android Browser 2.2+ */
}



html {
	height: 100%;
	font:normal 300 1rem/1.5rem 'IBM Plex Sans', sans-serif;
}

body {
	/* min-height: 75rem; */
	 padding-top: 8.5rem;
	 color: #3c266d;
	 background-color: #fff;
	 font-style:normal;
}

.logo { 
	width: 300px;
	height: auto;
	transition: all 0.4s ease-in-out;
	}
	
.img-responsive {
	 /*object-fit: cover;
	 object-position: center center;*/
	 height: auto;
	 width: 100%;
}

.navbar-toggler {
    padding: var(--bs-navbar-toggler-padding-y) var(--bs-navbar-toggler-padding-x);
    font-size: var(--bs-navbar-toggler-font-size);
    line-height: 1;
    color: #8072a0;
    background-color: transparent;
    border: 0; /*var(--bs-border-width) solid var(--bs-navbar-toggler-border-color)*/
    border-radius: 0;
    transition: var(--bs-navbar-toggler-transition);
}

.navbar-toggler-icon {
    display: inline-block;
    width: 1.8em;
    height: 1.5em;
    vertical-align: middle;
    background-image: url("../img/burger.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100%;
}

.navbar>.container, .navbar>.container-fluid, .navbar>.container-lg, .navbar>.container-md, .navbar>.container-sm, .navbar>.container-xl, .navbar>.container-xxl {
    align-items: flex-end;
}
.bgCol {
	background: rgba(255, 255, 255,0.9)!important;
}
.navbar-collapse { 
	padding-bottom: 10px;
}
.nav-link {
    display: block;
    padding: 0 50px;
	font:normal 400 1.85rem/1.5rem 'Unica One', sans-serif;
    color: #3c266d;
    text-decoration: none;
	text-transform:uppercase;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
}

.nav-link:focus, .nav-link:hover {
    color: #3c266d;
	font-weight: bold;
}

.navbar-nav .nav-link.active, .navbar-nav .show>.nav-link {
    color: #3c266d;
    font-weight: bold;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding-right: 0;
    padding-left: 50px;
}

.wrapper-sprache {
	position:absolute; 
	right:0; 
	top:50px; 
	width:150px; 
	background-color: #3c266d;
	transition: all 0.15s ease-in-out;
}
.sprache {
    padding: 0.4rem 3% 0.2rem 0.75rem;
}
.sprache-aktiv, .trennzeichen {
    font: 400 1.85rem/1.5rem "Unica One", sans-serif;
    color: #fff;
    text-decoration: none;
}
a.sprachauswahl:link, a.sprachauswahl:visited, .trennzeichen {
    font: 400 1.85rem/1.5rem "Unica One", sans-serif;
    color: #8072a0;
    text-decoration: none;
}
a.sprachauswahl:hover, a.sprachauswahl:active {
    font: 400 1.85rem/1.5rem "Unica One", sans-serif;
    color: #fff;
    text-decoration: none;
}

a { color: #8072a0; }
a:hover { color: #3c266d; } 

.pflaume				{ color: #3c266d; }
.pflaume-light 	{ color: #8072a0; }
.senfgelb  			{ color: #c9b130; }
.white					{ color: #fff; }
.bg-senfgelb		{ background-color: #c9b130; }
.bg-pflaume		{ background-color: #3c266d; }
.bg-pflaume-light {background-color: #8072a0;}


.wrapper-headerImg {
	position:relative;
	padding-top: 3.17rem;
}

.narrow 	 { padding: 0.5rem 3%; }
.narrow-text { padding: 0 7%; }
.narrow-text-left { padding: 0 7%; }
.narrow-cta { padding: 100px 7% 70px 7%; }

.container-cta {    
	width: 100%;
	max-width: 1320px;
	margin:0 auto;
}


.narrow-box { padding: 0 10%;  }
.offset { margin-top:4rem; margin-bottom:10rem;}
.offset-kontakt-top { margin-top:4rem; margin-bottom:4rem;}
.offset-kontakt-bottom { margin-top:0; margin-bottom:10rem;}
.offset-stoerer { margin-top:14rem; margin-bottom:10rem;}
.no-gutter {  padding: 0; }
.pt-kontakt-box { padding-top:2rem; }

.text-center-right {
	position:absolute;
	right:0;
	top:30%;
	padding:0 10% 0 0;
	z-index:1;
}

.lead-1 	{ font:normal 600 1.25rem/2rem 'IBM Plex Sans', sans-serif; }
.lead-2 	{ font:normal 300 1.25rem/2rem 'IBM Plex Sans', sans-serif; }
.display-1 	{ font:normal 400 7rem/7.25rem 'Unica One', sans-serif; }
/* .display-1 	{ font:normal 400 5rem/5.25rem 'Unica One', sans-serif; }*/
h1, h2 { font:normal 400 4.1667rem/4.5833rem 'Unica One', sans-serif; margin-bottom:2rem;}
.cta > h2 { font:normal 400 2.6rem/2.6rem 'Unica One', sans-serif; margin-bottom:1.25rem; }
h3 { font:normal 600 2rem/2.25rem  'IBM Plex Sans', sans-serif;  margin-bottom:1rem; color: #8072a0; }
h3.hdl-stoerer { font:normal 400 2rem/2rem 'Unica One', sans-serif; margin-bottom:1rem; color: #fff; }

p { font:normal 300 1.25rem/2.15rem 'IBM Plex Sans', sans-serif; }
strong, bold { font:normal 600 1.25rem/2.15rem 'IBM Plex Sans', sans-serif; }
.hyphens {	
		-webkit-hyphens: auto;
	  -ms-hyphens: auto;
	  hyphens: auto;}
ul.text {
	list-style-type: none;
    margin-left: 4px;
    padding: 0 0 0 1em;
    text-indent: -1em;
	}

ul.text li { font:normal 300 1.25rem/2.15rem 'IBM Plex Sans', sans-serif; }
ul.text li::before {
    content: "\2022";
    color: #3c266d;
    display: block;
    position: relative;
    left: -10px;
    top: 0;
    max-width: 0;
    max-height: 0;
    font-size: 2rem;
}

span.headline { font:normal 300 2rem/2.5rem 'Unica One', sans-serif;letter-spacing: .05em; }
span.hdl-vita { font:normal 600 1.85rem/2.5rem 'IBM Plex Sans', sans-serif;color: #c9b130; }

a.text-link:link, a.text-link:visited { 
	font:normal 300 1.25rem/2.15rem 'IBM Plex Sans', sans-serif; 
	color: #fff;
	text-decoration:none;
}
a.text-link:hover, a.text-link:active { 
	font:normal 600 1.25rem/2.15rem 'IBM Plex Sans', sans-serif; 
	color: #fff;
	text-decoration:none;
 }

.btn {
    text-align: center;
    text-decoration: none;
    vertical-align: middle;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    border: 0;
    border-radius: 0;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.btn-primary {
	color: #fff;	
    background-color: #c9b130;
}
.btn-primary:hover {
	color: #fff;
    background-color: #8072a0;
}

.btn-white {
	color: #8072a0;	
    background-color: #fff;
}
.btn-white:hover {
	color: #fff;
    background-color: #8072a0;
}

.btn:focus-visible {
    color: #fff;
    background-color: #8072a0;
    border-color: none;
    outline: 0;
    box-shadow: none;
}

.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active {
    color: #fff;
    background-color: #8072a0;
    border-color: none;
}

.btn-group-lg>.btn, .btn-lg {
    --bs-btn-padding-y: 0.4rem; 
    --bs-btn-padding-x: 1rem;
    --bs-btn-font-size: 1.25rem;
    --bs-btn-border-radius: 0;
}

.sideStoerer {
    display: block;
    position: absolute;
   	top:0;
    right:0;
    width: 250px;
	color: #fff;
    background-color: #3c266d;
    height: auto;
    padding: 1rem 6rem 0.5rem 1rem;
	margin-top: -150px;
    transition: all 0.3s ease-in-out;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    z-index: 99;
}
.sideStoerer p { font:normal 300 1.125rem/1.5rem 'IBM Plex Sans', sans-serif; }

.footer {
	color: #fff;
	padding:2% 7%;
}
.footer p {
	font:normal 300 1.1667rem/1.5833rem 'IBM Plex Sans', sans-serif;
}
a.footer-link:link, a.footer-link:visited { 
	font:normal 300 1.1667rem/1.5833rem 'IBM Plex Sans', sans-serif;
	color: #fff;
	text-decoration:none;
}
a.footer-link:hover, a.footer-link:active { 
	font:normal 600 1.1667rem/1.5833rem 'IBM Plex Sans', sans-serif;
	color: #fff;
	text-decoration:none;
 }
 
 
 a.top-scroll {
    position: fixed;
    bottom: 20px;
    right: 1.2rem;
    opacity: .3;
    -moz-opacity: .3;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    z-index: 100;
}
 
a.top-scroll:hover {
	opacity: 1;
}

/* X-Large devices (large desktops, less than 1400px) */
@media (max-width: 1399.98px) { 

	.nav-link {
		font:normal 400 1.85rem/1rem 'Unica One', sans-serif;
	}

	.navbar-expand-lg .navbar-nav .nav-link {
		padding-right: 0;
		padding-left: 30px;
	}
	.text-center-right {
		top: 25%;
		padding: 0 8% 0 0;
	}
	.display-1 	{ font:normal 400 5.85rem/5.25rem 'Unica One', sans-serif; }
	.narrow-box { padding: 0 5%; }
	
	.container-cta {   
		width: 100%;
		max-width: 1140px;
	}
	
 } 


/* Large devices (desktops, less than 1200px) */
@media (max-width: 1199.98px) { 
	
	.nav-link {
		font:normal 400 1.6rem/1rem 'Unica One', sans-serif;
	}

	.navbar-expand-lg .navbar-nav .nav-link {
		padding-right: 0;
		padding-left: 20px;
	}
	.text-center-right {
		top: 25%;
		padding: 0 6% 0 0;
	}
	.display-1 	{ font:normal 400 5.35rem/5.25rem 'Unica One', sans-serif; }
	.narrow-box { padding: 100px  8% 70px; }
	
	.container-cta {   
		width: 100%;
		max-width: 960px;
	}

 }

/* Medium devices (tablets, less than 992px) */
@media (max-width: 991.98px) {  

	/* StartText innerhalb Bild - entweder hier schon wie für Mobile machen */
	.text-center-right {
		top:25%;
		padding:0 3% 0 0;
	}
	.lead-1 	{ font:normal 600 1.25rem/1rem 'IBM Plex Sans', sans-serif; }
	.lead-2 	{ font:normal 300 1.25rem/1rem 'IBM Plex Sans', sans-serif; }
	.display-1 	{ font:normal 400 4.25rem/3.75rem 'Unica One', sans-serif; }


	.nav-link {
		padding: 30px 50px;
		margin-top: 20px;
		font: normal 400 1.85rem/1.5rem 'Unica One', sans-serif;
		transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out;
	}

	.navbar-toggler {
		margin-right: 150px;
	}
	
	.wrapper-sprache {
		top: 130px;
		width: 150px;
	}
	.sideStoerer {
		top:-30px;
		right:0;	
	}
	
	.container-cta {   
		width: 100%;
		max-width: 720px;
	}
	
 }

/* Small devices (landscape phones, less than 768px) */
@media (max-width: 767.98px) { 
	
	.logo { 
		width: 200px;
		height: auto;
		transition: all 0.4s ease-in-out;
	}
	.navbar-toggler {
		margin-right: 130px;
		margin-bottom: 8px;
	}
	.wrapper-sprache {
		top: 76px;
		width: 120px;
	}
	
	.wrapper-headerImg {
		position: relative;
		padding-top: 0.17rem;
	}
	
		.text-center-right {
		position: relative;
		/* right: 0; */
		/* top: 80%; */
		padding: 4% 10%;
		z-index: 1;
		background-color: #3c266d;
		width: 100%;
	}
		
	.lead-1 	{ font:normal 600 1.25rem/2rem 'IBM Plex Sans', sans-serif; color: #fff;}
	.lead-2 	{ font:normal 300 1.25rem/2rem 'IBM Plex Sans', sans-serif; color: #fff;}
	.display-1 	{ color:#fff; }

	h1, h2 {
		font: normal 400 3.8667rem/4.0833rem 'Unica One', sans-serif;
		margin-bottom: 2rem;
	}
	
	.offset { margin-top:4rem; margin-bottom:5em;}
	
	.container-cta {   
		width: 100%;
		max-width: 540px;
	}
	
 }

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 575.98px) {  
	
	.logo { 
		width: 200px;
		height: auto;
		transition: all 0.4s ease-in-out;
	}
	.navbar-toggler {
		margin-right: -4px;
		margin-bottom: 8px;
	}
	.wrapper-sprache {
		top: 22px;
		width: 106px;
	}
	
	.sprache-aktiv, .trennzeichen {
		font: 400 1.35rem/1.5rem "Unica One", sans-serif;
		color: #fff;
		text-decoration: none;
	}
	a.sprachauswahl:link, a.sprachauswahl:visited, .trennzeichen {
		font: 400 1.35rem/1.5rem "Unica One", sans-serif;
		color: #8072a0;
		text-decoration: none;
	}
	h1, h2 {
		font: normal 400 3.5667rem/3.7833rem 'Unica One', sans-serif;
		margin-bottom: 2rem;
	}
	
	
	.footer {
		color: #fff;
		padding: 6% 7%;
	}	
 }

/* X-Small devices (portrait phones, less than 576px) */
@media (max-width: 412.98px) {  
	
/*	.navbar-brand {
		margin: 0 auto;
	}
	.navbar-toggler {
		margin-right: 101px;
		margin-bottom: 8px;
	}
	.wrapper-sprache {
		top: 125px;
		width: 106px;
	}
*/	
	.sprache-aktiv, .trennzeichen {
		font: 400 1.35rem/1.5rem "Unica One", sans-serif;
		color: #fff;
		text-decoration: none;
	}
	a.sprachauswahl:link, a.sprachauswahl:visited, .trennzeichen {
		font: 400 1.35rem/1.5rem "Unica One", sans-serif;
		color: #8072a0;
		text-decoration: none;
	}
	
	
	.lead-1 	{ font:normal 600 1rem/1rem 'IBM Plex Sans', sans-serif; }
	.lead-2 	{ font:normal 300 1rem/1rem 'IBM Plex Sans', sans-serif; }
	.display-1 	{ font:normal 400 3.25rem/3.5rem 'Unica One', sans-serif; color: #fff;}
 }









