/*
 * KIVM – Studie zur Selbstwahrnehmung
 * Custom CSS v3 — Teal · Glassmorphism
 * Stand: 2026-05-31
 */

/* ══════════════════════════════════════════════════════════
   1. FARBEN
   ══════════════════════════════════════════════════════════ */
:root {
    --c-accent:      #1a8070;
    --c-accent-dk:   #136050;
    --c-accent-bg:   rgba(26,128,112,0.09);
    --c-text:        #0d1e1b;
    --c-text-mid:    #2c4a45;
    --c-text-soft:   rgba(13,30,27,0.55);
    --c-card:        rgba(250,254,252,0.97);
    --c-hint:        rgba(26,128,112,0.10);
    --c-hint-bar:    rgba(26,128,112,0.55);
    --c-err:         rgba(180,40,40,0.08);
    --c-err-bar:     rgba(185,60,60,0.55);
    --c-divider:     rgba(26,128,112,0.12);
}

/* ══════════════════════════════════════════════════════════
   2. FUNDAMENT & HINTERGRUND
   ══════════════════════════════════════════════════════════ */
html {
    color-scheme: light only !important;
    background: #1a3530 !important;
    min-height: 100vh;
}
body {
    background: transparent !important;
    font-family: "Noto Sans", system-ui, sans-serif !important;
    font-size: 16px !important;
    line-height: 1.7 !important;
    color: var(--c-text) !important;
    -webkit-font-smoothing: antialiased !important;
    hyphens: none !important;
    -webkit-hyphens: none !important;
}
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background: url('bg.jpg') center / cover no-repeat;
}

/* ══════════════════════════════════════════════════════════
   3. HAUPT-CARD (Glassmorphism)
   ══════════════════════════════════════════════════════════ */
.container-md,
.container-fluid.col-xl-8 {
    background: var(--c-card) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,0.65) !important;
    box-shadow: 0 20px 56px rgba(8,36,30,0.14), 0 1px 0 rgba(255,255,255,0.5) inset !important;
    padding: 40px 52px !important;
    margin-top: 28px !important;
    margin-bottom: 36px !important;
}

/* ══════════════════════════════════════════════════════════
   4. NAVBAR
   ══════════════════════════════════════════════════════════ */
.navbar, nav.navbar {
    background: rgba(236,250,246,0.42) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    border-bottom: 1px solid rgba(255,255,255,0.48) !important;
    box-shadow: 0 1px 12px rgba(8,36,30,0.08) !important;
}

/* ══════════════════════════════════════════════════════════
   5. TYPOGRAFIE
   ══════════════════════════════════════════════════════════ */
* { color: var(--c-text) !important; }

h1, .survey-name {
    font-size: 1.85rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
    color: var(--c-text) !important;
}
h2 { font-size: 1.25rem !important; font-weight: 600 !important; margin-top: 1.4rem !important; }
h3, h4 { font-size: 1.0rem !important; font-weight: 600 !important; margin-top: 1.1rem !important; }
p { margin-bottom: 0.8rem !important; }
strong, b { font-weight: 600 !important; }
a, a:link, a:visited { color: var(--c-accent) !important; }
a:hover { color: var(--c-accent-dk) !important; }

/* Fragetext-Ebenen */
.ls-label-question {
    font-size: 15px !important;
    font-weight: 400 !important;
    line-height: 1.65 !important;
}
.ls-label-question strong,
.ls-label-question b {
    font-size: 17px !important;
    font-weight: 700 !important;
    display: block !important;
    margin-bottom: 6px !important;
    letter-spacing: -0.01em !important;
}
/* Letzter Absatz = Skalen-Legende: dezent */
.ls-label-question p:last-child {
    font-size: 13px !important;
    font-style: italic !important;
    color: var(--c-text-soft) !important;
}
/* Ausnahme Stressor (QID 13): Abschlussfrage prominent, nicht kursiv */
#question13 .ls-label-question p:last-child {
    font-size: 15px !important;
    font-style: normal !important;
    font-weight: 600 !important;
    color: var(--c-text) !important;
    margin-top: 14px !important;
    padding-top: 12px !important;
    border-top: 1px solid var(--c-divider) !important;
}

