* {
    padding: 0;
    margin: 0;
}

/* ======================== Styling allg. =========================*/
header, main, article, nav, footer {
    display: block;
}

body {
    max-width: 1280px;
    min-width: 300px;
    min-height: 600px;
    margin: auto;
    font-family: 'Open Sans', Arial, sans-serif;
    color: #333;
    background: #444;
    box-shadow: 2px 2px 5px #444;
}
h2 {
    font-size: 1.6em;
    font-weight: normal;
    padding: 1.6em 0 1em 0;
}
h3 {
    font-size: 1.2em;
    font-weight: normal;
    padding: .8em 0 .5em 0;
    border-bottom: 1px solid #333;    
}
h4 {
    font-size: 0.9em;
    font-weight: normal;
    font-style: italic;
    padding: .4em 0 0 0;
}
p {
    margin: 1em 0;
}

a {
    color: #000080;
}
a:hover {
    color: #CF2C00;
}
article ul {
    padding-left: 2em;
}

.floatright {
    float: right;
    margin-left: 25px;
}
.clear {
    clear: both;
}

/* ========================== Layout, Header ============================ */
header {
    height: 400px;
    background: url(bilder/header11.jpg) no-repeat 0 -150px;
    background-size: cover;
}
header h1 {
    text-indent: -999em;
}
header img {
    float: right;
    max-width: 75%;
}
main {
    background-color: #fff;
}
article {
    padding: 2em;
    min-height: 360px;
    font-size: 1.1rem;
}
article:after {
content:"";
display: table;
clear: both;
}

/* ================================= Navi ====================== */
nav {
    height: 3.2em;
    background-color: #a91714;
}

nav ul {
    float: left;
    list-style-type: none;
    background-color: #a91714;
}
nav ul li {
    float:  left;
    border-right: 1px solid #ccc;
}
nav ul a {
    padding: .65em 20px;
    display: block;
    text-decoration: none;
    color: #fff;
    font-size: 1.2em;
}
nav ul li a:hover, nav ul li a:focus {
    color: #fff;
    background-color: #E8110C;
}
nav ul li a.active {
    background-color: #a91714;
    color: #ccc;
}
/* Ausblenden des Menubuttons */
        div.menubutton {
        display: none;
    }
/* ============================ Startseite ========================*/

.uebersicht {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}
.element {
    width: 300px;
    padding: 0 50px 30px 0;
    margin: 50px 0 20px 50px;
    border-bottom: 1px dotted #444;
}
.element img {
    width: 100%;
}
.element p {
    font-size: 0.9em;
    /*background-color: #eee;
    padding: 1em;*/
}

