/**
 * my8data V5 Design System - FULL OVERRIDE
 *
 * Aggressives Theme Override fuer kompletten visuellen Umbau
 * Aktivierung: ?theme=v5
 */

/* ============================================== */
/* 1. GOOGLE FONTS - IBM Plex                     */
/* ============================================== */

@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ============================================== */
/* 2. CSS VARIABLES                               */
/* ============================================== */

:root {
    /* V5 Primary Palette */
    --v5-primary: #1e3a5f;
    --v5-primary-dark: #152a45;
    --v5-primary-light: #2d5a87;

    /* V5 Accent (Success/CTA) */
    --v5-accent: #10b981;
    --v5-accent-dark: #059669;
    --v5-accent-light: #34d399;

    /* V5 Status Colors */
    --v5-success: #10b981;
    --v5-warning: #f59e0b;
    --v5-danger: #ef4444;
    --v5-info: #3b82f6;

    /* V5 Neutrals */
    --v5-white: #ffffff;
    --v5-gray-50: #f8fafc;
    --v5-gray-100: #f1f5f9;
    --v5-gray-200: #e2e8f0;
    --v5-gray-300: #cbd5e1;
    --v5-gray-400: #94a3b8;
    --v5-gray-500: #64748b;
    --v5-gray-600: #475569;
    --v5-gray-700: #334155;
    --v5-gray-800: #1e293b;
    --v5-gray-900: #0f172a;

    /* V5 Typography */
    --v5-font: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, sans-serif;
    --v5-font-mono: 'IBM Plex Mono', 'Consolas', monospace;

    /* V5 Spacing */
    --v5-space-1: 4px;
    --v5-space-2: 8px;
    --v5-space-3: 12px;
    --v5-space-4: 16px;
    --v5-space-5: 20px;
    --v5-space-6: 24px;
    --v5-space-8: 32px;

    /* V5 Radius */
    --v5-radius-sm: 6px;
    --v5-radius-md: 10px;
    --v5-radius-lg: 14px;

    /* V5 Shadows */
    --v5-shadow-sm: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
    --v5-shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
    --v5-shadow-lg: 0 10px 25px rgba(0,0,0,0.1), 0 6px 10px rgba(0,0,0,0.08);
}

/* ============================================== */
/* 3. GLOBAL RESETS                               */
/* ============================================== */

body {
    font-family: var(--v5-font) !important;
    background-color: var(--v5-gray-100) !important;
    color: var(--v5-gray-800) !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

* {
    font-family: inherit;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--v5-font) !important;
    font-weight: 600 !important;
    color: var(--v5-gray-800) !important;
    letter-spacing: -0.01em;
}

/* ============================================== */
/* 3a. DARK BACKGROUND EXCEPTIONS                 */
/* ============================================== */
/*
 * Problem: Die globale Regel setzt alle Ueberschriften auf dunkelgrau.
 * Bei Sections mit dunklem Hintergrund (Hero, CTA, Social Proof)
 * fehlt dann der Kontrast.
 *
 * Loesung: Explizite Ausnahmen fuer diese Sections definieren.
 */

/* Hero Section - Dunkelblauer Gradient-Hintergrund */
.hero-section h1,
.hero-section h2,
.hero-section h3,
.hero-section .hero-title,
.hero-section .hero-subtitle,
.hero-section p {
    color: white !important;
}

/* Upgrade Hero - Dunkelblauer Gradient-Hintergrund (upgrade.html) */
.upgrade-hero h1,
.upgrade-hero h2,
.upgrade-hero p {
    color: white !important;
}

/* CTA Section - Dunkelblauer Gradient-Hintergrund */
.cta-section h2,
.cta-section p {
    color: white !important;
}

/* Social Proof Section - Dunkler Hintergrund (#1f2937) */
.social-proof-section h2,
.social-proof-section h3,
.social-proof-section .section-title {
    color: white !important;
}

/* Social Proof Cards - Accent-Farbe fuer h3 (besser lesbar als weiss) */
.social-proof-card h3 {
    color: var(--v5-accent) !important;
}

/* Sticky Banner - Dunkelblauer Hintergrund */
.sticky-launch-banner,
.sticky-launch-banner span {
    color: white !important;
}

/* Sticky Bottom CTA - Dunkelblauer Hintergrund */
.sticky-bottom-cta,
.sticky-bottom-cta-text {
    color: white !important;
}

/* ============================================== */
/* 4. HEADER - KOMPLETT NEU                       */
/* ============================================== */

.main-header {
    background: var(--v5-white) !important;
    border-bottom: none !important;
    box-shadow: var(--v5-shadow-md) !important;
    padding: 12px 24px !important;
    position: relative;
}

.main-header::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--v5-primary) 0%, var(--v5-accent) 100%);
}

.logo-container a {
    color: var(--v5-primary) !important;
    font-weight: 700 !important;
    font-size: 1.4em !important;
    letter-spacing: -0.02em;
}

.logo-container img {
    height: 50px !important;
}

/* ============================================== */
/* 5. NAVIGATION                                  */
/* ============================================== */