.text-primary, a.text-primary { color: var(--c-text-mid) !important; }
.btn-primary *, .btn-primary { color: #fff !important; }
::placeholder { color: var(--c-text-soft) !important; }

/* ══════════════════════════════════════════════════════════
   6. FORTSCHRITTSBALKEN
   ══════════════════════════════════════════════════════════ */
.progress {
    height: 22px !important;
    background: rgba(26,128,112,0.13) !important;
    border-radius: 11px !important;
    overflow: hidden !important;
}
.progress-bar {
    background: linear-gradient(90deg, #2aaa94, #1a8070) !important;
    border-radius: 11px !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #fff !important;
    text-shadow: 0 1px 2px rgba(0,0,0,0.2) !important;
}

/* ══════════════════════════════════════════════════════════
   7. HINWEISFELDER — linker Akzentstreifen, kein Außenrand
   ══════════════════════════════════════════════════════════ */

/* Gruppen-Beschreibung: nur linker Streifen, kein Kasten */
html body .group-description,
html body div.group-description {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-left: 3px solid var(--c-hint-bar) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 6px 16px !important;
    margin-bottom: 18px !important;
    font-size: 15px !important;
    color: var(--c-text-mid) !important;
}

/* Einverständnis / Debriefing-Info: sichtbarer Hinweis */
.kivm-consent,
.kivm-debrief-info,
.kivm-hint-box {
    background: var(--c-hint) !important;
    border: none !important;
    border-left: 4px solid var(--c-hint-bar) !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 14px 18px !important;
    margin-bottom: 14px !important;
}

/* Schrift in Hinweisfeldern und Fragen-Containern kompakter */
.group-description h2, .kivm-consent h2, .kivm-debrief-info h2,
.question-container h2 {
    font-size: 1.0rem !important;
    font-weight: 700 !important;
    margin-top: 1.0rem !important;
    margin-bottom: 0.15rem !important;
    letter-spacing: -0.01em !important;
}
.group-description h3, .kivm-consent h3, .kivm-debrief-info h3,
.question-container h3 {
    font-size: 0.88rem !important;
    font-weight: 700 !important;
    margin-top: 0.7rem !important;
    margin-bottom: 0.1rem !important;
}
.group-description p,  .kivm-consent p,  .kivm-debrief-info p,
.group-description li, .kivm-consent li, .kivm-debrief-info li,
.question-container p, .question-container li {
    font-size: 14px !important;
    line-height: 1.62 !important;
    margin-bottom: 0.4rem !important;
}

/* Sorgentelefon / Ethik-Box */
.kivm-debrief-support {
    background: var(--c-err) !important;
    border: none !important;
    border-left: 4px solid var(--c-err-bar) !important;
    border-radius: 0 8px 8px 0 !important;
    padding: 14px 18px !important;
}

/* ══════════════════════════════════════════════════════════
   8. FRAGEN-CONTAINER — komplett unsichtbar, nur Trennlinie
   ══════════════════════════════════════════════════════════ */
html body .question-container,
html body div.question-container {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--c-divider) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 18px 2px !important;
    margin-bottom: 0 !important;
}
html body .question-container:last-of-type {
    border-bottom: none !important;
}

/* ══════════════════════════════════════════════════════════
   9. MATRIX-TABELLE
   ══════════════════════════════════════════════════════════ */
table.ls-answers {
    border-collapse: collapse !important;
    width: 100% !important;
    table-layout: fixed !important;
}
thead th, .ls-heading th, .subquestion-list thead th {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--c-text-mid) !important;
    text-align: center !important;
    padding: 6px 4px 10px !important;
    vertical-align: bottom !important;
}
table.ls-answers thead tr { border-bottom: 2px solid rgba(26,128,112,0.25) !important; }
table.ls-answers tbody tr { border-bottom: 1px solid rgba(26,128,112,0.13) !important; }
table.ls-answers tbody td {
    padding: 10px 4px !important;
    text-align: center !important;
    vertical-align: middle !important;
}
/* Zeilenbeschriftungen linksbündig */
table.ls-answers tbody th.answertext,
table.ls-answers tbody td.answertext,
th.answertext, td.answertext,
th.answertext *, td.answertext * {
    text-align: left !important;
    padding-left: 8px !important;
    padding-right: 12px !important;
    vertical-align: middle !important;
}
/* Hover */
table.ls-answers tbody tr:hover,
table.ls-answers tbody tr:hover > * {
    background: rgba(26,128,112,0.10) !important;
    box-shadow: inset 4px 0 0 rgba(26,128,112,0.45) !important;
}
/* Ausgewählte Zeile */
table.ls-answers tbody tr.success > *,
table.ls-answers tbody tr.table-success > * {
    background: rgba(26,128,112,0.14) !important;
}

