/* EOT format for IE 6-8 */
@font-face {
    font-family: 'Barlow';
    src: 	url('fonts/BarlowSemiCondensed-Regular.eot'); 
    font-weight: normal;
    font-style: normal;
}

/* Modern Browsers */
@font-face {
    font-family: 'Barlow';
    src:	url('fonts/BarlowSemiCondensed-Regular.woff2') format('woff2'), /* Modern Browsers */
            url('fonts/BarlowSemiCondensed-Regular.woff') format('woff'), /* Modern Browsers */
            url('fonts/BarlowSemiCondensed-Regular.ttf') format('truetype'); /* Safari, Android, iOS */
    font-weight: normal;
    font-style: normal;
}

/* Add this rule to hide the :before pseudo-element */
/*main:before {
    /*display: none;*/
    /* content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8);
    z-index: -1; */
/*}*/

body {
    margin: 0;
    padding: 0;
    font-family: 'Barlow', Arial, sans-serif;
    font-size: clamp(16px, 2.4vw, 24px);
    background-color: rgba(233, 226, 215, 1); /*#f2f2f2;*/
}

/* Add some styles for the logo and navigation container */
.header-container {
    display: flex;
    align-items: left;
    justify-content: space-between;
    padding: 0px 10px; /* Add some padding to the header container */
}

