/**
 * OptionFinder Homepage Styles - COMPLETE VERSION
 * Includes base layout + Live Market Metrics Integration
 * 
 * @package OptionFinder
 * @version 4.0.2 - VIX Terminstruktur Update
 * 
 * CHANGELOG v4.0.0:
 * - NEU: VIX Terminstruktur 2-Bereich Balken (Backwardation <-> Contango)
 * - NEU: VIX Prozent-Skala (-10%, -5%, 0%, +5%, +10%)
 * - NEU: .of-kpi-bar__track--vix Gradient
 * - NEU: .of-kpi-bar__scale--vix-pct Positionierung
 * - Alte --market Klasse bleibt für Kompatibilität
 * 
 * CHANGELOG v3.0.0:
 * - 6-Farben-Gradienten für alle KPI-Balken
 * - Absolute Skalenpositionen (0,30,50,70,100 etc.)
 * - Live-Daten aus Datenbank
 * 
 * CHANGELOG v2.0.1:
 * - Neues Badge: "of-badge--selected" (orange) hinzugefügt
 */

/* ==========================================================================
   CSS CUSTOM PROPERTIES (FARBEN)
   ========================================================================== */

:root {
    /* Slate (Grau) */
    --of-color-slate-50: #f8fafc;
    --of-color-slate-100: #f1f5f9;
    --of-color-slate-200: #e2e8f0;
    --of-color-slate-300: #cbd5e1;
    --of-color-slate-400: #94a3b8;
    --of-color-slate-500: #64748b;
    --of-color-slate-600: #475569;
    --of-color-slate-700: #334155;
    --of-color-slate-800: #1e293b;
    --of-color-slate-900: #0f172a;
    
    /* Teal (Türkis - Hauptfarbe) */
    --of-color-teal-50: #f0fdfa;
    --of-color-teal-100: #ccfbf1;
    --of-color-teal-200: #99f6e4;
    --of-color-teal-300: #5eead4;
    --of-color-teal-400: #2dd4bf;
    --of-color-teal-500: #14b8a6;
    --of-color-teal-600: #0d9488;
    --of-color-teal-700: #0f766e;
    --of-color-teal-800: #115e59;
    
    /* Rose (Rot für Danger) */
    --of-color-rose-50: #fff1f2;
    --of-color-rose-200: #fecdd3;
    --of-color-rose-500: #f43f5e;
    --of-color-rose-700: #be123c;
    
    /* Amber (Orange für Medium) */
    --of-color-amber-50: #fffbeb;
    --of-color-amber-200: #fde68a;
    --of-color-amber-500: #f59e0b;
    --of-color-amber-700: #b45309;
    
    /* Violet (für IC Strategy) */
    --of-color-violet-50: #f5f3ff;
    --of-color-violet-200: #ddd6fe;
    --of-color-violet-700: #6d28d9;
    
    /* Sky (für Call Strategy) */
    --of-color-sky-50: #f0f9ff;
    --of-color-sky-200: #bae6fd;
    --of-color-sky-700: #0369a1;
}

/* ==========================================================================
   HOMEPAGE BASE
   ========================================================================== */

.of-homepage {
    min-height: 100vh;
    background: var(--of-color-slate-50);
}

/* ==========================================================================
   HERO SECTION - BASE LAYOUT
   ========================================================================== */

.of-hero {
    padding: 4rem 1rem;
    background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
}

.of-hero__container {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    gap: 3rem;
    align-items: start;
}

@media (min-width: 1024px) {
    .of-hero__container {
        grid-template-columns: 1fr 1fr;
        gap: 4rem;
    }
}

/* ==========================================================================
   HERO CONTENT (LINKE SPALTE)
   ========================================================================== */

.of-hero__content {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.of-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.of-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    font-size: var(--of-font-size-badge);
    font-weight: 500;
}

.of-badge--live {
    background: var(--of-color-teal-50);
    color: var(--of-color-teal-700);
    border: 1px solid var(--of-color-teal-200);
}

.of-badge--selected {
    background: #fffbeb;
    color: #b45309;
    border: 1px solid #fde68a;
}

.of-badge__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: #fcd34d;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Orange Dot für selected Badge */
.of-badge--selected .of-badge__dot {
    background: #f59e0b;
}