.user-nav .btn,
.user-nav a.btn {
    border-radius: var(--v5-radius-sm) !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    padding: 8px 16px !important;
    transition: all 0.2s ease !important;
}

.user-nav .btn-help-contact {
    background: var(--v5-gray-100) !important;
    border: 1px solid var(--v5-gray-200) !important;
    color: var(--v5-gray-700) !important;
}

.user-nav .btn-help-contact:hover {
    background: var(--v5-gray-200) !important;
    color: var(--v5-primary) !important;
    transform: translateY(-1px);
}

/* Preis + Bestellung und Sprachschalter: Gleicher Stil wie Hilfe/Kontakt */
.user-nav .btn-success,
.user-nav .dropdown-toggle {
    background: var(--v5-gray-100) !important;
    border: 1px solid var(--v5-gray-200) !important;
    color: var(--v5-gray-700) !important;
}

.user-nav .btn-success:hover,
.user-nav .dropdown-toggle:hover {
    background: var(--v5-gray-200) !important;
    color: var(--v5-primary) !important;
    transform: translateY(-1px);
    box-shadow: none !important;
}

/* Grüner Akzent-Button für Dashboard */
.user-nav .btn-nav-primary {
    background: var(--v5-accent) !important;
    border-color: var(--v5-accent) !important;
    color: white !important;
}

.user-nav .btn-nav-primary:hover {
    background: var(--v5-accent-dark) !important;
    border-color: var(--v5-accent-dark) !important;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

/* ============================================== */
/* 6. PAGE CONTAINER                              */
/* ============================================== */

.page-container {
    background: var(--v5-white) !important;
    border-radius: var(--v5-radius-lg) !important;
    box-shadow: var(--v5-shadow-sm) !important;
    margin: 20px auto !important;
    padding: 24px !important;
    max-width: 1400px !important;
}

/* ============================================== */
/* 7. PAGE HEADER (Seitentitel)                   */
/* ============================================== */

/* Page Header - Override Bootstrap bg-light with maximum specificity */
.page-header,
.page-header.bg-light,
.page-header.bg-white,
div.page-header,
div.page-header.bg-light,
div.page-header.bg-light.border.rounded-3,
.page-header.d-flex.bg-light {
    background: linear-gradient(135deg, #1e3a5f 0%, #2d5a87 100%) !important;
    background-color: #1e3a5f !important;
    border: none !important;
    border-radius: var(--v5-radius-md) !important;
    padding: 20px 24px !important;
    margin-bottom: 24px !important;
    color: white !important;
}

.page-header h1,
.page-header .h3 {
    color: white !important;
    margin: 0 !important;
    font-weight: 600 !important;
}

.page-header small,
.page-header .text-muted {
    color: rgba(255,255,255,0.8) !important;
}

.page-header .btn {
    background: rgba(255,255,255,0.15) !important;
    border: 1px solid rgba(255,255,255,0.3) !important;
    color: white !important;
    backdrop-filter: blur(4px);
}

.page-header .btn:hover {
    background: rgba(255,255,255,0.25) !important;
    transform: translateY(-1px);
}

/* ============================================== */
/* 8. BUTTONS - KOMPLETT NEU                      */
/* ============================================== */

.btn {
    font-family: var(--v5-font) !important;
    font-weight: 500 !important;
    border-radius: var(--v5-radius-sm) !important;
    padding: 10px 20px !important;
    transition: all 0.2s ease !important;
    border: none !important;
}

.btn-primary,
.btn-success,
.btn-green,
.btn-primary:not([disabled]) {
    background: var(--v5-accent) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}

.btn-primary:hover,
.btn-success:hover,
.btn-green:hover,
.btn-primary:not([disabled]):hover {
    background: var(--v5-accent-dark) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(16, 185, 129, 0.3) !important;
}

.btn-secondary,
.btn-outline-secondary {
    background: var(--v5-gray-100) !important;
    border: 1px solid var(--v5-gray-300) !important;
    color: var(--v5-gray-700) !important;
}

.btn-secondary:hover,
.btn-outline-secondary:hover {
    background: var(--v5-gray-200) !important;
    color: var(--v5-primary) !important;
}

.btn-blue {
    background: var(--v5-primary) !important;
    color: white !important;
}

.btn-blue:hover {
    background: var(--v5-primary-dark) !important;
}

.btn-klein {
    padding: 6px 14px !important;
    font-size: 0.85rem !important;
    background: var(--v5-accent) !important;
    border: none !important;
}

/* ============================================== */
/* 9. CARDS - KOMPLETT NEU                        */
/* ============================================== */

.card {
    background: var(--v5-white) !important;
    border: 1px solid var(--v5-gray-200) !important;
    border-radius: var(--v5-radius-md) !important;
    box-shadow: var(--v5-shadow-sm) !important;
    overflow: hidden;
}

.card-header {
    background: var(--v5-primary) !important;
    color: white !important;
    border-bottom: none !important;
    padding: 14px 20px !important;
    font-weight: 600 !important;
    font-size: 0.95rem !important;
}

.card-header strong {
    color: white !important;
}

.card-body {
    padding: 20px !important;
}

/* Stats Cards */
.stats-card {
    background: var(--v5-white) !important;
    border: 1px solid var(--v5-gray-200) !important;
    border-radius: var(--v5-radius-md) !important;
    padding: 24px !important;
    box-shadow: var(--v5-shadow-sm) !important;
}

.stats-card h6 {
    color: var(--v5-primary) !important;
    font-weight: 600 !important;
    font-size: 0.9rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 20px !important;
    padding-bottom: 12px !important;
    border-bottom: 2px solid var(--v5-gray-100) !important;
}

.stats-card h6 i {
    color: var(--v5-accent) !important;
}

/* ============================================== */
/* 10. FORMS - KOMPLETT NEU                       */
/* ============================================== */

.form-control,
.form-select {
    font-family: var(--v5-font) !important;
    border: 1px solid var(--v5-gray-300) !important;
    border-radius: var(--v5-radius-sm) !important;
    padding: 10px 14px !important;
    font-size: 0.95rem !important;
    transition: all 0.2s ease !important;
    background: var(--v5-white) !important;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--v5-primary) !important;
    box-shadow: 0 0 0 4px rgba(30, 58, 95, 0.1) !important;
    outline: none !important;
}

/* Readonly Felder - Standard (Statistik-Werte, kleiner) */
.form-control[readonly],
.form-control.bg-light,
.form-control-plaintext,
.form-control-plaintext.bg-light,
input[readonly],
input.bg-light[readonly],
input.form-control.bg-light,
.form-control.form-control.bg-light,
.bg-light.form-control {
    background-color: #e2e6eb !important;
    background: #e2e6eb !important;
    border: 1px solid #c0c8d2 !important;
    color: var(--v5-primary-dark) !important;
    font-family: var(--v5-font-mono) !important;
    font-weight: 500 !important;
    font-size: 0.9rem !important;
    border-radius: var(--v5-radius-sm) !important;
    padding: 6px 10px !important;
}

/* ==========================================================================
   KPI-Ergebnis-Felder - Visuelle Hierarchie
   Wichtige KPIs werden größer und prominenter dargestellt
   ========================================================================== */

/* Generische Klasse für KPI-Ergebnisse (kann in allen Templates verwendet werden) */
.kpi-result,
.kpi-result.form-control,
input.kpi-result {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    padding: 8px 12px !important;
}

/* MSA1: Cg, Cgk, %RE */
#ergebnisse_cg,
#ergebnisse_cgk,
#ergebnisse_prozentRE {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    padding: 8px 12px !important;
}

