/* Mobil-/Tablet-Anpassungen
 * Greift nur unterhalb von 1000px Breite. Das bestehende Desktop-Design
 * (style.css / content.css) bleibt dadurch unveraendert, es wird lediglich
 * unterhalb der Bruchgrenze auf ein einspaltiges, fluessiges Layout umgeschaltet.
 * -------------------------------------------------------------------------*/

@media (max-width: 1000px) {

    html, body {
        background-attachment: scroll;
        background-size: cover;
    }

    #wrapper {
        width: 100%;
        min-width: 0;
        box-sizing: border-box;
        border-radius: 0;
    }

    /* Header */
    #header {
        height: auto;
        padding: 15px 0;
        text-align: center;
    }

    #header_left {
        float: none;
        width: auto;
        height: auto;
        margin: 0 auto 10px;
    }

    #header_left_lueckenschliesser {
        display: none;
    }

    .float_left_header {
        float: none;
        display: inline-block;
    }

    #header_right {
        float: none;
        width: auto;
        height: auto;
        text-align: center;
        padding: 0 15px;
    }

    /* Navigation */
    #nav_li {
        float: none;
        width: 100%;
        height: auto;
        box-sizing: border-box;
    }

    #nav_li ul {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 0;
        padding: 10px 0;
    }

    #nav_li li {
        padding: 4px;
    }

    /* Content */
    #content {
        width: auto;
        margin-left: 0;
        padding: 15px 20px;
        box-sizing: border-box;
    }

    #content img,
    #content iframe {
        max-width: 100%;
        height: auto;
    }

    #logo_halb {
        float: none;
        display: block;
        margin: 20px auto;
    }

    .float_left,
    .float_right,
    .float_left_bhr,
    .float_right_buddafigur {
        float: none;
        display: block;
        margin: 15px auto;
    }

    .kursiv,
    .kursiv2,
    .kursiv3 {
        width: auto;
        margin: 15px 0;
        text-align: left;
    }

    #img_center,
    #behandlungsraum,
    #skelett,
    #skelett_demo,
    #buddafigur,
    #bhdr {
        width: 100%;
        height: auto;
        box-sizing: border-box;
    }

    table {
        width: 100%;
    }

    .nach_oben_link {
        margin-left: auto;
        margin-right: auto;
    }
}

@media (max-width: 480px) {

    #header h1 {
        font-size: 1.3em;
    }

    #header h2 {
        font-size: 1em;
    }

    .black {
        font-size: large;
    }
}