:root {
    --primary-color: #d4e157;
    --secondary-color: #004d99;
    --accent-color: #98b8cc;
    --text-color: #333;
    --background-color: #fff;
    --footer-background: #f8f9fa;
}

*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    background-color: var(--background-color);
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
    color: var(--secondary-color);
}

a:hover {
    color: var(--primary-color);
}

img {
    max-width: 100%;
    display: block;
}

.container {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header & Navbar */
header {
    background-color: var(--background-color);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
    padding: 1rem 0;
}

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

.logo {
    display: flex;
    align-items: center;
    height: 50px;
}

.logo img {
    max-height: 100%;
    width: auto;
    display: block;
}

.nav-links {
    display: flex;
    align-items: center;
}

.nav-links li {
    margin-left: 20px;
    position: relative; /* For dropdown positioning */
}

.nav-links a {
    padding: 8px 15px;
    transition: color 0.3s ease, background-color 0.3s ease, border-bottom 0.3s ease;
    font-weight: 500;
    border-bottom: 2px solid transparent;
    border-radius: 4px;
    margin: 0 2px;
    color: var(--text-color);
}

.nav-links a:hover,
.nav-links li.active a,
.nav-links li.open > a
{
    color: var(--secondary-color);
    background-color: transparent;
    border-bottom-color: var(--primary-color);
}

/* Dropdown Arrows */
.dropdown-arrow {
    font-size: 0.7em;
    margin-left: 5px;
    display: inline-block;
    transition: transform 0.3s ease;
}

.dropdown:hover > a .dropdown-arrow,
.sub-dropdown:hover > a .dropdown-arrow {
    transform: rotate(180deg);
}
.sub-dropdown > a .dropdown-arrow {
     transform: rotate(-90deg);
}
.sub-dropdown:hover > a .dropdown-arrow {
     transform: rotate(0deg);
}

/* Language Flags */
.lang-flag {
    width: 16px;
    height: auto;
    margin-right: 5px;
    vertical-align: middle;
}

/* Dropdown Content Styling */
.dropdown-content,
.sub-dropdown-content {
    /* display: none; */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0s linear 0.2s;
    position: absolute;
    background-color: var(--background-color);
    min-width: 220px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
    z-index: 1;
    padding: 5px 0;
    border-radius: 5px;
    margin-top: 8px;
}

.sub-dropdown-content {
    left: 100%;
    top: 0;
    margin-top: -5px;
    margin-left: 5px;
}

.dropdown:hover > .dropdown-content,
.sub-dropdown:hover > .sub-dropdown-content {
    /* display: block; */
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.dropdown-content li,
.sub-dropdown-content li {
    margin-left: 0;
}

.dropdown-content a,
.sub-dropdown-content a {
    color: var(--text-color);
    padding: 10px 20px;
    display: block;
    white-space: nowrap;
    border-bottom: none;
    font-weight: normal;
    font-size: 0.95rem;
}

.dropdown-content a:hover,
.sub-dropdown-content a:hover {
    background-color: var(--primary-color);
    color: var(--text-color);
}

/* Hide arrows initially, adjust as needed */
.nav-links .dropdown a > span,
.nav-links .sub-dropdown a > span {
   /* Potentially hide or style dropdown arrows */
}

/* Mobile Menu */
.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    z-index: 10;
}

.mobile-menu-toggle .icon-bar {
    display: block;
    width: 100%;
    height: 3px;
    background-color: var(--text-color);
    border-radius: 10px;
    transition: all 0.3s ease-in-out;
}

/* Animation for Hamburger Icon */
.mobile-menu-toggle.is-open .icon-bar:nth-child(1) {
    transform: translateY(11px) rotate(45deg);
}

.mobile-menu-toggle.is-open .icon-bar:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.is-open .icon-bar:nth-child(3) {
    transform: translateY(-11px) rotate(-45deg);
}

/* --- Section Styles --- */

section {
    padding: 80px 0;
}

section h2 {
    text-align: center;
    margin-bottom: 60px;
    font-size: 2.5rem;
    color: var(--secondary-color);
}

/* Hero Section */
.hero-section {
    background: linear-gradient(to right, var(--accent-color), #b0cce0);
    color: var(--background-color);
    text-align: center;
    padding: 120px 0;
}

.hero-section h1 {
    font-size: 3.5rem;
    margin-bottom: 20px;
    color: var(--secondary-color);
    font-weight: 700;
}

.hero-section p {
    font-size: 1.3rem;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    color: var(--text-color);
    text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
}

.cta-button {
    display: inline-block;
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: 15px 35px;
    border-radius: 25px;
    font-weight: bold;
    transition: background-color 0.3s ease, transform 0.3s ease;
    border: 2px solid var(--secondary-color);
    margin: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1rem;
}

.cta-button.primary {
    background-color: var(--primary-color);
    color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
}
.cta-button.primary:hover {
    background-color: var(--secondary-color);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.cta-button.secondary {
    background-color: transparent;
    color: var(--secondary-color);
    border: 2px solid var(--secondary-color);
}

.cta-button.secondary:hover {
     background-color: var(--secondary-color);
     color: var(--background-color);
     border-color: var(--secondary-color);
}

/* Spezifische Regel für bessere Sichtbarkeit in .cta-section */
.cta-section .cta-button.secondary {
    color: var(--background-color); /* Weißer Text */
    border-color: var(--background-color); /* Weißer Rand */
}

.cta-section .cta-button.secondary:hover {
    background-color: var(--background-color); /* Weißer Hintergrund */
    color: var(--secondary-color); /* Dunkelblauer Text */
    /* border-color bleibt weiß (implizit durch die vorherige Regel oder explizit setzen) */
    border-color: var(--background-color);
}

/* Features Section */
.features-section {
    background-color: var(--background-color);
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
    text-align: center;
}

.feature-item {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 77, 153, 0.15);
}

.feature-item img {
    margin: 0 auto 15px auto;
    background-color: var(--primary-color);
    padding: 10px;
    border-radius: 50%;
    width: 60px;
    height: 60px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.feature-item h3 {
    margin-bottom: 10px;
    color: var(--secondary-color);
}

/* Target Groups Section */
.target-groups-section {
    background-color: #f8f9fa; /* Example: Light grey background */
}

.target-groups-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); /* Adjust minmax as needed */
    gap: 30px;
}

.target-group-item {
    background-color: #fff;
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: center; /* Ensure content is centered */
}

.target-group-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 77, 153, 0.15);
}

