/* Allgemeine Stile */
* {
    margin: 0; /* Setzt den äußeren Abstand aller Elemente auf 0 */
    padding: 0; /* Setzt den inneren Abstand aller Elemente auf 0 */
    box-sizing: border-box; /* Setzt alle Elemente auf das Box-Modell mit fester Größe */
}

body {
    font-family: Arial, sans-serif; /* Schriftart für die gesamte Seite */
    margin: 0; /* Setzt den äußeren Abstand des Body auf 0 */
    padding: 0; /* Setzt den inneren Abstand des Body auf 0 */
    overflow-x: hidden; /* Verhindert horizontales Scrollen */
    background-color: #2e3c55;
}

/* Header */
#header {
    display: flex; /* Verwendet flexbox für das Layout im Header */
    justify-content: space-between; /* Verteilt den Platz gleichmäßig zwischen den Elementen */
    align-items: center; /* Zentriert die Elemente vertikal */
    padding: 10px 20px; /* Innenabstand für den Header */
    background-color: #2e3c55; /* Hintergrundfarbe  für den Header */
    color: #e0d9ae; /* Textfarbe im Header */
    position: fixed; /* Header bleibt beim Scrollen fixiert */
    top: 0; /* Positioniert den Header am oberen Rand */
    left: 0; /* Positioniert den Header am linken Rand */
    width: 100%; /* Header nimmt die gesamte Breite des Bildschirms ein */
    z-index: 1000; /* Legt fest, dass der Header über anderen Elementen liegt */
    height: 100px; /* Festgelegte Höhe für den Header */
}

/* Header-Bereiche */
.header-left,
.header-center,
.header-right {
    display: flex; /* Verwendet flexbox für die Layoutstruktur */
    align-items: center; /* Zentriert die Elemente vertikal in ihren Bereichen */
    justify-content: space-between; /* Gleichmäßige Verteilung der Elemente */
}

.header-left {
    display: flex; /* Verwendet flexbox für die Layoutstruktur */
    align-items: center; /* Zentriert die Elemente vertikal */
    justify-content: center; /* Zentriert die Elemente horizontal */
}

.header-center {
    position: absolute; /* Positionierung relativ zur Header-Box */
    top: 50%; /* Vertikale Zentrierung */
    left: 50%; /* Horizontale Zentrierung */
    transform: translate(-50%, -50%); /* Verschiebt das Element, um es exakt zu zentrieren */
    display: flex; /* Verwendet flexbox für die Layoutstruktur */
    align-items: center; /* Zentriert die Elemente vertikal */
    justify-content: center; /* Zentriert die Elemente horizontal */
    padding: 15px; /* Innenabstand im Header-Center */
    z-index: 1000; /* Sicherstellen, dass der Text über anderen Inhalten bleibt */
}

.header-right {
    display: flex; /* Verwendet flexbox für die Layoutstruktur */
    align-items: center; /* Zentriert die Elemente vertikal */
    justify-content: center; /* Zentriert die Elemente horizontal */
}

.header-right-symbol {
    padding: 15px; /* Innenabstand der Symbole rechts im Header */
    display: flex; /* Verwendet flexbox für die Layoutstruktur */
    align-items: center; /* Zentriert die Symbole vertikal */
    justify-content: center; /* Zentriert die Symbole horizontal */
}

.header-right li {
    list-style: none; /* Entfernt die Standard-Punkte der Liste */
}

.header-right li a {
    text-decoration: none; /* Entfernt Unterstreichung der Links */
    font-size: 20px; /* Schriftgröße der Links */
    font-weight: 600; /* Fettschrift für die Links */
    color: #e0d9ae; /* Linkfarbe weiß */
    padding: 15px; /* Innenabstand der Links */
}

.header-right li a:hover {
    color: #9b8d52; /* Linkfarbe hellgrün beim Hover */
}

