/* montserrat-regular - 400 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 400;
  font-display: swap; 
  src: local(''),
       url('fonts/montserrat-v31-latin-regular.woff2') format('woff2'); /* Nur woff2 */
}

/* montserrat-600 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: local(''),
       url('fonts/montserrat-v31-latin-600.woff2') format('woff2'); /* Nur woff2 */
}

/* montserrat-700 */
@font-face {
  font-family: 'Montserrat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: local(''),
       url('fonts/montserrat-v31-latin-700.woff2') format('woff2'); /* Nur woff2 */
}


/* --- Globale Stile & Resets --- */
:root {
    --primary-color: #24c6df; /* NEU: Violett 500 */
    --secondary-color: #3d7ea7; /* NEU: Violett 600 */
    --bullets-problem-color: #3d7ea7; /* NEU: Pink für Problem-Sterne */
    --problem-marker-color: #8B5CF6; /* NEU: Violett 400 für Marker im Problem-Abschnitt */
    --accent-color: #4CAF50;
    --text-color: #333;
    --heading-color: #2c3e50;
    --background-color: #F5F3FF; /* NEU: Violett 50 */
    --white-color: #fff;
    --error-color: #e74c3c;
    --breakpoint-tablet: 992px;
    --breakpoint-mobile: 768px; /* Adjusted for benefits section */
}

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

html {
     scroll-behavior: smooth; /* Smooth scrolling */
}


body {
    font-family: 'Montserrat', sans-serif;
    line-height: 1.7; /* Slightly increased line height for better readability */
    color: var(--text-color);
    background-color: var(--white-color);
    font-size: 16px; /* Base font size */
}

p { /* Default paragraph font size */
     font-size: 1.05rem; /* GEÄNDERT */
     color: #555;
     margin-bottom: 1.5rem; /* Consistent bottom margin */
}
/* Ensure last paragraph in a container doesn't have bottom margin */
p:last-child {
    margin-bottom: 0;
}


li { /* Default list item font size */
     font-size: 1.1rem; /* GEÄNDERT */
}

/* Helper class for marker underline */
.marker-underline {
    display: inline; /* Needed for background-image on inline text */
    text-decoration: none;
    /* NEU: Farbe im SVG geändert */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 8'%3E%3Cpath d='M0 5 C 20 2, 80 8, 100 5' stroke='%238B5CF6' stroke-width='4' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-size: 100% 8px; /* Stellt sicher, dass das SVG die gesamte Breite einnimmt */
    background-position: 0 100%; /* Positioniert am unteren Rand */
    padding-bottom: 4px; /* Etwas Platz unter dem Text */
}


/* --- Navigation --- */
.main-header {
    background-color: var(--white-color);
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
    padding: 1rem 5%; /* Behält 5% an den Rändern für <1400px Screens */
    position: sticky;
    top: 0;
    z-index: 1000;
}

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1400px; /* Max-Breite der Navbar */
    margin: 0 auto;
    padding: 0 4%; /* GEÄNDERT: Mehr Innenabstand (war 2%) */
}

.logo {
  border: #24c6df 2px solid;
  padding: 5px 15px; /* Etwas mehr Padding für eine bessere Optik */
  border-radius: 10px;
  display: inline-block; /* Damit der Hintergrund nur so breit wie der Text ist */
  
  /* Der Farbverlauf */
  background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
    color: var(--white-color);
  font-family: sans-serif;
  font-weight: bold;
}

.logo a {
    text-decoration: none;
    font-weight: 700;
    font-size: 1.5rem;
    color: var(--white-color);
}

.nav-links {
    display: flex;
    justify-content: center;
    list-style: none;
    gap: 2.5rem;
    margin-left: auto; /* Sorgt für Rechtsbündigkeit */
}

.nav-links a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 600;
    transition: color 0.3s ease;
}

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

.cta-button {
    background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
    color: var(--white-color);
    padding: 0.75rem 1.5rem;
    border-radius: 50px;
    text-decoration: none;
    font-weight: 600;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    border: none;
    cursor: pointer;
    text-align: center;
}

.cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
}

