/*
 * Local SEO ROI Rechner Styling
 * Minimalistisches CSS, das Theme-Styles erben lässt.
 */

/* 1. Wrapper und Grid-Layout */
.roi-calculator-wrapper {
    /* Verwendet die Schriftart des Themes */
    font-family: inherit; 
    
    /* Setzt eine maximale Breite, aber zentriert sich nicht selbst */
    max-width: 700px; 
    
    /* Nutzt die Hintergrund- und Textfarbe des Themes */
    background: inherit;
    color: inherit;
    
    padding: 20px;
    border: 1px solid #e0e0e0; /* Einzige "harte" Farbe, oft von Themes überschrieben */
    border-radius: 8px;
}

/* 2. Formular-Grid */
.roi-calculator-form {
    display: grid;
    /* 2 Spalten Layout */
    grid-template-columns: 1fr 1fr; 
    gap: 15px 20px; /* 15px Zeilenabstand, 20px Spaltenabstand */
}

/* 3. Formular-Gruppen (Label + Input) */
.roi-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.roi-form-group label {
    /* Schriftart, Größe und Farbe vom Theme erben */
    font-weight: bold;
    font-size: 0.9em;
    font-family: inherit;
    color: inherit;
}

/* * KEIN STYLING FÜR: 
 * input[type="number"] 
 * button
 * * Diese Elemente sollen zu 100% die Stile Ihres
 * aktiven WordPress-Themes übernehmen (Farben, Ränder, Padding).
 */


/* 4. Steuerung für Elemente über die volle Breite */
.roi-form-group.full-width {
    grid-column: 1 / -1; /* Erstreckt sich über alle Spalten */
}

/* 5. Styling des Ergebnis-Containers */
.roi-result-container {
    margin-top: 25px;
}

.roi-result-container h4 {
    /* Erbt Theme-Stil für H4 */
    margin-top: 15px;
    margin-bottom: 10px;
}

.roi-result-container p {
    /* Erbt Theme-Stil für Absätze */
    font-size: 1em;
    line-height: 1.6;
    margin-bottom: 15px;
}

/* 6. Die farbigen Boxen (Erfolg / Fehler) */
.roi-result-success,
.roi-result-error {
    padding: 20px;
    border-radius: 5px;
    line-height: 1.5;
}

.roi-result-success {
    background-color: #f0f8f2; /* Leichtes Grün */
    border-left: 5px solid #4CAF50; /* Dunkles Grün */
    color: #333;
}

.roi-result-error {
    background-color: #fcf0f0; /* Leichtes Rot */
    border-left: 5px solid #d9534f; /* Dunkles Rot */
    color: #333;
}

/* 7. Die hervorgehobene Ergebnis-Zahl */
.roi-result-highlight {
    font-size: 1.8em;
    font-weight: bold;
    text-align: center;
    color: #4CAF50; /* Grün (kann angepasst werden) */
    margin: 10px 0;
}


/* 8. Responsivität (Mobile Ansicht) */
@media (max-width: 600px) {
    .roi-calculator-form {
        /* Auf mobilen Geräten: 1 Spalte */
        grid-template-columns: 1fr;
    }
    
    .roi-form-group.full-width {
        /* (Bleibt bei 1 Spalte) */
        grid-column: 1 / -1; 
    }
}