/* Gemeinsame Styles */

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin: 0;
    padding: 0;
}

header {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    background-color: #fff;
}

header nav {
    display: none;
}

.social-language {
    display: flex;
    margin-left: 50px;
}

.social-language a img {
    width: 30px; /* Ändere die Größe nach Bedarf */
}

.language-switch {
    margin-left: 10px;
}

.language-switch select {
    padding: 10px;
    border: 1px solid grey;
    border-radius: 5px;
    background-color: #fff;
    color: black;
    font-size: 14px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

.language-switch select:hover {
    color: grey;
}

/* Kann bei Bedarf wieder aktiviert werden für die Anmeldung */

/*.user-actions {
    display: flex;
    position: absolute;
    font-size: 14px;
    right: 10%;
    top: 20px;
}

.user-actions a {
    margin-right: 10px;
    text-decoration: none;
    color: grey;
}*/

.menu-icon {
    display: none;
    cursor: pointer;
}

.bar {
    width: 25px;
    height: 3px;
    background-color: grey;
    margin: 6px 0;
}

.close-icon {
    display: none;
  }

.banner {
    border: 0.5px solid grey;
    border-radius: 5px;
    padding: 10px;
    margin: 0px;
    max-width: 500px; /* Ändere die maximale Breite nach Bedarf */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 13px;
    font-weight: 100;
    color: #333;
    text-align: justify;
}

.cart {
    display: flex;
    position: absolute;
    right: 5%;
    top: 20px;  
}

.cart-icon-container {
    position: absolute;
    display: inline-block;
    top: 0px;
}

/*.cart-icon {
    width: 40px;
    height: auto;
}*/

/*#cart-item-count {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 18px;
    color: #000;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;;
}*/

.main-content {
    text-align: center;
    margin: 50px 20px;
}

.site-title {
    text-transform: lowercase;
    font-size: 80px;
    font-family: serif;
    font-weight: 100;
    margin-bottom: 5px;
}

.abstract-art {
    font-family: serif;
    font-weight: 100;
    letter-spacing: 0.1em;
    margin-top: 10px;
    margin-bottom: 5px;
    font-size: 20px;
}

.title-line {
    width: 600px;
    height: 0.8px;
    background-color: grey;
    margin: 10px auto;
}

nav ul {
    list-style: none;
    padding: 0;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;;
}

nav ul li {
    display: inline-block;
    position: relative; /* wichtig für das Dropdown */
}

nav li {
    display: inline;
    margin: 0 15px;
}

nav a {
    text-decoration: none;
    color: grey;
    font-size: 18px;
}

/* Dropdown-Menü */
.dropdown-content {
    display: none; /* Untermenü ausblenden */
    position: absolute;
    background-color: #ffffff;
    min-width: 180px;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    padding: 10px 0;
    z-index: 1;
}

.dropdown-content li {
    display: block;
    padding: 5px 0;
    text-align: left;
}

.dropdown-content li a {
    color: grey;
    text-decoration: none;
}

.dropdown-content li a:hover {
    background-color: #ddd;
}

/* Untermenü beim Hovern anzeigen */
.dropdown:hover .dropdown-content {
    display: block;
}

#backToTop {
    position: fixed;
    bottom: 20px; /* Abstand vom unteren Bildschirmrand */
    right: 20px; /* Abstand vom rechten Bildschirmrand */
    width: 40px;
    height: 40px;
    background-color: grey; /* Hintergrundfarbe */
    color: #fff; /* Schriftfarbe */
    border-radius: 50%; /* Rundes Symbol */
    text-align: center;
    line-height: 40px;
    font-size: 24px; /* Größe des Pfeilsymbols */
    cursor: pointer;
    z-index: 1000;
    display: none; /* Startet unsichtbar */
}

/* Beim Scrollen sichtbar machen */
#backToTop.show {
    display: block;
}


/* Spezifische Styles für die Bildsektion */

.image-section {
    position: relative;
    overflow: hidden;
    height: 500px; /* Ändern Sie die Höhe nach Bedarf */
}

.image-section img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Skaliert das Bild so, dass es den Container abdeckt */
}

.image-overlay {
    position: absolute;
    top: 30%;
    left: 30%;
    /*transform: translate(-50%, -50%);*/
    text-align: left;
    color: #fff;
    margin: 5px;
}

/*.image-overlay p {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;;
    font-size: 36px;
    margin: 0px;
    margin-bottom: 20px;
}*/