/* MSA2/MSA3: %GRR, ndc (in Tabellen - über %SV Spalte) */
#detailed-results-table td input[id*="_prozent_sv"],
#detailed-results-table td input[id*="_ndc"] {
    font-size: 1.1rem !important;
    font-weight: 700 !important;
}

/* MFU: Cm, Cmk (Maschinenfähigkeit) */
#ergebnis_cm,
#ergebnis_cmk,
#ergebnis_cmu,
#ergebnis_cmo,
#bewertung_cmk,
input[id*="cmk"]:not([id*="grenze"]) {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    padding: 8px 12px !important;
}

/* PFU: Cp, Cpk, Pp, Ppk (Prozessfähigkeit) */
#ergebnis_cp,
#ergebnis_cpk,
#ergebnis_pp,
#ergebnis_ppk,
input[id*="cpk"],
input[id*="ppk"] {
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    padding: 8px 12px !important;
}

/* SPC: Capability-Werte */
.capability-value,
#result-cpk,
#result-ppk,
#result-cp,
#result-pp {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    font-family: var(--v5-font-mono) !important;
    color: var(--v5-primary) !important;
}

/* Override Bootstrap's .bg-light specifically for form controls */
.bg-light.form-control,
input.bg-light,
.form-control.bg-light {
    --bs-bg-light: #e2e6eb !important;
    background-color: #e2e6eb !important;
}

.form-label,
label {
    font-family: var(--v5-font) !important;
    font-weight: 500 !important;
    color: var(--v5-gray-600) !important;
    font-size: 0.875rem !important;
    margin-bottom: 6px !important;
}

.form-control-sm {
    padding: 8px 12px !important;
    font-size: 0.9rem !important;
}

/* Form Control Color */
.form-control-color {
    width: 50px !important;
    height: 38px !important;
    padding: 4px !important;
    border-radius: var(--v5-radius-sm) !important;
}

/* ============================================== */
/* 11. RESULTS & KPIs                             */
/* ============================================== */

#results-container h3 {
    color: var(--v5-primary) !important;
    font-weight: 700 !important;
}

/* Evaluation Badge */
.result-badge,
#evaluation-badge {
    font-family: var(--v5-font) !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    padding: 12px 32px !important;
    border-radius: var(--v5-radius-md) !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

.badge.bg-success,
.result-badge.bg-success {
    background: linear-gradient(135deg, var(--v5-success) 0%, #059669 100%) !important;
    box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3) !important;
}

