/******************
    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
*/
/* =========================================================
   TheraMind — LimeSurvey 6 Custom Theme
   Parent-Theme: fruity_twentythree (Bootstrap 5)
   Design-Sprache: an theramind.connected-breathwork.com angelehnt
     - warmes Papier (#f6f3ec), Off-Black (#1a1a1a), Sage (#2d5a4f)
     - Instrument Serif (Display) + Geist (Body)
     - dezente, sich langsam bewegende Wellen im Hintergrund
   -----------------------------------------------------------
   WICHTIG / Constraints:
   - !important ist nötig (Bootstrap 5 Spezifität)
   - KEIN Override von width/height/appearance auf
     input[type=radio] / input[type=checkbox]
     (würde die SVG-Checked-Indikatoren brechen)
   - .btn-check:checked + .btn muss explizit gestylt werden
   - Navigation ausschließlich über .ls-move-*-btn bzw.
     .navigator-container .btn-* targeten
     (niemals bare .btn — würde Antwort-Buttons treffen)
   ========================================================= */


/* =========================================================
   1. FONTS (Google Fonts via @import — Theme-Editor-kompatibel)
   ========================================================= */
@import url("https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=Geist:wght@300;400;500;600&display=swap");


/* =========================================================
   2. DESIGN TOKENS
   ========================================================= */
:root {
    --tm-bg:          #f6f3ec;
    --tm-bg-tint:     #efeadf;
    --tm-paper:       #fbf9f3;
    --tm-ink:         #1a1a1a;
    --tm-ink-soft:    #3d3d3d;
    --tm-muted:       #7a756c;
    --tm-line:        #d8d2c4;
    --tm-accent:      #2d5a4f;
    --tm-accent-soft: #4a7566;
    --tm-accent-wash: rgba(45, 90, 79, 0.10);

    --tm-font-display: "Instrument Serif", Georgia, "Times New Roman", serif;
    --tm-font-body:    "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

    --tm-radius-sm:  6px;
    --tm-radius-md:  12px;
    --tm-radius-lg:  20px;
    --tm-radius-pill: 999px;

    --tm-ease: cubic-bezier(0.16, 1, 0.3, 1);
}


/* =========================================================
   3. ANIMATED WAVE BACKGROUND
   SVG wird als data-URL eingebettet und sehr langsam
   horizontal verschoben. pointer-events: none → klick-sicher.
   ========================================================= */
body::before {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 0.35 !important;
    background-repeat: repeat-x !important;
    background-position: 0 85% !important;
    background-size: 1600px auto !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 400' preserveAspectRatio='none'><path d='M0 220 C 200 160 400 280 600 220 S 1000 160 1200 220 S 1600 280 1800 220' fill='none' stroke='%232d5a4f' stroke-width='1.4' stroke-opacity='0.35'/><path d='M0 260 C 200 200 400 320 600 260 S 1000 200 1200 260 S 1600 320 1800 260' fill='none' stroke='%232d5a4f' stroke-width='1' stroke-opacity='0.22'/><path d='M0 300 C 250 250 500 350 800 300 S 1300 250 1600 300' fill='none' stroke='%23164e63' stroke-width='1' stroke-opacity='0.18'/></svg>") !important;
    animation: tm-wave-drift 60s linear infinite !important;
}

/* sanfte, filmische Grain-Schicht darüber */
body::after {
    content: "" !important;
    position: fixed !important;
    inset: 0 !important;
    z-index: 0 !important;
    pointer-events: none !important;
    opacity: 0.25 !important;
    mix-blend-mode: multiply !important;
    background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.08 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>") !important;
}

/* Content muss über dem Wellen-Layer liegen */
body > *,
.outerframe-wrapper,
#outerframeContainer,
.questionnaire-container,
main {
    position: relative !important;
    z-index: 1 !important;
}

@keyframes tm-wave-drift {
    from { background-position:    0px 85%; }
    to   { background-position: 1600px 85%; }
}

@media (prefers-reduced-motion: reduce) {
    body::before { animation: none !important; }
}


/* =========================================================
   4. BASE / TYPOGRAPHY
   ========================================================= */