.image-overlay button {
    padding: 10px 20px;
    background-color: #fff;
    color: grey;
    border: solid 1px grey;
    border-radius: 5px;
    cursor: pointer;
    font-family: serif;
    font-size: 20px;
    font-weight: 400;
}

.image-overlay button:hover {
    background-color: grey;
    color: #fff;
}

@media only screen and (max-width: 600px) {

    .dropdown .dropdown-content {
        display: none; /* Standardmäßig ausblenden */
        position: static; /* Für mobiles Layout */
        background-color: #fff;
        padding-left: 20px;
    }

    /* Untermenü-Elemente in der mobilen Ansicht */
    .dropdown .dropdown-content li {
        padding: 10px 0;
        text-align: left;
    }

    /* Sichtbarkeit steuern, wenn aktiv */
    .dropdown.show .dropdown-content {
        display: block;
    }
    
}

#scrollToTopBtn {
    position: fixed;
    bottom: 20px; /* Abstand zum unteren Rand */
    right: 20px; /* Abstand zum rechten Rand */
    display: block; /* Button sichtbar machen */
    width: 40px; /* Breite anpassen */
    height: 40px; /* Höhe anpassen */
    background-color: grey; /* Farbe anpassen */
    color: #fff; /* Textfarbe */
    border: none;
    border-radius: 50%; /* Rundes Design */
    font-size: 20px;
    text-align: center;
    cursor: pointer;
    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.3); /* Schatten für mehr Sichtbarkeit */
    z-index: 1000; /* Über andere Elemente legen */
}

#scrollToTopBtn:hover {
    background-color: grey; /* Farbe beim Hover ändern */
}


/* Mobile Styles */
@media only screen and (max-width: 600px) {

    .social-language {
        display: flex;
        margin-left: 0px;
    }

    .social-language a img {
        margin-top: 15px;
        width: 25px; /* Ändere die Größe nach Bedarf */
    }

    .language-switch select {
        position: static;
        margin-top: 15px;
        margin-left: 110px;
        padding: 5px;
        border: 1px solid grey;
        border-radius: 5px;
        background-color: #fff;
        color: black;
        font-size: 18px;
        font-weight: 400;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    }

    .site-title {
        text-transform: lowercase;
        font-size: 50px;
        font-family: serif;
        font-weight: 100;
        margin-bottom: 5px;
    }    

    .abstract-art {
        font-family: serif;
        font-weight: 200;
        letter-spacing: 0.1em;
        margin-top: 10px;
        margin-bottom: 5px;
        font-size: 18px;
    }

    header nav {
        display: block;
    }

    .menu-icon {
        display: inline-block;
        cursor: pointer;
        margin-top: 10px;
    }

    .overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5); /*Hintergrundfarbe mit Transparenz für das Overlay */
        z-index: 1000; /* Stellen Sie sicher, dass das Overlay über anderen Elementen liegt */
      }
      
      .overlay.show {
        display: block;
      }
      
      .mobile-menu {
        position: fixed;
        top: 0;
        right: 0;
        width: 80%; /* Breite des Menüs anpassen */
        max-width: 300px; /* Maximalbreite des Menüs anpassen */
        height: 100%;
        color: #333;
        background-color: #fff; /* Hintergrundfarbe des Menüs */
        z-index: 1001; /* Stellen Sie sicher, dass das Menü über dem Overlay liegt */
        transform: translateX(100%); /* Initial außerhalb des sichtbaren Bereichs verschieben */
        transition: transform 0.5s ease-in-out; /* Animiere die Verschiebung des Menüs */
      }
      
      .mobile-menu.show {
        transform: translateX(0); /* Menü in den sichtbaren Bereich verschieben */
      }

      .close-icon {
        position: absolute;
        top: 15px;
        right: 15px;
        cursor: pointer;
        font-size: 20px;
        color: #333;
      }
      
      .mobile-menu.show .close-icon {
        display: block;
      }
     
    nav ul {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-weight: 500;
        font-size: 18px;
        color: #333;
        display: none;
        position: static;
        background-color: #fff;
        margin-top: 50px;
    }

    nav ul.show {
        display: flex;
        flex-direction: column;
    }

    nav li {
        margin: 10px 0;
        text-align: center;
    }

    .banner {
        display: none;
    }

    .title-line {
        max-width: 100%;
        height: 0.8px;
        background-color: grey;
        margin: 10px auto;
    }

    .image-overlay {
        position: relative;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        color: #fff;
        margin: 5px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .image-overlay button {
        padding: 10px 20px;
        font-size: 20px; /* Ändere die Schriftgröße nach Bedarf */
        font-weight: 500;
        background-color: #fff;
        color: grey;
        border: 2px solid grey;
        border-radius: 5px;
        cursor: pointer;
        width: 200px;
    }

    .image-overlay button:hover {
        background-color: grey;
        color: #fff;
    }

    body {
        overflow-x: hidden; /* Verhindert seitliches Scrollen */
    }

    footer {
        padding: 20px;
        width: 100vw; /* Änderung: Vollständige Bildschirmbreite verwenden */
        box-sizing: border-box; /* Änderung: Padding in die Gesamtbreite einbeziehen */
    }

    .image-section {
        height: 250px; /* Ändern Sie die Höhe nach Bedarf */
    }

    .shop-section {
        padding: 20px 20px 50px; /* Ändern Sie die Padding-Werte nach Bedarf */
    }
    
}

