/* alles was grün ist */

h2
{
    color:#474747;
    font-size:1.15em;
    
    }
    
h3
{
    color: #9dbd1c;
    font-size:1.0em;
    margin-top:3px;
    } 
    
p
{
    font-size:1.0em;
    line-height:1.4em;
    margin-bottom:1em;
    }  
    
a
{
    color: #000000;
    border-bottom: 1px solid #9dbd36;
    text-decoration: none;
    }  
    
a:hover
{
    border-bottom:0px;    
    }      
    
small
    {
    margin-bottom:1em; 
    display:block;      
        }
        
header#mainHeader .logo
{
    background-image:url('../Pix/Layout/Logo.png');
    background-repeat:no-repeat;
    background-size:100%;

    width:300px;
    height:254px;
    
    position:relative; 
    top:65px;
    left:-50px;
    
    border-bottom:0px;  
    } 
    
 @media (max-width: 1200px)  
{
    header#mainHeader .logo
    {
     left:20px;            
    }
}       
    
@media (max-width: 900px)  
{
    header#mainHeader .logo
    { 
        position:static;
        margin-top:70px;           
    }
}      

@media (max-width: 550px)  
{
    header#mainHeader .logo
    {
        width:200px;
        height:169px;     
    }
}    

header#mainHeader a.schnellWeg
{
    background-color: transparent;
    background-image:url('../Pix/Layout/SchnellWeg.png');
    background-repeat:no-repeat;
    background-size:100%;
    
    width:170px;

    height:104px;
    border:none;
    display:inline-block;
    outline:none;
    cursor:pointer;
    } 
     
    
@media (max-width: 1200px)  
{
    header#mainHeader a.schnellWeg
    {
        display:none;
    }
}
       
header#mainHeader a.schnellWeg:hover
{
    transform:rotate(-6deg);
    }    
 
    
article
 {
      padding: 14px 20px 15px 20px; /* Höhe definiert auch Position vom Headerpfeil */
     
     margin-bottom:40px;
     border:1px solid #9dbd1c;
     
     position:relative;
     }  
     
@media (max-width: 900px)  
{
     article
    {
       padding: 28px 20px 27px 20px;     
    }
}    
     
article article
{
    padding:0px;
    margin-bottom:0px;

    border:0px;
    }     
     
article header
 {    
     width:100%;
     position:absolute;
     top:-20px;
     left:-10px;
     
     display:flex;
     justify-content:space-between;
     } 
     
article header h1, article header h2
{
    padding:7px 15px 8px 15px;
    font-size:1.0em;
    color:#ffffff;
    background-color:#9dbd1c;
    }
     
article header .arrow-down
{
      width: 0; 
      height: 0; 
      border-left: 0px solid transparent;
      border-right: 24px solid transparent;
  
      border-top: 18px solid #9dbd1c;
      margin-left:15px;
}     
        

    
article p:nth-child(1), article h2:nth-child(1), aside h3:nth-child(2), article.epresto h2:nth-child(2), article.epresto h3:nth-child(2), article.epresto figure:nth-child(2), article article:nth-child(2)
{
    margin-top:15px;     
    }
    

    
article article p:nth-child(1)  
{
    margin-top:0px;  
    }

aside h2:nth-child(1)
{
    margin-top:0px;  
    }

article p.intro
{
    padding-top:15px;    
    }

#optionalField 
{
    /*display:flex;
    flex-direction:row;
    align-content:space-between;*/
    }

#optionalField img {
    max-width: 100px;
    max-height: 142px;
    margin-right: 2px;
    transform: rotate(-6deg);
    box-shadow: 4px 4px 8px silver;
    float: right;
}

#optionalField h3 {
    margin-top: 1em;
    margin-bottom: 1em;
}

#optionalField p {
    margin: 0px;
}
    
button.openSlider
    {
        background-color: transparent;
        background-image: url('../Pix/Layout/ButtonOpenAjax.svg');
        background-repeat: no-repeat;
        background-position: center;

        border: 0px;
        outline: 0px;
        float:right;
        
        cursor: pointer;

        width: 45px;
        height: 45px;

        display: block;
        transform: rotate(0deg);   
        
        transition: transform 0.2s;  
        }    
  
button.openSlider.open
{
    transform: rotate(45deg);  
    
    }
    
div.slider
{     
       overflow: hidden;
      
       transition: max-height 0.6s;
       transition: max-height 0.8s;
       transition-timing-function: linear;     
       
       max-height: 2.31em;
    }
    
div.slider h2
{
    margin-bottom:0.4em;
    
    } 
    
div.slider p
{
    margin-right:15px;
    }       
    

div.slider.open
{
       max-height:3500px;
       max-height:2000px;
      /* max-height:1200px; */
    }
    
    
.advices img {
    width: 122px;
    height: 120px;
    float: left;
    margin: 14px 0 0 48px;
    transform:rotate(50deg);
}  

.advices img:hover {
    transform:rotate(5deg);
}