* {
  box-sizing: border-box;
}  
  html{
  min-width:350px;
  background:rgba(250,250,255,1);
  margin:auto;
  }
  
  body {
  font-family:'roboto';
  font-size:16px;
  margin:auto;
  }
  
  main {  
  margin:auto;
  margin-top:85px; 
  padding:20px; 
  max-width:1200px;
  min-height:calc(100vh - 130px);
  background-image:url(sonne-logo.png)
  background-size:100%;
  background-position:50%;
  background-attachmant:fixed;
  }  
  
header {     
  position:fixed;
  top:0em;
  left:0em;    
  background:rgba(255,205,0,1);
  z-index:10; 
  border-bottom: 10px solid rgba(255,40,37,1);
  width:100%;
  margin:auto;  
  padding:0px;
  height:130px;		
  }
  
header div.titel{
  display:block;
  width:100%;
}

header div.titel a {
     color:rgba(0,71,206,1);
     margin:auto;
     font-size:22px;
     font-weight:700;
     text-align:center;
     text-decoration:none;
     display:block;
     padding:5px;
  width:100%;
     } 
       
header  div.titel a img{
  height:80px;
     margin:auto;
     text-align:center;
  
  }  

 
     
.balken1{background:rgba(0,71,206,1);
}

.balken1 p{color:rgb(255,255,255);
text-align:center;
margin:auto;
padding:5px;
}

  h1{
     color:rgb(0,71,206);
     font-size:1.5em;
     margin:1em auto;
     font-weight:400;
     text-align:center;
     width:100%
     }
       
  h2{
     color:rgb(0,71,206);
     font-size:1.5em;
     margin:1em auto;
     font-weight:400;
     text-align:center;
     flex-basis:100;
     }
     
  p{
     color:rgb(0,0,0);
     font-size:1em;
     margin:auto;
     font-weight:400;
     padding:1em;
     width:100%
     }
     
footer {     
 
  background:rgba(0,71,206,1);
  border-top: 10px solid rgba(255,40,37,1);
  width:100%;
  margin:auto;  
  padding:10px;	
  }
  
  footer a, footer h2{     
 color:white;
 text-align:left;
 text-decoration:none;
  }
  
  footer a:hover{     
 text-decoration:underline;
  }

     
  a{color:rgb(0,71,206);
     font-size:1em;
     margin:0.5em auto;
     font-weight:400;
     text-align:left;
     display:block;}
           
section.aktuelles{
 margin:auto;
 width:100%;
 display:flex;
 flex-wrap: wrap;
 gap:20px;
 }
 
 section.aktuelles a{
 padding:0px;
 flex-basis: 100%;
 flex-grow: 1;
 flex-shrink: 1;
 text-decoration:none;
 
 }
 
 section.aktuelles a article{
 display:flex;align-items: flex-end;
 align-content: flex-end;padding:0px;
 background-size:100%;
 }
 
 section.aktuelles a:hover article{
 background-size:140%;
 transition: 0.5s; }
 
 section.aktuelles article h2{
 background:rgba(30,130,190,0.9);
 color:rgb(255,255,255);
 width:100%;
 font-size:1.5em;
 text-align:center;
 padding:0.25em;
 height:auto;
 font-weight:700;
 margin:auto auto 0px auto;
 }
 
article{
    align-content: center;
    display:block;
    justify-content: center;
    align-content: center;
    align-items: anchor-center;
    width:100%;
    background:rgb(255,255,255);
    border-radius:1em;
    overflow:hidden;
}

article img{
     width:100%;
     margin:auto;
     }

article.termine{
     background:rgba(255,255,255,0);
     padding:0px;

     }
     
article.termine h2{
     color:rgba(55,55,55,1);
     font-weight:400;
     }
    
article.termine section{
     background:rgba(0,71,206,1);
     margin:0px auto 10px auto;
     padding:20px;
     border-radius:1em;
     
}    

article.termine section p{
     color:rgba(255,255,255,1);
     margin:auto;
     padding:5px;
     font-weight:500;
     font-size:20px;
     text-align:center;
}    

article.termine section p:first-of-type{
     color:rgba(255,255,255,1);
     font-weight:700;
     font-size:25px;
}    

article.termine section section.info{
    background:rgb(255,255,255);
    color:rgb(0,0,0);
    padding:1em;
    }
    
article.termine section section.info p{
    margin:auto;
    color:rgb(0,0,0);
    text-align:center;
    }

.prinz{
    background-image:url("bilder/ABV-Prinz-2020.jpg");
    background-size:cover;
    background-position:center center;
    margin:auto;
    height:70vw;
    padding:0px;
    flex-basis:100%;
    display:flex;align-items: flex-end;
    align-content: flex-end;}
    
.prinz section{
    background:rgba(255,255,255,0.9);
    color:rgb(30,130,190);
    width:100%;
    font-size:1.5em;
    text-align:center;
    padding:0.2em;
    height:2.5em;
    font-weight:700;
    }

    nav.topmenu { 
    height: auto; 
    max-height:0; 
    overflow: hidden; 
    transition: all 0.5s;
    background: rgba(255,40,37,1);
    color:rgb(255,255,255);
    list-style:none;
    margin:5px auto auto auto;
    width:100%
    }
    
nav.topmenu ul{ 
    list-style:none;
    margin:auto;
    padding:20px;
    
    }
    
nav.topmenu ul li{ 
    margin:auto;
    padding:0px;
    }
    