/* Menü-Button */
.menu-btn {
    background-color: transparent; /* Transparenter Hintergrund */
    color: #e0d9ae; /* Textfarbe weiß */
    border: 2px solid #e0d9ae; /* Weißer Rahmen */
    border-radius: 5px; /* Abgerundete Ecken */
    padding: 5px 10px; /* Innenabstand */
    font-size: 20px; /* Schriftgröße */
    cursor: pointer; /* Zeigt den Cursor als Pointer an */
    position: absolute; /* Absolute Positionierung innerhalb des Headers */
    top: 30%; /* Vertikale Positionierung relativ zum Header */
    left: 10px; /* Horizontale Positionierung relativ zum Header */
}

.menu-btn:hover {
    color: #9b8d52; /* Textfarbe hellgrün beim Hover */
    border-color: #9b8d52; /* Rahmenfarbe hellgrün beim Hover */
}

.search-btn, .menu-option {
    background-color: transparent; /* Transparenter Hintergrund */
    color: #e0d9ae; /* Textfarbe weiß */
    border: none; /* Kein Rahmen */
    font-size: 20px; /* Schriftgröße */
    margin-left: 20px; /* Abstand nach links */
    cursor: pointer; /* Zeigt den Cursor als Pointer an */
}

.search-btn:hover {
    color: #9b8d52; /* Textfarbe hellgrün beim Hover */
}

/* Schließen-Button */
.close-btn {
    background-color: transparent; /* Transparenter Hintergrund */
    color: #e0d9ae; /* Textfarbe weiß */
    border: 2px solid #e0d9ae; /* Weißer Rahmen */
    border-radius: 5px; /* Abgerundete Ecken */
    padding: 5px 10px; /* Innenabstand */
    font-size: 20px; /* Schriftgröße */
    cursor: pointer; /* Zeigt den Cursor als Pointer an */
    position: absolute; /* Absolute Positionierung */
    top: 30%; /* Gleiche vertikale Position wie der Menü-Button */
    left: 10px; /* Gleiche horizontale Position wie der Menü-Button */
    z-index: 2001; /* Über dem Header platzieren */
    visibility: hidden; /* Unsichtbar standardmäßig */
    display: none; /* Versteckt standardmäßig */
    opacity: 1; /* Sichtbarkeit */
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out; /* Weicher Übergang beim Ein-/Ausblenden */
    pointer-events: auto; /* Interaktionen erlaubt */
}

.close-btn:hover {
    color: #9b8d52; /* Textfarbe hellgrün beim Hover */
    border-color: #9b8d52; /* Rahmenfarbe hellgrün beim Hover */
}

/* Suchfeld-Schließen-Button */
#close-search-bar-btn {
    background-color: transparent; /* Transparenter Hintergrund */
    color: #e0d9ae; /* Textfarbe weiß */
    border: 2px solid #e0d9ae; /* Weißer Rahmen */
    border-radius: 5px; /* Abgerundete Ecken */
    padding: 5px 10px; /* Innenabstand */
    font-size: 20px; /* Schriftgröße */
    cursor: pointer; /* Zeigt den Cursor als Pointer an */
    position: absolute; /* Absolute Positionierung */
    top: 30%; /* Gleiche vertikale Position wie der Menü-Button */
    left: 10px; /* Gleiche horizontale Position wie der Menü-Button */
    z-index: 2001; /* Über dem Header platzieren */
    visibility: hidden; /* Unsichtbar standardmäßig */
    display: none; /* Versteckt standardmäßig */
    opacity: 1; /* Sichtbarkeit */
    transition: opacity 0.6s ease-in-out, visibility 0.6s ease-in-out; /* Weicher Übergang beim Ein-/Ausblenden */
    pointer-events: auto; /* Interaktionen erlaubt */
}

#close-search-bar-btn:hover {
    color: #9b8d52; /* Textfarbe hellgrün beim Hover */
    border-color: #9b8d52; /* Rahmenfarbe hellgrün beim Hover */
}

