body              { max-width: 75em; font-family: sans-serif; font-size: 16px; color: #444444; }
header            { ;                                                       }
nav               { text-align: center;                                     }
picture           { ;                                                       }
aside             { text-align: left;   font-size:  80%; line-height: 26px; }
article           { text-align: left;   font-size: 100%; line-height: 26px; }
footer            { text-align: center; font-size:  80%;                    } 
figure            { ;                                                       }

a                 { text-decoration: none;      color: #01556A; }
a:hover           { text-decoration: underline; color: #01AAD3; }
h1                { color: #222222; font-size: 140%; font-weight: bold; line-height: 26px; margin-top: 1em; }
h2                { color: #222222; font-size: 120%; font-weight: bold; line-height: 26px; margin-top: 2em; }
ul                { margin-left: 15px; padding-left: 0px; } 
p                 { margin-bottom: 1em; }

.fontaact         { color: #01AAD3;                   }  
.fontgros         { text-transform: uppercase;        }
.zentriert        { text-align: center                }
.ulkeineAufz      { list-style-type: none;            }
.table100         { width: 100%;                      }
.td005            { width:   5%; vertical-align: top; }
.td010            { width:  10%; vertical-align: top; }
.td030            { width:  30%; vertical-align: top; }
.td060            { width:  60%; vertical-align: top; }
.img075auto       { width:  75%; height: auto;        }
.img100auto       { width: 100%; height: auto;        }

body              { padding:  0px; margin: 10px auto; }
header            { padding: 10px 100px 10px 100px; margin: 10px;  }   /* LOGO KLEINER */
nav               { padding:  0px; margin: 10px;      }
picture           { padding: 10px; margin: 10px;      }
aside             { padding: 20px; margin: 10px;      }
article           { padding: 20px; margin: 10px;      }
footer            { padding:  0px; margin: 10px;      }
figure            { padding: 10px; margin: 10px;      }
footer            { background: #eeeeee; }

/*** Ansicht Smartphone ***/
body              { display: grid; grid-template-columns: 100%; }
nav               { display: flex; flex-direction: column;      }	
footer            { display: flex; flex-direction: row;         }	
header            { grid-column: 1 / -1; }
nav               { grid-column: 1 / -1; }
picture           { grid-column: 1 / -1; }
aside             { grid-column: 1 / -1; }
article           { grid-column: 1 / -1; }
footer            { grid-column: 1 / -1; }

/*** Ansicht PC ***/
@media screen and (min-width: 44.001em) { 
body              { display: grid; grid-template-columns: minmax(15em, 20em) 1fr;                           } 
nav               { display: flex; flex-direction: row; justify-content: flex-end;   align-items: flex-end; }	
footer            { display: flex; flex-direction: row; justify-content: flex-start; align-items: center;   }	
header            { grid-column: 1 /  2; }
nav               { grid-column: 2 / -1; }
picture           { grid-column: 1 / -1; }
aside             { grid-column: 1 /  2; align-self: start; position: -webkit-sticky; position: sticky; top: 0;  }
article           { grid-column: 2 / -1; }
footer            { grid-column: 1 / -1; }
header            { padding: 10px; margin: 10px;      }   /* LOGO NORMAL */
}

/* DEBUG *
body              { background: #eeeeee; }
header            { background: #F1F3F4; }
nav               { background: #fffbf0; }
picture           { background: #3377bb; }
aside             { background: #ebf5d7; }
article           { background: #ffede0; }
footer            { background: #e4ebf2; }
figure            { background: #999999; }
* DEBUG */



/*body	          { display: grid; grid-template-columns: minmax(15em, 20em) auto; border: 1px solid; } */
/*body	          { display: grid; grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); border: 1px solid; }   */
/*body	          { display: grid; grid-template-columns: repeat(auto-fit, minmax(15em, 1fr)); border: 1px solid; }  */