nav.topmenu ul li a{ 
    color:rgba(255,255,255,1);
    margin:auto;
    padding:10px;
    text-decoration:none;
    font-size:25px;
    display:block;
    width:100%;
    border-bottom:rgba(255,255,255,1);
    }
    .social{
    margin:auto;
    text-align:center;
    margin-bottom:20px;
    }
    
    .social a{
    display:inline-block;
    width:76px;
    height:76px;
    border:3px solid rgb(255,255,255);
    padding:3px;
    border-radius:50px;
    margin:auto;
    }
    
    .social a:hover{
    background:rgba(0,71,206,1);
    }
    
    .social a img{
    width:60px;
    height:60px;
    }
    
    #hamburg:checked + .hamburg  + nav.topmenu { 
    max-height: 600px; 
    }

    label.hamburg { 
    
    background: rgba(255,255,255,0);
    width: 80px; 
    height: 80px;
    top:30px;
    right:20px;     
    position: absolute; 
    border-radius: 4px; 
    }
    
    input#hamburg {display:none}
    
    .line { 
    position: absolute; 
    left:5px;
    height: 8px; width: 70px; 
    background:rgba(0,71,206,1); border-radius: 2px;
    display: block; 
    transition: 0.5s; 
    transform-origin: center; 
    }
    

    .line:nth-child(1) { top: 20px; }
    .line:nth-child(2) { top: 40px; }
    .line:nth-child(3) { top: 60px; }    

    
    #hamburg:checked + .hamburg .line:nth-child(1){
    transform: translateY(20px) rotate(-45deg);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2){
    opacity:0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3){
    transform: translateY(-20px) rotate(45deg);
    }
    
    .halbeseite{
 display:block;
 width:100%;;
 padding:1em;}
 
 ul.internelinks{
 list-style:none;
 margin:auto;
 padding:0px
 }
 
 ul.internelinks li a{
 border:rgb(0,71,206) 3px solid;
 border-radius:2em;
 background:rgb(0,71,206);
 color:rgb(255,255,255);
 padding:10px;
 text-decoration:none;
 }
 
 ul.internelinks li a:hover{
 border:rgba(255,40,37,1) 3px solid;
 background:rgba(255,40,37,1);
 }
 
    .vorstand{
   
   }
   .vorstand section{
		display: block;
        background: rgba(0, 71, 206, 1);
        border-radius: 1em;
        margin: 1em auto;
        padding: 1em;
   }
   
    .vorstand section h2{ 
        text-align:center;
        color:rgb(255,255,255);
        width:100%;
   }  
   .vorstand section div{
        background: rgb(255, 255, 255);
        border-radius: 1em;
        padding: 1em;
        width:100%;
        margin-bottom:1em
   }   

   .vorstand section div:last-of-type{
        margin-bottom:auto;
   }   

    article.prinz-index {
        border-radius: 1em;
        Flex: 1 0 45%;
        min-height: 500px;
        position:relative;
        align-content: end;}
      
      
    article.prinz-index section{
        display:block;
        width:100%;
        border-radius:0em 0em 16px 16px;
        position:absolute;
        bottom:0px;
        left:0px;
        background:rgba(255,210,0,0.7);
        font-size:1.5em;
        font-weight:600;
        color:rgb(0,71,206);
        text-align:center;
        padding:0.5em;
    }
 
   
 @media (min-width: 700px) {
 
    header {     
        height:130px;		
        padding:0px;
    }
 
  
    label.hamburg {     
        width: 80px; height: 80px;
        top:30px;
        right:20px;
    }

    .line { 
        left:5px;
        height: 8px; width: 70px;     
        }
        
    .line:nth-child(1) { top: 20px; }
    .line:nth-child(2) { top: 40px; }
    .line:nth-child(3) { top: 60px; }
    
    #hamburg:checked + .hamburg .line:nth-child(1){
        transform: translateY(20px) rotate(-45deg);
    }
    
    #hamburg:checked + .hamburg .line:nth-child(2){
        opacity:0;
    }
    
    #hamburg:checked + .hamburg .line:nth-child(3){
        transform: translateY(-20px) rotate(45deg);
    }
    
    nav.topmenu { 
        margin:0px auto auto auto;
    }
   
    main {
        margin-top: 140px;
        display: flex;
        flex-wrap: wrap;
        min-height: calc(100vh - 130px);
        gap: 1em;
    }
 
    section.aktuelles a{
        flex-basis: 40%;
    }
 
    article{
        align-content: center;
        justify-content: center;
        align-content: center;
        align-items: anchor-center;
        flex: 1 0 45%;
    }

    article.termine {
        flex: 1 0 20%;
        align-content: start;
        align-items: anchor-center;
    }
 
    article.prinz-index {
        border-radius: 1em;
        position: relative;
        flex: 1 0 62%;
    }

 
    article.prinz-index section{
        display:block;
        width:100%;
        border-radius:0em 0em 16px 16px;
        position:absolute;
        bottom:0px;
        left:0px;
        background:rgba(255,210,0,0.7);
        font-size:1.5em;
        font-weight:600;
        color:rgb(0,71,206);
        text-align:center;
        padding:0.5em;
    }
 
 
    article.termine section{
        flex-grow: 1;
        flex-shrink: 1;
        }
 
 
    .prinz{width:100%;
        height:600px;
    }
 
   .vorstand{
   
   }
   
   .vorstand section{
		display: flex;
        flex-wrap: wrap;
        background: rgba(0, 71, 206, 1);
        border-radius: 1em;
        margin: 1em auto;
        padding: 1em;
        gap: 1em;
   }
   
    .vorstand section h2{ 
        flex:1 0 100%; 
        text-align:center;
        color:rgb(255,255,255)
    }  
    
   .vorstand section div{
        flex: 1 0;
        background: rgb(255, 255, 255);
        border-radius: 1em;
        padding: 1em;
    }   
   
    .vorstand section div:last-of-type{
        margin-bottom:auto;
    }   
   
    .halbeseite{
        display:inline-block;
        width:48%;}


}