* {
  box-sizing: border-box;
}  
  html{
  min-width:350px;
  margin:auto;
  }
  
  body {
  font-family:'roboto';
  font-size:16px;
  margin:auto;
  background:rgb(255,255,255);
  }
  
  main {  
  margin:auto;
  margin-top:110px; 
  min-height:80vh;
  }  
  
header {     
  position:fixed;
  top:0em;
  left:0em;    
  background:rgba(255,255,255,1);
  z-index:10; 
  border-bottom: 10px solid rgba(0,0,150,1);
  width:100%;
  margin:auto;  
  padding:10px;
  height:100px;		
  }
  
header section{
  display:inline-block;
  height:80px;
  align-content:center;
}
header section img{
  width:auto;
  max-width:75%;
  max-height:60px;
  }  

header section a.titel {
     color:rgba(30,30,250,1);
     margin:6px;
     font-size:22px;
     font-weight:700;
     text-align:left;
     text-decoration:none;
     display:inline-block;
     }   
    
h1{
     color:rgb(50,50,50);
     font-size:1.5em;
     margin:1em auto;
     font-weight:400;
     text-align:left;
     flex-basis:100;
     text-align:center;
     font-family: 'Mouse Memoirs';   
     }

h1.fuervereine{
    display: block;
    font-size: 1.25em;
    color: rgb(255, 155, 0);
    margin: auto;
    position: absolute;
    top: 55px;
    left: 230px;
    text-shadow: -2px -2px 0 rgb(50, 50, 50), 
      			  2px -2px 0 rgb(50, 50, 50), 
                 -2px  2px 0 rgb(50, 50, 50), 
                  2px  2px 0 rgb(50, 50, 50), 
                 -2px  0px 0 rgb(50, 50, 50), 
                  2px  0px 0 rgb(50, 50, 50), 
                  0px -2px 0 rgb(50, 50, 50), 
                  0px  2px 0 rgb(50, 50, 50);}

h2{
     color:rgb(50,50,50);
     font-size:1.25em;
     margin:1em auto;
     font-weight:400;
     text-align:left;
     flex-basis:100;
     text-align:center;
     }
     
p{
     color:rgb(50,50,50);
     font-size:1em;
     margin:1em auto;
     font-weight:400;
     text-align:left;
     }
     
     footer {
     background:rgba(255,255,255,1);
     margin:auto auto;
     padding:10px;
     text-align:left;
     display:block;
     border-top: 10px solid rgba(255,155,0,1);
     }   
     
     footer h2{
     text-align:left;padding:10px;
     }
     
     footer a{
     color:rgba(55,55,55,1);
     text-decoration:none;
     padding:10px;
     display:block;
     }
     
     footer a:hover{
     text-decoration:underline;
     }
     

     
section{
     margin: 0px auto 0px auto;
     width:100%;
}

article{
     margin: 0px auto 10px auto;
     padding:30px;
     width:100%; 
     max-width:1200px;     
}

article.prinzen {
    display:block;
    background:url('stadtorden23.png'),
               rgba(255,255,255,0.8);    
    background-blend-mode:screen;     
    background-size:cover;
    background-position:center;
}
     
article.inhalt{
     background:rgba(255,255,255,1);
     margin: 0px auto 0px auto;
     padding:10px;
     display:block;
     width:100%;
}

article.inhalt div{
     width:100%;
     }
     

     
article img{
     width:100%;
     margin:auto;
     }
     
article.verein{
     background:rgba(255,255,255,1);
     margin: 0px auto 10px auto;
     padding:10px;
     display:block;
     width:100%;
}

article.verein div{
    padding:15px}

article.verein div:first-of-type{
    width:100%;
    display: block;
    flex-flow:row wrap;
    align-items: center;
    justify-content: center;
    text-align:center;  
    border-bottom:5px solid rgb(255,155,0)
     }

article.verein div:first-of-type img{
     width:150px;
     margin:auto;
     }
     
article.verein div:first-of-type p{
     margin:auto;
     vertical-align:middle;
     text-align:center     
     }
     
article.verein div:last-of-type{
    width:100%;
    background:rgb(255,245,240);
    padding:30px;
    }

article.verein div:last-of-type img{
     height:150px;
     width:auto;
     margin:auto;
     }
     