.target-group-item img {
    margin: 0 auto 15px auto; /* Center image */
    width: 70px; /* Adjust size as needed */
    height: 70px; /* Adjust size as needed */
}

.target-group-item h3 {
    margin-bottom: 10px;
    color: var(--secondary-color);
    font-size: 1.2rem;
}

.target-group-item p {
    font-size: 0.95rem;
    color: #555;
}

/* Use Cases Section (Specific for Landing Pages) */
.use-cases-section {
    background-color: var(--footer-background); /* Light background */
    padding: 60px 0;
}

.use-cases-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); /* Adjust minmax slightly if needed */
    gap: 30px;
    margin-top: 40px;
}

.use-case-item {
    text-align: center;
    padding: 25px;
    background-color: #fff; /* White background for items */
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.use-case-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
}

.use-case-item img {
    max-width: 50px; /* Slightly smaller icons for use cases */
    height: 50px;
    margin: 0 auto 15px auto;
}

.use-case-item h4 {
    color: var(--secondary-color);
    margin-bottom: 10px;
    font-size: 1.1rem;
    font-weight: 600;
}

.use-case-item p {
    font-size: 0.9rem;
    color: #555;
    line-height: 1.6;
}

/* How It Works Section */
.how-it-works-section {
    background-color: var(--footer-background);
}

.steps-container {
    display: flex;
    justify-content: space-around;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 20px;
}

.step {
    flex-basis: calc(25% - 40px);
    min-width: 200px;
    text-align: center;
    background: var(--background-color);
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    position: relative;
}

.step-number {
    position: absolute;
    top: -15px;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-color);
    color: var(--secondary-color);
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.step img {
    width: 70px;
    height: 70px;
    margin: 20px auto 15px auto;
}

