@media screen and (min-width: 769px) {
    .responsive {display: none;}
}

@media screen and (max-width: 768px) {
    * {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}
    #page{margin: 0; width:100%; padding:0; background: none; background-color: #fff; }
    #head { width:100%; float:none;}
    #logo { width:45%; position:static; top:0; left:0; float: left; margin: 30px 0 0 5%;}
    #logo img {width: 80%; height: auto;}
    #slogan { width:50%; padding:0; position:static; top:0; right:0; float: right; padding: 0 0 0 30px; margin-top: 70px;}
    #headimg { width:100%; float:none;}
    #headimg img {width: 100%; height: auto;}
    #navi {display: none;}
    #breadcrumb { width:50%; height: auto; margin:0; padding:10px 3%; float:none; margin-left: 18px;}
    #content { width:100%; height: auto; float:none; }
    #kontakt {display: none;}
    #text { width:100%; margin:0; float:none; padding: 5%; overflow: visible;}
    #footer { display: none;}
    .impre-link a {float:left; padding-left: 5%;}
    #linklist { width:100%; padding-left: 5%; margin: 5px 0 0 0;}
    .responsive h2 {color: #ff9967; margin-top: 3%; font-size: 1.5em;}
    .datenschutz {display: block; position: fixed; bottom: 0; left: 0; width: 100%;}
    .datenschutz ul li {width: 50%; float: left; background: #ff9967; list-style: none; padding: 5px 0; text-align: center;}
    .datenschutz ul li a {color: #fff; text-decoration: none;}
}

@media screen and (max-width: 570px) {
    #headimg { height:200px;}
}

@media screen and (max-width: 360px) {
    #slogan {display: none;}
    #logo {width: 100%;}
    #headimg { height:120px;}
}