article.verein div:last-of-type h1{
     margin:auto;
     display:inline-block;
     vertical-align:middle;
     }

article.verein a{
    text-decoration:none;
    color:rgb(55,55,55);}


div.veranstaltung{
    display:block;}
    
div.veranstaltung div{
    display:block;
    padding:10px;}
    
div.veranstaltung div p, div.veranstaltung div h1{
    text-align:center;}


     
section.jubi{
     background:rgb(255,155,0);
     }
     
section.jubi article{
     display:block;
     margin:auto;
     text-align:center;
     }

section.jubi article img{
     max-width:350px;
     border-radius:200px;
     }
     
section.jubi article h1{
     font-size:6em;
     line-height:0.5em;
     color:rgb(255,255,255);
     }
     
section.jubi article h1 span{
     font-size:0.44em;
     }

section.lieder{
     background:rgb(255,255,255);
}

section.lieder article{
     }

section.lieder a{
     color:rgb(50,50,50);
     font-size:1em;
     margin:1em auto;
     font-weight:400;
     text-align:left;
     display:block;
     }  
     
section.lieder a:hover{
     color:rgb(255,155,0);
     }

nav.topmenu { 
    height: auto; 
    max-height:0; 
    overflow: hidden; 
    transition: all 0.5s;
    background:rgba(30,30,250,1);
    color:rgb(30,30,250);
    list-style:none;
    margin:10px auto auto auto;
    width:100%;
  	padding:0em;
    }
    
nav.topmenu ul{ 
    list-style:none;
    margin:auto;
    padding:0 20px;
    margin: auto;
    display:flex;
    flex-flow: row wrap;  
    }
    
nav.topmenu ul li{ 
    margin:auto;
    padding:10px;
    flex-grow: 1;
    flex-basis: 100%;
    }
    
nav.topmenu ul li a{ 
    color:rgba(255,255,255,1);
    margin:auto;
    padding:10px;
    text-decoration:none;
    font-size:20px;
    display:block;
    width:100%;
    border-bottom:rgba(255,255,255,1);
    }
    
nav.topmenutest { 
    height: auto; 
    transition: all 0.5s;
    background:rgba(30,30,250,1);
    color:rgb(30,30,250);
    list-style:none;
    margin:10px auto auto auto;
    width:100%
    }
    
nav.topmenutest ul{ 
    list-style:none;
    margin:auto;
    padding:20px;
    display:flex;
    flex-flow: row wrap;  
    }
    
nav.topmenutest ul li{ 
    margin:auto;
    padding:0px;
    flex-grow: 1;
    flex-basis: 100%;
    }
    
nav.topmenutest ul li a{ 
    color:rgba(255,255,255,1);
    margin:auto;
    padding:10px;
    text-decoration:none;
    font-size:20px;
    display:block;
    width:100%;
    border-bottom:rgba(255,255,255,1);
    }    
#hamburg:checked + .hamburg  + nav.topmenu { 
    max-height: 600px; 
    }
    
label.hamburg { 
    
    background: rgb(255,255,255); width: 50px; height: 50px; 
    position: absolute; 
    top:20px;
    right:20px;
    border-radius: 4px; 
    }
    
input#hamburg {display:none}
    
.line { 
    position: absolute; 
    left:5px;
    height: 5px; width: 50px; 
    background: rgb(0,0,150); border-radius: 2px;
    display: block; 
    transition: 0.5s; 
    transform-origin: center; 
    }
    
.line:nth-child(1) { top: 10px; }
.line:nth-child(2) { top: 25px; }
.line:nth-child(3) { top: 40px; }
    
#hamburg:checked + .hamburg .line:nth-child(1){
    transform: translateY(15px) rotate(-45deg);
    }
    
#hamburg:checked + .hamburg .line:nth-child(2){
    opacity:0;
    }
    
#hamburg:checked + .hamburg .line:nth-child(3){
    transform: translateY(-15px) rotate(45deg);
    }
    
#sp{
    padding:10px 0px;
    background:rgb(0,0,255,0);
    display:flex;     
    flex-flow: row wrap;  
    width:100%; align-self: center;
    justify-content: center;
    align-items: center;
    }

