@font-face {
    font-family: 'open_sansregular';
    src: url('fonts/OpenSans-Regular-webfont.eot');
    src: url('fonts/OpenSans-Regular-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Regular-webfont.woff') format('woff'),
         url('fonts/OpenSans-Regular-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Regular-webfont.svg#open_sansregular') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'open_sanssemibold';
    src: url('fonts/OpenSans-Semibold-webfont.eot');
    src: url('fonts/OpenSans-Semibold-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Semibold-webfont.woff') format('woff'),
         url('fonts/OpenSans-Semibold-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Semibold-webfont.svg#open_sanssemibold') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'open_sanssemibold_italic';
    src: url('fonts/OpenSans-SemiboldItalic-webfont.eot');
    src: url('fonts/OpenSans-SemiboldItalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-SemiboldItalic-webfont.woff') format('woff'),
         url('fonts/OpenSans-SemiboldItalic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-SemiboldItalic-webfont.svg#open_sanssemibold_italic') format('svg');
    font-weight: normal;
    font-style: normal;

}
@font-face {
    font-family: 'open_sansitalic';
    src: url('fonts/OpenSans-Italic-webfont.eot');
    src: url('fonts/OpenSans-Italic-webfont.eot?#iefix') format('embedded-opentype'),
         url('fonts/OpenSans-Italic-webfont.woff') format('woff'),
         url('fonts/OpenSans-Italic-webfont.ttf') format('truetype'),
         url('fonts/OpenSans-Italic-webfont.svg#open_sansitalic') format('svg');
    font-weight: normal;
    font-style: normal;

}

* {	
-webkit-box-sizing:border-box; /* safari */
-moz-box-sizing:border-box; /* firefox */
box-sizing:border-box;
}


body, html {height:100%;}

body {
	overflow-x:hidden;
	width:100%;
	font-family: 'open_sansregular', Arial, 'Helvetica Neue', sans-serif;
	font-size: 0.875em;
    line-height: 1.4;
	color: #5F5B55;
}

.desktop {display: none !important;}

img {max-width:100%; height:auto; vertical-align: middle;}
.slider img {width:100%; max-width:none; padding-bottom:30px;}
aside img {max-width: 47%; margin: 1%;}
.slider {padding: 0 30px;}
@media \0screen {img { width: auto }} /* Prevent height distortion in IE8. */

.clear {
	clear: both;
	line-height: 0;
	font-size: 0;
}
.left {float:left;}
.right {float:right;}



/* ------------ layout --------------- */

.wrapper {max-width:1200px; margin:0 auto; }

