body {
    font-family: 'Arial', sans-serif;
    background-color: #f8f9fa;
    margin-top: 80px; /* Um Platz für die feste Navbar zu schaffen */
}
.navbar {
    background-color: #ffffff;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    padding: 1rem 2rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    transition: all 0.3s ease;
}
.navbar-brand img {
    height: 50px;
    transition: height 0.3s ease;
}
.navbar-nav .nav-link {
    color: #333333;
    font-size: 1.1rem;
    margin-right: 30px;
    font-weight: 500;
    position: relative;
    transition: color 0.3s ease, transform 0.3s ease;
}
.navbar-nav .nav-link:hover {
    color: #2d8683;
    transform: scale(1.1);
}
.hero-section {
    background: url('images/hero-image.jpg');
    background-size: cover;
    background-position: center;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 1;
}
.hero-text {
    text-align: center;
}
.hero-text h1 {
    font-size: 4rem;
    font-weight: bold;
}
.hero-text p {
    font-size: 1.25rem;
}

/* Parallax Effekt */
.parallax {
    background: url('images/parallax.jpg') no-repeat center center fixed;
    background-size: cover;
    height: 300px;
}

/* Dreiteiler mit Icons */
.three-column-section {
    display: flex;
    justify-content: space-between;
    padding: 80px 10%;
    flex-wrap: wrap; /* Damit es bei kleinen Bildschirmgrößen korrekt auf Mobile-Ansicht umbricht */
}

.three-column-section .column {
    flex: 1;
    text-align: center;
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out; /* Langsame, flüssigere Übergänge */
}

.three-column-section .column i {
    font-size: 50px;
    color: #2d8683;
    margin-bottom: 20px;
}

.three-column-section .column.show {
    opacity: 1;
    transform: translateY(0);
}

footer a {
    color: #fff;
    text-decoration: none;
}

/* Card Section */
.card-section {
    background-color: #f8f9fa; /* Weißer Hintergrund für den Bereich */
    padding: 80px 0;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1); /* Schatten für die Sektion */
}

.click-card {
    border: none;
    background-color: #2d8683;
    color: white;
    border-radius: 0; /* Keine Abrundung mehr */
    padding: 40px;
    text-align: center;
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Deutlich stärkerer Schatten */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.click-card:hover {
    transform: translateY(-10px); /* Leichte Anhebung bei Hover */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.2); /* Stärkerer Schatten beim Hover */
}
.click-card h2 {
    font-size: 28px; /* Größerer Titel */
    margin-bottom: 20px;
    font-weight: 600;
}

.badge{
    white-space: wrap !important;
}

.click-card p {
    font-size: 16px;
    margin-bottom: 20px;
    font-weight: 400;
}
.btn-custom {
    background-color: white;
    color: #2d8683;
    border: 2px solid #fff; /* Rand um den Button */
    padding: 12px 30px;
    font-size: 16px;
    border-radius: 0; /* Keine Abrundung mehr */
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
}
.btn-custom:hover {
    background-color: #2d8683;
    color: white;
}
.card-row {
    display: flex;
    justify-content: center;
    gap: 30px; /* Mehr Abstand zwischen den Cards */
}

/* Highlight the second card */
.card-highlight {
    border: none;
    background-color: #ffffff; /* Weiße Hintergrundfarbe für die zweite Kachel */
    color: #2d8683; /* Textfarbe anpassen */
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); /* Stärkerer Schatten */
}
.card-highlight h2 {
    font-size: 28px; /* Etwas größerer Titel */
}
.card-highlight .btn-custom {
    background-color: #2d8683;
    color: white;
    border: 2px solid #2d8683;
}
.card-highlight .btn-custom:hover {
    background-color: white;
    color: #2d8683;
}

/* Spacer Container */
.spacer {
    background-color: #2d8683;
    height: 175px;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); /* Stärkerer Schatten */
}

/* Container für die transparente Umrahmung */
.search-wrapper {
    background-color: rgba(0, 0, 0, 0.1); /* leicht transparenter Hintergrund */
    padding: 20px;
    border-radius: 6px;
    width: 80%; /* Dynamische Breite für Desktop */
    max-width: 900px; /* Maximale Breite */
    display: flex;
    flex-direction: row; /* Alle Elemente in einer Reihe anordnen */
    align-items: center;
    gap: 15px;
    justify-content: space-between;
}

/* Auswahlfelder nebeneinander */
.select-container {
    display: flex; /* Hier wird Flexbox für nebeneinander sorgen */
    gap: 15px; /* Abstand zwischen den Auswahlfeldern */
    align-items: center; /* Gleiche Höhe für alle Elemente */
}

