/* KHD.css 11.2019 CG */
/* Farben 
 #1b3545
*/
/*
<link href="https://fonts.googleapis.com/css?family=Dawning+of+a+New+Day|Roboto&display=swap" rel="stylesheet">
font-family: 'Dawning of a New Day', cursive;
font-family: 'Roboto', sans-serif;
*/
/* Standardeinstellungen.css */

* {
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

:focus {
    outline: 0;
}
html {
    width: 100%;
    height: auto;
    margin: 0;
    padding: 0;
}
html {
	font: 16px/1.4 "Roboto",Helvetica,Arial,sans-serif;
	-ms-text-size-adjust:100%;
	-webkit-text-size-adjust:100%;
	-webkit-tap-highlight-color:rgba(0, 0, 0, 0);
}
body{
	font-size:1rem;
	font-family: "Roboto",Helvetica, Arial, sans-serif;
	color: #1b3545;
	background-color: #fff;
	/* only Chrome: */
	scroll-snap-type: y mandatory;
	scroll-padding-top: 68px;
} 

/* container etwas breiter */
/*
@media (min-width: 768px) {
.bottom-pane .panelwrapper, .container, .top-pane .panelwrapper {
    width: 750px;
}}
@media (min-width: 992px) {
.bottom-pane .panelwrapper, .container, .top-pane .panelwrapper {
    width: 970px;
}}
@media (min-width: 1200px) {
.bottom-pane .panelwrapper, .container, .top-pane .panelwrapper {
    width: 1170px;
}}

@media (min-width: 1600px) {
.bottom-pane .panelwrapper, .container, .top-pane .panelwrapper {
    width: 1470px;
}}
*/

/* font @media */
@media all and (max-width: 599px) {
    html {
        font: 16px/1.4 "Roboto",Helvetica,Arial,sans-serif;
    }
}
@media all and (min-width: 599px) {
    html {
        font: 16px/1.4 "Roboto",Helvetica,Arial,sans-serif;
    }
}
@media all and (min-width: 1199px) {
    html {
        font: 16px/1.4 "Roboto",Helvetica,Arial,sans-serif;
    }
}
@media all and (min-width: 1921px) {
    html {
        font: 18px/1.4 "Roboto",Helvetica,Arial,sans-serif;
    }
}

/* Layout */


.row {
	display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
}
.row h1, .row h2, .row h3, .row h4 {
} /*margin:inherit;*/


.col, .col-1, .col-10, .col-11, .col-12, .col-2, .col-3, .col-4, .col-5, .col-6, .col-7, .col-8, .col-9, .col-auto, .col-lg, .col-lg-1, .col-lg-10, .col-lg-11, .col-lg-12, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-auto, .col-md, .col-md-1, .col-md-10, .col-md-11, .col-md-12, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, .col-md-auto, .col-sm, .col-sm-1, .col-sm-10, .col-sm-11, .col-sm-12, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-auto, .col-xl, .col-xl-1, .col-xl-10, .col-xl-11, .col-xl-12, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-auto {
    position: relative;
    width: 100%;
    padding-right: 15px;
    padding-left: 15px;
}

@media (min-width: 576px) {
.d-sm-block {
	display: block!important;
}
.col-sm {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}
.col-sm-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}
.col-sm-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}
.col-sm-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
.col-sm-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
.col-sm-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}
.col-sm-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
.col-sm-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}
.col-sm-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}
.col-sm-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
}
.col-sm-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}
.col-sm-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
}
.col-sm-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
}
@media (min-width: 768px) {
.d-md-block {
	display: block!important;
}
.col-md {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}
.col-md-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}
.col-md-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}
.col-md-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
.col-md-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
.col-md-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}
.col-md-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
.col-md-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}
.col-md-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}
.col-md-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
}
.col-md-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}
.col-md-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
}
.col-md-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
}
@media (min-width: 922px) {
.d-lg-block {
	display: block!important;
}
.col-lg {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}
.col-lg-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}
.col-lg-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}
.col-lg-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
.col-lg-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
.col-lg-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}
.col-lg-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
.col-lg-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}
.col-lg-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}
.col-lg-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
}
.col-lg-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}
.col-lg-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
}
.col-lg-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
}
@media (min-width: 1200px) {
.d-xl-block {
	display: block!important;
}
.col-xl {
    -ms-flex-preferred-size: 0;
    flex-basis: 0;
    -ms-flex-positive: 1;
    flex-grow: 1;
    max-width: 100%;
}
.col-xl-1 {
    -ms-flex: 0 0 8.333333%;
    flex: 0 0 8.333333%;
    max-width: 8.333333%;
}
.col-xl-2 {
    -ms-flex: 0 0 16.666667%;
    flex: 0 0 16.666667%;
    max-width: 16.666667%;
}
.col-xl-3 {
    -ms-flex: 0 0 25%;
    flex: 0 0 25%;
    max-width: 25%;
}
.col-xl-4 {
    -ms-flex: 0 0 33.333333%;
    flex: 0 0 33.333333%;
    max-width: 33.333333%;
}
.col-xl-5 {
    -ms-flex: 0 0 41.666667%;
    flex: 0 0 41.666667%;
    max-width: 41.666667%;
}
.col-xl-6 {
    -ms-flex: 0 0 50%;
    flex: 0 0 50%;
    max-width: 50%;
}
.col-xl-7 {
    -ms-flex: 0 0 58.333333%;
    flex: 0 0 58.333333%;
    max-width: 58.333333%;
}
.col-xl-8 {
    -ms-flex: 0 0 66.666667%;
    flex: 0 0 66.666667%;
    max-width: 66.666667%;
}
.col-xl-9 {
    -ms-flex: 0 0 75%;
    flex: 0 0 75%;
    max-width: 75%;
}
.col-xl-10 {
    -ms-flex: 0 0 83.333333%;
    flex: 0 0 83.333333%;
    max-width: 83.333333%;
}
.col-xl-11 {
    -ms-flex: 0 0 91.666667%;
    flex: 0 0 91.666667%;
    max-width: 91.666667%;
}
.col-xl-12 {
    -ms-flex: 0 0 100%;
    flex: 0 0 100%;
    max-width: 100%;
}
}


