/* fira-sans-extra-condensed-100 - latin */
@font-face {
  font-family: 'Fira Sans Extra Condensed';
  font-style: normal;
  font-weight: 100;
  src: url('../data/fonts/fira-sans-extra-condensed-v4-latin-100.eot'); /* IE9 Compat Modes */
  src: local('Fira Sans Extra Condensed Thin'), local('FiraSansExtraCondensed-Thin'),
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-100.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-100.woff2') format('woff2'), /* Super Modern Browsers */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-100.woff') format('woff'), /* Modern Browsers */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-100.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-100.svg#FiraSansExtraCondensed') format('svg'); /* Legacy iOS */
}

/* fira-sans-extra-condensed-200 - latin */
@font-face {
  font-family: 'Fira Sans Extra Condensed';
  font-style: normal;
  font-weight: 200;
  src: url('../data/fonts/fira-sans-extra-condensed-v4-latin-200.eot'); /* IE9 Compat Modes */
  src: local('Fira Sans Extra Condensed ExtraLight'), local('FiraSansExtraCondensed-ExtraLight'),
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-200.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-200.woff2') format('woff2'), /* Super Modern Browsers */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-200.woff') format('woff'), /* Modern Browsers */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-200.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-200.svg#FiraSansExtraCondensed') format('svg'); /* Legacy iOS */
}

/* fira-sans-extra-condensed-300 - latin */
@font-face {
  font-family: 'Fira Sans Extra Condensed';
  font-style: normal;
  font-weight: 300;
  src: url('../data/fonts/fira-sans-extra-condensed-v4-latin-300.eot'); /* IE9 Compat Modes */
  src: local('Fira Sans Extra Condensed Light'), local('FiraSansExtraCondensed-Light'),
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-300.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-300.woff2') format('woff2'), /* Super Modern Browsers */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-300.woff') format('woff'), /* Modern Browsers */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-300.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-300.svg#FiraSansExtraCondensed') format('svg'); /* Legacy iOS */
}

/* fira-sans-extra-condensed-300italic - latin */
@font-face {
  font-family: 'Fira Sans Extra Condensed';
  font-style: italic;
  font-weight: 300;
  src: url('../data/fonts/fira-sans-extra-condensed-v4-latin-300italic.eot'); /* IE9 Compat Modes */
  src: local('Fira Sans Extra Condensed Light Italic'), local('FiraSansExtraCondensed-LightItalic'),
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-300italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-300italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-300italic.woff') format('woff'), /* Modern Browsers */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-300italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-300italic.svg#FiraSansExtraCondensed') format('svg'); /* Legacy iOS */
}

/* fira-sans-extra-condensed-regular - latin */
@font-face {
  font-family: 'Fira Sans Extra Condensed';
  font-style: normal;
  font-weight: 400;
  src: url('../data/fonts/fira-sans-extra-condensed-v4-latin-regular.eot'); /* IE9 Compat Modes */
  src: local('Fira Sans Extra Condensed Regular'), local('FiraSansExtraCondensed-Regular'),
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-regular.woff') format('woff'), /* Modern Browsers */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-regular.svg#FiraSansExtraCondensed') format('svg'); /* Legacy iOS */
}

/* fira-sans-extra-condensed-500 - latin */
@font-face {
  font-family: 'Fira Sans Extra Condensed';
  font-style: normal;
  font-weight: 500;
  src: url('../data/fonts/fira-sans-extra-condensed-v4-latin-500.eot'); /* IE9 Compat Modes */
  src: local('Fira Sans Extra Condensed Medium'), local('FiraSansExtraCondensed-Medium'),
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-500.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-500.woff2') format('woff2'), /* Super Modern Browsers */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-500.woff') format('woff'), /* Modern Browsers */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-500.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-500.svg#FiraSansExtraCondensed') format('svg'); /* Legacy iOS */
}

