@charset "utf-8";
/* CSS Document */


/***************************************************************************/
/* Stylesheet zur Anpassung an mobile Geräte, und verschiedene Bildschirme */
/***************************************************************************/

/*******************************/
/*      Große Bildschirme      */
/*******************************/


@media only screen and (max-width: 900px) {
}

@media only screen and (max-width: 280px) {

    #weiss, #grau {
        word-wrap: break-word;
    }

}

/******************************/
/*  iPad Portrait (Hochkant)  */
/******************************/

@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait ) {

    #navbar {
        display: none !important;
    }


    #socialmedia {
        right: 6%;
        max-width: 14%;
        width: auto;
        top: 250px;
    }

    #socialmedia ul li {
        display: block;
    }

}

/******************************/
/*    iPad Landscape (Quer)   */
/******************************/

@media only screen and
(min-device-width:768px) and
(max-device-width:1024px) and
(orientation: landscape) {

    #navbar {
        left: 3%;
        top: 250px;
    }

    #socialmedia {
        right: 7%;
        max-width: 14%;
        width: auto;
        top: 250px;
    }

    #socialmedia ul li {
        display: block;
    }

}

/******************************/
/*       iPhone hochkant      */
/******************************/

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : portrait) {

    #navbar, #socialmedia {
        margin-top: 0;
        background: #fff;
        height: 45px;
    }

    .vertnav .h6{
        opacity: 0;
    }
    .content{
        width: 90%;
    }

    .h1 {
        font-size: 15.5pt;
        line-height: 20pt;
    }

    .h2 {
        font-size: 8pt;
        line-height: 13.5pt;
    }

    .h3 {
        font-size: 10pt;
    }

    .first {
        width: 100%;
        float: none;
    }

    .last {
        width: 100%;
        float: none;
    }

    .logo {
        width: auto;
    }

    .photo {
        margin: 0 auto 20px;
    }

    #willkommen, #impressum {
        margin-bottom: 60px;
    }

    #news, #media, #sprachen, #kontakt {
        margin-bottom: 60px;
    }

    .vierzehntel {
        width: 80%;
    }

}

/******************************/
/*        iPhone quer         */
/******************************/

@media only screen
and (min-device-width : 320px)
and (max-device-width : 568px)
and (orientation : landscape) {

    .h1 {
        font-size: 24pt;
        line-height: 36pt;
    }

    .vierzehntel {
        width: 80%;
    }

}