/*#region Desktop*/

/*#region Header*/

header{
    background-image:url('wasser.jpg');
    margin: 0px;
    width: 100%;
    background-size: cover;

}

/*#region Logo*/
.logo-container {
    display: flex;
    align-items: center; /* Zentriert die Elemente vertikal */
}

.logo-container img {
    max-width: 150px; /* Maximale Breite des Logos anpassen */
    margin-right: 0px; /* Abstand zwischen Logo und Text */
    margin-left: 10px;
}

.logo-container h1 {
    display: flex;
    justify-content: center;
}

.logo-container h2 {
    display: flex;
    justify-content: center;
}
/*#endregion Logo*/

/*#region NavBar*/
/* Stil für die Navigationsleiste */
#nav {
    width: 100%; /* Nimmt die volle Breite des Bildschirms ein */
    background-color: #003e51; /* Hintergrundfarbe der Navigationsleiste */
    padding: 10px 0; /* Fügt oben und unten 10px und links und rechts 0px Padding hinzu */
    position: sticky; /* Navigationsleiste wird fixiert, wenn sie den Bildschirmrand erreicht */
    top: 100; /* Am oberen Rand des Bildschirms positionieren */
    z-index: 1000; /* Z-index für die Positionierung über anderen Inhalten */
}

nav a {
    color: white; /* Textfarbe der Links */
    text-decoration: none; /* Entfernt Unterstreichungen von Links */
    padding: 0 15px; /* Fügt 15px Padding links und rechts hinzu */
}

nav button {
    background-color: transparent; /* Transparenter Hintergrund für Buttons */
    border: none; /* Entfernt die Standardrahmen der Buttons */
    cursor: pointer; /* Zeigt an, dass die Schaltfläche anklickbar ist */
}



/*#endregion NavBar*/

/*#endregion Header*/

/*#region Body*/

.text-container {
    flex-grow: 1; /* Lässt den Textcontainer den verbleibenden Platz einnehmen */
}

body {
    font-family: Arial, sans-serif; /* Allgemeine Schriftart */
    margin: 0; /* Entfernt den Standardabstand des Body-Elements */
    padding: 0; /* Entfernt den Standardinnenabstand des Body-Elements */
    text-align: center; /* Zentriert den Text horizontal */
    height: auto;
}

main {
    display: flex; /* Verwendet Flexbox-Layout für das Hauptinhaltselement */
    flex-direction: column; /* Stapelt die Elemente vertikal */
    align-items: center; /* Zentriert die Elemente horizontal */
    background-image: url('bodyhintergrund.jpg');
    background-repeat: no-repeat; /* Hintergrundbild wird nicht wiederholt */
    background-size: cover; /* Hintergrundbild wird auf den gesamten Bereich gestreckt */
    padding: 20px; /* Innenabstand für den Hauptinhalt */
    flex-grow: 1;
}

/* Überschriften */
h2 {
    font-size: 24px; /* Größe der Überschriften */
    color: #333; /* Textfarbe */
    margin-bottom: 10px; /* Abstand nach unten */
}
h3 {
    display: flex; /* Verwendet Flexbox-Layout für das Hauptinhaltselement */
    flex-direction: column; /* Stapelt die Elemente vertikal */
    align-items: center; /* Zentriert die Elemente horizontal */
    background-color: rgb(255, 255, 255, 0.7);
}

.Text{
    background-color: rgb(255, 255, 255, 0.7);
    padding: 10px;
}

/* Abschnittsstil */
section {
    max-width: 800px; /* Maximale Breite für Abschnitte */
    margin-bottom: 30px; /* Abstand nach unten */
    padding: 20px; /* Innenabstand für Abschnitte */
    background-color: rgb(255, 255, 255, 0.7); /* Hintergrundfarbe für Abschnitte */
    border-radius: 10px; /* Abgerundete Ecken für Abschnitte */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Schatten für Abschnitte */
}

/* Container für die Listen */
ul {
    list-style-type: disc; /* Listenpunkte als Füllkreise */
    margin-left: 0; /* Setzt den linken Außenabstand auf 0, um die Liste zu zentrieren */
    padding-left: 0; /* Setzt den linken Innenabstand auf 0 */
    display: flex; /* Verwendet Flexbox-Layout für die Liste */
    flex-direction: column; /* Listenpunkte werden vertikal angeordnet */
    align-items: center; /* Zentriert die Listenpunkte horizontal */
}

/* Listenpunkte */
li {
    margin-bottom: 10px; /* Abstand nach unten zwischen Listenpunkten */
}

/* Allgemeiner Stil für Absätze */
p {
    font-size: 16px; /* Schriftgröße */
    color: #1e1e1e; /* Textfarbe */
    line-height: 1.5; /* Zeilenhöhe */
    margin-bottom: 10px; /* Abstand nach unten */
}