.step h3 {
    color: var(--secondary-color);
    margin-bottom: 10px;
}

.step-arrow {
    display: none;
    font-size: 2rem;
    color: var(--accent-color);
    align-self: center;
}

/* Testimonials Section */
.testimonial-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.testimonial-item {
    background-color: var(--footer-background);
    padding: 30px;
    border-left: 5px solid var(--primary-color);
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}

.testimonial-item blockquote {
    margin: 0 0 15px 0;
    font-style: italic;
    color: #555;
    position: relative;
    padding-left: 25px;
}

.testimonial-item blockquote::before {
    content: '\201C';
    font-size: 3rem;
    color: var(--primary-color);
    opacity: 0.8;
    position: absolute;
    left: -10px;
    top: -10px;
}

.testimonial-item cite {
    display: block;
    text-align: right;
    font-weight: bold;
    color: var(--secondary-color);
}

/* CTA Section */
.cta-section {
    background: var(--secondary-color) url('') no-repeat center center/cover;
    background-blend-mode: multiply;
    position: relative;
    color: var(--background-color);
    text-align: center;
    padding: 80px 0;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(0, 77, 153, 0.7);
    z-index: 1;
}

.cta-section .container {
    position: relative;
    z-index: 2;
}

.cta-section h2 {
    color: var(--primary-color);
    font-size: 2.8rem;
}

.cta-section p {
    color: #e9ecef;
    font-size: 1.2rem;
}

/* Footer */
footer {
    background-color: var(--footer-background);
    padding: 30px 0;
    margin-top: 40px;
    border-top: 1px solid #e7e7e7;
}

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

footer p {
    color: #6c757d;
}

footer ul {
    display: flex;
}

footer li {
    margin-left: 15px;
}

footer a {
    color: #6c757d;
    transition: color 0.3s ease;
}

footer a:hover {
    color: var(--primary-color);
}

/* --- Responsive Design --- */
@media (max-width: 992px) {
    .steps-container {
        justify-content: center;
    }
    .step {
        flex-basis: calc(50% - 30px);
    }
    .step-arrow { display: none; }
}

@media (max-width: 1180px) {
    .logo {
        height: 40px;
    }

    .mobile-menu-toggle {
        display: flex;
        margin-left: auto;
    }

    .nav-links {
        display: none;
        flex-direction: column;
        width: 100%;
        position: absolute;
        top: 70px;
        left: 0;
        background-color: var(--background-color);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        border-top: 1px solid #eee;
    }

    .nav-links.active {
        display: flex;
    }

    .nav-links li {
        margin: 15px 0;
        text-align: center;
        width: 100%;
    }

    .nav-links a:hover, .nav-links li.active a {
        border-bottom-color: transparent;
        background-color: #f1f1f1;
    }

    .dropdown-content,
    .sub-dropdown-content {
        position: static;
        display: none;
        box-shadow: none;
        border: none;
        width: 100%;
        background-color: rgba(0, 77, 153, 0.05);
        padding-left: 30px;
        border-top: 1px solid #eee;
        margin-top: 0;
    }
    .sub-dropdown-content {
        padding-left: 45px;
        background-color: rgba(0, 77, 153, 0.1);
    }

    .dropdown:hover > .dropdown-content,
    .sub-dropdown:hover > .sub-dropdown-content {
       display: none;
    }

    .nav-links li.open > ul {
        display: block !important;
    }

    .dropdown-arrow {
        float: right;
        margin-right: 15px;
        transform: rotate(0deg);
    }

    .nav-links li.open > a > .dropdown-arrow {
        transform: rotate(180deg);
    }
     .sub-dropdown > a .dropdown-arrow {
        transform: rotate(0deg);
     }
     .nav-links li.sub-dropdown.open > a > .dropdown-arrow {
        transform: rotate(180deg);
     }

    .hero-section h1 {
        font-size: 2.2rem;
        overflow-wrap: break-word;
    }

    .hero-section p {
        font-size: 1.1rem;
    }

    .cta-button {
        padding: 12px 25px;
        font-size: 0.9rem;
    }

    section h2 {
        font-size: 2rem;
    }

    .step {
        flex-basis: calc(100% - 20px);
        margin-bottom: 20px;
    }

    footer .container {
        flex-direction: column;
        text-align: center;
    }

    footer ul {
        margin-top: 15px;
        justify-content: center;
    }

     footer li {
        margin: 0 10px;
    }

    .seal-item {
        flex-basis: calc(50% - 20px); /* 2 items per row on tablets */
    }
}

