/* --------------------------------------------------------------------------------------------------------------------------------------------------
HTML
-------------------------------------------------------------------------------------------------------------------------------------------------- */
body {margin:0; line-height:20px;}
address, blockquote, dl, fieldset, form, h1, h2, h3, h4, h5, h6, ol, p, table, ul {margin:15px 0;}

h1 {font-size: 1.4em; margin-top:25px; font-weight: bold; color: #012d55; text-align:center; text-shadow: 2px 2px 5px white;}
h1:hover { text-shadow: none; cursor: pointer;}  
h2 {font-size: 1.4em; margin-top:25px; font-weight: bold; color: #095396; text-align:center; 
text-shadow: 2px 2px 5px white;}
h3 {font: 1.2em "helvetica", sans-serif; color: #fff; font-weight:bold; background-color: #e45e32; padding:12px; margin-top:-1px; margin-bottom:1.5px;}
 h3.sub {font: 1.2em "helvetica", sans-serif; color: #3A3A3A; margin-bottom: 10px; background: none; padding: 0;}
h4 {font: 1.2em "helvetica", sans-serif; text-align: center ; font-weight: bold; color: #ffffff;  padding:12px; margin-top:0px; margin-bottom:1px; background-color: #0f65b2; border-radius: 10px 10px 0px 0px;}
h5 {font:1.4em "Fira Sans", sans-serif;   margin-top:-17px; color: #012d55; text-align:center; 
text-shadow: 2px 2px 3px white;) 
             }
h6 {font: 1.0em "helvetica", sans-serif; color: #091e31; font-weight:bold; margin-top: -2px; margin-left: 4px;}




/* --------------------------------------------------------------------------------------------------------------------------------------------------
LAYOUT
-------------------------------------------------------------------------------------------------------------------------------------------------- */
#container {margin: auto; height: 100%;  overflow: hidden; }
#wrapper {position:relative; overflow-x: hidden; margin-top:0px; border: 0px solid #012d55;}

#header {position:fixed; width: 100%; height:170px; border-top: solid 0px #dddddd; padding:0 35px;  top: 0px; z-index: 1; }
#header #logo {position:absolute; width:180px;  height:75px;  top:8px; left:130px; margin:0; border:#012d55 solid 2px; border-top:#fff solid 0px;  border-radius: 0px 0px 30px 30px;}
 #header #logo a {text-decoration:none;}
 #header a.header-button {position:absolute; top:13px; left:0px; padding:4px 10px; font-size:22px; text-decoration:none; text-align:center; font-weight:bold; cursor: pointer;}
 #header a.header-button:hover {position:absolute; top:14px; left:0px; padding:4px 10px; cursor: pointer; }
#content {display: flex; justify-content: center; align-items: center; flex-wrap: wrap; padding:55px 5px;  
   height:100%; left:0; overflow: hidden;  background-color:#cee8ff;}

#footer {position:relative; text-align:center; border-top:#012d55 solid 0px; 
padding:7px 9px;  box-shadow: inset 2px 4px 5px hsla(0,0%,0%,0.5); font:sans-serif; }
 #footer p {margin:0; }
 #footer a {color:#fff; font-weight: lighter;}
#fb {position:absolute; width:50px; height:50px; left:1%; }


a:link {
  text-decoration: none;
}



/* --------------------------------------------------------------------------------------------------------------------------------------------------
PAGE: HOMEPAGE
-------------------------------------------------------------------------------------------------------------------------------------------------- */
.perex {margin: -15px -9px 0 -9px; padding:0px 0px; }
.perex p {margin:0px 10px; }
.boxinley-o p {line-height:1.2em; margin: 4px 0px 0 0px  }
.boxinley-b p {line-height:1.2em; margin: 4px 0px 0 0px  }

/* --------------------------------------------------------------------------------------------------------------------------------------------------
NAVIGATION-MOBIL
-------------------------------------------------------------------------------------------------------------------------------------------------- */
#navbutton {
  position: absolute;
  display:none;
  margin-top: 15px;
  margin-left: 0px;
	width: 25px;
	height:25px;
	right: 90px;
	background-image:url('../images/mbu.png'); background-size: 25px 25px;
	background-position:0px 0;} 
	
	
.sidenav {
  width: 0;
  position: absolute;
  z-index: 1;
  height: 340px;
      display:none;
  color: #fff;
  top:44px;  right: -2px;
  overflow-x: hidden;
  background-color: #dfefff;
  transition: 1.2s;
  padding-top: 35px;
  border-left: solid 2px #0f64b1;
  border-bottom: solid 2px #cb371c;
  border-radius: 0px 10px 0px 100px;
   box-shadow: 10px 20px 30px hsla(0,0%,0%,0.8);
   }
   
.sidenav a {
  text-decoration: none;
  text-align: left;
    display:none;
  padding: 0px 0px 1px 12px;
  font-size: 16px;
  color: #091e31;
  line-height:35px;
  display: block;
  transition: 0.8s;}


* --------------------------------------------------------------------------------------------------------------------------------------------------
NAVIGATION
-------------------------------------------------------------------------------------------------------------------------------------------------- */


.bar ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
      border: 1px solid;
  background-color: #e35e31;
  position: -webkit-sticky; /* Safari */
  position: sticky;
  top: 0;
}

.bar li {
  float: right;
    margin: -6px 40px 0px -40px;
 padding: 0;
 border-top: solid 1px;
display: inline-block;


}

.bar li a {
  display: block;
  color: white;
  text-align: center;
  padding: 7px 30px;
    background-color: #095396;
  text-decoration: none;
  opacity: 1.0;
}

.bar li a:hover {
  background-color: #e35e31;
}

.bar .active {
  background-color: #01294d;
}




/* --------------------------------------------------------------------------------------------------------------------------------------------------
BOX
-------------------------------------------------------------------------------------------------------------------------------------------------- */
.box {
width: 100%;
    display: flex;
  justify-content: center;
  align-items: center;
  }


.box1 {
    background-color: #fff;
    width: 26%;
	 height: auto;
    margin: 30px 5px 10px 5px;
    border: solid 0px #fff;
    border-radius: 10px 10px 0px 0px;


    }
       
.box1 h3{
  font-size: 1.0em}
  
.box1 img {
  width: 100%;
    vertical-align: middle;
  object-fit: cover;

  }

.box-p {
    background-color: #095396; 
    padding: 10px;
    padding-top: 15px;
    margin: 0px 10px 10px 10px;
    color: #fff;
      display: flex;
  justify-content: space-between;
  border-radius: 0px 0px 10px 10px;
     box-shadow: inset 1px 3px 5px -3px rgb(0 0 0 / .5);
     }
     
     
     .box-p1 {
    background-color: #095396; 
    padding: 10px;
    padding-top: 15px;
    padding-bottom: 40px;
    margin: 0px 10px 10px 10px;
    color: #fff;

  border-radius: 0px 0px 10px 10px;
     box-shadow: inset 1px 3px 5px -3px rgb(0 0 0 / .5);
     }
     
.box-p2 {
    background-color: #e45e32; 
    padding: 1px 5px 5px 5px;
    margin-top: -14px;
    color: #fff;
     }

  
  .box2 {
    background-color: #095396; 
    width: 100%;
    margin: 5px 0px 5px 0px;
    text-align: center;
    
    padding-top:50px;
        padding-bottom: 50px;
    vertical-align: middle;
    color: #fff;
	box-shadow: inset 4px 8px 10px hsla(0,0%,0%,0.5);
  }
  
  .box22 {
    width: 100%;
    text-align: center;
    padding-top:50px;
    padding-bottom: 50px;
    vertical-align: middle;
    color: #fff;
	box-shadow: inset 2px 2px 10px hsla(0,0%,0%,0.5);
  }
  
  .box2 ul
  {
	font-size: 1.1em;    
    margin-left: 50%;
    vertical-align:middle ;
    list-style-type: circle ;
    text-align: justify; 
  }
  
  .boxg {
    background-color: #f9f9f9;
    background-image: url(../images/backbox.jpg);  
    width: 95%;
    height: auto;
    margin: 10px;
    text-align: left;
    padding: 5px;
    display: flex;
 border: solid 3px #fff;
        border-radius:10px;
   
  }
  
  .boxg img { object-fit: cover; width:100%;
  height: auto;}

  
  
  
   .boxinnen {
    background-color: #fff; 
    width: 44%;
    height: auto;
    margin: 5px;
    text-align: left;
    padding: 5px;
    color: #01294d;
    border-radius:5px;

    display: inline-block;
  }
  
  .boxinnen img {
  width: 100%;
  object-fit: cover;
  }
  
  .boxoben {
    width: 100%;
    height:65px;
    margin-top: -30px;
    text-align: right;
    padding: 30px;
    border-bottom: solid 4px #fff;
    background-repeat: no-repeat;
    background-size: cover;
    background-image: url('../images/hiba.jpg');
	border-bottom-right-radius:11%;
		border-bottom-left-radius:11%;
    box-shadow: 10px 50px 100px white; 

  }

  .boxg-tr {
    width: 99%;
    height: auto;
    text-align: center;
        margin: 10px;
        

  }
  

  .boxprofil {
    display: flex;
    background-image: url(../images/backbox.jpg);  
    width: 189px;
    height: auto;
    margin: 5px;
    text-align: left;
    padding: 5px;
    vertical-align: middle;
    box-shadow: 1px 2px 3px hsla(0,0%,0%,0.6); 
 border-top-right-radius: 1%;
  border-top-left-radius: 1%;
	border-bottom-right-radius: 1%;
  }
  .boxprofil h3 {padding:5px; }


  .boxinley-o {
    height:auto;
    display: inline-block;
    text-align: left;
    padding-bottom: 10px;
    border: solid 1px #e35e31;
    border-bottom: solid 0px #e35e31;
    border-left: solid 0px #e35e31;
    border-top-left-radius: 0%;
	 border-top-right-radius: 2%;
	border-bottom-left-radius: 0%;
	border-bottom-right-radius: 25%;
  }
  
  .boxinley-o p {margin-left:5px; }
  .boxinley-o img { object-fit: cover; width: 100%;
  height: auto;}
  
  .boxinley-fraktion {
   height:auto;
    display: inline-block;
    text-align: left;
    padding-bottom: 10px;
    border-left: solid 10px #e35e31;
    border-top-left-radius: 0%;
	 border-top-right-radius: 2%;
	border-bottom-left-radius: 0%;
	border-bottom-right-radius: 2%;
  }

  .boxinley-fraktion p {margin-left:5px; }
  .boxinley-fraktion img { object-fit: cover; width: 100%;
  height: auto;}


  /* --------------------------------------------------------------------------------------------------------------------------------------------------
BUTTON
-------------------------------------------------------------------------------------------------------------------------------------------------- */


.oneButton {
	background-color:#fff;
	border-radius:40px;
		border-bottom-left-radius: 0%;
	border-bottom-right-radius: 0%;

	border-bottom: 0px solid #095396;
	display:inline-block;
	cursor:pointer;
	color:#095396;
	font-size:14px;
	padding:5px 40px;
  float: left;
  position:relative;
 bottom: -8px;
  left: 50%;
  transform: translateX(-50%);


}

.oneButton:hover {
	background-color:#e1f4ff;
	color: #091e31;

}
.oneButton:active {
	position:relative;
	top:1px;
}

        

        



  /* --------------------------------------------------------------------------------------------------------------------------------------------------
BUTTON: VP,Galerie
-------------------------------------------------------------------------------------------------------------------------------------------------- */


.button {
  margin: 0;
  padding: 0.5em;
  height: auto;
  border:0.5px solid;
  border-color:#c42802;
    border-radius: 20px;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
  margin: 0 auto;
  box-shadow: 1px 1px 4px grey; 
  margin-top:1px; 
  background-color: #fff;  text-align:center; width: 120px; font-size: 0.9em;
text-decoration: none;}

.button:hover{
	background-position:0px 0;
  background-color: #c42802;
  box-shadow: 1px 1px 2px grey; 
}

.button a {font-weight: normal; color: #c42802;
}
.button a:hover  {
  text-decoration: none;
  color:#fff
}





  /* --------------------------------------------------------------------------------------------------------------------------------------------------
PAGE: social
-------------------------------------------------------------------------------------------------------------------------------------------------- */




.buttonig{
  position: absolute;
  display:block;
  margin-top: 5px;
  margin-left: 40px;
	width: 19px;
	height:19px;
	background-image:url('../images/ig1.png'); background-size: 19px 19px;
	background-position:0px 0;
}
.buttonig:hover{
	background-position:0 0;
  background-image:url('../images/ig2.png');
}



.buttonfb{
  position: absolute;
  display:block;
  margin-top: 4px;
  margin-left: 10px;
	width: 19px;
	height:20px;
	background-image:url('../images/fb1.png'); background-size: 19px 20px;
	background-position:0px 0;
}
.buttonfb:hover{
	background-position:0 0;
  background-image:url('../images/fb2.png');
}

  /* --------------------------------------------------------------------------------------------------------------------------------------------------
PAGE: GALERIE
-------------------------------------------------------------------------------------------------------------------------------------------------- */

        .thumbs {
            display: inline-block;
            width: 50px;
            vertical-align: top;
            margin-top: 0px;
        }

            .thumbs img {
                width: 50px;
                height: auto;
            }

            .thumbs img:hover {
              cursor: pointer;
              -moz-border-radius: 30px;
              -webki7t-border-radius: 30px;
              border-radius: 30px;
            }
            

        .mainimg {
            position: relative;
            display: inline-block;
            height: 400px;
            width: calc(100% - 50px);
        }

            .mainimg input {
                display: none;
            }

            .mainimg figure {
                position: absolute;
                width: 100%;
                height: auto;
                left: 0;
                top: 0;
                opacity: 0;
                transition: opacity ease 3s;
              
            }
            .mainimg figure img {
                width: 98%;
                height: auto;
                float: left;
                margin-top: 10px;
                -moz-border-radius: 10px;
                -webki7t-border-radius: 10px;
                border-radius: 10px;
            }
            .mainimg figure figcaption {
                display: inline;
            }

            .mainimg input:checked + figure {
                display: block;
                opacity: 1;
            }





 




  /* --------------------------------------------------------------------------------------------------------------------------------------------------
PAGE: Kontaktdropdown
-------------------------------------------------------------------------------------------------------------------------------------------------- */

            .dropbtn {
              color: white;
              border: none;
              cursor: pointer;
            }
            
            .dropdown {
              position: relative;
              display: inline-block;
              float: right; 
              margin-right:-10px;
            }
            
            .dropdown-content {
              display: none;
              position: absolute;
              padding: 3px;
              border: #c42802 solid 1px;
              -webkit-border-radius:2px; -moz-border-radius:7px; border-radius:7px;
              right: 0;
              font-size: 1.0em;
              background-color: #fff;
              min-width: 320px;
              box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
              z-index: 1;
              margin-right:10px;

            }

            .dropdown-content ul li { 
              background:none;
              font-size: 1.0em;

             }
            
            .dropdown-content a:hover {background-color: #fff;}
            
            .dropdown:hover .dropdown-content {
              display: block;
            }
            




  /* --------------------------------------------------------------------------------------------------------------------------------------------------
PAGE: Accordion - Newsletter, Organisation
-------------------------------------------------------------------------------------------------------------------------------------------------- */

            .accordion {
              background-color: #0f65b2;
              color: #fff;
              cursor: pointer;
              padding: 15px;
              width: 65%;

              border-bottom: solid 1.0px #e45e32;
              text-align: left;
              outline: none;
         
              transition: 1.8s;
            }
            
            .active, .accordion:hover {
              background-color: #e45e32;
              color: #fff;
            }
            
            .accordion:after {
              content: '\002B';
              color: #fff;
              font-size: 1.2em;
              font-weight: bold;
              float: right;
              margin-left: 5px;
            }
            
            .active:after {
              content: "";
              color: #000;

            }
            
            .panel {
              padding: 0 1px;
              margin-left: 50px;
              margin-right: 50px;
              

              max-height: 0;
              overflow: hidden;
              transition: max-height 0.2s ease-out;
            }
 
 .panel img
{
   width: 100%;
  height: auto;
  object-fit: cover;
            }
      



 /* Thumbnail */
    .thumbnail {
      width: 55px;
      cursor: pointer;
      border: 2px solid #ccc;
      border-radius: 8px;
      transition: transform 0.3s;
    }

    .thumbnail:hover {
      transform: scale(1.1);
    }

    /* Popup-Hintergrund */
    .popup-overlay {
      display: none;
      position: fixed;
      top: 0; left: 0;
      width: 100vw; height: 100vh;
      background: rgba(0, 0, 0, 0.7);
      justify-content: center;
      align-items: center;
      z-index: 1000;
    }

    /* Popup-Inhalt */
    .popup-content {
      position: relative;
      padding: 20px;
      border-radius: 10px;
      max-width: 40%;
      max-height: 80%;
      box-shadow: 0 0 15px rgba(0, 0, 0, 0.5);
    }

    .popup-content img {
      max-width: 90%;
      height: auto;
 
      border-radius: 8px;
    }

    /* Schließen-Button */
    .close-btn {
      position: absolute;
      top: 10px;
      right: 15px;
      background: #ff4444;
      color: white;
      border: none;
      font-size: 18px;
      padding: 5px 10px;
      border-radius: 5px;
      cursor: pointer;
    }

    .close-btn:hover {
      background: #cc0000;
    }


 .image-grid {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
    }






      
            
  /* --------------------------------------------------------------------------------------------------------------------------------------------------
PAGE: NACH OBEN
-------------------------------------------------------------------------------------------------------------------------------------------------- */

            
#backToTopBtn {
      display: none; /* Anfangs unsichtbar */
      position: fixed;
      bottom: 5px;
      right: 10px;
      z-index: 100;
      background-color: #e45e32;
      color: white;
      border: none;
      padding: 12px 18px;
      border-radius: 50%;
      font-size: 17px;
      cursor: pointer;
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
      opacity: 0.8;
      transition: background-color 0.3s, transform 0.3s;
    }

    #backToTopBtn:hover {
      background-color: #095396;
      transform: scale(1.2);
            opacity: 0.9;
    }