header {float:left; width:100%; padding: 1rem 1rem;; background-color:#f0ece5; height:200px; position:fixed; z-index:999;}
/*footer {float:left; width:100%; padding: 20px;}*/
article {float:left; width:100%; padding: 0 1rem;}
/*section {float:left; width:100%; padding: 0 3.125%; margin-bottom:2em;}*/
.inhalt aside {float:left; width:100%; padding:25px;}
main {display: block; padding-top: 50px;}
.content{display:block; float:left; width:100%; padding: 1.5em 20px 2em 20px;}

/* ------------------- Links --------------------- */
a, a:link, a:visited {
	text-decoration: none; color: #776072;}
a:hover, a:active, a:focus {outline:none; color: #776072;}

footer p {font-size:0.8571428571428571em; letter-spacing:1px; text-align:right; color:#DACFBE;}
footer p a, footer p a:link, footer p a:visited { padding:0; color:#DACFBE;}
footer p a:hover, footer p a:active, footer p a:focus  {color:#DACFBE;}

a img:link, a img:hover {border:none;}

/* ------------------- Navigation --------------------- */
main nav {/*float:left; width:100%; */ display:block; padding:0;}
main nav ul {float:left; margin: 1em 0 1em 0; padding: 0; width:100%; font-size:1.333em;}
main nav li {display:block; width:100%;}
main nav li a {display: block; padding: 6px 10px; margin:5px; text-align:center; background-color:#F0ECE5; color:#973d48;}
main nav li a:hover {background-color:#AC4451; color:#DACFBE;}
main nav li.current a {background-color:#FFEA41;}

.current {font-family: 'open_sanssemibold';}


/* ------------------- Header mit Navi --------------------- */

.logo {display:block; float:none; width:300px; height:120px; transition: all .2s;}


nav.haupt {margin:0 3.25%;}
header nav.haupt ul {display: block; float:left; position:absolute; right:0;}
header nav.haupt li {display:block; text-align:center; margin-bottom:4px; background-color:#f0ece5;}
header nav.haupt li a, nav.haupt li a:link, nav.haupt li a:visited {display: block; padding: 10px 10px; text-transform: uppercase; color: #776072;  width:100%; font-size:20px;}
header nav.haupt li a:hover, nav.haupt li a:active, nav.haupt li a:focus {color:#B95B60;}

header nav.haupt li a.current{color:#B95B60; border-bottom:2px solid;}



 /* ------------ Typo --------------- */

p {font-size:1em; margin-top:0.8em;}
p, td:first-child {-moz-hyphens: auto; -o-hyphens: auto; -webkit-hyphens: auto; -ms-hyphens: auto; hyphens: auto;}
p.rubrik {-moz-hyphens: unset; -o-hyphens: unset; -webkit-hyphens: unset; -ms-hyphens: unset; hyphens: unset;}
aside p {font-size: 0.9375em;}
li {font-size:1em;} 
h1 {font-family:'open_sansregular', Arial, 'Helvetica Neue'; font-size:1.4285em; font-weight: normal; line-height:1.5em; color:#534043; margin:0 0 0.8em 0; text-transform:uppercase;}
h2 {font-family:'open_sanssemibold', Arial, 'Helvetica Neue'; font-size:1.2em; font-weight: normal; line-height:1.429em; color:#534043; margin: 1.5em 0 1em 0;}
h3 {font-family:'open_sansregular', Arial, 'Helvetica Neue'; font-size: 1.4375em; font-weight: normal; line-height:1.429em; color:#534043; margin: 1.5em 0;
   text-align:center; border-top:1px dotted #969696; border-bottom: 1px dotted ; padding:1em;}
h4 {font-family:'open_sanssemibold', Arial, 'Helvetica Neue'; font-weight: normal; font-size:1em; color:#534043;}
strong, b {font-family:'open_sanssemibold', Arial, 'Helvetica Neue'; font-weight: normal;}
em {font-family:'open_sansitalic', Arial, 'Helvetica Neue';}
strong em {font-family: 'open_sanssemibold_italic', Arial, 'Helvetica Neue'; font-weight: normal;}

hr {display: block; height: 1px; border: 0; border-top: 1px dotted #969696; margin: 3em 0; padding: 0; clear:both;}

ul.text {padding:0 0 0 2em; list-style:disc url(none) outside; margin-bottom:2.5em;}
ul.text li {margin-bottom:0.4em;}

/* ------------------- Farben --------------------- */
.bg {display:block; float:left; width:100%; padding: 0 3.125%;}

.bg_grau {background-color:#F8F8F8;}
.bg_hblau {background-color:#72B7CB;}
.bg_rot {background-color:#ac4451;}
.bg_weiss {background-color:#FFF;}
.bg_turkis {background-color:#478FA5;}
.bg_dgrau{background-color:#605953;}

.gruen {color:#81BB20;}
.turkis {color:#34879E;}
.braun {color:#534043;}

.hgrau {color:#EBEBEB;}
.grau {color:#DCDDDD;}
.mgrau {color:#969696;}
.dgrau {color:#535352;}


/* ------------------- Back to top Button  --------------------- */
.back-to-top {
width:50px;
height:50px;
background: url(../images/top.png) no-repeat 0 0;
position: fixed;
bottom:100px;
right:5%;
padding:1em;
z-index:999;
text-indent: -9999px;
}
.back-to-top:hover {background: url(../images/top_ov.png) no-repeat 0 0;}
.linkbox {display:inline-block; width:100%;}

/* ------------------- boxen --------------------- */
.container{display:block; width:100%;}
.flexo {display: block; width: 100%; background-color:#fff; border-bottom: 16px solid #f8f8f8;}
.flexo > div {display:block; width:100%; padding:16px;}
  
@media only screen and (min-width: 600px) {
.flexo {display: table; width: 100%;}
.flexo > div {display:table-cell; width:50%; vertical-align: top;}
.linkbox {width:45%;}
}

@media only screen and (min-width: 760px) {
.container{display:table; width:100%; border-collapse:separate; border-spacing:1rem;}
.flexo {display:table-cell; width:33%; background-color:#fff;}
.flexo > div {display:block; width:100%; }

}









/* ==========================================================================
   Media Queries
   ========================================================================== */

@media only screen and (min-width: 520px) {
body {font-size: 0.9375em; /* 15px */}
.desktop {display: block !important;}


}

@media only screen and (min-width: 680px) {
header {padding: 1rem 2rem;}
header nav.haupt ul {float:right; position:unset;}
header nav.haupt li {display:inline-block;}
.logo {float:left;}
}
@media only screen and (max-width: 640px) {
.back-to-top {right:-100px;}

}


@media only screen and (min-width: 960px) {
.inhalt article {width:65%;}
.inhalt aside {width:30%;}

}

/* ==========================================================================
   Helper classes
   ========================================================================== */

.ir {
    background-color: transparent;
    border: 0;
    overflow: hidden;
    *text-indent: -9999px;
}

.ir:before {
    content: "";
    display: block;
    width: 0;
    height: 150%;
}

.hidden {
    display: none !important;
    visibility: hidden;
}

.visuallyhidden {
    border: 0;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.visuallyhidden.focusable:active,
.visuallyhidden.focusable:focus {
    clip: auto;
    height: auto;
    margin: 0;
    overflow: visible;
    position: static;
    width: auto;
}

.invisible {
    visibility: hidden;
}

.clearfix:before,
.clearfix:after {
    content: " ";
    display: table;
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}

/* ==========================================================================
   Print styles
   ========================================================================== */

@media print {
    * {
        background: transparent !important;
        color: #000 !important; /* Black prints faster: h5bp.com/s */
        box-shadow: none !important;
        text-shadow: none !important;
    }

    a,
    a:visited {
        text-decoration: underline;
    }

    a[href]:after {
        content: " (" attr(href) ")";
    }

    abbr[title]:after {
        content: " (" attr(title) ")";
    }

    /*
     * Don't show links for images, or javascript/internal links
     */

    .ir a:after,
    a[href^="javascript:"]:after,
    a[href^="#"]:after {
        content: "";
    }

    pre,
    blockquote {
        border: 1px solid #999;
        page-break-inside: avoid;
    }

    thead {
        display: table-header-group; /* h5bp.com/t */
    }

    tr,
    img {
        page-break-inside: avoid;
    }

    img {
        max-width: 100% !important;
    }

    @page {
        margin: 0.5cm;
    }

    p,
    h2,
    h3 {
        orphans: 3;
        widows: 3;
    }

    h2,
    h3 {
        page-break-after: avoid;
    }
}