@media (max-width: 480px) {
     .seal-item {
        flex-basis: 100%; /* 1 item per row on small mobile */
    }
}

/* Scroll Reveal Animation */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform; /* Optimize animation */
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Optional: Add slight delay to children elements for staggered effect */
.reveal-on-scroll.is-visible .feature-item,
.reveal-on-scroll.is-visible .step,
.reveal-on-scroll.is-visible .testimonial-item {
  transition-delay: 0.2s; /* Adjust delay as needed */
}

/* Call Action Button (added in Header) */
.call-action-button {
  background-color: var(--primary-color); /* Use primary color #d4e157 */
  transition: transform 0.3s ease, box-shadow 0.3s ease; /* Add transition */
  /* Inheriting width, height, border-radius, border, cursor, display, align-items, justify-content, flex-shrink, margin-left, position from inline styles in JS */
}

.call-action-button:hover {
  transform: scale(1.1); /* Slightly enlarge button */
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.2); /* Add a subtle shadow */
}

/* Ensure icon inside button doesn't affect layout excessively */
.call-action-button img {
  display: block; /* Remove potential extra space */
  /* width and height are set inline in JS */
}

/* Quality Seals Section */
.quality-seals-section {
    background-color: var(--background-color); /* Match background or use --footer-background */
    padding-top: 60px;
    padding-bottom: 60px;
}

.seals-container {
    display: flex;
    justify-content: space-around; /* Distribute seals evenly */
    align-items: flex-start; /* Align items top */
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 30px; /* Space between seals */
}

.seal-item {
    flex-basis: calc(33.333% - 40px); /* Aim for 3 items per row, adjust gap calculation */
    min-width: 150px; /* Minimum width before wrapping */
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.seal-item img {
    max-width: 100px; /* Control max size of the seal */
    height: auto;
    margin-bottom: 15px;
}

.seal-item p {
    font-size: 0.9rem;
    color: var(--text-color);
    line-height: 1.4;
    font-weight: 500;
}

/* Pricing Section */
.pricing-section {
    background-color: var(--footer-background); /* Light background for contrast */
}

/* Billing Toggle Switch */
.billing-toggle {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 40px;
    font-size: 1rem;
}

.billing-option {
    margin: 0 10px;
    color: #666;
    cursor: pointer;
    transition: color 0.3s ease;
}

.billing-option.active {
    color: var(--secondary-color); /* Or --text-color */
    font-weight: bold;
}

.billing-option .discount {
    color: var(--primary-color);
    font-size: 0.9em;
    font-weight: bold;
}

.switch {
  position: relative;
  display: inline-block;
  width: 50px; /* Width of the switch */
  height: 26px; /* Height of the switch */
}

.switch input { 
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px; /* Height of the knob */
  width: 20px; /* Width of the knob */
  left: 3px;  /* Position of the knob */
  bottom: 3px; /* Position of the knob */
  background-color: white;
  transition: .4s;
}

input:checked + .slider {
  background-color: var(--secondary-color); /* Blue when checked */
}

input:checked + .slider:before {
  transform: translateX(24px); /* Move knob to the right */
}

/* Rounded sliders */
.slider.round {
  border-radius: 26px;
}

.slider.round:before {
  border-radius: 50%;
}

/* Pricing Plans Layout */
.pricing-plans,
.addon-plans {
    display: grid;
    gap: 30px;
    margin-top: 40px;
}

/* Force 3 columns for main plans */
.pricing-plans {
    grid-template-columns: repeat(3, 1fr);
}

.addon-plans {
    grid-template-columns: repeat(3, 1fr); /* Force 3 columns */
    justify-items: center; /* Center items if grid space is larger */
}

/* Add responsive rules for main pricing plans */
@media (max-width: 1180px) {
    .pricing-plans {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on medium screens */
    }
}

@media (max-width: 768px) {
    .pricing-plans {
        grid-template-columns: 1fr; /* 1 column on small screens */
    }
    .calculator-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 30px;
    }
}