/* Menü-Anzeige */
#banner {
    background-color: rgba(46, 60, 85, 0.9); /* Dunkelgrüner, halbtransparenter Hintergrund */
    color: #e0d9ae; /* Textfarbe weiß */
    padding: 20px; /* Innenabstand */
    position: absolute; /* Absolute Positionierung */
    top: 100%; /* Direkt unter dem Header */
    left: 0; /* Positioniert das Banner am linken Rand */
    right: 0; /* Positioniert das Banner am rechten Rand */
    visibility: hidden; /* Unsichtbar standardmäßig */
    opacity: 0; /* Transparenz 0 standardmäßig */
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out, visibility 0.6s ease-in-out; /* Übergang für Sichtbarkeit und Position */
    transform: translateY(-10px); /* Etwas nach oben verschoben */
    z-index: 999; /* Über anderen Inhalten */
}

#banner.show {
    visibility: visible; /* Sichtbar, wenn die Klasse "show" hinzugefügt wird */
    opacity: 1; /* Transparenz 1 */
    transform: translateY(0); /* Setzt die Verschiebung auf 0 */
}

/* Versteckte Elemente */
.hidden {
    opacity: 0; /* Setzt die Transparenz auf 0 */
    transition: opacity 0.6s ease-in-out; /* Weicher Übergang beim Ausblenden */
    pointer-events: none; /* Verhindert Interaktionen mit versteckten Elementen */
}

/* Menü-Listen */
.menu ul {
    list-style: none; /* Entfernt Aufzählungszeichen */
    padding: 0; /* Entfernt Innenabstand */
}

.menu ul li {
    margin: 15px 0; /* Abstand zwischen den Listenelementen */
    font-size: 20px; /* Schriftgröße */
    cursor: pointer; /* Zeigt den Cursor als Pointer an */
}

.menu ul li a {
    color: #e0d9ae; /* Schriftfarbe weiß */
    text-decoration: none; /* Keine Unterstreichung */
    z-index: 1000; /* Über allem anderen */
    position: relative; /* Position relativ */
    pointer-events: auto; /* Interaktionen erlaubt */
}

/* Hover-Effekt */
.menu ul li a:hover {
    color: #9b8d52; /* Schriftfarbe hellgrün beim Hover */
    text-decoration: none; /* Keine Unterstreichung auch beim Hover */
}

/* Suchleiste */
.search-container {
    display: none; /* Anfangs versteckt */
    position: absolute; /* Absolute Positionierung */
    top: 100px; /* Suchfeld unter dem Header */
    left: 50%; /* Horizontale Zentrierung */
    transform: translateX(-50%) translateY(-10px); /* Leichte Verschiebung */
    width: 100%; /* Nimmt die volle Breite ein */
    background-color: rgba(46, 60, 85, 0.9); /* Dunkelgrüner, halbtransparenter Hintergrund */
    border-radius: 0; /* Keine Rundungen */
    z-index: 1000; /* Über anderen Elementen */
    padding: 10px 20px; /* Innenabstand */
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Zentriert den Inhalt vertikal */
    opacity: 0; /* Transparenz 0 */
    transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out; /* Übergang für Sichtbarkeit und Position */
    display: flex; /* Flexbox zur Zentrierung des Suchfeldes */
}


.search-container.active {
    display: flex; /* Zeigt die Suchleiste an */
    opacity: 1; /* Setzt Transparenz auf 1 */
    transform: translateX(-50%) translateY(0); /* Rückverschiebung */
}

.search-bar {
    display: flex; /* Verwendet Flexbox für das Suchfeld */
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Zentriert den Inhalt vertikal */
    background-color: rgba(46, 60, 85, 0.9); /* Halbtransparenter weißer Hintergrund */
    border-radius: 50px; /* Abgerundete Ecken */
    padding: 10px 20px; /* Innenabstand */
    width: 50%; /* Breite des Suchfelds */
    position: relative; /* Relative Positionierung */
}

.search-input {
    border: none; /* Kein Rahmen */
    background: transparent; /* Transparenter Hintergrund */
    color: #e0d9ae; /* Textfarbe weiß */
    font-size: 18px; /* Schriftgröße */
    width: 100%; /* Nimmt die volle Breite ein */
    padding: 5px 10px; /* Innenabstand */
    border-radius: 25px; /* Abgerundete Ecken */
    outline: none; /* Kein Rahmen bei Fokus */
}

