/* Allgemeine Stile */
body {font-family: 'Arial', sans-serif;margin: 0;padding: 0;color: #333;line-height: 1.6;}

/* Header/Navigation */
header {position: fixed;top: 0;left: 0;width: 100%;background-color: #2c3e50;color: white;padding: 10px 0;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);z-index: 1000;}

nav {display: flex;justify-content: center;}
nav ul {display: flex;list-style: none;margin: 0;padding: 0;}
nav li {margin: 0 15px;}
nav a {color: white;text-decoration: none;font-weight: bold;padding: 5px 10px;border-radius: 4px;transition: background-color 0.3s;}
nav a:hover {background-color: #34495e;}


#home{} 
.logo{text-align: left;width: 72%;}
.logo img{width: 350px;}
.main-caption{display: flex;align-items: end;justify-content: center;}
.main-caption img{width: 200px;margin: 0 0 0 50px;}

.main-caption h2{text-align: left;margin: 0 0 15px 0;line-height: normal;font-size: 30px;}
.main-caption p{margin: 0;padding: 0;text-align: left;text-transform: uppercase;font-weight: bold;}


/* Sections */
section {min-height: 100vh;padding: 50px 25px;display: flex;flex-direction: column;justify-content: center;align-items: center;text-align: center;}
section h2 {font-size: 2.5rem;margin:0 0 1rem 0; text-transform:uppercase;}
section p {max-width: 900px;font-size: 1.1rem;padding: 0;margin: 0 0 20px 0;}

/* Individuelle Section-Farben */
#home {background-color: #014127;color: white;}
#about {background-color: #b97e30;color: white;}
#services {background-color: #0ac95a;color: white;}
#contact {background-color: #00301d;color: white;}

/* Zurück-nach-oben Button */
.back-to-top {position: fixed;bottom: 20px;right: 20px;background-color: #2c3e50;color: white;width: 50px;height: 50px;border-radius: 50%;display: flex;justify-content: center;align-items: center;text-decoration: none;font-size: 1.5rem;opacity: 0;visibility: hidden;transition: all 0.3s;}

.back-to-top.visible {opacity: 1;visibility: visible;}

.back-to-top:hover {background-color: #34495e;}


/* services */
section#services ul {list-style: none;padding-left: 0;display: flex;align-items: center;justify-content: center;margin:35px 0 0 0;}
section#services ul li {font-size: 1.5rem;color: #444;background-color: #fff7f5;border: 1px solid #f2d8d3;border-radius: 10px;padding: 15px 25px;margin: 0 10px;box-shadow: 0 4px 10px rgba(0,0,0,0.05);}



/* Contact List Styling */
section#contact ul {list-style: none;padding-left: 0;display: flex;align-items: center;justify-content: center;margin:20px 0 35px 0;}
section#contact ul li {font-size: 1rem;color: #444;background-color: #fff7f5;border: 1px solid #f2d8d3;border-radius: 10px;padding: 15px 25px;margin: 0 10px;box-shadow: 0 4px 10px rgba(0,0,0,0.05);}
section#contact ul li a {color: #d66b5d;text-decoration: none;transition: color 0.3s ease;}
section#contact ul li a:hover {color: #a8473a;text-decoration: underline;}




/* Tablet View (max-width: 991px) */
@media (max-width: 991px) {

.logo{text-align: center;width: 100%;}
.logo img{width: 240px;}
.main-caption{flex-direction: column;    align-items: center;}
.main-caption img{width: 215px;margin: 25px 0 0 0;}

.main-caption h2{text-align: center;margin: 20px 0 12px 0;font-size: 25px;}
.main-caption p{margin: 0;padding: 0;text-align: center;}


nav ul {flex-direction: row;gap: 10px;}
nav li {margin: 0;}
section h2 {font-size: 2rem;}
section p {font-size: 1rem;padding: 0;}
section#services ul,section#contact ul {flex-wrap: wrap;justify-content: center;margin: 10px 0 20px 0;}
section#services ul li,section#contact ul li {margin: 10px 10px;font-size: 1.2rem;padding: 12px 20px;}

}



/* Mobile View (max-width: 600px) */
@media (max-width: 600px) {
nav ul {flex-direction: row;gap: 5px;}
.back-to-top {width: 40px;height: 40px;font-size: 1.2rem;}
section {padding: 50px 20px;}
section h2 {font-size: 1.6rem;}
section p {font-size: 0.95rem;}
section#services ul li,section#contact ul li {width: 100%;margin: 5px 0;font-size: 1rem;padding: 8px 15px;}

}