/* fira-sans-extra-condensed-500italic - latin */
@font-face {
  font-family: 'Fira Sans Extra Condensed';
  font-style: italic;
  font-weight: 500;
  src: url('../data/fonts/fira-sans-extra-condensed-v4-latin-500italic.eot'); /* IE9 Compat Modes */
  src: local('Fira Sans Extra Condensed Medium Italic'), local('FiraSansExtraCondensed-MediumItalic'),
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-500italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-500italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-500italic.woff') format('woff'), /* Modern Browsers */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-500italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-500italic.svg#FiraSansExtraCondensed') format('svg'); /* Legacy iOS */
}

/* fira-sans-extra-condensed-700 - latin */
@font-face {
  font-family: 'Fira Sans Extra Condensed';
  font-style: normal;
  font-weight: 700;
  src: url('../data/fonts/fira-sans-extra-condensed-v4-latin-700.eot'); /* IE9 Compat Modes */
  src: local('Fira Sans Extra Condensed Bold'), local('FiraSansExtraCondensed-Bold'),
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-700.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-700.woff2') format('woff2'), /* Super Modern Browsers */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-700.woff') format('woff'), /* Modern Browsers */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-700.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-700.svg#FiraSansExtraCondensed') format('svg'); /* Legacy iOS */
}

/* fira-sans-extra-condensed-700italic - latin */
@font-face {
  font-family: 'Fira Sans Extra Condensed';
  font-style: italic;
  font-weight: 700;
  src: url('../data/fonts/fira-sans-extra-condensed-v4-latin-700italic.eot'); /* IE9 Compat Modes */
  src: local('Fira Sans Extra Condensed Bold Italic'), local('FiraSansExtraCondensed-BoldItalic'),
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-700italic.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-700italic.woff2') format('woff2'), /* Super Modern Browsers */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-700italic.woff') format('woff'), /* Modern Browsers */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-700italic.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-700italic.svg#FiraSansExtraCondensed') format('svg'); /* Legacy iOS */
}

/* fira-sans-extra-condensed-900 - latin */
@font-face {
  font-family: 'Fira Sans Extra Condensed';
  font-style: normal;
  font-weight: 900;
  src: url('../data/fonts/fira-sans-extra-condensed-v4-latin-900.eot'); /* IE9 Compat Modes */
  src: local('Fira Sans Extra Condensed Black'), local('FiraSansExtraCondensed-Black'),
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-900.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-900.woff2') format('woff2'), /* Super Modern Browsers */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-900.woff') format('woff'), /* Modern Browsers */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-900.ttf') format('truetype'), /* Safari, Android, iOS */
       url('../data/fonts/fira-sans-extra-condensed-v4-latin-900.svg#FiraSansExtraCondensed') format('svg'); /* Legacy iOS */
}


/* --------------- GLOBALE EINSTELLUNGEN---------------*/

html {font-size: 1.2rem; scroll-behavior: smooth;
letter-spacing: 1px;overflow: auto !important;  }
body	{
margin: 0 !important;
font-family: 'Fira Sans Extra Condensed',normal;
line-height: 140%;
font-weight:300;
color:#585858;
background:#fff;
}