.badge.bg-warning {
    background: linear-gradient(135deg, var(--v5-warning) 0%, #d97706 100%) !important;
    color: white !important;
}

.badge.bg-danger {
    background: linear-gradient(135deg, var(--v5-danger) 0%, #dc2626 100%) !important;
}

/* Capability Values */
.capability-value {
    font-family: var(--v5-font-mono) !important;
    font-size: 2rem !important;
    font-weight: 600 !important;
    color: var(--v5-primary) !important;
}

/* ============================================== */
/* 12. TABLES                                     */
/* ============================================== */

.table {
    font-family: var(--v5-font) !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
}

.table thead th {
    background: var(--v5-primary) !important;
    color: white !important;
    font-weight: 600 !important;
    font-size: 0.85rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    padding: 14px 16px !important;
    border: none !important;
}

.table thead th:first-child {
    border-radius: var(--v5-radius-sm) 0 0 0 !important;
}

.table thead th:last-child {
    border-radius: 0 var(--v5-radius-sm) 0 0 !important;
}

.table tbody td {
    font-family: var(--v5-font-mono) !important;
    padding: 12px 16px !important;
    border-bottom: 1px solid var(--v5-gray-100) !important;
    vertical-align: middle !important;
}

.table tbody tr:hover {
    background: var(--v5-gray-50) !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background: var(--v5-gray-50) !important;
}

/* Spreadsheet */
#spreadsheet-wrapper {
    border: 2px solid var(--v5-gray-200) !important;
    border-radius: var(--v5-radius-md) !important;
    overflow: hidden !important;
}

/* ============================================== */
/* 13. TABS & ACCORDION                           */
/* ============================================== */

.nav-tabs {
    border-bottom: 2px solid var(--v5-gray-200) !important;
}

.nav-tabs .nav-link {
    font-family: var(--v5-font) !important;
    font-weight: 500 !important;
    color: var(--v5-gray-500) !important;
    border: none !important;
    border-bottom: 3px solid transparent !important;
    padding: 12px 20px !important;
    margin-bottom: -2px !important;
    transition: all 0.2s ease !important;
}

.nav-tabs .nav-link:hover {
    color: var(--v5-primary) !important;
    border-bottom-color: var(--v5-gray-300) !important;
}

.nav-tabs .nav-link.active {
    color: var(--v5-primary) !important;
    border-bottom-color: var(--v5-primary) !important;
    background: transparent !important;
    font-weight: 600 !important;
}

/* Accordion */
.accordion-item {
    border: 1px solid var(--v5-gray-200) !important;
    border-radius: var(--v5-radius-sm) !important;
    margin-bottom: 8px !important;
    overflow: hidden;
}

.accordion-button {
    font-family: var(--v5-font) !important;
    font-weight: 500 !important;
    color: var(--v5-gray-700) !important;
    background: var(--v5-gray-50) !important;
    padding: 16px 20px !important;
}

.accordion-button:not(.collapsed) {
    background: var(--v5-primary) !important;
    color: white !important;
    box-shadow: none !important;
}

.accordion-button:focus {
    box-shadow: none !important;
    border-color: var(--v5-primary) !important;
}

.accordion-body {
    padding: 20px !important;
    background: var(--v5-white) !important;
}

/* ============================================== */
/* 14. ALERTS                                     */
/* ============================================== */

.alert {
    border: none !important;
    border-radius: var(--v5-radius-md) !important;
    padding: 16px 20px !important;
    font-weight: 500 !important;
}

.alert-success {
    background: #d1fae5 !important;
    color: #065f46 !important;
    border-left: 4px solid var(--v5-success) !important;
}

.alert-warning {
    background: #fef3c7 !important;
    color: #92400e !important;
    border-left: 4px solid var(--v5-warning) !important;
}

.alert-danger {
    background: #fee2e2 !important;
    color: #991b1b !important;
    border-left: 4px solid var(--v5-danger) !important;
}

.alert-info {
    background: #dbeafe !important;
    color: #1e40af !important;
    border-left: 4px solid var(--v5-info) !important;
}

/* ============================================== */
/* 15. MODAL                                      */
/* ============================================== */

.modal-content {
    border: none !important;
    border-radius: var(--v5-radius-lg) !important;
    box-shadow: var(--v5-shadow-lg) !important;
    overflow: hidden;
}

.modal-header {
    background: linear-gradient(135deg, var(--v5-primary) 0%, var(--v5-primary-light) 100%) !important;
    color: white !important;
    border: none !important;
    padding: 20px 24px !important;
}

.modal-header .modal-title {
    font-weight: 600 !important;
    color: white !important;
}

.modal-header .btn-close {
    filter: brightness(0) invert(1) !important;
    opacity: 0.8 !important;
}

.modal-body {
    padding: 24px !important;
}

.modal-footer {
    border-top: 1px solid var(--v5-gray-200) !important;
    padding: 16px 24px !important;
}

/* ============================================== */
/* 16. DROPDOWN                                   */
/* ============================================== */

.dropdown-menu {
    border: 1px solid var(--v5-gray-200) !important;
    border-radius: var(--v5-radius-md) !important;
    box-shadow: var(--v5-shadow-lg) !important;
    padding: 8px !important;
}

.dropdown-item {
    font-family: var(--v5-font) !important;
    border-radius: var(--v5-radius-sm) !important;
    color: var(--v5-gray-700) !important;
    transition: all 0.15s ease !important;
}

.dropdown-item:hover {
    background: var(--v5-gray-100) !important;
    color: var(--v5-primary) !important;
}

.dropdown-item.text-danger {
    color: var(--v5-danger) !important;
}

.dropdown-item.text-danger:hover {
    background: #fee2e2 !important;
}

/* Deaktivierte Dropdown-Items (PRO-Features für User ohne Berechtigung) */
.dropdown-item.disabled,
.dropdown-item.disabled.text-muted {
    color: var(--v5-gray-500) !important;
    opacity: 1 !important;
}

.dropdown-item.disabled:hover {
    background: var(--v5-gray-100) !important;
    color: var(--v5-gray-600) !important;
}

/* Kompaktere Dropdown-Abstände für grosse Menüs */
.dropdown-divider {
    margin: 4px 0 !important;
}

/* Dropdown Section Headers - auffaelliger fuer bessere UX */
.dropdown-header {
    padding: 8px 16px 4px 16px !important;
    margin-bottom: 2px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    color: var(--v5-primary) !important;
    background: var(--v5-gray-50) !important;
    border-left: 3px solid var(--v5-accent) !important;
}

.dropdown-header i {
    color: var(--v5-accent) !important;
    margin-right: 4px !important;
}

/* Kompaktere Dropdown-Items */
.dropdown-item {
    padding: 6px 16px !important;
}

/* Template-Select im Dropdown kompakter */
.dropdown-menu .px-3.py-2 {
    padding: 6px 12px !important;
}

.dropdown-menu .form-label.small {
    margin-bottom: 2px !important;
    font-size: 0.7rem !important;
}

.dropdown-menu .form-select-sm {
    padding: 4px 8px !important;
    font-size: 0.8rem !important;
}

/* ============================================== */
/* 17. FOOTER                                     */
/* ============================================== */

.main-footer {
    background: var(--v5-gray-800) !important;
    color: var(--v5-gray-300) !important;
    border-top: none !important;
    padding: 24px 20px !important;
}

.main-footer a {
    color: var(--v5-gray-300) !important;
    transition: color 0.2s ease !important;
}

.main-footer a:hover {
    color: white !important;
}

.main-footer p {
    color: var(--v5-gray-400) !important;
}

/* ============================================== */
/* 18. PLOT CONTAINERS                            */
/* ============================================== */

.plot-container {
    background: var(--v5-white) !important;
    padding: 16px !important;
}

.plot-container img {
    border: 1px solid var(--v5-gray-200) !important;
    border-radius: var(--v5-radius-sm) !important;
}

/* ============================================== */
/* 19. FOUNDERS BADGE                             */
/* ============================================== */

.founders-badge {
    background: linear-gradient(135deg, var(--v5-accent) 0%, var(--v5-accent-dark, #059669) 100%) !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4) !important;
    font-family: var(--v5-font) !important;
}

/* ============================================== */
/* 20. SECTION HEADERS (h5 mit Icons)             */
/* ============================================== */

.content-wrapper h5,
.row h5 {
    color: var(--v5-primary) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding-bottom: 10px !important;
    border-bottom: 2px solid var(--v5-gray-100) !important;
    margin-bottom: 16px !important;
}

.content-wrapper h5 i,
.row h5 i {
    color: var(--v5-accent) !important;
    font-size: 1.1rem !important;
}

/* H5 Kontrast-Fix für dunkle Hintergründe */
.card-header h5,
.modal-header h5,
.bg-primary h5,
.bg-danger h5,
.bg-warning h5,
.bg-success h5,
.bg-info h5,
.bg-dark h5 {
    color: white !important;
}

.card-header h5 i,
.modal-header h5 i,
.bg-primary h5 i,
.bg-danger h5 i,
.bg-warning h5 i,
.bg-success h5 i,
.bg-info h5 i,
.bg-dark h5 i {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* ============================================== */
/* 21. HORIZONTAL RULES                           */
/* ============================================== */

hr {
    border: none !important;
    border-top: 2px solid var(--v5-gray-100) !important;
    margin: 32px 0 !important;
}

/* ============================================== */
/* 22. SCROLLBARS (WebKit)                        */
/* ============================================== */

::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--v5-gray-100);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: var(--v5-gray-300);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--v5-gray-400);
}

/* ============================================== */
/* 23. FEEDBACK WIDGET                            */
/* ============================================== */

/* Trigger Button */
.feedback-trigger {
    background: linear-gradient(135deg, var(--v5-primary) 0%, var(--v5-primary-light) 100%) !important;
    border-radius: var(--v5-radius-md) !important;
    box-shadow: var(--v5-shadow-lg) !important;
    border: none !important;
    font-family: var(--v5-font) !important;
    font-weight: 600 !important;
}

.feedback-trigger:hover {
    background: linear-gradient(135deg, var(--v5-primary-light) 0%, var(--v5-primary) 100%) !important;
    transform: translateY(-3px) !important;
    box-shadow: 0 8px 25px rgba(30, 58, 95, 0.3) !important;
}

/* Popup Container */
.feedback-popup {
    border: 1px solid var(--v5-gray-200) !important;
    border-radius: var(--v5-radius-lg) !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15) !important;
    overflow: hidden !important;
}

