/* styles.css */

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Inter', Arial, sans-serif;
    margin: 0;
    padding: 0;
    color: #333;
    line-height: 1.6; /* Increased line height for better readability */
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
.container-subpages {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}
.icon-large {
    font-size: 4.5em; /* Increased size */
    color: #333;
}

header {
    background-color: #f8f8f8;
    padding: 10px 0;
    margin-left: 10px;
    margin-right: 10px;
}

header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

header .logo {
    font-size: 24px;
    font-weight: bold;
    color: #333; /* Ensure the text color is set to black */
    text-decoration: none; /* Remove underline */
}
.hero {
    display: flex;
    justify-content: center; /* Space between content and image */
    align-items: center; /* Centers the items vertically */
    padding: 50px 0;
    flex-wrap: nowrap; /* Prevent wrapping unless on small screens */
    gap: 20px; /* Add spacing between content and image */
}
.container-hero {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box; /* Include padding in width calculations */
    display: flex; /* Ensure it applies flex rules */
    flex-direction: row; /* Row direction by default */
    gap: 20px; /* Add consistent spacing between children */
}
.hero-content {
    flex: 1; /* Allow content to take up remaining space */
    max-width: 50%; /* Limit content width to 50% */
}

.hero h1 {
    font-size: 36px;
    margin-bottom: 20px;
}

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

.hero button {
    padding: 10px 20px;
    font-size: 16px;
    background-color: black;
    color: #fff;
    border: none;
    cursor: pointer;
    border-radius: 25px; /* This value can be adjusted to make the edges more or less rounded */
}
.hero-image {
    flex: 1; /* Allow the container to grow */
    max-width: 50%; /* Adjust width as needed */
    display: flex; /* Make the container a flex container */
    align-items: center; /* Center image vertically */
    justify-content: center; /* Center image horizontally */
    margin: 0 auto; /* Center the container itself if needed */
}
.hero-image img {
    width: auto;
    max-width: 100%;
    max-height: 400px; /* Maintain the aspect ratio */
    display: block; /* Prevent inline spacing issues */
}

#app-store-buttons {
    display: flex;
    gap: 10px; /* Space between the buttons */
    align-items: left; /* Center align the buttons vertically */
    justify-content: flex-start; /* Center align the buttons horizontally on desktop */
    margin-top: 20px;
}

#app-store-buttons a img {
    height: 40px; /* Fixed height for both badges */
    width: auto; /* Maintains aspect ratio */
    object-fit: contain; /* Avoids any distortion */
    display: block; /* Prevents inline spacing issues */
}

.use-cases {
    padding: 50px 0;
    text-align: center;
}

.use-cases-carousel {
    background-color: #61bb1816; /* or #fafafa, or a light blue like #eef3f8 */
    padding: 60px 0;
    position: relative;
  }
  

.use-cases-carousel h2,
.use-cases-carousel .section-intro {
  text-align: center;
}

.use-cases-carousel .section-intro {
  font-size: 16px;
  color: #666;
}

