@import url('https://fonts.googleapis.com/css?family=Josefin+Sans');

/* NICHT INDEX*/
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
    font-family: 'Josefin Sans', sans-serif;
    background-color: #333;
    color: white;
    display: flex;
    flex-direction: column;
}
main {
    flex: 1;
}

.imp {
    font-size: 3em; /* Larger font size for welcome message */
    text-align: left;
    margin-bottom: 20px;
	margin-top: 10px;
}
/* NICHT INDEX*/







body {
    font-family: 'Josefin Sans', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #333;
    color: white;
}

header {
    background-color: #1B1B1B;
    color: #fff;
    padding: 10px 0;
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 1000;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 20px;
}

header h1 {
    margin: 0;
}

header .logo {
    width: 50px;
    height: auto;
    margin-right: 20px;
}

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

nav ul li {
    margin-left: 20px;
}

nav ul li a {
    color: #fff;
    text-decoration: none;
    transition: color 0.3s;
}

nav ul li a:hover {
    color: #ddd;
}



section {
    padding: 80px 0 20px 0; /* Adjusted padding to account for fixed header */
}

section .container {
    padding: 0 20px;
}

h2 {
    margin-top: 0px;
    text-align: center;
    font-size: 2em;
}
h3{
	margin-top: 0px;
    text-align: center;
    font-size: 1.5em;
}

h4{
	margin-top: 0px;
    text-align: left;
    font-size: 2em;
}
h5{
	margin-top: 0;
  margin-bottom: 10px;
    text-align: left;
    font-size: 1.5em;
}

.welcome {
    font-size: 3em; /* Larger font size for welcome message */
    text-align: center;
    margin-bottom: 20px;
	margin-top: 10px;
}

.hero-image {
    width: 75%;
    height: auto;
    margin-bottom: 20px;
    
    display: block;
    margin: 0 auto; /* Center the image horizontally */
    opacity: 0; /* Initial opacity for the fade-in effect */
    transition: opacity 4s; /* Transition effect for the fade-in */
}



 .service-images {
     display: flex;
    

    justify-content: space-around;
	align-items: center; /* Vertically center the content */
	width: 85%;
	margin-left:auto;
 margin-right:auto;
 
 }
 
 .service-image {
    width: clamp(200px, 20%, 20%); /* Breite der Service-Bilder */
    height: auto;
    margin-bottom: 20px;
    opacity: 0; /* Initial opacity for the fade-in effect */
    transition: opacity 2s; /* Transition effect for the fade-in */
	
}

.about-image {
    max-width: 30%; /* Set the maximum width for each about image */
    height: auto;
    opacity: 0; /* Initial opacity for the fade-in effect */
    transition: opacity 2s; /* Transition effect for the fade-in */
}

.center-text {
    text-align: center;
    font-size: 1.8em;
    margin: 20px 0;
}



footer {
    background-color: #1B1B1B;
    color: #BBBBBB;
    text-align: center;
    padding: 10px 0;
	padding-bottom: 15px;
	margin-bottom: 0;
	 position: sticky;

  width:100%;
}

footer .container {
    padding: 0 20px;
	padding-bottom: 0;
	margin-bottom: 0;
}

footer p {
    margin: 5px 0;
	padding-bottom: 0px;
	margin-bottom: 0;
	color: #BBBBB;
}

.about-content {
    display: flex;
    align-items: center; /* Vertically center the content */
    justify-content: space-between;
    margin-bottom: 20px;

}

.about-text {
    font-size: 1.3em;
    text-align: justify;
    line-height: 150%;
    width: 40%;
    margin-left: 10%; 
    margin-right: 10%;
}

.about-placeholder-image {
    width: 25%;
    height: auto;
    margin-top: 30px; /* Added margin-top to separate from other content */
    margin-right: 15%;
	opacity: 0; /* Initial opacity for the fade-in effect */
    transition: opacity 2s; /* Transition effect for the fade-in */
}