/* ========================= Messen, Ansprechpartner =========================*/
    #messen img, #messen h2 {
        margin-top: 100px;
    }
    table {
        border-collapse: collapse;
        width: 100%;
    }

    td, th {
        border: 1px solid #ddd;
        padding: 8px;
    }

    tr:hover {background-color: #ddd;}

    th {
        padding: 8px 12px;
        text-align: left;
        background-color: #a91714;
        color: white;
    }
    .kontaktbox table {
      margin-top: 1em;
    }
    .kontaktbox td {
      width: 25%;
    }

/* ==================== Kontakt =====================*/

    .kontaktbox {
        font-size: 1.2em;
        padding: 2em;
        border: 1px dotted #444;
        border-bottom: none;
    }

  form.yform fieldset {
    border: 1px #fff solid;
    background: #eaeaea;
    margin: 0 0 1em 0;
    padding: 1.5em 1em;
    border-radius: 6px;
  }

  form.yform label {
    color: #666;
  }

  form.yform .type-text input,
  form.yform .type-text textarea,
  form.yform .type-select select {
    font-family:  Arial, Helvetica, sans-serif; /* proportional fonts for all form elements */
    border: 1px solid #ddd;
  }

  /* :hover and :focus status on form fields | Effekt zur Hervorhebung von Formularfeldern bei :hover oder :focus */
  form.yform div input:focus,
  form.yform div select:focus,
  form.yform div textarea:focus,
  form.yform div input:hover,
  form.yform div select:hover,
  form.yform div textarea:hover,
  form.yform div input:active,
  form.yform div select:active,
  form.yform div textarea:active {
    border: 1px #a66 solid;
    background: #fff;
  }

  /* Styling of buttons | Gestaltung von Buttons */
  form.yform .type-button input {
    border: 1px #ddd solid;
    color: #fff;
    background-color: #a91714;
    padding: 1em 2em;
    font-size: 1em;
  }

  /* :hover and :focus status on buttons | Effekt zur Hervorhebung von Schaltern bei :hover oder :focus */
  form.yform div.type-button input:focus,
  form.yform div.type-button input:hover,
  form.yform div.type-button input:active {
    border-top: 1px #444 solid;
    border-left: 1px #444 solid;
    border-right: 1px #ddd solid;
    border-bottom: 1px #ddd solid;
    color: #fff;
    background: #E8110C; 
  }

   /* General form styling  | Allgemeine Formatierung des Formulars */
  form.yform { overflow: hidden; }
  form.yform fieldset { overflow: hidden; }
  form.yform legend { background: transparent; border: 0; }
  form.yform label { display:block; cursor: pointer; }
  form.yform .message { display: block; margin-bottom: 0.5em; color: #666; }

  /* Hiding of hidden fields (otherwise ugly spaces in Firefox) | Versteckte Felder wirklich verstecken (sonst ggf. häßliche Lücken im Firefox) */
  form.yform input[type=hidden] { display: none !important; }

  /* Highlight mandatory fields | Pflichtfeldkennzeichnung hervorheben */
  form.yform sup { color: #800; font-size: 0.8em; }

  /* styling containing DIV elements | Gestaltung der kapselnden DIV-Elemente */
  form.yform div.type-text,
  form.yform div.type-select,
  form.yform div.type-check,
  form.yform div.type-button {
    margin: 0.5em 0;
    position: relative;
    overflow: hidden;
  }

  /* styling standard form elements with 'almost' equal flexible width | Gestaltung der einzelnen Formularelemente mit annähend gleicher Breite */
  form.yform .type-text input,
  form.yform .type-text textarea {
    display: block;
    position: relative;
    padding: 0.6em;
    width: 58.5%;
  }

  form.yform .type-select select {
    display: block;
    position: relative;
    padding: 0.3em 2px 0.3em 1px;
    width: 60%;
    cursor: pointer;
  }
  form.yform .type-select select optgroup {
    font-style: normal;
    font-weight: bold;
  }

  form.yform .type-check input { cursor: pointer; }
  form.yform .type-check label { display: inline; }

  /* Styling of buttons | Gestaltung von Buttons */
  form.yform .type-button input {
    width: auto;
    cursor: pointer;
  }

  /* Styling of error-messages | Fehlermeldungen */
  form.yform div.error {
    border: 1px #a00 dashed;
    background: #faf4f4;
    padding: 0.5em;
  }

  form.yform div.error label { color: #000; font-weight:bold; }
  form.yform div.error .message { color: #800; }

/* ============================= Footer ======================= */
footer {
    clear: both;
    background: #a91714;
    color: #fff;
    padding: 40px 20px;
    text-align: center;
    font-size: 1.1em;
}
footer a {
    text-decoration: none;
    font-weight: normal;
    color: #fff;
}
footer a:hover, footer a:active {
    color: #ddd;
}
/* ============================ Responsive ====================== */
.mobile {
    display: none;
}
@media screen and (max-width: 962px) {
      header, #home header {
        height: 300px;
        background: url(bilder/header12.jpg) no-repeat 0 -100px;
        background-size: cover;
  }

      header img {
        max-width: 98%;
  }
  .kontaktbox {
    font-size: 1em;
  }
}
@media screen and (max-width: 768px) {
  header, #home header {
      height: 300px;
      background: url(bilder/header12.jpg) no-repeat 0 -60px;
      background-size: cover;
  }
  .kontaktbox {
    font-size: 0.8em;
    padding: 4px;
  }

}
@media screen and (max-width: 600px) {
  header, #home header {
        height: 250px;
        background: url(bilder/header12.jpg) no-repeat 0 -30px;
        background-size: cover;
    }
  .kontaktbox {
    font-size: 1em;
    padding: 12px;
  }
  .kontaktbox table, .kontaktbox tbody, .kontaktbox th, .kontaktbox td, .kontaktbox tr { 
    display: block; 
  }
  
  .kontaktbox tr { 
    border: 1px solid #aaa; 
  }
  
  .kontaktbox td { 
    /* Behave  like a "row" */
    border: none;
    border-bottom: 1px solid #eee; 
    position: relative;
    padding: 8px 12px;
    width: auto;
  }
  .kontaktbox td:nth-of-type(1) { 
    background: #eee;
  }
}
@media screen and (max-width: 480px) {
  header, #home header {
                height: 200px;
                background: url(bilder/header12.jpg) no-repeat 0 0;
                background-size: cover;
            }
}
@media screen and (max-width: 600px) {

            .mobile {
                display: block;
            }
            .desktop {
                display: none;
            }

            article {
                margin-left: 0;
                padding: 1em 0;
            }
            form.yform .type-text input,
            form.yform .type-text textarea {
                width: 90%;
          }
}

@media print {
    nav, img, aside, header {
        display: none;
    }

    article {
        margin-left: 0;
        width: 90%;
    }
}