/* Teal Dot für live Badge */
.of-badge--live .of-badge__dot {
    background: var(--of-color-teal-500);
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

.of-hero__title {
    font-size: var(--of-font-size-hero-title);
    font-weight: 700;
    line-height: 1.2;
    color: var(--of-color-slate-900);
    margin: 0;
    margin-bottom: 2rem;
}

@media (min-width: 768px) {
    .of-hero__title {
        font-size: var(--of-font-size-hero-title-lg);
    }
}

.of-hero__highlight {
    color: var(--of-color-teal-600);
}

.of-hero__description {
    font-size: 1.125rem;
    line-height: 1.75;
    color: var(--of-color-slate-600);
    margin: 0;
    margin-bottom: 2.5rem;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.of-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.of-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.5rem;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.2s ease;
    cursor: pointer;
    border: none;
}

.of-btn--primary {
    background: var(--of-color-teal-500);
    color: white;
}

.of-btn--primary:hover {
    background: var(--of-color-teal-600);
    transform: translateY(-2px);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Gradient Button - NEU */
.of-btn--gradient {
    background: linear-gradient(135deg, #14b8a6 0%, #0d9488 50%, #0f766e 100%);
    color: white;
    border: none;
    box-shadow: 
        0 4px 15px rgba(20, 184, 166, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    position: relative;
    overflow: hidden;
}

.of-btn--gradient:hover {
    background: linear-gradient(135deg, #2dd4bf 0%, #14b8a6 50%, #0d9488 100%);
    box-shadow: 
        0 6px 20px rgba(20, 184, 166, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.of-btn--secondary {
    background: white;
    color: var(--of-color-slate-700);
    border: 1px solid var(--of-color-slate-300);
}

.of-btn--secondary:hover {
    background: var(--of-color-slate-50);
    border-color: var(--of-color-slate-400);
}

.of-btn--outline {
    background: transparent;
    color: var(--of-color-slate-700);
    border: 1px solid var(--of-color-slate-300);
}

.of-btn--outline:hover {
    background: var(--of-color-slate-100);
    border-color: var(--of-color-slate-400);
}

.of-btn--full {
    width: 100%;
}

.of-btn__icon {
    flex-shrink: 0;
}

/* ==========================================================================
   KPI CARDS
   ========================================================================== */

.of-hero__kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
}

.of-kpi-card {
    padding: 1.5rem;
    background: white;
    border-radius: 0.75rem;
    border: 1px solid var(--of-color-slate-200);
}

.of-kpi-card__value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--of-color-teal-600);
    margin-bottom: 0.25rem;
}

.of-kpi-card__label {
    font-size: 0.875rem;
    color: var(--of-color-slate-600);
    line-height: 1.4;
}

/* ==========================================================================
   OPPORTUNITIES BOX (RECHTE SPALTE) - BASE
   ========================================================================== */

.of-hero__opportunities {
    position: relative;
}

.of-opportunities-box {
    background: white;
    border-radius: 1rem;
    border: 1px solid var(--of-color-slate-200);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.of-opportunities-box__title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: var(--of-font-size-opportunity-title);
    font-weight: 600;
    color: #b45309;
    margin: 0;
}

.of-opportunities-box__icon {
    color: #f59e0b;
    flex-shrink: 0;
}

.of-opportunities-list {
    display: flex;
    flex-direction: column;
}

.of-opportunity {
    border-bottom: 1px solid var(--of-color-slate-200);
    transition: background 0.2s ease;
}

.of-opportunity:last-child {
    border-bottom: none;
}

/* ==========================================================================
   OPPORTUNITY DETAILS - HORIZONTAL LAYOUT
   ========================================================================== */

.of-opportunity__details {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid #e2e8f0;
}

.of-opportunity__earnings-info {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.625rem;
    border-radius: 0.375rem;
    font-size: 0.875rem;
    font-weight: 500;
    white-space: nowrap;
    background: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.of-opportunity__earnings-info--critical {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.of-opportunity__trend-info {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex: 1;
}

.of-trend-indicator {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: #64748b;
}

.of-trend-text {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    font-size: 0.875rem;
    color: #64748b;
}

.of-icon {
    width: 0.875rem;
    height: 0.875rem;
    display: inline-block;
}

[data-theme="dark"] .of-opportunity__details {
    border-top-color: #334155;
}

[data-theme="dark"] .of-opportunity__earnings-info {
    background: #064e3b;
    color: #6ee7b7;
    border-color: #047857;
}

[data-theme="dark"] .of-opportunity__earnings-info--critical {
    background: #7f1d1d;
    color: #fca5a5;
    border-color: #991b1b;
}

/* ==========================================================================
   NEUE V2.0 KOMPONENTEN - CONTEXT CHIPS IM HEADER
   ========================================================================== */

.of-opportunities-box__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem 0.75rem;
    gap: 1rem;
    background: #fffbeb;
    border-bottom: 1px solid #fde68a;
}

.of-opportunities-box__context {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.of-context-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.25rem 0.5rem;
    border-radius: 9999px;
    border: 1px solid var(--of-color-slate-200);
    background: var(--of-color-slate-50);
    font-size: var(--of-font-size-context-chip);
    color: var(--of-color-slate-600);
    line-height: 1;
}

.of-context-chip__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
}

.of-context-chip__dot--teal {
    background: var(--of-color-teal-500);
}

.of-context-chip__dot--amber {
    background: var(--of-color-amber-500);
}

/* ==========================================================================
   OPPORTUNITIES - DETAILED LAYOUT (V2.0)
   ========================================================================== */

.of-opportunity--detailed {
    padding: 1rem 1.25rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.of-opportunity--detailed:hover {
    background: var(--of-color-slate-50);
}

.of-opportunity__row-1 {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
}

.of-opportunity__identity {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    min-width: 0;
    flex: 1;
}

.of-opportunity__ticker-badge {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 0.75rem;
    background: var(--of-color-slate-100);
    color: var(--of-color-slate-700);
    font-weight: 600;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.of-opportunity__info {
    min-width: 0;
    flex: 1;
}

.of-opportunity__name {
    font-weight: 500;
    color: var(--of-color-slate-900);
    font-size: 0.9375rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.of-opportunity__ticker-text {
    font-size: 0.875rem;
    color: var(--of-color-slate-500);
    margin-top: 0.125rem;
}

/* Strategy Chips */
.of-opportunity__strategies {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex-shrink: 0;
}

.of-strategy-chip {
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid;
    line-height: 1;
}

.of-strategy-chip--put {
    background: var(--of-color-teal-50);
    color: var(--of-color-teal-700);
    border-color: var(--of-color-teal-200);
}

.of-strategy-chip--ic {
    background: var(--of-color-violet-50);
    color: var(--of-color-violet-700);
    border-color: var(--of-color-violet-200);
}

.of-strategy-chip--call {
    background: var(--of-color-sky-50);
    color: var(--of-color-sky-700);
    border-color: var(--of-color-sky-200);
}

/* Score Section */
.of-opportunity__score-section {
    flex-shrink: 0;
    width: 10rem;
    text-align: right;
}

.of-opportunity__score-label {
    font-size: 0.75rem;
    color: var(--of-color-slate-500);
    margin-bottom: 0.25rem;
}

.of-opportunity__score-bar {
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--of-color-slate-200);
    overflow: hidden;
    margin-bottom: 0.25rem;
}

.of-opportunity__score-fill {
    height: 100%;
    border-radius: 9999px;
    transition: width 0.3s ease;
}

.of-opportunity__score-fill--high {
    background: var(--of-color-teal-500);
}

.of-opportunity__score-fill--medium {
    background: var(--of-color-amber-500);
}

.of-opportunity__score-fill--low {
    background: var(--of-color-rose-500);
}

.of-opportunity__score-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--of-color-slate-800);
}

/* ==========================================================================
   METRICS GRID (V2.0)
   ========================================================================== */

.of-opportunity__metrics-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .of-opportunity__metrics-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

.of-metric-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 0.375rem 0.5rem;
    border-radius: 0.5rem;
    background: var(--of-color-slate-50);
    border: 1px solid var(--of-color-slate-200);
    font-size: 0.875rem;
}

.of-metric-box__label {
    color: var(--of-color-slate-500);
    font-size: 0.875rem;
}

.of-metric-box__value {
    font-weight: 500;
    color: var(--of-color-slate-800);
    white-space: nowrap;
}

.of-metric-box--ivr {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.of-metric-box__ivr-bar {
    flex: 1;
    height: 0.375rem;
    border-radius: 9999px;
    background: var(--of-color-slate-200);
    overflow: hidden;
    min-width: 2rem;
}

.of-metric-box__ivr-fill {
    height: 100%;
    background: var(--of-color-teal-400);
    transition: width 0.3s ease;
}

/* ==========================================================================
   HINTS & CONTEXT ROW (V2.0)
   ========================================================================== */

.of-opportunity__hints {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.875rem;
}

.of-hint-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.of-hint-badge__icon {
    flex-shrink: 0;
}

.of-hint-badge--safe {
    background: var(--of-color-teal-50);
    color: var(--of-color-teal-700);
    border-color: var(--of-color-teal-200);
}

.of-hint-badge--danger {
    background: var(--of-color-rose-50);
    color: var(--of-color-rose-700);
    border-color: var(--of-color-rose-200);
}

.of-hint-text {
    color: var(--of-color-slate-500);
    font-size: 0.8125rem;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.of-opportunities-box__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    padding: 1rem 1.25rem;
    background: var(--of-color-slate-50);
    border-top: 1px solid var(--of-color-slate-200);
}

.of-opportunities-box__footer-actions {
    display: flex;
    gap: 0.5rem;
}

/* ==========================================================================
   RESPONSIVE ANPASSUNGEN
   ========================================================================== */

@media (max-width: 1280px) {
    .of-opportunities-box__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    
    .of-opportunity__row-1 {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .of-opportunity__score-section {
        width: 100%;
    }
}

@media (max-width: 768px) {
    .of-hero {
        padding: 2rem 1rem;
    }
    
    .of-hero__title {
        font-size: 2rem;
    }
    
    .of-opportunity__identity {
        flex-wrap: wrap;
    }
    
    .of-opportunities-box__footer {
        flex-direction: column;
        align-items: stretch;
    }
    
    .of-opportunities-box__footer-actions {
        width: 100%;
    }
    
    .of-opportunities-box__footer-actions .of-btn {
        flex: 1;
    }
}

/* ==========================================================================
   ANIMATIONS & TRANSITIONS
   ========================================================================== */

.of-strategy-chip,
.of-hint-badge,
.of-metric-box {
    transition: all 0.2s ease;
}

.of-opportunity--detailed:hover .of-strategy-chip {
    transform: translateY(-1px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.of-opportunity--detailed:hover .of-metric-box {
    border-color: var(--of-color-slate-300);
}

/* ==========================================================================
   KPI BALKEN MIT GRADIENTEN
   ========================================================================== */

/* Container für alle KPI Balken */
.of-hero__kpi-bars {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Einzelner KPI Balken */
.of-kpi-bar {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Header (Label + Wert) */
.of-kpi-bar__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.of-kpi-bar__label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.of-kpi-bar__icon {
    font-size: 1.5rem;
}

.of-kpi-bar__title {
    font-size: 0.875rem;
    color: var(--of-color-slate-600);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.of-kpi-bar__value-wrapper {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.of-kpi-bar__value-label {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--of-color-slate-900);
}

.of-kpi-bar__value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--of-color-teal-600);
}

/* Balken Track (Hauptbalken) */
.of-kpi-bar__track {
    position: relative;
    height: 2.5rem;
    border-radius: 9999px;
    overflow: hidden;
    background: var(--of-color-slate-100);
    border: 1px solid var(--of-color-slate-200);
}

/* ==========================================================================
   KPI BALKEN GRADIENTEN - ALLE VARIANTEN
   ========================================================================== */

/* Markt Bias (ALTE Version - für Kompatibilität behalten) */
.of-kpi-bar__track--market .of-kpi-bar__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        #b91c1c 0%,
        #ef4444 20%,
        #f97316 40%,
        #fbbf24 60%,
        #22c55e 80%,
        #16a34a 100%
    );
}

/* ============================================
   VIX TERMINSTRUKTUR - NEU v4.0
   2-Bereich Konzept: Backwardation <-> Contango
   ============================================ */

/* VIX Gradient: Rot (Backwardation) -> Gr&uuml;n (Contango) */
.of-kpi-bar__track--vix .of-kpi-bar__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        #b91c1c 0%,      /* Starke Backwardation (< -10%) */
        #dc2626 15%,
        #ef4444 25%,
        #f97316 35%,     /* Leichte Backwardation */
        #fbbf24 45%,     /* Uebergang bei 0% */
        #a3e635 55%,     /* Leichte Contango */
        #22c55e 65%,
        #16a34a 80%,
        #15803d 100%     /* Starke Contango (> +10%) */
    );
}

/* VIX Labels - nur 2 Bereiche (space-between statt space-around) */
.of-kpi-bar__track--vix .of-kpi-bar__labels {
    justify-content: space-between;
    padding: 0 1.5rem;
}

/* P/C RATIO GRADIENT - NEU v2
   
   FARBSCHEMA:
   - 0.4-0.5 (0%-11%):     Dunkelgr&uuml;n (sehr bullish)
   - 0.5-0.6 (11%-22%):    Gr&uuml;n wird heller
   - 0.6-0.7 (22%-33%):    Gr&uuml;n → Orange &Uuml;bergang
   - 0.7-0.8 (33%-44%):    Orange → Gelb/Orange
   - 0.8-0.9 (44%-56%):    Gelb/Orange (Neutral-Mitte)
   - 0.9-1.0 (56%-67%):    Gelb/Orange → Orange
   - 1.0-1.1 (67%-78%):    Orange → Dunkleres Orange
   - 1.1-1.3 (78%-100%):   Dunkelorange → Sattes Rot
   
   ERSETZEN in homepage.css den .of-kpi-bar__track--pcratio .of-kpi-bar__gradient Block:
*/
.of-kpi-bar__track--pcratio .of-kpi-bar__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        #15803d 0%,      /* Dunkelgr&uuml;n - sehr bullish (0.4) */
        #16a34a 11%,     /* Gr&uuml;n (0.5) */
        #22c55e 22%,     /* Hellgr&uuml;n (0.6) */
        #84cc16 28%,     /* Lime - &Uuml;bergang */
        #eab308 33%,     /* Gelb/Gold (0.7) */
        #f59e0b 44%,     /* Orange/Gelb (0.8) */
        #fbbf24 50%,     /* Gelb - Neutral Mitte (0.85) */
        #f59e0b 56%,     /* Orange/Gelb (0.9) */
        #ea580c 67%,     /* Orange (1.0) */
        #dc2626 78%,     /* Rot (1.1) */
        #b91c1c 89%,     /* Dunkelrot (1.2) */
        #991b1b 100%     /* Sattes Rot - bearish (1.3) */
    );
}

/* Score: Standard (darkred -> darkgreen) */
.of-kpi-bar__track--score .of-kpi-bar__gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        #b91c1c 0%,      /* darkred (0-20: sehr schwach) */
        #ef4444 20%,     /* red (20-40: schwach) */
        #f97316 40%,     /* orange (40-60: mittel) */
        #fbbf24 60%,     /* yellow (60-70: gut) */
        #22c55e 80%,     /* green (70-90: sehr gut) */
        #16a34a 100%     /* darkgreen (90-100: exzellent) */
    );
}