/* ══════════════════════════════════════════════════════════
   10. RADIO-BUTTONS (custom)
   ══════════════════════════════════════════════════════════ */
table.ls-answers td input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important; height: 18px !important;
    min-width: 18px !important; min-height: 18px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(26,128,112,0.35) !important;
    background: rgba(255,255,255,0.85) !important;
    display: block !important;
    margin: 0 auto !important;
    cursor: pointer !important;
    transition: border-color 0.12s, background 0.12s !important;
}
table.ls-answers td input[type="radio"]:checked {
    background: var(--c-accent) !important;
    border-color: var(--c-accent) !important;
    box-shadow: inset 0 0 0 3px rgba(255,255,255,0.88) !important;
}
table.ls-answers td input[type="radio"]:focus {
    border-color: var(--c-accent) !important;
    box-shadow: 0 0 0 3px rgba(26,128,112,0.18) !important;
    outline: none !important;
}
.form-check-input:checked, input[type="checkbox"]:checked {
    background-color: var(--c-accent) !important;
    border-color: var(--c-accent) !important;
}

/* ══════════════════════════════════════════════════════════
   11. BUTTONS
   ══════════════════════════════════════════════════════════ */
.btn-primary, input[type="submit"], button[type="submit"] {
    background: var(--c-accent) !important;
    border: 1px solid var(--c-accent-dk) !important;
    border-radius: 9px !important;
    padding: 10px 28px !important;
    font-weight: 500 !important;
    box-shadow: 0 2px 10px rgba(26,128,112,0.25) !important;
    transition: all 0.15s !important;
}
.btn-primary:hover, input[type="submit"]:hover, button[type="submit"]:hover {
    background: var(--c-accent-dk) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 16px rgba(26,128,112,0.35) !important;
}
.btn-default, .btn-outline-secondary, .btn-secondary {
    background: transparent !important;
    border: 1px solid rgba(26,128,112,0.30) !important;
    border-radius: 9px !important;
}

/* ══════════════════════════════════════════════════════════
   12. FORMULARELEMENTE
   ══════════════════════════════════════════════════════════ */
.form-control, input[type="text"], input[type="number"],
input[type="email"], textarea, select {
    border: 1px solid rgba(26,128,112,0.25) !important;
    border-radius: 8px !important;
    background: rgba(255,255,255,0.75) !important;
    color: var(--c-text) !important;
    font-size: 16px !important;
    padding: 8px 12px !important;
}
.form-control:focus, input[type="text"]:focus, textarea:focus {
    border-color: var(--c-accent) !important;
    box-shadow: 0 0 0 3px rgba(26,128,112,0.14) !important;
    background: rgba(255,255,255,0.95) !important;
    outline: none !important;
}