a:active, a:focus {outline: none;}
a  {text-decoration: none;} /* Darstellung von Links - NICHT die Farbe */
a:link,
a:Visited	{color:#585858;}
a:Active, a:Hover {text-decoration:none;color:#c5007b;}
p, td, th, div, input, textarea, select, h1, h2, h3, h4, h5, h6, ul, ol, li, font, dl, dt, dd, marquee {
font-family: inherit;
}

table, form	{
margin: 0;
padding: 0;
}

.fgreen {color:#00C000;}
.fwhite {color:#fff;}

table {border-collapse: collapse;}
tr {vertical-align: top;}
th, td {text-align: left; margin: 0; padding: 0 10px 5px 0;}

input, select, textarea {border: 0px solid #cccccc; background-color: #bfe2ff;width:100%; height:30px;}
input[type="hidden"] {display: block;}
input[type="checkbox"],input[type="radio"] {border: 0; background-color:transparent;}

/* --------------- AUFZAEHLUNGEN---------------*/

ul {
margin: 0;
padding: 0 0 5px 0;
}

/*ul li {
list-style: none;
list-style-image: none;
margin: 5px 0;

}*/

ol {margin: 0; padding: 0;}


ol li {list-style-type: decimal;
margin: 2px 0 0 25px;
padding: 0;
}

dt {
margin-bottom: 2px;
padding-top: 10px;
clear: both;
}

dd {margin-bottom: 5px;}


/* --------------- UEBERSCHRIFTEN---------------*/

H1, H2, H3, H4, H5, H6 {font-weight: normal; line-height: 120%; margin:10px 0 10px 0;text-transform: uppercase;}
H1 {
padding:0 0 10px 0;
color: #ccc;
display: inline-block;
font-size: 3.0rem;
font-weight:normal;
letter-spacing: 0.2rem;
}
H2 {font-size: 2.3rem; padding-bottom:0px; color:#fff;font-family: 'Fira Sans Extra Condensed',bold ;}
H3 {font-size: 1.8rem; padding: 10px 0 2px 0;font-family: 'Fira Sans Extra Condensed',bold ;}
H4 {font-size: 1.1rem; color:#c5007b;font-family: 'Fira Sans Extra Condensed', bold;}
H5 {font-size: 1rem; padding: 10px 0 2px 0; font-weight: bold;}
H6 {font-size: 2.0rem; padding-bottom:30px; color:#000;font-family: 'Fira Sans Extra Condensed',bold;/*text-shadow: 
     -1px -1px 1px hsl(190,50%,90%), 
     1px 1px 1px hsl(190,50%,50%);*/}
H7 {font-size: 0.5rem; padding: 10px 0 2px 0;}



/* --------------- NAV---------------*/








#topnav {   
color: #585858;
height: 30px;
z-index: 1700;
margin-right: 10px;
display: flex;
align-items: center;
justify-content: flex-end;
position: absolute;
font-size: 0.7rem;
width: 90%;
}
				


#topnav ul {
padding:4px;}


#topnav ul li {
display: inline-block;
list-style: none;
list-style-image: none;
height: 20px;
}

#topnav ul li:not(:first-child) {margin-left: 0px;}

#topnav ul li a {
font-size: 0.8em;
text-decoration: none;
padding: 10px 0px 5px 10px;
text-transform: uppercase;
letter-spacing: 0.1em;
color:#CFB282;
}

#topnav li a {text-transform: uppercase;color: #CFB282;}

#topnav li:not(:first-child) {margin-left: 0px;}

#topnav a.active, #topnav a.active:link, #topnav a.active:visited {color: #fff !important; text-decoration: none;}

#topnav a:link {color:#000;}

#topnav a:Hover {color:green;text-decoration: none;}



/* --------------- LAYOUT---------------*/

.underline {font-family: 'Open Sans', ;margin:0 0; padding:0 0;}


#container {
margin-top:50px !important;
position: relative;
width: 85%;
margin: 0 auto;
background-color:#fff;}

#wrapheader {
position: fixed;
z-index: 1850;
width: 100%;
height: 60px;
top:0;
left:0;
}

#header {
margin: 0 auto;
height: auto;
position: relativ;
width: 85%;
-webkit-box-shadow: tan;
height: 60px;
background-color:#fff;
}

#slider {
width: 100%;
height:400px;
background-color:#000;
border-bottom:3px solid #f1cb00;
border-top:3px solid #fb9e25;
}

#main {
margin:0 auto; 
width: 100%;
position:relative;
}



/* --------------- BOXEN---------------*/


#anzeige {
width: 100%;
position: relative;
/*background-color:#f2f2f2;
height: 500px;
margin-bottom: 100px;*/
}

