/* Algemene Stijlen & Body */
body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    line-height: 1.6; 
    margin: 0; 
    padding: 0; 
    background-color: #f4f7f6; 
    color: #333; 
    -webkit-text-size-adjust: 100%; 
    text-size-adjust: 100%;
}
*, *::before, *::after { 
    box-sizing: border-box;
}
.container { 
    width: 100%; 
    max-width: 1200px; 
    margin-left: auto; 
    margin-right: auto; 
    padding-left: 15px;  
    padding-right: 15px; 
}
main.container { 
    padding-top: 20px; 
    padding-bottom: 40px; 
    min-height: calc(100vh - 120px); 
} 
.content-page { 
    background-color: #fff;
    padding: 30px 20px;
    margin-top: 20px;
    margin-bottom: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}
.content-page h1 { margin-top: 0; margin-bottom: 20px; font-size: 1.8em; }
.content-page h2 { margin-top: 30px; margin-bottom: 15px; font-size: 1.5em; border-bottom: 1px solid #eee; padding-bottom: 5px;}
.content-page h3 { margin-top: 25px; margin-bottom: 10px; font-size: 1.2em; }
.content-page p, .content-page ul, .content-page ol { margin-bottom: 15px; line-height: 1.7; }
.content-page ul, .content-page ol { padding-left: 25px; }
.content-page li { margin-bottom: 8px; }
.content-page a { color: #007bff; text-decoration: underline; }
.content-page a:hover { color: #0056b3; }

/* Header & Navigatie */
header { background: #007bff; color: #fff; padding: 10px 0; min-height: auto; border-bottom: none; }
header .container { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; padding-left: 10px; padding-right: 10px; }
header .logo { margin-bottom: 5px; } 
header .logo a { color: #fff; text-decoration: none; text-transform: uppercase; font-size: 1.3em; font-weight: bold; }
header nav ul { margin: 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; justify-content: center; } 
header nav ul li { display: inline-block; margin-left: 8px; margin-right: 8px; margin-bottom: 5px; }
header nav ul li:first-child { margin-left: 0; }
header nav ul li a { color: #fff; text-decoration: none; font-size: 1em; padding: 5px 0; }
header nav ul li a:hover, header nav ul li a.active { color: #cce5ff; }

/* Footer */
footer { background: #333; color: #fff; text-align: center; padding: 15px 10px; margin-top: 30px; font-size: 0.9em; min-height: auto;}
footer p { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; }
.footer-separator { display: inline-block; margin: 0 5px; }
.footer-link { color: #a0aec0; text-decoration: underline; transition: color 0.2s ease; }
.footer-link:hover { color: #ffffff; }
@media (max-width: 480px) { footer p { flex-direction: column; gap: 5px; } .footer-separator { display: none; }}

/* Formulieren Algemeen */
.form-group { margin-bottom: 18px; }
.form-group label { display: block; margin-bottom: 6px; font-weight: bold; color: #495057; font-size: 0.95em; }
.form-group input[type="email"],.form-group input[type="password"],.form-group input[type="text"],
.form-group input[type="number"],.form-group input[type="url"],.form-group select,.form-group textarea {
    width: 100%; padding: 10px; border: 1px solid #ced4da; border-radius: 0.25rem; 
    font-size: 1em; transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus { border-color:#80bdff; outline:0; box-shadow:0 0 0 .2rem rgba(0,123,255,.25); }
.question-block textarea.form-control { width:100%; min-height:100px; padding:10px; border:1px solid #ced4da; border-radius:.25rem; font-family:inherit; font-size:1em; line-height:1.6; }
.form-group textarea { min-height: 100px; resize: vertical; } 

/* Knoppen Algemeen */
.button { display:inline-block; width:auto; padding:10px 18px; color:white !important; border:1px solid transparent; border-radius:.25rem; cursor:pointer; text-decoration:none; font-size:1em; font-weight:500; transition:background-color .2s ease-in-out,transform .1s ease,border-color .15s ease-in-out; line-height:1.5; text-align:center; vertical-align:middle; user-select:none;}
.button:hover { transform: translateY(-1px); filter: brightness(90%); } 
.button:active { transform: translateY(0px); filter: brightness(80%);}
button.button-full-width, input[type="submit"].button-full-width { width: 100%; }
.button-primary { background-color:#007bff; border-color:#007bff; color: white !important;} .button-primary:hover { background-color:#0069d9; border-color:#0062cc; }
.button-success { background-color:#28a745; border-color:#28a745; color: white !important;} .button-success:hover { background-color:#218838; border-color:#1e7e34; }
.button-secondary { background-color:#6c757d; border-color:#6c757d; color: white !important;} .button-secondary:hover { background-color:#5a6268; border-color:#545b62; }
.button-danger { background-color:#dc3545; border-color:#dc3545; color: white !important;} .button-danger:hover { background-color:#c82333; border-color:#bd2130; }
.button-info { background-color:#17a2b8; border-color:#17a2b8; color: white !important;} .button-info:hover { background-color:#138496; border-color:#117a8b; }
.button-custom-orange,.button-warning { color:#fff !important; background-color:#e79405; border-color:#e79405; }
.button-custom-orange:hover,.button-warning:hover { color:#fff !important; background-color:#c67c04; border-color:#b06d03; }
.button-default { background-color:#f8f9fa;color:#343a40 !important;border:1px solid #ced4da} .button-default:hover { background-color:#e2e6ea}
.button.disabled,.button:disabled { background-color:#6c757d !important; border-color:#6c757d !important; opacity:.65; cursor:not-allowed; pointer-events:none}

/* Meldingen */
.message { padding:12px 15px; margin-bottom:18px;border:1px solid transparent;border-radius:4px;font-size:.9em}
.error-messages,.error-message { color:#721c24;background-color:#f8d7da;border-color:#f5c6cb}
.error-messages ul { margin-top:8px;margin-bottom:0;padding-left:18px}
.success-message { color:#155724;background-color:#d4edda;border-color:#c3e6cb}
.info-message { color:#0c5460;background-color:#d1ecf1;border-color:#bee5eb}
.warning-message { color:#856404;background-color:#fff3cd;border-color:#ffeeba}
.error-text { color:#721c24;font-size:.875em;display:block;margin-top:4px}
.form-group small { font-size:.875em;color:#6c757d;display:block;margin-top:4px}
.form-check { padding-left:1.2em;margin-bottom:.5rem} 
.form-check-input { float:left;margin-left:-1.2em; margin-top: 0.25em; } 
.form-check-label { margin-bottom:0; font-size: 0.95em; }

/* Loginpagina Styling */
body.login-page-body { background-color: #e9ecef; }
body.login-page-body main.container { max-width: none; width: 100%; padding: 0; }
.dynamic-login-page-wrapper { width: 100%; padding: 20px 15px; display: flex; flex-direction: column; gap: 20px; }
.login-row-top { display: flex; flex-direction: column; gap: 20px; width: 100%; margin: 0 auto; max-width: 1200px; }
.login-column-left, .login-column-right { width: 100%; display: flex; flex-direction: column; }
.login-content-box { background-color: #ffffff; box-shadow: 0 4px 15px rgba(0,0,0,0.08); border-radius: 8px; padding: 25px; height: 100%; }
.login-box-wrapper { display: block; height: 100%; background-color: #fff; border-radius: 8px; box-shadow: 0 4px 15px rgba(0,0,0,0.08); overflow: hidden; }
.login-image-container { display: none; background-size: cover; background-position: center; }
.login-image-container img { display: none; }
.login-form-container { padding: 25px; flex-grow: 1; display: flex; flex-direction: column; justify-content: center; }
.login-form-container h2 { text-align: center; margin-top:0; margin-bottom:15px; color:#343a40; font-weight:500; font-size:1.6em; }
.login-form-container .form-group { width: 100%; }
.login-form-container .form-group input, .login-form-container .form-group .button-full-width { width: 100%; max-width: 320px; margin-left: auto; margin-right: auto; }
.login-form-container .form-group label { max-width: 320px; margin-left: auto; margin-right: auto; }
.login-links-footer { display: flex; flex-direction: column; align-items: center; gap: 8px; font-size: 0.85em; margin-top: 15px; padding-top: 15px; border-top: 1px solid #eee; max-width: 320px; margin-left: auto; margin-right: auto; }
.login-links-footer p { margin: 0; }
.login-row-bottom { margin-top: 0; }
.login-row-bottom .login-content-box { width: 100%; max-width: 1200px; margin: 0 auto; }
@media (min-width: 768px) { .login-row-top { flex-direction: row; align-items: stretch; } .login-links-footer { flex-direction: row; justify-content: space-between; } }
@media (min-width: 1024px) { .login-box-wrapper { display: flex; flex-direction: row; } .login-image-container { display: block; height: 100%; flex-basis: var(--flex-basis-fallback); flex-shrink: 0; } .login-form-container { flex-basis: var(--flex-basis-fallback); flex-grow: 1; } }

/* --- Homepage Styling --- */
.homepage-intro { text-align:center; margin-bottom:25px; }
.homepage-intro h1 { font-size:1.8em; color:#343a40; font-weight:500; margin-bottom:8px; }
.homepage-intro p { font-size:1.05em; color:#495057; }
.homepage-intro-content-block {
    background-color: #fff;
    padding: 0; 
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    margin-bottom: 25px;
    overflow: hidden; 
}
.intro-block-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0; 
    align-items: stretch; 
}
@media (min-width: 992px) {
    .intro-block-grid {
        grid-template-columns: 1fr 1fr;
    }
}
.intro-block-left-col, .intro-block-right-col {
    display: flex;
    flex-direction: column;
    min-height: 200px; 
}
.intro-block-right-col {
    padding: 20px; 
}
.intro-text-content {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
}
.intro-text-content > div {
    flex-grow: 1; 
    display: flex;
    flex-direction: column;
    justify-content: center; 
}
.homepage-layout-new { display: grid; grid-template-columns: 1fr; gap: 25px; }
@media (min-width: 992px) { .homepage-layout-new { grid-template-columns: 1fr 300px; grid-template-rows: auto 1fr; } }
@media (min-width: 1200px) { .homepage-layout-new { grid-template-columns: 1fr 340px; } }
.main-content-grid { 
    min-width: 0; 
    background-color: #fff; 
    padding: 20px; 
    border-radius: 8px; 
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.grid-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 20px; padding-bottom: 15px; border-bottom: 1px solid #e0e0e0; }
.grid-title { margin: 0; font-size: 1.6em; font-weight: 600; color: #2c3e50; text-align: right; }
.back-to-dashboard-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 500;
    color: #343a40;
    background-color: #e9ecef;
    text-decoration: none;
    font-size: 0.9em;
    padding: 8px 16px;
    border-radius: 6px;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}
.back-to-dashboard-link:hover {
    background-color: #dee2e6;
    text-decoration: none;
}
.status-legend {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 25px;
    flex-wrap: wrap;
}
.legend-item {
    display: flex;
    align-items: center;
    gap: 8px;
}
.legend-text {
    font-size: 0.85em;
    color: #6c757d;
}
.legend-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0; 
}
.status-legend .legend-icon {
    position: static;
    box-shadow: none;
}
.legend-icon.card-completed-icon .fas.fa-check {
    font-size: 12px;
}
.legend-icon.card-inprogress-icon {
    -webkit-mask: radial-gradient(transparent 7px, black 7px);
    mask: radial-gradient(transparent 7px, black 7px);
}
.legend-icon.card-todo-icon {
    font-size: 8px;
    line-height: 1;
}
@media (max-width: 767px) {
    .grid-header {
        flex-wrap: wrap;
        gap: 15px;
    }
    .status-legend {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        order: 3;
        width: 100%;
    }
    .grid-title {
        font-size: 1.4em; 
        order: 2; 
        text-align: right;
    }
    .back-to-dashboard-link {
        order: 1; 
    }
}

/* Grid voor Hoofdstukken & Lessen */
.chapter-grid, .lesson-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 25px;
}
@media (min-width: 768px) {
    .chapter-grid, .lesson-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (min-width: 1200px) {
    .chapter-grid, .lesson-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}
.grid-empty-state { grid-column: 1 / -1; padding: 40px; text-align: center; background-color: #fff; border-radius: 8px; color: #6c757d; }

.chapter-card, .lesson-card-new { 
    position: relative; 
    min-height: 300px; 
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
    min-width: 0; 
}
.chapter-card:hover, .lesson-card-new:not(.disabled):hover { 
    transform: translateY(-5px); 
    box-shadow: 0 12px 28px rgba(0,0,0,0.25);
}
.card-inner-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 12px; 
    overflow: hidden; 
    background-size: 110%;
    background-position: center center;
    background-color: #6c757d;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    transition: background-position 0.4s ease;
}
.chapter-card:hover .card-inner-wrapper, 
.lesson-card-new:not(.disabled):hover .card-inner-wrapper { 
    background-position: 0% 0%;
}
.card-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
.card-overlay.theme-dark { background-color: rgba(0, 0, 0, 0.5); }
.card-overlay.theme-light { background-color: rgba(255, 255, 255, 0.7); }
.card-overlay.theme-blue { background-color: rgba(0, 86, 179, 0.6); }
.card-overlay.theme-green { background-color: rgba(25, 135, 84, 0.6); }
.card-overlay.theme-red { background-color: rgba(220, 53, 69, 0.6); }
.card-overlay.theme-orange { background-color: rgba(253, 126, 20, 0.65); }
.card-overlay.theme-purple { background-color: rgba(111, 66, 193, 0.6); }
.card-overlay.theme-teal { background-color: rgba(32, 201, 151, 0.6); }
.card-overlay.theme-slate { background-color: rgba(52, 58, 64, 0.65); }
.card-overlay.theme-sand { background-color: rgba(244, 237, 225, 0.75); }
.card-overlay.theme-mint { background-color: rgba(204, 255, 229, 0.7); }
.card-overlay.theme-lavender { background-color: rgba(230, 230, 250, 0.75); }
.card-overlay.theme-sky { background-color: rgba(204, 229, 255, 0.7); }
.card-overlay.theme-rose { background-color: rgba(255, 228, 225, 0.7); }
.card-overlay.theme-twilight { background-image: linear-gradient(to top right, rgba(108, 29, 103, 0.6), rgba(224, 113, 83, 0.6)); }
.card-overlay.theme-ocean { background-image: linear-gradient(to top right, rgba(0, 4, 40, 0.65), rgba(0, 78, 146, 0.6)); }
.card-overlay.theme-sunrise { background-image: linear-gradient(to top right, rgba(255, 228, 181, 0.7), rgba(255, 182, 193, 0.7)); }
.card-overlay.theme-forest { background-image: linear-gradient(to top right, rgba(0, 70, 0, 0.6), rgba(60, 111, 60, 0.6)); }
.card-overlay.theme-ruby { background-image: linear-gradient(to top right, rgba(150, 20, 20, 0.6), rgba(210, 40, 40, 0.6)); }
.card-overlay.theme-golden { background-image: linear-gradient(to top right, rgba(218, 165, 32, 0.65), rgba(255, 223, 0, 0.65)); }
.card-overlay.theme-charcoal { background-color: rgba(33, 37, 41, 0.7); }
.card-overlay.theme-vibrant-pink { background-color: rgba(217, 18, 103, 0.6); }
.card-overlay.theme-lime { background-color: rgba(163, 255, 1, 0.65); }
.card-overlay.theme-frosted-glass { background-color: rgba(255, 255, 255, 0.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.card-content { 
    position: relative; 
    z-index: 2; 
    padding: 20px; 
    display: flex; 
    flex-direction: column; 
    flex-grow: 1; 
}
.card-overlay.theme-dark + .card-content { color: #fff; text-shadow: 1px 1px 3px rgba(0,0,0,0.4); }
.card-overlay.theme-light + .card-content { color: #212529; text-shadow: none; }
.card-overlay.theme-blue + .card-content { color: #fff; text-shadow: 1px 1px 3px rgba(0,0,0,0.4); }
.card-overlay.theme-green + .card-content,.card-overlay.theme-red + .card-content,.card-overlay.theme-orange + .card-content,.card-overlay.theme-purple + .card-content,.card-overlay.theme-teal + .card-content,.card-overlay.theme-slate + .card-content { color: #fff; text-shadow: 1px 1px 3px rgba(0,0,0,0.4); }
.card-overlay.theme-sand + .card-content,.card-overlay.theme-mint + .card-content,.card-overlay.theme-lavender + .card-content,.card-overlay.theme-sky + .card-content,.card-overlay.theme-rose + .card-content { color: #212529; text-shadow: none; }
.card-overlay.theme-twilight + .card-content,.card-overlay.theme-ocean + .card-content,.card-overlay.theme-forest + .card-content,.card-overlay.theme-ruby + .card-content { color: #fff; text-shadow: 1px 1px 3px rgba(0,0,0,0.4); }
.card-overlay.theme-sunrise + .card-content,.card-overlay.theme-golden + .card-content { color: #2c3e50; }
.card-overlay.theme-charcoal + .card-content,.card-overlay.theme-vibrant-pink + .card-content { color: #fff; text-shadow: 1px 1px 3px rgba(0,0,0,0.4); }
.card-overlay.theme-lime + .card-content,.card-overlay.theme-frosted-glass + .card-content { color: #212529; text-shadow: none; }
.card-title { font-size: 1.5em; font-weight: 700; margin: 0 0 10px 0; }
.card-lesson-count, .card-description { font-size: 0.95em; line-height: 1.5; }
.card-description { flex-grow: 1; }
.card-footer { margin-top: 20px; }
.card-footer .button { padding: 6px 14px; font-size: 0.9em; }
.lesson-card-new.disabled { cursor: not-allowed; opacity: 0.8; }
.lesson-card-new.disabled .card-inner-wrapper { background-color: #6c757d; }
.card-status-badge { position: absolute; top: 10px; right: 10px; background-color: rgba(0, 0, 0, 0.5); color: #fff; padding: 4px 10px; border-radius: 15px; font-size: 0.75em; font-weight: 600; z-index: 3; }
.card-completed-icon, .card-inprogress-icon, .card-todo-icon { position: absolute; top: -15px; right: -15px; width: 35px; height: 35px; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 8px rgba(0,0,0,0.2); z-index: 4; }
.card-completed-icon { background-color: #28a745; color: #fff; }
.card-completed-icon .fas.fa-check { font-size: 24px; font-weight: 900; }
.card-inprogress-icon { background: conic-gradient(#f1441c calc(var(--progress-percent) * 1%), #dedede 0); -webkit-mask: radial-gradient(transparent 13px, black 13px); mask: radial-gradient(transparent 8px, black 8px); }
.card-todo-icon { background-color: #6c757d; color: #fff; font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; text-align: center; font-weight: 400; font-size: 11px; line-height: 1.1; letter-spacing: 1px; }
.homepage-sidebar-right { background-color: #fff; padding: 20px; border-radius: 8px; box-shadow: 0 2px 8px rgba(0,0,0,0.07); height: fit-content; }
.homepage-sidebar-right h3 { margin-top: 0; margin-bottom: 15px; font-size: 1.2em; color: #343a40; border-bottom: 1px solid #eee; padding-bottom: 10px; }
.tool-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.button-tool { display: flex; width: 100%; justify-content: space-between; align-items: center; background-color: #ffc107 !important; border-color: #ffc107 !important; color: #212529 !important; font-weight: 500; }
.button-tool:hover { background-color: #e0a800 !important; border-color: #e0a800 !important; }
.account-form fieldset { border:1px solid #e0e0e0;padding:25px 30px !important;margin-bottom:30px !important;border-radius:6px;background-color:#fff;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.account-form legend { font-size:1.2em;font-weight:500;padding:0 8px;margin-left:-8px;margin-bottom:20px !important;color:#007bff;width:auto;border-bottom:none}
.mfa-qr-code img { max-width:180px;height:auto;border:1px solid #ccc;padding:4px;margin:0 auto 15px;display:block}
.mfa-recovery-codes ul { column-count:1; padding-left: 20px !important; list-style-position: inside;} 
.mfa-recovery-codes li { margin-bottom: 6px !important;}
.lesson-header { margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid #eee}
.lesson-header h1 { font-size:1.6em;color:#343a40;margin-bottom:12px;font-weight:500}
.lesson-page-navigation { margin-top:0;margin-bottom:20px;text-align:center; }
.page-nav-button { display:inline-block;min-width:30px;height:30px;line-height:30px;text-align:center;background-color:#6c757d;color:#fff !important;text-decoration:none;border-radius:3px;margin:2px;font-size:.85em;font-weight:700;padding:0 4px}
.page-nav-button:hover { background-color:#545b62} .page-nav-button.active { background-color:#007bff}
.admin-view-notice { background-color:#fff3cd;border-color:#ffeeba;color:#856404;font-size:0.85em;padding:10px;} .admin-view-notice i { margin-right:6px}
.lesson-content .content-block { margin-bottom:25px;padding:15px;background-color:#fff;border-radius:6px;box-shadow:0 1px 4px rgba(0,0,0,.07)}
.lesson-content .text-block { line-height:1.65; font-size:0.95em;} 
.lesson-content .text-block h1,.lesson-content .text-block h2,.lesson-content .text-block h3,.lesson-content .text-block h4 { margin-top:0;color:#007bff; line-height: 1.3; margin-bottom: 0.5em;}
.lesson-content .video-block.responsive-video { position:relative;padding-bottom:56.25%;height:0;overflow:hidden;border-radius:6px}
.lesson-content .video-block.responsive-video iframe, 
.lesson-content .video-block.responsive-video video { position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.lesson-content .audio-block audio { width:100%;border-radius:4px}
.question-block { margin-bottom:25px;padding:20px;background-color:#f8f9fa;border:1px solid #dee2e6;border-radius:6px}
.question-text-wrapper { margin-bottom:12px;font-size:1.05em; color:#495057;line-height:1.65;}
.question-text-wrapper p { margin-top: 0; margin-bottom: 0.8em; }
.question-text-wrapper ol, .question-text-wrapper ul { margin-top: 0; margin-bottom: 0.8em; padding-left: 25px; list-style-type: revert; }
.question-text-wrapper ol { list-style-type: decimal; }
.question-text-wrapper ul { list-style-type: disc; }
.question-text-wrapper li { margin-bottom: 0.3em; display: list-item; }
.question-text-wrapper strong, .question-text-wrapper b { font-weight: bold !important; }
.question-text-wrapper em, .question-text-wrapper i { font-style: italic !important; }
.question-text-wrapper u { text-decoration: underline !important; }
.question-block fieldset { border:none;padding:0;margin:0}
.question-block .form-check-input { margin-top:.25em}
.question-block .form-check-label { font-weight:400;margin-bottom:0;font-size:.95em;color:#212529}
.lesson-navigation-buttons { margin-top:30px;padding-top:20px;border-top:1px solid #dee2e6;display:flex;flex-direction:column;gap:10px} 
.lesson-navigation-buttons .nav-group-left,.lesson-navigation-buttons .nav-group-center,.lesson-navigation-buttons .nav-group-right { display:flex;flex-direction:column;width:100%;gap:8px}
.lesson-navigation-buttons .button { width:100%; margin: 0 !important; } 
.question-short-text .short-text-input { width:100%;max-width:100%;padding:10px} 
.question-multi-step-display-all .multi-step-main-intro-text { margin-bottom:18px;font-size:1.05em;line-height:1.65}
.sub-question-item { padding:12px 0;border-bottom:1px solid #eee} .sub-question-item:last-child { border-bottom:none}
.choice-buttons-group,.checklist-buttons-group,.multi-step-options-group { display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.question-checklist.display-as-buttons .choice-buttons-group,.question-checklist.display-as-buttons .checklist-buttons-group { flex-direction:column;align-items:stretch;gap:6px}
.question-checklist.display-as-buttons .choice-button-item,.question-checklist.display-as-buttons .checklist-button-item { width:100%}
.question-checklist.display-as-buttons .choice-button-label,.question-checklist.display-as-buttons .checklist-button-label { width:100%;text-align:left;padding:10px 12px}
.choice-button-item,.checklist-button-item,.multi-step-option-item {}
.choice-button-label,.checklist-button-label,.multi-step-option-button-label { display:inline-block;padding:8px 12px;color:#fff !important;border:1px solid;border-radius:4px;cursor:pointer;transition:background-color .2s ease,border-color .2s ease;font-size:.9em;min-width:70px;text-align:center;margin:2px 0;line-height:1.4}
.multi-step-option-button-label,.choice-button-label:not(.checklist-button-label) { background-color:#007bff;border-color:#007bff}
.multi-step-option-button-label:not(.disabled-label):hover,.choice-button-label:not(.checklist-button-label):not(.disabled-label):hover { background-color:#0056b3;border-color:#0056b3}
.checklist-button-label { background-color:#6c757d;border-color:#6c757d}
.checklist-button-label:not(.disabled-label):hover { background-color:#5a6268;border-color:#545b62}
.multi-step-radio:checked+.multi-step-option-button-label,.checklist-button-checkbox:checked+.checklist-button-label,.choice-button-radio:checked+.choice-button-label,.choice-button-checkbox:checked+.choice-button-label,
.multi-step-option-button-label.selected,.checklist-button-label.selected,.choice-button-label.selected { background-color:#28a745 !important;border-color:#28a745 !important}
.multi-step-option-button-label.disabled-label,.checklist-button-label.disabled-label,.choice-button-label.disabled-label { cursor:default;background-color:#e9ecef;border-color:#ced4da;color:#6c757d !important;opacity:.7}
.multi-step-option-button-label.disabled-label:hover,.checklist-button-label.disabled-label:hover,.choice-button-label.disabled-label:hover { background-color:#e9ecef;border-color:#ced4da}
.multi-step-radio,.checklist-button-checkbox,.choice-button-radio,.choice-button-checkbox { display:none}
.answer-placeholder, .user-data-placeholder { background-color: #f0f0f0; padding: 1px 4px; border-radius: 3px; border: 1px dashed #ccc; font-family: monospace; font-size: 0.95em; display: inline; }
.answer-placeholder strong, .user-data-placeholder strong { font-weight: bold; }
.text-block .answer-value-display { /* Erft styling */ }
.text-block .placeholder-missing.answer-value-display { font-style: italic; color: #777 !important; background-color: transparent !important; padding: 0 !important; border: none !important; }
.text-block ul.answer-value-display.answer-list-display { list-style-type: disc; padding-left: 20px; margin-top: 5px; margin-bottom: 5px; }
.text-block ul.answer-value-display.answer-list-display li { display: list-item; padding: 0; margin: 0 0 3px 0; line-height: 1.5; }
.text-block ul.answer-value-display.answer-list-display li strong { font-weight: bold; }
.cookie-consent-popup { position:fixed;bottom:0;left:0;width:100%;background-color:#2d3748;color:#edf2f7;padding:15px;text-align:center;z-index:1050;box-shadow:0 -2px 8px rgba(0,0,0,.15);font-size:.85em;line-height:1.4}
.cookie-consent-popup p { margin:0 0 12px;max-width:900px;margin-left:auto;margin-right:auto}
.cookie-consent-popup a.cookie-consent-link { color:#63b3ed;text-decoration:underline}
.cookie-consent-popup a.cookie-consent-link:hover { color:#90cdf4}
.cookie-consent-popup .button { padding:7px 18px;font-size:.9em}
.mandatory-indicator { color: red; font-weight: bold; margin-left: 2px; }
.ai-coach-controls { text-align: left; margin-top: 10px; }
.button-ai-coach { background-color: #cdcdcb; border-color: #939392; color: #fff !important; font-size: 0.9em; padding: 8px 15px; display: inline-flex; align-items: center; gap: 8px; }
.button-ai-coach:hover { background-color: #218838; border-color: #939392; }
.button-ai-coach:disabled { background-color: #6c757d !important; border-color: #6c7d7d !important; opacity: 0.65; }
.ai-coach-feedback { margin-top: 15px; padding: 15px; border-radius: 5px; font-size: 0.9em; line-height: 1.6; border-left: 4px solid; animation: fadeIn 0.5s ease; }
.ai-coach-feedback.success { background-color: #d1ecf1;  border-color: #007bff; color: #0c5460; }
.ai-coach-feedback.error { background-color: #f8d7da; border-color: #dc3545; color: #721c24; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }
.loading-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(255, 255, 255, 0.8); display: flex; justify-content: center; align-items: center; z-index: 9999; transition: opacity 0.3s ease; }
.loading-box { background-color: #fff; padding: 2rem 3rem; border-radius: 1rem; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.2); }
.loading-box .fa-spinner { font-size: 3em; color: #007bff; margin-bottom: 1rem; }
.loading-box p { font-size: 1.1em; font-weight: 500; color: #495057; line-height: 1.5; margin: 0; }
@media (min-width: 768px) {
    .container { padding-left: 20px; padding-right: 20px; }
    main.container { min-height: calc(100vh - 150px); }
    header { padding: 15px 0; }
    header .logo a { font-size: 1.5em; }
    header nav ul li { margin-left: 15px; margin-right: 15px; margin-bottom: 0; }
    header nav ul li a { font-size: 1.05em; padding: 8px 5px;}
    footer { padding: 20px 0; font-size: 0.9em; }
    .register-container,.account-container,.mfa-verify-container { margin: 60px auto; padding: 30px 35px !important; }
    .register-container h2,.account-container h2,.mfa-verify-container h2 { font-size: 1.8em; margin-bottom: 20px !important; } 
    .form-group label { font-size: 1em; }
    .form-group input[type="email"], .form-group input[type="text"], .form-group input[type="password"], .form-group input[type="number"], .form-group input[type="url"], .form-group select, .form-group textarea { padding: 12px; } 
    .button { padding: 4px 10px; font-size: 1em; }
    .message {padding: 15px; font-size: .95em; }
    .account-form fieldset { padding: 25px 30px !important; margin-bottom: 30px !important; }
    .account-form fieldset:last-of-type { margin-bottom: 20px !important; }
    .account-form legend { font-size: 1.3em; margin-bottom:20px !important;}
    .mfa-qr-code img { max-width: 200px; } .mfa-recovery-codes ul { column-count: 2; padding-left: 25px !important;}
    .mfa-recovery-codes li { margin-bottom: 6px !important;}
    .lesson-navigation-buttons { flex-direction: row; justify-content: space-between; }
    .lesson-navigation-buttons .nav-group-left,.lesson-navigation-buttons .nav-group-center,.lesson-navigation-buttons .nav-group-right { width: auto; flex-direction: row; }
    .lesson-navigation-buttons .button { width: auto; margin: 0 5px !important; }
    .cookie-consent-popup {padding: 20px 30px; font-size: .9em; }
    .cookie-consent-popup .button { padding: 8px 25px; font-size: .95em; }
}
@media (min-width: 1200px) {
    .container:not(.dynamic-login-page-wrapper .container) { padding-left: 0; padding-right: 0; } 
}
/* TinyMCE Content Styling */
body.mce-content-body { padding: 10px 15px !important; line-height: 1.65; font-size: 15px; font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif; }
body.mce-content-body p { margin-bottom: 0.8em; }
body.mce-content-body h1, body.mce-content-body h2, body.mce-content-body h3, body.mce-content-body h4, body.mce-content-body h5, body.mce-content-body h6 { color: #0056b3; margin-top: 1.2em; margin-bottom: 0.6em; line-height: 1.3; }
body.mce-content-body ul, body.mce-content-body ol { padding-left: 25px; margin-bottom: 0.8em; }
body.mce-content-body li { margin-bottom: 0.3em; }