.Leistungen{ /* Mit diesen beiden Blöcken wird die Dartsellung der Leistungen in leistungen.html gestyled */
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.Einzelleistung{
    width: calc(30% - 10px); /* 30% Breite minus 10px Abstand */
    margin-bottom: 20px; 
}

.Einzelleistung img {
    width: 100%; /* Setzt die Breite auf 100%, sodass alle Bilder die gleiche Breite haben */
    height: auto; /* Das Bild passt sich proportional an die Breite an */
    border-radius: 50px; /* Fügt abgerundete Ecken zum Bild hinzu */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Fügt einen Schatten hinzu */
}

.ueber_uns h2
{
    color: black;
}

/* Sections für die Beispielbilder aus der Arbeit */
#galerie {
    background-color: rgba(255, 255, 255, 0.7);
    max-width: calc(5 * (200px + 10px)); /* Berechnet die maximale Breite basierend auf der Breite von drei Bildern und ihren Abständen */
    margin: 0 auto; /* Zentrierung der Section */
    width: fit-content;
    padding: 20px; /* Innenabstand für die Section */
    overflow-x: auto; /* Horizontale Scrollleiste anzeigen, falls Inhalt überläuft */
    white-space: nowrap; /* Verhindert das Umbruch der Bilder */
}

.bilder-container {
    display: flex; /* Verwendet Flexbox-Layout für die Bilder */
    gap: 10px; /* Abstand zwischen den Bildern */
}

.bilder-container img {
    max-width: 200px; /* Maximale Breite der Bilder */
    height: auto; /* Automatische Höhe basierend auf der Bildbreite */
    margin-right: 10px; /* Abstand zwischen den Bildern */
}

/*#endregion Body*/

/*#region Footer*/
footer {
    background-color: #003e51; /* Hintergrundfarbe des Footers */
    color: white; /* Textfarbe */
    padding: 20px; /* Innenabstand des Footers */
    text-align: center; /* Text zentrieren */
    height: 5vh;
} 
/*#endregion Footer*/

/*#endregion Desktop*/

/*#region Smart phone*/
@media only screen and (max-width: 600px) {
/*#region Header*/

/*#endregion Logo*/

/*#region NavBar*/
#nav {
    width: 100%;
    background-color: #003e51;
    padding: 10px 0;
    position: sticky;
    top: 0;
    z-index: 1000;
}

nav a {
    color: white;
    text-decoration: none;
    padding: 5px 10px; /* Reduziert den Link-Abstand */
    display: block; /* Macht die Links block und füllt die ganze Breite */
    text-align: center; /* Zentriert den Link-Text */
}

nav button {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

/*#endregion NavBar*/

/*#endregion Header*/

/*#region Body*/

main {
    padding: 10px; /* Verringert den äußeren Abstand */
    height: auto;
}

h2 {
    font-size: 20px; /* Reduziert die Schriftgröße der Überschriften */
}

h3 {
    padding: 10px; /* Erhöht den Abstand um die Überschriften */
    font-size: 18px; /* Reduziert die Schriftgröße der Untertitel */
}

section {
    padding: 15px; /* Reduziert den Innenabstand der Abschnitte */
    margin-bottom: 20px; /* Verringert den Abstand zwischen den Abschnitten */
}

ul {
    padding-left: 20px; /* Erhöht den linken Innenabstand der Listen */
}

li {
    margin-bottom: 8px; /* Verringert den Abstand zwischen den Listenelementen */
}

p {
    font-size: 14px; /* Reduziert die Schriftgröße der Absätze */
    line-height: 1.3; /* Verringert den Zeilenabstand der Absätze */
}

.Einzelleistung {
    width: 100%; /* Ändert die Breite der Einzelleistungen auf 100% */
    margin-bottom: 15px; /* Verringert den Abstand zwischen den Einzelleistungen */
}

.bilder-container {
    overflow-x: auto; /* Fügt eine horizontale Scrollleiste für die Bildcontainer hinzu */
    gap: 5px; /* Verringert den Abstand zwischen den Bildern */
}

.bilder-container img {
    max-width: 100%; /* Legt die maximale Breite der Bilder auf 100% des Containers fest */
    max-height: 100%; /* Legt die maximale Höhe der Bilder auf 100% des Containers fest */
    margin-right: 5px; /* Verringert den Abstand zwischen den Bildern */
    object-fit: contain; /* Stellt sicher, dass das Bild innerhalb seines Containers proportioniert angezeigt wird */
}


#galerie {
    background-color: rgba(255, 255, 255, 0.7);
    max-width: calc(1.5 * (200px + 10px)); /* Berechnet die maximale Breite basierend auf der Breite von drei Bildern und ihren Abständen */    
    margin: 0 auto; /* Zentrierung der Section */
    width: fit-content;
    padding: 20px; /* Innenabstand für die Section */
    overflow-x: auto; /* Horizontale Scrollleiste anzeigen, falls Inhalt überläuft */
    white-space: nowrap; /* Verhindert das Umbruch der Bilder */
}




/*#endregion Body*/

/*#region Footer*/
footer{
    /* font-size: 10px;
    background-color: grey;
    display: flex;
    justify-content: center;
    margin: 0px;*/
  
        background-color: #003e51; /* Hintergrundfarbe des Footers */
        color: white; /* Textfarbe */
        padding: 10px; /* Innenabstand des Footers */
        text-align: center; /* Text zentrieren */
    
} 
/*#endregion Footer*/
}

/*#endregion Smart phone*/