/* Startseite */

.hero { display: flex; align-items: center; gap: 36px; padding: 40px 0 36px; }
.hero__logo {
    width: 200px; height: 200px; flex-shrink: 0; border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(34, 211, 238, .25), 0 0 40px rgba(34, 211, 238, .25), 0 0 80px rgba(192, 38, 211, .18);
    animation: logo-glow 6s ease-in-out infinite alternate;
}
@keyframes logo-glow {
    to { box-shadow: 0 0 0 1px rgba(192, 38, 211, .3), 0 0 46px rgba(192, 38, 211, .3), 0 0 90px rgba(34, 211, 238, .2); }
}
@media (max-width: 639px) {
    .hero { flex-direction: column; align-items: flex-start; gap: 20px; padding-top: 28px; }
    .hero__logo { width: 120px; height: 120px; }
}
.hero__eyebrow {
    display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px;
    padding: 4px 12px; border-radius: 999px;
    border: 1px solid rgba(129, 140, 248, .3); background: rgba(99, 102, 241, .1);
    color: var(--accent-2); font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.hero__title {
    margin: 0; font-size: clamp(2.4rem, 7vw, 4.2rem); font-weight: 900; letter-spacing: -.02em;
    background: linear-gradient(90deg, #e0e7ff, var(--accent-2) 45%, var(--accent-cyan));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
.hero__title span {
    display: block; margin-top: .15em;
    font-size: .45em; font-weight: 800; letter-spacing: .01em;
    color: var(--text-2); -webkit-text-fill-color: var(--text-2);
}
.hero__lead { max-width: 560px; margin: 14px 0 0; color: var(--muted); font-size: 1.05rem; }

.modules { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }

.module-card {
    --c: var(--accent);
    --c-2: var(--accent-2);
    position: relative; display: flex; align-items: flex-start; gap: 16px;
    padding: 22px; min-height: 140px;
    border-radius: var(--radius-lg); border: 1px solid var(--line);
    background: var(--card-glass); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    color: var(--text);
    transition: transform .25s var(--ease), border-color .25s ease, box-shadow .25s ease;
}
a.module-card:hover {
    color: var(--text); transform: translateY(-3px);
    border-color: color-mix(in srgb, var(--c-2) 55%, transparent);
    box-shadow: 0 14px 34px rgba(0, 0, 0, .35), 0 0 24px color-mix(in srgb, var(--c) 25%, transparent);
}
.module-card__icon {
    display: grid; place-items: center; width: 52px; height: 52px; flex-shrink: 0;
    border-radius: 14px; font-size: 1.5rem;
    background: color-mix(in srgb, var(--c) 18%, transparent); color: var(--c-2);
}
.module-card__body { display: flex; flex-direction: column; gap: 6px; padding-right: 20px; }
.module-card__title { font-size: 1.15rem; font-weight: 800; }
.module-card__sub { margin-top: -4px; color: var(--c-2); font-size: .8rem; font-weight: 700; }
.module-card__desc { color: var(--muted); font-size: .92rem; }
.module-card__go { position: absolute; top: 22px; right: 20px; color: var(--faint); transition: transform .25s var(--ease), color .25s ease; }
a.module-card:hover .module-card__go { transform: translateX(4px); color: var(--c-2); }
.module-card__badge {
    position: absolute; bottom: 14px; right: 16px;
    display: inline-flex; align-items: center; gap: 4px;
    font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ok-2);
}
.module-card--soon { border-style: dashed; background: transparent; backdrop-filter: none; color: var(--faint); }
.module-card--soon .module-card__icon { background: rgba(148, 163, 184, .08); color: var(--faint); }
.module-card--soon .module-card__title { color: var(--muted); }

/* Farben je Modul (Key aus app/modules.php) */
.module-card--voting { --c: #6366f1; --c-2: #818cf8; }
.module-card--fov    { --c: #06b6d4; --c-2: #22d3ee; }
.module-card__badge--open { color: var(--c-2); }