/* Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Helvetica, sans-serif;
    line-height: 1.4;
}

header {
    padding: 20px;
    text-align: center;
    background: #ffffff; /* Background color from .plan */
}

header h1 {
    font-size: 2rem;
    color: #425675 /* Text color from .plan strong */
}

nav {
    margin-top: 10px;
}

/* Navbar Styling */
.navbar {
    position: fixed;
    top: 0; /* Oben fixiert */
    left: 50%; /* Zentriert */
    transform: translateX(-50%);
    width: 90%; /* Breite */
    max-width: 1200px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #ffffff; /* Hintergrundfarbe */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 20px;
    padding: 0 20px;
    z-index: 1000;
}

.navbar-logo img {
    height: 60px;
    margin-right: 10px;
}

.hamburger-menu {
    display: none; /* Standardmäßig versteckt */
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
}

.hamburger-menu span {
    width: 25px;
    height: 3px;
    background-color: #333333;
    transition: all 0.3s ease;
}

/* Menülinks */
.navbar-links {
    display: none; /* Standardmäßig versteckt */
    flex-direction: column;
    gap: 10px;
    position: absolute;
    top: 50%; /* Vertikale Zentrierung */
    left: 50%; /* Horizontale Zentrierung */
    transform: translate(-50%, -50%);
    background-color: white;
    padding: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border-radius: 8px; /* Abgerundete Ecken */
    text-align: center; /* Text zentriert */
    z-index: 1000;
    opacity: 0; /* Unsichtbar als Standard */
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.navbar-links li {
    list-style: none;
}

.navbar-links li a {
    text-decoration: none;
    color: #333333;
    font-size: 14px;
    font-weight: 500;
    transition: color 0.3s ease;
}

.navbar-links li a:hover {
    color: #140786;
}

/* Aktiviertes Menü */
.navbar-links.active {
    display: flex; /* Zeige das Menü */
    opacity: 1; /* Voll sichtbar */
    visibility: visible;
}
.navbar-links li a:hover {
    color: #140786;
}
.buy-now-button {
    background-color: #004AAD; /* Hintergrundfarbe */
    color: #FFFFFF; /* Schriftfarbe */
    border: none; /* Kein Rahmen */
    padding: 10px 20px; /* Innenabstand */
    font-size: 16px; /* Schriftgröße */
    border-radius: 5px; /* Abgerundete Ecken */
    cursor: pointer; /* Zeigt den Pointer-Cursor beim Hover */
    text-align: center; /* Zentriert den Text */
    display: inline-block; /* Verhindert, dass der Button wie ein Block-Element wirkt */
    text-decoration: none; /* Entfernt Unterstreichung (falls als Link verwendet) */
}

.buy-now-button:hover {
    background-color: #003680; /* Hintergrundfarbe beim Hover */
    transition: background-color 0.3s ease; /* Sanfte Farbänderung beim Hover */
}

.hero {
    text-align: left;
    padding: 50px 20px;
    background: #ffffff; /* Background color from .plan */
    color: #425675; /* Text color from .plan title */
    max-width: 1200px;
    margin: 0 auto;
}

.hero h1 {
    font-size: 3rem;
    margin-bottom: 20px;
    color: #425675 /* Button background color from .plan */
    padding-right 10px
}

.hero p {
    margin-bottom: 15px;
}

.hero strong {
    color: #425275; /* Text color from .plan strong */
}

.hero em {
    color: #707a91; /* Text color from .plan pricing small */
}
/* Hero-Container */
.hero-container {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
margin-top: 20px;
padding: 20px;
background: #ecf0ff; /* Hintergrundfarbe */
border-radius: 12px; /* Abgerundete Ecken */
box-shadow: 0 4px 10px rgba(157, 57, 57, 0.1);
flex-wrap: nowrap; /* Immer nebeneinander */
}

/* Linker Bereich */
.hero-left {
flex: 2; /* Nimmt mehr Platz ein */
max-width: 60%; /* Optionale Begrenzung */
}

/* Rechter Bereich */
.hero-right {
flex: 1; /* Nimmt weniger Platz ein */
display: flex; /* Flexbox für zentrierten Inhalt */
align-items: center; /* Vertikal zentrieren */
justify-content: center;
margin-top: 150;/* Horizontal zentrieren */
}

/* Video */
.hero-right iframe {
width: 100%;
max-width: 400px; /* Maximale Breite für das Video */
height: 260px; /* Feste Höhe */
border-radius: 10px; /* Abgerundete Ecken */
}

/* Info-Reihe */
.info-row {
display: flex; /* Info-Blöcke nebeneinander */
gap: 20px; /* Abstand zwischen den Blöcken */
align-items: center; /* Vertikale Zentrierung */
margin-top: 20px;
}

/* Einzelne Info-Blöcke */
.info-item {
text-align: center; /* Zentrierung des Inhalts */
flex: 1; /* Gleiche Breite für alle Blöcke */
}

/* Styling für Text */
.info-item strong {
font-size: 1rem;
color: #425675;
}

.info-item span {
font-size: 0.9rem;
color: #707a91;
}

/* Hervorhebung */
.info-item .highlight {
color: gold; /* Farbe für Sterne */
font-size: 0.9rem;
}

.container {
    display: flex;
    max-width: 1200px;
    margin: 10px auto;
    padding: 0 20px;
    gap: 20px;
}

.main-content {
    flex: 3;
}

iframe {
    width: 100%;
    height: 300px;
    margin-bottom: 20px;
}

.products {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    justify-content: space-between;
    margin-top: 5px;
}

.product {
    flex: 1 1 calc(33.333% - 20px);
    border: 1px solid #bed6fb; /* Border color from .plan pricing */
    border-radius: 16px; /* Border radius from .plan */
    padding: 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    text-align: center;
    background-color: #fff; /* Background color from .plan */
}

.product img {
    max-width: 100%;
    height: auto;
    margin-bottom: 10px;
}

.product h4 {
    font-size: 1.2rem;
    margin: 10px 0;
    color: #425675; /* Text color from .plan title */
}

.product p {
    font-size: 0.9rem;
    color: #697e91; /* Text color from .plan */
    margin-bottom: 20px;
}

.product .button {
    padding: 10px 20px;
    background-color: #6558d3; /* Button background color from .plan */
    color: #fff; /* Text color from .plan button */
    border: none;
    border-radius: 6px; /* Border radius from .plan button */
    cursor: pointer;
    font-size: 1rem;
    transition: background-color 0.3s ease;
}

.product .button:hover {
    background-color: #4133B7; /* Hover color from .plan button hover */
}

footer {
    text-align: center;
    padding: 20px;
    background: #ecf0ff; /* Background color from .plan */
    color: #425675; 
    margin-top: 200px;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #ecf0ff; /* Background color from .plan */
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    padding: 10px;
    z-index: 1;
}

.dropdown:hover .dropdown-content {
    display: block;
}

.benefits {
    background-color: #fff; /* Background color */
    border: 1px solid #bed6fb; /* Border color */
    border-radius: 16px; /* Rounded corners */
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 30px 30px -25px rgba(0, 38, 255, 0.205); /* Shadow effect */
    display: flex;
    flex-direction: column;
    gap: 15px; /* Space between individual benefits */
}

.benefits h2 {
    text-align: left;
    margin-bottom: 20px;
    font-size: 2rem; /* Slightly larger for readability */
    color: #425675; /* Text color */
}

.benefit {
    display: flex;
    align-items: flex-start; /* Align items to the top */
    gap: 20px; /* Space between icon and content */
    padding: 15px;
    background-color: #ffffff; /* Light background for separation */
    border-radius: 8px;
    min-height: 120px; /* Ensure consistent box height */
}

.benefit i {
    font-size: 2rem; /* Icon size */
    color: #1FCAC5; /* Icon color */
    flex-shrink: 0;
    width: 50px; /* Fixed width for alignment */
    text-align: center; /* Center icon */
}

.benefit-content {
    display: flex;
    flex-direction: column; /* Stacks headline and description */
    flex: 1; /* Ensures consistent width for content */
    gap: 5px; /* Space between headline and description */
}

.benefit-content h3 {
    margin: 0;
    font-size: 1.3rem; /* Subheadline size */
    font-weight: bold; /* Makes headline bold */
    color: #425675; /* Subheadline color */
    line-height: 1.5;
}

.benefit-content p {
    margin: 0; /* Ensures no extra margin */
    font-size: 1rem; /* Description size */
    color: #425675; /* Description color */
    line-height: 1.5;
}

.reviews {
    margin: 15px 0; /* Ensure consistent 15px spacing */
    padding: 20px;
    border: 1px solid #bed6fb; /* Border color from .plan pricing */
    border-radius: 16px; /* Border radius from .plan */
    background-color: #fff; /* Background color from .plan */
    box-shadow: none; /* No shadow */
}

.review {
    margin-bottom: 15px;
    padding: 10px;
    border-bottom: 1px solid #bed6fb; /* Border color from .plan pricing */
    background-color: #fff; /* Ensure white background */
}

.review .stars {
    color: gold; /* Gold color for stars */
    font-size: 15px;
}

.review-box {
    background-color: #fff; /* Ensure white background */
    padding: 20px;
    margin: 20px;
    border-radius: 26px; /* Border radius from .plan */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
    text-align: left;
}

.plan {
    border-radius: 16px;
    box-shadow: 0 30px 30px -25px rgba(0, 38, 255, 0.205);
    padding: 10px;
    background-color: #fff;
    color: #697e91;
    max-width: 300px;
}

.plan strong {
    font-weight: 600;
    color: #425275;
}

.plan .inner {
    align-items: center;
    padding: 20px;
    padding-top: 40px;
    background-color: #ecf0ff;
    border-radius: 12px;
    position: relative;
}

.plan .pricing {
    position: absolute;
    top: 0;
    right: 0;
    background-color: #bed6fb;
    border-radius: 99em 0 0 99em;
    display: flex;
    align-items: center;
    padding: 0.625em 0.75em;
    font-size: 1.25rem;
    font-weight: 600;
    color: #425475;
}

.plan .pricing small {
    color: #707a91;
    font-size: 0.75em;
    margin-left: 0.25em;
}

.plan .title {
    font-weight: 600;
    font-size: 1.25rem;
    color: #425675;
}

.plan .title + * {
    margin-top: 0.75rem;
}

.plan .info + * {
    margin-top: 1rem;
}

.plan .features {
    display: flex;
    flex-direction: column;
}

.plan .features li {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.plan .features li + * {
    margin-top: 0.75rem;
}

.plan .features .icon {
    background-color: #1FCAC5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    border-radius: 50%;
    width: 20px;
    height: 20px;
}

.plan .button {
    background-color: #6558d3; /* Button background */
    border-radius: 6px; /* Match .product button */
    color: #fff; /* Text color */
    font-weight: 500;
    font-size: 1.125rem;
    text-align: center;
    border: 0;
    outline: 0;
    width: 100%;
    padding: 0.625em 0.75em;
    text-decoration: none;
}

.plan .button:hover,
.plan .button:focus {
    background-color: #4133B7; /* Hover color */
}
.accordion-section {
    background-color: #f9fbff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    margin-top: 90px;
}

.accordion-section h2 {
    font-size: 2rem;
    color: #425675;
    text-align: center;
    margin-bottom: 20px;
    margin-top: 100px;
}

.accordion {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.accordion-item {
    background-color: #fff;
    border: 1px solid #bed6fb;
    border-radius: 8px;
    overflow: hidden;
    margin-bottom: 10px;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    background-color: #f0f4fa;
    color: #425675;
    font-size: 1.2rem;
    font-weight: bold;
    border: none;
    cursor: pointer;
    outline: none;
    width: 100%;
    transition: background-color 0.3s, transform 0.3s;
}

.accordion-header:hover {
    background-color: #e3ecf9;
}

.accordion-header i {
    font-size: 1.2rem;
    color: #1FCAC5;
    transition: transform 0.3s;
}

/* Rotieren des Icons bei geöffneter Ansicht */
.accordion-header[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.accordion-content {
    max-height: 0; /* Inhalt standardmäßig verborgen */
    overflow: hidden;
    background-color: #e3ecf9;
    color: #6b7c93;
    font-size: 1rem;
    line-height: 1.6;
    padding: 0 20px; /* Polsterung für Text */
    transition: max-height 0.3s ease-out; /* Sanftes Ein-/Ausklappen */
}

/* Sichtbarer Zustand */
.accordion-content[aria-expanded="true"] {
    max-height: 500px; /* Genug Platz für den gesamten Text */
    padding: 20px; /* Polsterung sichtbar machen */
}

/* Zusätzliche Stiloptionen */
.accordion-content p {
    margin: 0;
}

.accordion-item[aria-expanded="true"] {
    background-color: #f0f4fa; /* Optional: Hintergrundfarbe für aktive Items */
}
.card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
  }
  
  .stats-wrapper {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    width: 100px;
    height: 90px;
    border-radius: 20px;
    background-color: rgb(255, 255, 255);
    padding: 16px;
    box-shadow:
      20px 20px 60px #e6e6e6,
      -20px -20px 60px #f3f3f3;
  }
  .heading {
    font-size: 0.7em;
    font-weight: 700;
    letter-spacing: 1px;
  }
  .bottom-wrapper {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .bottom-wrapper .star {
    width: 30px;
    fill: gold;
  }
  .bottom-wrapper .tag {
    width: 27px;
    fill: rgb(141, 214, 32);
  }
  .bottom-wrapper .thumb {
    width: 2;
    fill: blueviolet;
  }
  .bottom-wrapper p {
    font-size: 1.2em;
    font-weight: 700;
  }
  .review-container {
    background-color: #ffffff;
    border: 1px solid #bed6fb;
    border-radius: 16px;
    padding: 20px;
    margin: 90px 0;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.review-container h2 {
    text-align: center;
    color: #425675;
    font-size: 1.8rem;
    margin-bottom: 20px;
}

.review {
    margin-bottom: 20px;
    padding: 10px 0;
    border-bottom: 1px solid #ddd;
}

.review:last-child {
    border-bottom: none;
}

.stars {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.stars i {
    color: gold;
    margin-right: 5px;
}

.review-text {
    font-size: 1.2rem;
    color: #333;
    margin-bottom: 5px;
    font-style: italic;
}

.review-author {
    font-size: 1rem;
    color: #666;
}
.products-container {
    margin-top: 30px;
    padding: 20px;
    background-color: #ffffff;
    border: px solid #ffffff;
    border-radius: 0px;
    box-shadow: 0 px 15px rgba(0, 0, 0, 0.1);
}
.video-container {
    max-width: 900px; /* Begrenzung der Breite des Videos */
    margin: 0 auto; /* Zentrierung des Videos */
    padding: 20px; /* Abstand um das Video */
    background-color: hsl(0, 0%, 100%); /* Hintergrundfarbe */
    border-radius: 10px; /* Abgerundete Ecken */
    box-shadow: 0 4px px rgba(0, 0, 0, 0.1); /* Schatteneffekt */
}

.video-container video {
    width: 100%; /* Video passt sich der Container-Breite an */
    height: auto; /* Automatische Höhe im Verhältnis zur Breite */
    border: 2px solid #ccc; /* Rand um das Video */
    border-radius: 8px; /* Abgerundete Ecken für das Video */
}/* Container Styling */
.payment-container {
    background-color: #ffffff; /* Hintergrundfarbe */
    padding: 0px;
    border-radius: 10px; /* Abgerundete Ecken */
   
    text-align: center; /* Zentrierter Text */
    margin-top: 20px; /* Abstand nach oben */
}

/* Überschrift Styling */
.payment-container h3 {
    font-size: 1.5rem;
    color: #425675; /* Textfarbe */
    margin-bottom: 15px; /* Abstand zum Bild */
}

/* Bild Styling */
.payment-container img {
    max-width: 100%; /* Passt sich an die Containerbreite an */
    height: auto; /* Proportionale Höhe */
    border-radius: 8px; /* Abgerundete Ecken *

.container, .main-content, .hero-container, .benefits-container, .products-container {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;    }

/* Entfernt unnötige Margins und Zentrierungen */
body {
    margin: 0;
    padding: 0;
}

/* Zusätzlicher Stil für den Header und das Navbar */
.navbar, .hero, .footer {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: space-between;
}

.faq-container {
    flex: 3;
    padding: 20px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    color: #333;
    font-family: Arial, sans-serif;
    margin-top: 30px;
}

.faq-container h2 {
    font-size: 2rem;
    color: #425675;
    margin-bottom: 20px;
    margin-top: 100px;
}

.accordion-item {
    margin-bottom: 15px;
}

.accordion-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #f9fbff;
    border: 1px solid #ddd;
    padding: 10px 15px;
    font-size: 1rem;
    font-weight: bold;
    color: #425675;
    border-radius: 5px;
    cursor: pointer;
}

.accordion-header:hover {
    background-color: #eaf3ff;
}

.accordion-content {
    padding: 10px 15px;
    background-color: #fff;
    border: 1px solid #ddd;
    border-top: none;
    border-radius: 0 0 5px 5px;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}
.accordion-content p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
}

.accordion-header[aria-expanded="true"] + .accordion-content {
    max-height: 200px; /* Anpassen je nach Inhalt */
}
.responsive-picture img {
    display: block;
    max-width: 100%; /* Bild passt sich der Breite des Containers an */
    min-width: 300px; /* Mindestbreite des Bildes */
    height: auto; /* Automatische Höhe für korrektes Seitenverhältnis */
    margin: 0 auto; /* Zentriert das Bild */
}


}
@media (max-width: 768px) {
    .hamburger-menu {
        display: flex; /* Zeige Hamburger-Menü */
        padding: 10px; /* Padding in alle Richtungen */
    }

    .navbar-links {
        display: none; /* Verstecke Links standardmäßig */
        flex-direction: column;
        gap: 10px;
        position: absolute;
        top: 50px;
        right: 20px;
        background-color: white;
        padding: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
    }

    .navbar-links.active {
        display: flex; /* Zeige Links, wenn aktiv */
        margin-top: 90px;
    }

    .navbar {
        flex-wrap: nowrap; /* Kein Umbruch */
        height: 60px; /* Reduzierte Höhe */
        padding: 0 15px; /* Gleicher Innenabstand */
        justify-content: space-between; /* Platzierung der Inhalte */
        flex-direction: row; /* Sicherstellen, dass Elemente horizontal bleiben */
    }

    .navbar-logo {
        position: absolute;
        left: 50%;
        transform: translateX(-50%); /* Logo mittig zentrieren */
    }

    .navbar-logo img {
        height: 50px; /* Logo 10px kleiner */
    }

    .navbar-links {
        gap: 15px; /* Gleicher Abstand wie auf mobilen Geräten */
        justify-content: space-between; /* Keine Zentrierung */
        width: auto;
        
    }


    .hero-container {
        flex-direction: column; /* Linker und rechter Bereich untereinander */
        align-items: center; /* Zentrierung auf mobilen Geräten */
        gap: 20px; /* Abstand zwischen den Bereichen */
    }

    .hero-left {
        max-width: 100%; /* Nimmt die volle Breite ein */
        flex: 1 1 100%; /* Gleiche Breite wie der rechte Bereich */
    }

    .hero-right {
        flex: 1 1 100%; /* Gleiche Breite wie der linke Bereich */
    }

    .hero-right iframe {
        max-width: 100%; /* Volle Breite auf mobilen Geräten */
        height: auto; /* Höhe passt sich proportional an */
        margin-top: -150px;
    }

    .info-row {
        flex-wrap: wrap; /* Blöcke umbrechen, wenn nötig */
        justify-content: center; /* Zentrierung der Blöcke */
    }

    .responsive-picture img {
        max-width: 90%; /* Passt sich an den Bildschirm an */
        min-width: 200px; /* Mindestbreite bleibt gleich */
    }
    @media (max-width: 768px) {
        .buy-now-button {
            transform: scale(0.7); /* Verkleinert den Button um 30% */
        }
    }.payment-container img {
        content: url('media/Mögliche Zahlungen.png'); /* Pfad zum mobilen Bild */
        max-width: 100%; /* Sicherstellen, dass das Bild an die Breite angepasst wird */
        height: auto; /* Höhe proportional anpassen */
    }
}
.course-accordion-section h2 {
     margin-top: 90px; /* Abstand nach oben */
    margin-bottom: 20px; /* Abstand nach unten */
    font-size: 2rem; /* Schriftgröße */
    color: #dde4ef; /* Farbe */
    text-align: center; /* Zentrierter Text */
}

.faq-accordion-section h2 {
    margin-top: 90px; /* Abstand nach oben */
    margin-bottom: 20px; /* Abstand nach unten */
    font-size: 2rem; /* Schriftgröße */
    color: #425675; /* Farbe */
    text-align: center; /* Zentrierter Text */
}
.faq-accordion .accordion-item {
    background-color: #ffffff; /* Deine gewünschte Hintergrundfarbe */
    border-radius: 8px; /* Optional: Abrundung der Ecken */
    margin-bottom: 10px; /* Optional: Abstand zwischen den Items */
    padding: 10px; /* Optional: Innenabstand */
}

.faq-accordion .accordion-header {
    background-color: #ffffff; /* Hintergrundfarbe für den Header-Bereich */
    padding: 10px; /* Optional: Innenabstand für den Header */
    border-radius: 8px 8px 0 0; /* Abrundung nur oben */
}

.faq-accordion .accordion-content {
    background-color: #ffffff; /* Hintergrundfarbe für den Content-Bereich */
    padding: 1px; /* Optional: Innenabstand für den Inhalt */
    border-radius: 0 0 8px 8px; /* Abrundung nur unten */
}