/* styles.css */

body {
    font-family: Verdana Pro;
/*    font-size: 32px;*/
    margin: 0;
    padding: 0;
    background-color:black;
}

@media screen and (max-width: 1000px) {
    body {
        font-size: 75%; /* for cell phones and small screens */
    }
}

@media screen and (max-width: 660px) {
    body {
        font-size: 60%; /* for cell phones and small screens */
    }
    .grid-container .item6 {
        padding-left: 5px;
        padding-right: 5px;
    }
}

/* ––––––––––––––––––   CSS for basic layout –––––––––––––––––– */

.item1 { grid-area: headerleft; }
.item2 { 
    grid-area: headercenter; 
    color:white;
    text-align: center;
}
.item3 { grid-area: headerright; }
.item4 { grid-area: left; background-color:lightgrey; height:100%;}
.item4 > img {width:100%;}

.item5 { grid-area: main; background-color:white; height:100%;}

.item6 { grid-area: right; background-color:lightgrey; height:100%; padding: 2px;}
.scrollbox {height:100%; max-height: 1000px; overflow-y: auto;}

.item7 { grid-area: footer; color:grey; background-color:black; margin-top: 20px; text-indent: 25px;}

.grid-container {
    display: grid;
    align-items: center;
    grid-template-columns: 20% 60% 20%;
    grid-template-areas:
    'headerleft headercenter headerright'
    'left main right'
    'footer footer footer';
    /*      gap: 1px;*/
    background-color: #134b8a;
    /*      padding: 1px;*/
}

.grid-container > div {
    padding: 20px;
}

.stark {
    color: #134b8a;
    font-weight: bold;
}


nav {
    display: flex;
    justify-content: center;
}

nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

nav ul li {     /* Top menu items */
    position: relative;
}

nav ul li a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 10px 15px;
}

nav ul li:hover {
    background-color: #1c1c4a;
}

nav ul ul {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background-color: #555;
    border: 1px solid #555;
}

nav ul li:hover > ul {
    display: inherit;
}

nav ul ul li {
    text-align: left;
    width: 250px;
    float: none;
    display: list-item;
    position: relative;
}

nav ul ul ul li {
    position: relative;
    top: -60px;
    left: 200px;
}


/* –––––––––––––––––– styles for gallery.php –––––––––––––––––––––– */

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.yearbutton {
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;

    width: 90px;
    height: 60px;
    font-size: 20px;
/*    margin-top: 25px;*/
    background-color: #4CAF50; /* Green background */
    color: white; /* White text */
    margin: 10px;
/*    padding: 20px;*/
    border: none; /* Remove the default border */
    border-radius: 10px; /* Rounded corners */
}

/* Hover effect */
.yearbutton:hover {
  background-color: #45a049; /* Darker green on hover */
}

/* –––––––––––––––––– styles for gallery-process.php –––––––––––––––––––––– */
.thumbpic {
        margin: 10px;
}

.overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      justify-content: center;
      align-items: center;
    }
    
.overlay img {
      max-width: 80%;
      max-height: 80%;
    }



/* –––––––––––––––––– styles for jahresliste.php –––––––––––––––––––––– */

.listing {
    padding-left: 50px;
    margin-left: 30px;
    max-height: 1000px; 
    overflow-y: auto;
    }

.listing > h4 {
    color: green;
    margin-left: -30px;
    margin-bottom: 1px;
    }

.listing > h4 > a:link {
  color: green;
}

.listing > h4 > a:visited {
  color: darkgray;
}

.listing > h4 > a:hover {
  color: darkred;
}

.listing > h4 > a:active {
  color: palegreen;
}


/* –––––––––––––––––– styles for FAQ.php –––––––––––––––––––––– */

details summary {
    margin-top: 25px;
    background-color: #4CAF50; /* Green background */
    color: white; /* White text */
    padding: 10px 20px; 
    border: none; /* Remove the default border */
    border-radius: 5px; /* Rounded corners */
    cursor: pointer; /* Show pointer on hover */
    }

