/******************
    User custom CSS
    ---------------

    In this file you can add your own custom CSS
    It will be loaded last, so you can override any other property.
    Also, it will never be updated. So if you inheritate a core template and just add here some CSS, you'll still benefit of all the updates
*/

/* ==========================================================================
   1. SCHRIFTARTEN (FONTS)
   ========================================================================== */

/* 1.1 Regular (400) */
@font-face {
    font-family: 'Acumin Pro';
    src: url('../files/AcuminPro-Regular.woff2') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* 1.2 Semibold (600) */
@font-face {
    font-family: 'Acumin Pro';
    src: url('../files/AcuminPro-Semibold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}

/* 1.3 Bold (700) */
@font-face {
    font-family: 'Acumin Pro';
    src: url('../files/AcuminPro-Bold.woff2') format('woff2');
    font-weight: bold;
    font-style: normal;
}

/* 1.4 Italic */
@font-face {
    font-family: 'Acumin Pro';
    src: url('../files/AcuminPro-Italic.woff2') format('woff2');
    font-weight: normal;
    font-style: italic;
}

/* 1.5 Globale Zuweisung der Schriftart */
body, h1, h2, h3, h4,
.ls-question-title, 
.answer-container, 
.btn {
    font-family: 'Acumin Pro', sans-serif !important;
}


/* ==========================================================================
   2. TYPOGRAFIE & LINKS (GLOBAL)
   ========================================================================== */

/* Zeilenabstände und Abstände global */
.form-heading,
.ls-question-title,
.answer-text,
.ls-label,
p {
    line-height: 1.4 !important;
    margin-bottom: 1.5rem !important;
}

/* Links allgemein */
a, a:hover {
    font-size: inherit !important;
    color: #e98600; /* Primary Color */
}

a:hover {
    text-decoration: underline;
}

/* Spezifische Text-Größen */
.group-title {
    margin-bottom: 40px !important;
    font-weight: 800 !important;
}

.group-description {
    font-size: 1.5rem !important;
}

.ls-label-question {
    font-size: 2rem !important;
}

.ls-answers .ls-heading th, .ls-answers th {
  color: #444 !important;
}

.ls-answers label, .answer-item label, .control-label {
  color: #444 !important;
}

/* ==========================================================================
   3. THEME FARBEN & BUTTONS (UI COMPONENTS)
   ========================================================================== */

/* Buttons (Normalzustand) */
.btn-primary {
    background-color: #e98600 !important; 
    border-color: #e98600 !important;
}

/* Buttons (Hover/Active/Focus) */
.btn-primary:hover,
.btn-primary:active,
.btn-primary:focus,
.btn-primary:active:focus {
    background-color: #e98600 !important;
    border-color: #e98600 !important;
}

.btn-lg, .btn-group-lg > .btn {
  padding: 10px 35px !important;
  font-size: 1.3rem !important;
  line-height: normal !important;
  border-radius: 2em !important;
}

/* Dropdown Menüs */
.dropdown-menu > li > a:hover {
    color: #ffffff;
    background-color: #e98600 !important;
}

/* Fortschrittsbalken */
.progress-bar {
    background-color: #e98600 !important;
}

/* Input Gruppen (Labels neben Eingabefeldern) */
.input-group-text, 
label .input-group-text {
    color: #ffffff;
    background-color: #e98600;
}


/* ==========================================================================
   4. FRAGEN-DESIGN (RADIO BUTTONS & MATRIX)
   ========================================================================== */

/* --- Radio Buttons (Custom Styling für das Theme) --- */

/* 4.1 Der äußere Ring (Border) */
.radio-item input[type="radio"]:checked + label::before {
    border-color: #e98600 !important;
}

/* 4.2 Der innere Punkt (Background) */
.radio-item input[type="radio"]:checked + label::after {
    background-color: #e98600 !important;
    border-color: #e98600 !important; 
}

/* 4.3 Die Textfarbe des Labels wenn ausgewählt */
.radio-item input[type="radio"]:checked + label {
    color: #e98600 !important;
}

.radio-item label::before {
  border-color: #444 !important;
}

.radio-item input[type="radio"] + label::after {
  background-color: #e98600;
}

/* --- Matrix / Tabellen --- */

/* Mehr Platz in den Zellen */
.ls-answers tbody tr td, 
.ls-answers tbody tr th {
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

/* Rahmen um den Antwortbereich */
.answer-container {
  border: solid 2px #dddddd;
  padding: 15px;
  border-radius: 0.5em;
}

body .answer-item label::after {
  background-color: #e98600;
}

/* ==========================================================================
   5. LAYOUT & STRUKTUR
   ========================================================================== */

/* Navigation Schatten */
#survey-nav.navbar {
    box-shadow: 0 -6px 10px 5px rgba(0,0,0,0.2);
}

/* Volle Breite für den Willkommens-Container */
#welcome-container {
    max-width: 100%;
}

/* Abstände für Titel und Beschreibung */
.survey-name, 
.survey-description, 
.survey-welcome {
    margin-bottom: 45px;
}

.question-container {
  margin-bottom: 4em !important;
}

.form-control {
  border-color: #dee2e6 !important;
  background-color: #eee !important;
  border-radius: 1em !important;
}

.form-control:focus {
  box-shadow: none;
  border-color: #444 !important;
  background-color: #fff !important;
}

.form-control:hover {
  border-color: #444 !important;
}

/* ==========================================================================
   6. RESPONSIVE DESIGN (MEDIA QUERIES)
   ========================================================================== */

/* Mobile: Logo Padding entfernen */
@media (max-width: 768px) {
    .logo-container > img {
        padding: 0 !important;
    }
}

/* Große Bildschirme: Breite auf 80% begrenzen für bessere Lesbarkeit */
@media (min-width: 1200px) {
    .col-xl-8 {
        width: 80%;
    }
}

@media only screen and (max-device-width: 760px) {
  .question-container {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
}