.search-submit-btn {
    background: transparent; /* Transparenter Hintergrund */
    border: none; /* Kein Rahmen */
    color: #e0d9ae; /* Textfarbe weiß */
    font-size: 24px; /* Schriftgröße */
    cursor: pointer; /* Zeigt den Cursor als Pointer an */
}

/* Hero section container */
.hero-section {
    position: relative; /* Relative Positionierung */
    height: 100vh; /* Vollbild-Höhe */
    display: flex; /* Flexbox für Layoutstruktur */
    justify-content: center; /* Zentriert den Inhalt horizontal */
    align-items: center; /* Zentriert den Inhalt vertikal */
    color: #e0d9ae; /* Textfarbe weiß */
    text-align: center; /* Zentrierter Text */
    overflow: hidden; /* Verhindert Überlauf */
}

/* Das Hero-Bild */
.hero-image {
    position: absolute; /* Absolute Positionierung */
    top: 0; /* Positioniert das Bild oben */
    left: 0; /* Positioniert das Bild links */
    width: 100%; /* Bild nimmt die volle Breite ein */
    height: 100%; /* Bild nimmt die volle Höhe ein */
    object-fit: cover; /* Füllt den gesamten Bereich */
    z-index: 0; /* Hinter dem Text und Overlay */
}

/* Halbtransparente Overlay */
.overlay {
    position: absolute; /* Absolute Positionierung */
    top: 0; /* Positioniert das Overlay oben */
    left: 0; /* Positioniert das Overlay links */
    width: 100%; /* Nimmt die volle Breite ein */
    height: 100%; /* Nimmt die volle Höhe ein */
    background: rgba(0, 0, 0, 0.4); /* Schwarzer halbtransparenter Hintergrund */
    z-index: 1; /* Über dem Bild, aber hinter dem Text */
}

/* Inhalt der Hero-Sektion */
.hero-content {
    position: relative; /* Relative Positionierung */
    z-index: 2; /* Sicherstellen, dass der Text über dem Overlay ist */
    text-align: center; /* Zentrierter Text */
    max-width: 80%; /* Breitenbegrenzung des Inhalts */
    color: #e0d9ae; /* Textfarbe weiß */
}

.hero-content h1 {
    font-size: 4rem; /* Große Schriftgröße */
    font-weight: 900; /* Fettschrift */
    line-height: 1.2; /* Zeilenhöhe */
    margin-bottom: 1rem; /* Abstand nach unten */
    text-transform: uppercase; /* Alle Buchstaben groß */
    letter-spacing: 2px; /* Buchstabenabstand */
}

.hero-content p {
    font-size: 1.2rem; /* Schriftgröße */
    margin-bottom: 2rem; /* Abstand nach unten */
}

/* Call-to-action Button */
.cta-button {
    padding: 1rem 2rem; /* Innenabstand */
    font-size: 1rem; /* Schriftgröße */
    font-weight: bold; /* Fettschrift */
    text-transform: uppercase; /* Alle Buchstaben groß */
    color: #e0d9ae; /* Textfarbe weiß */
    border: 2px solid #e0d9ae; /* Weißer Rahmen */
    background-color: transparent; /* Transparenter Hintergrund */
    text-decoration: none; /* Keine Unterstreichung */
    transition: background-color 0.3s, color 0.3s; /* Übergang bei Hover */
}

.cta-button:hover {
    background-color: #e0d9ae; /* Hintergrundfarbe weiß beim Hover */
    color: #2e3c55; /* Textfarbe schwarz beim Hover */
}

/*highlight top */

.highligh-top {
    display: flex; /* Aligns the text and image side by side */
    justify-content: space-between; /* Adds space between text and image */
    align-items: center; /* Vertically centers the content */
    padding: 12px 300px; /* Adds padding around the section */
    max-width: 2200px; /* Sets a maximum width for the section */
    margin: 0 auto; /* Centers the section horizontally */
    background-color: #2e3c55;
}
/* highlight */

.black-text {
    color: black; /* Setze die Schriftfarbe auf Schwarz */
}

.gold-text {
    color: #9b8d52; /* Setze die Schriftfarbe auf Gold */
}