/* ══════════════════════════════════════════════════════════
   13. AUSBLENDEN: Icons, Sternchen, Validierungshinweise
       (hide_tip=1 in DB entfernt die meisten schon an der Quelle)
   ══════════════════════════════════════════════════════════ */
/* Validierungshinweise (CSS-Fallback, Hauptfix über hide_tip=1 in DB) */
.ls-questionhelp,
.question-valid-container,
.ls-question-tip { display: none !important; }

/* Pflichtfeld-Sternchen */
i.asterisk, span.asterisk, .asterisk,
i.ri-asterisk, span.ri-asterisk,
i[class*="asterisk"], span[class*="asterisk"],
.ls-mandatory, .mandatory-marker,
.question-mandatory-message { display: none !important; }

/* Fragezeichen-Icons */
i.ri-question-fill, span.ri-question-fill,
i.ri-question-line, span.ri-question-line,
i.ri-questionnaire-fill { display: none !important; }

/* ══════════════════════════════════════════════════════════
   14. WILLKOMMENSSEITE
   ══════════════════════════════════════════════════════════ */
.kivm-facts {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;
    gap: 10px !important;
    margin: 20px 0 !important;
}
.kivm-fact {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    padding: 13px 15px !important;
    background: var(--c-accent-bg) !important;
    border: none !important;
    border-left: 3px solid rgba(26,128,112,0.35) !important;
    border-radius: 0 7px 7px 0 !important;
    min-height: 72px !important;
}
.kivm-fact-title {
    font-size: 10px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.08em !important;
    color: var(--c-accent) !important;
}
.kivm-fact-text { font-size: 14px !important; color: var(--c-text) !important; }

/* Studieninformation-Label */
.ls-welcometext::before {
    content: "Studieninformation";
    display: block !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    letter-spacing: 0.10em !important;
    text-transform: uppercase !important;
    color: var(--c-accent) !important;
    opacity: 0.7 !important;
    margin-bottom: 14px !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid var(--c-divider) !important;
}

/* ══════════════════════════════════════════════════════════
   15. SPEZIAL-FRAGEN
   ══════════════════════════════════════════════════════════ */
/* POLSKALA (QID 17): kein "Keine Antwort" */
#question17 th.noanswer-text,
#question17 td.noanswer-item { display: none !important; }
#question17 .question-container { overflow-x: auto !important; }
#question17 .ls-answers { min-width: 560px !important; table-layout: auto !important; }

/* ══════════════════════════════════════════════════════════
   16. RESPONSIVE: Tablet (≤ 768px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .container-md, .container-fluid.col-xl-8 {
        padding: 26px 22px !important;
        margin-top: 12px !important;
        border-radius: 14px !important;
    }
    .question-container { padding: 13px 14px !important; overflow-x: auto !important; }
    .kivm-facts { grid-template-columns: repeat(2, minmax(0,1fr)) !important; }
}

/* ══════════════════════════════════════════════════════════
   17. RESPONSIVE: Smartphone (≤ 480px)
   ══════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .container-md, .container-fluid.col-xl-8 {
        padding: 16px 12px !important;
        margin-top: 4px !important;
        border-radius: 10px !important;
    }
    body { font-size: 15px !important; }
    h1, .survey-name { font-size: 1.4rem !important; }
    .ls-label-question strong, .ls-label-question b { font-size: 16px !important; }
    .kivm-facts { grid-template-columns: 1fr !important; }
    table.ls-answers { min-width: 440px !important; font-size: 13px !important; }
    thead th { font-size: 12px !important; padding: 4px 2px !important; }
    table.ls-answers td input[type="radio"] { width: 22px !important; height: 22px !important; min-width: 22px !important; }
    .btn-primary, input[type="submit"], button[type="submit"] {
        width: 100% !important; padding: 12px !important; font-size: 16px !important;
    }
}