#anzeige img {
    height: 100%;
    width: 100% !important;
    object-fit: cover;
    object-position: top center;
    overflow-x: hidden;}

.text {
	position:absolute;
	top:80;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    background-color: #002a45;
    height: 65px;
    width: 100%;
	border:#CFB282 solid 1px;
	border-right:0px;
	border-left:0px;}
	
.text H3 {font-size:1.4rem;}

.head1 {
	position:absolute;
	top:100px;
    align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
	text-align:center;
	color:#fff;
}
.head2 {
    align-items: left;
    justify-content: left;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    width: 100%;
	background-color:#c5007b;
	background: linear-gradient(#C5007B 0%, #E80091 100%);
	height:auto;
	margin-bottom:60px;}

.head2 h2 {margin-left: 20px;}

/*------LOGO------*/
#logo {
margin-top: 20px;
float: left;
z-index: 1750;
display: flex;
align-items: center;
justify-content: flex-start;
position: sticky;
}

#logo h1 {margin: 0; padding: 0;}
/*#logo a {
position: absolute;
width: 100%;
height: 100%;
text-indent: -9999px;
}*/

/*------FOOTER------*/

#footer {
width: auto;
height: auto;
color: #fff;
text-align: left;
background:#666;
}


.footerbox {margin: 0 auto;
width: 90%;
height: auto;
font-size:0.8rem;padding-top: 50px;padding-bottom: 20px;}
.footerbox ul {list-style:none;}
.footerbox-left {
text-align: left;
color: #ccc;
line-height: 130%;
}
.footerbox-right {
height: auto;
text-align:left;
float:right;
font-weight:300;
color:#ccc;
line-height: 130%;
}
.footerbox-right h3,.footerbox-left h3 {color:#ccc;}

.footerbox a {text-decoration:none; color:#ccc;}
.footerbox a:hover {text-decoration:underline;}
.footerbox a.active, #footerbox a.active:link, #footerbox a.active:visited {text-decoration:underline;}

.footerbox .box-03 img {height:10%;}



/*------BUTTON------*/

.button {
background: #666;
display: inline-block;
cursor: pointer;
color: #fff;
padding: 4px 10px;
font-family: 'Fira Sans Extra Condensed';
 	font-style: normal;
text-decoration: none;
text-transform:uppercase;
text-decoration:none;
width: auto;
height:auto;
font-size: 0.6em;
}

.button:link,.button:active,.button:visited{
display: inline-block;text-decoration:none;color:#fff;

}

.button:hover {
background: #c5007b; text-decoration:none;color:#fff;

}

.button:active {
background: #c5007b; text-decoration:none;color:#fff;

}

.button a {text-decoration:none;}



::-moz-input-placeholder{
color: rgba(255,255,255,0.6);
}

/* SLIDER BOXEN */
.inner {
  width: 500%;
  line-height: 0;
}
	
	
	article {
  width: 100%;
  float: left;
  position: relative;
}
article img {
  width: 100%;
}
/* Info Box */
.info {
position: absolute;
font-style: normal;
line-height: 20px;
text-align: left;
-webkit-transition: all 1000ms ease-out 600ms;
-moz-transition: all 1000ms ease-out 600ms;
transition: all 1000ms ease-out 600ms;
background: rgba(255, 255, 255, 0.7);
height: 100%;
}

#anzeige .info {
position: absolute;
font-style: normal;
line-height: 20px;
text-align: left;
-webkit-transition: all 1000ms ease-out 600ms;
-moz-transition: all 1000ms ease-out 600ms;
transition: all 1000ms ease-out 600ms;
background: rgba(197, 0, 123, 0.7);
height: 100%;
}

#anzeige .info h3{
padding: 100px 30px 0px 30px;
font-weight:bold;
line-height:100%;
font-size:5rem;
color:#fff;
text-align:right;

}

