@media only screen and (max-width: 768px), only screen and (max-device-width: 500px) {
    .phone_optional {
        display: none;
        margin: 0;
        padding: 0;
    }

    .action_grid {
        text-align: center;
    }

    #mainmenu {
        display: none;
        padding-top: .5rem;
    }

    #submenu {
        display: none;
        padding-top: .5rem;
    }

    .application_header h1 {
        font-size: 1.5em;
    }

    .application_header img {
        display: none;
    }

    .button_grid {
        display: grid;
        grid-template-columns: 1fr;
        grid-template-rows: auto;
        grid-auto-flow: row;
        grid-gap: .5em;
    }

    .ticketinfo_grid {
        grid-template-rows: 1fr;
        grid-auto-flow: row;
    }

    .image_upload_item_grid {
        grid-template-columns: 1fr;

        grid-template-areas: 
            "item_header"
            "item_details"
            "item_existing_pic"
            "item_image"
            "item_reject_reason"
            "item_question"
            "item_creator"
            "item_creatorname"
            "item_buttons";
    }

    .image_upload_item_grid .header {
        grid-column: 1 / 1;
    }

    .image_upload_item_grid .image {
        grid-column: 1 / 1;
    }

    .image_upload_item_grid .reject {
        grid-column: 1 / 1;
    }

    .image_upload_item_grid .question {
        grid-column: 1 / 1;
    }

    .image_upload_item_grid .creator {
        grid-column: 1 / 1;
    }

    .image_upload_item_grid .creatorname {
        grid-column: 1 / 1;
    }

    .image_upload_item_grid .buttons {
        grid-column: 1 / 1;
        grid-template-columns: 1fr;
    }

    .image_upload_item_grid .existing_image img {
        width: 50%;
        height: auto;
        max-height: unset;
    }

    .image_upload_item_grid .image img {
        width: 100%;
        height: auto;
        max-height: unset;
    }

    #ticket_detail_grid {
        grid-template-columns: 1fr;
    }

    #ticket_detail_grid .longelement {
        grid-column-end: span 1;
    }

    #ticket_detail_grid .middleelement {
        grid-column-end: span 1;
    }


    .ticket_item_grid {
        grid-template-columns: 1fr 1fr;
        grid-template-areas:
        "item_ticket_description item_ticket_description"
        "item_ticket_corresponding_article item_ticket_corresponding_article"
        "item_ticket_creator_remark item_ticket_creator_remark"
        "item_ticket_editor_remark item_ticket_editor_remark"
        "item_ticket_editor_remark_internal item_ticket_editor_remark_internal"
        "item_ticket_question item_ticket_question"
        "item_ticket_status item_ticket_creator"
        "item_ticket_creationdate item_ticket_editor"
        "item_ticket_lastupdate item_empty";
    }

    .ticket_item_grid .ticket_description {
        grid-column: 1 / span 2;
    }

    .ticket_item_grid .ticket_corresponding_article {
        grid-column: 1 / span 2;
    }

    .ticket_item_grid .ticket_creator_remark {
        grid-column: 1 / span 2;
    }

    .ticket_item_grid .ticket_editor_remark {
        grid-column: 1 / span 2;
    }

    .ticket_item_grid .ticket_editor_remark_internal {
        grid-column: 1 / span 2;
    }

    .ticket_item_grid .ticket_question {
        grid-column: 1 / span 2;
    }


    .scan_item_grid {
        grid-template-columns: 1fr;
        grid-template-areas:
        "item_remark"
        "item_hersteller"
        "item_starter"
        "item_starttime"
        "item_duration"
        "item_result";
    }

    .scan_item_grid .scan_remark {
        grid-column: 1 / span 1;
    }

    .form_edit_grid {
        grid-template-columns: 1fr;
    }

    .form_edit_grid .form_field_long {
        grid-column: 1 / 1;
        padding-top: .5em;
        padding-bottom: .5em;
    }

    .form_edit_grid .form_field_middle {
        grid-column: 1 / 1;
        padding-top: .5em;
        padding-bottom: .5em;
    }

    .form_edit_grid .form_field_small {
        grid-column: 1 / 1;
        padding-top: .5em;
        padding-bottom: .5em;
    }

    .footer_grid {
        grid-template-columns: 1fr;
        grid-template-areas: 
            "images"
            "footerinfo";
    }

    .footer_grid .footer_socialmedia {
        text-align: center;
    }

    #navigation {
        text-align: left;
    }

    #navigation .navigator {
        grid-template-columns: repeat(7, 1fr);
    }

    #searchform_grid {
        grid-template-columns: 1fr;
        grid-gap: unset;
        grid-row-gap: .5rem;
    }

    #searchform_grid .double {
        grid-column-end: span 1;
    }

    #searchform_grid .mainsearchselement {
        grid-column-end: span 1;
    }

    .contentform_grid {
        grid-template-columns: 1fr;
    }

    .contentform_grid .longelement {
        grid-column-end: span 1;
    }

    .contentform_grid .middleelement {
        grid-column-end: span 1;
    }

    .contentform_grid .centerimage img {
        border: solid 1px darkblue;
        padding: 0;
        width: 100%;
        height: auto;
    }

    .action_grid textbutton {
        margin: .3em;
    }

    form.action_grid {
        text-align: center;
    }

    .comparetable table {
        display: none;
    }


    .filter_form_grid {
        grid-template-columns: 1fr;
    }

    .filter_form_grid .double {
        grid-column-end: span 1;
    }

    .filter_form_grid .third {
        grid-column-end: span 1;
    }

    .filter_form_grid .full {
        grid-column-end: span 1;
    }

    .iconbar {
        grid-template-columns: 1fr 1fr;
        grid-auto-flow: initial;
    }


    .cardgrid_images .cardgrid {
        grid-template-columns: repeat(1, 1fr);
    }

    .cardgrid_images .card {
        width: 100%;
        max-width: unset;
    }

    .cardgrid_artikel .cardgrid {
        grid-template-columns: repeat(1, 1fr);
    }

    .cardgrid_artikel .card {
        width: 100%;
        max-width: unset;
    }

    .cardgrid_fahrzeuge .cardgrid {
        grid-template-columns: repeat(1, 1fr);
    }

    .cardgrid_fahrzeuge .card {
        width: 100%;
        max-width: unset;
    }

    .cardgrid_haendler .cardgrid {
        grid-template-columns: repeat(1, 1fr);
    }

    .cardgrid_haendler .card {
        width: 100%;
        max-width: unset;
    }

    .cardgrid_user .cardgrid {
        grid-template-columns: repeat(1, 1fr);
    }

    .cardgrid_user .card {
        width: 100%;
        max-width: unset;
    }

    .cardgrid_stammdaten .cardgrid {
        grid-template-columns: repeat(1, 1fr);
    }

    .cardgrid_stammdaten .card {
        width: 100%;
        max-width: unset;
    }

    .cardgrid_ticket .cardgrid {
        grid-template-columns: repeat(1, 1fr);
    }

    .cardgrid_ticket .card {
        width: 100%;
        max-width: unset;
    }

    .card_fahrzeug .bahngesellschaft {
        width: 50%;
    }

    .card_fahrzeug .baureihe {
        width: 50%;
    }

    .card_fahrzeug .epoche {
        width: 50%;
    }

    .card_fahrzeug .betriebsnummer {
        width: 50%;
    }

    .listgrid .actionbar .dropdown_button {
        width: 50%;
    }

    .listgrid .actionbar .dropdown_button .button {
        width: 85%;
    }

    .list_artikel .actionbar a:not(.dropdown_button) {
        width: 50%;
    }



    .list_artikel .actionbar .dropdown_button {
        width: 50%;
    }

    .list_artikel .actionbar .dropdown_content {
        width: max-content;
        right: 0;

    }

    .list_artikel .actionbar .dropdown_content a:not(.dropdown_button) {
        width: max-content;

    }

    .list_artikel .header {
        height: 2.6rem
    }

    .list_artikel .left {
        margin-right: 0;
    }

    .list_artikel .right {
        width: 100%;
    }

    .list_artikel .inner_box {
        display: block;
    }

    .list_fahrzeug .actionbar a:not(.dropdown_button) {
        width: 50%;
    }

    .list_fahrzeug .actionbar .dropdown_button {
        width: 50%;
    }

    .list_fahrzeug .actionbar .dropdown_content {
        width: max-content;
        right: 0;

    }

    .list_fahrzeug .actionbar .dropdown_content a:not(.dropdown_button) {
        width: max-content;
    }

    .list_fahrzeug .inner_box {
        display: block;
    }

    .list_fahrzeug .header {
        height: 2.6rem
    }

    .list_fahrzeug .left {
        margin-right: 0;
    }

    .list_fahrzeug .column {
        margin-top: .5rem;
        width: 100%;
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .list_fahrzeug .column_small {
        margin-top: .5rem;
        display: block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .list_fahrzeug .right {
        width: 100%;
    }

    .list_fahrzeug .thumbnail {
        margin-top: 1rem;
    }

    .list_zug .halfsize {
        display: block;
        width: 100%
    }

    .list_zug .halfsize .actionbar {
        width: 100%;
        max-width: 100%;
    }

    .list_zug .halfsize .leftside {
        margin-right: 0;
    }

    .list_zug .halfsize .rightside {
        margin-top: 2rem;
    }

    .list_zug .actionbar .dropdown_button {
        width: 50%;
    }

    .list_zug .halfsize div {
        flex: unset;
    }



    .infobox .halfsize {
        display: block;
        width: 100%
    }

    .infobox .halfsize .actionbar {
        width: 100%;
        max-width: 100%;
    }

    .infobox .halfsize .leftside {
        margin-right: 0;
    }

    .infobox .halfsize .rightside {
        margin-top: 2rem;
    }

    .infobox .actionbar .dropdown_button {
        width: 50%;
    }

    .infobox .halfsize div {
        flex: unset;
    }

    .infobox .quality {
        margin-right: auto;
        margin-top: 1rem;
    }

    .infobox .lastupdate {
        margin-right: auto;
        text-align: center;
        margin-top: .5rem
    }

    .infobox .preisinfo {
        max-width: 100%;
    }

    .sonstigesgrid {
        grid-template-columns: 1fr;
    }

    .digitalfunktionengrid {
        grid-template-columns: 1fr;
    }

    .buttonarea_grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .searchform select[type=dropdown] {
        height: 2.5rem;
    }

    .phone_only {
        display: unset;
    }

    #submenubar .phone_only {
        display: grid;
    }

    #extendedSearch {
        display: none;
    }

    #searchform_grid .phone_only .button {
        margin: .5rem;
    }

    .zugdetailliste .actionbar a:not(.dropdown_button) {
        width: 50%;
    }

    .zugdetailliste .actionbar .dropdown_content {
        width: max-content;
        right: 0;
    }

    .zugdetailliste .actionbar .dropdown_content a:not(.dropdown_button) {
        width: max-content;
    }

    .compactitemgrid {
        grid-template-columns: 1fr;
    }

    .sortable_item {
        height: unset;
    }

    .sortable {
        max-width: unset;
        min-width: unset;
        width: 100%;
    }

    .sortable li {
        height: unset;
    }

    .contentform_grid .dropdown {
        width: 100%;
    }

    .checkelement .label {
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .imagegrid_zug {
        grid-template-columns: repeat(2, 1fr);
    }

    .zugliste .halfsize .actionbar {
        width: 100%;
        margin-bottom: .5rem;
    }

    .zugliste .actionbar a:not(.dropdown_button) {
        width: 50%;
    }

    .zugliste .actionbar .dropdown_content {
        width: max-content;
        right: 0;
    }

    .zugliste .actionbar .dropdown_content a:not(.dropdown_button) {
        width: max-content;
    }

    .list_modellfamilie .listgrid {
        margin-left: 0;
        margin-right: 0;
    }

    .list_modellfamilie .actionbar .button {
        width: max-content;
    }

    .list_modellfamilie .actionbar .dropdown_content {
        right: 0;
        width: max-content;
    }

    .list_modellfamilie .actionbar a:not(.dropdown_button) {
        width: unset;
    }

    .list_modellfamilie .actionbar .dropdown_button {
        width: unset;
    }


    .actionbar a.phone_optional {
        display: none;
        margin: 0;
        padding: 0;
    }
}