/* Spezifische Styles für die gallery.html-Seite */

.shop-section {
    padding: 50px;
}

.shop-title {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 40px;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
    font-weight: 200;
}

.shop-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Änderung zu space-between */
}

.shop-item {
    text-align: center;
    margin-bottom: 20px;
    margin-top: 30px;
    width: calc(30% - 20px);
    box-sizing: border-box;
    position: relative;
}

.invisible-filler {
    margin-bottom: 20px;
    margin-top: 30px;
    visibility: hidden;
    width: calc(30% - 20px);
    box-sizing: border-box;
}

.shop-item img {
    width: 400px;
    height: 500px;
    object-fit: cover;
    object-position: 50% 50%;
}

.shop-item-name {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 24px;
    font-weight: 200;
    color: #333;
    margin: 20px;
    margin-top: 5px;
}

.shop-item button {
    opacity: 0;
    background-color: transparent;
    color: #fff;
    border: 2px solid grey;
    padding: 10px;
    cursor: pointer;
    transition: opacity 0.3s, background-color 0.3s, color 0.3s;
    width: 100%;
    margin-bottom: 20px;
}

.shop-item:hover button {
    opacity: 1;
    background-color: #fff;
    color: grey;
}

.shop-item button:hover {
    background-color: grey;
    color: #fff;
}

/* Zeige das verkauft-Schild nur, wenn das Bild verkauft ist */
.shop-item .sold-label {
    display: none;
    position: absolute;
    top: 0;
    left: 0;
    background-color: grey; /* Ändere die Hintergrundfarbe nach Bedarf */
    color: white; /* Ändere die Textfarbe nach Bedarf */
    padding: 5px; /* Ändere das Padding nach Bedarf */
    z-index: 1; /* Stelle sicher, dass es über dem Bild liegt */
}

/* Falls das Bild verkauft ist, zeige das verkauft-Schild */
.shop-item.sold .sold-label {
    display: block;
}

/* Falls das Bild verkauft ist, wird es milchig dargestellt */
.shop-item.sold img {
    width: 400px;
    height: 500px;
    object-fit: cover;
    object-position: 50% 50%;
    opacity: 0.5;
}

/* Anpassungen für den Shop-Bereich in der mobilen Ansicht */

/* Smartphones */
@media only screen and (max-width: 600px) {
    .shop-grid {
        flex-direction: column;
        align-items: center;
        margin-top: 0px; /* Passen Sie den oberen Abstand nach Bedarf an */
    }

    .shop-item {
        width: 100%;
    }

    .shop-item-name {
        margin: 10px;
    }

    .shop-item button {
        display: none; /* Buttons in der mobilen Ansicht ausblenden */
    }

    .shop-item img {
        width: 100%;
        height: auto;
    }

    .shop-item.sold img {
        width: 100%;
        height: auto;
    }

    .shop-section {
        margin-top: 0; /* Reduziert den oberen Abstand der shop-section */
        padding: 20px; /* Fügt etwas Padding hinzu, um den Inhalt zu trennen */
    }
}

/* Tablets im Portrait-Modus */
@media only screen and (min-width: 601px) and (max-width: 768px) {
    .shop-item {
        width: 100%; /* Ein Bild in einer Reihe */
    }

}

/* Tablets im Landscape-Modus und kleinere Desktops */
@media only screen and (min-width: 769px) and (max-width: 1024px) {
    .shop-item {
        width: 50%; /* Zwei Bilder in einer Reihe */
    }

    .shop-grid {
        flex-direction: column;
        align-items: center;
        margin-top: 0px; /* Passen Sie den oberen Abstand nach Bedarf an */
    }
}

