/*
 * KIVM – Studie zur Selbstwahrnehmung
 * Custom CSS v4 — Teal · Glassmorphism — sauber neu geschrieben
 * Stand: 2026-05-31
 *
 * HTML-Struktur (verifiziert):
 *   div.container-fluid.col-xl-8   ← EINZIGE äußere Karte (Glassmorphism)
 *     div.container-md             ← Bootstrap-Container, MUSS transparent bleiben
 *       div.group-outer-container  ← Gruppen-Wrapper
 *         div.group-container      ← innerer Wrapper
 *           div.kivm-group-desc    ← Gruppen-Beschreibung (custom twig)
 *           div.row.question-container ← Fragen-Container
 */

/* ── 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. 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. ÄUSSERE KARTE (Glassmorphism) ──────────────────────── */
/* NUR dieser Selektor bekommt den Kartenrahmen */
.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: 36px 48px !important;
    margin-top: 28px !important;
    margin-bottom: 36px !important;
}

/* ── 4. INNERE CONTAINER — alle transparent ────────────────── */
/* container-md ist Bootstrap-intern, darf KEINEN eigenen Rahmen haben */
.container-md {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    max-width: 100% !important;
}
.group-outer-container,
.group-container {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ── 5. 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;
}

/* ── 6. FARBEN & LINKS ─────────────────────────────────────── */
* { color: var(--c-text) !important; }
a, a:link, a:visited { color: var(--c-accent) !important; }
a:hover { color: var(--c-accent-dk) !important; }
.text-primary { color: var(--c-text-mid) !important; }
.btn-primary *, .btn-primary { color: #fff !important; }
::placeholder { color: var(--c-text-soft) !important; }
.alert-warning * { color: #5a3e08 !important; }
.alert-danger *  { color: #58151c !important; }
.alert-success * { color: #0a3622 !important; }

/* ── 7. TYPOGRAFIE ─────────────────────────────────────────── */
h1, .survey-name {
    font-size: 1.85rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.02em !important;
}
h2 { font-size: 1.2rem !important; font-weight: 600 !important; }
h3 { font-size: 1.0rem !important; font-weight: 600 !important; }
h4 { font-size: 0.9rem !important; font-weight: 600 !important; }
p  { margin-bottom: 0.8rem !important; }
strong, b { font-weight: 600 !important; }

/* Fragetext */
.ls-label-question {
    font-size: 15px !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;
}
/* Skalen-Legende (letzter Absatz in Fragen) */
.ls-label-question p:last-child {
    font-size: 13px !important;
    font-style: italic !important;
    color: var(--c-text-soft) !important;
}
/* Stressor: Abschlussfrage prominent */
#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;
}

/* ── 8. 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;
}

/* ── 9. BOOTSTRAP .well + GROUP-DESCRIPTION ───────────────── */
/* Höchste Spezifität: body .fruity_twentythree .well schlägt alle Varianten */
body .well,
.fruity_twentythree .well,
body .fruity_twentythree .well,
body .group-description .well,
.col-12.well,
div.col-12.well {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    min-height: 0 !important;
}
.group-description {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 8px 0 14px 0 !important;
    margin-bottom: 8px !important;
    font-size: 15px !important;
    font-style: italic !important;
    color: var(--c-text-mid) !important;
}

/* ── 10. GRUPPEN-BESCHREIBUNG ──────────────────────────────── */
.kivm-group-desc {
    background: var(--c-hint) !important;
    border: none !important;
    border-left: 4px solid var(--c-hint-bar) !important;
    border-radius: 0 8px 8px 0 !important;
    box-shadow: none !important;
    padding: 12px 18px !important;
    margin-bottom: 16px !important;
    font-size: 15px !important;
    font-style: italic !important;
    color: var(--c-text-mid) !important;
}
.kivm-group-desc p,
.kivm-group-desc * {
    background: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-size: 15px !important;
    font-style: italic !important;
    color: var(--c-text-mid) !important;
    margin: 0 !important;
}

/* ── 10. FRAGEN-CONTAINER ──────────────────────────────────── */
.question-container {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 16px 0 !important;
    margin-bottom: 0 !important;
    border-bottom: 1px solid var(--c-divider) !important;
}
/* ── Haken bei beantworteten Fragen (via JS data-answered Attribut) ── */
.ls-label-question[data-answered] {
    padding-left: 20px !important;
    position: relative !important;
}
.ls-label-question[data-answered]::before {
    content: "✓" !important;
    position: absolute !important;
    left: 0 !important;
    top: 1px !important;
    color: var(--c-accent) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
    opacity: 0.7 !important;
    line-height: 1.65 !important;
}
/* Matrix: dezenter Haken pro Zeile */
th.answertext[data-answered]::before,
td.answertext[data-answered]::before {
    content: "✓ " !important;
    color: var(--c-accent) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    opacity: 0.65 !important;
}

.question-container:last-child {
    border-bottom: none !important;
}

/* ── 11. HINWEISFELDER (Consent, Debrief, Welcome-Hint) ────── */
.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;
}
.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;
}

/* Consent-Box Typografie */
.kivm-consent h3, .kivm-debrief-info h3 {
    font-size: 1.3rem !important;
    font-weight: 700 !important;
    margin-top: 0 !important;
    margin-bottom: 0.6rem !important;
    padding-bottom: 0.5rem !important;
    border-bottom: 1px solid var(--c-divider) !important;
    letter-spacing: -0.02em !important;
    color: var(--c-text) !important;
}
.kivm-consent h4, .kivm-debrief-info h4 {
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.08em !important;
    text-transform: uppercase !important;
    color: var(--c-accent) !important;
    margin-top: 1.4rem !important;
    margin-bottom: 0.15rem !important;
}
.kivm-consent p, .kivm-debrief-info p,
.kivm-consent li, .kivm-debrief-info li {
    font-size: 14px !important;
    line-height: 1.65 !important;
    margin-bottom: 0.35rem !important;
}
/* Höchste Spezifität: überschreibt .ls-label-question strong { display:block } */
.ls-label-question .kivm-consent strong,
.ls-label-question .kivm-consent b,
.kivm-consent p strong,
.kivm-consent strong,
.kivm-consent b {
    font-size: 14px !important;
    font-weight: 700 !important;
    display: inline !important;
    margin: 0 !important;
}

/* ── 12. MATRIX-TABELLEN ───────────────────────────────────── */
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;
}
th.answertext, td.answertext, th.answertext *, td.answertext * {
    text-align: left !important;
    padding-left: 8px !important;
    padding-right: 12px !important;
    vertical-align: middle !important;
}
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;
}
table.ls-answers tbody tr.success > *,
table.ls-answers tbody tr.table-success > * {
    background: rgba(26,128,112,0.14) !important;
}

