body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
}

header {
    background-color: #333;
    color: white;
    padding: 10px 0;
}

ul.scrollmenu {
  background-color: #333;
  overflow: auto;
  white-space: nowrap;
}

ul.scrollmenu li {
  display: inline-block;
  color: white;
  text-align: center;
  padding-left: 10px;
  text-decoration: none;
}

ul.scrollmenu li:hover {
  background-color: #777;
}

nav ul {
    list-style-type: none;
    padding-bottom: 10px;
}

nav ul li {
    display: inline-block;
    margin-right: 20px;
    
}

nav ul li a {
    color: white;
    text-decoration: none;
    font-weight: bold;
}

nav ul li a:hover {
    text-decoration: underline;
}

main {
    padding-left: 20px;
    padding-right: 20px;
}

h1 .small{
  font-size: medium;
}

p .bold{
  font-weight: bold;
}

section {
    position: relative; /* Set position to relative for the overlay */
    min-height: 400px; /* Set a height for the sections */
    background-size: cover; /* Ensure the background image covers the entire section */
    background-position: center; /* Center the background image */
    margin: 40px 0; /* Added margin for spacing between sections */
    color: white; /* Change text color for contrast */
    display: flex;
    align-items: center; /* Center text vertically */
    justify-content: center; /* Center text horizontally */
    text-align: center; /* Center text alignment */
    display: flex;
    flex-direction: row;
}

section::before {
    content: ""; /* Create an empty pseudo-element */
    position: absolute; /* Position it absolutely */
    top: 0; /* Cover the top */
    left: 0; /* Cover the left */
    right: 0; /* Cover the right */
    bottom: 0; /* Cover the bottom */
    background-color: rgba(0, 0, 0, 0.5); /* Grey overlay with 50% opacity */
    z-index: 1; /* Position it below the text */
}

section.notrans {
    position: relative; /* Set position to relative for the overlay */
    background-size: cover; /* Ensure the background image covers the entire section */
    background-position: top center; /* Center the background image */
    padding-top: 56.25%; /* Aspect ratio of 16:9 (height/width * 100) */
    color: white; /* Change text color for contrast */
    display: flex;
    align-items: center; /* Center text vertically */
    justify-content: center; /* Center text horizontally */
    text-align: center; /* Center text alignment */
    display: flex;
    flex-direction: row;
}
section.notrans::before {
    content: ""; /* Create an empty pseudo-element */
    position: absolute; /* Position it absolutely */
    top: 0; /* Cover the top */
    left: 0; /* Cover the left */
    right: 0; /* Cover the right */
    bottom: 0; /* Cover the bottom */
    background-color: rgba(0, 0, 0, 0.0); /* Grey overlay with 50% opacity */
    z-index: 1; /* Position it below the text */
    
    width: 100%; /* Full width of the parent */
    //min-height: 1000px; /* Set a fixed height or use min-height */
    background-size: cover; /* Cover the entire section while maintaining aspect ratio */
    background-position: top center; /* Center the image */
    background-repeat: no-repeat; /* Prevent the image from repeating */
}

section h1, section h2, section p {
    position: relative; /* Position text above the overlay */
    z-index: 2; /* Position text above the overlay */
    color: black;
}
section h1, section h2{
  width: 40%;
}
section p{
  width: 60%;
  text-align: left;
  font-size: 20px;
  line-height: 1.6;
}

#sunrise {
    background-image: url('img/Sonnenaufgang-mit-Text.jpg');
}

#home {
    background-image: url('img/messschieber.jpg');
}

#alleinstellungsmerkmal {
    background-image: url('img/drafting.jpg');
}

#dienstleistung {
    background-image: url('img/technical-drawing.png');
}

#profil {
    background-image: url('img/construction_sunset.jpg');
}

#referenzen {
    background-image: url('img/steel_construction_painting.jpg');
}

#berufung {
    background-image: url('img/gears.jpg');
}

#bilder {
    background-image: url('path/to/your/images-background.jpg');
}

#kontakt {
    background-image: url('path/to/your/contact-background.jpg');
}

#kooperation {
    background-image: url('path/to/your/cooperation-background.jpg');
}

footer {
    text-align: center;
    padding: 10px 0;
    background-color: #333;
    color: white;
}

.flex-container {
  display: flex;
  flex-direction: row;
}
/* Optional: Add a semi-transparent overlay */
.flex-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255, 255, 255, 0.8); /* Adjust the color and opacity as needed */
    z-index: 0; /* Layer below the text */
}

.flex-item-left {
  padding: 10px;
  flex: 40%;
  opacity: 1; /* Ensure opacity is set to 1 */
  z-index: 1; /* Bring them above the background */
  color:black;
}

.flex-item-right {
  padding: 10px;
  flex: 60%;
  opacity: 1; /* Ensure opacity is set to 1 */
  z-index: 1; /* Bring them above the background */
  color:black;
}

<style>
  a[href^="tel:"]:before {
    content: "\260e";
    margin-right: 10px;
  }
</style>

/* Responsive layout - makes a one column-layout instead of two-column layout */
@media (max-width: 1000px) {
  .flex-container {
    flex-direction: column;
  }
  .flex-item-left {
    flex: 90%;
  }
  .flex-item-right {
    flex: 90%;
  }
}


/* For lines below each other */
#wrapper{
    margin-left:auto;
    margin-right:auto;
    height:auto; 
    width:auto;
}
#inner1{
    float:left; 
}
#inner2{
    float:left; 
}