.cta-button:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Nav CTA removed */
/* .nav-cta {
   display: none; 
   padding: 0.6rem 1.2rem;
   font-size: 0.95rem;
   margin-left: 2rem; 
} */

.hamburger-menu {
    display: none;
    cursor: pointer;
}

.hamburger-menu .bar {
    display: block;
    width: 25px;
    height: 3px;
    margin: 5px auto;
    background-color: var(--text-color);
    transition: all 0.3s ease-in-out;
}

/* --- Hero Section --- */
.hero-section {
    padding: 4rem 5%;
    background-color: var(--background-color);
    min-height: calc(100vh - 80px); /* Fill the screen */
    display: flex;
    align-items: center;
    overflow: hidden; /* Hide elements before animation */
}

.hero-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 3rem;
    max-width: 1400px;
    margin: 0 auto;
}

.hero-content {
    flex: 1;
    max-width: 600px;
}

h1 {
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--heading-color);
}

.subheadline {
    font-size: 1.2rem; /* GEÄNDERT */
    margin-bottom: 2rem;
}

.subheadline strong {
    font-weight: 600;
}

.benefits-list {
    list-style: none;
    margin-bottom: 2.5rem;
}

.benefits-list li {
    display: flex;
    align-items: center;
    font-size: 1.15rem; /* GEÄNDERT */
    font-weight: 600;
    margin-bottom: 0.8rem;
}

.checkmark-icon {
    width: 24px;
    height: 24px;
    fill: var(--accent-color);
    margin-right: 0.5rem; 
}

.hero-image-container { /* This now holds the form */
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}


/* Finde diese Regel in deiner style.css (ca. Zeile 139) */
.hero-form-container {
    background-color: var(--white-color);
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    width: 100%;
    max-width: 420px;
    
    position: relative; /* WICHTIG: Das Badge wird jetzt relativ dazu positioniert */
    overflow: visible;  /* WICHTIG: Erlaubt dem Badge, über den Rand zu ragen */
}
.form-header {
    background: linear-gradient(90deg, var(--secondary-color), var(--primary-color));
    color: var(--white-color);
    padding: 1rem 1.5rem;
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
}

.form-header h3 {
    margin: 0;
    font-size: 1.2rem;
    text-align: center;
}

.h3_underline {
    text-decoration: underline;
    text-decoration-thickness: 3px;
}

.form-body p {
    font-size: 0.95rem; /* GEÄNDERT */
    margin-bottom: 0.75rem;
    padding: 1.5rem 1.5rem 0 1.5rem;
    text-align: center;
}

.hero-form {
    padding: 1.5rem;
}

.hero-form .form-group {
    margin-bottom: 1rem;
}

.hero-form label {
    display: block;
    font-weight: 600;
    font-size: 0.85rem;
    margin-bottom: 0.3rem;
}

.hero-form input {
    width: 100%;
    padding: 0.7rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    transition: border-color 0.3s ease;
}

.hero-form input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.hero-form input.invalid {
    border-color: var(--error-color);
}

.error-message {
    color: var(--error-color);
    font-size: 0.8rem;
    height: 1em; /* Reserve space to prevent layout shift */
    margin-top: 4px;
}

.hero-form .cta-button {
    width: 100%;
    font-size: 1rem;
    margin-top: 0.5rem;
}


/* --- Problem Section --- */
.problem-section {
    padding: 4rem 5%;
    background-color: var(--white-color);
    text-align: center;
}

.problem-container {
    max-width: 800px;
    margin: 0 auto;
}

.problem-section h2 {
    font-size: 2.2rem;
    color: var(--heading-color);
    margin-bottom: 1rem;
    font-weight: 700;
    line-height: 1.3;
}

.problem-section .intro-text {
    font-size: 1.25rem; /* GEÄNDERT */
    margin-bottom: 2.5rem;
}

.pain-points-list {
    list-style: none;
    padding: 0;
    margin: 0 auto 1rem auto;
    display: inline-block;
    text-align: left;
}

.pain-points-list li {
    font-size: 1.15rem;
    margin-bottom: 1.2rem;
    display: flex;
    align-items:start;
}