/* ── 13. RADIO-BUTTONS ─────────────────────────────────────── */
table.ls-answers td input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 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;
}
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;
}

/* ── 14. 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;
}
.btn-primary:hover, input[type="submit"]:hover, button[type="submit"]:hover {
    background: var(--c-accent-dk) !important;
    box-shadow: 0 4px 16px rgba(26,128,112,0.35) !important;
    transform: translateY(-1px) !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;
}

/* ── 15. FORMULARFELDER ────────────────────────────────────── */
.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;
    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;
}

/* ── 16. AUSBLENDEN ────────────────────────────────────────── */
.ls-questionhelp, .question-valid-container, .ls-question-tip { display: none !important; }
i.asterisk, span.asterisk, .asterisk, i.ri-asterisk, span.ri-asterisk,
.ls-mandatory, .mandatory-marker, .question-mandatory-message { display: none !important; }
i.ri-question-fill, span.ri-question-fill,
i.ri-question-line, span.ri-question-line { display: none !important; }

/* ── 17. 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; }
.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;
}

/* ── 18. SPEZIALFRAGEN ─────────────────────────────────────── */
#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; }

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

/* ── 20. RESPONSIVE: Smartphone ≤ 480px ───────────────────── */
@media (max-width: 480px) {
    .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; }
    .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;
    }
}