/* Mobile-/Responsive-Anpassungen.
   Die Desktop-Optik bleibt unveraendert - alle Regeln greifen erst ab
   Viewport-Breiten <= 816px (die Original-Seite ist 800px breit). */

@media (max-width: 816px) {

    /* Feste 800px-Container werden fluid */
    div.PageHeadContent,
    div.PageNavigationContent,
    div.PageBodyContent,
    div.PageBodyExtendedContent,
    div.PageFootContent {
        width: auto;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Header/Navigation duerfen bei Umbruch hoeher werden */
    div.PageHead {
        height: auto;
        min-height: 140px;
    }

    div.PageNavigation {
        height: auto;
    }

    div.PageNavigationContent a {
        display: inline-block;
        line-height: 26px;
    }

    /* Bilder (Logos, Avatare ...) nie breiter als der Bildschirm */
    img {
        max-width: 100%;
        height: auto;
    }

    /* Zwei-Spalten-Tabelle "Ueber uns": lange Woerter umbrechen */
    td.ContentTable1 {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* Login- und Kontaktformular untereinander stapeln */
    form.pure-form table,
    form.pure-form tbody,
    form.pure-form tr,
    form.pure-form td {
        display: block;
        width: 100%;
    }

    form.pure-form input[type='text'],
    form.pure-form input[type='password'],
    form.pure-form input[type='email'],
    form.pure-form textarea {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
        margin: 0 0 8px 0 !important;
    }
}