/* Popup Header */
.feedback-popup-header {
    background: linear-gradient(135deg, var(--v5-primary) 0%, var(--v5-primary-light) 100%) !important;
    padding: 16px 20px !important;
}

.feedback-popup-title {
    color: white !important;
    font-family: var(--v5-font) !important;
    font-weight: 600 !important;
}

.feedback-popup-close {
    background: rgba(255, 255, 255, 0.2) !important;
    border: none !important;
    color: white !important;
    border-radius: 50% !important;
}

.feedback-popup-close:hover {
    background: rgba(255, 255, 255, 0.3) !important;
}

/* Feedback Type Buttons */
.feedback-type-btn {
    border: 2px solid var(--v5-gray-200) !important;
    border-radius: var(--v5-radius-sm) !important;
    background: white !important;
    color: var(--v5-gray-700) !important;
    font-family: var(--v5-font) !important;
    transition: all 0.2s ease !important;
}

.feedback-type-btn:hover {
    border-color: var(--v5-primary) !important;
    color: var(--v5-primary) !important;
    background: var(--v5-gray-50) !important;
}

.feedback-type-btn.active {
    background: rgba(30, 58, 95, 0.08) !important;
    border-color: var(--v5-primary) !important;
    color: var(--v5-primary) !important;
}

.feedback-type-btn i {
    color: inherit !important;
}

