@charset "UTF-8";

/* CSS Document */

@media all {

    #liebling {
        /* background: #fa9206; */
        text-align: center;
    }

    .klein {
        width: 40%;
        float: left;
        background: #222222;
    }

    .gross {
        float: left;
        background: #999999;
        width: 60%;
    }

    #alles {
        background: #222222;
        overflow: hidden;
        width: 80%;
        margin: 0 auto;
        /* CSS Hack: damit passt sich das div-Element
        dem größten Element an */
    }

    img {
        max-width: 100%;
        height: auto;
    }

    #ich {
        /* background: #d2dae3; */
        text-align: center;
    }

    #mein-bild {
        /* border: 4px solid #FF0000; */
    }

    #liste {
        list-style-type: none;
        text-align: center;

    }

    .u-liste {
        display: inline;
        padding-right: 1em;

    }

    .grau {
        background: #D3D3D3;
        background-size: contain;
    }



}

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

    #liebling {
        /* background: #fa9206; */
        text-align: center;
        display: block;
        float: none;
    }

    #ich {
        /* background: #d2dae3; */
        text-align: center;
        display: block;
        float: none;
    }

    .u-liste {
        display: block;

    }

    .klein {
        width: 100%
    }

    .gross {
        width: 100%
    }

}