.pain-points-list li::before {
    content: '*';
    color: var(--bullets-problem-color);
    font-weight: 500;
    font-size: 3rem;
    margin-right: 0.5rem;
    line-height: 0.8;                    /* Oder 1, je nach Schriftart */
    display: inline-flex;                /* Besser als block, aber flexibel */
    align-items: center;
    justify-content: center;
    height: 1em;                       /* Optional: Fixe Höhe für Konsistenz */
    transform: translateY();            /* Falls Feintuning nötig */
}

.pain-points-list li strong {
    font-weight: 600;
    color: var(--heading-color);
    display: inline;;
}

.problem-section .bad-news {
    font-size: 1.35rem; /* GEÄNDERT */
    margin-bottom: 6.5rem;
    line-height: 1.3;
    font-weight: 600;
    color: var(--text-color); /* NEU: Rote Farbe für schlechte Nachricht */
}

.problem-section span.bad-news {
    background-color: var(--problem-marker-color);
    color: var(--white-color);
}

.problem-section .good-news {
    font-size: 1.25rem; /* GEÄNDERT */
    font-weight: 600;
    /* color: var(--heading-color); */ /* ALT */
    color: #ffffff; /* NEU: Schriftfarbe weiß */
    background-color: #221d1e; /* NEU: Hintergrund geändert */
    padding: 1rem 1.5rem; /* NEU: Innenabstand hinzugefügt */
    border-radius: 10px; /* NEU: Abgerundete Ecken */
    /* display: inline-block; */ /* ALT: Entfernt, damit es die volle Breite einnimmt */
}

.problem-section .conclusion-heading {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--heading-color);
    margin-top: 2rem;
    margin-bottom: 1rem;
}

.problem-section .conclusion-text {
    font-size: 1.15rem; /* GEÄNDERT */
    margin-bottom: 2rem;
    line-height: 1.7;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    
   
}

.problem-section .conclusion-text span {
    font-weight: 600;
    text-decoration-thickness: 2px;
     background-color: var(--problem-marker-color);
     color: var(--white-color);
}

.problem-section .final-statement {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--heading-color);
    display: inline-block;
    text-decoration: none;
    /* Unterstrich entfernt */
    background-image: none;
    padding-bottom: 0;
}


/* --- About Section --- */
.about-section {
    padding: 4rem 5%;
    background-color: var(--background-color);
}

.about-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
    justify-content: center;
}

.about-image {
    flex: 1;
    max-width: 400px;
    width: 100%;
}