html, body {
    background: var(--tm-bg) !important;
    color: var(--tm-ink) !important;
    font-family: var(--tm-font-body) !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

h1, h2, h3, h4,
.h1, .h2, .h3, .h4,
.questionnaire-container h1,
.group-title,
.survey-welcome h1 {
    font-family: var(--tm-font-display) !important;
    font-weight: 400 !important;
    letter-spacing: -0.01em !important;
    line-height: 1.1 !important;
    color: var(--tm-ink) !important;
}

em, i {
    font-family: var(--tm-font-display) !important;
    font-style: italic !important;
    color: var(--tm-accent) !important;
}

a {
    color: var(--tm-accent) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px !important;
    text-decoration-thickness: 1px !important;
}
a:hover { color: var(--tm-accent-soft) !important; }


/* =========================================================
   5. LAYOUT FRAMES
   ========================================================= */
.outerframe-wrapper,
#outerframeContainer,
.container,
.container-fluid {
    background: transparent !important;
}

.questionnaire-container,
.survey-list,
.main-content,
.group-container {
    background: transparent !important;
}

/* Karten-Look für den Fragen-Bereich */
.question-container,
.ls-question,
.question-wrapper {
    background: var(--tm-paper) !important;
    border: 1px solid var(--tm-line) !important;
    border-radius: var(--tm-radius-lg) !important;
    padding: 1.75rem 2rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 20px 40px -30px rgba(26, 26, 26, 0.08) !important;
}

/* Gruppen-Header */
.group-title,
.questiongroup-title {
    font-size: clamp(1.75rem, 3.4vw, 2.5rem) !important;
    margin-bottom: 1rem !important;
    color: var(--tm-ink) !important;
}

.group-description,
.questiongroup-description {
    color: var(--tm-ink-soft) !important;
    font-size: 1rem !important;
    max-width: 62ch !important;
}


/* =========================================================
   6. QUESTION TEXT
   ========================================================= */
.question-title-container,
.ls-label-question,
.question-text {
    font-family: var(--tm-font-body) !important;
    font-weight: 500 !important;
    font-size: 1.0625rem !important;
    color: var(--tm-ink) !important;
    line-height: 1.5 !important;
}

.question-help,
.ls-question-help,
.help-block {
    color: var(--tm-muted) !important;
    font-size: 0.9rem !important;
    font-style: italic !important;
}

/* Pflichtfeld-Stern */
.asterisk,
.text-danger {
    color: var(--tm-accent) !important;
}


/* =========================================================
   7. RADIO / CHECKBOX
   WICHTIG: width/height/appearance NICHT überschreiben —
   Bootstrap 5 nutzt SVG-Backgrounds für Checked-Indikator.
   Wir stylen nur Border, Farbe und Label.
   ========================================================= */
.form-check-input {
    border-color: var(--tm-line) !important;
    background-color: var(--tm-paper) !important;
    transition: border-color 0.2s var(--tm-ease), box-shadow 0.2s var(--tm-ease) !important;
}

.form-check-input:hover {
    border-color: var(--tm-accent-soft) !important;
}

.form-check-input:focus {
    border-color: var(--tm-accent) !important;
    box-shadow: 0 0 0 3px var(--tm-accent-wash) !important;
}

.form-check-input:checked {
    background-color: var(--tm-accent) !important;
    border-color: var(--tm-accent) !important;
}

.form-check-label,
.answertext {
    color: var(--tm-ink-soft) !important;
    font-size: 1rem !important;
    cursor: pointer !important;
}

/* Array/Matrix Zellen */
.answer-item,
.ls-answers th,
.ls-answers td {
    color: var(--tm-ink-soft) !important;
}


/* =========================================================
   8. Y/N-TYPE (.btn-check + .btn Label)
   .btn-check ist ein hidden input, das Label ist .btn
   → Active-State explizit targeten
   ========================================================= */
.btn-check + .btn,
label.btn {
    background: var(--tm-paper) !important;
    color: var(--tm-ink-soft) !important;
    border: 1px solid var(--tm-line) !important;
    border-radius: var(--tm-radius-pill) !important;
    padding: 0.6rem 1.5rem !important;
    font-family: var(--tm-font-body) !important;
    font-weight: 500 !important;
    transition: background 0.2s var(--tm-ease), color 0.2s var(--tm-ease), border-color 0.2s var(--tm-ease) !important;
}

.btn-check + .btn:hover,
label.btn:hover {
    border-color: var(--tm-accent-soft) !important;
    color: var(--tm-accent) !important;
}

.btn-check:checked + .btn,
.btn-check:active + .btn {
    background: var(--tm-accent) !important;
    color: var(--tm-paper) !important;
    border-color: var(--tm-accent) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
}

.btn-check:focus-visible + .btn {
    box-shadow: 0 0 0 3px var(--tm-accent-wash) !important;
}


/* =========================================================
   9. TEXT INPUTS / TEXTAREAS / SELECTS
   ========================================================= */
.form-control,
input[type="text"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
textarea,
select,
.form-select {
    background: var(--tm-paper) !important;
    border: 1px solid var(--tm-line) !important;
    border-radius: var(--tm-radius-md) !important;
    color: var(--tm-ink) !important;
    font-family: var(--tm-font-body) !important;
    font-size: 1rem !important;
    padding: 0.7rem 1rem !important;
    transition: border-color 0.2s var(--tm-ease), box-shadow 0.2s var(--tm-ease) !important;
}

.form-control:focus,
textarea:focus,
select:focus,
.form-select:focus {
    border-color: var(--tm-accent) !important;
    box-shadow: 0 0 0 3px var(--tm-accent-wash) !important;
    outline: none !important;
}

textarea { min-height: 7.5rem !important; line-height: 1.55 !important; }

::placeholder { color: var(--tm-muted) !important; opacity: 0.8 !important; }


/* =========================================================
  10. 5-POINT / 7-POINT ARRAY (Likert)
   ========================================================= */
.array-flexible-row,
table.ls-answers {
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

table.ls-answers th,
table.ls-answers td {
    background: transparent !important;
    border-bottom: 1px solid var(--tm-line) !important;
    padding: 0.75rem 0.5rem !important;
}

table.ls-answers thead th {
    font-family: var(--tm-font-body) !important;
    font-weight: 500 !important;
    font-size: 0.85rem !important;
    color: var(--tm-muted) !important;
    letter-spacing: 0.02em !important;
}

table.ls-answers tbody tr:hover {
    background: var(--tm-accent-wash) !important;
}


/* =========================================================
  11. PROGRESS BAR
   ========================================================= */
.progress {
    background: var(--tm-bg-tint) !important;
    border-radius: var(--tm-radius-pill) !important;
    height: 6px !important;
    overflow: hidden !important;
}

.progress-bar {
    background: var(--tm-accent) !important;
    box-shadow: none !important;
}


/* =========================================================
  12. NAVIGATION BUTTONS
   NUR .ls-move-*-btn + .navigator-container .btn-* —
   niemals bare .btn, sonst werden Antwort-Labels mitgestylt.
   ========================================================= */
.ls-move-submit-btn,
.ls-move-next-btn,
.navigator-container .btn-primary,
.navigator-container .btn-success {
    background: var(--tm-ink) !important;
    color: var(--tm-bg) !important;
    border: 1px solid var(--tm-ink) !important;
    border-radius: var(--tm-radius-pill) !important;
    padding: 0.85rem 1.75rem !important;
    font-family: var(--tm-font-body) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    letter-spacing: 0 !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.08) !important;
    transition: background 0.3s var(--tm-ease), transform 0.3s var(--tm-ease) !important;
}

.ls-move-submit-btn:hover,
.ls-move-next-btn:hover,
.navigator-container .btn-primary:hover,
.navigator-container .btn-success:hover {
    background: var(--tm-accent) !important;
    border-color: var(--tm-accent) !important;
    transform: translateY(-1px) !important;
}

.ls-move-previous-btn,
.navigator-container .btn-secondary,
.navigator-container .btn-outline-secondary {
    background: transparent !important;
    color: var(--tm-ink-soft) !important;
    border: 1px solid var(--tm-line) !important;
    border-radius: var(--tm-radius-pill) !important;
    padding: 0.85rem 1.5rem !important;
    font-family: var(--tm-font-body) !important;
    font-weight: 500 !important;
}

.ls-move-previous-btn:hover,
.navigator-container .btn-secondary:hover {
    border-color: var(--tm-accent) !important;
    color: var(--tm-accent) !important;
    background: var(--tm-accent-wash) !important;
}


/* =========================================================
  13. ALERTS / VALIDATION
   ========================================================= */
.alert,
.ls-em-tip,
.em_default,
.mandatory-text {
    border-radius: var(--tm-radius-md) !important;
    font-family: var(--tm-font-body) !important;
    font-size: 0.9rem !important;
    padding: 0.75rem 1rem !important;
}

.alert-danger,
.em_default.error,
.mandatory-text {
    background: var(--tm-accent-wash) !important;
    color: var(--tm-accent) !important;
    border: 1px solid var(--tm-accent) !important;
}

.alert-info,
.alert-success {
    background: var(--tm-bg-tint) !important;
    color: var(--tm-ink-soft) !important;
    border: 1px solid var(--tm-line) !important;
}


/* =========================================================
  14. TOP / PRIVACY / NAVIGATOR BAR
   ========================================================= */
.navbar,
.privacy,
.top-container,
.survey-header {
    background: transparent !important;
    border-bottom: 1px solid var(--tm-line) !important;
}

.privacy h2 { margin-top: 1rem !important; }


/* =========================================================
  15. WELCOME / END PAGE
   ========================================================= */
.welcome-container,
.completed-wrapper,
.survey-complete {
    text-align: left !important;
    max-width: 56ch !important;
    margin: 3rem auto !important;
    padding: 2.5rem !important;
    background: var(--tm-paper) !important;
    border: 1px solid var(--tm-line) !important;
    border-radius: var(--tm-radius-lg) !important;
    box-shadow: 0 30px 60px -30px rgba(26, 26, 26, 0.1) !important;
}


/* =========================================================
  16. MOBILE
   ========================================================= */
@media (max-width: 640px) {
    .question-container,
    .ls-question {
        padding: 1.25rem 1.25rem !important;
        border-radius: var(--tm-radius-md) !important;
    }

    .ls-move-submit-btn,
    .ls-move-next-btn,
    .ls-move-previous-btn,
    .navigator-container .btn-primary,
    .navigator-container .btn-secondary {
        padding: 0.75rem 1.25rem !important;
        font-size: 0.95rem !important;
    }
}