header {
    background-image: url('media/efg_banner_schlicht.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: bottom;
    color: #fff;
    padding: 0px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;

    margin-right: 17px; /* Create space at the right side of the banner */
    height: calc(100vw * 300 / 1200); /* Adjust the aspect ratio to fit the banner */
    z-index: 999;
    box-shadow: 0px 2px 5px rgba(0, 0, 0, 0.1) inset;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-end;    /* Align links to the bottom of the header */
    transition: top 1s ease-in-out, height 0.5s ease-in-out;
}

/* Add styles for the logo */
.logo {
    max-width: 40px;
    max-height: 40px;
    margin-right: 0px;
    /* Hide the logo when the header is expanded */
    display: none;
    /* Show the logo when the header is flowed up */
    /*display: flex;*/
    align-items: center;
    text-decoration: none;
}

.logo img {
    height: 40px;
    margin-right: 10px;
    transition: transform 0.3s ease-in-out;
}

.logo:hover img {
    transform: scale(1.2); /* Scale the logo on hover */
}

header.flow .logo {
    display: block;
}

header.flow {
    top: calc(50px - 100vw * 300 / 1200);
    height: calc(100vw * 300 / 1200);
}

nav {
    font-size: clamp(16px, 2.6vw, 24px);
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-right: 10px;
    /* overflow: hidden; /* Prevent nav scrollbar */
}

nav a {
    color: rgba(105, 85, 75, 1);
    text-decoration: none;
    padding: 10px 20px;
    margin-right: 0px;
    margin-left: 0px;
    background-color: rgba(233, 226, 215, 0.0);
    border-radius: 5px;
    transition: all 0.5s ease-in-out;
}

nav a:hover {
    color: rgba(233, 226, 215, 1);
    background-color: rgba(105, 85, 75, 0.8);
    border-radius: 5px;
    transition: all 0.5s ease-in-out;
    text-decoration: none;
}

main {
    /*margin-top: calc(100vw * 300 / 1200); /* Add space for the header */
    /* Supplements for semitransparent text background */
    padding-top: calc(2 * (100vw * 300 / 1200) + 30px); /* Add space for the header */
    padding-bottom: 100px; /* Adjust the value as per your requirement */
    background-color: transparent; /* Remove the semi-transparent background  rgba(255, 255, 255, 0.8); /* Add a semi-transparent white background */
}

/* Styling for the parallax background */
.parallax {
    height: calc(2 * (100vw * 300 / 1200));
    background-image: url('media/efg_hintergrund.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;

    background-attachment: fixed;
    position: absolute; /* absolute position for the parallax to float */
    top: 0; /* calc(2 * (100vw * 300 / 1200)); /* Position the parallax below the header  0; /* Align the parallax to the top */
    left: 0; /* Align the parallax to the left */
    right: 0; /* Align the parallax to the right */
    bottom: 0; /* Align the parallax to the bottom */
    z-index: -1; /* Place the parallax behind the content */
}

/* Style the image container */
.image-container {
    width: 100%; /* Make the container full-width */
    display: flex;
    justify-content: center; /* Center the image horizontally */
    margin-top: 10px; /* Adjust the top margin as needed */
}

/* Style the image */
.image-container img {
    max-width: 100%; /* Make the image fit the container's width */
    height: auto; /* Maintain the aspect ratio */
}

.header-image-area {
    background-color: rgba(255, 255, 255, 0.8);
    height: calc(100vw * 300 / 1200);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: -1;
}

/* Add some styles for the main sections */
main > div {
    padding: 50px;
}

h1 {
    font-size: clamp(28px, 3.2vw, 40px);
    margin-bottom: 30px;
    font-weight: bold;
}

h2 {
    font-size: clamp(26px, 3vw, 36px);
    margin-bottom: 25px;
    font-weight: bold;
}

h3 {
    font-size: clamp(20px, 2.6vw, 30px);
    margin-bottom: 20px;
}

h4 {
    font-size: clamp(18px, 2.4vw, 24px);;
    margin-bottom: 15px;
}

p {
    font-size: clamp(16px, 2.4vw, 24px);;
    line-height: 1.5;
    margin-bottom: 10px;
}

ul {
    font-size: clamp(16px, 2.4vw, 20px);;
    line-height: 1.5;
    margin-bottom: 10px;
}

li {
    margin-bottom: 5px;
}

a[href^="http://"]:not([href*="efg-burgkunstadt.de"]):after, a[href^="https://"]:not([href*="efg-burgkunstadt.de"]):after {
	content: url('media/external-link.png');
	vertical-align:unset;
	padding-left:4px;
}

a {
    color: rgba(105, 85, 75, 0.8);
    /*background-color: yellow; /* Add your preferred background color */
  }
  
  /* Change the background color of links when hovered over */
  a:hover {
    color: rgba(105, 85, 75, 0.8);
    background-color: rgba(219, 158, 88, 1);
        border-radius: 5px;
        transition: all 0.3s ease-in-out;
        text-decoration: none;
  }
  
  /* Change the background color of links when they are active (being clicked) */
  a:active {
    color: rgba(233, 226, 215, 1); /* Background color when active */
    background-color: rgba(105, 85, 75, 0.8);
  }

  /* Change the color of visited links */
    a:visited {
        color: rgba(105, 85, 75, 1); /* Again, you can use any color */
    }

.additional-margin {
    margin-left: 5px; /* Adjust the margin value as needed */
    }

/* Styling for the footer */
.footer {
    /* font-size: clamp(10px, 1.9vw, 20px); */
    font-size: clamp(10px, 2.2vw, 20px);
    background-color: rgba(219, 158, 88, 1);
    color: rgba(105, 85, 75, 1);
    padding: 5px;
    text-align: center;
    position: fixed;
    bottom: -25px;
    left: 0;
    width: 100%;
    z-index: 99;
    transition: bottom 0.5s ease-in-out;
}

/* Show the footer when scrolled */
footer.show {
    bottom: 0;
}

.footer-links {
    
    margin-top: 0px;
    margin-bottom: 0px;
    display: flex;
    justify-content: center;
}
.footer-links a {
    font-size: clamp(16px, 2.6vw, 24px);
    color: rgba(105, 85, 75, 1);
    text-decoration: none;
    padding: 10px 20px;
    margin-right: 0px;
    background-color: rgba(233, 226, 215, 0.0);
    border-radius: 5px;
    transition: all 0.5s ease-in-out;
}
.footer-links a:hover {
    color: rgba(233, 226, 215, 1);
    background-color: rgba(105, 85, 75, 0.8);
    border-radius: 5px;
    transition: all 0.5s ease-in-out;
    text-decoration: none;
}

/* @media query for screens up to 610px */
@media screen and (max-width: 610px) {
    /* Adjust the top position and height of the header */
    header.flow {
        top: calc(40px - 100vw * 300 / 1200);
        height: calc(100vw * 300 / 1200);
    }
}

/* Media query for smaller screens */
@media screen and (max-width: 450px) {
    /* Adjust the top position and height of the header */
    header.flow {
        top: calc(37px - 100vw * 300 / 1200);
        height: calc(100vw * 300 / 1200);
    }
    nav {
        flex-direction: column;
        background-color: rgba(105, 85, 75, 0.8);
        position: fixed;
        top: 100px; /* Adjust the top position to prevent overlapping the header */
        right: -185px; /* Change the transform to set right to -200px to hide the navigation */
        width: 200px;
        height: calc(100vh - 190px);
        /*transform: translateX(200px);*/
        transition: right 1s ease-in-out;
    }

    /* Add styles for the navigation bar pseudo-element */
    nav::before {
        content: "Navigation"; /* Add the text you want to display */
        position: absolute;
        top: 30px; /* Adjust the top position as needed */
        left: -25px; /* Adjust the left position to move the text out of the navigation bar */
        transform: rotate(-90deg); /* Rotate the text to make it vertical */
        font-size: clamp(16px, 2.6vw, 24px); /* Adjust the font size as needed */
        color: rgba(233, 226, 215, 1);
        white-space: nowrap; /* Prevent text from wrapping */
}

    nav.open {
        right: 0; /* Set right to 0 to show the navigation */
        /*transform: translateX(0);*/
    }

    nav a {
        color: rgba(233, 226, 215, 1);
        display: block;
        padding: 10px 20px;
        margin: 5px; /* Add margin to the links to avoid overlapping */
    }

    nav a:hover {
        color: rgba(105, 85, 75, 0.8);
        background-color: rgba(219, 158, 88, 1);
        border-radius: 5px;
        transition: all 0.3s ease-in-out;
        text-decoration: none;
    }
    nav a:visited {
        color: rgba(219, 158, 88, 1); /* Again, you can use any color */
    }

    header:hover nav {
        right: 0; /* Show the navigation on header hover */
    }

    /* Adjust footer styles for smaller screens */
    footer {
        bottom: -20px; /* Start with footer hidden */
        transition: bottom 0.5s ease-in-out; /* Add a transition for smooth animation */
    }

    /* Show the footer when scrolled */
    footer.show {
        bottom: 0;
    }
}