/* === Aboelo Rechner V2 Styling === */

/* --- CSS Variablen --- */
:root {
    --bwr2-primary: #27AE60; /* Green */
    --bwr2-primary-dark: #229954;
    --bwr2-secondary: #3498db; /* Blau */
    --bwr2-success: #2ecc71; /* Grün */
    --bwr2-error: #e74c3c; /* Rot */
    --bwr2-light-gray: #f8f9fa;
    --bwr2-medium-gray: #e9ecef;
    --bwr2-dark-gray: #6c757d;
    --bwr2-text-primary: #2c3e50;
    --bwr2-border-radius: 8px;
}

/* --- Allgemeine Container --- */
.bwr-2-container {
    max-width: 900px;
    margin: 2rem auto;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    background-color: var(--bwr2-light-gray);
    border-radius: var(--bwr2-border-radius);
    box-shadow: 0 8px 30px rgba(0,0,0,0.1);
    overflow: hidden;
}

/* --- Header & Progress Bar --- */
.bwr-2-header {
    background: linear-gradient(135deg, var(--bwr2-primary), var(--bwr2-primary-dark));
    color: white;
    padding: 1.5rem 2rem;
    text-align: center;
}
.bwr-2-main-title { color: white !important; font-size: 1.6rem; margin: 0 0 0.25rem 0; }
.bwr-2-duration { color: white; font-size: 1rem; opacity: 0.9; margin: 0; }
.bwr-2-progress-container { margin-top: 1.5rem; }
.bwr-2-progress-bar {
    width: 33%;
    height: 6px;
    background-color: white;
    border-radius: 3px;
    transition: width 0.4s ease-in-out;
}
.bwr-2-step-indicator { font-weight: 600; margin-top: 0.5rem; }

/* --- Formular Schritte & Titel --- */
.bwr-2-form { padding: 2rem; }
.bwr-2-step { display: none; }
.bwr-2-step.active { display: block; animation: fadeIn 0.5s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

.bwr-2-step-title { font-size: 1.8rem; color: var(--bwr2-text-primary); text-align: center; margin-bottom: 0.5rem; }
.bwr-2-step-subtitle { font-size: 1.1rem; color: var(--bwr2-dark-gray); text-align: center; margin-bottom: 2rem; }

/* --- Grid Layout --- */
.bwr-2-grid-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 1.5rem;
}
.bwr-2-question.full-width, .bwr-2-input-group.full-width { grid-column: 1 / -1; }

/* --- Fragen & Labels --- */
.bwr-2-question-label { font-weight: 600; font-size: 1.1rem; color: var(--bwr2-text-primary); margin-bottom: 0.5rem; display: block; }
.bwr-2-question-hint { font-size: 0.9rem; color: var(--bwr2-dark-gray); margin-bottom: 0.75rem; display: block; }

/* --- Custom Radio & Checkbox --- */
.bwr-2-radio-group, .bwr-2-checkbox-sub-group { display: flex; flex-direction: column; gap: 0.5rem; }
.bwr-2-radio-group.grid-col-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 0.75rem; }

.bwr-2-radio-label, .bwr-2-checkbox-label {
    display: flex;
    align-items: center;
    background-color: #fff;
    padding: 1rem;
    border: 2px solid var(--bwr2-medium-gray);
    border-radius: var(--bwr2-border-radius);
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 1rem;
}
.bwr-2-radio-label:hover, .bwr-2-checkbox-label:hover { border-color: var(--bwr2-primary); }
.bwr-2-radio-label input, .bwr-2-checkbox-label input { display: none; }

input[type="radio"]:checked + span, input[type="checkbox"]:checked + span { font-weight: 600; }

.bwr-2-radio-label:has(input:checked), .bwr-2-checkbox-label:has(input:checked) {
    border-color: var(--bwr2-primary);
    background-color: #f8f4ff;
    box-shadow: 0 0 0 2px var(--bwr2-primary);
}

/* --- Conditional Logic Styling --- */
.bwr-2-checkbox-sub-group, .bwr-2-treppenlift-frage { display: none; margin-top: 1rem; padding-left: 1rem; border-left: 3px solid var(--bwr2-primary); }

/* --- Text & Select Inputs --- */
.bwr-2-input-group label, .bwr-2-question > label { font-size: 1rem; font-weight: 600; margin-bottom: 0.5rem; }
.bwr-2-input-group input, .bwr-2-input-group select, .bwr-2-textarea {
    width: 100%;
    padding: 0.9rem;
    border: 1px solid #ccc;
    border-radius: var(--bwr2-border-radius);
    font-size: 1rem;
    box-sizing: border-box;
    transition: all 0.2s ease;
}
.bwr-2-input-group input:focus, .bwr-2-input-group select:focus, .bwr-2-textarea:focus { 
    outline: none; border-color: var(--bwr2-primary); box-shadow: 0 0 0 3px rgba(39, 174, 96, 0.2);
}

/* --- Navigation Buttons --- */
.bwr-2-navigation { display: flex; justify-content: space-between; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--bwr2-medium-gray); }
.bwr-2-btn {
    padding: 1rem 2rem;
    border: none !important;
    border-radius: var(--bwr2-border-radius);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    color: white;
    text-decoration: none;
}
.bwr-2-prev-btn { background-color: var(--bwr2-medium-gray); color: var(--bwr2-text-primary); }
.bwr-2-prev-btn:hover { background-color: #d3d9df; }
.bwr-2-next-btn, .bwr-2-submit-btn { background: linear-gradient(135deg, var(--bwr2-primary), var(--bwr2-primary-dark)); color: white; }
.bwr-2-next-btn:hover, .bwr-2-submit-btn:hover { transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1); }

/* --- Validation & Error States --- */
.bwr-2-question.bwr-2-error .bwr-2-question-label, .bwr-2-input-group.bwr-2-error > label { color: var(--bwr2-error); }
.bwr-2-question.bwr-2-error .bwr-2-radio-group, .bwr-2-input-group.bwr-2-error input, .bwr-2-input-group.bwr-2-error select {
    border: 2px solid var(--bwr2-error) !important;
    background-color: #fff8f7;
}
.bwr-2-checkbox-consent.bwr-2-error span { color: var(--bwr2-error); font-weight: bold; }

/* --- Consent & Trust --- */
.bwr-2-consent-group { margin: 2rem 0; }
.bwr-2-checkbox-consent { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }
.bwr-2-checkbox-consent input { flex-shrink: 0; width: 1.2em; height: 1.2em; margin-top: 0.2em; }
.bwr-2-checkbox-consent span { font-size: 0.95rem; color: var(--bwr2-dark-gray); }
.bwr-2-checkbox-consent a { color: var(--bwr2-primary); text-decoration: none; }
.bwr-2-checkbox-consent a:hover { text-decoration: underline; }

.bwr-2-trust-elements { display: flex; justify-content: center; gap: 1.5rem; text-align: center; color: var(--bwr2-dark-gray); margin-top: 2rem; font-size: 0.9rem; }

/* --- Thank You Message --- */
.bwr-2-thank-you { text-align: center; padding: 3rem 1rem; }

/* --- Responsive Design --- */
@media (max-width: 768px) {
    .bwr-2-form { padding: 1.5rem; }
    .bwr-2-grid-container { grid-template-columns: 1fr; }
    .bwr-2-navigation { flex-direction: column; gap: 1rem; }
    .bwr-2-btn { width: 100%; }
}