.about-image img {
    width: 100%;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.about-text {
    flex: 1.5;
    max-width: 650px;
}

.about-section h2 {
    font-size: 2.5rem;
    margin-bottom: 1.5rem;
    line-height: 1.2;
    color: var(--heading-color);
    font-weight: 600;
}

.about-text p {
    font-size: 1.15rem; /* GEÄNDERT */
    margin-bottom: 1.5rem;
}

.about-text p strong {
    font-weight: 600;
    color: var(--heading-color);
}

/* Removed margin-top for button, relying on paragraph margin */


/* --- Benefits Section --- */
.benefits-section {
    padding: 4rem 5%;
    background-color: var(--white-color);
}

.benefits-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.benefits-section h2 {
    font-size: 2.2rem;
    color: var(--heading-color);
    margin-bottom: 3rem;
    line-height: 1.2;
}

.benefits-grid {
    display: flex;
    justify-content: space-around;
    gap: 2rem;
    flex-wrap: wrap;
}

.benefit-item {
    flex-basis: 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.benefit-item .star-icon {
    width: 50px; /* Grösser, um Kreis aufzunehmen */
    height: 50px; /* Grösser, um Kreis aufzunehmen */
    padding: 8px; /* Innenabstand für den Stern */
    background-color: #F5F3FF; /* NEU: Helles Violett 50 */
    border-radius: 50%; /* Rund */
    fill: var(--primary-color); /* NEU: Stern in Primärfarbe */
    margin-bottom: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08); /* Leichter Schatten */
}

.benefit-item h3 {
    font-size: 1.5rem;
    color: var(--heading-color);
    margin-bottom: 1rem;
}

.benefit-item p {
    font-size: 1.05rem; /* GEÄNDERT */
}

/* --- Roadmap Section --- */
.roadmap-section {
    padding: 4rem 5% 5rem 5%;
    background-color: var(--white-color);
    overflow-x: clip; /* Verhindert horizontales Scrollen durch Pfeile */
}

.roadmap-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.roadmap-section h2 {
    font-size: 2.2rem;
    color: var(--heading-color);
    margin-bottom: 5rem;
    line-height: 1.2;
}

.roadmap-grid {
    display: flex;
    justify-content: center;
    position: relative;
    gap: 4rem; /* Initial gap */
}

.roadmap-step {
    flex: 1;
    background-color: var(--white-color);
    border-radius: 15px;
    padding: 2.5rem 1.5rem 2rem 1.5rem;
    text-align: center;
    position: relative;
    border: 1px solid #dde7f8;
    box-shadow: 0 4px 20px rgba(0,0,0,0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.roadmap-step:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 30px rgba(139, 92, 246, 0.12); /* NEU: Farbe an Violett angepasst */
}

/* The connector arrow */
.roadmap-step:not(:last-child)::after {
    content: '→';
    position: absolute;
    top: 50%;
    /* Adjusted right position based on new gap */
    right: calc(-2rem - 12px); /* Half gap + half arrow size approx */
    transform: translateY(-50%);
    font-size: 2.5rem;
    color: var(--primary-color);
    opacity: 0.4;
    font-weight: bold; 
}

.roadmap-number {
    width: 50px;
    height: 50px;
    line-height: 50px;
    border-radius: 50%;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    color: var(--white-color);
    font-size: 1.5rem;
    font-weight: 700;
    margin: -55px auto 1rem auto;
    border: 4px solid var(--white-color);
    position: relative;
    z-index: 2;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}

/* NEU: Keyframes für Pulsieren */
@keyframes pulsate {
    0% { box-shadow: 0 10px 30px rgba(139, 92, 246, 0.2); } /* NEU: Farbe */
    50% { box-shadow: 0 10px 45px 10px rgba(139, 92, 246, 0.4); } /* NEU: Farbe */
    100% { box-shadow: 0 10px 30px rgba(139, 92, 246, 0.2); } /* NEU: Farbe */
}

/* NEU: Klasse für Animation */
.pulsate-form {
    animation: pulsate 0.6s ease-in-out 3; /* Name, Dauer, Timing, Anzahl */
}


.roadmap-content h3 {
    font-size: 1.4rem;
    color: var(--heading-color);
    margin-bottom: 0.5rem;
}

.roadmap-content p {
    font-size: 1.05rem; /* GEÄNDERT */
}

/* --- All Benefits Section --- */
.all-benefits-section {
    padding: 4rem 5%;
    background-color: var(--background-color);
}

.all-benefits-container {
    max-width: 1200px;
    margin: 0 auto;
    text-align: center;
}

.all-benefits-section h2 {
    font-size: 2.2rem;
    color: var(--heading-color);
    margin-bottom: 3rem;
    line-height: 1.2;
}

.all-benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem 3rem;
    text-align: left;
}

.benefit-point {
    position: relative;
    /* Card Styling */
    background-color: var(--white-color);
    padding: 1.5rem 1.5rem 1.5rem 2.5rem; /* Angepasstes Padding links */
    border-radius: 10px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

 .benefit-point:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(139, 92, 246, 0.1); /* NEU: Farbe */
 }

/* .benefit-point::before {
    content: '>';
    position: absolute;
    left: 1rem; 
    top: 50%; 
    transform: translateY(-50%); 
    color: var(--primary-color);
    font-weight: 700;
    font-size: 1.2rem;
} */

.benefit-point p {
    font-size: 1rem; /* Ggf. Schriftgröße anpassen für Cards */
    color: var(--text-color);
    margin-bottom: 0; /* Letztes p hat keinen margin */
}

.benefit-point p strong {
    font-weight: 600;
    color: var(--heading-color);
    display: block;
    margin-bottom: 0.25rem;
    font-size: 1.1rem; /* Überschrift etwas größer */
}

/* --- FAQ Section --- */
.faq-section {
    padding: 4rem 5%;
    background-color: var(--white-color);
}

.faq-container {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.faq-section h2 {
    font-size: 2.2rem;
    color: var(--heading-color);
    margin-bottom: 3rem;
    line-height: 1.2;
}

.faq-list {
    text-align: left;
}

.faq-item {
    border-bottom: 1px solid #eee;
}

.faq-question {
    background: none;
    border: none;
    width: 100%;
    text-align: left;
    padding: 1.5rem 0;
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--heading-color);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: flex-start; /* GEÄNDERT: Oben ausrichten */
}

.faq-question span:first-child { /* Text der Frage */
   flex-grow: 1;
   margin-right: 1rem;
   line-height: 1.4; /* Hilft bei mehrzeiligen Fragen */
   padding-top: 2px; /* Kleine Anpassung für optische Mitte */
}

.faq-toggle { /* Plus/Minus Symbol */
    font-size: 1.8rem;
    line-height: 1;
    color: var(--primary-color);
    transition: transform 0.3s ease;
    flex-shrink: 0; /* Verhindert Schrumpfen des Symbols */
}

.faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out;
}

