html {padding: 0 2%;}

body {
     display: -webkit-flex;
     display: flex;
     -webkit-flex-flow: row wrap;
     flex-flow: row wrap;
     flex-wrap: wrap;
     margin: 0px auto;
     max-width: 54em;            /* 800px Gesamtbreite der Website */
     font-family: verdana;
     font-size: 0.9em;
     line-height: 1.3em;
     color: #4C4C4C;
padding: 5px 0px 0px 0px;

}

main {
     display: flex;
}

.links {
flex: 0 0 auto;
width:48%;
padding: 0 4px;
}

.rechts {
flex: 0 0 auto;
width:48%;
padding: 0 4px;
}

/* === FONTS =============================*/
a {
     text-decoration: none;
     color: red;
}

a:hover{
     color: red;               /* textfarbe hover menü */
     font-weight:bold;
}

h1 {
     font-size: 2em;
     font-weight:bold;
     line-height: 1em;
     color: #EEEEEE;
}

h2 {
     font-size: 1.4em;
     font-weight:bold;
     line-height: 1em;
     color: #EEEEEE;
}

h3 {
     font-size: 0.9 em;
     font-weight:bold;
     line-height: 1em;
}

h4 {
     font-size: 0.9 em;
     font-weight:bold;
     line-height: 1em;
     margin-top: 8px;
     margin-bottom: 5px;
}

.red {
        color: red;
}

p.mini {
     font-size: 0.6em;
     line-height: 0.4em;
}

/* --- GRAFIKEN --------------------------- */
figure {
     margin: 0px;
     padding: 0px;
}

.quer {
     position: relative;
     width: 97%;
     margin: 0px;
     padding: 0px 0px 0px 0px;
}

.einzel {
     position: relative;
     display: inline-block;
     width: 95%;
     margin: 5px;
     padding-left: 5px;
}

.doppel {
     position: relative;
     display: inline-block;
     width: 44%;
     margin: 6px;
     padding-left: 5px;
     vertical-align:top;
}

.intro {
     display: flex;
     flex-flow: row;
     display: inline-block;
     width: 18%;
     margin: 0 0;
     vertical-align:top;
}

.mittig { text-align:center;}

.logos {
     display: flex;
     flex-flow: row wrap;
     width: 100%;
     margin: 5px;
     padding-left: 5px;
}

.branding {
     width: 32%;
     margin: 1px;
}

figure img {
     display: block;
     width: 100%;
}

/* ==============FORMULARE ============================= */

form {
     display: flex;
     flex-flow: column;
     padding: 3px 0px;
     margin: 3px 0px;
     background-color: #e7e7e7;
}

input, textarea {
     padding: 1px 2px;
     color:blue;
     background-color: #fffbf0;
     border: 1px solid #e7c157;
     margin: 2px 2px;
     font-family: verdana;
     font-size: 1em;
     line-height: 1.2em;
}

button {
     cursor: pointer; /* Mauszeiger wird zur Hand */
     padding: 2px 1px;
     margin: 2px 2px;
}

.janein { font-size:1em; color:blue;}
.pflicht { font-size:12px; line-height: 1px; color:blue;}

/* --- SPIEGELPUNKTE---------------------------- */
ul {
     margin-left: 6px; /* Für den IE */
     padding-left: 6px; /* Für alle anderen Browser */
}

li {
     margin-bottom: 3px;
}
/* ---=========== Smart Phones und Tablets ========---*/

@media all and (max-width: 35em) {

.links {
     margin:0 auto;
     width: 98%; /* wenn einspaltig */
     order: 1;
}

.rechts {
     margin:0 auto;
     width: 98%; /* wenn einspaltig */
     order: 2;
}

.einzel {
     display: inline-block;
     width: 90%;
}

.doppel {
     display: inline-block;
     width: 90%;
}

figure img {
     width: 100%;
}

form {
width: 95%;
}

.logos {
display: flex;
flex-flow: row wrap;
width: 90%;
}
.branding {
width: 30%;
height: 25%;
margin: 2px;
}
}

   /*  border: 1px solid red; */