#sp > *{
    animation:fadein 0.5s;-moz-animation:fadein 1.0s;-webkit-animation:fadein 0.5s;
    } 
    
a.sp {
    text-align:center;
    margin:10px;
    padding:0px;
    background:rgba(255,255,255,1); 
    width:20vw;
    justify-content: center;
    align-items: center;
    border:rgb(255,255,255) 5px solid;
    box-shadow:0px 0px 1px 0px rgba(55,55,55,1);
    }
    
a.sp:hover {   
    text-decoration:none;
    transition: all 0.3s linear;
    box-shadow:0px 0px 2px 0px rgba(250,155,0,1);
    }

a.sp section{
    width:100%;
    height:calc(20vw * 1.33);background-position: center; 
    } 
    
a.sp img{
    width:100%
    text-align:center;
    margin:auto;
    display:block;
    }
        
a.sp h1 img{
    width:20px;
    vertical-align:middle;
    }

a.sp p{
      color:rgba(50,50,50,1);
      padding:0px;
      margin:0px;
      text-align:center;
      }

a.sp p.gesellschaft{
      color:rgba(50,50,50,1);
      font-size:0.8em;
      display:none;
      } 

a.sp p.prinz{
      color:rgba(50,50,230,1);
      font-size:1.1em;
      font-weight:500;
      display:none;
      }
      
a.sp p.mundschenk{
      color:rgba(50,50,50,1);
      display:none;
      }
             
#gs {
    padding:10px 0px;
    background:rgb(0,255,0,0);
    display:flex;     
    flex-flow: row wrap;  
    width:100%;
    text-align:center;align-self: center;
    justify-content: center;
    align-items: center;
    }

#gs > *{
    animation:fadein 0.5s;-moz-animation:fadein 1.0s;-webkit-animation:fadein 0.5s;
    } 

a.gs {
    text-align:center;
    margin:10px 5px;
    padding:0px;
    background:rgba(255,255,255,1); 
    width:15vw;
    justify-content: center;
    align-items: center;
    border:rgb(255,255,255) 5px solid;
    box-shadow:0px 0px 1px 0px rgba(55,55,55,1);
    }
  
a.gs:hover {   
    text-decoration:none;
    transition: all 0.3s linear;
    box-shadow:0px 0px 2px 0px rgba(250,155,0,1);
    }
    
a.gs section{
    width:100%;
    height:calc(15vw * 1.33);background-position: center; 
    } 
    
a.gs img{
    width:100%
    text-align:center;
    margin:auto;
    display:block;
    }
        
a.gs h1 img{
    width:20px;
    vertical-align:middle;
    }

a.gs p{
      color:rgba(50,50,50,1);
      padding:0px;
      margin:0px;
      text-align:center;
      }

a.gs p.gesellschaft{
      color:rgba(50,50,50,1);
      font-size:0.8em;
      display:none;
      } 

a.gs p.prinz{
      color:rgba(50,50,230,1);
      font-size:1.1em;
      font-weight:500;;
      display:none;
      }
      
 a.gs p.mundschenk{
      color:rgba(50,50,50,1);
      display:none;
      }
      
#kipi {
    padding:10px 0px;
    background:rgb(0,255,0,0);
    display:flex;     
    flex-flow: row wrap;  
    width:100%;
    text-align:center;align-self: center;
    justify-content: center;
    align-items: center;
    }

#kipi > *{
    animation:fadein 0.5s;-moz-animation:fadein 1.0s;-webkit-animation:fadein 0.5s;
    } 

a.kipi {
    text-align:center;
    margin:10px;
    padding:0px;
    background:rgba(255,255,255,1); 
    width:15vw;
    justify-content: center;
    align-items: center;
    border:rgb(255,255,255) 5px solid;
    box-shadow:0px 0px 1px 0px rgba(55,55,55,1);
    }
    
a.kipi:hover {   
    text-decoration:none;
    transition: all 0.3s linear;    
    box-shadow:0px 0px 2px 0px rgba(250,155,0,1);
    }
    
a.kipi section{
    width:100%;
    height:calc(15vw * 1.33);background-position: center; 
    } 
    
a.kipi img{
    width:100%
    text-align:center;
    margin:auto;
    display:block;
    }
        
a.kipi h1 img{
    width:20px;
    vertical-align:middle;
    }