info h3 {
 color: #c5007b;
    margin: 0 0 5px;
    font-weight: normal;
    font-size: 1.6rem;
    font-style: normal;
}

 info h6 {
font-size: 2.8rem;
padding-top:60px;}

.info.top-left {
top: 0px;
left: 0px;
width:60%;
}
.info.top-right {
  top: 0px;
  right: 0px;
  width:45%;
 
}

.info.top-right p {
padding-left: 30px;
padding-right: 40px;
font-size: 1.4rem;
line-height: 120%;
color: #fff;
text-align: right;
}

.info.bottom-left {
  top: 0px;
  left: 0px;
  width:100%;
  height:100%;
}
.info.bottom-right {
  bottom: 0px;
  right: 70px;
}


.info a {color: #c5007b;}

.info a:link,
.info a:Visited	{color:#c5007b;text-decoration:underline;}
.info a:Active, .info a:Hover {color:#00C000;text-decoration:underline;}

/*---- BACK TO TOP ----*/


#scroll {
z-index:1200;
position:fixed;
right:10px;
bottom:10px;
cursor:pointer;
width:50px;
height:50px;
background-color:#c5007b;
text-indent:-9999px;
display:block;
}

#scroll span {
position:absolute;
top:50%;
left:50%;
margin-left:-8px;
margin-top:-12px;
height:0;
width:0;
border:8px solid transparent;
border-bottom-color:#ffffff;	
content:"top";
color:#fff;
}

#scroll:hover {
background: #cccccc; /* Old browsers */
background: -moz-linear-gradient(-45deg, #cccccc 0%, #eaeaea 50%, #cccccc 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(-45deg, #cccccc 0%,#eaeaea 50%,#cccccc 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(135deg, #cccccc 0%,#eaeaea 50%,#cccccc 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cccccc', endColorstr='#cccccc',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */opacity:1;
filter:"alpha(opacity=100)";
-ms-filter:"alpha(opacity=100)";
}

#eye {
position:fixed;
top:0px;
cursor:pointer;
width:100%;
height:100%;
height: 400px;background: #b758b4;
background: -moz-linear-gradient(top, #b758b4 0%, #c146a1 47%, #db36a4 100%);
background: -webkit-linear-gradient(top, #b758b4 0%,#c146a1 47%,#db36a4 100%);
background: linear-gradient(to bottom, #b758b4 0%,#c146a1 47%,#db36a4 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b758b4', endColorstr='#db36a4',GradientType=0 );
text-indent:-9999px;
}

/*---- Grey HOVER IMG ----*/
.desaturate {
    filter: grayscale(100%); /* Standard */
    -webkit-filter: grayscale(100%); /* Webkit */
    filter: url(/elements/grayscale.svg#desaturate); /* Firefox 4-34 */
    filter: gray;  /* IE6-9 */
    -webkit-filter: grayscale(1); /* Old WebKit */
}

.desaturate:hover {
    filter: grayscale(0%);
    filter: none;
    -webkit-filter: grayscale(0); /* Old WebKit */
}




.anker {display: block;
position: relative;
top: -140px; /* hier die tatsächliche Höhe des fixierten Elements angeben  */
visibility: hidden;}



/* SECTIONS */
.section {
	min-height: 70vh;
 /*   display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: row;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-between;*/
}

.section p:last-child {
	margin-bottom: 0;
}

.section-wrapper {
	/*		margin-top: -50px;
			padding-top: 40px;*/
}

.section-wrapper:first-child .section {
		padding-top: 20px;
}

		
#section-1, #section-2, #section-3, #section-4, #section-5, #section-6 {padding-top:50px; padding-bottom:20px;}



/*------ BOXEN------*/

.box {
  width: 350px;
  text-align:center;
  transition: 0.3s all ease-in-out;
  position: relative;
 /* box-shadow: 0px 0px 1px ;
  border-radius: 8px 0px 0px 0px;
  padding:20px;
  background-image:url(../data/images/fueller1.png);*/
background-position: bottom;
background-repeat: no-repeat;
margin-bottom:60px;

}




.box img {border-radius: 8px 0px 0px 0px;}
.box .boxContent {
display: flex;
flex-direction: column;
align-items: center;
text-align: left;
padding: 20px;
height: 100%;
}

.box .boxContent .icon {
  color: linear-gradient(to bottom, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%);
  font-size: 48px;
  padding: 15px;
}
.box .boxContent .title {
  color: linear-gradient(to bottom, rgba(63,76,107,1) 0%,rgba(63,76,107,1) 100%);
  font-weight: normal;height: 130px;
/*  padding: 10px;
*/
text-align:center;}

.box .boxContent .desc {
  color: #000;
  font-size: 15px;
  height: 20%;
}
.box a {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
}


.box-01:first-child, .box-05:first-child {
    margin-left: 0;
}
.box-01 {
    margin: .3em;
    margin-left: 0.3em;
    flex: auto;
    width: 100%;
    word-wrap: break-word;
    position: relative;
	text-align:center;
}

.box-03 {
	color:#585858;
/*    margin: .3em;
*/    flex: auto;
    width: 350px;
    word-wrap: break-word;
    position: relative;
    font-size: 1.2vm;
    line-height: 1.2vm;
	padding-right: 50px;
	border-left: 8px solid #ccc;
	padding-left: 30px;
margin-bottom:45px;
}
.box-03:first-child {border-left:0px;}
.box-03 H3 {height:120px;}

.box-02 {cursor: cell;
flex: auto;
word-wrap: break-word;
position: relative;
min-width: 350px;
max-width: 350px;
height:350px;
margin-bottom: 45px;
}

.box-02 img,.box-02-blue img    {
    height: 350px;
    max-width: 100%;
    object-fit: cover;
    object-position: top center;
    overflow-x: hidden;
}



/* FLEXBOX */

#flexbox {
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: row;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
/*margin: 0 auto;
*/position: relative;
margin-bottom:60px;
}




#info-text {position: absolute;
top: 0px;
display: flex;
height: 350px;
width: 100%;
background: rgba(1, 42, 69, 0.9);
border-radius: 20px 0px 20px 0px;
text-align: center;
align-items: center;
justify-content: center;}

/* Listen */

.list {
    list-style-position: outside;
    list-style-type: circle;
    text-align: left;
    padding-left: 20px;
}

/* Teaser - Zwischensequenzen */
#teaser {
	align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 400px;
	background-image:url(../data/images/ap_book.jpg);
	background-size: cover;
	margin:0 auto;color:#c5007b;text-align: center;
}

#teaser2 {
	align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 400px;
    width: 100%;
	background-image:url(../data/slider/ap-computer.jpg);
	background-size: cover;
	color:#c5007b;text-align: center;}
	
.teaser-text {
}
	
#teaser3 {
	align-items: center;
    justify-content: center;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 500px;
    width: 100%;
	background-image:url(../data/fueller/fl-3.png);
	background-size: cover;
}

