/* ============================================
       DEMO CONTAINER
       ============================================ */
    .states-demo-container {
        background: var(--bg-secondary);
        border-radius: 8px;
        border: 1px solid var(--border-color);
        padding: 1.5rem;
        margin: 1rem 0;
    }

    .states-demo-nav {
        display: flex;
        gap: 1.5rem;
        flex-wrap: wrap;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .states-demo-nav a {
        color: var(--text);
        text-decoration: none;
        padding: 0.5rem 1rem;
        border-radius: 4px;
        transition: all 0.2s ease;
        display: inline-block;
    }

    /* ============================================
       ACTIVE STATE DEMOS
       ============================================ */

    /* Variante 1: Background */
    .active-demo-bg a.active {
        background: var(--accent-blue);
        color: white;
    }

    /* Variante 2: Underline */
    .active-demo-underline a {
        position: relative;
    }

    .active-demo-underline a.active::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 2px;
        background: var(--accent-blue);
    }

    /* Variante 3: Border Left */
    .active-demo-border a.active {
        border-left: 3px solid var(--accent-blue);
        padding-left: calc(1rem - 3px);
        background: var(--bg-tertiary);
    }

    /* Variante 4: Font Weight */
    .active-demo-bold a.active {
        font-weight: 700;
        color: var(--accent-blue);
    }

    /* ============================================
       HOVER EFFECTS DEMOS
       ============================================ */

    /* Variante 1: Simple Color */
    .hover-demo-color a:hover {
        color: var(--accent-blue);
    }

    /* Variante 2: Background */
    .hover-demo-bg a:hover {
        background: var(--bg-tertiary);
        color: var(--accent-blue);
    }

    /* Variante 3: Underline Animation */
    .hover-demo-underline a {
        position: relative;
    }

    .hover-demo-underline a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: var(--accent-blue);
        transition: all 0.3s ease;
    }

    .hover-demo-underline a:hover::after {
        left: 0;
        width: 100%;
    }

    /* Variante 4: Scale */
    .hover-demo-scale a:hover {
        transform: scale(1.05);
        color: var(--accent-blue);
    }

    /* Variante 5: Glow/Shadow */
    .hover-demo-glow a:hover {
        color: var(--accent-blue);
        text-shadow: 0 0 10px rgba(79, 172, 254, 0.5);
    }

    /* ============================================
       FOCUS STYLES DEMOS
       ============================================ */

    /* Variante 1: Outline */
    .focus-demo-outline a:focus {
        outline: 2px solid var(--accent-blue);
        outline-offset: 2px;
    }

    /* Variante 2: Box Shadow */
    .focus-demo-shadow a:focus {
        outline: none;
        box-shadow: 0 0 0 3px rgba(79, 172, 254, 0.4);
    }

    /* Variante 3: Background + Outline */
    .focus-demo-combo a:focus {
        outline: 2px solid var(--accent-cyan);
        outline-offset: 2px;
        background: var(--bg-tertiary);
    }

    /* ============================================
       VISITED LINKS DEMO
       ============================================ */
    .visited-demo a:visited {
        color: var(--text-muted);
    }

    .visited-demo a:visited::before {
        content: '✓ ';
        color: var(--accent-green, #4ade80);
    }

    /* ============================================
       COMBINED STATES DEMO
       ============================================ */
    .combined-demo a {
        position: relative;
        padding: 0.75rem 1.25rem;
        border-radius: 6px;
    }

    .combined-demo a::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 0;
        height: 2px;
        background: var(--accent-blue);
        transition: all 0.3s ease;
    }

    /* Hover */
    .combined-demo a:hover {
        color: var(--accent-blue);
        background: var(--bg-tertiary);
    }

    .combined-demo a:hover::after {
        left: 0;
        width: 100%;
    }

    /* Focus */
    .combined-demo a:focus {
        outline: 2px solid var(--accent-cyan);
        outline-offset: 2px;
    }

    /* Active (aktuelle Seite) */
    .combined-demo a.active {
        color: white;
        background: var(--accent-blue);
    }

    .combined-demo a.active::after {
        display: none;
    }

    /* ============================================
       HELFER
       ============================================ */
    .gray {
        color: var(--text-muted);
    }

    .demo-label {
        font-size: 0.85rem;
        color: var(--text-muted);
        margin-bottom: 0.75rem;
    }