/* Plan Card Styling */
.plan-card {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative; /* For featured badge */
    display: flex;
    flex-direction: column;
    justify-content: space-between; /* Pushes button down */
}

.plan-card:hover {
     transform: translateY(-5px);
     box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
}

.plan-card.featured {
    border-color: var(--primary-color);
    border-width: 2px;
    box-shadow: 0 8px 20px rgba(212, 225, 87, 0.3);
    transform: scale(1.03); /* Slightly larger featured plan */
}

.featured-badge {
    position: absolute;
    top: -15px; /* Position above the card */
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--primary-color);
    color: var(--secondary-color);
    padding: 5px 15px;
    border-radius: 15px;
    font-size: 0.9rem;
    font-weight: bold;
}

.plan-card h3 {
    color: var(--secondary-color);
    margin-bottom: 20px;
    font-size: 1.5rem;
}

.price-container {
    margin-bottom: 25px;
}

.price {
    font-size: 2.5rem;
    font-weight: bold;
    color: var(--text-color);
    margin-bottom: 5px;
}

.price span {
    font-size: 1rem;
    font-weight: normal;
    color: #666;
    margin-left: 5px;
}

.price.yearly {
    /* Styles for yearly price display are handled by JS */
}

.plan-card .price {
    /* Overwrite default size for Enterprise plan */
    font-size: 1.8rem; 
}

.plan-card:not(:has(.price.monthly)) .price { /* Target Enterprise 'Individuell' */
     font-size: 1.8rem;
     line-height: 3rem; /* Adjust line height for single price text */
}


.vat-note {
    font-size: 0.85rem;
    color: #777;
    margin-top: 5px;
}

.features {
    list-style: none;
    padding: 0;
    margin-bottom: 30px;
    text-align: left;
    flex-grow: 1; /* Allow feature list to grow */
}

.features li {
    margin-bottom: 12px;
    color: #555;
    display: flex;
    align-items: baseline;
}

.features li .check {
    color: var(--primary-color);
    margin-right: 8px;
    font-weight: bold;
    font-size: 1.1em;
}

.plan-card .cta-button {
    width: 100%;
    padding: 12px;
    margin-top: auto; /* Push button to bottom */
}

.plan-card .cta-button.secondary {
     background-color: var(--secondary-color);
     color: white;
     border-color: var(--secondary-color);
}
.plan-card .cta-button.secondary:hover {
     background-color: var(--accent-color);
     border-color: var(--accent-color);
     color: var(--secondary-color);
}


/* Addon Specific Styles */
.addon-title {
    margin-top: 60px; /* Space above addon title */
    font-size: 2rem;
}

.addon-description {
    text-align: center;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 30px;
    color: #666;
}

.addon-card .description {
    font-size: 0.95rem;
    color: #666;
    margin-bottom: 25px;
    flex-grow: 1;
}

/* FAQ Section */
.faq-section {
    background-color: var(--background-color); /* Or --footer-background */
    padding-top: 60px;
    padding-bottom: 80px;
}

.faq-container {
    max-width: 800px; /* Limit width for readability */
    margin: 0 auto;
    border-top: 1px solid #eee; /* Add a top border */
}

.faq-item {
    border-bottom: 1px solid #eee; /* Separator line */
    padding: 20px 0;
}

.faq-item summary {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--secondary-color);
    cursor: pointer;
    list-style: none; /* Remove default marker */
    position: relative;
    padding-right: 30px; /* Space for custom marker */
    transition: color 0.3s ease;
}

.faq-item summary::-webkit-details-marker { /* Hide default marker in Chrome/Safari */
  display: none;
}