.faq-answer p {
   padding: 0 0 1.5rem 0; /* Padding nur unten */
   font-size: 1.05rem;
   margin-bottom: 0; /* Standard p-Margin entfernen */
 }

/* --- CTA Section --- */
.cta-section {
    padding: 4rem 5%;
    background-color: var(--background-color);
    text-align: center;
}

.cta-container {
    max-width: 800px;
    margin: 0 auto;
}

.cta-section h2 {
   font-size: 2.2rem;
    color: var(--heading-color);
    margin-bottom: 2rem;
    line-height: 1.3;
}

.cta-section .hero-form-container { /* Reuse form container style */
    margin: 2rem auto 0 auto; /* Center the form */
}


/* --- Chat Widget --- */
.chat-widget-container {
    position: fixed;
    bottom: 25px;
    right: 25px;
    z-index: 1001;
    transition: transform 0.4s ease-in-out, opacity 0.4s ease-in-out;
}

.chat-widget-container.hidden {
    opacity: 0;
    transform: translateY(100px);
    pointer-events: none;
}

.chat-fab {
    width: 60px;
    height: 60px;
    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
    border-radius: 50%;
    border: none;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: transform 0.3s ease;
    display: flex;
    justify-content: center;
    align-items: center;
}

.chat-fab:hover {
    transform: scale(1.1);
}

.chat-fab svg {
    width: 32px;
    height: 32px;
    fill: var(--white-color);
}

.chat-popup {
    position: absolute;
    bottom: 80px;
    right: 0;
    width: 350px;
    max-width: calc(100vw - 40px);
    background: var(--white-color);
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.15);
    overflow: hidden; 
    transform: scale(0);
    opacity: 0;
    transform-origin: bottom right;
    transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out;

    /* --- HIER HINZUFÜGEN --- */
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 130px); /* 105px Abstand unten + 25px Abstand oben */
}

/* Diese NEUE Regel einfach hinzufügen (z.B. nach .chat-popup.open) */
.chat-popup .form-body {
    overflow-y: auto; /* Macht den Inhaltsbereich scrollbar */
    flex-shrink: 1;   /* Stellt sicher, dass der Body schrumpfen kann */
}

.chat-popup.open {
    transform: scale(1);
    opacity: 1;
}

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

.chat-popup .close-btn {
    background: none;
    border: none;
    color: var(--white-color);
    font-size: 2rem;
    line-height: 1;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s ease;
}
.chat-popup .close-btn:hover {
    opacity: 1;
}

.chat-popup .hero-form textarea {
    width: 100%;
    padding: 0.7rem;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    transition: border-color 0.3s ease;
    min-height: 100px;
    resize: vertical;
}
.chat-popup .hero-form textarea:focus {
   outline: none;
    border-color: var(--primary-color);
}

