/* ============================================================
   Webdesign Erlangen — Custom Page Additions
   ============================================================ */

/* We use index.css for the main structural styling (Navbar, etc.) 
   and tailwind directly. We only need specific structural classes here. */

/* --- Custom Colors mapping to Brand --- */
:root {
    --erlangen-primary:   #3b82f6; /* Keep blue to align with brand */
    --erlangen-accent:    #f59e0b; /* Orange */
}

/* --- Glow Shadows --- */
.shadow-glow-erlangen {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.3), 0 4px 20px rgba(0,0,0,0.1);
}
.hover\:shadow-glow-erlangen:hover {
    box-shadow: 0 0 30px rgba(59, 130, 246, 0.4), 0 4px 20px rgba(0,0,0,0.15);
}

/* --- Stadt-DNA Cards --- */
.stadt-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 24px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
}
.stadt-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--erlangen-primary), var(--erlangen-accent));
    opacity: 0;
    transition: opacity 0.3s ease;
}
.stadt-card:hover { 
    transform: translateY(-3px);
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
}
.stadt-card:hover::before { opacity: 1; }

/* --- Zielgruppen Cards --- */
.zielgruppe-card {
    background: #ffffff;
    border: 1px solid #f1f5f9;
    border-radius: 16px;
    padding: 28px;
    transition: all 0.3s ease;
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.05);
}
.zielgruppe-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

.zielgruppe-icon {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* --- Tags --- */
.tag {
    display: inline-block;
    background: #eff6ff;
    color: var(--erlangen-primary);
    border: 1px solid #bfdbfe;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
}

/* --- Pricing Toggle --- */
.toggle-checkbox:checked {
    right: 0;
    border-color: var(--erlangen-accent);
}
.toggle-checkbox:checked + .toggle-label {
    background-color: var(--erlangen-primary);
}

/* --- Animations --- */
@keyframes fade-in-up {
    from { opacity: 0; transform: translateY(24px); }
    to   { opacity: 1; transform: translateY(0); }
}
.animate-fade-in-up {
    animation: fade-in-up 0.7s ease forwards;
}
.animate-fade-in-up:nth-child(2) { animation-delay: 0.15s; }
.animate-fade-in-up:nth-child(3) { animation-delay: 0.3s; }
.animate-fade-in-up:nth-child(4) { animation-delay: 0.45s; }