/* Standard Desktop-Styles (für Bildschirme breiter als 1024px) */
@media only screen and (min-width: 1025px) {
    .shop-item {
        width: 33.33%; /* Drei Bilder in einer Reihe */
    }
}


/* Gemeinsame Styles für die FAQ-Seite */

.faq-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 10px;
}

.faq-section .placeholder {
    max-height: 0;
    overflow: hidden;
}

.faq-title {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 40px;
    font-weight: 200;
    color: #333;
    margin-bottom: 40px;
    text-align: center;
}

.faq-section h2 {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 20px;
    font-weight: 200;
    color: #000;
    cursor: pointer;
    margin-top: 30px;
    margin-bottom: 30px;
    position: relative;
}

.faq-section h2::after {
    content: '\2304'; /* Unicode für ein caret down icon */
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.faq-section h2.bottom {
    margin-bottom: 20px; /* Passen Sie den Abstand nach Bedarf an */
}

.faq-section ul {
    list-style: none;
    padding-left: 20px; /* Füge einen Abstand für die benutzerdefinierten Aufzählungszeichen hinzu */
    display: none; /* Liste standardmäßig ausblenden */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    font-weight: 200;
    color: #000;
}

.faq-section ul li:before {
    content: '\2713'; /* Unicode für ein Häkchen (Tickmark) */
    color: #008000; /* Farbe für das Häkchen */
    margin-right: 5px; /* Abstand zwischen dem Häkchen und dem Text */
}

.faq-section p {
    display: none; /* Texte standardmäßig ausblenden */
    margin-top: 20px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    font-weight: 200;
    color: #000;
}

.faq-section.active p,
.faq-section.active ul {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 20px;
    font-weight: 200;
    color: #000;
    display: block; /* Texte und Liste anzeigen, wenn die Section aktiv ist */
}

.faq-line {
    max-width: 100%;
    height: 0.8px;
    background-color: grey;
    margin: 10px auto;
} 

/* Mobile Styles für FAQ-Seite */
@media only screen and (max-width: 600px) {

    .faq-section {
        max-width: 90%; /* Ändere die Breite der FAQ-Sektion nach Bedarf */
        margin: 0 auto;
        padding: 10px;
    }

    .faq-title {
        font-size: 40px; /* Ändere die Schriftgröße des FAQ-Titels */
        margin-bottom: 20px; /* Reduziere den unteren Abstand des FAQ-Titels */
        text-align: center;
    }

    .faq-section h2 {
        font-size: 19px; /* Ändere die Schriftgröße der FAQ-Fragen */
        font-weight: 300;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .faq-section ul {
        padding-left: 15px; /* Reduziere den linken Abstand der Aufzählungszeichen */
        font-size: 18px;
        font-weight: 300;
    }

    .faq-section ul li:before {
        margin-right: 3px; /* Reduziere den Abstand zwischen Häkchen und Text */
    }

    .faq-section p {
        margin-top: 15px; /* Reduziere den oberen Abstand der FAQ-Antworten */
        font-size: 16px; /* Ändere die Schriftgröße der FAQ-Antworten */
        font-weight: 300;
    }

    .faq-line {
        margin: 8px auto; /* Ändere den Abstand der FAQ-Linie */
    }
}

/* Gemeinsame Styles für die aboutme.html-Seite */

.about-me-title {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 40px;
    font-weight: 200;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
}

.about-me-container {
    margin-top: 0px;
    display: flex;
    align-items: flex-start; /* Ändere auf flex-start, um Container oben bündig auszurichten */
    justify-content: center; /* Zentriere die Container horizontal */
}

.about-me-image {
    flex: 1;
    max-width: 400px; /* Ändere die maximale Breite nach Bedarf */
    padding: 0 20px; /* Gleicher Abstand rechts und links hinzugefügt */
    margin-top: 40px;
}

.about-me-image img {
    width: 100%;
    height: auto;
    max-height: 600px;
}

.about-me-text {
    flex: 2;
    margin-top: 0; /* Ändere den oberen Abstand auf 0 */
    padding: 0 20px; /* Gleicher Abstand rechts und links hinzugefügt */
    max-width: 400px; /* Ändere die maximale Breite nach Bedarf */
    width: 100%; /* Füllt den verfügbaren Platz aus */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 20px;
    font-weight: 200;
}

.about-me-text h3 {
    font-family: serif;
    font-weight: 400;
    font-size: 32px;
    letter-spacing: 0.08em;
    color: #333; /* Ändere die Textfarbe nach Bedarf */
    margin-bottom: 20px;
}

.about-me-text h4 {
    padding-left: 10px;
    font-family: serif;
    font-weight: 200;
    font-size: 24px;
    letter-spacing: 0.15em;
    color: #333; /* Ändere die Textfarbe nach Bedarf */
    margin-bottom: 20px;
}

.about-me-text p {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin-top: 20px;
    padding-left: 10px;
    text-align: justify;
    font-size: 16px;
    font-weight: 300;
    color: #000; /* Ändere die Textfarbe nach Bedarf */
    margin-bottom: 20px;
    margin-right: 20px;
}

/* Mobile Styles für aboutme.html */
@media only screen and (max-width: 600px) {

    body {
        overflow-x: hidden; /* Verhindere seitliches Scrollen */
    }

    .about-me-container {
        flex-direction: column;
        align-items: center; /* Zentriere den Inhalt vertikal */
    }

    .about-me-text {
        margin-bottom: 20px; /* Füge einen Abstand nach unten hinzu */
        text-align: center; /* Zentriere den Text */
        max-width: 80%; /* Begrenze die Breite des Textbereichs */
    }

    .about-me-text h3 {
        font-size: 22px; /* Reduziere die Schriftgröße */
        font-weight: 500;
        margin-bottom: 10px;
        text-align: left; /* Ändere die Ausrichtung der Überschrift auf linksbündig */
        letter-spacing: 0;
    }

    .about-me-text h4 {
        padding-left: 10px;
        font-family: serif;
        font-weight: 100;
        font-size: 18px;
        text-align: left; /* Ändere die Ausrichtung der Überschrift auf linksbündig */
        margin-bottom: 20px;
    }

    .about-me-image {
        padding: 20px; /* Reduziere den Abstand um das Bild */
        margin-top: 10px;
    }

    .about-me-text p {
        font-size: 16px;
        margin-bottom: 5px;
        text-align: left;
    }
}

/* Styles für Footer */

.footer-line {
    width: 100%;
    height: 0.6px;
    background-color: rgb(214, 213, 213);
    margin: 10px auto;
}

footer {
    background-color: #fff;
    color: grey;
    text-align: center;
    margin-top: 50px;
    padding: 80px;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 200;
}

.footer-links {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 20px;
}

.footer-links a {
    padding: 5px;
    color: #333;
    text-decoration: none;
    margin-bottom: 10px;
    text-align: left; /* Links ausrichten */
    width: 100%; /* Vollständige Breite für den Link */
}

.footer-links a:hover {
    background-color: #fff;
    color: #000;
}

.realisation {
    margin-bottom: 30px;
    padding-bottom: 30px;
}

/* Mobile Styles für footer */

@media only screen and (max-width: 600px) {

footer {
    background-color: #fff;
    color: #333;
    text-align: center;
    margin-top: 50px;
    padding: 80px;
    width: 100%;
    height: 50px;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 350;
}

.footer-links {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 20px;
    margin-bottom: 50px;
}

.footer-links a {
    padding: 5px;
    color: #333;
    text-decoration: none;
    margin-bottom: 10px;
    text-align: left; /* Links ausrichten */
    width: 100%; /* Vollständige Breite für den Link */
}

.realisation {
    margin-bottom: 30px;
    padding-bottom: 30px;
}

}    

/* Stile für Einleitungstext der contact.html-Seite */

.contact-intro {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin-top: 20px;
    padding-left: 10px;
    text-align: center;
    font-size: 18px;
    font-weight:200;
    color: #000; /* Ändere die Textfarbe nach Bedarf */
    margin-bottom: 20px;
}

.contact-form {
    width: 600px; /* Maximale Breite des Formulars */
    margin: auto; /* Zentrieren des Formulars auf der Seite */
}

/* Neue Regel für die Flexbox-Anordnung */

.contact-section {
    display: flex;
    flex-direction: column; /* Geändert auf column, um die Elemente untereinander anzuordnen */
    align-items: center;
    max-width: 600px; /* Änderung auf max-width, um die Breite zu begrenzen */
    margin: auto; /* Zentrieren des Formulars auf der Seite */
}

/* Stile für Kontaktdaten */

.contact-details {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 10px; /* Hinzugefügt, um einen Abstand nach oben zu schaffen */
    margin-bottom: 10px;
    width: 100%; /* Hinzugefügt, um die Breite zu 100% zu setzen */
}

.contact-details-container {
    display: flex;
    width: 100%;
    justify-content: space-between;
    align-items: flex-start;
}

.contact-left,
.contact-right {
    flex: 1; /* Hinzugefügt, um den Platz gleichmäßig zu verteilen */
    text-align: left;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: 200;
}

.contact-right {
    text-align: right;
}

.contact-right img {
    margin-top: 5px;
}

/* Kontaktformular-Styling */

.invisible {
    visibility: hidden;
    padding: 10px;
}

.form-row {
    display: flex;
    justify-content: space-between;
    width: 100%; /* Hinzugefügt, um die Breite zu 100% zu setzen */
}

.form-group {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-weight: lighter;
    font-size: 13px;
    color: darkslategrey;
    flex: 1;
    margin-right: 10px;
}

#reference {
    height: 35px;
    width: 100%;   
}


.label-group {
    display: flex;
    flex-direction: column; /* Geändert, um Labels untereinander anzuordnen */
}

label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

input[type="text"],
input[type="email"],
textarea {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;    
    font-weight: 200;
    width: 100%;
    padding: 8px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

input[type="checkbox"] {
    margin-right: 5px;
}

button {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    font-weight: 500;
    background-color: #fff;
    color: gray;
    margin-top: 20px;
    margin-left: auto; /* Hinzugefügt, um den Button nach rechts zu verschieben */
    padding: 10px 50px;
    border: solid 1px gray;
    border-radius: 5px;
    cursor: pointer;
}

.form-row:hover button {
    opacity: 1;
    background-color: gray;
    color: #fff;
}

/* Zusätzliches Styling für Checkboxen und Labels */

label.checkbox-label {
    display: flex;
    align-items: center;
    font-weight: normal;
    margin-bottom: 0;
}

.checkbox-label input {
    margin-right: 5px;
}


/* Mobile-Stile für contact.html */

@media only screen and (max-width: 600px) {

    body {
        overflow-x: hidden; /* Verhindere seitliches Scrollen */
    }

    .contact-form {
        width: 100%; /* Vollständige Breite in der mobilen Ansicht */
    }

    .contact-intro {
        text-align: left; /* Setze die Textausrichtung auf linksbündig */
        margin-bottom: 20px;
        margin-left: 20px; /* Füge einen linken Abstand hinzu, um den Text bündig mit den Formularfeldern zu positionieren */
        margin-right: 20px;
        font-size: 17px;
        font-weight: 300;
    }

    .contact-section {
        max-width: 80%; /* Reduziere die Breite der Kontaktform */
        margin: auto; /* Zentriere die Kontaktform */
    }

    .contact-details-container {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        width: 100%;
    }

    .contact-details {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        margin-top: 10px;
        margin-bottom: 10px;
        max-width: 80%;
    }

    .contact-left,
    .contact-right {
        flex: 1;
        text-align: left;
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 17px;
    }

    .contact-right {
        text-align: right;
        margin-left: 10px;
    }

    .form-group {
        flex: 0 0 100%;
        margin-right: 0; /* Entferne den rechten Abstand der Formularfelder */
        margin-bottom: 5px;
    }

    .form-row {
        flex-direction: column; /* Ändere die Anordnung der Formularfelder auf untereinander */
    }

    #reference {
        width: 100%; /* Setze die Breite des Dropdowns auf 100% */
        max-width: calc(100% - 20px); /* Setze eine maximale Breite abzüglich des Seitenabstands */
        margin-bottom: 10px;
        height: 35px;
    }
    

    input[type="text"],
    input[type="email"],
    textarea {
        width: calc(100% - 20px); /* Setze die Breite auf 100% abzüglich 20px für den Seitenabstand */
        box-sizing: border-box;
        margin-bottom: 10px;
    }

    label {
        display: block;
        margin-bottom: 5px;
        font-weight: 400;
        font-size: 17px;
    }

    button {
        width: 100%; /* Setze die Breite des Dropdowns auf 100% */
        max-width: calc(100% - 20px); /* Setze eine maximale Breite abzüglich des Seitenabstands */
        margin-left: 0; /* Entferne den linken Abstand des Senden-Buttons */
        background-color: grey;
        color: #fff;
    }
}

/* Styling für die Produktseiten */

.product-title {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 20px;
    color: #333;
    margin-bottom: 10px;
    text-align: justify;
}

.product-container {
    margin-top: 0px;
    display: flex;
}

.product-image {
    flex: 1;
    max-width: 600px; /* Ändere die maximale Breite nach Bedarf */
    padding: 80px;
}

.product-image img {
    width: 80%;
    height: auto;
    max-height: 600px;
    padding-left: 200px;
}

.product-text {
    flex: 2;
    margin-top: 40px;
    padding-left: 80px; /* Abstand zwischen Bild und Text */
    max-width: 400px; /* Ändere die maximale Breite nach Bedarf */
    width: 100%; /* Füllt den verfügbaren Platz aus */
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 20px;
    font-weight: 100;
}

.product-text h2 {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 22px;
    font-weight: 200;
    color: #333; /* Ändere die Textfarbe nach Bedarf */
    margin-bottom: 10px;
}

.product-text h3 {
    font-family: serif;
    font-size: 40px;
    font-weight: 200;
    color: #000; /* Ändere die Textfarbe nach Bedarf */
    margin-bottom: 10px;
}

.product-text .sold-label {
    margin-top: 40px;
    display: none;
    position: relative;
    background-color: grey; /* Ändere die Hintergrundfarbe nach Bedarf */
    color: white; /* Ändere die Textfarbe nach Bedarf */
    padding: 5px; /* Ändere das Padding nach Bedarf */
}

.product-text .sold-label {
    display: inline-block;
}

.product-text h4 {
    font-family: serif;
    font-size: 18px;
    font-weight: 500;  
    color: #333; /* Ändere die Textfarbe nach Bedarf */
    text-transform: uppercase;  
    position: relative; /* Position relativ für das Pseudoelement */
    margin-top: 10px;
    margin-bottom: 10px;
}

.product-text ul.bottom {
    list-style: none;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    font-weight: 200;
    color: #333;   
    margin-bottom: 20px; /* Passen Sie den Abstand nach Bedarf an */
    padding-left: 0; /* Entfernt das Padding auf der linken Seite */
}

.product-text ul li:before {
    content: '\2713'; /* Unicode für ein Häkchen (Tickmark) */
    color: #008000; /* Farbe für das Häkchen */
    margin-right: 5px; /* Abstand zwischen dem Häkchen und dem Text */
}

.product-text p {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin-top: 20px;
    text-align: justify;
    font-size: 16px;
    font-weight:300;
    color: #333; /* Ändere die Textfarbe nach Bedarf */
    margin-bottom: 20px;
}

.product-text button {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    font-weight: 500;
    background-color: grey;
    color: #fff;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-left: auto; /* Hinzugefügt, um den Button nach rechts zu verschieben */
    padding: 10px 50px;
    width: 100%;
    border: solid 1px gray;
    border-radius: 5px;
    cursor: pointer;
}

.product-line {
    max-width: 100%;
    height: 0.8px;
    background-color: grey;
    margin: auto;
}

/* Neuer Navigationsbereich für Produktseite */

.navigation-bar {
    display: flex;
    justify-content: space-between;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    font-weight: 200;
    color: #333;
    margin-top: 20px;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.left-links {
    flex: 1;
    display: flex;
    align-items: center;
}

.right-links {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

#current-image-name {
    margin-left: 5px; /* Reduziere den Abstand zwischen dem Text und den Caret-Icons */
}

#main-image-container {
    overflow: hidden;
    cursor: pointer;
}

#main-image {
    transition: transform 5s ease;
}