select {
    width: 150px;
    padding: 12px;
    font-size: 14px;
    border: none;
    outline: none;
    background-color: #ffffff;
    border-radius: 4px;
    height: 45px; /* Gleiche Höhe wie das Suchfeld */
}

/* Suchbalken */
.search-container {
    position: relative;
    width: 100%; /* Dynamische Breite für das Suchfeld */
}

.search-container input[type="text"] {
    width: 100%;
    padding: 12px 40px 12px 12px; /* Platz für das Icon */
    font-size: 16px;
    color: #333;
    border: none;
    outline: none;
    background-color: white;
    border-radius: 4px;
    height: 45px; /* Gleiche Höhe wie die Auswahlfelder */
    padding-left: 40px; /* Padding Left hinzugefügt */
}

/* Suchsymbol */
.search-icon {
    position: absolute;
    top: 50%;
    left: 10px;
    transform: translateY(-50%);
    font-size: 18px;
    color: #2d8683;
}

/* Suchen Button */
.search-button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: #2d8683;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
}

.search-button:hover {
    background-color: #226f68;
} 

.service-banner-container {
    position: relative;
    width: 100%;
    height: 500px; /* Increased height for more prominence */
    background-image: url('images/background-services.jpg'); /* Background image */
    background-size: cover;
    background-position: center;
    overflow: hidden; /* Prevents elements from overflowing */
}

.service-banner-overlay {
    background-color: rgba(45, 134, 131, 0.5); /* Slightly darker overlay */
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.service-banner-text {
    position: absolute;
    top: 50%;
    left: 30%; /* Set left to 30% */
    transform: translateY(-50%); /* Vertically centers the text */
    color: white;
    text-align: left; /* Left-aligned text */
    z-index: 2;
    max-width: 70%; /* Ensures text stays within the banner */
}

.service-banner-text h1 {
    font-size: 32px; /* Larger font size for the title */
    font-weight: bold;
    margin-bottom: 15px;
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.4); /* Text shadow for depth */
}

.service-banner-text p.subtitle {
    font-size: 16px; /* Slightly larger subtitle */
    margin-bottom: 20px;
    font-weight: normal;
    font-style: italic; /* Add a subtle italic style */
}

.service-banner-btn {
    background-color: white;
    color: #2d8683;
    border: 2px solid #fff; /* White border */
    padding: 12px 30px;
    font-size: 18px;
    border-radius: 0; /* No rounding */
    text-decoration: none;
    transition: background-color 0.3s ease, color 0.3s ease;
    font-weight: bold; /* Added bold for button text */
}

.service-banner-btn:hover {
    background-color: #2d8683;
    color: white;
}

/* Container für den Testimonial Banner */
.testimonial-banner {
    position: relative;
    width: 100%;
    height: auto; /* Höhe des Banners */
    background-color: #fff;
    padding: 40px 0;
}

/* Testimonial Container (Dragbar) */
.testimonial-container {
    display: flex;
    flex-wrap: nowrap;
    justify-content: start;
    padding: 0 20px;
    overflow-x: hidden; /* Versteckt den klassischen Scrollbalken */
    width: 100%;
    cursor: grab;
    user-select: none; /* Verhindert, dass der Text markiert wird */
}

.testimonial-container.dragging {
    cursor: grabbing; /* Zeigt eine Hand an, wenn das Scrollen aktiv ist */
    user-select: none; /* Verhindert, dass der Text markiert wird */
}

/* Testimonial Karte */
.testimonial-card {
    background-color: white;
    border: none; /* Keine Border-Radius und Border */
    padding: 20px;
    margin: 15px;
    margin-bottom: 30px;
    min-width: 30vw; /* 30% der Bildschirmbreite im Desktop-Modus */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.3s ease;
    scroll-snap-align: start; /* Macht das Swipen glatter */
}

.testimonial-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
}

.testimonial-name {
    font-size: 18px;
    font-weight: bold;
    color: #333;
}

.testimonial-job {
    font-size: 14px;
    color: #777;
    margin-bottom: 15px;
}

/* Zitat-Text Stil (hellgrau für modernen Look) */
.testimonial-quote {
    font-size: 18px;
    color: #888; /* Hellgrau für den Zitattext */
    font-style: italic;
    margin-bottom: 20px;
    position: relative;
    line-height: 1.5;
    padding-left: 25px;
    border-left: 5px solid #2d8683; /* Eine schöne Linie für das Zitat */
    background-color: #f4f4f4; /* Heller Hintergrund für das Zitat */
    padding-right: 20px;
}

.testimonial-button {
    display: none; /* "Mehr Erfahren" Button entfernt */
}

/* Navigation Punkte unter den Kacheln */
.pagination-dots {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    transition: opacity 0.3s ease;
}

.dot {
    width: 15px;
    height: 15px;
    margin: 0 5px;
    border-radius: 50%;
    background-color: #bbb;
    transition: background-color 0.3s ease;
    cursor: pointer;
}