/* Highlight Section with Image and Text */
.highlight {
    display: flex; /* Aligns the text and image side by side */
    justify-content: space-between; /* Adds space between text and image */
    align-items: center; /* Vertically centers the content */
    padding: 40px 300px; /* Adds padding around the section */
    max-width: 2200px; /* Sets a maximum width for the section */
    margin: 0 auto; /* Centers the section horizontally */
    background-color: #d6d7d0;
}

.text-section-highlight {
    width: 50%; /* Text takes 50% of the space */
    padding-right: 20px; /* Adds space between text and image */
}

.text-section-highlight h1 {
    font-size: 50px; /* Ändere die Schriftgröße */
    color: #2e3c55; /* Ändere die Schriftfarbe (z.B. dunkelgrau) */
    text-transform: uppercase; /* Alle Buchstaben groß */
}

.text-section-highlight p {
    font-size: 22px; /* Ändere die Schriftgröße */
    color: #2e3c55; /* Ändere die Schriftfarbe (z.B. mittelgrau) */
}

.image-section-highlight {
    width: 40%; /* Image takes 40% of the space */
}

.image-section-highlight img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Smooth transition for hover effects */
}

.image-section-highlight img:hover {
    transform: scale(1.05); /* Slightly enlarges the image */
    box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.2); /* Adds a shadow around the image */
    cursor: pointer; /* Changes the cursor to a pointer */
}

/*highlight bottom */

.highlight-bottom {
    display: flex; /* Aligns the text and image side by side */
    justify-content: space-between; /* Adds space between text and image */
    align-items: center; /* Vertically centers the content */
    padding: 50px 300px; /* Adds padding around the section */
    max-width: 2200px; /* Sets a maximum width for the section */
    margin: 0 auto; /* Centers the section horizontally */
    background-color: #2e3c55;
}


/* produkte */

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between; /* Adjusts the spacing between items */
    width: 100%; /* Use full width of the screen */
    padding: 20px;
    box-sizing: border-box; /* Ensure padding is included in width calculations */
}

.category {
    width: 24%; /* Adjust this to 24% to ensure 4 items fit per row */
    margin-bottom: 20px;
    background-color: #d6d7d0;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s;
    color: #2e3c55;
    font-size: 50px; /* Increase the number to make the text larger */
    font-weight: bold; /* Optional: makes the text bolder */
}

.category img {
    width: 100%;
    height: auto;
}

.category:hover {
    transform: scale(1.05);
}

.category-title {
    padding: 10px;
    text-align: center;
    font-weight: bold;
    font-size: 50px; /* Increase font size */
    color: #2e3c55; /* Text color */
    text-decoration: none; /* Remove underline */
}

.category a {
    text-decoration: none; /* Ensure no underline on links */
}

.category-title:hover {
    color: #9b8d52; /* Optional hover color */
    text-decoration: none; /* Remove underline on hover */
}

/*feature top */

.feature-top {
    display: flex; /* Aligns the text and image side by side */
    justify-content: space-between; /* Adds space between text and image */
    align-items: center; /* Vertically centers the content */
    padding: 50px 300px; /* Adds padding around the section */
    max-width: 2200px; /* Sets a maximum width for the section */
    margin: 0 auto; /* Centers the section horizontally */
    background-color: #2e3c55;
}

/* Features Section */
.features-section {
    display: flex;
    justify-content: space-around;
    padding: 35px 100px;
    background-color: #d6d7d0;
}

.feature-item {
    text-align: center;
    width: 20%;
}

.feature-item img {
    width: 100px;
    margin-bottom: 10px;
}

.feature-item p {
    font-size: 18px;
    color: #2e3c55;
}

.feature-item strong {
    font-size: 22px;
    color: #2e3c55;
}

/* About Section */
.about-section {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 200px;
    max-width: 2200px;
    margin: 0 auto;
    background-color: #2e3c55;
}

.text-section-about {
    width: 55%;
    padding-right: 60px;
}