.pink {height:100%; width:100%;background: rgba(197, 0, 123, 0.7);}

/* grauen Bilder */
.grey {
    filter: grayscale(100%); /* Standard */
    -webkit-filter: grayscale(100%); /* Webkit */
    filter: url(/elements/grayscale.svg#); /* Firefox 4-34 */
    filter: gray;  /* IE6-9 */
    -webkit-filter: grayscale(1); /* Old WebKit */
}

.grey:hover {
    filter: grayscale(0%);
    filter: none;
    -webkit-filter: grayscale(0); /* Old WebKit */
	-moz-transition: all 0.5s ease 0s;
	-webkit-transition: all 0.5s ease 0s;
	transition: all 0.5s ease 0s;
}

/* Bilder Hover verdeckt */
.mask {display:none;
	 }

/* kleine Dreieck im Bilder-Hover */
 #triangle-bottomleft {
	/*width: 0;
	height: 0;
	border-bottom: 100px solid #CFB282;
	border-right: 100px solid transparent;
	*/position: absolute;
	bottom: 0px;
	/*width: 40px;
	height: 40px;*/
	width: 100%;
	height: 10%;
	background: rgba(197, 0, 123, 0.7);;-moz-transition: all 2s ease 0s;
	-webkit-transition: all 2s ease 0s;
	transition: all 2s ease 0s;
    }
  
  