.about-images {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

.about-image {
    
	width:clamp(200px,10%,30%);
    height: auto;
    opacity: 0;
    transition: opacity 2s;
    margin-top: 20px; /* Added margin-top to create space above the image */
}

.contact-table {
    width: 100%;
    max-width: 1000px;
    margin: 0 auto;
    border-collapse: collapse;
    text-align: left;
	margin-top:30px;
	font-size:1.3em
}

.contact-table th, .contact-table td {
    padding: 10px;
    /* border: 1px solid #ddd; */
}

.contact-table th {
    background-color: #444;
}

.contact-table a {
	margin-top:30px;
    color: white;
    text-decoration: none;
}


.text1{
	font-size:1.3em; text-align:justify; margin-left:clamp(5%, 25%, 25%); margin-right:clamp(5%, 25%, 25%);line-height: 150%; min-width:50%;max-width:90%
}

.text2{
	font-size:1.3em; text-align:center; width:50%; margin-left:25%; margin-right:25%;line-height: 150%
}

.text3 {
	font-size:1em; text-align:justify; width:40%; margin-left:30%; margin-right:30%;line-height: 150%; margin-top:30px;
}



@media screen and (max-width: 1300px) {
    /* Anpassungen für Handys */
    .service-images {
     display: flex;
    

    justify-content: space-around;
	align-items: center; /* Vertically center the content */
	width: 85%;
	margin-left:auto;
	margin-right:auto;
    }

    .service-image {
        width: clamp(200px, 30%, 60%); /* Bilder nehmen auf Handys den ganzen Bildschirm ein */
    }
.about-text {
    font-size: 1.3em;
    text-align: left;
    line-height: 150%;
    width: 50%;
    margin-left: 5%; 
    margin-right: 5%;
}
.about-placeholder-image {
    width: 35%;
    height: auto;
    margin-top: 30px; /* Added margin-top to separate from other content */
    margin-right: 5%;
	opacity: 0; /* Initial opacity for the fade-in effect */
    transition: opacity 2s; /* Transition effect for the fade-in */
}
.text1{
	font-size:1.3em; text-align:justify; margin-left:clamp(5%, 20%, 25%); margin-right:clamp(5%, 20%, 25%);line-height: 150%; min-width:50%;max-width:90%
}
.text3 {
	font-size:1em; text-align:justify; width:50%; margin-left:25%; margin-right:25%;line-height: 150%; margin-top:30px;
}
}


@media screen and (max-width: 1000px) {
    /* Anpassungen für Handys */
    .service-images {
        flex-direction: column;
        align-items: center;
    }

    .service-image {
        width: clamp(200px, 45%, 60%); /* Bilder nehmen auf Handys den ganzen Bildschirm ein */
    }
	
	.text1{
		font-size:1.3em; text-align:justify; margin-left:15%; margin-right:15%;line-height: 150%; width:70%; text-align: justify
	}
	
	.text2{
		font-size:1.3em; text-align:center; width:70%; margin-left:15%; margin-right:15%;line-height: 150%
	}
	
	
	.about-content {
    display: block;
    align-items: center; /* Vertically center the content */
    justify-content: space-between;
    margin-bottom: 20px;
	
}

.about-text {
    font-size: 1.3em;
    text-align: left;
    line-height: 150%;
    width: 90%;
    margin-left: 5%; 
    margin-right: 5%;
}

.about-placeholder-image {
    display: block;
	 width: 75%;
    height: auto;
    margin-top: 30px; /* Added margin-top to separate from other content */
    margin-left: auto;
  margin-right: auto;
  opacity: 0; /* Initial opacity for the fade-in effect */
    transition: opacity 2s; /* Transition effect for the fade-in */
}
  
  .text3 {
	font-size:1em; text-align:left; width:90%; margin-left:5%; margin-right:5%;line-height: 150%; margin-top:30px;
}
  .hero-image {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    
    display: block;
    margin: 0 auto; /* Center the image horizontally */
    opacity: 0; /* Initial opacity for the fade-in effect */
    transition: opacity 4s; /* Transition effect for the fade-in */
}

}






@media screen and (max-width: 768px) {
    /* Anpassungen für Handys */
    .service-images {
        flex-direction: column;
        align-items: center;
    }

    .service-image {
        width: clamp(200px, 60%, 60%); /* Bilder nehmen auf Handys den ganzen Bildschirm ein */
    }
	
	.text1{
		font-size:1.3em; text-align:justify; margin-left:5%; margin-right:5%;line-height: 150%; width:90%; text-align: left
	}
	
	.text2{
		font-size:1.3em; text-align:center; width:90%; margin-left:5%; margin-right:5%;line-height: 150%
	}
	
	
	.about-content {
    display: block;
    align-items: center; /* Vertically center the content */
    justify-content: space-between;
    margin-bottom: 20px;
	
}

.about-text {
    font-size: 1.3em;
    text-align: left;
    line-height: 150%;
    width: 90%;
    margin-left: 5%; 
    margin-right: 5%;
}

.about-placeholder-image {
    display: block;
	 width: 95%;
    height: auto;
    margin-top: 30px; /* Added margin-top to separate from other content */
    margin-left: auto;
  margin-right: auto;
  opacity: 0; /* Initial opacity for the fade-in effect */
    transition: opacity 2s; /* Transition effect for the fade-in */
}
  
  .text3 {
	font-size:1em; text-align:left; width:90%; margin-left:5%; margin-right:5%;line-height: 150%; margin-top:30px;
}
  .hero-image {
    width: 100%;
    height: auto;
    margin-bottom: 20px;
    
    display: block;
    margin: 0 auto; /* Center the image horizontally */
    opacity: 0; /* Initial opacity for the fade-in effect */
    transition: opacity 4s; /* Transition effect for the fade-in */
}
header{
	display:none;
}
.contact-table {
    width: 70%;
    max-width: 500px;
    margin: 0 auto;
    border-collapse: collapse;
    text-align: left;
	margin-top:30px;
	font-size:1em
}
.dat {
    font-size: 2em; /* Larger font size for welcome message */
    text-align: center;
    margin-bottom: 20px;
	margin-top: 10px;
}
}