/* Styling für die mobile Ansicht der Produktseiten */

@media only screen and (max-width: 1024px) {

    .product-text form {
        text-align: center; /* Zentriere den Button */
    }

    .product-container {
        flex-direction: column; /* Ändere die Flexbox-Ausrichtung auf Spalte für die mobile Ansicht */
        align-items: center; /* Zentriere den Inhalt horizontal */
        padding: 20px; /* Ändere den äußeren Abstand nach Bedarf */
    }

    .product-image {
        max-width: 100%; /* Ändere die maximale Breite auf 100% für die mobile Ansicht */
        padding: 0; /* Entferne den Padding für die mobile Ansicht */
    }

    .product-image img {
        width: 100%; /* Ändere die Breite auf 100% für die mobile Ansicht */
        padding-left: 0; /* Entferne das Padding für die mobile Ansicht */
    }

    .product-text {
        flex: 1; /* Fülle den verfügbaren Platz aus */
        margin-top: 20px; /* Ändere den oberen Abstand nach Bedarf */
        padding-left: 0; /* Entferne den linken Abstand für die mobile Ansicht */
        max-width: 100%; /* Ändere die maximale Breite auf 100% für die mobile Ansicht */
    }

    .product-text h2,
    .product-text h3,
    .product-text h4,
    .product-text p {
        text-align: center; /* Zentriere den Text in der mobilen Ansicht */
    }

    .product-text h2 {
        font-size: larger;
        font-weight: bolder;
    }

    .product-text p {
        font-size: 17px;
        text-align: left;
    }

    .product-text button {
        margin-left: 0; /* Setze den linken Abstand auf 0 für die mobile Ansicht */
        width: 100%; /* Fülle den verfügbaren Platz aus */
        font-size: 17px;
    }

    .product-text ul.bottom {
        font-size: 17px;
        font-weight: 300;
    }

    .navigation-bar {
        flex-direction: column; /* Ändere die Flexbox-Ausrichtung auf Spalte für die mobile Ansicht */
        align-items: center; /* Zentriere den Inhalt horizontal */
        margin-top: 10px; /* Ändere den oberen Abstand nach Bedarf */
        font-size: 22px;
        font-weight: 200;
    }

    .left-links,
    .right-links {
        flex: 1; /* Fülle den verfügbaren Platz aus */
        display: flex; /* Zeige die Links in einer Zeile an */
        justify-content: center; /* Zentriere den Inhalt horizontal */
        align-items: center; /* Zentriere den Inhalt vertikal */
        margin-bottom: 20px;
    }

    .right-links {
        font-size: 20px;
    }

    .left-links span {
        display: none; /* Verstecke das Trennzeichen in der mobilen Ansicht */
    }

    #main-image-container {
        cursor: auto !important; /* Deaktiviere das Zoom-In-Cursor für mobile Ansicht */
    }
}

