.ek-events-grid {
display: flex;
flex-direction: column;
gap: 16px;
} .ek-event-card {
display: flex;
align-items: flex-start;
background-color: #1a2332;
padding: 20px;
border-radius: 12px;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.ek-event-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
} .ek-event-icon {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
margin-right: 16px;
}
.ek-event-icon i,
.ek-event-icon svg {
font-size: 32px;
} .ek-event-content-wrapper {
flex: 1;
display: flex;
flex-direction: column;
} .ek-event-title {
margin: 0 0 12px 0;
font-size: 18px;
font-weight: 600;
line-height: 1.3;
color: #ffffff;
} .ek-event-meta {
display: flex;
flex-wrap: wrap;
gap: 8px;
align-items: center;
} .ek-event-meta-item {
display: flex;
align-items: center;
gap: 6px;
font-size: 14px;
color: #a0aec0;
} .ek-meta-icon {
display: inline-flex;
align-items: center;
color: #718096;
}
.ek-meta-icon i,
.ek-meta-icon svg {
font-size: 14px;
} .ek-event-card.typ-spiel .ek-event-icon {
color: #e74c3c;
}
.ek-event-card.typ-geburtstag .ek-event-icon {
color: #f39c12;
}
.ek-event-card.typ-sonstiges .ek-event-icon {
color: #3498db;
} .ek-events-button {
margin-top: 24px;
text-align: center;
}
.ek-button {
display: inline-block;
padding: 12px 24px;
background-color: #3498db;
color: #ffffff;
text-decoration: none;
border-radius: 6px;
font-weight: 500;
transition: background-color 0.2s ease, transform 0.2s ease;
}
.ek-button:hover {
background-color: #2980b9;
transform: translateY(-1px);
} @media (max-width: 600px) {
.ek-event-card {
padding: 16px;
}
.ek-event-icon {
margin-right: 12px;
}
.ek-event-icon i,
.ek-event-icon svg {
font-size: 24px;
}
.ek-event-title {
font-size: 16px;
margin-bottom: 10px;
}
.ek-event-meta {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
.ek-event-meta-item {
font-size: 13px;
}
} @media (max-width: 400px) {
.ek-event-card {
flex-direction: column;
align-items: flex-start;
}
.ek-event-icon {
margin-right: 0;
margin-bottom: 12px;
}
}