/**
 * Footer Component
 * Dezenter Theme-Switcher mit Dots
 */

.app-footer {
    position: fixed;
    bottom: var(--space-md);
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
}

.theme-dots {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-xs);
    background: rgba(0, 0, 0, 0.3);
    border-radius: var(--radius-full);
    backdrop-filter: blur(4px);
}

.theme-dot {
    width: 14px;
    height: 14px;
    padding: 0;
    border: 2px solid transparent;
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: transform var(--duration-fast) var(--ease-bounce),
                border-color var(--duration-fast);
    opacity: 0.7;
}

.theme-dot:hover {
    transform: scale(1.3);
    opacity: 1;
}

.theme-dot.active {
    border-color: rgba(255, 255, 255, 0.9);
    opacity: 1;
}

/* Theme-spezifische Dot-Farben */
.theme-dot[data-theme="rainbow"] {
    background: #ff6b6b;
}

.theme-dot[data-theme="ocean"] {
    background: #38bdf8;
}

.theme-dot[data-theme="space"] {
    background: #a78bfa;
}

.theme-dot[data-theme="forest"] {
    background: #4ade80;
}

.theme-dot[data-theme="candy"] {
    background: #f472b6;
}

.theme-dot[data-theme="neon"] {
    background: #f0abfc;
}

.theme-dot[data-theme="sunset"] {
    background: #fb923c;
}

.theme-dot[data-theme="mint"] {
    background: #2dd4bf;
}

.theme-dot[data-theme="berry"] {
    background: #c084fc;
}

.theme-dot[data-theme="chalk"] {
    background: #fafafa;
}