.d-none {
	display: none;
}
img {
    vertical-align: middle;
    border-style: none;
}
.img-fluid {
    max-width: 100%;
    height: auto;
}
.img-thumbnail {
    padding: .25rem;
    background-color: #fff;
    border: 1px solid #dee2e6;
    border-radius: .25rem;
    max-width: 100%;
    height: auto;
}
.ml-auto, .mx-auto {
    margin-left: auto!important;
}
.mr-auto, .mx-auto {
    margin-right: auto!important;
}

.m-1 { margin:.25rem!important;}
.m-2 { margin:.5rem!important;}
.m-3 { margin:1rem!important;}
.m-4 { margin:1.5rem!important;}
.m-5 { margin:2rem!important;}

.m-t-1 {margin-top: .25rem!important;}
.m-t-2 {margin-top: .5rem!important;}
.m-t-3 {margin-top: 1rem!important;}
.m-t-4 {margin-top: 1.5rem!important;}
.m-t-5 {margin-top: 2rem!important;}

.m-b-1 {margin-bottom: .25rem!important;}
.m-b-2 {margin-bottom: .5rem!important;}
.m-b-3 {margin-bottom: 1rem!important;}
.m-b-4 {margin-bottom: 1.5rem!important;}
.m-b-5 {margin-bottom: 2rem!important;}

.p-1 { padding:.25rem!important;}
.p-2 { padding:.5rem!important;}
.p-3 { padding:1rem!important;}
.p-4 { padding:1.5rem!important;}
.p-5 { padding:2rem!important;}

.p-t-1 {padding-top: .25rem!important;}
.p-t-2 {padding-top: .5rem!important;}
.p-t-3 {padding-top: 1rem!important;}
.p-t-4 {padding-top: 1.5rem!important;}
.p-t-5 {padding-top: 2rem!important;}

