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

    #div_strecken table,
    #div_strecken thead,
    #div_strecken tbody,
    #div_strecken th,
    #div_strecken td,
    #div_strecken tr {
        display: block;
    }

        #div_strecken thead tr {
            position: absolute;
            top: -9999px;
            left: -9999px;
        }

    #div_strecken tr {
        border-top: 1px dotted #004052; 
        border-collapse: collapse;
    }

    #div_strecken td {
        border: none;
        position: relative;
        padding-left: 100px;
        width: calc(100% - 120px);
    }

    #div_strecken.en td {
        padding-left: 140px;
        width: calc(100% - 160px);
    }


    #div_strecken td.no_value {
        display: none;
    }

    #div_strecken td.fairway_free {
        background-color: transparent;
    }

        #div_strecken td.fairway_free div.state_value {
            background-color: #bce436; 
        }

    #div_strecken td.fairway_blocked {
        background-color: transparent;
    }

        #div_strecken td.fairway_blocked div.state_value {
            color: white;
            background-color: #d70000; 
        }

    #div_strecken td.fairway_warning {
        background-color: transparent;
    }

        #div_strecken td.fairway_warning div.state_value {
            background-color: #fdc345; 
        }


    #div_strecken td:before {
        position: absolute;
        top: 1px;
        left: 1px;
        /* TODO use accurat bold for all captions ? */
        /*font-family: 'Akkurat-Bold', Arial, sans-serif;*/
        content: attr(data-caption);
    }

    #div_strecken td.fairway_name:before {
        /* TODO use accurat bold for main caption ? */
        /*font-family: 'Akkurat-Bold', Arial, sans-serif;*/
    }
}