/* Form Elements */
.feedback-form-group label {
    font-family: var(--v5-font) !important;
    font-weight: 500 !important;
    color: var(--v5-gray-700) !important;
}

.feedback-form-group textarea,
.feedback-form-group input {
    border: 2px solid var(--v5-gray-200) !important;
    border-radius: var(--v5-radius-sm) !important;
    font-family: var(--v5-font) !important;
}

.feedback-form-group textarea:focus,
.feedback-form-group input:focus {
    border-color: var(--v5-primary) !important;
    box-shadow: 0 0 0 4px rgba(30, 58, 95, 0.1) !important;
}

/* Submit Button */
.feedback-submit {
    background: linear-gradient(135deg, var(--v5-accent) 0%, var(--v5-accent-dark) 100%) !important;
    border: none !important;
    border-radius: var(--v5-radius-sm) !important;
    font-family: var(--v5-font) !important;
    font-weight: 600 !important;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3) !important;
    transition: all 0.2s ease !important;
}

.feedback-submit:hover {
    background: linear-gradient(135deg, var(--v5-accent-dark) 0%, var(--v5-accent) 100%) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
}

.feedback-submit:disabled {
    background: var(--v5-gray-300) !important;
    box-shadow: none !important;
}

/* Success State */
.feedback-success i {
    color: var(--v5-accent) !important;
}

.feedback-success h4 {
    color: var(--v5-gray-800) !important;
    font-family: var(--v5-font) !important;
}

.feedback-success p {
    color: var(--v5-gray-500) !important;
    font-family: var(--v5-font) !important;
}

/* ============================================== */
/* 24. SELECTION & FOCUS                          */
/* ============================================== */

::selection {
    background: var(--v5-primary);
    color: white;
}

*:focus-visible {
    outline: 3px solid rgba(30, 58, 95, 0.3) !important;
    outline-offset: 2px !important;
}

/* ============================================== */
/* 25. ANIMATIONS                                 */
/* ============================================== */

@keyframes v5-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.v5-animate {
    animation: v5-fade-in 0.3s ease-out;
}

/* ============================================== */
/* 26. UTILITY CLASSES                            */
/* ============================================== */

.v5-mono { font-family: var(--v5-font-mono) !important; }
.v5-text-primary { color: var(--v5-primary) !important; }
.v5-text-accent { color: var(--v5-accent) !important; }
.v5-bg-primary { background: var(--v5-primary) !important; color: white !important; }
.v5-bg-accent { background: var(--v5-accent) !important; color: white !important; }

/* ============================================== */
/* 27. PRINT STYLES                               */
/* ============================================== */

@media print {
    .main-header,
    .main-footer,
    .btn,
    .user-nav,
    .feedback-trigger,
    #plot-config-card {
        display: none !important;
    }

    .page-container {
        box-shadow: none !important;
        max-width: 100% !important;
    }

    .page-header {
        background: var(--v5-gray-100) !important;
        color: black !important;
        -webkit-print-color-adjust: exact !important;
    }
}