.text-section-about h1 {
    color: #e0d9ae;
    margin-bottom: 20px;
    font-size: 3rem; /* Große Schriftgröße */
    font-weight: 900; /* Fettschrift */
    line-height: 1.2; /* Zeilenhöhe */
    margin-bottom: 1rem; /* Abstand nach unten */
    text-transform: uppercase; /* Alle Buchstaben groß */
    letter-spacing: 2px; /* Buchstabenabstand */
}

.text-section-about p {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #e0d9ae;
    margin-bottom: 20px;
}

.cta-button-about {
    display: inline-block;
    background-color: #d1a37a;
    color: #e0d9ae; /* Textfarbe weiß */
    padding: 10px 20px;
    text-decoration: none;
    font-size: 1rem;
    transition: background-color 0.3s, color 0.3s; /* Übergang bei Hover */
    font-weight: bold; /* Fettschrift */
    border: 2px solid #e0d9ae; /* Weißer Rahmen */
    background-color: transparent; /* Transparenter Hintergrund */
    text-decoration: none; /* Keine Unterstreichung */
}

.cta-button-about:hover {
    background-color: #e0d9ae; /* Hintergrundfarbe weiß beim Hover */
    color: #2e3c55; /* Textfarbe schwarz beim Hover */
}


.image-section-about {
    width: 40%;
    display: flex;
    justify-content: center;
    padding: 0;
    margin: 0;
    position: relative;
    overflow: hidden; /* Überlauf verhindern */
    border-radius: 15px; /* Runde Ecken für den Container */
}

.about-image {
    width: 100%;
    height: auto;
    border-radius: 15px; /* Runde Ecken für das Bild */
    position: relative;
    z-index: 0;
    transform: scale(0.7); /* Verkleinere das Bild auf 80% */
    transform-origin: center; /* Skaliere das Bild von der Mitte aus */
}

.overlay-about {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.25); /* Schwarzes halbtransparentes Overlay */
    z-index: 1;
    padding: 0;
    margin: 0;
    pointer-events: none;
    border-radius: 15px; /* Runde Ecken für das Overlay */
    transform: scale(0.7); /* Verkleinere das Bild auf 80% */
    transform-origin: center; /* Skaliere das Bild von der Mitte aus */
}

/*newsletter banner */

.newsletter-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 70px 200px;
    max-width: 2200px;
    margin: 0 auto;
    background-color: #d6d7d0;
}

.banner-left {
    width: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #d6d7d0;
}

.promo-image {
    width: 80%;
    height: auto;
    border-radius: 15px; /* Runde Ecken für das Overlay */
}

.banner-right {
    width: 50%;
    padding: 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-color: #d6d7d0;
}

.banner-right h2 {
    font-size: 40px;
    margin-bottom: 20px;
    color: #9b8d52;
}

.banner-right p {
    font-size: 1.5rem;
    margin-bottom: 20px;
    color: #2e3c55;
}

.newsletter-form {
    display: flex;
    margin-bottom: 20px;
}

.newsletter-form input {
    padding: 10px;
    width: 70%;
    font-size: 1.5rem;
    border: 2px solid #2e3c55; /* Weißer Rahmen */
    border-radius: 5px 0 0 5px;
}

.newsletter-form button {
    padding: 10px;
    width: 30%;
    color: #2e3c55; /* Textfarbe weiß */
    font-size: 1.5rem;
    border: 2px solid #2e3c55; /* Weißer Rahmen */
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-weight: bold; /* Fettschrift */
    background-color: transparent; /* Transparenter Hintergrund */
    text-decoration: none; /* Keine Unterstreichung */
    transition: background-color 0.3s, color 0.3s; /* Übergang bei Hover */
}

.newsletter-form button:hover {
    background-color: #2e3c55; /* Hintergrundfarbe weiß beim Hover */
    color: #e0d9ae; /* Textfarbe schwarz beim Hover */
}

.disclaimer {
    font-size: 1.5rem;
    color: #2e3c55;
}

.disclaimer a {
    color: #9b8d52;
    text-decoration: none;
}

.disclaimer a:hover {
    text-decoration: underline;
}