#triangle-bottomleft:hover,
#triangle-bottomleft:focus, #triangle-bottomleft:active {
	width: 100%;
	height:100%;
	-webkit-user-select: none; -webkit-touch-callout: none;
	font-size: 1.0rem;
	line-height:160%;
	text-transform: uppercase;
	color: #fff;
	text-align:center;background: rgba(197, 0, 123, 0.7);

}
 


 #triangle-bottomleft span {
	position: absolute;
	bottom: 10px;
	left: 10px;
	font-size:40px;
	color:#fff;border-top: 20px solid #fff;
	border-left: 20px solid transparent;
	
	
	/*
	position: absolute;
	bottom: 10px;
	left: 10px;
	padding: 3px 3px 3px 3px;
	color: #fff;
	font-size: 20px;
	border-radius: 50%;
	border: solid 2px #fff;
	width: 20px;
	height: 20px;
	font-weight: normal;
	text-align: center;
	content: "i";*/ 
}


	 
#triangle-bottomleft:hover .mask {display:block;
	 }
	 
/*TOOLTIPP*/

[tooltip] {
  position: relative; /* opinion 1 */
}

/* Applies to all tooltips */
[tooltip]::before,
[tooltip]::after {
  text-transform: none; /* opinion 2 */
  font-size: 1.1em; /* opinion 3 */
  line-height: 1.2;
  user-select: none;
  pointer-events: none;
  position: absolute;
  display: none;
  opacity: 0;
}
[tooltip]::before {
  content: '';
  border: 5px solid transparent; /* opinion 4 */
  z-index: 1780; /* absurdity 1 */
}
[tooltip]::after {
  content: attr(tooltip); /* magic! */
  text-align: center;
  /*min-width: 3em;
  max-width: 28em;*/
min-width: 100%;
max-width: 100%;
height: 350px;
	white-space:inherit;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 1ch 1.5ch;
  box-shadow: 0 1em 2em -.5em rgba(0, 0, 0, 0.35);
  background: #c5007b;
  color: #fff;
  z-index: 1800; /* absurdity 2 */
  padding-top:60px;
}

/* Make the tooltips respond to hover */
[tooltip]:hover::before,
[tooltip]:hover::after {
  display: block;
}

/* don't show empty tooltips */
[tooltip='']::before,
[tooltip='']::after {
  display: none !important;
}

/* FLOW: UP */
[tooltip]:not([flow])::before,
[tooltip][flow^="up"]::before {
  top: 100%;
  border-bottom-width: 0;
  border-top-color: #c5007b;
}
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::after {
  top: calc(100% + 5px);
}
[tooltip]:not([flow])::before,
[tooltip]:not([flow])::after,
[tooltip][flow^="up"]::before,
[tooltip][flow^="up"]::after {
  left: 50%;
  transform: translate(-50%, -.5em);
}

/* FLOW: DOWN */
[tooltip][flow^="down"]::before {
  top: calc(20% + 5px);
  border-top-width: 0;
  border-bottom-color: #c5007b;
}
[tooltip][flow^="down"]::after {
  top: 0px;
}
[tooltip][flow^="down"]::before,
[tooltip][flow^="down"]::after {
  left: 50%;
  transform: translate(-50%, .5em);
}

