/* ==========================================================
   VERA-VM Frontend CSS v2.2
   Enfold/Avia Theme Isolation
   ========================================================== */

/* ── Basis-Reset für alle VERA-Elemente ─────────────────── */
.vera-module,
.vera-module *,
.vera-nav,
.vera-nav * {
    box-sizing: border-box !important;
}

.vera-module {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: #1a1a1a !important;
    width: 100% !important;
    max-width: 860px !important;
    margin: 0 auto 48px !important;
    /* Enfold-Isolation */
    background: transparent !important;
}

/* ── Modul-Header ────────────────────────────────────────── */
.vera-module-header {
    margin-bottom: 28px !important;
    padding-bottom: 20px !important;
    border-bottom: 3px solid #1B2A6B !important;
}

.vera-module-header h2,
.vera-module-header h2 * {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1B2A6B !important;
    margin: 8px 0 6px !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    /* Enfold Override */
    border: none !important;
    padding: 0 !important;
    background: transparent !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.vera-module-badge {
    background: #1B2A6B !important;
    color: #fff !important;
    font-size: 12px !important;
    font-weight: 800 !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
    letter-spacing: 1px !important;
    display: inline-block !important;
    line-height: 1.4 !important;
}

.vera-module-desc {
    color: #555 !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

.vera-context-hint {
    margin-top: 10px !important;
    font-size: 13px !important;
    color: #444 !important;
    background: #f0f4ff !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    border-left: 3px solid #1B2A6B !important;
}

/* ── Tags ────────────────────────────────────────────────── */
.vera-tag {
    display: inline-block !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
    margin: 0 2px !important;
    line-height: 1.4 !important;
}
.vera-tag--ok     { background: #e8f5e9 !important; color: #2E7D32 !important; }
.vera-tag--warn   { background: #fff3e0 !important; color: #e65100 !important; }
.vera-tag--a1     { background: #e3f2fd !important; color: #1565C0 !important; }
.vera-tag--a2     { background: #e8eaf6 !important; color: #3949ab !important; }
.vera-tag--a4     { background: #fce4ec !important; color: #880e4f !important; }
.vera-tag--theory { background: #f3e5f5 !important; color: #6a1b9a !important; }
.vera-tag--modus  { background: #fffde7 !important; color: #f57f17 !important; }
.vera-tag--claude { background: #1B2A6B !important; color: #fff !important; }

/* ── Warnungen ───────────────────────────────────────────── */
.vera-warning {
    background: #fff3e0 !important;
    border-left: 4px solid #ff9800 !important;
    padding: 10px 14px !important;
    border-radius: 4px !important;
    font-size: 14px !important;
    color: #e65100 !important;
}

/* ── NAVIGATION ──────────────────────────────────────────── */
.vera-nav {
    background: #1B2A6B !important;
    border-radius: 8px !important;
    padding: 0 8px !important;
    margin-bottom: 28px !important;
    overflow-x: auto !important;
    width: 100% !important;
    display: block !important;
}

.vera-nav-inner {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0 !important;
    min-width: max-content !important;
}

.vera-nav-step,
.vera-nav-step:link,
.vera-nav-step:visited {
    display: inline-block !important;
    padding: 12px 16px !important;
    color: rgba(255,255,255,0.8) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-bottom: 3px solid transparent !important;
    transition: all 0.2s !important;
    white-space: nowrap !important;
    /* Enfold Override */
    background: transparent !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    border-radius: 0 !important;
}

.vera-nav-step:hover,
.vera-nav-step:focus {
    color: #fff !important;
    border-bottom-color: rgba(255,255,255,0.5) !important;
    background: rgba(255,255,255,0.08) !important;
    text-decoration: none !important;
}

.vera-nav--active,
.vera-nav--active:link,
.vera-nav--active:visited {
    color: #fff !important;
    border-bottom-color: #fff !important;
    background: rgba(255,255,255,0.12) !important;
    text-decoration: none !important;
}

/* ── SPRACHUMSCHALTER (Language Switcher) ────────────────── */
.vera-lang-switcher {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 2px !important;
    margin-left: auto !important;
    padding: 6px 8px !important;
    overflow: visible !important;
}

.vera-lang-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 3px !important;
    padding: 4px 8px !important;
    border: 1.5px solid rgba(255,255,255,0.2) !important;
    border-radius: 5px !important;
    background: transparent !important;
    color: rgba(255,255,255,0.7) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.vera-lang-btn:hover {
    background: rgba(255,255,255,0.12) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.4) !important;
}

.vera-lang-btn.vera-lang--active {
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,0.6) !important;
    cursor: default !important;
}

.vera-lang-flag {
    font-size: 14px !important;
    line-height: 1 !important;
}

.vera-lang-code {
    font-size: 11px !important;
    letter-spacing: 0.5px !important;
}

/* ── DUAL-MODE TOGGLE ────────────────────────────────────── */
.vera-mode-toggle { margin: 24px 0 !important; }

.vera-mode-label {
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #666 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 10px !important;
    display: block !important;
}

.vera-mode-options {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 12px !important;
}

@media (max-width: 600px) {
    .vera-mode-options { grid-template-columns: 1fr !important; }
}

.vera-mode-option {
    display: block !important;
    border: 2px solid #ddd !important;
    border-radius: 10px !important;
    padding: 14px 18px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    background: #fafafa !important;
    margin: 0 !important;
    font-size: 14px !important;
    font-weight: normal !important;
    color: #333 !important;
}

.vera-mode-option input[type=radio] { display: none !important; }

.vera-mode-option:hover {
    border-color: #1565C0 !important;
    background: #f0f6ff !important;
}

.vera-mode-option.active {
    border-color: #1B2A6B !important;
    background: #eef2ff !important;
}

.vera-mode-icon { font-size: 20px !important; display: block !important; margin-bottom: 4px !important; }
.vera-mode-title { display: block !important; font-weight: 700 !important; font-size: 14px !important; color: #1B2A6B !important; margin-bottom: 4px !important; }
.vera-mode-desc  { display: block !important; font-size: 12px !important; color: #666 !important; line-height: 1.4 !important; }

.vera-mode-hint { padding: 10px 16px !important; border-radius: 6px !important; font-size: 13px !important; margin-bottom: 20px !important; }
.vera-mode-hint--a { background: #fff8e1 !important; border-left: 4px solid #ffc107 !important; color: #5d4037 !important; }
.vera-mode-hint--b { background: #e3f2fd !important; border-left: 4px solid #1565C0 !important; color: #0d47a1 !important; }

/* ── FORMULAR ────────────────────────────────────────────── */
.vera-form-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
}

@media (max-width: 600px) {
    .vera-form-grid { grid-template-columns: 1fr !important; }
}

.vera-field { display: flex !important; flex-direction: column !important; gap: 5px !important; }
.vera-field--full { grid-column: 1 / -1 !important; }

.vera-field label,
.vera-field-group label,
.vera-field label strong {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #333 !important;
    display: block !important;
    margin-bottom: 4px !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.vera-required { color: #c62828 !important; }
.vera-badge-optional { font-weight: 400 !important; font-size: 11px !important; color: #888 !important; margin-left: 6px !important; }

.vera-field input[type="text"],
.vera-field input[type="url"],
.vera-field input[type="email"],
.vera-field input[type="password"],
.vera-field select,
.vera-field textarea {
    padding: 9px 12px !important;
    border: 1.5px solid #ccc !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    transition: border-color 0.2s !important;
    background: #fff !important;
    width: 100% !important;
    box-sizing: border-box !important;
    color: #1a1a1a !important;
    /* Enfold Override */
    box-shadow: none !important;
    outline: none !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}

.vera-field input:focus,
.vera-field select:focus,
.vera-field textarea:focus {
    border-color: #1565C0 !important;
    box-shadow: 0 0 0 3px rgba(21,101,192,0.12) !important;
    outline: none !important;
}

.vera-field small { font-size: 11px !important; color: #888 !important; line-height: 1.4 !important; display: block !important; }

/* ── Checkboxen ──────────────────────────────────────────── */
.vera-field-group { margin: 12px 0 !important; }

.vera-checkbox-group {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 6px !important;
}

.vera-checkbox-label {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    font-size: 13px !important;
    color: #333 !important;
    cursor: pointer !important;
    padding: 5px 10px !important;
    border: 1.5px solid #ddd !important;
    border-radius: 20px !important;
    transition: all 0.15s !important;
    background: #fafafa !important;
    margin: 0 !important;
    font-weight: normal !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.vera-checkbox-label:hover { border-color: #1565C0 !important; background: #f0f6ff !important; }

.vera-radio-group { display: flex !important; flex-direction: column !important; gap: 8px !important; margin-top: 6px !important; }
.vera-radio-label { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 14px !important; cursor: pointer !important; }

/* ── Buttons ─────────────────────────────────────────────── */
.vera-form-actions { margin-top: 24px !important; }

.vera-btn,
.vera-btn:link,
.vera-btn:visited {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 11px 24px !important;
    border: none !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
    line-height: 1.4 !important;
    /* Enfold Override */
    box-shadow: none !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.vera-btn--primary,
.vera-btn--primary:link,
.vera-btn--primary:visited {
    background: #1B2A6B !important;
    color: #fff !important;
}
.vera-btn--primary:hover { background: #1565C0 !important; color: #fff !important; }
.vera-btn--primary:disabled,
.vera-btn--primary[disabled] { background: #aaa !important; cursor: not-allowed !important; }

.vera-btn--secondary,
.vera-btn--secondary:link { background: #f0f4ff !important; color: #1B2A6B !important; border: 1.5px solid #1B2A6B !important; }
.vera-btn--secondary:hover { background: #dde5ff !important; color: #1B2A6B !important; }

.vera-btn--ghost,
.vera-btn--ghost:link { background: transparent !important; color: #666 !important; border: 1.5px solid #ddd !important; }
.vera-btn--ghost:hover { border-color: #999 !important; color: #333 !important; }

/* ── Weiter-Button ───────────────────────────────────────── */
.vera-btn--next,
.vera-btn--next:link,
.vera-btn--next:visited {
    background: #2E7D32 !important;
    color: #fff !important;
    font-size: 14px !important;
    padding: 11px 22px !important;
    border-radius: 8px !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: none !important;
    cursor: pointer !important;
    margin-left: auto !important;
}
.vera-btn--next:hover { background: #1b5e20 !important; color: #fff !important; text-decoration: none !important; }

/* ── LOADER ──────────────────────────────────────────────── */
.vera-loader { text-align: center !important; padding: 40px 20px !important; }

.vera-spinner {
    width: 40px !important;
    height: 40px !important;
    border: 4px solid #e0e7ff !important;
    border-top-color: #1B2A6B !important;
    border-radius: 50% !important;
    animation: vera-spin 0.8s linear infinite !important;
    margin: 0 auto 12px !important;
    display: block !important;
}

@keyframes vera-spin { to { transform: rotate(360deg); } }

.vera-loader p { color: #666 !important; font-size: 14px !important; font-style: italic !important; }

/* ── ANALYSE-FORTSCHRITT (Blinkende Lämpchen) ────────── */
.vera-progress-lights {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
    margin-top: 12px !important;
}

.vera-progress-lights .vera-light {
    width: 8px !important;
    height: 8px !important;
    border-radius: 50% !important;
    background: #dde3f5 !important;
    animation: vera-pulse 1.4s ease-in-out infinite !important;
}

.vera-progress-lights .vera-light:nth-child(1) { animation-delay: 0s !important; }
.vera-progress-lights .vera-light:nth-child(2) { animation-delay: 0.2s !important; }
.vera-progress-lights .vera-light:nth-child(3) { animation-delay: 0.4s !important; }
.vera-progress-lights .vera-light:nth-child(4) { animation-delay: 0.6s !important; }
.vera-progress-lights .vera-light:nth-child(5) { animation-delay: 0.8s !important; }
.vera-progress-lights .vera-light:nth-child(6) { animation-delay: 1.0s !important; }
.vera-progress-lights .vera-light:nth-child(7) { animation-delay: 1.2s !important; }

@keyframes vera-pulse {
    0%, 100% { background: #dde3f5; transform: scale(1); }
    50%      { background: #1B2A6B; transform: scale(1.3); }
}

/* ── ERGEBNIS ────────────────────────────────────────────── */
.vera-result {
    margin-top: 30px !important;
    border: 1.5px solid #e0e7ff !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: #fff !important;
}

.vera-result-header {
    background: #1B2A6B !important;
    color: #fff !important;
    padding: 14px 20px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
}

.vera-result-header h3,
.vera-result-header h3 * {
    margin: 0 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #fff !important;
    /* Enfold Override */
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
}

.vera-result-meta { display: flex !important; gap: 6px !important; flex-wrap: wrap !important; }

.vera-result-body {
    padding: 24px !important;
    line-height: 1.8 !important;
    font-size: 15px !important;
    max-height: 600px !important;
    overflow-y: auto !important;
    color: #1a1a1a !important;
    background: #fff !important;
}

.vera-result-body h2 { font-size: 18px !important; color: #1B2A6B !important; margin: 20px 0 8px !important; }
.vera-result-body h3 { font-size: 16px !important; color: #1B2A6B !important; margin: 16px 0 6px !important; }
.vera-result-body h4 { font-size: 14px !important; color: #333 !important; margin: 12px 0 5px !important; }
.vera-result-body p  { margin-bottom: 12px !important; color: #1a1a1a !important; }
.vera-result-body strong { color: #1B2A6B !important; }

.vera-result-actions {
    padding: 12px 20px !important;
    background: #f8faff !important;
    border-top: 1px solid #e0e7ff !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
}

/* ── Status ──────────────────────────────────────────────── */
.vera-status { margin-top: 12px !important; padding: 10px 14px !important; border-radius: 6px !important; font-size: 14px !important; }
.vera-success { background: #e8f5e9 !important; color: #2E7D32 !important; border-left: 4px solid #2E7D32 !important; }
.vera-error   { background: #ffebee !important; color: #c62828 !important; border-left: 4px solid #c62828 !important; /* display: block !important entfernt – BUG-FIX: überschrieb style="display:none" */ }

/* ── Theorie-Auswahl (A3) ────────────────────────────────── */
.vera-theory-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 10px !important;
    margin-top: 8px !important;
}

.vera-theory-card {
    display: block !important;
    border: 2px solid #ddd !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    cursor: pointer !important;
    transition: all 0.2s !important;
    background: #fafafa !important;
    margin: 0 !important;
    font-weight: normal !important;
    font-size: 14px !important;
    color: #333 !important;
    text-transform: none !important;
}
.vera-theory-card input[type=radio] { display: none !important; }
.vera-theory-card:hover  { border-color: #7c3aed !important; background: #faf5ff !important; }
.vera-theory-card.active { border-color: #7c3aed !important; background: #f5f0ff !important; }

.vera-theory-id      { display: block !important; font-size: 11px !important; font-weight: 800 !important; color: #7c3aed !important; letter-spacing: 1px !important; margin-bottom: 2px !important; }
.vera-theory-title   { display: block !important; font-size: 13px !important; font-weight: 700 !important; color: #1a1a1a !important; margin-bottom: 3px !important; line-height: 1.3 !important; }
.vera-theory-authors { display: block !important; font-size: 11px !important; color: #888 !important; margin-bottom: 4px !important; }
.vera-theory-concept { display: block !important; font-size: 11px !important; color: #666 !important; line-height: 1.4 !important; }

/* ── A5 Status-Grid ──────────────────────────────────────── */
.vera-a5-status-grid {
    display: grid !important;
    grid-template-columns: repeat(5, 1fr) !important;
    gap: 10px !important;
    margin-bottom: 24px !important;
}
@media (max-width: 700px) {
    .vera-a5-status-grid { grid-template-columns: 1fr 1fr !important; }
}

.vera-a5-step {
    border: 1.5px solid #ddd !important;
    border-radius: 8px !important;
    padding: 12px !important;
    text-align: center !important;
    background: #fafafa !important;
}
.vera-a5-step--ok      { border-color: #2E7D32 !important; background: #f1f8e9 !important; }
.vera-a5-step--missing { border-color: #ddd !important; background: #fafafa !important; }

.vera-a5-step-id      { display: block !important; font-size: 16px !important; font-weight: 800 !important; color: #1B2A6B !important; }
.vera-a5-step-label   { display: block !important; font-size: 11px !important; color: #555 !important; margin: 2px 0 !important; }
.vera-a5-step-icon    { display: block !important; font-size: 18px !important; }
.vera-a5-step-preview { display: block !important; font-size: 10px !important; color: #888 !important; margin-top: 4px !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; }

/* ── A5 Download / Print ─────────────────────────────────── */
.vera-download-box {
    display: flex !important;
    align-items: center !important;
    gap: 16px !important;
    background: #e8f5e9 !important;
    border: 2px solid #2E7D32 !important;
    border-radius: 10px !important;
    padding: 20px 24px !important;
    margin-top: 20px !important;
}
.vera-download-icon { font-size: 36px !important; }
.vera-download-text strong { display: block !important; font-size: 15px !important; color: #2E7D32 !important; margin-bottom: 8px !important; }

.vera-a5-preview-body {
    max-height: 800px !important;
    overflow-y: auto !important;
    font-size: 13px !important;
    padding: 20px !important;
    color: #1a1a1a !important;
}

/* ── Handover-Anzeige ────────────────────────────────────── */
.vera-handover-preview {
    background: #f0f7f0 !important;
    border: 1.5px solid #2E7D32 !important;
    border-radius: 8px !important;
    padding: 12px 16px !important;
    margin: 0 0 20px !important;
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: #333 !important;
}

.vera-handover-badge {
    display: inline-block !important;
    background: #2E7D32 !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 700 !important;
    padding: 2px 8px !important;
    border-radius: 12px !important;
}
.vera-handover-badge--warn { background: #f57f17 !important; }

.vera-handover-header { display: flex !important; align-items: center !important; gap: 8px !important; width: 100% !important; }

.vera-handover-toggle {
    margin-left: auto !important;
    background: none !important;
    border: 1px solid #2E7D32 !important;
    color: #2E7D32 !important;
    padding: 3px 10px !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    font-size: 12px !important;
}

.vera-handover-body {
    width: 100% !important;
    padding-top: 10px !important;
    border-top: 1px solid #c8e6c9 !important;
    margin-top: 6px !important;
    font-size: 13px !important;
    color: #333 !important;
    line-height: 1.6 !important;
}

/* ── API Badge – dunkelblau, nicht sichtbar (BUG-FIX) ───── */
.vera-api-badge { display: none !important; font-size: 12px !important; font-weight: 600 !important; padding: 3px 10px !important; border-radius: 12px !important; }
.vera-api-badge--ok  { background: #1B2A6B !important; color: #1B2A6B !important; }
.vera-api-badge--err { background: #ffebee !important; color: #c62828 !important; }

/* ── PRINT / PDF ─────────────────────────────────────────── */
@media print {
    .vera-nav,
    .vera-form,
    .vera-form-actions,
    .vera-result-actions,
    .vera-mode-toggle,
    .vera-handover-preview,
    .vera-a5-status-grid,
    #vera-a5-download,
    .vera-loader { display: none !important; }

    .vera-result { border: none !important; max-height: none !important; overflow: visible !important; }
    .vera-result-header { background: #1B2A6B !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    .vera-result-body { max-height: none !important; overflow: visible !important; padding: 0 !important; }
    .vera-module { max-width: 100% !important; }

    .vera-print-doc { display: block !important; }
}

.vera-print-doc { display: none !important; }

/* ═══════════════════════════════════════════════════
   VERA-VM v2.2 – NEUE STYLES
   ═══════════════════════════════════════════════════ */

/* ─── Sekundäre Theorieauswahl ─── */
.vera-theory-selector--secondary {
    border-top: 1px dashed var(--vera-border, #ddd);
    padding-top: 20px;
    margin-top: 4px;
}

.vera-field-optional {
    font-weight: normal;
    font-size: 12px;
    color: #888;
    margin-left: 6px;
}

.vera-theory-grid--secondary .vera-theory-card {
    opacity: 0.85;
}

.vera-theory-grid--secondary .vera-theory-card.active {
    opacity: 1;
}

.vera-theory-card--none {
    border-style: dashed !important;
    opacity: 0.6;
}

.vera-theory-card--none.active {
    opacity: 1;
    border-color: #aaa !important;
    background: #f9f9f9 !important;
}

/* ─── Theorie-Badges ─── */
.vera-theory--recommended {
    border-color: #2271b1 !important;
}

.vera-theory--cautious {
    border-color: #dba617 !important;
    opacity: 0.75;
}

.vera-theory-badge-rec {
    display: inline-block;
    font-size: 10px;
    background: #e8f0fe;
    color: #2271b1;
    padding: 1px 5px;
    border-radius: 3px;
    margin-bottom: 3px;
}

.vera-theory-badge-warn {
    display: inline-block;
    font-size: 10px;
    background: #fff3cd;
    color: #856404;
    padding: 1px 5px;
    border-radius: 3px;
}

.vera-theory-hint-inline {
    font-weight: normal;
    font-size: 12px;
    color: #555;
    margin-left: 8px;
}

/* ─── Kompatibilitätshinweis ─── */
.vera-theory-compat {
    margin-top: 12px;
    padding: 10px 14px;
    border-radius: 4px;
    font-size: 13px;
    line-height: 1.5;
    border-left: 3px solid #ccc;
}

.vera-compat--ok {
    background: #f0faf0;
    border-left-color: #2e7d32;
    color: #1b5e20;
}

.vera-compat--warn {
    background: #fff8e1;
    border-left-color: #f9a825;
    color: #6d4c00;
}

.vera-compat--neutral {
    background: #f5f5f5;
    border-left-color: #9e9e9e;
    color: #444;
}

/* ─── Genre-Tag in Context-Hint ─── */
.vera-tag--genre {
    background: #f3e5f5;
    color: #6a1b9a;
    border: 1px solid #ce93d8;
}

.vera-tag--recommended {
    background: #e3f2fd;
    color: #0d47a1;
    font-weight: 600;
}

/* ─── A0 Bildsuche Verbesserung ─── */
.vera-bild-search-row {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.vera-bild-search-row input {
    flex: 1;
}

/* ─── ICONA Vorbereitung ─── */
.vera-icona-stub {
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
    color: #c9a96e;
    border: 1px solid #c9a96e;
    border-radius: 6px;
    padding: 24px;
    text-align: center;
    margin: 20px 0;
}

.vera-icona-stub h3 {
    color: #c9a96e;
    font-size: 18px;
    margin-bottom: 8px;
}

.vera-icona-stub p {
    color: #aaa;
    font-size: 13px;
}

/* ─── PDF Fixes ─── */
@media print {
    .vera-module-header,
    .vera-nav,
    .vera-form,
    .vera-result-actions,
    .vera-loader,
    .vera-handover-preview {
        display: none !important;
    }

    .vera-result-body {
        display: block !important;
        page-break-inside: avoid;
    }

    /* Keine Leerseiten */
    .vera-module {
        page-break-after: auto;
    }
}

/* ─── Vision Pre-Input (Künstler + Titel vor Scan) ─── */
.vera-vision-preinput {
    padding: 10px 14px;
    background: #f8f8f8;
    border: 1px solid #e0e0e0;
    border-bottom: none;
    border-radius: 4px 4px 0 0;
}

.vera-vision-preinput-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
}

.vera-vision-preinput-row {
    display: flex;
    gap: 10px;
}

.vera-vision-pretext {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    font-size: 13px;
    background: #fff;
}

.vera-vision-preinput + .vera-vision-bar {
    border-radius: 0 0 4px 4px;
}

/* ─── Session Reset Buttons ─── */
.vera-session-actions {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.vera-btn--reset-analysis {
    background: transparent;
    border: 1px solid #dba617;
    color: #856404;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
}

.vera-btn--reset-analysis:hover {
    background: #fff3cd;
}

.vera-btn--new-session {
    background: transparent;
    border: 1px solid #2271b1;
    color: #2271b1;
    font-size: 12px;
    padding: 5px 12px;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.15s;
}

.vera-btn--new-session:hover {
    background: #e8f0fe;
}

/* ─── Fortschrittsbalken Pulsing ─── */
/* [PATCH v2.5.2] Keyframes umbenannt: vera-pulse → vera-bar-pulse (Konflikt mit vera-light Animation behoben) */
.vera-progress--pulsing .vera-progress-fill {
    background: linear-gradient(90deg,
        var(--vera-gold, #c9a96e) 0%,
        #e8c887 50%,
        var(--vera-gold, #c9a96e) 100%);
    background-size: 200% 100%;
    animation: vera-bar-pulse 1.5s ease-in-out infinite;
}

@keyframes vera-bar-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.vera-progress-timer {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    font-family: monospace;
    color: #666;
}

/* ═══════════════════════════════════════════════════════════════
 * VERA-VM ABSCHLUSSKONTROLLE
 * ═══════════════════════════════════════════════════════════════ */

.vera-abschluss-wrap {
    margin-top: 28px;
    border-top: 2px solid #e2e8f0;
    padding-top: 20px;
}

.vera-abschluss-header h4 {
    font-size: 16px;
    font-weight: 700;
    color: #1B2A6B;
    margin: 0 0 6px;
}

.vera-abschluss-header p {
    font-size: 13px;
    color: #64748b;
    margin: 0 0 16px;
    line-height: 1.5;
}

.vera-abschluss-actions {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.vera-btn--kontrolle {
    background: #1B2A6B;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.vera-btn--kontrolle:hover { background: #1565C0; }

.vera-btn--success {
    background: #2E7D32;
    color: #fff;
    border: none;
    padding: 10px 20px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
}
.vera-btn--success:hover:not(:disabled) { background: #388e3c; }
.vera-btn--success:disabled,
.vera-btn--disabled {
    background: #94a3b8 !important;
    cursor: not-allowed;
    opacity: 0.6;
}

.vera-abschluss-loader {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 0;
    color: #64748b;
    font-size: 14px;
}

.vera-abschluss-summary {
    margin-bottom: 12px;
}

.vera-abschluss-clean {
    background: #f0fdf4;
    border: 1px solid #86efac;
    color: #166534;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
}

.vera-abschluss-found {
    background: #fff7ed;
    border: 1px solid #fdba74;
    color: #9a3412;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    margin-bottom: 6px;
}

.vera-abschluss-hint {
    font-size: 12px;
    color: #64748b;
    margin: 4px 0 12px;
}

.vera-fehler-liste {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.vera-fehler-item {
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 12px;
    background: #fff;
    transition: border-color 0.2s;
}

.vera-fehler-item.fehler--rot    { border-left: 4px solid #ef4444; background: #fef2f2; }
.vera-fehler-item.fehler--orange { border-left: 4px solid #f97316; background: #fff7ed; }
.vera-fehler-item.fehler--gelb   { border-left: 4px solid #eab308; background: #fefce8; }
.vera-fehler-item.fehler--gruen  { border-left: 4px solid #22c55e; background: #f0fdf4; }

.vera-fehler-check {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    cursor: pointer;
}

.vera-fehler-check input[type=checkbox] {
    margin-top: 3px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    cursor: pointer;
}

.vera-fehler-body { flex: 1; }

.vera-fehler-stufe {
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 5px;
}

.vera-fehler-typ {
    font-weight: 400;
    font-size: 11px;
    color: #64748b;
    background: #f1f5f9;
    padding: 1px 6px;
    border-radius: 4px;
    margin-left: 6px;
}

.vera-fehler-original {
    font-size: 13px;
    color: #dc2626;
    margin-bottom: 4px;
    font-style: italic;
}

.vera-fehler-erklaerung {
    font-size: 12px;
    color: #475569;
    margin-bottom: 4px;
    line-height: 1.5;
}

.vera-fehler-korrektur {
    font-size: 13px;
    color: #166534;
    background: #f0fdf4;
    padding: 4px 8px;
    border-radius: 4px;
}

.vera-abschluss-confirm {
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 14px 16px;
    margin-top: 8px;
}

.vera-abschluss-confirm-text {
    font-size: 13px;
    color: #475569;
    margin-bottom: 12px;
}

.vera-abschluss-gespeichert {
    font-size: 14px;
    font-weight: 600;
    color: #166534;
    background: #f0fdf4;
    padding: 12px 14px;
    border-radius: 6px;
    border: 1px solid #86efac;
    margin-bottom: 12px;
}

.vera-abschluss-ok p {
    font-size: 14px;
    color: #166534;
    font-weight: 600;
    margin-bottom: 10px;
}

/* ── KORREKTUR VORHER/NACHHER ──────────────────────────────── */
.vera-korrektur-wrap {
    margin-top: 20px;
    border: 2px solid #1B2A6B;
    border-radius: 10px;
    overflow: hidden;
}

.vera-korrektur-header {
    background: linear-gradient(135deg, #1B2A6B, #1565C0);
    padding: 14px 18px;
    color: #fff;
}

.vera-korrektur-header h4 {
    margin: 0 0 4px;
    font-size: 15px;
    font-weight: 700;
}

.vera-korrektur-header p {
    margin: 0;
    font-size: 12px;
    opacity: 0.85;
}

.vera-korrektur-vergleich {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

@media (max-width: 768px) {
    .vera-korrektur-vergleich { grid-template-columns: 1fr; }
}

.vera-korrektur-seite {
    border-right: 1px solid #e2e8f0;
}

.vera-korrektur-seite:last-child { border-right: none; }

.vera-korrektur-seite-label {
    padding: 8px 14px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.vera-korrektur-seite-label--alt {
    background: #fef2f2;
    color: #dc2626;
    border-bottom: 1px solid #fecaca;
}

.vera-korrektur-seite-label--neu {
    background: #f0fdf4;
    color: #16a34a;
    border-bottom: 1px solid #bbf7d0;
}

.vera-korrektur-text {
    padding: 14px;
    font-size: 12px;
    line-height: 1.7;
    color: #374151;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    background: #fff;
}

.vera-korrektur-actions {
    display: flex;
    gap: 10px;
    padding: 14px 16px;
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    flex-wrap: wrap;
}

.vera-korrektur-loader {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px;
    color: #64748b;
    font-size: 14px;
}

/* ── FEHLER-GRUPPEN LABELS ──────────────────────────────────── */
.vera-fehler-gruppe-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: #dc2626;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 6px 12px;
    margin: 10px 0 6px;
}

.vera-fehler-gruppe-label--optional {
    color: #ca8a04;
    background: #fefce8;
    border-color: #fde68a;
}

.vera-abschluss-pflicht {
    background: #fff7ed;
    border: 1px solid #fdba74;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    color: #9a3412;
    margin: 6px 0;
}

.vera-abschluss-optional {
    background: #f0fdf4;
    border: 1px solid #86efac;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 13px;
    color: #166534;
    margin: 6px 0;
}

/* ═══════════════════════════════════════════════════════════════
 * [v2.6.0] VERA-VM STARTSEITE
 * ═══════════════════════════════════════════════════════════════ */

.vera-start-selector {
    max-width: 720px !important;
    margin: 40px auto !important;
    text-align: center !important;
}

.vera-start-title {
    font-size: 22px !important;
    font-weight: 700 !important;
    color: #1B2A6B !important;
    margin-bottom: 8px !important;
}

.vera-start-desc {
    color: #666 !important;
    font-size: 14px !important;
    margin-bottom: 28px !important;
}

.vera-start-options {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 20px !important;
}

@media (max-width: 600px) {
    .vera-start-options { grid-template-columns: 1fr !important; }
}

.vera-start-card {
    display: block !important;
    text-decoration: none !important;
    border: 2px solid #e0e7ff !important;
    border-radius: 12px !important;
    padding: 28px 20px !important;
    background: #fff !important;
    transition: all 0.2s ease !important;
    text-align: left !important;
    color: #1a1a1a !important;
}

.vera-start-card:hover {
    border-color: #1B2A6B !important;
    box-shadow: 0 4px 16px rgba(27, 42, 107, 0.12) !important;
    transform: translateY(-2px) !important;
}

.vera-start-card--textkritik:hover {
    border-color: #0d6e4f !important;
    box-shadow: 0 4px 16px rgba(13, 110, 79, 0.12) !important;
}

.vera-start-icon {
    display: block !important;
    font-size: 28px !important;
    margin-bottom: 12px !important;
}

.vera-start-card strong {
    display: block !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    color: #1B2A6B !important;
    margin-bottom: 8px !important;
}

.vera-start-card--textkritik strong {
    color: #0d6e4f !important;
}

.vera-start-card p {
    font-size: 13px !important;
    color: #666 !important;
    line-height: 1.5 !important;
    margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════
 * [v2.6.0] VERA-VM TEXTKRITIK-MODUL
 * ═══════════════════════════════════════════════════════════════ */

.vera-badge--textkritik {
    background: #0d6e4f !important;
    color: #fff !important;
}

.vera-textkritik-module .vera-module-header {
    border-bottom: 3px solid #0d6e4f !important;
    padding-bottom: 16px !important;
    margin-bottom: 24px !important;
}

/* Modus-Auswahl */
.vera-mode-selector {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
}

@media (max-width: 600px) {
    .vera-mode-selector { grid-template-columns: 1fr !important; }
}

.vera-mode-option {
    border: 2px solid #e0e7ff !important;
    border-radius: 10px !important;
    padding: 18px !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    background: #fff !important;
}

.vera-mode-option:hover {
    border-color: #0d6e4f !important;
}

.vera-mode-option.active {
    border-color: #0d6e4f !important;
    background: #f0fdf4 !important;
    box-shadow: 0 0 0 3px rgba(13, 110, 79, 0.1) !important;
}

.vera-mode-option input[type=radio] {
    display: none !important;
}

.vera-mode-option strong {
    display: block !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #1B2A6B !important;
    margin-bottom: 4px !important;
}

.vera-mode-option.active strong {
    color: #0d6e4f !important;
}

.vera-mode-option p {
    font-size: 12px !important;
    color: #666 !important;
    margin: 0 !important;
    line-height: 1.5 !important;
}

.vera-mode--disabled {
    opacity: 0.5 !important;
    cursor: not-allowed !important;
}

.vera-mode--disabled:hover {
    border-color: #e0e7ff !important;
}

/* Quellenangabe Grid */
.vera-tk-quelle-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
}

@media (max-width: 600px) {
    .vera-tk-quelle-grid { grid-template-columns: 1fr !important; }
}

.vera-tk-quelle-grid input {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1.5px solid #dde3f5 !important;
    border-radius: 6px !important;
    font-size: 14px !important;
    transition: border-color 0.2s !important;
}

.vera-tk-quelle-grid input:focus {
    border-color: #0d6e4f !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(13, 110, 79, 0.08) !important;
}

/* Archiv-Vorschau (Modus B) */
.vera-tk-archiv-preview {
    max-height: 300px !important;
    overflow-y: auto !important;
    padding: 16px !important;
    background: #f8f9fc !important;
    border: 1px solid #e0e7ff !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    line-height: 1.65 !important;
    color: #333 !important;
    white-space: pre-wrap !important;
    font-family: Georgia, 'Times New Roman', serif !important;
}

/* Textkritik-spezifische Buttons */
.vera-btn--textkritik {
    background: #0d6e4f !important;
    border-color: #0d6e4f !important;
    color: #fff !important;
}

.vera-btn--textkritik:hover {
    background: #0a5a40 !important;
    border-color: #0a5a40 !important;
}

/* Ergebnis-Header */
.vera-result-header--textkritik {
    background: #0d6e4f !important;
}

.vera-tag--textkritik {
    background: #0d6e4f !important;
    color: #fff !important;
}