/* Gemeinsame Styles für die Datenschutz-Seite */

.privacy-policy-title {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 40px;
    font-weight: 200;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
}

.privacy-policy-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.privacy-policy-text {
    text-align: justify;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 20px;
    font-weight: 200;
}

.privacy-policy-text p {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin-top: 20px;
    padding-left: 10px;
    text-align: justify;
    font-size: 16px;
    font-weight: 300;
    color: #000; /* Ändere die Textfarbe nach Bedarf */
}

.privacy-policy-text p:not(:first-of-type) {
    text-indent: 20px; /* Einzug für alle Absätze außer dem ersten */
}

.privacy-policy-text ul {
    list-style: disc; /* Verwende ein Aufzählungszeichen für Listen */
    padding-left: 20px;
}

.privacy-policy-text ul li {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 16px;
    margin-bottom: 10px;
    text-align: justify;
    font-family: 300;
}

/* Mobile Styles für datenschutz.html */

@media only screen and (max-width: 600px) {

    .privacy-policy-title {
        font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
        font-size: 32px;
        font-weight: 200;
        color: #333;
        margin-bottom: 30px;
        text-align: center;
    }
    
    .privacy-policy-text {
        max-width: 80%; /* Setze die Breite des Textcontainers auf 80% der Bildschirmbreite */
        margin: auto; /* Zentriere den Textcontainer */
    }

    .privacy-policy-text ul {
        padding-left: 20px; /* Füge einen Abstand für die benutzerdefinierten Aufzählungszeichen hinzu */
    }

    .privacy-policy-text li {
        list-style-type: disc; /* Verwende ein Aufzählungszeichen als Aufzählungsstil */
        margin-bottom: 10px; /* Füge einen Abstand zwischen den Aufzählungspunkten hinzu */
        font-weight: 300;
    }
}

/* Gemeinsame Styles für die Impressum-Seite */

.legal-notice-title {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 40px;
    font-weight: 200;
    color: #333;
    margin-bottom: 30px;
    text-align: center;
}

.legal-notice-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.legal-notice-text {
    text-align: justify;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 20px;
    font-weight: 300;
}

.legal-notice-text p {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    margin-top: 20px;
    padding-left: 10px;
    text-align: left;
    font-size: 17px;
    font-weight: 300;
    color: #000; /* Ändere die Textfarbe nach Bedarf */
}

/* Mobile Styles für impressum.html */

@media only screen and (max-width: 600px) {
    .legal-notice-text {
        max-width: 80%; /* Setze die Breite des Textcontainers auf 80% der Bildschirmbreite */
        margin: auto; /* Zentriere den Textcontainer */
    }
}

/* Style für danke.html */

.thank-you-section {
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
}

.thank-you-section h1 {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 22px;
    font-weight: 300;
    text-align: center;
}

.thank-you-section p {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 18px;
    font-weight: 200;
    text-align: center;
}