.dot.active {
    background-color: #2d8683;
}

 /* Footer Bereich (Container 1) */
 .footer-container {
    background-color: #333; /* Dunkler Hintergrund für den gesamten Footer */
    width: 100%; /* Footer erstreckt sich über die gesamte Breite */
    padding: 40px 0;
}

.footer {
    color: #fff;
}

.footer .footer-section {
    display: flex;
    flex-direction: column;
    margin: 10px 0;
}

.footer .footer-section h4 {
    font-size: 18px;
    margin-bottom: 20px;
    font-weight: bold;
}

.footer .footer-section a {
    color: #fff;
    text-decoration: none;
    margin: 5px 0;
    font-size: 14px;
}

.footer .footer-section a:hover {
    text-decoration: underline;
}

/* Buttons Styling */
.footer .footer-btns {
    /*  display: flex;*/
    justify-content: space-between;
    margin-top: 30px;
    width: auto;
}

.footer .footer-btns .btn,
.footer .footer-btns .inv {
    padding: 14px 32px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: 2px solid #2d8683; /* Standard-Randfarbe */
    position: relative;
    display: inline-block;
    background-color: white; /* Standard Hintergrundfarbe für "btn" */
    color: #2d8683; /* Textfarbe für "btn" */
    transition: all 0.3s ease;
}

/* Stil für den "inv" Button */
.footer .footer-btns .inv {
    background-color: #2d8683; /* Hintergrundfarbe für "inv" */
    color: white; /* Textfarbe für "inv" */
    border-color: white; /* Weißer Rand für "inv" */
}

/* Hover Effekte */
.footer .footer-btns .btn:hover,
.footer .footer-btns .inv:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); /* Schlagschatten für mehr Tiefe */
    cursor: pointer; /* Mauszeiger ändert sich bei Hover */
}

/* Spezifischer Hover für btn */
.footer .footer-btns .btn:hover {
    background-color: #2d8683; /* Hover Hintergrund für "btn" */
    color: white; /* Textfarbe für "btn" beim Hover */
    border-color: #2d8683; /* Randfarbe für "btn" beim Hover */
}

/* Spezifischer Hover für inv */
.footer .footer-btns .inv:hover {
    background-color: white; /* Hover Hintergrund für "inv" */
    color: #2d8683; /* Textfarbe für "inv" beim Hover */
    border-color: #2d8683; /* Randfarbe für "inv" beim Hover */
}

/* Neue Design-Elemente für den Button */
.footer .footer-btns .btn::after,
.footer .footer-btns .inv::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #2d8683;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.footer .footer-btns .btn:hover::after,
.footer .footer-btns .inv:hover::after {
    opacity: 0.1; /* Subtile Hintergrundüberlagerung */
}

.footer .footer-social {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.footer .footer-social a {
    color: #fff;
    margin: 0 10px;
    font-size: 18px;
    text-decoration: none;
}

.footer .footer-social a:hover {
    color: #2d8683;
}

/* Der Bereich für Impressum, Datenschutz, etc. */
.footer .legal-links {
    padding: 20px;
    color: #fff;
    text-align: center;
    border-top: 2px solid white;
    background-color: #444; /* Hintergrund für den rechtlichen Bereich */
    width: 100%; /* Full width */
}

.footer .legal-links a {
    color: #fff;
    font-size: 14px;
    margin: 0 15px;
}

.footer .legal-links a:hover {
    text-decoration: underline;
}

.footer .legal-links .divider {
    border-top: 2px solid #fff;
    margin-top: 15px;
    margin-bottom: 15px;
}

/* Allgemeine Button-Klasse für alle Buttons, auch außerhalb des Footers */
.btn-contact {
    padding: 14px 32px;
    font-size: 18px;
    font-weight: bold;
    text-align: center;
    text-decoration: none;
    border: 2px solid #2d8683; /* Randfarbe */
    position: relative;
    display: inline-block;
    background-color: white; /* Standard Hintergrundfarbe */
    color: #2d8683; /* Textfarbe */
    transition: all 0.3s ease;
    border-radius: 0; /* Geradliniger Stil ohne abgerundete Ecken */
}

/* Hover-Effekte für den Button */
.btn-contact:hover {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1); /* Schlagschatten für mehr Tiefe */
    cursor: pointer; /* Mauszeiger ändert sich bei Hover */
    background-color: #2d8683; /* Hintergrundfarbe beim Hover */
    color: white; /* Textfarbe beim Hover */
    border-color: #2d8683; /* Randfarbe beim Hover */
}

