:root {
    --ft-dark: #191E2B;       /* Deep Blue */
    --ft-green: #46B82E;      /* Festool Green */
    --ft-gray: #3F3C39;       /* Dark Gray */
    --ft-white: #F4F4F4;
}

body {
    background-color: var(--ft-dark);
    color: var(--ft-white);
    font-family: 'Inter', -apple-system, sans-serif;
    margin: 0;
}

/* Karten-Design */
.ft-card {
    background: #232936;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
}

.ft-card-highlight {
    border-left: 6px solid var(--ft-green) !important;
}

/* Buttons */
.btn-festool {
    background-color: var(--ft-green);
    color: white;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 12px 24px;
    border-radius: 6px;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
}

.btn-festool:hover {
    filter: brightness(1.1);
    box-shadow: 0 0 15px rgba(70, 184, 46, 0.4);
}

/* Pulse-Effekt für Stimmen */
.pulse-vote {
    animation: ft-pulse 0.6s ease-out;
}

@keyframes ft-pulse {
    0% { transform: scale(1); color: white; }
    50% { transform: scale(1.4); color: var(--ft-green); }
    100% { transform: scale(1); }
}

/* HTMX Transitionen für Beamer */
.htmx-swapping { opacity: 0; transition: opacity 1.5s ease-out; }
.htmx-settling { opacity: 1; transition: opacity 2s ease-in; }

/* Die Karte wird rot, schrumpft und wird durchsichtig, bevor sie gelöscht wird */
.ft-card.htmx-swapping {
    opacity: 0;
    transform: scale(0.9) translateX(-20px);
    background-color: rgba(239, 68, 68, 0.1); /* Dezent rot */
    transition: all 500ms ease-out;
}

/* Animation für die Admin-Tabelle beim Löschen */
tr.htmx-swapping {
    opacity: 0;
    transform: translateX(-30px);
    background-color: rgba(239, 68, 68, 0.15) !important; /* Roter Blitz-Effekt */
    transition: all 500ms ease-out;
}

/* Optional: Ein sanfter Fade-In für neue Zeilen (falls du später Zeilen hinzufügst) */
tr.htmx-added {
    opacity: 0;
}