/* --- Animationen --- */
/* Hero-Animation beim Laden */
@keyframes fadeInDown { from { opacity: 0; transform: translateY(-40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }

.hero-content h1 { animation: fadeInDown 0.8s 0.2s ease-out forwards; opacity: 0; }
.hero-content .subheadline { animation: fadeInDown 0.8s 0.4s ease-out forwards; opacity: 0; }
.hero-content .benefits-list { animation: fadeInUp 0.8s 0.6s ease-out forwards; opacity: 0; }
.hero-form-container { animation: fadeInUp 0.8s 0.8s ease-out forwards; opacity: 0; }

/* Scroll-Animationen */
.fade-in-element {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in-up { transform: translateY(50px); }
.fade-in-left { transform: translateX(-50px); }
.fade-in-right { transform: translateX(50px); }

.fade-in-element.is-visible {
    opacity: 1;
    transform: translate(0, 0);
}


/* --- Responsive Design --- */
@media (min-width: 993px) { /* Slightly above tablet breakpoint */
     /* Remove nav cta on desktop */
     .nav-cta { 
         display: none; 
     }
}

@media (max-width: 992px) {
    h1 { font-size: 2.5rem; }
    .about-section h2 { font-size: 2.2rem; }
    .main-header {
        padding: 1rem 3%; /* ETWAS MEHR ABSTAND FÜR KLEINERE DESKTOPS / TABLETS */
    }
    .navbar {
        padding: 0; /* Auf Tablets kein extra Innenabstand, da .main-header das übernimmt */
    }
    .nav-links {
        position: fixed; left: -100%; top: 0; flex-direction: column; justify-content: flex-start;
        align-items: flex-start; background-color: var(--white-color); width: 70%; max-width: 300px;
        height: 100vh; padding: 4rem 2rem; transition: left 0.4s ease-in-out;
        box-shadow: 2px 0 5px rgba(0,0,0,0.1); z-index: 999; 
        margin: 0; /* GEÄNDERT: margin-left: auto entfernen für mobiles Menü */
    }
    .nav-links.active { left: 0; }
    .nav-links li { width: 100%; padding: 1rem 0; }
    .navbar { justify-content: space-between; }
    .hamburger-menu { display: block; }
    .hamburger-menu.active .bar:nth-child(2) { opacity: 0; }
    .hamburger-menu.active .bar:nth-child(1) { transform: translateY(8px) rotate(45deg); }
    .hamburger-menu.active .bar:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }
    .hero-container { flex-direction: row; text-align: left; gap: 2rem; }
    .hero-content { text-align: left; max-width: none; flex-shrink: 1; }
    .hero-image-container { flex-shrink: 1; max-width: 50%; }
    .benefits-list { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 1rem 1.5rem; margin-bottom: 2rem; padding: 0; }
    .benefits-list li { margin-bottom: 0; font-size: 1.05rem; } /* GEÄNDERT */
    
    .roadmap-grid {
        flex-direction: column;
        align-items: center;
        gap: 5rem;
    }
    .roadmap-step {
        width: 100%;
        max-width: 500px;
    }
    .roadmap-step:not(:last-child)::after {
        content: '↓';
        top: 100%;
        left: 50%;
        right: auto;
        /* GEÄNDERT: Korrekte Transformation und Abstand nach unten */
        transform: translateX(-50%) translateY(15px); 
        font-weight: bold; /* Auch hier dicker */
    }

    .all-benefits-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 768px) {
    .about-container { flex-direction: row; text-align: left; gap: 3rem; }
}

@media (max-width: 768px) {
     .benefits-grid {
        flex-direction: column;
        align-items: center;
        gap: 3rem;
    }
    .benefit-item {
        flex-basis: auto;
        max-width: 400px;
    }
    .all-benefits-grid {
        grid-template-columns: 1fr; /* On smaller tablets, stack */
    }
    .benefit-point {
         padding: 1.2rem 1.2rem 1.2rem 2.2rem;
    }
    .benefit-point::before {
         top: 50%; /* Zentriert auf Tablet */
    }

    /* Anpassung für mobile Navigation */
    .main-header {
        padding: 1rem 5%; /* Ursprünglicher Padding für Mobilgeräte */
    }
    .navbar {
        padding: 0; /* Kein Padding hier, da es im main-header gesetzt ist */
    }
}

@media (max-width: 600px) {
    h1, .about-section h2 { font-size: 2rem; }
    .subheadline { font-size: 1.1rem; } /* GEÄNDERT */
    .hero-section { padding: 2.5rem 5%; }
    .hero-container { flex-direction: column; text-align: center; }
    .hero-content { max-width: 100%; }
    .hero-image-container { max-width: 100%; margin-top: 2rem; }
    .benefits-list { flex-direction: column; align-items: flex-start; gap: 0.8rem; display: inline-flex; }
    .problem-section h2 { font-size: 1.8rem; }
    .pain-points-list li { font-size: 1.05rem; } /* GEÄNDERT */
    .roadmap-content h3 { font-size: 1.2rem; }
    .all-benefits-grid {
        grid-template-columns: 1fr;
    }
    p { font-size: 1rem; } /* Base paragraph size for mobile */
     .subheadline { font-size: 1.05rem; }
     .benefits-list li { font-size: 1.05rem; }
     .problem-section .intro-text { font-size: 1.1rem; }
     .pain-points-list li { font-size: 1.05rem; }
     .problem-section .good-news { font-size: 1.1rem; }
     .problem-section .conclusion-text { font-size: 1.05rem; }
     .about-text p { font-size: 1.05rem; }
     /* NEU: Anpassung für den Button-Text auf sehr kleinen Screens */
     .about-text .cta-button { 
         font-size: 0.9rem; 
         padding: 0.7rem 1.2rem;
     }
     .benefit-item p { font-size: 1rem; }
     .roadmap-content p { font-size: 1rem; }
     .benefit-point p { font-size: 1rem; }
     .faq-question { font-size: 1.1rem; }
     .faq-answer p { font-size: 1rem; }
     .cta-section h2 { font-size: 1.8rem; }


}

/* --- Anpassung für Hero Form Header --- */


.form-header h3 {
    /* ... (deine bestehenden 'margin', 'font-size', 'text-align' Stile bleiben) ... */
    /* Wir geben dem Text etwas Platz, damit er nicht unter das Badge rutscht */
    /* padding-right: 70px;  */
    width: 96%;
    margin-left: auto;
    margin-right: auto;
}

/* --- NEU: Das Sticker-Badge --- */
/* --- NEU: Das "Fancy" Sticker-Badge (Sternform) --- */
/* --- NEU: Styling für das Bild-Badge --- */


.badge-image {
    position: absolute;
    /* Angepasste Positionierung, um über die Ecke zu ragen */
    top: -60px; /* Negativer Wert, damit es nach oben über den Rand ragt */
    right: -70px; /* Negativer Wert, damit es nach rechts über den Rand ragt */
    
    /* Größe des Bildes */
    width: 120px; /* Breite anpassen, bis es gut aussieht */
    height: auto; /* Höhe automatisch anpassen, um Proportionen zu bewahren */
    
    /* Optional: Leichte Drehung für den "Sticker"-Effekt */
    transform: rotate(20deg); 
    
    /* Optional: Schatten, damit es sich vom Hintergrund abhebt */
    filter: drop-shadow(0 5px 10px rgba(0,0,0,0.3)); /* Alternativ zu box-shadow für Bilder */
    
    z-index: 20; /* Stellt sicher, dass es über allem liegt */
}

/* --- Status Modal (Pop-up) --- */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Dunkler Hintergrund */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Über allem, außer vielleicht Chat? */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.modal-overlay.visible {
    opacity: 1;
}

.modal-box {
    background-color: var(--white-color);
    padding: 2.5rem 2rem 2rem 2rem;
    border-radius: 10px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.2);
    width: 90%; /* Perfekt für Mobile */
    max-width: 450px; /* Maximale Breite auf Desktops */
    position: relative;
    text-align: center;
    /* Animation beim Einblenden */
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.modal-overlay.visible .modal-box {
    transform: scale(1);
}

.modal-box h3 {
    color: var(--heading-color);
    font-size: 1.5rem;
    margin-top: 0;
    margin-bottom: 1rem;
}

.modal-box p {
    font-size: 1.05rem;
    color: var(--text-color);
    margin-bottom: 0;
}

.modal-close-btn {
    position: absolute;
    top: 10px;
    right: 15px;
    background: none;
    border: none;
    font-size: 2rem;
    color: #999;
    cursor: pointer;
    line-height: 1;
    padding: 0;
}

.modal-close-btn:hover {
    color: var(--text-color);
}

/* --- Footer (Impressum/Datenschutz) --- */
.main-footer-legal {
    padding: 2.5rem 5%;
    background-color: #f9fafb; /* Ein sehr helles, sauberes Grau */
    border-top: 1px solid #eee; /* Dezente Trennlinie nach oben */
    text-align: center; /* Standard: Zentriert für Mobile */
}

.footer-container {
    max-width: 1200px; /* Passt zu deinen anderen Sektionen */
    margin: 0 auto;
    display: flex;
    flex-direction: column; /* Standard (Mobile): Stapeln */
    align-items: center;
    gap: 1rem;
}

.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap; /* Falls mehr Links hinzukommen */
    justify-content: center;
    gap: 0.5rem 1.5rem; /* Abstand zwischen den Links */
}

.footer-links li {
    margin-bottom: 0; /* Überschreibt globales li-Styling */
    font-size: 0.95rem;
}

.footer-links a {
    color: var(--text-color);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

.copyright-text {
    font-size: 0.9rem;
    color: #777; /* Etwas unauffälliger */
    margin-bottom: 0; /* Überschreibt globales p-Styling */
}

/* --- Media Query für den Footer --- */
/* Passt sich an deine bestehende 768px-Grenze an */
@media (min-width: 768px) {
    .main-footer-legal {
        text-align: left; /* Links-ausgerichtet auf Desktop */
    }
    
    .footer-container {
        flex-direction: row; /* Desktop: Nebeneinander */
        justify-content: space-between;
    }

    .footer-links {
        justify-content: flex-start; /* Links am Anfang ausrichten */
    }
}


/* --- Styling für Rechtstexte (Impressum & Datenschutz) --- */
.legal-section {
    padding: 4rem 5% 6rem 5%;
    background-color: var(--white-color);
    min-height: 60vh; /* Damit der Footer nicht in der Mitte hängt bei wenig Text */
}

.legal-container {
    max-width: 800px; /* Optimale Lesebreite */
    margin: 0 auto;
    text-align: left; /* Wichtig: Linksbündig für lange Texte */
}

.legal-container h1 {
    font-size: 2.5rem;
    margin-bottom: 2.5rem;
    color: var(--heading-color);
    border-bottom: 2px solid var(--background-color);
    padding-bottom: 1rem;
}

.legal-container h2 {
    font-size: 1.8rem;
    margin-top: 3rem;
    margin-bottom: 1rem;
    color: var(--heading-color);
    font-weight: 700;
}

.legal-container h3 {
    font-size: 1.3rem;
    margin-top: 2rem;
    margin-bottom: 0.8rem;
    font-weight: 600;
    color: var(--text-color);
}

.legal-container h4 {
    font-size: 1.1rem;
    margin-top: 1.5rem;
    margin-bottom: 0.5rem;
    font-weight: 600;
}

.legal-container p {
    margin-bottom: 1rem;
    line-height: 1.8;
}

.legal-container ul {
    margin-bottom: 1.5rem;
    padding-left: 1.5rem;
}

.legal-container li {
    margin-bottom: 0.5rem;
    font-size: 1.05rem;
}

.legal-container a {
    color: var(--primary-color);
    text-decoration: underline;
}

.legal-container a:hover {
    text-decoration: none;
}

/* Responsive Anpassung */
@media (max-width: 600px) {
    .legal-container h1 {
        font-size: 2rem;
    }
    .legal-container h2 {
        font-size: 1.5rem;
    }
}