@font-face {
    font-family: 'Quicksand';
    src: url('fonts/Quicksand-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Quicksand';
    src: url('fonts/Quicksand-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Quicksand';
    src: url('fonts/Quicksand-Light.ttf') format('truetype');
    font-weight: 300; /* Light */
    font-style: normal;
}

@font-face {
    font-family: 'Quicksand';
    src: url('fonts/Quicksand-Medium.ttf') format('truetype');
    font-weight: 500; /* Medium */
    font-style: normal;
}

@font-face {
    font-family: 'Quicksand';
    src: url('fonts/Quicksand-SemiBold.ttf') format('truetype');
    font-weight: 600; /* SemiBold */
    font-style: normal;
}

@font-face {
    font-family: 'League Spartan';
    src: url('fonts/LeagueSpartan-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'League Spartan';
    src: url('fonts/LeagueSpartan-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}

/* Beispiel für die Verwendung der Schriftarten */
body {
    font-family: 'Quicksand', sans-serif; /* Standard-Schriftart für den gesamten Body */
}

/* Verwendung der League Spartan Schriftarten für die Headlines */
h1 {
    font-family: 'League Spartan', sans-serif;
    font-weight: bold; /* Verwendet League Spartan Bold */
    font-size: 4.125rem; /* Entspricht 66px */
    line-height: 4.5rem; /* Entspricht 72px */
}

h2 {
    font-family: 'League Spartan', sans-serif;
    font-weight: bold; /* Verwendet League Spartan Bold */
}

h3 {
    font-family: 'League Spartan', sans-serif;
    font-weight: normal; /* Verwendet League Spartan Regular */
}

h4 {
    font-family: 'League Spartan', sans-serif;
    font-weight: normal; /* Verwendet League Spartan Regular */
}
ul {
    margin-left: 36px;
    margin-bottom: 20px;
    margin-top: 10px;
  }
p {
    font-family: 'Quicksand', sans-serif;
    font-weight: normal; /* Verwendet Quicksand-Regular */
    font-size: 18px;
    line-height: 27px;
}
.centered-paragraph {
    max-width: 820px;     
    margin: 0 auto;        
    text-align: center;     
}
.light-text {
    font-family: 'Quicksand', sans-serif;
    font-weight: 300; /* Verwendet Quicksand-Light */
}

.medium-text {
    font-family: 'Quicksand', sans-serif;
    font-weight: 500; /* Verwendet Quicksand-Medium */
}
.logo-img {
    width: 100%;
    max-width: 220px;
    margin-bottom: 32px;
    text-align: center;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Box-Modell vereinheitlichen */
}

.spacer {
    width: 100%;
    height: 32px;
}

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #F1EFE7;
}
p {
    font-weight: 300;
}
strong{ font-weight: 900;}

/* Header und Video */
header {
    position: relative; 
    overflow: hidden; 
    height: 100vh; /* Volle Höhe des Browserfensters */
}

.background-video {
    position: absolute; 
    top: 50%; 
    left: 50%; 
    min-width: 100vw; 
    min-height: 100vh; 
    width: auto; 
    height: auto; 
    transform: translate(-50%, -50%); 
    z-index: -1; 
    object-fit: cover; 
}

.hero-content {
    position: relative;
    color: black;
    text-align: left;
    padding: 1rem;
    max-width: 850px;
    height: auto;
    margin-left: 10rem;
    margin-top: 7rem;
    z-index: 1; 
}

@media (max-width: 768px) {
    .hero-content {
        margin-left: 2rem;
    }
}


/* 3-spaltige Content Section mit neuen Klassen */
.custom-content-section-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px; /* Abstände zwischen den Spalten auf maximal 30px setzen */
    max-width: 1200px; /* Maximale Breite */
    margin: 0 auto; /* Zentriert auf der Seite */
}

@media (max-width: 768px) {
    .custom-content-section-3 {
        grid-template-columns: 1fr; /* Untereinander auf mobilen Geräten */
        gap: 15px; /* Kleineren Abstand auf mobilen Geräten */
    }
}

.custom-content-item {
    margin: 0; 
    padding: 0;
}

.custom-card {
    border: 1px solid #ccc; 
    border: 1px solid #ccc; 
    padding: 0;
    padding-bottom: 20px; 
    border-radius: 8px; 
    text-align: center; 
    background-color: #fff;
    min-height: 375px;
}
.custom-card p {
    font-size: 16px;
  line-height: 20px;
  margin-bottom: 20px;
}
.card-headline {
    font-size: 1.5rem;
    line-height: 1.5rem;
    margin-bottom: 12px;
}
/* Kachel-Styling */
.card {
    background-color: #fff;
    border-radius: 8px; /* Optional: Runde Ecken */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Leichter Schatten */
    overflow: hidden;
    text-align: center;
    max-width: 300px;
    margin: 1rem auto; /* Zentriert und mit Abstand */
    padding: 1rem;
}

/* Bild-Styling */
.card img {
    width: 100%;
    display: block; /* Entfernt das margin unter dem Bild */
    border-radius: 8px 8px 0 0; /* Optional: Runde obere Ecken passend zum Card */
}

/* Titel-Styling */
.card h4 {
    margin: 0.5rem 0;
    font-size: 1.25rem;
    color: #333;
}

/* Beschreibung-Styling */
.card p {
    font-size: 1rem;
    color: #666;
    margin-bottom: 1rem;
}

/* CTA-Button-Styling */
.custom-card .cta-button {
    display: inline-block;
    padding: 0.5rem 1rem;
    background-color: #F1EFE7; 
    border-radius: 50px !important;
    border: 1px solid black;
    color: #000;
    text-decoration: none;
    border-radius: 4px;
    transition: background-color 0.3s ease;
}
.custom-card img {
    margin-bottom: 20px;
    width: 100%; /* Bildbreite auf 100% setzen, damit es die gesamte Karte ausfüllt */
    height: auto; /* Automatische Höhe, um das Seitenverhältnis zu bewahren */
    border-radius: 8px 8px 0 0; /* Abgerundete Ecken nur oben, falls gewünscht */
}
.card .cta-button:hover {
    background-color: #005fa3; /* Etwas dunklerer Farbton beim Hover */
}


/* sonstiges CSS */
.logo {
    font-size: 1.5rem;
    font-weight: bold;
    display: none;
}
.contact-btn {
    background-color: #F1EFE7;
    color: black;
    padding: 15px 20px;
    border-radius: 50px;
    text-decoration: none;
    top: 20px;
    position: absolute;
    right: 0px;
    top: 0;
  }
.normal-btn {
    background-color: #F1EFE7;
    color: black;
    padding: 15px 20px;
    border-radius: 50px;
    text-decoration: none;
    top: 20px;
    position: relative;
}
@media (max-width: 768px) {
    .normal-btn {
        top: 200px;
    }
}

/* Standard Navigation */
nav {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem;
    width: 100%;
    position: fixed; /* Navigation bleibt oben feststehend */
    top: 0;
    transition: background-color 0.3s ease; /* Weicher Übergang bei Hintergrundfarbe */
    background-color: transparent; /* Standard transparent */
    z-index: 10;
}
nav.scrolled {
    background-color: #F1EFE7;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* Burger Menü */
.burger {
    display: none;
    flex-direction: column;
    cursor: pointer;
}

.burger span {
    width: 25px;
    height: 3px;
    background-color: #333;
    margin: 4px;
    transition: all 0.3s ease;

}
/* Icon in X-Form verwandeln */
.burger.open span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.burger.open span:nth-child(2) {
    opacity: 0;
}

.burger.open span:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* Menü Links */
nav ul {
    display: flex;
    list-style: none;
    justify-content: center;
}

nav ul li {
    margin-left: 2rem;
}

nav ul li a {
    font-family: 'Quicksand', sans-serif;
    font-weight: 600;
    text-decoration: none;
    color: #333;
}

/* Mobile Navigation */
@media (max-width: 768px) {
    .burger {
        display: flex;
    }

    nav ul {
        display: none;
        position: absolute;
        top: 60px;
        left: 0;
        right: 0;
        background-color: #F1EFE7;
        flex-direction: column;
        align-items: center;
        padding: 1rem;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    nav ul.active {
        display: flex;
        opacity: 1;
        visibility: visible;
    }

    nav ul li {
        margin: 1rem 0; /* Abstand oben und unten für mobile Ansicht */
    }
}




    .hero h1 {
        font-size: 4.125rem; /* Entspricht 66px */
        line-height: 4.5rem; /* Entspricht 72px */
    }

ol {
    margin-left: 30px;
    line-height: 40px;
  }
main {
    max-width: 1200px;
    margin: 0 auto;
    padding: 2rem;
    padding-top: 0px;
}

section {
    padding: 32px 0px;
}
.hero {
    text-align: center;
    padding: 4rem 0;
}

/* headings */
h1 {
    font-size: 4.125rem; /* Entspricht 66px */
    line-height: 4.5rem; /* Entspricht 72px */
    margin-bottom: 1rem;
}
h2 {
    font-size: 2.8125rem; /* Entspricht 45px */
    line-height: 3.375rem; /* Entspricht 54px */
}

h3 {
    font-size: 1.5rem;
    line-height: 2rem;
}

h4 {
    font-size: 2rem; /* Beispielwert, anpassen nach Bedarf */
    line-height: 2.5rem; /* Beispielwert, anpassen nach Bedarf */
}
@media (max-width: 768px) {
    h1 {
        font-size: 3.125rem; /* Entspricht 66px */
        line-height: 3.5rem; /* Entspricht 72px */
        margin-bottom: 1rem;
    }
    h2 {
        font-size: 2.0125rem; /* Entspricht 45px */
        line-height: 2.575rem; /* Entspricht 54px */
    }
    
    h3 {
        font-size: 1.5rem; /* Beispielwert, anpassen nach Bedarf */
        line-height: 2rem; /* Beispielwert, anpassen nach Bedarf */
    }
    
    h4 {
        font-size: 1rem; /* Beispielwert, anpassen nach Bedarf */
        line-height: 2.0rem; /* Beispielwert, anpassen nach Bedarf */
    }
}
.h_bg {
    background-color: #F1EFE7;
}

/* Basis-Styles für die Content Sections */
.content-section {
    background-color: #F1EFE7; /* Beispiel Hintergrundfarbe */
    width: 100%; /* Volle Breite */
    padding: 2rem 0; /* Oben und unten Abstand */
}

/* Gemeinsame Styles für die Content Items */
.content-item {
    padding: 1.5rem;
    border-radius: 5px;
    text-align: center;
}
/* Volle Breite Content */
.full-width-section {
    position: relative;
    width: 100vw; /* Volle Breite des Viewports */
    left: 50%; /* Verschiebung zur Mitte */
    right: 50%; /* Verschiebung zur Mitte */
    margin-left: -50vw; /* Negative Verschiebung um die Hälfte der Viewport-Breite */
    background-color: #F1EFE7; /* Beispielhintergrundfarbe */
    padding: 2rem 0; /* Vertikaler Abstand */
}

.full-width-section .content {
    max-width: 1200px; /* Maximale Breite des Inhalts */
    margin: 0 auto; /* Zentrieren */
    padding: 0 1rem; /* Horizontaler Abstand */
    color: #fff; /* Textfarbe */
    text-align: center; /* Zentrierter Text */
}
.google-map-section {
    width: 100%;
    margin: 0; /* Keine Margen, um volle Breite zu garantieren */
    padding: 0; /* Keine Polsterung */
}

#map {
    width: 100%; /* Setze die Breite des Maps auf 100% */
    height: 500px !important; /* Setze die Höhe nach Bedarf */
    border: 0; /* Keine Ränder */
}
iframe {
    width: 100%; /* Breite des iFrames auf 100% setzen */
    height: 100%; /* Höhe des iFrames auf 100% setzen */
    border: 0; /* Rahmen des iFrames entfernen */
}



.black {
    background-color: black;
    color: white;
}
.red {
    background-color: rgb(255, 64, 64);
    color: black;
}
/* 2-spaltige Content Section */
.content-section-2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2rem;
    max-width: 1200px; /* Maximale Breite */
    margin: 0 auto; /* Zentriert auf der Seite */
}

@media (max-width: 768px) {
    .content-section-2 {
        grid-template-columns: 1fr; /* Untereinander auf mobilen Geräten */
    }
}

/* 3-spaltige Content Section */
.content-section-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px !important; /* Abstand zwischen den Spalten auf 30px setzen */
    max-width: 1200px; /* Maximale Breite */
    margin: 0; /* Zentriert auf der Seite */
}

.content-section-3 .content-item {
    margin: 0; /* Stellt sicher, dass keine zusätzlichen Margins vorhanden sind */
}

@media (max-width: 768px) {
    .content-section-3 {
        grid-template-columns: 1fr; /* Untereinander auf mobilen Geräten */
    }
}



/* 4-spaltige Content Section */
.content-section-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2rem;
    max-width: 1200px; /* Maximale Breite */
    margin: 0 auto; /* Zentriert auf der Seite */
}

@media (max-width: 768px) {
    .content-section-4 {
        grid-template-columns: 1fr; /* Untereinander auf mobilen Geräten */
    }
}

/* Stil für das spezielle E-Mail-Inputfeld */
.email-input-container {
    display: flex;
    flex-direction: column; /* Elemente untereinander anordnen */
    align-items: center;
    margin-top: 1rem; /* Abstand über dem Container */
}

.email-input-container input[type="email"] {
    width: 100%; /* Nimmt den gesamten verfügbaren Platz ein */
    max-width: 400px; /* Maximalbreite für das Inputfeld */
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 5px;
    margin-bottom: 1rem; /* Abstand unter dem Inputfeld */
}

/* Stil für den Call to Action Button */
.email-input-container .cta-button {
    display: inline-block;
    background-color: red; /* Rote Hintergrundfarbe */
    color: white; /* Weiße Schriftfarbe */
    padding: 0.5rem 1rem;
    text-decoration: none;
    border-radius: 5px;
    border: none;
    cursor: pointer;
    width: 100%; /* Gleiche Breite wie das Input-Feld */
    max-width: 400px; /* Maximalbreite für den Button, um die Übereinstimmung mit dem Inputfeld zu gewährleisten */
}

/* Call to Action Button regulär */
.cta-button {
    display: inline-block;
    background-color: rgb(255, 64, 64);
    border: 3px rgb(254, 96, 96) !important;
    color: #fff;
    padding: 0.7rem 1rem;
    text-decoration: none;
    border: none;
    max-width: 300px;
    margin: 0 auto;
}
.cta-button-black {
    display: inline-block;
    background-color: black;
    color: #fff;
    padding: 0.7rem 1rem;
    text-decoration: none;
    border-radius: 5px;
    border: none;
}

/* Testinomiial Slider */
.testimonial-slider {
    display: flex; /* Flexbox für die Anordnung */
    flex-wrap: nowrap; /* Verhindert Umbrüche */
    overflow: hidden; /* Verhindert Überlauf */
    max-width: 1200px; /* Maximalbreite */
    margin: 0 auto; /* Zentriert die Sektion */
    padding: 2rem; /* Innenabstand */
}

.testimonial {
    min-width: 50%; /* 2 Spalten überall außer auf Handys */
    box-sizing: border-box; /* Box-Modell anpassen */
    display: none; /* Standardmäßig nicht sichtbar */
    text-align: center; /* Text zentrieren */
}

.testimonial.active {
    display: block; /* Aktives Testimonial anzeigen */
}

@media (max-width: 768px) { /* Für Smartphones */
    .testimonial {
        min-width: 100%; /* 1 Spalte auf Smartphones */
    }
}

.testimonial h2 {
    margin-bottom: 0.5rem; /* Abstand nach unten */
}
.testimonial-img {
    width: 100%;
    max-width: 501px;
    height: auto;
    border-radius: 10px;
    -webkit-box-shadow: 2px 4px 18px -1px rgba(0,0,0,0.43); 
    box-shadow: 2px 4px 18px -1px rgba(0,0,0,0.43);
}
.name {
    font-size: 18px; /* Größe für den Namen */
    margin: 0.5rem 0; /* Abstand oben und unten */
}

.company {
    font-size: 12px; /* Größe für die Firmenbezeichnung */
    color: gray; /* Farbe für die Firmenbezeichnung */
}



/* GIRD */
.feature-grid, .pricing-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.feature-item, .pricing-item {
    background-color: #f9f9f9;
    padding: 1.5rem;
    border-radius: 5px;
    text-align: center;
}

.pricing-item.featured {
    border: 2px solid #007bff;
}

.price {
    font-size: 1.5rem;
    font-weight: bold;
    margin: 1rem 0;
}
.svg-image {
    height: 120px; 
    display: block; 
    margin: 0 auto; 
    margin-bottom: 32px;
}

form {
    display: grid;
    gap: 1rem;
    max-width: 500px;
    margin: 0 auto;
}

input, textarea {
    width: 100%;
    padding: 0.5rem;
    border: 1px solid #ddd;
    border-radius: 5px;
}

footer {
    background-color: #f4f4f4;
    text-align: center;
    padding: 1rem;
}
.send-btn {
    background-color: black;
    padding: 10px;
    color: white;
}

.map-section {
    width: 100%;
    height: 500px; /* Höhe der Section */
    position: relative;
}
#map {
    width: 100%;
    height: 100%; /* Höhe der Karte */
}
/* Standard: Play-Button auf Desktop ausblenden */
#play-button {
    display: none; /* Ausblenden auf Desktop */
}

