/* Define the font faces */
@font-face {
    font-family: 'TeX Gyre Heros';
    src: url('/fonts/texgyreheros/texgyreheros-bold.woff2') format('woff2'),
        url('/fonts/texgyreheros/texgyreheros-bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

body { 
margin: 0; 
padding: 0;
}

.main-map-container {
width: 100%;
height: 100%; /* Adjusted height */
top: 0;
left: 0;
position: relative;
display: flex; /* Use flexbox to stack elements */
flex-direction: column; /* Stack elements vertically */
z-index: 2; /* Ensure it's ontop other elements */
}

.map-overlay {
position: fixed; /* Change to fixed to keep the header in place */
width: 100%;
top: 0;
left: 0;
z-index: 5; /* Ensure the overlay is above the map */
display: flex;
padding: 12px 20px 20px 20px; /* Add padding to the left and right to align with sub-headlines */
box-sizing: border-box; /* Ensure padding is included in the width */
}

.headlines {
margin: 0;    /* Remove margin to align items at the top */
padding: 0; /* Remove padding to align items at the top */
justify-content: flex-start; /* Align headlines at the top */
background: none; /* Set background color of the body */
}

.sub-headlines {
margin: 0;    /* Remove margin to align items at the top */
padding: 0; /* Remove padding to align items at the top */
display: flex;
justify-content: space-between;
background: none; /* Set background color of the body */
color: black; /* Black text color */
width: 100%; /* Ensure it takes the full width of its container */
background: none; /* Set background color of the body */
}

.map-overlay h1 { 
margin: 0;    /* Remove margin to align items at the top */
padding: 0; /* Remove padding to align items at the top */
font:  calc(30px + 3vw) 'TeX Gyre Heros', sans-serif;  /* basic font size plus Responsive font size based on viewport width */
color: black; /* Set text color to black */
-webkit-text-stroke: 0.5px black; /* Adds an outline for fatness*/
transform: scaleY(0.98); /* compresses the height */
font-weight: bold;
line-height: 1; /* Ensures there's no extra vertical spacing */
text-align: left; /* Align text to the left */
width: 100%;
}

.map-overlay h1 a { 
margin: 0;    /* Remove margin to align items at the top */
padding: 0; /* Remove padding to align items at the top */
font:  inherit;
color: black; /* Set text color to black */
text-decoration: none; /* Remove underline from link */
-webkit-text-stroke: 0.5px black; /* Adds an outline for fatness*/
transform: scaleY(0.98); /* compresses the height */
font-weight: bold;
line-height: 1; /* Ensures there's no extra vertical spacing */
text-align: left; /* Align text to the left */
}

.map-overlay h2 { 
margin: 0;    /* Remove margin to align items at the top */
font:  calc((30px + 3vw)/2) 'TeX Gyre Heros', sans-serif;  /* basic font size plus Responsive font size based on viewport width */
line-height: 1; /* Ensures there's no extra vertical spacing */
color: black; /* Set text color to black */
text-align: left; /* Align text to the left */
font-weight: bold;
text-decoration: none; /* Remove underline from link */
}

.map-overlay h2 a { 
font: inherit; /* Inherit the font properties from h2 */
color: inherit; /* Inherit the color from h2 */
line-height: inherit; /* Ensures there's no extra vertical spacing */
text-decoration: none; /* Remove underline from link */
text-align: inherit; /* Inherit the text alignment from h2 */
}

.map-overlay h2 a:hover {
background-color: black; /* Change background color to black */
color: white; /* Change text color to white */
}

/* Media query for wide screens */
@media (min-width: 1000px) {
    .map-overlay  {
        flex-direction: row; /* Stack elements horizontally */
        justify-content:space-between; /* move elemnts apart from each other */
        align-items: baseline; /* Align elements to the bottom */
    }
    .map-overlay .headlines {
        flex: 1 0 auto; /* Ensures that h1 takes the required space and maintains the padding */
        box-sizing: border-box; /* Ensure padding is included in the width */
    }
    .map-overlay h1 a {
        white-space: nowrap; /* Prevent h2 from wrapping to a new line */
        box-sizing: border-box; /* Ensure padding is included in the width */
    }
    .map-overlay .sub-headlines {
        justify-content: flex-end; /* Align sub-headlines to the right */
        box-sizing: border-box; /* Ensure padding is included in the width */
        flex-direction: row; /* Place sub-headlines next to each other */
        flex-shrink: 1;
        justify-content:space-between; /* move elemnts apart from each other */
    }
    .map-overlay h2 {
        white-space: nowrap; /* Prevent h2 from wrapping to a new line */
        flex-shrink: 1;
        padding: 0.1vw;
    }
}

/* Media query for narrow screens */
@media (max-width: 1000px) {
    .map-overlay  {
        flex-direction: column; /* Stack elements vertically */
        justify-content: flex-start; /* Align elements at the top */
        align-items:flex-start; /* Align elements to the left */
        width:100%;
    }
   
    .headlines {
        margin: 0;
        padding: 0;
        justify-content: flex-start;
        background: none;
        width: 100%;
        box-sizing: border-box;
    }

    .map-overlay h1 a {
        display: flex;
        justify-content: space-between;
        width:100%;
        margin: 0;    /* Remove margin to align items at the top */
        padding: 0; /* Remove padding to align items at the top */
        white-space: nowrap; /* Prevent h2 from wrapping to a new line */
        box-sizing: border-box; /* Ensure padding is included in the width */
        font-size: 10vw; /* Subtract 40px padding from the viewport width */
        color: inherit; /* Set text color to black */
        text-decoration: inherit; /* Remove underline from link */
        -webkit-text-stroke: inherit; /* Adds an outline for fatness*/
        transform: inherit; /* compresses the height */
        font-weight: inherit;
        line-height: inherit; /* Ensures there's no extra vertical spacing */
        text-align: justify; /* move words to the left anr right boarder allign left and right */
    }    
    .sub-headlines {
        flex-direction: row; /* Place sub-headlines next to each other */
    }

}

/* Background Image for the Entire Site */
.background-image {
background-image: url('/image/PARKING__potential_index__1_50000__72dpi.png');
background-size: cover; /* Ensure the image covers the entire div */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-attachment: fixed; /* Ensure the image stays in place during scroll */
width: 100vw; /* Full width of the parent container */
height: 100vh; /* Full height of the parent container */
position: fixed; /* Fixed position relative to the viewport */
top: 0;
left: 0;
z-index: -1; /* Ensure it's behind other elements */
}

/* Background Image for the Header */
.header-background-image {
background-image: url('/image/PARKING__potential_index__1_50000__72dpi.png');
background-size: cover; /* Ensure the image covers the entire div */
background-position: center; /* Center the image */
background-repeat: no-repeat; /* Do not repeat the image */
background-attachment: fixed; /* Ensure the image stays in place during scroll */
width: 100vw; /* Full width to match the body background */
height: 6vh; /* Limit height to 6% of the viewport */
position: fixed; /* Fixed position relative to the viewport */
top: 0;
left: 0;
z-index: 5; /* Ensure it's behind other elements */
}

/* VIDEO STYLING */

.info-blog-wrapper {
    position: relative;
    width: 100%;
    top:0;
    display: flex; /* Use flexbox to stack elements */
    flex-direction: column; /* Stack elements vertically */
    box-sizing: border-box;
    padding: 0 20px 0px 20px; /* Add top padding dynamically based on .map-overlay's height "0" will be exchanged through JS calculation of overlay height */
    z-index: 2;
}

.video-and-text-package {
    display: flex; /* Use flexbox to align video and text on top of each other */
    flex-direction: row; /* Align items horizontally by default */
    align-items: flex-start; /* Align items to the top */
    background: none; /* Remove any background to prevent black bars */
    width: 100%;
    box-sizing: border-box;
}

/* Media query for narrow screens */
@media (max-width: 1000px) {
    .video-and-text-package {
        flex-direction: column; /* Stack items vertically on narrow screens */
    }
}

.info-text {
    width: 38.2%;
    margin: 0; /* Remove margin to align items at the top */
    padding: 0;
    font: clamp(1px, 2vw, 16px) 'TeX Gyre Heros', sans-serif;
    font-style: italic; /* Set text to italic */
    color: #b39e5e; /* Set text color to black */
    text-decoration: none; /* Remove underline from link */
    opacity: 1;
    transform: scaleY(0.98); /* Compresses the height */
    font-weight: bold;
    line-height: 1.6;
    text-align: justify;
    text-justify: auto;
    background: none; /* Remove any background to prevent black bars */
}

/* Media query for narrow screens */
@media (max-width: 1000px) {
    .info-text {
        width: 100%;
    }
}

.video-and-title-group {
    padding-left: 30px;
    display: flex; /* Use flexbox to align video and text on top of each other */
    flex-direction: column; /* Align items horizontally by default */
    align-items: flex-start; /* Align items to the top */
    background: none; /* Remove any background to prevent black bars */
    width: 61.8%;
    max-width: 61.8;
    box-sizing: border-box;
}


/* Media query for narrow screens */
@media (max-width: 1000px) {
    .video-and-title-group {
        width: 100%;
        padding-left: 0px;
    }
}

.video-wrapper {
    margin: 0; /* Remove margin to align items at the top */
    width: 100%; /* Take up 30% of the container’s width */
    max-width: 100%; /* Ensure it doesn't exceed its parent */
    max-height: 450px; /* Keep the height consistent */
    display: flex;
    justify-content: center; /* Center the video horizontally */
    background: none; /* Remove any background to prevent black bars */
    position: relative;
    overflow: hidden; /* Hide overflow */
    box-sizing: border-box; /* Include padding and border in the element's total width */
    z-index: 2; /* Higher z-index to ensure it appears above the title */
    box-shadow: 0 0 10px rgba(179, 158, 94, 0.1); /* Add a light outer glow or shadow */
}

.video-js {
    max-width: 100%; /* Take up 100% of the container’s width */
    height: auto; /* Adjust height automatically */
    max-height: 100%; /* Restrict max height to container */
    min-height: 450px; /* Set the maximum width for the video */
    background: none; /* Remove any background to prevent black bars */
    position: relative; /* Ensure the position is relative for play button centering */
    overflow: hidden; /* Hide overflow */
    box-sizing: border-box; /* Include padding and border in the element's total width */
    padding-bottom: 15px; /* Add space at the bottom of the video container for the control bar */
}

.video-js .vjs-tech {
    position: relative; /* Position absolutely within .video-js */
    top: 0;
    left: 0;
    width: 100%;
    max-width: 100%; 
    max-height: 100%; /* Restrict max height to container */
    background: none; /* Remove any background to prevent black bars */
    box-sizing: border-box; /* Include padding and border in the element's total width */
}

.video-js .vjs-control-bar {
    height: 30px; /* 30px is the dafult height */
    width: 100%;
    max-width: 100%;
    position: absolute; 
    bottom: 0; 
    left: 0;
    box-sizing: border-box;
    background-color: transparent !important; /* Remove the background */
    color:#b39e5e !important; /* Set the text and icon colors to black */
}

/* Style the progress bar slider to be black */
.video-js .vjs-progress-control .vjs-play-progress,
.video-js .vjs-progress-control .vjs-load-progress {
    background-color: #b39e5e !important; /* Make the progress bar black */
}

/* Optional: Hide any background for the full control bar area */
.video-js .vjs-control-bar,
.video-js .vjs-progress-control {
    background: none !important; /* Ensure no background */
    box-shadow: none !important; /* Remove any shadows */
}

/* Style the volume slider to be black */
.video-js .vjs-volume-bar .vjs-volume-level {
    background-color: #b39e5e !important; /* Make the volume level black */
}

/* Style the progress bar for the unplayed portion */
.video-js .vjs-progress-control .vjs-load-progress {
    background-color: #b39e5e !important; /* Set the unplayed portion to black */
}

/* Ensure the buffer (loaded but not yet played) portion is also styled */
.video-js .vjs-progress-control .vjs-load-progress div {
    background-color: #d7c99f !important; /* Set the buffered portion to black */
}

/* Style the mouse display (when hovering over the progress bar) */
.video-js .vjs-progress-control .vjs-mouse-display {
    background-color: #b39e5e !important; /* Ensure the hover preview is black */
}

/* Style the progress bar slider to be black */
.video-js .vjs-progress-control .vjs-play-progress {
    background-color: #b39e5e !important; /* Ensure the played portion is black */
}



/* Hide the default play button icon */
.video-js .vjs-big-play-button .vjs-icon-placeholder {
    display: none;
}

/* Customize the entire play button to show an svg-file with video title instead */
.video-js .vjs-big-play-button {
    position: absolute; /* Position relative to the video container */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.8;
    height: 100%; /* Adjust size as needed */
    width: 100%;; /* Adjust size as needed */
}

/* Specific styling for the 'In Use' video´s play-button */
.video-js.video-in-use .vjs-big-play-button {
    background: url('/image/ZWSTD_DETEKTOR__In_Use__Play_Button__resize_II.svg'); /* Remove default background */
    border: none; /* Remove border */
    background-size: contain; /* Ensure the SVG fits the button */
    background-repeat: no-repeat; /* Prevent repeating the SVG */
    background-position: center; /* Center the SVG */
}

/* Specific styling for the 'Buildability Index' video */
.video-js.video-buildability .vjs-big-play-button {
    background: url('/image/ZWSTD_DETEKTOR__Buildability_Index__Play_Button__resize_II.svg'); /* Remove default background */
    border: none; /* Remove border */
    background-size: contain; /* Ensure the SVG fits the button */
    background-repeat: no-repeat; /* Prevent repeating the SVG */
    background-position: center; /* Center the SVG */
}