/* Reviews Section */
.testimonials-section {
   background-color: #2e3c55;
    background-size: cover;
    color: #e0d9ae;
    text-align: center;
    padding: 50px 20px;
}

.testimonials-section h1 {
    font-size: 45px;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.testimonials-section p {
    font-size: 25px;
    margin-bottom: 40px;
}

.testimonials-container {
    display: flex;
    justify-content: center;
    gap: 50px;
}

.testimonial {
    background-color: rgba(0, 0, 0, 0.7);
    padding: 30px;
    border: 1px solid #e0d9ae;
    width: 300px;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease;
}

.testimonial:hover {
    transform: translateY(-10px);
}

.testimonial p {
    font-size: 18px;
    margin-bottom: 20px;
    color: #d6d7d0;
}

.testimonial span {
    font-size: 16px;
    font-style: italic;
    color: #e0d9ae;
}


/* rewvies bottom */

.reviews-bottom {
    display: flex; /* Aligns the text and image side by side */
    justify-content: space-between; /* Adds space between text and image */
    align-items: center; /* Vertically centers the content */
    padding: 50px 300px; /* Adds padding around the section */
    max-width: 2200px; /* Sets a maximum width for the section */
    margin: 0 auto; /* Centers the section horizontally */
    background-color: #d6d7d0;
}


/* Language Selector */
.language-selector {
    display: flex;
    align-items: center;
    justify-content: flex-start; /* Left align */
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e0d9ae; /* Optional separator */
    padding-left: 50px;
}

.language-selector .headline {
    font-size: 22px;
    font-weight: bold;
    margin-bottom: 10px;
    color: #e0d9ae; /* Matching the text color */
    text-align: left;
    width: 100%; /* Takes full width */
}

.language-selector img.flag {
    width: 36px;
    height: 24px;
    margin-right: 12px; /* Space between flag and text */
}

.language-selector p, .language-selector a {
    font-size: 18px;
    color: #e0d9ae;
    margin: 0; /* Remove bottom margin */
}

.language-selector p {
    margin-right: 10px; /* Small space between elements */
}

.language-selector a {
    color: #e0d9ae;
    text-decoration: none;
    padding-left: 10px; /* Add space to the left of the link */
}

.language-selector a:hover {
    text-decoration: underline;
    color: #9b8d52;
}

.footer-headline {
    font-size: 30px;
    color: #e0d9ae;
    margin-bottom: 20px;
    padding-left: 50px;
}



/* Footer General Layout */
footer {
    background-color: #2e3c55;
    padding: 40px 0;
    color: #e0d9ae;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); /* Schattierung für mehr Tiefe */
    flex-wrap: wrap;
}

.footer-top {
    border-bottom: 1px solid #e0d9ae;
    margin-bottom: 20px;
}


.footer-container {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    max-width: 1200px;
    margin: 0 auto;
}

footer .col {
    padding: 0 20px;
    flex-direction: column; /* Elemente untereinander anordnen */
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
}

footer .logo {
    margin-bottom: 20px;
    max-width: 200px;
}

footer h4 {
    font-size: 20px;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

footer p, footer a {
    font-size: 18px;
    margin-bottom: 10px;
    color: #e0d9ae;
    text-decoration: none;
    transition: color 0.3s ease;
    flex-direction: column; /* Elemente untereinander anordnen */
}

footer a:hover {
    color: #9b8d52;
}

.footer-container .icons i {
    font-size: 20px;
    margin-right: 10px;
    transition: color 0.3s ease;
    cursor: pointer;
    flex-direction: column; /* Elemente untereinander anordnen */
}

.footer-container .icons i:hover {
    color: #9b8d52;
}

footer .icons {
    display: flex;
    margin-top: 10px;
}

footer .copyright {
    text-align: center;
    font-size: 14px;
    color: #e0d9ae;
    border-top: 1px solid #e0d9ae;
    padding: 20px 0;
    margin-top: 20px;
}

.footer-logo {
    text-align: center; /* Zentriert das Bild horizontal */
}

.footer-logo img {
    display: inline-block;
    max-width: 30%; /* Verkleinert das Logo auf 50% seiner Originalgröße */
    height: auto;
}