.faq-item summary::after { /* Custom marker (e.g., plus/minus or arrow) */
    content: '+'; /* Initial state: plus */
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.5em;
    font-weight: normal;
    color: var(--primary-color);
    transition: transform 0.3s ease;
}

.faq-item[open] summary::after {
    content: '−'; /* Changed state: minus */
    transform: translateY(-50%) rotate(180deg); /* Optional: Rotate marker */
}

.faq-item summary:hover {
    color: var(--primary-color);
}

.faq-item[open] summary {
   /* Optional: Style for open summary */
   /* color: var(--primary-color); */
}

.faq-item > p {
    margin-top: 15px;
    padding-left: 10px; /* Indent answer slightly */
    padding-right: 10px;
    color: #555;
    line-height: 1.7;
    font-size: 1rem;
}

/* Audio Samples Section - Enhanced */
.audio-samples-section {
    padding: 60px 0 80px 0; /* Added more bottom padding */
    /* Subtle gradient background */
    background: linear-gradient(180deg, #fdfdfd 0%, #f0f4f8 100%);
}

.audio-samples-section h2 { /* Ensure section title stands out */
     margin-bottom: 50px;
}

.audio-samples-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Slightly larger min width */
    gap: 30px; /* Increased gap */
    margin-top: 30px;
}

.audio-sample-item {
    text-align: center;
    background-color: #fff;
    padding: 25px; /* Slightly more padding */
    border-radius: 10px; /* Slightly more rounded */
    box-shadow: 0 4px 8px rgba(0, 77, 153, 0.08); /* Softer initial shadow */
    border-top: 4px solid var(--primary-color); /* Accent border */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Keep hover transition */
}

.audio-sample-item:hover {
    transform: translateY(-6px); /* Slightly more lift */
    box-shadow: 0 8px 16px rgba(0, 77, 153, 0.15); /* More pronounced shadow on hover */
}


.audio-sample-item h3 {
    margin-bottom: 20px; /* More space below heading */
    font-size: 1.2em;   /* Slightly larger heading */
    color: var(--secondary-color); /* Use secondary color for heading */
    font-weight: 600;
}

.audio-sample-item audio {
    width: 100%;
    margin-top: 15px; /* More space above audio player */
    border-radius: 5px; /* Round corners of the player slightly */
    outline: none; /* Remove potential browser default focus outline */
}

/* Optional: Style the audio player controls (browser support varies) */
.audio-sample-item audio::-webkit-media-controls-panel {
  background-color: #f8f9fa; /* Light background for controls */
  border-radius: 5px;
}

.audio-sample-item audio::-webkit-media-controls-play-button {
  background-color: var(--primary-color); /* Style play button */
  border-radius: 50%;
}

.audio-sample-item audio::-webkit-media-controls-current-time-display,
.audio-sample-item audio::-webkit-media-controls-time-remaining-display {
    color: var(--secondary-color); /* Style time display */
}

/* Add similar rules for other browsers if needed, e.g., ::-moz- */

/* --- Visitor Counter Styling --- */
#visitor-counter {
    display: inline-block; /* Oder block, je nach Layout */
    margin-left: 15px; /* Etwas Abstand zum Copyright */
    font-size: 0.9em; /* Etwas kleiner als der Haupttext */
    color: #ccc; /* Helles Grau, weniger aufdringlich */
}

#visitor-count-display {
    font-weight: bold; /* Zählerstand hervorheben */
    color: #fff; /* Weiß für besseren Kontrast im Footer (Annahme: dunkler Footer) */
}

/* Responsive Design: Mobile Optimierungen */
@media (max-width: 600px) {
    h1, h2 {
        -webkit-hyphens: auto; /* Für ältere Webkit-Browser */
        -moz-hyphens: auto;    /* Für Firefox */
        -ms-hyphens: auto;     /* Für Microsoft Browser */
        hyphens: auto;         /* Standard */
        overflow-wrap: break-word; /* Zusätzlicher Umbruchschutz */
        word-wrap: break-word; /* Ältere Syntax für overflow-wrap */
    }

    h2 {
        font-size: 1.8rem; /* H2 auf Mobilgeräten kleiner machen */
    }

    /* Fügen Sie hier weitere mobile Optimierungen hinzu */
}