/* FLOW: LEFT */
[tooltip][flow^="left"]::before {
  top: calc(20% + 5px);
  border-right-width: 0;
  border-left-color: #c5007b;
 /* left: calc(0em - 5px);*/
left: calc(0em - 5px);
  transform: translate(-.5em, -50%);
}
[tooltip][flow^="left"]::after {
  top: calc(100% + 5px);
  /*right: calc(100% + 5px);*/
  right: calc(100% + 5px);
  transform: translate(-.5em, -50%);
}

/* FLOW: RIGHT */
[tooltip][flow^="right"]::before {
  top: 100%;
  border-left-width: 0;
  border-right-color: #c5007b;
  right: calc(0em - 5px);
  transform: translate(.5em, -50%);
}
[tooltip][flow^="right"]::after {
  top: calc(100% + 5px);
  left: calc(100% + 5px);
  transform: translate(.5em, -50%);
}

/* KEYFRAMES */
@keyframes tooltips-vert {
  to {
    opacity: .9;
    transform: translate(-50%, 0);
  }
}

@keyframes tooltips-horz {
  to {
    opacity: .9;
    transform: translate(0, -50%);
  }
}

/* FX All The Things */ 
[tooltip]:not([flow]):hover::before,
[tooltip]:not([flow]):hover::after,
[tooltip][flow^="up"]:hover::before,
[tooltip][flow^="up"]:hover::after,
[tooltip][flow^="down"]:hover::before,
[tooltip][flow^="down"]:hover::after {
  animation: tooltips-vert 300ms ease-out forwards;
}

[tooltip][flow^="left"]:hover::before,
[tooltip][flow^="left"]:hover::after,
[tooltip][flow^="right"]:hover::before,
[tooltip][flow^="right"]:hover::after {
  animation: tooltips-horz 300ms ease-out forwards;
}

.clip {clip-path: polygon(0% 0%, 100% 0%, 100% 85%, 70% 85%, 75% 100%, 50% 85%, 0 85%);}

.ribbon {
  position: absolute;
  right: -5px; top: -5px;
  z-index: 1830;
  overflow: hidden;
  width: 75px; height: 75px;
  text-align: right;
}
.ribbon span {cursor: cell;
  font-size: 10px;
  font-weight: bold;
  color: #FFF;
  text-transform: uppercase;
  text-align: center;
  line-height: 20px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  width: 100px;
  display: block;
  background: #c5007b;
  background: linear-gradient(#C5007B 0%, #E80091 100%);
  box-shadow: 0 1px 8px -5px rgba(0, 0, 0, 1);
  position: absolute;
  top: 19px; right: -21px;
}
.ribbon span::before {
  content: "";
  position: absolute; left: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid #E80091;
  border-right: 3px solid transparent;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #E80091;
}
.ribbon span::after {
  content: "";
  position: absolute; right: 0px; top: 100%;
  z-index: -1;
  border-left: 3px solid transparent;
  border-right: 3px solid #E80091;
  border-bottom: 3px solid transparent;
  border-top: 3px solid #E80091;
}




.back-to-top-link {
   // `fixed` is fallback when `sticky` not supported
  position: fixed;
  // preferred positioning, requires prefixing for most support, and not supported on Safari
  // @link https://caniuse.com/#search=position%3A%20sticky
  position: sticky;
  // reinstate clicks
  pointer-events: all;
  // achieves desired positioning within the viewport
  // relative to the top of the viewport once `sticky` takes over, or always if `fixed` fallback is used
  top: calc(100vh - 5rem);display: inline-block;
  text-decoration: none;
  font-size: 2rem;
  line-height: 3rem;
  text-align: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: #d6e3f0;
  /* emoji don't behave like regular fonts
     so this helped position it correctly */
  padding: 0.25rem;
}

.back-to-top-wrapper {
  position: absolute;
  top: $scrollLength;
  right: 0.25rem;
  bottom: -5em;
  width: 3em;
  pointer-events: none;
  display:block;
  z-index:2000;
}