look.css

    
    


    














body {
    
    margin: auto auto;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
    max-width: 80rem;
    min-width: 22rem;
    
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;

    }

header section footer {
    order: 0;
    flex: 1 1 auto;
    align-self: stretch;
    }








    /* Hintergrundfarbe und allgemeine schrift */
    
    body {
        font-family: Helvetica, sans-serif;
        background-color: #E8E8E8; /* seite hintergrund */
        max-width: 1vw;
    }
    
    
    /* Kantenstil und Distanzen fuer alle relevanten elemente */
    
    header
    {    
        margin-top:    0.0rem; 
        margin-bottom: 0.3125rem; 
        margin-left:   0.0rem; 
        margin-right:  0.0rem; 
        
        border-width: 0.125rem; 
        border-style: solid;
        
        padding: 0rem; 

        background: #FFFFFF; /* background: #FFDDC9; header hintergrund */
        border-color: #31D1F1; /* #FF6F1B header kante */

        border-radius: 1em
        
    }
    
    section
    {    
        
        margin-top:    0.3125rem;
        margin-bottom: 0.3125rem;
        margin-left:   0.0rem;
        margin-right:  0.0rem;
        
        padding-top:    2.5rem; 
        padding-bottom: 2.5rem; 
        padding-left:   3.85rem; 
        padding-right:  3.85rem; 
        
        background: #FFFFFF; /* section hintergrund - #F8F8F8*/
        border-color: #25AAA0; /* section kante */

        border-radius: 1em

    }

    section {
        flex: 1 100%;
    
        /* flex: 3 1 0%; */
        flex-grow: 3;
        flex-shrink: 1;
        flex-basis: 0;
    }
    
    
    
    
@media all and (max-width: 70rem) {
    
    section {

        padding-top:    1rem; 
        padding-bottom: 1rem; 
        padding-left:   2rem; 
        padding-right:  2rem;
        
    }

}


    
    footer
    {    
        margin-top:    0.3125rem;
        margin-bottom: 0.0rem; 
        margin-left:   0.0rem; 
        margin-right:  0.0rem; 

        padding-top:    0.625rem; 
        padding-bottom: 0.625rem; 
        padding-left:   1.925rem;
        padding-right:  1.925rem;

        background: #BDFFFC; /* footer hintergrund */
        border-color: #25AAA0; /* footer kante */    

        border-radius: 1em;

        text-align: right;
    }

    
    
    
    /* Navigationsleiste */
    
    nav
    {    
        margin: 0rem;
        padding: 0rem;
    
        border-radius: 0rem 1.5rem 0.0rem;
        border-width: 0.0rem;
        border-style: solid;
        border-style: none;
    }
    
    nav ul {
        margin: 0rem;
        padding: 0rem;
        overflow: hidden;
        /*padding-left:  30px;
        padding-right: 30px;*/
        
        /*border-style: solid;*/
    
    }
    
    nav li {
        padding: 0rem 0rem 0rem 0rem;
        margin: 0rem;
        list-style-type: none;
        text-align: center;
        /* float: left ist eine schlechte Idee */
        
        border-style: none;
        border-color: #BDFFFC;
    }


    nav ul {
        list-style-type: none;
        flex-wrap: nowrap;
        justify-content: space-around;
        display: flex;
        flex: 1 1 100%;
        
        
    }
        
    nav ul {
        flex-direction: row;
    }

@media all and (max-width: 50em) {
    
    nav ul {
        flex-direction: column;
    }

}





/* https://stackoverflow.com/questions/28417056/how-to-target-only-ie-any-version-within-a-stylesheet */
/* https://msdn.microsoft.com/en-us/library/hh771830(v=vs.85).aspx */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: black-on-white), (-ms-high-contrast: white-on-black), (-ms-high-contrast: active) {
     
    nav ul {
        
        flex-direction: row;
        
    }
    
}


    nav li {
        list-style-type: none;
        flex: 1 1 auto;
        display: inline;
    }






    
    nav a
    {    
        padding-left: 3.2rem; /* 50px; */
        padding-right: 3.2rem; /* 50px; */
        padding-top: 1.28rem; /* 20px; */ 
        padding-bottom: 1.28rem; /* 20px; */ 
        margin: 0rem;
        display: block;
    
        background: #FFFFFF; /* #FFDDC9; navigationsanker hintergrund */
        
        border-radius: 0rem 0rem 0.0rem;
        border-width: 0rem;
        border-style: solid;
        border-color: #BDFFFC; /* FF6F1B navigationsanker kante */
        text-align: center;
        text-decoration: none;
        font-size: 18pt;
    }

    nav a:hover {
        background-color: #BDFFFC; /* 76DEF3 FF6F1B navigationsanker hintergrund hover = navigationsanker kante */
        cursor: pointer;
    }

    nav a:link {
        color: black; /* #E50091; */
        text-decoration: none;
        cursor: pointer;
    }

    nav a:visited {
        color: black;/* #25aaa0; */
        text-decoration: none;
        cursor: pointer;
    }

    nav a:link:active, 
    nav a:visited:active {
        color: black;
        text-decoration: none;
        
    }
    
    
    
    
    
    a.tarnkappe {
      opacity: 0;
      color: white;
      font-size: 1pt;
    }
    
    

    
/*

@media all and (max-width: 60rem) {
    
    section img.hauptbild{
        max-width:35%;
        float: right;
    }

}

@media all and (max-width: 50rem) {

    section img.hauptbild{
        max-width:0%;
        float: none;
        visibility:hidden;
    }

}

*/