/* Place the navbar at the bottom of the page, and make it stick */
 
 html {
     scroll-behavior: smooth;
 }
 
 body {
     margin: 0;
     padding: 0;
     display: flex;
     flex-direction: column;
     min-height: 100vh;
 }
 /* Place the navbar at the bottom of the page, and make it stick */
 
 .navbar {
     overflow: hidden;
     position: fixed;
     top: 0;
     width: 100%;
     background-color: #343434;
     z-index: 1;
 }
 /* Style the links inside the navigation bar */
 
 .navbar a {
     float: left;
     display: block;
     color: #f2f2f2;
     text-align: center;
     padding: 20px 20px;
     text-decoration: none;
     font-size: 27px;
     font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 }
 /* Change the color of links on hover */
 
 .navbar a:hover {
     background-color: #ffe135;
     color: black;
 }
 /* Add a green background color to the active link */
 
 .navbar a.active {
     background-color: #ffe135;
     color: black;
 }
 /* Hide the link that should open and close the navbar on small screens */
 
 .navbar .icon {
     display: none;
 }
 /* When the screen is less than 600 pixels wide, hide all links, except for the first one ("Home"). Show the link that contains should open and close the navbar (.icon) */
 
 @media screen and (max-width: 940px) {
     .navbar a:not(:first-child) {
         display: none;
     }
     .navbar a.icon {
         float: right;
         display: block;
     }
 }
 /* The "responsive" class is added to the navbar with JavaScript when the user clicks on the icon. This class makes the navbar look good on small screens (display the links vertically instead of horizontally) */
 
 @media screen and (max-width: 940px) {
     .navbar.responsive a.icon {
         position: absolute;
         right: 0;
         top: 0;
     }
     .navbar.responsive a {
         float: none;
         display: block;
         text-align: left;
     }
 }
 
 header {
     width: 100vw;
     height: 100vh;
     background-image: url(Bilder/image0\ \(5\).jpeg);
     background-position: bottom;
     background-size: cover;
     display: flex;
     align-items: flex-end;
     justify-content: center;
 }
 
 .header-content {
     margin-bottom: 100px;
     text-align: center;
 }
 
 .logo {
     display: block;
     max-width: 500px;
     margin: 0 auto;
     width: 80%;
 }
 
 .header-content h1 {
     font-size: 70px;
     margin-top: 30px;
     margin-bottom: 30px;
     color: black;
     font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 }
 
 @media (min-width: 1025px) and (max-width: 1280px) {
     .logo {
         width: 70%;
     }
     .header-content {
         margin-bottom: 30px;
     }
     .header-content h1 {
         font-size: 45px;
     }
 }
 
 @media screen and (max-width: 768px) {
     .logo {
         width: 70%;
     }
     .header-content {
         margin-bottom: 60px;
     }
     .header-content h1 {
         font-size: 35px;
     }
 }
 
 .wrapper {
     margin-top: 3cm;
     max-width: 1100px;
 }
 
 .gallery {
     display: flex;
     flex-wrap: wrap;
 }
 
 .gallery .image {
     padding: 10px;
     width: calc(3000px / 9);
 }
 
 .gallery .image span {
     display: flex;
     width: 100%;
     overflow: hidden;
 }
 
 .gallery .image img {
     width: 100%;
     vertical-align: middle;
     transition: all 0.3s ease;
 }
 
 .gallery .image:hover img {
     transform: scale(1.1);
 }
 
 .preview-box {
     position: fixed;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%) scale(0.9);
     background: #fff;
     max-width: 700px;
     width: 100%;
     z-index: 5;
     opacity: 0;
     pointer-events: none;
     border-radius: 3px;
     padding: 0 5px 5px 5px;
     box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
 }
 
 .preview-box.show {
     opacity: 1;
     pointer-events: auto;
     transform: translate(-50%, -50%) scale(1);
     transition: all 0.3s ease;
 }
 
 .preview-box .details {
     display: flex;
     align-items: center;
     padding: 12px 15px 12px 10px;
     justify-content: space-between;
 }
 
 .preview-box .details .title {
     display: flex;
     font-size: 18px;
     font-weight: 400;
 }
 
 .details .title p {
     margin: 0 5px;
 }
 
 .details .title p.current-img {
     font-weight: 500;
 }
 
 .details .icon {
     color: red;
     font-size: 20px;
     cursor: pointer;
 }
 
 .preview-box .image-box {
     display: flex;
     width: 100%;
     position: relative;
 }
 
 .image-box .slide {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     color: #fff;
     font-size: 30px;
     cursor: pointer;
     height: 50px;
     width: 60px;
     line-height: 50px;
     text-align: center;
     border-radius: 3px;
 }
 
 .slide.prev {
     left: 0px;
 }
 
 .slide.next {
     right: 0px;
 }
 
 .image-box img {
     width: 100%;
     border-radius: 0 0 3px 3px;
 }
 
 .shadow {
     position: fixed;
     top: 0;
     left: 0;
     height: 100%;
     width: 100%;
     z-index: 2;
     display: none;
     background: rgba(0, 0, 0, 0.45);
 }
 
 @media(max-width: 1000px) {
     .gallery .image {
         width: calc(100% / 2);
     }
 }
 
 @media(max-width: 768px) {
     .gallery .image {
         width: 100%;
         padding: 4px;
     }
 }
 
 .scroll {
     border-style: solid;
     font-size: 40px;
     font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
     border-radius: 20px;
     text-decoration: none;
     border-color: yellow;
     color: black;
     background-color: yellow;
     box-shadow: 5px 5px black;
     opacity: 0.8;
 }
 
 @media screen and (max-width: 768px) {
     .scroll {
         font-size: 20px;
     }
 }
 
 .galerie {
     text-align: justify;
     margin-top: 2.5cm;
     border-style: solid;
     width: 50%;
     margin-left: 25%;
     border-radius: 20px;
     border-color: yellow;
     background-color: yellow;
     box-shadow: 5px 5px black;
     opacity: 0.9;
     margin-bottom: 7px;
 }
 
 .galerie p {
     font-size: 25px;
     font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 }
 
 .galerie h2 {
     font-size: 40px;
     font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 }
 
 @media screen and (max-width: 768px) {
     .galerie {
         width: 100%;
         margin: 2cm auto;
     }
     .galerie h2 {
         font-size: 20px;
     }
     .galerie p {
         font-size: 15px;
     }
 }
 
 .container {
     padding-top: 1cm;
     margin-top: 2cm;
     border-radius: 5px;
     background-color: #f2f2f2;
     margin-bottom: 1cm;
 }
 
 .headline {
     display: grid;
     align-items: flex-end;
     flex-grow: 1;
 }
 
 .headline h2 {
     margin-top: -2cm;
     font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
     font-size: 40px;
     text-align: center;
 }
 
 .headline p {
     padding-top: -1cm;
     font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
     font-size: 25px;
     text-align: center;
     margin-bottom: 3cm;
 }
 
 @media screen and (max-width: 600px) {
     .headline h2 {
         font-size: 20px;
     }
     .headline p {
         font-size: 15px;
     }
 }
 
 footer {
     text-align: center;
     margin-top: auto;
     background-color: #343434;
 }
 
 footer p {
     font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 }
 
 footer a {
     text-decoration: none;
     font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
     color: black;
 }
 
 #mitglieder {
     font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
     color: black;
     text-align: center;
     padding-top: 10cm;
     padding-bottom: 12cm
 }
 
 .row {
     display: flex;
 }
 
 .column {
     float: left;
     width: 25%;
     padding: 10px;
 }
 
 @media (max-width:768px) {
     .row {
         padding-top: 25%;
     }
 }
 
 .container2 {
     padding-top: 80px;
     padding-bottom: 100px;
 }
 
 .container2 .heading {
     text-align: center;
     color: black;
     font-size: 40px;
     padding-bottom: 100px;
 }
 
 .container2 .box-container2 {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
     gap: 15px;
 }
 
 .container2 .box-container2 .box2 {
     box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
     border-radius: 5px;
     background: #ffe135;
     text-align: center;
     padding: 30px 20px;
 }
 
 .container2 .box-container2 .box2 h2 {
     font-size: 30px;
     padding: 10px 0;
 }
 
 .container2 .box-container2 .box2 p {
     color: black;
     font-size: 25px;
     font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 }
 
 .container2 .box-container2 .box2:hover {
     box-shadow: 0 10px 15px rgba(0, 0, 0, .3);
     transform: scale(1.03);
 }
 
 @media (max-width:768px) {
     .container2 {
         padding: 20px;
     }
     .container2 .heading {
         padding-top: 20px;
         padding-bottom: 100px;
     }
 }
 
 .row2 {
     margin-top: 2.5cm;
 }
 
 .row3 {
     margin-top: -0.4cm;
 }
 
 .row4 {
     margin-top: -5cm;
 }
 
 .column2 {
     float: left;
     width: 20.3%;
     margin-bottom: 16px;
     padding: 0 8px;
 }
 
 .personContent {
     margin: 0px;
 }
 
 .personContent p {
     color: black;
     font-size: 25px;
     font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 }
 
 .personContent h2 {
     color: black;
     font-size: 40px;
     font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
 }
 
 .textContent {
     color: black;
     font-size: 25px;
     font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
     padding: 0 8px;
     display: block;
 }
 
 @media screen and (max-width: 1400px) {
     .textContent p {
         font-size: 18px;
     }
 }
 
 @media screen and (max-width: 1400px) {
     .personContent p {
         font-size: 18px;
     }
     .personContent h2 {
         font-size: 30px;
     }
 }
 /* Display the columns below each other instead of side by side on small screens */
 
 @media screen and (max-width: 980px) {
     .column2 {
         width: 70%;
         display: block;
     }
     .row3 {
         margin-top: 2.5cm;
     }
     .row4 {
         margin-top: -0.5cm;
     }
 }
 
 @media screen and (max-width: 650px) {
     .column2 {
         width: 100%;
         display: block;
     }
 }
 /* The Modal (background) */
 
 .modal {
     display: none;
     /* Hidden by default */
     position: fixed;
     /* Stay in place */
     z-index: 1;
     /* Sit on top */
     left: 0;
     top: 0;
     width: 100%;
     /* Full width */
     height: 100%;
     /* Full height */
     overflow: auto;
     /* Enable scroll if needed */
     background-color: rgb(0, 0, 0);
     /* Fallback color */
     background-color: rgba(0, 0, 0, 0.4);
     /* Black w/ opacity */
 }
 /* Modal Content/Box */
 
 .modal-content {
     background-color: #fefefe;
     margin: 15% auto;
     /* 15% from the top and centered */
     padding: 20px;
     border: 1px solid #888;
     width: 80%;
     font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
     text-align: center;
     font-size: 25px;
     /* Could be more or less, depending on screen size */
 }
 
 .modal-content img {
     height: auto;
     max-width: 100%;
     width: 60%;
     display: block;
     margin-left: auto;
     margin-right: auto;
 }
 
 .modal-content video {
     height: 500px;
     max-width: 100%;
     width: 60%;
     display: block;
     margin-left: auto;
     margin-right: auto;
 }
 /* The Close Button */
 
 .close {
     color: #aaa;
     float: right;
     font-size: 35px;
     font-weight: bold;
 }
 
 .close:hover,
 .close:focus {
     color: red;
     text-decoration: none;
     cursor: pointer;
 }
 
 #popUpBtn {
     background: #ffe135;
     border-color: #ffe135;
     border-radius: 8px;
     width: 4cm;
     height: 1cm;
     font-size: 20px;
     font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
     border: none;
 }
 
 .outer-content {
     padding-top: 3cm;
     margin: auto;
     text-align: center;
 }
 
 #popUpBtn2 {
     background: #ffe135;
     border-color: #ffe135;
     border-radius: 8px;
     width: 4cm;
     height: 1cm;
     font-size: 20px;
     font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
     border: none;
 }
 
 #popUpBtn3 {
     background: #ffe135;
     border-color: #ffe135;
     border-radius: 8px;
     width: 4cm;
     height: 1cm;
     font-size: 20px;
     font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
     border: none;
 }