/* Play-Button auf Mobilgeräten anzeigen */
@media (max-width: 768px) { /* Ändere die Breite nach Bedarf */
    #play-button {
        display: block;
        position: absolute;
        bottom: 20%;
        left: 50%;
        transform: translate(-50%, 0);
        z-index: 10;
        border: none;
        border-radius: 50%;
    }
}

/* Button Hover-Effekt */
#play-button:hover {
    background-color: rgba(255, 255, 255, 1); /* Vollständig weiß bei Hover */
}

/* Optional: Eine Animation für den Play-Button */
#play-button:active {
    transform: translate(-50%, 2px); /* Visuelle Rückmeldung bei Klick */
}

.playbtn {
    width: 50px;
}

/* Gemeinsame Eigenschaften für alle Animationseffekte */
.animate-on-scroll {
    opacity: 0; /* Standardmäßig unsichtbar */
    transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Übergang für Opazität und Transformation */
}

/* Slide von rechts nach links */
.slide-right {
    transform: translateX(100%); /* Ausgangsposition: 100% nach rechts */
}

.animate.slide-right {
    opacity: 1; /* Sichtbar */
    transform: translateX(0); /* Zur ursprünglichen Position */
}

/* Slide von links nach rechts */
.slide-left {
    transform: translateX(-100%); /* Ausgangsposition: 100% nach links */
}

.animate.slide-left {
    opacity: 1; /* Sichtbar */
    transform: translateX(0); /* Zur ursprünglichen Position */
}

/* Slide von oben nach unten */
.slide-down {
    transform: translateY(-100%); /* Ausgangsposition: 100% nach oben */
}

.animate.slide-down {
    opacity: 1; /* Sichtbar */
    transform: translateY(0); /* Zur ursprünglichen Position */
}

/* Slide von unten nach oben */
.slide-up {
    transform: translateY(100%); /* Ausgangsposition: 100% nach unten */
}

.animate.slide-up {
    opacity: 1; /* Sichtbar */
    transform: translateY(0); /* Zur ursprünglichen Position */
}
/* Deaktiviere Animationen auf Handys */
@media (max-width: 768px) {
    .animate-on-scroll {
        opacity: 1 !important; /* Immer sichtbar */
        transform: none !important; /* Keine Transformation */
        transition: none !important; /* Keine Übergänge */
    }

    .animate.slide-right,
    .animate.slide-left,
    .animate.slide-down,
    .animate.slide-up {
        opacity: 1 !important; /* Immer sichtbar */
        transform: none !important; /* Keine Transformation */
    }
}