a.kipi p{
      color:rgba(50,50,50,1);
      padding:0px;
      margin:0px;
      text-align:center;
      }

a.kipi p.gesellschaft{
      color:rgba(50,50,50,1);
      font-size:0.8em;
      display:none;
      } 

a.kipi p.prinz{
      color:rgba(50,50,230,1);
      font-size:1.1em;
      font-weight:500;;
      display:none;
      }
      
 a.kipi p.mundschenk{
      color:rgba(50,50,50,1);
      display:none;
      }
      
    
#gezwitscher{
    padding:10px;     
    display:flex;     
    flex-flow: row wrap;
    width:100%;
    gap:10px;
    background:rgba(0,0,155,0);
    }

#gezwitscher > *{
    animation:fadein 0.5s;-moz-animation:fadein 1.0s;-webkit-animation:fadein 0.5s;
    } 

a.gezwitscher {
    text-align:center;
    margin:auto;
    padding:10px;
    background:rgba(0,0,155,0); 
    flex-grow: 1;
    flex-basis: 100%;
    text-decoration:none;    
    }
    
a.gezwitscher p{
    text-align:center;
    margin-bottom:0.5em;
    color:rgb(50,50,50);display:none;
    }
    
a.gezwitscher:hover{   
    text-decoration:none;
    transition: all 0.3s linear;
    padding:5px;
    background:rgba(0,0,155,0);
    }
    
a.gezwitscher:hover p{   
    transition: all 0.3s linear;
    color:rgb(255,255,255);
    }
  
a.gezwitscher img{
    width:100%
    text-align:center;
    margin:auto;
    margin-bottom:-5px;
    }

.social{
    margin:10px;
    padding:10px;   
    }
    
.social a{ 
    height:40px; 
    width:40px; 
    display:inline-block; 
    margin: 0px 5px;
    border-radius:40px;
    background:rgb(255,255,255);
    }
        
.social a img{
    height:30px; 
    margin:5px; 
    width:auto; 
    filter:brightness(0%);
    }
    
div.prinzenmenu, div.liedermenu{
   display:block;
   width:100%;
   text-align:center;
   margin:auto;
   padding:0;
   }

div.prinzenmenu a, div.liedermenu a{
    color:rgb(50,50,50);
    font-size:1.2em;
    padding:0.2em 0.2em;    
    margin:auto;
    display:inline-block;
    font-weight:400;
    text-align:center;
    font-family: 'Mouse Memoirs';
    }  
    
div.prinzenmenu a:hover, div.liedermenu a:hover{
    color:rgb(255,255,255);
    background:rgb(0,0,155);    
    }    


 ul.untermenu{
     width:100%;
     margin:10px 0;
     padding:10px;
     display:block;
     text-align:center
     
 }
    ul.untermenu li {
        list-style:none;
        display:block;
        padding:5px 1em;
    }
    ul.untermenu li a{
        color:rgb(55,55,55);
        text-decoration:underline;
    }

input.inputschmal, textarea.inputschmal {
    border: 1px solid rgba(150, 150, 150, 1);
    border-radius: 3px;
    background: rgba(250, 250, 250, 1);
    padding: 0.5em;
    margin: 0.5em auto;
  width: 200px;}

input.inputschmal:active, textarea.inputschmal:active {
    border: 1px solid rgba(255, 155, 0, 1);
    background: rgba(255, 240, 230, 1);
    }

input.inputschmal:focus, textarea.inputschmal:focus {
    border: 1px solid rgba(255, 155, 0, 1);
    background: rgba(255, 240, 230, 1);
    }


.knopf{margin: 0.5em auto;
    font-size:14px;
    text-align: center;
    display: block;
    background: rgb(0, 0, 155);
    padding: 0.5em 1em;
    color: white;
    border: none;
    border-radius: 1em;
    width: 200px;
    text-decoration:none;
}

.knopf:hover, .knopf:focus{
    background: rgb(255, 155, 0);
    color: rgb(55,55,55);
}

input::file-selector-button {
	margin: 0.5em auto;
    font-size:14px;
    text-align: center;
    display: inline-block;
    background: rgb(0, 0, 155);
    border:5px solid rgb(242,242,242);
    padding: 0.5em 1em;
    color: white;
    border: none;
    border-radius: 1em;
    width: auto;
    text-decoration:none;
}