.p-b-1 {padding-bottom: .25rem!important;}
.p-b-2 {padding-bottom: .5rem!important;}
.p-b-3 {padding-bottom: 1rem!important;}
.p-b-4 {padding-bottom: 1.5rem!important;}
.p-b-5 {padding-bottom: 2rem!important;}


.w-25{width:25%!important}.w-50{width:50%!important}.w-75{width:75%!important}.w-100{width:100%!important}.w-auto{width:auto!important}
.h-25{height:25%!important}.h-50{height:50%!important}.h-75{height:75%!important}.h-100{height:100%!important}.h-auto{height:auto!important}
.mw-100{max-width:100%!important}.mh-100{max-height:100%!important}
.min-vw-100{min-width:100vw!important}.min-vh-100{min-height:100vh!important}.vw-100{width:100vw!important}.vh-100{height:100vh!important}

.text-left {text-align: left!important;}
.text-center {text-align: center!important;}
.text-right {text-align: right!important;}
.text-justify {text-align: justify!important;}


/* backcolor */

.backcolor {
	margin-top: -1rem;
    margin-bottom: 1rem;
    margin-left: -9999px;
    margin-right: -9999px;
    background-color: #f8f8f8;
    padding: 30px 9999px 25px 9999px;
}
	
/* HERO */

.outerwrap {
    clear: both;
}
.hero {
	-webkit-box-sizing: content-box;
    -moz-box-sizing: content-box;
    box-sizing: content-box;
}
.hero {
	padding: 30px 9999px 25px 9999px;
    position: relative;
    color: #fff;
	margin-top: -1rem;
    margin-bottom: 1rem;
    margin-left: -9999px;
    margin-right: -9999px;
	padding: 1rem;
}
.hero::before {
    background-color: rgba(0,0,0,0);
    content: "";
    display: block;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
	height: 100%;
    z-index: 0;
} 

.hero-KHD {
		background-color:white;
		background-image:url(/Data/Sites/1/skins/KHD/img/hero-khd-md.jpg);
        background-size:auto;
        background-repeat:no-repeat;
        background-position: left top;
        background-attachment:fixed;
}
.hero-KHD-all, .hero-KHD2 {
	background: white url(/Data/Sites/1/skins/KHD/img/hero2-khd-md.jpg) fixed no-repeat center 0;
}
.hero-KHD-cards {
	background: white url(/Data/Sites/1/skins/KHD/img/hero-khd-cards-md.jpg) fixed no-repeat center bottom;
}
	.logo-hero {
		max-width: 50vW;
	}

/* Samsung Galaxy S3, iPhone 6 portrait and (orientation : portrait) */
@media only screen and (min-device-width: 340px) and (max-device-width: 640px) and (orientation : portrait),
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait)
/* @media only screen and (min-device-width: 300px) and (max-device-width: 667px), */
/* @media only screen ----------- iPhone 6, 6S, 7 and 8 ----------- 
  and (min-device-width: 375px) 
  and (max-device-width: 667px) 
  and (-webkit-min-device-pixel-ratio: 2)
  and (orientation: portrait) { */
  
  /* Samsung Galaxy S3, iPhone 6 Portrait *//*  background: white url(/Data/Sites/1/skins/KHD/img/hero-khd-xs-2823.jpg) fixed no-repeat right -100px; */
 @media only screen and (min-device-width: 300px) and (max-device-width: 667px) and (orientation : portrait) {
	.hero-KHD {
		background-color:white;
		background-image:url(/Data/Sites/1/skins/KHD/img/hero-khd-md.jpg);
		background-size:auto;
		background-repeat: no-repeat;
		background-position: left top;
        background-attachment:fixed;
	}
	.hero-KHD-all, .hero-KHD2 {
		background: white url(/Data/Sites/1/skins/KHD/img/hero2-khd-md.jpg) fixed no-repeat center 0;
	}
	.hero-KHD-cards {
		background: white url(/Data/Sites/1/skins/KHD/img/hero-khd-cards-md.jpg) fixed no-repeat center bottom;
	}	
	.logo-hero {
		width: 125px;
	}
	.image-center {
		margin: 0 auto;
	}
}

