:root {
    /* Farbpalette Soundpass.de */
    --color-dark: #1F232B; /* Dunkelblau / Haupt-Hintergrund */
    --color-light: #F4F4F4; /* Hellgrau / Haupt-Textfarbe */
    --color-primary: #FF5733; /* Rot/Orange / Akzentfarbe 1 */
    --color-secondary: #00A3A9; /* Türkis / Akzentfarbe 2 */
}

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

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    line-height: 1.6;
    background-color: var(--color-dark);
    color: var(--color-light);
}

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

h1, h2, h3, h4 {
    line-height: 1.2;
    color: var(--color-light);
}

.section-title {
    font-size: 2.2em;
    text-align: center;
    margin-bottom: 40px;
    color: var(--color-light);
}

/* HERO-BEREICH */
.hero {
    background-color: var(--color-dark);
    padding: 80px 0 60px;
    text-align: center;
    border-bottom: 5px solid var(--color-primary);
}

/* ACHTUNG: Der alte .logo Block für den Text wurde hier entfernt, 
   da wir das Bild-Logo verwenden. */

.headline-h1 {
    font-size: 2.8em;
    margin-bottom: 15px;
    font-weight: 900;
    text-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}

.sub-headline {
    font-size: 1.3em;
    margin-bottom: 40px;
    color: #b0b0b0;
}

/* LAUNCH NOTE / CTA (Anstelle des Formulars) */
.launch-note {
    background-color: #333943;
    padding: 25px;
    border-radius: 8px;
    max-width: 550px;
    margin: 40px auto 0;
    border-left: 5px solid var(--color-primary);
    text-align: center;
}

.launch-note .cta-lead {
    font-size: 1.2em;
    font-weight: 700;
    margin-bottom: 0;
    color: var(--color-light);
}

.cta-button {
    display: inline-block;
    text-decoration: none;
    background-color: var(--color-secondary); /* Türkis-Akzentfarbe für den Link-Button */
    color: white;
    padding: 15px 25px;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    font-weight: 700;
    cursor: pointer;
    transition: background-color 0.3s;
    text-align: center;
}

.cta-button:hover {
    background-color: #008D93; /* Dunkleres Türkis beim Hover */
}

/* FEATURES-BEREICH */
.features {
    padding: 60px 0;
    background-color: #1a1e23;
}

.feature-grid {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.feature-item {
    background-color: #2c323b;
    padding: 30px;
    border-radius: 8px;
    text-align: center;
}

.feature-icon {
    font-size: 2em;
    display: block;
    margin-bottom: 10px;
    font-weight: 900;
}

.icon-orange {
    color: var(--color-primary);
}

.icon-tuerkis {
    color: var(--color-secondary);
}

.feature-item h3 {
    font-size: 1.3em;
    margin-bottom: 10px;
}

/* NEUER ABSCHNITT: PROBLEME UND LÖSUNGEN */
.problems-solutions {
    padding: 60px 0;
    background-color: var(--color-dark);
}

.solution-grid {
    display: flex;
    flex-direction: column; /* Stapeln auf Mobil */
    gap: 40px;
}

.problem-solution-item {
    display: flex;
    flex-direction: column;
    background-color: #333943;
    border-radius: 8px;
    overflow: hidden;
}

.problem, .solution {
    padding: 25px;
}

.problem {
    background-color: #4a515a; /* Dunkelgrau für das Problem */
    border-bottom: 2px solid var(--color-primary); /* Roter Trennstrich */
}

.problem h4 {
    color: var(--color-light);
    margin-bottom: 5px;
}

.solution h4 {
    color: var(--color-secondary); /* Türkis für die Lösung */
    margin-bottom: 5px;
}

/* NEUER ABSCHNITT: FAQ / TRANSPARENZ */
.faq {
    padding: 60px 0 80px;
    background-color: #1a1e23;
}

.faq-grid {
    display: flex;
    flex-direction: column; /* Stapeln auf Mobil */
    gap: 25px;
    max-width: 900px;
    margin: 0 auto;
}

.faq-item {
    background-color: #2c323b;
    padding: 20px;
    border-radius: 8px;
    border-left: 3px solid var(--color-secondary);
}

.faq-item h4 {
    color: var(--color-light);
    margin-bottom: 10px;
}

/* VISION / TRUST-BEREICH */
.vision {
    padding: 80px 0;
    background-color: #2c323b;
    text-align: center;
    border-top: 3px solid var(--color-secondary);
}

.vision-title {
    color: var(--color-primary);
    margin-bottom: 15px;
}

.vision-text {
    font-size: 1.3em;
    max-width: 800px;
    margin: 0 auto;
    color: #b0b0b0;
}

/* FOOTER */
.footer {
    padding: 50px 0 20px;
    background-color: var(--color-dark);
    text-align: center;
}

.footer-links {
    margin-top: 30px;
    font-size: 0.9em;
}

.footer-links a {
    color: #b0b0b0;
    text-decoration: none;
    padding: 0 10px;
}

.footer-links a:hover {
    color: var(--color-light);
}

.footer-launch-note {
    background-color: transparent; /* Transparenter Hintergrund im Footer */
    border-left: none; /* Kein Rand im Footer */
    margin-bottom: 30px;
}

/* ******************************************************* */
/* LOGO-STYLING: FÜR OPTIMALE MOBILE-DARSTELLUNG */
/* ******************************************************* */
.logo-container {
    margin-bottom: 30px; /* Abstand zur Headline */
    text-align: center;
}

.main-logo {
    width: 80%; /* Wichtig: Das Logo nimmt 80% des Containers ein */
    max-width: 250px; /* Maximale Größe für Mobile/kleine Screens */
    height: auto;
    display: block;
    margin: 0 auto;
}

/* **************************************** */
/* RESPONSIVE DESIGN (für Tablets und PCs)  */
/* **************************************** */
@media (min-width: 768px) {
    
    .headline-h1 {
        font-size: 3.5em;
    }

    /* Features (Dreibund) */
    .feature-grid {
        flex-direction: row;
        gap: 20px;
    }

    .feature-item {
        flex: 1;
    }
    
    /* Probleme und Lösungen */
    .problem-solution-item {
        flex-direction: row; /* Nebeneinander auf PC */
    }

    .problem, .solution {
        flex: 1;
    }

    .problem {
        border-bottom: none;
        border-right: 2px solid var(--color-primary); /* Vertikaler Trennstrich auf PC */
    }

    /* FAQ */
    .faq-grid {
        display: grid;
        grid-template-columns: 1fr 1fr; /* Zwei Spalten für FAQ auf PC */
        gap: 30px;
    }
    
    /* Korrektur: Die 3 Problem-Lösung-Paare sollen weiterhin untereinander stehen */
    .solution-grid {
        flex-direction: column; 
    }

    /* Logo-Anpassung für PC */
    .main-logo {
        max-width: 300px; 
    }
}