/* ROI Calculator Styles - Enhanced */
.roi-calculator-section {
    padding: 80px 0; /* More padding */
    background: linear-gradient(135deg, var(--accent-color) 0%, #e0f2f7 100%); /* Subtle gradient background */
}

.roi-calculator-section h2 {
    text-align: center;
    margin-bottom: 25px; /* Adjusted margin */
    color: var(--secondary-color); /* Use secondary color */
    font-weight: 600;
}

.roi-calculator-section .section-description { /* Style the description below the title */
    text-align: center;
    margin-bottom: 50px;
    color: #555;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
}

.calculator-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 50px; /* Increased gap */
    max-width: 900px; /* Wider container */
    margin: 0 auto;
    background-color: #fff;
    padding: 40px; /* More padding inside */
    border-radius: 12px; /* More rounded corners */
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12); /* Enhanced shadow */
    border: 1px solid #e0e0e0;
}

.calculator-input label {
    display: block;
    margin-bottom: 10px; /* Increased space */
    font-weight: 600; /* Slightly bolder labels */
    color: #444;
    font-size: 0.95rem;
}

.calculator-input input[type="number"] {
    width: 100%;
    padding: 12px 15px; /* More padding in input */
    margin-bottom: 25px; /* More space below input */
    border: 1px solid #ccc;
    border-radius: 6px; /* Slightly more rounded inputs */
    box-sizing: border-box;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.calculator-input input[type="number"]:focus {
    border-color: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(0, 77, 153, 0.15);
    outline: none;
}

/* Style the button */
#calculate-roi-button {
    padding: 14px 25px;
    font-size: 1.1rem;
    /* Other styles inherited from .cta-button.primary */
}

.calculator-output {
    border-left: 2px dashed var(--primary-color); /* Dashed accent border */
    padding-left: 50px; /* Increased padding */
    display: flex;
    flex-direction: column;
    justify-content: center; /* Vertically center content */
}

.calculator-output h3 {
    margin-top: 0;
    margin-bottom: 30px; /* More space */
    color: var(--secondary-color); /* Use secondary color */
    font-size: 1.4rem; /* Larger heading */
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
}

.calculator-output p {
    margin-bottom: 20px; /* More space between results */
    font-size: 1.1rem;
    color: #333;
    display: flex; /* Align label and value */
    justify-content: space-between;
    align-items: center;
}

.calculator-output p strong {
    color: #555; /* Slightly softer label color */
    font-weight: 600;
}

.calculator-output span {
    font-weight: bold;
    font-size: 1.5rem; /* Larger result figures */
    color: var(--secondary-color); /* Match accent color */
    background-color: #eef5ff; /* Light blue background for numbers */
    padding: 5px 10px;
    border-radius: 4px;
}

.roi-disclaimer {
    font-size: 0.9rem !important;
    color: #777 !important;
    margin-top: auto; /* Push disclaimer to bottom */
    padding-top: 20px; /* Space above disclaimer */
    border-top: 1px solid #eee;
}

/* Responsive adjustments for the calculator */
@media (max-width: 768px) {
    .calculator-grid {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 30px;
    }

    .calculator-output {
        border-left: none;
        padding-left: 0;
        border-top: 2px dashed var(--primary-color);
        padding-top: 40px;
    }

    .calculator-output p {
        flex-direction: column; /* Stack label and value */
        align-items: flex-start;
    }

    .calculator-output span {
        margin-top: 5px; /* Space between label and value */
        font-size: 1.3rem; /* Slightly smaller numbers on mobile */
    }
}

/* Add this rule to stack addon cards on smaller screens */
@media (max-width: 992px) {
    .addon-plans {
        grid-template-columns: 1fr; /* Stack to single column */
    }
}

/* Ensure addon cards don't get too wide on large screens if centered */
.addon-plans .plan-card.addon-card {
    max-width: 400px; /* Adjust max-width as needed */
    width: 100%; /* Ensure it takes available space up to max-width */
}