.inputdateiauswahl{
    margin: auto;
    background: rgb(242, 242, 242);
    width: 100%;
    color: rgb(0, 0, 0);
    padding: 1em;
	}

 @media (min-width: 700px) {

body {
    font-size:20px}

header {     
 height:140px;		
 padding:20px;
 }

header section{
  height:100px;
   }

header section a.titel {
    margin: 5px;
}
   
header section img{
 height:80px;
 width:auto;
  max-width:none;
  max-height:none;
 }
   
h1.fuervereine{
    font-size:2em;
    top: 80px;
    left: 420px;
    text-shadow:
                -2px -2px 0 rgb(50,50,50),
                 2px -2px 0 rgb(50,50,50),
                -2px  2px 0 rgb(50,50,50),
                 2px  2px 0 rgb(50,50,50),
                -3px  0px 0 rgb(50,50,50),
                 3px  0px 0 rgb(50,50,50),
                 0px -3px 0 rgb(50,50,50),
                 0px  3px 0 rgb(50,50,50);}
   
label.hamburg {     
 width: 80px; height: 80px;
 top:26px;
 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:20px auto auto auto;
 }
  
main {  
 margin-top:140px; 
 display:flex;
 flex-wrap:wrap;
 gap:30px 30px}
 
nav.topmenu { 
 column-count: 2;
		column-gap: 40px;
 }  

section.jubi article{
     display:flex;
     }
     
article.prinzen {
    display:flex;
    flex-flow:row wrap;
    }  

#sp {  
    flex-flow: wrap;  
    width:20%;
    }
    
#kipi {  
    flex-flow: wrap;  
    width:20%;
    }
    
#gs {  
    flex-flow: wrap;  
    width:60%;
    }                

a.gs, a.kipi{
 margin:10px;width:7vw;
 }
 
a.sp{
 margin:10px;width:16vw;
 }
    
a.kipi section, a.gs section{
 height:calc(7vw * 1); 
 } 
 
a.sp section{
 height:calc(16vw * 1); 
 } 

a.gezwitscher { 
 flex-grow: 1;
 flex-basis: 23%;  
 }
 
article.inhalt{
 display:flex;
 }
 
article.inhalt div {  
 flex-grow:1;
 flex-basis:40%;
 }

section.lieder article{
  display:flex;
  flex-flow: row wrap;
  gap:10px 20px;
  }
  
section.lieder article h1{
  flex-grow:1;
  flex-basis:100%;  
  }
  
section.lieder article a{
  flex-grow:1;
  flex-basis:45%;
  }

div.veranstaltung{
    display:flex;
    flex-flow:wrap}
    
div.veranstaltung div{
    flex-basis:50%;
    padding:10px;}
    
.halbe{
    display:inline-block;
    width:calc(50% - 2em);
    padding:1em;    
    vertical-align:top;
        }
   
 article.verein{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

article.verein div{
    flex: 1 1 0;
    order: 3;}

article.verein div:first-of-type{
   width: 100%;
    text-align: center;
    flex-basis: 100%;
    border-bottom: 5px solid rgb(255, 155, 0);
    order: 1;
     }

article.verein div:first-of-type img{
     width:150px;
     margin:auto;
     }
     
article.verein div:first-of-type p{
     margin:auto;
     vertical-align:middle;
     text-align:center     
     }
     
article.verein div:last-of-type{
    width: 25%;
  min-width:350px;
    flex: 0 0 0;
    order: 2;
}

article.verein div:last-of-type img{
     height:150px;
     width:auto;
     margin:auto;
     }
     
article.verein div:last-of-type h1{
     margin:auto;
     display:inline-block;
     vertical-align:middle;
     }

article.verein a{
    text-decoration:none;
    color:rgb(55,55,55);} 
   
 ul.untermenu{
     width:100%;
     margin:auto 0 10px 0;
     padding:0px;
     display:block;
     text-align:center
     
 }
    ul.untermenu li {
        list-style:none;
        display:inline-block;
        padding:0px 1em;
    }
    ul.untermenu li a{
        color:rgb(55,55,55);
        text-decoration:underline;
    }
   
 }