/* ============================================== */
/* 28. LANDING PAGE - HERO SECTION               */
/* ============================================== */

.hero-section {
    background: linear-gradient(135deg, var(--v5-primary-dark) 0%, var(--v5-primary) 50%, var(--v5-primary-light) 100%);
    color: white;
    padding: 80px 20px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.hero-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.3;
}

.hero-content {
    max-width: 900px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

.hero-title {
    font-size: 2.8rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    color: white !important;
}

.hero-subtitle {
    font-size: 1.3rem;
    opacity: 0.95;
    margin-bottom: 35px;
    max-width: 700px;
    margin-left: auto;
    margin-right: auto;
    color: white !important;
}

.hero-cta {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
    margin-top: 10px;
}

.hero-cta .btn {
    padding: 18px 40px !important;
    font-size: 1.2rem !important;
    border-radius: var(--v5-radius-md) !important;
    font-weight: 700 !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.hero-cta .btn:hover {
    transform: translateY(-3px) scale(1.02) !important;
}

.btn-hero-primary {
    background: linear-gradient(135deg, var(--v5-accent) 0%, var(--v5-accent-dark) 100%) !important;
    color: white !important;
    border: none !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
}

.btn-hero-primary:hover {
    box-shadow: 0 8px 30px rgba(16, 185, 129, 0.6) !important;
    color: white !important;
}

.btn-hero-secondary {
    background-color: white !important;
    color: var(--v5-primary) !important;
    border: 3px solid white !important;
    box-shadow: 0 4px 15px rgba(255,255,255,0.3) !important;
}

.btn-hero-secondary:hover {
    background-color: var(--v5-gray-50) !important;
    color: var(--v5-primary-dark) !important;
    box-shadow: 0 6px 25px rgba(255,255,255,0.5) !important;
}

/* ============================================== */
/* 29. LANDING PAGE - SECTION TITLES             */
/* ============================================== */

.landing-section {
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.section-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: var(--v5-gray-800);
}

.section-subtitle {
    text-align: center;
    color: var(--v5-gray-500);
    font-size: 1.1rem;
    margin-bottom: 40px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

/* ============================================== */
/* 30. LANDING PAGE - FEATURE CARDS              */
/* ============================================== */

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 25px;
}

.feature-card {
    background: var(--v5-white);
    border-radius: var(--v5-radius-md);
    padding: 30px;
    text-align: center;
    box-shadow: var(--v5-shadow-sm);
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid var(--v5-gray-200);
}

.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--v5-shadow-lg);
}

.feature-icon {
    width: 70px;
    height: 70px;
    background: linear-gradient(135deg, var(--v5-primary), var(--v5-primary-light));
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
    color: white;
    font-size: 1.8rem;
}

.feature-card h3 {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 12px;
    color: var(--v5-gray-800) !important;
}

.feature-card p {
    color: var(--v5-gray-500);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

/* ============================================== */
/* 31. LANDING PAGE - CTA SECTION                */
/* ============================================== */

.cta-section {
    background: linear-gradient(135deg, var(--v5-primary) 0%, var(--v5-primary-light) 100%);
    padding: 60px 20px;
    text-align: center;
    color: white;
}

.cta-section h2 {
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px;
    color: white !important;
}

.cta-section p {
    font-size: 1.1rem;
    opacity: 0.95;
    margin-bottom: 30px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    color: white !important;
}

.cta-section .btn {
    padding: 14px 40px !important;
    font-size: 1.1rem !important;
    border-radius: var(--v5-radius-sm) !important;
    font-weight: 600 !important;
    background: var(--v5-accent) !important;
    color: white !important;
    border: none !important;
    transition: transform 0.2s, box-shadow 0.2s !important;
}

.cta-section .btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(16, 185, 129, 0.4) !important;
    background: var(--v5-accent-dark) !important;
}

/* ============================================== */
/* 32. LANDING PAGE - STICKY BANNERS             */
/* ============================================== */

.sticky-launch-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, var(--v5-primary) 0%, var(--v5-primary-light) 100%);
    color: white;
    padding: 10px 20px;
    text-align: center;
    z-index: 1050;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    flex-wrap: wrap;
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

.sticky-launch-banner.hidden {
    display: none;
}

.sticky-launch-banner span {
    font-size: 0.95rem;
    font-weight: 500;
    color: white !important;
}

.sticky-launch-banner a {
    background: var(--v5-accent);
    color: white;
    padding: 6px 16px;
    border-radius: 20px;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.9rem;
    transition: transform 0.2s;
}

.sticky-launch-banner a:hover {
    transform: scale(1.05);
}

.sticky-launch-banner .close-banner {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    padding: 4px 10px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 1.2rem;
    line-height: 1;
}

.sticky-launch-banner .close-banner:hover {
    background: rgba(255,255,255,0.3);
}

/* Adjust body padding when banner is visible */
body.has-sticky-banner {
    padding-top: 50px;
}