/* Labels innerhalb des Balkens */
.of-kpi-bar__labels {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: space-around;
    align-items: center;
    padding: 0 1rem;
    z-index: 1;
}

.of-kpi-bar__label-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
    white-space: nowrap;
}

/* Indikator (wei&szlig;er Punkt mit Linie) */
.of-kpi-bar__indicator {
    position: absolute;
    top: 0;
    bottom: 0;
    transform: translateX(-50%);
    z-index: 2;
}

.of-kpi-bar__indicator::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ffffff;
    transform: translateX(-50%);
    box-shadow: 0 0 8px rgba(255, 255, 255, 0.6);
}

.of-kpi-bar__indicator-dot {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 1rem;
    height: 1rem;
    background: #ffffff;
    border-radius: 50%;
    border: 2px solid var(--of-color-slate-100);
    box-shadow: 
        0 0 0 3px rgba(255, 255, 255, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Skala unter dem Balken - ABSOLUTE POSITIONIERUNG */
.of-kpi-bar__scale {
    position: relative;
    height: 1.5rem;
    font-size: 0.75rem;
    color: var(--of-color-slate-500);
    padding: 0 0.5rem;
    margin-top: 0.5rem;
}

.of-kpi-bar__scale span {
    position: absolute;
    transform: translateX(-50%);
}

/* ==========================================================================
   SKALEN POSITIONIERUNG - ALLE VARIANTEN
   ========================================================================== */

/* VIX Terminstruktur ALTE Skala: 0, 30, 50, 70, 100 (f&uuml;r Kompatibilit&auml;t) */
.of-kpi-bar__scale--vix span:nth-child(1) { left: 0%; transform: translateX(0); }
.of-kpi-bar__scale--vix span:nth-child(2) { left: 37%; }     /* Label "37" bei 37% */
.of-kpi-bar__scale--vix span:nth-child(3) { left: 62%; }     /* Label "62" bei 62% */
.of-kpi-bar__scale--vix span:nth-child(4) { left: 100%; transform: translateX(-100%); }

/* ============================================
   VIX PROZENT-SKALA - NEU v4.0
   Zeigt: -10%, -5%, 0%, +5%, +10%
   ============================================ */
.of-kpi-bar__scale--vix-pct span:nth-child(1) { left: 0%; transform: translateX(0); }
.of-kpi-bar__scale--vix-pct span:nth-child(2) { left: 25%; }
.of-kpi-bar__scale--vix-pct span:nth-child(3) { left: 50%; }
.of-kpi-bar__scale--vix-pct span:nth-child(4) { left: 75%; }
.of-kpi-bar__scale--vix-pct span:nth-child(5) { left: 100%; transform: translateX(-100%); }

/* ==========================================================================
   P/C RATIO SKALA - KORRIGIERT v2
   Neue symmetrische Skala: 0.4-1.3 (0.3er Schritte)
   Lineare Berechnung: (ratio - 0.4) / (1.3 - 0.4) * 100
   
   0.4 → 0%, 0.7 → 33.3%, 1.0 → 66.7%, 1.3 → 100%
   ========================================================================== */

/* ERSETZEN in homepage.css (ca. Zeile 1068-1072): */
.of-kpi-bar__scale--pcratio span:nth-child(1) { left: 0%; transform: translateX(0); }
.of-kpi-bar__scale--pcratio span:nth-child(2) { left: 33.33%; }  /* 0.7 bei 33.3% */
.of-kpi-bar__scale--pcratio span:nth-child(3) { left: 66.67%; }  /* 1.0 bei 66.7% */
.of-kpi-bar__scale--pcratio span:nth-child(4) { left: 100%; transform: translateX(-100%); }

/* OptionFinder Score: 0, 20, 40, 60, 80, 100 */
.of-kpi-bar__scale--score span:nth-child(1) { left: 0%; transform: translateX(0); }
.of-kpi-bar__scale--score span:nth-child(2) { left: 20%; }
.of-kpi-bar__scale--score span:nth-child(3) { left: 40%; }
.of-kpi-bar__scale--score span:nth-child(4) { left: 60%; }
.of-kpi-bar__scale--score span:nth-child(5) { left: 80%; }
.of-kpi-bar__scale--score span:nth-child(6) { left: 100%; transform: translateX(-100%); }

/* Responsive Design f&uuml;r KPI Balken */
@media (max-width: 768px) {
    .of-hero__kpi-bars {
        gap: 1.25rem;
    }
    
    .of-kpi-bar__value {
        font-size: 1.5rem;
    }
    
    .of-kpi-bar__value-label {
        font-size: 1rem;
    }
    
    .of-kpi-bar__track {
        height: 2rem;
    }
    
    .of-kpi-bar__label-text {
        font-size: 0.65rem;
    }
}

/* ==========================================================================
   KPI BALKEN - SECTION HEADER
   ========================================================================== */

.of-hero__kpi-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1rem;
}

.of-hero__kpi-title {
    font-size: var(--of-font-size-kpi-title);
    font-weight: 700;
    color: var(--of-color-slate-900);
    margin: 0;
    margin-top: 4.5rem;
    line-height: 1.2;
}

.of-hero__kpi-subtitle {
    font-size: 1.125rem;
    color: var(--of-color-slate-600);
    margin: 0 0 0.5rem 0;
    line-height: 1.4;
}

/* Container f&uuml;r alle KPI Balken (Duplikat entfernt, schlanker) */
.of-hero__kpi-bars {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Einzelner KPI Balken (schlanker) */
.of-kpi-bar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* Header (Label + Wert) - OHNE Icon */
.of-kpi-bar__header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.25rem;
}

.of-kpi-bar__label {
    display: flex;
    align-items: center;
}

.of-kpi-bar__title {
    font-size: var(--of-font-size-kpi-bar-title);
    color: var(--of-color-slate-600);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.of-kpi-bar__value-wrapper {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.of-kpi-bar__value-label {
    font-size: var(--of-font-size-kpi-value-label);
    font-weight: 600;
    color: var(--of-color-slate-900);
}

.of-kpi-bar__value {
    font-size: var(--of-font-size-kpi-value);
    font-weight: 700;
    color: var(--of-color-teal-600);
}

/* Balken Track (SCHMAL - 1.75rem) */
.of-kpi-bar__track {
    position: relative;
    height: 1.75rem;
    border-radius: 9999px;
    overflow: hidden;
    background: var(--of-color-slate-100);
    border: 1px solid var(--of-color-slate-200);
}

/* Skala unter dem Balken */
.of-kpi-bar__scale {
    position: relative;
    height: 1.5rem;
    font-size: 0.75rem;
    color: var(--of-color-slate-500);
    padding: 0 0.5rem;
}

/* Responsive Design f&uuml;r KPI Section */
@media (max-width: 768px) {
    .of-hero__kpi-title {
        font-size: var(--of-font-size-xl);
    }
    
    .of-hero__kpi-subtitle {
        font-size: var(--of-font-size-kpi-bar-title);
    }
    
    .of-hero__kpi-bars {
        gap: 1rem;
    }
    
    .of-kpi-bar__value {
        font-size: var(--of-font-size-xl);
    }
    
    .of-kpi-bar__value-label {
        font-size: var(--of-font-size-sm);
    }
    
    .of-kpi-bar__track {
        height: 1.5rem;
    }
    
    .of-kpi-bar__label-text {
        font-size: var(--of-font-size-xs);
    }
}

/* Hover-Effekt */
.of-kpi-bar__track:hover {
    transform: scale(1.005);
    transition: transform 0.2s ease;
}

/* Animation f&uuml;r Indikator */
@keyframes pulse-indicator {
    0%, 100% {
        box-shadow: 
            0 0 0 3px rgba(255, 255, 255, 0.3),
            0 2px 8px rgba(0, 0, 0, 0.3);
    }
    50% {
        box-shadow: 
            0 0 0 6px rgba(255, 255, 255, 0.15),
            0 2px 12px rgba(0, 0, 0, 0.4);
    }
}

.of-kpi-bar__indicator-dot {
    animation: pulse-indicator 2s ease-in-out infinite;
}

/* ==========================================================================
   DARK MODE f&uuml;r KPI BALKEN
   ========================================================================== */

[data-theme="dark"] .of-hero__kpi-title {
    color: #f1f5f9;
}

[data-theme="dark"] .of-hero__kpi-subtitle {
    color: #94a3b8;
}

[data-theme="dark"] .of-kpi-bar__title {
    color: #94a3b8;
}

[data-theme="dark"] .of-kpi-bar__value-label {
    color: #f1f5f9;
}

[data-theme="dark"] .of-kpi-bar__value {
    color: #14b8a6;
}

[data-theme="dark"] .of-kpi-bar__track {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .of-kpi-bar__scale {
    margin-top: 0.5rem;
    color: #64748b;
}

/* Dark Mode f&uuml;r VIX Prozent-Skala */
[data-theme="dark"] .of-kpi-bar__scale--vix-pct {
    color: #94a3b8;
}

[data-theme="dark"] .of-kpi-bar__indicator-dot {
    border-color: #0f172a;
}

[data-theme="dark"] .of-kpi-bar__last-update strong {
    color: #cbd5e1;
}

/* ==========================================================================
   DARK MODE SUPPORT - MANUAL TOGGLE
   ========================================================================== */

[data-theme="dark"] body {
    background-color: #0f172a !important;
    color: #f1f5f9 !important;
}

[data-theme="dark"] .of-homepage {
    background: #0f172a;
}

[data-theme="dark"] .of-hero {
    background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);
    color: #f1f5f9;
}

[data-theme="dark"] .of-hero__title {
    color: #f1f5f9;
}

[data-theme="dark"] .of-hero__highlight {
    color: #14b8a6;
}

[data-theme="dark"] .of-hero__description {
    color: #94a3b8;
}

/* KPI CARDS DARK MODE */
[data-theme="dark"] .of-kpi-card {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .of-kpi-card__value {
    color: #14b8a6;
}

[data-theme="dark"] .of-kpi-card__label {
    color: #94a3b8;
}

/* OPPORTUNITIES BOX DARK MODE */
[data-theme="dark"] .of-opportunities-box {
    background: #1e293b;
    border-color: #334155;
}

[data-theme="dark"] .of-opportunities-box__title {
    color: #f1f5f9;
}

[data-theme="dark"] .of-opportunities-box__header {
    background: #1e293b;
    border-bottom-color: #334155;
}

[data-theme="dark"] .of-opportunity {
    border-bottom-color: #334155;
}

[data-theme="dark"] .of-opportunity--detailed:hover {
    background: #0f172a;
}

[data-theme="dark"] .of-opportunity__name {
    color: #f1f5f9;
}

[data-theme="dark"] .of-opportunity__ticker-text {
    color: #94a3b8;
}

[data-theme="dark"] .of-opportunity__ticker-badge {
    background: #334155;
    color: #cbd5e1;
}

/* METRICS DARK MODE */
[data-theme="dark"] .of-metric-box {
    background: #0f172a;
    border-color: #334155;
}

[data-theme="dark"] .of-metric-box__label {
    color: #94a3b8;
}

[data-theme="dark"] .of-metric-box__value {
    color: #f1f5f9;
}

[data-theme="dark"] .of-metric-box__ivr-bar {
    background: #334155;
}

/* SCORE BARS DARK MODE */
[data-theme="dark"] .of-opportunity__score-bar {
    background: #334155;
}

[data-theme="dark"] .of-opportunity__score-label {
    color: #94a3b8;
}

[data-theme="dark"] .of-opportunity__score-value {
    color: #f1f5f9;
}

/* BUTTONS DARK MODE */
[data-theme="dark"] .of-btn--secondary {
    background: #1e293b;
    color: #f1f5f9;
    border-color: #334155;
}

[data-theme="dark"] .of-btn--secondary:hover {
    background: #334155;
}

[data-theme="dark"] .of-btn--outline {
    background: transparent;
    color: #f1f5f9;
    border-color: #334155;
}

[data-theme="dark"] .of-btn--outline:hover {
    background: #1e293b;
}

/* BADGES & CHIPS DARK MODE */
[data-theme="dark"] .of-badge--live {
    background: rgba(20, 184, 166, 0.2);
    color: #5eead4;
    border-color: #0d9488;
}

[data-theme="dark"] .of-badge--selected {
    background: rgba(251, 146, 60, 0.2);
    color: #fcd34d;
    border-color: #f59e0b;
}

[data-theme="dark"] .of-context-chip {
    background: #0f172a;
    border-color: #334155;
    color: #94a3b8;
}

[data-theme="dark"] .of-hint-text {
    color: #94a3b8;
}

/* FOOTER DARK MODE */
[data-theme="dark"] .of-opportunities-box__footer {
    background: #0f172a;
    border-top-color: #334155;
}

/* ==========================================================================
   SYSTEM DARK MODE (f&uuml;r OS-Pr&auml;ferenz ohne Toggle)
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .of-context-chip {
        background: var(--of-color-slate-800);
        border-color: var(--of-color-slate-700);
        color: var(--of-color-slate-300);
    }
    
    .of-opportunity__ticker-badge {
        background: var(--of-color-slate-800);
        color: var(--of-color-slate-300);
    }
    
    .of-metric-box {
        background: var(--of-color-slate-800);
        border-color: var(--of-color-slate-700);
    }
    
    .of-metric-box__label {
        color: var(--of-color-slate-400);
    }
    
    .of-metric-box__value {
        color: var(--of-color-slate-200);
    }
    
    .of-hint-text {
        color: var(--of-color-slate-400);
    }
}

/* ==========================================================================
   BLOCK 4: FOOTER "LETZTE AKTUALISIERUNG"
   ========================================================================== */

.of-opportunities-box__footer {
    padding: 1rem 1.25rem;
    background: var(--of-color-slate-50);
    border-top: 1px solid var(--of-color-slate-200);
    display: flex;
    justify-content: center;
    align-items: center;
}

.of-last-update {
    font-size: 0.75rem;
    color: var(--of-color-slate-500);
    font-weight: 400;
    text-align: center;
}

.of-last-update__time {
    font-weight: 500;
    color: var(--of-color-slate-700);
}

/* Dark Mode f&uuml;r Footer */
[data-theme="dark"] .of-opportunities-box__footer {
    background: #0f172a;
    border-top-color: #334155;
}

[data-theme="dark"] .of-last-update {
    color: #94a3b8;
}

[data-theme="dark"] .of-last-update__time {
    color: #f1f5f9;
}

/* ==========================================================================
   BLOCK 5: Hero Block auf der Startseite
   ========================================================================== */

/* DTE Badge neben OptionFinder Score */
.of-kpi-bar__dte-badge {
    display: inline-block;
    background: rgba(59, 130, 246, 0.15);
    color: #3b82f6;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    margin-left: 0.5rem;
    border: 1px solid rgba(59, 130, 246, 0.3);
    vertical-align: middle;
}

/* Dark Mode */
[data-theme="dark"] .of-kpi-bar__dte-badge {
    background: rgba(59, 130, 246, 0.2);
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.4);
}