/* Neue Design-Elemente für den Button (Subtile Hintergrundüberlagerung) */
.btn-contact::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #2d8683;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.btn-contact:hover::after {
    opacity: 0.1; /* Subtile Hintergrundüberlagerung beim Hover */
}

 /* CSS für den About-Abschnitt */
 .about-container {
    background-color: #ffffff; /* Weißer Hintergrund */
    padding: 60px 0;
}

.about-title {
    color: #005d6b;
    font-size: 2.5rem;
    font-weight: bold;
    margin-bottom: 20px;
}

.about-text, .about-list {
    font-size: 1.1rem;
    line-height: 1.6;
}

.about-list {
    list-style-type: none;
    padding-left: 0;
}

.about-list li {
    margin-bottom: 15px;
    position: relative;
    padding-left: 25px;
}

.about-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #005d6b;
    font-size: 1.5rem;
}

.highlight {
    font-weight: bold;
    color: #005d6b;
}


 /* Mobile Anpassungen */
 @media (max-width: 768px) {
    .parallax {
        background: url('images/parallax.jpg') no-repeat center center;
        background-size: cover;
        height: 300px;
    }
    
    .footer .footer-section {
        margin-bottom: 20px;
    }

    .footer .footer-btns {
        flex-direction: column;
        align-items: center;
    }

    .footer .footer-btns .btn {
        margin-bottom: 10px;
        width: 100%;
    }
    .testimonial-card {
        min-width: calc(100vw - 50px); /* 100% der Bildschirmbreite minus 50px für Abstand */
        margin: 10px;
        margin-bottom: 30px; /* Abstand von 10px für die Kacheln */
    }

    .testimonial-container {
        flex-direction: row;
    }
    .service-banner-text {
        left: 20px; /* Fixed left position on mobile (you can adjust this value as needed) */
        transform: translateY(-50%); /* Keep vertical centering */
        text-align: Left; /* Center-align text for mobile */
        max-width: 90%; /* Allow more space for mobile view */
    }

    .service-banner-text h1 {
        font-size: 24px; /* Smaller font size for mobile */
        margin-bottom: 10px;
    }

    .service-banner-text p.subtitle {
        font-size: 14px; /* Smaller font size for mobile subtitle */
        margin-bottom: 15px;
    }

    .service-banner-btn {
        font-size: 16px; /* Adjust button font size for mobile */
        padding: 10px 20px; /* Adjust padding for mobile */
    }
    .three-column-section {
        padding: 40px 5%;
    }
    .three-column-section .column {
        flex: 0 0 100%; /* Auf mobilen Geräten wird jedes Element in einer eigenen Reihe angezeigt */
        margin-bottom: 20px;
    }
    .spacer {
        height: auto; /* Erhöht die Höhe des Hintergrund-Containers für mobile Ansicht */
        padding: 20px 0; /* Etwas mehr Padding für mobile Ansicht */
    }

    .search-wrapper {
        flex-direction: column; /* Elemente untereinander auf mobilen Geräten */
        align-items: stretch; /* Alle Elemente auf volle Breite strecken */
        width: 90%; /* Weniger Breite auf mobilen Geräten */
        padding: 20px; /* Padding für bessere Übersicht */
    }

    .select-container {
        flex-direction: column; /* Dropdowns untereinander auf mobilen Geräten */
        gap: 10px; /* Weniger Abstand zwischen den Auswahlfeldern */
        width: 100%; /* 100% Breite auf mobilen Geräten */
    }

    select {
        width: 100%; /* 100% Breite für die Auswahlfelder */
        height: 50px; /* Erhöhte Höhe für mobile Ansicht */
    }

    .search-container {
        width: 100%; /* Suchfeld volle Breite */
        margin-top: 10px;
    }

    .search-button {
        width: 100%; /* Button volle Breite */
        margin-top: 10px;
    }
    
    .hero-text h1 {
        font-size: calc(1.375rem + 1.5vw);
    }
    
}

/* Mobile Optimized Styles for screens with max width 980px */
@media (max-width: 992px) {
    .card-row {
        flex-direction: column; /* Cards untereinander anordnen */
        align-items: center; /* Zentriert auf mobilen Geräten */
        gap: 20px; /* Weniger Abstand zwischen den Cards */
    }

    .click-card, .card-highlight {
        padding: 30px; /* Weniger Padding für kleinere Geräte */
        width: 100%; /* Cards auf die volle Breite skalieren */
    }

    .click-card h2 {
        font-size: 24px; /* Kleinere Schriftgröße für den Titel */
    }

    .click-card p {
        font-size: 14px; /* Kleinere Schriftgröße für den Text */
    }

    .btn-custom {
        padding: 10px 20px; /* Kleinere Button-Größe */
        font-size: 14px; /* Kleinere Schriftgröße */
    }

    .card-highlight h2 {
        font-size: 24px; /* Kleinere Schriftgröße für den Titel */
    }
}