/* Samsung Galaxy S3, iPhone 6 landscape  */
@media only screen and (min-device-width: 300px) and (max-device-width: 667px) and (orientation : landscape) { 
	.hero-KHD {
		background-color:white;
		background-image:url(/Data/Sites/1/skins/KHD/img/hero-khd-md.jpg);
		background-size:auto;
		background-repeat: no-repeat;
		background-position: left top;
        background-attachment:fixed;
	}
	.hero-KHD-all, .hero-KHD2 {
		background: white url(/Data/Sites/1/skins/KHD/img/hero2-khd-md.jpg) fixed no-repeat center 0;
	}
	.hero-KHD-cards {
		background: white url(/Data/Sites/1/skins/KHD/img/hero-khd-cards-md.jpg) fixed no-repeat center bottom;
	}	
	.logo-hero {
		width: 125px;
	}

}
/* Screen size middle - Tablet portrait and landscape */
@media only screen and (min-width: 668px) and (max-width: 1199px)  {
	.hero-KHD {
		background-color:white;
		background-image:url(/Data/Sites/1/skins/KHD/img/hero-khd-lg.jpg);
		background-size:auto;
		background-repeat: no-repeat;
		background-position: center -200px ;
        background-attachment:fixed;
	}
	.hero-KHD-all, .hero-KHD2 {
		background: white url(/Data/Sites/1/skins/KHD/img/hero2-khd-lg.jpg) fixed no-repeat center 0;
	}
	.hero-KHD-cards {
		background: white url(/Data/Sites/1/skins/KHD/img/hero-khd-cards-lg.jpg) fixed no-repeat center bottom;
	}	
	.logo-hero {
		width: 200px;
	}
}

/* Screen size large */
@media only screen and (min-width: 1200px) and (max-width: 2048px) {
	.hero-KHD {
		background-color:white;
		background-image:url(/Data/Sites/1/skins/KHD/img/hero-khd-xl.jpg);
		background-size:auto;
		background-repeat: no-repeat;
		background-position: center -400px ;
        background-attachment:fixed;
	}
	.hero-KHD-all, .hero-KHD2 {
		background: white url(/Data/Sites/1/skins/KHD/img/hero2-khd-xl.jpg) fixed no-repeat center top;
	}
	.hero-KHD-cards {
		background: white url(/Data/Sites/1/skins/KHD/img/hero-khd-cards-xl.jpg) fixed no-repeat center bottom;
	}	
}

/* Screen size very large */
@media only screen and (min-width: 2049px) and (orientation: portrait) or (orientation: landscape)  {
	.hero-KHD {
		background-color:white;
		background-image:url(/Data/Sites/1/skins/KHD/img/hero-khd-xl.jpg);
        background-size:cover;
        background-repeat:no-repeat;
        background-position: center -500px;
        background-attachment:fixed;
	}
	.hero-KHD-all, .hero-KHD2 {
	background: white url(/Data/Sites/1/skins/KHD/img/hero2-khd-xxl.jpg) fixed no-repeat center top;
	}
	.hero-KHD-cards {
		background: white url(/Data/Sites/1/skins/KHD/img/hero-khd-cards-xl.jpg) fixed no-repeat center bottom;
	}	
}

.hero-text {
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}











/* TOP - Button */
.back-to-top {
	position: fixed;
	background-color: #FFFFFF;
	color: black;
	border-radius: 50%;
	padding: 1rem 1rem;
	border: 1px solid lightgrey;
	font-size: 1rem;
	line-height: 1;
    bottom: 4rem;
    right: 2rem;
    z-index: 1000;
    text-align: center;
	}
.back-to-top:hover {
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
	background-color: #662C66;
	border-color: #662C66;
	color: white;
	}
a.anchor {
    display: block;
    position: relative;
    top: 6rem;
    visibility: hidden;
	}