/* Register page compact v3 - with background images */
.reg-page { padding: 10px 24px !important; }
.reg-container { max-width: 640px !important; }
.reg-container h1 { font-size: 22px !important; margin-bottom: 6px !important; }
.reg-subtitle { font-size: 15px !important; margin-bottom: 18px !important; }
.role-cards { gap: 10px !important; margin-bottom: 14px !important; }
.role-card {
    padding: 16px 18px !important;
    position: relative !important;
    overflow: hidden !important;
    min-height: 110px !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: flex-end !important;
    background-size: cover !important;
    background-position: center !important;
}
.role-card::before {
    content: "" !important;
    position: absolute !important;
    inset: 0 !important;
    background: linear-gradient(to top, rgba(20,20,24,0.92) 40%, rgba(20,20,24,0.45) 100%) !important;
    z-index: 0 !important;
    transition: background 0.3s !important;
}
.role-card:hover::before {
    background: linear-gradient(to top, rgba(20,20,24,0.95) 40%, rgba(20,20,24,0.35) 100%) !important;
}
.light-mode .role-card::before {
    background: linear-gradient(to top, rgba(255,255,255,0.92) 40%, rgba(255,255,255,0.5) 100%) !important;
}
.light-mode .role-card:hover::before {
    background: linear-gradient(to top, rgba(255,255,255,0.95) 40%, rgba(255,255,255,0.4) 100%) !important;
}
.role-card > * { position: relative !important; z-index: 1 !important; }
.role-card h2 { font-size: 15px !important; margin-bottom: 3px !important; color: #fff !important; }
.role-card p { font-size: 12.5px !important; line-height: 1.4 !important; margin-bottom: 6px !important; }
.light-mode .role-card h2 { color: #1a1a1e !important; }
.role-benefits { display: none !important; }
.role-icon { margin-bottom: 6px !important; }
.role-icon svg { width: 22px !important; height: 22px !important; }
.role-cta { font-size: 12.5px !important; }
.reg-login { font-size: 14px !important; }

/* Background images per card */
a.role-card[href*="zuhoerer"] { background-image: url(/img/zuhoerer_frau.webp) !important; }
a.role-card[href*="publisher"] { background-image: url(/img/publisher1.webp) !important; }
a.role-card[href*="speaker"] { background-image: url(/img/speaker1.webp) !important; }
a.role-card[href*="advertiser"],
a.role-card[href*="werbepartner"] { background-image: url(/img/advertiser.webp) !important; }