.use-case-content-with-icon {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 30px;
    padding: 20px;
    border-radius: 12px;
    max-width: 900px;
    margin: 0 auto;
  }
  
  .text-content {
    flex: 1;
  }
  
  .use-case-icon-wrapper {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .use-case-icon {
    font-size: 80px;
    color: #4a4a4a;
    opacity: 0.9;
  }
  
  .use-case-steps {
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  
  .use-case-steps .step {
    display: flex;
    align-items: center;
    padding: 6px 12px;
  }
  
  .use-case-steps .step span {
    font-weight: bold;
    margin-right: 10px;
    color: #2a2a2a;
  }
    
.features {
    padding: 50px 0;
    text-align: center; /* Center-align the headline and content */
    background-color: #f8f8f8;
}

.features h2 {
    margin-bottom: 20px;
    font-size: 28px;
    color: #333;
}

.features p {
    margin-bottom: 40px; /* Add space between content and features */
    font-size: 16px;
    color: #666;
}

.feature-list {
    display: flex;
    flex-direction: row; /* Default to horizontal layout */
    gap: 20px; /* Space between the feature boxes */
    justify-content: center; /* Center-align horizontally */
    align-items: flex-start; /* Align items at the top */
    flex-wrap: wrap; /* Allow wrapping to the next row if necessary */
    margin-top: 50px;
}

.feature {
    display: flex;
    flex-direction: column;
    align-items: center; /* Center-align each feature's content */
    max-width: 300px; /* Optional: Set a width limit */
    text-align: center; /* Center-align text within each feature */
    height: 280px;
    background: #fff; /* Optional: Add background for features */
    padding: 20px; /* Optional: Add padding for each feature block */
    border-radius: 8px; /* Optional: Add rounded corners */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Optional: Add subtle shadow */
}
.safe {
    max-width: 80%;
    margin: 0 auto; /* Centers the .safe container horizontally */
    padding: 50px 0;
    background-color: #ffffff;
    justify-content: center;
    text-align: center;
}

.safe h2 {
    margin-bottom: 30px;
    font-size: 28px;
    color: #333;
}

.safe-content {
    display: block;
    max-width: 500px;
    margin: 0 auto;
    text-align: left;
}

.safe-content p,
.safe-content h3 {
    margin-bottom: 20px;
    color: #333;
}

.notizblock {
    max-width: 80%;
    margin: 0 auto;
    padding: 50px 0;
    background-color: #ffffff; /* Light green background */
    text-align: center;
}

.notizblock h2 {
    margin-bottom: 30px;
    font-size: 28px;
    color: #333;
}

.notizblock-content {
    display: block;
    max-width: 500px;
    margin: 0 auto;
    text-align: left;
}

.notizblock-content p,
.notizblock-content h3 {
    margin-bottom: 20px;
    color: #333;
}

.security {
    max-width: 80%;
    margin: 0 auto;
    padding: 50px 0;
    background-color: #ffffff; /* Light blue background */
    text-align: center;
}

.security h2 {
    margin-bottom: 30px;
    font-size: 28px;
    color: black;
}

.security-content {
    display: block;
    max-width: 500px;
    margin: 0 auto;
    text-align: left;
}
.security-content p,
.security-content h3 {
    margin-bottom: 20px;
    color: #333;
}
.testimonial {
    padding: 50px 0;
    text-align: center;
    background-color: #f8f8f8;
}

.testimonial blockquote {
    font-size: 24px;
    font-style: italic;
    margin: 0 auto 20px auto;
    position: relative;
    color: #333;
    max-width: 500px; /* Limit the width of the quote */
    line-height: 1.5; /* Improve readability */
}

.testimonial .subheading {
    color: #777;
    font-size: 16px;
    margin-top: 10px;
    max-width: 800px; /* Limit the width of the subheading */
    margin: 0 auto 20px auto; /* Center the subheading */
}

.testimonial .author {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20px;
}

.testimonial .author img {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    object-fit: cover;
    margin-bottom: 10px;
}

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

.testimonial .author-title {
    color: #777;
    font-size: 14px;
}

.testimonial .nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
    max-width: 150px; /* Limit the width of the navigation */
    margin: 0 auto; /* Center the navigation */
}

.testimonial .nav button {
    background: none;
    border: 2px solid #ccc;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: #333;
    font-size: 18px;
}

.testimonial .nav button:hover {
    border-color: #333;
}

.testimonial .nav button:focus {
    outline: none;
}

/* FAQ Section */
.faq {
    padding: 50px 0;
    background-color: #fff;
    text-align: center;
}

.faq h2 {
    margin-bottom: 20px;
    font-size: 28px;
    color: #333;
}

/* Accordion Styles */
.accordion {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

.accordion-item {
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

.accordion-button {
    width: 100%;
    padding: 15px;
    background-color: #fff;
    border: none;
    outline: none;
    cursor: pointer;
    font-size: 16px;
    font-weight: bold;
    color: #333;
    text-align: left;
}

.accordion-button:focus {
    outline: none;
}

.accordion-content {
    padding: 15px;
    display: none;
    background-color: #fff;
    border-top: 1px solid #ddd;
}

.accordion-content p {
    margin: 0;
}

/* Active button */
.accordion-button.active {
    background-color: #fafafa;
    color: #333;
}

.steps {
    padding: 50px 0;
    text-align: center;
    background-color: whitesmoke; /* White background */
}

.steps .step {
    display: inline-block;
    margin: 0 20px;
}
.no-style-link {
    text-decoration: none;
    color: inherit;
}

.no-style-link:visited, 
.no-style-link:focus, 
.no-style-link:hover, 
.no-style-link:active {
    color: inherit;
    text-decoration: none;
}

#pricing-info, #pricing-info-features {
    font-weight: bold;
    color: #2C3E50;
    margin-top: 10px;
}

.pricing-section {
    padding: 60px 0;
    background-color: #61bb1816;
    align-items: center;
  }
  .pricing-section h2,
.pricing-section p {
  text-align: center;
}
  
  .pricing-cards {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px;
  }
  
  .pricing-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 12px;
    padding: 30px 20px;
    width: 300px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    transition: transform 0.3s ease;
  }
  
  .pricing-card:hover {
    transform: translateY(-5px);
  }
  
  .pricing-card h3 {
    font-size: 22px;
    margin-bottom: 10px;
    color: #2C3E50;
  }
  
  .pricing-card .price {
    font-size: 28px;
    font-weight: bold;
    color: #111;
    margin-bottom: 10px;
  }
  
  .pricing-card .note {
    font-size: 14px;
    color: #999;
    margin-bottom: 20px;
  }
  
  .pricing-card ul {
    list-style: none;
    padding: 0;
    margin: 20px 0;
  }
  
  .pricing-card ul li {
    margin-bottom: 10px;
    color: #444;
  }
  
  .pricing-button {
    background-color: #333;
    color: #fff;
    border: none;
    padding: 12px 24px;
    font-size: 16px;
    border-radius: 25px;
    cursor: pointer;
  }
  
  .premium-button {
    background-color: #000;
  }


@media (max-width: 768px) {
    .container {
        flex-direction: row; /* Ensure stacking inside the container */
    }
    .imprint {
        padding: 30px 10px; /* Reduce padding on smaller screens */
    }

    .imprint p {
        padding-left: 10px;
        padding-right: 10px; /* Add padding for better readability */
    }
    .features .feature-list {
        display: flex;
        flex-direction: column;
        align-items: center; /* Center-align items horizontally */
        gap: 20px; /* Optional: adds spacing between items */
    }
    .feature-list {
        flex-direction: row; /* Arrange features horizontally */
        justify-content: center; /* Center-align the feature row */
        gap: 20px; /* Space between feature blocks */
    }
    .feature {
        max-width: 100%; /* Ensures items take full width on mobile */
        text-align: center; /* Centers text within each feature item */
    }
    .container-hero {
        flex-direction: column; /* Stack items vertically */
    }
    h2 {
        order: 1; /* Ensure title comes first */
        margin-bottom: 20px; /* Add spacing below the title */
    }
    h1 {
        order: 1;
        width: 100%; /* Erlaubt dem Text, die gesamte Breite zu nutzen */
    }
    .hero-content {
        max-width: 100%; /* Entfernt die Einschränkung auf 60% */
        padding: 0 10px; /* Optional: Fügt etwas Innenabstand hinzu */
        box-sizing: border-box; /* Sicherstellen, dass Padding berücksichtigt wird */
    }
    .hero-content p a {
        order: 2;
        text-align: center; /* Zentriert den Text */
        width: 100%; /* Erlaubt dem Text, die gesamte Breite zu nutzen */
    }
    .hero-image {
        order: 2; /* Ensure the image always comes after the content */
        width: 80%; /* Full width on mobile */
        margin: 0 auto; /* Center the image */
    }

    .hero-image img {
        order: 2;
        max-width: 100%; /* Scale the image for smaller screens */
        height: auto; /* Maintain the aspect ratio */
    }
    .use-case {
        padding: 20px;
    }

    .use-cases h2 {
        font-size: 24px;
    }

    .use-case h3 {
        font-size: 20px;
    }

    .use-case p {
        font-size: 15px;
    }
    
    .safe-content {
        order: 3;
        display: block;
        margin: 0 auto;
        text-align: left;
    }.notizblock-content {
        order: 3;
        display: block;
        margin: 0 auto;
        text-align: left;
    }
    .security-content {
        order: 3;
        display: block;
        margin: 0 auto;
        text-align: left;
    }
    .downloads .download-stats, .features .feature-list {
        flex-direction: column;
    }

    .overview-content {
        flex-direction: column;
        
    }

    .footer-links ul {
        flex-direction: column;
    }

    .footer-columns {
        flex-direction: column;
    }
    #app-store-buttons {
        order: 3;
        display: flex;
        align-items: center; /* Center align the buttons horizontally */
        justify-content: center;
        gap: 5 px; /* Add spacing between the buttons */
        width: 100%; /* Ensure the container fits within the viewport */
        padding: 10px; /* Add padding for better spacing */
    }

    #app-store-buttons a img {
        height: 50px; /* Reduce button size for mobile */
        width: auto; /* Maintain aspect ratio */
        max-width: 80%; /* Prevent the buttons from exceeding the screen width */
        object-fit: contain; /* Ensure proper scaling without distortion */
    }
}