/* Sticky Bottom CTA */
.sticky-bottom-cta {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(135deg, var(--v5-primary) 0%, var(--v5-primary-light) 100%);
    padding: 12px 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
    z-index: 1040;
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    transform: translateY(100%);
    transition: transform 0.4s ease;
}

.sticky-bottom-cta.visible {
    transform: translateY(0);
}

.sticky-bottom-cta-text {
    color: white !important;
    font-size: 0.95rem;
    font-weight: 500;
}

.sticky-bottom-cta-text strong {
    font-weight: 700;
}

.sticky-bottom-cta .btn-cta {
    background: linear-gradient(135deg, var(--v5-accent) 0%, var(--v5-accent-dark) 100%);
    color: white;
    padding: 10px 25px;
    border-radius: var(--v5-radius-sm);
    font-weight: 700;
    text-decoration: none;
    transition: transform 0.2s, box-shadow 0.2s;
    white-space: nowrap;
}

.sticky-bottom-cta .btn-cta:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.5);
}

.sticky-bottom-cta .close-cta {
    background: rgba(255,255,255,0.2);
    border: none;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.1rem;
    line-height: 1;
}

.sticky-bottom-cta .close-cta:hover {
    background: rgba(255,255,255,0.3);
}

/* ============================================== */
/* 33. LANDING PAGE - FREE BADGE                 */
/* ============================================== */

.free-badge {
    display: inline-block;
    background: linear-gradient(135deg, var(--v5-accent) 0%, var(--v5-accent-dark) 100%);
    color: white;
    padding: 8px 24px;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 25px;
    box-shadow: 0 4px 15px rgba(16, 185, 129, 0.4);
}

/* ============================================== */
/* 34. RESPONSIVE - LANDING PAGE                 */
/* ============================================== */

@media (max-width: 992px) {
    .hero-title {
        font-size: 2.2rem;
    }

    .hero-subtitle {
        font-size: 1.1rem;
    }
}

@media (max-width: 576px) {
    .hero-section {
        padding: 50px 15px;
    }

    .hero-title {
        font-size: 1.8rem;
    }

    .hero-cta .btn {
        width: 100%;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .sticky-bottom-cta {
        flex-direction: column;
        gap: 10px;
        padding: 15px;
    }

    .sticky-bottom-cta-text {
        text-align: center;
        font-size: 0.85rem;
    }
}

/* ============================================
   Dashboard Analysen-Tabelle - Kompakte Spalten
   ============================================ */
#analyses-table {
    table-layout: fixed !important;
    width: 100% !important;
    font-size: 0.85rem !important;
}

#analyses-table th,
#analyses-table td {
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px 6px !important;
    vertical-align: middle !important;
}

#analyses-table th {
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

/* Spaltenbreiten - kompakter */
#analyses-table th:nth-child(1),
#analyses-table td:nth-child(1) { width: 28px !important; }      /* Checkbox */
#analyses-table th:nth-child(2),
#analyses-table td:nth-child(2) { width: 20% !important; }       /* Name */
#analyses-table th:nth-child(3),
#analyses-table td:nth-child(3) { width: 45px !important; }      /* Typ */
#analyses-table th:nth-child(4),
#analyses-table td:nth-child(4) { width: 50px !important; }      /* Status */
#analyses-table th:nth-child(5),
#analyses-table td:nth-child(5) { width: 10% !important; }       /* Tags */
#analyses-table th:nth-child(6),
#analyses-table td:nth-child(6) { width: 65px !important; }      /* Team */
#analyses-table th:nth-child(7),
#analyses-table td:nth-child(7) { width: 75px !important; }      /* Erstellt */
#analyses-table th:nth-child(8),
#analyses-table td:nth-child(8) { width: 40px !important; }      /* Template */
#analyses-table th:nth-child(9),
#analyses-table td:nth-child(9) { width: 80px !important; }      /* Aktionen */

/* Name und Tags dürfen umbrechen */
#analyses-table td:nth-child(2),
#analyses-table td:nth-child(5) {
    white-space: normal;
    word-break: break-word;
}

/* Andere Zellen nicht umbrechen */
#analyses-table td:nth-child(3),
#analyses-table td:nth-child(4),
#analyses-table td:nth-child(6),
#analyses-table td:nth-child(7),
#analyses-table td:nth-child(8),
#analyses-table td:nth-child(9) {
    white-space: nowrap;
}

/* Edit-Buttons in der Tabelle immer sichtbar */
#analyses-table .edit-name-btn,
#analyses-table .edit-tags-btn,
#analyses-table .edit-team-btn {
    opacity: 0.6 !important;
    font-size: 0.75rem !important;
}

#analyses-table .edit-name-btn:hover,
#analyses-table .edit-tags-btn:hover,
#analyses-table .edit-team-btn:hover {
    opacity: 1 !important;
}

/* Kompaktere Badges */
#analyses-table .badge {
    font-size: 0.7rem !important;
    padding: 2px 5px !important;
}

/* Kompaktere Action-Buttons */
#analyses-table .btn-group .btn {
    padding: 2px 5px !important;
}

#analyses-table .btn-group .btn i {
    font-size: 0.8rem !important;
}