/* open-sans-regular - latin */
@font-face {
    font-family: 'Open Sans';
    font-style: normal;
    font-weight: 400;
    src: url('https://www.frank-kratschke.de/fonts/open-sans-v34-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('https://www.frank-kratschke.de/fonts/open-sans-v34-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('https://www.frank-kratschke.de/fonts/open-sans-v34-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('https://www.frank-kratschke.de/fonts/open-sans-v34-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('https://www.frank-kratschke.de/fonts/open-sans-v34-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('https://www.frank-kratschke.de/fonts/open-sans-v34-latin-regular.svg#OpenSans') format('svg'); /* Legacy iOS */
}
/* roboto-regular - latin */
@font-face {
    font-family: 'Roboto';
    font-style: normal;
    font-weight: 400;
    src: url('https://www.frank-kratschke.de/fonts/roboto-v30-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('https://www.frank-kratschke.de/fonts/roboto-v30-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('https://www.frank-kratschke.de/fonts/roboto-v30-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('https://www.frank-kratschke.de/fonts/roboto-v30-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('https://www.frank-kratschke.de/fonts/roboto-v30-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('https://www.frank-kratschke.de/fonts/roboto-v30-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
/* roboto-condensed-regular - latin */
@font-face {
    font-family: 'Roboto Condensed';
    font-style: normal;
    font-weight: 400;
    src: url('https://www.frank-kratschke.de/fonts/roboto-condensed-v25-latin-regular.eot'); /* IE9 Compat Modes */
    src: local(''),
    url('https://www.frank-kratschke.de/fonts/roboto-condensed-v25-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('https://www.frank-kratschke.de/fonts/roboto-condensed-v25-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
    url('https://www.frank-kratschke.de/fonts/roboto-condensed-v25-latin-regular.woff') format('woff'), /* Modern Browsers */
    url('https://www.frank-kratschke.de/fonts/roboto-condensed-v25-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
    url('https://www.frank-kratschke.de/fonts/roboto-condensed-v25-latin-regular.svg#RobotoCondensed') format('svg'); /* Legacy iOS */
}


html {
    min-height : 100%;
    width : 100%;
    padding-bottom:1px;
} 
body {
    font-family: 'Open sans', Arial, Verdana, "sans serif";
    font-size:16px;
    padding : 0px;
    margin : 0px;
}
#frontend{
    background-color: #444444;
    width:100%;
    max-width:1200px;
    margin:0 auto;
}
div { 
    padding : 0px;
    margin : 0px;
}
a{
    text-decoration: none;
}
.clearfix:after { 
    content : ".";
    display : block;
    height : 0;
    clear : both;
    visibility : hidden;
} 

div { 
    box-sizing:border-box; 
    -moz-box-sizing:border-box; 
}
.drittel, drittel_r{
    width: 33.333%;
    width: -webkit-calc( 100%/3 );
    width: -moz-calc( 100%/3 );
    width: calc( 100%/3 );
    float: left;
}
.drittel_r{
    float:right;
}
.halb, .halb_r{
    width:50%;
    box-sizing: border-box;
    padding:0 10px;
    float:left;
}
.halb_r{
    float:right;
}
.zweidrittel{
    width: 66.666%;
    width: -webkit-calc(( 100%/3 ) * 2 );
    width: -moz-calc(( 100%/3 ) * 2 );
    width: calc(( 100%/3 ) * 2 );
    float: left;
}
.viertel{
    width: 25%;
    box-sizing: border-box;
    padding:5px;
    float: left;
}
.voll{
    width:100%;
}
.voll_content{
    margin:0 -10px;
    width: 100%;
    width: -webkit-calc(100% + 20px );
    width: -moz-calc(100% + 20px);
    width: calc(100% + 20px);
}
.voll_galery{
    margin:0 -5px;
    width: 100%;
    width: -webkit-calc(100% + 10px );
    width: -moz-calc(100% + 10px);
    width: calc(100% + 10px);
}
.headlineLeft{
    width:20%;
    display:block;
    float:left;	
    overflow: hidden;
}
.headlineLeft img{
    width:100%;
    max-width:132px;
    margin:10px;
}
.headlineLeft h1, .headlineLeft h2{
    display: none;	
}
.headlineRight{
    margin:0 -3% 0 0;
    width:80%;
    float:left;
}
.headlineRight h1{
    margin:20px 0 0 5%;
    color:#fff;
    font-size:62px;
    font-family: 'Roboto', sans-serif;
    font-weight:800;
}
.headlineRight h2{
    margin:0;
    margin-left:5%;
    color:#fff;
    font-size:40px;
    font-family: 'Roboto', sans-serif;
    font-weight:300;	
}
.headlineBottom{
    background-image: url('/media/images/templates/Kratschke/2017/Header-2-Background.jpg'); 
    background-size: cover;
    min-height:50px;
    width:100%;
    overflow:hidden;	
}
.headlineBottom h1{
    color:#fff;
    text-transform:uppercase;
    text-align: center;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight:800;
    font-size:50px;
    padding:10px;
    margin:0px;	
}
.header_badge{
    position:absolute; 
    top:0; 
    left:72%;
    background-image:url('/media/images/templates/Kratschke/badge-bg.png'); 
    background-position:bottom;
    max-width:300px;
}
.startheader{
    color:#fff;
    font-size:36px; 
    padding:15px 30px 50px;
    margin:0px;
    text-transform:uppercase;
    font-family: 'Roboto Condensed', sans-serif;
    font-weight:300;
}
#ZitatDesTages{
    background-color: #122c47;
    overflow:hidden;
}
#ZitatDesTages h1, #ZitatDesTages p{
    color:#fff;
    font-family: 'Roboto Condensed', sans-serif;
}
#ZitatDesTages h1{
     text-align:center;
    font-weight:bold;
    font-size:30px;
    text-transform:uppercase;
    font-weight:400;
    padding:20px 0 10px;
    margin:0;
}
#ZitatDesTages p{
    font-size:20px;
    padding: 5px 40px;
    margin:0;
}
#ZitatDesTages p.Verfasser{
    font-size:14px;
    text-align:right;
    color:grey;
    padding-bottom:10px;
}
@media screen and (max-width: 768px)  {
    .headlineLeft{
	width:100%;
	display:block;
	float:none;	
    }
    .headlineLeft img{
	width:25%;
	max-width:132px;
	float: left;
	margin:10px;
    }
    .headlineLeft h1, .headlineLeft h2{
	display: block;	
	color:#fff;
	font-family: 'Roboto', sans-serif;
    }
    .headlineLeft h1{
	margin:0px 0 0 5%;
	font-size:56px;
	font-weight:800;
	padding-top:60px;
    }
    .headlineLeft h2{
	margin:0;
	margin-left:5%;
	font-size:36px;
	font-weight:300;	
    }
    .startheader {
        font-size:28px;
        padding:15px 20px 50px;
    }
    .headlineRight{
	width:100%;
	float:none;
	margin:0;
    }
    .headlineRight h1, .headlineRight h2{
	display: none;	
    }
    .headlineBottom h1{
	font-size:38px;
    }
    .zweidrittel, .drittel{
	width:100%;
    }
    #KontaktRechts{
	display:none;
    }
}
@media (max-width: 600px) {
    .headlineLeft h1{
	margin:20px 0 0 0;
	font-size:46px;
	font-weight:800;
	padding-top:55px;
    }
    .headlineLeft h2{
	margin:0;
	font-size:30px;
	font-weight:300;	
    }
    .headlineBottom h1{
	font-size:30px;
    }
    .halb, .halb_r{
	width:100%;
    }
    .header_badge{
	position:relative;
        left:0;
	width:100%;
        max-width:100%;
	background-color:#e66e28;
    }
    .startheader{
	color:#fff;
	font-size:36px;
	padding:15px 15px 15px;
	margin:0px;
	text-transform:uppercase;
	font-family: 'Roboto Condensed', sans-serif;
	font-weight:300;
    }
}
@media (max-width: 480px) {
    .headlineLeft h1{
	margin:20px 0 0 0;
	font-size:28px;
	font-weight:800;
	padding-top:40px;
    }
    .headlineLeft h2{
	margin:0;
	font-size:18px;
	font-weight:300;	
    }
    .headlineBottom h1{
	font-size:24px;
    }
    .viertel{
	width: 50%;
    }
    .startheader {
        font-size: 28px;
    }
}