/* 1. Progressbar ausblenden (Falls der Run-Schalter nicht reicht) */
.progress-container, .progress {
    display: none !important;
}

/* 2. Header-Bild anpassen */
.run-container .run_content_header img {
    max-width: 20% !important; 
    height: auto !important; 
    float: right !important;
}

/* 3. Hintergrund der gesamten Seite (inklusive formr-Wrappern) */
body, 
html, 
.run-container, 
#main-container,
.main-content {
    background-color: #0f7c9d !important;
    background: #0f8c9d !important;
}

/* Entfernt die vertikalen Begrenzungslinien links und rechts */
.run-container, 
#main-container, 
.container, 
.container-fluid, 
.main-content, 
.page-wrapper {
    border-left: none !important;
    border-right: none !important;
    border: none !important;
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
}

/* Sicherheitshalber auch für die Zeilen und Spalten im Layout */
.row, [class*="col-"] {
    border-left: none !important;
    border-right: none !important;
}

/* 4. Inhalts-Container (Weißer Kasten für die Fragen) */
/* Wir sprechen hier gezielt die formr-eigenen Boxen an */
.well, 
.survey-container, 
.shw_content, 
.run_content,
div[class*="survey-"] {
    background-color: rgba(255, 255, 255, 0.95) !important; 
    padding: 30px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    border: none !important; /* Entfernt eventuelle Standard-Ränder */
}

/* Rein optisches Schriftdesign für den Willkommenstext */
.form-horizontal .form-group.form-row.optional.item-note .control-label {
    /* Schriftart & -größe */
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px !important;    /* Leicht erhöht für bessere Lesbarkeit */
    line-height: 1.6 !important;  /* Entspannter Zeilenabstand */
    font-weight: 400;             /* Normale Schriftdicke */
    
    /* Farbe & Ausrichtung */
    color: #2c3e50 !important;   /* Angenehmes, dunkles Anthrazit statt hartem Schwarz */
    text-align: left !important;  /* Garantiert linksbündig */
    
    /* Abstand nach unten */
    margin-bottom: 25px !important; /* Schafft Platz zwischen Text und Button */
}


/* Leichter Hover-Effekt für die Zeile zur besseren Orientierung */
.form-horizontal .form-group.form-row.item-mc:hover {
    background-color: #f8fafc; 
}

/* ==========================================
   DESKTOP: Sauberes Design für die MC-Items
   ========================================== */

/* Gesamte Frage-Zeile (Container) */
.form-horizontal .form-group.form-row.item-mc {
    padding: 20px 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid #e2e8f0;
    display: block !important; /* Hebt das alte Bootstrap-Layout auf */
    clear: both;
}

/* Der Fragetext (vollflächig über den Antwortoptionen) */
.form-horizontal .item-mc .control-label {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px !important;
    color: #2c3e50 !important;
    font-weight: 500;
    line-height: 1.5;
    margin-bottom: 15px !important;
    
    /* Bootstrap-Fixes für die Überlappung */
    float: none !important;
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
}

/* Container für die Antwortoptionen */
.form-horizontal .item-mc .controls,
.form-horizontal .item-mc .controls-inner {
    float: none !important;
    width: 100% !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px 25px; /* Erste Zahl = Abstand nach unten bei Umbruch, zweite Zahl = Abstand rechts */
}

/* Einzelne Antwort-Option (Radio + Text) */
.form-horizontal .item-mc label.radio-inline {
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 14px;
    color: #4a5568;
    cursor: pointer;
    
    /* Flexbox sorgt dafür, dass Radio und Text eine Einheit bilden und nicht umbrechen */
    display: inline-flex !important;
    align-items: center;
    
    /* Hebt starre Bootstrap-Breiten auf */
    width: auto !important; 
    max-width: none !important;
    padding-left: 0 !important;
    margin-right: 0 !important;
}

/* Die Radio-Punkte selbst richtig positionieren */
.form-horizontal .item-mc label.radio-inline input[type="radio"] {
    position: static !important; /* Verhindert das "Übereinanderlagern" */
    margin: 0 8px 0 0 !important; /* Exakter Abstand rechts zum Text */
    cursor: pointer;
}


/* ==========================================
   MOBILE OPTIMIERUNG (Für Smartphones & Tablets)
   ========================================== */
@media (max-width: 768px) {
    /* Mehr Platz an den Seiten auf Mobilgeräten */
    .form-horizontal .form-group.form-row.item-mc {
        padding: 20px 5px;
        display: flex;
        flex-direction: column;
    }

    /* Macht das Label (die Frage) auf Mobile vollflächig */
    .form-horizontal .item-mc .control-label {
        width: 100% !important;
        max-width: 100% !important;
        text-align: left !important;
        float: none !important;
        margin-bottom: 12px !important;
    }

    /* Die Antwort-Optionen untereinander statt nebeneinander listen */
    .form-horizontal .item-mc .controls,
    .form-horizontal .item-mc .controls-inner {
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
        display: flex;
        flex-direction: column; /* Erzwingt die Liste untereinander */
        gap: 12px; /* Angenehmer Abstand zum Tippen mit dem Finger */
    }

    /* Einzelne Antwortboxen auf Mobile vergrößern (bessere "Touch-Targets") */
    .form-horizontal .item-mc label.radio-inline {
        width: 100%;
        padding: 10px 12px !important;
        background-color: #f1f5f9; /* Macht die ganze Zeile antippbar */
        border-radius: 6px;
        margin-left: 0 !important; /* Fixiert den Bootstrap-Versatz */
        transition: background-color 0.1s ease;
    }

    /* Visuelles Feedback beim Antippen auf dem Handy */
    .form-horizontal .item-mc label.radio-inline:active {
        background-color: #cbd5e1;
    }
}


/* Gezieltes Styling für den Absende-Button im formR-Formular */
.form-horizontal .form-group.btn-submit button.btn.btn-info,
button#item1648141,
.btn-info {
    color: #ffffff !important; /* Erzwingt weiße Schrift auf dunklem Grund */
    
    /* Hintergrund (Blauer Farbverlauf) */
    background: linear-gradient(135deg, #005A9C, #0088cc) !important; 
    background-color: #005A9C !important; /* Fallback für ältere Browser */
    
    /* Typografie */
    font-family: 'Helvetica Neue', Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.5px;
    
    /* Abstände & Form */
    padding: 14px 30px;
    border: none !important;
    border-radius: 8px;
    
    /* Schatten & Effekte */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: all 0.3s ease;
    
    display: inline-block;
    min-width: 200px;
}

/* Hover-Effekt (Maus drüber) */
.form-horizontal .form-group.btn-submit button.btn.btn-info:hover,
button#item1648141:hover,
.btn-info:hover {
    color: #ffffff !important;
    background: linear-gradient(135deg, #004477, #0077b3) !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
    transform: translateY(-2px);
}

/* Active-Effekt (beim Anklicken) */
.form-horizontal .form-group.btn-submit button.btn.btn-info:active,
button#item1648141:active,
.btn-info:active {
    color: #ffffff !important;
    transform: translateY(1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}