details details {
    margin-left: 4%;
    margin-bottom: 15px;
    border: none; /* Remove the default border */
    cursor: pointer; /* Show pointer on hover */
    }
details details summary{
    /*font-size: 20px;
    padding-top: 15px;*/
/*    margin-top: 25px;*/
    /* Add your custom styles */
    margin-top: 0px;
    background-color: #134b8a; 
    border-radius: 5px 5px 0px 0px; 
    color: white; /* White text */
    border: none; /* Remove the default border */
    cursor: pointer; /* Show pointer on hover */
    }

details p {
    margin-top: 0px;
    padding-left: 30px; 
    padding-top: 10px; 
    padding-right: 20px; 
    padding-bottom: 10px; 
    border-top: none;
    border-bottom: thin solid #134b8a;
    border-left: thin solid #134b8a;
    border-right: thin solid #134b8a;
    border-radius: 0px 0px 5px 5px; 

    }

/* –––––––––––––––––––––––––––– fonts –––––––––––––––––––––––––––––– */

@font-face {
    font-family: 'Verdana Pro Cond';
    src: url('VerdanaPro/VerdanaPro-CondRegular.eot');
    src: local('Verdana Pro Cond'), local('VerdanaPro-CondRegular'),
        url('VerdanaPro/VerdanaPro-CondRegular.eot?#iefix') format('embedded-opentype'),
        url('VerdanaPro/VerdanaPro-CondRegular.woff2') format('woff2'),
        url('VerdanaPro/VerdanaPro-CondRegular.woff') format('woff'),
        url('VerdanaPro/VerdanaPro-CondRegular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Verdana Pro';
    src: url('VerdanaPro/VerdanaPro-Bold.eot');
    src: local('Verdana Pro Bold'), local('VerdanaPro-Bold'),
        url('VerdanaPro/VerdanaPro-Bold.eot?#iefix') format('embedded-opentype'),
        url('VerdanaPro/VerdanaPro-Bold.woff2') format('woff2'),
        url('VerdanaPro/VerdanaPro-Bold.woff') format('woff'),
        url('VerdanaPro/VerdanaPro-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Verdana Pro Cond';
    src: url('VerdanaPro/VerdanaPro-CondLight.eot');
    src: local('Verdana Pro Cond Light'), local('VerdanaPro-CondLight'),
        url('VerdanaPro/VerdanaPro-CondLight.eot?#iefix') format('embedded-opentype'),
        url('VerdanaPro/VerdanaPro-CondLight.woff2') format('woff2'),
        url('VerdanaPro/VerdanaPro-CondLight.woff') format('woff'),
        url('VerdanaPro/VerdanaPro-CondLight.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Verdana Pro Cond';
    src: url('VerdanaPro/VerdanaPro-CondSemiBold.eot');
    src: local('Verdana Pro Cond SemiBold'), local('VerdanaPro-CondSemiBold'),
        url('VerdanaPro/VerdanaPro-CondSemiBold.eot?#iefix') format('embedded-opentype'),
        url('VerdanaPro/VerdanaPro-CondSemiBold.woff2') format('woff2'),
        url('VerdanaPro/VerdanaPro-CondSemiBold.woff') format('woff'),
        url('VerdanaPro/VerdanaPro-CondSemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Verdana Pro Cond';
    src: url('VerdanaPro/VerdanaPro-CondBold.eot');
    src: local('Verdana Pro Cond Bold'), local('VerdanaPro-CondBold'),
        url('VerdanaPro/VerdanaPro-CondBold.eot?#iefix') format('embedded-opentype'),
        url('VerdanaPro/VerdanaPro-CondBold.woff2') format('woff2'),
        url('VerdanaPro/VerdanaPro-CondBold.woff') format('woff'),
        url('VerdanaPro/VerdanaPro-CondBold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Verdana Pro';
    src: url('VerdanaPro/VerdanaPro-BlackItalic.eot');
    src: local('Verdana Pro Black Italic'), local('VerdanaPro-BlackItalic'),
        url('VerdanaPro/VerdanaPro-BlackItalic.eot?#iefix') format('embedded-opentype'),
        url('VerdanaPro/VerdanaPro-BlackItalic.woff2') format('woff2'),
        url('VerdanaPro/VerdanaPro-BlackItalic.woff') format('woff'),
        url('VerdanaPro/VerdanaPro-BlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Verdana Pro';
    src: url('VerdanaPro/VerdanaPro-Regular.eot');
    src: local('Verdana Pro'), local('VerdanaPro-Regular'),
        url('VerdanaPro/VerdanaPro-Regular.eot?#iefix') format('embedded-opentype'),
        url('VerdanaPro/VerdanaPro-Regular.woff2') format('woff2'),
        url('VerdanaPro/VerdanaPro-Regular.woff') format('woff'),
        url('VerdanaPro/VerdanaPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Verdana Pro';
    src: url('VerdanaPro/VerdanaPro-LightItalic.eot');
    src: local('Verdana Pro Light Italic'), local('VerdanaPro-LightItalic'),
        url('VerdanaPro/VerdanaPro-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('VerdanaPro/VerdanaPro-LightItalic.woff2') format('woff2'),
        url('VerdanaPro/VerdanaPro-LightItalic.woff') format('woff'),
        url('VerdanaPro/VerdanaPro-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Verdana Pro Cond';
    src: url('VerdanaPro/VerdanaPro-CondSemiBoldItalic.eot');
    src: local('Verdana Pro Cond SemiBold Italic'), local('VerdanaPro-CondSemiBoldItalic'),
        url('VerdanaPro/VerdanaPro-CondSemiBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('VerdanaPro/VerdanaPro-CondSemiBoldItalic.woff2') format('woff2'),
        url('VerdanaPro/VerdanaPro-CondSemiBoldItalic.woff') format('woff'),
        url('VerdanaPro/VerdanaPro-CondSemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Verdana Pro';
    src: url('VerdanaPro/VerdanaPro-SemiBoldItalic.eot');
    src: local('Verdana Pro SemiBold Italic'), local('VerdanaPro-SemiBoldItalic'),
        url('VerdanaPro/VerdanaPro-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('VerdanaPro/VerdanaPro-SemiBoldItalic.woff2') format('woff2'),
        url('VerdanaPro/VerdanaPro-SemiBoldItalic.woff') format('woff'),
        url('VerdanaPro/VerdanaPro-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Verdana Pro Cond';
    src: url('VerdanaPro/VerdanaPro-CondBoldItalic.eot');
    src: local('Verdana Pro Cond Bold Italic'), local('VerdanaPro-CondBoldItalic'),
        url('VerdanaPro/VerdanaPro-CondBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('VerdanaPro/VerdanaPro-CondBoldItalic.woff2') format('woff2'),
        url('VerdanaPro/VerdanaPro-CondBoldItalic.woff') format('woff'),
        url('VerdanaPro/VerdanaPro-CondBoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Verdana Pro';
    src: url('VerdanaPro/VerdanaPro-BoldItalic.eot');
    src: local('Verdana Pro Bold Italic'), local('VerdanaPro-BoldItalic'),
        url('VerdanaPro/VerdanaPro-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('VerdanaPro/VerdanaPro-BoldItalic.woff2') format('woff2'),
        url('VerdanaPro/VerdanaPro-BoldItalic.woff') format('woff'),
        url('VerdanaPro/VerdanaPro-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

@font-face {
    font-family: 'Verdana Pro Cond';
    src: url('VerdanaPro/VerdanaPro-CondLightItalic.eot');
    src: local('Verdana Pro Cond Light Italic'), local('VerdanaPro-CondLightItalic'),
        url('VerdanaPro/VerdanaPro-CondLightItalic.eot?#iefix') format('embedded-opentype'),
        url('VerdanaPro/VerdanaPro-CondLightItalic.woff2') format('woff2'),
        url('VerdanaPro/VerdanaPro-CondLightItalic.woff') format('woff'),
        url('VerdanaPro/VerdanaPro-CondLightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Verdana Pro';
    src: url('VerdanaPro/VerdanaPro-Black.eot');
    src: local('Verdana Pro Black'), local('VerdanaPro-Black'),
        url('VerdanaPro/VerdanaPro-Black.eot?#iefix') format('embedded-opentype'),
        url('VerdanaPro/VerdanaPro-Black.woff2') format('woff2'),
        url('VerdanaPro/VerdanaPro-Black.woff') format('woff'),
        url('VerdanaPro/VerdanaPro-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Verdana Pro';
    src: url('VerdanaPro/VerdanaPro-Light.eot');
    src: local('Verdana Pro Light'), local('VerdanaPro-Light'),
        url('VerdanaPro/VerdanaPro-Light.eot?#iefix') format('embedded-opentype'),
        url('VerdanaPro/VerdanaPro-Light.woff2') format('woff2'),
        url('VerdanaPro/VerdanaPro-Light.woff') format('woff'),
        url('VerdanaPro/VerdanaPro-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Verdana Pro';
    src: url('VerdanaPro/VerdanaPro-Italic.eot');
    src: local('Verdana Pro Italic'), local('VerdanaPro-Italic'),
        url('VerdanaPro/VerdanaPro-Italic.eot?#iefix') format('embedded-opentype'),
        url('VerdanaPro/VerdanaPro-Italic.woff2') format('woff2'),
        url('VerdanaPro/VerdanaPro-Italic.woff') format('woff'),
        url('VerdanaPro/VerdanaPro-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Verdana Pro Cond';
    src: url('VerdanaPro/VerdanaPro-CondItalic.eot');
    src: local('Verdana Pro Cond Italic'), local('VerdanaPro-CondItalic'),
        url('VerdanaPro/VerdanaPro-CondItalic.eot?#iefix') format('embedded-opentype'),
        url('VerdanaPro/VerdanaPro-CondItalic.woff2') format('woff2'),
        url('VerdanaPro/VerdanaPro-CondItalic.woff') format('woff'),
        url('VerdanaPro/VerdanaPro-CondItalic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Verdana Pro Cond';
    src: url('VerdanaPro/VerdanaPro-CondBlackItalic.eot');
    src: local('Verdana Pro Cond Black Italic'), local('VerdanaPro-CondBlackItalic'),
        url('VerdanaPro/VerdanaPro-CondBlackItalic.eot?#iefix') format('embedded-opentype'),
        url('VerdanaPro/VerdanaPro-CondBlackItalic.woff2') format('woff2'),
        url('VerdanaPro/VerdanaPro-CondBlackItalic.woff') format('woff'),
        url('VerdanaPro/VerdanaPro-CondBlackItalic.ttf') format('truetype');
    font-weight: 900;
    font-style: italic;
}

@font-face {
    font-family: 'Verdana Pro Cond';
    src: url('VerdanaPro/VerdanaPro-CondBlack.eot');
    src: local('Verdana Pro Cond Black'), local('VerdanaPro-CondBlack'),
        url('VerdanaPro/VerdanaPro-CondBlack.eot?#iefix') format('embedded-opentype'),
        url('VerdanaPro/VerdanaPro-CondBlack.woff2') format('woff2'),
        url('VerdanaPro/VerdanaPro-CondBlack.woff') format('woff'),
        url('VerdanaPro/VerdanaPro-CondBlack.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Verdana Pro';
    src: url('VerdanaPro/VerdanaPro-SemiBold.eot');
    src: local('Verdana Pro SemiBold'), local('VerdanaPro-SemiBold'),
        url('VerdanaPro/VerdanaPro-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('VerdanaPro/VerdanaPro-SemiBold.woff2') format('woff2'),
        url('VerdanaPro/VerdanaPro-SemiBold.woff') format('woff'),
        url('VerdanaPro/VerdanaPro-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}